ics-ui-kit 0.1.13 → 0.1.14

package/dist/components/table/Table.stories.d.ts

@@ -3,13 +3,289 @@ import { Table } from './Table';
 declare const meta: Meta<typeof Table>;
 export default meta;
 type Story = StoryObj<typeof Table>;
-export declare const Default: Story;
-export declare const WithCheckboxes: Story;
-export declare const WithActions: Story;
-export declare const WithDropdownMenu: Story;
-export declare const WithSortableHeaders: Story;
-export declare const WithFooter: Story;
-export declare const LargeDataExample: Story;
+export declare const TableBase: Story;
+/**
+ * Подсветка строк слоями. Механизм целиком описан в разделе «Раскраска строк».
+ *
+ * В примере три прикладных состояния: выделение чекбоксом, деактивация и просрочка.
+ * Для первых двух взяты готовые цвета кита (`TABLE_ROW_TINT`), для просрочки рядом положен
+ * свой — `hsl(var(--status-warning) / 12%)`. Колонка «Слои» перечисляет то, что применено
+ * к строке; на последней строке сходятся все три и видны разом.
+ *
+ * Две нижние строки вдобавок перекрашены целиком — своя заливка через
+ * `className="bg-… hover:bg-…"`. Слои ложатся на них так же, как на строки со штатной
+ * заливкой, и наведение продолжает работать.
+ */
+export declare const RowTints: StoryObj;
 export declare const ScrollableTable: Story;
