kasy-cli 1.21.9 → 1.23.0

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

@@ -29,9 +29,17 @@ import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart' show SystemUiOverlayStyle;
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 
 /// Inner toolbar band height (orbit hit targets, title baseline).
 const double kasyAppBarToolbarRowHeight = 44;
+
+/// Effective toolbar band height. [KasyAppBar] serves phone and tablet only — on
+/// desktop the richer web header takes over — so the band keeps a single
+/// compact height across every viewport where the app bar appears.
+double kasyAppBarToolbarRowHeightOf(BuildContext context) =>
+    kasyAppBarToolbarRowHeight;
+
 const double kasyAppBarTitleFontScale = 0.92;
 
 /// Tight vertical padding inside the frost, above/below [kasyAppBarToolbarRowHeight].
@@ -48,9 +56,13 @@ enum KasyAppBarScrollTreatment { overlay, intrinsicScroll }
 
 /// Vertical inset for scroll/viewport when using [KasyAppBarScrollTreatment.overlay].
 double kasyAppBarBodyTopOverlap(BuildContext context) {
+  // On desktop the app bar hides (the web header owns the top chrome).
+  if (MediaQuery.sizeOf(context).width >= DeviceType.large.breakpoint) {
+    return 0;
+  }
   return MediaQuery.paddingOf(context).top +
       kasyAppBarChromePaddingTop +
-      kasyAppBarToolbarRowHeight +
+      kasyAppBarToolbarRowHeightOf(context) +
       kasyAppBarChromePaddingBottom;
 }
 
@@ -112,13 +124,11 @@ class KasyFrostedChromeBackground extends StatelessWidget {
   });
 
   /// Translucent tint so blurred content shows through; tuned per brightness.
+  /// Derived from the global `surface` token so the bar lifts off the canvas
+  /// and follows light/dark automatically.
   Color _tint(BuildContext context) {
     final bool dark = Theme.of(context).brightness == Brightness.dark;
-    if (dark) {
-      return const Color(0xFF161618).withValues(alpha: 0.88);
-    }
-    // White (surface) instead of background grey so the bar lifts off the canvas.
-    return const Color(0xFFFFFFFF).withValues(alpha: 0.82);
+    return context.colors.surface.withValues(alpha: dark ? 0.88 : 0.82);
   }
 
   @override
@@ -227,11 +237,16 @@ class KasyAppBar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    // On desktop the web header owns the top chrome, so the page app bar hides.
+    if (MediaQuery.sizeOf(context).width >= DeviceType.large.breakpoint) {
+      return const SizedBox.shrink();
+    }
     final Color orbFg = context.colors.onSurface;
     final Color orbFill = kasyChromeOrbFillColor(context);
     final VoidCallback handleBack = onBack ?? () => Navigator.maybePop(context);
 
