chore: import upstream snapshot with attribution

packages/react-devtools/scripts/build-styles.mjs

@@ -0,0 +1,46 @@
+import { execFileSync } from "node:child_process";
+import { readFileSync, rmSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const input = resolve(root, "src/styles/panel.css");
+const tmp = resolve(root, "src/styles/.panel.out.css");
+const output = resolve(root, "src/styles/panel.generated.ts");
+
+const require = createRequire(import.meta.url);
+const cliPackagePath = require.resolve("@tailwindcss/cli/package.json");
+const cliPackage = JSON.parse(readFileSync(cliPackagePath, "utf8"));
+const cliBin =
+  typeof cliPackage.bin === "string"
+    ? cliPackage.bin
+    : cliPackage.bin.tailwindcss;
+const tailwindCli = join(dirname(cliPackagePath), cliBin);
+
+execFileSync(
+  process.execPath,
+  [tailwindCli, "-i", input, "-o", tmp, "--minify"],
+  {
+    cwd: root,
+    stdio: "inherit",
+  },
+);
+
+let css = readFileSync(tmp, "utf8");
+rmSync(tmp, { force: true });
+
+// The compiled sheet is injected into a shadow root, where `:root` never
+// matches. Move Tailwind's theme/preflight layers onto `:host` so the custom
+// properties and base styles reach the panel. Our own token blocks already
+// target `:host`/`.dark`.
+css = css.replaceAll(":root", ":host");
+
+const banner =
+  "// Generated by scripts/build-styles.mjs. Do not edit by hand.\n";
+writeFileSync(
+  output,
+  `${banner}export const panelCss = ${JSON.stringify(css)};\n`,
+);
+
+console.log(`wrote ${output} (${css.length} bytes of css)`);