kasy-cli 1.18.0 → 1.19.1

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

@@ -103,6 +103,11 @@ class _KasyTabsState extends State<KasyTabs> {
   // for measurements, ensuring correctness even when wrapped in a ScrollView.
   final GlobalKey _stackKey = GlobalKey();
 
+  // Controls horizontal scrolling in hug mode so we can snap to the
+  // beginning/end when the first/last tab is selected (clears container
+  // padding and the pill overflow that extends 4px past tab edges).
+  final ScrollController _scrollController = ScrollController();
+
   // Indicator geometry (left offset, width) resolved from measured keys.
   double _indicatorLeft = 0;
   double _indicatorWidth = 0;
@@ -120,6 +125,12 @@ class _KasyTabsState extends State<KasyTabs> {
     WidgetsBinding.instance.addPostFrameCallback((_) => _measure());
   }
 
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
   @override
   void didUpdateWidget(KasyTabs old) {
     super.didUpdateWidget(old);
@@ -180,14 +191,26 @@ class _KasyTabsState extends State<KasyTabs> {
   }
 
   /// Scrolls the [SingleChildScrollView] so the selected tab is fully visible.
+  ///
+  /// First/last tab snap to the scroll extremes so the container's outer
+  /// padding (and the pill that extends 4px beyond tab edges) is never clipped.
   void _ensureSelectedVisible(int index) {
+    const Duration duration = Duration(milliseconds: 250);
+    const Curve curve = Curves.easeInOut;
+    final int lastIndex = widget.items.length - 1;
+
+    if (_scrollController.hasClients &&
+        (index == 0 || index == lastIndex)) {
+      final double target = index == 0
+          ? _scrollController.position.minScrollExtent
+          : _scrollController.position.maxScrollExtent;
+      _scrollController.animateTo(target, duration: duration, curve: curve);
+      return;
+    }
+
     final BuildContext? ctx = _keys[index].currentContext;
     if (ctx == null) return;
-    Scrollable.ensureVisible(
-      ctx,
-      duration: const Duration(milliseconds: 250),
-      curve: Curves.easeInOut,
-    );
+    Scrollable.ensureVisible(ctx, duration: duration, curve: curve);
   }
 
   @override
@@ -205,84 +228,99 @@ class _KasyTabsState extends State<KasyTabs> {
     final KasyColors c = context.colors;
     final bool isDark = context.isDark;
     final bool isFill = widget.mode == KasyTabsMode.fill;
-
-    final Widget inner = DecoratedBox(
-      decoration: BoxDecoration(
-        color: c.avatarFallbackFill,
-        borderRadius: BorderRadius.circular(KasyRadius.full),
-      ),
-      child: Padding(
-        // 8px horizontal, 4px vertical — per Figma spec.
-        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-        child: Stack(
-          key: _stackKey,
-          // Allow pill to extend 4px beyond each tab edge (Figma: inset 0 -4px).
-          clipBehavior: Clip.none,
-          children: [
-            // Animated pill background.
-            if (_measured)
-              AnimatedPositioned(
-                duration: const Duration(milliseconds: 250),
-                curve: Curves.easeInOut,
-                // Extends 4px on each side beyond the measured tab.
-                left: _indicatorLeft - 4,
-                top: 0,
-                bottom: 0,
-                width: _indicatorWidth + 8,
-                child: DecoratedBox(
-                  decoration: BoxDecoration(
-                    color: c.surface,
-                    borderRadius: BorderRadius.circular(KasyRadius.full),
-                    boxShadow: [
-                      BoxShadow(
-                        color: Colors.black.withValues(
-                          alpha: isDark ? 0.14 : 0.06,
-                        ),
-                        blurRadius: 8,
-                        offset: const Offset(0, 2),
+    final BorderRadius pillRadius = BorderRadius.circular(KasyRadius.full);
+
+    final Widget tabsContent = Padding(
+      // 8px horizontal, 4px vertical — per Figma spec.
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      child: Stack(
+        key: _stackKey,
+        // Allow pill to extend 4px beyond each tab edge (Figma: inset 0 -4px).
+        clipBehavior: Clip.none,
+        children: [
+          // Animated pill background.
+          if (_measured)
+            AnimatedPositioned(
+              duration: const Duration(milliseconds: 250),
+              curve: Curves.easeInOut,
+              // Extends 4px on each side beyond the measured tab.
+              left: _indicatorLeft - 4,
+              top: 0,
+              bottom: 0,
+              width: _indicatorWidth + 8,
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  color: c.surface,
+                  borderRadius: BorderRadius.circular(KasyRadius.full),
+                  boxShadow: [
+                    BoxShadow(
+                      color: Colors.black.withValues(
+                        alpha: isDark ? 0.14 : 0.06,
                       ),
-                    ],
-                  ),
+                      blurRadius: 8,
+                      offset: const Offset(0, 2),
+                    ),
+                  ],
                 ),
               ),
-            // Tab labels (on top of the pill).
-            Row(
-              mainAxisSize: isFill ? MainAxisSize.max : MainAxisSize.min,
-              children: [
-                for (int i = 0; i < widget.items.length; i++) ...[
-                  // 2px gap between adjacent tabs — per Figma spec.
-                  if (i > 0) const SizedBox(width: 2),
-                  _PrimaryTab(
-                    key: _keys[i],
-                    item: widget.items[i],
-                    selected: i == widget.selectedIndex,
-                    expand: isFill,
-                    onTap: widget.items[i].enabled
-                        ? () => widget.onTabSelected(i)
-                        : null,
-                  ),
-                ],
-              ],
             ),
-          ],
-        ),
+          // Tab labels (on top of the pill).
+          Row(
+            mainAxisSize: isFill ? MainAxisSize.max : MainAxisSize.min,
+            children: [
+              for (int i = 0; i < widget.items.length; i++) ...[
+                // 2px gap between adjacent tabs — per Figma spec.
+                if (i > 0) const SizedBox(width: 2),
+                _PrimaryTab(
+                  key: _keys[i],
+                  item: widget.items[i],
+                  selected: i == widget.selectedIndex,
+                  expand: isFill,
+                  onTap: widget.items[i].enabled
+                      ? () => widget.onTabSelected(i)
+                      : null,
+                ),
+              ],
+            ],
+          ),
+        ],
       ),
     );
 
-    // In hug mode, the component must size to its content — NOT stretch to
-    // parent width. SingleChildScrollView gives unconstrained horizontal
-    // space to its child, so the DecoratedBox → Stack → Row(min) chain
-    // naturally measures at intrinsic width. It also handles overflow
-    // gracefully (scrollable) when many long tab labels are used.
     if (!isFill) {
-      return SingleChildScrollView(
-        scrollDirection: Axis.horizontal,
-        physics: const ClampingScrollPhysics(),
-        child: inner,
+      // Hug mode + horizontal overflow: keep the rounded container fixed at
+      // the parent's width and scroll only the tab strip INSIDE it. Putting
+      // the DecoratedBox inside the SingleChildScrollView (the previous
+      // structure) made the entire pill background scroll along with the
+      // tabs, so once the user scrolled the rounded corners were pushed off-
+      // screen and the visible portion looked like a flat-sided rectangle.
+      // Now the corners stay visible at the viewport edges no matter where
+      // the strip is scrolled, and ClipRRect masks any tab content that
+      // would otherwise leak past the rounded edges.
+      return DecoratedBox(
+        decoration: BoxDecoration(
+          color: c.avatarFallbackFill,
+          borderRadius: pillRadius,
+        ),
+        child: ClipRRect(
+          borderRadius: pillRadius,
+          child: SingleChildScrollView(
+            controller: _scrollController,
+            scrollDirection: Axis.horizontal,
+            physics: const ClampingScrollPhysics(),
+            child: tabsContent,
+          ),
+        ),
       );
     }
 
-    return inner;
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: c.avatarFallbackFill,
+        borderRadius: pillRadius,
+      ),
+      child: tabsContent,
+    );
   }
 
   // ── Secondary (underline indicator) ───────────────────────────────────────
@@ -344,6 +382,7 @@ class _KasyTabsState extends State<KasyTabs> {
     // Same as primary: hug mode sizes to content via ScrollView.
     if (!isFill) {
       return SingleChildScrollView(
+        controller: _scrollController,
         scrollDirection: Axis.horizontal,
         physics: const ClampingScrollPhysics(),
         child: inner,

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

@@ -135,9 +135,14 @@ class _KasyTextAreaState extends State<KasyTextArea> {
     const double disabledLabelOpacity = 0.46;
     const double disabledTextOpacity = 0.56;
     const double disabledDescriptionOpacity = 0.34;
-    final BoxShadow fieldShadow = KasyShadows.inputField(
-      context,
-      enabled: !isDisabled,
+    // Contained shadow — no Y offset, negative spread so the shadow hugs the
+    // border instead of leaking a halo below the field. Matches KasyTextField.
+    final BoxShadow fieldShadow = BoxShadow(
+      color: const Color(0xFF000000).withValues(
+        alpha: context.isDark ? 0.28 : 0.11,
+      ),
+      blurRadius: 3,
+      spreadRadius: -1,
     );
 
     const BorderRadius fieldRadius = BorderRadius.all(
@@ -345,7 +350,7 @@ class _KasyTextAreaState extends State<KasyTextArea> {
         DecoratedBox(
           decoration: BoxDecoration(
             borderRadius: fieldRadius,
-            boxShadow: kIsWeb ? null : [fieldShadow],
+            boxShadow: [fieldShadow],
           ),
           child: innerField,
         ),

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

@@ -56,6 +56,30 @@ class KasyTextField extends StatefulWidget {
   /// Optional widget rendered to the right of [label] (e.g. a "Forgot password?" link).
   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.
+  final EdgeInsetsGeometry? contentPadding;
+
+  /// Override for the field's drop shadow. When null, the design-system
+  /// default is used (single soft shadow on primary mobile variant, nothing
+  /// on secondary/embedded/web). Pass an empty list to render no shadow.
+  final List<BoxShadow>? boxShadow;
+
+  /// When true (default), the field shows the design-system blue focus border
+  /// while focused. Set to false to keep the resting border in every state —
+  /// useful for read-only triggers or compact contexts where the focus
+  /// affordance would feel noisy.
+  final bool focusBorder;
+
+  /// 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
+  /// (like [KasyDatePicker]) that should look like an input but feel like a
+  /// button.
+  final bool enableInteractiveSelection;
+
   const KasyTextField({
     super.key,
     this.controller,
@@ -89,6 +113,10 @@ class KasyTextField extends StatefulWidget {
     this.prefix,
     this.suffix,
     this.labelTrailing,
+    this.contentPadding,
+    this.boxShadow,
+    this.focusBorder = true,
+    this.enableInteractiveSelection = true,
   });
 
   @override
@@ -210,12 +238,9 @@ class _KasyTextFieldState extends State<KasyTextField> {
         widget.variant == KasyTextFieldVariant.secondary;
     final bool isEmbeddedVariant =
         widget.variant == KasyTextFieldVariant.embedded;
-    final bool useWebSingleLinePadding =
-        !isSecondaryVariant &&
-        !isEmbeddedVariant &&
-        kIsWeb &&
-        widget.minLines == null &&
-        widget.maxLines == 1;
+    // (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.)
     const double disabledTextOpacity = 0.56;
     const double disabledLabelOpacity = 0.46;
     const double disabledDescriptionOpacity = 0.34;
@@ -277,11 +302,17 @@ class _KasyTextFieldState extends State<KasyTextField> {
                 ),
         );
     final BorderRadius fieldRadius = BorderRadius.circular(KasyRadius.md);
+    // Contained shadow (no Y offset, negative spread). Renders on every
+    // platform — removed the previous `!kIsWeb` guard so web matches mobile
+    // and the KasyDatePicker trigger.
     final bool shouldShowShadow =
-        !isSecondaryVariant && !isEmbeddedVariant && !kIsWeb;
-    final BoxShadow resolvedShadow = KasyShadows.inputField(
-      context,
-      enabled: !isDisabled,
+        !isSecondaryVariant && !isEmbeddedVariant;
+    final BoxShadow resolvedShadow = BoxShadow(
+      color: const Color(0xFF000000).withValues(
+        alpha: context.isDark ? 0.28 : 0.11,
+      ),
+      blurRadius: 3,
+      spreadRadius: -1,
     );
     final TargetPlatform platform = Theme.of(context).platform;
     final bool isApplePlatform =
@@ -317,15 +348,21 @@ class _KasyTextFieldState extends State<KasyTextField> {
               width: restingBorderWidth,
             ),
           );
-    final InputBorder resolvedFocusedBorder = isEmbeddedVariant
-        ? embeddedBorder
-        : OutlineInputBorder(
-            borderRadius: fieldRadius,
-            borderSide: BorderSide(
-              color: resolvedFocusedBorderColor,
-              width: focusedBorderWidth,
-            ),
-          );
+    // When focusBorder is disabled, the focused state collapses to the
+    // resting border so the field never grows that bright outline. Error
+    // states still take priority via resolvedEnabledBorder picking the error
+    // color, so invalid fields keep the red highlight.
+    final InputBorder resolvedFocusedBorder = !widget.focusBorder
+        ? resolvedEnabledBorder
+        : isEmbeddedVariant
+            ? embeddedBorder
+            : OutlineInputBorder(
+                borderRadius: fieldRadius,
+                borderSide: BorderSide(
+                  color: resolvedFocusedBorderColor,
+                  width: focusedBorderWidth,
+                ),
+              );
     final Color surfaceColor = isEmbeddedVariant
         ? Colors.transparent
         : isSecondaryVariant
@@ -334,13 +371,20 @@ class _KasyTextFieldState extends State<KasyTextField> {
     final Color fieldFillColor = isDisabled
         ? surfaceColor.withValues(alpha: context.isDark ? 0.9 : 0.94)
         : surfaceColor;
+    // Affix icon tint matches the kit's helper-icon tone (0.62) when the
+    // field is enabled, and fades down with the same disabled curve used by
+    // the rest of the field so prefix/suffix don't stay "alive" while
+    // everything else dims.
+    final double affixAlpha = isDisabled
+        ? 0.62 * disabledTextOpacity
+        : 0.62;
     final Widget? resolvedPrefix = widget.prefix == null
         ? null
         : Center(
             child: IconTheme.merge(
               data: IconThemeData(
                 size: KasyTextField.iconGlyphSize,
-                color: context.colors.onSurface.withValues(alpha: 0.62),
+                color: context.colors.onSurface.withValues(alpha: affixAlpha),
               ),
               child: widget.prefix!,
             ),
@@ -351,7 +395,7 @@ class _KasyTextFieldState extends State<KasyTextField> {
             child: IconTheme.merge(
               data: IconThemeData(
                 size: KasyTextField.iconGlyphSize,
-                color: context.colors.onSurface.withValues(alpha: 0.62),
+                color: context.colors.onSurface.withValues(alpha: affixAlpha),
               ),
               child: widget.suffix!,
             ),
@@ -410,12 +454,11 @@ class _KasyTextFieldState extends State<KasyTextField> {
               width: KasyTextField.iconSlotExtent,
               height: KasyTextField.iconSlotExtent,
             ),
-      contentPadding: EdgeInsets.symmetric(
-        horizontal: isEmbeddedVariant ? 0 : KasySpacing.md,
-        vertical: useWebSingleLinePadding
-            ? KasyTextField.webSingleLineVerticalPadding
-            : KasySpacing.smd,
-      ),
+      contentPadding: widget.contentPadding ??
+          EdgeInsets.symmetric(
+            horizontal: isEmbeddedVariant ? 0 : KasySpacing.md,
+            vertical: 13,
+          ),
       fillColor: fieldFillColor,
       filled: !isEmbeddedVariant,
       // On web: keep fill unchanged on hover (hoverColor replaces fillColor — don't let
@@ -434,16 +477,29 @@ class _KasyTextFieldState extends State<KasyTextField> {
         borderRadius: fieldRadius,
         borderSide: BorderSide(color: context.colors.error, width: 1.3),
       ),
-      focusedErrorBorder: OutlineInputBorder(
-        borderRadius: fieldRadius,
-        borderSide: BorderSide(
-          color: context.colors.error,
-          width: focusedBorderWidth,
-        ),
-      ),
+      // Mirrors the focusBorder opt-out: when disabled, the focused-error
+      // state reuses the resting error border (no thicker outline on focus).
+      focusedErrorBorder: !widget.focusBorder
+          ? OutlineInputBorder(
+              borderRadius: fieldRadius,
+              borderSide: BorderSide(
+                color: context.colors.error,
+                width: 1.3,
+              ),
+            )
+          : OutlineInputBorder(
+              borderRadius: fieldRadius,
+              borderSide: BorderSide(
+                color: context.colors.error,
+                width: focusedBorderWidth,
+              ),
+            ),
       hintStyle: hintBaseStyle.copyWith(
+        // Match the disabled description fade so the placeholder dims along
+        // with the rest of the field (the previous 0.42 read as "kind of
+        // greyed out" rather than disabled).
         color: (hintBaseStyle.color ?? context.colors.muted).withValues(
-          alpha: isDisabled ? 0.42 : 1,
+          alpha: isDisabled ? disabledDescriptionOpacity : 1,
         ),
       ),
     );
@@ -471,11 +527,15 @@ class _KasyTextFieldState extends State<KasyTextField> {
       buildCounter: hasCounter ? _hideInputCounter : null,
       style: fieldTextStyle,
       decoration: decoration,
+      enableInteractiveSelection: widget.enableInteractiveSelection,
     );
+    // TESTE: sombra desabilitada para investigar diferença visual com DatePicker
+    final List<BoxShadow>? effectiveBoxShadow = widget.boxShadow ??
+        (shouldShowShadow ? <BoxShadow>[resolvedShadow] : null);
     final Widget decoratedField = DecoratedBox(
       decoration: BoxDecoration(
         borderRadius: fieldRadius,
-        boxShadow: shouldShowShadow ? <BoxShadow>[resolvedShadow] : null,
+        boxShadow: effectiveBoxShadow,
       ),
       child: Semantics(
         textField: true,

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

@@ -1,4 +1,3 @@
-import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
@@ -422,7 +421,7 @@ class _OTPCell extends StatelessWidget {
         ? _neutralFlatOtpFill(context)
         : (cellFillColor ?? context.colors.surface);
     final bool suppressShadow =
-        enabled && (neutralFlatCells || suppressCellShadow || kIsWeb);
+        enabled && (neutralFlatCells || suppressCellShadow);
     final List<BoxShadow> boxShadow = suppressShadow
         ? <BoxShadow>[]
         : <BoxShadow>[adjustedShadow];

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

@@ -1,4 +1,5 @@
 import 'package:bart/bart.dart' as bart;
+import 'package:bart/bart/bart_bottombar_actions.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -8,22 +9,92 @@ import 'package:kasy_kit/core/sidebar/kasy_sidebar.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 
-/// This bottom menu is powered by Bart packages
-/// https://pub.dev/packages/bart
-/// It allows you to create a bottom menu with a router and handle
-/// all tabs navigation separately.
-/// See the bottom_router.dart file to add tabs or subpages to show on tabs
-class BottomMenu extends StatelessWidget {
+/// Bottom navigation host powered by Bart (https://pub.dev/packages/bart).
+///
+/// Bart stores its bottom-bar visibility inside a [ValueNotifier] created in
+/// the [bart.BartScaffold] constructor. Because [ResponsiveLayout] recreates
+/// one of three [bart.BartScaffold]s on every rebuild (breakpoint change,
+/// theme toggle, device-preview resize), that notifier resets to its initial
+/// value and a previously-hidden bar can come back wrong — or, when returning
+/// from a native overlay (FaceID, photo picker, permission dialog), Bart's
+/// internal state ends up out of sync with the visible route.
+///
+/// This widget owns visibility end-to-end so feature pages never need to
+/// touch it. The rules are simple:
+///   * Bottom-bar tab (1 path segment) → bar visible.
+///   * Inner route (multi-segment, or [bart.BartMenuRoute.showBottomBar] =
+///     false) → bar hidden.
+///
+/// Sync points: [onRouteChanged], post-frame after every [build] (catches
+/// scaffold rebuilds), and [didChangeAppLifecycleState] on resume.
+class BottomMenu extends StatefulWidget {
   final String? initialRoute;
 
   const BottomMenu({super.key, this.initialRoute});
 
+  @override
+  State<BottomMenu> createState() => _BottomMenuState();
+}
+
+class _BottomMenuState extends State<BottomMenu>
+    with WidgetsBindingObserver, BartNotifier {
+  String? _currentRoutePath;
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addObserver(this);
+    _currentRoutePath = _resolveInitialRoute(widget.initialRoute);
+  }
+
+  @override
+  void dispose() {
+    WidgetsBinding.instance.removeObserver(this);
+    super.dispose();
+  }
+
+  @override
+  void didChangeAppLifecycleState(AppLifecycleState state) {
+    super.didChangeAppLifecycleState(state);
+    if (state == AppLifecycleState.resumed) {
+      _scheduleSync();
+    }
+  }
+
+  void _onRouteChanged(bart.BartMenuRoute route) {
+    _currentRoutePath = route.path;
+    _scheduleSync();
+  }
+
+  void _scheduleSync() {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted) return;
+      _applyVisibility();
+    });
+  }
+
+  void _applyVisibility() {
+    if (_shouldShowBottomBar(_currentRoutePath)) {
+      showBottomBar(context);
+    } else {
+      hideBottomBar(context);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
-    final String? resolvedInitialRoute = _resolveInitialRoute(initialRoute);
-    final bool showBottomBarOnStart = _showBottomBarOnStart(
-      resolvedInitialRoute,
+    // Re-assert visibility after every rebuild: the Bart scaffold underneath
+    // may have been freshly instantiated (see class doc).
+    _scheduleSync();
+
+    final String? resolvedInitialRoute = _resolveInitialRoute(
+      widget.initialRoute,
+    );
+    final bool showBottomBarOnStart = _shouldShowBottomBar(resolvedInitialRoute);
+    final scaffoldOptions = bart.ScaffoldOptions(
+      backgroundColor: context.colors.background,
     );
+
     return AnnotatedRegion<SystemUiOverlayStyle>(
       value: switch (Theme.brightnessOf(context)) {
         Brightness.dark => SystemUiOverlayStyle.light,
@@ -35,13 +106,8 @@ class BottomMenu extends StatelessWidget {
           bottomBar: kasyPaddedSurfaceBottomBar(),
           initialRoute: resolvedInitialRoute,
           showBottomBarOnStart: showBottomBarOnStart,
-          scaffoldOptions: bart.ScaffoldOptions(
-            backgroundColor: context.colors.background,
-          ),
-          onRouteChanged: (route) {
-            // If you want to log tab events to analytics
-            // MixpanelAnalyticsApi.instance().logEvent('home/$route', {});
-          },
+          scaffoldOptions: scaffoldOptions,
+          onRouteChanged: _onRouteChanged,
         ),
         // medium (768–1024 px): icon-only collapsed rail
         medium: bart.BartScaffold(
@@ -49,16 +115,11 @@ class BottomMenu extends StatelessWidget {
           bottomBar: kasyPaddedSurfaceBottomBar(),
           initialRoute: resolvedInitialRoute,
           showBottomBarOnStart: showBottomBarOnStart,
-          scaffoldOptions: bart.ScaffoldOptions(
-            backgroundColor: context.colors.background,
-          ),
+          scaffoldOptions: scaffoldOptions,
           sideBarOptions: bart.CustomSideBarOptions(
             sideBarBuilder: kasySidebarCollapsedBuilder,
           ),
-          onRouteChanged: (route) {
-            // If you want to log tab events to analytics
-            // MixpanelAnalyticsApi.instance().logEvent('home/$route', {});
-          },
+          onRouteChanged: _onRouteChanged,
         ),
         // large (1024 px+): full expanded sidebar
         large: bart.BartScaffold(
@@ -66,16 +127,11 @@ class BottomMenu extends StatelessWidget {
           bottomBar: kasyPaddedSurfaceBottomBar(),
           initialRoute: resolvedInitialRoute,
           showBottomBarOnStart: showBottomBarOnStart,
-          scaffoldOptions: bart.ScaffoldOptions(
-            backgroundColor: context.colors.background,
-          ),
+          scaffoldOptions: scaffoldOptions,
           sideBarOptions: bart.CustomSideBarOptions(
             sideBarBuilder: kasySidebarBuilder,
           ),
-          onRouteChanged: (route) {
-            // If you want to log tab events to analytics
-            // MixpanelAnalyticsApi.instance().logEvent('home/$route', {});
-          },
+          onRouteChanged: _onRouteChanged,
         ),
       ),
     );
@@ -114,14 +170,11 @@ class BottomMenu extends StatelessWidget {
     return path;
   }
 
-  bool _showBottomBarOnStart(String? route) {
+  bool _shouldShowBottomBar(String? route) {
     if (route == null) {
       return true;
     }
     final segments = Uri.parse(route).pathSegments;
-    if (segments.length < 2) {
-      return true;
-    }
-    return false;
+    return segments.length < 2;
   }
 }