kasy-cli 1.31.13 → 1.32.0

package/templates/firebase/lib/core/bottom_menu/notification_bottom_item.dart

@@ -1,48 +1,27 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
-import 'package:kasy_kit/features/notifications/repositories/notifications_repository.dart';
+import 'package:kasy_kit/features/notifications/providers/unread_notifications_count_provider.dart';
 
-class BottomItemNotification extends ConsumerStatefulWidget {
+/// Bottom-bar notifications icon with an unread-count badge.
+///
+/// The badge is purely an unread indicator (works on web too) — it is not tied
+/// to push notifications, which are native-only. The count comes from the shared
+/// [unreadNotificationsCountProvider], which re-subscribes per signed-in user.
+class BottomItemNotification extends ConsumerWidget {
   const BottomItemNotification({super.key});
 
   @override
-  ConsumerState<ConsumerStatefulWidget> createState() =>
-      _BottomItemNotificationState();
-}
-
-class _BottomItemNotificationState
-    extends ConsumerState<BottomItemNotification> {
-  Stream<int>? _count$;
-
-  @override
-  Widget build(BuildContext context) {
-    final String? userId =
-        ref.watch(userStateNotifierProvider).user.idOrNull;
+  Widget build(BuildContext context, WidgetRef ref) {
     const icon = Icon(KasyIcons.notification);
-
-    if (userId == null) {
-      return icon;
-    }
-
-    _count$ ??= ref
-        .read(notificationRepositoryProvider)
-        .listenToUnreadNotificationsCount(userId);
-
-    return StreamBuilder<int>(
-      key: const ValueKey('notification-count'),
-      stream: _count$,
-      builder: (context, snapshot) {
-        final count = snapshot.data ?? 0;
-        if (count == 0) return icon;
-        return Badge(
-          backgroundColor: context.colors.error,
-          textColor: context.colors.onPrimary,
-          label: Text(count > 99 ? '99+' : '$count'),
-          child: icon,
-        );
-      },
+    final int count =
+        ref.watch(unreadNotificationsCountProvider).value ?? 0;
+    if (count == 0) return icon;
+    return Badge(
+      backgroundColor: context.colors.error,
+      textColor: context.colors.onError,
+      label: Text(count > 99 ? '99+' : '$count'),
+      child: icon,
     );
   }
 }

package/templates/firebase/lib/core/config/features.dart

@@ -6,6 +6,12 @@ const bool withAiChat    = true;
 const bool withFeedback            = true;
 const bool withRevenuecat          = true;
 const bool withLocalReminders  = true;
+/// When true, the Apple sign-in button is shown on WEB. Apple-on-web needs a paid
+/// Apple Service ID + manual setup (see docs/auth-setup): Firebase can do it
+/// (signInWithPopup), so this ships `true`; Supabase/API can't (no web secret), so
+/// the CLI generates them as `false`. Apple shows on iOS/macOS regardless; it is
+/// hidden on Android (also needs a paid Service ID, and the native flow throws).
+const bool withAppleWebSignin = true;
 /// When true, the app includes web support:
 ///   - anonymous sign-up is disabled on web (user is redirected to /signin)
 ///   - onboarding is skipped on web
@@ -14,3 +20,10 @@ const bool withWeb = true;
 /// When true, the Stripe web-subscription module is included (web checkout +
 /// customer portal). Independent from RevenueCat (which stays mobile-only).
 const bool withStripe = true;
+/// When true, Stripe Checkout shows a promo-code / coupon field.
+/// Set to false if you have no promotions strategy yet.
+const bool withStripePromoCodes = true;
+/// When true, the Stripe Customer Portal lets subscribers switch plans
+/// (upgrade / downgrade). Requires at least two recurring prices on the same
+/// product. The portal configuration is created automatically on first use.
+const bool withStripePlanSwitching = true;

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

@@ -36,6 +36,13 @@ final ValueNotifier<bool> devInspectorEnabledNotifier =
 final ValueNotifier<bool> devInspectorCopyTriggerNotifier =
     ValueNotifier<bool>(false);
 
+/// Set to true to clear the current selection WITHOUT deactivating the
+/// inspector. The Web Device Preview toggle fires this when entering/leaving
+/// the device frame so a stale highlight doesn't linger across the transition.
+/// [DevInspector] clears the selection and resets this to false.
+final ValueNotifier<bool> devInspectorClearSelectionTriggerNotifier =
+    ValueNotifier<bool>(false);
+
 /// Runtime active state of the inspector. Mirrors [devInspectorEnabledNotifier]
 /// — the Web Device Preview pill, the admin toggle and the Esc shortcut all
 /// flip the persisted notifier, and this one follows.
@@ -127,6 +134,8 @@ class _DevInspectorState extends State<DevInspector>
     devInspectorActiveNotifier.addListener(_handleActiveChanged);
     devInspectorEnabledNotifier.addListener(_handleEnabledChanged);
     devInspectorCopyTriggerNotifier.addListener(_onCopyTriggered);
+    devInspectorClearSelectionTriggerNotifier
+        .addListener(_onClearSelectionTriggered);
     HardwareKeyboard.instance.addHandler(_handleKeyEvent);
     unawaited(_bootstrapEnabledPreference());
   }
@@ -139,6 +148,8 @@ class _DevInspectorState extends State<DevInspector>
     HardwareKeyboard.instance.removeHandler(_handleKeyEvent);
     devInspectorEnabledNotifier.removeListener(_handleEnabledChanged);
     devInspectorCopyTriggerNotifier.removeListener(_onCopyTriggered);
+    devInspectorClearSelectionTriggerNotifier
+        .removeListener(_onClearSelectionTriggered);
     devInspectorActiveNotifier.removeListener(_handleActiveChanged);
     if (devInspectorActiveNotifier.value) {
       devInspectorActiveNotifier.value = false;
@@ -312,6 +323,16 @@ class _DevInspectorState extends State<DevInspector>
     unawaited(_copySelection());
   }
 
+  /// Drops the current selection while keeping the inspector active, so a stale
+  /// highlight doesn't carry over when the Web Device Preview is toggled.
+  void _onClearSelectionTriggered() {
+    if (!devInspectorClearSelectionTriggerNotifier.value) return;
+    devInspectorClearSelectionTriggerNotifier.value = false;
+    if (!mounted) return;
+    if (_selectedInfo == null && _selectedRender == null) return;
+    setState(_clearSelection);
+  }
+
   void _handleActiveChanged() {
     final bool active = devInspectorActiveNotifier.value;
     if (_active == active) return;

package/templates/firebase/lib/core/rating/widgets/rate_banner.dart

@@ -127,7 +127,7 @@ class RateBannerWidget extends StatelessWidget {
               color: cs.primary.withValues(alpha: 0.12),
               shape: BoxShape.circle,
             ),
-            child: Icon(KasyIcons.star, color: cs.primary, size: 28),
+            child: Icon(KasyIcons.star, color: cs.primary, size: KasyIconSize.xxl),
           ),
           const SizedBox(height: KasySpacing.md),
           Text(

package/templates/firebase/lib/core/rating/widgets/review_popup.dart

@@ -165,7 +165,7 @@ class CloseIcon extends StatelessWidget {
             child: Icon(
               KasyIcons.close,
               color: context.colors.onBackground,
-              size: 21,
+              size: KasyIconSize.lg,
             ),
           ),
         ),

package/templates/firebase/lib/core/theme/icon_sizes.dart

@@ -0,0 +1,47 @@
+/// Kasy Design System — Icon Size Tokens
+///
+/// Single source of truth for every icon dimension in the app. Screens and
+/// components must read from here instead of hardcoding `size: 20` etc., so the
+/// whole product can be re-scaled from one place.
+///
+/// Usage: `Icon(KasyIcons.person, size: KasyIconSize.rowLeading)`
+///
+/// Scale reference:
+/// xxs  → 12   micro glyphs inside small badges
+/// xs   → 14   tiny, dense inline glyphs
+/// sm   → 16   secondary / trailing (chevrons, value adornments)
+/// md   → 18   inline-with-text (chips, accordions, alerts)
+/// lg   → 20   default — list-row leading icons, chrome actions
+/// xl   → 24   prominent / large chrome
+/// xxl  → 28   feature highlights
+/// display → 36   illustrative glyphs (empty states, brand badges)
+/// hero → 72   hero glyph at the top of a focused screen (auth, onboarding)
+class KasyIconSize {
+  KasyIconSize._();
+
+  static const double xxs = 12;
+  static const double xs = 14;
+  static const double sm = 16;
+  static const double md = 18;
+  static const double lg = 20;
+  static const double xl = 24;
+  static const double xxl = 28;
+  static const double display = 36;
+  static const double hero = 72;
+
+  // ── Semantic aliases ─────────────────────────────────────────────────────
+  // Prefer these in screens so intent is explicit and a single edit re-scales
+  // every row/chrome at once.
+
+  /// Leading icon in a list / settings row (the standard list glyph).
+  static const double rowLeading = lg; // 20
+
+  /// Trailing affordance in a row — chevron, small value adornment.
+  static const double rowTrailing = sm; // 16
+
+  /// Action icons in the top/bottom chrome (app bar orbs, nav).
+  static const double chrome = lg; // 20
+
+  /// Glyph sitting inline next to body text (chips, inline status).
+  static const double inline = md; // 18
+}

package/templates/firebase/lib/core/theme/shadows.dart

@@ -38,6 +38,19 @@ class KasyShadows {
     );
   }
 
+  /// Resting border for the FLAT [KasyTextField] / [KasyTextArea] variant.
+  ///
+  /// Flat fields share their container's fill (no fill contrast) and cast no
+  /// shadow, so the border alone separates them from the surface behind. It is
+  /// derived from `onSurface` (not the fixed-hue `outline` token) so it reads
+  /// clearly in BOTH modes: a soft dark hairline on light, a soft light
+  /// hairline on dark — where the regular hairline would vanish.
+  static Color inputFieldFlatBorder(BuildContext context) {
+    return context.colors.onSurface.withValues(
+      alpha: context.isDark ? 0.16 : 0.12,
+    );
+  }
+
   /// Standard shadow for input surfaces ([KasyTextField] and [KasyTextArea]).
   ///
   /// Slightly tighter and softer than [component] — native only (callers skip on web).

package/templates/firebase/lib/core/theme/texts.dart

@@ -54,6 +54,38 @@ class KasyTextTheme extends ThemeExtension<KasyTextTheme> {
   static TextStyle get buttonBase => _inter(FontWeight.w500, 16, 24);
   static TextStyle get buttonSm => _inter(FontWeight.w500, 14, 20);
 
+  // -----------------------------------------------------------------------
+  // Semantic app roles — name the recurring UI text roles so screens stop
+  // hand-tuning slots with copyWith(fontSize/fontWeight/...). Each composes a
+  // scale role above; restyle a role app-wide by editing it here once.
+  // Apply color at the call site (.copyWith(color: ...)); the scale is colorless.
+  // -----------------------------------------------------------------------
+
+  /// Top-level page title (auth, paywall, full-screen flows). 24 / w700.
+  static TextStyle get pageTitle => heading2;
+
+  /// Section or master-detail pane title (Settings detail, grouped areas). 16 / w600.
+  static TextStyle get sectionTitle => heading4;
+
+  /// Small header above a grouped list (e.g. "PREFERENCES"). 12 / w600, lightly tracked.
+  static TextStyle get sectionLabel =>
+      _inter(FontWeight.w600, 12, 16).copyWith(letterSpacing: 0.5);
+
+  /// Primary text of a list / settings row. 14 / w500.
+  static TextStyle get rowTitle => bodySmMedium;
+
+  /// Secondary / value text in a row (apply a muted color at the call site). 14 / w400.
+  static TextStyle get rowValue => bodySm;
+
+  /// Card title. 14 / w500.
+  static TextStyle get cardTitle => bodySmMedium;
+
+  /// Card subtitle / supporting line. 12 / w400.
+  static TextStyle get cardSubtitle => bodyXs;
+
+  /// Caption, hint, version label, footnote. 12 / w400.
+  static TextStyle get caption => bodyXs;
+
   // -----------------------------------------------------------------------
   // Display — large hero text (extends the HeroUI scale upward in Inter)
   // -----------------------------------------------------------------------

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

@@ -9,11 +9,13 @@
 ///   KasyTextTheme → context.textTheme.bodyMedium / .titleLarge / etc.
 ///   KasySpacing   → KasySpacing.md (16) / .lg (24) / etc.
 ///   KasyRadius    → KasyRadius.smBorderRadius / .lgBorderRadius / etc.
+///   KasyIconSize  → KasyIconSize.rowLeading (20) / .rowTrailing (16) / etc.
 library;
 
 export '../icons/kasy_icons.dart';
 export 'colors.dart';
 export 'extensions/theme_extension.dart';
+export 'icon_sizes.dart';
 export 'providers/theme_provider.dart';
 export 'radius.dart';
 export 'shadows.dart';

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

@@ -189,6 +189,9 @@ class _WebDevicePreviewState extends State<WebDevicePreview>
     // the DevInspector's in-app status pill while the preview is on.
     devInspectorSuppressStatusPillNotifier.value =
         webDevicePreviewEnabledNotifier.value;
+    // Entering or leaving the device frame: drop any lingering inspector
+    // selection so an old highlight doesn't carry across the transition.
+    devInspectorClearSelectionTriggerNotifier.value = true;
     if (webDevicePreviewEnabledNotifier.value) {
       _controlsTimer?.cancel();
       _controlsTimer = Timer(const Duration(milliseconds: 800), () {

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

@@ -1,14 +1,25 @@
 import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/widgets.dart';
 
-/// Global render scale applied to the app on web.
+/// Maximum render scale applied to the app on web (used on wide viewports).
 ///
 /// 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.
+/// like) without the user having to touch the browser zoom. On narrower
+/// viewports the effective scale is reduced further (see [kWebViewportScaleTargetWidth]).
 const double kWebViewportScale = 0.95;
 
+/// Design target width (logical px) the desktop shell is laid out against.
+///
+/// A high-DPI display with OS scaling (Windows at 125/150/175%) reports a
+/// smaller logical viewport width than a Mac at the same physical size, so a
+/// fixed [kWebViewportScale] left the shell laid out narrower than the design
+/// target and it looked cropped (the user had to Ctrl-minus). Scaling by
+/// `width / kWebViewportScaleTargetWidth` instead pins the logical layout width
+/// to this target on those displays, so Mac and Windows render the same.
+const double kWebViewportScaleTargetWidth = 1280;
+
 /// Minimum real viewport width (logical px) at which the web scale kicks in.
 ///
 /// The "oversized" problem only shows up on tablet/desktop layouts. On mobile
@@ -44,9 +55,17 @@ class WebViewportScale extends StatelessWidget {
     // Mobile web (narrow browser) renders at its natural size, just like the
     // native build. The scale only applies from the tablet breakpoint up.
     if (mq.size.width < kWebViewportScaleMinWidth) return child;
+    // Width-aware scale: on a wide viewport keep [scale] (0.95); on a high-DPI
+    // display with OS scaling the browser reports a smaller logical width, so
+    // scale down just enough to lay the shell out at the design target width
+    // instead of cropping it. Mac (wide) stays at 0.95; Windows at 125/150/175%
+    // shrinks proportionally so both look identical.
+    final double effectiveScale =
+        (mq.size.width / kWebViewportScaleTargetWidth).clamp(0.5, scale);
+    if (effectiveScale == 1.0) return child;
     final Size logicalSize = Size(
-      mq.size.width / scale,
-      mq.size.height / scale,
+      mq.size.width / effectiveScale,
+      mq.size.height / effectiveScale,
     );
     return MediaQuery(
       data: mq.copyWith(size: logicalSize),

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

@@ -81,7 +81,7 @@ class _UpdateBottomSheet extends StatelessWidget {
                     child: Icon(
                       KasyIcons.star,
                       color: context.colors.primary,
-                      size: 24,
+                      size: KasyIconSize.xl,
                     ),
                   ),
                   const SizedBox(width: KasySpacing.md),

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

@@ -133,7 +133,7 @@ class _AiConversationTileState extends ConsumerState<AiConversationTile> {
         child: InkResponse(
           onTap: widget.onDelete,
           radius: 18,
-          child: Icon(KasyIcons.trash, size: 16, color: context.colors.error),
+          child: Icon(KasyIcons.trash, size: KasyIconSize.sm, color: context.colors.error),
         ),
       );
     }

package/templates/firebase/lib/features/authentication/ui/components/otp_verification.dart

@@ -32,7 +32,7 @@ class _OtpVerificationComponentState
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
         const SizedBox(height: KasySpacing.lg),
-        Icon(KasyIcons.sms, size: 72, color: context.colors.primary),
+        Icon(KasyIcons.sms, size: KasyIconSize.hero, color: context.colors.primary),
         const SizedBox(height: KasySpacing.lg),
         Text(
           t.phone_auth.verification_code,

package/templates/firebase/lib/features/authentication/ui/components/phone_input.dart

@@ -34,7 +34,7 @@ class _PhoneInputComponentState extends ConsumerState<PhoneInputComponent> {
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
           const SizedBox(height: KasySpacing.lg),
-          Icon(KasyIcons.phoneAndroid, size: 72, color: context.colors.primary),
+          Icon(KasyIcons.phoneAndroid, size: KasyIconSize.hero, color: context.colors.primary),
           const SizedBox(height: KasySpacing.lg),
           Text(
             t.phone_auth.subtitle_input,
@@ -71,6 +71,7 @@ class _PhoneInputComponentState extends ConsumerState<PhoneInputComponent> {
               ),
             ),
           KasyTextField(
+            variant: KasyTextFieldVariant.flat,
             controller: _phoneController,
             keyboardType: TextInputType.phone,
             label: t.phone_auth.phone_label,

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

@@ -53,6 +53,7 @@ class RecoverPasswordPage extends ConsumerWidget {
                   subtitle: t.auth.recover.subtitle,
                   children: [
                     KasyTextField(
+                      variant: KasyTextFieldVariant.flat,
                       key: const Key('email_input'),
                       label: t.auth.recover.email_label,
                       contentType: KasyTextFieldContentType.email,
@@ -124,7 +125,8 @@ class _BackToSigninPrompt extends StatelessWidget {
                   context.go('/signin');
                 }
               },
-              focusable: true,
+              // Secondary link: kept out of Tab traversal (focusable defaults to
+              // false) so keyboard/next flows email → submit, not this link.
               child: Text(
                 t.auth.recover.signin_link,
                 style: context.textTheme.bodyMedium?.copyWith(

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

@@ -1,9 +1,11 @@
 import 'dart:ui';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 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';
@@ -64,6 +66,7 @@ class SigninPage extends ConsumerWidget {
                   subtitle: t.auth.signin.subtitle,
                   children: [
                       KasyTextField(
+                        variant: KasyTextFieldVariant.flat,
                         key: const Key('email_input'),
                         onChanged: (value) => ref
                             .read(signinStateProvider.notifier)
@@ -83,6 +86,7 @@ class SigninPage extends ConsumerWidget {
                       ),
                       const SizedBox(height: _authFieldSpacing),
                       KasyTextField(
+                        variant: KasyTextFieldVariant.flat,
                         key: const Key('password_input'),
                         onChanged: (newValue) => ref
                             .read(signinStateProvider.notifier)
@@ -98,10 +102,15 @@ class SigninPage extends ConsumerWidget {
                                 FocusScope.of(context).unfocus();
                                 ref.read(signinStateProvider.notifier).signin();
                               },
-                        labelTrailing: KasyFocusRing(
-                          onActivate: () => context.push('/recover_password'),
-                          borderRadius: BorderRadius.circular(KasyRadius.sm),
+                        // Secondary link: intentionally NOT a Tab stop, so
+                        // Tab/next flows email → password → submit → social
+                        // buttons. Still tappable by mouse/touch and announced
+                        // to screen readers as a button.
+                        labelTrailing: Semantics(
+                          button: true,
+                          label: t.auth.signin.forgot_password,
                           child: GestureDetector(
+                            behavior: HitTestBehavior.opaque,
                             onTap: () => context.push('/recover_password'),
                             child: Text(
                               t.auth.signin.forgot_password,
@@ -195,7 +204,9 @@ class _SignupPrompt extends StatelessWidget {
             KasyPressableDepth(
               semanticLabel: t.auth.signin.signup_link,
               onPressed: () => context.pushReplacement('/signup'),
-              focusable: true,
+              // Secondary link: kept out of Tab traversal (focusable defaults to
+              // false) so keyboard/next jumps straight to the social sign-in
+              // buttons (the most-used path).
               child: Text(
                 t.auth.signin.signup_link,
                 style: context.textTheme.bodyMedium?.copyWith(
@@ -218,6 +229,14 @@ class _SocialSigninRow extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final state = ref.watch(signinStateProvider);
     final isSending = state is SigninStateSending;
+    // Apple sign-in is reliable only on Apple-native platforms (iOS/macOS). On web
+    // it needs a paid Apple Service ID + manual console setup (see auth docs), gated
+    // by withAppleWebSignin (off by default). On Android it needs the same Service ID
+    // and the Supabase/API native flow throws, so Apple is hidden there.
+    final bool showApple = kIsWeb
+        ? withAppleWebSignin
+        : (defaultTargetPlatform == TargetPlatform.iOS ||
+            defaultTargetPlatform == TargetPlatform.macOS);
     return Row(
       children: [
         Expanded(
@@ -230,17 +249,20 @@ class _SocialSigninRow extends ConsumerWidget {
                       ref.read(signinStateProvider.notifier).signinWithGoogle(),
           ),
         ),
-        const SizedBox(width: KasySpacing.sm),
-        Expanded(
-          child: _SocialSigninTile(
-            label: t.auth.signin.apple,
-            icon: Image.asset('assets/icons/apple.png', width: 20, height: 20),
-            onPressed: isSending
-                ? null
-                : () =>
-                      ref.read(signinStateProvider.notifier).signinWithApple(),
+        if (showApple) ...[
+          const SizedBox(width: KasySpacing.sm),
+          Expanded(
+            child: _SocialSigninTile(
+              label: t.auth.signin.apple,
+              icon: Image.asset('assets/icons/apple.png', width: 20, height: 20),
+              onPressed: isSending
+                  ? null
+                  : () => ref
+                        .read(signinStateProvider.notifier)
+                        .signinWithApple(),
+            ),
           ),
-        ),
+        ],
         const SizedBox(width: KasySpacing.sm),
         Expanded(
           child: _SocialSigninTile(

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

@@ -1,9 +1,11 @@
 import 'dart:ui';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 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';
@@ -60,6 +62,7 @@ class SignupPage extends ConsumerWidget {
                   subtitle: t.auth.signup.subtitle,
                   children: [
                       KasyTextField(
+                        variant: KasyTextFieldVariant.flat,
                         key: const Key('email_input'),
                         onChanged: (value) => ref
                             .read(signupStateProvider.notifier)
@@ -79,6 +82,7 @@ class SignupPage extends ConsumerWidget {
                       ),
                       const SizedBox(height: _authFieldSpacing),
                       KasyTextField(
+                        variant: KasyTextFieldVariant.flat,
                         key: const Key('password_input'),
                         onChanged: (newValue) => ref
                             .read(signupStateProvider.notifier)
@@ -180,7 +184,8 @@ class _SigninPrompt extends StatelessWidget {
             KasyPressableDepth(
               semanticLabel: t.auth.signup.signin_link,
               onPressed: () => context.pushReplacement('/signin'),
-              focusable: true,
+              // Secondary link: kept out of Tab traversal (focusable defaults to
+              // false) so keyboard/next jumps straight to the social buttons.
               child: Text(
                 t.auth.signup.signin_link,
                 style: context.textTheme.bodyMedium?.copyWith(
@@ -203,6 +208,14 @@ class _SocialSignupRow extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final state = ref.watch(signinStateProvider);
     final isSending = state is SigninStateSending;
+    // Apple sign-in is reliable only on Apple-native platforms (iOS/macOS). On web
+    // it needs a paid Apple Service ID + manual console setup (see auth docs), gated
+    // by withAppleWebSignin (off by default). On Android it needs the same Service ID
+    // and the Supabase/API native flow throws, so Apple is hidden there.
+    final bool showApple = kIsWeb
+        ? withAppleWebSignin
+        : (defaultTargetPlatform == TargetPlatform.iOS ||
+            defaultTargetPlatform == TargetPlatform.macOS);
     return Row(
       children: [
         Expanded(
@@ -215,17 +228,20 @@ class _SocialSignupRow extends ConsumerWidget {
                       ref.read(signinStateProvider.notifier).signinWithGoogle(),
           ),
         ),
-        const SizedBox(width: KasySpacing.sm),
-        Expanded(
-          child: _SocialSignupTile(
-            label: t.auth.signin.apple,
-            icon: Image.asset('assets/icons/apple.png', width: 20, height: 20),
-            onPressed: isSending
-                ? null
-                : () =>
-                      ref.read(signinStateProvider.notifier).signinWithApple(),
+        if (showApple) ...[
+          const SizedBox(width: KasySpacing.sm),
+          Expanded(
+            child: _SocialSignupTile(
+              label: t.auth.signin.apple,
+              icon: Image.asset('assets/icons/apple.png', width: 20, height: 20),
+              onPressed: isSending
+                  ? null
+                  : () => ref
+                        .read(signinStateProvider.notifier)
+                        .signinWithApple(),
+            ),
           ),
-        ),
+        ],
         const SizedBox(width: KasySpacing.sm),
         Expanded(
           child: _SocialSignupTile(

package/templates/firebase/lib/features/authentication/ui/widgets/recover_password_result.dart

@@ -28,7 +28,7 @@ class RecoverPasswordSent extends StatelessWidget {
                 KasyBrandBadge(
                   icon: KasyIcons.checkCircle,
                   size: 72,
-                  glyphSize: 36,
+                  glyphSize: KasyIconSize.display,
                   gradient: LinearGradient(
                     begin: Alignment.topLeft,
                     end: Alignment.bottomRight,

package/templates/firebase/lib/features/feedbacks/ui/feedback_page.dart

@@ -167,7 +167,7 @@ class _AddChipButton extends StatelessWidget {
         child: Row(
           mainAxisSize: MainAxisSize.min,
           children: [
-            Icon(KasyIcons.add, size: 14, color: context.colors.primary),
+            Icon(KasyIcons.add, size: KasyIconSize.xs, color: context.colors.primary),
             const SizedBox(width: KasySpacing.xs),
             Text(
               label,

package/templates/firebase/lib/features/feedbacks/ui/widgets/add_feature_button.dart

@@ -56,7 +56,7 @@ class AddFeatureButton extends StatelessWidget {
             const SizedBox(width: KasySpacing.smd),
             Icon(
               KasyIcons.northEast,
-              size: 16,
+              size: KasyIconSize.rowTrailing,
               color: context.colors.onPrimary.withValues(alpha: 0.55),
             ),
           ],

package/templates/firebase/lib/features/feedbacks/ui/widgets/feature_card.dart

@@ -220,7 +220,7 @@ class _VoteCardState extends State<VoteCard>
             children: [
               Icon(
                 KasyIcons.voteUp,
-                size: 22,
+                size: KasyIconSize.lg,
                 color: widget.textColor,
               ),
               ClipRect(