kasy-cli 1.35.0 → 1.36.0

package/lib/scaffold/CHANGELOG.json

@@ -1,4 +1,13 @@
 {
+  "1.36.0": {
+    "modules": {
+      "components": {
+        "pt": "Sidebar melhorada: nova linha de busca opcional acima do rodapé (showSearch), variante de gaveta (isDrawer) e modo de demonstração (showcase) pra mais flexibilidade de navegação. As abas internas agora usam o componente compartilhado KasyTabs, deixando o visual mais consistente e o código mais enxuto.",
+        "en": "Improved sidebar: new optional search row above the footer (showSearch), a drawer variant (isDrawer) and a showcase mode for more navigation flexibility. The internal tabs now use the shared KasyTabs component, making the look more consistent and the code leaner.",
+        "es": "Sidebar mejorada: nueva fila de búsqueda opcional sobre el pie (showSearch), variante de cajón (isDrawer) y modo de demostración (showcase) para más flexibilidad de navegación. Las pestañas internas ahora usan el componente compartido KasyTabs, dejando el aspecto más consistente y el código más limpio."
+      }
+    }
+  },
   "1.35.0": {
     "modules": {
       "core": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kasy-cli",
-  "version": "1.35.0",
+  "version": "1.36.0",
   "description": "CLI for scaffolding production-ready Flutter SaaS apps with Firebase, Supabase, or API REST backends.",
   "bin": {
     "kasy": "./bin/kasy.js"

package/templates/firebase/.firebase/hosting.YnVpbGQvd2Vi.cache

@@ -58,16 +58,16 @@ assets/assets/icons/google_play_games.png,1772398653083,533c1d87d7be8690ab173ef4
 assets/assets/icons/google.png,1772398653083,f423e7e7be1e06008d45617d07f095f04da7fdcab9a56523f9e0633828e464e0
 assets/assets/icons/facebook.png,1772398653083,79ac67e449c1db63319d43329ca91f682b4e0bc6a0883b0dfb2a849e13ae6eb6
 assets/assets/icons/apple.png,1772398653083,2a737d8801ca81452b2978bb2e1ac72136acf1a4c338f2de2f77b65e9f6de1fa
-version.json,1781382132245,b028f2bf7b54dc78541295a1ddf03306ac20a052662bde5b6b1aefe80d613249
-index.html,1781382083192,bb8142eb84e9e44049957c3edf86006e1ae5f194c397a8326ce505b68fdf58f4
-flutter_service_worker.js,1781382132717,baeeaf9f4b8e6f40d3b0549429ceb70ca01f120db6a7ef2f60d5809233dc2205
-assets/FontManifest.json,1781382132345,4d84ab517c27984d36f9a3c8be6f2a72788c0c3985c1d5874297fef0a53407ca
-assets/AssetManifest.bin.json,1781382132345,50a11b51c3fc4cbed1b5ec3a4f466c6a6b75c481d08d4782c8191f99bdbdba9c
-assets/AssetManifest.bin,1781382132345,78bccb08a36307a400711a1d7e6868bd5f89a24e63439fb5b6747660323e4475
-assets/shaders/stretch_effect.frag,1781382132431,1a7d4ac2be40cf0a459dfb390ef08bcd740f37913ffdee8de3c2ea836a18410e
-assets/shaders/ink_sparkle.frag,1781382132431,1c8e222328206d1e06754f76fb53947aad38d62180aafad5298a3c6f510b173d
-flutter_bootstrap.js,1781382083178,9a838d82fafadf6910ccbc6cdf4df03972abfe7749620e382c8ced856120bd8d
-main.dart.js_3.part.js,1781382118356,80b75e3c9ff59756ea8a58318c7886e7a74787b7ed07fad6f7f4b4347d5bdbab
-main.dart.js_1.part.js,1781382118351,a6dfa901d3a791b48e70499f583405215d20a4fe2491acd8d670fe0eac71cdaf
-assets/NOTICES,1781382132345,a18efc42c5ed99b56481537d0f229ddd3add671c548a893aaf8766f30c854158
-main.dart.js,1781382118819,5e7b0cab78a6e7cd653637824e33318f75554c9b5cce4b1ab26299da255247e1
+version.json,1781383075783,1c93a56a819f36903677817066dbda0bae5785563a39d3a0a486246cf67107ac
+flutter_service_worker.js,1781383076286,baeeaf9f4b8e6f40d3b0549429ceb70ca01f120db6a7ef2f60d5809233dc2205
+assets/FontManifest.json,1781383075907,4d84ab517c27984d36f9a3c8be6f2a72788c0c3985c1d5874297fef0a53407ca
+assets/AssetManifest.bin.json,1781383075907,50a11b51c3fc4cbed1b5ec3a4f466c6a6b75c481d08d4782c8191f99bdbdba9c
+assets/AssetManifest.bin,1781383075907,78bccb08a36307a400711a1d7e6868bd5f89a24e63439fb5b6747660323e4475
+assets/shaders/ink_sparkle.frag,1781383075976,1c8e222328206d1e06754f76fb53947aad38d62180aafad5298a3c6f510b173d
+assets/shaders/stretch_effect.frag,1781383075975,1a7d4ac2be40cf0a459dfb390ef08bcd740f37913ffdee8de3c2ea836a18410e
+index.html,1781383002256,bb8142eb84e9e44049957c3edf86006e1ae5f194c397a8326ce505b68fdf58f4
+flutter_bootstrap.js,1781383002244,fb98f6d7235b26ff8bcd0abce3ccbc26619afbc1956fd2bdceeaa847c25f8a4b
+main.dart.js_1.part.js,1781383058280,3d9563d7203157ebfa135f83b8cd2677443bf89b850e8a5adcffe56621b4fc16
+main.dart.js_3.part.js,1781383058289,133184cfaa83a56797dcb74c0b7fce45102298ea9e74f51f4a54ef6beca152c9
+assets/NOTICES,1781383075907,a18efc42c5ed99b56481537d0f229ddd3add671c548a893aaf8766f30c854158
+main.dart.js,1781383059126,b4cd4c8740826a7c4257dc5f49c9a402e5c6338f31eb39de8dd82762fa47be16

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

@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:kasy_kit/components/kasy_app_bar.dart';
 import 'package:kasy_kit/components/kasy_avatar.dart';
 import 'package:kasy_kit/components/kasy_avatar_presets.dart';
+import 'package:kasy_kit/components/kasy_tabs.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
@@ -60,7 +61,6 @@ class _SidebarColors {
     required this.border,
     required this.divider,
     required this.activeBg,
-    required this.segmentThumb,
     required this.textMuted,
     required this.textActive,
     required this.logout,
@@ -69,9 +69,9 @@ class _SidebarColors {
 
   /// Maps the HeroUI Figma tokens onto the global [KasyColors]:
   /// `surface → surface`, `foreground → onSurface`, `foreground/muted → muted`,
-  /// `border → border`, `separator → separator`, `default → surfaceNeutralSoft`
-  /// (hover/active fill + tabs track), and the selected-tab thumb to the
-  /// dedicated `segment` token.
+  /// `border → border`, `separator → separator`, and `default →
+  /// surfaceNeutralSoft` (hover/active fill). The segmented control is the
+  /// shared [KasyTabs] component, which owns its own selected-thumb token.
   factory _SidebarColors.fromContext(BuildContext context) {
     final c = context.colors;
     final bool dark = context.isDark;
@@ -83,8 +83,6 @@ class _SidebarColors {
       divider: c.border,
       // Hover / active item fill + tabs track + kbd chip (default/default).
       activeBg: c.surfaceNeutralSoft,
-      // Selected segment thumb (HeroUI `segment`): lifts off the track.
-      segmentThumb: c.segment,
       textMuted: c.muted,
       textActive: c.onSurface,
       logout: c.error,
@@ -96,7 +94,6 @@ class _SidebarColors {
   final Color border;
   final Color divider;
   final Color activeBg;
-  final Color segmentThumb;
   final Color textMuted;
   final Color textActive;
   final Color logout;
@@ -208,6 +205,7 @@ class KasySidebar extends StatefulWidget {
     this.onLogout,
     this.initiallyCollapsed = false,
     this.isDrawer = false,
+    this.showSearch = false,
     this.side = KasySidebarSide.left,
     this.routes,
     this.onTapItem,
@@ -260,6 +258,11 @@ class KasySidebar extends StatefulWidget {
   /// opening the sidebar from an app-bar menu button on a phone.
   final bool isDrawer;
 
+  /// Whether to pin a ⌘K search row above the footer in connected mode. Opt-in
+  /// (off by default) so the live app navigation stays lean; flip it on when the
+  /// sidebar should double as a command/search entry point.
+  final bool showSearch;
+
   /// The screen edge this sidebar is anchored to.
   final KasySidebarSide side;
 
@@ -577,6 +580,15 @@ class _KasySidebarState extends State<KasySidebar> {
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
+                if (widget.showSearch)
+                  _buildItemRow(
+                    c,
+                    icon: KasyIcons.search,
+                    label: 'Search',
+                    isActive: false,
+                    onTap: () {},
+                    trailing: [_buildKbd(c)],
+                  ),
                 _buildNavItem(context, _kHelpItem, c),
                 _buildItemRow(
                   c,
@@ -700,59 +712,15 @@ class _KasySidebarState extends State<KasySidebar> {
 
   // ── Segmented tabs (Layers / Assets) ────────────────────────────────────────
 
+  /// The showcase segment is the shared [KasyTabs] component (primary pill,
+  /// fill mode) so the sidebar demos the real design-system control rather than
+  /// a bespoke copy.
   Widget _buildTabs(_SidebarColors c) {
-    return Container(
-      width: double.infinity,
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-      decoration: BoxDecoration(
-        color: c.activeBg,
-        borderRadius: BorderRadius.circular(24),
-      ),
-      child: Row(
-        children: [
-          _buildTab(c, 'Layers', 0),
-          const SizedBox(width: 2),
-          _buildTab(c, 'Assets', 1),
-        ],
-      ),
-    );
-  }
-
-  Widget _buildTab(_SidebarColors c, String label, int index) {
-    final bool selected = _showcaseTab == index;
-    return Expanded(
-      child: MouseRegion(
-        cursor: SystemMouseCursors.click,
-        child: GestureDetector(
-          behavior: HitTestBehavior.opaque,
-          onTap: () => setState(() => _showcaseTab = index),
-          child: AnimatedContainer(
-            duration: const Duration(milliseconds: 180),
-            curve: Curves.easeOut,
-            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
-            alignment: Alignment.center,
-            decoration: BoxDecoration(
-              color: selected ? c.segmentThumb : Colors.transparent,
-              borderRadius: BorderRadius.circular(24),
-              boxShadow: selected
-                  ? const [
-                      BoxShadow(
-                        color: Color(0x0F000000),
-                        blurRadius: 8,
-                        offset: Offset(0, 2),
-                      ),
-                    ]
-                  : null,
-            ),
-            child: Text(
-              label,
-              style: context.kasyTextTheme.rowTitle.copyWith(
-                color: selected ? c.textActive : c.textMuted,
-              ),
-            ),
-          ),
-        ),
-      ),
+    return KasyTabs(
+      tabs: const ['Layers', 'Assets'],
+      selectedIndex: _showcaseTab,
+      onTabSelected: (index) => setState(() => _showcaseTab = index),
+      mode: KasyTabsMode.fill,
     );
   }
 

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

@@ -555,16 +555,24 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
         title: 'Sidebar',
         variants: [
           ComponentPreviewVariant(
-            label: 'Expanded',
-            builder: _buildSidebarExpanded,
+            label: 'App navigation',
+            builder: _buildSidebarAppNav,
           ),
           ComponentPreviewVariant(
-            label: 'Collapsed',
+            label: 'With search',
+            builder: _buildSidebarWithSearch,
+          ),
+          ComponentPreviewVariant(
+            label: 'Collapsed rail',
             builder: _buildSidebarCollapsed,
           ),
           ComponentPreviewVariant(
-            label: 'Without profile',
-            builder: _buildSidebarNoProfile,
+            label: 'Mobile drawer',
+            builder: _buildSidebarMobileDrawer,
+          ),
+          ComponentPreviewVariant(
+            label: 'Workspace showcase',
+            builder: _buildSidebarShowcase,
           ),
         ],
       );
@@ -621,63 +629,67 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
 // Sidebar — interactive preview
 // ─────────────────────────────────────────────────────────────────────────────
 
-Widget _buildSidebarExpanded(BuildContext context) =>
-    const _SidebarPreview(initiallyCollapsed: false);
+// The live Home configuration (real pages, highlight-only nav). The default
+// preview — what actually ships in the app.
+Widget _buildSidebarAppNav(BuildContext context) => const _SidebarPreview();
+
+// Same Home config plus the opt-in ⌘K search row pinned above the footer.
+Widget _buildSidebarWithSearch(BuildContext context) =>
+    const _SidebarPreview(showSearch: true);
 
+// Home config starting as the narrow icon rail (tooltips on hover).
 Widget _buildSidebarCollapsed(BuildContext context) =>
     const _SidebarPreview(initiallyCollapsed: true);
 
-Widget _buildSidebarNoProfile(BuildContext context) =>
-    const _SidebarPreview(initiallyCollapsed: false, showProfile: false);
+// The mobile pattern: always wide, collapse toggle hidden (isDrawer).
+Widget _buildSidebarMobileDrawer(BuildContext context) =>
+    const _SidebarPreview(isDrawer: true);
+
+// The rich SaaS showcase (workspace selector, KasyTabs segment, layers list).
+Widget _buildSidebarShowcase(BuildContext context) =>
+    const _SidebarPreview(showcase: true);
 
+/// Launches a [KasySidebar] as a full-height drawer (left + right buttons) so
+/// the full-bleed chrome can be inspected without crushing the preview card.
+/// Connected variants mirror the live Home; [showcase] swaps to the HeroUI
+/// workspace demo.
 class _SidebarPreview extends StatelessWidget {
   const _SidebarPreview({
-    required this.initiallyCollapsed,
-    this.showProfile = true,
+    this.showcase = false,
+    this.initiallyCollapsed = false,
+    this.isDrawer = false,
+    this.showSearch = false,
   });
 
+  final bool showcase;
   final bool initiallyCollapsed;
-  final bool showProfile;
-
-  void _open(BuildContext context, {required bool fromEnd}) {
-    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: KasySidebar(
-            initiallyCollapsed: initiallyCollapsed,
-            showProfile: showProfile,
-            side: fromEnd
-                ? KasySidebarSide.right
-                : KasySidebarSide.left,
-          ),
-        ),
-      ),
-      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,
-          ),
-        );
-      },
+  final bool isDrawer;
+  final bool showSearch;
+
+  Widget _sidebar({required bool fromEnd}) {
+    final KasySidebarSide side =
+        fromEnd ? KasySidebarSide.right : KasySidebarSide.left;
+    if (showcase) {
+      return KasySidebar(
+        initiallyCollapsed: initiallyCollapsed,
+        side: side,
+      );
+    }
+    return _DemoSidebar(
+      isDrawer: isDrawer,
+      initiallyCollapsed: initiallyCollapsed,
+      showSearch: showSearch,
+      side: side,
     );
   }
 
+  void _open(BuildContext context, {required bool fromEnd}) =>
+      _openSidebarDrawer(
+        context,
+        fromEnd: fromEnd,
+        child: _sidebar(fromEnd: fromEnd),
+      );
+
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -714,9 +726,17 @@ class _SidebarPreview extends StatelessWidget {
 /// 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});
+  const _DemoSidebar({
+    this.isDrawer = false,
+    this.initiallyCollapsed = false,
+    this.showSearch = false,
+    this.side = KasySidebarSide.left,
+  });
 
   final bool isDrawer;
+  final bool initiallyCollapsed;
+  final bool showSearch;
+  final KasySidebarSide side;
 
   @override
   State<_DemoSidebar> createState() => _DemoSidebarState();
@@ -763,6 +783,9 @@ class _DemoSidebarState extends State<_DemoSidebar> {
       currentItem: _current,
       onTapItem: (i) => _current.value = i, // highlight only
       isDrawer: widget.isDrawer,
+      initiallyCollapsed: widget.initiallyCollapsed,
+      showSearch: widget.showSearch,
+      side: widget.side,
     );
   }
 }