@stll/ui 0.17.1 → 0.19.0

package/dist/kanban/band-peek.js

@@ -0,0 +1,103 @@
+//#region src/kanban/band-peek.ts
+/**
+* The peek a collapsed band opens while a dragged card rests on its folded
+* slot, as a state machine with an injectable scheduler so its timing rules
+* can be tested without a DOM. A plain hover never peeks: the peek exists so
+* a drag can still land on a specific column inside a folded band, and the
+* board only feeds the controller drag events.
+*
+* One rule keeps a peek from fighting the drag: it ends only after the drag
+* has left every part of the open band for a short linger. The band renders
+* as separate elements (its caption, then its columns in each lane), so
+* moving from the caption down into a column crosses an element boundary;
+* without the linger the band would fold under the card and the slot would
+* peek it straight back open. The end of the drag, wherever it lands, ends
+* the peek at once.
+*/
+/** How long a dragged card rests on a folded slot before the band peeks open. */
+const KANBAN_BAND_PEEK_DELAY_MS = 400;
+/** How long the drag may be outside an open band before the peek ends. */
+const KANBAN_BAND_PEEK_LINGER_MS = 150;
+const hostScheduler = (callback, ms) => {
+	const timer = setTimeout(callback, ms);
+	return () => clearTimeout(timer);
+};
+const createBandPeekController = ({ onChange, delayMs = 400, lingerMs = 150, schedule = hostScheduler }) => {
+	let peekingBandId = null;
+	let cancelOpen = null;
+	let openingBandId = null;
+	let cancelEnd = null;
+	const clearOpenTimer = () => {
+		if (cancelOpen !== null) {
+			cancelOpen();
+			cancelOpen = null;
+			openingBandId = null;
+		}
+	};
+	const clearEndTimer = () => {
+		if (cancelEnd !== null) {
+			cancelEnd();
+			cancelEnd = null;
+		}
+	};
+	const setPeeking = (bandId) => {
+		if (peekingBandId === bandId) return;
+		peekingBandId = bandId;
+		onChange(bandId);
+	};
+	const bandFolded = (bandId) => {
+		if (openingBandId === bandId) clearOpenTimer();
+		if (peekingBandId === bandId) {
+			clearEndTimer();
+			setPeeking(null);
+		}
+	};
+	return {
+		slotDragOver: (bandId) => {
+			if (peekingBandId === bandId || openingBandId === bandId) return;
+			clearOpenTimer();
+			openingBandId = bandId;
+			cancelOpen = schedule(() => {
+				cancelOpen = null;
+				openingBandId = null;
+				clearEndTimer();
+				setPeeking(bandId);
+			}, delayMs);
+		},
+		slotDragLeave: (bandId) => {
+			if (openingBandId === bandId) clearOpenTimer();
+		},
+		openDragEnter: (bandId) => {
+			if (peekingBandId === bandId) clearEndTimer();
+		},
+		openDragLeave: (bandId) => {
+			if (peekingBandId !== bandId || cancelEnd !== null) return;
+			cancelEnd = schedule(() => {
+				cancelEnd = null;
+				setPeeking(null);
+			}, lingerMs);
+		},
+		bandFolded,
+		bandExpanded: (bandId) => {
+			if (openingBandId === bandId) clearOpenTimer();
+			if (peekingBandId === bandId) {
+				clearEndTimer();
+				setPeeking(null);
+			}
+		},
+		slotUnmounted: (bandId) => {
+			if (openingBandId === bandId) clearOpenTimer();
+		},
+		dragEnded: () => {
+			clearOpenTimer();
+			clearEndTimer();
+			setPeeking(null);
+		},
+		dispose: () => {
+			clearOpenTimer();
+			clearEndTimer();
+		}
+	};
+};
+//#endregion
+export { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, createBandPeekController };

package/dist/kanban/column-band-header.d.ts

@@ -1,5 +1,13 @@
 import { ReactNode } from "react";
 //#region src/kanban/column-band-header.d.ts
