kasy-cli 1.24.0 → 1.26.0

package/lib/commands/new.js

@@ -195,6 +195,56 @@ async function confirmIdentities(backend, gcloudAccount, tr, cancel) {
   }
 }
 
+/**
+ * Try to get gcloud ready (installed + logged in) without making the user leave
+ * the flow. Mirrors the machine-prep we do for Node/Flutter/Firebase: offer to
+ * auto-install gcloud (winget on Windows, brew on macOS), make it visible to
+ * this process, then run the interactive Google login (their own account — that
+ * part can't be automated). On any failure it returns the latest check so the
+ * caller keeps its existing fallback (cancel in Quick mode, or ask for a project
+ * id elsewhere). Never throws.
+ */
+async function ensureGcloudReady(tr) {
+  const { spawnSync } = require('node:child_process');
+  const { augmentedEnv } = require('../utils/env-tools');
+
+  let check = await checkGcloudAuth();
+  if (check.ok) return check;
+
+  // 1) Not installed → offer to install it for them.
+  if (check.missing === 'gcloud') {
+    const guide = getGcloudInstallInstructions();
+    if (guide.install) {
+      const doInstall = await ui.confirm({
+        message: tr('new.firebase.create.gcloudInstallConfirm'),
+        initialValue: true,
+      });
+      if (doInstall) {
+        const spinner = ui.timedSpinner();
+        spinner.start(tr('new.firebase.create.gcloudInstalling'));
+        spawnSync(guide.install, { stdio: 'pipe', shell: true });
+        spinner.stop(tr('new.firebase.create.gcloudInstalling'));
+        // checkGcloudAuth / the later billing+project calls run with the plain
+        // process PATH, which doesn't see a tool winget just dropped on the
+        // machine PATH. Inject the known gcloud dir so the rest of the flow works.
+        const env = augmentedEnv();
+        if (env.PATH) process.env.PATH = env.PATH;
+        if (process.platform === 'win32' && env.Path) process.env.Path = env.Path;
+        check = await checkGcloudAuth();
+      }
+    }
+  }
+
+  // 2) Installed but not logged in → run the interactive login (their account).
+  if (!check.ok && check.missing === 'auth') {
+    ui.log.info(tr('new.firebase.create.gcloudAuthOpening'));
+    spawnSync('gcloud auth login', { stdio: 'inherit', shell: true });
+    check = await checkGcloudAuth();
+  }
+
+  return check;
+}
+
 function printPrerequisites(tr, backend, firebaseSetupMode = 'existing', checkResults = []) {
   const gcloudOk = checkResults.every(
     (r) => !r.name?.includes('gcloud') || r.ok
@@ -644,7 +694,7 @@ async function runNew(directory, { language: langHint = null, backend: backendHi
   // ── gcloud is required for Quick mode (creates GCP project + enables Auth via API) ─
   // Failing here, before the project is generated, is much friendlier than dying mid-flow.
   if (isQuick) {
-    const gcloudCheck = await checkGcloudAuth();
+    const gcloudCheck = await ensureGcloudReady(tr);
     if (!gcloudCheck.ok) {
       ui.log.error(tr('new.firebase.create.gcloudRequired'));
       if (gcloudCheck.missing === 'gcloud') {
@@ -815,7 +865,7 @@ async function runNew(directory, { language: langHint = null, backend: backendHi
         onCancel: cancel,
       });
     }
-    const gcloudCheck = await checkGcloudAuth();
+    const gcloudCheck = await ensureGcloudReady(tr);
     if (!gcloudCheck.ok) {
       ui.log.error(tr('new.firebase.create.gcloudRequired'));
       if (gcloudCheck.missing === 'gcloud') {
@@ -1019,7 +1069,7 @@ async function runNew(directory, { language: langHint = null, backend: backendHi
 
   // ── Firebase: create from scratch for Supabase/API (push notifications only) ─
   if ((backend === 'supabase' || backend === 'api') && firebaseSetupMode === 'create') {
-    const gcloudCheck = await checkGcloudAuth();
+    const gcloudCheck = await ensureGcloudReady(tr);
     if (!gcloudCheck.ok) {
       ui.log.error(tr('new.firebase.create.gcloudRequired'));
       if (gcloudCheck.missing === 'gcloud') {

package/lib/utils/flutter-install.js

@@ -43,12 +43,24 @@ $ProgressPreference = 'SilentlyContinue'
 $dest = Join-Path $env:LOCALAPPDATA 'flutter'
 $bin = Join-Path $dest 'bin'
 
+function Sync-Path {
+  # Pull the persistent PATH (Machine + User) into THIS session so a tool just
+  # installed by winget (Git) becomes visible right away.
+  $m = [Environment]::GetEnvironmentVariable('Path', 'Machine')
+  $u = [Environment]::GetEnvironmentVariable('Path', 'User')
+  $env:Path = (@($m, $u) | Where-Object { $_ }) -join ';'
+}
+
 # 1. Git — Flutter uses it internally and won't run without it.
 if (-not (Get-Command git -ErrorAction SilentlyContinue)) {
   if (Get-Command winget -ErrorAction SilentlyContinue) {
     winget install --id Git.Git -e --source winget --silent --accept-source-agreements --accept-package-agreements --disable-interactivity | Out-Null
+    Sync-Path
   }
 }
+if (-not (Get-Command git -ErrorAction SilentlyContinue)) {
+  throw 'Git is required for Flutter but is not available. Install Git and run this again.'
+}
 
 # 2. Flutter SDK — download + unzip, unless it's already there.
 if (-not (Test-Path (Join-Path $bin 'flutter.bat'))) {
@@ -67,8 +79,21 @@ if (-not (Test-Path (Join-Path $bin 'flutter.bat'))) {
   [System.IO.Compression.ZipFile]::ExtractToDirectory($zip, $env:LOCALAPPDATA)
   Remove-Item $zip -Force -ErrorAction SilentlyContinue
 }
+if (-not (Test-Path (Join-Path $bin 'flutter.bat'))) {
+  throw 'Flutter download/extract did not produce flutter.bat.'
+}
+
+# 3. Make flutter usable in THIS session and warm it up. The very first flutter
+#    command downloads the bundled Dart SDK (a few hundred MB), which can take
+#    minutes — doing it here, inside the installer, keeps the caller's follow-up
+#    "flutter --version" check fast instead of timing out on the cold first run.
+if ($env:Path -notlike "*$bin*") { $env:Path = "$bin;$env:Path" }
+& (Join-Path $bin 'flutter.bat') --version 2>&1 | Out-Null
+if ($LASTEXITCODE -ne 0) {
+  throw 'Flutter was installed but its first run failed (Dart SDK bootstrap). Check your internet connection and run this again.'
+}
 
-# 3. Persist flutter\\bin on the User PATH so every future terminal finds it.
+# 4. Persist flutter\\bin on the User PATH so every future terminal finds it.
 $userPath = [Environment]::GetEnvironmentVariable('Path', 'User')
 if (-not $userPath) { $userPath = '' }
 if (($userPath -split ';') -notcontains $bin) {

package/lib/utils/i18n/messages-en.js

@@ -238,6 +238,9 @@ module.exports = {
     'new.firebase.create.installAfter': 'Then log in',
     'new.firebase.create.installUrl': 'Or download from',
     'new.firebase.create.authCommand': 'Run: gcloud auth login',
+    'new.firebase.create.gcloudInstallConfirm': 'Install the Google Cloud CLI (gcloud) automatically now?',
+    'new.firebase.create.gcloudInstalling': 'Installing the Google Cloud CLI…',
+    'new.firebase.create.gcloudAuthOpening': 'Opening the Google sign-in in your browser — log in with your account…',
     'new.firebase.create.fallbackHint': 'For now, enter an existing Firebase Project ID to continue (or install gcloud and run again):',
     'new.firebase.q.billingAccount': 'Which billing account to link to the project?',
     'new.firebase.q.billingAccount.hint': 'Choose the account with available quota (up to 3 projects per account)',

package/lib/utils/i18n/messages-es.js

@@ -238,6 +238,9 @@ module.exports = {
     'new.firebase.create.installAfter': 'Luego inicia sesión',
     'new.firebase.create.installUrl': 'O descarga en',
     'new.firebase.create.authCommand': 'Ejecuta: gcloud auth login',
+    'new.firebase.create.gcloudInstallConfirm': '¿Instalar el Google Cloud CLI (gcloud) automáticamente ahora?',
+    'new.firebase.create.gcloudInstalling': 'Instalando el Google Cloud CLI…',
+    'new.firebase.create.gcloudAuthOpening': 'Abriendo el inicio de sesión de Google en el navegador — entra con tu cuenta…',
     'new.firebase.create.fallbackHint': 'Por ahora, ingresa un Firebase Project ID existente para continuar (o instala gcloud y ejecuta de nuevo):',
     'new.firebase.q.billingAccount': '¿Qué cuenta de facturación vincular al proyecto?',
     'new.firebase.q.billingAccount.hint': 'Elige la cuenta con cuota disponible (hasta 3 proyectos por cuenta)',

package/lib/utils/i18n/messages-pt.js

@@ -238,6 +238,9 @@ module.exports = {
     'new.firebase.create.installAfter': 'Depois faca login',
     'new.firebase.create.installUrl': 'Ou baixe em',
     'new.firebase.create.authCommand': 'Execute: gcloud auth login',
+    'new.firebase.create.gcloudInstallConfirm': 'Instalar o Google Cloud CLI (gcloud) automaticamente agora?',
+    'new.firebase.create.gcloudInstalling': 'Instalando o Google Cloud CLI…',
+    'new.firebase.create.gcloudAuthOpening': 'Abrindo o login do Google no navegador — entre com a sua conta…',
     'new.firebase.create.fallbackHint': 'Por enquanto, informe um Firebase Project ID existente para continuar (ou instale o gcloud e execute novamente):',
     'new.firebase.q.billingAccount': 'Qual conta de faturamento vincular ao projeto?',
     'new.firebase.q.billingAccount.hint': 'Escolha a conta com cota disponível (até 3 projetos por conta)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kasy-cli",
-  "version": "1.24.0",
+  "version": "1.26.0",
   "description": "CLI for scaffolding production-ready Flutter SaaS apps with Firebase, Supabase, or API REST backends.",
   "bin": {
     "kasy": "./bin/kasy.js"

package/templates/firebase/lib/components/kasy_app_bar.dart

@@ -29,6 +29,7 @@ import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart' show SystemUiOverlayStyle;
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 
 /// Inner toolbar band height (orbit hit targets, title baseline).
@@ -468,12 +469,17 @@ class KasyAppBarChromeTap extends StatelessWidget {
       button: true,
       enabled: true,
       label: label,
-      child: GestureDetector(
-        behavior: HitTestBehavior.opaque,
-        onTap: onPressed,
-        child: ConstrainedBox(
-          constraints: const BoxConstraints(minWidth: 44, minHeight: 44),
-          child: Center(child: child),
+      child: KasyFocusRing(
+        onActivate: onPressed,
+        // Circular icon button, so a large radius keeps the focus ring round.
+        borderRadius: BorderRadius.circular(999),
+        child: GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onTap: onPressed,
+          child: ConstrainedBox(
+            constraints: const BoxConstraints(minWidth: 44, minHeight: 44),
+            child: Center(child: child),
+          ),
         ),
       ),
     );

package/templates/firebase/lib/components/kasy_avatar.dart

@@ -4,6 +4,7 @@ import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:kasy_kit/components/kasy_avatar_presets.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 
 /// Logical sizes for [KasyAvatar] (diameter in logical pixels).
 enum KasyAvatarSize {
@@ -609,16 +610,22 @@ class _KasyAvatarPressableState extends State<_KasyAvatarPressable>
     final Widget inner = Semantics(
       button: true,
       label: widget.semanticLabel,
-      child: GestureDetector(
-        behavior: HitTestBehavior.opaque,
-        onTap: _tap,
-        child: ConstrainedBox(
-          constraints: BoxConstraints(
-            minWidth: widget.minSide,
-            minHeight: widget.minSide,
-          ),
-          child: Center(
-            child: Transform.scale(scale: _s, child: widget.child),
+      child: KasyFocusRing(
+        onActivate: _tap,
+        // The avatar is circular, so a large radius keeps the focus ring
+        // hugging the circle (radius >= half the diameter).
+        borderRadius: BorderRadius.circular(widget.minSide),
+        child: GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onTap: _tap,
+          child: ConstrainedBox(
+            constraints: BoxConstraints(
+              minWidth: widget.minSide,
+              minHeight: widget.minSide,
+            ),
+            child: Center(
+              child: Transform.scale(scale: _s, child: widget.child),
+            ),
           ),
         ),
       ),

package/templates/firebase/lib/components/kasy_card.dart

@@ -119,6 +119,10 @@ class KasyCard extends StatelessWidget {
         onPressed: onTap!,
         semanticLabel: semanticLabel ?? 'Card',
         clipBorderRadius: resolvedRadius,
+        // A tappable card is an actionable control, so make it a keyboard
+        // tab-stop with the standard focus ring (matches buttons/links).
+        focusable: true,
+        focusBorderRadius: resolvedRadius,
         child: margined,
       );
     }

package/templates/firebase/lib/components/kasy_checkbox.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 
 /// Shape of the checkbox box.
 enum KasyCheckboxShape {
@@ -169,21 +170,29 @@ class _KasyCheckboxState extends State<KasyCheckbox>
     final bool hasLabel =
         widget.label != null || widget.description != null;
 
-    return GestureDetector(
-      onTap: widget._isDisabled ? null : () => widget.onChanged!(!widget.value),
-      behavior: HitTestBehavior.opaque,
-      child: hasLabel
-          ? Row(
-              children: [
-                box,
-                const SizedBox(width: KasySpacing.smd),
-                Expanded(child: _LabelColumn(widget: widget)),
-              ],
-            )
-          : Padding(
-              padding: const EdgeInsets.all(11),
-              child: box,
-            ),
+    final VoidCallback? onTap =
+        widget._isDisabled ? null : () => widget.onChanged!(!widget.value);
+
+    return KasyFocusRing(
+      enabled: onTap != null,
+      onActivate: onTap,
+      borderRadius: BorderRadius.circular(KasyRadius.sm),
+      child: GestureDetector(
+        onTap: onTap,
+        behavior: HitTestBehavior.opaque,
+        child: hasLabel
+            ? Row(
+                children: [
+                  box,
+                  const SizedBox(width: KasySpacing.smd),
+                  Expanded(child: _LabelColumn(widget: widget)),
+                ],
+              )
+            : Padding(
+                padding: const EdgeInsets.all(11),
+                child: box,
+              ),
+      ),
     );
   }
 }

package/templates/firebase/lib/components/kasy_date_picker.dart

@@ -3,6 +3,7 @@ import 'package:kasy_kit/components/kasy_bottom_sheet.dart';
 import 'package:kasy_kit/components/kasy_dialog.dart';
 import 'package:kasy_kit/components/kasy_text_field.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -1038,26 +1039,32 @@ class _KasyDatePickerState extends State<KasyDatePicker>
             cursor: widget.enabled
                 ? SystemMouseCursors.click
                 : SystemMouseCursors.basic,
-            child: GestureDetector(
-              behavior: HitTestBehavior.opaque,
-              onTap: _toggleCalendar,
-              child: IgnorePointer(
-                child: KasyTextField(
-                  key: _fieldKey,
-                  controller: _displayController,
-                  focusNode: _fieldFocusNode,
-                  readOnly: true,
-                  enabled: widget.enabled,
-                  hint: _resolvedPlaceholder,
-                  isInvalid: hasInvalidState,
-                  variant: widget.variant,
-                  focusBorder: widget.focusBorder,
-                  // No caret, no selection handles, no "blue text" when the
-                  // trigger is focused while the calendar is open — keeps the
-                  // field reading as a button, not an editable input.
-                  enableInteractiveSelection: false,
-                  suffix:
-                      widget.showSuffix ? const Icon(KasyIcons.calendar) : null,
+            child: KasyFocusRing(
+              onActivate: _toggleCalendar,
+              // Match the text field corner radius so the ring hugs the trigger.
+              borderRadius: BorderRadius.circular(KasyRadius.md),
+              child: GestureDetector(
+                behavior: HitTestBehavior.opaque,
+                onTap: _toggleCalendar,
+                child: IgnorePointer(
+                  child: KasyTextField(
+                    key: _fieldKey,
+                    controller: _displayController,
+                    focusNode: _fieldFocusNode,
+                    readOnly: true,
+                    enabled: widget.enabled,
+                    hint: _resolvedPlaceholder,
+                    isInvalid: hasInvalidState,
+                    variant: widget.variant,
+                    focusBorder: widget.focusBorder,
+                    // No caret, no selection handles, no "blue text" when the
+                    // trigger is focused while the calendar is open — keeps the
+                    // field reading as a button, not an editable input.
+                    enableInteractiveSelection: false,
+                    suffix: widget.showSuffix
+                        ? const Icon(KasyIcons.calendar)
+                        : null,
+                  ),
                 ),
               ),
             ),

package/templates/firebase/lib/components/kasy_otp_verification_bottom_sheet.dart

@@ -4,6 +4,7 @@ import 'package:kasy_kit/components/kasy_button.dart';
 import 'package:kasy_kit/components/kasy_text_field_otp.dart';
 import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 
 /// Built-in layouts for [showKasyOtpVerificationBottomSheet].
 enum KasyOtpVerificationSheetPreset {
@@ -209,21 +210,25 @@ class _SheetResendCodeLinkState extends State<_SheetResendCodeLink> {
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      onTap: _handleTap,
-      onTapCancel: () => setState(() => _pressed = false),
-      child: AnimatedScale(
-        scale: _pressed ? 0.93 : 1.0,
-        duration: const Duration(milliseconds: 120),
-        curve: Curves.easeOutCubic,
-        child: AnimatedOpacity(
-          opacity: _pressed ? 0.55 : 1.0,
+    return KasyFocusRing(
+      onActivate: _handleTap,
+      borderRadius: BorderRadius.circular(KasyRadius.sm),
+      child: GestureDetector(
+        onTap: _handleTap,
+        onTapCancel: () => setState(() => _pressed = false),
+        child: AnimatedScale(
+          scale: _pressed ? 0.93 : 1.0,
           duration: const Duration(milliseconds: 120),
-          child: Text(
-            'Resend code',
-            style: context.textTheme.bodyMedium?.copyWith(
-              color: context.colors.onBackground,
-              fontWeight: FontWeight.w700,
+          curve: Curves.easeOutCubic,
+          child: AnimatedOpacity(
+            opacity: _pressed ? 0.55 : 1.0,
+            duration: const Duration(milliseconds: 120),
+            child: Text(
+              'Resend code',
+              style: context.textTheme.bodyMedium?.copyWith(
+                color: context.colors.onBackground,
+                fontWeight: FontWeight.w700,
+              ),
             ),
           ),
         ),

package/templates/firebase/lib/components/kasy_sidebar.dart

@@ -579,6 +579,8 @@ class _KasySidebarState extends State<KasySidebar> {
       borderRadius: BorderRadius.circular(_kToggleSize / 2),
       hoverColor: c.activeBg,
       pressColor: c.textActive,
+      focusable: true,
+      focusGapColor: c.bg,
       onTap: _toggleCollapse,
       child: Container(
         width: _kToggleSize,
@@ -1071,6 +1073,8 @@ class _KasySidebarState extends State<KasySidebar> {
             borderRadius: BorderRadius.circular(_kItemRadius),
             hoverColor: c.activeBg,
             pressColor: c.textActive,
+            focusable: true,
+            focusGapColor: c.bg,
             onTap: () => _activateSubItem(label),
             child: Container(
               height: _kSubItemH,
@@ -1298,6 +1302,8 @@ class _ProTooltipIconState extends State<_ProTooltipIcon> {
             borderRadius: BorderRadius.circular(_kItemRadius),
             hoverColor: widget.activeBg,
             pressColor: widget.activeBg,
+            focusable: true,
+            focusGapColor: widget.colors.bg,
             onTap: widget.onTap,
             child: Container(
               padding: const EdgeInsets.symmetric(

package/templates/firebase/lib/components/kasy_tabs.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Data model
@@ -506,35 +507,40 @@ class _PrimaryTabState extends State<_PrimaryTab> {
       ),
     );
 
-    final Widget gesture = GestureDetector(
-      onTap: widget.onTap,
-      behavior: HitTestBehavior.opaque,
-      child: Padding(
-        padding: verticalLayout
-            // Fill+icon: 12px all sides — per Figma spec.
-            ? const EdgeInsets.all(12)
-            // Default: 6px vertical, 12px horizontal — per Figma spec.
-            : const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
-        child: verticalLayout
-            ? Column(
-                mainAxisSize: MainAxisSize.min,
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  iconWidget,
-                  const SizedBox(height: 6),
-                  labelWidget,
-                ],
-              )
-            : Row(
-                mainAxisSize: MainAxisSize.min,
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  if (item.icon != null) iconWidget,
-                  if (item.icon != null && hasLabel)
-                    const SizedBox(width: 6),
-                  if (hasLabel) labelWidget,
-                ],
-              ),
+    final Widget gesture = KasyFocusRing(
+      enabled: widget.onTap != null,
+      onActivate: widget.onTap,
+      borderRadius: BorderRadius.circular(KasyRadius.sm),
+      child: GestureDetector(
+        onTap: widget.onTap,
+        behavior: HitTestBehavior.opaque,
+        child: Padding(
+          padding: verticalLayout
+              // Fill+icon: 12px all sides — per Figma spec.
+              ? const EdgeInsets.all(12)
+              // Default: 6px vertical, 12px horizontal — per Figma spec.
+              : const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
+          child: verticalLayout
+              ? Column(
+                  mainAxisSize: MainAxisSize.min,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    iconWidget,
+                    const SizedBox(height: 6),
+                    labelWidget,
+                  ],
+                )
+              : Row(
+                  mainAxisSize: MainAxisSize.min,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    if (item.icon != null) iconWidget,
+                    if (item.icon != null && hasLabel)
+                      const SizedBox(width: 6),
+                    if (hasLabel) labelWidget,
+                  ],
+                ),
+        ),
       ),
     );
 
@@ -597,45 +603,50 @@ class _SecondaryTabState extends State<_SecondaryTab> {
     // selected color so it reads as interactive (mobile keeps the flat look).
     final Color fg = (selected || _hovered) ? c.onSurface : c.muted;
 
-    final Widget gesture = GestureDetector(
-      onTap: widget.onTap,
-      behavior: HitTestBehavior.opaque,
-      child: Padding(
-        // top:4 bottom:6 horizontal:12 — per Figma spec.
-        // Extra bottom padding visually balances the 2px underline indicator.
-        padding: const EdgeInsets.only(
-          top: 4,
-          bottom: 6,
-          left: 12,
-          right: 12,
-        ),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            if (item.icon != null) ...[
-              Opacity(
-                opacity: disabled ? 0.4 : 1.0,
-                child: Icon(
-                  item.icon,
-                  size: 16,
-                  color: fg,
-                ),
-              ),
-              if (hasLabel) const SizedBox(width: 6),
-            ],
-            if (hasLabel)
-              Opacity(
-                opacity: disabled ? 0.4 : 1.0,
-                child: Text(
-                  item.label,
-                  // Use labelLarge as defined in the Kasy theme (14px/w600).
-                  style: context.textTheme.labelLarge?.copyWith(
+    final Widget gesture = KasyFocusRing(
+      enabled: widget.onTap != null,
+      onActivate: widget.onTap,
+      borderRadius: BorderRadius.circular(KasyRadius.sm),
+      child: GestureDetector(
+        onTap: widget.onTap,
+        behavior: HitTestBehavior.opaque,
+        child: Padding(
+          // top:4 bottom:6 horizontal:12 — per Figma spec.
+          // Extra bottom padding visually balances the 2px underline indicator.
+          padding: const EdgeInsets.only(
+            top: 4,
+            bottom: 6,
+            left: 12,
+            right: 12,
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              if (item.icon != null) ...[
+                Opacity(
+                  opacity: disabled ? 0.4 : 1.0,
+                  child: Icon(
+                    item.icon,
+                    size: 16,
                     color: fg,
                   ),
                 ),
-              ),
-          ],
+                if (hasLabel) const SizedBox(width: 6),
+              ],
+              if (hasLabel)
+                Opacity(
+                  opacity: disabled ? 0.4 : 1.0,
+                  child: Text(
+                    item.label,
+                    // Use labelLarge as defined in the Kasy theme (14px/w600).
+                    style: context.textTheme.labelLarge?.copyWith(
+                      color: fg,
+                    ),
+                  ),
+                ),
+            ],
+          ),
         ),
       ),
     );