@olddevs/ui 0.0.0-stage → 4.0.1

package/src/components/inputs/SwatchGroup.tsx

@@ -0,0 +1,342 @@
+"use client";
+
+import { useRef, type KeyboardEvent, type ReactNode } from "react";
+import {
+  Label,
+  RadioButton,
+  RadioField,
+  RadioGroup as AriaRadioGroup,
+} from "react-aria-components";
+import { cn } from "../../lib/cn.js";
+import { LABEL_BG_CLASS, type LabelHue } from "../../lib/variants.js";
+import { Tooltip } from "../overlays/Tooltip.js";
+import { VisuallyHidden } from "../content/VisuallyHidden.js";
+
+export interface SwatchOption<T extends string = string> {
+  /** Значение варианта; именно оно приходит в `onChange`. */
+  value: T;
+  /**
+   * Оттенок из палитры меток.
+   *
+   * Не задан — образец пустой: контур без заливки. Так и собирается вариант
+   * «без цвета», отдельной поддержки под него не нужно: отсутствие цвета это
+   * такой же ответ на вопрос набора, как и любой оттенок.
+   */
+  hue?: LabelHue;
+  /**
+   * Имя варианта СЛОВОМ — им он и называется для скринридера.
+   *
+   * Обязательно и отдельно от `hue`, потому что это разные величины: закраска
+   * нужна глазам, имя — слуху, имя переводится, закраска нет. Без него девять
+   * одинаковых переключателей подряд не различаются никак.
+   */
+  name: string;
+  /** Выключает один образец. */
+  disabled?: boolean;
+}
+
+export interface SwatchGroupProps<T extends string = string> {
+  /**
+   * Выбранное значение.
+   *
+   * Без `null`, в отличие от `RadioGroup`: набор здесь закрытый и непустой по
+   * построению, а «ничего не выбрано» выражается обычным вариантом.
+   */
+  value: T;
+  /** Вызывается при выборе образца и получает его `value`. */
+  onChange: (value: T) => void;
+  /** Вопрос, на который отвечает набор. Обязателен, как у `RadioGroup`. */
+  label: ReactNode;
+  /** Образцы набора: значение, имя и оттенок каждого. */
+  options: SwatchOption<T>[];
+  /**
+   * Сколько образцов в ряду.
+   *
+   * Число, а не `auto-fill`, и это не экономия на CSS. По столбцам ходят
+   * вертикальные стрелки, то есть компонент обязан знать их количество; при
+   * `auto-fill` он узнавал бы его только замером, и клавиатура молча менялась
+   * бы от ширины контейнера — на узком экране «вниз» уводило бы не туда, куда
+   * показывает глаз.
+   */
+  columns?: number;
+  /**
+   * Показывать имя варианта подсказкой при наведении и при фокусе.
+   *
+   * Содержимое — то же `name`, что уходит скринридеру: имя переводит
+   * потребитель, и кит про язык ничего не знает. Своего темпа у подсказки нет,
+   * задержку задаёт общий `TooltipProvider`.
+   *
+   * ВЫКЛЮЧЕНО ПО УМОЛЧАНИЮ, и это не осторожность ради осторожности: подсказка
+   * требует `TooltipProvider` в приложении — без него Radix бросает на первом
+   * же варианте. Набор выпущен раньше подсказки и уже стоит у потребителей без
+   * провайдера; умолчание «включено» уронило бы их на обновлении патча.
+   *
+   * Проп на ГРУППЕ, а не на варианте: набор обязан вести себя одинаково, и
+   * подсказка у трёх образцов из девяти читалась бы как поломка.
+   *
+   * На касании подсказки не будет: так устроен сам жест, а не эта реализация.
+   * Имя варианта там по-прежнему доступно только на слух.
+   */
+  tooltips?: boolean;
+  /** Выключает весь набор. */
+  disabled?: boolean;
+  /** Классы на корневой элемент. */
+  className?: string;
+}
+
+/**
+ * Образец: круг в 24 пикселя.
+ *
+ * Сам образец не несёт ни выбранности, ни фокуса — оба рисуются кольцами
+ * вокруг него, на подложке. Разбор рядом, у `OPTION_CLASS`.
+ */
+const SWATCH_CLASS = "block size-6 rounded-full";
+
+/** Пустой образец — контур: «цвета нет» это ответ, а не отсутствие варианта. */
+const EMPTY_SWATCH_CLASS = "border-line border bg-transparent";
+
+/**
+ * Вариант: образец плюс отступ, по которому и идут кольца.
+ *
+ * ВЫБРАННОСТЬ — КОЛЬЦО ВОКРУГ ОБРАЗЦА, А НЕ ВТОРОЙ ЦВЕТ И НЕ ОБВОДКА ВНУТРЬ.
+ *
+ * Не второй цвет — ровно тот дефект, из-за которого компонент и заводится: у
+ * потребителя выбранный вариант подсвечивался акцентным синим рядом с
+ * бирюзовым образцом, и два цвета спорили. Акцент вдобавок настраивается
+ * брендом: синее кольцо вокруг синего образца не читалось бы вовсе.
+ *
+ * И не внутрь: там кольцо лежит НА оттенке, а оттенков восемь. Замер по
+ * токенам: `fg-0` против заливок даёт от 1.71 (бирюза в тёмной теме) до 2.98 —
+ * то есть ниже 3:1, которые WCAG 1.4.11 требует от признака состояния. Гейт
+ * контраста кита такую пару не ловит: он перебирает объявленные пары токенов,
+ * а «кольцо на образце» парой не объявлено.
+ *
+ * Снаружи кольцо лежит на ПОДЛОЖКЕ, и там та же пара даёт больше 12:1 в любой
+ * теме — отступ `p-1` держит между образцом и кольцом четыре пикселя.
+ *
+ * Кольцо при этом меняет ФОРМУ варианта, а не только его цвет: различать
+ * «выбран» и «не выбран» по одной насыщенности нельзя.
+ *
+ * Кольцо фокуса — акцентное и ещё на два пикселя дальше, поэтому на выбранном
+ * варианте в фокусе видно оба признака, а не один поверх другого.
+ */
+const OPTION_CLASS =
+  // `transition-shadow`, а не `transition-colors`: кольца рисуются тенью, а
+  // цвет на варианте не меняется вовсе — класс перехода цвета был бы обещанием
+  // того, чего здесь нет.
+  "block cursor-pointer rounded-full p-1 transition-shadow disabled:cursor-default " +
+  "disabled:opacity-50";
+
+/**
+ * Выбор одного значения из закрытого набора, где вариант показан ОБРАЗЦОМ
+ * ЦВЕТА, а не текстом: цвет проекта, оттенок метки, цвет календаря.
+ *
+ * ПОЧЕМУ ЭТО НЕ `RadioGroup` С КРУЖКОМ ВНУТРИ. Там у варианта два круга
+ * подряд — переключатель и образец, — и на сетке из девяти это рябь, в которой
+ * цвета не сравнить. Цвет переключателя вдобавок приходит от группы тоном, а
+ * тон семантический (`danger` — «разрушительно», а не «красный»): оттенок
+ * метки в эту ось не ложится, и разводить их по вариантам нельзя — набор
+ * обязан выглядеть одинаково.
+ *
+ * ПОЧЕМУ НЕ `ColorPicker`. Тот про ПРОИЗВОЛЬНЫЙ цвет и намеренно выдаёт его
+ * мимо системы токенов; здесь нужно обратное — ключ из закрытого набора,
+ * который развернёт тема. Он вдобавок живёт отдельным входом и стоит столько
+ * же, сколько весь остальной кит.
+ *
+ * ЗАКРАСКА — ОТТЕНОК ИЗ ПАЛИТРЫ МЕТОК, А НЕ ГОТОВЫЙ КЛАСС И НЕ СТРОКА ЦВЕТА.
+ * Класс снаружи означал бы цвет мимо токенов (и не пережил бы смену темы), а
+ * строка цвета — вторую палитру рядом с уже выпущенной. Оттенков восемь, они
+ * закрыты и не зависят ни от акцента, ни от бренда.
+ *
+ * КЛАВИАТУРА — РАДИОГРУППЫ, но по сетке: Tab приводит фокус на выбранный
+ * вариант, горизонтальные стрелки идут по ряду и переходят на соседний на его
+ * краю (это делает сама радиогруппа), вертикальные ходят по столбцам через
+ * `columns`, Home и End — первый и последний вариант. Выбор применяется сразу:
+ * набор отвечает на один вопрос, и подтверждать в нём нечего.
+ */
+export function SwatchGroup<T extends string = string>({
+  value,
+  onChange,
+  label,
+  options,
+  columns = 6,
+  tooltips,
+  disabled,
+  className,
+}: SwatchGroupProps<T>) {
+  const gridRef = useRef<HTMLDivElement>(null);
+
+  /*
+    ВЕРТИКАЛЬНЫЕ СТРЕЛКИ И КРАЯ — СВОИ, ГОРИЗОНТАЛЬНЫЕ — РАДИОГРУППЫ.
+
+    Стрелки в наборе радиокнопок разбирает react-aria, и разбирает ЛИНЕЙНО, по
+    порядку разметки: «вправо» и «вниз» для неё одно и то же — следующий
+    вариант. В ряду это ровно то, что нужно (на краю ряда выбор честно
+    переходит на соседний), а на сетке «вниз» обязано означать вариант ПОД
+    текущим, то есть шаг в `columns`.
+
+    Поэтому вертикаль и края считаются здесь, и обработчик стоит НА ПОГРУЖЕНИИ
+    со `stopPropagation`: react-aria слушает на самих кнопках, то есть ниже по
+    дереву, и на всплытии успела бы увести выбор раньше нас. Тот же приём и по
+    той же причине, что в `EditableList`.
+
+    Края НЕ зацикливаются: с нижнего ряда «вниз» остаётся на месте. Набор — не
+    карусель, и прыжок с последнего цвета на первый читается как промах, а не
+    как переход. Home и End react-aria в радиогруппе не разбирает вовсе.
+  */
+  const onKeyDownCapture = (event: KeyboardEvent<HTMLDivElement>) => {
+    const owned =
+      event.key === "ArrowUp" ||
+      event.key === "ArrowDown" ||
+      event.key === "Home" ||
+      event.key === "End";
+    if (!owned) return;
+
+    // Гасится ВСЕГДА, даже когда двигаться некуда: иначе на краю сетки
+    // отработала бы линейная навигация react-aria и увела бы выбор вбок.
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled) return;
+
+    // `findLastIndex` не берём: он из ES2023, а цель сборки кита ниже.
+    const lastEnabled = () => {
+      for (let index = options.length - 1; index >= 0; index--)
+        if (options[index]?.disabled !== true) return index;
+      return -1;
+    };
+
+    /*
+      Отсчёт идёт от ТОГО, ГДЕ ФОКУС, а не от того, что выбрано.
+
+      Обычно это одно и то же, но не всегда: потребитель применяет значение сам,
+      и пока его ответ не пришёл (сохранение уходит на сервер), выбранным
+      числится прежний вариант, а человек стоит уже на новом. Считая от
+      значения, вторая стрелка подряд уводила бы не оттуда, откуда шли.
+    */
+    const focused = gridRef.current?.contains(document.activeElement)
+      ? (document.activeElement as HTMLInputElement).value
+      : value;
+    const from = options.findIndex((option) => option.value === focused);
+    const step = event.key === "ArrowDown" ? columns : event.key === "ArrowUp" ? -columns : 0;
+    const to =
+      event.key === "Home"
+        ? options.findIndex((option) => !option.disabled)
+        : event.key === "End"
+          ? lastEnabled()
+          : step !== 0 && from >= 0
+            ? from + step
+            : -1;
+
+    const next = options[to];
+    // Выключенный вариант пропускается, а не перескакивается дальше: в сетке
+    // «дальше» — это соседний столбец, то есть не та колонка, по которой шли.
+    if (to < 0 || next == null || next.disabled || next.value === value) return;
+
+    onChange(next.value);
+    /*
+      Фокус переставляется руками: значение меняет потребитель, и до его
+      ответа радиогруппа о переезде не знает. Кнопка ищется по значению в
+      разметке — своего узла у варианта наружу нет.
+    */
+    gridRef.current
+      ?.querySelector<HTMLInputElement>(`input[value="${CSS.escape(next.value)}"]`)
+      ?.focus();
+  };
+
+  return (
+    <AriaRadioGroup
+      value={value}
+      // Значение приходит из закрытого набора, и союзный тип его сужает: RAC
+      // отдаёт наружу обычную строку, потому что о наборе не знает.
+      onChange={(next) => onChange(next as T)}
+      isDisabled={disabled}
+      className={cn("flex flex-col gap-1.5", className)}
+    >
+      <Label className="text-fg-2 text-[11px] font-bold tracking-wide uppercase">{label}</Label>
+      {/*
+        Сетка, а не переносящаяся строка: столбцы обязаны совпадать по
+        вертикали, иначе сравнивать цвета глазами нечем — а выбирают их именно
+        сравнением. `min-content` держит колонку по образцу: растянутые ячейки
+        развели бы круги по ширине контейнера.
+      */}
+      <div
+        ref={gridRef}
+        onKeyDownCapture={onKeyDownCapture}
+        // Зазор — шесть пикселей, а не четыре: кольцо выбранности выходит на два
+        // за край варианта, и в тесной сетке оно задевало бы соседа.
+        className="grid w-fit gap-1.5"
+        style={{ gridTemplateColumns: `repeat(${columns}, min-content)` }}
+      >
+        {options.map((option) => {
+          const button = (
+            <RadioButton
+              className={({ isSelected, isFocusVisible }) =>
+                cn(
+                  OPTION_CLASS,
+                  // Порядок значим: `cn` — это `twMerge`, и кольцо выбранности
+                  // обязано вытеснить кольцо наведения, а не смешаться с ним.
+                  !isSelected && "hover:ring-line hover:ring-2",
+                  isSelected && "ring-fg-0 ring-2",
+                  isFocusVisible && "outline-accent-strong outline-2 outline-offset-2"
+                )
+              }
+            >
+              {/*
+                Имя варианта видно только скринридеру: глазами вариант называет
+                сам образец, а вслух — слово. Подпись рядом с девятью кругами
+                превратила бы сетку в список. С `tooltips` то же слово видно и
+                глазами — подсказкой, и берётся оно отсюда же, а не из второго
+                поля: два источника имени разошлись бы при первом же переводе.
+              */}
+              <VisuallyHidden elementType="span">{option.name}</VisuallyHidden>
+              <span
+                aria-hidden
+                className={cn(
+                  SWATCH_CLASS,
+                  option.hue != null ? LABEL_BG_CLASS[option.hue] : EMPTY_SWATCH_CLASS
+                )}
+              />
+            </RadioButton>
+          );
+
+          return (
+            <RadioField key={option.value} value={option.value} isDisabled={option.disabled}>
+              {/*
+                ПОДСКАЗКА ВИСИТ НА ОБЁРТКЕ, А НЕ НА САМОМ ВАРИАНТЕ. Две причины,
+                и обе замерены, а не предположены.
+
+                Первая: на варианте она работала бы только мышью. `RadioButton`
+                пропускает наружу не любые пропы, а отфильтрованные: указатель
+                (`onPointerMove`, `onPointerLeave`) доходит до разметки,
+                `onFocus` и `onBlur` — нет. Подсказка на нём появлялась бы при
+                наведении и молчала при обходе с клавиатуры, то есть отсутствовала
+                бы ровно у того, кому нужнее.
+
+                Вторая: Radix вешает на триггер `aria-describedby`. На варианте
+                это удвоило бы имя — оно уже доступное имя варианта, и
+                скринридер прочитал бы «Синий Синий». На обёртке описание не
+                достаётся никому: у радиокнопки своего `aria-describedby` нет, а
+                от предка описание не наследуется — вслух вариант по-прежнему
+                называется один раз.
+
+                Обёртка появляется только вместе с подсказкой: без неё это был
+                бы лишний узел в сетке из девяти на каждый вариант.
+
+                На ВЫКЛЮЧЕННОМ варианте подсказка работает как на любом другом:
+                «почему нельзя» она не объясняет, но «что это за цвет» — вопрос
+                законный и к недоступному варианту.
+              */}
+              {tooltips ? (
+                <Tooltip content={option.name}>
+                  <span className="block">{button}</span>
+                </Tooltip>
+              ) : (
+                button
+              )}
+            </RadioField>
+          );
+        })}
+      </div>
+    </AriaRadioGroup>
+  );
+}

