kasy-cli 1.38.0 → 1.39.1

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

@@ -71,39 +71,44 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
       return const ComponentPreviewDefinition(
         title: 'AppBar',
         variants: [
+          // Phone / tablet — the page chrome (title + back + orbs).
           ComponentPreviewVariant(
-            label: 'Subpage',
+            label: 'Subpage (mobile)',
             builder: _buildAppBarSubpageVariant,
           ),
           ComponentPreviewVariant(
-            label: 'Subpage Simple',
+            label: 'Subpage Simple (mobile)',
             builder: _buildAppBarSubpageSimpleVariant,
           ),
           ComponentPreviewVariant(
-            label: 'Subpage Actions',
+            label: 'Subpage Actions (mobile)',
             builder: _buildAppBarSubpageActionsVariant,
           ),
           ComponentPreviewVariant(
-            label: 'Menu opens sidebar',
+            label: 'Menu opens sidebar (mobile)',
             builder: _buildAppBarMenuVariant,
           ),
-        ],
-      );
-    case 'Web Header':
-      return const ComponentPreviewDefinition(
-        title: 'Web Header',
-        variants: [
+          // Desktop — the application chrome (search + actions + profile).
           ComponentPreviewVariant(
-            label: 'Default',
-            builder: _buildWebHeaderDefaultVariant,
+            label: 'Application (desktop)',
+            builder: _buildAppBarApplicationVariant,
+          ),
+          ComponentPreviewVariant(
+            label: 'Application + notification (desktop)',
+            builder: _buildAppBarApplicationBadgeVariant,
+          ),
+          ComponentPreviewVariant(
+            label: 'Application no avatar (desktop)',
+            builder: _buildAppBarApplicationNoAvatarVariant,
           ),
+          // Per-screen presets — same bar, a screen picking its own chrome.
           ComponentPreviewVariant(
-            label: 'With notification',
-            builder: _buildWebHeaderBadgeVariant,
+            label: 'Search only (desktop)',
+            builder: _buildAppBarApplicationSearchOnlyVariant,
           ),
           ComponentPreviewVariant(
-            label: 'Without avatar',
-            builder: _buildWebHeaderNoAvatarVariant,
+            label: 'Notifications only (desktop)',
+            builder: _buildAppBarApplicationNotificationsOnlyVariant,
           ),
         ],
       );
@@ -309,6 +314,24 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
           ),
         ],
       );
+    case 'DropDown':
+      return const ComponentPreviewDefinition(
+        title: 'DropDown',
+        variants: [
+          ComponentPreviewVariant(
+            label: 'Basic',
+            builder: _buildDropDownBasic,
+          ),
+          ComponentPreviewVariant(
+            label: 'With icons & subtitles',
+            builder: _buildDropDownRich,
+          ),
+          ComponentPreviewVariant(
+            label: 'States',
+            builder: _buildDropDownStates,
+          ),
+        ],
+      );
     case 'Badge':
       return const ComponentPreviewDefinition(
         title: 'Badge',
@@ -1928,16 +1951,42 @@ Widget _buildAppBarMenuVariant(BuildContext context) {
   );
 }
 
