kasy-cli 1.21.9 → 1.23.0

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

@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+/// Accent tone for [KasyStatusTag], resolved against the current theme.
+enum KasyStatusTagTone { success, neutral, primary, warning, danger }
+
+/// Compact, content-sized status pill: a soft-tinted rounded badge with an
+/// optional leading dot and a colored label. Built for table cells, list rows
+/// and detail headers where you want a quiet status indicator (active/inactive,
+/// paid/free, visible/hidden, …) — not a loud solid badge.
+///
+/// It sizes to its content. Inside a tight parent (e.g. a table column wrapped
+/// in [Expanded]) wrap it in an [Align] so it doesn't stretch:
+///
+/// ```dart
+/// Expanded(
+///   child: Align(
+///     alignment: Alignment.centerLeft,
+///     child: KasyStatusTag(label: 'Active', tone: KasyStatusTagTone.success),
+///   ),
+/// )
+/// ```
+class KasyStatusTag extends StatelessWidget {
+  /// The text shown in the pill.
+  final String label;
+
+  /// Semantic tone (maps to theme colors). Ignored when [color] is set.
+  final KasyStatusTagTone tone;
+
+  /// Overrides the tone's accent color (used for both the dot and the label).
+  final Color? color;
+
+  /// Whether to show the small leading status dot.
+  final bool showDot;
+
+  const KasyStatusTag({
+    super.key,
+    required this.label,
+    this.tone = KasyStatusTagTone.neutral,
+    this.color,
+    this.showDot = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final Color accent = color ?? _toneColor(context, tone);
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
+      decoration: BoxDecoration(
+        color: accent.withValues(alpha: context.isDark ? 0.16 : 0.1),
+        borderRadius: BorderRadius.circular(KasyRadius.full),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (showDot) ...[
+            Container(
+              width: 6,
+              height: 6,
+              decoration: BoxDecoration(color: accent, shape: BoxShape.circle),
+            ),
+            const SizedBox(width: 6),
+          ],
+          Flexible(
+            child: Text(
+              label,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: context.textTheme.labelSmall?.copyWith(
+                color: accent,
+                fontWeight: FontWeight.w600,
+                fontSize: 11.5,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Color _toneColor(BuildContext context, KasyStatusTagTone tone) {
+    final c = context.colors;
+    return switch (tone) {
+      KasyStatusTagTone.success => c.success,
+      KasyStatusTagTone.neutral => c.muted,
+      KasyStatusTagTone.primary => c.primary,
+      KasyStatusTagTone.warning => c.warning,
+      KasyStatusTagTone.danger => c.error,
+    };
+  }
+}

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

@@ -152,9 +152,7 @@ class _KasyTextAreaState extends State<KasyTextArea> {
     final bool isApplePlatform =
         platform == TargetPlatform.iOS || platform == TargetPlatform.macOS;
     final double focusedBorderWidth = isApplePlatform ? 1.7 : 1.4;
-    final Color focusedBorderColor = isApplePlatform
-        ? const Color(0xFF0A84FF)
-        : context.colors.primary;
+    final Color focusedBorderColor = context.colors.primary;
     final Color resolvedFocusedBorderColor = hasInvalidState
         ? context.colors.error
         : focusedBorderColor;

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

@@ -67,8 +67,9 @@ class KasyTextField extends StatefulWidget {
   /// 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 —
+  /// When true (default), the field shows the theme primary-colored 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;
@@ -331,9 +332,7 @@ class _KasyTextFieldState extends State<KasyTextField> {
     final bool isApplePlatform =
         platform == TargetPlatform.iOS || platform == TargetPlatform.macOS;
     final double focusedBorderWidth = isApplePlatform ? 1.7 : 1.4;
-    final Color focusedBorderColor = isApplePlatform
-        ? const Color(0xFF0A84FF)
-        : context.colors.primary;
+    final Color focusedBorderColor = context.colors.primary;
     final Color resolvedFocusedBorderColor = hasInvalidState
         ? context.colors.error
         : focusedBorderColor;
@@ -538,7 +537,7 @@ class _KasyTextFieldState extends State<KasyTextField> {
       decoration: decoration,
       enableInteractiveSelection: widget.enableInteractiveSelection,
     );
-    // TESTE: sombra desabilitada para investigar diferença visual com DatePicker
+    // TEST: shadow disabled to investigate the visual difference with DatePicker
     final List<BoxShadow>? effectiveBoxShadow = widget.boxShadow ??
         (shouldShowShadow ? <BoxShadow>[resolvedShadow] : null);
     final Widget decoratedField = DecoratedBox(

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

@@ -142,9 +142,7 @@ class _KasyTextFieldOTPState extends State<KasyTextFieldOTP> {
     final bool isApple =
         Theme.of(context).platform == TargetPlatform.iOS ||
         Theme.of(context).platform == TargetPlatform.macOS;
-    final Color focusColor = isApple
-        ? const Color(0xFF0A84FF)
-        : context.colors.primary;
+    final Color focusColor = context.colors.primary;
     final double focusBorderWidth = isApple ? 1.7 : 1.4;
     final Color errorColor = context.colors.error;
 

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

@@ -501,8 +501,8 @@ class _KasyToastLayerState extends State<_KasyToastLayer>
         final int fromFront = visible.indexOf(item);
         final bool isFront = fromFront == 0;
 
-        // Para top: usa altura medida para que o peek seja sempre _peekOffset px.
-        // Para bottom: offset negativo fixo já garante peek consistente.
+        // For top: use the measured height so the peek is always _peekOffset px.
+        // For bottom: a fixed negative offset already guarantees a consistent peek.
         double yOffset;
         if (isTop && frontHeight != null) {
           final double cardH = _heights[item] ?? frontHeight;

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

@@ -0,0 +1,209 @@
+/// Application top header for the **web desktop breakpoint** (viewport ≥ 1024px).
+///
+/// This is the *application* chrome (global search, quick-create, notifications,
+/// profile) — distinct from [KasyAppBar], which is *page* chrome (title / back /
+/// theme) used on phone and tablet. On desktop the sidebar handles navigation,
+/// so this header carries global actions instead of a title or back button.
+///
+/// Composed entirely from existing kit widgets: a [KasyTextField] search box
+/// (fixed 220px), a ghost [KasyButton.iconOnly] for notifications, a neutral
+/// pill [KasyButton] for create, and a gradient [KasyAvatar].
+///
+/// Barrel: [components.dart].
+library;
+
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/components/kasy_avatar.dart';
+import 'package:kasy_kit/components/kasy_avatar_presets.dart';
+import 'package:kasy_kit/components/kasy_button.dart';
+import 'package:kasy_kit/components/kasy_text_field.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+/// Total header height (matches the design: 36px content band + 16px top/bottom).
+const double kasyWebHeaderHeight = 68;
+
+/// Fixed width of the leading search field (matches the design).
+const double kasyWebHeaderSearchWidth = 220;
+
+/// Desktop application header. Place it at the top of the content area (to the
+/// right of the sidebar) on viewports ≥ 1024px.
+class KasyWebHeader extends StatelessWidget {
+  /// Controller for the search field. Optional — omit for a display-only header.
+  final TextEditingController? searchController;
+
+  /// Placeholder shown in the search field.
+  final String searchHint;
+
+  /// Called as the user types in the search field.
+  final ValueChanged<String>? onSearchChanged;
+
+  /// Called when the search field is submitted (Enter).
+  final ValueChanged<String>? onSearchSubmitted;
+
+  /// Notifications (bell) action. When null the bell is disabled.
+  final VoidCallback? onNotifications;
+
+  /// Shows the unread dot on the notifications bell.
+  final bool showNotificationBadge;
+
+  /// Primary quick-create action. When null the button is disabled.
+  final VoidCallback? onCreate;
+
+  /// Label for the create button.
+  final String createLabel;
+
+  /// Gradient used for the profile avatar fallback (when [avatar] is null).
+  final KasyAvatarGradientData avatarGradient;
+
+  /// Custom avatar widget — pass the signed-in user's avatar (e.g.
+  /// `KasyUserAvatar`) to show their real photo. When null (and [showAvatar] is
+  /// true), a gradient-fill avatar is shown instead.
+  final Widget? avatar;
+
+  /// Whether the profile avatar is shown at all. Set false for a header that
+  /// carries no account chip (e.g. when the sidebar already owns the profile).
+  final bool showAvatar;
+
+  /// Profile avatar tap (open menu / profile). When null the avatar is inert.
+  final VoidCallback? onAvatarTap;
+
+  /// Theme toggle. When set, a sun/moon ghost button is shown before the bell
+  /// (on desktop the web header replaces the app bar's theme toggle).
+  final VoidCallback? onToggleTheme;
+
+  const KasyWebHeader({
+    super.key,
+    this.searchController,
+    this.searchHint = 'Search...',
+    this.onSearchChanged,
+    this.onSearchSubmitted,
+    this.onNotifications,
+    this.showNotificationBadge = false,
+    this.onCreate,
+    this.createLabel = 'Create',
+    this.avatarGradient = KasyAvatarGradients.orange,
+    this.avatar,
+    this.showAvatar = true,
+    this.onAvatarTap,
+    this.onToggleTheme,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        // Matches KasySidebar exactly: surface fill + the same `border` hairline
+        // used by the sidebar's vertical edge line, at the same 0.5px width — so
+        // the header's bottom border and the sidebar's top divider read as one
+        // continuous line across the whole chrome in light and dark.
+        color: c.surface,
+        border: Border(
+          bottom: BorderSide(color: c.border, width: 0.5),
+        ),
+      ),
+      // minHeight (not a fixed height) keeps the band at 68 while letting the
+      // search field size naturally, so it never overflows the toolbar row.
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(minHeight: kasyWebHeaderHeight),
+        child: Padding(
+          // Design gutters: 20px horizontal; vertical breathes around the field.
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
+          child: Row(
+            children: [
+              SizedBox(
+                width: kasyWebHeaderSearchWidth,
+                child: _buildSearch(context),
+              ),
+              const Spacer(),
+              if (onToggleTheme != null) ...[
+                _buildThemeToggle(context),
+                const SizedBox(width: KasySpacing.md),
+              ],
+              _buildNotifications(context),
+              const SizedBox(width: KasySpacing.md),
+              KasyButton(
+                label: createLabel,
+                variant: KasyButtonVariant.neutral,
+                size: KasyButtonSize.small,
+                onPressed: onCreate,
+              ),
+              if (showAvatar) ...[
+                const SizedBox(width: KasySpacing.md),
+                avatar ??
+                    KasyAvatar.gradientFill(
+                      size: KasyAvatarSize.small,
+                      diameter: 36,
+                      gradient: avatarGradient,
+                      showShadow: false,
+                      onTap: onAvatarTap,
+                    ),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildSearch(BuildContext context) {
+    return KasyTextField(
+      controller: searchController,
+      hint: searchHint,
+      onChanged: onSearchChanged,
+      onSubmitted: onSearchSubmitted,
+      prefix: Icon(
+        KasyIcons.search,
+        size: 17,
+        color: context.colors.muted,
+      ),
+      contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+    );
+  }
+
+  Widget _buildThemeToggle(BuildContext context) {
+    final bool isDark = Theme.of(context).brightness == Brightness.dark;
+    return KasyButton.iconOnly(
+      icon: isDark ? KasyIcons.lightMode : KasyIcons.darkMode,
+      variant: KasyButtonVariant.ghost,
+      size: KasyButtonSize.small,
+      iconOnlyLayoutExtent: 36,
+      iconGlyphSize: 18,
+      onPressed: onToggleTheme,
+      semanticLabel: isDark ? 'Light mode' : 'Dark mode',
+    );
+  }
+
+  Widget _buildNotifications(BuildContext context) {
+    final KasyColors c = context.colors;
+    final Widget bell = KasyButton.iconOnly(
+      icon: KasyIcons.notification,
+      variant: KasyButtonVariant.ghost,
+      size: KasyButtonSize.small,
+      iconOnlyLayoutExtent: 36,
+      iconGlyphSize: 18,
+      onPressed: onNotifications,
+      semanticLabel: 'Notifications',
+    );
+    if (!showNotificationBadge) return bell;
+    return Stack(
+      clipBehavior: Clip.none,
+      children: [
+        bell,
+        Positioned(
+          top: 8,
+          right: 8,
+          child: Container(
+            width: 8,
+            height: 8,
+            decoration: BoxDecoration(
+              color: c.error,
+              shape: BoxShape.circle,
+              border: Border.all(color: c.background, width: 1.5),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

package/templates/firebase/lib/core/ads/ads_provider.dart

@@ -1,7 +1,7 @@
 // ignore_for_file: unused_element, unused_element_parameter
 
 import 'package:kasy_kit/core/ads/ads_state.dart';
-import 'package:kasy_kit/environnements.dart';
+import 'package:kasy_kit/environments.dart';
 import 'package:logger/logger.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:universal_io/io.dart';

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

@@ -2,11 +2,17 @@ import 'package:bart/bart.dart' as bart;
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:kasy_kit/components/kasy_sidebar_pro.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/components/kasy_sidebar.dart';
 import 'package:kasy_kit/core/bottom_menu/bottom_router.dart';
 import 'package:kasy_kit/core/bottom_menu/kasy_bottom_bar_factory.dart';
+import 'package:kasy_kit/core/data/models/user.dart';
+import 'package:kasy_kit/core/states/logout_action.dart';
+import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/responsive_layout.dart';
+import 'package:kasy_kit/features/settings/ui/widgets/kasy_user_avatar.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
 
 /// Bottom navigation host powered by Bart (https://pub.dev/packages/bart).
 ///
@@ -27,8 +33,64 @@ class BottomMenu extends StatelessWidget {
     );
     final scaffoldOptions = bart.ScaffoldOptions(
       backgroundColor: context.colors.background,
+      // Let tab content scroll behind the floating bar; the page-level scrolls
+      // reserve the bar's height via the bottom inset Scaffold injects here.
+      extendBody: true,
     );
 
+    // Desktop/tablet sidebar, marked as the FIRST stop in the keyboard Tab
+    // order. Together with the header/content orders set in WebContentWrapper
+    // and the OrderedTraversalPolicy below, every screen tabs the same way:
+    // sidebar → header → content. (Touch/mobile has no Tab, so the `small`
+    // layout below is left untouched.)
+    bart.CustomSideBarOptions connectedSidebar() => bart.CustomSideBarOptions(
+          sideBarBuilder: (routes, onTap, current) => FocusTraversalOrder(
+            order: const NumericFocusOrder(1),
+            child: _FocusableSidebar(
+              currentItem: current,
+              child: Consumer(
+                builder: (context, ref, _) {
+                  final User user =
+                      ref.watch(userStateNotifierProvider).user;
+                  final (String name, String email) = switch (user) {
+                    final AuthenticatedUserData u => (
+                      (u.name?.isNotEmpty ?? false)
+                          ? u.name!
+                          : u.email.split('@').first,
+                      u.email,
+                    ),
+                    _ => (context.t.settings.my_account, ''),
+                  };
+                  return KasySidebar(
+                    routes: routes,
+                    onTapItem: onTap,
+                    currentItem: current,
+                    onLogout: () => confirmLogout(context, ref),
+                    profileName: name,
+                    profileEmail: email,
+                    profileAvatar: const KasyUserAvatar(),
+                  );
+                },
+              ),
+            ),
+          ),
+        );
+
+    // medium and large are identical here — the sidebar collapses itself by
+    // viewport width. The OrderedTraversalPolicy turns the numbered orders
+    // (sidebar=1, header=2, content=3) into the actual Tab sequence.
+    Widget connectedScaffold() => FocusTraversalGroup(
+          policy: OrderedTraversalPolicy(),
+          child: bart.BartScaffold(
+            routesBuilder: subRoutes,
+            bottomBar: kasyPaddedSurfaceBottomBar(),
+            initialRoute: resolvedInitialRoute,
+            showBottomBarOnStart: showBottomBarOnStart,
+            scaffoldOptions: scaffoldOptions,
+            sideBarOptions: connectedSidebar(),
+          ),
+        );
+
     return AnnotatedRegion<SystemUiOverlayStyle>(
       value: switch (Theme.brightnessOf(context)) {
         Brightness.dark => SystemUiOverlayStyle.light,
@@ -42,28 +104,8 @@ class BottomMenu extends StatelessWidget {
           showBottomBarOnStart: showBottomBarOnStart,
           scaffoldOptions: scaffoldOptions,
         ),
-        // medium (768–1024 px): KasySidebarPro auto-collapses at this width
-        medium: bart.BartScaffold(
-          routesBuilder: subRoutes,
-          bottomBar: kasyPaddedSurfaceBottomBar(),
-          initialRoute: resolvedInitialRoute,
-          showBottomBarOnStart: showBottomBarOnStart,
-          scaffoldOptions: scaffoldOptions,
-          sideBarOptions: bart.CustomSideBarOptions(
-            sideBarBuilder: (routes, onTap, current) => const KasySidebarPro(),
-          ),
-        ),
-        // large (1024 px+): full expanded sidebar
-        large: bart.BartScaffold(
-          routesBuilder: subRoutes,
-          bottomBar: kasyPaddedSurfaceBottomBar(),
-          initialRoute: resolvedInitialRoute,
-          showBottomBarOnStart: showBottomBarOnStart,
-          scaffoldOptions: scaffoldOptions,
-          sideBarOptions: bart.CustomSideBarOptions(
-            sideBarBuilder: (routes, onTap, current) => const KasySidebarPro(),
-          ),
-        ),
+        medium: connectedScaffold(),
+        large: connectedScaffold(),
       ),
     );
   }
@@ -109,3 +151,74 @@ class BottomMenu extends StatelessWidget {
     return segments.length < 2;
   }
 }
+
+/// Owns the sidebar's keyboard [FocusScope] and keeps the initial Tab focus
+/// anchored on the sidebar — on every screen, like Stripe/Linear.
+///
+/// Why this exists: Bart renders each page inside a nested [Navigator]
+/// (see bart's nested_navigator.dart), which has its OWN FocusScope and claims
+/// the primary focus the moment a route mounts. A plain `autofocus` on a sidebar
+/// item loses that race — the Navigator overwrites it in the same frame.
+///
+/// The fix is a post-frame callback (runs AFTER the Navigator has claimed focus)
+/// that hands focus back to this sidebar scope. We focus the SCOPE, not a
+/// specific item, so the very first Tab lands on the first item (no item is
+/// skipped). It re-runs whenever [currentItem] changes (a tab navigation) so a
+/// fresh screen also starts at the sidebar. The ring still only paints during
+/// keyboard navigation, so this is invisible to mouse/touch users.
+class _FocusableSidebar extends StatefulWidget {
+  final Widget child;
+  final ValueNotifier<int> currentItem;
+
+  const _FocusableSidebar({required this.child, required this.currentItem});
+
+  @override
+  State<_FocusableSidebar> createState() => _FocusableSidebarState();
+}
+
+class _FocusableSidebarState extends State<_FocusableSidebar> {
+  final FocusScopeNode _scope = FocusScopeNode(debugLabel: 'sidebarScope');
+
+  @override
+  void initState() {
+    super.initState();
+    widget.currentItem.addListener(_anchorFocus);
+    _anchorFocus();
+  }
+
+  @override
+  void didUpdateWidget(_FocusableSidebar oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.currentItem != widget.currentItem) {
+      oldWidget.currentItem.removeListener(_anchorFocus);
+      widget.currentItem.addListener(_anchorFocus);
+    }
+  }
+
+  // Defer to after the frame so we win the race against the nested Navigator,
+  // which claims focus for its own scope while the route is mounting.
+  void _anchorFocus() {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted) return;
+      // Only seize focus when nothing inside the sidebar already holds it, so a
+      // keyboard user mid-navigation in the sidebar isn't yanked back to start.
+      if (_scope.hasFocus) return;
+      _scope.requestFocus();
+    });
+  }
+
+  @override
+  void dispose() {
+    widget.currentItem.removeListener(_anchorFocus);
+    _scope.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FocusScope(
+      node: _scope,
+      child: FocusTraversalGroup(child: widget.child),
+    );
+  }
+}