kasy-cli 1.37.0 → 1.38.0

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

@@ -1,11 +1,14 @@
 import 'dart:async';
+import 'dart:ui' show ImageFilter;
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
+import 'package:google_fonts/google_fonts.dart';
 import 'package:kasy_kit/core/dev_inspector/dev_inspector_info.dart';
 import 'package:kasy_kit/core/dev_inspector/dev_inspector_service.dart';
+import 'package:kasy_kit/core/icons/kasy_icons.dart';
 import 'package:kasy_kit/core/theme/providers/theme_provider.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 import 'package:shared_preferences/shared_preferences.dart';
@@ -28,13 +31,15 @@ final GlobalKey<ScaffoldMessengerState> devInspectorRootScaffoldMessengerKey =
 /// users who already had the toggle on before the FAB was removed.
 const String devInspectorEnabledPrefKey = 'dev_inspector_fab_enabled';
 
-final ValueNotifier<bool> devInspectorEnabledNotifier =
-    ValueNotifier<bool>(false);
+final ValueNotifier<bool> devInspectorEnabledNotifier = ValueNotifier<bool>(
+  false,
+);
 
 /// Set to true to trigger a copy of the currently selected widget.
 /// [DevInspector] handles the copy + feedback and resets this to false.
-final ValueNotifier<bool> devInspectorCopyTriggerNotifier =
-    ValueNotifier<bool>(false);
+final ValueNotifier<bool> devInspectorCopyTriggerNotifier = ValueNotifier<bool>(
+  false,
+);
 
 /// Set to true to clear the current selection WITHOUT deactivating the
 /// inspector. The Web Device Preview toggle fires this when entering/leaving
@@ -46,8 +51,9 @@ final ValueNotifier<bool> devInspectorClearSelectionTriggerNotifier =
 /// Runtime active state of the inspector. Mirrors [devInspectorEnabledNotifier]
 /// — the Web Device Preview pill, the admin toggle and the Esc shortcut all
 /// flip the persisted notifier, and this one follows.
-final ValueNotifier<bool> devInspectorActiveNotifier =
-    ValueNotifier<bool>(false);
+final ValueNotifier<bool> devInspectorActiveNotifier = ValueNotifier<bool>(
+  false,
+);
 
 /// Set to true to hide the in-app status pill that the [DevInspector] shows
 /// while active (e.g. when the WebDevicePreview chrome is already displaying
@@ -55,6 +61,17 @@ final ValueNotifier<bool> devInspectorActiveNotifier =
 final ValueNotifier<bool> devInspectorSuppressStatusPillNotifier =
     ValueNotifier<bool>(false);
 
+/// Confirmation message the [DevInspector] wants surfaced. When the
+/// WebDevicePreview chrome is present it OWNS the toast surface (so the
+/// inspector's "copied" pill lands in the exact same spot and size as the
+/// chrome's own toasts, e.g. "Image copied"). The chrome listens here, shows
+/// the toast, and resets this to null. When no chrome is present the inspector
+/// renders its own in-app toast instead.
+final ValueNotifier<({String message, bool isError})?>
+devInspectorToastNotifier = ValueNotifier<({String message, bool isError})?>(
+  null,
+);
+
 /// Rect of the currently selected widget expressed in **root view coordinates**
 /// (the browser window / native window). External surfaces — e.g. the Web
 /// Device Preview chrome which renders OUTSIDE the device frame — listen to
