@columenlabs/lumen-ui 0.1.32 → 0.1.34

package/dist/coverage-cells.d.ts

@@ -1,12 +1,15 @@
 import { type ReactNode } from 'react';
 /** A backfill's state on a block it touches; it wins over coverage while the job runs. */
-export type CoverageJobState = 'queued' | 'running' | 'failed' | 'canceled';
+/** `indexing`: the block's copy is done and a follow-up step (an index, a rollup) is still running on it. */
+export type CoverageJobState = 'queued' | 'running' | 'indexing' | 'failed' | 'canceled';
 /** One cell's state. Done is not its own state: a finished block simply turns `full`. */
 export type CoverageLevel = 'full' | 'high' | 'low' | 'gap' | 'current' | 'none' | CoverageJobState;
+/** `swatch`: the legend's look when it differs from a cell's (a part-filled cell fills to its share). */
 export declare const COVERAGE_LEVELS: {
     level: CoverageLevel;
     label: string;
     className: string;
+    swatch?: string;
 }[];
 export declare const coverageLabel: (l: CoverageLevel) => string;
 export declare const coverageClass: (l: CoverageLevel) => string;
@@ -18,18 +21,22 @@ export declare function coverageLevel(have: number, expected: number, { current,
 /** The job state that shows when a block holds several. */
 export declare const firstJobState: (a: CoverageJobState | null, b: CoverageJobState | undefined) => CoverageJobState | null;
 /** The states on screen, in the legend's order, with a hint at the right. */
-export declare function CoverageLegend({ levels, hint }: {
+export declare function CoverageLegend({ levels, hint, labels, }: {
     levels: Set<CoverageLevel>;
     hint?: ReactNode;
+    /** An app's own words for some states (`running`: `Copying`). */
+    labels?: Partial<Record<CoverageLevel, string>>;
 }): import("react").JSX.Element;
 /**
  * One cell: a plain button. Its tooltip is the map's one shared `CoverageTip` (a Radix tooltip per
  * cell made a 100-row map 13,000 tooltips, seconds per render). `label` is the
  * accessible name and the tooltip's first line; `tip` marks the cell for the shared tooltip.
  */
-export declare const CoverageCell: import("react").MemoExoticComponent<({ level, label, tip, picked, disabled, pickable, onClick, className, }: {
+export declare const CoverageCell: import("react").MemoExoticComponent<({ level, label, tip, picked, disabled, pickable, onClick, className, fill, }: {
     level: CoverageLevel;
     label: string;
+    /** The share in hand (0–1): a part-done block fills to it from the left, whatever its state. */
+    fill?: number;
     /** What `CoverageTip` hands back to its `content` for this cell. */
     tip: string;
     picked?: boolean;

package/dist/coverage-cells.js

@@ -4,10 +4,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useRef, useState } from 'react';
 import { cn } from './lib/utils.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+/** `swatch`: the legend's look when it differs from a cell's (a part-filled cell fills to its share). */
 export const COVERAGE_LEVELS = [
     { level: 'full', label: 'Complete', className: 'bg-cov-full' },
-    { level: 'high', label: '95–99%', className: 'bg-cov-high' },
-    { level: 'low', label: 'Under 95%', className: 'bg-cov-low' },
+    {
+        level: 'high',
+        label: '95–99%',
+        className: 'ring-1 ring-inset ring-cov-full',
+        swatch: 'bg-[linear-gradient(90deg,var(--cov-full)_0_80%,transparent_80%)] ring-1 ring-inset ring-cov-full',
+    },
+    {
+        level: 'low',
+        label: 'Under 95%',
+        className: 'ring-1 ring-inset ring-cov-full',
+        swatch: 'bg-[linear-gradient(90deg,var(--cov-full)_0_40%,transparent_40%)] ring-1 ring-inset ring-cov-full',
+    },
     { level: 'gap', label: 'Missing', className: 'bg-gap-hatch' },
     {
         level: 'current',
@@ -21,13 +32,18 @@ export const COVERAGE_LEVELS = [
         className: 'outline-1 outline-dashed -outline-offset-1 outline-primary',
     },
     { level: 'running', label: 'Running', className: 'bg-cov-running' },
-    { level: 'failed', label: 'Failed', className: 'bg-destructive' },
+    { level: 'indexing', label: 'Indexing', className: 'bg-cov-indexing' },
+    {
+        level: 'failed',
+        label: 'Failed',
+        className: 'bg-destructive/15 outline-2 -outline-offset-2 outline-destructive',
+    },
     { level: 'canceled', label: 'Canceled', className: 'bg-cov-canceled' },
 ];
 const BY_LEVEL = Object.fromEntries(COVERAGE_LEVELS.map((l) => [l.level, l]));
 export const coverageLabel = (l) => BY_LEVEL[l].label;
 export const coverageClass = (l) => BY_LEVEL[l].className;
-const JOB_ORDER = ['running', 'queued', 'failed', 'canceled'];
+const JOB_ORDER = ['running', 'indexing', 'queued', 'failed', 'canceled'];
 /** The state of a block from its sums: a job state first, then coverage. */
 export function coverageLevel(have, expected, { current = false, state } = {}) {
     if (state)
@@ -43,22 +59,22 @@ export function coverageLevel(have, expected, { current = false, state } = {}) {
 /** The job state that shows when a block holds several. */
 export const firstJobState = (a, b) => !b ? a : !a || JOB_ORDER.indexOf(b) < JOB_ORDER.indexOf(a) ? b : a;
 /** The states on screen, in the legend's order, with a hint at the right. */
-export function CoverageLegend({ levels, hint }) {
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-x-5 gap-y-2 text-xs text-muted-foreground", children: [COVERAGE_LEVELS.filter((l) => levels.has(l.level)).map((l) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": true, className: cn('h-3 w-4 rounded-[3px]', l.className) }), l.label] }, l.level))), hint && _jsx("span", { className: "ml-auto hidden md:inline", children: hint })] }));
+export function CoverageLegend({ levels, hint, labels, }) {
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-x-5 gap-y-2 text-xs text-muted-foreground", children: [COVERAGE_LEVELS.filter((l) => levels.has(l.level)).map((l) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": true, className: cn('h-3 w-4 rounded-[3px]', l.swatch ?? l.className) }), labels?.[l.level] ?? l.label] }, l.level))), hint && _jsx("span", { className: "ml-auto hidden md:inline", children: hint })] }));
 }
 /**
  * One cell: a plain button. Its tooltip is the map's one shared `CoverageTip` (a Radix tooltip per
  * cell made a 100-row map 13,000 tooltips, seconds per render). `label` is the
  * accessible name and the tooltip's first line; `tip` marks the cell for the shared tooltip.
  */
