@stll/ui 0.59.1 → 0.60.0

package/dist/kanban/sortable-interactions.logic.js

@@ -0,0 +1,210 @@
+import { closestCorners, getFirstCollision, pointerWithin } from "@dnd-kit/core";
+//#region src/kanban/sortable-interactions.logic.ts
+const KANBAN_DROP_TARGET_TYPES = {
+	CELL: "kanban-cell",
+	ITEM: "kanban-item"
+};
+const isRecord = (value) => typeof value === "object" && value !== null;
+const isUniqueIdentifier = (value) => typeof value === "string" || typeof value === "number";
+const isCellPosition = (value) => isRecord(value) && typeof value["column"] === "number" && typeof value["lane"] === "number" && Number.isInteger(value["column"]) && Number.isInteger(value["lane"]) && value["column"] >= 0 && value["lane"] >= 0;
+const isKanbanCellVirtualNavigation = (value) => isRecord(value) && (value["type"] === "static" || value["type"] === "virtual" && typeof value["requestScroll"] === "function");
+const isKanbanCellDropData = (value) => isRecord(value) && value["type"] === KANBAN_DROP_TARGET_TYPES.CELL && Array.isArray(value["itemIds"]) && value["itemIds"].every(isUniqueIdentifier) && isKanbanCellVirtualNavigation(value["navigation"]) && isCellPosition(value["position"]);
+const isKanbanItemDropData = (value) => {
+	if (!isRecord(value) || value["type"] !== KANBAN_DROP_TARGET_TYPES.ITEM) return false;
+	const navigation = value["navigation"];
+	const current = isRecord(navigation) ? navigation["current"] : void 0;
+	return isRecord(navigation) && isRecord(current) && (current["type"] === "idle" || (current["type"] === "ready" || current["type"] === "pending") && isUniqueIdentifier(current["targetId"]));
+};
+const getKanbanKeyboardTargetState = (value) => isKanbanItemDropData(value) ? value.navigation.current : void 0;
+/**
+* dnd-kit computes collisions while rendering but publishes the resulting drop
+* target to its sensor context a render later, and resolves a drop from that
+* published value. A drag that ends before the two agree, which every input
+* can do because a single move produces a single render, drops the item on the
+* previously published target.
+*
+* Keyboard navigation names its target outright, so it is compared directly: a
+* pending target is still waiting for a virtual cell to mount an offscreen row
+* and has produced no collision at all, and a ready one is only settled once it
+* is the published target. Until then both the collisions and the published
+* target still describe where the board was before the user navigated away.
+*/
+const isKanbanDropSettled = ({ active, collisions, over }) => {
+	const target = getKanbanKeyboardTargetState(active?.data.current);
+	if (target?.type === "pending") return false;
+	if (target?.type === "ready") return over?.id === target.targetId;
+	return getFirstCollision(collisions, "id") === (over?.id ?? null);
+};
+const clearKanbanKeyboardTarget = (value) => {
+	if (isKanbanItemDropData(value) && value.navigation.current.type !== "idle") value.navigation.current = { type: "idle" };
+};
+const getSortableData = (value) => {
+	if (!isRecord(value)) return null;
+	const sortable = value["sortable"];
+	if (!isRecord(sortable) || !isUniqueIdentifier(sortable["containerId"]) || typeof sortable["index"] !== "number" || !Number.isInteger(sortable["index"]) || !Array.isArray(sortable["items"]) || !sortable["items"].every(isUniqueIdentifier)) return null;
+	return {
+		containerId: sortable["containerId"],
+		index: sortable["index"],
+		items: sortable["items"]
+	};
+};
+const isKanbanDroppable = ({ data }) => {
+	const value = data.current;
+	return isKanbanCellDropData(value) || isKanbanItemDropData(value);
+};
+/**
+* Pointer and touch input must be inside a registered board target. Once that
+* boundary is established, closest corners gives stable ranking across cells.
+*/
+const KANBAN_BOARD_COLLISION_DETECTION = (args) => {
+	const boardContainers = args.droppableContainers.filter(isKanbanDroppable);
+	if (args.pointerCoordinates === null) {
+		const activeData = args.active.data.current;
+		if (isKanbanItemDropData(activeData)) {
+			if (activeData.navigation.current.type === "pending") return [];
+			if (activeData.navigation.current.type !== "ready") return closestCorners({
+				...args,
+				droppableContainers: boardContainers
+			});
+			const { targetId } = activeData.navigation.current;
+			return boardContainers.some(({ id }) => id === targetId) ? [{ id: targetId }] : [];
+		}
+		return closestCorners({
+			...args,
+			droppableContainers: boardContainers
+		});
+	}
+	const intersections = pointerWithin({
+		...args,
+		droppableContainers: boardContainers
+	});
+	if (intersections.length === 0) return [];
+	const intersectingIds = new Set(intersections.map((intersection) => intersection.id));
+	const cellIds = new Set(boardContainers.filter(({ data }) => isKanbanCellDropData(data.current)).map(({ id }) => id));
+	return closestCorners({
+		...args,
+		droppableContainers: boardContainers.filter(({ id, data }) => {
+			if (!intersectingIds.has(id)) return false;
+			const cellId = getSortableData(data.current)?.containerId;
+			return cellId === void 0 || !cellIds.has(cellId) || intersectingIds.has(cellId);
+		})
+	});
+};
+const getAdjacentCell = (cells, current, direction) => {
+	let columnOffset = 0;
+	let laneOffset = 0;
+	switch (direction) {
+		case "down":
+			laneOffset = 1;
+			break;
+		case "left":
+			columnOffset = -1;
+			break;
+		case "right":
+			columnOffset = 1;
+			break;
+		case "up": laneOffset = -1;
+	}
+	return cells.find(({ position }) => position.column === current.position.column + columnOffset && position.lane === current.position.lane + laneOffset);
+};
+const getKanbanKeyboardTarget = ({ activeId, cells, currentCellId, currentOverId, direction }) => {
+	const currentCell = cells.find(({ id }) => id === currentCellId);
+	if (currentCell === void 0) return;
+	const overIndex = currentCell.itemIds.indexOf(currentOverId);
+	const activeIndex = currentCell.itemIds.indexOf(activeId);
+	const currentIndex = overIndex !== -1 ? overIndex : activeIndex;
+	if (direction === "down" && currentIndex >= 0) {
+		const nextItem = currentCell.itemIds.at(currentIndex + 1);
+		if (nextItem !== void 0) return nextItem;
+	}
+	if (direction === "up" && currentIndex > 0) return currentCell.itemIds.at(currentIndex - 1);
+	const adjacentCell = getAdjacentCell(cells, currentCell, direction);
+	if (adjacentCell === void 0) return;
+	if (adjacentCell.itemIds.length === 0) return adjacentCell.id;
+	if (direction === "down") return adjacentCell.itemIds.at(0);
+	if (direction === "up") return adjacentCell.itemIds.at(-1);
+	const targetIndex = Math.max(currentIndex, 0);
+	return adjacentCell.itemIds.at(Math.min(targetIndex, adjacentCell.itemIds.length - 1)) ?? adjacentCell.id;
+};
+const getDirection = (code) => {
+	switch (code) {
+		case "ArrowDown": return "down";
+		case "ArrowLeft": return "left";
+		case "ArrowRight": return "right";
+		case "ArrowUp": return "up";
+		default: return null;
+	}
+};
+const getCellId = (container) => {
+	const data = container.data.current;
+	if (isKanbanCellDropData(data)) return container.id;
+	if (!isKanbanItemDropData(data)) return null;
+	return getSortableData(data)?.containerId ?? null;
+};
+/** Ordered two-dimensional navigation over item and empty-cell targets. */
+const kanbanKeyboardCoordinates = (event, { active, context }) => {
+	const direction = getDirection(event.code);
+	if (direction === null) return;
+	event.preventDefault();
+	const cells = context.droppableContainers.getEnabled().filter(({ data }) => {
+		const value = data.current;
+		return isKanbanCellDropData(value);
+	}).flatMap((container) => {
+		const data = container.data.current;
+		return isKanbanCellDropData(data) ? [{
+			...data,
+			id: container.id
+		}] : [];
+	});
+	const activeData = context.active?.data.current;
+	const keyboardTarget = getKanbanKeyboardTargetState(activeData);
+	const overId = keyboardTarget?.type === "ready" ? keyboardTarget.targetId : context.over?.id ?? active;
+	const overContainer = context.droppableContainers.get(overId);
+	const activeContainer = context.droppableContainers.get(active);
+	const currentCellId = (overContainer && getCellId(overContainer)) ?? (activeContainer && getCellId(activeContainer));
+	if (currentCellId === null || currentCellId === void 0) return;
+	const targetId = keyboardTarget?.type === "pending" ? keyboardTarget.targetId : getKanbanKeyboardTarget({
+		activeId: active,
+		cells,
+		currentCellId,
+		currentOverId: overId,
+		direction
+	});
+	if (targetId === void 0) return;
+	const targetNode = context.droppableContainers.get(targetId)?.node.current;
+	if (targetNode === null || targetNode === void 0) {
+		const targetCell = cells.find(({ itemIds }) => itemIds.includes(targetId));
+		if (isKanbanItemDropData(activeData) && targetCell?.navigation.type === "virtual") {
+			activeData.navigation.current = {
+				targetId,
+				type: "pending"
+			};
+			targetCell.navigation.requestScroll({
+				itemId: targetId,
+				type: "item"
+			});
+		}
+		return;
+	}
+	const targetRect = context.droppableRects.get(targetId);
+	if (targetRect === void 0) return;
+	if (isKanbanItemDropData(activeData)) activeData.navigation.current = {
+		targetId,
+		type: "ready"
+	};
+	requestAnimationFrame(() => {
+		requestAnimationFrame(() => {
+			targetNode.scrollIntoView({
+				behavior: "instant",
+				block: "nearest",
+				inline: "nearest"
+			});
+		});
+	});
+	return {
+		x: targetRect.left,
+		y: targetRect.top
+	};
+};
+//#endregion
+export { KANBAN_BOARD_COLLISION_DETECTION, KANBAN_DROP_TARGET_TYPES, clearKanbanKeyboardTarget, getKanbanKeyboardTarget, getKanbanKeyboardTargetState, isKanbanCellDropData, isKanbanDropSettled, kanbanKeyboardCoordinates };

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

