prime-ui-kit 0.16.0 → 0.18.0

package/src/components/card/COMPONENT.md

@@ -13,7 +13,7 @@
 - A tile that is itself the way to its details — a KPI that opens its report, a project tile (`asChild` with a link or a button).
 
 ## When not to use
-- A whole page region with a title and description → [PageContent](../page-content/COMPONENT.md) sections; do not wrap every section in a card.
+- A whole page region with a title and description → [Page](../../layout/page/COMPONENT.md) sections (`Page.Section`); do not wrap every section in a card.
 - Tabular data → use [DataTable](../data-table/COMPONENT.md) (it has its own fill).
 - A message about the page state → [Banner](../banner/COMPONENT.md); nothing to show yet → [EmptyPage](../empty-page/COMPONENT.md).
 - Content that floats over the page → [Popover](../popover/COMPONENT.md), [Modal](../modal/COMPONENT.md) or [Drawer](../drawer/COMPONENT.md).
@@ -47,6 +47,7 @@ Card.Root asChild                <a> or <button> (the only child) holding the pa
 |---|---|---|---|
 | `variant` | `"panel" \| "mini" \| "stat-trend" \| "split" \| "cta" \| "list" \| "cover"` | `"panel"` | Structural template: titled block with zones (`panel`), KPI tiles, a call to action, a list or a cover tile. |
 | `flat` | `boolean` | `false` | No raised shadow: a flat tile for dense grids. |
+| `loading` | `boolean` | `false` | The KPI is loading: `Card.Value`, `Card.Delta` and `Card.Meta` show a Skeleton in their own geometry and the root sets `aria-busy`; the data fades in when it arrives. Labels and titles stay. |
 | `asChild` | `boolean` | `false` | The whole card is one link or button: pass that element as the only child with the parts inside it; it gets hover, press and the focus ring. Nothing interactive may sit inside it. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `role` + `aria-labelledby` for a landmark block, and the other div attributes. |
 
@@ -101,7 +102,7 @@ Card.Root asChild                <a> or <button> (the only child) holding the pa
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
 
 ### Card.Label · Card.Value
-`ref` → `HTMLSpanElement`. Metric text: the label (body-s, truncates) and the value (tabular, sized by the template and the card width).
+`ref` → `HTMLSpanElement`. Metric text: the label (body-s; truncates, wraps in a `mini` tile and a `split` cell) and the value (tabular, sized by the template and the card width).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -154,6 +155,7 @@ Card.Root asChild                <a> or <button> (the only child) holding the pa
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `flat` | same fill, no shadow | dense grids of tiles | `false` |
+| `loading` | `Card.Value`, `Card.Delta` and `Card.Meta` hold a Skeleton in their own geometry (the value a bar one line of its role high); the data fades in under the same element | a KPI waits for its report | `false` |
 | `asChild` | the card is the link or button it wraps: lifts on hover (raised → overlay shadow), presses, focus ring | the whole tile opens its details | `false` |
 
 ## States
@@ -161,6 +163,7 @@ Card.Root asChild                <a> or <button> (the only child) holding the pa
 |---|---|---|
 | template | `variant` | `data-variant` |
 | flat | `flat` | `data-flat` |
+| loading | `loading` | `aria-busy` on the root; `data-loading` on `Card.Value`, `Card.Delta`, `Card.Meta`, each holding a `Skeleton`; on `false` the data fades in (`useSwapIn`, foundation §1 rule 7) |
 | depth | nesting: one above the nearest surface (the page and the AppShell panel are 0) | `data-depth` (`1`–`4`, `floating-1`/`floating-2` inside a floating layer); the fill is `--prime-color-layer-current`, the shadow only at depth 1 |
 | card width | container queries | `split` stacks below 22rem, `Header` wraps below 22rem (a header control under its description), the `stat-trend` value changes at 20rem / 36rem |
 | hover | `asChild`, a fine pointer | the fill stays (a whole surface never changes its fill, foundation §8); the shadow lifts to `--prime-shadow-overlay` over `fast` |
