prime-ui-kit 0.13.1 → 0.15.0

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

@@ -2,8 +2,6 @@
 import { Banner, Button, Fieldset, Icon, Input, LoginForm } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 export default function LoginFormStatesExample() {
   const [pending, setPending] = React.useState(false);
   const [failed, setFailed] = React.useState(false);
@@ -12,60 +10,58 @@ export default function LoginFormStatesExample() {
   React.useEffect(() => () => clearTimeout(timer.current), []);
 
   return (
-    <div className={styles.stage}>
-      <LoginForm.Root>
-        <LoginForm.Header>
-          <LoginForm.Logo>
-            <Icon name="action.login" />
-          </LoginForm.Logo>
-          <LoginForm.Title>Войти в аккаунт</LoginForm.Title>
-          <LoginForm.Description>Любая пара email и пароля вернёт ошибку</LoginForm.Description>
-        </LoginForm.Header>
-        <LoginForm.Body>
-          <LoginForm.Form
-            onSubmit={(e) => {
-              e.preventDefault();
-              setFailed(false);
-              setPending(true);
-              timer.current = setTimeout(() => {
-                setPending(false);
-                setFailed(true);
-              }, 1200);
-            }}
-          >
-            {failed ? (
-              <Banner.Root tone="danger" role="alert">
-                <Banner.Content>
-                  <Banner.Icon>
-                    <Icon name="status.danger" />
-                  </Banner.Icon>
-                  <Banner.Title>Неверный email или пароль</Banner.Title>
-                </Banner.Content>
-              </Banner.Root>
-            ) : null}
-            <Fieldset disabled={pending}>
-              <Input.Root label="Email" required>
-                <Input.Wrapper>
-                  <Input.Field type="email" autoComplete="email" placeholder="name@company.ru" />
-                </Input.Wrapper>
-              </Input.Root>
-              <Input.Root label="Пароль" required invalid={failed}>
-                <Input.Wrapper>
-                  <Input.Field
-                    type="password"
-                    autoComplete="current-password"
-                    placeholder="********"
-                    onValueChange={() => setFailed(false)}
-                  />
-                </Input.Wrapper>
-              </Input.Root>
-            </Fieldset>
-            <Button.Root type="submit" fullWidth loading={pending}>
-              Войти
-            </Button.Root>
-          </LoginForm.Form>
-        </LoginForm.Body>
-      </LoginForm.Root>
-    </div>
+    <LoginForm.Root>
+      <LoginForm.Header>
+        <LoginForm.Logo>
+          <Icon name="action.login" />
+        </LoginForm.Logo>
+        <LoginForm.Title>Войти в аккаунт</LoginForm.Title>
+        <LoginForm.Description>Любая пара email и пароля вернёт ошибку</LoginForm.Description>
+      </LoginForm.Header>
+      <LoginForm.Body>
+        <LoginForm.Form
+          onSubmit={(e) => {
+            e.preventDefault();
+            setFailed(false);
+            setPending(true);
+            timer.current = setTimeout(() => {
+              setPending(false);
+              setFailed(true);
+            }, 1200);
+          }}
+        >
+          {failed ? (
+            <Banner.Root tone="danger" role="alert">
+              <Banner.Content>
+                <Banner.Icon>
+                  <Icon name="status.danger" />
+                </Banner.Icon>
+                <Banner.Title>Неверный email или пароль</Banner.Title>
+              </Banner.Content>
+            </Banner.Root>
+          ) : null}
+          <Fieldset disabled={pending}>
+            <Input.Root label="Email" required>
+              <Input.Wrapper>
+                <Input.Field type="email" autoComplete="email" placeholder="name@company.ru" />
+              </Input.Wrapper>
+            </Input.Root>
+            <Input.Root label="Пароль" required invalid={failed}>
+              <Input.Wrapper>
+                <Input.Field
+                  type="password"
+                  autoComplete="current-password"
+                  placeholder="********"
+                  onValueChange={() => setFailed(false)}
+                />
+              </Input.Wrapper>
+            </Input.Root>
+          </Fieldset>
+          <Button.Root type="submit" fullWidth loading={pending}>
+            Войти
+          </Button.Root>
+        </LoginForm.Form>
+      </LoginForm.Body>
+    </LoginForm.Root>
   );
 }

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

@@ -93,8 +93,8 @@ MediaViewer has no `variant`, `size` or `tone`: the stage is always near black,
 | gesture | a finger or the mouse dragging | `data-gesture="page \| pan \| pinch \| dismiss"` on the dialog |
 | chrome hidden | a tap, a pinch or a double tap (Tab brings it back); a playing video after 2.5 s without the pointer moving | `data-chrome="hidden"`: the bars fade and drift aside, take no presses; while a video plays the pointer hides too (`data-playing`). A video standing still always keeps its bar |
 | flight | open and close | `data-phase="opening \| open \| closing"`: only the picture moves; the play disk and the bars come after it lands and go before it takes off |
-| loading | the full picture is on its way or decoding | `data-status="loading"` on the page; a picture shows only once it is decoded, and the `thumbnail` stands in, blurred, until the picture has fully shown over it, so no frame is blank; without one a Spinner |
-| error | the picture or the video failed | `data-status="error"`: a «Не удалось загрузить» panel with «Повторить» |
+| loading | the full picture is on its way or decoding | `data-status="loading"` on the page; a picture shows only once it is decoded, and the `thumbnail` stands in, blurred, until the picture has fully shown over it, so no frame is blank; without one a Spinner that fades out as the picture arrives |
+| error | the picture or the video failed | `data-status="error"`: a «Не удалось загрузить» panel with «Повторить»; it fades in, and on a retry cross-fades with the Spinner in the same place |
 | sound | the sound button, its level panel (hover, focus, a tap), ↑ / ↓, M | one `volume` and mute for every video of the viewer; `data-open` on the sound control while the level shows; `autoPlay` refused with sound starts muted |
 
 Motion: it opens out of the thumbnail it was opened from — the picture grows from the thumbnail's shape to its fit over `base` on the `emphasized` curve while the stage fades in — and closes back into the thumbnail of the item on screen (`getOrigin`; without it the opener for the item it opened at, and for any other item the picture on the page that shows its `thumbnail`, `src` or `poster`, nearest the opener — paging on in a grid still closes into the right tile); without one, or with less than a fifth of it in view, it rises from a slight shrink and fades. The shape is what the page shows of the thumbnail: its media box, cut by every clipping ancestor (a scroller, a rounded album, a bubble) and the viewport, and the radius of each corner taken from the frame whose corner it is — an album's inner tiles fly square, its corner tiles round only on the outer side, and the corners glide all the way, never snap. During the flight only the picture moves; a video flies as the frame of the thumbnail it opened from (drawn before the first paint), starts only after it lands (`autoPlay`) and pauses before it takes off. Released gestures settle with a spring: a page turns past half its width or on a flick, and any other item — a thumbnail far along the strip, `Home` / `End` — arrives by the same slide, never a cut or a fade; the filmstrip follows the track on every frame, so its glide and the emphasis of its thumbnails move with the finger and settle with the page; a zoomed picture coasts with iOS momentum (deceleration 0.998 / ms) and springs back from its edges, and at its edge a sideways drag turns the page; a pinch past its range resists like a rubber band and settles inside it, a swipe away shrinks the picture and thins the stage and closes past 12% of the height or on a flick. Under `prefers-reduced-motion` the open and close are instant and the springs land at once; the picture still follows the finger.
@@ -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

@@ -116,7 +116,7 @@ Content parts in short: `Message.Media` — a [Gallery](../gallery/COMPONENT.md)
 |---|---|---|---|
 | `author` | `ReactNode` | — (required) | Who wrote the quoted message. |
 | `color` | `"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"` | `"blue"` | The author's hue (the same as their `Message.Author`). |
-| `target` | `string` | — | The `value` of the quoted message: a press brings the chat to it (rendering it first in a window), the other messages blink back around it, and the focus moves to it. Makes the quote a button. |
+| `target` | `string` | — | The `value` of the quoted message: a press brings the chat to it (rendering it first in a window), the message blinks, and the focus moves to it. Makes the quote a button. |
 | `onClick` | `(event: MouseEvent<HTMLButtonElement>) => void` | — | A press on the quote, after `target` is shown: load the original when it is not in the list yet. Makes the quote a button. |
 | `labels` | `Partial<MessageReplyLabels>` | — | `reply` — the hidden prefix read before the quote. |
 | `…rest` | `Omit<HTMLAttributes<HTMLElement>, "color" \| "onClick">` | — | `children` (the quoted text, one line), `className`. |
@@ -302,7 +302,7 @@ The list-level settings a message reads — the group chat's author header and a
 | author header | `Message.Author` in a group chat (`Chat.Messages type="group"`) on `single` / `first`; any message on its own | the header line at the top of the bubble; over a picture or a circle on the media pill at the top-start corner; hidden on `middle` / `last` and in a direct chat (the author still names the message) |
 | avatar | `Message.Avatar` in a group chat on `single` / `last` | the avatar in the gutter at the bubble's bottom; the gutter stays empty on the others |
 | new at the end | the chat's list decided it (`data-enter="incoming"` / `"outgoing"`) | the message column floats up `--prime-space-3` from below and fades in (`fast`, enter easing, `transform` + `opacity` only; the row box clips it); never on a first render, history or a status change. See Chat |
-| pointed at / stepping back | the chat's jump, search or selection (`data-pointed`, `data-selected` on the message; `data-pointing`, `data-selecting` on the list) | nothing is drawn on the message: it stays at full strength while the others — the bubble, picture or circle with its tail and reactions, the avatar, the retry — step back to `--prime-message-dim-opacity` with a slight desaturation (selection: `fast`, both ways; a jump: three blinks, `base` each; the current search match: while it is current). Reduced motion: no blink |
+| pointed at / stepping back | the chat's jump, search or selection (`data-pointed`, `data-selected` on the message; `data-pointing`, `data-selecting` on the list) | nothing is drawn on the message: it stays at full strength while the others — the bubble, picture or circle with its tail and reactions, the avatar, the retry — step back to `--prime-message-dim-opacity` with a slight desaturation (selection: `fast`, both ways; the current search match: while it is current); a jump instead blinks the message itself three times, `base` each, the others stay still. Reduced motion: no blink |
 | search match | the chat's search query | every case-insensitive match in `Message.Text` and the transcripts under a soft accent wash (`<mark>`) |
 | typing | `Message.Typing active` | an incoming bubble of three dots rising and fading in turn on the loading loop (reduced motion slows it); enters floating up while its height opens (`fast`), leaves closing its height (`fast`) — or at once when a reply arrives at the end of the list in the same update; its block axis clips, so a closed row leaves nothing under the list |
 | status change | `status` | the ticks cross-fade and scale (`base`, `emphasized`), interruptible |
@@ -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>