prime-ui-kit 0.15.0 → 0.17.0

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

@@ -48,7 +48,7 @@ Gantt                          surface (layer of the ladder), size container
 | `getRowLabel` | `(row: Row) => string` | — (required) | Row name: the first column text by default and the row header for assistive tech. |
 | `getRowBars` | `(row: Row) => Bar[]` | — (required) | Bars of a row (`GanttBar`); bars that overlap in time stack into lanes and grow the row. |
 | `renderRow` | `(row: Row) => ReactNode` | — | First-column content instead of the label (a name with a role or a code). |
-| `renderRowAvatar` | `(row: Row) => ReactNode` | — | A picture before the row content (an `Avatar`). Below 36rem of chart width the column keeps only it; the name stays for assistive tech. |
+| `renderRowAvatar` | `(row: Row) => ReactNode` | — | A picture before the row content (an `Avatar`). Below 36rem of chart width the column keeps only it; the row header is then named by `getRowLabel` (`aria-label`). |
 | `getRowHref` | `(row: Row) => string` | — | The row header is a link: a real `<a>` fills the first column and is the row's stop in the grid, so a click, ⌘/Ctrl-click, a middle click and «open in new tab» work on it; Space follows it like Enter. |
 | `onRowClick` | `(row: Row, event: GanttRowClickEvent) => void` | — | Opens a row in place (a profile in a Drawer): a click on its header, Enter or Space; never from a control inside it. With `getRowHref` it gets plain clicks: `event.preventDefault()` routes in the app. |
 | `renderBarTooltip` | `(bar: Bar, row: Row) => ReactNode` | — | Extra lines of a bar's tooltip (a client, hours, an owner), under its title and the dates line — those always stay, the dates and the duration are what the bar means on the axis. |
@@ -56,24 +56,26 @@ Gantt                          surface (layer of the ladder), size container
 | `defaultScale` | `"day" \| "week" \| "month"` | `"week"` | Initial zoom, uncontrolled. |
 | `onScaleChange` | `(scale: GanttScale) => void` | — | The zoom switch changed. The day in the middle of the view stays in the middle. |
 | `range` | `{ start: Date; end: Date }` | — | The time axis, snapped to whole units. Default: every bar and today with room on both sides (a week of days, two weeks, a month), at least 35 days / 14 weeks / 12 months. |
-| `today` | `Date` | `new Date()` | The day of the today line; the chart opens with it a third into the view and «Сегодня» scrolls back to it. |
+| `today` | `Date` | today | The day of the today line; the chart opens with it a third into the view and «Сегодня» scrolls back to it. |
 | `locale` | `Locale` | `ru` | date-fns locale of the header, tooltips and spoken dates. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier of rows, bars, header and toolbar controls: one-lane rows 28 · 32 · 44 · 48 · 52 px; a day is 32 · 40 · 48 px wide at `day`. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of rows, bars, header and toolbar controls: one-lane rows 28 · 32 · 44 · 48 · 52 px; a day is 32 · 40 · 48 px wide at `day`; bar text one tier down. Without it the tier of its host, else `m`. |
 | `readOnly` | `boolean` | `false` | No moving, resizing or creating; bars still select and show their dates. |
 | `loading` | `boolean` | `false` | Without rows — skeleton rows in the chart's geometry and a status for screen readers; with rows they stay and the grid is `aria-busy`. |
 | `empty` | `ReactNode` | — | Empty-state content when `rows` is empty; a string goes into a compact `EmptyPage`. Defaults to `labels.empty`. |
 | `toolbar` | `ReactNode` | — | Content at the start of the toolbar (title, filters, a primary action); the zoom and «Сегодня» sit at its end. |
 | `scrollHeight` | `number \| "fill"` | — | Max height of the viewport in px, so the header sticks while rows scroll; `"fill"` — the chart takes its flex / grid parent's height. |
-| `onSelect` | `(bar: Bar, row: Row) => void` | — | A bar was activated (click, Enter, Space): open its record. A drag never selects. |
+| `onItemOpen` | `(bar: Bar, row: Row) => void` | — | A bar was activated (click, Enter, Space): open its record. A drag never opens it. |
 | `onBarChange` | `(dates: GanttDates, bar: Bar, row: Row) => void \| Promise<void>` | — | New dates of a bar after a drag or an editing key — update your data. A returned Promise keeps the bar busy at the new dates; a rejection glides it back. Without it bars cannot be edited. |
 | `onBarCreate` | `(dates: GanttDates, row: Row) => void \| Promise<void>` | — | A new bar in a row: drawn across empty space, a double-click, a touch long-press or `N`. Add it to your data; a returned Promise keeps a busy ghost in place. Without it nothing can be created. |
 | `labels` | `Partial<GanttLabels>` | — | Built-in strings, see Labels. |
-| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "onSelect">` | — | `aria-label` (the grid's name), `className` and the other div attributes. |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `aria-label` (the grid's name), `className` and the other div attributes. |
 
-### GanttBar
+### Types
+
+#### `GanttBar`
 One bar of `getRowBars`: data, not a part. Dates are calendar days with an exclusive `end`; `start` equal to `end` is a milestone. Extend the type with your own fields: callbacks get your object back.
 
-| Prop | Type | Default | Description |
+| Field | Type | Default | Description |
 |---|---|---|---|
 | `id` | `string` | — (required) | Unique across the chart. |
 | `start` | `Date` | — (required) | First day. |
@@ -126,7 +128,7 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 | State | Driven by | DOM |
 |---|---|---|
 | zoom | `scale` / `defaultScale` | `data-scale` on the root; the grid cross-fades into the new zoom, the day in the middle stays in the middle |
-| tier | `size` | `data-size` on the root |
+| tier | `size` (else the host tier) | `data-size` on the root; each row's track carries the tier one down (`data-size`), the size of the bar text |
 | bar color | `color` / `tone` | `data-color` (without a tone) or `data-tone` on the bar |
 | milestone | `start` equal to `end` | `data-milestone`: a diamond on its day, the label beside it |
 | label beside | the label does not fit the bar (measured) | `data-label="inside" \| "outside" \| "hidden"` (beside the bar when there is room, else hidden; the name and the tooltip keep it) |
@@ -137,7 +139,7 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 | pending | `onBarChange` returned a Promise | `data-pending`, `aria-busy`, a Spinner; reject → the bar glides back |
 | loading | `loading` without rows | Skeleton rows with one or two bars each in a real bar's height, radius and lane, under the column and today lines; `aria-busy`, status `labels.loading`; data cross-fades in |
 | empty | `rows` empty | a compact `EmptyPage` (`empty` or `labels.empty`), cross-faded in |
-| row opens | `onRowClick` / `getRowHref` | `data-clickable` on the row header: a pointer cursor and a hover wash under its content; with `getRowHref` the content is an `<a>` whose hit area fills the header |
+| row opens | `onRowClick` / `getRowHref` | `data-clickable` on the row header: a pointer cursor and a hover wash under its content (an inset shadow over the opaque header, faded both ways); with `getRowHref` the content is an `<a>` whose hit area fills the header |
 | scrolled | the axis hides content at an edge | `data-overflow-start` / `data-overflow-end`: an edge shadow from the pinned column / at the end |
 
 ## Layout & spacing
@@ -146,7 +148,7 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 - Header: two quiet mono tiers. The upper tier (months as `MM.yyyy` — «09.2026» — or years at `month`) is the faintest text on the chart and has no lines: a period is told by its label, which starts at the period's first column (at `week`, the first ISO week: the one whose Thursday is in the month) and rides the start of the visible axis while the period is on screen. The lower tier has faint hairlines; the column that opens a new period gets a slightly stronger line, down through the rows too. The today line and the «Сегодня» flag lie over the labels; today's cell is an accent chip with the kit's chip radius (a single digit is a small rectangle, never a circle).
 - The header (two tiers) and the first column stick inside the chart's own scroller; pass `scrollHeight` (or `"fill"` in a sized parent) so the header sticks while rows scroll. Below 480 px of screen height the header scrolls with the rows.
 - Virtualization: rows render only in view (plus an overscan) at offsets computed from their lanes and corrected by measuring, so the total height and the scrollbar stay exact; header cells, period lines and bars render only inside the visible time window plus a screen on each side; weekends and day / week column lines are CSS patterns, not elements. A focused, dragged, pending or new bar stays rendered wherever the chart scrolls.
-- Editing precision: a move, a resize and a drawing snap to whole days at every zoom (at the month zoom a day is 4 px, so the snap holds a day until the pointer clearly leaves it); hold Alt to snap to the zoom's week or month. A bar is at least one day long: a resize past the opposite edge stops there and never flips. On touch a long press picks a bar up, then it drags like a pointer.
+- Editing precision: a move, a resize and a drawing snap to whole days at every zoom (at the month zoom a day is 4 px, so the snap holds a day until the pointer clearly leaves it); hold Alt to snap to the zoom's week or month. A bar is at least one day long: a resize past the opposite edge stops there and never flips. On touch a finger held on a bar picks it up, then it drags like a pointer.
 - Creating: on empty space the cursor is a crosshair and, on pointer devices, the cell under it is washed with a «+». Drag across a row to draw a range in days, double-click (or long-press on touch) for one unit of the zoom; a drag after the long press draws days. While drawing, a ghost with a dates and duration tooltip follows the pointer. Without `onBarCreate` (or with `readOnly`) nothing can be created and empty space shows no create cursor. Near the edges of the axis a drag, a resize and a drawing scroll the chart.
 - Tooltip: the bar's title, then its dates · duration · progress; `renderBarTooltip` adds lines under them (a client, planned hours) and never replaces them — the dates are what the bar means on the axis, and the same tooltip shows the new dates while dragging.
 - A legend of bar colours goes in `toolbar`: a row of `Badge.Root color` + `Badge.Dot` with the category name, one per hue the bars use; the toolbar wraps it. Say the category in the bar label or the tooltip too, never only by colour.
@@ -158,13 +160,15 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | The chart is one tab stop: the last active cell (a bar or a row header). |
 | `←` · `→` | Along the row: its header, then its bars in time order. A row off screen is rendered and scrolled into view. |
 | `↑` · `↓` | From a bar, the bar nearest in time in the row above / below (rows without bars are skipped); from a row header, the next row's header, empty rows too. |
 | `Home` · `End` | First / last bar of the row; with Ctrl, of the chart. |
-| `Enter` · `Space` | On a bar: selects it (`onSelect`). On a row header: opens the row (`onRowClick`) or follows its link (`getRowHref`). |
+| `Enter` · `Space` | On a bar: opens its record (`onItemOpen`). On a row header: opens the row (`onRowClick`) or follows its link (`getRowHref`). |
 | `Shift + ←` · `Shift + →` | Moves the bar by one day, at every zoom. |
 | `Shift + Alt + ←` · `Shift + Alt + →` | Moves the bar by the zoom's unit (a week, a month). |
 | `Ctrl + Shift + ←` · `Ctrl + Shift + →` | Shortens / lengthens the bar by one day (⌘ on macOS); it stops at one day. |
@@ -173,6 +177,8 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 | `Escape` | Cancels a drag or the drawing of a new bar; closes the tooltip. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - A `role="grid"` named by `aria-label`: a header row of `columnheader`s (the first column and the time axis named `labels.timeline`), then a row per record with a `rowheader` (the row name) and a `gridcell` holding its bars. A grid because the bars are navigated in two dimensions: moving between rows, a screen reader announces the row.
 - A bar is a `<button>` named «Задача: 6 июля 2026 — 10 июля 2026» (with «выполнено 50%» when it has progress); a milestone «Релиз: 20 июля 2026». The Tooltip with the dates opens on hover and on focus and closes as soon as the chart scrolls (scrollbar, wheel, touch); the next hover or focus opens it again. It points at the visible part of the bar and stays inside the timeline, never over the label column or the header; a bar with less than `--prime-space-6` in view shows none.
 - An editable bar has `aria-keyshortcuts` and is described by `labels.editHint`; the new dates after an editing key are announced in a polite status, a refused change with `labels.changeFailed`.
@@ -212,24 +218,24 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 | [overview.tsx](examples/overview.tsx) | A project plan: work streams with phases, progress and a launch milestone that move and stretch by pointer or keyboard — `getRowBars`, `onBarChange`. |
 | [variants.tsx](examples/variants.tsx) | Bars colored by category with palette hues, and by status with tones that win over the hue — `color`, `tone`. |
 | [sizes.tsx](examples/sizes.tsx) | Every tier: one-lane rows from 28 to 52 px, bars, header and toolbar controls of the tier — `size`. |
-| [occupancy.tsx](examples/occupancy.tsx) | Team occupancy by day: people with avatars, projects that overlap into lanes, locked vacations, a saved move held busy and a conflicting one gliding back, new work drawn on a free day — `renderRowAvatar`, `renderRow`, `onBarChange`, `onBarCreate`, `onSelect`, `readOnly`. |
+| [occupancy.tsx](examples/occupancy.tsx) | Team occupancy by day: people with avatars, projects that overlap into lanes, locked vacations, a saved move held busy and a conflicting one gliding back, new work drawn on a free day — `renderRowAvatar`, `renderRow`, `onBarChange`, `onBarCreate`, `onItemOpen`, `readOnly`. |
 | [large.tsx](examples/large.tsx) | Two thousand people over two years stay fast: only the rows and days in view are rendered, keyboard focus reaches any row, and new bars are drawn on empty space — `rows`, `range`, `scrollHeight`, `onBarCreate`. |
 | [row-link.tsx](examples/row-link.tsx) | A team by client: each row header is a link to the person's profile that a plain click opens in place, each tooltip adds the client and the planned hours under the dates, and a legend of client hues stands in the toolbar — `getRowHref`, `onRowClick`, `renderBarTooltip`. |
 | [states.tsx](examples/states.tsx) | Skeleton rows in the chart's geometry while it loads, an empty period and a report you may only look at, its today line on the report day — `loading`, `empty`, `readOnly`, `today`. |
 | [controlled.tsx](examples/controlled.tsx) | The zoom owned by the page: presets in the toolbar and the built-in switch change one state — `scale`, `onScaleChange`. |
 | [narrow.tsx](examples/narrow.tsx) | At 360 px the first column keeps only the avatars, the toolbar moves to its own row and the axis scrolls under the pinned column — `renderRowAvatar`. |
-| [screen.tsx](examples/screen.tsx) | A team schedule as a work screen: the title with the people shown and a PageToolbar with search, filters, team sections and the primary action in the app header over a full-height Gantt; moves saved or refused, new work drawn and named in a Modal, details in a Drawer — `scrollHeight`, `onBarChange`, `onBarCreate`, `onSelect`. |
+| [screen.tsx](examples/screen.tsx) | A team schedule as a work screen: the title with the people shown and a toolbar with search, filters, team sections and the primary action in its top bar over a full-height Gantt; moves saved or refused, new work drawn and named in a Modal, details in a Drawer — `scrollHeight`, `onBarChange`, `onBarCreate`, `onItemOpen`. |
 
 ## Mistakes
 - Updating the rows before the request succeeds (optimistic) → the chart cannot glide back on reject; update them when `onBarChange` resolves, or before you resolve it.
 - An inclusive `end` (`{ start: 3 July, end: 3 July }` for a one-day task) → that is a milestone; `end` is the day after the last one.
 - Status only by bar color → put it into the label too («Отпуск», «Просрочено»).
 - Dates with times expecting hour precision → the chart works in calendar days.
-- A `<div onClick>` inside `renderRow` to open a bar's or a row's record → use `onSelect` for a bar and `onRowClick` / `getRowHref` for a row: they work from the keyboard too.
+- A `<div onClick>` inside `renderRow` to open a bar's or a row's record → use `onItemOpen` for a bar and `onRowClick` / `getRowHref` for a row: they work from the keyboard too.
 - Replacing the dates in the tooltip with your own text → `renderBarTooltip` adds lines under them; the dates stay.
 - Wrapping the chart in a Card → it is a surface itself; place it directly in the page or a Card body only as the card's one content.
 - Expecting the page to scroll to today → «Сегодня» scrolls only the chart.
 
 ## Related
-- **Built from:** [ScrollContainer](../scroll-container/COMPONENT.md), [Tooltip](../tooltip/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md), [Button](../button/COMPONENT.md), [Skeleton](../skeleton/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [Spinner](../spinner/COMPONENT.md), Icon (`action.add` in the create cue)
+- **Built from:** [ScrollContainer](../scroll-container/COMPONENT.md), [Tooltip](../tooltip/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md), [Button](../button/COMPONENT.md), [Skeleton](../skeleton/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [Spinner](../spinner/COMPONENT.md), Icon (`action.add` in the create cue), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [Timeline](../timeline/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [Kanban](../kanban/COMPONENT.md), [Datepicker](../datepicker/COMPONENT.md), [Avatar](../avatar/COMPONENT.md)

package/dist/skill/reference/components/gantt/examples/examples.module.css

@@ -1,21 +1,5 @@
 /* Layout of the Gantt scenarios: semantic tokens only. */
 
-/* variants / sizes / states: a chart with its caption under it; specimens kept apart. */
-.specimens {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-6);
-  width: 100%;
-  min-width: 0;
-}
-
-.specimen {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-2);
-  min-width: 0;
-}
-
 /* occupancy: a name over a role in the first column. */
 .person {
   display: flex;

package/dist/skill/reference/components/gantt/examples/occupancy.tsx

@@ -1,4 +1,4 @@
-/** Team occupancy by day: people with avatars, projects that overlap into lanes, locked vacations, a saved move held busy and a conflicting one gliding back, new work drawn on a free day — `renderRowAvatar`, `renderRow`, `onBarChange`, `onBarCreate`, `onSelect`, `readOnly`. */
+/** Team occupancy by day: people with avatars, projects that overlap into lanes, locked vacations, a saved move held busy and a conflicting one gliding back, new work drawn on a free day — `renderRowAvatar`, `renderRow`, `onBarChange`, `onBarCreate`, `onItemOpen`, `readOnly`. */
 import { addDays, startOfToday, startOfWeek } from "date-fns";
 import { Avatar, Gantt, type GanttBar, type GanttDates, Typography } from "prime-ui-kit";
 import * as React from "react";
@@ -138,7 +138,7 @@ export default function GanttOccupancyExample() {
       )}
       onBarChange={moveBar}
       onBarCreate={addBar}
-      onSelect={(bar, person) => setSelected(`${bar.label} · ${person.name}`)}
+      onItemOpen={(bar, person) => setSelected(`${bar.label} · ${person.name}`)}
       toolbar={
         <Typography as="span" variant="body-s" tone="muted">
           {selected ?? "Выберите задачу, чтобы открыть карточку"}

package/dist/skill/reference/components/gantt/examples/screen.module.css

@@ -1,5 +1,5 @@
 /* Schedule: a work screen — the header carries the title and the tools, the page fills the app
-   panel (`AppShell.Root fillViewport` + `PageContent.Root fill`) and the chart takes the free
+   panel (`AppShell.Root fillViewport` + `Page.Root fill`) and the chart takes the free
    height. */
 
 /* On a short screen the chart keeps room for a few rows; the page scrolls instead. */

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

@@ -1,6 +1,5 @@
-/** A team schedule as a work screen: the title with the people shown and a PageToolbar with search, filters, team sections and the primary action in the app header over a full-height Gantt; moves saved or refused, new work drawn and named in a Modal, details in a Drawer — `scrollHeight`, `onBarChange`, `onBarCreate`, `onSelect`. */
+/** A team schedule as a work screen: the title with the people shown and a toolbar with search, filters, team sections and the primary action in its top bar over a full-height Gantt; moves saved or refused, new work drawn and named in a Modal, details in a Drawer — `scrollHeight`, `onBarChange`, `onBarCreate`, `onItemOpen`. */
 import {
-  AppHeader,
   Avatar,
   Badge,
   Button,
@@ -17,8 +16,7 @@ import {
   Input,
   Modal,
   matchesSmartFilter,
-  PageContent,
-  PageToolbar,
+  Page,
   ProgressBar,
   SegmentedControl,
   Select,
@@ -441,73 +439,57 @@ export default function GanttScreenExample() {
   const detail = selected?.bar;
 
   return (
-    <>
-      {/* A work screen: in an app this header fills the shell's `header` slot and carries the page —
-          the only h1 and the page's tools; main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Загрузка команды
-            <AppHeader.Description>
+    <SmartFilter.Root
+      fields={FIELDS}
+      value={filter}
+      onValueChange={setFilter}
+      search={search}
+      onSearchChange={setSearch}
+    >
+      <Page.Root fill>
+        {/* A work screen titles itself in its top bar: the only h1, the teams, the search and the
+          filters, the one primary action. */}
+        <Page.TopBar>
+          <Page.Heading>
+            <Page.Title>Загрузка команды</Page.Title>
+            <Page.Description>
               {loading ? "Загружаем график…" : `Сотрудников: ${rows.length} из ${people.length}`}
-            </AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Tools>
-          <SmartFilter.Root
-            fields={FIELDS}
-            value={filter}
-            onValueChange={setFilter}
-            search={search}
-            onSearchChange={setSearch}
-          >
-            <PageToolbar.Root aria-label="Загрузка команды">
-              <PageToolbar.Tools>
-                <SmartFilter.Toolbar />
-              </PageToolbar.Tools>
-              <PageToolbar.Sections>
-                <SegmentedControl.Root
-                  fullWidth
-                  value={team}
-                  onValueChange={setTeam}
-                  aria-label="Команда"
-                >
-                  <SegmentedControl.Item value="all">
-                    Все<SegmentedControl.Count>{people.length}</SegmentedControl.Count>
-                  </SegmentedControl.Item>
-                  {TEAMS.map((item) => (
-                    <SegmentedControl.Item key={item.value} value={item.value}>
-                      {item.label}
-                      <SegmentedControl.Count>
-                        {people.filter((person) => person.team === item.value).length}
-                      </SegmentedControl.Count>
-                    </SegmentedControl.Item>
-                  ))}
-                </SegmentedControl.Root>
-              </PageToolbar.Sections>
-              <PageToolbar.Actions>
-                <Button.Root
-                  onClick={() => {
-                    setErrors({});
-                    setDraft({ personId: null, dates: null });
-                  }}
-                >
-                  <Button.Icon>
-                    <Icon name="action.add" />
-                  </Button.Icon>
-                  Назначить
-                </Button.Root>
-              </PageToolbar.Actions>
-              <PageToolbar.Chips>
-                <SmartFilter.Chips />
-              </PageToolbar.Chips>
-            </PageToolbar.Root>
-          </SmartFilter.Root>
-        </AppHeader.Tools>
-      </AppHeader.Root>
-
-      <PageContent.Root fill>
-        <PageContent.Body>
+            </Page.Description>
+          </Page.Heading>
+          <Page.Tools aria-label="Загрузка команды">
+            <SegmentedControl.Root value={team} onValueChange={setTeam} aria-label="Команда">
+              <SegmentedControl.Item value="all">
+                Все<SegmentedControl.Count>{people.length}</SegmentedControl.Count>
+              </SegmentedControl.Item>
+              {TEAMS.map((item) => (
+                <SegmentedControl.Item key={item.value} value={item.value}>
+                  {item.label}
+                  <SegmentedControl.Count>
+                    {people.filter((person) => person.team === item.value).length}
+                  </SegmentedControl.Count>
+                </SegmentedControl.Item>
+              ))}
+            </SegmentedControl.Root>
+            <SmartFilter.Toolbar />
+          </Page.Tools>
+          <Page.Actions>
+            <Button.Root
+              onClick={() => {
+                setErrors({});
+                setDraft({ personId: null, dates: null });
+              }}
+            >
+              <Button.Icon>
+                <Icon name="action.add" />
+              </Button.Icon>
+              Назначить
+            </Button.Root>
+          </Page.Actions>
+          <Page.Chips>
+            <SmartFilter.Chips />
+          </Page.Chips>
+        </Page.TopBar>
+        <Page.Body>
           <Gantt<Person, Assignment>
             aria-label="Загрузка команды внедрения"
             className={styles.chart}
@@ -535,7 +517,7 @@ export default function GanttScreenExample() {
             )}
             onBarChange={moveBar}
             onBarCreate={startCreate}
-            onSelect={(bar, row) => {
+            onItemOpen={(bar, row) => {
               setSelected({ bar, person: findPerson(row.id) });
               setDetailOpen(true);
             }}
@@ -719,8 +701,8 @@ export default function GanttScreenExample() {
               </Drawer.Footer>
             </Drawer.Content>
           </Drawer.Root>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+        </Page.Body>
+      </Page.Root>
+    </SmartFilter.Root>
   );
 }

package/dist/skill/reference/components/gantt/examples/sizes.tsx

@@ -2,8 +2,6 @@
 import { addDays, startOfToday, startOfWeek } from "date-fns";
 import { Gantt, type GanttBar, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 type Room = { id: string; name: string; bars: GanttBar[] };
 
 const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
@@ -26,21 +24,23 @@ const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function GanttSizesExample() {
   return (
-    <div className={styles.specimens}>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.specimen}>
-          <Gantt
-            aria-label={`Бронирования, ${size}`}
-            size={size}
-            defaultScale="day"
-            rows={ROOMS}
-            getRowKey={(room) => room.id}
-            getRowLabel={(room) => room.name}
-            getRowBars={(room) => room.bars}
-          />
-          <Typography as="span" variant="caption" tone="muted">
-            {size}
-          </Typography>
+        <div key={size}>
+          <div>
+            <Gantt
+              aria-label={`Бронирования, ${size}`}
+              size={size}
+              defaultScale="day"
+              rows={ROOMS}
+              getRowKey={(room) => room.id}
+              getRowLabel={(room) => room.name}
+              getRowBars={(room) => room.bars}
+            />
+            <Typography as="span" variant="caption" tone="muted">
+              {size}
+            </Typography>
+          </div>
         </div>
       ))}
     </div>

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

@@ -2,8 +2,6 @@
 import { addDays, startOfToday, startOfWeek } from "date-fns";
 import { Gantt, type GanttBar, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 type Vehicle = { id: string; name: string; bars: GanttBar[] };
 
 const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
@@ -36,36 +34,42 @@ const chartProps = {
 
 export default function GanttStatesExample() {
   return (
-    <div className={styles.specimens}>
-      <div className={styles.specimen}>
-        <Gantt aria-label="Загрузка машин" rows={NO_VEHICLES} loading {...chartProps} />
-        <Typography as="span" variant="caption" tone="muted">
-          loading
-        </Typography>
+    <div>
+      <div>
+        <div>
+          <Gantt aria-label="Загрузка машин" rows={NO_VEHICLES} loading {...chartProps} />
+          <Typography as="span" variant="caption" tone="muted">
+            loading
+          </Typography>
+        </div>
       </div>
-      <div className={styles.specimen}>
-        <Gantt
-          aria-label="Рейсы машин"
-          rows={NO_VEHICLES}
-          empty="На этой неделе рейсов нет"
-          {...chartProps}
-        />
-        <Typography as="span" variant="caption" tone="muted">
-          empty
-        </Typography>
+      <div>
+        <div>
+          <Gantt
+            aria-label="Рейсы машин"
+            rows={NO_VEHICLES}
+            empty="На этой неделе рейсов нет"
+            {...chartProps}
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            empty
+          </Typography>
+        </div>
       </div>
-      <div className={styles.specimen}>
-        <Gantt
-          aria-label="Рейсы машин, только просмотр"
-          rows={FLEET}
-          readOnly
-          today={REPORT_DAY}
-          onBarChange={() => undefined}
-          {...chartProps}
-        />
-        <Typography as="span" variant="caption" tone="muted">
-          readOnly · today
-        </Typography>
+      <div>
+        <div>
+          <Gantt
+            aria-label="Рейсы машин, только просмотр"
+            rows={FLEET}
+            readOnly
+            today={REPORT_DAY}
+            onBarChange={() => undefined}
+            {...chartProps}
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            readOnly · today
+          </Typography>
+        </div>
       </div>
     </div>
   );

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

@@ -2,8 +2,6 @@
 import { addDays, startOfToday, startOfWeek } from "date-fns";
 import { Gantt, type GanttBar, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 type Row = { id: string; name: string; bars: GanttBar[] };
 
 const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
@@ -52,30 +50,34 @@ const BY_STATUS: Row[] = [
 
 export default function GanttVariantsExample() {
   return (
-    <div className={styles.specimens}>
-      <div className={styles.specimen}>
-        <Gantt
-          aria-label="Проекты по направлениям"
-          rows={BY_PROJECT}
-          getRowKey={(row) => row.id}
-          getRowLabel={(row) => row.name}
-          getRowBars={(row) => row.bars}
-        />
-        <Typography as="span" variant="caption" tone="muted">
-          color
-        </Typography>
+    <div>
+      <div>
+        <div>
+          <Gantt
+            aria-label="Проекты по направлениям"
+            rows={BY_PROJECT}
+            getRowKey={(row) => row.id}
+            getRowLabel={(row) => row.name}
+            getRowBars={(row) => row.bars}
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            color
+          </Typography>
+        </div>
       </div>
-      <div className={styles.specimen}>
-        <Gantt
-          aria-label="Задачи по статусу"
-          rows={BY_STATUS}
-          getRowKey={(row) => row.id}
-          getRowLabel={(row) => row.name}
-          getRowBars={(row) => row.bars}
-        />
-        <Typography as="span" variant="caption" tone="muted">
-          tone
-        </Typography>
+      <div>
+        <div>
+          <Gantt
+            aria-label="Задачи по статусу"
+            rows={BY_STATUS}
+            getRowKey={(row) => row.id}
+            getRowLabel={(row) => row.name}
+            getRowBars={(row) => row.bars}
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            tone
+          </Typography>
+        </div>
       </div>
     </div>
   );