@sentropic/design-system-svelte 0.10.4 → 0.11.0

package/dist/ForceGraph.svelte

@@ -9,8 +9,12 @@
     | "star"
     | "hexagon"
     | "box" | "square"
+    | "roundedbox"
     | "triangle";
 
+  /** Stroke dash style for typed edges. */
+  export type ForceGraphEdgeDash = "solid" | "dashed" | "dotted" | "long-dash";
+
   export type ForceGraphNode = {
     /** Stable identifier; referenced by edges. */
     id: string;
@@ -45,8 +49,22 @@
     /**
      * When true the link renders as a dashed/faded "weak" link. Lets callers
      * map a confidence dimension onto link strength without extra props.
+     * Equivalent to `dash: "dashed"` plus a faded stroke (kept for back-compat).
      */
     weak?: boolean;
+    /**
+     * Typed dash pattern for the stroke. Independent of `weak`.
+     * "solid" = none, "dashed" = "6 4", "dotted" = "1 4", "long-dash" = "12 6".
+     * When omitted, falls back to the `weak` styling.
+     */
+    dash?: ForceGraphEdgeDash;
+    /**
+     * Emphasise the edge (e.g. a reconciliation/match relation) with a thicker,
+     * fully-opaque stroke. Defaults to false.
+     */
+    emphasis?: boolean;
+    /** Explicit stroke width override in px. Takes precedence over `emphasis`. */
+    width?: number;
   };
 
   export type ForceGraphLegendEntry = {
@@ -58,44 +76,108 @@
     tone?: ForceGraphTone;
     /** When true, renders as a dashed line (edge legend). */
     weak?: boolean;
+    /**
+     * Typed dash pattern for an edge legend swatch. Independent of `weak`.
+     * When set, the swatch line uses the matching dash-array.
+     */
+    dash?: ForceGraphEdgeDash;
   };
 
+  /**
+   * Maps a dash style (or the legacy `weak` flag) to an SVG stroke-dasharray.
+   * Returns null for a solid stroke.
+   */
+  export function edgeDashArray(
+    dash: ForceGraphEdgeDash | undefined,
+    weak?: boolean
+  ): string | null {
+    const effective: ForceGraphEdgeDash | undefined =
+      dash ?? (weak ? "dashed" : undefined);
+    switch (effective) {
+      case "dashed": return "6 4";
+      case "dotted": return "1 4";
+      case "long-dash": return "12 6";
+      case "solid":
+      default: return null;
+    }
+  }
+
   // ---------------------------------------------------------------------------
   // SVG path helpers for the various node shapes.
-  // All shapes are centered at (0,0) and sized to inscribe within radius r.
+  // All shapes are centered at (0,0). Each shape is scaled so its filled area
+  // matches that of the reference circle (π·r²) — this keeps equal-weight nodes
+  // visually balanced rather than letting squares/diamonds read as "bigger".
+  //
+  // Per-shape scale factors (closed-form, area = π·r²):
+  //   square / roundedbox : half-side  = (√π)/2 · r        ≈ 0.8862·r
+  //   diamond             : half-diag   = √(π/2) · r        ≈ 1.2533·r
+  //   triangle (equilat.) : circumradius= √(π/(3√3/4)) · r  ≈ 1.5551·r
+  //   hexagon (regular)   : circumradius= √(π/(3√3/2)) · r  ≈ 1.0996·r
+  //   star (5-pt, k=0.42) : outer radius= √(π/A₁) · r       ≈ 1.5953·r
+  //                          where A₁ is the unit-star area (≈1.2343).
   // ---------------------------------------------------------------------------
