prime-ui-kit 0.14.0 → 0.15.0

package/dist/skill/reference/components/input/examples/states.tsx

@@ -1,4 +1,4 @@
-/** A default field next to a disabled and a read-only one — `disabled`, `readOnly`. */
+/** A default field next to a disabled, a read-only and an invalid one with no message — `disabled`, `readOnly`, `invalid`. */
 import { Icon, Input } from "prime-ui-kit";
 
 export default function InputStatesExample() {
@@ -22,6 +22,11 @@ export default function InputStatesExample() {
           </Input.Icon>
         </Input.Wrapper>
       </Input.Root>
+      <Input.Root label="invalid" invalid>
+        <Input.Wrapper>
+          <Input.Field type="tel" defaultValue="+7 900 12" />
+        </Input.Wrapper>
+      </Input.Root>
     </>
   );
 }

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

@@ -222,12 +222,13 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 | [structure.tsx](examples/structure.tsx) | Cards take only the parts they need: a title alone, a meta line, labels, a footer with counts and an assignee — `Kanban.ItemTitle`, `Kanban.ItemDescription`, `Kanban.ItemBadges`, `Kanban.ItemFooter`, `Kanban.ItemCount`. |
 | [cards.tsx](examples/cards.tsx) | Three kinds of cards on one board: a plain note, a ticket with a header row of key and priority, a design task with a cover — `Kanban.ItemHeader`, `Thumbnail`, `Kanban.ItemFooter`. |
 | [limits.tsx](examples/limits.tsx) | A support queue with a work-in-progress limit and a workflow rule, its columns drawn as wells so each reads as a bounded queue: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`, `variant`. |
-| [columns.tsx](examples/columns.tsx) | A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover — `reorderableColumns`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. |
+| [columns.tsx](examples/columns.tsx) | A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover; the page keeps the order — `reorderableColumns`, `columnOrder`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. |
 | [saving.tsx](examples/saving.tsx) | Every move is saved on the server: the card waits busy in its new place, and an invoice the server refuses to close glides back to its column — `onValueChange`. |
 | [item-link.tsx](examples/item-link.tsx) | Tickets that open: each card is a link to its page, so ⌘-click or a middle click opens a new tab, a plain click, Enter or Space opens it in place, and a drag only moves it — `getItemHref`, `onItemClick`. |
-| [states.tsx](examples/states.tsx) | Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a read-only board drags nothing — `loading`, `disabled`. |
+| [states.tsx](examples/states.tsx) | Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a closed order stays in place while the rest move; a read-only board drags nothing — `loading`, `disabled`. |
 | [controlled.tsx](examples/controlled.tsx) | The placement lives in the parent: every move arrives with its source, target and position to save, and a button resets the board — `value`, `onValueChange`. |
 | [narrow.tsx](examples/narrow.tsx) | On a phone-width screen a column takes 85% of the board and snaps into place, so the next one peeks; the strip scrolls inside the board, never the page. |
+| [screen.tsx](examples/screen.tsx) | A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in the app header, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemClick`. |
 
 ## Mistakes
 - Returning something other than `Kanban.Item` from `renderItem` → the card does not drag and Alt + arrows do nothing.

package/dist/skill/reference/components/kanban/examples/columns.tsx

