kasy-cli 1.34.0 → 1.36.0

package/templates/firebase/lib/features/authentication/ui/signin_page.dart

@@ -12,6 +12,7 @@ import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 import 'package:kasy_kit/core/widgets/kasy_pressable_depth.dart';
+import 'package:kasy_kit/environments.dart';
 import 'package:kasy_kit/features/authentication/providers/models/email.dart';
 import 'package:kasy_kit/features/authentication/providers/models/password.dart';
 import 'package:kasy_kit/features/authentication/providers/models/signin_state.dart';
@@ -152,6 +153,21 @@ class SigninPage extends ConsumerWidget {
                       const SocialSeparator(),
                       const SizedBox(height: KasySpacing.md),
                       const _SocialSigninRow(),
+                      // Guest path: only on native in anonymous mode (on web the
+                      // app requires sign-in), and only when there's no identity
+                      // yet (post-logout / first run). A user who is already an
+                      // anonymous guest opened sign-in to UPGRADE their account
+                      // (link email/social), so "continue without account" would
+                      // be nonsense for them — hide it.
+                      if (!kIsWeb &&
+                          user.idOrNull == null &&
+                          ref
+                                  .watch(environmentProvider)
+                                  .authenticationMode ==
+                              AuthenticationMode.anonymous) ...[
+                        const SizedBox(height: KasySpacing.md),
+                        const _GuestContinueButton(),
+                      ],
                   ],
                 ),
               ),
@@ -222,6 +238,49 @@ class _SignupPrompt extends StatelessWidget {
   }
 }
 
