feat: add pacer library

app/libraries/index.tsx

@@ -15,6 +15,7 @@ import { tableProject } from './table'
 import { virtualProject } from './virtual'
 import { rangerProject } from './ranger'
 import { storeProject } from './store'
+import { pacerProject } from './pacer'
 
 export const frameworkOptions = [
   { label: 'React', value: 'react', logo: reactLogo },
@@ -39,6 +40,7 @@ export type Library = {
     | 'virtual'
     | 'ranger'
     | 'store'
+    | 'pacer'
     | 'config'
     | 'react-charts'
   name: string
@@ -88,8 +90,9 @@ export const libraries = [
   tableProject,
   formProject,
   virtualProject,
-  rangerProject,
   storeProject,
+  rangerProject,
+  pacerProject,
   configProject,
 ] satisfies Library[]
 

app/libraries/pacer.tsx

@@ -0,0 +1,100 @@
+import { VscPreview, VscWand } from 'react-icons/vsc'
+import { Library } from '.'
+import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa'
+import { BiBookAlt } from 'react-icons/bi'
+import { twMerge } from 'tailwind-merge'
+
+const repo = 'tanstack/pacer'
+
+const textStyles = `text-lime-600 dark:text-lime-500`
+
+export const pacerProject = {
+  id: 'pacer',
+  name: 'TanStack Pacer',
+  cardStyles: `shadow-xl shadow-lime-700/20 dark:shadow-lg dark:shadow-lime-500/20 text-lime-500 dark:text-lime-400 border-2 border-transparent hover:border-current`,
+  to: '/pacer',
+  tagline: `Framework agnostic debouncing, throttling, and queueing utilities`,
+  description: `Set the pace of interactions in your applications. Limit the rate at which functions can fire, or intelligently queue long-running tasks with Concurrency Control.`,
+  ogImage: 'https://github.com/tanstack/pacer/raw/main/media/repo-header.png',
+  badge: 'soon',
+  bgStyle: `bg-lime-700`,
+  textStyle: `text-lime-500`,
+  repo,
+  latestBranch: 'main',
+  latestVersion: 'v0',
+  availableVersions: ['v0'],
+  colorFrom: `from-lime-500`,
+  colorTo: `to-lime-700`,
+  textColor: `text-lime-700`,
+  frameworks: ['react', 'solid'],
+  scarfId: '302d0fef-cb3f-43c6-b45c-f055b9745edb',
+  defaultDocs: 'overview',
+  menu: [
+    {
+      icon: <VscPreview />,
+      label: 'Examples',
+      to: '/pacer/latest/docs/framework/react/examples/simple',
+    },
+    {
+      icon: <BiBookAlt />,
+      label: 'Docs',
+      to: '/pacer/latest/docs',
+    },
+    {
+      icon: <FaGithub />,
+      label: 'Github',
+      to: `https://github.com/${repo}`,
+    },
+  ],
+  featureHighlights: [
+    {
+      title: 'Framework Agnostic & Type-Safe',
+      icon: <VscWand className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          TanStack Pacer provides an intuitive and flexible API that works
+          across any JavaScript framework.{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            Every utility is fully type-safe with reactive framework adapters
+          </span>{' '}
+          that seamlessly connect to your state management of choice. Choose
+          from multiple layers of abstraction to confidently control timing in
+          your applications.
+        </div>
+      ),
+    },
+    {
+      title: 'Flexible Rate Limiting Controls',
+      icon: <FaBolt className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Take control of your application's timing with powerful utilities for{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            rate limiting, throttling, and debouncing
+          </span>
+          . Leverage built-in cleanup and cancellation capabilities to help you
+          manage execution timing with precision while preventing memory leaks.
+          Flexible configuration options let you fine-tune the behavior to match
+          your needs.
+        </div>
+      ),
+    },
+    {
+      title: 'Async/Sync Queue Management',
+      icon: <FaCogs className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Handle complex asynchronous workflows with intelligent queuing and
+          concurrency control.{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            Manage long-running tasks with FIFO/LIFO ordering, priority queuing,
+            and parallel execution
+          </span>
+          . Built-in pause, resume and cancel capabilities give you complete
+          control over your queue's lifecycle. Perfect for managing API calls,
+          animations, and other sequential operations.
+        </div>
+      ),
+    },
+  ],
+} satisfies Library

app/routeTree.gen.ts

@@ -37,6 +37,7 @@ import { Route as LibrariesStartVersionIndexImport } from './routes/_libraries/s
 import { Route as LibrariesRouterVersionIndexImport } from './routes/_libraries/router.$version.index'
 import { Route as LibrariesRangerVersionIndexImport } from './routes/_libraries/ranger.$version.index'
 import { Route as LibrariesQueryVersionIndexImport } from './routes/_libraries/query.$version.index'
+import { Route as LibrariesPacerVersionIndexImport } from './routes/_libraries/pacer.$version.index'
 import { Route as LibrariesFormVersionIndexImport } from './routes/_libraries/form.$version.index'
 import { Route as LibrariesConfigVersionIndexImport } from './routes/_libraries/config.$version.index'
 import { Route as LibraryIdVersionDocsIndexImport } from './routes/$libraryId/$version.docs.index'
@@ -212,6 +213,14 @@ const LibrariesQueryVersionIndexRoute = LibrariesQueryVersionIndexImport.update(
   } as any,
 )
 
