kasy-cli 1.21.9 → 1.22.0

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

@@ -1,19 +1,17 @@
-import 'package:bart/bart/bart_model.dart';
 import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:kasy_kit/components/components.dart';
-import 'package:kasy_kit/components/kasy_sidebar_pro.dart';
 import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/features/home/home_components_preview_page.dart';
 
-/// Previews só instanciam os widgets públicos do kit (`components.dart` +
-/// tema). Rows / scroll / espaçamentos são apenas layout da vitrine —
-/// comportamento visual vem das props do componente (ex.: `KasyAccordion.surfaceRadius`,
-/// `KasyButton.borderRadius`). Presets opcionais: [KasyAvatarGradients],
-/// [KasyAvatarDemoPhotos] (pacote avatar).
+/// Previews only instantiate the kit's public widgets (`components.dart` +
+/// theme). Rows / scroll / spacing are just showcase layout;
+/// visual behavior comes from the component's props (e.g. `KasyAccordion.surfaceRadius`,
+/// `KasyButton.borderRadius`). Optional presets: [KasyAvatarGradients],
+/// [KasyAvatarDemoPhotos] (avatar package).
 class ComponentPreviewDefinition {
   final String title;
   final List<ComponentPreviewVariant> variants;
@@ -86,6 +84,24 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
           ),
         ],
       );
+    case 'Web Header':
+      return const ComponentPreviewDefinition(
+        title: 'Web Header',
+        variants: [
+          ComponentPreviewVariant(
+            label: 'Default',
+            builder: _buildWebHeaderDefaultVariant,
+          ),
+          ComponentPreviewVariant(
+            label: 'With notification',
+            builder: _buildWebHeaderBadgeVariant,
+          ),
+          ComponentPreviewVariant(
+            label: 'Without avatar',
+            builder: _buildWebHeaderNoAvatarVariant,
+          ),
+        ],
+      );
     case 'Button':
       return const ComponentPreviewDefinition(
         title: 'Button',
@@ -313,6 +329,24 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
           ),
         ],
       );
