{"_id":"@appulsauce/svelte-grid","_rev":"3-eaa3c2debc8c9bbe122c32d835d01aa8","name":"@appulsauce/svelte-grid","dist-tags":{"latest":"2.0.2"},"versions":{"2.0.0":{"name":"@appulsauce/svelte-grid","version":"2.0.0","keywords":["svelte","svelte5","grid","drag","draggable","resize","resizable","fluid","responsive"],"author":{"name":"cuire","email":"garwes@icloud.com"},"license":"MIT","_id":"@appulsauce/svelte-grid@2.0.0","maintainers":[{"name":"appulsauce","email":"kai.niermann@gmail.com"}],"homepage":"https://github.com/KaiErikNiermann/svelte-grid-extended#readme","bugs":{"url":"https://github.com/KaiErikNiermann/svelte-grid-extended/issues"},"dist":{"shasum":"323241757f968ac26272f14c6068e4eea318eb06","tarball":"https://registry.npmjs.org/@appulsauce/svelte-grid/-/svelte-grid-2.0.0.tgz","fileCount":23,"integrity":"sha512-JgupXHZ8bjH7q9aX+N8HkAecL+Bg7rnNYbXUmlRQeBbbbODEZZ4BUHNcKaQTf/KUuXd7T0GWt+w78MjalMyU6Q==","signatures":[{"sig":"MEQCIC/Modtrygha70HaOZaiLyA5KX6qfQW1d3emCRySy8l5AiAcsmFTXHfx47j7vSo2yqzsdn4uRmbZPiUEByoXxA6OAg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":54856},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./package.json":"./package.json"},"gitHead":"dee44b8ab40c851003454eb0211a72ee09fdad12","scripts":{"dev":"vite dev","e2e":"playwright test","lint":"prettier --check . && eslint .","test":"vitest","build":"vite build && pnpm package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","package":"svelte-kit sync && svelte-package && publint","prepare":"husky","preview":"vite preview","coverage":"vitest run --coverage","test:unit":"vitest run","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","prepublishOnly":"pnpm package"},"_npmUser":{"name":"appulsauce","email":"kai.niermann@gmail.com"},"repository":{"url":"git+https://github.com/KaiErikNiermann/svelte-grid-extended.git","type":"git"},"_npmVersion":"10.9.3","description":"A draggable and resizable grid layout, for Svelte 5","directories":{},"_nodeVersion":"22.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"pnpm@9.15.0","devDependencies":{"vite":"^6.0.0","husky":"^9.1.0","jsdom":"^25.0.1","tslib":"^2.8.1","eslint":"^9.17.0","svelte":"^5.16.0","vitest":"^2.1.0","daisyui":"^4.12.0","globals":"^15.14.0","postcss":"^8.4.49","publint":"^0.2.12","prettier":"^3.4.2","typescript":"^5.7.2","tailwindcss":"^3.4.17","autoprefixer":"^10.4.20","svelte-check":"^4.1.0","@sveltejs/kit":"^2.15.0","@playwright/test":"^1.49.0","@sveltejs/package":"^2.3.7","typescript-eslint":"^8.18.0","@vitest/coverage-v8":"^2.1.0","eslint-plugin-svelte":"^2.46.0","@sveltejs/adapter-auto":"^3.3.1","eslint-config-prettier":"^9.1.0","prettier-plugin-svelte":"^3.3.2","@testing-library/svelte":"^5.2.6","@sveltejs/vite-plugin-svelte":"^5.0.0"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte-grid_2.0.0_1769869076570_0.5371469797162811","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@appulsauce/svelte-grid","version":"2.0.1","keywords":["svelte","svelte5","grid","drag","draggable","resize","resizable","fluid","responsive"],"author":{"name":"cuire","email":"garwes@icloud.com"},"license":"MIT","_id":"@appulsauce/svelte-grid@2.0.1","maintainers":[{"name":"appulsauce","email":"kai.niermann@gmail.com"}],"homepage":"https://github.com/KaiErikNiermann/svelte-grid-extended#readme","bugs":{"url":"https://github.com/KaiErikNiermann/svelte-grid-extended/issues"},"dist":{"shasum":"b491ecbd5b200bd22d9ee705fede319012891933","tarball":"https://registry.npmjs.org/@appulsauce/svelte-grid/-/svelte-grid-2.0.1.tgz","fileCount":23,"integrity":"sha512-jsFgW1jFuzu+lEgjfjTKePlfE2/bTMXq84pemX/9olwtriTdDDbAMyTk0hA1nMsg6qcf1hgyHkJUzqD84L8nmQ==","signatures":[{"sig":"MEYCIQDcMAFHYQCK5oFK9LvTYhH3FuvJwNLRyQnLzY50A0HR4QIhAN/mErAEYSrBMBlS2nni99CrJ4LLeqJWShS3w83DeGgp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@appulsauce%2fsvelte-grid@2.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":40653},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./package.json":"./package.json"},"gitHead":"6083d92cd7a7c20b3dd95811ce6867dd3737afd1","scripts":{"dev":"vite dev","e2e":"playwright test","lint":"prettier --check . && eslint .","test":"vitest","build":"vite build && pnpm package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","package":"svelte-kit sync && svelte-package && publint","prepare":"husky","preview":"vite preview","coverage":"vitest run --coverage","docs:dev":"pnpm --dir docs dev","test:unit":"vitest run","docs:build":"pnpm --dir docs build","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","docs:install":"pnpm --dir docs install","docs:preview":"pnpm --dir docs preview","pretest:unit":"svelte-kit sync","package:build":"svelte-kit sync && svelte-package","prepublishOnly":"pnpm package"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:3010ef8d-a966-4f35-b22f-aecb8233dcfa"}},"repository":{"url":"git+https://github.com/KaiErikNiermann/svelte-grid-extended.git","type":"git"},"_npmVersion":"11.6.2","description":"A draggable and resizable grid layout, for Svelte 5","directories":{},"_nodeVersion":"24.13.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"pnpm@9.15.0","devDependencies":{"vite":"^6.0.0","husky":"^9.1.0","jsdom":"^25.0.1","tslib":"^2.8.1","eslint":"^9.17.0","svelte":"^5.16.0","vitest":"^2.1.0","daisyui":"^4.12.0","globals":"^15.14.0","postcss":"^8.4.49","publint":"^0.2.12","prettier":"^3.4.2","typescript":"^5.7.2","tailwindcss":"^3.4.17","autoprefixer":"^10.4.20","svelte-check":"^4.1.0","@sveltejs/kit":"^2.15.0","@playwright/test":"^1.49.0","@sveltejs/package":"^2.3.7","typescript-eslint":"^8.18.0","@vitest/coverage-v8":"^2.1.0","eslint-plugin-svelte":"^2.46.0","@sveltejs/adapter-auto":"^3.3.1","eslint-config-prettier":"^9.1.0","prettier-plugin-svelte":"^3.3.2","@testing-library/svelte":"^5.2.6","@sveltejs/vite-plugin-svelte":"^5.0.0"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte-grid_2.0.1_1769882231698_0.9747044864961889","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"@appulsauce/svelte-grid","version":"2.0.2","description":"A draggable and resizable grid layout, for Svelte 5","repository":{"type":"git","url":"git+https://github.com/KaiErikNiermann/svelte-grid-extended.git"},"scripts":{"dev":"vite dev","build":"vite build && pnpm package","package:build":"svelte-kit sync && svelte-package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"pnpm package","test":"vitest","pretest:unit":"svelte-kit sync","test:unit":"vitest run","coverage":"vitest run --coverage","e2e":"playwright test","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","lint":"prettier --check . && eslint .","format":"prettier --write .","prepare":"husky","docs:dev":"pnpm --dir docs dev","docs:build":"pnpm --dir docs build","docs:preview":"pnpm --dir docs preview","docs:install":"pnpm --dir docs install"},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./package.json":"./package.json"},"keywords":["svelte","svelte5","grid","drag","draggable","resize","resizable","fluid","responsive"],"author":{"name":"cuire","email":"garwes@icloud.com"},"license":"MIT","bugs":{"url":"https://github.com/KaiErikNiermann/svelte-grid-extended/issues"},"homepage":"https://github.com/KaiErikNiermann/svelte-grid-extended#readme","peerDependencies":{"svelte":"^5.0.0"},"devDependencies":{"@playwright/test":"^1.49.0","@sveltejs/adapter-auto":"^3.3.1","@sveltejs/kit":"^2.15.0","@sveltejs/package":"^2.3.7","@sveltejs/vite-plugin-svelte":"^5.0.0","@testing-library/svelte":"^5.2.6","@vitest/coverage-v8":"^2.1.0","autoprefixer":"^10.4.20","daisyui":"^4.12.0","eslint":"^9.17.0","eslint-config-prettier":"^9.1.0","eslint-plugin-svelte":"^2.46.0","globals":"^15.14.0","husky":"^9.1.0","jsdom":"^25.0.1","postcss":"^8.4.49","prettier":"^3.4.2","prettier-plugin-svelte":"^3.3.2","publint":"^0.2.12","svelte":"^5.16.0","svelte-check":"^4.1.0","tailwindcss":"^3.4.17","tslib":"^2.8.1","typescript":"^5.7.2","typescript-eslint":"^8.18.0","vite":"^6.0.0","vitest":"^2.1.0"},"type":"module","publishConfig":{"access":"public"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","packageManager":"pnpm@9.15.0","gitHead":"ce57abe80129e17a85555483ffdb743632f5de21","_id":"@appulsauce/svelte-grid@2.0.2","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-SXxm0Ux6+Yu0tqwbJ2aD6zvPTdC4xI8XmOMa61BGcVLjOprH7rumqd6woxCHGdd50kPPkADam5y+m7OIxRH8OQ==","shasum":"f323e4b0092e09b52b24c2dde5fd7e2a482affbb","tarball":"https://registry.npmjs.org/@appulsauce/svelte-grid/-/svelte-grid-2.0.2.tgz","fileCount":23,"unpackedSize":40824,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@appulsauce%2fsvelte-grid@2.0.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEaW9G2srR4qMix19fVIbtqnJ3nFDkjEmGJuf0Qo6I0FAiEAp3v6wcIcKYubTWnr+5OEMfr/9aM0En2WW1vXmHwtIQ8="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:3010ef8d-a966-4f35-b22f-aecb8233dcfa"}},"directories":{},"maintainers":[{"name":"appulsauce","email":"kai.niermann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svelte-grid_2.0.2_1769883887200_0.5330611115140038"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-31T14:17:56.480Z","modified":"2026-01-31T18:24:47.629Z","2.0.0":"2026-01-31T14:17:56.727Z","2.0.1":"2026-01-31T17:57:11.839Z","2.0.2":"2026-01-31T18:24:47.336Z"},"bugs":{"url":"https://github.com/KaiErikNiermann/svelte-grid-extended/issues"},"author":{"name":"cuire","email":"garwes@icloud.com"},"license":"MIT","homepage":"https://github.com/KaiErikNiermann/svelte-grid-extended#readme","keywords":["svelte","svelte5","grid","drag","draggable","resize","resizable","fluid","responsive"],"repository":{"type":"git","url":"git+https://github.com/KaiErikNiermann/svelte-grid-extended.git"},"description":"A draggable and resizable grid layout, for Svelte 5","maintainers":[{"name":"appulsauce","email":"kai.niermann@gmail.com"}],"readme":"# @appulsauce/svelte-grid\n\nA draggable and resizable grid layout component for Svelte 5.\n\n[![npm version](https://img.shields.io/npm/v/@appulsauce/svelte-grid.svg)](https://www.npmjs.com/package/@appulsauce/svelte-grid)\n[![license](https://img.shields.io/npm/l/@appulsauce/svelte-grid.svg)](https://github.com/KaiErikNiermann/svelte-grid-extended/blob/main/LICENSE)\n\n## Installation\n\n```bash\nnpm install @appulsauce/svelte-grid\n```\n\n## Quick Start\n\n```svelte\n<script lang=\"ts\">\n\timport Grid, { GridItem, type GridController } from '@appulsauce/svelte-grid';\n\n\tlet items = $state([\n\t\t{ id: '1', x: 0, y: 0, w: 2, h: 2 },\n\t\t{ id: '2', x: 2, y: 0, w: 3, h: 1 }\n\t]);\n\n\tlet gridController: GridController;\n\n\tfunction addItem() {\n\t\tconst position = gridController.getFirstAvailablePosition(2, 2);\n\t\tif (position) {\n\t\t\titems = [...items, { id: crypto.randomUUID(), ...position, w: 2, h: 2 }];\n\t\t}\n\t}\n\n\tconst itemSize = { height: 50 };\n</script>\n\n<button onclick={addItem}>Add Item</button>\n\n<Grid {itemSize} cols={10} collision=\"push\" bind:controller={gridController}>\n\t{#each items as item (item.id)}\n\t\t<GridItem id={item.id} bind:x={item.x} bind:y={item.y} bind:w={item.w} bind:h={item.h}>\n\t\t\t{#snippet children()}\n\t\t\t\t<div class=\"item\">{item.id}</div>\n\t\t\t{/snippet}\n\t\t</GridItem>\n\t{/each}\n</Grid>\n```\n\n## Features\n\n- **Draggable & Resizable** - Move and resize grid items with mouse or touch\n- **Collision Detection** - Three modes: `none`, `push`, `compress`\n- **Two-way Binding** - Bind item positions directly to your state\n- **Custom Handles** - Use snippets for custom move/resize handles\n- **Grid Controller** - Programmatic control with `getFirstAvailablePosition()` and `compress()`\n- **TypeScript** - Full type support included\n\n## Documentation\n\nFor full documentation and examples, visit the [docs site](https://kaierikniermann.github.io/svelte-grid-extended/) or run the docs locally:\n\n```bash\n# Clone the repository\ngit clone https://github.com/KaiErikNiermann/svelte-grid-extended.git\ncd svelte-grid-extended\n\n# Install dependencies\npnpm install\npnpm docs:install\n\n# Run docs site\npnpm docs:dev\n```\n\n## API Overview\n\n### Grid Props\n\n| Prop        | Type                             | Default  | Description                      |\n| ----------- | -------------------------------- | -------- | -------------------------------- |\n| `cols`      | `number`                         | `0`      | Number of columns (0 = infinite) |\n| `rows`      | `number`                         | `0`      | Number of rows (0 = infinite)    |\n| `itemSize`  | `{ width?, height? }`            | `{}`     | Fixed cell size in pixels        |\n| `gap`       | `number`                         | `10`     | Gap between items                |\n| `collision` | `'none' \\| 'push' \\| 'compress'` | `'none'` | Collision behavior               |\n| `readOnly`  | `boolean`                        | `false`  | Disable all interactions         |\n\n### GridItem Props\n\n| Prop        | Type      | Default  | Description              |\n| ----------- | --------- | -------- | ------------------------ |\n| `x`         | `number`  | required | X position in grid units |\n| `y`         | `number`  | required | Y position in grid units |\n| `w`         | `number`  | `1`      | Width in grid units      |\n| `h`         | `number`  | `1`      | Height in grid units     |\n| `movable`   | `boolean` | `true`   | Can be dragged           |\n| `resizable` | `boolean` | `true`   | Can be resized           |\n\n## Requirements\n\n- Svelte 5.0.0+\n\n## License\n\nMIT\n\n## Acknowledgments\n\n- Forked from https://github.com/cuire/svelte-grid-extended\n- Original project: https://github.com/valqelyan/svelte-grid\n","readmeFilename":"README.md"}