+const LibrariesPacerVersionIndexRoute = LibrariesPacerVersionIndexImport.update(
+  {
+    id: '/pacer/$version/',
+    path: '/pacer/$version/',
+    getParentRoute: () => LibrariesRouteRoute,
+  } as any,
+)
+
 const LibrariesFormVersionIndexRoute = LibrariesFormVersionIndexImport.update({
   id: '/form/$version/',
   path: '/form/$version/',
@@ -416,6 +425,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LibrariesFormVersionIndexImport
       parentRoute: typeof LibrariesRouteImport
     }
+    '/_libraries/pacer/$version/': {
+      id: '/_libraries/pacer/$version/'
+      path: '/pacer/$version'
+      fullPath: '/pacer/$version'
+      preLoaderRoute: typeof LibrariesPacerVersionIndexImport
+      parentRoute: typeof LibrariesRouteImport
+    }
     '/_libraries/query/$version/': {
       id: '/_libraries/query/$version/'
       path: '/query/$version'
@@ -553,6 +569,7 @@ interface LibrariesRouteRouteChildren {
   LibrariesIndexRoute: typeof LibrariesIndexRoute
   LibrariesConfigVersionIndexRoute: typeof LibrariesConfigVersionIndexRoute
   LibrariesFormVersionIndexRoute: typeof LibrariesFormVersionIndexRoute
+  LibrariesPacerVersionIndexRoute: typeof LibrariesPacerVersionIndexRoute
   LibrariesQueryVersionIndexRoute: typeof LibrariesQueryVersionIndexRoute
   LibrariesRangerVersionIndexRoute: typeof LibrariesRangerVersionIndexRoute
   LibrariesRouterVersionIndexRoute: typeof LibrariesRouterVersionIndexRoute
@@ -573,6 +590,7 @@ const LibrariesRouteRouteChildren: LibrariesRouteRouteChildren = {
   LibrariesIndexRoute: LibrariesIndexRoute,
   LibrariesConfigVersionIndexRoute: LibrariesConfigVersionIndexRoute,
   LibrariesFormVersionIndexRoute: LibrariesFormVersionIndexRoute,
+  LibrariesPacerVersionIndexRoute: LibrariesPacerVersionIndexRoute,
   LibrariesQueryVersionIndexRoute: LibrariesQueryVersionIndexRoute,
   LibrariesRangerVersionIndexRoute: LibrariesRangerVersionIndexRoute,
   LibrariesRouterVersionIndexRoute: LibrariesRouterVersionIndexRoute,
@@ -610,6 +628,7 @@ export interface FileRoutesByFullPath {
   '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
   '/config/$version': typeof LibrariesConfigVersionIndexRoute
   '/form/$version': typeof LibrariesFormVersionIndexRoute
+  '/pacer/$version': typeof LibrariesPacerVersionIndexRoute
   '/query/$version': typeof LibrariesQueryVersionIndexRoute
   '/ranger/$version': typeof LibrariesRangerVersionIndexRoute
   '/router/$version': typeof LibrariesRouterVersionIndexRoute
@@ -641,6 +660,7 @@ export interface FileRoutesByTo {
   '/$libraryId/$version/docs': typeof LibraryIdVersionDocsIndexRoute
   '/config/$version': typeof LibrariesConfigVersionIndexRoute
   '/form/$version': typeof LibrariesFormVersionIndexRoute
+  '/pacer/$version': typeof LibrariesPacerVersionIndexRoute
   '/query/$version': typeof LibrariesQueryVersionIndexRoute
   '/ranger/$version': typeof LibrariesRangerVersionIndexRoute
   '/router/$version': typeof LibrariesRouterVersionIndexRoute
@@ -677,6 +697,7 @@ export interface FileRoutesById {
   '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
   '/_libraries/config/$version/': typeof LibrariesConfigVersionIndexRoute
   '/_libraries/form/$version/': typeof LibrariesFormVersionIndexRoute
+  '/_libraries/pacer/$version/': typeof LibrariesPacerVersionIndexRoute
   '/_libraries/query/$version/': typeof LibrariesQueryVersionIndexRoute
   '/_libraries/ranger/$version/': typeof LibrariesRangerVersionIndexRoute
   '/_libraries/router/$version/': typeof LibrariesRouterVersionIndexRoute
@@ -714,6 +735,7 @@ export interface FileRouteTypes {
     | '/$libraryId/$version/docs/'
     | '/config/$version'
     | '/form/$version'
+    | '/pacer/$version'
     | '/query/$version'
     | '/ranger/$version'
     | '/router/$version'
@@ -744,6 +766,7 @@ export interface FileRouteTypes {
     | '/$libraryId/$version/docs'
     | '/config/$version'
     | '/form/$version'
+    | '/pacer/$version'
     | '/query/$version'
     | '/ranger/$version'
     | '/router/$version'
@@ -778,6 +801,7 @@ export interface FileRouteTypes {
     | '/$libraryId/$version/docs/'
     | '/_libraries/config/$version/'
     | '/_libraries/form/$version/'
+    | '/_libraries/pacer/$version/'
     | '/_libraries/query/$version/'
     | '/_libraries/ranger/$version/'
     | '/_libraries/router/$version/'
@@ -846,6 +870,7 @@ export const routeTree = rootRoute
         "/_libraries/",
         "/_libraries/config/$version/",
         "/_libraries/form/$version/",
+        "/_libraries/pacer/$version/",
         "/_libraries/query/$version/",
         "/_libraries/ranger/$version/",
         "/_libraries/router/$version/",
@@ -948,6 +973,10 @@ export const routeTree = rootRoute
       "filePath": "_libraries/form.$version.index.tsx",
       "parent": "/_libraries"
     },
+    "/_libraries/pacer/$version/": {
+      "filePath": "_libraries/pacer.$version.index.tsx",
+      "parent": "/_libraries"
+    },
     "/_libraries/query/$version/": {
       "filePath": "_libraries/query.$version.index.tsx",
       "parent": "/_libraries"

app/routes/_libraries/config.$version.index.tsx

@@ -30,10 +30,10 @@
 
 export default function FormVersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
   const { version } = Route.useParams()
   const library = getLibrary('config')
 
-  const gradientText = `inline-block leading-snug text-transparent bg-clip-text bg-gradient-to-r ${configProject.colorFrom} ${configProject.colorTo}`
+  const gradientText = `pr-1 inline-block leading-snug text-transparent bg-clip-text bg-gradient-to-r ${configProject.colorFrom} ${configProject.colorTo}`
 
   return (
     <>

app/routes/_libraries/form.$version.index.tsx

@@ -43,7 +43,7 @@ export default function FormVersionIndex() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
-  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${formProject.colorFrom} ${formProject.colorTo}`
+  const gradientText = `pr-1 inline-block text-transparent bg-clip-text bg-gradient-to-r ${formProject.colorFrom} ${formProject.colorTo}`
 
   return (
     <>