prime-ui-kit 0.16.0 → 0.17.0

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

@@ -1,6 +1,5 @@
-/** A dashboard: the title, a line of data, the period switch and the report in the app header; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `AppHeader.Tools`, `PageContent.Grid`. */
+/** A dashboard: the title and a line of data in the page flow, the period switch and the report in the top bar that keeps the title once it scrolls away; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `collapse`, `Page.Grid`. */
 import {
-  AppHeader,
   Badge,
   Button,
   Card,
@@ -12,8 +11,7 @@ import {
   type DataTableColumn,
   Icon,
   LinkButton,
-  PageContent,
-  PageToolbar,
+  Page,
   ProgressBar,
   type ProgressSegment,
   SegmentedControl,
@@ -158,206 +156,194 @@ export default function CardScreenExample() {
   const [period, setPeriod] = React.useState<Period>("month");
 
   return (
-    <>
-      {/* In an app this header fills the shell's `header` slot and carries the page: the only h1,
-          a line of data under it and the page's tools; main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Обзор
-            <AppHeader.Description>Продажи и оплаты · на 8 октября, 9:40</AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Tools>
-          <PageToolbar.Root aria-label="Обзор">
-            <PageToolbar.View>
-              <SegmentedControl.Root
-                aria-label="Период"
-                value={period}
-                onValueChange={(next) => setPeriod(next as Period)}
-              >
-                <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
-                <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
-                <SegmentedControl.Item value="quarter">Квартал</SegmentedControl.Item>
-              </SegmentedControl.Root>
-            </PageToolbar.View>
-            <PageToolbar.Actions>
-              <Button.Root variant="soft" tone="neutral">
-                <Button.Icon>
-                  <Icon name="action.download" />
-                </Button.Icon>
-                Отчёт
-              </Button.Root>
-            </PageToolbar.Actions>
-          </PageToolbar.Root>
-        </AppHeader.Tools>
-      </AppHeader.Root>
+    <Page.Root>
+      {/* An overview: the large title in the flow; the bar keeps the period and the report in
+          reach and repeats the title once it scrolls away. */}
+      <Page.TopBar collapse>
+        <Page.Tools>
+          <SegmentedControl.Root
+            aria-label="Период"
+            value={period}
+            onValueChange={(next) => setPeriod(next as Period)}
+          >
+            <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
+            <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
+            <SegmentedControl.Item value="quarter">Квартал</SegmentedControl.Item>
+          </SegmentedControl.Root>
+        </Page.Tools>
+        <Page.Actions>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.download" />
+            </Button.Icon>
+            Отчёт
+          </Button.Root>
+        </Page.Actions>
+      </Page.TopBar>
+      <Page.Header>
+        <Page.Heading>
+          <Page.Title>Обзор</Page.Title>
+          <Page.Description>Продажи и оплаты · на 8 октября, 9:40</Page.Description>
+        </Page.Heading>
+      </Page.Header>
+      <Page.Body>
+        {/* One board: every tile of the screen in one grid, 16 apart on both axes. */}
+        <Page.Grid>
+          {KPIS[period].map((kpi) => (
+            <Page.Cell key={kpi.label} span={3}>
+              {/* Another period is another set of values: the tile cross-fades instead of flipping. */}
+              <Crossfade state={period}>
+                <Card.Root variant="stat-trend">
+                  <Card.Label>{kpi.label}</Card.Label>
+                  <Card.Value>{kpi.value}</Card.Value>
+                  <Card.Delta tone={kpi.tone}>{kpi.delta}</Card.Delta>
+                </Card.Root>
+              </Crossfade>
+            </Page.Cell>
+          ))}
 
-      <PageContent.Root>
-        <PageContent.Body>
-          {/* One board: every tile of the screen in one grid, 16 apart on both axes. */}
-          <PageContent.Grid>
-            {KPIS[period].map((kpi) => (
-              <PageContent.Cell key={kpi.label} span={3}>
-                {/* Another period is another set of values: the tile cross-fades instead of flipping. */}
-                <Crossfade state={period}>
-                  <Card.Root variant="stat-trend">
-                    <Card.Label>{kpi.label}</Card.Label>
-                    <Card.Value>{kpi.value}</Card.Value>
-                    <Card.Delta tone={kpi.tone}>{kpi.delta}</Card.Delta>
-                  </Card.Root>
-                </Crossfade>
-              </PageContent.Cell>
-            ))}
-
-            <PageContent.Cell>
-              <Card.Root variant="panel">
-                <Card.Body>
-                  <Sparkline
-                    data={REVENUE[period]}
-                    label="Выручка по дням"
-                    summary="sum"
-                    formatValue={formatRubles}
-                  />
-                </Card.Body>
-              </Card.Root>
-            </PageContent.Cell>
+          <Page.Cell>
+            <Card.Root variant="panel">
+              <Card.Body>
+                <Sparkline
+                  data={REVENUE[period]}
+                  label="Выручка по дням"
+                  summary="sum"
+                  formatValue={formatRubles}
+                />
+              </Card.Body>
+            </Card.Root>
+          </Page.Cell>
 
-            {/* The chart spans two rows beside the two panels and fills their height. */}
-            <PageContent.Cell span={8} rows={2}>
-              <ChartFrame.Root
-                series={BILLING_SERIES}
-                formatValue={formatMillionsShort}
-                rows={BILLING[period].map((row) => ({
-                  label: row.label,
-                  values: { invoiced: row.invoiced, paid: row.paid },
-                }))}
-              >
-                <ChartFrame.Header>
-                  <ChartFrame.Title as="h2">Выставлено и оплачено</ChartFrame.Title>
-                  <ChartFrame.Description>Счета за период, млн ₽</ChartFrame.Description>
-                </ChartFrame.Header>
-                <ChartFrame.Plot
-                  height="fill"
-                  renderPlot={({ width, height, series }) => {
-                    const rows = BILLING[period];
-                    const top = Math.ceil(Math.max(...rows.map((row) => row.invoiced)));
-                    const innerH = height - BILLING_MARGIN.top - BILLING_MARGIN.bottom;
-                    const band = (width - BILLING_MARGIN.left) / rows.length;
-                    const bar = Math.min(28, (band - 16) / series.length);
-                    const y = (value: number) => BILLING_MARGIN.top + innerH * (1 - value / top);
-                    return (
-                      <svg width={width} height={height} aria-hidden="true">
-                        {[0, top / 2, top].map((tick) => (
-                          <g key={tick}>
-                            <line
-                              x1={BILLING_MARGIN.left}
-                              x2={width}
-                              y1={y(tick)}
-                              y2={y(tick)}
-                              stroke={tick === 0 ? chartColors.axis : chartColors.grid}
-                            />
-                            <text
-                              x={BILLING_MARGIN.left - 8}
-                              y={y(tick)}
-                              textAnchor="end"
-                              dominantBaseline="middle"
-                            >
-                              {tick.toLocaleString("ru-RU")}
+          {/* The chart spans two rows beside the two panels and fills their height. */}
+          <Page.Cell span={8} rows={2}>
+            <ChartFrame.Root
+              series={BILLING_SERIES}
+              formatValue={formatMillionsShort}
+              rows={BILLING[period].map((row) => ({
+                label: row.label,
+                values: { invoiced: row.invoiced, paid: row.paid },
+              }))}
+            >
+              <ChartFrame.Header>
+                <ChartFrame.Title as="h2">Выставлено и оплачено</ChartFrame.Title>
+                <ChartFrame.Description>Счета за период, млн ₽</ChartFrame.Description>
+              </ChartFrame.Header>
+              <ChartFrame.Plot
+                height="fill"
+                renderPlot={({ width, height, series }) => {
+                  const rows = BILLING[period];
+                  const top = Math.ceil(Math.max(...rows.map((row) => row.invoiced)));
+                  const innerH = height - BILLING_MARGIN.top - BILLING_MARGIN.bottom;
+                  const band = (width - BILLING_MARGIN.left) / rows.length;
+                  const bar = Math.min(28, (band - 16) / series.length);
+                  const y = (value: number) => BILLING_MARGIN.top + innerH * (1 - value / top);
+                  return (
+                    <svg width={width} height={height} aria-hidden="true">
+                      {[0, top / 2, top].map((tick) => (
+                        <g key={tick}>
+                          <line
+                            x1={BILLING_MARGIN.left}
+                            x2={width}
+                            y1={y(tick)}
+                            y2={y(tick)}
+                            stroke={tick === 0 ? chartColors.axis : chartColors.grid}
+                          />
+                          <text
+                            x={BILLING_MARGIN.left - 8}
+                            y={y(tick)}
+                            textAnchor="end"
+                            dominantBaseline="middle"
+                          >
+                            {tick.toLocaleString("ru-RU")}
+                          </text>
+                        </g>
+                      ))}
+                      {rows.map((row, i) => {
+                        const center = BILLING_MARGIN.left + band * i + band / 2;
+                        return (
+                          <g key={row.label}>
+                            {series.map((s, j) => {
+                              const value = s.id === "paid" ? row.paid : row.invoiced;
+                              return (
+                                <rect
+                                  key={s.id}
+                                  data-hidden={s.hidden}
+                                  x={center - (bar * series.length) / 2 + bar * j}
+                                  y={y(value)}
+                                  width={bar - 2}
+                                  height={y(0) - y(value)}
+                                  rx={2}
+                                  fill={s.color}
+                                />
+                              );
+                            })}
+                            <text x={center} y={height - 4} textAnchor="middle">
+                              {row.label}
                             </text>
                           </g>
-                        ))}
-                        {rows.map((row, i) => {
-                          const center = BILLING_MARGIN.left + band * i + band / 2;
-                          return (
-                            <g key={row.label}>
-                              {series.map((s, j) => {
-                                const value = s.id === "paid" ? row.paid : row.invoiced;
-                                return (
-                                  <rect
-                                    key={s.id}
-                                    data-hidden={s.hidden}
-                                    x={center - (bar * series.length) / 2 + bar * j}
-                                    y={y(value)}
-                                    width={bar - 2}
-                                    height={y(0) - y(value)}
-                                    rx={2}
-                                    fill={s.color}
-                                  />
-                                );
-                              })}
-                              <text x={center} y={height - 4} textAnchor="middle">
-                                {row.label}
-                              </text>
-                            </g>
-                          );
-                        })}
-                      </svg>
-                    );
-                  }}
-                />
-                <ChartFrame.Legend />
-              </ChartFrame.Root>
-            </PageContent.Cell>
+                        );
+                      })}
+                    </svg>
+                  );
+                }}
+              />
+              <ChartFrame.Legend />
+            </ChartFrame.Root>
+          </Page.Cell>
 
-            <PageContent.Cell span={4}>
-              <Card.Root variant="panel">
-                <Card.Header>
-                  <Card.Title as="h2">План продаж</Card.Title>
-                  <Typography as="span" variant="caption" tone="muted">
-                    Октябрь
-                  </Typography>
-                </Card.Header>
-                <Card.Body>
-                  <div className={styles.bars}>
-                    {PLAN.map((row) => (
-                      <ProgressBar
-                        key={row.manager}
-                        value={row.value}
-                        label={row.manager}
-                        tone={row.value < 50 ? "warning" : "accent"}
-                        showValue
-                      />
-                    ))}
-                  </div>
-                </Card.Body>
-              </Card.Root>
-            </PageContent.Cell>
+          <Page.Cell span={4}>
+            <Card.Root variant="panel">
+              <Card.Header>
+                <Card.Title as="h2">План продаж</Card.Title>
+                <Typography as="span" variant="caption" tone="muted">
+                  Октябрь
+                </Typography>
+              </Card.Header>
+              <Card.Body>
+                <div className={styles.bars}>
+                  {PLAN.map((row) => (
+                    <ProgressBar
+                      key={row.manager}
+                      value={row.value}
+                      label={row.manager}
+                      tone={row.value < 50 ? "warning" : "accent"}
+                      showValue
+                    />
+                  ))}
+                </div>
+              </Card.Body>
+            </Card.Root>
+          </Page.Cell>
 
-            <PageContent.Cell span={4}>
-              <Card.Root variant="panel">
-                <Card.Header>
-                  <Card.Title as="h2">Дебиторка</Card.Title>
-                  <Typography as="span" variant="caption" tone="muted">
-                    8,2 млн ₽
-                  </Typography>
-                </Card.Header>
-                <Card.Body>
-                  <ProgressBar
-                    segments={RECEIVABLES}
-                    label="По сроку оплаты"
-                    legend
-                    formatValue={formatMillions}
-                  />
-                </Card.Body>
-              </Card.Root>
-            </PageContent.Cell>
-          </PageContent.Grid>
+          <Page.Cell span={4}>
+            <Card.Root variant="panel">
+              <Card.Header>
+                <Card.Title as="h2">Дебиторка</Card.Title>
+                <Typography as="span" variant="caption" tone="muted">
+                  8,2 млн ₽
+                </Typography>
+              </Card.Header>
+              <Card.Body>
+                <ProgressBar
+                  segments={RECEIVABLES}
+                  label="По сроку оплаты"
+                  legend
+                  formatValue={formatMillions}
+                />
+              </Card.Body>
+            </Card.Root>
+          </Page.Cell>
+        </Page.Grid>
 
-          {/* A new topic: a titled section, set off by more air than the tiles. */}
-          <PageContent.Section label="Последние оплаты">
-            <PageContent.Actions>
-              <LinkButton href="#invoices">Все счета</LinkButton>
-            </PageContent.Actions>
-            <DataTable
-              columns={COLUMNS}
-              rows={PAYMENTS}
-              getRowKey={(row) => row.id}
-              paging="none"
-            />
-          </PageContent.Section>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+        {/* A new topic: a titled section, set off by more air than the tiles. */}
+        <Page.Section label="Последние оплаты">
+          <Page.Actions>
+            <LinkButton href="#invoices">Все счета</LinkButton>
+          </Page.Actions>
+          <DataTable columns={COLUMNS} rows={PAYMENTS} getRowKey={(row) => row.id} paging="none" />
+        </Page.Section>
+      </Page.Body>
+    </Page.Root>
   );
 }

package/dist/skill/reference/components/chart-frame/COMPONENT.md

@@ -105,7 +105,7 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `height` | `number \| "fill"` | `240`, `160` under `30rem` | Height of the plot area in px. `fill` takes the free height of a stretched panel (a `PageContent.Cell` with `rows`), the default height at least. |
+| `height` | `number \| "fill"` | `240`, `160` under `30rem` | Height of the plot area in px. `fill` takes the free height of a stretched panel (a `Page.Cell` with `rows`), the default height at least. |
 | `renderPlot` | `(area: ChartFramePlotArea) => ReactNode` | — | Renders the chart at the measured `{ width, height }` with every series `{ id, label, color, hidden }` — for libraries that need explicit sizes (Chart.js, visx). |
 | `children` | `ReactNode` | — | A chart that sizes itself to its container (an SVG with a `viewBox`, `ResponsiveContainer`); it fills the area. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |

package/dist/skill/reference/components/chart-frame/examples/fill-height.tsx

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

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

@@ -107,7 +107,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (a `PageContent.BackButton`, an `Avatar`, `Chat.Title`, `Chat.Description`, `Chat.Actions`), `className`. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (a `Page.BackButton`, an `Avatar`, `Chat.Title`, `Chat.Description`, `Chat.Actions`), `className`. |
 
 ### Chat.Title
 `ref` → `HTMLHeadingElement`. Who the chat is with, one line that ellipsizes; it also names the message list (`aria-labelledby`).
@@ -193,7 +193,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` — the actions (`Button.Root size="s"`: Переслать, Удалить), `className`. |
 
 ### Chat.Separator
-`ref` → `HTMLDivElement`. A date between messages (`items` add them for you) («Сегодня», «12 марта» — `formatMessageDate`): a pill in the middle that stays at the top while its day scrolls.
+`ref` → `HTMLDivElement`. A date between messages (`items` add them for you) («Сегодня», «12 марта» — `formatMessageDate`): a pill a step above the bubbles that stays at the top while its day scrolls, until the next date pushes it out.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -308,7 +308,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | `newMessages` | `"Новых сообщений: {count}. К последним сообщениям"` | The name of that button while new messages wait below. |
 | `typing` | `"печатает…"` | The status line of the header while the other side types. |
 | `search` | `"Поиск по переписке"` | The search button and the name of the search field. |
-| `searchPlaceholder` | `"Поиск по сообщениям"` | The placeholder of the search field. |
+| `searchPlaceholder` | `"Поиск"` | The placeholder of the search field. |
 | `matches` | `"{index} из {count}"` | The place of the current match, counted from the newest. |
 | `noMatches` | `"Нет совпадений"` | The search found nothing. |
 | `previousMatch` | `"Предыдущее совпадение"` | The button that goes to the older match. |
@@ -337,7 +337,7 @@ Chat.Root                         <div> column, fills its host; owns selection,
 | [states.tsx](examples/states.tsx) | The first load of a conversation: bubble-shaped placeholders on both sides stand in the list's place, then cross-fade into the messages — `loading`. |
 | [controlled.tsx](examples/controlled.tsx) | Selection mode owned by the screen: the Select item of a message's menu starts it, a check stands beside every message, a press toggles one while the others step back, the bar counts and acts, Escape leaves — `selected`, `onSelectedChange`, `Chat.SelectionBar`. |
 | [narrow.tsx](examples/narrow.tsx) | At phone width the header keeps its actions and lets the title ellipsize, bubbles take up to 85% of the chat, long links wrap and an album keeps its layout — `Chat.Root`, `Chat.Header`, `Chat.Messages`, `Chat.Footer`. |
-| [screen.tsx](examples/screen.tsx) | A support messenger as a work screen: the title and the unread count in the app header, the 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, the unread band, reply and edit from the menu, the typing signal both ways, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. |
+| [screen.tsx](examples/screen.tsx) | A support messenger as a work screen: the title and the unread count in its top bar, the 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, the unread band, reply and edit from the menu, the typing signal both ways, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. |
 
 ## Mistakes
 - A header, a search bar and a scroller of your own around the messages → `Chat.Header`, `Chat.Search`, `Chat.Messages`: the chat wires typing, search, jumps and selection between them.

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

@@ -1,5 +1,5 @@
 /* Messenger: a work screen — the header carries the title, the page fills the app panel
-   (`AppShell.Root fillViewport` + `PageContent.Root fill`); each pane is a card with a scrolling
+   (`AppShell.Root fillViewport` + `Page.Root fill`); each pane is a card with a scrolling
    region. */
 
 .paneCard {