kasy-cli 1.31.14 → 1.34.0

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

@@ -52,29 +52,36 @@ class KasyToast extends StatelessWidget {
         color: c.surface,
         borderRadius: KasyRadius.lgBorderRadius,
         border: Border.all(
-          color: c.outline.withValues(alpha: isDark ? 0.22 : 0.28),
+          color: c.outline.withValues(alpha: isDark ? 0.20 : 0.20),
         ),
         boxShadow: [
           BoxShadow(
-            color: Colors.black.withValues(alpha: isDark ? 0.12 : 0.04),
-            blurRadius: 10,
-            offset: const Offset(0, 4),
+            color: Colors.black.withValues(alpha: isDark ? 0.22 : 0.06),
+            blurRadius: 18,
+            offset: const Offset(0, 6),
           ),
         ],
       ),
       child: Padding(
-        padding: const EdgeInsets.symmetric(
-          horizontal: KasySpacing.md,
-          vertical: 14,
+        // Tighter vertical rhythm and less right padding (the close affordance
+        // is a light icon, not a filled button) for a slimmer, refined bar.
+        padding: const EdgeInsets.fromLTRB(
+          KasySpacing.md,
+          KasySpacing.smd,
+          KasySpacing.sm,
+          KasySpacing.smd,
         ),
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             Padding(
-              padding: const EdgeInsets.only(top: 2),
-              child: icon ?? Icon(pal.icon, size: 24, color: pal.accent),
+              padding: const EdgeInsets.only(top: 1),
+              // Only the icon carries the tone colour; the title stays neutral
+              // so the toast reads calm instead of shouting.
+              child: icon ??
+                  Icon(pal.icon, size: KasyIconSize.lg, color: pal.accent),
             ),
-            const SizedBox(width: KasySpacing.smd),
+            const SizedBox(width: KasySpacing.sm),
             Expanded(
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
@@ -82,38 +89,34 @@ class KasyToast extends StatelessWidget {
                 children: [
                   Text(
                     title,
-                    style: context.textTheme.titleMedium?.copyWith(
-                      color: pal.accent,
-                      fontWeight: FontWeight.w700,
+                    style: context.textTheme.titleSmall?.copyWith(
+                      color: c.onSurface,
+                      fontWeight: FontWeight.w600,
                     ),
                   ),
                   if (message != null) ...[
-                    const SizedBox(height: 4),
+                    const SizedBox(height: 2),
                     Text(
                       message!,
                       style: context.textTheme.bodyMedium?.copyWith(
-                        // Slightly darker than muted in light, slightly lighter in dark.
-                        color: Color.lerp(
-                          c.muted,
-                          isDark ? Colors.white : Colors.black,
-                          0.18,
-                        ),
+                        color: c.muted,
+                        height: 1.35,
                       ),
                     ),
                   ],
                 ],
               ),
             ),
-            const SizedBox(width: KasySpacing.smd),
-            Padding(
-              padding: const EdgeInsets.only(top: 1),
-              child: KasyButton(
-                label: 'Close',
-                size: KasyButtonSize.small,
-                backgroundColor: pal.buttonBg,
-                foregroundColor: pal.buttonFg,
-                onPressed: onClose,
-              ),
+            const SizedBox(width: KasySpacing.xs),
+            KasyButton.iconOnly(
+              icon: KasyIcons.close,
+              variant: KasyButtonVariant.ghost,
+              foregroundColor: c.muted,
+              size: KasyButtonSize.small,
+              iconOnlyLayoutExtent: 28,
+              iconGlyphSize: 16,
+              onPressed: onClose,
+              semanticLabel: MaterialLocalizations.of(context).closeButtonTooltip,
             ),
           ],
         ),
@@ -706,63 +709,29 @@ class _AnimatedToastState extends State<_AnimatedToast>
 // ---------------------------------------------------------------------------
 
 class _Palette {
-  const _Palette({
-    required this.accent,
-    required this.icon,
-    required this.buttonBg,
-    required this.buttonFg,
-  });
+  const _Palette({required this.accent, required this.icon});
 
   final Color accent;
   final IconData icon;
-  final Color buttonBg;
-  final Color buttonFg;
 }
 
 _Palette _palette(KasyColors c, KasyToastTone tone) {
   switch (tone) {
     case KasyToastTone.neutral:
-      return _Palette(
-        accent: c.onSurface,
-        icon: KasyIcons.notification,
-        buttonBg: c.surfaceNeutralSoft,
-        buttonFg: c.onSurface,
-      );
+      return _Palette(accent: c.onSurface, icon: KasyIcons.notification);
     case KasyToastTone.accent:
-      return _Palette(
-        accent: c.primary,
-        icon: KasyIcons.info,
-        buttonBg: c.primary,
-        // The Close button sits on a solid, vivid tone color — keep its label
-        // white for reliable contrast regardless of the brand "on" token.
-        buttonFg: Colors.white,
-      );
+      return _Palette(accent: c.primary, icon: KasyIcons.info);
     case KasyToastTone.success:
       final Color successDark = HSLColor.fromColor(c.success)
           .withLightness(
             (HSLColor.fromColor(c.success).lightness - 0.09).clamp(0.0, 1.0),
           )
           .toColor();
-      return _Palette(
-        accent: successDark,
-        icon: KasyIcons.checkCircle,
-        buttonBg: successDark,
-        buttonFg: Colors.white,
-      );
+      return _Palette(accent: successDark, icon: KasyIcons.checkCircle);
     case KasyToastTone.warning:
-      return _Palette(
-        accent: c.warning,
-        icon: KasyIcons.privacy,
-        buttonBg: c.warning,
-        buttonFg: Colors.white,
-      );
+      return _Palette(accent: c.warning, icon: KasyIcons.privacy);
     case KasyToastTone.danger:
-      return _Palette(
-        accent: c.error,
-        icon: KasyIcons.error,
-        buttonBg: c.error,
-        buttonFg: Colors.white,
-      );
+      return _Palette(accent: c.error, icon: KasyIcons.error);
   }
 }
 

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

@@ -148,13 +148,14 @@ class KasyWebHeader extends StatelessWidget {
 
   Widget _buildSearch(BuildContext context) {
     return KasyTextField(
+      variant: KasyTextFieldVariant.flat,
       controller: searchController,
       hint: searchHint,
       onChanged: onSearchChanged,
       onSubmitted: onSearchSubmitted,
       prefix: Icon(
         KasyIcons.search,
-        size: 17,
+        size: KasyIconSize.md,
         color: context.colors.muted,
       ),
       contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
@@ -168,7 +169,7 @@ class KasyWebHeader extends StatelessWidget {
       variant: KasyButtonVariant.ghost,
       size: KasyButtonSize.small,
       iconOnlyLayoutExtent: 36,
-      iconGlyphSize: 18,
+      iconGlyphSize: KasyIconSize.md,
       onPressed: onToggleTheme,
       semanticLabel: isDark ? 'Light mode' : 'Dark mode',
     );
@@ -181,7 +182,7 @@ class KasyWebHeader extends StatelessWidget {
       variant: KasyButtonVariant.ghost,
       size: KasyButtonSize.small,
       iconOnlyLayoutExtent: 36,
-      iconGlyphSize: 18,
+      iconGlyphSize: KasyIconSize.md,
       onPressed: onNotifications,
       semanticLabel: 'Notifications',
     );

package/templates/firebase/lib/core/chrome/chrome_visibility.dart

@@ -71,6 +71,28 @@ class KasyChromeVisibility {
   }
 }
 
+/// Brings the chrome back whenever a route is pushed onto or popped from the
+/// root navigator. Tab switches already reset via [BartScaffold.onRouteChanged],
+/// but detail screens (feedback, reminders, …) are pushed on the root navigator
+/// and bypass that — so without this, returning to a screen that had scrolled
+/// its chrome away would leave the app bar and bottom menu stuck hidden.
+///
+/// Only the chrome is restored; the destination screen keeps its scroll position
+/// (the framework preserves it), matching how large apps handle back navigation.
+class KasyChromeVisibilityObserver extends NavigatorObserver {
+  void _reset() => KasyChromeVisibility.instance.resetShown();
+
+  @override
+  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) => _reset();
+
+  @override
+  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) => _reset();
+
+  @override
+  void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) =>
+      _reset();
+}
+
 // ---------------------------------------------------------------------------
 // Configuration — edit these to change the experience your app ships with.
 // ---------------------------------------------------------------------------

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

@@ -6,6 +6,17 @@ 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 Facebook sign-in button is shown on WEB. Facebook-on-web works
+/// on the Firebase backend (signInWithPopup) after `kasy facebook`; on Supabase the
+/// web flow isn't wired yet (roadmap), so the CLI ships this `false` there. Native
+/// (iOS/Android) always shows the Facebook button regardless of this flag.
+const bool withFacebookWebSignin = false;
 /// 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 +25,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

@@ -1,5 +1,5 @@
+import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:kasy_kit/components/components.dart';
@@ -7,17 +7,25 @@ import 'package:kasy_kit/core/data/api/analytics_api.dart';
 import 'package:kasy_kit/core/rating/providers/rating_repository.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/responsive_layout.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 import 'package:logger/logger.dart';
 
 /// Shows the in-app review dialog. Prefer a stable [context] (not a sheet that
 /// will be popped before the async work finishes).
+///
+/// A clean [KasyDialog]: a title, a short message and two stacked actions
+/// (write a review / suggest improvements). Dismissing via the dialog's own
+/// close button just defers the next ask and keeps the user where they are.
 Future<bool> showReviewDialog(
   BuildContext context,
   WidgetRef ref, {
   bool force = false,
 }) async {
+  // Store reviews are a native-only concept (App Store / Play Store). On web
+  // there is nowhere to send the user, so the prompt never shows there.
+  if (kIsWeb) {
+    return false;
+  }
   if (!context.mounted) {
     return false;
   }
@@ -41,97 +49,42 @@ Future<bool> showReviewDialog(
     barrierDismissible: false,
     builder: (dialogContext) {
       ratingRepository.delay();
-      return Animate(
-        effects: const [
-          FadeEffect(
-            delay: Duration(milliseconds: 100),
-            duration: Duration(milliseconds: 300),
-          ),
-          MoveEffect(
-            delay: Duration(milliseconds: 100),
-            duration: Duration(milliseconds: 450),
-            curve: Curves.easeOut,
-            begin: Offset(0, 50),
-            end: Offset.zero,
-          ),
-        ],
-        child: DeviceSizeBuilder(
-          builder: (device) {
-            final maxWidth = switch (device) {
-              DeviceType.medium =>
-                MediaQuery.of(dialogContext).size.width - KasySpacing.xl,
-              _ => 550.0,
-            };
-            final translations = Translations.of(dialogContext).review_popup;
-            return KasyDialog(
-              title: translations.title,
-              titleCentered: true,
-              showCloseButton: false,
-              body: Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  Stack(
-                    clipBehavior: Clip.none,
-                    children: [
-                      ClipRRect(
-                        borderRadius: BorderRadius.circular(KasyRadius.md),
-                        child: Image.asset(
-                          'assets/images/review.png',
-                          fit: BoxFit.fitWidth,
-                          width: maxWidth,
-                        ),
-                      ),
-                      Positioned(
-                        top: KasySpacing.sm,
-                        left: KasySpacing.sm,
-                        child: CloseIcon(
-                          onExit: () {
-                            analytics.logEvent('rating_popup_close', {});
-                            rating.delay().then((_) {
-                              if (!dialogContext.mounted) return;
-                              Navigator.of(dialogContext).pop();
-                            });
-                          },
-                        ),
-                      ),
-                    ],
-                  ),
-                  const SizedBox(height: KasySpacing.md),
-                  Text(
-                    translations.description,
-                    textAlign: TextAlign.center,
-                    style: Theme.of(dialogContext).textTheme.bodyMedium,
-                  ),
-                ],
-              ),
-              footer: Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
-                children: [
-                  KasyButton(
-                    label: translations.rate_button,
-                    expand: true,
-                    onPressed: () {
-                      analytics.logEvent('rating_popup_show', {});
-                      ratingRepository.rate().then((_) => rating.review()).then(
-                        (_) {
-                          if (!dialogContext.mounted) return;
-                          Navigator.of(dialogContext).pop();
-                        },
-                      );
-                    },
-                  ),
-                  const SizedBox(height: KasySpacing.sm),
-                  KasyButton(
-                    label: translations.cancel_button,
-                    variant: KasyButtonVariant.soft,
-                    expand: true,
-                    onPressed: () => Navigator.of(dialogContext).pop(true),
-                  ),
-                ],
-              ),
-            );
-          },
+      final translations = Translations.of(dialogContext).review_popup;
+      return KasyDialog(
+        leadingIcon: KasyIcons.star,
+        iconTone: KasyDialogIconTone.info,
+        title: translations.title,
+        titleCentered: true,
+        message: translations.description,
+        onClose: () {
+          analytics.logEvent('rating_popup_close', {});
+          rating.delay();
+          Navigator.of(dialogContext).pop();
+        },
+        footer: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            KasyButton(
+              label: translations.rate_button,
+              expand: true,
+              onPressed: () {
+                analytics.logEvent('rating_popup_show', {});
+                ratingRepository.rate().then((_) => rating.review()).then(
+                  (_) {
+                    if (!dialogContext.mounted) return;
+                    Navigator.of(dialogContext).pop();
+                  },
+                );
+              },
+            ),
+            const SizedBox(height: KasySpacing.sm),
+            KasyButton(
+              label: translations.cancel_button,
+              variant: KasyButtonVariant.soft,
+              expand: true,
+              onPressed: () => Navigator.of(dialogContext).pop(true),
+            ),
+          ],
         ),
       );
     },
@@ -142,34 +95,3 @@ Future<bool> showReviewDialog(
   }
   return true;
 }
-
-class CloseIcon extends StatelessWidget {
-  final VoidCallback onExit;
-
-  const CloseIcon({super.key, required this.onExit});
-
-  @override
-  Widget build(BuildContext context) {
-    return ClipOval(
-      child: Material(
-        color: Colors.transparent,
-        child: InkWell(
-          onTap: () => onExit.call(),
-          child: Ink(
-            width: 32,
-            height: 32,
-            decoration: BoxDecoration(
-              color: context.colors.background,
-              shape: BoxShape.circle,
-            ),
-            child: Icon(
-              KasyIcons.close,
-              color: context.colors.onBackground,
-              size: 21,
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}

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), () {