fix(og): use data-waitfor on embeds instead of a global wait

Tag the Tweet and BlueSky wrappers with `data-waitfor="iframe"`. The
existing `exportSlides` machinery already walks every `[data-waitfor]`
element and waits for the inner selector to become visible before
screenshotting (PDF / PNG / OG) — so Twitter's and Bluesky's
async-mounted widget iframes are now waited on precisely, rather than
covered by a blanket fixed delay.

Drop the OG `wait` default from 3000 ms → 0. The headmatter override
`publish.ogImage.wait` stays as an escape hatch for decks with custom
embeds that don't tag a `data-waitfor` signal.

Net effect: build is faster (no 3 s per slide), correct (waits exactly
as long as the slowest embed needs), and fails loudly if an embed is
broken instead of silently producing an empty slot.

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

Author: ryan-williams

packages/client/builtin/BlueSky.vue

@@ -278,7 +278,11 @@ onUnmounted(() => {
 
 <template>
   <VDrag v-if="props.draggable !== false" :pos="bskyDragId" :lock-aspect-ratio="bskyAR">
-    <div ref="wrapper" class="bluesky-fit">
+    <!-- `data-waitfor="iframe"` signals to `exportSlides` (Playwright build-time
+         render — PDF/PNG/OG) to wait for Bluesky's widget to inject its iframe
+         before screenshotting. Otherwise the screenshot can fire before the
+         widget mounts (BSky's `window.bluesky.scan` populates async). -->
+    <div ref="wrapper" class="bluesky-fit" data-waitfor="iframe">
       <div ref="container" class="slidev-bluesky" :style="innerStyle">
         <blockquote
           v-if="resolvedUri"
@@ -300,7 +304,7 @@ onUnmounted(() => {
     </div>
   </VDrag>
   <Transform v-else :scale="scale || 1">
-    <div ref="container" class="slidev-bluesky">
+    <div ref="container" class="slidev-bluesky" data-waitfor="iframe">
       <blockquote
         v-if="resolvedUri"
         class="bluesky-embed"

packages/client/builtin/Tweet.vue

@@ -131,7 +131,11 @@ onUnmounted(() => {
 
 <template>
   <VDrag v-if="props.draggable !== false" :pos="`tweet-${id}`" :lock-aspect-ratio="tweetAR">
-    <div ref="wrapper" class="tweet-fit">
+    <!-- `data-waitfor="iframe"` signals to `exportSlides` (Playwright build-time
+         render — PDF/PNG/OG) to wait for Twitter's widget to inject its iframe
+         before screenshotting. Otherwise the screenshot can fire before the
+         widget mounts (Twitter's `twttr.widgets.createTweet` resolves async). -->
+    <div ref="wrapper" class="tweet-fit" data-waitfor="iframe">
       <!-- DragControl.associatedLink picks this up via `querySelector('a')`,
            surfacing a clickable URL in the control bar when the embed is selected. -->
       <a :href="`https://x.com/i/web/status/${id}`" target="_blank" rel="noopener noreferrer" aria-hidden="true" class="tweet-link" />
@@ -146,7 +150,7 @@ onUnmounted(() => {
     </div>
   </VDrag>
   <Transform v-else :scale="scale || 1">
-    <div ref="tweet" class="tweet slidev-tweet">
+    <div ref="tweet" class="tweet slidev-tweet" data-waitfor="iframe">
       <div v-if="!loaded || tweetNotFound" class="w-30 h-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50">
         <div class="m-auto animate-pulse text-4xl">
           <div class="i-carbon:logo-twitter" />

packages/slidev/node/commands/og.ts

@@ -339,12 +339,12 @@ export async function generateOgShells(
   await fs.mkdir(cacheDir, { recursive: true })
   const cachePath = (p: SlideOgInfo) => resolve(cacheDir, `${p.no}-${p.contentHash}.${format}`)
 
-  // Extra delay (ms) after the page `load` event before screenshotting, so
-  // dynamic embeds (Twitter, BlueSky, etc. — their iframes mount via script
-  // post-load) have time to populate. 3 s covers the common case without
-  // bloating the OG-build wallclock by much. Configurable via headmatter
-  // `publish.ogImage.wait` (in ms).
-  const wait: number = typeof ogCfg.wait === 'number' ? ogCfg.wait : 3000
+  // Extra delay (ms) after the page `load` event before screenshotting. The
+  // primary mechanism for waiting on async-loading content is `data-waitfor`
+  // (see `exportSlides` + the Tweet / BlueSky components), so default is 0.
+  // Escape hatch via headmatter `publish.ogImage.wait` for decks with custom
+  // embeds that can't (or don't) emit a `data-waitfor` signal.
+  const wait: number = typeof ogCfg.wait === 'number' ? ogCfg.wait : 0
 
   // Render-key: changes to size/format/wait invalidate the entire cache.
   const renderKey = `${size[0]}x${size[1]}.${format}.w${wait}`