From 8185151af5fa84c5fe575e3532d2667dc8d94ce2 Mon Sep 17 00:00:00 2001
From: Tom Beckenham <34339192+tombeckenham@users.noreply.github.com>
Date: Fri, 11 Sep 2026 14:06:35 +1000
Subject: [PATCH 1/9] Polish AI landing code samples for light mode

Put snippets in inset rounded wells like the Start landing, drop the
fixed heights that clipped them, and keep the two-column layout for xl
screens and up so samples stay readable on smaller laptops.
---
 src/components/landing/AiLanding.tsx | 315 +++++++++++++--------------
 1 file changed, 155 insertions(+), 160 deletions(-)

diff --git a/src/components/landing/AiLanding.tsx b/src/components/landing/AiLanding.tsx
index daf8bcac4..ff5bf12a3 100644
--- a/src/components/landing/AiLanding.tsx
+++ b/src/components/landing/AiLanding.tsx
@@ -66,7 +66,7 @@ export default function AiLanding() {
       </LandingSection>
 
       <LandingSection tone="ink">
-        <div className="grid items-center gap-12 lg:grid-cols-[1.1fr_0.9fr] lg:gap-16">
+        <div className="grid items-center gap-12 xl:grid-cols-[1.1fr_0.9fr] xl:gap-16">
           <LandingSectionIntro
             eyebrow="Typesafe models"
             icon={<PlugIcon aria-hidden="true" size={15} />}
@@ -78,14 +78,14 @@ export default function AiLanding() {
               </DocsLink>
             }
           />
-          <div className="min-w-0 lg:order-first">
+          <div className="min-w-0 xl:order-first">
             <ProviderWorkbench />
           </div>
         </div>
       </LandingSection>
 
       <LandingSection tone="raised">
-        <div className="grid items-center gap-12 lg:grid-cols-[0.92fr_1.08fr] lg:gap-16">
+        <div className="grid items-center gap-12 xl:grid-cols-[0.92fr_1.08fr] xl:gap-16">
           <LandingSectionIntro
             eyebrow="We handle tools"
             icon={<BracketsCurlyIcon aria-hidden="true" size={15} />}
@@ -98,7 +98,7 @@ export default function AiLanding() {
       </LandingSection>
 
       <LandingSection tone="ink">
-        <div className="grid items-center gap-12 lg:grid-cols-[1.08fr_0.92fr] lg:gap-16">
+        <div className="grid items-center gap-12 xl:grid-cols-[1.08fr_0.92fr] xl:gap-16">
           <LandingSectionIntro
             eyebrow="You own the UI"
             icon={<LayoutIcon aria-hidden="true" size={15} />}
@@ -106,7 +106,7 @@ export default function AiLanding() {
             body="Text, thinking, tool calls and results all arrive as typed parts with their own state. Loop over the parts and render each one, or hand a component per part type to createChatHook and it picks the right one for you."
             action={<DocsLink to="ui/react">UI integrations</DocsLink>}
           />
-          <div className="min-w-0 lg:order-first">
+          <div className="min-w-0 xl:order-first">
             <MessageParts />
           </div>
         </div>
@@ -125,7 +125,7 @@ export default function AiLanding() {
       </LandingSection>
 
       <LandingSection tone="ink">
-        <div className="grid items-center gap-12 lg:grid-cols-[0.82fr_1.18fr] lg:gap-16">
+        <div className="grid items-center gap-12 xl:grid-cols-[0.82fr_1.18fr] xl:gap-16">
           <LandingSectionIntro
             eyebrow="Durability you can move"
             icon={<HardDrivesIcon aria-hidden="true" size={15} />}
@@ -142,7 +142,7 @@ export default function AiLanding() {
       </LandingSection>
 
       <LandingSection tone="raised">
-        <div className="grid gap-12 lg:grid-cols-[0.78fr_1.22fr] lg:items-start lg:gap-16">
+        <div className="grid gap-12 xl:grid-cols-[0.78fr_1.22fr] xl:items-start xl:gap-16">
           <LandingSectionIntro
             eyebrow="We handle the hard parts"
             icon={<CubeIcon aria-hidden="true" size={15} />}
@@ -154,7 +154,7 @@ export default function AiLanding() {
       </LandingSection>
 
       <LandingSection tone="ink">
-        <div className="grid gap-12 lg:grid-cols-[0.78fr_1.22fr] lg:items-start lg:gap-16">
+        <div className="grid gap-12 xl:grid-cols-[0.78fr_1.22fr] xl:items-start xl:gap-16">
           <LandingSectionIntro
             eyebrow="Beyond chat"
             icon={<MicrophoneIcon aria-hidden="true" size={15} />}
@@ -167,7 +167,7 @@ export default function AiLanding() {
       </LandingSection>
 
       <LandingSection tone="raised">
-        <div className="grid gap-12 lg:grid-cols-[0.82fr_1.18fr] lg:items-center lg:gap-16">
+        <div className="grid gap-12 xl:grid-cols-[0.82fr_1.18fr] xl:items-center xl:gap-16">
           <LandingSectionIntro
             eyebrow="Devtools"
             icon={<BugIcon aria-hidden="true" size={15} />}
@@ -193,48 +193,68 @@ export default function AiLanding() {
   )
 }
 
-const codeWindowClass =
-  'm-0 min-w-0 rounded-none border-0 [&>div:first-child]:rounded-none [&_pre]:max-h-104 [&_pre]:overflow-auto [&_pre]:rounded-none [&_pre]:text-[11px] [&_pre]:leading-5 sm:[&_pre]:text-xs'
+// Same treatment as Start's server-boundary graphic: light window, inset
+// rounded well. Nested `.dark` keeps highlight tokens on the well, not the page.
+const codeWellClass =
+  'dark scheme-dark m-0 min-w-0 overflow-hidden rounded-lg border-0 bg-ds-neutral-500 [&_pre]:overflow-x-auto [&_pre]:rounded-none [&_pre]:bg-transparent [&_pre]:p-4 [&_pre]:text-xs [&_pre]:leading-6'
+
+const codeSurfaceClass =
+  'scheme-dark overflow-x-auto rounded-lg bg-ds-neutral-500 p-4 font-ds-mono text-ds-mono-xs leading-6 text-white/65 [&_p]:whitespace-pre'
+
+function CodeWell({
+  children,
+  codeKey,
+  lang = 'ts',
+}: {
+  children: string
+  codeKey?: string
+  lang?: string
+}) {
+  return (
+    <div className="p-5">
+      <CodeBlock
+        key={codeKey}
+        className={codeWellClass}
+        showTypeCopyButton={false}
+      >
+        <code className={`language-${lang}`}>{children}</code>
+      </CodeBlock>
+    </div>
+  )
+}
 
 function CodeTabs({
-  preHeightClass,
   label,
   samples,
 }: {
   label: string
   samples: Array<{ code: string; file: string; name: string }>
-  preHeightClass: string
 }) {
   const [activeIndex, setActiveIndex] = React.useState(0)
   const sample = samples[activeIndex] ?? samples[0]
 
   return (
     <LandingWindow label={label}>
-      <div
-        className="flex gap-1 border-b border-border-subtle p-2"
-        role="group"
-        aria-label={label}
-      >
-        {samples.map((item, index) => (
-          <button
-            key={item.name}
-            type="button"
-            aria-pressed={index === activeIndex}
-            className="rounded-lg px-3 py-1.5 text-ds-label-sm text-text-primary/40 hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-pressed:bg-[rgb(var(--landing-glow)/0.14)] aria-pressed:text-(--landing-accent-bright)"
-            onClick={() => setActiveIndex(index)}
-          >
-            {item.name}
-          </button>
-        ))}
+      <div className="border-b border-border-subtle px-4 pt-4">
+        <div
+          className="flex gap-5 overflow-x-auto"
+          role="group"
+          aria-label={label}
+        >
+          {samples.map((item, index) => (
+            <button
+              key={item.name}
+              type="button"
+              aria-pressed={index === activeIndex}
+              className="shrink-0 border-b-2 border-transparent pb-3 text-ds-label-sm text-text-primary/35 hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-pressed:border-(--landing-accent) aria-pressed:text-text-primary"
+              onClick={() => setActiveIndex(index)}
+            >
+              {item.name}
+            </button>
+          ))}
+        </div>
       </div>
-      <CodeBlock
-        key={sample.name}
-        dataCodeTitle={sample.file}
-        className={`${codeWindowClass} ${preHeightClass}`}
-        showTypeCopyButton={false}
-      >
-        <code className="language-ts">{sample.code}</code>
-      </CodeBlock>
+      <CodeWell codeKey={sample.name}>{sample.code}</CodeWell>
     </LandingWindow>
   )
 }
@@ -350,13 +370,7 @@ function PersistenceContract() {
         ))}
       </div>
       <LandingWindow className="w-full max-w-184" label={snippet.file}>
-        <CodeBlock
-          key={store.name}
-          className={`${codeWindowClass} [&_pre]:h-88`}
-          showTypeCopyButton={false}
-        >
-          <code className="language-ts">{snippet.code}</code>
-        </CodeBlock>
+        <CodeWell codeKey={store.name}>{snippet.code}</CodeWell>
       </LandingWindow>
     </div>
   )
@@ -416,13 +430,7 @@ export function redisStream(request: Request): StreamDurability {
 ]
 
 function DurabilityTiers() {
-  return (
-    <CodeTabs
-      preHeightClass="[&_pre]:h-76"
-      label="stream durability"
-      samples={durabilityTiers}
-    />
-  )
+  return <CodeTabs label="stream durability" samples={durabilityTiers} />
 }
 
 const toolCallStates = [
@@ -705,24 +713,21 @@ function MessageParts() {
           ))}
         </div>
       </div>
-      <div className="border-t border-border-subtle bg-ds-neutral-500">
-        <div className="flex items-center gap-3 px-4 pt-3 font-ds-mono text-ds-mono-2xs text-white/60">
+      <div className="p-5">
+        <div className="mb-4 flex items-center gap-3 font-ds-mono text-ds-mono-2xs text-text-primary/50">
           <button
             type="button"
             role="switch"
             aria-checked={useHook}
             aria-label="createChatHook"
-            className="group relative h-5 w-9 shrink-0 rounded-full bg-white/15 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-checked:bg-(--landing-accent)"
+            className="group relative h-5 w-9 shrink-0 rounded-full bg-text-primary/15 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-checked:bg-(--landing-accent)"
             onClick={() => setUseHook((current) => !current)}
           >
             <span className="absolute top-0.5 left-0.5 size-4 rounded-full bg-white transition-transform group-aria-checked:translate-x-4" />
           </button>
           <span aria-hidden="true">createChatHook</span>
         </div>
-        <div
-          className="min-h-96 overflow-x-auto p-4 font-ds-mono text-ds-mono-xs leading-relaxed text-white/70"
-          aria-hidden="true"
-        >
+        <div className={codeSurfaceClass} aria-hidden="true">
           {code.map((line, index) => (
             <p
               key={index}
@@ -765,7 +770,7 @@ function ToolBoundary() {
             </button>
           ))}
         </div>
-        <div className="mt-5 min-h-52 overflow-x-auto rounded-lg bg-ds-neutral-500 p-4 font-ds-mono text-ds-mono-xs text-white/65">
+        <div className={`mt-5 rounded-lg ${codeSurfaceClass}`}>
           <p>
             <span className="text-pink-300">const</span> lookupInvoice =
             toolDefinition({'{'}
@@ -1551,14 +1556,12 @@ function WriteOnceHero() {
         }
 
   return (
-    <div className="grid w-full min-w-0 max-w-full items-start gap-4 lg:grid-cols-[0.9fr_1.1fr]">
+    <div className="grid w-full min-w-0 max-w-full items-start gap-4 xl:grid-cols-[0.9fr_1.1fr]">
       <LandingWindow
         className="ring-2 ring-[rgb(var(--landing-glow)/0.35)]"
         label="tools.ts · written once"
       >
-        <CodeBlock className={codeWindowClass} showTypeCopyButton={false}>
-          <code className="language-ts">{heroTools}</code>
-        </CodeBlock>
+        <CodeWell>{heroTools}</CodeWell>
         <p className="border-t border-border-subtle px-4 py-3 text-ds-body-xs text-text-primary/40">
           This file never changes. Everything on the right is a destination for
           it.
@@ -1642,14 +1645,12 @@ function WriteOnceHero() {
             </button>
           ))}
         </div>
-        <CodeBlock
-          key={`${sample.name}-${provider.name}`}
-          dataCodeTitle={sample.file}
-          className={`${codeWindowClass} [&_pre]:h-76`}
-          showTypeCopyButton={false}
+        <CodeWell
+          codeKey={`${sample.name}-${provider.name}`}
+          lang={sample.lang}
         >
-          <code className={`language-${sample.lang}`}>{sample.code}</code>
-        </CodeBlock>
+          {sample.code}
+        </CodeWell>
       </LandingWindow>
     </div>
   )
@@ -1801,104 +1802,98 @@ function ProviderWorkbench() {
 
   return (
     <LandingWindow label="the types know the model">
-      <div className="grid sm:grid-cols-[13rem_1fr]">
-        <div
-          className="border-border-subtle p-3 sm:border-r"
-          role="group"
-          aria-label="Model"
-        >
-          {compilerModels.map((item, index) => (
-            <button
-              key={item.name}
-              type="button"
-              aria-pressed={index === activeIndex}
-              className="mb-1 block w-full rounded-lg px-3 py-2 text-left font-ds-mono text-ds-mono-2xs text-text-primary/35 hover:bg-text-primary/5 hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-pressed:bg-[rgb(var(--landing-glow)/0.14)] aria-pressed:text-(--landing-accent-bright)"
-              onClick={() => setActiveIndex(index)}
-            >
-              {item.name}
-              <span className="mt-0.5 block text-text-primary/25">
-                {item.fn}
-              </span>
-            </button>
+      <div
+        className="flex flex-wrap gap-1 border-b border-border-subtle p-2"
+        role="group"
+        aria-label="Model"
+      >
+        {compilerModels.map((item, index) => (
+          <button
+            key={item.name}
+            type="button"
+            aria-pressed={index === activeIndex}
+            className="rounded-lg px-3 py-1.5 text-left font-ds-mono text-ds-mono-2xs text-text-primary/35 hover:bg-text-primary/5 hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-pressed:bg-[rgb(var(--landing-glow)/0.14)] aria-pressed:text-(--landing-accent-bright)"
+            onClick={() => setActiveIndex(index)}
+          >
+            {item.name}
+          </button>
+        ))}
+      </div>
+      <div aria-live="polite" className="min-w-0 p-5">
+        <div className={codeSurfaceClass}>
+          <p>
+            <Kw>import</Kw> {'{ '}
+            {adapterName}
+            {' }'} <Kw>from</Kw> <Str>'{model.pkg}'</Str>
+          </p>
+          <p>&nbsp;</p>
+          <p>
+            <Kw>const</Kw> result = <Kw>await</Kw> <Fn>{model.fn}</Fn>({'{'}
+          </p>
+          <p>
+            &nbsp;&nbsp;adapter: <Fn>{adapterName}</Fn>(
+            <Str>'{model.name}'</Str>),
+          </p>
+          {model.setup.map((line) => (
+            <p key={line} className="whitespace-pre">
+              {'  '}
+              {line}
+              {line.endsWith('[') ? '' : ','}
+            </p>
           ))}
+          <p
+            className={
+              valid
+                ? ''
+                : 'underline decoration-red-400 decoration-wavy underline-offset-4'
+            }
+          >
+            &nbsp;&nbsp;{model.line(picked)},
+          </p>
+          <p>{'})'}</p>
         </div>
-        <div aria-live="polite" className="min-w-0">
-          <div className="overflow-x-auto bg-ds-neutral-500 p-4 font-ds-mono text-ds-mono-xs leading-relaxed text-white/70">
-            <p>
-              <Kw>import</Kw> {'{ '}
-              {adapterName}
-              {' }'} <Kw>from</Kw> <Str>'{model.pkg}'</Str>
-            </p>
-            <p>&nbsp;</p>
-            <p>
-              <Kw>const</Kw> result = <Kw>await</Kw> <Fn>{model.fn}</Fn>({'{'}
-            </p>
-            <p>
-              &nbsp;&nbsp;adapter: <Fn>{adapterName}</Fn>(
-              <Str>'{model.name}'</Str>),
+        <div className="mt-5">
+          <div className="flex items-center justify-between gap-3">
+            <p className="font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/25">
+              {model.field} for {model.name}
             </p>
-            {model.setup.map((line) => (
-              <p key={line} className="whitespace-pre">
-                {'  '}
-                {line}
-                {line.endsWith('[') ? '' : ','}
-              </p>
-            ))}
-            <p
-              className={
-                valid
-                  ? ''
-                  : 'underline decoration-red-400 decoration-wavy underline-offset-4'
-              }
+            <button
+              type="button"
+              aria-pressed={isBroken}
+              className="relative shrink-0 overflow-hidden rounded-full border border-(--landing-accent) px-3 py-1 font-ds-mono text-ds-mono-2xs text-(--landing-accent-bright) transition-colors before:absolute before:inset-y-0 before:w-1/2 before:bg-linear-to-r before:from-transparent before:via-white/25 before:to-transparent motion-safe:before:animate-shimmer hover:bg-[rgb(var(--landing-glow)/0.14)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-pressed:border-emerald-400/60 aria-pressed:text-emerald-400/90 aria-pressed:before:hidden"
+              onClick={() => setIsBroken((current) => !current)}
             >
-              &nbsp;&nbsp;{model.line(picked)},
-            </p>
-            <p>{'})'}</p>
+              {isBroken ? 'fix me' : 'break me'}
+            </button>
           </div>
-          <div className="border-t border-border-subtle p-4">
-            <div className="flex items-center justify-between gap-3">
-              <p className="font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/25">
-                {model.field} for {model.name}
-              </p>
-              <button
-                type="button"
-                aria-pressed={isBroken}
-                className="relative shrink-0 overflow-hidden rounded-full border border-(--landing-accent) px-3 py-1 font-ds-mono text-ds-mono-2xs text-(--landing-accent-bright) transition-colors before:absolute before:inset-y-0 before:w-1/2 before:bg-linear-to-r before:from-transparent before:via-white/25 before:to-transparent motion-safe:before:animate-shimmer hover:bg-[rgb(var(--landing-glow)/0.14)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-pressed:border-emerald-400/60 aria-pressed:text-emerald-400/90 aria-pressed:before:hidden"
-                onClick={() => setIsBroken((current) => !current)}
+          <div className="mt-3 flex flex-wrap gap-2">
+            {model.allowed.map((value) => (
+              <span
+                key={value}
+                className="rounded-full border border-(--landing-accent) bg-[rgb(var(--landing-glow)/0.14)] px-3 py-1 font-ds-mono text-ds-mono-2xs text-(--landing-accent-bright)"
               >
-                {isBroken ? 'fix me' : 'break me'}
-              </button>
-            </div>
-            <div className="mt-3 flex flex-wrap gap-2">
-              {model.allowed.map((value) => (
-                <span
-                  key={value}
-                  className="rounded-full border border-(--landing-accent) bg-[rgb(var(--landing-glow)/0.14)] px-3 py-1 font-ds-mono text-ds-mono-2xs text-(--landing-accent-bright)"
-                >
-                  {value}
-                </span>
-              ))}
-              {valid ? null : (
-                <span className="rounded-full border border-red-400/60 px-3 py-1 font-ds-mono text-ds-mono-2xs text-red-400/90 line-through">
-                  {picked}
-                </span>
-              )}
-            </div>
-            <p className="mt-3 text-ds-body-xs text-text-primary/40">
-              {model.note}
-            </p>
-            {valid ? (
-              <p className="mt-4 min-h-10 font-ds-mono text-ds-mono-2xs text-emerald-400/80">
-                ✓ no errors. '{picked}' is a valid {model.field} for{' '}
-                {model.name}.
-              </p>
-            ) : (
-              <p className="mt-4 min-h-10 font-ds-mono text-ds-mono-2xs text-red-400/90">
-                error TS2322: Type '{picked}' is not assignable to type '
-                {model.allowed.join(' | ')}'.
-              </p>
+                {value}
+              </span>
+            ))}
+            {valid ? null : (
+              <span className="rounded-full border border-red-400/60 px-3 py-1 font-ds-mono text-ds-mono-2xs text-red-400/90 line-through">
+                {picked}
+              </span>
             )}
           </div>
+          <p className="mt-3 text-ds-body-xs text-text-primary/40">
+            {model.note}
+          </p>
+          {valid ? (
+            <p className="mt-4 min-h-10 font-ds-mono text-ds-mono-2xs text-emerald-400/80">
+              ✓ no errors. '{picked}' is a valid {model.field} for {model.name}.
+            </p>
+          ) : (
+            <p className="mt-4 min-h-10 font-ds-mono text-ds-mono-2xs text-red-400/90">
+              error TS2322: Type '{picked}' is not assignable to type '
+              {model.allowed.join(' | ')}'.
+            </p>
+          )}
         </div>
       </div>
     </LandingWindow>

From 6340d840d8b95144de19bedb25193017e3e2acf9 Mon Sep 17 00:00:00 2001
From: Tom Beckenham <34339192+tombeckenham@users.noreply.github.com>
Date: Fri, 11 Sep 2026 17:08:45 +1000
Subject: [PATCH 2/9] Add a Stripe-style agent picker for AI skill install

Claude Code, Grok Build, and Codex are tabs; Cursor, ChatGPT, and
npx skills live under More. Each tab copies the install command for
that agent.
---
 src/components/landing/AiLanding.tsx        |   5 +-
 src/components/landing/LandingPromptBox.tsx | 177 ++++++++++++++++++--
 2 files changed, 160 insertions(+), 22 deletions(-)

diff --git a/src/components/landing/AiLanding.tsx b/src/components/landing/AiLanding.tsx
index ff5bf12a3..3fb1e986f 100644
--- a/src/components/landing/AiLanding.tsx
+++ b/src/components/landing/AiLanding.tsx
@@ -32,9 +32,6 @@ import {
   LibraryLandingShell,
 } from './LibraryLanding'
 
-const aiPrompt =
-  'Install the agent skills from the skills folder of https://github.com/TanStack/ai for my user, read them, then ask me what AI features I want to build, or suggest some.'
-
 // ponytail: the shared --landing-accent-ink is pure black, which reads badly on the
 // orange accent fill. Darken the fill instead and use white text on it.
 const accentFillClass =
@@ -47,7 +44,7 @@ export default function AiLanding() {
       headline="AI building blocks for TypeScript. We build the hard parts, you keep your stack."
       description="TanStack AI is a TypeScript library for building AI features and agents. It ships the agent loop, provider adapters, durability, interrupts, sandboxes, and tools, and plugs into the server, database, and UI you already have."
       hero={<WriteOnceHero />}
-      beforeActions={<LandingPromptBox heading="Skills" prompt={aiPrompt} />}
+      beforeActions={<LandingPromptBox />}
     >
       <LandingSection tone="accent">
         <LandingSectionIntro
diff --git a/src/components/landing/LandingPromptBox.tsx b/src/components/landing/LandingPromptBox.tsx
index a05475983..8be2eef8d 100644
--- a/src/components/landing/LandingPromptBox.tsx
+++ b/src/components/landing/LandingPromptBox.tsx
@@ -1,39 +1,180 @@
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import { CaretDownIcon } from '@phosphor-icons/react/CaretDown'
 import { CheckCircleIcon } from '@phosphor-icons/react/CheckCircle'
 import { CopyIcon } from '@phosphor-icons/react/Copy'
+import { SparkleIcon } from '@phosphor-icons/react/Sparkle'
 import { useCopyButton } from '~/components/CopyMarkdownButton'
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownTrigger,
+} from '~/components/Dropdown'
+import { getLibrary } from '~/libraries'
 import { copyTextToClipboard } from '~/utils/browser-effects'
 
-export function LandingPromptBox({
-  heading,
-  prompt,
-}: {
-  heading: string
-  prompt: string
-}) {
-  const [copied, onCopy] = useCopyButton(() => copyTextToClipboard(prompt))
+type SkillAgent = {
+  command: string
+  description: string
+  id: string
+  name: string
+  pinned?: boolean
+}
+
+const skillAgents: Array<SkillAgent> = [
+  {
+    id: 'claude',
+    name: 'Claude Code',
+    description: 'Install the TanStack AI plugin in Claude Code.',
+    command: '/plugin marketplace add TanStack/ai\n/plugin install tanstack-ai',
+    pinned: true,
+  },
+  {
+    id: 'grok',
+    name: 'Grok Build',
+    description: 'Install the TanStack AI plugin in Grok Build.',
+    command:
+      'grok plugin marketplace add TanStack/ai\ngrok plugin install tanstack-ai --trust',
+    pinned: true,
+  },
+  {
+    id: 'codex',
+    name: 'Codex',
+    description: 'Install the TanStack AI skills in Codex.',
+    command:
+      'npx skills add TanStack/ai -g --skill tanstack-ai tanstack-ai-migration',
+    pinned: true,
+  },
+  {
+    id: 'cursor',
+    name: 'Cursor',
+    description: 'Install the TanStack AI plugin in Cursor.',
+    command: '/plugin marketplace add TanStack/ai\n/plugin install tanstack-ai',
+  },
+  {
+    id: 'chatgpt',
+    name: 'ChatGPT',
+    description: 'Paste this prompt into ChatGPT.',
+    command:
+      'Install the agent skills from the skills folder of https://github.com/TanStack/ai for my user, read them, then ask me what AI features I want to build, or suggest some.',
+  },
+  {
+    id: 'npx',
+    name: 'Skills (npx)',
+    description: 'Install the TanStack AI skills with the Agent Skills CLI.',
+    command:
+      'npx skills add TanStack/ai -g --skill tanstack-ai tanstack-ai-migration',
+  },
+]
+
+const pinnedAgents = skillAgents.filter((agent) => agent.pinned)
+const moreAgents = skillAgents.filter((agent) => !agent.pinned)
+
+const tabClass =
+  'shrink-0 whitespace-nowrap border-b-2 pb-2 text-ds-label-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright)'
+
+export function LandingPromptBox() {
+  const [activeId, setActiveId] = React.useState('claude')
+  const agent =
+    skillAgents.find((item) => item.id === activeId) ??
+    pinnedAgents.find((item) => item.id === 'claude')
+  const moreSelected = agent
+    ? moreAgents.some((item) => item.id === agent.id)
+    : false
+  const [copied, onCopy] = useCopyButton(() =>
+    copyTextToClipboard(agent?.command ?? ''),
+  )
+  const { version } = useParams({ strict: false })
+  const library = getLibrary('ai')
+
+  if (!agent) {
+    return null
+  }
 
   return (
-    <div className="mt-6 w-full max-w-136 rounded-lg border border-border-default bg-background-surface px-4 py-3">
-      <div className="flex items-start gap-3">
-        <p className="min-w-0 flex-1 font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/65">
-          {heading}
-        </p>
+    <div className="mt-6 w-full max-w-136">
+      <p className="flex items-center gap-2 text-ds-body-sm text-text-primary">
+        <SparkleIcon aria-hidden="true" size={16} weight="fill" />
+        Using an AI coding agent? Install the TanStack AI skills:
+      </p>
+      <div
+        className="mt-4 flex gap-5 overflow-x-auto border-b border-border-subtle"
+        role="tablist"
+        aria-label="Coding agent"
+      >
+        {pinnedAgents.map((item) => (
+          <button
+            key={item.id}
+            type="button"
+            role="tab"
+            aria-selected={item.id === agent.id}
+            className={`${tabClass} ${
+              item.id === agent.id
+                ? 'border-(--landing-accent) text-(--landing-accent-bright)'
+                : 'border-transparent text-text-primary/45 hover:text-text-primary'
+            }`}
+            onClick={() => setActiveId(item.id)}
+          >
+            {item.name}
+          </button>
+        ))}
+        <Dropdown>
+          <DropdownTrigger>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={moreSelected}
+              className={`inline-flex items-center gap-1 ${tabClass} ${
+                moreSelected
+                  ? 'border-(--landing-accent) text-(--landing-accent-bright)'
+                  : 'border-transparent text-text-primary/45 hover:text-text-primary'
+              }`}
+            >
+              More
+              <CaretDownIcon aria-hidden="true" size={12} />
+            </button>
+          </DropdownTrigger>
+          <DropdownContent align="start" className="min-w-40">
+            {moreAgents.map((item) => (
+              <DropdownItem key={item.id} onSelect={() => setActiveId(item.id)}>
+                {item.name}
+              </DropdownItem>
+            ))}
+          </DropdownContent>
+        </Dropdown>
+      </div>
+      <p className="mt-4 text-ds-body-sm text-text-secondary">
+        {agent.description}
+      </p>
+      <div className="mt-3 flex items-center gap-2 rounded-lg bg-text-primary/4 px-3 py-2.5">
+        <pre className="min-w-0 flex-1 overflow-x-auto font-ds-mono text-ds-mono-xs text-text-primary/80">
+          {agent.command}
+        </pre>
         <button
           type="button"
+          aria-label={copied ? 'Copied' : 'Copy install command'}
           onClick={onCopy}
-          className="inline-flex shrink-0 items-center gap-1.5 font-ds-mono text-ds-mono-caps-xs uppercase text-text-secondary transition-colors hover:text-text-primary"
+          className="shrink-0 text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright)"
         >
           {copied ? (
             <CheckCircleIcon size={16} aria-hidden="true" />
           ) : (
             <CopyIcon size={16} aria-hidden="true" />
           )}
-          {copied ? 'Copied' : 'Copy prompt'}
         </button>
       </div>
-      <p className="mt-2 text-ds-body-sm text-text-primary sm:text-ds-body-md">
-        {prompt}
-      </p>
+      <Link
+        to="/$libraryId/$version/docs/$"
+        params={{
+          libraryId: library.id,
+          version: version ?? library.latestVersion,
+          _splat: 'getting-started/agent-skills',
+        }}
+        className="mt-3 inline-block text-ds-label-sm text-(--landing-accent-bright) hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright)"
+      >
+        Learn more about agent skills
+      </Link>
     </div>
   )
 }

From a7f2f97c56e9f30c8f349900f51e139f368feae4 Mon Sep 17 00:00:00 2001
From: Tom Beckenham <34339192+tombeckenham@users.noreply.github.com>
Date: Fri, 11 Sep 2026 17:47:08 +1000
Subject: [PATCH 3/9] Use in-agent slash commands for AI skill install

Copy Claude Code /plugin, Grok Build /plugins install, and Codex
$skill-installer so the landing commands paste into the agent, not a
separate CLI.
---
 src/components/landing/LandingPromptBox.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/landing/LandingPromptBox.tsx b/src/components/landing/LandingPromptBox.tsx
index 8be2eef8d..9dc5a4d17 100644
--- a/src/components/landing/LandingPromptBox.tsx
+++ b/src/components/landing/LandingPromptBox.tsx
@@ -26,30 +26,28 @@ const skillAgents: Array<SkillAgent> = [
   {
     id: 'claude',
     name: 'Claude Code',
-    description: 'Install the TanStack AI plugin in Claude Code.',
+    description: 'Paste these into Claude Code.',
     command: '/plugin marketplace add TanStack/ai\n/plugin install tanstack-ai',
     pinned: true,
   },
   {
     id: 'grok',
     name: 'Grok Build',
-    description: 'Install the TanStack AI plugin in Grok Build.',
-    command:
-      'grok plugin marketplace add TanStack/ai\ngrok plugin install tanstack-ai --trust',
+    description: 'Paste this into Grok Build. Or open /plugins → Marketplace.',
+    command: '/plugins install TanStack/ai',
     pinned: true,
   },
   {
     id: 'codex',
     name: 'Codex',
-    description: 'Install the TanStack AI skills in Codex.',
-    command:
-      'npx skills add TanStack/ai -g --skill tanstack-ai tanstack-ai-migration',
+    description: 'Paste this into Codex. Or open /plugins to browse.',
+    command: '$skill-installer TanStack/ai',
     pinned: true,
   },
   {
     id: 'cursor',
     name: 'Cursor',
-    description: 'Install the TanStack AI plugin in Cursor.',
+    description: 'Paste these into Cursor Agent chat.',
     command: '/plugin marketplace add TanStack/ai\n/plugin install tanstack-ai',
   },
   {
@@ -62,7 +60,8 @@ const skillAgents: Array<SkillAgent> = [
   {
     id: 'npx',
     name: 'Skills (npx)',
-    description: 'Install the TanStack AI skills with the Agent Skills CLI.',
+    description:
+      'Run this in a terminal. Works for any agent that reads SKILL.md.',
     command:
       'npx skills add TanStack/ai -g --skill tanstack-ai tanstack-ai-migration',
   },

From 8f6e695a1d5f1725b02fd4e4a286fc8ddbeb0d1e Mon Sep 17 00:00:00 2001
From: Tom Beckenham <34339192+tombeckenham@users.noreply.github.com>
Date: Tue, 15 Sep 2026 20:36:11 +1000
Subject: [PATCH 4/9] Refresh the AI landing hero and light-mode code samples

Inset paper wells share CodeBlock highlight tokens, the types demo
gets its model sidebar back, and write-once/run-anywhere is one split
window. Grok replaces Ollama; samples use current flagship model ids.
---
 src/components/landing/AiLanding.tsx | 571 +++++++++++++--------------
 1 file changed, 268 insertions(+), 303 deletions(-)

diff --git a/src/components/landing/AiLanding.tsx b/src/components/landing/AiLanding.tsx
index 3fb1e986f..4a99c03e1 100644
--- a/src/components/landing/AiLanding.tsx
+++ b/src/components/landing/AiLanding.tsx
@@ -190,25 +190,26 @@ export default function AiLanding() {
   )
 }
 
-// Same treatment as Start's server-boundary graphic: light window, inset
-// rounded well. Nested `.dark` keeps highlight tokens on the well, not the page.
+// Paper well in light, #111 in dark. Same --th-* tokens as CodeBlock.
 const codeWellClass =
-  'dark scheme-dark m-0 min-w-0 overflow-hidden rounded-lg border-0 bg-ds-neutral-500 [&_pre]:overflow-x-auto [&_pre]:rounded-none [&_pre]:bg-transparent [&_pre]:p-4 [&_pre]:text-xs [&_pre]:leading-6'
+  'm-0 min-w-0 overflow-hidden rounded-lg border-0 bg-gray-100 [--th-background:var(--color-gray-100)] dark:bg-ds-neutral-500 dark:[--th-background:var(--color-ds-neutral-500)] [&_pre]:overflow-x-auto [&_pre]:rounded-none [&_pre]:p-4 [&_pre]:text-xs [&_pre]:leading-6'
 
 const codeSurfaceClass =
-  'scheme-dark overflow-x-auto rounded-lg bg-ds-neutral-500 p-4 font-ds-mono text-ds-mono-xs leading-6 text-white/65 [&_p]:whitespace-pre'
+  'overflow-x-auto rounded-lg bg-gray-100 p-4 font-ds-mono text-ds-mono-xs leading-6 text-(--th-token) dark:bg-ds-neutral-500 [&_p]:whitespace-pre'
 
 function CodeWell({
   children,
+  className = 'p-5',
   codeKey,
   lang = 'ts',
 }: {
   children: string
+  className?: string
   codeKey?: string
   lang?: string
 }) {
   return (
-    <div className="p-5">
+    <div className={className}>
       <CodeBlock
         key={codeKey}
         className={codeWellClass}
@@ -731,7 +732,7 @@ function MessageParts() {
               className={
                 isActive(line)
                   ? 'whitespace-pre text-(--landing-accent-bright)'
-                  : 'whitespace-pre text-white/40'
+                  : 'whitespace-pre text-text-primary/40'
               }
             >
               {line.text}
@@ -769,7 +770,7 @@ function ToolBoundary() {
         </div>
         <div className={`mt-5 rounded-lg ${codeSurfaceClass}`}>
           <p>
-            <span className="text-pink-300">const</span> lookupInvoice =
+            <span className="th-keyword">const</span> lookupInvoice =
             toolDefinition({'{'}
           </p>
           <p>&nbsp;&nbsp;name: 'lookup_invoice',</p>
@@ -1293,109 +1294,85 @@ function StartingPoints() {
     </ul>
   )
 }
-const heroTools = `import { toolDefinition } from '@tanstack/ai'
-import { z } from 'zod'
-
-export const lookupInvoice = toolDefinition({
-  name: 'lookup_invoice',
-  description: 'Find an invoice by id',
-  inputSchema: z.object({ id: z.string() }),
-  outputSchema: z.object({
-    total: z.number(),
-    status: z.enum(['draft', 'sent', 'paid']),
-  }),
-})`
+const heroTools = `const lookupInvoice =
+  toolDefinition({
+    name: 'lookup_invoice',
+    inputSchema: z.object({
+      id: z.string(),
+    }),
+    outputSchema: invoiceSchema,
+  })`
 
 const heroProviders = [
   {
     name: 'OpenAI',
     pkg: '@tanstack/ai-openai',
-    call: "openaiText('gpt-5.5')",
+    call: "openaiText('gpt-6-astra')",
   },
   {
     name: 'Anthropic',
     pkg: '@tanstack/ai-anthropic',
-    call: "anthropicText('claude-sonnet-4-5')",
+    call: "anthropicText('claude-fable-5-1')",
   },
   {
     name: 'Gemini',
     pkg: '@tanstack/ai-gemini',
-    call: "geminiText('gemini-3-flash-preview')",
+    call: "geminiText('gemini-3.8-flash')",
   },
   {
-    name: 'Ollama',
-    pkg: '@tanstack/ai-ollama',
-    call: "ollamaText('llama3')",
+    name: 'Grok',
+    pkg: '@tanstack/ai-grok',
+    call: "grokText('grok-4.6')",
   },
 ]
 
 type HeroProvider = (typeof heroProviders)[number]
 
+function heroChatCall(provider: HeroProvider, tool: string) {
+  const fn = provider.call.split('(')[0] ?? provider.call
+  const arg = provider.call.slice(fn.length + 1, -1)
+  const toolFn = tool.slice(0, tool.indexOf('('))
+  const toolArg = tool.slice(tool.indexOf('(') + 1, -1)
+  return `chat({
+      adapter: ${fn}(
+        ${arg},
+      ),
+      tools: [
+        ${toolFn}(
+          ${toolArg},
+        ),
+      ],
+    })`
+}
+
 const heroServers = [
   {
     name: 'TanStack Start',
     file: 'routes/api.chat.ts',
-    code: (
-      provider: HeroProvider,
-    ) => `import { chat, toServerSentEventsResponse } from '@tanstack/ai'
-import { ${provider.call.split('(')[0]} } from '${provider.pkg}'
-import { createFileRoute } from '@tanstack/react-router'
-import { lookupInvoice } from './tools'
-
-export const Route = createFileRoute('/api/chat')({
-  server: {
-    handlers: {
-      POST: async ({ request }) => {
-        const { messages } = await request.json()
-        const stream = chat({
-          adapter: ${provider.call},
-          messages,
-          tools: [lookupInvoice.server(findInvoice)],
-        })
-        return toServerSentEventsResponse(stream)
-      },
-    },
-  },
-})`,
+    code: (provider: HeroProvider) => `POST: ({ request }) =>
+  toServerSentEventsResponse(
+    ${heroChatCall(provider, 'lookupInvoice.server(findInvoice)')},
+  )`,
   },
   {
     name: 'Next.js',
     file: 'app/api/chat/route.ts',
-    code: (
-      provider: HeroProvider,
-    ) => `import { chat, toServerSentEventsResponse } from '@tanstack/ai'
-import { ${provider.call.split('(')[0]} } from '${provider.pkg}'
-import { lookupInvoice } from './tools'
-
-export async function POST(request: Request) {
-  const { messages } = await request.json()
-  const stream = chat({
-    adapter: ${provider.call},
-    messages,
-    tools: [lookupInvoice.server(findInvoice)],
-  })
-  return toServerSentEventsResponse(stream)
+    code: (provider: HeroProvider) => `export async function POST(
+  request: Request,
+) {
+  return toServerSentEventsResponse(
+    ${heroChatCall(provider, 'lookupInvoice.server(findInvoice)')},
+  )
 }`,
   },
   {
     name: 'Hono',
     file: 'server.ts',
-    code: (provider: HeroProvider) => `import { Hono } from 'hono'
-import { chat, toServerSentEventsResponse } from '@tanstack/ai'
-import { ${provider.call.split('(')[0]} } from '${provider.pkg}'
-import { lookupInvoice } from './tools'
-
-const app = new Hono()
-
-app.post('/api/chat', async (c) => {
-  const { messages } = await c.req.json()
-  const stream = chat({
-    adapter: ${provider.call},
-    messages,
-    tools: [lookupInvoice.server(findInvoice)],
-  })
-  return toServerSentEventsResponse(stream)
-})`,
+    code: (provider: HeroProvider) => `app.post('/api/chat', () =>
+  toServerSentEventsResponse(
+    ${heroChatCall(provider, 'lookupInvoice.server(findInvoice)')},
+  ),
+)`,
   },
 ]
 
@@ -1404,71 +1381,53 @@ const heroClients = [
     name: 'React',
     file: 'chat.tsx',
     lang: 'tsx',
-    code: `import { useChat, fetchServerSentEvents } from '@tanstack/ai-react'
-import { lookupInvoice } from './tools'
-
-export function Chat() {
-  const { messages, sendMessage } = useChat({
-    connection: fetchServerSentEvents('/api/chat'),
-    tools: [lookupInvoice.client(openInvoice)],
-  })
-
-  return messages.map((message) => (
-    <Bubble key={message.id} {...message} />
-  ))
-}`,
+    code: `const { messages } = useChat({
+  connection: fetchServerSentEvents(
+    '/api/chat',
+  ),
+  tools: [
+    lookupInvoice.client(openInvoice),
+  ],
+})`,
   },
   {
     name: 'Vue',
     file: 'Chat.vue',
     lang: 'html',
-    code: `<script setup lang="ts">
-import { useChat, fetchServerSentEvents } from '@tanstack/ai-vue'
-import { lookupInvoice } from './tools'
-
-const { messages, sendMessage } = useChat({
-  connection: fetchServerSentEvents('/api/chat'),
-  tools: [lookupInvoice.client(openInvoice)],
-})
-</script>
-
-<template>
-  <Bubble v-for="message in messages" :key="message.id" v-bind="message" />
-</template>`,
+    code: `const { messages } = useChat({
+  connection: fetchServerSentEvents(
+    '/api/chat',
+  ),
+  tools: [
+    lookupInvoice.client(openInvoice),
+  ],
+})`,
   },
   {
     name: 'Solid',
     file: 'chat.tsx',
     lang: 'tsx',
-    code: `import { useChat, fetchServerSentEvents } from '@tanstack/ai-solid'
-import { lookupInvoice } from './tools'
-
-export function Chat() {
-  const chat = useChat({
-    connection: fetchServerSentEvents('/api/chat'),
-    tools: [lookupInvoice.client(openInvoice)],
-  })
-
-  return <For each={chat.messages}>{(message) => <Bubble {...message} />}</For>
-}`,
+    code: `const chat = useChat({
+  connection: fetchServerSentEvents(
+    '/api/chat',
+  ),
+  tools: [
+    lookupInvoice.client(openInvoice),
+  ],
+})`,
   },
   {
     name: 'Svelte',
     file: 'Chat.svelte',
     lang: 'html',
-    code: `<script lang="ts">
-  import { createChat, fetchServerSentEvents } from '@tanstack/ai-svelte'
-  import { lookupInvoice } from './tools'
-
-  const chat = createChat({
-    connection: fetchServerSentEvents('/api/chat'),
-    tools: [lookupInvoice.client(openInvoice)],
-  })
-</script>
-
-{#each chat.messages as message (message.id)}
-  <Bubble {...message} />
-{/each}`,
+    code: `const chat = createChat({
+  connection: fetchServerSentEvents(
+    '/api/chat',
+  ),
+  tools: [
+    lookupInvoice.client(openInvoice),
+  ],
+})`,
   },
 ]
 
@@ -1553,103 +1512,104 @@ function WriteOnceHero() {
         }
 
   return (
-    <div className="grid w-full min-w-0 max-w-full items-start gap-4 xl:grid-cols-[0.9fr_1.1fr]">
-      <LandingWindow
-        className="ring-2 ring-[rgb(var(--landing-glow)/0.35)]"
-        label="tools.ts · written once"
-      >
-        <CodeWell>{heroTools}</CodeWell>
-        <p className="border-t border-border-subtle px-4 py-3 text-ds-body-xs text-text-primary/40">
-          This file never changes. Everything on the right is a destination for
-          it.
-        </p>
-      </LandingWindow>
-
-      <LandingWindow label="runs anywhere">
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border-subtle p-3">
-          <div className="flex gap-1" role="group" aria-label="Side">
-            {(['server', 'client'] as const).map((option) => (
+    <LandingWindow className="w-full min-w-0" label="write once · run anywhere">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border-subtle p-3">
+        <div className="flex gap-1" role="group" aria-label="Side">
+          {(['server', 'client'] as const).map((option) => (
+            <button
+              key={option}
+              type="button"
+              aria-pressed={side === option}
+              className={heroChipClass}
+              onClick={() => pin(() => setSide(option))}
+            >
+              {option}
+            </button>
+          ))}
+        </div>
+        <span className="hidden h-4 w-px bg-border-subtle sm:block" />
+        {side === 'server' ? (
+          <div
+            className="flex gap-1"
+            role="group"
+            aria-label="Server framework"
+          >
+            {heroServers.map((item, index) => (
               <button
-                key={option}
+                key={item.name}
                 type="button"
-                aria-pressed={side === option}
+                aria-pressed={index === serverIndex}
                 className={heroChipClass}
-                onClick={() => pin(() => setSide(option))}
+                onClick={() => pin(() => setServerIndex(index))}
               >
-                {option}
+                {item.name}
               </button>
             ))}
           </div>
-          <span className="hidden h-4 w-px bg-border-subtle sm:block" />
-          {side === 'server' ? (
-            <div
-              className="flex gap-1"
-              role="group"
-              aria-label="Server framework"
-            >
-              {heroServers.map((item, index) => (
-                <button
-                  key={item.name}
-                  type="button"
-                  aria-pressed={index === serverIndex}
-                  className={heroChipClass}
-                  onClick={() => pin(() => setServerIndex(index))}
-                >
-                  {item.name}
-                </button>
-              ))}
-            </div>
-          ) : (
-            <div className="flex gap-1" role="group" aria-label="UI framework">
-              {heroClients.map((item, index) => (
-                <button
-                  key={item.name}
-                  type="button"
-                  aria-pressed={index === clientIndex}
-                  className={heroChipClass}
-                  onClick={() => pin(() => setClientIndex(index))}
-                >
-                  {item.name}
-                </button>
-              ))}
-            </div>
-          )}
+        ) : (
+          <div className="flex gap-1" role="group" aria-label="UI framework">
+            {heroClients.map((item, index) => (
+              <button
+                key={item.name}
+                type="button"
+                aria-pressed={index === clientIndex}
+                className={heroChipClass}
+                onClick={() => pin(() => setClientIndex(index))}
+              >
+                {item.name}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+      <div
+        className={
+          side === 'server'
+            ? 'flex flex-wrap items-center gap-1 border-b border-border-subtle px-3 py-2'
+            : 'flex flex-wrap items-center gap-1 border-b border-border-subtle px-3 py-2 opacity-40'
+        }
+      >
+        <span className="mr-2 font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/25">
+          provider
+        </span>
+        {heroProviders.map((item, index) => (
+          <button
+            key={item.name}
+            type="button"
+            aria-pressed={index === providerIndex}
+            className={heroChipClass}
+            onClick={() =>
+              pin(() => {
+                setSide('server')
+                setProviderIndex(index)
+              })
+            }
+          >
+            {item.name}
+          </button>
+        ))}
+      </div>
+      <div className="grid sm:grid-cols-2">
+        <div className="flex min-w-0 flex-col sm:border-r sm:border-border-subtle">
+          <p className="border-b border-border-subtle px-4 py-2 font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/35">
+            tools.ts
+          </p>
+          <CodeWell className="p-4">{heroTools}</CodeWell>
         </div>
-        <div
-          className={
-            side === 'server'
-              ? 'flex flex-wrap items-center gap-1 border-b border-border-subtle px-3 py-2'
-              : 'flex flex-wrap items-center gap-1 border-b border-border-subtle px-3 py-2 opacity-40'
-          }
-        >
-          <span className="mr-2 font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/25">
-            provider
-          </span>
-          {heroProviders.map((item, index) => (
-            <button
-              key={item.name}
-              type="button"
-              aria-pressed={index === providerIndex}
-              className={heroChipClass}
-              onClick={() =>
-                pin(() => {
-                  setSide('server')
-                  setProviderIndex(index)
-                })
-              }
-            >
-              {item.name}
-            </button>
-          ))}
+        <div className="flex min-w-0 flex-col border-t border-border-subtle sm:border-t-0">
+          <p className="border-b border-border-subtle px-4 py-2 font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/35">
+            {sample.file}
+          </p>
+          <CodeWell
+            className="p-4"
+            codeKey={`${sample.name}-${provider.name}`}
+            lang={sample.lang}
+          >
+            {sample.code}
+          </CodeWell>
         </div>
-        <CodeWell
-          codeKey={`${sample.name}-${provider.name}`}
-          lang={sample.lang}
-        >
-          {sample.code}
-        </CodeWell>
-      </LandingWindow>
-    </div>
+      </div>
+    </LandingWindow>
   )
 }
 
@@ -1776,17 +1736,16 @@ const compilerModels = [
   },
 ]
 
-// ponytail: the code surface is always dark, so these use fixed token colors.
 function Kw({ children }: { children: React.ReactNode }) {
-  return <span className="text-pink-300">{children}</span>
+  return <span className="th-keyword">{children}</span>
 }
 
 function Fn({ children }: { children: React.ReactNode }) {
-  return <span className="text-orange-300">{children}</span>
+  return <span className="th-function">{children}</span>
 }
 
 function Str({ children }: { children: React.ReactNode }) {
-  return <span className="text-emerald-300">{children}</span>
+  return <span className="th-string">{children}</span>
 }
 
 function ProviderWorkbench() {
@@ -1799,98 +1758,104 @@ function ProviderWorkbench() {
 
   return (
     <LandingWindow label="the types know the model">
-      <div
-        className="flex flex-wrap gap-1 border-b border-border-subtle p-2"
-        role="group"
-        aria-label="Model"
-      >
-        {compilerModels.map((item, index) => (
-          <button
-            key={item.name}
-            type="button"
-            aria-pressed={index === activeIndex}
-            className="rounded-lg px-3 py-1.5 text-left font-ds-mono text-ds-mono-2xs text-text-primary/35 hover:bg-text-primary/5 hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-pressed:bg-[rgb(var(--landing-glow)/0.14)] aria-pressed:text-(--landing-accent-bright)"
-            onClick={() => setActiveIndex(index)}
-          >
-            {item.name}
-          </button>
-        ))}
-      </div>
-      <div aria-live="polite" className="min-w-0 p-5">
-        <div className={codeSurfaceClass}>
-          <p>
-            <Kw>import</Kw> {'{ '}
-            {adapterName}
-            {' }'} <Kw>from</Kw> <Str>'{model.pkg}'</Str>
-          </p>
-          <p>&nbsp;</p>
-          <p>
-            <Kw>const</Kw> result = <Kw>await</Kw> <Fn>{model.fn}</Fn>({'{'}
-          </p>
-          <p>
-            &nbsp;&nbsp;adapter: <Fn>{adapterName}</Fn>(
-            <Str>'{model.name}'</Str>),
-          </p>
-          {model.setup.map((line) => (
-            <p key={line} className="whitespace-pre">
-              {'  '}
-              {line}
-              {line.endsWith('[') ? '' : ','}
-            </p>
-          ))}
-          <p
-            className={
-              valid
-                ? ''
-                : 'underline decoration-red-400 decoration-wavy underline-offset-4'
-            }
-          >
-            &nbsp;&nbsp;{model.line(picked)},
-          </p>
-          <p>{'})'}</p>
-        </div>
-        <div className="mt-5">
-          <div className="flex items-center justify-between gap-3">
-            <p className="font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/25">
-              {model.field} for {model.name}
-            </p>
+      <div className="grid sm:grid-cols-[13rem_1fr]">
+        <div
+          className="border-border-subtle p-3 sm:border-r"
+          role="group"
+          aria-label="Model"
+        >
+          {compilerModels.map((item, index) => (
             <button
+              key={item.name}
               type="button"
-              aria-pressed={isBroken}
-              className="relative shrink-0 overflow-hidden rounded-full border border-(--landing-accent) px-3 py-1 font-ds-mono text-ds-mono-2xs text-(--landing-accent-bright) transition-colors before:absolute before:inset-y-0 before:w-1/2 before:bg-linear-to-r before:from-transparent before:via-white/25 before:to-transparent motion-safe:before:animate-shimmer hover:bg-[rgb(var(--landing-glow)/0.14)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-pressed:border-emerald-400/60 aria-pressed:text-emerald-400/90 aria-pressed:before:hidden"
-              onClick={() => setIsBroken((current) => !current)}
+              aria-pressed={index === activeIndex}
+              className="mb-1 block w-full rounded-lg px-3 py-2 text-left font-ds-mono text-ds-mono-2xs text-text-primary/35 hover:bg-text-primary/5 hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-pressed:bg-[rgb(var(--landing-glow)/0.14)] aria-pressed:text-(--landing-accent-bright)"
+              onClick={() => setActiveIndex(index)}
             >
-              {isBroken ? 'fix me' : 'break me'}
+              {item.name}
+              <span className="mt-0.5 block text-text-primary/25">
+                {item.fn}
+              </span>
             </button>
+          ))}
+        </div>
+        <div aria-live="polite" className="min-w-0">
+          <div className="overflow-x-auto bg-gray-100 p-4 font-ds-mono text-ds-mono-xs leading-relaxed text-(--th-token) dark:bg-ds-neutral-500 [&_p]:whitespace-pre">
+            <p>
+              <Kw>import</Kw> {'{ '}
+              {adapterName}
+              {' }'} <Kw>from</Kw> <Str>'{model.pkg}'</Str>
+            </p>
+            <p>&nbsp;</p>
+            <p>
+              <Kw>const</Kw> result = <Kw>await</Kw> <Fn>{model.fn}</Fn>({'{'}
+            </p>
+            <p>
+              &nbsp;&nbsp;adapter: <Fn>{adapterName}</Fn>(
+              <Str>'{model.name}'</Str>),
+            </p>
+            {model.setup.map((line) => (
+              <p key={line} className="whitespace-pre">
+                {'  '}
+                {line}
+                {line.endsWith('[') ? '' : ','}
+              </p>
+            ))}
+            <p
+              className={
+                valid
+                  ? ''
+                  : 'underline decoration-red-400 decoration-wavy underline-offset-4'
+              }
+            >
+              &nbsp;&nbsp;{model.line(picked)},
+            </p>
+            <p>{'})'}</p>
           </div>
-          <div className="mt-3 flex flex-wrap gap-2">
-            {model.allowed.map((value) => (
-              <span
-                key={value}
-                className="rounded-full border border-(--landing-accent) bg-[rgb(var(--landing-glow)/0.14)] px-3 py-1 font-ds-mono text-ds-mono-2xs text-(--landing-accent-bright)"
+          <div className="border-t border-border-subtle p-4">
+            <div className="flex items-center justify-between gap-3">
+              <p className="font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/25">
+                {model.field} for {model.name}
+              </p>
+              <button
+                type="button"
+                aria-pressed={isBroken}
+                className="relative shrink-0 overflow-hidden rounded-full border border-(--landing-accent) px-3 py-1 font-ds-mono text-ds-mono-2xs text-(--landing-accent-bright) transition-colors before:absolute before:inset-y-0 before:w-1/2 before:bg-linear-to-r before:from-transparent before:via-white/25 before:to-transparent motion-safe:before:animate-shimmer hover:bg-[rgb(var(--landing-glow)/0.14)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-pressed:border-emerald-400/60 aria-pressed:text-emerald-400/90 aria-pressed:before:hidden"
+                onClick={() => setIsBroken((current) => !current)}
               >
-                {value}
-              </span>
-            ))}
-            {valid ? null : (
-              <span className="rounded-full border border-red-400/60 px-3 py-1 font-ds-mono text-ds-mono-2xs text-red-400/90 line-through">
-                {picked}
-              </span>
+                {isBroken ? 'fix me' : 'break me'}
+              </button>
+            </div>
+            <div className="mt-3 flex flex-wrap gap-2">
+              {model.allowed.map((value) => (
+                <span
+                  key={value}
+                  className="rounded-full border border-(--landing-accent) bg-[rgb(var(--landing-glow)/0.14)] px-3 py-1 font-ds-mono text-ds-mono-2xs text-(--landing-accent-bright)"
+                >
+                  {value}
+                </span>
+              ))}
+              {valid ? null : (
+                <span className="rounded-full border border-red-400/60 px-3 py-1 font-ds-mono text-ds-mono-2xs text-red-400/90 line-through">
+                  {picked}
+                </span>
+              )}
+            </div>
+            <p className="mt-3 text-ds-body-xs text-text-primary/40">
+              {model.note}
+            </p>
+            {valid ? (
+              <p className="mt-4 min-h-10 font-ds-mono text-ds-mono-2xs text-emerald-400/80">
+                ✓ no errors. '{picked}' is a valid {model.field} for{' '}
+                {model.name}.
+              </p>
+            ) : (
+              <p className="mt-4 min-h-10 font-ds-mono text-ds-mono-2xs text-red-400/90">
+                error TS2322: Type '{picked}' is not assignable to type '
+                {model.allowed.join(' | ')}'.
+              </p>
             )}
           </div>
-          <p className="mt-3 text-ds-body-xs text-text-primary/40">
-            {model.note}
-          </p>
-          {valid ? (
-            <p className="mt-4 min-h-10 font-ds-mono text-ds-mono-2xs text-emerald-400/80">
-              ✓ no errors. '{picked}' is a valid {model.field} for {model.name}.
-            </p>
-          ) : (
-            <p className="mt-4 min-h-10 font-ds-mono text-ds-mono-2xs text-red-400/90">
-              error TS2322: Type '{picked}' is not assignable to type '
-              {model.allowed.join(' | ')}'.
-            </p>
-          )}
         </div>
       </div>
     </LandingWindow>

From d06f34cad17b99bd0a41f443848c3e87e68251ef Mon Sep 17 00:00:00 2001
From: Tom Beckenham <34339192+tombeckenham@users.noreply.github.com>
Date: Wed, 16 Sep 2026 18:05:19 +1000
Subject: [PATCH 5/9] Replace AI hero with a campaign generation demo

---
 src/components/landing/AiCampaignHero.css | 370 ++++++++++++++++++++++
 src/components/landing/AiCampaignHero.tsx | 286 +++++++++++++++++
 src/components/landing/AiLanding.tsx      | 323 +------------------
 3 files changed, 658 insertions(+), 321 deletions(-)
 create mode 100644 src/components/landing/AiCampaignHero.css
 create mode 100644 src/components/landing/AiCampaignHero.tsx

diff --git a/src/components/landing/AiCampaignHero.css b/src/components/landing/AiCampaignHero.css
new file mode 100644
index 000000000..a3ad56ece
--- /dev/null
+++ b/src/components/landing/AiCampaignHero.css
@@ -0,0 +1,370 @@
+.ai-campaign-hero {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-radius: 14px;
+  background: var(--color-background-surface);
+  box-shadow: 0 12px 30px -24px rgb(0 0 0 / 0.3);
+}
+.ai-campaign-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 19px 20px;
+}
+.ai-campaign-heading > span:first-child {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+}
+.ai-campaign-heading svg {
+  color: var(--landing-accent-bright);
+}
+.ai-campaign-heading > span:last-child {
+  font-size: 10px;
+  color: var(--color-text-secondary);
+}
+.ai-campaign-steps {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1.2fr;
+  padding: 0 12px 12px;
+  border-bottom: 1px solid var(--color-border-subtle);
+  gap: 4px;
+}
+.ai-campaign-steps button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 10px 4px;
+  border-radius: 6px;
+  color: var(--color-text-secondary);
+  font-size: 11px;
+  cursor: pointer;
+}
+.ai-campaign-steps button[aria-pressed='true'] {
+  color: var(--landing-accent-bright);
+  background: rgb(var(--landing-glow) / 0.1);
+}
+.ai-campaign-step-arrow {
+  position: absolute;
+  right: -8px;
+  color: var(--color-text-secondary);
+  opacity: 0.5;
+}
+.ai-campaign-hero button:focus-visible,
+.ai-campaign-hero select:focus-visible {
+  outline: 2px solid var(--landing-accent-bright);
+  outline-offset: 2px;
+}
+.ai-campaign-workspace {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+}
+.ai-campaign-chat {
+  padding: 22px 18px 15px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.ai-campaign-user {
+  align-self: flex-end;
+  width: fit-content;
+  max-width: 95%;
+  border-radius: 10px 10px 3px 10px;
+  padding: 12px 13px;
+  background: rgb(var(--landing-glow) / 0.08);
+  font-size: 12px;
+  line-height: 1.6;
+}
+.ai-campaign-attachment {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-top: 9px;
+  border-top: 1px solid var(--color-border-subtle);
+  padding-top: 8px;
+  font-size: 9px;
+  color: var(--color-text-secondary);
+}
+.ai-campaign-attachment img {
+  width: 29px;
+  height: 25px;
+  object-fit: cover;
+  border-radius: 3px;
+}
+.ai-campaign-reply {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 21px 0 16px;
+  font-size: 12px;
+  line-height: 1.6;
+}
+.ai-campaign-reply svg {
+  color: var(--landing-accent-bright);
+  flex-shrink: 0;
+  margin-top: 3px;
+}
+.ai-campaign-output {
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-radius: 8px;
+}
+.ai-campaign-media {
+  position: relative;
+  aspect-ratio: 1.15;
+  overflow: hidden;
+  background: #d5e9f4;
+}
+.ai-campaign-media > video,
+.ai-campaign-media > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 15% center;
+}
+.ai-campaign-art-direction {
+  pointer-events: none;
+  position: absolute;
+  inset: 18px 16px auto;
+  color: #162f37;
+}
+.ai-campaign-art-direction > span {
+  font-size: 10px;
+  font-weight: 600;
+}
+.ai-campaign-art-direction > p {
+  margin-top: 13px;
+  max-width: 175px;
+  font-size: 25px;
+  font-weight: 600;
+  line-height: 1.05;
+  letter-spacing: -1px;
+}
+.ai-campaign-output-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 9px 10px;
+  font-size: 9px;
+  color: var(--color-text-secondary);
+}
+.ai-campaign-output-meta > span:first-child {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.ai-campaign-output-meta svg {
+  color: var(--landing-accent-bright);
+}
+.ai-campaign-chat-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding-top: 15px;
+  font-size: 9px;
+  color: var(--color-text-secondary);
+}
+.ai-campaign-chat-footer button {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10px;
+  color: var(--landing-accent-bright);
+  cursor: pointer;
+}
+.ai-campaign-brief {
+  min-height: 250px;
+  border: 1px solid var(--color-border-default);
+  border-radius: 8px;
+  padding: 19px 16px;
+}
+.ai-campaign-brief > span {
+  font-size: 10px;
+  color: var(--color-text-secondary);
+}
+.ai-campaign-brief h3 {
+  margin: 16px 0 12px;
+  font-size: 27px;
+  letter-spacing: -0.8px;
+  line-height: 1.1;
+}
+.ai-campaign-brief p {
+  font-size: 11px;
+  line-height: 1.7;
+  color: var(--color-text-secondary);
+}
+.ai-campaign-brief > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 17px;
+}
+.ai-campaign-brief > div > span {
+  padding: 4px 7px;
+  background: rgb(var(--landing-glow) / 0.08);
+  border-radius: 4px;
+  font-size: 9px;
+  color: var(--landing-accent-bright);
+}
+.ai-campaign-brief hr {
+  margin: 19px 0 13px;
+  border-color: var(--color-border-subtle);
+}
+.ai-campaign-code {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--color-border-subtle);
+  background: var(--color-background-default);
+}
+.ai-campaign-code-heading {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 17px 15px 12px;
+  font-family: var(--font-ds-mono);
+  font-size: 10px;
+  color: var(--color-text-secondary);
+}
+.ai-campaign-code-tabs {
+  display: flex;
+  gap: 14px;
+  margin: 0 15px;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+.ai-campaign-code-tabs button {
+  padding: 6px 0 9px;
+  font-size: 10px;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  border-bottom: 1px solid transparent;
+}
+.ai-campaign-code-tabs button[aria-pressed='true'] {
+  color: var(--landing-accent-bright);
+  border-bottom-color: var(--landing-accent-bright);
+}
+.ai-campaign-code pre {
+  min-height: 270px;
+  overflow-x: auto;
+}
+.ai-campaign-hook-note {
+  padding: 0 16px 19px;
+}
+.ai-campaign-hook-note > span {
+  font-family: var(--font-ds-mono);
+  font-size: 11px;
+  color: var(--landing-accent-bright);
+}
+.ai-campaign-hook-note p {
+  margin-top: 7px;
+  font-size: 11px;
+  line-height: 1.65;
+  color: var(--color-text-secondary);
+}
+.ai-campaign-providers {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  margin-top: auto;
+  padding: 14px 15px;
+  border-top: 1px solid var(--color-border-subtle);
+}
+.ai-campaign-providers label {
+  font-size: 10px;
+  color: var(--color-text-secondary);
+}
+.ai-campaign-providers select {
+  min-width: 0;
+  max-width: 120px;
+  padding: 5px 3px;
+  border: 1px solid var(--color-border-default);
+  border-radius: 5px;
+  background: var(--color-background-surface);
+  font-size: 10px;
+  cursor: pointer;
+}
+.ai-campaign-providers p {
+  grid-column: 1 / -1;
+  font-size: 9px;
+  color: var(--color-text-secondary);
+}
+.ai-campaign-caption {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 13px 18px;
+  border-top: 1px solid var(--color-border-subtle);
+  font-size: 10px;
+}
+.ai-campaign-caption > span:last-child {
+  color: var(--color-text-secondary);
+}
+@media (min-width: 640px) and (max-width: 1279px) {
+  .ai-campaign-media {
+    aspect-ratio: 1.6;
+  }
+}
+@media (max-width: 639px) {
+  .ai-campaign-heading {
+    padding: 16px 13px;
+  }
+  .ai-campaign-heading > span:first-child {
+    font-size: 13px;
+  }
+  .ai-campaign-heading > span:last-child {
+    font-size: 9px;
+  }
+  .ai-campaign-steps {
+    padding-inline: 7px;
+  }
+  .ai-campaign-steps button {
+    font-size: 10px;
+    gap: 5px;
+  }
+  .ai-campaign-steps button > svg:first-child {
+    width: 13px;
+  }
+  .ai-campaign-workspace {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .ai-campaign-chat {
+    padding: 18px 14px 15px;
+  }
+  .ai-campaign-media {
+    aspect-ratio: 1.2;
+  }
+  .ai-campaign-art-direction > p {
+    font-size: 25px;
+  }
+  .ai-campaign-code {
+    border-left: 0;
+    border-top: 1px solid var(--color-border-subtle);
+  }
+  .ai-campaign-code pre {
+    min-height: 0;
+  }
+  .ai-campaign-hook-note {
+    display: none;
+  }
+  .ai-campaign-providers {
+    grid-template-columns: auto 1fr;
+  }
+  .ai-campaign-providers select {
+    justify-self: end;
+  }
+  .ai-campaign-caption {
+    padding-inline: 13px;
+    font-size: 9px;
+  }
+}
diff --git a/src/components/landing/AiCampaignHero.tsx b/src/components/landing/AiCampaignHero.tsx
new file mode 100644
index 000000000..6f1445f18
--- /dev/null
+++ b/src/components/landing/AiCampaignHero.tsx
@@ -0,0 +1,286 @@
+import * as React from 'react'
+import {
+  ArrowRightIcon,
+  CheckIcon,
+  CodeIcon,
+  FilmSlateIcon,
+  ImageIcon,
+  PencilLineIcon,
+  SparkleIcon,
+} from '@phosphor-icons/react'
+import { CodeBlock } from '~/components/markdown/CodeBlock'
+import { usePrefersReducedMotion } from '~/utils/usePrefersReducedMotion'
+import './AiCampaignHero.css'
+
+const campaignSteps = [
+  {
+    title: 'The brief',
+    icon: PencilLineIcon,
+    hook: 'useChat',
+    prompt:
+      'A launch campaign for TanStack AI. Something that feels like possibility, not another robot.',
+    reply: 'Let’s give your next big idea a little room to grow.',
+    file: 'campaign.tsx',
+    code: `const {\n  messages,\n  sendMessage,\n  isLoading,\n} = useChat({\n  connection:\n    fetchServerSentEvents(\n      '/api/chat',\n    ),\n})\n\nconst onSend = () =>\n  sendMessage(brief)`,
+  },
+  {
+    title: 'The artwork',
+    icon: ImageIcon,
+    hook: 'useGenerateImage',
+    prompt:
+      'Give it a visual. A single palm tree against a pastel sky. Leave room for the idea.',
+    reply: 'One tree. An open sky. A world of possibility.',
+    file: 'artwork.tsx',
+    code: `const {\n  generate,\n  result,\n  isLoading,\n} = useGenerateImage({\n  connection:\n    fetchServerSentEvents(\n      '/api/image',\n    ),\n})\n\nconst onGenerate = () =>\n  generate({ prompt })`,
+  },
+  {
+    title: 'The launch film',
+    icon: FilmSlateIcon,
+    hook: 'useGenerateVideo',
+    prompt:
+      'Now make it move. A short launch film, with the palm swaying in a soft breeze.',
+    reply: 'Same idea. A little more life.',
+    file: 'launch-film.tsx',
+    code: `const {\n  generate,\n  result,\n  videoStatus,\n} = useGenerateVideo({\n  connection:\n    fetchServerSentEvents(\n      '/api/video',\n    ),\n})\n\nconst onGenerate = () =>\n  generate({ prompt })\n\nreturn <video\n  src={result?.url} controls\n/>`,
+  },
+]
+
+const videoProviders = [
+  {
+    name: 'Seedance 2.5',
+    adapter: 'byteplusVideo',
+    model: 'dreamina-seedance-2-5-260628',
+    provider: 'BytePlus',
+  },
+  {
+    name: 'Google Omni',
+    adapter: 'geminiVideo',
+    model: 'gemini-omni-1.1-flash',
+    provider: 'Google',
+  },
+  {
+    name: 'MiniMax H3',
+    adapter: 'falVideo',
+    model: 'minimax/h3/image-to-video',
+    provider: 'fal',
+  },
+]
+
+export function AiCampaignHero() {
+  const [step, setStep] = React.useState(2)
+  const [showServer, setShowServer] = React.useState(false)
+  const [providerIndex, setProviderIndex] = React.useState(0)
+  const reducedMotion = usePrefersReducedMotion()
+  const current = campaignSteps[step]
+  const provider = videoProviders[providerIndex]
+  const serverCode = `const stream = generateVideo({\n  adapter:\n    ${provider.adapter}(\n      '${provider.model}',\n    ),\n  prompt: [\n    { type: 'text', content: prompt },\n    {\n      type: 'image',\n      source: {\n        type: 'url',\n        value: artworkUrl,\n      },\n    },\n  ],\n  stream: true,\n})\n\nreturn toServerSentEventsResponse(\n  stream,\n)`
+
+  return (
+    <div className="ai-campaign-hero">
+      <div className="ai-campaign-heading">
+        <span>
+          <SparkleIcon size={19} weight="duotone" /> Campaign studio
+        </span>
+        <span>Built with TanStack AI</span>
+      </div>
+      <div
+        className="ai-campaign-steps"
+        role="group"
+        aria-label="Campaign stage"
+      >
+        {campaignSteps.map((item, index) => (
+          <button
+            key={item.title}
+            type="button"
+            aria-pressed={step === index}
+            onClick={() => {
+              setStep(index)
+              setShowServer(false)
+            }}
+          >
+            <item.icon size={15} />
+            <span>{item.title}</span>
+            {index < campaignSteps.length - 1 && (
+              <ArrowRightIcon
+                className="ai-campaign-step-arrow"
+                size={12}
+                aria-hidden="true"
+              />
+            )}
+          </button>
+        ))}
+      </div>
+
+      <div className="ai-campaign-workspace">
+        <div className="ai-campaign-chat">
+          <div className="ai-campaign-user">
+            <p>{current.prompt}</p>
+            {step === 2 && (
+              <div className="ai-campaign-attachment">
+                <img
+                  src="/images/hero-palm-gradient-960.webp"
+                  alt="Palm tree campaign artwork"
+                />
+                <span>campaign-artwork.webp</span>
+              </div>
+            )}
+          </div>
+          <div className="ai-campaign-reply">
+            <SparkleIcon size={15} weight="fill" />
+            <p>{current.reply}</p>
+          </div>
+
+          {step === 0 ? (
+            <div className="ai-campaign-brief">
+              <span>The campaign idea</span>
+              <h3>
+                Build something
+                <br />
+                that moves you.
+              </h3>
+              <p>
+                The tools for whatever’s next.
+                <br />
+                The freedom to make it yours.
+              </p>
+              <div>
+                <span>Open skies</span>
+                <span>Endless possibilities</span>
+              </div>
+              <hr />
+              <p>
+                A bright, optimistic launch. Start with one simple image, then
+                bring it to life.
+              </p>
+            </div>
+          ) : (
+            <div className="ai-campaign-output">
+              <div className="ai-campaign-media">
+                {step === 2 ? (
+                  <video
+                    key={String(reducedMotion)}
+                    autoPlay={reducedMotion === false}
+                    controls
+                    muted
+                    loop
+                    playsInline
+                    preload="metadata"
+                    poster="/images/hero-palm-gradient-960.webp"
+                    aria-label="Sample campaign film: a palm tree moving against a pastel sky"
+                  >
+                    <source
+                      src="/images/hero-palm-motion.mp4"
+                      type="video/mp4"
+                    />
+                  </video>
+                ) : (
+                  <img
+                    src="/images/hero-palm-gradient-960.webp"
+                    alt="A palm tree against a blue and pink sky, with the campaign headline Build something that moves you"
+                  />
+                )}
+                <div className="ai-campaign-art-direction" aria-hidden="true">
+                  <span>TanStack AI</span>
+                  <p>
+                    Build something
+                    <br />
+                    that moves you.
+                  </p>
+                </div>
+              </div>
+              <div className="ai-campaign-output-meta">
+                <span>
+                  <CheckIcon size={12} />{' '}
+                  {step === 2 ? 'Launch film' : 'Campaign artwork'}
+                </span>
+                <span>
+                  {step === 2 ? '0:05 · MP4' : 'Art direction · WebP'}
+                </span>
+              </div>
+            </div>
+          )}
+          <div className="ai-campaign-chat-footer">
+            <span>Sample conversation &amp; output</span>
+            {step < 2 && (
+              <button type="button" onClick={() => setStep(step + 1)}>
+                {step === 0 ? 'Create the artwork' : 'Make it move'}
+                <ArrowRightIcon size={13} />
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="ai-campaign-code">
+          <div className="ai-campaign-code-heading">
+            <CodeIcon size={15} />
+            <span>{showServer ? 'api/video.ts' : current.file}</span>
+          </div>
+          <div
+            className="ai-campaign-code-tabs"
+            role="group"
+            aria-label="Code example"
+          >
+            <button
+              type="button"
+              aria-pressed={!showServer}
+              onClick={() => setShowServer(false)}
+            >
+              Client hook
+            </button>
+            {step === 2 && (
+              <button
+                type="button"
+                aria-pressed={showServer}
+                onClick={() => setShowServer(true)}
+              >
+                Server adapter
+              </button>
+            )}
+          </div>
+          <CodeBlock
+            className="m-0 border-0 bg-transparent [&_pre]:m-0 [&_pre]:bg-transparent [&_pre]:px-4 [&_pre]:py-4 [&_pre]:text-[10px] [&_pre]:leading-[1.8]"
+            showTypeCopyButton={false}
+          >
+            <code className="language-tsx">
+              {showServer ? serverCode : current.code}
+            </code>
+          </CodeBlock>
+          <div className="ai-campaign-hook-note">
+            <span>{showServer ? 'generateVideo' : current.hook}</span>
+            <p>
+              {step === 2
+                ? 'From job progress to a playable video. Your hook handles the state.'
+                : step === 1
+                  ? 'Prompt in. Image out. Loading state included.'
+                  : 'Messages, streaming, and conversation state. Ready for your UI.'}
+            </p>
+          </div>
+          {step === 2 && (
+            <div className="ai-campaign-providers">
+              <label htmlFor="ai-campaign-provider">Swap the model</label>
+              <select
+                id="ai-campaign-provider"
+                value={providerIndex}
+                onChange={(event) => {
+                  setProviderIndex(Number(event.target.value))
+                  setShowServer(true)
+                }}
+              >
+                {videoProviders.map((item, index) => (
+                  <option key={item.name} value={index}>
+                    {item.name}
+                  </option>
+                ))}
+              </select>
+              <p>Via {provider.provider}. The client hook stays the same.</p>
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="ai-campaign-caption">
+        <span>One campaign. More than chat.</span>
+        <span>Text → image → video</span>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/landing/AiLanding.tsx b/src/components/landing/AiLanding.tsx
index 4a99c03e1..90200736a 100644
--- a/src/components/landing/AiLanding.tsx
+++ b/src/components/landing/AiLanding.tsx
@@ -23,7 +23,7 @@ import {
 
 import { getLibrary } from '~/libraries'
 import { CodeBlock } from '~/components/markdown/CodeBlock'
-import { usePrefersReducedMotion } from '~/utils/usePrefersReducedMotion'
+import { AiCampaignHero } from './AiCampaignHero'
 import { LandingPromptBox } from './LandingPromptBox'
 import {
   LandingSection,
@@ -43,7 +43,7 @@ export default function AiLanding() {
       libraryId="ai"
       headline="AI building blocks for TypeScript. We build the hard parts, you keep your stack."
       description="TanStack AI is a TypeScript library for building AI features and agents. It ships the agent loop, provider adapters, durability, interrupts, sandboxes, and tools, and plugs into the server, database, and UI you already have."
-      hero={<WriteOnceHero />}
+      hero={<AiCampaignHero />}
       beforeActions={<LandingPromptBox />}
     >
       <LandingSection tone="accent">
@@ -1294,325 +1294,6 @@ function StartingPoints() {
     </ul>
   )
 }
-const heroTools = `const lookupInvoice =
-  toolDefinition({
-    name: 'lookup_invoice',
-    inputSchema: z.object({
-      id: z.string(),
-    }),
-    outputSchema: invoiceSchema,
-  })`
-
-const heroProviders = [
-  {
-    name: 'OpenAI',
-    pkg: '@tanstack/ai-openai',
-    call: "openaiText('gpt-6-astra')",
-  },
-  {
-    name: 'Anthropic',
-    pkg: '@tanstack/ai-anthropic',
-    call: "anthropicText('claude-fable-5-1')",
-  },
-  {
-    name: 'Gemini',
-    pkg: '@tanstack/ai-gemini',
-    call: "geminiText('gemini-3.8-flash')",
-  },
-  {
-    name: 'Grok',
-    pkg: '@tanstack/ai-grok',
-    call: "grokText('grok-4.6')",
-  },
-]
-
-type HeroProvider = (typeof heroProviders)[number]
-
-function heroChatCall(provider: HeroProvider, tool: string) {
-  const fn = provider.call.split('(')[0] ?? provider.call
-  const arg = provider.call.slice(fn.length + 1, -1)
-  const toolFn = tool.slice(0, tool.indexOf('('))
-  const toolArg = tool.slice(tool.indexOf('(') + 1, -1)
-  return `chat({
-      adapter: ${fn}(
-        ${arg},
-      ),
-      tools: [
-        ${toolFn}(
-          ${toolArg},
-        ),
-      ],
-    })`
-}
-
-const heroServers = [
-  {
-    name: 'TanStack Start',
-    file: 'routes/api.chat.ts',
-    code: (provider: HeroProvider) => `POST: ({ request }) =>
-  toServerSentEventsResponse(
-    ${heroChatCall(provider, 'lookupInvoice.server(findInvoice)')},
-  )`,
-  },
-  {
-    name: 'Next.js',
-    file: 'app/api/chat/route.ts',
-    code: (provider: HeroProvider) => `export async function POST(
-  request: Request,
-) {
-  return toServerSentEventsResponse(
-    ${heroChatCall(provider, 'lookupInvoice.server(findInvoice)')},
-  )
-}`,
-  },
-  {
-    name: 'Hono',
-    file: 'server.ts',
-    code: (provider: HeroProvider) => `app.post('/api/chat', () =>
-  toServerSentEventsResponse(
-    ${heroChatCall(provider, 'lookupInvoice.server(findInvoice)')},
-  ),
-)`,
-  },
-]
-
-const heroClients = [
-  {
-    name: 'React',
-    file: 'chat.tsx',
-    lang: 'tsx',
-    code: `const { messages } = useChat({
-  connection: fetchServerSentEvents(
-    '/api/chat',
-  ),
-  tools: [
-    lookupInvoice.client(openInvoice),
-  ],
-})`,
-  },
-  {
-    name: 'Vue',
-    file: 'Chat.vue',
-    lang: 'html',
-    code: `const { messages } = useChat({
-  connection: fetchServerSentEvents(
-    '/api/chat',
-  ),
-  tools: [
-    lookupInvoice.client(openInvoice),
-  ],
-})`,
-  },
-  {
-    name: 'Solid',
-    file: 'chat.tsx',
-    lang: 'tsx',
-    code: `const chat = useChat({
-  connection: fetchServerSentEvents(
-    '/api/chat',
-  ),
-  tools: [
-    lookupInvoice.client(openInvoice),
-  ],
-})`,
-  },
-  {
-    name: 'Svelte',
-    file: 'Chat.svelte',
-    lang: 'html',
-    code: `const chat = createChat({
-  connection: fetchServerSentEvents(
-    '/api/chat',
-  ),
-  tools: [
-    lookupInvoice.client(openInvoice),
-  ],
-})`,
-  },
-]
-
-// One selector changes per tick so the eye can follow what moved.
-const heroMoves: Array<
-  | { kind: 'client'; index: number }
-  | { kind: 'provider'; index: number }
-  | { kind: 'server'; index: number }
-> = [
-  { kind: 'server', index: 1 },
-  { kind: 'provider', index: 1 },
-  { kind: 'client', index: 1 },
-  { kind: 'server', index: 2 },
-  { kind: 'provider', index: 2 },
-  { kind: 'client', index: 2 },
-  { kind: 'server', index: 0 },
-  { kind: 'provider', index: 3 },
-  { kind: 'client', index: 3 },
-  { kind: 'provider', index: 0 },
-  { kind: 'client', index: 0 },
-]
-
-const heroChipClass =
-  'rounded-md px-2 py-1 font-ds-mono text-ds-mono-2xs text-text-primary/40 transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-pressed:bg-[rgb(var(--landing-glow)/0.16)] aria-pressed:text-(--landing-accent-bright)'
-
-function WriteOnceHero() {
-  const reducedMotion = usePrefersReducedMotion()
-  const [side, setSide] = React.useState<'client' | 'server'>('server')
-  const [serverIndex, setServerIndex] = React.useState(0)
-  const [clientIndex, setClientIndex] = React.useState(0)
-  const [providerIndex, setProviderIndex] = React.useState(0)
-  const [pinned, setPinned] = React.useState(false)
-
-  React.useEffect(() => {
-    if (pinned || reducedMotion !== false) {
-      return
-    }
-
-    let step = 0
-    const intervalId = window.setInterval(() => {
-      const move = heroMoves[step % heroMoves.length]
-      step += 1
-      if (!move) {
-        return
-      }
-      if (move.kind === 'provider') {
-        setSide('server')
-        setProviderIndex(move.index)
-      } else if (move.kind === 'server') {
-        setSide('server')
-        setServerIndex(move.index)
-      } else {
-        setSide('client')
-        setClientIndex(move.index)
-      }
-    }, 6000)
-
-    return () => window.clearInterval(intervalId)
-  }, [pinned, reducedMotion])
-
-  const pin = (update: () => void) => {
-    setPinned(true)
-    update()
-  }
-
-  const server = heroServers[serverIndex] ?? heroServers[0]
-  const client = heroClients[clientIndex] ?? heroClients[0]
-  const provider = heroProviders[providerIndex] ?? heroProviders[0]
-  const sample =
-    side === 'server'
-      ? {
-          name: server.name,
-          file: server.file,
-          lang: 'ts',
-          code: server.code(provider),
-        }
-      : {
-          name: client.name,
-          file: client.file,
-          lang: client.lang,
-          code: client.code,
-        }
-
-  return (
-    <LandingWindow className="w-full min-w-0" label="write once · run anywhere">
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border-subtle p-3">
-        <div className="flex gap-1" role="group" aria-label="Side">
-          {(['server', 'client'] as const).map((option) => (
-            <button
-              key={option}
-              type="button"
-              aria-pressed={side === option}
-              className={heroChipClass}
-              onClick={() => pin(() => setSide(option))}
-            >
-              {option}
-            </button>
-          ))}
-        </div>
-        <span className="hidden h-4 w-px bg-border-subtle sm:block" />
-        {side === 'server' ? (
-          <div
-            className="flex gap-1"
-            role="group"
-            aria-label="Server framework"
-          >
-            {heroServers.map((item, index) => (
-              <button
-                key={item.name}
-                type="button"
-                aria-pressed={index === serverIndex}
-                className={heroChipClass}
-                onClick={() => pin(() => setServerIndex(index))}
-              >
-                {item.name}
-              </button>
-            ))}
-          </div>
-        ) : (
-          <div className="flex gap-1" role="group" aria-label="UI framework">
-            {heroClients.map((item, index) => (
-              <button
-                key={item.name}
-                type="button"
-                aria-pressed={index === clientIndex}
-                className={heroChipClass}
-                onClick={() => pin(() => setClientIndex(index))}
-              >
-                {item.name}
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-      <div
-        className={
-          side === 'server'
-            ? 'flex flex-wrap items-center gap-1 border-b border-border-subtle px-3 py-2'
-            : 'flex flex-wrap items-center gap-1 border-b border-border-subtle px-3 py-2 opacity-40'
-        }
-      >
-        <span className="mr-2 font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/25">
-          provider
-        </span>
-        {heroProviders.map((item, index) => (
-          <button
-            key={item.name}
-            type="button"
-            aria-pressed={index === providerIndex}
-            className={heroChipClass}
-            onClick={() =>
-              pin(() => {
-                setSide('server')
-                setProviderIndex(index)
-              })
-            }
-          >
-            {item.name}
-          </button>
-        ))}
-      </div>
-      <div className="grid sm:grid-cols-2">
-        <div className="flex min-w-0 flex-col sm:border-r sm:border-border-subtle">
-          <p className="border-b border-border-subtle px-4 py-2 font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/35">
-            tools.ts
-          </p>
-          <CodeWell className="p-4">{heroTools}</CodeWell>
-        </div>
-        <div className="flex min-w-0 flex-col border-t border-border-subtle sm:border-t-0">
-          <p className="border-b border-border-subtle px-4 py-2 font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/35">
-            {sample.file}
-          </p>
-          <CodeWell
-            className="p-4"
-            codeKey={`${sample.name}-${provider.name}`}
-            lang={sample.lang}
-          >
-            {sample.code}
-          </CodeWell>
-        </div>
-      </div>
-    </LandingWindow>
-  )
-}
-
 // Each model shows one field the types narrow per model. `picked` is what the
 // snippet passes; "break me" swaps in `broken`, which the types reject.
 const compilerModels = [

From 34a0b416bc65206ead2891b0250bcc44332c10d4 Mon Sep 17 00:00:00 2001
From: Tom Beckenham <34339192+tombeckenham@users.noreply.github.com>
Date: Wed, 16 Sep 2026 18:27:10 +1000
Subject: [PATCH 6/9] Add chat and image server examples to AI campaign hero

---
 src/components/landing/AiCampaignHero.tsx |  159 +-
 src/routeTree.gen.ts                      | 4138 ++++++++++-----------
 2 files changed, 2173 insertions(+), 2124 deletions(-)

diff --git a/src/components/landing/AiCampaignHero.tsx b/src/components/landing/AiCampaignHero.tsx
index 6f1445f18..dac289402 100644
--- a/src/components/landing/AiCampaignHero.tsx
+++ b/src/components/landing/AiCampaignHero.tsx
@@ -21,6 +21,24 @@ const campaignSteps = [
       'A launch campaign for TanStack AI. Something that feels like possibility, not another robot.',
     reply: 'Let’s give your next big idea a little room to grow.',
     file: 'campaign.tsx',
+    serverFile: 'api/chat.ts',
+    activity: 'chat',
+    serverInput: '  messages,',
+    providers: [
+      {
+        name: 'Anthropic',
+        adapter: 'anthropicText',
+        model: 'claude-fable-5-1',
+        provider: 'Anthropic',
+      },
+      { name: 'Grok', adapter: 'grokText', model: 'grok-4.6', provider: 'xAI' },
+      {
+        name: 'OpenAI',
+        adapter: 'openaiText',
+        model: 'gpt-6-astra',
+        provider: 'OpenAI',
+      },
+    ],
     code: `const {\n  messages,\n  sendMessage,\n  isLoading,\n} = useChat({\n  connection:\n    fetchServerSentEvents(\n      '/api/chat',\n    ),\n})\n\nconst onSend = () =>\n  sendMessage(brief)`,
   },
   {
@@ -31,6 +49,29 @@ const campaignSteps = [
       'Give it a visual. A single palm tree against a pastel sky. Leave room for the idea.',
     reply: 'One tree. An open sky. A world of possibility.',
     file: 'artwork.tsx',
+    serverFile: 'api/image.ts',
+    activity: 'generateImage',
+    serverInput: '  prompt,\n  stream: true,',
+    providers: [
+      {
+        name: 'GPT Image 2.5',
+        adapter: 'openaiImage25',
+        model: 'gpt-image-2.5-sunburst',
+        provider: 'OpenAI',
+      },
+      {
+        name: 'Nano Banana 2',
+        adapter: 'geminiImage',
+        model: 'gemini-3.1-flash-image',
+        provider: 'Google',
+      },
+      {
+        name: 'Grok Imagine',
+        adapter: 'grokImage',
+        model: 'grok-imagine-image-2.0',
+        provider: 'xAI',
+      },
+    ],
     code: `const {\n  generate,\n  result,\n  isLoading,\n} = useGenerateImage({\n  connection:\n    fetchServerSentEvents(\n      '/api/image',\n    ),\n})\n\nconst onGenerate = () =>\n  generate({ prompt })`,
   },
   {
@@ -41,39 +82,46 @@ const campaignSteps = [
       'Now make it move. A short launch film, with the palm swaying in a soft breeze.',
     reply: 'Same idea. A little more life.',
     file: 'launch-film.tsx',
+    serverFile: 'api/video.ts',
+    activity: 'generateVideo',
+    serverInput:
+      "  prompt: [\n    { type: 'text', content: prompt },\n    {\n      type: 'image',\n      source: {\n        type: 'url',\n        value: artworkUrl,\n      },\n    },\n  ],\n  stream: true,",
+    providers: [
+      {
+        name: 'Seedance 2.5',
+        adapter: 'byteplusVideo',
+        model: 'dreamina-seedance-2-5-260628',
+        provider: 'BytePlus',
+      },
+      {
+        name: 'Google Omni',
+        adapter: 'geminiVideo',
+        model: 'gemini-omni-1.1-flash',
+        provider: 'Google',
+      },
+      {
+        name: 'MiniMax H3',
+        adapter: 'falVideo',
+        model: 'minimax/h3/image-to-video',
+        provider: 'fal',
+      },
+    ],
     code: `const {\n  generate,\n  result,\n  videoStatus,\n} = useGenerateVideo({\n  connection:\n    fetchServerSentEvents(\n      '/api/video',\n    ),\n})\n\nconst onGenerate = () =>\n  generate({ prompt })\n\nreturn <video\n  src={result?.url} controls\n/>`,
   },
 ]
 
-const videoProviders = [
-  {
-    name: 'Seedance 2.5',
-    adapter: 'byteplusVideo',
-    model: 'dreamina-seedance-2-5-260628',
-    provider: 'BytePlus',
-  },
-  {
-    name: 'Google Omni',
-    adapter: 'geminiVideo',
-    model: 'gemini-omni-1.1-flash',
-    provider: 'Google',
-  },
-  {
-    name: 'MiniMax H3',
-    adapter: 'falVideo',
-    model: 'minimax/h3/image-to-video',
-    provider: 'fal',
-  },
-]
-
 export function AiCampaignHero() {
   const [step, setStep] = React.useState(2)
   const [showServer, setShowServer] = React.useState(false)
-  const [providerIndex, setProviderIndex] = React.useState(0)
+  const [providerIndices, setProviderIndices] = React.useState([0, 0, 0])
   const reducedMotion = usePrefersReducedMotion()
   const current = campaignSteps[step]
-  const provider = videoProviders[providerIndex]
-  const serverCode = `const stream = generateVideo({\n  adapter:\n    ${provider.adapter}(\n      '${provider.model}',\n    ),\n  prompt: [\n    { type: 'text', content: prompt },\n    {\n      type: 'image',\n      source: {\n        type: 'url',\n        value: artworkUrl,\n      },\n    },\n  ],\n  stream: true,\n})\n\nreturn toServerSentEventsResponse(\n  stream,\n)`
+  const provider = current.providers[providerIndices[step]]
+  const setup =
+    provider.adapter === 'openaiImage25'
+      ? `const openaiImage25 =\n  extendAdapter(\n    openaiImage,\n    [createModel(\n      'gpt-image-2.5-sunburst',\n      ['text', 'image'],\n    )],\n  )\n\n`
+      : ''
+  const serverCode = `${setup}const stream = ${current.activity}({\n  adapter:\n    ${provider.adapter}(\n      '${provider.model}',\n    ),\n${current.serverInput}\n})\n\nreturn toServerSentEventsResponse(\n  stream,\n)`
 
   return (
     <div className="ai-campaign-hero">
@@ -213,7 +261,7 @@ export function AiCampaignHero() {
         <div className="ai-campaign-code">
           <div className="ai-campaign-code-heading">
             <CodeIcon size={15} />
-            <span>{showServer ? 'api/video.ts' : current.file}</span>
+            <span>{showServer ? current.serverFile : current.file}</span>
           </div>
           <div
             className="ai-campaign-code-tabs"
@@ -227,15 +275,13 @@ export function AiCampaignHero() {
             >
               Client hook
             </button>
-            {step === 2 && (
-              <button
-                type="button"
-                aria-pressed={showServer}
-                onClick={() => setShowServer(true)}
-              >
-                Server adapter
-              </button>
-            )}
+            <button
+              type="button"
+              aria-pressed={showServer}
+              onClick={() => setShowServer(true)}
+            >
+              Server adapter
+            </button>
           </div>
           <CodeBlock
             className="m-0 border-0 bg-transparent [&_pre]:m-0 [&_pre]:bg-transparent [&_pre]:px-4 [&_pre]:py-4 [&_pre]:text-[10px] [&_pre]:leading-[1.8]"
@@ -246,7 +292,7 @@ export function AiCampaignHero() {
             </code>
           </CodeBlock>
           <div className="ai-campaign-hook-note">
-            <span>{showServer ? 'generateVideo' : current.hook}</span>
+            <span>{showServer ? current.activity : current.hook}</span>
             <p>
               {step === 2
                 ? 'From job progress to a playable video. Your hook handles the state.'
@@ -255,26 +301,29 @@ export function AiCampaignHero() {
                   : 'Messages, streaming, and conversation state. Ready for your UI.'}
             </p>
           </div>
-          {step === 2 && (
-            <div className="ai-campaign-providers">
-              <label htmlFor="ai-campaign-provider">Swap the model</label>
-              <select
-                id="ai-campaign-provider"
-                value={providerIndex}
-                onChange={(event) => {
-                  setProviderIndex(Number(event.target.value))
-                  setShowServer(true)
-                }}
-              >
-                {videoProviders.map((item, index) => (
-                  <option key={item.name} value={index}>
-                    {item.name}
-                  </option>
-                ))}
-              </select>
-              <p>Via {provider.provider}. The client hook stays the same.</p>
-            </div>
-          )}
+          <div className="ai-campaign-providers">
+            <label htmlFor="ai-campaign-provider">Swap the model</label>
+            <select
+              id="ai-campaign-provider"
+              value={providerIndices[step]}
+              onChange={(event) => {
+                const selected = Number(event.target.value)
+                setProviderIndices((indices) =>
+                  indices.map((value, index) =>
+                    index === step ? selected : value,
+                  ),
+                )
+                setShowServer(true)
+              }}
+            >
+              {current.providers.map((item, index) => (
+                <option key={item.name} value={index}>
+                  {item.name}
+                </option>
+              ))}
+            </select>
+            <p>Via {provider.provider}. The client hook stays the same.</p>
+          </div>
         </div>
       </div>
       <div className="ai-campaign-caption">
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 6035ef545..9fa4d7beb 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -9,307 +9,301 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
-import { Route as WorkshopsRouteImport } from './routes/workshops'
-import { Route as TermsRouteImport } from './routes/terms'
-import { Route as TenetsRouteImport } from './routes/tenets'
-import { Route as SupportRouteImport } from './routes/support'
-import { Route as SponsorsEmbedRouteImport } from './routes/sponsors-embed'
-import { Route as SitemapDotxmlRouteImport } from './routes/sitemap[.]xml'
-import { Route as ShowcasesRouteImport } from './routes/showcases'
-import { Route as ShopRouteImport } from './routes/shop'
-import { Route as RssDotxmlRouteImport } from './routes/rss[.]xml'
-import { Route as RobotsDottxtRouteImport } from './routes/robots[.]txt'
-import { Route as PrivacyRouteImport } from './routes/privacy'
-import { Route as PartnersEmbedRouteImport } from './routes/partners-embed'
-import { Route as PartnersRouteImport } from './routes/partners'
-import { Route as PaidSupportRouteImport } from './routes/paid-support'
-import { Route as MerchRouteImport } from './routes/merch'
-import { Route as MaintainersRouteImport } from './routes/maintainers'
-import { Route as LoginRouteImport } from './routes/login'
-import { Route as LlmsDottxtRouteImport } from './routes/llms[.]txt'
-import { Route as LlmsFullDottxtRouteImport } from './routes/llms-full[.]txt'
-import { Route as LibrariesRouteImport } from './routes/libraries'
-import { Route as LearnRouteImport } from './routes/learn'
-import { Route as FeedbackLeaderboardRouteImport } from './routes/feedback-leaderboard'
-import { Route as ExploreRouteImport } from './routes/explore'
-import { Route as EthosRouteImport } from './routes/ethos'
-import { Route as DsRouteImport } from './routes/ds'
-import { Route as DashboardRouteImport } from './routes/dashboard'
-import { Route as CommunityProjectsRouteImport } from './routes/community-projects'
-import { Route as BuilderRouteImport } from './routes/builder'
-import { Route as BrandGuideRouteImport } from './routes/brand-guide'
-import { Route as BlogRouteImport } from './routes/blog'
-import { Route as ApplicationStarterRouteImport } from './routes/application-starter'
-import { Route as AdsRouteImport } from './routes/ads'
-import { Route as AccountRouteImport } from './routes/account'
+import { Route as IndexRouteImport } from './routes/index'
 import { Route as LibraryRouteImport } from './routes/_library'
+import { Route as AccountRouteImport } from './routes/account'
 import { Route as AdminRouteRouteImport } from './routes/admin/route'
-import { Route as IndexRouteImport } from './routes/index'
-import { Route as StatsIndexRouteImport } from './routes/stats/index'
-import { Route as ShowcaseIndexRouteImport } from './routes/showcase/index'
-import { Route as ShopIndexRouteImport } from './routes/shop.index'
-import { Route as PartnersIndexRouteImport } from './routes/partners.index'
-import { Route as DsIndexRouteImport } from './routes/ds.index'
-import { Route as BlogIndexRouteImport } from './routes/blog.index'
-import { Route as ApplicationStarterIndexRouteImport } from './routes/application-starter.index'
-import { Route as AdminIndexRouteImport } from './routes/admin/index'
-import { Route as AccountIndexRouteImport } from './routes/account/index'
-import { Route as StackCategoryRouteImport } from './routes/stack.$category'
-import { Route as ShowcaseSubmitRouteImport } from './routes/showcase/submit'
-import { Route as ShowcaseIdRouteImport } from './routes/showcase/$id'
-import { Route as ShopSearchRouteImport } from './routes/shop.search'
-import { Route as ShopCartRouteImport } from './routes/shop.cart'
-import { Route as ShopHandleRouteImport } from './routes/shop.$handle'
-import { Route as PartnersRenderRouteImport } from './routes/partners.render'
-import { Route as PartnersRailwayRouteImport } from './routes/partners.railway'
-import { Route as PartnersNetlifyRouteImport } from './routes/partners.netlify'
-import { Route as PartnersPartnerRouteImport } from './routes/partners.$partner'
-import { Route as OauthTokenRouteImport } from './routes/oauth/token'
-import { Route as OauthRegisterRouteImport } from './routes/oauth/register'
-import { Route as OauthAuthorizeRouteImport } from './routes/oauth/authorize'
-import { Route as LibrariesFrameworkRouteImport } from './routes/libraries_.$framework'
-import { Route as DsTypographyRouteImport } from './routes/ds.typography'
-import { Route as DsTakeoverRouteImport } from './routes/ds.takeover'
-import { Route as DsTabsRouteImport } from './routes/ds.tabs'
-import { Route as DsStatsRouteImport } from './routes/ds.stats'
-import { Route as DsSpinnerRouteImport } from './routes/ds.spinner'
-import { Route as DsShadowsRouteImport } from './routes/ds.shadows'
-import { Route as DsSemanticRouteImport } from './routes/ds.semantic'
-import { Route as DsPartnerRailRouteImport } from './routes/ds.partner-rail'
-import { Route as DsPanelRouteImport } from './routes/ds.panel'
-import { Route as DsPaletteRouteImport } from './routes/ds.palette'
-import { Route as DsPageHeaderRouteImport } from './routes/ds.page-header'
-import { Route as DsOverlaysRouteImport } from './routes/ds.overlays'
-import { Route as DsNavbarRouteImport } from './routes/ds.navbar'
-import { Route as DsMaintainersRouteImport } from './routes/ds.maintainers'
-import { Route as DsLogosRouteImport } from './routes/ds.logos'
-import { Route as DsInputsRouteImport } from './routes/ds.inputs'
-import { Route as DsIconographyRouteImport } from './routes/ds.iconography'
-import { Route as DsEyebrowRouteImport } from './routes/ds.eyebrow'
-import { Route as DsEffectsRouteImport } from './routes/ds.effects'
-import { Route as DsDropdownRouteImport } from './routes/ds.dropdown'
-import { Route as DsDrawerRouteImport } from './routes/ds.drawer'
-import { Route as DsDialogRouteImport } from './routes/ds.dialog'
-import { Route as DsColorsRouteImport } from './routes/ds.colors'
-import { Route as DsCardsRouteImport } from './routes/ds.cards'
-import { Route as DsButtonsRouteImport } from './routes/ds.buttons'
-import { Route as DsBreadcrumbsRouteImport } from './routes/ds.breadcrumbs'
-import { Route as DsBadgesRouteImport } from './routes/ds.badges'
-import { Route as DsAvatarRouteImport } from './routes/ds.avatar'
-import { Route as BuilderNewRouteImport } from './routes/builder_.new'
-import { Route as BuilderLlmsDottxtRouteImport } from './routes/builder_.llms[.]txt'
-import { Route as BuilderEsbuildRouteImport } from './routes/builder_.esbuild'
-import { Route as BuilderAiRouteImport } from './routes/builder_.ai'
-import { Route as BuilderIdRouteImport } from './routes/builder_.$id'
-import { Route as BlogSplatRouteImport } from './routes/blog.$'
-import { Route as AuthSignoutRouteImport } from './routes/auth/signout'
-import { Route as AuthPopupSuccessRouteImport } from './routes/auth/popup-success'
-import { Route as AuthCliRouteImport } from './routes/auth/cli'
-import { Route as ApplicationStarterDocsRouteImport } from './routes/application-starter.docs'
-import { Route as ApiUploadthingRouteImport } from './routes/api/uploadthing'
-import { Route as AdminUsersRouteImport } from './routes/admin/users'
-import { Route as AdminNpmStatsRouteImport } from './routes/admin/npm-stats'
-import { Route as AdminLoginsRouteImport } from './routes/admin/logins'
-import { Route as AdminIntentRouteImport } from './routes/admin/intent'
-import { Route as AdminGithubStatsRouteImport } from './routes/admin/github-stats'
-import { Route as AdminDocsRouteImport } from './routes/admin/docs'
-import { Route as AdminAuditRouteImport } from './routes/admin/audit'
-import { Route as AccountSubmissionsRouteImport } from './routes/account/submissions'
-import { Route as AccountNotesRouteImport } from './routes/account/notes'
-import { Route as AccountIntegrationsRouteImport } from './routes/account/integrations'
-import { Route as AccountFeedbackRouteImport } from './routes/account/feedback'
+import { Route as AdsRouteImport } from './routes/ads'
+import { Route as ApplicationStarterRouteImport } from './routes/application-starter'
+import { Route as BlogRouteImport } from './routes/blog'
+import { Route as BrandGuideRouteImport } from './routes/brand-guide'
+import { Route as BuilderRouteImport } from './routes/builder'
+import { Route as CommunityProjectsRouteImport } from './routes/community-projects'
+import { Route as DashboardRouteImport } from './routes/dashboard'
+import { Route as DsRouteImport } from './routes/ds'
+import { Route as EthosRouteImport } from './routes/ethos'
+import { Route as ExploreRouteImport } from './routes/explore'
+import { Route as FeedbackLeaderboardRouteImport } from './routes/feedback-leaderboard'
+import { Route as LearnRouteImport } from './routes/learn'
+import { Route as LibrariesRouteImport } from './routes/libraries'
+import { Route as LlmsFullDottxtRouteImport } from './routes/llms-full[.]txt'
+import { Route as LlmsDottxtRouteImport } from './routes/llms[.]txt'
+import { Route as LoginRouteImport } from './routes/login'
+import { Route as MaintainersRouteImport } from './routes/maintainers'
+import { Route as MerchRouteImport } from './routes/merch'
+import { Route as PaidSupportRouteImport } from './routes/paid-support'
+import { Route as PartnersRouteImport } from './routes/partners'
+import { Route as PartnersEmbedRouteImport } from './routes/partners-embed'
+import { Route as PrivacyRouteImport } from './routes/privacy'
+import { Route as RobotsDottxtRouteImport } from './routes/robots[.]txt'
+import { Route as RssDotxmlRouteImport } from './routes/rss[.]xml'
+import { Route as ShopRouteImport } from './routes/shop'
+import { Route as ShowcasesRouteImport } from './routes/showcases'
+import { Route as SitemapDotxmlRouteImport } from './routes/sitemap[.]xml'
+import { Route as SponsorsEmbedRouteImport } from './routes/sponsors-embed'
+import { Route as SupportRouteImport } from './routes/support'
+import { Route as TenetsRouteImport } from './routes/tenets'
+import { Route as TermsRouteImport } from './routes/terms'
+import { Route as WorkshopsRouteImport } from './routes/workshops'
 import { Route as DotwellKnownOauthAuthorizationServerRouteImport } from './routes/[.]well-known/oauth-authorization-server'
 import { Route as LibraryLibraryIdRouteRouteImport } from './routes/_library/$libraryId/route'
-import { Route as StatsNpmIndexRouteImport } from './routes/stats/npm/index'
-import { Route as IntentRegistryIndexRouteImport } from './routes/intent/registry/index'
-import { Route as ApiMcpIndexRouteImport } from './routes/api/mcp/index'
-import { Route as AdminShowcasesIndexRouteImport } from './routes/admin/showcases.index'
-import { Route as AdminRolesIndexRouteImport } from './routes/admin/roles.index'
-import { Route as AdminNotesIndexRouteImport } from './routes/admin/notes.index'
-import { Route as AdminFeedbackIndexRouteImport } from './routes/admin/feedback.index'
+import { Route as AccountIndexRouteImport } from './routes/account/index'
+import { Route as AccountFeedbackRouteImport } from './routes/account/feedback'
+import { Route as AccountIntegrationsRouteImport } from './routes/account/integrations'
+import { Route as AccountNotesRouteImport } from './routes/account/notes'
+import { Route as AccountSubmissionsRouteImport } from './routes/account/submissions'
+import { Route as AdminIndexRouteImport } from './routes/admin/index'
+import { Route as AdminAuditRouteImport } from './routes/admin/audit'
+import { Route as AdminDocsRouteImport } from './routes/admin/docs'
+import { Route as AdminGithubStatsRouteImport } from './routes/admin/github-stats'
+import { Route as AdminIntentRouteImport } from './routes/admin/intent'
+import { Route as AdminLoginsRouteImport } from './routes/admin/logins'
+import { Route as AdminNpmStatsRouteImport } from './routes/admin/npm-stats'
+import { Route as AdminUsersRouteImport } from './routes/admin/users'
+import { Route as ApiUploadthingRouteImport } from './routes/api/uploadthing'
+import { Route as ApplicationStarterIndexRouteImport } from './routes/application-starter.index'
+import { Route as ApplicationStarterDocsRouteImport } from './routes/application-starter.docs'
+import { Route as AuthCliRouteImport } from './routes/auth/cli'
+import { Route as AuthPopupSuccessRouteImport } from './routes/auth/popup-success'
+import { Route as AuthSignoutRouteImport } from './routes/auth/signout'
+import { Route as BlogIndexRouteImport } from './routes/blog.index'
+import { Route as BlogSplatRouteImport } from './routes/blog.$'
+import { Route as BuilderIdRouteImport } from './routes/builder_.$id'
+import { Route as BuilderAiRouteImport } from './routes/builder_.ai'
+import { Route as BuilderEsbuildRouteImport } from './routes/builder_.esbuild'
+import { Route as BuilderLlmsDottxtRouteImport } from './routes/builder_.llms[.]txt'
+import { Route as BuilderNewRouteImport } from './routes/builder_.new'
+import { Route as DsIndexRouteImport } from './routes/ds.index'
+import { Route as DsAvatarRouteImport } from './routes/ds.avatar'
+import { Route as DsBadgesRouteImport } from './routes/ds.badges'
+import { Route as DsBreadcrumbsRouteImport } from './routes/ds.breadcrumbs'
+import { Route as DsButtonsRouteImport } from './routes/ds.buttons'
+import { Route as DsCardsRouteImport } from './routes/ds.cards'
+import { Route as DsColorsRouteImport } from './routes/ds.colors'
+import { Route as DsDialogRouteImport } from './routes/ds.dialog'
+import { Route as DsDrawerRouteImport } from './routes/ds.drawer'
+import { Route as DsDropdownRouteImport } from './routes/ds.dropdown'
+import { Route as DsEffectsRouteImport } from './routes/ds.effects'
+import { Route as DsEyebrowRouteImport } from './routes/ds.eyebrow'
+import { Route as DsIconographyRouteImport } from './routes/ds.iconography'
+import { Route as DsInputsRouteImport } from './routes/ds.inputs'
+import { Route as DsLogosRouteImport } from './routes/ds.logos'
+import { Route as DsMaintainersRouteImport } from './routes/ds.maintainers'
+import { Route as DsNavbarRouteImport } from './routes/ds.navbar'
+import { Route as DsOverlaysRouteImport } from './routes/ds.overlays'
+import { Route as DsPageHeaderRouteImport } from './routes/ds.page-header'
+import { Route as DsPaletteRouteImport } from './routes/ds.palette'
+import { Route as DsPanelRouteImport } from './routes/ds.panel'
+import { Route as DsPartnerRailRouteImport } from './routes/ds.partner-rail'
+import { Route as DsSemanticRouteImport } from './routes/ds.semantic'
+import { Route as DsShadowsRouteImport } from './routes/ds.shadows'
+import { Route as DsSpinnerRouteImport } from './routes/ds.spinner'
+import { Route as DsStatsRouteImport } from './routes/ds.stats'
+import { Route as DsTabsRouteImport } from './routes/ds.tabs'
+import { Route as DsTakeoverRouteImport } from './routes/ds.takeover'
+import { Route as DsTypographyRouteImport } from './routes/ds.typography'
+import { Route as LibrariesFrameworkRouteImport } from './routes/libraries_.$framework'
+import { Route as OauthAuthorizeRouteImport } from './routes/oauth/authorize'
+import { Route as OauthRegisterRouteImport } from './routes/oauth/register'
+import { Route as OauthTokenRouteImport } from './routes/oauth/token'
+import { Route as PartnersIndexRouteImport } from './routes/partners.index'
+import { Route as PartnersPartnerRouteImport } from './routes/partners.$partner'
+import { Route as PartnersNetlifyRouteImport } from './routes/partners.netlify'
+import { Route as PartnersRailwayRouteImport } from './routes/partners.railway'
+import { Route as PartnersRenderRouteImport } from './routes/partners.render'
+import { Route as ShopIndexRouteImport } from './routes/shop.index'
+import { Route as ShopHandleRouteImport } from './routes/shop.$handle'
+import { Route as ShopCartRouteImport } from './routes/shop.cart'
+import { Route as ShopSearchRouteImport } from './routes/shop.search'
+import { Route as ShowcaseIndexRouteImport } from './routes/showcase/index'
+import { Route as ShowcaseIdRouteImport } from './routes/showcase/$id'
+import { Route as ShowcaseSubmitRouteImport } from './routes/showcase/submit'
+import { Route as StackCategoryRouteImport } from './routes/stack.$category'
+import { Route as StatsIndexRouteImport } from './routes/stats/index'
 import { Route as LibraryLibraryIdIndexRouteImport } from './routes/_library/$libraryId/index'
-import { Route as StatsNpmEmbedRouteImport } from './routes/stats/npm/embed'
-import { Route as StatsNpmPackagesRouteImport } from './routes/stats/npm/$packages'
-import { Route as ShowcaseEditIdRouteImport } from './routes/showcase/edit.$id'
-import { Route as ShopProductsHandleRouteImport } from './routes/shop.products.$handle'
-import { Route as ShopPoliciesHandleRouteImport } from './routes/shop.policies.$handle'
-import { Route as ShopPagesHandleRouteImport } from './routes/shop.pages.$handle'
-import { Route as ShopCollectionsHandleRouteImport } from './routes/shop.collections.$handle'
-import { Route as IntentRegistryPackageNameRouteImport } from './routes/intent/registry/$packageName'
-import { Route as ChartsCatalogCatalogDotjsonRouteImport } from './routes/charts.catalog_.catalog[.]json'
-import { Route as BuilderPHashRouteImport } from './routes/builder_.p.$hash'
-import { Route as AuthProviderStartRouteImport } from './routes/auth/$provider/start'
-import { Route as ApiReadmeChar123Char125DotpngRouteImport } from './routes/api/readme/{$}[.]png'
-import { Route as ApiOgChar123Char125DotpngRouteImport } from './routes/api/og/{$}[.]png'
-import { Route as ApiMcpSplatRouteImport } from './routes/api/mcp/$'
-import { Route as ApiGithubWebhookRouteImport } from './routes/api/github/webhook'
-import { Route as ApiExampleDeployRouteImport } from './routes/api/example/deploy'
-import { Route as ApiDiscordInteractionsRouteImport } from './routes/api/discord/interactions'
-import { Route as ApiDataPartnersRouteImport } from './routes/api/data/partners'
-import { Route as ApiDataLibrariesRouteImport } from './routes/api/data/libraries'
-import { Route as ApiBuilderProjectsRouteImport } from './routes/api/builder/projects'
-import { Route as ApiBuilderProjectSnapshotsRouteImport } from './routes/api/builder/project-snapshots'
-import { Route as ApiBuilderAssistRouteImport } from './routes/api/builder/assist'
-import { Route as ApiApplicationStarterValidateRouteImport } from './routes/api/application-starter/validate'
-import { Route as ApiApplicationStarterSuggestRouteImport } from './routes/api/application-starter/suggest'
-import { Route as ApiApplicationStarterResolveRouteImport } from './routes/api/application-starter/resolve'
-import { Route as ApiApplicationStarterLoadTemplateRouteImport } from './routes/api/application-starter/load-template'
-import { Route as ApiApplicationStarterLoadRemoteTemplateRouteImport } from './routes/api/application-starter/load-remote-template'
-import { Route as ApiApplicationStarterLoadRemoteAddonRouteImport } from './routes/api/application-starter/load-remote-addon'
-import { Route as ApiApplicationStarterFeaturesRouteImport } from './routes/api/application-starter/features'
-import { Route as ApiApplicationStarterFeatureArtifactsRouteImport } from './routes/api/application-starter/feature-artifacts'
-import { Route as ApiApplicationStarterDownloadRouteImport } from './routes/api/application-starter/download'
-import { Route as ApiApplicationStarterCompileAttributedRouteImport } from './routes/api/application-starter/compile-attributed'
-import { Route as ApiApplicationStarterCompileRouteImport } from './routes/api/application-starter/compile'
-import { Route as AdminUsersUserIdRouteImport } from './routes/admin/users.$userId'
-import { Route as AdminShowcasesIdRouteImport } from './routes/admin/showcases_.$id'
-import { Route as AdminRolesRoleIdRouteImport } from './routes/admin/roles.$roleId'
-import { Route as AdminFeedbackIdRouteImport } from './routes/admin/feedback_.$id'
-import { Route as LibraryChartsCatalogRouteImport } from './routes/_library/charts.catalog'
 import { Route as LibraryLibraryIdVersionRouteImport } from './routes/_library/$libraryId/$version'
-import { Route as IntentRegistryPackageNameIndexRouteImport } from './routes/intent/registry/$packageName.index'
-import { Route as LibraryWorkflowVersionIndexRouteImport } from './routes/_library/workflow.$version.index'
-import { Route as LibraryVirtualVersionIndexRouteImport } from './routes/_library/virtual.$version.index'
-import { Route as LibraryTableVersionIndexRouteImport } from './routes/_library/table.$version.index'
-import { Route as LibraryStoreVersionIndexRouteImport } from './routes/_library/store.$version.index'
-import { Route as LibraryStartVersionIndexRouteImport } from './routes/_library/start.$version.index'
-import { Route as LibraryRouterVersionIndexRouteImport } from './routes/_library/router.$version.index'
-import { Route as LibraryRangerVersionIndexRouteImport } from './routes/_library/ranger.$version.index'
-import { Route as LibraryQueryVersionIndexRouteImport } from './routes/_library/query.$version.index'
-import { Route as LibraryPacerVersionIndexRouteImport } from './routes/_library/pacer.$version.index'
-import { Route as LibraryMarkdownVersionIndexRouteImport } from './routes/_library/markdown.$version.index'
-import { Route as LibraryIntentVersionIndexRouteImport } from './routes/_library/intent.$version.index'
-import { Route as LibraryHotkeysVersionIndexRouteImport } from './routes/_library/hotkeys.$version.index'
-import { Route as LibraryHighlightVersionIndexRouteImport } from './routes/_library/highlight.$version.index'
-import { Route as LibraryFormVersionIndexRouteImport } from './routes/_library/form.$version.index'
-import { Route as LibraryDevtoolsVersionIndexRouteImport } from './routes/_library/devtools.$version.index'
-import { Route as LibraryDbVersionIndexRouteImport } from './routes/_library/db.$version.index'
-import { Route as LibraryConfigVersionIndexRouteImport } from './routes/_library/config.$version.index'
-import { Route as LibraryCliVersionIndexRouteImport } from './routes/_library/cli.$version.index'
-import { Route as LibraryChartsCatalogIndexRouteImport } from './routes/_library/charts.catalog.index'
-import { Route as LibraryChartsVersionIndexRouteImport } from './routes/_library/charts.$version.index'
-import { Route as LibraryAiVersionIndexRouteImport } from './routes/_library/ai.$version.index'
+import { Route as LibraryChartsCatalogRouteImport } from './routes/_library/charts.catalog'
+import { Route as AdminFeedbackIndexRouteImport } from './routes/admin/feedback.index'
+import { Route as AdminFeedbackIdRouteImport } from './routes/admin/feedback_.$id'
+import { Route as AdminNotesIndexRouteImport } from './routes/admin/notes.index'
+import { Route as AdminRolesIndexRouteImport } from './routes/admin/roles.index'
+import { Route as AdminRolesRoleIdRouteImport } from './routes/admin/roles.$roleId'
+import { Route as AdminShowcasesIndexRouteImport } from './routes/admin/showcases.index'
+import { Route as AdminShowcasesIdRouteImport } from './routes/admin/showcases_.$id'
+import { Route as AdminUsersUserIdRouteImport } from './routes/admin/users.$userId'
+import { Route as ApiApplicationStarterCompileRouteImport } from './routes/api/application-starter/compile'
+import { Route as ApiApplicationStarterCompileAttributedRouteImport } from './routes/api/application-starter/compile-attributed'
+import { Route as ApiApplicationStarterDownloadRouteImport } from './routes/api/application-starter/download'
+import { Route as ApiApplicationStarterFeatureArtifactsRouteImport } from './routes/api/application-starter/feature-artifacts'
+import { Route as ApiApplicationStarterFeaturesRouteImport } from './routes/api/application-starter/features'
+import { Route as ApiApplicationStarterLoadRemoteAddonRouteImport } from './routes/api/application-starter/load-remote-addon'
+import { Route as ApiApplicationStarterLoadRemoteTemplateRouteImport } from './routes/api/application-starter/load-remote-template'
+import { Route as ApiApplicationStarterLoadTemplateRouteImport } from './routes/api/application-starter/load-template'
+import { Route as ApiApplicationStarterResolveRouteImport } from './routes/api/application-starter/resolve'
+import { Route as ApiApplicationStarterSuggestRouteImport } from './routes/api/application-starter/suggest'
+import { Route as ApiApplicationStarterValidateRouteImport } from './routes/api/application-starter/validate'
+import { Route as ApiBuilderAssistRouteImport } from './routes/api/builder/assist'
+import { Route as ApiBuilderProjectSnapshotsRouteImport } from './routes/api/builder/project-snapshots'
+import { Route as ApiBuilderProjectsRouteImport } from './routes/api/builder/projects'
+import { Route as ApiDataLibrariesRouteImport } from './routes/api/data/libraries'
+import { Route as ApiDataPartnersRouteImport } from './routes/api/data/partners'
+import { Route as ApiDiscordInteractionsRouteImport } from './routes/api/discord/interactions'
+import { Route as ApiExampleDeployRouteImport } from './routes/api/example/deploy'
+import { Route as ApiGithubWebhookRouteImport } from './routes/api/github/webhook'
+import { Route as ApiMcpIndexRouteImport } from './routes/api/mcp/index'
+import { Route as ApiMcpSplatRouteImport } from './routes/api/mcp/$'
+import { Route as ApiOgChar123Char125DotpngRouteImport } from './routes/api/og/{$}[.]png'
+import { Route as ApiReadmeChar123Char125DotpngRouteImport } from './routes/api/readme/{$}[.]png'
+import { Route as AuthProviderStartRouteImport } from './routes/auth/$provider/start'
+import { Route as BuilderPHashRouteImport } from './routes/builder_.p.$hash'
+import { Route as ChartsCatalogCatalogDotjsonRouteImport } from './routes/charts.catalog_.catalog[.]json'
+import { Route as IntentRegistryIndexRouteImport } from './routes/intent/registry/index'
+import { Route as IntentRegistryPackageNameRouteImport } from './routes/intent/registry/$packageName'
+import { Route as ShopCollectionsHandleRouteImport } from './routes/shop.collections.$handle'
+import { Route as ShopPagesHandleRouteImport } from './routes/shop.pages.$handle'
+import { Route as ShopPoliciesHandleRouteImport } from './routes/shop.policies.$handle'
+import { Route as ShopProductsHandleRouteImport } from './routes/shop.products.$handle'
+import { Route as ShowcaseEditIdRouteImport } from './routes/showcase/edit.$id'
+import { Route as StatsNpmIndexRouteImport } from './routes/stats/npm/index'
+import { Route as StatsNpmPackagesRouteImport } from './routes/stats/npm/$packages'
+import { Route as StatsNpmEmbedRouteImport } from './routes/stats/npm/embed'
 import { Route as LibraryLibraryIdVersionIndexRouteImport } from './routes/_library/$libraryId/$version.index'
-import { Route as IntentRegistryPackageNameChar123Char125DotmdRouteImport } from './routes/intent/registry/$packageName.{$}[.]md'
-import { Route as IntentRegistryPackageNameSkillNameRouteImport } from './routes/intent/registry/$packageName.$skillName'
-import { Route as ApiBuilderProjectsIdRouteImport } from './routes/api/builder/projects.$id'
-import { Route as ApiBuilderProjectSnapshotsHashRouteImport } from './routes/api/builder/project-snapshots.$hash'
-import { Route as ApiBuilderOpenrouterCallbackRouteImport } from './routes/api/builder/openrouter/callback'
-import { Route as ApiAuthCliCreateTicketRouteImport } from './routes/api/auth/cli/create-ticket'
-import { Route as ApiAuthCallbackProviderRouteImport } from './routes/api/auth/callback/$provider'
-import { Route as ApiApplicationStarterDeployGithubRouteImport } from './routes/api/application-starter/deploy/github'
-import { Route as ApiApplicationStarterDeployCheckNameRouteImport } from './routes/api/application-starter/deploy/check-name'
-import { Route as LibraryChartsCatalogAllRouteImport } from './routes/_library/charts.catalog.all'
-import { Route as LibraryLibraryIdVersionLlmsDottxtRouteImport } from './routes/_library/$libraryId/$version.llms[.]txt'
 import { Route as LibraryLibraryIdVersionDocsRouteImport } from './routes/_library/$libraryId/$version.docs'
+import { Route as LibraryLibraryIdVersionLlmsDottxtRouteImport } from './routes/_library/$libraryId/$version.llms[.]txt'
+import { Route as LibraryAiVersionIndexRouteImport } from './routes/_library/ai.$version.index'
+import { Route as LibraryChartsVersionIndexRouteImport } from './routes/_library/charts.$version.index'
+import { Route as LibraryChartsCatalogIndexRouteImport } from './routes/_library/charts.catalog.index'
+import { Route as LibraryChartsCatalogAllRouteImport } from './routes/_library/charts.catalog.all'
+import { Route as LibraryCliVersionIndexRouteImport } from './routes/_library/cli.$version.index'
+import { Route as LibraryConfigVersionIndexRouteImport } from './routes/_library/config.$version.index'
+import { Route as LibraryDbVersionIndexRouteImport } from './routes/_library/db.$version.index'
+import { Route as LibraryDevtoolsVersionIndexRouteImport } from './routes/_library/devtools.$version.index'
+import { Route as LibraryFormVersionIndexRouteImport } from './routes/_library/form.$version.index'
+import { Route as LibraryHighlightVersionIndexRouteImport } from './routes/_library/highlight.$version.index'
+import { Route as LibraryHotkeysVersionIndexRouteImport } from './routes/_library/hotkeys.$version.index'
+import { Route as LibraryIntentVersionIndexRouteImport } from './routes/_library/intent.$version.index'
+import { Route as LibraryMarkdownVersionIndexRouteImport } from './routes/_library/markdown.$version.index'
+import { Route as LibraryPacerVersionIndexRouteImport } from './routes/_library/pacer.$version.index'
+import { Route as LibraryQueryVersionIndexRouteImport } from './routes/_library/query.$version.index'
+import { Route as LibraryRangerVersionIndexRouteImport } from './routes/_library/ranger.$version.index'
+import { Route as LibraryRouterVersionIndexRouteImport } from './routes/_library/router.$version.index'
+import { Route as LibraryStartVersionIndexRouteImport } from './routes/_library/start.$version.index'
+import { Route as LibraryStoreVersionIndexRouteImport } from './routes/_library/store.$version.index'
+import { Route as LibraryTableVersionIndexRouteImport } from './routes/_library/table.$version.index'
+import { Route as LibraryVirtualVersionIndexRouteImport } from './routes/_library/virtual.$version.index'
+import { Route as LibraryWorkflowVersionIndexRouteImport } from './routes/_library/workflow.$version.index'
+import { Route as ApiApplicationStarterDeployCheckNameRouteImport } from './routes/api/application-starter/deploy/check-name'
+import { Route as ApiApplicationStarterDeployGithubRouteImport } from './routes/api/application-starter/deploy/github'
+import { Route as ApiAuthCallbackProviderRouteImport } from './routes/api/auth/callback/$provider'
+import { Route as ApiAuthCliCreateTicketRouteImport } from './routes/api/auth/cli/create-ticket'
+import { Route as ApiBuilderOpenrouterCallbackRouteImport } from './routes/api/builder/openrouter/callback'
+import { Route as ApiBuilderProjectSnapshotsHashRouteImport } from './routes/api/builder/project-snapshots.$hash'
+import { Route as ApiBuilderProjectsIdRouteImport } from './routes/api/builder/projects.$id'
+import { Route as IntentRegistryPackageNameIndexRouteImport } from './routes/intent/registry/$packageName.index'
+import { Route as IntentRegistryPackageNameSkillNameRouteImport } from './routes/intent/registry/$packageName.$skillName'
+import { Route as IntentRegistryPackageNameChar123Char125DotmdRouteImport } from './routes/intent/registry/$packageName.{$}[.]md'
 import { Route as LibraryLibraryIdVersionDocsIndexRouteImport } from './routes/_library/$libraryId/$version.docs.index'
-import { Route as ChartsCatalogPreviewsRevisionChar123caseIdChar125DotsvgRouteImport } from './routes/charts.catalog_.previews.$revision.{$caseId}[.]svg'
-import { Route as ApiBuilderProjectsIdSyncRouteImport } from './routes/api/builder/projects.$id.sync'
-import { Route as ApiBuilderProjectSnapshotsHashQuarantineRouteImport } from './routes/api/builder/project-snapshots.$hash.quarantine'
-import { Route as ApiAuthCliStatusTicketIdRouteImport } from './routes/api/auth/cli/status.$ticketId'
-import { Route as LibraryChartsCatalogCollectionsCollectionIdRouteImport } from './routes/_library/charts.catalog.collections.$collectionId'
-import { Route as LibraryChartsCatalogChartsCaseIdRouteImport } from './routes/_library/charts.catalog.charts.$caseId'
-import { Route as LibraryLibraryIdVersionDocsChar123Char125DotmdRouteImport } from './routes/_library/$libraryId/$version.docs.{$}[.]md'
-import { Route as LibraryLibraryIdVersionDocsNpmStatsRouteImport } from './routes/_library/$libraryId/$version.docs.npm-stats'
-import { Route as LibraryLibraryIdVersionDocsIndexDotmdRouteImport } from './routes/_library/$libraryId/$version.docs.index[.]md'
-import { Route as LibraryLibraryIdVersionDocsContributorsRouteImport } from './routes/_library/$libraryId/$version.docs.contributors'
-import { Route as LibraryLibraryIdVersionDocsCommunityResourcesRouteImport } from './routes/_library/$libraryId/$version.docs.community-resources'
-import { Route as LibraryLibraryIdVersionDocsBlogRouteImport } from './routes/_library/$libraryId/$version.docs.blog'
 import { Route as LibraryLibraryIdVersionDocsSplatRouteImport } from './routes/_library/$libraryId/$version.docs.$'
+import { Route as LibraryLibraryIdVersionDocsBlogRouteImport } from './routes/_library/$libraryId/$version.docs.blog'
+import { Route as LibraryLibraryIdVersionDocsCommunityResourcesRouteImport } from './routes/_library/$libraryId/$version.docs.community-resources'
+import { Route as LibraryLibraryIdVersionDocsContributorsRouteImport } from './routes/_library/$libraryId/$version.docs.contributors'
+import { Route as LibraryLibraryIdVersionDocsIndexDotmdRouteImport } from './routes/_library/$libraryId/$version.docs.index[.]md'
+import { Route as LibraryLibraryIdVersionDocsNpmStatsRouteImport } from './routes/_library/$libraryId/$version.docs.npm-stats'
+import { Route as LibraryLibraryIdVersionDocsChar123Char125DotmdRouteImport } from './routes/_library/$libraryId/$version.docs.{$}[.]md'
+import { Route as LibraryChartsCatalogChartsCaseIdRouteImport } from './routes/_library/charts.catalog.charts.$caseId'
+import { Route as LibraryChartsCatalogCollectionsCollectionIdRouteImport } from './routes/_library/charts.catalog.collections.$collectionId'
+import { Route as ApiAuthCliStatusTicketIdRouteImport } from './routes/api/auth/cli/status.$ticketId'
+import { Route as ApiBuilderProjectSnapshotsHashQuarantineRouteImport } from './routes/api/builder/project-snapshots.$hash.quarantine'
+import { Route as ApiBuilderProjectsIdSyncRouteImport } from './routes/api/builder/projects.$id.sync'
+import { Route as ChartsCatalogPreviewsRevisionChar123caseIdChar125DotsvgRouteImport } from './routes/charts.catalog_.previews.$revision.{$caseId}[.]svg'
 import { Route as LibraryLibraryIdVersionDocsFrameworkIndexRouteImport } from './routes/_library/$libraryId/$version.docs.framework.index'
 import { Route as LibraryLibraryIdVersionDocsFrameworkFrameworkIndexRouteImport } from './routes/_library/$libraryId/$version.docs.framework.$framework.index'
-import { Route as LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRouteImport } from './routes/_library/$libraryId/$version.docs.framework.$framework.{$}[.]md'
 import { Route as LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRouteImport } from './routes/_library/$libraryId/$version.docs.framework.$framework.$'
+import { Route as LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRouteImport } from './routes/_library/$libraryId/$version.docs.framework.$framework.{$}[.]md'
 import { Route as LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRouteImport } from './routes/_library/$libraryId/$version.docs.framework.$framework.examples.$'
 
-const WorkshopsRoute = WorkshopsRouteImport.update({
-  id: '/workshops',
-  path: '/workshops',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const TermsRoute = TermsRouteImport.update({
-  id: '/terms',
-  path: '/terms',
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const TenetsRoute = TenetsRouteImport.update({
-  id: '/tenets',
-  path: '/tenets',
+const LibraryRoute = LibraryRouteImport.update({
+  id: '/_library',
   getParentRoute: () => rootRouteImport,
 } as any)
-const SupportRoute = SupportRouteImport.update({
-  id: '/support',
-  path: '/support',
+const AccountRoute = AccountRouteImport.update({
+  id: '/account',
+  path: '/account',
   getParentRoute: () => rootRouteImport,
 } as any)
-const SponsorsEmbedRoute = SponsorsEmbedRouteImport.update({
-  id: '/sponsors-embed',
-  path: '/sponsors-embed',
+const AdminRouteRoute = AdminRouteRouteImport.update({
+  id: '/admin',
+  path: '/admin',
   getParentRoute: () => rootRouteImport,
 } as any)
-const SitemapDotxmlRoute = SitemapDotxmlRouteImport.update({
-  id: '/sitemap.xml',
-  path: '/sitemap.xml',
+const AdsRoute = AdsRouteImport.update({
+  id: '/ads',
+  path: '/ads',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ShowcasesRoute = ShowcasesRouteImport.update({
-  id: '/showcases',
-  path: '/showcases',
+const ApplicationStarterRoute = ApplicationStarterRouteImport.update({
+  id: '/application-starter',
+  path: '/application-starter',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ShopRoute = ShopRouteImport.update({
-  id: '/shop',
-  path: '/shop',
+const BlogRoute = BlogRouteImport.update({
+  id: '/blog',
+  path: '/blog',
   getParentRoute: () => rootRouteImport,
 } as any)
-const RssDotxmlRoute = RssDotxmlRouteImport.update({
-  id: '/rss.xml',
-  path: '/rss.xml',
+const BrandGuideRoute = BrandGuideRouteImport.update({
+  id: '/brand-guide',
+  path: '/brand-guide',
   getParentRoute: () => rootRouteImport,
 } as any)
-const RobotsDottxtRoute = RobotsDottxtRouteImport.update({
-  id: '/robots.txt',
-  path: '/robots.txt',
+const BuilderRoute = BuilderRouteImport.update({
+  id: '/builder',
+  path: '/builder',
   getParentRoute: () => rootRouteImport,
 } as any)
-const PrivacyRoute = PrivacyRouteImport.update({
-  id: '/privacy',
-  path: '/privacy',
+const CommunityProjectsRoute = CommunityProjectsRouteImport.update({
+  id: '/community-projects',
+  path: '/community-projects',
   getParentRoute: () => rootRouteImport,
 } as any)
-const PartnersEmbedRoute = PartnersEmbedRouteImport.update({
-  id: '/partners-embed',
-  path: '/partners-embed',
+const DashboardRoute = DashboardRouteImport.update({
+  id: '/dashboard',
+  path: '/dashboard',
   getParentRoute: () => rootRouteImport,
 } as any)
-const PartnersRoute = PartnersRouteImport.update({
-  id: '/partners',
-  path: '/partners',
+const DsRoute = DsRouteImport.update({
+  id: '/ds',
+  path: '/ds',
   getParentRoute: () => rootRouteImport,
 } as any)
-const PaidSupportRoute = PaidSupportRouteImport.update({
-  id: '/paid-support',
-  path: '/paid-support',
+const EthosRoute = EthosRouteImport.update({
+  id: '/ethos',
+  path: '/ethos',
   getParentRoute: () => rootRouteImport,
 } as any)
-const MerchRoute = MerchRouteImport.update({
-  id: '/merch',
-  path: '/merch',
+const ExploreRoute = ExploreRouteImport.update({
+  id: '/explore',
+  path: '/explore',
   getParentRoute: () => rootRouteImport,
 } as any)
-const MaintainersRoute = MaintainersRouteImport.update({
-  id: '/maintainers',
-  path: '/maintainers',
+const FeedbackLeaderboardRoute = FeedbackLeaderboardRouteImport.update({
+  id: '/feedback-leaderboard',
+  path: '/feedback-leaderboard',
   getParentRoute: () => rootRouteImport,
 } as any)
-const LoginRoute = LoginRouteImport.update({
-  id: '/login',
-  path: '/login',
+const LearnRoute = LearnRouteImport.update({
+  id: '/learn',
+  path: '/learn',
   getParentRoute: () => rootRouteImport,
 } as any)
-const LlmsDottxtRoute = LlmsDottxtRouteImport.update({
-  id: '/llms.txt',
-  path: '/llms.txt',
+const LibrariesRoute = LibrariesRouteImport.update({
+  id: '/libraries',
+  path: '/libraries',
   getParentRoute: () => rootRouteImport,
 } as any)
 const LlmsFullDottxtRoute = LlmsFullDottxtRouteImport.update({
@@ -317,283 +311,295 @@ const LlmsFullDottxtRoute = LlmsFullDottxtRouteImport.update({
   path: '/llms-full.txt',
   getParentRoute: () => rootRouteImport,
 } as any)
-const LibrariesRoute = LibrariesRouteImport.update({
-  id: '/libraries',
-  path: '/libraries',
+const LlmsDottxtRoute = LlmsDottxtRouteImport.update({
+  id: '/llms.txt',
+  path: '/llms.txt',
   getParentRoute: () => rootRouteImport,
 } as any)
-const LearnRoute = LearnRouteImport.update({
-  id: '/learn',
-  path: '/learn',
+const LoginRoute = LoginRouteImport.update({
+  id: '/login',
+  path: '/login',
   getParentRoute: () => rootRouteImport,
 } as any)
-const FeedbackLeaderboardRoute = FeedbackLeaderboardRouteImport.update({
-  id: '/feedback-leaderboard',
-  path: '/feedback-leaderboard',
+const MaintainersRoute = MaintainersRouteImport.update({
+  id: '/maintainers',
+  path: '/maintainers',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ExploreRoute = ExploreRouteImport.update({
-  id: '/explore',
-  path: '/explore',
+const MerchRoute = MerchRouteImport.update({
+  id: '/merch',
+  path: '/merch',
   getParentRoute: () => rootRouteImport,
 } as any)
-const EthosRoute = EthosRouteImport.update({
-  id: '/ethos',
-  path: '/ethos',
+const PaidSupportRoute = PaidSupportRouteImport.update({
+  id: '/paid-support',
+  path: '/paid-support',
   getParentRoute: () => rootRouteImport,
 } as any)
-const DsRoute = DsRouteImport.update({
-  id: '/ds',
-  path: '/ds',
+const PartnersRoute = PartnersRouteImport.update({
+  id: '/partners',
+  path: '/partners',
   getParentRoute: () => rootRouteImport,
 } as any)
-const DashboardRoute = DashboardRouteImport.update({
-  id: '/dashboard',
-  path: '/dashboard',
+const PartnersEmbedRoute = PartnersEmbedRouteImport.update({
+  id: '/partners-embed',
+  path: '/partners-embed',
   getParentRoute: () => rootRouteImport,
 } as any)
-const CommunityProjectsRoute = CommunityProjectsRouteImport.update({
-  id: '/community-projects',
-  path: '/community-projects',
+const PrivacyRoute = PrivacyRouteImport.update({
+  id: '/privacy',
+  path: '/privacy',
   getParentRoute: () => rootRouteImport,
 } as any)
-const BuilderRoute = BuilderRouteImport.update({
-  id: '/builder',
-  path: '/builder',
+const RobotsDottxtRoute = RobotsDottxtRouteImport.update({
+  id: '/robots.txt',
+  path: '/robots.txt',
   getParentRoute: () => rootRouteImport,
 } as any)
-const BrandGuideRoute = BrandGuideRouteImport.update({
-  id: '/brand-guide',
-  path: '/brand-guide',
+const RssDotxmlRoute = RssDotxmlRouteImport.update({
+  id: '/rss.xml',
+  path: '/rss.xml',
   getParentRoute: () => rootRouteImport,
 } as any)
-const BlogRoute = BlogRouteImport.update({
-  id: '/blog',
-  path: '/blog',
+const ShopRoute = ShopRouteImport.update({
+  id: '/shop',
+  path: '/shop',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ApplicationStarterRoute = ApplicationStarterRouteImport.update({
-  id: '/application-starter',
-  path: '/application-starter',
+const ShowcasesRoute = ShowcasesRouteImport.update({
+  id: '/showcases',
+  path: '/showcases',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AdsRoute = AdsRouteImport.update({
-  id: '/ads',
-  path: '/ads',
+const SitemapDotxmlRoute = SitemapDotxmlRouteImport.update({
+  id: '/sitemap.xml',
+  path: '/sitemap.xml',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AccountRoute = AccountRouteImport.update({
-  id: '/account',
-  path: '/account',
+const SponsorsEmbedRoute = SponsorsEmbedRouteImport.update({
+  id: '/sponsors-embed',
+  path: '/sponsors-embed',
   getParentRoute: () => rootRouteImport,
 } as any)
-const LibraryRoute = LibraryRouteImport.update({
-  id: '/_library',
+const SupportRoute = SupportRouteImport.update({
+  id: '/support',
+  path: '/support',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AdminRouteRoute = AdminRouteRouteImport.update({
-  id: '/admin',
-  path: '/admin',
+const TenetsRoute = TenetsRouteImport.update({
+  id: '/tenets',
+  path: '/tenets',
   getParentRoute: () => rootRouteImport,
 } as any)
-const IndexRoute = IndexRouteImport.update({
-  id: '/',
-  path: '/',
+const TermsRoute = TermsRouteImport.update({
+  id: '/terms',
+  path: '/terms',
   getParentRoute: () => rootRouteImport,
 } as any)
-const StatsIndexRoute = StatsIndexRouteImport.update({
-  id: '/stats/',
-  path: '/stats/',
+const WorkshopsRoute = WorkshopsRouteImport.update({
+  id: '/workshops',
+  path: '/workshops',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ShowcaseIndexRoute = ShowcaseIndexRouteImport.update({
-  id: '/showcase/',
-  path: '/showcase/',
-  getParentRoute: () => rootRouteImport,
+const DotwellKnownOauthAuthorizationServerRoute =
+  DotwellKnownOauthAuthorizationServerRouteImport.update({
+    id: '/.well-known/oauth-authorization-server',
+    path: '/.well-known/oauth-authorization-server',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const LibraryLibraryIdRouteRoute = LibraryLibraryIdRouteRouteImport.update({
+  id: '/$libraryId',
+  path: '/$libraryId',
+  getParentRoute: () => LibraryRoute,
 } as any)
-const ShopIndexRoute = ShopIndexRouteImport.update({
+const AccountIndexRoute = AccountIndexRouteImport.update({
   id: '/',
   path: '/',
-  getParentRoute: () => ShopRoute,
+  getParentRoute: () => AccountRoute,
 } as any)
-const PartnersIndexRoute = PartnersIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => PartnersRoute,
+const AccountFeedbackRoute = AccountFeedbackRouteImport.update({
+  id: '/feedback',
+  path: '/feedback',
+  getParentRoute: () => AccountRoute,
 } as any)
-const DsIndexRoute = DsIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => DsRoute,
+const AccountIntegrationsRoute = AccountIntegrationsRouteImport.update({
+  id: '/integrations',
+  path: '/integrations',
+  getParentRoute: () => AccountRoute,
 } as any)
-const BlogIndexRoute = BlogIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => BlogRoute,
+const AccountNotesRoute = AccountNotesRouteImport.update({
+  id: '/notes',
+  path: '/notes',
+  getParentRoute: () => AccountRoute,
 } as any)
-const ApplicationStarterIndexRoute = ApplicationStarterIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => ApplicationStarterRoute,
+const AccountSubmissionsRoute = AccountSubmissionsRouteImport.update({
+  id: '/submissions',
+  path: '/submissions',
+  getParentRoute: () => AccountRoute,
 } as any)
 const AdminIndexRoute = AdminIndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => AdminRouteRoute,
 } as any)
-const AccountIndexRoute = AccountIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => AccountRoute,
-} as any)
-const StackCategoryRoute = StackCategoryRouteImport.update({
-  id: '/stack/$category',
-  path: '/stack/$category',
-  getParentRoute: () => rootRouteImport,
+const AdminAuditRoute = AdminAuditRouteImport.update({
+  id: '/audit',
+  path: '/audit',
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const ShowcaseSubmitRoute = ShowcaseSubmitRouteImport.update({
-  id: '/showcase/submit',
-  path: '/showcase/submit',
-  getParentRoute: () => rootRouteImport,
+const AdminDocsRoute = AdminDocsRouteImport.update({
+  id: '/docs',
+  path: '/docs',
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const ShowcaseIdRoute = ShowcaseIdRouteImport.update({
-  id: '/showcase/$id',
-  path: '/showcase/$id',
-  getParentRoute: () => rootRouteImport,
+const AdminGithubStatsRoute = AdminGithubStatsRouteImport.update({
+  id: '/github-stats',
+  path: '/github-stats',
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const ShopSearchRoute = ShopSearchRouteImport.update({
-  id: '/search',
-  path: '/search',
-  getParentRoute: () => ShopRoute,
+const AdminIntentRoute = AdminIntentRouteImport.update({
+  id: '/intent',
+  path: '/intent',
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const ShopCartRoute = ShopCartRouteImport.update({
-  id: '/cart',
-  path: '/cart',
-  getParentRoute: () => ShopRoute,
+const AdminLoginsRoute = AdminLoginsRouteImport.update({
+  id: '/logins',
+  path: '/logins',
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const ShopHandleRoute = ShopHandleRouteImport.update({
-  id: '/$handle',
-  path: '/$handle',
-  getParentRoute: () => ShopRoute,
+const AdminNpmStatsRoute = AdminNpmStatsRouteImport.update({
+  id: '/npm-stats',
+  path: '/npm-stats',
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const PartnersRenderRoute = PartnersRenderRouteImport.update({
-  id: '/render',
-  path: '/render',
-  getParentRoute: () => PartnersRoute,
+const AdminUsersRoute = AdminUsersRouteImport.update({
+  id: '/users',
+  path: '/users',
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const PartnersRailwayRoute = PartnersRailwayRouteImport.update({
-  id: '/railway',
-  path: '/railway',
-  getParentRoute: () => PartnersRoute,
+const ApiUploadthingRoute = ApiUploadthingRouteImport.update({
+  id: '/api/uploadthing',
+  path: '/api/uploadthing',
+  getParentRoute: () => rootRouteImport,
 } as any)
-const PartnersNetlifyRoute = PartnersNetlifyRouteImport.update({
-  id: '/netlify',
-  path: '/netlify',
-  getParentRoute: () => PartnersRoute,
+const ApplicationStarterIndexRoute = ApplicationStarterIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => ApplicationStarterRoute,
 } as any)
-const PartnersPartnerRoute = PartnersPartnerRouteImport.update({
-  id: '/$partner',
-  path: '/$partner',
-  getParentRoute: () => PartnersRoute,
+const ApplicationStarterDocsRoute = ApplicationStarterDocsRouteImport.update({
+  id: '/docs',
+  path: '/docs',
+  getParentRoute: () => ApplicationStarterRoute,
 } as any)
-const OauthTokenRoute = OauthTokenRouteImport.update({
-  id: '/oauth/token',
-  path: '/oauth/token',
+const AuthCliRoute = AuthCliRouteImport.update({
+  id: '/auth/cli',
+  path: '/auth/cli',
   getParentRoute: () => rootRouteImport,
 } as any)
-const OauthRegisterRoute = OauthRegisterRouteImport.update({
-  id: '/oauth/register',
-  path: '/oauth/register',
+const AuthPopupSuccessRoute = AuthPopupSuccessRouteImport.update({
+  id: '/auth/popup-success',
+  path: '/auth/popup-success',
   getParentRoute: () => rootRouteImport,
 } as any)
-const OauthAuthorizeRoute = OauthAuthorizeRouteImport.update({
-  id: '/oauth/authorize',
-  path: '/oauth/authorize',
+const AuthSignoutRoute = AuthSignoutRouteImport.update({
+  id: '/auth/signout',
+  path: '/auth/signout',
   getParentRoute: () => rootRouteImport,
 } as any)
-const LibrariesFrameworkRoute = LibrariesFrameworkRouteImport.update({
-  id: '/libraries_/$framework',
-  path: '/libraries/$framework',
+const BlogIndexRoute = BlogIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => BlogRoute,
+} as any)
+const BlogSplatRoute = BlogSplatRouteImport.update({
+  id: '/$',
+  path: '/$',
+  getParentRoute: () => BlogRoute,
+} as any)
+const BuilderIdRoute = BuilderIdRouteImport.update({
+  id: '/builder_/$id',
+  path: '/builder/$id',
   getParentRoute: () => rootRouteImport,
 } as any)
-const DsTypographyRoute = DsTypographyRouteImport.update({
-  id: '/typography',
-  path: '/typography',
-  getParentRoute: () => DsRoute,
+const BuilderAiRoute = BuilderAiRouteImport.update({
+  id: '/builder_/ai',
+  path: '/builder/ai',
+  getParentRoute: () => rootRouteImport,
 } as any)
-const DsTakeoverRoute = DsTakeoverRouteImport.update({
-  id: '/takeover',
-  path: '/takeover',
-  getParentRoute: () => DsRoute,
+const BuilderEsbuildRoute = BuilderEsbuildRouteImport.update({
+  id: '/builder_/esbuild',
+  path: '/builder/esbuild',
+  getParentRoute: () => rootRouteImport,
 } as any)
-const DsTabsRoute = DsTabsRouteImport.update({
-  id: '/tabs',
-  path: '/tabs',
-  getParentRoute: () => DsRoute,
+const BuilderLlmsDottxtRoute = BuilderLlmsDottxtRouteImport.update({
+  id: '/builder_/llms.txt',
+  path: '/builder/llms.txt',
+  getParentRoute: () => rootRouteImport,
 } as any)
-const DsStatsRoute = DsStatsRouteImport.update({
-  id: '/stats',
-  path: '/stats',
-  getParentRoute: () => DsRoute,
+const BuilderNewRoute = BuilderNewRouteImport.update({
+  id: '/builder_/new',
+  path: '/builder/new',
+  getParentRoute: () => rootRouteImport,
 } as any)
-const DsSpinnerRoute = DsSpinnerRouteImport.update({
-  id: '/spinner',
-  path: '/spinner',
+const DsIndexRoute = DsIndexRouteImport.update({
+  id: '/',
+  path: '/',
   getParentRoute: () => DsRoute,
 } as any)
-const DsShadowsRoute = DsShadowsRouteImport.update({
-  id: '/shadows',
-  path: '/shadows',
+const DsAvatarRoute = DsAvatarRouteImport.update({
+  id: '/avatar',
+  path: '/avatar',
   getParentRoute: () => DsRoute,
 } as any)
-const DsSemanticRoute = DsSemanticRouteImport.update({
-  id: '/semantic',
-  path: '/semantic',
+const DsBadgesRoute = DsBadgesRouteImport.update({
+  id: '/badges',
+  path: '/badges',
   getParentRoute: () => DsRoute,
 } as any)
-const DsPartnerRailRoute = DsPartnerRailRouteImport.update({
-  id: '/partner-rail',
-  path: '/partner-rail',
+const DsBreadcrumbsRoute = DsBreadcrumbsRouteImport.update({
+  id: '/breadcrumbs',
+  path: '/breadcrumbs',
   getParentRoute: () => DsRoute,
 } as any)
-const DsPanelRoute = DsPanelRouteImport.update({
-  id: '/panel',
-  path: '/panel',
+const DsButtonsRoute = DsButtonsRouteImport.update({
+  id: '/buttons',
+  path: '/buttons',
   getParentRoute: () => DsRoute,
 } as any)
-const DsPaletteRoute = DsPaletteRouteImport.update({
-  id: '/palette',
-  path: '/palette',
+const DsCardsRoute = DsCardsRouteImport.update({
+  id: '/cards',
+  path: '/cards',
   getParentRoute: () => DsRoute,
 } as any)
-const DsPageHeaderRoute = DsPageHeaderRouteImport.update({
-  id: '/page-header',
-  path: '/page-header',
+const DsColorsRoute = DsColorsRouteImport.update({
+  id: '/colors',
+  path: '/colors',
   getParentRoute: () => DsRoute,
 } as any)
-const DsOverlaysRoute = DsOverlaysRouteImport.update({
-  id: '/overlays',
-  path: '/overlays',
+const DsDialogRoute = DsDialogRouteImport.update({
+  id: '/dialog',
+  path: '/dialog',
   getParentRoute: () => DsRoute,
 } as any)
-const DsNavbarRoute = DsNavbarRouteImport.update({
-  id: '/navbar',
-  path: '/navbar',
+const DsDrawerRoute = DsDrawerRouteImport.update({
+  id: '/drawer',
+  path: '/drawer',
   getParentRoute: () => DsRoute,
 } as any)
-const DsMaintainersRoute = DsMaintainersRouteImport.update({
-  id: '/maintainers',
-  path: '/maintainers',
+const DsDropdownRoute = DsDropdownRouteImport.update({
+  id: '/dropdown',
+  path: '/dropdown',
   getParentRoute: () => DsRoute,
 } as any)
-const DsLogosRoute = DsLogosRouteImport.update({
-  id: '/logos',
-  path: '/logos',
+const DsEffectsRoute = DsEffectsRouteImport.update({
+  id: '/effects',
+  path: '/effects',
   getParentRoute: () => DsRoute,
 } as any)
-const DsInputsRoute = DsInputsRouteImport.update({
-  id: '/inputs',
-  path: '/inputs',
+const DsEyebrowRoute = DsEyebrowRouteImport.update({
+  id: '/eyebrow',
+  path: '/eyebrow',
   getParentRoute: () => DsRoute,
 } as any)
 const DsIconographyRoute = DsIconographyRouteImport.update({
@@ -603,304 +609,321 @@ const DsIconographyRoute = DsIconographyRouteImport.update({
 } as any).lazy(() =>
   import('./routes/ds.iconography.lazy').then((d) => d.Route),
 )
-const DsEyebrowRoute = DsEyebrowRouteImport.update({
-  id: '/eyebrow',
-  path: '/eyebrow',
+const DsInputsRoute = DsInputsRouteImport.update({
+  id: '/inputs',
+  path: '/inputs',
   getParentRoute: () => DsRoute,
 } as any)
-const DsEffectsRoute = DsEffectsRouteImport.update({
-  id: '/effects',
-  path: '/effects',
+const DsLogosRoute = DsLogosRouteImport.update({
+  id: '/logos',
+  path: '/logos',
   getParentRoute: () => DsRoute,
 } as any)
-const DsDropdownRoute = DsDropdownRouteImport.update({
-  id: '/dropdown',
-  path: '/dropdown',
+const DsMaintainersRoute = DsMaintainersRouteImport.update({
+  id: '/maintainers',
+  path: '/maintainers',
   getParentRoute: () => DsRoute,
 } as any)
-const DsDrawerRoute = DsDrawerRouteImport.update({
-  id: '/drawer',
-  path: '/drawer',
+const DsNavbarRoute = DsNavbarRouteImport.update({
+  id: '/navbar',
+  path: '/navbar',
   getParentRoute: () => DsRoute,
 } as any)
-const DsDialogRoute = DsDialogRouteImport.update({
-  id: '/dialog',
-  path: '/dialog',
+const DsOverlaysRoute = DsOverlaysRouteImport.update({
+  id: '/overlays',
+  path: '/overlays',
   getParentRoute: () => DsRoute,
 } as any)
-const DsColorsRoute = DsColorsRouteImport.update({
-  id: '/colors',
-  path: '/colors',
+const DsPageHeaderRoute = DsPageHeaderRouteImport.update({
+  id: '/page-header',
+  path: '/page-header',
   getParentRoute: () => DsRoute,
 } as any)
-const DsCardsRoute = DsCardsRouteImport.update({
-  id: '/cards',
-  path: '/cards',
+const DsPaletteRoute = DsPaletteRouteImport.update({
+  id: '/palette',
+  path: '/palette',
   getParentRoute: () => DsRoute,
 } as any)
-const DsButtonsRoute = DsButtonsRouteImport.update({
-  id: '/buttons',
-  path: '/buttons',
+const DsPanelRoute = DsPanelRouteImport.update({
+  id: '/panel',
+  path: '/panel',
   getParentRoute: () => DsRoute,
 } as any)
-const DsBreadcrumbsRoute = DsBreadcrumbsRouteImport.update({
-  id: '/breadcrumbs',
-  path: '/breadcrumbs',
+const DsPartnerRailRoute = DsPartnerRailRouteImport.update({
+  id: '/partner-rail',
+  path: '/partner-rail',
   getParentRoute: () => DsRoute,
 } as any)
-const DsBadgesRoute = DsBadgesRouteImport.update({
-  id: '/badges',
-  path: '/badges',
+const DsSemanticRoute = DsSemanticRouteImport.update({
+  id: '/semantic',
+  path: '/semantic',
   getParentRoute: () => DsRoute,
 } as any)
-const DsAvatarRoute = DsAvatarRouteImport.update({
-  id: '/avatar',
-  path: '/avatar',
+const DsShadowsRoute = DsShadowsRouteImport.update({
+  id: '/shadows',
+  path: '/shadows',
   getParentRoute: () => DsRoute,
 } as any)
-const BuilderNewRoute = BuilderNewRouteImport.update({
-  id: '/builder_/new',
-  path: '/builder/new',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const BuilderLlmsDottxtRoute = BuilderLlmsDottxtRouteImport.update({
-  id: '/builder_/llms.txt',
-  path: '/builder/llms.txt',
-  getParentRoute: () => rootRouteImport,
+const DsSpinnerRoute = DsSpinnerRouteImport.update({
+  id: '/spinner',
+  path: '/spinner',
+  getParentRoute: () => DsRoute,
 } as any)
-const BuilderEsbuildRoute = BuilderEsbuildRouteImport.update({
-  id: '/builder_/esbuild',
-  path: '/builder/esbuild',
-  getParentRoute: () => rootRouteImport,
+const DsStatsRoute = DsStatsRouteImport.update({
+  id: '/stats',
+  path: '/stats',
+  getParentRoute: () => DsRoute,
 } as any)
-const BuilderAiRoute = BuilderAiRouteImport.update({
-  id: '/builder_/ai',
-  path: '/builder/ai',
-  getParentRoute: () => rootRouteImport,
+const DsTabsRoute = DsTabsRouteImport.update({
+  id: '/tabs',
+  path: '/tabs',
+  getParentRoute: () => DsRoute,
 } as any)
-const BuilderIdRoute = BuilderIdRouteImport.update({
-  id: '/builder_/$id',
-  path: '/builder/$id',
-  getParentRoute: () => rootRouteImport,
+const DsTakeoverRoute = DsTakeoverRouteImport.update({
+  id: '/takeover',
+  path: '/takeover',
+  getParentRoute: () => DsRoute,
 } as any)
-const BlogSplatRoute = BlogSplatRouteImport.update({
-  id: '/$',
-  path: '/$',
-  getParentRoute: () => BlogRoute,
+const DsTypographyRoute = DsTypographyRouteImport.update({
+  id: '/typography',
+  path: '/typography',
+  getParentRoute: () => DsRoute,
 } as any)
-const AuthSignoutRoute = AuthSignoutRouteImport.update({
-  id: '/auth/signout',
-  path: '/auth/signout',
+const LibrariesFrameworkRoute = LibrariesFrameworkRouteImport.update({
+  id: '/libraries_/$framework',
+  path: '/libraries/$framework',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AuthPopupSuccessRoute = AuthPopupSuccessRouteImport.update({
-  id: '/auth/popup-success',
-  path: '/auth/popup-success',
+const OauthAuthorizeRoute = OauthAuthorizeRouteImport.update({
+  id: '/oauth/authorize',
+  path: '/oauth/authorize',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AuthCliRoute = AuthCliRouteImport.update({
-  id: '/auth/cli',
-  path: '/auth/cli',
+const OauthRegisterRoute = OauthRegisterRouteImport.update({
+  id: '/oauth/register',
+  path: '/oauth/register',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ApplicationStarterDocsRoute = ApplicationStarterDocsRouteImport.update({
-  id: '/docs',
-  path: '/docs',
-  getParentRoute: () => ApplicationStarterRoute,
-} as any)
-const ApiUploadthingRoute = ApiUploadthingRouteImport.update({
-  id: '/api/uploadthing',
-  path: '/api/uploadthing',
+const OauthTokenRoute = OauthTokenRouteImport.update({
+  id: '/oauth/token',
+  path: '/oauth/token',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AdminUsersRoute = AdminUsersRouteImport.update({
-  id: '/users',
-  path: '/users',
-  getParentRoute: () => AdminRouteRoute,
-} as any)
-const AdminNpmStatsRoute = AdminNpmStatsRouteImport.update({
-  id: '/npm-stats',
-  path: '/npm-stats',
-  getParentRoute: () => AdminRouteRoute,
+const PartnersIndexRoute = PartnersIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => PartnersRoute,
 } as any)
-const AdminLoginsRoute = AdminLoginsRouteImport.update({
-  id: '/logins',
-  path: '/logins',
-  getParentRoute: () => AdminRouteRoute,
+const PartnersPartnerRoute = PartnersPartnerRouteImport.update({
+  id: '/$partner',
+  path: '/$partner',
+  getParentRoute: () => PartnersRoute,
 } as any)
-const AdminIntentRoute = AdminIntentRouteImport.update({
-  id: '/intent',
-  path: '/intent',
-  getParentRoute: () => AdminRouteRoute,
+const PartnersNetlifyRoute = PartnersNetlifyRouteImport.update({
+  id: '/netlify',
+  path: '/netlify',
+  getParentRoute: () => PartnersRoute,
 } as any)
-const AdminGithubStatsRoute = AdminGithubStatsRouteImport.update({
-  id: '/github-stats',
-  path: '/github-stats',
-  getParentRoute: () => AdminRouteRoute,
+const PartnersRailwayRoute = PartnersRailwayRouteImport.update({
+  id: '/railway',
+  path: '/railway',
+  getParentRoute: () => PartnersRoute,
 } as any)
-const AdminDocsRoute = AdminDocsRouteImport.update({
-  id: '/docs',
-  path: '/docs',
-  getParentRoute: () => AdminRouteRoute,
+const PartnersRenderRoute = PartnersRenderRouteImport.update({
+  id: '/render',
+  path: '/render',
+  getParentRoute: () => PartnersRoute,
 } as any)
-const AdminAuditRoute = AdminAuditRouteImport.update({
-  id: '/audit',
-  path: '/audit',
-  getParentRoute: () => AdminRouteRoute,
+const ShopIndexRoute = ShopIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => ShopRoute,
 } as any)
-const AccountSubmissionsRoute = AccountSubmissionsRouteImport.update({
-  id: '/submissions',
-  path: '/submissions',
-  getParentRoute: () => AccountRoute,
+const ShopHandleRoute = ShopHandleRouteImport.update({
+  id: '/$handle',
+  path: '/$handle',
+  getParentRoute: () => ShopRoute,
 } as any)
-const AccountNotesRoute = AccountNotesRouteImport.update({
-  id: '/notes',
-  path: '/notes',
-  getParentRoute: () => AccountRoute,
+const ShopCartRoute = ShopCartRouteImport.update({
+  id: '/cart',
+  path: '/cart',
+  getParentRoute: () => ShopRoute,
 } as any)
-const AccountIntegrationsRoute = AccountIntegrationsRouteImport.update({
-  id: '/integrations',
-  path: '/integrations',
-  getParentRoute: () => AccountRoute,
+const ShopSearchRoute = ShopSearchRouteImport.update({
+  id: '/search',
+  path: '/search',
+  getParentRoute: () => ShopRoute,
 } as any)
-const AccountFeedbackRoute = AccountFeedbackRouteImport.update({
-  id: '/feedback',
-  path: '/feedback',
-  getParentRoute: () => AccountRoute,
+const ShowcaseIndexRoute = ShowcaseIndexRouteImport.update({
+  id: '/showcase/',
+  path: '/showcase/',
+  getParentRoute: () => rootRouteImport,
 } as any)
-const DotwellKnownOauthAuthorizationServerRoute =
-  DotwellKnownOauthAuthorizationServerRouteImport.update({
-    id: '/.well-known/oauth-authorization-server',
-    path: '/.well-known/oauth-authorization-server',
-    getParentRoute: () => rootRouteImport,
-  } as any)
-const LibraryLibraryIdRouteRoute = LibraryLibraryIdRouteRouteImport.update({
-  id: '/$libraryId',
-  path: '/$libraryId',
-  getParentRoute: () => LibraryRoute,
+const ShowcaseIdRoute = ShowcaseIdRouteImport.update({
+  id: '/showcase/$id',
+  path: '/showcase/$id',
+  getParentRoute: () => rootRouteImport,
 } as any)
-const StatsNpmIndexRoute = StatsNpmIndexRouteImport.update({
-  id: '/stats/npm/',
-  path: '/stats/npm/',
+const ShowcaseSubmitRoute = ShowcaseSubmitRouteImport.update({
+  id: '/showcase/submit',
+  path: '/showcase/submit',
   getParentRoute: () => rootRouteImport,
 } as any)
-const IntentRegistryIndexRoute = IntentRegistryIndexRouteImport.update({
-  id: '/intent/registry/',
-  path: '/intent/registry/',
+const StackCategoryRoute = StackCategoryRouteImport.update({
+  id: '/stack/$category',
+  path: '/stack/$category',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ApiMcpIndexRoute = ApiMcpIndexRouteImport.update({
-  id: '/api/mcp/',
-  path: '/api/mcp/',
+const StatsIndexRoute = StatsIndexRouteImport.update({
+  id: '/stats/',
+  path: '/stats/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AdminShowcasesIndexRoute = AdminShowcasesIndexRouteImport.update({
-  id: '/showcases/',
-  path: '/showcases/',
-  getParentRoute: () => AdminRouteRoute,
+const LibraryLibraryIdIndexRoute = LibraryLibraryIdIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => LibraryLibraryIdRouteRoute,
 } as any)
-const AdminRolesIndexRoute = AdminRolesIndexRouteImport.update({
-  id: '/roles/',
-  path: '/roles/',
-  getParentRoute: () => AdminRouteRoute,
+const LibraryLibraryIdVersionRoute = LibraryLibraryIdVersionRouteImport.update({
+  id: '/$version',
+  path: '/$version',
+  getParentRoute: () => LibraryLibraryIdRouteRoute,
 } as any)
-const AdminNotesIndexRoute = AdminNotesIndexRouteImport.update({
-  id: '/notes/',
-  path: '/notes/',
-  getParentRoute: () => AdminRouteRoute,
+const LibraryChartsCatalogRoute = LibraryChartsCatalogRouteImport.update({
+  id: '/charts/catalog',
+  path: '/charts/catalog',
+  getParentRoute: () => LibraryRoute,
 } as any)
 const AdminFeedbackIndexRoute = AdminFeedbackIndexRouteImport.update({
   id: '/feedback/',
   path: '/feedback/',
   getParentRoute: () => AdminRouteRoute,
 } as any)
-const LibraryLibraryIdIndexRoute = LibraryLibraryIdIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => LibraryLibraryIdRouteRoute,
-} as any)
-const StatsNpmEmbedRoute = StatsNpmEmbedRouteImport.update({
-  id: '/stats/npm/embed',
-  path: '/stats/npm/embed',
-  getParentRoute: () => rootRouteImport,
+const AdminFeedbackIdRoute = AdminFeedbackIdRouteImport.update({
+  id: '/feedback_/$id',
+  path: '/feedback/$id',
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const StatsNpmPackagesRoute = StatsNpmPackagesRouteImport.update({
-  id: '/stats/npm/$packages',
-  path: '/stats/npm/$packages',
-  getParentRoute: () => rootRouteImport,
+const AdminNotesIndexRoute = AdminNotesIndexRouteImport.update({
+  id: '/notes/',
+  path: '/notes/',
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const ShowcaseEditIdRoute = ShowcaseEditIdRouteImport.update({
-  id: '/showcase/edit/$id',
-  path: '/showcase/edit/$id',
-  getParentRoute: () => rootRouteImport,
+const AdminRolesIndexRoute = AdminRolesIndexRouteImport.update({
+  id: '/roles/',
+  path: '/roles/',
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const ShopProductsHandleRoute = ShopProductsHandleRouteImport.update({
-  id: '/products/$handle',
-  path: '/products/$handle',
-  getParentRoute: () => ShopRoute,
+const AdminRolesRoleIdRoute = AdminRolesRoleIdRouteImport.update({
+  id: '/roles/$roleId',
+  path: '/roles/$roleId',
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const ShopPoliciesHandleRoute = ShopPoliciesHandleRouteImport.update({
-  id: '/policies/$handle',
-  path: '/policies/$handle',
-  getParentRoute: () => ShopRoute,
+const AdminShowcasesIndexRoute = AdminShowcasesIndexRouteImport.update({
+  id: '/showcases/',
+  path: '/showcases/',
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const ShopPagesHandleRoute = ShopPagesHandleRouteImport.update({
-  id: '/pages/$handle',
-  path: '/pages/$handle',
-  getParentRoute: () => ShopRoute,
+const AdminShowcasesIdRoute = AdminShowcasesIdRouteImport.update({
+  id: '/showcases_/$id',
+  path: '/showcases/$id',
+  getParentRoute: () => AdminRouteRoute,
 } as any)
-const ShopCollectionsHandleRoute = ShopCollectionsHandleRouteImport.update({
-  id: '/collections/$handle',
-  path: '/collections/$handle',
-  getParentRoute: () => ShopRoute,
+const AdminUsersUserIdRoute = AdminUsersUserIdRouteImport.update({
+  id: '/$userId',
+  path: '/$userId',
+  getParentRoute: () => AdminUsersRoute,
 } as any)
-const IntentRegistryPackageNameRoute =
-  IntentRegistryPackageNameRouteImport.update({
-    id: '/intent/registry/$packageName',
-    path: '/intent/registry/$packageName',
+const ApiApplicationStarterCompileRoute =
+  ApiApplicationStarterCompileRouteImport.update({
+    id: '/api/application-starter/compile',
+    path: '/api/application-starter/compile',
     getParentRoute: () => rootRouteImport,
   } as any)
-const ChartsCatalogCatalogDotjsonRoute =
-  ChartsCatalogCatalogDotjsonRouteImport.update({
-    id: '/charts/catalog_/catalog.json',
-    path: '/charts/catalog/catalog.json',
+const ApiApplicationStarterCompileAttributedRoute =
+  ApiApplicationStarterCompileAttributedRouteImport.update({
+    id: '/api/application-starter/compile-attributed',
+    path: '/api/application-starter/compile-attributed',
     getParentRoute: () => rootRouteImport,
   } as any)
-const BuilderPHashRoute = BuilderPHashRouteImport.update({
-  id: '/builder_/p/$hash',
-  path: '/builder/p/$hash',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const AuthProviderStartRoute = AuthProviderStartRouteImport.update({
-  id: '/auth/$provider/start',
-  path: '/auth/$provider/start',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const ApiReadmeChar123Char125DotpngRoute =
-  ApiReadmeChar123Char125DotpngRouteImport.update({
-    id: '/api/readme/{$}.png',
-    path: '/api/readme/{$}.png',
+const ApiApplicationStarterDownloadRoute =
+  ApiApplicationStarterDownloadRouteImport.update({
+    id: '/api/application-starter/download',
+    path: '/api/application-starter/download',
     getParentRoute: () => rootRouteImport,
   } as any)
-const ApiOgChar123Char125DotpngRoute =
-  ApiOgChar123Char125DotpngRouteImport.update({
-    id: '/api/og/{$}.png',
-    path: '/api/og/{$}.png',
+const ApiApplicationStarterFeatureArtifactsRoute =
+  ApiApplicationStarterFeatureArtifactsRouteImport.update({
+    id: '/api/application-starter/feature-artifacts',
+    path: '/api/application-starter/feature-artifacts',
     getParentRoute: () => rootRouteImport,
   } as any)
-const ApiMcpSplatRoute = ApiMcpSplatRouteImport.update({
-  id: '/api/mcp/$',
-  path: '/api/mcp/$',
+const ApiApplicationStarterFeaturesRoute =
+  ApiApplicationStarterFeaturesRouteImport.update({
+    id: '/api/application-starter/features',
+    path: '/api/application-starter/features',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiApplicationStarterLoadRemoteAddonRoute =
+  ApiApplicationStarterLoadRemoteAddonRouteImport.update({
+    id: '/api/application-starter/load-remote-addon',
+    path: '/api/application-starter/load-remote-addon',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiApplicationStarterLoadRemoteTemplateRoute =
+  ApiApplicationStarterLoadRemoteTemplateRouteImport.update({
+    id: '/api/application-starter/load-remote-template',
+    path: '/api/application-starter/load-remote-template',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiApplicationStarterLoadTemplateRoute =
+  ApiApplicationStarterLoadTemplateRouteImport.update({
+    id: '/api/application-starter/load-template',
+    path: '/api/application-starter/load-template',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiApplicationStarterResolveRoute =
+  ApiApplicationStarterResolveRouteImport.update({
+    id: '/api/application-starter/resolve',
+    path: '/api/application-starter/resolve',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiApplicationStarterSuggestRoute =
+  ApiApplicationStarterSuggestRouteImport.update({
+    id: '/api/application-starter/suggest',
+    path: '/api/application-starter/suggest',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiApplicationStarterValidateRoute =
+  ApiApplicationStarterValidateRouteImport.update({
+    id: '/api/application-starter/validate',
+    path: '/api/application-starter/validate',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiBuilderAssistRoute = ApiBuilderAssistRouteImport.update({
+  id: '/api/builder/assist',
+  path: '/api/builder/assist',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiBuilderProjectSnapshotsRoute =
+  ApiBuilderProjectSnapshotsRouteImport.update({
+    id: '/api/builder/project-snapshots',
+    path: '/api/builder/project-snapshots',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiBuilderProjectsRoute = ApiBuilderProjectsRouteImport.update({
+  id: '/api/builder/projects',
+  path: '/api/builder/projects',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ApiGithubWebhookRoute = ApiGithubWebhookRouteImport.update({
-  id: '/api/github/webhook',
-  path: '/api/github/webhook',
+const ApiDataLibrariesRoute = ApiDataLibrariesRouteImport.update({
+  id: '/api/data/libraries',
+  path: '/api/data/libraries',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ApiExampleDeployRoute = ApiExampleDeployRouteImport.update({
-  id: '/api/example/deploy',
-  path: '/api/example/deploy',
+const ApiDataPartnersRoute = ApiDataPartnersRouteImport.update({
+  id: '/api/data/partners',
+  path: '/api/data/partners',
   getParentRoute: () => rootRouteImport,
 } as any)
 const ApiDiscordInteractionsRoute = ApiDiscordInteractionsRouteImport.update({
@@ -908,186 +931,188 @@ const ApiDiscordInteractionsRoute = ApiDiscordInteractionsRouteImport.update({
   path: '/api/discord/interactions',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ApiDataPartnersRoute = ApiDataPartnersRouteImport.update({
-  id: '/api/data/partners',
-  path: '/api/data/partners',
+const ApiExampleDeployRoute = ApiExampleDeployRouteImport.update({
+  id: '/api/example/deploy',
+  path: '/api/example/deploy',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ApiDataLibrariesRoute = ApiDataLibrariesRouteImport.update({
-  id: '/api/data/libraries',
-  path: '/api/data/libraries',
+const ApiGithubWebhookRoute = ApiGithubWebhookRouteImport.update({
+  id: '/api/github/webhook',
+  path: '/api/github/webhook',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ApiBuilderProjectsRoute = ApiBuilderProjectsRouteImport.update({
-  id: '/api/builder/projects',
-  path: '/api/builder/projects',
+const ApiMcpIndexRoute = ApiMcpIndexRouteImport.update({
+  id: '/api/mcp/',
+  path: '/api/mcp/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ApiBuilderProjectSnapshotsRoute =
-  ApiBuilderProjectSnapshotsRouteImport.update({
-    id: '/api/builder/project-snapshots',
-    path: '/api/builder/project-snapshots',
-    getParentRoute: () => rootRouteImport,
-  } as any)
-const ApiBuilderAssistRoute = ApiBuilderAssistRouteImport.update({
-  id: '/api/builder/assist',
-  path: '/api/builder/assist',
+const ApiMcpSplatRoute = ApiMcpSplatRouteImport.update({
+  id: '/api/mcp/$',
+  path: '/api/mcp/$',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ApiApplicationStarterValidateRoute =
-  ApiApplicationStarterValidateRouteImport.update({
-    id: '/api/application-starter/validate',
-    path: '/api/application-starter/validate',
-    getParentRoute: () => rootRouteImport,
-  } as any)
-const ApiApplicationStarterSuggestRoute =
-  ApiApplicationStarterSuggestRouteImport.update({
-    id: '/api/application-starter/suggest',
-    path: '/api/application-starter/suggest',
-    getParentRoute: () => rootRouteImport,
-  } as any)
-const ApiApplicationStarterResolveRoute =
-  ApiApplicationStarterResolveRouteImport.update({
-    id: '/api/application-starter/resolve',
-    path: '/api/application-starter/resolve',
-    getParentRoute: () => rootRouteImport,
-  } as any)
-const ApiApplicationStarterLoadTemplateRoute =
-  ApiApplicationStarterLoadTemplateRouteImport.update({
-    id: '/api/application-starter/load-template',
-    path: '/api/application-starter/load-template',
-    getParentRoute: () => rootRouteImport,
-  } as any)
-const ApiApplicationStarterLoadRemoteTemplateRoute =
-  ApiApplicationStarterLoadRemoteTemplateRouteImport.update({
-    id: '/api/application-starter/load-remote-template',
-    path: '/api/application-starter/load-remote-template',
-    getParentRoute: () => rootRouteImport,
-  } as any)
-const ApiApplicationStarterLoadRemoteAddonRoute =
-  ApiApplicationStarterLoadRemoteAddonRouteImport.update({
-    id: '/api/application-starter/load-remote-addon',
-    path: '/api/application-starter/load-remote-addon',
-    getParentRoute: () => rootRouteImport,
-  } as any)
-const ApiApplicationStarterFeaturesRoute =
-  ApiApplicationStarterFeaturesRouteImport.update({
-    id: '/api/application-starter/features',
-    path: '/api/application-starter/features',
-    getParentRoute: () => rootRouteImport,
-  } as any)
-const ApiApplicationStarterFeatureArtifactsRoute =
-  ApiApplicationStarterFeatureArtifactsRouteImport.update({
-    id: '/api/application-starter/feature-artifacts',
-    path: '/api/application-starter/feature-artifacts',
+const ApiOgChar123Char125DotpngRoute =
+  ApiOgChar123Char125DotpngRouteImport.update({
+    id: '/api/og/{$}.png',
+    path: '/api/og/{$}.png',
     getParentRoute: () => rootRouteImport,
   } as any)
-const ApiApplicationStarterDownloadRoute =
-  ApiApplicationStarterDownloadRouteImport.update({
-    id: '/api/application-starter/download',
-    path: '/api/application-starter/download',
+const ApiReadmeChar123Char125DotpngRoute =
+  ApiReadmeChar123Char125DotpngRouteImport.update({
+    id: '/api/readme/{$}.png',
+    path: '/api/readme/{$}.png',
     getParentRoute: () => rootRouteImport,
   } as any)
-const ApiApplicationStarterCompileAttributedRoute =
-  ApiApplicationStarterCompileAttributedRouteImport.update({
-    id: '/api/application-starter/compile-attributed',
-    path: '/api/application-starter/compile-attributed',
+const AuthProviderStartRoute = AuthProviderStartRouteImport.update({
+  id: '/auth/$provider/start',
+  path: '/auth/$provider/start',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const BuilderPHashRoute = BuilderPHashRouteImport.update({
+  id: '/builder_/p/$hash',
+  path: '/builder/p/$hash',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ChartsCatalogCatalogDotjsonRoute =
+  ChartsCatalogCatalogDotjsonRouteImport.update({
+    id: '/charts/catalog_/catalog.json',
+    path: '/charts/catalog/catalog.json',
     getParentRoute: () => rootRouteImport,
   } as any)
-const ApiApplicationStarterCompileRoute =
-  ApiApplicationStarterCompileRouteImport.update({
-    id: '/api/application-starter/compile',
-    path: '/api/application-starter/compile',
+const IntentRegistryIndexRoute = IntentRegistryIndexRouteImport.update({
+  id: '/intent/registry/',
+  path: '/intent/registry/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IntentRegistryPackageNameRoute =
+  IntentRegistryPackageNameRouteImport.update({
+    id: '/intent/registry/$packageName',
+    path: '/intent/registry/$packageName',
     getParentRoute: () => rootRouteImport,
   } as any)
-const AdminUsersUserIdRoute = AdminUsersUserIdRouteImport.update({
-  id: '/$userId',
-  path: '/$userId',
-  getParentRoute: () => AdminUsersRoute,
+const ShopCollectionsHandleRoute = ShopCollectionsHandleRouteImport.update({
+  id: '/collections/$handle',
+  path: '/collections/$handle',
+  getParentRoute: () => ShopRoute,
 } as any)
-const AdminShowcasesIdRoute = AdminShowcasesIdRouteImport.update({
-  id: '/showcases_/$id',
-  path: '/showcases/$id',
-  getParentRoute: () => AdminRouteRoute,
+const ShopPagesHandleRoute = ShopPagesHandleRouteImport.update({
+  id: '/pages/$handle',
+  path: '/pages/$handle',
+  getParentRoute: () => ShopRoute,
 } as any)
-const AdminRolesRoleIdRoute = AdminRolesRoleIdRouteImport.update({
-  id: '/roles/$roleId',
-  path: '/roles/$roleId',
-  getParentRoute: () => AdminRouteRoute,
+const ShopPoliciesHandleRoute = ShopPoliciesHandleRouteImport.update({
+  id: '/policies/$handle',
+  path: '/policies/$handle',
+  getParentRoute: () => ShopRoute,
 } as any)
-const AdminFeedbackIdRoute = AdminFeedbackIdRouteImport.update({
-  id: '/feedback_/$id',
-  path: '/feedback/$id',
-  getParentRoute: () => AdminRouteRoute,
+const ShopProductsHandleRoute = ShopProductsHandleRouteImport.update({
+  id: '/products/$handle',
+  path: '/products/$handle',
+  getParentRoute: () => ShopRoute,
 } as any)
-const LibraryChartsCatalogRoute = LibraryChartsCatalogRouteImport.update({
-  id: '/charts/catalog',
-  path: '/charts/catalog',
-  getParentRoute: () => LibraryRoute,
+const ShowcaseEditIdRoute = ShowcaseEditIdRouteImport.update({
+  id: '/showcase/edit/$id',
+  path: '/showcase/edit/$id',
+  getParentRoute: () => rootRouteImport,
 } as any)
-const LibraryLibraryIdVersionRoute = LibraryLibraryIdVersionRouteImport.update({
-  id: '/$version',
-  path: '/$version',
-  getParentRoute: () => LibraryLibraryIdRouteRoute,
+const StatsNpmIndexRoute = StatsNpmIndexRouteImport.update({
+  id: '/stats/npm/',
+  path: '/stats/npm/',
+  getParentRoute: () => rootRouteImport,
 } as any)
-const IntentRegistryPackageNameIndexRoute =
-  IntentRegistryPackageNameIndexRouteImport.update({
+const StatsNpmPackagesRoute = StatsNpmPackagesRouteImport.update({
+  id: '/stats/npm/$packages',
+  path: '/stats/npm/$packages',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const StatsNpmEmbedRoute = StatsNpmEmbedRouteImport.update({
+  id: '/stats/npm/embed',
+  path: '/stats/npm/embed',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const LibraryLibraryIdVersionIndexRoute =
+  LibraryLibraryIdVersionIndexRouteImport.update({
     id: '/',
     path: '/',
-    getParentRoute: () => IntentRegistryPackageNameRoute,
+    getParentRoute: () => LibraryLibraryIdVersionRoute,
   } as any)
-const LibraryWorkflowVersionIndexRoute =
-  LibraryWorkflowVersionIndexRouteImport.update({
-    id: '/workflow/$version/',
-    path: '/workflow/$version/',
-    getParentRoute: () => LibraryRoute,
+const LibraryLibraryIdVersionDocsRoute =
+  LibraryLibraryIdVersionDocsRouteImport.update({
+    id: '/docs',
+    path: '/docs',
+    getParentRoute: () => LibraryLibraryIdVersionRoute,
   } as any)
-const LibraryVirtualVersionIndexRoute =
-  LibraryVirtualVersionIndexRouteImport.update({
-    id: '/virtual/$version/',
-    path: '/virtual/$version/',
-    getParentRoute: () => LibraryRoute,
+const LibraryLibraryIdVersionLlmsDottxtRoute =
+  LibraryLibraryIdVersionLlmsDottxtRouteImport.update({
+    id: '/llms.txt',
+    path: '/llms.txt',
+    getParentRoute: () => LibraryLibraryIdVersionRoute,
   } as any)
-const LibraryTableVersionIndexRoute =
-  LibraryTableVersionIndexRouteImport.update({
-    id: '/table/$version/',
-    path: '/table/$version/',
+const LibraryAiVersionIndexRoute = LibraryAiVersionIndexRouteImport.update({
+  id: '/ai/$version/',
+  path: '/ai/$version/',
+  getParentRoute: () => LibraryRoute,
+} as any)
+const LibraryChartsVersionIndexRoute =
+  LibraryChartsVersionIndexRouteImport.update({
+    id: '/charts/$version/',
+    path: '/charts/$version/',
     getParentRoute: () => LibraryRoute,
   } as any)
-const LibraryStoreVersionIndexRoute =
-  LibraryStoreVersionIndexRouteImport.update({
-    id: '/store/$version/',
-    path: '/store/$version/',
-    getParentRoute: () => LibraryRoute,
+const LibraryChartsCatalogIndexRoute =
+  LibraryChartsCatalogIndexRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => LibraryChartsCatalogRoute,
   } as any)
-const LibraryStartVersionIndexRoute =
-  LibraryStartVersionIndexRouteImport.update({
-    id: '/start/$version/',
-    path: '/start/$version/',
+const LibraryChartsCatalogAllRoute = LibraryChartsCatalogAllRouteImport.update({
+  id: '/all',
+  path: '/all',
+  getParentRoute: () => LibraryChartsCatalogRoute,
+} as any)
+const LibraryCliVersionIndexRoute = LibraryCliVersionIndexRouteImport.update({
+  id: '/cli/$version/',
+  path: '/cli/$version/',
+  getParentRoute: () => LibraryRoute,
+} as any)
+const LibraryConfigVersionIndexRoute =
+  LibraryConfigVersionIndexRouteImport.update({
+    id: '/config/$version/',
+    path: '/config/$version/',
     getParentRoute: () => LibraryRoute,
   } as any)
-const LibraryRouterVersionIndexRoute =
-  LibraryRouterVersionIndexRouteImport.update({
-    id: '/router/$version/',
-    path: '/router/$version/',
+const LibraryDbVersionIndexRoute = LibraryDbVersionIndexRouteImport.update({
+  id: '/db/$version/',
+  path: '/db/$version/',
+  getParentRoute: () => LibraryRoute,
+} as any)
+const LibraryDevtoolsVersionIndexRoute =
+  LibraryDevtoolsVersionIndexRouteImport.update({
+    id: '/devtools/$version/',
+    path: '/devtools/$version/',
     getParentRoute: () => LibraryRoute,
   } as any)
-const LibraryRangerVersionIndexRoute =
-  LibraryRangerVersionIndexRouteImport.update({
-    id: '/ranger/$version/',
-    path: '/ranger/$version/',
+const LibraryFormVersionIndexRoute = LibraryFormVersionIndexRouteImport.update({
+  id: '/form/$version/',
+  path: '/form/$version/',
+  getParentRoute: () => LibraryRoute,
+} as any)
+const LibraryHighlightVersionIndexRoute =
+  LibraryHighlightVersionIndexRouteImport.update({
+    id: '/highlight/$version/',
+    path: '/highlight/$version/',
     getParentRoute: () => LibraryRoute,
   } as any)
-const LibraryQueryVersionIndexRoute =
-  LibraryQueryVersionIndexRouteImport.update({
-    id: '/query/$version/',
-    path: '/query/$version/',
+const LibraryHotkeysVersionIndexRoute =
+  LibraryHotkeysVersionIndexRouteImport.update({
+    id: '/hotkeys/$version/',
+    path: '/hotkeys/$version/',
     getParentRoute: () => LibraryRoute,
   } as any)
-const LibraryPacerVersionIndexRoute =
-  LibraryPacerVersionIndexRouteImport.update({
-    id: '/pacer/$version/',
-    path: '/pacer/$version/',
+const LibraryIntentVersionIndexRoute =
+  LibraryIntentVersionIndexRouteImport.update({
+    id: '/intent/$version/',
+    path: '/intent/$version/',
     getParentRoute: () => LibraryRoute,
   } as any)
 const LibraryMarkdownVersionIndexRoute =
@@ -1096,200 +1121,139 @@ const LibraryMarkdownVersionIndexRoute =
     path: '/markdown/$version/',
     getParentRoute: () => LibraryRoute,
   } as any)
-const LibraryIntentVersionIndexRoute =
-  LibraryIntentVersionIndexRouteImport.update({
-    id: '/intent/$version/',
-    path: '/intent/$version/',
+const LibraryPacerVersionIndexRoute =
+  LibraryPacerVersionIndexRouteImport.update({
+    id: '/pacer/$version/',
+    path: '/pacer/$version/',
     getParentRoute: () => LibraryRoute,
   } as any)
-const LibraryHotkeysVersionIndexRoute =
-  LibraryHotkeysVersionIndexRouteImport.update({
-    id: '/hotkeys/$version/',
-    path: '/hotkeys/$version/',
+const LibraryQueryVersionIndexRoute =
+  LibraryQueryVersionIndexRouteImport.update({
+    id: '/query/$version/',
+    path: '/query/$version/',
     getParentRoute: () => LibraryRoute,
   } as any)
-const LibraryHighlightVersionIndexRoute =
-  LibraryHighlightVersionIndexRouteImport.update({
-    id: '/highlight/$version/',
-    path: '/highlight/$version/',
+const LibraryRangerVersionIndexRoute =
+  LibraryRangerVersionIndexRouteImport.update({
+    id: '/ranger/$version/',
+    path: '/ranger/$version/',
     getParentRoute: () => LibraryRoute,
   } as any)
-const LibraryFormVersionIndexRoute = LibraryFormVersionIndexRouteImport.update({
-  id: '/form/$version/',
-  path: '/form/$version/',
-  getParentRoute: () => LibraryRoute,
-} as any)
-const LibraryDevtoolsVersionIndexRoute =
-  LibraryDevtoolsVersionIndexRouteImport.update({
-    id: '/devtools/$version/',
-    path: '/devtools/$version/',
+const LibraryRouterVersionIndexRoute =
+  LibraryRouterVersionIndexRouteImport.update({
+    id: '/router/$version/',
+    path: '/router/$version/',
     getParentRoute: () => LibraryRoute,
   } as any)
-const LibraryDbVersionIndexRoute = LibraryDbVersionIndexRouteImport.update({
-  id: '/db/$version/',
-  path: '/db/$version/',
-  getParentRoute: () => LibraryRoute,
-} as any)
-const LibraryConfigVersionIndexRoute =
-  LibraryConfigVersionIndexRouteImport.update({
-    id: '/config/$version/',
-    path: '/config/$version/',
+const LibraryStartVersionIndexRoute =
+  LibraryStartVersionIndexRouteImport.update({
+    id: '/start/$version/',
+    path: '/start/$version/',
     getParentRoute: () => LibraryRoute,
   } as any)
-const LibraryCliVersionIndexRoute = LibraryCliVersionIndexRouteImport.update({
-  id: '/cli/$version/',
-  path: '/cli/$version/',
-  getParentRoute: () => LibraryRoute,
-} as any)
-const LibraryChartsCatalogIndexRoute =
-  LibraryChartsCatalogIndexRouteImport.update({
-    id: '/',
-    path: '/',
-    getParentRoute: () => LibraryChartsCatalogRoute,
-  } as any)
-const LibraryChartsVersionIndexRoute =
-  LibraryChartsVersionIndexRouteImport.update({
-    id: '/charts/$version/',
-    path: '/charts/$version/',
+const LibraryStoreVersionIndexRoute =
+  LibraryStoreVersionIndexRouteImport.update({
+    id: '/store/$version/',
+    path: '/store/$version/',
     getParentRoute: () => LibraryRoute,
   } as any)
-const LibraryAiVersionIndexRoute = LibraryAiVersionIndexRouteImport.update({
-  id: '/ai/$version/',
-  path: '/ai/$version/',
-  getParentRoute: () => LibraryRoute,
-} as any)
-const LibraryLibraryIdVersionIndexRoute =
-  LibraryLibraryIdVersionIndexRouteImport.update({
-    id: '/',
-    path: '/',
-    getParentRoute: () => LibraryLibraryIdVersionRoute,
+const LibraryTableVersionIndexRoute =
+  LibraryTableVersionIndexRouteImport.update({
+    id: '/table/$version/',
+    path: '/table/$version/',
+    getParentRoute: () => LibraryRoute,
   } as any)
-const IntentRegistryPackageNameChar123Char125DotmdRoute =
-  IntentRegistryPackageNameChar123Char125DotmdRouteImport.update({
-    id: '/{$}.md',
-    path: '/{$}.md',
-    getParentRoute: () => IntentRegistryPackageNameRoute,
+const LibraryVirtualVersionIndexRoute =
+  LibraryVirtualVersionIndexRouteImport.update({
+    id: '/virtual/$version/',
+    path: '/virtual/$version/',
+    getParentRoute: () => LibraryRoute,
   } as any)
-const IntentRegistryPackageNameSkillNameRoute =
-  IntentRegistryPackageNameSkillNameRouteImport.update({
-    id: '/$skillName',
-    path: '/$skillName',
-    getParentRoute: () => IntentRegistryPackageNameRoute,
+const LibraryWorkflowVersionIndexRoute =
+  LibraryWorkflowVersionIndexRouteImport.update({
+    id: '/workflow/$version/',
+    path: '/workflow/$version/',
+    getParentRoute: () => LibraryRoute,
   } as any)
-const ApiBuilderProjectsIdRoute = ApiBuilderProjectsIdRouteImport.update({
-  id: '/$id',
-  path: '/$id',
-  getParentRoute: () => ApiBuilderProjectsRoute,
-} as any)
-const ApiBuilderProjectSnapshotsHashRoute =
-  ApiBuilderProjectSnapshotsHashRouteImport.update({
-    id: '/$hash',
-    path: '/$hash',
-    getParentRoute: () => ApiBuilderProjectSnapshotsRoute,
+const ApiApplicationStarterDeployCheckNameRoute =
+  ApiApplicationStarterDeployCheckNameRouteImport.update({
+    id: '/api/application-starter/deploy/check-name',
+    path: '/api/application-starter/deploy/check-name',
+    getParentRoute: () => rootRouteImport,
   } as any)
-const ApiBuilderOpenrouterCallbackRoute =
-  ApiBuilderOpenrouterCallbackRouteImport.update({
-    id: '/api/builder/openrouter/callback',
-    path: '/api/builder/openrouter/callback',
+const ApiApplicationStarterDeployGithubRoute =
+  ApiApplicationStarterDeployGithubRouteImport.update({
+    id: '/api/application-starter/deploy/github',
+    path: '/api/application-starter/deploy/github',
     getParentRoute: () => rootRouteImport,
   } as any)
-const ApiAuthCliCreateTicketRoute = ApiAuthCliCreateTicketRouteImport.update({
-  id: '/api/auth/cli/create-ticket',
-  path: '/api/auth/cli/create-ticket',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const ApiAuthCallbackProviderRoute = ApiAuthCallbackProviderRouteImport.update({
   id: '/api/auth/callback/$provider',
   path: '/api/auth/callback/$provider',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ApiApplicationStarterDeployGithubRoute =
-  ApiApplicationStarterDeployGithubRouteImport.update({
-    id: '/api/application-starter/deploy/github',
-    path: '/api/application-starter/deploy/github',
+const ApiAuthCliCreateTicketRoute = ApiAuthCliCreateTicketRouteImport.update({
+  id: '/api/auth/cli/create-ticket',
+  path: '/api/auth/cli/create-ticket',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiBuilderOpenrouterCallbackRoute =
+  ApiBuilderOpenrouterCallbackRouteImport.update({
+    id: '/api/builder/openrouter/callback',
+    path: '/api/builder/openrouter/callback',
     getParentRoute: () => rootRouteImport,
   } as any)
-const ApiApplicationStarterDeployCheckNameRoute =
-  ApiApplicationStarterDeployCheckNameRouteImport.update({
-    id: '/api/application-starter/deploy/check-name',
-    path: '/api/application-starter/deploy/check-name',
-    getParentRoute: () => rootRouteImport,
+const ApiBuilderProjectSnapshotsHashRoute =
+  ApiBuilderProjectSnapshotsHashRouteImport.update({
+    id: '/$hash',
+    path: '/$hash',
+    getParentRoute: () => ApiBuilderProjectSnapshotsRoute,
   } as any)
-const LibraryChartsCatalogAllRoute = LibraryChartsCatalogAllRouteImport.update({
-  id: '/all',
-  path: '/all',
-  getParentRoute: () => LibraryChartsCatalogRoute,
+const ApiBuilderProjectsIdRoute = ApiBuilderProjectsIdRouteImport.update({
+  id: '/$id',
+  path: '/$id',
+  getParentRoute: () => ApiBuilderProjectsRoute,
 } as any)
-const LibraryLibraryIdVersionLlmsDottxtRoute =
-  LibraryLibraryIdVersionLlmsDottxtRouteImport.update({
-    id: '/llms.txt',
-    path: '/llms.txt',
-    getParentRoute: () => LibraryLibraryIdVersionRoute,
-  } as any)
-const LibraryLibraryIdVersionDocsRoute =
-  LibraryLibraryIdVersionDocsRouteImport.update({
-    id: '/docs',
-    path: '/docs',
-    getParentRoute: () => LibraryLibraryIdVersionRoute,
-  } as any)
-const LibraryLibraryIdVersionDocsIndexRoute =
-  LibraryLibraryIdVersionDocsIndexRouteImport.update({
+const IntentRegistryPackageNameIndexRoute =
+  IntentRegistryPackageNameIndexRouteImport.update({
     id: '/',
-    path: '/',
-    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
-  } as any)
-const ChartsCatalogPreviewsRevisionChar123caseIdChar125DotsvgRoute =
-  ChartsCatalogPreviewsRevisionChar123caseIdChar125DotsvgRouteImport.update({
-    id: '/charts/catalog_/previews/$revision/{$caseId}.svg',
-    path: '/charts/catalog/previews/$revision/{$caseId}.svg',
-    getParentRoute: () => rootRouteImport,
-  } as any)
-const ApiBuilderProjectsIdSyncRoute =
-  ApiBuilderProjectsIdSyncRouteImport.update({
-    id: '/sync',
-    path: '/sync',
-    getParentRoute: () => ApiBuilderProjectsIdRoute,
-  } as any)
-const ApiBuilderProjectSnapshotsHashQuarantineRoute =
-  ApiBuilderProjectSnapshotsHashQuarantineRouteImport.update({
-    id: '/quarantine',
-    path: '/quarantine',
-    getParentRoute: () => ApiBuilderProjectSnapshotsHashRoute,
-  } as any)
-const ApiAuthCliStatusTicketIdRoute =
-  ApiAuthCliStatusTicketIdRouteImport.update({
-    id: '/api/auth/cli/status/$ticketId',
-    path: '/api/auth/cli/status/$ticketId',
-    getParentRoute: () => rootRouteImport,
-  } as any)
-const LibraryChartsCatalogCollectionsCollectionIdRoute =
-  LibraryChartsCatalogCollectionsCollectionIdRouteImport.update({
-    id: '/collections/$collectionId',
-    path: '/collections/$collectionId',
-    getParentRoute: () => LibraryChartsCatalogRoute,
+    path: '/',
+    getParentRoute: () => IntentRegistryPackageNameRoute,
   } as any)
-const LibraryChartsCatalogChartsCaseIdRoute =
-  LibraryChartsCatalogChartsCaseIdRouteImport.update({
-    id: '/charts/$caseId',
-    path: '/charts/$caseId',
-    getParentRoute: () => LibraryChartsCatalogRoute,
+const IntentRegistryPackageNameSkillNameRoute =
+  IntentRegistryPackageNameSkillNameRouteImport.update({
+    id: '/$skillName',
+    path: '/$skillName',
+    getParentRoute: () => IntentRegistryPackageNameRoute,
   } as any)
-const LibraryLibraryIdVersionDocsChar123Char125DotmdRoute =
-  LibraryLibraryIdVersionDocsChar123Char125DotmdRouteImport.update({
+const IntentRegistryPackageNameChar123Char125DotmdRoute =
+  IntentRegistryPackageNameChar123Char125DotmdRouteImport.update({
     id: '/{$}.md',
     path: '/{$}.md',
+    getParentRoute: () => IntentRegistryPackageNameRoute,
+  } as any)
+const LibraryLibraryIdVersionDocsIndexRoute =
+  LibraryLibraryIdVersionDocsIndexRouteImport.update({
+    id: '/',
+    path: '/',
     getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
-const LibraryLibraryIdVersionDocsNpmStatsRoute =
-  LibraryLibraryIdVersionDocsNpmStatsRouteImport.update({
-    id: '/npm-stats',
-    path: '/npm-stats',
+const LibraryLibraryIdVersionDocsSplatRoute =
+  LibraryLibraryIdVersionDocsSplatRouteImport.update({
+    id: '/$',
+    path: '/$',
     getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
-const LibraryLibraryIdVersionDocsIndexDotmdRoute =
-  LibraryLibraryIdVersionDocsIndexDotmdRouteImport.update({
-    id: '/index.md',
-    path: '/index.md',
+const LibraryLibraryIdVersionDocsBlogRoute =
+  LibraryLibraryIdVersionDocsBlogRouteImport.update({
+    id: '/blog',
+    path: '/blog',
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
+  } as any)
+const LibraryLibraryIdVersionDocsCommunityResourcesRoute =
+  LibraryLibraryIdVersionDocsCommunityResourcesRouteImport.update({
+    id: '/community-resources',
+    path: '/community-resources',
     getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
 const LibraryLibraryIdVersionDocsContributorsRoute =
@@ -1298,24 +1262,60 @@ const LibraryLibraryIdVersionDocsContributorsRoute =
     path: '/contributors',
     getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
-const LibraryLibraryIdVersionDocsCommunityResourcesRoute =
-  LibraryLibraryIdVersionDocsCommunityResourcesRouteImport.update({
-    id: '/community-resources',
-    path: '/community-resources',
+const LibraryLibraryIdVersionDocsIndexDotmdRoute =
+  LibraryLibraryIdVersionDocsIndexDotmdRouteImport.update({
+    id: '/index.md',
+    path: '/index.md',
     getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
-const LibraryLibraryIdVersionDocsBlogRoute =
-  LibraryLibraryIdVersionDocsBlogRouteImport.update({
-    id: '/blog',
-    path: '/blog',
+const LibraryLibraryIdVersionDocsNpmStatsRoute =
+  LibraryLibraryIdVersionDocsNpmStatsRouteImport.update({
+    id: '/npm-stats',
+    path: '/npm-stats',
     getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
-const LibraryLibraryIdVersionDocsSplatRoute =
-  LibraryLibraryIdVersionDocsSplatRouteImport.update({
-    id: '/$',
-    path: '/$',
+const LibraryLibraryIdVersionDocsChar123Char125DotmdRoute =
+  LibraryLibraryIdVersionDocsChar123Char125DotmdRouteImport.update({
+    id: '/{$}.md',
+    path: '/{$}.md',
     getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
+const LibraryChartsCatalogChartsCaseIdRoute =
+  LibraryChartsCatalogChartsCaseIdRouteImport.update({
+    id: '/charts/$caseId',
+    path: '/charts/$caseId',
+    getParentRoute: () => LibraryChartsCatalogRoute,
+  } as any)
+const LibraryChartsCatalogCollectionsCollectionIdRoute =
+  LibraryChartsCatalogCollectionsCollectionIdRouteImport.update({
+    id: '/collections/$collectionId',
+    path: '/collections/$collectionId',
+    getParentRoute: () => LibraryChartsCatalogRoute,
+  } as any)
+const ApiAuthCliStatusTicketIdRoute =
+  ApiAuthCliStatusTicketIdRouteImport.update({
+    id: '/api/auth/cli/status/$ticketId',
+    path: '/api/auth/cli/status/$ticketId',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiBuilderProjectSnapshotsHashQuarantineRoute =
+  ApiBuilderProjectSnapshotsHashQuarantineRouteImport.update({
+    id: '/quarantine',
+    path: '/quarantine',
+    getParentRoute: () => ApiBuilderProjectSnapshotsHashRoute,
+  } as any)
+const ApiBuilderProjectsIdSyncRoute =
+  ApiBuilderProjectsIdSyncRouteImport.update({
+    id: '/sync',
+    path: '/sync',
+    getParentRoute: () => ApiBuilderProjectsIdRoute,
+  } as any)
+const ChartsCatalogPreviewsRevisionChar123caseIdChar125DotsvgRoute =
+  ChartsCatalogPreviewsRevisionChar123caseIdChar125DotsvgRouteImport.update({
+    id: '/charts/catalog_/previews/$revision/{$caseId}.svg',
+    path: '/charts/catalog/previews/$revision/{$caseId}.svg',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const LibraryLibraryIdVersionDocsFrameworkIndexRoute =
   LibraryLibraryIdVersionDocsFrameworkIndexRouteImport.update({
     id: '/framework/',
@@ -1328,6 +1328,12 @@ const LibraryLibraryIdVersionDocsFrameworkFrameworkIndexRoute =
     path: '/framework/$framework/',
     getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
+const LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRoute =
+  LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRouteImport.update({
+    id: '/framework/$framework/$',
+    path: '/framework/$framework/$',
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
+  } as any)
 const LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute =
   LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRouteImport.update(
     {
@@ -1336,12 +1342,6 @@ const LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute =
       getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
     } as any,
   )
-const LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRoute =
-  LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRouteImport.update({
-    id: '/framework/$framework/$',
-    path: '/framework/$framework/$',
-    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
-  } as any)
 const LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute =
   LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRouteImport.update({
     id: '/framework/$framework/examples/$',
@@ -2708,137 +2708,116 @@ export interface RootRouteChildren {
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/workshops': {
-      id: '/workshops'
-      path: '/workshops'
-      fullPath: '/workshops'
-      preLoaderRoute: typeof WorkshopsRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/terms': {
-      id: '/terms'
-      path: '/terms'
-      fullPath: '/terms'
-      preLoaderRoute: typeof TermsRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/tenets': {
-      id: '/tenets'
-      path: '/tenets'
-      fullPath: '/tenets'
-      preLoaderRoute: typeof TenetsRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/support': {
-      id: '/support'
-      path: '/support'
-      fullPath: '/support'
-      preLoaderRoute: typeof SupportRouteImport
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/sponsors-embed': {
-      id: '/sponsors-embed'
-      path: '/sponsors-embed'
-      fullPath: '/sponsors-embed'
-      preLoaderRoute: typeof SponsorsEmbedRouteImport
+    '/_library': {
+      id: '/_library'
+      path: ''
+      fullPath: '/'
+      preLoaderRoute: typeof LibraryRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/sitemap.xml': {
-      id: '/sitemap.xml'
-      path: '/sitemap.xml'
-      fullPath: '/sitemap.xml'
-      preLoaderRoute: typeof SitemapDotxmlRouteImport
+    '/account': {
+      id: '/account'
+      path: '/account'
+      fullPath: '/account'
+      preLoaderRoute: typeof AccountRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/showcases': {
-      id: '/showcases'
-      path: '/showcases'
-      fullPath: '/showcases'
-      preLoaderRoute: typeof ShowcasesRouteImport
+    '/admin': {
+      id: '/admin'
+      path: '/admin'
+      fullPath: '/admin'
+      preLoaderRoute: typeof AdminRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/shop': {
-      id: '/shop'
-      path: '/shop'
-      fullPath: '/shop'
-      preLoaderRoute: typeof ShopRouteImport
+    '/ads': {
+      id: '/ads'
+      path: '/ads'
+      fullPath: '/ads'
+      preLoaderRoute: typeof AdsRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/rss.xml': {
-      id: '/rss.xml'
-      path: '/rss.xml'
-      fullPath: '/rss.xml'
-      preLoaderRoute: typeof RssDotxmlRouteImport
+    '/application-starter': {
+      id: '/application-starter'
+      path: '/application-starter'
+      fullPath: '/application-starter'
+      preLoaderRoute: typeof ApplicationStarterRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/robots.txt': {
-      id: '/robots.txt'
-      path: '/robots.txt'
-      fullPath: '/robots.txt'
-      preLoaderRoute: typeof RobotsDottxtRouteImport
+    '/blog': {
+      id: '/blog'
+      path: '/blog'
+      fullPath: '/blog'
+      preLoaderRoute: typeof BlogRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/privacy': {
-      id: '/privacy'
-      path: '/privacy'
-      fullPath: '/privacy'
-      preLoaderRoute: typeof PrivacyRouteImport
+    '/brand-guide': {
+      id: '/brand-guide'
+      path: '/brand-guide'
+      fullPath: '/brand-guide'
+      preLoaderRoute: typeof BrandGuideRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/partners-embed': {
-      id: '/partners-embed'
-      path: '/partners-embed'
-      fullPath: '/partners-embed'
-      preLoaderRoute: typeof PartnersEmbedRouteImport
+    '/builder': {
+      id: '/builder'
+      path: '/builder'
+      fullPath: '/builder'
+      preLoaderRoute: typeof BuilderRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/partners': {
-      id: '/partners'
-      path: '/partners'
-      fullPath: '/partners'
-      preLoaderRoute: typeof PartnersRouteImport
+    '/community-projects': {
+      id: '/community-projects'
+      path: '/community-projects'
+      fullPath: '/community-projects'
+      preLoaderRoute: typeof CommunityProjectsRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/paid-support': {
-      id: '/paid-support'
-      path: '/paid-support'
-      fullPath: '/paid-support'
-      preLoaderRoute: typeof PaidSupportRouteImport
+    '/dashboard': {
+      id: '/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
+      preLoaderRoute: typeof DashboardRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/merch': {
-      id: '/merch'
-      path: '/merch'
-      fullPath: '/merch'
-      preLoaderRoute: typeof MerchRouteImport
+    '/ds': {
+      id: '/ds'
+      path: '/ds'
+      fullPath: '/ds'
+      preLoaderRoute: typeof DsRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/maintainers': {
-      id: '/maintainers'
-      path: '/maintainers'
-      fullPath: '/maintainers'
-      preLoaderRoute: typeof MaintainersRouteImport
+    '/ethos': {
+      id: '/ethos'
+      path: '/ethos'
+      fullPath: '/ethos'
+      preLoaderRoute: typeof EthosRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/login': {
-      id: '/login'
-      path: '/login'
-      fullPath: '/login'
-      preLoaderRoute: typeof LoginRouteImport
+    '/explore': {
+      id: '/explore'
+      path: '/explore'
+      fullPath: '/explore'
+      preLoaderRoute: typeof ExploreRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/llms.txt': {
-      id: '/llms.txt'
-      path: '/llms.txt'
-      fullPath: '/llms.txt'
-      preLoaderRoute: typeof LlmsDottxtRouteImport
+    '/feedback-leaderboard': {
+      id: '/feedback-leaderboard'
+      path: '/feedback-leaderboard'
+      fullPath: '/feedback-leaderboard'
+      preLoaderRoute: typeof FeedbackLeaderboardRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/llms-full.txt': {
-      id: '/llms-full.txt'
-      path: '/llms-full.txt'
-      fullPath: '/llms-full.txt'
-      preLoaderRoute: typeof LlmsFullDottxtRouteImport
+    '/learn': {
+      id: '/learn'
+      path: '/learn'
+      fullPath: '/learn'
+      preLoaderRoute: typeof LearnRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/libraries': {
@@ -2848,166 +2827,187 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LibrariesRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/learn': {
-      id: '/learn'
-      path: '/learn'
-      fullPath: '/learn'
-      preLoaderRoute: typeof LearnRouteImport
+    '/llms-full.txt': {
+      id: '/llms-full.txt'
+      path: '/llms-full.txt'
+      fullPath: '/llms-full.txt'
+      preLoaderRoute: typeof LlmsFullDottxtRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/feedback-leaderboard': {
-      id: '/feedback-leaderboard'
-      path: '/feedback-leaderboard'
-      fullPath: '/feedback-leaderboard'
-      preLoaderRoute: typeof FeedbackLeaderboardRouteImport
+    '/llms.txt': {
+      id: '/llms.txt'
+      path: '/llms.txt'
+      fullPath: '/llms.txt'
+      preLoaderRoute: typeof LlmsDottxtRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/explore': {
-      id: '/explore'
-      path: '/explore'
-      fullPath: '/explore'
-      preLoaderRoute: typeof ExploreRouteImport
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/ethos': {
-      id: '/ethos'
-      path: '/ethos'
-      fullPath: '/ethos'
-      preLoaderRoute: typeof EthosRouteImport
+    '/maintainers': {
+      id: '/maintainers'
+      path: '/maintainers'
+      fullPath: '/maintainers'
+      preLoaderRoute: typeof MaintainersRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/ds': {
-      id: '/ds'
-      path: '/ds'
-      fullPath: '/ds'
-      preLoaderRoute: typeof DsRouteImport
+    '/merch': {
+      id: '/merch'
+      path: '/merch'
+      fullPath: '/merch'
+      preLoaderRoute: typeof MerchRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/dashboard': {
-      id: '/dashboard'
-      path: '/dashboard'
-      fullPath: '/dashboard'
-      preLoaderRoute: typeof DashboardRouteImport
+    '/paid-support': {
+      id: '/paid-support'
+      path: '/paid-support'
+      fullPath: '/paid-support'
+      preLoaderRoute: typeof PaidSupportRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/community-projects': {
-      id: '/community-projects'
-      path: '/community-projects'
-      fullPath: '/community-projects'
-      preLoaderRoute: typeof CommunityProjectsRouteImport
+    '/partners': {
+      id: '/partners'
+      path: '/partners'
+      fullPath: '/partners'
+      preLoaderRoute: typeof PartnersRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/builder': {
-      id: '/builder'
-      path: '/builder'
-      fullPath: '/builder'
-      preLoaderRoute: typeof BuilderRouteImport
+    '/partners-embed': {
+      id: '/partners-embed'
+      path: '/partners-embed'
+      fullPath: '/partners-embed'
+      preLoaderRoute: typeof PartnersEmbedRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/brand-guide': {
-      id: '/brand-guide'
-      path: '/brand-guide'
-      fullPath: '/brand-guide'
-      preLoaderRoute: typeof BrandGuideRouteImport
+    '/privacy': {
+      id: '/privacy'
+      path: '/privacy'
+      fullPath: '/privacy'
+      preLoaderRoute: typeof PrivacyRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/blog': {
-      id: '/blog'
-      path: '/blog'
-      fullPath: '/blog'
-      preLoaderRoute: typeof BlogRouteImport
+    '/robots.txt': {
+      id: '/robots.txt'
+      path: '/robots.txt'
+      fullPath: '/robots.txt'
+      preLoaderRoute: typeof RobotsDottxtRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/application-starter': {
-      id: '/application-starter'
-      path: '/application-starter'
-      fullPath: '/application-starter'
-      preLoaderRoute: typeof ApplicationStarterRouteImport
+    '/rss.xml': {
+      id: '/rss.xml'
+      path: '/rss.xml'
+      fullPath: '/rss.xml'
+      preLoaderRoute: typeof RssDotxmlRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/ads': {
-      id: '/ads'
-      path: '/ads'
-      fullPath: '/ads'
-      preLoaderRoute: typeof AdsRouteImport
+    '/shop': {
+      id: '/shop'
+      path: '/shop'
+      fullPath: '/shop'
+      preLoaderRoute: typeof ShopRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/account': {
-      id: '/account'
-      path: '/account'
-      fullPath: '/account'
-      preLoaderRoute: typeof AccountRouteImport
+    '/showcases': {
+      id: '/showcases'
+      path: '/showcases'
+      fullPath: '/showcases'
+      preLoaderRoute: typeof ShowcasesRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/_library': {
-      id: '/_library'
-      path: ''
-      fullPath: '/'
-      preLoaderRoute: typeof LibraryRouteImport
+    '/sitemap.xml': {
+      id: '/sitemap.xml'
+      path: '/sitemap.xml'
+      fullPath: '/sitemap.xml'
+      preLoaderRoute: typeof SitemapDotxmlRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/admin': {
-      id: '/admin'
-      path: '/admin'
-      fullPath: '/admin'
-      preLoaderRoute: typeof AdminRouteRouteImport
+    '/sponsors-embed': {
+      id: '/sponsors-embed'
+      path: '/sponsors-embed'
+      fullPath: '/sponsors-embed'
+      preLoaderRoute: typeof SponsorsEmbedRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexRouteImport
+    '/support': {
+      id: '/support'
+      path: '/support'
+      fullPath: '/support'
+      preLoaderRoute: typeof SupportRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/stats/': {
-      id: '/stats/'
-      path: '/stats'
-      fullPath: '/stats/'
-      preLoaderRoute: typeof StatsIndexRouteImport
+    '/tenets': {
+      id: '/tenets'
+      path: '/tenets'
+      fullPath: '/tenets'
+      preLoaderRoute: typeof TenetsRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/showcase/': {
-      id: '/showcase/'
-      path: '/showcase'
-      fullPath: '/showcase/'
-      preLoaderRoute: typeof ShowcaseIndexRouteImport
+    '/terms': {
+      id: '/terms'
+      path: '/terms'
+      fullPath: '/terms'
+      preLoaderRoute: typeof TermsRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/shop/': {
-      id: '/shop/'
-      path: '/'
-      fullPath: '/shop/'
-      preLoaderRoute: typeof ShopIndexRouteImport
-      parentRoute: typeof ShopRoute
+    '/workshops': {
+      id: '/workshops'
+      path: '/workshops'
+      fullPath: '/workshops'
+      preLoaderRoute: typeof WorkshopsRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/partners/': {
-      id: '/partners/'
-      path: '/'
-      fullPath: '/partners/'
-      preLoaderRoute: typeof PartnersIndexRouteImport
-      parentRoute: typeof PartnersRoute
+    '/.well-known/oauth-authorization-server': {
+      id: '/.well-known/oauth-authorization-server'
+      path: '/.well-known/oauth-authorization-server'
+      fullPath: '/.well-known/oauth-authorization-server'
+      preLoaderRoute: typeof DotwellKnownOauthAuthorizationServerRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/ds/': {
-      id: '/ds/'
-      path: '/'
-      fullPath: '/ds/'
-      preLoaderRoute: typeof DsIndexRouteImport
-      parentRoute: typeof DsRoute
+    '/_library/$libraryId': {
+      id: '/_library/$libraryId'
+      path: '/$libraryId'
+      fullPath: '/$libraryId'
+      preLoaderRoute: typeof LibraryLibraryIdRouteRouteImport
+      parentRoute: typeof LibraryRoute
     }
-    '/blog/': {
-      id: '/blog/'
+    '/account/': {
+      id: '/account/'
       path: '/'
-      fullPath: '/blog/'
-      preLoaderRoute: typeof BlogIndexRouteImport
-      parentRoute: typeof BlogRoute
+      fullPath: '/account/'
+      preLoaderRoute: typeof AccountIndexRouteImport
+      parentRoute: typeof AccountRoute
     }
-    '/application-starter/': {
-      id: '/application-starter/'
-      path: '/'
-      fullPath: '/application-starter/'
-      preLoaderRoute: typeof ApplicationStarterIndexRouteImport
-      parentRoute: typeof ApplicationStarterRoute
+    '/account/feedback': {
+      id: '/account/feedback'
+      path: '/feedback'
+      fullPath: '/account/feedback'
+      preLoaderRoute: typeof AccountFeedbackRouteImport
+      parentRoute: typeof AccountRoute
+    }
+    '/account/integrations': {
+      id: '/account/integrations'
+      path: '/integrations'
+      fullPath: '/account/integrations'
+      preLoaderRoute: typeof AccountIntegrationsRouteImport
+      parentRoute: typeof AccountRoute
+    }
+    '/account/notes': {
+      id: '/account/notes'
+      path: '/notes'
+      fullPath: '/account/notes'
+      preLoaderRoute: typeof AccountNotesRouteImport
+      parentRoute: typeof AccountRoute
+    }
+    '/account/submissions': {
+      id: '/account/submissions'
+      path: '/submissions'
+      fullPath: '/account/submissions'
+      preLoaderRoute: typeof AccountSubmissionsRouteImport
+      parentRoute: typeof AccountRoute
     }
     '/admin/': {
       id: '/admin/'
@@ -3016,221 +3016,228 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminIndexRouteImport
       parentRoute: typeof AdminRouteRoute
     }
-    '/account/': {
-      id: '/account/'
-      path: '/'
-      fullPath: '/account/'
-      preLoaderRoute: typeof AccountIndexRouteImport
-      parentRoute: typeof AccountRoute
-    }
-    '/stack/$category': {
-      id: '/stack/$category'
-      path: '/stack/$category'
-      fullPath: '/stack/$category'
-      preLoaderRoute: typeof StackCategoryRouteImport
-      parentRoute: typeof rootRouteImport
+    '/admin/audit': {
+      id: '/admin/audit'
+      path: '/audit'
+      fullPath: '/admin/audit'
+      preLoaderRoute: typeof AdminAuditRouteImport
+      parentRoute: typeof AdminRouteRoute
     }
-    '/showcase/submit': {
-      id: '/showcase/submit'
-      path: '/showcase/submit'
-      fullPath: '/showcase/submit'
-      preLoaderRoute: typeof ShowcaseSubmitRouteImport
-      parentRoute: typeof rootRouteImport
+    '/admin/docs': {
+      id: '/admin/docs'
+      path: '/docs'
+      fullPath: '/admin/docs'
+      preLoaderRoute: typeof AdminDocsRouteImport
+      parentRoute: typeof AdminRouteRoute
     }
-    '/showcase/$id': {
-      id: '/showcase/$id'
-      path: '/showcase/$id'
-      fullPath: '/showcase/$id'
-      preLoaderRoute: typeof ShowcaseIdRouteImport
-      parentRoute: typeof rootRouteImport
+    '/admin/github-stats': {
+      id: '/admin/github-stats'
+      path: '/github-stats'
+      fullPath: '/admin/github-stats'
+      preLoaderRoute: typeof AdminGithubStatsRouteImport
+      parentRoute: typeof AdminRouteRoute
     }
-    '/shop/search': {
-      id: '/shop/search'
-      path: '/search'
-      fullPath: '/shop/search'
-      preLoaderRoute: typeof ShopSearchRouteImport
-      parentRoute: typeof ShopRoute
+    '/admin/intent': {
+      id: '/admin/intent'
+      path: '/intent'
+      fullPath: '/admin/intent'
+      preLoaderRoute: typeof AdminIntentRouteImport
+      parentRoute: typeof AdminRouteRoute
     }
-    '/shop/cart': {
-      id: '/shop/cart'
-      path: '/cart'
-      fullPath: '/shop/cart'
-      preLoaderRoute: typeof ShopCartRouteImport
-      parentRoute: typeof ShopRoute
+    '/admin/logins': {
+      id: '/admin/logins'
+      path: '/logins'
+      fullPath: '/admin/logins'
+      preLoaderRoute: typeof AdminLoginsRouteImport
+      parentRoute: typeof AdminRouteRoute
     }
-    '/shop/$handle': {
-      id: '/shop/$handle'
-      path: '/$handle'
-      fullPath: '/shop/$handle'
-      preLoaderRoute: typeof ShopHandleRouteImport
-      parentRoute: typeof ShopRoute
+    '/admin/npm-stats': {
+      id: '/admin/npm-stats'
+      path: '/npm-stats'
+      fullPath: '/admin/npm-stats'
+      preLoaderRoute: typeof AdminNpmStatsRouteImport
+      parentRoute: typeof AdminRouteRoute
     }
-    '/partners/render': {
-      id: '/partners/render'
-      path: '/render'
-      fullPath: '/partners/render'
-      preLoaderRoute: typeof PartnersRenderRouteImport
-      parentRoute: typeof PartnersRoute
+    '/admin/users': {
+      id: '/admin/users'
+      path: '/users'
+      fullPath: '/admin/users'
+      preLoaderRoute: typeof AdminUsersRouteImport
+      parentRoute: typeof AdminRouteRoute
     }
-    '/partners/railway': {
-      id: '/partners/railway'
-      path: '/railway'
-      fullPath: '/partners/railway'
-      preLoaderRoute: typeof PartnersRailwayRouteImport
-      parentRoute: typeof PartnersRoute
+    '/api/uploadthing': {
+      id: '/api/uploadthing'
+      path: '/api/uploadthing'
+      fullPath: '/api/uploadthing'
+      preLoaderRoute: typeof ApiUploadthingRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/partners/netlify': {
-      id: '/partners/netlify'
-      path: '/netlify'
-      fullPath: '/partners/netlify'
-      preLoaderRoute: typeof PartnersNetlifyRouteImport
-      parentRoute: typeof PartnersRoute
+    '/application-starter/': {
+      id: '/application-starter/'
+      path: '/'
+      fullPath: '/application-starter/'
+      preLoaderRoute: typeof ApplicationStarterIndexRouteImport
+      parentRoute: typeof ApplicationStarterRoute
     }
-    '/partners/$partner': {
-      id: '/partners/$partner'
-      path: '/$partner'
-      fullPath: '/partners/$partner'
-      preLoaderRoute: typeof PartnersPartnerRouteImport
-      parentRoute: typeof PartnersRoute
+    '/application-starter/docs': {
+      id: '/application-starter/docs'
+      path: '/docs'
+      fullPath: '/application-starter/docs'
+      preLoaderRoute: typeof ApplicationStarterDocsRouteImport
+      parentRoute: typeof ApplicationStarterRoute
     }
-    '/oauth/token': {
-      id: '/oauth/token'
-      path: '/oauth/token'
-      fullPath: '/oauth/token'
-      preLoaderRoute: typeof OauthTokenRouteImport
+    '/auth/cli': {
+      id: '/auth/cli'
+      path: '/auth/cli'
+      fullPath: '/auth/cli'
+      preLoaderRoute: typeof AuthCliRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/oauth/register': {
-      id: '/oauth/register'
-      path: '/oauth/register'
-      fullPath: '/oauth/register'
-      preLoaderRoute: typeof OauthRegisterRouteImport
+    '/auth/popup-success': {
+      id: '/auth/popup-success'
+      path: '/auth/popup-success'
+      fullPath: '/auth/popup-success'
+      preLoaderRoute: typeof AuthPopupSuccessRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/oauth/authorize': {
-      id: '/oauth/authorize'
-      path: '/oauth/authorize'
-      fullPath: '/oauth/authorize'
-      preLoaderRoute: typeof OauthAuthorizeRouteImport
+    '/auth/signout': {
+      id: '/auth/signout'
+      path: '/auth/signout'
+      fullPath: '/auth/signout'
+      preLoaderRoute: typeof AuthSignoutRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/libraries_/$framework': {
-      id: '/libraries_/$framework'
-      path: '/libraries/$framework'
-      fullPath: '/libraries/$framework'
-      preLoaderRoute: typeof LibrariesFrameworkRouteImport
-      parentRoute: typeof rootRouteImport
+    '/blog/': {
+      id: '/blog/'
+      path: '/'
+      fullPath: '/blog/'
+      preLoaderRoute: typeof BlogIndexRouteImport
+      parentRoute: typeof BlogRoute
     }
-    '/ds/typography': {
-      id: '/ds/typography'
-      path: '/typography'
-      fullPath: '/ds/typography'
-      preLoaderRoute: typeof DsTypographyRouteImport
-      parentRoute: typeof DsRoute
+    '/blog/$': {
+      id: '/blog/$'
+      path: '/$'
+      fullPath: '/blog/$'
+      preLoaderRoute: typeof BlogSplatRouteImport
+      parentRoute: typeof BlogRoute
     }
-    '/ds/takeover': {
-      id: '/ds/takeover'
-      path: '/takeover'
-      fullPath: '/ds/takeover'
-      preLoaderRoute: typeof DsTakeoverRouteImport
-      parentRoute: typeof DsRoute
+    '/builder_/$id': {
+      id: '/builder_/$id'
+      path: '/builder/$id'
+      fullPath: '/builder/$id'
+      preLoaderRoute: typeof BuilderIdRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/ds/tabs': {
-      id: '/ds/tabs'
-      path: '/tabs'
-      fullPath: '/ds/tabs'
-      preLoaderRoute: typeof DsTabsRouteImport
-      parentRoute: typeof DsRoute
+    '/builder_/ai': {
+      id: '/builder_/ai'
+      path: '/builder/ai'
+      fullPath: '/builder/ai'
+      preLoaderRoute: typeof BuilderAiRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/builder_/esbuild': {
+      id: '/builder_/esbuild'
+      path: '/builder/esbuild'
+      fullPath: '/builder/esbuild'
+      preLoaderRoute: typeof BuilderEsbuildRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/ds/stats': {
-      id: '/ds/stats'
-      path: '/stats'
-      fullPath: '/ds/stats'
-      preLoaderRoute: typeof DsStatsRouteImport
-      parentRoute: typeof DsRoute
+    '/builder_/llms.txt': {
+      id: '/builder_/llms.txt'
+      path: '/builder/llms.txt'
+      fullPath: '/builder/llms.txt'
+      preLoaderRoute: typeof BuilderLlmsDottxtRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/ds/spinner': {
-      id: '/ds/spinner'
-      path: '/spinner'
-      fullPath: '/ds/spinner'
-      preLoaderRoute: typeof DsSpinnerRouteImport
+    '/builder_/new': {
+      id: '/builder_/new'
+      path: '/builder/new'
+      fullPath: '/builder/new'
+      preLoaderRoute: typeof BuilderNewRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/ds/': {
+      id: '/ds/'
+      path: '/'
+      fullPath: '/ds/'
+      preLoaderRoute: typeof DsIndexRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/shadows': {
-      id: '/ds/shadows'
-      path: '/shadows'
-      fullPath: '/ds/shadows'
-      preLoaderRoute: typeof DsShadowsRouteImport
+    '/ds/avatar': {
+      id: '/ds/avatar'
+      path: '/avatar'
+      fullPath: '/ds/avatar'
+      preLoaderRoute: typeof DsAvatarRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/semantic': {
-      id: '/ds/semantic'
-      path: '/semantic'
-      fullPath: '/ds/semantic'
-      preLoaderRoute: typeof DsSemanticRouteImport
+    '/ds/badges': {
+      id: '/ds/badges'
+      path: '/badges'
+      fullPath: '/ds/badges'
+      preLoaderRoute: typeof DsBadgesRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/partner-rail': {
-      id: '/ds/partner-rail'
-      path: '/partner-rail'
-      fullPath: '/ds/partner-rail'
-      preLoaderRoute: typeof DsPartnerRailRouteImport
+    '/ds/breadcrumbs': {
+      id: '/ds/breadcrumbs'
+      path: '/breadcrumbs'
+      fullPath: '/ds/breadcrumbs'
+      preLoaderRoute: typeof DsBreadcrumbsRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/panel': {
-      id: '/ds/panel'
-      path: '/panel'
-      fullPath: '/ds/panel'
-      preLoaderRoute: typeof DsPanelRouteImport
+    '/ds/buttons': {
+      id: '/ds/buttons'
+      path: '/buttons'
+      fullPath: '/ds/buttons'
+      preLoaderRoute: typeof DsButtonsRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/palette': {
-      id: '/ds/palette'
-      path: '/palette'
-      fullPath: '/ds/palette'
-      preLoaderRoute: typeof DsPaletteRouteImport
+    '/ds/cards': {
+      id: '/ds/cards'
+      path: '/cards'
+      fullPath: '/ds/cards'
+      preLoaderRoute: typeof DsCardsRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/page-header': {
-      id: '/ds/page-header'
-      path: '/page-header'
-      fullPath: '/ds/page-header'
-      preLoaderRoute: typeof DsPageHeaderRouteImport
+    '/ds/colors': {
+      id: '/ds/colors'
+      path: '/colors'
+      fullPath: '/ds/colors'
+      preLoaderRoute: typeof DsColorsRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/overlays': {
-      id: '/ds/overlays'
-      path: '/overlays'
-      fullPath: '/ds/overlays'
-      preLoaderRoute: typeof DsOverlaysRouteImport
+    '/ds/dialog': {
+      id: '/ds/dialog'
+      path: '/dialog'
+      fullPath: '/ds/dialog'
+      preLoaderRoute: typeof DsDialogRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/navbar': {
-      id: '/ds/navbar'
-      path: '/navbar'
-      fullPath: '/ds/navbar'
-      preLoaderRoute: typeof DsNavbarRouteImport
+    '/ds/drawer': {
+      id: '/ds/drawer'
+      path: '/drawer'
+      fullPath: '/ds/drawer'
+      preLoaderRoute: typeof DsDrawerRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/maintainers': {
-      id: '/ds/maintainers'
-      path: '/maintainers'
-      fullPath: '/ds/maintainers'
-      preLoaderRoute: typeof DsMaintainersRouteImport
+    '/ds/dropdown': {
+      id: '/ds/dropdown'
+      path: '/dropdown'
+      fullPath: '/ds/dropdown'
+      preLoaderRoute: typeof DsDropdownRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/logos': {
-      id: '/ds/logos'
-      path: '/logos'
-      fullPath: '/ds/logos'
-      preLoaderRoute: typeof DsLogosRouteImport
+    '/ds/effects': {
+      id: '/ds/effects'
+      path: '/effects'
+      fullPath: '/ds/effects'
+      preLoaderRoute: typeof DsEffectsRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/inputs': {
-      id: '/ds/inputs'
-      path: '/inputs'
-      fullPath: '/ds/inputs'
-      preLoaderRoute: typeof DsInputsRouteImport
+    '/ds/eyebrow': {
+      id: '/ds/eyebrow'
+      path: '/eyebrow'
+      fullPath: '/ds/eyebrow'
+      preLoaderRoute: typeof DsEyebrowRouteImport
       parentRoute: typeof DsRoute
     }
     '/ds/iconography': {
@@ -3240,284 +3247,277 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DsIconographyRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/eyebrow': {
-      id: '/ds/eyebrow'
-      path: '/eyebrow'
-      fullPath: '/ds/eyebrow'
-      preLoaderRoute: typeof DsEyebrowRouteImport
-      parentRoute: typeof DsRoute
-    }
-    '/ds/effects': {
-      id: '/ds/effects'
-      path: '/effects'
-      fullPath: '/ds/effects'
-      preLoaderRoute: typeof DsEffectsRouteImport
+    '/ds/inputs': {
+      id: '/ds/inputs'
+      path: '/inputs'
+      fullPath: '/ds/inputs'
+      preLoaderRoute: typeof DsInputsRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/dropdown': {
-      id: '/ds/dropdown'
-      path: '/dropdown'
-      fullPath: '/ds/dropdown'
-      preLoaderRoute: typeof DsDropdownRouteImport
+    '/ds/logos': {
+      id: '/ds/logos'
+      path: '/logos'
+      fullPath: '/ds/logos'
+      preLoaderRoute: typeof DsLogosRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/drawer': {
-      id: '/ds/drawer'
-      path: '/drawer'
-      fullPath: '/ds/drawer'
-      preLoaderRoute: typeof DsDrawerRouteImport
+    '/ds/maintainers': {
+      id: '/ds/maintainers'
+      path: '/maintainers'
+      fullPath: '/ds/maintainers'
+      preLoaderRoute: typeof DsMaintainersRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/dialog': {
-      id: '/ds/dialog'
-      path: '/dialog'
-      fullPath: '/ds/dialog'
-      preLoaderRoute: typeof DsDialogRouteImport
+    '/ds/navbar': {
+      id: '/ds/navbar'
+      path: '/navbar'
+      fullPath: '/ds/navbar'
+      preLoaderRoute: typeof DsNavbarRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/colors': {
-      id: '/ds/colors'
-      path: '/colors'
-      fullPath: '/ds/colors'
-      preLoaderRoute: typeof DsColorsRouteImport
+    '/ds/overlays': {
+      id: '/ds/overlays'
+      path: '/overlays'
+      fullPath: '/ds/overlays'
+      preLoaderRoute: typeof DsOverlaysRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/cards': {
-      id: '/ds/cards'
-      path: '/cards'
-      fullPath: '/ds/cards'
-      preLoaderRoute: typeof DsCardsRouteImport
+    '/ds/page-header': {
+      id: '/ds/page-header'
+      path: '/page-header'
+      fullPath: '/ds/page-header'
+      preLoaderRoute: typeof DsPageHeaderRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/buttons': {
-      id: '/ds/buttons'
-      path: '/buttons'
-      fullPath: '/ds/buttons'
-      preLoaderRoute: typeof DsButtonsRouteImport
+    '/ds/palette': {
+      id: '/ds/palette'
+      path: '/palette'
+      fullPath: '/ds/palette'
+      preLoaderRoute: typeof DsPaletteRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/breadcrumbs': {
-      id: '/ds/breadcrumbs'
-      path: '/breadcrumbs'
-      fullPath: '/ds/breadcrumbs'
-      preLoaderRoute: typeof DsBreadcrumbsRouteImport
+    '/ds/panel': {
+      id: '/ds/panel'
+      path: '/panel'
+      fullPath: '/ds/panel'
+      preLoaderRoute: typeof DsPanelRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/badges': {
-      id: '/ds/badges'
-      path: '/badges'
-      fullPath: '/ds/badges'
-      preLoaderRoute: typeof DsBadgesRouteImport
+    '/ds/partner-rail': {
+      id: '/ds/partner-rail'
+      path: '/partner-rail'
+      fullPath: '/ds/partner-rail'
+      preLoaderRoute: typeof DsPartnerRailRouteImport
       parentRoute: typeof DsRoute
     }
-    '/ds/avatar': {
-      id: '/ds/avatar'
-      path: '/avatar'
-      fullPath: '/ds/avatar'
-      preLoaderRoute: typeof DsAvatarRouteImport
+    '/ds/semantic': {
+      id: '/ds/semantic'
+      path: '/semantic'
+      fullPath: '/ds/semantic'
+      preLoaderRoute: typeof DsSemanticRouteImport
       parentRoute: typeof DsRoute
     }
-    '/builder_/new': {
-      id: '/builder_/new'
-      path: '/builder/new'
-      fullPath: '/builder/new'
-      preLoaderRoute: typeof BuilderNewRouteImport
-      parentRoute: typeof rootRouteImport
+    '/ds/shadows': {
+      id: '/ds/shadows'
+      path: '/shadows'
+      fullPath: '/ds/shadows'
+      preLoaderRoute: typeof DsShadowsRouteImport
+      parentRoute: typeof DsRoute
     }
-    '/builder_/llms.txt': {
-      id: '/builder_/llms.txt'
-      path: '/builder/llms.txt'
-      fullPath: '/builder/llms.txt'
-      preLoaderRoute: typeof BuilderLlmsDottxtRouteImport
-      parentRoute: typeof rootRouteImport
+    '/ds/spinner': {
+      id: '/ds/spinner'
+      path: '/spinner'
+      fullPath: '/ds/spinner'
+      preLoaderRoute: typeof DsSpinnerRouteImport
+      parentRoute: typeof DsRoute
     }
-    '/builder_/esbuild': {
-      id: '/builder_/esbuild'
-      path: '/builder/esbuild'
-      fullPath: '/builder/esbuild'
-      preLoaderRoute: typeof BuilderEsbuildRouteImport
-      parentRoute: typeof rootRouteImport
+    '/ds/stats': {
+      id: '/ds/stats'
+      path: '/stats'
+      fullPath: '/ds/stats'
+      preLoaderRoute: typeof DsStatsRouteImport
+      parentRoute: typeof DsRoute
     }
-    '/builder_/ai': {
-      id: '/builder_/ai'
-      path: '/builder/ai'
-      fullPath: '/builder/ai'
-      preLoaderRoute: typeof BuilderAiRouteImport
-      parentRoute: typeof rootRouteImport
+    '/ds/tabs': {
+      id: '/ds/tabs'
+      path: '/tabs'
+      fullPath: '/ds/tabs'
+      preLoaderRoute: typeof DsTabsRouteImport
+      parentRoute: typeof DsRoute
     }
-    '/builder_/$id': {
-      id: '/builder_/$id'
-      path: '/builder/$id'
-      fullPath: '/builder/$id'
-      preLoaderRoute: typeof BuilderIdRouteImport
-      parentRoute: typeof rootRouteImport
+    '/ds/takeover': {
+      id: '/ds/takeover'
+      path: '/takeover'
+      fullPath: '/ds/takeover'
+      preLoaderRoute: typeof DsTakeoverRouteImport
+      parentRoute: typeof DsRoute
     }
-    '/blog/$': {
-      id: '/blog/$'
-      path: '/$'
-      fullPath: '/blog/$'
-      preLoaderRoute: typeof BlogSplatRouteImport
-      parentRoute: typeof BlogRoute
+    '/ds/typography': {
+      id: '/ds/typography'
+      path: '/typography'
+      fullPath: '/ds/typography'
+      preLoaderRoute: typeof DsTypographyRouteImport
+      parentRoute: typeof DsRoute
     }
-    '/auth/signout': {
-      id: '/auth/signout'
-      path: '/auth/signout'
-      fullPath: '/auth/signout'
-      preLoaderRoute: typeof AuthSignoutRouteImport
+    '/libraries_/$framework': {
+      id: '/libraries_/$framework'
+      path: '/libraries/$framework'
+      fullPath: '/libraries/$framework'
+      preLoaderRoute: typeof LibrariesFrameworkRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/auth/popup-success': {
-      id: '/auth/popup-success'
-      path: '/auth/popup-success'
-      fullPath: '/auth/popup-success'
-      preLoaderRoute: typeof AuthPopupSuccessRouteImport
+    '/oauth/authorize': {
+      id: '/oauth/authorize'
+      path: '/oauth/authorize'
+      fullPath: '/oauth/authorize'
+      preLoaderRoute: typeof OauthAuthorizeRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/auth/cli': {
-      id: '/auth/cli'
-      path: '/auth/cli'
-      fullPath: '/auth/cli'
-      preLoaderRoute: typeof AuthCliRouteImport
+    '/oauth/register': {
+      id: '/oauth/register'
+      path: '/oauth/register'
+      fullPath: '/oauth/register'
+      preLoaderRoute: typeof OauthRegisterRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/application-starter/docs': {
-      id: '/application-starter/docs'
-      path: '/docs'
-      fullPath: '/application-starter/docs'
-      preLoaderRoute: typeof ApplicationStarterDocsRouteImport
-      parentRoute: typeof ApplicationStarterRoute
-    }
-    '/api/uploadthing': {
-      id: '/api/uploadthing'
-      path: '/api/uploadthing'
-      fullPath: '/api/uploadthing'
-      preLoaderRoute: typeof ApiUploadthingRouteImport
+    '/oauth/token': {
+      id: '/oauth/token'
+      path: '/oauth/token'
+      fullPath: '/oauth/token'
+      preLoaderRoute: typeof OauthTokenRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/admin/users': {
-      id: '/admin/users'
-      path: '/users'
-      fullPath: '/admin/users'
-      preLoaderRoute: typeof AdminUsersRouteImport
-      parentRoute: typeof AdminRouteRoute
-    }
-    '/admin/npm-stats': {
-      id: '/admin/npm-stats'
-      path: '/npm-stats'
-      fullPath: '/admin/npm-stats'
-      preLoaderRoute: typeof AdminNpmStatsRouteImport
-      parentRoute: typeof AdminRouteRoute
-    }
-    '/admin/logins': {
-      id: '/admin/logins'
-      path: '/logins'
-      fullPath: '/admin/logins'
-      preLoaderRoute: typeof AdminLoginsRouteImport
-      parentRoute: typeof AdminRouteRoute
+    '/partners/': {
+      id: '/partners/'
+      path: '/'
+      fullPath: '/partners/'
+      preLoaderRoute: typeof PartnersIndexRouteImport
+      parentRoute: typeof PartnersRoute
     }
-    '/admin/intent': {
-      id: '/admin/intent'
-      path: '/intent'
-      fullPath: '/admin/intent'
-      preLoaderRoute: typeof AdminIntentRouteImport
-      parentRoute: typeof AdminRouteRoute
+    '/partners/$partner': {
+      id: '/partners/$partner'
+      path: '/$partner'
+      fullPath: '/partners/$partner'
+      preLoaderRoute: typeof PartnersPartnerRouteImport
+      parentRoute: typeof PartnersRoute
     }
-    '/admin/github-stats': {
-      id: '/admin/github-stats'
-      path: '/github-stats'
-      fullPath: '/admin/github-stats'
-      preLoaderRoute: typeof AdminGithubStatsRouteImport
-      parentRoute: typeof AdminRouteRoute
+    '/partners/netlify': {
+      id: '/partners/netlify'
+      path: '/netlify'
+      fullPath: '/partners/netlify'
+      preLoaderRoute: typeof PartnersNetlifyRouteImport
+      parentRoute: typeof PartnersRoute
     }
-    '/admin/docs': {
-      id: '/admin/docs'
-      path: '/docs'
-      fullPath: '/admin/docs'
-      preLoaderRoute: typeof AdminDocsRouteImport
-      parentRoute: typeof AdminRouteRoute
+    '/partners/railway': {
+      id: '/partners/railway'
+      path: '/railway'
+      fullPath: '/partners/railway'
+      preLoaderRoute: typeof PartnersRailwayRouteImport
+      parentRoute: typeof PartnersRoute
     }
-    '/admin/audit': {
-      id: '/admin/audit'
-      path: '/audit'
-      fullPath: '/admin/audit'
-      preLoaderRoute: typeof AdminAuditRouteImport
-      parentRoute: typeof AdminRouteRoute
+    '/partners/render': {
+      id: '/partners/render'
+      path: '/render'
+      fullPath: '/partners/render'
+      preLoaderRoute: typeof PartnersRenderRouteImport
+      parentRoute: typeof PartnersRoute
     }
-    '/account/submissions': {
-      id: '/account/submissions'
-      path: '/submissions'
-      fullPath: '/account/submissions'
-      preLoaderRoute: typeof AccountSubmissionsRouteImport
-      parentRoute: typeof AccountRoute
+    '/shop/': {
+      id: '/shop/'
+      path: '/'
+      fullPath: '/shop/'
+      preLoaderRoute: typeof ShopIndexRouteImport
+      parentRoute: typeof ShopRoute
     }
-    '/account/notes': {
-      id: '/account/notes'
-      path: '/notes'
-      fullPath: '/account/notes'
-      preLoaderRoute: typeof AccountNotesRouteImport
-      parentRoute: typeof AccountRoute
+    '/shop/$handle': {
+      id: '/shop/$handle'
+      path: '/$handle'
+      fullPath: '/shop/$handle'
+      preLoaderRoute: typeof ShopHandleRouteImport
+      parentRoute: typeof ShopRoute
     }
-    '/account/integrations': {
-      id: '/account/integrations'
-      path: '/integrations'
-      fullPath: '/account/integrations'
-      preLoaderRoute: typeof AccountIntegrationsRouteImport
-      parentRoute: typeof AccountRoute
+    '/shop/cart': {
+      id: '/shop/cart'
+      path: '/cart'
+      fullPath: '/shop/cart'
+      preLoaderRoute: typeof ShopCartRouteImport
+      parentRoute: typeof ShopRoute
     }
-    '/account/feedback': {
-      id: '/account/feedback'
-      path: '/feedback'
-      fullPath: '/account/feedback'
-      preLoaderRoute: typeof AccountFeedbackRouteImport
-      parentRoute: typeof AccountRoute
+    '/shop/search': {
+      id: '/shop/search'
+      path: '/search'
+      fullPath: '/shop/search'
+      preLoaderRoute: typeof ShopSearchRouteImport
+      parentRoute: typeof ShopRoute
     }
-    '/.well-known/oauth-authorization-server': {
-      id: '/.well-known/oauth-authorization-server'
-      path: '/.well-known/oauth-authorization-server'
-      fullPath: '/.well-known/oauth-authorization-server'
-      preLoaderRoute: typeof DotwellKnownOauthAuthorizationServerRouteImport
+    '/showcase/': {
+      id: '/showcase/'
+      path: '/showcase'
+      fullPath: '/showcase/'
+      preLoaderRoute: typeof ShowcaseIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/_library/$libraryId': {
-      id: '/_library/$libraryId'
-      path: '/$libraryId'
-      fullPath: '/$libraryId'
-      preLoaderRoute: typeof LibraryLibraryIdRouteRouteImport
-      parentRoute: typeof LibraryRoute
-    }
-    '/stats/npm/': {
-      id: '/stats/npm/'
-      path: '/stats/npm'
-      fullPath: '/stats/npm/'
-      preLoaderRoute: typeof StatsNpmIndexRouteImport
+    '/showcase/$id': {
+      id: '/showcase/$id'
+      path: '/showcase/$id'
+      fullPath: '/showcase/$id'
+      preLoaderRoute: typeof ShowcaseIdRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/intent/registry/': {
-      id: '/intent/registry/'
-      path: '/intent/registry'
-      fullPath: '/intent/registry/'
-      preLoaderRoute: typeof IntentRegistryIndexRouteImport
+    '/showcase/submit': {
+      id: '/showcase/submit'
+      path: '/showcase/submit'
+      fullPath: '/showcase/submit'
+      preLoaderRoute: typeof ShowcaseSubmitRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/mcp/': {
-      id: '/api/mcp/'
-      path: '/api/mcp'
-      fullPath: '/api/mcp/'
-      preLoaderRoute: typeof ApiMcpIndexRouteImport
+    '/stack/$category': {
+      id: '/stack/$category'
+      path: '/stack/$category'
+      fullPath: '/stack/$category'
+      preLoaderRoute: typeof StackCategoryRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/admin/showcases/': {
-      id: '/admin/showcases/'
-      path: '/showcases'
-      fullPath: '/admin/showcases/'
-      preLoaderRoute: typeof AdminShowcasesIndexRouteImport
+    '/stats/': {
+      id: '/stats/'
+      path: '/stats'
+      fullPath: '/stats/'
+      preLoaderRoute: typeof StatsIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_library/$libraryId/': {
+      id: '/_library/$libraryId/'
+      path: '/'
+      fullPath: '/$libraryId/'
+      preLoaderRoute: typeof LibraryLibraryIdIndexRouteImport
+      parentRoute: typeof LibraryLibraryIdRouteRoute
+    }
+    '/_library/$libraryId/$version': {
+      id: '/_library/$libraryId/$version'
+      path: '/$version'
+      fullPath: '/$libraryId/$version'
+      preLoaderRoute: typeof LibraryLibraryIdVersionRouteImport
+      parentRoute: typeof LibraryLibraryIdRouteRoute
+    }
+    '/_library/charts/catalog': {
+      id: '/_library/charts/catalog'
+      path: '/charts/catalog'
+      fullPath: '/charts/catalog'
+      preLoaderRoute: typeof LibraryChartsCatalogRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/admin/feedback/': {
+      id: '/admin/feedback/'
+      path: '/feedback'
+      fullPath: '/admin/feedback/'
+      preLoaderRoute: typeof AdminFeedbackIndexRouteImport
       parentRoute: typeof AdminRouteRoute
     }
-    '/admin/roles/': {
-      id: '/admin/roles/'
-      path: '/roles'
-      fullPath: '/admin/roles/'
-      preLoaderRoute: typeof AdminRolesIndexRouteImport
+    '/admin/feedback_/$id': {
+      id: '/admin/feedback_/$id'
+      path: '/feedback/$id'
+      fullPath: '/admin/feedback/$id'
+      preLoaderRoute: typeof AdminFeedbackIdRouteImport
       parentRoute: typeof AdminRouteRoute
     }
     '/admin/notes/': {
@@ -3527,144 +3527,137 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminNotesIndexRouteImport
       parentRoute: typeof AdminRouteRoute
     }
-    '/admin/feedback/': {
-      id: '/admin/feedback/'
-      path: '/feedback'
-      fullPath: '/admin/feedback/'
-      preLoaderRoute: typeof AdminFeedbackIndexRouteImport
+    '/admin/roles/': {
+      id: '/admin/roles/'
+      path: '/roles'
+      fullPath: '/admin/roles/'
+      preLoaderRoute: typeof AdminRolesIndexRouteImport
       parentRoute: typeof AdminRouteRoute
     }
-    '/_library/$libraryId/': {
-      id: '/_library/$libraryId/'
-      path: '/'
-      fullPath: '/$libraryId/'
-      preLoaderRoute: typeof LibraryLibraryIdIndexRouteImport
-      parentRoute: typeof LibraryLibraryIdRouteRoute
-    }
-    '/stats/npm/embed': {
-      id: '/stats/npm/embed'
-      path: '/stats/npm/embed'
-      fullPath: '/stats/npm/embed'
-      preLoaderRoute: typeof StatsNpmEmbedRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/stats/npm/$packages': {
-      id: '/stats/npm/$packages'
-      path: '/stats/npm/$packages'
-      fullPath: '/stats/npm/$packages'
-      preLoaderRoute: typeof StatsNpmPackagesRouteImport
-      parentRoute: typeof rootRouteImport
+    '/admin/roles/$roleId': {
+      id: '/admin/roles/$roleId'
+      path: '/roles/$roleId'
+      fullPath: '/admin/roles/$roleId'
+      preLoaderRoute: typeof AdminRolesRoleIdRouteImport
+      parentRoute: typeof AdminRouteRoute
     }
-    '/showcase/edit/$id': {
-      id: '/showcase/edit/$id'
-      path: '/showcase/edit/$id'
-      fullPath: '/showcase/edit/$id'
-      preLoaderRoute: typeof ShowcaseEditIdRouteImport
-      parentRoute: typeof rootRouteImport
+    '/admin/showcases/': {
+      id: '/admin/showcases/'
+      path: '/showcases'
+      fullPath: '/admin/showcases/'
+      preLoaderRoute: typeof AdminShowcasesIndexRouteImport
+      parentRoute: typeof AdminRouteRoute
     }
-    '/shop/products/$handle': {
-      id: '/shop/products/$handle'
-      path: '/products/$handle'
-      fullPath: '/shop/products/$handle'
-      preLoaderRoute: typeof ShopProductsHandleRouteImport
-      parentRoute: typeof ShopRoute
+    '/admin/showcases_/$id': {
+      id: '/admin/showcases_/$id'
+      path: '/showcases/$id'
+      fullPath: '/admin/showcases/$id'
+      preLoaderRoute: typeof AdminShowcasesIdRouteImport
+      parentRoute: typeof AdminRouteRoute
     }
-    '/shop/policies/$handle': {
-      id: '/shop/policies/$handle'
-      path: '/policies/$handle'
-      fullPath: '/shop/policies/$handle'
-      preLoaderRoute: typeof ShopPoliciesHandleRouteImport
-      parentRoute: typeof ShopRoute
+    '/admin/users/$userId': {
+      id: '/admin/users/$userId'
+      path: '/$userId'
+      fullPath: '/admin/users/$userId'
+      preLoaderRoute: typeof AdminUsersUserIdRouteImport
+      parentRoute: typeof AdminUsersRoute
     }
-    '/shop/pages/$handle': {
-      id: '/shop/pages/$handle'
-      path: '/pages/$handle'
-      fullPath: '/shop/pages/$handle'
-      preLoaderRoute: typeof ShopPagesHandleRouteImport
-      parentRoute: typeof ShopRoute
+    '/api/application-starter/compile': {
+      id: '/api/application-starter/compile'
+      path: '/api/application-starter/compile'
+      fullPath: '/api/application-starter/compile'
+      preLoaderRoute: typeof ApiApplicationStarterCompileRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/shop/collections/$handle': {
-      id: '/shop/collections/$handle'
-      path: '/collections/$handle'
-      fullPath: '/shop/collections/$handle'
-      preLoaderRoute: typeof ShopCollectionsHandleRouteImport
-      parentRoute: typeof ShopRoute
+    '/api/application-starter/compile-attributed': {
+      id: '/api/application-starter/compile-attributed'
+      path: '/api/application-starter/compile-attributed'
+      fullPath: '/api/application-starter/compile-attributed'
+      preLoaderRoute: typeof ApiApplicationStarterCompileAttributedRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/intent/registry/$packageName': {
-      id: '/intent/registry/$packageName'
-      path: '/intent/registry/$packageName'
-      fullPath: '/intent/registry/$packageName'
-      preLoaderRoute: typeof IntentRegistryPackageNameRouteImport
+    '/api/application-starter/download': {
+      id: '/api/application-starter/download'
+      path: '/api/application-starter/download'
+      fullPath: '/api/application-starter/download'
+      preLoaderRoute: typeof ApiApplicationStarterDownloadRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/charts/catalog_/catalog.json': {
-      id: '/charts/catalog_/catalog.json'
-      path: '/charts/catalog/catalog.json'
-      fullPath: '/charts/catalog/catalog.json'
-      preLoaderRoute: typeof ChartsCatalogCatalogDotjsonRouteImport
+    '/api/application-starter/feature-artifacts': {
+      id: '/api/application-starter/feature-artifacts'
+      path: '/api/application-starter/feature-artifacts'
+      fullPath: '/api/application-starter/feature-artifacts'
+      preLoaderRoute: typeof ApiApplicationStarterFeatureArtifactsRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/builder_/p/$hash': {
-      id: '/builder_/p/$hash'
-      path: '/builder/p/$hash'
-      fullPath: '/builder/p/$hash'
-      preLoaderRoute: typeof BuilderPHashRouteImport
+    '/api/application-starter/features': {
+      id: '/api/application-starter/features'
+      path: '/api/application-starter/features'
+      fullPath: '/api/application-starter/features'
+      preLoaderRoute: typeof ApiApplicationStarterFeaturesRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/auth/$provider/start': {
-      id: '/auth/$provider/start'
-      path: '/auth/$provider/start'
-      fullPath: '/auth/$provider/start'
-      preLoaderRoute: typeof AuthProviderStartRouteImport
+    '/api/application-starter/load-remote-addon': {
+      id: '/api/application-starter/load-remote-addon'
+      path: '/api/application-starter/load-remote-addon'
+      fullPath: '/api/application-starter/load-remote-addon'
+      preLoaderRoute: typeof ApiApplicationStarterLoadRemoteAddonRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/readme/{$}.png': {
-      id: '/api/readme/{$}.png'
-      path: '/api/readme/{$}.png'
-      fullPath: '/api/readme/{$}.png'
-      preLoaderRoute: typeof ApiReadmeChar123Char125DotpngRouteImport
+    '/api/application-starter/load-remote-template': {
+      id: '/api/application-starter/load-remote-template'
+      path: '/api/application-starter/load-remote-template'
+      fullPath: '/api/application-starter/load-remote-template'
+      preLoaderRoute: typeof ApiApplicationStarterLoadRemoteTemplateRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/og/{$}.png': {
-      id: '/api/og/{$}.png'
-      path: '/api/og/{$}.png'
-      fullPath: '/api/og/{$}.png'
-      preLoaderRoute: typeof ApiOgChar123Char125DotpngRouteImport
+    '/api/application-starter/load-template': {
+      id: '/api/application-starter/load-template'
+      path: '/api/application-starter/load-template'
+      fullPath: '/api/application-starter/load-template'
+      preLoaderRoute: typeof ApiApplicationStarterLoadTemplateRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/mcp/$': {
-      id: '/api/mcp/$'
-      path: '/api/mcp/$'
-      fullPath: '/api/mcp/$'
-      preLoaderRoute: typeof ApiMcpSplatRouteImport
+    '/api/application-starter/resolve': {
+      id: '/api/application-starter/resolve'
+      path: '/api/application-starter/resolve'
+      fullPath: '/api/application-starter/resolve'
+      preLoaderRoute: typeof ApiApplicationStarterResolveRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/github/webhook': {
-      id: '/api/github/webhook'
-      path: '/api/github/webhook'
-      fullPath: '/api/github/webhook'
-      preLoaderRoute: typeof ApiGithubWebhookRouteImport
+    '/api/application-starter/suggest': {
+      id: '/api/application-starter/suggest'
+      path: '/api/application-starter/suggest'
+      fullPath: '/api/application-starter/suggest'
+      preLoaderRoute: typeof ApiApplicationStarterSuggestRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/example/deploy': {
-      id: '/api/example/deploy'
-      path: '/api/example/deploy'
-      fullPath: '/api/example/deploy'
-      preLoaderRoute: typeof ApiExampleDeployRouteImport
+    '/api/application-starter/validate': {
+      id: '/api/application-starter/validate'
+      path: '/api/application-starter/validate'
+      fullPath: '/api/application-starter/validate'
+      preLoaderRoute: typeof ApiApplicationStarterValidateRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/discord/interactions': {
-      id: '/api/discord/interactions'
-      path: '/api/discord/interactions'
-      fullPath: '/api/discord/interactions'
-      preLoaderRoute: typeof ApiDiscordInteractionsRouteImport
+    '/api/builder/assist': {
+      id: '/api/builder/assist'
+      path: '/api/builder/assist'
+      fullPath: '/api/builder/assist'
+      preLoaderRoute: typeof ApiBuilderAssistRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/data/partners': {
-      id: '/api/data/partners'
-      path: '/api/data/partners'
-      fullPath: '/api/data/partners'
-      preLoaderRoute: typeof ApiDataPartnersRouteImport
+    '/api/builder/project-snapshots': {
+      id: '/api/builder/project-snapshots'
+      path: '/api/builder/project-snapshots'
+      fullPath: '/api/builder/project-snapshots'
+      preLoaderRoute: typeof ApiBuilderProjectSnapshotsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/builder/projects': {
+      id: '/api/builder/projects'
+      path: '/api/builder/projects'
+      fullPath: '/api/builder/projects'
+      preLoaderRoute: typeof ApiBuilderProjectsRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/api/data/libraries': {
@@ -3674,228 +3667,242 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ApiDataLibrariesRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/builder/projects': {
-      id: '/api/builder/projects'
-      path: '/api/builder/projects'
-      fullPath: '/api/builder/projects'
-      preLoaderRoute: typeof ApiBuilderProjectsRouteImport
+    '/api/data/partners': {
+      id: '/api/data/partners'
+      path: '/api/data/partners'
+      fullPath: '/api/data/partners'
+      preLoaderRoute: typeof ApiDataPartnersRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/builder/project-snapshots': {
-      id: '/api/builder/project-snapshots'
-      path: '/api/builder/project-snapshots'
-      fullPath: '/api/builder/project-snapshots'
-      preLoaderRoute: typeof ApiBuilderProjectSnapshotsRouteImport
+    '/api/discord/interactions': {
+      id: '/api/discord/interactions'
+      path: '/api/discord/interactions'
+      fullPath: '/api/discord/interactions'
+      preLoaderRoute: typeof ApiDiscordInteractionsRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/builder/assist': {
-      id: '/api/builder/assist'
-      path: '/api/builder/assist'
-      fullPath: '/api/builder/assist'
-      preLoaderRoute: typeof ApiBuilderAssistRouteImport
+    '/api/example/deploy': {
+      id: '/api/example/deploy'
+      path: '/api/example/deploy'
+      fullPath: '/api/example/deploy'
+      preLoaderRoute: typeof ApiExampleDeployRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/application-starter/validate': {
-      id: '/api/application-starter/validate'
-      path: '/api/application-starter/validate'
-      fullPath: '/api/application-starter/validate'
-      preLoaderRoute: typeof ApiApplicationStarterValidateRouteImport
+    '/api/github/webhook': {
+      id: '/api/github/webhook'
+      path: '/api/github/webhook'
+      fullPath: '/api/github/webhook'
+      preLoaderRoute: typeof ApiGithubWebhookRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/application-starter/suggest': {
-      id: '/api/application-starter/suggest'
-      path: '/api/application-starter/suggest'
-      fullPath: '/api/application-starter/suggest'
-      preLoaderRoute: typeof ApiApplicationStarterSuggestRouteImport
+    '/api/mcp/': {
+      id: '/api/mcp/'
+      path: '/api/mcp'
+      fullPath: '/api/mcp/'
+      preLoaderRoute: typeof ApiMcpIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/application-starter/resolve': {
-      id: '/api/application-starter/resolve'
-      path: '/api/application-starter/resolve'
-      fullPath: '/api/application-starter/resolve'
-      preLoaderRoute: typeof ApiApplicationStarterResolveRouteImport
+    '/api/mcp/$': {
+      id: '/api/mcp/$'
+      path: '/api/mcp/$'
+      fullPath: '/api/mcp/$'
+      preLoaderRoute: typeof ApiMcpSplatRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/application-starter/load-template': {
-      id: '/api/application-starter/load-template'
-      path: '/api/application-starter/load-template'
-      fullPath: '/api/application-starter/load-template'
-      preLoaderRoute: typeof ApiApplicationStarterLoadTemplateRouteImport
+    '/api/og/{$}.png': {
+      id: '/api/og/{$}.png'
+      path: '/api/og/{$}.png'
+      fullPath: '/api/og/{$}.png'
+      preLoaderRoute: typeof ApiOgChar123Char125DotpngRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/application-starter/load-remote-template': {
-      id: '/api/application-starter/load-remote-template'
-      path: '/api/application-starter/load-remote-template'
-      fullPath: '/api/application-starter/load-remote-template'
-      preLoaderRoute: typeof ApiApplicationStarterLoadRemoteTemplateRouteImport
+    '/api/readme/{$}.png': {
+      id: '/api/readme/{$}.png'
+      path: '/api/readme/{$}.png'
+      fullPath: '/api/readme/{$}.png'
+      preLoaderRoute: typeof ApiReadmeChar123Char125DotpngRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/application-starter/load-remote-addon': {
-      id: '/api/application-starter/load-remote-addon'
-      path: '/api/application-starter/load-remote-addon'
-      fullPath: '/api/application-starter/load-remote-addon'
-      preLoaderRoute: typeof ApiApplicationStarterLoadRemoteAddonRouteImport
+    '/auth/$provider/start': {
+      id: '/auth/$provider/start'
+      path: '/auth/$provider/start'
+      fullPath: '/auth/$provider/start'
+      preLoaderRoute: typeof AuthProviderStartRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/application-starter/features': {
-      id: '/api/application-starter/features'
-      path: '/api/application-starter/features'
-      fullPath: '/api/application-starter/features'
-      preLoaderRoute: typeof ApiApplicationStarterFeaturesRouteImport
+    '/builder_/p/$hash': {
+      id: '/builder_/p/$hash'
+      path: '/builder/p/$hash'
+      fullPath: '/builder/p/$hash'
+      preLoaderRoute: typeof BuilderPHashRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/application-starter/feature-artifacts': {
-      id: '/api/application-starter/feature-artifacts'
-      path: '/api/application-starter/feature-artifacts'
-      fullPath: '/api/application-starter/feature-artifacts'
-      preLoaderRoute: typeof ApiApplicationStarterFeatureArtifactsRouteImport
+    '/charts/catalog_/catalog.json': {
+      id: '/charts/catalog_/catalog.json'
+      path: '/charts/catalog/catalog.json'
+      fullPath: '/charts/catalog/catalog.json'
+      preLoaderRoute: typeof ChartsCatalogCatalogDotjsonRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/application-starter/download': {
-      id: '/api/application-starter/download'
-      path: '/api/application-starter/download'
-      fullPath: '/api/application-starter/download'
-      preLoaderRoute: typeof ApiApplicationStarterDownloadRouteImport
+    '/intent/registry/': {
+      id: '/intent/registry/'
+      path: '/intent/registry'
+      fullPath: '/intent/registry/'
+      preLoaderRoute: typeof IntentRegistryIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/application-starter/compile-attributed': {
-      id: '/api/application-starter/compile-attributed'
-      path: '/api/application-starter/compile-attributed'
-      fullPath: '/api/application-starter/compile-attributed'
-      preLoaderRoute: typeof ApiApplicationStarterCompileAttributedRouteImport
+    '/intent/registry/$packageName': {
+      id: '/intent/registry/$packageName'
+      path: '/intent/registry/$packageName'
+      fullPath: '/intent/registry/$packageName'
+      preLoaderRoute: typeof IntentRegistryPackageNameRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/application-starter/compile': {
-      id: '/api/application-starter/compile'
-      path: '/api/application-starter/compile'
-      fullPath: '/api/application-starter/compile'
-      preLoaderRoute: typeof ApiApplicationStarterCompileRouteImport
-      parentRoute: typeof rootRouteImport
+    '/shop/collections/$handle': {
+      id: '/shop/collections/$handle'
+      path: '/collections/$handle'
+      fullPath: '/shop/collections/$handle'
+      preLoaderRoute: typeof ShopCollectionsHandleRouteImport
+      parentRoute: typeof ShopRoute
     }
-    '/admin/users/$userId': {
-      id: '/admin/users/$userId'
-      path: '/$userId'
-      fullPath: '/admin/users/$userId'
-      preLoaderRoute: typeof AdminUsersUserIdRouteImport
-      parentRoute: typeof AdminUsersRoute
+    '/shop/pages/$handle': {
+      id: '/shop/pages/$handle'
+      path: '/pages/$handle'
+      fullPath: '/shop/pages/$handle'
+      preLoaderRoute: typeof ShopPagesHandleRouteImport
+      parentRoute: typeof ShopRoute
     }
-    '/admin/showcases_/$id': {
-      id: '/admin/showcases_/$id'
-      path: '/showcases/$id'
-      fullPath: '/admin/showcases/$id'
-      preLoaderRoute: typeof AdminShowcasesIdRouteImport
-      parentRoute: typeof AdminRouteRoute
+    '/shop/policies/$handle': {
+      id: '/shop/policies/$handle'
+      path: '/policies/$handle'
+      fullPath: '/shop/policies/$handle'
+      preLoaderRoute: typeof ShopPoliciesHandleRouteImport
+      parentRoute: typeof ShopRoute
     }
-    '/admin/roles/$roleId': {
-      id: '/admin/roles/$roleId'
-      path: '/roles/$roleId'
-      fullPath: '/admin/roles/$roleId'
-      preLoaderRoute: typeof AdminRolesRoleIdRouteImport
-      parentRoute: typeof AdminRouteRoute
+    '/shop/products/$handle': {
+      id: '/shop/products/$handle'
+      path: '/products/$handle'
+      fullPath: '/shop/products/$handle'
+      preLoaderRoute: typeof ShopProductsHandleRouteImport
+      parentRoute: typeof ShopRoute
     }
-    '/admin/feedback_/$id': {
-      id: '/admin/feedback_/$id'
-      path: '/feedback/$id'
-      fullPath: '/admin/feedback/$id'
-      preLoaderRoute: typeof AdminFeedbackIdRouteImport
-      parentRoute: typeof AdminRouteRoute
+    '/showcase/edit/$id': {
+      id: '/showcase/edit/$id'
+      path: '/showcase/edit/$id'
+      fullPath: '/showcase/edit/$id'
+      preLoaderRoute: typeof ShowcaseEditIdRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/_library/charts/catalog': {
-      id: '/_library/charts/catalog'
-      path: '/charts/catalog'
-      fullPath: '/charts/catalog'
-      preLoaderRoute: typeof LibraryChartsCatalogRouteImport
-      parentRoute: typeof LibraryRoute
+    '/stats/npm/': {
+      id: '/stats/npm/'
+      path: '/stats/npm'
+      fullPath: '/stats/npm/'
+      preLoaderRoute: typeof StatsNpmIndexRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/_library/$libraryId/$version': {
-      id: '/_library/$libraryId/$version'
-      path: '/$version'
-      fullPath: '/$libraryId/$version'
-      preLoaderRoute: typeof LibraryLibraryIdVersionRouteImport
-      parentRoute: typeof LibraryLibraryIdRouteRoute
+    '/stats/npm/$packages': {
+      id: '/stats/npm/$packages'
+      path: '/stats/npm/$packages'
+      fullPath: '/stats/npm/$packages'
+      preLoaderRoute: typeof StatsNpmPackagesRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/intent/registry/$packageName/': {
-      id: '/intent/registry/$packageName/'
+    '/stats/npm/embed': {
+      id: '/stats/npm/embed'
+      path: '/stats/npm/embed'
+      fullPath: '/stats/npm/embed'
+      preLoaderRoute: typeof StatsNpmEmbedRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_library/$libraryId/$version/': {
+      id: '/_library/$libraryId/$version/'
       path: '/'
-      fullPath: '/intent/registry/$packageName/'
-      preLoaderRoute: typeof IntentRegistryPackageNameIndexRouteImport
-      parentRoute: typeof IntentRegistryPackageNameRoute
+      fullPath: '/$libraryId/$version/'
+      preLoaderRoute: typeof LibraryLibraryIdVersionIndexRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionRoute
     }
-    '/_library/workflow/$version/': {
-      id: '/_library/workflow/$version/'
-      path: '/workflow/$version'
-      fullPath: '/workflow/$version/'
-      preLoaderRoute: typeof LibraryWorkflowVersionIndexRouteImport
-      parentRoute: typeof LibraryRoute
+    '/_library/$libraryId/$version/docs': {
+      id: '/_library/$libraryId/$version/docs'
+      path: '/docs'
+      fullPath: '/$libraryId/$version/docs'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionRoute
     }
-    '/_library/virtual/$version/': {
-      id: '/_library/virtual/$version/'
-      path: '/virtual/$version'
-      fullPath: '/virtual/$version/'
-      preLoaderRoute: typeof LibraryVirtualVersionIndexRouteImport
-      parentRoute: typeof LibraryRoute
+    '/_library/$libraryId/$version/llms.txt': {
+      id: '/_library/$libraryId/$version/llms.txt'
+      path: '/llms.txt'
+      fullPath: '/$libraryId/$version/llms.txt'
+      preLoaderRoute: typeof LibraryLibraryIdVersionLlmsDottxtRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionRoute
     }
-    '/_library/table/$version/': {
-      id: '/_library/table/$version/'
-      path: '/table/$version'
-      fullPath: '/table/$version/'
-      preLoaderRoute: typeof LibraryTableVersionIndexRouteImport
+    '/_library/ai/$version/': {
+      id: '/_library/ai/$version/'
+      path: '/ai/$version'
+      fullPath: '/ai/$version/'
+      preLoaderRoute: typeof LibraryAiVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/store/$version/': {
-      id: '/_library/store/$version/'
-      path: '/store/$version'
-      fullPath: '/store/$version/'
-      preLoaderRoute: typeof LibraryStoreVersionIndexRouteImport
+    '/_library/charts/$version/': {
+      id: '/_library/charts/$version/'
+      path: '/charts/$version'
+      fullPath: '/charts/$version/'
+      preLoaderRoute: typeof LibraryChartsVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/start/$version/': {
-      id: '/_library/start/$version/'
-      path: '/start/$version'
-      fullPath: '/start/$version/'
-      preLoaderRoute: typeof LibraryStartVersionIndexRouteImport
-      parentRoute: typeof LibraryRoute
+    '/_library/charts/catalog/': {
+      id: '/_library/charts/catalog/'
+      path: '/'
+      fullPath: '/charts/catalog/'
+      preLoaderRoute: typeof LibraryChartsCatalogIndexRouteImport
+      parentRoute: typeof LibraryChartsCatalogRoute
     }
-    '/_library/router/$version/': {
-      id: '/_library/router/$version/'
-      path: '/router/$version'
-      fullPath: '/router/$version/'
-      preLoaderRoute: typeof LibraryRouterVersionIndexRouteImport
+    '/_library/charts/catalog/all': {
+      id: '/_library/charts/catalog/all'
+      path: '/all'
+      fullPath: '/charts/catalog/all'
+      preLoaderRoute: typeof LibraryChartsCatalogAllRouteImport
+      parentRoute: typeof LibraryChartsCatalogRoute
+    }
+    '/_library/cli/$version/': {
+      id: '/_library/cli/$version/'
+      path: '/cli/$version'
+      fullPath: '/cli/$version/'
+      preLoaderRoute: typeof LibraryCliVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/ranger/$version/': {
-      id: '/_library/ranger/$version/'
-      path: '/ranger/$version'
-      fullPath: '/ranger/$version/'
-      preLoaderRoute: typeof LibraryRangerVersionIndexRouteImport
+    '/_library/config/$version/': {
+      id: '/_library/config/$version/'
+      path: '/config/$version'
+      fullPath: '/config/$version/'
+      preLoaderRoute: typeof LibraryConfigVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/query/$version/': {
-      id: '/_library/query/$version/'
-      path: '/query/$version'
-      fullPath: '/query/$version/'
-      preLoaderRoute: typeof LibraryQueryVersionIndexRouteImport
+    '/_library/db/$version/': {
+      id: '/_library/db/$version/'
+      path: '/db/$version'
+      fullPath: '/db/$version/'
+      preLoaderRoute: typeof LibraryDbVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/pacer/$version/': {
-      id: '/_library/pacer/$version/'
-      path: '/pacer/$version'
-      fullPath: '/pacer/$version/'
-      preLoaderRoute: typeof LibraryPacerVersionIndexRouteImport
+    '/_library/devtools/$version/': {
+      id: '/_library/devtools/$version/'
+      path: '/devtools/$version'
+      fullPath: '/devtools/$version/'
+      preLoaderRoute: typeof LibraryDevtoolsVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/markdown/$version/': {
-      id: '/_library/markdown/$version/'
-      path: '/markdown/$version'
-      fullPath: '/markdown/$version/'
-      preLoaderRoute: typeof LibraryMarkdownVersionIndexRouteImport
+    '/_library/form/$version/': {
+      id: '/_library/form/$version/'
+      path: '/form/$version'
+      fullPath: '/form/$version/'
+      preLoaderRoute: typeof LibraryFormVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/intent/$version/': {
-      id: '/_library/intent/$version/'
-      path: '/intent/$version'
-      fullPath: '/intent/$version/'
-      preLoaderRoute: typeof LibraryIntentVersionIndexRouteImport
+    '/_library/highlight/$version/': {
+      id: '/_library/highlight/$version/'
+      path: '/highlight/$version'
+      fullPath: '/highlight/$version/'
+      preLoaderRoute: typeof LibraryHighlightVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
     '/_library/hotkeys/$version/': {
@@ -3905,116 +3912,95 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LibraryHotkeysVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/highlight/$version/': {
-      id: '/_library/highlight/$version/'
-      path: '/highlight/$version'
-      fullPath: '/highlight/$version/'
-      preLoaderRoute: typeof LibraryHighlightVersionIndexRouteImport
+    '/_library/intent/$version/': {
+      id: '/_library/intent/$version/'
+      path: '/intent/$version'
+      fullPath: '/intent/$version/'
+      preLoaderRoute: typeof LibraryIntentVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/form/$version/': {
-      id: '/_library/form/$version/'
-      path: '/form/$version'
-      fullPath: '/form/$version/'
-      preLoaderRoute: typeof LibraryFormVersionIndexRouteImport
+    '/_library/markdown/$version/': {
+      id: '/_library/markdown/$version/'
+      path: '/markdown/$version'
+      fullPath: '/markdown/$version/'
+      preLoaderRoute: typeof LibraryMarkdownVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/devtools/$version/': {
-      id: '/_library/devtools/$version/'
-      path: '/devtools/$version'
-      fullPath: '/devtools/$version/'
-      preLoaderRoute: typeof LibraryDevtoolsVersionIndexRouteImport
+    '/_library/pacer/$version/': {
+      id: '/_library/pacer/$version/'
+      path: '/pacer/$version'
+      fullPath: '/pacer/$version/'
+      preLoaderRoute: typeof LibraryPacerVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/db/$version/': {
-      id: '/_library/db/$version/'
-      path: '/db/$version'
-      fullPath: '/db/$version/'
-      preLoaderRoute: typeof LibraryDbVersionIndexRouteImport
+    '/_library/query/$version/': {
+      id: '/_library/query/$version/'
+      path: '/query/$version'
+      fullPath: '/query/$version/'
+      preLoaderRoute: typeof LibraryQueryVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/config/$version/': {
-      id: '/_library/config/$version/'
-      path: '/config/$version'
-      fullPath: '/config/$version/'
-      preLoaderRoute: typeof LibraryConfigVersionIndexRouteImport
+    '/_library/ranger/$version/': {
+      id: '/_library/ranger/$version/'
+      path: '/ranger/$version'
+      fullPath: '/ranger/$version/'
+      preLoaderRoute: typeof LibraryRangerVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/cli/$version/': {
-      id: '/_library/cli/$version/'
-      path: '/cli/$version'
-      fullPath: '/cli/$version/'
-      preLoaderRoute: typeof LibraryCliVersionIndexRouteImport
+    '/_library/router/$version/': {
+      id: '/_library/router/$version/'
+      path: '/router/$version'
+      fullPath: '/router/$version/'
+      preLoaderRoute: typeof LibraryRouterVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/charts/catalog/': {
-      id: '/_library/charts/catalog/'
-      path: '/'
-      fullPath: '/charts/catalog/'
-      preLoaderRoute: typeof LibraryChartsCatalogIndexRouteImport
-      parentRoute: typeof LibraryChartsCatalogRoute
-    }
-    '/_library/charts/$version/': {
-      id: '/_library/charts/$version/'
-      path: '/charts/$version'
-      fullPath: '/charts/$version/'
-      preLoaderRoute: typeof LibraryChartsVersionIndexRouteImport
+    '/_library/start/$version/': {
+      id: '/_library/start/$version/'
+      path: '/start/$version'
+      fullPath: '/start/$version/'
+      preLoaderRoute: typeof LibraryStartVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/ai/$version/': {
-      id: '/_library/ai/$version/'
-      path: '/ai/$version'
-      fullPath: '/ai/$version/'
-      preLoaderRoute: typeof LibraryAiVersionIndexRouteImport
+    '/_library/store/$version/': {
+      id: '/_library/store/$version/'
+      path: '/store/$version'
+      fullPath: '/store/$version/'
+      preLoaderRoute: typeof LibraryStoreVersionIndexRouteImport
       parentRoute: typeof LibraryRoute
     }
-    '/_library/$libraryId/$version/': {
-      id: '/_library/$libraryId/$version/'
-      path: '/'
-      fullPath: '/$libraryId/$version/'
-      preLoaderRoute: typeof LibraryLibraryIdVersionIndexRouteImport
-      parentRoute: typeof LibraryLibraryIdVersionRoute
-    }
-    '/intent/registry/$packageName/{$}.md': {
-      id: '/intent/registry/$packageName/{$}.md'
-      path: '/{$}.md'
-      fullPath: '/intent/registry/$packageName/{$}.md'
-      preLoaderRoute: typeof IntentRegistryPackageNameChar123Char125DotmdRouteImport
-      parentRoute: typeof IntentRegistryPackageNameRoute
-    }
-    '/intent/registry/$packageName/$skillName': {
-      id: '/intent/registry/$packageName/$skillName'
-      path: '/$skillName'
-      fullPath: '/intent/registry/$packageName/$skillName'
-      preLoaderRoute: typeof IntentRegistryPackageNameSkillNameRouteImport
-      parentRoute: typeof IntentRegistryPackageNameRoute
-    }
-    '/api/builder/projects/$id': {
-      id: '/api/builder/projects/$id'
-      path: '/$id'
-      fullPath: '/api/builder/projects/$id'
-      preLoaderRoute: typeof ApiBuilderProjectsIdRouteImport
-      parentRoute: typeof ApiBuilderProjectsRoute
+    '/_library/table/$version/': {
+      id: '/_library/table/$version/'
+      path: '/table/$version'
+      fullPath: '/table/$version/'
+      preLoaderRoute: typeof LibraryTableVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
     }
-    '/api/builder/project-snapshots/$hash': {
-      id: '/api/builder/project-snapshots/$hash'
-      path: '/$hash'
-      fullPath: '/api/builder/project-snapshots/$hash'
-      preLoaderRoute: typeof ApiBuilderProjectSnapshotsHashRouteImport
-      parentRoute: typeof ApiBuilderProjectSnapshotsRoute
+    '/_library/virtual/$version/': {
+      id: '/_library/virtual/$version/'
+      path: '/virtual/$version'
+      fullPath: '/virtual/$version/'
+      preLoaderRoute: typeof LibraryVirtualVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
     }
-    '/api/builder/openrouter/callback': {
-      id: '/api/builder/openrouter/callback'
-      path: '/api/builder/openrouter/callback'
-      fullPath: '/api/builder/openrouter/callback'
-      preLoaderRoute: typeof ApiBuilderOpenrouterCallbackRouteImport
+    '/_library/workflow/$version/': {
+      id: '/_library/workflow/$version/'
+      path: '/workflow/$version'
+      fullPath: '/workflow/$version/'
+      preLoaderRoute: typeof LibraryWorkflowVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/api/application-starter/deploy/check-name': {
+      id: '/api/application-starter/deploy/check-name'
+      path: '/api/application-starter/deploy/check-name'
+      fullPath: '/api/application-starter/deploy/check-name'
+      preLoaderRoute: typeof ApiApplicationStarterDeployCheckNameRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/auth/cli/create-ticket': {
-      id: '/api/auth/cli/create-ticket'
-      path: '/api/auth/cli/create-ticket'
-      fullPath: '/api/auth/cli/create-ticket'
-      preLoaderRoute: typeof ApiAuthCliCreateTicketRouteImport
+    '/api/application-starter/deploy/github': {
+      id: '/api/application-starter/deploy/github'
+      path: '/api/application-starter/deploy/github'
+      fullPath: '/api/application-starter/deploy/github'
+      preLoaderRoute: typeof ApiApplicationStarterDeployGithubRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/api/auth/callback/$provider': {
@@ -4024,40 +4010,54 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ApiAuthCallbackProviderRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/application-starter/deploy/github': {
-      id: '/api/application-starter/deploy/github'
-      path: '/api/application-starter/deploy/github'
-      fullPath: '/api/application-starter/deploy/github'
-      preLoaderRoute: typeof ApiApplicationStarterDeployGithubRouteImport
+    '/api/auth/cli/create-ticket': {
+      id: '/api/auth/cli/create-ticket'
+      path: '/api/auth/cli/create-ticket'
+      fullPath: '/api/auth/cli/create-ticket'
+      preLoaderRoute: typeof ApiAuthCliCreateTicketRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/application-starter/deploy/check-name': {
-      id: '/api/application-starter/deploy/check-name'
-      path: '/api/application-starter/deploy/check-name'
-      fullPath: '/api/application-starter/deploy/check-name'
-      preLoaderRoute: typeof ApiApplicationStarterDeployCheckNameRouteImport
+    '/api/builder/openrouter/callback': {
+      id: '/api/builder/openrouter/callback'
+      path: '/api/builder/openrouter/callback'
+      fullPath: '/api/builder/openrouter/callback'
+      preLoaderRoute: typeof ApiBuilderOpenrouterCallbackRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/_library/charts/catalog/all': {
-      id: '/_library/charts/catalog/all'
-      path: '/all'
-      fullPath: '/charts/catalog/all'
-      preLoaderRoute: typeof LibraryChartsCatalogAllRouteImport
-      parentRoute: typeof LibraryChartsCatalogRoute
+    '/api/builder/project-snapshots/$hash': {
+      id: '/api/builder/project-snapshots/$hash'
+      path: '/$hash'
+      fullPath: '/api/builder/project-snapshots/$hash'
+      preLoaderRoute: typeof ApiBuilderProjectSnapshotsHashRouteImport
+      parentRoute: typeof ApiBuilderProjectSnapshotsRoute
     }
-    '/_library/$libraryId/$version/llms.txt': {
-      id: '/_library/$libraryId/$version/llms.txt'
-      path: '/llms.txt'
-      fullPath: '/$libraryId/$version/llms.txt'
-      preLoaderRoute: typeof LibraryLibraryIdVersionLlmsDottxtRouteImport
-      parentRoute: typeof LibraryLibraryIdVersionRoute
+    '/api/builder/projects/$id': {
+      id: '/api/builder/projects/$id'
+      path: '/$id'
+      fullPath: '/api/builder/projects/$id'
+      preLoaderRoute: typeof ApiBuilderProjectsIdRouteImport
+      parentRoute: typeof ApiBuilderProjectsRoute
     }
-    '/_library/$libraryId/$version/docs': {
-      id: '/_library/$libraryId/$version/docs'
-      path: '/docs'
-      fullPath: '/$libraryId/$version/docs'
-      preLoaderRoute: typeof LibraryLibraryIdVersionDocsRouteImport
-      parentRoute: typeof LibraryLibraryIdVersionRoute
+    '/intent/registry/$packageName/': {
+      id: '/intent/registry/$packageName/'
+      path: '/'
+      fullPath: '/intent/registry/$packageName/'
+      preLoaderRoute: typeof IntentRegistryPackageNameIndexRouteImport
+      parentRoute: typeof IntentRegistryPackageNameRoute
+    }
+    '/intent/registry/$packageName/$skillName': {
+      id: '/intent/registry/$packageName/$skillName'
+      path: '/$skillName'
+      fullPath: '/intent/registry/$packageName/$skillName'
+      preLoaderRoute: typeof IntentRegistryPackageNameSkillNameRouteImport
+      parentRoute: typeof IntentRegistryPackageNameRoute
+    }
+    '/intent/registry/$packageName/{$}.md': {
+      id: '/intent/registry/$packageName/{$}.md'
+      path: '/{$}.md'
+      fullPath: '/intent/registry/$packageName/{$}.md'
+      preLoaderRoute: typeof IntentRegistryPackageNameChar123Char125DotmdRouteImport
+      parentRoute: typeof IntentRegistryPackageNameRoute
     }
     '/_library/$libraryId/$version/docs/': {
       id: '/_library/$libraryId/$version/docs/'
@@ -4066,67 +4066,25 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LibraryLibraryIdVersionDocsIndexRouteImport
       parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/charts/catalog_/previews/$revision/{$caseId}.svg': {
-      id: '/charts/catalog_/previews/$revision/{$caseId}.svg'
-      path: '/charts/catalog/previews/$revision/{$caseId}.svg'
-      fullPath: '/charts/catalog/previews/$revision/{$caseId}.svg'
-      preLoaderRoute: typeof ChartsCatalogPreviewsRevisionChar123caseIdChar125DotsvgRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/api/builder/projects/$id/sync': {
-      id: '/api/builder/projects/$id/sync'
-      path: '/sync'
-      fullPath: '/api/builder/projects/$id/sync'
-      preLoaderRoute: typeof ApiBuilderProjectsIdSyncRouteImport
-      parentRoute: typeof ApiBuilderProjectsIdRoute
-    }
-    '/api/builder/project-snapshots/$hash/quarantine': {
-      id: '/api/builder/project-snapshots/$hash/quarantine'
-      path: '/quarantine'
-      fullPath: '/api/builder/project-snapshots/$hash/quarantine'
-      preLoaderRoute: typeof ApiBuilderProjectSnapshotsHashQuarantineRouteImport
-      parentRoute: typeof ApiBuilderProjectSnapshotsHashRoute
-    }
-    '/api/auth/cli/status/$ticketId': {
-      id: '/api/auth/cli/status/$ticketId'
-      path: '/api/auth/cli/status/$ticketId'
-      fullPath: '/api/auth/cli/status/$ticketId'
-      preLoaderRoute: typeof ApiAuthCliStatusTicketIdRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/_library/charts/catalog/collections/$collectionId': {
-      id: '/_library/charts/catalog/collections/$collectionId'
-      path: '/collections/$collectionId'
-      fullPath: '/charts/catalog/collections/$collectionId'
-      preLoaderRoute: typeof LibraryChartsCatalogCollectionsCollectionIdRouteImport
-      parentRoute: typeof LibraryChartsCatalogRoute
-    }
-    '/_library/charts/catalog/charts/$caseId': {
-      id: '/_library/charts/catalog/charts/$caseId'
-      path: '/charts/$caseId'
-      fullPath: '/charts/catalog/charts/$caseId'
-      preLoaderRoute: typeof LibraryChartsCatalogChartsCaseIdRouteImport
-      parentRoute: typeof LibraryChartsCatalogRoute
-    }
-    '/_library/$libraryId/$version/docs/{$}.md': {
-      id: '/_library/$libraryId/$version/docs/{$}.md'
-      path: '/{$}.md'
-      fullPath: '/$libraryId/$version/docs/{$}.md'
-      preLoaderRoute: typeof LibraryLibraryIdVersionDocsChar123Char125DotmdRouteImport
+    '/_library/$libraryId/$version/docs/$': {
+      id: '/_library/$libraryId/$version/docs/$'
+      path: '/$'
+      fullPath: '/$libraryId/$version/docs/$'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsSplatRouteImport
       parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/_library/$libraryId/$version/docs/npm-stats': {
-      id: '/_library/$libraryId/$version/docs/npm-stats'
-      path: '/npm-stats'
-      fullPath: '/$libraryId/$version/docs/npm-stats'
-      preLoaderRoute: typeof LibraryLibraryIdVersionDocsNpmStatsRouteImport
+    '/_library/$libraryId/$version/docs/blog': {
+      id: '/_library/$libraryId/$version/docs/blog'
+      path: '/blog'
+      fullPath: '/$libraryId/$version/docs/blog'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsBlogRouteImport
       parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/_library/$libraryId/$version/docs/index.md': {
-      id: '/_library/$libraryId/$version/docs/index.md'
-      path: '/index.md'
-      fullPath: '/$libraryId/$version/docs/index.md'
-      preLoaderRoute: typeof LibraryLibraryIdVersionDocsIndexDotmdRouteImport
+    '/_library/$libraryId/$version/docs/community-resources': {
+      id: '/_library/$libraryId/$version/docs/community-resources'
+      path: '/community-resources'
+      fullPath: '/$libraryId/$version/docs/community-resources'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsCommunityResourcesRouteImport
       parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
     '/_library/$libraryId/$version/docs/contributors': {
@@ -4136,27 +4094,69 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LibraryLibraryIdVersionDocsContributorsRouteImport
       parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/_library/$libraryId/$version/docs/community-resources': {
-      id: '/_library/$libraryId/$version/docs/community-resources'
-      path: '/community-resources'
-      fullPath: '/$libraryId/$version/docs/community-resources'
-      preLoaderRoute: typeof LibraryLibraryIdVersionDocsCommunityResourcesRouteImport
+    '/_library/$libraryId/$version/docs/index.md': {
+      id: '/_library/$libraryId/$version/docs/index.md'
+      path: '/index.md'
+      fullPath: '/$libraryId/$version/docs/index.md'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsIndexDotmdRouteImport
       parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/_library/$libraryId/$version/docs/blog': {
-      id: '/_library/$libraryId/$version/docs/blog'
-      path: '/blog'
-      fullPath: '/$libraryId/$version/docs/blog'
-      preLoaderRoute: typeof LibraryLibraryIdVersionDocsBlogRouteImport
+    '/_library/$libraryId/$version/docs/npm-stats': {
+      id: '/_library/$libraryId/$version/docs/npm-stats'
+      path: '/npm-stats'
+      fullPath: '/$libraryId/$version/docs/npm-stats'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsNpmStatsRouteImport
       parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/_library/$libraryId/$version/docs/$': {
-      id: '/_library/$libraryId/$version/docs/$'
-      path: '/$'
-      fullPath: '/$libraryId/$version/docs/$'
-      preLoaderRoute: typeof LibraryLibraryIdVersionDocsSplatRouteImport
+    '/_library/$libraryId/$version/docs/{$}.md': {
+      id: '/_library/$libraryId/$version/docs/{$}.md'
+      path: '/{$}.md'
+      fullPath: '/$libraryId/$version/docs/{$}.md'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsChar123Char125DotmdRouteImport
       parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
+    '/_library/charts/catalog/charts/$caseId': {
+      id: '/_library/charts/catalog/charts/$caseId'
+      path: '/charts/$caseId'
+      fullPath: '/charts/catalog/charts/$caseId'
+      preLoaderRoute: typeof LibraryChartsCatalogChartsCaseIdRouteImport
+      parentRoute: typeof LibraryChartsCatalogRoute
+    }
+    '/_library/charts/catalog/collections/$collectionId': {
+      id: '/_library/charts/catalog/collections/$collectionId'
+      path: '/collections/$collectionId'
+      fullPath: '/charts/catalog/collections/$collectionId'
+      preLoaderRoute: typeof LibraryChartsCatalogCollectionsCollectionIdRouteImport
+      parentRoute: typeof LibraryChartsCatalogRoute
+    }
+    '/api/auth/cli/status/$ticketId': {
+      id: '/api/auth/cli/status/$ticketId'
+      path: '/api/auth/cli/status/$ticketId'
+      fullPath: '/api/auth/cli/status/$ticketId'
+      preLoaderRoute: typeof ApiAuthCliStatusTicketIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/builder/project-snapshots/$hash/quarantine': {
+      id: '/api/builder/project-snapshots/$hash/quarantine'
+      path: '/quarantine'
+      fullPath: '/api/builder/project-snapshots/$hash/quarantine'
+      preLoaderRoute: typeof ApiBuilderProjectSnapshotsHashQuarantineRouteImport
+      parentRoute: typeof ApiBuilderProjectSnapshotsHashRoute
+    }
+    '/api/builder/projects/$id/sync': {
+      id: '/api/builder/projects/$id/sync'
+      path: '/sync'
+      fullPath: '/api/builder/projects/$id/sync'
+      preLoaderRoute: typeof ApiBuilderProjectsIdSyncRouteImport
+      parentRoute: typeof ApiBuilderProjectsIdRoute
+    }
+    '/charts/catalog_/previews/$revision/{$caseId}.svg': {
+      id: '/charts/catalog_/previews/$revision/{$caseId}.svg'
+      path: '/charts/catalog/previews/$revision/{$caseId}.svg'
+      fullPath: '/charts/catalog/previews/$revision/{$caseId}.svg'
+      preLoaderRoute: typeof ChartsCatalogPreviewsRevisionChar123caseIdChar125DotsvgRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_library/$libraryId/$version/docs/framework/': {
       id: '/_library/$libraryId/$version/docs/framework/'
       path: '/framework'
@@ -4171,13 +4171,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LibraryLibraryIdVersionDocsFrameworkFrameworkIndexRouteImport
       parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/_library/$libraryId/$version/docs/framework/$framework/{$}.md': {
-      id: '/_library/$libraryId/$version/docs/framework/$framework/{$}.md'
-      path: '/framework/$framework/{$}.md'
-      fullPath: '/$libraryId/$version/docs/framework/$framework/{$}.md'
-      preLoaderRoute: typeof LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRouteImport
-      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
-    }
     '/_library/$libraryId/$version/docs/framework/$framework/$': {
       id: '/_library/$libraryId/$version/docs/framework/$framework/$'
       path: '/framework/$framework/$'
@@ -4185,6 +4178,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRouteImport
       parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
+    '/_library/$libraryId/$version/docs/framework/$framework/{$}.md': {
+      id: '/_library/$libraryId/$version/docs/framework/$framework/{$}.md'
+      path: '/framework/$framework/{$}.md'
+      fullPath: '/$libraryId/$version/docs/framework/$framework/{$}.md'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
+    }
     '/_library/$libraryId/$version/docs/framework/$framework/examples/$': {
       id: '/_library/$libraryId/$version/docs/framework/$framework/examples/$'
       path: '/framework/$framework/examples/$'

From c6810da99ce18887d3d0a9063417cc633a8ceda7 Mon Sep 17 00:00:00 2001
From: Tom Beckenham <34339192+tombeckenham@users.noreply.github.com>
Date: Wed, 16 Sep 2026 18:33:59 +1000
Subject: [PATCH 7/9] Expand AI skill installers and wrap install commands

---
 src/components/landing/LandingPromptBox.tsx | 44 +++++++++++++++++----
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/components/landing/LandingPromptBox.tsx b/src/components/landing/LandingPromptBox.tsx
index 9dc5a4d17..a3d8cc582 100644
--- a/src/components/landing/LandingPromptBox.tsx
+++ b/src/components/landing/LandingPromptBox.tsx
@@ -22,6 +22,9 @@ type SkillAgent = {
   pinned?: boolean
 }
 
+const projectSkillsPrompt =
+  'Copy the tanstack-ai and tanstack-ai-migration skill folders, including their supporting files, from https://github.com/TanStack/ai/tree/main/skills into .agents/skills/ in this project. Read the installed skills.'
+
 const skillAgents: Array<SkillAgent> = [
   {
     id: 'claude',
@@ -51,19 +54,44 @@ const skillAgents: Array<SkillAgent> = [
     command: '/plugin marketplace add TanStack/ai\n/plugin install tanstack-ai',
   },
   {
-    id: 'chatgpt',
-    name: 'ChatGPT',
-    description: 'Paste this prompt into ChatGPT.',
+    id: 'opencode',
+    name: 'OpenCode',
+    description: 'Paste this into OpenCode to install project skills.',
+    command: projectSkillsPrompt,
+  },
+  {
+    id: 'amp',
+    name: 'Amp',
+    description: 'Run this in your project terminal for Amp.',
+    command: 'amp skill add https://github.com/TanStack/ai',
+  },
+  {
+    id: 't3-code',
+    name: 'T3 Code',
+    description:
+      'Paste this into T3 Code. Your selected agent installs the skills.',
     command:
-      'Install the agent skills from the skills folder of https://github.com/TanStack/ai for my user, read them, then ask me what AI features I want to build, or suggest some.',
+      'Copy the tanstack-ai and tanstack-ai-migration skill folders, including their supporting files, from https://github.com/TanStack/ai/tree/main/skills into your native project skills directory. Read the installed skills.',
+  },
+  {
+    id: 'kimi',
+    name: 'Kimi Code',
+    description: 'Paste this into Kimi Code to install project skills.',
+    command: projectSkillsPrompt,
+  },
+  {
+    id: 'antigravity',
+    name: 'Antigravity',
+    description: 'Paste this into Antigravity to install project skills.',
+    command: projectSkillsPrompt,
   },
   {
     id: 'npx',
     name: 'Skills (npx)',
     description:
-      'Run this in a terminal. Works for any agent that reads SKILL.md.',
+      'Run this in your project terminal, then select your coding agent.',
     command:
-      'npx skills add TanStack/ai -g --skill tanstack-ai tanstack-ai-migration',
+      'npx skills add TanStack/ai --skill tanstack-ai tanstack-ai-migration',
   },
 ]
 
@@ -147,12 +175,12 @@ export function LandingPromptBox() {
         {agent.description}
       </p>
       <div className="mt-3 flex items-center gap-2 rounded-lg bg-text-primary/4 px-3 py-2.5">
-        <pre className="min-w-0 flex-1 overflow-x-auto font-ds-mono text-ds-mono-xs text-text-primary/80">
+        <pre className="min-w-0 flex-1 whitespace-pre-wrap wrap-anywhere font-ds-mono text-ds-mono-xs text-text-primary/80">
           {agent.command}
         </pre>
         <button
           type="button"
-          aria-label={copied ? 'Copied' : 'Copy install command'}
+          aria-label={copied ? 'Copied' : 'Copy install instructions'}
           onClick={onCopy}
           className="shrink-0 text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright)"
         >

From 115d27c973527ad4a4861de96394b61b00d646f8 Mon Sep 17 00:00:00 2001
From: Tom Beckenham <34339192+tombeckenham@users.noreply.github.com>
Date: Wed, 16 Sep 2026 19:20:57 +1000
Subject: [PATCH 8/9] Count AI downloads using the core ai package

---
 src/libraries/libraries.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libraries/libraries.ts b/src/libraries/libraries.ts
index f4d61520e..409d247d8 100644
--- a/src/libraries/libraries.ts
+++ b/src/libraries/libraries.ts
@@ -707,7 +707,7 @@ export const ai: LibrarySlim = {
     'vanilla',
   ],
   corePackageName: '@tanstack/ai-client',
-  npmPackageNames: ['@tanstack/ai-client'],
+  npmPackageNames: ['@tanstack/ai'],
   latestVersion: 'v0',
   latestBranch: 'main',
   availableVersions: ['v0'],

From f93cf4ed055ef213af0897f764e8d2afb9f616df Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Thu, 17 Sep 2026 14:01:33 +0200
Subject: [PATCH 9/9] Stack the AI landing campaign and animate the studio chat

---
 src/components/LibraryStatusBadge.tsx       |   9 +-
 src/components/landing/AiCampaignHero.css   | 403 +++++++---
 src/components/landing/AiCampaignHero.tsx   | 775 +++++++++++++++-----
 src/components/landing/AiLanding.tsx        | 493 +++++++++----
 src/components/landing/LandingPromptBox.tsx |  60 +-
 src/components/landing/LibraryLanding.tsx   |  30 +-
 src/styles/app.css                          |  54 ++
 7 files changed, 1377 insertions(+), 447 deletions(-)

diff --git a/src/components/LibraryStatusBadge.tsx b/src/components/LibraryStatusBadge.tsx
index 8fc1d04f3..5cedd6e42 100644
--- a/src/components/LibraryStatusBadge.tsx
+++ b/src/components/LibraryStatusBadge.tsx
@@ -11,15 +11,18 @@ export function LibraryStatusBadge({
   badge: LibraryBadge
   className?: string
 }) {
-  // Status badges are intentionally neutral: the word (ALPHA / BETA / RC…)
-  // carries the meaning, color carries none. A single quiet chip never competes
-  // with a library's brand color and reads consistently across every surface.
+  const isRc = badge.toUpperCase() === 'RC'
+
+  // ALPHA / BETA stay quiet. RC is the current ship state, so it uses the
+  // library accent and a slow glow. Reduced-motion users still get the fill.
   return (
     <Badge
       variant="default"
       rounded="md"
       className={twMerge(
         'border border-border-subtle font-ds-mono text-ds-mono-caps-xs uppercase',
+        isRc &&
+          'library-status-badge-rc border-transparent px-2.5 py-1 font-ds-mono text-ds-mono-caps text-white',
         className,
       )}
     >
diff --git a/src/components/landing/AiCampaignHero.css b/src/components/landing/AiCampaignHero.css
index a3ad56ece..c017aa2c2 100644
--- a/src/components/landing/AiCampaignHero.css
+++ b/src/components/landing/AiCampaignHero.css
@@ -28,33 +28,100 @@
   color: var(--color-text-secondary);
 }
 .ai-campaign-steps {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1.2fr;
+  display: flex;
+  align-items: center;
   padding: 0 12px 12px;
   border-bottom: 1px solid var(--color-border-subtle);
-  gap: 4px;
+  gap: 8px;
 }
 .ai-campaign-steps button {
-  position: relative;
   display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 40px;
   align-items: center;
   justify-content: center;
   gap: 7px;
-  padding: 10px 4px;
-  border-radius: 6px;
-  color: var(--color-text-secondary);
-  font-size: 11px;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border-default);
+  border-radius: 8px;
+  background: var(--color-background-default);
+  color: var(--color-text-primary);
+  font-size: 12px;
+  font-weight: 600;
   cursor: pointer;
 }
-.ai-campaign-steps button[aria-pressed='true'] {
+.ai-campaign-steps button:hover {
+  border-color: var(--landing-accent);
+  background: rgb(var(--landing-glow) / 0.08);
   color: var(--landing-accent-bright);
-  background: rgb(var(--landing-glow) / 0.1);
+}
+.ai-campaign-steps button[aria-pressed='true'] {
+  border-color: transparent;
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--landing-accent) 84%, black),
+    color-mix(in srgb, var(--landing-accent) 52%, black)
+  );
+  color: #fff;
+}
+.ai-campaign-steps button[aria-pressed='true']:hover {
+  border-color: transparent;
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--landing-accent) 84%, black),
+    color-mix(in srgb, var(--landing-accent) 52%, black)
+  );
+  color: #fff;
 }
 .ai-campaign-step-arrow {
-  position: absolute;
-  right: -8px;
+  flex-shrink: 0;
   color: var(--color-text-secondary);
-  opacity: 0.5;
+  opacity: 0.45;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ai-campaign-steps button {
+    transition-property: color, background-color, border-color, transform;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  }
+  .ai-campaign-steps button:active {
+    transform: scale(0.96);
+  }
+  .ai-campaign-msg {
+    animation: ai-campaign-msg-in 280ms cubic-bezier(0.2, 0, 0, 1) both;
+  }
+  .ai-campaign-typing > span {
+    animation: ai-campaign-dot 1s ease-in-out infinite;
+  }
+  .ai-campaign-typing > span:nth-child(2) {
+    animation-delay: 150ms;
+  }
+  .ai-campaign-typing > span:nth-child(3) {
+    animation-delay: 300ms;
+  }
+}
+@keyframes ai-campaign-msg-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes ai-campaign-dot {
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+    transform: translateY(0);
+  }
+  40% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
 }
 .ai-campaign-hero button:focus-visible,
 .ai-campaign-hero select:focus-visible {
@@ -63,23 +130,162 @@
 }
 .ai-campaign-workspace {
   display: grid;
-  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-rows: minmax(28rem, auto) auto;
 }
+.ai-campaign-code,
 .ai-campaign-chat {
-  padding: 22px 18px 15px;
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: 1 / span 2;
+  min-width: 0;
+}
+.ai-campaign-chat {
+  background: var(--color-background-surface);
+}
+.ai-campaign-code-main {
+  min-width: 0;
+}
+.ai-campaign-chat-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 0;
+  min-height: 100%;
+  overflow: hidden;
+}
+.ai-campaign-chat-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+.ai-campaign-chat-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  background: rgb(var(--landing-glow) / 0.16);
+  color: var(--landing-accent-bright);
+  flex-shrink: 0;
+}
+.ai-campaign-row-assistant > .ai-campaign-chat-avatar {
+  width: 28px;
+  height: 28px;
+  margin-top: 2px;
+}
+.ai-campaign-chat-title {
   min-width: 0;
+  flex: 1;
+}
+.ai-campaign-chat-title > span:first-child {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+}
+.ai-campaign-chat-title > span:last-child {
+  display: block;
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+.ai-campaign-chat-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+.ai-campaign-chat-status > span:first-child {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--landing-accent-bright);
+}
+.ai-campaign-messages {
+  flex: 1 1 0%;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
   display: flex;
   flex-direction: column;
+  gap: 14px;
+  padding: 16px;
+  scroll-padding-bottom: 12px;
 }
-.ai-campaign-user {
+.ai-campaign-bubble-user {
   align-self: flex-end;
-  width: fit-content;
-  max-width: 95%;
-  border-radius: 10px 10px 3px 10px;
-  padding: 12px 13px;
-  background: rgb(var(--landing-glow) / 0.08);
-  font-size: 12px;
-  line-height: 1.6;
+  max-width: 85%;
+  border-radius: 18px 18px 6px 18px;
+  padding: 10px 14px;
+  background: rgb(var(--landing-glow) / 0.12);
+  font-size: 13px;
+  line-height: 1.55;
+}
+.ai-campaign-row-assistant {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  max-width: 100%;
+}
+.ai-campaign-assistant-body {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 13px;
+  line-height: 1.55;
+}
+.ai-campaign-typing {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 10px 4px;
+}
+.ai-campaign-typing > span {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--landing-accent-bright);
+  opacity: 0.35;
+}
+.ai-campaign-composer {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 14px 15px;
+  border-top: 1px solid var(--color-border-subtle);
+  background: var(--color-background-surface);
+}
+.ai-campaign-composer-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px 8px 14px;
+  border: 1px solid var(--color-border-default);
+  border-radius: 12px;
+  background: var(--color-background-default);
+  color: var(--color-text-secondary);
+  font-size: 13px;
+}
+.ai-campaign-composer-field > span:first-child {
+  min-width: 0;
+  flex: 1;
+}
+.ai-campaign-composer-field > span:last-child {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: rgb(var(--landing-glow) / 0.12);
+  color: var(--color-text-secondary);
 }
 .ai-campaign-attachment {
   display: flex;
@@ -88,36 +294,24 @@
   margin-top: 9px;
   border-top: 1px solid var(--color-border-subtle);
   padding-top: 8px;
-  font-size: 9px;
+  font-size: 11px;
   color: var(--color-text-secondary);
 }
 .ai-campaign-attachment img {
-  width: 29px;
-  height: 25px;
+  width: 32px;
+  height: 28px;
   object-fit: cover;
-  border-radius: 3px;
-}
-.ai-campaign-reply {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  margin: 21px 0 16px;
-  font-size: 12px;
-  line-height: 1.6;
-}
-.ai-campaign-reply svg {
-  color: var(--landing-accent-bright);
-  flex-shrink: 0;
-  margin-top: 3px;
+  border-radius: 4px;
 }
 .ai-campaign-output {
   overflow: hidden;
   border: 1px solid var(--color-border-default);
-  border-radius: 8px;
+  border-radius: 12px;
 }
 .ai-campaign-media {
   position: relative;
-  aspect-ratio: 1.15;
+  width: 100%;
+  height: 12rem;
   overflow: hidden;
   background: #d5e9f4;
 }
@@ -164,29 +358,10 @@
 .ai-campaign-output-meta svg {
   color: var(--landing-accent-bright);
 }
-.ai-campaign-chat-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 12px;
-  padding-top: 15px;
-  font-size: 9px;
-  color: var(--color-text-secondary);
-}
-.ai-campaign-chat-footer button {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 10px;
-  color: var(--landing-accent-bright);
-  cursor: pointer;
-}
 .ai-campaign-brief {
-  min-height: 250px;
   border: 1px solid var(--color-border-default);
-  border-radius: 8px;
-  padding: 19px 16px;
+  border-radius: 12px;
+  padding: 16px 14px;
 }
 .ai-campaign-brief > span {
   font-size: 10px;
@@ -221,11 +396,8 @@
   border-color: var(--color-border-subtle);
 }
 .ai-campaign-code {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid var(--color-border-subtle);
-  background: var(--color-background-default);
+  border-right: 1px solid var(--color-border-subtle);
+  background: var(--color-background-surface);
 }
 .ai-campaign-code-heading {
   display: flex;
@@ -254,8 +426,9 @@
   border-bottom-color: var(--landing-accent-bright);
 }
 .ai-campaign-code pre {
-  min-height: 270px;
-  overflow-x: auto;
+  max-height: 28rem;
+  overflow: auto;
+  background: var(--color-background-default);
 }
 .ai-campaign-hook-note {
   padding: 0 16px 19px;
@@ -272,31 +445,49 @@
   color: var(--color-text-secondary);
 }
 .ai-campaign-providers {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   gap: 8px;
-  margin-top: auto;
   padding: 14px 15px;
   border-top: 1px solid var(--color-border-subtle);
+  background: rgb(var(--landing-glow) / 0.08);
 }
-.ai-campaign-providers label {
-  font-size: 10px;
-  color: var(--color-text-secondary);
+.ai-campaign-providers > p:first-child {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-primary);
 }
-.ai-campaign-providers select {
-  min-width: 0;
-  max-width: 120px;
-  padding: 5px 3px;
+.ai-campaign-provider-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.ai-campaign-provider-chips button {
+  padding: 7px 10px;
   border: 1px solid var(--color-border-default);
-  border-radius: 5px;
+  border-radius: 8px;
   background: var(--color-background-surface);
-  font-size: 10px;
+  color: var(--color-text-primary);
+  font-size: 11px;
+  font-weight: 600;
   cursor: pointer;
 }
-.ai-campaign-providers p {
-  grid-column: 1 / -1;
-  font-size: 9px;
+.ai-campaign-provider-chips button:hover {
+  border-color: var(--landing-accent);
+  color: var(--landing-accent-bright);
+}
+.ai-campaign-provider-chips button[aria-pressed='true'] {
+  border-color: transparent;
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--landing-accent) 84%, black),
+    color-mix(in srgb, var(--landing-accent) 52%, black)
+  );
+  color: #fff;
+}
+.ai-campaign-providers > p:last-child {
+  font-size: 11px;
   color: var(--color-text-secondary);
 }
 .ai-campaign-caption {
@@ -310,11 +501,6 @@
 .ai-campaign-caption > span:last-child {
   color: var(--color-text-secondary);
 }
-@media (min-width: 640px) and (max-width: 1279px) {
-  .ai-campaign-media {
-    aspect-ratio: 1.6;
-  }
-}
 @media (max-width: 639px) {
   .ai-campaign-heading {
     padding: 16px 13px;
@@ -327,41 +513,46 @@
   }
   .ai-campaign-steps {
     padding-inline: 7px;
+    gap: 4px;
   }
   .ai-campaign-steps button {
     font-size: 10px;
     gap: 5px;
+    padding-inline: 6px;
   }
   .ai-campaign-steps button > svg:first-child {
     width: 13px;
   }
   .ai-campaign-workspace {
     grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto;
   }
+  .ai-campaign-code,
   .ai-campaign-chat {
-    padding: 18px 14px 15px;
+    display: flex;
+    flex-direction: column;
+    grid-row: auto;
+  }
+  .ai-campaign-code {
+    border-right: 0;
+    border-bottom: 1px solid var(--color-border-subtle);
+  }
+  .ai-campaign-chat-main {
+    height: 24rem;
+    min-height: 24rem;
   }
   .ai-campaign-media {
-    aspect-ratio: 1.2;
+    height: 10rem;
   }
   .ai-campaign-art-direction > p {
     font-size: 25px;
   }
-  .ai-campaign-code {
-    border-left: 0;
-    border-top: 1px solid var(--color-border-subtle);
-  }
   .ai-campaign-code pre {
-    min-height: 0;
-  }
-  .ai-campaign-hook-note {
-    display: none;
+    max-height: 22rem;
   }
-  .ai-campaign-providers {
-    grid-template-columns: auto 1fr;
-  }
-  .ai-campaign-providers select {
-    justify-self: end;
+  .ai-campaign-provider-chips button {
+    padding: 6px 8px;
+    font-size: 10px;
   }
   .ai-campaign-caption {
     padding-inline: 13px;
diff --git a/src/components/landing/AiCampaignHero.tsx b/src/components/landing/AiCampaignHero.tsx
index dac289402..f6a0f2531 100644
--- a/src/components/landing/AiCampaignHero.tsx
+++ b/src/components/landing/AiCampaignHero.tsx
@@ -12,7 +12,29 @@ import { CodeBlock } from '~/components/markdown/CodeBlock'
 import { usePrefersReducedMotion } from '~/utils/usePrefersReducedMotion'
 import './AiCampaignHero.css'
 
-const campaignSteps = [
+type CampaignProvider = {
+  adapter: string
+  model: string
+  name: string
+  pkg: string
+  provider: string
+}
+
+type CampaignStep = {
+  activity: 'chat' | 'generateImage' | 'generateVideo'
+  clientCode: string
+  file: string
+  hook: string
+  icon: typeof PencilLineIcon
+  prompt: string
+  providers: Array<CampaignProvider>
+  reply: string
+  route: '/api/chat' | '/api/image' | '/api/video'
+  serverFile: string
+  title: string
+}
+
+const campaignSteps: Array<CampaignStep> = [
   {
     title: 'The brief',
     icon: PencilLineIcon,
@@ -20,26 +42,63 @@ const campaignSteps = [
     prompt:
       'A launch campaign for TanStack AI. Something that feels like possibility, not another robot.',
     reply: 'Let’s give your next big idea a little room to grow.',
-    file: 'campaign.tsx',
-    serverFile: 'api/chat.ts',
+    file: 'src/components/campaign.tsx',
+    serverFile: 'src/routes/api/chat.ts',
     activity: 'chat',
-    serverInput: '  messages,',
+    route: '/api/chat',
     providers: [
       {
         name: 'Anthropic',
         adapter: 'anthropicText',
         model: 'claude-fable-5-1',
+        pkg: '@tanstack/ai-anthropic',
         provider: 'Anthropic',
       },
-      { name: 'Grok', adapter: 'grokText', model: 'grok-4.6', provider: 'xAI' },
+      {
+        name: 'Grok',
+        adapter: 'grokText',
+        model: 'grok-4.6',
+        pkg: '@tanstack/ai-grok',
+        provider: 'xAI',
+      },
       {
         name: 'OpenAI',
         adapter: 'openaiText',
         model: 'gpt-6-astra',
+        pkg: '@tanstack/ai-openai',
         provider: 'OpenAI',
       },
     ],
-    code: `const {\n  messages,\n  sendMessage,\n  isLoading,\n} = useChat({\n  connection:\n    fetchServerSentEvents(\n      '/api/chat',\n    ),\n})\n\nconst onSend = () =>\n  sendMessage(brief)`,
+    clientCode: `import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'
+
+const brief =
+  'A launch campaign for TanStack AI. ' +
+  'Something that feels like possibility, not another robot.'
+
+export function Campaign() {
+  const { messages, sendMessage, isLoading } = useChat({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+
+  return (
+    <div>
+      {messages.map((message) => (
+        <p key={message.id}>
+          {message.parts
+            .filter((part) => part.type === 'text')
+            .map((part) => part.content)
+            .join('')}
+        </p>
+      ))}
+      <button
+        disabled={isLoading}
+        onClick={() => sendMessage(brief)}
+      >
+        Send brief
+      </button>
+    </div>
+  )
+}`,
   },
   {
     title: 'The artwork',
@@ -48,31 +107,58 @@ const campaignSteps = [
     prompt:
       'Give it a visual. A single palm tree against a pastel sky. Leave room for the idea.',
     reply: 'One tree. An open sky. A world of possibility.',
-    file: 'artwork.tsx',
-    serverFile: 'api/image.ts',
+    file: 'src/components/artwork.tsx',
+    serverFile: 'src/routes/api/image.ts',
     activity: 'generateImage',
-    serverInput: '  prompt,\n  stream: true,',
+    route: '/api/image',
     providers: [
       {
         name: 'GPT Image 2.5',
         adapter: 'openaiImage25',
         model: 'gpt-image-2.5-sunburst',
+        pkg: '@tanstack/ai-openai',
         provider: 'OpenAI',
       },
       {
         name: 'Nano Banana 2',
         adapter: 'geminiImage',
         model: 'gemini-3.1-flash-image',
+        pkg: '@tanstack/ai-gemini',
         provider: 'Google',
       },
       {
         name: 'Grok Imagine',
         adapter: 'grokImage',
         model: 'grok-imagine-image-2.0',
+        pkg: '@tanstack/ai-grok',
         provider: 'xAI',
       },
     ],
-    code: `const {\n  generate,\n  result,\n  isLoading,\n} = useGenerateImage({\n  connection:\n    fetchServerSentEvents(\n      '/api/image',\n    ),\n})\n\nconst onGenerate = () =>\n  generate({ prompt })`,
+    clientCode: `import { fetchServerSentEvents, useGenerateImage } from '@tanstack/ai-react'
+
+const prompt =
+  'Give it a visual. A single palm tree against a pastel sky. ' +
+  'Leave room for the idea.'
+
+export function Artwork() {
+  const { generate, result, isLoading } = useGenerateImage({
+    connection: fetchServerSentEvents('/api/image'),
+  })
+
+  return (
+    <div>
+      <button
+        disabled={isLoading}
+        onClick={() => generate({ prompt })}
+      >
+        {isLoading ? 'Generating...' : 'Create artwork'}
+      </button>
+      {result?.images.map((image, index) => (
+        <img key={index} src={image.url} alt="" />
+      ))}
+    </div>
+  )
+}`,
   },
   {
     title: 'The launch film',
@@ -81,47 +167,444 @@ const campaignSteps = [
     prompt:
       'Now make it move. A short launch film, with the palm swaying in a soft breeze.',
     reply: 'Same idea. A little more life.',
-    file: 'launch-film.tsx',
-    serverFile: 'api/video.ts',
+    file: 'src/components/launch-film.tsx',
+    serverFile: 'src/routes/api/video.ts',
     activity: 'generateVideo',
-    serverInput:
-      "  prompt: [\n    { type: 'text', content: prompt },\n    {\n      type: 'image',\n      source: {\n        type: 'url',\n        value: artworkUrl,\n      },\n    },\n  ],\n  stream: true,",
+    route: '/api/video',
     providers: [
       {
         name: 'Seedance 2.5',
         adapter: 'byteplusVideo',
         model: 'dreamina-seedance-2-5-260628',
+        pkg: '@tanstack/ai-byteplus',
         provider: 'BytePlus',
       },
       {
         name: 'Google Omni',
         adapter: 'geminiVideo',
         model: 'gemini-omni-1.1-flash',
+        pkg: '@tanstack/ai-gemini',
         provider: 'Google',
       },
       {
         name: 'MiniMax H3',
         adapter: 'falVideo',
         model: 'minimax/h3/image-to-video',
+        pkg: '@tanstack/ai-fal',
         provider: 'fal',
       },
     ],
-    code: `const {\n  generate,\n  result,\n  videoStatus,\n} = useGenerateVideo({\n  connection:\n    fetchServerSentEvents(\n      '/api/video',\n    ),\n})\n\nconst onGenerate = () =>\n  generate({ prompt })\n\nreturn <video\n  src={result?.url} controls\n/>`,
+    clientCode: `import { fetchServerSentEvents, useGenerateVideo } from '@tanstack/ai-react'
+
+const prompt =
+  'Now make it move. A short launch film, ' +
+  'with the palm swaying in a soft breeze.'
+
+export function LaunchFilm() {
+  const { generate, result, videoStatus, isLoading } = useGenerateVideo({
+    connection: fetchServerSentEvents('/api/video'),
+  })
+
+  return (
+    <div>
+      <button
+        disabled={isLoading}
+        onClick={() =>
+          generate({
+            prompt,
+            artworkUrl: '/campaign-artwork.webp',
+          })
+        }
+      >
+        {isLoading ? (videoStatus?.status ?? 'Generating...') : 'Make it move'}
+      </button>
+      {result?.url ? <video src={result.url} controls /> : null}
+    </div>
+  )
+}`,
   },
 ]
 
+function campaignServerCode(step: CampaignStep, provider: CampaignProvider) {
+  const isImage25 = provider.adapter === 'openaiImage25'
+  const adapterCall = isImage25
+    ? `openaiImage25('${provider.model}')`
+    : `${provider.adapter}('${provider.model}')`
+
+  const imports = isImage25
+    ? `import {
+  createModel,
+  extendAdapter,
+  generateImage,
+  toServerSentEventsResponse,
+} from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+import { createFileRoute } from '@tanstack/react-router'`
+    : `import { ${step.activity}, toServerSentEventsResponse } from '@tanstack/ai'
+import { ${provider.adapter} } from '${provider.pkg}'
+import { createFileRoute } from '@tanstack/react-router'`
+
+  const setup = isImage25
+    ? `
+const openaiImage25 = extendAdapter(
+  openaiImage,
+  [createModel('gpt-image-2.5-sunburst', ['text', 'image'])],
+)
+`
+    : ''
+
+  let bodyAndCall = ''
+  if (step.activity === 'chat') {
+    bodyAndCall = `        const { messages } = await request.json()
+
+        const stream = chat({
+          adapter: ${adapterCall},
+          messages,
+        })`
+  } else if (step.activity === 'generateVideo') {
+    bodyAndCall = `        const { prompt, artworkUrl } = await request.json()
+
+        const stream = generateVideo({
+          adapter: ${adapterCall},
+          prompt: [
+            { type: 'text', content: prompt },
+            {
+              type: 'image',
+              source: {
+                type: 'url',
+                value: artworkUrl,
+              },
+            },
+          ],
+          stream: true,
+        })`
+  } else {
+    bodyAndCall = `        const { prompt } = await request.json()
+
+        const stream = generateImage({
+          adapter: ${adapterCall},
+          prompt,
+          stream: true,
+        })`
+  }
+
+  return `${imports}
+${setup}
+export const Route = createFileRoute('${step.route}')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+${bodyAndCall}
+
+        return toServerSentEventsResponse(stream)
+      },
+    },
+  },
+})`
+}
+
+function campaignNote(step: CampaignStep, showServer: boolean) {
+  if (showServer) {
+    return 'A TanStack Start server route. Swap the adapter, keep the handler.'
+  }
+  if (step.activity === 'generateVideo') {
+    return 'A React component. From job progress to a playable video.'
+  }
+  if (step.activity === 'generateImage') {
+    return 'A React component. Prompt in. Image out. Loading state included.'
+  }
+  return 'A React component. Messages, streaming, and send. Ready for your UI.'
+}
+
+type ChatPhase = 'user' | 'pending' | 'result'
+
+function stageView(
+  index: number,
+  stage: number,
+  phase: ChatPhase,
+): ChatPhase | 'hidden' {
+  if (index < stage) {
+    return 'result'
+  }
+  if (index > stage) {
+    return 'hidden'
+  }
+  return phase
+}
+
+function CampaignTyping() {
+  return (
+    <div className="ai-campaign-typing" aria-label="Generating">
+      <span />
+      <span />
+      <span />
+    </div>
+  )
+}
+
+function CampaignStageOutput({
+  reducedMotion,
+  stage,
+}: {
+  reducedMotion: boolean | null
+  stage: number
+}) {
+  if (stage === 0) {
+    return (
+      <div className="ai-campaign-brief">
+        <span>Campaign idea</span>
+        <h3>
+          Build something
+          <br />
+          that moves you.
+        </h3>
+        <p>
+          The tools for whatever’s next.
+          <br />
+          The freedom to make it yours.
+        </p>
+        <div>
+          <span>Open skies</span>
+          <span>Endless possibilities</span>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="ai-campaign-output">
+      <div className="ai-campaign-media">
+        {stage === 2 ? (
+          <video
+            key={String(reducedMotion)}
+            autoPlay={reducedMotion === false}
+            controls
+            muted
+            loop
+            playsInline
+            preload="metadata"
+            poster="/images/hero-palm-gradient-960.webp"
+            aria-label="Sample campaign film: a palm tree moving against a pastel sky"
+          >
+            <source src="/images/hero-palm-motion.mp4" type="video/mp4" />
+          </video>
+        ) : (
+          <img
+            src="/images/hero-palm-gradient-960.webp"
+            alt="A palm tree against a blue and pink sky, with the campaign headline Build something that moves you"
+          />
+        )}
+        <div className="ai-campaign-art-direction" aria-hidden="true">
+          <span>TanStack AI</span>
+          <p>
+            Build something
+            <br />
+            that moves you.
+          </p>
+        </div>
+      </div>
+      <div className="ai-campaign-output-meta">
+        <span>
+          <CheckIcon size={12} />{' '}
+          {stage === 2 ? 'Launch film' : 'Campaign artwork'}
+        </span>
+        <span>{stage === 2 ? '0:05 · MP4' : 'Art direction · WebP'}</span>
+      </div>
+    </div>
+  )
+}
+
+function CampaignChatPanel({
+  phase,
+  reducedMotion,
+  stage,
+}: {
+  phase: ChatPhase
+  reducedMotion: boolean | null
+  stage: number
+}) {
+  const scrollerRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    const node = scrollerRef.current
+    if (!node) {
+      return
+    }
+
+    const scrollToLatest = () => {
+      node.scrollTo({
+        top: node.scrollHeight,
+        behavior: reducedMotion ? 'auto' : 'smooth',
+      })
+    }
+
+    scrollToLatest()
+    const frame = window.requestAnimationFrame(scrollToLatest)
+    const timeoutId = window.setTimeout(scrollToLatest, 320)
+    const media = [...node.querySelectorAll('img, video')]
+    media.forEach((item) => {
+      item.addEventListener('loadeddata', scrollToLatest)
+      item.addEventListener('load', scrollToLatest)
+    })
+
+    return () => {
+      window.cancelAnimationFrame(frame)
+      window.clearTimeout(timeoutId)
+      media.forEach((item) => {
+        item.removeEventListener('loadeddata', scrollToLatest)
+        item.removeEventListener('load', scrollToLatest)
+      })
+    }
+  }, [phase, reducedMotion, stage])
+
+  const composer =
+    stage === 0 && phase !== 'result'
+      ? 'Write a launch brief…'
+      : stage === 0
+        ? 'Give it a visual…'
+        : stage === 1 && phase === 'result'
+          ? 'Now make it move…'
+          : stage === 1
+            ? 'Give it a visual…'
+            : 'Ask a follow-up'
+
+  return (
+    <div className="ai-campaign-chat">
+      <div className="ai-campaign-chat-main">
+        <div className="ai-campaign-chat-header">
+          <span className="ai-campaign-chat-avatar">
+            <SparkleIcon aria-hidden="true" size={16} weight="fill" />
+          </span>
+          <span className="ai-campaign-chat-title">
+            <span>Campaign studio</span>
+            <span>TanStack AI</span>
+          </span>
+          <span className="ai-campaign-chat-status">
+            <span />
+            Online
+          </span>
+        </div>
+        <div className="ai-campaign-messages" ref={scrollerRef}>
+          {campaignSteps.map((item, index) => {
+            const view = stageView(index, stage, phase)
+            if (view === 'hidden') {
+              return null
+            }
+
+            return (
+              <React.Fragment key={item.title}>
+                <div className="ai-campaign-msg ai-campaign-bubble-user">
+                  <p>{item.prompt}</p>
+                  {index === 2 ? (
+                    <div className="ai-campaign-attachment">
+                      <img
+                        src="/images/hero-palm-gradient-960.webp"
+                        alt="Palm tree campaign artwork"
+                      />
+                      <span>campaign-artwork.webp</span>
+                    </div>
+                  ) : null}
+                </div>
+                {view === 'pending' ? (
+                  <div className="ai-campaign-msg ai-campaign-row-assistant">
+                    <span
+                      className="ai-campaign-chat-avatar"
+                      aria-hidden="true"
+                    >
+                      <SparkleIcon size={14} weight="fill" />
+                    </span>
+                    <CampaignTyping />
+                  </div>
+                ) : null}
+                {view === 'result' ? (
+                  <div className="ai-campaign-msg ai-campaign-row-assistant">
+                    <span
+                      className="ai-campaign-chat-avatar"
+                      aria-hidden="true"
+                    >
+                      <SparkleIcon size={14} weight="fill" />
+                    </span>
+                    <div className="ai-campaign-assistant-body">
+                      <p>{item.reply}</p>
+                      <CampaignStageOutput
+                        reducedMotion={reducedMotion}
+                        stage={index}
+                      />
+                    </div>
+                  </div>
+                ) : null}
+              </React.Fragment>
+            )
+          })}
+        </div>
+      </div>
+      <div className="ai-campaign-composer">
+        <div className="ai-campaign-composer-field">
+          <span>{composer}</span>
+          <span aria-hidden="true">
+            <ArrowRightIcon size={14} weight="bold" />
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export function AiCampaignHero() {
-  const [step, setStep] = React.useState(2)
+  const [step, setStep] = React.useState(0)
+  const [phase, setPhase] = React.useState<ChatPhase>('user')
+  const [pinned, setPinned] = React.useState(false)
   const [showServer, setShowServer] = React.useState(false)
   const [providerIndices, setProviderIndices] = React.useState([0, 0, 0])
   const reducedMotion = usePrefersReducedMotion()
-  const current = campaignSteps[step]
-  const provider = current.providers[providerIndices[step]]
-  const setup =
-    provider.adapter === 'openaiImage25'
-      ? `const openaiImage25 =\n  extendAdapter(\n    openaiImage,\n    [createModel(\n      'gpt-image-2.5-sunburst',\n      ['text', 'image'],\n    )],\n  )\n\n`
-      : ''
-  const serverCode = `${setup}const stream = ${current.activity}({\n  adapter:\n    ${provider.adapter}(\n      '${provider.model}',\n    ),\n${current.serverInput}\n})\n\nreturn toServerSentEventsResponse(\n  stream,\n)`
+  const current = campaignSteps[step] ?? campaignSteps[0]!
+  const provider =
+    current.providers[providerIndices[step]] ?? current.providers[0]!
+  const serverCode = campaignServerCode(current, provider)
+  const sample = showServer ? serverCode : current.clientCode
+
+  React.useEffect(() => {
+    if (reducedMotion === true && !pinned) {
+      setStep(2)
+      setPhase('result')
+    }
+  }, [pinned, reducedMotion])
+
+  React.useEffect(() => {
+    if (pinned || reducedMotion !== false) {
+      return
+    }
+
+    const delay = phase === 'user' ? 900 : phase === 'pending' ? 1600 : 2600
+    const timeoutId = window.setTimeout(() => {
+      if (phase === 'user') {
+        setPhase('pending')
+        return
+      }
+      if (phase === 'pending') {
+        setPhase('result')
+        return
+      }
+      if (step < campaignSteps.length - 1) {
+        setStep(step + 1)
+        setPhase('user')
+        setShowServer(false)
+        return
+      }
+      setStep(0)
+      setPhase('user')
+      setShowServer(false)
+    }, delay)
+
+    return () => window.clearTimeout(timeoutId)
+  }, [phase, pinned, reducedMotion, step])
+
+  const stopOnStage = (index: number) => {
+    setPinned(true)
+    setStep(index)
+    setPhase('result')
+    setShowServer(false)
+  }
 
   return (
     <div className="ai-campaign-hero">
@@ -137,194 +620,104 @@ export function AiCampaignHero() {
         aria-label="Campaign stage"
       >
         {campaignSteps.map((item, index) => (
-          <button
-            key={item.title}
-            type="button"
-            aria-pressed={step === index}
-            onClick={() => {
-              setStep(index)
-              setShowServer(false)
-            }}
-          >
-            <item.icon size={15} />
-            <span>{item.title}</span>
-            {index < campaignSteps.length - 1 && (
+          <React.Fragment key={item.title}>
+            {index > 0 ? (
               <ArrowRightIcon
                 className="ai-campaign-step-arrow"
                 size={12}
                 aria-hidden="true"
               />
-            )}
-          </button>
+            ) : null}
+            <button
+              type="button"
+              aria-pressed={step === index}
+              onClick={() => stopOnStage(index)}
+            >
+              <item.icon
+                size={15}
+                weight={step === index ? 'fill' : 'regular'}
+              />
+              <span>{item.title}</span>
+            </button>
+          </React.Fragment>
         ))}
       </div>
 
       <div className="ai-campaign-workspace">
-        <div className="ai-campaign-chat">
-          <div className="ai-campaign-user">
-            <p>{current.prompt}</p>
-            {step === 2 && (
-              <div className="ai-campaign-attachment">
-                <img
-                  src="/images/hero-palm-gradient-960.webp"
-                  alt="Palm tree campaign artwork"
-                />
-                <span>campaign-artwork.webp</span>
-              </div>
-            )}
-          </div>
-          <div className="ai-campaign-reply">
-            <SparkleIcon size={15} weight="fill" />
-            <p>{current.reply}</p>
-          </div>
-
-          {step === 0 ? (
-            <div className="ai-campaign-brief">
-              <span>The campaign idea</span>
-              <h3>
-                Build something
-                <br />
-                that moves you.
-              </h3>
-              <p>
-                The tools for whatever’s next.
-                <br />
-                The freedom to make it yours.
-              </p>
-              <div>
-                <span>Open skies</span>
-                <span>Endless possibilities</span>
-              </div>
-              <hr />
-              <p>
-                A bright, optimistic launch. Start with one simple image, then
-                bring it to life.
-              </p>
-            </div>
-          ) : (
-            <div className="ai-campaign-output">
-              <div className="ai-campaign-media">
-                {step === 2 ? (
-                  <video
-                    key={String(reducedMotion)}
-                    autoPlay={reducedMotion === false}
-                    controls
-                    muted
-                    loop
-                    playsInline
-                    preload="metadata"
-                    poster="/images/hero-palm-gradient-960.webp"
-                    aria-label="Sample campaign film: a palm tree moving against a pastel sky"
-                  >
-                    <source
-                      src="/images/hero-palm-motion.mp4"
-                      type="video/mp4"
-                    />
-                  </video>
-                ) : (
-                  <img
-                    src="/images/hero-palm-gradient-960.webp"
-                    alt="A palm tree against a blue and pink sky, with the campaign headline Build something that moves you"
-                  />
-                )}
-                <div className="ai-campaign-art-direction" aria-hidden="true">
-                  <span>TanStack AI</span>
-                  <p>
-                    Build something
-                    <br />
-                    that moves you.
-                  </p>
-                </div>
-              </div>
-              <div className="ai-campaign-output-meta">
-                <span>
-                  <CheckIcon size={12} />{' '}
-                  {step === 2 ? 'Launch film' : 'Campaign artwork'}
-                </span>
-                <span>
-                  {step === 2 ? '0:05 · MP4' : 'Art direction · WebP'}
-                </span>
-              </div>
-            </div>
-          )}
-          <div className="ai-campaign-chat-footer">
-            <span>Sample conversation &amp; output</span>
-            {step < 2 && (
-              <button type="button" onClick={() => setStep(step + 1)}>
-                {step === 0 ? 'Create the artwork' : 'Make it move'}
-                <ArrowRightIcon size={13} />
-              </button>
-            )}
-          </div>
-        </div>
-
         <div className="ai-campaign-code">
-          <div className="ai-campaign-code-heading">
-            <CodeIcon size={15} />
-            <span>{showServer ? current.serverFile : current.file}</span>
-          </div>
-          <div
-            className="ai-campaign-code-tabs"
-            role="group"
-            aria-label="Code example"
-          >
-            <button
-              type="button"
-              aria-pressed={!showServer}
-              onClick={() => setShowServer(false)}
+          <div className="ai-campaign-code-main">
+            <div className="ai-campaign-code-heading">
+              <CodeIcon size={15} />
+              <span>{showServer ? current.serverFile : current.file}</span>
+            </div>
+            <div
+              className="ai-campaign-code-tabs"
+              role="group"
+              aria-label="Code example"
             >
-              Client hook
-            </button>
-            <button
-              type="button"
-              aria-pressed={showServer}
-              onClick={() => setShowServer(true)}
+              <button
+                type="button"
+                aria-pressed={!showServer}
+                onClick={() => setShowServer(false)}
+              >
+                Client
+              </button>
+              <button
+                type="button"
+                aria-pressed={showServer}
+                onClick={() => setShowServer(true)}
+              >
+                Server route
+              </button>
+            </div>
+            <CodeBlock
+              key={`${current.file}-${showServer}-${provider.name}`}
+              className="m-0 border-0 bg-transparent [&_pre]:m-0 [&_pre]:overflow-auto [&_pre]:bg-transparent [&_pre]:px-4 [&_pre]:py-4 [&_pre]:text-[11px] [&_pre]:leading-[1.7] sm:[&_pre]:text-xs"
+              showTypeCopyButton={false}
             >
-              Server adapter
-            </button>
-          </div>
-          <CodeBlock
-            className="m-0 border-0 bg-transparent [&_pre]:m-0 [&_pre]:bg-transparent [&_pre]:px-4 [&_pre]:py-4 [&_pre]:text-[10px] [&_pre]:leading-[1.8]"
-            showTypeCopyButton={false}
-          >
-            <code className="language-tsx">
-              {showServer ? serverCode : current.code}
-            </code>
-          </CodeBlock>
-          <div className="ai-campaign-hook-note">
-            <span>{showServer ? current.activity : current.hook}</span>
-            <p>
-              {step === 2
-                ? 'From job progress to a playable video. Your hook handles the state.'
-                : step === 1
-                  ? 'Prompt in. Image out. Loading state included.'
-                  : 'Messages, streaming, and conversation state. Ready for your UI.'}
-            </p>
+              <code className={showServer ? 'language-ts' : 'language-tsx'}>
+                {sample}
+              </code>
+            </CodeBlock>
+            <div className="ai-campaign-hook-note">
+              <span>{showServer ? current.activity : current.hook}</span>
+              <p>{campaignNote(current, showServer)}</p>
+            </div>
           </div>
           <div className="ai-campaign-providers">
-            <label htmlFor="ai-campaign-provider">Swap the model</label>
-            <select
-              id="ai-campaign-provider"
-              value={providerIndices[step]}
-              onChange={(event) => {
-                const selected = Number(event.target.value)
-                setProviderIndices((indices) =>
-                  indices.map((value, index) =>
-                    index === step ? selected : value,
-                  ),
-                )
-                setShowServer(true)
-              }}
+            <p id="ai-campaign-provider-label">Swap the model</p>
+            <div
+              className="ai-campaign-provider-chips"
+              role="group"
+              aria-labelledby="ai-campaign-provider-label"
             >
               {current.providers.map((item, index) => (
-                <option key={item.name} value={index}>
+                <button
+                  key={item.name}
+                  type="button"
+                  aria-pressed={providerIndices[step] === index}
+                  onClick={() => {
+                    setProviderIndices((indices) =>
+                      indices.map((value, itemIndex) =>
+                        itemIndex === step ? index : value,
+                      ),
+                    )
+                    setShowServer(true)
+                  }}
+                >
                   {item.name}
-                </option>
+                </button>
               ))}
-            </select>
-            <p>Via {provider.provider}. The client hook stays the same.</p>
+            </div>
+            <p>Via {provider.provider}. The client component stays the same.</p>
           </div>
         </div>
+
+        <CampaignChatPanel
+          phase={phase}
+          reducedMotion={reducedMotion}
+          stage={step}
+        />
       </div>
       <div className="ai-campaign-caption">
         <span>One campaign. More than chat.</span>
diff --git a/src/components/landing/AiLanding.tsx b/src/components/landing/AiLanding.tsx
index 90200736a..cd5688eb5 100644
--- a/src/components/landing/AiLanding.tsx
+++ b/src/components/landing/AiLanding.tsx
@@ -45,6 +45,7 @@ export default function AiLanding() {
       description="TanStack AI is a TypeScript library for building AI features and agents. It ships the agent loop, provider adapters, durability, interrupts, sandboxes, and tools, and plugs into the server, database, and UI you already have."
       hero={<AiCampaignHero />}
       beforeActions={<LandingPromptBox />}
+      stackHero
     >
       <LandingSection tone="accent">
         <LandingSectionIntro
@@ -95,17 +96,15 @@ export default function AiLanding() {
       </LandingSection>
 
       <LandingSection tone="ink">
-        <div className="grid items-center gap-12 xl:grid-cols-[1.08fr_0.92fr] xl:gap-16">
-          <LandingSectionIntro
-            eyebrow="You own the UI"
-            icon={<LayoutIcon aria-hidden="true" size={15} />}
-            title="Messages are parts. Render however you like."
-            body="Text, thinking, tool calls and results all arrive as typed parts with their own state. Loop over the parts and render each one, or hand a component per part type to createChatHook and it picks the right one for you."
-            action={<DocsLink to="ui/react">UI integrations</DocsLink>}
-          />
-          <div className="min-w-0 xl:order-first">
-            <MessageParts />
-          </div>
+        <LandingSectionIntro
+          eyebrow="You own the UI"
+          icon={<LayoutIcon aria-hidden="true" size={15} />}
+          title="Messages are parts. Render however you like."
+          body="Text, thinking, tool calls and results all arrive as typed parts with their own state. Loop over the parts and render each one, or hand a component per part type to createChatHook and it picks the right one for you."
+          action={<DocsLink to="ui/react">UI integrations</DocsLink>}
+        />
+        <div className="mt-12 min-w-0">
+          <MessageParts />
         </div>
       </LandingSection>
 
@@ -445,9 +444,16 @@ type ToolCallState = (typeof toolCallStates)[number]
 // Both snippets stay put while the cycle runs; only the highlighted line
 // moves. A line tagged with a part lights up when that part is active, and a
 // line tagged with a tool state only when the tool call is in that state.
+type HighlightPart =
+  | 'message'
+  | 'thinking'
+  | 'tool-call'
+  | 'tool-result'
+  | 'text'
+
 type CodeLine = {
   text: string
-  part?: 'thinking' | 'tool-call' | 'tool-result' | 'text'
+  part?: HighlightPart
   toolState?: ToolCallState
 }
 
@@ -494,7 +500,7 @@ const loopCode: Array<CodeLine> = [
   { text: '})' },
   { text: '' },
   { text: 'return messages.map((message) => (' },
-  { text: '  <article key={message.id}>' },
+  { text: '  <article key={message.id}>', part: 'message' },
   { text: '    {message.parts.map((part, index) => {' },
   { text: '      switch (part.type) {' },
   { text: "        case 'thinking':", part: 'thinking' },
@@ -530,7 +536,10 @@ const hookCode: Array<CodeLine> = [
   { text: '  options: chatOptions,' },
   { text: '  components: {' },
   { text: '    layout: ({ Messages }) => <main><Messages /></main>,' },
-  { text: '    message: ({ Parts }) => <article><Parts /></article>,' },
+  {
+    text: '    message: ({ Parts }) => <article><Parts /></article>,',
+    part: 'message',
+  },
   { text: '  },' },
   { text: '  partsComponents: {' },
   {
@@ -558,12 +567,13 @@ const hookCode: Array<CodeLine> = [
   { text: 'return <chat.AppChat />' },
 ]
 
-// The cycle walks the message: thinking, then every tool-call state, then the
-// result and the streamed reply.
+// The cycle walks createChatHook: message, thinking, every tool-call state,
+// then the result and the streamed reply.
 const partSteps: Array<
-  | { part: 'thinking' | 'tool-result' | 'text' }
+  | { part: 'message' | 'thinking' | 'tool-result' | 'text' }
   | { part: 'tool-call'; toolState: ToolCallState }
 > = [
+  { part: 'message' },
   { part: 'thinking' },
   ...toolCallStates.map((toolState) => ({
     part: 'tool-call' as const,
@@ -573,6 +583,297 @@ const partSteps: Array<
   { part: 'text' },
 ]
 
+const partStepIndex = {
+  message: 0,
+  thinking: 1,
+  'tool-call': 2,
+  'tool-result': 2 + toolCallStates.length,
+  text: 3 + toolCallStates.length,
+} as const
+
+function chatHighlightClass(active: boolean) {
+  return active
+    ? 'outline outline-2 outline-offset-2 outline-(--landing-accent-bright) bg-[rgb(var(--landing-glow)/0.12)]'
+    : ''
+}
+
+function InvoiceCard({ highlighted = false }: { highlighted?: boolean }) {
+  return (
+    <div
+      className={`overflow-hidden rounded-xl border ${
+        highlighted
+          ? 'border-(--landing-accent-bright) bg-[rgb(var(--landing-glow)/0.14)]'
+          : 'border-border-default bg-background-surface'
+      }`}
+    >
+      <div className="flex items-center justify-between border-b border-border-subtle px-3.5 py-2.5">
+        <p className="text-ds-label-sm text-text-primary">Invoice</p>
+        <span className="rounded-full bg-[rgb(var(--landing-glow)/0.16)] px-2 py-0.5 text-ds-label-sm text-(--landing-accent-bright)">
+          Paid
+        </span>
+      </div>
+      <div className="px-3.5 py-3">
+        <p className="font-ds-mono text-ds-mono-2xs text-text-primary/40">
+          INV-2231
+        </p>
+        <p className="mt-1 text-ds-heading-3 tabular-nums">$1,240.00</p>
+        <p className="mt-1 text-ds-body-xs text-text-primary/50">
+          Acme Labs · Paid 12 Mar 2026
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function ToolCallPreview({
+  highlighted,
+  onApprove,
+  onSelect,
+  toolState,
+}: {
+  highlighted: boolean
+  onApprove: () => void
+  onSelect: () => void
+  toolState: ToolCallState | 'pending'
+}) {
+  const status =
+    toolState === 'awaiting-input' ||
+    toolState === 'input-streaming' ||
+    toolState === 'pending'
+      ? 'Running'
+      : toolState === 'input-complete'
+        ? 'Found match'
+        : toolState === 'approval-requested'
+          ? 'Needs approval'
+          : toolState === 'approval-responded'
+            ? 'Approved'
+            : 'Done'
+
+  const showApproval =
+    toolState === 'approval-requested' ||
+    toolState === 'approval-responded' ||
+    toolState === 'complete'
+  const highlightInvoice = highlighted && toolState === 'complete'
+  const highlightTool =
+    highlighted &&
+    toolState !== 'complete' &&
+    toolState !== 'approval-requested' &&
+    toolState !== 'approval-responded'
+  const highlightApproval =
+    highlighted &&
+    (toolState === 'approval-requested' || toolState === 'approval-responded')
+
+  return (
+    <div className="space-y-2 p-1">
+      <div
+        className={`overflow-hidden rounded-xl border border-border-default bg-background-surface ${chatHighlightClass(highlightTool)}`}
+      >
+        <button
+          type="button"
+          className="flex w-full items-center gap-2.5 px-3.5 py-2.5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--landing-accent-bright)"
+          onClick={onSelect}
+        >
+          {(toolState === 'awaiting-input' ||
+            toolState === 'input-streaming' ||
+            toolState === 'pending') && (
+            <span
+              aria-hidden="true"
+              className="size-3.5 shrink-0 animate-spin rounded-full border-2 border-(--landing-accent-bright) border-t-transparent motion-reduce:animate-none"
+            />
+          )}
+          <div className="min-w-0 flex-1">
+            <p className="text-ds-label-sm text-text-primary">
+              Look up invoice
+            </p>
+            <p className="font-ds-mono text-ds-mono-2xs text-text-primary/40">
+              INV-2231
+            </p>
+          </div>
+          <span className="shrink-0 text-ds-label-sm text-text-primary/45">
+            {status}
+          </span>
+        </button>
+      </div>
+
+      {showApproval ? (
+        <div
+          className={`overflow-hidden rounded-xl border border-border-default bg-background-surface ${chatHighlightClass(highlightApproval)}`}
+        >
+          {toolState === 'approval-requested' ? (
+            <div className="flex items-center justify-between gap-3 px-3.5 py-2.5">
+              <p className="text-ds-body-sm text-text-primary">
+                This lookup needs your approval
+              </p>
+              <button
+                type="button"
+                className={`${accentFillClass} shrink-0 rounded-lg px-3 py-1.5 text-ds-label-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) active:scale-[0.96]`}
+                onClick={onApprove}
+              >
+                Approve lookup
+              </button>
+            </div>
+          ) : (
+            <p className="px-3.5 py-2.5 text-ds-body-sm text-text-primary/70">
+              You approved this lookup
+            </p>
+          )}
+        </div>
+      ) : null}
+
+      {toolState === 'complete' ? (
+        <button
+          type="button"
+          className={`block w-full rounded-xl text-left focus-visible:outline-none ${chatHighlightClass(highlightInvoice)}`}
+          onClick={onSelect}
+        >
+          <InvoiceCard highlighted={highlightInvoice} />
+        </button>
+      ) : null}
+    </div>
+  )
+}
+
+function MessagePartsChat({
+  onApprove,
+  pin,
+  step,
+  stepIndex,
+  toolState,
+}: {
+  onApprove: () => void
+  pin: (index: number) => void
+  step: (typeof partSteps)[number]
+  stepIndex: number
+  toolState: ToolCallState | 'pending'
+}) {
+  const reached = (part: HighlightPart) => stepIndex >= partStepIndex[part]
+  const showThinking = reached('thinking')
+  const showTool = reached('tool-call')
+  const showResult = reached('tool-result')
+  const showText = reached('text')
+  const previewState = toolState === 'pending' ? 'awaiting-input' : toolState
+
+  return (
+    <div className="flex h-full min-h-128 flex-col overflow-hidden rounded-lg">
+      <div className="flex items-center gap-3 border-b border-border-subtle px-4 py-3">
+        <span className="flex size-8 items-center justify-center rounded-full bg-[rgb(var(--landing-glow)/0.16)] text-(--landing-accent-bright)">
+          <RobotIcon aria-hidden="true" size={16} weight="fill" />
+        </span>
+        <span className="min-w-0 flex-1">
+          <span className="block text-ds-label-md text-text-primary">
+            Invoices
+          </span>
+          <span className="block text-ds-body-xs text-text-primary/45">
+            Billing support
+          </span>
+        </span>
+        <span className="flex items-center gap-1.5 text-ds-label-sm text-text-primary/45">
+          <span
+            aria-hidden="true"
+            className="size-1.5 rounded-full bg-(--landing-accent-bright)"
+          />
+          Online
+        </span>
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-auto px-4 py-4">
+        <div className="max-w-[85%] self-end rounded-2xl rounded-br-md bg-[rgb(var(--landing-glow)/0.12)] px-3.5 py-2.5 text-ds-body-sm leading-6 text-text-primary">
+          Was invoice 2231 paid?
+        </div>
+
+        {reached('message') ? (
+          <div
+            className={`flex gap-3 rounded-xl p-2 ${chatHighlightClass(step.part === 'message')}`}
+          >
+            <button
+              type="button"
+              aria-label="Message component"
+              aria-pressed={step.part === 'message'}
+              className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-text-primary/8 text-text-primary/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright)"
+              onClick={() => pin(partStepIndex.message)}
+            >
+              <RobotIcon aria-hidden="true" size={14} weight="fill" />
+            </button>
+            <div className="min-w-0 flex-1 space-y-3">
+              {showThinking ? (
+                <button
+                  type="button"
+                  aria-pressed={step.part === 'thinking'}
+                  className={`block w-full rounded-lg px-1 py-0.5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) ${chatHighlightClass(step.part === 'thinking')}`}
+                  onClick={() => pin(partStepIndex.thinking)}
+                >
+                  <span className="text-ds-label-sm text-text-primary/45">
+                    {step.part === 'thinking'
+                      ? 'Thinking'
+                      : 'Thought for 2 seconds'}
+                  </span>
+                  <span className="mt-1 block text-ds-body-xs leading-5 text-text-primary/55">
+                    The user asked about invoice 2231. I will look it up before
+                    I answer.
+                  </span>
+                </button>
+              ) : null}
+
+              {showTool ? (
+                <ToolCallPreview
+                  highlighted={step.part === 'tool-call'}
+                  onApprove={onApprove}
+                  onSelect={() => pin(partStepIndex['tool-call'])}
+                  toolState={previewState}
+                />
+              ) : null}
+
+              {showResult ? (
+                <button
+                  type="button"
+                  aria-pressed={step.part === 'tool-result'}
+                  className={`block w-full rounded-lg px-1 py-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) ${chatHighlightClass(step.part === 'tool-result')}`}
+                  onClick={() => pin(partStepIndex['tool-result'])}
+                >
+                  <span className="text-ds-body-xs text-text-primary/50">
+                    Loaded invoice INV-2231
+                  </span>
+                </button>
+              ) : null}
+
+              {showText ? (
+                <button
+                  type="button"
+                  aria-pressed={step.part === 'text'}
+                  className={`block w-full rounded-lg px-1 py-0.5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) ${chatHighlightClass(step.part === 'text')}`}
+                  onClick={() => pin(partStepIndex.text)}
+                >
+                  <span className="block text-ds-body-sm leading-6 text-text-primary">
+                    Yes. Invoice 2231 was paid in full on 12 March 2026, for
+                    $1,240.00.
+                    {step.part === 'text' ? (
+                      <span className="ml-0.5 inline-block h-3.5 w-1.5 animate-pulse bg-(--landing-accent-bright) align-middle motion-reduce:animate-none" />
+                    ) : null}
+                  </span>
+                </button>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="border-t border-border-subtle p-3">
+        <div className="flex items-center gap-2 rounded-xl border border-border-default bg-background-default px-3 py-2">
+          <span className="min-w-0 flex-1 text-ds-body-sm text-text-primary/35">
+            Ask a follow-up
+          </span>
+          <span
+            aria-hidden="true"
+            className="flex size-8 items-center justify-center rounded-lg bg-text-primary/8 text-text-primary/35"
+          >
+            <ArrowRightIcon size={14} weight="bold" />
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 function MessageParts() {
   const [stepIndex, setStepIndex] = React.useState(partSteps.length - 1)
   const [pinned, setPinned] = React.useState(false)
@@ -600,41 +901,11 @@ function MessageParts() {
 
   const step = partSteps[stepIndex] ?? { part: 'text' }
   const toolState: ToolCallState | 'pending' =
-    step.part === 'thinking'
-      ? 'pending'
-      : step.part === 'tool-call'
-        ? step.toolState
-        : 'complete'
-  const parts = [
-    {
-      type: 'thinking',
-      detail: 'Checking the invoice before answering.',
-      state: 'complete',
-    },
-    // Rows after the active one stay mounted as pending so the list never
-    // changes height.
-    {
-      type: 'tool-call',
-      detail: 'lookupInvoice({ id: "inv_2231" })',
-      state: toolState,
-    },
-    {
-      type: 'tool-result',
-      detail: '{ total: 1240, status: "paid" }',
-      state: toolState === 'complete' ? 'complete' : 'pending',
-    },
-    {
-      type: 'text',
-      detail: 'Invoice 2231 was paid in full on',
-      state:
-        step.part === 'text'
-          ? 'streaming'
-          : toolState === 'complete'
-            ? 'complete'
-            : 'pending',
-    },
-  ]
-
+    step.part === 'tool-call'
+      ? step.toolState
+      : step.part === 'tool-result' || step.part === 'text'
+        ? 'complete'
+        : 'pending'
   const code = useHook ? hookCode : loopCode
   const isActive = (line: CodeLine) =>
     line.part === step.part &&
@@ -644,52 +915,12 @@ function MessageParts() {
   return (
     <LandingWindow label="message.parts">
       <p className="sr-only">
-        A message is a list of parts. A thinking part, then a tool call that
+        Each message is a list of parts. A thinking part, then a tool call that
         moves from awaiting input through approval to complete, then the tool
-        result and the streamed text reply. Below the list, the component
-        registered for the active part.
+        result and the streamed text reply. The chat on the right renders the
+        message and each part.
       </p>
-      <div
-        className="divide-y divide-border-subtle"
-        role="group"
-        aria-label="Message parts"
-      >
-        {parts.map((part) => (
-          <button
-            key={part.type}
-            type="button"
-            aria-pressed={part.type === step.part}
-            className={
-              part.state === 'pending'
-                ? 'grid w-full gap-1 p-4 text-left opacity-25 hover:opacity-60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--landing-accent-bright) sm:grid-cols-[7.5rem_1fr_auto] sm:items-center sm:gap-4'
-                : 'grid w-full gap-1 p-4 text-left hover:bg-text-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--landing-accent-bright) aria-pressed:bg-[rgb(var(--landing-glow)/0.06)] sm:grid-cols-[7.5rem_1fr_auto] sm:items-center sm:gap-4'
-            }
-            onClick={() =>
-              pin(partSteps.findIndex((item) => item.part === part.type))
-            }
-          >
-            <span className="font-ds-mono text-ds-mono-2xs text-(--landing-accent-bright)">
-              {part.type}
-            </span>
-            <span className="truncate font-ds-mono text-ds-mono-xs text-text-primary/70">
-              {part.detail}
-              {part.state === 'streaming' ? (
-                <span className="ml-0.5 inline-block h-3 w-1.5 animate-pulse bg-(--landing-accent-bright) align-middle motion-reduce:animate-none" />
-              ) : null}
-            </span>
-            <span
-              className={
-                part.state === 'complete' || part.state === 'pending'
-                  ? 'rounded-full border border-border-subtle px-2.5 py-1 font-ds-mono text-ds-mono-2xs text-text-primary/35'
-                  : 'rounded-full border border-(--landing-accent) bg-[rgb(var(--landing-glow)/0.14)] px-2.5 py-1 font-ds-mono text-ds-mono-2xs text-(--landing-accent-bright)'
-              }
-            >
-              {part.state}
-            </span>
-          </button>
-        ))}
-      </div>
-      <div className="border-t border-border-subtle p-4">
+      <div className="p-4">
         <p className="font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/25">
           tool-call lifecycle
         </p>
@@ -704,40 +935,56 @@ function MessageParts() {
               type="button"
               aria-pressed={toolState === state}
               className="rounded-md px-2 py-1 font-ds-mono text-ds-mono-2xs text-text-primary/35 hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-pressed:bg-[rgb(var(--landing-glow)/0.18)] aria-pressed:text-(--landing-accent-bright)"
-              onClick={() => pin(index + 1)}
+              onClick={() => pin(partStepIndex['tool-call'] + index)}
             >
               {state}
             </button>
           ))}
         </div>
       </div>
-      <div className="p-5">
-        <div className="mb-4 flex items-center gap-3 font-ds-mono text-ds-mono-2xs text-text-primary/50">
-          <button
-            type="button"
-            role="switch"
-            aria-checked={useHook}
-            aria-label="createChatHook"
-            className="group relative h-5 w-9 shrink-0 rounded-full bg-text-primary/15 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-checked:bg-(--landing-accent)"
-            onClick={() => setUseHook((current) => !current)}
-          >
-            <span className="absolute top-0.5 left-0.5 size-4 rounded-full bg-white transition-transform group-aria-checked:translate-x-4" />
-          </button>
-          <span aria-hidden="true">createChatHook</span>
-        </div>
-        <div className={codeSurfaceClass} aria-hidden="true">
-          {code.map((line, index) => (
-            <p
-              key={index}
-              className={
-                isActive(line)
-                  ? 'whitespace-pre text-(--landing-accent-bright)'
-                  : 'whitespace-pre text-text-primary/40'
-              }
+      <div className="grid min-w-0 lg:grid-cols-2">
+        <div className="min-w-0 border-t border-border-subtle p-5 lg:border-r">
+          <div className="mb-4 flex items-center gap-3 font-ds-mono text-ds-mono-2xs text-text-primary/50">
+            <button
+              type="button"
+              role="switch"
+              aria-checked={useHook}
+              aria-label="createChatHook"
+              className="group relative h-5 w-9 shrink-0 rounded-full bg-text-primary/15 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) aria-checked:bg-(--landing-accent)"
+              onClick={() => setUseHook((current) => !current)}
             >
-              {line.text}
-            </p>
-          ))}
+              <span className="absolute top-0.5 left-0.5 size-4 rounded-full bg-white transition-transform group-aria-checked:translate-x-4" />
+            </button>
+            <span aria-hidden="true">createChatHook</span>
+          </div>
+          <div className={codeSurfaceClass} aria-hidden="true">
+            {code.map((line, index) => (
+              <p
+                key={index}
+                className={
+                  isActive(line)
+                    ? 'whitespace-pre text-(--landing-accent-bright)'
+                    : 'whitespace-pre text-text-primary/40'
+                }
+              >
+                {line.text}
+              </p>
+            ))}
+          </div>
+        </div>
+        <div className="min-w-0 border-t border-border-subtle p-3 lg:border-l-0">
+          <MessagePartsChat
+            onApprove={() =>
+              pin(
+                partStepIndex['tool-call'] +
+                  toolCallStates.indexOf('approval-responded'),
+              )
+            }
+            pin={pin}
+            step={step}
+            stepIndex={stepIndex}
+            toolState={toolState}
+          />
         </div>
       </div>
     </LandingWindow>
diff --git a/src/components/landing/LandingPromptBox.tsx b/src/components/landing/LandingPromptBox.tsx
index a3d8cc582..8857ca90e 100644
--- a/src/components/landing/LandingPromptBox.tsx
+++ b/src/components/landing/LandingPromptBox.tsx
@@ -120,7 +120,7 @@ export function LandingPromptBox() {
   }
 
   return (
-    <div className="mt-6 w-full max-w-136">
+    <div className="mt-6 w-full">
       <p className="flex items-center gap-2 text-ds-body-sm text-text-primary">
         <SparkleIcon aria-hidden="true" size={16} weight="fill" />
         Using an AI coding agent? Install the TanStack AI skills:
@@ -171,25 +171,47 @@ export function LandingPromptBox() {
           </DropdownContent>
         </Dropdown>
       </div>
-      <p className="mt-4 text-ds-body-sm text-text-secondary">
-        {agent.description}
-      </p>
-      <div className="mt-3 flex items-center gap-2 rounded-lg bg-text-primary/4 px-3 py-2.5">
-        <pre className="min-w-0 flex-1 whitespace-pre-wrap wrap-anywhere font-ds-mono text-ds-mono-xs text-text-primary/80">
-          {agent.command}
+      <div className="mt-4 overflow-hidden rounded-xl border border-border-default bg-gray-100 dark:bg-ds-neutral-500">
+        <div className="flex items-center gap-3 border-b border-border-subtle px-3 py-2">
+          <div aria-hidden="true" className="flex gap-1.5">
+            <span className="size-2.5 rounded-full bg-[#ff5f57]" />
+            <span className="size-2.5 rounded-full bg-[#febc2e]" />
+            <span className="size-2.5 rounded-full bg-[#28c840]" />
+          </div>
+          <span className="min-w-0 flex-1 truncate font-ds-mono text-ds-mono-caps-xs uppercase text-text-primary/55">
+            {agent.name}
+          </span>
+          <button
+            type="button"
+            aria-label={copied ? 'Copied' : 'Copy install instructions'}
+            onClick={onCopy}
+            className="flex size-8 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-text-primary/8 hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright) active:scale-[0.96]"
+          >
+            {copied ? (
+              <CheckCircleIcon size={16} aria-hidden="true" />
+            ) : (
+              <CopyIcon size={16} aria-hidden="true" />
+            )}
+          </button>
+        </div>
+        <pre className="overflow-x-auto px-4 py-3 font-ds-mono text-ds-mono-xs leading-6 text-text-primary">
+          <span className="block text-text-primary/40">
+            # {agent.description}
+          </span>
+          {agent.command.split('\n').map((line, index) => (
+            <span key={`${agent.id}-${index}`} className="mt-1 flex gap-2">
+              <span
+                aria-hidden="true"
+                className="shrink-0 select-none text-(--landing-accent-bright)"
+              >
+                ❯
+              </span>
+              <span className="min-w-0 wrap-anywhere whitespace-pre-wrap">
+                {line}
+              </span>
+            </span>
+          ))}
         </pre>
-        <button
-          type="button"
-          aria-label={copied ? 'Copied' : 'Copy install instructions'}
-          onClick={onCopy}
-          className="shrink-0 text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--landing-accent-bright)"
-        >
-          {copied ? (
-            <CheckCircleIcon size={16} aria-hidden="true" />
-          ) : (
-            <CopyIcon size={16} aria-hidden="true" />
-          )}
-        </button>
       </div>
       <Link
         to="/$libraryId/$version/docs/$"
diff --git a/src/components/landing/LibraryLanding.tsx b/src/components/landing/LibraryLanding.tsx
index f0663ddc8..20cbc89d2 100644
--- a/src/components/landing/LibraryLanding.tsx
+++ b/src/components/landing/LibraryLanding.tsx
@@ -87,6 +87,7 @@ export type LibraryLandingShellProps = {
   libraryId: LibraryLandingId
   prompt?: string
   promptLabel?: string
+  stackHero?: boolean
 }
 
 type LibraryLandingTheme = {
@@ -216,6 +217,7 @@ export function LibraryLandingShell({
   libraryId,
   prompt,
   promptLabel,
+  stackHero = false,
 }: LibraryLandingShellProps) {
   const library = getLibrary(libraryId)
   const { version } = useParams({ strict: false })
@@ -249,8 +251,14 @@ export function LibraryLandingShell({
         />
 
         <div className="relative mx-auto w-full max-w-384 px-5 py-14 md:px-10 lg:px-12 lg:py-16 2xl:px-20">
-          <div className="grid items-start gap-12 xl:min-h-116 xl:grid-cols-[minmax(25rem,0.82fr)_minmax(34rem,1.18fr)] xl:gap-10">
-            <div className="max-w-140">
+          <div
+            className={
+              stackHero
+                ? 'grid items-start gap-12'
+                : 'grid items-start gap-12 xl:min-h-116 xl:grid-cols-[minmax(25rem,0.82fr)_minmax(34rem,1.18fr)] xl:gap-10'
+            }
+          >
+            <div className={stackHero ? 'w-full min-w-0' : 'max-w-140'}>
               <div className="flex flex-wrap items-start gap-3">
                 <div>
                   <img
@@ -278,10 +286,22 @@ export function LibraryLandingShell({
                 ) : null}
               </div>
 
-              <p className="mt-10 max-w-120 text-ds-heading-4 text-text-primary">
+              <p
+                className={
+                  stackHero
+                    ? 'mt-10 text-ds-heading-4 text-text-primary'
+                    : 'mt-10 max-w-120 text-ds-heading-4 text-text-primary'
+                }
+              >
                 {headline}
               </p>
-              <p className="mt-5 max-w-136 text-ds-body-sm text-text-secondary sm:text-ds-body-md">
+              <p
+                className={
+                  stackHero
+                    ? 'mt-5 text-ds-body-sm text-text-secondary sm:text-ds-body-md'
+                    : 'mt-5 max-w-136 text-ds-body-sm text-text-secondary sm:text-ds-body-md'
+                }
+              >
                 {description}
               </p>
 
@@ -315,7 +335,7 @@ export function LibraryLandingShell({
               </div>
             </div>
 
-            {hero}
+            {stackHero ? <div className="w-full min-w-0">{hero}</div> : hero}
           </div>
 
           {library.statsAvailable === false ? null : (
diff --git a/src/styles/app.css b/src/styles/app.css
index 10926a505..7cb4d5e94 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -1953,6 +1953,60 @@ button {
   @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300;
 }
 
+.library-status-badge-rc {
+  position: relative;
+  isolation: isolate;
+  background: linear-gradient(
+    135deg,
+    color-mix(
+      in srgb,
+      var(--landing-accent, var(--color-ds-terracotta-400)) 84%,
+      black
+    ),
+    color-mix(
+      in srgb,
+      var(--landing-accent, var(--color-ds-terracotta-400)) 52%,
+      black
+    )
+  );
+  color: #fff;
+}
+.library-status-badge-rc::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: inherit;
+  border: 1px solid rgb(var(--landing-glow, 195 80 43) / 0.55);
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .library-status-badge-rc {
+    animation: library-badge-rc-glow 2.4s ease-in-out infinite;
+  }
+  .library-status-badge-rc::after {
+    animation: library-badge-rc-ring 2.4s cubic-bezier(0.2, 0, 0, 1) infinite;
+  }
+}
+@keyframes library-badge-rc-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgb(var(--landing-glow, 195 80 43) / 0.45);
+  }
+  50% {
+    box-shadow: 0 0 14px 2px rgb(var(--landing-glow, 195 80 43) / 0.4);
+  }
+}
+@keyframes library-badge-rc-ring {
+  0% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.28);
+  }
+}
+
 /* Text utilities */
 .text-secondary {
   @apply text-gray-600 dark:text-gray-400;