kasy-cli 1.19.3 → 1.20.1

package/templates/firebase/lib/features/settings/settings_page.dart

@@ -429,171 +429,52 @@ class HapticFeedbackSwitcher extends ConsumerWidget {
 class ThemeSwitcher extends StatelessWidget {
   const ThemeSwitcher({super.key});
 
-  IconData _iconFor(ThemeMode mode) {
-    switch (mode) {
-      case ThemeMode.system:
-        return KasyIcons.phoneAndroid;
-      case ThemeMode.dark:
-        return KasyIcons.darkMode;
-      case ThemeMode.light:
-        return KasyIcons.lightMode;
-    }
-  }
+  // Tab order mirrors the trailing pill: system, light, dark.
+  static const List<ThemeMode> _modes = <ThemeMode>[
+    ThemeMode.system,
+    ThemeMode.light,
+    ThemeMode.dark,
+  ];
 
   @override
   Widget build(BuildContext context) {
     final tr = context.t.settings;
     final theme = ThemeProvider.of(context);
-    final options = <({ThemeMode mode, IconData icon, String label})>[
-      (
-        mode: ThemeMode.system,
-        icon: KasyIcons.phoneAndroid,
-        label: tr.theme_option_system,
+    final items = <KasyTabItem>[
+      KasyTabItem(
+        icon: KasyIcons.monitor,
+        semanticLabel: tr.theme_option_system,
       ),
-      (
-        mode: ThemeMode.light,
+      KasyTabItem(
         icon: KasyIcons.lightMode,
-        label: tr.theme_option_light,
+        semanticLabel: tr.theme_option_light,
       ),
-      (
-        mode: ThemeMode.dark,
+      KasyTabItem(
         icon: KasyIcons.darkMode,
-        label: tr.theme_option_dark,
+        semanticLabel: tr.theme_option_dark,
       ),
     ];
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          Row(
-            children: [
-              Icon(
-                _iconFor(theme.mode),
-                size: 21,
-                color: context.colors.onSurface,
-              ),
-              const SizedBox(width: KasySpacing.sm),
-              Expanded(
-                child: Text(
-                  tr.theme_title,
-                  style: context.textTheme.titleMedium?.copyWith(
-                    color: context.colors.onSurface,
-                  ),
-                ),
-              ),
-            ],
-          ),
-          const SizedBox(height: KasySpacing.sm),
-          _ThemeModeSegmented(
-            current: theme.mode,
-            options: options,
-            onChanged: theme.setMode,
-          ),
-        ],
-      ),
-    );
-  }
-}
-
-class _ThemeModeSegmented extends StatelessWidget {
-  const _ThemeModeSegmented({
-    required this.current,
-    required this.options,
-    required this.onChanged,
-  });
-
-  final ThemeMode current;
-  final List<({ThemeMode mode, IconData icon, String label})> options;
-  final ValueChanged<ThemeMode> onChanged;
-
-  @override
-  Widget build(BuildContext context) {
-    final trackColor = context.colors.onSurface.withValues(alpha: 0.06);
-    return Container(
-      padding: const EdgeInsets.all(3),
-      decoration: BoxDecoration(
-        color: trackColor,
-        borderRadius: BorderRadius.circular(10),
-      ),
       child: Row(
         children: [
-          for (final opt in options)
-            Expanded(
-              child: _ThemeModeSegment(
-                icon: opt.icon,
-                label: opt.label,
-                selected: current == opt.mode,
-                onTap: () => onChanged(opt.mode),
+          Icon(KasyIcons.palette, size: 21, color: context.colors.onSurface),
+          const SizedBox(width: KasySpacing.sm),
+          Expanded(
+            child: Text(
+              tr.theme_title,
+              style: context.textTheme.titleMedium?.copyWith(
+                color: context.colors.onSurface,
               ),
             ),
-        ],
-      ),
-    );
-  }
-}
-
-class _ThemeModeSegment extends StatelessWidget {
-  const _ThemeModeSegment({
-    required this.icon,
-    required this.label,
-    required this.selected,
-    required this.onTap,
-  });
-
-  final IconData icon;
-  final String label;
-  final bool selected;
-  final VoidCallback onTap;
-
-  @override
-  Widget build(BuildContext context) {
-    final selectedBg = context.colors.surface;
-    final selectedFg = context.colors.onSurface;
-    final unselectedFg = context.colors.muted;
-    return Semantics(
-      button: true,
-      selected: selected,
-      label: label,
-      child: GestureDetector(
-        onTap: onTap,
-        behavior: HitTestBehavior.opaque,
-        child: AnimatedContainer(
-          duration: const Duration(milliseconds: 160),
-          curve: Curves.easeOut,
-          padding: const EdgeInsets.symmetric(vertical: 8),
-          decoration: BoxDecoration(
-            color: selected ? selectedBg : Colors.transparent,
-            borderRadius: BorderRadius.circular(8),
-            boxShadow: selected
-                ? [
-                    BoxShadow(
-                      color: Colors.black.withValues(alpha: 0.06),
-                      blurRadius: 4,
-                      offset: const Offset(0, 1),
-                    ),
-                  ]
-                : const [],
           ),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              Icon(
-                icon,
-                size: 18,
-                color: selected ? selectedFg : unselectedFg,
-              ),
-              const SizedBox(height: 2),
-              Text(
-                label,
-                style: context.textTheme.labelSmall?.copyWith(
-                  color: selected ? selectedFg : unselectedFg,
-                  fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
-                ),
-              ),
-            ],
+          const SizedBox(width: KasySpacing.sm),
+          KasyTabs.items(
+            items: items,
+            selectedIndex: _modes.indexOf(theme.mode),
+            onTabSelected: (i) => theme.setMode(_modes[i]),
           ),
-        ),
+        ],
       ),
     );
   }

package/templates/firebase/lib/features/settings/ui/components/admin/admin_bottom_sheet.dart

@@ -75,16 +75,26 @@ class _AdminSheet extends ConsumerWidget {
                     child: Wrap(
                       children: [
                         ValueListenableBuilder<bool>(
-                          valueListenable: devInspectorFabEnabledNotifier,
+                          valueListenable: devInspectorEnabledNotifier,
                           builder: (context, enabled, _) {
                             return SettingsSwitchTile(
                               icon: KasyIcons.widgets,
                               title: t.settings.admin.inspector_fab_title,
+                              subtitle:
+                                  '${t.settings.admin.inspector_fab_subtitle_prefix} '
+                                  '${devInspectorShortcutLabel()}',
                               value: enabled,
                               onChanged: (v) async {
                                 final p = await SharedPreferences.getInstance();
-                                await p.setBool(devInspectorFabEnabledPrefKey, v);
-                                devInspectorFabEnabledNotifier.value = v;
+                                await p.setBool(devInspectorEnabledPrefKey, v);
+                                devInspectorEnabledNotifier.value = v;
+                                // Turning the inspector ON closes the admin
+                                // sheet automatically — otherwise the sheet
+                                // would absorb taps and the user would be
+                                // stuck. Turning OFF leaves the sheet open.
+                                if (v && context.mounted) {
+                                  Navigator.of(context).maybePop();
+                                }
                               },
                             );
                           },
@@ -97,6 +107,9 @@ class _AdminSheet extends ConsumerWidget {
                               return SettingsSwitchTile(
                                 icon: KasyIcons.phoneAndroid,
                                 title: t.settings.admin.device_preview_title,
+                                subtitle:
+                                    '${t.settings.admin.inspector_fab_subtitle_prefix} '
+                                    '${webDevicePreviewShortcutLabel()}',
                                 value: enabled,
                                 onChanged: (v) async {
                                   final navigator = Navigator.of(

package/templates/firebase/lib/features/settings/ui/widgets/settings_tile.dart

@@ -77,11 +77,13 @@ class SettingsSwitchTile extends StatelessWidget {
     required this.title,
     required this.value,
     required this.onChanged,
+    this.subtitle,
     this.iconBackgroundColor,
   });
 
   final IconData icon;
   final String title;
+  final String? subtitle;
   final bool value;
   final ValueChanged<bool> onChanged;
   final Color? iconBackgroundColor;
@@ -98,11 +100,26 @@ class SettingsSwitchTile extends StatelessWidget {
             Icon(icon, size: 21, color: context.colors.onSurface),
           const SizedBox(width: KasySpacing.sm),
           Expanded(
-            child: Text(
-              title,
-              style: context.textTheme.titleMedium?.copyWith(
-                color: context.colors.onSurface,
-              ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              children: <Widget>[
+                Text(
+                  title,
+                  style: context.textTheme.titleMedium?.copyWith(
+                    color: context.colors.onSurface,
+                  ),
+                ),
+                if (subtitle != null && subtitle!.isNotEmpty) ...[
+                  const SizedBox(height: 2),
+                  Text(
+                    subtitle!,
+                    style: context.textTheme.bodySmall?.copyWith(
+                      color: context.colors.onSurface.withValues(alpha: 0.55),
+                    ),
+                  ),
+                ],
+              ],
             ),
           ),
           Transform.scale(

package/templates/firebase/lib/i18n/en.i18n.json

@@ -400,6 +400,7 @@
             "home_widgets_panel": "Home Widgets panel",
             "home_widgets_title": "Home Widgets Panel",
             "inspector_fab_title": "Widget inspector",
+            "inspector_fab_subtitle_prefix": "Global shortcut:",
             "update_mywidget_title": "📱 Update MyWidget Widget",
             "update_mywidget_desc": "Call manual update for MyWidget widget",
             "paywalls_title": "Paywalls Admin Panel",
@@ -494,7 +495,8 @@
         "deactivate": "Deactivate widget inspector",
         "copyForAi": "Copy for AI",
         "selectWidgetFirst": "Select a widget on screen first, then tap Copy.",
-        "inspectorHint": "Tap the UI to select a widget (purple outline). Then copy for your AI prompt."
+        "inspectorHint": "Tap the UI to select a widget (purple outline). Then copy for your AI prompt.",
+        "statusActive": "Inspecting"
     },
     "webDevicePreview": {
         "frame": "Frame",

package/templates/firebase/lib/i18n/es.i18n.json

@@ -400,6 +400,7 @@
             "home_widgets_panel": "Panel de Home Widgets",
             "home_widgets_title": "Panel de Home Widgets",
             "inspector_fab_title": "Inspector de widgets",
+            "inspector_fab_subtitle_prefix": "Atajo global:",
             "update_mywidget_title": "📱 Actualizar Widget MyWidget",
             "update_mywidget_desc": "Llamar a la actualización manual para el widget MyWidget",
             "paywalls_title": "Panel de Admin de Paywalls",
@@ -494,7 +495,8 @@
         "deactivate": "Desactivar inspector de widgets",
         "copyForAi": "Copiar para IA",
         "selectWidgetFirst": "Selecciona un widget en pantalla primero y luego toca Copiar.",
-        "inspectorHint": "Toca la interfaz para seleccionar (borde morado). Luego copia para tu prompt de IA."
+        "inspectorHint": "Toca la interfaz para seleccionar (borde morado). Luego copia para tu prompt de IA.",
+        "statusActive": "Inspeccionando"
     },
     "webDevicePreview": {
         "frame": "Frame",

package/templates/firebase/lib/i18n/pt.i18n.json

@@ -400,6 +400,7 @@
             "home_widgets_panel": "Painel de Home Widgets",
             "home_widgets_title": "Painel de Home Widgets",
             "inspector_fab_title": "Inspector de widgets",
+            "inspector_fab_subtitle_prefix": "Atalho global:",
             "update_mywidget_title": "📱 Atualizar Widget MyWidget",
             "update_mywidget_desc": "Chamar atualização manual para o widget MyWidget",
             "paywalls_title": "Painel Admin de Paywalls",
@@ -494,7 +495,8 @@
         "deactivate": "Desativar inspetor de widgets",
         "copyForAi": "Copiar para IA",
         "selectWidgetFirst": "Selecione um widget na tela primeiro e depois toque em Copiar.",
-        "inspectorHint": "Toque na interface para selecionar (contorno roxo). Depois copie para usar na IA."
+        "inspectorHint": "Toque na interface para selecionar (contorno roxo). Depois copie para usar na IA.",
+        "statusActive": "Inspecionando"
     },
     "webDevicePreview": {
         "frame": "Frame",

package/templates/firebase/lib/router.dart

@@ -15,6 +15,11 @@ import 'package:kasy_kit/features/authentication/ui/recover_password_page.dart';
 import 'package:kasy_kit/features/authentication/ui/signin_page.dart';
 import 'package:kasy_kit/features/authentication/ui/signup_page.dart';
 import 'package:kasy_kit/features/feedbacks/ui/feedback_page.dart';
+import 'package:kasy_kit/features/home/design_system_page.dart';
+import 'package:kasy_kit/features/home/home_components_page.dart';
+import 'package:kasy_kit/features/home/home_components_preview_page.dart';
+import 'package:kasy_kit/features/home/home_components_preview_registry.dart';
+import 'package:kasy_kit/features/home/home_features_page.dart';
 import 'package:kasy_kit/features/llm_chat/llm_chat_page.dart';
 import 'package:kasy_kit/features/local_reminder/ui/reminder_page.dart';
 import 'package:kasy_kit/features/onboarding/ui/onboarding_page.dart';
@@ -73,6 +78,61 @@ GoRouter generateRouter({
           ),
         ),
       ),
+      // Home showcase detail screens. These are TOP-LEVEL routes (siblings of
+      // '/', not children of the BottomMenu shell), so go_router renders them on
+      // the root navigator: full-screen, above the bottom bar, URL-addressable.
+      // Returning pops back to the tab with its menu intact.
+      GoRoute(
+        name: 'features',
+        path: '/features',
+        pageBuilder: (context, state) => kasyTransitionPage(
+          key: state.pageKey,
+          child: const HomeFeaturesPage(),
+        ),
+      ),
+      GoRoute(
+        name: 'design_system',
+        path: '/design-system',
+        pageBuilder: (context, state) => kasyTransitionPage(
+          key: state.pageKey,
+          child: const DesignSystemPage(),
+        ),
+      ),
+      GoRoute(
+        name: 'components',
+        path: '/components',
+        pageBuilder: (context, state) => kasyTransitionPage(
+          key: state.pageKey,
+          child: const HomeComponentsPage(),
+        ),
+        routes: [
+          // /components/:name — a single component's preview, looked up from the
+          // registry so the URL alone restores the screen on web reload.
+          GoRoute(
+            name: 'component_preview',
+            path: ':name',
+            pageBuilder: (context, state) {
+              final ComponentPreviewDefinition? definition =
+                  getComponentPreviewDefinition(
+                state.pathParameters['name'] ?? '',
+              );
+              if (definition == null) {
+                return kasyTransitionPage(
+                  key: state.pageKey,
+                  child: const PageNotFound(),
+                );
+              }
+              return kasyTransitionPage(
+                key: state.pageKey,
+                child: HomeComponentsPreviewPage(
+                  title: definition.title,
+                  variants: definition.variants,
+                ),
+              );
+            },
+          ),
+        ],
+      ),
       GoRoute(
         name: 'onboarding',
         path: '/onboarding',

package/templates/firebase/pubspec.yaml

@@ -139,16 +139,18 @@ flutter_launcher_icons:
     background_color: "#01171f"
     theme_color: "#01171f"
 flutter_native_splash:
-  color: "#FFFFFF"
-  color_dark: "#000000"
+  # Match KasyColors.background (light / dark) so the splash → app transition
+  # has zero white/black flash on web, iOS and Android.
+  color: "#F7F7F7"
+  color_dark: "#060608"
   fullscreen: true
   ios: true
   android: true
   image: assets/images/splash_logo_light.png
   image_dark: assets/images/splash_logo_dark.png
   android_12:
-    color: "#FFFFFF"
-    color_dark: "#000000"
+    color: "#F7F7F7"
+    color_dark: "#060608"
     image: assets/images/splash_logo_light_android12.png
     image_dark: assets/images/splash_logo_dark_android12.png
 

package/templates/firebase/test/core/bottom_menu/detail_route_menu_test.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:go_router/go_router.dart';
+
+/// Regression test for the Features/Components navigation.
+///
+/// These detail screens are TOP-LEVEL go_router routes (siblings of the home
+/// shell, not children of it), so pushing them renders full-screen on the root
+/// navigator: the bottom bar is gone while the detail is open, and it returns
+/// intact when the user pops back to the tab.
+void main() {
+  testWidgets('a top-level route opens full-screen over the bottom bar, '
+      'and the bar returns on pop', (tester) async {
+    final router = GoRouter(
+      routes: [
+        // Home shell — owns the bottom bar (like BottomMenu).
+        GoRoute(
+          path: '/',
+          builder: (context, state) => Scaffold(
+            bottomNavigationBar: const Text('MENU'),
+            body: Center(
+              child: ElevatedButton(
+                onPressed: () => context.push('/features'),
+                child: const Text('open'),
+              ),
+            ),
+          ),
+        ),
+        // Detail screen — sibling of '/', so it renders on the root navigator.
+        GoRoute(
+          path: '/features',
+          builder: (context, state) => const Scaffold(
+            body: Center(child: Text('DETAIL')),
+          ),
+        ),
+      ],
+    );
+
+    await tester.pumpWidget(MaterialApp.router(routerConfig: router));
+
+    // Home tab: bottom bar visible, no detail.
+    expect(find.text('MENU'), findsOneWidget);
+    expect(find.text('DETAIL'), findsNothing);
+
+    // Open Features.
+    await tester.tap(find.text('open'));
+    await tester.pumpAndSettle();
+    expect(find.text('DETAIL'), findsOneWidget);
+    expect(find.text('MENU'), findsNothing); // covered — no bottom bar here
+
+    // Back: the bottom bar is intact.
+    Navigator.of(tester.element(find.text('DETAIL'))).maybePop();
+    await tester.pumpAndSettle();
+    expect(find.text('DETAIL'), findsNothing);
+    expect(find.text('MENU'), findsOneWidget);
+  });
+}

package/templates/firebase/web/index.html

@@ -46,24 +46,20 @@
   
   
   
+  
+  
   <style id="splash-screen-style">
     html {
-      height: 100%;
-      background-color: #FFFFFF;
-      color-scheme: light dark;
+      height: 100%
     }
 
     body {
       margin: 0;
       min-height: 100%;
-      background-color: #FFFFFF;
+      background-color: #F7F7F7;
           background-size: 100% 100%;
     }
 
-    flutter-view, flt-glass-pane, flt-scene-host {
-      background-color: #FFFFFF;
-    }
-
     .center {
       margin: 0;
       position: absolute;
@@ -111,23 +107,16 @@
     }
 
     @media (prefers-color-scheme: dark) {
-      html {
-        background-color: #000000;
-      }
       body {
-        background-color: #000000;
+        background-color: #060608;
           }
-      flutter-view, flt-glass-pane, flt-scene-host {
-        background-color: #000000;
-      }
     }
   </style>
   <script id="splash-screen-script">
     function removeSplashFromWeb() {
       document.getElementById("splash")?.remove();
       document.getElementById("splash-branding")?.remove();
-      const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      document.body.style.backgroundColor = isDark ? "#000000" : "#FFFFFF";
+      document.body.style.background = "transparent";
     }
   </script>
 </head>
@@ -145,6 +134,7 @@
   
   
   
+  
   <script src="flutter_bootstrap.js" async=""></script>
   <script src="./local_notifications.js"></script>