-export declare const WithScrollShadow: Story;
-export declare const EmptyState: Story;
+/**
+ * Итоговая строка и подпись таблицы.
+ *
+ * **Почему итоги — `TableFooter`, а не последняя строка тела.** Итог не запись, а сводка
+ * по записям, и из `tbody` он должен выпадать сам собой: сортировка, фильтр, выделение
+ * и «отметить все» работают со строками тела, и особая последняя строка каждый раз была бы
+ * исключением, про которое надо помнить. Скринридер читает `tfoot` так же — как итог,
+ * а не как ещё одного дистрибьютора.
+ *
+ * Считает итоги вызывающая сторона: кит не знает, что складывать, что усреднять, а что
+ * не сводится вовсе. Здесь суммируются штуки и рубли, а рост оставлен прочерком — среднее
+ * по процентам без весов врёт, и честнее показать это прямо в примере.
+ *
+ * Верхнюю линию итогов рисуют ячейки, а не сам `tfoot`: в раздельной модели границ
+ * (`border-separate` у `Table`) собственная граница групп строк игнорируется.
+ *
+ * **Подпись — `caption`, а не абзац рядом с таблицей.** `caption` связан с таблицей
+ * разметкой, а не соседством: скринридер называет им таблицу при входе, а перенос таблицы
+ * в другое место не оставляет подпись позади. Стоит она под таблицей (`caption-bottom`
+ * у `Table`) — сверху обычно уже есть заголовок раздела, и вторая надпись спорила бы с ним.
+ */
+export declare const TotalsAndCaption: Story;
+/**
+ * Итоги, которые не уезжают: `sticky` у шапки держит её у верха контейнера, `sticky` у итогов —
+ * у низа. Между ними прокручивается тело.
+ *
+ * Прокручивается при этом контейнер таблицы, как в «Scrollable Table», поэтому таблица
+ * остаётся таблицей: ширины колонок считает браузер, `colSpan` в итогах работает, разметка
+ * ничем не отличается от обычной. Обоим пропам нужна ограниченная высота у контейнера
+ * (`containerClassName="h-80"`): без неё прокручивать нечего, а `position: sticky` без
+ * прокрутки ничего не делает.
+ *
+ * Слой у шапки и итогов один (`z-20`): друг с другом они не спорят — стоят по разные стороны
+ * тела, — но оба обязаны перекрывать проезжающие под ними строки.
+ */
+export declare const StickyTotals: Story;
+/**
+ * Прокрутка по обеим осям: шапка прилипает сверху, первые две колонки — слева.
+ *
+ * Закреплённых колонок две, поэтому `left` второй равен ширине первой (`ACCOUNT_WIDTH`).
+ * Случай, когда ширины меняются на ходу, разобран в «Sticky + Resizable Columns».
+ *
+ * Ширину таблице диктует `w-max`: она растягивается по содержимому, а незакреплённые
+ * колонки сами берут нужный размер.
+ */
+export declare const StickyColumns: Story;
+type ResizableColumnsArgs = {
+    handleScope: "header" | "table";
+};
+/**
+ * Ресайз колонок перетаскиванием и автофит по двойному клику.
+ *
+ * Колонка «Условия работы» специально многострочная: автофит и `table-layout: fixed`
+ * проверяются в том числе на переносе текста.
+ *
+ * Заголовок обрезается вложенным `<span>`: `overflow: hidden` на самой ячейке срезал бы
+ * выступающую половину зоны захвата, и граница колонки перестала бы ловить курсор.
+ *
+ * `handleScope` переключает зону захвата. `header` — ручка только в шапке. `table` — ещё
+ * и в каждой ячейке тела, так что вдоль всей границы колонки получается непрерывная полоса,
+ * как в Excel.
+ *
+ * Полоса собрана из посегментных ручек намеренно. Растянуть одну ручку из шапки на всю
+ * высоту нельзя: она позиционирована абсолютно, и большая высота раздувает `scrollHeight`
+ * контейнера, добавляя пустую вертикальную прокрутку. Вариант с замером высоты таблицы
+ * через `ResizeObserver` добавляет к сторибучному примеру наблюдатель и лишний ререндер
+ * на каждое изменение размера — тут это не окупается. Цена посегментного варианта —
+ * по ручке на ячейку; для больших таблиц её стоит заменить на оверлей поверх таблицы.
+ *
+ * Чтобы подсвечивалась граница целиком, наведённая колонка хранится в состоянии
+ * и раздаётся всем её ручкам через `active`.
+ *
+ * Обёртке заданы `w-fit max-w-full`: по умолчанию она `w-full` и, когда таблица уже
+ * контейнера, справа остаётся пустая рамка. `w-fit` прижимает её к ширине таблицы,
+ * `max-w-full` не даёт вылезти за экран и включает горизонтальную прокрутку,
+ * когда колонки растянули шире доступного места.
+ */
+export declare const ResizableColumns: StoryObj<ResizableColumnsArgs>;
+type StickyResizableColumnsArgs = {
+    pinnedCount: number;
+};
+/**
+ * Закреплённые колонки вместе с изменяемой шириной.
+ *
+ * Переключатель числа закреплённых колонок здесь ради того, что начинается со второй
+ * колонки: её `left` равен **сумме ширин всех предыдущих закреплённых**, и у каждой
+ * следующей значение своё. Считает его `stickyOffset`. Под заголовком закреплённой колонки
+ * показано текущее значение — переключите количество и посмотрите, как растёт ряд.
+ * Минимальный случай с одной колонкой и константой `left-0` — в «Sticky Columns».
+ *
+ * Отсюда два следствия, которые видны начиная со второй колонки:
+ *
+ * 1. Ширины обязаны быть известны заранее, поэтому таблице нужен `table-layout: fixed`.
+ *    При `auto` браузер считает ширины по содержимому, заданные значения игнорирует,
+ *    и вычисленный `left` промахивается.
+ * 2. Закреплённые колонки должны помещаться в контейнер — они занимают его левый край
+ *    насовсем. Закрепите четыре и сузьте окно: прокручивать станет нечего.
+ *
+ * **Как это уживается с ресайзом.** Ширины берутся из `useColumnResize` — того же источника,
+ * которым таблица задаёт `width` колонкам, так что после каждой правки `left` пересчитывается
+ * сам. Есть ровно одна шероховатость: **во время** перетаскивания ручки хук пишет ширину прямо
+ * в DOM и React не трогает, поэтому вычисленный из состояния `left` отстаёт до отпускания
+ * кнопки — следующая закреплённая колонка на это время наезжает на предыдущую.
+ *
+ * Лечится тем же приёмом с другой стороны: пока ручку тянут, `left` дописывается прямо в DOM
+ * на тех же событиях мыши — тоже без единого ререндера. Слушатель вешается поверх
+ * `getResizeHandleProps` и снимается на `mouseup`; менять ширину закреплённой колонки больше
+ * нечему, поэтому наблюдать за раскладкой целиком (`ResizeObserver`) незачем.
+ */
+export declare const StickyResizableColumns: StoryObj<StickyResizableColumnsArgs>;
+/**
+ * Ресайз плюс перетаскивание колонок.
+ *
+ * Перетаскивание — `useColumnReorder`: колонка едет за курсором, соседи разъезжаются,
+ * отпускание укладывает её в новый слот. Разбор, почему здесь это дешевле DnD-библиотеки,
+ * лежит в документации самого хука.
+ *
+ * Драг начинается с грипа: нажатие по всей ячейке конфликтовало бы с ресайзером, который
+ * тоже стартует в шапке.
+ *
+ * Размер шрифта оставлен `text-xs` от таблицы. В макете этот вариант шапки нарисован
+ * в размере `sm` (14/20), но вся остальная таблица собрана в `xs` (12/16), и мешать
+ * их в одной таблице было бы хуже, чем разойтись с документационным фреймом.
+ */
+export declare const ReorderableColumns: StoryObj;
+/**
+ * Инлайн-редактирование: выделение диапазона, копирование, автозаполнение, readonly.
+ *
+ * Внешний вид сетки лежит в модуле `editable`: заливку ячейки даёт `cellStateStyles`, рамку
+ * диапазона — `cellRangeEdges`, ручку — `TableFillHandle`, поле правки — `cellEditorStyles`.
+ * Здесь остаётся механика: выделение, клавиатура, буфер обмена, автозаполнение.
+ *
+ * Состояния взяты из макета `Table / Cell` и разложены по токенам кита:
+ *
+ * | состояние  | токен |
+ * |------------|-------|
+ * | read-only  | `bg-secondary-bg-hover` (#f1f5f9) |
+ * | selected   | рамка 2px `--primary-accent` по краю диапазона |
+ * | editing    | `bg-status-warning-bg-hover` (#ffedd5) + `shadow-focus` |
+ * | modified   | `bg-status-warning-bg-hover` (#ffedd5) |
+ * | fill-source| `bg-primary-bg-hover` (#e2e8f0) |
+ * | drag-range | рамка 1px `--primary-border` (#cbd5e1) с альфой 0.75 |
+ *
+ * Копирование отдаёт TSV: так вставка попадает в Excel и Google Sheets по ячейкам.
+ * `navigator.clipboard` в iframe Storybook может быть недоступен, поэтому есть запасной
+ * путь через скрытую `textarea` и `execCommand`.
+ *
+ * Над таблицей — `Toolbar` с откатом правок. Кнопка недоступна, пока правок нет, и держит
+ * в подписи их число: отмена оптом требует понимания, сколько именно будет потеряно.
+ * Откат возвращает исходные данные вместе с признаком изменённых ячеек и состоянием
+ * редактирования, поэтому таблица приходит ровно в тот вид, с которого стори открывается.
+ *
+ * **Каретка в точку двойного клика.** Поле ввода появляется уже после клика, поэтому
+ * по умолчанию каретка встаёт в начало. Координата запоминается на `dblclick` и применяется
+ * при фокусе через `placeCaretAtPoint` (`lib/utils/dom`). Содержимое `input` лежит вне
+ * DOM-дерева, и `caretPositionFromPoint` вернул бы сам элемент, поэтому индекс считается
+ * измерением текста на canvas. Приём взят из MDT (`_core/scripts/helpers/utils/placeCaret.ts`,
+ * применение — `inline/scripts/transformers/CellTransformer.ts`).
+ *
+ * У числовых колонок каретка может промахнуться на пару пикселей: на экране стоит
+ * отформатированное значение с разделителем разрядов, а в поле — сырое число, и ширины
+ * строк слегка разъезжаются.
+ *
+ * **Многострочная колонка.** «Комментарий» хранит текст с переносами и правится редактируемым
+ * `div` (`MultilineCellEditor`): у `textarea` собственная высота и свой скролл, из-за чего
+ * ячейка прыгала бы при входе в правку и держала бы фиксированный размер по мере набора.
+ * Каретка ставится штатным `caretPositionFromPoint` (`placeCaretAtClientPoint`) — содержимое
+ * `div` есть в DOM, поэтому точка попадает в нужную строку.
+ * Enter сохраняет, перенос — Shift+Enter или Alt+Enter, как в Excel. Вставка из буфера
+ * принудительно приводится к тексту: иначе `contenteditable` примет чужую разметку.
+ *
+ * В режиме просмотра текст обрезан тремя строками, чтобы одна ячейка не задирала высоту всей
+ * строки; из-за этого двойной клик по обрезанной третьей строке может поставить каретку
+ * на пару символов мимо. Копирование отдаёт такие значения в кавычках, по правилу CSV —
+ * иначе перенос развалил бы строку TSV при вставке.
+ *
+ * **Клавиатура.** Раскладка снята с MDT и Excel:
+ *
+ * | клавиши | действие |
+ * |---------|----------|
+ * | стрелки | активная ячейка; Shift — расширить выделение, Ctrl — прыжок к краю |
+ * | Home / End | первая / последняя колонка, с Ctrl — ещё и строка |
+ * | Enter, Tab | сохранить и перейти (Shift — в обратную сторону) |
+ * | F2 | редактирование, каретка в конце |
+ * | любой символ | быстрое редактирование: набранное заменяет значение |
+ * | Escape | отменить правку, иначе — снять выделение |
+ * | Delete | очистить выделенные ячейки |
+ * | Ctrl+C | скопировать выделение как TSV |
+ *
+ * Ключевое различие — «полное» и «быстрое» редактирование (`EditState.full`): в первом
+ * стрелки двигают каретку внутри поля, во втором сохраняют и переводят ячейку. Enter и Tab
+ * переводят активную ячейку, как в Excel.
+ *
+ * Tab перехватывается только при наличии активной ячейки — иначе фокус запирался бы
+ * в таблице. Выход с клавиатуры: Escape снимает выделение, следующий Tab уводит дальше.
+ */
+export declare const InlineEditing: StoryObj;
+/**
+ * Список пользователей с шапкой раздела и тулбаром.
+ *
+ * Выделение чекбоксами и меню «Активность», которое реально включает и выключает
+ * отмеченные строки. Обе подсветки — слои `tableRowTints()` с готовыми цветами кита
+ * (`TABLE_ROW_TINT`); строка о состояниях ничего не знает, их собирает прикладной код.
+ *
+ * Слои складываются альфами, поэтому выделенная деактивированная строка видна и как
+ * выделенная, и как деактивированная. Так и должно быть — выделяют её обычно затем,
+ * чтобы включить обратно.
+ *
+ * Часть строк деактивирована и выделена изначально — так оба состояния видно сразу.
+ * Индексы деактивированных те же, что на макете. После применения действия выделение
+ * сбрасывается — так же, как на макете, где чекбоксы уже сняты.
+ *
+ * Контент — простой текст, как в остальных стори; бейджи и селекты из макета остаются
+ * отдельной задачей.
+ */
+export declare const UserListWithToolbar: StoryObj;
+/**
+ * Колоночное меню: быстрый поиск, сортировка и фильтр по значениям.
+ *
+ * **Триггер — вся ячейка шапки**: заголовок сам служит кнопкой. Разметка триггера вместе
+ * с разбором, почему кликабельна кнопка внутри `th`, вынесена в `ColumnHeaderMenu`
+ * (`tableStoryParts.tsx`).
+ *
+ * **Фон ячейки** — два токена из макета шапки: наведение `secondary-bg-hover`, раскрытое
+ * меню `primary-bg-hover` (насыщеннее). Оба живут в `TableHead` под флагом `interactive`.
+ *
+ * **Содержимое меню** повторяет макет `Results`: группа сортировки, разделитель, группа
+ * фильтра с поиском по значениям и списком галочек, разделитель, «Очистить все». Сверху
+ * добавлена группа быстрого поиска по подстроке. Всё собрано из готовых примитивов кита —
+ * `DropdownMenuGroup` / `DropdownMenuLabel` / `DropdownMenuSearchItem` /
+ * `DropdownMenuRadioGroup` / `DropdownMenuCheckboxItem` / `DropdownMenuSeparator`;
+ * длинный список значений прокручивается в `ScrollShadowContainer`.
+ *
+ * Список галочек строится по всем строкам таблицы: при построении по видимым снятая галочка
+ * убирала бы из списка саму себя, и вернуть её было бы нечем.
+ */
+export declare const ColumnMenu: StoryObj;
+/**
+ * Иерархия строк с линиями связи.
+ *
+ * **Отрисовка.** Ячейка — `position: relative` с растущим по глубине `padding-left`, внутри
+ * абсолютно позиционированные спаны толщиной 1px. Вертикали выходят за padding-box на 1px
+ * сверху и снизу: нижняя граница ячейки лежит вне его, и вынос делает линию сплошной.
+ * У `end` вертикаль обрывается на коннекторе — это и даёт уголок. Спуск к первому потомку
+ * рисует строка родителя: вертикаль потомка начинается от его собственной строки, поэтому
+ * участок под раскрывателем остаётся за родителем.
+ *
+ * Коннектор привязан к центру первой строки текста: при переносе длинной подписи он
+ * остаётся напротив узла.
+ *
+ * Раскрыватель центрируется точно на вертикали своего уровня
+ * (`padding-left = treeLineX(level) - TREE_TOGGLE / 2`), поэтому линии детей выходят ровно
+ * из его центра. У листьев на его месте распорка той же ширины, чтобы подписи соседних
+ * строк стояли на одной вертикали. Сторона квадрата равна стороне чекбокса, а зона нажатия
+ * расширена до 24px невидимым псевдоэлементом: сам квадрат остаётся на сетке линий.
+ *
+ * Вся разметка линий размечена data-атрибутами: на обёртке лежит модель строки целиком
+ * (`data-tree-lines="pass none end"`), на каждом спане — его роль и номер колонки. В DevTools
+ * рядом с нарисованным видно и то, что было велено нарисовать.
+ *
+ */
+export declare const RowHierarchy: StoryObj;
+/**
+ * Группировка строк по двум полям.
+ *
+ * Группировка — это то же дерево, только узлы разного сорта.
+ * Данные сворачиваются в дерево `GroupNode` (группа → группа → строка), а дальше работают
+ * ровно те же `flattenTree` и `TableTreeCell`, что и в `RowHierarchy`, — линии считает
+ * модель.
+ */
+export declare const RowGrouping: StoryObj;

