@olddevs/ui 0.0.0-stage → 4.0.0

package/src/lib/overlay-layer.ts

@@ -0,0 +1,163 @@
+/**
+ * Слои оверлеев: стек, признак чужого слоя и шкала z-index.
+ *
+ * Единственное место, где кит знает про порядок оверлеев. Решение и разбор
+ * альтернатив — ADR-0041.
+ *
+ * Задача существует потому, что кит строит оверлеи на ДВУХ библиотеках сразу:
+ * `Dialog`, `Drawer`, `ContextMenu`, `Popover`, `Tooltip` и `CommandPalette` —
+ * на Radix, а `Menu`, `Select`, `Combobox`, `TreeSelect` — на
+ * react-aria-components. Каждая ведёт свой стек и о чужом не знает. До волны 26
+ * решение «кто верхний» принималось четыре раза в четырёх файлах, каждый раз
+ * заново и каждый раз наполовину.
+ *
+ * Модуль НЕ оборачивает Radix и не заменяет её стек: внутри своей библиотеки она
+ * справляется сама, вложенные Radix-диалоги закрывались правильно и до этого.
+ * Решается ровно стык двух библиотек.
+ */
+
+/**
+ * Стек открытых слоёв кита.
+ *
+ * Модульный — по той же причине, что счётчик в `useScrollLock`: слои
+ * вкладываются, и локальным состоянием «кто верхний» не выразить. Отсюда же
+ * следует, что копий модуля в приложении должна быть ровно одна.
+ */
+const layers = new Set<{ node: HTMLElement | null }>();
+
+/**
+ * Зарегистрировать слой.
+ *
+ * ВЕРХНИЙ ОПРЕДЕЛЯЕТСЯ ПО ПОЛОЖЕНИЮ В ДОКУМЕНТЕ, а не по порядку регистрации, и
+ * это не педантизм. Эффекты React выполняются СНИЗУ ВВЕРХ: у вложенных
+ * подложек внутренняя регистрируется раньше внешней, и «последний
+ * зарегистрировавшийся» оказывался ВНЕШНИМ — то есть верхним считался тот, кто
+ * лежит под всеми. Порядок монтирования про порядок слоёв не говорит ничего.
+ *
+ * Положение говорит. Вложенный узел всегда следует за своим предком в порядке
+ * документа, а два независимых оверлея идут в том порядке, в каком их вставили.
+ * Поэтому верхний — тот, за кем не следует ни один другой зарегистрированный
+ * узел.
+ */
+export function pushOverlayLayer(): {
+  isTopmost: () => boolean;
+  attach: (node: HTMLElement | null) => void;
+  release: () => void;
+} {
+  const entry: { node: HTMLElement | null } = { node: null };
+  layers.add(entry);
+
+  return {
+    attach: (node) => {
+      entry.node = node;
+    },
+    isTopmost: () => {
+      // Узла ещё нет — слой зарегистрировался последним, и это всё, что о нём
+      // известно. Считать его нижним значило бы отдать Escape тому, кто открыт
+      // раньше.
+      if (!entry.node?.isConnected) return true;
+      for (const other of layers) {
+        // Отцепленный узел в сравнении участвовать не может: для узла из
+        // другого дерева `compareDocumentPosition` возвращает `DISCONNECTED`
+        // вместе с произвольным `PRECEDING`/`FOLLOWING` — спецификация прямо
+        // называет этот выбор «consistent, but arbitrary». Слой, чей узел React
+        // уже вынул, но уборщик снять не успел, объявлял верхним никого.
+        if (other === entry || !other.node?.isConnected) continue;
+        const position = entry.node.compareDocumentPosition(other.node);
+        // `CONTAINED_BY` приходит вместе с `FOLLOWING`, поэтому одной проверки
+        // хватает и на вложенность, и на соседство.
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) return false;
+      }
+      return true;
+    },
+    release: () => {
+      layers.delete(entry);
+    },
+  };
+}
+
+/** Сколько слоёв сейчас зарегистрировано. @internal — для тест-семейства. */
+export function layerCount(): number {
+  return layers.size;
+}
+
+/**
+ * Признак позиционированного оверлея react-aria.
+ *
+ * ПАРА атрибутов `data-rac` + `data-placement`. Её ставит только
+ * позиционированный оверлей RAC (`Popover` и всё, что на нём: списки
+ * `Combobox`, панели `Menu`), и нет ни у одного узла Radix, ни у полей кита
+ * внутри окна.
+ *
+ * Селектор читают ДВА места, и оба — про стык библиотек: `hasOpenAriaOverlay`
+ * ниже и правило указателя в `styles.css`.
+ *
+ * УКАЗАТЕЛЬ — ЧЕТВЁРТАЯ ВЕЩЬ СТЫКА, после стека, Escape и шкалы. Модальный
+ * Radix (`Dialog`, `Drawer`) ставит `<body>` инлайновое `pointer-events: none`
+ * и возвращает указатель только СВОИМ слоям — инлайновым же `auto`. Оверлей
+ * react-aria портируется прямо под `<body>`, наследовал `none`, и щелчок
+ * проваливался на подложку: пункт меню и вариант списка внутри окна выбирались
+ * только с клавиатуры. Кит делает для оверлея RAC то же, что Radix
+ * делает для своих, — возвращает ему `auto`.
+ *
+ * Правило живёт в CSS, а не классом на панелях кита, потому что react-aria —
+ * peer-зависимость (ADR-0004): поповер потребителя ломался так же, а класс кита
+ * до него не доходит. Окно от щелчка в портал при этом не закрывается: Radix
+ * решает «щелчок снаружи» по дереву React, а портал остаётся его потомком.
+ * Связку селектора с `styles.css` сторожит `tests/overlay-layers.test.tsx`.
+ */
+export const ARIA_OVERLAY_SELECTOR = "[data-rac][data-placement]";
+
+/**
+ * Открыт ли поверх нас оверлей react-aria — по `ARIA_OVERLAY_SELECTOR`.
+ *
+ * Прежний заслон в `Dialog` определял чужой слой по ПОЛОЖЕНИЮ ЦЕЛИ события:
+ * «`data-rac` и вне окна». Для меню это работало, а для `Combobox` внутри окна —
+ * нет: фокус стоит в `Input`, который лежит ВНУТРИ контента, и второе условие
+ * было ложным. Escape закрывал окно вместо списка подсказок.
+ *
+ * Опора на внутренние атрибуты библиотеки — осознанный риск (ADR-0041). Сторожит
+ * его тест на сочетание «`Combobox` внутри `Dialog`»: он сломается при смене
+ * разметки RAC, и это лучше молчаливого возврата дефекта.
+ */
+export function hasOpenAriaOverlay(): boolean {
+  if (typeof document === "undefined") return false;
+  /*
+    ПОДСКАЗКА — НЕ СЛОЙ, и это не придирка.
+
+    `Tooltip` из react-aria несёт ту же пару `data-rac` + `data-placement`, что
+    список или меню, но фокуса не забирает и от появления окна не закрывается.
+    Пока курсор стоит на триггере «?», подсказка висит — и Escape переставал
+    закрывать окно ВООБЩЕ. Свой `Tooltip` кита на Radix, поэтому изнутри пакета
+    это не стреляло; но `react-aria-components` объявлена peer-зависимостью
+    (ADR-0004), то есть подсказка потребителя в любой части страницы гасила
+    Escape у всех окон кита.
+
+    Спрашиваем про слой, который сам съест Escape, а не про любой оверлей RAC.
+  */
+  return document.querySelector(`${ARIA_OVERLAY_SELECTOR}:not([role="tooltip"])`) != null;
+}
+
+/**
+ * Ступени слоёв.
+ *
+ * Числа перестают быть литералами в шести файлах и становятся именованными
+ * ступенями в одном. Порядок осмысленный: затемнение ниже панели меню, панель
+ * ниже подсказки. Одинаковое большое число для всех — не шкала, а капитуляция
+ * (ADR-0041).
+ *
+ * ШКАЛА И ПОРЯДОК ДОКУМЕНТА — РАЗНЫЕ ОСИ. `isTopmost` судит строго по положению
+ * в документе, и совпадают они, только пока у всех слоёв одна ступень. Проп
+ * `zIndex` у `ModalOverlay` позволяет их развести: подложка на `alert` поверх
+ * подложки на `modal` видна сверху, а по документу может идти раньше — и тогда
+ * Escape уйдёт не к ней. Смешивать ступени у вложенных подложек не следует;
+ * если понадобится — сравнение придётся вести по паре «ступень, положение».
+ */
+export const OVERLAY_LAYER = {
+  /** Модальное затемнение и окно на нём. */
+  modal: "z-90",
+  /** Слой поверх модального: подтверждение над окном, которое его открыло. */
+  alert: "z-100",
+  /** Всплывающие панели: меню, поповеры, списки. Выше окна — их открывают из него. */
+  popover: "z-[120]",
+} as const;

