@griddle/core 0.1.0

package/dist/grid.d.ts

@@ -0,0 +1,100 @@
+import type { CellPos, CellRect, Footprint, GridChangeEvent, GridConfig, GridSnapshot, Tile } from './types.js';
+import { Emitter } from './events.js';
+export declare class Grid {
+    config: GridConfig;
+    private tilesById;
+    readonly changes: Emitter<GridChangeEvent>;
+    constructor(config: GridConfig, initialTiles?: Tile[]);
+    updateConfig(patch: Partial<GridConfig>): void;
+    get tiles(): Tile[];
+    getTile(id: string): Tile | undefined;
+    /**
+     * All tiles whose grid rect overlaps `rect`. Out-of-flow tiles
+     * (`position: 'absolute' | 'fixed'`) are skipped — they don't participate
+     * in collision/displacement queries even if their stored col/row happens
+     * to overlap.
+     */
+    tilesIn(rect: CellRect, exclude?: ReadonlySet<string>): Tile[];
+    rectInBounds(rect: CellRect): boolean;
+    addTile(tile: Tile): void;
+    /**
+     * Add a tile, displacing any overlapping tiles using the same push logic as
+     * `resizeTile`. Returns false (and leaves the grid unchanged) if the rect is
+     * out of bounds or any victim cannot be placed.
+     */
+    addTileWithDisplacement(tile: Tile): boolean;
+    removeTile(id: string): void;
+    /**
+     * Re-pack after a structural change (resize/add/remove) while looping,
+     * when opted in via `loop.repack: 'structural'`. Plain moves never repack.
+     */
+    private _structuralRepack;
+    _setTilePos(id: string, pos: CellPos): void;
+    _setTileRect(id: string, rect: CellRect): void;
+    /**
+     * Move an in-flow tile to `target`, running the rules engine (displacement,
+     * cascade push, BFS repack). For out-of-flow tiles (`absolute`/`fixed`) this
+     * is a no-op — use `setTilePinned` instead.
+     */
+    moveTile(id: string, target: CellPos): boolean;
+    /**
+     * Move a group of in-flow tiles by a uniform cell delta, preserving their
+     * relative positions. Non-group tiles that overlap after the shift are
+     * displaced using the single-tile rules engine. Returns true if the entire
+     * group landed successfully; on failure, the grid is left unchanged.
+     */
+    moveGroup(ids: string[], delta: {
+        dcol: number;
+        drow: number;
+    }): boolean;
+    /** Bounding rect of a group of tiles at their target positions. */
+    private _groupBounds;
+    /**
+     * Update `tile.pinned` for an `absolute` or `fixed` tile. Returns false if
+     * the tile is missing or is in flow (use `moveTile` for those). Does NOT
+     * trigger the rules engine — pinned coords are independent of grid layout.
+     */
+    setTilePinned(id: string, pinned: {
+        x: number;
+        y: number;
+    }): boolean;
+    /**
+     * Change a tile's CSS-like positioning mode. When transitioning into
+     * `absolute`/`fixed` you can pass a `pinned` start position; switching back
+     * to `static`/`relative`/`sticky` keeps the tile's existing col/row so it
+     * snaps back into the grid where it logically belongs.
+     */
+    setTilePosition(id: string, position: NonNullable<Tile['position']>, opts?: {
+        pinned?: {
+            x: number;
+            y: number;
+        };
+        offset?: {
+            x: number;
+            y: number;
+        };
+        sticky?: NonNullable<Tile['sticky']>;
+    }): boolean;
+    resizeTile(id: string, size: Footprint): boolean;
+    snapshotTiles(): Map<string, Tile>;
+    restoreTiles(snap: Map<string, Tile>): void;
+    compactAll(): void;
+    /**
+     * Repack all in-flow tiles into a dense block (no holes when a hole-free
+     * tiling exists — exact bounded search, then a gap-minimizing greedy
+     * fallback; see packing.ts). A layout that is already perfectly dense is
+     * left exactly as the user arranged it (translated to the origin if
+     * offset). Out-of-flow tiles are untouched. Returns true if any tile moved.
+     */
+    pack(): boolean;
+    toJSON(): GridSnapshot;
+    /**
+     * Replace this grid's config and tiles with a snapshot, in bulk. Unlike
+     * add/remove/resize this has no side effects (no gravity compaction, no
+     * structural repack, no pack-on-toggle) — the stored layout is restored
+     * verbatim. Emits a single 'load' event.
+     */
+    loadJSON(snap: GridSnapshot): void;
+    static fromJSON(snap: GridSnapshot): Grid;
+}
+//# sourceMappingURL=grid.d.ts.map

