kasy-cli 1.16.0 → 1.18.0

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

@@ -1,133 +1,157 @@
 import 'package:flutter/material.dart';
 
-/// Linear gradient presets for [KasyAvatar] via `backgroundGradient` or
-/// [KasyAvatar.gradientFill].
+/// Gradient data for [KasyAvatar] orb-style fills.
 ///
-/// 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.
+/// Holds the four colors needed to render the background wash and the
+/// soft-focus sphere: [bgTop]/[bgBottom] for the canvas gradient, and
+/// [orbTop]/[orbBottom] for the blurred orb overlay.
+///
+/// Matches the HeroUI Figma Kit V3 "Image Use" avatar palette exactly.
+@immutable
+class KasyAvatarGradientData {
+  final Color bgTop;
+  final Color bgBottom;
+  final Color orbTop;
+  final Color orbBottom;
+
+  const KasyAvatarGradientData({
+    required this.bgTop,
+    required this.bgBottom,
+    required this.orbTop,
+    required this.orbBottom,
+  });
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    return other is KasyAvatarGradientData &&
+        other.bgTop == bgTop &&
+        other.bgBottom == bgBottom &&
+        other.orbTop == orbTop &&
+        other.orbBottom == orbBottom;
+  }
+
+  @override
+  int get hashCode => Object.hash(bgTop, bgBottom, orbTop, orbBottom);
+}
+
+/// All 14 orb-style avatar gradient presets (matches Figma "Image Use" section).
 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],
+  /// Cornflower-blue canvas, deep-blue orb.
+  static const KasyAvatarGradientData blueDark = KasyAvatarGradientData(
+    bgTop: Color(0xFFE9E9FF),
+    bgBottom: Color(0xFFCCCDF1),
+    orbTop: Color(0xFF5D9BE7),
+    orbBottom: Color(0xFF0026FF),
   );
 
-  /// 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],
+  /// Ice-blue canvas, cyan-to-violet orb.
+  static const KasyAvatarGradientData blue = KasyAvatarGradientData(
+    bgTop: Color(0xFFE9E9FF),
+    bgBottom: Color(0xFFCCE5F1),
+    orbTop: Color(0xFF5DD0E7),
+    orbBottom: Color(0xFF7300FF),
   );
 
-  /// 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],
+  /// Pale-aqua canvas, aqua-to-deep-blue orb.
+  static const KasyAvatarGradientData sky = KasyAvatarGradientData(
+    bgTop: Color(0xFFE9FAFF),
+    bgBottom: Color(0xFFCCECF1),
+    orbTop: Color(0xFF5DE7E7),
+    orbBottom: Color(0xFF001AFF),
   );
 
-  /// 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],
+  /// Mint canvas, seafoam-to-forest orb.
+  static const KasyAvatarGradientData emerald = KasyAvatarGradientData(
+    bgTop: Color(0xFFE9FFF0),
+    bgBottom: Color(0xFFCCF1D6),
+    orbTop: Color(0xFF52DEB0),
+    orbBottom: Color(0xFF0D5C45),
   );
 
-  /// 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],
+  /// Pale-green canvas, mint-to-royal-blue orb.
+  static const KasyAvatarGradientData green = KasyAvatarGradientData(
+    bgTop: Color(0xFFE9FFEB),
+    bgBottom: Color(0xFFD3F1CC),
+    orbTop: Color(0xFF5DE79D),
+    orbBottom: Color(0xFF0033FF),
   );
 
-  /// 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],
+  /// Sage canvas, turquoise-to-deep-forest orb.
+  static const KasyAvatarGradientData forest = KasyAvatarGradientData(
+    bgTop: Color(0xFFCDE8D5),
+    bgBottom: Color(0xFF9CD0AA),
+    orbTop: Color(0xFF5DD9AF),
+    orbBottom: Color(0xFF094E39),
   );
 
-  /// 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],
+  /// Cream canvas, gold-to-deep-red orb.
+  static const KasyAvatarGradientData orange = KasyAvatarGradientData(
+    bgTop: Color(0xFFFFF8E9),
+    bgBottom: Color(0xFFF1DFCC),
+    orbTop: Color(0xFFE7BD5D),
+    orbBottom: Color(0xFFFF1E00),
   );
 
-  /// 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],
+  /// Blush canvas, salmon-to-scarlet orb.
+  static const KasyAvatarGradientData red = KasyAvatarGradientData(
+    bgTop: Color(0xFFFFE9E9),
+    bgBottom: Color(0xFFF1CCCC),
+    orbTop: Color(0xFFE7885D),
+    orbBottom: Color(0xFFFF0004),
   );
 