-Widget _buildWebHeaderDefaultVariant(BuildContext context) {
-  return const _WebHeaderPreview();
+/// A fully-wired desktop config for previews — every element active, so each
+/// variant can switch one thing on/off and read clearly.
+KasyAppBarConfig _demoAppBarConfig() => KasyAppBarConfig(
+      onToggleTheme: () {},
+      onNotifications: () {},
+      onCreate: () {},
+      onAvatarTap: () {},
+    );
+
+Widget _buildAppBarApplicationVariant(BuildContext context) {
+  return _ApplicationBarPreview(config: _demoAppBarConfig());
 }
 
-Widget _buildWebHeaderBadgeVariant(BuildContext context) {
-  return const _WebHeaderPreview(showBadge: true);
+Widget _buildAppBarApplicationBadgeVariant(BuildContext context) {
+  return _ApplicationBarPreview(
+    config: _demoAppBarConfig().copyWith(showNotificationBadge: true),
+  );
 }
 
-Widget _buildWebHeaderNoAvatarVariant(BuildContext context) {
-  return const _WebHeaderPreview(showAvatar: false);
+Widget _buildAppBarApplicationNoAvatarVariant(BuildContext context) {
+  return _ApplicationBarPreview(
+    config: _demoAppBarConfig().copyWith(showAvatar: false),
+  );
+}
+
+// Per-screen presets: the same component, different chrome chosen by a screen.
+Widget _buildAppBarApplicationSearchOnlyVariant(BuildContext context) {
+  return _ApplicationBarPreview(
+    config: _demoAppBarConfig().only(search: true, themeToggle: true),
+  );
+}
+
+Widget _buildAppBarApplicationNotificationsOnlyVariant(BuildContext context) {
+  return _ApplicationBarPreview(
+    config: _demoAppBarConfig().only(notifications: true, themeToggle: true),
+  );
 }
 
 Widget _buildButtonSizesVariant(BuildContext context) {
@@ -3866,49 +3915,57 @@ class _AccordionPreviewState extends State<_AccordionPreview> {
   }
 }
 
-/// Presents [KasyWebHeader] inside a desktop browser-window mock (title bar +
-/// faux sidebar + content) so the preview reads as the web/desktop chrome it is.
-class _WebHeaderPreview extends StatelessWidget {
-  final bool showBadge;
-  final bool showAvatar;
+/// Presents [KasyAppBar.application] inside a desktop browser-window mock (title
+/// bar + faux sidebar + content) so the preview reads as the desktop chrome it
+/// is — the responsive desktop half of [KasyAppBar].
+class _ApplicationBarPreview extends StatelessWidget {
+  /// The exact config a screen would publish — rendered through the same
+  /// [KasyAppBar.fromConfig] the shell uses, so the preview mirrors real usage.
+  final KasyAppBarConfig config;
+
+  const _ApplicationBarPreview({required this.config});
 
-  const _WebHeaderPreview({this.showBadge = false, this.showAvatar = true});
+  /// Width the mock window is laid out at. The application bar is desktop chrome
+  /// (220px search + actions), so it needs a desktop-class width — we render at
+  /// this width and scale the whole window down to fit the (narrow) preview card.
+  /// Without this, the bar overflows on a phone-sized preview.
+  static const double _mockWindowWidth = 760;
 
   @override
   Widget build(BuildContext context) {
     final KasyColors c = context.colors;
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        color: c.surface,
-        borderRadius: BorderRadius.circular(KasyRadius.lg),
-        border: Border.all(color: c.onSurface.withValues(alpha: 0.10)),
-        boxShadow: [KasyShadows.component(context)],
-      ),
-      child: ClipRRect(
-        borderRadius: BorderRadius.circular(KasyRadius.lg),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            const _BrowserTopBar(),
-            // The real header, flush — no corner radius of its own.
-            KasyWebHeader(
-              showNotificationBadge: showBadge,
-              showAvatar: showAvatar,
-              onNotifications: () {},
-              onCreate: () {},
-              onAvatarTap: () {},
-            ),
-            const SizedBox(
-              height: 150,
-              child: Row(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
-                children: [
-                  _DesktopMockSidebar(),
-                  Expanded(child: _DesktopMockContent()),
-                ],
-              ),
+    return FittedBox(
+      fit: BoxFit.scaleDown,
+      child: SizedBox(
+        width: _mockWindowWidth,
+        child: DecoratedBox(
+          decoration: BoxDecoration(
+            color: c.surface,
+            borderRadius: BorderRadius.circular(KasyRadius.lg),
+            border: Border.all(color: c.onSurface.withValues(alpha: 0.10)),
+            boxShadow: [KasyShadows.component(context)],
+          ),
+          child: ClipRRect(
+            borderRadius: BorderRadius.circular(KasyRadius.lg),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const _BrowserTopBar(),
+                // The real bar, flush — no corner radius of its own.
+                KasyAppBar.fromConfig(config),
+                const SizedBox(
+                  height: 150,
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
+                    children: [
+                      _DesktopMockSidebar(),
+                      Expanded(child: _DesktopMockContent()),
+                    ],
+                  ),
+                ),
+              ],
             ),
-          ],
+          ),
         ),
       ),
     );
@@ -9447,3 +9504,150 @@ class _DatePickerFieldStatesPreviewState
     );
   }
 }
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DropDown — single-select dropdown (HeroUI "Select")
+// ─────────────────────────────────────────────────────────────────────────────
+
+const List<KasyDropDownItem<String>> _kDropDownStates = [
+  KasyDropDownItem(value: 'fl', label: 'Florida'),
+  KasyDropDownItem(value: 'de', label: 'Delaware'),
+  KasyDropDownItem(value: 'tx', label: 'Texas'),
+  KasyDropDownItem(value: 'ca', label: 'California'),
+  KasyDropDownItem(value: 'ny', label: 'New York'),
+  KasyDropDownItem(value: 'wy', label: 'Wyoming'),
+];
+
+Widget _buildDropDownBasic(BuildContext context) => const _DropDownBasicPreview();
+
+class _DropDownBasicPreview extends StatefulWidget {
+  const _DropDownBasicPreview();
+
+  @override
+  State<_DropDownBasicPreview> createState() => _DropDownBasicPreviewState();
+}
+
+class _DropDownBasicPreviewState extends State<_DropDownBasicPreview> {
+  String? _state;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        KasyDropDown<String>(
+          label: 'State',
+          hint: 'Select one',
+          showRequiredIndicator: true,
+          value: _state,
+          items: _kDropDownStates,
+          onChanged: (v) => setState(() => _state = v),
+        ),
+      ],
+    );
+  }
+}
+
+Widget _buildDropDownRich(BuildContext context) => const _DropDownRichPreview();
+
+class _DropDownRichPreview extends StatefulWidget {
+  const _DropDownRichPreview();
+
+  @override
+  State<_DropDownRichPreview> createState() => _DropDownRichPreviewState();
+}
+
+class _DropDownRichPreviewState extends State<_DropDownRichPreview> {
+  String? _action;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        KasyDropDown<String>(
+          label: 'Quick action',
+          hint: 'Pick an action',
+          leadingIcon: KasyIcons.idea,
+          value: _action,
+          items: const [
+            KasyDropDownItem(
+              value: 'new',
+              label: 'New file',
+              icon: KasyIcons.add,
+              subtitle: 'Create a new file',
+            ),
+            KasyDropDownItem(
+              value: 'copy',
+              label: 'Copy link',
+              icon: KasyIcons.copy,
+              subtitle: 'Copy a shareable link',
+            ),
+            KasyDropDownItem(
+              value: 'settings',
+              label: 'Settings',
+              icon: KasyIcons.settings,
+              subtitle: 'Manage file permissions',
+            ),
+          ],
+          onChanged: (v) => setState(() => _action = v),
+        ),
+      ],
+    );
+  }
+}
+
+Widget _buildDropDownStates(BuildContext context) =>
+    const _DropDownStatesPreview();
+
+class _DropDownStatesPreview extends StatefulWidget {
+  const _DropDownStatesPreview();
+
+  @override
+  State<_DropDownStatesPreview> createState() => _DropDownStatesPreviewState();
+}
+
+class _DropDownStatesPreviewState extends State<_DropDownStatesPreview> {
+  String? _invalid;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        // Pre-selected value.
+        KasyDropDown<String>(
+          label: 'Selected',
+          hint: 'Select one',
+          value: 'ca',
+          items: _kDropDownStates,
+          onChanged: (_) {},
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        // Invalid + error text.
+        KasyDropDown<String>(
+          label: 'Required',
+          hint: 'Select one',
+          showRequiredIndicator: true,
+          isInvalid: _invalid == null,
+          errorText: _invalid == null ? 'Please choose a state.' : null,
+          value: _invalid,
+          items: _kDropDownStates,
+          onChanged: (v) => setState(() => _invalid = v),
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        // Disabled trigger.
+        const KasyDropDown<String>(
+          label: 'Disabled',
+          hint: 'Locked',
+          enabled: false,
+          items: _kDropDownStates,
+          onChanged: null,
+        ),
+      ],
+    );
+  }
+}

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

