prime-ui-kit 0.21.2 → 0.21.3

package/dist/skill/reference/components/modal/COMPONENT.md

@@ -32,7 +32,7 @@ Modal.Root                    state and dismiss policy (no DOM)
     │   ├── Modal.Icon        40 tile with a tone fill; the record's Avatar / Thumbnail with no tile, 40
     │   ├── Modal.Title       line 1: <h2>, names the dialog; `loading` holds it with a skeleton
     │   ├── Modal.Description line 2: <p>, describes the dialog; status Badges lead it (tier s)
-    │   └── Modal.Actions     buttons only (icon buttons, a ⋯ Dropdown), tier s, on the title's line
+    │   └── Modal.Actions     one tab-wide switcher, then buttons (icon buttons, a ⋯ Dropdown), tier s, on the title's line
     ├── Modal.Body            the only scrolling zone
     │   └── Modal.Section     <section>: <h3> label, description, Modal.Actions at the heading's end
     └── Modal.Footer          actions, primary last
@@ -85,7 +85,7 @@ No DOM, no ref. State and dismiss policy.
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `className` and the other attributes of the `<header>`. |
 
 ### Modal.Actions
-`ref` → `HTMLDivElement`. Header buttons only (icon buttons, a ⋯ Dropdown; a status goes in `Modal.Description`), tier `s`, on the title's line; under it below 12rem; at the end of a `Modal.Section` heading. In `Modal.Footer`: the start group at the footer tier.
+`ref` → `HTMLDivElement`. Header: a tab-wide switcher (`SegmentedControl`, `Datepicker`), then buttons (a status goes in `Modal.Description`), tier `s`; under the title below 12rem; at the end of a `Modal.Section` heading. In `Modal.Footer`: the start group at the footer tier.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -245,13 +245,13 @@ Motion (`overlayMotion`): the scrim fades in and out over `base`; the dialog fad
 ## Layout & spacing
 - The header has one anatomy, the same in every modal, drawer and sheet:
   ```
-  [mark]  Title                                [icon buttons] [⋯] [×]
+  [mark]  Title                                [tab switcher] [icon buttons] [⋯] [×]
           [status badges] description text
   ```
   - mark — `Modal.Icon`: a glyph on the tone tile, or the record's picture (`Avatar.Root`, `Thumbnail.Root`, also inside your own wrapper component) with no tile; both are 40 px.
   - line 1 — `Modal.Title`; `loading` holds it with a Skeleton while the name loads.
   - line 2 — `Modal.Description`: the record's statuses as `Badge.Root`s first, then the text. The kit sizes the badges (chip tier `s`, the line's 20 px), keeps them first and one gap apart, and wraps the text under them on a narrow panel.
-  - end — `Modal.Actions`: only buttons — ghost icon buttons with a Tooltip and a ⋯ Dropdown — at the close button's tier, centred on the title's line; a status never goes here.
+  - end — `Modal.Actions`: first one switcher for the whole open tab (a `SegmentedControl`, a `Datepicker` period), then the buttons — ghost icon buttons with a Tooltip and a ⋯ Dropdown — at the close button's tier, centred on the title's line; a status never goes here. A control rendered only on some tabs rises in and closes up in its own cell.
 - An action apart from the main pair («Удалить» of a record, «Выйти»): `Modal.Actions` inside `Modal.Footer` puts it at the start, at the footer's tier; stacked on a phone it comes first and the primary stays last.
 - Dialog padding `--prime-modal-padding` (24) on every zone; header 24 top / 20 bottom, body 20 with a 16 gap between blocks, footer 20 top / 24 bottom.
 - Max height = viewport minus `--prime-modal-viewport-padding` on both sides; only the body scrolls.
@@ -317,6 +317,7 @@ Motion (`overlayMotion`): the scrim fades in and out over `base`; the dialog fad
 - Busy or unsaved state lifted out of the form into Root props → put `Modal.Guard` next to the form, inside Content.
 - `key` or a conditional around `Modal.Root` to reset a form → the dialog unmounts at once, without its exit; keep the Root mounted and drive `open`.
 - A status `Badge` in the header's `Modal.Actions`, beside the buttons → put it in `Modal.Description`, before the text: the kit sizes it to the line and keeps it first.
+- A control that applies to the whole tab (the text language, the period) repeated in section headings or put in one section → one switcher in the header's `Modal.Actions`, before the buttons, rendered only on the tabs it applies to.
 - A Badge with its own `size` in `Modal.Description` → leave `size` out: the line gives every header the same chip tier.
 - A `Skeleton` placed by hand in `Modal.Title` or `Modal.Description` → their `loading`.
 - A start-side button («Выйти», «Удалить») put inside `Modal.Meta` → `Modal.Actions` inside `Modal.Footer`; `Meta` is status text only.

package/dist/skill/reference/components/rich-text/COMPONENT.md

@@ -3,11 +3,13 @@
 **Category:** data-display
 **Kind:** primitive
 
