kasy-cli 1.32.0 → 1.34.0

package/templates/firebase/DESIGN_SYSTEM.md

@@ -0,0 +1,234 @@
+# Kasy Design System
+
+**Version 1.0.0** · last updated 2026-06-11
+
+The single source of truth for how the app looks. Everything here lives in code
+under `lib/core/theme/` and `lib/components/`, so changing a token in one place
+updates the whole app (web, Android, iOS) at once. This document just writes the
+rules down so anyone, including projects generated by the Kasy CLI, inherits the
+same standard without guessing.
+
+Design principle: **clean, modern, minimal**. Lots of surface, one accent colour
+used sparingly, no loud weights. The Home screen (sidebar + header + elevated
+`KasyCard`) is the reference for "what good looks like"; new screens should
+mirror it.
+
+---
+
+## The golden rule
+
+Use **tokens and roles**, never bespoke values.
+
+| Instead of…                         | Use…                                         |
+| ----------------------------------- | -------------------------------------------- |
+| `fontSize: 16, fontWeight: w600`    | `context.textTheme.*` / `KasyTextTheme.*`    |
+| `Icon(size: 20)`                    | `Icon(size: KasyIconSize.lg)`                |
+| `EdgeInsets.all(16)`                | `EdgeInsets.all(KasySpacing.md)`             |
+| `BorderRadius.circular(16)`         | `BorderRadius.circular(KasyRadius.lg)`       |
+| `Color(0xFF…)` / `Colors.*`         | `context.colors.*`                           |
+| `ElevatedButton`, `TextButton`      | `KasyButton`                                 |
+| `AlertDialog`, `SnackBar`           | `showKasyConfirmDialog`, `showKasyToast`     |
+
+A bespoke number is only acceptable when a component is being *calibrated* (the
+sidebar, the date-picker grid, badges) and there is no token that fits. When in
+doubt, add or reuse a role rather than hardcoding.
+
+---
+
+## Typography — `KasyTextTheme` (`lib/core/theme/texts.dart`)
+
+### HeroUI scale (the raw roles, Inter)
+
+| Role            | Size / weight / line-height |
+| --------------- | --------------------------- |
+| `heading1`      | 36 / w800 / 40              |
+| `heading2`      | 24 / w700 / 32              |
+| `heading3`      | 20 / w600 / 28              |
+| `heading4`      | 16 / w600 / 24              |
+| `bodyBase`      | 16 / w400                   |
+| `bodyBaseMedium`| 16 / w500                   |
+| `bodySm`        | 14 / w400                   |
+| `bodySmMedium`  | 14 / w500                   |
+| `bodyXs`        | 12 / w400                   |
+| `bodyXsMedium`  | 12 / w500                   |
+
+### Semantic app roles (prefer these on screens)
+
+| Role           | Maps to                        | Use for                                   |
+| -------------- | ------------------------------ | ----------------------------------------- |
+| `pageTitle`    | `heading2` (24/w700)           | Screen / page titles, onboarding titles   |
+| `sectionTitle` | `heading4` (16/w600)           | Detail / section headings                 |
+| `sectionLabel` | 12 / w600 / letter-spacing 0.5 | Uppercase group eyebrows (lists, settings)|
+| `rowTitle`     | `bodySmMedium` (14/w500)       | List / settings row titles                |
+| `rowValue`     | `bodySm` (14/w400)             | List / settings row values                |
+| `cardTitle`    | `bodySmMedium` (14/w500)       | Card titles                               |
+| `cardSubtitle` | `bodyXs` (12/w400)             | Card secondary text                       |
+| `caption`      | `bodyXs` (12/w400)             | Captions, helper text                     |
+
+Access roles in widgets via `context.textTheme.*` (Material slots, colour
+applied) or `KasyTextTheme.*` (raw role, apply colour with `.copyWith`).
+
+Material → role mapping: `headlineMedium = heading2`, `headlineSmall =
+titleLarge = heading3`, `titleMedium = heading4`.
+
+The chrome/app-bar title is **w700** (not w900). Black weights read as heavy and
+fight the rest of the UI.
+
+---
+
+## Icon sizes — `KasyIconSize` (`lib/core/theme/icon_sizes.dart`)
+
+| Token       | px | Token alias  | = |
+| ----------- | -- | ------------ | -- |
+| `xxs`       | 12 | `rowLeading` | `lg` (20) |
+| `xs`        | 14 | `rowTrailing`| `sm` (16) |
+| `sm`        | 16 | `chrome`     | `lg` (20) |
+| `md`        | 18 | `inline`     | `md` (18) |
+| `lg`        | 20 | | |
+| `xl`        | 24 | | |
+| `xxl`       | 28 | | |
+| `display`   | 36 | | |
+| `hero`      | 72 | | |
+
+Never pass a numeric `size:` to `Icon`; use a token so re-scaling is one edit.
+
+---
+
+## Spacing — `KasySpacing` (`lib/core/theme/spacing.dart`)
+
+`xs 4 · sm 8 · smd 12 · md 16 · lg 24 · xl 32 · xxl 48 · xxxl 64`
+
+`pageHorizontalGutter = md (16)` · `pageVerticalGutter = sm (8)` ·
+`belowChromeContentGap = 20`.
+
+## Radius — `KasyRadius` (`lib/core/theme/radius.dart`)
+
+Semantic: `xs 4 · sm 8 · md 12 · lg 16 · xl 24 · full 999`.
+`KasyCard` defaults to `lg` (16).
+
+---
+
+## Colours — `KasyColors`, via `context.colors.*`
+
+Always pull colours from `context.colors.*` so light/dark resolve automatically.
+Key tokens: `primary`, `onPrimary`, `surface`, `onSurface`, `onBackground`,
+`muted`, `fieldLabel`, `outline`, `error` / `onError`, `success`, `warning`,
+`surfacePrimarySoft`, `surfaceNeutralSoft`, `surfaceErrorSoft`.
+
+Brand: avocado green `#D2F51E` (accent), deep green `#011820` (dark ground).
+Disabled state: blend the colour toward the surface (opaque), never raw opacity.
+
+---
+
+## Components
+
+### `KasyButton`
+Sizes (height): `small 40` · `medium 45` (default) · `large 54`. Radius
+`KasyRadius.md`. Variants: primary, secondary, tertiary, destructive,
+destructiveSoft, inverse, link, soft, neutral, outline, ghost.
+
+### `KasyTextField`
+Canonical single-line height: **`singleLineHeight = 45`** (drives the field's
+vertical padding so the box itself is exactly that tall on every platform — web
+density is normalised to `standard`). Matches the medium button.
+
+Variants:
+- **primary** — surface fill + hairline border + soft shadow (floats; good on a
+  bare background).
+- **secondary** — elevated fill (contrasts on a card) + border, no shadow.
+- **flat** — primary's surface fill + a soft border, **no shadow**. For fields
+  sitting on a same-coloured card. Border comes from
+  `KasyShadows.inputFieldFlatBorder` (derived from `onSurface`, so it reads in
+  both light and dark; subtle by design).
+- **embedded** — transparent, no border, no shadow.
+
+Auth screens (sign in / sign up / recover) use **flat** on every breakpoint.
+A custom `contentPadding` opts a field out of the 45 lock (e.g. the compact
+header search). Use `forceFocusBorder` to show the "active" focused border from
+state without taking real focus (composite triggers like the date picker).
+
+### `KasyTextArea`
+Multi-line sibling of `KasyTextField`; same variants (primary / secondary / flat
+/ embedded). Height grows with content (not locked to 45).
+
+### `KasyDatePicker`
+Reuses `KasyTextField` as a read-only trigger, so it inherits the field look and
+the 45 height. The "open" border is painted from state (`forceFocusBorder`), so
+a mouse click never doubles the keyboard focus ring and the border never drops
+while the calendar is open.
+
+### `KasyCard`
+Elevated surface panel, radius `KasyRadius.lg` (16). The base for screen content.
+
+### `KasyScreen`
+Opt-in screen scaffold. A new page wrapped in it gets the internal-screen
+contract for free: page background, a centred content column capped at
+`maxContentWidth` (~600), the page gutter, scroll handling and an optional
+`KasyCard`. It is a thin convenience over `Scaffold` (same `appBar` /
+`floatingActionButton` / `bottomNavigationBar` slots), so it never blocks a
+screen that needs bespoke chrome.
+
+```dart
+KasyScreen(
+  appBar: KasyAppBar.root(title: 'Settings'),
+  card: true,
+  child: Column(children: [...]),
+)
+```
+
+---
+
+## Internal-screen contract
+
+New internal screens follow the sidebar / Home ruler:
+- Body text 14, icons 20 (`KasyIconSize.lg`), titles ~16-17 (`sectionTitle`).
+- `KasyCard` radius 16, content width contained (~600), no oversized boxes.
+- Use `KasyButton`, `showKasyConfirmDialog`, `showKasyToast` — not raw Material.
+- Haptics only on native (`if (!kIsWeb)`); "hide chrome on scroll" only on the
+  phone breakpoint (`width < 768`).
+
+---
+
+## Keeping it consistent — the guard-rail (optional)
+
+`tool/design_check.dart` is a plain Dart script that flags a **feature screen**
+reaching around the design system (raw `fontSize`, raw `Color`, raw Material
+widgets, literal icon sizes). The design system's own code (`lib/components`,
+`lib/core`, `lib/main.dart`) is out of scope — that is where the primitives are
+built.
+
+```bash
+dart run tool/design_check.dart
+```
+
+It is **opt-in and non-blocking by default**: nothing runs it automatically (not
+wired into `flutter analyze`, builds or git hooks). Run it locally or add it to
+CI to turn the convention into a gate. It has no extra dependency — read it, tune
+the allowlists at the top, or delete it. For a deliberate one-off, put
+`// design-check: ignore` on the line.
+
+This is intentionally not a cage: a project built with the kit can relax or drop
+it freely, and rebranding is still a token change (colours / type) in one place.
+
+---
+
+## Changelog
+
+### 1.1.0 — 2026-06-11
+- `KasyScreen` scaffold added (opt-in internal-screen contract).
+- Design guard-rail added (`tool/design_check.dart`), opt-in / non-blocking.
+- Feature layer brought to a green baseline against the guard-rail (deliberate
+  exceptions marked with `// design-check: ignore`).
+
+
+### 1.0.0 — 2026-06-11
+- Icon sizes centralised into `KasyIconSize`; product migrated off numeric sizes.
+- Semantic typography roles added (`pageTitle`, `sectionTitle`, `sectionLabel`,
+  `rowTitle`, …).
+- `KasyTextField`: `flat` variant + `forceFocusBorder`; single-line height
+  locked to **45** via derived padding (platform-independent); flat border role
+  `inputFieldFlatBorder` (visible in both themes, subtle).
+- `KasyButton` medium height aligned to **45**.
+- `KasyTextArea` gained the variant set.
+- App-bar title weight `w900 → w700`; onboarding titles `28/26 → 24` (page-title
+  scale); notifications group eyebrow → `sectionLabel`.

