kasy-cli 1.19.1 → 1.20.0

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

@@ -8,89 +8,128 @@ class DevInspectorService {
 
   static const _screenRegex = r'(Page|Screen|Route|View)$';
 
+  // Widgets we refuse to return — even after climbing.
   static const _skipSet = <String>{
     'RenderView',
-    'RepaintBoundary',
-    'PhysicalModel',
-    'Semantics',
-    'BlockSemantics',
-    'ExcludeSemantics',
-    'MergeSemantics',
-    'Focus',
-    'FocusScope',
-    'FocusTraversalOrder',
-    'FocusTraversalGroup',
-    'Actions',
-    'Shortcuts',
-    'MouseRegion',
-    'Listener',
-    'AnnotatedRegion',
-    'Localizations',
-    'Directionality',
-    'Title',
-    'MediaQuery',
-    'DefaultTextStyle',
-    'IconTheme',
-    'NotificationListener',
-    'ScrollConfiguration',
-    'PrimaryScrollController',
-    'ScrollNotificationObserver',
-    'HeroControllerScope',
     'WidgetInspector',
     'CheckedModeBanner',
     'Banner',
     'DevInspector',
   };
 
-  // Flutter internal layout widgets — walk up to a semantic ancestor
-  static const _preferParentSet = <String>{
-    'RichText',
-    'RawGestureDetector',
-    'RawMaterialButton',
-    'Center',
-    'SizedBox',
-  };
+  // Widgets we climb past while looking for a meaningful target. These are
+  // framework-level wrappers (layout primitives, decorations, animations,
+  // scroll machinery, theming, etc.) — selecting them is rarely useful.
+  static const _climbPastSet = <String>{
+    // Repaint / physical
+    'RepaintBoundary', 'PhysicalModel', 'PhysicalShape', 'CustomPaint',
+
+    // Layout primitives
+    'Padding', 'Container', 'SizedBox', 'Center', 'Align',
+    'Expanded', 'Flexible', 'Spacer',
+    'ConstrainedBox', 'UnconstrainedBox', 'FractionallySizedBox',
+    'AspectRatio', 'LimitedBox', 'OverflowBox', 'FittedBox', 'Baseline',
+    'IntrinsicWidth', 'IntrinsicHeight',
+    'DecoratedBox', 'ColoredBox', 'DecoratedBoxTransition',
+
+    // Multi-child layout
+    'Column', 'Row', 'Stack', 'Wrap', 'Flow', 'IndexedStack',
+    'Positioned', 'PositionedDirectional',
+
+    // Material / Ink
+    'Material', 'Ink', 'InkWell', 'InkResponse',
+
+    // Pointer-related
+    'GestureDetector', 'RawGestureDetector', 'MouseRegion',
+    'Listener', 'AbsorbPointer', 'IgnorePointer', 'PointerInterceptor',
+
+    // Builders
+    'Builder', 'LayoutBuilder', 'StreamBuilder', 'FutureBuilder',
+    'ValueListenableBuilder', 'ListenableBuilder',
+    'OrientationBuilder', 'MediaQuery',
+
+    // Animations
+    'AnimatedContainer', 'AnimatedOpacity', 'AnimatedSize',
+    'AnimatedSwitcher', 'AnimatedDefaultTextStyle',
+    'AnimatedPhysicalModel', 'AnimatedBuilder', 'AnimatedAlign',
+    'AnimatedPositioned', 'AnimatedPadding', 'AnimatedTheme',
+    'FadeTransition', 'SlideTransition', 'ScaleTransition',
+    'RotationTransition', 'SizeTransition',
+    'PositionedTransition', 'RelativePositionedTransition',
+    'AlignTransition', 'DefaultTextStyleTransition',
 
-  static const _genericUiSet = <String>{
-    'Padding',
-    'Container',
-    'Center',
-    'Align',
-    'GestureDetector',
-    'RawGestureDetector',
-    'InkWell',
-    'Material',
-    'DefaultSelectionStyle',
-    'Column',
-    'Row',
-    'SizedBox',
-    'Expanded',
-    'Flexible',
-    'Ink',
-    'Builder',
-    'ClipRect',
-    'ClipRRect',
-    'SliverToBoxAdapter',
-    'SliverPadding',
-    'Viewport',
-    'CustomPaint',
-    'ImageFiltered',
-    'AnimatedBuilder',
+    // Transforms / effects
+    'Transform', 'Opacity', 'BackdropFilter', 'ImageFiltered',
+    'ClipRect', 'ClipRRect', 'ClipOval', 'ClipPath',
+
+    // Context propagation
+    'Theme', 'DefaultTextStyle', 'IconTheme', 'IconButtonTheme',
+    'Localizations', 'Directionality', 'Title',
+    'DefaultSelectionStyle', 'SelectionContainer', 'AnnotatedRegion',
+
+    // Routing / storage
+    'KeyedSubtree', 'AutomaticKeepAlive', 'KeepAlive', 'TickerMode',
+    'Offstage', 'PageStorage', 'RestorationScope',
+    'UnmanagedRestorationScope', 'HeroControllerScope', 'HeroMode',
+    'PopScope', 'WillPopScope', 'BackButtonListener', 'Visibility',
+    'NavigatorPopHandler',
+
+    // Scroll / slivers
+    'NotificationListener', 'SafeArea',
+    'SliverPadding', 'SliverToBoxAdapter', 'SliverList', 'SliverGrid',
+    'SliverFillRemaining', 'SliverFillViewport', 'SliverFixedExtentList',
+    'SliverPrototypeExtentList', 'SliverMainAxisGroup', 'SliverCrossAxisGroup',
+    'CustomScrollView', 'NestedScrollView', 'SingleChildScrollView',
+    'PrimaryScrollController', 'ScrollConfiguration', 'Scrollable',
+    'ScrollNotificationObserver', 'Viewport', 'ShrinkWrappingViewport',
+
+    // Focus / semantics / actions
+    'Focus', 'FocusScope', 'FocusTraversalOrder', 'FocusTraversalGroup',
+    'Actions', 'Shortcuts', 'CallbackShortcuts',
+    'Semantics', 'BlockSemantics', 'ExcludeSemantics', 'MergeSemantics',
     'IndexedSemantics',
-    'AnimatedPhysicalModel',
-    'AnimatedDefaultTextStyle',
+
+    // Atomic-but-noisy
+    'RichText', 'RawMaterialButton',
   };
 
-  static bool _isGenericUi(String typeName) {
-    if (_genericUiSet.contains(typeName)) return true;
+  static bool _shouldClimbPast(String typeName) {
+    if (_climbPastSet.contains(typeName)) return true;
     return typeName.startsWith('NotificationListener<') ||
         typeName.startsWith('Listener<') ||
         typeName.startsWith('Builder<');
   }
 
+  // Used by ancestor-list builders (kept as-is — affects displayed tree only).
+  static bool _isGenericUi(String typeName) => _shouldClimbPast(typeName);
+
+  /// Private widgets we DO want to skip — usually framework internals that
+  /// add noise (focus scopes, restoration scopes, builder wrappers, …).
+  /// Anything else starting with `_` is treated as a user-defined private
+  /// widget (e.g. `_HomeCard`, `_NavItem`) and is fully selectable.
+  static const _privateFrameworkSet = <String>{
+    '_FocusInheritedScope', '_FocusScopeMarker', '_FocusMarker',
+    '_InheritedTheme', '_InheritedAnimatedTheme',
+    '_RestorationScope', '_UnmanagedRestorationScope',
+    '_NestedHero', '_HeroFlightManifest',
+    '_BodyBuilder', '_ScaffoldSlot',
+    '_ActionsScope', '_ShortcutsMarker',
+    '_LocalizationsScope', '_DirectionalityScope',
+    '_MediaQueryFromView', '_MediaQueryFromWindow',
+    '_OverlayEntryWidget', '_OverlayState',
+    '_ModalScope', '_ModalScopeStatus', '_RouteEntry',
+    '_BannerWidget', '_CheckedModeBanner',
+    '_TickerModeMarker',
+    '_Pending', '_LinearProgressIndicator', '_CircularProgressIndicator',
+    '_ScrollNotificationObserverScope',
+    '_PrimaryScrollControllerScope',
+    '_TapRegionRegistry', '_TapRegionSurface',
+    '_KeyedSubtree',
+  };
+
   static bool _shouldSkip(String typeName) {
-    if (typeName.startsWith('_')) return true;
-    return _skipSet.contains(typeName);
+    if (_skipSet.contains(typeName)) return true;
+    return _privateFrameworkSet.contains(typeName);
   }
 
   static List<String> _extractProperties(Element element) {
@@ -163,16 +202,14 @@ class DevInspectorService {
     // 1) Prioritize feature-level widgets/classes first.
     for (final type in chain) {
       if (_shouldSkip(type)) continue;
-      if (_preferParentSet.contains(type)) continue;
-      if (_isGenericUi(type)) continue;
+      if (_shouldClimbPast(type)) continue;
       if (featureRegex.hasMatch(type)) return type;
     }
 
     // 2) Fallback to first non-generic non-skipped widget.
     for (final type in chain) {
       if (_shouldSkip(type)) continue;
-      if (_preferParentSet.contains(type)) continue;
-      if (_isGenericUi(type)) continue;
+      if (_shouldClimbPast(type)) continue;
       return type;
     }
     return null;
@@ -242,16 +279,24 @@ class DevInspectorService {
     var typeName = element.widget.runtimeType.toString();
     var activeElement = element;
 
-    if (_preferParentSet.contains(typeName)) {
+    // Climb past framework wrappers (layout, decoration, animation, scroll,
+    // theming, etc.) to reach the most meaningful widget — typically a custom
+    // widget from the user's project or a semantic widget (Text, Icon, Card,
+    // Button, …).
+    if (_shouldClimbPast(typeName) || _shouldSkip(typeName)) {
+      Element? found;
+      String? foundName;
       element.visitAncestorElements((ancestor) {
         final name = ancestor.widget.runtimeType.toString();
-        if (!_shouldSkip(name) && !_preferParentSet.contains(name)) {
-          typeName = name;
-          activeElement = ancestor;
-          return false;
-        }
-        return true;
+        if (_shouldSkip(name)) return true;
+        if (_shouldClimbPast(name)) return true;
+        found = ancestor;
+        foundName = name;
+        return false;
       });
+      if (found == null || foundName == null) return null;
+      typeName = foundName!;
+      activeElement = found!;
     }
 
     if (_shouldSkip(typeName)) return null;
@@ -280,18 +325,20 @@ class DevInspectorService {
     );
   }
 
-  /// Hit-tests at [globalPosition] and returns the inspector info plus the
-  /// underlying render object so the caller can re-measure the bounds during
-  /// animations.
-  static ({DevInspectorInfo info, RenderObject renderObject})? pickAt(
+  /// Hit-tests inside [contentBox] at [globalPosition] and returns the
+  /// inspector info plus the underlying render object. Starting the hit test
+  /// from the content box (instead of the root render view) skips the
+  /// DevInspector's own overlay subtree.
+  static ({DevInspectorInfo info, RenderObject renderObject})? pickAtInBox(
+    RenderBox contentBox,
     Offset globalPosition,
   ) {
     if (!kDebugMode) return null;
+    if (!contentBox.attached) return null;
     try {
+      final Offset local = contentBox.globalToLocal(globalPosition);
       final result = BoxHitTestResult();
-      final renderView = WidgetsBinding.instance.renderViews.firstOrNull;
-      if (renderView == null) return null;
-      renderView.hitTest(result, position: globalPosition);
+      contentBox.hitTest(result, position: local);
       for (final entry in result.path) {
         if (entry.target is! RenderObject) continue;
         final RenderObject candidate = entry.target as RenderObject;
@@ -312,4 +359,72 @@ class DevInspectorService {
     if (!target.attached) return null;
     return _globalBoundingRect(target);
   }
+
+  /// Climbs one level up the meaningful-widget hierarchy from [current].
+  /// Used to bubble a repeat-tap up to the parent widget when the current
+  /// selection isn't the one the user wanted.
+  static ({DevInspectorInfo info, RenderObject renderObject})? climbFrom(
+    RenderObject current,
+  ) {
+    if (!kDebugMode) return null;
+    if (!current.attached) return null;
+    try {
+      final creator = current.debugCreator;
+      if (creator == null) return null;
+      Element? element;
+      try {
+        // ignore: avoid_dynamic_calls
+        element = (creator as dynamic).element as Element?;
+      } catch (_) {
+        return null;
+      }
+      if (element == null) return null;
+
+      Element? found;
+      element.visitAncestorElements((ancestor) {
+        final name = ancestor.widget.runtimeType.toString();
+        if (_shouldSkip(name)) return true;
+        if (_shouldClimbPast(name)) return true;
+        found = ancestor;
+        return false;
+      });
+      if (found == null) return null;
+      final RenderObject? ro = found!.findRenderObject();
+      if (ro == null || !ro.attached) return null;
+      final info = _buildInfoForElement(found!, ro);
+      return (info: info, renderObject: ro);
+    } catch (_) {
+      return null;
+    }
+  }
+
+  /// Builds info from an element/render-object pair without re-running the
+  /// climb logic. Used by [climbFrom] (which already picked the element).
+  static DevInspectorInfo _buildInfoForElement(
+    Element element,
+    RenderObject ro,
+  ) {
+    final typeName = element.widget.runtimeType.toString();
+    final Rect rect = _globalBoundingRect(ro);
+    final ancestors = _extractAncestors(element);
+    final properties = _extractProperties(element);
+    final screenHint = _extractScreenHint(element, ancestors);
+    final semanticWidget = _extractSemanticWidget(typeName, ancestors);
+    final searchHints = _extractSearchHints(
+      widgetType: typeName,
+      properties: properties,
+      ancestors: ancestors,
+      screenHint: screenHint,
+      semanticWidget: semanticWidget,
+    );
+    return DevInspectorInfo(
+      widgetType: typeName,
+      boundingBox: rect,
+      properties: properties,
+      ancestors: ancestors,
+      screenHint: screenHint,
+      semanticWidget: semanticWidget,
+      searchHints: searchHints,
+    );
+  }
 }

package/templates/firebase/lib/core/icons/kasy_icons.dart

@@ -50,6 +50,7 @@ abstract final class KasyIcons {
   static const IconData download = LucideIcons.download300;
   static const IconData linkOutlined = LucideIcons.link300;
   static const IconData message = LucideIcons.messageSquare300;
+  static const IconData monitor = LucideIcons.monitor300;
   static const IconData moreVert = LucideIcons.ellipsisVertical300;
   static const IconData microphone = LucideIcons.mic300;
   static const IconData northEast = LucideIcons.arrowUpRight300;

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

@@ -109,7 +109,9 @@ class KasyColors extends ThemeExtension<KasyColors> {
   factory KasyColors.light() => const KasyColors(
         primary: Color(0xFF1E88E5),
         onPrimary: Color(0xFFFFFFFF),
-        // Canvas: slightly lighter than systemGroupedBackground for a softer wash; surfaces stay white.
+        // Also used by the native splash. When changing, update
+        // `flutter_native_splash.color` in pubspec.yaml and run
+        // `dart run flutter_native_splash:create`.
         background: Color(0xFFF7F7F7),
         onBackground: Color(0xFF000000),
         surface: Color(0xFFFFFFFF),
@@ -138,7 +140,9 @@ class KasyColors extends ThemeExtension<KasyColors> {
   factory KasyColors.dark() => const KasyColors(
         primary: Color(0xFF1E88E5),
         onPrimary: Color(0xFFFFFFFF),
-        // Canvas: Material dark baseline; surfaces: iOS-style elevated grey (cards / chrome).
+        // Also used by the native splash. When changing, update
+        // `flutter_native_splash.color_dark` in pubspec.yaml and run
+        // `dart run flutter_native_splash:create`.
         background: Color(0xFF060608),
         onBackground: Color(0xFFFAFAFA),
         surface: Color(0xFF18181B),

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

@@ -5,9 +5,9 @@ import 'package:device_preview/device_preview.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
+import 'package:flutter/services.dart';
 import 'package:jiffy/jiffy.dart';
 import 'package:kasy_kit/core/dev_inspector/dev_inspector.dart';
-import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 import 'package:provider/provider.dart';
 import 'package:shared_preferences/shared_preferences.dart';
@@ -25,6 +25,16 @@ const String _textScalePrefKey = 'web_device_preview_text_scale';
 final ValueNotifier<bool> webDevicePreviewEnabledNotifier =
     ValueNotifier<bool>(false);
 
+/// Keyboard shortcut for toggling the web device preview chrome, formatted
+/// for the current platform. Key names stay in English regardless of the
+/// app locale — universal keyboard conventions.
+String webDevicePreviewShortcutLabel() {
+  final String mod = defaultTargetPlatform == TargetPlatform.macOS
+      ? 'Command'
+      : 'Ctrl';
+  return '$mod + Shift + D';
+}
+
 // Platform order: 0 = iOS, 1 = Android, 2 = iPad
 
 // iOS: compact → standard → pro
@@ -76,7 +86,8 @@ class WebDevicePreview extends StatefulWidget {
   State<WebDevicePreview> createState() => _WebDevicePreviewState();
 }
 
-class _WebDevicePreviewState extends State<WebDevicePreview> {
+class _WebDevicePreviewState extends State<WebDevicePreview>
+    with WidgetsBindingObserver {
   int _platform = 0; // 0 = iOS, 1 = Android, 2 = iPad
   int _iosIndex = 1;     // default: iPhone 16
   int _androidIndex = 1; // default: Google Pixel 9
@@ -112,16 +123,52 @@ class _WebDevicePreviewState extends State<WebDevicePreview> {
   @override
   void initState() {
     super.initState();
+    WidgetsBinding.instance.addObserver(this);
     _localeNotifier = ValueNotifier<AppLocale>(
       LocaleSettings.instance.currentLocale,
     );
     webDevicePreviewEnabledNotifier.addListener(_onEnabledChanged);
     _bgDarkNotifier.addListener(_onBgChanged);
+    HardwareKeyboard.instance.addHandler(_handleKeyEvent);
     unawaited(_bootstrap());
   }
 
+  @override
+  void didChangePlatformBrightness() {
+    super.didChangePlatformBrightness();
+    // The simulated MediaQuery below forwards the host browser's brightness;
+    // rebuild so the app inside the device frame follows OS dark/light when
+    // the user's theme is set to "system".
+    if (mounted) setState(() {});
+  }
+
+  /// Global toggle for the device preview chrome.
+  ///
+  /// `Cmd/Ctrl + Shift + D` — works from anywhere (debug only). Mirrors what
+  /// the close button does, persisting the choice to prefs so subsequent
+  /// launches respect it.
+  bool _handleKeyEvent(KeyEvent event) {
+    if (!kDebugMode) return false;
+    if (event is! KeyDownEvent) return false;
+    if (event.logicalKey != LogicalKeyboardKey.keyD) return false;
+    final HardwareKeyboard kb = HardwareKeyboard.instance;
+    if (!kb.isShiftPressed) return false;
+    if (!(kb.isMetaPressed || kb.isControlPressed)) return false;
+    if (kb.isAltPressed) return false;
+    final bool turningOn = !webDevicePreviewEnabledNotifier.value;
+    webDevicePreviewEnabledNotifier.value = turningOn;
+    unawaited(() async {
+      final prefs = await SharedPreferences.getInstance();
+      await prefs.setBool(webDevicePreviewEnabledPrefKey, turningOn);
+    }());
+    HapticFeedback.lightImpact();
+    return true;
+  }
+
   @override
   void dispose() {
+    WidgetsBinding.instance.removeObserver(this);
+    HardwareKeyboard.instance.removeHandler(_handleKeyEvent);
     webDevicePreviewEnabledNotifier.removeListener(_onEnabledChanged);
     _bgDarkNotifier.removeListener(_onBgChanged);
     _deviceNotifier.dispose();
@@ -135,6 +182,10 @@ class _WebDevicePreviewState extends State<WebDevicePreview> {
   }
 
   void _onEnabledChanged() {
+    // Our chrome already surfaces inspector state via the pill, so suppress
+    // the DevInspector's in-app status pill while the preview is on.
+    devInspectorSuppressStatusPillNotifier.value =
+        webDevicePreviewEnabledNotifier.value;
     if (webDevicePreviewEnabledNotifier.value) {
       _controlsTimer?.cancel();
       _controlsTimer = Timer(const Duration(milliseconds: 800), () {
@@ -152,7 +203,10 @@ class _WebDevicePreviewState extends State<WebDevicePreview> {
   Future<void> _bootstrap() async {
     final prefs = await SharedPreferences.getInstance();
 
-    final savedEnabled = prefs.getBool(webDevicePreviewEnabledPrefKey) ?? false;
+    // Default ON for the first run: most devs hitting `kasy run --web` want to
+    // preview their mobile app inside a device frame. Closing the chrome
+    // persists the choice, so subsequent launches respect what the user left.
+    final savedEnabled = prefs.getBool(webDevicePreviewEnabledPrefKey) ?? true;
     final savedPlatform = prefs.getInt(_platformPrefKey);
     final savedIosIndex = prefs.getInt(_iosIndexPrefKey);
     final savedAndroidIndex = prefs.getInt(_androidIndexPrefKey);
@@ -327,8 +381,6 @@ class _WebDevicePreviewState extends State<WebDevicePreview> {
   @override
   Widget build(BuildContext context) {
     final enabled = webDevicePreviewEnabledNotifier.value;
-    // Depend on ThemeProvider so the pill icon updates when app theme changes.
-    final appIsDark = ThemeProvider.of(context).mode == ThemeMode.dark;
 
     // ThemeData.light() in Flutter 3.x M3 uses a lavender-tinted surface.
     // Passing backgroundColor directly avoids that and gives us an exact color.
@@ -347,6 +399,11 @@ class _WebDevicePreviewState extends State<WebDevicePreview> {
         builder: (ctx, _) => MediaQuery(
           data: MediaQuery.of(ctx).copyWith(
             textScaler: TextScaler.linear(_textScaleNotifier.value),
+            // DevicePreview hard-codes platformBrightness to light inside the
+            // simulated frame, which breaks MaterialApp's ThemeMode.system.
+            // Forward the real host brightness so "system" tracks the OS.
+            platformBrightness: WidgetsBinding
+                .instance.platformDispatcher.platformBrightness,
           ),
           child: _DeviceSwitchBridge(
             deviceNotifier: _deviceNotifier,
@@ -367,6 +424,14 @@ class _WebDevicePreviewState extends State<WebDevicePreview> {
         fit: StackFit.expand,
         children: [
           RepaintBoundary(key: _screenshotKey, child: preview),
+          // Inspector highlight drawn ABOVE the device frame so widgets that
+          // hug the edges of the simulated viewport (AppBar, bottom nav, …)
+          // still get a complete border instead of being clipped by the chrome.
+          const Positioned.fill(
+            child: IgnorePointer(
+              child: _DevInspectorExternalHighlight(),
+            ),
+          ),
           Positioned(
             top: 24,
             right: 24,
@@ -389,7 +454,6 @@ class _WebDevicePreviewState extends State<WebDevicePreview> {
                     deviceName: _shortName(_currentDevice.name),
                     frameVisible: _frameVisibleNotifier.value,
                     bgDark: _bgDarkNotifier.value,
-                    appIsDark: appIsDark,
                     isLandscape: _landscapeNotifier.value,
                     textScale: _textScaleNotifier.value,
                     currentLocale: _localeNotifier.value,
@@ -399,7 +463,6 @@ class _WebDevicePreviewState extends State<WebDevicePreview> {
                     onNext: _next,
                     onToggleFrame: _toggleFrame,
                     onToggleBg: _toggleBg,
-                    onToggleAppTheme: () => ThemeProvider.of(context).toggle(),
                     onToggleLandscape: _toggleLandscape,
                     onCycleTextScale: _cycleTextScale,
                     onCycleLocale: _cycleLocale,
@@ -498,7 +561,6 @@ class _PreviewControls extends StatefulWidget {
     required this.deviceName,
     required this.frameVisible,
     required this.bgDark,
-    required this.appIsDark,
     required this.isLandscape,
     required this.textScale,
     required this.currentLocale,
@@ -508,7 +570,6 @@ class _PreviewControls extends StatefulWidget {
     required this.onNext,
     required this.onToggleFrame,
     required this.onToggleBg,
-    required this.onToggleAppTheme,
     required this.onToggleLandscape,
     required this.onCycleTextScale,
     required this.onCycleLocale,
@@ -522,7 +583,6 @@ class _PreviewControls extends StatefulWidget {
   final String deviceName;
   final bool frameVisible;
   final bool bgDark;
-  final bool appIsDark;
   final bool isLandscape;
   final double textScale;
   final AppLocale currentLocale;
@@ -532,7 +592,6 @@ class _PreviewControls extends StatefulWidget {
   final VoidCallback onNext;
   final VoidCallback onToggleFrame;
   final VoidCallback onToggleBg;
-  final VoidCallback onToggleAppTheme;
   final VoidCallback onToggleLandscape;
   final VoidCallback onCycleTextScale;
   final VoidCallback onCycleLocale;
@@ -895,14 +954,6 @@ class _PreviewControlsState extends State<_PreviewControls> {
               checked: widget.bgDark,
               onTap: widget.onToggleBg,
             ),
-            _ToolsItem(
-              icon: widget.appIsDark
-                  ? Icons.dark_mode_rounded
-                  : Icons.light_mode_rounded,
-              label: t.webDevicePreview.darkTheme,
-              checked: widget.appIsDark,
-              onTap: widget.onToggleAppTheme,
-            ),
             _ToolsItem(
               icon: widget.isLandscape
                   ? Icons.stay_current_landscape_rounded
@@ -1158,3 +1209,52 @@ class _IconBtnState extends State<_IconBtn> {
     );
   }
 }
+
+// ---------------------------------------------------------------------------
+// External inspector highlight — draws the DevInspector selection rect ABOVE
+// the simulated device frame so widgets that hug the viewport edges keep a
+// complete, uncropped border. Listens to the global rect notifier published
+// by DevInspector.
+// ---------------------------------------------------------------------------
+
+class _DevInspectorExternalHighlight extends StatelessWidget {
+  const _DevInspectorExternalHighlight();
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder<Rect?>(
+      valueListenable: devInspectorHighlightGlobalRect,
+      builder: (BuildContext context, Rect? rect, Widget? _) {
+        if (rect == null || rect.isEmpty) return const SizedBox.shrink();
+        return CustomPaint(
+          painter: _ExternalHighlightPainter(rect: rect),
+          size: Size.infinite,
+        );
+      },
+    );
+  }
+}
+
+class _ExternalHighlightPainter extends CustomPainter {
+  _ExternalHighlightPainter({required this.rect});
+
+  final Rect rect;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (rect.isEmpty) return;
+    final Paint paint = Paint()
+      ..color = devInspectorHighlightColor
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = devInspectorHighlightStrokeWidth;
+    final Rect outer = rect.inflate(devInspectorHighlightStrokeWidth / 2);
+    final RRect rrect = RRect.fromRectAndRadius(
+      outer,
+      const Radius.circular(devInspectorHighlightCornerRadius),
+    );
+    canvas.drawRRect(rrect, paint);
+  }
+
+  @override
+  bool shouldRepaint(_ExternalHighlightPainter old) => old.rect != rect;
+}