prime-ui-kit 0.13.1 → 0.14.0

package/dist/skill/patterns/dashboard.tsx

@@ -156,7 +156,7 @@ export default function DashboardPattern() {
   const [period, setPeriod] = React.useState<Period>("month");
 
   return (
-    <PageContent.Section aria-labelledby="dashboard-title">
+    <PageContent.Page aria-labelledby="dashboard-title">
       <PageContent.Header>
         <PageContent.Title id="dashboard-title">Обзор</PageContent.Title>
         <PageContent.Description>Продажи и оплаты по всем менеджерам.</PageContent.Description>
@@ -179,148 +179,162 @@ export default function DashboardPattern() {
         </PageContent.Actions>
       </PageContent.Header>
       <PageContent.Body>
-        {/* Another period is another set of values: the row cross-fades instead of flipping. */}
-        <Crossfade state={period}>
-          <div className={styles.kpis}>
-            {KPIS[period].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>
-        </Crossfade>
+        {/* 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>
+          ))}
 
-        <Card.Root variant="panel">
-          <Card.Body>
-            <Sparkline data={REVENUE[period]} label="Выручка по дням" formatValue={formatRubles} />
-          </Card.Body>
-        </Card.Root>
+          <PageContent.Cell>
+            <Card.Root variant="panel">
+              <Card.Body>
+                <Sparkline
+                  data={REVENUE[period]}
+                  label="Выручка по дням"
+                  summary="sum"
+                  formatValue={formatRubles}
+                />
+              </Card.Body>
+            </Card.Root>
+          </PageContent.Cell>
 
-        <ChartFrame.Root series={BILLING_SERIES} formatValue={formatMillionsShort}>
-          <ChartFrame.Header>
-            <ChartFrame.Title as="h2">Выставлено и оплачено</ChartFrame.Title>
-            <ChartFrame.Description>Счета за период, млн ₽</ChartFrame.Description>
-          </ChartFrame.Header>
-          <ChartFrame.Plot
-            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>
+          {/* 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>
 
-        <div className={styles.panels}>
-          <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 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>
 
-          <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>
-        </div>
+          <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>
 
-        <section className={styles.recent} aria-labelledby="payments-title">
-          <div className={styles.recentHeader}>
-            <Typography as="h2" variant="title-m" id="payments-title">
-              Последние оплаты
-            </Typography>
+        {/* A new topic: a titled section, set off by more air than the tiles. */}
+        <PageContent.Section label="Последние оплаты">
+          <PageContent.Actions>
             <LinkButton href="#invoices">Все счета</LinkButton>
-          </div>
+          </PageContent.Actions>
           <DataTable columns={COLUMNS} rows={PAYMENTS} getRowKey={(row) => row.id} paging="none" />
-        </section>
+        </PageContent.Section>
       </PageContent.Body>
-    </PageContent.Section>
+    </PageContent.Page>
   );
 }

package/dist/skill/patterns/detail-page.module.css

@@ -17,10 +17,7 @@
 }
 
 .main {
-  display: grid;
   flex: 999 1 calc(var(--prime-space-24) * 5);
-  gap: var(--prime-space-4);
-  min-width: 0;
 }
 
 .aside {

package/dist/skill/patterns/detail-page.tsx

@@ -74,7 +74,7 @@ const COLUMNS: DataTableColumn<Line>[] = [
 
 export default function DetailPagePattern() {
   return (
-    <PageContent.Section aria-labelledby="invoice-title">
+    <PageContent.Page aria-labelledby="invoice-title">
       <PageContent.Header>
         <Breadcrumb.Root>
           <Breadcrumb.Item href="#invoices">Счета</Breadcrumb.Item>
@@ -114,10 +114,7 @@ export default function DetailPagePattern() {
       </PageContent.Header>
       <PageContent.Body>
         <div className={styles.columns}>
-          <section className={styles.main} aria-labelledby="invoice-lines">
-            <Typography as="h2" variant="title-m" id="invoice-lines">
-              Позиции
-            </Typography>
+          <PageContent.Section label="Позиции" className={styles.main}>
             <DataTable
               columns={COLUMNS}
               rows={LINES}
@@ -152,7 +149,7 @@ export default function DetailPagePattern() {
                 </dd>
               </div>
             </dl>
-          </section>
+          </PageContent.Section>
           <aside className={styles.aside} aria-label="Клиент и история">
             <Card.Root variant="panel">
               <Card.Header>
@@ -204,6 +201,6 @@ export default function DetailPagePattern() {
           </aside>
         </div>
       </PageContent.Body>
-    </PageContent.Section>
+    </PageContent.Page>
   );
 }

package/dist/skill/patterns/form-drawer.tsx

@@ -107,7 +107,7 @@ export default function FormDrawerPattern() {
   };
 
   return (
-    <PageContent.Section aria-labelledby="clients-title">
+    <PageContent.Page aria-labelledby="clients-title">
       <PageContent.Header>
         <PageContent.Title id="clients-title">Клиенты</PageContent.Title>
         <PageContent.Description>
@@ -235,6 +235,6 @@ export default function FormDrawerPattern() {
       <PageContent.Body>
         <DataTable columns={COLUMNS} rows={clients} getRowKey={(row) => row.id} paging="none" />
       </PageContent.Body>
-    </PageContent.Section>
+    </PageContent.Page>
   );
 }

package/dist/skill/patterns/kanban-board.tsx

@@ -386,7 +386,7 @@ export default function KanbanBoardPattern() {
   const nextStage = STAGE_BY_ID.get(stageOrder[stageOrder.indexOf(dealStage) + 1] ?? "");
 
   return (
-    <PageContent.Section aria-labelledby="deals-title">
+    <PageContent.Page aria-labelledby="deals-title">
       <PageContent.Header>
         <PageContent.Title id="deals-title">Сделки</PageContent.Title>
         <PageContent.Description>
@@ -443,6 +443,8 @@ export default function KanbanBoardPattern() {
           </SmartFilter.Root>
           <Crossfade state={view}>
             {view === "board" ? (
+              // `plain` (the default): the board is the page's main region, so the stages are no
+              // boxes — their headers and the deal cards stand on the page, one level of nesting.
               <Kanban.Root
                 aria-label="Воронка продаж"
                 className={styles.board}
@@ -607,6 +609,6 @@ export default function KanbanBoardPattern() {
           </Drawer.Content>
         </Drawer.Root>
       </PageContent.Body>
-    </PageContent.Section>
+    </PageContent.Page>
   );
 }

package/dist/skill/patterns/list-page.tsx

@@ -268,7 +268,7 @@ export default function ListPagePattern() {
   };
 
   return (
-    <PageContent.Section aria-labelledby="invoices-title">
+    <PageContent.Page aria-labelledby="invoices-title">
       <PageContent.Header>
         <PageContent.Title id="invoices-title">Счета</PageContent.Title>
         <PageContent.Description>
@@ -329,6 +329,6 @@ export default function ListPagePattern() {
           }
         />
       </PageContent.Body>
-    </PageContent.Section>
+    </PageContent.Page>
   );
 }

package/dist/skill/patterns/media-library.module.css

@@ -1,27 +1,5 @@
 /* Media library: layout inside the library block only; the page rhythm comes from PageContent. */
 
-/* A section without a card: the heading row 16 above the grid. */
-.library {
-  display: grid;
-  gap: var(--prime-space-4);
-  min-width: 0;
-}
-
-/* Heading and count on the start side, the selection actions on the end; they wrap on a phone. */
-.libraryHeader {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-3) var(--prime-space-4);
-}
-
-.heading {
-  display: grid;
-  gap: var(--prime-space-1);
-  min-width: 0;
-}
-
 .bar {
   display: flex;
   flex-wrap: wrap;

package/dist/skill/patterns/media-library.tsx

@@ -362,7 +362,7 @@ export default function MediaLibraryPattern() {
   const totalSize = visible.reduce((sum, media) => sum + media.size, 0);
 
   return (
-    <PageContent.Section aria-labelledby="media-title">
+    <PageContent.Page aria-labelledby="media-title">
       <PageContent.Header>
         <PageContent.Title id="media-title">Медиатека объекта</PageContent.Title>
         <PageContent.Description>
@@ -437,20 +437,19 @@ export default function MediaLibraryPattern() {
           inputRef={inputRef}
         />
 
-        <section className={styles.library} aria-labelledby="files-title">
-          <div className={styles.libraryHeader}>
-            <div className={styles.heading}>
-              <Typography as="h2" variant="title-m" id="files-title">
-                Файлы
-              </Typography>
-              <Typography as="p" variant="caption" tone="muted" aria-live="polite">
-                {selecting
-                  ? `Выбрано: ${selected.size}`
-                  : loading
-                    ? "Загружаем…"
-                    : `${visible.length} ${filesWord(visible.length)} · ${formatFileSize(totalSize)}`}
-              </Typography>
-            </div>
+        <PageContent.Section
+          label="Файлы"
+          description={
+            <span aria-live="polite">
+              {selecting
+                ? `Выбрано: ${selected.size}`
+                : loading
+                  ? "Загружаем…"
+                  : `${visible.length} ${filesWord(visible.length)} · ${formatFileSize(totalSize)}`}
+            </span>
+          }
+        >
+          <PageContent.Actions>
             <Crossfade state={selecting ? "select" : "browse"}>
               {selecting ? (
                 <div className={styles.bar}>
@@ -500,7 +499,7 @@ export default function MediaLibraryPattern() {
                 </div>
               )}
             </Crossfade>
-          </div>
+          </PageContent.Actions>
 
           <Crossfade state={state} aria-busy={loading}>
             {loading ? (
@@ -612,7 +611,7 @@ export default function MediaLibraryPattern() {
               </EmptyPage.Root>
             ) : null}
           </Crossfade>
-        </section>
+        </PageContent.Section>
 
         <MediaViewer
           items={viewerItems}
@@ -633,6 +632,6 @@ export default function MediaLibraryPattern() {
           )}
         />
       </PageContent.Body>
-    </PageContent.Section>
+    </PageContent.Page>
   );
 }

package/dist/skill/patterns/record-editor.module.css

@@ -0,0 +1,18 @@
+/* Record editor: the sections are PageContent.Section layout="aside"; here only the panels' insides. */
+
+/* Two groups in one panel, a group apart. */
+.groups {
+  display: grid;
+  gap: var(--prime-space-8);
+}
+
+/* One value in three currencies: one row while there is room, the unit inside each field. */
+.currencies {
+  display: grid;
+  grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, calc(var(--prime-space-24) + var(--prime-space-8))), 1fr)
+    );
+  align-items: start;
+  gap: var(--prime-space-3);
+}