prime-ui-kit 0.16.0 → 0.17.0

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

@@ -1,6 +1,5 @@
-/** A create form in a Drawer opened from the primary action in the app header: grouped fields, errors on submit with focus on the first invalid field, a loading submit, a toast and the new row in the list — `Drawer.Trigger`, `Drawer.Guard`. */
+/** A create form in a Drawer opened from the primary action in its top bar: grouped fields, errors on submit with focus on the first invalid field, a loading submit, a toast and the new row in the list — `Drawer.Trigger`, `Drawer.Guard`. */
 import {
-  AppHeader,
   Badge,
   Button,
   Checkbox,
@@ -10,8 +9,7 @@ import {
   Fieldset,
   Icon,
   Input,
-  PageContent,
-  PageToolbar,
+  Page,
   Radio,
   Select,
   SmartFilter,
@@ -128,162 +126,141 @@ export default function DrawerScreenExample() {
   const people = clients.filter((client) => client.kind === "person").length;
 
   return (
-    <>
-      {/* The page lives in the app header: the only h1, the counts under it, search and the one
-          primary action — the Drawer trigger — in the tools row; main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Клиенты
-            <AppHeader.Description>
+    <SmartFilter.Root fields={[]} search={search} onSearchChange={setSearch}>
+      <Page.Root>
+        {/* A work screen titles itself in its top bar: the only h1, the counts under it, the search
+          and the one primary action — the Drawer trigger. */}
+        <Page.TopBar>
+          <Page.Heading>
+            <Page.Title>Клиенты</Page.Title>
+            <Page.Description>
               {plural(clients.length, CLIENT_WORDS)} ·{" "}
               {plural(clients.length - people, COMPANY_WORDS)} и {people} ИП
-            </AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Tools>
-          <SmartFilter.Root fields={[]} search={search} onSearchChange={setSearch}>
-            <PageToolbar.Root aria-label="Клиенты">
-              <PageToolbar.Tools>
-                <SmartFilter.Toolbar />
-              </PageToolbar.Tools>
-              <PageToolbar.Actions>
-                <Drawer.Root open={open} onOpenChange={changeOpen}>
-                  <Drawer.Trigger>
-                    <Button.Root>
-                      <Button.Icon>
-                        <Icon name="action.add" />
-                      </Button.Icon>
-                      Новый клиент
-                    </Button.Root>
-                  </Drawer.Trigger>
-                  <Drawer.Content>
-                    <Drawer.Header>
-                      <Drawer.Title>Новый клиент</Drawer.Title>
-                      <Drawer.Description>
-                        Появится в списке и в выборе клиента при выставлении счёта.
-                      </Drawer.Description>
-                    </Drawer.Header>
-                    <Drawer.Body>
-                      <Drawer.Guard busy={saving} dirty={dirty} />
-                      <form
-                        id={formId}
-                        className={styles.form}
-                        noValidate
-                        onSubmit={submit}
-                        onChange={() => setDirty(true)}
+            </Page.Description>
+          </Page.Heading>
+          <Page.Tools aria-label="Клиенты">
+            <SmartFilter.Toolbar />
+          </Page.Tools>
+          <Page.Actions>
+            <Drawer.Root open={open} onOpenChange={changeOpen}>
+              <Drawer.Trigger>
+                <Button.Root>
+                  <Button.Icon>
+                    <Icon name="action.add" />
+                  </Button.Icon>
+                  Новый клиент
+                </Button.Root>
+              </Drawer.Trigger>
+              <Drawer.Content>
+                <Drawer.Header>
+                  <Drawer.Title>Новый клиент</Drawer.Title>
+                  <Drawer.Description>
+                    Появится в списке и в выборе клиента при выставлении счёта.
+                  </Drawer.Description>
+                </Drawer.Header>
+                <Drawer.Body>
+                  <Drawer.Guard busy={saving} dirty={dirty} />
+                  <form
+                    id={formId}
+                    className={styles.form}
+                    noValidate
+                    onSubmit={submit}
+                    onChange={() => setDirty(true)}
+                  >
+                    <Fieldset label="Реквизиты" disabled={saving}>
+                      <Radio.Group
+                        name="kind"
+                        label="Тип клиента"
+                        defaultValue="company"
+                        orientation="horizontal"
                       >
-                        <Fieldset label="Реквизиты" disabled={saving}>
-                          <Radio.Group
-                            name="kind"
-                            label="Тип клиента"
-                            defaultValue="company"
-                            orientation="horizontal"
-                          >
-                            <Radio.Root value="company">
-                              <Radio.Label>Компания</Radio.Label>
-                            </Radio.Root>
-                            <Radio.Root value="person">
-                              <Radio.Label>ИП</Radio.Label>
-                            </Radio.Root>
-                          </Radio.Group>
-                          <Input.Root label="Название" error={errors.name}>
-                            <Input.Wrapper>
-                              <Input.Field
-                                name="name"
-                                placeholder="ООО «Ромашка»"
-                                autoComplete="organization"
-                              />
-                            </Input.Wrapper>
-                          </Input.Root>
-                          <div className={styles.pair}>
-                            <Input.Root label="ИНН" error={errors.inn} reserveSupportRow>
-                              <Input.Wrapper>
-                                <Input.Field
-                                  name="inn"
-                                  inputMode="numeric"
-                                  placeholder="7704512908"
-                                />
-                              </Input.Wrapper>
-                            </Input.Root>
-                            <Input.Root label="КПП" optional reserveSupportRow>
-                              <Input.Wrapper>
-                                <Input.Field
-                                  name="kpp"
-                                  inputMode="numeric"
-                                  placeholder="770401001"
-                                />
-                              </Input.Wrapper>
-                            </Input.Root>
-                          </div>
-                        </Fieldset>
-                        <Fieldset label="Контакты" disabled={saving}>
-                          <Input.Root
-                            label="Почта для счетов"
-                            error={errors.email}
-                            hint="На неё уйдут счета и акты"
-                          >
-                            <Input.Wrapper>
-                              <Input.Icon side="start">
-                                <Icon name="field.email" />
-                              </Input.Icon>
-                              <Input.Field
-                                name="email"
-                                type="email"
-                                placeholder="billing@company.ru"
-                              />
-                            </Input.Wrapper>
-                          </Input.Root>
-                          <Select.Root
-                            label="Менеджер"
-                            value={manager}
-                            onValueChange={(next) => {
-                              setManager(next);
-                              setDirty(true);
-                            }}
-                          >
-                            <Select.Trigger>
-                              <Select.Value />
-                            </Select.Trigger>
-                            <Select.Content>
-                              {MANAGERS.map((name) => (
-                                <Select.Item key={name} value={name}>
-                                  {name}
-                                </Select.Item>
-                              ))}
-                            </Select.Content>
-                          </Select.Root>
-                          <Textarea.Root name="note" label="Комментарий" optional rows={2} />
-                          <Checkbox.Root
-                            name="invite"
-                            defaultChecked
-                            hint="Клиент увидит свои счета и акты онлайн"
-                          >
-                            <Checkbox.Label>Пригласить в личный кабинет</Checkbox.Label>
-                          </Checkbox.Root>
-                        </Fieldset>
-                      </form>
-                    </Drawer.Body>
-                    <Drawer.Footer>
-                      <Drawer.Close>
-                        <Button.Root variant="outline" tone="neutral">
-                          Отмена
-                        </Button.Root>
-                      </Drawer.Close>
-                      <Button.Root type="submit" form={formId} loading={saving}>
-                        Добавить клиента
-                      </Button.Root>
-                    </Drawer.Footer>
-                  </Drawer.Content>
-                </Drawer.Root>
-              </PageToolbar.Actions>
-            </PageToolbar.Root>
-          </SmartFilter.Root>
-        </AppHeader.Tools>
-      </AppHeader.Root>
-
-      <PageContent.Root>
-        <PageContent.Body>
+                        <Radio.Root value="company">
+                          <Radio.Label>Компания</Radio.Label>
+                        </Radio.Root>
+                        <Radio.Root value="person">
+                          <Radio.Label>ИП</Radio.Label>
+                        </Radio.Root>
+                      </Radio.Group>
+                      <Input.Root label="Название" error={errors.name}>
+                        <Input.Wrapper>
+                          <Input.Field
+                            name="name"
+                            placeholder="ООО «Ромашка»"
+                            autoComplete="organization"
+                          />
+                        </Input.Wrapper>
+                      </Input.Root>
+                      <div className={styles.pair}>
+                        <Input.Root label="ИНН" error={errors.inn} reserveSupportRow>
+                          <Input.Wrapper>
+                            <Input.Field name="inn" inputMode="numeric" placeholder="7704512908" />
+                          </Input.Wrapper>
+                        </Input.Root>
+                        <Input.Root label="КПП" optional reserveSupportRow>
+                          <Input.Wrapper>
+                            <Input.Field name="kpp" inputMode="numeric" placeholder="770401001" />
+                          </Input.Wrapper>
+                        </Input.Root>
+                      </div>
+                    </Fieldset>
+                    <Fieldset label="Контакты" disabled={saving}>
+                      <Input.Root
+                        label="Почта для счетов"
+                        error={errors.email}
+                        hint="На неё уйдут счета и акты"
+                      >
+                        <Input.Wrapper>
+                          <Input.Icon side="start">
+                            <Icon name="field.email" />
+                          </Input.Icon>
+                          <Input.Field name="email" type="email" placeholder="billing@company.ru" />
+                        </Input.Wrapper>
+                      </Input.Root>
+                      <Select.Root
+                        label="Менеджер"
+                        value={manager}
+                        onValueChange={(next) => {
+                          setManager(next);
+                          setDirty(true);
+                        }}
+                      >
+                        <Select.Trigger>
+                          <Select.Value />
+                        </Select.Trigger>
+                        <Select.Content>
+                          {MANAGERS.map((name) => (
+                            <Select.Item key={name} value={name}>
+                              {name}
+                            </Select.Item>
+                          ))}
+                        </Select.Content>
+                      </Select.Root>
+                      <Textarea.Root name="note" label="Комментарий" optional rows={2} />
+                      <Checkbox.Root
+                        name="invite"
+                        defaultChecked
+                        hint="Клиент увидит свои счета и акты онлайн"
+                      >
+                        <Checkbox.Label>Пригласить в личный кабинет</Checkbox.Label>
+                      </Checkbox.Root>
+                    </Fieldset>
+                  </form>
+                </Drawer.Body>
+                <Drawer.Footer>
+                  <Drawer.Close>
+                    <Button.Root variant="outline" tone="neutral">
+                      Отмена
+                    </Button.Root>
+                  </Drawer.Close>
+                  <Button.Root type="submit" form={formId} loading={saving}>
+                    Добавить клиента
+                  </Button.Root>
+                </Drawer.Footer>
+              </Drawer.Content>
+            </Drawer.Root>
+          </Page.Actions>
+        </Page.TopBar>
+        <Page.Body>
           <DataTable
             columns={COLUMNS}
             rows={shown}
@@ -291,8 +268,8 @@ export default function DrawerScreenExample() {
             paging="none"
             empty="Клиентов не найдено"
           />
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+        </Page.Body>
+      </Page.Root>
+    </SmartFilter.Root>
   );
 }

package/src/components/dropdown/COMPONENT.md

@@ -7,7 +7,7 @@
 
 ## When to use
 - Secondary actions of a card, row or document behind a «⋯» or labelled button.
-- An account / user menu in the app header.
+- An account / user menu behind the Sidebar account row (`Sidebar.Account`).
 - A short list of commands (export formats, move to project) where picking one runs an action.
 
 ## When not to use

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

@@ -57,11 +57,11 @@ ExampleFrame               frame: toolbar + the pane (a region swap between prev
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `default` | single block centered in the stage | one component | yes |
-| `stack` | centered column, gap 16, children capped at the stack measure (`10 × --prime-space-16`) so `width: 100%` blocks stay centered; a child with `fullWidth` or a table stretches | several blocks one under another | |
-| `stack-narrow` | column, children capped at `7 × --prime-space-16` and centered | forms and narrow columns | |
+| `stack` | centered column, gap 16, children capped at the stack measure (`10 × --prime-space-16`) so `width: 100%` blocks stay centered; a child with `fullWidth` or a table stretches, never past the stage, and a horizontal separator beside it stretches with it | several blocks one under another | |
+| `stack-narrow` | column, children capped at `7 × --prime-space-16` and centered, full width unless a child sets its own (a cascade-layer default, so a fit-content SegmentedControl keeps hugging its segments); a child with a table may take the stage | forms and narrow columns | |
 | `full` | column, gap 16, every child takes the whole stage width | page structure: app shells, page regions | |
 | `row` | centered wrapping row, gap 12, extra vertical padding | a few buttons or controls side by side | |
-| `matrix` | centered grid of labelled cells: each direct child is a row, its children are cells (specimen above its caption); columns (up to 12) line up across rows, are never narrower than their content and grow to 320 / 160 / 128px for 1 / 2 / 3+ columns, so width-less specimens (Slider, `width: 100%` blocks) get a real cell; centered vertically too; when the grid is wider than the stage (a phone frame) each row wraps its cells, centered (`data-matrix-wrap` on the stage) | variant, size and state matrices | |
+| `matrix` | centered grid of labelled cells: each direct child is a row, its children are cells (specimen above its caption); columns (up to 12) line up across rows, are never narrower than their content and grow to 320 / 160 / 128px for 1 / 2 / 3+ columns, so width-less specimens (Slider, `width: 100%` blocks) get a real cell; centered vertically too; when the grid is wider than the stage (a phone frame) each row wraps its cells, centered (`data-matrix-wrap` on the stage), and a one-column matrix keeps its cells at the one-column measure (or the stage, when narrower) | variant, size and state matrices | |
 | `matrix-wide` | the same rows of labelled cells, one cell under another, each as wide as the stage up to the stack measure (`10 × --prime-space-16`), the caption under the specimen | matrices of specimens as wide as their container: tabs, toolbars, tables | |
 
 ### viewport

package/src/components/field-list/examples/screen.module.css

@@ -1,4 +1,4 @@
-/* Record editor: the sections are PageContent.Section layout="aside"; here only the panels' insides. */
+/* Record editor: the sections are Page.Section layout="aside"; here only the panels' insides. */
 
 /* Two groups in one panel, a group apart. */
 .groups {

package/src/components/field-list/examples/screen.tsx

@@ -9,7 +9,7 @@ import {
   Icon,
   type IconName,
   Input,
-  PageContent,
+  Page,
   Select,
   Textarea,
 } from "prime-ui-kit";
@@ -121,20 +121,20 @@ export default function FieldListScreenExample() {
   };
 
   return (
-    <PageContent.Root maxWidth="wide" aria-labelledby="plan-title">
-      <PageContent.Header>
-        <PageContent.Title id="plan-title">Тариф «Команда»</PageContent.Title>
-        <PageContent.Description>
-          Так тариф выглядит на странице цен и в счетах.
-        </PageContent.Description>
-        <PageContent.Actions>
+    <Page.Root maxWidth="wide" aria-labelledby="plan-title">
+      <Page.Header>
+        <Page.Heading>
+          <Page.Title id="plan-title">Тариф «Команда»</Page.Title>
+          <Page.Description>Так тариф выглядит на странице цен и в счетах.</Page.Description>
+        </Page.Heading>
+        <Page.Actions>
           <Button.Root type="submit" form={formId} loading={saving}>
             {saved ? "Сохранено" : "Сохранить тариф"}
           </Button.Root>
-        </PageContent.Actions>
-      </PageContent.Header>
-      <PageContent.Body>
-        <PageContent.Section layout="aside" label="Основное">
+        </Page.Actions>
+      </Page.Header>
+      <Page.Body>
+        <Page.Section layout="aside" label="Основное">
           <form id={formId} noValidate onSubmit={save}>
             <Card.Root variant="panel">
               <Card.Body>
@@ -155,9 +155,9 @@ export default function FieldListScreenExample() {
               </Card.Body>
             </Card.Root>
           </form>
-        </PageContent.Section>
+        </Page.Section>
 
-        <PageContent.Section layout="aside" label="Характеристики">
+        <Page.Section layout="aside" label="Характеристики">
           <Card.Root variant="panel">
             <Card.Body>
               <FieldList
@@ -230,9 +230,9 @@ export default function FieldListScreenExample() {
               />
             </Card.Body>
           </Card.Root>
-        </PageContent.Section>
+        </Page.Section>
 
-        <PageContent.Section layout="aside" label="Стоимость">
+        <Page.Section layout="aside" label="Стоимость">
           <Card.Root variant="panel">
             <Card.Body className={styles.groups}>
               <Fieldset label="За месяц" disabled={saving}>
@@ -309,8 +309,8 @@ export default function FieldListScreenExample() {
               </Fieldset>
             </Card.Body>
           </Card.Root>
-        </PageContent.Section>
-      </PageContent.Body>
-    </PageContent.Root>
+        </Page.Section>
+      </Page.Body>
+    </Page.Root>
   );
 }

package/src/components/fieldset/COMPONENT.md

@@ -14,7 +14,7 @@
 ## When not to use
 - One choice among options with a heading → [Radio](../radio/COMPONENT.md) `Radio.Group label`, a [SegmentedControl](../segmented-control/COMPONENT.md) or [ButtonGroup](../button-group/COMPONENT.md) `label`.
 - A bounded block with a surface (a settings panel) → [Card](../card/COMPONENT.md) `Card.Root`; a Fieldset inside it groups the fields.
-- A page section with a title and actions → [PageContent](../page-content/COMPONENT.md) sections.
+- A page section with a title and actions → [Page](../../layout/page/COMPONENT.md) sections (`Page.Section`).
 - A group of settings with a title and a trailing control (a «Сбросить» button, a master switch) → `Card.Root variant="panel"` with `Card.Header` (`Card.Title` + the control) and the Fieldset in `Card.Body`, named by the title (`aria-labelledby`).
 - A single field's label → the field's own `label`.
 

package/src/components/fieldset/examples/states.tsx

@@ -14,7 +14,7 @@ export default function FieldsetStatesExample() {
           <Fieldset label="Сделка" disabled={state.disabled}>
             <Input.Root label="Название">
               <Input.Wrapper>
-                <Input.Field defaultValue="Годовая лицензия, 40 мест" />
+                <Input.Field defaultValue="Лицензия, 40 мест" />
               </Input.Wrapper>
             </Input.Root>
             <SegmentedControl.Root label="Тип" defaultValue="new">

package/src/components/file-upload/COMPONENT.md

@@ -424,7 +424,7 @@ Also `data-size`, `data-variant` on the zone, `data-size` on Item, `data-status`
 | [controlled.tsx](examples/controlled.tsx) | Documents of a deal in one list: the files already on the server and new uploads after them, saved on every change, and a button brings back the saved set — `value`, `onValueChange`, `queue`. |
 | [in-form.tsx](examples/in-form.tsx) | A contract upload form: submit checks the required scan, its error shakes in and leaves once a file is picked or removed — `required`, `error`, `name`, `value`. |
 | [narrow.tsx](examples/narrow.tsx) | In a phone-width column the zone text wraps, a long file name truncates, and a gallery goes three across and then two, the cover keeping two columns and the remove buttons shown without hover — `layout`, `cover`. |
-| [screen.tsx](examples/screen.tsx) | A media library of a catalog object as a work screen: the title, the object and a PageToolbar with sections, search, order and upload in the app header; uploads in FileUpload tiles through a queue; a grid of Thumbnails that open MediaViewer out of the tile or are picked for bulk download and delete; a Skeleton first load and a filtered empty state in a Crossfade — `trigger`, `layout`. |
+| [screen.tsx](examples/screen.tsx) | A media library of a catalog object as a work screen: the title, the object and a toolbar with sections, search, order and upload in its top bar; uploads in FileUpload tiles through a queue; a grid of Thumbnails that open MediaViewer out of the tile or are picked for bulk download and delete; a Skeleton first load and a filtered empty state in a Crossfade — `trigger`, `layout`. |
 
 ## Mistakes
 - A `Label` and a `Hint` placed around the zone by hand → pass `label`, `hint`, `error`.

package/src/components/file-upload/examples/screen.module.css

@@ -1,5 +1,5 @@
-/* Media library: a work screen — the app header carries the title and the tools; this module lays
-   out the library block only, the page rhythm comes from PageContent. */
+/* Media library: a work screen — the page top bar carries the title and the tools; this module lays
+   out the library block only, the page rhythm comes from Page. */
 
 .bar {
   display: flex;