prime-ui-kit 0.14.0 → 0.16.0

package/dist/skill/reference/components/card/examples/screen.tsx

@@ -0,0 +1,363 @@
+/** A dashboard: the title, a line of data, the period switch and the report in the app header; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `AppHeader.Tools`, `PageContent.Grid`. */
+import {
+  AppHeader,
+  Badge,
+  Button,
+  Card,
+  ChartFrame,
+  type ChartFrameSeries,
+  Crossfade,
+  chartColors,
+  DataTable,
+  type DataTableColumn,
+  Icon,
+  LinkButton,
+  PageContent,
+  PageToolbar,
+  ProgressBar,
+  type ProgressSegment,
+  SegmentedControl,
+  Sparkline,
+  type SparklinePoint,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./screen.module.css";
+
+type Period = "week" | "month" | "quarter";
+type Payment = { id: string; client: string; date: string; amount: number; late: boolean };
+
+const KPIS: Record<
+  Period,
+  { label: string; value: string; delta: string; tone: "success" | "danger" | "neutral" }[]
+> = {
+  week: [
+    { label: "Выручка", value: "2,1 млн ₽", delta: "+6% к прошлой неделе", tone: "success" },
+    { label: "Оплачено счетов", value: "54", delta: "+4", tone: "success" },
+    { label: "Средний чек", value: "38 900 ₽", delta: "без изменений", tone: "neutral" },
+    { label: "Просрочено", value: "1,2 млн ₽", delta: "+180 тыс. ₽", tone: "danger" },
+  ],
+  month: [
+    { label: "Выручка", value: "8,4 млн ₽", delta: "+12% к сентябрю", tone: "success" },
+    { label: "Оплачено счетов", value: "214", delta: "+17", tone: "success" },
+    { label: "Средний чек", value: "39 300 ₽", delta: "−3% к сентябрю", tone: "danger" },
+    { label: "Просрочено", value: "1,2 млн ₽", delta: "−340 тыс. ₽", tone: "success" },
+  ],
+  quarter: [
+    { label: "Выручка", value: "24,6 млн ₽", delta: "+21% ко II кварталу", tone: "success" },
+    { label: "Оплачено счетов", value: "631", delta: "+88", tone: "success" },
+    { label: "Средний чек", value: "39 000 ₽", delta: "+1%", tone: "neutral" },
+    { label: "Просрочено", value: "1,2 млн ₽", delta: "−1,1 млн ₽", tone: "success" },
+  ],
+};
+
+const MONTHS = ["янв", "фев", "мар", "апр", "мая", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"];
+
+/** Daily revenue up to 8 October 2026: `days` points ending that day, a deterministic wave. */
+function dailyRevenue(days: number, base: number): SparklinePoint[] {
+  return Array.from({ length: days }, (_, i) => {
+    const day = new Date(2026, 9, 8 - (days - 1 - i));
+    const wave = Math.sin(i / 2.3) * 0.12 + Math.sin(i / 0.9) * 0.05 + i / days / 6;
+    return {
+      label: `${day.getDate()} ${MONTHS[day.getMonth()]}`,
+      value: Math.round((base * (1 + wave)) / 1000) * 1000,
+    };
+  });
+}
+
+const REVENUE: Record<Period, SparklinePoint[]> = {
+  week: dailyRevenue(7, 300_000),
+  month: dailyRevenue(30, 280_000),
+  quarter: dailyRevenue(90, 270_000),
+};
+
+const formatRubles = (value: number) => `${value.toLocaleString("ru-RU")} ₽`;
+
+const BILLING_SERIES: ChartFrameSeries[] = [
+  { id: "invoiced", label: "Выставлено" },
+  { id: "paid", label: "Оплачено" },
+];
+
+/** Invoiced and paid, in millions of rubles, by the buckets of each period. */
+const BILLING: Record<Period, { label: string; invoiced: number; paid: number }[]> = {
+  week: [
+    { label: "пн", invoiced: 0.42, paid: 0.31 },
+    { label: "вт", invoiced: 0.38, paid: 0.4 },
+    { label: "ср", invoiced: 0.51, paid: 0.36 },
+    { label: "чт", invoiced: 0.47, paid: 0.44 },
+    { label: "пт", invoiced: 0.56, paid: 0.52 },
+  ],
+  month: [
+    { label: "нед 37", invoiced: 2.1, paid: 1.8 },
+    { label: "нед 38", invoiced: 2.4, paid: 2.0 },
+    { label: "нед 39", invoiced: 1.9, paid: 2.2 },
+    { label: "нед 40", invoiced: 2.6, paid: 2.1 },
+  ],
+  quarter: [
+    { label: "авг", invoiced: 7.8, paid: 6.9 },
+    { label: "сен", invoiced: 8.1, paid: 7.6 },
+    { label: "окт", invoiced: 8.9, paid: 8.4 },
+  ],
+};
+
+const BILLING_MARGIN = { top: 8, bottom: 24, left: 36 };
+
+const formatMillionsShort = (value: number) => `${value.toLocaleString("ru-RU")} млн ₽`;
+
+const PLAN = [
+  { manager: "Анна Климова", value: 92 },
+  { manager: "Илья Петров", value: 74 },
+  { manager: "Марат Хасанов", value: 48 },
+];
+
+/** Display of an amount in millions: «5,1 млн ₽». */
+const formatMillions = (value: number) => `${String(value).replace(".", ",")} млн ₽`;
+
+const RECEIVABLES: ProgressSegment[] = [
+  { value: 5.1, label: "В срок", tone: "success" },
+  { value: 1.9, label: "До 30 дней", tone: "warning" },
+  { value: 1.2, label: "Больше 30 дней", tone: "danger" },
+];
+
+const PAYMENTS: Payment[] = [
+  { id: "p1", client: "ООО «Мостострой»", date: "7 окт.", amount: 2_480_000, late: false },
+  { id: "p2", client: "АО «Волга-Энерго»", date: "6 окт.", amount: 1_095_000, late: false },
+  { id: "p3", client: "ООО «Логистик Плюс»", date: "5 окт.", amount: 312_000, late: true },
+  { id: "p4", client: "ООО «Гранит»", date: "3 окт.", amount: 94_750, late: false },
+];
+
+const MONEY = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Payment>[] = [
+  {
+    id: "client",
+    header: "Клиент",
+    cell: (row) => (
+      <span className={styles.client}>
+        {row.client}
+        {row.late ? <Badge.Root tone="warning">С опозданием</Badge.Root> : null}
+      </span>
+    ),
+  },
+  { id: "date", header: "Дата", accessor: "date", numeric: true, headerAlign: "end" },
+  {
+    id: "amount",
+    header: "Сумма",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.amount),
+  },
+];
+
+export default function CardScreenExample() {
+  const [period, setPeriod] = React.useState<Period>("month");
+
+  return (
+    <>
+      {/* In an app this header fills the shell's `header` slot and carries the page: the only h1,
+          a line of data under it and the page's tools; main has no PageContent.Header. */}
+      <AppHeader.Root>
+        <AppHeader.Start>
+          <AppHeader.Title>
+            Обзор
+            <AppHeader.Description>Продажи и оплаты · на 8 октября, 9:40</AppHeader.Description>
+          </AppHeader.Title>
+        </AppHeader.Start>
+        <AppHeader.Tools>
+          <PageToolbar.Root aria-label="Обзор">
+            <PageToolbar.View>
+              <SegmentedControl.Root
+                aria-label="Период"
+                value={period}
+                onValueChange={(next) => setPeriod(next as Period)}
+              >
+                <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
+                <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
+                <SegmentedControl.Item value="quarter">Квартал</SegmentedControl.Item>
+              </SegmentedControl.Root>
+            </PageToolbar.View>
+            <PageToolbar.Actions>
+              <Button.Root variant="soft" tone="neutral">
+                <Button.Icon>
+                  <Icon name="action.download" />
+                </Button.Icon>
+                Отчёт
+              </Button.Root>
+            </PageToolbar.Actions>
+          </PageToolbar.Root>
+        </AppHeader.Tools>
+      </AppHeader.Root>
+
+      <PageContent.Root>
+        <PageContent.Body>
+          {/* One board: every tile of the screen in one grid, 16 apart on both axes. */}
+          <PageContent.Grid>
+            {KPIS[period].map((kpi) => (
+              <PageContent.Cell key={kpi.label} span={3}>
+                {/* Another period is another set of values: the tile cross-fades instead of flipping. */}
+                <Crossfade state={period}>
+                  <Card.Root variant="stat-trend">
+                    <Card.Label>{kpi.label}</Card.Label>
+                    <Card.Value>{kpi.value}</Card.Value>
+                    <Card.Delta tone={kpi.tone}>{kpi.delta}</Card.Delta>
+                  </Card.Root>
+                </Crossfade>
+              </PageContent.Cell>
+            ))}
+
+            <PageContent.Cell>
+              <Card.Root variant="panel">
+                <Card.Body>
+                  <Sparkline
+                    data={REVENUE[period]}
+                    label="Выручка по дням"
+                    summary="sum"
+                    formatValue={formatRubles}
+                  />
+                </Card.Body>
+              </Card.Root>
+            </PageContent.Cell>
+
+            {/* The chart spans two rows beside the two panels and fills their height. */}
+            <PageContent.Cell span={8} rows={2}>
+              <ChartFrame.Root
+                series={BILLING_SERIES}
+                formatValue={formatMillionsShort}
+                rows={BILLING[period].map((row) => ({
+                  label: row.label,
+                  values: { invoiced: row.invoiced, paid: row.paid },
+                }))}
+              >
+                <ChartFrame.Header>
+                  <ChartFrame.Title as="h2">Выставлено и оплачено</ChartFrame.Title>
+                  <ChartFrame.Description>Счета за период, млн ₽</ChartFrame.Description>
+                </ChartFrame.Header>
+                <ChartFrame.Plot
+                  height="fill"
+                  renderPlot={({ width, height, series }) => {
+                    const rows = BILLING[period];
+                    const top = Math.ceil(Math.max(...rows.map((row) => row.invoiced)));
+                    const innerH = height - BILLING_MARGIN.top - BILLING_MARGIN.bottom;
+                    const band = (width - BILLING_MARGIN.left) / rows.length;
+                    const bar = Math.min(28, (band - 16) / series.length);
+                    const y = (value: number) => BILLING_MARGIN.top + innerH * (1 - value / top);
+                    return (
+                      <svg width={width} height={height} aria-hidden="true">
+                        {[0, top / 2, top].map((tick) => (
+                          <g key={tick}>
+                            <line
+                              x1={BILLING_MARGIN.left}
+                              x2={width}
+                              y1={y(tick)}
+                              y2={y(tick)}
+                              stroke={tick === 0 ? chartColors.axis : chartColors.grid}
+                            />
+                            <text
+                              x={BILLING_MARGIN.left - 8}
+                              y={y(tick)}
+                              textAnchor="end"
+                              dominantBaseline="middle"
+                            >
+                              {tick.toLocaleString("ru-RU")}
+                            </text>
+                          </g>
+                        ))}
+                        {rows.map((row, i) => {
+                          const center = BILLING_MARGIN.left + band * i + band / 2;
+                          return (
+                            <g key={row.label}>
+                              {series.map((s, j) => {
+                                const value = s.id === "paid" ? row.paid : row.invoiced;
+                                return (
+                                  <rect
+                                    key={s.id}
+                                    data-hidden={s.hidden}
+                                    x={center - (bar * series.length) / 2 + bar * j}
+                                    y={y(value)}
+                                    width={bar - 2}
+                                    height={y(0) - y(value)}
+                                    rx={2}
+                                    fill={s.color}
+                                  />
+                                );
+                              })}
+                              <text x={center} y={height - 4} textAnchor="middle">
+                                {row.label}
+                              </text>
+                            </g>
+                          );
+                        })}
+                      </svg>
+                    );
+                  }}
+                />
+                <ChartFrame.Legend />
+              </ChartFrame.Root>
+            </PageContent.Cell>
+
+            <PageContent.Cell span={4}>
+              <Card.Root variant="panel">
+                <Card.Header>
+                  <Card.Title as="h2">План продаж</Card.Title>
+                  <Typography as="span" variant="caption" tone="muted">
+                    Октябрь
+                  </Typography>
+                </Card.Header>
+                <Card.Body>
+                  <div className={styles.bars}>
+                    {PLAN.map((row) => (
+                      <ProgressBar
+                        key={row.manager}
+                        value={row.value}
+                        label={row.manager}
+                        tone={row.value < 50 ? "warning" : "accent"}
+                        showValue
+                      />
+                    ))}
+                  </div>
+                </Card.Body>
+              </Card.Root>
+            </PageContent.Cell>
+
+            <PageContent.Cell span={4}>
+              <Card.Root variant="panel">
+                <Card.Header>
+                  <Card.Title as="h2">Дебиторка</Card.Title>
+                  <Typography as="span" variant="caption" tone="muted">
+                    8,2 млн ₽
+                  </Typography>
+                </Card.Header>
+                <Card.Body>
+                  <ProgressBar
+                    segments={RECEIVABLES}
+                    label="По сроку оплаты"
+                    legend
+                    formatValue={formatMillions}
+                  />
+                </Card.Body>
+              </Card.Root>
+            </PageContent.Cell>
+          </PageContent.Grid>
+
+          {/* A new topic: a titled section, set off by more air than the tiles. */}
+          <PageContent.Section label="Последние оплаты">
+            <PageContent.Actions>
+              <LinkButton href="#invoices">Все счета</LinkButton>
+            </PageContent.Actions>
+            <DataTable
+              columns={COLUMNS}
+              rows={PAYMENTS}
+              getRowKey={(row) => row.id}
+              paging="none"
+            />
+          </PageContent.Section>
+        </PageContent.Body>
+      </PageContent.Root>
+    </>
+  );
+}

package/dist/skill/reference/components/card/examples/variants.tsx

@@ -1,40 +1,81 @@
-/** KPI templates: an icon tile with a value, a badge with a value in the header row, and a large value with its change and a reference line — `variant`, `Card.Delta`, `Card.Meta`. */
-import { Badge, Card, Icon } from "prime-ui-kit";
+/** KPI templates: an icon tile with a value, a badge with a value in the header row, and a large value with its change in every tone and a reference line — `variant`, `Card.Delta`, `tone`, `Card.Meta`. */
+import { Badge, Card, Icon, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
+const TRENDS = [
+  {
+    tone: "success",
+    label: "Выручка за месяц",
+    value: "4,2 млн ₽",
+    delta: "+18% к сентябрю",
+    meta: "Лидов 1 240 · сделок 186",
+  },
+  {
+    tone: "danger",
+    label: "Отток",
+    value: "3,1%",
+    delta: "+0,6 п. п. за неделю",
+    meta: "Ушло 38 из 1 226 клиентов",
+  },
+  {
+    tone: "warning",
+    label: "Первый ответ поддержки",
+    value: "3,4 ч",
+    delta: "+40 мин — близко к SLA 4 ч",
+    meta: "Открыто 62 обращения",
+  },
+  {
+    tone: "neutral",
+    label: "Средний чек",
+    value: "38 900 ₽",
+    delta: "без изменений",
+    meta: "Оплачено 214 счетов",
+  },
+] as const;
 
 export default function CardVariantsExample() {
   return (
-    <div className={styles.grid}>
-      <Card.Root variant="mini">
-        <Card.Icon>
-          <Icon name="object.users" />
-        </Card.Icon>
-        <Card.Label>Активные сессии</Card.Label>
-        <Card.Value>1 248</Card.Value>
-      </Card.Root>
-
-      <Card.Root variant="stat-trend">
-        <Card.Header>
-          <Badge.Root color="green">SLA</Badge.Root>
-          <Card.Value>99,95%</Card.Value>
-        </Card.Header>
-        <Card.Description>Доступность API за 30 дней</Card.Description>
-      </Card.Root>
-
-      <Card.Root variant="stat-trend">
-        <Card.Label>Выручка за месяц</Card.Label>
-        <Card.Value>4,2 млн ₽</Card.Value>
-        <Card.Delta tone="success">+18% к сентябрю</Card.Delta>
-        <Card.Meta>Лидов 1 240 · сделок 186</Card.Meta>
-      </Card.Root>
-
-      <Card.Root variant="stat-trend">
-        <Card.Label>Отток</Card.Label>
-        <Card.Value>3,1%</Card.Value>
-        <Card.Delta tone="danger">+0,6 п. п. за неделю</Card.Delta>
-        <Card.Meta>Ушло 38 из 1 226 клиентов</Card.Meta>
-      </Card.Root>
-    </div>
+    <>
+      <div>
+        <div>
+          <Card.Root variant="mini">
+            <Card.Icon>
+              <Icon name="object.users" />
+            </Card.Icon>
+            <Card.Label>Активные сессии</Card.Label>
+            <Card.Value>1 248</Card.Value>
+          </Card.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            mini
+          </Typography>
+        </div>
+        <div>
+          <Card.Root variant="stat-trend">
+            <Card.Header>
+              <Badge.Root color="green">SLA</Badge.Root>
+              <Card.Value>99,95%</Card.Value>
+            </Card.Header>
+            <Card.Description>Доступность API за 30 дней</Card.Description>
+          </Card.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            stat-trend · Card.Header
+          </Typography>
+        </div>
+      </div>
+      <div>
+        {TRENDS.map((trend) => (
+          <div key={trend.tone}>
+            <Card.Root variant="stat-trend">
+              <Card.Label>{trend.label}</Card.Label>
+              <Card.Value>{trend.value}</Card.Value>
+              <Card.Delta tone={trend.tone}>{trend.delta}</Card.Delta>
+              <Card.Meta>{trend.meta}</Card.Meta>
+            </Card.Root>
+            <Typography as="span" variant="caption" tone="muted">
+              stat-trend · {trend.tone}
+            </Typography>
+          </div>
+        ))}
+      </div>
+    </>
   );
 }

package/dist/skill/reference/components/chart-frame/COMPONENT.md

@@ -23,7 +23,7 @@ import { ChartFrame, type ChartFrameSeries, chartColors } from "prime-ui-kit";
 
 ## Anatomy
 ```
-ChartFrame.Root              <figure>; surface of the depth ladder; state, series, hidden series
+ChartFrame.Root              <figure>; surface of the depth ladder; state, series, hidden series, rows
 ├─ ChartFrame.Header         <div>; title column · actions
 │  ├─ ChartFrame.Title       <h3>; names the figure and the table
 │  ├─ ChartFrame.Description <p>; describes the figure
@@ -32,8 +32,8 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 │  └─ ChartFrame.Delta       <span>; change with a tone
 ├─ ChartFrame.Plot           <div>; fixed height, measured; Crossfade of plot / Skeleton / empty / error
 ├─ ChartFrame.Legend         <ul>; a toggle button per series: swatch · name · value
-├─ ChartFrame.Table          <table>; visually hidden data, ready state only
-└─ ChartFrame.Tooltip        <div>; with `point` portaled beside that point of the plot, else in place for a library's tooltip hook
+├─ ChartFrame.Tooltip        <div>; with `point` portaled beside that point of the plot, else in place for a library's tooltip hook
+└─ (data table)             <table> drawn by the root from `rows`; visually hidden, ready state only
 ```
 
 ## API
@@ -41,16 +41,17 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### ChartFrame.Root
-`ref` → `HTMLElement` (`<figure>`). The panel: a surface of the depth ladder, a figure named by `ChartFrame.Title` and described by `ChartFrame.Description`, `aria-busy` while loading. Owns the state, the series and which of them are hidden; every part reads them.
+`ref` → `HTMLElement` (`<figure>`). The panel: a surface of the depth ladder, a figure named by `ChartFrame.Title` and described by `ChartFrame.Description`, `aria-busy` while loading. Owns the state, the series, the hidden ones and the data (`rows`); every part reads them.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `state` | `"ready" \| "loading" \| "empty" \| "error"` | `"ready"` | What the chart region shows: the plot, Skeletons while `loading`, the empty state, or the load error with a retry (`onRetry`). Changes cross-fade at the same height. |
 | `series` | `ChartFrameSeries[]` | `[]` | The series in drawing order, `{ id, label, color?, value? }`: legend entries, tooltip rows, table columns and `renderPlot` colors. `color` is a palette hue; `value` is the legend summary. |
+| `rows` | `ChartFrameRow[]` | — (required) | The chart's data, `{ label, values }` per point (`values` by series id, a missing one reads as «—»): a visually hidden table for screen readers in the `ready` state. |
 | `hiddenSeries` | `string[]` | — | Ids of the series turned off in the legend (controlled). |
 | `defaultHiddenSeries` | `string[]` | `[]` | Initially hidden series (uncontrolled). |
 | `onHiddenSeriesChange` | `(hiddenSeries: string[]) => void` | — | The legend turned a series on or off; gets the new list of hidden ids. |
-| `formatValue` | `(value: number) => string` | `Russian digit groups` | Display of a value in the legend, the tooltip and the table («8,4 млн ₽»). |
+| `formatValue` | `(value: number) => string` | Russian digit groups | Display of a value in the legend, the tooltip and the table («8,4 млн ₽»). |
 | `onRetry` | `() => void \| Promise<void>` | — | Loads the data again from the `error` state and shows the retry button; a returned Promise keeps the button loading until it settles. |
 | `labels` | `Partial<ChartFrameLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `className` and the other figure attributes. |
@@ -104,7 +105,7 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `height` | `number \| "fill"` | `240, 160 under 30rem` | Height of the plot area in px. `fill` takes the free height of a stretched panel (a `PageContent.Cell` with `rows`), the default height at least. |
+| `height` | `number \| "fill"` | `240`, `160` under `30rem` | Height of the plot area in px. `fill` takes the free height of a stretched panel (a `PageContent.Cell` with `rows`), the default height at least. |
 | `renderPlot` | `(area: ChartFramePlotArea) => ReactNode` | — | Renders the chart at the measured `{ width, height }` with every series `{ id, label, color, hidden }` — for libraries that need explicit sizes (Chart.js, visx). |
 | `children` | `ReactNode` | — | A chart that sizes itself to its container (an SVG with a `viewBox`, `ResponsiveContainer`); it fills the area. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
@@ -127,14 +128,6 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 | `point` | `{ x: number; y: number } \| null` | — | A point in `renderPlot` coordinates (the pointer, or the point the arrows reached): the tooltip floats right of it, left only without room; `null` hides it. Floating, it is `aria-hidden`. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
 
-### ChartFrame.Table
-`ref` → `HTMLTableElement`. The chart's data as a visually hidden table for screen readers, named by the title: a row per point, a column per shown series. Present only in the `ready` state. A visible table is a `DataTable`.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `rows` | `ChartFrameTableRow[]` | — (required) | `{ label, values }` per point; `values` by series id, a missing one reads as «—». |
-| `…rest` | `HTMLAttributes<HTMLTableElement>` | — | `className` and the other table attributes. |
-
 ## Variants
 
 ### Delta tone
@@ -165,26 +158,28 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| ready | `state="ready"` | `data-state="ready"` on the root; the plot; the legend values; `ChartFrame.Table` present |
+| ready | `state="ready"` | `data-state="ready"` on the root; the plot; the legend values; the data table present |
 | loading | `state="loading"` | `data-state="loading"` and `aria-busy` on the root; Skeletons of the value, the plot and the legend values; the title, actions and legend names stay |
 | empty | `state="empty"` | `data-state="empty"` on the root; EmptyPage `compact` (`role="status"`, `labels.empty`) in the plot's place |
 | error | `state="error"` | `data-state="error"` on the root; the value is a muted dash; EmptyPage `compact` `tone="danger"` (`role="alert"`, `labels.error`) with the retry button when `onRetry` is set; it waits for a returned Promise |
 | swap | `state` changes | the plot region cross-fades (Crossfade, the height stays); the value and legend values fade in from their Skeletons |
-| series hidden | a legend toggle, `hiddenSeries` | `aria-pressed="false"`, `data-hidden` on the entry: it keeps its place and color, the swatch becomes a ring, the name quiet; `renderPlot` gets `hidden: true` — a mark with `data-hidden="true"` fades out, the axes keep their scale |
+| series hidden | a legend toggle, `hiddenSeries` | `aria-pressed="false"` on the entry (the style hangs on it): it keeps its place and color, the swatch becomes a ring, the name quiet; `renderPlot` gets `hidden: true` — a mark with `data-hidden="true"` fades out, the axes keep their scale |
 | hover / press | pointer on a legend entry | hover fill (hover-capable pointers only), press scale |
 
 ## Layout & spacing
 - The root takes its container's width, card padding and radius, zones 16 px apart; on the page it carries the raised whisper, nested in a surface it is a flat tile one step deeper.
 - The header puts the title and the description in the first column and the actions at the end; under 24rem of panel width the actions drop under the description.
 - The plot is 240 px high (160 px under 30rem of panel width) unless `height` is set; it never changes height between states.
-- Legend entries wrap onto more lines; each has a 44 px touch hit area on coarse pointers.
+- Legend entries are chips one `xs` control high and wrap onto more lines; each has a 44 px touch hit area on coarse pointers.
 - `ChartFrame.Tooltip` is the floating layer of the ladder with the point's label over rows of swatch · series name · value. With `point` the kit places it like every anchored layer (`usePosition`): right of the point at its height, on the left only where the right has no room in the viewport, inside the viewport, following the plot on scroll. Without `point` the chart library positions it (Recharts `content`).
-- SVG `<text>` in the plot takes the caption type in `--prime-color-text-muted`; a class of your own still wins.
-- Works from 320 px; the container queries are on the panel's own width, so it adapts in a grid cell as on a phone.
+- SVG `<text>` in the plot takes the caption type in `--prime-color-text-muted` (the plot area carries the caption role); a class of your own still wins.
+- Works in a 320 px column; the container queries are on the panel's own width, so it adapts in a grid cell as on a phone.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | The header actions, then the legend as one stop (the entry focused last), then the chart's own focusable marks. |
@@ -193,12 +188,14 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 | `Enter` · `Space` | Shows or hides the entry's series. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The root is a `<figure>` named by `ChartFrame.Title` and described by `ChartFrame.Description`; `aria-busy` while loading.
 - A legend entry is a button with `aria-pressed` — pressed while its series is shown; the legend list is named by `labels.legend`. A hidden series differs by the swatch's shape (a ring) and a quiet name, never by color alone.
-- `ChartFrame.Table` is a visually hidden table with the chart's data, named by the title: a row header per point, a column per shown series, values through `formatValue`.
+- The root renders `rows` as a visually hidden table with the chart's data, named by the title: a row header per point, a column per shown series, values through `formatValue`.
 - A `ChartFrame.Tooltip` with `point` is `aria-hidden` and passive (no focus, no presses; `Escape` hides it until the point moves): it repeats what the plot speaks — give a focusable plot an `aria-valuetext`, like the slider in the tooltip example.
 - The empty state is `role="status"`, the error `role="alert"` with the retry button.
-- The drawing is the library's: hide a decorative SVG (`aria-hidden`) when `ChartFrame.Table` carries the data; marks you make focusable need their own `aria-label`.
+- The drawing is the library's: hide a decorative SVG (`aria-hidden`), the data table carries the data; marks you make focusable need their own `aria-label`.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -209,21 +206,22 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 | `error` | `"Не удалось загрузить график"` | Title of the error state. |
 | `retry` | `"Повторить"` | Text of the retry button in the error state. |
 | `legend` | `"Ряды графика"` | Accessible name of the legend. |
-| `category` | `"Период"` | Header of the first column of `ChartFrame.Table` (what a row is). |
+| `category` | `"Период"` | Header of the first column of the data table (what a row is). |
 
 ## Examples
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Revenue by month as a hand-drawn SVG line chart in a dashboard panel: the headline with its change, a period switch, a legend that turns series off and a table for screen readers — `series`, `formatValue`, `renderPlot`. |
 | [tooltip.tsx](examples/tooltip.tsx) | Invoices by week as grouped bars: the kit tooltip follows the pointer with a row per series, the arrows step through the weeks — `ChartFrame.Tooltip`, `items`, `point`. |
-| [states.tsx](examples/states.tsx) | Loading, empty, error and data swap in the plot's place without moving the panel; the error retries — `state`, `onRetry`. |
+| [fill-height.tsx](examples/fill-height.tsx) | Revenue against the plan beside two KPI tiles: the plot takes the height of the stretched grid cell, and the plan line starts hidden until the legend turns it on — `height`, `defaultHiddenSeries`. |
+| [states.tsx](examples/states.tsx) | Loading, data, empty and error in the plot's place at one panel size; the error retries, and the legend of the one series only names it — `state`, `onRetry`, `readOnly`. |
 | [controlled.tsx](examples/controlled.tsx) | Lead sources with totals in the legend; the hidden series live in the page state and one button shows them all again — `hiddenSeries`, `onHiddenSeriesChange`. |
-| [narrow.tsx](examples/narrow.tsx) | A 320px column: the actions drop under the title, the plot gets lower and a self-sizing SVG stretches to it — `children`, `height`. |
+| [narrow.tsx](examples/narrow.tsx) | A 320px column: the actions drop under the title, the plot gets lower and a self-sizing SVG stretches to it — `height`, `rows`. |
 
 ### With a chart library
 ```tsx
 // Recharts: explicit sizes from renderPlot, the kit tooltip body in `content`.
-<ChartFrame.Root series={SERIES} formatValue={formatRubles}>
+<ChartFrame.Root series={SERIES} rows={tableRows} formatValue={formatRubles}>
   <ChartFrame.Header>
     <ChartFrame.Title>Выручка</ChartFrame.Title>
   </ChartFrame.Header>
@@ -248,7 +246,6 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
     )}
   />
   <ChartFrame.Legend />
