prime-ui-kit 0.14.0 → 0.15.0

package/src/components/login-form/examples/structure.tsx

@@ -1,28 +1,24 @@
-/** The minimal form: no logo, description or footer, and no shadow for a host that already is a surface — `flat`. */
+/** The minimal form: no logo, description or footer, no shadow for a host that already is a surface and a second-level title under the host page's own heading — `flat`, `as`. */
 import { Button, Input, LoginForm } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 export default function LoginFormStructureExample() {
   return (
-    <div className={styles.stage}>
-      <LoginForm.Root flat>
-        <LoginForm.Header>
-          <LoginForm.Title>Войти в аккаунт</LoginForm.Title>
-        </LoginForm.Header>
-        <LoginForm.Body>
-          <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
-            <Input.Root label="Email">
-              <Input.Wrapper>
-                <Input.Field type="email" placeholder="name@company.ru" />
-              </Input.Wrapper>
-            </Input.Root>
-            <Button.Root type="submit" fullWidth>
-              Получить ссылку для входа
-            </Button.Root>
-          </LoginForm.Form>
-        </LoginForm.Body>
-      </LoginForm.Root>
-    </div>
+    <LoginForm.Root flat>
+      <LoginForm.Header>
+        <LoginForm.Title as="h2">Войти, чтобы оплатить счёт</LoginForm.Title>
+      </LoginForm.Header>
+      <LoginForm.Body>
+        <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
+          <Input.Root label="Email">
+            <Input.Wrapper>
+              <Input.Field type="email" autoComplete="email" placeholder="name@company.ru" />
+            </Input.Wrapper>
+          </Input.Root>
+          <Button.Root type="submit" fullWidth>
+            Получить ссылку для входа
+          </Button.Root>
+        </LoginForm.Form>
+      </LoginForm.Body>
+    </LoginForm.Root>
   );
 }

package/src/components/login-form/examples/verification-code.tsx

