kasy-cli 1.32.0 → 1.35.0

package/templates/firebase/lib/features/home/home_components_preview_registry.dart

@@ -1,3 +1,4 @@
+import 'package:bart/bart/bart_model.dart';
 import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -82,6 +83,10 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
             label: 'Subpage Actions',
             builder: _buildAppBarSubpageActionsVariant,
           ),
+          ComponentPreviewVariant(
+            label: 'Menu opens sidebar',
+            builder: _buildAppBarMenuVariant,
+          ),
         ],
       );
     case 'Web Header':
@@ -397,6 +402,10 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
             label: 'With Label & Description',
             builder: _buildTextAreaWithLabelDescription,
           ),
+          ComponentPreviewVariant(
+            label: 'Variants',
+            builder: _buildTextAreaVariants,
+          ),
           ComponentPreviewVariant(
             label: 'States',
             builder: _buildTextAreaStates,
@@ -701,6 +710,96 @@ class _SidebarPreview extends StatelessWidget {
   }
 }
 
+/// A [KasySidebar] wired to the live Home configuration (real pages) with
+/// highlight-only navigation, so the showcase mirrors the actual app. Shared by
+/// the sidebar previews and the app-bar drawer demo.
+class _DemoSidebar extends StatefulWidget {
+  const _DemoSidebar({this.isDrawer = false});
+
+  final bool isDrawer;
+
+  @override
+  State<_DemoSidebar> createState() => _DemoSidebarState();
+}
+
+class _DemoSidebarState extends State<_DemoSidebar> {
+  final ValueNotifier<int> _current = ValueNotifier<int>(0);
+
+  // The same four tabs the live app wires into the sidebar (Home / Support /
+  // Notifications / Settings); pages are stubs since this is a visual demo.
+  late final List<BartMenuRoute> _routes = <BartMenuRoute>[
+    BartMenuRoute.bottomBar(
+        label: 'Home', icon: KasyIcons.home, path: 'home', pageBuilder: _stub),
+    BartMenuRoute.bottomBar(
+        label: 'Support',
+        icon: KasyIcons.help,
+        path: 'support',
+        pageBuilder: _stub),
+    BartMenuRoute.bottomBar(
+        label: 'Notifications',
+        icon: KasyIcons.notification,
+        path: 'notifications',
+        pageBuilder: _stub),
+    BartMenuRoute.bottomBar(
+        label: 'Settings',
+        icon: KasyIcons.settings,
+        path: 'settings',
+        pageBuilder: _stub),
+  ];
+
+  static Widget _stub(BuildContext _, BuildContext _, RouteSettings? _) =>
+      const SizedBox.shrink();
+
+  @override
+  void dispose() {
+    _current.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return KasySidebar(
+      routes: _routes,
+      currentItem: _current,
+      onTapItem: (i) => _current.value = i, // highlight only
+      isDrawer: widget.isDrawer,
+    );
+  }
+}
+
+/// Slides [child] in as a full-height drawer from the left ([fromEnd] = right),
+/// over a dim barrier — the mobile navigation-drawer pattern.
+void _openSidebarDrawer(
+  BuildContext context, {
+  required bool fromEnd,
+  required Widget child,
+}) {
+  showGeneralDialog<void>(
+    context: context,
+    barrierDismissible: true,
+    barrierLabel: 'Dismiss',
+    barrierColor: Colors.black.withValues(alpha: 0.42),
+    transitionDuration: const Duration(milliseconds: 290),
+    pageBuilder: (ctx, anim, secAnim) => Align(
+      alignment: fromEnd ? Alignment.centerRight : Alignment.centerLeft,
+      child: SizedBox(height: double.infinity, child: child),
+    ),
+    transitionBuilder: (ctx, anim, secAnim, c) {
+      final curved = CurvedAnimation(parent: anim, curve: Curves.easeOutCubic);
+      return SlideTransition(
+        position: Tween<Offset>(
+          begin: Offset(fromEnd ? 1.0 : -1.0, 0),
+          end: Offset.zero,
+        ).animate(curved),
+        child: FadeTransition(
+          opacity: Tween<double>(begin: 0.85, end: 1.0).animate(curved),
+          child: c,
+        ),
+      );
+    },
+  );
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // ─────────────────────────────────────────────────────────────────────────────
 // Tabs — interactive demos
@@ -1777,6 +1876,13 @@ Widget _buildAppBarSubpageActionsVariant(BuildContext context) {
   return const _AppBarPreview(variant: KasyAppBarStyle.subpageActions);
 }
 
+Widget _buildAppBarMenuVariant(BuildContext context) {
+  return const _AppBarPreview(
+    variant: KasyAppBarStyle.rootTab,
+    withMenu: true,
+  );
+}
+
 Widget _buildWebHeaderDefaultVariant(BuildContext context) {
   return const _WebHeaderPreview();
 }
@@ -2785,6 +2891,34 @@ Widget _buildTextAreaWithLabelDescription(BuildContext context) {
   return const _TextAreaWithLabelDescriptionContent();
 }
 
+Widget _buildTextAreaVariants(BuildContext context) {
+  return const Column(
+    mainAxisSize: MainAxisSize.min,
+    crossAxisAlignment: CrossAxisAlignment.stretch,
+    children: [
+      KasyTextArea(
+        label: 'Primary Variant',
+        hint: 'Primary style text area',
+        description: 'Default variant with primary styling',
+      ),
+      SizedBox(height: KasySpacing.lg),
+      KasyTextArea(
+        label: 'Secondary Variant',
+        hint: 'Secondary style text area',
+        description: 'Secondary variant for surfaces',
+        variant: KasyTextFieldVariant.secondary,
+      ),
+      SizedBox(height: KasySpacing.lg),
+      KasyTextArea(
+        label: 'Flat Variant',
+        hint: 'Flat style text area',
+        description: 'Primary fill, hairline border, no shadow',
+        variant: KasyTextFieldVariant.flat,
+      ),
+    ],
+  );
+}
+
 Widget _buildTextAreaStates(BuildContext context) {
   return const Column(
     mainAxisSize: MainAxisSize.min,
@@ -3308,7 +3442,6 @@ class _ToastVariantsPreview extends StatelessWidget {
             title: 'Join a team',
             message:
                 'You have been invited to join the team!',
-            icon: _logoChip(context),
           ),
         ),
         const SizedBox(height: KasySpacing.sm),
@@ -3381,16 +3514,6 @@ class _ToastVariantsPreview extends StatelessWidget {
       ),
     );
   }
