@cnvx/nodal 0.1.3 → 0.1.4

package/dist/Diagram.svelte

@@ -14,6 +14,7 @@
         browser,
         dev,
     } from "./diagram-lib.js";
+    import type { HTMLAttributes } from "svelte/elements";
 
     export interface DiagramNodeDef {
         id: string;
@@ -61,6 +62,7 @@
         edges: SvelteMap<string, DiagramEdgeDef>;
         children: Snippet;
         scaleToFit?: boolean;
+        figureAttributes: HTMLAttributes<HTMLElement>;
     };
 
     // const getNodeOrigin = (node: DiagramNode) => node.origin ?? vector2(0.0, 0.5);
@@ -74,7 +76,8 @@
 </script>
 
 <script lang="ts">
-    let { nodes, edges, children, scaleToFit }: DiagramProps = $props();
+    let { nodes, edges, children, scaleToFit, figureAttributes }: DiagramProps =
+        $props();
     export function generateCurvePath(
         x1: number,
         y1: number,
@@ -95,7 +98,7 @@
             return normaliseAngle(raw);
         }
 
-        // CRUCIAL TO INVEST THE Y DIRECTION SINCE IT GOES FROM
+        // 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;
@@ -293,6 +296,7 @@
     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;"
 >

package/dist/Diagram.svelte.d.ts

@@ -1,6 +1,7 @@
 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;
@@ -36,6 +37,7 @@ export type DiagramProps = {
     edges: SvelteMap<string, DiagramEdgeDef>;
     children: Snippet;
     scaleToFit?: boolean;
+    figureAttributes: HTMLAttributes<HTMLElement>;
 };
 declare const Diagram: import("svelte").Component<DiagramProps, {
     generateCurvePath: (x1: number, y1: number, x2: number, y2: number, edge: DiagramEdgeDef) => string;

package/dist/DiagramController.svelte

@@ -20,12 +20,14 @@
         eagerLoad = false,
         scaleToFit = false,
         rootMargin = "100px", // start a bit before it enters the viewport
+        figureAttributes = { inert: true, "aria-hidden": true },
         ...rest
     }: {
         children: Snippet;
         eagerLoad?: boolean;
         scaleToFit?: boolean;
         rootMargin?: string;
+        figureAttributes: HTMLAttributes<HTMLElement>;
     } & HTMLAttributes<HTMLDivElement> = $props();
 
     const nodes = new SvelteMap<string, DiagramNodeDef>();
@@ -87,11 +89,11 @@
 
 {#if shouldRender}
     <!-- first pass: register all the nodes and edges -->
-    <PrerenderDiagram {nodes} {edges} {children} />
+    <PrerenderDiagram {nodes} {edges} {children} {figureAttributes} />
 
     <!-- second pass: render with computed positions -->
     <div {...rest}>
-        <Diagram {nodes} {edges} {scaleToFit}>
+        <Diagram {nodes} {edges} {scaleToFit} {figureAttributes}>
             {@render children()}
         </Diagram>
     </div>

package/dist/DiagramController.svelte.d.ts

@@ -5,6 +5,7 @@ type $$ComponentProps = {
     eagerLoad?: boolean;
     scaleToFit?: boolean;
     rootMargin?: string;
+    figureAttributes: HTMLAttributes<HTMLElement>;
 } & HTMLAttributes<HTMLDivElement>;
 declare const DiagramController: import("svelte").Component<$$ComponentProps, {}, "">;
 type DiagramController = ReturnType<typeof DiagramController>;

package/package.json

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