kasy-cli 1.37.1 → 1.39.0

package/templates/firebase/lib/features/onboarding/providers/onboarding_provider.dart

@@ -30,7 +30,25 @@ class OnboardingNotifier extends _$OnboardingNotifier {
     return OnboardingState();
   }
 
+  /// Enter/leave preview mode. Called once when [OnboardingPage] mounts: the
+  /// admin Debug "Test onboarding" entry sets `true`, the real flow sets
+  /// `false`, so the flag is always correct on every entry.
+  void setPreview(bool value) {
+    if (state.preview == value) return;
+    state = state.copyWith(preview: value);
+  }
+
   Future<void> onAnsweredQuestion(UserInfoDetail value) async {
+    // Preview: never touch the admin's real profile. Buffer the answer so the
+    // question screens still behave (selection persists across steps), but it's
+    // discarded with the provider state once the preview ends.
+    if (state.preview) {
+      final others = state.pendingUserInfo
+          .where((info) => info.runtimeType != value.runtimeType)
+          .toList();
+      state = state.copyWith(pendingUserInfo: [...others, value]);
+      return;
+    }
     final userId = ref.read(userStateNotifierProvider).user.idOrNull;
     if (userId != null) {
       // Account already exists (e.g. a returning guest re-onboarding): save now.
@@ -47,6 +65,10 @@ class OnboardingNotifier extends _$OnboardingNotifier {
   }
 
   Future<void> setupNotifications() async {
+    // Preview: don't fire the real OS permission dialog or log analytics — the
+    // permission screen is shown for review only.
+    if (state.preview) return;
+
     final userStateNotifier = ref.read(userStateNotifierProvider.notifier);
     final notificationsRepository = ref.read(notificationRepositoryProvider);
 
@@ -75,6 +97,10 @@ class OnboardingNotifier extends _$OnboardingNotifier {
   }
 
   Future<void> onOnboardingCompleted() async {
+    // Preview: this is the step that would create the anonymous guest account
+    // and flush profile writes. Do nothing — the preview just returns to Debug.
+    if (state.preview) return;
+
     final userStateNotifier = ref.read(userStateNotifierProvider.notifier);
 
     // This is the "preparing everything for you" moment (the loader screen):
@@ -106,6 +132,8 @@ class OnboardingNotifier extends _$OnboardingNotifier {
   /// Skip onboarding: mark as onboarded instantly (optimistic) and navigate
   /// to home. Permissions (push + ATT) are requested on the home screen.
   void skipOnboarding() {
+    // Preview: skipping must not mark the real user as onboarded.
+    if (state.preview) return;
     ref.read(userStateNotifierProvider.notifier).onSkippedOnboarding();
   }
 }

package/templates/firebase/lib/features/onboarding/ui/onboarding_page.dart

@@ -9,22 +9,55 @@ import 'package:kasy_kit/features/onboarding/ui/components/onboarding_features.d
 import 'package:kasy_kit/features/onboarding/ui/components/onboarding_loader.dart';
 import 'package:kasy_kit/features/onboarding/ui/components/onboarding_notifications_setup.dart';
 import 'package:kasy_kit/features/onboarding/ui/components/onboarding_questions.dart';
+import 'package:kasy_kit/features/settings/ui/components/admin/admin_routes.dart';
 import 'package:kasy_kit/features/subscriptions/ui/premium_page.dart';
 import 'package:kasy_kit/router.dart';
 
 
-class OnboardingPage extends ConsumerWidget {
-  const OnboardingPage({super.key});
+class OnboardingPage extends ConsumerStatefulWidget {
+  /// Preview mode: the flow is opened from the admin Debug screen just to walk
+  /// the screens. Real side effects are suppressed (see [OnboardingNotifier])
+  /// and the flow returns to Debug instead of Home/paywall.
+  final bool preview;
+
+  const OnboardingPage({super.key, this.preview = false});
+
+  @override
+  ConsumerState<OnboardingPage> createState() => _OnboardingPageState();
+}
+
+class _OnboardingPageState extends ConsumerState<OnboardingPage> {
+  @override
+  void initState() {
+    super.initState();
+    // Set the flag on every entry (true for the admin preview, false for the
+    // real flow) so the notifier's side-effect guards are always correct. The
+    // first screen has no side effects, so a post-frame write is safe.
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted) return;
+      ref.read(onboardingProvider.notifier).setPreview(widget.preview);
+    });
+  }
+
+  /// Where the flow lands when finished: back to the admin Debug screen in
+  /// preview, Home otherwise.
+  void _exit() => ref
+      .read(goRouterProvider)
+      .go(widget.preview ? adminRouteDebug : '/');
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  Widget build(BuildContext context) {
+    final bool preview = widget.preview;
     return Navigator(
       initialRoute: 'feature_1',
+      // No analytics in preview — walking the flow from Debug must not pollute
+      // real onboarding funnels.
       observers: [
-        AnalyticsObserver(
-          prefix: 'userOnboarding/',
-          analyticsApi: MixpanelAnalyticsApi.instance(),
-        ),
+        if (!preview)
+          AnalyticsObserver(
+            prefix: 'userOnboarding/',
+            analyticsApi: MixpanelAnalyticsApi.instance(),
+          ),
       ],
       onGenerateRoute: (settings) => switch (settings.name) {
         'feature_1' => OnboardingRouteTransition(
@@ -33,7 +66,11 @@ class OnboardingPage extends ConsumerWidget {
               onSkip: () => Navigator.of(context).pushReplacementNamed(
                 'skip_loader',
               ),
-              onLogin: () => ref.read(goRouterProvider).go('/signin'),
+              // In preview, leaving to the real sign-in screen would break the
+              // "everything just returns to Debug" contract, so go back instead.
+              onLogin: () => preview
+                  ? _exit()
+                  : ref.read(goRouterProvider).go('/signin'),
             ),
             settings: settings,
           ),
@@ -79,9 +116,11 @@ class OnboardingPage extends ConsumerWidget {
           ),
         'loader' => OnboardingRouteTransition(
             builder: (context) => OnboardingLoader(
-              onCompleted: () => Navigator.of(context).pushReplacementNamed(
-                'paywall',
-              ),
+              // Preview stops here (the paywall has its own admin preview) and
+              // returns to Debug; the real flow continues to the paywall.
+              onCompleted: () => preview
+                  ? _exit()
+                  : Navigator.of(context).pushReplacementNamed('paywall'),
             ),
             settings: settings,
           ),
@@ -89,7 +128,7 @@ class OnboardingPage extends ConsumerWidget {
             builder: (context) => OnboardingLoader(
               onCompleted: () {
                 ref.onboardingNotifier.skipOnboarding();
-                ref.read(goRouterProvider).go('/');
+                _exit();
               },
             ),
             settings: settings,

package/templates/firebase/lib/features/onboarding/ui/widgets/selectable_row_tile.dart

@@ -73,22 +73,10 @@ class _OnboardingSelectableRowGroupState
         return Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
-            KasyFocusRing(
-              onActivate: selectRow,
+            _SelectableTileInk(
+              onTap: selectRow,
               borderRadius: KasyRadius.lgBorderRadius,
-              child: Material(
-                color: Colors.transparent,
-                borderRadius: KasyRadius.lgBorderRadius,
-                child: InkWell(
-                  canRequestFocus: false,
-                  borderRadius: KasyRadius.lgBorderRadius,
-                  onTap: selectRow,
-                  child: switch (hasOnSelectInfo && _selectedIndex == index) {
-                    false => widget.options[index],
-                    true => widget.options[index],
-                  },
-                ),
-              ),
+              child: widget.options[index],
             ),
             if (hasOnSelectInfo && _selectedIndex == index)
               Padding(
@@ -150,23 +138,16 @@ class _OnboardingMultiSelectableRowGroupState
           setState(() {});
         }
 
-        return KasyFocusRing(
-          onActivate: toggleSelection,
-          borderRadius: KasyRadius.mdBorderRadius,
-          child: Material(
-            color: Colors.transparent,
-            borderRadius: KasyRadius.mdBorderRadius,
-            child: InkWell(
-              canRequestFocus: false,
-              splashColor: context.colors.primary.withValues(alpha: .1),
-              onTap: toggleSelection,
-              child: SelectableRowTile(
-                title: option.title,
-                subtitle: option.subtitle,
-                selected: _selectedIndex.contains(index),
-                emoj: option.emoj,
-              ),
-            ),
+        return _SelectableTileInk(
+          onTap: toggleSelection,
+          // Match the tile's own lgBorderRadius so the hover veil and focus ring
+          // hug its shape (the old InkWell clipped at md, a mismatch).
+          borderRadius: KasyRadius.lgBorderRadius,
+          child: SelectableRowTile(
+            title: option.title,
+            subtitle: option.subtitle,
+            selected: _selectedIndex.contains(index),
+            emoj: option.emoj,
           ),
         );
       }).toList(),
@@ -338,6 +319,83 @@ class _SelectableRowTileState extends State<SelectableRowTile>
   }
 }
 
+/// Adds a web hover highlight, a keyboard focus ring and a click cursor on top
+/// of an opaque selectable tile — no Material ripple.
+///
+/// Because the tile paints its own background, the hover veil is layered ABOVE
+/// the child (clipped to [borderRadius]), the same approach the tappable
+/// [KasyCard] uses; a [KasyHover]-style overlay would sit behind the opaque
+/// surface and never show. The child keeps its own semantics (the option title),
+/// so screen readers still announce the option, not a generic label.
+class _SelectableTileInk extends StatefulWidget {
+  const _SelectableTileInk({
+    required this.onTap,
+    required this.borderRadius,
+    required this.child,
+  });
+
+  final VoidCallback onTap;
+  final BorderRadius borderRadius;
+  final Widget child;
+
+  @override
+  State<_SelectableTileInk> createState() => _SelectableTileInkState();
+}
+
+class _SelectableTileInkState extends State<_SelectableTileInk> {
+  bool _hovered = false;
+  bool _pressed = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final bool dark = context.isDark;
+    // Subtle tint that fades in on hover (web/desktop) and deepens briefly on
+    // press; invisible at rest. On touch _hovered never becomes true.
+    final double alpha = _pressed
+        ? (dark ? 0.10 : 0.06)
+        : (_hovered ? (dark ? 0.06 : 0.04) : 0.0);
+
+    final Widget veiled = Stack(
+      children: <Widget>[
+        widget.child,
+        Positioned.fill(
+          child: IgnorePointer(
+            child: AnimatedContainer(
+              duration: const Duration(milliseconds: 120),
+              curve: Curves.easeOut,
+              decoration: BoxDecoration(
+                color: context.colors.onSurface.withValues(alpha: alpha),
+                borderRadius: widget.borderRadius,
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+
+    return KasyFocusRing(
+      onActivate: widget.onTap,
+      borderRadius: widget.borderRadius,
+      child: MouseRegion(
+        cursor: SystemMouseCursors.click,
+        onEnter: (_) => setState(() => _hovered = true),
+        onExit: (_) => setState(() {
+          _hovered = false;
+          _pressed = false;
+        }),
+        child: GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onTap: widget.onTap,
+          onTapDown: (_) => setState(() => _pressed = true),
+          onTapUp: (_) => setState(() => _pressed = false),
+          onTapCancel: () => setState(() => _pressed = false),
+          child: veiled,
+        ),
+      ),
+    );
+  }
+}
+
 class RoundRadioBox extends StatelessWidget {
   final Color bgColor;
   final Color borderColor;

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

@@ -152,6 +152,7 @@ class SettingsPage extends ConsumerWidget {
                       context,
                       ref,
                       isAuthenticated: isAuthenticated,
+                      hasAccount: userId != null,
                       isAdmin: user.isAdmin,
                       isPhone: isPhone,
                     ),
@@ -181,6 +182,7 @@ class SettingsPage extends ConsumerWidget {
     BuildContext context,
     WidgetRef ref, {
     required bool isAuthenticated,
+    required bool hasAccount,
     required bool isAdmin,
     required bool isPhone,
   }) {
@@ -214,7 +216,7 @@ class SettingsPage extends ConsumerWidget {
           padding: const EdgeInsets.only(left: KasySpacing.xs),
           child: Text(
             t.admin_console.settings_entry.caption,
-            style: context.textTheme.bodySmall?.copyWith(
+            style: context.textTheme.bodyMedium?.copyWith(
               color: context.colors.muted,
             ),
           ),
@@ -225,8 +227,13 @@ class SettingsPage extends ConsumerWidget {
         _settingsGroup([_LogoutRow(onTap: () => confirmLogout(context, ref))]),
         const SizedBox(height: KasySpacing.xl),
       ],
-      const DeleteUserButton(),
-      const SizedBox(height: KasySpacing.xl),
+      // Only offer account deletion when there's a real backend account behind
+      // it. A guest with no identity has nothing to delete, so the button would
+      // just dead-end in an error and trap them on this screen.
+      if (hasAccount) ...[
+        const DeleteUserButton(),
+        const SizedBox(height: KasySpacing.xl),
+      ],
       const _VersionLabel(),
     ];
   }
@@ -434,10 +441,9 @@ class SettingsContainer extends StatelessWidget {
   Widget build(BuildContext context) {
     return KasyCard(
       borderRadius: BorderRadius.circular(KasyRadius.lg),
-      padding: const EdgeInsets.symmetric(
-        horizontal: KasySpacing.md,
-        vertical: KasySpacing.xs,
-      ),
+      // No card padding: each row carries its own inset so the press/hover
+      // highlight spans the full card width (clipped to the rounded corners),
+      // instead of a pill floating inside a white margin.
       child: child,
     );
   }
@@ -459,7 +465,7 @@ class _FieldRow extends StatelessWidget {
       children: [
         Text(
           label,
-          style: context.textTheme.titleSmall?.copyWith(
+          style: context.kasyTextTheme.listRowTitle.copyWith(
             color: context.colors.onSurface,
           ),
         ),
@@ -470,7 +476,7 @@ class _FieldRow extends StatelessWidget {
             textAlign: TextAlign.right,
             maxLines: 1,
             overflow: TextOverflow.ellipsis,
-            style: context.textTheme.bodyMedium?.copyWith(
+            style: context.kasyTextTheme.listRowValue.copyWith(
               color: context.colors.muted,
             ),
           ),
@@ -483,18 +489,22 @@ class _FieldRow extends StatelessWidget {
     );
     if (onTap == null) {
       return Padding(
-        padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+        padding: const EdgeInsets.symmetric(
+          horizontal: KasySpacing.md,
+          vertical: KasySpacing.smd,
+        ),
         child: row,
       );
     }
     return KasyHover(
       onTap: onTap!,
-      hoverEnabled: false,
-      pressEnabled: false,
       focusable: true,
-      borderRadius: KasyRadius.smBorderRadius,
+      // Rectangular highlight (default): the card clips the rounded ends.
       semanticLabel: label,
-      padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.md,
+        vertical: KasySpacing.smd,
+      ),
       child: row,
     );
   }
@@ -511,7 +521,7 @@ class _AccountAvatarHeader extends StatelessWidget {
     return const Center(
       child: Padding(
         padding: EdgeInsets.only(top: KasySpacing.sm),
-        child: EditableUserAvatar(diameter: 64),
+        child: EditableUserAvatar(diameter: 80),
       ),
     );
   }
@@ -580,6 +590,8 @@ class _SettingsDesktopView extends ConsumerStatefulWidget {
 class _SettingsDesktopViewState extends ConsumerState<_SettingsDesktopView> {
   _DesktopSection _selected = _DesktopSection.account;
 
+  void _select(_DesktopSection s) => setState(() => _selected = s);
+
   List<_DesktopSection> get _sections => <_DesktopSection>[
         _DesktopSection.account,
         _DesktopSection.preferences,
@@ -593,47 +605,58 @@ class _SettingsDesktopViewState extends ConsumerState<_SettingsDesktopView> {
     final List<_DesktopSection> sections = _sections;
     if (!sections.contains(_selected)) _selected = sections.first;
 
+    final Widget pane = _DesktopDetail(
+      section: _selected,
+      userId: widget.userId,
+      name: widget.name,
+      editableName: widget.editableName,
+      email: widget.email,
+      isAuthenticated: widget.isAuthenticated,
+      isPhone: widget.isPhone,
+    );
+
+    const double navWidth = 220;
+    const double gap = KasySpacing.xl;
+    const double detailWidth = 560;
+    const double groupWidth = navWidth + gap + detailWidth;
+
     return Center(
-      child: ConstrainedBox(
-        constraints: const BoxConstraints(maxWidth: 1080),
-        child: Padding(
-          padding: const EdgeInsets.only(
-            top: KasySpacing.lg,
-            bottom: KasySpacing.xxl,
-          ),
-          child: Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              SizedBox(
-                width: 248,
-                child: _DesktopNav(
-                  sections: sections,
-                  selected: _selected,
-                  name: widget.name,
-                  email: widget.email,
-                  onSelect: (s) => setState(() => _selected = s),
-                ),
-              ),
-              const SizedBox(width: KasySpacing.xxl),
-              Expanded(
-                child: Align(
-                  alignment: Alignment.topLeft,
-                  child: ConstrainedBox(
-                    constraints: const BoxConstraints(maxWidth: 600),
-                    child: _DesktopDetail(
-                      section: _selected,
-                      userId: widget.userId,
-                      name: widget.name,
-                      editableName: widget.editableName,
-                      email: widget.email,
-                      isAuthenticated: widget.isAuthenticated,
-                      isPhone: widget.isPhone,
-                    ),
+      child: Padding(
+        padding: const EdgeInsets.only(
+          top: KasySpacing.lg,
+          bottom: KasySpacing.xxl,
+        ),
+        // Center the nav + detail as ONE unit so the whitespace is equal on
+        // both sides (Linear/Notion settings), instead of pinning the nav left
+        // and leaving the right empty. Settings are forms, so the detail keeps
+        // a comfortable reading width rather than stretching wide. On tight
+        // desktop widths the detail fills the remaining space so it never
+        // overflows.
+        child: LayoutBuilder(
+          builder: (context, constraints) {
+            final bool fits = constraints.maxWidth >= groupWidth;
+            return Row(
+              mainAxisSize: fits ? MainAxisSize.min : MainAxisSize.max,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                SizedBox(
+                  width: navWidth,
+                  child: _DesktopNav(
+                    sections: sections,
+                    selected: _selected,
+                    name: widget.name,
+                    email: widget.email,
+                    onSelect: _select,
                   ),
                 ),
-              ),
-            ],
-          ),
+                const SizedBox(width: gap),
+                if (fits)
+                  SizedBox(width: detailWidth, child: pane)
+                else
+                  Expanded(child: pane),
+              ],
+            );
+          },
         ),
       ),
     );
@@ -669,7 +692,7 @@ class _DesktopNav extends StatelessWidget {
           ),
           child: Row(
             children: [
-              const EditableUserAvatar(diameter: 40),
+              const EditableUserAvatar(diameter: 64),
               const SizedBox(width: KasySpacing.sm),
               Expanded(
                 child: Column(
@@ -689,7 +712,7 @@ class _DesktopNav extends StatelessWidget {
                         email,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
-                        style: context.textTheme.bodySmall?.copyWith(
+                        style: context.textTheme.bodyMedium?.copyWith(
                           color: context.colors.muted,
                         ),
                       ),
@@ -742,7 +765,7 @@ class _NavTile extends StatelessWidget {
       child: Container(
         padding: const EdgeInsets.symmetric(
           horizontal: KasySpacing.smd,
-          vertical: KasySpacing.smd,
+          vertical: KasySpacing.sm,
         ),
         decoration: BoxDecoration(
           color: selected ? c.surfaceNeutralSoft : Colors.transparent,
@@ -864,8 +887,11 @@ class _DesktopDetail extends ConsumerWidget {
         const SizedBox(height: KasySpacing.xl),
         _settingsGroup([_LogoutRow(onTap: () => confirmLogout(context, ref))]),
       ],
-      const SizedBox(height: KasySpacing.xl),
-      const DeleteUserButton(),
+      // Only when there's a real backend account to delete (see mobile layout).
+      if (userId != null) ...[
+        const SizedBox(height: KasySpacing.xl),
+        const DeleteUserButton(),
+      ],
       const SizedBox(height: KasySpacing.xl),
       const _VersionLabel(),
     ];
@@ -881,13 +907,18 @@ class _LogoutRow extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return KasyHover(
-      borderRadius: KasyRadius.smBorderRadius,
+      // Match the card radius so the full-bleed press fill hugs the rounded
+      // corners exactly (this row is the sole child of its card).
+      borderRadius: KasyRadius.lgBorderRadius,
       pressColor: context.colors.error,
       focusable: true,
       focusGapColor: context.colors.surface,
       onTap: onTap,
       child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+        padding: const EdgeInsets.symmetric(
+          horizontal: KasySpacing.md,
+          vertical: KasySpacing.smd,
+        ),
         child: Row(
           children: [
             Icon(
@@ -898,7 +929,7 @@ class _LogoutRow extends StatelessWidget {
             const SizedBox(width: KasySpacing.sm),
             Text(
               context.t.settings.logout,
-              style: context.textTheme.titleSmall?.copyWith(
+              style: context.kasyTextTheme.listRowTitle.copyWith(
                 color: context.colors.error,
               ),
             ),
@@ -967,12 +998,12 @@ class BiometricSwitcher extends ConsumerWidget {
         ),
         Padding(
           padding: const EdgeInsets.only(
-            left: KasyIconSize.rowLeading + KasySpacing.sm,
+            left: KasySpacing.md + KasyIconSize.rowLeading + KasySpacing.sm,
             bottom: KasySpacing.xs,
           ),
           child: Text(
             subtitle,
-            style: context.textTheme.bodySmall?.copyWith(
+            style: context.textTheme.bodyMedium?.copyWith(
               color: context.colors.muted,
             ),
           ),
@@ -1101,7 +1132,10 @@ class ThemeSwitcher extends StatelessWidget {
       ),
     ];
     return Padding(
-      padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.md,
+        vertical: KasySpacing.smd,
+      ),
       child: Row(
         children: [
           Icon(
@@ -1113,7 +1147,7 @@ class ThemeSwitcher extends StatelessWidget {
           Expanded(
             child: Text(
               tr.theme_title,
-              style: context.textTheme.titleSmall?.copyWith(
+              style: context.kasyTextTheme.listRowTitle.copyWith(
                 color: context.colors.onSurface,
               ),
             ),