package/src/lib/period.ts

@@ -0,0 +1,167 @@
+import { getLocalTimeZone, today, type CalendarDate } from "@internationalized/date";
+import { parseDateOrNull } from "./date.js";
+import { DEFAULT_MESSAGES } from "../i18n/defaults.js";
+import type { UiMessages } from "../i18n/messages.js";
+
+/** Границы периода в ISO-формате `ГГГГ-ММ-ДД`, обе включительно. */
+export interface DateRange {
+  start: string;
+  end: string;
+}
+
+/**
+ * Относительный период — то, что на самом деле имеет в виду пользователь,
+ * выбирая «последние 30 дней».
+ *
+ * Хранить вместо него пару замороженных дат — значит превратить ссылку,
+ * отправленную коллеге, в «30 дней до того вторника, когда её сформировали».
+ * Поэтому в URL живёт `period=30d`, а в абсолютные границы он разворачивается
+ * в момент запроса. Решение — ADR-0008.
+ */
+export const RELATIVE_PERIODS = [
+  "7d",
+  "30d",
+  "90d",
+  "180d",
+  "365d",
+  "thisMonth",
+  "lastMonth",
+  "thisYear",
+] as const;
+
+export type RelativePeriod = (typeof RELATIVE_PERIODS)[number];
+
+/**
+ * Проверка периода, пришедшего извне.
+ *
+ * Список нужен именно в рантайме, а не только типом: период живёт в URL,
+ * а URL правится руками. `?period=30days` для компилятора — обычная `string`,
+ * потребитель приводит её к `RelativePeriod`, потому что другого способа
+ * пакет ему не оставляет, и дальше разворачивать нечего. Поэтому граница
+ * проверяется здесь, до `resolvePeriod`.
+ */
+export function isRelativePeriod(value: unknown): value is RelativePeriod {
+  return RELATIVE_PERIODS.includes(value as RelativePeriod);
+}
+
+const iso = (date: CalendarDate): string => date.toString();
+
+/**
+ * Разворачивает относительный период в конкретные даты.
+ *
+ * Отсчёт включает сегодняшний день: «7 дней» — это сегодня и шесть предыдущих,
+ * а не восемь дат в диапазоне. Исключение — `lastMonth`: он весь в прошлом
+ * и кончается последним днём предыдущего месяца.
+ *
+ * Периоды, кончающиеся сегодня, включают неполный день: у «30 дней» последние
+ * сутки всегда короче остальных. Для графика это заметно, и это свойство
+ * периода, а не ошибка расчёта.
+ *
+ * Зона по умолчанию — местная зона браузера; потребитель, у которого своя
+ * зона отчётности, передаёт её явно. `now` подменяется только тестами:
+ * без него любая проверка расчёта зависела бы от дня прогона.
+ */
+export function resolvePeriod(
+  period: RelativePeriod,
+  timeZone?: string,
+  now: CalendarDate = today(timeZone ?? getLocalTimeZone())
+): DateRange {
+  switch (period) {
+    case "7d":
+    case "30d":
+    case "90d":
+    case "180d":
+    case "365d": {
+      const days = Number(period.slice(0, -1));
+      return { start: iso(now.subtract({ days: days - 1 })), end: iso(now) };
+    }
+    case "thisMonth":
+      return { start: iso(now.set({ day: 1 })), end: iso(now) };
+    case "lastMonth": {
+      const prev = now.set({ day: 1 }).subtract({ months: 1 });
+      return { start: iso(prev), end: iso(prev.set({ day: prev.calendar.getDaysInMonth(prev) })) };
+    }
+    case "thisYear":
+      return { start: iso(now.set({ month: 1, day: 1 })), end: iso(now) };
+    default:
+      // Для компилятора ветка недостижима, и в этом всё дело: гарантия
+      // исчерпаемости существует только на этапе сборки. В рантайм период
+      // приходит из URL, и здесь он либо уже проверен `isRelativePeriod`,
+      // либо это ошибка вызова — про которую лучше узнать сразу, а не
+      // получить `undefined` и разыменовать его строкой ниже.
+      // Текст исключения, а не строка интерфейса: его читает разработчик в
+      // стектрейсе, а не пользователь на экране. В каталог не едет.
+      throw new Error(`Unknown period: ${String(period)}`);
+  }
+}
+
+export interface PeriodPreset {
+  label: string;
+  period: RelativePeriod;
+}
+
+/** Порядок пресетов; подписи приходят из каталога. */
+const PRESET_ORDER = ["7d", "30d", "90d", "thisMonth", "lastMonth", "365d"] as const;
+
+/**
+ * Пресеты по умолчанию. Список короткий намеренно: колонка на десять строк
+ * перестаёт быть быстрым путём и становится ещё одним списком для чтения.
+ *
+ * Функция, а не константа: подпись пресета — user-visible строка, и она обязана
+ * идти через каталог. Компонент зовёт `periodPresets(messages)`; без аргумента
+ * возвращается английский фолбэк, поэтому вызов из кода без провайдера не
+ * ломается.
+ */
+export function periodPresets(messages: UiMessages = DEFAULT_MESSAGES): readonly PeriodPreset[] {
+  return PRESET_ORDER.map((period) => ({ label: messages.period.presets[period], period }));
+}
+
+/**
+ * @deprecated с 2.0.0 — подписи здесь английские и локаль не знают. Зовите
+ * `periodPresets(useMessages())`. Оставлено, чтобы вызов у потребителя не
+ * рассыпался в момент обновления; удаляется в следующем мажоре.
+ */
+export const DEFAULT_PERIOD_PRESETS: readonly PeriodPreset[] = periodPresets();
+
+/**
+ * Длина периода в днях, обе границы включительно; `0` — границы неразбираемы.
+ *
+ * Считается в UTC намеренно: там нет перехода на летнее время, обе границы
+ * берут одинаковое смещение, и разница всегда кратна суткам. В местной зоне
+ * тот же расчёт ошибался бы на день дважды в год.
+ *
+ * Перевёрнутый диапазон календарём не выбирается, но собирается руками —
+ * поэтому длина не уходит в минус: «−8 дней» под календарём означало бы,
+ * что компонент считает, а не то, что вход неверен.
+ */
+export function periodLength(range: DateRange): number {
+  const start = parseDateOrNull(range.start);
+  const end = parseDateOrNull(range.end);
+  // Ноль означает «показывать нечего», и это ЧЕСТНЕЕ единицы: границы приходят
+  // из адреса, а «1 день» под календарём с мусором в границах был бы уверенным
+  // враньём о том, чего компонент не знает.
+  if (!start || !end) return 0;
+  return Math.max(
+    1,
+    Math.round((end.toDate("UTC").getTime() - start.toDate("UTC").getTime()) / 86_400_000) + 1
+  );
+}
+
+/**
+ * «14 дней» под календарём — чтобы было видно, что выбрано именно две недели,
+ * а не тринадцать или пятнадцать дней.
+ */
+export function formatPeriodLength(
+  range: DateRange,
+  messages: UiMessages = DEFAULT_MESSAGES
+): string {
+  // Склонение выбирает ЛОКАЛЬ через `Intl.PluralRules`, а не цепочка остатков
+  // здесь: правила «11–14 → дней» знает русский каталог, и знать их должен он,
+  // а не общая функция. Компонент, считающий окончания, умеет один язык.
+  const days = periodLength(range);
+  // Пустая строка, а не «0 дней»: она означает «подписывать нечего», и гасит её
+  // тот, кто выводит. Кит про разметку потребителя ничего не знает — свою
+  // обёртку `DateRangePicker` прячет сам (`empty:hidden` там же, где подпись).
+  if (days === 0) return "";
+  return messages.period.length({ days });
+}

