prime-ui-kit 0.11.0 → 0.12.0

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from "./components/index";
 export * from "./hooks/useTokenValue";
 export * from "./hooks/useUploadQueue";
 export * from "./icons/index";
+export { formatFileSize } from "./internal/fileSize";
 export { hueOf } from "./internal/palette";
 export * from "./internal/states";
 export type { TransferDirection, TransferHandler, TransferState } from "./internal/transfer";

package/dist/index.js

@@ -33,6 +33,7 @@ import {
   Kanban,
   Kbd,
   LinkButton,
+  List,
   LoginForm,
   MediaViewer,
   Message,
@@ -67,6 +68,7 @@ import {
   chartColors,
   datepickerPresets,
   formatDatepickerValue,
+  formatFileSize,
   formatMessageDate,
   formatMessageTime,
   getWaveform,
@@ -81,7 +83,7 @@ import {
   useSidebar,
   useTokenValue,
   useUploadQueue
-} from "./chunks/chunk-CUH6DJ57.js";
+} from "./chunks/chunk-YJO3NJIJ.js";
 import {
   Avatar,
   Badge,
@@ -113,7 +115,7 @@ import {
   textTones,
   tones,
   variants
-} from "./chunks/chunk-WDTSHOTD.js";
+} from "./chunks/chunk-VOZ7J72X.js";
 import {
   ControlSizeProvider,
   useOptionalControlSize
@@ -164,6 +166,7 @@ export {
   Kbd,
   Label,
   LinkButton,
+  List,
   LoginForm,
   MediaViewer,
   Message,
@@ -210,6 +213,7 @@ export {
   dataStates,
   datepickerPresets,
   formatDatepickerValue,
+  formatFileSize,
   formatMessageDate,
   formatMessageTime,
   getPasswordStrength,

package/dist/internal/VisuallyHidden.d.ts

@@ -1,5 +1,10 @@
 import type * as React from "react";
 export type VisuallyHiddenProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * An announcement region: `polite` — `role="status"`, read after what is being said; `assertive`
+     * — `role="alert"`, read at once. Both are atomic: the whole text is read on every change.
+     */
+    live?: "polite" | "assertive";
     ref?: React.Ref<HTMLSpanElement>;
 };
 /** The sr-only recipe as a class, for an element that must stay itself (a focusable file input). */
@@ -9,7 +14,7 @@ export declare const visuallyHiddenClass: string;
  * Public as `VisuallyHidden` (docs in `src/components/visually-hidden/`); inside the kit it replaces
  * the per-component `.srOnly` / `.visuallyHidden` CSS copies.
  */
-export declare function VisuallyHidden({ className, ...rest }: VisuallyHiddenProps): import("react/jsx-runtime").JSX.Element;
+export declare function VisuallyHidden({ className, live, ...rest }: VisuallyHiddenProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace VisuallyHidden {
     var displayName: string;
 }

package/dist/skill/api-contract.md

@@ -235,7 +235,7 @@ it saves).
 | `Icon`, `createIcon` | kit icon set and domain glyphs — see Icons below |
 | `chartColors` | the chart palette as CSS values for a chart library: `series` 1…8 in order, `other`, `grid`, `axis`, `scale` — follows the theme |
 | `useTokenValue("--prime-space-7")` | a length token in px for geometry CSS cannot take (SVG coordinates, canvas, virtual rows); follows a theme switch |
-| `VisuallyHidden` | text for screen readers only (an icon-only part's name, a spoken count); `role="status"` on it for a polite announcement |
+| `VisuallyHidden` | text for screen readers only (an icon-only part's name, a spoken count); `live="polite"` on it for an announcement (`"assertive"` only for an error that blocks) |
 
 ## Icons
 

package/dist/skill/cheatsheet.md

@@ -163,7 +163,7 @@ Full rules: [responsive.md](responsive.md).
 - Breakpoints 640 · 768 · 1024 · 1280 only for the app frame; inside a page — intrinsic grids (`auto-fill, minmax`) and container queries.
 - A wide table scrolls inside itself; offer `DataTable.ColumnsMenu` in its `toolbar` — never drop columns by breakpoint, never hand-build the chooser.
 - A row that opens a record page is `getRowHref` (a real link: ⌘-click, new tab), a row that opens a drawer is `onRowClick` — never `navigate()` in `onRowClick`, never your own `event.target` checks for buttons in the row.
-- A list + detail screen is `PageContent.Split` in a `PageContent.Root fill` page; a full-height table is `scrollHeight="fill"` — never a height computed from `100vh`.
+- A list + detail screen is `PageContent.Split` in a `PageContent.Root fill` page, its records a `List` (`current` on the open one) — never ghost Buttons with a soft current; a full-height table is `scrollHeight="fill"` — never a height computed from `100vh`.
 - App sections on phones: `BottomNav` in `AppShell.Footer` — not in Main, not `position: fixed`, no own media query: the shell hides the footer while the Sidebar rail is on screen; a short task from the bottom edge: `Sheet` — Select, Dropdown, Popover and Modal become sheets below 640 by themselves.
 - Your hover styles inside `@media (hover: hover)`; nothing hover-only. Do not wrap kit fields to raise their text for iOS — they keep 16px on touch already.
 - A long form saves through the panel action with a count («Сохранить 3 изменения») — not a sticky bar at the bottom of a phone.

package/dist/skill/choosing.md

@@ -13,7 +13,7 @@ confuse. Links: [components.md](components.md). Whole screens: [composition.md](
 | see data: status labels, people, objects, numbers and their trend, properties of a record, rows, a board, a schedule, events, code, disclosed sections | Data display — Badge, Avatar, Thumbnail, Kbd, Card, DescriptionList, DataTable, Kanban, Gantt, Timeline, CodeBlock, Accordion, Sparkline, ChartFrame |
 | hold a conversation: read and send chat messages of every kind | Messages — Chat, Message, Gallery, VoicePlayer, VideoNote, Composer |
 | learn what happened, how far along it is, or watch a region load and change state; say it to a screen reader | Status and loading — Banner, Notification, ProgressBar, ProgressCircle, Spinner, Skeleton, Crossfade, EmptyPage, VisuallyHidden |
-| move between places: app sections, panels of a screen, the path, pages, steps | Navigation — Tabs, Breadcrumb, Pagination, Stepper, Sidebar, BottomNav |
+| move between places: app sections, panels of a screen, the records of a list, the path, pages, steps | Navigation — Tabs, Breadcrumb, Pagination, List, Stepper, Sidebar, BottomNav |
 | see something on top of the page, or a photo or video full screen | Overlays — Tooltip, Popover, Dropdown, Modal, ConfirmDialog, Drawer, Sheet, CommandMenu, MediaViewer |
 | get the app frame and the structure of a page | Page — AppShell, AppHeader, PageContent, PageToolbar, Divider, ScrollContainer |
 | drag things by hand | Interaction — Dnd (a status board: Kanban in Data display) |
@@ -125,7 +125,8 @@ filter above a single table goes into the DataTable `toolbar` instead. A page th
 height to the work (a board, a chat) may let `AppHeader` carry the page instead: `AppHeader.Title
 as="h1"` and the PageToolbar in `AppHeader.Tools` — then main has no `PageContent.Header`. A record
 opened from a table: its own page → DataTable `getRowHref`; in place → `onRowClick` + Drawer; a list
-worked through record by record (mail, chat, tickets) → `PageContent.Split`. Sections of a long rail → `Sidebar.Group
+worked through record by record (mail, chat, tickets) → `PageContent.Split` with a `List` of the records
+(`current` on the open one). Sections of a long rail → `Sidebar.Group
 collapsible`; a section with sub-pages → `Sidebar.Sub`; the signed-in user → `Sidebar.Account` in a
 `Dropdown.Trigger` at the bottom of `Sidebar.Footer`.
 
@@ -133,6 +134,7 @@ collapsible`; a section with sub-pages → `Sidebar.Sub`; the signed-in user →
 
 | Pair | Rule |
 |---|---|
+| List / Sidebar / Tabs / Card list / DataTable | List: the records of a list + detail screen (dialogs, tickets, mail), one open at a time (`current`), each row a button or a link with a text line, a preview, meta and a count. Sidebar: the sections of the **app**. Tabs: panels of **one screen**. `Card.List` (`variant="list"`): static facts in a card, nothing opens. DataTable: many records compared by columns, sorted, filtered, selected in bulk. |
 | Tabs / SegmentedControl | Tabs switch **panels of content** (navigation inside a screen). SegmentedControl switches a **value or mode** of the same content (period, view mode, filter). |
 | Modal / Drawer / Sheet / Popover / Tooltip | Modal: blocking decision or a short form (≤ 4 fields) that needs full attention. Drawer: long form, filters, record details beside the page, while keeping page context. Sheet: a short task that ends by itself — a pick, an action, a short note — raised from the bottom edge. Popover: small non-modal panel anchored to a control (quick edit, explanation with a link). Tooltip: a few words naming or explaining a control, no interactive content. |
 | Select / NativeSelect | Select: the kit's floating list — icons, descriptions, groups, search, `multiple`, `clearable`. NativeSelect: a plain text list where the OS picker is better (phones) or the value must post with a form by `name`. |

package/dist/skill/components.md

@@ -103,13 +103,14 @@ Say what happens: system messages, progress, loading placeholders, state swaps,
 
 ## Navigation (`navigation`)
 
-Move between places: app navigation (side rail, bottom bar on phones), tabs, the path, pages, steps.
+Move between places: app navigation (side rail, bottom bar on phones), tabs, the records of a list, the path, pages, steps.
 
 | Component | Purpose | Docs |
 |---|---|---|
 | Tabs | Tabs for navigating between content panels of one screen. | [COMPONENT.md](reference/components/tabs/COMPONENT.md) · [examples](reference/components/tabs/examples/) |
 | Breadcrumb | Breadcrumbs: the path to the current page. | [COMPONENT.md](reference/components/breadcrumb/COMPONENT.md) · [examples](reference/components/breadcrumb/examples/) |
 | Pagination | Page-by-page navigation: arrows, page numbers with ellipsis and a compact «3 / 12» view. | [COMPONENT.md](reference/components/pagination/COMPONENT.md) · [examples](reference/components/pagination/examples/) |
+| List | A selectable list of rows — the list half of a list + detail screen: conversations, tickets, mail, records; the open one is `current`. | [COMPONENT.md](reference/components/list/COMPONENT.md) · [examples](reference/components/list/examples/) |
 | Stepper | Steps of a multi-step process with pending, active, completed and danger statuses. | [COMPONENT.md](reference/components/stepper/COMPONENT.md) · [examples](reference/components/stepper/examples/) |
 | Sidebar | App side navigation in three modes — expanded, compact, hidden — and an off-canvas panel on narrow screens. | [COMPONENT.md](reference/layout/sidebar/COMPONENT.md) · [examples](reference/layout/sidebar/examples/) |
 | BottomNav | Phone navigation: 2–6 sections at the bottom, flat or a floating glass capsule, icons with or without labels, an optional round action. | [COMPONENT.md](reference/layout/bottom-nav/COMPONENT.md) · [examples](reference/layout/bottom-nav/examples/) |

package/dist/skill/composition.md

@@ -18,6 +18,10 @@ is, and is shown live with its code in the playground (category «Компози
 | Dashboard | [dashboard.tsx](patterns/dashboard.tsx) | period switch, KPI row that cross-fades to the new period, a Sparkline revenue trend, invoiced vs paid in a ChartFrame, panels with progress and a split, short table + link to the list |
 | Screen states | [screen-states.tsx](patterns/screen-states.tsx) | page error in a Banner with retry, region loading with a Skeleton, Crossfade between states, table error in place, first-run EmptyPage |
 | Messenger | [chat.tsx](patterns/chat.tsx) | PageContent.Split of dialogs and a `Chat`: `Chat.Header` with the back button, avatar, title, the status that turns into «печатает…» (`typing`) and the search button, `Chat.Search`, `Chat.Pinned`, `Chat.Messages` from `items` + a stable `renderMessage` (dates, runs, the unread band and service events from the data, history loaded above with `hasOlder` / `onLoadOlder`), every kind of Message (photos, file, contact, voice in a VoicePlayer with a transcript, round video), reactions, reply and edit from the menu through `Composer.Context value` (`replyTo` / `editOf`), the jump to the quoted message (`Message.Reply target`), optimistic sends whose messages rise from the composer while the client's answer slides in, «печатает…» both ways (`onActivityChange` → `Chat.Root typing`), unread counts from `onNewMessage` and `onRead`, selection with `Chat.SelectionBar`, delivery ticks, the Composer in `Chat.Footer` |
+| Sales pipeline board | [kanban-board.tsx](patterns/kanban-board.tsx) | header with one primary action, PageToolbar with SmartFilter search and a board / list SegmentedControl, Crossfade between a Kanban and a DataTable of the same deals, column totals in `renderColumnMeta`, moves saved through an `onValueChange` promise that the server can refuse, movable stages with locked first and last, the deal in a Drawer with a DescriptionList and stage actions, skeleton first load |
+| App frame for desktop and phone (root layout) | [app-shell.tsx](patterns/app-shell.tsx) | Sidebar rail on a wide screen, floating BottomNav in `AppShell.Footer` on a phone («Ещё» opens the Sidebar panel), AppHeader with the menu button, title and search to CommandMenu, counts on items, a home page that cross-fades between sections |
+| Media library | [media-library.tsx](patterns/media-library.tsx) | PageToolbar with sections and counts, search (`SmartFilter` with `fields={[]}`), order and «Загрузить»; uploads through `useUploadQueue` in `FileUpload` tiles (`trigger="tile"`, `layout="grid"`) with progress, a failure and retry, a done file moving into the library; a grid of `Thumbnail` / `Thumbnail.Video` tiles that open `MediaViewer` out of the tile (`getOrigin`, `thumbnails`, `renderActions`) or, in selection mode, are picked (`checked`) for bulk download and a `ConfirmDialog` delete; a Skeleton first load and a filtered `EmptyPage` in a `Crossfade` |
+| Resource schedule | [schedule.tsx](patterns/schedule.tsx) | full-height `Gantt` (`scrollHeight="fill"`) under a `PageToolbar` with search, role / client filters and team sections; people with avatars, client hues, lanes for overlaps, locked absences and milestones; moves saved through an async `onBarChange` or refused and glided back, new work drawn with `onBarCreate` and named in a Modal (cancel fades the ghost), `onSelect` details in a Drawer with a `DescriptionList` and a confirmed removal, `loading` and filtered `empty` |
 
 Pick the closest one, rename the domain, keep the skeleton. Change structure only when the task needs
 it, and then by the rules below.
@@ -176,6 +180,10 @@ Hierarchy comes from space and a handful of type roles, not from size jumps, col
 
 - A list page is `DataTable` with the filters in its `toolbar` — `SmartFilter.Toolbar` and
   `SmartFilter.Chips` inside `SmartFilter.Root` (or one SegmentedControl / Select for a single field).
+- Where the filters go: tools of one table live in its `toolbar`; when the page itself carries
+  sections with counts, a view switch (board / list, grid / list) or filters that drive more than one
+  table — a board, a schedule, a media grid — the page gets `PageToolbar` and the table keeps only its
+  own tools (`DataTable.ColumnsMenu`).
 - Paging is built in: `paging="pages"` (default, Pagination and the «Показано 1–6 из 10» range in the
   footer), `paging="infinite"` for feeds, `paging="none"` for short lists on dashboards and details.
 - When the server holds more than you load (a CRM list, a register): `source="server"` — `rows` is the

package/dist/skill/layouts.md

@@ -191,7 +191,8 @@ from what people do, not from how the backend is split. The full guide with the
   `PageContent.Detail` in a filling page. Side by side from 48rem of the split's own width, one pane
   at a time below it with `PageContent.BackButton` first in the detail's header; `open` is «a record
   is chosen». Each pane gives its last child the free height: a Card with its own `ScrollContainer`
-  (`anchor="end"` for a thread). Details that open over a table and close again are a Drawer instead.
+  (`anchor="end"` for a thread). The records in the list pane are a `List` (`current` on the open
+  one). Details that open over a table and close again are a Drawer instead.
 
 ## Which pattern to start from
 

package/dist/skill/patterns/app-shell.module.css

@@ -0,0 +1,18 @@
+/* App shell: the frame (Sidebar / BottomNav / AppHeader) lays itself out; this file only places the
+   home page's blocks. Blocks 40 apart come from PageContent.Body. */
+
+/* KPI row: as many ~14rem tiles as fit, one column on a phone. */
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-14) * 4)), 1fr));
+  gap: var(--prime-space-4);
+}
+
+/* A list row: the text at the start, the meta (time, sum) at the end. */
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prime-space-4);
+  min-width: 0;
+}

