prime-ui-kit 0.13.1 → 0.14.0

package/dist/skill/composition.md

@@ -15,10 +15,11 @@ is, and is shown live with its code in the playground (category «Компози
 | One record | [detail-page.tsx](patterns/detail-page.tsx) | Breadcrumb + status in the header, actions by weight, main column + side column of Cards, Timeline |
 | Settings | [settings-page.tsx](patterns/settings-page.tsx) | heading column + panel per section, form with its own save, Switches that apply at once, danger zone with a confirm |
 | Create in a side panel | [form-drawer.tsx](patterns/form-drawer.tsx) | Drawer form: groups, errors on submit, focus on the first invalid field, loading, toast |
+| Record editor | [record-editor.tsx](patterns/record-editor.tsx) | a plan card edited on a page: name and description, specs in a `FieldList` (icon-only `Select` and `ColorPresets` in compact columns, pinned rows, reorder), selling points as one reorderable column, the price and its changes by month in one list with the base row pinned, a setup fee in three currencies in one row under one heading, save with «Сохранено» on the button |
 | 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 a `ChatList` (live last message, ticks, unread counts, «печатает…») 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 |
+| 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 `plain` Kanban (stages without wells, deal cards on the page) 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` |
@@ -33,21 +34,24 @@ AppShell.Root                      once per app (layouts.md#app-frame-once-per-a
 ├─ AppShell.Nav → Sidebar          navigation rail, one layer above the page
 ├─ AppHeader.Root                  menu button / title or path / ⌘K search / app actions
 └─ AppShell.Main                   gutters; the page renders here
-   └─ PageContent.Section | Root   the page you deliver
-      ├─ PageContent.Header
+   └─ PageContent.Page | Root      the page you deliver
+      ├─ PageContent.Header        24 above the body
       │  ├─ Breadcrumb             only below a top-level section; first child → 8 above the title
       │  ├─ PageContent.Title      the one h1
       │  ├─ PageContent.Description one sentence of context (or a status Badge + the key fact)
       │  └─ PageContent.Actions    page buttons; wrap under the title on narrow screens
-      └─ PageContent.Body          blocks 40 apart: Banner, KPI grid, table, sections, Cards
+      └─ PageContent.Body          blocks 24 apart: Banner, the tile grid, a table, Cards
+         ├─ PageContent.Grid       every tile of the screen, 16 on both axes
+         │  └─ PageContent.Cell    span (of 12), rows; the tile fills it
+         └─ PageContent.Section    a new topic: h2 label (+ Actions), 40 from its neighbours
 ```
 
 - A screen component renders only its page. Styles, `applyTheme`, `NotificationProvider` and
   `AppShell` live at the app root.
-- `PageContent.Section` for app pages (full panel width); `PageContent.Root maxWidth="wide"` for
+- `PageContent.Page` for app pages (full panel width); `PageContent.Root maxWidth="wide"` for
   settings, `maxWidth="readable"` for one narrow column of text or fields.
-- No outer padding, no margins: `AppShell.Main` has the gutters, `PageContent` has header → body 32 and
-  block → block 40. Your CSS lays out only the inside of a block.
+- No outer padding, no margins: `AppShell.Main` has the gutters, `PageContent` has header → body 24,
+  block → block 24, section → section 40 and tile → tile 16. Your CSS lays out only the inside of a block.
 
 ```tsx
 import { Button, Dropdown, Icon, PageContent } from "prime-ui-kit";
@@ -90,16 +94,19 @@ Every gap is a `--prime-space-N` token (N × 4px) set as `gap` on the parent. Cl
 | label → field, field → hint | 4–8 | built into fields — never add |
 | buttons, chips, filters in a row | 8 | `--prime-space-2` |
 | text lines of one item (name over meta) | 0–4 | `--prime-space-1` |
-| heading → its content (group, section without a card) | 16 | `--prime-space-4` |
-| tile → tile in a grid (KPI, panels) | 16 | `--prime-space-4` |
+| heading → its content (group, section) | 16 | `--prime-space-4` (`PageContent.Section` does it) |
+| tile → tile, both axes (KPI, charts, panels) | 16 | `PageContent.Grid` |
 | field → field, switch → switch | 20 | `--prime-space-5` |
 | main column → side column | 24 | `--prime-space-6` |
+| page header → body | 24 | `PageContent` |
+| block → block on a page | 24 | `PageContent.Body` |
 | group → group in a form | 32 | `--prime-space-8` |
-| page header → body | 32 | `PageContent` |
-| block → block on a page | 40 | `PageContent.Body` |
+| section → section (a new topic with an `h2`) | 40 | `PageContent.Section` |
 
 A screen with one gap everywhere reads as a list of unrelated things. Use at least three levels: inside
-an item, between items, between blocks.
+an item, between items, between blocks. The tiles of one screen are one board: put them all in one
+`PageContent.Grid` (one gap on both axes), never a grid per row — and keep the large air for a new topic
+with its own heading (`PageContent.Section`).
 
 ## 3. Hierarchy — air first, then type
 
@@ -108,7 +115,7 @@ Hierarchy comes from space and a handful of type roles, not from size jumps, col
 | Text | Use |
 |---|---|
 | page title | `PageContent.Title` (`heading-m`, the only `h1`) |
-| section heading without a card | `Typography as="h2" variant="title-m"` |
+| section heading without a card | `PageContent.Section label` (an `h2` in `title-m`) |
 | card / panel title | `Card.Title as="h2"` (under the page title) |
 | heading of a group of fields | `Fieldset label` (`title-s` in the `<legend>`) |
 | other group heading inside a card | `Typography as="h3" variant="title-s"` |
@@ -162,6 +169,12 @@ Hierarchy comes from space and a handful of type roles, not from size jumps, col
 
 - Labels above every field (`label`), placeholder is an example value, help in `hint`, problems in
   `error` — after blur or on submit. Mark the minority (`required` or `optional`).
+- Records of one shape that a person adds, edits and removes are a `FieldList`: one row per record,
+  the column headings once above the rows, small attributes (an icon, a color) in `compact`
+  columns. Never a label in every row, never numbered labels, never one record split over lines.
+- One value in several units is one row of fields under one heading, each unit in its field's
+  `Input.InlineAffix`; a base value with overrides is one `FieldList` with the base pinned first.
+  The shape of the data decides the layout: [ux.md](ux.md#2-the-shape-of-the-data-decides-the-layout).
 - Fields 20 apart; related short fields side by side in an `auto-fit` grid with `align-items: start`
   (`reserveSupportRow` on Input / Textarea keeps neighbours aligned); groups 32 apart, each a
   `Fieldset label` (its `title-s` heading 16 above the fields, no frame); no dividers between groups.
@@ -315,6 +328,6 @@ export function RevenuePanel() {
 }
 ```
 
-For a plain KPI row use `Card.Root variant="stat-trend"` (Label · Value · Delta) in an `auto-fit` grid —
-see [patterns/dashboard.tsx](patterns/dashboard.tsx). When the trend over days matters, put a
+For a plain KPI row use `Card.Root variant="stat-trend"` (Label · Value · Delta), each in a
+`PageContent.Cell span={3}` of the page's `PageContent.Grid` — see [patterns/dashboard.tsx](patterns/dashboard.tsx). When the trend over days matters, put a
 `Sparkline` in the `Card.Body` instead: it brings the value, the change and a line to scrub.

package/dist/skill/foundations.md

@@ -35,11 +35,13 @@ Things that belong together sit closer than things that do not.
 | inline controls in a row (buttons, filters) | 8 | `--prime-space-2` |
 | switch → switch in a settings list | 20 | `--prime-space-5` |
 | group → group (fieldset, form section) | 32 | `--prime-space-8` |
-| card → card in a grid | 16 | `--prime-space-4` |
-| section → section on a page | 40 | `--prime-space-10` — `PageContent.Body` already does it |
+| tile → tile, both axes (KPI cards, charts, panels) | 16 | `--prime-space-4` — `PageContent.Grid` already does it |
+| block → block on a page (page header → body too) | 24 | `--prime-space-6` — `PageContent` already does it |
+| section → section on a page (a new topic with an `h2`) | 40 | `PageContent.Section` already does it |
 
-`PageContent.Body` already spaces its direct blocks (cards, tables, sections) 40 apart and `AppShell.Main`
-already carries the page gutters — do not add your own outer padding.
+`PageContent.Body` already spaces its direct blocks 24 apart, a `PageContent.Section` 40 from its
+neighbours, `PageContent.Grid` its tiles 16 on both axes, and `AppShell.Main` already carries the page
+gutters — do not add your own outer padding.
 
 ## 3. Size axis
 
@@ -132,7 +134,7 @@ A chart color does one job, and the job picks the colors:
 | `body-m` | 14/20 | default text |
 | `body-l` | 16/24 | reading text |
 | `title-s` | 14/20 600 | card title, group heading inside a card or form |
-| `title-m` | 16/24 600 | page section heading without a card, modal title |
+| `title-m` | 16/24 600 | page section heading (`PageContent.Section` draws it), modal title |
 | `title-l` | 18/24 600 | large block title |
 | `heading-s` | 20/28 600 | page sub-heading |
 | `heading-m` | 24/32 600 | page title (`PageContent.Title`) |
@@ -163,7 +165,7 @@ level of air: a page with uniform 16px gaps everywhere reads as a list of unrela
 - Flex children with text: `min-width: 0` + ellipsis or `overflow-wrap: anywhere`.
 - Wide tables on phones: they scroll inside themselves with edge shadows; `stickyFirstColumn`, a column
   chooser through `hiddenColumns`; never let the page scroll sideways.
-- Card grids: `grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--prime-space-16) * 4)), 1fr))`.
+- Card grids on a page: `PageContent.Grid` + `PageContent.Cell span` (folds by its own width); inside one block: `repeat(auto-fill, minmax(min(100%, …), 1fr))`.
 - A page panel with sections, filter and search, view and the primary action is `PageToolbar`.
 - Sticky parts come from the kit: `AppHeader` (with the `PageToolbar` in `AppHeader.Tools`), the
   DataTable head and `stickyFirstColumn`, the Gantt header and first column — each sticks inside its

package/dist/skill/layouts.md

@@ -2,9 +2,9 @@
 
 Every screen sits in one frame: `AppShell.Root` with Nav / `AppHeader` / Main (the content panel is the page,
 the nav rail one layer above it) → `PageContent` (header + body). `AppShell.Main` carries the page gutters
-and `PageContent.Body` spaces its blocks 40 apart, so your code adds **no outer padding and no
-margins**. Your CSS only lays out the inside of a block (grids, rows) with `gap` on `--prime-space-*`.
-Main's top space under the header is part of the frame — 24, then 40 from 1024px: a page header starts
+and `PageContent` spaces the page — blocks 24, a titled `PageContent.Section` 40, tiles in a
+`PageContent.Grid` 16 on both axes — so your code adds **no outer padding and no margins**. Your CSS only lays out the inside of a block (grids, rows) with `gap` on `--prime-space-*`.
+Main's top space under the header is part of the frame — 24, then 32 from 1024px: a page header starts
 there; never cancel it with a negative margin or a padding override.
 
 The page recipes are whole, working screens in [patterns/](patterns/) — start from the closest one
@@ -181,9 +181,9 @@ from what people do, not from how the backend is split. The full guide with the
 
 ## Page wrapper
 
-- App pages with actions (dashboard, list, detail): `PageContent.Section` — the full width of the panel.
-- Settings and long forms: `PageContent.Root maxWidth="wide"` with a heading column + panel per section
-  ([patterns/settings-page.tsx](patterns/settings-page.tsx)), or `maxWidth="readable"` for a single
+- App pages with actions (dashboard, list, detail): `PageContent.Page` — the full width of the panel.
+- Settings and long forms: `PageContent.Root maxWidth="wide"` with a `PageContent.Section layout="aside"`
+  (heading column + panel) per section ([patterns/settings-page.tsx](patterns/settings-page.tsx)), or `maxWidth="readable"` for a single
   narrow column of fields.
 - Long reading text (terms, help): `PageContent.Root maxWidth="readable"`.
 - A page as high as the panel (a log, a board, a chat): `AppShell.Root fillViewport` +

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

@@ -1,12 +1,5 @@
 /* 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);
-}
+   home page's blocks. The rhythm comes from PageContent.Body, the tiles from PageContent.Grid. */
 
 /* A list row: the text at the start, the meta (time, sum) at the end. */
 .row {

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

@@ -213,7 +213,7 @@ export default function AppShellPattern() {
       >
         {/* Another section is another page: it cross-fades instead of flipping. */}
         <Crossfade state={current}>
-          <PageContent.Section aria-labelledby="page-title">
+          <PageContent.Page aria-labelledby="page-title">
             <PageContent.Header>
               <PageContent.Title id="page-title">{section.label}</PageContent.Title>
               <PageContent.Description>
@@ -225,15 +225,17 @@ export default function AppShellPattern() {
             <PageContent.Body>
               {current === "today" ? (
                 <>
-                  <div className={styles.kpis}>
+                  <PageContent.Grid>
                     {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>
+                      <PageContent.Cell key={kpi.label} span={4}>
+                        <Card.Root variant="stat-trend">
+                          <Card.Label>{kpi.label}</Card.Label>
+                          <Card.Value>{kpi.value}</Card.Value>
+                          <Card.Delta tone={kpi.tone}>{kpi.delta}</Card.Delta>
+                        </Card.Root>
+                      </PageContent.Cell>
                     ))}
-                  </div>
+                  </PageContent.Grid>
                   <Card.Root variant="list">
                     <Card.Header>
                       <Card.Title as="h2">Задачи на сегодня</Card.Title>
@@ -276,7 +278,7 @@ export default function AppShellPattern() {
                 </Card.Root>
               )}
             </PageContent.Body>
-          </PageContent.Section>
+          </PageContent.Page>
         </Crossfade>
       </AppShell.Template>
 

package/dist/skill/patterns/chat.tsx

@@ -1,4 +1,4 @@
-/** 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. */
+/** A support messenger on `Chat`: dialogs with a search over them 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,
   Button,
@@ -550,6 +550,23 @@ export default function ChatPattern() {
     };
   }, []);
   const dialog = DIALOGS.find((item) => item.id === dialogId) ?? DIALOGS[0];
+  /** The search over the dialogs: by name and by the last message a row shows. */
+  const [dialogQuery, setDialogQuery] = React.useState("");
+  // The open dialog shows its live last message; the others their stored one.
+  const lastOf = (item: Dialog) =>
+    item.id === dialogId ? messages[messages.length - 1] : undefined;
+  const previewOf = (item: Dialog) => {
+    const last = lastOf(item);
+    return last ? excerpt(last) : item.preview;
+  };
+  const needle = dialogQuery.trim().toLowerCase();
+  const foundDialogs = needle
+    ? DIALOGS.filter(
+        (item) =>
+          item.name.toLowerCase().includes(needle) ||
+          previewOf(item).toLowerCase().includes(needle),
+      )
+    : DIALOGS;
   /** The dialog whose history has arrived: opening another one loads it first. */
   const [loadedId, setLoadedId] = React.useState<string | null>(null);
   React.useEffect(() => {
@@ -765,14 +782,15 @@ export default function ChatPattern() {
           <PageContent.List aria-label="Диалоги">
             <Card.Root className={styles.paneCard}>
               <ChatList.Root
-                items={DIALOGS}
+                items={foundDialogs}
                 getKey={(item) => item.id}
                 value={dialogId}
                 onValueChange={setDialogId}
+                search={dialogQuery}
+                onSearchChange={setDialogQuery}
                 now={NOW}
                 renderItem={(item) => {
-                  // The open dialog shows its live last message; the others their stored one.
-                  const last = item.id === dialogId ? messages[messages.length - 1] : undefined;
+                  const last = lastOf(item);
                   return (
                     <ChatList.Item
                       time={last?.sentAt ?? item.at}
@@ -788,7 +806,7 @@ export default function ChatPattern() {
                       </ChatList.ItemIcon>
                       <ChatList.ItemText>{item.name}</ChatList.ItemText>
                       <ChatList.ItemDescription author={last?.from === "me" ? "Вы" : undefined}>
-                        {last ? excerpt(last) : item.preview}
+                        {previewOf(item)}
                       </ChatList.ItemDescription>
                     </ChatList.Item>
                   );

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

@@ -1,19 +1,4 @@
-/* Dashboard: blocks 40 apart come from PageContent.Body; tiles inside a block 16 apart. */
-
-/* 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);
-}
-
-/* Panels: two columns from ~40rem of width; neighbours share one height. */
-.panels {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-20) * 4)), 1fr));
-  align-items: stretch;
-  gap: var(--prime-space-4);
-}
+/* Dashboard: the board of tiles is PageContent.Grid; here only the inside of the tiles. */
 
 /* Bars inside a panel: 20 apart, like fields. */
 .bars {
@@ -21,21 +6,6 @@
   gap: var(--prime-space-5);
 }
 
-/* A section without a card: heading row 16 above the table. */
-.recent {
-  display: grid;
-  gap: var(--prime-space-4);
-  min-width: 0;
-}
-
-.recentHeader {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: var(--prime-space-2) var(--prime-space-4);
-}
-
 .client {
   display: inline-flex;
   flex-wrap: wrap;