prime-ui-kit 0.10.0 → 0.11.0

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

@@ -0,0 +1,193 @@
+# Notification
+
+**Category:** status
+**Kind:** overlay
+
+> Pop-up toast notifications: `NotificationProvider` at the app root and `notify()` from any screen.
+
+## When to use
+- A short reaction to a user action: saved, sent, copied, failed to save.
+- A background event the user should notice without leaving the screen (new message, low stock).
+- An error with a quick recovery action («Повторить»).
+
+## When not to use
+- A persistent message about a page or account state → use [Banner](../banner/COMPONENT.md).
+- A field validation error → the field `error` / [Hint](../hint/COMPONENT.md).
+- A decision the user must make before continuing → use [Modal](../modal/COMPONENT.md).
+- Progress of a long operation → [ProgressBar](../progress-bar/COMPONENT.md) in the UI.
+
+## Import
+```tsx
+import { NotificationCard, NotificationProvider, useNotifications } from "prime-ui-kit";
+```
+
+## Anatomy
+```
+NotificationProvider                 store + portaled viewport (z-index toast)
+└─ zone per position                 top/bottom × left/center/right
+   └─ stack per tone                 <ol> named by labels; newest in front
+      └─ card                        <article role="status|alert">
+         ├─ icon                     tone Icon or `icon`
+         ├─ title + Badge            `badge` counter
+         ├─ description
+         ├─ action Button            soft neutral, one tier below the card
+         ├─ close Button             ghost icon, when `closable`
+         └─ countdown line           when not `persistent`
+NotificationCard                     the same card, static, without a timer
+```
+
+## API
+
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### NotificationProvider
+No DOM of its own, no ref. Wraps the app once: keeps the toasts and renders their stacks in a portal (one stack per position × tone).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `position` | `"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"` | `"top-right"` | Default position for `notify()` calls without one. |
+| `max` | `number` | `5` | Max toasts per stack; older ones are dropped. |
+| `labels` | `Partial<NotificationLabels>` | — | Built-in strings, see Labels. |
+| `children` | `ReactNode` | — (required) | The app. |
+
+### useNotifications()
+Must be called inside `NotificationProvider`; returns the store.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `notify` | `(options: NotificationOptions) => string` | — | Shows a toast and returns its id. |
+| `dismiss` | `(id: string) => void` | — | Closes one toast with its exit animation. |
+| `dismissAll` | `() => void` | — | Closes every toast. |
+| `items` | `NotificationRecord[]` | — | Active toasts (without the ones playing their exit). |
+
+### notify(options)
+`NotificationOptions`: what the toast shows and how it closes.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `tone` | `"info" \| "success" \| "warning" \| "danger"` | `"info"` | Semantic color and tone icon; `danger` and `warning` are announced assertively. |
+| `title` | `string` | — (required) | The message. |
+| `description` | `string` | — | Secondary text under the title. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Padding, icon and text tier of the card. |
+| `icon` | `ReactNode` | — | Replaces the tone icon. |
+| `badge` | `string \| number` | — | A counter next to the title (a `Badge` in the tone hue). |
+| `action` | `{ label: string; onClick: () => void }` | — | One soft button under the text, one tier below the card. |
+| `position` | `"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"` | — | Default: the provider's `position`. |
+| `duration` | `number` | `5000` | Auto-close delay in ms; the timer pauses on hover, focus, swipe and in a hidden tab. |
+| `persistent` | `boolean` | `false` | No timer and no countdown line. |
+| `closable` | `boolean` | `true` | Shows the close button. |
+| `onDismiss` | `() => void` | — | The toast left: its timer ran out, the close button, a swipe, `dismiss()`, or a newer toast pushed it out of a full stack. Called once — the place to commit an action the toast offered to undo. |
+
+### NotificationCard
+`ref` → `HTMLElement`. A static `<article role="status|alert">` card without a timer: inline confirmations, docs, mockups.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `tone` | `"info" \| "success" \| "warning" \| "danger"` | `"info"` | Semantic color and tone icon; `danger` and `warning` are announced assertively. |
+| `title` | `string` | — (required) | The message. |
+| `description` | `string` | — | Secondary text under the title. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Padding, icon and text tier of the card. |
+| `icon` | `ReactNode` | — | Replaces the tone icon. |
+| `badge` | `string \| number` | — | A counter next to the title (a `Badge` in the tone hue). |
+| `action` | `{ label: string; onClick: () => void }` | — | One soft button under the text, one tier below the card. |
+| `onDismiss` | `() => void` | — | Shows the close button and is called on its click. |
+| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "title" \| "children" \| "role">` | — | `className` and the other attributes of the `<article>`. |
+
+## Variants
+
+### tone
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `info` | raised card, info icon, info countdown | neutral events, messages | yes |
+| `success` | success icon | completed actions | |
+| `warning` | warning icon | something needs attention soon | |
+| `danger` | danger icon | failed actions; pair with `action` to retry | |
+
+The card is always a raised surface without a border; only the icon, the badge and the countdown take the tone. Each tone forms its own stack in a position.
+
+### size
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `xs` · `s` | compact padding and text; action `xs` | dense apps | |
+| `m` | padding 16, title 14/20, description 13/20; action `s` | default | yes |
+| `l` · `xl` | larger padding and text; action `m` / `l` | touch and large screens | |
+
+### position
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `top-right` | top-right corner, grows down | desktop apps | yes |
+| `top-center` · `top-left` | top edge | global events; right panels occupy the right | |
+| `bottom-right` · `bottom-center` · `bottom-left` | bottom edge, grows up | chat-like or mobile-like layouts | |
+
+### Flags
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `persistent` | no countdown line, no auto-close | errors the user must read or act on | `false` |
+| `closable` | close button | turn off for very short confirmations | `true` |
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| tone / size | options | `data-tone`, `data-size` on the card |
+| persistent | `persistent` (always on a static card) | `data-persistent="true"` |
+| stack position | store | `data-stack-depth`, `data-stack-expanded` on the card; `data-stack-index`, `data-hidden`, `data-state` on the item; `data-expanded` on the stack |
+| paused | hover or focus in the stack, a swipe, a hidden tab | the countdown stops and resumes where it stopped |
+| swipe | pointer drag | `data-swipe="drag" \| "return" \| "out"`, `data-swipe-axis` on the motion wrapper |
+
+Collapsed stacks show up to 3 cards peeking behind each other. Hover or keyboard focus expands the stack. Toasts enter from their edge and leave toward it, faster than they came; a swipe toward the edge dismisses (past `--prime-space-12` or a quick flick). Under `prefers-reduced-motion` toasts are removed without an exit animation.
+
+## Layout & spacing
+- A fixed, portaled viewport; zones are `--prime-space-5` from the edge (`--prime-space-3` below 640px) plus the safe-area insets (`env(safe-area-inset-*)`), at most 24rem wide.
+- Cards in an expanded stack are `--prime-space-2` apart.
+- The viewport takes pointer events only over the cards.
+
+## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Focuses the action and the close button; focus inside a stack expands it and pauses the timers. |
+| `Enter` · `Space` | Presses the action or the close button. |
+
+### ARIA
+- Each stack is an `<ol>` named by the region label of its position; each card is an `<article>`: `role="status"` + `aria-live="polite"`, or `role="alert"` + `aria-live="assertive"` for `warning` / `danger`.
+- The icon and the countdown are `aria-hidden`; the close button is named by `labels.close`.
+- Do not keep the only copy of important information in a toast with a timer — use `persistent` or a Banner.
+
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+| Key | Default | Used for |
+|---|---|---|
+| `close` | `"Закрыть уведомление"` | `aria-label` of the close button. |
+| `regionTopLeft` | `"Уведомления сверху слева"` | Name of the top-left toast list. |
+| `regionTopCenter` | `"Уведомления сверху по центру"` | Name of the top-center toast list. |
+| `regionTopRight` | `"Уведомления сверху справа"` | Name of the top-right toast list. |
+| `regionBottomLeft` | `"Уведомления снизу слева"` | Name of the bottom-left toast list. |
+| `regionBottomCenter` | `"Уведомления снизу по центру"` | Name of the bottom-center toast list. |
+| `regionBottomRight` | `"Уведомления снизу справа"` | Name of the bottom-right toast list. |
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A provider at the app root and a success toast from any screen — `NotificationProvider`, `notify`. |
+| [structure.tsx](examples/structure.tsx) | Optional parts on static cards: a custom icon, a counter, an action and a close button, or a title alone — `icon`, `badge`, `action`, `onDismiss`. |
+| [sizes.tsx](examples/sizes.tsx) | Every tier changes padding, icon and text of the card — `size`. |
+| [placement.tsx](examples/placement.tsx) | Toasts in each corner or centered at the top or bottom edge — `position`. |
+| [tones.tsx](examples/tones.tsx) | The four tones: the icon carries the meaning; danger and warning are announced at once — `tone`. |
+| [stacking.tsx](examples/stacking.tsx) | Toasts of one position and tone stack; hover expands the stack and pauses the timers — `max`, `items`, `dismissAll`. |
+| [undo.tsx](examples/undo.tsx) | Delete at once and offer to undo: the row leaves the list, the toast brings it back, and the deletion is sent only when the toast leaves without an undo — `onDismiss`, `action`. |
+| [dismiss.tsx](examples/dismiss.tsx) | A short timer, a toast that stays until closed, and one without a close button — `duration`, `persistent`, `closable`. |
+| [in-form.tsx](examples/in-form.tsx) | Saving a form: the button shows loading, then a success toast or an error toast with a retry action — `notify`, `action`. |
+
+## Mistakes
+- Calling `useNotifications()` outside `NotificationProvider` → it throws; wrap the app root once.
+- Several providers in one app → one provider at the root.
+- `tone: "error"` → use `tone: "danger"`.
+- Expecting `action` to close the toast → call `dismiss(id)` in `onClick` if it should.
+- Sending a deletion to the server before the «Отменить» toast is gone → send it in `onDismiss`, unless the action ran.
+- A toast for a permanent state («пробный период закончится через 3 дня») → use a Banner.
+
+## Related
+- **Built from:** [Button](../button/COMPONENT.md) (action, close), [Badge](../badge/COMPONENT.md) (`badge`), Icon (`status.*`, `action.close`)
+- **See also:** [Banner](../banner/COMPONENT.md), [Button](../button/COMPONENT.md), [Modal](../modal/COMPONENT.md)

package/dist/skill/reference/components/notification/examples/dismiss.tsx

@@ -0,0 +1,50 @@
+/** A short timer, a toast that stays until closed, and one without a close button — `duration`, `persistent`, `closable`. */
+import { Button, NotificationProvider, useNotifications } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+function DismissButtons() {
+  const { notify } = useNotifications();
+  return (
+    <div className={styles.row}>
+      <Button.Root
+        variant="outline"
+        tone="neutral"
+        onClick={() => notify({ title: "Черновик сохранён", duration: 2000 })}
+      >
+        На 2 секунды
+      </Button.Root>
+      <Button.Root
+        variant="outline"
+        tone="neutral"
+        onClick={() =>
+          notify({
+            tone: "danger",
+            title: "Платёж отклонён",
+            description: "Банк не подтвердил операцию.",
+            persistent: true,
+            action: { label: "Повторить", onClick: () => undefined },
+          })
+        }
+      >
+        Без таймера
+      </Button.Root>
+      <Button.Root
+        variant="outline"
+        tone="neutral"
+        onClick={() => notify({ tone: "success", title: "Ссылка скопирована", closable: false })}
+      >
+        Без кнопки закрытия
+      </Button.Root>
+    </div>
+  );
+}
+
+export default function NotificationDismissExample() {
+  // In an app NotificationProvider wraps the root once; here it keeps the example self-contained.
+  return (
+    <NotificationProvider>
+      <DismissButtons />
+    </NotificationProvider>
+  );
+}

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

@@ -0,0 +1,52 @@
+/* Layout of the Notification scenarios: semantic tokens only. */
+
+/* Static cards in a column about as wide as a toast (24rem). */
+.cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
+  width: min(100%, calc(var(--prime-space-24) * 4));
+  min-width: 0;
+}
+
+/* Buttons that raise toasts. */
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--prime-space-2);
+}
+
+/* placement.tsx: a 16rem position picker. */
+.select {
+  width: calc(var(--prime-space-16) * 4);
+  max-width: 100%;
+}
+
+/* in-form.tsx: a settings form in a Card. */
+.formCard {
+  width: min(100%, var(--prime-modal-width-s));
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-5);
+  padding: var(--prime-card-padding-m);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--prime-space-2);
+}
+
+/* undo.tsx: a task with its delete action at the end. */
+.taskRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prime-space-3);
+  min-width: 0;
+}

package/dist/skill/reference/components/notification/examples/in-form.tsx

@@ -0,0 +1,64 @@
+/** Saving a form: the button shows loading, then a success toast or an error toast with a retry action — `notify`, `action`. */
+import { Button, Card, Input, NotificationProvider, useNotifications } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+function ReportsForm() {
+  const { notify } = useNotifications();
+  const [saving, setSaving] = React.useState(false);
+  const [email, setEmail] = React.useState("team@prime.dev");
+
+  const save = () => {
+    setSaving(true);
+    window.setTimeout(() => {
+      setSaving(false);
+      if (email.includes("@")) {
+        notify({
+          tone: "success",
+          title: "Настройки сохранены",
+          description: `Отчёты придут на ${email}.`,
+        });
+      } else {
+        notify({
+          tone: "danger",
+          title: "Не удалось сохранить",
+          description: "Укажите корректный адрес почты.",
+          action: { label: "Повторить", onClick: save },
+        });
+      }
+    }, 700);
+  };
+
+  return (
+    <Card.Root className={styles.formCard}>
+      <form
+        className={styles.form}
+        onSubmit={(event) => {
+          event.preventDefault();
+          save();
+        }}
+      >
+        <Input.Root label="Почта для отчётов" hint="Без «@» сохранение завершится ошибкой" required>
+          <Input.Wrapper>
+            <Input.Field value={email} onChange={(event) => setEmail(event.target.value)} />
+          </Input.Wrapper>
+        </Input.Root>
+        <div className={styles.actions}>
+          <Button.Root type="submit" loading={saving}>
+            Сохранить
+          </Button.Root>
+        </div>
+      </form>
+    </Card.Root>
+  );
+}
+
+export default function NotificationInFormExample() {
+  // In an app NotificationProvider wraps the root once; here it keeps the example self-contained.
+  return (
+    <NotificationProvider>
+      <ReportsForm />
+    </NotificationProvider>
+  );
+}

package/dist/skill/reference/components/notification/examples/overview.tsx

@@ -0,0 +1,24 @@
+/** A provider at the app root and a success toast from any screen — `NotificationProvider`, `notify`. */
+import { Button, NotificationProvider, useNotifications } from "prime-ui-kit";
+
+function CopyLinkButton() {
+  const { notify } = useNotifications();
+  return (
+    <Button.Root
+      variant="outline"
+      tone="neutral"
+      onClick={() => notify({ tone: "success", title: "Ссылка на счёт скопирована" })}
+    >
+      Скопировать ссылку
+    </Button.Root>
+  );
+}
+
+export default function NotificationOverviewExample() {
+  // In an app NotificationProvider wraps the root once; here it keeps the example self-contained.
+  return (
+    <NotificationProvider>
+      <CopyLinkButton />
+    </NotificationProvider>
+  );
+}

package/dist/skill/reference/components/notification/examples/placement.tsx

@@ -0,0 +1,66 @@
+/** Toasts in each corner or centered at the top or bottom edge — `position`. */
+import {
+  Button,
+  type NotificationPosition,
+  NotificationProvider,
+  Select,
+  useNotifications,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const POSITIONS: { value: NotificationPosition; label: string }[] = [
+  { value: "top-left", label: "Сверху слева" },
+  { value: "top-center", label: "Сверху по центру" },
+  { value: "top-right", label: "Сверху справа" },
+  { value: "bottom-left", label: "Снизу слева" },
+  { value: "bottom-center", label: "Снизу по центру" },
+  { value: "bottom-right", label: "Снизу справа" },
+];
+
+function PositionPicker() {
+  const { notify } = useNotifications();
+  const [position, setPosition] = React.useState<NotificationPosition>("top-right");
+
+  return (
+    <div className={styles.row}>
+      <div className={styles.select}>
+        <Select.Root value={position} onValueChange={(v) => setPosition(v as NotificationPosition)}>
+          <Select.Trigger aria-label="Позиция уведомлений">
+            <Select.Value />
+          </Select.Trigger>
+          <Select.Content>
+            {POSITIONS.map((item) => (
+              <Select.Item key={item.value} value={item.value}>
+                {item.label}
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select.Root>
+      </div>
+      <Button.Root
+        variant="outline"
+        tone="neutral"
+        onClick={() =>
+          notify({
+            title: "Новое сообщение",
+            description: "Поддержка ответила в чате.",
+            position,
+          })
+        }
+      >
+        Показать
+      </Button.Root>
+    </div>
+  );
+}
+
+export default function NotificationPlacementExample() {
+  // In an app NotificationProvider wraps the root once; here it keeps the example self-contained.
+  return (
+    <NotificationProvider>
+      <PositionPicker />
+    </NotificationProvider>
+  );
+}

package/dist/skill/reference/components/notification/examples/sizes.tsx

@@ -0,0 +1,22 @@
+/** Every tier changes padding, icon and text of the card — `size`. */
+import { NotificationCard } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+export default function NotificationSizesExample() {
+  return (
+    <div className={styles.cards}>
+      {SIZES.map((size) => (
+        <NotificationCard
+          key={size}
+          size={size}
+          title={`Отчёт готов · ${size}`}
+          description="Выгрузка за сентябрь доступна в разделе «Отчёты»."
+          onDismiss={() => undefined}
+        />
+      ))}
+    </div>
+  );
+}

package/dist/skill/reference/components/notification/examples/stacking.tsx

@@ -0,0 +1,45 @@
+/** Toasts of one position and tone stack; hover expands the stack and pauses the timers — `max`, `items`, `dismissAll`. */
+import { Button, NotificationProvider, Typography, useNotifications } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+function StackControls() {
+  const { notify, dismissAll, items } = useNotifications();
+  return (
+    <div className={styles.row}>
+      <Button.Root
+        variant="outline"
+        tone="neutral"
+        onClick={() =>
+          notify({
+            tone: "success",
+            title: "Заказ оформлен",
+            description: `№ ${48_213 + items.length}, доставка завтра.`,
+          })
+        }
+      >
+        Оформить заказ
+      </Button.Root>
+      <Button.Root
+        variant="ghost"
+        tone="neutral"
+        disabled={items.length === 0}
+        onClick={dismissAll}
+      >
+        Закрыть все
+      </Button.Root>
+      <Typography as="span" variant="body-s" tone="secondary">
+        Активных: {items.length}
+      </Typography>
+    </div>
+  );
+}
+
+export default function NotificationStackingExample() {
+  // In an app NotificationProvider wraps the root once; here it keeps the example self-contained.
+  return (
+    <NotificationProvider max={4}>
+      <StackControls />
+    </NotificationProvider>
+  );
+}

package/dist/skill/reference/components/notification/examples/structure.tsx

@@ -0,0 +1,20 @@
+/** Optional parts on static cards: a custom icon, a counter, an action and a close button, or a title alone — `icon`, `badge`, `action`, `onDismiss`. */
+import { Icon, NotificationCard } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function NotificationStructureExample() {
+  return (
+    <div className={styles.cards}>
+      <NotificationCard
+        title="Новые ответы в обсуждении"
+        description="Мария и ещё двое ответили на ваш комментарий."
+        icon={<Icon name="object.message" />}
+        badge={3}
+        action={{ label: "Открыть", onClick: () => undefined }}
+        onDismiss={() => undefined}
+      />
+      <NotificationCard tone="success" title="Ссылка скопирована" />
+    </div>
+  );
+}

package/dist/skill/reference/components/notification/examples/tones.tsx

@@ -0,0 +1,25 @@
+/** The four tones: the icon carries the meaning; danger and warning are announced at once — `tone`. */
+import { NotificationCard } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const TONES = [
+  { tone: "success", title: "Изменения сохранены", description: "Профиль компании обновлён." },
+  { tone: "info", title: "Обновление ночью", description: "Сервис недоступен с 02:00 до 03:00." },
+  {
+    tone: "warning",
+    title: "Заканчивается подписка",
+    description: "Оплата закончится через 3 дня.",
+  },
+  { tone: "danger", title: "Не удалось отправить", description: "Проверьте соединение." },
+] as const;
+
+export default function NotificationTonesExample() {
+  return (
+    <div className={styles.cards}>
+      {TONES.map((item) => (
+        <NotificationCard key={item.tone} {...item} onDismiss={() => undefined} />
+      ))}
+    </div>
+  );
+}

package/dist/skill/reference/components/notification/examples/undo.tsx

@@ -0,0 +1,61 @@
+/** Delete at once and offer to undo: the row leaves the list, the toast brings it back, and the deletion is sent only when the toast leaves without an undo — `onDismiss`, `action`. */
+import { Button, NotificationProvider, Typography, useNotifications } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const TASKS = ["Подготовить договор", "Выставить счёт №318", "Созвониться с юристом"];
+
+function TaskList() {
+  const { notify, dismiss } = useNotifications();
+  const [tasks, setTasks] = React.useState(TASKS);
+  const [sent, setSent] = React.useState<string[]>([]);
+
+  const remove = (task: string) => {
+    setTasks((list) => list.filter((item) => item !== task));
+    let undone = false;
+    const id = notify({
+      title: "Задача удалена",
+      description: task,
+      action: {
+        label: "Отменить",
+        onClick: () => {
+          undone = true;
+          setTasks((list) => [...list, task]);
+          dismiss(id);
+        },
+      },
+      // The toast is gone: without an undo the deletion goes to the server now.
+      onDismiss: () => {
+        if (!undone) setSent((list) => [...list, task]);
+      },
+    });
+  };
+
+  return (
+    <div className={styles.cards}>
+      {tasks.map((task) => (
+        <div key={task} className={styles.taskRow}>
+          <Typography as="span" variant="body-m">
+            {task}
+          </Typography>
+          <Button.Root variant="ghost" tone="danger" onClick={() => remove(task)}>
+            Удалить
+          </Button.Root>
+        </div>
+      ))}
+      <Typography as="p" variant="caption" tone="muted">
+        Отправлено на сервер: {sent.length > 0 ? sent.join(", ") : "ничего"}
+      </Typography>
+    </div>
+  );
+}
+
+export default function NotificationUndoExample() {
+  // In an app NotificationProvider wraps the root once; here it keeps the example self-contained.
+  return (
+    <NotificationProvider>
+      <TaskList />
+    </NotificationProvider>
+  );
+}