kasy-cli 1.19.0 → 1.19.3

package/bin/kasy.js

@@ -354,8 +354,9 @@ function buildProgram(language) {
       .argument('[directory]', 'Project folder (default: current directory)', '.')
       .option('--ios', 'Run on iOS simulator/device')
       .option('--android', 'Run on Android emulator/device')
-      .option('--web', 'Run on Chrome (web)')
-      .option('--web-port <port>', 'Fixed port for Chrome (default 5555) — keeps the origin stable so Firebase Auth sessions persist between runs')
+      .option('--web', 'Run on web — prints localhost URL in lime so you open it in your own browser (your extensions, your accounts)')
+      .option('--open', 'With --web: auto-launch a clean Chrome window (Flutter profile, no extensions) instead of just printing the URL')
+      .option('--web-port <port>', 'Fixed port for web (default 5555) — keeps the origin stable so Firebase Auth sessions persist between runs')
       .option('-d, --device <id>', 'Run on specific device ID')
       .option('--prod', 'Use production dart-defines (from launch.json)')
       .option('--no-defines', 'Skip dart-defines from launch.json')

package/lib/commands/run.js

@@ -4,7 +4,7 @@ const fs = require('fs-extra');
 const kleur = require('kleur');
 const ui = require('../utils/ui');
 const { createTranslator, detectDefaultLanguage } = require('../utils/i18n');
-const { printCompactHeader } = require('../utils/brand');
+const { printCompactHeader, paintLime } = require('../utils/brand');
 const { spawnFlutterWithSpinner } = require('../utils/flutter-run');
 
 function listFlutterDevices(projectDir) {
@@ -252,9 +252,19 @@ async function runRun(directory, options = {}) {
   let resolvedDeviceLabel = null;
   let pickedDevice = null;
   let isChromeTarget = false;
+  let isWebServerTarget = false;
   if (options.web) {
-    isChromeTarget = true;
-    deviceArgs.push('-d', 'chrome');
+    // Default: web-server (no auto-launched Chrome window with a throwaway
+    // profile). The URL is printed in lime so the user opens it in their own
+    // browser — keeping access to extensions, logged-in accounts, etc.
+    // Pass --open to fall back to flutter's auto-Chrome behavior.
+    if (options.open) {
+      isChromeTarget = true;
+      deviceArgs.push('-d', 'chrome');
+    } else {
+      isWebServerTarget = true;
+      deviceArgs.push('-d', 'web-server');
+    }
   } else if (options.ios) {
     deviceArgs.push('-d', 'ios');
   } else if (options.android) {
@@ -281,7 +291,7 @@ async function runRun(directory, options = {}) {
     }
   }
 
-  if (isChromeTarget) {
+  if (isChromeTarget || isWebServerTarget) {
     // Pin a fixed port so the Chrome origin stays the same between runs.
     // Firebase Auth persists sessions per-origin (IndexedDB) — a random port
     // each run means the user gets logged out every restart.
@@ -320,7 +330,7 @@ async function runRun(directory, options = {}) {
   const envDefine = dartDefines.find((a) => a.startsWith('--dart-define=ENV='));
   const envValue = envDefine ? envDefine.split('=').pop() : null;
   const deviceLabel = options.web
-    ? 'chrome'
+    ? (isWebServerTarget ? 'web-server' : 'chrome')
     : options.ios
     ? 'ios'
     : options.android
@@ -346,8 +356,22 @@ async function runRun(directory, options = {}) {
   }
   console.log(kleur.dim(`  ✦ ${t('run.updateHint.prefix')} `) + kleur.cyan('kasy update') + kleur.dim(` ${t('run.updateHint.suffix')}\n`));
 
+  // Print the open-in-browser URL only AFTER Flutter signals "ready" — otherwise
+  // the user clicks too early and lands on a blank/splash page because the
+  // web-server is still compiling.
+  const onReady = isWebServerTarget
+    ? () => {
+        const url = `http://localhost:${options.webPort || '5555'}`;
+        const modifier = process.platform === 'darwin' ? 'Cmd' : 'Ctrl';
+        console.log('');
+        console.log(`  ${paintLime(`✦ ${t('run.web.open')}: ${url}`)}`);
+        console.log(kleur.dim(`  ${t('run.web.openHint', { modifier })}`));
+        console.log('');
+      }
+    : undefined;
+
   try {
-    await spawnFlutterWithSpinner(args, projectDir, t, { raw: Boolean(options.raw) });
+    await spawnFlutterWithSpinner(args, projectDir, t, { raw: Boolean(options.raw), onReady });
   } catch (err) {
     if (err.code === 'ENOENT') {
       throw new Error(t('run.error.flutterNotFound'));

package/lib/utils/flutter-run.js

@@ -125,9 +125,10 @@ function relLogPath(logPath) {
 function spawnFlutterWithSpinner(args, projectDir, t, options = {}) {
   const raw = Boolean(options.raw) || !process.stdout.isTTY;
   const log = openRunLog(projectDir);
+  const onReady = typeof options.onReady === 'function' ? options.onReady : null;
 
-  if (raw) return spawnRaw(args, projectDir, t, log);
-  return spawnWithSpinner(args, projectDir, t, log);
+  if (raw) return spawnRaw(args, projectDir, t, log, onReady);
+  return spawnWithSpinner(args, projectDir, t, log, onReady);
 }
 
 /**
@@ -137,16 +138,24 @@ function spawnFlutterWithSpinner(args, projectDir, t, options = {}) {
  * Stdin is forwarded directly so hot-reload keys (r/R/q) work without any
  * raw-mode toggling — the user is already on a "dumb" terminal here.
  */
-function spawnRaw(args, projectDir, t, log) {
+function spawnRaw(args, projectDir, t, log, onReady) {
   return new Promise((resolve, reject) => {
     const proc = spawn('flutter', args, {
       cwd: projectDir,
       stdio: ['inherit', 'pipe', 'pipe'],
     });
 
+    let readyFired = false;
+    const fireReady = () => {
+      if (readyFired || !onReady) return;
+      readyFired = true;
+      try { onReady(); } catch (_) {}
+    };
+
     const tee = (chunk, sink) => {
       sink.write(chunk);
       if (log) log.stream.write(stripAnsi(chunk.toString()));
+      if (!readyFired && FLUTTER_READY_RE.test(chunk.toString())) fireReady();
     };
 
     proc.stdout.on('data', (c) => tee(c, process.stdout));
@@ -181,7 +190,7 @@ function spawnRaw(args, projectDir, t, log) {
  * ready. On early exit, the buffer is replayed so the user sees the real
  * Flutter error.
  */
-function spawnWithSpinner(args, projectDir, t, log) {
+function spawnWithSpinner(args, projectDir, t, log, onReady) {
   return new Promise((resolve, reject) => {
     const proc = spawn('flutter', args, {
       cwd: projectDir,
@@ -208,6 +217,9 @@ function spawnWithSpinner(args, projectDir, t, log) {
       clearInterval(tick);
       const total = formatElapsed(startTime);
       spinner.stop(`${t('run.spinner.ready')}  ${kleur.dim(`[${total}]`)}`);
+      if (onReady) {
+        try { onReady(); } catch (_) {}
+      }
       for (const chunk of buffer) process.stdout.write(chunk);
       buffer.length = 0;
       // Pipe stdin so the user can type r / R / q to control Flutter.

package/lib/utils/i18n/messages-en.js

@@ -716,6 +716,8 @@ module.exports = {
     // run command
     'cli.command.run.description': 'Run your app on phone, simulator, or browser',
     'run.launching': 'Launching Flutter app...',
+    'run.web.open': 'Open in your browser',
+    'run.web.openHint': '{modifier}+click the link above (or copy/paste it). Use --open to auto-launch a dedicated Flutter Chrome window instead.',
     'run.prompt.pickDevice': 'Multiple devices detected. Which one do you want to run on?',
     'run.warn.nothingSelected': 'No device selected.',
     'run.updateHint.prefix': 'Project improvements available —',

package/lib/utils/i18n/messages-es.js

@@ -749,6 +749,8 @@ module.exports = {
     'reset.warn.launcherCacheFailed': 'No se pudo limpiar la caché del launcher.',
     'reset.warn.launcherNotDetected': 'Launcher por defecto no detectado — saltando limpieza de caché.',
     'run.launching': 'Iniciando app Flutter...',
+    'run.web.open': 'Abre en tu navegador',
+    'run.web.openHint': '{modifier}+clic en el enlace de arriba (o copia/pega). Usa --open para abrir automáticamente una ventana dedicada de Chrome de Flutter.',
     'run.prompt.pickDevice': 'Varios dispositivos detectados. ¿En cuál quieres ejecutar?',
     'run.warn.nothingSelected': 'Ningún dispositivo seleccionado.',
     'run.updateHint.prefix': 'Mejoras disponibles para el proyecto —',

package/lib/utils/i18n/messages-pt.js

@@ -749,6 +749,8 @@ module.exports = {
     'reset.warn.launcherCacheFailed': 'Não foi possível limpar o cache do launcher.',
     'reset.warn.launcherNotDetected': 'Launcher padrão não detectado — pulando limpeza de cache.',
     'run.launching': 'Iniciando app Flutter...',
+    'run.web.open': 'Abra no seu navegador',
+    'run.web.openHint': '{modifier}+clique no link acima (ou copie e cole). Use --open pra abrir automaticamente num Chrome dedicado do Flutter.',
     'run.prompt.pickDevice': 'Vários dispositivos detectados. Em qual deles rodar?',
     'run.warn.nothingSelected': 'Nenhum dispositivo selecionado.',
     'run.updateHint.prefix': 'Melhorias disponíveis para o projeto —',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kasy-cli",
-  "version": "1.19.0",
+  "version": "1.19.3",
   "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_text_field.dart

@@ -428,15 +428,22 @@ class _KasyTextFieldState extends State<KasyTextField> {
                 ),
               )
             : null);
+    // Resolved text color for the value rendered inside the field. We bake
+    // the disabled fade directly into the color (rather than relying on the
+    // Material TextField's own disabled handling) so the disabled state is
+    // visually identical across native, web and DatePicker contexts. Without
+    // this explicit color, Material would render the value at full opacity
+    // because [style] takes precedence over the framework's disabled fade.
+    final Color fieldTextColor = isDisabled
+        ? context.colors.onSurface.withValues(alpha: disabledTextOpacity)
+        : context.colors.onSurface;
     final TextStyle fieldTextStyle =
         context.textTheme.bodyLarge?.copyWith(
-          color: context.colors.onSurface.withValues(
-            alpha: isDisabled ? disabledTextOpacity : 1,
-          ),
+          color: fieldTextColor,
           fontWeight: FontWeight.w400,
           fontSize: 15,
         ) ??
-        const TextStyle(fontSize: 15);
+        TextStyle(fontSize: 15, color: fieldTextColor);
     final InputDecoration decoration = InputDecoration(
       isDense: true,
       hintText: widget.hint,

package/templates/firebase/lib/core/dev_inspector/dev_inspector.dart

@@ -87,6 +87,7 @@ class _DevInspectorState extends State<DevInspector>
   RenderObject? _selectedRender;
   Rect? _highlightRect;
   Ticker? _highlightTicker;
+  final GlobalKey _overlayKey = GlobalKey(debugLabel: 'devInspectorOverlay');
 
   @override
   void initState() {
@@ -239,12 +240,26 @@ class _DevInspectorState extends State<DevInspector>
     setState(() {
       _selectedInfo = picked.info;
       _selectedRender = picked.renderObject;
-      _highlightRect = picked.info.boundingBox;
+      _highlightRect = _toOverlayLocal(picked.info.boundingBox);
     });
     _startHighlightTicker();
     HapticFeedback.selectionClick();
   }
 
+  /// Converts a rect expressed in the root view's coordinate space into the
+  /// overlay's local space, so it draws correctly even when the overlay sits
+  /// inside a transformed parent (e.g. WebDevicePreview's device frame).
+  Rect? _toOverlayLocal(Rect rootRect) {
+    final RenderObject? renderObject =
+        _overlayKey.currentContext?.findRenderObject();
+    if (renderObject is! RenderBox) return rootRect;
+    if (!renderObject.attached) return rootRect;
+    final Offset topLeft = renderObject.globalToLocal(rootRect.topLeft);
+    final Offset bottomRight =
+        renderObject.globalToLocal(rootRect.bottomRight);
+    return Rect.fromPoints(topLeft, bottomRight);
+  }
+
   void _startHighlightTicker() {
     _highlightTicker ??= createTicker(_onHighlightTick);
     if (!_highlightTicker!.isActive) _highlightTicker!.start();
@@ -262,8 +277,9 @@ class _DevInspectorState extends State<DevInspector>
       setState(_clearSelection);
       return;
     }
-    if (_highlightRect != rect) {
-      setState(() => _highlightRect = rect);
+    final Rect? local = _toOverlayLocal(rect);
+    if (_highlightRect != local) {
+      setState(() => _highlightRect = local);
     }
   }
 
@@ -378,6 +394,7 @@ class _DevInspectorState extends State<DevInspector>
                           _onInspectorTap(ev.position),
                       child: IgnorePointer(
                         child: CustomPaint(
+                          key: _overlayKey,
                           painter: _HighlightPainter(rect: _highlightRect),
                           size: Size.infinite,
                         ),

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

@@ -1,4 +1,5 @@
 import 'package:bart/bart/bart_model.dart';
+import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:kasy_kit/components/components.dart';
@@ -8693,6 +8694,13 @@ class _DatePickerMultiMonthPreview extends StatefulWidget {
       _DatePickerMultiMonthPreviewState();
 }
 
+// Breakpoints for the multi-month preview. Below the 2-month threshold the
+// preview shows an explanation card instead of the calendars — picking dates
+// across 2 or 3 grids only makes sense on canvases wide enough to lay them
+// out side by side.
+const double _kMultiMonthMinWidth2 = 620;
+const double _kMultiMonthMinWidth3 = 920;
+
 class _DatePickerMultiMonthPreviewState
     extends State<_DatePickerMultiMonthPreview> {
   KasyDateRange? _stay;
@@ -8700,24 +8708,38 @@ class _DatePickerMultiMonthPreviewState
 
   @override
   Widget build(BuildContext context) {
+    // Multi-month is a desktop/wide-tablet pattern. On native iOS/Android and
+    // narrow web viewports we don't have horizontal room to lay 2–3 month
+    // grids side by side, so the preview shows a notice instead.
+    final double width = MediaQuery.sizeOf(context).width;
+    final bool fitsTwoMonths = kIsWeb && width >= _kMultiMonthMinWidth2;
+    final bool fitsThreeMonths = kIsWeb && width >= _kMultiMonthMinWidth3;
+
+    if (!fitsTwoMonths) {
+      return _MultiMonthUnavailableNotice();
+    }
+
     final KasyDatePickerLocale locale = _datePickerLocaleForApp(context);
     return Column(
       mainAxisSize: MainAxisSize.min,
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        // 3-month layout combined with range selection — the classic
-        // Airbnb / Booking desktop pattern for picking a stay.
-        KasyDatePicker(
-          label: '3 months  +  range',
-          placeholder: 'Check-in  ->  Check-out',
-          description: 'Pass monthsToShow: 3 to opt in. Best on wide canvases.',
-          selectionMode: KasyDateSelectionMode.range,
-          range: _stay,
-          onRangeChanged: (r) => setState(() => _stay = r),
-          monthsToShow: 3,
-          locale: locale,
-        ),
-        const SizedBox(height: KasySpacing.lg),
+        if (fitsThreeMonths) ...[
+          // 3-month layout combined with range selection — the classic
+          // Airbnb / Booking desktop pattern for picking a stay.
+          KasyDatePicker(
+            label: '3 months  +  range',
+            placeholder: 'Check-in  ->  Check-out',
+            description:
+                'Pass monthsToShow: 3 to opt in. Best on wide canvases.',
+            selectionMode: KasyDateSelectionMode.range,
+            range: _stay,
+            onRangeChanged: (r) => setState(() => _stay = r),
+            monthsToShow: 3,
+            locale: locale,
+          ),
+          const SizedBox(height: KasySpacing.lg),
+        ],
         // 2-month layout in single-date mode — useful when there's enough
         // horizontal room but you still want one tap to commit.
         KasyDatePicker(
@@ -8733,6 +8755,52 @@ class _DatePickerMultiMonthPreviewState
   }
 }
 
+/// Friendly placeholder shown when the multi-month preview is opened on a
+/// viewport too narrow for the layout (native mobile, narrow web). Surfacing
+/// this instead of hiding the variant keeps the design-system docs honest:
+/// the feature exists, it just isn't appropriate on small canvases.
+class _MultiMonthUnavailableNotice extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+    return Container(
+      padding: const EdgeInsets.all(KasySpacing.lg),
+      decoration: BoxDecoration(
+        color: c.avatarFallbackFill,
+        borderRadius: BorderRadius.circular(KasyRadius.md),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Row(
+            children: [
+              Icon(KasyIcons.info, size: 18, color: c.primary),
+              const SizedBox(width: KasySpacing.sm),
+              Text(
+                'Multi-month works best on wide screens',
+                style: context.textTheme.labelLarge?.copyWith(
+                  fontWeight: FontWeight.w700,
+                  color: c.onSurface,
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: KasySpacing.sm),
+          Text(
+            'The 2 and 3-month layouts need room to render side by side, so '
+            'they are previewed only on web at tablet width or larger. On '
+            'mobile breakpoints and native iOS/Android the picker stays at '
+            'a single month — opt in by passing monthsToShow: 2 or 3 from '
+            'your own desktop screens.',
+            style: context.textTheme.bodyMedium?.copyWith(color: c.muted),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // DatePicker — Variants (filled, no backdrop, no suffix, no focus border)
 // ─────────────────────────────────────────────────────────────────────────────