@sentropic/design-system-svelte 0.10.2 → 0.10.3

package/dist/ForceGraph.svelte

@@ -54,6 +54,27 @@
      * animates the remainder unless reduced motion is requested.
      */
     iterations?: number;
+    /**
+     * IDs of currently selected nodes. Highlighted visually without
+     * re-running the layout. Defaults to [].
+     */
+    selectedIds?: string[];
+    /**
+     * ID of the node to focus/centre visually (ring highlight). Does not
+     * re-run the layout. Defaults to null.
+     */
+    focusId?: string | null;
+    /**
+     * Called when the user clicks (or presses Space/Enter) a node.
+     * Fires with the node's stable id.
+     */
+    onSelect?: (id: string) => void;
+    /**
+     * Called when the user activates a node (double-click or Enter key while
+     * keyboard-focused). Intended to open a detail panel.
+     * Fires with the node's stable id.
+     */
+    onOpenEntity?: (id: string) => void;
     class?: string;
   };
 
@@ -66,6 +87,10 @@
     nodeRadius = 7,
     showLabels = true,
     iterations = 300,
+    selectedIds = [],
+    focusId = null,
+    onSelect,
+    onOpenEntity,
     class: className
   }: ForceGraphProps = $props();
 
@@ -262,6 +287,21 @@
 
   let hoveredIndex: number | null = $state(null);
 
+  // Fast lookup sets — recomputed only when selectedIds/focusId props change,
+  // never when nodes/edges change.
+  const selectedSet = $derived(new Set<string>(selectedIds));
+
+  // Keyboard handler for a node circle: Space/Enter → onSelect, Enter → onOpenEntity.
+  function handleNodeKeydown(id: string, e: KeyboardEvent) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect?.(id);
+    }
+    if (e.key === "Enter") {
+      onOpenEntity?.(id);
+    }
+  }
+
   const classes = () =>
     ["st-forceGraph", prefersReducedMotion ? "st-forceGraph--static" : null, className]
       .filter(Boolean)
@@ -296,18 +336,24 @@
         <g
           class="st-forceGraph__node st-forceGraph__node--{p.tone}"
           class:st-forceGraph__node--dim={hoveredIndex !== null && hoveredIndex !== p.i}
+          class:st-forceGraph__node--selected={selectedSet.has(p.node.id)}
+          class:st-forceGraph__node--focus={focusId === p.node.id}
           transform="translate({p.x} {p.y})"
         >
           <circle
             class="st-forceGraph__dot"
             r={p.r}
             tabindex="0"
-            role="img"
+            role="button"
             aria-label="{p.title}{p.node.group !== undefined ? ` — ${p.node.group}` : ''}"
+            aria-pressed={selectedSet.has(p.node.id)}
             onmouseenter={() => (hoveredIndex = p.i)}
             onmouseleave={() => (hoveredIndex = null)}
             onfocus={() => (hoveredIndex = p.i)}
             onblur={() => (hoveredIndex = null)}
+            onclick={() => onSelect?.(p.node.id)}
+            ondblclick={() => onOpenEntity?.(p.node.id)}
+            onkeydown={(e) => handleNodeKeydown(p.node.id, e)}
           />
           {#if showLabels}
             <text class="st-forceGraph__label" x={p.r + 3} y="0" dominant-baseline="middle">{p.title}</text>
@@ -380,6 +426,21 @@
     outline-offset: 1px;
   }
 
+  /* Selection highlight: slightly thicker stroke ring, full opacity. */
+  .st-forceGraph__node--selected .st-forceGraph__dot {
+    fill-opacity: 1;
+    stroke: var(--st-semantic-border-interactive, #0f62fe);
+    stroke-width: 2.5;
+  }
+
+  /* Focus (keyboard/programmatic focus): stronger ring + slight scale. */
+  .st-forceGraph__node--focus .st-forceGraph__dot {
+    fill-opacity: 1;
+    stroke: var(--st-semantic-border-interactive, #0f62fe);
+    stroke-width: 3.5;
+    filter: drop-shadow(0 0 4px var(--st-semantic-border-interactive, #0f62fe));
+  }
+
   .st-forceGraph__label {
     fill: var(--st-semantic-text-secondary);
     font-size: 0.6875rem;

package/dist/ForceGraph.svelte.d.ts

@@ -46,6 +46,27 @@ type ForceGraphProps = {
      * animates the remainder unless reduced motion is requested.
      */
     iterations?: number;
+    /**
+     * IDs of currently selected nodes. Highlighted visually without
+     * re-running the layout. Defaults to [].
+     */
+    selectedIds?: string[];
+    /**
+     * ID of the node to focus/centre visually (ring highlight). Does not
+     * re-run the layout. Defaults to null.
+     */
+    focusId?: string | null;
+    /**
+     * Called when the user clicks (or presses Space/Enter) a node.
+     * Fires with the node's stable id.
+     */
+    onSelect?: (id: string) => void;
+    /**
+     * Called when the user activates a node (double-click or Enter key while
+     * keyboard-focused). Intended to open a detail panel.
+     * Fires with the node's stable id.
+     */
+    onOpenEntity?: (id: string) => void;
     class?: string;
 };
 declare const ForceGraph: import("svelte").Component<ForceGraphProps, {}, "">;

package/dist/ForceGraph.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ForceGraph.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ForceGraph.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,cAAc,GACtB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG;IAC3B,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gEAAgE;IAChE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoQJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ForceGraph.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ForceGraph.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,cAAc,GACtB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG;IAC3B,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gEAAgE;IAChE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuRJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-svelte",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -27,7 +27,7 @@
   ],
   "dependencies": {
     "@lucide/svelte": "^0.562.0",
-    "@sentropic/design-system-themes": "0.10.2"
+    "@sentropic/design-system-themes": "0.10.3"
   },
   "peerDependencies": {
     "svelte": "^5.53.2"