@souscheflabs/reanimated-flashlist 0.1.7

package/README.md

@@ -0,0 +1,282 @@
+# @souschef/reanimated-flashlist
+
+A high-performance animated FlashList with drag-to-reorder and entry/exit animations for React Native.
+
+## Features
+
+- **Drag-to-reorder** with smooth animations and autoscroll
+- **Entry animations** when items appear in the list
+- **Exit animations** with configurable slide/fade/scale effects
+- **Layout animations** for remaining items when one is removed
+- **60fps performance** via Reanimated UI-thread animations
+- **Full TypeScript support** with generics
+
+## Installation
+
+### From npm (when published)
+```bash
+npm install @souschef/reanimated-flashlist
+```
+
+### From GitHub (private repo)
+
+Using HTTPS (will prompt for credentials):
+```bash
+npm install github:SousChefLabs/reanimated-flashlist#v0.1.1
+```
+
+Using SSH (recommended for CI/private repos):
+```bash
+npm install git+ssh://git@github.com:SousChefLabs/reanimated-flashlist.git#v0.1.1
+```
+
+Or add to `package.json`:
+```json
+{
+  "dependencies": {
+    "@souschef/reanimated-flashlist": "github:SousChefLabs/reanimated-flashlist#v0.1.1"
+  }
+}
+```
+
+Replace `v0.1.1` with the desired version tag.
+
+### Requirements
+
+**React Native New Architecture required.** This library uses TurboModules and JSI for optimal performance.
+
+- React Native 0.74.0+ with [New Architecture enabled](https://reactnative.dev/architecture/landing-page)
+- `@shopify/flash-list` v2.0.0+
+- `react-native-reanimated` v4.0.0+
+- `react-native-gesture-handler` v2.14.0+
+
+```bash
+npm install @shopify/flash-list react-native-reanimated react-native-gesture-handler
+```
+
+## Quick Start
+
+```tsx
+import { AnimatedFlashList, type AnimatedListItem } from '@souschef/reanimated-flashlist';
+import { GestureDetector } from 'react-native-gesture-handler';
+
+interface MyItem extends AnimatedListItem {
+  title: string;
+}
+
+function MyList() {
+  const [items, setItems] = useState<MyItem[]>([
+    { id: '1', title: 'Item 1' },
+    { id: '2', title: 'Item 2' },
+  ]);
+
+  return (
+    <AnimatedFlashList<MyItem>
+      data={items}
+      keyExtractor={(item) => item.id}
+      renderItem={({ item, dragHandleProps, triggerExitAnimation }) => (
+        <View style={styles.item}>
+          <Text>{item.title}</Text>
+
+          {/* Drag handle */}
+          {dragHandleProps && (
+            <GestureDetector gesture={dragHandleProps.gesture}>
+              <View style={styles.dragHandle}>
+                <DragIcon />
+              </View>
+            </GestureDetector>
+          )}
+
+          {/* Delete button with exit animation */}
+          <TouchableOpacity
+            onPress={() => {
+              triggerExitAnimation(1, () => {
+                setItems(prev => prev.filter(i => i.id !== item.id));
+              }, 'fast');
+            }}
+          >
+            <DeleteIcon />
+          </TouchableOpacity>
+        </View>
+      )}
+      dragEnabled
+      onReorder={(itemId, fromIndex, toIndex) => {
+        setItems(prev => {
+          const newItems = [...prev];
+          const [removed] = newItems.splice(fromIndex, 1);
+          newItems.splice(toIndex, 0, removed);
+          return newItems;
+        });
+      }}
+    />
+  );
+}
+```
+
+## API Reference
+
+### AnimatedFlashListProps
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `T[]` | Required | Array of items (must extend `AnimatedListItem`) |
+| `keyExtractor` | `(item: T, index: number) => string` | Required | Extract unique key for each item |
+| `renderItem` | `(info: AnimatedRenderItemInfo<T>) => ReactElement` | Required | Render function for items |
+| `dragEnabled` | `boolean` | `false` | Enable drag-to-reorder |
+| `onReorder` | `(itemId, fromIndex, toIndex) => void` | - | Called when item is reordered |
+| `onReorderByNeighbors` | `(itemId, afterId, beforeId) => void` | - | Alternative callback with neighbor IDs (for fractional indexing) |
+| `canDrag` | `(item: T, index: number) => boolean` | `() => true` | Control which items can be dragged |
+| `onHapticFeedback` | `(type: HapticFeedbackType) => void` | - | Haptic feedback callback |
+| `config` | `AnimatedFlashListConfig` | - | Configuration overrides |
+
+### AnimatedRenderItemInfo
+
+Props passed to your `renderItem` function:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `item` | `T` | The item data |
+| `index` | `number` | Current index |
+| `totalItems` | `number` | Total items in list |
+| `dragHandleProps` | `{ gesture, isDragging } \| null` | Spread onto GestureDetector for drag handle |
+| `isDragEnabled` | `boolean` | Whether drag is enabled for this item |
+| `triggerExitAnimation` | `(direction, onComplete, preset?) => void` | Trigger exit animation |
+| `resetExitAnimation` | `() => void` | Reset exit animation state |
+
+## Recipes
+
+### Checkbox Toggle with Exit Animation
+
+When a checkbox is toggled and the item should exit:
+
+```tsx
+renderItem={({ item, triggerExitAnimation }) => (
+  <View style={styles.item}>
+    <Checkbox
+      checked={item.completed}
+      onToggle={() => {
+        // Trigger exit animation, then remove item
+        triggerExitAnimation(1, () => {
+          removeItem(item.id);
+        }, 'fast'); // 'fast' preset for quick actions
+      }}
+    />
+    <Text>{item.title}</Text>
+  </View>
+)}
+```
+
+### Swipe to Delete
+
+```tsx
+renderItem={({ item, triggerExitAnimation }) => (
+  <Swipeable
+    onSwipeRight={() => {
+      triggerExitAnimation(1, () => deleteItem(item.id));
+    }}
+    onSwipeLeft={() => {
+      triggerExitAnimation(-1, () => deleteItem(item.id));
+    }}
+  >
+    <ItemContent item={item} />
+  </Swipeable>
+)}
+```
+
+### Custom Drag Handle
+
+```tsx
+renderItem={({ item, dragHandleProps }) => (
+  <View style={styles.item}>
+    <Text>{item.title}</Text>
+
+    {dragHandleProps && (
+      <GestureDetector gesture={dragHandleProps.gesture}>
+        <Animated.View
+          style={[
+            styles.dragHandle,
+            // Optional: visual feedback during drag
+            useAnimatedStyle(() => ({
+              opacity: dragHandleProps.isDragging.value ? 0.5 : 1,
+            })),
+          ]}
+        >
+          <GripIcon />
+        </Animated.View>
+      </GestureDetector>
+    )}
+  </View>
+)}
+```
+
+## Configuration
+
+### Drag Configuration
+
+```tsx
+<AnimatedFlashList
+  config={{
+    drag: {
+      itemHeight: 80,           // Item height for drag calculations
+      dragScale: 1.05,          // Scale when dragging
+      longPressDuration: 200,   // ms to activate drag
+      edgeThreshold: 80,        // px from edge to trigger autoscroll
+      maxScrollSpeed: 10,       // Autoscroll speed
+    },
+  }}
+/>
+```
+
+### Animation Presets
+
+Exit animations have two presets:
+
+- **`'default'`** (300ms): Standard exit with staggered fade/scale
+- **`'fast'`** (200ms): Quick exit for checkbox toggles
+
+```tsx
+// Use fast preset for quick actions
+triggerExitAnimation(1, onComplete, 'fast');
+
+// Use default preset for deliberate actions
+triggerExitAnimation(-1, onComplete, 'default');
+```
+
+## Layout Animations
+
+When an item exits the list, remaining items automatically animate to fill the gap. This uses React Native's `LayoutAnimation` API and is enabled by default.
+
+The animation is triggered automatically when `triggerExitAnimation` is called - no additional setup required.
+
+## Advanced Usage
+
+### Using Individual Hooks
+
+For custom implementations, you can use the hooks directly:
+
+```tsx
+import {
+  useDragGesture,
+  useDragShift,
+  useDragAnimatedStyle,
+  useListExitAnimation,
+  useListEntryAnimation,
+} from '@souschef/reanimated-flashlist';
+```
+
+### Context Providers
+
+For building custom list implementations:
+
+```tsx
+import {
+  DragStateProvider,
+  ListAnimationProvider,
+  useDragState,
+  useListAnimation,
+} from '@souschef/reanimated-flashlist';
+```
+
+## License
+
+MIT

package/lib/AnimatedFlashList.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { AnimatedListItem, AnimatedFlashListProps, AnimatedFlashListRef } from './types';
+export declare const AnimatedFlashList: <T extends AnimatedListItem>(props: AnimatedFlashListProps<T> & {
+    ref?: React.ForwardedRef<AnimatedFlashListRef>;
+}) => React.ReactElement | null;
+//# sourceMappingURL=AnimatedFlashList.d.ts.map

package/lib/AnimatedFlashList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedFlashList.d.ts","sourceRoot":"","sources":["../src/AnimatedFlashList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACtB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AA6XjB,eAAO,MAAM,iBAAiB,EAAyC,CACrE,CAAC,SAAS,gBAAgB,EAE1B,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAA;CAAE,KAClF,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}

