fix(plugins-home): deck slide-tour bakes, CJK font fix, framing + reveal height (#4020)

* fix(plugins-home): anchor baked preset previews to the hero top

The example-prompt preset tiles render wider than the gallery's 1.31:1 baked
clip, so object-fit:cover was cropping the hero headline out of the vertical
middle. Anchor the preset video/poster to the top so the hero stays in frame.
Scoped to the preset cards; the Community grid (which matches the clip aspect)
is untouched.

* fix(plugins-home): bake decks as slide tours, fix CJK font tofu, unclip reveal

Three gallery-preview fixes found reviewing the baked Community gallery:

- Decks (fixed-viewport PPT/slideshow pages driven by arrow/wheel, not scroll)
  were vertically panned like tall landing pages — capturing ~20s of a dead
  WebGL background at the wrong 1.31 aspect (the page's compact responsive
  variant, hero headline gone). The bake now detects them (page no taller than
  the viewport), re-renders at 16:9, and walks their slides (arrow keys, falling
  back to wheel then a "next" control, detected by a structural slide signal)
  for a slide-tour the gallery loops on hover. BAKE_VERSION -> 2 re-bakes all.
- CJK-heavy templates baked tofu boxes: they pull Noto Serif/Sans SC from Google
  Fonts with display=swap and the CI runner had no CJK fallback. The bake job now
  installs fonts-noto-cjk + emoji, and the bake double-awaits fonts.ready around a
  force-load so a late-registered display face isn't captured as its fallback.
- The Home templates reveal clipped its last rows: a fixed max-height:6000px
  ceiling + overflow:hidden, but the gallery is ~7300px and grows. Switched to the
  repo's canonical grid-template-rows 0fr->1fr auto-height pattern (inner wrapper
  owns the overflow) so it expands to the gallery's natural height.

* fix(bake): probe-detect deck nav + capture at the 1.31 tile aspect

Refines the deck path after live review:

- Detection was scrollHeight-based, so a deck whose DOM stacks slides
  vertically got misread as a scroll page and vertically panned. Now PROBE the
  navigation: press the arrow key, then nudge the wheel, and use whichever
  actually moves a slide (deckSignal ignores the WebGL background); only a page
  that neither navigates nor fits the viewport keeps the linear pan.
- Captured decks at 16:9, which object-fit:cover then side-cropped in the 1.31
  tile (hero edges cut). Decks collapse to a compact variant at the normal 1440
  width, NOT at the 1.31 aspect — so capture at 1.31 (1760x1344, wide enough to
  clear the breakpoint): full layout AND a clip that fills the tile, no crop.

---------

Co-authored-by: audit <a@b.c>

Author: lefarcen

.github/workflows/bake-plugin-previews.yml

@@ -37,10 +37,14 @@ jobs:
       - name: Setup workspace
         uses: ./.github/actions/setup-workspace
 
-      - name: Install ffmpeg + puppeteer-core
+      - name: Install ffmpeg + CJK fonts + puppeteer-core
         run: |
           sudo apt-get update
-          sudo apt-get install -y ffmpeg
+          # ffmpeg encodes the clips; the Noto CJK + emoji fonts give headless
+          # Chrome a real CJK/emoji fallback so templates that rely on system
+          # fonts for 中文/日本語/한국어 (or load Noto SC from Google Fonts but
+          # race) render glyphs instead of missing-glyph tofu boxes.
+          sudo apt-get install -y ffmpeg fonts-noto-cjk fonts-noto-color-emoji
           # npm chokes on the workspace:* root manifest; use pnpm to drop
           # puppeteer-core into the workspace node_modules (CI-only, not committed).
           pnpm add -w puppeteer-core

apps/web/src/components/HomeTemplatesReveal.tsx

