wenay-react2 1.0.42 → 1.0.44

package/doc/changes/v1.0.43.md

@@ -0,0 +1,10 @@
+# v1.0.43
+
+Date: 2026-07-10
+
+Status: released.
+
+- Changed: `ColumnDots` drag is LIVE (user request from the stand, card 32: "отображать и выключать надо по мере движения — я так буду искать нужный мне столбик"): every EMPTY mark the dot crosses swaps the shown column immediately - the grid/cards follow the finger during the drag; the drop no longer commits a swap (it only settles selection and the tear-off). Occupied marks are passed over; a fixed dot still never swaps; the vertical tear-off flick hides the CURRENTLY shown column of the gesture.
+- Added: a small label above the dragged dot (`.wenayColDotsDragLabel`, tokens `--cols-dots-drag-label-bg/color/font-size` + TS mirror) naming the currently shown column - sized for a finger on a phone.
+- Changed: QA cards 29 and 32 do/expect texts updated to the live semantics.
+- Verification: `npx tsc -p tsconfig.qa-check.json --noEmit`; `npm run testjest -- --runInBand` (62/62, incl. the two-way tokens sync test); stand 3010 card 32 - dragging the NOTE dot left across QTY to PRICE leaves the table showing NAME+PRICE with the dot settled on the PRICE mark (the drop path commits nothing, so the end state proves the live path), zero console errors.

package/doc/changes/v1.0.44.md

@@ -0,0 +1,14 @@
+# v1.0.44
+
+Date: 2026-07-10
+
+Status: ready for publish.
+
+- Fixed: `createColumnState` no longer persists `visible=false` for a column
+  hidden solely by runtime `presentGate` when another grid interaction is read
+  back. Opening the gate restores the user's saved visibility as intended.
+- Added: regression coverage for gated-column readback and normal user
+  visibility changes while the gate is open.
+- Verification: repro first failed on v1.0.43 (`visible.b` became `false` after
+  an unrelated resize); targeted Jest 3/3; full Jest 64/64; `tsc -p
+  tsconfig.qa-check.json --noEmit`; `pnpm run build`.

package/doc/progress/column-state-present-gate.md

@@ -0,0 +1,28 @@
+# ColumnState present-gate — progress
+
+## Scope
+
+Fix the v1.0.43 regression reported by a consumer: a grid event must not persist
+`visible=false` for a column that is hidden only by the runtime `presentGate`.
+
+## Contract
+
+`presentGate` is application-owned runtime presence. `visible` is user-owned,
+persisted configuration. A grid readback may update visibility only when the
+column passes the gate; order, width, sort and filter continue to read back for
+all known columns.
+
+## Plan
+
+1. Reproduce against current source with a fake grid. **Confirmed:** an unrelated
+   resize changed gated `b` from persisted `visible=true` to `false`.
+2. Guard the visibility fold in `readFromGrid` with `passesPresentGate`. **Done.**
+3. Add regression coverage for closed and open gates. **Done:** fake GridApi
+   covers both the protected gated column and a normal open-gate visibility edit.
+4. Run TypeScript, Jest and package build; record release notes. **Done:**
+   targeted Jest 3/3, full Jest 64/64, qa-check TypeScript and build passed.
+
+## Result
+
+Version v1.0.44 is prepared for publication; durable details are in
+`doc/changes/v1.0.44.md`.

package/doc/target/my.md

@@ -4,7 +4,9 @@
 
 ## In Progress
 
-_Пусто._ «Hook extraction — do-now кандидаты (3)» выполнен 2026-07-09: `useCacheMapPersistence` (cache.ts), `useResizeObserver`/`useElementSize` (MyResizeObserver.tsx), `useLogsPageTable` (logs.tsx); старые имена — compatibility wrappers, card 25 не тронута. Проверено: tsc qa-check, jest 45/45, build, стенд 3010 (карточки 21 F5-persistence / 19 resize / 9 logs). Durable-запись: `doc/changes/v1.0.41.md`; parked/отклонённые кандидаты остаются в `doc/progress/hook-extraction-audit.md`.
+_Пусто._
+
+«Hook extraction — do-now кандидаты (3)» выполнен 2026-07-09: `useCacheMapPersistence` (cache.ts), `useResizeObserver`/`useElementSize` (MyResizeObserver.tsx), `useLogsPageTable` (logs.tsx); старые имена — compatibility wrappers, card 25 не тронута. Проверено: tsc qa-check, jest 45/45, build, стенд 3010 (карточки 21 F5-persistence / 19 resize / 9 logs). Durable-запись: `doc/changes/v1.0.41.md`; parked/отклонённые кандидаты остаются в `doc/progress/hook-extraction-audit.md`.
 
 (Предыдущий проход «Нормализация внутренних слоёв библиотеки» проверен multi-agent-верификацией и отгружен в v1.0.40/v1.0.41; durable-запись: `doc/progress/public-surface-normalization.md`, `doc/progress/hook-controller-opportunities.md`, `doc/changes/v1.0.38–v1.0.41.md`.)
 