package/dist/components/table/column-reorder/index.d.ts

@@ -0,0 +1 @@
+export { useColumnReorder, COLUMN_KEY_ATTRIBUTE, type UseColumnReorderOptions, type UseColumnReorderResult } from './useColumnReorder';

package/dist/components/table/column-reorder/useColumnReorder.d.ts

@@ -0,0 +1,82 @@
+import { PointerEvent as ReactPointerEvent } from 'react';
+/** Атрибут, по которому хук находит в DOM все ячейки одной колонки. */
+export declare const COLUMN_KEY_ATTRIBUTE = "data-column-key";
+export interface UseColumnReorderOptions<K extends string> {
+    /** Полный видимый порядок колонок — включая те, что двигать нельзя. */
+    columns: K[];
+    /** Ширины колонок: из них считаются границы слотов. Обычно это `widths` из `useColumnResize`. */
+    widths: Record<K, number>;
+    /** Новый порядок. Хук ничего не хранит — состояние остаётся у вызывающей стороны. */
+    onReorder: (next: K[]) => void;
+    /**
+     * Колонки, которые нельзя ни таскать, ни занимать: например колонка иерархии,
+     * которая обязана оставаться первой. Свой индекс они сохраняют при любой перестановке.
+     */
+    locked?: K[];
+}
+export interface UseColumnReorderResult<K extends string> {
+    /** Колонка, которую тащат прямо сейчас. Годится для подсветки грипа. */
+    dragKey: K | null;
+    /** Пропы для ручки-грипа. Драг начинается только с неё. */
+    getGripProps: (key: K) => {
+        onPointerDown: (event: ReactPointerEvent) => void;
+        style: {
+            touchAction: "none";
+        };
+    };
+    /** Пропы для каждой ячейки колонки — и в шапке, и в теле. Без них колонка не поедет. */
+    getColumnProps: (key: K) => Record<string, string>;
+}
+/**
+ * Перетаскивание колонок таблицы: колонка едет за курсором, соседи разъезжаются, отпускание
+ * укладывает её в новый слот.
+ *
+ * **Почему не библиотека.** Универсальные DnD-библиотеки (dnd-kit и подобные) существуют ради
+ * произвольной геометрии: они измеряют узлы, ищут коллизии, держат подписку на каждый
+ * перетаскиваемый элемент. Здесь ничего этого не нужно — колонки лежат в один ряд, а их ширины
+ * уже известны из `useColumnResize`, так что смещение слота это префиксная сумма, а выбор цели —
+ * ближайший центр. Ровно то же самое делает `closestCenter`, только без обхода DOM.
+ *
+ * Вторая причина — цена на большой таблице. Библиотечный подход требует хука на **каждую**
+ * ячейку, включая ячейки тела, иначе колонка не поедет целиком: на таблице 7×34 это больше
+ * двухсот подписок и столько же ререндеров на каждое движение мыши. Здесь во время драга
+ * React не участвует вовсе: трансформации пишутся прямо в DOM, а состояние меняется один раз,
+ * когда кнопку отпустили. Тот же приём и по той же причине используется в `useColumnResize`.
+ *
+ * **Оговорка про инлайновые стили.** На время драга хук пишет ячейкам `transform`,
+ * `transition`, `position`, `z-index` и `box-shadow` — последний рисует левый край, которого
+ * у плывущей колонки нет (см. `setColumnSeparator`). Свои значения этих свойств ячейка
+ * получает обратно после отпускания: хук снимает их при первом касании и возвращает
+ * в конце. Классы при этом не трогаются вовсе, поэтому оформление классами живёт своей
+ * жизнью, а тень от хука просто лежит поверх на время перетаскивания.
+ *
+ * **Оговорка про фон.** Плывущая колонка на время перетаскивания получает классы
+ * `opaqueCellStyles`: строка прозрачна, и без непрозрачного фона колонка едет поверх соседей
+ * вместе с их текстом, наложенным на свой. Тот же рецепт, что у закреплённой колонки, — и по
+ * той же причине. Подсветку строки он сохраняет, поэтому наведение и `selected` под колонкой
+ * не пропадают.
+ *
+ * **Чего нет.** Перетаскивания с клавиатуры: правильный клавиатурный аналог — пункты меню
+ * «сдвинуть влево / вправо», а не имитация драга. Автопрокрутки контейнера у края тоже нет —
+ * при перетаскивании за пределы видимой области колонка просто упрётся в край.
+ *
+ * **Как подключается.** `getGripProps` — на ручку, `getColumnProps` — на `TableHead`
+ * и на каждую `TableCell` этой колонки. Драг начинается только с ручки: `pointerdown`
+ * по всей ячейке конфликтовал бы с ресайзером, который начинается так же.
+ *
+ * @example
+ * const [order, setOrder] = useState(["tree", "client", "sum"]);
+ *
+ * const { getGripProps, getColumnProps } = useColumnReorder({
+ *   columns: order,
+ *   widths, // из useColumnResize
+ *   onReorder: setOrder,
+ *   locked: ["tree"]
+ * });
+ *
+ * <TableHead {...getColumnProps(key)}>
+ *   <span {...getGripProps(key)}>⠿</span>
+ * </TableHead>
+ * <TableCell {...getColumnProps(key)}>…</TableCell>
+ */
+export declare function useColumnReorder<K extends string>({ columns, widths, onReorder, locked }: UseColumnReorderOptions<K>): UseColumnReorderResult<K>;

