@pixpilot/shadcn-kanban 1.0.0 → 1.1.0

package/README.md

@@ -32,14 +32,31 @@ assign `event.items` back to your state and the board settles.
 
 ## Documentation
 
-| Document                                             | Covers                                                         |
-| ---------------------------------------------------- | -------------------------------------------------------------- |
-| [docs/README.md](./docs/README.md)                   | Overview, layout contract and generics                         |
-| [docs/api.md](./docs/api.md)                         | Every prop, type and callback                                  |
-| [docs/drag-and-drop.md](./docs/drag-and-drop.md)     | How the drag state machine works, and why it is built this way |
-| [docs/filters.md](./docs/filters.md)                 | Per-column filters, board-side and parent-side                 |
-| [docs/infinite-scroll.md](./docs/infinite-scroll.md) | Loading a column's items a page at a time                      |
-| [docs/virtualization.md](./docs/virtualization.md)   | Mounting only the cards near a column's scroll window          |
+| Document                                               | Covers                                                         |
+| ------------------------------------------------------ | -------------------------------------------------------------- |
+| [docs/README.md](./docs/README.md)                     | Overview, layout contract and generics                         |
+| [docs/api.md](./docs/api.md)                           | Every prop, type and callback                                  |
+| [docs/drag-and-drop.md](./docs/drag-and-drop.md)       | How the drag state machine works, and why it is built this way |
+| [docs/filters.md](./docs/filters.md)                   | Per-column filters, board-side and parent-side                 |
+| [docs/infinite-scroll.md](./docs/infinite-scroll.md)   | Loading a column's items a page at a time                      |
+| [docs/virtualization.md](./docs/virtualization.md)     | Mounting only the cards near a column's scroll window          |
+| [docs/touch-and-mobile.md](./docs/touch-and-mobile.md) | Hold-to-drag on touch, and columns as a swipeable slider       |
+
+## On a phone
+
+Out of the box, and without any prop:
+
+- **Swiping wins over dragging.** A card only becomes draggable after the finger
+  has rested on it for 250 ms, and rings while it is held. Anything shorter
+  stays a scroll, so reaching for the next column no longer drags a card along
+  with it.
+- **Columns behave like a slider.** Below the `sm` breakpoint each column is a
+  CSS scroll-snap child roughly a screen wide, so a swipe moves exactly one
+  column and settles with the platform's own momentum.
+
+Both are tunable — `touch` and `columnSnap` — and both are off the table for
+mouse and keyboard, which are unchanged. See
+[docs/touch-and-mobile.md](./docs/touch-and-mobile.md).
 
 ## License
 

package/dist/KanbanBoard.cjs

@@ -8,6 +8,7 @@ const require_use_kanban_drag = require('./hooks/use-kanban-drag.cjs');
 const require_use_kanban_filters = require('./hooks/use-kanban-filters.cjs');
 const require_KanbanColumn = require('./KanbanColumn.cjs');
 const require_KanbanDragOverlay = require('./KanbanDragOverlay.cjs');
+const require_resolve_column_snap = require('./utils/resolve-column-snap.cjs');
 let __dnd_kit_core = require("@dnd-kit/core");
 __dnd_kit_core = require_rolldown_runtime.__toESM(__dnd_kit_core);
 let __dnd_kit_sortable = require("@dnd-kit/sortable");
