@olddevs/ui 0.0.0-stage → 4.0.0

package/llms.txt

@@ -0,0 +1,144 @@
+# @olddevs/ui
+
+> Дизайн-система: токены, темы и доступные UI-примитивы для React. Этот файл —
+> индекс справочника, который едет вместе с пакетом.
+
+Ссылки ниже относительные и ведут внутрь пакета: читать их надо от его корня, то
+есть от `node_modules/@olddevs/ui/`. Там лежит Справочник именно той версии, что
+установлена у вас. Сайт документации — https://ui.olddevs.ru.
+
+Файл собран скриптом `scripts/llms.mjs` из `docs/`. Править надо страницы, а не
+его: расхождение роняет `npm run llms:check`.
+
+## Начать здесь
+
+- [Справочник `@olddevs/ui`](docs/index.md): Этот справочник — контракт для разработчиков и AI-агентов, которые используют публичный API пакета.
+- [Подключение `@olddevs/ui`](docs/getting-started.md): Всё после `@olddevs/ui` — его обязательные peer-зависимости (ADR-0004): кит их не приносит, потребитель держит их в своём `package.json`.
+- [Как выбрать компонент](docs/component-selection.md): Выбирайте по смыслу действия и состоянию, а не по форме, которую проще собрать.
+- [Общие соглашения `@olddevs/ui`](docs/conventions.md): Публичный API — экспорты времени выполнения из `src/index.ts`, типы, описанные в документации входы и `styles.css`.
+- [Словарь `@olddevs/ui`](docs/glossary.md): Термины кита.
+- [Доступность: обязательный контракт](docs/accessibility.md): Доступность — часть публичного поведения компонента.
+- [Темы, токены и бренды](docs/theming.md): Страница отвечает на три вопроса: как устроены цвета кита, что из этого можно переопределять у себя и как завести собственный бренд.
+- [Палитра](docs/palette.md): Страница показывает значения цветов кита: какие примитивы палитры (кроме меток) объявлены и какой роли каждый из них присвоен в каждой теме.
+- [Локализация: провайдер и каталог сообщений](docs/i18n.md): С 2.0.0 кит говорит по-английски по умолчанию и знает про другие языки.
+- [Каталог компонентов](docs/components/index.md): Каталог перечисляет компоненты кита по группам: у каждого есть ссылка на страницу, экспорты и пояснение, что это за компонент и для чего он нужен.
+
+## Правила для AI
+
+- [Словарь `@olddevs/ui`](docs/glossary.md): Термины кита.
+
+## Действия и обратная связь
+
+- [Button](docs/components/actions/button.md): `Button` запускает действие.
+- [Chip](docs/components/actions/chip.md): `Chip` — компактная кнопка-фильтр.
+- [SplitButton](docs/components/actions/split-button.md): `SplitButton` — главное действие и раскрыватель его вариантов рядом, **двумя отдельными кнопками**.
+- [Toolbar](docs/components/actions/toolbar.md): Панель действий с ролью `toolbar` и одной остановкой табуляции: Tab входит в неё и выходит из неё, внутри ходят стрелки, `Home` и `End` ведут к краям, а возврат на панель ставит фокус на последнее исп
+- [Toggle, Segmented, ToggleGroup и ButtonGroup](docs/components/actions/toggles.md): Выбирайте компонент по смыслу состояния:
+- [Alert, Banner, Progress, Spinner, Toaster, toast и StatusBadge](docs/components/actions/feedback.md): Выбирайте по типу информации:
+- [CopyButton и Truncate](docs/components/actions/copy-and-truncate.md): Две мелочи, которые пишут заново в каждом проекте: копирование значения в буфер с внятным ответом и обрезка текста с подсказкой полного значения.
+
+## Поля ввода
+
+- [TextControl](docs/components/inputs/text-control.md): `TextControl` — базовое текстовое поле или textarea с общей оболочкой формы.
+- [RichTextEditor](docs/components/inputs/rich-text-editor.md): `RichTextEditor` — поле форматированного текста на Tiptap v3 (ProseMirror).
+- [API расширения Редактора](docs/api/editor-extension.md): Карта того, чем продукт расширяет `RichTextEditor` из `@olddevs/ui/editor`, и граница стабильности этого API.
+- [NumberInput](docs/components/inputs/number-input.md): `NumberInput` — управляемое числовое поле с кнопками шага.
+- [Checkbox, CheckboxGroup, Radio и RadioGroup](docs/components/inputs/choice-controls.md): `Checkbox` выбирает независимое «да/нет», `CheckboxGroup` — несколько значений, `RadioGroup` — один ответ на общий вопрос.
+- [Select](docs/components/inputs/select.md): `Select` выбирает значение только из закрытого списка `items`.
+- [Combobox](docs/components/inputs/combobox.md): `Combobox` сочетает свободный текстовый ввод со списком вариантов.
+- [TagInput](docs/components/inputs/tag-input.md): `TagInput` — управляемый набор строк.
+- [Transfer](docs/components/inputs/transfer.md): `Transfer` — две колонки и перенос между ними: слева то, что можно выбрать, справа — выбранное.
+- [TreeSelect](docs/components/inputs/tree-select.md): `TreeSelect` — поле, выбирающее узел иерархии: `TreeView` внутри `Popover`.
+- [ColorPicker](docs/components/inputs/color-picker.md): `ColorPicker` — выбор произвольного цвета: область насыщенности, полоса тона, поле формата и необязательные заготовки.
+- [SwatchGroup](docs/components/inputs/swatch-group.md): Выбор одного значения из закрытого набора, где вариант показан **образцом цвета**, а не текстом.
+- [Rating](docs/components/inputs/rating.md): `Rating` — оценка звёздами.
+- [Slider и RangeSlider](docs/components/inputs/slider.md): `Slider` задаёт одно число, `RangeSlider` — границы `[min, max]`.
+- [SearchControl](docs/components/inputs/search-control.md): `SearchControl` — управляемое поле поиска поверх `TextControl`: лупа, доступное имя, очистка и необязательная экранная клавиатура.
+- [FileDropzone](docs/components/inputs/file-dropzone.md): `FileDropzone` принимает файлы через drag-and-drop или кнопку выбора.
+- [UploadQueue](docs/components/inputs/upload-queue.md): Менеджер загрузок: что уже отправлено, что идёт и что упало.
+- [PasswordInput](docs/components/inputs/password-input.md): Поле пароля на слотах `TextControl`: кнопка показа в `trailing`, предупреждение о Caps Lock под полем.
+- [MaskedInput](docs/components/inputs/masked-input.md): Поле с маской ввода на `TextControl`.
+- [PhoneInput](docs/components/inputs/phone-input.md): `MaskedInput` с телефонной маской, `inputMode="tel"` и `autocomplete="tel"`.
+- [PinInput](docs/components/inputs/pin-input.md): Ввод кода подтверждения: N полей по цифре, значение — **одна строка**.
+- [InlineEdit](docs/components/inputs/inline-edit.md): Правка значения по месту: кнопка-значение → поле → подтверждение.
+- [Form и FormField](docs/components/inputs/form.md): `Form` стандартизирует submit и блокировку на время запроса, но не создаёт систему валидации.
+- [FormLayout и FieldRow](docs/components/inputs/form-layout.md): Раскладка формы: `columns` (1 или 2) и `labels` (`top` или `side`), плюс `FieldRow` для поля во всю ширину.
+
+## Дата и время
+
+- [Calendar](docs/components/date-time/calendar.md): `Calendar` — низкоуровневый controlled building block для выбора одной `DateValue` из React Aria.
+- [RangeCalendar](docs/components/date-time/range-calendar.md): `RangeCalendar` — building block для одного непрерывного диапазона React Aria `DateValue`.
+- [DatePicker](docs/components/date-time/date-picker.md): `DatePicker` — готовый триггер + поповер для одной календарной даты.
+- [DateRangePicker](docs/components/date-time/date-range-picker.md): `DateRangePicker` — готовый выбор периода: триггер, `RangeCalendar`, относительные пресеты и отдельная очистка.
+- [DateTimePicker](docs/components/date-time/date-time-picker.md): `DateTimePicker` собран из `DatePicker` и `TimePicker`.
+- [TimePicker](docs/components/date-time/time-picker.md): `TimePicker` — поле времени с маской и списком ближайших слотов.
+
+## Оверлеи
+
+- [Dialog, ModalHeader и ModalOverlay](docs/components/overlays/dialog.md): Используйте `Dialog` для модального окна с известным заголовком: он создаёт модальность, доступное имя, ловушку фокуса, портал и возврат фокуса.
+- [ConfirmDialog](docs/components/overlays/confirm-dialog.md): `ConfirmDialog` подтверждает значимое или необратимое действие.
+- [ShortcutsHelp](docs/components/overlays/shortcuts-help.md): Это модальное окно со сводом сочетаний клавиш на `Dialog`.
+- [Drawer](docs/components/overlays/drawer.md): `Drawer` — модальная панель, выезжающая справа, слева или снизу.
+- [Popover](docs/components/overlays/popover.md): `Popover` — составной примитив для панели, привязанной к элементу.
+- [HoverCard](docs/components/overlays/hover-card.md): `HoverCard` — карточка-превью: при наведении на имя или ссылку, а также при фокусе на них с клавиатуры рядом всплывает панель с подробностями.
+- [Tooltip и HelpTooltip](docs/components/overlays/tooltip.md): `Tooltip` добавляет краткое пояснение к одному элементу при hover и focus.
+- [Menu](docs/components/overlays/menu.md): `Menu` — составное меню действий, открываемое `MenuTrigger`.
+- [ContextMenu](docs/components/overlays/context-menu.md): `ContextMenu` — меню действий для правого клика и клавиши контекстного меню.
+- [CommandPalette](docs/components/overlays/command-palette.md): `CommandPalette` — controlled modal search по действиям приложения.
+
+## Таблица
+
+- [DataTable](docs/components/table/data-table.md): Прикладная таблица с готовым поведением поверх низкоуровневой `Table`: видимость и порядок колонок, плотность, состояния загрузки и ошибки, слот полосы над таблицей (`toolbar`).
+- [TableToolbar и TablePreferences](docs/components/table/toolbar.md): `TableToolbar` — полоса над таблицей: заголовок, счётчик, действия, слот фильтров и слот настроек.
+- [FilterBar и FilterBarAdd](docs/components/table/filter-bar.md): `FilterBar` показывает применённые фильтры снимаемыми токенами; `FilterBarAdd` — кнопка добавления с выбором поля и значения либо границ диапазона (сумма, дата).
+- [SavedViews](docs/components/table/saved-views.md): `SavedViews` — переключатель именованных снимков состояния.
+
+## Оболочка приложения
+
+- [AppShell](docs/components/app-shell/app-shell.md): Каркас приложения: навигация слева, шапка сверху, содержимое в `<main>`, опциональные правая область и нижняя панель.
+- [SideNav, NavGroup и NavItem](docs/components/app-shell/side-nav.md): `SideNav` — боковая навигация приложения: landmark с именем, слоты шапки и подвала, разделы `NavGroup` с пунктами `NavItem`.
+- [MobileTabBar и MobileTabBarItem](docs/components/app-shell/mobile-tab-bar.md): `MobileTabBar` — нижняя панель главных разделов для телефона: `<nav>` с именем (умолчание из каталога сообщений) и пунктами `MobileTabBarItem` в ряд, поровну.
+- [TopBar](docs/components/app-shell/top-bar.md): Шапка приложения: слоты бренда, поиска и действий, липкость, полупрозрачная подложка на токене темы.
+- [SplitPanel](docs/components/app-shell/split-panel.md): `SplitPanel` — две области с изменяемой границей: содержимое и панель деталей.
+
+## Навигация
+
+- [Tabs](docs/components/navigation/tabs.md): `Tabs` — controlled-only лента вкладок; компонент рендерит только tablist, не панели.
+- [Accordion](docs/components/navigation/accordion.md): `Accordion` — набор раскрываемых секций на react-aria.
+- [Breadcrumbs](docs/components/navigation/breadcrumbs.md): `Breadcrumbs` показывает путь до текущей страницы.
+- [Pagination](docs/components/navigation/pagination.md): `Pagination` — controlled pagination для уже разбитой на страницы коллекции.
+- [Stepper](docs/components/navigation/stepper.md): `Stepper` показывает порядок шагов мастера; текущий индекс задаёт родитель (controlled).
+- [TreeView](docs/components/navigation/tree-view.md): Иерархия с раскрытием, выбором и клавиатурой на `Tree` из react-aria.
+- [SelectionBar и useStickyOffset](docs/components/navigation/selection-bar.md): `SelectionBar` — полоса массовых действий: «Выбрано 12» и что с этим можно сделать.
+- [ContextualSaveBar](docs/components/navigation/contextual-save-bar.md): Полоса несохранённых изменений: появляется с первой правкой формы, показывает «есть несохранённые изменения» (или их число) и две кнопки — сохранить и отменить.
+- [PageHeader](docs/components/navigation/page-header.md): `PageHeader` — единственная шапка страницы с `h1`, опциональным пояснением и узлами действий.
+- [SectionHeader](docs/components/navigation/section-header.md): `SectionHeader` — heading внутри section или card: title слева, вспомогательный узел `right` справа.
+
+## Содержимое
+
+- [Typography: `Text`, `Heading`, `Link`](docs/components/content/typography.md): Используйте `Heading` для структуры документа, `Text` для абзацев и служебных строк, `Link` для навигации.
+- [Card](docs/components/content/card.md): `Card` — визуальная панель с фоном, границей, тенью, внутренним отступом и скруглением.
+- [Image](docs/components/content/image.md): `Image` — картинка со всеми тремя состояниями: грузится, загрузилась, не загрузилась.
+- [Timeline](docs/components/content/timeline.md): `Timeline` — лента шагов процесса: что уже произошло и чем закончилось.
+- [CodeView](docs/components/content/code-view.md): `CodeView` показывает код: JSON ответа, YAML конфига, тело вебхука.
+- [NotificationItem, NotificationList и NotificationCenter](docs/components/content/notifications.md): Список событий: что произошло, когда и прочитано ли.
+- [MediaCard](docs/components/content/media-card.md): Плитка с изображением: превью в заданной пропорции, действия поверх него, бейджи и выбор.
+- [SortableList](docs/components/content/sortable-list.md): Список, порядок которого задаёт пользователь перетаскиванием.
+- [EditableList](docs/components/content/editable-list.md): Список, в котором строки правят по месту и переставляют перетаскиванием, а новые добавляют снизу.
+- [RichTextView](docs/components/content/rich-text-view.md): `RichTextView` — показ сохранённого HTML `RichTextEditor` с той же типографикой, что внутри Редактора.
+- [VirtualGrid](docs/components/content/virtual-grid.md): Сетка карточек с виртуализацией: в DOM живут видимые ячейки и небольшой запас вокруг.
+- [Avatar и AvatarGroup](docs/components/content/avatar.md): `Avatar` показывает фотографию по `src` или, если её нет или она не загрузилась, инициалы и стабильный градиент, вычисленные из имени.
+- [Data display: `Badge`, `Stat`, `DescriptionList`, `Table`](docs/components/content/data-display.md): Выбирайте компонент по форме и смыслу данных: `Badge` отвечает на «сколько» или «есть ли новое», `Stat` — на один показатель с контекстом, `DescriptionList` — на пары «свойство — значение», `Table` — 
+- [EmptyState, ErrorState и Skeleton](docs/components/content/empty-and-loading.md): Три состояния экрана, у которых нет содержимого, и они не взаимозаменяемы: `Skeleton` показывают, пока результат неизвестен; `EmptyState`, когда запрос удался и вернул пусто; `ErrorState`, когда запро
+- [Layout primitives: `Separator`, `ScrollArea`, `AspectRatio`, `Kbd`](docs/components/content/layout-primitives.md): Это низкоуровневые строительные блоки, а не полноценная система раскладки.
+- [Grid](docs/components/content/grid.md): Адаптивная сетка равных колонок на утилитах Tailwind.
+- [TagGroup и Tag](docs/components/content/tag-group.md): Набор меток **для показа**: категории записи, проекты, ярлыки.
+- [Carousel](docs/components/content/carousel.md): Лента слайдов на нативной прокрутке с CSS scroll-snap: листают кнопки «назад» и «вперёд», колесо мыши, тачпад, свайп и стрелки клавиатуры; слайд после жеста встаёт ровно.
+- [Keyboard и VisuallyHidden](docs/components/content/keyboard.md): `Keyboard` — контролируемая экранная клавиатура для уже существующего текстового поля: она редактирует строку и выделение через обработчики, а не получает DOM-ref поля.
+- [Иконки `@olddevs/ui/icons`](docs/icons.md): Импортируйте иконки только из `@olddevs/ui/icons`, выбирая имя по смыслу действия или сущности: `DeleteIcon`, а не геометрию вроде `Trash`.
+
+## Остальные страницы
+
+- [Каталог сообщений `UiMessages`](docs/api/messages.md): Публичный контракт: имена ключей и форма значения.
+- [Совместимость и заметки о миграции](docs/api/migration-notes.md): Публичный контракт `@olddevs/ui` — это входы из `exports` пакета (`@olddevs/ui`, `/icons`, `/color`, `/editor`, `/editor/schema`, `/editor/highlight`, `/locales/ru`, `/locales/en`), их runtime exports
+- [Общий API: утилиты, токены, константы и типы](docs/api/utilities.md): `@olddevs/ui` экспортирует несколько программных API помимо компонентов.