package/dist/components/table/column-reorder.d.ts

@@ -0,0 +1,2 @@
+export * from './column-reorder/index'
+export {}

package/dist/components/table/column-reorder.js

@@ -0,0 +1,6 @@
+import { C as r, u as s } from "../../useColumnReorder-BxVZQ_Y5.js";
+export {
+  r as COLUMN_KEY_ATTRIBUTE,
+  s as useColumnReorder
+};
+//# sourceMappingURL=column-reorder.js.map

package/dist/components/table/column-reorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-reorder.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/table/column-resize/columnAutoFit.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Автофит колонки по содержимому (двойной клик по ручке ресайза).
+ *
+ * Меряет «естественную» ширину контента колонки: клонирует заголовок и видимые ячейки
+ * тела в скрытую sandbox-таблицу с `table-layout: auto` / `width: max-content` и берёт
+ * итоговую ширину. `cloneCell` переносит на клон вычисленные шрифтовые стили, иначе
+ * замер вне исходного каскада получился бы неверным.
+ */
+export interface ColumnAutoFitOptions {
+    minWidth: number;
+    maxWidth: number;
+}
+/**
+ * Ширина колонки по её содержимому, в пикселях. `undefined` — если замерить не удалось
+ * (заголовок вне таблицы). Результат зажат между `minWidth` и `maxWidth`.
+ *
+ * @example
+ * const width = getColumnAutoFitWidth(headerElement, { minWidth: 60, maxWidth: 500 });
+ * if (width) setWidths((current) => ({ ...current, name: width }));
+ */
+export declare function getColumnAutoFitWidth(header: HTMLTableCellElement, options: ColumnAutoFitOptions): number | undefined;

