@cnvx/nodal 0.0.1 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nodal Contributors
+
+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

@@ -1,58 +1,222 @@
-# Svelte library
+# 🦔 nodal
+
+A Svelte 5 library for creating interactive node diagrams with customizable connections and layouts
+
+## Goals
+- Simple declarative API
+- Static rendering by default
+- SVG Rendering
+- Fully typed
+
+## Quick Start
+
+```svelte
+<script lang="ts">
+  import { DiagramController, DiagramNode } from 'nodal';
+</script>
+
+<DiagramController class="w-full h-96 border rounded-lg">
+  <DiagramNode
+    id="start"
+    x={100}
+    y={100}
+    width={120}
+    height={60}
+    connect="end"
+    class="bg-blue-500 text-white rounded-lg flex items-center justify-center"
+  >
+    Start
+  </DiagramNode>
+
+  <DiagramNode
+    id="end"
+    x={300}
+    y={100}
+    width={120}
+    height={60}
+    class="bg-green-500 text-white rounded-lg flex items-center justify-center"
+  >
+    End
+  </DiagramNode>
+</DiagramController>
+```
 
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+## API Reference
+
+### Components
+
+#### `DiagramController`
+The main container component that manages nodes and their connections.
+
+**Props:**
+- Standard HTML div attributes for styling and classes
+
+#### `DiagramNode`
+Individual nodes in the diagram.
+
+**Props:**
+- `id: string` - Unique identifier for the node
+- `x: number` - X coordinate position
+- `y: number` - Y coordinate position
+- `width?: number` - Fixed width (optional if using autosize)
+- `height?: number` - Fixed height (optional if using autosize)
+- `connect?: string | DiagramEdgeParams | Array<string | DiagramEdgeParams>` - Outgoing connections
+- `connectSource?: string | DiagramEdgeParams | Array<string | DiagramEdgeParams>` - Incoming connections
+- `autosize?: boolean` - Auto-size to fit content
+- `origin?: Vector2` - Origin point for positioning (default: center)
+- `clientOnly?: boolean` - Render only on client side
+- Standard HTML div attributes for styling
+
+### Connection Types
+
+#### Bezier Curves
+Smooth curved connections perfect for organic layouts.
+
+```svelte
+<DiagramNode
+  connect={{
+    target: "destination",
+    pathGen: "bezier",
+    curvature: 0.5,
+    sourceAnchor: Anchor.CENTER_RIGHT,
+    targetAnchor: Anchor.CENTER_LEFT
+  }}
+/>
+```
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+#### Smooth Step
+Right-angled connections with rounded corners, ideal for structured diagrams.
+
+```svelte
+<DiagramNode
+  connect={{
+    target: "destination",
+    pathGen: "smoothstep",
+    borderRadius: 10,
+    center: { x: 0.5, y: 0.3 }
+  }}
+/>
+```
 
-## Creating a project
+### Anchoring System
 
-If you're seeing this, you've probably already done this step. Congrats!
+Use predefined anchor points for precise connection positioning:
 
-```bash
-# create a new project in the current directory
-npx sv create
+```ts
+import { Anchor } from 'nodal';
 
-# create a new project in my-app
-npx sv create my-app
+// Available anchors:
+Anchor.TOP_LEFT        // { x: 0, y: 0 }
+Anchor.TOP_RIGHT       // { x: 1, y: 0 }
+Anchor.BOTTOM_LEFT     // { x: 0, y: 1 }
+Anchor.BOTTOM_RIGHT    // { x: 1, y: 1 }
+Anchor.CENTER_LEFT     // { x: 0, y: 0.5 }
+Anchor.CENTER_RIGHT    // { x: 1, y: 0.5 }
+Anchor.CENTER_TOP      // { x: 0.5, y: 0 }
+Anchor.CENTER_BOTTOM   // { x: 0.5, y: 1 }
+Anchor.CENTER_CENTER   // { x: 0.5, y: 0.5 }
 ```
 
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+### Custom Edge Rendering
+
+Create custom edge appearances with the `snippet` prop:
+
+```svelte
+<DiagramNode
+  connect={{
+    target: "destination",
+    snippet: (edge, path, extra) => `
+      <path
+        d="${path}"
+        stroke="#3b82f6"
+        stroke-width="3"
+        fill="none"
+        marker-end="url(#arrow)"
+      />
+    `,
+    snippetExtraArg: { labelText: "Custom Edge" }
+  }}
+/>
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+## Examples
 