+  const STAR_INNER_RATIO = 0.42;
+  const STAR_AREA_FACTOR = 1.5953498885642274; // √(π / unit-star-area)
+
+  // Format a coordinate: 4 dp, snapping floating-point near-zero (e.g. 9e-16)
+  // to a clean 0 so paths never contain scientific notation.
+  function fmt(n: number): string {
+    const v = Math.abs(n) < 1e-9 ? 0 : n;
+    return Number(v.toFixed(4)).toString();
+  }
+
   export function nodeShapePath(shape: ForceGraphNodeShape | undefined, r: number): string | null {
     const s = shape ?? "dot";
     if (s === "dot" || s === "circle") return null; // use <circle>
     if (s === "diamond") {
-      return `M 0 ${-r} L ${r} 0 L 0 ${r} L ${-r} 0 Z`;
+      const d = Math.sqrt(Math.PI / 2) * r; // half-diagonal
+      return `M 0 ${fmt(-d)} L ${fmt(d)} 0 L 0 ${fmt(d)} L ${fmt(-d)} 0 Z`;
     }
     if (s === "star") {
-      const outer = r;
-      const inner = r * 0.42;
+      const outer = STAR_AREA_FACTOR * r;
+      const inner = outer * STAR_INNER_RATIO;
       const pts: string[] = [];
       for (let i = 0; i < 10; i++) {
         const angle = (i * Math.PI) / 5 - Math.PI / 2;
         const rad = i % 2 === 0 ? outer : inner;
-        pts.push(`${rad * Math.cos(angle)},${rad * Math.sin(angle)}`);
+        pts.push(`${fmt(rad * Math.cos(angle))},${fmt(rad * Math.sin(angle))}`);
       }
       return `M ${pts.join(" L ")} Z`;
     }
     if (s === "hexagon") {
+      const R = Math.sqrt(Math.PI / ((3 * Math.sqrt(3)) / 2)) * r; // circumradius
       const pts: string[] = [];
       for (let i = 0; i < 6; i++) {
         const angle = (i * Math.PI) / 3 - Math.PI / 6;
-        pts.push(`${r * Math.cos(angle)},${r * Math.sin(angle)}`);
+        pts.push(`${fmt(R * Math.cos(angle))},${fmt(R * Math.sin(angle))}`);
       }
       return `M ${pts.join(" L ")} Z`;
     }
     if (s === "box" || s === "square") {
-      const h = r * 0.85;
-      return `M ${-h} ${-h} L ${h} ${-h} L ${h} ${h} L ${-h} ${h} Z`;
+      const h = (Math.sqrt(Math.PI) / 2) * r; // half-side, area = (2h)² = π·r²
+      return `M ${fmt(-h)} ${fmt(-h)} L ${fmt(h)} ${fmt(-h)} L ${fmt(h)} ${fmt(h)} L ${fmt(-h)} ${fmt(h)} Z`;
+    }
+    if (s === "roundedbox") {
+      const h = (Math.sqrt(Math.PI) / 2) * r; // same footprint as square
+      const rx = h * 0.6; // ≈ r·0.3 rounding radius (h ≈ 0.886·r)
+      // Rounded rectangle via arcs, clockwise from top edge.
+      return (
+        `M ${fmt(-h + rx)} ${fmt(-h)} ` +
+        `L ${fmt(h - rx)} ${fmt(-h)} A ${fmt(rx)} ${fmt(rx)} 0 0 1 ${fmt(h)} ${fmt(-h + rx)} ` +
+        `L ${fmt(h)} ${fmt(h - rx)} A ${fmt(rx)} ${fmt(rx)} 0 0 1 ${fmt(h - rx)} ${fmt(h)} ` +
+        `L ${fmt(-h + rx)} ${fmt(h)} A ${fmt(rx)} ${fmt(rx)} 0 0 1 ${fmt(-h)} ${fmt(h - rx)} ` +
+        `L ${fmt(-h)} ${fmt(-h + rx)} A ${fmt(rx)} ${fmt(rx)} 0 0 1 ${fmt(-h + rx)} ${fmt(-h)} Z`
+      );
     }
     if (s === "triangle") {
-      const h = r * 1.1;
-      return `M 0 ${-h} L ${h * 0.9} ${h * 0.6} L ${-h * 0.9} ${h * 0.6} Z`;
+      // Equilateral, centred at centroid; circumradius h so apex is up.
+      const h = Math.sqrt(Math.PI / ((3 * Math.sqrt(3)) / 4)) * r;
+      const pts: string[] = [];
+      for (let i = 0; i < 3; i++) {
+        const angle = (i * 2 * Math.PI) / 3 - Math.PI / 2;
+        pts.push(`${fmt(h * Math.cos(angle))},${fmt(h * Math.sin(angle))}`);
+      }
+      return `M ${pts.join(" L ")} Z`;
     }
     return null;
   }