-export const CoverageCell = memo(function CoverageCell({ level, label, tip, picked = false, disabled = false, pickable = false, onClick, className, }) {
-    return (_jsx("button", { type: "button", "data-cell": tip, "aria-label": `${label}: ${coverageLabel(level)}`, "aria-pressed": pickable && !disabled ? picked : undefined, disabled: disabled, onClick: onClick, className: cn('min-w-0 rounded-[3px] p-0 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default', coverageClass(level), 
+export const CoverageCell = memo(function CoverageCell({ level, label, tip, picked = false, disabled = false, pickable = false, onClick, className, fill, }) {
+    return (_jsx("button", { type: "button", "data-cell": tip, "aria-label": `${label}: ${coverageLabel(level)}`, "aria-pressed": pickable && !disabled ? picked : undefined, disabled: disabled, onClick: onClick, className: cn('min-w-0 rounded-[3px] p-0 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default', coverageClass(level), 'relative overflow-hidden', 
         // outline-none would also hide the picked outline, so a picked cell must not carry it.
         picked
             ? 'outline-2 outline-offset-1 outline-foreground'
-            : level === 'queued'
+            : level === 'queued' || level === 'failed'
                 ? ''
-                : 'outline-none', pickable && !disabled && 'cursor-pointer', className) }));
+                : 'outline-none', pickable && !disabled && 'cursor-pointer', className), children: fill !== undefined && fill > 0 && fill < 1 && (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-y-0 left-0 bg-cov-full", style: { width: `${Math.round(fill * 100)}%` } })) }));
 });
 /**
  * The one tooltip of a coverage map: it follows the cell under the pointer or keyboard focus inside
@@ -81,5 +97,5 @@ export function CoverageTip({ content, children, className, }) {
             : { tip, x: r.left - o.left, y: r.top - o.top, w: r.width, h: r.height });
     };
     const body = at ? content(at.tip) : null;
-    return (_jsxs("div", { ref: box, className: cn('relative', className), onPointerOver: (e) => e.pointerType !== 'touch' && show(e.target), onPointerLeave: () => setAt(null), onFocus: (e) => show(e.target), onBlur: () => setAt(null), children: [children, at && body && (_jsxs(Tooltip, { open: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute", style: { left: at.x, top: at.y, width: at.w, height: at.h } }) }), _jsxs(TooltipContent, { className: "num max-w-72", children: [_jsx("div", { className: "font-medium", children: body.label }), body.detail] })] }, at.tip))] }));
+    return (_jsxs("div", { ref: box, className: cn('relative', className), onPointerOver: (e) => e.pointerType !== 'touch' && show(e.target), onPointerLeave: () => setAt(null), onFocus: (e) => show(e.target), onBlur: () => setAt(null), children: [children, at && body && (_jsxs(Tooltip, { open: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute", style: { left: at.x, top: at.y, width: at.w, height: at.h } }) }), _jsx(TooltipContent, { className: "num max-w-72", children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("div", { className: "font-medium", children: body.label }), body.detail] }) })] }, at.tip))] }));
 }

package/dist/coverage-map.d.ts

@@ -1,7 +1,7 @@
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { type LucideIcon } from 'lucide-react';
 import { type ReactNode } from 'react';
-import { type CoverageJobState } from './coverage-cells.js';
+import { type CoverageJobState, type CoverageLevel } from './coverage-cells.js';
 /** One count at the finest grain a page has: a day (`2026-10-12`) or a month (`2026-10`). */
 export interface CoverageFact {
     row: string;
@@ -84,6 +84,8 @@ export interface LumenCoverageMapProps<TRaw = unknown, TKey extends QueryKey = Q
     /** Months already queued that a pick can take back out, with the bar's Remove from queue. */
     removable?: (row: string, month: string) => boolean;
     onRemove?: (pick: CoveragePick) => Promise<unknown> | undefined;
+    /** An app's own words for some states, in the tooltip and legend (`{ running: 'Copying' }`). */
+    stateLabels?: Partial<Record<CoverageLevel, string>>;
     /** Picks these months as if clicked (pass a new object each time); nothing is queued until the bar's button. */
     preselect?: CoveragePick;
     /** The drilled block (`2026-09`) and the click that changes it. */
@@ -119,4 +121,4 @@ export interface LumenCoverageMapProps<TRaw = unknown, TKey extends QueryKey = Q
 export declare function blockOf(period: string, block: CoverageBlock): string;
 /** `2026-09` → `Sep 2026`, `2026-Q3` → `2026 Q3`, days stay as they are. */
 export declare function blockName(key: string): string;
-export declare function LumenCoverageMap<TRaw, TKey extends QueryKey>({ source, title, icon, rows: rowSpec, layout, block: initialBlock, zoom, window, unit, summary, select, selectable, onQueue, queueLabel, pickNote, removable, onRemove, preselect, drilled, onDrill, groupBy, hint, pageSize: initialPageSize, pager, tools, filter, filterCount, empty, lazy, }: LumenCoverageMapProps<TRaw, TKey>): import("react").JSX.Element;
+export declare function LumenCoverageMap<TRaw, TKey extends QueryKey>({ source, title, icon, rows: rowSpec, layout, block: initialBlock, zoom, window, unit, summary, select, selectable, onQueue, queueLabel, pickNote, removable, onRemove, preselect, stateLabels, drilled, onDrill, groupBy, hint, pageSize: initialPageSize, pager, tools, filter, filterCount, empty, lazy, }: LumenCoverageMapProps<TRaw, TKey>): import("react").JSX.Element;

package/dist/coverage-map.js

@@ -189,7 +189,7 @@ const MapRow = memo(function MapRow({ r, cols, marks, picks, total, look, }) {
                 const m = marks[i];
                 if (!m)
                     return _jsx("span", {}, k);
-                return (_jsx(CoverageCell, { level: m.level, label: `${text} · ${blockName(k)}`, tip: `${r.row}|${k}`, picked: picks.includes(k) || look.drilled === k, pickable: look.select === 'backfill' || look.select === 'drill', disabled: look.select === 'backfill' ? !m.canPick : look.select !== 'drill', className: "h-[18px]" }, k));
+                return (_jsx(CoverageCell, { level: m.level, fill: m.fill, label: `${text} · ${blockName(k)}`, tip: `${r.row}|${k}`, picked: picks.includes(k) || look.drilled === k, pickable: look.select === 'backfill' || look.select === 'drill', disabled: look.select === 'backfill' ? !m.canPick : look.select !== 'drill', className: "h-[18px]" }, k));
             }), look.sums.map((s) => (_jsx("span", { className: cn('num pl-3 text-right text-xs whitespace-nowrap', s !== 'complete' && 'text-muted-foreground'), children: s === 'complete'
                     ? fmtPct(total.have, total.expected)
                     : s === 'first'
@@ -200,7 +200,7 @@ const MapRow = memo(function MapRow({ r, cols, marks, picks, total, look, }) {
                                 ? fmtCounts(total.have, total.expected)
                                 : fmtInt(total.have) }, s)))] }));
 }, (a, b) => a.sig === b.sig && sameNode(a.r.badge, b.r.badge));
-export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowSpec, layout = 'grid', block: initialBlock = 'month', zoom, window = 'all', unit = 'sessions', summary = ['complete', 'last'], select, selectable = () => true, onQueue, queueLabel = 'Queue backfill', pickNote, removable = () => false, onRemove, preselect, drilled = null, onDrill, groupBy = false, hint, pageSize: initialPageSize, pager, tools, filter, filterCount, empty, lazy = false, }) {
+export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowSpec, layout = 'grid', block: initialBlock = 'month', zoom, window = 'all', unit = 'sessions', summary = ['complete', 'last'], select, selectable = () => true, onQueue, queueLabel = 'Queue backfill', pickNote, removable = () => false, onRemove, preselect, stateLabels, drilled = null, onDrill, groupBy = false, hint, pageSize: initialPageSize, pager, tools, filter, filterCount, empty, lazy = false, }) {
     const { data, load: raw, ref } = useLumenSource(source, { lazy });
     // A coverage map refreshes in place: any refresh, asked for or a poll, only spins its ↻; no bar or dimming over the cells.
     const load = { ...raw, fetching: raw.fetching || raw.background };
@@ -295,7 +295,7 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
         const text = data?.rows.find((r) => r.row === row)?.label ?? row;
         return {
             label: `${text} · ${blockName(k)}`,
-            detail: (_jsxs(_Fragment, { children: [_jsxs("div", { children: [unitLabel(c.have, c.expected), " \u00B7 ", coverageLabel(c.level)] }), c.notes.map((n) => (_jsx("div", { children: n }, n))), layout === 'months' && select === 'drill' && _jsx("div", { children: "Click to see its days" })] })),
+            detail: (_jsxs(_Fragment, { children: [_jsxs("div", { children: [unitLabel(c.have, c.expected), " \u00B7 ", stateLabels?.[c.level] ?? coverageLabel(c.level)] }), c.notes.map((n) => (_jsx("div", { children: n }, n))), layout === 'months' && select === 'drill' && _jsx("div", { children: "Click to see its days" })] })),
         };
     };
     /** A block a pick can take: a month in it can be queued, or taken out of the queue. */