@@ -42,10 +44,36 @@ _Пусто._ «Hook extraction — do-now кандидаты (3)» выполн
   - **A10 remaining (breaking only)**: raw `ListenApi` (emit/close) exposed from columnState/Toolbar onChange (narrowing is breaking); removal of deprecated `onCLickClose`/`keySave` — breaking pass only.
   - Rule: each fix is its own focused pass with verify (tsc+jest+build+stand); breaking removals only in a deliberate breaking version.
 
+- **Architecture follow-up: ownership and lifecycle boundaries (overlay / grid / columnState)** (code review 2026-07-10).
+  - **Overlay stack (high)**: `Overlay` instances independently subscribe to `document`. A `SettingsDialog` above a `ModalProvider` lets the lower modal handle the same Escape/outside interaction; this breaks SettingsDialog's two-stage Escape contract. Introduce an internal stack/arbiter so only the topmost dismissible layer receives Escape and outside-click; verify nested ModalProvider + SettingsDialog (search clear on first Escape, dialog close on second, parent remains open).
+  - **ag-grid row identity (high)**: `AgGridTable` currently lets a caller supply `getRowId` alongside `controller`, while the controller buffer owns another `getId`. Make the ownership unambiguous (reject/ignore override or explicitly derive the core identity); verify update/remove/reconnect with a controller and a conflicting callback.
+  - **ColumnGrid attachment ownership (high)**: one controller keeps one mutable `gridApi`, but its `Table` surface permits multiple mounts; an old table's destroy can detach the newer one. Either enforce one table per controller with a clear error or scope attachment state to a Table instance; verify two mounts plus either unmount order.
+  - **ColumnState contract consistency (medium)**: `groups` affects `visibleKeys()`/cards but is ignored when applying state to desktop ag-grid; `ColumnGrid.View` also forwards index `0` to a supplied `getId`. Align the shared config on both views and pass the actual row index. Add integration coverage.
+  - **Dispose lifecycle (medium)**: `createColumnGrid.dispose()` releases local listeners but not its attached grid listeners. Define dispose as a full release and make it detach the active grid; verify no grid events mutate state after dispose.
+  - Приоритет: отдельные focused passes; не смешивать с feature-задачами ColumnDots. Проверка каждого: tsc qa-check, jest, build и соответствующий lifecycle/integration test.
+
+- **QA-стенд: расширить интеграционное покрытие и сделать его картой публичных примитивов**.
+  - Проблема: стенд уже содержит полезные локальные карточки (modal 13, Settings 20, columnState 28–32, replay 23–26), но не покрывает опасные межслойные сценарии: вложенные overlay, ownership `GridApi`, `dispose`, повторный mount и смену entrypoint/платформенного слоя. Зелёный Jest не заменяет эти проверки.
+  - Задача: 1) составить компактную матрицу «публичный primitive → unit → QA card → ручной сценарий» и пометить пробелы; 2) добавить active QA-карточки только для interaction/lifecycle сценариев, которые нельзя надёжно доказать unit-тестом: overlay stack (Modal + Settings), ColumnGrid mount/unmount/ownership, persistence reload/reset, replay reconnect/route switch; 3) дать каждой карточке действия, ожидаемый результат, reset/изоляцию ключей и номер без дублей; 4) завести правило: новая визуальная либо lifecycle-поверхность не считается готовой без unit/integration проверки и обновлённой или намеренно неприменимой QA-карточки.
+  - Не превращать стенд в копию всех компонентов: чистые функции и детерминированные controller-ветки остаются в Jest; стенд — для пользовательского взаимодействия, DOM, аг-grid, browser lifecycle и визуальной приёмки.
+  - Acceptance: карточки запускаются на чистой странице без console errors; ключевые сценарии воспроизводимы вручную; карта покрытия хранится в `doc/`; команды tsc qa-check, jest и build проходят.
+  - Приоритет: после исправления overlay/grid ownership — новые карточки должны проверять именно исправленные контракты.
+
 - **Hook extraction — parked кандидаты** (do-now 1-3 выполнены и отгружены, см. In Progress выше / `doc/changes/v1.0.41.md`). Остались условные: `useChartCanvas` (ждёт ChartDemo в карточке/тесте), `useContextMenuGesture` (ждёт оживления menuR или live touch-consumer), `columnState.api.reorderPreview` (ждёт общего reorder-контракта), `useResizeableFit` (маленький shared bind callback-ref, отдельный микро-pass). Полные причины/условия возврата: [../progress/hook-extraction-audit.md](../progress/hook-extraction-audit.md).
 
 ## Inbox
 
