prime-ui-kit 0.14.0 → 0.15.0

package/src/components/card/examples/screen.tsx

@@ -0,0 +1,362 @@
+/** 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`. */
+import {
+  AppHeader,
+  Badge,
+  Button,
+  Card,
+  ChartFrame,
+  type ChartFrameSeries,
+  Crossfade,
+  chartColors,
+  DataTable,
+  type DataTableColumn,
+  Icon,
+  LinkButton,
+  PageContent,
+  PageToolbar,
+  ProgressBar,
+  type ProgressSegment,
+  SegmentedControl,
+  Sparkline,
+  type SparklinePoint,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./screen.module.css";
+
+type Period = "week" | "month" | "quarter";
+type Payment = { id: string; client: string; date: string; amount: number; late: boolean };
+
+const KPIS: Record<
+  Period,
+  { label: string; value: string; delta: string; tone: "success" | "danger" | "neutral" }[]
+> = {
+  week: [
+    { label: "Выручка", value: "2,1 млн ₽", delta: "+6% к прошлой неделе", tone: "success" },
+    { label: "Оплачено счетов", value: "54", delta: "+4", tone: "success" },
+    { label: "Средний чек", value: "38 900 ₽", delta: "без изменений", tone: "neutral" },
+    { label: "Просрочено", value: "1,2 млн ₽", delta: "+180 тыс. ₽", tone: "danger" },
+  ],
+  month: [
+    { label: "Выручка", value: "8,4 млн ₽", delta: "+12% к сентябрю", tone: "success" },
+    { label: "Оплачено счетов", value: "214", delta: "+17", tone: "success" },
+    { label: "Средний чек", value: "39 300 ₽", delta: "−3% к сентябрю", tone: "danger" },
+    { label: "Просрочено", value: "1,2 млн ₽", delta: "−340 тыс. ₽", tone: "success" },
+  ],
+  quarter: [
+    { label: "Выручка", value: "24,6 млн ₽", delta: "+21% ко II кварталу", tone: "success" },
+    { label: "Оплачено счетов", value: "631", delta: "+88", tone: "success" },
+    { label: "Средний чек", value: "39 000 ₽", delta: "+1%", tone: "neutral" },
+    { label: "Просрочено", value: "1,2 млн ₽", delta: "−1,1 млн ₽", tone: "success" },
+  ],
+};
+
+const MONTHS = ["янв", "фев", "мар", "апр", "мая", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"];
+
+/** Daily revenue up to 8 October 2026: `days` points ending that day, a deterministic wave. */
+function dailyRevenue(days: number, base: number): SparklinePoint[] {
+  return Array.from({ length: days }, (_, i) => {
+    const day = new Date(2026, 9, 8 - (days - 1 - i));
+    const wave = Math.sin(i / 2.3) * 0.12 + Math.sin(i / 0.9) * 0.05 + i / days / 6;
+    return {
+      label: `${day.getDate()} ${MONTHS[day.getMonth()]}`,
+      value: Math.round((base * (1 + wave)) / 1000) * 1000,
+    };
+  });
+}
+
+const REVENUE: Record<Period, SparklinePoint[]> = {
+  week: dailyRevenue(7, 300_000),
+  month: dailyRevenue(30, 280_000),
+  quarter: dailyRevenue(90, 270_000),
+};
+
+const formatRubles = (value: number) => `${value.toLocaleString("ru-RU")} ₽`;
+
+const BILLING_SERIES: ChartFrameSeries[] = [
+  { id: "invoiced", label: "Выставлено" },
+  { id: "paid", label: "Оплачено" },
+];
+
+/** Invoiced and paid, in millions of rubles, by the buckets of each period. */
+const BILLING: Record<Period, { label: string; invoiced: number; paid: number }[]> = {
+  week: [
+    { label: "пн", invoiced: 0.42, paid: 0.31 },
+    { label: "вт", invoiced: 0.38, paid: 0.4 },
+    { label: "ср", invoiced: 0.51, paid: 0.36 },
+    { label: "чт", invoiced: 0.47, paid: 0.44 },
+    { label: "пт", invoiced: 0.56, paid: 0.52 },
+  ],
+  month: [
+    { label: "нед 37", invoiced: 2.1, paid: 1.8 },
+    { label: "нед 38", invoiced: 2.4, paid: 2.0 },
+    { label: "нед 39", invoiced: 1.9, paid: 2.2 },
+    { label: "нед 40", invoiced: 2.6, paid: 2.1 },
+  ],
+  quarter: [
+    { label: "авг", invoiced: 7.8, paid: 6.9 },
+    { label: "сен", invoiced: 8.1, paid: 7.6 },
+    { label: "окт", invoiced: 8.9, paid: 8.4 },
+  ],
+};
+
+const BILLING_MARGIN = { top: 8, bottom: 24, left: 36 };
+
+const formatMillionsShort = (value: number) => `${value.toLocaleString("ru-RU")} млн ₽`;
+
+const PLAN = [
+  { manager: "Анна Климова", value: 92 },
+  { manager: "Илья Петров", value: 74 },
+  { manager: "Марат Хасанов", value: 48 },
+];
+
+/** Display of an amount in millions: «5,1 млн ₽». */
+const formatMillions = (value: number) => `${String(value).replace(".", ",")} млн ₽`;
+
+const RECEIVABLES: ProgressSegment[] = [
+  { value: 5.1, label: "В срок", tone: "success" },
+  { value: 1.9, label: "До 30 дней", tone: "warning" },
+  { value: 1.2, label: "Больше 30 дней", tone: "danger" },
+];
+
+const PAYMENTS: Payment[] = [
+  { id: "p1", client: "ООО «Мостострой»", date: "7 окт.", amount: 2_480_000, late: false },
+  { id: "p2", client: "АО «Волга-Энерго»", date: "6 окт.", amount: 1_095_000, late: false },
+  { id: "p3", client: "ООО «Логистик Плюс»", date: "5 окт.", amount: 312_000, late: true },
+  { id: "p4", client: "ООО «Гранит»", date: "3 окт.", amount: 94_750, late: false },
+];
+
+const MONEY = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Payment>[] = [
+  {
+    id: "client",
+    header: "Клиент",
+    cell: (row) => (
+      <span className={styles.client}>
+        {row.client}
+        {row.late ? <Badge.Root color="orange">С опозданием</Badge.Root> : null}
+      </span>
+    ),
+  },
+  { id: "date", header: "Дата", accessor: "date", numeric: true, headerAlign: "end" },
+  {
+    id: "amount",
+    header: "Сумма",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.amount),
+  },
+];
+
+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>
+
+      <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>
+
+            {/* 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}>
+                <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>
+                          );
+                        })}
+                      </svg>
+                    );
+                  }}
+                />
+                <ChartFrame.Legend />
+                <ChartFrame.Table
+                  rows={BILLING[period].map((row) => ({
+                    label: row.label,
+                    values: { invoiced: row.invoiced, paid: row.paid },
+                  }))}
+                />
+              </ChartFrame.Root>
+            </PageContent.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>
+
+            <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>
+
+          {/* 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>
+    </>
+  );
+}

package/src/components/card/examples/variants.tsx

@@ -1,4 +1,4 @@
-/** KPI templates: an icon tile with a value, a badge with a value in the header row, and a large value with its change and a reference line — `variant`, `Card.Delta`, `Card.Meta`. */
+/** KPI templates: an icon tile with a value, a badge with a value in the header row, and a large value with its change in every tone and a reference line — `variant`, `Card.Delta`, `tone`, `Card.Meta`. */
 import { Badge, Card, Icon } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -35,6 +35,20 @@ export default function CardVariantsExample() {
         <Card.Delta tone="danger">+0,6 п. п. за неделю</Card.Delta>
         <Card.Meta>Ушло 38 из 1 226 клиентов</Card.Meta>
       </Card.Root>
+
+      <Card.Root variant="stat-trend">
+        <Card.Label>Первый ответ поддержки</Card.Label>
+        <Card.Value>3,4 ч</Card.Value>
+        <Card.Delta tone="warning">+40 мин — близко к SLA 4 ч</Card.Delta>
+        <Card.Meta>Открыто 62 обращения</Card.Meta>
+      </Card.Root>
+
+      <Card.Root variant="stat-trend">
+        <Card.Label>Средний чек</Card.Label>
+        <Card.Value>38 900 ₽</Card.Value>
+        <Card.Delta>без изменений</Card.Delta>
+        <Card.Meta>Оплачено 214 счетов</Card.Meta>
+      </Card.Root>
     </div>
   );
 }

package/src/components/chart-frame/COMPONENT.md

@@ -216,7 +216,8 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Revenue by month as a hand-drawn SVG line chart in a dashboard panel: the headline with its change, a period switch, a legend that turns series off and a table for screen readers — `series`, `formatValue`, `renderPlot`. |
 | [tooltip.tsx](examples/tooltip.tsx) | Invoices by week as grouped bars: the kit tooltip follows the pointer with a row per series, the arrows step through the weeks — `ChartFrame.Tooltip`, `items`, `point`. |
-| [states.tsx](examples/states.tsx) | Loading, empty, error and data swap in the plot's place without moving the panel; the error retries — `state`, `onRetry`. |
+| [fill-height.tsx](examples/fill-height.tsx) | 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`. |
+| [states.tsx](examples/states.tsx) | Loading, empty, error and data swap in the plot's place without moving the panel; the error retries, and the legend of the one series only names it — `state`, `onRetry`, `readOnly`. |
 | [controlled.tsx](examples/controlled.tsx) | Lead sources with totals in the legend; the hidden series live in the page state and one button shows them all again — `hiddenSeries`, `onHiddenSeriesChange`. |
 | [narrow.tsx](examples/narrow.tsx) | A 320px column: the actions drop under the title, the plot gets lower and a self-sizing SVG stretches to it — `children`, `height`. |
 

package/src/components/chart-frame/examples/fill-height.tsx

@@ -0,0 +1,119 @@
+/** 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";
+
+const SERIES: ChartFrameSeries[] = [
+  { id: "fact", label: "Факт" },
+  { id: "plan", label: "План" },
+];
+
+const MONTHS = [
+  { month: "май", fact: 6.2, plan: 6.0 },
+  { month: "июн", fact: 6.8, plan: 6.5 },
+  { month: "июл", fact: 6.4, plan: 7.0 },
+  { month: "авг", fact: 7.1, plan: 7.4 },
+  { month: "сен", fact: 7.5, plan: 7.8 },
+  { month: "окт", fact: 7.9, plan: 8.2 },
+];
+
+const MARGIN = { top: 8, right: 16, bottom: 24, left: 32 };
+const TICKS = [0, 3, 6, 9];
+
+const formatMillions = (value: number) => `${value.toLocaleString("ru-RU")} млн ₽`;
+
+export default function ChartFrameFillHeightExample() {
+  return (
+    <PageContent.Grid>
+      {/* The cell spans two rows beside the tiles; `height="fill"` takes all of it. */}
+      <PageContent.Cell span={8} rows={2}>
+        <ChartFrame.Root
+          series={SERIES}
+          defaultHiddenSeries={["plan"]}
+          formatValue={formatMillions}
+        >
+          <ChartFrame.Header>
+            <ChartFrame.Title as="h2">Выручка и план</ChartFrame.Title>
+            <ChartFrame.Description>По месяцам, млн ₽</ChartFrame.Description>
+          </ChartFrame.Header>
+          <ChartFrame.Value>
+            7,9 млн ₽<ChartFrame.Delta tone="warning">−4% к плану</ChartFrame.Delta>
+          </ChartFrame.Value>
+          <ChartFrame.Plot
+            height="fill"
+            renderPlot={({ width, height, series }) => {
+              const innerW = width - MARGIN.left - MARGIN.right;
+              const innerH = height - MARGIN.top - MARGIN.bottom;
+              const x = (i: number) => MARGIN.left + (innerW * i) / (MONTHS.length - 1);
+              const y = (v: number) => MARGIN.top + innerH * (1 - v / TICKS[TICKS.length - 1]);
+              return (
+                <svg width={width} height={height} aria-hidden="true">
+                  {TICKS.map((tick) => (
+                    <g key={tick}>
+                      <line
+                        x1={MARGIN.left}
+                        x2={width - MARGIN.right}
+                        y1={y(tick)}
+                        y2={y(tick)}
+                        stroke={tick === 0 ? chartColors.axis : chartColors.grid}
+                      />
+                      <text
+                        x={MARGIN.left - 8}
+                        y={y(tick)}
+                        textAnchor="end"
+                        dominantBaseline="middle"
+                      >
+                        {tick}
+                      </text>
+                    </g>
+                  ))}
+                  {MONTHS.map((row, i) => (
+                    <text key={row.month} x={x(i)} y={height - 4} textAnchor="middle">
+                      {row.month}
+                    </text>
+                  ))}
+                  {series.map((s) => (
+                    <path
+                      key={s.id}
+                      data-hidden={s.hidden}
+                      d={MONTHS.map(
+                        (row, i) =>
+                          `${i ? "L" : "M"}${x(i)},${y(s.id === "plan" ? row.plan : row.fact)}`,
+                      ).join("")}
+                      fill="none"
+                      stroke={s.color}
+                      strokeWidth={2}
+                      strokeDasharray={s.id === "plan" ? "4 4" : undefined}
+                      strokeLinejoin="round"
+                    />
+                  ))}
+                </svg>
+              );
+            }}
+          />
+          <ChartFrame.Legend />
+          <ChartFrame.Table
+            rows={MONTHS.map((row) => ({
+              label: row.month,
+              values: { fact: row.fact, plan: row.plan },
+            }))}
+          />
+        </ChartFrame.Root>
+      </PageContent.Cell>
+
+      <PageContent.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>
+
+      <PageContent.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>
+  );
+}

package/src/components/chart-frame/examples/states.tsx

@@ -1,4 +1,4 @@
-/** Loading, empty, error and data swap in the plot's place without moving the panel; the error retries — `state`, `onRetry`. */
+/** Loading, empty, error and data swap in the plot's place without moving the panel; the error retries, and the legend of the one series only names it — `state`, `onRetry`, `readOnly`. */
 import {
   ChartFrame,
   type ChartFrameSeries,
@@ -72,6 +72,8 @@ export default function ChartFrameStatesExample() {
             );
           }}
         />
+        {/* One series: the legend only names it, there is nothing to turn off. */}
+        <ChartFrame.Legend readOnly />
       </ChartFrame.Root>
     </>
   );

package/src/components/chat/COMPONENT.md

@@ -318,12 +318,14 @@ Chat.Root                         <div> column, fills its host; owns selection,
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A complete team messenger over two thousand messages: the header whose status turns into typing, search with highlight, pinned messages, history that loads above, author headers with tags in a group chat, every kind of message, transcripts, reactions, the menu with reply, edit, pin and select, jumps, the new-messages button and the Composer whose messages rise into the list — `Chat.Root`, `Chat.Header`, `Chat.Search`, `Chat.Pinned`, `Chat.Messages`, `type`, `items`, `renderMessage`, `typing`, `selected`, `Chat.Footer`. |
 | [structure.tsx](examples/structure.tsx) | The list alone, written as parts: `Chat.Root` with only `Chat.Messages`, a date that stays on top while its day scrolls, an event of the chat and the unread band — `Chat.Messages`, `Chat.Separator`, `Chat.Service`, `Chat.Unread`. |
-| [group-chat.tsx](examples/group-chat.tsx) | A team chat from data: the first message of an author's run opens with the name in the author's hue, a crown for the owner and the member's tag; the avatar — a photo, or initials — closes the run; a direct chat shows neither — `type`, `items`, `renderMessage`, `Message.Author`, `tag`, `Message.AuthorIcon`, `hueOf`. |
+| [group-chat.tsx](examples/group-chat.tsx) | A team chat from data: the first message of an author's run opens with the name in the author's hue, a crown for the owner and the member's tag; the avatar — a photo, or initials — closes the run, which holds messages up to a quarter of an hour apart; the dates carry the weekday — `type`, `items`, `renderMessage`, `groupWindow`, `formatDate`, `Message.Author`, `tag`, `Message.AuthorIcon`, `hueOf`. |
+| [reactions.tsx](examples/reactions.tsx) | A team's own reactions for approvals: a double tap or `L` puts the approval mark, a long press or `R` opens the team's set, and a chip toggles them back — `quickReaction`, `reactionOptions`, `onReactionToggle`. |
 | [live.tsx](examples/live.tsx) | A live support chat: the client types — the header and the end of the list say so — then answers; new messages enter at the end, read receipts come from what is on screen, and scrolled up the round button counts what arrived — `typing`, `onNewMessage`, `onRead`. |
 | [search.tsx](examples/search.tsx) | Search and pinned messages: the search bar marks every match in the texts and transcripts, counts them and steps between them while the others step back; a pinned message's press jumps to it and blinks it — `Chat.SearchButton`, `Chat.Search`, `defaultSearch`, `Chat.Pinned`. |
 | [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`. |
 
 ## 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/src/components/chat/examples/group-chat.tsx

@@ -1,4 +1,4 @@
-/** A team chat from data: the first message of an author's run opens with the name in the author's hue, a crown for the owner and the member's tag; the avatar — a photo, or initials — closes the run; a direct chat shows neither — `type`, `items`, `renderMessage`, `Message.Author`, `tag`, `Message.AuthorIcon`, `hueOf`. */
+/** A team chat from data: the first message of an author's run opens with the name in the author's hue, a crown for the owner and the member's tag; the avatar — a photo, or initials — closes the run, which holds messages up to a quarter of an hour apart; the dates carry the weekday — `type`, `items`, `renderMessage`, `groupWindow`, `formatDate`, `Message.Author`, `tag`, `Message.AuthorIcon`, `hueOf`. */
 import { Avatar, Card, Chat, hueOf, Icon, Message } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -52,7 +52,7 @@ const MESSAGES: ChatMessage[] = [
     id: "2",
     author: "anna",
     text: "Причина — миграция базы счетов.",
-    sentAt: new Date(2026, 9, 7, 18, 41),
+    sentAt: new Date(2026, 9, 7, 18, 52),
   },
   {
     id: "3",
@@ -80,6 +80,17 @@ const MESSAGES: ChatMessage[] = [
   },
 ];
 
+/** A team writes in bursts: a run holds one author's messages up to 15 minutes apart. */
+const RUN_MINUTES = 15;
+
+const DAY = new Intl.DateTimeFormat("ru", { weekday: "long", day: "numeric", month: "long" });
+
+/** «Среда, 8 октября»: the weekday matters in a work week. */
+const formatDay = (date: Date) => {
+  const label = DAY.format(date);
+  return label.charAt(0).toUpperCase() + label.slice(1);
+};
+
 const renderMessage = (message: ChatMessage) => {
   const person = PEOPLE[message.author] as Person;
   const outgoing = message.author === "me";
@@ -122,6 +133,8 @@ export default function ChatGroupChatExample() {
           getAuthor={(message) => message.author}
           getDate={(message) => message.sentAt}
           renderMessage={renderMessage}
+          groupWindow={RUN_MINUTES}
+          formatDate={formatDay}
           now={NOW}
         />
       </Chat.Root>