react-native-swappable-grid 1.0.0

package/lib/commonjs/SwappableGrid.js

@@ -0,0 +1,378 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _computerMinHeight = _interopRequireDefault(require("./utils/helpers/computerMinHeight"));
+var _useGridLayout = require("./utils/useGridLayout");
+var _ChildWrapper = _interopRequireDefault(require("./ChildWrapper"));
+var _indexCalculations = require("./utils/helpers/indexCalculations");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const AnimatedScrollView = _reactNativeReanimated.default.createAnimatedComponent(_reactNative.ScrollView);
+const normalizeKey = k => String(k).replace(/^\.\$/, "");
+
+/**
+ * Props for the SwappableGrid component
+ */
+
+/**
+ * Ref methods for SwappableGrid component
+ */
+
+/**
+ * SwappableGrid - A React Native component for creating a draggable, swappable grid layout.
+ *
+ * Features:
+ * - Drag and drop to reorder items
+ * - Long press to enter drag mode
+ * - Auto-scroll when dragging near edges
+ * - Optional wiggle animation during drag mode
+ * - Optional delete functionality with hold-to-delete or delete component
+ * - Support for trailing components (e.g., "Add" button)
+ * - Automatic column calculation based on container width
+ *
+ * @example
+ * ```tsx
+ * <SwappableGrid
+ *   itemWidth={100}
+ *   itemHeight={100}
+ *   numColumns={3}
+ *   onOrderChange={(keys) => console.log('New order:', keys)}
+ * >
+ *   {items.map(item => (
+ *     <View key={item.id}>{item.content}</View>
+ *   ))}
+ * </SwappableGrid>
+ * ```
+ */
+const SwappableGrid = /*#__PURE__*/(0, _react.forwardRef)(({
+  children,
+  itemWidth,
+  itemHeight,
+  gap = 8,
+  containerPadding = 8,
+  longPressMs = 300,
+  numColumns,
+  onDragEnd,
+  onOrderChange,
+  onDelete,
+  wiggle,
+  style,
+  dragSizeIncreaseFactor = 1.06,
+  scrollThreshold = 100,
+  scrollSpeed = 10,
+  trailingComponent,
+  deleteComponent,
+  deleteComponentStyle,
+  reverse = false
+}, ref) => {
+  // MUST be Animated ref for scrollTo
+  const scrollViewRef = (0, _reactNativeReanimated.useAnimatedRef)();
+  const [showTrailingComponent, setShowTrailingComponent] = (0, _react.useState)(false);
+  const [showDeleteComponent, setShowDeleteComponent] = (0, _react.useState)(false);
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
+  const [currentNumColumns, setCurrentNumColumns] = (0, _react.useState)(numColumns || 1);
+  const touchEndTimeoutRef = _react.default.useRef(null);
+  const deleteComponentRef = _react.default.useRef(null);
+  (0, _react.useEffect)(() => {
+    setTimeout(() => {
+      setShowTrailingComponent(true);
+      setShowDeleteComponent(true);
+    }, 50); // This is kinda a hack that makes the trailing component render in the correct position because it lets the other components render first to make the position calculation correct.
+  }, []);
+  const handleOnOrderChange = order => {
+    if (onOrderChange) onOrderChange(order.map(key => normalizeKey(key)));
+  };
+
+  // Extract paddingBottom from style prop to allow dragging into padding area
+  const paddingBottom = _react.default.useMemo(() => {
+    if (!style) return 0;
+    const styleObj = _reactNative.StyleSheet.flatten(style);
+    return styleObj.paddingBottom || 0;
+  }, [style]);
+  const {
+    orderState,
+    composed,
+    dynamicNumColumns,
+    onLayoutContent: originalOnLayoutContent,
+    // layout of the inner content view (for width/cols)
+    onLayoutScrollView,
+    // layout of the scroll viewport (for height)
+    onScroll,
+    deleteItem,
+    childArray,
+    positions,
+    dragMode,
+    anyItemInDeleteMode,
+    order,
+    deleteComponentPosition
+  } = (0, _useGridLayout.useGridLayout)({
+    reverse,
+    children,
+    longPressMs,
+    itemWidth,
+    itemHeight,
+    gap,
+    containerPadding,
+    numColumns,
+    onDragEnd,
+    onOrderChange: handleOnOrderChange,
+    onDelete: onDelete ? key => onDelete(normalizeKey(key)) : undefined,
+    scrollViewRef,
+    scrollSpeed,
+    scrollThreshold,
+    contentPaddingBottom: paddingBottom
+  });
+
+  // Track numColumns changes for height calculation
+  const onLayoutContent = e => {
+    originalOnLayoutContent(e);
+    // Update currentNumColumns for height calculation
+    if (numColumns) {
+      setCurrentNumColumns(numColumns);
+    } else {
+      const possibleCols = Math.floor((e.nativeEvent.layout.width - containerPadding * 2 + gap) / (itemWidth + gap));
+      setCurrentNumColumns(Math.max(1, possibleCols));
+    }
+  };
+
+  // Track drag state to show/hide delete component
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => dragMode.value, isDraggingValue => {
+    (0, _reactNativeReanimated.runOnJS)(setIsDragging)(isDraggingValue);
+  });
+
+  // Expose cancel delete mode function to parent
+  (0, _react.useImperativeHandle)(ref, () => ({
+    cancelDeleteMode: () => {
+      if (anyItemInDeleteMode.value) {
+        anyItemInDeleteMode.value = false;
+      }
+    }
+  }), [anyItemInDeleteMode]);
+  const trailingX = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    const {
+      x
+    } = (0, _indexCalculations.indexToXY)({
+      index: order.value.length,
+      // AFTER last swappable
+      itemWidth,
+      itemHeight,
+      dynamicNumColumns,
+      containerPadding,
+      gap
+    });
+    return x;
+  });
+  const trailingY = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    const {
+      y
+    } = (0, _indexCalculations.indexToXY)({
+      index: order.value.length,
+      itemWidth,
+      itemHeight,
+      dynamicNumColumns,
+      containerPadding,
+      gap
+    });
+    return y;
+  });
+  const trailingStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    left: trailingX.value,
+    top: trailingY.value
+  }));
+
+  // Calculate default delete component position (bottom center)
+  const deleteComponentX = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    if (deleteComponentStyle) {
+      // If custom style provided, position will be set by user
+      return 0;
+    }
+    // Default: center horizontally
+    const cols = dynamicNumColumns.value;
+    const totalWidth = cols * itemWidth + (cols - 1) * gap + containerPadding * 2;
+    return (totalWidth - itemWidth) / 2;
+  });
+  const deleteComponentY = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    if (deleteComponentStyle) {
+      // If custom style provided, position will be set by user
+      return 0;
+    }
+    // Default: bottom of grid (after all items)
+    // Account for trailing component if it exists
+    const rows = Math.ceil(order.value.length / dynamicNumColumns.value);
+    const baseY = containerPadding + rows * (itemHeight + gap);
+
+    // If trailing component exists, add extra space so delete component appears below it
+    if (trailingComponent && showTrailingComponent) {
+      return baseY + (itemHeight + gap);
+    }
+    return baseY + gap;
+  });
+  const deleteComponentStyleAnimated = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const baseStyle = {
+      position: "absolute",
+      width: itemWidth,
+      height: itemHeight
+    };
+
+    // Use custom position if provided, otherwise use default
+    if (deleteComponentStyle) {
+      return baseStyle;
+    }
+    return {
+      ...baseStyle,
+      left: deleteComponentX.value,
+      top: deleteComponentY.value
+    };
+  });
+
+  // Update delete component position for drop detection when default position changes
+  (0, _reactNativeReanimated.useDerivedValue)(() => {
+    if (deleteComponent && deleteComponentPosition && !deleteComponentStyle) {
+      // Only update if using default position (custom style uses onLayout)
+      deleteComponentPosition.value = {
+        x: deleteComponentX.value,
+        y: deleteComponentY.value,
+        width: itemWidth,
+        height: itemHeight
+      };
+    }
+  });
+  const showTrailing = !!(trailingComponent && showTrailingComponent);
+  const showDelete = !!(deleteComponent && showDeleteComponent);
+  // Make sure we calculate room for both trailing and delete components
+  // Trailing component is part of the grid, delete component is positioned below
+  const itemsCountForHeight = orderState.length + (showTrailing ? 1 : 0);
+
+  // Calculate minimum height needed (on JS thread since computeMinHeight is not a worklet)
+  const baseHeight = (0, _computerMinHeight.default)(itemsCountForHeight, currentNumColumns, itemHeight + gap, containerPadding);
+
+  // If delete component is shown and using default position, add extra space for it
+  let calculatedHeight = baseHeight;
+  if (showDelete && !deleteComponentStyle) {
+    // Account for trailing component when calculating rows (same logic as deleteComponentY)
+    const totalItems = orderState.length + (showTrailing ? 1 : 0);
+    const rows = Math.ceil(totalItems / currentNumColumns);
+    const baseY = containerPadding + rows * (itemHeight + gap);
+
+    // If trailing component exists, add extra space so delete component appears below it
+    let deleteComponentY = baseY;
+    if (showTrailing) {
+      deleteComponentY = baseY + (itemHeight + gap);
+    } else {
+      deleteComponentY = baseY + gap;
+    }
+    const deleteComponentBottom = deleteComponentY + itemHeight;
+    // Ensure container is tall enough to show the delete component
+    calculatedHeight = Math.max(baseHeight, deleteComponentBottom + containerPadding);
+  }
+  return /*#__PURE__*/_react.default.createElement(AnimatedScrollView, {
+    ref: scrollViewRef,
+    onScroll: onScroll,
+    onLayout: onLayoutScrollView // viewport height comes from the SCROLLVIEW
+    ,
+    scrollEventThrottle: 16,
+    contentContainerStyle: [style],
+    onTouchEnd: () => {
+      // Cancel delete mode when user touches outside items
+      // Add a small delay to avoid canceling when user taps on items
+      // (items might briefly activate, which would prevent cancellation)
+      if (touchEndTimeoutRef.current) {
+        clearTimeout(touchEndTimeoutRef.current);
+      }
+      touchEndTimeoutRef.current = setTimeout(() => {
+        // Only cancel if still in delete mode and not dragging
+        // This ensures we don't cancel when user is interacting with items
+        if (anyItemInDeleteMode.value && !dragMode.value) {
+          anyItemInDeleteMode.value = false;
+        }
+      }, 100); // Small delay to let item interactions complete
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      padding: containerPadding,
+      height: calculatedHeight
+    }],
+    onLayout: onLayoutContent
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.GestureDetector, {
+    gesture: composed
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    pointerEvents: "box-none",
+    style: _reactNative.StyleSheet.absoluteFill
+  }, orderState.map(key => {
+    const child = childArray.find(c => c.key && normalizeKey(c.key) === normalizeKey(key));
+    if (!child) return null;
+    return /*#__PURE__*/_react.default.createElement(_ChildWrapper.default, {
+      key: key,
+      position: positions[key],
+      itemWidth: itemWidth,
+      itemHeight: itemHeight,
+      dragMode: dragMode,
+      anyItemInDeleteMode: anyItemInDeleteMode,
+      wiggle: wiggle,
+      dragSizeIncreaseFactor: dragSizeIncreaseFactor,
+      disableHoldToDelete: !!deleteComponent,
+      onDelete: () => {
+        deleteItem(key);
+        if (onDelete) {
+          onDelete(normalizeKey(key));
+        }
+      }
+    }, child);
+  }))), trailingComponent && showTrailingComponent && /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    pointerEvents: "box-none",
+    collapsable: false,
+    style: [{
+      position: "absolute",
+      width: itemWidth,
+      height: itemHeight
+    }, trailingStyle // 👈 left/top from UI thread
+    ]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    pointerEvents: "auto",
+    style: {
+      flex: 1
+    }
+  }, trailingComponent)), deleteComponent && showDeleteComponent && isDragging && /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    ref: deleteComponentRef,
+    pointerEvents: "box-none",
+    collapsable: false,
+    style: [deleteComponentStyleAnimated, deleteComponentStyle // User can override position with custom style
+    ],
+    onLayout: e => {
+      // Update position for drop detection
+      const {
+        x,
+        y,
+        width,
+        height
+      } = e.nativeEvent.layout;
+      if (deleteComponentPosition) {
+        deleteComponentPosition.value = {
+          x,
+          y,
+          width,
+          height
+        };
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    pointerEvents: "auto",
+    style: {
+      flex: 1
+    }
+  }, deleteComponent))));
+});
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    width: "100%"
+  }
+});
+var _default = exports.default = SwappableGrid;
+//# sourceMappingURL=SwappableGrid.js.map

