feat(graph): pan + zoom on the vault graph view (T-323)

Folds a user zoom (scroll wheel, clamped) and pan (drag) transform into
GraphViewport so the painter and hit-testing move in lockstep — hover and
click keep landing on what's drawn. Zoom scales about the canvas centre; a
fresh graph re-fits and drops the transform.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

lib/builtin/graph/src/graph_painter.dart

@@ -22,9 +22,16 @@ class GraphViewport {
   GraphViewport(this.scale, this.dx, this.dy);
   final double scale, dx, dy;
 
-  factory GraphViewport.fit(Size canvas, Size layout) {
-    final scale = math.min(canvas.width / layout.width, canvas.height / layout.height);
-    return GraphViewport(scale, (canvas.width - layout.width * scale) / 2, (canvas.height - layout.height * scale) / 2);
+  /// Fits the solver's [layout] space into [canvas] (aspect-preserving), then
+  /// applies the user's [zoom] (about the canvas centre) and [pan]. At
+  /// `zoom: 1, pan: zero` this is the plain centered fit.
+  factory GraphViewport.fit(Size canvas, Size layout, {double zoom = 1, Offset pan = Offset.zero}) {
+    final scale = math.min(canvas.width / layout.width, canvas.height / layout.height) * zoom;
+    // Pin the layout centre to the canvas centre so zoom scales about it, then
+    // translate by the pan.
+    final dx = canvas.width / 2 + pan.dx - scale * layout.width / 2;
+    final dy = canvas.height / 2 + pan.dy - scale * layout.height / 2;
+    return GraphViewport(scale, dx, dy);
   }
 
   Offset toPixel(GraphPoint p) => Offset(dx + p.x * scale, dy + p.y * scale);
@@ -39,9 +46,11 @@ String? hitTestNode(
   Size size, {
   Size layoutSize = const Size(800, 600),
   double hitRadius = 12,
+  double zoom = 1,
+  Offset pan = Offset.zero,
 }) {
   if (positions.isEmpty) return null;
-  final vp = GraphViewport.fit(size, layoutSize);
+  final vp = GraphViewport.fit(size, layoutSize, zoom: zoom, pan: pan);
   String? best;
   var bestD = hitRadius;
   for (final n in graph.nodes) {
@@ -57,7 +66,15 @@ String? hitTestNode(
 }
 
 class GraphPainter extends CustomPainter {
-  GraphPainter({required this.graph, required this.positions, required this.tokens, this.highlight, this.layoutSize = const Size(800, 600)});
+  GraphPainter({
+    required this.graph,
+    required this.positions,
+    required this.tokens,
+    this.highlight,
+    this.layoutSize = const Size(800, 600),
+    this.zoom = 1,
+    this.pan = Offset.zero,
+  });
 
   final VaultGraph graph;
   final Map<String, GraphPoint> positions;
@@ -69,12 +86,16 @@ class GraphPainter extends CustomPainter {
 
   final Size layoutSize;
 
+  /// User pan/zoom over the base fit — kept in lockstep with [hitTestNode].
+  final double zoom;
+  final Offset pan;
+
   static const double nodeRadius = 5;
 
   @override
   void paint(ui.Canvas canvas, Size size) {
     if (graph.isEmpty || positions.isEmpty) return;
-    final vp = GraphViewport.fit(size, layoutSize);
+    final vp = GraphViewport.fit(size, layoutSize, zoom: zoom, pan: pan);
     Offset at(GraphPoint p) => vp.toPixel(p);
     bool lit(String id) => highlight == null || highlight!.contains(id);
 
@@ -115,5 +136,10 @@ class GraphPainter extends CustomPainter {
 
   @override
   bool shouldRepaint(GraphPainter old) =>
-      !identical(old.graph, graph) || !identical(old.positions, positions) || old.highlight != highlight || old.tokens != tokens;
+      !identical(old.graph, graph) ||
+      !identical(old.positions, positions) ||
+      old.highlight != highlight ||
+      old.tokens != tokens ||
+      old.zoom != zoom ||
+      old.pan != pan;
 }

lib/builtin/graph/src/graph_view.dart

@@ -7,6 +7,7 @@ import 'package:clide/builtin/graph/src/graph_painter.dart';
 import 'package:clide/src/graph/force_layout.dart';
 import 'package:clide/src/graph/vault_graph.dart';
 import 'package:clide/widgets/src/clide_settings.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/widgets.dart';
 
 class GraphView extends StatefulWidget {
@@ -24,8 +25,12 @@ class GraphView extends StatefulWidget {
 }
 
 class _GraphViewState extends State<GraphView> {
+  static const double _minZoom = 0.2, _maxZoom = 5;
+
   late Map<String, GraphPoint> _pos;
   String? _hovered;
+  double _zoom = 1;
+  Offset _pan = Offset.zero;
 
   @override
   void initState() {
@@ -47,6 +52,15 @@ class _GraphViewState extends State<GraphView> {
       height: widget.layoutSize.height,
     );
     _hovered = null;
+    // A fresh graph re-fits; drop any user pan/zoom.
+    _zoom = 1;
+    _pan = Offset.zero;
+  }
+
+  void _onScroll(PointerScrollEvent e) {
+    final factor = e.scrollDelta.dy < 0 ? 1.1 : 0.9;
+    final next = (_zoom * factor).clamp(_minZoom, _maxZoom);
+    if (next != _zoom) setState(() => _zoom = next);
   }
 
   @override
@@ -55,28 +69,36 @@ class _GraphViewState extends State<GraphView> {
     return LayoutBuilder(
       builder: (ctx, constraints) {
         final size = constraints.biggest;
-        String? hit(Offset local) => hitTestNode(widget.graph, _pos, local, size, layoutSize: widget.layoutSize);
-        return MouseRegion(
-          onHover: (e) {
-            final h = hit(e.localPosition);
-            if (h != _hovered) setState(() => _hovered = h);
+        String? hit(Offset local) => hitTestNode(widget.graph, _pos, local, size, layoutSize: widget.layoutSize, zoom: _zoom, pan: _pan);
+        return Listener(
+          onPointerSignal: (s) {
+            if (s is PointerScrollEvent) _onScroll(s);
           },
-          onExit: (_) {
-            if (_hovered != null) setState(() => _hovered = null);
-          },
-          child: GestureDetector(
-            onTapUp: (d) {
-              final h = hit(d.localPosition);
-              if (h != null) widget.onOpen?.call(h);
+          child: MouseRegion(
+            onHover: (e) {
+              final h = hit(e.localPosition);
+              if (h != _hovered) setState(() => _hovered = h);
             },
-            child: CustomPaint(
-              size: size,
-              painter: GraphPainter(
-                graph: widget.graph,
-                positions: _pos,
-                tokens: tokens,
-                highlight: _hovered == null ? null : widget.graph.neighborhood(_hovered!),
-                layoutSize: widget.layoutSize,
+            onExit: (_) {
+              if (_hovered != null) setState(() => _hovered = null);
+            },
+            child: GestureDetector(
+              onTapUp: (d) {
+                final h = hit(d.localPosition);
+                if (h != null) widget.onOpen?.call(h);
+              },
+              onPanUpdate: (d) => setState(() => _pan += d.delta),
+              child: CustomPaint(
+                size: size,
+                painter: GraphPainter(
+                  graph: widget.graph,
+                  positions: _pos,
+                  tokens: tokens,
+                  highlight: _hovered == null ? null : widget.graph.neighborhood(_hovered!),
+                  layoutSize: widget.layoutSize,
+                  zoom: _zoom,
+                  pan: _pan,
+                ),
               ),
             ),
           ),