package/src/lib/progress-status.ts

@@ -0,0 +1,44 @@
+import type { Tone } from "./variants.js";
+
+/**
+ * Состояние работы: не начиналась, идёт, кончилась хорошо, кончилась плохо.
+ *
+ * Один словарь на весь кит, и это результат ломающей правки 3.0.0. До неё их
+ * было два: `TimelineStatus` со значениями `success`/`failed` и `UploadState`
+ * со значениями `done`/`error` — одна и та же сущность под двумя именами, с
+ * двумя идентичными построчно таблицами тонов. Долг нашло ревью 2.5.0, свести
+ * его патчем было нельзя: оба типа входили в публичный API
+ * (ADR-0031).
+ *
+ * ПОЧЕМУ ВЫЖИЛИ `success` и `failed`. Они описывают ИСХОД и симметричны друг
+ * другу. `done` и `error` несимметричны: первое про завершённость, второе про
+ * событие, и пара читается так, будто «завершено с ошибкой» — тоже возможное
+ * состояние. Для четырёх взаимоисключающих значений это дефект.
+ *
+ * ИМЯ НЕЙТРАЛЬНОЕ, а не имя одного из потребителей: `TimelineStatus` у очереди
+ * загрузок врал бы — никакого timeline у неё нет.
+ *
+ * СОСТОЯНИЕ — МЕХАНИКА, А НЕ ДОМЕН. «Дубль», «на модерации», «превышен лимит»
+ * — подписи потребителя (`statusLabel`), а не новые значения. Прецедент —
+ * `StatusBadge`, приехавший из фронта и оставивший снаружи словарь из
+ * одиннадцати доменных статусов с русскими подписями.
+ */
+export type ProgressStatus = "pending" | "running" | "success" | "failed";
+
+/**
+ * Тон по состоянию.
+ *
+ * `pending` намеренно нейтральный и приглушённый: работа, которая ещё не
+ * начиналась, — не событие.
+ *
+ * Читается ВСЕГДА со страховкой `?? "neutral"`. Потребитель пакета — приложение
+ * на JS, компилятор его данные не проверяет, а состояния приходят с бэкенда:
+ * пятый вид статуса не должен стоить экрана. Без страховки `TONE_TOKENS[…]`
+ * даёт `undefined.dotBg`, то есть падение всего экрана активности.
+ */
+export const PROGRESS_STATUS_TONE: Record<ProgressStatus, Tone> = {
+  pending: "neutral",
+  running: "accent",
+  success: "success",
+  failed: "danger",
+};

