kasy-cli 1.37.1 → 1.39.0

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

@@ -21,6 +21,53 @@ class DevInspectorInfo {
   final String? semanticWidget;
   final List<String> searchHints;
 
+  /// The widget's main color as a usable hex code (e.g. `#FC0303`), or null if
+  /// none is set. Raw `Color(...)` descriptions aren't useful to a dev — a hex
+  /// is. Text content / labels are intentionally NOT surfaced: they're already
+  /// visible on screen, so repeating them just adds noise.
+  String? get colorHex {
+    for (final p in properties) {
+      final int i = p.indexOf(':');
+      if (i <= 0) continue;
+      if (!p.substring(0, i).toLowerCase().contains('color')) continue;
+      final hex = _parseColorHex(p.substring(i + 1));
+      if (hex != null) return hex;
+    }
+    return null;
+  }
+
+  static String? _parseColorHex(String raw) {
+    // Legacy form: Color(0xAARRGGBB)
+    final legacy = RegExp('0x([0-9a-fA-F]{8})').firstMatch(raw);
+    if (legacy != null) {
+      final v = legacy.group(1)!.toUpperCase();
+      return v.startsWith('FF') ? '#${v.substring(2)}' : '#$v';
+    }
+    // Modern form: Color(alpha: 1.0, red: 0.98, green: 0.0, blue: 0.0, …)
+    double? comp(String key) {
+      final m = RegExp('$key:\\s*([0-9.]+)').firstMatch(raw);
+      return m == null ? null : double.tryParse(m.group(1)!);
+    }
+
+    final r = comp('red');
+    final g = comp('green');
+    final b = comp('blue');
+    if (r == null || g == null || b == null) return null;
+    final a = comp('alpha');
+    String h(double v) =>
+        (v * 255).round().clamp(0, 255).toRadixString(16).padLeft(2, '0').toUpperCase();
+    final rgb = '${h(r)}${h(g)}${h(b)}';
+    return (a == null || a >= 0.999) ? '#$rgb' : '#${h(a)}$rgb';
+  }
+
+  /// Compact size string: `w×h` (logical pixels), e.g. `44×44`. Position is
+  /// intentionally omitted — it isn't useful when identifying/editing a widget.
+  String get sizeLabel {
+    final w = boundingBox.width.toStringAsFixed(0);
+    final h = boundingBox.height.toStringAsFixed(0);
+    return '$w×$h';
+  }
+
   String toAIClipboard({String? routeName}) {
     final buf = StringBuffer();
     buf.writeln('## Inspected widget');

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

@@ -6,7 +6,15 @@ import 'package:kasy_kit/core/dev_inspector/dev_inspector_info.dart';
 class DevInspectorService {
   DevInspectorService._();
 
-  static const _screenRegex = r'(Page|Screen|Route|View)$';
+  static const _screenRegex = r'(Page|Screen|Route|View|Tab|Shell)$';
+
+  /// Strips generic type arguments so `PopupMenuItem<bool>` matches against
+  /// `PopupMenuItem`, `Router<Object>` against `Router`, etc. Set / regex
+  /// lookups all compare against this base name.
+  static String _baseName(String typeName) {
+    final i = typeName.indexOf('<');
+    return i < 0 ? typeName : typeName.substring(0, i);
+  }
 
   // Widgets we refuse to return — even after climbing.
   static const _skipSet = <String>{
@@ -64,9 +72,32 @@ class DevInspectorService {
 
     // Context propagation
     'Theme', 'DefaultTextStyle', 'IconTheme', 'IconButtonTheme',
+    'CupertinoTheme', 'InheritedCupertinoTheme', 'CupertinoUserInterfaceLevel',
+    'ResponsiveTextTheme',
     'Localizations', 'Directionality', 'Title',
     'DefaultSelectionStyle', 'SelectionContainer', 'AnnotatedRegion',
 
+    // App-root / navigation / overlay scaffolding (framework + go_router +
+    // project shell). Selecting these is never useful — they're plumbing.
+    'Router', 'InheritedGoRouter', 'GoRouterStateRegistryScope',
+    'StatefulNavigationShell', 'Navigator', 'Overlay', 'OverlayPortal',
+    'CustomMultiChildLayout', 'CustomSingleChildLayout', 'LayoutId',
+    'ScaffoldMessenger', 'TapRegion', 'TapRegionSurface',
+    'ShortcutRegistrar', 'DefaultTextEditingShortcuts', 'ExcludeFocus',
+    'FocusVisibility', 'Initializer',
+
+    // Framework app-root + dev wrappers (the engine's View/RootWidget, the app
+    // widget, Riverpod/i18n providers, and the device_preview chrome used on
+    // web). None is ever a meaningful selection or a "screen".
+    'RootWidget', 'View', 'RawView', 'ViewAnchor',
+    'WidgetsApp', 'MaterialApp', 'CupertinoApp', 'MyApp',
+    'RootRestorationScope', 'SharedAppData',
+    'TranslationProvider', 'InheritedLocaleData',
+    'ProviderScope', 'UncontrolledProviderScope',
+    'ThemeProvider', 'ChangeNotifierProvider', 'MediaQueryObserver',
+    'WebDevicePreview', 'DevicePreview', 'DeviceFrame', 'VirtualKeyboard',
+    'RotatedBox',
+
     // Routing / storage
     'KeyedSubtree', 'AutomaticKeepAlive', 'KeepAlive', 'TickerMode',
     'Offstage', 'PageStorage', 'RestorationScope',
@@ -93,12 +124,8 @@ class DevInspectorService {
     'RichText', 'RawMaterialButton',
   };
 
-  static bool _shouldClimbPast(String typeName) {
-    if (_climbPastSet.contains(typeName)) return true;
-    return typeName.startsWith('NotificationListener<') ||
-        typeName.startsWith('Listener<') ||
-        typeName.startsWith('Builder<');
-  }
+  static bool _shouldClimbPast(String typeName) =>
+      _climbPastSet.contains(_baseName(typeName));
 
   // Used by ancestor-list builders (kept as-is — affects displayed tree only).
   static bool _isGenericUi(String typeName) => _shouldClimbPast(typeName);
@@ -125,11 +152,16 @@ class DevInspectorService {
     '_PrimaryScrollControllerScope',
     '_TapRegionRegistry', '_TapRegionSurface',
     '_KeyedSubtree',
+    // Semantics / pointer / scroll internals that wrap every tappable widget.
+    // Stopping here yields a useless `_GestureSemantics`/`_ScrollableScope`
+    // instead of the real widget.
+    '_GestureSemantics', '_InkResponseStateWidget', '_ScrollableScope',
+    '_RenderScrollSemantics',
   };
 
   static bool _shouldSkip(String typeName) {
-    if (_skipSet.contains(typeName)) return true;
-    return _privateFrameworkSet.contains(typeName);
+    final base = _baseName(typeName);
+    return _skipSet.contains(base) || _privateFrameworkSet.contains(base);
   }
 
   static List<String> _extractProperties(Element element) {
@@ -182,18 +214,26 @@ class DevInspectorService {
       return routeName;
     }
 
-    final privateAwareAncestors = _extractAncestors(element, includePrivate: true);
+    // Scan innermost-first so the most specific screen wins (e.g. the active
+    // `AdminUsersTab` rather than the surrounding `AdminShell`).
+    final privateAwareAncestors = _extractAncestors(
+      element,
+      includePrivate: true,
+    );
     final regex = RegExp('^_?[A-Za-z0-9]+$_screenRegex');
-    for (final type in privateAwareAncestors.reversed) {
+    for (final type in privateAwareAncestors) {
       if (regex.hasMatch(type)) return _sanitizeType(type);
     }
-    for (final type in ancestors.reversed) {
-      if (RegExp(_screenRegex).hasMatch(type)) return _sanitizeType(type);
+    for (final type in ancestors) {
+      if (regex.hasMatch(type)) return _sanitizeType(type);
     }
     return null;
   }
 
-  static String? _extractSemanticWidget(String widgetType, List<String> ancestors) {
+  static String? _extractSemanticWidget(
+    String widgetType,
+    List<String> ancestors,
+  ) {
     final chain = <String>[widgetType, ...ancestors];
     final featureRegex = RegExp(
       r'(Page|Screen|Card|Tile|Item|Section|Panel|Dialog|Modal|Header|Footer|Widget|Component)$',
@@ -203,7 +243,7 @@ class DevInspectorService {
     for (final type in chain) {
       if (_shouldSkip(type)) continue;
       if (_shouldClimbPast(type)) continue;
-      if (featureRegex.hasMatch(type)) return type;
+      if (featureRegex.hasMatch(_baseName(type))) return type;
     }
 
     // 2) Fallback to first non-generic non-skipped widget.

package/templates/firebase/lib/core/icons/kasy_icons.dart

@@ -87,7 +87,11 @@ abstract final class KasyIcons {
   static const IconData moreVert = LucideIcons.ellipsisVertical300;
   static const IconData microphone = LucideIcons.mic300;
   static const IconData northEast = LucideIcons.arrowUpRight300;
-  static const IconData notification = LucideIcons.bell300;
+  // NOTE: the `bell300` glyph in lucide_icons_flutter 3.1.14+2 is corrupted in the
+  // Lucide300 weight font — it renders FILLED instead of outline (the same font
+  // renders every other 300 icon correctly). Use the base `bell` (primary Lucide
+  // font), which is a proper outline bell, so it matches the rest of the linear set.
+  static const IconData notification = LucideIcons.bell;
   static const IconData notificationActive = LucideIcons.bellRing300;
   static const IconData notificationAdd = LucideIcons.bellPlus300;
   static const IconData notificationOff = LucideIcons.bellOff300;
@@ -117,4 +121,15 @@ abstract final class KasyIcons {
   static const IconData upload = LucideIcons.upload300;
   static const IconData video = LucideIcons.video300;
   static const IconData widgets = LucideIcons.component300;
+
+  /// Device frame visible / hidden (web device preview chrome).
+  static const IconData deviceFrame = LucideIcons.smartphone300;
+  static const IconData deviceFrameOff = LucideIcons.scan300;
+
+  /// Screen orientation (web device preview chrome).
+  static const IconData landscape = LucideIcons.rectangleHorizontal300;
+  static const IconData portrait = LucideIcons.rectangleVertical300;
+
+  /// Element inspector pick tool (web device preview chrome).
+  static const IconData inspector = LucideIcons.squareDashedMousePointer300;
 }

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

@@ -60,8 +60,11 @@ class UserStateNotifier extends _$UserStateNotifier implements OnStartService {
     return ref.read(environmentProvider).authenticationMode;
   }
 
+  StreamSubscription<String?>? _roleSubscription;
+
   @override
   UserState build() {
+    ref.onDispose(() => _roleSubscription?.cancel());
     return const UserState(user: User.loading());
   }
 
@@ -79,6 +82,7 @@ class UserStateNotifier extends _$UserStateNotifier implements OnStartService {
       rethrow;
     }
     assert(state.user is! LoadingUserData, 'UserStateNotifier is not ready');
+    _syncRoleListener();
     await _initDeviceRegistration();
     _deviceRepository.onTokenUpdate(_onUpdateToken);
   }
@@ -89,6 +93,7 @@ class UserStateNotifier extends _$UserStateNotifier implements OnStartService {
   Future<void> onSignin() async {
     state = const UserState(user: User.loading());
     await _loadState();
+    _syncRoleListener();
     await _initDeviceRegistration();
     // A successful sign-in puts the user past first-run onboarding. Remember it
     // so that after a later logout they land on the sign-in screen instead of
@@ -166,6 +171,7 @@ class UserStateNotifier extends _$UserStateNotifier implements OnStartService {
   /// It will unregister the device from the notification service
   /// and logout the user
   Future<void> onLogout() async {
+    _stopRoleListener();
     final userId = state.user.idOrThrow;
     _deviceRepository.removeTokenUpdateListener();
     // Best-effort: if the network call fails we still proceed with logout so
@@ -181,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();
@@ -278,7 +285,19 @@ class UserStateNotifier extends _$UserStateNotifier implements OnStartService {
   /// Here is the function to do it.
   /// It will delete the user account and logout the user
   Future<void> deleteAccount() async {
-    final userId = state.user.idOrThrow;
+    _stopRoleListener();
+    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);
@@ -287,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).
@@ -297,6 +317,54 @@ 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
+  // -------------------------------
+
+  void _syncRoleListener() {
+    final id = state.user.idOrNull;
+    if (id != null && state.user is AuthenticatedUserData) {
+      _startRoleListener(id);
+    } else {
+      _stopRoleListener();
+    }
+  }
+
+  void _startRoleListener(String userId) {
+    _roleSubscription?.cancel();
+    _roleSubscription = _userRepository
+        .watchRole(userId)
+        .skip(1) // skip initial snapshot — state was just loaded
+        .listen((newRole) {
+          final currentRole = switch (state.user) {
+            AuthenticatedUserData(:final role) => role,
+            _ => null,
+          };
+          if (newRole != currentRole) {
+            refresh();
+          }
+        });
+  }
+
+  void _stopRoleListener() {
+    _roleSubscription?.cancel();
+    _roleSubscription = null;
+  }
+
   // -------------------------------
   // PRIVATES
   // -------------------------------

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/theme/universal_theme.dart

@@ -78,6 +78,15 @@ class UniversalThemeFactory extends KasyThemeDataFactory {
         bottomSheetTheme: const BottomSheetThemeData(
           constraints: BoxConstraints(),
         ),
+        // Drawers are flat panels (like the sidebar rail), not Material 3's
+        // rounded, shadowed sheet: square edge, surface fill, no drop shadow.
+        // Set once here so every Drawer in the app is consistent — no per-use
+        // shape/elevation overrides needed.
+        drawerTheme: DrawerThemeData(
+          backgroundColor: colors.surface,
+          shape: const RoundedRectangleBorder(),
+          elevation: 0,
+        ),
       ),
     );
   }

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

@@ -0,0 +1,14 @@
+/// Exports a device-preview screenshot PNG to the clipboard (web), with a
+/// download fallback.
+///
+/// The real implementation uses web-only APIs (`dart:js_interop` + `package:web`)
+/// which do NOT compile on the Dart VM / native. Those are isolated in
+/// `png_clipboard_web.dart` and pulled in ONLY on web via a conditional import;
+/// everywhere else the no-op stub (`png_clipboard_io.dart`) is used. This keeps
+/// `flutter test` (VM compile) and native builds green — the web-only code never
+/// reaches them.
+library;
+
+export 'png_clipboard_io.dart'
+    if (dart.library.js_interop) 'png_clipboard_web.dart';
+export 'png_export_result.dart';

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

@@ -0,0 +1,9 @@
+import 'dart:typed_data';
+
+import 'package:kasy_kit/core/web_device_preview/png_export_result.dart';
+
+/// Non-web stub. The device preview is web-only, so this never runs at runtime —
+/// it exists only so the VM / native build (and `flutter test`) compile without
+/// the web interop.
+Future<PngExportResult> copyOrDownloadPng(Uint8List bytes) async =>
+    PngExportResult.unavailable;