kasy-cli 1.37.1 → 1.39.0

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

@@ -16,7 +16,10 @@ import 'package:kasy_kit/i18n/translations.g.dart';
 // ─────────────────────────────────────────────────────────────────────────────
 
 // Figma sidebar is 223 wide; we run a touch wider for breathing room.
-const double _kWidthOpen = 248.0;
+/// Open (expanded) width of the rail. Exposed so hosts that present it as a
+/// drawer can size the drawer to match (e.g. the admin console on mobile).
+const double kasySidebarWidth = 248.0;
+const double _kWidthOpen = kasySidebarWidth;
 const double _kWidthCollapsed = 64.0;
 const double _kPadH = 16.0; // px-4
 // Tighter horizontal gutter for the narrow collapsed rail, so a 64px rail keeps
@@ -208,11 +211,68 @@ enum KasySidebarCollapseMode {
   collapsed,
 }
 
+/// One row in the sidebar's generic ([KasySidebar.items]) mode: an icon, a
+/// label and a tap callback. Reuses the exact same row recipe as the app's real
+/// navigation, so a host (e.g. the admin console) can drive the SAME sidebar
+/// with its own screens instead of the Bart-connected app tabs.
+///
+/// When [children] is non-empty the row becomes an expandable group (the same
+/// dropdown recipe as the connected "Income" submenu): tapping the row toggles
+/// the sub-items, and [onTap] is ignored. A leaf row uses [onTap] to navigate
+/// and [selected] to show the active pill.
+class KasySidebarItem {
+  final IconData icon;
+  final String label;
+
+  /// Leaf tap (navigate). Ignored when [children] is non-empty (a group only
+  /// expands/collapses on tap).
+  final VoidCallback? onTap;
+
+  /// Highlights this leaf as the active screen.
+  final bool selected;
+
+  /// Sub-rows. When non-empty this item renders as an expandable group instead
+  /// of a leaf.
+  final List<KasySidebarSubItem> children;
+
+  const KasySidebarItem({
+    required this.icon,
+    required this.label,
+    this.onTap,
+    this.selected = false,
+    this.children = const [],
+  });
+
+  bool get isGroup => children.isNotEmpty;
+}
+
+/// A sub-row under an expandable [KasySidebarItem] group (text-only, like the
+/// connected "Income" submenu). [selected] highlights the active screen.
+class KasySidebarSubItem {
+  final String label;
+  final VoidCallback onTap;
+  final bool selected;
+  const KasySidebarSubItem({
+    required this.label,
+    required this.onTap,
+    this.selected = false,
+  });
+}
+
 /// A SaaS-style sidebar modelled on the HeroUI Figma kit: brand logo + panel
 /// toggle, a workspace selector, a segmented control, a navigable list with an
 /// active pill, and a pinned ⌘K search row. Collapses to an icon rail (with
 /// tooltips and a hover submenu popup) on narrow viewports or via the toggle.
 ///
