From dfb923d38d63e10bf86fa8c2c19c6e18d60026ba Mon Sep 17 00:00:00 2001
From: StanisLove <me@tungulov.space>
Date: Tue, 8 Sep 2026 23:40:27 +0300
Subject: [PATCH] test: scope no-js preview visibility gate

---
 scripts/verify-no-js-preview.mjs | 13 ++++++++++---
 src/app/page.tsx                 |  5 ++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/scripts/verify-no-js-preview.mjs b/scripts/verify-no-js-preview.mjs
index 35d40d7..c97de55 100644
--- a/scripts/verify-no-js-preview.mjs
+++ b/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(
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 180a62c..53ba23e 100644
--- a/src/app/page.tsx
+++ b/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 />