kasy-cli 1.38.0 → 1.39.0

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

@@ -1,7 +1,6 @@
 import 'package:flutter/foundation.dart' show kIsWeb;
 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/data/api/analytics_api.dart';
 import 'package:kasy_kit/core/rating/providers/rating_repository.dart';
@@ -13,9 +12,10 @@ 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.
+/// A clean [KasyDialog] focused on a single goal: a positive store rating. A
+/// gold star, a warm title/message and one action (write a review on the
+/// Android/Play or iOS App Store). 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, {
@@ -46,15 +46,16 @@ Future<bool> showReviewDialog(
     return false;
   }
 
-  final bool? openFeedback = await showKasyDialog<bool>(
+  await showKasyDialog<void>(
     context: context,
-    barrierDismissible: false,
     builder: (dialogContext) {
       ratingRepository.delay();
       final translations = Translations.of(dialogContext).review_popup;
       return KasyDialog(
         leadingIcon: KasyIcons.star,
-        iconTone: KasyDialogIconTone.info,
+        // Gold/amber star via KasyDialog's default `warning` tone — the design
+        // system's amber (#F5A524 light / #F7B750 dark), the natural colour for
+        // a rating star.
         title: translations.title,
         titleCentered: true,
         message: translations.description,
@@ -63,37 +64,19 @@ Future<bool> showReviewDialog(
           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),
-            ),
-          ],
+        footer: 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();
+            });
+          },
         ),
       );
     },
   );
-
-  if (openFeedback == true && context.mounted) {
-    await context.push('/feedback');
-  }
   return true;
 }

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

@@ -105,4 +105,15 @@ class SharedPreferencesBuilder implements OnStartService {
   Future<void> setAttSoftLastAskedAt(DateTime when) async {
     await prefs.setInt('att_soft_last_asked_at', when.millisecondsSinceEpoch);
   }
+
+  /// Whether we've already fired the one-time native push-permission prompt the
+  /// first time the user opened the notifications screen. iOS only ever shows
+  /// the native prompt once, so we must never auto-fire it more than once.
+  bool getPushAutoRequested() {
+    return prefs.getBool('push_auto_requested') ?? false;
+  }
+
+  Future<void> setPushAutoRequested(bool value) async {
+    await prefs.setBool('push_auto_requested', value);
+  }
 }

package/templates/firebase/lib/core/states/logout_action.dart

@@ -4,6 +4,7 @@ import 'package:kasy_kit/components/components.dart';
 import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
+import 'package:kasy_kit/router.dart';
 
 /// Standardized logout flow — the single source of truth for signing out.
 ///
@@ -25,5 +26,14 @@ Future<void> confirmLogout(BuildContext context, WidgetRef ref) {
     // forget: that closed the dialog instantly and left the old screen frozen.)
     onConfirmAsync: () =>
         ref.read(userStateNotifierProvider.notifier).onLogout(),
-  );
+  ).whenComplete(() {
+    // The confirm dialog is a pageless route on the ROOT navigator, so the
+    // redirect that fires when onLogout flips the state to anonymous runs while
+    // the dialog still sits on top — go_router keeps the current page (Settings)
+    // mounted underneath and the move to /signin never lands. Now that the
+    // dialog has popped, re-run the redirect so the (now unauthenticated) user
+    // is sent to sign-in. Harmless on cancel: the redirect keeps an
+    // authenticated user exactly where they are.
+    if (context.mounted) ref.read(goRouterProvider).refresh();
+  });
 }

package/templates/firebase/lib/core/states/user_state_notifier.dart