@@ -27,7 +27,11 @@ export 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. */
+  /**
+   * 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;
 };
 export type KanbanSubgroupBandHeaderContext = {
@@ -110,6 +114,27 @@ export 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.
@@ -128,6 +153,6 @@ export type KanbanSubgroupBoardProps<TRow> = {
  * in every state; the caption line never grows past its own height, so a
  * folded band costs no vertical space.
  */
-export declare const KanbanSubgroupBoard: <TRow>({ scrollRef, matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
+export declare const KanbanSubgroupBoard: <TRow>({ scrollRef, matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
 //#endregion
 export {};

package/dist/kanban/subgroup-board.js

@@ -42,7 +42,7 @@ const rowsIn = (cells) => cells.reduce((sum, cell) => sum + cell.rows.length, 0)
 * in every state; the caption line never grows past its own height, so a
 * folded band costs no vertical space.
 */
-const KanbanSubgroupBoard = ({ scrollRef, matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }) => {
+const KanbanSubgroupBoard = ({ scrollRef, matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, 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());
@@ -69,6 +69,31 @@ const KanbanSubgroupBoard = ({ scrollRef, matrix, renderColumnHeader, renderLane
 			window.removeEventListener("drop", end);
 		};
 	}, [peek]);
+	const previousDragOverBandId = useRef(null);
+	useEffect(() => {
+		if (dragOverBandId === void 0 || isDragging === false || 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,
+		isDragging,
+		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();

package/dist/kanban/virtual-cell.d.ts

@@ -1,5 +1,8 @@
 import { Key, ReactNode, RefObject } from "react";
 import { OptionColor } from "../lib/option-color.js";
+import { SortableContextProps, SortingStrategy } from "@dnd-kit/sortable";
+import { UniqueIdentifier } from "@dnd-kit/core";
+import { UseKanbanDropTargetOptions } from "./sortable-interactions.js";
 //#region src/kanban/virtual-cell.d.ts
 export declare const KANBAN_VIRTUAL_CELL_PAGINATION: {
   readonly NONE: "none";
@@ -14,11 +17,25 @@ export type KanbanVirtualCellPagination = {
   pageKey: string | number;
   onRequestMore: () => void;
 };
+/**
+ * Makes a virtual cell the canonical sortable context for its rendered rows.
+ *
+ * `getRowKey` remains responsible for React and virtualizer identity. A
+ * separate sortable identifier avoids narrowing an existing React key contract
+ * merely to support dnd-kit consumers.
+ */
+export type KanbanVirtualCellSortableContext<TRow> = {
+  dropTarget: Omit<UseKanbanDropTargetOptions, "itemIds" | "navigation">;
+  getRowId: (row: TRow) => UniqueIdentifier;
+  disabled?: SortableContextProps["disabled"] | undefined;
+  strategy?: SortingStrategy | undefined;
+};
 export type KanbanVirtualCellProps<TRow> = {
   rows: readonly TRow[];
   getRowKey: (row: TRow) => Key;
   renderRow: (row: TRow) => ReactNode;
   pagination: KanbanVirtualCellPagination;
+  sortable?: KanbanVirtualCellSortableContext<TRow> | undefined;
   containerRef?: RefObject<HTMLDivElement | null> | undefined;
   active?: boolean | undefined;
   backgroundColor?: string | undefined;
@@ -54,5 +71,5 @@ export type KanbanVirtualCellProps<TRow> = {
   className?: string | undefined;
 };
 /** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
-export declare const KanbanVirtualCell: <TRow>({ rows, getRowKey, renderRow, pagination, containerRef, active, backgroundColor, accent, footer, footerPlacement, estimateSize, overscan, loadMoreThreshold, className }: KanbanVirtualCellProps<TRow>) => import("react").JSX.Element;
+export declare const KanbanVirtualCell: <TRow>({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active, backgroundColor, accent, footer, footerPlacement, estimateSize, overscan, loadMoreThreshold, className }: KanbanVirtualCellProps<TRow>) => import("react").JSX.Element;
 //#endregion

package/dist/kanban/virtual-cell.js

@@ -1,9 +1,12 @@
 import { cn } from "../lib/utils.js";
 import { KANBAN_CARD_STICKY_TOP_VAR, KANBAN_STICKY_TOP_CLASS, resolveKanbanCardStickyTop } from "./sticky-lane.js";
+import { useKanbanDropTarget } from "./sortable-interactions.js";
 import { resolveOptionColor } from "../lib/option-color.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { useDndContext } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 //#region src/kanban/virtual-cell.tsx
 const DEFAULT_ESTIMATE_SIZE_PX = 128;
 const DEFAULT_OVERSCAN = 8;
@@ -26,15 +29,26 @@ const KANBAN_CELL_SURFACE_CLASS = "bg-muted/20";
 /** A caller's own surface (an explicit colour, or the accent wash), published
 *  so a pinned action can repaint that one instead. */
 const KANBAN_CELL_SURFACE_VAR = "--kanban-cell-surface";
+const retainActiveSortableIndex = (range, activeIndex) => {
+	const indexes = defaultRangeExtractor(range);
+	if (activeIndex < 0 || indexes.includes(activeIndex)) return indexes;
+	indexes.push(activeIndex);
+	indexes.sort((left, right) => left - right);
+	return indexes;
+};
 const KANBAN_VIRTUAL_CELL_PAGINATION = {
 	NONE: "none",
 	CURSOR: "cursor"
 };
 /** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
-const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, containerRef, active = false, backgroundColor, accent, footer, footerPlacement = "end", estimateSize = DEFAULT_ESTIMATE_SIZE_PX, overscan = DEFAULT_OVERSCAN, loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD_PX, className }) => {
+const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active = false, backgroundColor, accent, footer, footerPlacement = "end", estimateSize = DEFAULT_ESTIMATE_SIZE_PX, overscan = DEFAULT_OVERSCAN, loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD_PX, className }) => {
 	const internalRef = useRef(null);
+	const fallbackDropTargetId = useId();
 	const scrollRef = internalRef;
 	const requestedPageKeyRef = useRef(null);
+	const itemIds = sortable ? rows.map(sortable.getRowId) : [];
+	const { active: activeDrag } = useDndContext();
+	const activeSortableIndex = activeDrag === null ? -1 : itemIds.indexOf(activeDrag.id);
 	const virtualizer = useVirtualizer({
 		count: rows.length,
 		estimateSize: () => estimateSize,
@@ -43,7 +57,25 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, containerRe
 			return row === void 0 ? index : getRowKey(row);
 		},
 		getScrollElement: () => scrollRef.current,
-		overscan
+		overscan,
+		rangeExtractor: (range) => retainActiveSortableIndex(range, activeSortableIndex)
+	});
+	const requestScroll = ({ itemId }) => {
+		const index = itemIds.indexOf(itemId);
+		if (index !== -1) virtualizer.scrollToIndex(index, { align: "auto" });
+	};
+	const dropTarget = useKanbanDropTarget({
+		disabled: sortable?.dropTarget.disabled ?? sortable === void 0,
+		id: sortable?.dropTarget.id ?? fallbackDropTargetId,
+		itemIds,
+		navigation: sortable === void 0 ? { type: "static" } : {
+			requestScroll,
+			type: "virtual"
+		},
+		position: sortable?.dropTarget.position ?? {
+			column: -1,
+			lane: -1
+		}
 	});
 	const handleScroll = ({ currentTarget }) => {
 		if (pagination.type !== "cursor" || !pagination.hasMore || pagination.loading) return;
@@ -55,17 +87,13 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, containerRe
 	const setScrollElement = (element) => {
 		internalRef.current = element;
 		if (containerRef) containerRef.current = element;
+		dropTarget.setNodeRef(element);
 	};
-	const accentVariants = accent === void 0 ? void 0 : resolveOptionColor(accent);
-	const accentBackground = accentVariants === void 0 ? void 0 : `color-mix(in srgb, var(${KANBAN_CELL_ACCENT_VAR}) ${active ? KANBAN_CELL_ACCENT_ACTIVE_ALPHA : KANBAN_CELL_ACCENT_RESTING_ALPHA}%, var(--background))`;
-	const activeAccentRing = active && accentVariants !== void 0 ? `0 0 0 2px color-mix(in srgb, var(${KANBAN_CELL_ACCENT_VAR}) ${KANBAN_CELL_ACCENT_ACTIVE_RING_ALPHA}%, transparent)` : void 0;
-	const surface = backgroundColor ?? accentBackground;
-	const style = surface === void 0 ? void 0 : {
-		backgroundColor: surface,
-		[KANBAN_CELL_SURFACE_VAR]: surface,
-		...activeAccentRing === void 0 ? void 0 : { boxShadow: activeAccentRing },
-		...accentVariants === void 0 ? void 0 : { [KANBAN_CELL_ACCENT_VAR]: accentVariants.color }
-	};
+	const { surface, style, hasAccent } = resolveKanbanCellAppearance({
+		accent,
+		active,
+		backgroundColor
+	});
 	const hasStickyFooter = footerPlacement === "sticky-start" && footer !== null && footer !== void 0;
 	const stickyFooterRef = useRef(null);
 	const [stickyFooterHeight, setStickyFooterHeight] = useState(0);
@@ -94,9 +122,10 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, containerRe
 			children: footer
 		})
 	}) : null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn(KANBAN_CELL_SURFACE_CLASS, "min-h-20 rounded-xl p-2", rows.length === 0 ? "overflow-visible" : "max-h-[min(60dvh,40rem)] overflow-y-auto overscroll-y-contain", active && accentVariants === void 0 && "bg-primary/5 ring-primary/50 ring-2", className),
-		"data-kanban-cell-accent": accentVariants === void 0 ? void 0 : "true",
+	const content = /* @__PURE__ */ jsxs("div", {
+		className: cn(KANBAN_CELL_SURFACE_CLASS, "min-h-20 rounded-xl p-2", rows.length === 0 ? "overflow-visible" : "max-h-[min(60dvh,40rem)] overflow-y-auto overscroll-y-contain", active && !hasAccent && "bg-primary/5 ring-primary/50 ring-2", className),
+		"data-kanban-cell": sortable?.dropTarget.id,
+		"data-kanban-cell-accent": hasAccent ? "true" : void 0,
 		onScroll: handleScroll,
 		ref: setScrollElement,
 		style,
@@ -127,6 +156,30 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, containerRe
 			footerPlacement === "end" ? footer : null
 		]
 	});
+	if (sortable === void 0) return content;
+	return /* @__PURE__ */ jsx(SortableContext, {
+		...sortable.disabled === void 0 ? {} : { disabled: sortable.disabled },
+		id: sortable.dropTarget.id,
+		items: itemIds,
+		strategy: sortable.strategy ?? verticalListSortingStrategy,
+		children: content
+	});
 };
+function resolveKanbanCellAppearance({ accent, active, backgroundColor }) {
+	const accentVariants = accent === void 0 ? void 0 : resolveOptionColor(accent);
+	const accentBackground = accentVariants === void 0 ? void 0 : `color-mix(in srgb, var(${KANBAN_CELL_ACCENT_VAR}) ${active ? KANBAN_CELL_ACCENT_ACTIVE_ALPHA : KANBAN_CELL_ACCENT_RESTING_ALPHA}%, var(--background))`;
+	const activeAccentRing = active && accentVariants !== void 0 ? `0 0 0 2px color-mix(in srgb, var(${KANBAN_CELL_ACCENT_VAR}) ${KANBAN_CELL_ACCENT_ACTIVE_RING_ALPHA}%, transparent)` : void 0;
+	const surface = backgroundColor ?? accentBackground;
+	return {
+		surface,
+		style: surface === void 0 ? void 0 : {
+			backgroundColor: surface,
+			[KANBAN_CELL_SURFACE_VAR]: surface,
+			...activeAccentRing === void 0 ? void 0 : { boxShadow: activeAccentRing },
+			...accentVariants === void 0 ? void 0 : { [KANBAN_CELL_ACCENT_VAR]: accentVariants.color }
+		},
+		hasAccent: accentVariants !== void 0
+	};
+}
 //#endregion
 export { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.59.1",
+  "version": "0.60.0",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",
@@ -862,6 +862,8 @@
     "@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.1",
     "@base-ui/react": "1.9.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@happy-dom/global-registrator": "21.0.4",
     "@playwright/test": "^1.63.0",
     "@stll/playwright-tools": "0.0.0",
@@ -885,6 +887,8 @@
     "@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.1",
     "@base-ui/react": "^1.7.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@playwright/test": "^1.63.0",
     "@tanstack/react-virtual": "^3.14.13",
     "@types/react": ">=19",