@@ -1,4 +1,4 @@
-/** A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover — `reorderableColumns`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. */
+/** A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover; the page keeps the order — `reorderableColumns`, `columnOrder`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. */
 import {
   Button,
   ColorSwatches,
@@ -52,6 +52,8 @@ const DEALS: Deal[] = [
   { id: "DL-296", client: "ГК «Меридиан»", amount: 2_750_000 },
 ];
 
+const INITIAL_ORDER = COLUMNS.map((column) => column.id);
+
 const PLACEMENT: KanbanValue = {
   lead: ["DL-318", "DL-322"],
   demo: ["DL-309"],
@@ -77,7 +79,7 @@ const dealsWord = (count: number) => {
 export default function KanbanColumnsExample() {
   const [columns, setColumns] = React.useState(COLUMNS);
   const [placement, setPlacement] = React.useState<KanbanValue>(PLACEMENT);
-  const [savedOrder, setSavedOrder] = React.useState<readonly string[] | null>(null);
+  const [order, setOrder] = React.useState<readonly string[]>(INITIAL_ORDER);
 
   const updateColumn = (id: string, patch: Partial<KanbanColumn>) =>
     setColumns((current) =>
@@ -95,8 +97,8 @@ export default function KanbanColumnsExample() {
   return (
     <div className={styles.stage}>
       <Typography as="span" variant="body-s" tone="muted" aria-live="polite">
-        {savedOrder
-          ? `Порядок этапов сохранён: ${savedOrder.map(titleOf).filter(Boolean).join(" → ")}`
+        {order !== INITIAL_ORDER
+          ? `Порядок этапов сохранён: ${order.map(titleOf).filter(Boolean).join(" → ")}`
           : "Перетащите этап за ручку в шапке или нажмите на ней Alt + ← / →"}
       </Typography>
       <Kanban.Root
@@ -109,7 +111,8 @@ export default function KanbanColumnsExample() {
         value={placement}
         onValueChange={setPlacement}
         reorderableColumns
-        onColumnOrderChange={setSavedOrder}
+        columnOrder={order}
+        onColumnOrderChange={setOrder}
         renderColumnMeta={figures}
         renderColumnActions={(column) => (
           <Popover.Root>

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

@@ -0,0 +1,17 @@
+/* Kanban board: a work screen — the header carries the title and the tools, the page fills the app
+   panel (`AppShell.Root fillViewport` + `PageContent.Root fill`) and the board or the list takes
+   the free height; every column scrolls inside the board, never the page. */
+
+/* Company cell: the name over the deal id. */
+.company {
+  display: grid;
+  white-space: nowrap;
+}
+
+/* Owner: avatar, then the name. */
+.owner {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prime-space-2);
+  white-space: nowrap;
+}

package/dist/skill/{patterns/kanban-board.tsx → reference/components/kanban/examples/screen.tsx}

@@ -1,5 +1,6 @@
-/** A sales pipeline board: header with one primary action, search and filter with a board / list switch, a Kanban of deals by stage with totals, moves saved on the server that can be refused, movable stages and the deal in a Drawer. */
+/** A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in the app header, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemClick`. */
 import {
+  AppHeader,
   Avatar,
   Badge,
   Button,
@@ -27,7 +28,7 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./kanban-board.module.css";
+import styles from "./screen.module.css";
 
 type Owner = { name: string; initials: string; color: PaletteColor };
 
@@ -41,25 +42,17 @@ type Deal = {
   source: string;
   probability: number;
   contract: boolean;
-  comments: number;
-  tags: { text: string; color: PaletteColor }[];
 };
 
 type DealRow = Deal & { stage: string };
 
-/** The stages of the pipeline; the first and the last are system stages and stay in place. */
+/** The stages of the pipeline, in order; the stage color repeats on its count and its Badge. */
 const STAGES: KanbanColumn[] = [
-  {
-    id: "new",
-    title: "Новая",
-    description: "Связаться в течение дня",
-    color: "blue",
-    locked: true,
-  },
-  { id: "qualified", title: "Квалификация", description: "Бюджет и сроки", color: "purple" },
-  { id: "proposal", title: "Предложение", description: "КП отправлено", color: "orange" },
-  { id: "negotiation", title: "Переговоры", description: "Условия договора", color: "yellow" },
-  { id: "won", title: "Выиграна", description: "Договор подписан", color: "green", locked: true },
+  { id: "new", title: "Новая", color: "blue" },
+  { id: "qualified", title: "Квалификация", color: "purple" },
+  { id: "proposal", title: "Предложение", color: "orange" },
+  { id: "negotiation", title: "Переговоры", color: "yellow" },
+  { id: "won", title: "Выиграна", color: "green" },
 ];
 
 const ANNA: Owner = { name: "Анна Климова", initials: "АК", color: "purple" };
@@ -77,8 +70,6 @@ const DEALS: Deal[] = [
     source: "Сайт",
     probability: 20,
     contract: false,
-    comments: 2,
-    tags: [{ text: "Входящая", color: "sky" }],
   },
   {
     id: "DL-338",
@@ -90,8 +81,6 @@ const DEALS: Deal[] = [
     source: "Выставка",
     probability: 25,
     contract: false,
-    comments: 0,
-    tags: [{ text: "Тендер", color: "blue" }],
   },
   {
     id: "DL-332",
@@ -103,8 +92,6 @@ const DEALS: Deal[] = [
     source: "Рекомендация",
     probability: 40,
     contract: false,
-    comments: 4,
-    tags: [{ text: "Повторная", color: "green" }],
   },
   {
     id: "DL-327",
@@ -116,8 +103,6 @@ const DEALS: Deal[] = [
     source: "Сайт",
     probability: 40,
     contract: false,
-    comments: 1,
-    tags: [{ text: "Просрочена", color: "red" }],
   },
   {
     id: "DL-321",
@@ -129,8 +114,6 @@ const DEALS: Deal[] = [
     source: "Холодный звонок",
     probability: 60,
     contract: false,
-    comments: 6,
-    tags: [{ text: "Горячая", color: "orange" }],
   },
   {
     id: "DL-316",
@@ -142,11 +125,6 @@ const DEALS: Deal[] = [
     source: "Рекомендация",
     probability: 75,
     contract: true,
-    comments: 9,
-    tags: [
-      { text: "Тендер", color: "blue" },
-      { text: "Горячая", color: "orange" },
-    ],
   },
   {
     id: "DL-309",
@@ -158,8 +136,6 @@ const DEALS: Deal[] = [
     source: "Выставка",
     probability: 80,
     contract: false,
-    comments: 3,
-    tags: [{ text: "Ждём подпись", color: "yellow" }],
   },
   {
     id: "DL-298",
@@ -171,8 +147,6 @@ const DEALS: Deal[] = [
     source: "Сайт",
     probability: 100,
     contract: true,
-    comments: 2,
-    tags: [{ text: "Повторная", color: "green" }],
   },
 ];
 
@@ -246,11 +220,6 @@ function saveStage(deal: Deal, to: string) {
   });
 }
 
-/** The server's answer to a new order of the stages. */
-function saveStageOrder() {
-  return new Promise<void>((resolve) => window.setTimeout(resolve, SAVE_MS));
-}
-
 const ownerAvatar = (owner: Owner) => (
   <Avatar.Root size="s" color={owner.color} aria-label={owner.name}>
     <Avatar.Fallback>{owner.initials}</Avatar.Fallback>
@@ -310,16 +279,13 @@ const COLUMNS: DataTableColumn<DealRow>[] = [
   },
 ];
 
-export default function KanbanBoardPattern() {
+export default function KanbanScreenExample() {
   const { notify } = useNotifications();
   const [loading, setLoading] = React.useState(true);
   const [view, setView] = React.useState("board");
   const [filter, setFilter] = React.useState<SmartFilterValue>({});
   const [search, setSearch] = React.useState("");
   const [placement, setPlacement] = React.useState(PLACEMENT);
-  const [stageOrder, setStageOrder] = React.useState<readonly string[]>(
-    STAGES.map((stage) => stage.id),
-  );
   const [openId, setOpenId] = React.useState<string | null>(null);
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   const [saving, setSaving] = React.useState(false);
@@ -339,6 +305,11 @@ export default function KanbanBoardPattern() {
   );
   const rows: DealRow[] = deals.map((deal) => ({ ...deal, stage: stageOf(placement, deal.id) }));
   const shown = new Set(deals.map((deal) => deal.id));
+  // The header's data line: what the filtered pipeline holds, open deals only.
+  const inWork = deals.filter((deal) => stageOf(placement, deal.id) !== "won");
+  const pipeline = `${inWork.length} ${dealsWord(inWork.length)} в работе · ${RUBLES.format(
+    inWork.reduce((total, deal) => total + deal.amount, 0),
+  )}`;
 
   const figures = (column: KanbanColumn) => {
     const ids = (placement[column.id] ?? []).filter((id) => shown.has(id));
@@ -383,32 +354,22 @@ export default function KanbanBoardPattern() {
 
   const deal = openId === null ? undefined : BY_ID.get(openId);
   const dealStage = deal ? stageOf(placement, deal.id) : "new";
-  const nextStage = STAGE_BY_ID.get(stageOrder[stageOrder.indexOf(dealStage) + 1] ?? "");
+  const nextStage = STAGES[STAGES.findIndex((stage) => stage.id === dealStage) + 1];
 
   return (
-    <PageContent.Page aria-labelledby="deals-title">
-      <PageContent.Header>
-        <PageContent.Title id="deals-title">Сделки</PageContent.Title>
-        <PageContent.Description>
-          Воронка отдела продаж: перетащите сделку на следующий этап или откройте её карточку.
-        </PageContent.Description>
-        <PageContent.Actions>
-          <Button.Root variant="soft" tone="neutral">
-            <Button.Icon>
-              <Icon name="action.download" />
-            </Button.Icon>
-            Экспорт
-          </Button.Root>
-          <Button.Root>
-            <Button.Icon>
-              <Icon name="action.add" />
-            </Button.Icon>
-            Новая сделка
-          </Button.Root>
-        </PageContent.Actions>
-      </PageContent.Header>
-      <PageContent.Body>
-        <div className={styles.workspace}>
+    <>
+      {/* A work screen: in an app this header fills the shell's `header` slot and carries the page —
+          the only h1 and the page's tools; main has no PageContent.Header. */}
+      <AppHeader.Root>
+        <AppHeader.Start>
+          <AppHeader.Title>
+            Сделки
+            <AppHeader.Description>
+              {loading ? "Загружаем воронку…" : pipeline}
+            </AppHeader.Description>
+          </AppHeader.Title>
+        </AppHeader.Start>
+        <AppHeader.Tools>
           <SmartFilter.Root
             fields={FIELDS}
             value={filter}
@@ -436,18 +397,30 @@ export default function KanbanBoardPattern() {
                   </SegmentedControl.Item>
                 </SegmentedControl.Root>
               </PageToolbar.View>
+              <PageToolbar.Actions>
+                <Button.Root>
+                  <Button.Icon>
+                    <Icon name="action.add" />
+                  </Button.Icon>
+                  Новая сделка
+                </Button.Root>
+              </PageToolbar.Actions>
               <PageToolbar.Chips>
                 <SmartFilter.Chips />
               </PageToolbar.Chips>
             </PageToolbar.Root>
           </SmartFilter.Root>
-          <Crossfade state={view}>
+        </AppHeader.Tools>
+      </AppHeader.Root>
+
+      <PageContent.Root fill>
+        <PageContent.Body>
+          <Crossfade state={view} fill>
             {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}
                 columns={STAGES}
                 items={deals}
                 getId={(item) => item.id}
@@ -465,12 +438,6 @@ export default function KanbanBoardPattern() {
                   }
                   setPlacement(next);
                 }}
-                reorderableColumns
-                columnOrder={stageOrder}
-                onColumnOrderChange={async (next) => {
-                  await saveStageOrder();
-                  setStageOrder(next);
-                }}
                 renderColumnMeta={figures}
                 loading={loading}
                 onItemClick={(item) => openDeal(item.id)}
@@ -480,20 +447,7 @@ export default function KanbanBoardPattern() {
                     <Kanban.ItemDescription>
                       {RUBLES.format(item.amount)} · до {DAY.format(new Date(item.due))}
                     </Kanban.ItemDescription>
-                    <Kanban.ItemBadges>
-                      {item.tags.map((tag) => (
-                        <Badge.Root key={tag.text} color={tag.color}>
-                          {tag.text}
-                        </Badge.Root>
-                      ))}
-                    </Kanban.ItemBadges>
-                    <Kanban.ItemFooter>
-                      <Kanban.ItemCount>
-                        <Icon name="object.message" />
-                        {item.comments}
-                      </Kanban.ItemCount>
-                      {ownerAvatar(item.owner)}
-                    </Kanban.ItemFooter>
+                    <Kanban.ItemFooter>{ownerAvatar(item.owner)}</Kanban.ItemFooter>
                   </Kanban.Item>
                 )}
               />
@@ -505,7 +459,9 @@ export default function KanbanBoardPattern() {
                 getRowKey={(row) => row.id}
                 getRowLabel={(row) => row.company}
                 onRowClick={(row) => openDeal(row.id)}
-                pageSize={8}
+                paging="none"
+                scrollHeight="fill"
+                stickyHeader
                 defaultSort={{ columnId: "due", order: "asc" }}
                 empty={
                   <EmptyPage.Root size="s" role="status" aria-labelledby="deals-empty">
@@ -528,87 +484,89 @@ export default function KanbanBoardPattern() {
               />
             )}
           </Crossfade>
-        </div>
-        <Drawer.Root open={drawerOpen} onOpenChange={setDrawerOpen}>
-          <Drawer.Content>
-            <Drawer.Guard busy={saving} />
-            <Drawer.Header>
-              <Drawer.Title>{deal?.company}</Drawer.Title>
-              <Drawer.Description>
-                {deal?.id} · {STAGE_BY_ID.get(dealStage)?.title}
-              </Drawer.Description>
-            </Drawer.Header>
-            <Drawer.Body>
-              {deal ? (
-                <DescriptionList.Root>
-                  <DescriptionList.Item label="Этап">{stageBadge(dealStage)}</DescriptionList.Item>
-                  <DescriptionList.Item label="Сумма">
-                    {RUBLES.format(deal.amount)}
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Вероятность">
-                    {deal.probability} %
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Срок закрытия">
-                    {DAY.format(new Date(deal.due))}
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Ответственный">
-                    <span className={styles.owner}>
-                      {ownerAvatar(deal.owner)}
-                      {deal.owner.name}
-                    </span>
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Контакт">{deal.contact}</DescriptionList.Item>
-                  <DescriptionList.Item label="Источник">{deal.source}</DescriptionList.Item>
-                  <DescriptionList.Item label="Договор">
-                    {deal.contract ? (
-                      <Badge.Root color="green">Подписан</Badge.Root>
-                    ) : (
-                      <Badge.Root color="gray">Не подписан</Badge.Root>
-                    )}
-                  </DescriptionList.Item>
-                </DescriptionList.Root>
-              ) : null}
-            </Drawer.Body>
-            <Drawer.Footer>
-              <Drawer.Close>
-                <Button.Root variant="outline" tone="neutral">
-                  Закрыть
-                </Button.Root>
-              </Drawer.Close>
-              <Dropdown.Root>
-                <Dropdown.Trigger>
-                  <Button.Root variant="soft" tone="neutral" disabled={saving}>
-                    Сменить этап
+          <Drawer.Root open={drawerOpen} onOpenChange={setDrawerOpen}>
+            <Drawer.Content>
+              <Drawer.Guard busy={saving} />
+              <Drawer.Header>
+                <Drawer.Title>{deal?.company}</Drawer.Title>
+                <Drawer.Description>
+                  {deal?.id} · {STAGE_BY_ID.get(dealStage)?.title}
+                </Drawer.Description>
+              </Drawer.Header>
+              <Drawer.Body>
+                {deal ? (
+                  <DescriptionList.Root>
+                    <DescriptionList.Item label="Этап">
+                      {stageBadge(dealStage)}
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Сумма">
+                      {RUBLES.format(deal.amount)}
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Вероятность">
+                      {deal.probability} %
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Срок закрытия">
+                      {DAY.format(new Date(deal.due))}
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Ответственный">
+                      <span className={styles.owner}>
+                        {ownerAvatar(deal.owner)}
+                        {deal.owner.name}
+                      </span>
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Контакт">{deal.contact}</DescriptionList.Item>
+                    <DescriptionList.Item label="Источник">{deal.source}</DescriptionList.Item>
+                    <DescriptionList.Item label="Договор">
+                      {deal.contract ? (
+                        <Badge.Root color="green">Подписан</Badge.Root>
+                      ) : (
+                        <Badge.Root color="gray">Не подписан</Badge.Root>
+                      )}
+                    </DescriptionList.Item>
+                  </DescriptionList.Root>
+                ) : null}
+              </Drawer.Body>
+              <Drawer.Footer>
+                <Drawer.Close>
+                  <Button.Root variant="outline" tone="neutral">
+                    Закрыть
                   </Button.Root>
-                </Dropdown.Trigger>
-                <Dropdown.Content>
-                  {stageOrder.map((id) => (
-                    <Dropdown.Item
-                      key={id}
-                      disabled={id === dealStage}
-                      onSelect={() => {
-                        if (deal) void moveDeal(deal, id);
-                      }}
-                    >
-                      {STAGE_BY_ID.get(id)?.title}
-                    </Dropdown.Item>
-                  ))}
-                </Dropdown.Content>
-              </Dropdown.Root>
-              {nextStage ? (
-                <Button.Root
-                  loading={saving}
-                  onClick={() => {
-                    if (deal) void moveDeal(deal, nextStage.id);
-                  }}
-                >
-                  В «{nextStage.title}»
-                </Button.Root>
-              ) : null}
-            </Drawer.Footer>
-          </Drawer.Content>
-        </Drawer.Root>
-      </PageContent.Body>
-    </PageContent.Page>
+                </Drawer.Close>
+                <Dropdown.Root>
+                  <Dropdown.Trigger>
+                    <Button.Root variant="soft" tone="neutral" disabled={saving}>
+                      Сменить этап
+                    </Button.Root>
+                  </Dropdown.Trigger>
+                  <Dropdown.Content>
+                    {STAGES.map((stage) => (
+                      <Dropdown.Item
+                        key={stage.id}
+                        disabled={stage.id === dealStage}
+                        onSelect={() => {
+                          if (deal) void moveDeal(deal, stage.id);
+                        }}
+                      >
+                        {stage.title}
+                      </Dropdown.Item>
+                    ))}
+                  </Dropdown.Content>
+                </Dropdown.Root>
+                {nextStage ? (
+                  <Button.Root
+                    loading={saving}
+                    onClick={() => {
+                      if (deal) void moveDeal(deal, nextStage.id);
+                    }}
+                  >
+                    В «{nextStage.title}»
+                  </Button.Root>
+                ) : null}
+              </Drawer.Footer>
+            </Drawer.Content>
+          </Drawer.Root>
+        </PageContent.Body>
+      </PageContent.Root>
+    </>
   );
 }

package/dist/skill/reference/components/kanban/examples/states.tsx

@@ -1,10 +1,10 @@
-/** Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a read-only board drags nothing — `loading`, `disabled`. */
-import { Button, Icon, Kanban, Switch } from "prime-ui-kit";
+/** Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a closed order stays in place while the rest move; a read-only board drags nothing — `loading`, `disabled`. */
+import { Badge, Button, Icon, Kanban, Switch } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
-type Order = { id: string; title: string; total: string };
+type Order = { id: string; title: string; total: string; closed?: boolean };
 
 const COLUMNS = [
   { id: "new", title: "Новые" },
@@ -12,13 +12,19 @@ const COLUMNS = [
   { id: "shipped", title: "Отгружены" },
 ];
 
+/** A closed order has signed documents: its card stays where it is. */
 const ORDERS: Order[] = [
   { id: "ORD-5531", title: "ООО «Север» · 12 позиций", total: "48 300 ₽" },
   { id: "ORD-5529", title: "ИП Лебедев · 3 позиции", total: "7 950 ₽" },
-  { id: "ORD-5524", title: "АО «Гранит» · 40 позиций", total: "212 000 ₽" },
+  { id: "ORD-5524", title: "АО «Гранит» · 40 позиций", total: "212 000 ₽", closed: true },
+  { id: "ORD-5518", title: "ООО «Вектор» · 6 позиций", total: "31 400 ₽" },
 ];
 
-const PLACEMENT = { new: ["ORD-5531", "ORD-5529"], packing: [], shipped: ["ORD-5524"] };
+const PLACEMENT = {
+  new: ["ORD-5531", "ORD-5529"],
+  packing: [],
+  shipped: ["ORD-5524", "ORD-5518"],
+};
 
 const LOAD_MS = 1200;
 
@@ -62,11 +68,16 @@ export default function KanbanStatesExample() {
         loading={loading}
         disabled={readOnly}
         renderItem={(order) => (
-          <Kanban.Item>
+          <Kanban.Item disabled={order.closed}>
             <Kanban.ItemTitle>{order.id}</Kanban.ItemTitle>
             <Kanban.ItemDescription>
               {order.title} · {order.total}
             </Kanban.ItemDescription>
+            {order.closed ? (
+              <Kanban.ItemBadges>
+                <Badge.Root color="gray">Закрыт</Badge.Root>
+              </Kanban.ItemBadges>
+            ) : null}
           </Kanban.Item>
         )}
       />