package/dist/components/table/column-resize/columnResizeSession.d.ts

@@ -0,0 +1,9 @@
+export declare class ColumnResizeSession {
+    private minWidth;
+    private state?;
+    constructor(minWidth: number);
+    start(columnKey: string, startWidth: number, startX: number): void;
+    getWidth(currentX: number): number | undefined;
+    getColumnKey(): string | undefined;
+    end(): void;
+}

package/dist/components/table/column-resize/index.d.ts

@@ -0,0 +1,3 @@
+export { ColumnResizeSession } from './columnResizeSession';
+export { getColumnAutoFitWidth, type ColumnAutoFitOptions } from './columnAutoFit';
+export { useColumnResize, type ResizableColumn, type UseColumnResizeOptions, type UseColumnResizeResult } from './useColumnResize';

package/dist/components/table/column-resize/useColumnResize.d.ts

@@ -0,0 +1,52 @@
+import { MouseEvent as ReactMouseEvent, RefObject } from 'react';
+export interface ResizableColumn<K extends string = string> {
+    key: K;
+    defaultWidth: number;
+    minWidth: number;
+    maxWidth?: number;
+}
+export interface UseColumnResizeOptions {
+    /** Глобальный минимум-подстраховка для драга. */
+    minWidth?: number;
+    /** Дефолтный максимум для колонок без своего `maxWidth` (используется в драге и автофите). */
+    maxWidth?: number;
+}
+export interface UseColumnResizeResult<K extends string> {
+    /**
+     * Ref на саму таблицу — вешается на `<Table ref>`.
+     *
+     * Именно `RefObject<HTMLTableElement>`, а не `RefObject<HTMLTableElement | null>`: это то,
+     * что возвращает `useRef` в типах React 18, и то, что принимает проп `ref` у `forwardRef`.
+     * Аннотация с `| null` пришла из React 19 и делала результат хука непередаваемым в `ref`.
+     */
+    tableRef: RefObject<HTMLTableElement>;
+    widths: Record<K, number>;
+    totalWidth: number;
+    getHeaderRef: (key: K) => (el: HTMLTableCellElement | null) => void;
+    getResizeHandleProps: (key: K) => {
+        onMouseDown: (event: ReactMouseEvent) => void;
+        onDoubleClick: (event: ReactMouseEvent) => void;
+    };
+    reset: () => void;
+}
+/**
+ * Ресайз и автофит колонок обычной HTML-таблицы, без table-библиотек.
+ *
+ * Во время `mousemove` ширина мутируется напрямую в DOM (`th.style.width`, `table.style.width`)
+ * через рефы — без React state на каждый пиксель. На `mouseup` — один коммит в state.
+ *
+ * `columns` должен быть стабильной ссылкой (модульная константа или `useMemo` вызывающей
+ * стороны) — из неё один раз считаются дефолтные ширины.
+ *
+ * @example
+ * const COLUMNS = [{ key: "name", defaultWidth: 240, minWidth: 120 }];
+ *
+ * const { tableRef, widths, totalWidth, getHeaderRef, getResizeHandleProps } = useColumnResize(COLUMNS);
+ *
+ * <Table ref={tableRef} style={{ width: totalWidth, tableLayout: "fixed" }}>
+ *   <TableHead ref={getHeaderRef("name")} className="relative" style={{ width: widths.name }}>
+ *     Контрагент
+ *     <TableResizeHandle {...getResizeHandleProps("name")} />
+ *   </TableHead>
+ */
+export declare function useColumnResize<K extends string>(columns: ResizableColumn<K>[], options?: UseColumnResizeOptions): UseColumnResizeResult<K>;

