react-native-smart-grid 0.1.0

package/lib/typescript/src/components/GhostTile.d.ts

@@ -0,0 +1,9 @@
+import type { PlacedTile, GridConfig } from '../types.js';
+type Props = {
+    activeTile: PlacedTile;
+    config: GridConfig;
+    containerWidth: number;
+};
+export declare const GhostTile: import("react").MemoExoticComponent<({ activeTile, config, containerWidth, }: Props) => import("react").JSX.Element | null>;
+export {};
+//# sourceMappingURL=GhostTile.d.ts.map

package/lib/typescript/src/components/GhostTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GhostTile.d.ts","sourceRoot":"","sources":["../../../../src/components/GhostTile.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAU,CAAC;AAIvD,KAAK,KAAK,GAAG;IACX,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,SAAS,gFAInB,KAAK,wCAcN,CAAC"}

package/lib/typescript/src/components/GridTile.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PixelRect } from '../layout/LayoutCalculator.js';
+type Props = {
+    rect: PixelRect;
+    children: React.ReactNode;
+};
+export declare const GridTile: React.MemoExoticComponent<({ rect, children }: Props) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=GridTile.d.ts.map

package/lib/typescript/src/components/GridTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridTile.d.ts","sourceRoot":"","sources":["../../../../src/components/GridTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA4B,CAAC;AAE5D,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,QAAQ,iDAA8C,KAAK,uBAWtE,CAAC"}

package/lib/typescript/src/components/ResizeHandle.d.ts

