From 13dbd939b0256d03345fc241e81547d310204d45 Mon Sep 17 00:00:00 2001
From: brennanb2025 <brennankbenson@gmail.com>
Date: Thu, 28 May 2026 14:30:50 -0700
Subject: [PATCH] Simplify contextual tour spotlight

Co-authored-by: Orca <help@stably.ai>
---
 src/renderer/src/assets/main.css              | 24 +++++++------------
 .../ContextualTourOverlay.tsx                 | 12 ++++++++++
 .../ContextualTourOverlaySurface.tsx          | 10 --------
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index 6fe0e990028..5f5147aa2e5 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -2394,9 +2394,9 @@ html.onboarding-tour-start-transition::view-transition-new(root) {
   gap: 6px;
 }
 
-/* Why: contextual-tour spotlight is a full-cover scrim with an SVG-mask
-   hole at the target rect plus a thin edge stroke, so attention reads
-   from the dim contrast rather than from chrome painted over the target.
+/* Why: contextual-tour spotlight is a full-cover scrim with one SVG-mask
+   hole at the target rect, so attention reads from the single undimmed area
+   rather than from extra chrome painted over the target.
    The mask uses the target's own border-radius so curved buttons don't
    leave un-dimmed corners between their curve and the cutout edge. */
 .contextual-tour-spotlight {
@@ -2417,17 +2417,14 @@ html.onboarding-tour-start-transition::view-transition-new(root) {
    theme — tinting toward --background would be invisible in light theme
    (white over white). */
 .contextual-tour-spotlight-fill {
-  fill: rgb(0 0 0 / 0.5);
+  fill: rgb(0 0 0 / 0.22);
 }
 
-.contextual-tour-spotlight-edge {
-  pointer-events: none;
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ring) 55%, transparent);
-  transition:
-    top 180ms ease,
-    left 180ms ease,
-    width 180ms ease,
-    height 180ms ease;
+/* Why: tours can appear inside existing modal surfaces. In that case the
+   modal backdrop is secondary context, not the primary attention device. */
+:root[data-contextual-tour-active='true'] [data-slot='dialog-overlay'],
+:root[data-contextual-tour-active='true'] [data-slot='sheet-overlay'] {
+  background-color: rgb(0 0 0 / 0.28);
 }
 
 @keyframes contextual-tour-spotlight-fade-in {
@@ -2443,7 +2440,4 @@ html.onboarding-tour-start-transition::view-transition-new(root) {
   .contextual-tour-spotlight {
     animation: none;
   }
-  .contextual-tour-spotlight-edge {
-    transition: none;
-  }
 }
diff --git a/src/renderer/src/components/contextual-tours/ContextualTourOverlay.tsx b/src/renderer/src/components/contextual-tours/ContextualTourOverlay.tsx
index 9f36d479798..f466af4d6a1 100644
--- a/src/renderer/src/components/contextual-tours/ContextualTourOverlay.tsx
+++ b/src/renderer/src/components/contextual-tours/ContextualTourOverlay.tsx
@@ -287,6 +287,18 @@ export function ContextualTourOverlay(): JSX.Element | null {
     }
   }, [activeTourId])
 
+  useEffect(() => {
+    if (!activeTourId || typeof document === 'undefined') {
+      return
+    }
+    // Why: a tour over a Dialog/Sheet already has a modal backdrop; keep that
+    // backdrop lighter so the tour has one clear focus instead of a blackout.
+    document.documentElement.dataset.contextualTourActive = 'true'
+    return () => {
+      delete document.documentElement.dataset.contextualTourActive
+    }
+  }, [activeTourId])
+
   useEffect(() => {
     const panelHost = renderState?.panelHost
     if (!activeTourId || !panelHost) {
diff --git a/src/renderer/src/components/contextual-tours/ContextualTourOverlaySurface.tsx b/src/renderer/src/components/contextual-tours/ContextualTourOverlaySurface.tsx
index fe62cd38690..88d6b2ae698 100644
--- a/src/renderer/src/components/contextual-tours/ContextualTourOverlaySurface.tsx
+++ b/src/renderer/src/components/contextual-tours/ContextualTourOverlaySurface.tsx
@@ -221,16 +221,6 @@ function ContextualTourSpotlight({
           mask={`url(#${maskId})`}
         />
       </svg>
-      <div
-        className={cn('contextual-tour-spotlight-edge', positionClass)}
-        style={{
-          top: rect.top,
-          left: rect.left,
-          width: rect.width,
-          height: rect.height,
-          borderRadius: rect.radius
-        }}
-      />
     </div>
   )
 }