package/lib/AnimatedFlashList.js

@@ -0,0 +1,207 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimatedFlashList = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const flash_list_1 = require("@shopify/flash-list");
+const contexts_1 = require("./contexts");
+const AnimatedFlashListItem_1 = require("./AnimatedFlashListItem");
+const constants_1 = require("./constants");
+const ItemWrapper = react_1.default.memo(function ItemWrapper({ item, index, totalItemsRef, renderItem, canDrag, dragEnabled, onReorderByDelta, onHapticFeedback, }) {
+    const isDragEnabled = dragEnabled && (canDrag ? canDrag(item, index) : true);
+    return (<AnimatedFlashListItem_1.AnimatedFlashListItem item={item} index={index} totalItems={totalItemsRef.current ?? 0} isDragEnabled={isDragEnabled} renderItem={renderItem} onReorderByDelta={onReorderByDelta} onHapticFeedback={onHapticFeedback}/>);
+});
+function InnerFlashList({ data, totalItemsRef, flashListRef, renderItem, keyExtractor, canDrag, dragEnabled, onReorderByDelta, onHapticFeedback, itemHeight, ListFooterComponent, onEndReached, onEndReachedThreshold, onRefresh, refreshing, refreshTintColor, contentContainerStyle, drawDistance = 500, showsVerticalScrollIndicator = true, }) {
+    // Get drag state context for scroll tracking
+    const { scrollOffset, contentHeight, visibleHeight, listTopY, setListRef } = (0, contexts_1.useDragState)();
+    // Register FlashList ref with drag context for autoscroll
+    (0, react_1.useEffect)(() => {
+        // Cast to unknown to satisfy the generic constraint
+        setListRef(flashListRef.current);
+        return () => setListRef(null);
+    }, [setListRef, flashListRef]);
+    // Update scroll offset on scroll
+    const handleScroll = (0, react_1.useCallback)((event) => {
+        scrollOffset.value = event.nativeEvent.contentOffset.y;
+    }, [scrollOffset]);
+    // Update content height when list content changes
+    const handleContentSizeChange = (0, react_1.useCallback)((_width, height) => {
+        contentHeight.value = height;
+    }, [contentHeight]);
+    // Update visible height and list position when layout changes
+    const handleLayout = (0, react_1.useCallback)((event) => {
+        visibleHeight.value = event.nativeEvent.layout.height;
+        const nativeRef = flashListRef.current?.getNativeScrollRef?.();
+        if (nativeRef?.measureInWindow) {
+            nativeRef.measureInWindow((_x, y) => {
+                listTopY.value = y;
+            });
+        }
+    }, [visibleHeight, listTopY, flashListRef]);
+    // Render item for FlashList
+    const flashListRenderItem = (0, react_1.useCallback)(({ item, index }) => (<ItemWrapper item={item} index={index} totalItemsRef={totalItemsRef} renderItem={renderItem} canDrag={canDrag} dragEnabled={dragEnabled} onReorderByDelta={onReorderByDelta} onHapticFeedback={onHapticFeedback}/>), [
+        totalItemsRef,
+        renderItem,
+        canDrag,
+        dragEnabled,
+        onReorderByDelta,
+        onHapticFeedback,
+    ]);
+    // getItemType for FlashList recycling optimization
+    const getItemType = (0, react_1.useCallback)(() => 'animated-item', []);
+    // Override item layout for consistent drag calculations
+    // Note: We cast the layout to include size for drag calculations
+    const overrideItemLayout = (0, react_1.useCallback)((layout, _item, _index) => {
+        // FlashList v2 uses this for span, but we extend for size in drag calculations
+        layout.size = itemHeight;
+    }, [itemHeight]);
+    return (<flash_list_1.FlashList ref={flashListRef} data={data} renderItem={flashListRenderItem} keyExtractor={keyExtractor} getItemType={getItemType} overrideItemLayout={overrideItemLayout} onScroll={handleScroll} onContentSizeChange={handleContentSizeChange} onLayout={handleLayout} scrollEventThrottle={16} drawDistance={drawDistance} maintainVisibleContentPosition={{ disabled: true }} showsVerticalScrollIndicator={showsVerticalScrollIndicator} contentContainerStyle={contentContainerStyle} ListFooterComponent={ListFooterComponent ?? undefined} onEndReached={onEndReached} onEndReachedThreshold={onEndReachedThreshold} refreshControl={onRefresh ? (<react_native_1.RefreshControl refreshing={refreshing ?? false} onRefresh={onRefresh} tintColor={refreshTintColor} colors={refreshTintColor ? [refreshTintColor] : undefined}/>) : undefined}/>);
+}
+/**
+ * AnimatedFlashList - High-performance animated list with drag-to-reorder
+ *
+ * A wrapper around @shopify/flash-list that provides:
+ * - Smooth drag-to-reorder with autoscroll
+ * - Entry animations for new items
+ * - Exit animations for removed items
+ * - Full TypeScript generics support
+ *
+ * @example
+ * ```tsx
+ * <AnimatedFlashList<MyItem>
+ *   data={items}
+ *   keyExtractor={(item) => item.id}
+ *   renderItem={({ item, animatedStyle, dragHandleProps }) => (
+ *     <Animated.View style={animatedStyle}>
+ *       <MyItem item={item} />
+ *       {dragHandleProps && (
+ *         <GestureDetector gesture={dragHandleProps.gesture}>
+ *           <DragHandle />
+ *         </GestureDetector>
+ *       )}
+ *     </Animated.View>
+ *   )}
+ *   dragEnabled
+ *   onReorder={(itemId, from, to) => reorderItems(itemId, from, to)}
+ * />
+ * ```
+ */
+function AnimatedFlashListInner(props, ref) {
+    const { data, keyExtractor, renderItem, dragEnabled = false, onReorder, onReorderByNeighbors, canDrag, onHapticFeedback, config, onPrepareLayoutAnimation, ListFooterComponent, onRefresh, refreshing = false, onEndReached, onEndReachedThreshold = 0.5, contentContainerStyle, ...flashListProps } = props;
+    // Merge config with defaults
+    const dragConfig = (0, react_1.useMemo)(() => ({
+        ...constants_1.DEFAULT_DRAG_CONFIG,
+        ...config?.drag,
+    }), [config?.drag]);
+    // Ref to FlashList
+    const flashListRef = (0, react_1.useRef)(null);
+    // Expose methods to parent via ref
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        prepareForLayoutAnimation: () => {
+            flashListRef.current?.prepareForLayoutAnimationRender();
+            onPrepareLayoutAnimation?.();
+        },
+        scrollToOffset: (offset, animated = true) => {
+            flashListRef.current?.scrollToOffset({ offset, animated });
+        },
+        scrollToIndex: (index, animated = true) => {
+            flashListRef.current?.scrollToIndex({ index, animated });
+        },
+    }));
+    // Keep valid items in ref for reorder callback
+    const dataRef = (0, react_1.useRef)([]);
+    dataRef.current = data;
+    // Handle reorder by index delta - converts to various callback formats
+    const handleReorderByDelta = (0, react_1.useCallback)((itemId, indexDelta) => {
+        if (indexDelta === 0)
+            return;
+        const currentItems = dataRef.current;
+        const currentIndex = currentItems.findIndex(item => item.id === itemId);
+        if (currentIndex === -1)
+            return;
+        const newIndex = Math.max(0, Math.min(currentItems.length - 1, currentIndex + indexDelta));
+        if (newIndex === currentIndex)
+            return;
+        // Call onReorder if provided
+        if (onReorder) {
+            onReorder(itemId, currentIndex, newIndex);
+        }
+        // Call onReorderByNeighbors if provided (for fractional indexing)
+        if (onReorderByNeighbors) {
+            let afterItemId = null;
+            let beforeItemId = null;
+            if (indexDelta > 0) {
+                afterItemId = currentItems[newIndex]?.id ?? null;
+                beforeItemId =
+                    newIndex < currentItems.length - 1
+                        ? currentItems[newIndex + 1]?.id ?? null
+                        : null;
+            }
+            else {
+                afterItemId =
+                    newIndex > 0 ? currentItems[newIndex - 1]?.id ?? null : null;
+                beforeItemId = currentItems[newIndex]?.id ?? null;
+            }
+            onReorderByNeighbors(itemId, afterItemId, beforeItemId);
+        }
+    }, [onReorder, onReorderByNeighbors]);
+    // Use ref for totalItems to avoid renderItem callback recreation
+    const totalItemsRef = (0, react_1.useRef)(data.length);
+    totalItemsRef.current = data.length;
+    // Early return for empty data
+    if (!data || !Array.isArray(data) || data.length === 0) {
+        if (ListFooterComponent) {
+            return (<react_native_1.View style={containerStyle}>
+          {react_1.default.isValidElement(ListFooterComponent)
+                    ? ListFooterComponent
+                    : react_1.default.createElement(ListFooterComponent)}
+        </react_native_1.View>);
+        }
+        return null;
+    }
+    return (<contexts_1.ListAnimationProvider>
+      <contexts_1.DragStateProvider config={dragConfig}>
+        <react_native_1.View style={containerStyle}>
+          <InnerFlashList data={data} totalItemsRef={totalItemsRef} flashListRef={flashListRef} renderItem={renderItem} keyExtractor={keyExtractor} canDrag={canDrag} dragEnabled={dragEnabled} onReorderByDelta={onReorder || onReorderByNeighbors ? handleReorderByDelta : undefined} onHapticFeedback={onHapticFeedback} itemHeight={dragConfig.itemHeight} ListFooterComponent={ListFooterComponent} onEndReached={onEndReached} onEndReachedThreshold={onEndReachedThreshold} onRefresh={onRefresh} refreshing={refreshing} contentContainerStyle={contentContainerStyle} {...flashListProps}/>
+        </react_native_1.View>
+      </contexts_1.DragStateProvider>
+    </contexts_1.ListAnimationProvider>);
+}
+const containerStyle = {
+    flex: 1,
+};
+// Forward ref with generic support
+exports.AnimatedFlashList = (0, react_1.forwardRef)(AnimatedFlashListInner);

