feat(flowchart): visual polish — selection ring, hover, resize grip (C16)

Adds the visual feedback that was missing from the C10 resize + C2
selection commits. The canvas previously set the .selected class but
no CSS rule styled it, so a selected node looked identical to an
unselected one. Same for hover and the resize handle.

CSS additions (src/flowchart-generator.html):

  - .flowchart-node: cursor:grab + 0.12s filter transition for the
    hover tint (drop-shadow blue glow).
  - .flowchart-node:hover .flowchart-node-shape: blue glow.
  - .flowchart-node.selected .flowchart-node-shape: 2.25px blue
    stroke — replaces the (previously invisible) .selected class.
  - .flowchart-edge:hover and .flowchart-edge.selected: blue
    stroke + 2.5px width for the same reason.
  - .flowchart-resize-handle-hit: 24px transparent rect for an
    enlarged hit area (the visible grip stays 10px).
  - .flowchart-resize-handle-grip: blue square with stroke, styled
    via CSS instead of inline fill/stroke (which were overriding
    the rest of the file's theme).
  - .flowchart-edge-label-bg: opaque white pill behind edge labels,
    so labels stay readable when an edge curves under them.
  - .fc-modal / .fc-modal-overlay: fade + scale-in keyframes
    (0.15s ease-out) so the promptInline / confirmInline modals
    animate in instead of popping in instantly.

Canvas (src/flowchart/flowchart-canvas.js): the resize handle now
emits two rects — a 24px transparent hit area (data-resize-node
attribute preserved) and a smaller 10px visible grip styled via
.flowchart-resize-handle-grip. Cursor stays nwse-resize via CSS.

Tests: no new tests (visual); existing 14 canvas tests still pass.
1376 total.

Amit Haridas

src/flowchart/flowchart-canvas.js

@@ -232,21 +232,29 @@ function createCanvas(container, store, opts = {}) {
       // v4.13.0 — bottom-right resize handle on the selected node. A
       // single square handle is enough for v1; multi-handle (4 corners
       // + 4 edges) is a follow-up. Width is the only mutable dimension.
+      // Two rects: a larger transparent hit area (24px) so the handle is
+      // easier to grab, plus a smaller visible grip (10px) styled via CSS.
       if (node.id === selectedNodeId) {
-        const handleSize = 10;
-        const handle = svgEl('rect', {
-          x: w - handleSize / 2,
-          y: DEFAULT_HEIGHT - handleSize / 2,
-          width: handleSize,
-          height: handleSize,
-          fill: '#e5461f',
-          stroke: '#ffffff',
-          'stroke-width': 1,
-          class: 'flowchart-resize-handle',
+        const gripSize = 10;
+        const hitSize = 24;
+        const hit = svgEl('rect', {
+          x: w - hitSize / 2,
+          y: DEFAULT_HEIGHT - hitSize / 2,
+          width: hitSize,
+          height: hitSize,
+          class: 'flowchart-resize-handle flowchart-resize-handle-hit',
           'data-resize-node': node.id,
-          cursor: 'nwse-resize',
         });
-        g.appendChild(handle);
+        const grip = svgEl('rect', {
+          x: w - gripSize / 2,
+          y: DEFAULT_HEIGHT - gripSize / 2,
+          width: gripSize,
+          height: gripSize,
+          rx: 2,
+          class: 'flowchart-resize-handle flowchart-resize-handle-grip',
+        });
+        g.appendChild(hit);
+        g.appendChild(grip);
       }
 
       nodesLayer.appendChild(g);