prime-ui-kit 0.16.0 → 0.18.0

package/dist/skill/reference/components/slider/examples/controlled.tsx

@@ -24,7 +24,7 @@ export default function SliderControlledExample() {
             type="number"
             min={0}
             max={MAX_DISCOUNT}
-            aria-label="Скидка для клиента, %"
+            aria-label="Скидка для клиента"
             value={discount}
             onValueChange={(text) => {
               const next = Number(text);

package/dist/skill/reference/components/slider/examples/states.tsx

@@ -3,19 +3,23 @@ import { Slider } from "prime-ui-kit";
 
 export default function SliderStatesExample() {
   return (
-    <div>
+    <>
       <div>
-        <Slider label="min" showValue defaultValue={0} />
+        <div>
+          <Slider label="min" showValue defaultValue={0} />
+        </div>
+        <div>
+          <Slider label="max" showValue defaultValue={100} />
+        </div>
       </div>
       <div>
-        <Slider label="max" showValue defaultValue={100} />
+        <div>
+          <Slider label="invalid" showValue defaultValue={90} invalid />
+        </div>
+        <div>
+          <Slider label="disabled" showValue defaultValue={35} disabled />
+        </div>
       </div>
-      <div>
-        <Slider label="invalid" showValue defaultValue={90} invalid />
-      </div>
-      <div>
-        <Slider label="disabled" showValue defaultValue={35} disabled />
-      </div>
-    </div>
+    </>
   );
 }

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

@@ -13,10 +13,10 @@
 - An API that takes one value per field (`multiple: false`), a screen whose text search lives elsewhere (`searchable={false}`), values of different kinds in one field (`group`).
 
 ## When not to use
-- One field with a few options → use [SegmentedControl](../segmented-control/COMPONENT.md), [Select](../select/COMPONENT.md) or [TagSelect](../tag-select/COMPONENT.md) in the toolbar.
+- One field with a few options → use [SegmentedControl](../segmented-control/COMPONENT.md), [Select](../select/COMPONENT.md) or [TagSelect](../tag-select/COMPONENT.md) in the page's `Page.Tools`.
 - A search outside a table or list page (inside a picker, a settings section, a panel) → [Input](../input/COMPONENT.md) with a search icon. Over a table or list page the search is SmartFilter even with no fields yet (`fields={[]}`): it grows into filters without a rebuild.
 - Choosing values for a form field → use [TagSelect](../tag-select/COMPONENT.md).
-- One period that drives a whole dashboard → [Datepicker](../datepicker/COMPONENT.md) in the page toolbar; SmartFilter ranges filter rows of a list.
+- One period that drives a whole dashboard → [Datepicker](../datepicker/COMPONENT.md) in the page's `Page.Tools`; SmartFilter ranges filter rows of a list.
 
 ## Import
 ```tsx
@@ -30,7 +30,7 @@ import {
 
 ## Anatomy
 ```
-SmartFilter.Root                  state + context (flex column)
+SmartFilter.Root                  state + context, no DOM
 ├─ SmartFilter.Toolbar            [search Input (searchable)] [filter Button (count Badge)] — the anchor of the panel
 │  └─ panel                       flush Popover as wide as the toolbar; sections split by Dividers
 │     ├─ query row                ghost Button «Искать «text»» + Kbd ↵, while typing
@@ -41,14 +41,14 @@ SmartFilter.Root                  state + context (flex column)
 │     └─ footer                   hint · count · Reset Button
 └─ SmartFilter.Chips              applied filters as removable Badges · add / clear all Buttons
 ```
-The toolbar and the chips are separate parts so a page can put them in different places; both only need to be inside `Root`.
+The toolbar and the chips are separate parts so a page can put them in different places; both only need to be inside `Root`, which draws nothing of its own.
 
 ## API
 
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### SmartFilter.Root
-`ref` → `HTMLDivElement`. A `<div>` (flex column) with the state and the context; sets `data-size`.
+No DOM, no ref. The value, the search and the panel state shared by its parts; the host places the parts.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -62,11 +62,10 @@ The toolbar and the chips are separate parts so a page can put them in different
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of the filter button, the search, the tags and the panel. Without it the tier of its host, else `m`. |
 | `collapsedLimit` | `number` | `12` | Values of one field shown before «Ещё N» (not while searching). |
 | `labels` | `Partial<SmartFilterLabels>` | — | Built-in strings, see Labels. |
-| `children` | `ReactNode` | — (required) | `SmartFilter.Toolbar` and `SmartFilter.Chips`, anywhere inside. |
-| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "defaultValue" \| "onChange">` | — | `className` and the other div attributes. |
+| `children` | `ReactNode` | — (required) | `SmartFilter.Toolbar` and `SmartFilter.Chips`, anywhere inside — in a page bar the Root wraps `Page.Root`. |
 
 ### SmartFilter.Toolbar
-`ref` → `HTMLDivElement`. A `<div>`: the search Input first, then the filter Button (a count Badge while filters apply); the anchor of the panel, a flush Popover.
+`ref` → `HTMLDivElement`. A `<div>`: the search Input first, then the filter Button (a count Badge while filters apply), which shows only its icon and count when the search would get too little room; the anchor of the panel, a flush Popover.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -165,15 +164,16 @@ same height and type.
 | range inverted | `from` above `to` | both bound inputs `aria-invalid` with the danger ring; nothing matches |
 | single value | `multiple: false` | at most one value `aria-pressed`; no «−» |
 | no filters | empty value | no count on the button, no Chips |
+| compact button | the toolbar narrower than the search's 9rem plus the labelled button (search and fields both present) | the button shows its icon and the count Badge; its name stays «Фильтр» (`aria-label` without filters, a visually hidden label with them) |
 
 ## Layout & spacing
-- The panel is a flush Popover as wide as the toolbar; every section is a full-width row with its own padding (`--prime-space-3` × `--prime-space-4`, footer `--prime-space-2` × `--prime-space-4`), Dividers run edge to edge, the field label column is `--prime-space-24`; a row narrower than 24rem stacks the label over the values (an intrinsic wrap, no breakpoint).
-- The toolbar is one row of controls (`--prime-space-2` gap): the search first, growing from 9rem (`--prime-space-24` × 1.5), then the filter button at its own width. When less than 9rem is left beside the button, the button moves under the search; every row stays one control high. Search first, filter second — the active filters (`SmartFilter.Chips`) sit under them.
+- The panel is a flush Popover at least as wide as the toolbar (`width="min-trigger"`), by its content up to twice the panel minimum when the toolbar is narrow; every section is a full-width row with its own padding (`--prime-space-3` × `--prime-space-4`, footer `--prime-space-2` × `--prime-space-4`), Dividers run edge to edge, the field label column is at least `--prime-space-24` (a longer name takes its own width, never breaking inside a word); a row narrower than 24rem stacks the label over the values (an intrinsic wrap, no breakpoint).
+- The toolbar is one row of controls (`--prime-space-2` gap): the search first, growing from 9rem (`--prime-space-24` × 1.5), then the filter button at its own width. When less than 9rem is left beside the labelled button, the button shows only its icon and count and stays beside the search, which gives its width instead of wrapping. Every row stays one control high. The search and the button also stand alone: `searchable={false}` keeps the button, empty `fields` keep the search. Search first, filter second — the active filters (`SmartFilter.Chips`) sit under them.
 - Chips are Badges of the toolbar tier on the badge scale (`xs` → `s`), so a tag sits lower than the controls above it; «Добавить фильтр» is a tag of the same tier and «Сбросить все» a LinkButton with the tag's text size.
 - Values and chips wrap with `--prime-space-2` gaps; «Сбросить все» is pushed to the end. The chips row rises in with the first filter and closes up in place with the last (`partPresence`).
 - Option groups stack `--prime-space-3` apart, a caption `--prime-space-1` above each group's values. A range row holds two equal Inputs with a dash between them, centred on the field label.
 - While typing a search a range row stays only when its field name matches.
-- The root is a flex column (`--prime-space-3`): Toolbar, then Chips.
+- The root draws nothing: its host places Toolbar and Chips. In a page bar the Toolbar goes in `Page.Tools` and the Chips in `Page.Chips`, with `SmartFilter.Root` around `Page.Root`; outside a page a host stacks them (a `Card.Body`, a form column).
 
 ## Accessibility
 
@@ -244,7 +244,7 @@ same height and type.
 - A fixed field marked `finite: false` → the user can hide every value and get an empty list.
 - Filtering the list with `includes` → use `matchesSmartFilter` (empty `include` is "any", `exclude` rejects; range bounds are inclusive, dates by whole days; an item with no value passes only an empty filter).
 - Sending `include` to a server for a hidden value of a fixed field → use `resolveSmartFilterValues` («hide» becomes «all except», `[]` means no filter).
-- Putting `Chips` outside `SmartFilter.Root` → every part needs the root.
+- Putting `Chips` outside `SmartFilter.Root` → every part needs the root; when Toolbar and Chips stand in different groups of a page bar, wrap `Page.Root` in it.
 - A second row of filter buttons next to the toolbar → fields belong in `fields`.
 - An amount or a period in its own Popover beside the toolbar → a `range` / `date-range` field; it gets a chip and the count.
 - One field split in two because its values are of different kinds → one field with `group` on the options.
@@ -252,4 +252,4 @@ same height and type.
 
 ## Related
 - **Built from:** [Button](../button/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Input](../input/COMPONENT.md), [Datepicker](../datepicker/COMPONENT.md), [Popover](../popover/COMPONENT.md), [Divider](../divider/COMPONENT.md), [Kbd](../kbd/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [LinkButton](../link-button/COMPONENT.md), [Typography](../typography/COMPONENT.md), Icon (`action.search`, `action.filter`, `action.add`, `nav.chevronDown`), [VisuallyHidden](../visually-hidden/COMPONENT.md)
-- **See also:** [PageToolbar](../page-toolbar/COMPONENT.md), [TagSelect](../tag-select/COMPONENT.md), [DataTable](../data-table/COMPONENT.md)
+- **See also:** [Page](../../layout/page/COMPONENT.md) (`Page.Tools`, `Page.Chips`), [TagSelect](../tag-select/COMPONENT.md), [DataTable](../data-table/COMPONENT.md)

package/dist/skill/reference/components/smart-filter/examples/examples.module.css

@@ -30,6 +30,9 @@
 
 /* 320 px: the smallest supported viewport. */
 .narrow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
   width: min(100%, calc(var(--prime-space-20) * 4));
   min-width: 0;
 }

package/dist/skill/reference/components/smart-filter/examples/many-values.tsx

@@ -1,6 +1,8 @@
 /** An open set of twenty services, degraded ones marked with an icon, collapsed after eight; typing narrows the panel and marks the match in accent — `finite`, `icon`, `collapsedLimit`. */
 import { Icon, SmartFilter, type SmartFilterField } from "prime-ui-kit";
 
+import styles from "./examples.module.css";
+
 const SERVICES = [
   "access-policy",
   "billing",
@@ -41,13 +43,15 @@ const FIELDS: SmartFilterField[] = [
 
 export default function SmartFilterManyValuesExample() {
   return (
-    <SmartFilter.Root
-      fields={FIELDS}
-      collapsedLimit={8}
-      defaultValue={{ service: { include: [], exclude: ["events"] } }}
-    >
-      <SmartFilter.Toolbar />
-      <SmartFilter.Chips />
-    </SmartFilter.Root>
+    <div className={styles.stack}>
+      <SmartFilter.Root
+        fields={FIELDS}
+        collapsedLimit={8}
+        defaultValue={{ service: { include: [], exclude: ["events"] } }}
+      >
+        <SmartFilter.Toolbar />
+        <SmartFilter.Chips />
+      </SmartFilter.Root>
+    </div>
   );
 }

package/dist/skill/reference/components/smart-filter/examples/sizes.tsx

@@ -1,5 +1,5 @@
 /** Every size tier: the filter button, the search, the tags and the panel follow one tier — `size`. */
-import { SmartFilter, type SmartFilterField, Typography } from "prime-ui-kit";
+import { Card, SmartFilter, type SmartFilterField, Typography } from "prime-ui-kit";
 
 const FIELDS: SmartFilterField[] = [
   {
@@ -18,8 +18,12 @@ export default function SmartFilterSizesExample() {
       {SIZES.map((size) => (
         <div key={size}>
           <SmartFilter.Root fields={FIELDS} size={size} defaultValue={ONLY_GET}>
-            <SmartFilter.Toolbar />
-            <SmartFilter.Chips />
+            <Card.Root>
+              <Card.Body>
+                <SmartFilter.Toolbar />
+                <SmartFilter.Chips />
+              </Card.Body>
+            </Card.Root>
           </SmartFilter.Root>
           <Typography as="span" variant="caption" tone="muted">
             {size}

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

@@ -133,6 +133,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.
+- On a head narrower than 20rem (a phone card) the date takes its own line under the title, which wraps instead of being cut; the break follows the width only, so a date that changes while scrubbing never moves it.
 - `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 a value only in its tooltip while scrubbed.
 - The tooltip is the kit's chart tooltip, placed like every anchored layer (`usePosition`): right of the pointer at its height, on the left only where the right has no room in the viewport — crossing the middle never moves it; from the keyboard right of the point at mid-height. Portaled, so a card or a table scroller never clips it.
 

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

@@ -1,5 +1,7 @@
 /** The same month of active users as a smooth curve, straight segments and steps — `curve`. */
-import { Sparkline, type SparklinePoint, Typography } from "prime-ui-kit";
+import { Card, Sparkline, type SparklinePoint } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
 
 const USERS: SparklinePoint[] = [
   { label: "сен, 1 нед.", value: 1240 },
@@ -10,19 +12,22 @@ const USERS: SparklinePoint[] = [
   { label: "окт, 2 нед.", value: 1840 },
 ];
 
-const CURVES = ["smooth", "linear", "step"] as const;
+const CURVES = [
+  { curve: "smooth", title: "Плавная кривая" },
+  { curve: "linear", title: "Прямые отрезки" },
+  { curve: "step", title: "Ступени" },
+] as const;
 
 export default function SparklineCurveExample() {
   return (
-    <div>
-      {CURVES.map((curve) => (
-        <div key={curve}>
-          <Sparkline data={USERS} label="Активные пользователи" curve={curve} />
-          <Typography as="span" variant="caption" tone="muted">
-            {curve}
-          </Typography>
-        </div>
+    <>
+      {CURVES.map(({ curve, title }) => (
+        <Card.Root key={curve} className={styles.card}>
+          <Card.Body>
+            <Sparkline data={USERS} label={title} curve={curve} />
+          </Card.Body>
+        </Card.Root>
       ))}
-    </div>
+    </>
   );
 }

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

@@ -12,19 +12,23 @@ const formatRubles = (value: number) => `${value.toLocaleString("ru-RU")} ₽`;
 
 export default function SparklineStatesExample() {
   return (
-    <div>
+    <>
       <div>
-        <Sparkline data={REVENUE} label="Выручка" formatValue={formatRubles} />
-        <Typography as="span" variant="caption" tone="muted">
-          data
-        </Typography>
+        <div>
+          <Sparkline data={REVENUE} label="Выручка" formatValue={formatRubles} />
+          <Typography as="span" variant="caption" tone="muted">
+            data
+          </Typography>
+        </div>
       </div>
       <div>
-        <Sparkline data={[]} label="Выручка" loading />
-        <Typography as="span" variant="caption" tone="muted">
-          loading
-        </Typography>
+        <div>
+          <Sparkline data={[]} label="Выручка" loading />
+          <Typography as="span" variant="caption" tone="muted">
+            loading
+          </Typography>
+        </div>
       </div>
-    </div>
+    </>
   );
 }

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

@@ -46,6 +46,7 @@ Switch.Root          field grid; ref and input props go to the native input (rol
 | `optional` | `boolean` | `false` | Muted `labels.optional` after the label text; the field may stay off. |
 | `labels` | `Partial<SwitchLabels>` | — | Built-in strings, see Labels. |
 | `hint` | `ReactNode` | — | Help text under the label text. Hidden while `error` is shown. |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | `false` | Danger ring on the off track and `aria-invalid`. A non-empty `error` implies it. |
 | `disabled` | `boolean` | `false` | No toggling; muted track (on = `accent-soft`), dimmed text and hint. |
@@ -97,7 +98,7 @@ No `variant` / `tone` / `color`.
 | off | `checked={false}` / default | `data-state="unchecked"`; track `fill-strong` (hover `fill-strong-hover`), thumb at the start |
 | on | `checked` / `defaultChecked` | `data-state="checked"`; accent track, the thumb glides to the end |
 | invalid | `invalid` or a non-empty `error` | `data-invalid="true"`, `aria-invalid`; danger ring on the off track and on focus; the row shakes once when an error arrives (`data-shake`) |
-| disabled | `disabled` | `data-disabled="true"`; off track `fill-muted`, on track `accent-soft`, `cursor: not-allowed` |
+| disabled | `disabled` | `data-disabled="true"`; off track `fill-muted`, on track `accent-soft`, thumb `control-thumb-disabled` without shadow, `cursor: not-allowed` |
 | read-only | `readOnly` | `aria-readonly="true"` on the input, `data-readonly="true"` on the field; no hover or press, default cursor |
 | saving | `loading`, or `onCheckedChange` returned a pending promise | the thumb stands in the new position with a `Spinner` inside (accent when on, muted when off; it fades in by itself), `aria-busy` on the input, `data-loading` on the track, presses ignored; a rejection glides the thumb back (`base`, emphasized) |
 | pressed | pointer press | the track scales to the compact press scale (not when disabled or read-only) |

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

@@ -189,7 +189,7 @@ Avoid icons or descriptions on only some tabs (uneven rows; without an icon on e
 | closing, confirm pending | `onRemove` returned a promise that has not settled | the close button is `loading` (`aria-busy`); the tab, its selection and focus stay; resolved → the neighbour takes over, rejected → nothing changes |
 | two-line | `Tabs.Description` child | `data-two-line="true"` |
 | collapsed | tabs wider than the list, or a label that would be cut (horizontal) | list `data-collapse="full" \| "compact" \| "icon"`: `compact` hides icons and descriptions; `icon` takes labels, counts and close buttons out of the row — a `VisuallyHidden` copy of the label names the tab and a `Tooltip` shows it — only when every tab has an icon |
-| overflow | tabs at their narrowest (content width, `minItemWidth` or icon squares) still wider than the list | `data-overflow-start` / `data-overflow-end` on the list (the switcher row, a ScrollContainer), faded edges as deep as the hidden part at most (they grow and melt with the scroll, never switch); the active tab is kept in view and clear of the fades on mount and on every value change, the first and the last tab scroll all the way to the end — only the list scrolls, never the page. A column (a wide vertical list) has plain edges |
+| overflow | tabs at their narrowest (content width, `minItemWidth` or icon squares) still wider than the list | `data-overflow-start` / `data-overflow-end` on the list (the switcher row, a ScrollContainer), faded edges as deep as the hidden part at most (they grow and melt with the scroll, never switch); when the end edge would cut only a tab's empty side, the tabs at `minItemWidth` widen a little (`--tabs-peek`, up to 30%) so a label fades out at the edge and shows that more tabs follow; the active tab is kept in view and clear of the fades on mount and on every value change, the first and the last tab scroll all the way to the end — only the list scrolls, never the page. A column (a wide vertical list) has plain edges |
 
 The indicator glides (`emphasized` + `base`, `data-animate="true"`) only into a choice by click, arrow keys or closing the active tab; on mount, a value set from outside, a resize, font loading, tabs added or removed and collapse it is placed without motion, and it stays still under `prefers-reduced-motion`. The list scrolls smoothly to the active tab only after such a choice too.
 

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

@@ -60,6 +60,7 @@ TagSelect                       field frame: label · control · hint/error (sin
 | `onOptionDelete` | `(value: string) => void \| Promise<void>` | — | Enables «Удалить» in the row menu; the value also leaves the selection. A returned Promise defers it: resolve deletes, reject keeps everything (e.g. after a confirmation). |
 | `label` | `ReactNode` | — | Field label above; names the input. |
 | `hint` | `ReactNode` | — | Support text under the field; linked by `aria-describedby`. |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message; replaces the hint and implies `invalid`. |
 | `required` | `boolean` | `false` | Red `*` after the label and `aria-required` on the input. |
 | `optional` | `boolean` | — | Muted `labels.optional` after the label. |

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

@@ -46,6 +46,7 @@ Unlike Input, Textarea has no Wrapper / Field parts: `Textarea.Root` renders the
 | `required` | `boolean` | — | Native `required` on the textarea and a red `*` after the label (`aria-hidden`). |
 | `optional` | `boolean` | `false` | Muted marker right after the label text (`labels.optional`). |
 | `hint` | `ReactNode` | — | Help text under the field. Hidden while `error` is shown. |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | `false` | Danger inset ring on the field box, `aria-invalid` on the textarea. A non-empty `error` implies it. |
 | `focusRing` | `boolean` | `true` | `false` hides only the visual focus ring on the field box (`data-focus-ring="false"`); focus, keyboard, ARIA and the invalid ring stay. |

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

@@ -27,7 +27,7 @@ Timeline.Root                    size container, sets the tier (size, else the h
 └─ Timeline.Group label          labelled <ol role="list">; the line runs from its first dot to its last
    ├─ Timeline.Item              <li> + row (div | button | a | asChild element) with the dot
    │  ├─ Timeline.ItemTitle      first line
-   │  ├─ Timeline.ItemMeta       second line (date); <strong> emphasizes a part
+   │  ├─ Timeline.ItemMeta       second line (date); <strong> emphasizes a part; repeats, lines stack
    │  └─ Timeline.ItemValue      trailing amount
    │     └─ Timeline.ItemMeta    second line under the amount
    └─ Timeline.Gap               <li>: interval between events (dashed segment, hollow dot)
@@ -73,7 +73,7 @@ Timeline.Root                    size container, sets the tier (size, else the h
 | `…rest` | `Omit<HTMLAttributes<HTMLElement>, "children" \| "color" \| "onClick">` | — | The other row attributes (`target`, `rel`, `download` with `href`). |
 
 ### Timeline.ItemTitle · Timeline.ItemMeta
-`ref` → `HTMLSpanElement`. `<span>` lines: the event (medium, accent on the highlighted row, wraps) and the muted secondary line with tabular numbers — under the title the date (emphasize a part with `<strong>`), inside `Timeline.ItemValue` the value's second line.
+`ref` → `HTMLSpanElement`. `<span>` lines: the event (medium, wraps) and the muted secondary line, tabular — under the title the date (`<strong>` emphasizes a part; several `Timeline.ItemMeta` stack), inside `Timeline.ItemValue` the value's second line.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -180,7 +180,7 @@ No `labels`.
 | [overview.tsx](examples/overview.tsx) | An operations feed: one labelled group, a line through the dots, the row under the pointer highlighted — `Timeline.Group`, `Timeline.ItemValue`. |
 | [variants.tsx](examples/variants.tsx) | Dot hues for categories at reduced emphasis, and status tones on items, values and gaps at full emphasis — `color`, `tone`. |
 | [sizes.tsx](examples/sizes.tsx) | Every tier scales text, dot and row rhythm, rows 40 to 76 px — `size`. |
-| [structure.tsx](examples/structure.tsx) | A service history with intervals between events, a caption on the right of a gap and a second value line — `Timeline.Gap`, `Timeline.Description`, `Timeline.ItemMeta`. |
+| [structure.tsx](examples/structure.tsx) | A service history with intervals between events, a caption on the right of a gap, two meta lines under a repair and a second value line — `Timeline.Gap`, `Timeline.Description`, `Timeline.ItemMeta`. |
 | [links.tsx](examples/links.tsx) | Rows that open something: an operation page by a link or by your router link through the slot, a receipt in place by a button; one Tab stop each with a focus ring — `href`, `asChild`, `onClick`. |
 | [narrow.tsx](examples/narrow.tsx) | At 375 px the title wraps and the amount stays right; below 20rem of its own width the amount moves under the meta line — `Timeline.ItemValue`. |
 

package/dist/skill/reference/components/timeline/examples/structure.tsx

@@ -1,4 +1,4 @@
-/** A service history with intervals between events, a caption on the right of a gap and a second value line — `Timeline.Gap`, `Timeline.Description`, `Timeline.ItemMeta`. */
+/** A service history with intervals between events, a caption on the right of a gap, two meta lines under a repair and a second value line — `Timeline.Gap`, `Timeline.Description`, `Timeline.ItemMeta`. */
 import { Timeline } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -36,6 +36,7 @@ export default function TimelineStructureExample() {
           <Timeline.ItemMeta>
             <strong>07.06.26</strong> · 12 100 км
           </Timeline.ItemMeta>
+          <Timeline.ItemMeta>Мастер Олег Смирнов · гарантия 6 месяцев</Timeline.ItemMeta>
           <Timeline.ItemValue>
             2 800 ₽<Timeline.ItemMeta>Ремонт</Timeline.ItemMeta>
           </Timeline.ItemValue>

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

@@ -94,7 +94,7 @@ Text has no interactive states.
 - No outer margins: spacing comes from the parent's `gap`.
 - Title, heading and display roles balance their lines (`text-wrap-style: balance`); body and caption avoid a lone last word (`pretty`). Long words break (`overflow-wrap: break-word`).
 - `code` uses the mono family (JetBrains Mono); every other role the sans family (Golos Text).
-- Reading text: cap the column at the reading measure (PageContent `maxWidth="readable"`, 60–75 characters).
+- Reading text: cap the column at the reading measure (`Page.Root maxWidth="readable"`, 60–75 characters).
 - `truncate` needs a block element and a shrinking parent (`min-width: 0` in flex rows).
 
 ## Accessibility
@@ -138,4 +138,4 @@ No `labels`.
 
 ## Related
 - **Built from:** —
-- **See also:** [LinkButton](../link-button/COMPONENT.md), [CodeBlock](../code-block/COMPONENT.md), [Label](../label/COMPONENT.md), [PageContent](../page-content/COMPONENT.md)
+- **See also:** [LinkButton](../link-button/COMPONENT.md), [CodeBlock](../code-block/COMPONENT.md), [Label](../label/COMPONENT.md), [Page](../../layout/page/COMPONENT.md)

package/dist/skill/reference/foundation.md

@@ -126,7 +126,8 @@ one lightness step, ΔL 0.03 in OKLab. `tokens/layers.ts` computes every color a
 - Every color keeps the hue and chroma of the page, so the cool Graphite bias is on every layer.
 - Controls on a layer (field, chip, neutral button, segmented track, the Tabs strip's tone) step from
   it: darker in light, lighter in dark, with the same reflect. `fillHover` is two steps. The selected
-  thumb on a track is two steps lighter than the track.
+  thumb on a track is lighter than the track: two steps in light, four in dark, where only
+  lightness sets it apart.
 - Floating layers (menus, popovers, modals, drawers, notifications) sit one step above a card and never
   reflect: white in light (their shadow carries the depth), a step lighter in dark. Two layers can
   nest inside one (`floating1`, `floating2`).
@@ -240,7 +241,7 @@ cards `--prime-card-radius` (12); floating panels `--prime-panel-radius` (12) wi
 Elevation: `--prime-shadow-raised` (a card on the page, barely there; `--prime-layer-shadow`) · `--prime-shadow-overlay` (menus, popovers,
 tooltips, datepicker) · `--prime-shadow-modal` (modal, drawer, sheet).
 Z-index: `--prime-z-*` only, never a number. Two groups:
-- Page level: a sticky surface (AppHeader, a DataTable head, the Gantt head) on `--prime-z-sticky`;
+- Page level: a sticky surface (Page.TopBar, a DataTable head, the Gantt head) on `--prime-z-sticky`;
   every overlay shares `--prime-z-overlay` and portals to `<body>` when it opens, so the open order is
   the stacking order; toasts sit above on `--prime-z-toast`.
 - Local steps, for stacking parts inside one component that makes its own stacking context:
@@ -488,11 +489,11 @@ Components carry no motion code of their own for these layers.
 - Every screen works from 320 to 2560px and at 400% zoom without losing a function: narrow first,
   break by content, rearrange instead of hiding, fluid by default.
 - Components adapt with container queries (`container-type: inline-size`) where their own width
-  matters (Card, PageToolbar, DataTable toolbar, Modal footer, Datepicker months, Tabs, Stepper,
+  matters (Card, DataTable toolbar, Modal footer, Datepicker months, Tabs, Stepper,
   ChatList, FieldList, the field frame). Container thresholds are written in `rem`
   (`@container (max-width: 30rem)`) — the one place a raw length is allowed (§2).
 - Viewport width queries (`@media (max-width | min-width)`) are allowed for exactly four things:
-  - the app shell (AppShell, AppHeader);
+  - the app shell (AppShell);
   - the overlay form below 640: Modal and its dialog parts, Drawer, Popover actions, Datepicker
     months, the Notification zone, `overlayMotion`;
   - touch text: editable field text at 16px under `(pointer: coarse), (max-width: 639px)`
@@ -511,17 +512,20 @@ Components carry no motion code of their own for these layers.
   one shared scroller. They never wrap: they scroll inside themselves,
   stretched items tend to equal width and never shrink below their label, the selection indicator
   moves only after a person's choice. Host duty: a switcher's host gives it a bounded width — a flex
-  or grid child that holds a switcher sets `min-width: 0` (the PageToolbar View slot does), otherwise
+  or grid child that holds a switcher sets `min-width: 0` (each tool of Page.Tools does), otherwise
   the switcher grows the row instead of scrolling.
 - Scroll overflow is always visible: a cut-off item, an edge fade or an edge shadow (`useEdgeOverflow`).
-- Sticky headers (AppHeader, the DataTable head, the Gantt head) stop sticking on screens lower than
+- Sticky headers (Page.TopBar, the DataTable head, the Gantt head) stop sticking on screens lower than
   480px: `@media (max-height: 479px)`, the one height query, lives in `src/internal/sticky`. Overlays
   respect safe-area insets.
-- The page panel is `PageToolbar`, the page's tools row in `AppHeader.Tools`. Its rows follow the
-  row model in `src/components/page-toolbar/COMPONENT.md` (Layout by width): one row from a 56rem
-  container; below it Tools + Actions, then Chips, then Sections and View on full rows; on a phone,
-  when the Tools would get less than 18rem beside the Actions, the Actions take their own row under
-  them. The primary action is always at the end of the top row it shares with the Tools.
+- The page's top bar (`Page.TopBar`) holds four groups — Page.Heading (the path ending in the
+  title), Page.Tools, Page.Actions (every button of the page), Page.Chips — and lays them out by one
+  plan chosen from their natural widths (`src/internal/barPlan`), in five steps: one line while
+  everything fits; then the tools on a line of their own that they fill (a search grows first) while
+  the actions stay beside the heading; then Buttons with an icon show only it, the secondary first,
+  then the primary; then the secondary Buttons fold into «⋯» and the primary stays; only then does the
+  heading truncate, the path before the title. Nothing overflows; the chips are a line of their own
+  under everything. The heading keeps its natural width — the title has no size prop.
 - Field affixes (units like `%`, `°`, `₽`, prefixes like `https://`) are flex items in the field row next to the value,
   separated by the tier `gap`; never absolutely positioned, never sized with a fixed width. A numeric value with a unit
   is one group: value (tabular-nums) + unit, aligned the same way in every field of a row. Field widths come from the