@@ -73,7 +73,7 @@ export function HomeTemplatesReveal({ enabled, children }: Props) {
         className="home-templates-reveal__body"
         aria-hidden={!revealed}
       >
-        {children}
+        <div className="home-templates-reveal__inner">{children}</div>
       </div>
 
       {revealed ? (

apps/web/src/styles/home/home-hero.css

@@ -2076,6 +2076,14 @@
   transform: scale(0.172);
 }
 
+/* Baked clips are framed 1.31:1 for the Community grid; the wider preset tiles
+   would otherwise object-fit:cover-crop the hero out of the middle. Anchor to
+   the top so the hero headline stays in frame. Scoped to the preset cards. */
+.home-hero__plugin-preset-preview .plugins-home__media-video,
+.home-hero__plugin-preset-preview .plugins-home__media-img {
+  object-position: top center;
+}
+
 .home-hero__plugin-preset-title {
   min-width: 0;
   overflow: hidden;

apps/web/src/styles/home/plugins-home.css

@@ -1145,20 +1145,28 @@ button.plugins-home__use-menu-item:focus-visible {
   display: flex;
   flex-direction: column;
 }
-/* Collapsed: clip the gallery to zero height and fade it out. The large
-   max-height ceiling lets the expand transition animate to natural height
-   without measuring it. */
+/* Collapsed: clip the gallery to zero height and fade it out. Uses the repo's
+   canonical auto-height pattern (grid-template-rows 0fr -> 1fr) so the expand
+   animates to the gallery's NATURAL height — a fixed max-height ceiling (was
+   6000px) clipped the last rows once the gallery outgrew it. The inner wrapper
+   owns overflow:hidden so the collapsed rows clip cleanly. */
 .home-templates-reveal__body {
-  max-height: 0;
+  display: grid;
+  grid-template-rows: 0fr;
   opacity: 0;
-  overflow: hidden;
   transition:
-    max-height 420ms cubic-bezier(0.23, 1, 0.32, 1),
+    grid-template-rows 420ms cubic-bezier(0.23, 1, 0.32, 1),
     opacity 320ms cubic-bezier(0.23, 1, 0.32, 1);
 }
+.home-templates-reveal__inner {
+  min-height: 0;
+  overflow: hidden;
+}
 .home-templates-reveal.is-revealed .home-templates-reveal__body {
-  max-height: 6000px;
+  grid-template-rows: 1fr;
   opacity: 1;
+}
+.home-templates-reveal.is-revealed .home-templates-reveal__inner {
   /* Leave room for the fixed collapse pill so it never covers the last row. */
   padding-bottom: 64px;
 }

scripts/bake-plugin-previews.mjs

@@ -42,12 +42,23 @@ import path from 'node:path';
 
 // Bump when the bake recipe changes (capture geometry, timing, encoder, waits…)
 // so every plugin re-bakes even though its page content is byte-identical.
-const BAKE_VERSION = 1;
+//   v2: deck mode (16:9 + slide-walk for fixed-viewport PPT/slideshow pages) +
+//       force-load webfonts before capture (CJK templates were baking tofu).
+const BAKE_VERSION = 2;
 
 // ---- config ---------------------------------------------------------------
 const BASE_URL = process.env.BASE_URL || 'http://127.0.0.1:17579';
 const RENDER_W = 1440;          // pages lay out at their desktop width
 const VIEW_H = 1099;            // 1.31-aspect window showing the FULL width (no clip)
+// Decks (PPT/slideshow: a fixed 100vh page navigated by arrow keys or the wheel,
+// NOT vertical scroll) are captured at the SAME 1.31 tile aspect as everything
+// else — so the clip fills the card with no crop or letterbox — but at a larger
+// width. At the normal 1440 width decks hit a width breakpoint and collapse into
+// a compact variant (hero headline -> condensed strip); 1760 clears it.
+const DECK_W = 1760;
+const DECK_H = 1344;            // 1760/1344 = 1.31, the tile aspect
+const SLIDE_MS = 1150;          // deck per-slide dwell: ~.9s CSS transition + settle
+const MAX_SLIDES = 6;           // advance budget; HOLD + slides stays ~<=9s
 const OUT_W = Number(process.env.PREVIEW_W || 640); // small — tile renders ~393px
 const FPS = Number(process.env.PREVIEW_FPS || 30);  // 30 is smooth for a gentle pan, half the bytes of 60
 const VELOCITY = 0.30;          // px/ms — base pan pace (snappy but readable)
@@ -99,6 +110,60 @@ async function discoverIds() {
   return LIMIT ? ids.slice(0, LIMIT) : ids;
 }
 
+// ---- deck (PPT/slideshow) driving -----------------------------------------
+// A structural fingerprint of the current slide, robust across deck styles:
+// the transform of any slide-rail wider/taller than the viewport, the scroll
+// offset of a horizontal track, and any active-slide marker. Deliberately does
+// NOT read canvas pixels, so a continuously-animating WebGL background doesn't
+// look like a slide change. Runs in the page; must stay self-contained.
+function deckSignal() {
+  const parts = [location.hash];
+  for (const el of document.querySelectorAll('*')) {
+    const r = el.getBoundingClientRect();
+    if (r.width > window.innerWidth * 1.5 || r.height > window.innerHeight * 1.5) {
+      parts.push(getComputedStyle(el).transform);
+    }
+    if (el.scrollWidth > el.clientWidth + 4) parts.push(`sl${el.scrollLeft}`);
+  }
+  const a = document.querySelector('.active,.is-active,[aria-current="true"],[data-active="true"]');
+  if (a) parts.push((a.id || '') + (a.className || ''));
+  return parts.join('|').slice(0, 4000);
+}
+
+async function driveDeck(page, driver) {
+  if (driver === 'arrow') { await page.keyboard.press('ArrowRight'); return; }
+  if (driver === 'wheel') {
+    await page.evaluate(() => {
+      const mk = () => new WheelEvent('wheel', { deltaY: 800, bubbles: true, cancelable: true });
+      (document.querySelector('#deck,main,section') || document.body).dispatchEvent(mk());
+      window.dispatchEvent(mk());
+    });
+    return;
+  }
+  await page.evaluate(() => {
+    const b = document.querySelector('[class*="next" i],[aria-label*="next" i],[data-dir="next"],.arrow-right,.next');
+    if (b) b.click();
+  });
+}
+
+// Walk a deck through its slides with the driver detection already found (arrow
+// or wheel), played past the HOLD on hover. Stops at the last slide (an input
+// that no longer changes deckSignal). A null driver is a fixed single slide with
+// no navigation — just hold. Returns the wall-clock span (the manifest durationMs).
+async function walkSlides(page, driver) {
+  if (!driver) return SLIDE_MS;
+  let moved = 0;
+  const t0 = Date.now();
+  for (let s = 0; s < MAX_SLIDES; s += 1) {
+    const before = await page.evaluate(deckSignal);
+    await driveDeck(page, driver);
+    await sleep(SLIDE_MS);
+    if ((await page.evaluate(deckSignal)) === before) break; // reached the last slide
+    moved += 1;
+  }
+  return Math.max(SLIDE_MS, Date.now() - t0);
+}
+
 // ---- render + encode one plugin -------------------------------------------
 async function bakeOne(browser, id, hash) {
   const page = await browser.newPage();
@@ -110,6 +175,39 @@ async function bakeOne(browser, id, hash) {
   } catch (e) { await page.close(); return { id, skipped: `load ${e.message}` }; }
   await sleep(1000);
 
+  // Classify navigation by PROBING, not guessing from scrollHeight: press the
+  // arrow key, then nudge the wheel, and see whether a slide actually moves
+  // (deckSignal ignores the WebGL background, so only real navigation counts).
+  // Most decks are arrow-key; some advance on the wheel; the rest are ordinary
+  // vertical-scroll pages (incl. up/down decks) and keep the linear pan. Probing
+  // advances the deck, so decks reload to reset to slide 1 before capturing.
+  let deckDriver = null;
+  {
+    const sig0 = await page.evaluate(deckSignal);
+    await driveDeck(page, 'arrow');
+    await sleep(900);
+    if ((await page.evaluate(deckSignal)) !== sig0) deckDriver = 'arrow';
+    else {
+      await driveDeck(page, 'wheel');
+      await sleep(900);
+      if ((await page.evaluate(deckSignal)) !== sig0) deckDriver = 'wheel';
+    }
+  }
+  const vScrollable = await page.evaluate(
+    () => document.documentElement.scrollHeight > window.innerHeight * 1.15,
+  );
+  // A horizontally-navigable deck OR a fixed-viewport single slide is a deck:
+  // capture at the deck aspect and walk it. A page that only scrolls vertically
+  // (a landing page, or an up/down deck) keeps the linear pan.
+  const isDeck = deckDriver !== null || !vScrollable;
+  let capW = RENDER_W, capH = VIEW_H;
+  if (isDeck) {
+    capW = DECK_W; capH = DECK_H;
+    await page.setViewport({ width: capW, height: capH, deviceScaleFactor: 1 });
+    try { await page.reload({ waitUntil: 'domcontentloaded', timeout: 25000 }); } catch {}
+    await sleep(1000);
+  }
+
   // Trigger lazy images by scrolling through, then wait for them, then reset.
   await page.evaluate(async () => {
     const h = document.documentElement.scrollHeight;
@@ -129,7 +227,27 @@ async function bakeOne(browser, id, hash) {
   try {
     await page.evaluate((capMs) => {
       const cap = new Promise((r) => setTimeout(r, capMs));
-      const fonts = document.fonts ? document.fonts.ready.catch(() => {}) : Promise.resolve();
+      // CJK-heavy templates pull Noto Serif/Sans SC from Google Fonts with
+      // display=swap; awaiting fonts.ready alone can resolve on the swap
+      // fallback. Force every registered face to load, THEN await ready, so the
+      // capture isn't a fallback/tofu render. (The CI bake also installs
+      // fonts-noto-cjk so the fallback itself carries CJK glyphs if a webfont is
+      // slow or blocked, instead of rendering missing-glyph boxes.)
+      // Double-pass: await ready FIRST so faces registered by a late-arriving
+      // Google Fonts stylesheet are present, force-load any still unloaded, then
+      // await ready again — a single pass can enumerate before display=swap
+      // faces exist and capture the fallback (e.g. a Shrikhand/Playfair heading).
+      const fonts = document.fonts
+        ? document.fonts.ready
+            .catch(() => {})
+            .then(() => Promise.all(
+              Array.from(document.fonts).map((f) =>
+                f.status === 'loaded' ? null : f.load().catch(() => {}),
+              ),
+            ))
+            .then(() => document.fonts.ready)
+            .catch(() => {})
+        : Promise.resolve();
       const imgs = Array.from(document.images)
         .filter((i) => !i.complete)
         .map((i) => new Promise((res) => {
@@ -171,31 +289,37 @@ async function bakeOne(browser, id, hash) {
     try { await client.send('Page.screencastFrameAck', { sessionId: e.sessionId }); } catch {}
   });
 
-  const maxY = await page.evaluate(() =>
+  const maxY = isDeck ? 0 : await page.evaluate(() =>
     Math.max(0, document.documentElement.scrollHeight - window.innerHeight));
-  // Pre-computed from the measured page height so the pan always reaches the
-  // bottom within MAX_PAN (whole clip stays ~<=10s): base VELOCITY for normal
-  // pages, auto-sped-up (capped duration) for tall ones.
-  const durMs = maxY <= 0 ? 2500 : Math.min(MAX_PAN, Math.round(maxY / VELOCITY));
 
   await client.send('Page.startScreencast',
-    { format: 'jpeg', quality: 80, everyNthFrame: 1, maxWidth: RENDER_W, maxHeight: VIEW_H });
-  // Phase 1 — HOLD at the top, capturing the page's in-place animation. The
-  // gallery loops this leading span while idle (no pan), so animated pages
-  // still look alive without auto-scrolling.
+    { format: 'jpeg', quality: 80, everyNthFrame: 1, maxWidth: capW, maxHeight: capH });
+  // Phase 1 — HOLD on the first slide / page top, capturing in-place animation.
+  // The gallery loops this leading span while idle (no advance), so animated
+  // pages still look alive without auto-playing.
   await sleep(HOLD_MS);
-  // Phase 2 — linear pan top -> bottom (played past the hold on hover).
-  await page.evaluate((dur, my) => new Promise((res) => {
-    if (my <= 0) { setTimeout(res, dur); return; }
-    let start = null;
-    function step(t) {
-      if (start === null) start = t;
-      const e = Math.min(1, (t - start) / dur);
-      window.scrollTo(0, Math.round(my * e)); // linear = constant velocity
-      if (e < 1) requestAnimationFrame(step); else res();
-    }
-    requestAnimationFrame(step);
-  }), durMs, maxY);
+  // Phase 2 — played past the hold on hover: decks walk their slides; scrollable
+  // pages linear-pan (constant velocity) top -> bottom.
+  let durMs;
+  if (isDeck) {
+    durMs = await walkSlides(page, deckDriver);
+  } else {
+    // Pre-computed from the measured page height so the pan always reaches the
+    // bottom within MAX_PAN (whole clip stays ~<=10s): base VELOCITY for normal
+    // pages, auto-sped-up (capped duration) for tall ones.
+    durMs = maxY <= 0 ? 2500 : Math.min(MAX_PAN, Math.round(maxY / VELOCITY));
+    await page.evaluate((dur, my) => new Promise((res) => {
+      if (my <= 0) { setTimeout(res, dur); return; }
+      let start = null;
+      function step(t) {
+        if (start === null) start = t;
+        const e = Math.min(1, (t - start) / dur);
+        window.scrollTo(0, Math.round(my * e)); // linear = constant velocity
+        if (e < 1) requestAnimationFrame(step); else res();
+      }
+      requestAnimationFrame(step);
+    }), durMs, maxY);
+  }
   await client.send('Page.stopScreencast');
   await page.close();