package/package.json

@@ -1,6 +1,175 @@
 {
   "name": "@olddevs/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "4.0.0",
+  "description": "Olddevs UI — design system: tokens, themes and accessible UI primitives",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "default": "./dist/icons.js"
+    },
+    "./color": {
+      "types": "./dist/color.d.ts",
+      "default": "./dist/color.js"
+    },
+    "./editor": {
+      "types": "./dist/editor/index.d.ts",
+      "default": "./dist/editor/index.js"
+    },
+    "./editor/schema": {
+      "types": "./dist/editor/schema-entry.d.ts",
+      "default": "./dist/editor/schema-entry.js"
+    },
+    "./editor/highlight": {
+      "types": "./dist/editor/highlight-entry.d.ts",
+      "default": "./dist/editor/highlight-entry.js"
+    },
+    "./locales/ru": {
+      "types": "./dist/locales/ru.d.ts",
+      "default": "./dist/locales/ru.js"
+    },
+    "./locales/en": {
+      "types": "./dist/locales/en.d.ts",
+      "default": "./dist/locales/en.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.stories.tsx",
+    "styles.css",
+    "docs",
+    "llms.txt",
+    "CHANGELOG.md",
+    "NOTICE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json --emitDeclarationOnly && tsc -p tsconfig.build.json --removeComments --declaration false --declarationMap false",
+    "check:dist": "node scripts/check-dist.mjs",
+    "check:consumer": "node scripts/check-consumer.mjs",
+    "check:public": "node scripts/check-public.mjs",
+    "size": "node scripts/bundle-size.mjs",
+    "changeset": "changeset",
+    "release:version": "changeset version",
+    "release:check": "node scripts/release-check.mjs",
+    "typecheck": "tsc -p tsconfig.json",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "contrast": "node scripts/contrast.mjs",
+    "llms": "node scripts/llms.mjs",
+    "llms:check": "node scripts/llms.mjs --check",
+    "docs:translations": "node scripts/docs-translations.mjs",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots",
+    "test:a11y": "playwright test tests-visual/a11y.spec.ts",
+    "test:interactions": "playwright test tests-visual/interactions.spec.ts"
+  },
+  "dependencies": {
+    "tailwindcss-react-aria-components": "^2.2.0"
+  },
+  "peerDependencies": {
+    "@internationalized/date": "^3.12.1",
+    "@radix-ui/react-context-menu": "^2.2.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-tooltip": "^1.2.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.27.0",
+    "react": "^19.0.0",
+    "react-aria-components": "^1.19.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.12.1",
+    "@changesets/cli": "^2.31.1",
+    "@eslint/js": "^9.0.0",
+    "@internationalized/date": "^3.12.2",
+    "@playwright/test": "^1.61.1",
+    "@radix-ui/react-context-menu": "^2.3.7",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "@storybook/addon-a11y": "^10.5.6",
+    "@storybook/react-vite": "^10.5.6",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@tiptap/core": "^3.31.4",
+    "@tiptap/extension-blockquote": "^3.31.4",
+    "@tiptap/extension-code-block-lowlight": "^3.31.4",
+    "@tiptap/extension-highlight": "^3.31.4",
+    "@tiptap/extension-horizontal-rule": "^3.31.4",
+    "@tiptap/extension-link": "^3.31.4",
+    "@tiptap/extension-list": "^3.31.4",
+    "@tiptap/extension-subscript": "^3.31.4",
+    "@tiptap/extension-superscript": "^3.31.4",
+    "@tiptap/extension-table": "^3.31.4",
+    "@tiptap/extension-text-align": "^3.31.4",
+    "@tiptap/extension-text-style": "^3.31.4",
+    "@tiptap/extensions": "^3.31.4",
+    "@tiptap/markdown": "^3.31.4",
+    "@tiptap/pm": "^3.31.4",
+    "@tiptap/react": "^3.31.4",
+    "@tiptap/starter-kit": "^3.31.4",
+    "@tiptap/suggestion": "^3.31.4",
+    "@types/node": "^22.20.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.2.0",
+    "axe-core": "^4.12.1",
+    "clsx": "^2.1.1",
+    "dompurify": "^3.4.16",
+    "eslint": "^9.0.0",
+    "eslint-plugin-storybook": "^10.5.6",
+    "highlight.js": "~11.11.1",
+    "http-server": "^14.1.1",
+    "jsdom": "^29.1.1",
+    "lowlight": "^3.3.0",
+    "lucide-react": "^1.27.0",
+    "marked": "^17.0.6",
+    "prettier": "^3.8.3",
+    "prettier-plugin-tailwindcss": "^0.8.0",
+    "react": "^19.2.6",
+    "react-aria-components": "^1.19.0",
+    "react-dom": "^19.2.8",
+    "sonner": "^2.0.7",
+    "storybook": "^10.5.6",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "6.0.3",
+    "typescript-eslint": "^8.59.3",
+    "vite": "^7.3.6",
+    "vitest": "^3.2.7"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ivan1911/olddevs_ui.git"
+  },
+  "homepage": "https://ui.olddevs.ru",
+  "bugs": {
+    "url": "https://github.com/ivan1911/olddevs_ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/color.ts

@@ -0,0 +1,21 @@
+/**
+ * Отдельный вход для цвета: `@olddevs/ui/color`.
+ *
+ * ПОЧЕМУ МИМО BARREL. Цветовая подсистема `react-aria-components` — семь
+ * компонентов, которых кит не использовал больше нигде, — стоит **61 кБ gzip**
+ * (замер волны 25, метод `scripts/bundle-size.mjs` с невнешним RAC). Для
+ * сравнения: весь кит целиком укладывается в 62 кБ.
+ *
+ * Собственный бюджет кита этого не видит: в `npm run size` RAC объявлен
+ * внешним вместе с остальными peer-зависимостями, а страница фикстуры цвет не
+ * импортирует. Гейт, зелёный независимо от решения, — не гейт.
+ *
+ * Отдельный вход делает шестьдесят килобайт видимыми в самой строке импорта, а
+ * не только в замере, который их не меряет. Прецедент в ките заведён ровно по
+ * этой причине: каталоги локалей живут как `@olddevs/ui/locales/ru`, «чтобы не
+ * тянуться в бандл без импорта».
+ *
+ * Решение и числа — ADR-0038.
+ */
+export { ColorPicker } from "./components/inputs/ColorPicker.js";
+export type { ColorPickerProps } from "./components/inputs/ColorPicker.js";

package/src/components/actions/Alert.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "../../icons.js";
+import { cn } from "../../lib/cn.js";
+import { useMessages } from "../../i18n/useMessages.js";
+import { TONE_TOKENS, type Tone, type Variant } from "../../lib/variants.js";
+
+export interface AlertProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+  /**
+   * Тон сообщения: задаёт цвет, иконку по умолчанию и роль для скринридера. По умолчанию `accent`.
+   *
+   * `danger` получает `role="alert"`, остальные тона — `role="status"`.
+   */
+  tone?: Tone;
+  /**
+   * Подача: `soft` — с подложкой, `outline` — только рамка. По умолчанию `soft`.
+   *
+   * Только `soft` и `outline`, и это ограничение типа, а не забывчивость.
+   *
+   * `solid` на всю ширину блока — плашка, перебивающая содержимое страницы;
+   * `ghost` без рамки и подложки перестаёт читаться как сообщение вовсе. Обе
+   * подачи существуют у кнопки, где размер другой, и туда же не годятся здесь.
+   */
+  variant?: Extract<Variant, "soft" | "outline">;
+  /** Заголовок сообщения: жирная строка над текстом. Необязателен: без него выводится только текст. */
+  title?: ReactNode;
+  /** Текст сообщения под заголовком. */
+  children?: ReactNode;
+  /** Иконка слева. По умолчанию выбирается по тону. */
+  icon?: ReactNode;
+  /** Кнопка закрытия. Без обработчика не рисуется вовсе. */
+  onDismiss?: () => void;
+  /** Действие справа — обычно `Button size="sm"`. */
+  action?: ReactNode;
+  /** Доступное имя кнопки закрытия. По умолчанию берётся из словаря сообщений кита. */
+  closeLabel?: string;
+}
+
+/** Иконка по умолчанию — по тону. Словарь, а не догадка места вызова. */
+const TONE_ICONS: Record<Tone, ReactNode> = {
+  neutral: <InfoIcon size={16} />,
+  accent: <InfoIcon size={16} />,
+  success: <SuccessIcon size={16} />,
+  warning: <WarningIcon size={16} />,
+  danger: <ErrorIcon size={16} />,
+};
+
+/**
+ * Сообщение на месте — в отличие от тоста, который всплывает и уходит.
+ *
+ * Когда что: тост сообщает о СОБЫТИИ («сохранено»), а `Alert` описывает
+ * СОСТОЯНИЕ («канал не подключён, публикации не пойдут»). Состояние не должно
+ * исчезать по таймеру, а событие не должно занимать место на экране навсегда.
+ *
+ * РОЛЬ ВЫБИРАЕТСЯ ПО ТОНУ, и это не косметика. `danger` получает `role="alert"`
+ * — скринридер перебивает им текущую речь; остальные тона получают
+ * `role="status"`, который дожидается паузы. Путать их означает либо потерять
+ * сообщение об ошибке, либо орать про успешное сохранение.
+ */
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  {
+    tone = "accent",
+    variant = "soft",
+    title,
+    children,
+    icon,
+    onDismiss,
+    action,
+    closeLabel,
+    className,
+    ...rest
+  },
+  ref
+) {
+  const messages = useMessages();
+  const t = TONE_TOKENS[tone];
+
+  return (
+    <div
+      ref={ref}
+      role={tone === "danger" ? "alert" : "status"}
+      className={cn(
+        "flex items-start gap-2.5 rounded-md border px-3 py-2.5 text-[13px]",
+        // Вид собирается из АТОМОВ тона, а не через `variantClasses()`, и это
+        // не оптимизация. Тот отдаёт ещё и классы наведения — сообщение же не
+        // кнопка, наводить на него не на что. Гасить их поверх нельзя:
+        // `hover:bg-inherit` не убирает подложку, а подменяет её родительской,
+        // и сообщение мигало бы фоном страницы под курсором.
+        t.border,
+        variant === "soft" ? cn(t.bg, t.softFg) : cn("bg-transparent", t.fg),
+        className
+      )}
+      {...rest}
+    >
+      <span className="flex shrink-0 items-center pt-px">{icon ?? TONE_ICONS[tone]}</span>
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        {title != null && <div className="font-semibold">{title}</div>}
+        {/*
+          Текст сообщения НЕ приглушается прозрачностью. Тона откалиброваны
+          ровно под порог 4.5 на своей подложке (`npm run contrast`), и любое
+          `opacity` поверх молча уводит пару ниже него: `opacity-90` давал
+          3.89–4.08 в светлой теме. Иерархия между заголовком и текстом держится
+          на насыщенности шрифта, а не на приглушении.
+        */}
+        {children != null && <div>{children}</div>}
+      </div>
+      {action != null && <div className="shrink-0 pl-1">{action}</div>}
+      {onDismiss != null && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          aria-label={closeLabel ?? messages.alert.close}
+          className="hover:bg-bg-3 -mr-1 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-xs opacity-70 transition-colors hover:opacity-100"
+        >
+          <CloseIcon size={14} />
+        </button>
+      )}
+    </div>
+  );
+});

