kasy-cli 1.31.14 → 1.32.0

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

@@ -1,6 +1,8 @@
 import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:kasy_kit/components/kasy_text_field.dart'
+    show KasyTextFieldVariant;
 import 'package:kasy_kit/core/theme/theme.dart';
 
 /// Kasy Design System — multi-line text area.
@@ -31,6 +33,11 @@ class KasyTextArea extends StatefulWidget {
   final int? maxLines;
   final int? maxLength;
 
+  /// Visual treatment — same set as [KasyTextField] (primary / secondary /
+  /// flat / embedded). [flat] is the surface fill with a hairline border and
+  /// NO shadow. Defaults to [primary].
+  final KasyTextFieldVariant variant;
+
   const KasyTextArea({
     super.key,
     this.controller,
@@ -53,6 +60,7 @@ class KasyTextArea extends StatefulWidget {
     this.minLines = 4,
     this.maxLines = 8,
     this.maxLength,
+    this.variant = KasyTextFieldVariant.primary,
   });
 
   @override
@@ -129,6 +137,10 @@ class _KasyTextAreaState extends State<KasyTextArea> {
   @override
   Widget build(BuildContext context) {
     final bool isDisabled = !widget.enabled;
+    final bool isSecondary = widget.variant == KasyTextFieldVariant.secondary;
+    final bool isEmbedded = widget.variant == KasyTextFieldVariant.embedded;
+    final bool isFlat = widget.variant == KasyTextFieldVariant.flat;
+    final bool showShadow = widget.variant == KasyTextFieldVariant.primary;
     final bool hasInvalidState = widget.isInvalid || widget.errorText != null;
     final bool useForm = widget.validator != null || widget.onSaved != null;
 
@@ -156,12 +168,24 @@ class _KasyTextAreaState extends State<KasyTextArea> {
     final Color resolvedFocusedBorderColor = hasInvalidState
         ? context.colors.error
         : focusedBorderColor;
-    final Color enabledBorderColor = KasyShadows.inputFieldRestingBorder(context);
+    final Color enabledBorderColor = isFlat
+        ? KasyShadows.inputFieldFlatBorder(context)
+        : KasyShadows.inputFieldRestingBorder(context);
     final Color restingBorderColor = hasInvalidState
         ? context.colors.error
         : enabledBorderColor;
-    final double restingBorderWidth = hasInvalidState ? 1.3 : 1;
-    final Color surfaceColor = context.colors.surface;
+    final double restingBorderWidth = isEmbedded
+        ? 0
+        : hasInvalidState
+            ? 1.3
+            : 1;
+    final Color surfaceColor = isEmbedded
+        ? Colors.transparent
+        : isSecondary
+            ? (context.isDark
+                ? const Color(0xFF272729)
+                : const Color(0xFFF0F0F2))
+            : context.colors.surface;
     final Color fieldFillColor = isDisabled
         ? surfaceColor.withValues(alpha: context.isDark ? 0.9 : 0.94)
         : surfaceColor;
@@ -348,9 +372,17 @@ class _KasyTextAreaState extends State<KasyTextArea> {
         DecoratedBox(
           decoration: BoxDecoration(
             borderRadius: fieldRadius,
-            boxShadow: [fieldShadow],
+            boxShadow: showShadow ? [fieldShadow] : null,
+          ),
+          // Force standard visual density so the area renders identically on
+          // web/desktop and mobile (Flutter's adaptive density is compact on
+          // web and would otherwise shrink line spacing). Mirrors KasyTextField.
+          child: Theme(
+            data: Theme.of(context).copyWith(
+              visualDensity: VisualDensity.standard,
+            ),
+            child: innerField,
           ),
-          child: innerField,
         ),
         if (hasHelperText || hasCounter) ...[
           const SizedBox(height: KasySpacing.xs),

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

@@ -3,7 +3,12 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 
-enum KasyTextFieldVariant { primary, secondary, embedded }
+/// Visual treatments for [KasyTextField]:
+/// - [primary]   filled (surface) + hairline border + soft shadow
+/// - [secondary] elevated fill (contrasts on a surface/card) + border, no shadow
+/// - [flat]      primary's surface fill + border, but NO shadow (e.g. header search)
+/// - [embedded]  transparent, no border, no shadow
+enum KasyTextFieldVariant { primary, secondary, embedded, flat }
 
 enum KasyTextFieldContentType { text, email, password, phone }
 
@@ -18,7 +23,13 @@ class KasyTextField extends StatefulWidget {
   static const double adjacentFieldSpacing = KasySpacing.md;
   static const double iconSlotExtent = 38;
   static const double iconGlyphSize = 17;
-  static const double webSingleLineVerticalPadding = 16;
+
+  /// Canonical resting height for a single-line field. Drives the field's
+  /// vertical content padding (what the filled/bordered box actually wraps), so
+  /// changing this value grows or shrinks the visible box on every platform.
+  /// Matches the medium [KasyButton] height (45) so fields, the DatePicker
+  /// trigger and the primary action all share one control height.
+  static const double singleLineHeight = 41;
 
   final TextEditingController? controller;
   final FocusNode? focusNode;
@@ -57,9 +68,10 @@ class KasyTextField extends StatefulWidget {
   final Widget? labelTrailing;
 
   /// Override for the field's vertical/horizontal padding. When null, the
-  /// design-system default is used (`KasySpacing.md` horizontal, `10`
-  /// vertical on mobile / `webSingleLineVerticalPadding` on web). Pass a
-  /// smaller value to make the field render shorter.
+  /// design-system default is used (`KasySpacing.md` horizontal; single-line
+  /// fields use 0 vertical and take their height from the [singleLineHeight]
+  /// SizedBox, multi-line uses `13`). Passing a custom value opts the field out
+  /// of the fixed single-line height (e.g. the compact header search).
   final EdgeInsetsGeometry? contentPadding;
 
   /// Override for the field's drop shadow. When null, the design-system
@@ -74,6 +86,14 @@ class KasyTextField extends StatefulWidget {
   /// affordance would feel noisy.
   final bool focusBorder;
 
+  /// When true, paints the focused (primary) border even though the field holds
+  /// no real focus. Composite controls like [KasyDatePicker] use this to show
+  /// the trigger as "active" while their overlay is open WITHOUT taking focus —
+  /// taking real focus would double up with the wrapper's keyboard focus ring
+  /// (a second outline on mouse click) and can be stolen by the overlay after a
+  /// moment. No effect on the embedded variant.
+  final bool forceFocusBorder;
+
   /// Forwards to [TextField.enableInteractiveSelection]. When false, the
   /// field renders no caret, suppresses text-selection gestures, and stops
   /// showing the I-beam cursor on web/desktop — handy for read-only triggers
@@ -117,6 +137,7 @@ class KasyTextField extends StatefulWidget {
     this.contentPadding,
     this.boxShadow,
     this.focusBorder = true,
+    this.forceFocusBorder = false,
     this.enableInteractiveSelection = true,
   });
 
@@ -239,6 +260,7 @@ class _KasyTextFieldState extends State<KasyTextField> {
         widget.variant == KasyTextFieldVariant.secondary;
     final bool isEmbeddedVariant =
         widget.variant == KasyTextFieldVariant.embedded;
+    final bool isFlatVariant = widget.variant == KasyTextFieldVariant.flat;
     // (No more web-specific padding — the field now uses the same vertical
     // padding on every platform so primary/web TextFields render at the same
     // height as mobile and as the KasyDatePicker trigger.)
@@ -265,6 +287,24 @@ class _KasyTextFieldState extends State<KasyTextField> {
     final bool resolvedObscureText = isPassword
         ? !_passwordVisible
         : widget.obscureText;
+    // Single-line fields with the default padding get a fixed canonical height
+    // so they match the medium KasyButton and render identically on every
+    // platform. Multi-line fields (minLines set, or maxLines > 1) keep growing
+    // with their content; callers that pass a custom [contentPadding] (e.g. the
+    // compact header search) are opting into their own height, so the lock is
+    // skipped for them.
+    final bool isSingleLineField =
+        widget.contentPadding == null &&
+        widget.minLines == null &&
+        (resolvedObscureText || (widget.maxLines ?? 1) == 1);
+    // Height of the filled/bordered box = single-line text height + 2× vertical
+    // padding. So to hit [singleLineHeight] we back out the padding from it
+    // (subtract one text line, halve). This is the only lever that actually
+    // stretches the visible box — constraints/SizedBox just pad around it.
+    const double singleLineTextHeight = 19;
+    final double singleLineVerticalPadding =
+        ((KasyTextField.singleLineHeight - singleLineTextHeight) / 2)
+            .clamp(0.0, 60.0);
     final Iterable<String>? resolvedAutofillHints =
         widget.autofillHints ?? _defaultAutofillHints(widget.contentType);
     final TextInputType? resolvedKeyboardType =
@@ -320,7 +360,7 @@ class _KasyTextFieldState extends State<KasyTextField> {
     // platform — removed the previous `!kIsWeb` guard so web matches mobile
     // and the KasyDatePicker trigger.
     final bool shouldShowShadow =
-        !isSecondaryVariant && !isEmbeddedVariant;
+        !isSecondaryVariant && !isEmbeddedVariant && !isFlatVariant;
     final BoxShadow resolvedShadow = BoxShadow(
       color: const Color(0xFF000000).withValues(
         alpha: context.isDark ? 0.28 : 0.11,
@@ -336,9 +376,9 @@ class _KasyTextFieldState extends State<KasyTextField> {
     final Color resolvedFocusedBorderColor = hasInvalidState
         ? context.colors.error
         : focusedBorderColor;
-    final Color enabledBorderColor = KasyShadows.inputFieldRestingBorder(
-      context,
-    );
+    final Color enabledBorderColor = isFlatVariant
+        ? KasyShadows.inputFieldFlatBorder(context)
+        : KasyShadows.inputFieldRestingBorder(context);
     final Color restingBorderColor = hasInvalidState
         ? context.colors.error
         : enabledBorderColor;
@@ -351,14 +391,22 @@ class _KasyTextFieldState extends State<KasyTextField> {
       borderRadius: fieldRadius,
       borderSide: BorderSide.none,
     );
+    // When forceFocusBorder is set, the always-visible (resting) border adopts
+    // the focused look — so a composite trigger reads as "active" without the
+    // field ever holding real focus.
     final InputBorder resolvedEnabledBorder = isEmbeddedVariant
         ? embeddedBorder
         : OutlineInputBorder(
             borderRadius: fieldRadius,
-            borderSide: BorderSide(
-              color: restingBorderColor,
-              width: restingBorderWidth,
-            ),
+            borderSide: widget.forceFocusBorder
+                ? BorderSide(
+                    color: resolvedFocusedBorderColor,
+                    width: focusedBorderWidth,
+                  )
+                : BorderSide(
+                    color: restingBorderColor,
+                    width: restingBorderWidth,
+                  ),
           );
     // When focusBorder is disabled, the focused state collapses to the
     // resting border so the field never grows that bright outline. Error
@@ -462,10 +510,12 @@ class _KasyTextFieldState extends State<KasyTextField> {
               width: KasyTextField.iconSlotExtent,
               height: KasyTextField.iconSlotExtent,
             ),
+      // Single-line height comes from this vertical padding (derived from
+      // singleLineHeight); multi-line keeps a fixed comfortable padding.
       contentPadding: widget.contentPadding ??
           EdgeInsets.symmetric(
             horizontal: isEmbeddedVariant ? 0 : KasySpacing.md,
-            vertical: 13,
+            vertical: isSingleLineField ? singleLineVerticalPadding : 13,
           ),
       fillColor: fieldFillColor,
       filled: !isEmbeddedVariant,
@@ -548,8 +598,19 @@ class _KasyTextFieldState extends State<KasyTextField> {
       child: Semantics(
         textField: true,
         enabled: widget.enabled,
-        label: widget.semanticLabel ?? widget.label ?? widget.hint ?? 'Input',
-        child: innerField,
+        label:
+            widget.semanticLabel ?? widget.label ?? widget.hint ?? 'Text field',
+        // Force standard visual density so the field renders at the same height
+        // on web/desktop as on mobile (Flutter's adaptive density is compact on
+        // web and would otherwise shave ~4px). The height itself comes from the
+        // vertical contentPadding below — that's what the filled/bordered box
+        // wraps, so it grows/shrinks the box you actually see.
+        child: Theme(
+          data: Theme.of(context).copyWith(
+            visualDensity: VisualDensity.standard,
+          ),
+          child: innerField,
+        ),
       ),
     );
     final Widget? labelTrailing = widget.labelTrailing;

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

@@ -72,7 +72,7 @@ class KasyToast extends StatelessWidget {
           children: [
             Padding(
               padding: const EdgeInsets.only(top: 2),
-              child: icon ?? Icon(pal.icon, size: 24, color: pal.accent),
+              child: icon ?? Icon(pal.icon, size: KasyIconSize.xl, color: pal.accent),
             ),
             const SizedBox(width: KasySpacing.smd),
             Expanded(

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/config/features.dart

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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