chore: use espree's built-in types

package.json

@@ -59,7 +59,7 @@
     "codemirror": "^6.0.2",
     "eslint-linter-browserify": "^9.39.2",
     "eslint-scope": "^8.4.0",
-    "espree": "^10.4.0",
+    "espree": "^11.1.0",
     "esquery": "^1.6.0",
     "graphviz-react": "^1.2.5",
     "lucide-react": "^0.562.0",
@@ -73,7 +73,6 @@
   "devDependencies": {
     "@eslint/core": "^0.17.0",
     "@types/eslint-scope": "^8.3.2",
-    "@types/espree": "^10.1.0",
     "@types/esquery": "^1.5.4",
     "@types/node": "^20.19.27",
     "@types/react": "^19.2.7",

src/components/labeled-select.tsx

@@ -1,3 +1,4 @@
+import type { EcmaVersion } from "espree";
 import { Label } from "@/components/ui/label";
 import {
 	Select,
@@ -6,11 +7,10 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Version } from "@/hooks/use-explorer";
 
 type OnValueChangeType = (value: string) => void;
 type ItemsType = {
-	value: string | Version;
+	value: string | EcmaVersion;
 	label: string;
 	icon?: string;
 };

src/components/options.tsx

@@ -1,3 +1,4 @@
+import type { EcmaVersion } from "espree";
 import { Settings } from "lucide-react";
 import {
 	Popover,
@@ -14,7 +15,6 @@ import {
 	type MarkdownMode,
 	type MarkdownFrontmatter,
 	type SourceType,
-	type Version,
 	type TemplateEngineSyntax,
 } from "@/hooks/use-explorer";
 import {
@@ -152,7 +152,7 @@ const JavaScriptPanel: FC = () => {
 				label="ECMAScript Version"
 				value={esVersion as string}
 				onValueChange={(value: string) => {
-					const esVersion = value as Version;
+					const esVersion = value as EcmaVersion;
 					setJsOptions({ ...jsOptions, esVersion });
 				}}
 				items={versions}

src/hooks/use-ast.ts

@@ -32,7 +32,6 @@ export function useAST() {
 					loc: true,
 					comment: true,
 					tokens: true,
-					// @ts-expect-error mismatch between the latest release of `espree` and `@types/espree`.
 					ecmaVersion: jsOptions.esVersion,
 					sourceType: jsOptions.sourceType,
 					ecmaFeatures: {

src/hooks/use-explorer.ts

@@ -5,7 +5,7 @@ import {
 	StateStorage,
 	createJSONStorage,
 } from "zustand/middleware";
-import type { Options } from "espree";
+import type { EcmaVersion, Options } from "espree";
 import {
 	defaultCode,
 	defaultJsOptions,
@@ -18,7 +18,6 @@ import {
 } from "../lib/const";
 
 export type SourceType = Exclude<Options["sourceType"], undefined>;
-export type Version = Exclude<Options["ecmaVersion"], undefined> | 17 | 2026;
 export type Language = "javascript" | "json" | "markdown" | "css" | "html";
 export type JsonMode = "json" | "jsonc" | "json5";
 export type MarkdownMode = "commonmark" | "gfm";
@@ -36,7 +35,7 @@ export type Code = {
 export type JsOptions = {
 	parser: string;
 	sourceType: SourceType;
-	esVersion: Version;
+	esVersion: EcmaVersion;
 	isJSX: boolean;
 };
 

src/lib/const.ts

@@ -1,3 +1,4 @@
+import type { EcmaVersion } from "espree";
 import {
 	AlignLeftIcon,
 	CodeIcon,
@@ -7,7 +8,6 @@ import {
 } from "lucide-react";
 import type {
 	SourceType,
-	Version,
 	JsOptions,
 	JsonOptions,
 	MarkdownOptions,
@@ -73,7 +73,7 @@ export const sourceTypes: {
 ];
 
 export const versions: {
-	value: Version;
+	value: EcmaVersion;
 	label: string;
 }[] = [
 	{

src/lib/generate-code-path.ts

@@ -1,8 +1,9 @@
 // @ts-nocheck
 
 import { Linter } from "eslint-linter-browserify";
+import type { EcmaVersion } from "espree";
 import { CodePathStack } from "@/lib/code-path-stack";
-import type { SourceType, Version } from "@/hooks/use-explorer";
+import type { SourceType } from "@/hooks/use-explorer";
 
 const makeDotArrows = codePath => {
 	const stack = [{ segment: codePath.initialSegment, index: 0 }];
@@ -55,7 +56,7 @@ const makeDotArrows = codePath => {
 
 export const generateCodePath = async (
 	code: string,
-	esVersion: Version,
+	esVersion: EcmaVersion,
 	sourceType: SourceType,
 	isJSX: boolean,
 ): Promise<