package/lib/commonjs/SwappableGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_reactNativeGestureHandler","_computerMinHeight","_interopRequireDefault","_useGridLayout","_ChildWrapper","_indexCalculations","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnimatedScrollView","Animated","createAnimatedComponent","ScrollView","normalizeKey","k","String","replace","SwappableGrid","forwardRef","children","itemWidth","itemHeight","gap","containerPadding","longPressMs","numColumns","onDragEnd","onOrderChange","onDelete","wiggle","style","dragSizeIncreaseFactor","scrollThreshold","scrollSpeed","trailingComponent","deleteComponent","deleteComponentStyle","reverse","ref","scrollViewRef","useAnimatedRef","showTrailingComponent","setShowTrailingComponent","useState","showDeleteComponent","setShowDeleteComponent","isDragging","setIsDragging","currentNumColumns","setCurrentNumColumns","touchEndTimeoutRef","React","useRef","deleteComponentRef","useEffect","setTimeout","handleOnOrderChange","order","map","key","paddingBottom","useMemo","styleObj","StyleSheet","flatten","orderState","composed","dynamicNumColumns","onLayoutContent","originalOnLayoutContent","onLayoutScrollView","onScroll","deleteItem","childArray","positions","dragMode","anyItemInDeleteMode","deleteComponentPosition","useGridLayout","undefined","contentPaddingBottom","possibleCols","Math","floor","nativeEvent","layout","width","max","useAnimatedReaction","value","isDraggingValue","runOnJS","useImperativeHandle","cancelDeleteMode","trailingX","useDerivedValue","x","indexToXY","index","length","trailingY","y","trailingStyle","useAnimatedStyle","left","top","deleteComponentX","cols","totalWidth","deleteComponentY","rows","ceil","baseY","deleteComponentStyleAnimated","baseStyle","position","height","showTrailing","showDelete","itemsCountForHeight","baseHeight","computeMinHeight","calculatedHeight","totalItems","deleteComponentBottom","createElement","onLayout","scrollEventThrottle","contentContainerStyle","onTouchEnd","current","clearTimeout","View","styles","container","padding","GestureDetector","gesture","pointerEvents","absoluteFill","child","find","c","disableHoldToDelete","collapsable","flex","create","_default","exports"],"sources":["SwappableGrid.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  useEffect,\n  useState,\n  useImperativeHandle,\n  forwardRef,\n} from \"react\";\nimport {\n  View,\n  StyleSheet,\n  ScrollView,\n  StyleProp,\n  ViewStyle,\n  LayoutChangeEvent,\n} from \"react-native\";\nimport Animated, {\n  useAnimatedRef,\n  useAnimatedStyle,\n  useDerivedValue,\n  useAnimatedReaction,\n  runOnJS,\n} from \"react-native-reanimated\";\nimport { GestureDetector } from \"react-native-gesture-handler\";\nimport computeMinHeight from \"./utils/helpers/computerMinHeight\";\nimport { useGridLayout } from \"./utils/useGridLayout\";\nimport ChildWrapper from \"./ChildWrapper\";\nimport { indexToXY } from \"./utils/helpers/indexCalculations\";\n\nconst AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);\n\nconst normalizeKey = (k: React.Key) => String(k).replace(/^\\.\\$/, \"\");\n\n/**\n * Props for the SwappableGrid component\n */\ntype SwappableGridProps = {\n  /** The child components to render in the grid. Each child should have a unique key. */\n  children: ReactNode;\n  /** Width of each grid item in pixels */\n  itemWidth: number;\n  /** Height of each grid item in pixels */\n  itemHeight: number;\n  /** Gap between grid items in pixels. Defaults to 8. */\n  gap?: number;\n  /** Padding around the container in pixels. Defaults to 8. */\n  containerPadding?: number;\n  /** Duration in milliseconds to hold before drag starts. Defaults to 300. */\n  longPressMs?: number;\n  /** Number of columns in the grid. If not provided, will be calculated automatically based on container width. */\n  numColumns?: number;\n  /** Wiggle animation configuration when items are in drag mode or delete mode */\n  wiggle?: {\n    /** Duration of one wiggle cycle in milliseconds */\n    duration: number;\n    /** Rotation degrees for the wiggle animation */\n    degrees: number;\n  };\n  /** Callback fired when drag ends, providing the ordered array of child nodes */\n  onDragEnd?: (ordered: ChildNode[]) => void;\n  /** Callback fired when the order changes, providing an array of keys in the new order */\n  onOrderChange?: (keys: string[]) => void;\n  /** Callback fired when an item is deleted, providing the key of the deleted item */\n  onDelete?: (key: string) => void;\n  /** Factor by which the dragged item scales up. Defaults to 1.06. */\n  dragSizeIncreaseFactor?: number;\n  /** Speed of auto-scrolling when dragging near edges. Defaults to 10. */\n  scrollSpeed?: number;\n  /** Distance from edge in pixels that triggers auto-scroll. Defaults to 100. */\n  scrollThreshold?: number;\n  /** Custom style for the ScrollView container */\n  style?: StyleProp<ViewStyle>;\n  /** Component to render after all grid items (e.g., an \"Add\" button) */\n  trailingComponent?: ReactNode;\n  /** Component to render as a delete target (shown when dragging). If provided, disables hold-to-delete feature. */\n  deleteComponent?: ReactNode;\n  /** Custom style for the delete component. If provided, allows custom positioning. */\n  deleteComponentStyle?: StyleProp<ViewStyle>;\n  /** If true, reverses the order of items (right-to-left, bottom-to-top). Defaults to false. */\n  reverse?: boolean;\n};\n\n/**\n * Ref methods for SwappableGrid component\n */\nexport interface SwappableGridRef {\n  /** Cancels the delete mode if any item is currently in delete mode */\n  cancelDeleteMode: () => void;\n}\n\n/**\n * SwappableGrid - A React Native component for creating a draggable, swappable grid layout.\n *\n * Features:\n * - Drag and drop to reorder items\n * - Long press to enter drag mode\n * - Auto-scroll when dragging near edges\n * - Optional wiggle animation during drag mode\n * - Optional delete functionality with hold-to-delete or delete component\n * - Support for trailing components (e.g., \"Add\" button)\n * - Automatic column calculation based on container width\n *\n * @example\n * ```tsx\n * <SwappableGrid\n *   itemWidth={100}\n *   itemHeight={100}\n *   numColumns={3}\n *   onOrderChange={(keys) => console.log('New order:', keys)}\n * >\n *   {items.map(item => (\n *     <View key={item.id}>{item.content}</View>\n *   ))}\n * </SwappableGrid>\n * ```\n */\nconst SwappableGrid = forwardRef<SwappableGridRef, SwappableGridProps>(\n  (\n    {\n      children,\n      itemWidth,\n      itemHeight,\n      gap = 8,\n      containerPadding = 8,\n      longPressMs = 300,\n      numColumns,\n      onDragEnd,\n      onOrderChange,\n      onDelete,\n      wiggle,\n      style,\n      dragSizeIncreaseFactor = 1.06,\n      scrollThreshold = 100,\n      scrollSpeed = 10,\n      trailingComponent,\n      deleteComponent,\n      deleteComponentStyle,\n      reverse = false,\n    },\n    ref\n  ) => {\n    // MUST be Animated ref for scrollTo\n    const scrollViewRef = useAnimatedRef<Animated.ScrollView>();\n    const [showTrailingComponent, setShowTrailingComponent] =\n      useState<boolean>(false);\n    const [showDeleteComponent, setShowDeleteComponent] =\n      useState<boolean>(false);\n    const [isDragging, setIsDragging] = useState<boolean>(false);\n    const [currentNumColumns, setCurrentNumColumns] = useState<number>(\n      numColumns || 1\n    );\n    const touchEndTimeoutRef = React.useRef<ReturnType<\n      typeof setTimeout\n    > | null>(null);\n    const deleteComponentRef = React.useRef<View>(null);\n\n    useEffect(() => {\n      setTimeout(() => {\n        setShowTrailingComponent(true);\n        setShowDeleteComponent(true);\n      }, 50); // This is kinda a hack that makes the trailing component render in the correct position because it lets the other components render first to make the position calculation correct.\n    }, []);\n\n    const handleOnOrderChange = (order: string[]) => {\n      if (onOrderChange) onOrderChange(order.map((key) => normalizeKey(key)));\n    };\n\n    // Extract paddingBottom from style prop to allow dragging into padding area\n    const paddingBottom = React.useMemo(() => {\n      if (!style) return 0;\n      const styleObj = StyleSheet.flatten(style);\n      return (styleObj.paddingBottom as number) || 0;\n    }, [style]);\n\n    const {\n      orderState,\n      composed,\n      dynamicNumColumns,\n      onLayoutContent: originalOnLayoutContent, // layout of the inner content view (for width/cols)\n      onLayoutScrollView, // layout of the scroll viewport (for height)\n      onScroll,\n      deleteItem,\n      childArray,\n      positions,\n      dragMode,\n      anyItemInDeleteMode,\n      order,\n      deleteComponentPosition,\n    } = useGridLayout({\n      reverse,\n      children,\n      longPressMs,\n      itemWidth,\n      itemHeight,\n      gap,\n      containerPadding,\n      numColumns,\n      onDragEnd,\n      onOrderChange: handleOnOrderChange,\n      onDelete: onDelete ? (key) => onDelete(normalizeKey(key)) : undefined,\n      scrollViewRef,\n      scrollSpeed,\n      scrollThreshold,\n      contentPaddingBottom: paddingBottom,\n    });\n\n    // Track numColumns changes for height calculation\n    const onLayoutContent = (e: LayoutChangeEvent) => {\n      originalOnLayoutContent(e);\n      // Update currentNumColumns for height calculation\n      if (numColumns) {\n        setCurrentNumColumns(numColumns);\n      } else {\n        const possibleCols = Math.floor(\n          (e.nativeEvent.layout.width - containerPadding * 2 + gap) /\n            (itemWidth + gap)\n        );\n        setCurrentNumColumns(Math.max(1, possibleCols));\n      }\n    };\n\n    // Track drag state to show/hide delete component\n    useAnimatedReaction(\n      () => dragMode.value,\n      (isDraggingValue) => {\n        runOnJS(setIsDragging)(isDraggingValue);\n      }\n    );\n\n    // Expose cancel delete mode function to parent\n    useImperativeHandle(\n      ref,\n      () => ({\n        cancelDeleteMode: () => {\n          if (anyItemInDeleteMode.value) {\n            anyItemInDeleteMode.value = false;\n          }\n        },\n      }),\n      [anyItemInDeleteMode]\n    );\n\n    const trailingX = useDerivedValue(() => {\n      const { x } = indexToXY({\n        index: order.value.length, // AFTER last swappable\n        itemWidth,\n        itemHeight,\n        dynamicNumColumns,\n        containerPadding,\n        gap,\n      });\n      return x;\n    });\n\n    const trailingY = useDerivedValue(() => {\n      const { y } = indexToXY({\n        index: order.value.length,\n        itemWidth,\n        itemHeight,\n        dynamicNumColumns,\n        containerPadding,\n        gap,\n      });\n      return y;\n    });\n\n    const trailingStyle = useAnimatedStyle(() => ({\n      left: trailingX.value,\n      top: trailingY.value,\n    }));\n\n    // Calculate default delete component position (bottom center)\n    const deleteComponentX = useDerivedValue(() => {\n      if (deleteComponentStyle) {\n        // If custom style provided, position will be set by user\n        return 0;\n      }\n      // Default: center horizontally\n      const cols = dynamicNumColumns.value;\n      const totalWidth =\n        cols * itemWidth + (cols - 1) * gap + containerPadding * 2;\n      return (totalWidth - itemWidth) / 2;\n    });\n\n    const deleteComponentY = useDerivedValue(() => {\n      if (deleteComponentStyle) {\n        // If custom style provided, position will be set by user\n        return 0;\n      }\n      // Default: bottom of grid (after all items)\n      // Account for trailing component if it exists\n      const rows = Math.ceil(order.value.length / dynamicNumColumns.value);\n      const baseY = containerPadding + rows * (itemHeight + gap);\n\n      // If trailing component exists, add extra space so delete component appears below it\n      if (trailingComponent && showTrailingComponent) {\n        return baseY + (itemHeight + gap);\n      }\n\n      return baseY + gap;\n    });\n\n    const deleteComponentStyleAnimated = useAnimatedStyle(() => {\n      const baseStyle: any = {\n        position: \"absolute\",\n        width: itemWidth,\n        height: itemHeight,\n      };\n\n      // Use custom position if provided, otherwise use default\n      if (deleteComponentStyle) {\n        return baseStyle;\n      }\n\n      return {\n        ...baseStyle,\n        left: deleteComponentX.value,\n        top: deleteComponentY.value,\n      };\n    });\n\n    // Update delete component position for drop detection when default position changes\n    useDerivedValue(() => {\n      if (deleteComponent && deleteComponentPosition && !deleteComponentStyle) {\n        // Only update if using default position (custom style uses onLayout)\n        deleteComponentPosition.value = {\n          x: deleteComponentX.value,\n          y: deleteComponentY.value,\n          width: itemWidth,\n          height: itemHeight,\n        };\n      }\n    });\n\n    const showTrailing = !!(trailingComponent && showTrailingComponent);\n    const showDelete = !!(deleteComponent && showDeleteComponent);\n    // Make sure we calculate room for both trailing and delete components\n    // Trailing component is part of the grid, delete component is positioned below\n    const itemsCountForHeight = orderState.length + (showTrailing ? 1 : 0);\n\n    // Calculate minimum height needed (on JS thread since computeMinHeight is not a worklet)\n    const baseHeight = computeMinHeight(\n      itemsCountForHeight,\n      currentNumColumns,\n      itemHeight + gap,\n      containerPadding\n    );\n\n    // If delete component is shown and using default position, add extra space for it\n    let calculatedHeight = baseHeight;\n    if (showDelete && !deleteComponentStyle) {\n      // Account for trailing component when calculating rows (same logic as deleteComponentY)\n      const totalItems = orderState.length + (showTrailing ? 1 : 0);\n      const rows = Math.ceil(totalItems / currentNumColumns);\n      const baseY = containerPadding + rows * (itemHeight + gap);\n\n      // If trailing component exists, add extra space so delete component appears below it\n      let deleteComponentY = baseY;\n      if (showTrailing) {\n        deleteComponentY = baseY + (itemHeight + gap);\n      } else {\n        deleteComponentY = baseY + gap;\n      }\n\n      const deleteComponentBottom = deleteComponentY + itemHeight;\n      // Ensure container is tall enough to show the delete component\n      calculatedHeight = Math.max(\n        baseHeight,\n        deleteComponentBottom + containerPadding\n      );\n    }\n\n    return (\n      <AnimatedScrollView\n        ref={scrollViewRef}\n        onScroll={onScroll}\n        onLayout={onLayoutScrollView} // viewport height comes from the SCROLLVIEW\n        scrollEventThrottle={16}\n        contentContainerStyle={[style]}\n        onTouchEnd={() => {\n          // Cancel delete mode when user touches outside items\n          // Add a small delay to avoid canceling when user taps on items\n          // (items might briefly activate, which would prevent cancellation)\n          if (touchEndTimeoutRef.current) {\n            clearTimeout(touchEndTimeoutRef.current);\n          }\n          touchEndTimeoutRef.current = setTimeout(() => {\n            // Only cancel if still in delete mode and not dragging\n            // This ensures we don't cancel when user is interacting with items\n            if (anyItemInDeleteMode.value && !dragMode.value) {\n              anyItemInDeleteMode.value = false;\n            }\n          }, 100); // Small delay to let item interactions complete\n        }}\n      >\n        <View\n          style={[\n            styles.container,\n            {\n              padding: containerPadding,\n              height: calculatedHeight,\n            },\n          ]}\n          onLayout={onLayoutContent}\n        >\n          <GestureDetector gesture={composed}>\n            <View pointerEvents=\"box-none\" style={StyleSheet.absoluteFill}>\n              {orderState.map((key) => {\n                const child = childArray.find(\n                  (c) => c.key && normalizeKey(c.key) === normalizeKey(key)\n                );\n                if (!child) return null;\n                return (\n                  <ChildWrapper\n                    key={key}\n                    position={positions[key]}\n                    itemWidth={itemWidth}\n                    itemHeight={itemHeight}\n                    dragMode={dragMode}\n                    anyItemInDeleteMode={anyItemInDeleteMode}\n                    wiggle={wiggle}\n                    dragSizeIncreaseFactor={dragSizeIncreaseFactor}\n                    disableHoldToDelete={!!deleteComponent}\n                    onDelete={() => {\n                      deleteItem(key);\n                      if (onDelete) {\n                        onDelete(normalizeKey(key));\n                      }\n                    }}\n                  >\n                    {child}\n                  </ChildWrapper>\n                );\n              })}\n            </View>\n          </GestureDetector>\n\n          {/* Trailing rendered OUTSIDE the GestureDetector */}\n          {trailingComponent && showTrailingComponent && (\n            <Animated.View\n              pointerEvents=\"box-none\"\n              collapsable={false}\n              style={[\n                {\n                  position: \"absolute\",\n                  width: itemWidth,\n                  height: itemHeight,\n                },\n                trailingStyle, // 👈 left/top from UI thread\n              ]}\n            >\n              <View pointerEvents=\"auto\" style={{ flex: 1 }}>\n                {trailingComponent}\n              </View>\n            </Animated.View>\n          )}\n\n          {/* Delete component rendered OUTSIDE the GestureDetector - only show when dragging */}\n          {deleteComponent && showDeleteComponent && isDragging && (\n            <Animated.View\n              ref={deleteComponentRef}\n              pointerEvents=\"box-none\"\n              collapsable={false}\n              style={[\n                deleteComponentStyleAnimated,\n                deleteComponentStyle, // User can override position with custom style\n              ]}\n              onLayout={(e) => {\n                // Update position for drop detection\n                const { x, y, width, height } = e.nativeEvent.layout;\n                if (deleteComponentPosition) {\n                  deleteComponentPosition.value = { x, y, width, height };\n                }\n              }}\n            >\n              <View pointerEvents=\"auto\" style={{ flex: 1 }}>\n                {deleteComponent}\n              </View>\n            </Animated.View>\n          )}\n        </View>\n      </AnimatedScrollView>\n    );\n  }\n);\n\nconst styles = StyleSheet.create({\n  container: {\n    width: \"100%\",\n  },\n});\n\nexport default SwappableGrid;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAOA,IAAAC,YAAA,GAAAD,OAAA;AAQA,IAAAE,sBAAA,GAAAH,uBAAA,CAAAC,OAAA;AAOA,IAAAG,0BAAA,GAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,cAAA,GAAAN,OAAA;AACA,IAAAO,aAAA,GAAAF,sBAAA,CAAAL,OAAA;AACA,IAAAQ,kBAAA,GAAAR,OAAA;AAA8D,SAAAK,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAV,wBAAAU,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAd,uBAAA,YAAAA,CAAAU,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAE9D,MAAMgB,kBAAkB,GAAGC,8BAAQ,CAACC,uBAAuB,CAACC,uBAAU,CAAC;AAEvE,MAAMC,YAAY,GAAIC,CAAY,IAAKC,MAAM,CAACD,CAAC,CAAC,CAACE,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;;AAErE;AACA;AACA;;AA+CA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,gBAAG,IAAAC,iBAAU,EAC9B,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,GAAG,GAAG,CAAC;EACPC,gBAAgB,GAAG,CAAC;EACpBC,WAAW,GAAG,GAAG;EACjBC,UAAU;EACVC,SAAS;EACTC,aAAa;EACbC,QAAQ;EACRC,MAAM;EACNC,KAAK;EACLC,sBAAsB,GAAG,IAAI;EAC7BC,eAAe,GAAG,GAAG;EACrBC,WAAW,GAAG,EAAE;EAChBC,iBAAiB;EACjBC,eAAe;EACfC,oBAAoB;EACpBC,OAAO,GAAG;AACZ,CAAC,EACDC,GAAG,KACA;EACH;EACA,MAAMC,aAAa,GAAG,IAAAC,qCAAc,EAAsB,CAAC;EAC3D,MAAM,CAACC,qBAAqB,EAAEC,wBAAwB,CAAC,GACrD,IAAAC,eAAQ,EAAU,KAAK,CAAC;EAC1B,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GACjD,IAAAF,eAAQ,EAAU,KAAK,CAAC;EAC1B,MAAM,CAACG,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAJ,eAAQ,EAAU,KAAK,CAAC;EAC5D,MAAM,CAACK,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAN,eAAQ,EACxDlB,UAAU,IAAI,CAChB,CAAC;EACD,MAAMyB,kBAAkB,GAAGC,cAAK,CAACC,MAAM,CAE7B,IAAI,CAAC;EACf,MAAMC,kBAAkB,GAAGF,cAAK,CAACC,MAAM,CAAO,IAAI,CAAC;EAEnD,IAAAE,gBAAS,EAAC,MAAM;IACdC,UAAU,CAAC,MAAM;MACfb,wBAAwB,CAAC,IAAI,CAAC;MAC9BG,sBAAsB,CAAC,IAAI,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;EACV,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMW,mBAAmB,GAAIC,KAAe,IAAK;IAC/C,IAAI9B,aAAa,EAAEA,aAAa,CAAC8B,KAAK,CAACC,GAAG,CAAEC,GAAG,IAAK9C,YAAY,CAAC8C,GAAG,CAAC,CAAC,CAAC;EACzE,CAAC;;EAED;EACA,MAAMC,aAAa,GAAGT,cAAK,CAACU,OAAO,CAAC,MAAM;IACxC,IAAI,CAAC/B,KAAK,EAAE,OAAO,CAAC;IACpB,MAAMgC,QAAQ,GAAGC,uBAAU,CAACC,OAAO,CAAClC,KAAK,CAAC;IAC1C,OAAQgC,QAAQ,CAACF,aAAa,IAAe,CAAC;EAChD,CAAC,EAAE,CAAC9B,KAAK,CAAC,CAAC;EAEX,MAAM;IACJmC,UAAU;IACVC,QAAQ;IACRC,iBAAiB;IACjBC,eAAe,EAAEC,uBAAuB;IAAE;IAC1CC,kBAAkB;IAAE;IACpBC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,mBAAmB;IACnBnB,KAAK;IACLoB;EACF,CAAC,GAAG,IAAAC,4BAAa,EAAC;IAChBzC,OAAO;IACPlB,QAAQ;IACRK,WAAW;IACXJ,SAAS;IACTC,UAAU;IACVC,GAAG;IACHC,gBAAgB;IAChBE,UAAU;IACVC,SAAS;IACTC,aAAa,EAAE6B,mBAAmB;IAClC5B,QAAQ,EAAEA,QAAQ,GAAI+B,GAAG,IAAK/B,QAAQ,CAACf,YAAY,CAAC8C,GAAG,CAAC,CAAC,GAAGoB,SAAS;IACrExC,aAAa;IACbN,WAAW;IACXD,eAAe;IACfgD,oBAAoB,EAAEpB;EACxB,CAAC,CAAC;;EAEF;EACA,MAAMQ,eAAe,GAAI9E,CAAoB,IAAK;IAChD+E,uBAAuB,CAAC/E,CAAC,CAAC;IAC1B;IACA,IAAImC,UAAU,EAAE;MACdwB,oBAAoB,CAACxB,UAAU,CAAC;IAClC,CAAC,MAAM;MACL,MAAMwD,YAAY,GAAGC,IAAI,CAACC,KAAK,CAC7B,CAAC7F,CAAC,CAAC8F,WAAW,CAACC,MAAM,CAACC,KAAK,GAAG/D,gBAAgB,GAAG,CAAC,GAAGD,GAAG,KACrDF,SAAS,GAAGE,GAAG,CACpB,CAAC;MACD2B,oBAAoB,CAACiC,IAAI,CAACK,GAAG,CAAC,CAAC,EAAEN,YAAY,CAAC,CAAC;IACjD;EACF,CAAC;;EAED;EACA,IAAAO,0CAAmB,EACjB,MAAMb,QAAQ,CAACc,KAAK,EACnBC,eAAe,IAAK;IACnB,IAAAC,8BAAO,EAAC5C,aAAa,CAAC,CAAC2C,eAAe,CAAC;EACzC,CACF,CAAC;;EAED;EACA,IAAAE,0BAAmB,EACjBtD,GAAG,EACH,OAAO;IACLuD,gBAAgB,EAAEA,CAAA,KAAM;MACtB,IAAIjB,mBAAmB,CAACa,KAAK,EAAE;QAC7Bb,mBAAmB,CAACa,KAAK,GAAG,KAAK;MACnC;IACF;EACF,CAAC,CAAC,EACF,CAACb,mBAAmB,CACtB,CAAC;EAED,MAAMkB,SAAS,GAAG,IAAAC,sCAAe,EAAC,MAAM;IACtC,MAAM;MAAEC;IAAE,CAAC,GAAG,IAAAC,4BAAS,EAAC;MACtBC,KAAK,EAAEzC,KAAK,CAACgC,KAAK,CAACU,MAAM;MAAE;MAC3B/E,SAAS;MACTC,UAAU;MACV8C,iBAAiB;MACjB5C,gBAAgB;MAChBD;IACF,CAAC,CAAC;IACF,OAAO0E,CAAC;EACV,CAAC,CAAC;EAEF,MAAMI,SAAS,GAAG,IAAAL,sCAAe,EAAC,MAAM;IACtC,MAAM;MAAEM;IAAE,CAAC,GAAG,IAAAJ,4BAAS,EAAC;MACtBC,KAAK,EAAEzC,KAAK,CAACgC,KAAK,CAACU,MAAM;MACzB/E,SAAS;MACTC,UAAU;MACV8C,iBAAiB;MACjB5C,gBAAgB;MAChBD;IACF,CAAC,CAAC;IACF,OAAO+E,CAAC;EACV,CAAC,CAAC;EAEF,MAAMC,aAAa,GAAG,IAAAC,uCAAgB,EAAC,OAAO;IAC5CC,IAAI,EAAEV,SAAS,CAACL,KAAK;IACrBgB,GAAG,EAAEL,SAAS,CAACX;EACjB,CAAC,CAAC,CAAC;;EAEH;EACA,MAAMiB,gBAAgB,GAAG,IAAAX,sCAAe,EAAC,MAAM;IAC7C,IAAI3D,oBAAoB,EAAE;MACxB;MACA,OAAO,CAAC;IACV;IACA;IACA,MAAMuE,IAAI,GAAGxC,iBAAiB,CAACsB,KAAK;IACpC,MAAMmB,UAAU,GACdD,IAAI,GAAGvF,SAAS,GAAG,CAACuF,IAAI,GAAG,CAAC,IAAIrF,GAAG,GAAGC,gBAAgB,GAAG,CAAC;IAC5D,OAAO,CAACqF,UAAU,GAAGxF,SAAS,IAAI,CAAC;EACrC,CAAC,CAAC;EAEF,MAAMyF,gBAAgB,GAAG,IAAAd,sCAAe,EAAC,MAAM;IAC7C,IAAI3D,oBAAoB,EAAE;MACxB;MACA,OAAO,CAAC;IACV;IACA;IACA;IACA,MAAM0E,IAAI,GAAG5B,IAAI,CAAC6B,IAAI,CAACtD,KAAK,CAACgC,KAAK,CAACU,MAAM,GAAGhC,iBAAiB,CAACsB,KAAK,CAAC;IACpE,MAAMuB,KAAK,GAAGzF,gBAAgB,GAAGuF,IAAI,IAAIzF,UAAU,GAAGC,GAAG,CAAC;;IAE1D;IACA,IAAIY,iBAAiB,IAAIO,qBAAqB,EAAE;MAC9C,OAAOuE,KAAK,IAAI3F,UAAU,GAAGC,GAAG,CAAC;IACnC;IAEA,OAAO0F,KAAK,GAAG1F,GAAG;EACpB,CAAC,CAAC;EAEF,MAAM2F,4BAA4B,GAAG,IAAAV,uCAAgB,EAAC,MAAM;IAC1D,MAAMW,SAAc,GAAG;MACrBC,QAAQ,EAAE,UAAU;MACpB7B,KAAK,EAAElE,SAAS;MAChBgG,MAAM,EAAE/F;IACV,CAAC;;IAED;IACA,IAAIe,oBAAoB,EAAE;MACxB,OAAO8E,SAAS;IAClB;IAEA,OAAO;MACL,GAAGA,SAAS;MACZV,IAAI,EAAEE,gBAAgB,CAACjB,KAAK;MAC5BgB,GAAG,EAAEI,gBAAgB,CAACpB;IACxB,CAAC;EACH,CAAC,CAAC;;EAEF;EACA,IAAAM,sCAAe,EAAC,MAAM;IACpB,IAAI5D,eAAe,IAAI0C,uBAAuB,IAAI,CAACzC,oBAAoB,EAAE;MACvE;MACAyC,uBAAuB,CAACY,KAAK,GAAG;QAC9BO,CAAC,EAAEU,gBAAgB,CAACjB,KAAK;QACzBY,CAAC,EAAEQ,gBAAgB,CAACpB,KAAK;QACzBH,KAAK,EAAElE,SAAS;QAChBgG,MAAM,EAAE/F;MACV,CAAC;IACH;EACF,CAAC,CAAC;EAEF,MAAMgG,YAAY,GAAG,CAAC,EAAEnF,iBAAiB,IAAIO,qBAAqB,CAAC;EACnE,MAAM6E,UAAU,GAAG,CAAC,EAAEnF,eAAe,IAAIS,mBAAmB,CAAC;EAC7D;EACA;EACA,MAAM2E,mBAAmB,GAAGtD,UAAU,CAACkC,MAAM,IAAIkB,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC;;EAEtE;EACA,MAAMG,UAAU,GAAG,IAAAC,0BAAgB,EACjCF,mBAAmB,EACnBvE,iBAAiB,EACjB3B,UAAU,GAAGC,GAAG,EAChBC,gBACF,CAAC;;EAED;EACA,IAAImG,gBAAgB,GAAGF,UAAU;EACjC,IAAIF,UAAU,IAAI,CAAClF,oBAAoB,EAAE;IACvC;IACA,MAAMuF,UAAU,GAAG1D,UAAU,CAACkC,MAAM,IAAIkB,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC;IAC7D,MAAMP,IAAI,GAAG5B,IAAI,CAAC6B,IAAI,CAACY,UAAU,GAAG3E,iBAAiB,CAAC;IACtD,MAAMgE,KAAK,GAAGzF,gBAAgB,GAAGuF,IAAI,IAAIzF,UAAU,GAAGC,GAAG,CAAC;;IAE1D;IACA,IAAIuF,gBAAgB,GAAGG,KAAK;IAC5B,IAAIK,YAAY,EAAE;MAChBR,gBAAgB,GAAGG,KAAK,IAAI3F,UAAU,GAAGC,GAAG,CAAC;IAC/C,CAAC,MAAM;MACLuF,gBAAgB,GAAGG,KAAK,GAAG1F,GAAG;IAChC;IAEA,MAAMsG,qBAAqB,GAAGf,gBAAgB,GAAGxF,UAAU;IAC3D;IACAqG,gBAAgB,GAAGxC,IAAI,CAACK,GAAG,CACzBiC,UAAU,EACVI,qBAAqB,GAAGrG,gBAC1B,CAAC;EACH;EAEA,oBACE5C,MAAA,CAAAa,OAAA,CAAAqI,aAAA,CAACpH,kBAAkB;IACjB6B,GAAG,EAAEC,aAAc;IACnBgC,QAAQ,EAAEA,QAAS;IACnBuD,QAAQ,EAAExD,kBAAmB,CAAC;IAAA;IAC9ByD,mBAAmB,EAAE,EAAG;IACxBC,qBAAqB,EAAE,CAAClG,KAAK,CAAE;IAC/BmG,UAAU,EAAEA,CAAA,KAAM;MAChB;MACA;MACA;MACA,IAAI/E,kBAAkB,CAACgF,OAAO,EAAE;QAC9BC,YAAY,CAACjF,kBAAkB,CAACgF,OAAO,CAAC;MAC1C;MACAhF,kBAAkB,CAACgF,OAAO,GAAG3E,UAAU,CAAC,MAAM;QAC5C;QACA;QACA,IAAIqB,mBAAmB,CAACa,KAAK,IAAI,CAACd,QAAQ,CAACc,KAAK,EAAE;UAChDb,mBAAmB,CAACa,KAAK,GAAG,KAAK;QACnC;MACF,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;IACX;EAAE,gBAEF9G,MAAA,CAAAa,OAAA,CAAAqI,aAAA,CAAC/I,YAAA,CAAAsJ,IAAI;IACHtG,KAAK,EAAE,CACLuG,MAAM,CAACC,SAAS,EAChB;MACEC,OAAO,EAAEhH,gBAAgB;MACzB6F,MAAM,EAAEM;IACV,CAAC,CACD;IACFI,QAAQ,EAAE1D;EAAgB,gBAE1BzF,MAAA,CAAAa,OAAA,CAAAqI,aAAA,CAAC7I,0BAAA,CAAAwJ,eAAe;IAACC,OAAO,EAAEvE;EAAS,gBACjCvF,MAAA,CAAAa,OAAA,CAAAqI,aAAA,CAAC/I,YAAA,CAAAsJ,IAAI;IAACM,aAAa,EAAC,UAAU;IAAC5G,KAAK,EAAEiC,uBAAU,CAAC4E;EAAa,GAC3D1E,UAAU,CAACP,GAAG,CAAEC,GAAG,IAAK;IACvB,MAAMiF,KAAK,GAAGnE,UAAU,CAACoE,IAAI,CAC1BC,CAAC,IAAKA,CAAC,CAACnF,GAAG,IAAI9C,YAAY,CAACiI,CAAC,CAACnF,GAAG,CAAC,KAAK9C,YAAY,CAAC8C,GAAG,CAC1D,CAAC;IACD,IAAI,CAACiF,KAAK,EAAE,OAAO,IAAI;IACvB,oBACEjK,MAAA,CAAAa,OAAA,CAAAqI,aAAA,CAACzI,aAAA,CAAAI,OAAY;MACXmE,GAAG,EAAEA,GAAI;MACTwD,QAAQ,EAAEzC,SAAS,CAACf,GAAG,CAAE;MACzBvC,SAAS,EAAEA,SAAU;MACrBC,UAAU,EAAEA,UAAW;MACvBsD,QAAQ,EAAEA,QAAS;MACnBC,mBAAmB,EAAEA,mBAAoB;MACzC/C,MAAM,EAAEA,MAAO;MACfE,sBAAsB,EAAEA,sBAAuB;MAC/CgH,mBAAmB,EAAE,CAAC,CAAC5G,eAAgB;MACvCP,QAAQ,EAAEA,CAAA,KAAM;QACd4C,UAAU,CAACb,GAAG,CAAC;QACf,IAAI/B,QAAQ,EAAE;UACZA,QAAQ,CAACf,YAAY,CAAC8C,GAAG,CAAC,CAAC;QAC7B;MACF;IAAE,GAEDiF,KACW,CAAC;EAEnB,CAAC,CACG,CACS,CAAC,EAGjB1G,iBAAiB,IAAIO,qBAAqB,iBACzC9D,MAAA,CAAAa,OAAA,CAAAqI,aAAA,CAAC9I,sBAAA,CAAAS,OAAQ,CAAC4I,IAAI;IACZM,aAAa,EAAC,UAAU;IACxBM,WAAW,EAAE,KAAM;IACnBlH,KAAK,EAAE,CACL;MACEqF,QAAQ,EAAE,UAAU;MACpB7B,KAAK,EAAElE,SAAS;MAChBgG,MAAM,EAAE/F;IACV,CAAC,EACDiF,aAAa,CAAE;IAAA;EACf,gBAEF3H,MAAA,CAAAa,OAAA,CAAAqI,aAAA,CAAC/I,YAAA,CAAAsJ,IAAI;IAACM,aAAa,EAAC,MAAM;IAAC5G,KAAK,EAAE;MAAEmH,IAAI,EAAE;IAAE;EAAE,GAC3C/G,iBACG,CACO,CAChB,EAGAC,eAAe,IAAIS,mBAAmB,IAAIE,UAAU,iBACnDnE,MAAA,CAAAa,OAAA,CAAAqI,aAAA,CAAC9I,sBAAA,CAAAS,OAAQ,CAAC4I,IAAI;IACZ9F,GAAG,EAAEe,kBAAmB;IACxBqF,aAAa,EAAC,UAAU;IACxBM,WAAW,EAAE,KAAM;IACnBlH,KAAK,EAAE,CACLmF,4BAA4B,EAC5B7E,oBAAoB,CAAE;IAAA,CACtB;IACF0F,QAAQ,EAAGxI,CAAC,IAAK;MACf;MACA,MAAM;QAAE0G,CAAC;QAAEK,CAAC;QAAEf,KAAK;QAAE8B;MAAO,CAAC,GAAG9H,CAAC,CAAC8F,WAAW,CAACC,MAAM;MACpD,IAAIR,uBAAuB,EAAE;QAC3BA,uBAAuB,CAACY,KAAK,GAAG;UAAEO,CAAC;UAAEK,CAAC;UAAEf,KAAK;UAAE8B;QAAO,CAAC;MACzD;IACF;EAAE,gBAEFzI,MAAA,CAAAa,OAAA,CAAAqI,aAAA,CAAC/I,YAAA,CAAAsJ,IAAI;IAACM,aAAa,EAAC,MAAM;IAAC5G,KAAK,EAAE;MAAEmH,IAAI,EAAE;IAAE;EAAE,GAC3C9G,eACG,CACO,CAEb,CACY,CAAC;AAEzB,CACF,CAAC;AAED,MAAMkG,MAAM,GAAGtE,uBAAU,CAACmF,MAAM,CAAC;EAC/BZ,SAAS,EAAE;IACThD,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAAC,IAAA6D,QAAA,GAAAC,OAAA,CAAA5J,OAAA,GAEYyB,aAAa","ignoreList":[]}