package/dist/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,OAAO,EACP,QAAQ,EACR,SAAS,EACT,eAAe,EACf,UAAU,EACV,YAAY,EACZ,IAAI,EACL,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAuDtC,qBAAa,IAAI;IACf,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,SAAS,CAA2B;IAC5C,QAAQ,CAAC,OAAO,2BAAkC;gBAEtC,MAAM,EAAE,UAAU,EAAE,YAAY,GAAE,IAAI,EAAO;IAWzD,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI;IAa9C,IAAI,KAAK,IAAI,IAAI,EAAE,CAElB;IAED,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS;IAIrC;;;;;OAKG;IACH,OAAO,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,GAAE,WAAW,CAAC,MAAM,CAAa,GAAG,IAAI,EAAE;IAUzE,YAAY,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO;IAiBrC,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAYzB;;;;OAIG;IACH,uBAAuB,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO;IAoD5C,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAU5B;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAMzB,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,GAAG,IAAI;IAO3C,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI;IAS9C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,OAAO;IAe9C;;;;;OAKG;IACH,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO;IAyExE,mEAAmE;IACnE,OAAO,CAAC,YAAY;IAYpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO;IASpE;;;;;OAKG;IACH,eAAe,CACb,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EACvC,IAAI,GAAE;QACJ,MAAM,CAAC,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAClC,MAAM,CAAC,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAClC,MAAM,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;KACjC,GACL,OAAO;IAWV,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,OAAO;IAuEhD,aAAa,IAAI,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC;IAMlC,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,IAAI;IAO3C,UAAU,IAAI,IAAI;IAOlB;;;;;;OAMG;IACH,IAAI,IAAI,OAAO;IAoDf,MAAM,IAAI,YAAY;IAQtB;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI;IAYlC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI;CAQ1C"}

package/dist/grid.js

