feat(draw): data-lightbox tap-to-zoom on the drawing card (T-318)

A data-lightbox element gets a tap target (click cursor) over its region;
DrawingCard exposes an onLightbox callback, which the conversation wires to
open the whole drawing in a ClideLightbox (zoomable). Completes the
per-object overlay — captions + lightbox — and T-318's defined scope.
Widget-tested (the tap fires the callback).

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

lib/builtin/claude/src/conversation_view.dart

@@ -24,6 +24,7 @@ import 'package:clide/builtin/claude/src/prompt_card.dart';
 import 'package:clide/builtin/claude/src/transcript_reader.dart';
 import 'package:clide/src/svg/svg_document.dart' show buildSvgDocument;
 import 'package:clide/widgets/src/draw/drawing_card.dart';
+import 'package:clide/widgets/src/svg/svg_painter.dart' show SvgView;
 import 'package:clide/builtin/claude/src/workflow_run.dart';
 import 'package:clide/kernel/src/facade.dart';
 import 'package:clide/kernel/src/keymap/intents.dart';
@@ -711,10 +712,22 @@ class _ConversationTurn extends StatelessWidget {
   /// CustomPaint engine (D-103), display-only per D-78, with an optional
   /// label/description caption.
   Widget _drawing(BuildContext context, DrawingMessage m) {
+    final doc = buildSvgDocument(m.svg);
     return ConversationCard(
       accent: tokens.globalTextMuted,
       label: ClideSettings.i18n.string(context, 'conversation.label.drawing', namespace: 'builtin.claude', placeholder: 'drawing'),
-      body: DrawingCard(document: buildSvgDocument(m.svg), label: m.label, description: m.description),
+      body: DrawingCard(
+        document: doc,
+        label: m.label,
+        description: m.description,
+        // A data-lightbox element opens the whole drawing, zoomable (T-318).
+        onLightbox: () => ClideKernel.of(context).dialog.show<Object>(
+          (ctx, dismiss) => ClideLightbox(
+            onDismiss: dismiss,
+            child: SvgView(document: doc),
+          ),
+        ),
+      ),
     );
   }
 

lib/widgets/src/draw/drawing_card.dart

@@ -22,11 +22,15 @@ import 'package:clide/src/svg/svg_node.dart';
 import 'package:flutter/widgets.dart';
 
 class DrawingCard extends StatelessWidget {
-  const DrawingCard({super.key, required this.document, this.label, this.description, this.images, this.maxHeight = 360});
+  const DrawingCard({super.key, required this.document, this.label, this.description, this.images, this.onLightbox, this.maxHeight = 360});
 
   final SvgDocument document;
   final String? label, description;
   final SvgImageResolver? images;
+
+  /// Called when a `data-lightbox` element is tapped (the caller opens the
+  /// zoom view). Null ⇒ no lightbox affordance.
+  final VoidCallback? onLightbox;
   final double maxHeight;
 
   @override
@@ -53,8 +57,8 @@ class DrawingCard extends StatelessWidget {
 
   Widget _svgRegion(SurfaceTokens tokens) {
     final view = SvgView(document: document, images: images);
-    final captioned = document.annotations.where((a) => _has(a.label) || _has(a.description)).toList();
+    final anns = document.annotations.where((a) => _has(a.label) || _has(a.description) || (a.lightbox && onLightbox != null)).toList();
-    final content = captioned.isEmpty
+    final content = anns.isEmpty
         ? view
         : Stack(
             fit: StackFit.expand,
@@ -62,9 +66,8 @@ class DrawingCard extends StatelessWidget {
               view,
               LayoutBuilder(
                 builder: (ctx, c) {
-                  final size = Size(c.maxWidth, c.maxHeight);
+                  final vp = svgViewportFit(Size(c.maxWidth, c.maxHeight), document);
-                  final vp = svgViewportFit(size, document);
+                  return Stack(children: [for (final a in anns) ..._overlay(a, vp, tokens)]);
-                  return Stack(children: [for (final a in captioned) _caption(a, vp, tokens)]);
                 },
               ),
             ],
@@ -87,28 +90,43 @@ class DrawingCard extends StatelessWidget {
     );
   }
 
-  /// A per-object caption (data-label / data-description) positioned just below
+  /// The per-object overlay for one annotation: a lightbox tap target over the
-  /// the annotated element's pixel bbox. Display-only (IgnorePointer).
+  /// element (when `data-lightbox` and [onLightbox] are set) plus a display-only
-  Widget _caption(SvgAnnotation a, SvgViewport vp, SurfaceTokens tokens) {
+  /// caption (data-label / data-description) just below its pixel bbox.
+  List<Widget> _overlay(SvgAnnotation a, SvgViewport vp, SurfaceTokens tokens) {
     final tl = vp.toPixel(a.x, a.y);
     final br = vp.toPixel(a.x + a.width, a.y + a.height);
     final w = (br.dx - tl.dx).abs();
     final h = (br.dy - tl.dy).abs();
-    return Positioned(
+    return [
-      left: tl.dx,
+      if (a.lightbox && onLightbox != null)
-      top: tl.dy + h + 2,
+        Positioned(
-      width: w < 48 ? 48.0 : w,
+          left: tl.dx,
-      child: IgnorePointer(
+          top: tl.dy,
-        child: Column(
+          width: w,
-          mainAxisSize: MainAxisSize.min,
+          height: h,
-          crossAxisAlignment: CrossAxisAlignment.start,
+          child: MouseRegion(
-          children: [
+            cursor: SystemMouseCursors.click,
-            if (_has(a.label)) ClideText(a.label!, fontSize: clideFontCaption, fontWeight: FontWeight.w600, color: tokens.globalForeground, maxLines: 2),
+            child: GestureDetector(behavior: HitTestBehavior.opaque, onTap: onLightbox),
-            if (_has(a.description)) ClideText(a.description!, fontSize: clideFontCaption, color: tokens.globalTextMuted, maxLines: 3),
+          ),
-          ],
         ),
-      ),
+      if (_has(a.label) || _has(a.description))
-    );
+        Positioned(
+          left: tl.dx,
+          top: tl.dy + h + 2,
+          width: w < 48 ? 48.0 : w,
+          child: IgnorePointer(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                if (_has(a.label)) ClideText(a.label!, fontSize: clideFontCaption, fontWeight: FontWeight.w600, color: tokens.globalForeground, maxLines: 2),
+                if (_has(a.description)) ClideText(a.description!, fontSize: clideFontCaption, color: tokens.globalTextMuted, maxLines: 3),
+              ],
+            ),
+          ),
+        ),
+    ];
   }
 
   static double? _aspect(SvgDocument d) {

test/widgets/draw/drawing_card_test.dart

@@ -43,4 +43,21 @@ void main() {
     expect(find.text('Node A'), findsOneWidget);
     expect(find.text('the entry point'), findsOneWidget);
   });
+
+  testWidgets('a data-lightbox element fires onLightbox when tapped (T-318)', (tester) async {
+    var tapped = false;
+    final doc = buildSvgDocument('<svg viewBox="0 0 100 50"><rect x="0" y="0" width="100" height="50" data-lightbox=""/></svg>');
+    await tester.pumpWidget(
+      anchoredHarness(
+        f,
+        SizedBox(
+          width: 400,
+          child: DrawingCard(document: doc, onLightbox: () => tapped = true),
+        ),
+      ),
+    );
+    await tester.pump();
+    await tester.tap(find.byType(DrawingCard));
+    expect(tapped, isTrue);
+  });
 }