@@ -353,7 +353,7 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                                 levels.add(c.level);
                                 have += c.have;
                                 expected += c.expected;
-                                return (_jsx(CoverageCell, { level: c.level, label: `${row} · ${blockName(key)}`, tip: `${row}|${key}`, picked: picked.has(`${row}|${key}`) || drilled === key, pickable: select === 'backfill' || select === 'drill', disabled: select === 'backfill' ? !canPick(row, key) : select !== 'drill', className: mobile ? 'h-4' : 'h-5' }, key));
+                                return (_jsx(CoverageCell, { level: c.level, fill: c.expected > 0 ? c.have / c.expected : undefined, label: `${row} · ${blockName(key)}`, tip: `${row}|${key}`, picked: picked.has(`${row}|${key}`) || drilled === key, pickable: select === 'backfill' || select === 'drill', disabled: select === 'backfill' ? !canPick(row, key) : select !== 'drill', className: mobile ? 'h-4' : 'h-5' }, key));
                             }),
                             ...sums.map((s) => (_jsx("span", { className: cn('num pl-3 text-right text-xs', s !== 'complete' && 'text-muted-foreground'), children: s === 'complete'
                                     ? fmtPct(have, expected)
@@ -407,7 +407,11 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                             if (!c)
                                 return null;
                             levels.add(c.level);
-                            return { level: c.level, canPick: select === 'backfill' && canPick(r.row, k) };
+                            return {
+                                level: c.level,
+                                canPick: select === 'backfill' && canPick(r.row, k),
+                                fill: c.expected > 0 ? c.have / c.expected : undefined,
+                            };
                         });
                         const picks = pickedBy.get(r.row) ?? [];
                         out.push(_jsx(MapRow, { r: r, cols: cols, marks: marks, picks: picks, total: folded.totals.get(r.row) ?? { have: 0, expected: 0 }, look: look, sig: [
@@ -425,7 +429,9 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                                 cols[0],
                                 cols.at(-1),
                                 picks.join(),
-                                marks.map((m) => (m ? `${m.level}${m.canPick ? '+' : ''}` : '')).join(),
+                                marks
+                                    .map((m) => (m ? `${m.level}${m.canPick ? '+' : ''}${m.fill ?? ''}` : ''))
+                                    .join(),
                                 JSON.stringify(folded.totals.get(r.row) ?? null),
                             ].join('\u0001') }, r.row));
                         return out;
@@ -451,7 +457,7 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                     setPageSize(n);
                     setPageIndex(0);
                 }, noun: plural(rowSpec.title) })))] }));
