Hide the Adorn label tab until its position settles

The teal type-label tab is rendered inside the velcro-positioned overlay
that is its offset parent. For the first frame or two after the tab
appears on hover, that overlay hasn't finished being placed, so
positionAdornLabel computes the tab's `top`/`left` against a parent rect
that hasn't settled — painting the tab ~30px too high before
floating-ui's layout-shift observer re-fires and drops it to the correct
spot. (Confirmed via frame-by-frame capture: offsetHeight is constant, so
it isn't label-height settling; the written `top` itself changes over the
first ~2 frames as the offset parent moves into place.)

Keep the tab hidden and reveal it one frame after the most recent
position write — rescheduled on every update — so it only becomes visible
once it has stopped moving. The settle takes ~1–2 frames, so the reveal
delay is imperceptible.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: lukemelia

packages/host/app/modifiers/position-adorn-label.ts

@@ -64,6 +64,28 @@ export function makePositionAdornLabel(
     label.style.top = '0';
     label.style.left = '0';
 
+    // Keep the label hidden until its position has settled. The label is
+    // rendered inside the velcro-positioned overlay that is its offset parent
+    // (e.g. operator-mode's actions-overlay); for the first frame or two after
+    // the label appears that overlay is still being placed, so `update()`
+    // computes `top`/`left` against a parent rect that hasn't settled and the
+    // tab paints at the wrong spot before floating-ui's layout-shift observer
+    // re-fires and corrects it. Reveal one frame after the most recent
+    // position write — rescheduled on every update — so the tab only becomes
+    // visible once it has stopped moving.
+    label.style.visibility = 'hidden';
+    let revealHandle: number | undefined;
+    let scheduleReveal = () => {
+      if (revealHandle !== undefined) {
+        cancelAnimationFrame(revealHandle);
+      }
+      // eslint-disable-next-line @cardstack/boxel/no-raf-for-state
+      revealHandle = requestAnimationFrame(() => {
+        revealHandle = undefined;
+        label.style.visibility = 'visible';
+      });
+    };
+
     let update = () => {
       label.style.maxWidth = 'none';
       let labelWidth = label.scrollWidth;
@@ -151,8 +173,15 @@ export function makePositionAdornLabel(
       }
       label.style.left = (anchorLeftX - parentRect.left) / scaleX + 'px';
       label.style.top = (anchorTopY - parentRect.top) / scaleY + 'px';
+      scheduleReveal();
     };
 
-    return autoUpdate(cardEl, label, update);
+    let cleanup = autoUpdate(cardEl, label, update);
+    return () => {
+      if (revealHandle !== undefined) {
+        cancelAnimationFrame(revealHandle);
+      }
+      cleanup();
+    };
   });
 }