{"_id":"@bourka/svelte-grid-layout","name":"@bourka/svelte-grid-layout","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bourka/svelte-grid-layout","version":"1.0.0","description":"A Svelte 5 draggable, resizable, responsive grid layout library.","keywords":["dashboard","drag","grid-layout","resize","responsive","svelte","sveltekit"],"homepage":"https://github.com/Abdelrahmanaman/svelte-grid-layout#readme","bugs":{"url":"https://github.com/Abdelrahmanaman/svelte-grid-layout/issues"},"repository":{"type":"git","url":"git+https://github.com/Abdelrahmanaman/svelte-grid-layout.git"},"type":"module","sideEffects":["**/*.css"],"module":"./dist/index.js","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./draggable":{"types":"./dist/draggable/index.d.ts","svelte":"./dist/draggable/index.js","default":"./dist/draggable/index.js"},"./resizable":{"types":"./dist/resizable/index.d.ts","svelte":"./dist/resizable/index.js","default":"./dist/resizable/index.js"},"./grid-layout":{"types":"./dist/grid-layout/index.d.ts","svelte":"./dist/grid-layout/index.js","default":"./dist/grid-layout/index.js"},"./core":{"types":"./dist/core/index.d.ts","default":"./dist/core/index.js"},"./grid-layout/GridLayout.svelte":{"types":"./dist/grid-layout/GridLayout.svelte.d.ts","svelte":"./dist/grid-layout/GridLayout.svelte","default":"./dist/grid-layout/GridLayout.svelte"},"./grid-layout/ResponsiveGridLayout.svelte":{"types":"./dist/grid-layout/ResponsiveGridLayout.svelte.d.ts","svelte":"./dist/grid-layout/ResponsiveGridLayout.svelte","default":"./dist/grid-layout/ResponsiveGridLayout.svelte"},"./grid-layout/WidthProvider.svelte":{"types":"./dist/grid-layout/WidthProvider.svelte.d.ts","svelte":"./dist/grid-layout/WidthProvider.svelte","default":"./dist/grid-layout/WidthProvider.svelte"},"./grid-layout/GridItem.svelte":{"types":"./dist/grid-layout/GridItem.svelte.d.ts","svelte":"./dist/grid-layout/GridItem.svelte","default":"./dist/grid-layout/GridItem.svelte"},"./grid-layout/GridBackground.svelte":{"types":"./dist/grid-layout/extra/GridBackground.svelte.d.ts","svelte":"./dist/grid-layout/extra/GridBackground.svelte","default":"./dist/grid-layout/extra/GridBackground.svelte"},"./grid-layout/style.css":"./dist/grid-layout/grid-layout.css","./package.json":"./package.json"},"publishConfig":{"access":"public"},"scripts":{"dev":"vp dev","build":"vp build && npm run prepack","preview":"vp preview","prepare":"vp config && svelte-kit sync || echo ''","prepack":"svelte-kit sync && svelte-package && publint","checks":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watchs":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","check":"vpx sv check"},"dependencies":{"fast-equals":"^6.0.0"},"devDependencies":{"@sveltejs/adapter-auto":"^7.0.1","@sveltejs/kit":"^2.57.0","@sveltejs/package":"^2.5.7","@sveltejs/vite-plugin-svelte":"^7.0.0","@tailwindcss/vite":"^4.2.2","@types/node":"^25.9.1","publint":"^0.3.18","svelte":"^5.55.2","svelte-check":"^4.4.6","tailwindcss":"^4.2.2","typescript":"^6.0.2","vite":"catalog:","vite-bundle-analyzer":"^1.3.8","vite-plus":"catalog:"},"peerDependencies":{"svelte":"^5.0.0"},"packageManager":"pnpm@11.1.3","gitHead":"5e5da4041304af70f54b0ff42a461c0df3dc979a","_id":"@bourka/svelte-grid-layout@1.0.0","_nodeVersion":"24.16.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-H1oovw5FWV73Ima+i3Vd7r4CwOgAIhOd6DlFuL1kZA2/ZOoXoxD3SO0tg5m0wvsWV/C96r4aDenzNSphpjQNlw==","shasum":"dc0005b6d3a94f90a8c463fa0dbd38e0f03ade7f","tarball":"https://registry.npmjs.org/@bourka/svelte-grid-layout/-/svelte-grid-layout-1.0.0.tgz","fileCount":76,"unpackedSize":278454,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEZPEo7PxZcFJWUrZdLhkrdYes+jqRsWp62I+Cq1LL8dAiAEV4TLDtY1kbqOji85la+JsUmxO5DFkdX/P9AruVfqXw=="}]},"_npmUser":{"name":"abourka","email":"abdelrahman.bourka1@gmail.com"},"directories":{},"maintainers":[{"name":"abourka","email":"abdelrahman.bourka1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svelte-grid-layout_1.0.0_1779465954756_0.3435483167612039"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-22T16:05:54.531Z","1.0.0":"2026-05-22T16:05:54.917Z","modified":"2026-05-22T16:05:55.347Z"},"maintainers":[{"name":"abourka","email":"abdelrahman.bourka1@gmail.com"}],"description":"A Svelte 5 draggable, resizable, responsive grid layout library.","homepage":"https://github.com/Abdelrahmanaman/svelte-grid-layout#readme","keywords":["dashboard","drag","grid-layout","resize","responsive","svelte","sveltekit"],"repository":{"type":"git","url":"git+https://github.com/Abdelrahmanaman/svelte-grid-layout.git"},"bugs":{"url":"https://github.com/Abdelrahmanaman/svelte-grid-layout/issues"},"readme":"# @bourka/svelte-layout\n\nDraggable, resizable, responsive grid layouts for Svelte 5. The package is built as a Svelte library, ships typed components, and keeps the public API split into explicit subpath exports so apps can import only what they use.\n\n## Install\n\n```sh\npnpm add @bourka/svelte-layout\n```\n\n```sh\nnpm install @bourka/svelte-layout\n```\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n  import { GridLayout, WidthProvider, type Layout } from \"@bourka/svelte-layout\";\n\n  let layout = $state<Layout>([\n    { i: \"revenue\", x: 0, y: 0, w: 4, h: 2 },\n    { i: \"pipeline\", x: 4, y: 0, w: 4, h: 2 },\n    { i: \"alerts\", x: 8, y: 0, w: 4, h: 2 },\n  ]);\n</script>\n\n<WidthProvider>\n  {#snippet children(width)}\n    <GridLayout\n      bind:layout\n      {width}\n      gridConfig={{\n        cols: 12,\n        rowHeight: 64,\n        margin: [12, 12],\n        containerPadding: [12, 12],\n      }}\n      resizeConfig={{ enabled: true, handles: [\"se\", \"e\", \"s\"] }}\n    >\n      {#snippet children(item)}\n        <section class=\"card\">\n          {item.i}: {item.w} x {item.h}\n        </section>\n      {/snippet}\n    </GridLayout>\n  {/snippet}\n</WidthProvider>\n```\n\n`GridLayout` is controlled with `bind:layout`. Each item needs a stable `i` key plus `x`, `y`, `w`, and `h` grid units.\n\n## Responsive Layouts\n\n```svelte\n<script lang=\"ts\">\n  import { ResponsiveGridLayout, WidthProvider, type ResponsiveLayouts } from \"@bourka/svelte-layout\";\n\n  let layouts = $state<ResponsiveLayouts>({\n    lg: [\n      { i: \"inbox\", x: 0, y: 0, w: 3, h: 2 },\n      { i: \"timeline\", x: 3, y: 0, w: 9, h: 2 },\n    ],\n    xs: [\n      { i: \"inbox\", x: 0, y: 0, w: 4, h: 2 },\n      { i: \"timeline\", x: 0, y: 2, w: 4, h: 2 },\n    ],\n  });\n</script>\n\n<WidthProvider>\n  {#snippet children(width)}\n    <ResponsiveGridLayout\n      bind:layouts\n      {width}\n      breakpoints={{ lg: 1100, xs: 0 }}\n      cols={{ lg: 12, xs: 4 }}\n      rowHeight={58}\n    >\n      {#snippet children(item)}\n        <article>{item.i}</article>\n      {/snippet}\n    </ResponsiveGridLayout>\n  {/snippet}\n</WidthProvider>\n```\n\n## Public Exports\n\nUse the root entry for the common API:\n\n```ts\nimport {\n  GridLayout,\n  ResponsiveGridLayout,\n  WidthProvider,\n  GridBackground,\n  type Layout,\n  type LayoutItem,\n  type ResponsiveLayouts,\n} from \"@bourka/svelte-layout\";\n```\n\nUse subpath entry points when you want a narrower import surface:\n\n```ts\nimport { GridLayout, type Layout } from \"@bourka/svelte-layout/grid-layout\";\nimport { Draggable } from \"@bourka/svelte-layout/draggable\";\nimport { Resizable } from \"@bourka/svelte-layout/resizable\";\nimport { getCompactor } from \"@bourka/svelte-layout/core\";\n```\n\nThe package export map is explicit. Internal reference code and demo routes are not exported, and `dist/react-version/**` is excluded from the npm package.\n\n## Grid Behavior\n\nThe main configuration objects are:\n\n- `gridConfig`: `cols`, `rowHeight`, `margin`, `containerPadding`, `maxRows`\n- `dragConfig`: `enabled`, `bounded`, `handle`, `cancel`, `threshold`, `collisionThreshold`\n- `resizeConfig`: `enabled`, `handles`\n- `dropConfig`: external drop support\n- `compactor`: vertical, horizontal, wrap, overlap, or custom compaction strategies\n\n`dragConfig.collisionThreshold` controls how much actual pixel overlap is required before a drag reflows colliding items. The default is `0.25`; set it to `0` for immediate collision resolution.\n\n## Publishing\n\nThe package name is set to `@bourka/svelte-layout` and `publishConfig.access` is public. Build and inspect the package before publishing:\n\n```sh\npnpm pack\n```\n\n```sh\nnpm publish\n```\n\nThis project uses Vite+. Run checks with:\n\n```sh\nvpx sv check\n```\n","readmeFilename":"README.md","_rev":"1-14bb4d8a552cb20d759ec5482d636f62"}