-    return (_jsx("div", { ref: ref, className: "min-w-0", children: _jsx(LumenWidget, { id: title, kind: null, icon: icon, title: title, tools: head, filter: filter, filterCount: filterCount, load: load, rows: data?.rows.length, pad: false, children: _jsx("div", { className: "flex flex-col gap-3 px-3 pt-3 pb-3", children: _jsxs(LumenStates, { load: cells, skeleton: _jsx(GridSkeleton, {}), empty: data && !data.rows.length && !data.facts.length ? empty : undefined, children: [_jsx("div", { ref: scroller, className: "overflow-x-auto overflow-y-hidden pb-1", children: _jsx(CoverageTip, { content: tipFor, className: "w-max min-w-full", children: body }) }), pickedCount > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-lg bg-muted px-3 py-2 text-sm", children: [_jsxs("span", { className: "min-w-0", children: [layout === 'grid' && (_jsx("span", { className: "num font-semibold", children: `${pickedRows.map(rowName).join(', ')} · ` })), `${months(pickedCount)} picked`, pickNote && queueCount > 0 ? ` · ${pickNote(pick)}` : ''] }), _jsx("span", { className: "flex-1" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setPicked(new Set()), children: "Clear" }), removeCount > 0 && (_jsxs(Button, { variant: "outline", size: "sm", disabled: queueing, onClick: () => void queue(true), children: [_jsx(ListXIcon, {}), " Remove from queue \u00B7 ", months(removeCount)] })), queueCount > 0 && (_jsxs(Button, { size: "sm", disabled: queueing || !onQueue, onClick: () => void queue(), children: [_jsx(ListPlusIcon, {}), " ", queueLabel, " \u00B7 ", months(queueCount)] }))] })), _jsx("div", { className: "border-t pt-3", children: _jsx(CoverageLegend, { levels: levels, hint: hint ??
+    return (_jsx("div", { ref: ref, className: "min-w-0", children: _jsx(LumenWidget, { id: title, kind: null, icon: icon, title: title, tools: head, filter: filter, filterCount: filterCount, load: load, rows: data?.rows.length, pad: false, children: _jsx("div", { className: "flex flex-col gap-3 px-3 pt-3 pb-3", children: _jsxs(LumenStates, { load: cells, skeleton: _jsx(GridSkeleton, {}), empty: data && !data.rows.length && !data.facts.length ? empty : undefined, children: [_jsx("div", { ref: scroller, className: "overflow-x-auto overflow-y-hidden pb-1", children: _jsx(CoverageTip, { content: tipFor, className: "w-max min-w-full", children: body }) }), pickedCount > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-lg bg-muted px-3 py-2 text-sm", children: [_jsxs("span", { className: "min-w-0", children: [layout === 'grid' && (_jsx("span", { className: "num font-semibold", children: `${pickedRows.map(rowName).join(', ')} · ` })), `${months(pickedCount)} picked`, pickNote && queueCount > 0 ? ` · ${pickNote(pick)}` : ''] }), _jsx("span", { className: "flex-1" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setPicked(new Set()), children: "Clear" }), removeCount > 0 && (_jsxs(Button, { variant: "outline", size: "sm", disabled: queueing, onClick: () => void queue(true), children: [_jsx(ListXIcon, {}), " Remove from queue \u00B7 ", months(removeCount)] })), queueCount > 0 && (_jsxs(Button, { size: "sm", disabled: queueing || !onQueue, onClick: () => void queue(), children: [_jsx(ListPlusIcon, {}), " ", queueLabel, " \u00B7 ", months(queueCount)] }))] })), _jsx("div", { className: "border-t pt-3", children: _jsx(CoverageLegend, { levels: levels, labels: stateLabels, hint: hint ??
                                     (select === 'backfill'
                                         ? 'Click a block, shift-click for a range'
                                         : select === 'drill'

package/dist/theme.css

@@ -397,6 +397,9 @@
     background-size: 11.3px 11.3px;
     animation: lumen-cov-run 1s linear infinite;
   }
+  .bg-cov-indexing {
+    background: repeating-linear-gradient(135deg, var(--cov-high) 0 4px, var(--cov-low) 4px 8px);
+  }
   .bg-cov-canceled {
     background: linear-gradient(
         135deg,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -41,7 +41,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.32",
+    "@columenlabs/lumen-ui-types": "0.1.34",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",