package/src/components/actions/Banner.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "../../icons.js";
+import { useMessages } from "../../i18n/useMessages.js";
+import { cn } from "../../lib/cn.js";
+import { TONE_TOKENS, type Tone } from "../../lib/variants.js";
+
+export interface BannerProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+  /**
+   * Тон баннера: задаёт цвет, иконку по умолчанию и роль для скринридера. По умолчанию `accent`.
+   *
+   * `danger` получает `role="alert"`, остальные тона — `role="status"`.
+   */
+  tone?: Tone;
+  /** Заголовок баннера: жирный фрагмент в начале строки. Необязателен: без него в строке остаётся только текст. */
+  title?: ReactNode;
+  /** Текст баннера после заголовка, в той же строке. */
+  children?: ReactNode;
+  /** Иконка слева. По умолчанию выбирается по тону. */
+  icon?: ReactNode;
+  /** Кнопка закрытия. Без обработчика не рисуется вовсе. */
+  onDismiss?: () => void;
+  /** Действие справа — обычно `Button size="sm"`. */
+  action?: ReactNode;
+  /** Доступное имя кнопки закрытия. По умолчанию берётся из словаря сообщений кита. */
+  closeLabel?: string;
+}
+
+/** Иконка по умолчанию — по тону. Тот же словарь, что у `Alert`. */
+const TONE_ICONS: Record<Tone, ReactNode> = {
+  neutral: <InfoIcon size={16} />,
+  accent: <InfoIcon size={16} />,
+  success: <SuccessIcon size={16} />,
+  warning: <WarningIcon size={16} />,
+  danger: <ErrorIcon size={16} />,
+};
+
+/**
+ * Сообщение уровня ПРИЛОЖЕНИЯ: деградация сервиса, работы на сервере, истёкшая
+ * подписка.
+ *
+ * ГРАНИЦА ИЗ ТРЁХ СТРОК, и её стоит держать в голове:
+ *
+ *   `toast`  — СОБЫТИЕ: «сохранено». Всплывает и уходит по таймеру.
+ *   `Alert`  — СОСТОЯНИЕ МЕСТА: «у этой кампании нет канала». Живёт внутри
+ *              содержимого, рядом с тем, о чём говорит.
+ *   `Banner` — СОСТОЯНИЕ ПРИЛОЖЕНИЯ: «публикации не идут, идут работы». Стоит
+ *              над содержимым, переживает навигацию и не относится ни к какому
+ *              блоку страницы.
+ *
+ * Отсюда и отдельный компонент, а не ось у `Alert` (ADR-0027): разница не в
+ * виде, а в месте и времени жизни. Сообщение, умеющее и то и другое, тащило бы
+ * в разметку нерабочее.
+ *
+ * РОЛЬ ВЫБИРАЕТСЯ ПО ТОНУ — тем же правилом, что в `Alert`: `danger` получает
+ * `role="alert"` и перебивает речь скринридера, остальные тона `role="status"`
+ * и дожидаются паузы. Одно правило на кит, а не два похожих.
+ *
+ * ВО ВСЮ ШИРИНУ И БЕЗ СКРУГЛЕНИЙ: баннер — полоса поперёк приложения, а не
+ * карточка внутри страницы. Скруглённые углы читались бы как блок содержимого —
+ * то есть как `Alert`.
+ *
+ * НЕ ЛИПКИЙ. Контракт `--topbar-h` (ADR-0016) и его публикация шапкой
+ * (ADR-0019) не трогаются: шапка остаётся на `top: 0`. Постоянство сообщения
+ * держится на том, что баннер не исчезает из разметки, а не на том, что он
+ * всегда в кадре.
+ *
+ * СТОПКА — ОБЫЧНЫЙ СПИСОК соседних баннеров: каждый закрывается своей кнопкой,
+ * порядок задаёт потребитель. Своей очереди у компонента нет — она была бы
+ * состоянием, а состояние в ките не живёт.
+ */
+export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
+  { tone = "accent", title, children, icon, onDismiss, action, closeLabel, className, ...rest },
+  ref
+) {
+  const messages = useMessages();
+  const t = TONE_TOKENS[tone];
+
+  return (
+    <div
+      ref={ref}
+      role={tone === "danger" ? "alert" : "status"}
+      className={cn(
+        "flex w-full items-center gap-2.5 border-b px-4 py-2.5 text-[13px]",
+        // Вид собирается из АТОМОВ тона, как у `Alert`, а не через
+        // `variantClasses()`: тот отдаёт ещё и классы наведения, а на сообщение
+        // наводить не на что.
+        t.border,
+        t.bg,
+        t.softFg,
+        className
+      )}
+      {...rest}
+    >
+      <span className="flex shrink-0 items-center">{icon ?? TONE_ICONS[tone]}</span>
+      <div className="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2">
+        {title != null && <span className="font-semibold">{title}</span>}
+        {/*
+          Текст НЕ приглушается прозрачностью: тона откалиброваны ровно под порог
+          4.5 на своей подложке (`npm run contrast`), и любое `opacity` поверх
+          молча уводит пару ниже него. Иерархия держится насыщенностью шрифта —
+          тот же урок, что у `Alert`.
+        */}
+        {children != null && <span className="min-w-0">{children}</span>}
+      </div>
+      {action != null && <div className="shrink-0">{action}</div>}
+      {onDismiss != null && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          aria-label={closeLabel ?? messages.banner.close}
+          className="hover:bg-bg-3 -mr-1 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-xs opacity-70 transition-colors hover:opacity-100"
+        >
+          <CloseIcon size={14} />
+        </button>
+      )}
+    </div>
+  );
+});