@cnvx/nodal 0.2.3 → 0.3.1

package/dist/BaseEdge.svelte

@@ -0,0 +1,22 @@
+<script lang="ts" module>
+    import type { SurfaceEdge } from "./Surface.svelte";
+
+    export interface NodalEdgeProps {
+        edge: SurfaceEdge;
+        path: string;
+    }
+</script>
+
+<script lang="ts">
+    const { edge, path }: NodalEdgeProps = $props();
+</script>
+
+<path
+    d={path}
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    shape-rendering="smooth"
+    {...edge.svgPathAttributes || {}}
+/>

package/dist/BaseEdge.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SurfaceEdge } from "./Surface.svelte";
+export interface NodalEdgeProps {
+    edge: SurfaceEdge;
+    path: string;
+}
+declare const BaseEdge: import("svelte").Component<NodalEdgeProps, {}, "">;
+type BaseEdge = ReturnType<typeof BaseEdge>;
+export default BaseEdge;

package/dist/Surface.svelte

@@ -0,0 +1,231 @@
+<script lang="ts" module>
+    import BaseEdge from "./BaseEdge.svelte";
+    import { SvelteMap } from "svelte/reactivity";
+    import {
+        eq,
+        getBezierPath,
+        getSmoothStepPath,
+        normaliseAngle,
+        sideForAngle,
+        type Vector2,
+        Anchor,
+    } from "./diagram-lib.js";
+    import type { HTMLAttributes } from "svelte/elements";
+    import type { Writable } from "svelte/store";
+
+    type PathGenParams =
+        | {
+              pathGen?: "bezier";
+              curvature?: number;
+              offset?: Vector2;
+          }
+        | {
+              pathGen: "smoothstep";
+              borderRadius?: number;
+              center?: Vector2;
+          };
+
+    export type SurfaceEdgeParams = {
+        component?: typeof BaseEdge;
+        sourceAnchor?: Vector2;
+        targetAnchor?: Vector2;
+        svgPathAttributes?: HTMLAttributes<SVGPathElement>;
+    } & PathGenParams;
+
+    export type SurfaceEdge = {
+        source: string | HTMLElement | string[] | HTMLElement[];
+        target: string | HTMLElement | string[] | HTMLElement[];
+    } & SurfaceEdgeParams;
+</script>
+
+<script lang="ts">
+    const {
+        hostElement,
+        edges: _edges,
+        svgAttributes,
+        width: _width,
+        height: _height,
+    }: {
+        hostElement: Element;
+        edges: SvelteMap<string, SurfaceEdge>;
+        width?: Writable<number>;
+        height?: Writable<number>;
+        svgAttributes?: HTMLAttributes<SVGElement>;
+    } = $props();
+
+    export const width = _width;
+    export const height = _height;
+    export const edges = _edges;
+
+    function generateCurvePath(
+        x1: number,
+        y1: number,
+        x2: number,
+        y2: number,
+        edge: SurfaceEdge,
+    ): string {
+        const {
+            sourceAnchor: source = Anchor.CENTER_CENTER,
+            targetAnchor: dest = Anchor.CENTER_CENTER,
+        } = edge;
+
+        function anchorToRads({ x, y }: Vector2) {
+            // vector from the node’s centre (0.5, 0.5)
+            const dx = x - 0.5; // + right
+            const dy = 0.5 - y; // + up   (flip screen-y for math coords)
+            const raw = Math.atan2(dy, dx); // signed angle
+            return normaliseAngle(raw);
+        }
+
+        // CRUCIAL TO INVERT THE Y DIRECTION SINCE IT GOES FROM
+        // NEGATIVE TO POSITIVE!!!!!!!!!!!!!
+        const leaveAngle = Math.atan2(y1 - y2, x2 - x1);
+        const arriveAngle = leaveAngle + Math.PI;
+
+        const sourcePosition = eq(source, Anchor.CENTER_CENTER)
+            ? sideForAngle(leaveAngle)
+            : sideForAngle(anchorToRads(source));
+
+        const targetPosition = eq(dest, Anchor.CENTER_CENTER)
+            ? sideForAngle(arriveAngle)
+            : sideForAngle(anchorToRads(dest));
+
+        const props = {
+            sourceX: x1,
+            sourceY: y1,
+            sourcePosition: sourcePosition,
+
+            targetX: x2,
+            targetY: y2,
+            targetPosition: targetPosition,
+        };
+
+        edge.pathGen ??= "bezier";
+        if (edge.pathGen == "bezier") {
+            return getBezierPath({
+                ...props,
+                curvature: edge.curvature ?? 0.25,
+            })[0];
+        } else if (edge.pathGen == "smoothstep") {
+            const pathgenParams = {
+                borderRadius: edge?.borderRadius ?? 15,
+                center: edge?.center,
+            };
+
+            // calculate the absolute center from the relative center
+            let centerX = undefined,
+                centerY = undefined;
+
+            if (pathgenParams.center) {
+                centerX = x1 + pathgenParams.center.x * (x2 - x1);
+                centerY = y1 + pathgenParams.center.y * (y2 - y1);
+            }
+
+            return getSmoothStepPath({
+                ...props,
+                borderRadius: pathgenParams.borderRadius,
+                centerX,
+                centerY,
+            })[0];
+        }
+
+        throw new Error("unreachable");
+    }
+
+    function* joinIterables<T>(...lists: Iterable<T>[]) {
+        for (const list of lists) yield* list;
+    }
+
+    function resolveItem(
+        item: string | HTMLElement,
+        host: ParentNode,
+    ): Iterable<HTMLElement> {
+        return typeof item === "string"
+            ? (host.querySelectorAll<HTMLElement>(
+                  item,
+              ) as NodeListOf<HTMLElement>)
+            : [item];
+    }
+
+    export function getNodes(
+        input: string | HTMLElement | string[] | HTMLElement[],
+    ): HTMLElement[] {
+        const parts: Iterable<HTMLElement>[] = Array.isArray(input)
+            ? input.map((i) => resolveItem(i, hostElement))
+            : [resolveItem(input, hostElement)];
+
+        return Array.from(joinIterables(...parts));
+    }
+
+    function generateEdgePath(edge: SurfaceEdge) {
+        const sourceNodes = getNodes(edge.source);
+        const targetNodes = getNodes(edge.target);
+
+        const paths: string[] = [];
+
+        sourceNodes.forEach((source) => {
+            targetNodes.forEach((target) => {
+                if (source === target) {
+                    console.error(
+                        `Source and target are the same element: ${edge.source}`,
+                    );
+                    return;
+                }
+
+                const sourceAnchor = getNodeAnchor(
+                    source,
+                    edge.sourceAnchor ?? Anchor.CENTER_CENTER,
+                );
+                const targetAnchor = getNodeAnchor(
+                    target,
+                    edge.targetAnchor ?? Anchor.CENTER_CENTER,
+                );
+                paths.push(
+                    generateCurvePath(
+                        sourceAnchor.left,
+                        sourceAnchor.top,
+                        targetAnchor.left,
+                        targetAnchor.top,
+                        edge,
+                    ),
+                );
+            });
+        });
+        // if (!(sourceNode instanceof HTMLElement)) {
+        //     console.error(`Source node not found: ${edge.source}`);
+        //     return "";
+        // }
+
+        // if (!(targetNode instanceof HTMLElement)) {
+        //     console.error(`Target node not found: ${edge.target}`);
+        //     return "";
+        // }
+
+        return paths;
+    }
+
+    function getNodeAnchor(node: HTMLElement, anchor: Vector2) {
+        return {
+            left: node.offsetLeft + anchor.x * node.clientWidth,
+            top: node.offsetTop + anchor.y * node.clientHeight,
+        };
+    }
+</script>
+
+<svg
+    shape-rendering="crispEdges"
+    style="position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%;overflow:visible;z-index:-1;"
+    {...svgAttributes}
+>
+    {#each edges.values() as edge}
+        {#each generateEdgePath(edge) as path}
+            {@const EdgeComponent = edge.component ?? BaseEdge}
+            <EdgeComponent {path} {edge} />
+            <!-- {@render (edge.snippet ? edge.snippet : defaultEdge)(
+                edge,
+                path,
+                edge.snippetExtraArg,
+            )} -->
+        {/each}
+    {/each}
+</svg>

package/dist/Surface.svelte.d.ts

@@ -0,0 +1,39 @@
+import BaseEdge from "./BaseEdge.svelte";
+import { SvelteMap } from "svelte/reactivity";
+import { type Vector2 } from "./diagram-lib.js";
+import type { HTMLAttributes } from "svelte/elements";
+import type { Writable } from "svelte/store";
+type PathGenParams = {
+    pathGen?: "bezier";
+    curvature?: number;
+    offset?: Vector2;
+} | {
+    pathGen: "smoothstep";
+    borderRadius?: number;
+    center?: Vector2;
+};
+export type SurfaceEdgeParams = {
+    component?: typeof BaseEdge;
+    sourceAnchor?: Vector2;
+    targetAnchor?: Vector2;
+    svgPathAttributes?: HTMLAttributes<SVGPathElement>;
+} & PathGenParams;
+export type SurfaceEdge = {
+    source: string | HTMLElement | string[] | HTMLElement[];
+    target: string | HTMLElement | string[] | HTMLElement[];
+} & SurfaceEdgeParams;
+type $$ComponentProps = {
+    hostElement: Element;
+    edges: SvelteMap<string, SurfaceEdge>;
+    width?: Writable<number>;
+    height?: Writable<number>;
+    svgAttributes?: HTMLAttributes<SVGElement>;
+};
+declare const Surface: import("svelte").Component<$$ComponentProps, {
+    width: Writable<number> | undefined;
+    height: Writable<number> | undefined;
+    edges: SvelteMap<string, SurfaceEdge>;
+    getNodes: (input: string | HTMLElement | string[] | HTMLElement[]) => HTMLElement[];
+}, "">;
+type Surface = ReturnType<typeof Surface>;
+export default Surface;

package/dist/diagram-lib.d.ts

@@ -1,5 +1,3 @@
-export declare const browser = true;
-export declare const dev: any;
 export interface Vector2 {
     x: number;
     y: number;
@@ -53,7 +51,6 @@ export declare enum Side {
     Left = 2,
     Bottom = 3
 }
-export declare function debugSide(s: Side): string;
 export declare function normaliseAngle(r: number): number;
 export declare function sideToUnitVector2(s: Side): Vector2;
 export declare function sideForAngle(rad: number): Side;

package/dist/diagram-lib.js

@@ -1,6 +1,3 @@
-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 = {
@@ -21,14 +18,6 @@ export var Side;
     Side[Side["Left"] = 2] = "Left";
     Side[Side["Bottom"] = 3] = "Bottom";
 })(Side || (Side = {}));
-export function debugSide(s) {
-    return {
-        [Side.Right]: 'Right',
-        [Side.Top]: 'Top',
-        [Side.Left]: 'Left',
-        [Side.Bottom]: 'Bottom'
-    }[s];
-}
 export function normaliseAngle(r) {
     return ((r % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);
 }

package/dist/index.d.ts

@@ -1,7 +1,2 @@
-export { default as Diagram } from './Diagram.svelte';
-export { default as DiagramController, type PassthroughDiagramControllerProps } from './DiagramController.svelte';
-export { default as DiagramNode } from './DiagramNode.svelte';
-export { default as PrerenderDiagram } from './PrerenderDiagram.svelte';
 export * from './diagram-lib.js';
-export type { DiagramEdgeDef as DiagramEdge, DiagramEdgeParams, DiagramProps } from './Diagram.svelte';
-export type { DiagramNodeProps } from './DiagramNode.svelte';
+export { createNodal, connectTo } from "./svelte-actions.js";

package/dist/index.js

@@ -1,5 +1,2 @@
-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.js';
+export { createNodal, connectTo } from "./svelte-actions.js";

package/dist/svelte-actions.d.ts

@@ -0,0 +1,13 @@
+import type { Attachment } from "svelte/attachments";
+import type { HTMLAttributes } from "svelte/elements";
+import type { SurfaceEdgeParams } from "./Surface.svelte";
+type IndividualConnectActionParam = string | (SurfaceEdgeParams & {
+    target: string | string[];
+}) | (SurfaceEdgeParams & {
+    source: string | string[];
+});
+export declare function createNodal({ svgAttributes, }?: Partial<{
+    svgAttributes: HTMLAttributes<SVGElement>;
+}>): Attachment;
+export declare function connectTo(...edges: IndividualConnectActionParam[]): Attachment;
+export {};

package/dist/svelte-actions.js

@@ -0,0 +1,75 @@
+import { mount } from "svelte";
+import { SvelteMap } from "svelte/reactivity";
+import { writable } from "svelte/store";
+import Surface from "./Surface.svelte";
+function drawCall(surface) {
+    requestAnimationFrame(() => {
+        console.debug("Drawing nodal surface edges...");
+        const connections = surface.querySelectorAll("[data-nodal-connected='true']");
+        connections.forEach((conn) => {
+            console.debug("Processing connection for:", conn);
+            const host = conn;
+            if (!conn._nodalEdgeConnections ||
+                conn._nodalEdgeConnections.length === 0) {
+                console.debug("No edges found for host:", host);
+                return;
+            }
+            conn._nodalEdgeConnections.forEach((edge) => {
+                let edgeDef;
+                if (typeof edge == "string") {
+                    edgeDef = {
+                        source: host,
+                        target: edge,
+                    };
+                }
+                else {
+                    edgeDef = {
+                        source: "source" in edge ? edge.source : host,
+                        target: "target" in edge ? edge.target : host,
+                        ...edge,
+                    };
+                }
+                surface._nodalSurface.edges.set(`${edgeDef.source}->${edgeDef.target}`, edgeDef);
+            });
+        });
+    });
+}
+export function createNodal({ svgAttributes = {}, } = {}) {
+    return (element) => {
+        console.debug("Creating nodal sruface..");
+        if (!Object.hasOwn(element, "_nodalSurface")) {
+            const edges = new SvelteMap();
+            const exports = mount(Surface, {
+                target: element,
+                props: {
+                    hostElement: element,
+                    edges,
+                    width: writable(element.clientWidth),
+                    height: writable(element.clientHeight),
+                    svgAttributes,
+                },
+            });
+            Object.defineProperty(element, "_nodalSurface", {
+                value: exports,
+            });
+            const resizeObserver = new ResizeObserver((entries) => {
+                for (let entry of entries) {
+                    const { width, height } = entry.contentRect;
+                    console.debug("Resizing nodal surface to:", width, height);
+                    exports.width?.set(width);
+                    exports.height?.set(height);
+                    // redraw edges
+                    drawCall(element);
+                }
+            });
+            resizeObserver.observe(element);
+            drawCall(element);
+        }
+    };
+}
+export function connectTo(...edges) {
+    return (host) => {
+        host.setAttribute("data-nodal-connected", "true");
+        host._nodalEdgeConnections = edges;
+    };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@cnvx/nodal",
   "private": false,
   "license": "MIT",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "scripts": {
     "dev": "vite dev",
     "dev-lib": "svelte-package -w",

package/dist/Diagram.svelte

@@ -1,377 +0,0 @@
-<script lang="ts" module>
-    import { onMount, setContext, type Snippet } from "svelte";
-    import { SvelteMap } from "svelte/reactivity";
-    import {
-        eq,
-        getBezierPath,
-        getSmoothStepPath,
-        normaliseAngle,
-        Side,
-        sideForAngle,
-        vector2,
-        type Vector2,
-        Anchor,
-        browser,
-        dev,
-    } from "./diagram-lib.js";
-    import type { HTMLAttributes } from "svelte/elements";
-
-    export interface DiagramNodeDef {
-        id: string;
-        x: number;
-        y: number;
-        width?: number;
-        height?: number;
-
-        // this will make the node and all of its connections only client side
-        clientOnly?: boolean;
-    }
-
-    type PathGenParams =
-        | {
-              pathGen?: "bezier";
-              curvature?: number;
-              offset?: Vector2;
-          }
-        | {
-              pathGen: "smoothstep";
-              borderRadius?: number;
-              center?: Vector2;
-          };
-
-    export type DiagramEdgeParams = {
-        // target: string;
-        snippet?: Snippet<[edge: DiagramEdgeDef, path: string, extra: any]>;
-        snippetExtraArg?: any;
-
-        sourceAnchor?: Vector2;
-        targetAnchor?: Vector2;
-
-        class?: string;
-        style?: string;
-        zIndex?: number;
-    } & PathGenParams;
-
-    export type DiagramEdgeDef = {
-        source: string;
-        target: string;
-    } & DiagramEdgeParams;
-
-    export type DiagramProps = {
-        nodes: SvelteMap<string, DiagramNodeDef>;
-        edges: SvelteMap<string, DiagramEdgeDef>;
-        children: Snippet;
-        scaleToFit?: boolean;
-        width?: number;
-        height?: number;
-        figureAttributes: HTMLAttributes<HTMLElement>;
-    };
-
-    // const getNodeOrigin = (node: DiagramNode) => node.origin ?? vector2(0.0, 0.5);
-    // 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: DiagramNodeDef) => ({
-        x: node.width ?? 0,
-        y: node.height ?? 0,
-    });
-</script>
-
-<script lang="ts">
-    let {
-        nodes,
-        edges,
-        children,
-        scaleToFit,
-        figureAttributes,
-        width: userDefinedDiagramWidth,
-        height: userDefinedDiagramHeight,
-    }: DiagramProps = $props();
-    export function generateCurvePath(
-        x1: number,
-        y1: number,
-        x2: number,
-        y2: number,
-        edge: DiagramEdgeDef,
-    ): string {
-        const {
-            sourceAnchor: source = Anchor.CENTER_CENTER,
-            targetAnchor: dest = Anchor.CENTER_CENTER,
-        } = edge;
-
-        function anchorToRads({ x, y }: Vector2) {
-            // vector from the node’s centre (0.5, 0.5)
-            const dx = x - 0.5; // + right
-            const dy = 0.5 - y; // + up   (flip screen-y for math coords)
-            const raw = Math.atan2(dy, dx); // signed angle
-            return normaliseAngle(raw);
-        }
-
-        // CRUCIAL TO INVERT THE Y DIRECTION SINCE IT GOES FROM
-        // NEGATIVE TO POSITIVE!!!!!!!!!!!!!
-        const leaveAngle = Math.atan2(y1 - y2, x2 - x1);
-        const arriveAngle = leaveAngle + Math.PI;
-
-        const sourcePosition = eq(source, Anchor.CENTER_CENTER)
-            ? sideForAngle(leaveAngle)
-            : sideForAngle(anchorToRads(source));
-
-        const targetPosition = eq(dest, Anchor.CENTER_CENTER)
-            ? sideForAngle(arriveAngle)
-            : sideForAngle(anchorToRads(dest));
-
-        const props = {
-            sourceX: x1,
-            sourceY: y1,
-            sourcePosition: sourcePosition,
-
-            targetX: x2,
-            targetY: y2,
-            targetPosition: targetPosition,
-        };
-
-        edge.pathGen ??= "bezier";
-        if (edge.pathGen == "bezier") {
-            return getBezierPath({
-                ...props,
-                curvature: edge.curvature ?? 0.25,
-            })[0];
-        } else if (edge.pathGen == "smoothstep") {
-            const pathgenParams = {
-                borderRadius: edge?.borderRadius ?? 15,
-                center: edge?.center,
-            };
-
-            // calculate the absolute center from the relative center
-            let centerX = undefined,
-                centerY = undefined;
-
-            if (pathgenParams.center) {
-                centerX = x1 + pathgenParams.center.x * (x2 - x1);
-                centerY = y1 + pathgenParams.center.y * (y2 - y1);
-            }
-
-            return getSmoothStepPath({
-                ...props,
-                borderRadius: pathgenParams.borderRadius,
-                centerX,
-                centerY,
-            })[0];
-        }
-
-        throw new Error("unreachable");
-    }
-
-    function calculateDimensions(_nodes: typeof nodes) {
-        if (userDefinedDiagramHeight && userDefinedDiagramWidth) {
-            return {
-                min: vector2(0, 0),
-                max: vector2(userDefinedDiagramWidth, userDefinedDiagramHeight),
-            };
-        }
-
-        // 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);
-
-        for (let node of _nodes.values()) {
-            // if (!browser && node.clientOnly) continue;
-
-            const size = getNodeSize(node);
-            // const origin = getNodeOrigin(node);
-
-            const left = node.x;
-            const top = node.y;
-
-            const right = left + size.x;
-            const bottom = top + size.y;
-
-            newMin = vector2(Math.min(newMin.x, left), Math.min(newMin.y, top));
-            newMax = vector2(
-                Math.max(newMax.x, right),
-                Math.max(newMax.y, bottom),
-            );
-        }
-
-        // console.timeEnd("dim");
-        return { min: newMin, max: newMax };
-    }
-
-    $inspect({ userDefinedDiagramHeight, userDefinedDiagramWidth });
-    // const dimensions = $derived(calculateDimensions(nodes));
-    // let dimensions = $derived(calculateDimensions(nodes));
-    let dimensions = $state(calculateDimensions(nodes));
-
-    $effect(() => {
-        const newDimensions = calculateDimensions(nodes);
-        dimensions.min = newDimensions.min;
-        dimensions.max = newDimensions.max;
-    });
-
-    $inspect({ dimensions });
-    // let dimensions = calculateDimensions(nodes);
-    // onMount(() => (dimensions = calculateDimensions(nodes)));
-
-    setContext("nodeMap", () => nodes);
-    setContext("edgeMap", () => edges);
-    setContext("dimensions", () => dimensions);
-    setContext("prerendering", false);
-
-    let width = $derived(
-        // userDefinedDiagramWidth ??
-        Math.max(dimensions.max.x - dimensions.min.x, 1),
-    );
-    let height = $derived(
-        // userDefinedDiagramHeight ??
-        Math.max(dimensions.max.y - dimensions.min.y, 1),
-    );
-
-    function generateEdgePath(edge: DiagramEdgeDef) {
-        const sourceNode = nodes.get(edge.source)!;
-        const targetNode = nodes.get(edge.target)!;
-
-        const sourceAnchor = getNodeAnchor(
-            sourceNode,
-            edge.sourceAnchor ?? Anchor.CENTER_CENTER,
-        );
-        const targetAnchor = getNodeAnchor(
-            targetNode,
-            edge.targetAnchor ?? Anchor.CENTER_CENTER,
-        );
-
-        return generateCurvePath(
-            sourceAnchor.left,
-            sourceAnchor.top,
-            targetAnchor.left,
-            targetAnchor.top,
-            edge,
-        );
-    }
-
-    function getNodeAnchor(node: DiagramNodeDef, anchor: Vector2) {
-        const size = getNodeSize(node);
-
-        // if (!browser && !eq(anchor, Anchor.CENTER_CENTER) && eq(size, vector2(0, 0))) {
-        // 	throw new Error(
-        // 		`To use anchor other than CENTER,CENTER please set the width and height of the node explicitly or set autosize to true for the node\n\nNode '${node.id}' does not have explicity width or height and thus cannot be connected with a relative anchor`
-        // 	);
-        // }
-
-        const left = node.x - dimensions.min.x + anchor.x * size.x;
-        const top = node.y - dimensions.min.y + anchor.y * size.y;
-
-        return { left, top };
-    }
-
-    // TODO: desperate need for refactoring
-    let edgesByZIndexPlane = $derived(
-        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, DiagramEdgeDef[]>()),
-    );
-
-    // let depthMap = new SvelteMap<number, [DiagramEdge[], DiagramNode[]]>();
-    // $effect(() => {
-    // 	if (nodes || edges) {
-    // 		depthMap.clear();
-    // 		for (const node of nodes.values()) {
-    // 		  // depthMap.has(node.zIndex)
-    // 		}
-    // 	}
-    // });
-
-    let diagramContainer: HTMLElement | null = null;
-    let scale = $state(1);
-    onMount(() => {
-        if (scaleToFit) {
-            if (userDefinedDiagramHeight || userDefinedDiagramWidth) {
-                throw new Error(
-                    "Cannot use user defined width/height with scaleToFit",
-                );
-            }
-
-            console.log(diagramContainer?.parentElement);
-            const scaleY = diagramContainer?.parentElement?.clientHeight
-                ? diagramContainer.parentElement?.clientHeight / height
-                : 1;
-            const scaleX = diagramContainer?.parentElement?.clientWidth
-                ? diagramContainer?.parentElement?.clientWidth / width
-                : 1;
-
-            scale = Math.min(scaleX, scaleY);
-        }
-        dimensions = calculateDimensions(nodes);
-    });
-</script>
-
-{#snippet defaultEdge(edge: DiagramEdgeDef, edgePath: string)}
-    <path
-        d={edgePath}
-        fill="none"
-        stroke="currentColor"
-        class={edge.class}
-        vector-effect="non-scaling-stroke"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        shape-rendering="smooth"
-        style={edge.style}
-    />
-{/snippet}
-
-<figure
-    bind:this={diagramContainer}
-    aria-label="Diagram"
-    aria-hidden={!dev}
-    inert={!dev}
-    {...figureAttributes}
-    role="img"
-    style="position:relative;width:{width}px;height:{height}px;overflow:visible;user-select:none;transform:scale({scale});transform-origin:center center;"
->
-    <!-- <svg class="absolute top-0 right-0 bottom-0 left-0 z-0 h-full w-full overflow-visible"> -->
-    <!-- {#each edges.values() as edge, i}
-		{@const sourceNode = nodes.get(edge.source)}
-		{@const targetNode = nodes.get(edge.target)}
-
-		{#if sourceNode && targetNode && !(!browser && (sourceNode.clientOnly || targetNode.clientOnly))}
-			<svg
-				class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-visible"
-				style="z-index:{edge.zIndex ?? 0};"
-			>
-				{@render (edge.snippet ? edge.snippet : defaultEdge)(
-					edge,
-					generateEdgePath(edge),
-					edge.snippetExtraArg
-				)}
-			</svg>
-		{/if}
-	{/each} -->
-    <!-- </svg> -->
-
-    {#each edgesByZIndexPlane as [zIndex, edges]}
-        <svg
-            shape-rendering="crispEdges"
-            style="z-index:{zIndex};position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%;overflow:visible;"
-        >
-            {#each edges as edge}
-                {@const sourceNode = nodes.get(edge.source)}
-                {@const targetNode = nodes.get(edge.target)}
-                {#if sourceNode && targetNode && !(!browser && (sourceNode.clientOnly || targetNode.clientOnly))}
-                    {@render (edge.snippet ? edge.snippet : defaultEdge)(
-                        edge,
-                        generateEdgePath(edge),
-                        edge.snippetExtraArg,
-                    )}
-                {/if}
-            {/each}
-        </svg>
-    {/each}
-
-    {#key dimensions}
-        {@render children()}
-    {/key}
-</figure>

package/dist/Diagram.svelte.d.ts

@@ -1,48 +0,0 @@
-import { type Snippet } from "svelte";
-import { SvelteMap } from "svelte/reactivity";
-import { type Vector2 } from "./diagram-lib.js";
-import type { HTMLAttributes } from "svelte/elements";
-export interface DiagramNodeDef {
-    id: string;
-    x: number;
-    y: number;
-    width?: number;
-    height?: number;
-    clientOnly?: boolean;
-}
-type PathGenParams = {
-    pathGen?: "bezier";
-    curvature?: number;
-    offset?: Vector2;
-} | {
-    pathGen: "smoothstep";
-    borderRadius?: number;
-    center?: Vector2;
-};
-export type DiagramEdgeParams = {
-    snippet?: Snippet<[edge: DiagramEdgeDef, path: string, extra: any]>;
-    snippetExtraArg?: any;
-    sourceAnchor?: Vector2;
-    targetAnchor?: Vector2;
-    class?: string;
-    style?: string;
-    zIndex?: number;
-} & PathGenParams;
-export type DiagramEdgeDef = {
-    source: string;
-    target: string;
-} & DiagramEdgeParams;
-export type DiagramProps = {
-    nodes: SvelteMap<string, DiagramNodeDef>;
-    edges: SvelteMap<string, DiagramEdgeDef>;
-    children: Snippet;
-    scaleToFit?: boolean;
-    width?: number;
-    height?: number;
-    figureAttributes: HTMLAttributes<HTMLElement>;
-};
-declare const Diagram: import("svelte").Component<DiagramProps, {
-    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,125 +0,0 @@
-<script lang="ts" module>
-    export type PassthroughDiagramControllerProps = ({
-        eagerLoad?: boolean;
-        rootMargin?: string;
-        figureAttributes?: HTMLAttributes<HTMLElement>;
-    } & (
-        | {
-              scaleToFit?: boolean;
-              width?: never;
-              height?: never;
-          }
-        | {
-              scaleToFit?: never;
-              width: number;
-              height: number;
-          }
-    )) &
-        Omit<HTMLAttributes<HTMLDivElement>, "width" | "height">;
-</script>
-
-<script lang="ts">
-    import { SvelteMap } from "svelte/reactivity";
-    import Diagram, {
-        type DiagramNodeDef,
-        type DiagramEdgeDef,
-    } from "./Diagram.svelte";
-    import { onMount, setContext, type Snippet } from "svelte";
-    import type { HTMLAttributes } from "svelte/elements";
-    import PrerenderDiagram from "./PrerenderDiagram.svelte";
-
-    let {
-        children,
-        eagerLoad = false,
-        scaleToFit,
-        width,
-        height,
-        rootMargin = "100px", // start a bit before it enters the viewport
-        figureAttributes = { inert: true, "aria-hidden": true },
-        ...rest
-    }: PassthroughDiagramControllerProps & { children: Snippet } = $props();
-
-    const nodes = new SvelteMap<string, DiagramNodeDef>();
-    const layers = new SvelteMap<number, Record<string, DiagramNodeDef>>();
-    setContext("layerNodeMap", () => layers);
-    const edges = new SvelteMap<string, DiagramEdgeDef>();
-
-    let containerEl: HTMLDivElement | undefined = $state();
-
-    // If we're SSR (not browser), or eagerLoad is false, render immediately.
-    // Otherwise wait until after load + idle + intersection.
-    let shouldRender = $derived(!eagerLoad);
-
-    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>
-
-{#if shouldRender}
-    <!-- first pass: register all the nodes and edges -->
-    <PrerenderDiagram {nodes} {edges} {children} {figureAttributes} />
-
-    <!-- second pass: render with computed positions -->
-    <div {...rest}>
-        <Diagram
-            {nodes}
-            {edges}
-            {scaleToFit}
-            {width}
-            {height}
-            {figureAttributes}
-        >
-            {@render children()}
-        </Diagram>
-    </div>
-{:else}
-    <!-- Lightweight placeholder / container used for intersection observation. -->
-    <div bind:this={containerEl} {...rest} style="min-height: 1px;"></div>
-{/if}
-
-<!--
-<svelte:boundary>
-	{@const _ = console.log('Finished rendering diagram in', performance.now() - initialTime, 'ms')}
-</svelte:boundary>
--->

package/dist/DiagramController.svelte.d.ts

@@ -1,21 +0,0 @@
-export type PassthroughDiagramControllerProps = ({
-    eagerLoad?: boolean;
-    rootMargin?: string;
-    figureAttributes?: HTMLAttributes<HTMLElement>;
-} & ({
-    scaleToFit?: boolean;
-    width?: never;
-    height?: never;
-} | {
-    scaleToFit?: never;
-    width: number;
-    height: number;
-})) & Omit<HTMLAttributes<HTMLDivElement>, "width" | "height">;
-import { type Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = PassthroughDiagramControllerProps & {
-    children: Snippet;
-};
-declare const DiagramController: import("svelte").Component<$$ComponentProps, {}, "">;
-type DiagramController = ReturnType<typeof DiagramController>;
-export default DiagramController;

package/dist/DiagramNode.svelte

@@ -1,191 +0,0 @@
-<script lang="ts">
-    import { getContext, onMount, tick, type Snippet } from "svelte";
-    import type {
-        DiagramNodeDef,
-        DiagramEdgeParams,
-        DiagramEdgeDef,
-    } from "./Diagram.svelte";
-    import type { SvelteMap } from "svelte/reactivity";
-    import type { HTMLAttributes } from "svelte/elements";
-    import { vector2, type Vector2 } from "./diagram-lib.js";
-
-    type IndividualConnectActionParam =
-        | string
-        | (DiagramEdgeParams & { target: string })
-        | (DiagramEdgeParams & { source: string });
-
-    type DiagramNodeConnectParam =
-        | IndividualConnectActionParam
-        | IndividualConnectActionParam[];
-
-    export type DiagramNodeProps = {
-        children?: Snippet;
-        connect?: DiagramNodeConnectParam;
-        autosize?: boolean;
-        origin?: Vector2;
-    } & Omit<DiagramNodeDef, "snippet"> &
-        HTMLAttributes<HTMLDivElement>;
-
-    let {
-        children,
-        connect,
-        // connectSource: connectFrom,
-        id,
-        x,
-        y,
-        width,
-        height,
-        autosize,
-        clientOnly,
-        origin,
-        class: className,
-        style: inlineStyles,
-        ...rest
-    }: DiagramNodeProps = $props();
-
-    const nodeMap = (
-        getContext("nodeMap") as () => SvelteMap<string, DiagramNodeDef>
-    )();
-    const edgeMap = (
-        getContext("edgeMap") as () => SvelteMap<string, DiagramEdgeDef>
-    )();
-
-    let dimensions = (
-        getContext("dimensions") as () =>
-            | { min: Vector2; max: Vector2 }
-            | undefined
-    )();
-
-    if (!origin && (width || height) && !autosize) {
-        origin = vector2(0.5, 0.5);
-    }
-
-    let absolutePosition = $derived({
-        x: x - (origin?.x ?? 0.5) * (width ?? 0),
-        y: y - (origin?.y ?? 0.5) * (height ?? 0),
-    });
-
-    const nodeDef: DiagramNodeDef = $derived({
-        id,
-        x: absolutePosition.x,
-        y: absolutePosition.y,
-        width,
-        height,
-        clientOnly: clientOnly || autosize,
-        snippet: children,
-    });
-
-    let mounted = $state(false);
-    const previousEdgeIds = new Set();
-
-    // TODO: this should be done only if clientWidth is needed
-    let clientWidth: number = $state(0);
-    let clientHeight: number = $state(0);
-
-    // if (origin) {
-    // 	nodeDef.x -= (origin?.x ?? 0) * $state.snapshot(nodeDef.width ?? 0);
-    // 	nodeDef.y -= (origin?.y ?? 0) * $state.snapshot(nodeDef.height ?? 0);
-    // }
-
-    onMount(async () => {
-        if (autosize) {
-            width = clientWidth;
-            height = clientHeight;
-        }
-
-        if (nodeDef.clientOnly) {
-            await tick();
-            mounted = true;
-        }
-    });
-
-    function updateEdge(
-        param: IndividualConnectActionParam,
-        index: number = 0,
-    ) {
-        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({ source: selfId, target, index });
-            previousEdgeIds.add(edgeId);
-
-            edgeMap.set(edgeId, { source: nodeDef.id, target });
-        } 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 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);
-        }
-    }
-
-    if (connect) {
-        if (!Array.isArray(connect)) {
-            updateEdge(connect);
-        } else {
-            connect.forEach(updateEdge);
-        }
-    }
-
-    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);
-    });
-
-    // $inspect(
-    // 	'mounted render diagramNode',
-    // 	nodeDef.id,
-    // 	left,
-    // 	top,
-    // 	nodeDef.width,
-    // 	nodeDef.height,
-    // 	dimensions
-    // );
-</script>
-
-<div
-    class={className?.toString() || ""}
-    style={`position:absolute;
-${!origin ? "transform:translate(-50%, -50%)" : ""};
-top:${top}px;left:${left}px;${nodeDef.clientOnly && !mounted ? "opacity:0" : ""} ${inlineStyles || ""}`}
-    style:width={nodeDef.width ? nodeDef.width + "px" : "auto"}
-    style:height={nodeDef.height ? nodeDef.height + "px" : "auto"}
-    {...rest}
->
-    {#if autosize}
-        <div
-            class="nodal-autosize"
-            style="position:absolute;top:0;right:0;left:0;bottom:0;z-index:-50;"
-            bind:clientWidth
-            bind:clientHeight
-        ></div>
-    {/if}
-    {@render children?.()}
-</div>

package/dist/DiagramNode.svelte.d.ts

@@ -1,19 +0,0 @@
-import { type Snippet } from "svelte";
-import type { DiagramNodeDef, DiagramEdgeParams } from "./Diagram.svelte";
-import type { HTMLAttributes } from "svelte/elements";
-import { type Vector2 } from "./diagram-lib.js";
-type IndividualConnectActionParam = string | (DiagramEdgeParams & {
-    target: string;
-}) | (DiagramEdgeParams & {
-    source: string;
-});
-type DiagramNodeConnectParam = IndividualConnectActionParam | IndividualConnectActionParam[];
-export type DiagramNodeProps = {
-    children?: Snippet;
-    connect?: DiagramNodeConnectParam;
-    autosize?: boolean;
-    origin?: Vector2;
-} & 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,23 +0,0 @@
-<script lang="ts">
-    import { setContext } from "svelte";
-    import type { DiagramProps } from "./Diagram.svelte";
-    import { vector2 } from "./diagram-lib.js";
-
-    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);
-</script>
-
-<template>
-    {@render children()}
-</template>
-
-<svelte:boundary>
-    {@const _ = setContext("prerendering", false)}
-</svelte:boundary>

package/dist/PrerenderDiagram.svelte.d.ts

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