+    case 'Status Tag':
+      return const ComponentPreviewDefinition(
+        title: 'Status Tag',
+        variants: [
+          ComponentPreviewVariant(
+            label: 'Tones',
+            builder: _buildStatusTagTones,
+          ),
+          ComponentPreviewVariant(
+            label: 'Without dot',
+            builder: _buildStatusTagNoDot,
+          ),
+          ComponentPreviewVariant(
+            label: 'In a row',
+            builder: _buildStatusTagInRow,
+          ),
+        ],
+      );
     case 'TextField':
       return const ComponentPreviewDefinition(
         title: 'TextField',
@@ -510,24 +544,18 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
     case 'Sidebar':
       return const ComponentPreviewDefinition(
         title: 'Sidebar',
-        variants: [
-          ComponentPreviewVariant(
-            label: 'Drawer demo',
-            builder: _buildSidebarVariant,
-          ),
-        ],
-      );
-    case 'Sidebar Pro':
-      return const ComponentPreviewDefinition(
-        title: 'Sidebar Pro',
         variants: [
           ComponentPreviewVariant(
             label: 'Expanded',
-            builder: _buildSidebarProExpanded,
+            builder: _buildSidebarExpanded,
           ),
           ComponentPreviewVariant(
             label: 'Collapsed',
-            builder: _buildSidebarProCollapsed,
+            builder: _buildSidebarCollapsed,
+          ),
+          ComponentPreviewVariant(
+            label: 'Without profile',
+            builder: _buildSidebarNoProfile,
           ),
         ],
       );
@@ -581,142 +609,26 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Sidebar — drawer demo
+// Sidebar — interactive preview
 // ─────────────────────────────────────────────────────────────────────────────
 
-Widget _buildSidebarVariant(BuildContext context) => const _SidebarPreview();
+Widget _buildSidebarExpanded(BuildContext context) =>
+    const _SidebarPreview(initiallyCollapsed: false);
 
-final List<BartMenuRoute> _kSidebarMockRoutes = [
-  BartMenuRoute.bottomBar(
-    label: 'Home',
-    icon: KasyIcons.home,
-    path: '/home',
-    pageBuilder: (parentCtx, tabCtx, settings) => const SizedBox.shrink(),
-  ),
-  BartMenuRoute.bottomBar(
-    label: 'Notifications',
-    icon: KasyIcons.notification,
-    path: '/notifications',
-    pageBuilder: (parentCtx, tabCtx, settings) => const SizedBox.shrink(),
-  ),
-  BartMenuRoute.bottomBar(
-    label: 'Profile',
-    icon: KasyIcons.person,
-    path: '/profile',
-    pageBuilder: (parentCtx, tabCtx, settings) => const SizedBox.shrink(),
-  ),
-  BartMenuRoute.bottomBar(
-    label: 'Settings',
-    icon: KasyIcons.settings,
-    path: '/settings',
-    pageBuilder: (parentCtx, tabCtx, settings) => const SizedBox.shrink(),
-  ),
-];
-
-class _SidebarPreview extends StatefulWidget {
-  const _SidebarPreview();
-
-  @override
-  State<_SidebarPreview> createState() => _SidebarPreviewState();
-}
-
-class _SidebarPreviewState extends State<_SidebarPreview> {
-  final ValueNotifier<int> _currentItem = ValueNotifier(0);
+Widget _buildSidebarCollapsed(BuildContext context) =>
+    const _SidebarPreview(initiallyCollapsed: true);
 
-  @override
-  void dispose() {
-    _currentItem.dispose();
-    super.dispose();
-  }
+Widget _buildSidebarNoProfile(BuildContext context) =>
+    const _SidebarPreview(initiallyCollapsed: false, showProfile: false);
 
-  void _openDrawer(BuildContext context, {required bool fromEnd}) {
-    final routes = _kSidebarMockRoutes;
-    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: ValueListenableBuilder<int>(
-            valueListenable: _currentItem,
-            builder: (builderCtx, currentIndex, child) =>
-                kasySidebarBuilder(routes, (i) {
-              _currentItem.value = i;
-            }, _currentItem),
-          ),
-        ),
-      ),
-      transitionBuilder: (ctx, anim, secAnim, child) {
-        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: child,
-          ),
-        );
-      },
-    );
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      mainAxisSize: MainAxisSize.min,
-      crossAxisAlignment: CrossAxisAlignment.stretch,
-      children: [
-        Padding(
-          padding: const EdgeInsets.symmetric(horizontal: KasySpacing.md),
-          child: _previewIntrinsicLaunch(
-            KasyButton(
-              label: 'Open Left',
-              variant: KasyButtonVariant.soft,
-              onPressed: () => _openDrawer(context, fromEnd: false),
-            ),
-          ),
-        ),
-        const SizedBox(height: KasySpacing.sm),
-        Padding(
-          padding: const EdgeInsets.symmetric(horizontal: KasySpacing.md),
-          child: _previewIntrinsicLaunch(
-            KasyButton(
-              label: 'Open Right',
-              variant: KasyButtonVariant.soft,
-              onPressed: () => _openDrawer(context, fromEnd: true),
-            ),
-          ),
-        ),
-      ],
-    );
-  }
-}
-
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Sidebar Pro — interactive preview
-// ─────────────────────────────────────────────────────────────────────────────
-
-Widget _buildSidebarProExpanded(BuildContext context) =>
-    const _SidebarProPreview(initiallyCollapsed: false);
-
-Widget _buildSidebarProCollapsed(BuildContext context) =>
-    const _SidebarProPreview(initiallyCollapsed: true);
-
-class _SidebarProPreview extends StatelessWidget {
-  const _SidebarProPreview({required this.initiallyCollapsed});
+class _SidebarPreview extends StatelessWidget {
+  const _SidebarPreview({
+    required this.initiallyCollapsed,
+    this.showProfile = true,
+  });
 
   final bool initiallyCollapsed;
+  final bool showProfile;
 
   void _open(BuildContext context, {required bool fromEnd}) {
     showGeneralDialog<void>(
@@ -729,11 +641,12 @@ class _SidebarProPreview extends StatelessWidget {
         alignment: fromEnd ? Alignment.centerRight : Alignment.centerLeft,
         child: SizedBox(
           height: double.infinity,
-          child: KasySidebarPro(
+          child: KasySidebar(
             initiallyCollapsed: initiallyCollapsed,
+            showProfile: showProfile,
             side: fromEnd
-                ? KasySidebarProSide.right
-                : KasySidebarProSide.left,
+                ? KasySidebarSide.right
+                : KasySidebarSide.left,
           ),
         ),
       ),
@@ -1864,6 +1777,18 @@ Widget _buildAppBarSubpageActionsVariant(BuildContext context) {
   return const _AppBarPreview(variant: KasyAppBarStyle.subpageActions);
 }
 
+Widget _buildWebHeaderDefaultVariant(BuildContext context) {
+  return const _WebHeaderPreview();
+}
+
+Widget _buildWebHeaderBadgeVariant(BuildContext context) {
+  return const _WebHeaderPreview(showBadge: true);
+}
+
+Widget _buildWebHeaderNoAvatarVariant(BuildContext context) {
+  return const _WebHeaderPreview(showAvatar: false);
+}
+
 Widget _buildButtonSizesVariant(BuildContext context) {
   return const _ButtonSizesPreview();
 }
@@ -2643,6 +2568,59 @@ Widget _buildBadgeDefault(BuildContext context) {
   );
 }
 
+// ── Status Tag previews ──────────────────────────────────────────────────────
+
+Widget _buildStatusTagTones(BuildContext context) {
+  return const Center(
+    child: Wrap(
+      spacing: KasySpacing.sm,
+      runSpacing: KasySpacing.sm,
+      alignment: WrapAlignment.center,
+      children: [
+        KasyStatusTag(label: 'Active', tone: KasyStatusTagTone.success),
+        KasyStatusTag(label: 'Subscriber', tone: KasyStatusTagTone.primary),
+        KasyStatusTag(label: 'Pending', tone: KasyStatusTagTone.warning),
+        KasyStatusTag(label: 'Blocked', tone: KasyStatusTagTone.danger),
+        KasyStatusTag(label: 'Inactive'),
+      ],
+    ),
+  );
+}
+
+Widget _buildStatusTagNoDot(BuildContext context) {
+  return const Center(
+    child: Wrap(
+      spacing: KasySpacing.sm,
+      runSpacing: KasySpacing.sm,
+      alignment: WrapAlignment.center,
+      children: [
+        KasyStatusTag(
+          label: 'Visible',
+          tone: KasyStatusTagTone.success,
+          showDot: false,
+        ),
+        KasyStatusTag(
+          label: 'Hidden',
+          showDot: false,
+        ),
+      ],
+    ),
+  );
+}
+
+Widget _buildStatusTagInRow(BuildContext context) {
+  return const Center(
+    child: Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        KasyStatusTag(label: 'Active', tone: KasyStatusTagTone.success),
+        SizedBox(width: KasySpacing.sm),
+        KasyStatusTag(label: 'Subscriber', tone: KasyStatusTagTone.primary),
+      ],
+    ),
+  );
+}
+
 Widget _buildBadgeColors(BuildContext context) {
   return const _BadgeColorsPreview();
 }
@@ -3321,7 +3299,7 @@ class _ToastVariantsPreview extends StatelessWidget {
             context,
             title: 'Join a team',
             message:
-                'Junior Garcia sent you an invitation to join HeroUI team!',
+                'You have been invited to join the team!',
             icon: _logoChip(context),
           ),
         ),
@@ -3440,7 +3418,7 @@ class _ToastStaticPreviewState extends State<_ToastStaticPreview> {
         KasyToast(
           title: 'Join a team',
           message:
-              'Junior Garcia sent you an invitation to join HeroUI team!',
+              'You have been invited to join the team!',
           icon: _logoChip(),
           onClose: () => setState(() => _dismissed.add(0)),
         ),
@@ -3725,6 +3703,161 @@ class _AccordionPreviewState extends State<_AccordionPreview> {
   }
 }
 
+/// Presents [KasyWebHeader] inside a desktop browser-window mock (title bar +
+/// faux sidebar + content) so the preview reads as the web/desktop chrome it is.
+class _WebHeaderPreview extends StatelessWidget {
+  final bool showBadge;
+  final bool showAvatar;
+
+  const _WebHeaderPreview({this.showBadge = false, this.showAvatar = true});
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: c.surface,
+        borderRadius: BorderRadius.circular(KasyRadius.lg),
+        border: Border.all(color: c.onSurface.withValues(alpha: 0.10)),
+        boxShadow: [KasyShadows.component(context)],
+      ),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(KasyRadius.lg),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const _BrowserTopBar(),
+            // The real header, flush — no corner radius of its own.
+            KasyWebHeader(
+              showNotificationBadge: showBadge,
+              showAvatar: showAvatar,
+              onNotifications: () {},
+              onCreate: () {},
+              onAvatarTap: () {},
+            ),
+            const SizedBox(
+              height: 150,
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  _DesktopMockSidebar(),
+                  Expanded(child: _DesktopMockContent()),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// macOS-style window chrome: traffic-light dots + an address pill.
+class _BrowserTopBar extends StatelessWidget {
+  const _BrowserTopBar();
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+    return Container(
+      height: 36,
+      padding: const EdgeInsets.symmetric(horizontal: 14),
+      decoration: BoxDecoration(
+        color: c.surfaceNeutralSoft,
+        border: Border(
+          bottom: BorderSide(color: c.onSurface.withValues(alpha: 0.08)),
+        ),
+      ),
+      child: Row(
+        children: [
+          _trafficDot(const Color(0xFFFF5F57)),
+          const SizedBox(width: 8),
+          _trafficDot(const Color(0xFFFEBC2E)),
+          const SizedBox(width: 8),
+          _trafficDot(const Color(0xFF28C840)),
+          const SizedBox(width: 16),
+          Expanded(
+            child: Container(
+              height: 18,
+              decoration: BoxDecoration(
+                color: c.surface,
+                borderRadius: BorderRadius.circular(KasyRadius.full),
+                border: Border.all(
+                  color: c.onSurface.withValues(alpha: 0.08),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _trafficDot(Color color) => Container(
+    width: 11,
+    height: 11,
+    decoration: BoxDecoration(color: color, shape: BoxShape.circle),
+  );
+}
+
+/// Narrow faux navigation rail to the left of the content area.
+class _DesktopMockSidebar extends StatelessWidget {
+  const _DesktopMockSidebar();
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+    return Container(
+      width: 76,
+      decoration: BoxDecoration(
+        color: c.surface,
+        border: Border(
+          right: BorderSide(color: c.onSurface.withValues(alpha: 0.08)),
+        ),
+      ),
+      child: const Padding(
+        padding: EdgeInsets.all(KasySpacing.smd),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: <Widget>[
+            _AppBarBodyLine(widthFactor: 1),
+            SizedBox(height: KasySpacing.sm),
+            _AppBarBodyLine(widthFactor: 0.8),
+            SizedBox(height: KasySpacing.sm),
+            _AppBarBodyLine(widthFactor: 0.9),
+            SizedBox(height: KasySpacing.sm),
+            _AppBarBodyLine(widthFactor: 0.7),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Faux content area shown under the header in the desktop mock.
+class _DesktopMockContent extends StatelessWidget {
+  const _DesktopMockContent();
+
+  @override
+  Widget build(BuildContext context) {
+    return const Padding(
+      padding: EdgeInsets.all(KasySpacing.md),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: <Widget>[
+          _AppBarBodyLine(widthFactor: 0.4),
+          SizedBox(height: KasySpacing.md),
+          _AppBarBodyLine(widthFactor: 0.95),
+          SizedBox(height: KasySpacing.sm),
+          _AppBarBodyLine(widthFactor: 0.85),
+          SizedBox(height: KasySpacing.sm),
+          _AppBarBodyLine(widthFactor: 0.9),
+        ],
+      ),
+    );
+  }
+}
+
 class _AppBarPreview extends StatelessWidget {
   final KasyAppBarStyle variant;
 
@@ -3740,38 +3873,44 @@ class _AppBarPreview extends StatelessWidget {
       tooltip: 'More',
       onPressed: () {},
     );
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        color: context.colors.surface,
-        borderRadius: BorderRadius.circular(KasyRadius.xl),
-        border: Border.all(
-          color: context.colors.outline.withValues(alpha: 0.3),
-        ),
-        boxShadow: [KasyShadows.component(context)],
-      ),
-      child: ClipRRect(
-        borderRadius: BorderRadius.circular(KasyRadius.xl),
-        child: SizedBox(
-          height: 236,
-          child: Stack(
-            fit: StackFit.expand,
-            children: [
-              const _AppBarMockBody(),
-              Positioned(
-                top: 0,
-                left: 0,
-                right: 0,
-                child: KasyAppBar(
-                  useSafeArea: false,
-                  title: 'Preview',
-                  style: variant,
-                  onBack: () {},
-                  trailing: variant == KasyAppBarStyle.subpageActions
-                      ? trailing
-                      : 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.
+    return MediaQuery(
+      data: MediaQuery.of(context).copyWith(size: const Size(390, 844)),
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          color: c.surface,
+          borderRadius: BorderRadius.circular(KasyRadius.xl),
+          border: Border.all(
+            color: c.outline.withValues(alpha: 0.3),
+          ),
+          boxShadow: [KasyShadows.component(context)],
+        ),
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(KasyRadius.xl),
+          child: SizedBox(
+            height: 236,
+            child: Stack(
+              fit: StackFit.expand,
+              children: [
+                const _AppBarMockBody(),
+                Positioned(
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  child: KasyAppBar(
+                    useSafeArea: false,
+                    title: 'Preview',
+                    style: variant,
+                    onBack: () {},
+                    trailing: variant == KasyAppBarStyle.subpageActions
+                        ? trailing
+                        : null,
+                  ),
                 ),
-              ),
-            ],
+              ],
+            ),
           ),
         ),
       ),
@@ -5030,8 +5169,8 @@ void _noop() {}
 
 void _triggerTapFeedback() {}
 
-/// Os hosts de preview aplicam largura máxima ao conteúdo; uma [Row] centralizada
-/// mantém [KasyButton] sem `expand` com largura intrínseca ao rótulo.
+/// Preview hosts apply a maximum width to the content; a centered [Row]
+/// keeps [KasyButton] without `expand` at its label's intrinsic width.
 Widget _previewIntrinsicLaunch(Widget child) {
   return Row(
     mainAxisAlignment: MainAxisAlignment.center,