extract ClideTappable shared widget

Encapsulates the hover + click + cursor pattern repeated across
the codebase. Builder receives (context, hovered) so callers
control their own hover styling. Refactored _ThemeLink to use it.

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

lib/builtin/welcome/src/welcome_view.dart

@@ -297,34 +297,22 @@ class _StatusLine extends StatelessWidget {
   }
 }
 
-class _ThemeLink extends StatefulWidget {
+class _ThemeLink extends StatelessWidget {
   const _ThemeLink({required this.tokens, required this.kernel, required this.themeName});
   final SurfaceTokens tokens;
   final KernelServices kernel;
   final String themeName;
 
-  @override
-  State<_ThemeLink> createState() => _ThemeLinkState();
-}
-
-class _ThemeLinkState extends State<_ThemeLink> {
-  bool _hover = false;
-
   @override
   Widget build(BuildContext context) {
-    return MouseRegion(
+    return ClideTappable(
-      cursor: SystemMouseCursors.click,
+      onTap: () => kernel.commands.execute('theme.pick'),
-      onEnter: (_) => setState(() => _hover = true),
+      builder: (ctx, hovered) => Row(
-      onExit: (_) => setState(() => _hover = false),
+        mainAxisSize: MainAxisSize.min,
-      child: GestureDetector(
+        children: [
-        onTap: () => widget.kernel.commands.execute('theme.pick'),
+          ClideText('theme: ', muted: true, fontSize: 12, fontFamily: clideMonoFamily),
-        child: Row(
+          ClideText(themeName, fontSize: 12, fontFamily: clideMonoFamily, color: hovered ? tokens.globalForeground : tokens.globalFocus),
-          mainAxisSize: MainAxisSize.min,
+        ],
-          children: [
-            ClideText('theme: ', muted: true, fontSize: 12, fontFamily: clideMonoFamily),
-            ClideText(widget.themeName, fontSize: 12, fontFamily: clideMonoFamily, color: _hover ? widget.tokens.globalForeground : widget.tokens.globalFocus),
-          ],
-        ),
       ),
     );
   }

lib/widgets/src/clide_tappable.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/widgets.dart';
+
+class ClideTappable extends StatefulWidget {
+  const ClideTappable({
+    super.key,
+    required this.onTap,
+    required this.builder,
+    this.cursor = SystemMouseCursors.click,
+  });
+
+  final VoidCallback onTap;
+  final Widget Function(BuildContext context, bool hovered) builder;
+  final MouseCursor cursor;
+
+  @override
+  State<ClideTappable> createState() => _ClideTappableState();
+}
+
+class _ClideTappableState extends State<ClideTappable> {
+  bool _hover = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      cursor: widget.cursor,
+      onEnter: (_) => setState(() => _hover = true),
+      onExit: (_) => setState(() => _hover = false),
+      child: GestureDetector(
+        behavior: HitTestBehavior.opaque,
+        onTap: widget.onTap,
+        child: widget.builder(context, _hover),
+      ),
+    );
+  }
+}

lib/widgets/widgets.dart

@@ -19,6 +19,7 @@ export 'src/clide_scrollbar.dart';
 export 'src/clide_spine.dart';
 export 'src/clide_surface.dart';
 export 'src/clide_tab_bar.dart';
+export 'src/clide_tappable.dart';
 export 'src/clide_text.dart';
 export 'src/clide_tooltip.dart';
 export 'src/typography.dart';