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 (
     <>

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

@@ -0,0 +1,252 @@
+import { CgSpinner } from 'react-icons/cg'
+import * as React from 'react'
+import { Link, createFileRoute, getRouteApi } from '@tanstack/react-router'
+import { Carbon } from '~/components/Carbon'
+import { Footer } from '~/components/Footer'
+import { TbHeartHandshake } from 'react-icons/tb'
+import { FaCheckCircle } from 'react-icons/fa'
+import SponsorPack from '~/components/SponsorPack'
+import { pacerProject } from '~/libraries/pacer'
+import { Await } from '@tanstack/react-router'
+import { seo } from '~/utils/seo'
+import { twMerge } from 'tailwind-merge'
+import { getLibrary } from '~/libraries'
+import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
+
+export const Route = createFileRoute('/_libraries/pacer/$version/')({
+  component: PacerVersionIndex,
+  head: () => ({
+    meta: seo({
+      title: pacerProject.name,
+      description: pacerProject.description,
+    }),
+  }),
+})
+
+const librariesRouteApi = getRouteApi('/_libraries')
+const library = getLibrary('pacer')
+
+export default function PacerVersionIndex() {
+  const { sponsorsPromise } = librariesRouteApi.useLoaderData()
+  const { version } = Route.useParams()
+
+  const gradientText = `pr-1 inline-block text-transparent bg-clip-text bg-gradient-to-r ${pacerProject.colorFrom} ${pacerProject.colorTo}`
+
+  return (
+    <>
+      <div className="flex flex-col gap-20 md:gap-32 max-w-full pt-32">
+        <div className="flex flex-col items-center gap-6 text-center px-4">
+          <h1 className="font-black flex gap-3 items-center text-4xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em]">
+            <span>TanStack</span>
+            <span className={twMerge(gradientText)}>Pacer</span>
+          </h1>
+          <h2
+            className="font-bold text-2xl max-w-md
+            md:text-3xl
+            lg:text-5xl lg:max-w-2xl"
+          >
+            <span className="underline decoration-dashed decoration-gray-500 decoration-3 underline-offset-2">
+              Framework agnostic
+            </span>{' '}
+            type-safe rate-limiting and queueing utilities
+          </h2>
+          <p
+            className="text opacity-90 max-w-[500px]
+            lg:text-xl lg:max-w-[800px]"
+          >
+            Take control of your application's timing with TanStack Pacer's{' '}
+            <strong>rate limiting, throttling, and debouncing utilities</strong>
+            . Manage complex async workflows using{' '}
+            <strong>intelligent queuing and concurrency controls</strong> while
+            maintaining full control with built-in pause, resume, and cancel
+            capabilities.
+          </p>
+          <Link
+            to="/$libraryId/$version/docs"
+            params={{ libraryId: library.id, version }}
+            className={`py-2 px-4 bg-stone-600 text-white rounded uppercase font-extrabold`}
+          >
+            Get Started
+          </Link>
+        </div>
+        <LibraryFeatureHighlights
+          featureHighlights={library.featureHighlights}
+        />
+
+        <div className="px-4 sm:px-6 lg:px-8 mx-auto">
+          <div className=" sm:text-center pb-16">
+            <h3 className="text-3xl text-center mx-auto leading-tight font-extrabold tracking-tight sm:text-4xl lg:leading-none mt-2">
+              Framework Agnostic & Feature Rich
+            </h3>
+            <p className="mt-4 text-xl max-w-3xl mx-auto leading-7 opacity-60">
+              TanStack Pacer's API is highly modular and framework-independent
+              while still prioritizing ergonomics. Behold, the obligatory
+              feature-list:
+            </p>
+          </div>
+          <div className="grid grid-flow-row grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-10 gap-y-4 mx-auto">
+            {[
+              'Lightweight',
+              'Tree-Shaking',
+              'Type-Safe',
+              'Rate Limiting',
+              'Throttling',
+              'Debouncing',
+              'Queueing',
+              'LIFO/FIFO/Dequeue Ordering',
+              'Concurrency Control',
+              'Queue Prioritization',
+              'Pause/Resume Controls',
+              'Cancellation',
+              'Abort Controller Support',
+              'Promise Integration',
+              'Multiple Layers of Abstraction',
+            ].map((d, i) => {
+              return (
+                <span key={i} className="flex items-center gap-2">
+                  <FaCheckCircle className="text-green-500 " /> {d}
+                </span>
+              )
+            })}
+          </div>
+        </div>
+
+        <div className="px-4 w-[500px] max-w-full mx-auto">
+          <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
+            Partners
+          </h3>
+          <div className="h-8" />
+          <div
+            className="flex-1 flex flex-col items-center text-sm text-center
+                      bg-white/80 shadow-xl shadow-gray-500/20 rounded-lg
+                        divide-y-2 divide-gray-500 divide-opacity-10 overflow-hidden
+                        dark:bg-black/40 dark:shadow-none"
+          >
+            <span className="flex items-center gap-2 p-12 text-4xl text-rose-500 font-black uppercase">
+              Pacer <TbHeartHandshake /> You?
+            </span>
+            <div className="flex flex-col p-4 gap-4">
+              <div>
+                We're looking for a TanStack Pacer OSS Partner to go above and
+                beyond the call of sponsorship. Are you as invested in TanStack
+                Pacer as we are? Let's push the boundaries of Pacer together!
+              </div>
+              <a
+                href="mailto:partners@tanstack.com?subject=TanStack Pacer Partnership"
+                className="text-blue-500 uppercase font-black text-sm"
+              >
+                Let's chat
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div className="relative text-lg overflow-hidden">
+          <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
+            Sponsors
+          </h3>
+          <div
+            className="my-4 flex flex-wrap mx-auto max-w-screen-lg"
+            style={{
+              aspectRatio: '1/1',
+            }}
+          >
+            <Await
+              promise={sponsorsPromise}
+              fallback={<CgSpinner className="text-2xl animate-spin" />}
+              children={(sponsors) => {
+                return <SponsorPack sponsors={sponsors} />
+              }}
+            />
+          </div>
+          <div className="text-center">
+            <a
+              href="https://github.com/sponsors/tannerlinsley"
+              className="inline-block bg-green-500 px-4 py-2 text-xl mx-auto leading-tight font-extrabold tracking-tight text-white rounded-full"
+            >
+              Become a Sponsor!
+            </a>
+          </div>
+        </div>
+
+        <div className="mx-auto max-w-[400px] flex flex-col gap-2 items-center">
+          <div className="shadow-lg rounded-lg overflow-hidden bg-white dark:bg-gray-800 dark:text-white">
+            <Carbon />
+          </div>
+          <span
+            className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500
+                dark:bg-opacity-20"
+          >
+            This ad helps us be happy about our invested time and not burn out
+            and rage-quit OSS. Yay money! 😉
+          </span>
+        </div>
+
+        {/* <div className="flex flex-col gap-4">
+          <div className="px-4 sm:px-6 lg:px-8  mx-auto container max-w-3xl sm:text-center">
+            <h3 className="text-3xl text-center leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-2">
+              Take it for a spin!
+            </h3>
+            <p className="my-4 text-xl leading-7 text-gray-600">
+              With just a few lines of code, you can start using powerful rate
+              limiting, throttling, debouncing, and queueing utilities.
+            </p>
+            <div className="flex flex-wrap gap-2 justify-center">
+              {(
+                [
+                  { label: 'React', value: 'react' },
+                  // More adapters coming soon
+                  // { label: 'Solid', value: 'solid' },
+                  // { label: 'Svelte', value: 'svelte' },
+                  // { label: 'Vue', value: 'vue' },
+                  // { label: 'Vanilla', value: 'vanilla' },
+                ] as const
+              ).map((item) => (
+                <button
+                  key={item.value}
+                  className={`inline-block py-2 px-4 rounded text-white uppercase font-extrabold bg-stone-600`}
+                >
+                  {item.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-black">
+          <iframe
+            src={`https://stackblitz.com/github/${pacerProject.repo}/tree/main/examples/react/useDebouncer?embed=1&theme=dark&preset=node&file=src/main.tsx`}
+            title="tanstack/pacer: useDebouncer"
+            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+            className="shadow-2xl"
+            loading="lazy"
+            style={{
+              width: '100%',
+              height: '80vh',
+              border: '0',
+            }}
+          ></iframe>
+        </div> */}
+
+        <div className="flex flex-col gap-4 items-center">
+          <div className="font-extrabold text-xl lg:text-2xl">
+            Wow, you've come a long way!
+          </div>
+          <div className="italic font-sm opacity-70">
+            Only one thing left to do...
+          </div>
+          <div>
+            <Link
+              to="/$libraryId/$version/docs"
+              params={{ libraryId: library.id, version }}
+              className={`inline-block py-2 px-4 bg-stone-700 rounded text-white uppercase font-extrabold`}
+            >
+              Get Started!
+            </Link>
+          </div>
+        </div>
+        <Footer />
+      </div>
+    </>
+  )
+}

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

@@ -41,7 +41,7 @@ export default function VersionIndex() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
-  const gradientText = `inline-block leading-snug text-transparent bg-clip-text bg-gradient-to-r ${queryProject.colorFrom} ${queryProject.colorTo}`
+  const gradientText = `pr-1 inline-block leading-snug text-transparent bg-clip-text bg-gradient-to-r ${queryProject.colorFrom} ${queryProject.colorTo}`
 
   return (
     <div className="flex flex-1 flex-col min-h-0 relative overflow-x-hidden">

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

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

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

@@ -41,7 +41,7 @@ function RouterVersionIndex() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
-  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${routerProject.colorFrom} ${routerProject.colorTo}`
+  const gradientText = `pr-1 inline-block text-transparent bg-clip-text bg-gradient-to-r ${routerProject.colorFrom} ${routerProject.colorTo}`
 
   return (
     <div className="flex flex-col gap-20 md:gap-32 max-w-full pt-32">

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

@@ -40,7 +40,7 @@ export default function VersionIndex() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [isDark])
 
-  const gradientText = `text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`
+  const gradientText = `pr-1 text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`
 
   return (
     <div className="flex flex-col gap-20 md:gap-32 max-w-full pt-32">

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

@@ -28,7 +28,7 @@ export default function StoreVersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
   const { version } = Route.useParams()
 
-  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${storeProject.colorFrom} ${storeProject.colorTo}`
+  const gradientText = `pr-1inline-block text-transparent bg-clip-text bg-gradient-to-r ${storeProject.colorFrom} ${storeProject.colorTo}`
 
   return (
     <>

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

@@ -41,7 +41,7 @@ export default function TableVersionIndex() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
-  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${tableProject.colorFrom} ${tableProject.colorTo}`
+  const gradientText = `pr-1 inline-block text-transparent bg-clip-text bg-gradient-to-r ${tableProject.colorFrom} ${tableProject.colorTo}`
 
   return (
     <div className="flex flex-col gap-20 md:gap-32 max-w-full pt-32">
@@ -69,7 +69,7 @@ export default function TableVersionIndex() {
           markup and styles.
         </p>
         <Link
-          to="./docs/introduction"
+          to="./docs/introduction/"
           className={`py-2 px-4 bg-blue-500 rounded text-white uppercase font-extrabold`}
         >
           Get Started

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

@@ -44,7 +44,7 @@ export default function RouteComp() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
-  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${virtualProject.colorFrom} ${virtualProject.colorTo}`
+  const gradientText = `pr-1 inline-block text-transparent bg-clip-text bg-gradient-to-r ${virtualProject.colorFrom} ${virtualProject.colorTo}`
 
   return (
     <div className="flex flex-col gap-20 md:gap-32 max-w-full pt-32">

app/utils/sandbox.ts

@@ -8,7 +8,7 @@ export const getInitialSandboxFileName = (
     return 'src/routes/__root.tsx'
   }
 
-  const dir = 'src'
+  const dir = framework === 'angular' ? 'src/app' : 'src'
 
   return `${dir}/${getFrameworkStartFileName(framework, libraryId)}` as const
 }
@@ -22,7 +22,7 @@ export function getFrameworkStartFileName(
       ? 'app.component'
       : ['svelte', 'vue'].includes(framework)
       ? 'App'
-      : ['form', 'query'].includes(libraryId!)
+      : ['form', 'query', 'pacer'].includes(libraryId!)
       ? 'index'
       : 'main'