@giddaa-housing/ui 3.9.0 → 3.10.0

package/dist/kanban.js

@@ -0,0 +1,705 @@
+"use client";
+import { ChevronLeft, ChevronRight, GripVertical } from "./icons.js";
+import { cn } from "./utils/cn.js";
+import { Button } from "./button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/combine.js";
+import { draggable, dropTargetForElements, monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
+import { autoScrollForElements, autoScrollWindowForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/dist/cjs/entry-point/element.js";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/dist/cjs/closest-edge.js";
+//#region src/lib/kanban-feedback.ts
+/**
+* A flash queued for a card that has not mounted yet expires after this, so a
+* card that never comes back cannot flash minutes later.
+*/
+const FLASH_PENDING_TTL = 1e3;
+/**
+* Creates one board's feedback channel.
+*
+* A dropped card is often remounting — it moved column, so React unmounts it
+* from one list and mounts it in another. `flashCard` therefore waits a frame
+* before looking for the card, and leaves the flash queued for a card that
+* arrives later still; whichever card is subscribed first wins it, once.
+*/
+function createKanbanFeedback() {
+	const announcementListeners = /* @__PURE__ */ new Set();
+	const flashListeners = /* @__PURE__ */ new Map();
+	let announcementId = 0;
+	let pendingFlash = null;
+	const deliverPendingFlash = () => {
+		if (!pendingFlash) return;
+		if (Date.now() > pendingFlash.expiresAt) {
+			pendingFlash = null;
+			return;
+		}
+		const listeners = flashListeners.get(pendingFlash.cardId);
+		if (!listeners?.size) return;
+		pendingFlash = null;
+		for (const listener of listeners) listener();
+	};
+	return {
+		announce: (message) => {
+			announcementId += 1;
+			const announcement = {
+				id: announcementId,
+				message
+			};
+			for (const listener of announcementListeners) listener(announcement);
+		},
+		flashCard: (cardId) => {
+			pendingFlash = {
+				cardId,
+				expiresAt: Date.now() + FLASH_PENDING_TTL
+			};
+			if (typeof requestAnimationFrame === "undefined") {
+				deliverPendingFlash();
+				return;
+			}
+			requestAnimationFrame(deliverPendingFlash);
+		},
+		subscribeToAnnouncement: (listener) => {
+			announcementListeners.add(listener);
+			return () => announcementListeners.delete(listener);
+		},
+		subscribeToFlash: (cardId, onFlash) => {
+			const listeners = flashListeners.get(cardId) ?? /* @__PURE__ */ new Set();
+			listeners.add(onFlash);
+			flashListeners.set(cardId, listeners);
+			if (pendingFlash?.cardId === cardId) deliverPendingFlash();
+			return () => {
+				listeners.delete(onFlash);
+				if (listeners.size === 0) flashListeners.delete(cardId);
+			};
+		}
+	};
+}
+//#endregion
+//#region src/kanban.tsx
+/**
+* Applies a card move to the two columns' id lists and returns the new lists.
+* For an in-column move both returned lists are the same reordered list.
+*/
+function applyKanbanCardMove({ move, sourceIds, targetIds }) {
+	const { cardId, fromColumnId, toColumnId, targetCardId, edge } = move;
+	const inColumn = fromColumnId === toColumnId;
+	if (inColumn && targetCardId === null) return {
+		changed: false,
+		sourceIds: [...sourceIds],
+		targetIds: [...sourceIds]
+	};
+	const withoutCard = sourceIds.filter((id) => id !== cardId);
+	const insertionBase = inColumn ? withoutCard : [...targetIds];
+	const insertionIndex = getInsertionIndex(insertionBase, targetCardId, edge);
+	insertionBase.splice(insertionIndex, 0, cardId);
+	return {
+		changed: inColumn ? !areSameOrder(sourceIds, insertionBase) : true,
+		sourceIds: inColumn ? insertionBase : withoutCard,
+		targetIds: insertionBase
+	};
+}
+/**
+* Where the card slots into a list the card itself is no longer part of. A
+* drop on the column (no target card) lands at the top, matching the drop
+* placeholder's position.
+*/
+function getInsertionIndex(ids, targetCardId, edge) {
+	if (targetCardId === null) return 0;
+	const targetIndex = ids.indexOf(targetCardId);
+	if (targetIndex === -1) return 0;
+	return edge === "bottom" ? targetIndex + 1 : targetIndex;
+}
+const areSameOrder = (a, b) => a.length === b.length && a.every((id, index) => id === b[index]);
+/**
+* Orders `ids` by a saved order: ids the saved order knows come first, in that
+* order; the rest keep their given (API) order after them.
+*/
+function sortIdsBySavedOrder(ids, savedOrder) {
+	if (!savedOrder || savedOrder.length === 0) return [...ids];
+	const present = new Set(ids);
+	const known = savedOrder.filter((id) => present.has(id));
+	const knownSet = new Set(known);
+	const unknown = ids.filter((id) => !knownSet.has(id));
+	return [...known, ...unknown];
+}
+/**
+* Per-board card ordering, persisted to this browser's localStorage. Column
+* membership belongs to the server; the only thing saved here is where inside
+* a column the user dropped each card, so the board comes back arranged the
+* way they left it.
+*
+* A column is untouched (pure API order) until its first drop; from then on
+* its saved order wins, with cards the order has never seen keeping API order
+* after the arranged ones.
+*
+* ```tsx
+* const order = useKanbanCardOrder("lead-pipeline-order");
+* const cards = order.sortColumn(stage.id, ids).map((id) => byId[id]);
+* // …after a drop
+* order.saveColumns({ [move.fromColumnId]: sourceIds, [move.toColumnId]: targetIds });
+* ```
+*/
+function useKanbanCardOrder(storageKey) {
+	const [order, setOrder] = React.useState({});
+	React.useEffect(() => {
+		setOrder(readOrder(storageKey));
+	}, [storageKey]);
+	return {
+		sortColumn: React.useCallback((columnId, ids) => sortIdsBySavedOrder(ids, order[columnId]), [order]),
+		saveColumns: React.useCallback((columns) => {
+			setOrder((previous) => {
+				const next = {
+					...previous,
+					...columns
+				};
+				writeOrder(storageKey, next);
+				return next;
+			});
+		}, [storageKey])
+	};
+}
+function readOrder(storageKey) {
+	try {
+		const stored = window.localStorage.getItem(storageKey);
+		if (!stored) return {};
+		const parsed = JSON.parse(stored);
+		return isColumnOrder(parsed) ? parsed : {};
+	} catch {
+		return {};
+	}
+}
+function writeOrder(storageKey, order) {
+	try {
+		window.localStorage.setItem(storageKey, JSON.stringify(order));
+	} catch {}
+}
+const isColumnOrder = (value) => typeof value === "object" && value !== null && !Array.isArray(value) && Object.values(value).every((ids) => Array.isArray(ids) && ids.every((id) => typeof id === "string"));
+/**
+* The board's live region. Its own component with its own state, so an
+* announcement re-renders one visually hidden node rather than the board.
+*
+* The message is keyed, so the same message twice is a new node in the region
+* and gets announced twice — a screen reader ignores a live region whose text
+* it has already read.
+*/
+function KanbanLiveRegion({ feedback }) {
+	const [announcement, setAnnouncement] = React.useState(null);
+	React.useEffect(() => feedback.subscribeToAnnouncement(setAnnouncement), [feedback]);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-atomic": "true",
+		"aria-live": "polite",
+		"data-slot": "kanban-live-region",
+		className: "sr-only",
+		children: announcement ? /* @__PURE__ */ jsx("p", { children: announcement.message }, announcement.id) : null
+	});
+}
+const KanbanBoardContext = React.createContext(null);
+function useKanbanBoardContext() {
+	const context = React.useContext(KanbanBoardContext);
+	if (!context) throw new Error("Kanban components must be used within <KanbanRoot>.");
+	return context;
+}
+const KanbanDragContext = React.createContext(null);
+const KanbanScrollContext = React.createContext(null);
+const KanbanColumnContext = React.createContext(null);
+function useKanbanColumnContext() {
+	const context = React.useContext(KanbanColumnContext);
+	if (!context) throw new Error("Kanban column components must be used within <KanbanColumn>.");
+	return context;
+}
+/**
+* The in-flight drag, for app-level styling beyond what the slots do. Null
+* when nothing is being dragged.
+*/
+function useKanbanDrag() {
+	return React.useContext(KanbanDragContext);
+}
+/**
+* The board's horizontal scroll position, for controls placed anywhere inside
+* `KanbanRoot`. `canScroll*` is false at the corresponding end and on a board
+* that does not overflow at all, so both being false means "nothing to scroll".
+*/
+function useKanbanScroll() {
+	const context = React.useContext(KanbanScrollContext);
+	if (!context) throw new Error("useKanbanScroll must be used within <KanbanRoot>.");
+	return context;
+}
+/**
+* The board's live region and card flash, for moves the app makes outside a
+* drag — the "move to" menu that keyboard users need. Announce what changed
+* and flash the card so it can be found in its new column.
+*
+* ```tsx
+* const { announce, flashCard } = useKanbanFeedback();
+*
+* moveLead(lead.id, stage.id);
+* flashCard(lead.id);
+* announce(`${lead.name} moved to ${stage.name}.`);
+* ```
+*/
+function useKanbanFeedback() {
+	const { announce, flashCard } = useKanbanBoardContext();
+	return {
+		announce,
+		flashCard
+	};
+}
+const CARD_DATA_TYPE = "kanban-card";
+const COLUMN_DATA_TYPE = "kanban-column";
+const isCardDragData = (data, instanceId) => data.type === CARD_DATA_TYPE && data.instanceId === instanceId;
+const isColumnDropData = (data, instanceId) => data.type === COLUMN_DATA_TYPE && data.instanceId === instanceId;
+/**
+* Watches the board's drags. Isolated custom hook so components stay free of
+* direct effects; Pragmatic's monitor is a document-level subscription that is
+* naturally setup-on-mount and cleanup-on-unmount.
+*/
+function useKanbanMonitor({ announceMove, feedback, instanceId, onCardMove, setDrag }) {
+	const handlersRef = React.useRef({
+		announceMove,
+		onCardMove
+	});
+	React.useEffect(() => {
+		handlersRef.current = {
+			announceMove,
+			onCardMove
+		};
+	});
+	React.useEffect(() => {
+		return monitorForElements({
+			canMonitor: ({ source }) => isCardDragData(source.data, instanceId),
+			onDragStart: ({ source }) => {
+				const data = source.data;
+				setDrag({
+					cardId: data.cardId,
+					fromColumnId: data.columnId,
+					overColumnId: data.columnId
+				});
+			},
+			onDropTargetChange: ({ location }) => {
+				const overColumnId = getOverColumnId(location.current.dropTargets);
+				setDrag((drag) => drag ? {
+					...drag,
+					overColumnId
+				} : drag);
+			},
+			onDrop: ({ source, location }) => {
+				setDrag(null);
+				const data = source.data;
+				const targets = location.current.dropTargets;
+				const cardTarget = targets.find((target) => isCardDragData(target.data, instanceId));
+				const columnTarget = targets.find((target) => isColumnDropData(target.data, instanceId));
+				const cardData = cardTarget?.data;
+				const columnData = columnTarget?.data;
+				const toColumnId = cardData?.columnId ?? columnData?.columnId;
+				if (!toColumnId) return;
+				const edge = cardTarget && cardData ? extractClosestEdge(cardTarget.data) ?? "top" : null;
+				const move = {
+					cardId: data.cardId,
+					fromColumnId: data.columnId,
+					toColumnId,
+					targetCardId: cardData?.cardId ?? null,
+					edge
+				};
+				const { announceMove, onCardMove } = handlersRef.current;
+				onCardMove?.(move);
+				feedback.flashCard(move.cardId);
+				const announcement = announceMove?.(move);
+				if (announcement) feedback.announce(announcement);
+			}
+		});
+	}, [
+		feedback,
+		instanceId,
+		setDrag
+	]);
+}
+function getOverColumnId(dropTargets) {
+	for (const target of dropTargets) if (target.data.type === CARD_DATA_TYPE || target.data.type === COLUMN_DATA_TYPE) return target.data.columnId;
+	return null;
+}
+/** Sub-pixel slack, so a board scrolled to its end does not read as scrollable. */
+const SCROLL_EDGE_TOLERANCE = 1;
+const EMPTY_SCROLL_STATE = {
+	canScrollLeft: false,
+	canScrollRight: false,
+	columnCount: 0,
+	visibleColumnCount: 0
+};
+/**
+* Measures the columns, ignoring any trailing action tile (an "Add stage"
+* button is a board child but not a column). `null` before the first column
+* mounts, when there is nothing to measure.
+*/
+function getColumnMetrics(board) {
+	const columns = board.querySelectorAll("[data-slot=\"kanban-column\"]");
+	const first = columns[0];
+	if (!first) return null;
+	const parsedGap = Number.parseFloat(getComputedStyle(board).columnGap);
+	const gap = Number.isNaN(parsedGap) ? 0 : parsedGap;
+	return {
+		count: columns.length,
+		gap,
+		stride: first.getBoundingClientRect().width + gap
+	};
+}
+/**
+* How many whole columns the viewport holds. `n` columns occupy
+* `n * stride - gap`, since the last one has no gap after it.
+*
+* Never less than one: a viewport narrower than a single column still shows
+* that column, and "showing 0 of 7" would be a lie.
+*/
+function getVisibleColumnCount(clientWidth, { count, gap, stride }) {
+	if (stride <= 0) return count;
+	return Math.min(count, Math.max(1, Math.floor((clientWidth + gap) / stride)));
+}
+/** Tracks which way the board can still be scrolled, if either. */
+function useKanbanScrollState(board) {
+	const [state, setState] = React.useState(EMPTY_SCROLL_STATE);
+	React.useEffect(() => {
+		if (!board) {
+			setState(EMPTY_SCROLL_STATE);
+			return;
+		}
+		const update = () => {
+			const { clientWidth, scrollLeft, scrollWidth } = board;
+			const metrics = getColumnMetrics(board);
+			const next = {
+				canScrollLeft: scrollLeft > SCROLL_EDGE_TOLERANCE,
+				canScrollRight: scrollLeft + clientWidth < scrollWidth - SCROLL_EDGE_TOLERANCE,
+				columnCount: metrics?.count ?? 0,
+				visibleColumnCount: metrics ? getVisibleColumnCount(clientWidth, metrics) : 0
+			};
+			setState((previous) => previous.canScrollLeft === next.canScrollLeft && previous.canScrollRight === next.canScrollRight && previous.columnCount === next.columnCount && previous.visibleColumnCount === next.visibleColumnCount ? previous : next);
+		};
+		update();
+		board.addEventListener("scroll", update, { passive: true });
+		const resize = new ResizeObserver(update);
+		resize.observe(board);
+		for (const child of board.children) resize.observe(child);
+		const mutation = new MutationObserver(() => {
+			for (const child of board.children) resize.observe(child);
+			update();
+		});
+		mutation.observe(board, { childList: true });
+		return () => {
+			board.removeEventListener("scroll", update);
+			resize.disconnect();
+			mutation.disconnect();
+		};
+	}, [board]);
+	return state;
+}
+/**
+* Registers Pragmatic auto-scrolling on whatever element the returned callback
+* ref is attached to, so dragging towards an edge scrolls the board or the
+* column under the pointer.
+*/
+function useKanbanAutoScroll(instanceId) {
+	const [element, setElement] = React.useState(null);
+	React.useEffect(() => {
+		if (!element) return;
+		return autoScrollForElements({
+			element,
+			canScroll: ({ source }) => isCardDragData(source.data, instanceId)
+		});
+	}, [element, instanceId]);
+	return setElement;
+}
+function KanbanRoot({ announceMove, children, className, onCardMove, ...props }) {
+	const [instanceId] = React.useState(() => Symbol("kanban"));
+	const [feedback] = React.useState(createKanbanFeedback);
+	const [drag, setDrag] = React.useState(null);
+	const [board, setBoard] = React.useState(null);
+	useKanbanMonitor({
+		announceMove,
+		feedback,
+		instanceId,
+		onCardMove,
+		setDrag
+	});
+	const scrollState = useKanbanScrollState(board);
+	React.useEffect(() => {
+		return autoScrollWindowForElements({ canScroll: ({ source }) => isCardDragData(source.data, instanceId) });
+	}, [instanceId]);
+	const scroll = React.useCallback((direction) => {
+		if (!board) return;
+		const distance = getColumnMetrics(board)?.stride ?? Math.round(board.clientWidth * .8);
+		board.scrollBy({ left: direction === "left" ? -distance : distance });
+	}, [board]);
+	const boardValue = React.useMemo(() => ({
+		...feedback,
+		instanceId,
+		setBoard
+	}), [feedback, instanceId]);
+	const scrollValue = React.useMemo(() => ({
+		...scrollState,
+		scroll
+	}), [scrollState, scroll]);
+	return /* @__PURE__ */ jsx(KanbanBoardContext.Provider, {
+		value: boardValue,
+		children: /* @__PURE__ */ jsx(KanbanDragContext.Provider, {
+			value: drag,
+			children: /* @__PURE__ */ jsx(KanbanScrollContext.Provider, {
+				value: scrollValue,
+				children: /* @__PURE__ */ jsxs("div", {
+					"data-slot": "kanban",
+					className: cn("flex flex-col gap-4", className),
+					...props,
+					children: [children, /* @__PURE__ */ jsx(KanbanLiveRegion, { feedback })]
+				})
+			})
+		})
+	});
+}
+function KanbanBoard({ className, ...props }) {
+	const { instanceId, setBoard } = useKanbanBoardContext();
+	const setAutoScrollElement = useKanbanAutoScroll(instanceId);
+	return /* @__PURE__ */ jsx("div", {
+		ref: React.useCallback((element) => {
+			setAutoScrollElement(element);
+			setBoard(element);
+		}, [setAutoScrollElement, setBoard]),
+		"data-slot": "kanban-board",
+		className: cn("flex items-stretch gap-4 overflow-x-auto motion-safe:scroll-smooth", className),
+		...props
+	});
+}
+/**
+* Steps the board one column in `direction`, and disables itself at that end.
+* Keyboard users reach the same scroll through the board itself, so the
+* buttons are a pointer affordance rather than the only way across.
+*/
+function KanbanScrollButton({ className, direction, onClick, ...props }) {
+	const { canScrollLeft, canScrollRight, scroll } = useKanbanScroll();
+	const isLeft = direction === "left";
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		size: "icon",
+		variant: "tertiary-outline",
+		"data-slot": "kanban-scroll-button",
+		"aria-label": isLeft ? "Scroll board left" : "Scroll board right",
+		disabled: isLeft ? !canScrollLeft : !canScrollRight,
+		className: cn("size-9 rounded-md", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			scroll(direction);
+		},
+		...props,
+		children: isLeft ? /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+	});
+}
+/**
+* The pair of scroll buttons. On a board that fits its viewport both are
+* disabled rather than hidden — the row holds its place (and its "showing
+* N of M" caption) instead of vanishing on wide screens.
+*/
+function KanbanScrollControls({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "kanban-scroll-controls",
+		className: cn("flex items-center gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(KanbanScrollButton, { direction: "left" }), /* @__PURE__ */ jsx(KanbanScrollButton, { direction: "right" })]
+	});
+}
+function KanbanColumn({ children, className, columnId, dropDisabled = false, ...props }) {
+	const { instanceId } = useKanbanBoardContext();
+	const drag = useKanbanDrag();
+	const ref = React.useRef(null);
+	React.useEffect(() => {
+		const element = ref.current;
+		if (!element || dropDisabled) return;
+		return dropTargetForElements({
+			element,
+			canDrop: ({ source }) => isCardDragData(source.data, instanceId),
+			getData: () => ({
+				type: COLUMN_DATA_TYPE,
+				instanceId,
+				columnId
+			}),
+			getIsSticky: () => true
+		});
+	}, [
+		columnId,
+		dropDisabled,
+		instanceId
+	]);
+	const value = React.useMemo(() => ({
+		columnId,
+		dropDisabled
+	}), [columnId, dropDisabled]);
+	const isDropTarget = !dropDisabled && drag?.overColumnId === columnId;
+	return /* @__PURE__ */ jsx(KanbanColumnContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("section", {
+			ref,
+			"data-slot": "kanban-column",
+			"data-drop-target": isDropTarget || void 0,
+			className: cn("flex w-70 shrink-0 flex-col gap-3 rounded-2xl border border-line-subtle bg-surface-raised p-3", "data-drop-target:border-line-strong", className),
+			...props,
+			children
+		})
+	});
+}
+function KanbanColumnHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "kanban-column-header",
+		className: cn("flex flex-col gap-1", className),
+		...props
+	});
+}
+function KanbanColumnTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h3", {
+		"data-slot": "kanban-column-title",
+		className: cn("flex items-center gap-2 text-gdt-sm font-semibold text-fg-primary", className),
+		...props
+	});
+}
+function KanbanColumnDot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-slot": "kanban-column-dot",
+		className: cn("size-2 shrink-0 rounded-full", className),
+		...props
+	});
+}
+function KanbanColumnCount({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "kanban-column-count",
+		className: cn("shrink-0 rounded-full bg-surface-brand-subtle px-2 py-0.5 text-gdt-xs text-fg-primary", className),
+		...props
+	});
+}
+function KanbanColumnDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "kanban-column-description",
+		className: cn("text-gdt-xs text-fg-secondary", className),
+		...props
+	});
+}
+function KanbanColumnBody({ className, ...props }) {
+	const { instanceId } = useKanbanBoardContext();
+	return /* @__PURE__ */ jsx("div", {
+		ref: useKanbanAutoScroll(instanceId),
+		"data-slot": "kanban-column-body",
+		className: cn("flex min-h-0 flex-1 flex-col gap-2.5 overflow-y-auto", className),
+		...props
+	});
+}
+/**
+* Shown only while a card from another column hovers this one — the "drop here
+* to move" affordance. Dropping on the column (rather than on a card) inserts
+* at the top, which is where this placeholder sits.
+*/
+function KanbanDropPlaceholder({ className, children, ...props }) {
+	const drag = useKanbanDrag();
+	const { columnId } = useKanbanColumnContext();
+	if (!(drag !== null && drag.overColumnId === columnId && drag.fromColumnId !== columnId)) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "kanban-drop-placeholder",
+		className: cn("flex min-h-44 shrink-0 flex-col items-center justify-end rounded-xl border border-dashed border-line-strong bg-surface-brand-subtle px-3 py-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-center text-gdt-xs text-fg-brand",
+			children
+		})
+	});
+}
+const KanbanCardContext = React.createContext(null);
+function KanbanCard({ cardId, children, className, dragDisabled = false, ...props }) {
+	const { instanceId, subscribeToFlash } = useKanbanBoardContext();
+	const { columnId, dropDisabled } = useKanbanColumnContext();
+	const ref = React.useRef(null);
+	const [dragHandle, setDragHandle] = React.useState(null);
+	const [isDragging, setIsDragging] = React.useState(false);
+	const [closestEdge, setClosestEdge] = React.useState(null);
+	const [justMoved, setJustMoved] = React.useState(false);
+	React.useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const data = {
+			type: CARD_DATA_TYPE,
+			instanceId,
+			cardId,
+			columnId
+		};
+		return combine(...dragDisabled ? [] : [draggable({
+			element,
+			dragHandle: dragHandle ?? void 0,
+			getInitialData: () => data,
+			onDragStart: () => setIsDragging(true),
+			onDrop: () => setIsDragging(false)
+		})], ...dropDisabled ? [] : [dropTargetForElements({
+			element,
+			canDrop: ({ source }) => isCardDragData(source.data, instanceId) && source.data.cardId !== cardId,
+			getData: ({ input, element: targetElement }) => attachClosestEdge(data, {
+				element: targetElement,
+				input,
+				allowedEdges: ["top", "bottom"]
+			}),
+			onDrag: ({ self }) => {
+				const edge = extractClosestEdge(self.data);
+				setClosestEdge(edge === "top" || edge === "bottom" ? edge : null);
+			},
+			onDragLeave: () => setClosestEdge(null),
+			onDrop: () => setClosestEdge(null)
+		})]);
+	}, [
+		cardId,
+		columnId,
+		dragDisabled,
+		dragHandle,
+		dropDisabled,
+		instanceId
+	]);
+	React.useEffect(() => subscribeToFlash(cardId, () => setJustMoved(true)), [cardId, subscribeToFlash]);
+	React.useEffect(() => {
+		if (!justMoved) return;
+		const timeout = setTimeout(() => setJustMoved(false), 700);
+		return () => clearTimeout(timeout);
+	}, [justMoved]);
+	const cardValue = React.useMemo(() => ({ setDragHandle }), []);
+	return /* @__PURE__ */ jsx(KanbanCardContext.Provider, {
+		value: cardValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			"data-slot": "kanban-card",
+			"data-dragging": isDragging || void 0,
+			"data-just-moved": justMoved || void 0,
+			className: cn("relative shrink-0 rounded-xl border border-line-subtle bg-canvas", !dragDisabled && !dragHandle && "cursor-grab active:cursor-grabbing", "data-dragging:opacity-40", "data-just-moved:animate-kanban-card-flash", className),
+			...props,
+			children: [children, closestEdge ? /* @__PURE__ */ jsx(KanbanCardDropIndicator, { edge: closestEdge }) : null]
+		})
+	});
+}
+/**
+* Restricts dragging to this element instead of the whole card. Worth adding
+* as soon as a card holds its own controls — a menu, a link, a checkbox —
+* since a drag started on one of those is a drag the user did not ask for.
+* Renders a grip button; pass `children` to make it anything else.
+*/
+function KanbanCardDragHandle({ children, className, ...props }) {
+	const context = React.useContext(KanbanCardContext);
+	if (!context) throw new Error("<KanbanCardDragHandle> must be used within <KanbanCard>.");
+	return /* @__PURE__ */ jsx("button", {
+		ref: context.setDragHandle,
+		type: "button",
+		"data-slot": "kanban-card-drag-handle",
+		"aria-hidden": true,
+		tabIndex: -1,
+		className: cn("inline-flex shrink-0 cursor-grab items-center justify-center rounded-md text-fg-secondary active:cursor-grabbing", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(GripVertical, { className: "size-4" })
+	});
+}
+/** Insertion line drawn in the gap above or below the hovered card. */
+function KanbanCardDropIndicator({ edge }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-slot": "kanban-card-drop-indicator",
+		className: cn("pointer-events-none absolute inset-x-0 z-10 h-0.5 rounded-full bg-surface-brand", edge === "top" ? "-top-1.5" : "-bottom-1.5")
+	});
+}
+//#endregion
+export { KanbanBoard, KanbanCard, KanbanCardDragHandle, KanbanColumn, KanbanColumnBody, KanbanColumnCount, KanbanColumnDescription, KanbanColumnDot, KanbanColumnHeader, KanbanColumnTitle, KanbanDropPlaceholder, KanbanRoot, KanbanScrollButton, KanbanScrollControls, applyKanbanCardMove, sortIdsBySavedOrder, useKanbanCardOrder, useKanbanDrag, useKanbanFeedback, useKanbanScroll };