From 561c68036acbdbcf50f0706113ab1a43f35a3218 Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Thu, 4 Jun 2026 23:12:55 -0400
Subject: [PATCH 1/5] Set the velcro overlay position:absolute from CSS to stop
 the first-frame jump
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hover overlay is positioned by velcro (floating-ui), but it only became
`position: absolute` inside the offset middleware — which runs *after*
floating-ui has already measured the rects on the first computePosition. So
the first frame was measured against the wrong containing block and the whole
overlay (the teal type-label tab, the select chip, the menu, the outline)
painted ~60px off, then snapped into place one frame later.

floating-ui requires the floating element to already be absolutely positioned
when it first measures. Declare `position: absolute` in the overlay's CSS so
it is in effect before velcro's first measurement; the middleware still sets
it too, harmlessly. Confirmed via frame-by-frame capture that the overlay's
own top/left was the thing jumping (526->466 between frame 0 and 1), so fixing
it here fixes every piece of chrome that rides the overlay.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/operator-mode/operator-mode-overlays.gts   | 8 ++++++++
 packages/host/app/components/operator-mode/overlays.gts   | 7 +++++++
 2 files changed, 15 insertions(+)

diff --git a/packages/host/app/components/operator-mode/operator-mode-overlays.gts b/packages/host/app/components/operator-mode/operator-mode-overlays.gts
index bedebfbbf98..65dafcf484e 100644
--- a/packages/host/app/components/operator-mode/operator-mode-overlays.gts
+++ b/packages/host/app/components/operator-mode/operator-mode-overlays.gts
@@ -218,6 +218,14 @@ export default class OperatorModeOverlays extends Overlays {
     </AdornContext>
     <style scoped>
       .actions-overlay {
+        /* Establish `position: absolute` from CSS, before velcro's first
+           computePosition runs. floating-ui requires the floating element to
+           already be absolutely positioned when it first measures; the offset
+           middleware also sets this, but that runs *after* the initial
+           measurement, so without it here the overlay (and everything riding
+           it — the type-label tab, the select chip, the menu) lands ~1 frame
+           off and visibly jumps into place on first hover. */
+        position: absolute;
         pointer-events: none;
         /* Allow the type-label tab and selection chip to extend outside the
            overlay's bounding box without being clipped. */
diff --git a/packages/host/app/components/operator-mode/overlays.gts b/packages/host/app/components/operator-mode/overlays.gts
index e85ff853da7..f5bfadaf0d4 100644
--- a/packages/host/app/components/operator-mode/overlays.gts
+++ b/packages/host/app/components/operator-mode/overlays.gts
@@ -95,6 +95,13 @@ export default class Overlays extends Component<OverlaySignature> {
     {{/each}}
     <style scoped>
       .base-overlay {
+        /* Establish `position: absolute` from CSS, before velcro's first
+           computePosition runs. floating-ui requires the floating element to
+           already be absolutely positioned when it first measures; the offset
+           middleware also sets this, but that runs *after* the initial
+           measurement, so without it here the overlay lands ~1 frame off and
+           visibly jumps into place on first appearance. */
+        position: absolute;
         width: 100%;
         height: 100%;
         pointer-events: none;

From 04a631a8c3cdb90938bdc5b836de9215b84e3a95 Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Thu, 4 Jun 2026 23:21:19 -0400
Subject: [PATCH 2/5] TEMP: instrument velcro overlay middleware to trace the
 first-frame jump
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Gated debug logging (localStorage['adorn-pos-debug']='1' or ?adornPosDebug=1)
in the offset middleware: per computePosition, logs the returned x/y, the
reference card's rect, the floating element's computed position + offset
parent + that parent's top, and scroll offsets — so we can see which quantity
is ~60px off on the first call. Includes a v-mw1 build marker. Diagnostic
only; keeps the position:absolute CSS so we can also confirm whether it took
effect (floatPos field). Do not merge.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../app/components/operator-mode/overlays.gts | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/packages/host/app/components/operator-mode/overlays.gts b/packages/host/app/components/operator-mode/overlays.gts
index f5bfadaf0d4..baa69ffc257 100644
--- a/packages/host/app/components/operator-mode/overlays.gts
+++ b/packages/host/app/components/operator-mode/overlays.gts
@@ -28,6 +28,22 @@ import type { CardDefOrId } from './stack-item';
 import type { RenderedCardForOverlayActions } from '../../resources/element-tracker';
 import type { MiddlewareState } from '@floating-ui/dom';
 
+// --- TEMP INSTRUMENTATION (overlay first-frame jump) — remove before merge ---
+// Enable with localStorage.setItem('adorn-pos-debug','1') (reload) or
+// ?adornPosDebug=1. Logs, per velcro computePosition, the quantities that
+// determine where the overlay lands, so we can see which one is ~60px off on
+// the first call.
+function overlayDebugOn(): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    if (window.localStorage?.getItem('adorn-pos-debug') === '1') return true;
+  } catch {
+    /* localStorage may be unavailable */
+  }
+  return /[?&]adornPosDebug=1\b/.test(window.location?.search ?? '');
+}
+// --- end TEMP ---
+
 interface OverlaySignature {
   Args: {
     renderedCardsForOverlayActions: RenderedCardForOverlayActions[];
@@ -146,6 +162,27 @@ export default class Overlays extends Component<OverlaySignature> {
         floating.style.borderRadius =
           window.getComputedStyle(reference).borderRadius;
       }
+      // --- TEMP INSTRUMENTATION (build marker v-mw1) — remove before merge ---
+      if (overlayDebugOn()) {
+        let op = floating.offsetParent as HTMLElement | null;
+        let opRect = op ? op.getBoundingClientRect() : null;
+        let refRect =
+          reference instanceof Element
+            ? reference.getBoundingClientRect()
+            : null;
+        let scroller = floating.closest(
+          '[data-test-cards-grid-cards], .boxel-cards-grid, [data-scroller], .ember-application',
+        ) as HTMLElement | null;
+        console.log(
+          `[overlay-mw v-mw1] x=${rects.reference.x.toFixed(1)} y=${rects.reference.y.toFixed(1)}` +
+            ` | refRect top=${refRect ? refRect.top.toFixed(1) : '?'} left=${refRect ? refRect.left.toFixed(1) : '?'}` +
+            ` | floatPos=${window.getComputedStyle(floating).position}` +
+            ` | offsetParent=${op ? op.tagName + '.' + String(op.className).replace(/\s+/g, '.').slice(0, 30) : 'null'}` +
+            ` opTop=${opRect ? opRect.top.toFixed(1) : '?'} opLeft=${opRect ? opRect.left.toFixed(1) : '?'}` +
+            ` | scrollY=${window.scrollY} scrollerTop=${scroller ? scroller.scrollTop : '?'}`,
+        );
+      }
+      // --- end TEMP ---
       return {
         x: rects.reference.x,
         y: rects.reference.y,

From 141d88ac8055a676c9a5368f327f1314c14e0f55 Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Thu, 4 Jun 2026 23:32:33 -0400
Subject: [PATCH 3/5] Hide the hover overlay until velcro settles to stop the
 first-frame jump
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Frame-by-frame capture of the velcro offset middleware showed floating-ui's
first one-or-two computePosition calls return the reference card in viewport
coordinates instead of offset-parent-relative ones — it omits the offset
parent's offset (here 60px) for ~1 frame, then corrects. So the overlay, and
everything riding it (the teal type-label tab, the select chip, the menu, the
outline), painted ~60px off and visibly jumped into place on first hover.

Keep the overlay hidden until its position settles: in the offset middleware,
set opacity 0 and reschedule a reveal one animation frame after the most recent
position write, so it reveals only once movement stops (the wrong value can
repeat across calls, so converging on equality isn't enough). Opacity — not
visibility — so the overlay's action buttons stay hit-testable throughout.
Gated behind `hideUntilPositioned`, which only OperatorModeOverlays (the
overlay with visible chrome) turns on.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../operator-mode/operator-mode-overlays.gts  | 15 ++--
 .../app/components/operator-mode/overlays.gts | 83 +++++++++----------
 2 files changed, 47 insertions(+), 51 deletions(-)

diff --git a/packages/host/app/components/operator-mode/operator-mode-overlays.gts b/packages/host/app/components/operator-mode/operator-mode-overlays.gts
index 65dafcf484e..997139743d5 100644
--- a/packages/host/app/components/operator-mode/operator-mode-overlays.gts
+++ b/packages/host/app/components/operator-mode/operator-mode-overlays.gts
@@ -218,14 +218,6 @@ export default class OperatorModeOverlays extends Overlays {
     </AdornContext>
     <style scoped>
       .actions-overlay {
-        /* Establish `position: absolute` from CSS, before velcro's first
-           computePosition runs. floating-ui requires the floating element to
-           already be absolutely positioned when it first measures; the offset
-           middleware also sets this, but that runs *after* the initial
-           measurement, so without it here the overlay (and everything riding
-           it — the type-label tab, the select chip, the menu) lands ~1 frame
-           off and visibly jumps into place on first hover. */
-        position: absolute;
         pointer-events: none;
         /* Allow the type-label tab and selection chip to extend outside the
            overlay's bounding box without being clipped. */
@@ -288,6 +280,13 @@ export default class OperatorModeOverlays extends Overlays {
     return 100;
   }
 
+  // This overlay carries visible chrome (the teal type-label tab, the select
+  // chip, the menu, the outline), so hide it until velcro's position settles
+  // to avoid the first-frame jump those would otherwise show.
+  protected override get hideUntilPositioned(): boolean {
+    return true;
+  }
+
   // Tracks which rendered cards are currently small enough to warrant
   // the Adorn compact treatment (narrow atom-format cards). The set
   // is updated by `trackCompact` as cards resize; `isCompact` reads
diff --git a/packages/host/app/components/operator-mode/overlays.gts b/packages/host/app/components/operator-mode/overlays.gts
index baa69ffc257..e8466b5ff21 100644
--- a/packages/host/app/components/operator-mode/overlays.gts
+++ b/packages/host/app/components/operator-mode/overlays.gts
@@ -28,22 +28,6 @@ import type { CardDefOrId } from './stack-item';
 import type { RenderedCardForOverlayActions } from '../../resources/element-tracker';
 import type { MiddlewareState } from '@floating-ui/dom';
 
-// --- TEMP INSTRUMENTATION (overlay first-frame jump) — remove before merge ---
-// Enable with localStorage.setItem('adorn-pos-debug','1') (reload) or
-// ?adornPosDebug=1. Logs, per velcro computePosition, the quantities that
-// determine where the overlay lands, so we can see which one is ~60px off on
-// the first call.
-function overlayDebugOn(): boolean {
-  if (typeof window === 'undefined') return false;
-  try {
-    if (window.localStorage?.getItem('adorn-pos-debug') === '1') return true;
-  } catch {
-    /* localStorage may be unavailable */
-  }
-  return /[?&]adornPosDebug=1\b/.test(window.location?.search ?? '');
-}
-// --- end TEMP ---
-
 interface OverlaySignature {
   Args: {
     renderedCardsForOverlayActions: RenderedCardForOverlayActions[];
@@ -111,13 +95,6 @@ export default class Overlays extends Component<OverlaySignature> {
     {{/each}}
     <style scoped>
       .base-overlay {
-        /* Establish `position: absolute` from CSS, before velcro's first
-           computePosition runs. floating-ui requires the floating element to
-           already be absolutely positioned when it first measures; the offset
-           middleware also sets this, but that runs *after* the initial
-           measurement, so without it here the overlay lands ~1 frame off and
-           visibly jumps into place on first appearance. */
-        position: absolute;
         width: 100%;
         height: 100%;
         pointer-events: none;
@@ -162,27 +139,35 @@ export default class Overlays extends Component<OverlaySignature> {
         floating.style.borderRadius =
           window.getComputedStyle(reference).borderRadius;
       }
-      // --- TEMP INSTRUMENTATION (build marker v-mw1) — remove before merge ---
-      if (overlayDebugOn()) {
-        let op = floating.offsetParent as HTMLElement | null;
-        let opRect = op ? op.getBoundingClientRect() : null;
-        let refRect =
-          reference instanceof Element
-            ? reference.getBoundingClientRect()
-            : null;
-        let scroller = floating.closest(
-          '[data-test-cards-grid-cards], .boxel-cards-grid, [data-scroller], .ember-application',
-        ) as HTMLElement | null;
-        console.log(
-          `[overlay-mw v-mw1] x=${rects.reference.x.toFixed(1)} y=${rects.reference.y.toFixed(1)}` +
-            ` | refRect top=${refRect ? refRect.top.toFixed(1) : '?'} left=${refRect ? refRect.left.toFixed(1) : '?'}` +
-            ` | floatPos=${window.getComputedStyle(floating).position}` +
-            ` | offsetParent=${op ? op.tagName + '.' + String(op.className).replace(/\s+/g, '.').slice(0, 30) : 'null'}` +
-            ` opTop=${opRect ? opRect.top.toFixed(1) : '?'} opLeft=${opRect ? opRect.left.toFixed(1) : '?'}` +
-            ` | scrollY=${window.scrollY} scrollerTop=${scroller ? scroller.scrollTop : '?'}`,
-        );
+      // floating-ui's first one-or-two computePosition calls return the
+      // reference in viewport coordinates rather than offset-parent-relative
+      // ones (it omits the offset parent's offset for ~1 frame, then corrects),
+      // so the overlay paints one frame off and visibly jumps into place — and
+      // everything riding it (the type-label tab, the select chip, the menu,
+      // the outline) jumps with it. Subclasses with visible chrome opt into
+      // hiding the overlay until its position has settled (see
+      // `hideUntilPositioned`). We use opacity rather than visibility so the
+      // overlay's action buttons stay hit-testable the whole time. The reveal
+      // is rescheduled on every position write and fires one frame after the
+      // last, so it lands only once the position has stopped moving (the wrong
+      // value can repeat across calls, so converging on equality isn't enough).
+      if (
+        this.hideUntilPositioned &&
+        floating.dataset.overlayPositioned !== 'true'
+      ) {
+        floating.style.opacity = '0';
+        let pending = this.overlayRevealHandles.get(floating);
+        if (pending !== undefined) {
+          cancelAnimationFrame(pending);
+        }
+        // eslint-disable-next-line @cardstack/boxel/no-raf-for-state
+        let handle = requestAnimationFrame(() => {
+          this.overlayRevealHandles.delete(floating);
+          floating.dataset.overlayPositioned = 'true';
+          floating.style.opacity = '';
+        });
+        this.overlayRevealHandles.set(floating, handle);
       }
-      // --- end TEMP ---
       return {
         x: rects.reference.x,
         y: rects.reference.y,
@@ -190,6 +175,18 @@ export default class Overlays extends Component<OverlaySignature> {
     },
   };
 
+  // Tracks the pending reveal rAF per overlay element so it can be rescheduled
+  // (and so the latest write wins) while the position is still settling.
+  private overlayRevealHandles = new WeakMap<HTMLElement, number>();
+
+  // Whether to keep the overlay hidden (opacity 0) until floating-ui's position
+  // has settled, to avoid the first-frame jump. Off by default (consumers
+  // without visible chrome — spec-preview, playground — don't need it);
+  // OperatorModeOverlays overrides it.
+  protected get hideUntilPositioned(): boolean {
+    return false;
+  }
+
   // Since we put absolutely positined overlays containing operator mode actions on top of the rendered cards,
   // we are running into a problem where the overlays are interfering with scrolling of the container that holds the rendered cards.
   // That means scrolling stops when the cursor gets over the overlay, which is a bug. We solved this problem by disabling pointer

From 4a198d26fa7ef4ddd6c5aca8f03b34fa4e9c88be Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Thu, 4 Jun 2026 23:49:08 -0400
Subject: [PATCH 4/5] Reveal the hover overlay only after its rect goes stable

The previous attempt rescheduled the reveal off requestAnimationFrame inside
the offset middleware, but floating-ui's correction to the right position also
lands a frame later, so the reveal could win that race and flash the overlay at
the wrong (first-measure) position before it corrected.

Watch the overlay's actual measured rect instead: hold it at opacity 0 from
before the first paint (in a modifier) and reveal only once getBoundingClientRect
is unchanged for two consecutive frames (with a safety cap). The wrong position
only appears for a single frame, so it can never be the reveal frame, and there
is no dependence on middleware-output equality or frame counts. Opacity, not
visibility, so the overlay's action buttons stay hit-testable. Gated behind
hideUntilPositioned, which only OperatorModeOverlays enables.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../app/components/operator-mode/overlays.gts | 86 +++++++++++--------
 1 file changed, 52 insertions(+), 34 deletions(-)

diff --git a/packages/host/app/components/operator-mode/overlays.gts b/packages/host/app/components/operator-mode/overlays.gts
index e8466b5ff21..741d06edd16 100644
--- a/packages/host/app/components/operator-mode/overlays.gts
+++ b/packages/host/app/components/operator-mode/overlays.gts
@@ -9,6 +9,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
 import { dropTask } from 'ember-concurrency';
+import { modifier } from 'ember-modifier';
 import { velcro } from 'ember-velcro';
 import { isEqual, omit } from 'lodash';
 
@@ -78,6 +79,7 @@ export default class Overlays extends Component<OverlaySignature> {
           <div
             class={{this.overlayClassName}}
             {{velcro renderedCard.element middleware=(array this.offset)}}
+            {{this.revealWhenPositioned}}
             style={{renderedCard.overlayZIndexStyle}}
             data-test-card-overlay
             ...attributes
@@ -139,35 +141,6 @@ export default class Overlays extends Component<OverlaySignature> {
         floating.style.borderRadius =
           window.getComputedStyle(reference).borderRadius;
       }
-      // floating-ui's first one-or-two computePosition calls return the
-      // reference in viewport coordinates rather than offset-parent-relative
-      // ones (it omits the offset parent's offset for ~1 frame, then corrects),
-      // so the overlay paints one frame off and visibly jumps into place — and
-      // everything riding it (the type-label tab, the select chip, the menu,
-      // the outline) jumps with it. Subclasses with visible chrome opt into
-      // hiding the overlay until its position has settled (see
-      // `hideUntilPositioned`). We use opacity rather than visibility so the
-      // overlay's action buttons stay hit-testable the whole time. The reveal
-      // is rescheduled on every position write and fires one frame after the
-      // last, so it lands only once the position has stopped moving (the wrong
-      // value can repeat across calls, so converging on equality isn't enough).
-      if (
-        this.hideUntilPositioned &&
-        floating.dataset.overlayPositioned !== 'true'
-      ) {
-        floating.style.opacity = '0';
-        let pending = this.overlayRevealHandles.get(floating);
-        if (pending !== undefined) {
-          cancelAnimationFrame(pending);
-        }
-        // eslint-disable-next-line @cardstack/boxel/no-raf-for-state
-        let handle = requestAnimationFrame(() => {
-          this.overlayRevealHandles.delete(floating);
-          floating.dataset.overlayPositioned = 'true';
-          floating.style.opacity = '';
-        });
-        this.overlayRevealHandles.set(floating, handle);
-      }
       return {
         x: rects.reference.x,
         y: rects.reference.y,
@@ -175,11 +148,7 @@ export default class Overlays extends Component<OverlaySignature> {
     },
   };
 
-  // Tracks the pending reveal rAF per overlay element so it can be rescheduled
-  // (and so the latest write wins) while the position is still settling.
-  private overlayRevealHandles = new WeakMap<HTMLElement, number>();
-
-  // Whether to keep the overlay hidden (opacity 0) until floating-ui's position
+  // Whether to keep the overlay hidden (opacity 0) until its velcro position
   // has settled, to avoid the first-frame jump. Off by default (consumers
   // without visible chrome — spec-preview, playground — don't need it);
   // OperatorModeOverlays overrides it.
@@ -187,6 +156,55 @@ export default class Overlays extends Component<OverlaySignature> {
     return false;
   }
 
+  // floating-ui's first one-or-two computePosition calls return the reference
+  // in viewport coordinates rather than offset-parent-relative ones (it omits
+  // the offset parent's offset for ~1 frame, then corrects), so the overlay —
+  // and everything riding it (the type-label tab, the select chip, the menu,
+  // the outline) — paints one frame off and visibly jumps into place. Hold the
+  // overlay at opacity 0 until its measured rect has been unchanged for two
+  // consecutive frames, then reveal. We watch the actual geometry rather than
+  // count frames or compare middleware outputs, because the wrong position can
+  // repeat across calls and the correction lands a frame after the first paint;
+  // only the rect going stable is a reliable "done moving" signal. Opacity (not
+  // visibility) keeps the overlay's action buttons hit-testable throughout.
+  protected revealWhenPositioned = modifier((element: HTMLElement) => {
+    if (!this.hideUntilPositioned) {
+      return undefined;
+    }
+    element.style.opacity = '0';
+    let lastTop: number | undefined;
+    let lastLeft: number | undefined;
+    let stableFrames = 0;
+    let elapsedFrames = 0;
+    let raf = 0;
+    let tick = () => {
+      let { top, left } = element.getBoundingClientRect();
+      if (top === lastTop && left === lastLeft) {
+        stableFrames += 1;
+      } else {
+        stableFrames = 0;
+        lastTop = top;
+        lastLeft = left;
+      }
+      elapsedFrames += 1;
+      // Reveal once the rect has settled, with a safety cap so a perpetually
+      // animating reference can't keep the overlay hidden forever.
+      if (stableFrames >= 2 || elapsedFrames > 30) {
+        element.style.opacity = '';
+        return;
+      }
+      // eslint-disable-next-line @cardstack/boxel/no-raf-for-state
+      raf = requestAnimationFrame(tick);
+    };
+    // eslint-disable-next-line @cardstack/boxel/no-raf-for-state
+    raf = requestAnimationFrame(tick);
+    return () => {
+      if (raf) {
+        cancelAnimationFrame(raf);
+      }
+    };
+  });
+
   // Since we put absolutely positined overlays containing operator mode actions on top of the rendered cards,
   // we are running into a problem where the overlays are interfering with scrolling of the container that holds the rendered cards.
   // That means scrolling stops when the cursor gets over the overlay, which is a bug. We solved this problem by disabling pointer

From ce1369d5f3fe75e7b2533b03398ef036acdaef7f Mon Sep 17 00:00:00 2001
From: Luke Melia <luke@lukemelia.com>
Date: Thu, 4 Jun 2026 23:58:39 -0400
Subject: [PATCH 5/5] Compute the overlay position from live rects to stop the
 first-frame jump
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The velcro offset middleware returned floating-ui's `rects.reference`, but
frame-by-frame capture showed floating-ui's first one-or-two computePosition
calls return the reference in viewport coordinates and only subtract the offset
parent's offset a frame later — so the overlay (and everything riding it: the
type-label tab, the select chip, the menu, the outline) painted ~60px off and
jumped into place on first hover.

The capture also showed the inputs we need are correct from frame 0: the
reference's own getBoundingClientRect and the floating element's offsetParent
rect. Compute the position from those directly (recovering the offset parent's
scale the same way the Adorn label positioner does, for the scaled test
runner), so it's right on the very first frame. No hiding, no rAF, no deferred
reveal — the overlay simply lands in the correct place immediately.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../operator-mode/operator-mode-overlays.gts  |   7 --
 .../app/components/operator-mode/overlays.gts | 102 +++++++-----------
 2 files changed, 37 insertions(+), 72 deletions(-)

diff --git a/packages/host/app/components/operator-mode/operator-mode-overlays.gts b/packages/host/app/components/operator-mode/operator-mode-overlays.gts
index 997139743d5..bedebfbbf98 100644
--- a/packages/host/app/components/operator-mode/operator-mode-overlays.gts
+++ b/packages/host/app/components/operator-mode/operator-mode-overlays.gts
@@ -280,13 +280,6 @@ export default class OperatorModeOverlays extends Overlays {
     return 100;
   }
 
-  // This overlay carries visible chrome (the teal type-label tab, the select
-  // chip, the menu, the outline), so hide it until velcro's position settles
-  // to avoid the first-frame jump those would otherwise show.
-  protected override get hideUntilPositioned(): boolean {
-    return true;
-  }
-
   // Tracks which rendered cards are currently small enough to warrant
   // the Adorn compact treatment (narrow atom-format cards). The set
   // is updated by `trackCompact` as cards resize; `isCompact` reads
diff --git a/packages/host/app/components/operator-mode/overlays.gts b/packages/host/app/components/operator-mode/overlays.gts
index 741d06edd16..1143d89fc05 100644
--- a/packages/host/app/components/operator-mode/overlays.gts
+++ b/packages/host/app/components/operator-mode/overlays.gts
@@ -9,7 +9,6 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
 import { dropTask } from 'ember-concurrency';
-import { modifier } from 'ember-modifier';
 import { velcro } from 'ember-velcro';
 import { isEqual, omit } from 'lodash';
 
@@ -79,7 +78,6 @@ export default class Overlays extends Component<OverlaySignature> {
           <div
             class={{this.overlayClassName}}
             {{velcro renderedCard.element middleware=(array this.offset)}}
-            {{this.revealWhenPositioned}}
             style={{renderedCard.overlayZIndexStyle}}
             data-test-card-overlay
             ...attributes
@@ -128,12 +126,12 @@ export default class Overlays extends Component<OverlaySignature> {
   protected offset = {
     name: 'offset',
     fn: (state: MiddlewareState) => {
-      let { elements, rects } = state;
+      let { elements } = state;
       let { floating, reference } = elements;
-      let { width, height } = reference.getBoundingClientRect();
+      let refRect = reference.getBoundingClientRect();
 
-      floating.style.width = width + 'px';
-      floating.style.height = height + 'px';
+      floating.style.width = refRect.width + 'px';
+      floating.style.height = refRect.height + 'px';
       floating.style.position = 'absolute';
       // Mirror the underlying card's corner radius so any decorative
       // outline / box-shadow on the overlay follows the same curve.
@@ -141,70 +139,44 @@ export default class Overlays extends Component<OverlaySignature> {
         floating.style.borderRadius =
           window.getComputedStyle(reference).borderRadius;
       }
+
+      // Position the overlay from the live reference rect relative to the
+      // floating element's own offset parent, rather than floating-ui's
+      // `rects.reference`. floating-ui's first one-or-two computePosition calls
+      // omit the offset parent's offset (they return the reference in viewport
+      // coordinates and only subtract the offset parent a frame later), so
+      // trusting `rects.reference` makes the overlay — and everything riding it
+      // (the type-label tab, the select chip, the menu, the outline) — paint
+      // one frame off and visibly jump into place on first appearance.
+      // Computing it ourselves from the current rects is correct on the very
+      // first frame. We recover the offset parent's scale the same way the
+      // Adorn label positioner does (the test runner scales `#ember-testing`),
+      // and convert the viewport anchor into the offset parent's local space.
+      let offsetParent = floating.offsetParent as HTMLElement | null;
+      let parentRect = offsetParent
+        ? offsetParent.getBoundingClientRect()
+        : new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+      let scaleX =
+        offsetParent && offsetParent.offsetWidth > 0
+          ? parentRect.width / offsetParent.offsetWidth
+          : 1;
+      let scaleY =
+        offsetParent && offsetParent.offsetHeight > 0
+          ? parentRect.height / offsetParent.offsetHeight
+          : 1;
+      if (!Number.isFinite(scaleX) || scaleX === 0) {
+        scaleX = 1;
+      }
+      if (!Number.isFinite(scaleY) || scaleY === 0) {
+        scaleY = 1;
+      }
       return {
-        x: rects.reference.x,
-        y: rects.reference.y,
+        x: (refRect.left - parentRect.left) / scaleX,
+        y: (refRect.top - parentRect.top) / scaleY,
       };
     },
   };
 
-  // Whether to keep the overlay hidden (opacity 0) until its velcro position
-  // has settled, to avoid the first-frame jump. Off by default (consumers
-  // without visible chrome — spec-preview, playground — don't need it);
-  // OperatorModeOverlays overrides it.
-  protected get hideUntilPositioned(): boolean {
-    return false;
-  }
-
-  // floating-ui's first one-or-two computePosition calls return the reference
-  // in viewport coordinates rather than offset-parent-relative ones (it omits
-  // the offset parent's offset for ~1 frame, then corrects), so the overlay —
-  // and everything riding it (the type-label tab, the select chip, the menu,
-  // the outline) — paints one frame off and visibly jumps into place. Hold the
-  // overlay at opacity 0 until its measured rect has been unchanged for two
-  // consecutive frames, then reveal. We watch the actual geometry rather than
-  // count frames or compare middleware outputs, because the wrong position can
-  // repeat across calls and the correction lands a frame after the first paint;
-  // only the rect going stable is a reliable "done moving" signal. Opacity (not
-  // visibility) keeps the overlay's action buttons hit-testable throughout.
-  protected revealWhenPositioned = modifier((element: HTMLElement) => {
-    if (!this.hideUntilPositioned) {
-      return undefined;
-    }
-    element.style.opacity = '0';
-    let lastTop: number | undefined;
-    let lastLeft: number | undefined;
-    let stableFrames = 0;
-    let elapsedFrames = 0;
-    let raf = 0;
-    let tick = () => {
-      let { top, left } = element.getBoundingClientRect();
-      if (top === lastTop && left === lastLeft) {
-        stableFrames += 1;
-      } else {
-        stableFrames = 0;
-        lastTop = top;
-        lastLeft = left;
-      }
-      elapsedFrames += 1;
-      // Reveal once the rect has settled, with a safety cap so a perpetually
-      // animating reference can't keep the overlay hidden forever.
-      if (stableFrames >= 2 || elapsedFrames > 30) {
-        element.style.opacity = '';
-        return;
-      }
-      // eslint-disable-next-line @cardstack/boxel/no-raf-for-state
-      raf = requestAnimationFrame(tick);
-    };
-    // eslint-disable-next-line @cardstack/boxel/no-raf-for-state
-    raf = requestAnimationFrame(tick);
-    return () => {
-      if (raf) {
-        cancelAnimationFrame(raf);
-      }
-    };
-  });
-
   // Since we put absolutely positined overlays containing operator mode actions on top of the rendered cards,
   // we are running into a problem where the overlays are interfering with scrolling of the container that holds the rendered cards.
   // That means scrolling stops when the cursor gets over the overlay, which is a bug. We solved this problem by disabling pointer