{"_id":"@adraw/svelte","_rev":"4-66db5ce61c06ef58208df148371c1452","name":"@adraw/svelte","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@adraw/svelte","version":"0.1.0","keywords":["canvas","drawing","infinite","javascript","svelte","svelte5","typescript","whiteboard"],"author":"Vladimir Antonio F. C.","license":"MIT","_id":"@adraw/svelte@0.1.0","maintainers":[{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"}],"homepage":"https://github.com/vladiantio/adraw/tree/main/packages/svelte#readme","bugs":{"url":"https://github.com/vladiantio/adraw/issues"},"dist":{"shasum":"f056ee5d66222be44d761c6ab3487d209252bde6","tarball":"https://registry.npmjs.org/@adraw/svelte/-/svelte-0.1.0.tgz","fileCount":9,"integrity":"sha512-48zHgJLgSj9MaaRryrVQLUExnNxGV7Uv3jepF1V4q02r2hCl/Vie8In4rDkH1s/w/0wXfXFnfcX3hZp4PR5uTg==","signatures":[{"sig":"MEYCIQDNR36KSlbEb1NMbw/iFzrRtIpqk+Ar5jvdBv6NWGe1gwIhAM3MWzvv7JZUgRYoZn0Mjk2EUr00WK3HxI8glam0kQPV","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26536},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}}},"scripts":{"dev":"tsdown --watch","build":"tsdown --minify"},"_npmUser":{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"},"repository":{"url":"git+https://github.com/vladiantio/adraw.git","type":"git","directory":"packages/svelte"},"description":"Svelte bindings for adraw — components and composables for building canvas-based drawing and whiteboard UIs.","directories":{},"_nodeVersion":"26.0.0","dependencies":{"@adraw/core":"0.1.0"},"_hasShrinkwrap":false,"devDependencies":{"svelte":"^5.53.6","dts-buddy":"^0.8.2","svelte2tsx":"^0.7.57","typescript":"5.9.3","@types/node":"^24.10.13","@tsconfig/svelte":"^5.0.8","svelte-preprocess":"^6.0.5","rollup-plugin-svelte":"^7.2.3"},"peerDependencies":{"svelte":">=5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_0.1.0_1782963939152_0.5060574019480113","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@adraw/svelte","version":"0.1.1","keywords":["canvas","drawing","infinite","javascript","svelte","svelte5","typescript","whiteboard"],"author":"Vladimir Antonio F. C.","license":"MIT","_id":"@adraw/svelte@0.1.1","maintainers":[{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"}],"homepage":"https://github.com/vladiantio/adraw/tree/main/packages/svelte#readme","bugs":{"url":"https://github.com/vladiantio/adraw/issues"},"dist":{"shasum":"16619bdf0cd450e5b1ce45663fba86262c723ec5","tarball":"https://registry.npmjs.org/@adraw/svelte/-/svelte-0.1.1.tgz","fileCount":9,"integrity":"sha512-sNIAZhvgW+1AYW38tYwcJtNVeOWZ105XMIUPZuQ1IFNSeLa+ro3HHqRCsWWyKuaYSal/IW+/jzFW/1xtGWmokQ==","signatures":[{"sig":"MEUCIQCkkfKCVFnRGxWS17Z17O7OD+Y+26936t8jQl8DsGvOwQIgZdHS0lJ9CJNutHj9GA1sX3o4evZOlwdAA9V9I6pzUAs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29490},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}}},"scripts":{"dev":"tsdown --watch","build":"tsdown --minify"},"_npmUser":{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"},"repository":{"url":"git+https://github.com/vladiantio/adraw.git","type":"git","directory":"packages/svelte"},"description":"Svelte bindings for adraw — components and composables for building canvas-based drawing and whiteboard UIs.","directories":{},"_nodeVersion":"26.0.0","dependencies":{"@adraw/core":"0.1.1"},"_hasShrinkwrap":false,"devDependencies":{"svelte":"^5.53.6","dts-buddy":"^0.8.2","svelte2tsx":"^0.7.57","typescript":"5.9.3","@types/node":"^24.10.13","@tsconfig/svelte":"^5.0.8","svelte-preprocess":"^6.0.5","rollup-plugin-svelte":"^7.2.3"},"peerDependencies":{"svelte":">=5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_0.1.1_1783524271406_0.824085741328221","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@adraw/svelte","version":"0.1.2","keywords":["canvas","drawing","infinite","javascript","svelte","svelte5","typescript","whiteboard"],"author":"Vladimir Antonio F. C.","license":"MIT","_id":"@adraw/svelte@0.1.2","maintainers":[{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"}],"homepage":"https://github.com/vladiantio/adraw/tree/main/packages/svelte#readme","bugs":{"url":"https://github.com/vladiantio/adraw/issues"},"dist":{"shasum":"53d9496dd4d49fa8e0611635d65f57a2186a919c","tarball":"https://registry.npmjs.org/@adraw/svelte/-/svelte-0.1.2.tgz","fileCount":9,"integrity":"sha512-y0mo4552mvcWIRY9imS2beyofCwKjF2x1GyDTVjxAY8V7rTzQDPIJLlyksVZhEWihCta0BIvGcps5g3sGhE9QQ==","signatures":[{"sig":"MEUCIBDn+Aw24J4Zr5jnFTMoD4x2o4ah1Z0X0uHl/PbAZh9CAiEAoRAh1tqMj610U9hGzg0vtzdUHxgjPtxCFKBdstYEb7c=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29490},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}}},"scripts":{"dev":"tsdown --watch","build":"tsdown --minify"},"_npmUser":{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"},"repository":{"url":"git+https://github.com/vladiantio/adraw.git","type":"git","directory":"packages/svelte"},"description":"Svelte bindings for adraw — components and composables for building canvas-based drawing and whiteboard UIs.","directories":{},"_nodeVersion":"26.0.0","dependencies":{"@adraw/core":"0.2.0"},"_hasShrinkwrap":false,"devDependencies":{"svelte":"^5.53.6","dts-buddy":"^0.8.2","svelte2tsx":"^0.7.57","typescript":"5.9.3","@types/node":"^24.10.13","@tsconfig/svelte":"^5.0.8","svelte-preprocess":"^6.0.5","rollup-plugin-svelte":"^7.2.3"},"peerDependencies":{"svelte":">=5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/svelte_0.1.2_1784272467153_0.8621323793327162","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"_id":"@adraw/svelte@0.1.3","bugs":{"url":"https://github.com/adrawdev/adraw/issues"},"dist":{"shasum":"8d5d5bd7f6ec36e397ca776589e059bf15616f18","tarball":"https://registry.npmjs.org/@adraw/svelte/-/svelte-0.1.3.tgz","fileCount":9,"integrity":"sha512-cADIYtF8CoqU3ANlJJfRqQEb1nRuWTajSNNCFoyS4LmeaOzbdJvqePIn9ZV/ca+wz7LSMpTBS3bhUmEpQXon+w==","signatures":[{"sig":"MEQCICYgKyNkbiDohVThyyLzk9oHMZ0kfMsrolb4Y7Jm/HeLAiBYcSW4gTS6/EX7aqP6zLwFWE0wj7P6vXBiXIcI00mtgg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDudqgZRMlENJhCjvyVwXnRWqU9ZHfY0CnBc4eLmdmmpgIhAOexixwS9oOc4mPl3stbvrUwsyWJavK7xuxjvCfQHSXi"}],"unpackedSize":29933},"main":"./dist/index.cjs","name":"@adraw/svelte","type":"module","types":"./dist/index.d.ts","author":"Vladimir Antonio F. C.","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}}},"license":"MIT","scripts":{"dev":"tsdown --watch","build":"tsdown --minify"},"version":"0.1.3","_npmUser":{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"},"homepage":"https://github.com/adrawdev/adraw/tree/main/packages/svelte#readme","keywords":["canvas","drawing","infinite","javascript","svelte","svelte5","typescript","whiteboard"],"repository":{"url":"git+https://github.com/adrawdev/adraw.git","type":"git","directory":"packages/svelte"},"description":"Svelte bindings for adraw — components and composables for building canvas-based drawing and whiteboard UIs.","directories":{},"maintainers":[{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"}],"_nodeVersion":"26.0.0","dependencies":{"@adraw/core":"0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"svelte":"^5.56.10","dts-buddy":"^0.8.2","svelte2tsx":"^0.7.61","typescript":"npm:@typescript/typescript6@^6.0.2","@types/node":"^24.10.13","@tsconfig/svelte":"^5.0.8","svelte-preprocess":"^6.0.5","@typescript/native":"npm:typescript@^7.0.2","rollup-plugin-svelte":"^7.2.3"},"peerDependencies":{"svelte":">=5.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svelte_0.1.3_1789012425171_0.6051795507022284"}}},"time":{"created":"2026-07-02T03:45:39.036Z","modified":"2026-09-10T03:53:45.472Z","0.1.0":"2026-07-02T03:45:39.351Z","0.1.1":"2026-07-08T15:24:31.555Z","0.1.2":"2026-07-17T07:14:27.312Z","0.1.3":"2026-09-10T03:53:45.260Z"},"bugs":{"url":"https://github.com/adrawdev/adraw/issues"},"author":"Vladimir Antonio F. C.","license":"MIT","homepage":"https://github.com/adrawdev/adraw/tree/main/packages/svelte#readme","keywords":["canvas","drawing","infinite","javascript","svelte","svelte5","typescript","whiteboard"],"repository":{"url":"git+https://github.com/adrawdev/adraw.git","type":"git","directory":"packages/svelte"},"description":"Svelte bindings for adraw — components and composables for building canvas-based drawing and whiteboard UIs.","maintainers":[{"name":"vladiantio","email":"vladimirfigueroa12@outlook.com"}],"readme":"# @adraw/svelte\n\nSvelte bindings for adraw — components and composables for building canvas-based drawing and whiteboard UIs.\n\n## Installation\n\n```bash\npnpm add @adraw/svelte\n\n# npm\nnpm install @adraw/svelte\n```\n\nSvelte 5 or later is required as a peer dependency.\n\n## Quick start\n\nWrap the part of your app that needs the canvas with `CanvasProvider`, then render `Canvas` wherever you want the drawing surface. Each `CanvasProvider` creates its own isolated canvas instance, so you can mount as many independent boards as you like on the same page.\n\n```svelte\n<script lang=\"ts\">\n  import { Canvas, CanvasProvider, useTool } from \"@adraw/svelte\"\n  import Toolbar from \"./Toolbar.svelte\"\n</script>\n\n<CanvasProvider>\n  <Toolbar />\n  <Canvas style=\"flex: 1;\" />\n</CanvasProvider>\n```\n\n```svelte\n<!-- Toolbar.svelte -->\n<script lang=\"ts\">\n  import { useTool } from \"@adraw/svelte\"\n\n  const tool = useTool()\n</script>\n\n<button onclick={() => tool.setTool(\"select\")} aria-pressed={tool.tool === \"select\"}>\n  Select\n</button>\n<button onclick={() => tool.setTool(\"draw\")} aria-pressed={tool.tool === \"draw\"}>\n  Draw\n</button>\n```\n\n## Components\n\n### `<CanvasProvider>`\n\nSets up an isolated canvas context (via Svelte's context API) for its children. All composables and `<Canvas>` must be rendered inside it.\n\n```svelte\n<CanvasProvider options={{ snapping: { snapEnabled: true } }}>\n  {@render children()}\n</CanvasProvider>\n```\n\n| Prop      | Type                  | Description                        |\n| --------- | --------------------- | ---------------------------------- |\n| `options` | `CanvasSvelteOptions` | Initial snapping / viewport config |\n\n### `<Canvas>`\n\nMounts the drawing surface. Fills its parent container (`width: 100%; height: 100%`).\n\n```svelte\n<Canvas class=\"my-canvas\" style=\"border-radius: 8px;\" />\n```\n\n| Prop    | Type     | Description   |\n| ------- | -------- | ------------- |\n| `class` | `string` | CSS class     |\n| `style` | `string` | Inline styles |\n\n## Composables\n\nAll composables must be called inside `<CanvasProvider>` (in the top level of a component's `<script>`, same as any Svelte context consumer).\n\n### `useCanvas()`\n\nReturns the raw context value: `state` (reactive `elements`, `viewport`, `activeTool`, `selectedIds`) and `instance` — a `{ current: AdrawCanvas | null }` ref to the underlying instance.\n\n### `useTool()`\n\n```ts\nconst tool = useTool()\n// tool.tool: ToolType — \"select\" | \"hand\" | \"draw\" | \"eraser\" | \"rectangle\" | \"ellipse\" | \"line\"\ntool.setTool(\"draw\")\n```\n\n### `useViewport()`\n\n```ts\nconst viewport = useViewport()\nviewport.viewport // ViewportState — { x: number, y: number, zoom: number }\nviewport.zoomIn()\nviewport.zoomOut()\nviewport.resetZoom()\nviewport.zoomToFit()\n```\n\n### `useHistory()`\n\n```ts\nconst history = useHistory()\nhistory.undo()\nhistory.redo()\nhistory.canUndo()\nhistory.canRedo()\n```\n\n### `useSelection()`\n\n```ts\nconst selection = useSelection()\n// selection.selectedIds, selection.elements\nselection.selectAll()\nselection.clearSelection()\nselection.deleteSelected()\n```\n\n### `useTransformOverlay()`\n\n```ts\nconst overlay = useTransformOverlay()\n// overlay.hideWhileTransforming: boolean — whether the selection bounding box +\n// resize/rotation handles are hidden while a resize/rotation gesture is in\n// progress (defaults to true; set via the hideOverlayWhileTransforming option)\noverlay.setHideWhileTransforming(false)\n```\n\n## License\n\nMIT\n","readmeFilename":""}