+/**
+ * How a band toggle was activated. A pointer activation leaves the pointer
+ * over whatever replaces the caption (the folded slot), which matters to the
+ * board's peek behaviour; a keyboard activation does not.
+ */
+type KanbanBandToggleActivation = {
+  viaPointer: boolean;
+};
 type KanbanColumnBandHeaderProps = {
   /** The band name, or the control that has taken its place. */
   title: ReactNode;
@@ -17,7 +25,7 @@ type KanbanColumnBandHeaderProps = {
   compact?: boolean | undefined;
   /** Accessible name for the toggle, such as "Collapse To do". */
   toggleLabel: string;
-  onCollapsedChange: (collapsed: boolean) => void;
+  onCollapsedChange: (collapsed: boolean, activation: KanbanBandToggleActivation) => void;
   /** Band menu or other controls, after the toggle. */
   actions?: ReactNode;
 };
@@ -29,4 +37,4 @@ type KanbanColumnBandHeaderProps = {
  */
 declare const KanbanColumnBandHeader: ({ title, swatch, meta, collapsed, compact, toggleLabel, onCollapsedChange, actions }: KanbanColumnBandHeaderProps) => import("react").JSX.Element;
 //#endregion
-export { KanbanColumnBandHeader, KanbanColumnBandHeaderProps };
+export { KanbanBandToggleActivation, KanbanColumnBandHeader, KanbanColumnBandHeaderProps };

package/dist/kanban/column-band-header.js

@@ -18,7 +18,7 @@ const KanbanColumnBandHeader = ({ title, swatch, meta, collapsed, compact = coll
 		"aria-expanded": !collapsed,
 		"aria-label": toggleLabel,
 		className: "hover:bg-muted/60 text-muted-foreground hover:text-foreground flex size-6 shrink-0 items-center justify-center rounded-md transition-[background-color]",
-		onClick: () => onCollapsedChange(!collapsed),
+		onClick: (event) => onCollapsedChange(!collapsed, { viaPointer: event.detail > 0 }),
 		title: toggleLabel,
 		type: "button",
 		children: /* @__PURE__ */ jsx(DirectionalIcon, {

package/dist/kanban/column-header.d.ts

@@ -13,11 +13,18 @@ type KanbanColumnHeaderProps = {
   dragHandle?: ReactNode;
   /** Column menu. */
   actions?: ReactNode;
+  /** Extra classes, e.g. to opt a caller out of the default row height. */
+  className?: string;
 };
 /**
  * The column header row: one rhythm for the swatch, the name, the count, the
  * calculation, and the column's controls, so every board's header lines up.
+ *
+ * Fixed at `TOOLBAR_ROW_HEIGHT`, the same height as the page header, the view
+ * switcher, and the inspector rail's cells, so a column's top edge lines up
+ * with every other chrome row above the board. The title clips instead of
+ * wrapping so a long name can never grow the row past that height.
  */
-declare const KanbanColumnHeader: ({ swatch, title, meta, calculation, dragHandle, actions }: KanbanColumnHeaderProps) => import("react").JSX.Element;
+declare const KanbanColumnHeader: ({ swatch, title, meta, calculation, dragHandle, actions, className }: KanbanColumnHeaderProps) => import("react").JSX.Element;
 //#endregion
 export { KanbanColumnHeader, KanbanColumnHeaderProps };

package/dist/kanban/column-header.js

@@ -1,11 +1,18 @@
+import { cn } from "../lib/utils.js";
+import { TOOLBAR_ROW_HEIGHT } from "../inspector/layout-tokens.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/kanban/column-header.tsx
 /**
 * The column header row: one rhythm for the swatch, the name, the count, the
 * calculation, and the column's controls, so every board's header lines up.
+*
+* Fixed at `TOOLBAR_ROW_HEIGHT`, the same height as the page header, the view
+* switcher, and the inspector rail's cells, so a column's top edge lines up
+* with every other chrome row above the board. The title clips instead of
+* wrapping so a long name can never grow the row past that height.
 */
-const KanbanColumnHeader = ({ swatch, title, meta, calculation, dragHandle, actions }) => /* @__PURE__ */ jsxs("div", {
-	className: "flex items-center gap-2 px-3 py-2",
+const KanbanColumnHeader = ({ swatch, title, meta, calculation, dragHandle, actions, className }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("flex items-center gap-2 px-3", TOOLBAR_ROW_HEIGHT, className),
 	children: [
 		swatch,
 		/* @__PURE__ */ jsxs("span", {

package/dist/kanban/drag-interactions.d.ts

@@ -1,6 +1,14 @@
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 //#region src/kanban/drag-interactions.d.ts
 type AtlaskitDraggableOptions = Parameters<typeof draggable>[0];
+/**
+ * Marks a card drag on the native `DataTransfer` so the board's native
+ * `dragover`/`dragenter`/`dragleave` listeners (which also see reorders,
+ * file drops, and any other native drag passing over the board) can tell a
+ * kanban card drag from everything else. Pragmatic's `getInitialData` never
+ * reaches those native events; only data attached this way does.
+ */
+declare const KANBAN_CARD_DRAG_MIME: "application/x-stella-kanban-card";
 type RegisterKanbanCardDragOptions = {
   /** The drag wrapper rendered by `KanbanCardShell`. */
   element: AtlaskitDraggableOptions["element"];
@@ -32,4 +40,4 @@ type RegisterKanbanBoardAutoScrollOptions = {
 /** Register horizontal auto-scroll at the board's overflow boundary. */
 declare const registerKanbanBoardAutoScroll: ({ element, sources }: RegisterKanbanBoardAutoScrollOptions) => (() => void);
 //#endregion
-export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag };
+export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag };

package/dist/kanban/drag-interactions.js

@@ -6,6 +6,14 @@ import { centerUnderPointer } from "@atlaskit/pragmatic-drag-and-drop/element/ce
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
 //#region src/kanban/drag-interactions.ts
 /**
+* Marks a card drag on the native `DataTransfer` so the board's native
+* `dragover`/`dragenter`/`dragleave` listeners (which also see reorders,
+* file drops, and any other native drag passing over the board) can tell a
+* kanban card drag from everything else. Pragmatic's `getInitialData` never
+* reaches those native events; only data attached this way does.
+*/
+const KANBAN_CARD_DRAG_MIME = "application/x-stella-kanban-card";
+/**
 * Register the standard kanban card drag source and native preview.
 *
 * Movement remains with the caller: the package does not inspect the drag data
@@ -15,6 +23,7 @@ import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/el
 const registerKanbanCardDrag = ({ element, getInitialData, canDrag, onDragStart, onDrop }) => draggable({
 	element,
 	getInitialData,
+	getInitialDataForExternal: () => ({ [KANBAN_CARD_DRAG_MIME]: "" }),
 	...canDrag === void 0 ? {} : { canDrag },
 	...onDragStart === void 0 ? {} : { onDragStart },
 	...onDrop === void 0 ? {} : { onDrop },
@@ -50,4 +59,4 @@ const registerKanbanBoardAutoScroll = ({ element, sources }) => {
 	}));
 };
 //#endregion
-export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag };
+export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, registerKanbanBoardAutoScroll, registerKanbanCardDrag };

package/dist/kanban/index.d.ts

@@ -1,7 +1,7 @@
 import { KanbanCardFieldSelection, selectKanbanCardFieldIds } from "./card-properties.js";
 import { KanbanCardShell, KanbanCardShellProps } from "./card-shell.js";
 import { KanbanCellAction, KanbanCellActionProps } from "./cell-action.js";
-import { KanbanColumnBandHeader, KanbanColumnBandHeaderProps } from "./column-band-header.js";
+import { KanbanBandToggleActivation, KanbanColumnBandHeader, KanbanColumnBandHeaderProps } from "./column-band-header.js";
 import { KanbanBuiltInGroup, KanbanColumnBand, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
 import { BuildKanbanBoardMatrixParams, CreateKanbanDropIntentParams, KANBAN_BOARD_AXES, KanbanBoardAxis, KanbanBoardCell, KanbanBoardColumn, KanbanBoardCoordinate, KanbanBoardDestination, KanbanBoardLane, KanbanBoardMatrix, KanbanDropAxisChange, KanbanDropIntent, OrderKanbanCellsByColumnsParams, ResolveKanbanGroupValueParams, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, orderKanbanCellsByColumns } from "./matrix.js";
 import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KanbanColumnBandSpan, hasKanbanColumnBands, resolveKanbanColumnBands } from "./column-bands.js";
@@ -9,7 +9,8 @@ import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./column-header.js"
 import { KANBAN_BOARD_COLLISION_DETECTION, KanbanCellVirtualNavigation, KanbanSortableCellPosition, KanbanVirtualScrollRequest, kanbanKeyboardCoordinates } from "./sortable-interactions.logic.js";
 import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanCardDragSurfaceProps, KanbanDragCancelEvent, KanbanDragEndEvent, KanbanDragHandle, KanbanDragHandleProps, KanbanDragOverEvent, KanbanDragStartEvent, KanbanSortableActivationMode, KanbanSortableBindings, KanbanSortableBoard, KanbanSortableBoardProps, KanbanSortableColumns, KanbanSortableColumnsProps, KanbanSortableList, KanbanSortableListProps, UseKanbanDropTargetOptions, UseKanbanSortableOptions, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./sortable-interactions.js";
 import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHorizontalEdge, getKanbanHorizontalEdge } from "./sortable-edge.js";
-import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
-import { KANBAN_BAND_PEEK_DELAY_MS, KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./subgroup-board.js";
+import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
+import { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./subgroup-board.js";
+import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./band-peek.js";
 import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps, KanbanVirtualCellSortableContext } from "./virtual-cell.js";
-export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, type OrderKanbanCellsByColumnsParams, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
+export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, type OrderKanbanCellsByColumnsParams, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };

package/dist/kanban/index.js

@@ -9,7 +9,8 @@ import { KanbanColumnHeader } from "./column-header.js";
 import { KANBAN_BOARD_COLLISION_DETECTION, kanbanKeyboardCoordinates } from "./sortable-interactions.logic.js";
 import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./sortable-interactions.js";
 import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, getKanbanHorizontalEdge } from "./sortable-edge.js";
-import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
-import { KANBAN_BAND_PEEK_DELAY_MS, KanbanSubgroupBoard } from "./subgroup-board.js";
+import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
+import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./band-peek.js";
+import { KanbanSubgroupBoard } from "./subgroup-board.js";
 import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell } from "./virtual-cell.js";
-export { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
+export { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };

package/dist/kanban/sortable-interactions.d.ts

@@ -40,7 +40,19 @@ type KanbanSortableBoardProps = {
   sensors?: DndContextProps["sensors"] | undefined;
   /** Overrides dnd-kit's screen-reader announcements when supplied. */
   accessibility?: DndContextProps["accessibility"] | undefined;
+  /**
+   * Fires on drag start and on every drag end or cancel; a board over a
+   * `KanbanSubgroupBoard` combines the two into that board's `isDragging`
+   * (`true` here, `false` on `onDragEnd`/`onDragCancel`).
+   */
   onDragStart?: ((event: KanbanDragStartEvent) => void) | undefined;
+  /**
+   * Fires whenever dnd-kit's collision detection changes the drop target
+   * the drag is over, `event.over` included when it becomes none. A board
+   * over a `KanbanSubgroupBoard` maps `event.over?.id ?? null` to a band id
+   * (via `KanbanSubgroupCellContext.band`, or a droppable registered for a
+   * folded band's slot) to drive that board's `dragOverBandId`.
+   */
   onDragOver?: ((event: KanbanDragOverEvent) => void) | undefined;
   onDragCancel?: ((event: KanbanDragCancelEvent) => void) | undefined;
   /** Called once mounted child drop targets can safely receive input. */

package/dist/kanban/subgroup-board.d.ts

@@ -1,9 +1,8 @@
+import { KanbanBandToggleActivation } from "./column-band-header.js";
 import { KanbanColumnBand, KanbanGroup } from "./grouping.js";
 import { KanbanBoardCell, KanbanBoardColumn, KanbanBoardMatrix } from "./matrix.js";
 import { ReactNode } from "react";
 //#region src/kanban/subgroup-board.d.ts
-/** How long a pointer rests on a collapsed band before it peeks open. */
-declare const KANBAN_BAND_PEEK_DELAY_MS = 400;
 type KanbanSubgroupColumnHeaderContext = {
   column: KanbanBoardColumn;
   count: number;
@@ -17,6 +16,12 @@ type KanbanSubgroupCellContext<TRow> = {
   /** Number of rows in this lane/column intersection, including zero. */
   count: number;
   laneValue: string | null;
+  /**
+   * The band this cell's column belongs to, or `null` outside any band. Lets
+   * a host that drives its own drag-and-drop (see `dragOverBandId` on the
+   * board) map a cell's droppable id back to the band it should report.
+   */
+  band: KanbanColumnBand | null;
 };
 type KanbanSubgroupBandHeaderContext = {
   band: KanbanColumnBand;
@@ -31,7 +36,12 @@ type KanbanSubgroupBandHeaderContext = {
    * name and offer to pin the band open.
    */
   folded: boolean;
-  onCollapsedChange: (collapsed: boolean) => void;
+  /**
+   * A custom caption may report which way it was activated (pointer vs.
+   * keyboard); the board itself has no use for the distinction and passes
+   * it through unread, purely as information for a host's own header.
+   */
+  onCollapsedChange: (collapsed: boolean, activation?: KanbanBandToggleActivation) => void;
 };
 /**
  * One lane's slot for a collapsed band: the cells it hides, so a host can
@@ -78,6 +88,27 @@ type KanbanSubgroupBoardProps<TRow> = {
   formatCount?: ((count: number) => ReactNode) | undefined;
   footer?: ReactNode;
   className?: string | undefined;
+  /**
+   * The band whose folded slot (or, for a peeked band, whose open part) the
+   * host's own drag is currently over, or `null` when it is over neither.
+   * Omit (`undefined`) when the host does not drive drags itself — the
+   * board's native `dragover`/`dragenter`/`dragleave` listeners already feed
+   * the peek controller in that case. A host drives its own drag when it
+   * builds the drop targets itself (for example a `KanbanSortableBoard`,
+   * whose `onDragOver` reports the active `over` droppable); it maps that
+   * droppable back to a band id — a folded cell's context and an open
+   * cell's context (see `KanbanSubgroupCellContext.band`) both carry the
+   * band — and passes it here. The controller treats "over the band" as
+   * entering the open band when it is already peeked, and as hovering its
+   * folded slot otherwise; leaving it is reported the same way.
+   */
+  dragOverBandId?: string | null | undefined;
+  /**
+   * Whether the host's own drag (see `dragOverBandId`) is in progress.
+   * Flipping to `false` ends any peek immediately, mirroring the native
+   * `dragend`/`drop` listeners the board installs for its own drags.
+   */
+  isDragging?: boolean | undefined;
 } & KanbanSubgroupCollapseControl;
 /**
  * Reusable swimlane layout over the canonical two-axis Kanban matrix.
@@ -85,12 +116,12 @@ type KanbanSubgroupBoardProps<TRow> = {
  * Columns that carry band metadata render under a one-line band caption and
  * can be collapsed as a run: the band folds into one narrow slot in every
  * row, whose cells stay reachable (a host renders its drop target in them),
- * and peeks open while a pointer rests on it, so a drag can still land on a
- * specific column inside. Every row is laid out span by span with the same
+ * and peeks open while a dragged card rests on it, so a drag can still land
+ * on a specific column inside; a plain hover never opens it. Every row is laid out span by span with the same
  * widths, which is what keeps captions, headers, counts, and cells aligned
  * in every state; the caption line never grows past its own height, so a
  * folded band costs no vertical space.
  */
-declare const KanbanSubgroupBoard: <TRow>({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
+declare const KanbanSubgroupBoard: <TRow>({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
 //#endregion
-export { KANBAN_BAND_PEEK_DELAY_MS, KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext };
+export { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext };

package/dist/kanban/subgroup-board.js

@@ -2,6 +2,8 @@ import { cn } from "../lib/utils.js";
 import { DirectionalIcon } from "../components/directional-icon.js";
 import { KanbanColumnBandHeader } from "./column-band-header.js";
 import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_CLASS, resolveKanbanColumnBands } from "./column-bands.js";
+import { KANBAN_CARD_DRAG_MIME } from "./drag-interactions.js";
+import { createBandPeekController } from "./band-peek.js";
 import { ChevronDownIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -10,25 +12,54 @@ const groupValueKey = (value) => value === null ? "null" : `value:${value.length
 const columnKey = (column) => column.type === "group" ? `group:${groupValueKey(column.group.value)}` : `destination:${column.destination.id}`;
 const spanKey = (span) => span.band === null ? `single:${span.columns.map(columnKey).join("|")}` : `band:${span.band.id}`;
 const rowsIn = (cells) => cells.reduce((sum, cell) => sum + cell.rows.length, 0);
-/** How long a pointer rests on a collapsed band before it peeks open. */
-const KANBAN_BAND_PEEK_DELAY_MS = 400;
 /**
 * Reusable swimlane layout over the canonical two-axis Kanban matrix.
 *
 * Columns that carry band metadata render under a one-line band caption and
 * can be collapsed as a run: the band folds into one narrow slot in every
 * row, whose cells stay reachable (a host renders its drop target in them),
-* and peeks open while a pointer rests on it, so a drag can still land on a
-* specific column inside. Every row is laid out span by span with the same
+* and peeks open while a dragged card rests on it, so a drag can still land
+* on a specific column inside; a plain hover never opens it. Every row is laid out span by span with the same
 * widths, which is what keeps captions, headers, counts, and cells aligned
 * in every state; the caption line never grows past its own height, so a
 * folded band costs no vertical space.
 */
-const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }) => {
+const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }) => {
 	const [collapsedLaneValues, setCollapsedLaneValues] = useState(() => /* @__PURE__ */ new Set());
 	const [expandedEmptyLaneValues, setExpandedEmptyLaneValues] = useState(() => /* @__PURE__ */ new Set());
 	const [collapsedBandIds, setCollapsedBandIds] = useState(() => /* @__PURE__ */ new Set());
 	const [peekingBandId, setPeekingBandId] = useState(null);
+	const [peek] = useState(() => createBandPeekController({ onChange: setPeekingBandId }));
+	useEffect(() => () => peek.dispose(), [peek]);
+	useEffect(() => {
+		const end = () => peek.dragEnded();
+		window.addEventListener("dragend", end);
+		window.addEventListener("drop", end);
+		return () => {
+			window.removeEventListener("dragend", end);
+			window.removeEventListener("drop", end);
+		};
+	}, [peek]);
+	const previousDragOverBandId = useRef(null);
+	useEffect(() => {
+		if (dragOverBandId === void 0 || dragOverBandId === previousDragOverBandId.current) return;
+		const previous = previousDragOverBandId.current;
+		previousDragOverBandId.current = dragOverBandId;
+		if (previous !== null) if (peekingBandId === previous) peek.openDragLeave(previous);
+		else peek.slotDragLeave(previous);
+		if (dragOverBandId !== null) if (peekingBandId === dragOverBandId) peek.openDragEnter(dragOverBandId);
+		else peek.slotDragOver(dragOverBandId);
+	}, [
+		dragOverBandId,
+		peek,
+		peekingBandId
+	]);
+	useEffect(() => {
+		if (isDragging === false) {
+			previousDragOverBandId.current = null;
+			peek.dragEnded();
+		}
+	}, [isDragging, peek]);
 	const { cellsByLaneValue, countByColumnValue, ungroupedCells } = useMemo(() => {
 		const laneCells = /* @__PURE__ */ new Map();
 		const columnCounts = /* @__PURE__ */ new Map();
@@ -83,8 +114,14 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 	* itself collapsed and its toggle pins it open rather than closing it.
 	*/
 	const isBandFolded = (band) => peekingBandId !== band.id && isBandCollapsedNow(band);
+	const peekedBand = peekingBandId === null ? null : spans.find((span) => span.band?.id === peekingBandId)?.band ?? null;
+	const staleBandId = peekingBandId !== null && (peekedBand === null || !isBandCollapsedNow(peekedBand)) ? peekingBandId : null;
+	useEffect(() => {
+		if (staleBandId !== null) peek.bandExpanded(staleBandId);
+	}, [peek, staleBandId]);
 	const setBandCollapsed = (band, collapsed) => {
-		setPeekingBandId(null);
+		if (collapsed) peek.bandFolded(band.id);
+		else peek.bandExpanded(band.id);
 		if (onBandCollapsedChange) {
 			onBandCollapsedChange(band, collapsed);
 			return;
@@ -96,7 +133,6 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 			return next;
 		});
 	};
-	const endPeek = () => setPeekingBandId(null);
 	const columnCount = (column) => countByColumnValue.get(columnKey(column)) ?? 0;
 	const cellsOf = (span, cells) => span.columns.flatMap((column) => cells.filter((cell) => columnKey(cell.coordinate.column) === columnKey(column)));
 	const spanWidth = (span) => span.columns.length * 300 + (span.columns.length - 1) * 12;
@@ -112,17 +148,21 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 			if (band !== null && isBandFolded(band)) return /* @__PURE__ */ jsx(FoldedBandSlot, {
 				band,
 				className: KANBAN_COLLAPSED_BAND_WIDTH_CLASS,
-				onPeek: setPeekingBandId,
-				onPeekEnd: endPeek,
+				peek,
 				children: renderFoldedBand(band, span)
 			}, spanKey(span));
 			return /* @__PURE__ */ jsx("div", {
 				className: "flex gap-3",
 				"data-kanban-band": band?.id,
-				onPointerLeave: band !== null && peekingBandId === band.id ? endPeek : void 0,
+				onDragEnter: band === null ? void 0 : (event) => {
+					if (isKanbanCardDragEvent(event)) peek.openDragEnter(band.id);
+				},
+				onDragLeave: band === null ? void 0 : (event) => {
+					if (leavesElement(event) && isKanbanCardDragEvent(event)) peek.openDragLeave(band.id);
+				},
 				children: span.columns.map((column) => /* @__PURE__ */ jsx("div", {
 					className: KANBAN_COLUMN_WIDTH_CLASS,
-					children: renderColumn(column)
+					children: renderColumn(column, band)
 				}, columnKey(column)))
 			}, spanKey(span));
 		})
@@ -199,15 +239,19 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 							if (isBandFolded(band)) return /* @__PURE__ */ jsx(FoldedBandSlot, {
 								band,
 								className: cn("border-border/60 border-b", KANBAN_COLLAPSED_BAND_WIDTH_CLASS),
-								onPeek: setPeekingBandId,
-								onPeekEnd: endPeek,
+								peek,
 								children: bandHeader(band, span)
 							}, spanKey(span));
 							return /* @__PURE__ */ jsx("div", {
 								className: "border-border/60 shrink-0 border-b",
 								"data-kanban-band": band.id,
 								style: { width: `${String(spanWidth(span))}px` },
-								onPointerLeave: peekingBandId === band.id ? endPeek : void 0,
+								onDragEnter: (event) => {
+									if (isKanbanCardDragEvent(event)) peek.openDragEnter(band.id);
+								},
+								onDragLeave: (event) => {
+									if (leavesElement(event) && isKanbanCardDragEvent(event)) peek.openDragLeave(band.id);
+								},
 								children: bandHeader(band, span)
 							}, spanKey(span));
 						})
@@ -221,9 +265,10 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 				}),
 				ungroupedCells.length === 0 ? null : renderRow({
 					className: "pb-1",
-					renderColumn: (column) => {
+					renderColumn: (column, band) => {
 						const cell = ungroupedCells.find((candidate) => columnKey(candidate.coordinate.column) === columnKey(column));
 						return cell === void 0 ? null : /* @__PURE__ */ jsx(Fragment, { children: renderCell({
+							band,
 							cell,
 							count: cell.rows.length,
 							laneValue: null
@@ -283,9 +328,10 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 							}),
 							!collapsed && renderRow({
 								className: "pb-1",
-								renderColumn: (column) => {
+								renderColumn: (column, band) => {
 									const cell = cellFor(column);
 									return cell === void 0 ? null : /* @__PURE__ */ jsx(Fragment, { children: renderCell({
+										band,
 										cell,
 										count: cell.rows.length,
 										laneValue: group.value
@@ -302,37 +348,35 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 	});
 };
 /**
-* The narrow slot a folded band occupies in a row. A pointer resting on it
-* for `KANBAN_BAND_PEEK_DELAY_MS` peeks the band open; leaving ends the peek
-* and cancels a pending one, so a drag passing over it does not unfold it.
-* The pointer must enter the slot after it appeared: a band folded under a
-* resting pointer does not peek straight back open.
+* Whether a drag-leave event actually leaves `currentTarget` rather than
+* moving between its descendants, which fire leave/enter pairs of their own.
 */
-const FoldedBandSlot = ({ band, children, className, onPeek, onPeekEnd }) => {
-	const timer = useRef(null);
-	useEffect(() => () => {
-		if (timer.current !== null) clearTimeout(timer.current);
-	}, []);
+const leavesElement = (event) => !(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget));
+/**
+* Whether a native drag event is a kanban card drag, rather than some other
+* native drag (a column reorder, a file, text) passing over the board. Only
+* a card drag should ever open or hold a band's peek.
+*/
+const isKanbanCardDragEvent = (event) => event.dataTransfer.types.includes(KANBAN_CARD_DRAG_MIME);
+/**
+* The narrow slot a folded band occupies in a row. Its drag events go to
+* the board's peek controller, which decides when a resting drag peeks the
+* band open.
+*/
+const FoldedBandSlot = ({ band, children, className, peek }) => {
+	useEffect(() => () => peek.slotUnmounted(band.id), [peek, band.id]);
 	return /* @__PURE__ */ jsx("div", {
 		className,
 		"data-kanban-band": band.id,
 		"data-kanban-band-collapsed": "",
-		onPointerMove: () => {
-			if (timer.current !== null) return;
-			timer.current = setTimeout(() => {
-				timer.current = null;
-				onPeek(band.id);
-			}, 400);
+		onDragOver: (event) => {
+			if (isKanbanCardDragEvent(event)) peek.slotDragOver(band.id);
 		},
-		onPointerLeave: () => {
-			if (timer.current !== null) {
-				clearTimeout(timer.current);
-				timer.current = null;
-			}
-			onPeekEnd();
+		onDragLeave: (event) => {
+			if (leavesElement(event) && isKanbanCardDragEvent(event)) peek.slotDragLeave(band.id);
 		},
 		children
 	});
 };
 //#endregion
-export { KANBAN_BAND_PEEK_DELAY_MS, KanbanSubgroupBoard };
+export { KanbanSubgroupBoard };

package/dist/lib/control-size.d.ts

@@ -5,6 +5,6 @@ declare const CONTROL_SIZE: Readonly<{
   readonly lg: "lg";
 }>;
 type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
-declare const CONTROL_SIZES: readonly ("sm" | "default" | "lg")[];
+declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };