kasy-cli 1.37.1 → 1.39.0

package/templates/firebase/lib/core/web_viewport_scale.dart

@@ -2,27 +2,49 @@ import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/widgets.dart';
 import 'package:kasy_kit/core/web_screen_width.dart';
 
-/// Maximum render scale applied to the app on web (desktop breakpoint only).
+/// Render scale applied to the app on web, on EVERY breakpoint (phone, tablet,
+/// desktop).
 ///
-/// Flutter web tends to render ~10% larger than equivalent HTML apps at the
-/// browser's 100% zoom, so the whole UI feels oversized on desktop. `0.95`
-/// brings it to the proportion the design targets (i.e. what 95% zoom looked
-/// like) without the user having to touch the browser zoom. It acts as the cap:
-/// a desktop whose logical width is below the design target (high OS scale)
-/// reduces it further to pin the layout (see [kWebViewportScaleTargetWidth]).
+/// Flutter web renders ~10% larger than an equivalent native/HTML app at the
+/// browser's 100% zoom, at any width — so the whole web UI feels oversized.
+/// `0.95` walks back ~5% so the web app reads close to the native baseline
+/// without the user touching browser zoom — a gentle correction (the exact
+/// midpoint between full size and a total undo) that takes the "oversized" edge
+/// off Flutter web without making things feel small (0.90 fully undoes the 10%
+/// but reads small on a monitor — one number to nudge). On desktop it also acts
+/// as a cap: a
+/// screen below the design target (high OS scale) reduces it further to pin the
+/// layout (see [kWebViewportScaleTargetWidth]); phone/tablet take the flat cap
+/// because those layouts reflow.
 ///
-/// Mobile and tablet web are deliberately left at 1.0 — same as native and as the
-/// device preview, so a developer previewing a phone/tablet sees exactly what the
-/// native build renders. NATIVE is never scaled: the mechanism is gated on
-/// [kIsWeb], so iOS/Android/macOS/Windows apps render at 1.0 and keep respecting
-/// the user's system text-size (accessibility).
+/// Two things are deliberately NOT scaled, both rendering at native 1.0:
+/// - NATIVE itself — the mechanism is gated on [kIsWeb], so iOS/Android/macOS/
+///   Windows render at 1.0 and keep respecting the user's system text-size
+///   (accessibility).
+/// - The in-app DEVICE PREVIEW — it simulates a native device, so it must show
+///   the native 1.0 truth; the scale is skipped once the preview frame is up
+///   (see main.dart, gated on `webDevicePreviewActiveNotifier`).
 const double kWebViewportScale = 0.95;
 
+/// Master on/off for the web render scale — the single knob.
+///
+/// `true` (default): the web app is rendered ~5% smaller than native via
+/// [kWebViewportScale], correcting Flutter web's oversized feel on desktop while
+/// native stays at true 1.0. This is a deliberate, web-only density correction
+/// (the same technique `responsive_framework`'s autoScale productizes), applied
+/// ON TOP OF an already-adaptive layout — not a substitute for it. We verified
+/// nothing overflows/crops without it, so it is a density choice, not a crutch.
+///
+/// `false`: [WebViewportScale.wrap] becomes a true no-op everywhere and the web
+/// app renders at native 1.0. There is no hidden coupling, so this one flag is
+/// the entire on/off — flip it (or set [kWebViewportScale] to `1.0`) to opt out.
+const bool kWebViewportScaleEnabled = true;
+
 /// Design target width (logical px) the desktop shell is laid out against.
 ///
 /// A display with high OS scaling (Windows at 125/150/175%, or a Mac in a scaled
 /// "more space"/"larger text" mode) reports a smaller logical SCREEN width, so the
-/// `0.95` baseline alone left the shell cramped/cropped (the user had to
+/// flat scale alone left the shell cramped/cropped (the user had to
 /// Ctrl-minus). When the screen is below this target the scale drops further
 /// (`screenWidth / kWebViewportScaleTargetWidth`) so the full design still fits.
 /// Compared against the SCREEN width, not the window width — see
@@ -39,34 +61,37 @@ const double kWebViewportScaleDesktopBreakpoint = 1024; // DeviceType.large.brea
 /// Effective web render scale (pure math, unit-testable — see
 /// web_viewport_scale_test.dart).
 ///
-/// [windowWidth] is the browser window width (drives the desktop breakpoint, since
-/// the layout follows the window). [screenWidth] is the physical screen width in
-/// logical px (null = unknown/native).
+/// [windowWidth] is the browser window width. [screenWidth] is the physical
+/// screen width in logical px (null = unknown/native).
 ///
-/// Returns 1.0 below the desktop breakpoint ([kWebViewportScaleDesktopBreakpoint]):
-/// tablet/phone web render at natural size — same as native and the device preview,
-/// so previewing a phone/tablet shows what the native build does.
+/// On tablet/phone web ([windowWidth] below [kWebViewportScaleDesktopBreakpoint])
+/// it returns the flat [maxScale]: those layouts reflow, so they just take the
+/// cap that undoes the ~10% web oversize.
 ///
-/// On desktop it returns the flat [maxScale] cap (0.95) and only drops BELOW it
-/// when the SCREEN is small (high OS scale), via
-/// `screenWidth / kWebViewportScaleTargetWidth`. Keying off the screen — not the
-/// window — is the whole point: merely resizing the browser window narrower does
-/// NOT shrink the UI (the layout just reflows); the extra shrink happens only when
-/// the screen itself is cramped, which is what the compensation is for. With
-/// [screenWidth] null (native, or web before the screen is known) it stays at the
-/// flat cap.
+/// On desktop it returns the flat [maxScale] cap and only drops BELOW it when the
+/// SCREEN is small (high OS scale), via `screenWidth / kWebViewportScaleTargetWidth`.
+/// Keying the compensation off the screen — not the window — is the whole point:
+/// merely resizing the browser window narrower must not shrink the UI further (the
+/// layout just reflows); the extra shrink happens only when the screen itself is
+/// cramped. With [screenWidth] null it stays at the flat cap.
 ///
 /// This is web-only semantics: native never reaches the scaling path (the
-/// [WebViewportScale] widget short-circuits when not on web, via [kIsWeb]), so
-/// iOS/Android and macOS/Windows apps always render at 1.0.
+/// [WebViewportScale] widget short-circuits when not on web, via [kIsWeb]), and
+/// the device preview is skipped too — both render at native 1.0.
 double webViewportEffectiveScale(
   double windowWidth, {
   double? screenWidth,
   double maxScale = kWebViewportScale,
 }) {
-  if (windowWidth < kWebViewportScaleDesktopBreakpoint) return 1.0;
-  final double basis = screenWidth ?? double.infinity;
-  return (basis / kWebViewportScaleTargetWidth).clamp(0.5, maxScale);
+  // Desktop: keep the high-OS-scale compensation (drop below the cap only when
+  // the SCREEN is small, so the full wide desktop design still fits).
+  if (windowWidth >= kWebViewportScaleDesktopBreakpoint) {
+    final double basis = screenWidth ?? double.infinity;
+    return (basis / kWebViewportScaleTargetWidth).clamp(0.5, maxScale);
+  }
+  // Tablet & phone web: the same ~10% oversize applies, but these layouts reflow,
+  // so they take the flat cap (no wide design to fit, no compensation needed).
+  return maxScale;
 }
 
 /// Renders [child] uniformly scaled by [scale] on web (no-op elsewhere).
@@ -85,9 +110,13 @@ class WebViewportScale extends StatelessWidget {
     this.scale = kWebViewportScale,
   });
 
-  /// Wraps [child] on web; returns it untouched on every other platform.
-  static Widget wrap(Widget child) =>
-      kIsWeb ? WebViewportScale(child: child) : child;
+  /// Wraps [child] on web when the scale is enabled; returns it untouched
+  /// otherwise (every non-web platform, and whenever [kWebViewportScaleEnabled]
+  /// is `false`). With the scale off this is a real pass-through — no FittedBox,
+  /// no MediaQuery rewrite — so the web app is byte-for-byte native size.
+  static Widget wrap(Widget child) => (kIsWeb && kWebViewportScaleEnabled)
+      ? WebViewportScale(child: child)
+      : child;
 
   @override
   Widget build(BuildContext context) {

package/templates/firebase/lib/core/widgets/kasy_pressable_depth.dart

@@ -68,6 +68,7 @@ class _KasyPressableDepthState extends ConsumerState<KasyPressableDepth>
   late final AnimationController _depthController;
   Timer? _veilTimer;
   bool _veilVisible = false;
+  bool _hovered = false;
 
   bool get _useVeil =>
       widget.pressOverlayColor != null && widget.clipBorderRadius != null;
@@ -134,10 +135,13 @@ class _KasyPressableDepthState extends ConsumerState<KasyPressableDepth>
       return Transform.scale(scale: _depthScale, child: rawChild);
     }
 
+    // On web the overlay doubles as a hover highlight: a subtle persistent fill
+    // while the pointer is over the control, flashing to full on press. On touch
+    // it only flashes on press (_hovered never becomes true).
     final Widget pressVeil = AnimatedOpacity(
       duration: const Duration(milliseconds: 90),
       curve: Curves.easeOutCubic,
-      opacity: _veilVisible ? 1.0 : 0.0,
+      opacity: _veilVisible ? 1.0 : (_hovered ? 0.6 : 0.0),
       child: IgnorePointer(child: ColoredBox(color: widget.pressOverlayColor!)),
     );
 
@@ -196,7 +200,14 @@ class _KasyPressableDepthState extends ConsumerState<KasyPressableDepth>
 
     if (!kIsWeb) return inner;
 
-    // On web: show pointer cursor only — no hover highlight.
-    return MouseRegion(cursor: SystemMouseCursors.click, child: inner);
+    // On web: pointer cursor + a subtle hover highlight (drives the overlay
+    // opacity above), so buttons feel interactive on hover as expected on the
+    // web. Only meaningful when there's an overlay to show (_useVeil).
+    return MouseRegion(
+      cursor: SystemMouseCursors.click,
+      onEnter: _useVeil ? (_) => setState(() => _hovered = true) : null,
+      onExit: _useVeil ? (_) => setState(() => _hovered = false) : null,
+      child: inner,
+    );
   }
 }

package/templates/firebase/lib/core/widgets/responsive_layout.dart

@@ -179,6 +179,14 @@ class _DeviceSizeBuilderState extends State<DeviceSizeBuilder>
 /// The maximum width for large devices.
 const kMaxLargeLayoutWidth = 650.0;
 
+/// Canonical max width for a single-column internal screen's content (notifications,
+/// settings detail, reminder, ...). On desktop the content is centered within this
+/// width instead of stretching edge-to-edge, so lists/cards never read too wide.
+///
+/// This is the one knob for "contained internal content" — prefer it over bespoke
+/// per-screen `maxWidth` literals so every internal page lines up to the same ruler.
+const double kKasyContentMaxWidth = 600.0;
+
 /// A widget that constrains its child to a maximum width on large devices.
 /// It uses the [LayoutBuilder] widget to get the current device width
 /// and constrains the child to the maximum width on large devices.

package/templates/firebase/lib/features/ai_chat/ui/widgets/ai_chat_composer.dart