@@ -47,7 +48,7 @@ function useScrollOnlyFeatureWarning(feature, consequence, requested, columnOver
 * column definitions and calls `onChange` whenever an item is moved
 * between (or within) columns.
 */
-function KanbanBoard({ items: externalItems, columns, onChange, renderItem, renderColumnHeader, className, style, columnClassName, getColumnProps, hideColumnHeaders = false, itemClassName, columnOverflow = "scroll", allowAddColumn, onAddColumn, onColumnChange, filters, onFilterChange, infiniteScroll, virtualization, dragDisabled = false }) {
+function KanbanBoard({ items: externalItems, columns, onChange, renderItem, renderColumnHeader, className, style, columnClassName, getColumnProps, hideColumnHeaders = false, itemClassName, columnOverflow = "scroll", allowAddColumn, onAddColumn, onColumnChange, filters, onFilterChange, infiniteScroll, virtualization, dragDisabled = false, touch, columnSnap = true }) {
 	useScrollOnlyFeatureWarning("infiniteScroll", "The sentinel will not be rendered.", Boolean(infiniteScroll), columnOverflow);
 	useScrollOnlyFeatureWarning("virtualization", "Every card will be rendered.", Boolean(virtualization), columnOverflow);
 	const activeInfiniteScroll = columnOverflow === "scroll" ? infiniteScroll : void 0;
@@ -56,8 +57,10 @@ function KanbanBoard({ items: externalItems, columns, onChange, renderItem, rend
 		externalItems,
 		columns,
 		onChange,
-		onColumnChange
+		onColumnChange,
+		touch
 	});
+	const snap = require_resolve_column_snap.resolveColumnSnap(columnSnap, activeId !== null);
 	const { activeFilters, resolveFilters, handleToggleFilter, handleClearFilters } = require_use_kanban_filters.useKanbanFilters({
 		filters,
 		onFilterChange
@@ -98,14 +101,18 @@ function KanbanBoard({ items: externalItems, columns, onChange, renderItem, rend
 			strategy: __dnd_kit_sortable.horizontalListSortingStrategy,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				"data-testid": "kanban-board",
-				className: (0, __pixpilot_shadcn_ui.cn)("relative flex gap-4 overflow-x-auto overscroll-x-contain p-2", columnOverflow === "scroll" ? "h-full min-h-0" : "min-h-full", className),
-				style,
+				"data-snapping": snap.enabled ? "" : void 0,
+				className: (0, __pixpilot_shadcn_ui.cn)("relative flex gap-4 overflow-x-auto overscroll-x-contain p-2", columnOverflow === "scroll" ? "h-full min-h-0" : "min-h-full", snap.boardClassName, className),
+				style: {
+					...snap.style,
+					...style
+				},
 				children: [columnItemsMap.map(({ column, colItems, colFilters, activeIds }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_KanbanColumn.KanbanColumn, {
 					column,
 					items: colItems,
 					renderItem,
 					renderColumnHeader,
-					columnClassName,
+					columnClassName: (0, __pixpilot_shadcn_ui.cn)(snap.columnClassName, columnClassName),
 					containerProps: getColumnProps?.(column),
 					hideHeader: hideColumnHeaders,
 					itemClassName,
@@ -116,10 +123,14 @@ function KanbanBoard({ items: externalItems, columns, onChange, renderItem, rend
 					infiniteScroll: activeInfiniteScroll,
 					virtualization: activeVirtualization,
 					dragDisabled,
+					touch,
 					activeItemId: activeItem?.id ?? null,
 					onToggleFilter: (filterId) => handleToggleFilter(column, filterId),
 					onClearFilters: () => handleClearFilters(column)
-				}, column.id)), allowAddColumn && onAddColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddColumnButton.AddColumnButton, { onAdd: onAddColumn }) : null]
+				}, column.id)), allowAddColumn && onAddColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddColumnButton.AddColumnButton, {
+					onAdd: onAddColumn,
+					className: snap.columnClassName
+				}) : null]
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_KanbanDragOverlay.KanbanDragOverlay, {
 			activeItem,

package/dist/KanbanBoard.d.cts

@@ -30,7 +30,9 @@ declare function KanbanBoard<T = Record<string, unknown>>({
   onFilterChange,
   infiniteScroll,
   virtualization,
-  dragDisabled
+  dragDisabled,
+  touch,
+  columnSnap
 }: KanbanBoardProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { KanbanBoard };

package/dist/KanbanBoard.d.ts

@@ -30,7 +30,9 @@ declare function KanbanBoard<T = Record<string, unknown>>({
   onFilterChange,
   infiniteScroll,
   virtualization,
-  dragDisabled
+  dragDisabled,
+  touch,
+  columnSnap
 }: KanbanBoardProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { KanbanBoard };

package/dist/KanbanBoard.js

@@ -7,6 +7,7 @@ import { useKanbanDrag } from "./hooks/use-kanban-drag.js";
 import { useKanbanFilters } from "./hooks/use-kanban-filters.js";
 import { KanbanColumn } from "./KanbanColumn.js";
 import { KanbanDragOverlay } from "./KanbanDragOverlay.js";
+import { resolveColumnSnap } from "./utils/resolve-column-snap.js";
 import { DndContext, MeasuringStrategy } from "@dnd-kit/core";
 import { SortableContext, horizontalListSortingStrategy } from "@dnd-kit/sortable";
 import { cn } from "@pixpilot/shadcn-ui";
@@ -41,7 +42,7 @@ function useScrollOnlyFeatureWarning(feature, consequence, requested, columnOver
 * column definitions and calls `onChange` whenever an item is moved
 * between (or within) columns.
 */
-function KanbanBoard({ items: externalItems, columns, onChange, renderItem, renderColumnHeader, className, style, columnClassName, getColumnProps, hideColumnHeaders = false, itemClassName, columnOverflow = "scroll", allowAddColumn, onAddColumn, onColumnChange, filters, onFilterChange, infiniteScroll, virtualization, dragDisabled = false }) {
+function KanbanBoard({ items: externalItems, columns, onChange, renderItem, renderColumnHeader, className, style, columnClassName, getColumnProps, hideColumnHeaders = false, itemClassName, columnOverflow = "scroll", allowAddColumn, onAddColumn, onColumnChange, filters, onFilterChange, infiniteScroll, virtualization, dragDisabled = false, touch, columnSnap = true }) {
 	useScrollOnlyFeatureWarning("infiniteScroll", "The sentinel will not be rendered.", Boolean(infiniteScroll), columnOverflow);
 	useScrollOnlyFeatureWarning("virtualization", "Every card will be rendered.", Boolean(virtualization), columnOverflow);
 	const activeInfiniteScroll = columnOverflow === "scroll" ? infiniteScroll : void 0;
@@ -50,8 +51,10 @@ function KanbanBoard({ items: externalItems, columns, onChange, renderItem, rend
 		externalItems,
 		columns,
 		onChange,
-		onColumnChange
+		onColumnChange,
+		touch
 	});
+	const snap = resolveColumnSnap(columnSnap, activeId !== null);
 	const { activeFilters, resolveFilters, handleToggleFilter, handleClearFilters } = useKanbanFilters({
 		filters,
 		onFilterChange
@@ -92,14 +95,18 @@ function KanbanBoard({ items: externalItems, columns, onChange, renderItem, rend
 			strategy: horizontalListSortingStrategy,
 			children: /* @__PURE__ */ jsxs("div", {
 				"data-testid": "kanban-board",
-				className: cn("relative flex gap-4 overflow-x-auto overscroll-x-contain p-2", columnOverflow === "scroll" ? "h-full min-h-0" : "min-h-full", className),
-				style,
+				"data-snapping": snap.enabled ? "" : void 0,
+				className: cn("relative flex gap-4 overflow-x-auto overscroll-x-contain p-2", columnOverflow === "scroll" ? "h-full min-h-0" : "min-h-full", snap.boardClassName, className),
+				style: {
+					...snap.style,
+					...style
+				},
 				children: [columnItemsMap.map(({ column, colItems, colFilters, activeIds }) => /* @__PURE__ */ jsx(KanbanColumn, {
 					column,
 					items: colItems,
 					renderItem,
 					renderColumnHeader,
-					columnClassName,
+					columnClassName: cn(snap.columnClassName, columnClassName),
 					containerProps: getColumnProps?.(column),
 					hideHeader: hideColumnHeaders,
 					itemClassName,
@@ -110,10 +117,14 @@ function KanbanBoard({ items: externalItems, columns, onChange, renderItem, rend
 					infiniteScroll: activeInfiniteScroll,
 					virtualization: activeVirtualization,
 					dragDisabled,
+					touch,
 					activeItemId: activeItem?.id ?? null,
 					onToggleFilter: (filterId) => handleToggleFilter(column, filterId),
 					onClearFilters: () => handleClearFilters(column)
-				}, column.id)), allowAddColumn && onAddColumn ? /* @__PURE__ */ jsx(AddColumnButton, { onAdd: onAddColumn }) : null]
+				}, column.id)), allowAddColumn && onAddColumn ? /* @__PURE__ */ jsx(AddColumnButton, {
+					onAdd: onAddColumn,
+					className: snap.columnClassName
+				}) : null]
 			})
 		}), /* @__PURE__ */ jsx(KanbanDragOverlay, {
 			activeItem,

package/dist/KanbanColumn.cjs

@@ -3,6 +3,7 @@
 
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
 const require_column_sortable_id = require('./utils/column-sortable-id.cjs');
+const require_kanban_touch_defaults = require('./utils/kanban-touch-defaults.cjs');
 const require_ColumnFilterButton = require('./ColumnFilterButton.cjs');
 const require_InfiniteScrollSentinel = require('./infinite-scroll/InfiniteScrollSentinel.cjs');
 const require_KanbanColumnCards = require('./KanbanColumnCards.cjs');
@@ -23,7 +24,7 @@ let __dnd_kit_utilities = require("@dnd-kit/utilities");
 __dnd_kit_utilities = require_rolldown_runtime.__toESM(__dnd_kit_utilities);
 
 //#region src/KanbanColumn.tsx
-function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnClassName, itemClassName, containerProps, hideHeader = false, sortable = false, filters, activeFilterIds, columnOverflow, infiniteScroll, virtualization, dragDisabled = false, activeItemId = null, onToggleFilter, onClearFilters }) {
+function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnClassName, itemClassName, containerProps, hideHeader = false, sortable = false, filters, activeFilterIds, columnOverflow, infiniteScroll, virtualization, dragDisabled = false, touch, activeItemId = null, onToggleFilter, onClearFilters }) {
 	const { className: containerClassName, style: containerStyle,...containerAttributes } = containerProps ?? {};
 	const filterButton = filters && filters.length > 0 && onToggleFilter && onClearFilters ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColumnFilterButton.ColumnFilterButton, {
 		filters,
@@ -58,6 +59,7 @@ function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnCla
 	}, [setDroppableRef]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: setSortableRef,
+		"data-testid": `kanban-column-${column.id}`,
 		style: {
 			...containerStyle,
 			...style
@@ -70,7 +72,9 @@ function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnCla
 			children: [
 				sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
-					className: "text-muted-foreground hover:text-foreground cursor-grab touch-none active:cursor-grabbing",
+					"aria-label": `Reorder ${column.title} column`,
+					className: "text-muted-foreground hover:text-foreground -m-1 cursor-grab touch-none p-1 active:cursor-grabbing",
+					...require_kanban_touch_defaults.dragHandleProps,
 					...listeners,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.GripVertical, { className: "h-4 w-4" })
 				}) : null,
@@ -86,7 +90,9 @@ function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnCla
 				className: "flex items-center gap-1",
 				children: [sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
-					className: "text-muted-foreground hover:text-foreground cursor-grab touch-none active:cursor-grabbing",
+					"aria-label": `Reorder ${column.title} column`,
+					className: "text-muted-foreground hover:text-foreground -m-1 cursor-grab touch-none p-1 active:cursor-grabbing",
+					...require_kanban_touch_defaults.dragHandleProps,
 					...listeners,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.GripVertical, { className: "h-4 w-4" })
 				}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
@@ -115,13 +121,15 @@ function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnCla
 					scroller,
 					activeItemId,
 					options: virtualization,
-					dragDisabled
+					dragDisabled,
+					touch
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_KanbanColumnCards.KanbanColumnCards, {
 					column,
 					items,
 					renderItem,
 					itemClassName,
-					dragDisabled
+					dragDisabled,
+					touch
 				}), infiniteScroll ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InfiniteScrollSentinel.InfiniteScrollSentinel, {
 					root: scroller,
 					distance: infiniteScroll.distance,

package/dist/KanbanColumn.js

@@ -2,6 +2,7 @@
 
 
 import { toColumnSortableId } from "./utils/column-sortable-id.js";
+import { dragHandleProps } from "./utils/kanban-touch-defaults.js";
 import { ColumnFilterButton } from "./ColumnFilterButton.js";
 import { InfiniteScrollSentinel } from "./infinite-scroll/InfiniteScrollSentinel.js";
 import { KanbanColumnCards } from "./KanbanColumnCards.js";
@@ -15,7 +16,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CSS } from "@dnd-kit/utilities";
 
 //#region src/KanbanColumn.tsx
-function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnClassName, itemClassName, containerProps, hideHeader = false, sortable = false, filters, activeFilterIds, columnOverflow, infiniteScroll, virtualization, dragDisabled = false, activeItemId = null, onToggleFilter, onClearFilters }) {
+function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnClassName, itemClassName, containerProps, hideHeader = false, sortable = false, filters, activeFilterIds, columnOverflow, infiniteScroll, virtualization, dragDisabled = false, touch, activeItemId = null, onToggleFilter, onClearFilters }) {
 	const { className: containerClassName, style: containerStyle,...containerAttributes } = containerProps ?? {};
 	const filterButton = filters && filters.length > 0 && onToggleFilter && onClearFilters ? /* @__PURE__ */ jsx(ColumnFilterButton, {
 		filters,
@@ -50,6 +51,7 @@ function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnCla
 	}, [setDroppableRef]);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: setSortableRef,
+		"data-testid": `kanban-column-${column.id}`,
 		style: {
 			...containerStyle,
 			...style
@@ -62,7 +64,9 @@ function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnCla
 			children: [
 				sortable ? /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "text-muted-foreground hover:text-foreground cursor-grab touch-none active:cursor-grabbing",
+					"aria-label": `Reorder ${column.title} column`,
+					className: "text-muted-foreground hover:text-foreground -m-1 cursor-grab touch-none p-1 active:cursor-grabbing",
+					...dragHandleProps,
 					...listeners,
 					children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
 				}) : null,
@@ -78,7 +82,9 @@ function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnCla
 				className: "flex items-center gap-1",
 				children: [sortable ? /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "text-muted-foreground hover:text-foreground cursor-grab touch-none active:cursor-grabbing",
+					"aria-label": `Reorder ${column.title} column`,
+					className: "text-muted-foreground hover:text-foreground -m-1 cursor-grab touch-none p-1 active:cursor-grabbing",
+					...dragHandleProps,
 					...listeners,
 					children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
 				}) : null, /* @__PURE__ */ jsx("h3", {
@@ -107,13 +113,15 @@ function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnCla
 					scroller,
 					activeItemId,
 					options: virtualization,
-					dragDisabled
+					dragDisabled,
+					touch
 				}) : /* @__PURE__ */ jsx(KanbanColumnCards, {
 					column,
 					items,
 					renderItem,
 					itemClassName,
-					dragDisabled
+					dragDisabled,
+					touch
 				}), infiniteScroll ? /* @__PURE__ */ jsx(InfiniteScrollSentinel, {
 					root: scroller,
 					distance: infiniteScroll.distance,

package/dist/KanbanColumnCards.cjs

@@ -11,13 +11,14 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 * The card list of a column, rendered in full. Each card is a flex child of
 * the column's scroller, so spacing comes from the scroller's `gap`.
 */
-function KanbanColumnCards({ column, items, renderItem, itemClassName, dragDisabled = false }) {
+function KanbanColumnCards({ column, items, renderItem, itemClassName, dragDisabled = false, touch }) {
 	return items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_KanbanItem.KanbanItem, {
 		item,
 		column,
 		renderItem,
 		className: itemClassName,
-		dragDisabled
+		dragDisabled,
+		touch
 	}, item.id));
 }
 

package/dist/KanbanColumnCards.js

@@ -9,13 +9,14 @@ import { jsx } from "react/jsx-runtime";
 * The card list of a column, rendered in full. Each card is a flex child of
 * the column's scroller, so spacing comes from the scroller's `gap`.
 */
-function KanbanColumnCards({ column, items, renderItem, itemClassName, dragDisabled = false }) {
+function KanbanColumnCards({ column, items, renderItem, itemClassName, dragDisabled = false, touch }) {
 	return items.map((item) => /* @__PURE__ */ jsx(KanbanItem, {
 		item,
 		column,
 		renderItem,
 		className: itemClassName,
-		dragDisabled
+		dragDisabled,
+		touch
 	}, item.id));
 }
 

package/dist/KanbanItem.cjs

@@ -2,6 +2,7 @@
 
 
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_use_kanban_press_feedback = require('./hooks/use-kanban-press-feedback.cjs');
 let __dnd_kit_sortable = require("@dnd-kit/sortable");
 __dnd_kit_sortable = require_rolldown_runtime.__toESM(__dnd_kit_sortable);
 let __pixpilot_shadcn_ui = require("@pixpilot/shadcn-ui");
@@ -21,11 +22,24 @@ function KanbanItemContent({ item, column, renderItem }) {
 	});
 }
 const MemoizedKanbanItemContent = react.default.memo(KanbanItemContent);
+/** Runs the sortable's own touch listener first, then the feedback one. */
+function chainTouchHandlers(listeners, pressHandlers) {
+	const chained = {};
+	for (const key of Object.keys(pressHandlers)) {
+		const existing = listeners?.[key];
+		const added = pressHandlers[key];
+		chained[key] = (event) => {
+			existing?.(event);
+			added(event);
+		};
+	}
+	return chained;
+}
 /**
 * A single draggable item inside a Kanban column.
 * Wraps `useSortable` from `@dnd-kit/sortable`.
 */
-function KanbanItem({ item, column, renderItem, className, dragDisabled = false }) {
+function KanbanItem({ item, column, renderItem, className, dragDisabled = false, touch }) {
 	const sortableData = react.default.useMemo(() => ({
 		type: "item",
 		item
@@ -35,6 +49,12 @@ function KanbanItem({ item, column, renderItem, className, dragDisabled = false
 		data: sortableData,
 		disabled: dragDisabled
 	});
+	const { isPressing, handlers: pressHandlers } = require_use_kanban_press_feedback.useKanbanPressFeedback({
+		delay: touch?.dragActivationDelay,
+		tolerance: touch?.dragActivationTolerance,
+		disabled: dragDisabled || touch?.pressFeedback === false
+	});
+	const touchHandlers = react.default.useMemo(() => chainTouchHandlers(listeners, pressHandlers), [listeners, pressHandlers]);
 	const style = {
 		transform: __dnd_kit_utilities.CSS.Transform.toString(transform),
 		transition: transition ?? void 0
@@ -42,10 +62,12 @@ function KanbanItem({ item, column, renderItem, className, dragDisabled = false
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: setNodeRef,
 		"data-testid": `kanban-item-${item.id}`,
+		"data-pressing": isPressing ? "" : void 0,
 		style,
-		className: (0, __pixpilot_shadcn_ui.cn)("bg-background touch-none rounded-md border p-3 shadow-sm transition-shadow", "hover:shadow-md", dragDisabled ? "cursor-default" : "cursor-grab active:cursor-grabbing", isDragging && "z-50 opacity-50 shadow-lg", className),
+		className: (0, __pixpilot_shadcn_ui.cn)("bg-background touch-manipulation rounded-md border p-3 shadow-sm select-none", "[-webkit-touch-callout:none]", "transition-[box-shadow,scale] hover:shadow-md", dragDisabled ? "cursor-default" : "cursor-grab active:cursor-grabbing", isPressing && "ring-primary/40 scale-[1.02] shadow-md ring-2", isDragging && "z-50 opacity-50 shadow-lg", className),
 		...attributes,
 		...listeners,
+		...touchHandlers,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedKanbanItemContent, {
 			item,
 			column,

package/dist/KanbanItem.js

@@ -1,6 +1,7 @@
 'use client';
 
 
+import { useKanbanPressFeedback } from "./hooks/use-kanban-press-feedback.js";
 import { useSortable } from "@dnd-kit/sortable";
 import { cn } from "@pixpilot/shadcn-ui";
 import React from "react";
@@ -15,11 +16,24 @@ function KanbanItemContent({ item, column, renderItem }) {
 	});
 }
 const MemoizedKanbanItemContent = React.memo(KanbanItemContent);
+/** Runs the sortable's own touch listener first, then the feedback one. */
+function chainTouchHandlers(listeners, pressHandlers) {
+	const chained = {};
+	for (const key of Object.keys(pressHandlers)) {
+		const existing = listeners?.[key];
+		const added = pressHandlers[key];
+		chained[key] = (event) => {
+			existing?.(event);
+			added(event);
+		};
+	}
+	return chained;
+}
 /**
 * A single draggable item inside a Kanban column.
 * Wraps `useSortable` from `@dnd-kit/sortable`.
 */
-function KanbanItem({ item, column, renderItem, className, dragDisabled = false }) {
+function KanbanItem({ item, column, renderItem, className, dragDisabled = false, touch }) {
 	const sortableData = React.useMemo(() => ({
 		type: "item",
 		item
@@ -29,6 +43,12 @@ function KanbanItem({ item, column, renderItem, className, dragDisabled = false
 		data: sortableData,
 		disabled: dragDisabled
 	});
+	const { isPressing, handlers: pressHandlers } = useKanbanPressFeedback({
+		delay: touch?.dragActivationDelay,
+		tolerance: touch?.dragActivationTolerance,
+		disabled: dragDisabled || touch?.pressFeedback === false
+	});
+	const touchHandlers = React.useMemo(() => chainTouchHandlers(listeners, pressHandlers), [listeners, pressHandlers]);
 	const style = {
 		transform: CSS.Transform.toString(transform),
 		transition: transition ?? void 0
@@ -36,10 +56,12 @@ function KanbanItem({ item, column, renderItem, className, dragDisabled = false
 	return /* @__PURE__ */ jsx("div", {
 		ref: setNodeRef,
 		"data-testid": `kanban-item-${item.id}`,
+		"data-pressing": isPressing ? "" : void 0,
 		style,
-		className: cn("bg-background touch-none rounded-md border p-3 shadow-sm transition-shadow", "hover:shadow-md", dragDisabled ? "cursor-default" : "cursor-grab active:cursor-grabbing", isDragging && "z-50 opacity-50 shadow-lg", className),
+		className: cn("bg-background touch-manipulation rounded-md border p-3 shadow-sm select-none", "[-webkit-touch-callout:none]", "transition-[box-shadow,scale] hover:shadow-md", dragDisabled ? "cursor-default" : "cursor-grab active:cursor-grabbing", isPressing && "ring-primary/40 scale-[1.02] shadow-md ring-2", isDragging && "z-50 opacity-50 shadow-lg", className),
 		...attributes,
 		...listeners,
+		...touchHandlers,
 		children: /* @__PURE__ */ jsx(MemoizedKanbanItemContent, {
 			item,
 			column,

package/dist/KanbanVirtualColumnCards.cjs

@@ -24,7 +24,7 @@ const DEFAULT_GAP = 8;
 * 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 }) {
+function KanbanVirtualColumnCards({ column, items, renderItem, itemClassName, scroller, activeItemId, options, dragDisabled = false, touch }) {
 	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) => {
@@ -59,7 +59,8 @@ function KanbanVirtualColumnCards({ column, items, renderItem, itemClassName, sc
 					column,
 					renderItem,
 					className: itemClassName,
-					dragDisabled
+					dragDisabled,
+					touch
 				})
 			}, virtualItem.key);
 		})

package/dist/KanbanVirtualColumnCards.js

@@ -20,7 +20,7 @@ const DEFAULT_GAP = 8;
 * 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 }) {
+function KanbanVirtualColumnCards({ column, items, renderItem, itemClassName, scroller, activeItemId, options, dragDisabled = false, touch }) {
 	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) => {
@@ -55,7 +55,8 @@ function KanbanVirtualColumnCards({ column, items, renderItem, itemClassName, sc
 					column,
 					renderItem,
 					className: itemClassName,
-					dragDisabled
+					dragDisabled,
+					touch
 				})
 			}, virtualItem.key);
 		})

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

@@ -4,6 +4,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_column_sortable_id = require('../utils/column-sortable-id.cjs');
 const require_kanban_keyboard_coordinates = require('../utils/kanban-keyboard-coordinates.cjs');
+const require_kanban_touch_defaults = require('../utils/kanban-touch-defaults.cjs');
 const require_use_kanban_board_state = require('./use-kanban-board-state.cjs');
 const require_use_kanban_card_drag = require('./use-kanban-card-drag.cjs');
 const require_use_kanban_collision_detection = require('./use-kanban-collision-detection.cjs');
@@ -14,13 +15,22 @@ let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 
 //#region src/hooks/use-kanban-drag.ts
-const POINTER_ACTIVATION_DISTANCE = 5;
+const MOUSE_ACTIVATION_DISTANCE = 5;
+/**
+* An explicit drag handle is already an unambiguous gesture, so it skips the
+* hold and picks up on contact. Only cards — which share their hit area with
+* the board's own scrolling — have to earn the drag.
+*/
+function isOnDragHandle(event) {
+	const { target } = event;
+	return target instanceof Element && target.closest(require_kanban_touch_defaults.DRAG_HANDLE_SELECTOR) !== null;
+}
 /**
 * Drag-and-drop state machine for the Kanban board, following dnd-kit's
 * multiple-containers pattern. Owns the shared drag state and routes each
 * event to either the card handlers or the column reorder handler.
 */
-function useKanbanDrag({ externalItems, columns, onChange, onColumnChange }) {
+function useKanbanDrag({ externalItems, columns, onChange, onColumnChange, touch }) {
 	const [activeId, setActiveId] = react.default.useState(null);
 	const isDragActiveRef = react.default.useRef(false);
 	const dragStartItemsRef = react.default.useRef(externalItems);
@@ -38,7 +48,13 @@ function useKanbanDrag({ externalItems, columns, onChange, onColumnChange }) {
 		return () => cancelAnimationFrame(frame);
 	}, [items]);
 	const columnIds = react.default.useMemo(() => new Set(internalColumns.map((column) => column.id)), [internalColumns]);
-	const sensors = (0, __dnd_kit_core.useSensors)((0, __dnd_kit_core.useSensor)(__dnd_kit_core.PointerSensor, { activationConstraint: { distance: POINTER_ACTIVATION_DISTANCE } }), (0, __dnd_kit_core.useSensor)(__dnd_kit_core.KeyboardSensor, { coordinateGetter: require_kanban_keyboard_coordinates.kanbanKeyboardCoordinates }));
+	const sensors = (0, __dnd_kit_core.useSensors)((0, __dnd_kit_core.useSensor)(__dnd_kit_core.MouseSensor, { activationConstraint: { distance: MOUSE_ACTIVATION_DISTANCE } }), (0, __dnd_kit_core.useSensor)(__dnd_kit_core.TouchSensor, {
+		activationConstraint: {
+			delay: touch?.dragActivationDelay ?? require_kanban_touch_defaults.TOUCH_ACTIVATION_DELAY,
+			tolerance: touch?.dragActivationTolerance ?? require_kanban_touch_defaults.TOUCH_ACTIVATION_TOLERANCE
+		},
+		bypassActivationConstraint: ({ event }) => isOnDragHandle(event)
+	}), (0, __dnd_kit_core.useSensor)(__dnd_kit_core.KeyboardSensor, { coordinateGetter: require_kanban_keyboard_coordinates.kanbanKeyboardCoordinates }));
 	const collisionDetection = require_use_kanban_collision_detection.useKanbanCollisionDetection({
 		columnIds,
 		itemsRef,

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

@@ -3,21 +3,31 @@
 
 import { isColumnSortableId } from "../utils/column-sortable-id.js";
 import { kanbanKeyboardCoordinates } from "../utils/kanban-keyboard-coordinates.js";
+import { DRAG_HANDLE_SELECTOR, TOUCH_ACTIVATION_DELAY, TOUCH_ACTIVATION_TOLERANCE } from "../utils/kanban-touch-defaults.js";
 import { useKanbanBoardState } from "./use-kanban-board-state.js";
 import { useKanbanCardDrag } from "./use-kanban-card-drag.js";
 import { useKanbanCollisionDetection } from "./use-kanban-collision-detection.js";
 import { useKanbanColumnReorder } from "./use-kanban-column-reorder.js";
-import { KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 import React from "react";
 
 //#region src/hooks/use-kanban-drag.ts
-const POINTER_ACTIVATION_DISTANCE = 5;
+const MOUSE_ACTIVATION_DISTANCE = 5;
+/**
+* An explicit drag handle is already an unambiguous gesture, so it skips the
+* hold and picks up on contact. Only cards — which share their hit area with
+* the board's own scrolling — have to earn the drag.
+*/
+function isOnDragHandle(event) {
+	const { target } = event;
+	return target instanceof Element && target.closest(DRAG_HANDLE_SELECTOR) !== null;
+}
 /**
 * Drag-and-drop state machine for the Kanban board, following dnd-kit's
 * multiple-containers pattern. Owns the shared drag state and routes each
 * event to either the card handlers or the column reorder handler.
 */
-function useKanbanDrag({ externalItems, columns, onChange, onColumnChange }) {
+function useKanbanDrag({ externalItems, columns, onChange, onColumnChange, touch }) {
 	const [activeId, setActiveId] = React.useState(null);
 	const isDragActiveRef = React.useRef(false);
 	const dragStartItemsRef = React.useRef(externalItems);
@@ -35,7 +45,13 @@ function useKanbanDrag({ externalItems, columns, onChange, onColumnChange }) {
 		return () => cancelAnimationFrame(frame);
 	}, [items]);
 	const columnIds = React.useMemo(() => new Set(internalColumns.map((column) => column.id)), [internalColumns]);
-	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: POINTER_ACTIVATION_DISTANCE } }), useSensor(KeyboardSensor, { coordinateGetter: kanbanKeyboardCoordinates }));
+	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: MOUSE_ACTIVATION_DISTANCE } }), useSensor(TouchSensor, {
+		activationConstraint: {
+			delay: touch?.dragActivationDelay ?? TOUCH_ACTIVATION_DELAY,
+			tolerance: touch?.dragActivationTolerance ?? TOUCH_ACTIVATION_TOLERANCE
+		},
+		bypassActivationConstraint: ({ event }) => isOnDragHandle(event)
+	}), useSensor(KeyboardSensor, { coordinateGetter: kanbanKeyboardCoordinates }));
 	const collisionDetection = useKanbanCollisionDetection({
 		columnIds,
 		itemsRef,

package/dist/hooks/use-kanban-press-feedback.cjs

@@ -0,0 +1,68 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_kanban_touch_defaults = require('../utils/kanban-touch-defaults.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/hooks/use-kanban-press-feedback.ts
+/**
+* Mirrors the touch sensor's activation window so a held card can show that it
+* is being held.
+*
+* dnd-kit only reports a drag once it has already started, which on touch is
+* one delay too late: without feedback the hold feels like nothing is
+* happening, and the user lets go before the drag ever arms. This watches the
+* same touch stream under the same constraints and reports the in-between
+* state, so the card can acknowledge the press while it is still a press.
+*
+* It never drives the drag itself — dnd-kit remains the only thing that decides
+* whether a gesture becomes one. The worst a desync can do is show or hide a
+* ring.
+*/
+function useKanbanPressFeedback({ delay = require_kanban_touch_defaults.TOUCH_ACTIVATION_DELAY, tolerance = require_kanban_touch_defaults.TOUCH_ACTIVATION_TOLERANCE, disabled = false } = {}) {
+	const [isPressing, setIsPressing] = react.default.useState(false);
+	const originRef = react.default.useRef(null);
+	const timeoutRef = react.default.useRef(null);
+	const clear = react.default.useCallback(() => {
+		if (timeoutRef.current !== null) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+		originRef.current = null;
+		setIsPressing(false);
+	}, []);
+	react.default.useEffect(() => clear, [clear]);
+	return {
+		isPressing,
+		handlers: react.default.useMemo(() => ({
+			onTouchStart: (event) => {
+				const touch = event.touches[0];
+				if (disabled || !touch || event.touches.length > 1) return;
+				originRef.current = {
+					x: touch.clientX,
+					y: touch.clientY
+				};
+				setIsPressing(true);
+				timeoutRef.current = setTimeout(() => setIsPressing(false), delay);
+			},
+			onTouchMove: (event) => {
+				const origin = originRef.current;
+				const touch = event.touches[0];
+				if (!origin || !touch) return;
+				if (Math.abs(touch.clientX - origin.x) > tolerance || Math.abs(touch.clientY - origin.y) > tolerance) clear();
+			},
+			onTouchEnd: clear,
+			onTouchCancel: clear
+		}), [
+			clear,
+			delay,
+			tolerance,
+			disabled
+		])
+	};
+}
+
+//#endregion
+exports.useKanbanPressFeedback = useKanbanPressFeedback;

package/dist/hooks/use-kanban-press-feedback.js

@@ -0,0 +1,66 @@
+'use client';
+
+
+import { TOUCH_ACTIVATION_DELAY, TOUCH_ACTIVATION_TOLERANCE } from "../utils/kanban-touch-defaults.js";
+import React from "react";
+
+//#region src/hooks/use-kanban-press-feedback.ts
+/**
+* Mirrors the touch sensor's activation window so a held card can show that it
+* is being held.
+*
+* dnd-kit only reports a drag once it has already started, which on touch is
+* one delay too late: without feedback the hold feels like nothing is
+* happening, and the user lets go before the drag ever arms. This watches the
+* same touch stream under the same constraints and reports the in-between
+* state, so the card can acknowledge the press while it is still a press.
+*
+* It never drives the drag itself — dnd-kit remains the only thing that decides
+* whether a gesture becomes one. The worst a desync can do is show or hide a
+* ring.
+*/
+function useKanbanPressFeedback({ delay = TOUCH_ACTIVATION_DELAY, tolerance = TOUCH_ACTIVATION_TOLERANCE, disabled = false } = {}) {
+	const [isPressing, setIsPressing] = React.useState(false);
+	const originRef = React.useRef(null);
+	const timeoutRef = React.useRef(null);
+	const clear = React.useCallback(() => {
+		if (timeoutRef.current !== null) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+		originRef.current = null;
+		setIsPressing(false);
+	}, []);
+	React.useEffect(() => clear, [clear]);
+	return {
+		isPressing,
+		handlers: React.useMemo(() => ({
+			onTouchStart: (event) => {
+				const touch = event.touches[0];
+				if (disabled || !touch || event.touches.length > 1) return;
+				originRef.current = {
+					x: touch.clientX,
+					y: touch.clientY
+				};
+				setIsPressing(true);
+				timeoutRef.current = setTimeout(() => setIsPressing(false), delay);
+			},
+			onTouchMove: (event) => {
+				const origin = originRef.current;
+				const touch = event.touches[0];
+				if (!origin || !touch) return;
+				if (Math.abs(touch.clientX - origin.x) > tolerance || Math.abs(touch.clientY - origin.y) > tolerance) clear();
+			},
+			onTouchEnd: clear,
+			onTouchCancel: clear
+		}), [
+			clear,
+			delay,
+			tolerance,
+			disabled
+		])
+	};
+}
+
+//#endregion
+export { useKanbanPressFeedback };

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { IntersectionOptions } from "./infinite-scroll/types.cjs";
 import "./infinite-scroll/index.cjs";
-import { ColumnOverflow, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanVirtualization } from "./types.cjs";
+import { ColumnOverflow, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanColumnSnapAlign, KanbanColumnSnapOptions, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanTouchOptions, KanbanVirtualization } from "./types.cjs";
 import { KanbanBoard } from "./KanbanBoard.cjs";
-export { ColumnOverflow, type IntersectionOptions, KanbanBoard, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanVirtualization };
+export { ColumnOverflow, type IntersectionOptions, KanbanBoard, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanColumnSnapAlign, KanbanColumnSnapOptions, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanTouchOptions, KanbanVirtualization };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { IntersectionOptions } from "./infinite-scroll/types.js";
 import "./infinite-scroll/index.js";
-import { ColumnOverflow, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanVirtualization } from "./types.js";
+import { ColumnOverflow, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanColumnSnapAlign, KanbanColumnSnapOptions, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanTouchOptions, KanbanVirtualization } from "./types.js";
 import { KanbanBoard } from "./KanbanBoard.js";
-export { ColumnOverflow, type IntersectionOptions, KanbanBoard, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanVirtualization };
+export { ColumnOverflow, type IntersectionOptions, KanbanBoard, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanColumnSnapAlign, KanbanColumnSnapOptions, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanTouchOptions, KanbanVirtualization };

package/dist/types.d.cts

@@ -53,6 +53,68 @@ interface KanbanFilter<T = Record<string, unknown>> {
 type KanbanFilters<T = Record<string, unknown>> = KanbanFilter<T>[] | ((column: KanbanColumn) => KanbanFilter<T>[] | undefined);
 /** Controls how columns behave when their cards exceed the board height. */
 type ColumnOverflow = 'scroll' | 'expand';
+/**
+ * Touch-input behaviour.
+ *
+ * On a touch screen a finger that lands on a card is ambiguous: it could be the
+ * start of a drag, or of a swipe to reach the next column. The board resolves
+ * that the way native mobile UIs do — a card only becomes draggable after the
+ * finger has been held still on it for {@link dragActivationDelay}. Anything
+ * shorter, or any movement past {@link dragActivationTolerance} before the
+ * delay elapses, stays a scroll.
+ *
+ * Mouse and keyboard input is unaffected: a mouse drag still starts as soon as
+ * the pointer has travelled a few pixels.
+ */
+interface KanbanTouchOptions {
+  /**
+   * Milliseconds a finger must rest on a card before the drag arms.
+   *
+   * @default 250
+   */
+  dragActivationDelay?: number;
+  /**
+   * Pixels of movement tolerated during the hold. Moving further cancels the
+   * press and hands the gesture back to the browser as a scroll.
+   *
+   * @default 8
+   */
+  dragActivationTolerance?: number;
+  /**
+   * Renders a ring on a card while it is being held but has not armed yet, so
+   * the press is visible before the drag begins.
+   *
+   * @default true
+   */
+  pressFeedback?: boolean;
+}
+/** Where a snapped column comes to rest inside the board's viewport. */
+type KanbanColumnSnapAlign = 'start' | 'center';
+/**
+ * Turns the board into a one-column-at-a-time slider on small screens, using
+ * CSS scroll snapping — so the swipe keeps the platform's own momentum and
+ * settling animation rather than a re-implementation of it.
+ *
+ * Only applies below the `sm` breakpoint (40rem); above it the board keeps its
+ * regular multi-column layout. Snapping is suspended for the duration of a drag
+ * so dnd-kit's auto-scroll is not fought by the snap points.
+ */
+interface KanbanColumnSnapOptions {
+  /**
+   * Where each column lands when the swipe settles.
+   *
+   * @default 'start'
+   */
+  align?: KanbanColumnSnapAlign;
+  /**
+   * Any CSS width for a column while snapping is active. Leaving a margin
+   * (the default 85%) keeps the next column peeking in, which is what tells the
+   * user there is more to swipe to.
+   *
+   * @default '85%'
+   */
+  columnWidth?: string;
+}
 /**
  * Payload delivered by {@link KanbanBoardProps.onFilterChange} whenever the
  * set of active filters for a column changes.
@@ -246,6 +308,20 @@ interface KanbanBoardProps<T = Record<string, unknown>> {
    * board. Cards stay mounted and fully interactive; only the drag is off.
    */
   dragDisabled?: boolean;
+  /**
+   * Tunes how a touch drag arms. See {@link KanbanTouchOptions}; the defaults
+   * are what most boards want, so this is mainly an escape hatch for a board
+   * whose cards are unusually small or tall.
+   */
+  touch?: KanbanTouchOptions;
+  /**
+   * Makes the board swipe one column at a time on small screens. Pass `false`
+   * to keep the plain horizontal scroller at every width, or an options object
+   * to change the resting alignment or the column width.
+   *
+   * @default true
+   */
+  columnSnap?: boolean | KanbanColumnSnapOptions;
 }
 //#endregion
-export { ColumnOverflow, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanVirtualization };
+export { ColumnOverflow, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanColumnSnapAlign, KanbanColumnSnapOptions, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanTouchOptions, KanbanVirtualization };

package/dist/types.d.ts

@@ -53,6 +53,68 @@ interface KanbanFilter<T = Record<string, unknown>> {
 type KanbanFilters<T = Record<string, unknown>> = KanbanFilter<T>[] | ((column: KanbanColumn) => KanbanFilter<T>[] | undefined);
 /** Controls how columns behave when their cards exceed the board height. */
 type ColumnOverflow = 'scroll' | 'expand';
+/**
+ * Touch-input behaviour.
+ *
+ * On a touch screen a finger that lands on a card is ambiguous: it could be the
+ * start of a drag, or of a swipe to reach the next column. The board resolves
+ * that the way native mobile UIs do — a card only becomes draggable after the
+ * finger has been held still on it for {@link dragActivationDelay}. Anything
+ * shorter, or any movement past {@link dragActivationTolerance} before the
+ * delay elapses, stays a scroll.
+ *
+ * Mouse and keyboard input is unaffected: a mouse drag still starts as soon as
+ * the pointer has travelled a few pixels.
+ */
+interface KanbanTouchOptions {
+  /**
+   * Milliseconds a finger must rest on a card before the drag arms.
+   *
+   * @default 250
+   */
+  dragActivationDelay?: number;
+  /**
+   * Pixels of movement tolerated during the hold. Moving further cancels the
+   * press and hands the gesture back to the browser as a scroll.
+   *
+   * @default 8
+   */
+  dragActivationTolerance?: number;
+  /**
+   * Renders a ring on a card while it is being held but has not armed yet, so
+   * the press is visible before the drag begins.
+   *
+   * @default true
+   */
+  pressFeedback?: boolean;
+}
+/** Where a snapped column comes to rest inside the board's viewport. */
+type KanbanColumnSnapAlign = 'start' | 'center';
+/**
+ * Turns the board into a one-column-at-a-time slider on small screens, using
+ * CSS scroll snapping — so the swipe keeps the platform's own momentum and
+ * settling animation rather than a re-implementation of it.
+ *
+ * Only applies below the `sm` breakpoint (40rem); above it the board keeps its
+ * regular multi-column layout. Snapping is suspended for the duration of a drag
+ * so dnd-kit's auto-scroll is not fought by the snap points.
+ */
+interface KanbanColumnSnapOptions {
+  /**
+   * Where each column lands when the swipe settles.
+   *
+   * @default 'start'
+   */
+  align?: KanbanColumnSnapAlign;
+  /**
+   * Any CSS width for a column while snapping is active. Leaving a margin
+   * (the default 85%) keeps the next column peeking in, which is what tells the
+   * user there is more to swipe to.
+   *
+   * @default '85%'
+   */
+  columnWidth?: string;
+}
 /**
  * Payload delivered by {@link KanbanBoardProps.onFilterChange} whenever the
  * set of active filters for a column changes.
@@ -246,6 +308,20 @@ interface KanbanBoardProps<T = Record<string, unknown>> {
    * board. Cards stay mounted and fully interactive; only the drag is off.
    */
   dragDisabled?: boolean;
+  /**
+   * Tunes how a touch drag arms. See {@link KanbanTouchOptions}; the defaults
+   * are what most boards want, so this is mainly an escape hatch for a board
+   * whose cards are unusually small or tall.
+   */
+  touch?: KanbanTouchOptions;
+  /**
+   * Makes the board swipe one column at a time on small screens. Pass `false`
+   * to keep the plain horizontal scroller at every width, or an options object
+   * to change the resting alignment or the column width.
+   *
+   * @default true
+   */
+  columnSnap?: boolean | KanbanColumnSnapOptions;
 }
 //#endregion
-export { ColumnOverflow, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanVirtualization };
+export { ColumnOverflow, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanColumnSnapAlign, KanbanColumnSnapOptions, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanTouchOptions, KanbanVirtualization };

package/dist/utils/kanban-touch-defaults.cjs

@@ -0,0 +1,29 @@
+
+//#region src/utils/kanban-touch-defaults.ts
+/**
+* Shared touch constants.
+*
+* The sensor and the press-feedback hook have to agree on the hold duration and
+* the movement tolerance, or the ring would appear at a moment the drag does
+* not actually arm. Keeping both numbers here is what makes that guarantee
+* mechanical rather than a comment.
+*/
+/** Milliseconds a finger must rest on a card before the drag arms. */
+const TOUCH_ACTIVATION_DELAY = 250;
+/** Pixels of movement tolerated during the hold before the press is cancelled. */
+const TOUCH_ACTIVATION_TOLERANCE = 8;
+/**
+* Marks an element as an explicit drag handle, which picks up on contact
+* instead of waiting out the hold.
+*/
+const DRAG_HANDLE_ATTRIBUTE = "data-kanban-drag-handle";
+/** Matches {@link DRAG_HANDLE_ATTRIBUTE} and anything inside it (e.g. an icon). */
+const DRAG_HANDLE_SELECTOR = `[${DRAG_HANDLE_ATTRIBUTE}]`;
+/** Spread onto an element to turn it into a drag handle. */
+const dragHandleProps = { [DRAG_HANDLE_ATTRIBUTE]: "" };
+
+//#endregion
+exports.DRAG_HANDLE_SELECTOR = DRAG_HANDLE_SELECTOR;
+exports.TOUCH_ACTIVATION_DELAY = TOUCH_ACTIVATION_DELAY;
+exports.TOUCH_ACTIVATION_TOLERANCE = TOUCH_ACTIVATION_TOLERANCE;
+exports.dragHandleProps = dragHandleProps;

package/dist/utils/kanban-touch-defaults.js

@@ -0,0 +1,25 @@
+//#region src/utils/kanban-touch-defaults.ts
+/**
+* Shared touch constants.
+*
+* The sensor and the press-feedback hook have to agree on the hold duration and
+* the movement tolerance, or the ring would appear at a moment the drag does
+* not actually arm. Keeping both numbers here is what makes that guarantee
+* mechanical rather than a comment.
+*/
+/** Milliseconds a finger must rest on a card before the drag arms. */
+const TOUCH_ACTIVATION_DELAY = 250;
+/** Pixels of movement tolerated during the hold before the press is cancelled. */
+const TOUCH_ACTIVATION_TOLERANCE = 8;
+/**
+* Marks an element as an explicit drag handle, which picks up on contact
+* instead of waiting out the hold.
+*/
+const DRAG_HANDLE_ATTRIBUTE = "data-kanban-drag-handle";
+/** Matches {@link DRAG_HANDLE_ATTRIBUTE} and anything inside it (e.g. an icon). */
+const DRAG_HANDLE_SELECTOR = `[${DRAG_HANDLE_ATTRIBUTE}]`;
+/** Spread onto an element to turn it into a drag handle. */
+const dragHandleProps = { [DRAG_HANDLE_ATTRIBUTE]: "" };
+
+//#endregion
+export { DRAG_HANDLE_SELECTOR, TOUCH_ACTIVATION_DELAY, TOUCH_ACTIVATION_TOLERANCE, dragHandleProps };

package/dist/utils/resolve-column-snap.cjs

@@ -0,0 +1,44 @@
+
+//#region src/utils/resolve-column-snap.ts
+/** Custom property the column reads its snapped width from. */
+const COLUMN_SNAP_WIDTH_VAR = "--kanban-column-snap-width";
+const DEFAULT_COLUMN_WIDTH = "85%";
+const DEFAULT_ALIGN = "start";
+const BOARD_SNAP_CLASS = "max-sm:snap-x max-sm:snap-mandatory max-sm:scroll-px-2 scroll-smooth";
+const COLUMN_SNAP_CLASS = "max-sm:w-[var(--kanban-column-snap-width)] max-sm:min-w-0 max-sm:flex-none max-sm:snap-always";
+const ALIGN_CLASS = {
+	start: "max-sm:snap-start",
+	center: "max-sm:snap-center"
+};
+const DISABLED = {
+	enabled: false,
+	boardClassName: "",
+	columnClassName: ""
+};
+/**
+* Turns the `columnSnap` prop into the classes that make the board swipe one
+* column at a time below the `sm` breakpoint.
+*
+* Everything here is CSS scroll snapping, which buys the platform's own
+* momentum, rubber-banding and settle animation for free — and, unlike a JS
+* carousel, keeps working while the main thread is busy re-measuring droppables
+* mid-drag.
+*
+* @param columnSnap - The board's `columnSnap` prop.
+* @param isDragging - Suspends snapping for the length of a drag: dnd-kit
+* auto-scrolls the board by writing `scrollLeft`, and mandatory snap points
+* would pull every one of those writes back to the nearest column.
+*/
+function resolveColumnSnap(columnSnap, isDragging) {
+	if (columnSnap === false) return DISABLED;
+	const { align = DEFAULT_ALIGN, columnWidth = DEFAULT_COLUMN_WIDTH } = columnSnap === true ? {} : columnSnap ?? {};
+	return {
+		enabled: true,
+		boardClassName: isDragging ? "snap-none" : BOARD_SNAP_CLASS,
+		columnClassName: `${COLUMN_SNAP_CLASS} ${ALIGN_CLASS[align]}`,
+		style: { [COLUMN_SNAP_WIDTH_VAR]: columnWidth }
+	};
+}
+
+//#endregion
+exports.resolveColumnSnap = resolveColumnSnap;

package/dist/utils/resolve-column-snap.js

@@ -0,0 +1,43 @@
+//#region src/utils/resolve-column-snap.ts
+/** Custom property the column reads its snapped width from. */
+const COLUMN_SNAP_WIDTH_VAR = "--kanban-column-snap-width";
+const DEFAULT_COLUMN_WIDTH = "85%";
+const DEFAULT_ALIGN = "start";
+const BOARD_SNAP_CLASS = "max-sm:snap-x max-sm:snap-mandatory max-sm:scroll-px-2 scroll-smooth";
+const COLUMN_SNAP_CLASS = "max-sm:w-[var(--kanban-column-snap-width)] max-sm:min-w-0 max-sm:flex-none max-sm:snap-always";
+const ALIGN_CLASS = {
+	start: "max-sm:snap-start",
+	center: "max-sm:snap-center"
+};
+const DISABLED = {
+	enabled: false,
+	boardClassName: "",
+	columnClassName: ""
+};
+/**
+* Turns the `columnSnap` prop into the classes that make the board swipe one
+* column at a time below the `sm` breakpoint.
+*
+* Everything here is CSS scroll snapping, which buys the platform's own
+* momentum, rubber-banding and settle animation for free — and, unlike a JS
+* carousel, keeps working while the main thread is busy re-measuring droppables
+* mid-drag.
+*
+* @param columnSnap - The board's `columnSnap` prop.
+* @param isDragging - Suspends snapping for the length of a drag: dnd-kit
+* auto-scrolls the board by writing `scrollLeft`, and mandatory snap points
+* would pull every one of those writes back to the nearest column.
+*/
+function resolveColumnSnap(columnSnap, isDragging) {
+	if (columnSnap === false) return DISABLED;
+	const { align = DEFAULT_ALIGN, columnWidth = DEFAULT_COLUMN_WIDTH } = columnSnap === true ? {} : columnSnap ?? {};
+	return {
+		enabled: true,
+		boardClassName: isDragging ? "snap-none" : BOARD_SNAP_CLASS,
+		columnClassName: `${COLUMN_SNAP_CLASS} ${ALIGN_CLASS[align]}`,
+		style: { [COLUMN_SNAP_WIDTH_VAR]: columnWidth }
+	};
+}
+
+//#endregion
+export { resolveColumnSnap };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-kanban",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Accessible drag-and-drop Kanban board built with shadcn/ui and dnd-kit.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",