kasy-cli 1.14.0 → 1.15.0

package/templates/firebase/lib/components/kasy_avatar_presets.dart

@@ -1,94 +1,136 @@
 import 'package:flutter/material.dart';
 
-/// Optional radial orb presets for [KasyAvatar] via `backgroundGradient` or
+/// Linear gradient presets for [KasyAvatar] via `backgroundGradient` or
 /// [KasyAvatar.gradientFill].
 ///
-/// Remote photo URLs ([KasyAvatarDemoPhotos]) are for demos/catalog only (needs network).
-abstract final class KasyAvatarOrbGradients {
-  static const RadialGradient sphereBlue = RadialGradient(
-    center: Alignment(-0.42, -0.48),
-    radius: 1.08,
-    colors: [
-      Color(0xFFE3F4FF),
-      Color(0xFF64B5F6),
-      Color(0xFF1E88E5),
-      Color(0xFF0A3068),
-    ],
-    stops: [0.0, 0.32, 0.68, 1.0],
+/// Matches the HeroUI Figma Kit V3 avatar palette exactly.
+/// All gradients use 141° (upper-left → lower-right), flat from 0%→27%,
+/// then transition to the second color at 100% — same as Figma specification.
+abstract final class KasyAvatarGradients {
+  // 141° CSS angle → Flutter Alignment
+  // begin = upper-left region (-sin141°, cos141°) ≈ (-0.63, -0.78)
+  // end   = lower-right region (+sin141°, -cos141°) ≈ (+0.63, +0.78)
+  static const Alignment _b = Alignment(-0.63, -0.78);
+  static const Alignment _e = Alignment(0.63, 0.78);
+
+  /// Cornflower blue → deep blue
+  static const LinearGradient blue = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF5D9BE7), Color(0xFF5D9BE7), Color(0xFF0026FF)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Cyan-blue → violet
+  static const LinearGradient sky = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF5DD0E7), Color(0xFF5DD0E7), Color(0xFF7300FF)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Aqua → deep blue
+  static const LinearGradient teal = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF5DE7E7), Color(0xFF5DE7E7), Color(0xFF001AFF)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Mint green → royal blue
+  static const LinearGradient emerald = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF5DE79D), Color(0xFF5DE79D), Color(0xFF0033FF)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Seafoam → dark forest green
+  static const LinearGradient green = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF52DEB0), Color(0xFF52DEB0), Color(0xFF0D5C45)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Turquoise → deep forest green
+  static const LinearGradient forest = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF5DD9AF), Color(0xFF5DD9AF), Color(0xFF094E39)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Golden yellow → deep red-orange
+  static const LinearGradient orange = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFFE7BD5D), Color(0xFFE7BD5D), Color(0xFFFF1E00)],
+    stops: [0.0, 0.27, 1.0],
+  );
+
+  /// Salmon → scarlet
+  static const LinearGradient red = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFFE7885D), Color(0xFFE7885D), Color(0xFFFF0004)],
+    stops: [0.0, 0.27, 1.0],
   );
 
-  static const RadialGradient sphereFuchsia = RadialGradient(
-    center: Alignment(-0.36, -0.46),
-    radius: 1.1,
-    colors: [
-      Color(0xFFFFE4EE),
-      Color(0xFFF48FB1),
-      Color(0xFFE91E63),
-      Color(0xFF880E4F),
-    ],
-    stops: [0.0, 0.35, 0.71, 1.0],
+  /// Soft purple → cobalt blue
+  static const LinearGradient indigo = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFFB45DE7), Color(0xFFB45DE7), Color(0xFF0055FF)],
+    stops: [0.0, 0.27, 1.0],
   );
 
-  static const RadialGradient sphereSunset = RadialGradient(
-    center: Alignment(-0.45, -0.38),
-    radius: 1.06,
-    colors: [
-      Color(0xFFFFF8E1),
-      Color(0xFFFFB74D),
-      Color(0xFFFF6E40),
-      Color(0xFFB71C1C),
-    ],
-    stops: [0.0, 0.33, 0.69, 1.0],
+  /// Medium purple → crimson
+  static const LinearGradient purple = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF8D5DE7), Color(0xFF8D5DE7), Color(0xFFFF0009)],
+    stops: [0.0, 0.27, 1.0],
   );
 