package/lib/AnimatedFlashListItem.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { AnimatedListItem, AnimatedRenderItemInfo, HapticFeedbackType } from './types';
+interface AnimatedFlashListItemProps<T extends AnimatedListItem> {
+    /** The item data */
+    item: T;
+    /** Current index in list */
+    index: number;
+    /** Total number of items */
+    totalItems: number;
+    /** Whether drag is enabled for this item */
+    isDragEnabled: boolean;
+    /** Render function from parent */
+    renderItem: (info: AnimatedRenderItemInfo<T>) => React.ReactElement;
+    /** Callback when reorder occurs */
+    onReorderByDelta?: (itemId: string, delta: number) => void;
+    /** Optional haptic feedback callback */
+    onHapticFeedback?: (type: HapticFeedbackType) => void;
+}
+/**
+ * Internal item wrapper that provides all animation functionality.
+ *
+ * This component:
+ * 1. Sets up drag gesture and shift animations
+ * 2. Sets up entry/exit animations
+ * 3. Combines all animated styles
+ * 4. Passes everything to the consumer's renderItem function
+ *
+ * @internal
+ */
+declare function AnimatedFlashListItemInner<T extends AnimatedListItem>({ item, index, totalItems, isDragEnabled, renderItem, onReorderByDelta, onHapticFeedback, }: AnimatedFlashListItemProps<T>): React.ReactElement | null;
+export declare const AnimatedFlashListItem: typeof AnimatedFlashListItemInner;
+export {};
+//# sourceMappingURL=AnimatedFlashListItem.d.ts.map

package/lib/AnimatedFlashListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedFlashListItem.d.ts","sourceRoot":"","sources":["../src/AnimatedFlashListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAY7E,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAEjB,UAAU,0BAA0B,CAAC,CAAC,SAAS,gBAAgB;IAC7D,oBAAoB;IACpB,IAAI,EAAE,CAAC,CAAC;IACR,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,EAAE,OAAO,CAAC;IACvB,kCAAkC;IAClC,UAAU,EAAE,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IACpE,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACvD;AAED;;;;;;;;;;GAUG;AACH,iBAAS,0BAA0B,CAAC,CAAC,SAAS,gBAAgB,EAAE,EAC9D,IAAI,EACJ,KAAK,EACL,UAAU,EACV,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,gBAAgB,GACjB,EAAE,0BAA0B,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAwJ3D;AAGD,eAAO,MAAM,qBAAqB,EAE7B,OAAO,0BAA0B,CAAC"}