-  /// 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],
+  /// Lavender canvas, soft-purple-to-cobalt orb.
+  static const KasyAvatarGradientData indigo = KasyAvatarGradientData(
+    bgTop: Color(0xFFEDCEFF),
+    bgBottom: Color(0xFFF1CCEE),
+    orbTop: Color(0xFFB45DE7),
+    orbBottom: Color(0xFF0055FF),
   );
 
-  /// 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],
+  /// Lilac canvas, medium-purple-to-crimson orb.
+  static const KasyAvatarGradientData purple = KasyAvatarGradientData(
+    bgTop: Color(0xFFEFE9FF),
+    bgBottom: Color(0xFFDBCCF1),
+    orbTop: Color(0xFF8D5DE7),
+    orbBottom: Color(0xFFFF0009),
   );
 
-  /// 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],
+  /// Pink-white canvas, orchid-to-magenta orb.
+  static const KasyAvatarGradientData rose = KasyAvatarGradientData(
+    bgTop: Color(0xFFFFE9FB),
+    bgBottom: Color(0xFFF0CCF1),
+    orbTop: Color(0xFFE75DCB),
+    orbBottom: Color(0xFFFF000D),
   );
 
-  /// 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],
+  /// Blush canvas, hot-pink-to-coral orb.
+  static const KasyAvatarGradientData hotPink = KasyAvatarGradientData(
+    bgTop: Color(0xFFFFE9E9),
+    bgBottom: Color(0xFFF1CCCD),
+    orbTop: Color(0xFFE43673),
+    orbBottom: Color(0xFFFB5059),
   );
 
-  /// 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],
+  /// Light-grey canvas, silver-to-near-black orb.
+  static const KasyAvatarGradientData silver = KasyAvatarGradientData(
+    bgTop: Color(0xFFE3E3E3),
+    bgBottom: Color(0xFFC6C6C6),
+    orbTop: Color(0xFF949494),
+    orbBottom: Color(0xFF080808),
   );
 
-  /// 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],
+  /// Dark-grey canvas, mid-grey-to-very-dark orb.
+  static const KasyAvatarGradientData black = KasyAvatarGradientData(
+    bgTop: Color(0xFF252525),
+    bgBottom: Color(0xFF444444),
+    orbTop: Color(0xFF7F7F7F),
+    orbBottom: Color(0xFF1F1F1F),
   );
 
   /// All 14 presets in display order (matches Figma "Image Use" section).
-  static const List<LinearGradient> all = [
-    blue, sky, teal, emerald, green, forest,
+  static const List<KasyAvatarGradientData> all = [
+    blueDark, blue, sky, emerald, green, forest,
     orange, red, indigo, purple, rose, hotPink,
     silver, black,
   ];

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

@@ -495,8 +495,8 @@ class _KasyButtonShell extends StatelessWidget {
       semanticLabel ?? (label.isEmpty ? 'Button' : label);
 
   Widget _wrapFocus(Widget child, BorderRadius borderRadius) {
-    if (!kIsWeb || !enabled || onPressed == null) return child;
-    return _WebKeyboardFocus(
+    if (!enabled || onPressed == null) return child;
+    return _KeyboardFocus(
       onActivate: onPressed!,
       borderRadius: borderRadius,
       child: child,
@@ -858,24 +858,24 @@ class _KasyButtonMetrics {
   });
 }
 
-/// Web-only wrapper that makes a button keyboard-navigable (Tab) and
-/// activates it on Enter/Space key press. Shows a focus ring when focused.
-class _WebKeyboardFocus extends StatefulWidget {
+/// Makes a button keyboard-navigable (Tab) and activates it on Enter/Space.
+/// Shows a focus ring when focused. Inert on touch-only platforms.
+class _KeyboardFocus extends StatefulWidget {
   final VoidCallback onActivate;
   final Widget child;
   final BorderRadius borderRadius;
 
-  const _WebKeyboardFocus({
+  const _KeyboardFocus({
     required this.onActivate,
     required this.child,
     required this.borderRadius,
   });
 
   @override
-  State<_WebKeyboardFocus> createState() => _WebKeyboardFocusState();
+  State<_KeyboardFocus> createState() => _KeyboardFocusState();
 }
 
-class _WebKeyboardFocusState extends State<_WebKeyboardFocus> {
+class _KeyboardFocusState extends State<_KeyboardFocus> {
   late final FocusNode _node;
   bool _focused = false;