package/src/lib/published-height.ts

@@ -0,0 +1,147 @@
+"use client";
+
+import { useEffect, type RefObject } from "react";
+
+/*
+ * Публикация высоты панели в CSS-переменную корня документа (ADR-0016,
+ * ADR-0019). Раньше жила внутри `TopBar`; вынесена, когда ту же роль для
+ * нижней панели получил слот `bottomBar` у `AppShell` (`--bottombar-h`).
+ * Реестр общий и ключуется именем переменной, поэтому две панели с разными
+ * именами друг другу не мешают, а с одним именем — делят владение по стеку.
+ */
+
+/**
+ * Кто сейчас владеет переменной высоты.
+ *
+ * Реестр модульный — по той же причине, что счётчик в `useScrollLock`: шапки
+ * ПЕРЕКРЫВАЮТСЯ. При переходе между экранами новая монтируется раньше, чем
+ * размонтируется старая; то же даёт шапка приложения плюс шапка встроенного
+ * виджета с тем же именем переменной.
+ *
+ * ВЛАДЕНИЕ ПО ИДЕНТИЧНОСТИ, А НЕ ПО ЗНАЧЕНИЮ, и это разбор дефекта, а не вкус.
+ * Уборщик сверял опубликованное значение со значением в стиле корня — но две
+ * шапки одного компонента дают ОДИНАКОВУЮ высоту, и по значению они
+ * неразличимы: уходящая снимала переменную, которую только что опубликовала
+ * оставшаяся, и липкие полосы уезжали к верху окна.
+ *
+ * (До волны 26 дефекта не было видно по другой причине: уборщик перезамерял
+ * `offsetHeight` уже отцепленного узла, получал ноль, и ветка снятия не
+ * срабатывала никогда — переменная просто переживала шапку.)
+ *
+ * Пишет в корень только последний зарегистрировавшийся; уходящий отдаёт
+ * публикацию предыдущему, а последний — снимает переменную.
+ */
+const heightOwners = new Map<string, { token: symbol; value: string }[]>();
+
+/**
+ * Что стояло в переменной ДО первой шапки.
+ *
+ * Публиковать высоту может и само приложение — кит не единственный, кто вправе
+ * писать в эту переменную (ADR-0016: имя переменной здесь проп именно потому,
+ * что кит не знает, чья это шапка). Ушедшая шапка возвращает прежнее значение,
+ * а не стирает чужое.
+ */
+const heightBeforeFirstOwner = new Map<string, string>();
+
+export function publishHeight(heightVar: string) {
+  const token = Symbol("published-height");
+  const stack = heightOwners.get(heightVar) ?? [];
+  if (stack.length === 0) {
+    heightBeforeFirstOwner.set(
+      heightVar,
+      document.documentElement.style.getPropertyValue(heightVar)
+    );
+  }
+  stack.push({ token, value: "" });
+  heightOwners.set(heightVar, stack);
+
+  return {
+    publish(value: string, root: HTMLElement) {
+      const owners = heightOwners.get(heightVar);
+      const own = owners?.find((entry) => entry.token === token);
+      if (!own || !owners) return;
+      own.value = value;
+      // Чужую публикацию не перебиваем: наверху стека тот, кто смонтирован
+      // последним, и переменная принадлежит ему.
+      if (owners.at(-1)?.token === token) root.style.setProperty(heightVar, value);
+    },
+    release(root: HTMLElement) {
+      const owners = heightOwners.get(heightVar);
+      if (!owners) return;
+      const own = owners.find((entry) => entry.token === token);
+      const rest = owners.filter((entry) => entry.token !== token);
+
+      /*
+        Чужую запись не трогаем. Владение стеком отвечает на вопрос «кто из
+        ШАПОК верхний», но переменную может переписать и не шапка — приложение,
+        виджет, отладочный скрипт. Если в корне лежит не то, что публиковали мы,
+        значит владелец сменился мимо реестра, и снимать это значение нельзя.
+      */
+      const inDom = root.style.getPropertyValue(heightVar);
+      if (own && inDom !== own.value) {
+        // Проверка идёт ДО любой ветки. Под условием «я последний» она пропускала
+        // случай с тремя участниками: уходила не последняя шапка, и реестр
+        // безусловно перезаписывал переменную значением следующего владельца —
+        // чужая запись терялась молча.
+        heightOwners.set(heightVar, rest);
+        if (rest.length === 0) {
+          heightOwners.delete(heightVar);
+          heightBeforeFirstOwner.delete(heightVar);
+        }
+        return;
+      }
+
+      if (rest.length === 0) {
+        heightOwners.delete(heightVar);
+        const before = heightBeforeFirstOwner.get(heightVar) ?? "";
+        heightBeforeFirstOwner.delete(heightVar);
+        // Оставленная переменная заставила бы липкие полосы отступать от
+        // несуществующего элемента — но если значение публиковало приложение,
+        // возвращаем его, а не стираем.
+        if (before) root.style.setProperty(heightVar, before);
+        else root.style.removeProperty(heightVar);
+        return;
+      }
+
+      heightOwners.set(heightVar, rest);
+      const next = rest.at(-1)!;
+      if (next.value) root.style.setProperty(heightVar, next.value);
+    },
+  };
+}
+
+/**
+ * Публикует измеренную высоту узла в переменную корня документа и держит её
+ * актуальной: замер на монтировании плюс `ResizeObserver` — высота меняется от
+ * брейкпоинта (панель скрыта классом, и тогда она 0), от переноса содержимого
+ * и от выреза экрана.
+ *
+ * `heightVar === null` отключает публикацию. `enabled = false` — узла сейчас
+ * нет в разметке (слот не передан): переменной не должно быть вовсе.
+ */
+export function usePublishedHeight(
+  ref: RefObject<HTMLElement | null>,
+  heightVar: string | null,
+  enabled = true
+) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || heightVar == null || !enabled) return;
+
+    const root = document.documentElement;
+    const token = publishHeight(heightVar);
+    const apply = () => token.publish(`${el.offsetHeight}px`, root);
+    apply();
+
+    // Окружение без `ResizeObserver` (тестовый jsdom потребителя, старый
+    // движок): остаётся замер на монтировании. Падать из-за наблюдателя
+    // нельзя — слот `bottomBar` теперь измеряется у каждого каркаса.
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(apply);
+    observer?.observe(el);
+
+    return () => {
+      observer?.disconnect();
+      token.release(root);
+    };
+  }, [ref, heightVar, enabled]);
+}