+- **ColumnDots: фильтр-ползунок по значениям + мультисорт-опция + именованные пресеты** (надиктовка 2026-07-10, дословно в конце файла; контекст — мобильный ползунок таблицы, карточки 29/32).
+  - **1. Сорт-кнопка**: сейчас одна (asc→desc→off) — оставить одиночной по умолчанию, но добавить ОПЦИЮ множественной сортировки (multi-sort) настройкой.
+  - **2. Второй ползунок — фильтр по значениям** (открывается по кнопке при необходимости, кнопок вызова две — уточнить у пользователя что вторая): такой же трек с ячейками/метками, на котором пользователь СТАВИТ ТОЧКИ:
+    - числовые значения: значения раскладываются по треку; две точки = диапазон (считаем всегда по КРАЙНИМ точкам — лишние точки внутри не меняют диапазон); крайняя правая + середина = правый диапазон;
+    - категориальные значения (например, 9 типов): те же точки по меткам типов; выбор = диапазон ЛИБО конкретные точки;
+    - **режим фильтра** переключается кнопкой (как сорт-кнопка): «левее точек / между точками / только по точкам / …» — т.е. lt/range/in-set и т.п.;
+    - главный сценарий — мобила, всё пальцем (продолжение live-драга точек из v1.0.43).
+  - **3. Именованные пресеты**: кнопки «Сохранить» (с именем) и «Сбросить»; загрузка = выбор из сохранённых по имени. ОТКРЫТЫЙ ВОПРОС (пользователь сам не решил): куда поместить кнопки на телефоне — места на треке не хватает; кандидаты — в шапку дотс-панели / в меню по long-press / отдельная строка-«шторка». Персист — обычный путь memoryGetOrCreate→memoryCache (пресеты = отдельный ключ со словарём имя→конфиг фильтра+сорта).
+  - Смежное: фильтр должен лечь в columnState-конфиг (`filter` там уже есть — формат согласовать с ag-grid setFilterModel), чтобы desktop-грид получал тот же фильтр через grid.attach.
+  - Статус: надиктовка записана, скоупинг и уточнения (вторая кнопка вызова; полный список режимов) — перед взятием в работу.
+
 - **React Native / мобильная версия функционала** (надиктовка 2026-07-10, дословно в конце файла).
   - Суть: библиотеку планируют использовать и в мобильном (React Native), где DOM недоступен (нет `document`/`window`/`createPortal`/CSS-классов).
   - Первичная оценка: слоистость уже движется в нужную сторону — headless/controller-слой (updateBy/renderBy, columnState config, createToolbar config+Settings-модель, callbackHub, observableMap/memoryCache, replay-хуки) в основном DOM-free и потенциально переносим; DOM живёт во view-слое (FloatingWindow/Rnd, порталы/скримы, CSS-токены, ag-grid). Направление: (1) аудит `document`/`window`/`createPortal`/CSS-зависимостей по модулям; (2) выделить/закрепить platform-neutral core (возможно отдельный entrypoint без DOM-импортов); (3) RN-view-адаптеры — отдельный пакет/подпапка, не в этом проходе. ag-grid в RN не живёт — мобильные представления уже есть (ColumnDots/CardList) как модель. Персист: storage-слой абстрагировать (localStorage → AsyncStorage).
@@ -53,7 +81,9 @@ _Пусто._ «Hook extraction — do-now кандидаты (3)» выполн
 
 ## Verify
 