@@ -83,7 +83,7 @@ class _AiChatComposerState extends State<AiChatComposer> {
   @override
   Widget build(BuildContext context) {
     final bool enabled = !widget.isReplying;
-    final BorderRadius shellRadius = BorderRadius.circular(22);
+    final BorderRadius shellRadius = BorderRadius.circular(KasyRadius.xl);
     final Color borderColor = KasyShadows.inputFieldRestingBorder(context);
 
     return DecoratedBox(

package/templates/firebase/lib/features/ai_chat/ui/widgets/ai_chat_conversation_view.dart

@@ -205,6 +205,12 @@ class _EmptyState extends StatelessWidget {
   }
 }
 
+/// How much of the available row width a single bubble may occupy. Caps long
+/// messages so they don't stretch edge-to-edge on wide layouts (desktop),
+/// keeping the left/right chat rhythm like WhatsApp. Short messages still hug
+/// their content via [Flexible].
+const double _kMaxBubbleWidthFraction = 0.75;
+
 class _ChatBubble extends StatelessWidget {
   const _ChatBubble({required this.message, required this.isUser});
 
@@ -223,50 +229,61 @@ class _ChatBubble extends StatelessWidget {
             ? context.colors.primary
             : context.colors.onBackground.withValues(alpha: 0.06),
         borderRadius: BorderRadius.only(
-          topLeft: const Radius.circular(16),
-          topRight: const Radius.circular(16),
+          topLeft: const Radius.circular(KasyRadius.lg),
+          topRight: const Radius.circular(KasyRadius.lg),
           bottomLeft: isUser
-              ? const Radius.circular(16)
-              : const Radius.circular(4),
+              ? const Radius.circular(KasyRadius.lg)
+              : const Radius.circular(KasyRadius.xs),
           bottomRight: isUser
-              ? const Radius.circular(4)
-              : const Radius.circular(16),
+              ? const Radius.circular(KasyRadius.xs)
+              : const Radius.circular(KasyRadius.lg),
         ),
       ),
       child: Text(
         message.content,
-        style: context.textTheme.bodyMedium?.copyWith(
+        style: context.textTheme.bodyLarge?.copyWith(
           color: isUser ? context.colors.onPrimary : context.colors.onBackground,
           height: 1.4,
         ),
       ),
     );
 
-    if (isUser) {
-      return Padding(
-        padding: const EdgeInsets.only(bottom: KasySpacing.sm),
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.end,
-          crossAxisAlignment: CrossAxisAlignment.end,
-          children: [
-            Flexible(child: bubble),
-            const SizedBox(width: KasySpacing.xs),
-            const AiChatUserAvatar(),
-          ],
-        ),
-      );
-    }
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final Widget cappedBubble = ConstrainedBox(
+          constraints: BoxConstraints(
+            maxWidth: constraints.maxWidth * _kMaxBubbleWidthFraction,
+          ),
+          child: bubble,
+        );
 
-    return Padding(
-      padding: const EdgeInsets.only(bottom: KasySpacing.sm),
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          const AiChatAssistantAvatar(),
-          const SizedBox(width: KasySpacing.xs),
-          Flexible(child: bubble),
-        ],
-      ),
+        if (isUser) {
+          return Padding(
+            padding: const EdgeInsets.only(bottom: KasySpacing.sm),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              crossAxisAlignment: CrossAxisAlignment.end,
+              children: [
+                Flexible(child: cappedBubble),
+                const SizedBox(width: KasySpacing.xs),
+                const AiChatUserAvatar(),
+              ],
+            ),
+          );
+        }
+
+        return Padding(
+          padding: const EdgeInsets.only(bottom: KasySpacing.sm),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              const AiChatAssistantAvatar(),
+              const SizedBox(width: KasySpacing.xs),
+              Flexible(child: cappedBubble),
+            ],
+          ),
+        );
+      },
     );
   }
 }
