test: scope no-js preview visibility gate

scripts/verify-no-js-preview.mjs

@@ -2,20 +2,27 @@ import { readFile } from "node:fs/promises";
 import { resolve } from "node:path";
 
 const outputPath = resolve(".next/server/app/index.html");
-const html = await readFile(outputPath, "utf8");
+const source = await readFile(resolve("src/app/page.tsx"), "utf8");
 
 // The placeholder is the first frame for a newly-created project. It must stay
 // visible when a client chunk is delayed or rejected; later product pages are
 // free to replace it and choose their own bounded animation policy.
-if (html.includes("Fluw template")) {
+if (source.includes("Fluw template")) {
+  const html = await readFile(outputPath, "utf8");
   const main = html.match(/<main\b[\s\S]*?<\/main>/i)?.[0];
   if (!main) {
     throw new Error("Fluw placeholder is missing its main landmark");
   }
+  const criticalElement = main.match(
+    /<[^>]*\bdata-fluw-preview-critical="true"[^>]*>/i,
+  )?.[0];
+  if (!criticalElement) {
+    throw new Error("Fluw placeholder is missing its preview-critical element");
+  }
 
   if (
     /style="[^"]*(?:opacity\s*:\s*0(?:[;"]|\s)|visibility\s*:\s*hidden|display\s*:\s*none)/i.test(
-      main,
+      criticalElement,
     )
   ) {
     throw new Error(

src/app/page.tsx

@@ -14,7 +14,10 @@ export default function Home() {
     <main className="min-h-screen overflow-hidden bg-background text-white">
       <section className="relative mx-auto flex min-h-screen w-full max-w-[900px] items-center justify-center px-4 py-10 sm:px-6 lg:px-8">
         <div className="w-full">
-          <div className="mx-auto flex max-w-[760px] flex-col items-center text-center">
+          <div
+            className="mx-auto flex max-w-[760px] flex-col items-center text-center"
+            data-fluw-preview-critical="true"
+          >
             <div className="mb-8 flex items-center gap-3 text-left">
               <FluwSquareIcon />