package/src/components/inputs/TagInput.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { useState, type KeyboardEvent } from "react";
+import { Button as AriaButton, Label, Tag, TagGroup, TagList } from "react-aria-components";
+import { CloseIcon } from "../../icons.js";
+import { useFieldDescribedBy } from "../../hooks/useFieldDescription.js";
+import { cn } from "../../lib/cn.js";
+import { useMessages } from "../../i18n/useMessages.js";
+import { FIELD_INPUT_CLASS, FIELD_SHELL_CLASS } from "../../lib/field.js";
+import { TAG_CLASS, TAG_REMOVE_CLASS } from "../../lib/tag.js";
+
+export interface TagInputProps {
+  /** Текущие теги. */
+  value: string[];
+  /** Вызывается при добавлении и удалении тега и получает новый массив. */
+  onChange: (value: string[]) => void;
+  /** Видимая подпись над полем; служит и доступным именем, если нет `aria-label`. */
+  label?: string;
+  /** Плейсхолдер в пустом поле ввода. */
+  placeholder?: string;
+  /** Предел числа тегов. По достижении ввод выключается. */
+  max?: number;
+  /** Выключает поле ввода тега. */
+  disabled?: boolean;
+  /** Классы на корневой элемент. */
+  className?: string;
+  /** Доступное имя поля, когда видимой подписи `label` нет. */
+  "aria-label"?: string;
+  /**
+   * Своё описание поля ввода. Сливается с описанием `FormField`, а не
+   * заменяет его.
+   */
+  "aria-describedby"?: string;
+}
+
+/**
+ * Ввод набора тегов: печатаешь — Enter превращает в тег.
+ *
+ * Три решения, которые компонент принимает за потребителя, потому что иначе
+ * каждый экран решал бы их по-своему:
+ *
+ * 1. **Enter на пустом вводе не делает ничего.** Соблазн отправить форму велик,
+ *    но поле тегов почти всегда стоит внутри формы, и «Enter в пустом поле
+ *    отправляет» означает случайную отправку на полпути: набрал три тега,
+ *    задумался, нажал Enter по привычке — форма ушла.
+ * 2. **Дубли не добавляются.** Повторный тег ничего не значит, а на экране
+ *    выглядит как ошибка ввода. Молча игнорируем: сообщать «такой уже есть»
+ *    значит ругаться на действие, которое ничего не сломало.
+ * 3. **Backspace на пустом вводе снимает последний тег.** Идиома, знакомая по
+ *    почтовым клиентам; без неё удалять приходится мышью по крестикам.
+ *
+ * Пробел разделителем НЕ считается: теги бывают из двух слов («ночной город»),
+ * и разделять по пробелу значит запретить их вовсе. Запятая считается — её ни
+ * в одном теге не бывает, а вставка списка из буфера через неё и приходит.
+ */
+export function TagInput({
+  value,
+  onChange,
+  label,
+  placeholder,
+  max,
+  disabled,
+  className,
+  "aria-describedby": ariaDescribedBy,
+  ...rest
+}: TagInputProps) {
+  const messages = useMessages();
+
+  /**
+   * Описание поля из `FormField` плюс своё, если потребитель его передал.
+   *
+   * Тот же приём, что у `TextControl` и `NumberInput`: значения СЛИВАЮТСЯ, а
+   * не заменяют друг друга.
+   *
+   * Мишень — ПОЛЕ ВВОДА, а не `TagGroup`. Описание под полем объясняет, что
+   * набирать; набор уже добавленных тегов оно не описывает. По той же причине
+   * `aria-describedby` вынут из спреда: два носителя одного идентификатора
+   * заставили бы скринридер прочитать подсказку дважды за один обход.
+   */
+  const fieldDescribedBy = useFieldDescribedBy();
+  const describedBy = [ariaDescribedBy, fieldDescribedBy].filter(Boolean).join(" ") || undefined;
+
+  const [draft, setDraft] = useState("");
+  const full = max != null && value.length >= max;
+
+  const add = (raw: string) => {
+    /*
+      Разбор по запятой живёт ЗДЕСЬ, а не в обработчике клавиш: список из
+      буфера («небо,море,лес») приходит вставкой, минуя клавиатуру, и раньше
+      становился одним тегом с запятыми внутри.
+    */
+    const parts = raw
+      .split(",")
+      .map((t) => t.trim())
+      .filter(Boolean);
+    if (!parts.length || full) return;
+
+    const next = [...value];
+    for (const tag of parts) {
+      if (max != null && next.length >= max) break;
+      // Дубли игнорируются молча: повторный тег ничего не значит, а ругаться
+      // на действие, которое ничего не сломало, — лишний шум.
+      if (!next.includes(tag)) next.push(tag);
+    }
+    setDraft("");
+    if (next.length !== value.length) onChange(next);
+  };
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" || e.key === ",") {
+      /*
+        Событие гасится ВСЕГДА, включая пустой ввод, — и это то самое решение
+        из докстроки. Пропускать пустой Enter дальше значит отправлять форму
+        из поля тегов: набрал три тега, задумался, нажал Enter по привычке —
+        форма ушла. Раньше здесь стояло обратное, и обещание докстроки
+        расходилось с кодом.
+      */
+      e.preventDefault();
+      if (draft.trim()) add(draft);
+      return;
+    }
+    if (e.key === "Backspace" && draft === "" && value.length > 0) {
+      onChange(value.slice(0, -1));
+    }
+  };
+
+  return (
+    <TagGroup
+      {...rest}
+      aria-label={rest["aria-label"] ?? label}
+      className={cn("flex flex-col gap-1.5", className)}
+      onRemove={(keys) => onChange(value.filter((t) => !keys.has(t)))}
+    >
+      {label ? <Label className="text-fg-2 text-caption">{label}</Label> : null}
+
+      <div className={cn(FIELD_SHELL_CLASS, "flex flex-wrap items-center gap-1.5 py-1.5")}>
+        <TagList items={value.map((t) => ({ id: t }))} className="contents">
+          {(item) => (
+            <Tag id={item.id} textValue={item.id} className={TAG_CLASS}>
+              {item.id}
+              {/*
+                Кнопка ОБЯЗАНА быть `Button` из react-aria, а не обычной
+                `<button>`. Поведение снятия подключается через `ButtonContext`,
+                и голая кнопка его не читает: `slot="remove"` на ней выглядит
+                правильно, разметка выходит валидной, axe доволен — а нажатие
+                не делает НИЧЕГО. Тег снимался только Backspace'ом, то есть с
+                клавиатуры; мышью — никак.
+
+                Та же ловушка, что у `FileTrigger` с выбором файла. Правило
+                одно: если react-aria обещает потомку поведение, потомок берётся
+                у react-aria.
+
+                Имя кнопке нужно своё — подпись react-aria не придумывает, языка
+                приложения он не знает. А вот имя тега вставлять НЕ нужно:
+                react-aria дописывает подпись своего тега к имени кнопки сам, и
+                «Убрать тег альфа» читалось как «Убрать тег альфа альфа».
+                Найдено ревью волны 18 вычислением доступного имени — по
+                разметке этого не видно.
+              */}
+              <AriaButton
+                slot="remove"
+                aria-label={messages.tagInput.remove}
+                className={TAG_REMOVE_CLASS}
+              >
+                <CloseIcon size={12} />
+              </AriaButton>
+            </Tag>
+          )}
+        </TagList>
+
+        <input
+          type="text"
+          value={draft}
+          aria-describedby={describedBy}
+          disabled={disabled}
+          /*
+            Набор добран — поле становится ТОЛЬКО ДЛЯ ЧТЕНИЯ, а не выключается.
+
+            `disabled` на поле, в котором стоит каретка, снимает с него фокус:
+            пользователь набирал последний тег, жал Enter — и фокус улетал на
+            документ, а обход формы начинался заново. Заодно переставал работать
+            Backspace для снятия последнего тега: события выключенного поля не
+            приходят вовсе.
+          */
+          readOnly={full || undefined}
+          placeholder={full ? undefined : placeholder}
+          data-disable-focus-ring="true"
+          /*
+            Имя у поля СВОЁ, а не общее с группой. Ярлык «Теги» принадлежит
+            набору тегов (`TagGroup`), и повесить его же на поле — значит
+            выдать скринридеру две разные мишени с одним именем: «Теги, список»
+            и «Теги, поле ввода». Тест на это и споткнулся.
+          */
+          aria-label={
+            rest["aria-label"]
+              ? messages.tagInput.addTo({ label: String(rest["aria-label"]) })
+              : label
+                ? messages.tagInput.addTo({ label: String(label) })
+                : messages.tagInput.add
+          }
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={onKeyDown}
+          // Ввод дописывается по остатку строки, а не занимает её целиком:
+          // теги и поле стоят в одном потоке, и `w-full` вытолкнул бы поле на
+          // новую строку даже при одном коротком теге.
+          /*
+            Уход фокуса ВНУТРИ поля тегов черновик не коммитит. Иначе клик по
+            крестику соседнего тега сначала добавлял набранное новым тегом:
+            пользователь просил удалить, а получал лишнее. Проверяем, куда
+            ушёл фокус, — если в ту же оболочку, это не окончание ввода.
+          */
+          onBlur={(e) => {
+            if (e.currentTarget.parentElement?.contains(e.relatedTarget)) return;
+            add(draft);
+          }}
+          className={cn(FIELD_INPUT_CLASS, "min-w-[80px] flex-1 py-0.5")}
+        />
+      </div>
+    </TagGroup>
+  );
+}