@@ -327,10 +344,10 @@ class _TypingIndicatorState extends State<_TypingIndicator>
       decoration: BoxDecoration(
         color: context.colors.onBackground.withValues(alpha: 0.06),
         borderRadius: const BorderRadius.only(
-          topLeft: Radius.circular(16),
-          topRight: Radius.circular(16),
-          bottomLeft: Radius.circular(4),
-          bottomRight: Radius.circular(16),
+          topLeft: Radius.circular(KasyRadius.lg),
+          topRight: Radius.circular(KasyRadius.lg),
+          bottomLeft: Radius.circular(KasyRadius.xs),
+          bottomRight: Radius.circular(KasyRadius.lg),
         ),
       ),
       child: Row(

package/templates/firebase/lib/features/ai_chat/ui/widgets/ai_conversation_list.dart

@@ -126,7 +126,7 @@ class AiConversationList extends ConsumerWidget {
       padding: const EdgeInsets.symmetric(horizontal: KasySpacing.lg),
       decoration: BoxDecoration(
         color: context.colors.surfaceErrorSoft,
-        borderRadius: BorderRadius.circular(16),
+        borderRadius: BorderRadius.circular(KasyRadius.lg),
       ),
       child: Icon(KasyIcons.trash, color: context.colors.error),
     );

package/templates/firebase/lib/features/ai_chat/ui/widgets/ai_conversation_tile.dart

@@ -57,7 +57,7 @@ class _AiConversationTileState extends ConsumerState<AiConversationTile> {
         color: widget.selected
             ? context.colors.accentSoft
             : (_hovered ? context.colors.surfaceNeutralSoft : null),
-        borderRadius: BorderRadius.circular(16),
+        borderRadius: BorderRadius.circular(KasyRadius.lg),
       ),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -75,7 +75,7 @@ class _AiConversationTileState extends ConsumerState<AiConversationTile> {
                         title,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
-                        style: context.kasyTextTheme.rowTitle.copyWith(
+                        style: context.kasyTextTheme.listRowTitle.copyWith(
                           color: titleColor,
                         ),
                       ),
@@ -89,7 +89,7 @@ class _AiConversationTileState extends ConsumerState<AiConversationTile> {
                   preview,
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
-                  style: context.textTheme.bodySmall?.copyWith(
+                  style: context.textTheme.bodyMedium?.copyWith(
                     color: subtitleColor,
                   ),
                 ),
@@ -106,7 +106,7 @@ class _AiConversationTileState extends ConsumerState<AiConversationTile> {
       label: title,
       child: KasyFocusRing(
         onActivate: widget.onTap,
-        borderRadius: BorderRadius.circular(16),
+        borderRadius: BorderRadius.circular(KasyRadius.lg),
         child: GestureDetector(
           behavior: HitTestBehavior.opaque,
           onTap: widget.onTap,
@@ -129,10 +129,20 @@ class _AiConversationTileState extends ConsumerState<AiConversationTile> {
     if (kIsWeb && _hovered) {
       return SizedBox(
         height: 16,
-        child: InkResponse(
-          onTap: widget.onDelete,
-          radius: 18,
-          child: Icon(KasyIcons.trash, size: KasyIconSize.sm, color: context.colors.error),
+        // Plain pointer-cursor tap (no Material ripple), consistent with the
+        // rest of the kit's web controls. The icon only appears while the row
+        // is hovered, so it's already a pointer-only affordance.
+        child: MouseRegion(
+          cursor: SystemMouseCursors.click,
+          child: GestureDetector(
+            behavior: HitTestBehavior.opaque,
+            onTap: widget.onDelete,
+            child: Icon(
+              KasyIcons.trash,
+              size: KasyIconSize.sm,
+              color: context.colors.error,
+            ),
+          ),
         ),
       );
     }

package/templates/firebase/lib/features/authentication/ui/signin_page.dart

@@ -8,10 +8,8 @@ import 'package:kasy_kit/components/components.dart';
 import 'package:kasy_kit/core/bottom_menu/web_url.dart';
 import 'package:kasy_kit/core/config/features.dart';
 import 'package:kasy_kit/core/data/models/user.dart';
-import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
 import 'package:kasy_kit/core/states/user_state_notifier.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_pressable_depth.dart';
 import 'package:kasy_kit/environments.dart';
 import 'package:kasy_kit/features/authentication/providers/models/email.dart';
@@ -20,6 +18,7 @@ import 'package:kasy_kit/features/authentication/providers/models/signin_state.d
 import 'package:kasy_kit/features/authentication/providers/signin_state_provider.dart';
 import 'package:kasy_kit/features/authentication/ui/widgets/auth_card_scaffold.dart';
 import 'package:kasy_kit/features/authentication/ui/widgets/auth_page_back_button.dart';
+import 'package:kasy_kit/features/authentication/ui/widgets/social_auth_tile.dart';
 import 'package:kasy_kit/features/authentication/ui/widgets/social_separator.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 
@@ -323,9 +322,9 @@ class _SocialSigninRow extends ConsumerWidget {
     return Row(
       children: [
         Expanded(
-          child: _SocialSigninTile(
+          child: SocialAuthButton(
             label: t.auth.signin.google,
-            icon: Image.asset('assets/icons/google.png', width: 20, height: 20),
+            iconAsset: 'assets/icons/google.svg',
             onPressed: isSending
                 ? null
                 : () =>
@@ -335,9 +334,13 @@ class _SocialSigninRow extends ConsumerWidget {
         if (showApple) ...[
           const SizedBox(width: KasySpacing.sm),
           Expanded(
-            child: _SocialSigninTile(
+            child: SocialAuthButton(
               label: t.auth.signin.apple,
-              icon: Image.asset('assets/icons/apple.png', width: 20, height: 20),
+              // Apple's mark is officially black-on-light / white-on-dark, so
+              // pick the variant that stays visible on the current theme.
+              iconAsset: context.isDark
+                  ? 'assets/icons/apple_white.svg'
+                  : 'assets/icons/apple_black.svg',
               onPressed: isSending
                   ? null
                   : () => ref
@@ -349,13 +352,9 @@ class _SocialSigninRow extends ConsumerWidget {
         if (showFacebook) ...[
           const SizedBox(width: KasySpacing.sm),
           Expanded(
-            child: _SocialSigninTile(
+            child: SocialAuthButton(
               label: t.auth.signin.facebook,
-              icon: Image.asset(
-                'assets/icons/facebook.png',
-                width: 20,
-                height: 20,
-              ),
+              iconAsset: 'assets/icons/facebook.svg',
               onPressed: isSending
                   ? null
                   : () => ref
@@ -369,52 +368,3 @@ class _SocialSigninRow extends ConsumerWidget {
   }
 }
 
-class _SocialSigninTile extends StatelessWidget {
-  const _SocialSigninTile({
-    required this.label,
-    required this.icon,
-    required this.onPressed,
-  });
-
-  final String label;
-  final Widget icon;
-  final VoidCallback? onPressed;
-
-  @override
-  Widget build(BuildContext context) {
-    final bool enabled = onPressed != null;
-    void handleTap() {
-      KasyHaptics.medium(context);
-      onPressed?.call();
-    }
-    return KasyFocusRing(
-      enabled: enabled,
-      onActivate: handleTap,
-      borderRadius: BorderRadius.circular(KasyRadius.sm),
-      child: Material(
-        color: Colors.transparent,
-        child: InkWell(
-          // Focus + keyboard activation live in KasyFocusRing; the InkWell keeps
-          // its tap ripple but doesn't take focus, so the ring is the only Tab
-          // stop and matches every other button's focus outline.
-          canRequestFocus: false,
-          onTap: enabled ? handleTap : null,
-          borderRadius: BorderRadius.circular(KasyRadius.md),
-          child: Ink(
-            height: 44,
-            decoration: BoxDecoration(
-              color: context.colors.surface,
-              borderRadius: BorderRadius.circular(KasyRadius.sm),
-              border: Border.all(
-                color: context.colors.outline.withValues(alpha: 0.38),
-              ),
-            ),
-            child: Center(
-              child: Semantics(button: true, label: label, child: icon),
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}

package/templates/firebase/lib/features/authentication/ui/signup_page.dart

@@ -7,10 +7,8 @@ import 'package:go_router/go_router.dart';
 import 'package:kasy_kit/components/components.dart';
 import 'package:kasy_kit/core/config/features.dart';
 import 'package:kasy_kit/core/data/models/user.dart';
-import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
 import 'package:kasy_kit/core/states/user_state_notifier.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_pressable_depth.dart';
 import 'package:kasy_kit/features/authentication/providers/models/email.dart';
 import 'package:kasy_kit/features/authentication/providers/models/password.dart';
@@ -20,6 +18,7 @@ import 'package:kasy_kit/features/authentication/providers/signin_state_provider
 import 'package:kasy_kit/features/authentication/providers/signup_state_provider.dart';
 import 'package:kasy_kit/features/authentication/ui/widgets/auth_card_scaffold.dart';
 import 'package:kasy_kit/features/authentication/ui/widgets/auth_page_back_button.dart';
+import 'package:kasy_kit/features/authentication/ui/widgets/social_auth_tile.dart';
 import 'package:kasy_kit/features/authentication/ui/widgets/social_separator.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 
@@ -223,9 +222,9 @@ class _SocialSignupRow extends ConsumerWidget {
     return Row(
       children: [
         Expanded(
-          child: _SocialSignupTile(
+          child: SocialAuthButton(
             label: t.auth.signin.google,
-            icon: Image.asset('assets/icons/google.png', width: 20, height: 20),
+            iconAsset: 'assets/icons/google.svg',
             onPressed: isSending
                 ? null
                 : () =>
@@ -235,9 +234,13 @@ class _SocialSignupRow extends ConsumerWidget {
         if (showApple) ...[
           const SizedBox(width: KasySpacing.sm),
           Expanded(
-            child: _SocialSignupTile(
+            child: SocialAuthButton(
               label: t.auth.signin.apple,
-              icon: Image.asset('assets/icons/apple.png', width: 20, height: 20),
+              // Apple's mark is officially black-on-light / white-on-dark, so
+              // pick the variant that stays visible on the current theme.
+              iconAsset: context.isDark
+                  ? 'assets/icons/apple_white.svg'
+                  : 'assets/icons/apple_black.svg',
               onPressed: isSending
                   ? null
                   : () => ref
@@ -249,13 +252,9 @@ class _SocialSignupRow extends ConsumerWidget {
         if (showFacebook) ...[
           const SizedBox(width: KasySpacing.sm),
           Expanded(
-            child: _SocialSignupTile(
+            child: SocialAuthButton(
               label: t.auth.signin.facebook,
-              icon: Image.asset(
-                'assets/icons/facebook.png',
-                width: 20,
-                height: 20,
-              ),
+              iconAsset: 'assets/icons/facebook.svg',
               onPressed: isSending
                   ? null
                   : () => ref
@@ -269,52 +268,3 @@ class _SocialSignupRow extends ConsumerWidget {
   }
 }
 
-class _SocialSignupTile extends StatelessWidget {
-  const _SocialSignupTile({
-    required this.label,
-    required this.icon,
-    required this.onPressed,
-  });
-
-  final String label;
-  final Widget icon;
-  final VoidCallback? onPressed;
-
-  @override
-  Widget build(BuildContext context) {
-    final bool enabled = onPressed != null;
-    void handleTap() {
-      KasyHaptics.medium(context);
-      onPressed?.call();
-    }
-    return KasyFocusRing(
-      enabled: enabled,
-      onActivate: handleTap,
-      borderRadius: BorderRadius.circular(KasyRadius.sm),
-      child: Material(
-        color: Colors.transparent,
-        child: InkWell(
-          // Focus + keyboard activation live in KasyFocusRing; the InkWell keeps
-          // its tap ripple but doesn't take focus, so the ring is the only Tab
-          // stop and matches every other button's focus outline.
-          canRequestFocus: false,
-          onTap: enabled ? handleTap : null,
-          borderRadius: BorderRadius.circular(KasyRadius.md),
-          child: Ink(
-            height: 44,
-            decoration: BoxDecoration(
-              color: context.colors.surface,
-              borderRadius: BorderRadius.circular(KasyRadius.sm),
-              border: Border.all(
-                color: context.colors.outline.withValues(alpha: 0.38),
-              ),
-            ),
-            child: Center(
-              child: Semantics(button: true, label: label, child: icon),
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}