-
-  Widget _logoChip(BuildContext context) => Container(
-        width: 26,
-        height: 26,
-        decoration: BoxDecoration(
-          color: context.colors.onSurface,
-          borderRadius: BorderRadius.circular(KasyRadius.xs),
-        ),
-        child: Icon(KasyIcons.widgets, size: 15, color: context.colors.surface),
-      );
 }
 
 // — Toast: static cards preview (all 5 tones, close buttons functional) —
@@ -3405,29 +3528,16 @@ class _ToastStaticPreview extends StatefulWidget {
 class _ToastStaticPreviewState extends State<_ToastStaticPreview> {
   final Set<int> _dismissed = {};
 
-  Widget _logoChip() => Builder(
-        builder: (ctx) => Container(
-          width: 26,
-          height: 26,
-          decoration: BoxDecoration(
-            color: ctx.colors.onSurface,
-            borderRadius: BorderRadius.circular(KasyRadius.xs),
-          ),
-          child:
-              Icon(KasyIcons.widgets, size: 15, color: ctx.colors.surface),
-        ),
-      );
-
   @override
   Widget build(BuildContext context) {
     final items = <(int, KasyToast)>[
       (
         0,
+        // Default (neutral) tone renders the app brand logo automatically.
         KasyToast(
           title: 'Join a team',
           message:
               'You have been invited to join the team!',
-          icon: _logoChip(),
           onClose: () => setState(() => _dismissed.add(0)),
         ),
       ),
@@ -3869,7 +3979,11 @@ class _DesktopMockContent extends StatelessWidget {
 class _AppBarPreview extends StatelessWidget {
   final KasyAppBarStyle variant;
 
-  const _AppBarPreview({required this.variant});
+  /// Shows a hamburger leading that opens a [KasySidebar] drawer from the left —
+  /// the mobile "menu opens navigation" pattern.
+  final bool withMenu;
+
+  const _AppBarPreview({required this.variant, this.withMenu = false});
 
   @override
   Widget build(BuildContext context) {
@@ -3881,6 +3995,20 @@ class _AppBarPreview extends StatelessWidget {
       tooltip: 'More',
       onPressed: () {},
     );
+    final Widget? leading = withMenu
+        ? KasyChromeOrbIconButton(
+            icon: KasyIcons.menu,
+            iconSize: 20,
+            foregroundColor: context.colors.onSurface,
+            fillColor: kasyChromeOrbFillColor(context),
+            tooltip: 'Menu',
+            onPressed: () => _openSidebarDrawer(
+              context,
+              fromEnd: false,
+              child: const _DemoSidebar(isDrawer: true),
+            ),
+          )
+        : null;
     final KasyColors c = context.colors;
     // KasyAppBar hides itself at desktop width; the preview must always show it,
     // so pin a phone-sized MediaQuery just for the bar's own width check.
@@ -3909,9 +4037,10 @@ class _AppBarPreview extends StatelessWidget {
                   right: 0,
                   child: KasyAppBar(
                     useSafeArea: false,
-                    title: 'Preview',
+                    title: withMenu ? 'Home' : 'Preview',
                     style: variant,
                     onBack: () {},
+                    leading: leading,
                     trailing: variant == KasyAppBarStyle.subpageActions
                         ? trailing
                         : null,
@@ -7593,15 +7722,15 @@ class _RealCardContent extends StatelessWidget {
                     children: [
                       Text(
                         'Alex Johnson',
-                        style: TextStyle(
-                          fontSize: 14,
-                          fontWeight: FontWeight.w600,
+                        style: context.kasyTextTheme.cardTitle.copyWith(
                           color: c.onSurface,
                         ),
                       ),
                       Text(
                         '@alexjohnson · 2h ago',
-                        style: TextStyle(fontSize: 12, color: c.muted),
+                        style: context.kasyTextTheme.cardSubtitle.copyWith(
+                          color: c.muted,
+                        ),
                       ),
                     ],
                   ),
@@ -7650,8 +7779,7 @@ class _RealCardContent extends StatelessWidget {
               'Golden hour light made every single step worth it.',
               maxLines: 3,
               overflow: TextOverflow.ellipsis,
-              style: TextStyle(
-                fontSize: 13,
+              style: context.textTheme.bodySmall?.copyWith(
                 color: c.onSurface,
                 height: 1.5,
               ),
@@ -7716,9 +7844,7 @@ class _SkeletonControls extends StatelessWidget {
             // Label
             Text(
               'Animation',
-              style: TextStyle(
-                fontSize: 12,
-                fontWeight: FontWeight.w600,
+              style: context.kasyTextTheme.sectionLabel.copyWith(
                 color: c.muted,
                 letterSpacing: 0.4,
               ),
@@ -7783,7 +7909,9 @@ class _SkeletonControls extends StatelessWidget {
                       ),
                       Text(
                         'Toggle skeleton loading state',
-                        style: TextStyle(fontSize: 11, color: c.muted),
+                        style: context.kasyTextTheme.caption.copyWith(
+                          color: c.muted,
+                        ),
                       ),
                     ],
                   ),
@@ -7933,15 +8061,15 @@ class _SkeletonListPreviewState extends State<_SkeletonListPreview> {
                         children: [
                           Text(
                             item.title,
-                            style: TextStyle(
-                              fontSize: 14,
-                              fontWeight: FontWeight.w600,
+                            style: context.kasyTextTheme.rowTitle.copyWith(
                               color: c.onSurface,
                             ),
                           ),
                           Text(
                             item.subtitle,
-                            style: TextStyle(fontSize: 12, color: c.muted),
+                            style: context.kasyTextTheme.cardSubtitle.copyWith(
+                              color: c.muted,
+                            ),
                           ),
                         ],
                       ),
@@ -8086,8 +8214,7 @@ class _SkeletonTextPreviewState extends State<_SkeletonTextPreview> {
   Widget _buildRealText(BuildContext context) {
     return Text(
       _kParagraph,
-      style: TextStyle(
-        fontSize: 16,
+      style: context.textTheme.bodyLarge?.copyWith(
         height: 1.6,
         color: context.colors.onSurface,
       ),
@@ -8192,9 +8319,7 @@ class _SkeletonProfilePreviewState extends State<_SkeletonProfilePreview> {
         // Name
         Text(
           'Alex Johnson',
-          style: TextStyle(
-            fontSize: 20,
-            fontWeight: FontWeight.w700,
+          style: context.textTheme.headlineSmall?.copyWith(
             color: c.onSurface,
           ),
         ),
@@ -8202,14 +8327,19 @@ class _SkeletonProfilePreviewState extends State<_SkeletonProfilePreview> {
         // Handle
         Text(
           '@alexjohnson',
-          style: TextStyle(fontSize: 13, color: c.muted),
+          style: context.kasyTextTheme.cardSubtitle.copyWith(
+            color: c.muted,
+          ),
         ),
         const SizedBox(height: KasySpacing.smd),
         // Bio
         Text(
           'Product designer & outdoor enthusiast. Building tools that help people do more with less.',
           textAlign: TextAlign.center,
-          style: TextStyle(fontSize: 13, color: c.onSurface, height: 1.5),
+          style: context.textTheme.bodySmall?.copyWith(
+            color: c.onSurface,
+            height: 1.5,
+          ),
         ),
         const SizedBox(height: KasySpacing.md),
         // Stats row
@@ -8263,15 +8393,15 @@ class _StatCell extends StatelessWidget {
         children: [
           Text(
             value,
-            style: TextStyle(
-              fontSize: 17,
-              fontWeight: FontWeight.w700,
+            style: context.textTheme.titleMedium?.copyWith(
               color: c.onSurface,
             ),
           ),
           Text(
             label,
-            style: TextStyle(fontSize: 11, color: c.muted),
+            style: context.kasyTextTheme.caption.copyWith(
+              color: c.muted,
+            ),
           ),
         ],
       ),
@@ -8497,9 +8627,7 @@ class _SkeletonGridPreviewState extends State<_SkeletonGridPreview> {
                   children: [
                     Text(
                       item.title,
-                      style: TextStyle(
-                        fontSize: 13,
-                        fontWeight: FontWeight.w600,
+                      style: context.kasyTextTheme.cardTitle.copyWith(
                         color: c.onSurface,
                       ),
                       maxLines: 1,
@@ -8508,7 +8636,9 @@ class _SkeletonGridPreviewState extends State<_SkeletonGridPreview> {
                     const SizedBox(height: 2),
                     Text(
                       item.subtitle,
-                      style: TextStyle(fontSize: 11, color: c.muted),
+                      style: context.kasyTextTheme.cardSubtitle.copyWith(
+                        color: c.muted,
+                      ),
                       maxLines: 1,
                       overflow: TextOverflow.ellipsis,
                     ),

package/templates/firebase/lib/features/home/home_page.dart

@@ -3,6 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/components/kasy_app_bar.dart';
 import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
 import 'package:kasy_kit/core/states/components/maybe_ask_rating.dart';
+import 'package:kasy_kit/core/states/components/maybe_show_update_available.dart';
 import 'package:kasy_kit/core/states/components/maybe_show_update_bottom_sheet.dart';
 import 'package:kasy_kit/core/states/components/maybeshow_component.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
@@ -21,6 +22,9 @@ class HomePage extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     return ConditionalWidgetsEvents(
       eventWidgets: [
+        // A required/optional store update pre-empts every other start-up
+        // prompt — if the user is behind, fix that before anything else.
+        MaybeShowUpdateAvailable(),
         MaybeAskForReview(),
         MaybeAskForRating(),
         MaybeShowPremiumPage(),