-## Building
+### Basic Flow Diagram
+```svelte
+<script lang="ts">
+  import { DiagramController, DiagramNode } from 'nodal';
+</script>
 
-To build your library:
+<DiagramController class="w-full h-96 bg-gray-50 rounded-lg">
+  <DiagramNode id="start" x={100} y={150} width={100} height={50} connect="process">
+    Start
+  </DiagramNode>
 
-```bash
-npm run package
-```
+  <DiagramNode id="process" x={250} y={150} width={100} height={50} connect="end">
+    Process
+  </DiagramNode>
 
-To create a production version of your showcase app:
-
-```bash
-npm run build
+  <DiagramNode id="end" x={400} y={150} width={100} height={50}>
+    End
+  </DiagramNode>
+</DiagramController>
 ```
 
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+### Auto-Sizing Nodes
+```svelte
+<DiagramNode
+  id="dynamic"
+  x={200}
+  y={100}
+  autosize
+  connect="target"
+  class="bg-blue-500 text-white px-4 py-2 rounded"
+>
+  This content determines the size
+</DiagramNode>
+```
 
-## Publishing
+### Multiple Connections
+```svelte
+<DiagramNode
+  id="hub"
+  x={200}
+  y={200}
+  width={80}
+  height={80}
+  connect={[
+    { target: "output1", pathGen: "bezier", curvature: 0.3 },
+    { target: "output2", pathGen: "smoothstep", borderRadius: 15 },
+    "output3" // Simple string connection
+  ]}
+>
+  Hub
+</DiagramNode>
+```
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+## TypeScript Support
+
+Full TypeScript support with comprehensive type definitions:
+
+```ts
+import type {
+  DiagramNodeType,
+  DiagramEdge,
+  DiagramEdgeParams,
+  Vector2
+} from 'nodal';
+
+const nodes: DiagramNodeType[] = [
+  {
+    id: "node1",
+    x: 100,
+    y: 100,
+    width: 120,
+    height: 60
+  }
+];
+```
 
-To publish your library to [npm](https://www.npmjs.com):
+## License
 
-```bash
-npm publish
-```
+MIT License - see LICENSE file for details.

package/dist/Diagram.svelte

@@ -1,5 +1,7 @@
 <script lang="ts" module>
-    import { browser, dev } from "$app/environment";
+    const browser = !!globalThis?.window
+    const dev = globalThis.process?.env?.NODE_ENV && !globalThis.process.env.NODE_ENV.toLowerCase().startsWith('prod');
+
     import { onMount, setContext, type Snippet } from "svelte";
     import { SvelteMap } from "svelte/reactivity";
     import {
@@ -14,7 +16,7 @@
         vector2,
         type Vector2,
         Anchor,
-    } from "./diagram-lib";
+    } from "./diagram-lib.js";
     import { draw } from "svelte/transition";
 
     export interface DiagramNode {

package/dist/Diagram.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type Snippet } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
-import { type Vector2 } from "./diagram-lib";
+import { type Vector2 } from "./diagram-lib.js";
 export interface DiagramNode {
     id: string;
     x: number;

package/dist/index.d.ts

@@ -2,6 +2,6 @@ export { default as Diagram } from './Diagram.svelte';
 export { default as DiagramController } from './DiagramController.svelte';
 export { default as DiagramNode } from './DiagramNode.svelte';
 export { default as PrerenderDiagram } from './PrerenderDiagram.svelte';
-export * from './diagram-lib';
+export * from './diagram-lib.js';
 export type { DiagramNode as DiagramNodeType, DiagramEdge, DiagramEdgeParams, DiagramProps } from './Diagram.svelte';
 export type { DiagramNodeProps } from './DiagramNode.svelte';

package/dist/index.js

@@ -2,4 +2,4 @@ export { default as Diagram } from './Diagram.svelte';
 export { default as DiagramController } from './DiagramController.svelte';
 export { default as DiagramNode } from './DiagramNode.svelte';
 export { default as PrerenderDiagram } from './PrerenderDiagram.svelte';
-export * from './diagram-lib';
+export * from './diagram-lib.js';

package/package.json

@@ -1,7 +1,8 @@
 {
 	"name": "@cnvx/nodal",
 	"private": false,
-	"version": "0.0.1",
+	"license": "MIT",
+	"version": "0.0.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -59,7 +60,19 @@
 		"vitest": "^3.2.3",
 		"vitest-browser-svelte": "^0.1.0"
 	},
-	"keywords": [
-		"svelte"
-	]
+  "keywords": [
+    "svelte",
+    "diagram",
+    "nodes",
+    "graph",
+    "visualization",
+    "flow-chart",
+    "connections",
+    "bezier",
+    "smoothstep"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Convex-Works/nodal.git"
+  }
 }