-_Пусто._ «Система стилей и CSS variables» проверена: `doneInCode=fully`, `.wenayColsMenu*`/`--cols-menu-*` и `--cols-dots-*`/`--cols-card-*` в коде, changelog v1.0.38/v1.0.39/v1.0.41, отгружено в релизах. Удалено; durable-запись — `doc/progress/style-system-normalization.md`.
+- **ColumnState present-gate не должен перезаписывать пользовательскую visibility** — реализация и release v1.0.44 готовы; [progress](../progress/column-state-present-gate.md), [changelog](../changes/v1.0.44.md). Проверить публикацию пакета и потребительский repro: gated `b` остаётся `visible:true` после resize другой колонки и становится видимой при открытии gate.
+
+«Система стилей и CSS variables» проверена: `doneInCode=fully`, `.wenayColsMenu*`/`--cols-menu-*` и `--cols-dots-*`/`--cols-card-*` в коде, changelog v1.0.38/v1.0.39/v1.0.41, отгружено в релизах. Удалено; durable-запись — `doc/progress/style-system-normalization.md`.
 
 ## Blocked — уровень приложения (не эта React-библиотека)
 
@@ -79,3 +109,5 @@ _Пусто._ «Система стилей и CSS variables» проверен
 > да мы еще планиурем использовать библиотеку и для мобильного использования , а там дум обьекты вроде не потдерживаются.... ну ты сам знаешь что надо для реакт нативу - может сделать мобильную версию этого функционала
 
 > вопрос насоклько этот код вобще лакнчиный и юзабельный?ты бы сам ег остал использовать [оценка 2026-07-10: вызовы лаконичны, изучение — нет; задача «API-витрина» в Ready] да оформи задачу в my.md но текущий релиз запуш
+
+> Запиши такую задачу. Значит, надо М-м-м, где менюшка? Ст-- для таблицы есть, особенно вот этот ползунок. Надо его улучшить. А именно: там вот есть фильтр по возрастанию, по убыванию, кнопочка одна. Во-первых, он должен быть множественный. Либо не множественный. Пока что пусть он будет нормальный. С-- но опционально такая настройка должна быть. А-а-а, второй момент важен. Есть ли помимооо фильтра у нас открывается второй ползунок? Если нужно. Там получается две кнопки вызвать ползунок второй. Второй ползунок, оннн так же, как и первый, состоит из каких-то ячеек иии ползунков . Ну, вот этих вот. То есть, допустим, мы там можем задать Кремль, край? Естественно, если мы выбрали «Больше» и выбираем тут-- там на ползунке есть эти цифры, то они, цифры, расположены, ну, вся эта куча, чтобы человек мог выбрать Там в левую часть либо в правую часть. То есть технический человек ставит сразу две точки? А-а-а, ты поставил крайние, я посередине. Это означает, что, ну, был этот диапазон. Крайний правый посередине означает, что был правый диапазон. Если он добавляет еще точки, мы их всё равно считаем по крайним точкам. Нам неважно, если этооо Если этооо, к-к-какой-нибудь, например, тверд-- ну, либо какой-нибудь другой вариант еще рассматриваем. Вот. А если этооо, к примеру Там название чего-то, и этих названий определенное количество. Допустим Девять типов чего-то. То мыыы-- э-э-э, вот у нас есть девять типов. Мы точно так же точки расставляем. Человек может выбрать несколько точек: либо диапазон, автооо, типа, либо конкретно. И режим выбирается, к примеру, вот этой кнопкой: фильтровать вверх, вниз. То есть мы выбираем левее, точки, между точками, только по точкам, там меньше точек. Ну, чё-то типа такого. Вот, я думаю, это будет очень удобно. Особенно на мобиле. Иии нужна настройка ещёёё Сохранить этот настрой. Ну, типа, вот, н-- допустим, так сделали . Понятно, кнопка «Сбросить» их вот, и кнопка «Сохранить». Только пока не очень понимаю, куда это поставить. Особенно на мобиле, на телефоне там места не хватает, ну, точнее, не хватает. Типа ты, допустим, настроил настройку . Кнопку нажал, их там запримел. Иии, соответственно, точно так же, еслиии тыыы Как загружать правильно? Загружать на опять же, смотреть, чё ты сохраняешься. Сохраняешься с именем?

package/doc/wenay-react2.md