@@ -170,11 +173,11 @@ Card.Root asChild                <a> or <button> (the only child) holding the pa
 Without `asChild` a card is static: no hover, focus or press of its own. With it: `data-interactive` on the element.
 
 ## Layout & spacing
-- Cards on a page: one `PageContent.Grid` with a `PageContent.Cell span` per card (16 on both axes, the cards of a row share one height); a grid inside one block is the block's own intrinsic `auto-fill` grid on the tile width of the layout tokens (a lone card keeps its column width), gap `--prime-space-4`.
+- Cards on a page: one `Page.Grid` with a `Page.Cell span` per card (16 on both axes, the cards of a row share one height); a grid inside one block is the block's own intrinsic `auto-fill` grid on the tile width of the layout tokens (a lone card keeps its column width), gap `--prime-space-4`.
 - Radius `--prime-card-radius`, no border. In `panel` and `list` the `Header` is a padded zone with a faint inset hairline below; in `stat-trend` it can pair a leading Badge or icon with a compact `Card.Value`.
 - Padding `--prime-card-padding-m` (20); `Body` gap `--prime-card-gap` (16); fields inside `Body` 20 apart, one ladder step off the card.
 - Depth comes from nesting (foundation §4): on the page — the AppShell panel is the page — a card is layer 1 (white in light) with the raised whisper; inside another card it is the next layer, a flat tile. The ladder stops at layer 4.
-- Long values wrap, labels truncate; a chart SVG needs a CSS height.
+- Long values wrap; labels truncate, except in a `mini` tile and a `split` cell, where a label beside the icon wraps instead; a chart SVG needs a CSS height.
 - In a `Header` the title takes the free width; a control or a caption after it sits at the end without a wrapper. A `Card.Description` in the header stacks under the title, 4 apart; the control stays at the end, centred on both lines.
 - `Card.Meta` in `stat-trend` takes the bottom of the tile (`margin-top: auto`), so tiles of one row line their meta up; in `mini` and a `split` cell it sits in the text column under the value.
 
@@ -195,6 +198,7 @@ Without `asChild` a card is static: no hover, focus or press of its own. With it
 - `Card.Root` is a plain `<div>`; give it `role="region"` + `aria-labelledby` only when it is a landmark-worthy block.
 - `Card.Title` renders `<h3>`; directly under the page title pass `as="h2"`.
 - Decorative icons in `Card.Icon` and cover images in `Card.Media` get `aria-hidden`; controls in `Card.Header` need their own names.
+- A `loading` card sets `aria-busy` on its root; the Skeletons are decorative (`aria-hidden`).
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -211,12 +215,13 @@ No `labels`.
 | [interactive.tsx](examples/interactive.tsx) | Whole cards as links to their reports: one tab stop each, a lift on hover, a press and the focus ring — `asChild`. |
 | [content-templates.tsx](examples/content-templates.tsx) | Content templates: a call to action, an events list and a campaign tile with a cover — `Card.Footer`, `Card.List`, `Card.Media`. |
 | [flat.tsx](examples/flat.tsx) | A flat tile without the raised shadow next to the default one, for dense grids — `flat`. |
+| [states.tsx](examples/states.tsx) | A KPI tile while its report loads next to the loaded one, in the `stat-trend` and `mini` templates — `loading`. |
 | [narrow.tsx](examples/narrow.tsx) | The card is a size container: the split template stacks its cells below 22rem and the trend value shrinks below 20rem — `variant`. |
