@multiplatform.one/components 6.0.4 → 6.3.0

package/dist/esm/views/Kanban.native.js

@@ -1,25 +1,57 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FlashList } from "@shopify/flash-list";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import React, { useCallback, useId, useRef, useState } from "react";
+import { animationConfig, useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AccessibilityInfo, Animated } from "react-native";
 import { Card, ListItem, ScrollView, Spinner, Text, View, XStack, YStack } from "tamagui";
+import { AsyncBoundary, useAsyncCount } from "../layouts/AsyncBoundary.native.js";
+import { autoScrollVelocity, describeCancel, describeDragState, gapPosition, resolveDrop, siblingOffset, uniformInsertionIndex } from "./kanbanDnd.native.js";
+function _type_of(obj) {
+  "@swc/helpers - typeof";
+
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+var DRAG_THRESHOLD_PX = 4;
+var TOUCH_LONG_PRESS_MS = 200;
+var AUTO_SCROLL_EDGE_PX = 48;
+var AUTO_SCROLL_MAX_SPEED = 16;
+var LIFT_SHADOW = {
+  shadowColor: "#000",
+  shadowOffset: {
+    width: 0,
+    height: 10
+  },
+  shadowOpacity: 0.15,
+  shadowRadius: 20,
+  elevation: 8
+};
 function Kanban(param) {
   var {
     columns,
     renderCard,
-    onCardMove: _onCardMove,
+    onCardMove,
+    onCardReorder,
     onCardSelect,
     onLoadMore,
     hasMore = false,
     isLoading = false,
+    error = null,
+    onRetry,
     columnWidth: columnWidthProp,
     minColumnHeight: minColumnHeightProp,
     estimateSize: estimateSizeProp,
     overscan = 5,
-    emptyColumnMessage = "No items",
+    emptyColumnMessage: emptyColumnMessageProp,
+    getItemKey,
+    getItemLabel,
     hotkeys: _hotkeyOverrides,
     ...stackProps
   } = param;
+  var {
+    t
+  } = useTranslation();
+  var emptyColumnMessage = emptyColumnMessageProp !== null && emptyColumnMessageProp !== void 0 ? emptyColumnMessageProp : t("No items");
   var {
     knobProps
   } = useResolvedKnobs();
@@ -28,31 +60,538 @@ function Kanban(param) {
   var minColumnHeight = minColumnHeightProp !== null && minColumnHeightProp !== void 0 ? minColumnHeightProp : sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
   var estimateSize = estimateSizeProp !== null && estimateSizeProp !== void 0 ? estimateSizeProp : sz === "$3" ? 64 : sz === "$5" ? 96 : 80;
   var kanbanId = useId();
-  return /* @__PURE__ */_jsx(YStack, {
+  var boardLoading = !error && isLoading && columns.every(function (c) {
+    return c.items.length === 0;
+  });
+  var boardEmpty = !error && columns.length === 0;
+  var canDrag = Boolean(onCardMove || onCardReorder);
+  var [drag, setDrag] = useState(null);
+  var dragStateRef = useRef(null);
+  dragStateRef.current = drag;
+  var columnHandles = useRef(/* @__PURE__ */new Map());
+  var containerNodeRef = useRef(null);
+  var containerOffsetRef = useRef({
+    x: 0,
+    y: 0
+  });
+  var boardScrollRef = useRef(null);
+  var boardScrollXRef = useRef(0);
+  var boardLayoutRef = useRef(null);
+  var fingerRef = useRef({
+    x: 0,
+    y: 0
+  });
+  var suppressTapRef = useRef(false);
+  var autoScrollRafRef = useRef(null);
+  var ghostPos = useRef(new Animated.ValueXY({
+    x: 0,
+    y: 0
+  })).current;
+  var liftValue = useRef(new Animated.Value(0)).current;
+  var gestureRef = useRef(null);
+  var board = useMemo(function () {
+    return columns.map(function (c) {
+      return {
+        id: c.id,
+        title: c.title,
+        count: c.items.length
+      };
+    });
+  }, [columns]);
+  var springToken = typeof knobProps.transition === "string" && knobProps.transition in animationConfig ? knobProps.transition : knobProps.transition ? "quick" : null;
+  var getHandle = useCallback(function (columnId) {
+    var handle = columnHandles.current.get(columnId);
+    if (!handle) {
+      handle = {
+        node: null,
+        list: null,
+        scrollOffset: 0,
+        layout: null
+      };
+      columnHandles.current.set(columnId, handle);
+    }
+    return handle;
+  }, []);
+  var announce = useCallback(function (type, session, label) {
+    var _AccessibilityInfo_announceForAccessibility;
+    var a = type === "cancel" ? describeCancel(session, board, label) : describeDragState(type, session, board, label);
+    var text = a.type === "cancel" ? t("Movement cancelled. {{card}} returned to {{column}}.", a) : a.type === "lift" ? t("Lifted {{card}} in {{column}}, position {{position}} of {{count}}.", a) : a.type === "move" ? t("Moved {{card}} to {{column}}, position {{position}} of {{count}}.", a) : t("Dropped {{card}} in {{column}}, position {{position}} of {{count}}.", a);
+    (_AccessibilityInfo_announceForAccessibility = AccessibilityInfo.announceForAccessibility) === null || _AccessibilityInfo_announceForAccessibility === void 0 ? void 0 : _AccessibilityInfo_announceForAccessibility.call(AccessibilityInfo, text);
+  }, [board, t]);
+  var measureLayouts = useCallback(function () {
+    var _containerNodeRef_current_measureInWindow, _containerNodeRef_current, _boardScrollRef_current_measureInWindow, _boardScrollRef_current;
+    (_containerNodeRef_current = containerNodeRef.current) === null || _containerNodeRef_current === void 0 ? void 0 : (_containerNodeRef_current_measureInWindow = _containerNodeRef_current.measureInWindow) === null || _containerNodeRef_current_measureInWindow === void 0 ? void 0 : _containerNodeRef_current_measureInWindow.call(_containerNodeRef_current, function (x, y) {
+      containerOffsetRef.current = {
+        x,
+        y
+      };
+    });
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      var _loop = function () {
+        var [, handle] = _step.value;
+        var _handle_node_measureInWindow, _handle_node;
+        (_handle_node = handle.node) === null || _handle_node === void 0 ? void 0 : (_handle_node_measureInWindow = _handle_node.measureInWindow) === null || _handle_node_measureInWindow === void 0 ? void 0 : _handle_node_measureInWindow.call(_handle_node, function (x, y, width, height) {
+          handle.layout = {
+            x,
+            y,
+            width,
+            height
+          };
+        });
+      };
+      for (var _iterator = columnHandles.current[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _loop();
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    (_boardScrollRef_current = boardScrollRef.current) === null || _boardScrollRef_current === void 0 ? void 0 : (_boardScrollRef_current_measureInWindow = _boardScrollRef_current.measureInWindow) === null || _boardScrollRef_current_measureInWindow === void 0 ? void 0 : _boardScrollRef_current_measureInWindow.call(_boardScrollRef_current, function (x, y, width) {
+      boardLayoutRef.current = {
+        x,
+        y,
+        width
+      };
+    });
+  }, []);
+  var hitTest = useCallback(function (pageX, pageY, session) {
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      var _loop = function () {
+        var [columnId, handle] = _step.value;
+        var layout = handle.layout;
+        if (!layout) return "continue";
+        if (pageX < layout.x || pageX > layout.x + layout.width || pageY < layout.y - 40 || pageY > layout.y + layout.height) {
+          return "continue";
+        }
+        var column = columns.find(function (c) {
+          return c.id === columnId;
+        });
+        if (!column) return "continue";
+        var localY = pageY - layout.y + handle.scrollOffset;
+        var wdCount = column.items.length - (columnId === session.sourceColumnId ? 1 : 0);
+        var index = uniformInsertionIndex(localY, session.size, Math.max(wdCount, 0));
+        return {
+          v: {
+            columnId,
+            index
+          }
+        };
+      };
+      for (var _iterator = columnHandles.current[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var _ret = _loop();
+        if (_type_of(_ret) === "object") return _ret.v;
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    return {
+      columnId: session.sourceColumnId,
+      index: session.sourceIndex
+    };
+  }, [columns]);
+  var gapPositionInContainer = useCallback(function (session) {
+    var handle = columnHandles.current.get(session.target.columnId);
+    var layout = handle === null || handle === void 0 ? void 0 : handle.layout;
+    var column = columns.find(function (c) {
+      return c.id === session.target.columnId;
+    });
+    if (!handle || !layout || !column) return null;
+    var gapY = gapPosition({
+      gapIndex: session.target.index,
+      sourceIndex: session.target.columnId === session.sourceColumnId ? session.sourceIndex : null,
+      count: column.items.length,
+      size: session.size,
+      totalSize: column.items.length * session.size,
+      getStart: function getStart(index) {
+        return index * session.size;
+      }
+    });
+    return {
+      x: layout.x - containerOffsetRef.current.x,
+      y: layout.y - containerOffsetRef.current.y + gapY - handle.scrollOffset
+    };
+  }, [columns]);
+  var stopAutoScroll = useCallback(function () {
+    if (autoScrollRafRef.current != null) cancelAnimationFrame(autoScrollRafRef.current);
+    autoScrollRafRef.current = null;
+  }, []);
+  var startAutoScroll = useCallback(function () {
+    stopAutoScroll();
+    var tick = function tick1() {
+      var session = dragStateRef.current;
+      if (!session || session.settling) {
+        autoScrollRafRef.current = null;
+        return;
+      }
+      var {
+        x,
+        y
+      } = fingerRef.current;
+      var handle = columnHandles.current.get(session.target.columnId);
+      var layout = handle === null || handle === void 0 ? void 0 : handle.layout;
+      var scrolled = false;
+      if (handle && layout) {
+        var vy = autoScrollVelocity({
+          pos: y,
+          start: layout.y,
+          end: layout.y + layout.height,
+          edge: AUTO_SCROLL_EDGE_PX,
+          maxSpeed: AUTO_SCROLL_MAX_SPEED
+        });
+        if (vy !== 0 && handle.list) {
+          handle.scrollOffset = Math.max(handle.scrollOffset + vy, 0);
+          handle.list.scrollToOffset({
+            offset: handle.scrollOffset,
+            animated: false
+          });
+          scrolled = true;
+        }
+      }
+      var boardLayout = boardLayoutRef.current;
+      if (boardLayout && boardScrollRef.current) {
+        var vx = autoScrollVelocity({
+          pos: x,
+          start: boardLayout.x,
+          end: boardLayout.x + boardLayout.width,
+          edge: AUTO_SCROLL_EDGE_PX,
+          maxSpeed: AUTO_SCROLL_MAX_SPEED
+        });
+        if (vx !== 0) {
+          var _boardScrollRef_current_scrollTo, _boardScrollRef_current;
+          boardScrollXRef.current = Math.max(boardScrollXRef.current + vx, 0);
+          (_boardScrollRef_current_scrollTo = (_boardScrollRef_current = boardScrollRef.current).scrollTo) === null || _boardScrollRef_current_scrollTo === void 0 ? void 0 : _boardScrollRef_current_scrollTo.call(_boardScrollRef_current, {
+            x: boardScrollXRef.current,
+            animated: false
+          });
+          scrolled = true;
+          measureLayouts();
+        }
+      }
+      if (scrolled) {
+        var target = hitTest(x, y, session);
+        setDrag(function (prev) {
+          return prev && !prev.settling && (prev.target.columnId !== target.columnId || prev.target.index !== target.index) ? {
+            ...prev,
+            target
+          } : prev;
+        });
+      }
+      autoScrollRafRef.current = requestAnimationFrame(tick);
+    };
+    autoScrollRafRef.current = requestAnimationFrame(tick);
+  }, [hitTest, measureLayouts, stopAutoScroll]);
+  useEffect(function () {
+    return function () {
+      return stopAutoScroll();
+    };
+  }, [stopAutoScroll]);
+  var finishDrag = useCallback(function (commit) {
+    var session = dragStateRef.current;
+    if (!session || session.settling) return;
+    stopAutoScroll();
+    var resolved = resolveDrop(session);
+    var crossColumn = resolved.to.columnId !== resolved.from.columnId;
+    var canCommit = commit && resolved.commit && (crossColumn ? Boolean(onCardMove) : Boolean(onCardReorder));
+    var settleSession = canCommit ? {
+      ...session,
+      settling: true
+    } : {
+      ...session,
+      settling: true,
+      target: {
+        columnId: session.sourceColumnId,
+        index: session.sourceIndex
+      }
+    };
+    var dest = gapPositionInContainer(settleSession);
+    var complete = function complete2() {
+      setDrag(null);
+      dragStateRef.current = null;
+      liftValue.setValue(0);
+      if (canCommit) {
+        announce("drop", settleSession, session.itemLabel);
+        if (crossColumn) {
+          onCardMove === null || onCardMove === void 0 ? void 0 : onCardMove(session.item, resolved.from.columnId, resolved.to.columnId, resolved.to.index);
+        } else {
+          onCardReorder === null || onCardReorder === void 0 ? void 0 : onCardReorder(session.item, resolved.from.columnId, resolved.from.index, resolved.to.index);
+        }
+      } else {
+        announce("cancel", settleSession, session.itemLabel);
+      }
+    };
+    setDrag(settleSession);
+    dragStateRef.current = settleSession;
+    if (dest && springToken) {
+      var config = animationConfig[springToken];
+      Animated.parallel([Animated.spring(ghostPos, {
+        toValue: dest,
+        useNativeDriver: true,
+        damping: config.damping,
+        stiffness: config.stiffness,
+        ...("mass" in config ? {
+          mass: config.mass
+        } : void 0)
+      }), Animated.spring(liftValue, {
+        toValue: 0,
+        useNativeDriver: true,
+        damping: config.damping,
+        stiffness: config.stiffness
+      })]).start(complete);
+    } else {
+      if (dest) ghostPos.setValue(dest);
+      complete();
+    }
+  }, [announce, gapPositionInContainer, ghostPos, liftValue, onCardMove, onCardReorder, springToken, stopAutoScroll]);
+  var liftCard = useCallback(function () {
+    var _ref;
+    var gesture = gestureRef.current;
+    if (!gesture || gesture.lifted) return;
+    gesture.lifted = true;
+    measureLayouts();
+    var label = (_ref = getItemLabel === null || getItemLabel === void 0 ? void 0 : getItemLabel(gesture.item)) !== null && _ref !== void 0 ? _ref : t("Card");
+    var session = {
+      item: gesture.item,
+      itemLabel: label,
+      sourceColumnId: gesture.columnId,
+      sourceIndex: gesture.index,
+      size: estimateSize,
+      target: {
+        columnId: gesture.columnId,
+        index: gesture.index
+      }
+    };
+    ghostPos.setValue({
+      x: fingerRef.current.x - containerOffsetRef.current.x - columnWidth / 2,
+      y: fingerRef.current.y - containerOffsetRef.current.y - estimateSize / 2
+    });
+    if (springToken) {
+      var config = animationConfig[springToken];
+      Animated.spring(liftValue, {
+        toValue: 1,
+        useNativeDriver: true,
+        damping: config.damping,
+        stiffness: config.stiffness
+      }).start();
+    } else {
+      liftValue.setValue(1);
+    }
+    setDrag(session);
+    dragStateRef.current = session;
+    announce("lift", session, label);
+    startAutoScroll();
+  }, [announce, columnWidth, estimateSize, getItemLabel, ghostPos, liftValue, measureLayouts, springToken, startAutoScroll, t]);
+  var handleGrant = useCallback(function (item, columnId, index, e) {
+    var _ref, _ref1;
+    var _e_nativeEvent, _e_nativeEvent1;
+    if (!canDrag) return;
+    var pageX = (_ref = (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.pageX) !== null && _ref !== void 0 ? _ref : 0;
+    var pageY = (_ref1 = (_e_nativeEvent1 = e.nativeEvent) === null || _e_nativeEvent1 === void 0 ? void 0 : _e_nativeEvent1.pageY) !== null && _ref1 !== void 0 ? _ref1 : 0;
+    fingerRef.current = {
+      x: pageX,
+      y: pageY
+    };
+    gestureRef.current = {
+      item,
+      columnId,
+      index,
+      startX: pageX,
+      startY: pageY,
+      lifted: false,
+      timer: setTimeout(liftCard, TOUCH_LONG_PRESS_MS)
+    };
+  }, [canDrag, liftCard]);
+  var handleMove = useCallback(function (e) {
+    var _ref, _ref1;
+    var _e_nativeEvent, _e_nativeEvent1;
+    var gesture = gestureRef.current;
+    if (!gesture) return;
+    var pageX = (_ref = (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.pageX) !== null && _ref !== void 0 ? _ref : 0;
+    var pageY = (_ref1 = (_e_nativeEvent1 = e.nativeEvent) === null || _e_nativeEvent1 === void 0 ? void 0 : _e_nativeEvent1.pageY) !== null && _ref1 !== void 0 ? _ref1 : 0;
+    fingerRef.current = {
+      x: pageX,
+      y: pageY
+    };
+    if (!gesture.lifted) {
+      if (Math.hypot(pageX - gesture.startX, pageY - gesture.startY) >= DRAG_THRESHOLD_PX) {
+        if (gesture.timer != null) clearTimeout(gesture.timer);
+        gestureRef.current = null;
+      }
+      return;
+    }
+    ghostPos.setValue({
+      x: pageX - containerOffsetRef.current.x - columnWidth / 2,
+      y: pageY - containerOffsetRef.current.y - estimateSize / 2
+    });
+    var session = dragStateRef.current;
+    if (!session || session.settling) return;
+    var target = hitTest(pageX, pageY, session);
+    setDrag(function (prev) {
+      return prev && !prev.settling && (prev.target.columnId !== target.columnId || prev.target.index !== target.index) ? {
+        ...prev,
+        target
+      } : prev;
+    });
+  }, [columnWidth, estimateSize, ghostPos, hitTest]);
+  var handleRelease = useCallback(function (item, columnId) {
+    var gesture = gestureRef.current;
+    gestureRef.current = null;
+    if (!gesture) return;
+    if (gesture.timer != null) clearTimeout(gesture.timer);
+    if (!gesture.lifted) {
+      if (!suppressTapRef.current) onCardSelect === null || onCardSelect === void 0 ? void 0 : onCardSelect(item, columnId);
+      return;
+    }
+    suppressTapRef.current = true;
+    setTimeout(function () {
+      suppressTapRef.current = false;
+    }, 0);
+    finishDrag(true);
+  }, [finishDrag, onCardSelect]);
+  var handleTerminate = useCallback(function () {
+    var gesture = gestureRef.current;
+    gestureRef.current = null;
+    if (!gesture) return;
+    if (gesture.timer != null) clearTimeout(gesture.timer);
+    if (gesture.lifted) finishDrag(false);
+  }, [finishDrag]);
+  var getCardDragProps = useCallback(function (item, columnId, index) {
+    if (!canDrag) return {};
+    return {
+      onStartShouldSetResponder: function onStartShouldSetResponder() {
+        return true;
+      },
+      onMoveShouldSetResponder: function onMoveShouldSetResponder() {
+        return true;
+      },
+      onResponderTerminationRequest: function onResponderTerminationRequest() {
+        var _gestureRef_current;
+        return !((_gestureRef_current = gestureRef.current) === null || _gestureRef_current === void 0 ? void 0 : _gestureRef_current.lifted);
+      },
+      onResponderGrant: function onResponderGrant(e) {
+        return handleGrant(item, columnId, index, e);
+      },
+      onResponderMove: handleMove,
+      onResponderRelease: function onResponderRelease() {
+        return handleRelease(item, columnId);
+      },
+      onResponderTerminate: handleTerminate
+    };
+  }, [canDrag, handleGrant, handleMove, handleRelease, handleTerminate]);
+  var dragActive = drag != null && !drag.settling;
+  return /* @__PURE__ */_jsx(AsyncBoundary, {
+    loading: boardLoading,
+    empty: boardEmpty,
+    error,
+    onRetry,
+    layout: "kanban",
+    emptyTitle: "No columns",
     ...stackProps,
-    children: /* @__PURE__ */_jsx(ScrollView, {
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      children: /* @__PURE__ */_jsx(XStack, {
-        ...knobProps.gap,
-        children: columns.map(function (column, colIndex) {
-          return /* @__PURE__ */_jsx(KanbanColumnView, {
-            kanbanId,
-            column,
-            columnIndex: colIndex,
-            renderCard,
-            columnWidth,
-            minColumnHeight,
-            estimateSize,
-            overscan,
-            emptyColumnMessage,
-            onLoadMore,
-            hasMore,
-            isLoading,
-            onCardSelect
-          }, column.id);
+    children: /* @__PURE__ */_jsxs(View, {
+      flex: 1,
+      position: "relative",
+      ref: function ref(node) {
+        containerNodeRef.current = node;
+      },
+      children: [/* @__PURE__ */_jsx(ScrollView, {
+        ref: boardScrollRef,
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        scrollEnabled: !dragActive,
+        onScroll: function onScroll(e) {
+          var _ref;
+          var _e_nativeEvent_contentOffset, _e_nativeEvent;
+          boardScrollXRef.current = (_ref = (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : (_e_nativeEvent_contentOffset = _e_nativeEvent.contentOffset) === null || _e_nativeEvent_contentOffset === void 0 ? void 0 : _e_nativeEvent_contentOffset.x) !== null && _ref !== void 0 ? _ref : 0;
+        },
+        scrollEventThrottle: 64,
+        children: /* @__PURE__ */_jsx(XStack, {
+          ...knobProps.gap,
+          children: columns.map(function (column, colIndex) {
+            return /* @__PURE__ */_jsx(KanbanColumnView, {
+              kanbanId,
+              column,
+              columnIndex: colIndex,
+              renderCard,
+              columnWidth,
+              minColumnHeight,
+              estimateSize,
+              overscan,
+              emptyColumnMessage,
+              onLoadMore,
+              getItemKey,
+              hasMore,
+              isLoading,
+              onCardSelect,
+              getCardDragProps: canDrag ? getCardDragProps : void 0,
+              handle: getHandle(column.id),
+              drag,
+              scrollEnabled: !dragActive
+            }, column.id);
+          })
         })
-      })
+      }), /* Drag ghost: 1:1 finger tracking + lift transforms (A-GESTURE). */
+      drag && /* @__PURE__ */_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: columnWidth,
+          zIndex: 1e3,
+          transform: [{
+            translateX: ghostPos.x
+          }, {
+            translateY: ghostPos.y
+          }, {
+            scale: liftValue.interpolate({
+              inputRange: [0, 1],
+              outputRange: [1, 1.03]
+            })
+          }, {
+            rotate: liftValue.interpolate({
+              inputRange: [0, 1],
+              outputRange: ["0deg", "2.5deg"]
+            })
+          }]
+        },
+        children: /* @__PURE__ */_jsx(View, {
+          padding: "$1",
+          children: /* @__PURE__ */_jsx(Card, {
+            size: knobProps.sizeToken,
+            ...knobProps.borderRadius,
+            borderWidth: 1,
+            borderColor: "$borderColor",
+            backgroundColor: "$background",
+            overflow: "hidden",
+            ...LIFT_SHADOW,
+            children: renderCard(drag.item)
+          })
+        })
+      })]
     })
   });
 }
@@ -68,27 +607,48 @@ function KanbanColumnView(param) {
     overscan,
     emptyColumnMessage,
     onLoadMore,
+    getItemKey,
     hasMore,
     isLoading,
-    onCardSelect
+    onCardSelect,
+    getCardDragProps,
+    handle,
+    drag,
+    scrollEnabled
   } = param;
+  var {
+    t
+  } = useTranslation();
   var {
     knobProps
   } = useResolvedKnobs();
-  var flashListRef = useRef(null);
-  var [selectedIndex, setSelectedIndex] = useState(-1);
+  var itemCount = useAsyncCount(column.items.length);
+  var isSource = (drag === null || drag === void 0 ? void 0 : drag.sourceColumnId) === column.id;
+  var gapIndex = drag && !drag.settling && drag.target.columnId === column.id ? drag.target.index : null;
+  var isDropTarget = gapIndex != null;
   var handleEndReached = useCallback(function () {
     if (onLoadMore && hasMore && !isLoading) {
       onLoadMore();
     }
   }, [onLoadMore, hasMore, isLoading]);
+  var gapY = gapIndex != null && drag ? gapPosition({
+    gapIndex,
+    sourceIndex: isSource ? drag.sourceIndex : null,
+    count: column.items.length,
+    size: drag.size,
+    totalSize: column.items.length * drag.size,
+    getStart: function getStart(index) {
+      return index * drag.size;
+    }
+  }) : null;
   return /* @__PURE__ */_jsxs(Card, {
     size: knobProps.sizeToken,
-    backgroundColor: "$color2",
+    backgroundColor: isDropTarget ? "$color3" : "$color2",
+    transition: knobProps.transition,
     width: columnWidth,
     minHeight: minColumnHeight,
     borderWidth: 1,
-    borderColor: "$borderColor",
+    borderColor: isDropTarget ? "$color7" : "$borderColor",
     overflow: "hidden",
     children: [/* Column Header */
     /* @__PURE__ */_jsx(ListItem, {
@@ -99,65 +659,109 @@ function KanbanColumnView(param) {
         borderRadius: 4,
         backgroundColor: column.color
       }) : void 0,
-      iconAfter: /* @__PURE__ */_jsx(Text, {
+      iconAfter: itemCount !== void 0 ? /* @__PURE__ */_jsx(Text, {
         color: "$color10",
         fontSize: knobProps.sizeToken,
         backgroundColor: "$color2",
         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"
-    }), /* Cards Container - virtualized with FlashList */
-    column.items.length === 0 ? /* @__PURE__ */_jsx(YStack, {
-      ...knobProps.panelPadding,
-      alignItems: "center",
-      justifyContent: "center",
-      opacity: 0.5,
-      flex: 1,
-      children: /* @__PURE__ */_jsx(Text, {
-        color: "$color10",
-        fontSize: "$2",
-        children: emptyColumnMessage
-      })
-    }) : /* @__PURE__ */_jsx(View, {
+    }), /* Cards container — always rendered so empty columns stay drop targets. */
+    /* @__PURE__ */_jsxs(View, {
       style: {
         flex: 1,
         minHeight: minColumnHeight - 60
       },
-      children: /* @__PURE__ */_jsx(FlashList, {
-        ref: flashListRef,
+      position: "relative",
+      ref: function ref(node) {
+        handle.node = node;
+      },
+      children: [column.items.length === 0 ? !isDropTarget && /* @__PURE__ */_jsx(YStack, {
+        ...knobProps.panelPadding,
+        alignItems: "center",
+        justifyContent: "center",
+        opacity: 0.5,
+        flex: 1,
+        children: /* @__PURE__ */_jsx(Text, {
+          color: "$color10",
+          fontSize: "$2",
+          children: emptyColumnMessage
+        })
+      }) : /* @__PURE__ */_jsx(FlashList, {
+        ref: function ref(list) {
+          handle.list = list;
+        },
         data: column.items,
+        extraData: drag,
         drawDistance: estimateSize * overscan,
         onEndReached: handleEndReached,
         onEndReachedThreshold: 0.5,
-        keyExtractor: function keyExtractor(_, index) {
-          return `${kanbanId}-col-${columnIndex}-card-${index}`;
+        scrollEnabled,
+        onScroll: function onScroll(e) {
+          var _ref;
+          var _e_nativeEvent_contentOffset, _e_nativeEvent;
+          handle.scrollOffset = (_ref = (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : (_e_nativeEvent_contentOffset = _e_nativeEvent.contentOffset) === null || _e_nativeEvent_contentOffset === void 0 ? void 0 : _e_nativeEvent_contentOffset.y) !== null && _ref !== void 0 ? _ref : 0;
+        },
+        scrollEventThrottle: 64,
+        keyExtractor: function keyExtractor(item, index) {
+          return getItemKey ? String(getItemKey(item, index)) : `${kanbanId}-col-${columnIndex}-card-${index}`;
         },
         renderItem: function renderItem(param2) {
           var {
             item,
             index
           } = param2;
-          var isSelected = selectedIndex === index;
+          var _ref;
+          var isDragged = isSource && drag != null && index === drag.sourceIndex;
+          var offset = 0;
+          var ghost = false;
+          var hidden = false;
+          if (drag && !drag.settling) {
+            if (isDragged) {
+              if (gapIndex != null && gapY != null) {
+                offset = gapY - index * drag.size;
+                ghost = true;
+              } else {
+                hidden = true;
+              }
+            } else {
+              offset = siblingOffset({
+                index,
+                sourceIndex: isSource && drag ? drag.sourceIndex : null,
+                gapIndex,
+                size: drag.size
+              });
+            }
+          } else if ((drag === null || drag === void 0 ? void 0 : drag.settling) && isDragged) {
+            hidden = true;
+          }
+          var dragProps = (_ref = getCardDragProps === null || getCardDragProps === void 0 ? void 0 : getCardDragProps(item, column.id, index)) !== null && _ref !== void 0 ? _ref : {};
           return /* @__PURE__ */_jsx(View, {
             padding: "$1",
+            y: offset,
+            transition: drag && !drag.settling ? knobProps.transition : void 0,
+            opacity: hidden ? 0 : ghost ? 0.4 : 1,
+            ...dragProps,
             children: /* @__PURE__ */_jsx(Card, {
               id: `${kanbanId}-col-${columnIndex}-card-${index}`,
               size: knobProps.sizeToken,
               elevation: knobProps.elevation,
               borderWidth: 1,
-              borderColor: isSelected ? "$accentBackground" : "$borderColor",
-              backgroundColor: isSelected ? "$accentBackground" : void 0,
+              borderColor: ghost ? "$color7" : "$borderColor",
+              borderStyle: ghost ? "dashed" : void 0,
               pressStyle: {
-                scale: 0.97
+                scale: 0.98
               },
               overflow: "hidden",
-              onPress: function onPress() {
-                setSelectedIndex(index);
-                onCardSelect === null || onCardSelect === void 0 ? void 0 : onCardSelect(item, column.id);
+              onPress: getCardDragProps ? void 0 :
+              // responders own the tap; handled on release
+              function () {
+                return onCardSelect === null || onCardSelect === void 0 ? void 0 : onCardSelect(item, column.id);
               },
               children: renderCard(item)
             })
@@ -170,7 +774,33 @@ function KanbanColumnView(param) {
             size: "small"
           })
         }) : null
-      })
+      }), /* Insertion slot outline for cross-column targets and empty columns. */
+      drag && !drag.settling && gapIndex != null && !isSource && /* @__PURE__ */_jsx(View, {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        y: (gapY !== null && gapY !== void 0 ? gapY : 0) - handle.scrollOffset,
+        height: drag.size,
+        padding: "$1",
+        pointerEvents: "none",
+        transition: knobProps.transition,
+        children: /* @__PURE__ */_jsx(View, {
+          flex: 1,
+          ...knobProps.borderRadius,
+          borderStyle: "dashed",
+          borderColor: "$color7",
+          backgroundColor: "$color3",
+          opacity: 0.8,
+          alignItems: "center",
+          justifyContent: "center",
+          children: column.items.length === 0 && /* @__PURE__ */_jsx(Text, {
+            color: "$color11",
+            fontSize: "$2",
+            children: t("Drop here")
+          })
+        })
+      })]
     })]
   });
 }