@@ -341,7 +341,9 @@ keep `ColumnsMenu` for compact button strips or custom presentation-only menus.
 Mobile (no ag-grid): dots selector + card rows over the same config:
 ```
 <ColumnDots state={cs} max?=8 />                 // track of marks; dots = shown columns; tap empty=add,
-                                                 //   drag=replace, swipe up=remove, tap dot=select, sort button cycles
+                                                 //   drag=LIVE replace (every empty mark crossed swaps the shown
+                                                 //   column immediately + small label names it - column search
+                                                 //   by finger), swipe up=remove, tap dot=select, sort cycles
 <CardList<Row> state={cs} data={rows} getId? renderValue? />   // visible cols -> card fields; cardRole:'title'/'accent'
 ```
 

package/lib/common/src/grid/columnState/ColumnDots.js

@@ -3,8 +3,11 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // with dots on the columns that are currently shown. Placing a dot IS showing
 // the column; the card view (CardList) rebuilds from the same config live.
 // Gestures (pointer events, mouse + touch):
-//   drag a dot along the track  -> the dot slides to another (empty) mark: that
-//                                  column replaces the old one
+//   drag a dot along the track  -> LIVE: every empty mark the dot crosses swaps
+//                                  the shown column immediately (the grid/cards
+//                                  follow the finger - that is how you SEARCH for
+//                                  a column on a phone); a small label above the
+//                                  finger names the currently shown column
 //   swipe a dot UP (flick off)  -> the dot tears off the track: column hidden
 //   tap an empty mark           -> a dot appears there: column shown
 //   tap a dot (no move)         -> select the field (highlight); the sort
@@ -38,7 +41,7 @@ export function ColumnDots(p) {
     function downDot(key, e) {
         e.preventDefault();
         e.currentTarget.setPointerCapture(e.pointerId);
-        gestureRef.current = { key, startX: e.clientX, startY: e.clientY, moved: false };
+        gestureRef.current = { key, startX: e.clientX, startY: e.clientY, moved: false, shown: key, fixed: !!byKey.get(key)?.fixed };
     }
     function moveDot(e) {
         const g = gestureRef.current;
@@ -56,7 +59,17 @@ export function ColumnDots(p) {
         const from = order.indexOf(g.key);
         const off = -dy > REMOVE_DY && -dy > Math.abs(dx);
         const to = Math.max(0, Math.min(n - 1, Math.round(from + dx / step)));
-        setDrag({ key: g.key, dx, dy, to, off });
+        // LIVE swap: crossing an EMPTY mark shows that column immediately (the grid
+        // follows the finger - column search by dragging). Occupied marks are passed
+        // over; a fixed dot never swaps (same rule the old on-drop commit had).
+        if (!off && !g.fixed) {
+            const target = order[to];
+            if (target && target != g.shown && cfg.visible[target] == false) {
+                p.state.api.setConfig({ ...cfg, visible: { ...cfg.visible, [g.shown]: false, [target]: true } });
+                g.shown = target;
+            }
+        }
+        setDrag({ key: g.key, dx, dy, to, off, shown: g.shown });
     }
     function upDot() {
         const g = gestureRef.current;
@@ -71,21 +84,19 @@ export function ColumnDots(p) {
         }
         if (!st)
             return;
-        const meta = byKey.get(g.key);
+        // swaps already happened live during the move; the drop only settles
+        // selection and handles the tear-off of the CURRENTLY shown column
         if (st.off) {
+            const meta = byKey.get(g.shown);
             if (!meta?.fixed && visibleKeys.length > 1) {
-                p.state.api.show(g.key, false);
-                if (selected == g.key)
+                p.state.api.show(g.shown, false);
+                if (selected == g.key || selected == g.shown)
                     setSelected(null);
             }
             return;
         }
-        const target = order[st.to];
-        if (target && target != g.key && cfg.visible[target] == false && !meta?.fixed) {
-            p.state.api.setConfig({ ...cfg, visible: { ...cfg.visible, [g.key]: false, [target]: true } });
-            if (selected == g.key)
-                setSelected(target);
-        }
+        if (g.shown != g.key && selected == g.key)
+            setSelected(g.shown);
     }
     function tapMark(key) {
         if (cfg.visible[key] != false)
@@ -101,11 +112,17 @@ export function ColumnDots(p) {
                         const isSorted = cfg.sort?.key == k;
                         return _jsxs("div", { onPointerUp: () => tapMark(k), className: cx(['wenayColDotsMark', vis ? 'wenayColDotsMark_on' : 'wenayColDotsMark_off']), style: { left: `${pct(i)}%`, cursor: !vis && visibleKeys.length < max ? 'pointer' : 'default' }, children: [isSorted && _jsx("div", { className: 'wenayColDotsSortMark', children: cfg.sort.dir == 'asc' ? '↑' : '↓' }), _jsx("div", { className: 'wenayColDotsMarkPin' }), _jsx("div", { className: 'wenayColDotsMarkLabel', children: short(k) })] }, 'm' + k);
                     }), order.map((k, i) => {
-                        if (cfg.visible[k] == false)
+                        const d = drag?.key == k ? drag : null;
+                        // the dragged dot stays mounted through live swaps (its column may be
+                        // hidden mid-gesture; unmounting would kill the pointer capture)...
+                        if (cfg.visible[k] == false && !d)
+                            return null;
+                        // ...and the live-shown column's resting dot is suppressed: its
+                        // representation IS the dot under the finger
+                        if (drag && !d && k == drag.shown && drag.shown != drag.key)
                             return null;
                         const meta = byKey.get(k);
-                        const d = drag?.key == k ? drag : null;
-                        const removing = !!d?.off && !meta?.fixed && visibleKeys.length > 1;
-                        return _jsx("div", { onPointerDown: e => downDot(k, e), onPointerMove: moveDot, onPointerUp: upDot, onPointerCancel: upDot, className: cx(['wenayColDotsDotWrap', d && 'wenayColDotsDotWrap_dragging', removing && 'wenayColDotsDotWrap_removing']), style: { left: `${pct(i)}%`, transform: d ? `translate(${d.dx}px, ${removing ? d.dy : 0}px)` : undefined }, children: _jsx("div", { className: cx(['wenayColDotsDot', selected == k && 'wenayColDotsDot_selected', meta?.fixed && 'wenayColDotsDot_fixed']) }) }, 'd' + k);
+                        const removing = !!d?.off && !byKey.get(d.shown)?.fixed && visibleKeys.length > 1;
+                        return _jsxs("div", { onPointerDown: e => downDot(k, e), onPointerMove: moveDot, onPointerUp: upDot, onPointerCancel: upDot, className: cx(['wenayColDotsDotWrap', d && 'wenayColDotsDotWrap_dragging', removing && 'wenayColDotsDotWrap_removing']), style: { left: `${pct(i)}%`, transform: d ? `translate(${d.dx}px, ${removing ? d.dy : 0}px)` : undefined }, children: [d && !d.off && _jsx("div", { className: 'wenayColDotsDragLabel', children: short(d.shown) }), _jsx("div", { className: cx(['wenayColDotsDot', selected == k && 'wenayColDotsDot_selected', meta?.fixed && 'wenayColDotsDot_fixed']) })] }, 'd' + k);
                     })] })] });
 }

