kasy-cli 1.40.0 → 1.40.1

package/lib/scaffold/CHANGELOG.json

@@ -1,4 +1,13 @@
 {
+  "1.40.1": {
+    "modules": {
+      "components": {
+        "pt": "Refino do submenu do Kasy Menu em telas estreitas: o submenu agora abre como sanfona embaixo do próprio item (expande inline), em vez de empilhar uma nova folha por cima. Menos custo de interação e sem te jogar numa segunda tela; no desktop ele continua cascateando ao lado (flyout). Já vale na demo web e no app gerado.",
+        "en": "Kasy Menu submenu refinement on narrow screens: the submenu now opens as an accordion right beneath its own item (expands inline) instead of stacking a new sheet on top. Lower interaction cost and no jump to a second surface; on desktop it still cascades to the side (flyout). Live in the web demo and the generated app.",
+        "es": "Refinamiento del submenú del Kasy Menu en pantallas estrechas: el submenú ahora abre como acordeón justo debajo de su propio ítem (se expande inline), en vez de apilar una nueva hoja encima. Menor costo de interacción y sin saltar a una segunda superficie; en escritorio sigue desplegándose al costado (flyout). Disponible en la demo web y en la app generada."
+      }
+    }
+  },
   "1.40.0": {
     "modules": {
       "components": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kasy-cli",
-  "version": "1.40.0",
+  "version": "1.40.1",
   "description": "CLI for scaffolding production-ready Flutter SaaS apps with Firebase, Supabase, or API REST backends.",
   "bin": {
     "kasy": "./bin/kasy.js"

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

@@ -274,7 +274,10 @@ class _KasyAccordionRow extends StatelessWidget {
                     Expanded(
                       child: Text(
                         data.title,
-                        style: context.textTheme.titleMedium?.copyWith(
+                        // Header of an inline row component: 16 / w600 (not the
+                        // 18 screen-section step), matching the alert header.
+                        style: context.textTheme.bodyLarge?.copyWith(
+                          fontWeight: FontWeight.w600,
                           color: context.colors.onSurface,
                         ),
                       ),

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

@@ -51,14 +51,17 @@ class KasyAlert extends StatelessWidget {
   Widget build(BuildContext context) {
     final _KasyAlertPalette palette = _resolvePalette(context, tone);
     final bool hasMessage = message != null && message!.trim().isNotEmpty;
+    // Inline component header: 16 / w600 (one step below an overlay/section
+    // title) so a compact alert card never wears a screen-section-sized title.
     final TextStyle titleStyle =
-        context.textTheme.titleMedium?.copyWith(
+        context.textTheme.bodyLarge?.copyWith(
+          fontWeight: FontWeight.w600,
           color: emphasizeTitleWithTone
               ? palette.accent
               : context.colors.onSurface,
         ) ??
         TextStyle(
-          fontSize: 17,
+          fontSize: 16,
           fontWeight: FontWeight.w600,
           color: emphasizeTitleWithTone
               ? palette.accent

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

@@ -280,8 +280,10 @@ class KasyDialog extends StatelessWidget {
                 Text(
                   message!,
                   textAlign: titleCentered ? TextAlign.center : TextAlign.start,
+                  // Supporting text uses the body token (14); the sheet uses the
+                  // same, so dialog and sheet read identically (they are the same
+                  // surface on desktop). No off-ladder 15.
                   style: context.textTheme.bodyMedium?.copyWith(
-                    fontSize: 15,
                     color: context.colors.onSurface.withValues(alpha: 0.6),
                     height: 1.5,
                   ),

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

@@ -96,7 +96,8 @@ class KasyMenuItem {
   final bool enabled;
 
   /// When set, the row opens a nested menu instead of acting; a trailing chevron
-  /// is shown. Opens as a side popover on desktop, a nested sheet on mobile.
+  /// is shown. Where there's room it cascades as a side flyout (desktop); on a
+  /// narrow screen it expands inline beneath the row (accordion).
   final List<KasyMenuSection>? submenu;
 
   /// Whether tapping this row closes the menu. Null inherits the menu-level
@@ -359,17 +360,18 @@ class _KasyMenuAnchorState extends State<KasyMenuAnchor>
   }
 
   // Decide the open direction only. Position is handled by the LayerLink, so a
-  // slightly-off estimate just flips the menu — it always stays glued. Measured
-  // in the overlay's space (where the panel draws) to stay consistent.
+  // slightly-off estimate just flips the menu — it always stays glued. Mirrors
+  // [KasyDropDown]: measure against the viewport minus the safe-area insets
+  // (notch / home indicator) so the panel never opens under them.
   bool _resolveOpenUp() {
     final RenderBox? box = context.findRenderObject() as RenderBox?;
-    final RenderBox? overlayBox =
-        Overlay.of(context).context.findRenderObject() as RenderBox?;
-    if (box == null || overlayBox == null) return false;
-    final Offset topLeft = box.localToGlobal(Offset.zero, ancestor: overlayBox);
-    final double spaceBelow =
-        overlayBox.size.height - (topLeft.dy + box.size.height);
-    final double spaceAbove = topLeft.dy;
+    if (box == null) return false;
+    final Offset topLeft = box.localToGlobal(Offset.zero);
+    final Size viewport = MediaQuery.sizeOf(context);
+    final EdgeInsets safe = MediaQuery.viewPaddingOf(context);
+    final double triggerBottom = topLeft.dy + box.size.height;
+    final double spaceBelow = viewport.height - safe.bottom - triggerBottom;
+    final double spaceAbove = topLeft.dy - safe.top;
     return spaceBelow < _estimatedHeight() + 8 && spaceAbove > spaceBelow;
   }
 
@@ -591,6 +593,9 @@ class _MenuItemRowState extends State<_MenuItemRow>
 
   // Whether the flyout opens to the left of the row (no room on the right).
   bool _openLeft = false;
+  // Whether the submenu is expanded inline beneath the row (the narrow-screen
+  // accordion fallback, when there's no room for a side cascade).
+  bool _inlineExpanded = false;
 
   bool get _hasSubmenu => widget.item.submenu != null;
 
@@ -615,13 +620,22 @@ class _MenuItemRowState extends State<_MenuItemRow>
     super.dispose();
   }
 
-  void _openSubmenu() {
+  // Toggle the submenu. With room on a side it cascades as a flyout (desktop);
+  // on a narrow screen it expands inline beneath the row (the accordion the
+  // NN/g mobile-subnavigation guidance recommends for a handful of items —
+  // lowest interaction cost, no disorienting second surface).
+  void _toggleSubmenu() {
+    if (_portal.isShowing) {
+      _closeSubmenu();
+      return;
+    }
+    if (_inlineExpanded) {
+      setState(() => _inlineExpanded = false);
+      return;
+    }
     final _FlyoutSide side = _resolveSide();
     if (side == _FlyoutSide.none) {
-      // No room for a side cascade (narrow phone): a 224px panel won't fit
-      // beside the menu, so present the nested menu as a sheet instead of a
-      // flyout clipped off-screen. The cascade still shows on wider layouts.
-      _openSubmenuSheet();
+      setState(() => _inlineExpanded = true);
       return;
     }
     setState(() => _openLeft = side == _FlyoutSide.left);
@@ -635,28 +649,6 @@ class _MenuItemRowState extends State<_MenuItemRow>
     });
   }
 
-  Future<void> _openSubmenuSheet() {
-    final bool dark = Theme.of(context).brightness == Brightness.dark;
-    return showModalBottomSheet<void>(
-      context: context,
-      useRootNavigator: true,
-      backgroundColor: Colors.transparent,
-      barrierColor: Colors.black.withValues(alpha: dark ? 0.6 : 0.45),
-      builder: (_) => KasySheetSurface(
-        child: KasyMenu(
-          sections: widget.item.submenu!,
-          closeOnSelect: widget.menuCloseOnSelect,
-          // A row that closes the menu pops this sheet, then bubbles the close
-          // up so the parent chain dismisses too.
-          onClose: () {
-            Navigator.of(context, rootNavigator: true).pop();
-            _bubbleClose();
-          },
-        ),
-      ),
-    );
-  }
-
   // Pick the side with room for the flyout, or [none] when neither fits (the
   // caller then falls back to a sheet). Position is the LayerLink's job — this
   // only decides the side, measured in the overlay's space.
@@ -677,11 +669,7 @@ class _MenuItemRowState extends State<_MenuItemRow>
 
   void _handleTap() {
     if (_hasSubmenu) {
-      if (_portal.isShowing) {
-        _closeSubmenu();
-      } else {
-        _openSubmenu();
-      }
+      _toggleSubmenu();
       return;
     }
     // Close first (mirrors the call-site ordering that avoids a Navigator lock
@@ -818,13 +806,20 @@ class _MenuItemRowState extends State<_MenuItemRow>
       leading = SizedBox(width: iconSize);
     }
 
-    // Suffix slot: submenu chevron, custom trailing, or a shortcut chip.
+    // Suffix slot: submenu chevron, custom trailing, or a shortcut chip. The
+    // chevron rotates a quarter turn down while the submenu is expanded inline,
+    // so the row reads like an accordion header.
     Widget? trailing;
     if (item.submenu != null) {
-      trailing = Icon(
-        KasyIcons.chevronRight,
-        size: KasyIconSize.sm,
-        color: resolvedLead,
+      trailing = AnimatedRotation(
+        turns: _inlineExpanded ? 0.25 : 0,
+        duration: const Duration(milliseconds: 150),
+        curve: Curves.easeOutCubic,
+        child: Icon(
+          KasyIcons.chevronRight,
+          size: KasyIconSize.sm,
+          color: resolvedLead,
+        ),
       );
     } else if (item.trailing != null) {
       trailing = item.trailing;
@@ -890,13 +885,42 @@ class _MenuItemRowState extends State<_MenuItemRow>
       ),
     );
 
-    // A plain row needs no overlay machinery. A submenu row hosts its flyout
-    // through an OverlayPortal and links the panel to itself for side anchoring.
+    // A plain row needs no overlay machinery.
     if (!_hasSubmenu) return hover;
+
+    // The trigger carries the LayerLink so a side cascade can anchor to it.
+    Widget child = CompositedTransformTarget(link: _link, child: hover);
+
+    // Narrow screens expand the submenu inline, indented beneath the row (so the
+    // nested items align under the title). Mutually exclusive with the cascade.
+    if (_inlineExpanded) {
+      final double indent = iconSize + iconGap;
+      child = Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          child,
+          Padding(
+            padding: EdgeInsets.only(left: indent),
+            child: KasyMenu(
+              sections: item.submenu!,
+              density: widget.compact
+                  ? KasyMenuDensity.compact
+                  : KasyMenuDensity.comfortable,
+              closeOnSelect: widget.menuCloseOnSelect,
+              onClose: _closeChain,
+              tapGroupId: widget.tapGroupId,
+            ),
+          ),
+        ],
+      );
+    }
+
+    // A submenu row hosts its side flyout through an OverlayPortal.
     return OverlayPortal(
       controller: _portal,
       overlayChildBuilder: _buildSubmenuOverlay,
-      child: CompositedTransformTarget(link: _link, child: hover),
+      child: child,
     );
   }
 }

package/templates/firebase/lib/core/theme/texts.dart

@@ -184,31 +184,6 @@ class KasyTextTheme extends ThemeExtension<KasyTextTheme> {
   /// Caption, hint, version label, footnote. 12 / w400.
   TextStyle get caption => bodySmall;
 
-  // --- Overlay & component roles -----------------------------------------
-  // The harmonic ladder for surfaces and components: an OVERLAY (a full
-  // decision surface — dialog, bottom sheet) carries the largest title (20); an
-  // inline COMPONENT header (alert, accordion) sits a step below (16) so it
-  // reads as a header WITHIN the component, not a screen section; supporting
-  // text everywhere is 14. These are deliberately STABLE across breakpoints —
-  // only page/hero headings scale (Material/Apple model). Route every
-  // dialog/sheet/alert/accordion through these so titles never drift per
-  // component.
-
-  /// Title of a modal/overlay surface (dialog, bottom sheet, OTP sheet).
-  /// 20 / w600 — the largest title tier, for full decision surfaces.
-  TextStyle get overlayTitle => titleLarge;
-
-  /// Header of an inline component (alert, accordion). 16 / w600 — content
-  /// emphasis, one clear step below an overlay/section title and above body, so
-  /// a compact card never wears a screen-section-sized title.
-  TextStyle get componentTitle =>
-      bodyLarge.copyWith(fontWeight: FontWeight.w600);
-
-  /// Supporting text / description inside an overlay or component (the message
-  /// under a dialog/sheet/alert title, an accordion body). 14 / w400. Apply the
-  /// muted colour and any line-height at the call site.
-  TextStyle get supportingText => bodyMedium;
-
   /// Builds the full text theme for a given [device].
   ///
   /// Each slot resolves its size from the responsive [KasyTypeScale] ramp at the