+/// Three modes, in priority order:
+/// 1. **Generic** — pass [items] (+ [sectionLabel], [footerItems]) to drive the
+///    rail with an arbitrary screen list (leaves and/or expandable groups). Used
+///    by the admin console so it shares this exact component (logo, collapse,
+///    tooltips, profile) instead of a bespoke copy.
+/// 2. **Connected** — pass [routes]/[onTapItem]/[currentItem] for the real app
+///    tabs (Bart navigation).
+/// 3. **Showcase** — the HeroUI demo items (default).
+///
 /// Pass [onSettingsTap] to respond when the user taps Settings.
 class KasySidebar extends StatefulWidget {
   const KasySidebar({
@@ -232,8 +292,23 @@ class KasySidebar extends StatefulWidget {
     this.profileGradient = KasyAvatarGradients.indigo,
     this.onProfileTap,
     this.notificationsUnread = 0,
+    this.items,
+    this.sectionLabel,
+    this.footerItems = const [],
   });
 
+  /// Generic nav rows. When non-null the sidebar runs in generic mode (renders
+  /// these — leaves highlighted by their own [KasySidebarItem.selected], groups
+  /// expandable) instead of connected/showcase.
+  final List<KasySidebarItem>? items;
+
+  /// Optional uppercase section label shown above [items] (e.g. "ADMIN").
+  final String? sectionLabel;
+
+  /// Rows pinned at the bottom of [items] mode (above the profile block), like
+  /// the connected layout's Help/Logout — e.g. a "Back to app" action.
+  final List<KasySidebarItem> footerItems;
+
   /// Unread notification count. When greater than zero, the Notifications nav
   /// item shows an unread dot (mirrors the bottom-bar badge). Purely an unread
   /// indicator — not tied to push (which is native-only).
@@ -305,6 +380,11 @@ class _KasySidebarState extends State<KasySidebar> {
 
   bool _incomeExpanded = false;
 
+  // Expanded groups in generic [items] mode, keyed by the group's label (labels
+  // are unique per rail). A group is also shown expanded whenever one of its
+  // children is the active screen (so the open submenu always reflects the URL).
+  final Set<String> _expandedItemGroups = <String>{};
+
   // Showcase state.
   int _showcaseTab = 0; // 0 = Layers, 1 = Assets
   late String _activeItemId;
@@ -399,29 +479,19 @@ class _KasySidebarState extends State<KasySidebar> {
         ? Border(right: BorderSide(color: c.border, width: 0.5))
         : Border(left: BorderSide(color: c.border, width: 0.5));
 
-    // Figma `shadow-surface`: a soft lift in light mode only (dark uses none).
-    final List<BoxShadow> shadow = c.isDark
-        ? const <BoxShadow>[]
-        : const <BoxShadow>[
-            BoxShadow(
-              color: Color(0x14000000),
-              blurRadius: 4,
-              offset: Offset(0, 2),
-            ),
-            BoxShadow(
-              color: Color(0x0F000000),
-              blurRadius: 2,
-              offset: Offset(0, 1),
-            ),
-          ];
-
-    final Widget content = _connected
-        ? ValueListenableBuilder<int>(
-            valueListenable: widget.currentItem!,
-            builder: (_, currentIndex, _) =>
-                _buildConnectedContent(context, c, currentIndex),
-          )
-        : _buildShowcaseContent(context, c);
+    // No drop shadow: the rail separates from the content with the crisp 0.5px
+    // edge hairline only (it also bled at the seam when the content area didn't
+    // overpaint it). The hairline aligns with the web header's bottom border, so
+    // the chrome reads as one clean line — no soft contour around the rail.
+    final Widget content = widget.items != null
+        ? _buildItemsContent(context, c)
+        : _connected
+            ? ValueListenableBuilder<int>(
+                valueListenable: widget.currentItem!,
+                builder: (_, currentIndex, _) =>
+                    _buildConnectedContent(context, c, currentIndex),
+              )
+            : _buildShowcaseContent(context, c);
 
     return Material(
       type: MaterialType.transparency,
@@ -429,7 +499,7 @@ class _KasySidebarState extends State<KasySidebar> {
         duration: const Duration(milliseconds: 220),
         curve: Curves.easeInOut,
         width: _collapsed ? _kWidthCollapsed : _kWidthOpen,
-        decoration: BoxDecoration(color: c.bg, boxShadow: shadow),
+        decoration: BoxDecoration(color: c.bg),
         foregroundDecoration: BoxDecoration(border: edgeBorder),
         clipBehavior: Clip.hardEdge,
         child: content,
@@ -503,6 +573,305 @@ class _KasySidebarState extends State<KasySidebar> {
     );
   }
 
+  // ── Generic layout (host-provided items, e.g. admin console) ────────────────
+
+  /// Same chrome as the connected layout (logo band, dividers, profile block,
+  /// collapse + tooltips) but driven by [KasySidebar.items]/[footerItems], so a
+  /// host reuses this exact component with its own screens.
+  Widget _buildItemsContent(BuildContext context, _SidebarColors c) {
+    final List<KasySidebarItem> items = widget.items!;
+    return SizedBox.expand(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          _buildTopBand(c),
+          _buildDivider(c),
+          Expanded(
+            child: Padding(
+              padding: EdgeInsets.symmetric(horizontal: _railPadH),
+              child: SingleChildScrollView(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    // Top gap inside the scroll view so the list scrolls flush
+                    // under the top divider (symmetric with the bottom).
+                    const SizedBox(height: _kDividerGap),
+                    if (!_collapsed && widget.sectionLabel != null) ...[
+                      _buildSectionLabel(widget.sectionLabel!, c),
+                      const SizedBox(height: _kItemGap),
+                    ],
+                    for (final item in items)
+                      if (item.isGroup)
+                        _buildItemsGroup(context, item, c)
+                      else
+                        _buildItemRow(
+                          c,
+                          icon: item.icon,
+                          label: item.label,
+                          isActive: item.selected,
+                          onTap: () => _selectItemsLeaf(item.onTap),
+                        ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          _buildDivider(c),
+          const SizedBox(height: _kFooterGap),
+          Padding(
+            padding: EdgeInsets.fromLTRB(_railPadH, 0, _railPadH, _kPadBottom),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                for (final f in widget.footerItems)
+                  _buildItemRow(
+                    c,
+                    icon: f.icon,
+                    label: f.label,
+                    isActive: false,
+                    onTap: () => _selectItemsLeaf(f.onTap),
+                  ),
+                if (widget.showProfile) _buildProfile(c),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  // ── Generic expandable group (items mode) ────────────────────────────────
+
+  /// Navigating to a top-level (or footer) row collapses any open submenu group
+  /// — matching the connected Income dropdown, which closes when you move to
+  /// another screen. A group that holds the active screen re-opens on its own
+  /// (via [KasySidebarSubItem.selected]), so this only closes a manually-opened
+  /// one you're navigating away from.
+  void _selectItemsLeaf(VoidCallback? onTap) {
+    if (_expandedItemGroups.isNotEmpty) {
+      setState(() => _expandedItemGroups.clear());
+    }
+    onTap?.call();
+  }
+
+  /// An expandable group row in [items] mode — the same dropdown recipe as the
+  /// connected "Income" submenu, but driven by [KasySidebarItem.children].
+  /// Shown expanded when the user toggled it open OR when one of its children
+  /// is the active screen (so the open submenu always reflects the URL).
+  Widget _buildItemsGroup(
+    BuildContext context,
+    KasySidebarItem item,
+    _SidebarColors c,
+  ) {
+    final bool hasActiveChild = item.children.any((s) => s.selected);
+    final bool expanded =
+        _expandedItemGroups.contains(item.label) || hasActiveChild;
+    final Color iconColor = expanded ? c.textActive : c.textMuted;
+
+    // Collapsed icon rail: the children live in a hover popup (same as Income).
+    if (_collapsed) {
+      String activeLabel = '';
+      for (final s in item.children) {
+        if (s.selected) {
+          activeLabel = s.label;
+          break;
+        }
+      }
+      return Padding(
+        padding: const EdgeInsets.only(bottom: _kItemGap),
+        child: _ProHoverPopupIcon(
+          icon: item.icon,
+          iconBg: hasActiveChild ? c.activeBg : Colors.transparent,
+          iconColor: iconColor,
+          subItems: [for (final s in item.children) s.label],
+          activeSubItem: activeLabel,
+          colors: c,
+          anchoredLeft: widget.side == KasySidebarSide.left,
+          onSubItemTap: (label) {
+            for (final s in item.children) {
+              if (s.label == label) {
+                s.onTap();
+                break;
+              }
+            }
+          },
+        ),
+      );
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        KasyHover(
+          borderRadius: BorderRadius.circular(_kItemRadius),
+          hoverColor: c.activeBg,
+          pressColor: c.textActive,
+          focusable: true,
+          focusGapColor: c.bg,
+          onTap: () => setState(() {
+            if (!_expandedItemGroups.remove(item.label)) {
+              _expandedItemGroups.add(item.label);
+            }
+          }),
+          child: Container(
+            constraints: const BoxConstraints(minHeight: _kItemMinH),
+            padding: const EdgeInsets.symmetric(
+              horizontal: _kItemHPad,
+              vertical: _kItemVPad,
+            ),
+            decoration: BoxDecoration(
+              color: hasActiveChild ? c.activeBg : Colors.transparent,
+              borderRadius: BorderRadius.circular(_kItemRadius),
+            ),
+            child: Row(
+              children: [
+                Icon(item.icon, size: _kIconSize, color: iconColor),
+                const SizedBox(width: _kIconGap),
+                Expanded(
+                  child: Text(
+                    item.label,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: context.kasyTextTheme.rowTitle.copyWith(
+                      color: c.textActive,
+                    ),
+                  ),
+                ),
+                AnimatedRotation(
+                  turns: expanded ? 0.5 : 0,
+                  duration: const Duration(milliseconds: 200),
+                  child: Icon(
+                    KasyIcons.chevronDown,
+                    size: _kIconSize,
+                    color: iconColor,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+        AnimatedCrossFade(
+          duration: const Duration(milliseconds: 200),
+          crossFadeState:
+              expanded ? CrossFadeState.showFirst : CrossFadeState.showSecond,
+          firstChild: _buildItemsSubTree(item.children, c),
+          secondChild: const SizedBox.shrink(),
+        ),
+        const SizedBox(height: _kItemGap),
+      ],
+    );
+  }
+
+  /// The connector tree under an expanded [items]-mode group (mirrors the
+  /// connected Income tree, but generic over [KasySidebarSubItem]).
+  Widget _buildItemsSubTree(
+    List<KasySidebarSubItem> subItems,
+    _SidebarColors c,
+  ) {
+    final double lineH = _treeLineHeight(subItems.length);
+    return Padding(
+      padding: const EdgeInsets.only(left: _kSubIndent),
+      child: SizedBox(
+        width: 172,
+        child: Stack(
+          clipBehavior: Clip.none,
+          children: [
+            Positioned(
+              left: -_kTreeConnectorW,
+              top: 0,
+              child: Container(
+                width: 1.5,
+                height: lineH,
+                decoration: BoxDecoration(
+                  color: c.divider,
+                  borderRadius: BorderRadius.circular(2),
+                ),
+              ),
+            ),
+            Column(
+              children: [
+                for (int i = 0; i < subItems.length; i++)
+                  _buildItemsSubItem(subItems[i], i == subItems.length - 1, c),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildItemsSubItem(
+    KasySidebarSubItem sub,
+    bool isLast,
+    _SidebarColors c,
+  ) {
+    final bool isActive = sub.selected;
+    final Color textColor = isActive ? c.textActive : c.textMuted;
+
+    return Padding(
+      padding: EdgeInsets.only(bottom: isLast ? 0 : _kSubItemGap),
+      child: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          Positioned(
+            left: -_kTreeConnectorW,
+            top: _kSubItemH / 2 - 4,
+            child: Container(
+              width: _kTreeConnectorW,
+              height: 8,
+              decoration: BoxDecoration(
+                border: Border(
+                  left: BorderSide(color: c.divider, width: 1.5),
+                  bottom: BorderSide(color: c.divider, width: 1.5),
+                ),
+                borderRadius: const BorderRadius.only(
+                  bottomLeft: Radius.circular(8),
+                ),
+              ),
+            ),
+          ),
+          KasyHover(
+            borderRadius: BorderRadius.circular(_kItemRadius),
+            hoverColor: c.activeBg,
+            pressColor: c.textActive,
+            focusable: true,
+            focusGapColor: c.bg,
+            onTap: sub.onTap,
+            child: Container(
+              height: _kSubItemH,
+              padding: const EdgeInsets.symmetric(
+                horizontal: _kItemHPad,
+                vertical: 8,
+              ),
+              // Active sub-item is shown by its LABEL only (bold + active color),
+              // never a filled pill — exactly like the connected Income submenu
+              // on Home. The pill is reserved for top-level screens.
+              decoration: BoxDecoration(
+                color: Colors.transparent,
+                borderRadius: BorderRadius.circular(_kItemRadius),
+              ),
+              child: Align(
+                alignment: Alignment.centerLeft,
+                child: Text(
+                  sub.label,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  // Active sub-item: heavier weight (w700) for a clear "you are
+                  // here", no pill / accent — emphasis comes from the bold name.
+                  style: context.textTheme.labelMedium?.copyWith(
+                    fontWeight: isActive ? FontWeight.w700 : FontWeight.w500,
+                    color: textColor,
+                    letterSpacing: -0.24,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
   // ── Connected layout (real navigation) ──────────────────────────────────────
 
   Widget _buildConnectedContent(
@@ -613,10 +982,18 @@ 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 double bandHeight =
-        MediaQuery.sizeOf(context).width >= _kBreakpoint
-            ? _kTopBandHeight
-            : kasyAppBarBodyTopOverlap(context);
+    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 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;
     // 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.
@@ -627,7 +1004,7 @@ class _KasySidebarState extends State<KasySidebar> {
       c.isDark
           ? 'assets/images/logo_wordmark_dark.png'
           : 'assets/images/logo_wordmark_light.png',
-      height: 32,
+      height: widget.isDrawer ? 44 : 38,
       fit: BoxFit.contain,
     );
     // Left rail: wordmark then toggle (toggle hugs the content edge). The right
@@ -637,7 +1014,11 @@ class _KasySidebarState extends State<KasySidebar> {
       if (showToggle) ...[const Spacer(), _buildToggleButton(c)],
     ];
     return Padding(
-      padding: EdgeInsets.symmetric(horizontal: _railPadH),
+      padding: EdgeInsets.only(
+        left: _railPadH,
+        right: _railPadH,
+        top: logoTopInset,
+      ),
       child: SizedBox(
         height: bandHeight,
         child: _collapsed

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

@@ -519,6 +519,12 @@ class _PrimaryTabState extends State<_PrimaryTab> {
       child: Text(
         item.label,
         textAlign: TextAlign.center,
+        // Fill mode gives each tab an equal share of the width; a long label
+        // (often a longer localized string) ellipsizes within its slot instead
+        // of overflowing the row. Hug mode is intrinsic + scrollable, so the
+        // single line never clips there.
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
         // Use labelLarge as defined in the Kasy theme (14px/w600).
         // No fontWeight override — the theme token is the source of truth.
         style: context.textTheme.labelLarge?.copyWith(
@@ -559,7 +565,13 @@ class _PrimaryTabState extends State<_PrimaryTab> {
                     if (item.icon != null) iconWidget,
                     if (item.icon != null && hasLabel)
                       const SizedBox(width: 6),
-                    if (hasLabel) labelWidget,
+                    // Constrain the label only in fill mode (bounded width via
+                    // Expanded). Hug mode lays out in an unbounded scroll view,
+                    // where a Flexible child would have no bound to flex within.
+                    if (hasLabel)
+                      widget.expand
+                          ? Flexible(child: labelWidget)
+                          : labelWidget,
                   ],
                 ),
         ),
@@ -657,16 +669,25 @@ class _SecondaryTabState extends State<_SecondaryTab> {
                 if (hasLabel) const SizedBox(width: 6),
               ],
               if (hasLabel)
-                Opacity(
-                  opacity: disabled ? 0.4 : 1.0,
-                  child: Text(
-                    item.label,
-                    // Use labelLarge as defined in the Kasy theme (14px/w600).
-                    style: context.textTheme.labelLarge?.copyWith(
-                      color: fg,
+                // Fill mode constrains the label to its equal slot (ellipsis on
+                // overflow); hug mode stays intrinsic + scrollable. See the
+                // primary variant for the unbounded-width rationale.
+                Builder(builder: (context) {
+                  final Widget label = Opacity(
+                    opacity: disabled ? 0.4 : 1.0,
+                    child: Text(
+                      item.label,
+                      textAlign: TextAlign.center,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      // Use labelLarge as defined in the Kasy theme (14px/w600).
+                      style: context.textTheme.labelLarge?.copyWith(
+                        color: fg,
+                      ),
                     ),
-                  ),
-                ),
+                  );
+                  return widget.expand ? Flexible(child: label) : label;
+                }),
             ],
           ),
         ),

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

@@ -29,7 +29,16 @@ class KasyTextField extends StatefulWidget {
   /// 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;
+  static const double singleLineHeight = 45;
+
+  /// The single-line field renders its text at a fixed size and a *forced* line
+  /// box (see the [StrutStyle] on the inner field) so the box height is the same
+  /// on every renderer and breakpoint. Flutter web (CanvasKit) and native
+  /// otherwise disagree on a font's intrinsic line metrics by ~1px, and since
+  /// the box height is `text line + padding`, that variance would leak into the
+  /// visible height. Forcing the line to [fieldLineHeight] removes it entirely.
+  static const double fieldFontSize = 15;
+  static const double fieldLineHeight = 23;
 
   final TextEditingController? controller;
   final FocusNode? focusNode;
@@ -301,7 +310,10 @@ class _KasyTextFieldState extends State<KasyTextField> {
     // 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;
+    // The text line is forced to exactly [fieldLineHeight] (see the strut on the
+    // inner field), so this is deterministic on every renderer/platform:
+    // box = fieldLineHeight + 2×padding = singleLineHeight, always (45 → 11px).
+    const double singleLineTextHeight = KasyTextField.fieldLineHeight;
     final double singleLineVerticalPadding =
         ((KasyTextField.singleLineHeight - singleLineTextHeight) / 2)
             .clamp(0.0, 60.0);
@@ -487,11 +499,14 @@ class _KasyTextFieldState extends State<KasyTextField> {
 
     final Color fieldTextColor = dimDisabled(context.colors.onSurface);
     final TextStyle fieldTextStyle =
-        context.textTheme.bodyLarge?.copyWith(
-          color: fieldTextColor,
-          fontSize: 15,
-        ) ??
-        TextStyle(fontSize: 15, color: fieldTextColor);
+        (context.textTheme.bodyLarge ?? const TextStyle()).copyWith(
+      color: fieldTextColor,
+      fontSize: KasyTextField.fieldFontSize,
+      // Pin the line-height so the text box is a fixed [fieldLineHeight]px;
+      // paired with the forced strut on the field below, this makes the control
+      // height identical on every renderer (web CanvasKit vs native) and size.
+      height: KasyTextField.fieldLineHeight / KasyTextField.fieldFontSize,
+    );
     final InputDecoration decoration = InputDecoration(
       isDense: true,
       hintText: widget.hint,
@@ -583,6 +598,13 @@ class _KasyTextFieldState extends State<KasyTextField> {
       maxLength: widget.maxLength,
       buildCounter: hasCounter ? _hideInputCounter : null,
       style: fieldTextStyle,
+      // Force the line box to exactly [fieldLineHeight] regardless of the font's
+      // intrinsic metrics, so the field is the same height on every renderer
+      // (web CanvasKit and native disagree by ~1px otherwise) and breakpoint.
+      strutStyle: StrutStyle.fromTextStyle(
+        fieldTextStyle,
+        forceStrutHeight: true,
+      ),
       decoration: decoration,
       enableInteractiveSelection: widget.enableInteractiveSelection,
     );