@@ -149,6 +231,12 @@
      * Each entry has a label + optional shape (node) or weak (edge).
      */
     legend?: ForceGraphLegendEntry[];
+    /**
+     * Edge curvature, 0..1. 0 = straight <line> (back-compat). Larger values
+     * bow each edge into a quadratic <path>, offset perpendicular to the chord
+     * by `edgeCurve * dist * factor`. Defaults to a light 0.15.
+     */
+    edgeCurve?: number;
     class?: string;
   };
 
@@ -167,6 +255,7 @@
     onOpenEntity,
     onEdgeHover,
     legend,
+    edgeCurve = 0.15,
     class: className
   }: ForceGraphProps = $props();
 
@@ -305,9 +394,14 @@
         }
         node.x += node.vx;
         node.y += node.vy;
-        // Keep inside a padded viewport.
-        node.x = Math.max(nodeRadius * 2, Math.min(w - nodeRadius * 2, node.x));
-        node.y = Math.max(nodeRadius * 2, Math.min(h - nodeRadius * 2, node.y));
+        // Soft clamp: allow the layout to overflow the canvas so it keeps a
+        // natural shape (fit-to-content reframes it afterwards). The wide bound
+        // only guards against runaway coordinates, it no longer glues nodes to
+        // the four edges.
+        const padX = w * 0.5 + nodeRadius * 2;
+        const padY = h * 0.5 + nodeRadius * 2;
+        node.x = Math.max(-padX, Math.min(w + padX, node.x));
+        node.y = Math.max(-padY, Math.min(h + padY, node.y));
       }
       temperature *= cooling;
     }
@@ -353,8 +447,45 @@
     })
   );
 