package/templates/firebase/docs/auth-setup.en.md

@@ -73,9 +73,9 @@ Requires an [Apple Developer](https://developer.apple.com) account (paid).
 >
 > **Android**: the Apple button is hidden by design (it needs the paid Services ID web flow and adds little on Android for a SaaS). Leave it hidden.
 >
-> **Web (Firebase)**: works after Steps 1-4 above (`withAppleWebSignin` already ships `true`). The Services ID Return URL (`firebaseapp.com/__/auth/handler`) covers the popup flow.
+> **Web (Firebase)**: after Steps 1-3, run `kasy apple-web` — it writes the Services ID + Team ID + Key ID + `.p8` into the Firebase Apple provider and turns on `withAppleWebSignin` (which ships `false`). The Services ID Return URL (`firebaseapp.com/__/auth/handler`) covers the popup flow. Firebase re-signs the secret itself (never expires).
 >
-> **Web (Supabase)**: the CLI ships `withAppleWebSignin = false` (native iOS works; web needs more). To enable it: in Supabase → Authentication → Providers → Apple, add the **client secret** (a JWT signed with your `.p8` key + Services ID), then set `withAppleWebSignin = true` in `lib/core/config/features.dart`.
+> **Web (Supabase)**: Apple on the web for Supabase is **not wired in the app yet** (roadmap) — the button stays hidden on web. On Supabase, Apple works on **native iOS only** (already set up by `kasy new`). See `ROADMAP.md`.
 
 ---
 

package/templates/firebase/docs/auth-setup.es.md

@@ -73,9 +73,9 @@ Requiere cuenta de [Apple Developer](https://developer.apple.com) (de pago).
 >
 > **Android**: el botón Apple queda oculto por defecto (necesita el flujo del Services ID de pago y aporta poco en Android para un SaaS). Déjalo oculto.
 >
-> **Web (Firebase)**: funciona tras los Pasos 1 a 4 anteriores (`withAppleWebSignin` ya viene `true`). La Return URL del Services ID (`firebaseapp.com/__/auth/handler`) cubre el flujo de popup.
+> **Web (Firebase)**: tras los Pasos 1 a 3, ejecuta `kasy apple-web` — escribe el Services ID + Team ID + Key ID + `.p8` en el proveedor Apple de Firebase y activa `withAppleWebSignin` (que viene `false`). La Return URL del Services ID (`firebaseapp.com/__/auth/handler`) cubre el flujo de popup. Firebase vuelve a firmar el secret solo (no expira).
 >
-> **Web (Supabase)**: la CLI genera `withAppleWebSignin = false` (iOS nativo funciona; la web necesita más). Para habilitar: en Supabase → Authentication → Providers → Apple, agrega el **client secret** (un JWT firmado con la clave `.p8` + Services ID) y luego define `withAppleWebSignin = true` en `lib/core/config/features.dart`.
+> **Web (Supabase)**: Apple en la web para Supabase **aún no viene activado en la app** (roadmap) — el botón queda oculto en la web. En Supabase, Apple funciona solo en **iOS nativo** (ya configurado por `kasy new`). Consulta `ROADMAP.md`.
 
 ---
 

package/templates/firebase/docs/auth-setup.pt.md

@@ -73,9 +73,9 @@ Requer conta [Apple Developer](https://developer.apple.com) (paga).
 >
 > **Android**: o botão Apple fica escondido por padrão (exige o fluxo do Services ID pago e agrega pouco no Android para um SaaS). Deixe escondido.
 >
-> **Web (Firebase)**: funciona depois dos Passos 1 a 4 acima (`withAppleWebSignin` já vem `true`). A Return URL do Services ID (`firebaseapp.com/__/auth/handler`) cobre o fluxo de popup.
+> **Web (Firebase)**: depois dos Passos 1 a 3, rode `kasy apple-web` — ele grava o Services ID + Team ID + Key ID + `.p8` no provedor Apple do Firebase e liga `withAppleWebSignin` (que nasce `false`). A Return URL do Services ID (`firebaseapp.com/__/auth/handler`) cobre o fluxo de popup. O Firebase re-assina o secret sozinho (não expira).
 >
-> **Web (Supabase)**: a CLI gera `withAppleWebSignin = false` (iOS nativo funciona; web precisa de mais). Para habilitar: em Supabase → Authentication → Providers → Apple, adicione o **client secret** (um JWT assinado com a chave `.p8` + Services ID) e depois defina `withAppleWebSignin = true` em `lib/core/config/features.dart`.
+> **Web (Supabase)**: Apple na web no Supabase **não vem ligado no app ainda** (roadmap) — o botão fica escondido na web. No Supabase, o Apple funciona só no **iOS nativo** (já configurado pelo `kasy new`). Veja `ROADMAP.md`.
 
 ---
 

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

@@ -21,6 +21,7 @@ export 'kasy_date_picker.dart';
 export 'kasy_dialog.dart';
 export 'kasy_image_viewer.dart';
 export 'kasy_otp_verification_bottom_sheet.dart';
+export 'kasy_screen.dart';
 export 'kasy_sidebar.dart';
 export 'kasy_skeleton.dart';
 export 'kasy_status_tag.dart';

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

@@ -304,7 +304,10 @@ class KasyAppBar extends StatelessWidget {
         context.textTheme.headlineSmall ?? context.textTheme.titleLarge;
     final TextStyle? titleStyle = titleRef?.copyWith(
       fontSize: (titleRef.fontSize ?? 24) * kasyAppBarTitleFontScale,
-      fontWeight: FontWeight.w900,
+      // w700 (not w900): a clean page-title weight that matches the Home /
+      // sidebar scale. w900 read as a heavy "black" that fought the rest of
+      // the chrome.
+      fontWeight: FontWeight.w700,
       letterSpacing: -0.35,
       color: context.colors.onBackground,
     );

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

@@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/components/kasy_card.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/page_background.dart';
+
+/// Canonical screen scaffold. A new page that uses it inherits the internal
+/// screen contract for free: the page background, a centred content column
+/// capped at [maxContentWidth], the page gutter, scroll handling, and
+/// (optionally) a [KasyCard] wrapper — all from design-system tokens.
+///
+/// Opt-in by design: it is a thin convenience over [Scaffold] (it forwards the
+/// same `appBar`, `floatingActionButton`, `bottomNavigationBar` slots), not a
+/// cage. Screens that need bespoke chrome can keep using [Scaffold] directly —
+/// nothing here is forced, and any value is overridable.
+///
+/// ```dart
+/// KasyScreen(
+///   appBar: KasyAppBar.root(title: 'Settings'),
+///   card: true,
+///   child: Column(children: [...]),
+/// )
+/// ```
+class KasyScreen extends StatelessWidget {
+  const KasyScreen({
+    super.key,
+    required this.child,
+    this.appBar,
+    this.scrollable = true,
+    this.maxContentWidth = 600,
+    this.padding,
+    this.card = false,
+    this.backgroundColor,
+    this.resizeToAvoidBottomInset,
+    this.floatingActionButton,
+    this.bottomNavigationBar,
+  });
+
+  /// Page content.
+  final Widget child;
+
+  /// Optional top bar. Same slot as [Scaffold.appBar]; pass any
+  /// [PreferredSizeWidget].
+  final PreferredSizeWidget? appBar;
+
+  /// Wrap the content in a scroll view (default true). Set false for screens
+  /// that manage their own scrolling (e.g. a full-bleed list).
+  final bool scrollable;
+
+  /// Max width of the content column on wide screens. The internal-screen
+  /// contract is ~600; content is centred within the available width so it does
+  /// not stretch edge-to-edge on web/desktop.
+  final double maxContentWidth;
+
+  /// Padding around the content. Defaults to the horizontal page gutter plus
+  /// vertical breathing room.
+  final EdgeInsetsGeometry? padding;
+
+  /// Wrap the content in an elevated [KasyCard] (radius 16), matching the Home
+  /// reference look.
+  final bool card;
+
+  /// Page background. Defaults to the theme background token.
+  final Color? backgroundColor;
+
+  /// Forwarded to [Scaffold.resizeToAvoidBottomInset].
+  final bool? resizeToAvoidBottomInset;
+
+  /// Forwarded to [Scaffold.floatingActionButton].
+  final Widget? floatingActionButton;
+
+  /// Forwarded to [Scaffold.bottomNavigationBar].
+  final Widget? bottomNavigationBar;
+
+  @override
+  Widget build(BuildContext context) {
+    final EdgeInsetsGeometry resolvedPadding = padding ??
+        const EdgeInsets.symmetric(
+          horizontal: KasySpacing.pageHorizontalGutter,
+          vertical: KasySpacing.lg,
+        );
+
+    Widget content = ConstrainedBox(
+      constraints: BoxConstraints(maxWidth: maxContentWidth),
+      child: card ? KasyCard(child: child) : child,
+    );
+
+    content = Align(
+      alignment: Alignment.topCenter,
+      child: Padding(padding: resolvedPadding, child: content),
+    );
+
+    if (scrollable) {
+      content = SingleChildScrollView(
+        physics: const ClampingScrollPhysics(),
+        keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
+        child: content,
+      );
+    }
+
+    return Scaffold(
+      backgroundColor: backgroundColor ?? context.colors.background,
+      resizeToAvoidBottomInset: resizeToAvoidBottomInset,
+      appBar: appBar,
+      floatingActionButton: floatingActionButton,
+      bottomNavigationBar: bottomNavigationBar,
+      body: Background(
+        bgColor: backgroundColor,
+        // top:false when an app bar is present — Scaffold already insets the
+        // body below it, so SafeArea only needs to guard the bottom/sides.
+        child: SafeArea(top: appBar == null, child: content),
+      ),
+    );
+  }
+}

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

@@ -52,29 +52,36 @@ class KasyToast extends StatelessWidget {
         color: c.surface,
         borderRadius: KasyRadius.lgBorderRadius,
         border: Border.all(
-          color: c.outline.withValues(alpha: isDark ? 0.22 : 0.28),
+          color: c.outline.withValues(alpha: isDark ? 0.20 : 0.20),
         ),
         boxShadow: [
           BoxShadow(
-            color: Colors.black.withValues(alpha: isDark ? 0.12 : 0.04),
-            blurRadius: 10,
-            offset: const Offset(0, 4),
+            color: Colors.black.withValues(alpha: isDark ? 0.22 : 0.06),
+            blurRadius: 18,
+            offset: const Offset(0, 6),
           ),
         ],
       ),
       child: Padding(
-        padding: const EdgeInsets.symmetric(
-          horizontal: KasySpacing.md,
-          vertical: 14,
+        // Tighter vertical rhythm and less right padding (the close affordance
+        // is a light icon, not a filled button) for a slimmer, refined bar.
+        padding: const EdgeInsets.fromLTRB(
+          KasySpacing.md,
+          KasySpacing.smd,
+          KasySpacing.sm,
+          KasySpacing.smd,
         ),
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             Padding(
-              padding: const EdgeInsets.only(top: 2),
-              child: icon ?? Icon(pal.icon, size: KasyIconSize.xl, color: pal.accent),
+              padding: const EdgeInsets.only(top: 1),
+              // Only the icon carries the tone colour; the title stays neutral
+              // so the toast reads calm instead of shouting.
+              child: icon ??
+                  Icon(pal.icon, size: KasyIconSize.lg, color: pal.accent),
             ),
-            const SizedBox(width: KasySpacing.smd),
+            const SizedBox(width: KasySpacing.sm),
             Expanded(
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
@@ -82,38 +89,34 @@ class KasyToast extends StatelessWidget {
                 children: [
                   Text(
                     title,
-                    style: context.textTheme.titleMedium?.copyWith(
-                      color: pal.accent,
-                      fontWeight: FontWeight.w700,
+                    style: context.textTheme.titleSmall?.copyWith(
+                      color: c.onSurface,
+                      fontWeight: FontWeight.w600,
                     ),
                   ),
                   if (message != null) ...[
-                    const SizedBox(height: 4),
+                    const SizedBox(height: 2),
                     Text(
                       message!,
                       style: context.textTheme.bodyMedium?.copyWith(
-                        // Slightly darker than muted in light, slightly lighter in dark.
-                        color: Color.lerp(
-                          c.muted,
-                          isDark ? Colors.white : Colors.black,
-                          0.18,
-                        ),
+                        color: c.muted,
+                        height: 1.35,
                       ),
                     ),
                   ],
                 ],
               ),
             ),
-            const SizedBox(width: KasySpacing.smd),
-            Padding(
-              padding: const EdgeInsets.only(top: 1),
-              child: KasyButton(
-                label: 'Close',
-                size: KasyButtonSize.small,
-                backgroundColor: pal.buttonBg,
-                foregroundColor: pal.buttonFg,
-                onPressed: onClose,
-              ),
+            const SizedBox(width: KasySpacing.xs),
+            KasyButton.iconOnly(
+              icon: KasyIcons.close,
+              variant: KasyButtonVariant.ghost,
+              foregroundColor: c.muted,
+              size: KasyButtonSize.small,
+              iconOnlyLayoutExtent: 28,
+              iconGlyphSize: 16,
+              onPressed: onClose,
+              semanticLabel: MaterialLocalizations.of(context).closeButtonTooltip,
             ),
           ],
         ),
@@ -706,63 +709,29 @@ class _AnimatedToastState extends State<_AnimatedToast>
 // ---------------------------------------------------------------------------
 
 class _Palette {
-  const _Palette({
-    required this.accent,
-    required this.icon,
-    required this.buttonBg,
-    required this.buttonFg,
-  });
+  const _Palette({required this.accent, required this.icon});
 
   final Color accent;
   final IconData icon;
-  final Color buttonBg;
-  final Color buttonFg;
 }
 
 _Palette _palette(KasyColors c, KasyToastTone tone) {
   switch (tone) {
     case KasyToastTone.neutral:
-      return _Palette(
-        accent: c.onSurface,
-        icon: KasyIcons.notification,
-        buttonBg: c.surfaceNeutralSoft,
-        buttonFg: c.onSurface,
-      );
+      return _Palette(accent: c.onSurface, icon: KasyIcons.notification);
     case KasyToastTone.accent:
-      return _Palette(
-        accent: c.primary,
-        icon: KasyIcons.info,
-        buttonBg: c.primary,
-        // The Close button sits on a solid, vivid tone color — keep its label
-        // white for reliable contrast regardless of the brand "on" token.
-        buttonFg: Colors.white,
-      );
+      return _Palette(accent: c.primary, icon: KasyIcons.info);
     case KasyToastTone.success:
       final Color successDark = HSLColor.fromColor(c.success)
           .withLightness(
             (HSLColor.fromColor(c.success).lightness - 0.09).clamp(0.0, 1.0),
           )
           .toColor();
-      return _Palette(
-        accent: successDark,
-        icon: KasyIcons.checkCircle,
-        buttonBg: successDark,
-        buttonFg: Colors.white,
-      );
+      return _Palette(accent: successDark, icon: KasyIcons.checkCircle);
     case KasyToastTone.warning:
-      return _Palette(
-        accent: c.warning,
-        icon: KasyIcons.privacy,
-        buttonBg: c.warning,
-        buttonFg: Colors.white,
-      );
+      return _Palette(accent: c.warning, icon: KasyIcons.privacy);
     case KasyToastTone.danger:
-      return _Palette(
-        accent: c.error,
-        icon: KasyIcons.error,
-        buttonBg: c.error,
-        buttonFg: Colors.white,
-      );
+      return _Palette(accent: c.error, icon: KasyIcons.error);
   }
 }
 

package/templates/firebase/lib/core/chrome/chrome_visibility.dart

@@ -71,6 +71,28 @@ class KasyChromeVisibility {
   }
 }
 
+/// Brings the chrome back whenever a route is pushed onto or popped from the
+/// root navigator. Tab switches already reset via [BartScaffold.onRouteChanged],
+/// but detail screens (feedback, reminders, …) are pushed on the root navigator
+/// and bypass that — so without this, returning to a screen that had scrolled
+/// its chrome away would leave the app bar and bottom menu stuck hidden.
+///
+/// Only the chrome is restored; the destination screen keeps its scroll position
+/// (the framework preserves it), matching how large apps handle back navigation.
+class KasyChromeVisibilityObserver extends NavigatorObserver {
+  void _reset() => KasyChromeVisibility.instance.resetShown();
+
+  @override
+  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) => _reset();
+
+  @override
+  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) => _reset();
+
+  @override
+  void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) =>
+      _reset();
+}
+
 // ---------------------------------------------------------------------------
 // Configuration — edit these to change the experience your app ships with.
 // ---------------------------------------------------------------------------

package/templates/firebase/lib/core/config/features.dart

@@ -12,6 +12,11 @@ const bool withLocalReminders  = true;
 /// the CLI generates them as `false`. Apple shows on iOS/macOS regardless; it is
 /// hidden on Android (also needs a paid Service ID, and the native flow throws).
 const bool withAppleWebSignin = true;
+/// When true, the Facebook sign-in button is shown on WEB. Facebook-on-web works
+/// on the Firebase backend (signInWithPopup) after `kasy facebook`; on Supabase the
+/// web flow isn't wired yet (roadmap), so the CLI ships this `false` there. Native
+/// (iOS/Android) always shows the Facebook button regardless of this flag.
+const bool withFacebookWebSignin = false;
 /// When true, the app includes web support:
 ///   - anonymous sign-up is disabled on web (user is redirected to /signin)
 ///   - onboarding is skipped on web