{"_id":"@cnvx/svelte-diagrams","name":"@cnvx/svelte-diagrams","dist-tags":{"latest":"0.2.3"},"versions":{"0.2.3":{"name":"@cnvx/svelte-diagrams","private":false,"license":"MIT","version":"0.2.3","scripts":{"dev":"vite dev","dev-lib":"svelte-package -w","build":"vite build && npm run prepack","preview":"vite preview","prepare":"svelte-kit sync || echo ''","prepack":"svelte-kit sync && svelte-package && publint","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","test:capture":"bun run test/capture.ts","format":"prettier --write .","lint":"prettier --check . && eslint ."},"sideEffects":["**/*.css"],"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"peerDependencies":{"svelte":"^5.0.0"},"devDependencies":{"@eslint/compat":"^1.2.5","@eslint/js":"^9.18.0","@sveltejs/adapter-auto":"^6.0.0","@sveltejs/adapter-static":"^3.0.8","@sveltejs/kit":"^2.22.0","@sveltejs/package":"^2.0.0","@sveltejs/vite-plugin-svelte":"^6.0.0","@tailwindcss/vite":"^4.1.11","@types/bun":"^1.2.19","@types/pixelmatch":"^5.2.6","@types/pngjs":"^6.0.5","eslint":"^9.18.0","eslint-config-prettier":"^10.0.1","eslint-plugin-svelte":"^3.0.0","globals":"^16.0.0","mdsvex":"^0.12.6","pixelmatch":"^7.1.0","playwright":"^1.53.0","prettier":"^3.4.2","prettier-plugin-svelte":"^3.3.3","publint":"^0.3.2","svelte":"^5.0.0","svelte-check":"^4.0.0","typescript":"^5.0.0","typescript-eslint":"^8.20.0","vite":"^7.0.4"},"keywords":["svelte","diagram","nodes","graph","visualization","flow-chart","connections","bezier","smoothstep"],"repository":{"type":"git","url":"git+https://github.com/Convex-Works/nodal.git"},"dependencies":{},"_id":"@cnvx/svelte-diagrams@0.2.3","gitHead":"62464d4b6c3b386d2aa3984ac1d9341c1bad08f4","description":"A Svelte 5 library for creating interactive node diagrams with customizable connections and layouts","bugs":{"url":"https://github.com/Convex-Works/nodal/issues"},"homepage":"https://github.com/Convex-Works/nodal#readme","_nodeVersion":"22.9.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-waFxEZ0RspjEbRqY5j+vGuw2HGUAUX1dl+cW1+/Y/xGqzCOn31gzLbDYnEz3QMbKY/Evcru9/05JIKsxg6pvYQ==","shasum":"b528aeb6402f144b99d2150b5dc54799039d39a8","tarball":"https://registry.npmjs.org/@cnvx/svelte-diagrams/-/svelte-diagrams-0.2.3.tgz","fileCount":15,"unpackedSize":55367,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIA3Y0mEkj4dHt6yt+iMmIFHYNjrcv+3Nn8WsR5PU0KQuAiEAscC2Ib2VVUqSo24MqkacjS2JJUUrNXPCtfJXzSUyOPc="}]},"_npmUser":{"name":"robomonk","email":"rrobomonk@gmail.com"},"directories":{},"maintainers":[{"name":"robomonk","email":"rrobomonk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svelte-diagrams_0.2.3_1762809280711_0.07176233219921224"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-10T21:14:40.655Z","0.2.3":"2025-11-10T21:14:40.902Z","modified":"2025-11-10T21:14:41.226Z"},"maintainers":[{"name":"robomonk","email":"rrobomonk@gmail.com"}],"description":"A Svelte 5 library for creating interactive node diagrams with customizable connections and layouts","homepage":"https://github.com/Convex-Works/nodal#readme","keywords":["svelte","diagram","nodes","graph","visualization","flow-chart","connections","bezier","smoothstep"],"repository":{"type":"git","url":"git+https://github.com/Convex-Works/nodal.git"},"bugs":{"url":"https://github.com/Convex-Works/nodal/issues"},"license":"MIT","readme":"# x Svelte Diagrams\n\nA Svelte 5 library for creating interactive node diagrams with customizable connections and layouts\n\n## Goals\n- Simple declarative API\n- Static rendering by default\n- SVG Rendering\n- Fully typed\n- Lightweight and performant\n\n## Quick Start\n\n```svelte\n<script lang=\"ts\">\n  import { DiagramController, DiagramNode } from 'nodal';\n</script>\n\n<DiagramController class=\"w-full h-96 border rounded-lg\">\n  <DiagramNode\n    id=\"start\"\n    x={100}\n    y={100}\n    width={120}\n    height={60}\n    connect=\"end\"\n    class=\"bg-blue-500 text-white rounded-lg flex items-center justify-center\"\n  >\n    Start\n  </DiagramNode>\n\n  <DiagramNode\n    id=\"end\"\n    x={300}\n    y={100}\n    width={120}\n    height={60}\n    class=\"bg-green-500 text-white rounded-lg flex items-center justify-center\"\n  >\n    End\n  </DiagramNode>\n</DiagramController>\n```\n\n## API Reference\n\n### Components\n\n#### `DiagramController`\nThe main container component that manages nodes and their connections.\n\n**Props:**\n- Standard HTML div attributes for styling and classes\n\n#### `DiagramNode`\nIndividual nodes in the diagram.\n\n**Props:**\n- `id: string` - Unique identifier for the node\n- `x: number` - X coordinate position\n- `y: number` - Y coordinate position\n- `width?: number` - Fixed width (optional if using autosize)\n- `height?: number` - Fixed height (optional if using autosize)\n- `connect?: string | DiagramEdgeParams | Array<string | DiagramEdgeParams>` - Outgoing connections\n- `connectSource?: string | DiagramEdgeParams | Array<string | DiagramEdgeParams>` - Incoming connections\n- `autosize?: boolean` - Auto-size to fit content\n- `origin?: Vector2` - Origin point for positioning (default: center)\n- `clientOnly?: boolean` - Render only on client side\n- Standard HTML div attributes for styling\n\n### Connection Types\n\n#### Bezier Curves\nSmooth curved connections perfect for organic layouts.\n\n```svelte\n<DiagramNode\n  connect={{\n    target: \"destination\",\n    pathGen: \"bezier\",\n    curvature: 0.5,\n    sourceAnchor: Anchor.CENTER_RIGHT,\n    targetAnchor: Anchor.CENTER_LEFT\n  }}\n/>\n```\n\n#### Smooth Step\nRight-angled connections with rounded corners, ideal for structured diagrams.\n\n```svelte\n<DiagramNode\n  connect={{\n    target: \"destination\",\n    pathGen: \"smoothstep\",\n    borderRadius: 10,\n    center: { x: 0.5, y: 0.3 }\n  }}\n/>\n```\n\n### Anchoring System\n\nUse predefined anchor points for precise connection positioning:\n\n```ts\nimport { Anchor } from 'nodal';\n\n// Available anchors:\nAnchor.TOP_LEFT        // { x: 0, y: 0 }\nAnchor.TOP_RIGHT       // { x: 1, y: 0 }\nAnchor.BOTTOM_LEFT     // { x: 0, y: 1 }\nAnchor.BOTTOM_RIGHT    // { x: 1, y: 1 }\nAnchor.CENTER_LEFT     // { x: 0, y: 0.5 }\nAnchor.CENTER_RIGHT    // { x: 1, y: 0.5 }\nAnchor.CENTER_TOP      // { x: 0.5, y: 0 }\nAnchor.CENTER_BOTTOM   // { x: 0.5, y: 1 }\nAnchor.CENTER_CENTER   // { x: 0.5, y: 0.5 }\n```\n\n### Custom Edge Rendering\n\nCreate custom edge appearances with the `snippet` prop:\n\n```svelte\n<DiagramNode\n  connect={{\n    target: \"destination\",\n    snippet: (edge, path, extra) => `\n      <path\n        d=\"${path}\"\n        stroke=\"#3b82f6\"\n        stroke-width=\"3\"\n        fill=\"none\"\n        marker-end=\"url(#arrow)\"\n      />\n    `,\n    snippetExtraArg: { labelText: \"Custom Edge\" }\n  }}\n/>\n```\n\n## Examples\n\n### Basic Flow Diagram\n```svelte\n<script lang=\"ts\">\n  import { DiagramController, DiagramNode } from 'nodal';\n</script>\n\n<DiagramController class=\"w-full h-96 bg-gray-50 rounded-lg\">\n  <DiagramNode id=\"start\" x={100} y={150} width={100} height={50} connect=\"process\">\n    Start\n  </DiagramNode>\n\n  <DiagramNode id=\"process\" x={250} y={150} width={100} height={50} connect=\"end\">\n    Process\n  </DiagramNode>\n\n  <DiagramNode id=\"end\" x={400} y={150} width={100} height={50}>\n    End\n  </DiagramNode>\n</DiagramController>\n```\n\n### Auto-Sizing Nodes\n```svelte\n<DiagramNode\n  id=\"dynamic\"\n  x={200}\n  y={100}\n  autosize\n  connect=\"target\"\n  class=\"bg-blue-500 text-white px-4 py-2 rounded\"\n>\n  This content determines the size\n</DiagramNode>\n```\n\n### Multiple Connections\n```svelte\n<DiagramNode\n  id=\"hub\"\n  x={200}\n  y={200}\n  width={80}\n  height={80}\n  connect={[\n    { target: \"output1\", pathGen: \"bezier\", curvature: 0.3 },\n    { target: \"output2\", pathGen: \"smoothstep\", borderRadius: 15 },\n    \"output3\" // Simple string connection\n  ]}\n>\n  Hub\n</DiagramNode>\n```\n\n## TypeScript Support\n\nFull TypeScript support with comprehensive type definitions:\n\n```ts\nimport type {\n  DiagramNodeType,\n  DiagramEdge,\n  DiagramEdgeParams,\n  Vector2\n} from 'nodal';\n\nconst nodes: DiagramNodeType[] = [\n  {\n    id: \"node1\",\n    x: 100,\n    y: 100,\n    width: 120,\n    height: 60\n  }\n];\n```\n\n## License\n\nMIT License - see LICENSE file for details.\n\n\n# TODOs:\n- Refactor away from Diagram.svelte:247 into a more efficient rendering system\n- Add a testing suite that uses the browser DOM and takes screenshots to verify correct rendering against expected outputs\n","readmeFilename":"README.md","_rev":"1-c38526e20c66a7bf004ae92c2e5d23ef"}