package/dist/components/table/column-resize.d.ts

@@ -0,0 +1,2 @@
+export * from './column-resize/index'
+export {}

package/dist/components/table/column-resize.js

@@ -0,0 +1,7 @@
+import { C as o, g as u, u as i } from "../../useColumnResize-wjfEyBBg.js";
+export {
+  o as ColumnResizeSession,
+  u as getColumnAutoFitWidth,
+  i as useColumnResize
+};
+//# sourceMappingURL=column-resize.js.map

package/dist/components/table/column-resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-resize.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/table/editable/TableFillHandle.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export type TableFillHandleProps = React.HTMLAttributes<HTMLSpanElement>;
+/**
+ * Ручка автозаполнения — точка на нижнем правом углу выделения, за которую тянут значения.
+ *
+ * Рисуется внутри угловой ячейки диапазона и позиционируется от неё, поэтому ячейке нужен
+ * `position: relative` — он уже есть в `cellStateStyles`.
+ *
+ * По макету ручка круглая (`border radius/full`, 10px), хотя в Excel это квадрат — оставлено
+ * как в макете.
+ *
+ * Кит даёт только вид и попадание курсором: что протянется, куда и как далеко — решает
+ * прикладной код по `onMouseDown` и движению мыши.
+ *
+ * **Почему `span`, а не `button`.** Ручка работает только протягиванием мыши, клавиатурного
+ * аналога у неё нет. Настоящая кнопка встала бы в порядок обхода табом и по Enter не делала
+ * бы ничего — остановка фокуса, которая ничем не отвечает, хуже её отсутствия. Роль и подпись
+ * при этом остаются: скринридер ручку видит и называет.
+ *
+ * @example
+ * {isCorner && <TableFillHandle onMouseDown={() => setFillFrom(rowIndex)} />}
+ */
+export declare const TableFillHandle: React.ForwardRefExoticComponent<TableFillHandleProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/table/editable/cellRange.d.ts