+/// "Continue as guest" — creates the anonymous account on demand and lets the
+/// router redirect carry the user into the app. Shown only on native in
+/// anonymous mode (see the build condition in [SigninPage]).
+class _GuestContinueButton extends ConsumerStatefulWidget {
+  const _GuestContinueButton();
+
+  @override
+  ConsumerState<_GuestContinueButton> createState() =>
+      _GuestContinueButtonState();
+}
+
+class _GuestContinueButtonState extends ConsumerState<_GuestContinueButton> {
+  bool _loading = false;
+
+  Future<void> _continue() async {
+    setState(() => _loading = true);
+    try {
+      await ref.read(userStateNotifierProvider.notifier).continueAsGuest();
+      // Success: the router redirect navigates to home reactively — nothing
+      // else to do here. The widget is disposed as we leave the page.
+    } catch (_) {
+      if (!mounted) return;
+      setState(() => _loading = false);
+      showKasyToast(
+        context,
+        title: t.auth.signin.error_title,
+        tone: KasyToastTone.danger,
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return KasyButton(
+      label: t.auth.signin.continue_without,
+      variant: KasyButtonVariant.tertiary,
+      expand: true,
+      isLoading: _loading,
+      onPressed: _loading ? null : _continue,
+    );
+  }
+}
+
 class _SocialSigninRow extends ConsumerWidget {
   const _SocialSigninRow();
 

package/templates/firebase/lib/features/authentication/ui/widgets/auth_card_scaffold.dart

@@ -79,8 +79,8 @@ class AuthCardScaffold extends StatelessWidget {
               Text(
                 title,
                 textAlign: TextAlign.center,
-                style: context.textTheme.headlineSmall?.copyWith(
-                  fontWeight: FontWeight.w700,
+                style: context.kasyTextTheme.pageTitle.copyWith(
+                  color: context.colors.onSurface,
                 ),
               ),
               const SizedBox(height: KasySpacing.xs),

package/templates/firebase/lib/features/authentication/ui/widgets/recover_password_result.dart

@@ -42,8 +42,8 @@ class RecoverPasswordSent extends StatelessWidget {
                 Text(
                   t.recover_password_result.title,
                   textAlign: TextAlign.center,
-                  style: context.textTheme.headlineSmall?.copyWith(
-                    fontWeight: FontWeight.w700,
+                  style: context.kasyTextTheme.pageTitle.copyWith(
+                    color: context.colors.onSurface,
                   ),
                 ),
                 const SizedBox(height: KasySpacing.smd),

package/templates/firebase/lib/features/feedbacks/ui/widgets/add_feature_button.dart

@@ -40,7 +40,6 @@ class AddFeatureButton extends StatelessWidget {
                   Text(
                     title,
                     style: context.textTheme.titleMedium?.copyWith(
-                      fontWeight: FontWeight.w600,
                       color: context.colors.onPrimary,
                     ),
                   ),

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

@@ -1,8 +1,12 @@
 import 'dart:ui' show ImageFilter;
 
 import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
 import 'package:kasy_kit/components/kasy_app_bar.dart';
+import 'package:kasy_kit/components/kasy_tabs.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/theme/type_scale.dart';
+import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 
 class DesignSystemPage extends StatelessWidget {
   const DesignSystemPage({super.key});
@@ -576,12 +580,10 @@ class _VariantList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final KasyColors light = KasyColors.light();
-    final KasyColors dark = KasyColors.dark();
     return _TokenCard(
       children: [
         for (int i = 0; i < variants.length; i++) ...[
-          _VariantRow(variant: variants[i], light: light, dark: dark),
+          _VariantRow(variant: variants[i]),
           if (i < variants.length - 1) const _TokenDivider(),
         ],
       ],
@@ -591,18 +593,14 @@ class _VariantList extends StatelessWidget {
 
 class _VariantRow extends StatelessWidget {
   final _Variant variant;
-  final KasyColors light;
-  final KasyColors dark;
-  const _VariantRow({
-    required this.variant,
-    required this.light,
-    required this.dark,
-  });
+  const _VariantRow({required this.variant});
 
   @override
   Widget build(BuildContext context) {
-    final Color lightColor = variant.pick(light);
-    final Color darkColor = variant.pick(dark);
+    // Single swatch resolved against the CURRENT theme. The Design System app
+    // bar already toggles light/dark, so each row shows the token in the active
+    // theme instead of doubling it up with a light + dark chip on a surface.
+    final Color color = variant.pick(context.colors);
     return Padding(
       padding: const EdgeInsets.symmetric(
         horizontal: KasySpacing.md,
@@ -610,9 +608,7 @@ class _VariantRow extends StatelessWidget {
       ),
       child: Row(
         children: [
-          _ThemeChip(surface: light.surface, token: lightColor, border: variant.border),
-          const SizedBox(width: KasySpacing.xs),
-          _ThemeChip(surface: dark.surface, token: darkColor, border: variant.border),
+          _Swatch(color: color, border: variant.border),
           const SizedBox(width: KasySpacing.smd),
           Expanded(
             child: Column(
@@ -626,7 +622,7 @@ class _VariantRow extends StatelessWidget {
                 ),
                 const SizedBox(height: 2),
                 Text(
-                  '${_hexOf(lightColor)}  ·  ${_hexOf(darkColor)}',
+                  _hexOf(color),
                   style: context.textTheme.bodySmall?.copyWith(
                     color: context.colors.muted,
                     fontFeatures: const [FontFeature.tabularFigures()],
@@ -641,34 +637,24 @@ class _VariantRow extends StatelessWidget {
   }
 }
 
-class _ThemeChip extends StatelessWidget {
-  final Color surface;
-  final Color token;
+class _Swatch extends StatelessWidget {
+  final Color color;
+
+  /// Force a stronger hairline (near-surface / transparent tones); a subtle
+  /// hairline is always drawn so every swatch reads cleanly against the card.
   final bool border;
-  const _ThemeChip({
-    required this.surface,
-    required this.token,
-    this.border = false,
-  });
+  const _Swatch({required this.color, this.border = false});
 
   @override
   Widget build(BuildContext context) {
     return Container(
       width: 28,
       height: 28,
-      padding: const EdgeInsets.all(3),
       decoration: BoxDecoration(
-        color: surface,
+        color: color,
         borderRadius: BorderRadius.circular(KasyRadius.xs),
-        border: Border.all(color: context.colors.outline.withValues(alpha: 0.5)),
-      ),
-      child: DecoratedBox(
-        decoration: BoxDecoration(
-          color: token,
-          borderRadius: BorderRadius.circular(KasyRadius.xs - 1),
-          border: border
-              ? Border.all(color: context.colors.outline.withValues(alpha: 0.5))
-              : null,
+        border: Border.all(
+          color: context.colors.outline.withValues(alpha: border ? 0.5 : 0.28),
         ),
       ),
     );
@@ -679,48 +665,98 @@ class _ThemeChip extends StatelessWidget {
 // Typography
 // ---------------------------------------------------------------------------
 
-class _TypographySection extends StatelessWidget {
+/// One breakpoint shown by the typography preview: its label, the [DeviceType]
+/// it maps to, and a short range caption.
+class _Breakpoint {
+  final String label;
+  final DeviceType device;
+  final String range;
+  const _Breakpoint(this.label, this.device, this.range);
+}
+
+const List<_Breakpoint> _breakpoints = [
+  _Breakpoint('Mobile', DeviceType.small, '< 768px'),
+  _Breakpoint('Tablet', DeviceType.medium, '768 - 1024px'),
+  _Breakpoint('Desktop', DeviceType.large, '>= 1024px'),
+];
+
+class _TypographySection extends StatefulWidget {
   const _TypographySection();
 
+  @override
+  State<_TypographySection> createState() => _TypographySectionState();
+}
+
+class _TypographySectionState extends State<_TypographySection> {
+  /// Selected breakpoint tab. Null until the first build, where it defaults to
+  /// the device currently viewing the screen; a tap pins it from then on.
+  int? _index;
+
+  static const List<_TypeRole> _roles = [
+    _TypeRole('Heading 1', KasyTypeScale.heading1, FontWeight.w800, 'ExtraBold'),
+    _TypeRole('Heading 2', KasyTypeScale.heading2, FontWeight.w700, 'Bold'),
+    _TypeRole('Heading 3', KasyTypeScale.heading3, FontWeight.w600, 'SemiBold'),
+    _TypeRole('Heading 4', KasyTypeScale.heading4, FontWeight.w600, 'SemiBold'),
+    _TypeRole('Body base', KasyTypeScale.bodyBase, FontWeight.w400, 'Regular'),
+    _TypeRole('Body base medium', KasyTypeScale.bodyBase, FontWeight.w500, 'Medium'),
+    _TypeRole('Body sm', KasyTypeScale.bodySm, FontWeight.w400, 'Regular'),
+    _TypeRole('Body sm medium', KasyTypeScale.bodySm, FontWeight.w500, 'Medium'),
+    _TypeRole('Body xs', KasyTypeScale.bodyXs, FontWeight.w400, 'Regular'),
+    _TypeRole('Body xs medium', KasyTypeScale.bodyXs, FontWeight.w500, 'Medium'),
+    _TypeRole('Link base', KasyTypeScale.bodyBase, FontWeight.w500, 'Medium · Underlined', underline: true),
+    _TypeRole('Link sm', KasyTypeScale.bodySm, FontWeight.w500, 'Medium · Underlined', underline: true),
+    _TypeRole('Text field base', KasyTypeScale.bodyBase, FontWeight.w400, 'Regular'),
+    _TypeRole('Text field sm', KasyTypeScale.bodySm, FontWeight.w400, 'Regular'),
+    _TypeRole('Button base', KasyTypeScale.bodyBase, FontWeight.w500, 'Medium'),
+    _TypeRole('Button sm', KasyTypeScale.bodySm, FontWeight.w500, 'Medium'),
+  ];
+
+  int _defaultIndexFor(double width) => switch (DeviceType.fromWidth(width)) {
+        DeviceType.small => 0,
+        DeviceType.medium => 1,
+        DeviceType.large || DeviceType.xlarge => 2,
+      };
+
   @override
   Widget build(BuildContext context) {
     final Color fg = context.colors.onSurface;
-    final List<_TypeRole> roles = [
-      _TypeRole('Heading 1', KasyTextTheme.heading1, 'ExtraBold · 36/40'),
-      _TypeRole('Heading 2', KasyTextTheme.heading2, 'Bold · 24/32'),
-      _TypeRole('Heading 3', KasyTextTheme.heading3, 'SemiBold · 20/28'),
-      _TypeRole('Heading 4', KasyTextTheme.heading4, 'SemiBold · 16/24'),
-      _TypeRole('Body base', KasyTextTheme.bodyBase, 'Regular · 16/24'),
-      _TypeRole('Body base medium', KasyTextTheme.bodyBaseMedium, 'Medium · 16/24'),
-      _TypeRole('Body sm', KasyTextTheme.bodySm, 'Regular · 14/20'),
-      _TypeRole('Body sm medium', KasyTextTheme.bodySmMedium, 'Medium · 14/20'),
-      _TypeRole('Body xs', KasyTextTheme.bodyXs, 'Regular · 12/16'),
-      _TypeRole('Body xs medium', KasyTextTheme.bodyXsMedium, 'Medium · 12/16'),
-      _TypeRole('Link base', KasyTextTheme.linkBase, 'Medium · 16/24 · Underlined'),
-      _TypeRole('Link sm', KasyTextTheme.linkSm, 'Medium · 14/20 · Underlined'),
-      _TypeRole('Text field base', KasyTextTheme.textFieldBase, 'Regular · 16/24'),
-      _TypeRole('Text field sm', KasyTextTheme.textFieldSm, 'Regular · 14/20'),
-      _TypeRole('Button base', KasyTextTheme.buttonBase, 'Medium · 16/24'),
-      _TypeRole('Button sm', KasyTextTheme.buttonSm, 'Medium · 14/20'),
-    ];
+    final double width = MediaQuery.sizeOf(context).width;
+    final int index = _index ?? _defaultIndexFor(width);
+    final _Breakpoint bp = _breakpoints[index];
 
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
         Text(
-          "Based on Tailwind's scale: Inter, neutral tracking and predictable "
-          'rhythm. Functional and scalable rather than decorative.',
+          'Inter, neutral tracking, predictable rhythm. Each role has an '
+          'explicit size per breakpoint: headings step down from desktop to '
+          'mobile, while body and labels stay constant for stable reading.',
           style: context.textTheme.bodyMedium?.copyWith(
             color: context.colors.muted,
             height: 1.5,
           ),
         ),
         const SizedBox(height: KasySpacing.md),
+        KasyTabs(
+          tabs: [for (final b in _breakpoints) b.label],
+          selectedIndex: index,
+          mode: KasyTabsMode.fill,
+          onTabSelected: (i) => setState(() => _index = i),
+        ),
+        const SizedBox(height: KasySpacing.sm),
+        Text(
+          '${bp.label} · ${bp.range}',
+          style: context.textTheme.bodySmall?.copyWith(
+            color: context.colors.muted,
+            fontFeatures: const [FontFeature.tabularFigures()],
+          ),
+        ),
+        const SizedBox(height: KasySpacing.md),
         _TokenCard(
           children: [
-            for (int i = 0; i < roles.length; i++) ...[
-              _TypeRow(role: roles[i], foreground: fg),
-              if (i < roles.length - 1) const _TokenDivider(),
+            for (int i = 0; i < _roles.length; i++) ...[
+              _TypeRow(role: _roles[i], foreground: fg, device: bp.device),
+              if (i < _roles.length - 1) const _TokenDivider(),
             ],
           ],
         ),
@@ -729,20 +765,45 @@ class _TypographySection extends StatelessWidget {
   }
 }
 
+/// Formats a size: integers stay integer (16), fractions show one decimal (17.0).
+String _fmt(double v) =>
+    v == v.roundToDouble() ? v.toInt().toString() : v.toStringAsFixed(1);
+
 class _TypeRole {
   final String name;
-  final TextStyle style;
-  final String spec;
-  const _TypeRole(this.name, this.style, this.spec);
+  final RampSize ramp;
+  final FontWeight weight;
+
+  /// Human-readable weight (and decoration) description for the spec line.
+  final String label;
+  final bool underline;
+  const _TypeRole(
+    this.name,
+    this.ramp,
+    this.weight,
+    this.label, {
+    this.underline = false,
+  });
 }
 
 class _TypeRow extends StatelessWidget {
   final _TypeRole role;
   final Color foreground;
-  const _TypeRow({required this.role, required this.foreground});
+
+  /// The breakpoint whose size this row previews.
+  final DeviceType device;
+
+  const _TypeRow({
+    required this.role,
+    required this.foreground,
+    required this.device,
+  });
 
   @override
   Widget build(BuildContext context) {
+    final double size = role.ramp.size(device);
+    final double line = role.ramp.lineHeight(device);
+
     return Padding(
       padding: const EdgeInsets.symmetric(
         horizontal: KasySpacing.md,
@@ -753,13 +814,20 @@ class _TypeRow extends StatelessWidget {
         children: [
           Text(
             role.name,
-            style: role.style.copyWith(color: foreground),
+            style: GoogleFonts.inter(
+              fontSize: size,
+              fontWeight: role.weight,
+              height: role.ramp.lineHeightRatio,
+              letterSpacing: 0,
+              color: foreground,
+              decoration: role.underline ? TextDecoration.underline : null,
+            ),
             maxLines: 1,
             overflow: TextOverflow.ellipsis,
           ),
           const SizedBox(height: 4),
           Text(
-            'Inter · ${role.spec}',
+            'Inter · ${role.label} · ${_fmt(size)}/${_fmt(line)}',
             style: context.textTheme.bodySmall?.copyWith(
               color: context.colors.muted,
               fontFeatures: const [FontFeature.tabularFigures()],
@@ -1054,9 +1122,8 @@ class _EffectGroupLabel extends StatelessWidget {
   Widget build(BuildContext context) {
     return Text(
       label,
-      style: context.textTheme.titleSmall?.copyWith(
+      style: context.kasyTextTheme.sectionTitle.copyWith(
         color: context.colors.onSurface,
-        fontWeight: FontWeight.w700,
       ),
     );
   }

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

@@ -94,9 +94,10 @@ class HomeComponentsPage extends StatelessWidget {
                                             // Lighter weight (w500) to match the
                                             // app's row/list scale instead of the
                                             // heavier heading weight.
-                                            style: context.textTheme.titleMedium
-                                                ?.copyWith(
-                                              fontWeight: FontWeight.w500,
+                                            style: context.kasyTextTheme.rowTitle
+                                                .copyWith(
+                                              color:
+                                                  context.colors.onSurface,
                                             ),
                                           ),
                                         ),

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

@@ -142,9 +142,7 @@ class _HomeComponentsPreviewPageState extends State<HomeComponentsPreviewPage>
   Widget _buildFooterVariantTitle(BuildContext context) {
     final Color labelBase = context.colors.onBackground;
     final TextStyle baseStyle =
-        context.textTheme.bodyMedium?.copyWith(
-          fontWeight: FontWeight.w600,
-          fontSize: 17,
+        context.textTheme.titleMedium?.copyWith(
           letterSpacing: 0.1,
         ) ??
         const TextStyle(