@@ -336,7 +336,7 @@ class _FilterCard extends StatelessWidget {
                   data.title,
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
-                  style: context.textTheme.titleSmall?.copyWith(
+                  style: context.kasyTextTheme.cardTitle.copyWith(
                     color: selected ? c.primary : c.onSurface,
                   ),
                 ),
@@ -345,7 +345,7 @@ class _FilterCard extends StatelessWidget {
                   data.subtitle,
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
-                  style: context.textTheme.bodySmall?.copyWith(
+                  style: context.kasyTextTheme.cardSubtitle.copyWith(
                     color: c.muted,
                   ),
                 ),

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

@@ -234,7 +234,7 @@ class _PhotoTileState extends State<_PhotoTile> {
                         photo.author,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
-                        style: context.textTheme.titleSmall?.copyWith(
+                        style: context.kasyTextTheme.cardTitle.copyWith(
                           color: context.colors.onSurface,
                         ),
                       ),
@@ -242,7 +242,7 @@ class _PhotoTileState extends State<_PhotoTile> {
                         photo.ago,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
-                        style: context.textTheme.bodySmall?.copyWith(
+                        style: context.kasyTextTheme.caption.copyWith(
                           color: context.colors.muted,
                         ),
                       ),
@@ -375,7 +375,7 @@ class _LikeButtonState extends State<_LikeButton>
 
     return KasyFocusRing(
       onActivate: widget.onTap,
-      borderRadius: BorderRadius.circular(999),
+      borderRadius: BorderRadius.circular(KasyRadius.full),
       child: GestureDetector(
         onTap: widget.onTap,
         behavior: HitTestBehavior.opaque,

package/templates/firebase/lib/features/local_reminders/providers/reminder_notifier.dart

@@ -21,7 +21,14 @@ class ReminderNotifier extends _$ReminderNotifier {
 
   Future<void> setType(ReminderType type) async {
     final current = state.requireValue;
-    await _applyAndSave(current.copyWith(type: type));
+    // Leaving "specific date" drops the stored one-off date so it doesn't
+    // linger (and silently come back) if the user returns to that mode later.
+    await _applyAndSave(
+      current.copyWith(
+        type: type,
+        clearDate: type != ReminderType.specificDate,
+      ),
+    );
   }
 
   Future<void> setTime(int hour, int minute) async {