@cnvx/nodal 0.0.4 → 0.1.0

package/README.md

@@ -7,6 +7,7 @@ A Svelte 5 library for creating interactive node diagrams with customizable conn
 - Static rendering by default
 - SVG Rendering
 - Fully typed
+- Lightweight and performant
 
 ## Quick Start
 
@@ -220,3 +221,8 @@ const nodes: DiagramNodeType[] = [
 ## License
 
 MIT License - see LICENSE file for details.
+
+
+# TODOs:
+- Refactor away from Diagram.svelte:247 into a more efficient rendering system
+- Add a testing suite that uses the browser DOM and takes screenshots to verify correct rendering against expected outputs

package/dist/Diagram.svelte

@@ -1,25 +1,21 @@
 <script lang="ts" module>
-    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 {
-        debugSide,
         eq,
         getBezierPath,
         getSmoothStepPath,
         normaliseAngle,
         Side,
         sideForAngle,
-        unitVectorFromAngle,
         vector2,
         type Vector2,
         Anchor,
+        browser,
+        dev,
     } from "./diagram-lib.js";
-    import { draw } from "svelte/transition";
 
-    export interface DiagramNode {
+    export interface DiagramNodeDef {
         id: string;
         x: number;
         y: number;
@@ -44,7 +40,7 @@
 
     export type DiagramEdgeParams = {
         // target: string;
-        snippet?: Snippet<[edge: DiagramEdge, path: string, extra: any]>;
+        snippet?: Snippet<[edge: DiagramEdgeDef, path: string, extra: any]>;
         snippetExtraArg?: any;
 
         sourceAnchor?: Vector2;
@@ -55,14 +51,14 @@
         zIndex?: number;
     } & PathGenParams;
 
-    export type DiagramEdge = {
+    export type DiagramEdgeDef = {
         source: string;
         target: string;
     } & DiagramEdgeParams;
 
     export type DiagramProps = {
-        nodes: SvelteMap<string, DiagramNode>;
-        edges: SvelteMap<string, DiagramEdge>;
+        nodes: SvelteMap<string, DiagramNodeDef>;
+        edges: SvelteMap<string, DiagramEdgeDef>;
         children: Snippet;
     };
 
@@ -70,7 +66,7 @@
     // export const getNodeOrigin = (node: DiagramNode) => node.origin ?? vector2(0.5, 0.5);
     // export const getNodeOrigin = (node: DiagramNode) => vector2(0.0, 0.0);
 
-    const getNodeSize = (node: DiagramNode) => ({
+    const getNodeSize = (node: DiagramNodeDef) => ({
         x: node.width ?? 0,
         y: node.height ?? 0,
     });
@@ -83,7 +79,7 @@
         y1: number,
         x2: number,
         y2: number,
-        edge: DiagramEdge,
+        edge: DiagramEdgeDef,
     ): string {
         const {
             sourceAnchor: source = Anchor.CENTER_CENTER,
@@ -154,7 +150,7 @@
     }
 
     function calculateDimensions(_nodes: typeof nodes) {
-        console.time("dim");
+        // console.time("dim");
         let newMin = vector2(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
         let newMax = vector2(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
 
@@ -177,7 +173,7 @@
             );
         }
 
-        console.timeEnd("dim");
+        // console.timeEnd("dim");
         return { min: newMin, max: newMax };
     }
 
@@ -195,11 +191,12 @@
     setContext("nodeMap", () => nodes);
     setContext("edgeMap", () => edges);
     setContext("dimensions", () => dimensions);
+    setContext("prerendering", false);
 
     let width = $derived(Math.max(dimensions.max.x - dimensions.min.x, 1));
     let height = $derived(Math.max(dimensions.max.y - dimensions.min.y, 1));
 
-    function generateEdgePath(edge: DiagramEdge) {
+    function generateEdgePath(edge: DiagramEdgeDef) {
         const sourceNode = nodes.get(edge.source)!;
         const targetNode = nodes.get(edge.target)!;
 
@@ -221,7 +218,7 @@
         );
     }
 
-    function getNodeAnchor(node: DiagramNode, anchor: Vector2) {
+    function getNodeAnchor(node: DiagramNodeDef, anchor: Vector2) {
         const size = getNodeSize(node);
 
         // if (!browser && !eq(anchor, Anchor.CENTER_CENTER) && eq(size, vector2(0, 0))) {
@@ -236,15 +233,16 @@
         return { left, top };
     }
 
+    // TODO: desperate need for refactoring
     let edgesByZIndexPlane = $derived(
-        edges.values().reduce((acc, edge) => {
+        Array.from(edges.values()).reduce((acc, edge) => {
             const zIndex = edge.zIndex ?? 0;
             if (!acc.has(zIndex)) {
                 acc.set(zIndex, []);
             }
             acc.get(zIndex)!.push(edge);
             return acc;
-        }, new Map<number, DiagramEdge[]>()),
+        }, new Map<number, DiagramEdgeDef[]>()),
     );
 
     // let depthMap = new SvelteMap<number, [DiagramEdge[], DiagramNode[]]>();
@@ -262,7 +260,7 @@
     });
 </script>
 
-{#snippet defaultEdge(edge: DiagramEdge, edgePath: string)}
+{#snippet defaultEdge(edge: DiagramEdgeDef, edgePath: string)}
     <path
         d={edgePath}
         fill="none"

package/dist/Diagram.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type Snippet } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
 import { type Vector2 } from "./diagram-lib.js";
-export interface DiagramNode {
+export interface DiagramNodeDef {
     id: string;
     x: number;
     y: number;
@@ -19,7 +19,7 @@ type PathGenParams = {
     center?: Vector2;
 };
 export type DiagramEdgeParams = {
-    snippet?: Snippet<[edge: DiagramEdge, path: string, extra: any]>;
+    snippet?: Snippet<[edge: DiagramEdgeDef, path: string, extra: any]>;
     snippetExtraArg?: any;
     sourceAnchor?: Vector2;
     targetAnchor?: Vector2;
@@ -27,17 +27,17 @@ export type DiagramEdgeParams = {
     style?: string;
     zIndex?: number;
 } & PathGenParams;
-export type DiagramEdge = {
+export type DiagramEdgeDef = {
     source: string;
     target: string;
 } & DiagramEdgeParams;
 export type DiagramProps = {
-    nodes: SvelteMap<string, DiagramNode>;
-    edges: SvelteMap<string, DiagramEdge>;
+    nodes: SvelteMap<string, DiagramNodeDef>;
+    edges: SvelteMap<string, DiagramEdgeDef>;
     children: Snippet;
 };
 declare const Diagram: import("svelte").Component<DiagramProps, {
-    generateCurvePath: (x1: number, y1: number, x2: number, y2: number, edge: DiagramEdge) => string;
+    generateCurvePath: (x1: number, y1: number, x2: number, y2: number, edge: DiagramEdgeDef) => string;
 }, "">;
 type Diagram = ReturnType<typeof Diagram>;
 export default Diagram;

package/dist/DiagramController.svelte

@@ -1,42 +1,105 @@
 <script lang="ts">
-	import { SvelteMap } from 'svelte/reactivity';
-	import Diagram, { type DiagramNode, type DiagramEdge } from './Diagram.svelte';
-	import { createRawSnippet, flushSync, onMount, setContext, type Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import PrerenderDiagram from './PrerenderDiagram.svelte';
+    import { SvelteMap } from "svelte/reactivity";
+    import Diagram, {
+        type DiagramNodeDef,
+        type DiagramEdgeDef,
+    } from "./Diagram.svelte";
+    import {
+        createRawSnippet,
+        flushSync,
+        onMount,
+        setContext,
+        type Snippet,
+    } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import PrerenderDiagram from "./PrerenderDiagram.svelte";
+    import { browser } from "./diagram-lib.js";
 
-	let {
-		children,
-		...rest
-	}: {
-		children: Snippet;
-	} & HTMLAttributes<HTMLDivElement> = $props();
+    let {
+        children,
+        eagerLoad = false,
+        rootMargin = "100px", // start a bit before it enters the viewport
+        ...rest
+    }: {
+        children: Snippet;
+        eagerLoad: boolean;
+        rootMargin?: string;
+    } & HTMLAttributes<HTMLDivElement> = $props();
 
-	const nodes = new SvelteMap<string, DiagramNode>();
+    const nodes = new SvelteMap<string, DiagramNodeDef>();
+    const layers = new SvelteMap<number, Record<string, DiagramNodeDef>>();
+    setContext("layerNodeMap", () => layers);
+    const edges = new SvelteMap<string, DiagramEdgeDef>();
 
-	const edges = new SvelteMap<string, DiagramEdge>();
+    let containerEl: HTMLDivElement | undefined;
 
-	// let initialDiagramContainer: HTMLElement;
+    // If we're SSR (not browser), or eagerLoad is false, render immediately.
+    // Otherwise wait until after load + idle + intersection.
+    let shouldRender = $derived(!eagerLoad);
 
-	// onMount(() => {
-	// 	initialDiagramContainer.remove();
-	// });
+    const initialTime = performance.now();
 
-	const initialTime = performance.now();
+    onMount(() => {
+        if (!eagerLoad || !containerEl) return;
+
+        let io: IntersectionObserver | null = null;
+
+        const idle = (fn: () => void) => {
+            const ric = (window as any).requestIdleCallback as
+                | ((cb: () => void) => number)
+                | undefined;
+            if (ric) ric(fn);
+            else setTimeout(fn, 0);
+        };
+
+        const startObserving = () => {
+            // In case the element is already visible at this moment
+            io = new IntersectionObserver(
+                (entries) => {
+                    if (entries.some((e) => e.isIntersecting)) {
+                        shouldRender = true;
+                        io?.disconnect();
+                        io = null;
+                    }
+                },
+                { root: null, rootMargin, threshold: 0 },
+            );
+            io.observe(containerEl!);
+        };
+
+        if (document.readyState === "complete") {
+            idle(startObserving);
+        } else {
+            // Wait until the whole document (including images) has loaded
+            window.addEventListener("load", () => idle(startObserving), {
+                once: true,
+            });
+        }
+
+        return () => {
+            io?.disconnect();
+            io = null;
+        };
+    });
 </script>
 
-<!-- first time to register all the nodes and edges -->
-<PrerenderDiagram {nodes} {edges} {children} />
-
-<!-- second time to actually render it after we calculate all the relative positions and total widths and heights -->
-<!-- this is necessary because we need to calculate the relative positions of the nodes and edges -->
-<!-- TODO: Investigate how to do this properly with hydrate and mount and render https://svelte.dev/docs/svelte/imperative-component-api#hydrate -->
-<div {...rest}>
-	<Diagram {nodes} {edges}>
-		{@render children()}
-	</Diagram>
-</div>
-<!-- 
+{#if shouldRender}
+    <!-- first pass: register all the nodes and edges -->
+    <PrerenderDiagram {nodes} {edges} {children} />
+
+    <!-- second pass: render with computed positions -->
+    <div {...rest}>
+        <Diagram {nodes} {edges}>
+            {@render children()}
+        </Diagram>
+    </div>
+{:else}
+    <!-- Lightweight placeholder / container used for intersection observation. -->
+    <div bind:this={containerEl} {...rest}></div>
+{/if}
+
+<!--
 <svelte:boundary>
 	{@const _ = console.log('Finished rendering diagram in', performance.now() - initialTime, 'ms')}
-</svelte:boundary> -->
+</svelte:boundary>
+-->

package/dist/DiagramController.svelte.d.ts

@@ -1,7 +1,9 @@
-import { type Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import { type Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     children: Snippet;
+    eagerLoad: boolean;
+    rootMargin?: string;
 } & HTMLAttributes<HTMLDivElement>;
 declare const DiagramController: import("svelte").Component<$$ComponentProps, {}, "">;
 type DiagramController = ReturnType<typeof DiagramController>;

package/dist/DiagramNode.svelte

@@ -1,47 +1,35 @@
 <script lang="ts">
-    import {
-        getContext,
-        onMount,
-        tick,
-        type ComponentProps,
-        type Snippet,
-    } from "svelte";
+    import { getContext, onMount, tick, type Snippet } from "svelte";
     import type {
-        DiagramNode,
+        DiagramNodeDef,
         DiagramEdgeParams,
-        DiagramEdge,
+        DiagramEdgeDef,
     } from "./Diagram.svelte";
     import type { SvelteMap } from "svelte/reactivity";
     import type { HTMLAttributes } from "svelte/elements";
-    import { vector2, type Vector2 } from "./diagram-lib";
+    import { vector2, type Vector2 } from "./diagram-lib.js";
 
-    // type IndividualConnectActionParam = string | Omit<DiagramEdge, 'source'>;
     type IndividualConnectActionParam =
         | string
-        | (DiagramEdgeParams & { target: string });
-    type IndividualConnectSourceActionParam =
-        | string
+        | (DiagramEdgeParams & { target: string })
         | (DiagramEdgeParams & { source: string });
+
     type DiagramNodeConnectParam =
         | IndividualConnectActionParam
         | IndividualConnectActionParam[];
-    type DiagramNodeConnectSourceParam =
-        | IndividualConnectSourceActionParam
-        | IndividualConnectSourceActionParam[];
 
     export type DiagramNodeProps = {
         children?: Snippet;
         connect?: DiagramNodeConnectParam;
-        connectSource?: DiagramNodeConnectSourceParam;
         autosize?: boolean;
         origin?: Vector2;
-    } & Omit<DiagramNode, "snippet"> &
+    } & Omit<DiagramNodeDef, "snippet"> &
         HTMLAttributes<HTMLDivElement>;
 
     let {
         children,
         connect,
-        connectSource: connectFrom,
+        // connectSource: connectFrom,
         id,
         x,
         y,
@@ -56,11 +44,12 @@
     }: DiagramNodeProps = $props();
 
     const nodeMap = (
-        getContext("nodeMap") as () => SvelteMap<string, DiagramNode>
+        getContext("nodeMap") as () => SvelteMap<string, DiagramNodeDef>
     )();
     const edgeMap = (
-        getContext("edgeMap") as () => SvelteMap<string, DiagramEdge>
+        getContext("edgeMap") as () => SvelteMap<string, DiagramEdgeDef>
     )();
+
     let dimensions = (
         getContext("dimensions") as () =>
             | { min: Vector2; max: Vector2 }
@@ -76,8 +65,7 @@
         y: y - (origin?.y ?? 0.5) * (height ?? 0),
     });
 
-    // const nodeDef: DiagramNode = $derived({ id, x, y, width, height, clientOnly, snippet: children });
-    const nodeDef: DiagramNode = $derived({
+    const nodeDef: DiagramNodeDef = $derived({
         id,
         x: absolutePosition.x,
         y: absolutePosition.y,
@@ -86,17 +74,8 @@
         clientOnly: clientOnly || autosize,
         snippet: children,
     });
-    const prerender = $state.snapshot(getContext("prerendering"));
-
-    // console.log('set', nodeDef.id, nodeDef);
-
-    // const source = elementNodeMap.get(element);
-    // if (!source) {
-    // 	return console.warn(`Could not find source element for`, element);
-    // }
 
     let mounted = $state(false);
-
     const previousEdgeIds = new Set();
 
     // TODO: this should be done only if clientWidth is needed
@@ -108,63 +87,59 @@
     // 	nodeDef.y -= (origin?.y ?? 0) * $state.snapshot(nodeDef.height ?? 0);
     // }
 
-    if (autosize) {
-        onMount(() => {
+    onMount(async () => {
+        if (autosize) {
             width = clientWidth;
             height = clientHeight;
-        });
-    }
+        }
 
-    onMount(async () => {
         if (nodeDef.clientOnly) {
             await tick();
             mounted = true;
         }
     });
 
-    function updateEdgeFrom(
-        param: IndividualConnectSourceActionParam,
-        index: number = 0,
-    ) {
-        const getEdgeId = (source: string, i: number) =>
-            `${source}:${nodeDef.id}:(${i})`;
-        // const edgeId = getEdgeId();
-        if (typeof param == "string") {
-            const source = param;
-
-            const edgeId = getEdgeId(source, index);
-            previousEdgeIds.add(edgeId);
-
-            edgeMap.set(edgeId, { target: nodeDef.id, source });
-        } else {
-            const edgeId = getEdgeId(param.source, index);
-            previousEdgeIds.add(edgeId);
-
-            (param as DiagramEdge).target = nodeDef.id;
-            edgeMap.set(edgeId, param as DiagramEdge);
-        }
-    }
-
     function updateEdge(
         param: IndividualConnectActionParam,
         index: number = 0,
     ) {
-        const getEdgeId = (target: string, i: number) =>
-            `${nodeDef.id}:${target}:(${i})`;
-        // const edgeId = getEdgeId();
+        const selfId = nodeDef.id;
+        const getEdgeId = ({
+            source,
+            target,
+            index,
+        }: {
+            source: string;
+            target: string;
+            index: number;
+        }) => `${source}:${target}:(${index})`;
+
         if (typeof param == "string") {
             const target = param;
 
-            const edgeId = getEdgeId(target, index);
+            const edgeId = getEdgeId({ source: selfId, target, index });
             previousEdgeIds.add(edgeId);
 
             edgeMap.set(edgeId, { source: nodeDef.id, target });
-        } else {
-            const edgeId = getEdgeId(param.target, index);
+        } else if ("target" in param) {
+            // const edgeId = getEdgeId(param.target, index);
+            const edgeId = getEdgeId({
+                source: selfId,
+                target: param.target,
+                index,
+            });
             previousEdgeIds.add(edgeId);
-
-            (param as DiagramEdge).source = nodeDef.id;
-            edgeMap.set(edgeId, param as DiagramEdge);
+            (param as DiagramEdgeDef).source = nodeDef.id;
+            edgeMap.set(edgeId, param as DiagramEdgeDef);
+        } else if ("source" in param) {
+            const edgeId = getEdgeId({
+                source: param.source,
+                target: selfId,
+                index,
+            });
+            previousEdgeIds.add(edgeId);
+            (param as DiagramEdgeDef).target = selfId;
+            edgeMap.set(edgeId, param as DiagramEdgeDef);
         }
     }
 
@@ -176,28 +151,14 @@
         }
     }
 
-    if (connectFrom) {
-        if (!Array.isArray(connectFrom)) {
-            updateEdgeFrom(connectFrom);
-        } else {
-            connectFrom.forEach(updateEdgeFrom);
-        }
-    }
-
     let left = $derived(nodeDef.x - (dimensions?.min.x ?? 0));
     let top = $derived(nodeDef.y - (dimensions?.min.y ?? 0));
 
+    nodeMap.set(nodeDef.id, nodeDef);
     $effect(() => {
         nodeMap.set(nodeDef.id, nodeDef);
     });
 
-    // nodeMap.set(nodeDef.id, nodeDef);
-    $effect(() => {
-        // nodeDef.x -= (origin?.x ?? 0.5) * (nodeDef?.width ?? clientWidth ?? 0);
-        // nodeDef.y -= (origin?.y ?? 0.5) * (nodeDef?.height ?? clientHeight ?? 0);
-        nodeMap.set(nodeDef.id, nodeDef);
-    });
-
     // $inspect(
     // 	'mounted render diagramNode',
     // 	nodeDef.id,
@@ -226,6 +187,5 @@ top:${top}px;left:${left}px;${nodeDef.clientOnly && !mounted ? "opacity:0" : ""}
             bind:clientHeight
         ></div>
     {/if}
-    <!-- <div class="absolute top-0 left-0 w-full h-full bg-red-500"> {nodeDef.clientOnly} {mounted}</div> -->
     {@render children?.()}
 </div>

package/dist/DiagramNode.svelte.d.ts

@@ -1,22 +1,19 @@
 import { type Snippet } from "svelte";
-import type { DiagramNode, DiagramEdgeParams } from "./Diagram.svelte";
+import type { DiagramNodeDef, DiagramEdgeParams } from "./Diagram.svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import { type Vector2 } from "./diagram-lib";
+import { type Vector2 } from "./diagram-lib.js";
 type IndividualConnectActionParam = string | (DiagramEdgeParams & {
     target: string;
-});
-type IndividualConnectSourceActionParam = string | (DiagramEdgeParams & {
+}) | (DiagramEdgeParams & {
     source: string;
 });
 type DiagramNodeConnectParam = IndividualConnectActionParam | IndividualConnectActionParam[];
-type DiagramNodeConnectSourceParam = IndividualConnectSourceActionParam | IndividualConnectSourceActionParam[];
 export type DiagramNodeProps = {
     children?: Snippet;
     connect?: DiagramNodeConnectParam;
-    connectSource?: DiagramNodeConnectSourceParam;
     autosize?: boolean;
     origin?: Vector2;
-} & Omit<DiagramNode, "snippet"> & HTMLAttributes<HTMLDivElement>;
-declare const DiagramNode: any;
+} & Omit<DiagramNodeDef, "snippet"> & HTMLAttributes<HTMLDivElement>;
+declare const DiagramNode: import("svelte").Component<DiagramNodeProps, {}, "">;
 type DiagramNode = ReturnType<typeof DiagramNode>;
 export default DiagramNode;

package/dist/PrerenderDiagram.svelte

@@ -1,18 +1,23 @@
 <script lang="ts">
-	import { setContext } from 'svelte';
-	import type { DiagramProps } from './Diagram.svelte';
-	import { vector2 } from './diagram-lib';
+    import { setContext } from "svelte";
+    import type { DiagramProps } from "./Diagram.svelte";
+    import { vector2 } from "./diagram-lib.js";
 
-	let { nodes, edges, children }: DiagramProps = $props();
+    let { nodes, edges, children }: DiagramProps = $props();
 
-	setContext('nodeMap', () => nodes);
-	setContext('edgeMap', () => edges);
-	setContext('dimensions', () => ({ min: vector2(0, 0), max: vector2(0, 0) }));
-	setContext('prerendering', true);
+    setContext("nodeMap", () => nodes);
+    setContext("edgeMap", () => edges);
+    setContext("dimensions", () => ({
+        min: vector2(0, 0),
+        max: vector2(0, 0),
+    }));
+    setContext("prerendering", true);
 </script>
 
 <template>
-	{@render children()}
+    {@render children()}
 </template>
 
-<svelte:boundary>{@const _ = setContext('prerendering', false)}</svelte:boundary>
+<svelte:boundary>
+    {@const _ = setContext("prerendering", false)}
+</svelte:boundary>

package/dist/PrerenderDiagram.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { DiagramProps } from './Diagram.svelte';
+import type { DiagramProps } from "./Diagram.svelte";
 declare const PrerenderDiagram: import("svelte").Component<DiagramProps, {}, "">;
 type PrerenderDiagram = ReturnType<typeof PrerenderDiagram>;
 export default PrerenderDiagram;

package/dist/diagram-lib.d.ts

@@ -1,3 +1,5 @@
+export declare const browser = true;
+export declare const dev: any;
 export interface Vector2 {
     x: number;
     y: number;

package/dist/diagram-lib.js

@@ -1,3 +1,6 @@
+export const browser = !!globalThis?.window;
+export const dev = globalThis?.process?.env?.NODE_ENV &&
+    !globalThis?.process.env.NODE_ENV.toLowerCase().startsWith("prod");
 export const vector2 = (x, y) => ({ x, y });
 export const eq = (a, b) => a.x === b.x && a.y === b.y;
 export const Anchor = {

package/dist/index.d.ts

@@ -3,5 +3,5 @@ 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.js';
-export type { DiagramNode as DiagramNodeType, DiagramEdge, DiagramEdgeParams, DiagramProps } from './Diagram.svelte';
+export type { DiagramEdgeDef as DiagramEdge, DiagramEdgeParams, DiagramProps } from './Diagram.svelte';
 export type { DiagramNodeProps } from './DiagramNode.svelte';

package/package.json

@@ -1,83 +1,83 @@
 {
-	"name": "@cnvx/nodal",
-	"private": false,
-	"license": "MIT",
-	"version": "0.0.4",
-	"scripts": {
-		"dev": "vite dev",
-		"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",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
-		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"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/kit": "^2.22.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
-		"@tailwindcss/vite": "^4.1.11",
-		"@vitest/browser": "^3.2.3",
-		"eslint": "^9.18.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^3.0.0",
-		"globals": "^16.0.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",
-		"vitest": "^3.2.3",
-		"vitest-browser-svelte": "^0.1.0"
-	},
-	"keywords": [
-		"svelte",
-		"diagram",
-		"nodes",
-		"graph",
-		"visualization",
-		"flow-chart",
-		"connections",
-		"bezier",
-		"smoothstep"
-	],
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/Convex-Works/nodal.git"
-	},
-	"dependencies": {
-		"@sveltejs/adapter-static": "^3.0.8",
-		"mdsvex": "^0.12.6"
-	}
+  "name": "@cnvx/nodal",
+  "private": false,
+  "license": "MIT",
+  "version": "0.1.0",
+  "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 ."
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "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": {}
 }