prime-ui-kit 0.14.0 → 0.15.0

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

@@ -0,0 +1,298 @@
+/** 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`. */
+import {
+  AppHeader,
+  Badge,
+  Button,
+  Checkbox,
+  DataTable,
+  type DataTableColumn,
+  Drawer,
+  Fieldset,
+  Icon,
+  Input,
+  PageContent,
+  PageToolbar,
+  Radio,
+  Select,
+  SmartFilter,
+  Textarea,
+  useNotifications,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./screen.module.css";
+
+type Client = { id: string; name: string; kind: "company" | "person"; manager: string };
+type Errors = Partial<Record<"name" | "inn" | "email", string>>;
+
+const MANAGERS = ["Анна Климова", "Илья Петров", "Марат Хасанов"];
+
+const CLIENTS: Client[] = [
+  { id: "c1", name: "ООО «Северный ветер»", kind: "company", manager: "Анна Климова" },
+  { id: "c2", name: "АО «Техностиль»", kind: "company", manager: "Илья Петров" },
+  { id: "c3", name: "ИП Соколова М. А.", kind: "person", manager: "Анна Климова" },
+];
+
+const COLUMNS: DataTableColumn<Client>[] = [
+  { id: "name", header: "Клиент", accessor: "name" },
+  {
+    id: "kind",
+    header: "Тип",
+    cell: (row) =>
+      row.kind === "company" ? (
+        <Badge.Root color="blue">Компания</Badge.Root>
+      ) : (
+        <Badge.Root color="purple">ИП</Badge.Root>
+      ),
+  },
+  { id: "manager", header: "Менеджер", accessor: "manager" },
+];
+
+const CLIENT_WORDS = ["клиент", "клиента", "клиентов"] as const;
+const COMPANY_WORDS = ["компания", "компании", "компаний"] as const;
+
+/** «1 клиент», «3 клиента», «5 клиентов». */
+const plural = (count: number, [one, few, many]: readonly [string, string, string]) => {
+  const tens = count % 100;
+  const ones = count % 10;
+  if (tens >= 11 && tens <= 14) return `${count} ${many}`;
+  if (ones === 1) return `${count} ${one}`;
+  if (ones >= 2 && ones <= 4) return `${count} ${few}`;
+  return `${count} ${many}`;
+};
+
+function validate(data: FormData): Errors {
+  const errors: Errors = {};
+  const name = String(data.get("name") ?? "").trim();
+  const inn = String(data.get("inn") ?? "").replace(/\s/g, "");
+  const email = String(data.get("email") ?? "").trim();
+  if (!name) errors.name = "Введите название клиента";
+  if (!/^\d{10}(\d{2})?$/.test(inn)) errors.inn = "ИНН — 10 цифр для компании или 12 для ИП";
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
+    errors.email = "Введите почту в формате name@company.ru";
+  return errors;
+}
+
+export default function DrawerScreenExample() {
+  const { notify } = useNotifications();
+  const formId = React.useId();
+  const [clients, setClients] = React.useState(CLIENTS);
+  const [open, setOpen] = React.useState(false);
+  const [errors, setErrors] = React.useState<Errors>({});
+  const [saving, setSaving] = React.useState(false);
+  const [dirty, setDirty] = React.useState(false);
+  const [manager, setManager] = React.useState(MANAGERS[0]);
+  const [search, setSearch] = React.useState("");
+
+  // Drawer.Guard holds every way out while saving and asks before an edited form is discarded.
+  const changeOpen = (next: boolean) => {
+    setOpen(next);
+    if (!next) {
+      setErrors({});
+      setDirty(false);
+    }
+  };
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const data = new FormData(form);
+    const found = validate(data);
+    setErrors(found);
+    const firstInvalid = (["name", "inn", "email"] as const).find((key) => found[key]);
+    if (firstInvalid) {
+      form.querySelector<HTMLInputElement>(`[name="${firstInvalid}"]`)?.focus();
+      return;
+    }
+    setSaving(true);
+    window.setTimeout(() => {
+      const name = String(data.get("name")).trim();
+      setClients((list) => [
+        {
+          id: `c${list.length + 1}`,
+          name,
+          kind: data.get("kind") === "person" ? "person" : "company",
+          manager,
+        },
+        ...list,
+      ]);
+      setSaving(false);
+      setDirty(false);
+      setOpen(false);
+      notify({ tone: "success", title: "Клиент добавлен", description: name });
+    }, 900);
+  };
+
+  const query = search.trim().toLowerCase();
+  const shown = clients.filter((client) => client.name.toLowerCase().includes(query));
+  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>
+              {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)}
+                      >
+                        <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>
+          <DataTable
+            columns={COLUMNS}
+            rows={shown}
+            getRowKey={(row) => row.id}
+            paging="none"
+            empty="Клиентов не найдено"
+          />
+        </PageContent.Body>
+      </PageContent.Root>
+    </>
+  );
+}

package/dist/skill/reference/components/dropdown/examples/examples.module.css

@@ -8,15 +8,11 @@
   max-width: calc(var(--prime-space-24) * 3);
 }
 
-/* overview.tsx: a list row — the record on the left, its actions button at the end. */
+/* overview.tsx: the record on the left, its actions button at the end. */
 .row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--prime-space-4);
   width: min(100%, calc(var(--prime-space-24) * 4));
-  padding-block: var(--prime-space-1);
-  padding-inline: var(--prime-space-4) var(--prime-space-1);
-  border-radius: var(--prime-radius-l);
-  background: var(--prime-color-layer-nested);
 }

package/dist/skill/reference/components/empty-page/COMPONENT.md

@@ -148,7 +148,7 @@ EmptyPage.Root               centered column; size, layout, tone (role="alert" w
 | [variants.tsx](examples/variants.tsx) | The tone tells why the area is empty: no data yet, a first run, or a failed load with a retry — `tone`, `EmptyPage.RetryButton`. |
 | [sizes.tsx](examples/sizes.tsx) | Every tier changes the icon tile, the title and the padding; buttons in Actions take the same size — `size`. |
 | [data-region.tsx](examples/data-region.tsx) | An empty data region: the empty state stretches over the rest of a card with a header — `layout`. |
-| [region-error.tsx](examples/region-error.tsx) | A data region that failed to load: the error state takes the region, the retry shows its loading until the data cross-fades in — `tone`, `layout`, `EmptyPage.RetryButton`, `onRetry`. |
+| [region-error.tsx](examples/region-error.tsx) | A data region that failed to load: the error state takes the region, the retry shows its loading until the data cross-fades in; its text comes from labels — `tone`, `layout`, `EmptyPage.RetryButton`, `onRetry`, `labels`. |
 | [compact.tsx](examples/compact.tsx) | The quiet empty state of a search panel: no entrance motion, smaller text, a paragraph title, one action — `layout`, `as`. |
 | [narrow.tsx](examples/narrow.tsx) | In a 320 px side panel the text wraps under the tile and the actions wrap to a second line. |
 

package/dist/skill/reference/components/empty-page/examples/region-error.tsx

@@ -1,4 +1,4 @@
-/** A data region that failed to load: the error state takes the region, the retry shows its loading until the data cross-fades in — `tone`, `layout`, `EmptyPage.RetryButton`, `onRetry`. */
+/** A data region that failed to load: the error state takes the region, the retry shows its loading until the data cross-fades in; its text comes from labels — `tone`, `layout`, `EmptyPage.RetryButton`, `onRetry`, `labels`. */
 import { Button, Card, Crossfade, EmptyPage, Icon, Skeleton, Typography } from "prime-ui-kit";
 import * as React from "react";
 
@@ -53,7 +53,13 @@ export default function EmptyPageRegionErrorExample() {
           {state === "loading" ? (
             <Skeleton lines={3} />
           ) : state === "error" ? (
-            <EmptyPage.Root layout="fill" size="s" tone="danger" aria-labelledby="invoices-error">
+            <EmptyPage.Root
+              layout="fill"
+              size="s"
+              tone="danger"
+              labels={{ retry: "Загрузить снова" }}
+              aria-labelledby="invoices-error"
+            >
               <EmptyPage.Icon>
                 <Icon name="status.offline" />
               </EmptyPage.Icon>

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

@@ -59,7 +59,7 @@ ExampleFrame               frame: toolbar + preview stage or code pane
 | `stack-narrow` | column, children capped at `7 × --prime-space-16` and centered | 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; scrolls when wider than 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) | variant, size and state matrices | |
 
 ### viewport
 | Value | Looks like | Use when | Default |
@@ -87,7 +87,7 @@ Frame look: the chrome is a layer of the surface ladder (`data-depth`, one above
 
 ## Layout & spacing
 - The frame is `max-width: 100%`; long code lines scroll inside the code pane instead of widening the page. The code pane is at most `min(512px, 70vh)` high and scrolls both ways.
-- The stage is at least 160 high with `--prime-space-6` / `--prime-space-4` padding; content wider than it is clipped (`matrix` scrolls instead).
+- The stage is at least 160 high with `--prime-space-6` / `--prime-space-4` padding; content wider than it is clipped (`matrix` wraps its rows instead).
 - The toolbar wraps below 40rem of frame width; below 25rem the visible device labels are hidden (icons stay, each option keeps a screen-reader name).
 - The device width switches at once: `max-width` is layout, so it does not animate.
 - Stack frames one per demo block; spacing between blocks comes from the page.
@@ -128,6 +128,7 @@ Frame look: the chrome is a layer of the surface ladder (`data-depth`, one above
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A live example next to its source, with the pane, width, theme and copy controls — `code`, `previewLayout`. |
+| [initial-view.tsx](examples/initial-view.tsx) | A matrix frame that opens at phone width in the dark theme with no theme switch and counts code copies — `previewLayout`, `defaultViewport`, `defaultColorScheme`, `showThemeToggle`, `onCopy`. |
 | [controlled.tsx](examples/controlled.tsx) | Frames of one page share the preview width and theme: the parent owns both — `viewport`, `colorScheme`. |
 
 ## Mistakes

package/dist/skill/reference/components/example-frame/examples/initial-view.tsx

@@ -0,0 +1,44 @@
+/** A matrix frame that opens at phone width in the dark theme with no theme switch and counts code copies — `previewLayout`, `defaultViewport`, `defaultColorScheme`, `showThemeToggle`, `onCopy`. */
+import { Badge, ExampleFrame, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+const STATUSES = [
+  { color: "gray", label: "Черновик" },
+  { color: "blue", label: "На ревью" },
+  { color: "green", label: "Опубликован" },
+] as const;
+
+const CODE = STATUSES.map(
+  ({ color, label }) => `<Badge.Root color="${color}">${label}</Badge.Root>`,
+).join("\n");
+
+export default function ExampleFrameInitialViewExample() {
+  const [copies, setCopies] = React.useState(0);
+
+  return (
+    <>
+      <ExampleFrame
+        code={CODE}
+        previewLayout="matrix"
+        defaultViewport="mobile"
+        defaultColorScheme="dark"
+        showThemeToggle={false}
+        onCopy={() => setCopies((count) => count + 1)}
+      >
+        <div>
+          {STATUSES.map(({ color, label }) => (
+            <div key={color}>
+              <Badge.Root color={color}>{label}</Badge.Root>
+              <Typography as="span" variant="caption" tone="muted">
+                {color}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      </ExampleFrame>
+      <Typography variant="body-s" tone="secondary">
+        Код скопирован: {copies}
+      </Typography>
+    </>
+  );
+}

package/dist/skill/reference/components/field-list/COMPONENT.md

@@ -144,10 +144,11 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 | [locked.tsx](examples/locked.tsx) | Specs of a plan on one line each: an icon picker and a color swatch take compact columns, the first three specs are pinned with a lock and the rest reorder below them — `getLocked`, `width`, `reorderable`. |
 | [base-row.tsx](examples/base-row.tsx) | A plan price and its changes by month in one table: the base price is the first, pinned row, each change is a row with its month and its price, and the unit sits in the field, not in a heading — `getLocked`, `width`. |
 | [limits.tsx](examples/limits.tsx) | Recipients of invoice reminders, from one to three: the last row cannot be removed and the add button says why it is off once the list is full — `min`, `max`, `hint`. |
-| [errors.tsx](examples/errors.tsx) | Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field — `error`. |
+| [errors.tsx](examples/errors.tsx) | Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field; a `*` after a heading marks a required column — `error`, `required`. |
 | [states.tsx](examples/states.tsx) | The same list editable and disabled while the request saves it: fields, handles and buttons turn off together — `disabled`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the lines: it sums them under the list and puts the saved lines back on reset — `value`, `onValueChange`. |
 | [narrow.tsx](examples/narrow.tsx) | The invoice lines in a 320 px column: the headings give way, each row stacks its fields with their own labels and rows stand a group apart — `columns`. |
+| [screen.tsx](examples/screen.tsx) | A record editor as a document page, a long form whose title, description and save stand in the content header: a plan's name, its specs and prices in one form; repeating records as FieldList rows with the headings once, a base price pinned above its changes, one value in three currencies in one row — `getLocked`, `compact`. |
 
 ## Mistakes
 - A `label` above every field of every row («Иконка», «Параметр», «Значение» four times) → a FieldList: the headings stand once, the fields take them as hidden labels.

package/dist/skill/reference/components/field-list/examples/errors.tsx

@@ -1,4 +1,4 @@
-/** Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field — `error`. */
+/** Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field; a `*` after a heading marks a required column — `error`, `required`. */
 import { Button, FieldList, type FieldListColumn, Input } from "prime-ui-kit";
 import * as React from "react";
 
@@ -6,7 +6,10 @@ import styles from "./examples.module.css";
 
 type Contact = { id: string; role: string; phone: string };
 
-const COLUMNS: FieldListColumn[] = [{ label: "Должность" }, { label: "Телефон", width: "m" }];
+const COLUMNS: FieldListColumn[] = [
+  { label: "Должность", required: true },
+  { label: "Телефон", width: "m", required: true },
+];
 
 const CONTACTS: Contact[] = [
   { id: "buyer", role: "Закупщик", phone: "+7 912 404-18-20" },

package/dist/skill/{patterns/record-editor.tsx → reference/components/field-list/examples/screen.tsx}

@@ -1,4 +1,4 @@
-/** A record editor: a plan's name, its specs, selling points and prices in one form — repeating records as FieldList rows with the headings once, a base price pinned above its changes, one value in three currencies in one row. */
+/** A record editor as a document page, a long form whose title, description and save stand in the content header: a plan's name, its specs and prices in one form; repeating records as FieldList rows with the headings once, a base price pinned above its changes, one value in three currencies in one row — `getLocked`, `compact`. */
 import {
   Button,
   Card,
@@ -15,7 +15,7 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./record-editor.module.css";
+import styles from "./screen.module.css";
 
 type Spec = {
   id: string;
@@ -25,7 +25,6 @@ type Spec = {
   color: string;
   pinned?: boolean;
 };
-type Point = { id: string; text: string };
 type Period = { id: string; from: string; price: string; base?: boolean };
 
 const SPEC_COLUMNS: FieldListColumn[] = [
@@ -73,14 +72,6 @@ const SPECS: Spec[] = [
   { id: "sso", icon: "object.key", name: "Вход через SSO", value: "SAML, OIDC", color: "#14b8a6" },
 ];
 
-const POINT_COLUMNS: FieldListColumn[] = [{ label: "Преимущество" }];
-
-const POINTS: Point[] = [
-  { id: "space", text: "Вся команда в одном пространстве" },
-  { id: "files", text: "Документы и вложения без ограничений по типу" },
-  { id: "api", text: "API и вебхуки для своих интеграций" },
-];
-
 const PRICE_COLUMNS: FieldListColumn[] = [{ label: "Действует" }, { label: "Цена", width: "m" }];
 
 const MONTHS = [
@@ -104,10 +95,9 @@ const SETUP_FEE = [
 const SAVE_MS = 900;
 const SAVED_MS = 2000;
 
-export default function RecordEditorPattern() {
+export default function FieldListScreenExample() {
   const formId = React.useId();
   const [specs, setSpecs] = React.useState(SPECS);
-  const [points, setPoints] = React.useState(POINTS);
   const [periods, setPeriods] = React.useState(PERIODS);
   const [nameError, setNameError] = React.useState<string>();
   const [saving, setSaving] = React.useState(false);
@@ -242,36 +232,6 @@ export default function RecordEditorPattern() {
           </Card.Root>
         </PageContent.Section>
 
-        <PageContent.Section layout="aside" label="Преимущества">
-          <Card.Root variant="panel">
-            <Card.Body>
-              <FieldList
-                aria-label="Преимущества"
-                disabled={saving}
-                columns={POINT_COLUMNS}
-                reorderable
-                max={6}
-                value={points}
-                onValueChange={setPoints}
-                getId={(point) => point.id}
-                getLabel={(point) => point.text}
-                createItem={() => ({ id: crypto.randomUUID(), text: "" })}
-                addLabel="Добавить преимущество"
-                renderItem={(point, row) => (
-                  <Input.Root>
-                    <Input.Wrapper>
-                      <Input.Field
-                        value={point.text}
-                        onChange={(event) => row.update({ text: event.target.value })}
-                      />
-                    </Input.Wrapper>
-                  </Input.Root>
-                )}
-              />
-            </Card.Body>
-          </Card.Root>
-        </PageContent.Section>
-
         <PageContent.Section layout="aside" label="Стоимость">
           <Card.Root variant="panel">
             <Card.Body className={styles.groups}>

package/dist/skill/reference/components/file-upload/COMPONENT.md

@@ -288,7 +288,7 @@ A rejection of `upload` fails the file with its message as the reason; retry que
 | disabled | `disabled` | `data-disabled="true"`, disabled input, disabled fill and text, drops ignored; no add tile, actions or drag; a disabled button with `trigger="button"` |
 | empty | no files, `trigger="tile"` | the add tile spans the row with «Нажмите или перетащите файлы» |
 | cover | `cover`, the first tile | «Обложка» in place of the format pill, `data-cover` on the tiles wrapper (the first tile takes a 2 × 2 cell in a grid) |
-| full | the set reaches `max` | `data-full` on the add tile: «Лимит файлов», faded, the file input disabled |
+| full | the set reaches `max` | `data-full` on the add tile: «Лимит файлов», faded; the file input is `aria-disabled` and opens no picker, so the field label stays undimmed |
 | queued | queue item `status: "queued"` | a row reads «size · В очереди» over an empty bar; a tile (`data-upload="queued"`) dims under a 40px disk on the `media` shade (Button `shape="circle"` `variant="shade"`) whose ring turns at its least arc, described by «В очереди» |
 | loading | `status: "loading"` | a row reads «size · Загрузка 40%» and its bar fills (`accent`); a tile's white arc grows clockwise from 12 o'clock with the share sent (the `progress` ring of a shade circle Button, one variable `--ring-value`, gliding `base` while it turns); the disk is the remove («Отменить загрузку: name», described by the state), the corner × is not drawn; the tile still reorders, its carried copy keeps the disk |
 | done | `status: "done"` | a row reads «size» over a full `success` bar; a tile's ring fills, then its disk fades and shrinks to 0.9 (`fast`, `inert`), the picture returns to full or the sheet comes back |
@@ -372,20 +372,21 @@ Also `data-size`, `data-variant` on the zone, `data-size` on Item, `data-status`
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Documents of a deal: a drop zone, the files already attached as rows whose names open them, and new files uploading through a queue with progress, a reason and a retry — `label`, `hint`, `multiple`, `defaultValue`, `href`, `queue`. |
-| [variants.tsx](examples/variants.tsx) | How files are added: the dashed drop zone, the zone with only its fill for cards and modals, the compact picker button and the add tile after the files — `variant`, `trigger`. |
+| [variants.tsx](examples/variants.tsx) | How files are added: the dashed drop zone, the zone with only its fill for cards and modals, the compact picker button and the add tile that starts an empty set of tiles — `variant`, `trigger`. |
 | [sizes.tsx](examples/sizes.tsx) | Every tier of the zone and of its file rows: padding, icon, button, text and the format badge follow it — `size`. |
 | [states.tsx](examples/states.tsx) | A default zone, a disabled one whose files are read-only and an invalid one without a message — `disabled`, `invalid`. |
 | [validation.tsx](examples/validation.tsx) | A required scan checked as soon as it is picked: a wrong type or a large file shakes in an error that leaves when the file is removed; a hint and an optional zone — `required`, `hint`, `error`, `optional`. |
-| [gallery.tsx](examples/gallery.tsx) | An image gallery of an office listing: the first photo is the cover on two tiles and a photo dragged first takes its place, new photos upload in their tiles, and the add tile counts up to the limit — `trigger`, `layout`, `cover`, `max`, `value`, `queue`. |
-| [file-cards.tsx](examples/file-cards.tsx) | Materials of a warehouse inspection as cards: photos and documents in one grid, each with its picture or format and the name with the size; new files upload in their cards and the order is set by drag or Alt + arrows — `trigger`, `layout`, `defaultValue`, `queue`. |
+| [gallery.tsx](examples/gallery.tsx) | An image gallery of an office listing: the first photo is the cover on two tiles and a photo dragged first takes its place, new photos upload in their tiles, one fails and retries, and the add tile counts up to the limit and then says so — `trigger`, `layout`, `cover`, `max`, `value`, `queue`. |
+| [file-cards.tsx](examples/file-cards.tsx) | Materials of a warehouse inspection as cards: photos and documents in one grid, each with its picture or format and the name with the size in megabytes as the report gives it; new files upload in their cards and the order is set by drag or Alt + arrows — `trigger`, `layout`, `defaultValue`, `queue`, `formatSize`. |
 | [attachment-tray.tsx](examples/attachment-tray.tsx) | A reply to a client with a paperclip instead of a drop zone: the icon-only picker button, and the attachments as one scrolling row of tiles above the message — `trigger`, `aria-label`, `FileUpload.Queue`, `layout`. |
 | [saving.tsx](examples/saving.tsx) | Published listing photos with no picker, every change saved on the server: a moved or removed photo waits busy, and a change the server refuses puts the set back — `FileUpload.Queue`, `onValueChange`, `value`, `cover`. |
-| [custom-body.tsx](examples/custom-body.tsx) | A custom body: a muted title with a browse link and source buttons instead of the built-in one — `FileUpload.Body`, `FileUpload.Title`. |
+| [custom-body.tsx](examples/custom-body.tsx) | A custom body: a muted title with a browse link and the formats line and source buttons instead of the built-in one — `FileUpload.Body`, `FileUpload.Title`, `FileUpload.Description`. |
 | [avatar-upload.tsx](examples/avatar-upload.tsx) | A round zone around an Avatar that takes images and shows a preview; buttons open the same input — `inputRef`, `accept`, `className`. |
-| [row-parts.tsx](examples/row-parts.tsx) | Rows the set does not draw, built from parts: order documents with a download button, a photo with its preview and a report still being prepared — `FileUpload.Item`, `FileUpload.FormatBadge`, `FileUpload.ItemPreview`, `FileUpload.ItemActions`, `FileUpload.ItemProgress`. |
+| [row-parts.tsx](examples/row-parts.tsx) | Rows the set does not draw, built from parts: order documents with a download button, a photo with its preview, a report still being prepared and one that failed with a retry — `FileUpload.Item`, `FileUpload.FormatBadge`, `FileUpload.ItemPreview`, `FileUpload.ItemActions`, `FileUpload.ItemProgress`, `invalid`, `tone`. |
 | [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. |
+| [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`. |
 
 ## Mistakes
 - A `Label` and a `Hint` placed around the zone by hand → pass `label`, `hint`, `error`.

package/dist/skill/reference/components/file-upload/examples/custom-body.tsx

@@ -1,4 +1,4 @@
-/** A custom body: a muted title with a browse link and source buttons instead of the built-in one — `FileUpload.Body`, `FileUpload.Title`. */
+/** A custom body: a muted title with a browse link and the formats line and source buttons instead of the built-in one — `FileUpload.Body`, `FileUpload.Title`, `FileUpload.Description`. */
 import { Button, FileUpload, Icon, LinkButton } from "prime-ui-kit";
 import * as React from "react";
 
@@ -23,6 +23,7 @@ export default function FileUploadCustomBodyExample() {
               </button>
             </LinkButton>
           </FileUpload.Title>
+          <FileUpload.Description>PDF, JPG или PNG до 20 МБ</FileUpload.Description>
           <div className={styles.sources}>
             <Button.Root variant="soft" tone="neutral" size="s" onClick={openPicker}>
               <Button.Icon>

package/dist/skill/reference/components/file-upload/examples/examples.module.css

@@ -28,7 +28,7 @@
   flex: 1;
 }
 
-/* in-form.tsx: header → field 32 → actions 32 (foundation §1). */
+/* in-form.tsx: field → actions 32 (foundation §1). */
 .form {
   display: flex;
   flex-direction: column;
@@ -36,12 +36,6 @@
   width: min(100%, var(--prime-modal-width-s));
 }
 
-.formHeader {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-1);
-}
-
 .formActions {
   display: flex;
   justify-content: flex-end;

package/dist/skill/reference/components/file-upload/examples/file-cards.tsx

@@ -1,4 +1,4 @@
-/** Materials of a warehouse inspection as cards: photos and documents in one grid, each with its picture or format and the name with the size; new files upload in their cards and the order is set by drag or Alt + arrows — `trigger`, `layout`, `defaultValue`, `queue`. */
+/** Materials of a warehouse inspection as cards: photos and documents in one grid, each with its picture or format and the name with the size in megabytes as the report gives it; new files upload in their cards and the order is set by drag or Alt + arrows — `trigger`, `layout`, `defaultValue`, `queue`, `formatSize`. */
 import { FileUpload, type FileUploadFile, type UploadContext, useUploadQueue } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -27,6 +27,14 @@ const MATERIALS: readonly FileUploadFile[] = [
   { id: "insp-stock", name: "Остатки на 12 марта.xlsx", size: 96_000 },
 ];
 
+/** Sizes as the inspection report gives them: megabytes with two decimals. */
+const MEGABYTES = new Intl.NumberFormat("ru-RU", {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+const formatMegabytes = (bytes: number) => `${MEGABYTES.format(bytes / 1024 / 1024)} МБ`;
+
 /** A stand-in for the server: sends a file in a few steps and answers with its address. */
 function sendFile(file: File, { signal, onProgress }: UploadContext): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -58,6 +66,7 @@ export default function FileUploadFileCardsExample() {
         multiple
         defaultValue={MATERIALS}
         queue={queue}
+        formatSize={formatMegabytes}
       />
     </div>
   );