@@ -0,0 +1,9 @@
+import type { PlacedTile, GridConfig } from '../types.js';
+type Props = {
+    tile: PlacedTile;
+    config: GridConfig;
+    containerWidth: number;
+};
+export declare function ResizeHandle({ tile, config, containerWidth }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ResizeHandle.d.ts.map

package/lib/typescript/src/components/ResizeHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/ResizeHandle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAY,UAAU,EAAE,MAAM,aAAU,CAAC;AAIjE,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,KAAK,+BA+CnE"}

package/lib/typescript/src/components/SmartGrid.d.ts

@@ -0,0 +1,214 @@
+import React from 'react';
+import type { Tile, CollisionBehavior, Gravity, TilePosition, TileSize, HapticEvent, LayoutItem } from '../types.js';
+/** Imperative handle exposed via `ref`. */
+export type SmartGridRef = {
+    /** Re-packs all tiles using largest-first bin-packing. Fires `onLayoutChange`. */
+    autoArrange: () => void;
+    /** Returns a plain `LayoutItem[]` you can JSON.stringify and save anywhere. Does not include tile `data`. */
+    serializeLayout: () => LayoutItem[];
+    /** Restores a previously serialized layout. Fires `onLayoutChange`. */
+    restoreLayout: (layout: LayoutItem[]) => void;
+    /** Clears the entire selection. Equivalent to `setSelection([])`. */
+    clearSelection: () => void;
+    /** Programmatically set the selected tile IDs. Pass `[]` to clear. Fires `onSelectionChange`. */
+    setSelection: (ids: string[]) => void;
+};
+/** Argument passed to `renderTile`. */
+export type RenderTileInfo<TData> = {
+    /** The tile being rendered, including your custom `data`. */
+    item: Tile<TData>;
+    /** `true` while this tile is actively being dragged (the placeholder left behind). */
+    isActive: boolean;
+    /**
+     * `true` when this tile is in the current selection.
+     * Selection is entered via long press — either immediately (when `draggable={false}`)
+     * or on release without moving (when draggable). Use to show contextual actions like a delete button.
+     */
+    isSelected: boolean;
+};
+/**
+ * Props for `SmartGrid`.
+ *
+ * `position` and `size` on each tile are optional:
+ * - Both provided → tile is placed exactly where specified.
+ * - `size` only → tile is auto-placed via bin-packing.
+ * - Neither → tile defaults to 1×1 and is auto-placed in order.
+ */
+export type SmartGridProps<TData = unknown> = {
+    /** Array of tiles to render. `position` and `size` are optional — omit them to let the grid auto-place. */
+    data: Tile<TData>[];
+    /** Render function for each tile. Return any React Native view — SmartGrid handles absolute positioning. */
+    renderTile: (info: RenderTileInfo<TData>) => React.ReactNode;
+    /** Number of grid columns. @default 4 */
+    columns?: number;
+    /** Height of one grid row in pixels. @default 100 */
+    rowHeight?: number;
+    /** Gap between tiles in pixels. @default 8 */
+    gap?: number;
+    /** Outer padding of the grid in pixels. @default 8 */
+    padding?: number;
+    /**
+     * How dropped tiles interact with tiles already occupying the target space.
+     * - `'push'` — displaced tiles are moved to the next available slot.
+     * - `'swap'` — dragged tile and the tile at the drop center exchange positions.
+     * @default 'push'
+     */
+    collisionBehavior?: CollisionBehavior;
+    /**
+     * Compact tiles toward the origin after every drop.
+     * - `'none'` — tiles stay where dropped.
+     * - `'up'`   — tiles slide upward to fill empty rows.
+     * - `'left'` — tiles slide left to fill empty columns.
+     * @default 'none'
+     */
+    gravity?: Gravity;
+    /** When `true`, shows a resize handle on each tile's bottom-right corner. @default false */
+    isEditing?: boolean;
+    /**
+     * Master switch — when `false`, no tile in the grid can be dragged regardless of individual `tile.draggable` flags.
+     * @default true
+     */
+    draggable?: boolean;
+    /**
+     * Master switch — when `false`, no tile in the grid can be selected regardless of individual `tile.selectable` flags.
+     * @default true
+     */
+    selectable?: boolean;
+    /**
+     * When `true`, long-pressing multiple tiles adds them all to the selection array.
+     * When `false`, selecting a tile deselects all others (single-select mode).
+     * @default true
+     */
+    multiSelect?: boolean;
+    /** Called after every drag, drop, or resize with the updated `LayoutItem[]`. Merge this back into your state to keep the grid in sync. */
+    onLayoutChange?: (layout: LayoutItem[]) => void;
+    /** Called when the user taps a tile (quick press, no drag). Use this to open detail views, modals, folders, etc. */
+    onTilePress?: (tile: Tile<TData>) => void;
+    /** Called when the user begins dragging a tile (fires after the 300ms long-press activates, before the first move). */
+    onTileDragStart?: (tile: Tile<TData>) => void;
+    /** Called when a tile is dropped at a new position. */
+    onTileDrop?: (tile: Tile<TData>, position: TilePosition) => void;
+    /** Called when a tile is resized via the resize handle. */
+    onTileResize?: (tile: Tile<TData>, newSize: TileSize) => void;
+    /**
+     * Called whenever the selection array changes. Receives the full array of currently selected tile IDs.
+     *
+     * Selection changes when:
+     * - Long press on a tile toggles it (immediately if `draggable={false}`, on release otherwise).
+     * - Tap on a tile while selection is active toggles it.
+     * - A real drag-and-drop clears the entire selection.
+     * - `clearSelection()` or `setSelection()` is called on the ref.
+     */
+    onSelectionChange?: (ids: string[]) => void;
+    /**
+     * Called at key interaction moments so you can trigger haptic feedback
+     * with whichever haptics library you prefer — no dependency added.
+     *
+     * @example
+     * onHaptic={(event) => {
+     *   if (event === 'pick-up') HapticFeedback.trigger('impactMedium');
+     *   if (event === 'snap')    HapticFeedback.trigger('selection');
+     *   if (event === 'drop')    HapticFeedback.trigger('notificationSuccess');
+     *   if (event === 'resize')  HapticFeedback.trigger('impactLight');
+     * }}
+     */
+    onHaptic?: (event: HapticEvent) => void;
+};
+/**
+ * A draggable, variable-sized tile grid for React Native.
+ *
+ * ---
+ *
+ * ### Basic usage
+ * ```tsx
+ * const gridRef = useRef<SmartGridRef>(null);
+ *
+ * <SmartGrid
+ *   ref={gridRef}
+ *   data={tiles}
+ *   columns={4}
+ *   rowHeight={100}
+ *   gap={8}
+ *   collisionBehavior="push"
+ *   gravity="up"
+ *   isEditing={isEditing}
+ *   onLayoutChange={(layout) =>
+ *     setTiles(prev =>
+ *       prev.map(t => {
+ *         const updated = layout.find(l => l.id === t.id);
+ *         return updated ? { ...t, ...updated } : t;
+ *       })
+ *     )
+ *   }
+ *   renderTile={({ item, isActive, isSelected }) => (
+ *     <View style={{ flex: 1, opacity: isActive ? 0.5 : 1,
+ *       borderWidth: isSelected ? 2 : 0, borderColor: '#fff' }}>
+ *       <Text>{item.data.label}</Text>
+ *     </View>
+ *   )}
+ * />
+ * ```
+ *
+ * ---
+ *
+ * ### Selection (long press + release)
+ * Long-pressing a tile and releasing without moving selects it.
+ * Tapping any tile while a selection is active toggles that tile too.
+ *
+ * ```tsx
+ * // Multi-select (default) — accumulate selections
+ * <SmartGrid
+ *   multiSelect        // true by default, can omit
+ *   onSelectionChange={(ids) => console.log('selected:', ids)}
+ *   renderTile={({ item, isSelected }) => (
+ *     <View>
+ *       <Text>{item.data.label}</Text>
+ *       {isSelected && <Text>✕ Delete</Text>}
+ *     </View>
+ *   )}
+ * />
+ *
+ * // Single-select — picking a new tile deselects the previous one
+ * <SmartGrid
+ *   multiSelect={false}
+ *   onSelectionChange={([id]) => setActive(id ?? null)}
+ * />
+ *
+ * // Clear selection imperatively
+ * gridRef.current?.clearSelection();
+ *
+ * // Or set it programmatically
+ * gridRef.current?.setSelection(['tile-1', 'tile-3']);
+ * ```
+ *
+ * ---
+ *
+ * ### Grid-level draggable / selectable master switches
+ * These override all per-tile flags when set to `false`.
+ * ```tsx
+ * // View-only mode — nothing can be dragged or selected
+ * <SmartGrid draggable={false} selectable={false} data={tiles} ... />
+ *
+ * // Read-only layout — tiles are visible but locked in place
+ * <SmartGrid draggable={false} data={tiles} ... />
+ *
+ * // Selection disabled — long press does nothing (onTilePress still fires on tap)
+ * <SmartGrid selectable={false} data={tiles} ... />
+ * ```
+ *
+ * ### Per-tile draggable / selectable flags
+ * Fine-grained control per tile when the grid-level switches are on.
+ * ```tsx
+ * const tiles: Tile<MyData>[] = [
+ *   { id: '1', data: { label: 'Free' } },
+ *   // Stays pinned in place — cannot be dragged
+ *   { id: '2', data: { label: 'Pinned' }, draggable: false },
+ *   // Ignored by selection — tapping fires onTilePress instead
+ *   { id: '3', data: { label: 'Info' },   selectable: false },
+ * ];
+ * ```
+ */
+export declare const SmartGrid: <TData = unknown>(props: SmartGridProps<TData> & {
+    ref?: React.Ref<SmartGridRef>;
+}) => React.ReactElement | null;
+//# sourceMappingURL=SmartGrid.d.ts.map

package/lib/typescript/src/components/SmartGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/SmartGrid.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/context/GridDragContext.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import type { PlacedTile, TilePosition, TileSize, HapticEvent } from '../types.js';
+import type { PixelRect } from '../layout/LayoutCalculator.js';
+export type DragState = {
+    dragAbsX: SharedValue<number>;
+    dragAbsY: SharedValue<number>;
+    isDragging: SharedValue<boolean>;
+    activeTile: PlacedTile | null;
+    ghostPosition: TilePosition | null;
+    initialRect: PixelRect | null;
+    selectedTileIds: string[];
+    containerPageX: React.MutableRefObject<number>;
+    containerPageY: React.MutableRefObject<number>;
+    scrollYRef: React.MutableRefObject<number>;
+    startDrag: (tile: PlacedTile, rect: PixelRect) => void;
+    updateGhost: (pos: TilePosition) => void;
+    endDrag: (finalPosition: TilePosition | null) => void;
+    selectTile: (tile: PlacedTile) => void;
+    onTilePress: (tile: PlacedTile) => void;
+    isEditing: boolean;
+    /** Grid-level master switch — false disables drag on every tile. */
+    draggable: boolean;
+    /** Grid-level master switch — false disables selection on every tile. */
+    selectable: boolean;
+    commitResize: (tile: PlacedTile, newSize: TileSize) => void;
+};
+export declare function useGridDrag(): DragState;
+type Props = {
+    children: React.ReactNode;
+    isEditing: boolean;
+    draggable: boolean;
+    selectable: boolean;
+    multiSelect: boolean;
+    selectedTileIds: string[];
+    onDrop: (tile: PlacedTile, newPosition: TilePosition) => void;
+    onResize: (tile: PlacedTile, newSize: TileSize) => void;
+    onSelect: (ids: string[]) => void;
+    onTilePress?: (tile: PlacedTile) => void;
+    onHaptic?: (event: HapticEvent) => void;
+};
+export declare function GridDragProvider({ children, isEditing, draggable, selectable, multiSelect, selectedTileIds, onDrop, onResize, onSelect, onTilePress, onHaptic, }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=GridDragContext.d.ts.map

package/lib/typescript/src/context/GridDragContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridDragContext.d.ts","sourceRoot":"","sources":["../../../../src/context/GridDragContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAU,CAAC;AAChF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA4B,CAAC;AAE5D,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAEjC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,YAAY,GAAG,IAAI,CAAC;IACnC,WAAW,EAAE,SAAS,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,MAAM,EAAE,CAAC;IAE1B,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/C,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/C,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAE3C,SAAS,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACvD,WAAW,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,CAAC,aAAa,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,UAAU,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAExC,SAAS,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,SAAS,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC7D,CAAC;AAIF,wBAAgB,WAAW,IAAI,SAAS,CAIvC;AAED,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACX,eAAe,EACf,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,GACT,EAAE,KAAK,qBA0HP"}

package/lib/typescript/src/engine/GridEngine.d.ts

@@ -0,0 +1,35 @@
+import type { LayoutItem, TilePosition, TileSize } from '../types.js';
+export declare class GridEngine {
+    private matrix;
+    private columns;
+    constructor(columns: number, initialRows?: number);
+    private static createMatrix;
+    get rowCount(): number;
+    get columnCount(): number;
+    isOccupied(pos: TilePosition, size: TileSize, ignoreId?: string): boolean;
+    isInBounds(pos: TilePosition, size: TileSize): boolean;
+    placeAt(id: string, pos: TilePosition, size: TileSize): void;
+    removeFrom(pos: TilePosition, size: TileSize): void;
+    removeById(id: string): void;
+    /**
+     * Scan top-left to bottom-right for the first position where `size` fits.
+     * Returns null if the grid (up to maxRows) is full.
+     */
+    findFirstFit(size: TileSize, maxRows?: number): TilePosition | null;
+    /**
+     * Returns ids of all tiles that overlap the given region, excluding ignoreId.
+     */
+    getCollisions(pos: TilePosition, size: TileSize, ignoreId?: string): Set<string>;
+    /**
+     * Rebuild the entire matrix from a layout snapshot.
+     * Call this when restoring a saved layout.
+     */
+    loadLayout(items: LayoutItem[]): void;
+    /**
+     * Dump the positions of all occupied cells grouped by tile id.
+     * Useful for debugging — not the same as a layout snapshot.
+     */
+    debugDump(): Record<string, TilePosition[]>;
+    private growIfNeeded;
+}
+//# sourceMappingURL=GridEngine.d.ts.map

package/lib/typescript/src/engine/GridEngine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridEngine.d.ts","sourceRoot":"","sources":["../../../../src/engine/GridEngine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAU,CAAC;AAMnE,qBAAa,UAAU;IACrB,OAAO,CAAC,MAAM,CAAW;IACzB,OAAO,CAAC,OAAO,CAAS;gBAEZ,OAAO,EAAE,MAAM,EAAE,WAAW,SAAK;IAK7C,OAAO,CAAC,MAAM,CAAC,YAAY;IAM3B,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAID,UAAU,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO;IAYzE,UAAU,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IAItD,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI;IAS5D,UAAU,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI;IASnD,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAY5B;;;OAGG;IACH,YAAY,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,SAA8B,GAAG,YAAY,GAAG,IAAI;IAWxF;;OAEG;IACH,aAAa,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC;IAehF;;;OAGG;IACH,UAAU,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,IAAI;IAQrC;;;OAGG;IACH,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC;IAgB3C,OAAO,CAAC,YAAY;CAKrB"}

package/lib/typescript/src/engine/autoArrange.d.ts

@@ -0,0 +1,4 @@
+import type { PlacedTile, Gravity } from '../types.js';
+export declare function autoArrange<TData>(tiles: PlacedTile<TData>[], columns: number): PlacedTile<TData>[];
+export declare function applyGravity<TData>(tiles: PlacedTile<TData>[], columns: number, gravity: Gravity): PlacedTile<TData>[];
+//# sourceMappingURL=autoArrange.d.ts.map

package/lib/typescript/src/engine/autoArrange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autoArrange.d.ts","sourceRoot":"","sources":["../../../../src/engine/autoArrange.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAgB,OAAO,EAAE,MAAM,aAAU,CAAC;AAElE,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAenG;AAED,wBAAgB,YAAY,CAAC,KAAK,EAChC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,EAC1B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,OAAO,GACf,UAAU,CAAC,KAAK,CAAC,EAAE,CAmBrB"}

package/lib/typescript/src/engine/collisions.d.ts

@@ -0,0 +1,3 @@
+import type { PlacedTile, TilePosition, CollisionBehavior } from '../types.js';
+export declare function resolveCollisions<TData>(tiles: PlacedTile<TData>[], draggedId: string, targetPosition: TilePosition, behavior: CollisionBehavior, columns: number): PlacedTile<TData>[];
+//# sourceMappingURL=collisions.d.ts.map

package/lib/typescript/src/engine/collisions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collisions.d.ts","sourceRoot":"","sources":["../../../../src/engine/collisions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAU,CAAC;AAE5E,wBAAgB,iBAAiB,CAAC,KAAK,EACrC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,EAC1B,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,YAAY,EAC5B,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,MAAM,GACd,UAAU,CAAC,KAAK,CAAC,EAAE,CAGrB"}

package/lib/typescript/src/hooks/useTileGesture.d.ts

@@ -0,0 +1,13 @@
+import type { PlacedTile, GridConfig } from '../types.js';
+import type { PixelRect } from '../layout/LayoutCalculator.js';
+type Options = {
+    tile: PlacedTile;
+    rect: PixelRect;
+    config: GridConfig;
+    containerWidth: number;
+};
+export declare function useTileGesture({ tile, rect, config, containerWidth }: Options): {
+    gesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/gestureComposition").SimultaneousGesture;
+};
+export {};
+//# sourceMappingURL=useTileGesture.d.ts.map

package/lib/typescript/src/hooks/useTileGesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTileGesture.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTileGesture.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAU,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA4B,CAAC;AAI5D,KAAK,OAAO,GAAG;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,UAAU,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,OAAO;;EAyE7E"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,10 @@
+export type { Tile, PlacedTile, TileSize, TilePosition, GridConfig, CollisionBehavior, Gravity, HapticEvent, LayoutItem, SerializedLayout, } from './types.js';
+export { GridEngine } from './engine/GridEngine.js';
+export { resolveCollisions } from './engine/collisions.js';
+export { autoArrange, applyGravity } from './engine/autoArrange.js';
+export type { PixelRect } from './layout/LayoutCalculator.js';
+export { columnWidth, tileToPixelRect, gridTotalHeight, isInViewport, } from './layout/LayoutCalculator.js';
+export { pixelToGrid } from './utils/pixelToGrid.js';
+export type { SmartGridRef, RenderTileInfo, SmartGridProps } from './components/SmartGrid.js';
+export { SmartGrid } from './components/SmartGrid.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,YAAY,EACV,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,OAAO,EACP,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,MAAM,YAAS,CAAC;AAEjB,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAqB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAqB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAsB,CAAC;AAEjE,YAAY,EAAE,SAAS,EAAE,MAAM,8BAA2B,CAAC;AAC3D,OAAO,EACL,WAAW,EACX,eAAe,EACf,eAAe,EACf,YAAY,GACb,MAAM,8BAA2B,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAqB,CAAC;AAElD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,2BAAwB,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,2BAAwB,CAAC"}

package/lib/typescript/src/layout/LayoutCalculator.d.ts

@@ -0,0 +1,15 @@
+import type { TilePosition, TileSize, GridConfig } from '../types.js';
+export type PixelRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function columnWidth(config: GridConfig, containerWidth: number): number;
+export declare function tileToPixelRect(position: TilePosition, size: TileSize, config: GridConfig, containerWidth: number): PixelRect;
+export declare function gridTotalHeight(tiles: Array<{
+    position: TilePosition;
+    size: TileSize;
+}>, config: GridConfig): number;
+export declare function isInViewport(rect: PixelRect, scrollY: number, viewportHeight: number, overscan?: number): boolean;
+//# sourceMappingURL=LayoutCalculator.d.ts.map

package/lib/typescript/src/layout/LayoutCalculator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutCalculator.d.ts","sourceRoot":"","sources":["../../../../src/layout/LayoutCalculator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,aAAU,CAAC;AAEnE,MAAM,MAAM,SAAS,GAAG;IACtB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,WAAW,CAAC,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,GAAG,MAAM,CAG9E;AAED,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,UAAU,EAClB,cAAc,EAAE,MAAM,GACrB,SAAS,CASX;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,KAAK,CAAC;IAAE,QAAQ,EAAE,YAAY,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC,EACxD,MAAM,EAAE,UAAU,GACjB,MAAM,CAIR;AAED,wBAAgB,YAAY,CAC1B,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,MAAM,EACtB,QAAQ,SAAM,GACb,OAAO,CAKT"}

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,105 @@
+/** Width and height of a tile in grid units. */
+export type TileSize = {
+    /** Number of grid columns spanned. */
+    w: number;
+    /** Number of grid rows spanned. */
+    h: number;
+};
+/** Column/row position of a tile's top-left corner (0-based). */
+export type TilePosition = {
+    /** Column index (0-based). */
+    x: number;
+    /** Row index (0-based). */
+    y: number;
+};
+/**
+ * A single tile in the grid.
+ *
+ * `position` and `size` are both optional:
+ * - Both provided → tile is placed exactly where specified (use when restoring a saved layout).
+ * - `size` only   → tile is auto-placed via bin-packing.
+ * - Neither       → tile defaults to 1×1 and is auto-placed in order.
+ *
+ * @example
+ * ```ts
+ * // Explicit position + size (restored from storage)
+ * { id: '1', position: { x: 0, y: 0 }, size: { w: 2, h: 2 }, data: { label: 'Music' } }
+ *
+ * // Size only — grid chooses placement
+ * { id: '2', size: { w: 2, h: 1 }, data: { label: 'Photos' } }
+ *
+ * // No position, no size — defaults to 1×1, auto-placed in order
+ * { id: '3', data: { label: 'Notes' } }
+ *
+ * // Pinned tile — cannot be dragged
+ * { id: '4', data: { label: 'Header' }, draggable: false }
+ *
+ * // Non-selectable tile — long press fires onTilePress instead of entering selection
+ * { id: '5', data: { label: 'Info' }, selectable: false }
+ * ```
+ */
+export type Tile<TData = unknown> = {
+    /** Unique identifier. Must be stable across re-renders. */
+    id: string;
+    /** Tile dimensions in grid units. Omit to default to 1×1. */
+    size?: TileSize;
+    /** Top-left position in the grid. Omit to let the grid auto-place. */
+    position?: TilePosition;
+    /** Your custom data — passed back to `renderTile` as `item.data`. */
+    data: TData;
+    /** When `true`, prevents both dragging and resizing. @default false */
+    locked?: boolean;
+    /** Smallest size the tile can be resized to. Only enforced when `isEditing` is true. */
+    minSize?: TileSize;
+    /** Largest size the tile can be resized to. Only enforced when `isEditing` is true. */
+    maxSize?: TileSize;
+    /** When `false`, the tile ignores the drag gesture and stays in place. @default true */
+    draggable?: boolean;
+    /** When `false`, long-pressing this tile fires `onTilePress` instead of entering selection. @default true */
+    selectable?: boolean;
+};
+/** A `Tile` with `position` and `size` guaranteed to be present. Used internally after auto-placement. */
+export type PlacedTile<TData = unknown> = Tile<TData> & {
+    position: TilePosition;
+    size: TileSize;
+};
+/** Internal grid configuration passed through context. */
+export type GridConfig = {
+    columns: number;
+    rowHeight: number;
+    gap: number;
+    padding: number;
+};
+/**
+ * How a dragged tile interacts with tiles it overlaps on drop.
+ * - `'push'` — displaced tiles are moved to the next available slot.
+ * - `'swap'` — the dragged tile and the tile at the drop center exchange positions.
+ */
+export type CollisionBehavior = 'push' | 'swap';
+/**
+ * Interaction moments passed to `onHaptic` so you can trigger device feedback.
+ * - `'pick-up'` — tile long-press activated (drag started or tile selected).
+ * - `'snap'`    — ghost tile snapped to a new grid position mid-drag.
+ * - `'drop'`    — tile released.
+ * - `'resize'`  — tile resize committed.
+ */
+export type HapticEvent = 'pick-up' | 'snap' | 'drop' | 'resize';
+/**
+ * Direction tiles compact toward after every drop.
+ * - `'none'`  — tiles stay exactly where dropped.
+ * - `'up'`    — tiles slide upward to fill empty rows.
+ * - `'left'`  — tiles slide left to fill empty columns.
+ */
+export type Gravity = 'none' | 'up' | 'left';
+/** Position and size of a single tile — the serializable unit returned by `serializeLayout`. */
+export type LayoutItem = {
+    /** Tile id — matches the `id` on the original `Tile`. */
+    id: string;
+    /** Current top-left grid position. */
+    position: TilePosition;
+    /** Current size in grid units. */
+    size: TileSize;
+};
+/** Array of `LayoutItem` — the format used by `serializeLayout` and `restoreLayout`. */
+export type SerializedLayout = LayoutItem[];
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,MAAM,MAAM,QAAQ,GAAG;IACrB,sCAAsC;IACtC,CAAC,EAAE,MAAM,CAAC;IACV,mCAAmC;IACnC,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,iEAAiE;AACjE,MAAM,MAAM,YAAY,GAAG;IACzB,8BAA8B;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,2BAA2B;IAC3B,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,MAAM,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI;IAClC,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,6DAA6D;IAC7D,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,qEAAqE;IACrE,IAAI,EAAE,KAAK,CAAC;IACZ,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wFAAwF;IACxF,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,uFAAuF;IACvF,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6GAA6G;IAC7G,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,0GAA0G;AAC1G,MAAM,MAAM,UAAU,CAAC,KAAK,GAAG,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG;IACtD,QAAQ,EAAE,YAAY,CAAC;IACvB,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7C,gGAAgG;AAChG,MAAM,MAAM,UAAU,GAAG;IACvB,yDAAyD;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,QAAQ,EAAE,YAAY,CAAC;IACvB,kCAAkC;IAClC,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,wFAAwF;AACxF,MAAM,MAAM,gBAAgB,GAAG,UAAU,EAAE,CAAC"}

package/lib/typescript/src/utils/pixelToGrid.d.ts

@@ -0,0 +1,9 @@
+import type { GridConfig, TilePosition, TileSize } from '../types.js';
+/**
+ * Convert an absolute screen position (from gesture handler) to a grid cell,
+ * accounting for the container's page offset and the current scroll position.
+ *
+ * The returned position is clamped so the tile stays within grid bounds.
+ */
+export declare function pixelToGrid(absX: number, absY: number, containerPageX: number, containerPageY: number, scrollY: number, config: GridConfig, size: TileSize, containerWidth: number): TilePosition;
+//# sourceMappingURL=pixelToGrid.d.ts.map

package/lib/typescript/src/utils/pixelToGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixelToGrid.d.ts","sourceRoot":"","sources":["../../../../src/utils/pixelToGrid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAU,CAAC;AAGnE;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,cAAc,EAAE,MAAM,EACtB,cAAc,EAAE,MAAM,EACtB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,QAAQ,EACd,cAAc,EAAE,MAAM,GACrB,YAAY,CAYd"}