@@ -0,0 +1,83 @@
+import { CSSProperties } from 'react';
+/** Адрес ячейки в сетке: индекс видимой строки и индекс видимой колонки. */
+export type CellRef = {
+    row: number;
+    col: number;
+};
+/** Прямоугольный диапазон ячеек. Границы включительно, поэтому одна ячейка — тоже диапазон. */
+export type CellRange = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+/**
+ * Диапазон по двум углам — якорю выделения и текущей ячейке.
+ *
+ * Порядок углов не важен: тянут выделение в любую сторону, поэтому границы нормализуются.
+ * Это геометрия, а не поведение: где стоит якорь, когда он переставляется и что вообще
+ * считается выделением — знание прикладного кода.
+ *
+ * @example
+ * cellRange({ row: 4, col: 1 }, { row: 2, col: 3 }); // { top: 2, bottom: 4, left: 1, right: 3 }
+ */
+export declare const cellRange: (anchor: CellRef, focus: CellRef) => CellRange;
+/** Попадает ли ячейка в диапазон. Отсутствие диапазона — не попадает, проверять отдельно не нужно. */
+export declare const inCellRange: (range: CellRange | null | undefined, cell: CellRef) => boolean;
+/** Как выглядит грань диапазона: цвет и толщина линии. */
+export type CellRangeEdge = {
+    color: string;
+    width: number;
+};
+/**
+ * Готовые рамки диапазонов: `selection` — то, что выделено, `preview` — то, что получится,
+ * если отпустить сейчас (протягивание значений, перенос).
+ *
+ * Предпросмотр намеренно тоньше и бледнее выделения: две одинаковые рамки на экране
+ * невозможно различить, а они означают разное — состоявшееся и предполагаемое.
+ *
+ * Список открытый: своя рамка — это `{ color, width }` с любым CSS-цветом.
+ */
+export declare const CELL_RANGE_EDGE: {
+    readonly selection: {
+        readonly color: "hsl(var(--primary-accent))";
+        readonly width: 2;
+    };
+    readonly preview: {
+        readonly color: "hsl(var(--primary-border) / 0.75)";
+        readonly width: 1;
+    };
+};
+/**
+ * Грани диапазона, проходящие через эту ячейку, — готовая строка для `box-shadow`.
+ *
+ * Рамка обводит диапазон целиком, а не каждую его ячейку: грань достаётся только тем ячейкам,
+ * что стоят по краю, поэтому внутри диапазона линий нет. Ячейка вне диапазона (и отсутствие
+ * диапазона) даёт пустую строку — проверять попадание перед вызовом не нужно.
+ *
+ * **Почему тень, а не рамка.** `border` входит в бокс ячейки и раздвинул бы колонки на
+ * ширину линии, `outline` обвёл бы каждую ячейку целиком. `inset`-тень рисуется внутри
+ * ячейки и ничего не двигает.
+ *
+ * Значения считаются на ходу и потому уезжают в инлайновый стиль, но цвет всё равно берётся
+ * из токена, а не хардкодом.
+ *
+ * @example
+ * cellRangeEdges(selection, { row: 2, col: 0 }); // "inset 0 2px 0 0 …, inset 2px 0 0 0 …"
+ */
+export declare const cellRangeEdges: (range: CellRange | null | undefined, cell: CellRef, edge?: CellRangeEdge) => string;
+/**
+ * Рамки нескольких диапазонов в одном `style` ячейки. Первый аргумент — верхняя тень.
+ *
+ * Ложные и пустые значения отбрасываются, поэтому условия пишутся прямо в аргументах,
+ * а ячейка без единой грани не получает инлайнового стиля вовсе.
+ *
+ * @example
+ * <TableCell
+ *   style={cellRangeStyle(
+ *     cellRangeEdges(selection, cell),
+ *     cellRangeEdges(fillPreview, cell, CELL_RANGE_EDGE.preview)
+ *   )}
+ * >
+ */
+export declare const cellRangeStyle: (...shadows: (string | false | null | undefined)[]) => CSSProperties;