-| [screen.tsx](examples/screen.tsx) | 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`. |
+| [screen.tsx](examples/screen.tsx) | A dashboard: the title and a line of data in the page flow, the period switch and the report in the top bar that keeps the title once it scrolls away; 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 — `collapse`, `Page.Grid`. |
 
 ## Mistakes
 - A `<div>` with a border styled as a card → use `Card.Root`; depth comes from fill, not lines.
-- Wrapping every page section in a card → use PageContent sections.
+- Wrapping every page section in a card → use `Page.Section`.
 - `Card.Delta tone="success"` for every «+» → choose the tone by meaning.
 - Custom padding on a `panel` root → padding belongs to `Header` / `Body` / `Footer`.
 - A wrapper `<div>` around the label and the value of `mini` → put `Icon`, `Label`, `Value` straight into the root (or into a `split` cell); the template lays them out.
@@ -225,7 +230,8 @@ No `labels`.
 - A clickable `<div>` card with `onClick` → `asChild` with a real `<a href>` (Cmd-click, a new tab) or a `<button>`.
 - Buttons or links inside an `asChild` card → nested interactive elements; move them out of the card.
 - The reference figures written into `Card.Delta` or `Card.Label` → `Card.Meta`.
+- Skeletons placed by hand inside `Card.Value` → `Card.Root loading`; keep the parts mounted while loading so each holds its place.
 
 ## Related
-- **Built from:** —
-- **See also:** [PageContent](../page-content/COMPONENT.md), [DescriptionList](../description-list/COMPONENT.md) (record details inside a `Card.Body`), [Fieldset](../fieldset/COMPONENT.md) (groups of fields inside a settings card), [DataTable](../data-table/COMPONENT.md), [Badge](../badge/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md), [Sparkline](../sparkline/COMPONENT.md) (a trend with its total inside a `panel`), [ChartFrame](../chart-frame/COMPONENT.md) (a full chart with legend and states)
+- **Built from:** [Skeleton](../skeleton/COMPONENT.md)
+- **See also:** [Page](../../layout/page/COMPONENT.md), [DescriptionList](../description-list/COMPONENT.md) (record details inside a `Card.Body`), [Fieldset](../fieldset/COMPONENT.md) (groups of fields inside a settings card), [DataTable](../data-table/COMPONENT.md), [Badge](../badge/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md), [Sparkline](../sparkline/COMPONENT.md) (a trend with its total inside a `panel`), [ChartFrame](../chart-frame/COMPONENT.md) (a full chart with legend and states)

package/src/components/card/examples/screen.module.css

@@ -1,4 +1,4 @@
-/* Dashboard: the board of tiles is PageContent.Grid; here only the inside of the tiles. */
+/* Dashboard: the board of tiles is Page.Grid; here only the inside of the tiles. */
 
 /* Bars inside a panel: 20 apart, like fields. */
 .bars {

package/src/components/card/examples/screen.tsx

@@ -1,6 +1,5 @@
-/** 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`. */
+/** A dashboard: the title and a line of data in the page flow, the period switch and the report in the top bar that keeps the title once it scrolls away; 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 — `collapse`, `Page.Grid`. */
 import {
-  AppHeader,
   Badge,
   Button,
   Card,
@@ -12,8 +11,7 @@ import {
   type DataTableColumn,
   Icon,
   LinkButton,
-  PageContent,
-  PageToolbar,
+  Page,
   ProgressBar,
   type ProgressSegment,
   SegmentedControl,
@@ -158,206 +156,194 @@ 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>
+    <Page.Root>
+      {/* An overview: the large title in the flow; the bar keeps the period and the report in
+          reach and repeats the title once it scrolls away. */}
+      <Page.TopBar collapse>
+        <Page.Tools>
+          <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>
+        </Page.Tools>
+        <Page.Actions>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.download" />
+            </Button.Icon>
+            Отчёт
+          </Button.Root>
+        </Page.Actions>
+      </Page.TopBar>
+      <Page.Header>
+        <Page.Heading>
+          <Page.Title>Обзор</Page.Title>
+          <Page.Description>Продажи и оплаты · на 8 октября, 9:40</Page.Description>
+        </Page.Heading>
+      </Page.Header>
+      <Page.Body>
+        {/* One board: every tile of the screen in one grid, 16 apart on both axes. */}
+        <Page.Grid>
+          {KPIS[period].map((kpi) => (
+            <Page.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>
+            </Page.Cell>
+          ))}
 
-      <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>
+          <Page.Cell>
+            <Card.Root variant="panel">
+              <Card.Body>
+                <Sparkline
+                  data={REVENUE[period]}
+                  label="Выручка по дням"
+                  summary="sum"
+                  formatValue={formatRubles}
+                />
+              </Card.Body>
+            </Card.Root>
+          </Page.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")}
+          {/* The chart spans two rows beside the two panels and fills their height. */}
+          <Page.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>
-                        ))}
-                        {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>
+                        );
+                      })}
+                    </svg>
+                  );
+                }}
+              />
+              <ChartFrame.Legend />
+            </ChartFrame.Root>
+          </Page.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>
+          <Page.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>
+          </Page.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>
+          <Page.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>
+          </Page.Cell>
+        </Page.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>
-    </>
+        {/* A new topic: a titled section, set off by more air than the tiles. */}
+        <Page.Section label="Последние оплаты">
+          <Page.Actions>
+            <LinkButton href="#invoices">Все счета</LinkButton>
+          </Page.Actions>
+          <DataTable columns={COLUMNS} rows={PAYMENTS} getRowKey={(row) => row.id} paging="none" />
+        </Page.Section>
+      </Page.Body>
+    </Page.Root>
   );
 }

