kasy-cli 1.39.0 → 1.40.0

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

@@ -0,0 +1,267 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// KasyPopover — desktop-native counterpart to a mobile menu bottom sheet.
+//
+// Instead of dimming the whole screen and dropping a centered card (what a
+// bottom sheet "adapted" to desktop does), a popover opens right next to the
+// control the user clicked, like a native desktop menu. Position is computed
+// from the trigger's render box — no LayerLink wiring at the call site — so any
+// `onTap` that still has the trigger's BuildContext can anchor one. It flips
+// above the trigger when there's no room below, clamps to the viewport, and
+// dismisses on tap-outside / Esc.
+//
+// Used by [showKasyMenuSheet] (see kasy_bottom_sheet.dart) as the desktop form
+// of a menu sheet; callers normally go through that, not this directly.
+// ─────────────────────────────────────────────────────────────────────────────
+
+/// Horizontal anchoring of the popover panel relative to its trigger.
+enum KasyPopoverAlign {
+  /// Panel's left edge aligns with the trigger's left edge.
+  start,
+
+  /// Panel's right edge aligns with the trigger's right edge (menus that hang
+  /// off a right-aligned value, e.g. a settings row).
+  end,
+
+  /// Panel is centered horizontally on the trigger.
+  center,
+}
+
+/// Side of the trigger the popover opens toward. Each side flips to its opposite
+/// when there isn't room (e.g. [bottom] flips to top near the screen edge).
+enum KasyPopoverPlacement { bottom, top, left, right }
+
+const double _kPopoverDefaultWidth = 220;
+const double _kPopoverGap = 6;
+const double _kViewportMargin = 8;
+
+// Below this much room on the chosen side we consider flipping to the opposite.
+const double _kFlipThreshold = 220;
+
+/// Presents [builder] as a floating panel anchored to the widget that owns
+/// [anchorContext] (the control the user clicked). The content is wrapped in a
+/// [KasyPopoverSurface] automatically, so [builder] returns the bare menu body.
+///
+/// [placement] picks the side it opens toward (default below the trigger);
+/// [align] sets cross-axis alignment for top/bottom placements. Pop the panel
+/// with a value (`Navigator.pop(context, value)`) to return it through the
+/// future, mirroring [showModalBottomSheet].
+Future<T?> showKasyPopover<T>({
+  required BuildContext anchorContext,
+  required WidgetBuilder builder,
+  KasyPopoverAlign align = KasyPopoverAlign.start,
+  KasyPopoverPlacement placement = KasyPopoverPlacement.bottom,
+  double width = _kPopoverDefaultWidth,
+  double gap = _kPopoverGap,
+}) {
+  // Snapshot the trigger geometry at open time (global coords). A transient menu
+  // doesn't need to follow scroll — tap-outside closes it.
+  final RenderBox? anchorBox = anchorContext.findRenderObject() as RenderBox?;
+  final Size viewport = MediaQuery.sizeOf(anchorContext);
+  final Offset anchorTopLeft =
+      anchorBox?.localToGlobal(Offset.zero) ??
+      Offset(viewport.width / 2, viewport.height / 2);
+  final Size anchorSize = anchorBox?.size ?? Size.zero;
+
+  return showGeneralDialog<T>(
+    context: anchorContext,
+    barrierDismissible: true,
+    barrierLabel: MaterialLocalizations.of(
+      anchorContext,
+    ).modalBarrierDismissLabel,
+    // No scrim: a desktop popover keeps the page visible behind it.
+    barrierColor: Colors.transparent,
+    transitionDuration: const Duration(milliseconds: 160),
+    pageBuilder: (ctx, animation, _) => _KasyPopoverLayout(
+      anchorTopLeft: anchorTopLeft,
+      anchorSize: anchorSize,
+      width: width,
+      gap: gap,
+      align: align,
+      placement: placement,
+      animation: animation,
+      child: Builder(builder: builder),
+    ),
+    transitionBuilder: (_, _, _, child) => child,
+  );
+}
+
+/// Positions and animates the popover panel over a full-screen, transparent
+/// layer. Resolves [placement] (flipping to the opposite side when room is
+/// tight) and clamps the panel within the viewport.
+class _KasyPopoverLayout extends StatelessWidget {
+  final Offset anchorTopLeft;
+  final Size anchorSize;
+  final double width;
+  final double gap;
+  final KasyPopoverAlign align;
+  final KasyPopoverPlacement placement;
+  final Animation<double> animation;
+  final Widget child;
+
+  const _KasyPopoverLayout({
+    required this.anchorTopLeft,
+    required this.anchorSize,
+    required this.width,
+    required this.gap,
+    required this.align,
+    required this.placement,
+    required this.animation,
+    required this.child,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final Size viewport = MediaQuery.sizeOf(context);
+    final EdgeInsets safe = MediaQuery.viewPaddingOf(context);
+    final double anchorRight = anchorTopLeft.dx + anchorSize.width;
+    final double anchorBottom = anchorTopLeft.dy + anchorSize.height;
+
+    final double spaceBelow = viewport.height - safe.bottom - anchorBottom;
+    final double spaceAbove = anchorTopLeft.dy - safe.top;
+    final double spaceRight = viewport.width - _kViewportMargin - anchorRight;
+    final double spaceLeft = anchorTopLeft.dx - _kViewportMargin;
+
+    // Resolve the effective side, flipping to the opposite when too tight.
+    final KasyPopoverPlacement side = switch (placement) {
+      KasyPopoverPlacement.bottom =>
+        spaceBelow < _kFlipThreshold && spaceAbove > spaceBelow
+            ? KasyPopoverPlacement.top
+            : KasyPopoverPlacement.bottom,
+      KasyPopoverPlacement.top =>
+        spaceAbove < _kFlipThreshold && spaceBelow > spaceAbove
+            ? KasyPopoverPlacement.bottom
+            : KasyPopoverPlacement.top,
+      KasyPopoverPlacement.right =>
+        spaceRight < width + gap && spaceLeft > spaceRight
+            ? KasyPopoverPlacement.left
+            : KasyPopoverPlacement.right,
+      KasyPopoverPlacement.left =>
+        spaceLeft < width + gap && spaceRight > spaceLeft
+            ? KasyPopoverPlacement.right
+            : KasyPopoverPlacement.left,
+    };
+
+    double? left;
+    double? top;
+    double? right;
+    double? bottom;
+    double maxHeight;
+    Alignment scaleAlign;
+
+    final bool vertical =
+        side == KasyPopoverPlacement.bottom || side == KasyPopoverPlacement.top;
+    if (vertical) {
+      left = switch (align) {
+        KasyPopoverAlign.start => anchorTopLeft.dx,
+        KasyPopoverAlign.end => anchorRight - width,
+        KasyPopoverAlign.center =>
+          anchorTopLeft.dx + (anchorSize.width - width) / 2,
+      }.clamp(_kViewportMargin, viewport.width - width - _kViewportMargin);
+      if (side == KasyPopoverPlacement.bottom) {
+        top = anchorBottom + gap;
+        maxHeight = spaceBelow - gap - _kViewportMargin;
+        scaleAlign = Alignment.topCenter;
+      } else {
+        bottom = viewport.height - (anchorTopLeft.dy - gap);
+        maxHeight = spaceAbove - gap - _kViewportMargin;
+        scaleAlign = Alignment.bottomCenter;
+      }
+    } else {
+      // Left / right: align the panel's top with the trigger, clamped so it
+      // never runs past the bottom edge.
+      top = anchorTopLeft.dy.clamp(
+        safe.top + _kViewportMargin,
+        viewport.height - safe.bottom - _kViewportMargin,
+      );
+      maxHeight = viewport.height - safe.bottom - top - _kViewportMargin;
+      if (side == KasyPopoverPlacement.right) {
+        left = anchorRight + gap;
+        scaleAlign = Alignment.centerLeft;
+      } else {
+        right = viewport.width - (anchorTopLeft.dx - gap);
+        scaleAlign = Alignment.centerRight;
+      }
+    }
+
+    final CurvedAnimation curved = CurvedAnimation(
+      parent: animation,
+      curve: Curves.easeOutCubic,
+      reverseCurve: Curves.easeIn,
+    );
+
+    return Stack(
+      children: [
+        Positioned(
+          left: left,
+          top: top,
+          right: right,
+          bottom: bottom,
+          child: FadeTransition(
+            opacity: curved,
+            child: ScaleTransition(
+              scale: Tween<double>(begin: 0.96, end: 1.0).animate(curved),
+              alignment: scaleAlign,
+              child: KasyPopoverSurface(
+                width: width,
+                maxHeight: maxHeight.clamp(0, viewport.height),
+                child: child,
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+/// Floating surface chrome for popover content: design-system surface tone,
+/// fully-rounded corners, hairline border and elevation shadow, with an internal
+/// scroll so tall menus never overflow. Mirrors the dropdown panel look.
+class KasyPopoverSurface extends StatelessWidget {
+  final Widget child;
+  final double width;
+  final double maxHeight;
+
+  const KasyPopoverSurface({
+    super.key,
+    required this.child,
+    this.width = _kPopoverDefaultWidth,
+    this.maxHeight = double.infinity,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final BorderRadius radius = BorderRadius.circular(KasyRadius.xl);
+    return Material(
+      type: MaterialType.transparency,
+      child: Container(
+        width: width,
+        constraints: BoxConstraints(maxHeight: maxHeight),
+        decoration: BoxDecoration(
+          color: context.colors.surface,
+          borderRadius: radius,
+          border: Border.all(
+            color: context.colors.outline.withValues(alpha: 0.22),
+          ),
+          boxShadow: [
+            KasyShadows.component(
+              context,
+              blurRadius: 24,
+              spreadRadius: -2,
+              offset: const Offset(0, 10),
+            ),
+          ],
+        ),
+        child: ClipRRect(
+          borderRadius: radius,
+          child: SingleChildScrollView(
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -393,6 +393,12 @@ class _KasySidebarState extends State<KasySidebar> {
   /// Viewport width below which the sidebar auto-collapses (tablet breakpoint).
   static const double _kBreakpoint = 1024.0;
 
+  /// Phone breakpoint. Below this the sidebar is always an overlay (drawer or
+  /// full-screen preview), so the logo gets its mobile placement (nudged down,
+  /// band trimmed). Above it the inline rail keeps its divider aligned with the
+  /// page app bar / web header.
+  static const double _kMobileBreakpoint = 768.0;
+
 
   /// True when wired to Bart's navigation (real, tappable screens).
   bool get _connected =>
@@ -982,18 +988,22 @@ class _KasySidebarState extends State<KasySidebar> {
     // border: the web header (68) on desktop, but the shorter KasyAppBar on
     // tablet (medium), where the page keeps its own app bar instead of the
     // header. Without this the line breaks between the rail and the app bar.
-    final bool isCompact = MediaQuery.sizeOf(context).width < _kBreakpoint;
-    // The drawer trims a little off the band so there's less dead space below the
-    // wordmark before the divider (the drawer is an overlay, so its divider has
-    // no app-bar line to stay aligned with).
+    final double viewportWidth = MediaQuery.sizeOf(context).width;
+    final bool isCompact = viewportWidth < _kBreakpoint;
+    // On phones the sidebar is always an overlay (drawer or full-screen preview),
+    // never the inline rail beside a page app bar — so mobile positioning is a
+    // sidebar default keyed off the phone breakpoint, not isDrawer.
+    final bool isMobile = viewportWidth < _kMobileBreakpoint;
+    // Mobile trims a little off the band so there's less dead space below the
+    // wordmark before the divider; the overlay has no app-bar line to align with.
     final double bandHeight = !isCompact
         ? _kTopBandHeight
-        : kasyAppBarBodyTopOverlap(context) - (widget.isDrawer ? 26.0 : 0.0);
-    // In the mobile drawer the band starts right under the status bar notch, so
-    // nudge the wordmark down a touch to breathe. Restricted to the drawer (an
-    // overlay) so the inline rail keeps its divider aligned with the app bar /
-    // web header on tablet and desktop.
-    final double logoTopInset = widget.isDrawer ? 20.0 : 0.0;
+        : kasyAppBarBodyTopOverlap(context) - (isMobile ? 26.0 : 0.0);
+    // On mobile the band starts right under the status bar notch, so nudge the
+    // brand (and the collapsed toggle, which shares this band) down to breathe.
+    // Tablet/desktop keep it centred so the rail's divider stays aligned with the
+    // app bar / web header.
+    final double logoTopInset = isMobile ? 44.0 : 0.0;
     // The collapse toggle is available on every breakpoint so any config can be
     // switched thin↔wide — except a drawer, which is a dismissible overlay you
     // close whole rather than collapse in place.

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

@@ -41,6 +41,20 @@ class _WebContentWrapperState extends State<WebContentWrapper> {
     skipTraversal: true,
   );
 
+  /// Shell-wide default for the desktop application bar: empty search, theme
+  /// toggle, the data-aware notifications bell, quick-create, and no avatar (the
+  /// sidebar owns the profile). Screens adapt this via [KasyAppBarConfigurator].
+  late final KasyAppBarConfig _defaultAppBarConfig = KasyAppBarConfig(
+    onToggleTheme: () => ThemeProvider.of(context).toggle(),
+    notifications: const WebNotificationsBell(),
+    onCreate: () {},
+    showAvatar: false,
+  );
+
+  /// Live config the bar renders; starts at the default, screens publish into it.
+  late final ValueNotifier<KasyAppBarConfig> _appBarConfig =
+      ValueNotifier<KasyAppBarConfig>(_defaultAppBarConfig);
+
   @override
   void initState() {
     super.initState();
@@ -53,6 +67,7 @@ class _WebContentWrapperState extends State<WebContentWrapper> {
       kasyContentFocusTarget = null;
     }
     _contentFocus.dispose();
+    _appBarConfig.dispose();
     super.dispose();
   }
 
@@ -71,21 +86,22 @@ class _WebContentWrapperState extends State<WebContentWrapper> {
     // page-level KasyAppBar hides on desktop here (the application bar owns the
     // chrome). Outside this scope (full-screen pushed routes) the bar stays visible.
     return KasyAppBarScope(
+      config: _appBarConfig,
+      defaultConfig: _defaultAppBarConfig,
       child: ColoredBox(
         color: context.colors.background,
         child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
-          // The sidebar carries the user profile here, so the header drops its
-          // avatar (showAvatar: false) to avoid duplicating the account chip.
+          // One application bar for the whole shell; each screen tunes it through
+          // a KasyAppBarConfigurator that publishes into [_appBarConfig].
           FocusTraversalOrder(
             order: const NumericFocusOrder(2),
             child: FocusTraversalGroup(
-              child: KasyAppBar.application(
-                onToggleTheme: () => ThemeProvider.of(context).toggle(),
-                notifications: const WebNotificationsBell(),
-                onCreate: () {},
-                showAvatar: false,
+              child: ValueListenableBuilder<KasyAppBarConfig>(
+                valueListenable: _appBarConfig,
+                builder: (context, config, _) =>
+                    KasyAppBar.fromConfig(config),
               ),
             ),
           ),

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

@@ -63,7 +63,7 @@ class KasyAppBarConfig {
     this.showCreate = true,
     this.createLabel = 'Create',
     this.onCreate,
-    this.showAvatar = false,
+    this.showAvatar = true,
     this.avatar,
     this.avatarGradient,
     this.onAvatarTap,

package/templates/firebase/lib/core/navigation/kasy_route_observer.dart

@@ -0,0 +1,8 @@
+import 'package:flutter/widgets.dart';
+
+/// Shared route observer on the root navigator so screens can react to being
+/// revealed again after a route pushed on top of them pops, via
+/// [RouteAware.didPopNext]. Register it in the router's `observers` list and
+/// subscribe a [RouteAware] state to it.
+final RouteObserver<ModalRoute<dynamic>> kasyRouteObserver =
+    RouteObserver<ModalRoute<dynamic>>();

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

@@ -1,21 +1,28 @@
 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/models/review.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/i18n/translations.g.dart';
 import 'package:logger/logger.dart';
 
-/// Shows the in-app review dialog. Prefer a stable [context] (not a sheet that
+/// Shows the in-app review funnel. Prefer a stable [context] (not a sheet that
 /// will be popped before the async work finishes).
 ///
-/// 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.
+/// Two-step "rating protection" funnel:
+///   1. A sentiment gate ("Enjoying the app?") with a positive / negative pick.
+///   2a. Positive → a gold-star [KasyDialog] that sends the user to the store
+///       (App Store / Play Store) to write a public review.
+///   2b. Negative → the private `/feedback` screen, so an unhappy user vents to
+///       us instead of leaving a low public rating.
+///
+/// Dismissing any step just defers the next ask and keeps the user where they
+/// are. Returns true once the funnel was shown (regardless of the branch taken).
 Future<bool> showReviewDialog(
   BuildContext context,
   WidgetRef ref, {
@@ -23,7 +30,7 @@ Future<bool> showReviewDialog(
 }) async {
   // Store reviews are native-only (App Store / Play Store). In production the
   // auto prompt never shows on web (nowhere to send the user). But a forced
-  // call — the admin preview — still shows the dialog on web so its design can
+  // call — the admin preview — still shows the funnel on web so its design can
   // be reviewed there; only the store action won't do anything.
   if (kIsWeb && !force) {
     return false;
@@ -46,26 +53,102 @@ Future<bool> showReviewDialog(
     return false;
   }
 
-  await showKasyDialog<void>(
+  // Defer the next ask up front, so any outcome (dismiss, positive, negative)
+  // counts as "asked" and we don't pester the user again right away.
+  await rating.delay();
+  analytics.logEvent('rating_funnel_open', {});
+  if (!context.mounted) {
+    return false;
+  }
+
+  // Step 1 — sentiment gate.
+  final bool? enjoying = await _askEnjoying(context, analytics);
+  if (enjoying == null) {
+    return true; // dismissed without choosing
+  }
+
+  // Step 2b — negative branch: keep the bad review private.
+  if (!enjoying) {
+    analytics.logEvent('rating_funnel_negative', {});
+    if (context.mounted) {
+      await context.push('/feedback');
+    }
+    return true;
+  }
+
+  // Step 2a — positive branch: send the happy user to the store.
+  analytics.logEvent('rating_funnel_positive', {});
+  if (!context.mounted) {
+    return true;
+  }
+  await _askStoreReview(context, ratingRepository, rating, analytics);
+  return true;
+}
+
+/// Step 1: the sentiment gate. Returns true (enjoying), false (could be better)
+/// or null (dismissed without choosing).
+Future<bool?> _askEnjoying(BuildContext context, AnalyticsApi analytics) {
+  return showKasyDialog<bool>(
     context: context,
     builder: (dialogContext) {
-      ratingRepository.delay();
-      final translations = Translations.of(dialogContext).review_popup;
+      final t = Translations.of(dialogContext).review_popup;
+      return KasyDialog(
+        leadingIcon: KasyIcons.favorite,
+        iconTone: KasyDialogIconTone.info,
+        title: t.question_title,
+        titleCentered: true,
+        message: t.question_description,
+        onClose: () {
+          analytics.logEvent('rating_funnel_dismiss', {});
+          Navigator.of(dialogContext).pop();
+        },
+        footer: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            KasyButton(
+              label: t.question_positive,
+              expand: true,
+              onPressed: () => Navigator.of(dialogContext).pop(true),
+            ),
+            const SizedBox(height: KasySpacing.sm),
+            KasyButton(
+              label: t.question_negative,
+              variant: KasyButtonVariant.soft,
+              expand: true,
+              onPressed: () => Navigator.of(dialogContext).pop(false),
+            ),
+          ],
+        ),
+      );
+    },
+  );
+}
+
+/// Step 2a (positive branch): the celebratory store-review dialog.
+Future<void> _askStoreReview(
+  BuildContext context,
+  RatingRepository ratingRepository,
+  Review rating,
+  AnalyticsApi analytics,
+) {
+  return showKasyDialog<void>(
+    context: context,
+    builder: (dialogContext) {
+      final t = Translations.of(dialogContext).review_popup;
       return KasyDialog(
         leadingIcon: KasyIcons.star,
         // 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,
+        title: t.title,
         titleCentered: true,
-        message: translations.description,
+        message: t.description,
         onClose: () {
           analytics.logEvent('rating_popup_close', {});
-          rating.delay();
           Navigator.of(dialogContext).pop();
         },
         footer: KasyButton(
-          label: translations.rate_button,
+          label: t.rate_button,
           expand: true,
           onPressed: () {
             analytics.logEvent('rating_popup_show', {});
@@ -78,5 +161,4 @@ Future<bool> showReviewDialog(
       );
     },
   );
-  return true;
 }

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

@@ -184,6 +184,31 @@ class KasyTextTheme extends ThemeExtension<KasyTextTheme> {
   /// Caption, hint, version label, footnote. 12 / w400.
   TextStyle get caption => bodySmall;
 
+  // --- Overlay & component roles -----------------------------------------
+  // The harmonic ladder for surfaces and components: an OVERLAY (a full
+  // decision surface — dialog, bottom sheet) carries the largest title (20); an
+  // inline COMPONENT header (alert, accordion) sits a step below (16) so it
+  // reads as a header WITHIN the component, not a screen section; supporting
+  // text everywhere is 14. These are deliberately STABLE across breakpoints —
+  // only page/hero headings scale (Material/Apple model). Route every
+  // dialog/sheet/alert/accordion through these so titles never drift per
+  // component.
+
+  /// Title of a modal/overlay surface (dialog, bottom sheet, OTP sheet).
+  /// 20 / w600 — the largest title tier, for full decision surfaces.
+  TextStyle get overlayTitle => titleLarge;
+
+  /// Header of an inline component (alert, accordion). 16 / w600 — content
+  /// emphasis, one clear step below an overlay/section title and above body, so
+  /// a compact card never wears a screen-section-sized title.
+  TextStyle get componentTitle =>
+      bodyLarge.copyWith(fontWeight: FontWeight.w600);
+
+  /// Supporting text / description inside an overlay or component (the message
+  /// under a dialog/sheet/alert title, an accordion body). 14 / w400. Apply the
+  /// muted colour and any line-height at the call site.
+  TextStyle get supportingText => bodyMedium;
+
   /// Builds the full text theme for a given [device].
   ///
   /// Each slot resolves its size from the responsive [KasyTypeScale] ramp at the

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

@@ -7,11 +7,12 @@ import 'package:kasy_kit/core/web_screen_width.dart';
 ///
 /// 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
+/// `0.93` walks back ~7% so the web app reads close to the native baseline
+/// without the user touching browser zoom — a gentle correction (a bit stronger
+/// than the midpoint between full size and a total undo, but still short of
+/// fully undoing the 10%) 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
@@ -24,11 +25,11 @@ import 'package:kasy_kit/core/web_screen_width.dart';
 /// - 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;
+const double kWebViewportScale = 0.93;
 
 /// Master on/off for the web render scale — the single knob.
 ///
-/// `true` (default): the web app is rendered ~5% smaller than native via
+/// `true` (default): the web app is rendered ~7% 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