@pixpilot/shadcn-kanban 0.0.0

package/dist/KanbanVirtualColumnCards.cjs

@@ -0,0 +1,70 @@
+'use client';
+
+
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_KanbanItem = require('./KanbanItem.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __tanstack_react_virtual = require("@tanstack/react-virtual");
+__tanstack_react_virtual = require_rolldown_runtime.__toESM(__tanstack_react_virtual);
+
+//#region src/KanbanVirtualColumnCards.tsx
+const DEFAULT_ESTIMATED_ITEM_HEIGHT = 96;
+const DEFAULT_OVERSCAN = 6;
+/** Matches the `gap-2` the non-virtualized list gets from the scroller. */
+const DEFAULT_GAP = 8;
+/**
+* The card list of a column, virtualized: only the cards near the scroller's
+* window are mounted, positioned absolutely inside a spacer tall enough to
+* keep the scrollbar honest.
+*
+* Each card keeps its own wrapper so the two transforms never collide — the
+* wrapper carries the virtual offset, the card inside carries whatever
+* dnd-kit's sortable is animating.
+*/
+function KanbanVirtualColumnCards({ column, items, renderItem, itemClassName, scroller, activeItemId, options, dragDisabled = false }) {
+	const { estimateItemHeight = DEFAULT_ESTIMATED_ITEM_HEIGHT, overscan = DEFAULT_OVERSCAN, gap = DEFAULT_GAP } = options;
+	const activeIndex = react.default.useMemo(() => activeItemId == null ? -1 : items.findIndex((item) => item.id === String(activeItemId)), [items, activeItemId]);
+	const rangeExtractor = react.default.useCallback((range) => {
+		const indexes = (0, __tanstack_react_virtual.defaultRangeExtractor)(range);
+		if (activeIndex < 0 || indexes.includes(activeIndex)) return indexes;
+		return [...indexes, activeIndex].sort((a, b) => a - b);
+	}, [activeIndex]);
+	const getItemKey = react.default.useCallback((index) => items[index]?.id ?? index, [items]);
+	const virtualizer = (0, __tanstack_react_virtual.useVirtualizer)({
+		count: items.length,
+		getScrollElement: () => scroller,
+		estimateSize: () => estimateItemHeight,
+		getItemKey,
+		rangeExtractor,
+		overscan,
+		gap
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-testid": `kanban-column-virtual-${column.id}`,
+		className: "relative w-full shrink-0",
+		style: { height: virtualizer.getTotalSize() },
+		children: virtualizer.getVirtualItems().map((virtualItem) => {
+			const item = items[virtualItem.index];
+			if (!item) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-index": virtualItem.index,
+				ref: virtualizer.measureElement,
+				className: "absolute top-0 left-0 w-full",
+				style: { transform: `translateY(${virtualItem.start}px)` },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_KanbanItem.KanbanItem, {
+					item,
+					column,
+					renderItem,
+					className: itemClassName,
+					dragDisabled
+				})
+			}, virtualItem.key);
+		})
+	});
+}
+
+//#endregion
+exports.KanbanVirtualColumnCards = KanbanVirtualColumnCards;

package/dist/KanbanVirtualColumnCards.js