-  static const RadialGradient sphereTeal = RadialGradient(
-    center: Alignment(-0.4, -0.42),
-    radius: 1.07,
-    colors: [
-      Color(0xFFE0F7F4),
-      Color(0xFF4DD0E1),
-      Color(0xFF00838F),
-      Color(0xFF004D40),
-    ],
-    stops: [0.0, 0.34, 0.7, 1.0],
+  /// Orchid pink → deep magenta-red
+  static const LinearGradient rose = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFFE75DCB), Color(0xFFE75DCB), Color(0xFFFF000D)],
+    stops: [0.0, 0.27, 1.0],
   );
 
-  static const RadialGradient sphereViolet = RadialGradient(
-    center: Alignment(-0.38, -0.5),
-    radius: 1.09,
-    colors: [
-      Color(0xFFF3E5F5),
-      Color(0xFFCE93D8),
-      Color(0xFF8E24AA),
-      Color(0xFF311B92),
-    ],
-    stops: [0.0, 0.36, 0.72, 1.0],
+  /// Hot pink → coral red
+  static const LinearGradient hotPink = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFFE43673), Color(0xFFE43673), Color(0xFFFB5059)],
+    stops: [0.0, 0.27, 1.0],
   );
 
-  static const RadialGradient sphereAmber = RadialGradient(
-    center: Alignment(-0.45, -0.35),
-    radius: 1.06,
-    colors: [
-      Color(0xFFFFFDE7),
-      Color(0xFFFFCA28),
-      Color(0xFFFF8F00),
-      Color(0xFFE65100),
-    ],
-    stops: [0.0, 0.33, 0.69, 1.0],
+  /// Silver → near-black
+  static const LinearGradient silver = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF949494), Color(0xFF949494), Color(0xFF080808)],
+    stops: [0.0, 0.27, 1.0],
   );
 
-  /// Dual-tone orb pairing well with initials on top.
-  static const RadialGradient sphereGb = RadialGradient(
-    center: Alignment(-0.28, -0.52),
-    radius: 1.12,
-    colors: [
-      Color(0xFFFFCCBC),
-      Color(0xFFFF4081),
-      Color(0xFFB388FF),
-      Color(0xFF4527A0),
-    ],
-    stops: [0.0, 0.3, 0.62, 1.0],
+  /// Mid-grey → very dark grey
+  static const LinearGradient black = LinearGradient(
+    begin: _b,
+    end: _e,
+    colors: [Color(0xFF7F7F7F), Color(0xFF7F7F7F), Color(0xFF1F1F1F)],
+    stops: [0.0, 0.27, 1.0],
   );
+
+  /// All 14 presets in display order (matches Figma "Image Use" section).
+  static const List<LinearGradient> all = [
+    blue, sky, teal, emerald, green, forest,
+    orange, red, indigo, purple, rose, hotPink,
+    silver, black,
+  ];
 }
 
 /// Fixed Unsplash URLs for demos/catalog (network + permissions in prod).

package/templates/firebase/lib/components/kasy_tabs.dart

