feat(flowchart): discoverable connect form + per-node color + save-to-file export; v4.12.0

User feedback on v4.11.0: the Add Connection form was buried below the
node/edge lists and they couldn't find it; they also asked for per-node
color and Save to File export. v4.12.0 reorganises the #fc-nodelist panel
to put the connect form right after the Add Node buttons, adds a native
<input type="color"> per node row that drives a new store.setNodeColor
mutator (with serialize/deserialize round-trip), and wires a Save to File
button that pops a system save dialog via a new 'save-text-file' IPC
channel.

- src/flowchart-generator.html — panel order is now Add Node /
  Add Connection / Nodes / Edges / Export (Insert · Save · Reset).
  Removed the legacy top toolbar; status moved into the panel.
  Added .fc-help, per-node color-picker CSS, .fc-toolbar-row.
- src/flowchart/flowchart-shapes.js — shapeSvg() accepts an optional
  6th 'color' arg; emits fill=... on rects and polygons. Falls back to
  #ffffff for empty/null/undefined so old callers keep working.
- src/flowchart/flowchart-store.js — setNodeColor(id, color) mutator
  with snapshot/emit, normalizeColor() helper (hex validation),
  addNode accepts color, deserialize normalises missing color.
- src/renderer/flowchart-bundle.js — mirrors all of the above inline
  (the bundle is loaded as a single <script>), wires fc-btn-save to
  api.saveFile, passes node.color to shapeSvg in the canvas render,
  and renders <input type='color'> per node row.
- src/main.js — new ipcMain.handle('save-text-file', ...) using a
  system Save dialog (mirrors the ascii:save handler shape).
- src/preload.js — added 'save-text-file' to ALLOWED_SEND_CHANNELS
  and a saveFile(content, defaultName) helper on the flowchart bridge.

Tests: 92/92 suites, 1165/1165 tests pass on this run
- +9 store tests (color defaults, setNodeColor, undo, hex validation,
  round-trip, deserialize normalisation)
- +7 shapes tests (fill color on all 5 kinds, fallback to #ffffff)
- +6 controller tests (color picker wires setNodeColor, canvas rect
  reflects color, Save to File calls api.saveFile with the fenced
  Mermaid source and 'flowchart.mmd', cancel + error paths surface in
  status)

Verification:
- npm run lint          clean
- npm run format:check  clean
- npm test              92/92 suites, 1165/1165 tests pass

Amit Haridas

tests/flowchart-store.test.js

@@ -61,6 +61,55 @@ describe('flowchart-store: node operations', () => {
     expect(store.getGraph().nodes.find((n) => n.id === node.id).kind).toBe('decision');
   });
 
+  // v4.12.0 — per-node fill color. Mirrors setNodeKind/setNodeLabel semantics.
+  test('addNode defaults color to #ffffff when not provided', () => {
+    const store = create(makeIO());
+    const node = store.addNode({ kind: 'process', x: 0, y: 0, label: '' });
+    expect(node.color).toBe('#ffffff');
+    expect(store.getGraph().nodes[0].color).toBe('#ffffff');
+  });
+
+  test('addNode accepts an explicit color', () => {
+    const store = create(makeIO());
+    const node = store.addNode({ kind: 'process', x: 0, y: 0, label: '', color: '#ff0000' });
+    expect(node.color).toBe('#ff0000');
+  });
+
+  test('setNodeColor updates the color of an existing node', () => {
+    const store = create(makeIO());
+    const node = store.addNode({ kind: 'process', x: 0, y: 0, label: '' });
+    store.setNodeColor(node.id, '#336699');
+    expect(store.getGraph().nodes.find((n) => n.id === node.id).color).toBe('#336699');
+  });
+
+  test('setNodeColor accepts hex without leading #', () => {
+    const store = create(makeIO());
+    const node = store.addNode({ kind: 'process', x: 0, y: 0, label: '' });
+    store.setNodeColor(node.id, 'abcdef');
+    expect(store.getGraph().nodes[0].color).toBe('#abcdef');
+  });
+
+  test('setNodeColor falls back to #ffffff for non-hex strings', () => {
+    const store = create(makeIO());
+    const node = store.addNode({ kind: 'process', x: 0, y: 0, label: '' });
+    store.setNodeColor(node.id, 'not-a-color');
+    expect(store.getGraph().nodes[0].color).toBe('#ffffff');
+  });
+
+  test('setNodeColor throws on unknown node id', () => {
+    const store = create(makeIO());
+    expect(() => store.setNodeColor('nope', '#ff0000')).toThrow(/nope/);
+  });
+
+  test('setNodeColor pushes an undo snapshot', () => {
+    const store = create(makeIO());
+    const node = store.addNode({ kind: 'process', x: 0, y: 0, label: '' });
+    store.setNodeColor(node.id, '#abcdef');
+    expect(store.getGraph().nodes[0].color).toBe('#abcdef');
+    store.undo();
+    expect(store.getGraph().nodes[0].color).toBe('#ffffff');
+  });
+
   test('removeNode removes the node and any connected edges', () => {
     const store = create(makeIO());
     const a = store.addNode({ kind: 'process', x: 0, y: 0, label: 'A' });
@@ -209,6 +258,31 @@ describe('flowchart-store: serialize / deserialize', () => {
     expect(restored.getGraph()).toEqual(store.getGraph());
   });
 
+  // v4.12.0 — color is part of the persisted graph and survives round-trip.
+  test('serialize → deserialize round-trip preserves per-node color', () => {
+    const store = create(makeIO());
+    const a = store.addNode({ kind: 'process', x: 10, y: 20, label: 'A', color: '#ff0000' });
+    const b = store.addNode({ kind: 'decision', x: 30, y: 40, label: 'B?', color: '#00aaff' });
+    const json = store.serialize();
+    const restored = create(makeIO());
+    restored.deserialize(json);
+    const restoredA = restored.getGraph().nodes.find((n) => n.id === a.id);
+    const restoredB = restored.getGraph().nodes.find((n) => n.id === b.id);
+    expect(restoredA.color).toBe('#ff0000');
+    expect(restoredB.color).toBe('#00aaff');
+  });
+
+  test('deserialize normalises missing color to #ffffff', () => {
+    const store = create(makeIO());
+    store.deserialize(
+      JSON.stringify({
+        nodes: [{ id: 'n1', kind: 'process', x: 0, y: 0, label: 'A' }],
+        edges: [],
+      })
+    );
+    expect(store.getGraph().nodes[0].color).toBe('#ffffff');
+  });
+
   test('deserialize handles corrupt JSON by returning empty graph', () => {
     const store = create(makeIO());
     expect(() => store.deserialize('{not-json')).not.toThrow();