@@ -0,0 +1,66 @@
+'use client';
+
+
+import { KanbanItem } from "./KanbanItem.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+
+//#region src/KanbanVirtualColumnCards.tsx
+const DEFAULT_ESTIMATED_ITEM_HEIGHT = 96;
+const DEFAULT_OVERSCAN = 6;
+/** Matches the `gap-2` the non-virtualized list gets from the scroller. */
+const DEFAULT_GAP = 8;
+/**
+* The card list of a column, virtualized: only the cards near the scroller's
+* window are mounted, positioned absolutely inside a spacer tall enough to
+* keep the scrollbar honest.
+*
+* Each card keeps its own wrapper so the two transforms never collide — the
+* wrapper carries the virtual offset, the card inside carries whatever
+* dnd-kit's sortable is animating.
+*/
+function KanbanVirtualColumnCards({ column, items, renderItem, itemClassName, scroller, activeItemId, options, dragDisabled = false }) {
+	const { estimateItemHeight = DEFAULT_ESTIMATED_ITEM_HEIGHT, overscan = DEFAULT_OVERSCAN, gap = DEFAULT_GAP } = options;
+	const activeIndex = React.useMemo(() => activeItemId == null ? -1 : items.findIndex((item) => item.id === String(activeItemId)), [items, activeItemId]);
+	const rangeExtractor = React.useCallback((range) => {
+		const indexes = defaultRangeExtractor(range);
+		if (activeIndex < 0 || indexes.includes(activeIndex)) return indexes;
+		return [...indexes, activeIndex].sort((a, b) => a - b);
+	}, [activeIndex]);
+	const getItemKey = React.useCallback((index) => items[index]?.id ?? index, [items]);
+	const virtualizer = useVirtualizer({
+		count: items.length,
+		getScrollElement: () => scroller,
+		estimateSize: () => estimateItemHeight,
+		getItemKey,
+		rangeExtractor,
+		overscan,
+		gap
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": `kanban-column-virtual-${column.id}`,
+		className: "relative w-full shrink-0",
+		style: { height: virtualizer.getTotalSize() },
+		children: virtualizer.getVirtualItems().map((virtualItem) => {
+			const item = items[virtualItem.index];
+			if (!item) return null;
+			return /* @__PURE__ */ jsx("div", {
+				"data-index": virtualItem.index,
+				ref: virtualizer.measureElement,
+				className: "absolute top-0 left-0 w-full",
+				style: { transform: `translateY(${virtualItem.start}px)` },
+				children: /* @__PURE__ */ jsx(KanbanItem, {
+					item,
+					column,
+					renderItem,
+					className: itemClassName,
+					dragDisabled
+				})
+			}, virtualItem.key);
+		})
+	});
+}
+
+//#endregion
+export { KanbanVirtualColumnCards };

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,25 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+exports.__toESM = __toESM;

package/dist/hooks/use-kanban-board-state.cjs