package/lib/common/src/grid/columnState/columnState.js

@@ -229,7 +229,11 @@ export function createColumnState(opts) {
             if (!known.has(s.colId))
                 continue;
             order.push(s.colId);
-            visible[s.colId] = !s.hide;
+            // `hide` for a gated-out column was written by applyToGrid(), not by
+            // the user. Folding it back would turn runtime presence into persisted
+            // visibility and keep the column hidden when the gate opens again.
+            if (passesPresentGate(s.colId))
+                visible[s.colId] = !s.hide;
             if (typeof s.width == 'number' && s.width > 0)
                 width[s.colId] = s.width;
             if (s.sort == 'asc' || s.sort == 'desc')

package/lib/common/src/styles/tokens.d.ts

@@ -133,6 +133,9 @@ export declare const tokens: {
         readonly selectedBg: "#0969da";
         readonly selectedBorder: "#b6d4fe";
         readonly fixedBorder: "#afb8c1";
+        readonly dragLabelBg: "#24292f";
+        readonly dragLabelColor: "#fff";
+        readonly dragLabelFontSize: "10px";
     };
     /** CardList chrome (--cols-card-*). Defaults preserve restored card-29 look. */
     readonly colsCard: {

package/lib/common/src/styles/tokens.js

@@ -137,6 +137,9 @@ export const tokens = {
         selectedBg: '#0969da',
         selectedBorder: '#b6d4fe',
         fixedBorder: '#afb8c1',
+        dragLabelBg: '#24292f',
+        dragLabelColor: '#fff',
+        dragLabelFontSize: '10px',
     },
     /** CardList chrome (--cols-card-*). Defaults preserve restored card-29 look. */
     colsCard: {