@@ -94,11 +111,13 @@ class DevInspector extends StatefulWidget {
 class _DevInspectorState extends State<DevInspector>
     with TickerProviderStateMixin {
   static const Duration _copyFeedbackVisible = Duration(milliseconds: 2200);
-  static const double _copyFeedbackRightInset = 16;
   static const int _historyCapacity = 20;
 
   bool _active = false;
   bool _copyBusy = false;
+  // The X only hides the info card; the highlighted selection stays. Tapping a
+  // widget again (or selecting another) brings the card back.
+  bool _infoCardHidden = false;
 
   Timer? _copyFeedbackTimer;
   String? _copyFeedbackText;
@@ -107,6 +126,9 @@ class _DevInspectorState extends State<DevInspector>
   DevInspectorInfo? _selectedInfo;
   RenderObject? _selectedRender;
   Rect? _highlightRect;
+  // Live highlight of whatever the cursor is over (hover-to-inspect). Distinct
+  // from the locked selection [_highlightRect] — drawn softer, no history/copy.
+  Rect? _hoverRect;
   Ticker? _highlightTicker;
   late final AnimationController _transitionCtrl;
   Rect? _transitionFromRect;
@@ -134,8 +156,9 @@ class _DevInspectorState extends State<DevInspector>
     devInspectorActiveNotifier.addListener(_handleActiveChanged);
     devInspectorEnabledNotifier.addListener(_handleEnabledChanged);
     devInspectorCopyTriggerNotifier.addListener(_onCopyTriggered);
-    devInspectorClearSelectionTriggerNotifier
-        .addListener(_onClearSelectionTriggered);
+    devInspectorClearSelectionTriggerNotifier.addListener(
+      _onClearSelectionTriggered,
+    );
     HardwareKeyboard.instance.addHandler(_handleKeyEvent);
     unawaited(_bootstrapEnabledPreference());
   }
@@ -148,8 +171,9 @@ class _DevInspectorState extends State<DevInspector>
     HardwareKeyboard.instance.removeHandler(_handleKeyEvent);
     devInspectorEnabledNotifier.removeListener(_handleEnabledChanged);
     devInspectorCopyTriggerNotifier.removeListener(_onCopyTriggered);
-    devInspectorClearSelectionTriggerNotifier
-        .removeListener(_onClearSelectionTriggered);
+    devInspectorClearSelectionTriggerNotifier.removeListener(
+      _onClearSelectionTriggered,
+    );
     devInspectorActiveNotifier.removeListener(_handleActiveChanged);
     if (devInspectorActiveNotifier.value) {
       devInspectorActiveNotifier.value = false;
@@ -195,7 +219,8 @@ class _DevInspectorState extends State<DevInspector>
 
     if (!_active) return false;
 
-    final bool hasModifier = kb.isMetaPressed ||
+    final bool hasModifier =
+        kb.isMetaPressed ||
         kb.isControlPressed ||
         kb.isAltPressed ||
         kb.isShiftPressed;
@@ -347,6 +372,8 @@ class _DevInspectorState extends State<DevInspector>
     _selectedInfo = null;
     _selectedRender = null;
     _highlightRect = null;
+    _hoverRect = null;
+    _infoCardHidden = false;
     _transitionFromRect = null;
     _transitionToRect = null;
     _transitionFromGlobalRect = null;
@@ -371,8 +398,27 @@ class _DevInspectorState extends State<DevInspector>
     _historyCursor = _history.length - 1;
   }
 
+  /// Live hover preview: highlight whatever widget is under the cursor without
+  /// selecting it. Cheap rect-diff guard avoids rebuilding when nothing moved.
+  void _onInspectorHover(Offset globalPosition) {
+    if (!_active) return;
+    final RenderObject? content = _contentKey.currentContext
+        ?.findRenderObject();
+    if (content is! RenderBox) return;
+    final picked = DevInspectorService.pickAtInBox(content, globalPosition);
+    final Rect? rect = picked == null
+        ? null
+        : _rectInOverlaySpace(picked.renderObject);
+    if (rect != _hoverRect) setState(() => _hoverRect = rect);
+  }
+
+  void _clearHover() {
+    if (_hoverRect != null) setState(() => _hoverRect = null);
+  }
+
   void _onInspectorTap(Offset globalPosition) {
-    final RenderObject? content = _contentKey.currentContext?.findRenderObject();
+    final RenderObject? content = _contentKey.currentContext
+        ?.findRenderObject();
     if (content is! RenderBox) {
       HapticFeedback.heavyImpact();
       return;
@@ -400,6 +446,8 @@ class _DevInspectorState extends State<DevInspector>
     setState(() {
       _selectedInfo = picked!.info;
       _selectedRender = picked.renderObject;
+      // A fresh tap always brings the card back (even on the same element).
+      _infoCardHidden = false;
     });
 
     if (!_navigatingHistory) {
@@ -457,8 +505,8 @@ class _DevInspectorState extends State<DevInspector>
   /// transforms applied above the overlay (e.g. WebDevicePreview's scale).
   Rect? _rectInOverlaySpace(RenderObject target) {
     if (!target.attached) return null;
-    final RenderObject? overlay =
-        _overlayKey.currentContext?.findRenderObject();
+    final RenderObject? overlay = _overlayKey.currentContext
+        ?.findRenderObject();
     if (overlay == null || !overlay.attached) return null;
     try {
       final Matrix4 transform = target.getTransformTo(overlay);
@@ -516,6 +564,14 @@ class _DevInspectorState extends State<DevInspector>
   }
 
   void _showCopyFeedback(String message, {required bool isError}) {
+    // When the WebDevicePreview chrome is up it owns the toast surface — hand
+    // the message off so the confirmation appears in the exact same place and
+    // size as the chrome's other toasts (e.g. "Image copied"). No local toast
+    // in that case, to avoid showing two.
+    if (devInspectorSuppressStatusPillNotifier.value) {
+      devInspectorToastNotifier.value = (message: message, isError: isError);
+      return;
+    }
     _copyFeedbackTimer?.cancel();
     setState(() {
       _copyFeedbackText = message;
@@ -559,6 +615,43 @@ class _DevInspectorState extends State<DevInspector>
     }
   }
 
+  /// Positions the glass info card next to the selected element, always clamped
+  /// inside the viewport — so it stays visible even for full-screen selections
+  /// (where there's no room above or below the element).
+  Widget _buildInfoCard(Size size, EdgeInsets padding, bool dark) {
+    final Rect rect = _highlightRect!;
+    final DevInspectorInfo info = _selectedInfo!;
+    const double panelW = 250;
+    const double gap = 10;
+    const double estHeight = 130;
+    final double minTop = padding.top + 8;
+    final double maxTop = size.height - padding.bottom - estHeight - 8;
+
+    double left = rect.left;
+    if (left + panelW > size.width - 8) left = size.width - 8 - panelW;
+    if (left < 8) left = 8;
+
+    // Prefer below the element; fall back to above; then clamp on-screen.
+    double top = rect.bottom + gap;
+    if (top > maxTop) top = rect.top - gap - estHeight;
+    top = top.clamp(minTop, maxTop < minTop ? minTop : maxTop);
+
+    return Positioned(
+      left: left,
+      top: top,
+      child: _InspectorInfoCard(
+        info: info,
+        dark: dark,
+        maxWidth: panelW,
+        onCopy: () {
+          unawaited(_copySelection());
+          setState(() => _infoCardHidden = true);
+        },
+        onClose: () => setState(() => _infoCardHidden = true),
+      ),
+    );
+  }
+
   (Size, EdgeInsets) _sizeAndPadding(BuildContext context) {
     final MediaQueryData? mq = MediaQuery.maybeOf(context);
     if (mq != null) return (mq.size, mq.padding);
@@ -592,6 +685,7 @@ class _DevInspectorState extends State<DevInspector>
             ? appTheme.dark
             : appTheme.light,
     };
+    final bool dark = shellTheme.brightness == Brightness.dark;
 
     return Directionality(
       textDirection: _platformTextDirection(),
@@ -602,69 +696,72 @@ class _DevInspectorState extends State<DevInspector>
             return Stack(
               clipBehavior: Clip.none,
               children: <Widget>[
-                KeyedSubtree(key: _contentKey, child: widget.child),
+                // While inspecting, the app must not react to clicks — only the
+                // inspector selects/highlights. AbsorbPointer swallows pointer
+                // events for the app subtree. Picking still works: the inspector
+                // calls hitTest directly on the content render box (via
+                // _contentKey), which is a CHILD of this AbsorbPointer, so the
+                // direct call bypasses the absorption.
+                AbsorbPointer(
+                  absorbing: _active,
+                  child: KeyedSubtree(key: _contentKey, child: widget.child),
+                ),
                 if (_active)
                   Positioned.fill(
-                    child: Listener(
-                      behavior: HitTestBehavior.opaque,
-                      onPointerDown: (PointerDownEvent ev) =>
-                          _onInspectorTap(ev.position),
-                      child: IgnorePointer(
-                        child: CustomPaint(
-                          key: _overlayKey,
-                          painter: _HighlightPainter(rect: _highlightRect),
-                          size: Size.infinite,
+                    child: MouseRegion(
+                      opaque: false,
+                      cursor: SystemMouseCursors.precise,
+                      onHover: (PointerHoverEvent ev) =>
+                          _onInspectorHover(ev.position),
+                      onExit: (_) => _clearHover(),
+                      child: Listener(
+                        behavior: HitTestBehavior.opaque,
+                        onPointerDown: (PointerDownEvent ev) =>
+                            _onInspectorTap(ev.position),
+                        child: IgnorePointer(
+                          child: CustomPaint(
+                            key: _overlayKey,
+                            painter: _HighlightPainter(
+                              rect: _highlightRect,
+                              hoverRect: _hoverRect,
+                            ),
+                            size: Size.infinite,
+                          ),
                         ),
                       ),
                     ),
                   ),
+                // Glass info card anchored to the selected element (click).
+                if (_active &&
+                    !_infoCardHidden &&
+                    _selectedInfo != null &&
+                    _highlightRect != null)
+                  _buildInfoCard(size, padding, dark),
                 if (_active)
                   Positioned(
                     bottom: padding.bottom + 12,
                     right: 12,
-                    child: const IgnorePointer(
-                      child: _InspectorStatusPill(),
-                    ),
+                    child: const IgnorePointer(child: _InspectorStatusPill()),
                   ),
-                if (_copyFeedbackText != null)
-                  Positioned(
-                    left: 16,
-                    right: 16 + _copyFeedbackRightInset,
-                    bottom: padding.bottom + 12,
-                    child: IgnorePointer(
-                      child: Builder(
-                        builder: (BuildContext ctx) {
-                          final ThemeData theme = Theme.of(ctx);
-                          final ColorScheme scheme = theme.colorScheme;
-                          final Color bg = _copyFeedbackIsError
-                              ? scheme.error
-                              : scheme.inverseSurface;
-                          final Color fg = _copyFeedbackIsError
-                              ? scheme.onError
-                              : scheme.onInverseSurface;
-                          return Material(
-                            elevation: 12,
-                            shadowColor: Colors.black45,
-                            borderRadius: BorderRadius.circular(12),
-                            color: bg,
-                            child: Padding(
-                              padding: const EdgeInsets.symmetric(
-                                horizontal: 16,
-                                vertical: 12,
-                              ),
-                              child: Text(
-                                _copyFeedbackText!,
-                                style: theme.textTheme.bodyMedium?.copyWith(
-                                  color: fg,
-                                  fontWeight: FontWeight.w500,
-                                ),
+                Positioned(
+                  left: 0,
+                  right: 0,
+                  bottom: padding.bottom + 24,
+                  child: IgnorePointer(
+                    child: Center(
+                      child: AnimatedSwitcher(
+                        duration: const Duration(milliseconds: 180),
+                        child: _copyFeedbackText == null
+                            ? const SizedBox.shrink()
+                            : _InspectorToast(
+                                key: ValueKey<String>(_copyFeedbackText!),
+                                message: _copyFeedbackText!,
+                                isError: _copyFeedbackIsError,
                               ),
-                            ),
-                          );
-                        },
                       ),
                     ),
                   ),
+                ),
               ],
             );
           },
@@ -674,13 +771,323 @@ class _DevInspectorState extends State<DevInspector>
   }
 }
 
+/// Frosted-glass info card shown next to the selected element. Adapts to light
+/// and dark themes; offers Copy ID / Copy JSON / Copy for AI.
+class _InspectorInfoCard extends StatelessWidget {
+  const _InspectorInfoCard({
+    required this.info,
+    required this.dark,
+    required this.maxWidth,
+    required this.onCopy,
+    required this.onClose,
+  });
+
+  final DevInspectorInfo info;
+  final bool dark;
+  final double maxWidth;
+  final VoidCallback onCopy;
+  final VoidCallback onClose;
+
+  @override
+  Widget build(BuildContext context) {
+    // Real frosted glass. Dark: a light tint that darkens downward. Light: a
+    // frosted WHITE — higher opacity so it reads as crisp glass instead of a
+    // washed-out tint over the light content behind it.
+    final Color glassTop = dark
+        ? Colors.white.withValues(alpha: 0.10)
+        : Colors.white.withValues(alpha: 0.82);
+    final Color glassBottom = dark
+        ? Colors.black.withValues(alpha: 0.30)
+        : Colors.white.withValues(alpha: 0.62);
+    final Color border = (dark ? Colors.white : Colors.black).withValues(
+      alpha: dark ? 0.14 : 0.08,
+    );
+    final Color fg = dark ? Colors.white : const Color(0xFF1C1C1E);
+    final Color faint = fg.withValues(alpha: 0.45);
+
+    return Material(
+      type: MaterialType.transparency,
+      child: ConstrainedBox(
+        constraints: BoxConstraints(maxWidth: maxWidth),
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(16),
+          child: BackdropFilter(
+            filter: ImageFilter.blur(sigmaX: 26, sigmaY: 26),
+            child: Container(
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topLeft,
+                  end: Alignment.bottomRight,
+                  colors: [glassTop, glassBottom],
+                ),
+                borderRadius: BorderRadius.circular(16),
+                border: Border.all(color: border),
+                boxShadow: [
+                  BoxShadow(
+                    color: Colors.black.withValues(alpha: dark ? 0.45 : 0.18),
+                    blurRadius: 28,
+                    offset: const Offset(0, 10),
+                  ),
+                ],
+              ),
+              child: Stack(
+                children: [
+                  Column(
+                    mainAxisSize: MainAxisSize.min,
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
+                    children: [
+                      // Header: role chip (close button floats in the corner).
+                      Padding(
+                        padding: const EdgeInsets.fromLTRB(12, 10, 38, 8),
+                        child: Align(
+                          alignment: Alignment.centerLeft,
+                          child: Container(
+                            padding: const EdgeInsets.symmetric(
+                              horizontal: 8,
+                              vertical: 3,
+                            ),
+                            decoration: BoxDecoration(
+                              color: _highlightColor.withValues(alpha: 0.20),
+                              borderRadius: BorderRadius.circular(6),
+                            ),
+                            child: Text(
+                              info.widgetType,
+                              overflow: TextOverflow.ellipsis,
+                              style: TextStyle(
+                                color: fg,
+                                fontWeight: FontWeight.w700,
+                                fontSize: 12.5,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                      Divider(height: 1, color: border),
+                      // Essential, non-redundant fields only: color (as hex) and
+                      // size. Type is the chip; text/labels are skipped (already
+                      // visible on screen); the rest lives in the copied context.
+                      Padding(
+                        padding: const EdgeInsets.fromLTRB(12, 10, 12, 6),
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            if (info.colorHex != null)
+                              _field(
+                                t.devInspector.fieldColor,
+                                info.colorHex!,
+                                faint,
+                                fg,
+                                swatch: _parseHex(info.colorHex!),
+                              ),
+                            _field(
+                              t.devInspector.fieldSize,
+                              info.sizeLabel,
+                              faint,
+                              fg,
+                            ),
+                          ],
+                        ),
+                      ),
+                      Divider(height: 1, color: border),
+                      // Single copy action — subtle, so it doesn't shout.
+                      Padding(
+                        padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
+                        child: _CardAction(
+                          label: t.devInspector.copyJson,
+                          fg: fg,
+                          onTap: onCopy,
+                        ),
+                      ),
+                    ],
+                  ),
+                  // Close button pinned to the top-right corner.
+                  Positioned(
+                    top: 6,
+                    right: 6,
+                    child: _CardIconBtn(
+                      icon: KasyIcons.close,
+                      color: faint,
+                      onTap: onClose,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _field(
+    String label,
+    String value,
+    Color labelColor,
+    Color valueColor, {
+    Color? swatch,
+  }) {
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 6),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          SizedBox(
+            width: 66,
+            child: Text(
+              label,
+              overflow: TextOverflow.ellipsis,
+              style: TextStyle(
+                color: labelColor,
+                fontSize: 11,
+                fontWeight: FontWeight.w500,
+              ),
+            ),
+          ),
+          const SizedBox(width: 8),
+          if (swatch != null) ...[
+            Container(
+              width: 13,
+              height: 13,
+              margin: const EdgeInsets.only(top: 1, right: 6),
+              decoration: BoxDecoration(
+                color: swatch,
+                borderRadius: BorderRadius.circular(3),
+                border: Border.all(color: labelColor.withValues(alpha: 0.4)),
+              ),
+            ),
+          ],
+          Expanded(
+            child: Text(
+              value,
+              style: TextStyle(
+                color: valueColor,
+                fontSize: 12,
+                fontWeight: FontWeight.w500,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  /// `#RRGGBB` or `#AARRGGBB` → Color, for the color swatch. Null if unparseable.
+  Color? _parseHex(String hex) {
+    var h = hex.replaceAll('#', '').trim();
+    if (h.length == 6) h = 'FF$h';
+    if (h.length != 8) return null;
+    final v = int.tryParse(h, radix: 16);
+    return v == null ? null : Color(v);
+  }
+}
+
+class _CardIconBtn extends StatelessWidget {
+  const _CardIconBtn({
+    required this.icon,
+    required this.color,
+    required this.onTap,
+  });
+
+  final IconData icon;
+  final Color color;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkResponse(
+      onTap: onTap,
+      radius: 18,
+      child: Padding(
+        padding: const EdgeInsets.all(6),
+        child: Icon(icon, color: color, size: 16),
+      ),
+    );
+  }
+}
+
+/// Compact, subtle action chip inside the info card — a quiet neutral fill that
+/// brightens slightly on hover, so it never competes with the inspected UI.
+class _CardAction extends StatefulWidget {
+  const _CardAction({
+    required this.label,
+    required this.fg,
+    required this.onTap,
+  });
+
+  final String label;
+  final Color fg;
+  final VoidCallback onTap;
+
+  @override
+  State<_CardAction> createState() => _CardActionState();
+}
+
+class _CardActionState extends State<_CardAction> {
+  bool _hovered = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final Color bg = widget.fg.withValues(alpha: _hovered ? 0.12 : 0.06);
+    return MouseRegion(
+      onEnter: (_) => setState(() => _hovered = true),
+      onExit: (_) => setState(() => _hovered = false),
+      cursor: SystemMouseCursors.click,
+      child: GestureDetector(
+        onTap: widget.onTap,
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 120),
+          padding: const EdgeInsets.symmetric(vertical: 9),
+          alignment: Alignment.center,
+          decoration: BoxDecoration(
+            color: bg,
+            borderRadius: BorderRadius.circular(9),
+          ),
+          child: Text(
+            widget.label,
+            style: TextStyle(
+              color: widget.fg.withValues(alpha: 0.75),
+              fontSize: 12,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
 class _HighlightPainter extends CustomPainter {
-  _HighlightPainter({required this.rect});
+  _HighlightPainter({required this.rect, this.hoverRect});
 
   final Rect? rect;
+  final Rect? hoverRect;
 
   @override
   void paint(Canvas canvas, Size size) {
+    // Hover preview first (under the selection): soft translucent fill + thin
+    // stroke. Skipped when it coincides with the locked selection.
+    final Rect? hover = hoverRect;
+    if (hover != null && !hover.isEmpty && hover != rect) {
+      final RRect hoverRRect = RRect.fromRectAndRadius(
+        hover,
+        const Radius.circular(_highlightCornerRadius),
+      );
+      canvas.drawRRect(
+        hoverRRect,
+        Paint()
+          ..color = _highlightColor.withValues(alpha: 0.12)
+          ..style = PaintingStyle.fill,
+      );
+      canvas.drawRRect(
+        hoverRRect,
+        Paint()
+          ..color = _highlightColor.withValues(alpha: 0.6)
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 1.0,
+      );
+    }
+
+    // Locked selection: solid stroke.
     final Rect? r = rect;
     if (r == null || r.isEmpty) return;
     final Paint paint = Paint()
@@ -697,7 +1104,7 @@ class _HighlightPainter extends CustomPainter {
 
   @override
   bool shouldRepaint(_HighlightPainter oldDelegate) =>
-      oldDelegate.rect != rect;
+      oldDelegate.rect != rect || oldDelegate.hoverRect != hoverRect;
 }
 
 /// Minimal status pill tucked in the bottom-right corner while the inspector
@@ -748,6 +1155,59 @@ class _InspectorStatusPill extends StatelessWidget {
   }
 }
 
+/// Modern confirmation pill shown briefly after a copy. Mirrors the toast used
+/// by the WebDevicePreview chrome: dark frosted capsule, leading status icon,
+/// Inter text. Success shows a green check; errors show a red alert.
+class _InspectorToast extends StatelessWidget {
+  const _InspectorToast({
+    super.key,
+    required this.message,
+    required this.isError,
+  });
+
+  final String message;
+  final bool isError;
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: const Color(0xF02C2C2E),
+        borderRadius: BorderRadius.circular(20),
+        boxShadow: const <BoxShadow>[
+          BoxShadow(
+            color: Color(0x40000000),
+            blurRadius: 12,
+            offset: Offset(0, 3),
+          ),
+        ],
+      ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 9),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            Icon(
+              isError ? KasyIcons.error : KasyIcons.checkCircle,
+              color: isError ? const Color(0xFFFF453A) : const Color(0xFF34C759),
+              size: 15,
+            ),
+            const SizedBox(width: 8),
+            Text(
+              message,
+              style: GoogleFonts.inter(
+                fontSize: 12,
+                fontWeight: FontWeight.w500,
+                color: Colors.white,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 class _PulsingDot extends StatefulWidget {
   const _PulsingDot();
   @override