package/src/lib/reorder.ts

@@ -0,0 +1,65 @@
+/**
+ * Перестановка элементов при сбросе — чистая функция, проверяемая на массивах.
+ *
+ * Вынесена из `SortableList` по той же причине, что механика маски из
+ * `MaskedInput` в `lib/mask.ts`: ошибка здесь стоит порядка данных пользователя,
+ * а перебрать все входы удобнее на массивах, чем через перетаскивание в DOM.
+ *
+ * `useListData` из `react-stately` не используется: он лежит в дереве
+ * транзитивно, но объявленной зависимостью кита не является (ADR-0028).
+ */
+
+export interface ReorderTarget<K> {
+  /** Ключ элемента, рядом с которым сбросили. */
+  key: K;
+  dropPosition: "before" | "after" | "on";
+}
+
+/**
+ * Новый порядок после сброса, или `null`, если сброс ничего не меняет.
+ *
+ * Перемещаемые вынимаются из списка целиком и вставляются перед целью или
+ * после неё — так порядок внутри переносимой группы сохраняется.
+ *
+ * `null`, А НЕ ПРЕЖНИЙ МАССИВ, в двух случаях, и оба — не ошибка вызывающего:
+ *
+ * - цель сама среди перемещаемых. Раньше `findIndex` давал `-1`, и
+ *   `slice(0, -1)` молча выбрасывал последний элемент списка — нашло ревью
+ *   2.5.0. Сброс «на себя» — законный жест, и отвечать на него потерей данных
+ *   нельзя;
+ * - `dropPosition === "on"`: вложить в элемент списку некуда.
+ */
+export function reorder<K, T extends { id: K }>(
+  items: readonly T[],
+  keys: ReadonlySet<K>,
+  target: ReorderTarget<K>
+): T[] | null {
+  if (target.dropPosition === "on") return null;
+
+  const moving = items.filter((item) => keys.has(item.id));
+  const rest = items.filter((item) => !keys.has(item.id));
+  const at = rest.findIndex((item) => item.id === target.key);
+  if (at === -1) return null;
+
+  const index = target.dropPosition === "before" ? at : at + 1;
+  return [...rest.slice(0, index), ...moving, ...rest.slice(index)];
+}
+
+/**
+ * Место строки, пришедшей из другого списка группы: индекс в списке-приёмнике
+ * или `null`, если положить её некуда.
+ *
+ * `target === null` — бросок на сам список, а не рядом со строкой: так
+ * react-aria сообщает о пустом списке, и строка встаёт в конец. `"on"` —
+ * вложить в строку нельзя, как и при перестановке.
+ */
+export function insertionIndex<K, T extends { id: K }>(
+  items: readonly T[],
+  target: ReorderTarget<K> | null
+): number | null {
+  if (target == null) return items.length;
+  if (target.dropPosition === "on") return null;
+  const at = items.findIndex((item) => item.id === target.key);
+  if (at === -1) return null;
+  return target.dropPosition === "before" ? at : at + 1;
+}