-  <ChartFrame.Table rows={tableRows} />
 </ChartFrame.Root>
 ```
 ECharts and Chart.js take the same `width`, `height` and `series[i].color`; their HTML tooltips are strings, so use their own tooltip there or `ChartFrame.Tooltip` with `point` from their hover event.
@@ -260,9 +257,9 @@ ECharts and Chart.js take the same `width`, `height` and `series[i].color`; thei
 - An empty chart with axes and no data → `state="empty"`.
 - A legend for a single series → the title already names it; leave `ChartFrame.Legend` out.
 - Two y-axes of different measures in one frame → two ChartFrames side by side.
-- The data only in the drawing → add `ChartFrame.Table`; screen readers cannot read a plot.
+- `rows` that leave points out of the drawing → pass every point the plot draws; screen readers read the table, not the plot.
 - A hand-drawn chart with its tooltip placed by hand (a `foreignObject`, clamped coordinates) → `ChartFrame.Tooltip` with `point`: it flips only when out of room and never jumps at the middle.
 
 ## Related
-- **Built from:** [Crossfade](../crossfade/COMPONENT.md) (state swap), [Skeleton](../skeleton/COMPONENT.md) (loading), [EmptyPage](../empty-page/COMPONENT.md) (empty, error, retry), `Icon`, `chartColors`, `ChartTooltip` (the chart tooltip shared with Sparkline)
+- **Built from:** [Crossfade](../crossfade/COMPONENT.md) (state swap), [Skeleton](../skeleton/COMPONENT.md) (loading), [EmptyPage](../empty-page/COMPONENT.md) (empty, error, retry), `Icon`, `chartColors`, `ChartTooltip` (the chart tooltip shared with Sparkline; its floating panel scrolls in a [ScrollContainer](../scroll-container/COMPONENT.md)), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [Sparkline](../sparkline/COMPONENT.md), [Card](../card/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)