+  // Curvature offset factor: how far (relative to chord length) the control
+  // point bows out at edgeCurve=1. Kept modest so edgeCurve≈0.15 reads "light".
+  const CURVE_FACTOR = 0.5;
+
+  // ---------------------------------------------------------------------------
+  // Fit-to-content (Feature 5): after warmup the layout may extend beyond the
+  // nominal width/height. Compute the real content bounding-box (node centres
+  // ± radius) and frame it with an 8% margin on each side. The base viewBox is
+  // this frame (not the fixed 0,0,w,h), so the graph is centred and never
+  // clipped, whatever the aspect ratio. Zoom/pan stay relative to this frame.
+  // ---------------------------------------------------------------------------
+  const CONTENT_MARGIN = 0.08;
+  const contentBox = $derived.by(() => {
+    if (positionedNodes.length === 0) {
+      return { x: 0, y: 0, w: width, h: height };
+    }
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const p of positionedNodes) {
+      // Use the worst-case extent for non-circular shapes (area-scaled) so the
+      // glyph (and a little label room) is never clipped.
+      const ext = p.r * 1.7;
+      minX = Math.min(minX, p.x - ext);
+      minY = Math.min(minY, p.y - ext);
+      maxX = Math.max(maxX, p.x + ext);
+      maxY = Math.max(maxY, p.y + ext);
+    }
+    let w = maxX - minX;
+    let h = maxY - minY;
+    // Guard against a degenerate (single node / collinear) box.
+    if (!(w > 0)) { w = width; minX = maxX - w / 2; }
+    if (!(h > 0)) { h = height; minY = maxY - h / 2; }
+    const mx = w * CONTENT_MARGIN;
+    const my = h * CONTENT_MARGIN;
+    return { x: minX - mx, y: minY - my, w: w + 2 * mx, h: h + 2 * my };
+  });
+
   const positionedEdges = $derived.by(() => {
     const nodeById = new Map(nodes.map((n) => [n.id, n]));
+    const curve = Math.max(0, edgeCurve ?? 0);
     return edges
       .map((e, i) => {
         const a = layout.get(e.source);
@@ -362,13 +493,36 @@
         if (!a || !b) return null;
         const srcNode = nodeById.get(e.source);
         const tgtNode = nodeById.get(e.target);
+        const x1 = a.x, y1 = a.y, x2 = b.x, y2 = b.y;
+        // Quadratic control point: midpoint pushed perpendicular to the chord.
+        let path: string | null = null;
+        let cx = (x1 + x2) / 2;
+        let cy = (y1 + y2) / 2;
+        if (curve > 0) {
+          const dx = x2 - x1;
+          const dy = y2 - y1;
+          const dist = Math.sqrt(dx * dx + dy * dy) || 0.0001;
+          const off = curve * dist * CURVE_FACTOR;
+          // Unit perpendicular to the chord.
+          const px = -dy / dist;
+          const py = dx / dist;
+          cx = (x1 + x2) / 2 + px * off;
+          cy = (y1 + y2) / 2 + py * off;
+          path = `M ${x1} ${y1} Q ${cx} ${cy} ${x2} ${y2}`;
+        }
+        const dashArray = edgeDashArray(e.dash, e.weak);
+        const strokeWidth =
+          typeof e.width === "number" ? e.width : e.emphasis ? 2.5 : null;
         return {
           edge: e,
           i,
-          x1: a.x,
-          y1: a.y,
-          x2: b.x,
-          y2: b.y,
+          x1, y1, x2, y2,
+          // Tooltip / label anchor follows the curve apex when curved.
+          midX: cx,
+          midY: cy,
+          path,
+          dashArray,
+          strokeWidth,
           srcLabel: srcNode?.label ?? e.source,
           tgtLabel: tgtNode?.label ?? e.target
         };
@@ -383,6 +537,53 @@
   // never when nodes/edges change.
   const selectedSet = $derived(new Set<string>(selectedIds));
 
+  // Adjacency: id -> set of directly connected node ids. Used to keep the
+  // direct neighbours of selected/focused nodes fully visible (demand 6).
+  const adjacency = $derived.by(() => {
+    const adj = new Map<string, Set<string>>();
+    const add = (a: string, b: string) => {
+      let set = adj.get(a);
+      if (!set) { set = new Set(); adj.set(a, set); }
+      set.add(b);
+    };
+    for (const e of edges) {
+      add(e.source, e.target);
+      add(e.target, e.source);
+    }
+    return adj;
+  });
+
+  // True when a selection/focus is active — only then do we dim non-related
+  // nodes. The set of "active" ids = selected ∪ focus ∪ all their neighbours.
+  const hasActiveSelection = $derived(selectedSet.size > 0 || focusId != null);
+  const activeAndNeighbours = $derived.by(() => {
+    const active = new Set<string>(selectedSet);
+    if (focusId != null) active.add(focusId);
+    // Expand to direct neighbours so they stay fully visible.
+    const withNeighbours = new Set<string>(active);
+    for (const id of active) {
+      const nb = adjacency.get(id);
+      if (nb) for (const n of nb) withNeighbours.add(n);
+    }
+    return withNeighbours;
+  });
+
+  // A node is dimmed by selection when there IS an active selection and the
+  // node is neither selected/focused nor a direct neighbour of one.
+  function isSelectionDimmed(id: string): boolean {
+    if (!hasActiveSelection) return false;
+    return !activeAndNeighbours.has(id);
+  }
+
+  // An edge stays fully visible when at least one endpoint is in the
+  // selected/focused set (it is a connection of the selection).
+  function isEdgeSelectionDimmed(e: ForceGraphEdge): boolean {
+    if (!hasActiveSelection) return false;
+    const srcActive = selectedSet.has(e.source) || focusId === e.source;
+    const tgtActive = selectedSet.has(e.target) || focusId === e.target;
+    return !(srcActive || tgtActive);
+  }
+
   // Keyboard handler for a node circle: Space/Enter → onSelect, Enter → onOpenEntity.
   function handleNodeKeydown(id: string, e: KeyboardEvent) {
     if (e.key === "Enter" || e.key === " ") {
@@ -395,11 +596,11 @@
   }
 
   // ---------------------------------------------------------------------------
-  // Zoom + pan state (Feature 2)
-  // Store zoom as a scale multiplier + pan offset so syncing with width/height
-  // props is trivial (no stale-capture warnings).
-  //   vbW = width / zoomScale,  vbH = height / zoomScale
-  //   vbX / vbY = pan offset in SVG coordinate space
+  // Zoom + pan state (Feature 2), framed by the fit-to-content box (Feature 5).
+  // The base frame is `contentBox` (not 0,0,w,h). Zoom is a scale multiplier and
+  // pan is an offset in SVG coords, both relative to that base frame:
+  //   vbW = baseW / zoomScale,  vbH = baseH / zoomScale
+  //   vbX = baseX + panX,       vbY = baseY + panY
   // ---------------------------------------------------------------------------
   let zoomScale = $state(1);
   let panX = $state(0);
@@ -409,11 +610,17 @@
   let panStart = $state({ x: 0, y: 0, panX: 0, panY: 0 });
   let svgEl: SVGSVGElement | null = $state(null);
 
-  // Derived viewBox dimensions always reflect current props + zoom.
-  const vbW = $derived(width / zoomScale);
-  const vbH = $derived(height / zoomScale);
-  const vbX = $derived(panX);
-  const vbY = $derived(panY);
+  // Base frame dimensions = fit-to-content box.
+  const baseW = $derived(contentBox.w);
+  const baseH = $derived(contentBox.h);
+  const baseX = $derived(contentBox.x);
+  const baseY = $derived(contentBox.y);
+
+  // Derived viewBox dimensions reflect the content frame + zoom/pan.
+  const vbW = $derived(baseW / zoomScale);
+  const vbH = $derived(baseH / zoomScale);
+  const vbX = $derived(baseX + panX);
+  const vbY = $derived(baseY + panY);
 
   function resetView() {
     zoomScale = 1;
@@ -431,14 +638,17 @@
     // Anchor zoom around the cursor position in SVG coords.
     if (svgEl) {
       const rect = svgEl.getBoundingClientRect();
-      const cursorSvgX = panX + ((ev.clientX - rect.left) / rect.width) * (width / zoomScale);
-      const cursorSvgY = panY + ((ev.clientY - rect.top) / rect.height) * (height / zoomScale);
-      const newVbW = width / newScale;
-      const newVbH = height / newScale;
-      const ratioX = (cursorSvgX - panX) / (width / zoomScale);
-      const ratioY = (cursorSvgY - panY) / (height / zoomScale);
-      panX = cursorSvgX - ratioX * newVbW;
-      panY = cursorSvgY - ratioY * newVbH;
+      const curW = baseW / zoomScale;
+      const curH = baseH / zoomScale;
+      const cursorSvgX = vbX + ((ev.clientX - rect.left) / rect.width) * curW;
+      const cursorSvgY = vbY + ((ev.clientY - rect.top) / rect.height) * curH;
+      const newVbW = baseW / newScale;
+      const newVbH = baseH / newScale;
+      const ratioX = (cursorSvgX - vbX) / curW;
+      const ratioY = (cursorSvgY - vbY) / curH;
+      // New top-left so the cursor anchor stays put, then back out the pan term.
+      panX = cursorSvgX - ratioX * newVbW - baseX;
+      panY = cursorSvgY - ratioY * newVbH - baseY;
     }
     zoomScale = newScale;
   }
@@ -496,27 +706,57 @@
     <!-- edges first so nodes paint on top -->
     <g class="st-forceGraph__edges">
       {#each positionedEdges as e (e.i)}
-        <!-- Invisible wider hit area for edge hover -->
-        <line
-          class="st-forceGraph__edgeHit"
-          role="presentation"
-          x1={e.x1}
-          y1={e.y1}
-          x2={e.x2}
-          y2={e.y2}
-          onmouseenter={() => { hoveredEdgeIndex = e.i; onEdgeHover?.(e.edge); }}
-          onmouseleave={() => { hoveredEdgeIndex = null; }}
-        />
-        <line
-          class="st-forceGraph__edge"
-          class:st-forceGraph__edge--weak={e.edge.weak}
-          class:st-forceGraph__edge--hovered={hoveredEdgeIndex === e.i}
-          x1={e.x1}
-          y1={e.y1}
-          x2={e.x2}
-          y2={e.y2}
-          pointer-events="none"
-        />
+        <!-- Invisible wider hit area for edge hover (follows the curve) -->
+        {#if e.path}
+          <path
+            class="st-forceGraph__edgeHit"
+            role="presentation"
+            d={e.path}
+            fill="none"
+            onmouseenter={() => { hoveredEdgeIndex = e.i; onEdgeHover?.(e.edge); }}
+            onmouseleave={() => { hoveredEdgeIndex = null; }}
+          />
+        {:else}
+          <line
+            class="st-forceGraph__edgeHit"
+            role="presentation"
+            x1={e.x1}
+            y1={e.y1}
+            x2={e.x2}
+            y2={e.y2}
+            onmouseenter={() => { hoveredEdgeIndex = e.i; onEdgeHover?.(e.edge); }}
+            onmouseleave={() => { hoveredEdgeIndex = null; }}
+          />
+        {/if}
+        {#if e.path}
+          <path
+            class="st-forceGraph__edge"
+            class:st-forceGraph__edge--weak={e.edge.weak}
+            class:st-forceGraph__edge--emphasis={e.edge.emphasis}
+            class:st-forceGraph__edge--hovered={hoveredEdgeIndex === e.i}
+            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge)}
+            d={e.path}
+            fill="none"
+            stroke-dasharray={e.dashArray}
+            stroke-width={e.strokeWidth}
+            pointer-events="none"
+          />
+        {:else}
+          <line
+            class="st-forceGraph__edge"
+            class:st-forceGraph__edge--weak={e.edge.weak}
+            class:st-forceGraph__edge--emphasis={e.edge.emphasis}
+            class:st-forceGraph__edge--hovered={hoveredEdgeIndex === e.i}
+            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge)}
+            x1={e.x1}
+            y1={e.y1}
+            x2={e.x2}
+            y2={e.y2}
+            stroke-dasharray={e.dashArray}
+            stroke-width={e.strokeWidth}
+            pointer-events="none"
+          />
+        {/if}
       {/each}
     </g>
 
@@ -524,7 +764,7 @@
       {#each positionedNodes as p (p.node.id)}
         <g
           class="st-forceGraph__node st-forceGraph__node--{p.tone}"
-          class:st-forceGraph__node--dim={hoveredNodeIndex !== null && hoveredNodeIndex !== p.i}
+          class:st-forceGraph__node--dim={(hoveredNodeIndex !== null && hoveredNodeIndex !== p.i) || isSelectionDimmed(p.node.id)}
           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})"
@@ -595,12 +835,10 @@
   {#if hoveredEdgeIndex !== null}
     {@const e = positionedEdges.find((pe) => pe.i === hoveredEdgeIndex)}
     {#if e}
-      {@const midX = (e.x1 + e.x2) / 2}
-      {@const midY = (e.y1 + e.y2) / 2}
       <div
         class="st-forceGraph__tooltip st-forceGraph__tooltip--edge"
         role="presentation"
-        style="left: {((midX - vbX) / vbW) * 100}%; top: {((midY - vbY) / vbH) * 100}%"
+        style="left: {((e.midX - vbX) / vbW) * 100}%; top: {((e.midY - vbY) / vbH) * 100}%"
       >
         <span class="st-forceGraph__tooltipLabel">{e.srcLabel}</span>
         {#if e.edge.relation}
@@ -629,12 +867,13 @@
       {#each legend as entry}
         {@const swatchPath = entry.shape !== undefined ? nodeShapePath(entry.shape, 7) : null}
         {@const swatchTone = entry.tone ?? "category1"}
+        {@const swatchDash = entry.shape === undefined ? edgeDashArray(entry.dash, entry.weak) : null}
         <div class="st-forceGraph__legendEntry">
           {#if entry.shape !== undefined}
-            <!-- Node shape legend entry -->
+            <!-- Node shape legend entry (viewBox widened for area-scaled glyphs) -->
             <svg
               class="st-forceGraph__legendSwatch"
-              viewBox="-8 -8 16 16"
+              viewBox="-13 -13 26 26"
               width="16"
               height="16"
               aria-hidden="true"
@@ -667,6 +906,7 @@
                 y2="4"
                 class="st-forceGraph__legendEdge"
                 class:st-forceGraph__legendEdge--weak={entry.weak}
+                stroke-dasharray={swatchDash}
               />
             </svg>
           {/if}
@@ -699,15 +939,27 @@
 
   .st-forceGraph__edge--weak {
     stroke: var(--st-semantic-border-subtle);
-    stroke-dasharray: 3 3;
     opacity: 0.5;
   }
 
+  /* Emphasised edge (e.g. reconciliation match): thicker, fully opaque, on top. */
+  .st-forceGraph__edge--emphasis {
+    stroke: var(--st-semantic-border-interactive, var(--st-semantic-border-strong));
+    opacity: 0.95;
+  }
+
+  /* Hover: match the node hover (fully visible) so the edge is never paler
+     than the two nodes it connects. */
   .st-forceGraph__edge--hovered {
-    opacity: 0.9;
+    opacity: 1;
     stroke-width: 2;
   }
 
+  /* Dimmed by an active selection (edge touches no selected/focused node). */
+  .st-forceGraph__edge--dim {
+    opacity: 0.12;
+  }
+
   /* Invisible wide hit target for edge hover */
   .st-forceGraph__edgeHit {
     stroke: transparent;

package/dist/ForceGraph.svelte.d.ts

@@ -1,5 +1,7 @@
 export type ForceGraphTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
-export type ForceGraphNodeShape = "dot" | "circle" | "diamond" | "star" | "hexagon" | "box" | "square" | "triangle";
+export type ForceGraphNodeShape = "dot" | "circle" | "diamond" | "star" | "hexagon" | "box" | "square" | "roundedbox" | "triangle";
+/** Stroke dash style for typed edges. */
+export type ForceGraphEdgeDash = "solid" | "dashed" | "dotted" | "long-dash";
 export type ForceGraphNode = {
     /** Stable identifier; referenced by edges. */
     id: string;
@@ -33,8 +35,22 @@ export type ForceGraphEdge = {
     /**
      * When true the link renders as a dashed/faded "weak" link. Lets callers
      * map a confidence dimension onto link strength without extra props.
+     * Equivalent to `dash: "dashed"` plus a faded stroke (kept for back-compat).
      */
     weak?: boolean;
+    /**
+     * Typed dash pattern for the stroke. Independent of `weak`.
+     * "solid" = none, "dashed" = "6 4", "dotted" = "1 4", "long-dash" = "12 6".
+     * When omitted, falls back to the `weak` styling.
+     */
+    dash?: ForceGraphEdgeDash;
+    /**
+     * Emphasise the edge (e.g. a reconciliation/match relation) with a thicker,
+     * fully-opaque stroke. Defaults to false.
+     */
+    emphasis?: boolean;
+    /** Explicit stroke width override in px. Takes precedence over `emphasis`. */
+    width?: number;
 };
 export type ForceGraphLegendEntry = {
     /** Label shown in the legend. */
@@ -45,7 +61,17 @@ export type ForceGraphLegendEntry = {
     tone?: ForceGraphTone;
     /** When true, renders as a dashed line (edge legend). */
     weak?: boolean;
+    /**
+     * Typed dash pattern for an edge legend swatch. Independent of `weak`.
+     * When set, the swatch line uses the matching dash-array.
+     */
+    dash?: ForceGraphEdgeDash;
 };
+/**
+ * Maps a dash style (or the legacy `weak` flag) to an SVG stroke-dasharray.
+ * Returns null for a solid stroke.
+ */
+export declare function edgeDashArray(dash: ForceGraphEdgeDash | undefined, weak?: boolean): string | null;
 export declare function nodeShapePath(shape: ForceGraphNodeShape | undefined, r: number): string | null;
 type ForceGraphProps = {
     nodes: ForceGraphNode[];
@@ -94,6 +120,12 @@ type ForceGraphProps = {
      * Each entry has a label + optional shape (node) or weak (edge).
      */
     legend?: ForceGraphLegendEntry[];
+    /**
+     * Edge curvature, 0..1. 0 = straight <line> (back-compat). Larger values
+     * bow each edge into a quadratic <path>, offset perpendicular to the chord
+     * by `edgeCurve * dist * factor`. Defaults to a light 0.15.
+     */
+    edgeCurve?: number;
     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,mBAAmB,GAC3B,KAAK,GAAG,QAAQ,GAChB,SAAS,GACT,MAAM,GACN,SAAS,GACT,KAAK,GAAG,QAAQ,GAChB,UAAU,CAAC;AAEf,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;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC7B,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,MAAM,MAAM,qBAAqB,GAAG;IAClC,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,kDAAkD;IAClD,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAMF,wBAAgB,aAAa,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkC9F;AAED,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;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4aJ,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":"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"}

package/dist/GraphLegend.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
   // Re-export types so GraphLegend can be used standalone without importing from ForceGraph.
-  export type { ForceGraphLegendEntry, ForceGraphNodeShape, ForceGraphTone } from "./ForceGraph.svelte";
+  export type { ForceGraphLegendEntry, ForceGraphNodeShape, ForceGraphTone, ForceGraphEdgeDash } from "./ForceGraph.svelte";
 </script>
 
 <script lang="ts">
-  import { nodeShapePath } from "./ForceGraph.svelte";
+  import { nodeShapePath, edgeDashArray } from "./ForceGraph.svelte";
   import type { ForceGraphLegendEntry } from "./ForceGraph.svelte";
 
   type GraphLegendProps = {
@@ -28,11 +28,12 @@
     {#each entries as entry}
       {@const swatchPath = entry.shape !== undefined ? nodeShapePath(entry.shape, 7) : null}
       {@const swatchTone = entry.tone ?? "category1"}
+      {@const swatchDash = entry.shape === undefined ? edgeDashArray(entry.dash, entry.weak) : null}
       <li class="st-graphLegend__entry">
         {#if entry.shape !== undefined}
           <svg
             class="st-graphLegend__swatch"
-            viewBox="-8 -8 16 16"
+            viewBox="-13 -13 26 26"
             width="16"
             height="16"
             aria-hidden="true"
@@ -64,6 +65,7 @@
               y2="4"
               class="st-graphLegend__edge"
               class:st-graphLegend__edge--weak={entry.weak}
+              stroke-dasharray={swatchDash}
             />
           </svg>
         {/if}
@@ -136,7 +138,6 @@
 
   .st-graphLegend__edge--weak {
     stroke: var(--st-semantic-border-subtle, #aaa);
-    stroke-dasharray: 3 3;
     opacity: 0.65;
   }
 </style>