@@ -0,0 +1,539 @@
+// Grid: the central state holder. Holds config + tiles and exposes a mutation API.
+// All geometry/movement/compaction logic lives in sibling modules; Grid just orchestrates.
+import { Emitter } from './events.js';
+import { directionStep, priorityDirections, rectsOverlap, tileRect, } from './geometry.js';
+import { moveTile as moveEngine } from './movement.js';
+import { compact as compactEngine } from './compaction.js';
+import { isInFlow } from './positioning.js';
+import { assertLoopable, loopEnabled } from './loop.js';
+import { computePack } from './packing.js';
+function defaultConfig(c) {
+    return {
+        infiniteX: c.infiniteX ?? c.cols === Infinity,
+        infiniteY: c.infiniteY ?? c.rows === Infinity,
+        gap: c.gap ?? 0,
+        gravity: c.gravity ?? 'none',
+        resizeHandles: c.resizeHandles ?? ['se'],
+        snapDuringDrag: c.snapDuringDrag ?? true,
+        maxRepackHops: c.maxRepackHops ?? 64,
+        ...c,
+    };
+}
+function findNearestFreeCell(grid, victim, avoid, selfId) {
+    const visited = new Set();
+    const queue = [{ col: victim.col, row: victim.row }];
+    let iters = 0;
+    while (queue.length > 0 && iters++ < 512) {
+        const p = queue.shift();
+        const key = `${p.col},${p.row}`;
+        if (visited.has(key))
+            continue;
+        visited.add(key);
+        const rect = { col: p.col, row: p.row, w: victim.w, h: victim.h };
+        if (grid.rectInBounds(rect)) {
+            const hits = grid.tilesIn(rect, new Set([victim.id, selfId]));
+            if (hits.length === 0 && !rectsOverlap(rect, avoid)) {
+                return p;
+            }
+        }
+        queue.push({ col: p.col + 1, row: p.row });
+        queue.push({ col: p.col - 1, row: p.row });
+        queue.push({ col: p.col, row: p.row + 1 });
+        queue.push({ col: p.col, row: p.row - 1 });
+    }
+    return null;
+}
+export class Grid {
+    constructor(config, initialTiles = []) {
+        this.tilesById = new Map();
+        this.changes = new Emitter();
+        this.config = defaultConfig(config);
+        assertLoopable(this.config);
+        for (const t of initialTiles)
+            this.tilesById.set(t.id, { ...t });
+        // Note: no auto-pack here even when loop starts enabled — packing fires
+        // only on the loop off->on toggle (see updateConfig). Constructing or
+        // loading a snapshot respects the stored layout as-is.
+    }
+    // ---- config -------------------------------------------------------------
+    updateConfig(patch) {
+        const wasLooping = loopEnabled(this.config);
+        const next = defaultConfig({ ...this.config, ...patch });
+        assertLoopable(next);
+        this.config = next;
+        this.changes.emit({ type: 'config', tileIds: [] });
+        // Loop repeats the content's bounding box; holes inside it would repeat
+        // too, so entering loop mode compacts the layout into a dense block.
+        if (!wasLooping && loopEnabled(next))
+            this.pack();
+    }
+    // ---- tile queries -------------------------------------------------------
+    get tiles() {
+        return Array.from(this.tilesById.values());
+    }
+    getTile(id) {
+        return this.tilesById.get(id);
+    }
+    /**
+     * All tiles whose grid rect overlaps `rect`. Out-of-flow tiles
+     * (`position: 'absolute' | 'fixed'`) are skipped — they don't participate
+     * in collision/displacement queries even if their stored col/row happens
+     * to overlap.
+     */
+    tilesIn(rect, exclude = new Set()) {
+        const out = [];
+        for (const t of this.tilesById.values()) {
+            if (exclude.has(t.id))
+                continue;
+            if (!isInFlow(t))
+                continue;
+            if (rectsOverlap(rect, tileRect(t)))
+                out.push(t);
+        }
+        return out;
+    }
+    rectInBounds(rect) {
+        const { cols, rows, infiniteX, infiniteY } = this.config;
+        if (!infiniteX) {
+            if (rect.col < 0 || rect.col + rect.w > cols)
+                return false;
+        }
+        else {
+            if (rect.col < 0)
+                return false;
+        }
+        if (!infiniteY) {
+            if (rect.row < 0 || rect.row + rect.h > rows)
+                return false;
+        }
+        else {
+            if (rect.row < 0)
+                return false;
+        }
+        return true;
+    }
+    // ---- mutations ---------------------------------------------------------
+    addTile(tile) {
+        if (this.tilesById.has(tile.id)) {
+            throw new Error(`Griddle: duplicate tile id "${tile.id}"`);
+        }
+        this.tilesById.set(tile.id, { ...tile });
+        this.changes.emit({ type: 'add', tileIds: [tile.id] });
+        if (this.config.gravity && this.config.gravity !== 'none') {
+            this.compactAll();
+        }
+        this._structuralRepack();
+    }
+    /**
+     * Add a tile, displacing any overlapping tiles using the same push logic as
+     * `resizeTile`. Returns false (and leaves the grid unchanged) if the rect is
+     * out of bounds or any victim cannot be placed.
+     */
+    addTileWithDisplacement(tile) {
+        if (this.tilesById.has(tile.id)) {
+            throw new Error(`Griddle: duplicate tile id "${tile.id}"`);
+        }
+        const newRect = { col: tile.col, row: tile.row, w: tile.w, h: tile.h };
+        if (!this.rectInBounds(newRect))
+            return false;
+        const snapshot = this.snapshotTiles();
+        this.tilesById.set(tile.id, { ...tile });
+        const overlapping = this.tilesIn(newRect, new Set([tile.id]));
+        for (const victim of overlapping) {
+            const pDirs = priorityDirections(newRect, tileRect(victim));
+            const steps = pDirs.map(directionStep);
+            let placed = false;
+            for (const step of steps) {
+                if (step.dx === 0 && step.dy === 0)
+                    continue;
+                let cursor = { col: victim.col, row: victim.row };
+                for (let k = 0; k < 128 && !placed; k++) {
+                    cursor = { col: cursor.col + step.dx, row: cursor.row + step.dy };
+                    const rect = { col: cursor.col, row: cursor.row, w: victim.w, h: victim.h };
+                    if (!this.rectInBounds(rect))
+                        break;
+                    const blocked = this.tilesIn(rect, new Set([victim.id, tile.id]));
+                    if (blocked.length === 0 && !rectsOverlap(rect, newRect)) {
+                        this._setTilePos(victim.id, cursor);
+                        placed = true;
+                    }
+                }
+                if (placed)
+                    break;
+            }
+            if (!placed) {
+                const fallback = findNearestFreeCell(this, victim, newRect, tile.id);
+                if (fallback) {
+                    this._setTilePos(victim.id, fallback);
+                    placed = true;
+                }
+            }
+            if (!placed) {
+                this.restoreTiles(snapshot);
+                return false;
+            }
+        }
+        this.changes.emit({ type: 'add', tileIds: [tile.id] });
+        if (this.config.gravity && this.config.gravity !== 'none')
+            this.compactAll();
+        this._structuralRepack();
+        return true;
+    }
+    removeTile(id) {
+        if (!this.tilesById.has(id))
+            return;
+        this.tilesById.delete(id);
+        this.changes.emit({ type: 'remove', tileIds: [id] });
+        if (this.config.gravity && this.config.gravity !== 'none') {
+            this.compactAll();
+        }
+        this._structuralRepack();
+    }
+    /**
+     * Re-pack after a structural change (resize/add/remove) while looping,
+     * when opted in via `loop.repack: 'structural'`. Plain moves never repack.
+     */
+    _structuralRepack() {
+        if (!loopEnabled(this.config))
+            return;
+        if ((this.config.loop?.repack ?? 'toggle') !== 'structural')
+            return;
+        this.pack();
+    }
+    _setTilePos(id, pos) {
+        const t = this.tilesById.get(id);
+        if (!t)
+            return;
+        t.col = pos.col;
+        t.row = pos.row;
+    }
+    _setTileRect(id, rect) {
+        const t = this.tilesById.get(id);
+        if (!t)
+            return;
+        t.col = rect.col;
+        t.row = rect.row;
+        t.w = rect.w;
+        t.h = rect.h;
+    }
+    /**
+     * Move an in-flow tile to `target`, running the rules engine (displacement,
+     * cascade push, BFS repack). For out-of-flow tiles (`absolute`/`fixed`) this
+     * is a no-op — use `setTilePinned` instead.
+     */
+    moveTile(id, target) {
+        const tile = this.tilesById.get(id);
+        if (!tile)
+            return false;
+        if (!isInFlow(tile))
+            return false;
+        if (tile.col === target.col && tile.row === target.row)
+            return true;
+        const ok = moveEngine(this, id, target);
+        if (ok) {
+            this.changes.emit({ type: 'move', tileIds: this.tiles.map((t) => t.id) });
+            if (this.config.gravity && this.config.gravity !== 'none') {
+                this.compactAll();
+            }
+        }
+        return ok;
+    }
+    /**
+     * Move a group of in-flow tiles by a uniform cell delta, preserving their
+     * relative positions. Non-group tiles that overlap after the shift are
+     * displaced using the single-tile rules engine. Returns true if the entire
+     * group landed successfully; on failure, the grid is left unchanged.
+     */
+    moveGroup(ids, delta) {
+        if (ids.length === 0)
+            return true;
+        if (delta.dcol === 0 && delta.drow === 0)
+            return true;
+        const groupSet = new Set(ids);
+        const groupTiles = [];
+        for (const id of ids) {
+            const tile = this.tilesById.get(id);
+            if (!tile || !isInFlow(tile))
+                return false;
+            groupTiles.push(tile);
+        }
+        // Compute target positions and validate bounds.
+        const targets = new Map();
+        for (const tile of groupTiles) {
+            const target = {
+                col: tile.col + delta.dcol,
+                row: tile.row + delta.drow,
+            };
+            const rect = { col: target.col, row: target.row, w: tile.w, h: tile.h };
+            if (!this.rectInBounds(rect))
+                return false;
+            targets.set(tile.id, target);
+        }
+        const snapshot = this.snapshotTiles();
+        // Place all group tiles at their new positions.
+        for (const [id, pos] of targets) {
+            this._setTilePos(id, pos);
+        }
+        // Collect non-group tiles that now overlap with any group member.
+        const victims = new Set();
+        for (const tile of groupTiles) {
+            const target = targets.get(tile.id);
+            const targetRect = { col: target.col, row: target.row, w: tile.w, h: tile.h };
+            for (const hit of this.tilesIn(targetRect, groupSet)) {
+                victims.add(hit.id);
+            }
+        }
+        // Try to displace each victim using the single-tile movement engine
+        // against the combined group bounding box as origin.
+        const groupBounds = this._groupBounds(groupTiles, targets);
+        for (const victimId of victims) {
+            const victim = this.tilesById.get(victimId);
+            if (!victim)
+                continue;
+            const victimTarget = findNearestFreeCell(this, victim, groupBounds, victimId);
+            if (!victimTarget) {
+                this.restoreTiles(snapshot);
+                return false;
+            }
+            this._setTilePos(victimId, victimTarget);
+        }
+        // Final validation: ensure no group tile overlaps another non-group tile.
+        for (const tile of groupTiles) {
+            const pos = targets.get(tile.id);
+            const rect = { col: pos.col, row: pos.row, w: tile.w, h: tile.h };
+            const hits = this.tilesIn(rect, groupSet);
+            if (hits.length > 0) {
+                this.restoreTiles(snapshot);
+                return false;
+            }
+        }
+        this.changes.emit({ type: 'move', tileIds: this.tiles.map((t) => t.id) });
+        if (this.config.gravity && this.config.gravity !== 'none') {
+            this.compactAll();
+        }
+        return true;
+    }
+    /** Bounding rect of a group of tiles at their target positions. */
+    _groupBounds(tiles, targets) {
+        let minCol = Infinity, minRow = Infinity, maxCol = -Infinity, maxRow = -Infinity;
+        for (const tile of tiles) {
+            const pos = targets.get(tile.id) ?? { col: tile.col, row: tile.row };
+            minCol = Math.min(minCol, pos.col);
+            minRow = Math.min(minRow, pos.row);
+            maxCol = Math.max(maxCol, pos.col + tile.w);
+            maxRow = Math.max(maxRow, pos.row + tile.h);
+        }
+        return { col: minCol, row: minRow, w: maxCol - minCol, h: maxRow - minRow };
+    }
+    /**
+     * Update `tile.pinned` for an `absolute` or `fixed` tile. Returns false if
+     * the tile is missing or is in flow (use `moveTile` for those). Does NOT
+     * trigger the rules engine — pinned coords are independent of grid layout.
+     */
+    setTilePinned(id, pinned) {
+        const tile = this.tilesById.get(id);
+        if (!tile)
+            return false;
+        if (isInFlow(tile))
+            return false;
+        tile.pinned = { x: pinned.x, y: pinned.y };
+        this.changes.emit({ type: 'move', tileIds: [id] });
+        return true;
+    }
+    /**
+     * Change a tile's CSS-like positioning mode. When transitioning into
+     * `absolute`/`fixed` you can pass a `pinned` start position; switching back
+     * to `static`/`relative`/`sticky` keeps the tile's existing col/row so it
+     * snaps back into the grid where it logically belongs.
+     */
+    setTilePosition(id, position, opts = {}) {
+        const tile = this.tilesById.get(id);
+        if (!tile)
+            return false;
+        tile.position = position;
+        if (opts.pinned !== undefined)
+            tile.pinned = { ...opts.pinned };
+        if (opts.offset !== undefined)
+            tile.offset = { ...opts.offset };
+        if (opts.sticky !== undefined)
+            tile.sticky = { ...opts.sticky };
+        this.changes.emit({ type: 'move', tileIds: [id] });
+        return true;
+    }
+    resizeTile(id, size) {
+        const tile = this.tilesById.get(id);
+        if (!tile)
+            return false;
+        const clamped = {
+            w: Math.max(tile.minW ?? 1, Math.min(tile.maxW ?? 1000000, Math.floor(size.w))),
+            h: Math.max(tile.minH ?? 1, Math.min(tile.maxH ?? 1000000, Math.floor(size.h))),
+        };
+        if (clamped.w === tile.w && clamped.h === tile.h)
+            return true;
+        const newRect = {
+            col: tile.col,
+            row: tile.row,
+            w: clamped.w,
+            h: clamped.h,
+        };
+        if (!this.rectInBounds(newRect))
+            return false;
+        const snapshot = this.snapshotTiles();
+        tile.w = clamped.w;
+        tile.h = clamped.h;
+        const overlapping = this.tilesIn(newRect, new Set([id]));
+        for (const victim of overlapping) {
+            const priorityDirs = priorityDirections(newRect, tileRect(victim));
+            const steps = priorityDirs.map(directionStep);
+            let placed = false;
+            // Walk each priority direction outward; the first legal placement wins.
+            for (const step of steps) {
+                if (step.dx === 0 && step.dy === 0)
+                    continue;
+                let cursor = { col: victim.col, row: victim.row };
+                for (let k = 0; k < 128 && !placed; k++) {
+                    cursor = { col: cursor.col + step.dx, row: cursor.row + step.dy };
+                    const rect = {
+                        col: cursor.col,
+                        row: cursor.row,
+                        w: victim.w,
+                        h: victim.h,
+                    };
+                    if (!this.rectInBounds(rect))
+                        break;
+                    const blocked = this.tilesIn(rect, new Set([victim.id, id]));
+                    if (blocked.length === 0 && !rectsOverlap(rect, newRect)) {
+                        this._setTilePos(victim.id, cursor);
+                        placed = true;
+                    }
+                }
+                if (placed)
+                    break;
+            }
+            if (!placed) {
+                const fallback = findNearestFreeCell(this, victim, newRect, id);
+                if (fallback) {
+                    this._setTilePos(victim.id, fallback);
+                    placed = true;
+                }
+            }
+            if (!placed) {
+                this.restoreTiles(snapshot);
+                return false;
+            }
+        }
+        this.changes.emit({ type: 'resize', tileIds: [id] });
+        if (this.config.gravity && this.config.gravity !== 'none')
+            this.compactAll();
+        this._structuralRepack();
+        return true;
+    }
+    // ---- snapshots ---------------------------------------------------------
+    snapshotTiles() {
+        const m = new Map();
+        for (const [id, t] of this.tilesById)
+            m.set(id, { ...t });
+        return m;
+    }
+    restoreTiles(snap) {
+        this.tilesById.clear();
+        for (const [id, t] of snap)
+            this.tilesById.set(id, { ...t });
+    }
+    // ---- compaction --------------------------------------------------------
+    compactAll() {
+        const moved = compactEngine(this);
+        if (moved.length > 0) {
+            this.changes.emit({ type: 'compact', tileIds: moved });
+        }
+    }
+    /**
+     * Repack all in-flow tiles into a dense block (no holes when a hole-free
+     * tiling exists — exact bounded search, then a gap-minimizing greedy
+     * fallback; see packing.ts). A layout that is already perfectly dense is
+     * left exactly as the user arranged it (translated to the origin if
+     * offset). Out-of-flow tiles are untouched. Returns true if any tile moved.
+     */
+    pack() {
+        const flow = this.tiles.filter(isInFlow);
+        if (flow.length === 0)
+            return false;
+        const cols = Number.isFinite(this.config.cols) ? this.config.cols : 0;
+        if (cols <= 0)
+            return false;
+        // Already dense: keep the user's arrangement, just anchor it at (0,0).
+        let minCol = Infinity, minRow = Infinity, maxCol = -Infinity, maxRow = -Infinity;
+        let area = 0;
+        for (const t of flow) {
+            minCol = Math.min(minCol, t.col);
+            minRow = Math.min(minRow, t.row);
+            maxCol = Math.max(maxCol, t.col + t.w);
+            maxRow = Math.max(maxRow, t.row + t.h);
+            area += t.w * t.h;
+        }
+        if ((maxCol - minCol) * (maxRow - minRow) === area) {
+            if (minCol === 0 && minRow === 0)
+                return false;
+            const moved = [];
+            for (const t of flow) {
+                this._setTilePos(t.id, { col: t.col - minCol, row: t.row - minRow });
+                moved.push(t.id);
+            }
+            this.changes.emit({ type: 'compact', tileIds: moved });
+            return true;
+        }
+        const result = computePack(flow.map((t) => ({ id: t.id, w: Math.min(t.w, cols), h: t.h })), cols);
+        if (!result)
+            return false;
+        const moved = [];
+        for (const t of flow) {
+            const p = result.placements.get(t.id);
+            if (!p)
+                continue;
+            const w = Math.min(t.w, cols);
+            if (p.col !== t.col || p.row !== t.row || w !== t.w) {
+                this._setTileRect(t.id, { col: p.col, row: p.row, w, h: t.h });
+                moved.push(t.id);
+            }
+        }
+        if (moved.length > 0) {
+            this.changes.emit({ type: 'compact', tileIds: moved });
+        }
+        return moved.length > 0;
+    }
+    // ---- serialization ----------------------------------------------------
+    toJSON() {
+        return {
+            version: 1,
+            config: { ...this.config },
+            tiles: this.tiles.map((t) => ({ ...t })),
+        };
+    }
+    /**
+     * Replace this grid's config and tiles with a snapshot, in bulk. Unlike
+     * add/remove/resize this has no side effects (no gravity compaction, no
+     * structural repack, no pack-on-toggle) — the stored layout is restored
+     * verbatim. Emits a single 'load' event.
+     */
+    loadJSON(snap) {
+        if (snap.version !== 1) {
+            throw new Error(`Griddle: unsupported snapshot version ${snap.version}`);
+        }
+        const next = defaultConfig(snap.config);
+        assertLoopable(next);
+        this.config = next;
+        this.tilesById.clear();
+        for (const t of snap.tiles)
+            this.tilesById.set(t.id, { ...t });
+        this.changes.emit({ type: 'load', tileIds: this.tiles.map((t) => t.id) });
+    }
+    static fromJSON(snap) {
+        if (snap.version !== 1) {
+            throw new Error(`Griddle: unsupported snapshot version ${snap.version}`);
+        }
+        const g = new Grid(snap.config, snap.tiles);
+        g.changes.emit({ type: 'load', tileIds: g.tiles.map((t) => t.id) });
+        return g;
+    }
+}
+//# sourceMappingURL=grid.js.map