package/src/components/card/examples/states.tsx

@@ -0,0 +1,59 @@
+/** A KPI tile while its report loads next to the loaded one, in the `stat-trend` and `mini` templates — `loading`. */
+import { Card, Icon, Typography } from "prime-ui-kit";
+
+export default function CardStatesExample() {
+  return (
+    <>
+      <div>
+        <div>
+          <Card.Root variant="stat-trend" loading>
+            <Card.Label>Выручка за месяц</Card.Label>
+            <Card.Value />
+            <Card.Delta />
+            <Card.Meta />
+          </Card.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            stat-trend · loading
+          </Typography>
+        </div>
+        <div>
+          <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>
+          <Typography as="span" variant="caption" tone="muted">
+            stat-trend
+          </Typography>
+        </div>
+      </div>
+      <div>
+        <div>
+          <Card.Root variant="mini" loading>
+            <Card.Icon>
+              <Icon name="object.users" />
+            </Card.Icon>
+            <Card.Label>Активные сессии</Card.Label>
+            <Card.Value />
+          </Card.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            mini · loading
+          </Typography>
+        </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>
+    </>
+  );
+}

package/src/components/chart-frame/COMPONENT.md

@@ -105,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 `Page.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. |

package/src/components/chart-frame/examples/fill-height.tsx

@@ -1,5 +1,5 @@
 /** 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`. */
-import { Card, ChartFrame, type ChartFrameSeries, chartColors, PageContent } from "prime-ui-kit";
+import { Card, ChartFrame, type ChartFrameSeries, chartColors, Page } from "prime-ui-kit";
 
 const SERIES: ChartFrameSeries[] = [
   { id: "fact", label: "Факт" },
@@ -22,9 +22,9 @@ const formatMillions = (value: number) => `${value.toLocaleString("ru-RU")} мл
 
 export default function ChartFrameFillHeightExample() {
   return (
-    <PageContent.Grid>
+    <Page.Grid>
       {/* The cell spans two rows beside the tiles; `height="fill"` takes all of it. */}
-      <PageContent.Cell span={8} rows={2}>
+      <Page.Cell span={8} rows={2}>
         <ChartFrame.Root
           series={SERIES}
           defaultHiddenSeries={["plan"]}
@@ -95,23 +95,23 @@ export default function ChartFrameFillHeightExample() {
           />
           <ChartFrame.Legend />
         </ChartFrame.Root>
-      </PageContent.Cell>
+      </Page.Cell>
 
-      <PageContent.Cell span={4}>
+      <Page.Cell span={4}>
         <Card.Root variant="stat-trend">
           <Card.Label>Выполнение плана</Card.Label>
           <Card.Value>96%</Card.Value>
           <Card.Delta tone="warning">−4 п. п. за октябрь</Card.Delta>
         </Card.Root>
-      </PageContent.Cell>
+      </Page.Cell>
 
-      <PageContent.Cell span={4}>
+      <Page.Cell span={4}>
         <Card.Root variant="stat-trend">
           <Card.Label>Прогноз на год</Card.Label>
           <Card.Value>84 млн ₽</Card.Value>
           <Card.Delta>План — 86 млн ₽</Card.Delta>
         </Card.Root>
-      </PageContent.Cell>
-    </PageContent.Grid>
+      </Page.Cell>
+    </Page.Grid>
   );
 }