@olddevs/ui 0.0.0-stage → 4.0.0

package/src/components/inputs/UploadQueue.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { useMessages } from "../../i18n/useMessages.js";
+import { cn } from "../../lib/cn.js";
+import { PROGRESS_STATUS_TONE, type ProgressStatus } from "../../lib/progress-status.js";
+import { TONE_TOKENS, type Tone } from "../../lib/variants.js";
+import { Progress } from "../actions/Progress.js";
+import { StatusBadge } from "../actions/StatusBadge.js";
+
+/*
+  Тон по состоянию со страховкой от незнакомого значения.
+
+  `??` отвечает только за отсутствующий ключ, а `state` приходит с бэкенда:
+  строка `"constructor"` или `"toString"` нашла бы в обычном объекте унаследованную
+  функцию, и `TONE_TOKENS[функция]` дал бы `undefined.fg`. Поэтому ключ
+  проверяется на собственность — так же, как явный `tone`.
+*/
+function stateTone(state: ProgressStatus): Tone {
+  return Object.hasOwn(PROGRESS_STATUS_TONE, state) ? PROGRESS_STATUS_TONE[state] : "neutral";
+}
+
+export interface UploadItem {
+  /** Ключ строки, уникальный в пределах `items`. */
+  id: string;
+  /** Имя файла или адрес. */
+  name: ReactNode;
+  /**
+   * Размер — УЖЕ отформатированный.
+   *
+   * Кит не форматирует: «2,4 МБ» и «2.4 MB» отличаются не только
+   * разделителем, но и единицами, а выбор единиц (МБ или МиБ) — решение
+   * приложения, а не дизайн-системы.
+   */
+  size?: ReactNode;
+  /** Превью — обычно `Image`. Без него место не занимается. */
+  preview?: ReactNode;
+  /** Состояние элемента. Словарь общий на весь кит — `ProgressStatus`. */
+  state: ProgressStatus;
+  /**
+   * `0`–`100`, `null` — прогресс НЕИЗВЕСТЕН, `undefined` — полосы нет вовсе.
+   *
+   * Разница между `null` и `0` та же, что у `Progress`: ноль означает «начали и
+   * пока ничего не сделали», `null` — «сколько всего работы, неизвестно».
+   */
+  progress?: number | null;
+  /** Подпись состояния бейджем: «Дубль», «Обработка». Нет — бейджа нет. */
+  statusLabel?: ReactNode;
+  /**
+   * Тон бейджа и полосы прогресса строки.
+   *
+   * Тон строки — ДОМЕННЫЙ статус поверх механического `state`: «Дубль» при
+   * технически успешной загрузке — `"warning"`, а не зелёный успех.
+   *
+   * Красит бейдж и полосу прогресса. Нет — тон выводится из `state` общей
+   * таблицей `ProgressStatus`, как раньше. Цвет текста `meta` упавшего элемента
+   * на `tone` не реагирует: он следует `state`.
+   */
+  tone?: Tone;
+  /** Вторая строка: текст ошибки, идентификатор задачи. */
+  meta?: ReactNode;
+  /** Действия справа — обычно `Button size="sm"`: повтор, отмена, убрать. */
+  actions?: ReactNode;
+}
+
+export interface UploadQueueProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  /** Строки очереди в порядке показа. */
+  items: UploadItem[];
+  /** Доступное имя списка. */
+  "aria-label"?: string;
+  /** Что показать при пустой очереди. Нет — не рисуется ничего. */
+  empty?: ReactNode;
+}
+
+/**
+ * Менеджер загрузок: что уже отправлено, что идёт и что упало.
+ *
+ * ГРАНИЦА С `FileDropzone`: область — это ВЫБОР файла, очередь — его судьба.
+ * Их часто путают, потому что на экране они стоят рядом; но выбор кончается в
+ * тот момент, когда файлы получены, а очередь с этого момента только
+ * начинается.
+ *
+ * ТРАНСПОРТА ЗДЕСЬ НЕТ. Отправка, повтор, отмена и опрос задач на сервере —
+ * знание потребителя: формат ответов, адреса и правила повтора принадлежат
+ * приложению (ADR-0027).
+ * Кит даёт форму элемента, прогресс, состояния и объявление итога; очереди он
+ * не хранит — элементы и обработчики приходят пропами. Прецедент — владение
+ * состоянием таблицы (ADR-0023).
+ *
+ * ИТОГ ОБЪЯВЛЯЕТСЯ ЖИВОЙ ОБЛАСТЬЮ, и это не украшение. Частичный успех —
+ * «девять из двенадцати, одна ошибка» — иначе виден только тому, кто
+ * просматривает список глазами; пользователь скринридера, отправив дюжину
+ * файлов, не узнаёт о единственной упавшей вовсе. Область смонтирована ВСЕГДА,
+ * подменяется только текст: вставленная вместе с сообщением, она объявляется
+ * ненадёжно — часть скринридеров успевает её пропустить. Тот же приём, что в
+ * `FileDropzone`.
+ *
+ * СОСТОЯНИЕ — МЕХАНИКА, ПОДПИСЬ И ТОН — ДОМЕН. Четыре состояния описывают
+ * судьбу работы; «Дубль» и «На модерации» приходят подписью (`statusLabel`), а
+ * их цвет, если он должен отличаться от цвета состояния, — `tone`. Как у
+ * `StatusBadge`, который приехал из фронта, оставив снаружи словарь из
+ * одиннадцати доменных статусов.
+ */
+export const UploadQueue = forwardRef<HTMLDivElement, UploadQueueProps>(function UploadQueue(
+  { items, empty, className, "aria-label": ariaLabel, ...rest },
+  ref
+) {
+  const messages = useMessages();
+
+  const done = items.filter((i) => i.state === "success").length;
+  const failed = items.filter((i) => i.state === "failed").length;
+
+  /*
+    Объявляется УСТОЯВШИЙСЯ итог, а не каждый промежуточный переход.
+
+    Текст области — это `summary({done, total, failed})`, и он менялся при
+    каждом переходе файла в `success`/`failed`. Отправка двенадцати файлов
+    давала двенадцать сообщений подряд — «1 of 12 uploaded», «2 of 12
+    uploaded», … Очередь `polite` их не схлопывает, и пользователь скринридера
+    получал минуту непрерывной речи вместо одного сообщения о результате.
+    Докстрока обосновывала объявление ИТОГА, а объявлялся ход.
+  */
+  const pending = items.some((i) => i.state === "pending" || i.state === "running");
+  const settled =
+    items.length > 0 && !pending
+      ? messages.uploadQueue.summary({ done, total: items.length, failed })
+      : "";
+
+  return (
+    <div ref={ref} className={cn("flex flex-col gap-2", className)} {...rest}>
+      {items.length === 0 ? (
+        empty
+      ) : (
+        /*
+          Настоящий список, а не набор `div`. Скринридер обязан сообщить, что
+          это очередь и сколько в ней элементов; набор карточек не сообщает ни
+          того, ни другого.
+        */
+        <ul aria-label={ariaLabel ?? messages.uploadQueue.label} className="flex flex-col gap-2">
+          {items.map((item) => {
+            /*
+              Тон строки: явный `tone`, иначе из `state`, иначе нейтральный.
+
+              Явный тон проверяется по словарю: потребитель на JS собирает его из
+              собственной таблицы статусов, и неизвестное значение дало бы
+              `undefined.fg` внутри бейджа, то есть падение всего экрана. Такой
+              тон считается незаданным — как и неизвестный `state`.
+            */
+            const tone: Tone =
+              item.tone !== undefined && Object.hasOwn(TONE_TOKENS, item.tone)
+                ? item.tone
+                : stateTone(item.state);
+            return (
+              <li
+                key={item.id}
+                className="bg-bg-2 border-line-soft flex items-center gap-3 rounded-lg border px-3 py-2.5"
+              >
+                {item.preview != null && (
+                  <div className="bg-bg-3 border-line-soft size-12 shrink-0 overflow-hidden rounded-md border">
+                    {item.preview}
+                  </div>
+                )}
+
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="truncate text-[13px] font-medium">{item.name}</span>
+                    {item.size != null && (
+                      <span className="text-fg-2 shrink-0 text-[11px] tabular-nums">
+                        {item.size}
+                      </span>
+                    )}
+                  </div>
+
+                  {item.progress !== undefined && (
+                    <div className="mt-1.5">
+                      {/*
+                        Имя полосы собирается из имени файла, а не задаётся
+                        безликим «Загрузка»: в очереди из дюжины строк
+                        одинаковые имена не говорят, о каком файле речь.
+                        Строка сюда годится не всегда — `name` это `ReactNode`,
+                        — поэтому берётся текст, только когда он текст.
+                      */}
+                      {/*
+                        Полоса следует `tone`, а не `state`: она сидит в одной
+                        строке с бейджем, и зелёная полоса рядом с жёлтым
+                        «Дубль» говорит о том же элементе два разных слова.
+                        Механику (идёт, не идёт, неизвестно) полоса показывает
+                        сама — формой и `aria-valuenow`, а не цветом.
+                      */}
+                      <Progress
+                        value={item.progress}
+                        tone={tone}
+                        size="sm"
+                        label={
+                          typeof item.name === "string"
+                            ? messages.uploadQueue.itemProgress({ name: item.name })
+                            : messages.uploadQueue.progress
+                        }
+                      />
+                    </div>
+                  )}
+
+                  {item.meta != null && (
+                    <div
+                      className={cn(
+                        "mt-0.5 text-[11px]",
+                        // Цвет сбоя — из словаря тонов: тест сверяет его со словарём.
+                        item.state === "failed" ? TONE_TOKENS.danger.fg : "text-fg-2"
+                      )}
+                    >
+                      {item.meta}
+                    </div>
+                  )}
+                </div>
+
+                <div className="flex shrink-0 items-center gap-1.5">
+                  {item.statusLabel != null && (
+                    <StatusBadge tone={tone}>{item.statusLabel}</StatusBadge>
+                  )}
+                  {item.actions}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {/*
+        Область объявления смонтирована всегда, а содержимое подменяется.
+        `role="status"`, а не `alert`: очередь — это ход работы, а не сбой, и
+        перебивать им текущую речь незачем даже при упавшем файле.
+
+        Пустая очередь итога не даёт: «ноль из нуля» — не сообщение.
+      */}
+      <div role="status" aria-live="polite" className="sr-only">
+        {settled}
+      </div>
+    </div>
+  );
+});

package/src/components/navigation/Accordion.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  Button as AriaButton,
+  Disclosure,
+  DisclosureGroup,
+  DisclosurePanel,
+  Heading as AriaHeading,
+  type DisclosureGroupProps,
+} from "react-aria-components";
+import { ChevronDownIcon } from "../../icons.js";
+import { cn } from "../../lib/cn.js";
+
+export interface AccordionProps extends Omit<
+  DisclosureGroupProps,
+  "className" | "style" | "allowsMultipleExpanded"
+> {
+  /**
+   * Раскрывать несколько секций сразу.
+   *
+   * Родной `allowsMultipleExpanded` из типа убран намеренно: `{...rest}`
+   * раскладывается ПЕРЕД умолчанием кита, и переданный снаружи проп молча
+   * проигрывал бы — компилировалось бы, а гармошка вела себя по-старому.
+   *
+   * Умолчание — ОДНА: набор секций читают по очереди, и раскрытые «про запас»
+   * превращают экран в простыню, где текущая секция уезжает за нижний край
+   * ровно в момент, когда её открыли. Множественное включают там, где секции
+   * сравнивают между собой.
+   */
+  multiple?: boolean;
+  /** Дополнительные классы на корень гармошки. */
+  className?: string;
+  /** Секции гармошки — набор `AccordionItem`. */
+  children?: ReactNode;
+}
+
+export interface AccordionItemProps {
+  /** Идентификатор секции: по нему работает `expandedKeys`. */
+  id: string;
+  /** Заголовок секции — содержимое кнопки раскрытия. Может быть разметкой. */
+  title: ReactNode;
+  /** Блокирует секцию: кнопка раскрытия неактивна, состояние не меняется. */
+  disabled?: boolean;
+  /** Дополнительные классы на секцию. */
+  className?: string;
+  /** Содержимое панели секции; показывается в раскрытом состоянии. */
+  children?: ReactNode;
+}
+
+/** Секция гармошки. */
+export function AccordionItem({ id, title, disabled, className, children }: AccordionItemProps) {
+  return (
+    <Disclosure
+      id={id}
+      isDisabled={disabled}
+      className={cn("border-line-soft border-b", className)}
+    >
+      {({ isExpanded }) => (
+        <>
+          {/*
+        Заголовок обёрнут в `Heading` react-aria, а не в `div`: кнопка
+        раскрытия обязана лежать внутри заголовка — так скринридер попадает в
+        секцию по списку заголовков, а не только табом по кнопкам.
+      */}
+          <AriaHeading className="m-0">
+            <AriaButton
+              slot="trigger"
+              className={cn(
+                "text-fg-0 flex w-full cursor-pointer items-center justify-between gap-3 py-3 text-left text-sm font-semibold outline-none",
+                "hover:text-accent-strong focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:outline-offset-2",
+                "disabled:text-fg-3 disabled:cursor-not-allowed"
+              )}
+            >
+              {title}
+              {/*
+            Поворот шеврона берётся РЕНДЕР-ПРОПОМ, а не вариантом `expanded:`.
+            Вариант плагина требует, чтобы `data-expanded` висел на самом
+            крашеном элементе, а react-aria ставит его на обёртку `Disclosure` —
+            ни кнопка, ни иконка его не несут. Класс молча не срабатывал:
+            шеврон не поворачивался вовсе, и ни снимок (периферия), ни axe
+            этого не видят. Ровно правило 2 из «смешанного кита».
+          */}
+              <ChevronDownIcon
+                size={16}
+                aria-hidden
+                className={cn(
+                  "text-fg-3 shrink-0 transition-transform motion-reduce:transition-none",
+                  isExpanded && "rotate-180"
+                )}
+              />
+            </AriaButton>
+          </AriaHeading>
+          <DisclosurePanel className="text-fg-1 pb-3 text-sm">{children}</DisclosurePanel>
+        </>
+      )}
+    </Disclosure>
+  );
+}
+
+/**
+ * Гармошка: набор сворачиваемых секций.
+ *
+ * Поведение у react-aria: клавиатура, `aria-expanded`, связь кнопки с панелью,
+ * скрытие содержимого от скринридера в свёрнутом виде. Кит держит вид и
+ * умолчание про число одновременно раскрытых секций.
+ */
+export function Accordion({ multiple = false, className, children, ...rest }: AccordionProps) {
+  return (
+    <DisclosureGroup
+      {...rest}
+      allowsMultipleExpanded={multiple}
+      className={cn("border-line-soft w-full border-t", className)}
+    >
+      {children}
+    </DisclosureGroup>
+  );
+}

package/src/components/navigation/Breadcrumbs.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { ChevronRightIcon } from "../../icons.js";
+import { cn } from "../../lib/cn.js";
+import { useMessages } from "../../i18n/useMessages.js";
+import { Link } from "../content/Link.js";
+
+export interface Crumb {
+  /** Подпись звена. */
+  label: string;
+  /** Адрес. У последнего звена его не бывает — см. докстроку. */
+  href?: string;
+}
+
+export interface BreadcrumbsProps {
+  /** Звенья пути по порядку, от корня к текущему экрану. */
+  items: Crumb[];
+  /**
+   * Сколько звеньев показывать целиком, прежде чем свернуть середину.
+   *
+   * Цепочка длиннее предела сворачивается в «первое … последние два»: середина
+   * пути ничего не говорит о том, где пользователь находится, а вот первое
+   * звено (корень) и ближайшие к текущему — говорят.
+   */
+  maxItems?: number;
+  /** Дополнительные классы на `nav`. */
+  className?: string;
+  /** Доступное имя навигации. По умолчанию берётся из словаря сообщений. */
+  "aria-label"?: string;
+}
+
+/**
+ * Хлебные крошки: путь до текущего экрана.
+ *
+ * **Последнее звено — не ссылка**, и это не мелочь: ссылка на страницу, на
+ * которой уже находишься, ничего не делает по нажатию, а скринридер объявляет
+ * её ссылкой — то есть обещает переход, которого не будет. Текущее звено
+ * помечается `aria-current="page"`.
+ *
+ * Разметка — `nav` со списком: скринридер даёт по ней прыжок «к навигации» и
+ * читает число звеньев. Строка из ссылок через «/» ни того, ни другого не даёт.
+ */
+export function Breadcrumbs({
+  items,
+  maxItems = 4,
+  className,
+  "aria-label": ariaLabel,
+}: BreadcrumbsProps) {
+  const messages = useMessages();
+  /*
+    Сворачивание: первое звено, многоточие, последние два. Многоточие — не
+    ссылка и не кнопка: раскрывать середину некуда, а кнопка обещала бы
+    действие. Оно помечено `aria-hidden`, потому что «…» вслух не значит
+    ничего; число пропущенных звеньев сообщает подпись рядом.
+  */
+  /*
+    Сворачивать имеет смысл, только когда есть ЧТО прятать.
+
+    Условие было просто `items.length > maxItems`, а свёрнутый вид всегда
+    собирался как «первое + … + последние два» — три звена. На коротких
+    цепочках это ломалось: при двух звеньях и `maxItems={1}` первое попадало и
+    в начало, и в хвост (корень рисовался ДВАЖДЫ), а `skipped` уходил в минус,
+    и подпись читалась как «Пропущено звеньев: −1». Вход достижим по
+    документации — страница крошек прямо советует уменьшать `maxItems` в узком
+    хедере.
+  */
+  const collapsed = items.length > maxItems && items.length > 3;
+  const shown: (Crumb | "gap")[] = collapsed ? [items[0]!, "gap", ...items.slice(-2)] : [...items];
+  const skipped = collapsed ? items.length - 3 : 0;
+
+  return (
+    <nav aria-label={ariaLabel ?? messages.breadcrumbs.label} className={cn("min-w-0", className)}>
+      <ol className="text-fg-2 flex flex-wrap items-center gap-1.5 text-sm">
+        {shown.map((item, index) => {
+          const last = index === shown.length - 1;
+
+          return (
+            <li
+              key={item === "gap" ? "gap" : `${item.label}-${index}`}
+              className="flex min-w-0 items-center gap-1.5"
+            >
+              {item === "gap" ? (
+                // `aria-hidden` обязателен: без него `title` даёт многоточию
+                // доступное имя, и скринридер читает «Пропущено звеньев: 3»
+                // как звено пути. Число он и так знает по длине списка.
+                <span
+                  aria-hidden
+                  className="text-fg-3"
+                  title={messages.breadcrumbs.collapsed({ count: skipped })}
+                >
+                  …
+                </span>
+              ) : last || !item.href ? (
+                // Текущее звено: не ссылка, но объявлено текущим.
+                <span aria-current={last ? "page" : undefined} className="text-fg-0 truncate">
+                  {item.label}
+                </span>
+              ) : (
+                <Link href={item.href} variant="quiet" tone="neutral" className="truncate">
+                  {item.label}
+                </Link>
+              )}
+              {!last ? (
+                <ChevronRightIcon size={12} aria-hidden className="text-fg-3 shrink-0" />
+              ) : null}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/components/navigation/ContextualSaveBar.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import type { CSSProperties, ReactNode } from "react";
+import { useMessages } from "../../i18n/useMessages.js";
+import { cn } from "../../lib/cn.js";
+import { TONE_TOKENS } from "../../lib/variants.js";
+import { Button } from "../actions/Button.js";
+
+export interface ContextualSaveBarProps {
+  /** Есть ли несохранённое. При `false` полоса не рисуется. */
+  visible: boolean;
+  /**
+   * Сколько полей изменено. Без него полоса говорит «есть несохранённые
+   * изменения»; с ним — называет число, и это заметно полезнее в длинной форме,
+   * где изменённое поле уехало из кадра.
+   */
+  count?: number;
+  /** Своя формулировка вместо умолчания — например, имя правимой сущности. */
+  message?: ReactNode;
+  /** Вызывается по кнопке сохранения. */
+  onSave: () => void;
+  /** Вызывается по кнопке отмены. Без обработчика кнопка не рисуется вовсе. */
+  onCancel?: () => void;
+  /** Идёт сохранение: кнопка показывает ход, обе кнопки выключены. */
+  saving?: boolean;
+  /** Текст отказа сохранения. Показывается в полосе и объявляется. */
+  error?: ReactNode;
+  /** Подпись кнопки сохранения. По умолчанию берётся из словаря сообщений. */
+  saveLabel?: ReactNode;
+  /** Подпись кнопки отмены. По умолчанию берётся из словаря сообщений. */
+  cancelLabel?: ReactNode;
+  /** Липнуть к нижнему краю окна браузера. Выключается там, где полоса стоит внутри окна (`Dialog`). */
+  sticky?: boolean;
+  /**
+   * Имя CSS-переменной с высотой нижней панели приложения; полоса прилипает на
+   * эту высоту выше края окна. По умолчанию `--bottombar-h`, которую публикует
+   * слот `bottomBar` у `AppShell`. Переменной нет (панели нет, или она скрыта на
+   * широком экране) — отступ `0px`, и полоса прилипает к самому низу.
+   *
+   * Работает только вместе со `sticky`.
+   */
+  offsetVar?: string;
+  /** Доступное имя полосы. */
+  "aria-label"?: string;
+  /** Дополнительные классы на полосу. */
+  className?: string;
+}
+
+/** Умолчание общее с `AppShell` (`bottomBarHeightVar`): так зовётся высота слота `bottomBar`. */
+const DEFAULT_OFFSET_VAR = "--bottombar-h";
+
+const PANEL =
+  "border-line z-20 mt-4 flex flex-col gap-2 rounded-[14px] border p-[10px_14px] " +
+  "backdrop-blur-md shadow-[var(--shadow-1)] sm:flex-row sm:items-center sm:gap-[14px]";
+
+/**
+ * Полоса несохранённых изменений: «есть что сохранить» и две кнопки.
+ *
+ * ГРАНИЦА ИЗ ТРЁХ СТРОК — как у `Banner`, и держать её стоит в голове:
+ *
+ *   `SelectionBar`      — про ВЫБОР: «Выбрано 12» и что с ними сделать.
+ *   `Banner`            — про ПРИЛОЖЕНИЕ: «идут работы», переживает навигацию.
+ *   `ContextualSaveBar` — про ТЕКУЩУЮ ФОРМУ: правки сделаны, но не отправлены.
+ *
+ * Отсюда и время жизни: полоса появляется с первой правкой и исчезает вместе с
+ * ней — сохранением или отменой. Она не переживает уход со страницы, и об уходе
+ * не предупреждает: перехват навигации принадлежит приложению, которое знает
+ * свой маршрутизатор, а не киту.
+ *
+ * ДАННЫХ ФОРМЫ КОМПОНЕНТ НЕ ЗНАЕТ. Он принимает «грязно или нет», число правок
+ * и два обработчика. Что считать правкой — решение потребителя: сравнение с
+ * исходным значением, счётчик касаний поля или ответ формы.
+ *
+ * НАД НИЖНЕЙ ПАНЕЛЬЮ, А НЕ ПОД НЕЙ. На телефоне нижнюю границу окна занимает
+ * `MobileTabBar` в слоте `bottomBar`; его высоту публикует `AppShell`
+ * (`--bottombar-h`), и полоса прилипает на эту высоту выше края — так же, как
+ * `SelectionBar` отсчитывает липкость от `--topbar-h`. Подпирать полосу
+ * `max-md:bottom-14` на глаз больше не нужно: зашитое число расходится с
+ * настоящей высотой панели (вырез экрана, перенос подписей).
+ *
+ * ЛИПНЕТ К НИЗУ, А НЕ К ВЕРХУ, И ЭТО РЕШЕНИЕ, А НЕ ВКУС. Наверху уже стоят
+ * шапка и `SelectionBar`, обе отсчитывают липкость от `--topbar-h`
+ * (ADR-0016, ADR-0019). Третий липкий слой сверху потребовал бы второй
+ * переменной высоты и пересмотра контракта — то есть цены, несопоставимой с
+ * задачей. Внизу свободно, и там же полосу ждут по привычке из админок.
+ *
+ * ПОЯВЛЕНИЕ СЛЫШНО, А НЕ ТОЛЬКО ВИДНО. Область объявления смонтирована всегда,
+ * содержимое подменяется — тот же приём, что в `UploadQueue`. Живая область,
+ * вставленная в дерево ВМЕСТЕ со своим текстом, объявляется ненадёжно: часть
+ * скринридеров успевает увидеть только пустой узел.
+ *
+ * `role="status"`, а не `alert`, даже при отказе сохранения. Отказ здесь
+ * сопровождает видимый текст в самой полосе, и перебивать им речь незачем;
+ * `alert` в этом месте дал бы то самое двойное чтение, о котором предупреждает
+ * ADR-0026.
+ *
+ * ЦЕНА ЭТОГО РЕШЕНИЯ НАЗВАНА ВСЛУХ: текст полосы попадает в дерево дважды —
+ * видимой строкой и скрытой живой областью. В режиме обзора скринридер прочтёт
+ * его два раза подряд. Размен сознательный: ненадёжное объявление появления
+ * хуже лишнего повтора, а другого способа получить оба свойства сразу нет.
+ * Тот же вопрос открыт у `MaskedInput` (ADR-0026) и закрывается одним прогоном
+ * с NVDA и VoiceOver — на оба компонента разом, а не по отдельности.
+ */
+export function ContextualSaveBar({
+  visible,
+  count,
+  message,
+  onSave,
+  onCancel,
+  saving = false,
+  error,
+  saveLabel,
+  cancelLabel,
+  sticky = true,
+  offsetVar = DEFAULT_OFFSET_VAR,
+  "aria-label": ariaLabel,
+  className,
+}: ContextualSaveBarProps) {
+  const messages = useMessages();
+  const bar = messages.contextualSaveBar;
+
+  const summary = message ?? (typeof count === "number" ? bar.changes({ count }) : bar.unsaved);
+  const announcement = !visible ? "" : saving ? bar.saving : (error ?? summary);
+
+  return (
+    <>
+      {visible ? (
+        <div
+          role="group"
+          aria-label={ariaLabel ?? bar.label}
+          // Отступ — КЛАССОМ, читающим переменную, а не инлайновым `bottom`: инлайн
+          // сильнее любого класса, и `bottom-*` потребителя (своя нижняя панель вне
+          // `AppShell`) молча проигрывал бы ему. Класс же `cn` сводит с классом
+          // потребителя, и побеждает потребитель.
+          className={cn(PANEL, sticky && "sticky bottom-[var(--od-savebar-bottom)]", className)}
+          style={
+            {
+              background: "var(--topbar-bg)",
+              "--od-savebar-bottom": `var(${offsetVar}, 0px)`,
+            } as CSSProperties
+          }
+        >
+          <div className="flex min-w-0 flex-col gap-0.5">
+            <span className="text-[13px] font-semibold">{summary}</span>
+            {error ? (
+              <span className={cn("text-[12px]", TONE_TOKENS.danger.fg)}>{error}</span>
+            ) : null}
+          </div>
+
+          <div className="hidden flex-1 sm:block" />
+
+          <div className="flex flex-wrap items-center gap-2">
+            {onCancel ? (
+              <Button size="sm" variant="ghost" onClick={onCancel} disabled={saving}>
+                {cancelLabel ?? bar.cancel}
+              </Button>
+            ) : null}
+            <Button size="sm" tone="accent" onClick={onSave} loading={saving}>
+              {saveLabel ?? bar.save}
+            </Button>
+          </div>
+        </div>
+      ) : null}
+
+      {/*
+        Смонтирована всегда — см. заголовок файла. Пустая строка, пока
+        сохранять нечего: «нет изменений» не сообщение, а шум.
+      */}
+      <div role="status" aria-live="polite" className="sr-only">
+        {announcement}
+      </div>
+    </>
+  );
+}