prime-ui-kit 0.12.0 → 0.13.1

package/src/components/select/examples/saving.tsx

@@ -0,0 +1,47 @@
+/** A choice that saves on the server at once: the picked value shows with a spinner on the trigger, and a refused save rolls it back and says why — `onValueChange`, `error`. */
+import { Select } from "prime-ui-kit";
+import * as React from "react";
+
+/** The server's answer a beat later: an invoice cannot go back to a draft once it is sent. */
+function saveStatus(status: string) {
+  return new Promise<void>((resolve, reject) => {
+    setTimeout(() => {
+      if (status === "draft") reject(new Error("Отправленный счёт нельзя вернуть в черновик"));
+      else resolve();
+    }, 900);
+  });
+}
+
+export default function SelectSavingExample() {
+  const [status, setStatus] = React.useState("sent");
+  const [error, setError] = React.useState<string>();
+
+  return (
+    <Select.Root
+      label="Статус счёта № 2048"
+      value={status}
+      error={error}
+      hint="Сохраняется сразу"
+      onValueChange={async (next) => {
+        setError(undefined);
+        try {
+          await saveStatus(next);
+        } catch (reason) {
+          setError(reason instanceof Error ? reason.message : String(reason));
+          throw reason;
+        }
+        setStatus(next);
+      }}
+    >
+      <Select.Trigger>
+        <Select.Value />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Item value="draft">Черновик</Select.Item>
+        <Select.Item value="sent">Отправлен</Select.Item>
+        <Select.Item value="paid">Оплачен</Select.Item>
+        <Select.Item value="cancelled">Отменён</Select.Item>
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/src/components/sheet/COMPONENT.md

@@ -79,12 +79,12 @@ No DOM, no ref. State and dismiss policy.
 `ref` → `HTMLDivElement`. A row of controls at the end of the header, before the close button: a status Badge, a ⋯ Dropdown, an icon button. Controls inside take tier `s`. + native `<div>` props.
 
 ### Sheet.Icon
-`ref` → `HTMLSpanElement`. An `aria-hidden` 40 px tile with a tone fill.
+`ref` → `HTMLSpanElement`. An `aria-hidden` 40 px tile with a tone fill; around an `Avatar.Root` or a `Thumbnail.Root` (the record's picture) no tile — `data-media`, the avatar sized to 40 px.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Soft fill and icon color. |
-| `children` | `ReactNode` | — (required) | Icon glyph (sized to the m icon). |
+| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Soft fill and icon color; not used around a picture. |
+| `children` | `ReactNode` | — (required) | An icon glyph (sized to the m icon), or the record's picture: an `Avatar.Root` (sized to the tile) or a `Thumbnail.Root`. |
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other attributes of the tile. |
 
 ### Sheet.Title · Sheet.Description
@@ -135,7 +135,7 @@ Sheet has no `variant`, `side` or `size`: it always rises from the bottom edge,
 | `fill` | equal-width buttons in one row | two equal answers | |
 
 ### tone (Icon)
-`neutral` (default) · `accent` · `success` · `warning` · `danger` · `info` — soft tile fill and icon color, as in Modal.
+`neutral` (default) · `accent` · `success` · `warning` · `danger` · `info` — soft tile fill and icon color, as in Modal. Around the record's picture — an `Avatar.Root` or a `Thumbnail.Root` (found by element type) — there is no tile and no tone: `data-media`, the avatar sized to 40 px.
 
 ## States
 | State | Driven by | DOM |

package/src/components/sparkline/COMPONENT.md

@@ -10,6 +10,7 @@
 - A trend next to a number where the shape matters more than exact axes.
 - Values with a sign by period — profit, net new customers (`variant="bars"`: up when positive, down when negative), with the current period highlighted (`highlight`).
 - A detail page header that shows how a value moved.
+- A trend per record in a table cell or a list row (`layout="compact"`): revenue by month per client.
 
 ## 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.
@@ -31,6 +32,7 @@ Sparkline              <div>; the headline and the chart; aria-busy while loadin
    ├─ line:            svg line and area + cursor (guide line and dot, aria-hidden)
    └─ bars:            zero line (chart axis) + a slot per point with its bar (aria-hidden)
 loading:               Skeletons of the date, the value line and the plot
+compact:               the plot alone (no head, no value row); loading — the plot Skeleton
 ```
 
 ## API
@@ -43,7 +45,8 @@ loading:               Skeletons of the date, the value line and the plot
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `data` | `SparklinePoint[]` | — (required) | Points oldest first, `{ label, value }`; `label` names the point («8 окт»). Two or more draw a line. A new array cross-fades the line in. |
-| `label` | `string` | — (required) | Visible title above the value and the accessible name of the chart. |
+| `label` | `string` | — (required) | Visible title above the value and the accessible name of the chart; with `layout="compact"` only the accessible name. |
+| `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 point stays in `aria-valuetext`. |
 | `variant` | `"line" \| "bars"` | `"line"` | `line` — a line over a soft area; `bars` — a bar per point standing on a zero line: up when positive, down (danger) when negative, the value end rounded. |
 | `highlight` | `number` | `the latest point` | Index of the point at rest (the current month): the headline shows it when nobody scrubs and leaving the chart returns to it; `bars` draw the other bars quieter. |
 | `loading` | `boolean` | `false` | The series is on its way: Skeletons of the date, the value and the plot that cross-fade into the data; the title stays, the root is `aria-busy` and the chart is not focusable yet. |
@@ -59,6 +62,12 @@ loading:               Skeletons of the date, the value line and the plot
 | `line` | an accent line over a soft area, a dot on the shown point | a continuous trend (daily revenue) | yes |
 | `bars` | a bar per point from a zero line (`--prime-color-chart-axis`): accent up, danger down, value end rounded | values by period, especially with a sign (monthly profit) | |
 
+### layout
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `default` | the headline (title · date, value · change) over an 80 px plot | a dashboard tile, a page header | yes |
+| `compact` | the plot alone at the height of an `xs` control (28 px), the dot on the point at rest, the guide line only while scrubbing; at least 96 px wide | a DataTable cell or a list row: one trend per record next to its name or total | |
+
 ### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
@@ -76,6 +85,7 @@ Put it in a `Card` for a dashboard tile.
 | settle | pointer leaves, touch ends, focus leaves | back to the point at rest |
 | change hidden | the first point, the previous value is 0, or the sign flips | no change Badge: a percentage would mean nothing |
 | 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`; the guide fades in while scrubbing (`fast`) |
 | loading | `loading` | `aria-busy` on the root; Skeletons in place of the date, the value and the plot; no slider until the data comes; the data cross-fades in |
 
 ## Layout & spacing
@@ -83,6 +93,7 @@ Put it in a `Card` for a dashboard tile.
 - Bars share the width equally, 4 px apart; the zero line sits where 0 falls on the scale (the bottom when every value is positive).
 - In a dashboard, wrap it in `Card.Root` + `Card.Body`; several cards go in a grid.
 - When the value row does not fit (a narrow card), the change badge wraps under the value.
+- `layout="compact"` fits a DataTable row of any tier (plot and dot within an `xs` control height) and takes the cell width, at least `--prime-space-24`; give the column a `width` for an even plot per row. Put the number next to it in its own column: the compact plot shows no value.
 
 ## Accessibility
 
@@ -98,6 +109,7 @@ Put it in a `Card` for a dashboard tile.
 - 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.
 - 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 plot carries `data-row-click-ignore` (and is a slider), so its pointer and keys never open a DataTable row.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -112,6 +124,7 @@ Put it in a `Card` for a dashboard tile.
 | [overview.tsx](examples/overview.tsx) | Revenue for 30 days in a dashboard card: drag across the chart, the headline follows and the trend arrow turns — `data`, `label`, `formatValue`. |
 | [variants.tsx](examples/variants.tsx) | The same week as a line and as bars from zero — `variant`. |
 | [states.tsx](examples/states.tsx) | While the series loads the date, the value and the plot are Skeletons in their own places; the title stays — `loading`. |
+| [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, 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`. |
 | [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`. |
 
@@ -121,7 +134,8 @@ Put it in a `Card` for a dashboard tile.
 - A Sparkline without a container width (inside an inline flex row) → give it a width or put it in a `Card`.
 - A separate tooltip over the bars → the headline already shows the scrubbed point; a floating tooltip would cover the next bar.
 - A grey box while the series loads → `loading`.
+- A full Sparkline squeezed into a table cell, or its headline hidden with CSS → `layout="compact"`.
 
 ## Related
 - **Built from:** [Badge](../badge/COMPONENT.md) (change), [Skeleton](../skeleton/COMPONENT.md) (loading), `Icon` (trend arrow)
-- **See also:** [Card](../card/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)
+- **See also:** [DataTable](../data-table/COMPONENT.md) (a compact Sparkline per row), [Card](../card/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)

package/src/components/sparkline/examples/compact.tsx

@@ -0,0 +1,41 @@
+/** Revenue by month per client in a list: the plot alone at a row's height with the dot on the current month, the label is the chart's accessible name — `layout`, `label`. */
+import { Card, Sparkline, type SparklinePoint, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const MONTHS = ["май", "июн", "июл", "авг", "сен", "окт"];
+
+const CLIENTS = [
+  { name: "ООО «Северный ветер»", revenue: [184, 196, 172, 210, 238, 251] },
+  { name: "АО «Технопарк»", revenue: [612, 580, 545, 498, 470, 455] },
+  { name: "ИП Козлов", revenue: [28, 31, 27, 35, 33, 41] },
+];
+
+const series = (revenue: number[]): SparklinePoint[] =>
+  revenue.map((value, i) => ({ label: MONTHS[i] ?? "", value: value * 1000 }));
+
+const formatRubles = (value: number) => `${value.toLocaleString("ru-RU")} ₽`;
+
+export default function SparklineCompactExample() {
+  return (
+    <Card.Root className={styles.card}>
+      <Card.Body>
+        <div className={styles.list}>
+          {CLIENTS.map((client) => (
+            <div key={client.name} className={styles.listRow}>
+              <Typography as="span" variant="body-s">
+                {client.name}
+              </Typography>
+              <Sparkline
+                layout="compact"
+                data={series(client.revenue)}
+                label={`Выручка по месяцам, ${client.name}`}
+                formatValue={formatRubles}
+              />
+            </div>
+          ))}
+        </div>
+      </Card.Body>
+    </Card.Root>
+  );
+}

package/src/components/sparkline/examples/examples.module.css

@@ -5,6 +5,18 @@
   width: min(100%, var(--prime-modal-width-s));
 }
 
+/* compact: a client list, the name and its trend on one line per client. */
+.list {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(var(--prime-space-24), 1fr);
+  align-items: center;
+  gap: var(--prime-space-3) var(--prime-space-4);
+}
+
+.listRow {
+  display: contents;
+}
+
 /* The period switch above the chart inside the card body. */
 .body {
   display: flex;

package/src/components/textarea/COMPONENT.md

@@ -9,6 +9,7 @@
 - Free-form text longer than one line: comments, descriptions, reviews, support requests, notes.
 - A plain growing input (`rows={1} maxRows={8}`) when a full chat composer with attachments, reply and voice is not needed.
 - Text with a length limit shown to the user (`Textarea.Counter`).
+- Text that is later shown with its Markdown (an announcement, a comment, a task description): `formatting` adds the toolbar and hotkeys Composer has.
 
 ## When not to use
 - A single-line value (name, e-mail, search) → use [Input](../input/COMPONENT.md).
@@ -26,6 +27,7 @@ import { Textarea } from "prime-ui-kit";
 Textarea.Root       label row → field box with the native <textarea> → support row (hint | error · counter)
 ├─ Textarea.CopyButton   children: copies the text from the top end corner (kit-rendered)
 └─ Textarea.Action       children: the consumer's named icon action with a tooltip (button or asChild link)
+(toolbar)           with `formatting`: floating role="toolbar" over a selection — 7 ghost Buttons with Tooltip + Kbd
 Textarea.Counter    goes into Textarea.Root `counter` (right side of the support row)
 ```
 Unlike Input, Textarea has no Wrapper / Field parts: `Textarea.Root` renders the whole field and takes native `<textarea>` props directly. Its children are only the corner actions: they sit in the top end corner as full-height segments flush with the box edges, in JSX order, after the commit status of `onCommit`.
@@ -56,6 +58,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. |
 | `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. |
@@ -112,6 +115,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` |
 | `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` |
 
@@ -135,6 +139,7 @@ Textarea has no `variant` or `tone`: one field treatment (fill, no visible borde
 | saving | `onCommit` returned a pending Promise | `aria-busy="true"` on the textarea, a `Spinner` in the top end corner (`data-commit="pending"`); the field stays editable; a live region says `labels.saving` |
 | saved | the Promise resolved (or `onCommit` returned nothing) | the spinner cross-fades into a success check (`data-commit="saved"`) that fades out; the live region says `labels.saved` |
 | save refused | the Promise rejected | the committed text is put back (unless the person typed on); the owner shows why through `error` |
+| selection | `formatting` and a non-empty selection while the focus is in the field or its toolbar (not disabled or read-only) | the floating toolbar fades in from below above the field's start edge (`overlayMotion` floating, `data-side="top"`); a tool wraps the selection in its Markdown, a second press removes it; the edit is typed into the field, so `Mod+Z` takes it back |
 | copied | `Textarea.CopyButton` pressed | the copy glyph cross-fades into a check, the name becomes `labels.copied` (or `labels.copyError`) |
 
 Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+Enter (Ctrl or ⌘ with Enter — a plain Enter is a line break) commit a changed text, Escape puts the committed text back and is consumed. An unchanged text never fires. Return a Promise for a server save: pending shows a spinner while the field stays editable and Tab moves on, reject restores the text, resolve shows the check.
@@ -146,6 +151,7 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 - Field → field in a form: `--prime-space-5`; group → actions: `--prime-space-8`.
 - Width is always `100%` of the parent; set the width with the layout column.
 - Long words wrap (`overflow-wrap: anywhere`), so the field never overflows horizontally.
+- With `formatting` the toolbar floats `--prime-space-2` above the field box's start edge on the floating layer, over whatever is above the field; it takes no room in the layout.
 
 ## Accessibility
 
@@ -154,7 +160,10 @@ 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 `onCommit`: puts the committed text back. |
+| `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. |
+| `←` · `→` | Move between the formatting buttons. |
+| `Home` · `End` | Jump to the first / last formatting button. |
 
 ### ARIA
 - `label` renders `<label htmlFor>` bound to the textarea; without it set `aria-label`. A placeholder never replaces the label.
@@ -163,6 +172,7 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 - `Textarea.Counter` shows `12/280` visually and announces `labels.counter` (`aria-live="polite"`).
 - `Textarea.Action` and `Textarea.CopyButton` are buttons (or a link with `asChild`) named by their label, with a tooltip; copying announces `labels.copied`. A press on them never moves focus into the textarea.
 - With `onCommit` the textarea carries `aria-busy="true"` while saving; a polite live region says `labels.saving`, then `labels.saved`.
+- The formatting toolbar is `role="toolbar"` named `labels.formatting`, `aria-controls` the textarea, with one Tab stop and arrow keys; every button has `aria-keyshortcuts` and a tooltip with its keys (`⌘B` on Apple systems, `Ctrl+B` elsewhere). A press on a tool keeps the focus and the selection in the field.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -176,6 +186,14 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 | `copyError` | `"Не удалось скопировать"` | Name, tooltip and announcement when the clipboard refuses. |
 | `saving` | `"Сохранение"` | Announced while an `onCommit` save is pending. |
 | `saved` | `"Сохранено"` | Announced once an `onCommit` save succeeds. |
+| `formatting` | `"Форматирование"` | Accessible name of the formatting toolbar. |
+| `bold` | `"Жирный"` | Bold tool. |
+| `italic` | `"Курсив"` | Italic tool. |
+| `strikethrough` | `"Зачёркнутый"` | Strikethrough tool. |
+| `code` | `"Моноширинный"` | Code tool. |
+| `spoiler` | `"Скрытый текст"` | Spoiler tool (`\|\|…\|\|`). |
+| `link` | `"Ссылка"` | Link tool. |
+| `quote` | `"Цитата"` | Quote tool. |
 
 ## Examples
 | Example | Shows |
@@ -188,6 +206,7 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 | [without-focus-ring.tsx](examples/without-focus-ring.tsx) | A single reply composer where the caret and the lighter fill show focus — `focusRing`. |
 | [edge-actions.tsx](examples/edge-actions.tsx) | A read-only generated reply with copying and a link to the template in the field's corner — `Textarea.CopyButton`, `Textarea.Action`. |
 | [inline-edit.tsx](examples/inline-edit.tsx) | A record card note that saves on blur and Mod+Enter, reverts on Escape and shows the server's refusal — `onCommit`, `error`. |
+| [formatting.tsx](examples/formatting.tsx) | A long announcement where a selection gets the formatting toolbar and its hotkeys, written as Markdown around it — `formatting`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the text; the counter follows it and `maxLength` stops extra input — `value`, `onValueChange`, `Textarea.Counter`, `maxLength`. |
 | [in-form.tsx](examples/in-form.tsx) | Support request form: the description is checked on submit, its error leaves as soon as the text is long enough and does not shift the form, a sent request turns the button green — `required`, `error`, `reserveSupportRow`. |
 
@@ -200,7 +219,8 @@ Inline save (`onCommit`): the text at focus is the committed one; blur and Mod+E
 - Only a placeholder, no label → add `label` or `aria-label`.
 - A copy `Button` under a read-only result → `Textarea.CopyButton` as a child of the root.
 - Other children than `Textarea.CopyButton` / `Textarea.Action` → the root renders the textarea itself; children are only the corner actions.
+- `formatting` on text that is shown as plain text → the reader sees `**` and `||`; turn it on only where the text is rendered with its Markdown.
 
 ## Related
-- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Tooltip](../tooltip/COMPONENT.md) (corner actions), [Spinner](../spinner/COMPONENT.md) (`onCommit`)
+- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Tooltip](../tooltip/COMPONENT.md) (corner actions, formatting tools), [Spinner](../spinner/COMPONENT.md) (`onCommit`), [Button](../button/COMPONENT.md) and [Kbd](../kbd/COMPONENT.md) (formatting tools), Icon (`format.*`); `internal/textFormatting` + `internal/textFormattingToolbar` (the formatting shared with Composer)
 - **See also:** [Input](../input/COMPONENT.md) — the same field contract for one line; [Composer](../composer/COMPONENT.md) — a chat message input built on Textarea; [CodeBlock](../code-block/COMPONENT.md)

package/src/components/textarea/examples/formatting.tsx

@@ -0,0 +1,20 @@
+/** A long announcement where a selection gets the formatting toolbar and its hotkeys, written as Markdown around it — `formatting`. */
+import { Textarea } from "prime-ui-kit";
+
+const ANNOUNCEMENT = `С понедельника счета клиентам выставляет **отдел расчётов**, а не менеджеры проектов.
+
+> Счёт уходит в течение _одного рабочего дня_ после подписания акта.
+
+Шаблон договора — [в базе знаний](https://prime.app/kb/contracts). Пароль от архива актов: ||Prime-2048||. Старый процесс ~~через почту~~ отключаем 1 апреля.`;
+
+export default function TextareaFormattingExample() {
+  return (
+    <Textarea.Root
+      label="Текст публикации"
+      hint="Выделите текст, чтобы оформить его; публикация покажет оформление"
+      defaultValue={ANNOUNCEMENT}
+      rows={6}
+      formatting
+    />
+  );
+}

package/dist/components/composer/format.d.ts

@@ -1,39 +0,0 @@
-/**
- * Markdown formatting of a plain-text message (the Composer's toolbar and hotkeys): pure functions
- * over the text and its selection, so the component only applies the result to its textarea.
- */
-/** A formatting command: what the toolbar button or the hotkey applies to the selection. */
-export type ComposerFormat = "bold" | "italic" | "strikethrough" | "code" | "link" | "quote";
-/** Text with its selection, `start <= end` (a caret when equal). */
-export type TextSelection = {
-    text: string;
-    start: number;
-    end: number;
-};
-/** The text and selection after `format` is applied to the selection. */
-export declare function applyFormat(selection: TextSelection, format: ComposerFormat): TextSelection;
-/**
- * The one span that differs between two texts (common prefix and suffix removed), so the change can
- * be typed into the textarea as one edit and stay on its undo stack.
- */
-export declare function diffRange(before: string, after: string): {
-    start: number;
-    end: number;
-    insert: string;
-};
-/** The format a key press asks for: Mod+B · Mod+I · Mod+Shift+X · Mod+E · Mod+K · Mod+Shift+9. */
-export declare function formatForKey(event: {
-    key: string;
-    code: string;
-    metaKey: boolean;
-    ctrlKey: boolean;
-    shiftKey: boolean;
-    altKey: boolean;
-}): ComposerFormat | null;
-/** Shortcut of every format, by modifier names: rendered as `⌘B` on Apple systems, `Ctrl+B` elsewhere. */
-export declare const FORMAT_SHORTCUTS: Record<ComposerFormat, {
-    shift: boolean;
-    key: string;
-}>;
-/** `⌘⇧X` on Apple systems, `Ctrl+Shift+X` elsewhere. */
-export declare function shortcutText(format: ComposerFormat, apple: boolean): string;