@@ -0,0 +1,43 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_replace_state = require('../utils/replace-state.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/hooks/use-kanban-board-state.ts
+/**
+* Mirrors the controlled `items` and `columns` props into local state so the
+* board can render drag previews the parent has not committed yet.
+*/
+function useKanbanBoardState({ externalItems, columns, isDragActiveRef }) {
+	const [items, setItems] = react.default.useReducer(require_replace_state.replaceState, externalItems);
+	const [internalColumns, setInternalColumns] = react.default.useReducer(require_replace_state.replaceState, columns);
+	const itemsRef = react.default.useRef(externalItems);
+	const applyItems = react.default.useCallback((next) => {
+		itemsRef.current = next;
+		setItems(next);
+	}, []);
+	react.default.useEffect(() => {
+		if (isDragActiveRef.current) return;
+		applyItems(externalItems);
+	}, [
+		externalItems,
+		applyItems,
+		isDragActiveRef
+	]);
+	react.default.useEffect(() => {
+		setInternalColumns(columns);
+	}, [columns]);
+	return {
+		items,
+		itemsRef,
+		applyItems,
+		internalColumns,
+		setInternalColumns
+	};
+}
+
+//#endregion
+exports.useKanbanBoardState = useKanbanBoardState;

package/dist/hooks/use-kanban-board-state.js

@@ -0,0 +1,41 @@
+'use client';
+
+
+import { replaceState } from "../utils/replace-state.js";
+import React from "react";
+
+//#region src/hooks/use-kanban-board-state.ts
+/**
+* Mirrors the controlled `items` and `columns` props into local state so the
+* board can render drag previews the parent has not committed yet.
+*/
+function useKanbanBoardState({ externalItems, columns, isDragActiveRef }) {
+	const [items, setItems] = React.useReducer(replaceState, externalItems);
+	const [internalColumns, setInternalColumns] = React.useReducer(replaceState, columns);
+	const itemsRef = React.useRef(externalItems);
+	const applyItems = React.useCallback((next) => {
+		itemsRef.current = next;
+		setItems(next);
+	}, []);
+	React.useEffect(() => {
+		if (isDragActiveRef.current) return;
+		applyItems(externalItems);
+	}, [
+		externalItems,
+		applyItems,
+		isDragActiveRef
+	]);
+	React.useEffect(() => {
+		setInternalColumns(columns);
+	}, [columns]);
+	return {
+		items,
+		itemsRef,
+		applyItems,
+		internalColumns,
+		setInternalColumns
+	};
+}
+
+//#endregion
+export { useKanbanBoardState };

package/dist/hooks/use-kanban-card-drag.cjs

@@ -0,0 +1,83 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_column_sortable_id = require('../utils/column-sortable-id.cjs');
+const require_move_kanban_item = require('../utils/move-kanban-item.cjs');
+const require_apply_kanban_drop = require('../utils/apply-kanban-drop.cjs');
+const require_is_below_over_item = require('../utils/is-below-over-item.cjs');
+const require_items_order_equal = require('../utils/items-order-equal.cjs');
+const require_resolve_column_id = require('../utils/resolve-column-id.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/hooks/use-kanban-card-drag.ts
+/**
+* The card half of the board's drag state machine: cross-column moves are
+* previewed live during `onDragOver`, while same-column reordering is left to
+* the sortable transforms and committed once on `onDragEnd`.
+*/
+function useKanbanCardDrag(options) {
+	const { columnIds, itemsRef, applyItems, dragStartItemsRef, recentlyMovedToNewColumnRef, onChange } = options;
+	return {
+		handleCardDragOver: react.default.useCallback((event) => {
+			const { active, over } = event;
+			if (!over || require_column_sortable_id.isColumnSortableId(active.id)) return;
+			const overColumnId = require_resolve_column_id.resolveColumnId(over.id, columnIds, itemsRef.current);
+			const activeItem = itemsRef.current.find((item) => item.id === active.id);
+			if (overColumnId === void 0 || !activeItem) return;
+			if (activeItem.columnId === overColumnId) return;
+			recentlyMovedToNewColumnRef.current = true;
+			applyItems(require_move_kanban_item.moveKanbanItem({
+				items: itemsRef.current,
+				activeId: active.id,
+				overId: over.id,
+				targetColumnId: overColumnId,
+				insertAfter: require_is_below_over_item.isBelowOverItem(event),
+				overIsColumn: require_resolve_column_id.isColumnDroppableId(over.id, columnIds)
+			}));
+		}, [
+			applyItems,
+			columnIds,
+			itemsRef,
+			recentlyMovedToNewColumnRef
+		]),
+		handleCardDragEnd: react.default.useCallback((event) => {
+			const { active, over } = event;
+			const dragStartItems = dragStartItemsRef.current;
+			if (!over) {
+				applyItems(dragStartItems);
+				return;
+			}
+			const previousColumnId = dragStartItems.find((item) => item.id === active.id)?.columnId;
+			if (previousColumnId === void 0) return;
+			const next = require_apply_kanban_drop.applyKanbanDrop({
+				items: itemsRef.current,
+				activeId: active.id,
+				overId: over.id,
+				overColumnId: require_resolve_column_id.resolveColumnId(over.id, columnIds, itemsRef.current),
+				insertAfter: require_is_below_over_item.isBelowOverItem(event),
+				overIsColumn: require_resolve_column_id.isColumnDroppableId(over.id, columnIds)
+			});
+			applyItems(next);
+			if (!onChange || require_items_order_equal.itemsOrderEqual(next, dragStartItems)) return;
+			const movedItem = next.find((item) => item.id === active.id);
+			if (!movedItem) return;
+			onChange({
+				item: movedItem,
+				previousColumnId,
+				nextColumnId: movedItem.columnId,
+				items: next
+			});
+		}, [
+			applyItems,
+			columnIds,
+			dragStartItemsRef,
+			itemsRef,
+			onChange
+		])
+	};
+}
+
+//#endregion
+exports.useKanbanCardDrag = useKanbanCardDrag;

package/dist/hooks/use-kanban-card-drag.js

@@ -0,0 +1,81 @@
+'use client';
+
+
+import { isColumnSortableId } from "../utils/column-sortable-id.js";
+import { moveKanbanItem } from "../utils/move-kanban-item.js";
+import { applyKanbanDrop } from "../utils/apply-kanban-drop.js";
+import { isBelowOverItem } from "../utils/is-below-over-item.js";
+import { itemsOrderEqual } from "../utils/items-order-equal.js";
+import { isColumnDroppableId, resolveColumnId } from "../utils/resolve-column-id.js";
+import React from "react";
+
+//#region src/hooks/use-kanban-card-drag.ts
+/**
+* The card half of the board's drag state machine: cross-column moves are
+* previewed live during `onDragOver`, while same-column reordering is left to
+* the sortable transforms and committed once on `onDragEnd`.
+*/
+function useKanbanCardDrag(options) {
+	const { columnIds, itemsRef, applyItems, dragStartItemsRef, recentlyMovedToNewColumnRef, onChange } = options;
+	return {
+		handleCardDragOver: React.useCallback((event) => {
+			const { active, over } = event;
+			if (!over || isColumnSortableId(active.id)) return;
+			const overColumnId = resolveColumnId(over.id, columnIds, itemsRef.current);
+			const activeItem = itemsRef.current.find((item) => item.id === active.id);
+			if (overColumnId === void 0 || !activeItem) return;
+			if (activeItem.columnId === overColumnId) return;
+			recentlyMovedToNewColumnRef.current = true;
+			applyItems(moveKanbanItem({
+				items: itemsRef.current,
+				activeId: active.id,
+				overId: over.id,
+				targetColumnId: overColumnId,
+				insertAfter: isBelowOverItem(event),
+				overIsColumn: isColumnDroppableId(over.id, columnIds)
+			}));
+		}, [
+			applyItems,
+			columnIds,
+			itemsRef,
+			recentlyMovedToNewColumnRef
+		]),
+		handleCardDragEnd: React.useCallback((event) => {
+			const { active, over } = event;
+			const dragStartItems = dragStartItemsRef.current;
+			if (!over) {
+				applyItems(dragStartItems);
+				return;
+			}
+			const previousColumnId = dragStartItems.find((item) => item.id === active.id)?.columnId;
+			if (previousColumnId === void 0) return;
+			const next = applyKanbanDrop({
+				items: itemsRef.current,
+				activeId: active.id,
+				overId: over.id,
+				overColumnId: resolveColumnId(over.id, columnIds, itemsRef.current),
+				insertAfter: isBelowOverItem(event),
+				overIsColumn: isColumnDroppableId(over.id, columnIds)
+			});
+			applyItems(next);
+			if (!onChange || itemsOrderEqual(next, dragStartItems)) return;
+			const movedItem = next.find((item) => item.id === active.id);
+			if (!movedItem) return;
+			onChange({
+				item: movedItem,
+				previousColumnId,
+				nextColumnId: movedItem.columnId,
+				items: next
+			});
+		}, [
+			applyItems,
+			columnIds,
+			dragStartItemsRef,
+			itemsRef,
+			onChange
+		])
+	};
+}
+
+//#endregion
+export { useKanbanCardDrag };

package/dist/hooks/use-kanban-collision-detection.cjs

@@ -0,0 +1,70 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_column_sortable_id = require('../utils/column-sortable-id.cjs');
+let __dnd_kit_core = require("@dnd-kit/core");
+__dnd_kit_core = require_rolldown_runtime.__toESM(__dnd_kit_core);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/hooks/use-kanban-collision-detection.ts
+/**
+* Collision strategy from dnd-kit's multiple-containers example: pointer hits
+* first, falling back to rectangle intersection for keyboard drags. Hovering a
+* column resolves to the closest card inside it so placement stays stable, and
+* the previous target is reused during the reflow after a column switch.
+*
+* Rect intersection is deliberately limited to drags that have no pointer.
+* It scores the dragged card's whole rect against every column, so a pointer
+* resting outside all of them — in the gap between two columns, or below a
+* short one — can pick a neighbour whose height then changes because of the
+* preview move, which flips the winner back on the next measurement. Each flip
+* moves the card again, and the resulting drag-over/measure feedback loop ends
+* in React's "Maximum update depth exceeded". Pointer drags therefore hold the
+* previous target while the pointer is over nothing at all.
+*/
+function useKanbanCollisionDetection(options) {
+	const { columnIds, itemsRef, lastOverIdRef, recentlyMovedToNewColumnRef } = options;
+	return react.default.useCallback((args) => {
+		if (require_column_sortable_id.isColumnSortableId(args.active.id)) return (0, __dnd_kit_core.closestCenter)({
+			...args,
+			droppableContainers: args.droppableContainers.filter((container) => require_column_sortable_id.isColumnSortableId(container.id))
+		});
+		const droppableContainers = args.droppableContainers.filter((container) => !require_column_sortable_id.isColumnSortableId(container.id));
+		let collisions = (0, __dnd_kit_core.pointerWithin)({
+			...args,
+			droppableContainers
+		});
+		if (collisions.length === 0 && args.pointerCoordinates == null) collisions = (0, __dnd_kit_core.rectIntersection)({
+			...args,
+			droppableContainers
+		});
+		let overId = (0, __dnd_kit_core.getFirstCollision)(collisions, "id");
+		if (overId != null) {
+			if (columnIds.has(String(overId))) {
+				const columnCards = droppableContainers.filter((container) => {
+					if (container.id === overId) return false;
+					return itemsRef.current.find(({ id }) => id === container.id)?.columnId === overId;
+				});
+				const closestCard = (0, __dnd_kit_core.closestCenter)({
+					...args,
+					droppableContainers: columnCards
+				})[0];
+				if (closestCard) overId = closestCard.id;
+			}
+			lastOverIdRef.current = overId;
+			return [{ id: overId }];
+		}
+		if (recentlyMovedToNewColumnRef.current) lastOverIdRef.current = args.active.id;
+		return lastOverIdRef.current == null ? [] : [{ id: lastOverIdRef.current }];
+	}, [
+		columnIds,
+		itemsRef,
+		lastOverIdRef,
+		recentlyMovedToNewColumnRef
+	]);
+}
+
+//#endregion
+exports.useKanbanCollisionDetection = useKanbanCollisionDetection;

package/dist/hooks/use-kanban-collision-detection.js

@@ -0,0 +1,67 @@
+'use client';
+
+
+import { isColumnSortableId } from "../utils/column-sortable-id.js";
+import { closestCenter, getFirstCollision, pointerWithin, rectIntersection } from "@dnd-kit/core";
+import React from "react";
+
+//#region src/hooks/use-kanban-collision-detection.ts
+/**
+* Collision strategy from dnd-kit's multiple-containers example: pointer hits
+* first, falling back to rectangle intersection for keyboard drags. Hovering a
+* column resolves to the closest card inside it so placement stays stable, and
+* the previous target is reused during the reflow after a column switch.
+*
+* Rect intersection is deliberately limited to drags that have no pointer.
+* It scores the dragged card's whole rect against every column, so a pointer
+* resting outside all of them — in the gap between two columns, or below a
+* short one — can pick a neighbour whose height then changes because of the
+* preview move, which flips the winner back on the next measurement. Each flip
+* moves the card again, and the resulting drag-over/measure feedback loop ends
+* in React's "Maximum update depth exceeded". Pointer drags therefore hold the
+* previous target while the pointer is over nothing at all.
+*/
+function useKanbanCollisionDetection(options) {
+	const { columnIds, itemsRef, lastOverIdRef, recentlyMovedToNewColumnRef } = options;
+	return React.useCallback((args) => {
+		if (isColumnSortableId(args.active.id)) return closestCenter({
+			...args,
+			droppableContainers: args.droppableContainers.filter((container) => isColumnSortableId(container.id))
+		});
+		const droppableContainers = args.droppableContainers.filter((container) => !isColumnSortableId(container.id));
+		let collisions = pointerWithin({
+			...args,
+			droppableContainers
+		});
+		if (collisions.length === 0 && args.pointerCoordinates == null) collisions = rectIntersection({
+			...args,
+			droppableContainers
+		});
+		let overId = getFirstCollision(collisions, "id");
+		if (overId != null) {
+			if (columnIds.has(String(overId))) {
+				const columnCards = droppableContainers.filter((container) => {
+					if (container.id === overId) return false;
+					return itemsRef.current.find(({ id }) => id === container.id)?.columnId === overId;
+				});
+				const closestCard = closestCenter({
+					...args,
+					droppableContainers: columnCards
+				})[0];
+				if (closestCard) overId = closestCard.id;
+			}
+			lastOverIdRef.current = overId;
+			return [{ id: overId }];
+		}
+		if (recentlyMovedToNewColumnRef.current) lastOverIdRef.current = args.active.id;
+		return lastOverIdRef.current == null ? [] : [{ id: lastOverIdRef.current }];
+	}, [
+		columnIds,
+		itemsRef,
+		lastOverIdRef,
+		recentlyMovedToNewColumnRef
+	]);
+}
+
+//#endregion
+export { useKanbanCollisionDetection };

package/dist/hooks/use-kanban-column-reorder.cjs

@@ -0,0 +1,31 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_column_sortable_id = require('../utils/column-sortable-id.cjs');
+let __dnd_kit_sortable = require("@dnd-kit/sortable");
+__dnd_kit_sortable = require_rolldown_runtime.__toESM(__dnd_kit_sortable);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/hooks/use-kanban-column-reorder.ts
+/** Commits a column drag, ignoring drops that do not land on another column. */
+function useKanbanColumnReorder({ internalColumns, setInternalColumns, onColumnChange }) {
+	return react.default.useCallback(({ active, over }) => {
+		if (!over || !require_column_sortable_id.isColumnSortableId(over.id) || active.id === over.id) return;
+		const indexOf = (sortableId) => internalColumns.findIndex((column) => column.id === require_column_sortable_id.extractColumnId(sortableId));
+		const oldIndex = indexOf(active.id);
+		const newIndex = indexOf(over.id);
+		if (oldIndex === -1 || newIndex === -1) return;
+		const next = (0, __dnd_kit_sortable.arrayMove)(internalColumns, oldIndex, newIndex);
+		setInternalColumns(next);
+		onColumnChange?.(next);
+	}, [
+		internalColumns,
+		onColumnChange,
+		setInternalColumns
+	]);
+}
+
+//#endregion
+exports.useKanbanColumnReorder = useKanbanColumnReorder;

package/dist/hooks/use-kanban-column-reorder.js

@@ -0,0 +1,28 @@
+'use client';
+
+
+import { extractColumnId, isColumnSortableId } from "../utils/column-sortable-id.js";
+import { arrayMove } from "@dnd-kit/sortable";
+import React from "react";
+
+//#region src/hooks/use-kanban-column-reorder.ts
+/** Commits a column drag, ignoring drops that do not land on another column. */
+function useKanbanColumnReorder({ internalColumns, setInternalColumns, onColumnChange }) {
+	return React.useCallback(({ active, over }) => {
+		if (!over || !isColumnSortableId(over.id) || active.id === over.id) return;
+		const indexOf = (sortableId) => internalColumns.findIndex((column) => column.id === extractColumnId(sortableId));
+		const oldIndex = indexOf(active.id);
+		const newIndex = indexOf(over.id);
+		if (oldIndex === -1 || newIndex === -1) return;
+		const next = arrayMove(internalColumns, oldIndex, newIndex);
+		setInternalColumns(next);
+		onColumnChange?.(next);
+	}, [
+		internalColumns,
+		onColumnChange,
+		setInternalColumns
+	]);
+}
+
+//#endregion
+export { useKanbanColumnReorder };