kasy-cli 1.39.1 → 1.40.0

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

@@ -332,6 +332,21 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
           ),
         ],
       );
+    case 'Menu':
+      return const ComponentPreviewDefinition(
+        title: 'Menu',
+        variants: [
+          ComponentPreviewVariant(
+            label: 'Basic usage',
+            builder: _buildMenuBasicUsage,
+          ),
+          ComponentPreviewVariant(
+            label: 'Selection',
+            builder: _buildMenuStyles,
+          ),
+          ComponentPreviewVariant(label: 'Submenu', builder: _buildMenuSubmenu),
+        ],
+      );
     case 'Badge':
       return const ComponentPreviewDefinition(
         title: 'Badge',
@@ -5417,6 +5432,311 @@ Widget _previewIntrinsicLaunch(Widget child) {
   );
 }
 
+// ── Menu (KasyMenu) previews ─────────────────────────────────────────────────
+// Each preset is triggered by a button — a real menu opens, anchored to it.
+// Most open as the default floating menu (popover, both platforms); one opens as
+// a bottom sheet to show the opt-in presentation.
+
+// Basic usage menu — mirrors the HeroUI "Actions / Danger zone" dropdown
+// (Figma 17840:22571): grouped rows with an icon, title + description and a
+// keyboard shortcut, plus a destructive "Danger zone". The kit has no pencil
+// glyph yet, so Edit file borrows the note icon.
+const List<KasyMenuSection> _kMenuActions = [
+  KasyMenuSection(
+    label: 'Actions',
+    items: [
+      KasyMenuItem(
+        icon: KasyIcons.add,
+        title: 'New file',
+        description: 'Create a new file',
+        shortcut: '⌘ N',
+        onTap: _triggerTapFeedback,
+      ),
+      KasyMenuItem(
+        icon: KasyIcons.copy,
+        title: 'Copy link',
+        description: 'Copy the file link',
+        shortcut: '⌘ L',
+        onTap: _triggerTapFeedback,
+      ),
+      KasyMenuItem(
+        icon: KasyIcons.note,
+        title: 'Edit file',
+        description: 'Make changes',
+        shortcut: '⌘ E',
+        onTap: _triggerTapFeedback,
+      ),
+    ],
+  ),
+  KasyMenuSection(
+    label: 'Danger zone',
+    items: [
+      KasyMenuItem(
+        icon: KasyIcons.trash,
+        title: 'Delete file',
+        description: 'Move to trash',
+        shortcut: '⌘ ⇧ K',
+        tone: KasyMenuItemTone.danger,
+        onTap: _triggerTapFeedback,
+      ),
+    ],
+  ),
+];
+
+const List<KasyMenuSection> _kMenuSubmenu = [
+  KasyMenuSection(
+    items: [
+      KasyMenuItem(
+        icon: KasyIcons.share,
+        title: 'Share',
+        submenu: [
+          KasyMenuSection(
+            items: [
+              KasyMenuItem(title: 'WhatsApp', onTap: _triggerTapFeedback),
+              KasyMenuItem(title: 'Telegram', onTap: _triggerTapFeedback),
+              KasyMenuItem(title: 'Email', onTap: _triggerTapFeedback),
+            ],
+          ),
+        ],
+      ),
+      KasyMenuItem(
+        icon: KasyIcons.copy,
+        title: 'Copy link',
+        onTap: _triggerTapFeedback,
+      ),
+    ],
+  ),
+];
+
+
+// Layout shared by the two interactive menu demos: the trigger floats centered
+// in the open area (so the menu has room to anchor against it) and a toggle is
+// pinned at the bottom, just above the variant title. Height is a slice of the
+// viewport, clamped, and kept under the preview height so it still centers.
+class _MenuDemoFrame extends StatelessWidget {
+  final Widget trigger;
+  final String controlTitle;
+  final String controlSubtitle;
+  final bool controlValue;
+  final ValueChanged<bool> onControlChanged;
+
+  const _MenuDemoFrame({
+    required this.trigger,
+    required this.controlTitle,
+    required this.controlSubtitle,
+    required this.controlValue,
+    required this.onControlChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    // Give the demo real vertical room so the control row can sit near the
+    // bottom (like a settings row) instead of crowding under the trigger. The
+    // trigger still lives in a plain centering Row — the menu anchors to its
+    // render box via LayerLink, so the surrounding height never moves the menu.
+    final double viewportHeight = MediaQuery.sizeOf(context).height;
+    final double frameHeight = (viewportHeight - 260).clamp(320.0, 520.0);
+    return SizedBox(
+      height: frameHeight,
+      child: Column(
+        children: [
+          const Spacer(flex: 4),
+          Row(mainAxisAlignment: MainAxisAlignment.center, children: [trigger]),
+          const Spacer(flex: 6),
+          Row(
+          children: [
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    controlTitle,
+                    style: context.textTheme.titleSmall?.copyWith(
+                      color: context.colors.onSurface,
+                    ),
+                  ),
+                  Text(
+                    controlSubtitle,
+                    style: context.textTheme.bodySmall?.copyWith(
+                      color: context.colors.muted,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            // The same switch the Settings screen uses: adaptive (Cupertino on
+            // iOS, Material elsewhere — identical look per platform), scaled
+            // down, themed to the primary color.
+            Transform.scale(
+              scale: 0.82,
+              child: Switch.adaptive(
+                value: controlValue,
+                onChanged: onControlChanged,
+                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+              ),
+            ),
+          ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+Widget _buildMenuBasicUsage(BuildContext context) => const _MenuBasicUsageDemo();
+
+// First preview: the trigger + a "Bottom Sheet" toggle. Off → the menu opens as
+// a popover anchored to the button; on → it slides up as a bottom sheet. The
+// same compact menu either way — only the container changes.
+class _MenuBasicUsageDemo extends StatefulWidget {
+  const _MenuBasicUsageDemo();
+
+  @override
+  State<_MenuBasicUsageDemo> createState() => _MenuBasicUsageDemoState();
+}
+
+class _MenuBasicUsageDemoState extends State<_MenuBasicUsageDemo> {
+  bool _bottomSheet = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return _MenuDemoFrame(
+      controlTitle: 'Bottom Sheet',
+      controlSubtitle: 'Toggle bottom sheet presentation',
+      controlValue: _bottomSheet,
+      onControlChanged: (bool v) => setState(() => _bottomSheet = v),
+      trigger: KasyMenuAnchor(
+        sections: _kMenuActions,
+        // Wider panel: rows carry a title + description (HeroUI menu).
+        width: 288,
+        presentation: _bottomSheet
+            ? KasyMenuPresentation.bottomSheet
+            : KasyMenuPresentation.popover,
+        builder: (BuildContext context, VoidCallback open) => KasyButton(
+          label: 'Actions',
+          variant: KasyButtonVariant.soft,
+          onPressed: () {
+            _triggerTapFeedback();
+            open();
+          },
+        ),
+      ),
+    );
+  }
+}
+
+Widget _buildMenuStyles(BuildContext context) => const _MenuSelectionDemo();
+
+// Second preview: a real, interactive selection menu. Tapping a "Text Style"
+// row toggles its check (multi-select); tapping a "Text Alignment" row moves the
+// filled dot (single-select). The selection persists across reopens. A "Should
+// Close On Select" toggle controls whether picking an item dismisses the menu:
+// off → keep picking, tap outside to close (HeroUI editor menu); on → one pick
+// closes it.
+class _MenuSelectionDemo extends StatefulWidget {
+  const _MenuSelectionDemo();
+
+  @override
+  State<_MenuSelectionDemo> createState() => _MenuSelectionDemoState();
+}
+
+class _MenuSelectionDemoState extends State<_MenuSelectionDemo> {
+  // Multi-select set + single-select value, kept on the demo so reopening the
+  // menu shows the last selection.
+  final Set<String> _styles = <String>{'Bold', 'Underline'};
+  String _align = 'Right';
+  bool _closeOnSelect = false;
+
+  static const List<(String, String)> _styleItems = [
+    ('Bold', '⌘ B'),
+    ('Italic', '⌘ I'),
+    ('Underline', '⌘ U'),
+  ];
+  static const List<(String, String)> _alignItems = [
+    ('Left', '⌥ A'),
+    ('Center', '⌥ H'),
+    ('Right', '⌥ D'),
+  ];
+
+  void _toggleStyle(String title) {
+    setState(() {
+      if (!_styles.remove(title)) _styles.add(title);
+    });
+  }
+
+  void _selectAlign(String title) => setState(() => _align = title);
+
+  // Built from state so each tap (via setState) rebuilds the anchor and the
+  // open menu reflects the new selection in place.
+  List<KasyMenuSection> _buildSections() => [
+    KasyMenuSection(
+      label: 'Text Style',
+      selectionMode: KasyMenuSelectionMode.multiple,
+      items: [
+        for (final (String title, String shortcut) in _styleItems)
+          KasyMenuItem(
+            title: title,
+            shortcut: shortcut,
+            selected: _styles.contains(title),
+            onTap: () => _toggleStyle(title),
+          ),
+      ],
+    ),
+    KasyMenuSection(
+      label: 'Text Alignment',
+      selectionMode: KasyMenuSelectionMode.single,
+      items: [
+        for (final (String title, String shortcut) in _alignItems)
+          KasyMenuItem(
+            title: title,
+            shortcut: shortcut,
+            selected: _align == title,
+            onTap: () => _selectAlign(title),
+          ),
+      ],
+    ),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return _MenuDemoFrame(
+      controlTitle: 'Should Close On Select',
+      controlSubtitle: 'Toggle should close on select',
+      controlValue: _closeOnSelect,
+      onControlChanged: (bool v) => setState(() => _closeOnSelect = v),
+      trigger: KasyMenuAnchor(
+        sections: _buildSections(),
+        closeOnSelect: _closeOnSelect,
+        builder: (BuildContext context, VoidCallback open) => KasyButton(
+          label: 'Text styles',
+          variant: KasyButtonVariant.soft,
+          onPressed: () {
+            _triggerTapFeedback();
+            open();
+          },
+        ),
+      ),
+    );
+  }
+}
+
+Widget _buildMenuSubmenu(BuildContext context) {
+  return _previewIntrinsicLaunch(
+    KasyMenuAnchor(
+      sections: _kMenuSubmenu,
+      builder: (BuildContext context, VoidCallback open) => KasyButton(
+        label: 'Share',
+        variant: KasyButtonVariant.soft,
+        onPressed: () {
+          _triggerTapFeedback();
+          open();
+        },
+      ),
+    ),
+  );
+}
+
 const List<KasyAccordionItemData> _kAccordionItems = <KasyAccordionItemData>[
   KasyAccordionItemData(
     icon: KasyIcons.send,

package/templates/firebase/lib/features/settings/ui/components/avatar_component.dart

@@ -5,7 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:image_picker/image_picker.dart';
 import 'package:kasy_kit/components/kasy_avatar.dart';
-import 'package:kasy_kit/components/kasy_bottom_sheet.dart';
+import 'package:kasy_kit/components/kasy_menu.dart';
 import 'package:kasy_kit/core/data/entities/upload_result.dart';
 import 'package:kasy_kit/core/data/models/user.dart';
 import 'package:kasy_kit/core/data/repositories/user_repository.dart';
@@ -13,7 +13,6 @@ import 'package:kasy_kit/core/states/models/user_state.dart';
 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_hover.dart';
 import 'package:kasy_kit/features/settings/ui/widgets/avatar_utils.dart';
 import 'package:kasy_kit/features/settings/ui/widgets/round_progress.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
@@ -121,69 +120,56 @@ class _EditableUserAvatarState extends ConsumerState<EditableUserAvatar> {
     BuildContext context,
     UserState userState,
     String? avatarPath,
-  ) async {
+  ) {
     final userId = userState.user.idOrNull;
     final cachedUrl = userId == null ? null : getCachedAvatarUrl(userId);
     final hasAvatar =
         _hasAvatarUrl(avatarPath) ||
         _hasAvatarUrl(cachedUrl) ||
         temporaryAvatarBytes != null;
-    final result = await _showAvatarBottomSheet(context, hasAvatar: hasAvatar);
-    if (result == null || !mounted) return;
-    switch (result) {
-      case _AvatarAction.camera:
-        final file = await ImagePicker().pickImage(source: ImageSource.camera);
-        await _uploadTask(file, userState);
-      case _AvatarAction.library:
-        final file = await ImagePicker().pickImage(source: ImageSource.gallery);
-        await _uploadTask(file, userState);
-      case _AvatarAction.remove:
-        await _removeAvatar(userState);
-    }
-  }
-
-  Future<_AvatarAction?> _showAvatarBottomSheet(
-    BuildContext context, {
-    required bool hasAvatar,
-  }) {
-    return showKasyBottomSheet<_AvatarAction>(
+    final avatar = t.settings.avatar;
+    return showKasyMenu<void>(
       context: context,
-      builder: (sheetContext) => KasySheetSurface(
-        showDragHandle: false,
-        child: Padding(
-          padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              _BottomSheetTile(
-                icon: KasyIcons.cameraAlt,
-                label: t.settings.avatar.take_photo,
-                onTap: () => Navigator.pop(sheetContext, _AvatarAction.camera),
-              ),
-              _BottomSheetTile(
-                icon: KasyIcons.gallery,
-                label: t.settings.avatar.choose_library,
-                onTap: () => Navigator.pop(sheetContext, _AvatarAction.library),
+      anchorContext: context,
+      desktopWidth: 248,
+      sections: [
+        KasyMenuSection(
+          items: [
+            KasyMenuItem(
+              icon: KasyIcons.cameraAlt,
+              title: avatar.take_photo,
+              onTap: () => _pickAndUpload(ImageSource.camera, userState),
+            ),
+            KasyMenuItem(
+              icon: KasyIcons.gallery,
+              title: avatar.choose_library,
+              onTap: () => _pickAndUpload(ImageSource.gallery, userState),
+            ),
+          ],
+        ),
+        // Destructive action lives in its own ("Danger zone") group, per the
+        // HeroUI menu guidance.
+        if (hasAvatar)
+          KasyMenuSection(
+            items: [
+              KasyMenuItem(
+                icon: KasyIcons.trash,
+                title: avatar.remove_photo,
+                tone: KasyMenuItemTone.danger,
+                onTap: () => _removeAvatar(userState),
               ),
-              if (hasAvatar) ...[
-                Divider(
-                  color: sheetContext.colors.onSurface.withValues(alpha: .08),
-                  height: 1,
-                ),
-                _BottomSheetTile(
-                  icon: KasyIcons.trash,
-                  label: t.settings.avatar.remove_photo,
-                  color: sheetContext.colors.error,
-                  onTap: () => Navigator.pop(sheetContext, _AvatarAction.remove),
-                ),
-              ],
             ],
           ),
-        ),
-      ),
+      ],
     );
   }
 
+  Future<void> _pickAndUpload(ImageSource source, UserState userState) async {
+    final file = await ImagePicker().pickImage(source: source);
+    if (!mounted) return;
+    await _uploadTask(file, userState);
+  }
+
   Future<void> _uploadTask(XFile? file, UserState userState) async {
     if (file == null) return;
     final userId = userState.user.idOrNull;
@@ -301,48 +287,6 @@ class _EditableUserAvatarState extends ConsumerState<EditableUserAvatar> {
   }
 }
 
-enum _AvatarAction { camera, library, remove }
-
-class _BottomSheetTile extends StatelessWidget {
-  final IconData? icon;
-  final String label;
-  final Color? color;
-  final VoidCallback onTap;
-
-  const _BottomSheetTile({
-    this.icon,
-    required this.label,
-    this.color,
-    required this.onTap,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final Color fg = color ?? context.colors.onSurface;
-    return KasyHover(
-      onTap: onTap,
-      focusable: true,
-      focusGapColor: context.colors.surface,
-      borderRadius: BorderRadius.circular(KasyRadius.sm),
-      padding: const EdgeInsets.symmetric(
-        horizontal: KasySpacing.md,
-        vertical: KasySpacing.smd,
-      ),
-      child: Row(
-        children: [
-          if (icon != null) ...[
-            Icon(icon, size: KasyIconSize.lg, color: fg),
-            const SizedBox(width: KasySpacing.sm),
-          ],
-          Text(
-            label,
-            style: context.textTheme.bodyLarge?.copyWith(color: fg),
-          ),
-        ],
-      ),
-    );
-  }
-}
 
 /// Resolves the avatar [ImageProvider] and renders a [KasyAvatar] with
 /// [KasyAvatarFallbackSurface.soft]. Firebase Storage URL is loaded async.

package/templates/firebase/lib/features/settings/ui/components/language_switcher.dart

@@ -2,7 +2,8 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:kasy_kit/components/kasy_bottom_sheet.dart';
+import 'package:kasy_kit/components/kasy_menu.dart';
+import 'package:kasy_kit/components/kasy_popover.dart';
 import 'package:kasy_kit/core/home_widgets/home_widget_mywidget_service.dart';
 import 'package:kasy_kit/core/shared_preferences/shared_preferences.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
@@ -63,118 +64,42 @@ class LanguageSwitcher extends ConsumerWidget {
     WidgetRef ref,
     AppLocale current,
   ) {
-    final String sheetTitle = context.t.settings.language_title;
-    showKasyBottomSheet<void>(
+    showKasyMenu<void>(
       context: context,
-      builder: (sheetContext) => KasySheetSurface(
-        child: Padding(
-          // No horizontal padding: option rows go full-bleed so the highlight
-          // spans the whole sheet (no inset pill). Title and rows carry their
-          // own horizontal inset instead.
-          padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: <Widget>[
-              Padding(
-                padding: const EdgeInsets.symmetric(horizontal: KasySpacing.md),
-                child: Align(
-                  alignment: Alignment.centerLeft,
-                  child: Text(
-                    sheetTitle,
-                    style: sheetContext.textTheme.titleMedium?.copyWith(
-                      color: sheetContext.colors.onSurface,
-                    ),
-                  ),
+      anchorContext: context,
+      // Desktop: hang the menu off the right edge of the settings row, where the
+      // current value sits — a native desktop menu, not a centered modal.
+      desktopAlign: KasyPopoverAlign.end,
+      sections: [
+        KasyMenuSection(
+          label: context.t.settings.language_title,
+          selectionMode: KasyMenuSelectionMode.single,
+          items: AppLocale.values
+              .map(
+                (AppLocale locale) => KasyMenuItem(
+                  title: locale.nativeName,
+                  selected: locale == current,
+                  onTap: () => _applyLocale(ref, locale),
                 ),
-              ),
-              const SizedBox(height: KasySpacing.xs),
-              ...AppLocale.values.map((AppLocale locale) {
-                final bool isSelected = locale == current;
-                return _LocaleOptionTile(
-                  locale: locale,
-                  isSelected: isSelected,
-                  onTap: () async {
-                    // Close the sheet FIRST. Awaiting work before pop
-                    // races with the rebuild triggered by setLocale and
-                    // crashed Navigator.pop with !_debugLocked.
-                    Navigator.pop(sheetContext);
-                    // Await setLocale so the locale bundle finishes loading
-                    // BEFORE the widget tries to read its translations.
-                    // Slang lazy-loads non-base locales and its loadLocale
-                    // returns immediately when another caller (this setLocale)
-                    // is already loading — so a parallel updateForLocale would
-                    // see translations not yet in the map and silently fall
-                    // back to the base locale (English). That was the root
-                    // cause of "first language tap doesn't update the widget".
-                    await LocaleSettings.setLocale(locale);
-                    unawaited(
-                      ref
-                          .read(sharedPreferencesProvider)
-                          .setAppLocale(locale.languageCode),
-                    );
-                    unawaited(
-                      ref
-                          .read(myWidgetHomeWidgetProvider.notifier)
-                          .updateForLocale(locale),
-                    );
-                  },
-                );
-              }),
-            ],
-          ),
+              )
+              .toList(),
         ),
-      ),
+      ],
     );
   }
-}
 
-class _LocaleOptionTile extends StatelessWidget {
-  const _LocaleOptionTile({
-    required this.locale,
-    required this.isSelected,
-    required this.onTap,
-  });
-
-  final AppLocale locale;
-  final bool isSelected;
-  final VoidCallback onTap;
-
-  @override
-  Widget build(BuildContext context) {
-    final Color primary = context.colors.primary;
-    final Color fg = isSelected ? primary : context.colors.onSurface;
-
-    return KasyHover(
-      onTap: onTap,
-      focusable: true,
-      // Full-bleed rectangular highlight (default radius): the sheet rounds its
-      // own corners, so options span edge-to-edge like a native menu/list.
-      padding: const EdgeInsets.symmetric(
-        horizontal: KasySpacing.md,
-        vertical: KasySpacing.smd,
-      ),
-      child: Row(
-        children: <Widget>[
-          Expanded(
-            child: Text(
-              locale.nativeName,
-              style: context.textTheme.bodyLarge?.copyWith(
-                color: fg,
-                fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
-              ),
-            ),
-          ),
-          if (isSelected)
-            Container(
-              width: 10,
-              height: 10,
-              decoration: BoxDecoration(
-                color: primary,
-                shape: BoxShape.circle,
-              ),
-            ),
-        ],
-      ),
+  // The menu closes itself before this runs (KasyMenuItem pops first), so the
+  // awaited setLocale never races the rebuild it triggers. setLocale is awaited
+  // so Slang finishes loading the locale bundle before any widget reads its
+  // translations — otherwise a parallel updateForLocale sees an unloaded map and
+  // silently falls back to English (the old "first tap doesn't update" bug).
+  Future<void> _applyLocale(WidgetRef ref, AppLocale locale) async {
+    await LocaleSettings.setLocale(locale);
+    unawaited(
+      ref.read(sharedPreferencesProvider).setAppLocale(locale.languageCode),
+    );
+    unawaited(
+      ref.read(myWidgetHomeWidgetProvider.notifier).updateForLocale(locale),
     );
   }
 }