fix(blog-ui): make MindMap + UseCaseDiagram edges easy to hover

packages/blog-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omars-lab/blog-ui",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Reusable React components for design/blog posts: animated UX Walkthrough, Mockup frame, Gif animated-media figure, DiagramWithFootnotes, Assumption highlight, and the question-set set (SectionBanner, Question card+modal with power badges, PowerLegend).",
   "license": "MIT",
   "repository": {

packages/blog-ui/src/components/MindMap/index.tsx

@@ -92,18 +92,30 @@ const MindMap: React.FC<MindMapProps> = ({
 
           <g className={styles.connectorsG}>
             {connectors.map((c, i) => (
-              <path
-                key={i}
-                d={c.path}
-                className={styles.connector}
-                style={
-                  {
-                    strokeWidth: connectorStrokeWidth(c.depth),
-                    '--i': i,
-                  } as CSSProperties
-                }
-                fill="none"
-              />
+              <g key={i} className={styles.connectorG}>
+                {/* Wide, invisible hit-area so the thin connector is easy to
+                    hover: an SVG stroke only receives pointer events on its
+                    visible width. This transparent path sits under the visible
+                    one; hovering anywhere on the group highlights the line. The
+                    linked nodes render AFTER (on top), so they stay clickable. */}
+                <path
+                  d={c.path}
+                  className={styles.connectorHit}
+                  fill="none"
+                  aria-hidden="true"
+                />
+                <path
+                  d={c.path}
+                  className={styles.connector}
+                  style={
+                    {
+                      strokeWidth: connectorStrokeWidth(c.depth),
+                      '--i': i,
+                    } as CSSProperties
+                  }
+                  fill="none"
+                />
+              </g>
             ))}
           </g>
 

packages/blog-ui/src/components/MindMap/styles.module.css

@@ -75,6 +75,25 @@ html[data-theme='dark'] .themeBlog {
   stroke: var(--bopmind-connector);
   fill: none;
   stroke-linecap: round;
+  transition: stroke var(--duration-fast, 0.12s) var(--ease-standard, ease),
+    stroke-width var(--duration-fast, 0.12s) var(--ease-standard, ease);
+}
+/* Invisible, fat pointer target under the thin visible connector. transparent
+   (not none) so it still receives pointer events. Never animated. */
+.connectorHit {
+  stroke: transparent;
+  stroke-width: 16;
+  stroke-linecap: round;
+  fill: none;
+  pointer-events: stroke;
+}
+/* Hovering anywhere on the connector group (its fat hit-area or the visible
+   line) highlights the visible connector. Color only : the visible connector's
+   stroke-width is an inline style (it tapers per depth) and would win over a
+   class rule, so we tint instead of thicken. The tint to the node-border color
+   reads clearly against the pale connector. */
+.connectorG:hover .connector {
+  stroke: var(--bopmind-node-border);
 }
 
 /* ---- Nodes ---- */

packages/blog-ui/src/components/UseCaseDiagram/index.tsx

@@ -173,11 +173,24 @@ const UseCaseDiagram: React.FC<UseCaseDiagramProps> = ({
           <g className={styles.linksG}>
             {rLinks.map((l, i) => (
               <g key={i} className={clsx(styles.link, styles[`link-${l.type}`])}>
+                {/* Wide, invisible hit-area so the thin link is easy to hover:
+                    an SVG stroke only receives pointer events on its visible
+                    width. This transparent line sits under the visible one and
+                    captures the hover for the whole link group. */}
                 <line
                   x1={l.x1}
                   y1={l.y1}
                   x2={l.x2}
                   y2={l.y2}
+                  className={styles.linkHit}
+                  aria-hidden="true"
+                />
+                <line
+                  x1={l.x1}
+                  y1={l.y1}
+                  x2={l.x2}
+                  y2={l.y2}
+                  className={styles.linkLine}
                   markerEnd={l.type === 'association' ? undefined : `url(#${salt}-arrow)`}
                   style={{'--len': l.len.toFixed(1), '--i': i} as CSSProperties}
                 />

packages/blog-ui/src/components/UseCaseDiagram/styles.module.css

@@ -75,16 +75,33 @@
 }
 
 /* Links: solid association, dashed include/extend. */
-.link line {
+.linkLine {
   stroke: var(--ifm-color-emphasis-500, #8a938e);
   stroke-width: 1.5;
   fill: none;
+  transition: stroke var(--duration-fast, 0.12s) var(--ease-standard, ease),
+    stroke-width var(--duration-fast, 0.12s) var(--ease-standard, ease);
 }
-.link-include line,
-.link-extend line {
+.link-include .linkLine,
+.link-extend .linkLine {
   stroke: var(--ifm-color-content-secondary, #5b625e);
   stroke-dasharray: 5 4;
 }
+/* Invisible, fat pointer target under the thin visible link. transparent (not
+   none) so it still receives pointer events; the group hover then highlights the
+   visible line. Never animated. */
+.linkHit {
+  stroke: transparent;
+  stroke-width: 16;
+  stroke-linecap: round;
+  fill: none;
+  pointer-events: stroke;
+}
+/* Hovering anywhere on the link (its fat hit-area) highlights the visible line. */
+.link:hover .linkLine {
+  stroke: var(--ifm-color-primary);
+  stroke-width: 2.5;
+}
 .stereotype {
   fill: var(--ifm-color-content-secondary, #5b625e);
   font-family: var(--font-mono, monospace);
@@ -109,28 +126,28 @@
     opacity: 1;
   }
 }
-.link-association line {
+.link-association .linkLine {
   stroke-dasharray: var(--len);
   stroke-dashoffset: var(--len);
   animation: bopucd-draw 480ms var(--ease-out, ease-out) forwards;
   animation-delay: calc(var(--i, 0) * 90ms);
 }
-.link-include line,
-.link-extend line,
+.link-include .linkLine,
+.link-extend .linkLine,
 .stereotype,
 .actor,
 .oval {
   animation: bopucd-fade 320ms var(--ease-out, ease-out) both;
   animation-delay: calc(var(--i, 0) * 60ms + 120ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .link-association line {
+  .link-association .linkLine {
     stroke-dasharray: none;
     stroke-dashoffset: 0;
     animation: none;
   }
-  .link-include line,
-  .link-extend line,
+  .link-include .linkLine,
+  .link-extend .linkLine,
   .stereotype,
   .actor,
   .oval {