package/lib/commonjs/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SwappableGrid", {
+  enumerable: true,
+  get: function () {
+    return _SwappableGrid.default;
+  }
+});
+var _SwappableGrid = _interopRequireDefault(require("./SwappableGrid"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_SwappableGrid","_interopRequireDefault","require","e","__esModule","default"],"sources":["index.ts"],"sourcesContent":["export { default as SwappableGrid } from \"./SwappableGrid\";\nexport type { SwappableGridRef } from \"./SwappableGrid\";\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,cAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA2D,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/commonjs/utils/helpers/computerMinHeight.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = computeMinHeight;
+function computeMinHeight(count, numColumns, tileH, pad) {
+  const rows = Math.max(1, Math.ceil(count / numColumns));
+  return pad * 2 + rows * tileH;
+}
+//# sourceMappingURL=computerMinHeight.js.map

package/lib/commonjs/utils/helpers/computerMinHeight.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["computeMinHeight","count","numColumns","tileH","pad","rows","Math","max","ceil"],"sources":["computerMinHeight.ts"],"sourcesContent":["export default function computeMinHeight(\n  count: number,\n  numColumns: number,\n  tileH: number,\n  pad: number\n) {\n  const rows = Math.max(1, Math.ceil(count / numColumns));\n  return pad * 2 + rows * tileH;\n}\n"],"mappings":";;;;;;AAAe,SAASA,gBAAgBA,CACtCC,KAAa,EACbC,UAAkB,EAClBC,KAAa,EACbC,GAAW,EACX;EACA,MAAMC,IAAI,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,IAAI,CAACP,KAAK,GAAGC,UAAU,CAAC,CAAC;EACvD,OAAOE,GAAG,GAAG,CAAC,GAAGC,IAAI,GAAGF,KAAK;AAC/B","ignoreList":[]}