-> Text in the chat's Markdown subset outside a message — a bot's welcome text, a template, a comment — rendered as elements, never as HTML.
+> Text in the chat's Markdown subset — or a messenger's plain text with its entities — outside a message (a bot's welcome text, a template, a comment), rendered as elements, never as HTML.
 
 ## When to use
 - A text written with the formatting toolbar of `Composer` or `Textarea formatting` is shown somewhere other than a chat: a bot's settings, a template list, a card.
 - Text from users or bots that may carry `**bold**`, links or a `||spoiler||` and must be rendered safely.
+- A text stored as a messenger sends it — plain text and formatted ranges (Telegram `entities`, VK `format_data`) → `entities`: the text is never read as Markdown, so `**` in it stays text and a range may start inside a word.
+- Moving between the two forms: `getTextEntities(source)` turns a Composer message into `{ text, entities }` for the messenger's API; `getRichTextSource({ text, entities })` turns a stored text back into Markdown for the editor, escaping what would read as markup (`\*`).
 
 ## When not to use
 - The text of a chat message → [Message](../message/COMPONENT.md) `Message.Text` (it marks search matches and holds the meta's room).
@@ -17,13 +19,13 @@
 
 ## Import
 ```tsx
-import { RichText } from "prime-ui-kit";
+import { getRichTextSource, getTextEntities, RichText, type TextEntity } from "prime-ui-kit";
 ```
 
 ## Anatomy
 ```
-RichText         <div>; the source as children
-├─ <p>           a run of text, line breaks kept
+RichText         <div>; the source (or the plain text of `entities`) as children
+├─ <p>           a run of text, line breaks kept; <strong> <em> <u> <s> <code> <a> inside
 ├─ <blockquote>  lines starting with "> "
 └─ <pre>         fenced code
 ```
@@ -37,17 +39,51 @@ RichText         <div>; the source as children
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `string` | — (required) | The source: `**bold**`, `_italic_`, `~~strike~~`, `\|\|spoiler\|\|`, inline and fenced code, links (`[label]` then the address in parentheses), bare URLs, `> ` quotes; line breaks are kept. |
+| `children` | `string` | — (required) | The Markdown subset (`**`, `_`, `__`, `~~`, `\|\|`, code, links, `> ` quotes; `\*` escapes a mark), or with `entities` the plain text they format. |
+| `entities` | `readonly TextEntity[]` | — | The formatted ranges of a messenger's text (Telegram, VK): `children` is then plain text, never read as Markdown, and a range may start inside a word. Bare URLs in it still link. |
 | `labels` | `Partial<RichTextLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className`, `id`, `data-*` and the other div attributes. |
 
+### Types
+
+#### `TextEntity`
+One formatted range of a plain text, as messengers send it (Telegram `MessageEntity`, VK `format_data`): map their type names onto these.
+
+| Field | Type | Default | Description |
+|---|---|---|---|
+| `type` | `"bold" \| "italic" \| "underline" \| "strikethrough" \| "spoiler" \| "code" \| "pre" \| "link" \| "quote"` | — (required) | The format; `pre` and `quote` are blocks (the line breaks at their edges are theirs). A type the kit does not know shows its text. |
+| `offset` | `number` | — (required) | Start in UTF-16 code units (a JS string index, as in Telegram). |
+| `length` | `number` | — (required) | Length in UTF-16 code units; ranges nest and may cross (a crossing one is cut). |
+| `url` | `string` | — | The address of a `link`; without it the range itself is the address. Only http(s), `mailto:` and `tel:` link. |
+| `language` | `string` | — | The language of a `pre` block, kept through the conversions. |
+
+#### `FormattedText`
+A plain text with its formatted ranges: what a messenger sends and takes.
+
+| Field | Type | Default | Description |
+|---|---|---|---|
+| `text` | `string` | — (required) | The plain text. |
+| `entities` | `TextEntity[]` | — (required) | Its formatted ranges. |
+
+### Functions
+
+#### `getTextEntities(source)`
+`(source: string) => FormattedText`
+
+The plain `text` and `entities` of a Markdown source — what a messenger's API takes from a Composer message. Bare URLs make no entity (the messenger links them).
+
+#### `getRichTextSource(value)`
+`(value: FormattedText) => string`
+
+The Markdown source of `{ text, entities }` — to edit a received or stored text in Composer or `Textarea formatting`. Text that would read as markup is escaped (`\*`); an italic or underline inside a word, which the subset cannot hold, is dropped and its text kept.
+
 ## Variants
 One look: the type of its host. Wrap it in `Typography as="div"` to pick a text role.
 
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| masked spoiler | `\|\|text\|\|` in `children` | `role="button"`, `data-state="masked"`: a wash over transparent words |
+| masked spoiler | `\|\|text\|\|` in `children`, or a `spoiler` entity | `role="button"`, `data-state="masked"`: a wash over transparent words |
 | revealed spoiler | a press, `Enter` or `Space` | `data-state="revealed"`: the wash and the words cross-fade on the fade clock; one way, like a chat |
 
 ## Layout & spacing
@@ -82,12 +118,14 @@ One look: the type of its host. Wrap it in `Typography as="div"` to pick a text
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | The welcome text of a support bot shown outside the chat: bold, a link, a quote, code and a spoiler from the chat's Markdown — `children`. |
+| [entities.tsx](examples/entities.tsx) | A bot's greeting stored as a messenger sends it — plain text with formatted ranges — shown with its stars kept as text — `entities`. |
 
 ## Mistakes
 - `dangerouslySetInnerHTML` with a Markdown library for a chat text → `RichText`: the same subset as the chat, never HTML.
 - A `Message.Root` with no time and no author only to render formatted text → `RichText`.
 - Sizing the text with a class on `RichText` → put it inside the host that sets the type.
+- Converting a messenger's entities to Markdown by hand, or showing a text `plain` because it may hold `**` → `entities`; for the editor, `getRichTextSource`.
 
 ## Related
-- **Built from:** `internal/richText` (the parser and the elements, shared with `Message.Text`)
+- **Built from:** `internal/richText` (the Markdown parser, the entities, the conversions and the elements, shared with `Message.Text`)
 - **See also:** [Message](../message/COMPONENT.md), [Composer](../composer/COMPONENT.md), [Textarea](../textarea/COMPONENT.md), [Typography](../typography/COMPONENT.md)

package/dist/skill/reference/components/rich-text/examples/entities.tsx

@@ -0,0 +1,20 @@
+/** A bot's greeting stored as a messenger sends it — plain text with formatted ranges — shown with its stars kept as text — `entities`. */
+import { Card, RichText, type TextEntity } from "prime-ui-kit";
+
+const GREETING = "Здравствуйте! Счета — в личном кабинете. Поле *ИНН* обязательно.";
+
+const GREETING_ENTITIES: TextEntity[] = [
+  { type: "bold", offset: 0, length: 13 },
+  { type: "link", offset: 24, length: 15, url: "https://prime.app/billing" },
+  { type: "underline", offset: 52, length: 11 },
+];
+
+export default function RichTextEntitiesExample() {
+  return (
+    <Card.Root>
+      <Card.Body>
+        <RichText entities={GREETING_ENTITIES}>{GREETING}</RichText>
+      </Card.Body>
+    </Card.Root>
+  );
+}

package/dist/skill/reference/components/select/COMPONENT.md

@@ -224,7 +224,7 @@ No `variant` or `tone`. The trigger is the field look (fill, inset control borde
 | load error | `loadError` | the list is `hidden`; a compact EmptyPage with `role="alert"` and a retry Button (`onRetry`) |
 | state swap | loading ↔ items ↔ load error | the new content fades in (`swapMotion`), the first render stays still |
 | searching | typing in the search | panel `data-searching="true"`; groups without matches and separators hide; the match in an option's title, description and plain text is a `<mark>` in `accent-text` (not in the trigger); the query clears when the list closes (`onSearchChange("")`) |
-| nothing to show | no option matches (and not loading) | a compact EmptyPage with `role="status"`: `labels.empty`, plus `labels.emptyHint` while a query is typed; a `Select.Action` stays under it, highlighted |
+| nothing to show | no option matches (and not loading) | a compact EmptyPage with `role="status"`: `labels.empty` alone; a `Select.Action` stays under it, highlighted |
 | sheet | viewport below 640px | a scrim and a full-width bottom sheet with an `aria-hidden` grab handle around the panel; the sheet carries `data-state`, the panel keeps its role and ref; page scroll locked; a swipe down from the handle closes it |
 | segment | inside `Input.Wrapper` | no frame (label, hint, error, support row): the root is `data-field-segment`, the trigger `data-segment="true"` — a tinted section flush with the box's start edge, a stronger fill on hover and while open, an inset focus ring; named «`aria-label`: value» |
 | option highlighted / selected / disabled | keyboard and pointer / value / `disabled` | `data-highlighted`, `data-selected` + `aria-selected`, `data-disabled` + `aria-disabled`; highlight is a fill only |
@@ -312,7 +312,6 @@ No `variant` or `tone`. The trigger is the field look (fill, inset control borde
 |---|---|---|
 | `search` | `"Поиск"` | Placeholder and accessible name of the search field. |
 | `empty` | `"Ничего не найдено"` | Empty state: no items or nothing matches. |
-| `emptyHint` | `"Попробуйте изменить запрос"` | Second line of the empty state while searching; `""` hides it. |
 | `loading` | `"Загрузка…"` | Announced while `loading` or `loadingMore`. |
 | `retry` | `"Повторить"` | The retry button under `loadError` (`onRetry`). |
 | `clear` | `"Очистить"` | Tooltip of the clear segment. |

package/dist/skill/reference/components/sheet/COMPONENT.md

@@ -32,7 +32,7 @@ Sheet.Root                     state and dismiss policy (no DOM)
    │  ├─ Sheet.Icon            tone tile around an Icon, or the record's Avatar / Thumbnail, no tile, 40
    │  ├─ Sheet.Title           line 1: <h2>; `loading` holds it with a skeleton
    │  ├─ Sheet.Description     line 2: <p>; the record's status Badges lead it (tier s), then the text
-   │  └─ Sheet.Actions         buttons only (icon buttons, a ⋯ Dropdown), tier s, on the title's line
+   │  └─ Sheet.Actions         one tab-wide switcher, then buttons (icon buttons, a ⋯ Dropdown), tier s, on the title's line
    ├─ Sheet.Body               the content; the only scrolling zone (ScrollContainer)
    └─ Sheet.Footer             optional: only for a form with an explicit submit
       ├─ Sheet.Actions         the start group: an action apart from the main pair
@@ -78,7 +78,7 @@ No DOM, no ref. State and dismiss policy.
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `className` and the other attributes of the `<header>`. |
 
 ### Sheet.Actions
-`ref` → `HTMLDivElement`. Header buttons only (icon buttons, a ⋯ Dropdown; a status goes in `Sheet.Description`), tier `s`, on the title's line; under it below 12rem. In `Sheet.Footer`: the start group at the footer tier.
+`ref` → `HTMLDivElement`. Header: a tab-wide switcher (`SegmentedControl`, `Datepicker`), then buttons (a status goes in `Sheet.Description`), tier `s`; under the title below 12rem. In `Sheet.Footer`: the start group at the footer tier.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -190,13 +190,13 @@ Motion: the scrim fades, the sheet slides up over `slow` and down over `base` (`
   - **The header is optional.** Keep it when the content needs a title to be understood (a list of actions on «Заказ № 1042»). Drop it — and with it the × and the hairline — when the content speaks for itself (a calendar opened from a «Дата отгрузки» button): name the sheet with `aria-label` on `Sheet.Content`.
 - The header has one anatomy, the same in every modal, drawer and sheet:
   ```
-  [mark]  Title                                [icon buttons] [⋯] [×]
+  [mark]  Title                                [tab switcher] [icon buttons] [⋯] [×]
           [status badges] description text
   ```
   - mark — `Sheet.Icon`: a glyph on the tone tile, or the record's picture (`Avatar.Root`, `Thumbnail.Root`, also inside your own wrapper component) with no tile; both are 40 px.
   - line 1 — `Sheet.Title`; `loading` holds it with a Skeleton while the name loads.
   - line 2 — `Sheet.Description`: the record's statuses as `Badge.Root`s first, then the text. The kit sizes the badges (chip tier `s`, the line's 20 px), keeps them first and one gap apart, and wraps the text under them on a narrow panel.
-  - end — `Sheet.Actions`: only buttons — ghost icon buttons with a Tooltip and a ⋯ Dropdown — at the close button's tier, centred on the title's line; a status never goes here.
+  - end — `Sheet.Actions`: first one switcher for the whole open tab (a `SegmentedControl`, a `Datepicker` period), then the buttons — ghost icon buttons with a Tooltip and a ⋯ Dropdown — at the close button's tier, centred on the title's line; a status never goes here. A control rendered only on some tabs rises in and closes up in its own cell.
 - A form's action apart from its submit pair: `Sheet.Actions` inside `Sheet.Footer` puts it at the start, at the footer's tier; stacked on a phone it comes first and the primary stays last.
 - The content is the sheet's own, across its width: `Datepicker.Panel` or a column of actions straight in `Sheet.Body` — never a Card or a padded box inside it.
 - Zone padding `--prime-sheet-padding`, width `--prime-sheet-width`. The bottom-sheet surface (`src/internal/sheet.module.css`, shared with a Modal and the floating layers on a phone) gives the height by content up to the top gap, the rounded top, the handle strip and the bottom safe-area inset below the content.
@@ -259,6 +259,7 @@ Motion: the scrim fades, the sheet slides up over `slow` and down over `base` (`
 - A header with only a title over a calendar or a list that already says what it is → drop the header and name the sheet with `aria-label`.
 - No header and no `aria-label` → the dialog has no name; give `Sheet.Content` an `aria-label`.
 - A status `Badge` in the header's `Sheet.Actions`, beside the buttons → put it in `Sheet.Description`, before the text: the kit sizes it to the line and keeps it first.
+- A control that applies to the whole tab (the text language, the period) repeated in section headings or put in one section → one switcher in the header's `Sheet.Actions`, before the buttons, rendered only on the tabs it applies to.
 - A Badge with its own `size` in `Sheet.Description` → leave `size` out: the line gives every header the same chip tier.
 - A `Skeleton` placed by hand in `Sheet.Title` or `Sheet.Description` → their `loading`.
 - A start-side button («Выйти», «Удалить») put inside `Sheet.Meta` → `Sheet.Actions` inside `Sheet.Footer`; `Meta` is status text only.

package/dist/skill/reference/components/smart-filter/COMPONENT.md

@@ -38,7 +38,7 @@ SmartFilter.Root                  state + context, no DOM
 │     │                           (groups: a caption over each group's values, role="group")
 │     ├─ range rows               field label · Input «от» – Input «до» · or a Datepicker range field
 │     ├─ no matches               compact EmptyPage naming the fields with nothing found
-│     └─ footer                   hint · count · Reset Button
+│     └─ footer                   Reset Button, while a filter is set
 └─ SmartFilter.Chips              applied filters as removable Badges · add / clear all Buttons
 ```
 The toolbar and the chips are separate parts so a page can put them in different places; both only need to be inside `Root`, which draws nothing of its own.
@@ -171,7 +171,7 @@ same height and type.
 - The panel is a flush Popover at least as wide as the toolbar (`width="min-trigger"`), by its content up to twice the panel minimum when the toolbar is narrow; every section is a full-width row with its own padding (`--prime-space-3` × `--prime-space-4`, footer `--prime-space-2` × `--prime-space-4`), Dividers run edge to edge, the field label column is at least `--prime-space-24` (a longer name takes its own width, never breaking inside a word); a row narrower than 24rem stacks the label over the values (an intrinsic wrap, no breakpoint).
 - The toolbar is one row of controls (`--prime-space-2` gap): the search first, growing from 9rem (`--prime-space-24` × 1.5), then the filter button at its own width. When less than 9rem is left beside the labelled button, the button shows only its icon and count and stays beside the search, which gives its width instead of wrapping. Every row stays one control high. The search and the button also stand alone: `searchable={false}` keeps the button, empty `fields` keep the search. Search first, filter second — the active filters (`SmartFilter.Chips`) sit under them.
 - Chips are Badges of the toolbar tier on the badge scale (`xs` → `s`), so a tag sits lower than the controls above it; «Добавить фильтр» is a tag of the same tier and «Сбросить все» a LinkButton with the tag's text size.
-- Values and chips wrap with `--prime-space-2` gaps; «Сбросить все» is pushed to the end. The chips row rises in with the first filter and closes up in place with the last (`partPresence`).
+- Values and chips wrap with `--prime-space-2` gaps; «Сбросить все» is pushed to the end. The chips row, and the panel footer with its Reset, rise in with the first filter and close up in place with the last (`partPresence`).
 - Option groups stack `--prime-space-3` apart, a caption `--prime-space-1` above each group's values. A range row holds two equal Inputs with a dash between them, centred on the field label.
 - While typing a search a range row stays only when its field name matches.
 - The root draws nothing: its host places Toolbar and Chips, next to what they filter. A table among other blocks (KPI cards, a chart) takes them in its own tools row — the DataTable `toolbar` (the Toolbar) and `toolbarChips` (the Chips), with `SmartFilter.Root` around the DataTable. A page that is one list takes them in its bar — the Toolbar in `Page.Tools`, the Chips in `Page.Chips`, with `SmartFilter.Root` around `Page.Root`. Elsewhere a host stacks them (a `Card.Body`, a form column).
@@ -208,9 +208,7 @@ same height and type.
 | `clearSearch` | `"Очистить поиск"` | Name of the search clear button. |
 | `searchText` | `"Искать «{query}»"` | The text search row while typing. |
 | `noMatches` | `"{fields} — нет совпадений"` | Fields with nothing found while typing (compact EmptyPage). |
-| `hint` | `"Нажмите значение, чтобы показать только его; «−» справа — скрыть"` | Panel footer hint. |
-| `count` | `"Фильтров: {count}"` | Panel footer counter. |
-| `reset` | `"Сбросить"` | Panel footer reset. |
+| `reset` | `"Сбросить"` | Panel footer reset, shown while a filter is set. |
 | `more` | `"Ещё {count}"` | Collapsed values of a field. |
 | `add` | `"Добавить фильтр"` | Chips row: opens the panel. |
 | `clearAll` | `"Сбросить все"` | Chips row: clears every field. |

package/dist/skill/reference/components/sparkline/COMPONENT.md

@@ -3,7 +3,7 @@
 **Category:** data-display
 **Kind:** primitive
 
-> A small chart — a smooth line over a fading area, a bare line or bars — with its headline: the value at rest, its change and its date; any point can be scrubbed.
+> A small chart — a smooth line over a fading area, a bare line or bars — with its headline: the value at rest, its date and an optional change; any point can be scrubbed.
 
 ## When to use
 - A metric card on a dashboard: revenue, orders, sign-ups over the last days or weeks.
@@ -14,6 +14,8 @@
 - A daily flow over a period — revenue, orders, sign-ups (`summary="sum"`, `compareTo` the previous period).
 - A metric against its plan or average (`reference`), or its change over the whole period (`change="first"`).
 - A series with missing days — a collector that was down (`value: null` breaks the line).
+- A metric where growth is bad — response time, costs, bounce rate (`better="lower"`); a share in percent whose change is in percentage points (`changeUnit="points"`).
+- A period value that is neither the sum nor the mean of the days — a median, unique clients (`value`, `compareTo`).
 
 ## When not to use
 - Exact values on axes, several series, or a legend → a full chart library on the kit's chart palette (`chartColors`); Sparkline has no axes.
@@ -55,10 +57,13 @@ compact:               the plot alone (no head, no value row); loading — the p
 | `variant` | `"area" \| "line" \| "bars"` | `"area"` | `area` — a line over an accent gradient that fades to the bottom; `line` — the line alone, for many trends side by side; `bars` — a bar per point standing on a zero line: up when positive, down (danger) when negative. |
 | `curve` | `"smooth" \| "linear" \| "step"` | `"smooth"` | Shape of the line (`area`, `line`): `smooth` — a monotone cubic through every point that never overshoots a peak or a trough; `linear` — straight segments; `step` — a level per point, changing halfway between points. |
 | `layout` | `"default" \| "compact"` | `"default"` | `default` — the headline over an 80 px plot; `compact` — the plot alone at an `xs` control height with the dot at rest, for a DataTable cell; the scrubbed point shows in the tooltip and `aria-valuetext`. |
-| `change` | `"previous" \| "first" \| "none"` | `"previous"` | What the change badge of a shown point compares it with: `previous` — the point before it; `first` — the first point with a value (the change over the period); `none` — no badge. |
+| `change` | `"previous" \| "first" \| "none"` | `"none"` | What the change badge of a shown point compares it with: `previous` — the point before it; `first` — the first point with a value (the change over the period); `none` — no badge (`compareTo` still badges the rest). |
+| `changeUnit` | `"percent" \| "points"` | `"percent"` | How the change badge measures: `percent` — the relative change («+12%»); `points` — the difference, for a share in percent (`labels.points`, «+0,5 п. п.»). A zero change is neutral, no arrow. |
+| `better` | `"higher" \| "lower"` | `"higher"` | Which way of the change is good: `higher` — growth is `success`, a fall `danger` (revenue, orders); `lower` — a fall is `success`, growth `danger` (response time, costs, bounce rate). The arrow always follows the sign. |
 | `summary` | `"latest" \| "sum" \| "average"` | `"latest"` | What the headline shows at rest: `latest` — the latest point (or `highlight`), for a level (MRR, conversion); `sum` — the period total, for a flow (revenue per day); `average` — the period mean. |
-| `highlight` | `number` | the latest point with a value | Index of the point at rest with `summary="latest"` (the current month): the headline returns to it; `bars` draw the other bars quieter. Not allowed with `sum` / `average`. |
-| `compareTo` | `number` | — | The same summary for the previous period («прошлые 30 дней»): the badge at rest compares the headline with it. Without it a `sum` / `average` headline shows no change at rest. |
+| `highlight` | `number` | the latest point with a value | Index of the point at rest with `summary="latest"` (the current month): the headline returns to it; `bars` draw the other bars quieter. Not allowed with `sum` / `average` / `value`. |
+| `value` | `number \| null` | — | The period's own value at rest, neither a sum nor a mean of the points (a median, unique clients), with the period as the date; `compareTo` is its previous period. Not with `summary` / `highlight`. |
+| `compareTo` | `number` | — | The same summary (or `value`) for the previous period («прошлые 30 дней»): the badge at rest compares the headline with it. Without it a `sum` / `average` / `value` headline shows no change at rest. |
 | `min` | `number` | — | The value axis reaches down to at least this value: a floor of zero, or one scale for several sparklines (a table column). Data below widens the scale, never gets cut. |
 | `max` | `number` | — | The value axis reaches up to at least this value; data above widens the scale. |
 | `reference` | `number` | — | A dashed horizontal line at this value — a plan, a target, an average; the scale holds it and the chart is described by `labels.reference`. |
@@ -86,9 +91,23 @@ compact:               the plot alone (no head, no value row); loading — the p
 ### change
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `previous` | change against the point before the shown one | period-over-period (this month vs the last) | yes |
+| `previous` | change against the point before the shown one | period-over-period (this month vs the last) | |
 | `first` | change against the first point with a value | the change over the whole range («за полгода») | |
-| `none` | no badge | a percentage means nothing (a rate near zero, a count of events) | |
+| `none` | no badge for a point; with `compareTo` the badge at rest stays | the headline alone, or the change only against the previous period | yes |
+
+### changeUnit
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `percent` | «+12%», hidden when the base is 0 or the sign flips | counts, money, durations | yes |
+| `points` | the difference of the values, `labels.points` («+0,5 п. п.») | a share already in percent: conversion, churn, load | |
+
+A change that rounds to zero (one decimal) is a `neutral` badge without an arrow («0%»).
+
+### better
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `higher` | growth `success`, a fall `danger` | revenue, orders, conversion | yes |
+| `lower` | a fall `success`, growth `danger`; the arrow still follows the sign | response time, costs, bounce rate, deal cycle | |
 
 ### summary
 | Value | Looks like | Use when | Default |
@@ -99,6 +118,8 @@ compact:               the plot alone (no head, no value row); loading — the p
 
 Scrubbing always shows the point under the pointer; leaving returns to the summary. With `compareTo` (the same summary for the previous period) the badge at rest is the change against it — «+8% к прошлым 30 дням».
 
+A period value that is neither the sum nor the mean of the points (a median, unique clients over the period) is passed as `value` (in place of `summary`): the headline rests on it like on a sum, with the period as its date and no dot; `compareTo` is the same value for the previous period.
+
 ### layout
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
@@ -118,11 +139,12 @@ Put it in a `Card` for a dashboard tile.
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| at rest | `summary`, `highlight`, `compareTo` | the latest point or `highlight` (`latest`), or the period total / mean with the period as date and no dot (`sum` / `average`, cursor `data-hidden`); the badge compares with `compareTo` when given; the value rolls its digits when `data` changes or scrubbing ends |
+| at rest | `summary`, `highlight`, `value`, `compareTo` | the latest point or `highlight` (`latest`), or the period total / mean / own `value` with the period as date and no dot (`sum` / `average` / `value`, cursor `data-hidden`); the badge compares with `compareTo` when given; the value rolls its digits when `data` changes or scrubbing ends |
 | scrubbing | pointer, touch or the arrow keys | `data-scrubbing` on the root; the guide and the tooltip (`data-state="open"`, date · value, right of the pointer at its height, left of it only where the right has no room in the viewport; from the keyboard beside the point at mid-height) fade in (`fast`), the cursor (or the bar under the pointer) and the headline follow with no easing (direct manipulation), digits change in place |
 | keyboard | arrows, Home, End on the focused plot | `aria-valuenow` / `aria-valuetext`, `data-scrubbing`; the cursor moves to the point at once (keyboard steps are high-frequency); in `bars` the current bar keeps its fill, the others go quiet (`fast` opacity) |
 | settle | pointer leaves, touch ends, focus leaves | back to the point at rest; the tooltip fades out (`fast`) |
-| change hidden | `change="none"`, nothing to compare with, a missing value, a base of 0, or a sign flip | no change Badge: a percentage would mean nothing |
+| change hidden | `change="none"`, nothing to compare with, a missing value, or (`percent`) a base of 0 or a sign flip | no change Badge: the measure would mean nothing |
+| no change | a change that rounds to zero | the change Badge is `neutral`, without an arrow |
 | no data | a point with `value: null` | the line breaks (a point alone between gaps is a dot), no bar; shown, the value reads `labels.empty` (`data-empty`, muted) and the dot fades out, the guide marks the point |
 | new series | a new `data` array | the chart cross-fades in (swap motion); the trend arrow turns half a turn between up and down |
 | compact | `layout="compact"` | `data-layout="compact"` on the root; no headline: `label` names the slider, the point is spoken through `aria-valuetext` and shown in the tooltip |
@@ -152,9 +174,9 @@ Put it in a `Card` for a dashboard tile.
 ### ARIA
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-- The plot is `role="slider"` named by `label`; `aria-valuetext` speaks the point («8 окт: 312 400 ₽», `labels.point`); a point with no data speaks `labels.empty` («8 окт: Нет данных»). At rest with `sum` / `average` it speaks the period and the summary («9 сен – 8 окт: 8 914 000 ₽»). With `reference` the slider is described by `labels.reference` («Ориентир: 3%», `aria-describedby`). The headline follows the point under the pointer or the arrows, in text.
+- The plot is `role="slider"` named by `label`; `aria-valuetext` speaks the point («8 окт: 312 400 ₽», `labels.point`); a point with no data speaks `labels.empty` («8 окт: Нет данных»). At rest with `sum` / `average` / `value` it speaks the period and the summary («9 сен – 8 окт: 8 914 000 ₽»). With `reference` the slider is described by `labels.reference` («Ориентир: 3%», `aria-describedby`). The headline follows the point under the pointer or the arrows, in text.
 - The headline with the value and change reads as plain text.
-- The change carries a sign and an arrow, never color alone; a negative bar goes down, not only red.
+- The change carries a sign and an arrow, never color alone (a zero change is a neutral badge with no arrow); a negative bar goes down, not only red.
 - While `loading` the root is `aria-busy` and the chart is not in the tab order yet.
 - `layout="compact"`: no visible title; `label` is only the slider's name, the point still goes to `aria-valuetext`.
 - The tooltip is `aria-hidden`: it repeats `aria-valuetext` for sighted users. The plot carries `data-row-click-ignore` (and is a slider), so its pointer and keys never open a DataTable row.
@@ -165,9 +187,10 @@ Put it in a `Card` for a dashboard tile.
 | Key | Default | Used for |
 |---|---|---|
 | `point` | `"{label}: {value}"` | Spoken value of the chosen point (`aria-valuetext`); `{label}` and `{value}` are replaced. |
-| `period` | `"{first} – {last}"` | The date line of a `sum` / `average` headline at rest; `{first}` and `{last}` are the labels of the first and the last point. |
+| `period` | `"{first} – {last}"` | The date line of a `sum` / `average` / `value` headline at rest; `{first}` and `{last}` are the labels of the first and the last point. |
 | `empty` | `"Нет данных"` | Shown and spoken in place of the value of a point with `value: null`. |
 | `reference` | `"Ориентир: {value}"` | Description of the chart with a `reference` line (`aria-describedby`); `{value}` is replaced. |
+| `points` | `"{value} п. п."` | The change badge with `changeUnit="points"`; `{value}` is the signed difference. |
 
 ## Examples
 | Example | Shows |
@@ -178,7 +201,9 @@ Put it in a `Card` for a dashboard tile.
 | [compact.tsx](examples/compact.tsx) | Revenue by month per client in a list: the plot alone at a row's height with the dot on the current month, scrubbing shows the month in a tooltip, the label is the chart's accessible name — `layout`, `label`. |
 | [signed-bars.tsx](examples/signed-bars.tsx) | Monthly profit with a sign: losses go below the zero line, the current month rests highlighted and any bar shows its value under the pointer or the arrows — `variant`, `highlight`. |
 | [curve.tsx](examples/curve.tsx) | The same month of active users as a smooth curve, straight segments and steps — `curve`. |
-| [reference.tsx](examples/reference.tsx) | Checkout conversion against its plan: a dashed reference line, the scale from zero to 5% and the change over the whole period — `reference`, `min`, `max`, `change`. |
+| [reference.tsx](examples/reference.tsx) | Checkout conversion against its plan: a dashed reference line, the scale from zero to 5% and the change over the whole period in percentage points — `reference`, `min`, `max`, `change`, `changeUnit`. |
+| [lower-is-better.tsx](examples/lower-is-better.tsx) | First response time by day, where a fall is good: growth paints the change red, a fall green — `better`, `summary`, `compareTo`. |
+| [own-value.tsx](examples/own-value.tsx) | Unique clients in dialogs: the period's own count is neither the sum nor the mean of the days, so the card passes it with the previous period's count — `value`, `compareTo`. |
 | [gaps.tsx](examples/gaps.tsx) | Daily API requests with days the collector was down: the line breaks over a missing day and the headline says there is no data — `data`, `labels`. |
 | [period.tsx](examples/period.tsx) | Another period swaps the series: the line cross-fades in and the headline digits roll to the new total — `data`, `summary`. |
 
@@ -191,6 +216,9 @@ Put it in a `Card` for a dashboard tile.
 - A missing day as `0` → the line dives to zero; pass `value: null`, the line breaks and the headline says there is no data.
 - Compact sparklines in a column, each on its own scale, when rows must be compared by size → pass the column's `min` / `max` to every row.
 - A plan drawn as a second series → `reference`.
+- Response time, costs or bounce rate with growth painted green → `better="lower"`.
+- A conversion's change in percent of itself («+62%» for 2,1% → 3,4%) → `changeUnit="points"` («+1,3 п. п.»).
+- A median or a unique count forced into `summary="sum"` / `"average"`, or a chart dropped for it → pass the period's own `value` with `compareTo`.
 - A grey box while the series loads → `loading`.
 - A full Sparkline squeezed into a table cell, or its headline hidden with CSS → `layout="compact"`.
 

package/dist/skill/reference/components/sparkline/examples/lower-is-better.tsx

@@ -0,0 +1,46 @@
+/** First response time by day, where a fall is good: growth paints the change red, a fall green — `better`, `summary`, `compareTo`. */
+import { Card, Sparkline, type SparklinePoint } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+/** Mean first response by day, minutes, 2 — 15 October 2026. */
+const RESPONSE: SparklinePoint[] = [
+  { label: "2 окт", value: 4.2 },
+  { label: "3 окт", value: 3.8 },
+  { label: "4 окт", value: 4.6 },
+  { label: "5 окт", value: 5.1 },
+  { label: "6 окт", value: 4.4 },
+  { label: "7 окт", value: 3.9 },
+  { label: "8 окт", value: 3.6 },
+  { label: "9 окт", value: 4.8 },
+  { label: "10 окт", value: 5.6 },
+  { label: "11 окт", value: 5.2 },
+  { label: "12 окт", value: 4.9 },
+  { label: "13 окт", value: 5.4 },
+  { label: "14 окт", value: 5.8 },
+  { label: "15 окт", value: 5.5 },
+];
+
+/** The mean of the 14 days before, minutes. */
+const PREVIOUS_AVERAGE = 4.1;
+
+const MINUTES = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 1 });
+
+const formatMinutes = (value: number) => `${MINUTES.format(value)} мин`;
+
+export default function SparklineLowerIsBetterExample() {
+  return (
+    <Card.Root className={styles.card}>
+      <Card.Body>
+        <Sparkline
+          data={RESPONSE}
+          label="Время первого ответа"
+          summary="average"
+          compareTo={PREVIOUS_AVERAGE}
+          better="lower"
+          formatValue={formatMinutes}
+        />
+      </Card.Body>
+    </Card.Root>
+  );
+}

package/dist/skill/reference/components/sparkline/examples/own-value.tsx

@@ -0,0 +1,41 @@
+/** Unique clients in dialogs: the period's own count is neither the sum nor the mean of the days, so the card passes it with the previous period's count — `value`, `compareTo`. */
+import { Card, Sparkline, type SparklinePoint } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+/** Clients who wrote each day, 2 — 15 October 2026; one client writes on many days. */
+const CLIENTS_BY_DAY: SparklinePoint[] = [
+  { label: "2 окт", value: 184 },
+  { label: "3 окт", value: 201 },
+  { label: "4 окт", value: 146 },
+  { label: "5 окт", value: 132 },
+  { label: "6 окт", value: 218 },
+  { label: "7 окт", value: 226 },
+  { label: "8 окт", value: 209 },
+  { label: "9 окт", value: 231 },
+  { label: "10 окт", value: 240 },
+  { label: "11 окт", value: 158 },
+  { label: "12 окт", value: 141 },
+  { label: "13 окт", value: 237 },
+  { label: "14 окт", value: 252 },
+  { label: "15 окт", value: 244 },
+];
+
+/** Unique clients over the period and over the 14 days before. */
+const UNIQUE_CLIENTS = 1_386;
+const PREVIOUS_UNIQUE_CLIENTS = 1_270;
+
+export default function SparklineOwnValueExample() {
+  return (
+    <Card.Root className={styles.card}>
+      <Card.Body>
+        <Sparkline
+          data={CLIENTS_BY_DAY}
+          label="Клиенты в диалогах"
+          value={UNIQUE_CLIENTS}
+          compareTo={PREVIOUS_UNIQUE_CLIENTS}
+        />
+      </Card.Body>
+    </Card.Root>
+  );
+}

package/dist/skill/reference/components/sparkline/examples/reference.tsx

@@ -1,4 +1,4 @@
-/** Checkout conversion against its plan: a dashed reference line, the scale from zero to 5% and the change over the whole period — `reference`, `min`, `max`, `change`. */
+/** Checkout conversion against its plan: a dashed reference line, the scale from zero to 5% and the change over the whole period in percentage points — `reference`, `min`, `max`, `change`, `changeUnit`. */
 import { Card, Sparkline, type SparklinePoint } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -29,6 +29,7 @@ export default function SparklineReferenceExample() {
           min={0}
           max={5}
           change="first"
+          changeUnit="points"
           formatValue={formatPercent}
           labels={{ reference: "План: {value}" }}
         />

package/dist/skill/reference/components/tabs/COMPONENT.md

@@ -199,7 +199,7 @@ Other attributes: Root `data-orientation`, `data-size`, `data-tone`, `data-full-
 
 ## Layout & spacing
 - Tabs are a bar, not a surface: the root has no fill, padding, radius or `data-depth`. On a page or in a `Card.Body`, put it straight into the host's padded region and the panel content straight into `Tabs.Panel`. The strip's edges and the panel content share the host's content edge; the panel stands one tier gap below the strip (`--prime-space-3` … `--prime-space-8`).
-- In a Modal or Drawer the tabs belong to the header: `Tabs.Root` wraps `X.Header` and `X.Body`, `Tabs.List` goes last into the header, the panels into the body. The header becomes the strip (painted like it, no hairline, edge to edge — the header hands the bar its side padding as `--prime-bleed-inline`), the active tab is the body rising into it, and the root renders no box (`display: contents`), so only the body scrolls and the tabs stay in view.
+- In a Modal or Drawer the tabs belong to the header: `Tabs.Root` wraps `X.Header` and `X.Body`, `Tabs.List` goes last into the header, the panels into the body. The header becomes the strip (painted like it, no hairline, edge to edge — the header hands the bar its side padding as `--prime-bleed-inline`), the active tab is the body rising into it, and the root renders no box (`display: contents`), so only the body scrolls and the tabs stay in view. A panel in the body stands its blocks 32 apart — the step between the body's sections — so a tab of self-titled blocks (charts, titled cards) or of `X.Section`s needs no spacing wrapper.
 
 ```tsx
 <Drawer.Content>

package/dist/skill/reference/components/tag-select/COMPONENT.md

@@ -30,7 +30,6 @@ TagSelect                       field frame: label · control · hint/error (sin
 │   ├── input[type=hidden] × value   with `name`
 │   └── chevron
 └── list (portal)               role="listbox", multi-select
-    ├── panel hint              labels.panelHint (`""` hides it)
     ├── «Создать» row           with `creatable`: plus icon · labels.create · preview Badge
     └── option row              Checkbox.Indicator · Badge [· «⋯» Button → Popover menu]; picked options first
 ```
@@ -150,7 +149,6 @@ No `variant` or `tone`. The control is the field look; chips are the kit's soft
 
 | Key | Default | Used for |
 |---|---|---|
-| `panelHint` | `"Выберите вариант или создайте новый"` | Line above the list; `""` hides it. |
 | `create` | `"Создать"` | Action text before the preview of a new tag. |
 | `remove` | `"Удалить {label}"` | Accessible name of a chip's remove button; `{label}` is the tag text. |
 | `more` | `"Показать ещё {count}"` | Accessible name of the «+N» chip; `{count}` is the number of hidden tags. |

package/dist/skill/reference/components/tag-select/examples/overview.tsx

@@ -15,7 +15,6 @@ export default function TagSelectOverviewExample() {
       options={OPTIONS}
       defaultValue={["design"]}
       placeholder="Добавить метку"
-      labels={{ panelHint: "Выберите метку" }}
     />
   );
 }

package/dist/skill/reference/components/tag-select/examples/sizes.tsx

@@ -19,7 +19,6 @@ export default function TagSelectSizesExample() {
           label={size}
           options={OPTIONS}
           defaultValue={["design", "backend"]}
-          labels={{ panelHint: "Выберите метку" }}
         />
       ))}
     </div>

package/dist/skill/reference/components/textarea/COMPONENT.md

@@ -59,7 +59,7 @@ Unlike Input, Textarea has no Wrapper / Field parts: `Textarea.Root` renders the
 | `id` | `string` | — | Id of the `<textarea>` (auto-generated when omitted); hint id is `<id>-hint`, error id is `<id>-error`. |
 | `aria-describedby` | `string` | — | Merged before the hint/error ids. |
 | `onCommit` | `(value: string) => void \| Promise<void>` | — | Inline save: fires with a changed value on blur and Mod+Enter; Escape reverts. Return a Promise: the field shows a spinner and stays editable; a rejection restores the value — show why through `error`. |
-| `formatting` | `boolean` | `false` | Selecting text shows a floating toolbar of seven Markdown tools and enables their hotkeys; a tool wraps the selection, a second press unwraps it. Off: plain text. |
+| `formatting` | `boolean` | `false` | Selecting text shows a floating toolbar of eight Markdown tools and enables their hotkeys; a tool wraps the selection, a second press unwraps it. Off: plain text. |
 | `children` | `ReactNode` | — | Actions in the field's top end corner: `Textarea.CopyButton`, `Textarea.Action`. |
 | `labels` | `Partial<TextareaLabels>` | — | Built-in strings, see Labels. |
 | `className` | `string` | — | Class on the field frame `<div>` (label, field box, support row), as on every field root. |
@@ -116,7 +116,7 @@ Textarea has no `variant` or `tone`: one field treatment (fill, no visible borde
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `focusRing` | `false`: no focus ring; focus fill and caret remain | A single composer field where focus is obvious | `true` |
-| `formatting` | A floating toolbar over a selection (bold, italic, strikethrough, code, spoiler, link, quote) and the Mod-hotkeys; each writes Markdown around the selection | The text is shown later with its Markdown (Message renders the same subset) | `false` |
+| `formatting` | A floating toolbar over a selection (bold, italic, underline, strikethrough, code, spoiler, link, quote) and the Mod-hotkeys; each writes Markdown around the selection | The text is shown later with its Markdown (Message renders the same subset) | `false` |
 | `reserveSupportRow` | Empty support row of hint height | Live validation, fields side by side | `false` |
 | `required` / `optional` | Red `*` / muted «необязательно» after the label | Mark the minority of the form | — / `false` |
 
@@ -164,7 +164,7 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 | `Tab` | Focuses the field, then the buttons in its corner; Enter inserts a line break instead of submitting the form. |
 | `Mod+Enter` | With `onCommit`: saves a changed text; focus stays in the field. |
 | `Escape` | With `formatting`: first clears a selection with the toolbar. With `onCommit`: puts the committed text back. |
-| `Mod + B` · `Mod + I` · `Mod + Shift + X` · `Mod + E` · `Mod + Shift + H` · `Mod + K` · `Mod + Shift + 9` | With `formatting`: bold, italic, strikethrough, code, spoiler, link and quote for the selection; the physical key counts, so any layout works. |
+| `Mod + B` · `Mod + I` · `Mod + U` · `Mod + Shift + X` · `Mod + E` · `Mod + Shift + H` · `Mod + K` · `Mod + Shift + 9` | With `formatting`: bold, italic, underline, strikethrough, code, spoiler, link and quote for the selection; the physical key counts, so any layout works. |
 | `←` · `→` | Move between the formatting buttons. |
 | `Home` · `End` | Jump to the first / last formatting button. |
 
@@ -194,6 +194,7 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 | `formatting` | `"Форматирование"` | Accessible name of the formatting toolbar. |
 | `bold` | `"Жирный"` | Bold tool. |
 | `italic` | `"Курсив"` | Italic tool. |
+| `underline` | `"Подчёркнутый"` | Underline tool (`__…__`). |
 | `strikethrough` | `"Зачёркнутый"` | Strikethrough tool. |
 | `code` | `"Моноширинный"` | Code tool. |
 | `spoiler` | `"Скрытый текст"` | Spoiler tool (`\|\|…\|\|`). |