@griddle/svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Trustybits
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,69 @@
+# @griddle/svelte
+
+Svelte bindings for [Griddle](https://github.com/Trustybits/griddle) — a headless,
+zero-dependency grid/canvas engine. Provides a `<GriddleGrid />` component and a
+`createGriddle()` store factory that wrap [`@griddle/core`](https://www.npmjs.com/package/@griddle/core)
+with virtualized rendering, drag/resize handles, and animations.
+
+Works with **Svelte 4 and Svelte 5** (the components are written in the portable
+Svelte 4 style that Svelte 5 runs in legacy mode).
+
+## Install
+
+```sh
+npm install @griddle/svelte @griddle/core
+```
+
+`@griddle/core` and `svelte` are **peer dependencies**. On npm 7+ the peers are
+installed automatically; with Yarn or pnpm, add `@griddle/core` yourself (as
+shown above). `svelte` (^4 or ^5) is expected to already be in your app.
+
+## Usage
+
+```svelte
+<script>
+  import { GriddleGrid, createGriddle } from '@griddle/svelte';
+
+  const api = createGriddle({
+    config: { cols: 12, rows: 12, unitWidth: 75, unitHeight: 75 },
+    tiles: [
+      { id: '1', col: 0, row: 0, w: 2, h: 2 },
+      { id: '2', col: 2, row: 0, w: 1, h: 1 },
+    ],
+  });
+</script>
+
+<GriddleGrid {api}>
+  <div slot="tile" let:tile>#{tile.id}</div>
+</GriddleGrid>
+```
+
+## Loop mode (infinite gallery)
+
+Enable `loop` in the config and the content repeats endlessly with drag-to-pan
+physics — no scrollbars:
+
+```js
+const api = createGriddle({
+  config: {
+    cols: 12, rows: 12, unitWidth: 120, unitHeight: 120,
+    loop: { enabled: true, interaction: 'pan' }, // 'pan' = viewer, 'edit' = ghost edit
+  },
+  tiles,
+});
+```
+
+`<GriddleGrid>` automatically switches to the loop renderer when
+`config.loop.enabled` is `true`, so most apps never touch the loop component
+directly. For advanced cases where you want to render the loop plane explicitly,
+`GriddleLoopGrid` is also exported and takes the same props as `GriddleGrid`:
+
+```js
+import { GriddleLoopGrid } from '@griddle/svelte';
+```
+
+See the [main repository](https://github.com/Trustybits/griddle) for full docs.
+
+## License
+
+MIT © Trustybits

package/dist/GriddleGrid.svelte

@@ -0,0 +1,485 @@
+<script>import { onMount, onDestroy, tick, createEventDispatcher } from 'svelte';
+import { visibleRange, visibleTiles, gridContentSize, DragController, computeTileLayout, resolveStickyStacking, isOutOfFlow, pixelsToPin, } from '@griddle/core';
+import LoopGrid from './LoopGrid.svelte';
+export let api;
+export let height = '100%';
+export let showGrid = true;
+const dispatch = createEventDispatcher();
+const DEFAULT_DRAG_IGNORE = 'a, button, input, textarea, select, [contenteditable]';
+let scrollEl;
+let viewport = { scrollX: 0, scrollY: 0, width: 1000, height: 800 };
+const cfgStore = api.config;
+const tilesStore = api.tiles;
+const versionStore = api.version;
+$: cfg = $cfgStore;
+$: tilesAll = $tilesStore;
+$: ver = $versionStore;
+// Loop mode delegates rendering to LoopGrid.
+$: loopOn = cfg.loop?.enabled === true;
+$: colSize = cfg.unitWidth + (cfg.gap ?? 0);
+$: rowSize = cfg.unitHeight + (cfg.gap ?? 0);
+$: halfGap = (cfg.gap ?? 0) / 2;
+$: range = visibleRange(cfg, viewport, 4);
+$: rendered = visibleTiles(tilesAll, range);
+$: contentSize = gridContentSize(cfg, tilesAll);
+// ---- drag / resize state ---------------------------------------------
+// Drag uses the live-preview state machine in core: as the cursor crosses
+// cell boundaries we rewind any prior preview and re-attempt the move
+// against a snapshot taken at pickup. The dragged tile follows the cursor
+// freely (unsnapped) for the duration of the gesture; a separate drop-
+// indicator div renders at the snapped candidate cell.
+const dragController = new DragController(api.grid);
+let drag = null;
+let dragStartPointerX = 0;
+let dragStartPointerY = 0;
+let pinDrag = null;
+let resize = null;
+const tileNodes = new Map();
+const prevRects = new Map();
+function registerNode(node, id) {
+    tileNodes.set(id, node);
+    return {
+        update(newId) {
+            if (newId !== id) {
+                tileNodes.delete(id);
+                id = newId;
+                tileNodes.set(id, node);
+            }
+        },
+        destroy() {
+            tileNodes.delete(id);
+        },
+    };
+}
+function onTilePointerDown(e, tile) {
+    if (tile.draggable === false)
+        return;
+    if (e.target.dataset.griddleHandle)
+        return;
+    const ignoreSelector = cfg.dragIgnoreFrom ?? DEFAULT_DRAG_IGNORE;
+    if (ignoreSelector && e.target.closest(ignoreSelector))
+        return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    if (cfg.enablePositioning && isOutOfFlow(tile)) {
+        const layout = computeTileLayout({
+            tile,
+            config: cfg,
+            scrollX: viewport.scrollX,
+            scrollY: viewport.scrollY,
+            viewportWidth: viewport.width,
+            viewportHeight: viewport.height,
+        });
+        const startPinPx = tile.position === 'fixed'
+            ? { x: layout.left - viewport.scrollX, y: layout.top - viewport.scrollY }
+            : { x: layout.left, y: layout.top };
+        pinDrag = {
+            tileId: tile.id,
+            startPinPx,
+            startPointerX: e.clientX,
+            startPointerY: e.clientY,
+        };
+        dispatch('dragStart', { tileId: tile.id });
+        e.stopPropagation();
+        return;
+    }
+    if (!dragController.start(tile.id))
+        return;
+    dragStartPointerX = e.clientX;
+    dragStartPointerY = e.clientY;
+    drag = {
+        tileId: tile.id,
+        pickupCol: tile.col,
+        pickupRow: tile.row,
+        deltaX: 0,
+        deltaY: 0,
+        indicatorCol: tile.col,
+        indicatorRow: tile.row,
+    };
+    dispatch('dragStart', { tileId: tile.id });
+    e.stopPropagation();
+}
+function onResizeHandleDown(e, tile, c) {
+    if (tile.resizable === false)
+        return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    resize = {
+        tileId: tile.id, corner: c,
+        startPointerX: e.clientX, startPointerY: e.clientY,
+        startW: tile.w, startH: tile.h,
+        startCol: tile.col, startRow: tile.row,
+        previewW: tile.w, previewH: tile.h,
+        previewCol: tile.col, previewRow: tile.row,
+    };
+    dispatch('resizeStart', { tileId: tile.id });
+    e.stopPropagation();
+}
+function onPointerMove(e) {
+    if (pinDrag) {
+        const dx = e.clientX - pinDrag.startPointerX;
+        const dy = e.clientY - pinDrag.startPointerY;
+        const newPinPx = {
+            x: pinDrag.startPinPx.x + dx,
+            y: pinDrag.startPinPx.y + dy,
+        };
+        const newPin = pixelsToPin(newPinPx, cfg);
+        api.grid.setTilePinned(pinDrag.tileId, newPin);
+    }
+    if (drag) {
+        const dx = e.clientX - dragStartPointerX;
+        const dy = e.clientY - dragStartPointerY;
+        const candidateCol = drag.pickupCol + Math.round(dx / colSize);
+        const candidateRow = drag.pickupRow + Math.round(dy / rowSize);
+        const result = dragController.update({ col: candidateCol, row: candidateRow });
+        drag = {
+            ...drag,
+            deltaX: dx,
+            deltaY: dy,
+            indicatorCol: result.indicatorCell ? result.indicatorCell.col : null,
+            indicatorRow: result.indicatorCell ? result.indicatorCell.row : null,
+        };
+        // restoreTiles() doesn't emit change events, so force-sync the local
+        // tile list so FLIP picks up displaced tile resets (e.g. drag back to
+        // the pickup cell).
+        if (result.changed)
+            tilesAll = api.grid.tiles;
+    }
+    if (resize) {
+        const dx = e.clientX - resize.startPointerX;
+        const dy = e.clientY - resize.startPointerY;
+        let dw = 0, dh = 0, dcol = 0, drow = 0;
+        const stepsX = Math.round(dx / colSize);
+        const stepsY = Math.round(dy / rowSize);
+        if (resize.corner === 'se' || resize.corner === 'ne')
+            dw = stepsX;
+        if (resize.corner === 'se' || resize.corner === 'sw')
+            dh = stepsY;
+        if (resize.corner === 'sw' || resize.corner === 'nw') {
+            dw = -stepsX;
+            dcol = stepsX;
+        }
+        if (resize.corner === 'ne' || resize.corner === 'nw') {
+            dh = -stepsY;
+            drow = stepsY;
+        }
+        const tile = api.grid.getTile(resize.tileId);
+        const minW = tile?.minW ?? 1;
+        const minH = tile?.minH ?? 1;
+        const maxW = tile?.maxW ?? Infinity;
+        const maxH = tile?.maxH ?? Infinity;
+        const nW = Math.min(maxW, Math.max(minW, resize.startW + dw));
+        const nH = Math.min(maxH, Math.max(minH, resize.startH + dh));
+        const nC = resize.startCol + dcol;
+        const nR = resize.startRow + drow;
+        if (nW !== resize.previewW || nH !== resize.previewH || nC !== resize.previewCol || nR !== resize.previewRow) {
+            resize = { ...resize, previewW: nW, previewH: nH, previewCol: nC, previewRow: nR };
+        }
+    }
+}
+function onPointerUp() {
+    if (pinDrag) {
+        const tileId = pinDrag.tileId;
+        pinDrag = null;
+        dispatch('dragEnd', { tileId, committed: true });
+    }
+    if (drag) {
+        const tileId = drag.tileId;
+        const { committed } = dragController.end();
+        drag = null;
+        dispatch('dragEnd', { tileId, committed });
+    }
+    if (resize) {
+        const r = resize;
+        const t = api.grid.getTile(r.tileId);
+        let committed = false;
+        if (t) {
+            if (r.previewCol !== t.col || r.previewRow !== t.row) {
+                api.moveTile(r.tileId, { col: r.previewCol, row: r.previewRow });
+            }
+            if (r.previewW !== t.w || r.previewH !== t.h) {
+                committed = api.resizeTile(r.tileId, { w: r.previewW, h: r.previewH });
+            }
+            else {
+                committed = r.previewCol !== r.startCol || r.previewRow !== r.startRow
+                    || r.previewW !== r.startW || r.previewH !== r.startH;
+            }
+        }
+        resize = null;
+        dispatch('resizeEnd', { tileId: r.tileId, committed });
+    }
+}
+function updateViewport() {
+    if (!scrollEl)
+        return;
+    viewport = {
+        scrollX: scrollEl.scrollLeft,
+        scrollY: scrollEl.scrollTop,
+        width: scrollEl.clientWidth,
+        height: scrollEl.clientHeight,
+    };
+}
+let ro;
+onMount(() => {
+    updateViewport();
+    // scrollEl is absent while loop mode delegates to LoopGrid.
+    if (scrollEl) {
+        scrollEl.addEventListener('scroll', updateViewport, { passive: true });
+        ro = new ResizeObserver(updateViewport);
+        ro.observe(scrollEl);
+    }
+    window.addEventListener('pointermove', onPointerMove);
+    window.addEventListener('pointerup', onPointerUp);
+    window.addEventListener('pointercancel', onPointerUp);
+});
+onDestroy(() => {
+    if (scrollEl)
+        scrollEl.removeEventListener('scroll', updateViewport);
+    ro?.disconnect();
+    window.removeEventListener('pointermove', onPointerMove);
+    window.removeEventListener('pointerup', onPointerUp);
+    window.removeEventListener('pointercancel', onPointerUp);
+});
+// FLIP animation on version change. Skip the active dragger — it has its
+// own pixel-level transform driven by the cursor delta and we don't want
+// FLIP to fight with that.
+$: runFlip(ver);
+async function runFlip(_v) {
+    await tick();
+    const draggerId = drag?.tileId ?? null;
+    for (const t of tilesAll) {
+        const x = t.col * colSize + halfGap;
+        const y = t.row * rowSize + halfGap;
+        const p = prevRects.get(t.id);
+        if (t.id === draggerId) {
+            // Keep prevRect synced so the post-drop FLIP doesn't double-jump.
+            prevRects.set(t.id, { x, y });
+            continue;
+        }
+        const node = tileNodes.get(t.id);
+        if (p && node) {
+            const dx = p.x - x;
+            const dy = p.y - y;
+            if (dx !== 0 || dy !== 0) {
+                node.style.transition = 'none';
+                node.style.transform = `translate(${dx}px, ${dy}px)`;
+                requestAnimationFrame(() => {
+                    node.style.transition = 'transform 220ms cubic-bezier(.2,.7,.2,1)';
+                    node.style.transform = 'translate(0,0)';
+                });
+            }
+        }
+        prevRects.set(t.id, { x, y });
+    }
+}
+// Compute layouts for ALL rendered tiles in one pass so we can run
+// resolveStickyStacking afterward — that helper needs to see every sticky
+// tile to compute how they push each other. Dragger and resize overrides
+// take precedence over the engine's positioning fields.
+$: tileLayouts = (() => {
+    const out = new Map();
+    const stickyEntries = [];
+    for (const tile of rendered) {
+        let layout;
+        if (resize?.tileId === tile.id) {
+            const w = resize.previewW;
+            const h = resize.previewH;
+            layout = {
+                left: resize.previewCol * colSize + halfGap,
+                top: resize.previewRow * rowSize + halfGap,
+                width: w * cfg.unitWidth + (w - 1) * (cfg.gap ?? 0),
+                height: h * cfg.unitHeight + (h - 1) * (cfg.gap ?? 0),
+                zIndex: 10,
+                effective: 'static',
+            };
+        }
+        else if (drag?.tileId === tile.id) {
+            layout = {
+                left: drag.pickupCol * colSize + halfGap,
+                top: drag.pickupRow * rowSize + halfGap,
+                width: tile.w * cfg.unitWidth + (tile.w - 1) * (cfg.gap ?? 0),
+                height: tile.h * cfg.unitHeight + (tile.h - 1) * (cfg.gap ?? 0),
+                transform: `translate(${drag.deltaX}px, ${drag.deltaY}px)`,
+                zIndex: 20,
+                effective: 'static',
+            };
+        }
+        else {
+            layout = computeTileLayout({
+                tile,
+                config: cfg,
+                scrollX: viewport.scrollX,
+                scrollY: viewport.scrollY,
+                viewportWidth: viewport.width,
+                viewportHeight: viewport.height,
+            });
+            if (layout.effective === 'sticky') {
+                stickyEntries.push({ tile, layout });
+            }
+        }
+        out.set(tile.id, layout);
+    }
+    if (stickyEntries.length > 1)
+        resolveStickyStacking(stickyEntries);
+    return out;
+})();
+function tileLayoutFor(tile) {
+    return tileLayouts.get(tile.id) ?? {
+        left: 0, top: 0, width: 0, height: 0, zIndex: 1, effective: 'static',
+    };
+}
+function isDragging(id) { return drag?.tileId === id || pinDrag?.tileId === id; }
+function isResizing(id) { return resize?.tileId === id; }
+// Drop indicator size matches the dragger's footprint.
+$: indicatorRect = (() => {
+    if (!drag || drag.indicatorCol === null || drag.indicatorRow === null)
+        return null;
+    const t = api.grid.getTile(drag.tileId);
+    if (!t)
+        return null;
+    return {
+        left: drag.indicatorCol * colSize + halfGap,
+        top: drag.indicatorRow * rowSize + halfGap,
+        width: t.w * cfg.unitWidth + (t.w - 1) * (cfg.gap ?? 0),
+        height: t.h * cfg.unitHeight + (t.h - 1) * (cfg.gap ?? 0),
+    };
+})();
+</script>
+
+{#if loopOn}
+  <LoopGrid
+    {api}
+    {height}
+    {showGrid}
+    on:dragStart
+    on:dragEnd
+    on:resizeStart
+    on:resizeEnd
+    on:cameraChange
+  >
+    <svelte:fragment slot="tile" let:tile>
+      <slot name="tile" {tile} />
+    </svelte:fragment>
+  </LoopGrid>
+{:else}
+<div
+  bind:this={scrollEl}
+  class="griddle-scroll"
+  style:height={typeof height === 'number' ? height + 'px' : height}
+>
+  <div
+    class="griddle-content"
+    class:grid-bg={showGrid}
+    style:width={contentSize.width ? contentSize.width + 'px' : '100%'}
+    style:height={contentSize.height ? contentSize.height + 'px' : '100%'}
+    style:--colsize={colSize + 'px'}
+    style:--rowsize={rowSize + 'px'}
+    style:--griddle-tile-radius={(cfg.tileRadius ?? 4) + 'px'}
+  >
+    {#if indicatorRect}
+      <div
+        class="griddle-drop-indicator"
+        style:left={indicatorRect.left + 'px'}
+        style:top={indicatorRect.top + 'px'}
+        style:width={indicatorRect.width + 'px'}
+        style:height={indicatorRect.height + 'px'}
+      ></div>
+    {/if}
+    {#each rendered as tile (tile.id)}
+      {@const layout = tileLayoutFor(tile)}
+      <div
+        class="griddle-tile"
+        class:griddle-dragging={isDragging(tile.id)}
+        class:griddle-resizing={isResizing(tile.id)}
+        class:griddle-relative={layout.effective === 'relative'}
+        class:griddle-absolute={layout.effective === 'absolute'}
+        class:griddle-fixed={layout.effective === 'fixed'}
+        class:griddle-sticky={layout.effective === 'sticky'}
+        data-griddle-tile={tile.id}
+        data-griddle-position={layout.effective}
+        use:registerNode={tile.id}
+        on:pointerdown={(e) => onTilePointerDown(e, tile)}
+        style:left={layout.left + 'px'}
+        style:top={layout.top + 'px'}
+        style:width={layout.width + 'px'}
+        style:height={layout.height + 'px'}
+        style:transform={layout.transform ?? ''}
+        style:z-index={layout.zIndex}
+      >
+        <slot name="tile" {tile} />
+        {#if tile.resizable !== false}
+          {#each (tile.resizeHandles ?? cfg.resizeHandles ?? ['se']) as c (c)}
+            <div
+              class="griddle-handle griddle-handle-{c}"
+              data-griddle-handle={c}
+              on:pointerdown={(e) => onResizeHandleDown(e, tile, c)}
+            ></div>
+          {/each}
+        {/if}
+      </div>
+    {/each}
+  </div>
+</div>
+{/if}
+
+<style>
+  .griddle-scroll {
+    position: relative;
+    overflow: auto;
+    touch-action: none;
+  }
+  .griddle-content {
+    position: relative;
+    min-width: 100%;
+    min-height: 100%;
+  }
+  .grid-bg {
+    background-image:
+      linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px);
+    background-size: var(--colsize) var(--rowsize);
+  }
+  .griddle-tile {
+    position: absolute;
+    box-sizing: border-box;
+    cursor: grab;
+    user-select: none;
+    will-change: transform;
+    z-index: 1;
+  }
+  .griddle-tile.griddle-resizing {
+    z-index: 10;
+    opacity: 0.85;
+    cursor: grabbing;
+  }
+  .griddle-tile.griddle-dragging {
+    z-index: 20;
+    cursor: grabbing;
+    opacity: 0.85;
+    /* Lift the tile off the grid: drop shadow + subtle scale. The transform
+       is set inline (cursor delta), so the scale is folded into a CSS filter
+       to avoid clobbering it. */
+    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
+    transition: filter 120ms ease-out, opacity 120ms ease-out;
+  }
+  .griddle-drop-indicator {
+    position: absolute;
+    box-sizing: border-box;
+    border: 2px dashed rgba(59, 91, 219, 0.55);
+    background: rgba(59, 91, 219, 0.08);
+    border-radius: var(--griddle-tile-radius, 4px);
+    pointer-events: none;
+    z-index: 5;
+  }
+  .griddle-handle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: rgba(60,60,60,0.7);
+    border: 2px solid white;
+    border-radius: 3px;
+    touch-action: none;
+  }
+  .griddle-handle-nw { top: -6px; left: -6px; cursor: nw-resize; }
+  .griddle-handle-ne { top: -6px; right: -6px; cursor: ne-resize; }
+  .griddle-handle-sw { bottom: -6px; left: -6px; cursor: sw-resize; }
+  .griddle-handle-se { bottom: -6px; right: -6px; cursor: se-resize; }
+</style>

package/dist/GriddleGrid.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+import type { Tile } from '@griddle/core';
+import type { GriddleApi } from './griddleStore.js';
+declare const __propDef: {
+    props: {
+        api: GriddleApi;
+        height?: number | string;
+        showGrid?: boolean;
+    };
+    events: {
+        dragStart: CustomEvent<any>;
+        dragEnd: CustomEvent<any>;
+        resizeStart: CustomEvent<any>;
+        resizeEnd: CustomEvent<any>;
+        cameraChange: CustomEvent<import("@griddle/core").CameraState>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        tile: {
+            tile: Tile;
+        };
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type GriddleGridProps = typeof __propDef.props;
+export type GriddleGridEvents = typeof __propDef.events;
+export type GriddleGridSlots = typeof __propDef.slots;
+export default class GriddleGrid extends SvelteComponent<GriddleGridProps, GriddleGridEvents, GriddleGridSlots> {
+}
+export {};

package/dist/LoopGrid.svelte

@@ -0,0 +1,521 @@
+<script>// Loop-mode renderer ("object looping") — see @griddle/core loop.ts for the
+// coordinate model. Mirrors the React GriddleLoopGrid: an overflow-hidden
+// viewport, a transform-translated plane driven by an unbounded camera, and
+// NO native scrolling (wheel deltas feed the camera directly).
+import { onMount, onDestroy, tick, createEventDispatcher } from 'svelte';
+import { DragController, PanController, loopInstances, loopPeriod, resolveLoop, } from '@griddle/core';
+export let api;
+export let height = '100%';
+export let showGrid = true;
+const dispatch = createEventDispatcher();
+const DEFAULT_DRAG_IGNORE = 'a, button, input, textarea, select, [contenteditable]';
+const PAN_THRESHOLD_PX = 4;
+let viewportEl;
+let planeEl;
+const cfgStore = api.config;
+const tilesStore = api.tiles;
+const versionStore = api.version;
+$: cfg = $cfgStore;
+$: tilesAll = $tilesStore;
+$: ver = $versionStore;
+$: loop = resolveLoop(cfg);
+$: editable = loop?.interaction === 'edit';
+$: gapPx = cfg.gap ?? 0;
+$: halfGap = gapPx / 2;
+$: colSize = cfg.unitWidth + gapPx;
+$: rowSize = cfg.unitHeight + gapPx;
+$: period = loopPeriod(cfg, tilesAll);
+// ---- camera plumbing ----------------------------------------------------
+const pan = new PanController();
+$: if (loop) {
+    pan.setPhysics({ friction: loop.friction, ease: loop.ease, maxVelocity: loop.maxVelocity });
+}
+let view = { cxCell: 0, cyCell: 0, vw: 1000, vh: 800 };
+let lastCam = null;
+let raf = 0;
+let resizeObserver = null;
+function onWheel(e) {
+    e.preventDefault();
+    const k = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 100 : 1;
+    pan.scrollBy(e.deltaX * k, e.deltaY * k);
+}
+function frame(now) {
+    raf = requestAnimationFrame(frame);
+    const st = pan.tick(now);
+    if (planeEl) {
+        planeEl.style.transform = `translate3d(${-st.x}px, ${-st.y}px, 0)`;
+    }
+    if (viewportEl && showGrid) {
+        viewportEl.style.backgroundPosition = `${-st.x % colSize}px ${-st.y % rowSize}px`;
+    }
+    const cxCell = Math.floor(st.x / colSize);
+    const cyCell = Math.floor(st.y / rowSize);
+    if (cxCell !== view.cxCell || cyCell !== view.cyCell) {
+        view = { ...view, cxCell, cyCell };
+    }
+    if (!lastCam || lastCam.x !== st.x || lastCam.y !== st.y ||
+        lastCam.isMoving !== st.isMoving || lastCam.isDragging !== st.isDragging) {
+        lastCam = st;
+        dispatch('cameraChange', st);
+    }
+}
+$: instances = (() => {
+    void ver; // re-run on grid changes
+    const bufX = 2 * colSize;
+    const bufY = 2 * rowSize;
+    return loopInstances(cfg, tilesAll, {
+        x: view.cxCell * colSize - bufX,
+        y: view.cyCell * rowSize - bufY,
+        width: view.vw + colSize + 2 * bufX,
+        height: view.vh + rowSize + 2 * bufY,
+    });
+})();
+// ---- pan gesture ----------------------------------------------------------
+let panGesture = null;
+let suppressClick = false;
+function onContainerPointerDown(e) {
+    // Tiles that start drags stopPropagation, so reaching here from a tile
+    // means it was not draggable — panning is the right fallback.
+    if (!loop?.dragPan || e.button !== 0)
+        return;
+    const ignoreSelector = cfg.dragIgnoreFrom ?? DEFAULT_DRAG_IGNORE;
+    if (ignoreSelector && e.target.closest(ignoreSelector))
+        return;
+    panGesture = { pointerId: e.pointerId, startX: e.clientX, startY: e.clientY, moved: false };
+}
+function onClickCapture(e) {
+    if (suppressClick) {
+        suppressClick = false;
+        e.preventDefault();
+        e.stopPropagation();
+    }
+}
+// ---- tile drag / resize ('edit' interaction) ----------------------------
+const dragController = new DragController(api.grid);
+let drag = null;
+let dragStartPointerX = 0;
+let dragStartPointerY = 0;
+let resize = null;
+function isBase(inst) {
+    return inst.kx === 0 && inst.ky === 0;
+}
+function onTilePointerDown(e, inst) {
+    if (!editable)
+        return; // pan mode: container pan handler takes it
+    if (!isBase(inst))
+        return; // ghosts are display-only
+    const tile = inst.tile;
+    if (tile.draggable === false)
+        return;
+    if (e.target.dataset.griddleHandle)
+        return;
+    const ignoreSelector = cfg.dragIgnoreFrom ?? DEFAULT_DRAG_IGNORE;
+    if (ignoreSelector && e.target.closest(ignoreSelector))
+        return;
+    // No pointer capture: the grabbed instance unmounts (drag renders as an
+    // overlay), which would release the capture mid-gesture.
+    if (!dragController.start(tile.id))
+        return;
+    dragStartPointerX = e.clientX;
+    dragStartPointerY = e.clientY;
+    drag = {
+        tileId: tile.id,
+        instanceLeft: inst.left,
+        instanceTop: inst.top,
+        pickupCol: tile.col,
+        pickupRow: tile.row,
+        deltaX: 0,
+        deltaY: 0,
+        indicatorCol: tile.col,
+        indicatorRow: tile.row,
+    };
+    dispatch('dragStart', { tileId: tile.id });
+    e.stopPropagation();
+}
+function onResizeHandleDown(e, inst, c) {
+    if (!editable)
+        return;
+    const tile = inst.tile;
+    if (tile.resizable === false)
+        return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const baseLeft = tile.col * colSize + halfGap;
+    const baseTop = tile.row * rowSize + halfGap;
+    resize = {
+        tileId: tile.id,
+        instanceKey: inst.key,
+        instanceDx: inst.left - baseLeft,
+        instanceDy: inst.top - baseTop,
+        corner: c,
+        startPointerX: e.clientX,
+        startPointerY: e.clientY,
+        startW: tile.w,
+        startH: tile.h,
+        startCol: tile.col,
+        startRow: tile.row,
+        previewW: tile.w,
+        previewH: tile.h,
+        previewCol: tile.col,
+        previewRow: tile.row,
+    };
+    dispatch('resizeStart', { tileId: tile.id });
+    e.stopPropagation();
+}
+function onPointerMove(e) {
+    if (panGesture && e.pointerId === panGesture.pointerId) {
+        const now = performance.now();
+        if (!panGesture.moved) {
+            const dist = Math.hypot(e.clientX - panGesture.startX, e.clientY - panGesture.startY);
+            if (dist >= PAN_THRESHOLD_PX) {
+                panGesture.moved = true;
+                pan.dragStart(panGesture.startX, panGesture.startY, now);
+                pan.dragMove(e.clientX, e.clientY, now);
+            }
+        }
+        else {
+            pan.dragMove(e.clientX, e.clientY, now);
+        }
+        return;
+    }
+    if (drag) {
+        // Ghost edit: plain grid semantics in the base copy — no wrapping.
+        const dx = e.clientX - dragStartPointerX;
+        const dy = e.clientY - dragStartPointerY;
+        const candidate = {
+            col: drag.pickupCol + Math.round(dx / colSize),
+            row: drag.pickupRow + Math.round(dy / rowSize),
+        };
+        const result = dragController.update(candidate);
+        drag = {
+            ...drag,
+            deltaX: dx,
+            deltaY: dy,
+            indicatorCol: result.indicatorCell ? result.indicatorCell.col : null,
+            indicatorRow: result.indicatorCell ? result.indicatorCell.row : null,
+        };
+        // restoreTiles() doesn't emit change events; force-sync the local list.
+        if (result.changed)
+            tilesAll = api.grid.tiles;
+    }
+    if (resize) {
+        const dx = e.clientX - resize.startPointerX;
+        const dy = e.clientY - resize.startPointerY;
+        let dw = 0, dh = 0, dcol = 0, drow = 0;
+        const stepsX = Math.round(dx / colSize);
+        const stepsY = Math.round(dy / rowSize);
+        if (resize.corner === 'se' || resize.corner === 'ne')
+            dw = stepsX;
+        if (resize.corner === 'se' || resize.corner === 'sw')
+            dh = stepsY;
+        if (resize.corner === 'sw' || resize.corner === 'nw') {
+            dw = -stepsX;
+            dcol = stepsX;
+        }
+        if (resize.corner === 'ne' || resize.corner === 'nw') {
+            dh = -stepsY;
+            drow = stepsY;
+        }
+        const tile = api.grid.getTile(resize.tileId);
+        const minW = tile?.minW ?? 1;
+        const minH = tile?.minH ?? 1;
+        const maxW = Math.min(tile?.maxW ?? Infinity, cfg.cols);
+        const maxH = Math.min(tile?.maxH ?? Infinity, cfg.rows);
+        const nW = Math.min(maxW, Math.max(minW, resize.startW + dw));
+        const nH = Math.min(maxH, Math.max(minH, resize.startH + dh));
+        const nC = resize.startCol + dcol;
+        const nR = resize.startRow + drow;
+        if (nW !== resize.previewW || nH !== resize.previewH || nC !== resize.previewCol || nR !== resize.previewRow) {
+            resize = { ...resize, previewW: nW, previewH: nH, previewCol: nC, previewRow: nR };
+        }
+    }
+}
+function onPointerUp(e) {
+    if (panGesture && e.pointerId === panGesture.pointerId) {
+        if (panGesture.moved) {
+            pan.dragEnd(performance.now());
+            suppressClick = true;
+        }
+        panGesture = null;
+        return;
+    }
+    if (drag) {
+        const tileId = drag.tileId;
+        const { committed } = dragController.end();
+        drag = null;
+        tilesAll = api.grid.tiles;
+        dispatch('dragEnd', { tileId, committed });
+    }
+    if (resize) {
+        const r = resize;
+        const t = api.grid.getTile(r.tileId);
+        let committed = false;
+        if (t) {
+            const target = { col: r.previewCol, row: r.previewRow };
+            if (target.col !== t.col || target.row !== t.row) {
+                api.moveTile(r.tileId, target);
+            }
+            if (r.previewW !== t.w || r.previewH !== t.h) {
+                committed = api.resizeTile(r.tileId, { w: r.previewW, h: r.previewH });
+            }
+            else {
+                committed = r.previewCol !== r.startCol || r.previewRow !== r.startRow
+                    || r.previewW !== r.startW || r.previewH !== r.startH;
+            }
+        }
+        resize = null;
+        dispatch('resizeEnd', { tileId: r.tileId, committed });
+    }
+}
+onMount(() => {
+    if (viewportEl) {
+        viewportEl.addEventListener('wheel', onWheel, { passive: false });
+        const measure = () => {
+            if (viewportEl.clientWidth !== view.vw || viewportEl.clientHeight !== view.vh) {
+                view = { ...view, vw: viewportEl.clientWidth, vh: viewportEl.clientHeight };
+            }
+        };
+        measure();
+        resizeObserver = new ResizeObserver(measure);
+        resizeObserver.observe(viewportEl);
+    }
+    raf = requestAnimationFrame(frame);
+    window.addEventListener('pointermove', onPointerMove);
+    window.addEventListener('pointerup', onPointerUp);
+    window.addEventListener('pointercancel', onPointerUp);
+});
+onDestroy(() => {
+    cancelAnimationFrame(raf);
+    if (viewportEl)
+        viewportEl.removeEventListener('wheel', onWheel);
+    resizeObserver?.disconnect();
+    window.removeEventListener('pointermove', onPointerMove);
+    window.removeEventListener('pointerup', onPointerUp);
+    window.removeEventListener('pointercancel', onPointerUp);
+});
+// ---- FLIP for edit-mode repacks (keyed by world key) --------------------
+const tileNodes = new Map();
+const prevRects = new Map();
+function registerNode(node, key) {
+    tileNodes.set(key, node);
+    return {
+        update(newKey) {
+            if (newKey !== key) {
+                tileNodes.delete(key);
+                key = newKey;
+                tileNodes.set(key, node);
+            }
+        },
+        destroy() {
+            tileNodes.delete(key);
+        },
+    };
+}
+$: runFlip(ver);
+async function runFlip(_v) {
+    await tick();
+    const draggerId = drag?.tileId ?? null;
+    const seen = new Set();
+    for (const inst of instances) {
+        const key = inst.key;
+        seen.add(key);
+        const x = inst.left;
+        const y = inst.top;
+        if (editable && inst.tile.id !== draggerId) {
+            const p = prevRects.get(key);
+            const node = tileNodes.get(key);
+            if (p && node) {
+                const dx = p.x - x;
+                const dy = p.y - y;
+                if ((dx !== 0 || dy !== 0) &&
+                    Math.abs(dx) < period.width / 2 &&
+                    Math.abs(dy) < period.height / 2) {
+                    node.style.transition = 'none';
+                    node.style.transform = `translate(${dx}px, ${dy}px)`;
+                    requestAnimationFrame(() => {
+                        node.style.transition = 'transform 220ms cubic-bezier(.2,.7,.2,1)';
+                        node.style.transform = 'translate(0,0)';
+                    });
+                }
+            }
+        }
+        prevRects.set(key, { x, y });
+    }
+    for (const key of prevRects.keys()) {
+        if (!seen.has(key))
+            prevRects.delete(key);
+    }
+}
+// ---- drop indicator + drag overlay ---------------------------------------
+// Indicator renders in the base copy (ghost edit is plain-grid).
+$: indicatorRect = (() => {
+    if (!drag || drag.indicatorCol === null || drag.indicatorRow === null)
+        return null;
+    const t = api.grid.getTile(drag.tileId);
+    if (!t)
+        return null;
+    return {
+        left: drag.indicatorCol * colSize + halfGap,
+        top: drag.indicatorRow * rowSize + halfGap,
+        width: t.w * cfg.unitWidth + (t.w - 1) * gapPx,
+        height: t.h * cfg.unitHeight + (t.h - 1) * gapPx,
+    };
+})();
+$: draggedTile = drag ? api.grid.getTile(drag.tileId) ?? null : null;
+function instanceLayout(inst, r) {
+    if (r && r.instanceKey === inst.key) {
+        return {
+            left: r.previewCol * colSize + halfGap + r.instanceDx,
+            top: r.previewRow * rowSize + halfGap + r.instanceDy,
+            width: r.previewW * cfg.unitWidth + (r.previewW - 1) * gapPx,
+            height: r.previewH * cfg.unitHeight + (r.previewH - 1) * gapPx,
+        };
+    }
+    return { left: inst.left, top: inst.top, width: inst.width, height: inst.height };
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<div
+  bind:this={viewportEl}
+  class="griddle-viewport"
+  class:griddle-pannable={!editable && loop?.dragPan}
+  class:grid-bg={showGrid}
+  style:height={typeof height === 'number' ? height + 'px' : height}
+  style:--colsize={colSize + 'px'}
+  style:--rowsize={rowSize + 'px'}
+  style:--griddle-tile-radius={(cfg.tileRadius ?? 4) + 'px'}
+  on:pointerdown={onContainerPointerDown}
+  on:click|capture={onClickCapture}
+>
+  <div bind:this={planeEl} class="griddle-plane">
+    {#if indicatorRect}
+      <div
+        class="griddle-drop-indicator"
+        style:left={indicatorRect.left + 'px'}
+        style:top={indicatorRect.top + 'px'}
+        style:width={indicatorRect.width + 'px'}
+        style:height={indicatorRect.height + 'px'}
+      ></div>
+    {/if}
+    {#each instances.filter((i) => !(drag && i.tile.id === drag.tileId)) as inst (inst.key)}
+      {@const layout = instanceLayout(inst, resize)}
+      {@const ghost = editable && !isBase(inst)}
+      <div
+        class="griddle-tile"
+        class:griddle-editable={editable && isBase(inst)}
+        class:griddle-ghost={ghost}
+        class:griddle-resizing={resize?.instanceKey === inst.key}
+        data-griddle-tile={inst.tile.id}
+        data-griddle-instance={inst.key}
+        data-griddle-ghost={ghost ? '' : undefined}
+        aria-hidden={isBase(inst) ? undefined : true}
+        use:registerNode={inst.key}
+        on:pointerdown={(e) => onTilePointerDown(e, inst)}
+        style:left={layout.left + 'px'}
+        style:top={layout.top + 'px'}
+        style:width={layout.width + 'px'}
+        style:height={layout.height + 'px'}
+      >
+        <slot name="tile" tile={inst.tile} />
+        {#if editable && isBase(inst) && inst.tile.resizable !== false}
+          {#each (inst.tile.resizeHandles ?? cfg.resizeHandles ?? ['se']) as c (c)}
+            <div
+              class="griddle-handle griddle-handle-{c}"
+              data-griddle-handle={c}
+              on:pointerdown={(e) => onResizeHandleDown(e, inst, c)}
+            ></div>
+          {/each}
+        {/if}
+      </div>
+    {/each}
+    {#if drag && draggedTile}
+      <div
+        class="griddle-tile griddle-drag-overlay"
+        data-griddle-tile={draggedTile.id}
+        style:left={drag.instanceLeft + 'px'}
+        style:top={drag.instanceTop + 'px'}
+        style:width={draggedTile.w * cfg.unitWidth + (draggedTile.w - 1) * gapPx + 'px'}
+        style:height={draggedTile.h * cfg.unitHeight + (draggedTile.h - 1) * gapPx + 'px'}
+        style:transform={`translate(${drag.deltaX}px, ${drag.deltaY}px)`}
+      >
+        <slot name="tile" tile={draggedTile} />
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .griddle-viewport {
+    position: relative;
+    overflow: hidden;
+    touch-action: none;
+    user-select: none;
+  }
+  .griddle-viewport.griddle-pannable {
+    cursor: grab;
+  }
+  .grid-bg {
+    background-image:
+      linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px);
+    background-size: var(--colsize) var(--rowsize);
+  }
+  .griddle-plane {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    will-change: transform;
+  }
+  .griddle-tile {
+    position: absolute;
+    box-sizing: border-box;
+    user-select: none;
+    z-index: 1;
+    border-radius: var(--griddle-tile-radius, 4px);
+  }
+  .griddle-tile.griddle-editable {
+    cursor: grab;
+  }
+  /* Ghost repeats are display-only: pointer-transparent (the gesture falls
+     through to drag-pan) and dimmed to mark the editable copy. */
+  .griddle-tile.griddle-ghost {
+    pointer-events: none;
+    opacity: 0.55;
+  }
+  .griddle-tile.griddle-resizing {
+    z-index: 10;
+    opacity: 0.85;
+    cursor: grabbing;
+  }
+  .griddle-tile.griddle-drag-overlay {
+    z-index: 20;
+    cursor: grabbing;
+    opacity: 0.85;
+    pointer-events: none;
+    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
+  }
+  .griddle-drop-indicator {
+    position: absolute;
+    box-sizing: border-box;
+    border: 2px dashed rgba(59, 91, 219, 0.55);
+    background: rgba(59, 91, 219, 0.08);
+    border-radius: var(--griddle-tile-radius, 4px);
+    pointer-events: none;
+    z-index: 5;
+  }
+  .griddle-handle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: rgba(60,60,60,0.7);
+    border: 2px solid white;
+    border-radius: 3px;
+    touch-action: none;
+  }
+  .griddle-handle-nw { top: -6px; left: -6px; cursor: nw-resize; }
+  .griddle-handle-ne { top: -6px; right: -6px; cursor: ne-resize; }
+  .griddle-handle-sw { bottom: -6px; left: -6px; cursor: sw-resize; }
+  .griddle-handle-se { bottom: -6px; right: -6px; cursor: se-resize; }
+</style>

package/dist/LoopGrid.svelte.d.ts

@@ -0,0 +1,42 @@
+import { SvelteComponent } from "svelte";
+import type { CameraState } from '@griddle/core';
+import type { GriddleApi } from './griddleStore.js';
+declare const __propDef: {
+    props: {
+        api: GriddleApi;
+        height?: number | string;
+        showGrid?: boolean;
+    };
+    events: {
+        dragStart: CustomEvent<{
+            tileId: string;
+        }>;
+        dragEnd: CustomEvent<{
+            tileId: string;
+            committed: boolean;
+        }>;
+        resizeStart: CustomEvent<{
+            tileId: string;
+        }>;
+        resizeEnd: CustomEvent<{
+            tileId: string;
+            committed: boolean;
+        }>;
+        cameraChange: CustomEvent<CameraState>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        tile: {
+            tile: import("@griddle/core").Tile | null;
+        };
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LoopGridProps = typeof __propDef.props;
+export type LoopGridEvents = typeof __propDef.events;
+export type LoopGridSlots = typeof __propDef.slots;
+export default class LoopGrid extends SvelteComponent<LoopGridProps, LoopGridEvents, LoopGridSlots> {
+}
+export {};

package/dist/griddleStore.d.ts

@@ -0,0 +1,28 @@
+import { type Readable } from 'svelte/store';
+import { Grid } from '@griddle/core';
+import type { GridConfig, Tile, GridSnapshot } from '@griddle/core';
+export interface UseGriddleInit {
+    config: GridConfig;
+    tiles?: Tile[];
+}
+export interface GriddleApi {
+    grid: Grid;
+    tiles: Readable<Tile[]>;
+    config: Readable<GridConfig>;
+    version: Readable<number>;
+    moveTile: (id: string, target: {
+        col: number;
+        row: number;
+    }) => boolean;
+    resizeTile: (id: string, size: {
+        w: number;
+        h: number;
+    }) => boolean;
+    addTile: (t: Tile) => void;
+    removeTile: (id: string) => void;
+    updateConfig: (patch: Partial<GridConfig>) => void;
+    toJSON: () => GridSnapshot;
+    loadJSON: (snap: GridSnapshot) => void;
+    destroy: () => void;
+}
+export declare function createGriddle(init: UseGriddleInit): GriddleApi;

package/dist/griddleStore.js

@@ -0,0 +1,28 @@
+// Svelte store that wraps a Grid instance.
+import { writable } from 'svelte/store';
+import { Grid } from '@griddle/core';
+export function createGriddle(init) {
+    const grid = new Grid(init.config, init.tiles ?? []);
+    const tiles = writable(grid.tiles);
+    const config = writable(grid.config);
+    const version = writable(0);
+    const off = grid.changes.on(() => {
+        tiles.set(grid.tiles);
+        config.set(grid.config);
+        version.update((v) => v + 1);
+    });
+    return {
+        grid,
+        tiles: { subscribe: tiles.subscribe },
+        config: { subscribe: config.subscribe },
+        version: { subscribe: version.subscribe },
+        moveTile: (id, target) => grid.moveTile(id, target),
+        resizeTile: (id, size) => grid.resizeTile(id, size),
+        addTile: (t) => grid.addTile(t),
+        removeTile: (id) => grid.removeTile(id),
+        updateConfig: (patch) => grid.updateConfig(patch),
+        toJSON: () => grid.toJSON(),
+        loadJSON: (snap) => grid.loadJSON(snap),
+        destroy: () => off(),
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as GriddleGrid } from './GriddleGrid.svelte';
+export { default as GriddleLoopGrid } from './LoopGrid.svelte';
+export { createGriddle, type GriddleApi, type UseGriddleInit } from './griddleStore.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as GriddleGrid } from './GriddleGrid.svelte';
+export { default as GriddleLoopGrid } from './LoopGrid.svelte';
+export { createGriddle } from './griddleStore.js';

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@griddle/svelte",
+  "version": "0.1.0",
+  "description": "Svelte bindings for Griddle — a headless, zero-dependency grid/canvas engine.",
+  "keywords": [
+    "grid",
+    "canvas",
+    "layout",
+    "drag-and-drop",
+    "drag",
+    "resize",
+    "headless",
+    "virtualization",
+    "tiles",
+    "svelte"
+  ],
+  "homepage": "https://github.com/Trustybits/griddle#readme",
+  "bugs": {
+    "url": "https://github.com/Trustybits/griddle/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Trustybits/griddle.git",
+    "directory": "packages/svelte"
+  },
+  "license": "MIT",
+  "author": "Trustybits",
+  "type": "module",
+  "sideEffects": ["**/*.svelte", "**/*.css"],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@griddle/core": "^0.1.0",
+    "svelte": "^4.0.0 || ^5.0.0"
+  },
+  "devDependencies": {
+    "@griddle/core": "^0.1.0",
+    "@sveltejs/package": "^2.5.8",
+    "svelte": "^4.2.0",
+    "svelte-check": "^4.7.2",
+    "svelte-preprocess": "^5.1.0"
+  }
+}