package/dist/skill/patterns/app-shell.tsx

@@ -0,0 +1,301 @@
+/** The app frame for desktop and phone: the Sidebar rail on a wide screen, the floating BottomNav in the footer on a phone, the AppHeader with the menu button, the title and search that opens the CommandMenu, and a simple home page that swaps with the current section. */
+import {
+  AppHeader,
+  AppShell,
+  BottomNav,
+  Card,
+  Checkbox,
+  CommandMenu,
+  Crossfade,
+  Icon,
+  type IconName,
+  PageContent,
+  Sidebar,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./app-shell.module.css";
+
+type SectionId = "today" | "deals" | "clients" | "tasks" | "reports" | "settings";
+type Section = { id: SectionId; label: string; icon: IconName };
+type Row = { id: string; title: string; meta: string };
+
+/** The main sections: the Sidebar's first group on a wide screen, the bar on a phone. */
+const MAIN: Section[] = [
+  { id: "today", label: "Сегодня", icon: "nav.home" },
+  { id: "deals", label: "Сделки", icon: "object.funnel" },
+  { id: "clients", label: "Клиенты", icon: "object.users" },
+  { id: "tasks", label: "Задачи", icon: "object.tasks" },
+];
+
+/** The rest of the map: in the Sidebar footer; on a phone «Ещё» opens the Sidebar panel. */
+const MORE: Section[] = [
+  { id: "reports", label: "Отчёты", icon: "object.chart" },
+  { id: "settings", label: "Настройки", icon: "action.settings" },
+];
+
+const SECTIONS = [...MAIN, ...MORE];
+
+/** Open deals: an informational count, plain in the Sidebar. */
+const OPEN_DEALS = 12;
+
+const KPIS = [
+  { label: "Сделки в работе", value: "37", delta: "+4 за неделю", tone: "success" },
+  { label: "Выручка за октябрь", value: "4,8 млн ₽", delta: "+12% к сентябрю", tone: "success" },
+  { label: "Ждут ответа", value: "5 клиентов", delta: "2 дольше суток", tone: "danger" },
+] as const;
+
+const TASKS: Row[] = [
+  { id: "t1", title: "Позвонить в ООО «Север» по договору поставки", meta: "10:30" },
+  { id: "t2", title: "Отправить КП для АО «Меридиан»", meta: "12:00" },
+  { id: "t3", title: "Согласовать скидку для ИП Котова", meta: "15:00" },
+  { id: "t4", title: "Подготовить отчёт по воронке за неделю", meta: "17:30" },
+];
+
+/** What every section other than «Сегодня» lists. */
+const PAGES: Record<Exclude<SectionId, "today">, { description: string; rows: Row[] }> = {
+  deals: {
+    description: "12 сделок в работе на 9,6 млн ₽.",
+    rows: [
+      { id: "d1", title: "ООО «Север» · поставка оборудования", meta: "2 400 000 ₽" },
+      { id: "d2", title: "АО «Меридиан» · годовой сервис", meta: "1 180 000 ₽" },
+      { id: "d3", title: "ООО «Вектор» · внедрение CRM", meta: "860 000 ₽" },
+    ],
+  },
+  clients: {
+    description: "248 клиентов, 5 ждут ответа.",
+    rows: [
+      { id: "c1", title: "ООО «Север»", meta: "4 сделки" },
+      { id: "c2", title: "АО «Меридиан»", meta: "2 сделки" },
+      { id: "c3", title: "ИП Котов", meta: "1 сделка" },
+    ],
+  },
+  tasks: {
+    description: "Все задачи команды по срокам.",
+    rows: TASKS.map((task) => ({ ...task, meta: `сегодня, ${task.meta}` })),
+  },
+  reports: {
+    description: "Сводки по продажам и работе менеджеров.",
+    rows: [
+      { id: "r1", title: "Воронка продаж", meta: "обновлён сегодня" },
+      { id: "r2", title: "План и факт по менеджерам", meta: "октябрь" },
+    ],
+  },
+  settings: {
+    description: "Компания, команда и интеграции.",
+    rows: [
+      { id: "s1", title: "Команда и роли", meta: "8 человек" },
+      { id: "s2", title: "Почта и телефония", meta: "подключены" },
+    ],
+  },
+};
+
+const isMore = (id: SectionId) => MORE.some((section) => section.id === id);
+
+export default function AppShellPattern() {
+  const [current, setCurrent] = React.useState<SectionId>("today");
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [done, setDone] = React.useState<ReadonlySet<string>>(() => new Set(["t1"]));
+
+  const openTasks = TASKS.length - done.size;
+  const section = SECTIONS.find((item) => item.id === current) ?? SECTIONS[0];
+
+  // One handler for every way into a section: the Sidebar, the bar and the search.
+  const go = (id: SectionId) => {
+    setCurrent(id);
+    setMenuOpen(false);
+    setSearchOpen(false);
+  };
+
+  const toggleTask = (id: string, checked: boolean) =>
+    setDone((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+
+  // ⌘K opens the same search as the header field.
+  React.useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        setSearchOpen((open) => !open);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+
+  const countOf = (id: SectionId) => {
+    if (id === "deals") return <Sidebar.ItemCount>{OPEN_DEALS}</Sidebar.ItemCount>;
+    if (id === "tasks" && openTasks > 0) {
+      return <Sidebar.ItemCount color="red">{openTasks}</Sidebar.ItemCount>;
+    }
+    return null;
+  };
+
+  const sidebarItem = (item: Section) => (
+    <Sidebar.Item key={item.id} current={item.id === current} onClick={() => go(item.id)}>
+      <Sidebar.ItemIcon>
+        <Icon name={item.icon} />
+      </Sidebar.ItemIcon>
+      {item.label}
+      {countOf(item.id)}
+    </Sidebar.Item>
+  );
+
+  return (
+    <>
+      <AppShell.Template
+        fillViewport
+        scrollResetKey={current}
+        nav={
+          <Sidebar.Root open={menuOpen} onOpenChange={setMenuOpen}>
+            <Sidebar.Header>
+              <Sidebar.Brand description="Отдел продаж">
+                <Sidebar.BrandLogo>
+                  <Icon name="object.funnel" />
+                </Sidebar.BrandLogo>
+                Acme CRM
+              </Sidebar.Brand>
+              <Sidebar.Toggle variant="header" />
+            </Sidebar.Header>
+            <Sidebar.Content>
+              <Sidebar.Group>{MAIN.map(sidebarItem)}</Sidebar.Group>
+            </Sidebar.Content>
+            <Sidebar.Footer>{MORE.map(sidebarItem)}</Sidebar.Footer>
+          </Sidebar.Root>
+        }
+        header={
+          <AppHeader.Root>
+            <AppHeader.Start>
+              <AppHeader.MenuButton aria-expanded={menuOpen} onClick={() => setMenuOpen(true)} />
+              <AppHeader.Title>{section.label}</AppHeader.Title>
+            </AppHeader.Start>
+            <AppHeader.Search onClick={() => setSearchOpen(true)}>
+              Поиск сделок и клиентов
+            </AppHeader.Search>
+          </AppHeader.Root>
+        }
+        footer={
+          <BottomNav.Root floating>
+            {MAIN.map((item) => (
+              <BottomNav.Item
+                key={item.id}
+                current={item.id === current}
+                onClick={() => go(item.id)}
+              >
+                <BottomNav.ItemIcon>
+                  <Icon name={item.icon} />
+                </BottomNav.ItemIcon>
+                {item.id === "tasks" && openTasks > 0 ? (
+                  <BottomNav.ItemCount>{openTasks}</BottomNav.ItemCount>
+                ) : null}
+                {item.label}
+              </BottomNav.Item>
+            ))}
+            {/* The rest of the map lives in the Sidebar: «Ещё» opens it as a panel. */}
+            <BottomNav.Item
+              current={isMore(current)}
+              aria-expanded={menuOpen}
+              onClick={() => setMenuOpen(true)}
+            >
+              <BottomNav.ItemIcon>
+                <Icon name="action.more" />
+              </BottomNav.ItemIcon>
+              Ещё
+            </BottomNav.Item>
+          </BottomNav.Root>
+        }
+      >
+        {/* Another section is another page: it cross-fades instead of flipping. */}
+        <Crossfade state={current}>
+          <PageContent.Section aria-labelledby="page-title">
+            <PageContent.Header>
+              <PageContent.Title id="page-title">{section.label}</PageContent.Title>
+              <PageContent.Description>
+                {current === "today"
+                  ? `Среда, 14 октября · открытых задач: ${openTasks}`
+                  : PAGES[current].description}
+              </PageContent.Description>
+            </PageContent.Header>
+            <PageContent.Body>
+              {current === "today" ? (
+                <>
+                  <div className={styles.kpis}>
+                    {KPIS.map((kpi) => (
+                      <Card.Root key={kpi.label} 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>
+                    ))}
+                  </div>
+                  <Card.Root variant="list">
+                    <Card.Header>
+                      <Card.Title as="h2">Задачи на сегодня</Card.Title>
+                    </Card.Header>
+                    <Card.List>
+                      {TASKS.map((task) => (
+                        <Card.ListItem key={task.id}>
+                          <span className={styles.row}>
+                            <Checkbox.Root
+                              checked={done.has(task.id)}
+                              onCheckedChange={(checked) => toggleTask(task.id, checked)}
+                            >
+                              <Checkbox.Label>{task.title}</Checkbox.Label>
+                            </Checkbox.Root>
+                            <Typography as="span" variant="caption" tone="muted">
+                              {task.meta}
+                            </Typography>
+                          </span>
+                        </Card.ListItem>
+                      ))}
+                    </Card.List>
+                  </Card.Root>
+                </>
+              ) : (
+                <Card.Root variant="list">
+                  <Card.List>
+                    {PAGES[current].rows.map((row) => (
+                      <Card.ListItem key={row.id}>
+                        <span className={styles.row}>
+                          <Typography as="span" variant="body-m" truncate>
+                            {row.title}
+                          </Typography>
+                          <Typography as="span" variant="caption" tone="muted">
+                            {row.meta}
+                          </Typography>
+                        </span>
+                      </Card.ListItem>
+                    ))}
+                  </Card.List>
+                </Card.Root>
+              )}
+            </PageContent.Body>
+          </PageContent.Section>
+        </Crossfade>
+      </AppShell.Template>
+
+      <CommandMenu.Root open={searchOpen} onOpenChange={setSearchOpen} aria-label="Поиск">
+        <CommandMenu.Input placeholder="Раздел, сделка или клиент" />
+        <CommandMenu.List>
+          <CommandMenu.Empty />
+          <CommandMenu.Group label="Разделы">
+            {SECTIONS.map((item) => (
+              <CommandMenu.Item key={item.id} value={item.label} onSelect={() => go(item.id)}>
+                <CommandMenu.ItemIcon>
+                  <Icon name={item.icon} />
+                </CommandMenu.ItemIcon>
+                {item.label}
+              </CommandMenu.Item>
+            ))}
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Root>
+    </>
+  );
+}

package/dist/skill/patterns/chat.module.css

@@ -13,21 +13,5 @@
 }
 
 .dialogs {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-1);
-  margin: 0;
   padding: var(--prime-space-2);
-  list-style: none;
-}
-
-/* A dialog row: avatar and name at the start, the unread count at the end. */
-.dialog {
-  justify-content: flex-start;
-}
-
-.dialogText {
-  display: grid;
-  flex: 1;
-  min-width: 0;
 }

package/dist/skill/patterns/chat.tsx

@@ -1,7 +1,6 @@
 /** A support messenger on `Chat`: dialogs beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, dates and runs from data, every kind of message, search, pinned messages, replies and edits from the menu with a jump to the quoted message, read receipts and unread counts from what was seen, the typing signal both ways, and the Composer whose messages rise into the list while the client answers. */
 import {
   Avatar,
-  Badge,
   Button,
   Card,
   Chat,
@@ -13,6 +12,7 @@ import {
   Dropdown,
   type GalleryItem,
   Icon,
+  List,
   Message,
   type MessageReaction,
   type MessageStatus,
@@ -729,28 +729,25 @@ export default function ChatPattern() {
           <PageContent.List aria-label="Диалоги">
             <Card.Root className={styles.paneCard}>
               <ScrollContainer className={styles.pane}>
-                <ul className={styles.dialogs}>
+                <List.Root className={styles.dialogs}>
                   {DIALOGS.map((item) => (
-                    <li key={item.id}>
-                      <Button.Root
-                        variant={item.id === dialogId ? "soft" : "ghost"}
-                        tone="neutral"
-                        fullWidth
-                        aria-current={item.id === dialogId ? "true" : undefined}
-                        className={styles.dialog}
-                        onClick={() => setDialogId(item.id)}
-                      >
-                        <Avatar.Root size="s" color="blue">
+                    <List.Item
+                      key={item.id}
+                      current={item.id === dialogId}
+                      onClick={() => setDialogId(item.id)}
+                    >
+                      <List.ItemIcon>
+                        <Avatar.Root color="blue">
                           <Avatar.Fallback>{item.initials}</Avatar.Fallback>
                         </Avatar.Root>
-                        <span className={styles.dialogText}>{item.name}</span>
-                        {(unread[item.id] ?? 0) > 0 ? (
-                          <Badge.Root color="blue">{unread[item.id]}</Badge.Root>
-                        ) : null}
-                      </Button.Root>
-                    </li>
+                      </List.ItemIcon>
+                      <List.ItemText>{item.name}</List.ItemText>
+                      {(unread[item.id] ?? 0) > 0 ? (
+                        <List.ItemCount color="blue">{unread[item.id]}</List.ItemCount>
+                      ) : null}
+                    </List.Item>
                   ))}
-                </ul>
+                </List.Root>
               </ScrollContainer>
             </Card.Root>
           </PageContent.List>

package/dist/skill/patterns/kanban-board.module.css

@@ -0,0 +1,28 @@
+/* Kanban board: the toolbar sits right above the view it filters; the page rhythm comes from
+   PageContent. */
+
+.workspace {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-4);
+  min-width: 0;
+}
+
+/* The board takes most of the screen; every column scrolls inside it, never the page. */
+.board {
+  block-size: min(calc(var(--prime-space-24) * 7), 75dvh);
+}
+
+/* Company cell: the name over the deal id. */
+.company {
+  display: grid;
+  white-space: nowrap;
+}
+
+/* Owner: avatar, then the name. */
+.owner {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prime-space-2);
+  white-space: nowrap;
+}