@@ -187,6 +187,7 @@ class UserStateNotifier extends _$UserStateNotifier implements OnStartService {
     // Biometric lock is a per-account preference, not a device-wide one.
     // The next user signing in on this install should start without it set.
     await ref.read(sharedPreferencesProvider).setBiometricEnabled(false);
+    await _clearWebGuestPass();
     // Forget the last bottom-bar tab so the next login lands on the default tab
     // (Home) instead of wherever the previous account left off.
     forgetActiveTab();
@@ -285,7 +286,18 @@ class UserStateNotifier extends _$UserStateNotifier implements OnStartService {
   /// It will delete the user account and logout the user
   Future<void> deleteAccount() async {
     _stopRoleListener();
-    final userId = state.user.idOrThrow;
+    final userId = state.user.idOrNull;
+    // No backend identity (a guest with no account): there is nothing to delete
+    // server-side. Just clear the local session so we never throw a generic
+    // error that strands the user on Settings — the UI hides the delete button
+    // in this case, this is only a safety net.
+    if (userId == null) {
+      await _authenticationRepository.logout();
+      await _clearWebGuestPass();
+      forgetActiveTab();
+      state = const UserState(user: User.anonymous());
+      return;
+    }
     _deviceRepository.removeTokenUpdateListener();
     try {
       await _deviceRepository.unregister(userId);
@@ -294,6 +306,7 @@ class UserStateNotifier extends _$UserStateNotifier implements OnStartService {
     }
     await _userRepository.delete();
     await _authenticationRepository.logout();
+    await _clearWebGuestPass();
     // Same as onLogout: forget the last bottom-bar tab so the next account that
     // signs in lands on Home, not wherever the deleted account left off (the
     // user deletes from Settings, so without this the next login reopens it).
@@ -304,6 +317,20 @@ class UserStateNotifier extends _$UserStateNotifier implements OnStartService {
     // continue as a guest.
   }
 
+  /// On WEB the auth redirect treats "onboarding done" as "this guest is allowed
+  /// to stay" (`ready = hasIdentity || isOnboarded || onboardingDone`). After a
+  /// logout / account deletion the flag is still true, so the redirect would
+  /// keep the just-signed-out user on the current screen instead of sending them
+  /// to /signin — and whether it happened to work depended on leftover browser
+  /// state. Clearing it on web makes the session boundary land on /signin every
+  /// time. No-op on native, where this flag only skips the (native-only)
+  /// onboarding screen and logout already routes correctly via hasIdentity, so
+  /// clearing it would wrongly show onboarding again.
+  Future<void> _clearWebGuestPass() async {
+    if (!kIsWeb) return;
+    await ref.read(sharedPreferencesProvider).setOnboardingCompleted(false);
+  }
+
   // -------------------------------
   // ROLE LISTENER
   // -------------------------------

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

@@ -147,19 +147,34 @@ class KasyTextTheme extends ThemeExtension<KasyTextTheme> {
   /// Top-level page title (auth, paywall, full-screen flows). 24 / w700.
   TextStyle get pageTitle => headlineMedium;
 
-  /// Section or master-detail pane title (Settings detail, grouped areas). 16 / w600.
+  /// Section or master-detail pane title (Settings detail, grouped areas).
+  /// 18 / w600 — a visible step above the content rows it heads.
   TextStyle get sectionTitle => titleMedium;
 
   /// Small header above a grouped list (e.g. "PREFERENCES"). 12 / w600, lightly tracked.
   TextStyle get sectionLabel =>
       bodySmall.copyWith(fontWeight: FontWeight.w600, letterSpacing: 0.5);
 
-  /// Primary text of a list / settings row. 14 / w500.
+  /// Primary text of a DENSE navigation / list row — sidebar, tabs, admin
+  /// tables. 14 / w500. For full-width CONTENT rows (Settings, a messaging /
+  /// conversation inbox) use [listRowTitle] (16) instead.
   TextStyle get rowTitle => titleSmall;
 
-  /// Secondary / value text in a row (apply a muted colour at the call site). 14 / w400.
+  /// Secondary / value text in a dense row (apply a muted colour at the call
+  /// site). 14 / w400.
   TextStyle get rowValue => bodyMedium;
 
+  /// EMPHASIS text of a CONTENT list row — the row's label/title (Settings, and
+  /// other iOS-style lists where each row is primary content). 16 / w500. Pairs
+  /// with [listRowValue] (14) so the label clearly outranks its value.
+  TextStyle get listRowTitle =>
+      bodyLarge.copyWith(fontWeight: FontWeight.w500);
+
+  /// INFO text of a content list row — the value beside the label (apply a muted
+  /// colour at the call site). 14 / w400, deliberately one step below
+  /// [listRowTitle] so label vs value reads as a hierarchy, not a flat pair.
+  TextStyle get listRowValue => bodyMedium;
+
   /// Card title. 14 / w500.
   TextStyle get cardTitle => titleSmall;
 
@@ -188,17 +203,17 @@ class KasyTextTheme extends ThemeExtension<KasyTextTheme> {
       headlineMedium: _fromRamp(FontWeight.w700, KasyTypeScale.heading2, device),
       headlineSmall: _fromRamp(FontWeight.w600, KasyTypeScale.heading3, device),
 
-      // Title → Heading 3 / Heading 4 / Body sm medium.
+      // Title → Heading 3 / Heading 4 / Body sm (dense title 14, w500).
       titleLarge: _fromRamp(FontWeight.w600, KasyTypeScale.heading3, device),
       titleMedium: _fromRamp(FontWeight.w600, KasyTypeScale.heading4, device),
       titleSmall: _fromRamp(FontWeight.w500, KasyTypeScale.bodySm, device),
 
-      // Body → Body base / Body sm / Body xs.
+      // Body → Body base (16) / Body sm (14) / Body xs (12).
       bodyLarge: _fromRamp(FontWeight.w400, KasyTypeScale.bodyBase, device),
       bodyMedium: _fromRamp(FontWeight.w400, KasyTypeScale.bodySm, device),
       bodySmall: _fromRamp(FontWeight.w400, KasyTypeScale.bodyXs, device),
 
-      // Label → Button sm / Body xs medium.
+      // Label → Body sm (14, w500) / Body xs (12, w500).
       labelLarge: _fromRamp(FontWeight.w500, KasyTypeScale.bodySm, device),
       labelMedium: _fromRamp(FontWeight.w500, KasyTypeScale.bodyXs, device),
       labelSmall: _fromRamp(FontWeight.w500, KasyTypeScale.bodyXs, device),

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

@@ -2,15 +2,25 @@ import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 
 /// Responsive type scale — explicit font size per role, per breakpoint.
 ///
-/// Single source of truth for typography sizes. Instead of a blind global
-/// multiplier, every role declares its own size at each breakpoint — the way a
-/// design tool (Figma variables / modes) or a fluid web scale does it.
+/// Single source of truth for typography sizes, and the ONLY place breakpoints
+/// touch type. There is no global multiplier and no per-component scaling: every
+/// role declares its own size at each breakpoint here, exactly like design-tool
+/// modes (Figma variables) or platform text styles. Components only read the
+/// resolved theme role (`context.textTheme.*`); they never scale text themselves
+/// by width. (The `WebViewportScale` zoom is a separate, web-only UI alignment
+/// fix — it scales the whole canvas, not these type sizes.)
 ///
-/// The professional pattern this follows: **headings are largest on desktop and
-/// compress on smaller viewports** (a 36px title would feel huge and wrap badly
-/// on a phone), while **body and label text stay constant** for stable,
-/// comfortable reading on every device. Desktop is the authored reference;
-/// tablet and mobile step the headings down.
+/// The ladder is harmonious and SEMANTIC — each role one clear step from the
+/// next, and each maps to a PURPOSE, not a guessed size:
+/// - **Headings & display SCALE with the viewport** (this is where real
+///   responsiveness lives): big on desktop, stepping down on mobile so a hero or
+///   page title never wraps badly on a phone.
+/// - **Body & labels are STABLE across breakpoints** — one comfortable reading
+///   size per role, the Material/Apple model. The body ladder uses MARKED 2px
+///   steps so hierarchy is actually visible: section/card title 18, content-row
+///   title / body 16, secondary / value / nav 14, caption 12. No 1px in-between
+///   levels — a 15-vs-16 difference reads as identical, so it isn't a hierarchy.
+///   A row's LABEL (16) and its VALUE (14) are deliberately different sizes.
 ///
 /// To re-tune the whole app's typography, edit the numbers here — nothing else.
 /// The live ramp is visible under Design System -> Typography (tabs per
@@ -51,27 +61,36 @@ class RampSize {
 class KasyTypeScale {
   const KasyTypeScale._();
 
-  // Hero / display — large, compress hard on the way down.
+  // Hero / display — scale with space: large on desktop, compress hard toward
+  // mobile so a hero headline never wraps awkwardly on a phone.
   static const displayLarge =
-      RampSize(mobile: 40, tablet: 48, desktop: 57, lineHeightRatio: 64 / 57);
+      RampSize(mobile: 36, tablet: 46, desktop: 57, lineHeightRatio: 64 / 57);
   static const displayMedium =
-      RampSize(mobile: 34, tablet: 40, desktop: 45, lineHeightRatio: 52 / 45);
+      RampSize(mobile: 32, tablet: 38, desktop: 45, lineHeightRatio: 52 / 45);
 
-  // Headings — largest on desktop, step down on tablet then mobile.
+  // Headings — scale with space. Mobile anchors on the iOS title ladder
+  // (Title1 28 / Title2 22 / Title3 20); desktop grows for the wider canvas.
   static const heading1 =
       RampSize(mobile: 28, tablet: 32, desktop: 36, lineHeightRatio: 40 / 36);
   static const heading2 =
       RampSize(mobile: 22, tablet: 23, desktop: 24, lineHeightRatio: 32 / 24);
   static const heading3 =
-      RampSize(mobile: 18, tablet: 19, desktop: 20, lineHeightRatio: 28 / 20);
+      RampSize(mobile: 20, tablet: 20, desktop: 20, lineHeightRatio: 28 / 20);
+  // Section / card title — 18 (Tailwind text-lg): a visible step above body.
   static const heading4 =
-      RampSize(mobile: 16, tablet: 16, desktop: 16, lineHeightRatio: 24 / 16);
+      RampSize(mobile: 18, tablet: 18, desktop: 18, lineHeightRatio: 26 / 18);
 
-  // Body & labels — constant across breakpoints for stable, comfortable reading.
+  // Body & labels — STABLE, with MARKED 2px steps so hierarchy is visible.
+  // Mirrors Material's body/label tiers (16 / 14 / 12); no 1px in-between levels
+  // (a 15-vs-16 difference reads as identical, so it isn't a hierarchy). Weight
+  // and purpose differentiate roles that share a size (Material does the same).
+  // Content-row title, body paragraphs, chat message:
   static const bodyBase =
       RampSize(mobile: 16, tablet: 16, desktop: 16, lineHeightRatio: 24 / 16);
+  // Secondary / value, dense nav row, card title, labels:
   static const bodySm =
       RampSize(mobile: 14, tablet: 14, desktop: 14, lineHeightRatio: 20 / 14);
+  // Caption, timestamp, fine print:
   static const bodyXs =
       RampSize(mobile: 12, tablet: 12, desktop: 12, lineHeightRatio: 16 / 12);
 }

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

@@ -32,6 +32,15 @@ final ValueNotifier<bool> webDevicePreviewEnabledNotifier = ValueNotifier<bool>(
   false,
 );
 
+/// True only once the device frame is actually ON SCREEN (not the instant the
+/// toggle flips — the frame takes a moment to build). The web viewport scale
+/// reads THIS, not [webDevicePreviewEnabledNotifier], so the scale drops to
+/// native 1.0 only when the frame is up — otherwise the toggle would flash a
+/// big, unframed, unscaled app while the frame builds.
+final ValueNotifier<bool> webDevicePreviewActiveNotifier = ValueNotifier<bool>(
+  false,
+);
+
 // Kit primary/accent (HeroUI blue). The chrome lives above the MaterialApp, so
 // it can't read context.colors — mirror the design-system value here. Used to
 // highlight active toggles so it's obvious at a glance what's turned on.
@@ -241,14 +250,55 @@ class _WebDevicePreviewState extends State<WebDevicePreview>
         if (mounted) setState(() => _controlsVisible = true);
       });
       setState(() {}); // rebuild DevicePreview with enabled: true
+      // [webDevicePreviewActiveNotifier] flips to true only once the frame is
+      // actually built — see [_buildFramedContent] — so the web scale stays put
+      // until then (no big-unframed-app flash during the build).
     } else {
       _controlsTimer?.cancel();
+      // Leaving the frame: restore the web scale immediately.
+      webDevicePreviewActiveNotifier.value = false;
       setState(() => _controlsVisible = false);
     }
   }
 
   void _onBgChanged() => setState(() {});
 
+  /// Builds the app content placed INSIDE the device frame. DevicePreview calls
+  /// this as it brings the framed environment up, so it doubles as the "frame is
+  /// on screen now" signal: after this paints we flip
+  /// [webDevicePreviewActiveNotifier], which is what lets the web viewport scale
+  /// drop to native 1.0 — and only then, so the toggle never shows a flash of
+  /// big, unframed, unscaled app while the frame is still building.
+  Widget _buildFramedContent(BuildContext context) {
+    if (webDevicePreviewEnabledNotifier.value &&
+        !webDevicePreviewActiveNotifier.value) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (mounted && webDevicePreviewEnabledNotifier.value) {
+          webDevicePreviewActiveNotifier.value = true;
+        }
+      });
+    }
+    return ListenableBuilder(
+      listenable: _textScaleNotifier,
+      builder: (ctx, _) => MediaQuery(
+        data: MediaQuery.of(ctx).copyWith(
+          textScaler: TextScaler.linear(_textScaleNotifier.value),
+          // DevicePreview hard-codes platformBrightness to light inside the
+          // simulated frame, which breaks MaterialApp's ThemeMode.system.
+          // Forward the real host brightness so "system" tracks the OS.
+          platformBrightness:
+              WidgetsBinding.instance.platformDispatcher.platformBrightness,
+        ),
+        child: _DeviceSwitchBridge(
+          deviceNotifier: _deviceNotifier,
+          frameVisibleNotifier: _frameVisibleNotifier,
+          landscapeNotifier: _landscapeNotifier,
+          child: widget.child,
+        ),
+      ),
+    );
+  }
+
   Future<void> _bootstrap() async {
     final prefs = await SharedPreferences.getInstance();
 
@@ -449,25 +499,7 @@ class _WebDevicePreviewState extends State<WebDevicePreview>
       storage: DevicePreviewStorage.none(),
       defaultDevice: _currentDevice,
       devices: [..._iosDevices, ..._androidDevices, ..._iPadDevices],
-      builder: (context) => ListenableBuilder(
-        listenable: _textScaleNotifier,
-        builder: (ctx, _) => MediaQuery(
-          data: MediaQuery.of(ctx).copyWith(
-            textScaler: TextScaler.linear(_textScaleNotifier.value),
-            // DevicePreview hard-codes platformBrightness to light inside the
-            // simulated frame, which breaks MaterialApp's ThemeMode.system.
-            // Forward the real host brightness so "system" tracks the OS.
-            platformBrightness:
-                WidgetsBinding.instance.platformDispatcher.platformBrightness,
-          ),
-          child: _DeviceSwitchBridge(
-            deviceNotifier: _deviceNotifier,
-            frameVisibleNotifier: _frameVisibleNotifier,
-            landscapeNotifier: _landscapeNotifier,
-            child: widget.child,
-          ),
-        ),
-      ),
+      builder: _buildFramedContent,
     );
 
     if (!enabled) return preview;

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/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(