@@ -2,56 +2,52 @@
 import { Button, DigitInput, Icon, LinkButton, LoginForm } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 export default function LoginFormVerificationCodeExample() {
   const [code, setCode] = React.useState("");
   const [invalid, setInvalid] = React.useState(false);
 
   return (
-    <div className={styles.stage}>
-      <LoginForm.Root>
-        <LoginForm.Header>
-          <LoginForm.Logo>
-            <Icon name="status.emailSent" />
-          </LoginForm.Logo>
-          <LoginForm.Title>Введите код</LoginForm.Title>
-          <LoginForm.Description>Мы отправили 6 цифр на name@company.ru</LoginForm.Description>
-        </LoginForm.Header>
-        <LoginForm.Body>
-          <LoginForm.Form
-            onSubmit={(e) => {
-              e.preventDefault();
-              setInvalid(code !== "123456");
+    <LoginForm.Root>
+      <LoginForm.Header>
+        <LoginForm.Logo>
+          <Icon name="status.emailSent" />
+        </LoginForm.Logo>
+        <LoginForm.Title>Введите код</LoginForm.Title>
+        <LoginForm.Description>Мы отправили 6 цифр на name@company.ru</LoginForm.Description>
+      </LoginForm.Header>
+      <LoginForm.Body>
+        <LoginForm.Form
+          onSubmit={(e) => {
+            e.preventDefault();
+            setInvalid(code !== "123456");
+          }}
+        >
+          <DigitInput
+            length={6}
+            size="l"
+            fullWidth
+            groupSize={3}
+            value={code}
+            error={invalid ? "Неверный код. Проверьте письмо и попробуйте ещё раз" : undefined}
+            onValueChange={(value) => {
+              setCode(value);
+              setInvalid(false);
             }}
-          >
-            <DigitInput
-              length={6}
-              size="l"
-              fullWidth
-              groupSize={3}
-              value={code}
-              error={invalid ? "Неверный код. Проверьте письмо и попробуйте ещё раз" : undefined}
-              onValueChange={(value) => {
-                setCode(value);
-                setInvalid(false);
-              }}
-              labels={{ group: "Код из письма" }}
-            />
-            <LoginForm.Actions>
-              <Button.Root type="submit" fullWidth disabled={code.length < 6}>
-                Подтвердить
-              </Button.Root>
-              <Button.Root variant="ghost" tone="neutral" fullWidth>
-                Отправить код ещё раз
-              </Button.Root>
-            </LoginForm.Actions>
-          </LoginForm.Form>
-          <LoginForm.Footer>
-            Не тот адрес? <LinkButton href="#">Изменить email</LinkButton>
-          </LoginForm.Footer>
-        </LoginForm.Body>
-      </LoginForm.Root>
-    </div>
+            labels={{ group: "Код из письма" }}
+          />
+          <LoginForm.Actions>
+            <Button.Root type="submit" fullWidth disabled={code.length < 6}>
+              Подтвердить
+            </Button.Root>
+            <Button.Root variant="ghost" tone="neutral" fullWidth>
+              Отправить код ещё раз
+            </Button.Root>
+          </LoginForm.Actions>
+        </LoginForm.Form>
+        <LoginForm.Footer>
+          Не тот адрес? <LinkButton href="#">Изменить email</LinkButton>
+        </LoginForm.Footer>
+      </LoginForm.Body>
+    </LoginForm.Root>
   );
 }

package/src/components/media-viewer/COMPONENT.md

@@ -188,7 +188,7 @@ Motion: it opens out of the thumbnail it was opened from — the picture grows f
 | [video.tsx](examples/video.tsx) | A video among the photos of a site visit starts once its page settles; its bar has play, time, seek, the sound button and its level, and it has no zoom — `type`, `autoPlay`. |
 | [actions.tsx](examples/actions.tsx) | Photos of a listing with actions for the one on screen: download it or make it the cover — `renderActions`. |
 | [origin.tsx](examples/origin.tsx) | Every photo flies back into its own thumbnail, also after paging, and the last one leads to the first — `getOrigin`, `loop`. |
-| [dismiss.tsx](examples/dismiss.tsx) | Contract scans read closely: a stray swipe or click past the page never closes them, only Escape and the close button — `closeOnOutsideClick`. |
+| [dismiss.tsx](examples/dismiss.tsx) | Contract scans read closely: a stray swipe or click past the page never closes them, only Escape and the close button, and the small print zooms up to eight times — `closeOnOutsideClick`, `maxZoom`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the page: a finding opens its photo, and paging in the viewer moves the mark along the list — `index`, `onIndexChange`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent opens a single scan from a link in the text: no counter and no arrows for one item — `open`, `onOpenChange`. |
 

package/src/components/media-viewer/examples/dismiss.tsx

@@ -1,4 +1,4 @@
-/** Contract scans read closely: a stray swipe or click past the page never closes them, only Escape and the close button — `closeOnOutsideClick`. */
+/** Contract scans read closely: a stray swipe or click past the page never closes them, only Escape and the close button, and the small print zooms up to eight times — `closeOnOutsideClick`, `maxZoom`. */
 import { Button, Icon, MediaViewer, type MediaViewerItem } from "prime-ui-kit";
 import * as React from "react";
 
@@ -11,6 +11,9 @@ const PAGES: MediaViewerItem[] = [1, 2, 3].map((n) => ({
   alt: `Договор поставки № 52/24, страница ${n}`,
 }));
 
+/** The small print of a scan needs more than the default fourfold zoom. */
+const SMALL_PRINT_ZOOM = 8;
+
 export default function MediaViewerDismissExample() {
   const [open, setOpen] = React.useState(false);
 
@@ -27,6 +30,7 @@ export default function MediaViewerDismissExample() {
         open={open}
         onOpenChange={setOpen}
         closeOnOutsideClick={false}
+        maxZoom={SMALL_PRINT_ZOOM}
         aria-label="Сканы договора № 52/24"
       />
     </>

package/src/components/message/COMPONENT.md

@@ -420,13 +420,14 @@ The list-level settings a message reads — the group chat's author header and a
 | [kinds.tsx](examples/kinds.tsx) | Every kind of message in its shell, both directions, single and in runs: text bubbles, pictures and circles as blocks, a caption bubble, voice, file, contact, place and link cards, reactions inside a bubble and under a picture — `Message.Media`, `VideoNote`, `Message.File`, `Message.Contact`, `Message.Location`, `Message.LinkPreview`, `VoicePlayer`. |
 | [author.tsx](examples/author.tsx) | A group chat's run of one author: the first message opens with the name in the author's hue, a crown and the member's tag, the last one shows the avatar in the gutter; another author with initials only, a long name that ellipsizes before its tag, a header on a pill over a photo, and your own reply — `Message.Author`, `tag`, `Message.AuthorIcon`, `Message.Avatar`, `position`, `hueOf`. |
 | [typing.tsx](examples/typing.tsx) | The typing signal: an incoming bubble of three dots that enters like a message and leaves closing its height; switch it, keep it mounted — `Message.Typing`, `active`. |
-| [status.tsx](examples/status.tsx) | Delivery of outgoing messages: a clock while sending, one check when sent, two when read, and a failed one with a retry that resolves after a second — `status`, `onRetry`. |
-| [text-formatting.tsx](examples/text-formatting.tsx) | The Markdown the Composer writes, rendered safely: bold, italic, strike, code, a code block, links and a quote; long words and URLs wrap — `Message.Text`, `edited`. |
+| [status.tsx](examples/status.tsx) | Delivery of outgoing messages: a clock while sending, one check when sent, two when read, and a failed one with a retry that resolves after a second; the time comes as a date and reads to the second — `status`, `onRetry`, `formatTime`. |
+| [text-formatting.tsx](examples/text-formatting.tsx) | The Markdown the Composer writes, rendered safely: bold, italic, strike, code, a code block, links and a quote; long words and URLs wrap; a pasted error log stays as typed, its stars and underscores kept — `Message.Text`, `edited`, `plain`. |
 | [reactions.tsx](examples/reactions.tsx) | Reactions under a message: each chip shows who reacted — up to three avatars, from four on two and «+N» — and a press on a chip, or a double tap on the message, puts or takes back your own at once while the request runs behind it — `Message.Reactions`, `users`, `onReactionToggle`. |
 | [context-menu.tsx](examples/context-menu.tsx) | Long press: the reaction bar above the message and its menu below — a right click opens the menu, a long hover only the bar, `R` and Shift+F10 from the keyboard — `Message.Menu`, `onReactionToggle`. |
 | [media.tsx](examples/media.tsx) | Captions under a photo, a tall portrait, an album and a video, each as wide as its media; an album with a video laid out as tiles, an outgoing album with neutral gaps and a photo still uploading with its ring and cancel; a tile opens the album in the viewer — `Message.Media`, `items`, `onCancel`. |
+| [media-open.tsx](examples/media-open.tsx) | The album's viewer owned by the screen: a button opens the acceptance photos at the damaged pallet, and the page the viewer shows is kept for the next open — `Message.Media`, `open`, `onOpenChange`, `index`, `onIndexChange`. |
 | [voice.tsx](examples/voice.tsx) | Voice messages on their bubbles: the player keeps room for the time in the corner; a new one carries the unplayed dot until it is played — `VoicePlayer`, `unplayed`. |
-| [file.tsx](examples/file.tsx) | Documents in a chat: a download link, a file with a picture, a large file fetched from its tile, an upload in flight with its share and cancel, and a failed one with a retry — `Message.File`, `href`, `preview`, `transfer`, `transferProgress`, `transferDirection`, `onDownload`. |
+| [file.tsx](examples/file.tsx) | Documents in a chat: a download link, a file with a picture, a large file fetched from its tile, an upload in flight with its share and cancel, and a failed one with a retry whose size reads in whole kilobytes — `Message.File`, `href`, `preview`, `transfer`, `transferProgress`, `transferDirection`, `onDownload`, `formatSize`. |
 | [location.tsx](examples/location.tsx) | A place on a map picture from your map service with a pin, the place and its address, and a live location of a courier on its way — `Message.Location`, `href`, `live`. |
 | [contact.tsx](examples/contact.tsx) | A shared contact: initials or a photo, name and phone, with the actions to write or save — `Message.Contact`, `phone`. |
 | [link-preview.tsx](examples/link-preview.tsx) | A message with a link and the card of the page under it: site, title, description and picture — `Message.LinkPreview`, `site`, `image`. |

package/src/components/message/examples/file.tsx

@@ -1,9 +1,12 @@
-/** Documents in a chat: a download link, a file with a picture, a large file fetched from its tile, an upload in flight with its share and cancel, and a failed one with a retry — `Message.File`, `href`, `preview`, `transfer`, `transferProgress`, `transferDirection`, `onDownload`. */
+/** Documents in a chat: a download link, a file with a picture, a large file fetched from its tile, an upload in flight with its share and cancel, and a failed one with a retry whose size reads in whole kilobytes — `Message.File`, `href`, `preview`, `transfer`, `transferProgress`, `transferDirection`, `onDownload`, `formatSize`. */
 import { Message, type TransferState } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
+/** «94 КБ»: the document system reports sizes in whole kilobytes. */
+const formatKilobytes = (bytes: number) => `${Math.ceil(bytes / 1024)} КБ`;
+
 export default function MessageFileExample() {
   const [progress, setProgress] = React.useState(0.1);
   const [failed, setFailed] = React.useState(true);
@@ -70,6 +73,7 @@ export default function MessageFileExample() {
         <Message.File
           name="Акт приёмки.docx"
           fileSize={96_000}
+          formatSize={formatKilobytes}
           transfer={failed ? "failed" : "done"}
           onRetry={() => setFailed(false)}
         />

package/src/components/message/examples/media-open.tsx

@@ -0,0 +1,48 @@
+/** The album's viewer owned by the screen: a button opens the acceptance photos at the damaged pallet, and the page the viewer shows is kept for the next open — `Message.Media`, `open`, `onOpenChange`, `index`, `onIndexChange`. */
+import { Button, type GalleryItem, Message } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const ACCEPTANCE: GalleryItem[] = [
+  { src: "https://picsum.photos/seed/accept-1/800/600", width: 800, height: 600, alt: "Паллета 1" },
+  { src: "https://picsum.photos/seed/accept-2/800/600", width: 800, height: 600, alt: "Паллета 2" },
+  {
+    src: "https://picsum.photos/seed/accept-3/600/800",
+    width: 600,
+    height: 800,
+    alt: "Паллета 3, повреждена упаковка",
+  },
+];
+
+const DAMAGED = 2;
+
+export default function MessageMediaOpenExample() {
+  const [open, setOpen] = React.useState(false);
+  const [index, setIndex] = React.useState(0);
+
+  return (
+    <div className={styles.thread}>
+      <Message.Root direction="incoming" time="11:40">
+        <Message.Media
+          items={ACCEPTANCE}
+          open={open}
+          onOpenChange={setOpen}
+          index={index}
+          onIndexChange={setIndex}
+        />
+        <Message.Text>Приёмка по заказу ORD-7310: на третьей паллете порвана плёнка.</Message.Text>
+      </Message.Root>
+      <Button.Root
+        variant="soft"
+        tone="neutral"
+        onClick={() => {
+          setIndex(DAMAGED);
+          setOpen(true);
+        }}
+      >
+        Показать повреждение
+      </Button.Root>
+    </div>
+  );
+}

package/src/components/message/examples/status.tsx

@@ -1,4 +1,4 @@
-/** Delivery of outgoing messages: a clock while sending, one check when sent, two when read, and a failed one with a retry that resolves after a second — `status`, `onRetry`. */
+/** Delivery of outgoing messages: a clock while sending, one check when sent, two when read, and a failed one with a retry that resolves after a second; the time comes as a date and reads to the second — `status`, `onRetry`, `formatTime`. */
 import { Message, type MessageStatus } from "prime-ui-kit";
 import * as React from "react";
 
@@ -6,6 +6,17 @@ import styles from "./examples.module.css";
 
 const STEPS: MessageStatus[] = ["sending", "sent", "read"];
 
+const FIRST_AT = new Date(2026, 9, 8, 14, 20, 12);
+const SECOND_AT = new Date(2026, 9, 8, 14, 21, 37);
+
+/** «14:21:37»: a delivery to the second, as the support log reads it. */
+const SECONDS = new Intl.DateTimeFormat("ru", {
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+});
+const formatSeconds = (date: Date) => SECONDS.format(date);
+
 export default function MessageStatusExample() {
   const [step, setStep] = React.useState(0);
   const [failed, setFailed] = React.useState(true);
@@ -28,13 +39,20 @@ export default function MessageStatusExample() {
 
   return (
     <div className={styles.thread}>
-      <Message.Root direction="outgoing" position="first" time="14:20" status={STEPS[step]}>
+      <Message.Root
+        direction="outgoing"
+        position="first"
+        time={FIRST_AT}
+        formatTime={formatSeconds}
+        status={STEPS[step]}
+      >
         <Message.Text>Акт сверки за сентябрь во вложении.</Message.Text>
       </Message.Root>
       <Message.Root
         direction="outgoing"
         position="last"
-        time="14:21"
+        time={SECOND_AT}
+        formatTime={formatSeconds}
         status={failed ? "failed" : "sent"}
         onRetry={retry}
       >

package/src/components/message/examples/text-formatting.tsx

@@ -1,4 +1,4 @@
-/** The Markdown the Composer writes, rendered safely: bold, italic, strike, code, a code block, links and a quote; long words and URLs wrap — `Message.Text`, `edited`. */
+/** The Markdown the Composer writes, rendered safely: bold, italic, strike, code, a code block, links and a quote; long words and URLs wrap; a pasted error log stays as typed, its stars and underscores kept — `Message.Text`, `edited`, `plain`. */
 import { Message } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -11,6 +11,9 @@ bun run migrate --env=prod
 \`\`\`
 Чеклист: https://prime.app/wiki/release-2-4`;
 
+/** An error copied from the 1C log: its stars and underscores are data, not markup. */
+const ERROR_LOG = "ERR_EXPORT_1C: поле *ИНН* пусто (counterparty_id=4_12_1)";
+
 export default function MessageTextFormattingExample() {
   return (
     <div className={styles.thread}>
@@ -22,6 +25,9 @@ export default function MessageTextFormattingExample() {
           Принято, запускаю после бэкапа. Отчёт положу в [задачу](https://prime.app/t/PRJ-430).
         </Message.Text>
       </Message.Root>
+      <Message.Root direction="incoming" time="16:12">
+        <Message.Text plain>{ERROR_LOG}</Message.Text>
+      </Message.Root>
     </div>
   );
 }

package/src/components/modal/COMPONENT.md

@@ -226,11 +226,12 @@ Motion (`overlayMotion`): the scrim fades in and out over `base`; the dialog fad
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A trigger opens a dialog with a title, a field and two actions; Enter presses the confirm — `Modal.Trigger`, `Modal.Confirm`. |
-| [structure.tsx](examples/structure.tsx) | Optional parts: an icon tile with a header-only notice, and a header with a footer but no body — `Modal.Icon`, `Modal.Body`, `Modal.Footer`. |
+| [structure.tsx](examples/structure.tsx) | Optional parts: an icon tile with a header-only notice, and a header with a status before the close button and a footer but no body — `Modal.Icon`, `Modal.Actions`, `Modal.Body`, `Modal.Footer`. |
 | [sizes.tsx](examples/sizes.tsx) | Every width; xs, s and m fill the footer with equal buttons, l and xl align them to the end — `size`. |
 | [long-content.tsx](examples/long-content.tsx) | A long body scrolls on its own while the header and the footer stay in place — `Modal.Body`. |
 | [custom-container.tsx](examples/custom-container.tsx) | The dialog portals into a given node instead of the document body — `container`. |
 | [guard.tsx](examples/guard.tsx) | An edit form that holds the dialog: changes make any dismiss ask first and show a note in the footer; while saving nothing closes it — `Modal.Guard`, `Modal.Meta`. |
+| [enter-key.tsx](examples/enter-key.tsx) | Enter in a dialog: deleting a workspace takes a click, never Enter in its field; in the tags dialog Enter adds the typed tag instead of saving — `confirmOnEnter`, `onEnterConfirm`. |
 | [dismiss.tsx](examples/dismiss.tsx) | A destructive confirm closes only from its buttons, and not at all while the request runs — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the open state and opens the dialog from code, without a trigger — `open`, `onOpenChange`. |
 | [in-form.tsx](examples/in-form.tsx) | A settings form in a dialog: the footer button submits the form and an empty name shakes the field and keeps it open until it is filled — `Modal.Body`, `Modal.Footer`, `error`. |

package/src/components/modal/examples/custom-container.tsx

@@ -1,29 +1,29 @@
 /** The dialog portals into a given node instead of the document body — `container`. */
-import { Button, Modal } from "prime-ui-kit";
+import { Button, Card, Modal } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 export default function ModalCustomContainerExample() {
   const [host, setHost] = React.useState<HTMLDivElement | null>(null);
 
   return (
-    <div ref={setHost} className={styles.portalHost}>
-      {host ? (
-        <Modal.Root>
-          <Modal.Trigger>
-            <Button.Root variant="soft" tone="neutral">
-              Открыть внутри блока
-            </Button.Root>
-          </Modal.Trigger>
-          <Modal.Content container={host} size="s">
-            <Modal.Header>
-              <Modal.Title>Свой контейнер</Modal.Title>
-              <Modal.Description>Диалог смонтирован внутрь этого блока.</Modal.Description>
-            </Modal.Header>
-          </Modal.Content>
-        </Modal.Root>
-      ) : null}
-    </div>
+    <Card.Root ref={setHost}>
+      <Card.Body>
+        {host ? (
+          <Modal.Root>
+            <Modal.Trigger>
+              <Button.Root variant="soft" tone="neutral">
+                Открыть внутри блока
+              </Button.Root>
+            </Modal.Trigger>
+            <Modal.Content container={host} size="s">
+              <Modal.Header>
+                <Modal.Title>Свой контейнер</Modal.Title>
+                <Modal.Description>Диалог смонтирован внутрь этого блока.</Modal.Description>
+              </Modal.Header>
+            </Modal.Content>
+          </Modal.Root>
+        ) : null}
+      </Card.Body>
+    </Card.Root>
   );
 }

package/src/components/modal/examples/dismiss.tsx

@@ -19,7 +19,7 @@ export default function ModalDismissExample() {
       open={open}
       onOpenChange={setOpen}
       closeOnOutsideClick={false}
-      closeOnEscape={!deleting}
+      closeOnEscape={false}
     >
       <Modal.Trigger>
         <Button.Root variant="outline" tone="danger">
@@ -27,7 +27,9 @@ export default function ModalDismissExample() {
         </Button.Root>
       </Modal.Trigger>
       <Modal.Content size="s">
-        <Modal.Header showClose={!deleting}>
+        {/* While the request runs, the guard keeps «Отмена» in place, disabled. */}
+        <Modal.Guard busy={deleting} />
+        <Modal.Header showClose={false}>
           <Modal.Icon tone="danger">
             <Icon name="action.delete" />
           </Modal.Icon>
@@ -38,7 +40,7 @@ export default function ModalDismissExample() {
         </Modal.Header>
         <Modal.Footer>
           <Modal.Close>
-            <Button.Root variant="outline" tone="neutral" disabled={deleting}>
+            <Button.Root variant="outline" tone="neutral">
               Отмена
             </Button.Root>
           </Modal.Close>

package/src/components/modal/examples/enter-key.tsx

@@ -0,0 +1,116 @@
+/** Enter in a dialog: deleting a workspace takes a click, never Enter in its field; in the tags dialog Enter adds the typed tag instead of saving — `confirmOnEnter`, `onEnterConfirm`. */
+import { Badge, Button, Input, Modal } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const WORKSPACE = "Отдел продаж";
+const INITIAL_TAGS = ["VIP", "Опт"];
+
+export default function ModalEnterKeyExample() {
+  const [deleteOpen, setDeleteOpen] = React.useState(false);
+  const [typed, setTyped] = React.useState("");
+  const [tags, setTags] = React.useState(INITIAL_TAGS);
+  const [draft, setDraft] = React.useState("");
+
+  const addTag = () => {
+    const tag = draft.trim();
+    if (tag && !tags.includes(tag)) setTags([...tags, tag]);
+    setDraft("");
+  };
+
+  return (
+    <>
+      <Modal.Root
+        open={deleteOpen}
+        onOpenChange={(next) => {
+          setDeleteOpen(next);
+          setTyped("");
+        }}
+        confirmOnEnter={false}
+      >
+        <Modal.Trigger>
+          <Button.Root variant="outline" tone="danger">
+            Удалить пространство
+          </Button.Root>
+        </Modal.Trigger>
+        <Modal.Content size="s">
+          <Modal.Header>
+            <Modal.Title>Удалить «{WORKSPACE}»?</Modal.Title>
+            <Modal.Description>
+              Сделки, клиенты и счета пространства удалятся без возможности восстановления.
+            </Modal.Description>
+          </Modal.Header>
+          <Modal.Body>
+            <Input.Root label={`Введите «${WORKSPACE}», чтобы подтвердить`}>
+              <Input.Wrapper>
+                <Input.Field value={typed} onValueChange={setTyped} autoComplete="off" />
+              </Input.Wrapper>
+            </Input.Root>
+          </Modal.Body>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button.Root variant="outline" tone="neutral">
+                Отмена
+              </Button.Root>
+            </Modal.Close>
+            {/* The confirm button is a click target only: `confirmOnEnter={false}` keeps Enter off it. */}
+            <Modal.Confirm>
+              <Button.Root
+                tone="danger"
+                disabled={typed !== WORKSPACE}
+                onClick={() => setDeleteOpen(false)}
+              >
+                Удалить
+              </Button.Root>
+            </Modal.Confirm>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal.Root>
+
+      <Modal.Root
+        onOpenChange={() => setDraft("")}
+        onEnterConfirm={(event) => {
+          event.preventDefault();
+          addTag();
+        }}
+      >
+        <Modal.Trigger>
+          <Button.Root variant="soft" tone="neutral">
+            Теги клиента
+          </Button.Root>
+        </Modal.Trigger>
+        <Modal.Content size="s">
+          <Modal.Header>
+            <Modal.Title>Теги клиента</Modal.Title>
+            <Modal.Description>ООО «Северный ветер»</Modal.Description>
+          </Modal.Header>
+          <Modal.Body>
+            <div className={styles.tags}>
+              {tags.map((tag) => (
+                <Badge.Root key={tag} color="blue">
+                  {tag}
+                </Badge.Root>
+              ))}
+            </div>
+            <Input.Root label="Новый тег" hint="Enter добавляет тег">
+              <Input.Wrapper>
+                <Input.Field value={draft} onValueChange={setDraft} placeholder="Партнёр" />
+              </Input.Wrapper>
+            </Input.Root>
+          </Modal.Body>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button.Root variant="outline" tone="neutral">
+                Отмена
+              </Button.Root>
+            </Modal.Close>
+            <Modal.Close>
+              <Button.Root>Сохранить</Button.Root>
+            </Modal.Close>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal.Root>
+    </>
+  );
+}

package/src/components/modal/examples/examples.module.css

@@ -1,21 +1,15 @@
 /* Layout of the Modal scenarios: semantic tokens only. */
 
+/* enter-key.tsx: the client's tags in a wrapping row. */
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--prime-space-2);
+}
+
 /* in-form.tsx: field → field 20 (foundation §1). */
 .form {
   display: flex;
   flex-direction: column;
   gap: var(--prime-space-5);
 }
-
-/* custom-container.tsx: a bounded block (§4) takes the host's card fill so it reads in both themes. */
-.portalHost {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  padding: var(--prime-space-4);
-  border-radius: var(--prime-card-radius);
-  background: var(--prime-color-layer-nested);
-  box-shadow: var(--prime-shadow-raised);
-}

package/src/components/modal/examples/structure.tsx

@@ -1,5 +1,5 @@
-/** Optional parts: an icon tile with a header-only notice, and a header with a footer but no body — `Modal.Icon`, `Modal.Body`, `Modal.Footer`. */
-import { Button, Icon, Modal } from "prime-ui-kit";
+/** Optional parts: an icon tile with a header-only notice, and a header with a status before the close button and a footer but no body — `Modal.Icon`, `Modal.Actions`, `Modal.Body`, `Modal.Footer`. */
+import { Badge, Button, Icon, Modal } from "prime-ui-kit";
 
 export default function ModalStructureExample() {
   return (
@@ -35,6 +35,9 @@ export default function ModalStructureExample() {
             <Modal.Description>
               Новые клиенты увидят тариф сразу после публикации.
             </Modal.Description>
+            <Modal.Actions>
+              <Badge.Root color="gray">Черновик</Badge.Root>
+            </Modal.Actions>
           </Modal.Header>
           <Modal.Footer>
             <Modal.Close>

package/src/components/native-select/COMPONENT.md

@@ -115,7 +115,7 @@ One look, the Select trigger's: field fill, inset control border, tier radius; t
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A labelled system select with a hint; the OS picker opens on phones — `label`, `hint`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier; the label and the hint follow the field tier — `size`. |
-| [states.tsx](examples/states.tsx) | A default field next to a disabled and an invalid one — `disabled`, `invalid`. |
+| [states.tsx](examples/states.tsx) | A default field next to a disabled and an invalid one, and one whose focus shows without the ring — `disabled`, `invalid`, `focusRing`. |
 | [validation.tsx](examples/validation.tsx) | Live validation: unassigning the owner shakes the field and drops the error in, picking someone clears it; required and optional markers and a hint — `required`, `optional`, `hint`, `error`. |
 | [option-groups.tsx](examples/option-groups.tsx) | Options under group headings with the native optgroup, and a placeholder while nothing is picked — `placeholder`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the value: the plan drives the price under the field — `value`, `onValueChange`. |

package/src/components/native-select/examples/states.tsx

@@ -1,4 +1,4 @@
-/** A default field next to a disabled and an invalid one — `disabled`, `invalid`. */
+/** A default field next to a disabled and an invalid one, and one whose focus shows without the ring — `disabled`, `invalid`, `focusRing`. */
 import { NativeSelect } from "prime-ui-kit";
 
 export default function NativeSelectStatesExample() {
@@ -16,6 +16,10 @@ export default function NativeSelectStatesExample() {
         <option value="viewer">Наблюдатель</option>
         <option value="editor">Редактор</option>
       </NativeSelect>
+      <NativeSelect label="focusRing={false}" defaultValue="editor" focusRing={false}>
+        <option value="viewer">Наблюдатель</option>
+        <option value="editor">Редактор</option>
+      </NativeSelect>
     </>
   );
 }