@cnvx/nodal 0.2.0 → 0.2.2

package/dist/Diagram.svelte

@@ -197,9 +197,11 @@
         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;
@@ -369,5 +371,7 @@
         </svg>
     {/each}
 
-    {@render children()}
+    {#key dimensions}
+        {@render children()}
+    {/key}
 </figure>

package/dist/DiagramController.svelte

@@ -4,28 +4,11 @@
         type DiagramNodeDef,
         type DiagramEdgeDef,
     } from "./Diagram.svelte";
-    import {
-        createRawSnippet,
-        flushSync,
-        onMount,
-        setContext,
-        type Snippet,
-    } from "svelte";
+    import { 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,
-        eagerLoad = false,
-        scaleToFit,
-        width,
-        height,
-        rootMargin = "100px", // start a bit before it enters the viewport
-        figureAttributes = { inert: true, "aria-hidden": true },
-        ...rest
-    }: ({
-        children: Snippet;
+    type PassthroughDiagramControllerProps = ({
         eagerLoad?: boolean;
         rootMargin?: string;
         figureAttributes?: HTMLAttributes<HTMLElement>;
@@ -41,14 +24,25 @@
               height: number;
           }
     )) &
-        Omit<HTMLAttributes<HTMLDivElement>, "width" | "height"> = $props();
+        Omit<HTMLAttributes<HTMLDivElement>, "width" | "height">;
+
+    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;
+    let containerEl: HTMLDivElement | undefined = $state();
 
     // If we're SSR (not browser), or eagerLoad is false, render immediately.
     // Otherwise wait until after load + idle + intersection.

package/dist/DiagramController.svelte.d.ts

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

package/package.json

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