Adopt react-lib-tools

.prettierignore

@@ -1,4 +1,6 @@
 /dist
 /docs
 /generated
-/public
+/public
+
+README.md

README.md

@@ -35,9 +35,7 @@ Documentation for this project is available at [react-window.vercel.app](https:/
 ### List
 
 <!-- List:description:begin -->
-
 Renders data with many rows.
-
 <!-- List:description:end -->
 
 #### Required props
@@ -164,9 +162,7 @@ The default value is &quot;div&quot;, meaning that List renders an HTMLDivElemen
 ### Grid
 
 <!-- Grid:description:begin -->
-
 Renders data with many rows and columns.
-
 <!-- Grid:description:end -->
 
 #### Required props

eslint.config.js

@@ -6,7 +6,7 @@ import tseslint from "typescript-eslint";
 import { globalIgnores } from "eslint/config";
 
 export default tseslint.config([
-  globalIgnores(["dist", "docs", "generated"]),
+  globalIgnores(["dist", "docs", "public/generated"]),
   {
     files: ["**/*.{ts,tsx}"],
     extends: [

index.css

@@ -1,92 +1,14 @@
+@source "node_modules/react-lib-tools";
+
 @import "tailwindcss";
+@import "react-lib-tools/styles.css";
 
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  font-size: 12px;
-
-  @media only screen and (max-width: 600px) {
-    font-size: 16px;
-  }
-
-  color-scheme: dark;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-@keyframes background-gradient-animation {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
-
-#root {
-  width: 100dvw;
-  height: 100dvh;
-  overflow: auto;
-  background: linear-gradient(
-    -45deg,
-    var(--color-pink-500),
-    var(--color-sky-500),
-    var(--color-emerald-400)
-  );
-  background-size: 400% 400%;
-  animation: background-gradient-animation 20s ease infinite;
-}
-
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-slate-600) transparent;
-  outline: none;
-  transition:
-    color 0.25s ease,
-    background-color 0.25s ease,
-    border-color 0.25s ease,
-    opacity 0.25s ease,
-    outline-color 0.25s ease;
-}
-
-main {
-  [data-link],
-  a {
-    cursor: pointer;
-    color: var(--color-teal-400);
-    &:hover {
-      color: var(--color-teal-300);
-    }
-  }
-}
-
-*[data-focus] {
-  border: 2px solid transparent;
-  &:focus {
-    border: 2px solid var(--color-teal-300);
-  }
-}
-
-*[data-focus-within] {
-  border: 2px solid transparent;
-  &:focus-within {
-    border: 2px solid var(--color-teal-300);
-  }
-
-  &[data-focus-within="bold"] {
-    border-color: var(--color-teal-600);
-    &:focus-within {
-      border: 2px solid var(--color-teal-300);
-    }
-  }
-}
+  --template-gradient-color-1: var(--color-indigo-500);
+  --template-gradient-color-2: var(--color-sky-500);
+  --template-gradient-color-3: var(--color-emerald-400);
 
-code {
-  color: rgba(255, 255, 255, 0.8);
+  --template-focus-color-300: var(--color-teal-300);
+  --template-focus-color-400: var(--color-teal-400);
+  --template-focus-color-600: var(--color-teal-600);
 }

package.json

@@ -23,9 +23,9 @@
     "build": "pnpm run build:lib && pnpm run build:docs",
     "build:docs": "TARGET=docs vite build",
     "build:lib": "TARGET=lib vite build",
-    "compile": "pnpm run compile:code-snippets && pnpm run compile:docs",
-    "compile:code-snippets": "node --loader ts-node/esm ./scripts/compile-code-snippets.ts",
-    "compile:docs": "node --loader ts-node/esm ./scripts/compile-docs.ts",
+    "compile": "pnpm run compile:docs && pnpm run compile:examples",
+    "compile:docs": "tsx ./scripts/compile-docs",
+    "compile:examples": "tsx ./scripts/compile-examples",
     "lint": "eslint .",
     "prerelease": "rm -rf dist && pnpm run build:lib",
     "prettier": "prettier --write \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
@@ -85,13 +85,15 @@
     "react-docgen-typescript": "^2.4.0",
     "react-dom": "^19.2.3",
     "react-error-boundary": "^6.0.0",
+    "react-lib-tools": "^0.0.6",
     "react-router-dom": "^7.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^6.0.3",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11",
     "ts-blank-space": "^0.6.2",
     "ts-node": "^10.9.2",
+    "tsx": "^4.21.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
     "typescript-json-schema": "^0.65.1",