-    final double rowHeight = toolbarHeight ?? kasyAppBarToolbarRowHeight;
+    final double rowHeight =
+        toolbarHeight ?? kasyAppBarToolbarRowHeightOf(context);
     final Widget leading = switch (style) {
       KasyAppBarStyle.rootTab => SizedBox(
         width: 44,

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

@@ -153,9 +153,9 @@ class KasyAvatar extends StatelessWidget {
         width: _d,
         height: _d,
         fit: BoxFit.cover,
-        // Evita o blur de decodificação progressiva de JPEG:
-        // enquanto a imagem carrega, mostra o fallback; quando o primeiro
-        // frame está pronto, faz crossfade suave.
+        // Avoids the blur from progressive JPEG decoding:
+        // while the image loads, show the fallback; when the first
+        // frame is ready, do a smooth crossfade.
         frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
           if (wasSynchronouslyLoaded) return child;
           return SizedBox(
@@ -301,7 +301,7 @@ class KasyAvatar extends StatelessWidget {
             width: badge,
             height: badge,
             decoration: BoxDecoration(
-              color: const Color(0xFF81C784),
+              color: context.colors.success,
               shape: BoxShape.circle,
               border: Border.all(color: context.colors.surface, width: 2),
             ),
@@ -451,8 +451,9 @@ _KasyAvatarColors _colorsForTone(
   final KasyColors k = context.colors;
   final bool dark = context.isDark;
 
-  // Accent color per tone (Figma: accent=#0485F7, success=#17C964,
-  // warning=#F5A524, danger=#FF383C, neutral uses neutral fg).
+  // Accent color per tone, from the global theme tokens: the "blue" tone maps
+  // to the primary accent, success/warning/danger to their semantic tokens,
+  // neutral to the foreground.
   Color accentColor() => switch (tone) {
     KasyAvatarTone.blue    => k.primary,
     KasyAvatarTone.neutral => k.grey3,

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

@@ -1,7 +1,7 @@
 import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
-import 'package:flutter/services.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/core/widgets/kasy_pressable_depth.dart';
 
@@ -496,8 +496,8 @@ class _KasyButtonShell extends StatelessWidget {
 
   Widget _wrapFocus(Widget child, BorderRadius borderRadius) {
     if (!enabled || onPressed == null) return child;
-    return _KeyboardFocus(
-      onActivate: onPressed!,
+    return KasyFocusRing(
+      onActivate: onPressed,
       borderRadius: borderRadius,
       child: child,
     );
@@ -625,30 +625,28 @@ class _KasyButtonShell extends StatelessWidget {
 
     if (pressEffect == KasyButtonPressEffect.both) {
       final bool isDark = Theme.of(context).brightness == Brightness.dark;
-      return _wrapFocus(
-        KasyPressableDepth(
-          semanticLabel: _accessibilityLabel,
-          onPressed: onPressed!,
-          clipBorderRadius: resolvedRadius,
-          hapticFeedbackEnabled: hapticFeedbackEnabled,
-          pressOverlayColor: palette.foreground.withValues(
-            alpha: isDark ? 0.04 : 0.10,
-          ),
-          child: painted,
-        ),
-        resolvedRadius,
-      );
-    }
-
-    return _wrapFocus(
-      KasyPressableDepth(
+      return KasyPressableDepth(
         semanticLabel: _accessibilityLabel,
         onPressed: onPressed!,
         clipBorderRadius: resolvedRadius,
         hapticFeedbackEnabled: hapticFeedbackEnabled,
-        child: painted,
-      ),
-      resolvedRadius,
+        pressOverlayColor: palette.foreground.withValues(
+          alpha: isDark ? 0.04 : 0.10,
+        ),
+        // Wrap the focus ring around the painted visual, not the pressable: the
+        // pressable enforces a 44px min tap target and stretches to its parent,
+        // so ringing it would draw an oversized oval around a small round orb.
+        child: _wrapFocus(painted, resolvedRadius),
+      );
+    }
+
+    return KasyPressableDepth(
+      semanticLabel: _accessibilityLabel,
+      onPressed: onPressed!,
+      clipBorderRadius: resolvedRadius,
+      hapticFeedbackEnabled: hapticFeedbackEnabled,
+      // Ring hugs the visual, not the (larger) tap target. See note above.
+      child: _wrapFocus(painted, resolvedRadius),
     );
   }
 
@@ -840,10 +838,10 @@ class _KasyButtonMetrics {
   final EdgeInsets horizontalPadding;
   final double labelFontSize;
 
-  /// Ícone ao lado do rótulo (botões com texto).
+  /// Icon next to the label (buttons with text).
   final double iconSize;
 
-  /// Tamanho do glifo dentro do botão apenas-ícone (pode diferir de [iconSize]).
+  /// Glyph size inside the icon-only button (may differ from [iconSize]).
   final double iconOnlyGlyphSize;
   final double loadingSpinnerExtent;
 
@@ -858,77 +856,3 @@ class _KasyButtonMetrics {
   });
 }
 
-/// 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 _KeyboardFocus({
-    required this.onActivate,
-    required this.child,
-    required this.borderRadius,
-  });
-
-  @override
-  State<_KeyboardFocus> createState() => _KeyboardFocusState();
-}
-
-class _KeyboardFocusState extends State<_KeyboardFocus> {
-  late final FocusNode _node;
-  bool _focused = false;
-
-  @override
-  void initState() {
-    super.initState();
-    _node = FocusNode();
-    _node.addListener(_onFocusChange);
-  }
-
-  @override
-  void dispose() {
-    _node.removeListener(_onFocusChange);
-    _node.dispose();
-    super.dispose();
-  }
-
-  void _onFocusChange() {
-    if (mounted) setState(() => _focused = _node.hasFocus);
-  }
-
-  KeyEventResult _onKeyEvent(FocusNode node, KeyEvent event) {
-    if (event is KeyDownEvent &&
-        (event.logicalKey == LogicalKeyboardKey.enter ||
-            event.logicalKey == LogicalKeyboardKey.space ||
-            event.logicalKey == LogicalKeyboardKey.numpadEnter)) {
-      widget.onActivate();
-      return KeyEventResult.handled;
-    }
-    return KeyEventResult.ignored;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final Color focusColor = Theme.of(context).colorScheme.primary;
-    return Focus(
-      focusNode: _node,
-      onKeyEvent: _onKeyEvent,
-      child: AnimatedContainer(
-        duration: const Duration(milliseconds: 120),
-        decoration: _focused
-            ? BoxDecoration(
-                borderRadius: widget.borderRadius,
-                boxShadow: [
-                  BoxShadow(
-                    color: focusColor.withValues(alpha: 0.5),
-                    spreadRadius: 2,
-                  ),
-                ],
-              )
-            : const BoxDecoration(),
-        child: widget.child,
-      ),
-    );
-  }
-}

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

@@ -494,7 +494,10 @@ class _DialogIconPalette {
 /// Two-button confirm/cancel dialog built on [KasyDialog].
 ///
 /// Feature code supplies copy and callbacks; layout stays in the design system.
-/// Destructive flows use [showKasyBlurDialog] with a danger icon by default.
+/// Every confirm dialog is presented over the same blurred, dimmed backdrop
+/// ([showKasyBlurDialog]) so the experience is identical project-wide — the
+/// [destructive] flag only switches the accent to danger (red button + trash
+/// icon), not whether there's a blur.
 Future<void> showKasyConfirmDialog(
   BuildContext context, {
   required String title,
@@ -506,15 +509,12 @@ Future<void> showKasyConfirmDialog(
   bool destructive = false,
   bool barrierDismissible = false,
   IconData? leadingIcon,
-  KasyDialogIconTone iconTone = KasyDialogIconTone.warning,
+  // Defaults to [info] (primary tone) so the icon bubble matches the primary
+  // confirm button — same harmony destructive flows get (danger icon + danger
+  // button). Override per call when a different accent is needed.
+  KasyDialogIconTone iconTone = KasyDialogIconTone.info,
 }) {
-  final Future<void> Function({
-    required BuildContext context,
-    required Widget Function(BuildContext dialogContext) builder,
-    bool barrierDismissible,
-  }) presentDialog = destructive ? showKasyBlurDialog<void> : showKasyDialog<void>;
-
-  return presentDialog(
+  return showKasyBlurDialog<void>(
     context: context,
     barrierDismissible: barrierDismissible,
     builder: (dialogCtx) => KasyDialog(
@@ -665,7 +665,7 @@ class _BlurDialogScaffoldState extends State<_BlurDialogScaffold> {
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
-    // Rastreia teclado subindo — congela quando fecha.
+    // Tracks the keyboard rising; freezes when it closes.
     if (!_isClosing) {
       _bottomInset = MediaQuery.viewInsetsOf(context).bottom;
     }
@@ -731,7 +731,7 @@ class _BlurDialogScaffoldState extends State<_BlurDialogScaffold> {
       curve: Curves.easeOutQuart,
       reverseCurve: Curves.easeIn,
     );
-    // Backdrop desaparece rapidamente na saída
+    // Backdrop disappears quickly on exit
     final backdropCurved = CurvedAnimation(
       parent: widget.animation,
       curve: Curves.linear,

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

@@ -0,0 +1,84 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+/// Full-screen image lightbox: a single image floating over a dimmed, blurred
+/// backdrop — no card, no chrome. Tapping anywhere outside the image (or
+/// pressing back) dismisses it. Pinch / double-tap to zoom while open.
+///
+/// Pass a [heroTag] (e.g. the photo id) matching a [Hero] around the source
+/// thumbnail to get a smooth shared-element zoom into and out of the viewer.
+Future<void> showKasyImageViewer(
+  BuildContext context, {
+  required String imageUrl,
+  Object? heroTag,
+}) {
+  return Navigator.of(context, rootNavigator: true).push<void>(
+    PageRouteBuilder<void>(
+      opaque: false,
+      barrierColor: Colors.transparent,
+      transitionDuration: const Duration(milliseconds: 280),
+      reverseTransitionDuration: const Duration(milliseconds: 220),
+      pageBuilder: (_, _, _) =>
+          _ImageViewer(imageUrl: imageUrl, heroTag: heroTag),
+      transitionsBuilder: (_, animation, _, child) {
+        // The image itself rides the Hero flight; only the backdrop fades.
+        return FadeTransition(opacity: animation, child: child);
+      },
+    ),
+  );
+}
+
+class _ImageViewer extends StatelessWidget {
+  const _ImageViewer({required this.imageUrl, this.heroTag});
+
+  final String imageUrl;
+  final Object? heroTag;
+
+  @override
+  Widget build(BuildContext context) {
+    final bool dark = context.isDark;
+
+    Widget image = Image.network(imageUrl, fit: BoxFit.contain);
+    if (heroTag != null) {
+      image = Hero(tag: heroTag!, child: image);
+    }
+
+    return Scaffold(
+      backgroundColor: Colors.transparent,
+      body: Stack(
+        fit: StackFit.expand,
+        children: <Widget>[
+          // Dimmed + blurred backdrop. Tapping it closes the viewer.
+          GestureDetector(
+            behavior: HitTestBehavior.opaque,
+            onTap: () => Navigator.of(context).maybePop(),
+            child: BackdropFilter(
+              filter: ImageFilter.blur(sigmaX: 18, sigmaY: 18),
+              child: ColoredBox(
+                color: Colors.black.withValues(alpha: dark ? 0.74 : 0.62),
+                child: const SizedBox.expand(),
+              ),
+            ),
+          ),
+
+          // The single image, centered. A transparent tap target around it
+          // (via the padding) still falls through to the backdrop's onTap.
+          SafeArea(
+            child: Padding(
+              padding: const EdgeInsets.all(KasySpacing.lg),
+              child: Center(
+                child: InteractiveViewer(
+                  minScale: 1.0,
+                  maxScale: 4.0,
+                  child: image,
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}