@multiplatform.one/components 6.1.0 → 6.3.0

package/dist/jsx/views/Kanban.mjs

@@ -1,25 +1,54 @@
 import { componentColors } from "../componentColors.mjs";
+import { AsyncBoundary, useAsyncCount } from "../layouts/AsyncBoundary.mjs";
+import { EmptyState } from "../layouts/page.mjs";
+import { Spinner } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback, useRef, useEffect, useId, useState } from "react";
-import { Card, ListItem, ScrollView, Spinner, Text, View, XStack, YStack } from "tamagui";
+import { useCallback, useRef, useEffect, useId, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AnimatePresence, Card, ListItem, ScrollView, Text, View, XStack, YStack } from "tamagui";
+import { autoScrollVelocity, describeCancel, describeDragState, gapPosition, insertionIndexForY, keyboardLift, keyboardMove, resolveDrop, siblingOffset } from "./kanbanDnd.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+const DRAG_THRESHOLD_PX = 4;
+const TOUCH_LONG_PRESS_MS = 200;
+const AUTO_SCROLL_EDGE_PX = 48;
+const AUTO_SCROLL_MAX_SPEED = 16;
+const CARD_INSET_PX = 4;
+const LIFT_SHADOW = {
+  shadowColor: "#000",
+  shadowOffset: {
+    width: 0,
+    height: 10
+  },
+  shadowOpacity: 0.15,
+  shadowRadius: 20
+};
 function Kanban({
   columns,
   renderCard,
+  onCardMove,
+  onCardReorder,
   onCardSelect,
   onLoadMore,
+  getItemKey,
+  getItemLabel,
   hasMore = false,
   isLoading = false,
+  error = null,
+  onRetry,
   columnWidth: columnWidthProp,
   minColumnHeight: minColumnHeightProp,
   estimateSize: estimateSizeProp,
   overscan = 5,
-  emptyColumnMessage = "No items",
+  emptyColumnMessage: emptyColumnMessageProp,
   hotkeys: hotkeyOverrides,
   ...stackProps
 }) {
+  const {
+    t
+  } = useTranslation();
+  const emptyColumnMessage = emptyColumnMessageProp ?? t("No items");
   const {
     knobProps
   } = useResolvedKnobs();
@@ -29,12 +58,439 @@ function Kanban({
   const estimateSize = estimateSizeProp ?? (sz === "$3" ? 64 : sz === "$5" ? 96 : 80);
   const kanbanId = useId();
   const containerRef = useRef(null);
+  const boardScrollRef = useRef(null);
   const [focusedCol, setFocusedCol] = useState(-1);
   const [focusedCard, setFocusedCard] = useState(-1);
+  const canDrag = Boolean(onCardMove || onCardReorder);
+  const [drag, setDrag] = useState(null);
+  const [settle, setSettle] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const dragRef = useRef(null);
+  dragRef.current = drag;
+  const columnHandles = useRef(/* @__PURE__ */new Map());
+  const overlayApiRef = useRef(null);
+  const pointerRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const grabOffsetRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const hoverColumnRef = useRef(null);
+  const suppressClickRef = useRef(false);
+  const sessionCleanupRef = useRef(null);
+  const autoScrollRafRef = useRef(null);
+  useEffect(() => () => sessionCleanupRef.current?.(), []);
+  const registerColumn = useCallback((id, handle) => {
+    if (handle) columnHandles.current.set(id, handle);else columnHandles.current.delete(id);
+  }, []);
+  const board = useMemo(() => columns.map(c => ({
+    id: c.id,
+    title: c.title,
+    count: c.items.length
+  })), [columns]);
+  const announce = useCallback(a => {
+    const text = a.type === "lift" ? t("Lifted {{card}} in {{column}}, position {{position}} of {{count}}. Use arrow keys to move, space to drop, escape to cancel.", a) : a.type === "move" ? t("Moved {{card}} to {{column}}, position {{position}} of {{count}}.", a) : a.type === "drop" ? t("Dropped {{card}} in {{column}}, position {{position}} of {{count}}.", a) : t("Movement cancelled. {{card}} returned to {{column}}.", a);
+    setAnnouncement(text);
+  }, [t]);
+  const getColumnStart = useCallback((handle, index) => {
+    const state = handle.getVirtualState();
+    const found = state.items.find(it => it.index === index);
+    return found ? found.start : index * estimateSize;
+  }, [estimateSize]);
+  const gapRectInBoard = useCallback((columnId, gapIndex, session) => {
+    const handle = columnHandles.current.get(columnId);
+    const container = containerRef.current;
+    if (!handle?.scrollEl || !container) return null;
+    const state = handle.getVirtualState();
+    const gapY = gapPosition({
+      gapIndex,
+      sourceIndex: columnId === session.sourceColumnId ? session.sourceIndex : null,
+      count: state.count,
+      size: session.size,
+      totalSize: state.totalSize,
+      getStart: index => getColumnStart(handle, index)
+    });
+    const scrollRect = handle.scrollEl.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    return {
+      x: scrollRect.left - containerRect.left + CARD_INSET_PX,
+      y: scrollRect.top - containerRect.top + gapY - handle.scrollEl.scrollTop + CARD_INSET_PX
+    };
+  }, [getColumnStart]);
+  const hitTest = useCallback((clientX, clientY, session) => {
+    const el = typeof document !== "undefined" ? document.elementFromPoint(clientX, clientY) : null;
+    const columnEl = el?.closest?.("[data-kanban-column]");
+    const columnId = columnEl?.getAttribute("data-kanban-column") ?? null;
+    hoverColumnRef.current = columnId;
+    if (!columnId) {
+      return {
+        columnId: session.sourceColumnId,
+        index: session.sourceIndex
+      };
+    }
+    const handle = columnHandles.current.get(columnId);
+    if (!handle?.scrollEl) return {
+      columnId,
+      index: 0
+    };
+    const rect = handle.scrollEl.getBoundingClientRect();
+    const localY = clientY - rect.top + handle.scrollEl.scrollTop;
+    const state = handle.getVirtualState();
+    const index = insertionIndexForY({
+      localY,
+      items: state.items,
+      sourceIndex: columnId === session.sourceColumnId ? session.sourceIndex : null,
+      count: state.count,
+      size: session.size
+    });
+    return {
+      columnId,
+      index
+    };
+  }, []);
+  const getBoardScrollEl = useCallback(() => {
+    const node = boardScrollRef.current;
+    return node?.getScrollableNode?.() ?? node;
+  }, []);
+  const stopAutoScroll = useCallback(() => {
+    if (autoScrollRafRef.current != null) cancelAnimationFrame(autoScrollRafRef.current);
+    autoScrollRafRef.current = null;
+  }, []);
+  const startAutoScroll = useCallback(() => {
+    stopAutoScroll();
+    const tick = () => {
+      const session = dragRef.current;
+      if (!session || session.mode !== "pointer") {
+        autoScrollRafRef.current = null;
+        return;
+      }
+      const {
+        x,
+        y
+      } = pointerRef.current;
+      let scrolled = false;
+      const hoverId = hoverColumnRef.current;
+      const handle = hoverId ? columnHandles.current.get(hoverId) : null;
+      if (handle?.scrollEl) {
+        const rect = handle.scrollEl.getBoundingClientRect();
+        const vy = autoScrollVelocity({
+          pos: y,
+          start: rect.top,
+          end: rect.bottom,
+          edge: AUTO_SCROLL_EDGE_PX,
+          maxSpeed: AUTO_SCROLL_MAX_SPEED
+        });
+        if (vy !== 0) {
+          handle.scrollEl.scrollTop += vy;
+          scrolled = true;
+        }
+      }
+      const boardEl = getBoardScrollEl();
+      if (boardEl) {
+        const rect = boardEl.getBoundingClientRect();
+        const vx = autoScrollVelocity({
+          pos: x,
+          start: rect.left,
+          end: rect.right,
+          edge: AUTO_SCROLL_EDGE_PX,
+          maxSpeed: AUTO_SCROLL_MAX_SPEED
+        });
+        if (vx !== 0) {
+          boardEl.scrollLeft += vx;
+          scrolled = true;
+        }
+      }
+      if (scrolled) {
+        const target = hitTest(x, y, session);
+        setDrag(prev => prev && (prev.target.columnId !== target.columnId || prev.target.index !== target.index) ? {
+          ...prev,
+          target
+        } : prev);
+      }
+      autoScrollRafRef.current = requestAnimationFrame(tick);
+    };
+    autoScrollRafRef.current = requestAnimationFrame(tick);
+  }, [getBoardScrollEl, hitTest, stopAutoScroll]);
+  const endDrag = useCallback(commit => {
+    const session = dragRef.current;
+    if (!session) return;
+    stopAutoScroll();
+    sessionCleanupRef.current?.();
+    sessionCleanupRef.current = null;
+    const resolved = resolveDrop(session);
+    const crossColumn = resolved.to.columnId !== resolved.from.columnId;
+    const canCommit = commit && resolved.commit && (crossColumn ? Boolean(onCardMove) : Boolean(onCardReorder));
+    const dest = canCommit ? gapRectInBoard(resolved.to.columnId, resolved.to.index, session) : gapRectInBoard(resolved.from.columnId, resolved.from.index, session);
+    setDrag(null);
+    if (dest) {
+      setSettle({
+        item: session.item,
+        itemKey: session.itemKey,
+        width: session.width,
+        height: session.height,
+        to: dest
+      });
+    }
+    if (canCommit) {
+      announce(describeDragState("drop", session, board, session.itemLabel));
+      if (crossColumn) {
+        onCardMove?.(session.item, resolved.from.columnId, resolved.to.columnId, resolved.to.index);
+      } else {
+        onCardReorder?.(session.item, resolved.from.columnId, resolved.from.index, resolved.to.index);
+      }
+    } else {
+      announce(describeCancel(session, board, session.itemLabel));
+    }
+  }, [announce, board, gapRectInBoard, onCardMove, onCardReorder, stopAutoScroll]);
+  useEffect(() => {
+    if (!settle) return;
+    const el = containerRef.current?.querySelector("[data-kanban-overlay]");
+    if (!el || typeof requestAnimationFrame === "undefined") {
+      setSettle(null);
+      return;
+    }
+    let last = null;
+    let stableFrames = 0;
+    let raf = 0;
+    const check = () => {
+      const current = getComputedStyle(el).transform;
+      if (current === last) stableFrames += 1;else {
+        stableFrames = 0;
+        last = current;
+      }
+      if (stableFrames >= 3) {
+        setSettle(null);
+        return;
+      }
+      raf = requestAnimationFrame(check);
+    };
+    raf = requestAnimationFrame(check);
+    return () => cancelAnimationFrame(raf);
+  }, [settle]);
+  const beginDrag = useCallback((item, columnId, index, cardEl, clientX, clientY) => {
+    const wrapper = cardEl.closest("[data-index]");
+    const container = containerRef.current;
+    if (!wrapper || !container) return false;
+    const wrapperRect = wrapper.getBoundingClientRect();
+    const cardRect = cardEl.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    grabOffsetRef.current = {
+      x: clientX - cardRect.left,
+      y: clientY - cardRect.top
+    };
+    pointerRef.current = {
+      x: clientX,
+      y: clientY
+    };
+    hoverColumnRef.current = columnId;
+    const session = {
+      mode: "pointer",
+      item,
+      itemKey: getItemKey ? getItemKey(item, index) : void 0,
+      itemLabel: getItemLabel?.(item) ?? t("Card"),
+      sourceColumnId: columnId,
+      sourceIndex: index,
+      size: wrapperRect.height,
+      width: cardRect.width,
+      height: cardRect.height,
+      target: {
+        columnId,
+        index
+      },
+      initialPos: {
+        x: cardRect.left - containerRect.left,
+        y: cardRect.top - containerRect.top
+      }
+    };
+    setSettle(null);
+    setDrag(session);
+    dragRef.current = session;
+    announce(describeDragState("lift", session, board, session.itemLabel));
+    startAutoScroll();
+    return true;
+  }, [announce, board, getItemKey, getItemLabel, startAutoScroll, t]);
+  const handleCardPointerDown = useCallback((item, columnId, index, e) => {
+    if (!canDrag || typeof window === "undefined") return;
+    if (e.button != null && e.button !== 0) return;
+    if (dragRef.current) return;
+    sessionCleanupRef.current?.();
+    const cardEl = e.currentTarget;
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const pointerType = e.pointerType ?? "mouse";
+    let lifted = false;
+    let longPressTimer = null;
+    let prevUserSelect = "";
+    let prevCursor = "";
+    const lift = (x, y) => {
+      if (lifted) return;
+      lifted = beginDrag(item, columnId, index, cardEl, x, y);
+      if (!lifted) return;
+      prevUserSelect = document.body.style.userSelect;
+      document.body.style.userSelect = "none";
+      prevCursor = document.documentElement.style.cursor;
+      document.documentElement.style.cursor = "grabbing";
+    };
+    const teardown = () => {
+      if (longPressTimer != null) clearTimeout(longPressTimer);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onCancel);
+      window.removeEventListener("keydown", onKey, true);
+      window.removeEventListener("touchmove", onTouchMove);
+      window.removeEventListener("contextmenu", onContextMenu, true);
+      sessionCleanupRef.current = null;
+      if (lifted) {
+        document.body.style.userSelect = prevUserSelect;
+        document.documentElement.style.cursor = prevCursor;
+        suppressClickRef.current = true;
+        setTimeout(() => {
+          suppressClickRef.current = false;
+        }, 0);
+      }
+    };
+    const onMove = me => {
+      pointerRef.current = {
+        x: me.clientX,
+        y: me.clientY
+      };
+      if (!lifted) {
+        const travelled = Math.hypot(me.clientX - startX, me.clientY - startY);
+        if (pointerType === "mouse") {
+          if (travelled >= DRAG_THRESHOLD_PX) lift(me.clientX, me.clientY);
+        } else if (travelled >= DRAG_THRESHOLD_PX) {
+          teardown();
+        }
+        if (!lifted) return;
+      }
+      const containerRect = containerRef.current?.getBoundingClientRect();
+      overlayApiRef.current?.setPointer(me.clientX - (containerRect?.left ?? 0) - grabOffsetRef.current.x, me.clientY - (containerRect?.top ?? 0) - grabOffsetRef.current.y);
+      const session = dragRef.current;
+      if (!session) return;
+      const target = hitTest(me.clientX, me.clientY, session);
+      setDrag(prev => prev && (prev.target.columnId !== target.columnId || prev.target.index !== target.index) ? {
+        ...prev,
+        target
+      } : prev);
+    };
+    const onUp = () => {
+      const wasLifted = lifted;
+      teardown();
+      if (wasLifted) endDrag(true);
+    };
+    const onCancel = () => {
+      const wasLifted = lifted;
+      teardown();
+      if (wasLifted) endDrag(false);
+    };
+    const onKey = ke => {
+      if (ke.key !== "Escape") return;
+      ke.stopPropagation();
+      const wasLifted = lifted;
+      teardown();
+      if (wasLifted) endDrag(false);
+    };
+    const onTouchMove = te => {
+      if (lifted) te.preventDefault();
+    };
+    const onContextMenu = ce => {
+      if (lifted || longPressTimer != null) ce.preventDefault();
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+    window.addEventListener("keydown", onKey, true);
+    window.addEventListener("touchmove", onTouchMove, {
+      passive: false
+    });
+    window.addEventListener("contextmenu", onContextMenu, true);
+    sessionCleanupRef.current = () => {
+      const wasLifted = lifted;
+      teardown();
+      if (wasLifted) endDrag(false);
+    };
+    if (pointerType !== "mouse") {
+      longPressTimer = setTimeout(() => {
+        longPressTimer = null;
+        const p = pointerRef.current;
+        lift(p.x || startX, p.y || startY);
+      }, TOUCH_LONG_PRESS_MS);
+      pointerRef.current = {
+        x: startX,
+        y: startY
+      };
+    }
+  }, [beginDrag, canDrag, endDrag, hitTest]);
+  const keyboardOverlayPos = useCallback(session => gapRectInBoard(session.target.columnId, session.target.index, session) ?? void 0, [gapRectInBoard]);
+  const liftFocusedCard = useCallback(() => {
+    if (!canDrag || dragRef.current) return false;
+    const column = columns[focusedCol];
+    const item = column?.items[focusedCard];
+    if (!column || item == null) return false;
+    const kb = keyboardLift(board, column.id, focusedCard);
+    if (!kb) return false;
+    const handle = columnHandles.current.get(column.id);
+    const wrapper = handle?.scrollEl?.querySelector(`[data-index="${focusedCard}"]`);
+    const cardEl = wrapper?.firstElementChild ?? wrapper;
+    if (!wrapper || !cardEl) return false;
+    const wrapperRect = wrapper.getBoundingClientRect();
+    const cardRect = cardEl.getBoundingClientRect();
+    const session = {
+      mode: "keyboard",
+      item,
+      itemKey: getItemKey ? getItemKey(item, focusedCard) : void 0,
+      itemLabel: getItemLabel?.(item) ?? t("Card"),
+      sourceColumnId: column.id,
+      sourceIndex: focusedCard,
+      size: wrapperRect.height,
+      width: cardRect.width,
+      height: cardRect.height,
+      target: kb.target
+    };
+    session.keyboardPos = keyboardOverlayPos(session);
+    setSettle(null);
+    setDrag(session);
+    dragRef.current = session;
+    announce(describeDragState("lift", session, board, session.itemLabel));
+    return true;
+  }, [announce, board, canDrag, columns, focusedCard, focusedCol, getItemKey, getItemLabel, keyboardOverlayPos, t]);
+  const moveKeyboardDrag = useCallback(direction => {
+    const session = dragRef.current;
+    if (!session || session.mode !== "keyboard") return false;
+    const next = keyboardMove(session, board, direction);
+    if (next === session) return true;
+    const updated = {
+      ...session,
+      target: next.target
+    };
+    const handle = columnHandles.current.get(next.target.columnId);
+    handle?.scrollToIndex(next.target.index);
+    updated.keyboardPos = keyboardOverlayPos(updated);
+    setDrag(updated);
+    dragRef.current = updated;
+    announce(describeDragState("move", updated, board, updated.itemLabel));
+    requestAnimationFrame(() => {
+      const current = dragRef.current;
+      if (!current || current.mode !== "keyboard") return;
+      const pos = keyboardOverlayPos(current);
+      if (pos) {
+        const moved = {
+          ...current,
+          keyboardPos: pos
+        };
+        setDrag(moved);
+        dragRef.current = moved;
+      }
+    });
+    return true;
+  }, [announce, board, keyboardOverlayPos]);
   const hotkeyOpts = {
     target: containerRef
   };
   useHotkey(hotkeyOverrides?.nextColumn ?? "ArrowRight", () => {
+    if (moveKeyboardDrag("right")) return;
     setFocusedCol(prev => {
       const next = prev < 0 ? 0 : Math.min(prev + 1, columns.length - 1);
       const colItems = columns[next]?.items ?? [];
@@ -43,6 +499,7 @@ function Kanban({
     });
   }, hotkeyOpts);
   useHotkey(hotkeyOverrides?.prevColumn ?? "ArrowLeft", () => {
+    if (moveKeyboardDrag("left")) return;
     setFocusedCol(prev => {
       const next = prev < 0 ? columns.length - 1 : Math.max(prev - 1, 0);
       const colItems = columns[next]?.items ?? [];
@@ -51,6 +508,7 @@ function Kanban({
     });
   }, hotkeyOpts);
   useHotkey(hotkeyOverrides?.nextCard ?? "ArrowDown", () => {
+    if (moveKeyboardDrag("down")) return;
     if (focusedCol < 0) {
       setFocusedCol(0);
       setFocusedCard(0);
@@ -60,6 +518,7 @@ function Kanban({
     setFocusedCard(prev => prev < 0 ? 0 : Math.min(prev + 1, colItems.length - 1));
   }, hotkeyOpts);
   useHotkey(hotkeyOverrides?.prevCard ?? "ArrowUp", () => {
+    if (moveKeyboardDrag("up")) return;
     if (focusedCol < 0) {
       setFocusedCol(0);
       setFocusedCard(0);
@@ -69,6 +528,10 @@ function Kanban({
     setFocusedCard(prev => prev < 0 ? colItems.length - 1 : Math.max(prev - 1, 0));
   }, hotkeyOpts);
   useHotkey(hotkeyOverrides?.select ?? "Enter", () => {
+    if (dragRef.current?.mode === "keyboard") {
+      endDrag(true);
+      return;
+    }
     if (focusedCol >= 0 && focusedCard >= 0) {
       const col = columns[focusedCol];
       const item = col?.items[focusedCard];
@@ -77,15 +540,43 @@ function Kanban({
       }
     }
   }, hotkeyOpts);
-  return /* @__PURE__ */jsx(YStack, {
+  useHotkey(hotkeyOverrides?.lift ?? "Space", () => {
+    if (dragRef.current?.mode === "keyboard") {
+      endDrag(true);
+      return;
+    }
+    liftFocusedCard();
+  }, hotkeyOpts);
+  useHotkey(hotkeyOverrides?.cancel ?? "Escape", () => {
+    if (dragRef.current?.mode === "keyboard") endDrag(false);
+  }, hotkeyOpts);
+  const boardLoading = !error && isLoading && columns.every(c => c.items.length === 0);
+  const boardEmpty = !error && columns.length === 0;
+  const dragContext = drag ? {
+    sourceColumnId: drag.sourceColumnId,
+    sourceIndex: drag.sourceIndex,
+    size: drag.size,
+    target: drag.target,
+    keyboard: drag.mode === "keyboard"
+  } : null;
+  const overlaySession = drag ?? settle;
+  return /* @__PURE__ */jsx(AsyncBoundary, {
+    loading: boardLoading,
+    empty: boardEmpty,
+    error,
+    onRetry,
+    layout: "kanban",
+    emptyTitle: "No columns",
     ...stackProps,
-    children: /* @__PURE__ */jsx(View, {
+    children: /* @__PURE__ */jsxs(View, {
       ref: containerRef,
       tabIndex: 0,
       role: "grid",
-      "aria-label": "Kanban board",
+      "aria-label": t("Kanban board"),
       outlineWidth: 0,
-      children: /* @__PURE__ */jsx(ScrollView, {
+      position: "relative",
+      children: [/* @__PURE__ */jsx(ScrollView, {
+        ref: boardScrollRef,
         horizontal: true,
         showsHorizontalScrollIndicator: false,
         children: /* @__PURE__ */jsx(XStack, {
@@ -103,11 +594,105 @@ function Kanban({
             overscan,
             emptyColumnMessage,
             onCardSelect,
+            onCardPointerDown: canDrag ? handleCardPointerDown : void 0,
+            suppressClickRef,
+            registerColumn,
+            drag: dragContext,
+            settlingKey: settle?.itemKey,
             onLoadMore,
+            getItemKey,
             hasMore,
             isLoading
           }, column.id))
         })
+      }), overlaySession && /* @__PURE__ */jsx(KanbanDragOverlay, {
+        phase: drag ? drag.mode : "settling",
+        width: overlaySession.width,
+        height: overlaySession.height,
+        initialPos: drag?.initialPos,
+        keyboardPos: drag?.keyboardPos,
+        settleTo: settle?.to,
+        transition: knobProps.transition,
+        registerApi: api => {
+          overlayApiRef.current = api;
+        },
+        knobRadius: knobProps.borderRadius,
+        sizeToken: knobProps.sizeToken,
+        children: renderCard(overlaySession.item)
+      }), /* @__PURE__ */jsx(View, {
+        "aria-live": "assertive",
+        "aria-atomic": true,
+        "data-kanban-announcer": true,
+        position: "absolute",
+        width: 1,
+        height: 1,
+        overflow: "hidden",
+        opacity: 0,
+        pointerEvents: "none",
+        children: /* @__PURE__ */jsx(Text, {
+          children: announcement
+        })
+      })]
+    })
+  });
+}
+function KanbanDragOverlay({
+  phase,
+  width,
+  height,
+  initialPos,
+  keyboardPos,
+  settleTo,
+  transition,
+  registerApi,
+  knobRadius,
+  sizeToken,
+  children
+}) {
+  const [pointerPos, setPointerPos] = useState(initialPos ?? null);
+  useEffect(() => {
+    registerApi({
+      setPointer: (x, y) => setPointerPos({
+        x,
+        y
+      })
+    });
+  }, [registerApi]);
+  const pos = phase === "settling" && settleTo ? settleTo : phase === "keyboard" && keyboardPos ? keyboardPos : pointerPos ?? initialPos ?? keyboardPos ?? settleTo ?? null;
+  if (!pos) return null;
+  const lifted = phase !== "settling";
+  return /* @__PURE__ */jsx(View, {
+    "data-kanban-overlay": true,
+    "data-kanban-overlay-phase": phase,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    x: pos.x,
+    y: pos.y,
+    width,
+    height,
+    pointerEvents: "none",
+    zIndex: 1e3,
+    transition: phase === "pointer" ? "none" : transition,
+    children: /* @__PURE__ */jsx(View, {
+      transition,
+      enterStyle: {
+        scale: 1,
+        rotate: "0deg"
+      },
+      scale: lifted ? 1.03 : 1,
+      rotate: lifted ? "2.5deg" : "0deg",
+      ...(lifted ? LIFT_SHADOW : void 0),
+      ...knobRadius,
+      backgroundColor: "$background",
+      overflow: "hidden",
+      height: "100%",
+      children: /* @__PURE__ */jsx(Card, {
+        size: sizeToken,
+        borderWidth: 0,
+        backgroundColor: "transparent",
+        height: "100%",
+        children
       })
     })
   });
@@ -125,21 +710,70 @@ function KanbanColumnView({
   overscan,
   emptyColumnMessage,
   onCardSelect,
+  onCardPointerDown,
+  suppressClickRef,
+  registerColumn,
+  drag,
+  settlingKey,
   onLoadMore,
+  getItemKey,
   hasMore,
   isLoading
 }) {
+  const {
+    t
+  } = useTranslation();
   const {
     knobProps
   } = useResolvedKnobs();
   const parentRef = useRef(null);
+  const itemCount = useAsyncCount(column.items.length);
   const virtualizer = useVirtualizer({
     count: column.items.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => estimateSize,
-    overscan
+    overscan,
+    ...(getItemKey && {
+      getItemKey: index => getItemKey(column.items[index], index)
+    })
   });
   const isActiveColumn = columnIndex === focusedColumnIndex;
+  const isSource = drag?.sourceColumnId === column.id;
+  const gapIndex = drag?.target.columnId === column.id ? drag.target.index : null;
+  const isDropTarget = gapIndex != null;
+  const [flipReady, setFlipReady] = useState(false);
+  useEffect(() => {
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setFlipReady(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, []);
+  useEffect(() => {
+    registerColumn(column.id, {
+      scrollEl: parentRef.current,
+      getVirtualState: () => ({
+        items: virtualizer.getVirtualItems().map(v => ({
+          index: v.index,
+          start: v.start,
+          size: v.size
+        })),
+        totalSize: virtualizer.getTotalSize(),
+        count: column.items.length
+      }),
+      scrollToIndex: index => {
+        if (column.items.length > 0) {
+          virtualizer.scrollToIndex(Math.min(index, column.items.length - 1), {
+            align: "auto"
+          });
+        }
+      }
+    });
+    return () => registerColumn(column.id, null);
+  }, [registerColumn, column.id, column.items.length, virtualizer]);
   useEffect(() => {
     if (isActiveColumn && focusedCardIndex >= 0 && focusedCardIndex < column.items.length) {
       virtualizer.scrollToIndex(focusedCardIndex, {
@@ -167,16 +801,71 @@ function KanbanColumnView({
     });
     return () => el.removeEventListener("scroll", handleScroll);
   }, [handleScroll]);
+  const seenKeysRef = useRef(/* @__PURE__ */new Set());
+  const lastRenderedRef = useRef(/* @__PURE__ */new Map());
+  const prevKeysRef = useRef(null);
+  const [leaving, setLeaving] = useState([]);
+  const currentKeys = useMemo(() => {
+    const keys = /* @__PURE__ */new Set();
+    column.items.forEach((item, index) => keys.add(getItemKey ? getItemKey(item, index) : index));
+    return keys;
+  }, [column.items, getItemKey]);
+  useEffect(() => {
+    const prev = prevKeysRef.current;
+    prevKeysRef.current = currentKeys;
+    if (!prev || !getItemKey) return;
+    const gone = [];
+    for (const key of prev) {
+      if (currentKeys.has(key) || key === settlingKey) continue;
+      const snapshot = lastRenderedRef.current.get(key);
+      if (snapshot) gone.push({
+        key,
+        ...snapshot
+      });
+    }
+    if (gone.length > 0) {
+      setLeaving(existing => {
+        const seen = new Set(existing.map(l => l.key));
+        return [...existing, ...gone.filter(g => !seen.has(g.key))];
+      });
+    }
+  }, [currentKeys, getItemKey, settlingKey]);
+  useEffect(() => {
+    if (leaving.length === 0) return;
+    const raf = requestAnimationFrame(() => setLeaving([]));
+    return () => cancelAnimationFrame(raf);
+  }, [leaving]);
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const gapOpensColumn = isDropTarget && !isSource;
+  const contentHeight = totalSize + (gapOpensColumn ? drag?.size ?? 0 : 0);
+  const getStart = useCallback(index => {
+    const found = virtualItems.find(v => v.index === index);
+    return found ? found.start : index * estimateSize;
+  }, [virtualItems, estimateSize]);
+  const gapY = gapIndex != null && drag ? gapPosition({
+    gapIndex,
+    sourceIndex: isSource ? drag.sourceIndex : null,
+    count: column.items.length,
+    size: drag.size,
+    totalSize,
+    getStart
+  }) : null;
+  const isEmpty = column.items.length === 0;
+  const wrapperTransition = drag != null ? knobProps.transition : flipReady && !virtualizer.isScrolling ? knobProps.transition : void 0;
   return /* @__PURE__ */jsxs(Card, {
     size: knobProps.sizeToken,
+    ...knobProps.borderRadius,
     ...{
-      backgroundColor: componentColors.surface.background
+      backgroundColor: isDropTarget ? componentColors.interactive.background : componentColors.surface.background
     },
+    transition: knobProps.transition,
     width: columnWidth,
     minHeight: minColumnHeight,
     borderWidth: isActiveColumn ? 2 : 1,
-    borderColor: isActiveColumn ? "$accentBackground" : "$borderColor",
+    borderColor: isDropTarget ? componentColors.interactive.border : isActiveColumn ? "$accentBackground" : "$borderColor",
     overflow: "hidden",
+    "data-kanban-column": column.id,
     children: [/* @__PURE__ */jsx(ListItem, {
       title: column.title,
       icon: column.color ? /* @__PURE__ */jsx(YStack, {
@@ -185,7 +874,7 @@ function KanbanColumnView({
         borderRadius: 4,
         backgroundColor: column.color
       }) : void 0,
-      iconAfter: /* @__PURE__ */jsx(Text, {
+      iconAfter: itemCount !== void 0 ? /* @__PURE__ */jsx(Text, {
         color: componentColors.text.muted,
         fontSize: knobProps.sizeToken,
         ...{
@@ -193,70 +882,180 @@ function KanbanColumnView({
         },
         paddingHorizontal: "$2",
         borderRadius: knobProps.borderRadius.borderRadius,
-        children: column.items.length
-      }),
+        "data-async-count": true,
+        children: itemCount
+      }) : void 0,
       size: knobProps.sizeToken,
       borderBottomWidth: 1,
       borderBottomColor: "$borderColor"
-    }), column.items.length === 0 ? /* @__PURE__ */jsx(YStack, {
-      ...knobProps.panelPadding,
-      alignItems: "center",
-      justifyContent: "center",
-      opacity: 0.5,
-      flex: 1,
-      children: /* @__PURE__ */jsx(Text, {
-        color: componentColors.text.muted,
-        fontSize: "$2",
-        children: emptyColumnMessage
-      })
-    }) : /* @__PURE__ */jsx(View, {
+    }), /* @__PURE__ */jsxs(View, {
       ref: parentRef,
+      "data-kanban-column-scroll": column.id,
       style: {
         flex: 1,
         overflow: "auto",
         minHeight: minColumnHeight - 60
       },
-      children: /* @__PURE__ */jsx(View, {
+      pointerEvents: drag ? "none" : void 0,
+      children: [isEmpty ? !isDropTarget && /* @__PURE__ */jsx(EmptyState, {
+        compact: true,
+        title: emptyColumnMessage,
+        opacity: 0.5,
+        flex: 1
+      }) : /* @__PURE__ */jsxs(View, {
         style: {
-          height: virtualizer.getTotalSize(),
+          height: contentHeight,
           width: "100%",
           position: "relative"
         },
-        children: virtualizer.getVirtualItems().map(virtualItem => {
+        children: [virtualItems.map(virtualItem => {
           const item = column.items[virtualItem.index];
+          const itemKey = getItemKey ? getItemKey(item, virtualItem.index) : virtualItem.index;
           const isFocused = isActiveColumn && focusedCardIndex === virtualItem.index;
+          const isDragged = isSource && drag != null && virtualItem.index === drag.sourceIndex;
+          let y = virtualItem.start;
+          let ghost = false;
+          let hidden = false;
+          if (drag) {
+            if (isDragged) {
+              if (gapIndex != null && gapY != null) {
+                y = gapY;
+                ghost = true;
+              } else {
+                hidden = true;
+              }
+            } else {
+              y += siblingOffset({
+                index: virtualItem.index,
+                sourceIndex: isSource && drag ? drag.sourceIndex : null,
+                gapIndex,
+                size: drag.size
+              }) || 0;
+            }
+          }
+          if (getItemKey && settlingKey != null && itemKey === settlingKey) {
+            hidden = true;
+          }
+          if (getItemKey) {
+            lastRenderedRef.current.set(itemKey, {
+              item,
+              y: virtualItem.start,
+              size: virtualItem.size
+            });
+          }
+          const isNew = flipReady && getItemKey != null && !seenKeysRef.current.has(itemKey);
+          seenKeysRef.current.add(itemKey);
           return /* @__PURE__ */jsx(View, {
             ref: virtualizer.measureElement,
-            style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              transform: `translateY(${virtualItem.start}px)`,
-              padding: 4
+            ...{
+              "data-index": virtualItem.index
             },
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            y,
+            padding: CARD_INSET_PX,
+            transition: wrapperTransition,
+            opacity: hidden ? 0 : ghost ? 0.4 : 1,
+            pointerEvents: hidden ? "none" : void 0,
             children: /* @__PURE__ */jsx(Card, {
               id: `${kanbanId}-col-${columnIndex}-card-${virtualItem.index}`,
               size: knobProps.sizeToken,
+              ...knobProps.borderRadius,
               elevation: knobProps.elevation,
+              transition: knobProps.transition,
+              ...(isNew && {
+                enterStyle: {
+                  opacity: 0,
+                  scale: 0.97
+                }
+              }),
               borderWidth: 1,
-              borderColor: "$borderColor",
+              borderColor: ghost ? componentColors.interactive.border : "$borderColor",
+              borderStyle: ghost ? "dashed" : void 0,
               backgroundColor: isFocused ? "$accentBackground" : void 0,
               hoverStyle: {
-                scale: 0.98,
                 borderColor: "$accentBackground"
               },
               pressStyle: {
-                scale: 0.97
+                scale: 0.98
               },
               overflow: "hidden",
-              onPress: onCardSelect ? () => onCardSelect(item, column.id) : void 0,
-              cursor: onCardSelect ? "pointer" : void 0,
+              "data-kanban-card": String(itemKey),
+              ...(onCardPointerDown && {
+                "data-kanban-draggable": "true"
+              }),
+              onPress: onCardSelect ? () => {
+                if (suppressClickRef.current) return;
+                onCardSelect(item, column.id);
+              } : void 0,
+              cursor: onCardPointerDown ? "grab" : onCardSelect ? "pointer" : void 0,
+              ...(onCardPointerDown && {
+                onPointerDown: e => onCardPointerDown(item, column.id, virtualItem.index, e)
+              }),
               children: renderCard(item)
             })
           }, virtualItem.key);
-        })
-      })
+        }), /* @__PURE__ */jsx(AnimatePresence, {
+          children: leaving.map(l => /* @__PURE__ */jsx(View, {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            y: l.y,
+            padding: CARD_INSET_PX,
+            pointerEvents: "none",
+            transition: knobProps.transition,
+            exitStyle: {
+              opacity: 0,
+              scale: 0.97
+            },
+            children: /* @__PURE__ */jsx(Card, {
+              size: knobProps.sizeToken,
+              ...knobProps.borderRadius,
+              borderWidth: 1,
+              borderColor: "$borderColor",
+              overflow: "hidden",
+              children: renderCard(l.item)
+            })
+          }, `leaving-${String(l.key)}`))
+        })]
+      }), /* @__PURE__ */jsx(AnimatePresence, {
+        children: drag && gapIndex != null && !isSource && /* @__PURE__ */jsx(View, {
+          "data-kanban-slot": column.id,
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          y: gapY ?? 0,
+          height: drag.size,
+          padding: CARD_INSET_PX,
+          pointerEvents: "none",
+          transition: knobProps.transition,
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          },
+          children: /* @__PURE__ */jsx(View, {
+            flex: 1,
+            ...knobProps.borderRadius,
+            borderStyle: "dashed",
+            borderColor: componentColors.interactive.border,
+            backgroundColor: componentColors.interactive.background,
+            opacity: 0.8,
+            alignItems: "center",
+            justifyContent: "center",
+            children: isEmpty && /* @__PURE__ */jsx(Text, {
+              color: componentColors.text.muted,
+              fontSize: "$2",
+              children: t("Drop here")
+            })
+          })
+        }, "kanban-slot")
+      })]
     }), isLoading && /* @__PURE__ */jsx(YStack, {
       padding: "$2",
       alignItems: "center",