@@ -0,0 +1,431 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Data model
+// ─────────────────────────────────────────────────────────────────────────────
+
+/// Data model for a single tab item.
+class KasyTabItem {
+  final String label;
+  final IconData? icon;
+  final bool enabled;
+
+  const KasyTabItem({
+    required this.label,
+    this.icon,
+    this.enabled = true,
+  });
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Enums
+// ─────────────────────────────────────────────────────────────────────────────
+
+/// Visual style for [KasyTabs].
+enum KasyTabsVariant {
+  /// Sliding white pill on a gray container.
+  primary,
+
+  /// Blue underline indicator with a bottom divider.
+  secondary,
+}
+
+/// Sizing mode for [KasyTabs].
+enum KasyTabsMode {
+  /// Wraps content (intrinsic width tabs).
+  hug,
+
+  /// Each tab stretches to fill the available width equally.
+  fill,
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// KasyTabs
+// ─────────────────────────────────────────────────────────────────────────────
+
+/// Animated tab bar with primary (pill) and secondary (underline) variants.
+///
+/// Usage:
+/// ```dart
+/// KasyTabs(
+///   tabs: ['General', 'Appearance', 'Notifications'],
+///   selectedIndex: _index,
+///   onTabSelected: (i) => setState(() => _index = i),
+/// )
+/// ```
+///
+/// Supports [KasyTabItem] for per-tab icons and disabled state. The short-form
+/// constructor accepts plain [String] labels.
+class KasyTabs extends StatefulWidget {
+  /// Plain-string convenience constructor.
+  ///
+  /// Converts each string to a [KasyTabItem] with default settings.
+  KasyTabs({
+    super.key,
+    required List<String> tabs,
+    required this.selectedIndex,
+    required this.onTabSelected,
+    this.variant = KasyTabsVariant.primary,
+    this.mode = KasyTabsMode.hug,
+  }) : items = tabs.map((l) => KasyTabItem(label: l)).toList();
+
+  /// Full constructor accepting [KasyTabItem] instances (supports icons/disabled).
+  const KasyTabs.items({
+    super.key,
+    required this.items,
+    required this.selectedIndex,
+    required this.onTabSelected,
+    this.variant = KasyTabsVariant.primary,
+    this.mode = KasyTabsMode.hug,
+  });
+
+  final List<KasyTabItem> items;
+
+  /// Index of the currently selected tab.
+  final int selectedIndex;
+
+  /// Called when the user taps an enabled tab.
+  final ValueChanged<int> onTabSelected;
+
+  final KasyTabsVariant variant;
+  final KasyTabsMode mode;
+
+  @override
+  State<KasyTabs> createState() => _KasyTabsState();
+}
+
+class _KasyTabsState extends State<KasyTabs> {
+  // One GlobalKey per tab to measure position/size after layout.
+  late List<GlobalKey> _keys;
+
+  // Indicator geometry (left offset, width) resolved from measured keys.
+  double _indicatorLeft = 0;
+  double _indicatorWidth = 0;
+
+  // Whether we have a valid measurement yet.
+  bool _measured = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _keys = List.generate(
+      widget.items.length,
+      (_) => GlobalKey(),
+    );
+    WidgetsBinding.instance.addPostFrameCallback((_) => _measure());
+  }
+
+  @override
+  void didUpdateWidget(KasyTabs old) {
+    super.didUpdateWidget(old);
+    // Rebuild keys list if tab count changes.
+    if (old.items.length != widget.items.length) {
+      _keys = List.generate(
+        widget.items.length,
+        (_) => GlobalKey(),
+      );
+      _measured = false;
+    }
+    // Re-measure whenever selected index changes or keys were rebuilt.
+    WidgetsBinding.instance.addPostFrameCallback((_) => _measure());
+  }
+
+  void _measure() {
+    if (!mounted) return;
+    if (widget.items.isEmpty) return;
+
+    final int clampedIndex = widget.selectedIndex.clamp(
+      0,
+      widget.items.length - 1,
+    );
+
+    final RenderBox? containerBox =
+        context.findRenderObject() as RenderBox?;
+    if (containerBox == null) return;
+
+    final GlobalKey key = _keys[clampedIndex];
+    final RenderBox? tabBox =
+        key.currentContext?.findRenderObject() as RenderBox?;
+    if (tabBox == null) return;
+
+    final Offset tabOffset = tabBox.localToGlobal(
+      Offset.zero,
+      ancestor: containerBox,
+    );
+
+    final double newLeft = tabOffset.dx;
+    final double newWidth = tabBox.size.width;
+
+    if (!_measured ||
+        (_indicatorLeft - newLeft).abs() > 0.1 ||
+        (_indicatorWidth - newWidth).abs() > 0.1) {
+      setState(() {
+        _indicatorLeft = newLeft;
+        _indicatorWidth = newWidth;
+        _measured = true;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (widget.items.isEmpty) return const SizedBox.shrink();
+
+    return widget.variant == KasyTabsVariant.primary
+        ? _buildPrimary(context)
+        : _buildSecondary(context);
+  }
+
+  // ── Primary (pill indicator) ───────────────────────────────────────────────
+
+  Widget _buildPrimary(BuildContext context) {
+    final KasyColors c = context.colors;
+    final bool isDark = context.isDark;
+
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: c.avatarFallbackFill,
+        borderRadius: BorderRadius.circular(KasyRadius.full),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(4),
+        child: Stack(
+          children: [
+            // Animated pill background.
+            if (_measured)
+              AnimatedPositioned(
+                duration: const Duration(milliseconds: 250),
+                curve: Curves.easeInOut,
+                left: _indicatorLeft,
+                top: 0,
+                bottom: 0,
+                width: _indicatorWidth,
+                child: DecoratedBox(
+                  decoration: BoxDecoration(
+                    color: c.surface,
+                    borderRadius: BorderRadius.circular(KasyRadius.full),
+                    boxShadow: [
+                      BoxShadow(
+                        color: Colors.black.withValues(
+                          alpha: isDark ? 0.18 : 0.08,
+                        ),
+                        blurRadius: 8,
+                        offset: const Offset(0, 2),
+                      ),
+                      BoxShadow(
+                        color: Colors.black.withValues(
+                          alpha: isDark ? 0.10 : 0.04,
+                        ),
+                        spreadRadius: 1,
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            // Tab labels (on top of the pill).
+            Row(
+              mainAxisSize: widget.mode == KasyTabsMode.fill
+                  ? MainAxisSize.max
+                  : MainAxisSize.min,
+              children: List.generate(widget.items.length, (i) {
+                final KasyTabItem item = widget.items[i];
+                final bool selected = i == widget.selectedIndex;
+                return _PrimaryTab(
+                  key: _keys[i],
+                  item: item,
+                  selected: selected,
+                  expand: widget.mode == KasyTabsMode.fill,
+                  onTap: item.enabled ? () => widget.onTabSelected(i) : null,
+                );
+              }),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  // ── Secondary (underline indicator) ───────────────────────────────────────
+
+  Widget _buildSecondary(BuildContext context) {
+    final KasyColors c = context.colors;
+
+    return Stack(
+      clipBehavior: Clip.none,
+      children: [
+        // Full-width bottom divider.
+        Positioned(
+          left: 0,
+          right: 0,
+          bottom: 0,
+          child: DecoratedBox(
+            decoration: BoxDecoration(
+              color: c.outline.withValues(alpha: 0.2),
+            ),
+            child: const SizedBox(height: 1),
+          ),
+        ),
+        // Animated underline indicator.
+        if (_measured)
+          AnimatedPositioned(
+            duration: const Duration(milliseconds: 250),
+            curve: Curves.easeInOut,
+            left: _indicatorLeft,
+            bottom: 0,
+            width: _indicatorWidth,
+            height: 2,
+            child: DecoratedBox(
+              decoration: BoxDecoration(
+                color: c.primary,
+                borderRadius: BorderRadius.circular(1),
+              ),
+            ),
+          ),
+        // Tab labels.
+        Row(
+          mainAxisSize: widget.mode == KasyTabsMode.fill
+              ? MainAxisSize.max
+              : MainAxisSize.min,
+          children: List.generate(widget.items.length, (i) {
+            final KasyTabItem item = widget.items[i];
+            final bool selected = i == widget.selectedIndex;
+            return _SecondaryTab(
+              key: _keys[i],
+              item: item,
+              selected: selected,
+              expand: widget.mode == KasyTabsMode.fill,
+              onTap: item.enabled ? () => widget.onTabSelected(i) : null,
+            );
+          }),
+        ),
+      ],
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Internal tab widgets
+// ─────────────────────────────────────────────────────────────────────────────
+
+class _PrimaryTab extends StatelessWidget {
+  const _PrimaryTab({
+    super.key,
+    required this.item,
+    required this.selected,
+    required this.expand,
+    required this.onTap,
+  });
+
+  final KasyTabItem item;
+  final bool selected;
+  final bool expand;
+  final VoidCallback? onTap;
+
+  Widget _tabContent(BuildContext context) {
+    final KasyColors c = context.colors;
+    final bool disabled = !item.enabled;
+
+    return GestureDetector(
+      onTap: onTap,
+      behavior: HitTestBehavior.opaque,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            if (item.icon != null) ...[
+              Opacity(
+                opacity: disabled ? 0.4 : 1.0,
+                child: Icon(
+                  item.icon,
+                  size: 16,
+                  color: selected ? c.onSurface : c.muted,
+                ),
+              ),
+              const SizedBox(width: 6),
+            ],
+            Opacity(
+              opacity: disabled ? 0.4 : 1.0,
+              child: Text(
+                item.label,
+                style: context.textTheme.labelLarge?.copyWith(
+                  color: selected ? c.onSurface : c.muted,
+                  fontWeight: selected ? FontWeight.w500 : FontWeight.w400,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final Widget inner = _tabContent(context);
+    return expand ? Expanded(child: inner) : inner;
+  }
+}
+
+class _SecondaryTab extends StatelessWidget {
+  const _SecondaryTab({
+    super.key,
+    required this.item,
+    required this.selected,
+    required this.expand,
+    required this.onTap,
+  });
+
+  final KasyTabItem item;
+  final bool selected;
+  final bool expand;
+  final VoidCallback? onTap;
+
+  Widget _tabContent(BuildContext context) {
+    final KasyColors c = context.colors;
+    final bool disabled = !item.enabled;
+
+    return GestureDetector(
+      onTap: onTap,
+      behavior: HitTestBehavior.opaque,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            if (item.icon != null) ...[
+              Opacity(
+                opacity: disabled ? 0.4 : 1.0,
+                child: Icon(
+                  item.icon,
+                  size: 16,
+                  color: selected ? c.onSurface : c.muted,
+                ),
+              ),
+              const SizedBox(width: 6),
+            ],
+            Opacity(
+              opacity: disabled ? 0.4 : 1.0,
+              child: Text(
+                item.label,
+                style: context.textTheme.labelLarge?.copyWith(
+                  color: selected ? c.onSurface : c.muted,
+                  fontWeight: selected ? FontWeight.w600 : FontWeight.w400,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final Widget inner = _tabContent(context);
+    return expand ? Expanded(child: inner) : inner;
+  }
+}

package/templates/firebase/lib/core/home_widgets/home_widget_mywidget_service.dart

@@ -152,13 +152,19 @@ class MyWidgetHomeWidget extends _$MyWidgetHomeWidget
     await HomeWidget.saveWidgetData<String>('isPro', data['isPro'] ?? 'false');
     await HomeWidget.saveWidgetData<String>('quote', data['quote'] ?? '');
 
-    // On Android, saveWidgetData writes to SharedPreferences asynchronously.
-    // Glance's HomeWidgetGlanceStateDefinition reads from the same prefs, but
-    // a tight saveWidgetData→updateWidget sequence can race with the commit —
-    // Glance occasionally recomposes with the previous values (most visible
-    // right after a locale change). A small yield lets the writes settle.
+    // On Android, saveWidgetData writes via SharedPreferences.apply() which
+    // is asynchronous. Glance's HomeWidgetGlanceStateDefinition reads from
+    // the same prefs, but a tight saveWidgetData→updateWidget sequence can
+    // race the apply() flush — Glance recomposes with the previous values
+    // (most visible right after a locale change). Fire two updates spaced
+    // out by 400ms each so even slow devices catch the new state.
     if (!kIsWeb && Platform.isAndroid) {
-      await Future<void>.delayed(const Duration(milliseconds: 120));
+      await Future<void>.delayed(const Duration(milliseconds: 400));
+      await HomeWidget.updateWidget(
+        name: _androidWidgetName,
+        iOSName: _iosWidgetName,
+      );
+      await Future<void>.delayed(const Duration(milliseconds: 400));
     }
 
     await HomeWidget.updateWidget(

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

@@ -184,6 +184,7 @@ const Set<String> _kReadyComponents = <String>{
   'Design System',
   'Dialog',
   'Hover',
+  'Tabs',
   'TextArea',
   'TextField',
   'Sidebar',
@@ -218,7 +219,6 @@ const Set<String> _kWebReadyComponents = <String>{
 
 const Set<String> _kUrgentComponents = <String>{
   'Switch',
-  'Tabs',
   'Radio Group',
   'DatePicker',
 };