diff --git a/.agents/analytics.md b/.agents/analytics.md
new file mode 100644
index 000000000..bcd12c824
--- /dev/null
+++ b/.agents/analytics.md
@@ -0,0 +1,375 @@
+# Analytics
+
+Reference for the TanStack.com event taxonomy in Google Analytics 4.
+
+**GA4 property:** `G-JMT1Z50SPS`
+**First-party proxy:** all hits route through `/_a/g/collect` on tanstack.com (see `netlify.toml`)
+**Implementation:** [src/utils/analytics.ts](../src/utils/analytics.ts), [src/utils/analytics/events.ts](../src/utils/analytics/events.ts)
+
+## Design principles
+
+1. **Event names describe what happened.** Properties carry context. Adding a new partner placement is an enum value, not a new event.
+2. **One event per outcome, not per intent.** No `_clicked`/`_attempted` events when an outcome event is going to fire anyway.
+3. **No per-row events.** Counts and joined-string arrays as properties, not N rows per generation.
+4. **Session context propagates.** Slow-changing props like `mode_used` and `idea_used` are stamped on every builder event so any breakdown works without joins.
+5. **Typed registry.** Wrong props for an event = TypeScript error, not silent bad data.
+
+---
+
+## The funnel
+
+Application Builder, four steps. No `OR` conditions, no overlapping event names.
+
+| #   | Step                  | Event               | Filter                            |
+| --- | --------------------- | ------------------- | --------------------------------- |
+| 1   | Landed on builder     | `page_view`         | `page_type = application_builder` |
+| 2   | Got an analysis       | `builder_analyzed`  | —                                 |
+| 3   | Got a generation      | `builder_generated` | —                                 |
+| 4   | Took action on result | `builder_activated` | —                                 |
+
+Drop-off between any two steps is unambiguous.
+
+**Failure rates** are separate explorations, not branches off the funnel:
+
+- Analysis failure rate = `builder_failed[stage=analysis]` ÷ (`builder_analyzed` + `builder_failed[stage=analysis]`)
+- Generation failure rate = `builder_failed[stage=generation]` ÷ (`builder_generated` + `builder_failed[stage=generation]`)
+- Login wall rate = `builder_failed[stage=login_blocked]` ÷ `page_view[page_type=application_builder]`
+
+---
+
+## Event reference (9 events)
+
+Every event automatically receives `page_location`, `page_path`, `page_title`, `page_type` from the analytics utility.
+
+### `page_view`
+
+Fires on initial load (auto from gtag config) and on every SPA navigation.
+
+| Prop            | Type   | Notes                                                                                                                          |
+| --------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------ |
+| `page_location` | string | Full URL                                                                                                                       |
+| `page_path`     | string | Pathname                                                                                                                       |
+| `page_title`    | string | `document.title`                                                                                                               |
+| `page_type`     | enum   | `home`, `partners_index`, `partner_detail`, `blog_index`, `blog_post`, `docs`, `partners_embed`, `application_builder`, `page` |
+
+---
+
+### `partner_viewed`
+
+A partner UI element scrolled ≥50% into the viewport. Fires once per element-mount per session (the underlying `IntersectionObserver` disconnects after first fire).
+
+| Prop         | Type    | Notes                                               |
+| ------------ | ------- | --------------------------------------------------- |
+| `partner_id` | string  | Stable partner identifier                           |
+| `placement`  | enum    | See `PartnerPlacement` below                        |
+| `slot_index` | number? | Position in the surface (0-indexed) when applicable |
+
+**Note on inflation:** when filters change on the partners directory, cards unmount/remount and `partner_viewed` re-fires. Treat session-unique impressions as the dedup'd metric (compute in BigQuery with `FIRST_VALUE(... PARTITION BY session_id, partner_id)`).
+
+---
+
+### `partner_clicked`
+
+User clicked a partner UI element to navigate somewhere.
+
+| Prop               | Type    | Notes                                                                      |
+| ------------------ | ------- | -------------------------------------------------------------------------- |
+| `partner_id`       | string  |                                                                            |
+| `placement`        | enum    | See `PartnerPlacement` below                                               |
+| `destination`      | enum    | `external` (partner's site) or `internal_detail` (our partner detail page) |
+| `destination_host` | string? | Host of the destination URL when `external`                                |
+| `slot_index`       | number? | Position in the surface when applicable                                    |
+
+CTR per placement = `partner_clicked` ÷ `partner_viewed` filtered to same `placement`.
+
+---
+
+### `partner_filter_applied`
+
+User changed the filter state on the partners directory.
+
+| Prop              | Type           | Notes                                                                                         |
+| ----------------- | -------------- | --------------------------------------------------------------------------------------------- |
+| `change`          | enum           | `libraries_changed`, `status_changed`, `cleared_all`                                          |
+| `library_filters` | string         | Comma-joined library ids in the filter, or empty string                                       |
+| `status_filter`   | string \| null | `null` means "no status filter applied" — distinguishes from "user explicitly chose 'active'" |
+| `result_count`    | number         | Number of partners visible after the filter                                                   |
+
+---
+
+### `partner_inquiry_started`
+
+User clicked a "get in touch", "let's chat", or "become a partner" CTA.
+
+| Prop        | Type | Notes                                                      |
+| ----------- | ---- | ---------------------------------------------------------- |
+| `placement` | enum | `partners_index_cta`, `library_callout`, `docs_right_rail` |
+
+---
+
+### `builder_analyzed`
+
+Analysis API call succeeded. Outcome event — always preceded by user intent, no separate `_requested` event.
+
+| Prop                     | Type    | Notes                                         |
+| ------------------------ | ------- | --------------------------------------------- |
+| `mode_used`              | enum    | Session context: `lucky`, `confident`, `none` |
+| `idea_used`              | string  | Session context: idea label, or `none`        |
+| `analysis_deployment`    | string? | Inferred deploy target                        |
+| `inferred_library_count` | number  |                                               |
+| `inferred_partner_count` | number  |                                               |
+| `feature_count`          | number  |                                               |
+
+---
+
+### `builder_generated`
+
+Generation API call succeeded.
+
+| Prop                    | Type    | Notes                                                                  |
+| ----------------------- | ------- | ---------------------------------------------------------------------- |
+| `mode_used`             | enum    | Session context                                                        |
+| `idea_used`             | string  | Session context                                                        |
+| `final_deployment`      | string? | The chosen deploy target on the final result                           |
+| `final_package_manager` | string  | `pnpm`, `npm`, `yarn`, `bun`                                           |
+| `final_library_count`   | number  |                                                                        |
+| `final_partner_count`   | number  |                                                                        |
+| `final_addon_count`     | number  |                                                                        |
+| `library_ids`           | string  | Comma-joined LibraryIds — use `SPLIT()` in BigQuery for top-N analysis |
+| `partner_ids`           | string  | Comma-joined                                                           |
+| `addon_ids`             | string  | Comma-joined                                                           |
+
+---
+
+### `builder_failed`
+
+Single umbrella event for analysis failures, generation failures, and login-wall blocks. Use the `stage` prop to distinguish.
+
+| Prop                              | Type    | Notes                                                                                        |
+| --------------------------------- | ------- | -------------------------------------------------------------------------------------------- |
+| `mode_used`                       | enum    | Session context                                                                              |
+| `idea_used`                       | string  | Session context                                                                              |
+| `stage`                           | enum    | `analysis`, `generation`, `login_blocked`                                                    |
+| `error_message`                   | string? | Free-form error message — high cardinality, don't register as a dimension; query in BigQuery |
+| `retry_after`                     | number? | Seconds until retry permitted (login_blocked only)                                           |
+| `anonymous_generations_remaining` | number? | When the failure was rate-limit related                                                      |
+
+---
+
+### `builder_activated`
+
+User took an action on the generated result. Single event with `action` prop covers all post-generation actions.
+
+| Prop        | Type    | Notes                                                                                                                        |
+| ----------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `mode_used` | enum    | Session context                                                                                                              |
+| `idea_used` | string  | Session context                                                                                                              |
+| `action`    | enum    | See `BuilderAction` below                                                                                                    |
+| `surface`   | enum    | `result_panel` (main builder UI) or `deploy_dialog`                                                                          |
+| `provider`  | string? | Deploy provider when applicable: `vercel`, `netlify`, `cloudflare`                                                           |
+| `automatic` | boolean | `true` for system-driven actions (e.g., deploy_dialog auto-redirect countdown). Filter to `false` for true user click rates. |
+
+**Important:** automatic prompt-copies that fire as a side-effect of generation do NOT emit `builder_activated`. Only user-driven actions count as activation.
+
+---
+
+## Enums
+
+### `PartnerPlacement`
+
+| Value                | Where it appears                                                                                                                  |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `directory`          | Partner cards in `/partners` index                                                                                                |
+| `detail`             | Partner detail page CTA                                                                                                           |
+| `docs_rail`          | Right rail on docs pages — partner cards AND the "Become a Partner" link both fire with this placement (event name distinguishes) |
+| `blog_rail`          | Right rail on blog pages                                                                                                          |
+| `grid`               | Generic partners grid (fallback)                                                                                                  |
+| `home_grid`          | Home page social-proof grid                                                                                                       |
+| `library_grid`       | Library page partners section — filter `page_path` to know which library                                                          |
+| `embed_grid`         | Partners embed view                                                                                                               |
+| `docs_strip`         | Mobile partner strip in docs                                                                                                      |
+| `ecosystem_game`     | 3D ecosystem game islands                                                                                                         |
+| `partners_index_cta` | "Get in touch" mailto on `/partners`                                                                                              |
+| `library_callout`    | "Let's chat" callout per library                                                                                                  |
+
+### `BuilderAction`
+
+| Value                      | Means                                                                  |
+| -------------------------- | ---------------------------------------------------------------------- |
+| `copy_prompt`              | User clicked a copy button on the prompt                               |
+| `deploy`                   | Started a deploy through the deploy dialog                             |
+| `clone_repo`               | Cloned the GitHub repo                                                 |
+| `open_codex`               | Opened the result in Codex                                             |
+| `open_claude`              | Opened the result in Claude                                            |
+| `open_cursor`              | Opened the result in Cursor                                            |
+| `download`                 | Downloaded the project as a zip                                        |
+| `open_advanced`            | Opened the advanced builder editor                                     |
+| `netlify_start`            | Started a Netlify deploy from the result                               |
+| `provider_redirect_manual` | User clicked through to deploy provider                                |
+| `provider_redirect_auto`   | Countdown auto-redirected user to deploy provider (`automatic = true`) |
+| `open_repo`                | Opened the project repo from the deploy dialog                         |
+
+---
+
+## Session context
+
+`mode_used` and `idea_used` are tracked in the builder hook and stamped on **every** builder event. This means any builder event can be sliced by mode or idea without session joins.
+
+**`mode_used`** transitions:
+
+- `none` → `lucky` when user clicks "I'm feeling lucky"
+- `none` → `confident` when user clicks "I'm feeling confident"
+
+**`idea_used`** transitions:
+
+- `none` → idea label string when user picks a suggested idea
+- Reset back to `none` if user clears or types fresh input (TBD — currently sticks for the session)
+
+---
+
+## Custom dimensions to register in GA4
+
+Admin → Custom definitions → Create custom dimension. **Event scope** for all of these. Without registration, they're stored in BigQuery export but invisible in the GA4 UI.
+
+| Dimension name        | API name                | Used on                                                  |
+| --------------------- | ----------------------- | -------------------------------------------------------- |
+| Placement             | `placement`             | partner_viewed, partner_clicked, partner_inquiry_started |
+| Partner ID            | `partner_id`            | partner_viewed, partner_clicked                          |
+| Mode used             | `mode_used`             | all builder events                                       |
+| Idea used             | `idea_used`             | all builder events                                       |
+| Action                | `action`                | builder_activated                                        |
+| Surface               | `surface`               | builder_activated                                        |
+| Stage                 | `stage`                 | builder_failed                                           |
+| Final deployment      | `final_deployment`      | builder_generated                                        |
+| Final package manager | `final_package_manager` | builder_generated                                        |
+| Final library count   | `final_library_count`   | builder_generated                                        |
+| Final partner count   | `final_partner_count`   | builder_generated                                        |
+| Page type             | `page_type`             | all events                                               |
+
+12 dimensions. Well under the 50-dimension event-scoped limit.
+
+**Don't register:** `error_message`, `library_ids`, `partner_ids`, `addon_ids`, `destination_host`. High cardinality. Query in BigQuery.
+
+---
+
+## Common GA4 queries
+
+### "What's our funnel completion rate?"
+
+**Explore → Funnel exploration**, four steps as defined above. Open funnel. Show elapsed time.
+
+### "Lucky vs Confident: which mode converts better?"
+
+Same funnel, breakdown dropdown = `mode_used`. Compare side by side.
+
+### "Which deploy targets do successful generations land on?"
+
+**Explore → Free-form**, dimension = `final_deployment`, metric = event count of `builder_generated`.
+
+### "What % of users hit the login wall?"
+
+Free-form, filter `event_name = builder_failed`, breakdown by `stage`.
+
+### "Which placement converts best for partner discovery?"
+
+Free-form, filter `event_name = partner_clicked OR partner_viewed`, breakdown by `placement`. Compute CTR yourself: clicks ÷ views per placement.
+
+### "Top 10 libraries in completed generations"
+
+Requires BigQuery — `library_ids` is high-cardinality. Sample query:
+
+```sql
+SELECT
+  library_id,
+  COUNT(*) AS generations
+FROM `tanstack.analytics_*.events_*`,
+UNNEST(SPLIT((SELECT value.string_value
+              FROM UNNEST(event_params)
+              WHERE key = 'library_ids'), ',')) AS library_id
+WHERE event_name = 'builder_generated'
+  AND _TABLE_SUFFIX BETWEEN '20260101' AND '20260131'
+GROUP BY library_id
+ORDER BY generations DESC
+LIMIT 10
+```
+
+---
+
+## BigQuery export
+
+**Strongly recommended.** Free at our event volume. Without it, anything beyond stock reports is painful.
+
+Setup:
+
+1. GA4 Admin → BigQuery Links → Link
+2. Pick a GCP project, daily export, US multi-region
+3. Tables appear at `tanstack.analytics_<property_id>.events_YYYYMMDD` after ~24h
+
+Once enabled, all event properties are queryable — including the ones not registered as custom dimensions. Use SQL for everything dimensional or aggregate-heavy. Use the GA4 UI for funnel exploration and headline numbers.
+
+---
+
+## Adding new events
+
+Anything additive should not require schema migration of the existing taxonomy.
+
+**Add a new partner placement:**
+
+1. Add the value to `PartnerPlacement` in [src/utils/analytics/events.ts](../src/utils/analytics/events.ts)
+2. Use it at the call site
+3. (Optional) update the placement table in this doc
+
+**Add a new builder action:**
+
+1. Add the value to `BuilderAction`
+2. Use it at the `builder_activated` call site
+
+**Add a new event:**
+
+1. Add a new union member to `AnalyticsEvent` with its prop interface
+2. Call `trackEvent({ name: '...', props: { ... } })`
+3. Register relevant breakdown props as custom dimensions in GA4 admin
+4. Document the event in this file
+
+**Don't:** add new properties to existing events without updating both the type definition and this doc. Schema drift in analytics events is the slowest bug to detect.
+
+---
+
+## Code locations
+
+| File                                                                                  | Purpose                                                              |
+| ------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
+| [src/utils/analytics.ts](../src/utils/analytics.ts)                                   | `trackEvent`, `useTrackedImpression`, `trackPageView`, `getPageType` |
+| [src/utils/analytics/events.ts](../src/utils/analytics/events.ts)                     | Typed event registry — discriminated union of all events             |
+| [src/utils/analytics/providers/google.ts](../src/utils/analytics/providers/google.ts) | gtag wrapper                                                         |
+| [src/utils/analytics/types.ts](../src/utils/analytics/types.ts)                       | Provider interface                                                   |
+| [src/routes/\_\_root.tsx](../src/routes/__root.tsx)                                   | gtag bootstrap, `PageViewTracker`                                    |
+| [netlify.toml](../netlify.toml)                                                       | First-party proxy redirects                                          |
+
+---
+
+## Migration history
+
+### 2026-05 — schema v2
+
+Collapsed 28 events into 9. Removed `application_starter_*` event family. Replaced with `builder_*` events. Mode and idea selection moved from standalone events into session-context props on every builder event.
+
+**Events removed entirely** (no replacement):
+
+- `application_starter_library_toggled`, `_integration_toggled`, `_package_manager_toggled`, `_toolchain_toggled` — config exploration depth no longer tracked. Final config is on `builder_generated`.
+- `application_starter_continue_clicked`, `_generate_clicked` — intent implied by outcome events.
+- `application_starter_login_clicked`, `_value_copied` (auto), `_builder_result_applied`, `_final_partner_in_prompt`, `_final_addon_in_prompt`.
+
+**Events folded into others:**
+
+- `application_starter_action_clicked` (mode_selected) → `mode_used` prop on subsequent events
+- `application_starter_idea_selected` → `idea_used` prop on subsequent events
+- `application_starter_login_required` → `builder_failed[stage=login_blocked]`
+- `application_starter_value_copied` (user trigger) → `builder_activated[action=copy_prompt]`
+- All other `application_starter_action_clicked` calls → `builder_activated`
+- `partner_card_clicked`, `partner_click` → `partner_clicked`
+- `partner_impression`, `partner_detail_viewed` → `partner_viewed`
+- `partners_filter_changed` → `partner_filter_applied`
+- `partner_inquiry_clicked`, `become_partner_clicked` → `partner_inquiry_started`
+
+Historical data with old event names is still queryable in GA4 and BigQuery. Cutover date: see git log for the migration commit.
diff --git a/.agents/index.md b/.agents/index.md
new file mode 100644
index 000000000..01316aeb9
--- /dev/null
+++ b/.agents/index.md
@@ -0,0 +1,19 @@
+# Agent Guidelines
+
+TanStack.com marketing site built with TanStack Start.
+
+## Essentials
+
+- Package manager: `pnpm`
+- Run `pnpm test` before commits not after every tiny edit
+- Don't run builds or tests after every change. This is a visual site; assume changes work unless reported otherwise.
+- Rely on `tsc` or your built-in LSP integration (hopefully you have this)
+- **Typesafety is paramount.** Never cast types; fix at source instead. See [typescript.md](./typescript.md).
+
+## Topic Guides
+
+- [TypeScript Conventions](./typescript.md): Type inference, casting rules, generic naming
+- [TanStack Patterns](./tanstack-patterns.md): Loaders, server functions, environment shaking
+- [UI Style Guide](./ui-style.md): Visual design principles for 2026
+- [Workflow](./workflow.md): Build commands, debugging, Playwright
+- [Analytics](./analytics.md): GA4 event taxonomy, funnel definition, custom dimensions
diff --git a/.agents/tanstack-patterns.md b/.agents/tanstack-patterns.md
new file mode 100644
index 000000000..d0ff4e278
--- /dev/null
+++ b/.agents/tanstack-patterns.md
@@ -0,0 +1,76 @@
+# TanStack Patterns
+
+## loaderDeps Must Be Specific
+
+Only include properties actually used in the loader. This ensures proper cache invalidation.
+
+```typescript
+// Bad: includes everything
+loaderDeps: ({ search }) => search,
+loader: async ({ deps }) => {
+  await fetchData({ page: deps.page, pageSize: deps.pageSize })
+}
+
+// Good: only what's used
+loaderDeps: ({ search }) => ({
+  page: search.page,
+  pageSize: search.pageSize,
+}),
+loader: async ({ deps }) => {
+  await fetchData({ page: deps.page, pageSize: deps.pageSize })
+}
+```
+
+## Loaders Are Isomorphic
+
+Loaders run on both server and client. They cannot directly access server-only APIs.
+
+```typescript
+// Bad: direct server API access
+loader: async () => {
+  const data = await fs.readFile('data.json')
+  return { data }
+}
+
+// Good: call a server function
+loader: async () => {
+  const data = await serverFn({ data: { id: '123' } })
+  return { data }
+}
+```
+
+## Environment Shaking
+
+TanStack Start strips any code not referenced by a `createServerFn` handler from the client build.
+
+- Server-only code (database, fs) is automatically excluded from client bundles
+- Only code inside `createServerFn` handlers goes to server bundles
+- Code outside handlers is included in both bundles
+
+## Importing Server Functions
+
+Server functions wrapped in `createServerFn` can be imported statically. Never use dynamic imports for server-only code in components.
+
+```typescript
+// Bad: dynamic import causes bundler issues
+const rolesQuery = useQuery({
+  queryFn: async () => {
+    const { listRoles } = await import('~/utils/roles.server')
+    return listRoles({ data: {} })
+  },
+})
+
+// Good: static import
+import { listRoles } from '~/utils/roles.server'
+
+const rolesQuery = useQuery({
+  queryFn: async () => listRoles({ data: {} }),
+})
+```
+
+## Server-Only Import Rules
+
+1. `createServerFn` wrappers can be imported statically anywhere
+2. Direct server-only code (database clients, fs) must only be imported:
+   - Inside `createServerFn` handlers
+   - In `*.server.ts` files
diff --git a/.agents/typescript.md b/.agents/typescript.md
new file mode 100644
index 000000000..e63301ec4
--- /dev/null
+++ b/.agents/typescript.md
@@ -0,0 +1,45 @@
+# TypeScript Conventions
+
+## Avoid Type Casting
+
+Never cast types unless absolutely necessary. This includes:
+
+- Manual generic type parameters (e.g., `<Type>`)
+- Type assertions using `as`
+- Type assertions using `satisfies`
+
+## Prefer Type Inference
+
+Infer types by going up the logical chain:
+
+1. **Schema validation** as source of truth (Convex, Zod, etc.)
+2. **Type inference** from function return types, API responses
+3. **Fix at source** (schema, API definition, function signature) rather than casting at point of use
+
+```typescript
+// Bad
+const result = api.getData() as MyType
+const value = getValue<MyType>()
+
+// Good
+const result = api.getData() // Type inferred from return type
+const value = getValue() // Type inferred from implementation
+```
+
+## Generic Type Parameter Naming
+
+All generic type parameters must be prefixed with `T`.
+
+```typescript
+// Bad
+function withCapability<Args extends unknown[], R>(
+  handler: (user: AuthUser, ...args: Args) => R,
+) { ... }
+
+// Good
+function withCapability<TArgs extends unknown[], TReturn>(
+  handler: (user: AuthUser, ...args: TArgs) => TReturn,
+) { ... }
+```
+
+Common names: `T`, `TArgs`, `TReturn`, `TData`, `TError`, `TKey`, `TValue`
diff --git a/.agents/ui-style.md b/.agents/ui-style.md
new file mode 100644
index 000000000..d696b3346
--- /dev/null
+++ b/.agents/ui-style.md
@@ -0,0 +1,52 @@
+# UI Style Guide 2026
+
+## Layout
+
+- Fewer, well-defined containers over many small sections
+- Generous spacing creates separation before adding visual effects
+- Cards are acceptable when they express grouping or hierarchy
+
+## Corners
+
+- Rounded corners are standard
+- Subtle radius values that feel intentional, not playful
+- Avoid sharp 90-degree corners unless intentionally industrial
+
+## Shadows and Depth
+
+- Soft, low-contrast, diffused shadows
+- Shadows imply separation, not elevation theatrics
+- No heavy drop shadows or strong directional lighting
+- One to two shadow layers max
+
+## Cards
+
+- Cards should feel grounded, not floating
+- Light elevation, border plus shadow, or surface contrast
+- Don't overuse cards as a default layout primitive
+
+## Color and Surfaces
+
+- Soft neutrals, off-whites, warm grays
+- Surface contrast or translucency instead of strong outlines
+- Glass/frosted effects acceptable when subtle and accessible
+
+## Interaction
+
+- Micro transitions reinforce spatial relationships
+- Hover/focus states feel responsive, not animated
+- No excessive motion or springy effects
+
+## Typography
+
+- Strong headings, calm body text
+- No visual noise around content
+
+## What to Avoid
+
+- Chunky shadows
+- Overly flat, sterile layouts
+- Neumorphism as primary style
+- Over-designed card grids
+
+**Summary: If depth does not improve comprehension, remove it.**
diff --git a/.agents/workflow.md b/.agents/workflow.md
new file mode 100644
index 000000000..07838ff50
--- /dev/null
+++ b/.agents/workflow.md
@@ -0,0 +1,46 @@
+# Workflow
+
+## Build Commands
+
+- `pnpm test`: Run at end of task batches
+- `pnpm build`: Only for build/bundler issues or verifying production output
+- `pnpm lint`: Check for code issues
+- `dev` runs indefinitely in watch mode
+
+Don't build after every change. This is a visual site; assume changes work.
+
+## Dev Authentication
+
+The dev server uses the real production database and OAuth. There are no auth bypasses.
+
+To authenticate a dev session, the human must run:
+
+```sh
+pnpm auth:login
+```
+
+This opens `tanstack.com`, completes OAuth, and saves `DEV_SESSION_TOKEN` to `.env.local`. The dev server then auto-injects that token as a session cookie on startup.
+
+If the user asks for help with anything requiring authentication (account pages, admin, mutations) and `DEV_SESSION_TOKEN` is not set in `.env.local`, tell them to run `pnpm auth:login` first and restart the dev server.
+
+## Debugging Visual Issues
+
+When something doesn't work or look right:
+
+1. Use Playwright MCP to view the page and debug visually
+2. Use `pnpm build` only for build/bundler issues
+3. Use `pnpm lint` for code issues
+
+## Playwright
+
+Playwright is available via `npx playwright` and should be used freely to interact with the running dev server like a human would. This includes testing, debugging, visual verification, design iteration, and general development workflows.
+
+Since the dev server runs with a real authenticated session (via `DEV_SESSION_TOKEN`), Playwright has full access to gated pages, account features, admin areas, and authenticated mutations — exactly as the signed-in user would.
+
+Common uses:
+
+- `npx playwright screenshot <url> <file>` — capture current state of any page
+- Navigate to a page, interact with elements, re-screenshot to verify changes
+- Debug layout/visual issues without needing a human to look
+- Verify authenticated flows end-to-end (account, showcase submissions, admin, etc.)
+- Iterate on UI by screenshotting, editing, screenshotting again
diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 000000000..7e34cf155
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,17 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "web",
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["dev"],
+      "port": 3000
+    },
+    {
+      "name": "db-studio",
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["db:studio"],
+      "port": 4983
+    }
+  ]
+}
diff --git a/.claude/tanstack-patterns.md b/.claude/tanstack-patterns.md
new file mode 120000
index 000000000..7335c6c22
--- /dev/null
+++ b/.claude/tanstack-patterns.md
@@ -0,0 +1 @@
+../.agents/tanstack-patterns.md
\ No newline at end of file
diff --git a/.claude/typescript.md b/.claude/typescript.md
new file mode 120000
index 000000000..bf4e25139
--- /dev/null
+++ b/.claude/typescript.md
@@ -0,0 +1 @@
+../.agents/typescript.md
\ No newline at end of file
diff --git a/.claude/ui-style.md b/.claude/ui-style.md
new file mode 120000
index 000000000..f59b7412f
--- /dev/null
+++ b/.claude/ui-style.md
@@ -0,0 +1 @@
+../.agents/ui-style.md
\ No newline at end of file
diff --git a/.claude/workflow.md b/.claude/workflow.md
new file mode 120000
index 000000000..c19e63b75
--- /dev/null
+++ b/.claude/workflow.md
@@ -0,0 +1 @@
+../.agents/workflow.md
\ No newline at end of file
diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
index e4a484469..b336e672a 100644
--- a/.github/workflows/autofix.yml
+++ b/.github/workflows/autofix.yml
@@ -18,11 +18,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
+          persist-credentials: false
       - name: Setup Tools
-        uses: tanstack/config/.github/setup@main
+        uses: tanstack/config/.github/setup@e4b48f16568324f76f467aa4c2aac2f05db632c3 # main
       - name: Fix formatting
         run: pnpm format
       - name: Apply fixes
diff --git a/.github/workflows/docs-links.yml b/.github/workflows/docs-links.yml
new file mode 100644
index 000000000..4771fdd25
--- /dev/null
+++ b/.github/workflows/docs-links.yml
@@ -0,0 +1,42 @@
+name: Docs Links
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 9 * * *'
+
+permissions:
+  contents: read
+
+jobs:
+  docs-links:
+    name: Docs Links
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Tools
+        uses: tanstack/config/.github/setup@e4b48f16568324f76f467aa4c2aac2f05db632c3 # main
+
+      - name: Check docs menu links
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          set +e
+          pnpm docs:links:check -- --json docs-menu-link-report.json
+          status=$?
+
+          if [ -f docs-menu-link-report.json ]; then
+            {
+              echo "### Docs menu link report"
+              echo
+              echo '```json'
+              cat docs-menu-link-report.json
+              echo '```'
+            } >> "$GITHUB_STEP_SUMMARY"
+          fi
+
+          exit $status
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index 41aec48b4..d4497f807 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -3,17 +3,21 @@ name: PR
 on:
   pull_request:
 
+permissions:
+  contents: read
+
 jobs:
   pr:
     name: PR
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v5.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
+          persist-credentials: false
       - name: Setup Tools
-        uses: tanstack/config/.github/setup@main
+        uses: tanstack/config/.github/setup@e4b48f16568324f76f467aa4c2aac2f05db632c3 # main
       - name: Run Build
         run: pnpm build
       - name: Run Tests
diff --git a/.github/workflows/update-tanstack-deps.yml b/.github/workflows/update-tanstack-deps.yml
index 60f23f758..7d4ad61d9 100644
--- a/.github/workflows/update-tanstack-deps.yml
+++ b/.github/workflows/update-tanstack-deps.yml
@@ -10,17 +10,20 @@ jobs:
   update-deps:
     name: Update TanStack Dependencies
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
     steps:
       - name: Git Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
+          # This scheduled job commits dependency updates back to the branch.
+          persist-credentials: true
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
 
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version-file: .nvmrc
           cache: pnpm
diff --git a/.github/workflows/zizmor.yml b/.github/workflows/zizmor.yml
new file mode 100644
index 000000000..1d4088db8
--- /dev/null
+++ b/.github/workflows/zizmor.yml
@@ -0,0 +1,25 @@
+name: GitHub Actions Security Analysis
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: ['**']
+
+permissions: {}
+
+jobs:
+  zizmor:
+    name: Run zizmor
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Run zizmor
+        uses: zizmorcore/zizmor-action@b1d7e1fb5de872772f31590499237e7cce841e8e # v0.5.3
+        with:
+          advanced-security: false
+          annotations: true
diff --git a/.gitignore b/.gitignore
index f7793cf5a..7021fe7e7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,12 +7,14 @@ drizzle/migrations
 .DS_Store
 .cache
 .env
+.env.*
 .vercel
 .output
 .vinxi
 .tanstack-start/build
 .nitro/*
 .netlify/*
+.wrangler/*
 
 /build/
 /api/
@@ -30,5 +32,8 @@ dist
 
 test-results
 .claude/CLAUDE.md
+.claude/worktrees
 .eslintcache
 .tsbuildinfo
+src/routeTree.gen.ts
+.og-preview/
diff --git a/.nvmrc b/.nvmrc
index ae0e6a25c..d9b042470 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v20.19.6
+v25.9.0
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
new file mode 100644
index 000000000..ac154e249
--- /dev/null
+++ b/.oxfmtrc.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "sortPackageJson": false,
+  "ignorePatterns": [
+    "**/api",
+    "**/build",
+    "**/public",
+    "pnpm-lock.yaml",
+    "routeTree.gen.ts",
+    "src/blog/tanstack-db-0.1-the-embedded-client-database-for-tanstack-query.md",
+    ".content-collections",
+    ".claude",
+    "dist/**",
+    ".output/**"
+  ]
+}
diff --git a/.oxlintrc.json b/.oxlintrc.json
new file mode 100644
index 000000000..f6467d88c
--- /dev/null
+++ b/.oxlintrc.json
@@ -0,0 +1,204 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript"],
+  "categories": {
+    "correctness": "off"
+  },
+  "options": {
+    "typeAware": true,
+    "typeCheck": true
+  },
+  "env": {
+    "builtin": true
+  },
+  "ignorePatterns": [
+    "node_modules",
+    "dist",
+    "build",
+    ".content-collections",
+    ".tanstack-start",
+    ".netlify",
+    "public",
+    "convex/.temp",
+    ".claude"
+  ],
+  "rules": {
+    "no-array-constructor": "error",
+    "no-unused-expressions": "error",
+    "no-unused-vars": "error",
+    "typescript/ban-ts-comment": "error",
+    "typescript/no-duplicate-enum-values": "error",
+    "typescript/no-empty-object-type": "error",
+    "typescript/no-explicit-any": "error",
+    "typescript/no-extra-non-null-assertion": "error",
+    "typescript/no-misused-new": "error",
+    "typescript/no-namespace": "error",
+    "typescript/no-non-null-asserted-optional-chain": "error",
+    "typescript/no-require-imports": "error",
+    "typescript/no-this-alias": "error",
+    "typescript/no-unnecessary-type-constraint": "error",
+    "typescript/no-unsafe-declaration-merging": "error",
+    "typescript/no-unsafe-function-type": "error",
+    "typescript/no-wrapper-object-types": "error",
+    "typescript/prefer-as-const": "error",
+    "typescript/prefer-namespace-keyword": "error",
+    "typescript/triple-slash-reference": "error"
+  },
+  "overrides": [
+    {
+      "files": ["**/*.{js,jsx}"],
+      "rules": {
+        "constructor-super": "error",
+        "for-direction": "error",
+        "no-async-promise-executor": "error",
+        "no-case-declarations": "error",
+        "no-class-assign": "error",
+        "no-compare-neg-zero": "error",
+        "no-cond-assign": "error",
+        "no-const-assign": "error",
+        "no-constant-binary-expression": "error",
+        "no-constant-condition": "error",
+        "no-control-regex": "error",
+        "no-debugger": "error",
+        "no-delete-var": "error",
+        "no-dupe-class-members": "error",
+        "no-dupe-else-if": "error",
+        "no-dupe-keys": "error",
+        "no-duplicate-case": "error",
+        "no-empty": "error",
+        "no-empty-character-class": "error",
+        "no-empty-pattern": "error",
+        "no-empty-static-block": "error",
+        "no-ex-assign": "error",
+        "no-extra-boolean-cast": "error",
+        "no-fallthrough": "error",
+        "no-func-assign": "error",
+        "no-global-assign": "error",
+        "no-import-assign": "error",
+        "no-invalid-regexp": "error",
+        "no-irregular-whitespace": "error",
+        "no-loss-of-precision": "error",
+        "no-misleading-character-class": "error",
+        "no-new-native-nonconstructor": "error",
+        "no-nonoctal-decimal-escape": "error",
+        "no-obj-calls": "error",
+        "no-prototype-builtins": "error",
+        "no-redeclare": "error",
+        "no-regex-spaces": "error",
+        "no-self-assign": "error",
+        "no-setter-return": "error",
+        "no-shadow-restricted-names": "error",
+        "no-sparse-arrays": "error",
+        "no-this-before-super": "error",
+        "no-unexpected-multiline": "error",
+        "no-unsafe-finally": "error",
+        "no-unsafe-negation": "error",
+        "no-unsafe-optional-chaining": "error",
+        "no-unused-labels": "error",
+        "no-unused-private-class-members": "error",
+        "no-useless-backreference": "error",
+        "no-useless-catch": "error",
+        "no-useless-escape": "error",
+        "no-with": "error",
+        "require-yield": "error",
+        "use-isnan": "error",
+        "valid-typeof": "error"
+      }
+    },
+    {
+      "files": ["**/*.ts", "**/*.tsx", "**/*.mts", "**/*.cts"],
+      "rules": {
+        "constructor-super": "off",
+        "no-class-assign": "off",
+        "no-const-assign": "off",
+        "no-dupe-class-members": "off",
+        "no-dupe-keys": "off",
+        "no-func-assign": "off",
+        "no-import-assign": "off",
+        "no-new-native-nonconstructor": "off",
+        "no-obj-calls": "off",
+        "no-redeclare": "off",
+        "no-setter-return": "off",
+        "no-this-before-super": "off",
+        "no-unsafe-negation": "off",
+        "no-var": "error",
+        "no-with": "off",
+        "prefer-const": "error",
+        "prefer-rest-params": "error",
+        "prefer-spread": "error"
+      }
+    },
+    {
+      "files": ["**/*.{ts,tsx}"],
+      "rules": {
+        "no-redeclare": "error",
+        "no-shadow": "off",
+        "no-unused-vars": [
+          "warn",
+          {
+            "argsIgnorePattern": "(^_)|(^__+$)|(^e$)|(^error$)",
+            "varsIgnorePattern": "(^_)|(^__+$)|(^e$)|(^error$)",
+            "caughtErrorsIgnorePattern": "(^_)|(^__+$)|(^e$)|(^error$)"
+          }
+        ],
+        "typescript/no-explicit-any": "off"
+      }
+    },
+    {
+      "files": ["**/*.{ts,tsx,js,jsx}"],
+      "rules": {
+        "jsx-a11y/alt-text": "error",
+        "jsx-a11y/anchor-ambiguous-text": "off",
+        "jsx-a11y/anchor-has-content": "error",
+        "jsx-a11y/anchor-is-valid": "error",
+        "jsx-a11y/aria-activedescendant-has-tabindex": "error",
+        "jsx-a11y/aria-props": "error",
+        "jsx-a11y/aria-proptypes": "error",
+        "jsx-a11y/aria-role": "error",
+        "jsx-a11y/aria-unsupported-elements": "error",
+        "jsx-a11y/autocomplete-valid": "error",
+        "jsx-a11y/click-events-have-key-events": "error",
+        "jsx-a11y/heading-has-content": "error",
+        "jsx-a11y/html-has-lang": "error",
+        "jsx-a11y/iframe-has-title": "error",
+        "jsx-a11y/img-redundant-alt": "error",
+        "jsx-a11y/label-has-associated-control": "error",
+        "jsx-a11y/media-has-caption": "error",
+        "jsx-a11y/mouse-events-have-key-events": "error",
+        "jsx-a11y/no-access-key": "error",
+        "jsx-a11y/no-autofocus": "error",
+        "jsx-a11y/no-distracting-elements": "error",
+        "jsx-a11y/no-noninteractive-tabindex": [
+          "error",
+          {
+            "tags": [],
+            "roles": ["tabpanel"],
+            "allowExpressionValues": true
+          }
+        ],
+        "jsx-a11y/no-redundant-roles": "error",
+        "jsx-a11y/no-static-element-interactions": [
+          "error",
+          {
+            "allowExpressionValues": true,
+            "handlers": [
+              "onClick",
+              "onMouseDown",
+              "onMouseUp",
+              "onKeyPress",
+              "onKeyDown",
+              "onKeyUp"
+            ]
+          }
+        ],
+        "jsx-a11y/role-has-required-aria-props": "error",
+        "jsx-a11y/role-supports-aria-props": "error",
+        "jsx-a11y/scope": "error",
+        "jsx-a11y/tabindex-no-positive": "error",
+        "react/rules-of-hooks": "error",
+        "react/exhaustive-deps": "warn"
+      },
+      "plugins": ["react", "jsx-a11y"]
+    }
+  ]
+}
diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index 48a895e6e..000000000
--- a/.prettierignore
+++ /dev/null
@@ -1,10 +0,0 @@
-**/api
-**/build
-**/public
-pnpm-lock.yaml
-routeTree.gen.ts
-src/blog/tanstack-db-0.1-the-embedded-client-database-for-tanstack-query.md
-.content-collections
-.claude
-dist/**
-.output/**
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index e3b414c7e..000000000
--- a/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "all"
-}
diff --git a/AGENTS.md b/AGENTS.md
deleted file mode 100644
index 71f08aceb..000000000
--- a/AGENTS.md
+++ /dev/null
@@ -1,330 +0,0 @@
-# Agent Guidelines
-
-## Typesafety
-
-**Typesafety is of utmost importance.**
-
-### Avoid Type Casting
-
-We **never ever** cast types unless it's absolutely necessary. This includes:
-
-- Manual generic type parameters (e.g., `<Type>`)
-- Type assertions using `as`
-- Type assertions using `satisfies`
-- Any other form of type casting
-
-### Prefer Type Inference
-
-Always infer types and go up the logical chain as far as we can control to determine types. The preferred approach is:
-
-1. **Schema validation** - Use schema definitions (e.g., Convex schema, Zod, etc.) as the source of truth
-2. **Type inference from concrete sources** - Let TypeScript infer types from function return types, API responses, etc.
-3. **Go up the chain** - Trace types back to their source rather than casting at the point of use
-
-### Example
-
-❌ **Bad:**
-
-```typescript
-const result = api.getData() as MyType
-const value = getValue<MyType>()
-```
-
-✅ **Good:**
-
-```typescript
-// Infer from schema or API definition
-const result = api.getData() // Type inferred from api.getData return type
-const value = getValue() // Type inferred from function implementation
-```
-
-If types need to be fixed, fix them at the source (schema, API definition, function signature) rather than casting at the point of use.
-
-### Generic Type Parameter Naming
-
-**All generic type parameters must be prefixed with `T`.**
-
-This convention makes it immediately clear that a name refers to a type parameter rather than a concrete type or value.
-
-❌ **Bad:**
-
-```typescript
-function withCapability<Args extends unknown[], R>(
-  handler: (user: AuthUser, ...args: Args) => R,
-) { ... }
-```
-
-✅ **Good:**
-
-```typescript
-function withCapability<TArgs extends unknown[], TReturn>(
-  handler: (user: AuthUser, ...args: TArgs) => TReturn,
-) { ... }
-```
-
-Common examples:
-
-- `T` for a single generic type
-- `TArgs` for argument types
-- `TReturn` for return types
-- `TData` for data types
-- `TError` for error types
-- `TKey` for key types
-- `TValue` for value types
-
-## Route Loaders
-
-### loaderDeps Must Be Specific
-
-**loaderDeps must always be specific to what's actually used in the loader.**
-
-Only include the properties from `search` (or other sources) that are actually used in the loader function. This ensures proper cache invalidation and prevents unnecessary re-runs when unrelated search params change.
-
-❌ **Bad:**
-
-```typescript
-loaderDeps: ({ search }) => search, // Includes everything, even unused params
-loader: async ({ deps }) => {
-  // Only uses deps.page and deps.pageSize
-  await fetchData({ page: deps.page, pageSize: deps.pageSize })
-}
-```
-
-✅ **Good:**
-
-```typescript
-loaderDeps: ({ search }) => ({
-  page: search.page,
-  pageSize: search.pageSize,
-  // Only include what's actually used in the loader
-}),
-loader: async ({ deps }) => {
-  await fetchData({ page: deps.page, pageSize: deps.pageSize })
-}
-```
-
-This ensures the loader only re-runs when the specific dependencies change, not when unrelated search params (like `expanded`, `viewMode`, etc.) change.
-
-### Loaders Are Isomorphic
-
-**Loaders in TanStack Start/Router are isomorphic and cannot call server logic unless via a call to a server function.**
-
-Loaders run on both the server and client, so they cannot directly access server-only APIs (like file system, database connections, etc.). To perform server-side operations, loaders must call server functions (e.g., TanStack server functions created via `createServerFn()`, API routes, or other server functions).
-
-❌ **Bad:**
-
-```typescript
-loader: async () => {
-  // This won't work - direct server API access
-  const data = await fs.readFile('data.json')
-  return { data }
-}
-```
-
-✅ **Good:**
-
-```typescript
-loader: async () => {
-  // Call a server function instead
-  // TanStack server functions created via createServerFn() can be called directly
-  const data = await serverFn({ data: { id: '123' } })
-  return { data }
-}
-```
-
-## Server-Only Code and Environment Shaking
-
-### TanStack Start Environment Shaking
-
-**TanStack Start performs environment shaking - any code not referenced by a `createServerFn` handler is stripped from the client build.**
-
-This means:
-
-- Server-only code (database, file system, etc.) is automatically excluded from client bundles
-- Only code inside `createServerFn` handlers is included in server bundles
-- Code outside handlers is included in both server and client bundles
-
-### Importing Server Functions
-
-**Server functions wrapped in `createServerFn` can be safely imported statically in route files.**
-
-❌ **Bad - Dynamic imports in component code:**
-
-```typescript
-// In a route component
-const rolesQuery = useQuery({
-  queryFn: async () => {
-    const { listRoles } = await import('~/utils/roles.server')
-    return listRoles({ data: {} })
-  },
-})
-```
-
-This causes bundler issues because dynamic imports can't be properly tree-shaken, potentially pulling server-only code (like `Buffer`, `drizzle`, `postgres`) into the client bundle.
-
-✅ **Good - Static imports:**
-
-```typescript
-// At the top of the route file
-import { listRoles } from '~/utils/roles.server'
-
-// In component code
-const rolesQuery = useQuery({
-  queryFn: async () => {
-    return listRoles({ data: {} })
-  },
-})
-```
-
-Since `listRoles` is wrapped in `createServerFn`, TanStack Start will properly handle environment shaking and exclude server-only dependencies from the client bundle.
-
-### Rules for Server-Only Imports
-
-1. **Server functions** (`createServerFn` wrappers) can be imported statically anywhere
-2. **Direct server-only code** (database clients, file system, etc.) must ONLY be imported:
-   - Inside `createServerFn` handlers
-   - In separate server-only files (e.g., `*.server.ts`)
-   - Never use dynamic imports (`await import()`) for server-only code in component code
-
-## Development & Build Commands
-
-### Don't Build After Every Change
-
-**Do not run builds after every change, especially for visual changes.**
-
-This is a visual website, not a library. Assume changes work unless the user reports otherwise. Running builds after every change wastes time and context.
-
-### Run Tests after Code Changes
-
-**After making code changes, always run `pnpm test` to verify the code passes basic tests.**
-
-Do NOT run tests after every tiny small change, just at the end of your known tasks. Tests are run automatically by the pre-commit hook and CI. Linting is fast and catches most issues immediately.
-
-### Debugging Visual Issues
-
-When the user reports something doesn't work or look right:
-
-1. Use the Playwright MCP to view the page and debug visually
-2. Use builds (`pnpm build`) only when investigating build/bundler issues
-3. Use linting (`pnpm lint`) to check for code issues
-
-### Use `build` for Build-Specific Issues
-
-**The `dev` command does not end, it runs indefinitely in watch mode.**
-
-Only use `build` when:
-
-- Investigating bundler or build-time errors
-- Verifying production output
-- The user specifically asks to verify the build
-
-### Testing with Playwright
-
-**Use the Playwright MCP for visual debugging and verification.**
-
-When debugging issues or verifying visual changes work correctly:
-
-- Navigate to the relevant page using Playwright
-- Take snapshots or screenshots to verify the UI
-- Interact with elements to test functionality
-
-This is the preferred method for verifying visual changes since this is a visual site.
-
-## UI Style Guide 2026
-
-### Core Principles
-
-- Prioritize clarity, hierarchy, and calm
-- Use depth to communicate structure, not decoration
-- Favor warmth and approachability over stark minimalism
-
-### Layout
-
-- Prefer fewer, well defined containers over many small sections
-- Use generous spacing to create separation before adding visual effects
-- Cards are acceptable when they express grouping or hierarchy
-
-### Corners
-
-- Rounded corners are standard
-- Use subtle radius values that feel intentional, not playful
-- Avoid sharp 90 degree corners unless intentionally industrial
-
-### Shadows and Depth
-
-- Shadows should be soft, low contrast, and diffused
-- Use shadows to imply separation, not elevation theatrics
-- Avoid heavy drop shadows or strong directional lighting
-- One to two shadow layers max
-
-### Cards
-
-- Cards should feel grounded, not floating
-- Prefer light elevation, border plus shadow, or surface contrast
-- Avoid overusing cards as a default layout primitive
-
-### Color and Surfaces
-
-- Favor soft neutrals, off whites, and warm grays
-- Use surface contrast or translucency instead of strong outlines
-- Glass or frosted effects are acceptable when subtle and accessible
-
-### Interaction
-
-- Use micro transitions to reinforce spatial relationships
-- Hover and focus states should feel responsive, not animated
-- Avoid excessive motion or springy effects
-
-### Typography
-
-- Let type hierarchy do most of the work
-- Strong headings, calm body text
-- Avoid visual noise around content
-
-### What to Avoid
-
-- Chunky shadows
-- Overly flat, sterile layouts
-- Neumorphism as a primary style
-- Over designed card grids
-
-### Summary Rule
-
-**If depth does not improve comprehension, remove it.**
-
-## Writing Style
-
-### Avoid Emdashes
-
-**Never use emdashes (—) in writing. They make content smell like AI-generated text.**
-
-Use these alternatives instead:
-
-- Commas for parenthetical phrases
-- Colons to introduce lists or explanations
-- Periods to break into separate sentences
-- Parentheses when appropriate
-
-❌ **Bad:**
-
-```
-RSCs aren't about replacing client interactivity — they're about choosing where work happens.
-```
-
-✅ **Good:**
-
-```
-RSCs aren't about replacing client interactivity. They're about choosing where work happens.
-```
-
-❌ **Bad:**
-
-```
-Heavy dependencies — markdown parsers, syntax highlighters — stay on the server.
-```
-
-✅ **Good:**
-
-```
-Heavy dependencies (markdown parsers, syntax highlighters) stay on the server.
-```
diff --git a/AGENTS.md b/AGENTS.md
new file mode 120000
index 000000000..49055565e
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1 @@
+.agents/index.md
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 120000
index 000000000..49055565e
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1 @@
+.agents/index.md
\ No newline at end of file
diff --git a/README.md b/README.md
index 90cba4aac..f168f491e 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,19 @@
-# Welcome to TanStack.com!
+<div align="center">
 
-This site is built with TanStack Router!
+# TanStack.com
 
-- [TanStack Router Docs](https://tanstack.com/router)
+The home of the TanStack ecosystem. Built with [TanStack Router](https://tanstack.com/router) and deployed on [Cloudflare Workers](https://workers.cloudflare.com/).
 
-It's deployed automagically with Netlify!
+<a href="https://twitter.com/tan_stack"><img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/></a>
 
-- [Netlify](https://netlify.com/)
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+</div>
 
 ## Development
 
+### Quick Start
+
 From your terminal:
 
 ```sh
@@ -19,54 +23,64 @@ pnpm dev
 
 This starts your app in development mode, rebuilding assets on file changes.
 
-## Editing and previewing the docs of TanStack projects locally
-
-The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app.
-In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system.
+### Local Setup
 
-Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally :
+The documentation for all TanStack projects (except `React Charts`) is hosted on [tanstack.com](https://tanstack.com). In production, doc pages are fetched from GitHub. In development, they're read from your local file system.
 
-1. Create a new directory called `tanstack`.
+Create a `tanstack` parent directory and clone this repo alongside the projects:
 
 ```sh
-mkdir tanstack
+mkdir tanstack && cd tanstack
+git clone git@github.com:TanStack/tanstack.com.git
+git clone git@github.com:TanStack/query.git
+git clone git@github.com:TanStack/router.git
+git clone git@github.com:TanStack/table.git
 ```
 
-2. Enter the directory and clone this repo and the repo of the project there.
+Your directory structure should look like this:
 
-```sh
-cd tanstack
-git clone git@github.com:TanStack/tanstack.com.git
-git clone git@github.com:TanStack/form.git
 ```
+tanstack/
+   ├── tanstack.com/
+   ├── query/
+   ├── router/
+   └── table/
+```
+
+> [!WARNING]
+> Directory names must match repo names exactly (e.g., `query` not `tanstack-query`). The app finds docs by looking for sibling directories by name.
+
+### Editing Docs
+
+To edit docs for a project, make changes in its `docs/` folder (e.g., `../form/docs/`) and visit http://localhost:3000/form/latest/docs/overview to preview.
 
 > [!NOTE]
-> Your `tanstack` directory should look like this:
->
-> ```
-> tanstack/
->    |
->    +-- form/
->    |
->    +-- tanstack.com/
-> ```
+> Updated pages need to be manually reloaded in the browser.
 
 > [!WARNING]
-> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found.
+> Update the project's `docs/config.json` if you add a new doc page!
 
-3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode:
+## Get Involved
 
-```sh
-cd tanstack.com
-pnpm i
-# The app will run on https://localhost:3000 by default
-pnpm dev
-```
+- We welcome issues and pull requests!
+- Participate in [GitHub Discussions](https://github.com/TanStack/tanstack.com/discussions)
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
 
-4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`.
+## Explore the TanStack Ecosystem
 
-> [!NOTE]
-> The updated pages need to be manually reloaded in the browser.
+- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
+- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
+- <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel
+- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
+- <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> – Debouncing, throttling, batching
+- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
+- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
+- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
+- <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
+- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
+- <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids
+- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering
 
-> [!WARNING]
-> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page!
+… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>
+
+<!-- Use the force, Luke -->
diff --git a/content-collections.ts b/content-collections.ts
index 1ef0f4a10..ed3891941 100644
--- a/content-collections.ts
+++ b/content-collections.ts
@@ -1,34 +1,57 @@
 import { defineCollection, defineConfig } from '@content-collections/core'
-import { extractFrontMatter } from '~/utils/documents.server'
+import { libraryIds } from '~/libraries/libraries'
+import { normalizeRedirectFrom } from '~/utils/redirects'
+import { z } from 'zod'
+
+const libraryIdSet = new Set<string>(libraryIds)
+const libraryListSchema = z.string().refine(
+  (value) => {
+    const libraries = value
+      .split(',')
+      .map((library) => library.trim())
+      .filter(Boolean)
+
+    return (
+      libraries.length > 0 &&
+      libraries.every((library) => libraryIdSet.has(library))
+    )
+  },
+  {
+    message: `Expected comma-separated library ids: ${libraryIds.join(', ')}`,
+  },
+)
 
 const posts = defineCollection({
   name: 'posts',
   directory: './src/blog',
   include: '*.md',
-  schema: (z) => ({
+  schema: z.object({
     title: z.string(),
-    published: z.string().date(),
+    published: z.iso.date(),
     draft: z.boolean().optional(),
+    excerpt: z.string(),
     authors: z.string().array(),
+    library: libraryListSchema.optional(),
+    content: z.string(),
+    redirect_from: z.string().array().optional(),
   }),
   transform: ({ content, ...post }) => {
-    const frontMatter = extractFrontMatter(content)
-
     // Extract header image (first image after frontmatter)
     const headerImageMatch = content.match(/!\[([^\]]*)\]\(([^)]+)\)/)
     const headerImage = headerImageMatch ? headerImageMatch[2] : undefined
+    const redirectFrom = normalizeRedirectFrom(post.redirect_from)
 
     return {
       ...post,
       slug: post._meta.path,
-      excerpt: frontMatter.excerpt,
-      description: frontMatter.data.description,
       headerImage,
+      redirect_from: redirectFrom,
+      redirectFrom,
       content,
     }
   },
 })
 
 export default defineConfig({
-  collections: [posts],
+  content: [posts],
 })
diff --git a/docs-info.md b/docs-info.md
new file mode 100644
index 000000000..a13e6ef65
--- /dev/null
+++ b/docs-info.md
@@ -0,0 +1,272 @@
+# Maintainer Documentation Guide
+
+This page covers the markdown features supported in TanStack docs and the preferred workflow for future redirects.
+
+## Redirects
+
+For new page moves or consolidations, keep the canonical page and list old URLs in frontmatter with `redirect_from`.
+
+```yaml
+---
+title: Overview
+redirect_from:
+  - /framework/react/overview
+  - /framework/solid/overview
+---
+```
+
+In the example above, old framework-specific URLs will redirect to the shared `/overview` page without needing to add a new entry to the central redirect files in the `tanstack.com` repo.
+
+## Supported markdown
+
+Docs support normal GitHub-flavored markdown, including:
+
+- headings
+- links
+- lists
+- tables
+- fenced code blocks
+- images
+- blockquotes
+- task lists
+
+## Callouts
+
+GitHub-style alerts are supported. For a customized title, for example to replace `Note` with something else, you can use the syntax `> [!TYPE] Title`:
+
+```md
+> [!NOTE] Custom title
+> Use `redirect_from` on the canonical page when docs are moved.
+
+> [!TIP]
+> Prefer absolute paths like `/framework/react/overview`.
+```
+
+## Code Blocks
+
+Fenced code blocks are supported with language identifiers for syntax highlighting. You can also add metadata like `title="..."` for file tabs.
+
+````md
+```tsx title="app.tsx"
+export function App() {
+  return <div>Hello</div>
+}
+```
+````
+
+## Tabs component
+
+The tabs component lets you group content into tabbed sections. It supports multiple variants, including file tabs and package manager tabs.
+
+### File tabs
+
+Use `variant="files"` when the block should render code examples as file tabs. It scans consecutive code blocks, extracts language, title, and content, and uses that to build `file-tab` data. Titles come from code-block metadata such as `title="..."` or will default to the language name if not provided.
+
+````md
+<!-- ::start:tabs variant="files" -->
+
+```tsx file="app.tsx"
+export function App() {
+  return <div>Hello</div>
+}
+```
+
+```css file="styles.css"
+body {
+  color: tomato;
+}
+```
+
+<!-- ::end:tabs -->
+````
+
+### What matters
+
+- use fenced code blocks
+- add `title="..."` if you want meaningful file tab labels
+- language comes from the code fence language
+- code text is extracted from the `<code>` node content
+
+### Package manager tabs
+
+Package-manager tabs are a special `tabs` variant. The parser reads framework lines like `react: ...` or `solid: ...`, groups packages, and later generates package-manager-specific commands.
+
+There are various supported package manager formats, including npm, yarn, pnpm, and bun.
+
+If you're looking to support a multi-line command, you can add multiple instances of the same framework. For example:
+
+```md
+<!-- ::start:tabs variant="package-manager" -->
+
+react: <package-1>
+react: <package-2>
+
+<!-- ::end:tabs -->
+```
+
+This will become:
+
+```bash
+npm i <package-1>
+npm i <package-2>
+```
+
+#### Supported modes
+
+- `install` (default)
+- `dev-install`
+- `local-install`
+- `create`
+- `custom` (for custom command templates)
+
+##### Install (default)
+
+```md
+<!-- ::start:tabs variant="package-manager" mode="install" -->
+
+react: <package>
+solid: <package>
+
+<!-- ::end:tabs -->
+```
+
+becomes
+
+```bash
+npm i <package>
+```
+
+##### Dev install
+
+```md
+<!-- ::start:tabs variant="package-manager" mode="dev-install" -->
+
+react: <package>
+solid: <package>
+
+<!-- ::end:tabs -->
+```
+
+becomes
+
+```bash
+npm i -D <package>
+```
+
+##### Local install
+
+```md
+<!-- ::start:tabs variant="package-manager" mode="local-install" -->
+
+react: <package>
+solid: <package>
+
+<!-- ::end:tabs -->
+```
+
+becomes
+
+```bash
+npx <package> --workspace=./path/to/workspace
+```
+
+##### Create
+
+```md
+<!-- ::start:tabs variant="package-manager" mode="create" -->
+
+react: <package>
+solid: <package>
+
+<!-- ::end:tabs -->
+```
+
+becomes
+
+```bash
+npm create <package>
+```
+
+##### Custom
+
+```md
+<!-- ::start:tabs variant="package-manager" mode="custom" -->
+
+react: <command> <package>
+solid: <command> <package>
+
+<!-- ::end:tabs -->
+```
+
+becomes
+
+```bash
+npm <command> <package>
+```
+
+### Bundler tabs
+
+Bundler tabs render a compact tab row (like package-manager tabs) but accept rich markdown content per bundler (like the framework component). The user's bundler choice is persisted to `localStorage` and synced across every bundler tab block on the page.
+
+Inside `variant="bundler"`, each top-level heading whose text matches a known bundler starts a new section, and the following nodes (prose, code blocks, etc.) become that bundler's panel. The transformer uses the largest heading level present in the block, so `# Vite` / `# Rsbuild` and `## Vite` / `## Rsbuild` both work — just be consistent within a single block.
+
+````md
+<!-- ::start:tabs variant="bundler" -->
+
+# Vite
+
+```ts title="vite.config.ts"
+import { defineConfig } from 'vite'
+
+export default defineConfig({})
+```
+
+# Rsbuild
+
+```ts title="rsbuild.config.ts"
+import { defineConfig } from '@rsbuild/cli'
+
+export default defineConfig({})
+```
+
+<!-- ::end:tabs -->
+````
+
+Supported bundlers: `vite`, `rsbuild`. Heading text is matched case-insensitively. Both sections should be defined; if the user's selected bundler isn't present in a particular block, the first defined panel is shown as a fallback.
+
+## Framework component
+
+Framework blocks let one markdown source contain React, Solid, or other framework-specific content. Internally, the transformer looks for h1 headings inside the framework block and treats each `# Heading` as a framework section boundary. It then stores framework metadata and rewrites the block into separate framework panels.
+
+> **Note**: This should only be used when the majority of the content is the same. If the content is mostly different, it's better to create separate markdown files for each framework and use redirects to point to the canonical page.
+
+````md
+<!-- ::start:framework -->
+
+# React
+
+Use the React adapter here.
+
+```tsx
+// React code
+```
+
+# Solid
+
+Use the Solid adapter here.
+
+```tsx
+// Solid Code
+```
+
+<!-- ::end:framework -->
+````
+
+Each top-level `#` heading becomes a framework panel. Nested headings inside a framework section are preserved for the table of contents.
+
+## Editing notes
+
+- Keep redirects on the surviving page, not on the page being removed.
+- Use absolute paths in `redirect_from`.
+- Avoid duplicate `redirect_from` values across pages.
+- Existing central redirect files still handle older redirects; use frontmatter for new ones going forward.
diff --git a/docs/cloudflare-workers-migration.md b/docs/cloudflare-workers-migration.md
new file mode 100644
index 000000000..006beca63
--- /dev/null
+++ b/docs/cloudflare-workers-migration.md
@@ -0,0 +1,135 @@
+# Cloudflare Workers Migration Report
+
+TanStack.com is configured as a Cloudflare Workers deployment for this branch. Netlify is no longer part of this site's hosting configuration, but Netlify remains available in builder/deploy-provider UX for users who choose it.
+
+## Files Changed
+
+- `package.json`, `pnpm-lock.yaml`: Cloudflare build/preview/deploy scripts, `@cloudflare/vite-plugin`, `wrangler`, `@tanstack/create@0.68.4`, and removal of Netlify hosting packages.
+- `vite.config.ts`: Cloudflare Vite plugin, Worker build constants, opt-in image transformation flag, and server builder-generation enabled with the Worker-safe create API.
+- `wrangler.jsonc`: Worker name/account, assets binding, `nodejs_compat`, CPU limit, cron triggers, and production `SITE_URL`.
+- `src/server.ts`, `src/server/scheduled.server.ts`: Worker `fetch` and `scheduled` entrypoints, replacing former Netlify scheduled functions.
+- `src/server/runtime/host.server.ts`, `src/utils/hosting-cache.server.ts`: host cache purge adapter using Cloudflare cache-tag purge.
+- `src/components/OptimizedImage.tsx`, `src/utils/optimizedImage.ts`: host-neutral optimized image helper with Cloudflare image transformations behind an explicit build flag.
+- `src/builder/api/create-worker.ts`: host-neutral adapter around `@tanstack/create/worker` with local Worker manifest loaders for supported frameworks and add-ons.
+- `src/builder/api/*`, `src/routes/api/builder/*`: builder feature catalog, compile, download, validate, suggest, and GitHub deploy paths use the Worker-safe create adapter.
+- `src/routes/*`, `src/utils/*`, `src/server/*`: CDN cache headers moved from Netlify-specific headers to Cloudflare Workers Cache headers / `Cache-Tag`.
+- `src/utils/markdown/processor.ts`: site-side compatibility guard for escaped angle brackets in generated TypeDoc markdown until `@tanstack/markdown` handles `\<...\>` as escaped text.
+- `package.json`, `pnpm-lock.yaml`: `@tanstack/markdown@0.0.5` for compact table delimiters, footnotes, and legacy single-tilde strike headings without the temporary pnpm patch.
+- Removed hosting-only Netlify files: `netlify.toml`, `netlify/functions/*`, `scripts/run-built-server.mjs`.
+
+## Commands Used
+
+```bash
+pnpm install --lockfile-only
+pnpm add @tanstack/create@^0.68.4
+pnpm run test:tsc
+pnpm exec tsc --noEmit
+pnpm run build:cloudflare
+pnpm test
+pnpm run dev:cloudflare
+pnpm run deploy:cloudflare
+pnpm run preview:cloudflare -- --host 127.0.0.1 --port 3001
+pnpm install
+```
+
+Additional checks used `curl`, Node fetch scripts, Wrangler tail, and Playwright with system Chrome against the Workers preview URL.
+
+## Deploy Cache Purge
+
+`pnpm run deploy:cloudflare` builds, deploys the Worker, then runs `pnpm run purge:cloudflare`. The purge step clears the Cloudflare zone cache with `purge_everything` so stale HTML documents cannot keep pointing at removed route chunks after a deploy.
+
+Required environment:
+
+- `CLOUDFLARE_ZONE_ID`: the active `tanstack.com` zone ID.
+- `CLOUDFLARE_CACHE_PURGE_TOKEN`: Cloudflare API token with `Cache Purge` permission for that zone.
+
+`CLOUDFLARE_API_TOKEN` / `CF_API_TOKEN` and `CF_ZONE_ID` are accepted as aliases. If `CLOUDFLARE_ZONE_ID` is missing, the script can discover it only when the token also has zone read access.
+
+## Worker
+
+- Account: `8da95258a9c70b54c3e2b374a0079106`
+- Worker: `tanstack-com`
+- URL: `https://tanstack-com.thetanstack.workers.dev`
+- Current version: `ff011a60-320b-43b7-9a03-bd650a41bc7b`
+- Upload size: `17748.26 KiB` raw, `6413.10 KiB` gzip
+- Startup time: `33 ms`
+- Note: the secret-bearing `tanstack-com-staging` Worker was renamed to `tanstack-com`, and the older empty `tanstack-com` Worker was removed.
+
+## Passed
+
+- `pnpm run build:cloudflare` passed.
+- `pnpm run test:tsc` passed.
+- `pnpm test` passed with 10 existing oxlint warnings.
+- Cloudflare deploy passed.
+- Local Cloudflare preview started and returned 200 for `/` and `/builder`.
+- `/` returned 200 HTML on the Worker.
+- `/start/latest` returned 200 HTML on the Worker.
+- Browser SPA navigation from `/` to `/start/latest` did not reproduce the `npm-recent-downloads ... data is undefined` error.
+- `/builder` returned 200 HTML with COOP/COEP headers and loaded the client builder/integration surface.
+- Primary homepage images loaded in browser on the Worker.
+- `/api/og/query.png?title=Query&description=Smoke` returned a valid 1200x630 PNG.
+- `/_a/gtag.js` returned Google's JavaScript.
+- `/_a/g/collect` returned 204.
+- `/auth/github/start?returnTo=/account` redirected to GitHub with secure state/return cookies.
+- `/.well-known/oauth-authorization-server` returned OAuth metadata.
+- `/api/mcp/` returned the expected unauthenticated JSON-RPC auth error instead of a runtime failure.
+- `POST /api/application-starter/resolve` returned a Start recipe.
+- `/api/builder/features?framework=react` returned the Worker-safe catalog, including `tanstack-query`, `cloudflare`, and `biome`.
+- `/api/builder/compile` generated representative React and Solid projects server-side on the Worker.
+- `/api/builder/download` returned a valid zip for a representative React builder project.
+- `https://tanstack.com/api/builder/features?framework=react` returned the same Worker-safe builder catalog.
+- `https://tanstack.com/builder` returned 200 HTML with COOP/COEP headers.
+- Worker output does not include `generated/create-manifest.js` or a `create-manifest` chunk.
+- Cloudflare dry-run/upload size stayed below the paid Worker 10 MiB gzip limit after excluding the heavy React `events` example implementation chunk.
+- `Link` response headers for static assets are emitted on SSR responses for Cloudflare Early Hints fallback.
+- Broad docs/blog audit generated 2,767 latest-doc/blog URLs from GitHub doc trees plus local blog posts and compared production vs Worker.
+- Escaped generic headings in TypeDoc markdown now render correctly, e.g. `Interface: AudioAdapter<TModel, TProviderOptions>` with the production-compatible `interface-audioadaptertmodel-tprovideroptions` anchor.
+- Local site parser checks now match the remaining markdown audit diffs:
+  - `/ai/latest/docs/code-mode/code-mode` parses 4 content tables.
+  - `/db/latest/docs/collections/powersync-collection` parses 24 content tables.
+  - `/start/latest/docs/framework/react/migrate-from-next-js` headings render as `Server Actions Functions` and `Server Routes Handlers`.
+  - `/blog/tanstack-router-signal-graph` renders footnotes with `data-footnotes` and production-compatible footnote anchors.
+- Live Worker rechecks against production passed for the same table, heading, and footnote signals after deploying version `586b99ec-4a2c-46d2-b3b3-eb775de13141`.
+- Three full-body rechecks of 43 URLs that intermittently returned Worker 500/timeout during the high-concurrency audit cleared; the only stable non-200s were `/hotkeys/latest/docs/reference` and `/pacer/latest/docs/reference`, both 404 on production and Worker.
+
+## Failed Or Not Proven
+
+- Full GitHub OAuth callback/account login was not completed.
+- End-to-end GitHub repository deploy was not completed with a logged-in account.
+- Cron trigger behavior was deployed but not manually invoked.
+- The React `events` example is not exposed in the Worker builder catalog because its implementation chunk pushes the Worker over Cloudflare's paid 10 MiB gzip upload limit.
+- High-concurrency audit runs can still produce transient Worker 500s with `{"status":500,"unhandled":true,"message":"HTTPError"}` on changing docs paths, but targeted full-body rechecks did not reproduce stable page failures. Treat this as a load/audit-cache risk, not a confirmed content regression.
+
+## Builder Generation Note
+
+`@tanstack/create@0.68.4` adds the lazy `@tanstack/create/worker` API. The site now imports that API through `src/builder/api/create-worker.ts` instead of importing `@tanstack/create/edge` from route logic.
+
+`/api/builder/features` remains catalog-only by using `create.getFrameworkById` and `create.getAllAddOns`. ZIP/project generation loads only the requested framework/add-on chunks, then calls `create.finalizeAddOns`, `create.populateAddOnOptionsDefaults`, `createMemoryEnvironment`, and `create.createApp`.
+
+The Worker build was checked for `generated/create-manifest.js` and `create-manifest` output, and no generated manifest bundle was present. Including the React `events` example implementation still pushed upload size to `11179.57 KiB` gzip, so the Worker loader intentionally omits that chunk. The deployed Worker is `6413.10 KiB` gzip.
+
+## Image Transformation Note
+
+Cloudflare image transformations are enabled for `build:cloudflare`. Transformed image URLs are emitted through the configured `SITE_URL` origin because `/cdn-cgi/image/*` works on the routed `tanstack.com` zone but still returns 404 on the `workers.dev` hostname.
+
+## Markdown Audit Note
+
+The new markdown renderer initially parsed escaped TypeDoc generics like `\<T\>` as inline HTML. The site now protects escaped `<` / `>` outside code fences and inline code before parsing, restores them into text nodes before render, and rebuilds headings so rendered content and ToC anchors stay aligned.
+
+Resolved markdown differences from the broad audit:
+
+- Escaped TypeDoc generics no longer become inline HTML.
+- Compact markdown table delimiters like `:--:` now parse as tables, matching the existing production renderer.
+- Blog footnotes now render with `data-footnotes`, `user-content-fn-*`, and `user-content-fnref-*` anchors.
+- Legacy single-tilde strike headings now render without visible `~` markers.
+
+Remaining markdown differences observed during audit:
+
+- Production duplicates light/dark code blocks; the Worker branch renders one theme-aware code block. This explains large HTML-size and `<pre>` count differences.
+- The temporary `@tanstack/markdown@0.0.4` pnpm patch has been removed after upgrading to `@tanstack/markdown@0.0.5`.
+
+## Readiness
+
+Core marketing SSR, docs/start navigation, security headers, static assets, analytics proxying, GitHub auth start, MCP auth rejection, application-starter API, scheduled Worker registration, Cloudflare preview, deploy, dynamic OG image generation, and representative Worker-side builder generation are working on Cloudflare Workers.
+
+Production migration is close, but not fully safe until logged-in OAuth/account flows pass, cron jobs are verified, and an authenticated builder GitHub deploy is completed. The main remaining builder gap is the omitted React `events` example chunk.
diff --git a/docs/ecosystem-implementation-todo.md b/docs/ecosystem-implementation-todo.md
new file mode 100644
index 000000000..8383b310a
--- /dev/null
+++ b/docs/ecosystem-implementation-todo.md
@@ -0,0 +1,145 @@
+# Ecosystem Implementation Todo
+
+## Goal
+
+Build a database-driven `/ecosystem` marketplace and submission flow without blocking the partner-page SEO work.
+
+## Product Goals
+
+- Create an `/ecosystem` directory page that acts like a marketplace
+- Let users sort and filter entries by the fields that actually matter
+- Let companies submit new listings through a first-party submission flow
+- Seed the marketplace with existing TanStack partners when the DB work starts
+- Let TanStack maintainers add an official review and comparisons to each listing
+- Keep partner-backed entries aligned with `/partners/[partner]` pages
+
+## Scope To Build Later
+
+### Data model
+
+- Add a new `ecosystemEntries` table
+- Add a dedicated moderation capability like `moderate-ecosystem`
+- Keep the schema intentionally small and high-value
+
+Suggested v1 fields:
+
+- `id`
+- `userId`
+- `slug`
+- `name`
+- `websiteUrl`
+- `kind`
+- `tags`
+- `libraries`
+- `pricingModel`
+- `isOpenSource`
+- `preferenceScore`
+- `isPartner`
+- `logoUrl`
+- `screenshotUrl`
+- `summary`
+- `officialReviewMd`
+- `competitorSlugs`
+- `status`
+- `moderationNote`
+- `moderatedBy`
+- `moderatedAt`
+- `createdAt`
+- `updatedAt`
+
+### Taxonomy
+
+Use a very small taxonomy surface:
+
+- `kind`: `integration | service | tool | template | plugin`
+- `pricingModel`: `free | freemium | paid | contact | oss`
+- `tags: string[]` absorbs both "type" and "service"
+
+### Comparison model
+
+Use slugs everywhere.
+
+- Partners compare against other partner ids, which are also their slugs
+- Ecosystem entries compare against ecosystem slugs
+- Partner-backed ecosystem entries should reuse the same slug namespace
+
+Suggested v1 field:
+
+- `competitorSlugs: string[]`
+
+No UUID-based comparison references for v1.
+No partner-only comparison system.
+No extra comparison tables unless the simple shape breaks down.
+
+### Canonical URL rules
+
+- Partner-backed entries should be canonical at `/partners/[partner]`
+- Non-partner entries should be canonical at `/ecosystem/[slug]`
+- If a partner-backed entry is reachable from `/ecosystem/[slug]`, redirect or canonicalize to `/partners/[partner]`
+
+### Submission flow
+
+Build a user-facing submission portal similar in spirit to showcase, but for ecosystem listings.
+
+Suggested v1 required fields:
+
+- `name`
+- `websiteUrl`
+- `kind`
+- `tags`
+- `libraries`
+- `pricingModel`
+- `isOpenSource`
+- `logoUrl`
+- `screenshotUrl`
+- `summary`
+
+Maintainer-only fields for v1:
+
+- `preferenceScore`
+- `officialReviewMd`
+- `competitorSlugs`
+- moderation fields
+
+### Admin flow
+
+- Add `/admin/ecosystem`
+- Add `/admin/ecosystem/[id]`
+- Let maintainers moderate submissions
+- Let maintainers edit all listing fields
+- Let maintainers set `preferenceScore`
+- Let maintainers author `officialReviewMd`
+- Let maintainers manage `competitorSlugs`
+
+### Account flow
+
+- Add `/account/ecosystem`
+- Let users view, edit, and delete their own submissions
+- Keep this separate from `/account/integrations`, which already means something else
+
+## Seeding Plan
+
+- Seed existing partners into the ecosystem table when the DB work starts
+- Preserve current partner ids as ecosystem slugs for partner-backed entries
+- Seed `preferenceScore` from the existing `partners[].score` values
+- Start seeded partner entries as `approved`
+- Keep the current score scale and revisit later if needed
+
+## Suggested Implementation Order
+
+1. Add ecosystem capability, enums, and DB schema
+2. Add ecosystem server functions and query options
+3. Seed partner rows into the new table
+4. Build `/ecosystem` index and `/ecosystem/[slug]`
+5. Build `/ecosystem/submit` and edit flows
+6. Build `/account/ecosystem`
+7. Build `/admin/ecosystem`
+8. Add SEO metadata and JSON-LD
+9. Run `pnpm test`
+
+## Notes
+
+- Reuse showcase architecture patterns, not the showcase schema
+- Keep the implementation intentionally small at first
+- Avoid over-modeling comparison data until real usage demands it
+- Partner pages ship first; ecosystem follows later
diff --git a/docs/mcp/config.json b/docs/mcp/config.json
deleted file mode 100644
index 945453f92..000000000
--- a/docs/mcp/config.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "https://tanstack.com/tanstack-docs-config.schema.json",
-  "docSearch": {
-    "appId": "FQ0DQ6MA3C",
-    "apiKey": "10c34d6a5c89f6048cf644d601e65172",
-    "indexName": "tanstack-test"
-  },
-  "sections": [
-    {
-      "label": "Getting Started",
-      "children": [
-        { "label": "Overview", "to": "overview" },
-        { "label": "Connecting", "to": "connecting" }
-      ]
-    },
-    {
-      "label": "Reference",
-      "children": [{ "label": "Available Tools", "to": "tools" }]
-    }
-  ]
-}
diff --git a/docs/mcp/connecting.md b/docs/mcp/connecting.md
deleted file mode 100644
index 7eca1b683..000000000
--- a/docs/mcp/connecting.md
+++ /dev/null
@@ -1,296 +0,0 @@
----
-id: connecting
-title: Connecting
----
-
-The TanStack MCP Server is available at `https://tanstack.com/api/mcp` and uses the Streamable HTTP transport.
-
-## Authentication Options
-
-There are two ways to authenticate with the TanStack MCP server:
-
-### OAuth (Recommended)
-
-MCP clients that support OAuth can authenticate automatically. Just use the server URL and your client will open a browser window to authorize access:
-
-```
-https://tanstack.com/api/mcp
-```
-
-No API key needed. Your client handles the OAuth flow automatically.
-
-### API Keys
-
-For clients that don't support OAuth, or if you prefer manual key management:
-
-1. [Sign in to your TanStack account](/login)
-2. Go to [Integrations](/account/integrations)
-3. Click "New Key" and give it a descriptive name
-4. Copy the key immediately (you won't see it again)
-
-> [!NOTE]
-> Replace `YOUR_API_KEY` in the examples below with your actual API key.
-
-## Claude Desktop
-
-Claude Desktop supports OAuth authentication. Add to your config:
-
-**macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`
-**Windows:** `%APPDATA%\Claude\claude_desktop_config.json`
-
-```json
-{
-  "mcpServers": {
-    "tanstack": {
-      "url": "https://tanstack.com/api/mcp"
-    }
-  }
-}
-```
-
-Restart Claude Desktop. On first use, a browser window will open to authorize access.
-
-<details>
-<summary>Using an API key instead</summary>
-
-```json
-{
-  "mcpServers": {
-    "tanstack": {
-      "command": "npx",
-      "args": ["mcp-remote", "https://tanstack.com/api/mcp"],
-      "env": {
-        "MCP_HEADERS": "Authorization: Bearer YOUR_API_KEY"
-      }
-    }
-  }
-}
-```
-
-</details>
-
-## Claude Code
-
-```bash
-claude mcp add --transport http tanstack https://tanstack.com/api/mcp
-```
-
-On first use, a browser window will open to authorize access.
-
-<details>
-<summary>Using an API key instead</summary>
-
-```bash
-claude mcp add --transport http tanstack https://tanstack.com/api/mcp --header "Authorization: Bearer YOUR_API_KEY"
-```
-
-</details>
-
-## Cursor
-
-Add to your Cursor MCP configuration:
-
-```json
-{
-  "mcpServers": {
-    "tanstack": {
-      "url": "https://tanstack.com/api/mcp"
-    }
-  }
-}
-```
-
-<details>
-<summary>Using an API key instead</summary>
-
-```json
-{
-  "mcpServers": {
-    "tanstack": {
-      "command": "npx",
-      "args": ["mcp-remote", "https://tanstack.com/api/mcp"],
-      "env": {
-        "MCP_HEADERS": "Authorization: Bearer YOUR_API_KEY"
-      }
-    }
-  }
-}
-```
-
-</details>
-
-## VS Code
-
-Add to your VS Code settings or `.vscode/mcp.json`:
-
-```json
-{
-  "servers": {
-    "tanstack": {
-      "url": "https://tanstack.com/api/mcp"
-    }
-  }
-}
-```
-
-<details>
-<summary>Using an API key instead</summary>
-
-```json
-{
-  "servers": {
-    "tanstack": {
-      "type": "http",
-      "url": "https://tanstack.com/api/mcp",
-      "headers": {
-        "Authorization": "Bearer YOUR_API_KEY"
-      }
-    }
-  }
-}
-```
-
-</details>
-
-## OpenCode
-
-Add to your OpenCode MCP configuration in `~/.config/opencode/config.json`:
-
-```json
-{
-  "mcp": {
-    "servers": {
-      "tanstack": {
-        "type": "remote",
-        "url": "https://tanstack.com/api/mcp"
-      }
-    }
-  }
-}
-```
-
-After adding the config, run the auth flow manually the first time:
-
-```bash
-npx mcp-remote auth https://tanstack.com/api/mcp
-```
-
-This opens a browser to authorize access. After that, OpenCode will connect automatically.
-
-<details>
-<summary>Using an API key instead</summary>
-
-```json
-{
-  "mcp": {
-    "servers": {
-      "tanstack": {
-        "type": "remote",
-        "url": "https://tanstack.com/api/mcp",
-        "headers": {
-          "Authorization": "Bearer YOUR_API_KEY"
-        }
-      }
-    }
-  }
-}
-```
-
-</details>
-
-## Windsurf
-
-Add to your Windsurf MCP configuration:
-
-```json
-{
-  "mcpServers": {
-    "tanstack": {
-      "serverUrl": "https://tanstack.com/api/mcp"
-    }
-  }
-}
-```
-
-<details>
-<summary>Using an API key instead</summary>
-
-```json
-{
-  "mcpServers": {
-    "tanstack": {
-      "serverUrl": "https://tanstack.com/api/mcp",
-      "headers": {
-        "Authorization": "Bearer YOUR_API_KEY"
-      }
-    }
-  }
-}
-```
-
-</details>
-
-## MCP Inspector
-
-Use the MCP Inspector to test the server interactively:
-
-```bash
-npx @modelcontextprotocol/inspector https://tanstack.com/api/mcp
-```
-
-<details>
-<summary>Using an API key instead</summary>
-
-```bash
-npx @modelcontextprotocol/inspector https://tanstack.com/api/mcp --header "Authorization: Bearer YOUR_API_KEY"
-```
-
-</details>
-
-## Custom Integration
-
-For custom integrations, the server accepts standard MCP requests via HTTP:
-
-- **Endpoint:** `https://tanstack.com/api/mcp`
-- **Transport:** Streamable HTTP (stateless)
-- **Methods:** POST (for requests), GET (for server-sent events), DELETE (for session cleanup)
-- **Authentication:** OAuth 2.1 (recommended) or Bearer token via Authorization header
-
-### OAuth 2.1 Flow
-
-The server supports OAuth 2.1 with PKCE for secure authentication:
-
-1. Discover endpoints via `/.well-known/oauth-authorization-server`
-2. Redirect user to `/oauth/authorize` with PKCE challenge
-3. Exchange authorization code at `/oauth/token`
-4. Use the access token as a Bearer token
-
-### API Key Authentication
-
-Example request using curl with an API key:
-
-```bash
-curl -X POST https://tanstack.com/api/mcp \
-  -H "Content-Type: application/json" \
-  -H "Authorization: Bearer YOUR_API_KEY" \
-  -d '{
-    "jsonrpc": "2.0",
-    "id": 1,
-    "method": "tools/list"
-  }'
-```
-
-## Rate Limits
-
-API requests are rate-limited to protect the service:
-
-- **Authenticated requests:** 60 requests per minute
-- Rate limit headers are included in responses (`X-RateLimit-Limit`, `X-RateLimit-Remaining`, `X-RateLimit-Reset`)
-
-## Verifying Connection
-
-After connecting, ask your AI assistant to list TanStack libraries:
-
-> "Use the TanStack MCP to list all available libraries"
-
-You should see a list of all TanStack libraries with their versions and descriptions.
diff --git a/docs/mcp/overview.md b/docs/mcp/overview.md
deleted file mode 100644
index c41d7f9f9..000000000
--- a/docs/mcp/overview.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-id: overview
-title: Overview
----
-
-TanStack MCP Server provides AI assistants with direct access to TanStack documentation through the [Model Context Protocol](https://modelcontextprotocol.io). This allows AI tools like Claude, Cursor, and others to search and retrieve up-to-date documentation for all TanStack libraries.
-
-## Why Use the MCP Server?
-
-AI assistants are trained on snapshots of documentation that become stale over time. The TanStack MCP Server solves this by giving AI tools real-time access to:
-
-- **Current documentation** for all TanStack libraries (Router, Query, Table, Form, Virtual, Store, and more)
-- **Version-specific docs** for the exact version you're using
-- **Full-text search** across all documentation
-
-## Quick Start
-
-Most MCP clients support OAuth authentication. Just add the server URL:
-
-```
-https://tanstack.com/api/mcp
-```
-
-Your client will open a browser window to authorize access on first use. No API key needed.
-
-See [Connecting](./connecting) for client-specific setup instructions.
-
-## Available Tools
-
-The MCP server exposes tools for documentation and showcase management:
-
-### Documentation Tools
-
-| Tool             | Description                                                  | Auth Required |
-| ---------------- | ------------------------------------------------------------ | ------------- |
-| `list_libraries` | List all TanStack libraries with their versions and metadata | No            |
-| `get_doc`        | Fetch a specific documentation page by library and path      | No            |
-| `search_docs`    | Full-text search across all TanStack documentation           | No            |
-
-### Showcase Tools
-
-| Tool                | Description                                | Auth Required |
-| ------------------- | ------------------------------------------ | ------------- |
-| `search_showcases`  | Search approved TanStack showcase projects | No            |
-| `get_showcase`      | Get details of a specific showcase project | No            |
-| `submit_showcase`   | Submit a new project to the showcase       | Yes           |
-| `update_showcase`   | Update your existing showcase submission   | Yes           |
-| `delete_showcase`   | Delete your showcase submission            | Yes           |
-| `list_my_showcases` | List your own showcase submissions         | Yes           |
-
-### NPM Stats Tools
-
-| Tool                        | Description                                             | Auth Required |
-| --------------------------- | ------------------------------------------------------- | ------------- |
-| `get_npm_stats`             | Get aggregated download stats for TanStack or a library | No            |
-| `list_npm_comparisons`      | List preset package comparisons (Data Fetching, etc.)   | No            |
-| `compare_npm_packages`      | Compare download stats for multiple packages over time  | No            |
-| `get_npm_package_downloads` | Get detailed historical downloads for a single package  | No            |
-
-See [Available Tools](./tools) for detailed parameter documentation.
-
-## How It Works
-
-The TanStack MCP Server uses the Streamable HTTP transport, making it compatible with serverless deployments and any MCP client that supports HTTP transport. When your AI assistant needs TanStack documentation, it calls the appropriate tool and receives the content directly.
-
-```
-AI Assistant → MCP Client → TanStack MCP Server → Documentation
-```
-
-All documentation is fetched directly from the TanStack GitHub repositories, ensuring you always get the most current content for your specified version.
diff --git a/docs/mcp/tools.md b/docs/mcp/tools.md
deleted file mode 100644
index 8072d9141..000000000
--- a/docs/mcp/tools.md
+++ /dev/null
@@ -1,286 +0,0 @@
----
-id: tools
-title: Available Tools
----
-
-The TanStack MCP Server provides 5 tools for accessing documentation, NPM statistics, and ecosystem recommendations.
-
-## list_libraries
-
-List all available TanStack libraries with their metadata.
-
-### Parameters
-
-| Parameter | Type   | Required | Description                                                         |
-| --------- | ------ | -------- | ------------------------------------------------------------------- |
-| `group`   | string | No       | Filter by group: `state`, `headlessUI`, `performance`, or `tooling` |
-
-### Response
-
-- `group` - The group name or "All Libraries"
-- `count` - Number of libraries returned
-- `libraries` - Array of library objects with `id`, `name`, `tagline`, `description`, `frameworks`, `latestVersion`, `docsUrl`, and `githubUrl`
-
-### Example
-
-```json
-{
-  "name": "list_libraries",
-  "arguments": {
-    "group": "state"
-  }
-}
-```
-
----
-
-## doc
-
-Fetch a specific documentation page by library and path.
-
-### Parameters
-
-| Parameter | Type   | Required | Description                                                                             |
-| --------- | ------ | -------- | --------------------------------------------------------------------------------------- |
-| `library` | string | Yes      | Library ID (e.g., `query`, `router`, `table`, `form`)                                   |
-| `path`    | string | Yes      | Documentation path (e.g., `framework/react/overview`, `framework/react/guides/queries`) |
-| `version` | string | No       | Version (e.g., `v5`, `v1`). Defaults to `latest`                                        |
-
-### Response
-
-- `title` - Document title from frontmatter
-- `content` - Full markdown content of the document
-- `url` - Canonical URL to the documentation page
-- `library` - Library name
-- `version` - Resolved version
-
-### Example
-
-```json
-{
-  "name": "doc",
-  "arguments": {
-    "library": "query",
-    "path": "framework/react/guides/queries",
-    "version": "v5"
-  }
-}
-```
-
-### Common Documentation Paths
-
-Most TanStack libraries follow this path structure:
-
-- `framework/{framework}/overview` - Framework-specific overview
-- `framework/{framework}/installation` - Installation guide
-- `framework/{framework}/guides/{topic}` - Guides for specific topics
-- `framework/{framework}/reference/{api}` - API reference
-
-Where `{framework}` is one of: `react`, `vue`, `solid`, `svelte`, `angular`
-
----
-
-## search_docs
-
-Full-text search across all TanStack documentation.
-
-### Parameters
-
-| Parameter   | Type   | Required | Description                                                  |
-| ----------- | ------ | -------- | ------------------------------------------------------------ |
-| `query`     | string | Yes      | Search query                                                 |
-| `library`   | string | No       | Filter to specific library (e.g., `query`, `router`)         |
-| `framework` | string | No       | Filter to specific framework (e.g., `react`, `vue`, `solid`) |
-| `limit`     | number | No       | Maximum results (default: 10, max: 50)                       |
-
-### Response
-
-- `query` - The search query
-- `totalHits` - Total number of matching documents
-- `results` - Array of search results with `title`, `url`, `snippet`, `library`, and `breadcrumb`
-
-### Example
-
-```json
-{
-  "name": "search_docs",
-  "arguments": {
-    "query": "useQuery refetch",
-    "library": "query",
-    "framework": "react",
-    "limit": 5
-  }
-}
-```
-
----
-
-## npm_stats
-
-NPM download statistics for TanStack org, individual libraries, or package comparisons.
-
-### Parameters
-
-| Parameter     | Type     | Required | Description                                                         |
-| ------------- | -------- | -------- | ------------------------------------------------------------------- |
-| `library`     | string   | No       | TanStack library ID (e.g., `query`, `router`)                       |
-| `packages`    | string[] | No       | NPM packages to compare (max 10)                                    |
-| `preset`      | string   | No       | Preset comparison ID (e.g., `data-fetching`)                        |
-| `listPresets` | boolean  | No       | List available preset comparisons                                   |
-| `range`       | string   | No       | Time range: `30d`, `90d`, `180d`, `1y`, `2y`, `all`. Default: `90d` |
-| `bin`         | string   | No       | Aggregation: `monthly`, `weekly`, `daily`. Default: `monthly`       |
-
-### Modes
-
-The tool operates in different modes based on which parameters are provided:
-
-1. **No parameters** - Returns TanStack org summary with library breakdown
-2. **`library`** - Returns stats for a specific TanStack library with package details
-3. **`packages`** - Compares arbitrary NPM packages
-4. **`preset`** - Uses a preset comparison (e.g., `data-fetching`, `state-management`)
-5. **`listPresets: true`** - Lists all available presets
-
-### Response Examples
-
-**Org summary (no params):**
-
-```json
-{
-  "org": "tanstack",
-  "totalDownloads": 1234567890,
-  "ratePerDay": 5000000,
-  "libraries": [{ "id": "query", "downloads": 500000000, "packages": 12 }]
-}
-```
-
-**Package comparison:**
-
-```json
-{
-  "range": { "start": "2024-01-01", "end": "2024-03-31" },
-  "bin": "monthly",
-  "packages": [
-    {
-      "name": "@tanstack/react-query",
-      "total": 15000000,
-      "avgPerDay": 165000,
-      "data": [{ "date": "2024-01-01", "downloads": 5000000 }]
-    }
-  ]
-}
-```
-
-### Examples
-
-```json
-// Org summary
-{ "name": "npm_stats", "arguments": {} }
-
-// Library breakdown
-{ "name": "npm_stats", "arguments": { "library": "query" } }
-
-// Compare packages
-{
-  "name": "npm_stats",
-  "arguments": {
-    "packages": ["@tanstack/react-query", "swr", "@apollo/client"],
-    "range": "1y",
-    "bin": "monthly"
-  }
-}
-
-// Use preset
-{ "name": "npm_stats", "arguments": { "preset": "data-fetching" } }
-
-// List presets
-{ "name": "npm_stats", "arguments": { "listPresets": true } }
-```
-
-### Available Presets
-
-Use `listPresets: true` to see all available presets. Common ones include:
-
-- `data-fetching` - React Query, SWR, Apollo, tRPC
-- `state-management` - Redux, MobX, Zustand, Jotai, Valtio
-- `routing-react` - React Router, TanStack Router, Next, Wouter
-- `data-grids` - AG Grid, TanStack Table, Handsontable
-- `virtualization` - TanStack Virtual, react-window, react-virtuoso
-- `frameworks` - React, Vue, Angular, Svelte, Solid
-- `forms` - React Hook Form, TanStack Form, Conform
-- `validation` - Zod, Yup, Valibot, ArkType
-
----
-
-## ecosystem
-
-Ecosystem partner recommendations filtered by category or TanStack library.
-
-### Parameters
-
-| Parameter  | Type   | Required | Description                                                                                                              |
-| ---------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------ |
-| `category` | string | No       | Filter by category: `database`, `auth`, `deployment`, `monitoring`, `cms`, `api`, `data-grid`, `code-review`, `learning` |
-| `library`  | string | No       | Filter by TanStack library (e.g., `start`, `router`, `query`)                                                            |
-
-### Response
-
-- `query` - The filters applied
-- `count` - Number of partners returned
-- `partners` - Array of partners with `id`, `name`, `tagline`, `description`, `category`, `categoryLabel`, `url`, `libraries`
-
-### Example
-
-```json
-{
-  "name": "ecosystem",
-  "arguments": {
-    "category": "database",
-    "library": "start"
-  }
-}
-```
-
----
-
-## Usage Tips
-
-### Finding Documentation
-
-1. **Start with `list_libraries`** to discover available libraries and their IDs
-2. **Use `search_docs`** to find specific topics when you don't know the exact path
-3. **Use `doc`** to fetch the full content once you know the path
-
-### Version Handling
-
-- Use `latest` (default) to always get the current documentation
-- Specify a version like `v5` or `v4` when working with a specific library version
-- The `list_libraries` tool shows available versions for each library
-
-### Path Discovery
-
-Search results include URLs that reveal the documentation path structure. For example, a URL like `https://tanstack.com/query/latest/docs/framework/react/guides/queries` indicates:
-
-- Library: `query`
-- Path: `framework/react/guides/queries`
-
-### Deep Source Code Exploration
-
-For understanding library internals beyond what documentation provides (implementation details, type definitions, test patterns), clone the relevant repository directly:
-
-| Library      | Clone Command                                             |
-| ------------ | --------------------------------------------------------- |
-| Query        | `git clone --depth 1 https://github.com/tanstack/query`   |
-| Router/Start | `git clone --depth 1 https://github.com/tanstack/router`  |
-| Table        | `git clone --depth 1 https://github.com/tanstack/table`   |
-| Form         | `git clone --depth 1 https://github.com/tanstack/form`    |
-| Virtual      | `git clone --depth 1 https://github.com/tanstack/virtual` |
-| Store        | `git clone --depth 1 https://github.com/tanstack/store`   |
-| DB           | `git clone --depth 1 https://github.com/tanstack/db`      |
-
-Then use native file tools (grep, read) to explore implementations, types, and tests.
-
----
-
-## Rate Limits
-
-- **All operations**: 60 requests per minute
diff --git a/docs/partner-placement.md b/docs/partner-placement.md
new file mode 100644
index 000000000..0d7b35f94
--- /dev/null
+++ b/docs/partner-placement.md
@@ -0,0 +1,70 @@
+# Partner Placement
+
+Partner placement is split into three separate decisions:
+
+- **Eligibility:** whether a partner can appear for a surface, category, library, feature, or user context.
+- **Tier:** the partner's commercial/display tier, which controls visual treatment and relative access to surfaces.
+- **Order:** the sequence used inside a surface once eligible partners are known.
+
+The order policy should be explicit per surface. Avoid treating the partner array order or legacy score as the policy itself.
+
+## Order Strategies
+
+### `static-curated`
+
+Use for surfaces where the order is editorially or commercially curated and should remain stable. These surfaces can preserve the existing order, use partner seniority, or use private commercial priority when seniority is unavailable.
+
+Do not expose private commercial criteria in client-facing field names, comments, or API responses. If a private priority is required, keep the public/client value generic, such as `placementPriority` or an already-resolved ordered list.
+
+### `tier-rotated`
+
+Use for visible partner surfaces where partners in the same tier should cycle over time. Tier order remains fixed, but partners inside the same tier are selected with weighted-random ordering for each loaded app session and surface.
+
+The root loader creates the session seed, so SSR and hydration receive the same value through loader data. Client placement hooks read the root loader data directly and do not refresh it during normal navigation. Each surface combines its stable surface id with the session seed; avoid runtime-generated component ids in the seed because they can diverge across server and client rendering. Partners default to equal probability within their tier; a future `placementWeight` can bias same-tier odds without changing the ordering API.
+
+### `contextual-recommendation`
+
+Use when a surface behaves like a product recommendation or builder suggestion. Product fit should be established before commercial weighting affects order. This strategy currently preserves the legacy tier/priority behavior while giving recommendation surfaces a separate policy label.
+
+### `machine-readable`
+
+Use for AI- or crawler-facing outputs such as `llms.txt` and JSON feeds. These should be deterministic and relevance-first. Do not rotate them merely for logo fairness unless the downstream behavior has been designed and disclosed as such.
+
+## Reserved Rules
+
+Reserved rules should be narrow. For example, Cloudflare is reserved as the first deployment/hosting partner in any list that contains Cloudflare and other deployment partners. That should not imply Cloudflare is globally first across every partner surface; non-deployment partners can still appear before Cloudflare when the surface is mixed-category.
+
+Deployment action buttons are a deployment-only surface. Cloudflare remains first when present. Tier order is still preserved, and providers within the same tier can rotate by session.
+
+## Current Surfaces
+
+- Partner directory: `tier-rotated` for active partners, `static-curated` for previous partners.
+- Partner grids and embeds: `tier-rotated`.
+- Docs and blog rails: `tier-rotated`.
+- Mobile docs strip: `tier-rotated`.
+- Builder feature picker and starter partner suggestions: `contextual-recommendation`.
+- Deploy action buttons: `tier-rotated` with deployment provider tiers preserved.
+- `llms.txt` and `/api/data/partners`: `machine-readable`.
+
+## Analytics
+
+Partner impression and click events should include:
+
+- `partner_id`
+- `placement`
+- `slot_index`
+- `partner_tier`
+- `order_strategy`
+- `rotation_seed` when the strategy rotates
+
+This lets reporting distinguish partner performance from placement policy and makes under/over-exposure easier to debug.
+
+## Contract Language
+
+Suggested external framing:
+
+> Partner tiers determine eligibility, visual treatment, reporting, and relative access to surfaces. Placement within the same tier may rotate or be curated depending on the surface. Some placements may include explicitly reserved rules for product, infrastructure, legal, or strategic reasons.
+
+For AI-assisted selection:
+
+> AI-assisted partner selection prioritizes user need and capability fit first. Partner tier may influence selection only among qualified options.
diff --git a/docs/proposals/npm-watchlist-registry-draft.md b/docs/proposals/npm-watchlist-registry-draft.md
new file mode 100644
index 000000000..1e6a4f612
--- /dev/null
+++ b/docs/proposals/npm-watchlist-registry-draft.md
@@ -0,0 +1,694 @@
+# Draft: NPM Watchlist Registry
+
+## Purpose
+
+Define a source-of-truth registry for tracked npm entities, rollups, and curated watchlists.
+
+This registry should replace the idea that `popular comparisons` are the canonical list. Popular comparisons can still exist, but they should derive from this registry.
+
+Rollups should be the reusable grouping abstraction.
+
+Watchlists should remain the primary user-facing saved and subscribed surface. Categories are metadata on entities, not the source of truth for ranking surfaces.
+
+## Design Goals
+
+- Model logical libraries, not just raw package names.
+- Support legacy package rollups.
+- Support reusable rollup definitions for ecosystems and grouped chart views.
+- Keep curation explicit and reviewable in code.
+- Make it easy to derive chart `packageGroups` for the existing UI.
+- Leave room for future time-aware lineage rules without requiring them in v1.
+
+## Suggested File
+
+- `src/utils/npm-watchlists.ts`
+
+## Proposed Types
+
+```ts
+export type NpmTrackedEntity = {
+  id: string
+  label: string
+  shortLabel?: string
+  description?: string
+  categories: Array<
+    | 'tanstack'
+    | 'data-fetching'
+    | 'routing'
+    | 'state'
+    | 'table'
+    | 'form'
+    | 'virtualization'
+    | 'testing'
+    | 'styling'
+    | 'build'
+    | 'validation'
+    | 'docs'
+    | 'framework'
+    | 'animation'
+    | 'tooling'
+    | 'database'
+  >
+  color?: string
+  packages: Array<{
+    name: string
+    from?: string
+    to?: string
+  }>
+  lineageStrategy?: 'sum-all' | 'time-bounded'
+  benchmarkEligible?: boolean
+  popularComparisonEligible?: boolean
+  hidden?: boolean
+}
+
+export type NpmWatchlist = {
+  id: string
+  title: string
+  description?: string
+  kind: 'curated-category' | 'curated-benchmark' | 'curated-tanstack'
+  entityIds?: string[]
+  rollupIds?: string[]
+  featured?: boolean
+  public?: boolean
+  popularComparison?: boolean
+  benchmark?: boolean
+}
+
+export type NpmRollup = {
+  id: string
+  title: string
+  description?: string
+  kind: 'ecosystem' | 'category' | 'benchmark' | 'editorial'
+  entityIds: string[]
+  membershipMode?: 'exclusive' | 'overlap'
+  color?: string
+  public?: boolean
+}
+```
+
+## V1 Simplification
+
+Even though the entity type allows `from` and `to`, v1 can treat almost all tracked entities as:
+
+- `lineageStrategy: 'sum-all'`
+- all packages included for the full period
+
+That matches the current stats architecture and keeps the first implementation simple.
+
+## Derivations
+
+The registry should support these outputs:
+
+1. `getWatchlist(id)`
+2. `getTrackedEntity(id)`
+3. `getRollup(id)`
+4. `getFeaturedWatchlists()`
+5. `toPackageGroups(watchlist)` for existing chart routes
+6. `toPopularComparisons()` to replace hand-maintained duplication
+7. `groupEntitiesByRollup(entityIds, rollupIds)` for charting and digest summarization
+
+## Curation Rules
+
+### Tracked entities
+
+- One entity should represent one logical product or library line.
+- One entity can belong to multiple categories.
+- Legacy package names should be included when they clearly map to the same product lineage.
+- Do not merge adjacent but meaningfully different products just because users might compare them.
+
+### Watchlists
+
+- A curated category watchlist should feel category-coherent.
+- A benchmark watchlist should be broad, stable, and slow-changing.
+- A featured watchlist should be editorially maintained and reviewed regularly.
+
+### Rollups
+
+- A rollup is a reusable editorial grouping of entities.
+- Rollups are explicit, not inferred from npm scopes or package naming.
+- Some rollups can overlap.
+- Some rollups should be exclusive where double counting would distort rankings.
+- Rollups should be stable enough to support long-term historical views.
+
+### Review cadence
+
+- Featured watchlists: monthly review
+- Benchmark watchlists: quarterly review
+- Ecosystem rollups: quarterly review
+- Entity lineage changes: only when we have high confidence
+
+## Starter Tracked Entities
+
+This is not exhaustive. It is the first pass for v1.
+
+```ts
+export const trackedEntities: NpmTrackedEntity[] = [
+  {
+    id: 'tanstack-query',
+    label: 'TanStack Query',
+    categories: ['tanstack', 'data-fetching'],
+    color: '#FF4500',
+    packages: [{ name: '@tanstack/react-query' }, { name: 'react-query' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'swr',
+    label: 'SWR',
+    categories: ['data-fetching'],
+    color: '#ec4899',
+    packages: [{ name: 'swr' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'apollo-client',
+    label: 'Apollo Client',
+    categories: ['data-fetching'],
+    color: '#6B46C1',
+    packages: [{ name: '@apollo/client' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'trpc-client',
+    label: 'tRPC Client',
+    categories: ['data-fetching'],
+    color: '#2596BE',
+    packages: [{ name: '@trpc/client' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'tanstack-router',
+    label: 'TanStack Router',
+    categories: ['tanstack', 'routing'],
+    color: '#32CD32',
+    packages: [{ name: '@tanstack/react-router' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'react-router',
+    label: 'React Router',
+    categories: ['routing'],
+    color: '#FF0000',
+    packages: [{ name: 'react-router' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'wouter',
+    label: 'Wouter',
+    categories: ['routing'],
+    color: '#8b5cf6',
+    packages: [{ name: 'wouter' }],
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'tanstack-table',
+    label: 'TanStack Table',
+    categories: ['tanstack', 'table'],
+    color: '#FF7043',
+    packages: [{ name: '@tanstack/react-table' }, { name: 'react-table' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'ag-grid',
+    label: 'AG Grid',
+    categories: ['table'],
+    color: '#29B6F6',
+    packages: [{ name: 'ag-grid-community' }, { name: 'ag-grid-enterprise' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'mui-data-grid',
+    label: 'MUI Data Grid',
+    categories: ['table'],
+    color: '#1976D2',
+    packages: [{ name: '@mui/x-data-grid' }, { name: 'mui-datatables' }],
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'tanstack-form',
+    label: 'TanStack Form',
+    categories: ['tanstack', 'form'],
+    color: '#FFD700',
+    packages: [
+      { name: '@tanstack/form-core' },
+      { name: '@tanstack/react-form' },
+    ],
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'react-hook-form',
+    label: 'React Hook Form',
+    categories: ['form'],
+    color: '#EC5990',
+    packages: [{ name: 'react-hook-form' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'conform',
+    label: 'Conform',
+    categories: ['form'],
+    color: '#FF5733',
+    packages: [{ name: '@conform-to/dom' }],
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'tanstack-virtual',
+    label: 'TanStack Virtual',
+    categories: ['tanstack', 'virtualization'],
+    color: '#8B5CF6',
+    packages: [{ name: '@tanstack/react-virtual' }, { name: 'react-virtual' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'react-window',
+    label: 'react-window',
+    categories: ['virtualization'],
+    color: '#4ECDC4',
+    packages: [{ name: 'react-window' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'react-virtualized',
+    label: 'react-virtualized',
+    categories: ['virtualization'],
+    color: '#FF6B6B',
+    packages: [{ name: 'react-virtualized' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'redux',
+    label: 'Redux',
+    categories: ['state'],
+    color: '#764ABC',
+    packages: [{ name: 'redux' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'zustand',
+    label: 'Zustand',
+    categories: ['state'],
+    color: '#764ABC',
+    packages: [{ name: 'zustand' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'jotai',
+    label: 'Jotai',
+    categories: ['state'],
+    color: '#6366f1',
+    packages: [{ name: 'jotai' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'valtio',
+    label: 'Valtio',
+    categories: ['state'],
+    color: '#FF6B6B',
+    packages: [{ name: 'valtio' }],
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'vite',
+    label: 'Vite',
+    categories: ['build', 'tooling'],
+    color: '#008000',
+    packages: [{ name: 'vite' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'webpack',
+    label: 'Webpack',
+    categories: ['build', 'tooling'],
+    color: '#8DD6F9',
+    packages: [{ name: 'webpack' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'rollup',
+    label: 'Rollup',
+    categories: ['build', 'tooling'],
+    color: '#e80A3F',
+    packages: [{ name: 'rollup' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'esbuild',
+    label: 'esbuild',
+    categories: ['build', 'tooling'],
+    color: '#FFCF00',
+    packages: [{ name: 'esbuild' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'rspack',
+    label: 'Rspack',
+    categories: ['build', 'tooling'],
+    color: '#8DD6F9',
+    packages: [{ name: '@rspack/core' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'zod',
+    label: 'Zod',
+    categories: ['validation'],
+    color: '#ef4444',
+    packages: [{ name: 'zod' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'valibot',
+    label: 'Valibot',
+    categories: ['validation'],
+    color: '#f97316',
+    packages: [{ name: 'valibot' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'yup',
+    label: 'Yup',
+    categories: ['validation'],
+    color: '#06b6d4',
+    packages: [{ name: 'yup' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'react',
+    label: 'React',
+    categories: ['framework'],
+    color: '#61DAFB',
+    packages: [{ name: 'react' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'vue',
+    label: 'Vue',
+    categories: ['framework'],
+    color: '#41B883',
+    packages: [{ name: 'vue' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'angular-core',
+    label: 'Angular',
+    categories: ['framework'],
+    color: '#DD0031',
+    packages: [{ name: '@angular/core' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'svelte',
+    label: 'Svelte',
+    categories: ['framework'],
+    color: '#FF3E00',
+    packages: [{ name: 'svelte' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+  {
+    id: 'solid-js',
+    label: 'Solid',
+    categories: ['framework'],
+    color: '#2C4F7C',
+    packages: [{ name: 'solid-js' }],
+    benchmarkEligible: true,
+    popularComparisonEligible: true,
+  },
+]
+```
+
+## Starter Curated Watchlists
+
+```ts
+export const watchlists: NpmWatchlist[] = [
+  {
+    id: 'data-fetching',
+    title: 'Data Fetching',
+    kind: 'curated-category',
+    entityIds: ['tanstack-query', 'swr', 'apollo-client', 'trpc-client'],
+    featured: true,
+    public: true,
+    popularComparison: true,
+  },
+  {
+    id: 'routing-react',
+    title: 'Routing (React)',
+    kind: 'curated-category',
+    entityIds: ['react-router', 'tanstack-router', 'wouter'],
+    featured: true,
+    public: true,
+    popularComparison: true,
+  },
+  {
+    id: 'tables-data-grids',
+    title: 'Tables and Data Grids',
+    kind: 'curated-category',
+    entityIds: ['ag-grid', 'tanstack-table', 'mui-data-grid'],
+    featured: true,
+    public: true,
+    popularComparison: true,
+  },
+  {
+    id: 'forms',
+    title: 'Forms',
+    kind: 'curated-category',
+    entityIds: ['react-hook-form', 'tanstack-form', 'conform'],
+    featured: true,
+    public: true,
+    popularComparison: true,
+  },
+  {
+    id: 'virtualization',
+    title: 'Virtualization',
+    kind: 'curated-category',
+    entityIds: ['react-virtualized', 'react-window', 'tanstack-virtual'],
+    featured: true,
+    public: true,
+    popularComparison: true,
+  },
+  {
+    id: 'state-management',
+    title: 'State Management',
+    kind: 'curated-category',
+    entityIds: ['redux', 'zustand', 'jotai', 'valtio'],
+    featured: true,
+    public: true,
+    popularComparison: true,
+  },
+  {
+    id: 'build-tools',
+    title: 'Build Tools',
+    kind: 'curated-category',
+    entityIds: ['webpack', 'vite', 'rollup', 'esbuild', 'rspack'],
+    featured: true,
+    public: true,
+    popularComparison: true,
+  },
+  {
+    id: 'validation',
+    title: 'Validation',
+    kind: 'curated-category',
+    entityIds: ['zod', 'valibot', 'yup'],
+    featured: true,
+    public: true,
+    popularComparison: true,
+  },
+  {
+    id: 'frameworks',
+    title: 'Frameworks',
+    kind: 'curated-category',
+    entityIds: ['react', 'vue', 'angular-core', 'svelte', 'solid-js'],
+    featured: true,
+    public: true,
+    popularComparison: true,
+  },
+  {
+    id: 'all-tanstack',
+    title: 'All TanStack Libraries',
+    kind: 'curated-tanstack',
+    entityIds: [
+      'tanstack-query',
+      'tanstack-router',
+      'tanstack-table',
+      'tanstack-form',
+      'tanstack-virtual',
+    ],
+    featured: true,
+    public: true,
+    popularComparison: true,
+  },
+  {
+    id: 'javascript-ecosystem-leaders',
+    title: 'JavaScript Ecosystem Leaders',
+    kind: 'curated-benchmark',
+    entityIds: [
+      'react',
+      'vue',
+      'angular-core',
+      'svelte',
+      'vite',
+      'webpack',
+      'rollup',
+      'esbuild',
+      'react-router',
+      'tanstack-query',
+      'apollo-client',
+      'redux',
+      'zustand',
+      'react-hook-form',
+      'zod',
+    ],
+    featured: true,
+    public: true,
+    benchmark: true,
+  },
+]
+```
+
+## Starter Rollups
+
+These are the new reusable grouping layer.
+
+```ts
+export const rollups: NpmRollup[] = [
+  {
+    id: 'tanstack-ecosystem',
+    title: 'TanStack Ecosystem',
+    kind: 'ecosystem',
+    entityIds: [
+      'tanstack-query',
+      'tanstack-router',
+      'tanstack-table',
+      'tanstack-form',
+      'tanstack-virtual',
+    ],
+    membershipMode: 'exclusive',
+    color: '#FF4500',
+    public: true,
+  },
+  {
+    id: 'data-fetching-ecosystem',
+    title: 'Data Fetching Ecosystem',
+    kind: 'category',
+    entityIds: ['tanstack-query', 'swr', 'apollo-client', 'trpc-client'],
+    membershipMode: 'overlap',
+    public: true,
+  },
+  {
+    id: 'router-ecosystem',
+    title: 'Router Ecosystem',
+    kind: 'category',
+    entityIds: ['react-router', 'tanstack-router', 'wouter'],
+    membershipMode: 'overlap',
+    public: true,
+  },
+  {
+    id: 'javascript-ecosystem-index',
+    title: 'JavaScript Ecosystem Index',
+    kind: 'benchmark',
+    entityIds: [
+      'react',
+      'vue',
+      'angular-core',
+      'svelte',
+      'vite',
+      'webpack',
+      'rollup',
+      'esbuild',
+      'react-router',
+      'tanstack-query',
+      'redux',
+      'react-hook-form',
+      'zod',
+    ],
+    membershipMode: 'overlap',
+    public: true,
+  },
+]
+```
+
+Future ecosystem rollups can include:
+
+- `vercel-ecosystem`
+- `remix-ecosystem`
+- `shopify-ecosystem`
+
+Those should be explicit editorial definitions, not guessed from npm scopes.
+
+## Notes On Specific TanStack Entities
+
+### Query
+
+- Roll up `react-query` into `@tanstack/react-query`.
+- This is a clear lineage case.
+
+### Table
+
+- Roll up `react-table` into `@tanstack/react-table`.
+- This is also a clear lineage case.
+
+### Virtual
+
+- Roll up `react-virtual` into `@tanstack/react-virtual`.
+- Clear lineage case.
+
+### Router
+
+- Do not automatically roll `react-location` into `@tanstack/react-router` in v1.
+- They are adjacent and related, but this one is more semantically debatable than Query, Table, or Virtual.
+- Keep this as an explicit later decision if we want lineage continuity there.
+
+### Form
+
+- It may be useful to define separate tracked entities for `@tanstack/form-core` and `@tanstack/react-form` later.
+- For now, a single `TanStack Form` entity is probably fine if the goal is product-level visibility.
+
+## Migration From Existing Popular Comparisons
+
+Recommended path:
+
+1. Create the entity, rollup, and watchlist registry.
+2. Rebuild `getPopularComparisons()` from curated watchlists and rollups marked for that purpose.
+3. Keep route behavior and `packageGroup` format unchanged at first.
+4. Add optional rollup grouping to chart UI later.
+5. Remove duplication once parity looks good.
+
+## Open Decisions
+
+1. How aggressive should we be about rolling up framework adapters into one product-level TanStack entity?
+2. Which rollups should be exclusive versus overlap-friendly?
+3. Should benchmark lists include only `benchmarkEligible` entities or also allow manual exceptions?
+4. Should `JavaScript Ecosystem Leaders` aim for 25, 50, or 100 entities in v1?
+5. Which watchlists and rollups should be exposed publicly on day one versus internal-only at first?
+
+## Immediate Next Steps
+
+- Convert this draft into a real `src/utils/npm-watchlists.ts` module.
+- Add real rollup definitions for ecosystem and benchmark views.
+- Fill out the tracked entity registry beyond the starter set.
+- Rebuild stale popular comparisons from the registry.
+- Draft the first larger benchmark roster separately.
diff --git a/docs/proposals/npm-watchlists-and-weekly-digests.md b/docs/proposals/npm-watchlists-and-weekly-digests.md
new file mode 100644
index 000000000..9abc6e304
--- /dev/null
+++ b/docs/proposals/npm-watchlists-and-weekly-digests.md
@@ -0,0 +1,665 @@
+# Proposal: NPM Watchlists and Weekly Digests
+
+## North Star
+
+Turn TanStack NPM Stats into a durable market map for JavaScript libraries, not just a charting tool.
+
+Users should be able to follow a set of libraries, understand who is actually gaining or losing ground inside that set, and get a concise weekly digest that surfaces meaningful movement without reacting to noisy daily swings.
+
+## Why This Matters
+
+- Raw npm download charts are useful, but they do not answer "who is winning?"
+- Raw download growth is increasingly misleading because the whole ecosystem keeps growing.
+- Users care about cohorts, rankings, trend changes, and share shifts more than isolated download counts.
+- TanStack already has fast comparison UX and historical npm data. This feature turns that into a repeatable product.
+
+## Product Outcome
+
+Add rollups and watchlists that users can explore, compare, and subscribe to by email once a week.
+
+Each digest should answer:
+
+- Which libraries moved up or down?
+- Which libraries gained or lost share?
+- Which crossovers happened?
+- Which trends look sustained instead of noisy?
+
+## Core Product Principles
+
+- `packages -> entities -> rollups -> watchlists` should be the core model.
+- Watchlists are the user-facing saved and subscribed surface.
+- Rollups are reusable editorial groupings for charts, rankings, and ecosystem views.
+- Popular comparisons are just one derived view, not the source of truth.
+- Rankings should be cohort-aware, not framed as vague "global npm rank".
+- Normalization should favor share and relative outperformance, not raw download growth.
+- Long-term rollups must work across legacy package names and package renames.
+- Weekly summaries should highlight meaningful movement, not short-term volatility.
+
+## User Stories
+
+1. As a user, I can subscribe to a curated watchlist like `Data Fetching` or `Build Tools`.
+2. As a user, I can save a custom watchlist from the current `/stats/npm` comparison.
+3. As a user, I can follow a logical library even if its npm history spans multiple package names.
+4. As a user, I can receive a weekly digest showing rank changes, share changes, and notable crossovers.
+5. As a user, I can look back across months or years and see how the watchlist evolved.
+6. As a user, I can compare larger ecosystem rollups like `TanStack` vs `Vercel` vs `Remix`.
+7. As a user, I can plot entities grouped by rollup on charts.
+
+## Product Shape
+
+### 1. Tracked entities
+
+The atomic unit should not be a single npm package. It should be a logical tracked entity.
+
+Example:
+
+```ts
+{
+  id: 'tanstack-query',
+  label: 'TanStack Query',
+  packages: ['@tanstack/react-query', 'react-query'],
+}
+```
+
+This gives us:
+
+- continuity across legacy/current package names
+- stable ranking entities
+- cleaner digest language
+- long-term rollups without losing historical identity
+
+### 2. Rollups
+
+A rollup is a reusable grouped view of tracked entities.
+
+Examples:
+
+- `tanstack-ecosystem`
+- `vercel-ecosystem`
+- `remix-ecosystem`
+- `data-fetching-ecosystem`
+- `router-ecosystem`
+
+Rollups let us:
+
+- compare larger ecosystems on charts
+- group entities visually inside one watchlist
+- create reusable market-map views without copying entity membership everywhere
+- support ecosystem-vs-ecosystem reporting in digests later
+
+### 3. Watchlists
+
+A watchlist is a named saved surface for ranking, digesting, and charting.
+
+A watchlist can contain:
+
+- entities directly
+- rollups
+- or both, depending on the UX we want
+
+Recommended watchlist types:
+
+- Curated category watchlists
+- Curated benchmark watchlists
+- TanStack-specific watchlists
+- Ecosystem watchlists
+- User-created custom watchlists
+
+### 4. Weekly digest
+
+Each watchlist can produce a weekly digest with:
+
+- current rank
+- previous rank
+- rank delta
+- share of watchlist
+- share delta
+- trailing 4-week trend
+- notable crossovers
+- link back to the live chart
+
+Future digest expansions:
+
+- rollup-vs-rollup share changes
+- entity movement inside a rollup
+- ecosystem momentum summaries
+
+## Current Model Draft
+
+This is the current preferred abstraction stack:
+
+- `package`: raw npm package history
+- `entity`: one logical library or product across one or more packages
+- `rollup`: reusable editorial grouping of entities
+- `watchlist`: a saved and subscribable surface for charts, rankings, and digests
+
+Current preferred type direction:
+
+```ts
+export type NpmTrackedEntity = {
+  id: string
+  label: string
+  shortLabel?: string
+  description?: string
+  categories: Array<
+    | 'tanstack'
+    | 'data-fetching'
+    | 'routing'
+    | 'state'
+    | 'table'
+    | 'form'
+    | 'virtualization'
+    | 'testing'
+    | 'styling'
+    | 'build'
+    | 'validation'
+    | 'docs'
+    | 'framework'
+    | 'animation'
+    | 'tooling'
+    | 'database'
+  >
+  color?: string
+  packages: Array<{
+    name: string
+    from?: string
+    to?: string
+  }>
+  lineageStrategy?: 'sum-all' | 'time-bounded'
+  benchmarkEligible?: boolean
+  popularComparisonEligible?: boolean
+  hidden?: boolean
+}
+
+export type NpmRollup = {
+  id: string
+  title: string
+  description?: string
+  kind: 'ecosystem' | 'category' | 'benchmark' | 'editorial'
+  entityIds: string[]
+  membershipMode?: 'exclusive' | 'overlap'
+  color?: string
+  public?: boolean
+}
+
+export type NpmWatchlist = {
+  id: string
+  title: string
+  description?: string
+  kind: 'curated-category' | 'curated-benchmark' | 'curated-tanstack'
+  entityIds?: string[]
+  rollupIds?: string[]
+  featured?: boolean
+  public?: boolean
+  popularComparison?: boolean
+  benchmark?: boolean
+}
+```
+
+Important modeling notes:
+
+- categories belong on entities as `categories: string[]`, not a single `category`
+- watchlists are still the primary curated product surface
+- rollups are the reusable grouping abstraction
+- popular comparisons should be derived from the registry, not hand-maintained independently
+- v1 can mostly use `lineageStrategy: 'sum-all'`
+- the model should still leave room for future time-bounded lineage
+
+## Current Decisions
+
+These are the main decisions made so far and should be preserved in any handoff.
+
+- Do not frame the feature as "global npm rank" in v1.
+- Rank within a defined cohort, watchlist, or benchmark basket.
+- Use trailing 28-day downloads for ranking.
+- Use share of watchlist as the primary normalization lens.
+- Use relative growth vs watchlist median as a secondary lens.
+- Defer anomaly detection.
+- Prefer conservative digest-oriented trend signals over loose anomaly alerts.
+- Build curated entities and watchlists separately from current `popular comparisons`.
+- Include legacy package rollups where lineage is clear.
+- Preserve compatibility with long-term and multi-year rollups.
+- Treat rollups as first-class because ecosystem-vs-ecosystem views are valuable.
+- Allow entities to belong to multiple categories.
+- Allow some rollups to overlap and some to be exclusive.
+
+## Lineage Decisions So Far
+
+These are the explicit lineage calls already discussed.
+
+- Roll up `react-query` into `@tanstack/react-query`.
+- Roll up `react-table` into `@tanstack/react-table`.
+- Roll up `react-virtual` into `@tanstack/react-virtual`.
+- Do not automatically roll `react-location` into `@tanstack/react-router` in v1.
+- TanStack Form may eventually need separate entity treatment for `@tanstack/form-core` and `@tanstack/react-form`, but one product-level entity is acceptable for v1.
+
+## Starter Registry Direction
+
+These are the concrete examples already drafted and should be treated as the current starting point, not final production data.
+
+Starter entities:
+
+- `tanstack-query`: `@tanstack/react-query` + `react-query`
+- `swr`: `swr`
+- `apollo-client`: `@apollo/client`
+- `trpc-client`: `@trpc/client`
+- `tanstack-router`: `@tanstack/react-router`
+- `react-router`: `react-router`
+- `wouter`: `wouter`
+- `tanstack-table`: `@tanstack/react-table` + `react-table`
+- `ag-grid`: `ag-grid-community` + `ag-grid-enterprise`
+- `mui-data-grid`: `@mui/x-data-grid` + `mui-datatables`
+- `tanstack-form`: `@tanstack/form-core` + `@tanstack/react-form`
+- `react-hook-form`: `react-hook-form`
+- `conform`: `@conform-to/dom`
+- `tanstack-virtual`: `@tanstack/react-virtual` + `react-virtual`
+- `react-window`: `react-window`
+- `react-virtualized`: `react-virtualized`
+- `redux`: `redux`
+- `zustand`: `zustand`
+- `jotai`: `jotai`
+- `valtio`: `valtio`
+- `vite`: `vite`
+- `webpack`: `webpack`
+- `rollup`: `rollup`
+- `esbuild`: `esbuild`
+- `rspack`: `@rspack/core`
+- `zod`: `zod`
+- `valibot`: `valibot`
+- `yup`: `yup`
+- `react`: `react`
+- `vue`: `vue`
+- `angular-core`: `@angular/core`
+- `svelte`: `svelte`
+- `solid-js`: `solid-js`
+
+Starter watchlists:
+
+- `data-fetching`
+- `routing-react`
+- `tables-data-grids`
+- `forms`
+- `virtualization`
+- `state-management`
+- `build-tools`
+- `validation`
+- `frameworks`
+- `all-tanstack`
+- `javascript-ecosystem-leaders`
+
+Starter rollups:
+
+- `tanstack-ecosystem`
+- `data-fetching-ecosystem`
+- `router-ecosystem`
+- `javascript-ecosystem-index`
+
+Future rollups already discussed:
+
+- `vercel-ecosystem`
+- `remix-ecosystem`
+- `shopify-ecosystem`
+
+## Rollup Semantics
+
+Rollups should be explicit editorial definitions, not inferred automatically from npm scopes or package naming.
+
+Two intended rollup modes:
+
+- `exclusive`: best for aggregate comparisons where double counting would distort the view
+- `overlap`: best for discovery, category views, and flexible grouped charting
+
+Examples:
+
+- `tanstack-ecosystem` should likely be `exclusive`
+- category-style rollups like `router-ecosystem` can be `overlap`
+
+## Popular Comparisons Migration
+
+The current `popular comparisons` file is useful but not a good source of truth.
+
+Migration direction:
+
+1. Build the entity, rollup, and watchlist registry.
+2. Rebuild `getPopularComparisons()` from curated watchlists and rollups flagged for chart use.
+3. Keep the existing route behavior and `packageGroup` output shape unchanged at first.
+4. Add rollup-aware chart grouping later.
+5. Remove duplicated manual comparison definitions once parity looks good.
+
+## Handoff Notes
+
+If another agent picks this up, these are the highest-value next steps already implied by the current plan.
+
+1. Convert the draft model into a real `src/utils/npm-watchlists.ts` module.
+2. Expand the entity registry beyond the starter examples.
+3. Define the first real ecosystem rollups.
+4. Decide the first public benchmark basket, especially `JavaScript Ecosystem Leaders`.
+5. Replace stale `popular comparisons` with registry-derived definitions.
+6. Design the DB schema around entities, rollups, watchlists, subscriptions, and weekly snapshots.
+
+## Registry Strategy
+
+### Entities, rollups, and watchlists should become a first-class registry
+
+Current `popular comparisons` are useful, but they are not sufficient as the long-term source of truth.
+
+Problems with using them directly:
+
+- some are out of date
+- some are sized for chart exploration, not ongoing tracking
+- some do not include legacy package rollups
+- some are too small or too editorial for ranking semantics
+
+We should create a separate curated registry for entities, rollups, and watchlists and let `popular comparisons` derive from it where useful.
+
+Suggested source file:
+
+- `src/utils/npm-watchlists.ts`
+
+### Why rollups matter
+
+Rollups are what let this feature graduate from simple package comparison into a real market map.
+
+Examples:
+
+- compare `TanStack` vs `Vercel` vs `Remix`
+- plot all router-related entities and color them by ecosystem rollup
+- compare a product rollup against its category peers
+- track how an ecosystem's aggregate share changes over time
+
+### Starter watchlist categories
+
+Curated category watchlists:
+
+- Data Fetching
+- Routing
+- Tables and Data Grids
+- Forms
+- State Management
+- Virtualization
+- Testing
+- Styling
+- Build Tools
+- Validation and Schema
+- Motion and Animation
+- Meta-frameworks
+
+Curated benchmark watchlists:
+
+- JavaScript Ecosystem Leaders
+- React Ecosystem Leaders
+- JavaScript Infra Index
+- Frontend Foundation 50
+
+TanStack watchlists:
+
+- All TanStack Libraries
+- TanStack Query Ecosystem
+- TanStack Router Ecosystem
+- TanStack Table Ecosystem
+
+Ecosystem rollups and watchlists:
+
+- TanStack Ecosystem
+- Vercel Ecosystem
+- Remix Ecosystem
+- Router Ecosystem
+- Data Fetching Ecosystem
+
+## Legacy Package Rules
+
+Legacy packages should usually roll into the same tracked entity when they represent the same product lineage.
+
+Examples:
+
+- `react-query` + `@tanstack/react-query`
+- `react-table` + `@tanstack/react-table`
+- `react-virtual` + `@tanstack/react-virtual`
+
+Do not assume every rename or adjacent product belongs in the same lineage forever. The model should allow future time-aware lineage rules if simple summing becomes misleading.
+
+V1 rule:
+
+- tracked entities use a flat array of package names and simple summed downloads
+
+Future rule if needed:
+
+- tracked entities can support time-bounded package membership
+
+## Ranking and Normalization
+
+Raw download growth is not a good primary signal because the entire ecosystem is growing.
+
+### Primary ranking metric
+
+Use trailing 28-day downloads for rank within a watchlist.
+
+Why 28-day:
+
+- smoother than daily or weekly
+- still responsive enough for weekly digests
+- less sensitive to npm reporting noise
+
+### Primary normalization metric: share of watchlist
+
+```txt
+share_of_watchlist = entity_28d_downloads / sum(all_watchlist_entity_28d_downloads)
+```
+
+This should be the main lens in digests because it makes leaders and laggards visible even when the whole cohort is growing.
+
+### Secondary normalization metric: relative growth vs cohort
+
+```txt
+relative_growth = entity_growth_rate - median_growth_rate_of_watchlist
+```
+
+This helps answer whether a library is outperforming or underperforming peers.
+
+### Optional tertiary benchmark: ecosystem index
+
+Do not use a raw sum of giant packages as the main baseline.
+
+If we add an ecosystem benchmark, it should come from a stable curated basket like `JavaScript Ecosystem Leaders` and use a median or trimmed-mean growth factor rather than raw weighted sum.
+
+### Digest metrics to show in v1
+
+- rank
+- rank delta
+- share of watchlist
+- share delta
+- trailing 4-week trend
+- crossover events
+
+## Trend Detection
+
+Avoid generic "anomaly detection" in v1.
+
+The data is too noisy and npm has known reporting weirdness. We already correct obvious outliers and zero-day anomalies in the stats pipeline.
+
+If we surface trend change signals, they should be conservative and digest-oriented.
+
+Suggested v1 notable movement rules:
+
+- rank changed by at least 1
+- share moved by a meaningful threshold
+- one entity crossed another and stayed ahead for at least one full digest period
+- growth outperformed the cohort median by a meaningful margin
+
+Possible later signals:
+
+- sustained acceleration over 4 weeks vs prior 8 to 12 weeks
+- sustained deceleration over 4 weeks vs prior 8 to 12 weeks
+- held rank breakout after 2 consecutive weeks
+
+## Long-Term Rollups
+
+This feature must support multi-year rollups.
+
+The current architecture is already favorable:
+
+- npm history is cached as year-based daily chunks
+- historical chunks are immutable
+- package groups already support rollups across multiple packages
+
+What we need to preserve:
+
+- tracked entities, not single-package rows
+- reusable rollups on top of tracked entities
+- raw historical chunks as source of truth
+- derived weekly or monthly snapshots for cheap leaderboard queries
+
+Recommended derived data:
+
+- weekly watchlist snapshots for digest generation and rank history
+- optional monthly snapshots for faster long-range reporting
+
+This keeps the system flexible:
+
+- raw chunks allow recomputation when formulas change
+- snapshots keep digests and rank-history queries cheap
+- rollups can be recalculated without changing the raw source data
+
+### Rollup views to support later
+
+- yearly rollup trend lines
+- rank history by entity within a rollup
+- ecosystem-vs-ecosystem comparisons
+- grouped charts where entities are colored or faceted by rollup
+
+## UX Entry Points
+
+### `/stats/npm`
+
+- `Save this comparison`
+- `Follow this watchlist`
+- `Subscribe to weekly digest`
+
+### Library-specific npm stats pages
+
+- `Follow this library`
+- `Add to watchlist`
+
+### Account area
+
+- My watchlists
+- Subscriptions
+- Digest frequency
+- Pause or unsubscribe
+
+## Data Model Direction
+
+Suggested tables:
+
+- `npm_tracked_entities`
+- `npm_tracked_entity_packages`
+- `npm_rollups`
+- `npm_rollup_entities`
+- `npm_watchlists`
+- `npm_watchlist_items`
+- `npm_watchlist_subscriptions`
+- `npm_watchlist_weekly_snapshots`
+- `npm_digest_sends`
+
+Notes:
+
+- tracked entities are the canonical source for rollups and labels
+- rollups reference tracked entities
+- watchlists can reference tracked entities, rollups, or both
+- weekly snapshots are required for stable digest generation and historical ranking views
+- digest send records help with idempotency and auditability
+
+## Implementation Phases
+
+### Phase 1. Curated registry
+
+- Define tracked entities, rollups, and curated watchlists in code
+- Include legacy package rollups where appropriate
+- Refresh and replace stale `popular comparisons`
+- Establish one larger benchmark watchlist like `JavaScript Ecosystem Leaders`
+
+### Phase 2. Snapshot pipeline
+
+- Compute weekly watchlist snapshots from historical npm data
+- Store rank, share, and trailing trend fields
+- Make snapshot generation idempotent
+
+### Phase 3. User-facing watchlists
+
+- Allow signed-in users to save comparisons as custom watchlists
+- Allow subscription management from account surfaces
+- Allow subscription from stats pages
+
+### Phase 4. Weekly digests
+
+- Generate digest content from weekly snapshots
+- Send through Resend
+- Include unsubscribe and pause controls
+
+### Phase 5. Trend signals and benchmark refinement
+
+- Add conservative trend-change detection
+- Add ecosystem index if the curated benchmark proves stable and useful
+
+## Suggested Implementation Order
+
+1. Build the curated tracked-entity and watchlist registry.
+2. Add reusable rollups for ecosystems and category-level groupings.
+3. Replace or derive `popular comparisons` from the new registry.
+4. Add database tables for tracked entities, rollups, watchlists, subscriptions, and weekly snapshots.
+5. Build the weekly snapshot job on top of existing historical npm chunks.
+6. Expose watchlists and rollup grouping in UI without email first.
+7. Add weekly digest generation and delivery.
+8. Add rank history and long-range watchlist views.
+9. Add conservative trend signals only after real snapshot data exists.
+
+## Success Criteria
+
+- Users can subscribe to curated watchlists and custom watchlists.
+- Users can compare major ecosystem rollups clearly.
+- Digests clearly show rank movement and share movement.
+- Rankings are stable enough to feel trustworthy week to week.
+- Legacy package history rolls up cleanly into one logical entity.
+- Multi-year watchlist history remains queryable and understandable.
+- We can explain the ranking math in plain English.
+
+## Non-Goals For V1
+
+- claiming true global npm rank across the whole registry
+- real-time alerts
+- daily digest spam
+- loose anomaly detection with low confidence
+- overfitting the system to every one-off package rename
+
+## Open Questions
+
+1. Which curated watchlists should ship first?
+2. How large should `JavaScript Ecosystem Leaders` be?
+3. Which legacy package transitions deserve permanent lineage rollups?
+4. Which rollups should be exclusive versus allowed to overlap?
+5. Should custom watchlists allow raw package groups, tracked entities, rollups, or all three?
+6. Should digests be weekly only in v1, or should monthly be supported from day one?
+7. Do we want one digest per watchlist or one combined digest across all subscriptions?
+
+## Progress
+
+- [ ] Define tracked entity model
+- [ ] Define rollup model
+- [ ] Draft curated watchlist registry
+- [ ] Draft curated ecosystem rollups
+- [ ] Audit and refresh current popular comparisons
+- [ ] Define lineage rules for legacy package rollups
+- [ ] Design DB schema
+- [ ] Build weekly snapshot job
+- [ ] Build watchlist UI surfaces
+- [ ] Build subscription management
+- [ ] Build weekly digest generation
+- [ ] Build email delivery and unsubscribe flow
+- [ ] Add rank history views
+- [ ] Evaluate trend signals after snapshot data accumulates
+
+## Notes
+
+- Existing npm stats infrastructure already gives us a strong foundation: historical daily chunks, package grouping, outlier correction, and email transport.
+- The biggest risk is product semantics, not raw implementation difficulty.
+- The feature will feel credible only if watchlists are curated well and ranking math stays easy to explain.
diff --git a/docs/source-code-audit-2026-06-23.md b/docs/source-code-audit-2026-06-23.md
new file mode 100644
index 000000000..cd5da7ed0
--- /dev/null
+++ b/docs/source-code-audit-2026-06-23.md
@@ -0,0 +1,2392 @@
+# Source Code Audit - 2026-06-23
+
+Status: living audit report. Scope covers the source inventory, static scans, full `src/routes` pass, `src/libraries` metadata, `src/styles`, API/server-function boundaries, auth/OAuth repositories and flows, builder endpoints, builder client/deploy UI, application-starter paths, `src/components` domain passes including landing, shop, game, stats, docs, admin/community, SearchModal/AiDock, LibraryLayout/docs chrome, partner/sponsor, stack, CodeExplorer/FileExplorer, query/hooks/client data helpers, MCP transport/tools, CLI auth tickets, scheduled tasks, shared cache/db/runtime/Sentry/env helpers, UI primitives, image helpers, contexts/stores, Vite/Start/test config, scripts, and existing tests. Excludes `node_modules`, generated route tree findings, blog prose findings, images/assets, and packaged starter template files.
+
+The repo is large: roughly 145k hand-written TS/TSX lines under `src`, plus tests and scripts, with the largest files concentrated in search, navigation/layout, stats, builder, docs, admin/community flows, partners, and the game.
+
+## Merged Fix Order
+
+This is ordered by easy or quick work that also makes later fixes safer. Severity still overrides the queue when needed, so a P1 can jump the line, but this is the default sequence for batching.
+
+Tracking model: work this list top to bottom. Leave untouched bullets plain, prefix the active one with `[doing]`, completed ones with `[done YYYY-MM-DD: verification]`, and skipped/deferred ones with `[defer: reason]`. Add one short entry to the batch log when a batch lands.
+
+### 1. Small shared guardrails
+
+These are quick, high-leverage patches because later fixes can reuse them instead of adding another local workaround.
+
+- [done 2026-06-24: `pnpm run test:unit`, `pnpm test`] Make `pnpm test` honest about TypeScript tests, or split script names so validation expectations are clear.
+- [done 2026-06-24: `pnpm run test:tsc`, `pnpm run test:lint`] Default non-submit buttons/select triggers to `type="button"`, fix the shared pagination label/id contract, and clean up tooltip child prop merging.
+- [done 2026-06-24: `pnpm run test:unit`, `pnpm run test:tsc`, `pnpm run test:lint`] Add tiny helpers for response filenames, package slug encoding, and row-local ids.
+- [done 2026-06-24: `pnpm test`, 60-route local smoke] Add tiny helpers for external URL normalization, internal route classification, and guarded storage.
+- [done 2026-06-24: `pnpm test`, 60-route local smoke] Share low-risk clipboard/copy-state timers and auth popup centering.
+- Fix custom `useMutation` stale callbacks, docs sidebar timers, remaining popup blocked-state handling, and remaining page-visibility/reduced-motion call sites.
+- [done 2026-06-24: `pnpm test`, 60-route local smoke] Normalize maintainer bare-domain URLs, add Scarf/social URL contract tests, and centralize the public-library selector.
+- Normalize partner analytics seed buckets, blog image URLs, and host cache purge response policy.
+
+### 2. One-off cleanup that lowers noise
+
+Do these early when they're obvious and isolated, but don't let them block higher-leverage guardrails.
+
+- Fix Twoslash invalid CSS, duplicate shop fonts, shop `NEW` badge duration, app-starter dead selection parameter, app-starter schema caveat, Netlify pending state, mobile merch loading, sponsor tooltip math, Stack category fallbacks, and unsupported admin timestamp formatting.
+- Remove or quarantine dead code once confirmed: old logo copies, unused account feedback component, showcase helper duplicates, unused shop promo components, deprecated `reactChartsProject`, and the old R3F scene/dependencies if we're ready to delete them.
+- Lazy-load obvious bundle leaks with low behavior risk: Start/Router landing prompt resolver and navbar merch product loading.
+
+### 3. Fast security and public-boundary hardening
+
+These are small enough to do before deeper refactors and they reduce risk while larger helpers are being designed.
+
+- [done 2026-06-24: `pnpm test:tsc`, `pnpm test:lint`, `pnpm test`] Analytics proxy header allowlist, GitHub webhook fail-closed secret, Cloudflare-first IP extraction, route response filename sanitizing, Discord raw-body size/signature-shape guard, MCP transport content-type/length guard and masked errors.
+- [done 2026-06-24: `pnpm test:tsc`, `pnpm test:lint`, `pnpm test`] Public pagination and route-search caps, admin pagination/range caps, docs feedback content caps, showcase field/array caps, Shopify page-size/quantity/discount caps, UploadThing client preflight caps, image transform clamps, community-resource frontmatter schema.
+- [done 2026-06-24: `pnpm test:tsc`, `pnpm test:lint`, `pnpm test`] URL/link hardening: Intent metadata URLs, Intent tarball source paths, markdown/source/search link classification, legacy redirect segment matching, local docs path containment.
+- [done 2026-06-24: `pnpm test:tsc`, `pnpm test:lint`, `pnpm test`] OAuth/login quick fixes: return-to key mismatch, login modal stale callbacks, provider route param picklists, session revocation conflict retry, and session base64 fallback removal once covered.
+
+### 4. Small controllers that prevent repeat bugs
+
+These are still bounded, but they should come before domain cleanup so every domain fix uses the same shape.
+
+- Route-scoped pagination controller with request fingerprints for shop, search, admin lists, stats, and any accumulated-page UI.
+- Query-key completeness helper or lint pattern for related showcases, current-user data, npm recent downloads, GitHub stats, and cache field preservation.
+- Optimistic mutation controller for showcase voting, feedback updates, keyed row actions, and cart/update flows.
+- Browser effect toolkit for storage, timers, outside-click, drag/resize, clipboard, popup polling, window-open, and page visibility.
+- Product option/color helper for shop cards, drawers, product pages, swatches, variant resolution, and preload budgets.
+
+### 5. Domain hardening with shared primitives in place
+
+At this point the repeatable helpers exist, so these PRs should be smaller and more reliable than fixing every route in isolation.
+
+- Stats: public npm fan-out caps, stats UI bounds, partial recent-cache semantics, baseline math, scheduled 429 backoff/deadlines, admin cache budgets, chart range caps, and d3/date-helper split.
+- Builder/application starter: selected-framework validation, URL/store feature parsing, custom template/add-on contract, ecommerce template preservation, response parsing, transient feedback, nested feature-card links, and API endpoint guard alignment.
+- Showcase/feedback: concurrent first-vote handling, query keys, submission/rank caps, moderation notification handling, detail/admin error states, audit target ids, leaderboard SQL aggregation, docs feedback cache/update helper.
+- Shop: Storefront caps, trusted HTML policy, image transform helper, load-more fingerprints, variant option resolution, quick-view modal semantics, nested product-card interactions, preload budgets, cart optimistic shape, and mutation-backed success state.
+- Admin: capability validators, all-table role/user queries, stale bulk selections, keyed row actions, invalidation scope, dashboard lazy tabs, route/server guard sync, and transaction boundaries where the write surface is small.
+- Docs/markdown: frontmatter resilience, raw HTML/iframe trust policy, tab state parsing/recovery, remote docs config caps, recursive-tree truncation handling, and manifest/cache budgets.
+- Game: progression/restored counts, compass/AI island sets, NaN guards, health flash, persistence ownership, async disposal checks, culling children, and geometry ownership.
+
+### 6. Larger boundary refactors
+
+These need design notes first, but the earlier guardrails should make the migration less risky.
+
+- One builder API request/response contract across compile, validate, download, deploy, remote loads, feature artifacts, suggestions, MCP, and client generation.
+- One outbound fetch policy with timeout, status, content-type, response-size, redirect, and header rules for OAuth, GitHub, docs, Tranco, stats, Intent, Shopify, remote builder loads, and scripts.
+- Intent ingestion redesign: remove public-read ingestion, add tarball budgets, failed-version backoff/dead-letter state, transactional skill replacement, admin process/list caps, complete GitHub discovery, and safe source paths.
+- Auth/OAuth storage model: atomic authorization-code consumption, dynamic client registration persistence, client-id to redirect-uri binding, OAuth user/account upsert transaction, plaintext token migration.
+- Docs manifest/cache system: recursive tree completeness, file-count/concurrency budgets, redirect metadata caching, stale fallback completeness, local path guards, and cache admin budgets.
+- MCP and CLI auth: durable CLI tickets, public-create limits, rate-limit uniqueness by identifier type, cleanup by window size, API-key lifecycle caps, and lower `lastUsedAt` write amplification.
+- Search/AI and LibraryLayout: split expensive imports, dock/modal state, Kapa/chat persistence, source-link routing, docs nav/tabs/mobile/sponsors/feedback, and route data boundaries.
+- Partner/sponsor/catalog and shop storefront boundaries: split serializable metadata from assets/JSX, centralize public catalog visibility, remove sponsor duplication, and unify shop product/cart contracts.
+- Environment/observability/runtime: consolidate env readers, Sentry PII/sample-rate policy, production diagnostics behavior, database context proxy, and script runtime budgets.
+
+### 7. Product-wide initiatives and upstream candidates
+
+Treat these as tracked initiatives, not normal cleanup PRs.
+
+- Product landing shell and library landing route factory.
+- UI primitive consolidation across root and shop.
+- Route/module boundary cleanup and shared validation schema system.
+- Admin table/filter framework and docs feedback DOM primitive.
+- Deploy-dialog controller and browser effect toolkit.
+- Bundle-boundary program with reachability checks, global-shell lazy panels, partner asset split, AI/search split, d3/Plot splits, navbar merch lazy import, and old R3F dependency removal.
+- Upstream candidates: TanStack Start API-boundary helper, outbound fetch helper, OAuth PKCE/code-consumption helper, Drizzle transaction/audit helper, route search hydration helper, endpoint request/response schema helper, package slug codec, docs manifest builder, npm download chunk cache, Shopify image helper.
+- First AI skills to actually build: API hardening, outbound fetch hygiene, route param boundaries, query-key completeness, type-safety sweep, bundle hotspot splitting, UI primitive form defaults, and route reachability/dead-stack cleanup.
+
+## Batch Log
+
+- 2026-06-24: Landed the grouped security pass across public request boundaries, OAuth/login/session flows, builder/GitHub deploy APIs, outbound fetches, stats/Intent/docs/shop/showcase caps, UploadThing/image preflight, markdown/search link classification, docs redirects/path containment, and community-resource frontmatter validation.
+- 2026-06-24: Second pass simplified the security patch by sharing bounded body readers, npm package-name/page/date/chart schemas, and URL normalization; removed the local application-starter request guard while preserving same-origin/content-type/body-size enforcement.
+- 2026-06-24: Added shared response filename/content-disposition helpers, package route slug encoding helpers, and row-local id helpers; wired them into builder/docs downloads, Intent registry links, and moderation note inputs.
+- 2026-06-24: Hardened shared UI primitives: defaulted shop buttons and shared select triggers to non-submit buttons, gave pagination a unique page-size label/id pair plus non-submit controls, and made Tooltip merge trigger handlers/refs without `any`.
+- 2026-06-24: Added `test:unit` and wired it into `pnpm test` so existing TypeScript assertion tests run in the default validation path.
+- 2026-06-24: Added guarded browser storage/effect helpers, migrated low-risk clipboard/timer/popup/storage/reduced-motion call sites, centralized public-library selection, normalized maintainer URLs, and added static data contract tests.
+- 2026-06-23: Audit created and ordered.
+
+## Highest Priority Findings
+
+### P0/P1 - Analytics proxy forwards private request headers
+
+`src/server.ts:85-112` proxies same-origin analytics paths to Google and passes `headers: request.headers` directly at `src/server.ts:101-104`.
+
+Same-origin browser requests can include cookies such as session cookies and may include authorization-like headers. Forwarding the whole inbound header bag to Google is unnecessary and risky.
+
+Suggested fix:
+
+- Build a fresh `Headers` allowlist for analytics upstream requests.
+- Never forward `cookie`, `authorization`, `host`, `cf-*`, `x-forwarded-*`, or internal headers.
+- Consider allowing only `accept`, `accept-language`, `user-agent`, and content headers needed by collect POSTs.
+
+### P1 - OAuth authorization codes are not consumed atomically
+
+`src/auth/oauthClient.server.ts:168-238` reads an authorization code, validates expiry/redirect/PKCE, deletes it at `src/auth/oauthClient.server.ts:205-208`, then inserts access and refresh tokens.
+
+Two concurrent exchanges can read and validate the same code before either delete wins. Both can mint tokens. The schema has a unique `codeHash`, but that only prevents duplicate codes, not concurrent reuse.
+
+Suggested fix:
+
+- Use a transaction and atomically delete/claim by `codeHash` plus validity conditions, returning the row.
+- Alternatively add a `consumedAt` field and update `where consumedAt is null returning`.
+- Only mint tokens after a single request has proven it owns the code.
+
+### P1 - OAuth client IDs are not bound to registered redirect URIs
+
+`src/routes/oauth/register.ts:28-80` accepts dynamic client metadata, validates submitted redirect URIs, then returns a deterministic client id from `client_name` at `src/routes/oauth/register.ts:113-127`. The registration is not stored. Later, `src/routes/oauth/authorize.tsx:38-93` and `src/utils/oauthClient.functions.ts:48-79` only validate that the requested redirect URI is localhost or HTTPS; they do not verify that the `client_id` owns that redirect URI.
+
+The authorize UI displays `Authorize {displayClientId}` at `src/routes/oauth/authorize.tsx:241-254` but does not show the redirect origin. A crafted authorization link can therefore use a familiar-looking client id with a different HTTPS redirect URI.
+
+Suggested fix:
+
+- Store dynamic client registrations with redirect URI allowlists, client display names, and created timestamps.
+- Require authorize/token flows to match `client_id + redirect_uri` against the stored registration.
+- Add client-name, redirect-uri count, redirect-uri length, state, scope, and PKCE length caps.
+- Show the redirect origin/app name in the consent screen.
+
+### P1 - Client IP extraction trusts spoofable headers before Cloudflare
+
+`src/utils/request.server.ts:21-34` checks `x-forwarded-for`, then `x-real-ip`, then `cf-connecting-ip`.
+
+On Cloudflare-hosted traffic, `cf-connecting-ip` should be the trusted source. Taking `x-forwarded-for` first can let clients spoof IP identity for rate limits, audit/logins, MCP limits, and any future IP-based guard.
+
+Suggested fix:
+
+- Prefer `cf-connecting-ip` on Cloudflare.
+- Only trust `x-forwarded-for` from known proxy paths.
+- Normalize and validate IP shape before using it as a rate-limit key.
+
+### P1 - Public npm stats requests can cause unbounded fan-out
+
+`src/utils/stats-queries.functions.ts:12-33` uses typed pass-through validators for public bulk npm stats input. `src/utils/stats.server.ts:470-646` turns those values into per-package, per-range chunk requests and runs missing chunks with `Promise.all` at `src/utils/stats.server.ts:549-646`.
+
+The stats UI route schemas do not cap package counts, string length, or date span tightly enough. Examples include `src/routes/stats/npm/-comparisons.ts:3-13`, `src/routes/stats/npm/-utils.ts:44-47`, `src/routes/stats/npm/index.tsx:57-86`, and `src/routes/stats/npm/$packages.tsx:15-23`. A public request can fan out to many npm API requests, Blob storage listings, and DB cache operations.
+
+`src/utils/npm-download-cache.server.ts:368-390` also lists all Blob objects under a prefix with page size `1000` but no page/object cap. That is called from latest-chunk lookups at `src/utils/npm-download-cache.server.ts:560-607` and `src/utils/npm-download-cache.server.ts:636-691`, so a large package set can turn into many unbounded storage-list operations.
+
+The DB fallback has the same scaling shape. `src/utils/stats-db.server.ts:1347-1382` and `src/utils/stats-db.server.ts:1422-1459` build one `or(...)` predicate per requested chunk, so uncapped input can create a huge SQL predicate before npm fetches even start. The newer Blob helper also runs storage/cache reads with unbounded `Promise.all` at `src/utils/npm-download-cache.server.ts:506-555`, `src/utils/npm-download-cache.server.ts:560-631`, and `src/utils/npm-download-cache.server.ts:636-715`.
+
+The authenticated MCP npm stats tool caps `packages` at 10 in `src/mcp/tools/npm-stats.ts:19-43`, but package/library/preset strings are still loose and flow into the same stats code at `src/mcp/tools/npm-stats.ts:163-176`.
+
+Suggested fix:
+
+- Add a shared runtime schema for npm stats queries.
+- Cap package group count, packages per group, package name length/pattern, and max date window.
+- Add concurrency limiting for npm fetches.
+- Cap cache batch sizes and split large chunk lookups into bounded pages.
+- Add page/object caps to npm download-cache Blob listings.
+- Add per-IP or per-session limits for public bulk stats calls.
+
+### P2 - NPM stats UI search state is unbounded too
+
+The backend fan-out issue is mirrored at the route/search layer. `src/routes/stats/npm/index.tsx:57-86` and `src/routes/_library/$libraryId/$version.docs.npm-stats.tsx:66-93` accept `packageGroups` arrays through URL search without max lengths, and `height` is just `v.number()` with no min/max. The slug redirect route parses unlimited package lists from `params.packages` at `src/routes/stats/npm/$packages.tsx:24-27` via `src/routes/stats/npm/-utils.ts:43-47`, then turns them into search `packageGroups` at `src/routes/stats/npm/$packages.tsx:91-101`. The shared `packageGroupSchema` at `src/routes/stats/npm/-comparisons.ts:3-13` also accepts arbitrary package names, color strings, and baseline labels.
+
+Result: a crafted stats URL can create a huge query string, oversized React Query key, large server-function payload, and a pathological chart container height before backend guards have a chance to help.
+
+Suggested fix: move npm stats route/search schemas into `src/components/npm-stats/shared.ts` or a dedicated `src/utils/npm-stats-schema.ts`, cap total packages/groups, validate npm package names, trim labels/colors, and clamp chart height to a sane range.
+
+### P2 - NPM stats baseline normalization can corrupt relative change
+
+`src/components/npm-stats/NPMStatsChart.tsx:219-233` captures `firstDownloads` before baseline normalization, then mutates each point's `d.downloads` in place when `normalizeByBaseline` is active. The returned `change` value subtracts the raw first download count from the normalized current value.
+
+That means the "Relative Change" transform can be wrong whenever baseline normalization is active: the y-value mixes two units. The in-place mutation also makes this block harder to reason about because the original binned point object is no longer raw after the first normalized pass.
+
+Suggested fix: compute `normalizedDownloads` as a local value, compute `firstNormalizedDownloads` with the same divisor policy, and return a fresh `{ ...d, downloads: normalizedDownloads, change: normalizedDownloads - firstNormalizedDownloads }` object without mutating the binned point.
+
+### P2 - Recent npm stats can return partial totals from partial cache hits
+
+`src/utils/npm-download-cache.server.ts:636-717` returns a map of the package names that have a covering cached chunk; it is intentionally partial when some packages miss both Blob and legacy cache. `src/utils/stats.server.ts:974-1023` treats `latestCachedChunks.size > 0` as a complete hit and returns aggregate daily/weekly/monthly totals using only the cached chunks.
+
+For a library with multiple packages, one cached package and one missing package can undercount all recent download totals while still looking fresh.
+
+Suggested fix: only take the fast path when `latestCachedChunks.size === packageNames.length`, or merge cached package results with bounded fetches for the missing package names before returning.
+
+### P1/P2 - Scheduled NPM stats refresh can hang forever on 429s
+
+The scheduled all-time package fetch loops until a chunk succeeds. `src/utils/stats.functions.ts:266-355` uses `while (!success)` and, for npm `429`, waits five seconds and retries the same chunk with no attempt cap, wall-clock deadline, or abort signal. `fetchSingleNpmPackageFresh` adds outer retries at `src/utils/stats.functions.ts:375-435`, but the inner 429 loop can prevent those retries from ever advancing.
+
+`computeNpmOrgStats` then runs package refreshes through an `AsyncQueuer` at `src/utils/stats.functions.ts:517-569`, so one stuck package chunk can hold the whole org refresh. The admin trigger reaches this path through `src/utils/stats-admin.server.ts:367-375`.
+
+Suggested fix: add a bounded retry policy for npm chunk fetches, use `AbortSignal.timeout`/a task deadline, record partial failures explicitly, and let the scheduled refresh finish with a degraded result instead of waiting indefinitely.
+
+### P1 - Builder API endpoints do not share request guards
+
+`src/routes/api/builder/compile.ts:6-32`, `compile-attributed.ts`, `validate.ts`, `suggest.ts`, `feature-artifacts.ts`, `download.ts`, `load-template.ts`, `load-remote-template.ts`, and `load-remote-addon.ts` read JSON/query input directly and do not share one request guard/schema. Some apply the builder rate-limit preset, but content-type, content-length, same-origin, filename, and response-error policy are still inconsistent.
+
+`RATE_LIMITS.builderCompile` exists in `src/utils/rateLimit.server.ts`, and `src/routes/api/application-starter/resolve.ts:80-166` already shows a stronger pattern with rate limits, body guards, content-type checks, same-origin checks, schema parsing, and cache headers.
+
+Specific risks:
+
+- `src/routes/api/builder/compile.ts:8-22` reads arbitrary JSON and only checks that `definition` exists.
+- `src/routes/api/builder/download.ts:21-88` accepts raw query values and uses raw `name` for `zip.folder(name)` and `Content-Disposition`.
+- Error responses expose internal exception messages in several builder endpoints.
+
+Suggested fix:
+
+- Create a shared builder request schema and parse every entrypoint through it.
+- Apply `RATE_LIMITS.builderCompile` or a more specific preset.
+- Add content-type, content-length, and same-origin guards.
+- Sanitize project names and response filenames.
+- Return stable public error codes and log internal details separately.
+
+### P1 - Remote builder loads have allowlist checks but no fetch budget
+
+`src/builder/api/remote.ts:101-104` fetches remote template JSON with no timeout, status check, content-type check, or response-size limit. `src/builder/api/remote.ts:125-127` delegates remote add-ons to `loadRemoteAddOn`.
+
+`src/utils/url-validation.server.ts` is a good SSRF/host allowlist, but allowed CDN URLs can still hang workers or return huge responses. The validation also happens before `fetch`; `src/builder/api/remote.ts:101-103` uses the default redirect-following behavior and does not revalidate the final response URL, so an allowed host redirect can bypass the initial host check.
+
+Suggested fix:
+
+- Add a central `fetchJsonWithLimit` helper with `AbortSignal.timeout`, byte cap, content-type guard, status guard, and JSON parse errors.
+- Use `redirect: 'manual'` or revalidate every redirect/final URL against the same allowlist.
+- Use it for remote templates and any remote add-on path that allows user-provided URLs.
+
+### P1 - GitHub docs webhook fails open when the secret is unset
+
+`src/routes/api/github/webhook.ts:67-85` only verifies the GitHub signature when `env.GITHUB_WEBHOOK_SECRET` is present. If the secret is missing, any public POST can send a watched repo/ref payload, mark docs/content cache rows stale at `src/routes/api/github/webhook.ts:136-139`, and trigger cache purge at `src/routes/api/github/webhook.ts:151`.
+
+Suggested fix:
+
+- Fail closed in production if `GITHUB_WEBHOOK_SECRET` is missing.
+- Return a clear deploy/config error instead of accepting unsigned webhooks.
+- Add a content-length cap before `request.text()`.
+- Consider validating event id/delivery headers for replay diagnostics.
+
+### P1 - Intent package detail performs npm ingestion on the public request path
+
+`src/utils/intent.functions.ts:422-435` accepts any string package name and, when the package is missing locally, calls `inlineSeedPackage`. That path fetches npm metadata, downloads the latest tarball, extracts skills, writes package/version rows, and stores skill content at `src/utils/intent.functions.ts:304-396`.
+
+This turns an unauthenticated read endpoint into a package-ingestion worker. It also uses an unbounded in-memory `rejectedPackages` map keyed by arbitrary request strings at `src/utils/intent.functions.ts:247-260`.
+
+Suggested fix:
+
+- Validate package names with a shared npm package-name schema and length cap.
+- Do not process unknown packages inline from public detail requests.
+- Queue unknown packages for bounded background processing, or require admin/manual seeding.
+- Add per-IP/session rate limits for public Intent registry misses.
+- Cap or replace the local rejection cache with bounded cache infrastructure.
+
+### P1 - Intent tarball extraction has no time or size budget
+
+`src/utils/intent.server.ts:293-358` fetches a package tarball with no timeout, compressed-size cap, decompressed-size cap, entry-count cap, or per-file cap. Matching `SKILL.md` files are buffered fully at `src/utils/intent.server.ts:336-340`.
+
+Any npm package that reaches Intent discovery, admin seeding, scheduled queue processing, or the public inline-seed path can force large stream work. The scheduled GitHub discovery path also extracts a tarball inline before enqueueing at `src/server/scheduled.server.ts:230-331`, so the expensive tarball path is not isolated to the bounded queue processor.
+
+Suggested fix:
+
+- Fetch tarballs with an abort timeout and content-length cap.
+- Enforce max decompressed bytes, max tar entries, max skill files, and max bytes per `SKILL.md`.
+- Abort the pipeline as soon as any cap is exceeded.
+- Store the caps in one reusable ingestion policy object.
+
+### P1/P2 - Public Intent registry queries lack request caps
+
+`src/utils/intent.functions.ts:104-240` accepts uncapped `search`, `framework`, `page`, and `pageSize`, then may call npm search and fetch versions/skills for every verified package. The default npm discovery helper also pages until npm's reported total ends at `src/utils/intent.server.ts:89-111`, with no page cap or deadline. `src/utils/intent.functions.ts:595-600` accepts uncapped skill-search limits. `src/utils/intent.functions.ts:697-735` accepts an uncapped `packageNames` array and fans out through `Promise.all`. The package-history paths have the same shape: `src/utils/intent.functions.ts:799-828` accepts an uncapped changelog `limit`, and `src/utils/intent.functions.ts:966-1007` walks every version for one skill with no limit. The package route also accepts unbounded `expanded` and `expandedSkills` URL arrays at `src/routes/intent/registry/$packageName.tsx:53-58`, then feeds them into sets and URL writes at `src/routes/intent/registry/$packageName.index.tsx:80-101` and `src/routes/intent/registry/$packageName.index.tsx:163-177`.
+
+Suggested fix:
+
+- Add shared public Intent query schemas with max query length, page size, page number, package count, package-name length, and history limit.
+- Prefer precomputed directory rows for list pages instead of per-package version/skill lookups in the request path.
+- Apply bounded concurrency where fan-out remains necessary.
+
+### P3 - Intent dependency graph uses a fixed SVG marker id
+
+`src/components/intent/SkillDependencyGraph.tsx:168-176` defines `<marker id="arrowhead">`, and every dependency line references `markerEnd="url(#arrowhead)"` at `src/components/intent/SkillDependencyGraph.tsx:208-218`. If two dependency graphs ever render on the same page, the marker id collides across SVGs and references can resolve to the first definition.
+
+Suggested fix: generate the marker id with `React.useId()` and reference `url(#${markerId})`, or accept a stable id prefix from the parent if the graph needs deterministic screenshots.
+
+### P2/P3 - Intent package metadata URLs are rendered without URL normalization
+
+Intent package detail pages render package metadata from npm. `src/utils/intent.functions.ts:273-284` builds `repositoryUrl` from `latestMeta.repository` by stripping `git+` and `.git`, but does not parse the URL or restrict protocols. Directory rows also pass through npm-provided homepage/repository/npm links at `src/utils/intent.functions.ts:198-204`.
+
+The package layout renders `detail.repositoryUrl` directly as an external anchor at `src/routes/intent/registry/$packageName.tsx:257-264`. A package's npm metadata can contain non-web protocols or malformed values, and the UI still titles the link "GitHub".
+
+Suggested fix: normalize npm metadata URLs through a shared `normalizeExternalPackageUrl` helper that accepts only `https:` and `http:` for public anchors, converts common `git+https`/`git@github.com:` repository forms to web URLs, drops anything else, and stores a `repositoryHost`/label separately from the href.
+
+### P2/P3 - Intent skill source links trust tarball path segments
+
+`src/utils/intent.server.ts:319-334` accepts any tar entry matching `package/skills/**/SKILL.md` and derives `skillPath` by string replacement. It does not reject `..`, encoded separators, duplicate slashes, or odd path segments. The skill detail page then interpolates that value into an unpkg Source link at `src/routes/intent/registry/$packageName.$skillName.tsx:143-147`.
+
+The link is external, not a local file read, so this is lower risk than extraction traversal. It still lets package-controlled tar headers produce malformed or misleading source URLs on a trusted registry page.
+
+Suggested fix: parse tar entry names into normalized path segments before storing `skillPath`, reject traversal/empty segments, and build the unpkg URL with `new URL()` plus per-segment encoding.
+
+### P3 - NPM-style package slugs are not round-trip safe
+
+`decodePkgName` encodes scoped package names by replacing `/` with `__` at `src/routes/intent/registry/$packageName.tsx:29-33`. Directory links use the inverse shape with `pkg.name.replace('/', '__')` at `src/routes/intent/registry/index.tsx:556-563`, `src/routes/intent/registry/index.tsx:573-575`, and `src/routes/intent/registry/index.tsx:653-663`.
+
+The same codec exists for NPM stats at `src/routes/stats/npm/-utils.ts:34-40`, with parsed params used by `src/routes/stats/npm/$packages.tsx:24-26`.
+
+That delimiter is undocumented and ambiguous for any package name that already contains `__`; the route would decode the first delimiter into `/` and look up a different package. Suggested fix: use `encodeURIComponent`/`decodeURIComponent` for route params, or centralize an explicit package-name slug codec with tests for scoped, unscoped, underscore, and malformed names across Intent and stats routes.
+
+### P3 - Maintainer social links rely on raw static URL strings
+
+Maintainer social profile data is typed as loose strings at `src/libraries/maintainers.ts:15-20`, then rendered directly as anchor hrefs by `src/components/MaintainerCard.tsx:183-200`. One current entry already misses a protocol: `src/libraries/maintainers.ts:316-319` sets `website: 'harry-whorlow.dev'`, which renders as a relative site URL instead of an external profile link.
+
+Suggested fix: validate static maintainer data at module load/build time or normalize it through the same external URL helper used for package metadata. The helper should either add `https://` for known bare domains or reject malformed profile URLs loudly.
+
+## Correctness And Stability Findings
+
+### P2 - Game persistence runs from module scope
+
+`src/components/game/hooks/useGameStore.ts:48-53` casts parsed `localStorage` JSON to `PersistedState` without runtime validation. `src/components/game/hooks/useGameStore.ts:1000-1016` starts an interval and `beforeunload` listener at module scope when `window` exists.
+
+This is easy to duplicate under HMR and hard to clean up. Move persistence into a mounted component/hook with teardown and schema validation.
+
+### P2 - Game engine async initialization can attach work after disposal
+
+`src/components/game/scene/VanillaGameScene.tsx:64-80` creates a `GameEngine`, calls async `engine.init()`, and disposes the engine on unmount. `GameEngine.start()` guards `isDisposed` at `src/components/game/engine/GameEngine.ts:700-710`, but `GameEngine.init()` itself continues after asset preload at `src/components/game/engine/GameEngine.ts:172-217` and can add scene objects, store subscriptions, and `BoatControlSystem` listeners after disposal.
+
+The engine has the same issue after setup. `src/components/game/engine/GameEngine.ts:391-421` and `src/components/game/engine/GameEngine.ts:576-606` fetch showcase data and then mutate store/entity/ocean state from `.then(...)` callbacks without checking `this.isDisposed`. `src/components/game/engine/entities/Islands.ts:1034-1050` loads partner logo textures and adds meshes in the `TextureLoader.load` callback without knowing whether the island/info group has already been disposed. `src/components/game/engine/GameEngine.ts:674-687` also schedules an untracked `setTimeout` inside a store subscription. If the engine is disposed before any of those callbacks fire, stale work can still spawn AI or update disposed scene objects.
+
+Smaller UI timer examples:
+
+- `src/components/game/ui/BadgeOverlay.tsx:112-115` schedules dismiss work without cleanup.
+- `src/components/game/ui/TouchControls.tsx:4-10` uses module-scope click debounce state and an untracked timeout.
+
+Suggested fix:
+
+- Add an abort/cancel guard to `GameEngine.init()` after every awaited preload step.
+- Track and clear engine-owned timeouts in `dispose()`.
+- Avoid adding systems/subscriptions/listeners after `isDisposed` is true.
+- Consider making `init()` return a cleanup-capable task or accepting an `AbortSignal`.
+
+### P3 - Game discovery confetti never uses island colors
+
+`src/components/game/engine/entities/Islands.ts:933-949` creates the flag material with the island color but never stores that color on `flag.userData`. `spawnConfetti` reads `instance.flagGroup.userData.color || '#FFD700'` at `src/components/game/engine/entities/Islands.ts:1389-1396`, so every island falls back to gold-accent confetti instead of deriving its palette from the discovered library/partner/showcase.
+
+Suggested fix: set `flag.userData.color = color` when the flag is created, or pass the island color through the `IslandInstance` data instead of userData.
+
+### P2/P3 - Game island culling misses world-space children
+
+`src/components/game/engine/entities/Islands.ts:1262-1268` distance-culls only `instance.group`. Several visible children are intentionally added directly to the top-level `Islands.group` instead of `instance.group`: lobe wave rings at `src/components/game/engine/entities/Islands.ts:253-273`, flags at `src/components/game/engine/entities/Islands.ts:422-431`, info cards at `src/components/game/engine/entities/Islands.ts:433-437`, and main wave rings at `src/components/game/engine/entities/Islands.ts:439-462`.
+
+The update loop skips wave-ring animation when `instance.group.visible` is false at `src/components/game/engine/entities/Islands.ts:1369-1375`, but it never hides those meshes. Distant islands can therefore still render their world-space rings/flags/cards while the land mass is culled. Suggested fix: add a per-instance world-space group for rings/flag/info and cull it together, or explicitly update visibility for every detached child.
+
+### P3 - Island flag position ignores the rotation it computes
+
+`calculateFlagWorldPosition` computes rotated local offsets at `src/components/game/engine/entities/Islands.ts:963-972`, but returns unrotated `signOffsetX` and `signOffsetZ` at `src/components/game/engine/entities/Islands.ts:974-978`. Rotated islands therefore place flags at the same world offset instead of the rotated local flag anchor. Suggested fix: return `data.position[0] + localX * data.scale` and `data.position[2] + localZ * data.scale`, with any intentional fixed nudge named separately.
+
+### P2 - Progression machine checks completion before counting the current discovery
+
+The progression machine guards compare current context counts against totals at `src/components/game/machines/progressionMachine.ts:117-128`, but the transition actions increment only after the guard is evaluated. The discovery transitions repeat that shape for libraries, partners, showcases, and corners at `src/components/game/machines/progressionMachine.ts:259-265`, `src/components/game/machines/progressionMachine.ts:288-294`, `src/components/game/machines/progressionMachine.ts:304-310`, and `src/components/game/machines/progressionMachine.ts:320-326`.
+
+The sync path sends exactly one event for the newly discovered island at `src/components/game/machines/useProgressionSync.ts:34-67` after `discoverIsland` adds the id to the store at `src/components/game/hooks/useGameStore.ts:399-415`. If the machine has `total - 1` discoveries and the player discovers the last island, the guard sees the old count, takes the non-transition branch, increments to `total`, and then waits for another discovery event that may never happen. Zustand still unlocks stages directly at `src/components/game/hooks/useGameStore.ts:421-489`, so UI/gameplay and badge machine state can diverge.
+
+Suggested fix: make the completion guard include the incoming discovery (`context.count + 1 >= total`), or increment first and use `always` transitions to check completion from updated context. Add regression tests for `1/1` and `N/N` completions per phase.
+
+### P2 - Restored game progress misclassifies core library islands
+
+`GameMachineProvider` restores machine counts from `discoveredIslands` by checking id prefixes at `src/components/game/machines/GameMachineProvider.tsx:96-127`: `library-`, `partner-`, `showcase-`, and `corner-`. Core library islands are generated with the raw library id at `src/components/game/utils/islandGenerator.ts:162-168`, not a `library-*` prefix, so restored `librariesDiscovered` can stay at `0` after reload even when the player has discovered Query/Table/Router/etc.
+
+That can leave badge/progression machine state behind the zustand gameplay state. Suggested fix: classify discoveries from the actual island collections, or share the same island-type lookup used by live discovery sync instead of inferring type from string prefixes.
+
+### P2 - Ocean rock regeneration reuses disposed shared geometry
+
+`OceanRocks` creates one shared `dodecahedronGeo` at `src/components/game/engine/entities/OceanRocks.ts:35-38`. `generate()` clears the previous rock set by calling `dispose()` at `src/components/game/engine/entities/OceanRocks.ts:50-53`, and `dispose()` disposes each `rock.rockMesh.geometry` at `src/components/game/engine/entities/OceanRocks.ts:210-217`. Those meshes all point at the shared `dodecahedronGeo`, but `generate()` then immediately creates new rock meshes with the same disposed geometry at `src/components/game/engine/entities/OceanRocks.ts:105-120`.
+
+Today `GameEngine.initializeGameData()` calls `generate()` once at `src/components/game/engine/GameEngine.ts:336-357`, but the method is written as a reusable regeneration API and will break under HMR, reset/regenerate features, or any future world refresh.
+
+Suggested fix: treat `dodecahedronGeo` like an owner-level resource and dispose it only from a final `dispose()` path, or recreate it after clearing generated groups. Per-rock cleanup should dispose only per-rock materials and cached ring geometries that are not reused.
+
+### P2 - Game model cleanup disposes cached/shared geometry
+
+`modelLoader.clone()` clones the cached scene at `src/components/game/engine/loaders/ModelLoader.ts:43-50` and clones only the material at `src/components/game/engine/loaders/ModelLoader.ts:56-58`. Geometry stays shared with the cached GLTF. `Boat.dispose()` then traverses the current boat model and disposes `child.geometry` at `src/components/game/engine/entities/Boat.ts:291-298`, and `AIShips.disposeShip()` does the same at `src/components/game/engine/entities/AIShips.ts:146-154`.
+
+That means disposing one boat/AI clone can dispose geometry still owned by the loader cache or by other clones. `AIShips` has the same problem for its own cannon geometries: `createShip()` uses shared `this.cannonGeometries.base/barrel` at `src/components/game/engine/entities/AIShips.ts:49-64`, but `disposeShip()` disposes each child geometry when one AI ship is removed. The next ship can render with a disposed shared cannon geometry.
+
+There is also an opposite leak in the same area: `Boat.setBoatType()` removes the old model from the group at `src/components/game/engine/entities/Boat.ts:75-83` but does not dispose its cloned materials before replacing it.
+
+Suggested fix: make ownership explicit. If model geometry is shared through `ModelLoader`, instance cleanup should dispose only cloned materials/textures, not geometry. Shared cannon geometry should only be disposed in `AIShips.dispose()`. If per-instance geometry is required, deep-clone geometry at creation and keep the disposal contract local.
+
+### P2 - Health damage flash can retrigger forever after one hit
+
+`GameHUD` tracks `prevHealth` separately from `boatHealth` at `src/components/game/ui/GameHUD.tsx:44-45`. The damage-flash effect detects a drop at `src/components/game/ui/GameHUD.tsx:106-114`, sets `damageFlash`, and returns without updating `prevHealth`. After the 150ms timer clears `damageFlash`, `boatHealth` is still lower than the stale `prevHealth`, so the effect can schedule another flash for the same old hit. The bar can keep flashing until health is restored or another path updates `prevHealth`.
+
+Suggested fix: update `prevHealth` whenever a new `boatHealth` value is observed, including the damage branch. A simple pattern is to compare against the previous value in a functional state update, trigger the flash as a side effect of the comparison, and always store the current health for the next render.
+
+### P2/P3 - Game generated vectors can become NaN or infinite
+
+`createAICannonball` computes a lead target at `src/components/game/engine/systems/AISystem.ts:314-316` and divides by `leadDist` at `src/components/game/engine/systems/AISystem.ts:318-319` without a zero guard. If the target point equals the cannon fire point after spread/lead math, the cannonball velocity becomes `NaN`, and that value is written into the shared cannonball array.
+
+Island placement has the same shape. `generateIslands` pushes islands apart by dividing by `dist` at `src/components/game/utils/islandGenerator.ts:107-113`, and the expanded/showcase generators repeat it at `src/components/game/utils/islandGenerator.ts:315-324` and `src/components/game/utils/islandGenerator.ts:417-425`. Duplicate generated positions are unlikely, but if they happen the world coordinates can become `Infinity`/`NaN` and then flow into collisions, minimap, ocean gradients, and Three transforms.
+
+Suggested fix: centralize a `safeNormalize2D(dx, dz, fallbackAngle)` helper for AI fire, collision push, and generator push-apart math. When distance is zero or non-finite, use a deterministic fallback vector from the seed/id instead of dividing.
+
+### P3 - Compass shop item ignores showcase and corner islands
+
+The active boat control system correctly includes `showcaseIslands` and `cornerIslands` in late-game collision/nearby detection at `src/components/game/engine/systems/BoatControlSystem.ts:152-156`. The compass purchase path does not: `purchaseItem('compass')` builds `allIslands` from only `islands` and `expandedIslands` at `src/components/game/hooks/useGameStore.ts:787-797`.
+
+After showcase or corner islands unlock, a bought compass can only target core library or partner islands, so it stops helping with the current progression layer. Suggested fix: extract one `getReachableIslands(state)` helper and use it in controls, compass targeting, restart spawn selection, minimap, and counters.
+
+The AI system has the same split in a different behavior. `src/components/game/engine/systems/AISystem.ts:409-424` builds obstacle-avoidance islands from only `islands` and `expandedIslands`, then uses that list at `src/components/game/engine/systems/AISystem.ts:554-565`. Outer-rim and boss ships can therefore ignore showcase/corner island collision pressure even though the player collides with those islands. Include AI avoidance in the shared reachable-islands helper, or expose separate `getCollidableIslands(state)` / `getCompassTargetableIslands(state)` helpers if the sets intentionally differ.
+
+### P2 - Custom `useMutation` has stale callbacks and casts through redirects
+
+`src/hooks/useMutation.ts:29-53` only depends on `opts.fn`, while using `opts.onSuccess`, `opts.onError`, and `opts.onSettled`. Changed callbacks can go stale. The catch path does not await `onSettled` even though the type allows a promise. `src/hooks/useMutation.ts:59` and `src/hooks/useMutation.ts:86-88` use casts.
+
+Consider replacing this with `@tanstack/react-query` mutation helpers or tighten this hook with refs/deps and typed redirect handling.
+
+### P2 - Tooltip clone drops/overrides child behavior
+
+`src/components/Tooltip.tsx:43-47` clones the child with a new `ref` and `getReferenceProps()` but does not merge the child ref or pass existing child props into `getReferenceProps`.
+
+Use the Floating UI pattern: `getReferenceProps(children.props)` and a merged ref utility.
+
+### P2/P3 - Button and select primitives rely on native submit defaults
+
+`src/ui/Button.tsx:129-144` creates the requested element and forwards props, but when `as` is omitted it renders a native `<button>` without defaulting `type="button"`. Any future non-submit `Button` placed inside a form will submit unless every callsite remembers to opt out.
+
+`src/components/Select.tsx:45-68` has the same issue on its dropdown trigger. The stronger local patterns are `src/components/Collapsible.tsx:75-104` and `src/components/application-builder/parts.tsx:21-64`, which explicitly default interactive non-submit buttons to `type="button"`.
+
+`src/components/AuthenticatedUserMenu.tsx:30-40` passes a plain `<div>` as a Radix dropdown trigger. Even if Radix adds ARIA props, this should be a real `<button type="button">` so focus, keyboard activation, disabled state, and semantics do not depend on a non-interactive element being enhanced correctly.
+
+The shared filter primitives repeat the same risk: `src/components/FilterComponents.tsx:78`, `src/components/FilterComponents.tsx:109`, `src/components/FilterComponents.tsx:136`, `src/components/FilterComponents.tsx:180`, `src/components/FilterComponents.tsx:225`, `src/components/FilterComponents.tsx:300`, `src/components/FilterComponents.tsx:320`, `src/components/FilterComponents.tsx:392`, `src/components/FilterComponents.tsx:483`, `src/components/FilterComponents.tsx:633`, and `src/components/FilterComponents.tsx:670` render plain buttons. Current call sites are mostly admin/list toolbars, but these are reusable components and should be form-safe by default.
+
+`src/components/PaginationControls.tsx:108-166` also renders shared navigation/page buttons without explicit button types.
+
+Docs chrome and install cards repeat the raw-button version: `src/components/Breadcrumbs.tsx:52-60`, `src/components/Doc.tsx:161-171`, and `src/components/FrameworkCard.tsx:94-108` all render non-submit action buttons without `type="button"`.
+
+`src/components/builder/FeaturePicker.tsx:401-420` and `src/components/builder/FeaturePicker.tsx:593-604` also render card buttons without an explicit `type`. They are not currently inside forms, but this is the same reusable-card pattern and should not depend on callsite context.
+
+The link/button composition also drifts. `src/components/admin/AdminAccessDenied.tsx:14-16` and `src/components/admin/AdminEmptyState.tsx:34-38` wrap the shared `Button` in a TanStack Router `Link`, so the DOM becomes an anchor containing a native button. The safer local direction is one typed button-as-link/slot pattern instead of mixing outer links and inner buttons.
+
+The shop primitives repeat the same contract drift in a product-specific skin. `src/components/shop/ui/Button.tsx:23-42` forwards native button props but does not default `type="button"`. `src/components/shop/ui/Select.tsx:32-94` advertises the same `onChange` shape as a native select, but it extracts literal `<option>` children into a custom button/listbox, cannot carry native `name`, `id`, `required`, form submission, or label semantics, and forces route callsites back into casts such as `src/routes/shop.index.tsx:175-188` and `src/routes/shop.collections.$handle.tsx:123-145`.
+
+The npm stats controls repeat the pattern across chart dropdown triggers, package pill controls, and baseline controls: `src/components/npm-stats/ChartControls.tsx:77-291`, `src/components/npm-stats/PackagePills.tsx:64-209`, and `src/components/npm-stats/BaselineSection.tsx:56-241`.
+
+The Button implementation also weakens type safety with `Record<string, unknown>` and an `unknown` cast at `src/ui/Button.tsx:102-117`, then casts the `forwardRef` result back to `ButtonComponent` at `src/ui/Button.tsx:104-145`.
+
+Suggested fix: default native buttons to `type="button"` unless callers pass `type`, keep `type="submit"` explicit at submit callsites, and replace the polymorphic helper with a typed `asChild`/slot pattern or a narrower overload set.
+
+### P3 - Stats baseline search is a custom modal without dialog semantics
+
+`src/components/npm-stats/BaselineSection.tsx:233-258` renders a fixed full-screen overlay for "Add baseline package" with no dialog role, focus trap, Escape handling, outside-click dismissal, or focus restoration. It visually behaves like a modal, but assistive tech and keyboard users do not get the same contract as the Radix dialogs used elsewhere.
+
+Suggested fix: use the existing Radix dialog pattern for modal overlays, or extract a small `CommandDialog`/`SearchDialog` primitive used by stats package search and future command-style pickers.
+
+### P2 - Builder validation ignores selected framework
+
+`src/builder/api/validate.ts:30-35` calls `getFramework()` without using `definition.framework`, while compile uses the selected framework. Solid definitions can be validated against the React add-on set.
+
+Suggested fix: `getFramework(definition.framework ?? 'react')`, backed by the same schema used by compile/download.
+
+### P2 - Builder URL/store path casts route strings into trusted feature ids
+
+`src/components/builder/useBuilderUrl.ts:27-104` parses `search.name`, `search.pm`, `search.features`, and dotted feature options directly from URL search params. It narrows package managers with a local array check at `src/components/builder/useBuilderUrl.ts:59-61`, but casts URL feature strings to `Array<FeatureId>` at `src/components/builder/useBuilderUrl.ts:73-90` and casts dotted keys at `src/components/builder/useBuilderUrl.ts:94-98`.
+
+`FeatureId` is currently just `string` at `src/builder/api/index.ts:50`, so the casts do not protect anything. `src/components/builder/FeaturePicker.tsx:593-597` also casts example ids through `any`. The store rejects unknown examples in `src/components/builder/store.ts:234-235`, but `setFeatures` at `src/components/builder/store.ts:211` can still store arbitrary URL-derived strings until downstream compile/validation catches them.
+
+The URL/store sync is also one-shot. `src/components/builder/BuilderProvider.tsx:31-48` reads `search.framework` through a cast and applies it only during initial feature loading. `src/components/builder/useBuilderUrl.ts:45-106` hydrates the rest of search state only once after `featuresLoaded`. Browser back/forward or in-app navigation between two `/builder?...` configurations can leave the URL and Zustand store disagreeing until some later store change rewrites the URL.
+
+Suggested fix:
+
+- Move builder URL parsing into the same shared builder definition schema used by compile, validate, download, deploy, and MCP.
+- Normalize `FeatureId` through known `availableFeatures`/`availableExamples` after feature data loads, not through casts.
+- Type route search params at the route definition rather than casting `useSearch({ strict: false })`.
+- Replace `FeatureId = string` with a branded/validated runtime boundary or keep it plain but never treat it as validated.
+- Treat URL as an external source every time it changes, with an explicit loop-prevention strategy instead of one-time initialization refs.
+
+### P2 - Application starter stores hidden control state in user prompt text
+
+`src/utils/partners.tsx:266-333` defines plain text markers such as `Starter guidance:`, `Selected partner ids:`, `Inferred partner ids:`, and `Force router-only: true`, then parses them back out of the same string later. `composeApplicationStarterInput` appends those markers at `src/utils/partners.tsx:1661-1761`.
+
+That composed string drives real behavior: `resolveApplicationStarterDeterministically` reads selected/inferred partner ids from it at `src/utils/application-starter.ts:525-536`, `detectRouterOnly` honors `Force router-only: true` at `src/utils/application-starter.ts:974-978`, and `buildPrompt` injects parsed guidance lines into the final generated prompt at `src/utils/application-starter.ts:1119-1183`.
+
+A user brief that contains the same marker shape can therefore truncate the visible brief, force router-only mode, or inject starter guidance without going through the UI controls. It is not a remote code execution bug, but it makes the builder contract fragile and hard to reason about.
+
+Suggested fix: carry starter metadata as structured fields (`input`, `selectedPartnerIds`, `inferredPartnerIds`, `forceRouterOnly`, `guidanceLines`) through the builder/result schema. Only render a prompt string at the final display/download boundary, and escape or quote the original user brief instead of reparsing it.
+
+### P2 - Builder custom integrations/templates are exposed but ignored by generation
+
+The UI accepts custom add-ons/templates through `src/components/builder/CustomAddonDialog.tsx:25-72` and `src/components/builder/CustomTemplateDialog.tsx:24-64`, and the store keeps them at `src/components/builder/store.ts:46-49` and `src/components/builder/store.ts:250-284`. The docs page also advertises custom template/integration import and export at `src/routes/builder.docs.tsx:102-111`.
+
+The generation path then drops them. `src/components/builder/store.ts:404-410` omits `packageManager`, `tailwind`, `customIntegrations`, and `customTemplate` from `getDefinition()`. `src/builder/api/compile.ts:210-217` explicitly passes empty custom add-on/template inputs, and `src/builder/api/compile.ts:604-605` does the same for attribution compile. `src/components/builder/client-generation.ts:41-59` also sends no custom integration/template data.
+
+Result: a user can add and select a custom integration/template, see it in the UI, and then download/deploy/generated output that does not include it.
+
+Suggested fix: either hide/disable the custom UI until supported or make custom integrations/templates first-class fields in the shared builder definition schema and pass them through validate, compile, download, deploy, attribution, feature-artifacts, and MCP.
+
+### P2 - Outbound fetch behavior is inconsistent
+
+Many server-side external calls lack a consistent timeout/status/body policy. Examples include OAuth provider calls, GitHub repo deploy calls, Tranco, stats, intent, docs, and remote builder fetches.
+
+The same pattern exists in browser code. `src/hooks/useQueryGGPPPDiscount.ts:13-25` fetches `https://ppp.uidotdev.workers.dev/`, does not check status/content-type, trusts arbitrary JSON as `{ code, country, discount, flag }`, has no abort/unmount guard, and `src/components/QueryGGBanner.tsx:20-29` renders the returned country/flag/discount directly into the marketing banner. `src/components/npm-stats/PackageSearch.tsx:55-67` also fetches npm registry search results directly, casts the JSON body shape, and treats arbitrary typed input as a package name through the create item at `src/components/npm-stats/PackageSearch.tsx:74-86`.
+
+Suggested fix: introduce one outbound fetch helper with:
+
+- timeout
+- retry policy where appropriate
+- response-size cap for user-triggered remote loads
+- status and content-type handling
+- sanitized logging context
+- runtime parsing for client-rendered third-party JSON
+
+### P2 - Session base64 fallback is fragile
+
+`src/auth/session.server.ts` has a hand-written byte/base64 fallback. In modern worker/browser runtimes this probably does not execute, but the fallback is concretely wrong for unpadded base64url strings: `src/auth/session.server.ts:67-80` strips `=` padding, maps missing encoded characters to `0`, and then checks `enc3 !== 64`/`enc4 !== 64`, so runtimes without `atob` can decode extra null bytes.
+
+Suggested fix: replace with a small, tested base64url byte helper and add round-trip tests.
+
+### P2 - Auth helper records activity as a hidden side effect
+
+`src/utils/auth.server-helpers.ts:25-39` makes `getAuthenticatedUser()` record daily activity in a fire-and-forget write. That helper is used by admin/user/showcase/doc-feedback/activity paths, including `src/utils/users.server.ts:29`, `src/utils/showcase.functions.ts:61`, and `src/utils/docFeedback.functions.ts:58`.
+
+Auth reads now carry analytics write behavior, and repeated capability/admin checks can create repeated DB insert attempts. Errors are swallowed, so activity tracking can silently fail while auth succeeds. The upsert is idempotent per day, but the coupling makes request behavior harder to reason about and test.
+
+Suggested fix: move activity recording to one explicit request/session activity hook or middleware, keep auth helpers side-effect-free, and expose an intentional `recordAuthenticatedActivity()` call for routes that want it.
+
+### P2/P3 - Legacy plaintext OAuth tokens are still silently accepted
+
+`src/utils/crypto.server.ts:116-119` returns a stored token as plaintext when it does not look encrypted. `src/auth/repositories.server.ts:161-180` uses that helper when reading OAuth account tokens.
+
+This is pragmatic for migration, but it also means plaintext token rows can persist indefinitely with no telemetry, re-encryption, or cutoff. If the goal is encrypted tokens at rest, reads should either migrate plaintext rows forward or surface a measured migration debt.
+
+Suggested fix: add a one-time/backfill migration, count plaintext reads, re-encrypt on successful read where possible, and eventually fail closed for non-encrypted stored OAuth tokens.
+
+### P3 - Session revocation increments are read-modify-write
+
+`src/auth/repositories.server.ts:103-115` reads the user, then writes `sessionVersion: user.sessionVersion + 1`. `src/routes/auth/signout.tsx:13-30` uses that path during signout, and `src/utils/users.server.ts:562-606` repeats the same read/compute/write flow for admin/self session revocation.
+
+Concurrent revokes can lose increments, and audit logs can report a stale `newVersion`. Use an atomic SQL increment/update returning the new version, then share that helper between signout and `revokeUserSessions`.
+
+### P2 - Local docs path containment check has a prefix edge
+
+`src/utils/documents.server.ts:261-270` checks `localFilePath.startsWith(baseDir)`. If a base path lacks a trailing separator, a sibling path with the same prefix can pass in general. Earlier filepath validation reduces practical risk, but this should still use `path.relative`.
+
+Suggested fix: `const rel = path.relative(baseDir, localFilePath)` and reject `rel.startsWith('..') || path.isAbsolute(rel)`.
+
+### P2 - Frontmatter replacement builds regexes from content
+
+`src/utils/documents.server.ts:290-296` does `new RegExp(key, 'g')` from frontmatter replacement keys. Invalid or pathological patterns can throw or behave unexpectedly.
+
+Suggested fix: treat replacement keys as literals unless regex replacement is explicitly needed. If regex is needed, add schema validation and bounded complexity.
+
+### P2 - Malformed frontmatter can break docs pages and manifests
+
+`src/utils/documents.server.ts:580-603` parses YAML frontmatter with `parseYaml(frontMatterSource)` and does not catch parser errors. The ref-resolution path catches extraction failures at `src/utils/documents.server.ts:496-506`, but normal docs serving does not: `src/utils/docs.functions.ts:276-300` calls `extractFrontMatter(file)` in the page loader, and manifest generation calls it for every markdown file at `src/utils/docs.functions.ts:181-189`.
+
+That means one malformed remote markdown frontmatter block can break the affected page, and during manifest generation it can abort redirects for the whole docs root instead of skipping only the bad file.
+
+Suggested fix: make `parseFrontMatter` return `{ content, data: {} }` plus a logged diagnostic on YAML parse errors, or return a typed parse result and let manifest generation skip bad files while page serving falls back to body-only rendering.
+
+### P2 - GitHub recursive tree truncation is treated as complete data
+
+`src/utils/documents.server.ts:726-729` models GitHub's recursive tree response with an optional `truncated` flag. `src/utils/documents.server.ts:938-963` validates and caches that response but returns `data?.tree` without checking `truncated`. `src/utils/documents.server.ts:1180-1191` then builds docs file trees from that data, and `src/utils/github-example.server.ts:38-80` uses the same tree to decide which example files to fetch.
+
+If GitHub truncates a large repository tree, docs manifests, example explorers, and example deploys can silently omit files. This is worse than an explicit failure because it can cache an incomplete tree as valid content.
+
+Suggested fix: reject or separately mark truncated recursive-tree responses, avoid caching them as successful content, and fall back to paged/non-recursive traversal for large repositories when a complete tree is required.
+
+### P2 - Markdown raw HTML/iframe policy needs a documented trust boundary
+
+Markdown parsing and rendering use raw HTML:
+
+- `src/utils/markdown/processor.ts:21-23`
+- `src/components/markdown/Markdown.tsx:33-40`
+- `src/components/markdown/Markdown.tsx:86-88`
+- `src/components/SearchModal.tsx:195-212` manually strips highlight placeholders and then renders search-highlight markup through `dangerouslySetInnerHTML`
+- `src/utils/markdown/processor.ts:206-235` collects heading text from parsed inline nodes, and `src/components/Breadcrumbs.tsx:63-77`, `src/components/Toc.tsx:60-79`, and `src/components/TocMobile.tsx:41-47` render that heading text as HTML
+
+This may be acceptable for trusted TanStack docs/blog content. It should be centralized as a deliberate policy, with a separate safe renderer for untrusted or partner/user content.
+
+Suggested fix:
+
+- Document which markdown sources are trusted.
+- Restrict iframe `src` to known hosts where possible.
+- Use a no-HTML renderer or sanitizer for untrusted content.
+- Prefer token/render-function highlight rendering for search results instead of HTML string replacement.
+
+### P3 - Markdown link routing only recognizes a few external protocols
+
+`src/components/markdown/MarkdownLink.tsx:4-12` classifies links as relative unless they start with `/`, `http://`, `https://`, `//`, `#`, or `mailto:`. That means valid non-HTTP links such as `tel:`, `sms:`, `ftp:`, `webcal:`, or package/editor schemes are treated as relative TanStack Router links and rewritten at `src/components/markdown/MarkdownLink.tsx:76-97`.
+
+The docs chrome has the same problem in a narrower form. `src/components/LibraryLayout.tsx:885-889` excludes only `http` links from prev/next navigation, `src/components/LibraryLayout.tsx:1012-1021` renders only `http` children as anchors, and other protocols fall through to TanStack Router links at `src/components/LibraryLayout.tsx:1087-1101` or prev/next cards at `src/components/LibraryLayout.tsx:676-686`. Navbar has its own slightly different classifier at `src/components/Navbar.tsx:368-370`.
+
+Suggested fix: replace the hand-written prefix checks with a parsed link classifier: route only same-origin path links through `<Link>`, leave any recognized absolute or custom scheme as a normal anchor, and explicitly reject or sanitize unsafe schemes for untrusted markdown.
+
+### P3 - Community resource frontmatter is rendered without a resource schema
+
+`src/routes/_library/$libraryId/$version.docs.community-resources.tsx:15-34` catches any docs-load/frontmatter failure and returns `doc: null as null | any`. The render path then reads `data.doc?.frontmatter` and passes `frontmatter.articles`, `media`, `utilities`, and `others` directly into `CommunitySection` at `src/routes/_library/$libraryId/$version.docs.community-resources.tsx:65-114`.
+
+`CommunitySection` assumes each item has `{ title, description, url }` and renders `href={res.url}` at `src/routes/_library/$libraryId/$version.docs.community-resources.tsx:121-147`. Since this content comes from remote docs frontmatter, malformed arrays can break rendering and unsafe/non-HTTP schemes can become clickable resource cards.
+
+Suggested fix: add a `communityResourcesFrontmatterSchema` with bounded arrays and strings, URL protocol validation, and a skipped-resource diagnostic. Reuse the same external-link classifier recommended for markdown links.
+
+### P3 - Library Scarf tracking ids are duplicated
+
+Library routes mount a Scarf tracking image when `library.scarfId` is present at `src/routes/_library/$libraryId/route.tsx:99-103`. The image URL uses only the id plus route location key at `src/components/Scarf.tsx:4-17`.
+
+`src/libraries/libraries.ts:515`, `src/libraries/libraries.ts:548`, and `src/libraries/libraries.ts:610` assign the same Scarf pixel id to Store, Pacer, and DB. If these are supposed to measure package-specific traffic, those three library pages are being attributed to one pixel. The current image also has `alt="scarf analytics"` and a full fixed viewport box, so an invisible tracking pixel can still show up as an image in accessibility tooling.
+
+Suggested fix: validate library metadata for unique `scarfId` values, make shared/org-level ids explicit if intentional, and render the tracking pixel as `alt=""`, `aria-hidden="true"`, `width={1}`, `height={1}` with no full-screen fixed box.
+
+### P3 - Search/AI source links classify internal URLs by substring
+
+`src/components/SearchModal.tsx:607-624` treats any href containing `//tanstack.com` as internal before parsing it. A URL like `https://example.com/redirect?next=//tanstack.com/query/latest` can be converted into a TanStack Router link to `/query/latest` instead of remaining an external link. Kapa source links and Algolia hit URLs flow through this helper at `src/components/SearchModal.tsx:641-671`, `src/components/SearchModal.tsx:1683-1691`, and `src/components/SearchModal.tsx:3125-3142`.
+
+Suggested fix: replace substring matching with a shared `getInternalTanStackRouteTarget` helper that parses `new URL(href, origin)`, requires `url.origin === location.origin` or an explicit `https://tanstack.com` allowlist, rejects static/API paths, and preserves hash/search. Reuse it anywhere external source URLs become router links.
+
+### P2 - Search modal body pointer lock can restore the wrong global state
+
+`src/components/SearchModal.tsx:3370-3445` stores and rewrites `document.body.style.pointerEvents` across three effects, a timeout, and animation frames. On open it forces the body to `pointer-events: none` at `src/components/SearchModal.tsx:3420-3422`; on close it restores from a mount-time ref at `src/components/SearchModal.tsx:3391-3396` and `src/components/SearchModal.tsx:3425-3429`; and unmount restores the same ref at `src/components/SearchModal.tsx:3442-3444`.
+
+This is fragile when another overlay also owns body pointer events, when Radix changes the same style, or when the component unmounts during the close transition. The site can restore an old empty value over a newer owner, or leave the body non-interactive after an interrupted close.
+
+Suggested fix: delete this if Radix can own modal outside-pointer behavior, or centralize body locks in a reference-counted `useBodyStyleLock` helper that stores an owner token and restores only if it still owns the property.
+
+### P3 - Legacy docs redirects use prefix matches without segment boundaries
+
+`src/utils/handleRedirects.ts:17-26` parses the request URL, then redirects when `url.pathname.startsWith(`${urlFromPathStart}/${item.from}`)`. This means a legacy item such as `overview` also matches paths like `/query/v3/overview-extra`. The route hooks at `src/routes/-library-landing-route.tsx:25-35`, `src/routes/_library/$libraryId/$version.index.tsx:6-19`, and `src/routes/_library/$libraryId/$version.tsx:14-23` run these redirect tables before normal docs loading.
+
+Router-specific redirects also use broad `href.includes(...)` checks at `src/libraries/libraries.ts:233-267`, including the full href string rather than only the pathname. Query strings containing `/examples/` can alter whether a framework-docs redirect runs. The Start project repeats the full-href regex/replace shape for `/api-routes` at `src/libraries/start.tsx:153-164`. The root route has the same full-href shape for old framework docs redirects at `src/routes/__root.tsx:144-153`, and the blog loader has a hard-coded substring redirect at `src/utils/blog.functions.ts:58-62`.
+
+Suggested fix: convert redirect tables into normalized path matchers that compare full path segments, preserve intended search/hash behavior, and only inspect `url.pathname` for route classification.
+
+### P2/P3 - Remote docs config lacks size and shape caps
+
+`src/utils/config.ts:29-66` validates remote `docs/config.json`, but every string and array is unbounded. A remote config can include very large section/child arrays, long labels/paths/badges/dates, and large framework nesting before it feeds docs sidebars, generated `index.md`, and `llms.txt`.
+
+Callers include the docs-config query (`src/queries/docsConfig.ts:17-24`) and markdown/text endpoints (`src/routes/_library/$libraryId/$version.docs.index[.]md.ts:24-38`, `src/routes/_library/$libraryId/$version.llms[.]txt.ts:22-36`). `src/utils/llms.ts:311-335` then formats config labels, URLs, badges, and dates directly into Markdown links without escaping Markdown control characters, so malformed or adversarial docs config can corrupt generated agent-facing indexes.
+
+`parseDocsConfig` logs validation issues and thrown errors at `src/utils/config.ts:74-83` and `src/utils/config.ts:117-136`, which can also make malformed remote content noisy in production logs.
+
+Suggested fix: add max lengths for labels, paths, badges, and dates; cap section/framework/child counts; normalize `to` paths; escape Markdown labels/URLs/metadata in LLM/index outputs; and return a stable empty/fallback config plus a sanitized log summary when remote config is invalid.
+
+### P2 - Docs manifest generation fans out over every markdown file
+
+`src/utils/docs.functions.ts:151-213` builds a docs manifest by flattening the docs tree, filtering every markdown file, fetching each file at `src/utils/docs.functions.ts:181`, and parsing frontmatter redirects. The result is cached by `getCachedDocsArtifact` at `src/utils/docs.functions.ts:224-232`, but cold cache, invalidation, and forced stale paths still pay the full repo walk.
+
+`src/utils/docs.functions.ts:90-95` also accepts a `docsPaths` array for redirect resolution with no array-length cap. The tree fetch itself can already be incomplete if GitHub truncates the recursive tree, covered above.
+
+Suggested fix: cap docs manifest file counts, add a build deadline/concurrency limit, cache redirect metadata separately during docs content fetches, and cap `docsPaths` in `fetchDocsRedirect` input.
+
+### P2 - Markdown framework tabs cast raw mode strings
+
+`src/utils/markdown/filterFrameworkContent.ts:185-195` parses `InstallMode` from markdown attributes and casts the value at `src/utils/markdown/filterFrameworkContent.ts:191` before passing it into install-command generation. The framework/package-manager extraction tests in `tests/filter-framework-content.test.ts:1-69` do not cover filtering output or invalid `mode` values.
+
+The dynamic attribute regex at `src/utils/markdown/filterFrameworkContent.ts:208-211` is currently fed internal attribute names, so that part looks acceptable. The boundary issue is the raw markdown value becoming an install-mode enum through a cast.
+
+Suggested fix: validate markdown tab `mode` against the install-mode picklist before use, and add tests for invalid/unknown modes.
+
+### P2 - Showcase voting can throw under concurrent first votes
+
+`src/utils/showcase.functions.ts:704-735` reads an existing vote, then inserts if none exists. The table has a uniqueness rule for `(showcaseId, userId)`, so concurrent first votes can hit a unique-constraint error.
+
+Suggested fix: use a transaction/upsert path and recompute/update score in the same transaction, or store score as a derived query/cache instead of a separately maintained counter.
+
+### P3 - Showcase gallery optimistic vote keys omit one active filter
+
+`src/components/ShowcaseGallery.tsx:30-42` fetches approved showcases with `hasSourceCode: search.hasSourceCode`, but the optimistic vote snapshot, update, and rollback query keys omit that filter at `src/components/ShowcaseGallery.tsx:73-82`, `src/components/ShowcaseGallery.tsx:117-126`, and `src/components/ShowcaseGallery.tsx:155-169`.
+
+When the open-source filter is active, the optimistic score update can target a different cache entry than the visible gallery. The eventual invalidation still reconciles, but the UI loses the immediate feedback and rollback symmetry that the rest of the mutation code is trying to provide.
+
+Suggested fix: build showcase gallery query options from one local `galleryQueryInput` object that includes pagination and every active filter, then reuse that object for the read query, optimistic snapshots, optimistic updates, and rollbacks.
+
+### P3 - NPM summary duplicates and weakens the shared recent-downloads query
+
+`src/queries/stats.ts:38-55` already exports a shared `recentDownloadsQuery` that keys by `id`, `npmPackageNames`, `repo`, and `frameworks`, then sends that same normalized library object to `fetchRecentDownloadStats`.
+
+`src/components/npm-stats/NPMSummary.tsx:30-45` defines a second local `recentDownloadsQuery`. Its query key is only `['npm-recent-downloads', library.id]`, and its request omits `library.npmPackageNames` even though package names are part of the shared query contract. If package metadata changes under the same library id, or a library has explicit package names that differ from repo/framework inference, the summary can reuse stale data or ask the server for a different package set than the shared stats query.
+
+Suggested fix: delete the local query wrapper and import the shared `recentDownloadsQuery` from `src/queries/stats.ts`.
+
+### P2 - Feedback leaderboard loads all approved feedback into JS
+
+`src/utils/docFeedback.functions.ts:448-520` fetches all approved feedback, aggregates in memory, sorts in JS, then paginates.
+
+Suggested fix: move aggregation and sorting into SQL, or maintain a materialized/user aggregate table updated on moderation changes.
+
+### P2 - Docs feedback input accepts unbounded content and metadata
+
+`src/utils/docFeedback.functions.ts:26-117` accepts feedback `content`, `pagePath`, `libraryId`, `libraryVersion`, `blockSelector`, `blockContentHash`, and `blockMarkdown` with minimum-length checks but no max lengths. `src/utils/docFeedback.functions.ts:122-170` allows unbounded update content. `src/utils/docFeedback.functions.ts:531-587` takes uncapped page identifiers for page feedback lookup, and `src/utils/docFeedback.functions.ts:622-640` accepts an uncapped `feedbackIds` array.
+
+The feature is authenticated and has a submission-count rate limit at `src/utils/docFeedback.server.ts:135-150`, but one request can still carry very large text/metadata.
+
+Suggested fix:
+
+- Add shared schemas for doc feedback content, page path, library id/version, block selector, block hash, and block text.
+- Cap markdown/block text separately from user-authored note/improvement text.
+- Add bounded UUID array helpers for batch moderation functions.
+- Consider server-side normalization of `pagePath` to the router/docs path shape.
+
+### P2 - Moderation notifications are fire-and-forget async calls
+
+`src/utils/docFeedback.functions.ts:101-110` and `src/utils/showcase.server.ts:278-287` call `notifyModerators` without `await` or `.catch()`, but `notifyModerators` is async at `src/utils/email.server.ts:46-65`.
+
+If Discord notification fails, the submission succeeds but the failure can become an unhandled rejection depending on runtime behavior.
+
+Suggested fix: either `await notifyModerators` inside a best-effort `try/catch`, or enqueue moderation notifications in a durable/background queue. Log a sanitized failure with enough context to retry manually.
+
+### P2 - Showcase submission schemas have partial caps and synchronous rank lookup
+
+`src/utils/showcase.functions.ts:32-58` and `src/utils/showcase.functions.ts:91-118` cap `name` and `tagline`, but leave `description`, URL fields, `libraries`, and `useCases` arrays without explicit maximums. Admin moderation/update schemas repeat the same loose URL/description shape at `src/utils/showcase.functions.ts:501-533`.
+
+Public gallery search also accepts uncapped `page`, `pageSize`, and query text at `src/routes/showcase/index.tsx:8-15`, then applies those values in `searchShowcasesCore` at `src/utils/showcase.server.ts:515-583`.
+
+The image URL contract is also looser on the server than the UI implies. `src/components/ShowcaseSubmitForm.tsx:280-297` only exposes UploadThing-backed uploads through `ImageUpload`, and `src/server/uploadthing.ts:35-56` caps showcase image upload size/count. The server write paths still accept any HTTP(S) `logoUrl`/`screenshotUrl` at `src/utils/showcase.server.ts:157-174`, so external image URLs can be stored and rendered publicly in `src/components/ShowcaseCard.tsx:47-59`, `src/components/ShowcaseDetail.tsx:234-251`, and moderation/account surfaces.
+
+Submission and URL-changing edits synchronously call Tranco:
+
+- `src/utils/showcase.server.ts:234-235`
+- `src/utils/showcase.server.ts:351-355`
+- `src/utils/tranco.server.ts:63-95`
+
+`getTrancoRank` does not use a timeout/cache helper and logs upstream errors directly.
+
+Related showcase caching has a separate correctness issue. `src/queries/showcases.ts:92-107` uses `params.libraries` and `params.limit` in the query function but keys the query only by `params.showcaseId` at `src/queries/showcases.ts:97-98`. Different related-showcase requests for the same showcase can reuse the wrong cached result.
+
+Suggested fix:
+
+- Add a shared showcase input schema with URL length caps, description cap, bounded library/use-case arrays, and normalized URL handling.
+- Decide whether showcase images must be UploadThing-owned URLs; if yes, validate by host/key prefix server-side.
+- Cap gallery and moderation page sizes independently on the server-function boundary.
+- Move Tranco ranking to a cached/background enrichment job, or call it through the shared outbound fetch helper with a tight timeout.
+- Include every query-function input in related-showcase query keys, or normalize the related-showcase request into a shared query-options schema.
+
+### P3 - Showcase moderation rows reuse the same note input id
+
+Expanded pending rows in `src/components/ShowcaseModerationList.tsx:527-548` render a `<label htmlFor="note">` and `<textarea id="note">` for each row. If multiple pending rows are expanded, the DOM contains duplicate ids and labels can target the first textarea instead of the row-local note.
+
+Suggested fix: derive the id from the showcase id, such as `showcase-note-${showcase.id}`, or wrap the textarea in the label if the design allows it.
+
+### P3 - Feedback moderation note labels point at no textarea
+
+`src/components/FeedbackModerationList.tsx:335-337` derives a row-local `htmlFor` value, but the textarea rendered at `src/components/FeedbackModerationList.tsx:341-352` does not receive the matching `id`. The accessible label is therefore disconnected even though the code looks like it already solved the duplicate-id problem.
+
+Suggested fix: pass `id={`moderation-note-${feedback.id}`}` to the textarea, and make this the same row-local id helper used by showcase moderation.
+
+### P3 - Moderation date filters reuse global input ids
+
+`src/components/FeedbackModerationTopBar.tsx:170-200` and `src/components/NotesModerationTopBar.tsx:129-154` both hard-code date input ids as `from` and `to`. Those components are route-specific today, but they sit inside shared responsive filter UI and can produce duplicate ids if a hidden mobile filter copy remains mounted during viewport changes or if multiple moderation/filter bars are rendered together later.
+
+Suggested fix: generate ids with `React.useId()` or add a `DateRangeFilter` primitive that owns unique ids, labels, parsing, and route-search updates.
+
+### P3 - Account email label points at no input
+
+`src/routes/account/index.tsx:103-115` renders `<label htmlFor="email">` for the disabled email field, but the input has no `id`. That disconnects the accessible name from the control and is another small example of form labels being hand-wired per page.
+
+Suggested fix: add `id="email"` to the input, or move these static read-only fields onto the same form-field helper used by editable account/admin fields.
+
+### P2/P3 - Current-user account query keys are not session-scoped
+
+Several account queries fetch data for the current authenticated user but use cache keys that do not include a user id, session version, or auth fingerprint:
+
+- `src/queries/docFeedback.ts:25-36` uses `['docFeedback', 'user', params]`, consumed by `src/routes/account/feedback.tsx:24-29` and `src/routes/account/notes.tsx:24-29`.
+- `src/queries/showcases.ts:28-34` uses `['showcases', 'mine', params]`, consumed by `src/routes/account/submissions.tsx:21-48`.
+- `src/routes/account/index.tsx:35-39` uses `['my-streak']` for authenticated activity data.
+- `src/routes/account/integrations.tsx:45-48` uses `['api-keys']`, and `src/routes/account/integrations.tsx:103-106` uses `['connected-apps']`.
+
+The server functions correctly scope results to the authenticated user, but the client cache does not. Sign-out paths call `authClient.signOut()` and navigate at `src/routes/account/index.tsx:72-83` and `src/components/NavbarAuthControls.tsx:54-65`; they do not clear the React Query cache. A same-browser sign-out/sign-in or account switch can temporarily show stale account data until those queries refetch.
+
+Suggested fix: include a stable auth fingerprint (`userId` plus `sessionVersion` if available) in current-user query keys, and clear or remove user-private query namespaces on sign-out/login transitions. Treat anonymous/current-user cache invalidation as an auth lifecycle concern, not individual page cleanup.
+
+### P3 - Admin bulk-action labels share a missing target
+
+`src/routes/admin/users.tsx:824-858` renders two bulk-action labels with `htmlFor="bulk-update-capabilities"`. The role `<select>` at `src/routes/admin/users.tsx:830-843` has no matching `id`, and the capabilities actions are buttons, not one labeled control. Screen readers get disconnected labels, and the duplicated id target would still be ambiguous if one were added blindly.
+
+The roles admin create form repeats the missing-target pattern: `src/routes/admin/roles.index.tsx:483-519` renders labels for `role-name`, `role-description`, and `role-capabilities`, but the `FormInput` controls at `src/routes/admin/roles.index.tsx:490-511` do not receive matching ids and the capabilities section labels a `<div>`.
+
+Suggested fix: give the role select a unique id such as `bulk-assign-role`, remove `htmlFor` from button-group labels or use grouped fieldsets/legends, and put this on the shared admin form-field pattern.
+
+### P3 - Admin detail pages mask query errors as missing records
+
+`src/routes/admin/showcases_.$id.tsx:176-211`, `src/routes/admin/users.$userId.tsx:44-79`, and `src/routes/admin/feedback_.$id.tsx:54-89` only special-case loading. If the query errors, `query.data` is `undefined`, so the UI falls into "Showcase not found", "User not found", or "Feedback not found" instead of showing the server/auth/network error.
+
+The detail pages also hide secondary query failures: `src/routes/admin/users.$userId.tsx:81-83` renders empty roles/effective capabilities when those queries fail, and the showcase/feedback moderation mutations only show some edit errors but not approve/deny failures.
+
+Suggested fix: add a shared `AdminQueryState` helper that distinguishes loading, error, not found, and success. For secondary panels, show an inline "failed to load" state instead of silently replacing data with empty arrays.
+
+### P3 - Public showcase detail masks query errors as missing projects
+
+`src/components/ShowcaseDetail.tsx:38` only reads `data` and `isLoading` from the showcase query. If the request fails, `data` is undefined and `src/components/ShowcaseDetail.tsx:192-214` renders "Showcase not found" instead of a server/auth/network error. Related showcases and vote queries at `src/components/ShowcaseDetail.tsx:40-70` are also treated as optional empty panels when they fail.
+
+Suggested fix: use the same loading/error/not-found/success state helper recommended for admin detail pages, with a public-facing error state and retry path.
+
+### P3 - Admin audit links cannot target a specific record
+
+`src/utils/audit.functions.ts:116-146` supports `targetId`, and the database indexes it at `src/db/schema.ts:668-683`, but the audit route search schema omits `targetId` at `src/routes/admin/audit.tsx:93-103`. The audit query key and server call also only include `actorId`, `action`, and `targetType` at `src/routes/admin/audit.tsx:160-183`.
+
+Detail pages therefore link to broad audit views instead of the specific record they label: `src/routes/admin/showcases_.$id.tsx:913-919`, `src/routes/admin/users.$userId.tsx:334-344`, and `src/routes/admin/feedback_.$id.tsx:326-332` pass only `targetType` or no target filter at all.
+
+Suggested fix: add `targetId` to the audit route search schema, top-bar filters, query key, and `listAuditLogs` call, then pass the concrete showcase/user/feedback id from detail pages.
+
+### P3 - Admin route access and admin server-function access are out of sync
+
+The admin layout says each sub-route checks specific capabilities at `src/routes/admin/route.tsx:33-40`, but several admin-only pages have no child `beforeLoad` guard: `src/routes/admin/github-stats.tsx:51-53`, `src/routes/admin/npm-stats.tsx:55-57`, `src/routes/admin/intent.tsx:32-34`, and `src/routes/admin/docs.tsx:4-6`.
+
+The server functions behind those pages do require `admin`, for example `src/utils/stats-admin.server.ts:19`, `src/utils/intent-admin.server.ts:38`, and `src/utils/docs-admin.server.ts:11-13`. A moderator-level user can still see the nav items at `src/routes/admin/route.tsx:121-140`, open the routes, and fire rejected queries/mutations before the server denies them.
+
+Suggested fix: give every admin-only child route its own `beforeLoad` guard and mark the matching nav items with `requiredCapability: 'admin'`. A shared admin route/nav config would keep nav visibility, route guards, and server-function capability checks aligned.
+
+### P3 - Capability server-function validation lies to TypeScript
+
+`src/utils/auth.functions.ts:28-37` accepts `{ capability: string }`, then casts it to `Capability` in the validator. The guard in `src/auth/guards.server.ts:45-65` will not grant access for an unknown capability, but the public server-function boundary still treats arbitrary input as a valid app capability.
+
+That makes error semantics depend on authorization instead of validation, and it gives future callers a false sense that input has been narrowed. The real source of truth already exists in `src/db/types.ts:5-13`.
+
+Suggested fix: validate against `CAPABILITIES` or a Valibot picklist at the server-function boundary, then make `requireCapabilityUser` accept `Capability` instead of `string`.
+
+### P3 - Admin detail timestamps request an unsupported date format
+
+The local date helper implements `PPp` at `src/utils/dates.ts:93-102`, but not `PPpp`. Unknown formats fall through to `console.warn` and `toISOString()` at `src/utils/dates.ts:104-107`.
+
+Several admin detail pages call the unsupported `PPpp` token: `src/routes/admin/users.$userId.tsx:167-176`, `src/routes/admin/feedback_.$id.tsx:215` and `src/routes/admin/feedback_.$id.tsx:303`, plus `src/routes/admin/showcases_.$id.tsx:560` and `src/routes/admin/showcases_.$id.tsx:890`. Those UI fields display ISO strings instead of the intended friendly date/time and can log warnings during normal admin use.
+
+Suggested fix: either support `PPpp` in `format()` as the expected date-plus-time shape, or update call sites to use the existing `PPp` token. Add a small unit test for every supported token used in source.
+
+### P3 - Public filter controls repeat disconnected labels
+
+The custom filter dropdowns repeat the same label wiring issue outside admin. `src/routes/partners.index.tsx:185-254` renders labels for `partner-status` and `library-filter`, but the controls are button groups/divs with no matching ids. `src/routes/maintainers.tsx:197-272` labels `groupBy`, `sortBy`, and `libraryFilter`, but the `<select>` elements do not receive matching ids and the library filter labels a button grid.
+
+The blog author filter does the same thing in a smaller form: `src/routes/blog.index.tsx:112-129` points `htmlFor="blog-author-filter"` at a wrapper `<div>`, while the real dropdown trigger button lives inside `src/components/BlogAuthorFilter.tsx:36-76`.
+
+Suggested fix: use real `id` values for select controls, and use `fieldset`/`legend` or `aria-labelledby` for button groups. This should be covered by the same repeated-form-control id helper/lint as moderation/admin forms.
+
+### P3 - Shared sortable table headers are pointer-only
+
+`src/components/TableComponents.tsx:131-151` renders sortable headers as `<th onClick={onSort}>` with a cursor and hover state. That gives mouse users sorting, but the header is not focusable, has no button semantics, no `aria-sort`, and no keyboard activation.
+
+The primitive is used in admin users and login history tables at `src/routes/admin/users.tsx:887-906` and `src/routes/admin/logins.tsx:318-332`, so any new sortable admin table inherits the same accessibility gap.
+
+The Intent admin package rows repeat the same pointer-only interaction shape at `src/routes/admin/intent.tsx:645-648`: the row expands on click and shows a pointer cursor, but it is not focusable and has no keyboard activation. Showcase moderation rows do the same at `src/components/ShowcaseModerationList.tsx:211-214`, feedback moderation rows at `src/components/FeedbackModerationList.tsx:142-148`, and notes moderation rows at `src/components/NotesModerationList.tsx:124-130`, with row expansion behind pointer-only table-row clicks and separate action buttons nested inside row cells.
+
+Suggested fix: render a `<button type="button">` inside the `<th>`, put `aria-sort` on the header cell, and centralize sort-direction labels in the table primitive instead of repeating visual-only chevrons. For expandable rows, put a real disclosure button in the first cell or add the proper keyboard/ARIA disclosure semantics.
+
+### P3 - Shared pagination controls repeat a broken label/id contract
+
+`src/components/PaginationControls.tsx:111-124` renders `htmlFor="pageSize"` but the `<select>` has no `id`, so the label does not name the control. If multiple pagination controls ever render on one page, a single hardcoded id would also be the wrong fix.
+
+The same primitive is used across account feedback/notes, admin users/audit/logins, moderation lists, the feedback leaderboard, and showcase gallery. Its pagination buttons at `src/components/PaginationControls.tsx:135-182` also omit `type="button"`, which is harmless in current table usage but fragile for any future form-owned filter surface.
+
+Suggested fix: derive a stable local id with `React.useId()` or accept an `idPrefix`, wire `htmlFor`/`id`, and default every non-submit pagination button to `type="button"`.
+
+### P3 - Twoslash CSS has invalid declarations
+
+`src/styles/app.css:825-828` sets `visibility: transparent` for `.error-behind`, but `visibility` only accepts values such as `visible`, `hidden`, or `collapse`. `src/styles/app.css:924-928` also sets `.tag-container .twoslash-annotation { background-color: #fcf3d9 bb; }`, which is not a valid color.
+
+Both declarations are ignored by the browser, so error overlays and annotation backgrounds fall through to surrounding code block styling in a way that can differ by theme.
+
+Suggested fix: replace `visibility: transparent` with the intended `visibility: hidden` or opacity-based styling, use a valid alpha color such as `#fcf3d9bb` or `rgb(252 243 217 / 0.73)`, then verify Twoslash error and annotation examples in light and dark themes.
+
+### P3 - App CSS carries unused global utility classes
+
+`src/styles/app.css:547-679` defines a mini design system of global classes such as `.btn-primary`, `.btn-secondary`, `.input-base`, `.card`, `.card-elevated`, `.dropdown-menu`, `.badge-blue`, `.text-secondary`, and `.text-link`. A source scan found no app call sites for those class names outside the stylesheet.
+
+The live app uses React primitives and Tailwind utilities instead, so these global classes add CSS surface area, create another place for visual tokens to drift, and make it harder to know which styling API is intended.
+
+Suggested fix: delete the unused classes if they are legacy, or move the still-wanted contracts into the existing `Button`, `Card`, badge, input, and dropdown primitives with component-level examples.
+
+### P2 - Intent failed queue retries forever without backoff
+
+`src/utils/intent-db.server.ts:76-97` intentionally includes both `pending` and `failed` versions in `getPendingVersions`. `src/utils/intent-db.server.ts:335-343` marks failures as `failed` with no retry count, next-at timestamp, or terminal state. The scheduled processor then drains that queue in a 12-minute loop at `src/server/scheduled.server.ts:342-415`.
+
+One permanently bad tarball can be retried every process cycle and repeatedly consume budget.
+
+Suggested fix:
+
+- Add `retryCount`, `nextAttemptAt`, and a terminal `dead` or `abandoned` status.
+- Exponential backoff failed versions.
+- Keep explicit admin retry as a separate reset path.
+
+### P2 - Intent skill replacement is not transactional
+
+`src/utils/intent-db.server.ts:359-392` inserts content-addressed skill bodies, deletes every `intentSkills` row for a version, then bulk-inserts the replacement metadata. `src/utils/intent-admin.server.ts:220-233`, `src/utils/intent-admin.server.ts:249-265`, and the inline public seed path at `src/utils/intent.functions.ts:362-370` call that helper and then mark the version synced or failed.
+
+If the metadata insert fails after the delete, the version can be marked failed with its previous skill rows already gone. A later retry can rebuild them, but until then public package detail/history reads lose data for that version.
+
+Suggested fix: wrap content insertion, metadata delete, metadata insert, and status update in one transaction-level helper such as `replaceSkillsAndMarkVersion({ versionId, skills })`. For retries, keep the previous synced rows until the replacement commit succeeds.
+
+### P2 - CLI auth tickets are memory-only and public-create
+
+`src/routes/api/auth/cli/create-ticket.ts:3-10` exposes a public POST that creates a ticket. The store is a `globalThis` map with a cleanup interval at `src/auth/cli-tickets.server.ts:20-60`, and status polling consumes authorized tickets at `src/routes/api/auth/cli/status.$ticketId.ts:12-37`.
+
+The secret ticket-id model is reasonable, but the storage is not durable across isolates and there is no per-IP creation limit or map cap. In scaled/serverless environments, the browser auth request and CLI polling request can also land on different isolates.
+
+Suggested fix:
+
+- Move tickets to a durable short-lived store: DB, KV, Durable Object, or equivalent.
+- Add public create-ticket rate limits and a fallback map cap for local/dev use.
+- Validate ticket-id shape on status and auth routes.
+- Unref or lifecycle-manage the cleanup interval in Node dev/test environments.
+
+### P2 - MCP transport returns raw internal errors
+
+`src/mcp/transport.ts:109-128` passes authenticated POST bodies into the MCP SDK and returns `error.message` in the JSON-RPC 500 response when an unhandled error escapes. The endpoint is authenticated and rate-limited, but it still lacks an explicit content-length/content-type guard before `handleRequest`.
+
+Suggested fix:
+
+- Add a request-size cap and content-type policy before invoking the transport.
+- Log internal error details, but return a stable public `Internal error` message.
+
+### P2/P3 - Discord interactions read raw bodies without size or signature-shape guards
+
+`src/routes/api/discord/interactions.tsx:104-132` checks for Discord signature headers, then reads `request.text()` before applying any content-length cap. `valueToUint8Array` at `src/routes/api/discord/interactions.tsx:25-39` accepts hex strings by chunking pairs and `Number.parseInt`-ing each byte, but it does not enforce expected Ed25519 signature/public-key lengths or reject non-hex characters before importing/verifying.
+
+The signature verification is the right boundary, but the route should still fail cheap on obviously malformed requests.
+
+Suggested fix:
+
+- Add a small content-length cap before `request.text()`.
+- Validate signature/public-key hex length and characters before `crypto.subtle.importKey`/`verify`.
+- Parse the interaction body through a small runtime schema after signature verification.
+
+### P2 - Admin validators are too loose for capability and pagination inputs
+
+`src/utils/users.functions.ts:18-37` accepts uncapped list filters and casts `capabilityFilter`. `src/utils/users.functions.ts:60-92` accepts plain string arrays for capability updates and bulk updates, then casts to `Capability`.
+
+The same min-only pagination pattern appears in route search. For example, `src/routes/admin/audit.tsx:87-93` accepts `pageSize` with `v.minValue(1)` but no max before passing it into `listAuditLogs` at `src/routes/admin/audit.tsx:151-164`. `src/routes/admin/showcases.index.tsx:9-15`, `src/routes/admin/feedback.index.tsx:9-17`, `src/routes/admin/notes.index.tsx:21-38`, and `src/routes/admin/logins.tsx:69-80` do the same for moderation/login-history `pageSize`. The feedback/notes date filters are raw strings, and `src/routes/admin/logins.tsx:76` accepts arbitrary `sortBy` strings before forwarding them to `listLoginHistory`.
+
+Suggested fix:
+
+- Use `v.picklist(VALID_CAPABILITIES)` everywhere capabilities enter the system.
+- Cap `limit`, page size, filter lengths, and bulk array sizes.
+- Remove the casts.
+
+### P2 - Admin role/user queries can become all-table and unbounded bulk operations
+
+`src/utils/users.server.ts:129-168` fetches all matching users when filtering by effective capabilities, computes capability maps in JS, filters in memory, then paginates. That is manageable at small user counts but becomes an admin-page performance cliff as user volume grows.
+
+Role operations also accept uncapped arrays:
+
+- `src/utils/roles.functions.ts:281-370` assigns all submitted role ids to one user.
+- `src/utils/roles.functions.ts:384-458` accepts arbitrary `userIds` arrays for bulk role/capability reads.
+- `src/utils/roles.functions.ts:489-603` removes/assigns role relationships for arbitrary user and role array sizes, then writes audit logs with `Promise.all`.
+
+Suggested fix:
+
+- Move effective-capability filtering into SQL or a materialized effective-capability table.
+- Add bounded bulk schemas for `userIds` and `roleIds`.
+- Chunk audit logging and DB writes where large admin operations remain intentional.
+- Centralize role/capability schemas so `users.functions`, `roles.functions`, and admin route search schemas share the same picklists and caps.
+
+### P2/P3 - Admin bulk selections survive filter and page changes
+
+The users admin keeps selected ids in component state at `src/routes/admin/users.tsx:214`, mutates that set from row checkboxes at `src/routes/admin/users.tsx:403-423`, and then sends the whole set to bulk role/capability mutations at `src/routes/admin/users.tsx:425-462`. Filter, sort, page, and page-size changes update route search at `src/routes/admin/users.tsx:242-275` and `src/routes/admin/users.tsx:954-968`, but there is no effect that intersects or clears `selectedUserIds` when the visible query changes.
+
+The role detail page repeats the same shape for users assigned to a role. It stores `selectedUserIds` at `src/routes/admin/roles.$roleId.tsx:30-36`, toggles all rows from the current `usersWithRole` array at `src/routes/admin/roles.$roleId.tsx:91-98`, and removes `Array.from(selectedUserIds)` from the current `roleId` at `src/routes/admin/roles.$roleId.tsx:56-64`. If the route param or query data changes while the component stays mounted, stale ids can remain selected under the new role context.
+
+That means an admin can select users on page A, change filters, pages, or roles, then apply a bulk role/capability operation while the action bar only shows a count. Hidden or stale selected users are still included.
+
+Suggested fix: store the selection with a query fingerprint, clear or intersect it whenever the query key changes, and make the bulk action bar show exactly which visible and hidden users will be affected. Reuse that pattern for any admin table with cross-row bulk actions.
+
+### P2 - Admin role and user mutations are not transactional
+
+Several admin mutations perform multi-step writes plus audit logging without a database transaction. `src/utils/roles.functions.ts:281-369` deletes old role assignments, inserts new ones, then writes audit logs. `src/utils/roles.functions.ts:489-603` bulk-removes or bulk-creates assignments and records one audit row per affected user. `src/utils/users.server.ts:426-559` updates user capabilities before writing audit records, and `src/utils/users.server.ts:562-609` increments session versions before recording the revocation audit log. Showcase admin paths repeat this shape: moderation updates the showcase and then inserts an audit row at `src/utils/showcase.functions.ts:350-400`, admin edits update the row and then audit at `src/utils/showcase.functions.ts:501-633`, and deletes remove the row before audit insertion at `src/utils/showcase.functions.ts:639-667`.
+
+If an insert, delete, update, or audit write fails halfway through, the admin action can leave data changed with missing audit history, or audit history written for only part of the intended bulk operation.
+
+Suggested fix: add a small transaction helper for admin mutations that receives the transaction client, performs the domain write and audit writes together, and returns typed partial-success data only for operations that are intentionally best-effort.
+
+### P2 - Admin analytics/chart endpoints accept unbounded ranges
+
+`src/utils/audit.functions.ts:11-106` and `src/utils/audit.functions.ts:109-230` accept raw pagination limits and date strings for login/audit log tables. `src/utils/audit.functions.ts:430-460`, `src/utils/activity.functions.ts:54-63`, and `src/utils/user-stats.functions.ts:11-15` accept arbitrary `days` values, including all-time/null and nonsensical negative or huge values.
+
+The underlying handlers are admin-only, but the charts can still ask for broad historical ranges and build large result sets. `src/utils/activity.server.ts:206-292` also computes streak leaderboards by loading all activity for users active in the last 30 days and sorting in JS. `src/utils/activity.server.ts:300-309` then builds a raw SQL `IN` clause from user ids even though Drizzle `inArray` is used elsewhere.
+
+Suggested fix:
+
+- Add shared admin table/chart schemas: bounded `limit`, bounded `page`, `dateFrom/dateTo` parsing, and an explicit picklist of supported ranges.
+- Reject negative/NaN `days` and cap maximum all-time chart ranges unless the route deliberately asks for all-time.
+- Move streak leaderboard computation toward SQL/materialized aggregates as the activity table grows.
+- Replace raw SQL `IN` string construction with `inArray(users.id, userIds)`.
+
+### P3 - Admin ratio cards do not guard zero denominators
+
+The admin dashboard assumes there is at least one user when it renders ad metrics. `src/routes/admin/index.tsx:992-995` computes waitlist percentage as `waitlistCount / totalUsers`, `src/routes/admin/index.tsx:1044-1046` turns that into a progress width, and `src/routes/admin/index.tsx:1069-1082` repeats the same pattern for disabled ads. On an empty or freshly seeded environment, `totalUsers` can be `0`, which renders `Infinity%` and a misleading full progress bar.
+
+Suggested fix: add a tiny `safePercentage(numerator, denominator)` helper that returns `{ value, label, width }` or `null`, and use it for admin/dashboard ratios instead of repeating inline division.
+
+### P2 - Admin stats maintenance endpoints can load whole caches
+
+`src/utils/stats-admin.functions.ts:14-61` exposes admin stats server functions without pagination on list operations and accepts loose `org` strings at `src/utils/stats-admin.functions.ts:58`. The server implementations return broad result sets:
+
+- `src/utils/stats-admin.server.ts:18-33` lists all GitHub stats cache rows.
+- `src/utils/stats-admin.server.ts:166-199` lists all matching npm packages.
+- `src/utils/stats-admin.server.ts:255-306` lists org cache rows and performs per-entry package queries.
+- `src/utils/stats-admin.server.ts:312-356` loads all packages for a library.
+- `src/utils/stats-admin.server.ts:367-383` refreshes an arbitrary org string.
+
+`src/routes/admin/npm-stats.tsx:62-75` and `src/routes/admin/github-stats.tsx:58-61` call these on page load. This is admin-only, but it can still become a slow internal page and an accidental expensive maintenance action.
+
+There is also correctness drift between stats paths. `src/utils/stats-admin.server.ts:205-218` refreshes a single package through a wide `/downloads/point/2010-01-01:2030-12-31/...` request, while the scheduled/full refresh path uses chunked `/range/` requests because `/point/` is limited. `src/utils/stats.functions.ts:288-297` retries npm 429s forever inside a chunk loop. `src/utils/stats.functions.ts:73-124` fetches GitHub org repo pages until `rel="next"` disappears with no page cap. `src/utils/stats.functions.ts:450-457` interpolates `org` into the npm org URL, and `src/utils/stats-db.server.ts:893-900` interpolates `org` into a regex, both fed by the loose admin org input.
+
+Suggested fix: paginate cache/package lists, validate and encode org/package names through the same stats schemas as public code, use one chunked download implementation for all package refreshes, cap external pagination/retry loops, and put refresh operations behind explicit bounded jobs.
+
+### P2/P3 - GitHub stats cache drops contributor counts
+
+`src/utils/stats-db.server.ts:1168-1201` accepts a `GitHubStats` object and preserves several fields from the new, existing, or previous cache values. It hard-codes `contributorCount: 0` and `dependentCount: 0`, though, so any caller that eventually supplies real contributor data will lose it on write.
+
+The admin GitHub stats table still treats contributor count as a real cached metric at `src/routes/admin/github-stats.tsx:126-145`, including deltas against previous stats. That means the UI can report stable zero contributors and zero deltas even when the cache input carried a non-zero count.
+
+Suggested fix: either preserve `stats.contributorCount` through the same merge policy as fork/repository counts, or remove contributor count from the cache/admin UI until the GitHub stats fetcher intentionally supports it. Avoid keeping a required `GitHubStats` field that the write path silently overwrites.
+
+### P2 - Docs cache admin scans and invalidates blob storage without budgets
+
+`src/components/admin/DocsCacheTab.tsx:55-69` loads docs cache stats as soon as the admin docs tab mounts and exposes an "Invalidate All Docs" action. The server function wrappers at `src/utils/docs-admin.functions.ts:8-18` have no pagination or operation budget. `src/utils/docs-admin.server.ts:11-72` calls `listDocsCacheRepoStats`, which scans every GitHub content and docs artifact object. `src/utils/docs-admin.server.ts:75-104` can call `markGitHubContentStale({ repo: undefined })` and `markDocsArtifactsStale({ repo: undefined })`, which means every cached repo/ref/object is listed, read, and rewritten as stale.
+
+The blob backend does all of that with unbounded loops: `src/utils/github-content-cache.server.ts:724-740` lists pages until the storage cursor ends, `src/utils/github-content-cache.server.ts:1032-1057` computes full repo stats, `src/utils/github-content-cache.server.ts:1075-1128` prunes by first collecting all matching keys, and `src/utils/github-content-cache.server.ts:1160-1203` rewrites stale metadata one object at a time.
+
+This is admin-only and probably fine at the current cache size. It will become fragile as docs traffic creates more artifacts, especially because simply visiting the admin tab runs the full stats scan.
+
+Suggested fix: paginate docs cache stats, add a max object/page budget to maintenance actions, make "invalidate all" a queued/background job with progress, and keep per-repo invalidation as the fast synchronous path.
+
+### P2 - Intent admin process limit is uncapped
+
+`src/utils/intent-admin.functions.ts:32-38` accepts an optional number for `limit` with no min/max. `src/utils/intent-admin.server.ts:196-230` passes that limit into queue processing and then synchronously extracts tarballs for each pending version.
+
+This is admin-only, so it is less exposed than public endpoints, but it can still accidentally create a very large synchronous admin action.
+
+Suggested fix: cap the admin process limit, use an integer schema, and route large runs through the scheduled/background queue.
+
+### P2/P3 - Intent admin package lists are all-table reads
+
+The Intent admin page mounts three queries immediately at `src/routes/admin/intent.tsx:56-70`. Two of the server paths are unpaginated list reads: `listIntentPackages` loads every package and a full grouped version-count table at `src/utils/intent-admin.server.ts:82-126`, and `listFailedVersions` loads every failed version at `src/utils/intent-admin.server.ts:132-139`. The UI renders both lists directly at `src/routes/admin/intent.tsx:327-340`, `src/routes/admin/intent.tsx:470-527`, and `src/routes/admin/intent.tsx:553-610`.
+
+The stats query also polls every 10 seconds at `src/routes/admin/intent.tsx:56-60`, and each poll runs six count queries in `src/utils/intent-admin.server.ts:40-66`. This is admin-only, but it will get slower exactly when discovery/processing problems create lots of queued or failed versions. Suggested fix: paginate packages and failed versions independently, cap failure history, pause polling when the tab is hidden, and make the stats query the only eager full-page query.
+
+### P3 - Admin row mutations are not consistently keyed by row
+
+The GitHub stats admin page has the right local shape: it stores `refreshingKey` at `src/routes/admin/github-stats.tsx:63`, checks that key per row at `src/routes/admin/github-stats.tsx:284-293`, and disables only the row being refreshed plus the global refresh button.
+
+Other row actions use one mutation state for the whole list. `src/routes/admin/npm-stats.tsx:77-89` creates one package refresh mutation, and every package row disables/spins from `refreshPackageMutation.isPending` at `src/routes/admin/npm-stats.tsx:252-264`. `src/routes/admin/intent.tsx:460-468` creates one failed-version retry mutation for the whole failed table, and every retry button disables from `retryMutation.isPending` at `src/routes/admin/intent.tsx:514-518`.
+
+This is mostly UX/maintainability, but it also makes admin operations feel blocked when only one row is busy. Suggested fix: extract a small keyed row-action helper that tracks the active id(s), exposes `isPendingFor(id)`, and prevents double-clicks per row without freezing unrelated rows.
+
+### P3 - Intent GitHub discovery treats one search page as complete
+
+`discoverViaGitHub` calls GitHub code search with `per_page=100` at `src/utils/intent-admin.server.ts:285-299`, then iterates only `searchData.items` at `src/utils/intent-admin.server.ts:301-388`. The scheduled discovery path repeats the same one-page query at `src/server/scheduled.server.ts:230-249`. Both paths read or type a response shape that can include more results, but repositories beyond the first search page are silently ignored. The admin path uses raw `fetch` calls for GitHub content and npm metadata at `src/utils/intent-admin.server.ts:324-359`, and the scheduled path does the same at `src/server/scheduled.server.ts:287-314`, without the shared timeout/status/body-size policy recommended for outbound calls.
+
+Suggested fix: either make this explicitly "sample the first 100" in the UI/result copy, or paginate with a tight max page budget and record truncation in the result banner. Route GitHub/npm calls through the outbound fetch helper.
+
+### P2 - Example deploy accepts arbitrary source repo/path without volume caps
+
+`src/routes/api/example/deploy.ts:115-164` reads `sourceRepo`, `branch`, `examplePath`, `provider`, `libraryName`, and `exampleName` from raw JSON. It validates the destination repo name, but the source repo/path and provider contract are not parsed through a runtime schema or allowlist before fetching files.
+
+`src/utils/github-example.server.ts:38-80` loads the recursive tree and fetches every matching file with concurrency 8. It excludes common directories, but there is no max file count, max file size, or total byte cap. `src/utils/github-example.server.ts:47-52` matches by a normalized path prefix, while `src/routes/api/example/deploy.ts:160-164` prepends `examples/` to raw request input, so this should also reject `..`, duplicate slashes, and unexpected prefixes before any GitHub work starts.
+
+Provider handling also depends on compile-time types only. `src/routes/api/example/deploy.ts:129-183` passes raw `provider` into `applyProviderConfig`; `src/utils/provider-config.server.ts:39-52` silently returns empty config for unknown values, while `src/utils/provider-config.server.ts:408-420` renders `undefined` in generated repo descriptions for unknown providers. The same helper rewrites `package.json` and `vite.config.*` through best-effort JSON/string transforms at `src/utils/provider-config.server.ts:257-403`, including hard-coded npm scripts for generated provider configs.
+
+This endpoint is authenticated and IP-rate-limited, so the exposure is lower than fully public routes. It can still make a logged-in request do a large amount of GitHub/cache work and then create a repository.
+
+Suggested fix:
+
+- Use a deploy request schema with source repo/ref/path allowlists.
+- Validate provider with a picklist.
+- Treat unsupported provider config as a hard validation error, not an empty config path.
+- Move provider config generation to structured package/config writers where possible, and preserve the detected package manager instead of hard-coding npm scripts.
+- Normalize and cap example paths, fetched file count, per-file bytes, and total copied bytes.
+- Return stable public error codes instead of surfacing upstream fetch messages.
+
+### P2 - Builder GitHub deploy trusts client-supplied files without a file budget
+
+`src/routes/api/builder/deploy/github.ts:149-215` reads JSON without a content-length guard, accepts an optional `files` record, and if every value is a string, pushes those files instead of compiling the project server-side. `src/utils/github-repo.server.ts:241-490` then turns every entry into GitHub tree content without path, file-count, per-file-size, or total-byte validation.
+
+The endpoint is authenticated and rate-limited, but it is still a state-changing GitHub integration that can be made to process and push arbitrary large client-supplied file maps.
+
+`src/routes/api/builder/deploy/check-name.ts:45-54` also checks GitHub availability without a route-level rate limit and returns `available: true` on upstream errors. The final create step handles conflicts, so this is mostly UX, but the availability endpoint should not fail open silently.
+
+The shared GitHub repo helper also has operational gaps. `src/utils/github-repo.server.ts:35-101` creates the repository with no timeout, `src/utils/github-repo.server.ts:270-490` performs a multi-request push with no timeout or retry policy, and both deploy routes create the repo before pushing files (`src/routes/api/builder/deploy/github.ts:217-267`, `src/routes/api/example/deploy.ts:185-243`). If the push fails, the API returns a failure but leaves the newly-created repository behind. `pushFiles` also treats any failed branch-ref lookup as an empty repo at `src/utils/github-repo.server.ts:270-276`; rate limits, auth errors, transient GitHub errors, and a genuinely missing branch all take the same bootstrap path.
+
+Suggested fix:
+
+- Prefer server-side compilation as the only deploy source, or validate client-generated files against a builder output manifest.
+- Add file path normalization, file count, total bytes, and per-file bytes caps before `pushFiles`.
+- Add request-size and same-origin guards to deploy routes.
+- Rate-limit `check-name` and return an explicit unknown/error state instead of `available: true`.
+- Wrap GitHub repo creation/push in a deploy transaction concept: deadlines on every fetch, typed retryable errors, and explicit cleanup/continuation UX when repo creation succeeds but file push fails.
+
+### P2 - Deploy dialogs repeat async workflows without cancellation boundaries
+
+`src/components/builder/DeployDialog.tsx:115-163` and `src/components/ExampleDeployDialog.tsx:70-118` duplicate debounced repository-name checks. Both then run long deployment actions through `handleDeploy` without an `AbortController` or mounted guard:
+
+- builder deploy compiles and posts client-supplied files at `src/components/builder/DeployDialog.tsx:216-273`
+- example deploy posts source repo/path metadata at `src/components/ExampleDeployDialog.tsx:171-213`
+
+Closing the dialog does not cancel in-flight compile/fetch work. When the request eventually resolves, it can still move hidden UI into success/error state. `useDeployAuth` also starts popup-close polling at `src/components/builder/useDeployAuth.ts:81-90` without clearing that interval if the component unmounts while the popup stays open.
+
+Suggested fix:
+
+- Extract a shared deploy-dialog controller for auth refresh, repo-name validation, debounced availability checks, deployment status, countdown, and provider redirect.
+- Add `AbortController` support to deployment fetches and close-dialog cleanup.
+- Track and clear popup polling intervals in `useDeployAuth`.
+- Make the name-check helper return typed response/error states and apply rate-limit-aware UI messaging.
+
+### P3 - Netlify starter action never reports pending state
+
+`src/components/application-builder/useApplicationBuilder.tsx:740-819` opens a pending Netlify deploy window, may mutate selected partners, and may call `resolveSubmittedInput` before navigating the popup. The hook then exports `isGeneratingNetlify = false` unconditionally at `src/components/application-builder/useApplicationBuilder.tsx:922-926`.
+
+`src/components/ApplicationStarter.tsx:883-905` uses that flag to disable/show loading state for the Netlify action, so the real in-flight work is invisible to the UI after the short transient "Opening..." timer. Users can click again while prompt resolution is still in flight, and the code relies on popup behavior rather than component state to prevent duplicate work.
+
+Suggested fix: add real `isGeneratingNetlify` state around `openNetlifyStart`, clear it in `finally`, and gate repeat clicks with the same state used for prompt generation.
+
+### P2/P3 - Builder copy/transient feedback timers are inconsistent
+
+`src/components/ApplicationStarter.tsx:227-240` tracks the transient action timer and clears it on unmount at `src/components/ApplicationStarter.tsx:428-434`. The newer hook repeats similar state at `src/components/application-builder/useApplicationBuilder.tsx:385-394` with an untracked `setTimeout`, so it can update state after unmount and is harder to reuse.
+
+`src/components/application-builder/useApplicationBuilder.tsx:415-445` also calls `navigator.clipboard.writeText` without handling denied clipboard permission, insecure contexts, or unavailable clipboard APIs. That means copy actions can fail silently from the user's perspective unless the caller happens to catch the returned promise.
+
+Suggested fix:
+
+- Extract a `useTransientFlag` or `useTimedState` helper that owns timer cleanup.
+- Extract a `copyToClipboard` helper that handles unsupported/denied clipboard writes and emits one consistent toast/error path.
+- Reuse both in builder, starter, search copy buttons, and docs/examples copy controls.
+
+### P3 - Application-starter resolve has a schema/behavior caveat
+
+`src/routes/api/application-starter/resolve.ts:100-119` detects `rawBody.mode === 'analyze'`, but `applicationStarterRequestSchema` at `src/utils/application-starter.server.ts:14-17` only validates `context` and `input`. Because Zod strips unknown keys, the mode works outside the explicit request contract.
+
+The same endpoint has strong public guards, but `src/routes/api/application-starter/resolve.ts:168-178` returns `details: error.message` on public POST errors.
+
+Suggested fix: use a discriminated schema or separate endpoints for resolve vs analyze, and return stable public error codes/messages while logging internal details server-side.
+
+### P2/P3 - Anonymous application-starter quota is wired but effectively disabled
+
+`src/routes/api/application-starter/resolve.ts:124-150` blocks unauthenticated generations after `RATE_LIMITS.applicationStarterAnonymousDaily` is exceeded and returns `LOGIN_REQUIRED_FOR_MORE_GENERATIONS`. The configured daily limit is `1_000_000` at `src/utils/rateLimit.server.ts:179-183`, even though the comment says this is the number of anonymous generations before login is required. The status endpoint also reports that limit to the UI at `src/routes/api/application-starter/resolve.ts:16-35` and `src/routes/api/application-starter/resolve.ts:38-66`.
+
+That makes the login gate mostly cosmetic while still writing daily quota rows for every anonymous generation. If the intended product behavior is a real anonymous sample quota, this should be a small integer in config. If the intended behavior is no anonymous quota, remove the quota branch and UI copy so the security and product contracts match.
+
+Suggested fix: move the anonymous generation quota to a named environment/config value, set an explicit product limit, and test the transition from anonymous usage to login-required state.
+
+### P3 - Application-starter control markers share the user prompt channel
+
+`src/utils/partners.tsx:266-334` stores selected partners, inferred partners, router-only mode, and guidance in plain text markers appended to the user's prompt. The resolver then treats those markers as control data: `src/utils/application-starter.ts:529-536` extracts partner IDs from the full input, `src/utils/application-starter.ts:974-980` checks `Force router-only: true`, and `src/utils/application-starter.ts:1119-1121` splits the prompt into user brief plus guidance lines.
+
+`src/components/application-builder/shared.ts:206-232` composes those markers for the UI, but raw public resolve requests and hand-written prompts can also include the same strings. A prompt containing `Starter guidance:`, `Selected partner ids:`, `Inferred partner ids:`, or `Force router-only: true` can truncate the analyzed user brief or change deterministic routing/partner behavior.
+
+Suggested fix: keep control metadata out of the prompt string. Make selected/inferred partner ids, router-only mode, migration repo, package manager, and guidance explicit schema fields, then render them into the generated prompt only after validation.
+
+### P3 - Application-starter partner visibility has a dead selection parameter
+
+`src/components/application-builder/useApplicationBuilder.tsx:162-168` computes `visiblePartnerSuggestions` by passing `selectedPartners` into `getApplicationStarterVisiblePartnerSuggestions`, but `src/utils/partners.tsx:1379-1384` ignores that parameter and always returns the full suggestion list. The current UI still mutes conflicts in `StarterPartnerRows` at `src/components/application-builder/parts.tsx:369-394`, so this is not currently a correctness bug.
+
+The risk is contract drift: the helper name and signature imply that selected partners affect visibility, while the actual conflict behavior lives in a separate row component and toggle reducer (`src/components/application-builder/useApplicationBuilder.tsx:327-350`). Future surfaces can call the helper and assume conflicts are hidden or reordered when they are not.
+
+Suggested fix: either remove the helper and pass `partnerSuggestions` directly, or make it the single source of partner visibility/muting state by returning typed `{ partner, selected, muted, conflicts }` rows used by both builder and starter UI.
+
+### P2/P3 - Application-starter ecommerce recipes lose the Shopify template in builder/download URLs
+
+The deterministic ecommerce recipe sets `recipe.template = 'shopify-storefront'` at `src/utils/application-starter.ts:695-696`. The CLI path handles that specially: `isCliTemplateId` recognizes `shopify-storefront` at `src/utils/application-starter.ts:1237-1241`, and `buildCliCommand` emits `--template shopify-storefront` at `src/utils/application-starter.ts:1282-1284`.
+
+The URL paths do not preserve the same contract. `buildAdvancedBuilderUrl` serializes `template=shopify-storefront` at `src/utils/application-starter.ts:1208-1234`, but the builder URL loader only calls `setTemplate(search.template)` at `src/components/builder/useBuilderUrl.ts:69-72`. `setTemplate` only accepts preset ids from `TEMPLATES` at `src/components/builder/store.ts:291-315`; the preset id is `storefront`, while its `exampleId` is `shopify-storefront` at `src/builder/templates.ts:119-125`. So the advanced builder link can fall through to the default blank template. `buildDownloadUrl` also omits template/example state entirely at `src/utils/application-starter.ts:1298-1314`, and the in-browser download path maps recipes through `recipeToProjectInput` without selected examples at `src/components/builder/client-generation.ts:28-39`. An ecommerce starter download can therefore lose the Shopify storefront example even though the CLI command is correct.
+
+Suggested fix: give starter recipes separate `presetTemplateId` and `cliExampleId` fields, or make all URL/download/apply paths consume the same recipe-to-builder normalization helper. At minimum, map `shopify-storefront` to the `storefront` preset for `/builder` and pass selected examples into the download API.
+
+### P2/P3 - Application-starter responses are cast instead of parsed
+
+The API route parses request bodies with `applicationStarterRequestSchema` at `src/routes/api/application-starter/resolve.ts:114-120` and `src/utils/application-starter.server.ts:14-17`, but the client response boundary is weaker. `resolveApplicationStarter` casts JSON directly to `ApplicationStarterResult` at `src/components/application-builder/shared.ts:323-328`, and `analyzeApplicationStarter` casts JSON directly to `ApplicationStarterAnalysis` at `src/components/application-builder/shared.ts:343-355`. The same file already has a runtime guard for the status response at `src/components/application-builder/shared.ts:358-380`, so the inconsistency is local.
+
+If the deterministic resolver changes shape, a proxy error returns HTML/partial JSON, or a field such as `prompt` is missing, the UI can fail after the boundary instead of returning one typed application-starter error.
+
+Suggested fix: export response schemas next to the request schema, parse both server outputs and client reads with them, and keep `ApplicationStarterError` as the only UI-facing failure shape.
+
+### P2 - OAuth public endpoints need shared body and metadata guards
+
+`src/routes/oauth/register.ts:28-69` reads arbitrary JSON and accepts uncapped client names and redirect URI arrays. `src/routes/oauth/token.ts:28-47` reads form or JSON bodies without a content-length cap. `src/routes/oauth/authorize.tsx:38-46` and `src/utils/oauthClient.functions.ts:48-57` accept OAuth metadata as raw strings with no length or shape constraints beyond redirect URI validation.
+
+The first-party OAuth routes have similar loose boundaries. `src/routes/auth/$provider/start.tsx:22-58` casts `provider`, accepts raw `returnTo`, and splits raw `scope` query values into GitHub scopes without a picklist or length cap. `src/routes/api/auth/callback/$provider.tsx:40-45` casts the callback provider and treats every non-GitHub provider as Google at `src/routes/api/auth/callback/$provider.tsx:105-133`.
+
+The callback also clears OAuth state/return cookies only on the success path at `src/routes/api/auth/callback/$provider.tsx:221-234`. Missing code/state, state mismatch, provider errors, and thrown provider-fetch errors redirect back to login without clearing those short-lived cookies.
+
+Provider response validation is inconsistent. GitHub token/profile reads go through `parseOAuthJson` and field checks at `src/auth/oauth.server.ts:302-327` and `src/auth/oauth.server.ts:344-412`, while Google token/profile reads call `.json()` directly and trust raw properties at `src/auth/oauth.server.ts:438-453` and `src/auth/oauth.server.ts:471-485`.
+
+Refresh also drops scope information. Initial access tokens store `authCode.scope` at `src/auth/oauthClient.server.ts:219-228`, but refresh tokens do not store scope in the schema at `src/db/schema.ts:1079-1107`. `refreshAccessToken` then mints new access tokens with hard-coded `scope: 'api'` at `src/auth/oauthClient.server.ts:289-312`.
+
+The cleanup index policy also drifts. Authorization codes and access tokens both index `expiresAt` at `src/db/schema.ts:1018-1021` and `src/db/schema.ts:1059-1065`, but refresh tokens have `expiresAt` at `src/db/schema.ts:1093-1096` with no matching index. `cleanupExpiredOAuthTokens` deletes refresh tokens by expiry at `src/auth/oauthClient.server.ts:432-441`, so that cleanup becomes a table scan as connected clients accumulate.
+
+Suggested fix:
+
+- Add shared OAuth metadata schemas for `client_id`, redirect URIs, code challenge, verifier, scope, and state.
+- Add request-size guards on register/token.
+- Enforce `code_challenge_method: 'S256'` at the server-function boundary, not only in the authorize route loader.
+- Add a first-party auth-start schema with a provider picklist, return-to length cap, same-origin/path-only normalization, and scope picklist.
+- Clear state/popup/return cookies on all callback exits, not only successful login.
+- Parse provider token/profile responses through one typed helper with status/content-type/body handling.
+- Store refresh-token scope or join back to the previous access-token scope when minting refreshed access tokens.
+- Add an `expiresAt` index for OAuth refresh tokens before relying on global cleanup.
+
+### P2 - OAuth user/account upsert is not transactional
+
+`OAuthService.upsertOAuthAccount` checks for an OAuth account, optionally finds or creates a user, updates user profile fields, and then inserts the OAuth account in separate repository calls at `src/auth/oauth.server.ts:66-192`. The repositories back those calls with separate DB writes at `src/auth/repositories.server.ts:60-101` and `src/auth/repositories.server.ts:193-203`.
+
+Concurrent callbacks for the same provider/email, provider email changes, or an OAuth-account insert failure can leave partial state: a new user without a linked OAuth account, a user profile update without the token update, or a unique-constraint error after several writes have already committed.
+
+Suggested fix: move the upsert/link/create flow into one repository method that runs in a Drizzle transaction, handles unique-conflict retry/lookup, and returns a typed result for "linked existing user", "created new user", and "updated existing OAuth account".
+
+### P2/P3 - Login return-to parameter names are inconsistent
+
+`src/auth/client.ts:76-79` can navigate users to `/login?returnTo=...`, but `src/routes/login.tsx:17-20` validates `redirect`, not `returnTo`, and `LoginPage` renders `<SignInForm />` without passing any return target at `src/routes/login.tsx:104-125`.
+
+`/auth/cli` works around this by rendering `<SignInForm returnTo={returnTo} />` directly at `src/routes/auth/cli.tsx:117-128`. Generic route guards that redirect to `/login` also do not preserve the attempted destination.
+
+Suggested fix: choose one query key, probably `returnTo`, parse it with a same-origin/path-only schema, pass it to `SignInForm`, and update protected-route redirects to preserve the current location where appropriate.
+
+### P2/P3 - Login modal success callbacks survive modal close
+
+`src/contexts/LoginModalContext.tsx:40-51` stores an optional post-login callback and has `closeLoginModal()` clear it, but the provider renders `<LoginModal open={isOpen} onOpenChange={setIsOpen} />` at `src/contexts/LoginModalContext.tsx:75-79`. Radix close, outside-click, and Escape paths can set `isOpen` false without clearing `pendingOnSuccessRef`.
+
+A later `TANSTACK_AUTH_SUCCESS` message from `/auth/popup-success` (`src/routes/auth/popup-success.tsx:9-16`) then runs the stale callback in `src/contexts/LoginModalContext.tsx:53-68`. Callers use this callback for side effects such as newsletter signup, showcase voting, and docs feedback (`src/components/NewsletterSignup.tsx:66`, `src/components/ShowcaseGallery.tsx:185`, `src/components/DocFeedbackProvider.tsx:234`).
+
+The same flow starts auth popups with `window.open` but does not check for a blocked popup at `src/auth/client.ts:38-47`.
+
+Suggested fix: route every modal open-state change through a handler that clears the pending callback when closing, track popup/session request ids in the postMessage payload, and surface blocked-popup failure in `LoginModal`.
+
+### P2 - Draft/future blog posts are hidden from the index but still publicly readable by slug
+
+`src/utils/blog.ts:48-52` excludes drafts and future-dated posts from `getPublishedPosts()`, which feeds `/blog`. `src/utils/blog.functions.ts:65-107` then loads individual posts from `allPosts` by slug, computes `isUnpublished` at `src/utils/blog.functions.ts:94`, and returns the full content anyway. `src/routes/blog.$.tsx:51-56` only uses that flag to emit `noindex`.
+
+Result: an unpublished post is not indexed by the blog list, but anyone with the slug can read it publicly.
+
+Suggested fix: return `notFound()` for `post.draft || !isPublishedDateReleased(post.published)` unless a separate authenticated preview mode is explicitly requested and authorized.
+
+### P3 - Blog image URLs are normalized inconsistently
+
+The blog page head treats any `headerImage` that starts with `http` as already absolute at `src/routes/blog.$.tsx:32-46`; otherwise it sends the path through `getAbsoluteOptimizedImageUrl`. The RSS feed does not share that helper: `src/routes/rss[.]xml.ts:48` renders `<enclosure url="${siteUrl + post.headerImage}" ...>`.
+
+If a post uses an absolute external header image, the page metadata can be correct while RSS emits a malformed URL like `https://tanstack.comhttps://...`. If a relative path needs image optimization or format metadata, RSS bypasses the page helper entirely.
+
+Suggested fix: create one `getBlogImageUrl(headerImage, usage)` helper that URL-parses absolute values, handles same-origin relative paths, applies optimization where appropriate, and returns a MIME type for RSS enclosures instead of hardcoding `image/png`.
+
+### P2 - Shopify browse and cart server functions need caps and an HTML trust boundary
+
+`src/utils/shop.functions.ts:108-205` accepts `first`, cursor, and handle inputs for product/collection/page reads with no max. `src/utils/shop.functions.ts:251-285` accepts uncapped search text and `first`. The public route schemas also leave strings unbounded at `src/routes/shop.index.tsx:18-29` and `src/routes/shop.search.tsx:12-14`; current UI uses `PAGE_SIZE = 24`, but the server-function boundary still accepts larger direct calls. Cart writes accept uncapped variant IDs, line IDs, discount codes, and quantities at `src/utils/shop.functions.ts:324-457`, while client controls can still send arbitrary local quantities through `src/routes/shop.products.$handle.tsx:353-379`, `src/components/shop/ProductDrawer.tsx:625-681`, and `src/routes/shop.cart.tsx:150-170`.
+
+Shopify rich text is rendered with `dangerouslySetInnerHTML` in `src/routes/shop.products.$handle.tsx:400-414`, `src/components/shop/ProductDrawer.tsx:733-742`, `src/routes/shop.pages.$handle.tsx:37-49`, and `src/routes/shop.policies.$handle.tsx:36-48`.
+
+The Shopify image helper has the same loose-transform shape as the Cloudflare helper: `src/utils/shopify-format.ts:27-33` calls `new URL(url)` and appends any numeric width/height without host validation or clamps, and it is used by the product page SEO image at `src/routes/shop.products.$handle.tsx:36-48`, cart thumbnails at `src/routes/shop.cart.tsx:232-240`, drawer thumbnails at `src/components/shop/CartDrawer.tsx:167-175`, and responsive product images at `src/components/shop/ProductImage.tsx:42-56`.
+
+Suggested fix:
+
+- Add a shared shop handle/cursor/query schema and max page size.
+- Add quantity and discount-code length caps.
+- Use a trusted sanitizer/allowlist for Shopify HTML, or document and enforce a strict trusted-CMS contract.
+- Put Shopify fetches behind the same timeout/status helper as other outbound requests.
+- Clamp Shopify image transform dimensions/formats and fail gracefully for malformed or non-Shopify image URLs.
+
+### P3 - Shop fonts are loaded twice and disagree on mono family
+
+The shop route injects a Google Fonts stylesheet for `DM Sans` and `JetBrains Mono` at `src/routes/shop.tsx:8-32`. The route also loads `src/styles/shop.css`, which imports Google Fonts again at `src/styles/shop.css:14`, this time for `DM Sans` and `DM Mono`.
+
+The active shop token is `--font-shop-mono: 'DM Mono'` in both `src/styles/app.css:27-28` and `src/styles/shop.css:33-34`, and shop components use `font-shop-mono` throughout. That means `DM Sans` can be requested twice, `DM Mono` is fetched through a CSS `@import`, and `JetBrains Mono` is fetched by the route even though the shop mono token points elsewhere.
+
+Suggested fix: load the shop font families once, preferably through route-level `<link rel="preconnect">`/stylesheet entries for the exact families used by the tokens, and remove the `@import` from `shop.css`.
+
+### P2/P3 - Shop load-more responses can append stale pages
+
+The shop index, collection, and search pages keep cursor pagination in local `accumulated`, `endCursor`, and `hasNextPage` state. They reset that state when loader data changes, but in-flight load-more mutations are not tied to the route/search version that started them:
+
+- `src/routes/shop.index.tsx:63-98` appends `next.nodes` after any `getProducts` response.
+- `src/routes/shop.collections.$handle.tsx:75-111` appends `next.products.nodes` after any `getCollection` response.
+- `src/routes/shop.search.tsx:47-76` appends `next.products` after any `searchProducts` response.
+
+If a user clicks “Load more” and then changes sort, collection, or search query before the request resolves, the old page can be appended into the new result set. The effect reset only handles loader-data arrival; it does not reject late mutation responses.
+
+Suggested fix: use a route-scoped pagination controller that captures a request fingerprint (`sort`, `handle`, `query`, cursor) in `onMutate` and ignores or aborts responses whose fingerprint no longer matches current loader/search state. That helper should own accumulated pages, cursor state, and reset behavior.
+
+### P3 - Shop "new" badge lasts for a year
+
+`src/components/shop/ProductCard.tsx:8-14` names the freshness window `TWO_WEEKS_MS`, but the value is `365 * 24 * 60 * 60 * 1000`. That means products show the `NEW` badge for roughly a year instead of two weeks.
+
+Suggested fix: set the constant to `14 * 24 * 60 * 60 * 1000`, or rename the constant if the intended merchandising window is actually one year.
+
+### P2/P3 - Product cards eagerly preload every variant image
+
+`src/components/shop/ProductCard.tsx:126-136` preloads every unique variant image on mount so color-hover swaps are instant. Product grids render these cards on the shop index, collection, and search pages at `src/routes/shop.index.tsx:209`, `src/routes/shop.collections.$handle.tsx:156`, and `src/routes/shop.search.tsx:130`.
+
+That can turn one product grid into a large burst of offscreen Shopify image requests before the user hovers a swatch. The hover UX is nicer, but the default should not make every listing page pay for every color image up front.
+
+There is also a correctness edge in the same path. The card builds up to six swatches from option values at `src/components/shop/ProductCard.tsx:116-122`, then finds hover images from `product.variants.nodes` at `src/components/shop/ProductCard.tsx:138-146`. The list fragment only fetches `variants(first: 10)` at `src/utils/shopify-queries.ts:51-100`. Products with size x color variants can have visible swatches whose image-bearing variant is not in the first ten, so hover previews can silently fall back to the featured image.
+
+Suggested fix: either fetch a dedicated color-preview field/list that covers every rendered swatch, or cap rendered swatches to the loaded variant-preview data. Preload only the first few visible/likely swatches, defer preloading until card hover/focus or near-viewport intersection, and put a small per-card/per-page image preload budget behind a shared product-image-hover helper.
+
+### P2/P3 - Quick-view product cards nest real buttons inside a button-like card
+
+When `onQuickView` is provided, `src/components/shop/ProductCard.tsx:241-254` renders a focusable `div role="button"` for the entire card. The card body contains swatch `<button>` elements at `src/components/shop/ProductCard.tsx:193-220`. That creates nested interactive controls on the shop index, collection, and search listing pages. The outer key handler at `src/components/shop/ProductCard.tsx:247-249` also handles Space without `preventDefault`, so keyboard activation can scroll the page while opening quick view.
+
+Suggested fix: make the quick-view target a real link/button with no interactive descendants, or split the card into a non-interactive container with separate explicit swatch and quick-view controls. If Space opens quick view, prevent default before calling the handler.
+
+### P2/P3 - Builder feature cards nest external links inside buttons
+
+`src/components/builder/FeaturePicker.tsx:401-420` renders each add-on card as a `<button>`, but feature cards with docs links render an `<a>` inside that button at `src/components/builder/FeaturePicker.tsx:456-465`. `handleLinkClick` stops React propagation at `src/components/builder/FeaturePicker.tsx:383-385`, but it does not make nested interactive HTML valid or predictable for assistive technology.
+
+The custom builder controls repeat the same nested pattern for docs help links: `src/components/builder/CustomAddonDialog.tsx:211-238`, `src/components/builder/CustomTemplateDialog.tsx:211-234`, and `src/components/builder/CustomTemplateDialog.tsx:303-333` render router links inside buttons.
+
+Suggested fix: split the feature card into a non-interactive row with a dedicated checkbox/toggle button and a sibling external link, or render the whole card as a button only when there is no secondary action.
+
+### P2 - Product drawer cannot add some valid variants
+
+The product page initializes selected options to each option's first value at `src/routes/shop.products.$handle.tsx:59-61`, so a single-variant or single-option product can resolve an exact variant immediately through `src/routes/shop.products.$handle.tsx:418-424`.
+
+The quick-view drawer initializes every option to an empty string at `src/components/shop/ProductDrawer.tsx:400-402`, hides any option with one value at `src/components/shop/ProductDrawer.tsx:414-417` and `src/components/shop/ProductDrawer.tsx:516-518`, then requires an exact selected-option match at `src/components/shop/ProductDrawer.tsx:109-115` and `src/components/shop/ProductDrawer.tsx:412`. If a product has only one variant, or has a single-value option alongside a visible multi-value option, the hidden option remains empty and `selectedVariant` can stay undefined. The drawer can show a price from `variants[0]` at `src/components/shop/ProductDrawer.tsx:436` while keeping Add to Cart disabled at `src/components/shop/ProductDrawer.tsx:658-664`.
+
+Suggested fix: initialize drawer selections the same way as the product page for single-value options, or make `findExactVariant` treat single-value hidden options as preselected. Keep the "user must pick visible multi-value options" rule separate from variant resolution.
+
+### P3 - Cart optimistic updates rely on a module counter and a casted line shape
+
+`src/hooks/useCart.ts:35-55` tracks all cart mutations with a module-level `cartMutationsInFlight` counter. That is simple for a single browser QueryClient, but it is disconnected from QueryClient lifetime and can drift under HMR, tests, or future multi-client usage.
+
+`src/hooks/useCart.ts:136-159` builds an optimistic cart line and casts it to `CartLineDetail`, hiding whether the optimistic shape actually satisfies the storefront query type.
+
+Suggested fix: keep the “invalidate once idle” behavior, but scope the counter to a hook/controller instance or use React Query mutation cache state intentionally. Define an explicit optimistic cart-line construction helper that returns a typed shape without casts.
+
+### P3 - Product add-to-cart UI claims success before the mutation succeeds
+
+The product page opens the cart drawer and flips the button to the added state before the server mutation resolves: `src/routes/shop.products.$handle.tsx:347-379` sets `showAdded`, opens the drawer, and then calls `addToCart.mutate(...)`. `src/components/shop/ProductDrawer.tsx:625-681` follows the same pattern. `useAddToCart` does roll the cart cache back on mutation error at `src/hooks/useCart.ts:180-183`, but the local success state and opened drawer are not tied to `onSuccess`.
+
+This is mostly a correctness/UX issue, but it will be visible when Shopify rejects a quantity, variant, cart, or network request. Suggested fix: use `mutateAsync` or hook-level `onSuccess`/`onError` callbacks so the drawer/success affordance reflects server state, while still preserving an explicit optimistic cart line if that UX is intentional.
+
+### P3 - Product quick-view drawer is modal-like but not modal
+
+`src/components/shop/ProductDrawer.tsx:238-336` renders a blocking scrim and slide-over product drawer, listens for Escape at `src/components/shop/ProductDrawer.tsx:192-202`, and marks the drawer `aria-hidden` while closed, but the open surface is an `<aside aria-label="Product detail">` with no `role="dialog"`, no `aria-modal`, no initial focus, no focus trap, and no focus restoration. The cart drawer already uses Radix Dialog at `src/components/shop/CartDrawer.tsx:25-72`, so the product drawer has weaker modal semantics than the adjacent cart flow.
+
+The resize affordance has a similar semantic gap. `src/components/shop/ProductDrawer.tsx:272-280` uses `role="separator"` for a drag handle, but it is mouse-only and does not expose `aria-orientation`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, or keyboard resizing.
+
+Suggested fix: move product quick view onto the same Radix Dialog/sheet primitive as the cart drawer, and make the resize handle either a fully keyboard-operable separator or a visual-only mouse handle with a separate preset-width control.
+
+### P3 - Product page assumes Shopify products always have option values and variants
+
+`src/routes/shop.products.$handle.tsx:59-61` initializes selected options with `o.values[0]!`, so a malformed or unusual Shopify option with no values is treated as selected. The JSON-LD writer then assumes at least one variant: `src/routes/shop.products.$handle.tsx:434-468` builds `AggregateOffer` with `Math.min(...product.variants.nodes.map(...))`, `Math.max(...)`, and a first-variant currency fallback.
+
+Most Shopify products have a default variant, but this route is a public rendering boundary for external catalog data. A zero-variant or empty-option product would produce `Infinity`/`-Infinity` before JSON serialization, unstable selected-option state, and misleading product structured data.
+
+Suggested fix: normalize product details at the Storefront boundary. Require at least one purchasable/default variant before rendering the product route, filter empty option values, and make `ProductJsonLd` emit no offer or a clear unavailable offer when the normalized variant list is empty.
+
+### P2 - Public pagination schemas often have minimums but no maximums
+
+Examples:
+
+- `src/routes/showcase/index.tsx:8-15` and `src/utils/showcase.functions.ts:190-213`
+- `src/utils/showcase.functions.ts:218-248`
+- `src/utils/showcase.functions.ts:757-788`
+- `src/routes/feedback-leaderboard.tsx:7-13` and `src/utils/docFeedback.functions.ts:448-526`
+- `src/routes/stats/npm/index.tsx:57-86`
+
+This repeats across public and admin surfaces. Some routes only render UI-selected values, but server functions should enforce caps independently.
+
+Suggested fix: create shared `boundedPaginationSchema`, `boundedStringFilterSchema`, and `boundedUuidArraySchema` helpers and use them at the server-function boundary.
+
+### P2/P3 - Type casts hide route and schema drift
+
+The codebase has repeated `as any`, `as never`, and route-param enum casts where the right fix is usually a route/schema boundary. Representative examples:
+
+- `src/components/LibraryLayout.tsx:824`, `src/components/LibraryLayout.tsx:982`, and `src/components/LibraryLayout.tsx:1323`
+- `src/routes/libraries_.$framework.tsx:53`
+- `src/components/LibraryCard.tsx:12` with callers casting `LibrarySlim` to `Library` at `src/routes/libraries.tsx:91-114` and `src/routes/libraries_.$framework.tsx:141-144`
+- `src/components/LibraryCard.tsx:171-176`, where a CSS custom property is written through `as any` instead of a typed style object
+- `src/routes/index.tsx:184-193`, where `Object.entries(librariesByGroup)` loses the group/library relationship and the render path casts both values back
+- `src/components/FrameworkSelect.tsx:139-146`
+- `src/routes/maintainers.tsx:205-233`, where select values are cast instead of typed through ids/picklists, and `src/routes/maintainers.tsx:392-405`, where library ids are cast during filtering
+- `src/routes/partners.index.tsx:297-300`, where partner library strings are cast to `Library['id']` after the route search already has a library schema
+- `src/libraries/maintainers.ts:580-692`, where public maintainer helper APIs accept `libraryId: string` and repeatedly cast to `Library['id']`
+- `src/routes/workshops.tsx:50-55`, where filtering and slicing `allMaintainers` is cast back to `Maintainer[]` instead of preserving the inferred maintainer type or using a typed `workshopsAvailable` selector
+- `src/components/builder/store.ts:92`
+- `src/components/builder/BuilderProvider.tsx:31-48`
+- `src/components/builder/FeaturePicker.tsx:596`
+- `src/routes/_library/$libraryId/$version.docs.framework.$framework.index.tsx:17-42`
+- `src/routes/_library/$libraryId/$version.docs.community-resources.tsx:19-33`
+- `src/routes/_library/$libraryId/$version.docs.blog.tsx:27-29`
+- `src/libraries/react-charts.ts:3-12`, where an incomplete deprecated-library object is cast to `Library` even though required fields such as `borderStyle`, `repo`, `frameworks`, and version data are absent
+- `src/routes/blog.index.tsx:74`
+- `src/hooks/useCart.ts:159`
+- `src/routes/admin/users.tsx:289`
+- `src/components/ShowcaseDetail.tsx:218-315`, where `libraryMap.get(libId as LibraryId)` and `lib!` non-null assertions compensate for `filter(Boolean)` losing the library type
+- `src/routes/admin/showcases_.$id.tsx:229-231` and `src/routes/admin/showcases_.$id.tsx:697-703`, where `filter(Boolean)` is followed by `lib!`, plus `src/routes/admin/showcases_.$id.tsx:774-783`, where a select value is cast to `ShowcaseStatus`
+- `src/routes/admin/route.tsx:64` and `src/routes/admin/route.tsx:186-188`, where a details ref is initialized with `null!` and then passed through `as any`
+- `src/routes/intent/registry/index.tsx:174` and `src/routes/intent/registry/index.tsx:518`
+- `src/routes/_library/$libraryId/$version.tsx:18`
+- `src/routes/_library/$libraryId/index.tsx:7`
+- `src/routes/-library-landing.tsx:33-41`, where `version!` is used after fallback validation instead of carrying a narrowed route version value
+- `src/routes/_library/$libraryId/route.tsx:8-12`, where params are cast before the library id is validated
+- `src/routes/_library/$libraryId/$version.tsx:16-19`, `src/routes/_library/$libraryId/$version.tsx:32-35`, and `src/routes/_library/$libraryId/$version.tsx:52-54`, where route params and links are pushed through `as never` and `version!`
+- `src/routes/_library/$libraryId/$version.docs.framework.$framework.index.tsx:17` and `src/routes/_library/$libraryId/$version.docs.framework.$framework.index.tsx:42`, where framework params are cast instead of parsed once at the route boundary
+- `src/routes/intent/registry/$packageName.tsx:145-148`, where route params are cast loosely before decoding the package slug
+- `src/routes/intent/registry/$packageName.index.tsx:528-532`, where `prevVersionMap.get(entry.version)!` assumes a modified changelog entry always has an earlier version
+- `src/components/BottomCTA.tsx:25`
+- `src/utils/auth.server.ts:57`
+- `src/auth/repositories.server.ts:125`, `src/auth/repositories.server.ts:247-258`, and `src/auth/repositories.server.ts:296-305`
+- `src/utils/stats-admin.server.ts:27-28`
+- `src/components/npm-stats/npmQueryOptions.ts:76-92`, where public bulk stats results are mapped through `any` instead of a typed response schema from `fetchNpmDownloadsBulk`
+- `src/mcp/tools/npm-stats.ts:178-192`, where cached npm download results are mapped through `any` instead of a typed response schema from `fetchNpmDownloadsBulk`
+- `src/components/npm-stats/PackagePills.tsx:130-137`, where a Radix dropdown select event is cast through `unknown` to `React.MouseEvent` to reuse color-picker positioning
+- `src/hooks/useClickOutside.ts:55`
+- `src/utils/utils.ts:217`
+- `src/builder/api/compile.ts:116-121` and `src/builder/api/compile.ts:174-180`
+
+Several casts are compensating for TanStack Router params/search not being typed at the route boundary, or for validators accepting plain strings and narrowing later. A few are just local component type drift: `LibraryCard` only reads `LibrarySlim` fields, but requires the heavier `Library` type, forcing browse pages to cast. The deprecated `reactChartsProject` case is the inverse: a partial object is made to look complete through a cast rather than a smaller type or explicit deprecated-card contract.
+
+Suggested fix: add shared route-param/search schemas for libraries, framework, version, package, and feature ids; remove link `params as never` usages by using typed route helpers; and treat `as any` in server utilities as an audit failure unless isolated behind a parser.
+
+### P3 - Stack category library lookups fail open to the wrong product
+
+`src/components/stack/CategoryArticle.tsx:117-118`, `src/components/stack/CategoryArticle.tsx:270-273`, `src/components/stack/CategoryArticle.tsx:397-399`, `src/components/stack/CategoryArticle.tsx:612-613`, and `src/components/stack/CategoryArticle.tsx:780-783` all request specific library IDs from the current category library list. The helper at `src/components/stack/CategoryArticle.tsx:1134-1151` returns `libraries[0]` when the requested ID is missing.
+
+That fallback keeps the page rendering, but it can silently link a Start block to Router, or a Devtools block to Config, if `src/components/stack/stack-categories.ts:13-122` or the library grouping changes. These are static editorial invariants, so a wrong page is worse than an obvious development failure.
+
+Suggested fix: replace the fallback with `requireCategoryLibrary(slug, libraryId)` that throws a descriptive invariant error in development/build-time checks, or define each category page from a typed tuple of expected library IDs and derive the render data from that tuple.
+
+### P3 - Stack category related posts are not sorted across libraries
+
+`src/components/stack/CategoryArticle.tsx:78-82` builds category related posts by flattening each library's posts and then immediately slicing to four items. The UI labels the block as recent writing at `src/components/stack/CategoryArticle.tsx:940-945`, but the list is ordered by category library order first, not by `post.published` across all matched posts.
+
+That can make a category page show older posts from the first library while newer posts from later libraries are excluded.
+
+Suggested fix: sort the flattened list by parsed `post.published` descending before the slice, and keep invalid dates at the end.
+
+### P3 - Maintainer role helpers fail open to Contributor
+
+The maintainer helper APIs accept a plain `libraryId: string` and cast it before membership checks at `src/libraries/maintainers.ts:580-692`. `getRoleInLibrary` then returns `'Contributor'` as the default at `src/libraries/maintainers.ts:695-700` even when the person has no relationship to that library or the library id is invalid.
+
+`RoleBadge` trusts that helper directly at `src/components/MaintainerCard.tsx:12-50`, so any future caller that passes a mistyped library id or renders a maintainer outside the filtered contributor list can label the person as a contributor instead of showing no role or throwing an invariant.
+
+Suggested fix: type these helper parameters as `Library['id']`/`LibraryId`, parse route strings once at the boundary, and make `getRoleInLibrary` return `undefined` or a typed union without a contributor fallback when there is no matching role.
+
+### P3 - Public library catalog uses a one-off hidden-library filter
+
+`src/routes/api/data/libraries.ts:12-30` exposes machine-readable library metadata by filtering `libraries` to `lib.to && lib.id !== 'mcp'`. The source data already has a visibility flag: `mcp` is hidden at `src/libraries/libraries.ts:791`, and `workflow` is also hidden at `src/libraries/libraries.ts:854`. Because the API hard-codes only `mcp`, `workflow` is still included in `/api/data/libraries` whenever it has a `to` value.
+
+The showcase submit form has another one-off selector at `src/components/ShowcaseSubmitForm.tsx:20-24`: it keeps any library with a name and excludes only `react-charts` and `create-tsrouter-app`. The showcase gallery filter uses a third selector at `src/components/ShowcaseTopBarFilters.tsx:22-31`: it applies `visible !== false` but then slices to the first 10 libraries. These selectors can drift from the public catalog and from hidden-library intent in different ways.
+
+Suggested fix: centralize a `getPublicLibraries()` or `isPublicLibrary()` helper that applies `visible !== false`, route availability, sitemap inclusion, and any machine-readable catalog rules once, then reuse it in navigation, sitemaps, data APIs, partner/category pages, and LLM indexes.
+
+### P3 - Partner detail pages hardcode volatile claims as code
+
+`src/routes/partners.railway.tsx:32-39` defines campaign URLs, `src/routes/partners.railway.tsx:58-252` hardcodes feature, pricing, capacity, testimonial, and FAQ claims, and `src/routes/partners.railway.tsx:429-443`, `src/routes/partners.railway.tsx:584-658`, `src/routes/partners.railway.tsx:661-703`, and `src/routes/partners.railway.tsx:747-760` render those claims directly.
+
+That is fine for a short-lived campaign page, but pricing, resource limits, log retention, credits, customer quotes, and "faster/cheaper" claims are time-sensitive. Keeping them as route constants makes drift harder to audit and impossible to validate separately from code review.
+
+Suggested fix: move volatile partner-page facts into typed partner content data with source URL, last-verified date, and optional expiry/review date. Add a small validation check that flags expired partner claims during content audits.
+
+### P3 - Partner rotation analytics sends high-cardinality session seeds
+
+`src/routes/__root.tsx:156-158` creates a random `partnerPlacementSessionSeed` for the root loader. `src/utils/usePartnerPlacementContext.ts:20-34` turns that into a surface-scoped rotation seed, `src/utils/partner-placement.ts:76-80` preserves the raw seed in the surface string, and `src/utils/partner-placement.ts:331-339` includes it in partner analytics metadata.
+
+That metadata is spread into impression and click events in surfaces such as `src/components/RightRail.tsx:213-253`, and the event schema allows `rotation_seed` at `src/utils/analytics/events.ts:81-103`. This makes every session/surface produce a mostly unique analytics value. It can help reproduce ordering, but it is high-cardinality data and can act like a session-level identifier in GA4 exports.
+
+Suggested fix: do not send the raw rotation seed to analytics. Send a bounded bucket/cohort id, an algorithm version, and the visible `slot_index`/tier data instead. If exact seed replay is needed, keep it dev-only or behind an internal debug channel.
+
+### P3 - Workshop instructor rotation turns a static page into request-time work
+
+`src/routes/workshops.tsx:23-29` exposes a server function solely to return a 10-second seed. The route sets `staleTime: 0` and calls it in the loader at `src/routes/workshops.tsx:31-36`, then uses that seed to shuffle/slice instructors at `src/routes/workshops.tsx:47-55`.
+
+That makes a mostly static marketing page refetch on every navigation and creates cache churn for cosmetic ordering. Use a build/static order, a daily seed, or a client-only shuffle after hydration if freshness matters.
+
+### P2/P3 - Dynamic Tailwind color tokens are being modified as strings
+
+Library and framework color tokens are stored as Tailwind class strings. That is fine when the exact token is rendered, but several components append opacity or hover variants dynamically:
+
+- `src/routes/maintainers.tsx:256-266` and `src/routes/maintainers.tsx:285-290`
+- `src/routes/partners.index.tsx:238-248`
+- `src/components/MaintainerCard.tsx:53-59`
+- `src/components/MaintainerCard.tsx:93-103`
+
+Some `library.bgStyle` values contain multiple classes, for example `bg-black dark:bg-gray-100` at `src/libraries/libraries.ts:459-464`, `src/libraries/libraries.ts:698-704`, and nearby library definitions. Appending `/40` to the whole string produces invalid fragments like `bg-black dark:bg-gray-100/40`, and dynamic strings such as `hover:${bgStyle}/40` are fragile for Tailwind extraction.
+
+Suggested fix: stop treating Tailwind class strings as composable color values. Store structured tokens (`base`, `muted`, `hover`, `textOnColor`, `darkBase`) or CSS variables, and expose a `getLibraryColorClasses(library, variant)` helper used by maintainers, partners, blog badges, library cards, and future filter chips.
+
+### P2 - MCP rate-limit uniqueness ignores identifier type
+
+`src/db/schema.ts:951-975` defines `mcpRateLimits` with `identifierType`, but the unique index at `src/db/schema.ts:968-970` only covers `(identifier, windowStart)`. `src/mcp/auth.server.ts:175-188`, `src/mcp/auth.server.ts:227-240`, and `src/utils/rateLimit.server.ts:131-145` all use the same conflict target.
+
+If two identifier spaces ever collide, they share a bucket. This is unlikely for UUID-style ids, but it is a schema mismatch.
+
+The cleanup policy also assumes all buckets are short. `cleanupRateLimits` deletes rows where `windowStart` is older than two hours at `src/mcp/auth.server.ts:253-258`, but `checkIpWindowRateLimit` supports arbitrary windows and `RATE_LIMITS.applicationStarterAnonymousDaily` uses a 24-hour window at `src/utils/rateLimit.server.ts:119-183`. If the anonymous daily limit is lowered from its current placeholder value, a random MCP cleanup after the first two hours of the day can reset the daily bucket.
+
+Suggested fix: make `(identifierType, identifier, windowStart)` the unique key and conflict target. Cleanup should delete rows based on each bucket's reset time or use separate tables/helpers for minute, hour, and day limits.
+
+### P2/P3 - MCP API keys need lifecycle caps and lower write amplification
+
+`src/utils/mcpApiKeys.functions.ts:51-106` caps active keys at 10, but it only counts active keys at `src/utils/mcpApiKeys.functions.ts:65-75`. A user can create and revoke keys repeatedly, leaving unbounded inactive rows that `listMcpApiKeys` returns all at `src/utils/mcpApiKeys.functions.ts:19-44`.
+
+`expiresInDays` only has `minValue(1)` at `src/utils/mcpApiKeys.functions.ts:59`, so very large values can create far-future or invalid dates at `src/utils/mcpApiKeys.functions.ts:79-81`.
+
+`src/mcp/auth.server.ts:137-141` updates `lastUsedAt` on every successful API-key request. At high request rates, that becomes one DB write per authenticated MCP request, separate from rate-limit writes.
+
+Suggested fix:
+
+- Cap total keys per user, not only active keys, or prune inactive/deleted keys.
+- Add a max expiration duration and validate the computed date.
+- Throttle `lastUsedAt` updates, for example only update if older than N minutes, or move usage tracking to an aggregate table/job.
+
+### P2/P3 - Generic utility helpers are easy to misuse
+
+`src/utils/utils.ts:96-105` computes `const random = Math.random()` once, then reuses it for every Fisher-Yates iteration. Each swap should draw a fresh random value.
+
+The biased `shuffle` helper appears unused right now, while `shuffleWithSeed` is used by workshops. A couple of other generic helpers are similarly sharp-edged: `generatePath` at `src/utils/utils.ts:30-40` uses non-null assertions and can substitute `undefined` into routes when a param is missing, and `sample` at `src/utils/utils.ts:114-116` returns an unchecked value for empty arrays.
+
+Suggested fix: compute `Math.random()` inside the loop, or accept an injectable `random` callback like `sample` does. Either delete unused helpers or make them fail explicitly on missing params and empty arrays before they are reused in new code.
+
+### P2 - Docs feedback portals mutate DOM during render and do not clean up fully
+
+`src/components/DocFeedbackProvider.tsx:84-193` scans rendered docs blocks, starts async identifier work, then sets several maps in a `.then()` without a cancellation guard. If the provider unmounts or `children` changes before the promise resolves, stale block maps can be installed after cleanup.
+
+The portal helpers also mutate DOM during render:
+
+- `src/components/DocFeedbackProvider.tsx:396-415`
+- `src/components/DocFeedbackProvider.tsx:457-471`
+- `src/components/DocFeedbackProvider.tsx:519-533`
+
+They create portal containers under markdown blocks and sometimes set `block.style.position = 'relative'`, but cleanup only clears background, border, padding, and mouse listeners at `src/components/DocFeedbackProvider.tsx:178-191`. Portal nodes and the original `position` value are not restored. The indicator effect at `src/components/DocFeedbackProvider.tsx:196-221` also returns early when there is no user, so styles from a previous authenticated state can remain visible after logout/user switch.
+
+Suggested fix:
+
+- Extract a `useReferenceableBlocks` hook with cancellation and deterministic cleanup.
+- Avoid DOM mutation during render; create/remove portal roots in effects.
+- Restore every inline style value that the feature changes, or switch to data attributes/CSS classes.
+- Consider one overlay root outside the markdown tree instead of per-block containers.
+
+### P2/P3 - Docs feedback server functions need input budgets and SQL aggregation
+
+`src/utils/docFeedback.functions.ts:26-55` accepts feedback content, page paths, library ids, selectors, content hashes, and block markdown with no length caps. The list endpoints accept pagination values with no minimum or maximum at `src/utils/docFeedback.functions.ts:228-242`, `src/utils/docFeedback.functions.ts:311-329`, and `src/utils/docFeedback.functions.ts:448-456`, then use `limit(pageSize)` and `(page - 1) * pageSize` directly.
+
+The public leaderboard is also an all-table read: `src/utils/docFeedback.functions.ts:460-515` selects every approved feedback row, aggregates points in JavaScript, sorts in memory, then slices the requested page. User totals and stats repeat per-user JS aggregation at `src/utils/docFeedback.server.ts:49-68` and `src/utils/docFeedback.server.ts:73-109`.
+
+`markFeedbackDetached` accepts an unbounded id array at `src/utils/docFeedback.functions.ts:622-638`, and moderation date filters convert arbitrary strings to `Date` without rejecting invalid values at `src/utils/docFeedback.functions.ts:364-371`.
+
+Suggested fix: create shared doc-feedback schemas with capped content/path/selector lengths, bounded arrays, and clamped pagination. Move leaderboard/user point aggregation into SQL or a materialized summary table, and reject invalid date filters before they reach Drizzle.
+
+### P2/P3 - Doc feedback edit state can drift from query data
+
+`src/components/DocFeedbackNote.tsx:45-51` initializes editable `content` from `note.content` once, then compares that local state against the latest prop. If the same note id receives fresh query data after a refetch, moderation change, rollback, or cross-tab edit, the textarea can keep showing stale local text and `hasChanges` can be computed against a newer prop value.
+
+The component also manually mirrors the same optimistic cache update shape three times for delete, content update, and collapse state at `src/components/DocFeedbackNote.tsx:89-279`, across both `userFeedback` and `feedback` cache envelopes.
+
+Suggested fix: resync local content when `note.id` or `note.content` changes unless the user has a pending local edit, and extract one small cache-update helper for doc feedback envelopes.
+
+### P3 - Doc feedback block identity utilities are duplicated
+
+`src/utils/docFeedback.ts:11-173` and `src/utils/docFeedback.client.ts:21-250` implement the same selector generation, content hashing, referenceable-block search, selector lookup, and scroll helpers. The live imports use `src/utils/docFeedback.ts` from `src/components/BlockWithFeedback.tsx:6` and `src/components/DocFeedbackProvider.tsx:11-14`; no source import currently points at `src/utils/docFeedback.client.ts`.
+
+The two files already drift in names and surface area: one exports `scrollToElement`, the other exports `scrollToBlock` plus `highlightBlock`. Any future fix to block selector stability, portal exclusion, or hash behavior can easily land in one copy and miss the other.
+
+Suggested fix: delete the unused duplicate or make `docFeedback.client.ts` re-export the canonical implementation. Keep browser-only helpers in one file with explicit tests for generated selectors and detached-block lookup.
+
+### P3 - Moderator notifications are fire-and-forget request work
+
+New docs feedback calls `notifyModerators(...)` without awaiting it at `src/utils/docFeedback.functions.ts:94-110`. Showcase creation does the same at `src/utils/showcase.server.ts:271-287`.
+
+`notifyModerators` ultimately awaits Discord webhook calls through `src/utils/email.server.ts:46-58` and `src/utils/discord.server.ts:30-60`. Those helpers catch errors, so this is not an unhandled-rejection bug, but in Worker-style runtimes a fire-and-forget promise can be dropped once the request finishes unless it is awaited or registered with the runtime execution context.
+
+Suggested fix: either await moderator notifications after the DB/audit write, or introduce a `runAfterResponse`/queue helper that uses the runtime's background task primitive and centralizes notification retry/log policy.
+
+### P2 - Docs sidebar leave timer can fire after unmount
+
+`src/components/LibraryLayout.tsx:1184-1196` stores the large-menu leave timeout in a ref, and `src/components/LibraryLayout.tsx:1238-1247` schedules it on pointer leave. There is no unmount cleanup for the pending timeout.
+
+This is minor, but it can call `setShowLargeMenu(false)` after navigation/unmount and is easy to prevent.
+
+Suggested fix: use `React.useRef<ReturnType<typeof setTimeout> | undefined>()` and add an effect cleanup that clears `leaveTimer.current`.
+
+### P2 - Local storage access is duplicated and not consistently guarded
+
+`src/utils/useLocalStorage.ts:55-63` writes to `localStorage` in an effect without catching quota/privacy-mode failures. `src/components/SearchModal.tsx:249-269` reads/writes the AI dock width directly, and `src/components/SearchModal.tsx:3372-3382` reads/writes the full-height preference directly.
+
+Other code in `SearchModal` already guards Kapa history storage with `try/catch`, so the project has both safe and unsafe local-storage patterns.
+
+`src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx:256-317` repeats direct `localStorage` access for the examples view preference. `src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx:266-269` also has an inverted guard: it calls `localStorage.setItem` only when `typeof window === 'undefined'`.
+
+More duplicated storage paths:
+
+- `src/components/FrameworkSelect.tsx:50-62` initializes a Zustand store from `localStorage` and writes directly.
+- `src/components/FrameworkSelect.tsx:68-71` exposes a separate direct read helper.
+- `src/components/VersionSelect.tsx:27-39` repeats the same pattern for docs version.
+- `src/hooks/useAdPreference.ts:8-40` reads/writes without catch.
+- `src/components/DefaultCatchBoundary.tsx:34-44` reads/writes `sessionStorage` during chunk-error recovery without guarding storage failures.
+- `src/components/CopyPageDropdown.tsx:126-131` reads the package-manager preference directly during render.
+- `src/components/shop/ProductDrawer.tsx:139-143`, `src/components/shop/ProductDrawer.tsx:223-228`, and `src/components/shop/ProductDrawer.tsx:278` read/write drawer width directly.
+
+`src/components/markdown/usePersistedEnumStore.ts:23-66` is the best local pattern: deferred hydration, enum validation, and `try/catch` for storage failures.
+
+Suggested fix: create a small `safeLocalStorage` helper for `getString`, `setString`, `getJson`, and `setJson`, or generalize `createPersistedEnumStore`, then use it in `useLocalStorage`, framework/version preferences, search preferences, Kapa history, theme/layout preferences, shop drawer width, and game persistence.
+
+### P2/P3 - Docs examples tab state can become a persistent blank view
+
+The examples route accepts `panel` as any string at `src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx:63-66`, then reads either the search value or `localStorage.exampleViewPreference` at `src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx:256-264`. That value is cast to `CodeExplorer`'s `'code' | 'sandbox'` union at `src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx:432-443`.
+
+`CodeExplorer` only renders the code pane when `activeTab === 'code'` and only activates the sandbox when `activeTab === 'sandbox'` at `src/components/CodeExplorer.tsx:80-117`. A URL like `?panel=foo`, or a bad stored value, leaves both panes inactive. The effect at `src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx:314-317` then writes that invalid tab value back to local storage, making the blank state sticky.
+
+The same route validates `path` only as `v.string()` at `src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx:63-65`; the downstream `fetchFile`/`fetchRepoDirectoryContents` server functions validate repo paths through `repoPathSchema` at `src/utils/docs.functions.ts:66-82`, but the route can reject or normalize earlier with the same helper.
+
+Suggested fix: make `panel` a picklist of `['code', 'sandbox']`, validate persisted tab values before use, clear invalid stored values, and share the existing `isValidRepoPath`/`MAX_REPO_PATH_LENGTH` schema for example `path` search params.
+
+### P2/P3 - Markdown tabs can render no active panel after route or content changes
+
+`src/components/markdown/Tabs.tsx:33-41` initializes uncontrolled `internalActiveSlug` from `params.framework` or the first tab only once. When markdown content changes in the same component position, or the framework route param changes without remounting the tab component, the old slug can stop matching the new `tabsProp`; `src/components/markdown/Tabs.tsx:71-91` then renders every panel as hidden.
+
+`src/components/markdown/FileTabs.tsx:13-17` has the same one-time first-tab initialization. The controlled package-manager path has a related edge: `src/components/markdown/PackageManagerTabs.tsx:83-105` uses the persisted package manager whenever it is a valid global package-manager id, but it does not verify that the current markdown block actually has a panel for that manager. If the stored value is `bun` and a block only includes `npm`/`pnpm`, no panel is active.
+
+Suggested fix: derive `resolvedActiveSlug = tabs.some(...) ? active : tabs[0]?.slug` in the shared `Tabs` primitive, and reset uncontrolled state when the tab list or route framework changes. Apply the same fallback in `FileTabs` and `PackageManagerTabs`.
+
+### P2 - Shared filter search can ignore external resets
+
+`src/components/FilterComponents.tsx:565-571` selects `{ isPending: state.isPending }` from `useDebouncer`, but aliases the whole selected object as `isPending`. The sync effect at `src/components/FilterComponents.tsx:573-585` then treats that object as a boolean, so the "pending" branch is always truthy and local input state can remain authoritative even after the parent clears filters or replaces `value`.
+
+This component is shared across admin and moderation filter bars (`src/components/UsersTopBarFilters.tsx`, `src/components/RolesTopBarFilters.tsx`, `src/components/AuditTopBarFilters.tsx`, `src/components/FeedbackModerationTopBar.tsx`, `src/components/ShowcaseModerationTopBar.tsx`, `src/components/NotesModerationTopBar.tsx`, and `src/components/LoginsTopBarFilters.tsx`), so reset buttons and URL-driven filter state can drift from the visible search box.
+
+Suggested fix: destructure the selected state (`const { state: { isPending }, maybeExecute } = useDebouncer(...)`), or select the boolean directly if the hook supports it. Add a small component test that types a search, clears all filters, and verifies the input value resets.
+
+### P3 - Intent registry search input does not resync from URL changes
+
+`src/routes/intent/registry/index.tsx:67-76` drives queries from route search, but the visible search box is initialized once from `q` at `src/routes/intent/registry/index.tsx:98`. The debounce effect at `src/routes/intent/registry/index.tsx:100-108` only pushes local input into the URL; there is no effect that updates `searchInput` when `q` changes because of back/forward navigation, shared links, tab changes, or loader redirects.
+
+That can leave the page showing results for one URL query while the input displays another value, and the next keystroke can overwrite the URL from stale local state.
+
+Suggested fix: use a shared debounced route-input controller that tracks whether the local edit is pending, syncs local state when the route value changes externally, and cancels pending writes on unmount/navigation. A small regression test should cover typing, navigating back, and verifying the input matches the URL.
+
+### P2/P3 - Clipboard and copied-state helpers are duplicated
+
+There are multiple copy implementations with different failure behavior and timer cleanup:
+
+- `src/components/application-builder/useApplicationBuilder.tsx:415-445` has no clipboard fallback or local error path.
+- `src/components/SearchModal.tsx:1227-1248` cleans up its timer but does not handle clipboard rejection.
+- `src/components/SearchModal.tsx:1382-1398` repeats a copy flash timer without cleanup even though the nearby chat-copy path does clean up.
+- `src/components/SearchModal.tsx:1735-1739` and `src/components/SearchModal.tsx:2090-2092` write message text without catching clipboard failures.
+- `src/routes/brand-guide.tsx:88-147` repeats URL/SVG copy logic and fetches SVG text without sharing the stronger fallback helper.
+- `src/components/CopyPageDropdown.tsx:143-210` repeats clipboard writes and untracked copied-state timers.
+- `src/components/markdown/CodeBlockView.tsx:48-50` writes to clipboard and schedules an untracked copied-state timer.
+- `src/routes/account/integrations.tsx:130-135` writes the newly created API key with no clipboard fallback and an untracked copied-state timer.
+- `src/routes/intent/registry/$packageName.tsx:311-327` repeats the same untracked copied-state timer for install prompts.
+- `src/components/CopyMarkdownButton.tsx:4-29` has a reusable copied-state hook with cleanup.
+- `src/components/landing/LandingCopyPromptButton.tsx:71-103` has the strongest clipboard fallback.
+- `src/components/BrandContextMenu.tsx:33-55` has user-visible copy failure handling.
+
+Suggested fix: keep one `copyTextToClipboard` helper and one `useCopiedState`/`useCopyButton` helper. Reuse them for docs markdown, brand assets, search/AI, builder, and landing copy buttons.
+
+### P3 - CopyPageDropdown keeps an unbounded client markdown cache
+
+`src/components/CopyPageDropdown.tsx:86-87` defines a module-scope `Map<string, string>`, and `src/components/CopyPageDropdown.tsx:156-183` fetches full markdown responses into it without TTL, max entries, byte limits, or cancellation. In a long-lived SPA session, copying docs or Intent skill pages can retain every fetched markdown body until reload.
+
+The route targeting is intentional: docs pages pass repo/branch/path through `src/components/markdown/MarkdownContent.tsx:120-128`, and Intent skill pages use the current `.md` splat endpoint from `src/routes/intent/registry/$packageName.{$}[.]md.tsx:5-34`. The concern is memory and fetch hygiene, not route correctness.
+
+Suggested fix: use a tiny LRU/TTL cache for copied markdown, add an `AbortController` for repeated clicks/unmount, and share the clipboard/fetch/cached-copy path with the copied-state helper above.
+
+### P3 - Programmatic tab openings bypass the safer link pattern
+
+Anchor links mostly include `rel="noopener noreferrer"` when they use `target="_blank"`, but programmatic opens do not have the same shared wrapper:
+
+- `src/components/CopyPageDropdown.tsx:212-249` opens markdown, Claude, ChatGPT, Cursor, and T3 Chat URLs with `window.open(..., '_blank')` and no feature string.
+- `src/components/game/engine/GameEngine.ts:850-856` opens partner, showcase, and library island clicks the same way.
+- `src/components/game/ui/BadgeOverlay.tsx:221-230`, `src/components/game/ui/UpgradeOverlay.tsx:181-190`, and `src/components/game/ui/WinOverlay.tsx:151-160` repeat the same pattern for share links.
+- `src/auth/client.ts:38-47` opens the OAuth popup without checking whether the popup was blocked.
+- `src/components/application-builder/useApplicationBuilder.tsx:855-875` already passes `noopener,noreferrer` for Claude and Cursor opens, which is the stronger local pattern.
+
+Suggested fix: add a small `openExternalWindow`/`openPopupWindow` helper that applies `noopener,noreferrer` for new tabs, has an explicit popup mode for OAuth, returns `null` on blocked popups, and centralizes custom-scheme exceptions.
+
+### P3 - Animated landing demos use inconsistent reduced-motion policy
+
+`src/utils/usePrefersReducedMotion.ts:7-27` is used by `src/components/landing/QueryLanding.tsx:416-501` and `src/components/landing/VirtualLanding.tsx:542-646` to avoid starting automatic animation when users prefer reduced motion.
+
+`src/components/landing/AiLanding.tsx:415-427` still starts rotating client/provider intervals unconditionally, and `src/components/landing/AiLanding.tsx:429-541` runs a looping typewriter/streaming chat sequence through chained timeouts. The home-page framework graph has the same split policy: `src/routes/index.tsx:639-660` disables flow animation for reduced motion, but `src/routes/index.tsx:629-637` keeps rotating the active adapter every 1.15 seconds. The timers clean up on unmount, but the animation policy differs from the other landing demos and keeps doing work for reduced-motion users.
+
+`src/routes/workshops.tsx:433-539` defines an infinite testimonial marquee with inline keyframes and `animate-[testimonials_linear_infinite]`, but has no reduced-motion branch or pause/static alternative. `src/components/LibraryTestimonials.tsx:12-47` repeats that pattern with a per-mount global `<style>` block and an infinite marquee.
+
+`src/components/landing/AiLanding.tsx:429-540` also stores every timeout id in a `timeouts` array but never removes fired ids while the recursive demo keeps looping. A long-lived tab will retain every historical timeout handle until the component unmounts.
+
+Suggested fix: extract a small `useLandingDemoEnabled` or `useReducedMotionGate` helper that returns `false` until the preference is known, disables auto-play when reduced motion is requested, and can later include page visibility checks for nonessential demo animations.
+
+### P3 - Product landing demos hand-roll the product primitives they advertise
+
+Several product landing demos recreate the advertised library behavior with local React state, timers, manual DOM events, or native controls. That keeps the route chunks lighter, but it also creates API drift risk because the demo can keep working even when the product API or recommended pattern changes.
+
+Examples:
+
+- `src/components/landing/FormLanding.tsx:386-398` models fields, validation, dirty state, and submit readiness with local `useState` and inline booleans instead of TanStack Form.
+- `src/components/landing/StoreLanding.tsx:339-344` models a store demo with local `useState` instead of TanStack Store.
+- `src/components/landing/PacerLanding.tsx:351-373` implements debounce with raw `setTimeout` instead of Pacer.
+- `src/components/landing/HotkeysLanding.tsx:302-334` installs a manual `window.addEventListener('keydown')` demo listener while `src/components/landing/HotkeysShortcut.client.tsx:7-11` separately uses `useHotkey` for a hidden page shortcut.
+- `src/components/landing/RangerLanding.tsx:261-335` renders native range inputs and custom constraint math, while the visible code sample at `src/components/landing/RangerLanding.tsx:341-350` says `useRanger(...)`.
+
+Suggested fix: choose one policy per page. If the hero panels are intentionally illustrative mocks, isolate them behind a shared `LandingDemoMock` naming/pattern so they are not mistaken for product examples. If they should demonstrate current APIs, lazy-load the actual library-backed demo behind a small shared landing demo harness with reduced-motion and cleanup policy built in.
+
+### P2/P3 - Drag/resize listeners are not consistently owned by effects
+
+`src/components/npm-stats/Resizable.tsx:26-54` attaches document `mousemove`/`mouseup` listeners inside `handleMouseDown`, but the effect cleanup only removes the `mousedown` listener from the drag element. If the component unmounts while dragging, the document listeners are not reachable for cleanup until a later mouseup.
+
+`src/components/SearchModal.tsx:3588-3633` does similar pointer listener setup for the AI dock resize path. It restores `document.body.style.cursor` and `userSelect` in `stopResizing`, but an unmount during an active drag can leave cleanup dependent on a later pointer terminal event.
+
+Other resize/drag paths, such as `src/components/FileExplorer.tsx:154-191` and `src/components/shop/ProductDrawer.tsx:212-235`, keep document listeners inside an effect keyed on dragging state and clean them up on unmount.
+
+Suggested fix: extract `useDragResize` or move npm-stats/search resize tracking to the same `isDragging` effect-owned pattern used elsewhere.
+
+### P2/P3 - Kapa AI submits are not abortable before the network request starts
+
+`src/components/SearchModal.tsx:271-333` waits up to eight seconds for reCAPTCHA through internal timeout/interval state, but the promise is not cancellable. `KapaChatPanel` starts that wait and then calls `submitQuery(trimmed)` at `src/components/SearchModal.tsx:1865-1884`; its cleanup only aborts the active Kapa request later through `apiService.abortCurrent()` at `src/components/SearchModal.tsx:2297-2300`.
+
+If the modal or dock unmounts while waiting for reCAPTCHA, the pending promise can still call the stale `submitQuery` function. That can produce ignored requests, state updates after unmount inside the SDK, or a chat request that starts after the user has closed the surface.
+
+Suggested fix: make `waitForKapaRecaptchaReady` accept an `AbortSignal`, abort pending waits on unmount/new-chat/reset, and check the signal before `submitQuery`.
+
+### P3 - AI dock close semantics do not distinguish hover-open from click-open
+
+`AiDockButton` tracks whether the dock was opened by hovering the button at `src/components/SearchButton.tsx:70-82`, and click handling treats that as a special case at `src/components/SearchButton.tsx:97-108`. Once the panel itself is open, however, `AiDock` schedules a hover close on every non-touch pointer leave at `src/components/SearchModal.tsx:3677-3694`, regardless of whether the panel was opened by hover, click, or an "Ask AI" search result.
+
+That makes a button advertised as an open/close panel behave like a temporary hovercard once the pointer leaves the dock. It is especially easy to hit while reading a longer chat answer or moving to another part of the page.
+
+Suggested fix: model dock open reason explicitly (`hover-preview`, `pinned`, `ask-request`) and only auto-close hover previews. A pinned/click-open dock should stay open until the user clicks the button, closes it, navigates, or an explicit Escape/outside policy runs.
+
+### P3 - FileExplorer expanded folders only initialize once
+
+`src/components/FileExplorer.tsx:105-139` derives `expandedFolders` from `githubContents` and `currentPath` only in the `useState` initializer. If the same `FileExplorer` instance stays mounted while the example path or GitHub tree changes, ancestors for the new current file are not auto-opened.
+
+Suggested fix: move ancestor expansion into an effect keyed by `githubContents` and `currentPath`, or derive the "must be open" ancestor set separately and merge it with user-toggled state.
+
+### P2/P3 - PlotContainer redraws synchronously on every resize
+
+`src/components/charts/PlotContainer.tsx:24-54` removes and recreates the Observable Plot node on every `ResizeObserver` callback. There is no `requestAnimationFrame` coalescing, no try/catch around `options(width)`/`Plot.plot`, and no stale render guard. A resize storm in stats or Intent charts can repeatedly allocate SVG nodes and run chart transforms synchronously.
+
+The wrapper also starts with `ready = false` at `src/components/charts/PlotContainer.tsx:22`, sets it true only after a successful append at `src/components/charts/PlotContainer.tsx:39-42`, and never resets it when width becomes zero or a later render fails. That can leave either a permanent skeleton for initially hidden charts or a blank-but-"ready" chart after a later hidden/failed render.
+
+Callers include `src/components/charts/TimeSeriesChart.tsx:25-54` and `src/components/intent/SkillSparkline.tsx:185-191`.
+
+Suggested fix: wrap Plot rendering in a small `useObservablePlot` hook that batches ResizeObserver updates with `requestAnimationFrame`, records render errors, resets ready/error state on zero-width renders, and always removes the previous plot in effect cleanup.
+
+### P2/P3 - Upload clients rely on server limits after expensive client reads
+
+`src/server/uploadthing.ts:8-56` correctly requires auth and sets server-side image size/count limits. The client wrappers still have some stability gaps:
+
+- `src/components/account/AccountProfilePictureSection.client.tsx:60-69` reads the selected file into a data URL before checking file type or size.
+- `src/components/AvatarCropModal.tsx:85-98` starts async image decode/canvas work and then calls `setIsProcessing(false)` in `finally`; closing the modal through `src/components/account/AccountProfilePictureSection.client.tsx:201-210` clears `selectedImage` and unmounts the cropper while that work can still be pending.
+- `src/components/account/AccountProfilePictureSection.client.tsx:73-77` and `src/components/ImageUpload.client.tsx:53-68` await `startUpload` without local `try/catch`; if the upload promise rejects outside the callback path, loading state can stick.
+- `src/components/ImageUpload.client.tsx:53-68` only checks MIME type client-side and relies on the server for size.
+- `src/utils/uploadthing.types.ts:1` exports `UploadRouter = any`, so the generated `useUploadThing`, `UploadButton`, and `UploadDropzone` helpers lose endpoint and file-shape types even though `src/server/uploadthing.ts:57-59` has the real router type.
+
+Suggested fix: add a shared image-upload client helper that checks type and size before preview/crop/upload, handles `FileReader.onerror`, wraps `startUpload` in `try/finally`, and guards async crop completion after unmount/close. Replace `UploadRouter = any` with an erased type-only import from the server router or a generated route type.
+
+### P3 - Image transform options are not clamped
+
+`src/utils/optimizedImage.ts:62-82` passes numeric `width`, `height`, and `quality` directly into Cloudflare image transform params after `Math.round`. `MarkdownImg` can feed markdown-provided dimensions through `src/ui/MarkdownImg.tsx:16-52`, and `OptimizedImage` exposes the same options to all callers at `src/components/OptimizedImage.tsx:15-30`.
+
+Trusted app code mostly passes sane values, but a markdown image with huge, negative, or low-quality dimensions can generate invalid or wasteful transform URLs. Clamp width/height/quality in `createCloudflareTransformOptions`, and reject non-positive values before adding params.
+
+### P3 - Host cache purge lacks response policy
+
+`src/server/runtime/host.server.ts:142-162` posts to Cloudflare cache purge with no timeout and returns the raw fetch response. This should use the same outbound fetch helper recommended elsewhere, with status checking and a bounded timeout.
+
+### P3 - Shared cache helper has a misleading production default TTL
+
+`src/utils/cache.server.ts:3-14` creates a global `LRUCache<string, any>` and sets the default TTL to `1` in production. `lru-cache` TTL values are milliseconds, so the default production TTL is effectively one millisecond. Most `fetchCached` callers pass an explicit TTL, but the helper default is surprising and easy to misuse.
+
+Suggested fix: make TTL required at construction/call sites, or choose a named constant with units in the identifier such as `DEFAULT_DOC_CACHE_TTL_MS`.
+
+### P3 - Database context proxy is fragile outside the request wrapper
+
+`src/db/client.ts:45-76` uses an AsyncLocalStorage-backed lazy proxy, and `src/server.ts:119-163` wraps normal requests in `runWithDatabaseContext`. Scheduled work is wrapped at `src/server.ts:179-182`. That looks safe for normal traffic.
+
+The footgun is `src/db/client.ts:65-67`: if code calls `getDb()` outside the request/scheduled context in an isolate runtime, a fresh client can be created for that property access and is not stored or closed. Keep this proxy, but add a dev assertion or explicit background-task wrapper for any non-request entrypoint.
+
+### P3 - Environment config has two sources of truth
+
+`src/utils/env.ts:3-58` defines typed Valibot schemas and a proxy that hides server-only env values from client code. `src/utils/env.functions.ts:1-28` separately reads `import.meta.env`/`process.env`, hard-codes a GitHub token default, and only includes a subset of server variables.
+
+The split already shows up in mixed usage: `src/utils/stats.functions.ts:6-20`, `src/utils/stats.server.ts:40`, and `src/routes/api/application-starter/resolve.ts:9-16` use `envFunctions`, while auth, MCP, Discord, Shopify, email, crypto, and Sentry use `env`. New env vars can be added to one surface and silently missed by the other.
+
+Suggested fix: make one typed env reader with runtime adapters for app/server-function/worker contexts, and derive any public/client-safe object from that source instead of maintaining `env` and `envFunctions` by hand.
+
+### P3 - Response filenames are hand-built in several routes
+
+`src/routes/api/builder/download.ts:84-88` uses raw `name` inside both `zip.folder(name)` and `Content-Disposition`. The builder finding above covers the higher-risk project-name path.
+
+The docs markdown routes also build inline filenames from route splats:
+
+- `src/routes/_library/$libraryId/$version.docs.{$}[.]md.tsx:51-58`
+- `src/routes/_library/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx:53-60`
+
+Those splats are constrained by docs lookup and path validation downstream, so this is mostly header hygiene. Use one response filename helper that strips/normalizes path separators and quotes per RFC 6266 instead of formatting headers inline.
+
+### P2/P3 - Sentry PII and trace sampling are hard-coded
+
+Browser Sentry is initialized in `src/router.tsx:9-38` with `sendDefaultPii: true` and `tracesSampleRate: 1.0`. Server Sentry is initialized similarly in `src/instrument.server.mjs:3-10`, and the MCP/server helper uses a fallback hard-coded DSN plus `tracesSampleRate: 1.0` at `src/utils/sentry.server.ts:4-16`. There is no environment-specific sample rate, no runtime flag, and no visible masking policy in this app layer.
+
+This may be intentional, but it is a privacy/cost/performance decision that should be explicit and configurable. Full transaction sampling plus default PII can become expensive and can capture more user/request data than expected.
+
+Suggested fix: source Sentry DSN, PII, and trace sample rate from typed environment config, default production tracing to a lower rate, and document the data policy in one observability module.
+
+### P3 - Auth guard methods depend on object `this`
+
+`src/auth/guards.server.ts:18-104` returns an object whose methods call sibling methods through `this` at `src/auth/guards.server.ts:71-83` and `src/auth/guards.server.ts:101-102`. Current usage calls the methods through the guard object, but destructuring `const { requireAdmin } = getAuthGuards()` would break the binding.
+
+Suggested fix: close over local functions instead of using object-method `this`, or return arrow functions that reference local `requireCapability`/`hasCapability` functions directly.
+
+### P3 - Maintenance scripts can materialize large result sets and hang on external APIs
+
+Most scripts are dev-only, but a few are operational enough to deserve production-style guardrails. `scripts/prune-content-cache-negatives.ts:22-25` deletes all negative GitHub content-cache rows and returns every deleted ID just to count them. On a large cache, that turns a cleanup into a large memory result set. Use `.returning()` only when rows are needed; otherwise prefer a counted CTE or chunked deletes with a limit.
+
+The MCP eval scripts have the same missing boundaries as some runtime fetches: `scripts/mcp-eval/run-eval.ts:63-94` initializes and calls MCP with no timeout, response status check, or JSON body validation, then `scripts/mcp-eval/run-eval.ts:111-112` parses tool text as JSON without a schema. `scripts/mcp-eval/run-eval.ts:278-282` divides by `total`, so a filter that matches zero test cases writes `NaN` scores. `scripts/mcp-eval/mine-questions.ts:52-57`, `scripts/mcp-eval/mine-questions.ts:115-127`, and `scripts/mcp-eval/mine-questions.ts:171-173` do external fetches with no timeout/status/body-shape guards.
+
+Suggested fix: share a tiny script fetch helper with timeout/status/json-size guards, fail fast when filters match zero eval cases, and avoid materializing whole delete result sets in bulk cleanup scripts.
+
+### P2/P3 - Production diagnostics can keep Node alive after uncaught exceptions
+
+`src/utils/prod-diagnostics.server.ts:141-198` installs production process probes outside isolate runtimes. The `uncaughtException` listener logs the exception but does not rethrow, exit, or hand off to a shutdown policy. In Node, installing this listener changes the default crash behavior, so the process can continue serving after an exception that may have left state inconsistent.
+
+Suggested fix: for non-isolate deployments, log and then terminate or trigger a controlled shutdown. Keep the current no-op behavior in Workers where `supportsProcessDiagnostics()` is false.
+
+### P3 - TypeScript tests are not wired into `pnpm test`
+
+`package.json:29-33` defines `pnpm test` as `pretest` content generation plus `tsc` and `oxlint`. `tsconfig.json:2-9` explicitly excludes `tests` and `scripts`, and there is no Vitest/Node test script for the assertion files in `tests/*.test.ts`.
+
+The existing tests are useful, especially for repo paths and GitHub content cache behavior, but they can drift without `pnpm test` catching it.
+
+Suggested fix: add a small `test:unit` script that runs the TypeScript assertion files through `tsx` or `node --test` after transpilation, and add a separate `tsconfig.tests.json` if the test files should be typechecked without pulling scripts into the app build.
+
+## Complexity And DRY Targets
+
+### Search and AI dock should be split
+
+`src/components/SearchModal.tsx` is 3,700+ lines and owns several distinct domains:
+
+- Algolia search setup and result rendering (`src/components/SearchModal.tsx:12-20`, `src/components/SearchModal.tsx:215-219`)
+- Kapa SDK/chat streaming/history (`src/components/SearchModal.tsx:38-45`, `src/components/SearchModal.tsx:850-1100`)
+- modal shell (`src/components/SearchModal.tsx:3367-3504`)
+- dock shell (`src/components/SearchModal.tsx:3506+`)
+- markdown rendering for chat output
+- local storage and resizing behavior
+
+`src/contexts/SearchContext.tsx:3-5` lazy-loads the modal, and `src/components/Navbar.tsx:3-5` lazy-loads `AiDock` from the same module. That means opening the dock pulls the full search/modal/Kapa/Algolia/Streamdown module.
+
+The split should also remove duplicated result-controller logic: `CommandSearchResults` and `SearchResultsInChat` each own `useInfiniteHits`, `IntersectionObserver`, filter clearing, result summaries, `NoResults`, and hit rendering at `src/components/SearchModal.tsx:2451-2565` and `src/components/SearchModal.tsx:2782-2931`. Keep one search-results controller and render it in modal or chat/dock layouts through view props.
+
+Suggested split:
+
+- `search/SearchModalShell.tsx`
+- `search/CommandSearchPanel.tsx`
+- `search/AlgoliaResults.tsx`
+- `ai/AiDock.tsx`
+- `ai/KapaChatPanel.tsx`
+- `ai/kapaHistory.ts`
+- `ai/kapaMarkdown.tsx`
+
+### LibraryLayout should split docs chrome concerns
+
+`src/components/LibraryLayout.tsx` is 1,400+ lines and mixes route params, docs sidebar state, large-menu hover behavior, partner rail, recency, tabs, layout, menu behavior, and link generation. It also has several route/link casts such as `src/components/LibraryLayout.tsx:824`, `src/components/LibraryLayout.tsx:982`, and `src/components/LibraryLayout.tsx:1323`.
+
+Suggested split:
+
+- docs sidebar state and menu timing
+- partner/right-rail composition
+- docs tab/link helpers
+- typed library route-param helpers
+- layout shell components
+
+### Product landing pages repeat the same shell contract
+
+The product landing pages are mostly hand-authored, which is fine, but the repeated page contract is now spread across many files. Examples: `src/components/landing/QueryLanding.tsx:20-37`, `src/components/landing/TableLanding.tsx:36-51`, `src/components/landing/VirtualLanding.tsx:26-42`, `src/components/landing/AiLanding.tsx:18-29`, and `src/components/landing/FormLanding.tsx:18-33` all import the same shell-level pieces: docs CTA, downloads, wordmark, sponsor/community/footer sections, landing ad, ecosystem proof, and prompt-copy button.
+
+They also repeat the same docs-link helper with loose route props, for example `src/components/landing/QueryLanding.tsx:776-798`, `src/components/landing/TableLanding.tsx:932-954`, `src/components/landing/VirtualLanding.tsx:1361-1383`, `src/components/landing/AiLanding.tsx:998-1020`, `src/components/landing/FormLanding.tsx:611-633`, `src/components/landing/StoreLanding.tsx:600-622`, `src/components/landing/PacerLanding.tsx:586-608`, `src/components/landing/IntentLanding.tsx:558-600`, `src/components/landing/DevtoolsLanding.tsx:534-556`, `src/components/landing/WorkflowLanding.tsx:518-540`, `src/components/landing/CliLanding.tsx:466-509`, `src/components/landing/ConfigLanding.tsx:481-503`, `src/components/landing/HotkeysLanding.tsx:460-482`, and `src/components/landing/RangerLanding.tsx:430-452`.
+
+The body content should stay local to each product, but the shell contract can be one typed `ProductLandingShell` or smaller shared sections: hero CTAs, download proof, community/sponsor/footer tail, prompt-copy action, ecosystem proof, and docs link helper. That would make new product pages less copy-heavy and keep bundle/lifecycle policy changes, such as reduced-motion handling and prompt-copy behavior, from needing 17 separate edits.
+
+### Library landing route wrappers are generated by hand
+
+Each product landing route under `src/routes/_library/*.$version.index.tsx` is near-identical around route params, version validation, SEO tags, and handing the same metadata shape into a product-specific landing component. Representative copies: `src/routes/_library/ai.$version.index.tsx:12-33`, `src/routes/_library/query.$version.index.tsx:12-33`, `src/routes/_library/start.$version.index.tsx:12-33`, and `src/routes/_library/workflow.$version.index.tsx:12-33`.
+
+File-based routing still needs files, but the local body can shrink to `createLibraryLandingRoute({ libraryId, component })`, or the files can be generated from `src/libraries/ids.ts`. That would centralize the current repeated route metadata contract and remove another place where version validation and route casts can drift.
+
+### Stats modules need smaller ownership boundaries
+
+`src/utils/stats.server.ts` and `src/utils/stats-db.server.ts` each mix public query handling, remote npm/GitHub calls, cache policy, date math, and transformation logic.
+
+The UI side has the same shape. `src/routes/stats/npm/index.tsx:229-620` and `src/routes/_library/$libraryId/$version.docs.npm-stats.tsx:111-401` duplicate route-search state extraction, chart option handlers, package add/remove/color/baseline logic, throttled height updates, loading overlays, and chart/table composition. `src/components/npm-stats/shared.ts:1-6` also imports `packageGroupSchema` from the route-private `src/routes/stats/npm/-comparisons.ts`, which makes shared stats components depend on a page module.
+
+Suggested split:
+
+- npm download request normalization and validation
+- npm chunk fetch/cache
+- GitHub stats fetch/cache
+- org/package aggregate cache
+- pure date/range helpers with tests
+- npm stats route/search schema, package mutation reducer, and shared chart shell
+
+### Shared modules import route modules for constants and UI primitives
+
+Route modules are serving as shared libraries in several places:
+
+- `src/routes/intent/registry/index.tsx:17` imports `SkillTypeBadge` from sibling route module `src/routes/intent/registry/$packageName.tsx:598-607`.
+- `src/components/intent/SkillDependencyGraph.tsx:12` imports `SKILL_TYPE_STYLES` from the same route module and reads it at `src/components/intent/SkillDependencyGraph.tsx:265-278`.
+- `src/components/npm-stats/shared.ts:1-6`, `src/utils/npm-packages.ts:1-6`, and `src/mcp/tools/npm-stats.ts:1-3` import npm stats schemas/presets from `src/routes/stats/npm/-comparisons.ts`.
+- `src/components/ShowcaseGallery.tsx:19` imports `PAGE_SIZE_OPTIONS` from the showcase route.
+- `src/components/ClientAuth.tsx:4` imports `SignInForm` from `src/routes/login.tsx`.
+
+It is easy to create circular route/component dependencies, and it makes bundle analysis harder because importing a small badge, schema, or constant can also import the route module that owns loaders, route context, layout, and page code.
+
+Suggested fix: move shared route-adjacent values into leaf modules: `src/components/intent/skillTypes.tsx`, `src/utils/npm-stats-schema.ts`, `src/utils/showcase-pagination.ts`, and a route-agnostic `SignInForm` component. Routes should import shared primitives, not export them for the rest of the app.
+
+### Sponsor fetching has two near-copies
+
+`src/server/sponsors.ts` and `src/utils/sponsors.functions.ts` are nearly identical. The imported path appears to be `src/utils/sponsors.functions.ts` from `src/components/SponsorPack.tsx`, `src/components/SponsorSection.tsx`, and `src/routes/sponsors-embed.tsx`, while `src/server/sponsors.ts` looks orphaned.
+
+Both copies import D3 scale helpers, fetch GitHub sponsors, cast `extent(...) as [number, number]`, and fall back to mock data with `Math.random()` on auth failure. They have already drifted: `src/server/sponsors.ts:247-253` filters private metadata before merge, while `src/utils/sponsors.functions.ts:254-255` returns the JSON metadata as-is and relies on later filtering. Keep one sponsor data module, remove the duplicate, and make the fallback deterministic or clearly dev-only.
+
+### Maintainer card grids and view-mode controls are copy-pasted
+
+`src/routes/maintainers.tsx:130-161`, `src/routes/paid-support.tsx:59-97`, and `src/routes/_library/$libraryId/$version.docs.contributors.tsx:56-93` define the same compact/full/row segmented control. `src/routes/maintainers.tsx:308-360`, `src/routes/paid-support.tsx:100-128`, and `src/routes/_library/$libraryId/$version.docs.contributors.tsx:95-129` also repeat the same `MaintainerCard` / `CompactMaintainerCard` / `MaintainerRowCard` grid switch and staggered animation wiring.
+
+Suggested fix: extract a small `MaintainerViewModeToggle` and `MaintainerGrid` primitive that receives the current mode, cards, optional stats, and density classes. Then the maintainers route can own filtering/grouping, paid support can own page copy, and card layout changes only happen once.
+
+### P3 - Sponsor pack tooltip placement uses width for vertical math
+
+`src/components/SponsorPack.tsx:89-92` decides `tooltipY` with `circle.y > width / 2` instead of `height / 2`. That will place tooltips on the wrong side in non-square sponsor embeds or sections.
+
+Suggested fix: compare `circle.y` against `height / 2`, and consider extracting a tiny tested `getFloatingTooltipSide({ x, y, width, height })` helper because this same edge math tends to reappear in chart, pack, and canvas overlays.
+
+### Admin surfaces repeat the same filter and table patterns
+
+Repeated top bars and filters exist across users, roles, login history, audit, notes/feedback/showcase moderation, and related admin pages.
+
+Suggested shared pieces:
+
+- `AdminFilterBar`
+- `AdminDateRangeFilter`
+- `AdminCapabilityFilter`
+- `AdminBulkActionBar`
+- `AdminPagination`
+- `AdminEmptyState`
+
+### Admin mutation wrappers invalidate the whole app cache
+
+`src/utils/mutations.ts:18-131` wraps user and role server functions for admin screens. Every mutation calls `queryClient.invalidateQueries()` with no key at `src/utils/mutations.ts:25-27`, `src/utils/mutations.ts:36-38`, `src/utils/mutations.ts:49-51`, `src/utils/mutations.ts:67-69`, `src/utils/mutations.ts:85-87`, `src/utils/mutations.ts:95-97`, `src/utils/mutations.ts:106-108`, `src/utils/mutations.ts:117-119`, and `src/utils/mutations.ts:128-130`. Several wrappers also cast the payload back into the server-function input shape at `src/utils/mutations.ts:21-24`, `src/utils/mutations.ts:45-48`, `src/utils/mutations.ts:59-66`, and `src/utils/mutations.ts:76-84`.
+
+The wrapper is live in `src/routes/admin/users.tsx:23-309`, `src/routes/admin/roles.index.tsx:15-141`, and `src/routes/admin/roles.$roleId.tsx:3-54`. A role edit can therefore refetch unrelated current-user, docs, shop, stats, or page queries if they are mounted, and the casts hide drift between server-function validators and UI payload types.
+
+Suggested fix: expose query-key factories from `src/queries/users.ts` and `src/queries/roles.ts`, invalidate only affected user/role/capability keys, and infer mutation variables from each server function or from shared schemas instead of recasting local object types.
+
+### Admin dashboard should split tabs and defer tab-specific queries
+
+`src/routes/admin/index.tsx` is 1,300+ lines and contains auth gating, tab navigation, metric cards, activity cards, ads cards, chart controls, chart query wrappers, and chart rendering. `AdminDashboard` starts user stats, activity stats, and DAU stats immediately at `src/routes/admin/index.tsx:116-132`, even though `src/routes/admin/index.tsx:197-222` only renders one tab at a time. The overview tab then mounts additional chart queries at `src/routes/admin/index.tsx:318-325`, and the users/activity tabs repeat similar card and chart structures.
+
+This is admin-only, but it makes the route expensive to open and hard to change without touching unrelated dashboard domains.
+
+Suggested fix: split `AdminOverviewTab`, `AdminUsersSummaryTab`, `AdminActivityTab`, and `AdminAdsTab` into separate files with per-tab query options. Share `MetricCard`, `PercentChangeMetric`, and `AdminChartCard` primitives, and only enable tab-specific queries when that tab is active.
+
+### Account feedback and notes are duplicate list pages
+
+`src/routes/account/feedback.tsx:15-171` and `src/routes/account/notes.tsx:15-118` repeat the same current-user gate, `getUserDocFeedbackQueryOptions`, empty state, page links, `DocFeedbackNote` rendering, and pagination. The only real differences are the feedback `type` filter, copy, stats box, and `itemLabel`.
+
+Extract one `AccountDocFeedbackList` that receives `type`, headings, empty copy, and optional stats/header content. Then the same component can own page-size options, loading state, and any future path validation for stored `pagePath` links.
+
+### UI primitives are duplicated across root and shop
+
+There are duplicate-ish primitives for buttons, badges, select, tooltip, logos, and product-specific skins. Keep product styling, but centralize primitive behavior and accessibility.
+
+Candidates:
+
+- root `Button` and shop button behavior
+- `src/components/Tooltip.tsx` vs `src/ui/Tooltip.tsx`
+- logo/wordmark variants
+- select/popover behavior
+
+### Outside-click/dropdown behavior is fragmented
+
+`src/hooks/useClickOutside.ts:28-120` exists, and `src/components/LibraryLayout.tsx:1188-1205` has started using it, but most source call sites still hand-roll `mousedown`/click/Escape handling instead. Examples include `src/components/FilterComponents.tsx:207-286`, `src/components/DocFeedbackFloatingButton.tsx:40-63`, `src/components/npm-stats/PackageSearch.tsx:37-51`, `src/components/npm-stats/ColorPickerPopover.tsx:18-62`, `src/components/shop/ui/Select.tsx:49-62`, `src/routes/maintainers.tsx:106-115`, and `src/routes/partners.index.tsx:134-143`.
+
+The hook itself has a small dependency trap: `additionalRefs = []` creates a new array on each render, so an enabled caller that does not pass refs would re-install listeners each render. Move the empty array to module scope or split the dependency to stable values, then migrate bespoke outside-click code to the hook or to Radix primitives.
+
+### Shared validation schemas are too thin
+
+`src/utils/schemas.ts` currently centralizes enum/picklist schemas, but most route/server-function validators still define their own pagination, dates, bounded strings, arrays, URLs, package names, cache keys, and ids inline. This is why the same missing max-value/max-length pattern repeats across showcase, feedback, users, roles, audit, stats, shop, Intent, OAuth, and builder endpoints.
+
+Suggested shared schema helpers:
+
+- `boundedPaginationSchema({ defaultPageSize, maxPageSize })`
+- `boundedSearchSchema({ maxLength })`
+- `boundedUuidArraySchema({ maxItems })`
+- `dateRangeSchema({ maxDays, allowAllTime })`
+- `httpUrlSchema({ maxLength, allowedProtocols })`
+- `npmPackageNameSchema`
+- `repoRefPathSchema`
+- `projectNameSchema`
+
+### Partner data should split serializable metadata from UI assets
+
+`src/utils/partners.tsx` is 1,700+ lines and mixes partner data, image imports, JSX content, LLM descriptions, app-starter helpers, placement metadata, and UI-ish helpers. It is imported by routes, builder features, game code, application-starter code, LLM/data endpoints, partner pages, and docs layout.
+
+The public data endpoint at `src/routes/api/data/partners.ts:1-43` imports the same heavy module used by UI surfaces. This makes data-only callers pay for asset/JSX shape and makes partner metadata harder to reuse safely.
+
+Suggested split:
+
+- `partners.data.ts`: serializable ids, names, URLs, descriptions, placement metadata
+- `partners.assets.tsx`: logo/image imports and `PartnerImage`
+- `partners.content.tsx`: JSX marketing copy
+- `partners.application-starter.ts`: app-starter-specific helpers
+- data endpoints and LLM helpers should import only serializable metadata
+
+### Shop product option UI duplicates color semantics
+
+`src/components/shop/ProductDrawer.tsx:15-94` defines `COLOR_HEX`, `contrastColor`, `isDarkColor`, and `resolveColorHex`. `src/components/shop/ProductCard.tsx:10-77` carries a second `COLOR_MAP`/`colorHex` implementation with a comment saying it is kept in sync with the drawer.
+
+`src/components/shop/ui/Chip.tsx:75-90` adds a third color path for `colorBg`/`selectedBg`, assumes full 6-digit hex input, and returns `rgba(NaN, NaN, NaN, alpha)` or an arbitrary contrast result for malformed values. Current shop color callers mostly use the drawer/card maps, but the primitive invites future raw Shopify option colors without validation.
+
+That is a small duplication today, but this is exactly the kind of UI data drift that causes “same color name, different swatch” bugs as merch variants grow.
+
+Suggested fix: move color token resolution and contrast helpers into a tiny `shop/colors` helper used by product cards, product drawers, and future product-option UI.
+
+### Showcase voting should share one optimistic mutation controller
+
+The showcase vote flow is duplicated across:
+
+- `src/components/ShowcaseGallery.tsx:65-181`
+- `src/components/ShowcaseSection.tsx:103-184`
+- `src/components/ShowcaseDetail.tsx:82-163`
+
+Each copy builds a votes map, toggles local vote state, computes score deltas, snapshots cache state, rolls back on error, and invalidates `['showcases']`. The detail variant has different cache shapes, but the mutation semantics are the same.
+
+Suggested fix: extract `useShowcaseVoteMutation({ voteIds, targets })` or a small cache updater that owns `applyVoteToggle`, `getScoreDelta`, rollback context, and invalidation policy. That would pair well with fixing the server-side vote race and make list/detail/related cards harder to drift.
+
+### Showcase shared helpers have dead duplicate copies
+
+`src/utils/showcase.shared.ts:3-44` defines the client/server-safe helpers used by showcase forms, filters, details, and admin screens. The same `expandLibraryDependencies`, `getAutoIncludedLibraries`, `isValidUrl`, and `USE_CASE_LABELS` implementations still exist in `src/utils/showcase.client.ts:6-59`, which is not imported anywhere under `src`, and the dependency/URL helpers are repeated again in `src/utils/showcase.server.ts:89-128`.
+
+Suggested fix: delete `showcase.client.ts` and have server code import the shared helpers where the logic is truly isomorphic. Keep server-only validation wrappers in `showcase.server.ts`, but remove duplicate primitive implementations.
+
+### Docs feedback should become a DOM lifecycle primitive
+
+`DocFeedbackProvider` contains block discovery, hash/selector generation, hover state, inline style mutation, note placement, feedback creation state, and portal management in one component.
+
+Suggested split:
+
+- pure block discovery and selector/hash helpers
+- `useReferenceableBlocks`
+- `useBlockHover`
+- `DocsFeedbackOverlay`
+- server-function/data hooks for notes and improvements
+
+That would also make the feature easier to test without rendering full docs pages.
+
+### Builder deploy UI should share one controller
+
+`src/components/builder/DeployDialog.tsx` and `src/components/ExampleDeployDialog.tsx` are parallel flows with the same auth gating, repo-name input, debounced availability check, public/private visibility toggle, countdown, provider redirect, and success/error surfaces. The deployment action payload is the main difference.
+
+Create one `DeployDialogShell` plus a `useDeployDialogController` hook that accepts a typed `deploy()` function. That would reduce duplicated lifecycle bugs and make it easier to harden GitHub deploy behavior once.
+
+### Browser effect helpers would remove repeated footguns
+
+Timer cleanup, popup polling, clipboard writes, localStorage reads, and one-off DOM mutation appear in several components. The project already has a good timer-cleanup example in `src/components/ApplicationStarter.tsx:227-240` and `src/components/ApplicationStarter.tsx:428-434`; extract that pattern into small hooks/helpers instead of reimplementing it ad hoc.
+
+## Bundle And Dead-Code Targets
+
+### Search AI bundle
+
+Search is lazy, but `SearchModal.tsx` bundles Algolia, Kapa, Streamdown, modal UI, and dock UI together. Splitting the dock from the full modal should reduce the first AI-dock interaction cost.
+
+### Partner imports pull UI assets into data-only callers
+
+`src/utils/partners.tsx` imports dozens of logo/image assets and exports JSX-bearing partner objects. Because data endpoints, LLM helpers, builder/game code, and UI routes import the same module, a data-only caller can still drag UI asset metadata and JSX into its graph.
+
+Split serializable partner metadata from image/JSX modules before doing bundle analysis; otherwise the analyzer will show a broad partner module but not the cleaner data boundary that should exist.
+
+### Builder feature loading pulls the full partner module
+
+`src/components/builder/store.ts:374-382` dynamically imports `~/builder/api/features`, but `src/builder/api/features.ts:4` imports `partners` from `~/utils/partners` just to derive active partner add-on ids at `src/builder/api/features.ts:6-9`.
+
+That makes the builder feature-load path depend on the large JSX/image-bearing partner module. Move active partner ids into serializable partner metadata or a tiny `partners.application-starter` module.
+
+### Start/Router landing prompt buttons import starter resolver logic
+
+`src/components/landing/StartLanding.tsx:25-28` and `src/components/landing/RouterLanding.tsx:25-28` import `resolveApplicationStarterDeterministically` directly. The work only runs when `LandingCopyPromptButton` is clicked (`src/components/landing/StartLanding.tsx:646-657`, `src/components/landing/RouterLanding.tsx:645-656`), but the import still puts the application-starter resolver and partner helpers on those landing chunks.
+
+Lazy-load the resolver inside the prompt getter or precompute the static blank prompt so the landing routes do not import partner/application-starter inference code up front.
+
+### Plot/d3 on Intent surfaces
+
+`src/components/landing/IntentLanding.tsx:21` imports `SkillSparkline` directly, and `src/components/intent/SkillSparkline.tsx:1-3` imports Observable Plot. This puts Plot on the public Intent landing. The same landing preview also imports Intent React Query wrappers at `src/components/landing/IntentLanding.tsx:28-32` and fires stats, directory, and skill-history queries as soon as the preview mounts at `src/components/landing/IntentLanding.tsx:342-357`; those wrappers call server functions through `src/queries/intent.ts:15-33` and `src/queries/intent.ts:71-77`. Most registry pages already lazy-load sparklines elsewhere.
+
+`src/routes/intent/registry/$packageName.index.tsx:16` imports `SkillDependencyGraph`, and that imports d3 force modules at `src/components/intent/SkillDependencyGraph.tsx:2-10`. Lazy-load it only when a package has graph edges.
+
+### NPM stats lazy chart still imports d3 in the route chunk
+
+`src/routes/stats/npm/index.tsx:26` and `src/routes/_library/$libraryId/$version.docs.npm-stats.tsx:21` eagerly import `npmQueryOptions`, and `src/components/npm-stats/npmQueryOptions.ts:1-23` imports all of d3 just for UTC day math. `NPMStatsChart` is lazy-loaded at `src/routes/stats/npm/index.tsx:38-42` and `src/routes/_library/$libraryId/$version.docs.npm-stats.tsx:44-48`, but d3 still lands in the route's initial stats chunk before the chart loads.
+
+`src/utils/chart.ts:1-43` also mixes Valibot schemas/constants with `import * as d3 from 'd3'`. That means consumers that only need shared chart metadata still cross the d3 boundary: `src/routes/stats/npm/-utils.ts:3-9` re-exports `binTypeSchema`, `BinType`, `binningOptions`, and `getBinFunction`, while `src/utils/activity.server.ts:4` imports only `ALL_TIME_FLOOR_DATE` from the same module.
+
+Suggested fix: replace the query-option date math with a tiny native UTC date helper, or lazy-load the full stats visualization/query module after the user has packages to chart. Split `utils/chart` into schema/date constants and d3-backed binning/rollup helpers so server/admin/simple route utilities do not import d3 by accident.
+
+### Shop promo/3D components appear unused
+
+`src/components/shop/ShopHero3D.tsx` imports Three/React Three/drei, but no other source file imports `ShopHero3D`. It currently appears dead. The same source-graph scan shows `src/components/shop/ShopDropCard.tsx` and `src/components/shop/ShopStrip.tsx` are also unimported.
+
+If the 3D hero is reintroduced, it needs type cleanup too: `src/components/shop/ShopHero3D.tsx:254-276` casts GLTF nodes and refs to `any`, then assumes `nodes.T_Shirt_male.geometry` exists at `src/components/shop/ShopHero3D.tsx:369-409`. Remove dead shop promo components, or wire them deliberately behind a route-level lazy boundary with typed GLTF loading.
+
+### Account feedback has an unused duplicate component
+
+`src/components/UserFeedbackSection.tsx:11-218` appears unimported under `src`. It also accepts a `userId` prop but ignores it at `src/components/UserFeedbackSection.tsx:15-23`, always querying the current user's feedback.
+
+The live account feedback and notes routes use `src/routes/account/feedback.tsx` and `src/routes/account/notes.tsx` directly, with overlapping card/list behavior. Delete the unused component, or collapse the live account feedback/notes pages and any future profile-specific feedback surface behind one explicit component whose props match its query contract.
+
+### Inline logo SVGs have dead copies and fixed ids
+
+`src/ui/LogoQueryGG.tsx:1-456` is the exported version used by `src/routes/learn.tsx:4` and rendered at `src/routes/learn.tsx:118`. The older copies `src/components/LogoQueryGG.tsx:1-221` and `src/components/LogoQueryGGSmall.tsx:1-228` are not imported anywhere under `src`.
+
+The TanStack logo copies have the same source-graph problem: `src/components/LogoColor.tsx:1-623` and `src/components/Logo.tsx:1-387` are not imported anywhere under `src`. Both wrap huge inline SVGs in `BrandContextMenu` and carry fixed ids such as `linearGradient-1`, `mask-3`, `path-2`, `path-22`, `path-1`, and `mask-4`.
+
+That leaves 1,459 lines of inline SVG application code that route reachability will never use. The live `src/ui/LogoQueryGG.tsx:12-19` and `src/ui/LogoQueryGG.tsx:241-248` variants also use fixed clip-path ids, and `src/components/game/ui/Minimap.tsx:131-137` repeats the same pattern with `id="diamond-clip"`, so rendering multiple copies of the same SVG component in one document can still create id-collision surprises.
+
+Suggested fix: delete the dead component copies or replace all variants with one static SVG asset plus a small typed wrapper. This is a good candidate for a reachability-aware inline-SVG duplicate check.
+
+### Game has an unused React Three Fiber scene stack
+
+`src/routes/explore.tsx:5-57` lazy-loads `src/components/game/IslandExplorer.client.tsx`, and that component imports `VanillaGameScene` at `src/components/game/IslandExplorer.client.tsx:6` and renders it at `src/components/game/IslandExplorer.client.tsx:69-72`. The older `GameScene` export at `src/components/game/scene/GameScene.tsx:267-287` is not imported anywhere under `src`.
+
+That leaves a full React Three Fiber scene implementation under `src/components/game/scene/*`, plus R3F-specific hooks like `src/components/game/hooks/useBoatControls.ts` and `src/components/game/hooks/useAIOpponents.ts`, as application code that no route currently exercises. `package.json:47-48` still carries `@react-three/drei` and `@react-three/fiber`; the current vanilla engine uses `three` directly.
+
+Suggested fix: either delete the old R3F scene tree and remove the unused dependencies, or move it behind an explicit experimental route/lazy entry with a clear owner. Until then it doubles the game maintenance surface and can confuse future fixes because two implementations model the same world.
+
+### Navbar merch menu imports shop server-function code globally
+
+`src/components/Navbar.tsx:61-63` imports `getProducts`, Shopify formatting helpers, and `ProductListItem` for a merch mega-menu that only loads products after pointer/focus activation at `src/components/Navbar.tsx:1122-1190`. Because the import lives in the global navbar module, the shop server-function wrapper and Shopify query module are part of the navbar's module graph on every page even though most sessions never open the merch menu.
+
+Suggested fix: split `MerchMenuContent` and `MerchProductLink` into a lazy child module, or expose a tiny `getNavbarMerchProducts` query wrapper from a shop-only module and lazy import it when the menu activates.
+
+### P3 - Mobile merch menu can show an empty recent-products section
+
+`MerchMenuContent` only flips `shouldLoad` from `pointerenter`/`focusin` listeners attached at `src/components/Navbar.tsx:1122-1150`. The product request is gated on `shouldLoad` at `src/components/Navbar.tsx:1152-1190`, and the skeletons are also gated on `shouldLoad` at `src/components/Navbar.tsx:1214-1245`.
+
+On mobile, opening the Merch collapsible renders the content but does not necessarily fire pointerenter or focusin on the content root. The result is a `Recent Products` heading with no skeletons and no products, followed by only the `All Merch` link.
+
+Suggested fix: when `variant === 'mobile'`, load as soon as the menu content mounts or pass the collapsible open state into `MerchMenuContent`. If the merch module is split lazily, make mobile open the same lazy boundary immediately.
+
+### Existing positive bundle work
+
+`vite.config.ts` already has manual chunks for TanStack Start/router/query/react/icons, route component code-splitting, and an `ANALYZE` bundle-analyzer path. Build on that rather than starting over.
+
+## Reusable Patterns Worth Harvesting
+
+### Good pattern: application-starter route guard
+
+`src/routes/api/application-starter/resolve.ts` is the best local model for guarded public JSON endpoints:
+
+- rate limits
+- content-length check
+- content-type check
+- origin/referer/sec-fetch-site checks
+- runtime schema parsing
+- `Cache-Control: no-store`
+
+Turn this into a reusable helper for API routes and server functions.
+
+### Good pattern: Start import protection and CSRF defaults
+
+`src/start.ts:7-15` enables CSRF middleware for server functions before Sentry middleware. `vite.config.ts:289-319` also uses TanStack Start import protection to block server-only files and server-only packages from client imports.
+
+Keep this as the baseline while hardening route handlers: server functions already get a better default than raw route handlers, so the reusable API-boundary helper should close that gap rather than duplicating middleware behavior.
+
+### Good pattern: application-starter lazy UI and stale async guards
+
+`src/components/ApplicationStarter.tsx:67-77` lazy-loads hotkeys and deploy dialogs, so those behaviors are not in the base starter UI chunk. The same component owns transient feedback timers and clears them on unmount at `src/components/ApplicationStarter.tsx:227-240` and `src/components/ApplicationStarter.tsx:428-434`.
+
+`src/components/application-builder/useApplicationBuilder.tsx:466-480` and `src/components/application-builder/useApplicationBuilder.tsx:493-517` use request ids to ignore stale async resolution. Keep that request-id pattern for prompt/deploy/remote-load flows that can be superseded by newer user input.
+
+### Good pattern: GitHub/docs cache key validation
+
+`src/utils/github-content-cache.server.ts` has strong cache-key validation, bounded path/ref/repo shapes, stale fallback, negative cache handling, and tests in `tests/github-content-cache.test.ts`.
+
+This is a strong candidate for a reusable TanStack docs-site cache helper or at least a project-level pattern.
+
+### Good pattern: repo path validation
+
+`src/utils/repo-path.ts` has focused tests in `tests/repo-path.test.ts`. Reuse this style for other user-influenced identifiers: package names, project names, cache artifact keys, remote template IDs.
+
+### Good pattern: persisted enum store
+
+`src/components/markdown/usePersistedEnumStore.ts:23-66` avoids SSR/CSR mismatches by hydrating from storage in an effect, validates stored enum values, and catches storage access failures. Generalize this for framework/version/theme/search/shop preferences instead of keeping several direct `localStorage` implementations.
+
+### Good pattern: runtime parsing for persisted chat history
+
+`src/components/SearchModal.tsx:879-999` parses Kapa chat history from `localStorage` through small runtime readers, rejects malformed items, bounds the stored list to five entries, and falls back cleanly on JSON/storage failures. This pattern should be extracted before more persisted UI state accumulates.
+
+### Good pattern: slim data modules with explicit heavy-data escape hatches
+
+`src/libraries/libraries.ts:1-2` keeps base library data lightweight, while `src/libraries/index.tsx:34-44` explicitly avoids re-exporting extended per-library landing-page projects that contain React nodes and heavier assets. `publicLibraries` and `isPublicLibrary` now give navigation/search/API callers one shared public catalog boundary. This is the right shape for global navigation/docs data: a slim default import path plus opt-in heavy modules for routes that actually render the full experience.
+
+### Good pattern: lazy activation for expensive navbar features
+
+`src/components/Navbar.tsx:3-10` lazy-loads search/AI and auth controls, and `src/components/Navbar.tsx:405-424` only activates the AI dock mount after user intent. Keep this pattern when splitting SearchModal/AiDock: route chrome should not import chat/search providers until needed.
+
+### Good pattern: npm download chunk cache shape
+
+`src/utils/npm-download-cache.server.ts` has a useful chunk-cache abstraction with typed object checks, encoded keys, and Blob storage separation. It needs list-operation caps, but the date-range normalization and storage boundary are worth harvesting into a reusable stats helper.
+
+### Good pattern: visibility-aware animated counters
+
+`src/hooks/useNpmDownloadCounter.ts:55-132` and `src/components/LibraryDownloadsMicro.tsx:145-205` update animated numbers with `requestAnimationFrame`, pause on hidden tabs, and clean up frame/focus/pageshow listeners. This is a good pattern for any live-but-noncritical visual counter.
+
+### Potential upstream/library work
+
+- A TanStack Start API-boundary helper for route handlers and `createServerFn`.
+- A Cloudflare-safe outbound fetch helper.
+- A docs markdown trust-boundary renderer pair: trusted docs renderer and untrusted safe renderer.
+- An npm download chunk cache helper with tested date-range normalization.
+- Builder definition schema shared between client UI, validate, compile, download, deploy, and MCP.
+- A deploy-dialog controller shared by builder-generated projects and docs example deployment.
+- React/browser effect helpers for timed flags, popup polling, clipboard writes, guarded storage, outside-click behavior, and drag-resize listeners.
+- Static data contract tests for public catalogs, maintainer/social URLs, package metadata IDs, and other small hand-authored data tables.
+- An OAuth PKCE helper with atomic code consumption patterns for Drizzle/Postgres.
+- A first-party OAuth callback helper that validates provider params, clears transient cookies on every exit, and normalizes provider token/profile responses.
+- A React Query query-options linter/helper that asserts query keys include every query-function input.
+- A reduced-motion gate for marketing/demo animations.
+- A typed polymorphic button/select primitive that defaults non-submit buttons safely.
+- A GitHub repository deploy helper with file-manifest validation, deadlines, rollback/continuation semantics, and typed partial-success states.
+- A prompt-control metadata pattern for AI helpers that keeps control fields out of user-provided text.
+- A transaction-boundary helper for admin/auth mutations that pairs domain writes, audit writes, and unique-conflict retry behavior.
+- An npm-stats UI controller/schema helper that owns URL search state, package mutations, chart height clamps, and route-specific defaults.
+- A global-shell lazy-panel pattern for rare navbar/menu/drawer panels that should not import server-function wrappers or heavy product modules up front.
+- A typed image transform helper that clamps Cloudflare image params and keeps markdown-provided dimensions inside a documented range.
+- A Shopify image transform helper with URL host checks, dimension clamps, and a shared responsive `srcset` builder.
+- A route-owned font asset contract that declares exact font families once per route scope and prevents duplicate CSS `@import`/`<link>` loads.
+- A card-with-secondary-actions interaction helper that keeps card-level navigation/quick-view/toggle behavior, nested links/swatches, keyboard activation, and image-hover preloading within valid accessibility and network budgets.
+- A packed-logo/tooltip layout helper for sponsor and partner visualizations.
+- A library/framework color-token helper that exposes complete class variants instead of modifying Tailwind class strings at call sites.
+- A showcase voting controller that centralizes optimistic vote toggles, score deltas, rollback context, and query invalidation.
+- A Sentry/observability config helper with typed sample-rate/PII flags and runtime-specific defaults.
+- A typed environment adapter that works across TanStack Start app code, server functions, workers, and local scripts without maintaining duplicate env objects.
+- A docs manifest builder with file-count budgets, redirect metadata caching, and stale-fallback behavior.
+- An auth activity recorder/middleware pattern that keeps auth reads separate from engagement/streak writes.
+- A bounded background refresh runner for scheduled/admin stats jobs with retry deadlines, partial-result reporting, and external API backoff policy.
+- A local script runtime helper for bounded fetches, zero-row assertions, and large-table maintenance deletes.
+- A route-module boundary helper/lint rule that prevents reusable components from importing route files for constants, badges, or schemas.
+- A route search UI-state schema helper that pairs URL search picklists with persisted preference validation and invalid-value recovery.
+- An admin bulk-selection controller that ties selected ids to a query fingerprint, exposes visible/hidden selection counts, and clears stale selections on filter/page changes.
+- A keyed admin row-action controller for refresh/retry/delete workflows that scopes pending/error state to specific ids instead of a whole table.
+- A safe ratio/percentage formatting helper for dashboard cards, charts, and progress bars.
+- A route-scoped cursor pagination controller that fingerprints query inputs, rejects stale load-more responses, owns accumulated page state, and exposes reset/load-more primitives.
+- A same-origin/internal-route classifier for source links, markdown links, search hits, and AI citations that uses URL parsing and protocol policy instead of substring/prefix checks.
+- An interaction-triggered lazy-data helper that can express hover/focus intent on desktop and immediate open/mount intent on mobile.
+- An application-starter partner-selection controller that returns selected, muted/conflicting, visible, and prompt-ready partner ids from one typed state model.
+- A starter-recipe normalization helper shared by CLI command generation, advanced builder URLs, download URLs, deploy dialogs, and builder-store hydration.
+- A typed stats-cache mapper that preserves field semantics consistently across fetch, merge, admin display, and historical delta calculation.
+- A route reachability/dependency-pruning pass that starts from route entries, marks truly reachable client/server modules, and flags legacy UI stacks whose package dependencies can be removed.
+- A fail-fast static-content lookup helper for required library/product/category data, so marketing pages do not hide taxonomy drift behind generic fallbacks.
+- A package-metadata/static-profile URL normalizer for npm/github/package-manager/maintainer data that converts common repository forms and bare domains to safe public web URLs and drops non-web protocols before rendering anchors.
+- A transactional version-ingestion writer that pairs content inserts, skill metadata replacement, status updates, and retry/dead-letter state for package registry jobs.
+- A docs-redirect table matcher that compiles legacy redirects into segment-aware matchers with explicit search/hash preservation and route-only classification.
+- A public-library catalog selector that consistently applies visibility, route availability, sitemap, nav, API, and LLM-index rules from one source.
+- A shared search-results controller that owns infinite hits, dedupe, result summaries, filter clearing, and observer cleanup while exposing modal/dock-specific render slots.
+- A pinned-vs-hover panel state machine for global docks, chat panels, and hover previews so open reason, dirty state, auto-close behavior, and keyboard dismissal stay explicit.
+- A reachability-aware SVG asset helper or lint pass that detects duplicate inline SVG components, fixed id collisions, and unreferenced icon/logo copies before they become permanent application code.
+- A product-landing shell contract that centralizes docs CTAs, download proof, ecosystem proof, prompt-copy controls, sponsor/community/footer tail, and shared demo lifecycle policy while leaving product-specific sections local.
+- A typed product docs link helper that preserves TanStack Router route/param typing instead of repeating `to: string` plus `params: Record<string, string>` wrappers per landing page.
+- A landing demo policy/helper that distinguishes illustrative mocks from real product-backed demos and carries reduced-motion, page-visibility, timer cleanup, and client-only loading rules.
+- A small route-page registry preview helper for public product pages that can render cached/static summaries by default and lazy-load live React Query/Plot previews only on interaction or viewport intent.
+- A repeated-form-control id helper/lint that derives stable ids for table rows, field arrays, modals, and expanded panels so labels never point at duplicate DOM ids.
+- A bidirectional endpoint contract helper that exports request and response schemas together, then gives clients a typed `fetchJson(schema)` wrapper instead of per-call casts.
+- A safe external-window opener helper that centralizes `noopener,noreferrer`, blocked-popup handling, and anchor-vs-scripted-open policy.
+- A resilient frontmatter reader that returns typed parse results, quarantines malformed docs metadata, and lets manifests skip bad files without failing a whole route.
+- A partial-cache completeness contract for chunked caches so callers can distinguish full hits, partial hits, stale fallback, and required origin refresh.
+- A tarball path normalizer for npm/package ingestion that stores safe path segments and renders source links through URL builders instead of string concatenation.
+- A state-machine completion test helper that covers `0/1`, `1/1`, and `N/N` final-transition cases where guards and assignments can run in the wrong order.
+- A builder worker-manifest adapter exported upstream from `@tanstack/create`, so app code does not need to mirror generated manifest type gaps, category/exclusive switch statements, and explicit add-on loader maps like `src/builder/api/create-worker.ts:15-601`.
+- A URL/store hydration helper for long-lived route UIs, covering typed search parsing, browser back/forward, async option loading, and explicit loop prevention.
+- A repeated card-grid/view-mode controller for public directory pages that keeps segmented controls, responsive grid classes, row/full/compact cards, and staggered animation policy in one place.
+- A current-user query-key/auth-cache helper that scopes private React Query data by user/session and clears affected namespaces on auth transitions.
+- A library landing route factory or generator that keeps file-route wrappers tiny while centralizing version validation, SEO metadata, and product component handoff.
+- A package-name slug codec for npm-style route params, with tests for scoped packages, underscores, encoded slashes, invalid percent escapes, and canonical redirect behavior.
+
+## Potential AI Skills To Harvest
+
+- `tanstack-start-api-hardening`: audit/fix route handlers and server functions for schema validation, rate limits, request-size guards, CSRF/same-origin policy, cache headers, and sanitized errors.
+- `cloudflare-outbound-fetch-hygiene`: add timeouts, byte limits, status handling, content-type checks, and header allowlists to Worker/server fetch calls.
+- `builder-contract-audit`: keep builder UI, compile, validate, download, deploy, and MCP flows on one schema and one project-definition contract.
+- `docs-cache-key-hardening`: validate repo/ref/path/artifact cache keys, negative-cache behavior, stale fallback, and prune behavior.
+- `npm-stats-cache-and-fanout`: cap public stats queries, normalize date chunks, cache npm download ranges, and control concurrency.
+- `markdown-trust-boundary-review`: classify markdown sources and apply trusted/raw vs sanitized/no-HTML rendering policies.
+- `admin-crud-pattern-extractor`: find repeated admin tables/filter bars/bulk actions and extract shared primitives.
+- `react-module-lifecycle-audit`: find module-scope browser side effects, unpaired listeners, intervals, localStorage parsing, and SSR leaks.
+- `bundle-hotspot-splitter`: locate direct imports of heavy dependencies and suggest route/lazy/manual-chunk boundaries.
+- `tanstack-type-safety-sweep`: remove `as any`, replace string casts with picklists, and move validation to source schemas.
+- `intent-registry-ingestion-hardening`: separate public reads from package ingestion, validate npm package names, bound tarball extraction, and add retry/backoff policy.
+- `ephemeral-auth-flow-audit`: review short-lived ticket/device-code/popup auth flows for durable storage, replay/consume semantics, rate limits, and cleanup lifecycle.
+- `route-param-boundary-sweep`: audit route loaders, server functions, and route handlers for uncapped search params, raw JSON reads, unsafe splats, and missing body guards.
+- `cms-html-trust-boundary`: classify CMS-sourced HTML, add sanitizer/allowlist policy, and document which external content can reach `dangerouslySetInnerHTML`.
+- `react-dom-overlay-lifecycle`: audit portals and DOM overlays for render-time mutation, stale async setup, style restoration, unmount cleanup, and SSR/HMR behavior.
+- `browser-storage-hardening`: replace direct `localStorage`/`sessionStorage` calls with guarded helpers, runtime validation, TTL semantics, and quota/private-mode fallbacks.
+- `deploy-dialog-flow-extractor`: find duplicated deploy/auth/repo-name/provider-redirect flows and extract one typed controller with cancellation and shared validation.
+- `browser-effect-helper-harvest`: turn repeated timers, popup polling, clipboard writes, and transient flags into cleanup-safe React hooks.
+- `dropdown-behavior-consolidator`: migrate bespoke outside-click/Escape dropdown handling to one stable hook or Radix primitive pattern.
+- `drag-resize-lifecycle-audit`: find document-level drag listeners and convert them to effect-owned cleanup-safe resize hooks.
+- `stats-query-boundary-hardening`: add package/date/window caps, Blob-list budgets, and concurrency limits to public and admin stats paths.
+- `partner-data-bundle-splitter`: separate serializable partner metadata from logo assets, JSX content, app-starter helpers, and LLM exports.
+- `tanstack-router-param-cast-removal`: replace route/link `as never` and enum casts with typed params, search schemas, and shared route helpers.
+- `shared-cache-ttl-audit`: find cache helpers with ambiguous time units, default TTLs, unbounded maps, and missing eviction policy.
+- `builder-custom-feature-contract-audit`: verify custom templates/add-ons are either disabled in UI or carried through validate, compile, download, deploy, attribution, and MCP.
+- `landing-chunk-data-boundary-audit`: find landing routes that import deterministic generators, charting, partner data, or other heavy helpers only needed after a click.
+- `stale-async-request-guard-harvest`: identify async UI flows that need request ids, abort signals, or unmount guards, then extract the local good pattern.
+- `optimistic-mutation-contract-audit`: review React Query optimistic updates for typed optimistic shapes, rollback coverage, concurrent-mutation coordination, and QueryClient-scoped state.
+- `content-publication-boundary-audit`: verify drafts, future posts, private CMS entries, and preview routes are not publicly readable unless an authenticated preview mode allows it.
+- `oauth-callback-hardening`: audit OAuth start/callback routes for provider picklists, return-to normalization, transient-cookie cleanup, typed provider response parsing, and atomic session revocation.
+- `user-media-url-contract-audit`: verify image/file upload UI contracts match server-side URL acceptance, host allowlists, size/type checks, and public rendering surfaces.
+- `react-query-key-completeness-audit`: compare query keys against query-function inputs and find cache collisions caused by omitted params, arrays, filters, or limits.
+- `ui-primitive-form-default-audit`: review shared button/select/menu primitives for native form defaults, ref typing, polymorphic casts, and accessible trigger behavior.
+- `reduced-motion-demo-audit`: find autoplaying demo animations, timers, intervals, and typewriter effects that should respect reduced motion and page visibility.
+- `test-command-coverage-audit`: compare `package.json` scripts, tsconfigs, and test files to ensure the default test command actually typechecks and runs the intended suites.
+- `github-repo-deploy-hardening`: audit create-repo-and-push flows for file budgets, path normalization, deadlines, retry policy, orphaned partial deployments, and UX recovery.
+- `ai-prompt-control-channel-audit`: find hidden control markers embedded in user prompt strings and move them into validated schema fields before prompt rendering.
+- `product-quota-contract-audit`: verify rate-limit constants, UI quota copy, status endpoints, and enforcement behavior all express the same product limit.
+- `admin-transaction-boundary-audit`: find multi-step admin/auth mutations that need one transaction, audit-log coupling, conflict retry, and typed partial-failure states.
+- `global-shell-bundle-boundary-audit`: find global chrome imports that pull rare menu/drawer/product modules or server-function wrappers into every page.
+- `npm-stats-ui-state-extractor`: consolidate npm stats URL search schemas, package mutation reducers, chart shell composition, and bounded visualization controls.
+- `observability-pii-sampling-audit`: review Sentry/logging setup for default PII, trace sample rates, error masking, request identifiers, and production cost controls.
+- `cloudflare-image-transform-contract-audit`: clamp and validate image transform width, height, quality, fit, and format values across markdown and component callers.
+- `route-derived-state-sync-audit`: find React state initialized from route params/loader data/props that should resync on navigation without wiping user intent.
+- `typed-env-surface-consolidator`: find duplicated env readers, fallback defaults, client/server leakage risks, and missing schema entries across app, server-function, worker, and script runtimes.
+- `docs-manifest-fanout-budget-audit`: cap docs manifest generation by file count, fetch concurrency, redirect-path inputs, recursive tree completeness, and cold-cache deadline.
+- `auth-side-effect-separation-audit`: identify auth/session helpers that perform analytics, activity, audit, or mutation side effects and move them to explicit middleware or route-owned calls.
+- `scheduled-job-deadline-audit`: find cron/admin refresh loops with unbounded retries, no abort signals, or no partial-failure result model.
+- `oauth-token-encryption-migration-audit`: detect plaintext legacy token compatibility paths, add read-repair/backfill plans, and define a fail-closed migration endpoint.
+- `blob-cache-batch-budget-audit`: add request-size, object-list, cursor-page, and Promise concurrency budgets to Blob/R2-backed cache helpers.
+- `shopify-storefront-boundary-audit`: cap Storefront API page sizes, cursors, handles, discount codes, quantities, trusted HTML, image transforms, and cart optimistic update contracts.
+- `shop-product-option-dry-audit`: extract duplicated swatch/color/variant-selection semantics across product cards, product pages, and drawers.
+- `visualization-overlay-geometry-audit`: verify chart, pack, canvas, and map overlays use the right dimensions, clamp to viewport bounds, and share tested tooltip-side math.
+- `tailwind-token-contract-audit`: find class-string tokens that are composed with opacity, variants, or dark-mode fragments and replace them with structured variants or CSS variables.
+- `showcase-vote-controller-extractor`: consolidate duplicated optimistic vote mutations into one typed controller with shared rollback and cache invalidation semantics.
+- `script-runtime-boundary-audit`: audit local maintenance/eval scripts for unbounded fetches, unchecked JSON, zero-result math, and bulk database operations that materialize huge result sets.
+- `route-module-boundary-audit`: find components, utils, and shared modules importing route files for constants, schemas, or small UI primitives, then move them into leaf shared modules.
+- `route-search-ui-state-contract-audit`: find URL search params and persisted preferences that feed UI unions through casts, then replace them with picklists, safe storage validation, and fallback recovery.
+- `admin-bulk-selection-state-audit`: find bulk-selection state that survives route query, filter, page, or data changes, then add query fingerprints, visible/hidden counts, and stale-selection recovery.
+- `dashboard-ratio-safety-audit`: find UI ratios and progress bars that divide by untrusted or possibly-zero denominators, then centralize safe percentage formatting and empty-state rendering.
+- `cursor-pagination-stale-response-audit`: find local accumulated-page state fed by route/search params, then add request fingerprints, abort signals, and late-response rejection.
+- `internal-link-classifier-audit`: find source/markdown/search links that decide internal routing through substring checks, then replace them with URL parsing, origin allowlists, and static/API route exclusions.
+- `interaction-triggered-lazy-data-audit`: find UI data loads gated on hover/focus/intent, then verify keyboard, touch, mobile-open, and already-mounted states all trigger the load or render an intentional empty state.
+- `selection-visibility-contract-audit`: find helpers whose names/signatures imply filtering, visibility, or conflict handling but whose callers implement those rules elsewhere, then collapse them into one typed selection-state model or remove the dead abstraction.
+- `starter-recipe-output-contract-audit`: compare a generated starter recipe across CLI command, builder URL, download URL, deploy dialog, and hydrated builder state to find fields that are serialized in one path but dropped or renamed in another.
+- `stats-cache-field-preservation-audit`: compare typed stats objects against cache merge/write paths, admin tables, and delta calculations to find fields that are silently dropped, reset, or reinterpreted.
+- `route-reachability-dead-stack-audit`: walk route/client entry imports to find unreferenced feature stacks, then connect each dead stack to package dependencies, tests, docs, and cleanup risk.
+- `static-content-invariant-audit`: find required product/category/content lookups that return first-item or empty fallbacks, then replace them with typed required lookups, build-time assertions, or explicit empty states.
+- `debounced-route-input-sync-audit`: find inputs that initialize from URL search and debounce writes back, then verify external route changes, browser back/forward, pending edits, and unmount cancellation keep visible state and URL state aligned.
+- `external-package-metadata-url-audit`: find npm/package metadata URLs rendered into anchors, image tags, markdown, or deploy links, then normalize protocols, repository shorthands, labels, and host allowlists before display.
+- `registry-ingestion-transaction-audit`: find package/version ingestion paths that delete and reinsert derived rows, then wrap replacement plus status updates in transactions with retry-safe previous data behavior.
+- `static-profile-url-validation-audit`: find maintainer/team/customer/sponsor data rendered into external anchors or images, then validate protocols, bare domains, host labels, and broken-profile fallbacks at build time.
+- `legacy-redirect-segment-audit`: find route redirect tables that use string prefix or `includes` checks, then replace them with URL-parsed, segment-aware matchers and tests for near-prefix paths and query-string false positives.
+- `public-catalog-visibility-audit`: compare source visibility flags against navigation, sitemap, API, LLM, partner, and category catalog outputs, then replace one-off exclusions with shared public/private selectors.
+- `markdown-link-protocol-audit`: find markdown/content link renderers that route or rewrite links by prefix, then add protocol-aware classification for same-origin routes, static assets, hashes, mailto/tel/custom schemes, and unsafe protocols.
+- `url-store-hydration-audit`: find React routes that hydrate Zustand/local component state from URL search params only on mount, then harden them for back/forward navigation, typed parsing, async option loading, and loop prevention.
+- `library-landing-route-wrapper-audit`: find generated-by-hand file-route wrappers that differ only by product id/component and extract a route factory or generator.
+- `package-slug-codec-audit`: audit package-name route codecs for scoped npm names, slash encoding, underscore collisions, canonical redirects, and unsafe decode failures.
+- `search-results-controller-extractor`: find duplicated search result panes that each own hits, infinite-scroll observers, filter chips, empty states, and summaries, then extract one controller with surface-specific rendering.
+- `global-panel-open-state-audit`: find hover/click/dirty global panels whose open state is a boolean, then replace them with explicit open reasons, pinned state, delayed-close ownership, and keyboard/touch semantics.
+- `inline-svg-duplicate-audit`: find unreferenced or near-duplicate inline SVG logo/icon components, fixed `id`/`clipPath` collisions, and candidates for static assets or one typed wrapper.
+- `product-landing-shell-extractor`: find repeated product landing imports, hero CTA shapes, download proof, prompt-copy controls, sponsor/community/footer tails, and demo lifecycle rules, then extract only the stable page shell contract.
+- `product-card-interaction-audit`: find listing cards that combine card-level click/keyboard handlers with nested buttons, links, swatches, or eager hover-media preloads, then split interactions and add preload budgets.
+- `repeated-form-control-id-audit`: find repeated table rows, field arrays, dialogs, or expanded panels that render fixed `id`/`htmlFor` pairs, then derive stable row-local ids.
+- `client-response-schema-audit`: find client fetch helpers that cast JSON to application types while the server only validates requests, then add shared response schemas and typed error envelopes.
+- `frontmatter-parse-resilience-audit`: find docs/content loaders where one malformed frontmatter block can break manifests, pages, or global indexes, then add typed parse results and skip/report behavior.
+- `partial-cache-hit-contract-audit`: find chunked cache readers that return partial data as if it were complete, then split full-hit, partial-hit, stale-hit, and miss semantics.
+- `programmatic-window-open-helper-audit`: find `window.open` callsites and normalize `noopener,noreferrer`, blocked-popup handling, fallback anchors, and user-gesture expectations.
+- `tarball-path-normalization-audit`: find package tarball paths stored or rendered as source URLs, then normalize path segments and block traversal/encoding edge cases.
+- `state-machine-final-transition-audit`: find XState/state-machine guards that test completion before assignment actions, then add final-item regression tests for each phase.
+- `landing-demo-dogfooding-audit`: compare product landing demos against the actual product APIs they describe, then classify each demo as intentional mock, static illustration, or API-backed example with lazy-loading and cleanup policy.
+- `route-link-helper-type-audit`: find local `Link` wrappers that accept `to: string`, loose params, or secondary-link route strings, then replace them with typed route helpers or one typed CTA primitive.
+- `public-preview-bundle-query-audit`: find marketing pages that mount registry/stats/chart previews on initial render, then decide which should be static, viewport-gated, or lazy-loaded behind interaction.
+- `game-engine-lifecycle-and-vector-audit`: review Three.js game code for shared geometry ownership, async loader cancellation, timer cleanup, zero-distance vector math, and duplicate active/dead scene stacks.
+- `directory-view-mode-component-audit`: find public directory pages that copy segmented view controls, card grid switches, and animation wrappers, then extract a typed reusable controller without coupling route filters together.
+- `auth-scoped-query-cache-audit`: find current-user/private React Query keys that omit user/session fingerprints, then add scoped keys and auth transition cache clearing.
+- `analytics-cardinality-privacy-audit`: find analytics props that carry raw UUIDs, random seeds, user-entered strings, URLs, or other high-cardinality identifiers, then replace them with bounded cohorts, versions, and explicit debug-only channels.
+- `admin-capability-contract-audit`: compare admin nav items, route `beforeLoad` guards, client guard components, and server-function capability checks so partial moderators never see or trigger admin-only surfaces.
+- `capability-boundary-validation-audit`: find server functions, loaders, and client helpers that cast capability strings instead of validating against the shared capability registry.
+- `doc-feedback-scale-contract-audit`: cap feedback content/selectors/pagination, move leaderboard aggregation out of all-table JS reads, and extract one cache-update helper for feedback envelopes.
+- `worker-background-task-audit`: find fire-and-forget promises inside request handlers, then convert them to awaited work, queues, or runtime background-task primitives.
+- `accessible-table-disclosure-audit`: find clickable table headers/rows that rely on pointer interaction and replace them with native buttons, `aria-sort`, and disclosure semantics.
+- `admin-keyed-row-action-audit`: find table/list actions whose mutation state disables every row, then replace them with keyed pending/error state and per-row double-click guards.
+- `route-font-asset-audit`: compare route `<link>` font loads, CSS `@import`s, and Tailwind font tokens to remove duplicate families, unused families, and mismatched mono/display tokens.
+
+## Suggested Next Passes
+
+1. Triage the P0/P1/P2 findings into small fix PRs, starting with auth/OAuth, analytics proxy headers, builder endpoint guards, stats fan-out caps, and Shopify/search validation.
+2. Run `ANALYZE=1 pnpm build` only when ready to pay the build cost, then compare actual chunks against the bundle findings above.
+3. Add focused tests for the high-risk fixes before changing auth/token, builder, stats, Intent ingestion, markdown, and Shopify behavior.
+4. Add a reachability/dead-code pass to the regular workflow so unused SVG, R3F, shop promo, and global CSS utility code does not grow back.
+
+## Tests
+
+No tests were run for this report. This pass made no application code changes.
diff --git a/docs/ssr-rsc-migration-findings.md b/docs/ssr-rsc-migration-findings.md
new file mode 100644
index 000000000..3ba8013cf
--- /dev/null
+++ b/docs/ssr-rsc-migration-findings.md
@@ -0,0 +1,149 @@
+# SSR + Hydrate vs RSC findings
+
+Date: 2026-06-20
+
+Scope: local production builds of tanstack.com, with Redact enabled for both variants. The RSC baseline came from the current HEAD before the SSR migration work. The SSR variant is this worktree after removing RSC rendering and adding targeted `Hydrate` timing for below-fold media-heavy sections.
+
+## Current conclusion
+
+SSR + normal hydration + targeted `Hydrate` timing is the stronger direction for tanstack.com.
+
+RSC reduced some client-side rendering responsibility, but it did so by sending rendered payloads, Flight data, extra server-function surfaces, and a lot of architecture-specific indirection. Once SSR is paired with simple visible hydration gates for below-fold media/query-heavy sections, it matches or beats the RSC baseline on first-load production measurements and is smaller during long sessions for docs, examples, and blog navigation.
+
+The important correction from the first SSR pass: plain SSR without timing gates can eagerly schedule too much below-fold media. Lighthouse exposed this immediately on home and Query landing. Adding `Hydrate` around home social proof, home community, landing community, and sponsor pack sections fixed that without bringing back the RSC pipeline.
+
+## Architecture delta
+
+- RSC disabled in `vite.config.ts`; `@vitejs/plugin-rsc` removed.
+- Redact is always enabled for this matrix.
+- Markdown/docs/blog now move raw markdown/source data through normal server functions, then render locally with `@tanstack/markdown` and `@tanstack/highlight`.
+- Deleted RSC markdown/code rendering files, RSC landing-code-example server function, and RSC heading context.
+- Landing code examples are static route/component data, not rendered RSC payloads.
+- Targeted `Hydrate` timing remains only as byte scheduling for below-fold sections.
+
+Code size/complexity:
+
+| Metric                       |                                           Result |
+| ---------------------------- | -----------------------------------------------: |
+| Source diff                  |                          113 files, +920 / -3946 |
+| Current SSR client dist      |                                      92,258.3 KB |
+| RSC baseline client dist     |                                      92,687.6 KB |
+| Remaining RSC references     |                                             none |
+| Remaining `use client` files | `CopyPageDropdown.tsx`, `CopyMarkdownButton.tsx` |
+
+## Markdown and Highlight package story
+
+The original reason RSC helped tanstack.com was real: our docs/blog path was making the browser pay for markdown rendering and Shiki. The earlier performance work measured about 1.1 MiB of script transfer on a docs page, with about 358 KiB clearly tied to syntax highlighting alone: Shiki, its WASM/runtime pieces, themes, and language chunks. The RSC migration solved that by moving markdown and code rendering back to the server, and the RSC launch post recorded the client JS graph dropping about 153 KB gzip on docs/blog pages and about 40 KB gzip on docs example pages.
+
+This SSR pass keeps the same underlying bet, but changes the implementation. Instead of using RSC as the mechanism that hides the markdown/highlight cost from the client, we made the markdown/highlight cost small enough to ship normally, then moved only raw markdown/source data through Start server functions. That is the real byte story: with the custom markdown/highlight libraries in place, SSR is a net negative on first-load gzip across the measured content pages, `Hydrate` fixes the byte scheduling problem for below-fold sections, and long sessions compound the win because each navigation reuses the renderer already sitting in the client bundle instead of transferring rendered Flight output again.
+
+Current packages in this worktree:
+
+| Package                          | npm unpacked size | Files | Notes                                                                  |
+| -------------------------------- | ----------------: | ----: | ---------------------------------------------------------------------- |
+| `@tanstack/highlight@0.0.2`      |          80.6 KiB |    62 | tiny tokenizer/highlighter, class-based output, isolated theme exports |
+| `@tanstack/markdown@0.0.4`       |          79.2 KiB |    44 | parser/rendering path for the markdown subset tanstack.com needs       |
+| Combined TanStack packages       |         159.8 KiB |   106 | no runtime dependencies, React is a peer for markdown                  |
+| Shiki 4.0.2 direct package graph |         10.49 MiB | 1,725 | `shiki` plus direct `@shikijs/*` packages and `vscode-textmate`        |
+
+That package-size comparison is npm unpacked size, not browser transfer. The browser transfer fact we already have is the old 358 KiB docs-page script cost tied to Shiki. The package fact is still useful for the post because it shows how much general-purpose machinery we stopped depending on: the Shiki package graph is about 67x larger than the two new TanStack packages combined before app bundling even starts.
+
+The current highlight integration is also simpler than the old Shiki path:
+
+- one highlighted HTML tree, not duplicated light/dark markup,
+- no inline token styles,
+- theme CSS generated from `createThemeCss`,
+- light mode uses `githubLightTheme`,
+- dark mode uses `auroraXTheme`,
+- docs smoke test found 20 `pre.th-code` blocks, 381 token spans, 0 `pre.shiki` blocks, and 0 inline token styles.
+
+The blog angle should be framed carefully: AI helped make it practical to write purpose-built packages quickly, but the win is not "AI wrote magic." The win is that we replaced a broad markdown plus Shiki stack with small libraries designed around the exact rendering contract we need, then measured whether that was enough to remove the RSC pipeline without giving back the performance. So far, the answer is yes for the tested pages, with one important caveat: these packages are young enough that conformance matters. We found a tight-list regression in `@tanstack/markdown` where Related Resources rendered as `<li><p>...</p></li>`, fixed that link-list case in `@tanstack/markdown@0.0.4`, and found an image-sizing regression in the site wrapper around markdown images. The future post should include that part too, because the cost of going tiny is owning the test suite.
+
+Remaining markdown package issue: `@tanstack/markdown@0.0.4` still marks some tight lists as loose when the list is followed by another block. Minimal repro:
+
+````md
+Call server functions from:
+
+- **Route loaders** - Perfect for data fetching
+- **Components** - Use with `useServerFn()` hook
+
+```tsx
+const x = 1
+```
+````
+
+Expected: direct `<li><strong>Route loaders</strong> ...</li>` items. Current output: `<li><p><strong>Route loaders</strong> ...</p></li>`. This is not a tanstack.com CSS issue, and the temporary `li > p` styling workaround was removed.
+
+## First-load HTML + JS/CSS
+
+Production servers, local Node, `.env.local` copied from the main checkout. This table counts HTML plus scheduled local JS/CSS assets. It excludes images/fonts because those are better captured by Lighthouse byte weight.
+
+| Page                                                 | RSC total gzip | SSR + Hydrate total gzip |    Delta | RSC HTML gzip | SSR HTML gzip | Asset gzip delta |
+| ---------------------------------------------------- | -------------: | -----------------------: | -------: | ------------: | ------------: | ---------------: |
+| `/`                                                  |       589.3 KB |                 586.7 KB |  -2.6 KB |       88.2 KB |       36.1 KB |         +49.5 KB |
+| `/query/latest`                                      |       609.5 KB |                 592.6 KB | -16.9 KB |      106.9 KB |       47.9 KB |         +42.2 KB |
+| `/form/latest`                                       |       593.7 KB |                 579.9 KB | -13.8 KB |       95.0 KB |       39.0 KB |         +42.2 KB |
+| `/router/latest`                                     |       593.5 KB |                 594.3 KB |  +0.8 KB |       89.7 KB |       36.0 KB |         +54.6 KB |
+| `/router/latest/docs/overview`                       |       582.7 KB |                 568.8 KB | -13.8 KB |       91.4 KB |       37.7 KB |         +39.9 KB |
+| `/router/latest/docs/framework/react/examples/basic` |       601.2 KB |                 585.9 KB | -15.3 KB |       97.1 KB |       37.5 KB |         +44.3 KB |
+| `/blog/tanstack-table-v9-typescript-performance`     |       596.2 KB |                 585.4 KB | -10.8 KB |      106.7 KB |       45.3 KB |         +50.6 KB |
+
+Interpretation: SSR cuts roughly 52-61 KB gzip from HTML on every tested page. It adds 40-55 KB gzip of JS/CSS because the client now owns markdown/code rendering. Net first-load gzip is better on every tested page except Router landing, where it is effectively flat.
+
+## Long-session navigation payloads
+
+These are direct `_serverFn` payloads with Start's real Seroval encoding. This is the cleanest test of the theory that long sessions should favor SSR because the client already has the shared rendering logic.
+
+| Payload                      | RSC gzip | SSR gzip |   Delta |
+| ---------------------------- | -------: | -------: | ------: |
+| Home recent posts            |   0.7 KB |   0.7 KB |  0.0 KB |
+| Router docs config           |   2.2 KB |   2.2 KB |  0.0 KB |
+| Query landing code example   |   4.6 KB |   0.0 KB | -4.6 KB |
+| Router docs overview content |   5.2 KB |   3.7 KB | -1.5 KB |
+| Router example directory     |   0.6 KB |   0.6 KB |  0.0 KB |
+| Router example initial file  |   5.6 KB |   1.5 KB | -4.1 KB |
+| Heavy blog post content      |  15.0 KB |   9.4 KB | -5.6 KB |
+
+The RSC payloads contain `contentRsc` and rendered code markers. The SSR payloads contain raw markdown/source data only. Shared config and normal JSON data are identical between variants.
+
+## Lighthouse desktop
+
+Lighthouse 13.4.0, local Chrome, desktop preset, production servers. Treat these as directional local lab numbers, not final PSI numbers.
+
+| Page                                             | RSC score | SSR + Hydrate score | RSC FCP | SSR FCP | RSC LCP | SSR LCP | RSC CLS | SSR CLS | RSC byte weight | SSR byte weight |
+| ------------------------------------------------ | --------: | ------------------: | ------: | ------: | ------: | ------: | ------: | ------: | --------------: | --------------: |
+| `/`                                              |        67 |                  72 | 2245 ms | 2288 ms | 3305 ms | 2728 ms |   0.000 |   0.000 |       6493.3 KB |       3253.9 KB |
+| `/query/latest`                                  |        72 |                  73 | 2442 ms | 2362 ms | 2562 ms | 2462 ms |   0.000 |   0.000 |       3190.4 KB |       2625.3 KB |
+| `/router/latest/docs/overview`                   |        75 |                  75 | 2202 ms | 2202 ms | 2422 ms | 2382 ms |   0.000 |   0.000 |       3493.3 KB |       2642.5 KB |
+| `/blog/tanstack-table-v9-typescript-performance` |        70 |                  75 | 2321 ms | 2202 ms | 2421 ms | 2342 ms |   0.116 |   0.000 |       4197.5 KB |       2776.2 KB |
+
+The pre-Hydrate SSR pass was misleading: home was 18,670.7 KB byte weight and Query was 11,562.6 KB because recent blog headers, partner assets, sponsor data, and GitHub avatars were eagerly scheduled. The current SSR + Hydrate pass removes that regression.
+
+## Hydration/navigation smoke
+
+Production SSR server on a clean port:
+
+- Loaded `/router/latest`.
+- Clicked the real `/router/latest/docs/overview` link in the browser.
+- URL and title updated to the docs overview page.
+- Clean server log showed no document `GET /router/latest/docs/overview`; it showed only server-function requests for route data.
+- Browser console warnings/errors were empty.
+
+That does not replace a full navigation test suite, but it specifically checks the earlier concern that hydration mismatches were causing client navigations to degrade into hard navigations.
+
+## Caveats
+
+- These are local production numbers, not hosted PageSpeed Insights results.
+- The RSC baseline temp checkout needed the same `.env.local` as this worktree; without it, library/docs routes fell into fallback paths and measurements were invalid.
+- Local Lighthouse includes image optimization behavior from the local Netlify image shim, so byte-weight direction is useful but production CDN numbers still need confirmation.
+- Hydrate boundaries should stay targeted. They are useful for byte scheduling below the fold, not as a replacement for fixing hydration mismatches or CLS.
+
+## Decision
+
+Keep moving toward the simple SSR architecture:
+
+- no RSC build pipeline,
+- raw markdown/source over server functions,
+- tiny fast markdown/highlight libraries on the client path,
+- targeted `Hydrate` timing for below-fold media/query work,
+- deploy-preview PSI/Lighthouse before merging.
diff --git a/eslint.config.mjs b/eslint.config.mjs
deleted file mode 100644
index dc98466a7..000000000
--- a/eslint.config.mjs
+++ /dev/null
@@ -1,68 +0,0 @@
-import js from '@eslint/js'
-import * as tseslint from 'typescript-eslint'
-import react from 'eslint-plugin-react'
-import reactHooks from 'eslint-plugin-react-hooks'
-import jsxA11y from 'eslint-plugin-jsx-a11y'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-const ignores = [
-  'node_modules',
-  'dist',
-  'build',
-  '.content-collections',
-  '.tanstack-start',
-  '.netlify',
-  'public',
-  'convex/.temp',
-]
-
-export default [
-  { ignores },
-  {
-    files: ['**/*.{js,jsx}'],
-    ...js.configs.recommended,
-  },
-  ...tseslint.configs.recommended,
-  {
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      parserOptions: {
-        tsconfigRootDir: __dirname,
-      },
-    },
-    rules: {
-      '@typescript-eslint/no-unused-vars': [
-        'warn',
-        {
-          argsIgnorePattern: '(^_)|(^__+$)|(^e$)|(^error$)',
-          varsIgnorePattern: '(^_)|(^__+$)|(^e$)|(^error$)',
-          caughtErrorsIgnorePattern: '(^_)|(^__+$)|(^e$)|(^error$)',
-        },
-      ],
-      'no-redeclare': 'off',
-      '@typescript-eslint/no-redeclare': 'error',
-      'no-shadow': 'off',
-      '@typescript-eslint/no-explicit-any': 'off',
-    },
-  },
-  {
-    files: ['**/*.{ts,tsx,js,jsx}'],
-    plugins: {
-      react,
-      'react-hooks': reactHooks,
-      'jsx-a11y': jsxA11y,
-    },
-    settings: {
-      react: { version: 'detect' },
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      ...jsxA11y.configs.recommended.rules,
-      'react-hooks/set-state-in-effect': 'warn',
-    },
-  },
-]
diff --git a/media/brand.sketch b/media/brand.sketch
index 04d53b5a8..a62111f6f 100644
Binary files a/media/brand.sketch and b/media/brand.sketch differ
diff --git a/netlify.toml b/netlify.toml
deleted file mode 100644
index b053463bf..000000000
--- a/netlify.toml
+++ /dev/null
@@ -1,23 +0,0 @@
-[build.environment]
-  NODE_OPTIONS = "--max-old-space-size=4096"
-
-[build]
-  command = "vite build && cp src/instrument.server.mjs dist/server"
-  publish = "dist/client"
-
-[functions]
-  directory = "netlify/functions"
-
-[[headers]]
-  for = "/*"
-  [headers.values]
-    X-Frame-Options = "DENY"
-    X-Content-Type-Options = "nosniff"
-    X-XSS-Protection = "1; mode=block"
-    Referrer-Policy = "strict-origin-when-cross-origin"
-    Permissions-Policy = "camera=(), microphone=(), geolocation=()"
-
-[[headers]]
-  for = "/*"
-  [headers.values]
-    Strict-Transport-Security = "max-age=31536000; includeSubDomains"
diff --git a/netlify/functions/refresh-github-stats-background.ts b/netlify/functions/refresh-github-stats-background.ts
deleted file mode 100644
index 42b065d4e..000000000
--- a/netlify/functions/refresh-github-stats-background.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { Config } from '@netlify/functions'
-import { refreshGitHubOrgStats } from '~/utils/stats.functions'
-
-/**
- * Netlify Scheduled Function - Refresh GitHub stats cache
- *
- * This function refreshes pre-aggregated GitHub stats for the TanStack organization:
- * - Organization-level: stars, contributors, dependents, repositories
- * - Per-library: stars, contributors, dependents for each library repo
- *
- * Scheduled: Runs automatically every 6 hours
- *
- * Performance Impact:
- * - Refresh time: ~1-2 minutes for org + all library repos
- * - After refresh: ~100-200ms per request (served from cache)
- */
-const handler = async (req: Request) => {
-  const { next_run } = await req.json()
-
-  console.log('[refresh-github-stats] Starting GitHub stats refresh...')
-
-  const startTime = Date.now()
-
-  try {
-    const org = 'tanstack'
-
-    const { orgStats, libraryResults, libraryErrors } =
-      await refreshGitHubOrgStats(org)
-
-    const duration = Date.now() - startTime
-    console.log(
-      `[refresh-github-stats] ✓ Completed in ${duration}ms - GitHub Org: ${orgStats.starCount.toLocaleString()} stars, Libraries: ${
-        libraryResults.length
-      } refreshed, ${libraryErrors.length} failed`,
-    )
-    console.log('[refresh-github-stats] Next invocation at:', next_run)
-  } catch (error) {
-    const duration = Date.now() - startTime
-    const errorMessage = error instanceof Error ? error.message : String(error)
-    const errorStack = error instanceof Error ? error.stack : undefined
-
-    console.error(
-      `[refresh-github-stats] ✗ Failed after ${duration}ms:`,
-      errorMessage,
-    )
-    if (errorStack) {
-      console.error('[refresh-github-stats] Stack:', errorStack)
-    }
-  }
-}
-
-export default handler
-
-export const config: Config = {
-  schedule: '0 */6 * * *', // Every 6 hours
-}
diff --git a/netlify/functions/refresh-npm-stats-background.ts b/netlify/functions/refresh-npm-stats-background.ts
deleted file mode 100644
index 144d04e2d..000000000
--- a/netlify/functions/refresh-npm-stats-background.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { Config } from '@netlify/functions'
-import { refreshNpmOrgStats } from '~/utils/stats.functions'
-
-/**
- * Netlify Scheduled Function - Refresh NPM stats cache
- *
- * This function refreshes pre-aggregated NPM stats for the TanStack organization:
- * - Total downloads across all packages (including legacy packages)
- * - Per-package download counts and rates
- *
- * Scheduled: Runs automatically every 6 hours
- * Concurrency: 8 packages at a time, 500ms delay between packages
- *
- * Performance Impact:
- * - Refresh time: ~10-20 minutes for 203 packages (199 scoped + 4 legacy)
- * - After refresh: ~100-200ms per request (served from cache)
- */
-const handler = async (req: Request) => {
-  const { next_run } = await req.json()
-
-  console.log('[refresh-npm-stats] Starting NPM stats refresh...')
-
-  const startTime = Date.now()
-
-  try {
-    const org = 'tanstack'
-
-    // Refresh NPM org stats (fetches all packages, aggregates, and caches)
-    console.log('[refresh-npm-stats] Refreshing NPM org stats...')
-    const npmStats = await refreshNpmOrgStats(org)
-
-    const duration = Date.now() - startTime
-    console.log(
-      `[refresh-npm-stats] ✓ Completed in ${duration}ms - NPM: ${npmStats.totalDownloads.toLocaleString()} downloads (${
-        Object.keys(npmStats.packageStats || {}).length
-      } packages)`,
-    )
-    console.log('[refresh-npm-stats] Next invocation at:', next_run)
-  } catch (error) {
-    const duration = Date.now() - startTime
-    const errorMessage = error instanceof Error ? error.message : String(error)
-    const errorStack = error instanceof Error ? error.stack : undefined
-
-    console.error(
-      `[refresh-npm-stats] ✗ Failed after ${duration}ms:`,
-      errorMessage,
-    )
-    if (errorStack) {
-      console.error('[refresh-npm-stats] Stack:', errorStack)
-    }
-  }
-}
-
-export default handler
-
-export const config: Config = {
-  schedule: '0 */6 * * *', // Every 6 hours
-}
diff --git a/netlify/functions/sync-blog-posts-background.ts b/netlify/functions/sync-blog-posts-background.ts
deleted file mode 100644
index d451a61ef..000000000
--- a/netlify/functions/sync-blog-posts-background.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { Config } from '@netlify/functions'
-import { syncBlogPosts } from '~/server/feed/blog'
-
-/**
- * Netlify Scheduled Function - Sync blog posts from content collections
- *
- * This function syncs blog posts from content collections into the feed database:
- * - Reads all posts from content-collections (available in deployed server)
- * - Creates/updates feed entries with excerpt and link to full post
- * - Marks entries as auto-synced
- *
- * Scheduled: Runs automatically every 5 minutes to pick up new blog posts after deployment
- * Since the sync is idempotent, running frequently is safe.
- */
-const handler = async (req: Request) => {
-  const { next_run } = await req.json()
-
-  console.log('[sync-blog-posts-background] Starting blog posts sync...')
-
-  const startTime = Date.now()
-
-  try {
-    const result = await syncBlogPosts()
-
-    const duration = Date.now() - startTime
-    console.log(
-      `[sync-blog-posts-background] ✓ Completed in ${duration}ms - Created: ${result.created}, Updated: ${result.updated}, Total: ${result.syncedCount}`,
-    )
-    if (result.errors.length > 0) {
-      console.error(
-        `[sync-blog-posts-background] Errors: ${result.errors.length}`,
-        result.errors,
-      )
-    }
-    console.log('[sync-blog-posts-background] Next invocation at:', next_run)
-  } catch (error) {
-    const duration = Date.now() - startTime
-    const errorMessage = error instanceof Error ? error.message : String(error)
-    const errorStack = error instanceof Error ? error.stack : undefined
-
-    console.error(
-      `[sync-blog-posts-background] ✗ Failed after ${duration}ms:`,
-      errorMessage,
-    )
-    if (errorStack) {
-      console.error('[sync-blog-posts-background] Stack:', errorStack)
-    }
-  }
-}
-
-export default handler
-
-export const config: Config = {
-  schedule: '*/5 * * * *', // Every 5 minutes
-}
diff --git a/netlify/functions/sync-github-releases-background.ts b/netlify/functions/sync-github-releases-background.ts
deleted file mode 100644
index 29d93be55..000000000
--- a/netlify/functions/sync-github-releases-background.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { Config } from '@netlify/functions'
-import { syncGitHubReleases } from '~/server/feed/github.functions'
-
-/**
- * Netlify Scheduled Function - Sync GitHub releases
- *
- * This function syncs GitHub releases from all TanStack repos:
- * - Fetches new releases since last sync
- * - Creates/updates feed items in the database
- * - Marks releases as synced to avoid duplicates
- *
- * Scheduled: Runs automatically every 6 hours
- */
-const handler = async (req: Request) => {
-  const { next_run } = await req.json()
-
-  console.log(
-    '[sync-github-releases-background] Starting GitHub release sync...',
-  )
-
-  const startTime = Date.now()
-
-  try {
-    const result = await syncGitHubReleases()
-
-    const duration = Date.now() - startTime
-    console.log(
-      `[sync-github-releases-background] ✓ Completed in ${duration}ms - Synced: ${result.syncedCount}, Skipped: ${result.skippedCount}, Errors: ${result.errorCount}`,
-    )
-    console.log(
-      '[sync-github-releases-background] Next invocation at:',
-      next_run,
-    )
-  } catch (error) {
-    const duration = Date.now() - startTime
-    const errorMessage = error instanceof Error ? error.message : String(error)
-    const errorStack = error instanceof Error ? error.stack : undefined
-
-    console.error(
-      `[sync-github-releases-background] ✗ Failed after ${duration}ms:`,
-      errorMessage,
-    )
-    if (errorStack) {
-      console.error('[sync-github-releases-background] Stack:', errorStack)
-    }
-  }
-}
-
-export default handler
-
-export const config: Config = {
-  schedule: '0 */6 * * *', // Every 6 hours
-}
diff --git a/opencode.json b/opencode.json
index 06ce847b6..8f9b80710 100644
--- a/opencode.json
+++ b/opencode.json
@@ -1,25 +1,4 @@
 {
   "$schema": "https://opencode.ai/config.json",
-  "mcp": {
-    "playwright": {
-      "type": "local",
-      "command": ["npx", "-y", "@playwright/mcp@latest"],
-      "enabled": false
-    },
-    "Sentry": {
-      "type": "remote",
-      "url": "https://mcp.sentry.dev/mcp",
-      "enabled": false
-    },
-    "tanstack": {
-      "type": "remote",
-      "url": "https://tanstack.com/api/mcp",
-      "enabled": true
-    },
-    "tanstack-dev": {
-      "type": "remote",
-      "url": "http://localhost:3000/api/mcp",
-      "enabled": false
-    }
-  }
+  "mcp": {}
 }
diff --git a/package.json b/package.json
index 794e25347..9a7071c39 100644
--- a/package.json
+++ b/package.json
@@ -3,175 +3,159 @@
   "private": true,
   "sideEffects": false,
   "repository": "https://github.com/TanStack/tanstack.com.git",
-  "packageManager": "pnpm@10.26.0",
+  "packageManager": "pnpm@11.1.0",
   "type": "module",
   "scripts": {
     "dev": "pnpm run with-env vite dev",
-    "with-env": "dotenv -e ../../.env",
+    "with-env": "dotenv -e .env.local",
     "dev:frontend": "pnpm run with-env vite dev",
-    "build": "vite build && cp src/instrument.server.mjs dist/server",
-    "start": "vite start",
-    "lint": "eslint --cache --ext .ts,.tsx ./src",
-    "format": "prettier --experimental-cli --ignore-unknown '**/*' --write",
-    "linkAll": "node scripts/link.js",
+    "dev:cloudflare": "pnpm run with-env -- sh -c 'DISABLE_REDACT=true vite dev'",
+    "build": "vite build --logLevel warn",
+    "build:cloudflare": "pnpm run build",
+    "preview": "vite preview",
+    "preview:cloudflare": "pnpm run preview",
+    "deploy:cloudflare": "pnpm run build:cloudflare && wrangler deploy --name tanstack-com && pnpm run purge:cloudflare",
+    "purge:cloudflare": "pnpm run with-env -- node scripts/purge-cloudflare-cache.mjs",
+    "cf:typegen": "wrangler types",
+    "content:build": "node scripts/build-content-collections.mjs",
+    "lint": "oxlint --type-aware --disable-nested-config",
+    "format": "oxfmt --write",
     "db:generate": "drizzle-kit generate",
     "db:migrate": "drizzle-kit migrate",
     "db:push": "drizzle-kit push",
     "db:studio": "drizzle-kit studio",
+    "docs:webhooks:plan": "tsx scripts/sync-docs-webhooks.ts --dry-run",
+    "docs:webhooks:sync": "tsx scripts/sync-docs-webhooks.ts",
+    "docs:links:check": "tsx scripts/check-docs-menu-links.ts",
     "husky": "pnpm run format && pnpm run test",
-    "test": "run-p test:tsc test:lint test:smoke",
+    "pretest": "pnpm run content:build",
+    "test": "run-p test:tsc test:lint test:unit",
     "test:tsc": "tsc",
     "test:lint": "pnpm run lint",
-    "test:smoke": "tsx tests/smoke.ts",
-    "test:e2e": "playwright test",
+    "test:unit": "tsx --test \"tests/**/*.test.ts\"",
     "prepare": "husky"
   },
   "dependencies": {
-    "@auth/core": "0.37.0",
-    "@floating-ui/react": "^0.27.8",
-    "@hono/mcp": "^0.2.3",
-    "@modelcontextprotocol/sdk": "^1.25.2",
-    "@netlify/functions": "^5.1.0",
-    "@netlify/neon": "^0.1.0",
-    "@netlify/vite-plugin-tanstack-start": "^1.0.2",
-    "@number-flow/react": "^0.4.1",
+    "@fingerprintjs/fingerprintjs-pro-react": "^2.7.1",
+    "@floating-ui/react": "^0.27.19",
+    "@kapaai/react-sdk": "^0.9.10",
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "@observablehq/plot": "^0.6.17",
-    "@octokit/graphql": "^7.0.2",
+    "@octokit/graphql": "^9.0.3",
     "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.12",
-    "@radix-ui/react-toast": "^1.2.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
-    "@sentry/node": "^10.33.0",
-    "@sentry/tanstackstart-react": "^10.32.1",
-    "@sentry/vite-plugin": "^4.6.1",
-    "@stackblitz/sdk": "^1.11.0",
-    "@tailwindcss/typography": "^0.5.13",
-    "@tailwindcss/vite": "^4.1.11",
-    "@tanstack/cta-engine": "^0.47.0",
-    "@tanstack/cta-framework-react-cra": "^0.47.0",
-    "@tanstack/cta-ui": "^0.47.0",
-    "@tanstack/cta-ui-base": "^0.47.0",
-    "@tanstack/pacer": "^0.16.4",
-    "@tanstack/react-pacer": "^0.17.4",
-    "@tanstack/react-query": "^5.90.12",
-    "@tanstack/react-router": "1.141.6",
-    "@tanstack/react-router-devtools": "1.141.6",
-    "@tanstack/react-router-ssr-query": "1.141.6",
-    "@tanstack/react-start": "1.141.8",
+    "@sentry/browser": "^10.47.0",
+    "@sentry/node": "^10.47.0",
+    "@sentry/tanstackstart-react": "^10.47.0",
+    "@shopify/hydrogen-react": "^2026.4.0",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.2.2",
+    "@takumi-rs/core": "2.0.0-beta.12",
+    "@takumi-rs/helpers": "2.0.0-beta.12",
+    "@takumi-rs/image-response": "2.0.0-beta.12",
+    "@takumi-rs/wasm": "2.0.0-beta.12",
+    "@tanstack/ai": "^0.20.1",
+    "@tanstack/ai-anthropic": "^0.10.1",
+    "@tanstack/ai-client": "^0.11.3",
+    "@tanstack/ai-openai": "^0.9.5",
+    "@tanstack/create": "^0.68.4",
+    "@tanstack/highlight": "^0.0.3",
+    "@tanstack/markdown": "^0.0.9",
+    "@tanstack/pacer": "^0.21.1",
+    "@tanstack/react-hotkeys": "^0.10.0",
+    "@tanstack/react-pacer": "^0.22.1",
+    "@tanstack/react-query": "^5.100.11",
+    "@tanstack/react-router": "1.170.16",
+    "@tanstack/react-router-devtools": "1.167.0",
+    "@tanstack/react-router-ssr-query": "1.167.1",
+    "@tanstack/react-start": "1.168.26",
+    "@tanstack/react-start-client": "1.168.14",
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/workflow-core": "0.0.4",
+    "@tanstack/workflow-runtime": "0.0.3",
+    "@tanstack/workflow-store-drizzle-postgres": "0.0.5",
     "@types/d3": "^7.4.3",
     "@uploadthing/react": "^7.3.3",
-    "@visx/hierarchy": "^2.10.0",
-    "@visx/responsive": "^2.10.0",
-    "@vitejs/plugin-react": "^4.3.3",
-    "@xstate/react": "^6.0.0",
-    "algoliasearch": "^5.23.4",
-    "cheerio": "^1.1.2",
+    "@visx/hierarchy": "^3.12.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@webcontainer/api": "^1.6.1",
+    "@xstate/react": "^6.1.0",
+    "algoliasearch": "^5.50.0",
+    "cheerio": "^1.2.0",
     "cmdk": "^1.1.1",
     "d3": "^7.9.0",
-    "date-fns": "^2.30.0",
+    "diff": "^8.0.4",
     "discord-interactions": "^4.4.0",
-    "drizzle-orm": "^0.44.7",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "drizzle-orm": "^0.45.2",
+    "encoding-sniffer": "^0.2.1",
+    "gifenc": "^1.0.3",
     "gray-matter": "^4.0.3",
-    "hast-util-is-element": "^3.0.0",
-    "hast-util-to-string": "^3.0.1",
-    "hono": "^4.11.3",
-    "html-react-parser": "^5.1.10",
+    "iconv-lite": "^0.7.2",
     "jszip": "^3.10.1",
-    "lru-cache": "^7.13.1",
-    "lucide-react": "^0.561.0",
-    "mermaid": "^11.11.0",
-    "postgres": "^3.4.7",
-    "posthog-node": "^5.20.0",
-    "react": "^19.2.0",
+    "lru-cache": "^11.2.7",
+    "lucide-react": "^1.7.0",
+    "maath": "^0.10.8",
+    "match-sorter": "^8.2.0",
+    "mermaid": "^11.14.0",
+    "parse5": "^7.3.0",
+    "parse5-parser-stream": "^7.1.2",
+    "postgres": "^3.4.8",
+    "react": "19.2.3",
     "react-colorful": "^5.6.1",
-    "react-dom": "^19.2.0",
-    "react-easy-crop": "^5.5.6",
-    "react-instantsearch": "7",
-    "rehype-autolink-headings": "^7.1.0",
-    "rehype-callouts": "^2.1.2",
-    "rehype-parse": "^9.0.1",
-    "rehype-raw": "^7.0.0",
-    "rehype-slug": "^6.0.0",
-    "rehype-stringify": "^10.0.1",
-    "remark-gfm": "^4.0.1",
-    "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.2",
-    "remove-markdown": "^0.5.0",
-    "resend": "^6.6.0",
-    "shiki": "^1.4.0",
-    "tailwind-merge": "^1.14.0",
-    "three": "^0.182.0",
+    "react-dom": "19.2.3",
+    "react-easy-crop": "^5.5.7",
+    "react-instantsearch": "^7.29.0",
+    "remove-markdown": "^0.6.3",
+    "resend": "^6.10.0",
+    "sonner": "^2.0.7",
+    "streamdown": "^2.5.0",
+    "tailwind-merge": "^3.5.0",
+    "tar-stream": "^3.1.8",
+    "three": "^0.183.2",
     "troika-three-text": "^0.52.4",
-    "unified": "^11.0.5",
-    "unist-util-visit": "^5.0.0",
     "uploadthing": "^7.7.4",
-    "valibot": "^1.2.0",
-    "vite-bundle-analyzer": "^1.2.1",
-    "vite-tsconfig-paths": "^5.0.1",
-    "xstate": "^5.25.0",
-    "zod": "^4.3.5",
-    "zustand": "^4.5.2"
+    "valibot": "^1.3.1",
+    "vite-bundle-analyzer": "^1.3.6",
+    "xstate": "^5.30.0",
+    "yaml": "^2.9.0",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
-    "@content-collections/core": "^0.8.2",
-    "@content-collections/vite": "^0.2.4",
-    "@eslint/js": "^9.39.1",
-    "@playwright/test": "^1.57.0",
-    "@shikijs/transformers": "^1.10.3",
-    "@types/express": "^5.0.3",
+    "@cloudflare/vite-plugin": "^1.42.0",
+    "@content-collections/core": "^0.14.3",
+    "@content-collections/vite": "^0.2.9",
+    "@tanstack/devtools-vite": "^0.7.0",
+    "@tanstack/react-devtools": "^0.10.5",
+    "@tanstack/react-query-devtools": "^5.100.11",
+    "@tanstack/redact": "^0.0.18",
     "@types/hast": "^3.0.4",
-    "@types/node": "^24.3.0",
-    "@types/pg": "^8.15.6",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
+    "@types/node": "^25.5.0",
+    "@types/pg": "^8.20.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "19.2.3",
     "@types/remove-markdown": "^0.3.4",
-    "@types/three": "^0.182.0",
-    "autoprefixer": "^10.4.18",
-    "dotenv-cli": "^8.0.0",
-    "drizzle-kit": "^0.31.7",
-    "eslint": "^9.39.1",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "@types/tar-stream": "^3.1.4",
+    "@types/three": "^0.183.1",
+    "dotenv-cli": "^11.0.0",
+    "drizzle-kit": "^0.31.10",
+    "esbuild": "^0.27.4",
     "husky": "^9.1.7",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.35",
-    "prettier": "^3.7.4",
+    "oxfmt": "^0.43.0",
+    "oxlint": "^1.58.0",
+    "oxlint-tsgolint": "^0.19.0",
     "source-map-explorer": "^2.5.3",
-    "tailwindcss": "^4.1.11",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss": "^4.2.2",
     "tsx": "^4.21.0",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.48.1",
-    "vite": "^7.0.0"
+    "typescript": "^6.0.2",
+    "vite": "^8.0.13",
+    "wrangler": "^4.102.0"
   },
   "engines": {
-    "node": ">=18.0.0"
-  },
-  "pnpm": {
-    "overrides": {
-      "cross-spawn": ">=6.0.6",
-      "glob": ">=10.5.0",
-      "node-forge": ">=1.3.2",
-      "jws": ">=3.2.3",
-      "qs": ">=6.14.1",
-      "js-yaml": "^3.14.2",
-      "brace-expansion": ">=1.1.12",
-      "unicorn-magic": "^0.4.0"
-    }
-  },
-  "_pnpm": {
-    "overrides": {
-      "@tanstack/react-router": "file:../router/packages/react-router",
-      "@tanstack/react-router-devtools": "file:../router/packages/router-devtools",
-      "@tanstack/react-start": "file:../router/packages/react-start",
-      "@tanstack/history": "file:../router/packages/history",
-      "@tanstack/react-store": "file:../router/packages/react-router/node_modules/@tanstack/react-store",
-      "@tanstack/router-vite-plugin": "file:../router/packages/router-vite-plugin",
-      "@tanstack/router-generator": "file:../router/packages/router-generator"
-    }
+    "node": ">=22.0.0"
   }
 }
diff --git a/playwright.config.ts b/playwright.config.ts
deleted file mode 100644
index b99535f74..000000000
--- a/playwright.config.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { defineConfig } from '@playwright/test'
-
-const port = process.env.PORT || '3000'
-const baseURL = `http://localhost:${port}`
-
-export default defineConfig({
-  testDir: './tests',
-  testMatch: '**/*.spec.ts',
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: 0,
-  workers: 1,
-  reporter: 'list',
-  timeout: 30000,
-  use: {
-    baseURL,
-    trace: 'off',
-    video: 'off',
-    screenshot: 'off',
-  },
-  webServer: {
-    command: `PORT=${port} pnpm dev`,
-    url: baseURL,
-    reuseExistingServer: !process.env.CI,
-    timeout: 120000,
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: { browserName: 'chromium', headless: true },
-    },
-  ],
-})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 315371959..625783246 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,536 +10,485 @@ overrides:
   node-forge: '>=1.3.2'
   jws: '>=3.2.3'
   qs: '>=6.14.1'
+  tunnel-rat>zustand: 5.0.12
   js-yaml: ^3.14.2
-  brace-expansion: '>=1.1.12'
-  unicorn-magic: ^0.4.0
+  minimatch@3.1.5>brace-expansion: 1.1.12
+  minimatch@5.1.9>brace-expansion: 2.0.3
+  minimatch@10.2.5>brace-expansion: 5.0.5
+  npm-run-path@6.0.0>unicorn-magic: 0.4.0
 
 importers:
 
   .:
     dependencies:
-      '@auth/core':
-        specifier: 0.37.0
-        version: 0.37.0
+      '@fingerprintjs/fingerprintjs-pro-react':
+        specifier: ^2.7.1
+        version: 2.7.1
       '@floating-ui/react':
-        specifier: ^0.27.8
-        version: 0.27.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@hono/mcp':
-        specifier: ^0.2.3
-        version: 0.2.3(@modelcontextprotocol/sdk@1.25.2(hono@4.11.3)(zod@4.3.5))(hono-rate-limiter@0.4.2(hono@4.11.3))(hono@4.11.3)(zod@4.3.5)
+        specifier: ^0.27.19
+        version: 0.27.19(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@kapaai/react-sdk':
+        specifier: ^0.9.10
+        version: 0.9.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@modelcontextprotocol/sdk':
-        specifier: ^1.25.2
-        version: 1.25.2(hono@4.11.3)(zod@4.3.5)
-      '@netlify/functions':
-        specifier: ^5.1.0
-        version: 5.1.0
-      '@netlify/neon':
-        specifier: ^0.1.0
-        version: 0.1.0
-      '@netlify/vite-plugin-tanstack-start':
-        specifier: ^1.0.2
-        version: 1.0.2(@tanstack/react-start@1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)))(babel-plugin-macros@3.1.0)(rollup@4.53.3)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11))(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
-      '@number-flow/react':
-        specifier: ^0.4.1
-        version: 0.4.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        specifier: ^1.29.0
+        version: 1.29.0(zod@4.3.6)
       '@observablehq/plot':
         specifier: ^0.6.17
         version: 0.6.17
       '@octokit/graphql':
-        specifier: ^7.0.2
-        version: 7.0.2
+        specifier: ^9.0.3
+        version: 9.0.3
       '@radix-ui/react-dialog':
         specifier: ^1.1.15
-        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-dropdown-menu':
-        specifier: ^2.1.12
-        version: 2.1.12(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toast':
-        specifier: ^1.2.2
-        version: 1.2.15(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        specifier: ^2.1.16
+        version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.8
+        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@react-three/drei':
         specifier: ^10.7.7
-        version: 10.7.7(@react-three/fiber@9.5.0(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(three@0.182.0))(@types/react@19.2.5)(@types/three@0.182.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(three@0.182.0)
+        version: 10.7.7(@react-three/fiber@9.5.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2))(@types/react@19.2.14)(@types/three@0.183.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2)
       '@react-three/fiber':
         specifier: ^9.5.0
-        version: 9.5.0(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(three@0.182.0)
+        version: 9.5.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2)
+      '@sentry/browser':
+        specifier: ^10.47.0
+        version: 10.47.0
       '@sentry/node':
-        specifier: ^10.33.0
-        version: 10.33.0
+        specifier: ^10.47.0
+        version: 10.47.0
       '@sentry/tanstackstart-react':
-        specifier: ^10.32.1
-        version: 10.32.1(react@19.2.0)
-      '@sentry/vite-plugin':
-        specifier: ^4.6.1
-        version: 4.6.1
-      '@stackblitz/sdk':
-        specifier: ^1.11.0
-        version: 1.11.0
+        specifier: ^10.47.0
+        version: 10.47.0(react@19.2.3)(rollup@4.53.3)
+      '@shopify/hydrogen-react':
+        specifier: ^2026.4.0
+        version: 2026.4.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2)(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
       '@tailwindcss/typography':
-        specifier: ^0.5.13
-        version: 0.5.13(tailwindcss@4.1.11)
+        specifier: ^0.5.19
+        version: 0.5.19(tailwindcss@4.2.2)
       '@tailwindcss/vite':
-        specifier: ^4.1.11
-        version: 4.1.11(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
-      '@tanstack/cta-engine':
-        specifier: ^0.47.0
-        version: 0.47.0
-      '@tanstack/cta-framework-react-cra':
-        specifier: ^0.47.0
-        version: 0.47.0
-      '@tanstack/cta-ui':
-        specifier: ^0.47.0
-        version: 0.47.0(@babel/runtime@7.28.4)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.6.0)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.11)(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(codemirror@6.0.2)(typescript@5.9.2)(use-sync-external-store@1.6.0(react@19.2.0))(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
-      '@tanstack/cta-ui-base':
-        specifier: ^0.47.0
-        version: 0.47.0(@babel/runtime@7.28.4)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.6.0)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.11)(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(codemirror@6.0.2)(use-sync-external-store@1.6.0(react@19.2.0))
+        specifier: ^4.2.2
+        version: 4.3.0(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
+      '@takumi-rs/core':
+        specifier: 2.0.0-beta.12
+        version: 2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@takumi-rs/helpers':
+        specifier: 2.0.0-beta.12
+        version: 2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@takumi-rs/image-response':
+        specifier: 2.0.0-beta.12
+        version: 2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@takumi-rs/wasm':
+        specifier: 2.0.0-beta.12
+        version: 2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/ai':
+        specifier: ^0.20.1
+        version: 0.20.1(@opentelemetry/api@1.9.1)
+      '@tanstack/ai-anthropic':
+        specifier: ^0.10.1
+        version: 0.10.1(@tanstack/ai@0.20.1(@opentelemetry/api@1.9.1))(zod@4.3.6)
+      '@tanstack/ai-client':
+        specifier: ^0.11.3
+        version: 0.11.3(@opentelemetry/api@1.9.1)
+      '@tanstack/ai-openai':
+        specifier: ^0.9.5
+        version: 0.9.5(@tanstack/ai-client@0.11.3(@opentelemetry/api@1.9.1))(@tanstack/ai@0.20.1(@opentelemetry/api@1.9.1))(ws@8.21.0)(zod@4.3.6)
+      '@tanstack/create':
+        specifier: ^0.68.4
+        version: 0.68.4(tslib@2.8.1)
+      '@tanstack/highlight':
+        specifier: ^0.0.3
+        version: 0.0.3
+      '@tanstack/markdown':
+        specifier: ^0.0.9
+        version: 0.0.9(react@19.2.3)
       '@tanstack/pacer':
-        specifier: ^0.16.4
-        version: 0.16.4
+        specifier: ^0.21.1
+        version: 0.21.1
+      '@tanstack/react-hotkeys':
+        specifier: ^0.10.0
+        version: 0.10.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/react-pacer':
-        specifier: ^0.17.4
-        version: 0.17.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        specifier: ^0.22.1
+        version: 0.22.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/react-query':
-        specifier: ^5.90.12
-        version: 5.90.12(react@19.2.0)
+        specifier: ^5.100.11
+        version: 5.100.11(react@19.2.3)
       '@tanstack/react-router':
-        specifier: 1.141.6
-        version: 1.141.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        specifier: 1.170.16
+        version: 1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/react-router-devtools':
-        specifier: 1.141.6
-        version: 1.141.6(@tanstack/react-router@1.141.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@tanstack/router-core@1.141.8)(csstype@3.1.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(solid-js@1.9.9)
+        specifier: 1.167.0
+        version: 1.167.0(@tanstack/react-router@1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.171.13)(csstype@3.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/react-router-ssr-query':
-        specifier: 1.141.6
-        version: 1.141.6(@tanstack/query-core@5.90.12)(@tanstack/react-query@5.90.12(react@19.2.0))(@tanstack/react-router@1.141.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@tanstack/router-core@1.141.8)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        specifier: 1.167.1
+        version: 1.167.1(@tanstack/query-core@5.100.11)(@tanstack/react-query@5.100.11(react@19.2.3))(@tanstack/react-router@1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.171.13)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/react-start':
-        specifier: 1.141.8
-        version: 1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
+        specifier: 1.168.26
+        version: 1.168.26(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
+      '@tanstack/react-start-client':
+        specifier: 1.168.14
+        version: 1.168.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@tanstack/react-table':
         specifier: ^8.21.3
-        version: 8.21.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/workflow-core':
+        specifier: 0.0.4
+        version: 0.0.4(@opentelemetry/api@1.9.1)
+      '@tanstack/workflow-runtime':
+        specifier: 0.0.3
+        version: 0.0.3(@opentelemetry/api@1.9.1)
+      '@tanstack/workflow-store-drizzle-postgres':
+        specifier: 0.0.5
+        version: 0.0.5(@opentelemetry/api@1.9.1)(@types/pg@8.20.0)(postgres@3.4.8)
       '@types/d3':
         specifier: ^7.4.3
         version: 7.4.3
       '@uploadthing/react':
         specifier: ^7.3.3
-        version: 7.3.3(react@19.2.0)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11))
+        version: 7.3.3(react@19.2.3)(uploadthing@7.7.4(express@5.2.1)(tailwindcss@4.2.2))
       '@visx/hierarchy':
-        specifier: ^2.10.0
-        version: 2.17.0(react@19.2.0)
-      '@visx/responsive':
-        specifier: ^2.10.0
-        version: 2.17.0(react@19.2.0)
+        specifier: ^3.12.0
+        version: 3.12.0(react@19.2.3)
       '@vitejs/plugin-react':
-        specifier: ^4.3.3
-        version: 4.3.4(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
+        specifier: ^6.0.1
+        version: 6.0.1(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
+      '@webcontainer/api':
+        specifier: ^1.6.1
+        version: 1.6.1
       '@xstate/react':
-        specifier: ^6.0.0
-        version: 6.0.0(@types/react@19.2.5)(react@19.2.0)(xstate@5.25.0)
+        specifier: ^6.1.0
+        version: 6.1.0(@types/react@19.2.14)(react@19.2.3)(xstate@5.30.0)
       algoliasearch:
-        specifier: ^5.23.4
-        version: 5.23.4
+        specifier: ^5.50.0
+        version: 5.50.0
       cheerio:
-        specifier: ^1.1.2
-        version: 1.1.2
+        specifier: ^1.2.0
+        version: 1.2.0
       cmdk:
         specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       d3:
         specifier: ^7.9.0
         version: 7.9.0
-      date-fns:
-        specifier: ^2.30.0
-        version: 2.30.0
+      diff:
+        specifier: ^8.0.4
+        version: 8.0.4
       discord-interactions:
         specifier: ^4.4.0
         version: 4.4.0
       drizzle-orm:
-        specifier: ^0.44.7
-        version: 0.44.7(@neondatabase/serverless@0.10.4)(@opentelemetry/api@1.9.0)(@types/pg@8.15.6)(kysely@0.28.5)(postgres@3.4.7)
-      eslint-plugin-jsx-a11y:
-        specifier: ^6.10.2
-        version: 6.10.2(eslint@9.39.1(jiti@2.6.0))
+        specifier: ^0.45.2
+        version: 0.45.2(@opentelemetry/api@1.9.1)(@types/pg@8.20.0)(postgres@3.4.8)
+      encoding-sniffer:
+        specifier: ^0.2.1
+        version: 0.2.1
+      gifenc:
+        specifier: ^1.0.3
+        version: 1.0.3
       gray-matter:
         specifier: ^4.0.3
         version: 4.0.3
-      hast-util-is-element:
-        specifier: ^3.0.0
-        version: 3.0.0
-      hast-util-to-string:
-        specifier: ^3.0.1
-        version: 3.0.1
-      hono:
-        specifier: ^4.11.3
-        version: 4.11.3
-      html-react-parser:
-        specifier: ^5.1.10
-        version: 5.1.10(@types/react@19.2.5)(react@19.2.0)
+      iconv-lite:
+        specifier: ^0.7.2
+        version: 0.7.2
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
       lru-cache:
-        specifier: ^7.13.1
-        version: 7.18.3
+        specifier: ^11.2.7
+        version: 11.2.7
       lucide-react:
-        specifier: ^0.561.0
-        version: 0.561.0(react@19.2.0)
+        specifier: ^1.7.0
+        version: 1.7.0(react@19.2.3)
+      maath:
+        specifier: ^0.10.8
+        version: 0.10.8(@types/three@0.183.1)(three@0.183.2)
+      match-sorter:
+        specifier: ^8.2.0
+        version: 8.2.0
       mermaid:
-        specifier: ^11.11.0
-        version: 11.11.0
+        specifier: ^11.14.0
+        version: 11.14.0
+      parse5:
+        specifier: ^7.3.0
+        version: 7.3.0
+      parse5-parser-stream:
+        specifier: ^7.1.2
+        version: 7.1.2
       postgres:
-        specifier: ^3.4.7
-        version: 3.4.7
-      posthog-node:
-        specifier: ^5.20.0
-        version: 5.20.0
+        specifier: ^3.4.8
+        version: 3.4.8
       react:
-        specifier: ^19.2.0
-        version: 19.2.0
+        specifier: 19.2.3
+        version: 19.2.3
       react-colorful:
         specifier: ^5.6.1
-        version: 5.6.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        version: 5.6.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react-dom:
-        specifier: ^19.2.0
-        version: 19.2.0(react@19.2.0)
+        specifier: 19.2.3
+        version: 19.2.3(react@19.2.3)
       react-easy-crop:
-        specifier: ^5.5.6
-        version: 5.5.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        specifier: ^5.5.7
+        version: 5.5.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react-instantsearch:
-        specifier: '7'
-        version: 7.15.5(algoliasearch@5.23.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      rehype-autolink-headings:
-        specifier: ^7.1.0
-        version: 7.1.0
-      rehype-callouts:
-        specifier: ^2.1.2
-        version: 2.1.2
-      rehype-parse:
-        specifier: ^9.0.1
-        version: 9.0.1
-      rehype-raw:
-        specifier: ^7.0.0
-        version: 7.0.0
-      rehype-slug:
-        specifier: ^6.0.0
-        version: 6.0.0
-      rehype-stringify:
-        specifier: ^10.0.1
-        version: 10.0.1
-      remark-gfm:
-        specifier: ^4.0.1
-        version: 4.0.1
-      remark-parse:
-        specifier: ^11.0.0
-        version: 11.0.0
-      remark-rehype:
-        specifier: ^11.1.2
-        version: 11.1.2
+        specifier: ^7.29.0
+        version: 7.29.0(algoliasearch@5.50.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       remove-markdown:
-        specifier: ^0.5.0
-        version: 0.5.0
+        specifier: ^0.6.3
+        version: 0.6.3
       resend:
-        specifier: ^6.6.0
-        version: 6.6.0
-      shiki:
-        specifier: ^1.4.0
-        version: 1.10.3
+        specifier: ^6.10.0
+        version: 6.10.0
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      streamdown:
+        specifier: ^2.5.0
+        version: 2.5.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       tailwind-merge:
-        specifier: ^1.14.0
-        version: 1.14.0
+        specifier: ^3.5.0
+        version: 3.5.0
+      tar-stream:
+        specifier: ^3.1.8
+        version: 3.1.8
       three:
-        specifier: ^0.182.0
-        version: 0.182.0
+        specifier: ^0.183.2
+        version: 0.183.2
       troika-three-text:
         specifier: ^0.52.4
-        version: 0.52.4(three@0.182.0)
-      unified:
-        specifier: ^11.0.5
-        version: 11.0.5
-      unist-util-visit:
-        specifier: ^5.0.0
-        version: 5.0.0
+        version: 0.52.4(three@0.183.2)
       uploadthing:
         specifier: ^7.7.4
-        version: 7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11)
+        version: 7.7.4(express@5.2.1)(tailwindcss@4.2.2)
       valibot:
-        specifier: ^1.2.0
-        version: 1.2.0(typescript@5.9.2)
+        specifier: ^1.3.1
+        version: 1.3.1(typescript@6.0.2)
       vite-bundle-analyzer:
-        specifier: ^1.2.1
-        version: 1.2.1
-      vite-tsconfig-paths:
-        specifier: ^5.0.1
-        version: 5.0.1(typescript@5.9.2)(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
+        specifier: ^1.3.6
+        version: 1.3.6
       xstate:
-        specifier: ^5.25.0
-        version: 5.25.0
+        specifier: ^5.30.0
+        version: 5.30.0
+      yaml:
+        specifier: ^2.9.0
+        version: 2.9.0
       zod:
-        specifier: ^4.3.5
-        version: 4.3.5
+        specifier: ^4.3.6
+        version: 4.3.6
       zustand:
-        specifier: ^4.5.2
-        version: 4.5.2(@types/react@19.2.5)(react@19.2.0)
+        specifier: ^5.0.12
+        version: 5.0.12(@types/react@19.2.14)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
     devDependencies:
+      '@cloudflare/vite-plugin':
+        specifier: ^1.42.0
+        version: 1.42.1(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))(workerd@1.20260617.1)(wrangler@4.103.0)
       '@content-collections/core':
-        specifier: ^0.8.2
-        version: 0.8.2(typescript@5.9.2)
+        specifier: ^0.14.3
+        version: 0.14.3(typescript@6.0.2)
       '@content-collections/vite':
-        specifier: ^0.2.4
-        version: 0.2.4(@content-collections/core@0.8.2(typescript@5.9.2))(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
-      '@eslint/js':
-        specifier: ^9.39.1
-        version: 9.39.1
-      '@playwright/test':
-        specifier: ^1.57.0
-        version: 1.57.0
-      '@shikijs/transformers':
-        specifier: ^1.10.3
-        version: 1.10.3
-      '@types/express':
-        specifier: ^5.0.3
-        version: 5.0.6
+        specifier: ^0.2.9
+        version: 0.2.9(@content-collections/core@0.14.3(typescript@6.0.2))(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
+      '@tanstack/devtools-vite':
+        specifier: ^0.7.0
+        version: 0.7.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
+      '@tanstack/react-devtools':
+        specifier: ^0.10.5
+        version: 0.10.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(csstype@3.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.12)
+      '@tanstack/react-query-devtools':
+        specifier: ^5.100.11
+        version: 5.100.11(@tanstack/react-query@5.100.11(react@19.2.3))(react@19.2.3)
+      '@tanstack/redact':
+        specifier: ^0.0.18
+        version: 0.0.18(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
       '@types/hast':
         specifier: ^3.0.4
         version: 3.0.4
       '@types/node':
-        specifier: ^24.3.0
-        version: 24.3.0
+        specifier: ^25.5.0
+        version: 25.5.0
       '@types/pg':
-        specifier: ^8.15.6
-        version: 8.15.6
+        specifier: ^8.20.0
+        version: 8.20.0
       '@types/react':
-        specifier: ^19.2.0
-        version: 19.2.5
+        specifier: ^19.2.14
+        version: 19.2.14
       '@types/react-dom':
-        specifier: ^19.2.0
-        version: 19.2.3(@types/react@19.2.5)
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.14)
       '@types/remove-markdown':
         specifier: ^0.3.4
         version: 0.3.4
+      '@types/tar-stream':
+        specifier: ^3.1.4
+        version: 3.1.4
       '@types/three':
-        specifier: ^0.182.0
-        version: 0.182.0
-      autoprefixer:
-        specifier: ^10.4.18
-        version: 10.4.18(postcss@8.5.6)
+        specifier: ^0.183.1
+        version: 0.183.1
       dotenv-cli:
-        specifier: ^8.0.0
-        version: 8.0.0
+        specifier: ^11.0.0
+        version: 11.0.0
       drizzle-kit:
-        specifier: ^0.31.7
-        version: 0.31.7
-      eslint:
-        specifier: ^9.39.1
-        version: 9.39.1(jiti@2.6.0)
-      eslint-plugin-react:
-        specifier: ^7.37.5
-        version: 7.37.5(eslint@9.39.1(jiti@2.6.0))
-      eslint-plugin-react-hooks:
-        specifier: ^7.0.1
-        version: 7.0.1(eslint@9.39.1(jiti@2.6.0))
+        specifier: ^0.31.10
+        version: 0.31.10
+      esbuild:
+        specifier: ^0.27.4
+        version: 0.27.4
       husky:
         specifier: ^9.1.7
         version: 9.1.7
       npm-run-all:
         specifier: ^4.1.5
         version: 4.1.5
-      postcss:
-        specifier: ^8.4.35
-        version: 8.5.6
-      prettier:
-        specifier: ^3.7.4
-        version: 3.7.4
+      oxfmt:
+        specifier: ^0.43.0
+        version: 0.43.0
+      oxlint:
+        specifier: ^1.58.0
+        version: 1.58.0(oxlint-tsgolint@0.19.0)
+      oxlint-tsgolint:
+        specifier: ^0.19.0
+        version: 0.19.0
       source-map-explorer:
         specifier: ^2.5.3
         version: 2.5.3
       tailwindcss:
-        specifier: ^4.1.11
-        version: 4.1.11
-      tailwindcss-animate:
-        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@4.1.11)
+        specifier: ^4.2.2
+        version: 4.2.2
       tsx:
         specifier: ^4.21.0
         version: 4.21.0
       typescript:
-        specifier: ^5.6.3
-        version: 5.9.2
-      typescript-eslint:
-        specifier: ^8.48.1
-        version: 8.48.1(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2)
+        specifier: ^6.0.2
+        version: 6.0.2
       vite:
-        specifier: ^7.0.0
-        version: 7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)
+        specifier: ^8.0.13
+        version: 8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)
+      wrangler:
+        specifier: ^4.102.0
+        version: 4.103.0
 
 packages:
 
-  '@aashutoshrathi/word-wrap@1.2.6':
-    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
-    engines: {node: '>=0.10.0'}
+  '@ag-ui/core@0.0.52':
+    resolution: {integrity: sha512-Xo0bUaNV56EqylzcrAuhUkQX7et7+SZIrqZZtEByGwEq/I1EHny6ZMkWHLkKR7UNi0FJZwJyhKYmKJS3B2SEgA==}
 
-  '@algolia/client-abtesting@5.23.4':
-    resolution: {integrity: sha512-WIMT2Kxy+FFWXWQxIU8QgbTioL+SGE24zhpj0kipG4uQbzXwONaWt7ffaYLjfge3gcGSgJVv+1VlahVckafluQ==}
+  '@algolia/abtesting@1.16.0':
+    resolution: {integrity: sha512-alHFZ68/i9qLC/muEB07VQ9r7cB8AvCcGX6dVQi2PNHhc/ZQRmmFAv8KK1ay4UiseGSFr7f0nXBKsZ/jRg7e4g==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-analytics@5.23.4':
-    resolution: {integrity: sha512-4B9gChENsQA9kFmFlb+x3YhBz2Gx3vSsm81FHI1yJ3fn2zlxREHmfrjyqYoMunsU7BybT/o5Nb7ccCbm/vfseA==}
+  '@algolia/client-abtesting@5.50.0':
+    resolution: {integrity: sha512-mfgUdLQNxOAvCZUGzPQxjahEWEPuQkKlV0ZtGmePOa9ZxIQZlk31vRBNbM6ScU8jTH41SCYE77G/lCifDr1SVw==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-common@5.23.4':
-    resolution: {integrity: sha512-bsj0lwU2ytiWLtl7sPunr+oLe+0YJql9FozJln5BnIiqfKOaseSDdV42060vUy+D4373f2XBI009K/rm2IXYMA==}
+  '@algolia/client-analytics@5.50.0':
+    resolution: {integrity: sha512-5mjokeKYyPaP3Q8IYJEnutI+O4dW/Ixxx5IgsSxT04pCfGqPXxTOH311hTQxyNpcGGEOGrMv8n8Z+UMTPamioQ==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-insights@5.23.4':
-    resolution: {integrity: sha512-XSCtAYvJ/hnfDHfRVMbBH0dayR+2ofVZy3jf5qyifjguC6rwxDsSdQvXpT0QFVyG+h8UPGtDhMPoUIng4wIcZA==}
+  '@algolia/client-common@5.50.0':
+    resolution: {integrity: sha512-emtOvR6dl3rX3sBJXXbofMNHU1qMQqQSWu319RMrNL5BWoBqyiq7y0Zn6cjJm7aGHV/Qbf+KCCYeWNKEMPI3BQ==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-personalization@5.23.4':
-    resolution: {integrity: sha512-l/0QvqgRFFOf7BnKSJ3myd1WbDr86ftVaa3PQwlsNh7IpIHmvVcT83Bi5zlORozVGMwaKfyPZo6O48PZELsOeA==}
+  '@algolia/client-insights@5.50.0':
+    resolution: {integrity: sha512-IerGH2/hcj/6bwkpQg/HHRqmlGN1XwygQWythAk0gZFBrghs9danJaYuSS3ShzLSVoIVth4jY5GDPX9Lbw5cgg==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-query-suggestions@5.23.4':
-    resolution: {integrity: sha512-TB0htrDgVacVGtPDyENoM6VIeYqR+pMsDovW94dfi2JoaRxfqu/tYmLpvgWcOknP6wLbr8bA+G7t/NiGksNAwQ==}
+  '@algolia/client-personalization@5.50.0':
+    resolution: {integrity: sha512-3idPJeXn5L0MmgP9jk9JJqblrQ/SguN93dNK9z9gfgyupBhHnJMOEjrRYcVgTIfvG13Y04wO+Q0FxE2Ut8PVbA==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-search@5.23.4':
-    resolution: {integrity: sha512-uBGo6KwUP6z+u6HZWRui8UJClS7fgUIAiYd1prUqCbkzDiCngTOzxaJbEvrdkK0hGCQtnPDiuNhC5MhtVNN4Eg==}
+  '@algolia/client-query-suggestions@5.50.0':
+    resolution: {integrity: sha512-q7qRoWrQK1a8m5EFQEmPlo7+pg9mVQ8X5jsChtChERre0uS2pdYEDixBBl0ydBSGkdGbLUDufcACIhH/077E4g==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-search@5.50.0':
+    resolution: {integrity: sha512-Jc360x4yqb3eEg4OY4KEIdGePBxZogivKI+OGIU8aLXgAYPTECvzeOBc90312yHA1hr3AeRlAFl0rIc8lQaIrQ==}
     engines: {node: '>= 14.0.0'}
 
   '@algolia/events@4.0.1':
     resolution: {integrity: sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ==}
 
-  '@algolia/ingestion@1.23.4':
-    resolution: {integrity: sha512-Si6rFuGnSeEUPU9QchYvbknvEIyCRK7nkeaPVQdZpABU7m4V/tsiWdHmjVodtx3h20VZivJdHeQO9XbHxBOcCw==}
+  '@algolia/ingestion@1.50.0':
+    resolution: {integrity: sha512-OS3/Viao+NPpyBbEY3tf6hLewppG+UclD+9i0ju56mq2DrdMJFCkEky6Sk9S5VPcbLzxzg3BqBX6u9Q35w19aQ==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/monitoring@1.23.4':
-    resolution: {integrity: sha512-EXGoVVTshraqPJgr5cMd1fq7Jm71Ew6MpGCEaxI5PErBpJAmKdtjRIzs6JOGKHRaWLi+jdbJPYc2y8RN4qcx5Q==}
+  '@algolia/monitoring@1.50.0':
+    resolution: {integrity: sha512-/znwgSiGufpbJVIoDmeQaHtTq+OMdDawFRbMSJVv+12n79hW+qdQXS8/Uu3BD3yn0BzgVFJEvrsHrCsInZKdhw==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/recommend@5.23.4':
-    resolution: {integrity: sha512-1t6glwKVCkjvBNlng2itTf8fwaLSqkL4JaMENgR3WTGR8mmW2akocUy/ZYSQcG4TcR7qu4zW2UMGAwLoWoflgQ==}
+  '@algolia/recommend@5.50.0':
+    resolution: {integrity: sha512-dHjUfu4jfjdQiKDpCpAnM7LP5yfG0oNShtfpF5rMCel6/4HIoqJ4DC4h5GKDzgrvJYtgAhblo0AYBmOM00T+lQ==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-browser-xhr@5.23.4':
-    resolution: {integrity: sha512-UUuizcgc5+VSY8hqzDFVdJ3Wcto03lpbFRGPgW12pHTlUQHUTADtIpIhkLLOZRCjXmCVhtr97Z+eR6LcRYXa3Q==}
+  '@algolia/requester-browser-xhr@5.50.0':
+    resolution: {integrity: sha512-bffIbUljAWnh/Ctu5uScORajuUavqmZ0ACYd1fQQeSSYA9NNN83ynO26pSc2dZRXpSK0fkc1//qSSFXMKGu+aw==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-fetch@5.23.4':
-    resolution: {integrity: sha512-UhDg6elsek6NnV5z4VG1qMwR6vbp+rTMBEnl/v4hUyXQazU+CNdYkl++cpdmLwGI/7nXc28xtZiL90Es3I7viQ==}
+  '@algolia/requester-fetch@5.50.0':
+    resolution: {integrity: sha512-y0EwNvPGvkM+yTAqqO6Gpt9wVGm3CLDtpLvNEiB3VGvN3WzfkjZGtLUsG/ru2kVJIIU7QcV0puuYgEpBeFxcJg==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-node-http@5.23.4':
-    resolution: {integrity: sha512-jXGzGBRUS0oywQwnaCA6mMDJO7LoC3dYSLsyNfIqxDR4SNGLhtg3je0Y31lc24OA4nYyKAYgVLtjfrpcpsWShg==}
+  '@algolia/requester-node-http@5.50.0':
+    resolution: {integrity: sha512-xpwefe4fCOWnZgXCbkGpqQY6jgBSCf2hmgnySbyzZIccrv3SoashHKGPE4x6vVG+gdHrGciMTAcDo9HOZwH22Q==}
     engines: {node: '>= 14.0.0'}
 
-  '@ampproject/remapping@2.3.0':
-    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
-    engines: {node: '>=6.0.0'}
-
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
 
-  '@antfu/utils@9.2.0':
-    resolution: {integrity: sha512-Oq1d9BGZakE/FyoEtcNeSwM7MpDO2vUBi11RWBZXf75zPsbUVWmUs03EqkRFrcgbXyKTas0BdZWC1wcuSoqSAw==}
-
-  '@apm-js-collab/code-transformer@0.8.2':
-    resolution: {integrity: sha512-YRjJjNq5KFSjDUoqu5pFUWrrsvGOxl6c3bu+uMFc9HNNptZ2rNU/TI2nLw4jnhQNtka972Ee2m3uqbvDQtPeCA==}
-
-  '@apm-js-collab/tracing-hooks@0.3.1':
-    resolution: {integrity: sha512-Vu1CbmPURlN5fTboVuKMoJjbO5qcq9fA5YXpskx3dXe/zTBvjODFoerw+69rVBlRLrJpwPqSDqEuJDEKIrTldw==}
-
-  '@auth/core@0.37.0':
-    resolution: {integrity: sha512-LybAgfFC5dta3Mu3al0UbnzMGVBpZRqLMvvXupQOfETtPNlL7rXgTO13EVRTCdvPqMQrVYjODUDvgVfQM1M3Qg==}
+  '@anthropic-ai/sdk@0.71.2':
+    resolution: {integrity: sha512-TGNDEUuEstk/DKu0/TflXAEt+p+p/WhTlFzEnoosvbaDU2LTjm42igSdlL0VijrKpWejtOKxX0b8A7uc+XiSAQ==}
+    hasBin: true
     peerDependencies:
-      '@simplewebauthn/browser': ^9.0.1
-      '@simplewebauthn/server': ^9.0.2
-      nodemailer: ^6.8.0
+      zod: ^3.25.0 || ^4.0.0
     peerDependenciesMeta:
-      '@simplewebauthn/browser':
-        optional: true
-      '@simplewebauthn/server':
-        optional: true
-      nodemailer:
+      zod:
         optional: true
 
-  '@babel/code-frame@7.26.2':
-    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.27.5':
-    resolution: {integrity: sha512-KiRAp/VoJaWkkte84TvUd9qjdbZAdiqyvMxrGl1N6vzFogKmaLgoM3L1kgtLicp2HP5fBJS8JrZKLVIZGVJAVg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/core@7.28.4':
-    resolution: {integrity: sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==}
+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.28.3':
-    resolution: {integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==}
+  '@babel/compat-data@7.29.0':
+    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-annotate-as-pure@7.27.3':
-    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
+  '@babel/core@7.29.0':
+    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.27.2':
-    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
+  '@babel/generator@7.29.1':
+    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-create-class-features-plugin@7.28.3':
-    resolution: {integrity: sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg==}
+  '@babel/helper-compilation-targets@7.28.6':
+    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
     engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
 
   '@babel/helper-globals@7.28.0':
     resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-member-expression-to-functions@7.27.1':
-    resolution: {integrity: sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-imports@7.27.1':
-    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-transforms@7.28.3':
-    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  '@babel/helper-optimise-call-expression@7.27.1':
-    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-plugin-utils@7.27.1':
-    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
+  '@babel/helper-module-imports@7.28.6':
+    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-replace-supers@7.27.1':
-    resolution: {integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==}
+  '@babel/helper-module-transforms@7.28.6':
+    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
-    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.27.1':
-    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-validator-identifier@7.28.5':
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
@@ -548,177 +497,118 @@ packages:
     resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.28.4':
-    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
+  '@babel/helpers@7.29.2':
+    resolution: {integrity: sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.28.3':
-    resolution: {integrity: sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==}
+  '@babel/parser@7.29.2':
+    resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/parser@7.28.4':
-    resolution: {integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  '@babel/plugin-syntax-jsx@7.27.1':
-    resolution: {integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-typescript@7.27.1':
-    resolution: {integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-modules-commonjs@7.27.1':
-    resolution: {integrity: sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-react-jsx-self@7.25.9':
-    resolution: {integrity: sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-react-jsx-source@7.25.9':
-    resolution: {integrity: sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-typescript@7.28.0':
-    resolution: {integrity: sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/preset-typescript@7.27.1':
-    resolution: {integrity: sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/runtime@7.24.5':
-    resolution: {integrity: sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==}
+  '@babel/runtime@7.29.2':
+    resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/runtime@7.28.4':
-    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+  '@babel/template@7.28.6':
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.27.2':
-    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
+  '@babel/traverse@7.29.0':
+    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.28.3':
-    resolution: {integrity: sha512-7w4kZYHneL3A6NP2nxzHvT3HCZ7puDZZjFMqDpBPECub79sTtSO5CGXDkKrTQq8ksAwfD/XI2MRFX23njdDaIQ==}
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.28.4':
-    resolution: {integrity: sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.28.2':
-    resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.28.4':
-    resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.28.5':
-    resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
-    engines: {node: '>=6.9.0'}
-
-  '@braintree/sanitize-url@7.1.1':
-    resolution: {integrity: sha512-i1L7noDNxtFyL5DmZafWy1wRVhGehQmzZaz1HiN5e7iylJMSZR7ekOV7NsIqa5qBldlLrsKv4HbgFUVlQrz8Mw==}
+  '@braintree/sanitize-url@7.1.2':
+    resolution: {integrity: sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==}
 
-  '@chevrotain/cst-dts-gen@11.0.3':
-    resolution: {integrity: sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==}
+  '@chevrotain/cst-dts-gen@11.1.2':
+    resolution: {integrity: sha512-XTsjvDVB5nDZBQB8o0o/0ozNelQtn2KrUVteIHSlPd2VAV2utEb6JzyCJaJ8tGxACR4RiBNWy5uYUHX2eji88Q==}
 
-  '@chevrotain/gast@11.0.3':
-    resolution: {integrity: sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==}
+  '@chevrotain/gast@11.1.2':
+    resolution: {integrity: sha512-Z9zfXR5jNZb1Hlsd/p+4XWeUFugrHirq36bKzPWDSIacV+GPSVXdk+ahVWZTwjhNwofAWg/sZg58fyucKSQx5g==}
 
-  '@chevrotain/regexp-to-ast@11.0.3':
-    resolution: {integrity: sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==}
+  '@chevrotain/regexp-to-ast@11.1.2':
+    resolution: {integrity: sha512-nMU3Uj8naWer7xpZTYJdxbAs6RIv/dxYzkYU8GSwgUtcAAlzjcPfX1w+RKRcYG8POlzMeayOQ/znfwxEGo5ulw==}
 
-  '@chevrotain/types@11.0.3':
-    resolution: {integrity: sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==}
+  '@chevrotain/types@11.1.2':
+    resolution: {integrity: sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==}
 
-  '@chevrotain/utils@11.0.3':
-    resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==}
+  '@chevrotain/utils@11.1.2':
+    resolution: {integrity: sha512-4mudFAQ6H+MqBTfqLmU7G1ZwRzCLfJEooL/fsF6rCX5eePMbGhoy5n4g+G4vlh2muDcsCTJtL+uKbOzWxs5LHA==}
 
-  '@codemirror/autocomplete@6.20.0':
-    resolution: {integrity: sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==}
+  '@cloudflare/kv-asset-handler@0.5.0':
+    resolution: {integrity: sha512-jxQYkj8dSIzc0cD6cMMNdOc1UVjqSqu8BZdor5s8cGjW2I8BjODt/kWPVdY+u9zj3ms75Q5qaZgnxUad83+eAg==}
+    engines: {node: '>=22.0.0'}
 
-  '@codemirror/commands@6.10.1':
-    resolution: {integrity: sha512-uWDWFypNdQmz2y1LaNJzK7fL7TYKLeUAU0npEC685OKTF3KcQ2Vu3klIM78D7I6wGhktme0lh3CuQLv0ZCrD9Q==}
-
-  '@codemirror/lang-css@6.3.1':
-    resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
-
-  '@codemirror/lang-html@6.4.11':
-    resolution: {integrity: sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==}
-
-  '@codemirror/lang-javascript@6.2.4':
-    resolution: {integrity: sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==}
-
-  '@codemirror/lang-json@6.0.2':
-    resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==}
-
-  '@codemirror/language@6.12.1':
-    resolution: {integrity: sha512-Fa6xkSiuGKc8XC8Cn96T+TQHYj4ZZ7RdFmXA3i9xe/3hLHfwPZdM+dqfX0Cp0zQklBKhVD8Yzc8LS45rkqcwpQ==}
-
-  '@codemirror/lint@6.9.2':
-    resolution: {integrity: sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==}
+  '@cloudflare/unenv-preset@2.16.1':
+    resolution: {integrity: sha512-ECxObrMfyTl5bhQf/lZCXwo5G6xX9IAUo+nDMKK4SZ8m4Jvvxp52vilxyySSWh2YTZz8+HQ07qGH/2rEom1vDw==}
+    peerDependencies:
+      unenv: 2.0.0-rc.24
+      workerd: '>1.20260305.0 <2.0.0-0'
+    peerDependenciesMeta:
+      workerd:
+        optional: true
 
-  '@codemirror/merge@6.11.2':
-    resolution: {integrity: sha512-NO5EJd2rLRbwVWLgMdhIntDIhfDtMOKYEZgqV5WnkNUS2oXOCVWLPjG/kgl/Jth2fGiOuG947bteqxP9nBXmMg==}
+  '@cloudflare/vite-plugin@1.42.1':
+    resolution: {integrity: sha512-G7JZL7lIOcNK4mOM/uYSh3c5tNC8mdNWTmM9I/9OIruzkenWIkHqmYR/Z1XiLMNUITXcYkbf71RD19rIb4Fx/w==}
+    hasBin: true
+    peerDependencies:
+      vite: ^6.1.0 || ^7.0.0 || ^8.0.0
+      wrangler: ^4.103.0
 
-  '@codemirror/search@6.6.0':
-    resolution: {integrity: sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==}
+  '@cloudflare/workerd-darwin-64@1.20260617.1':
+    resolution: {integrity: sha512-jWwmgEVVWbsHNrLSNXzwjJaH90VzRxq1cWkQFUidxyeUPnMxemeNE8I9qFAfrpzGgE11e9sKDcE3ettJW08swQ==}
+    engines: {node: '>=16'}
+    cpu: [x64]
+    os: [darwin]
 
-  '@codemirror/state@6.5.4':
-    resolution: {integrity: sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw==}
+  '@cloudflare/workerd-darwin-arm64@1.20260617.1':
+    resolution: {integrity: sha512-LHH7b565g9znfCUOkwbec6FG2rmRbsgCy6aJiU9KN662mNheWl5sw/iKleiFSiljPKQQP3HkjnC/NSkdgi/aSA==}
+    engines: {node: '>=16'}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@codemirror/theme-one-dark@6.1.3':
-    resolution: {integrity: sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==}
+  '@cloudflare/workerd-linux-64@1.20260617.1':
+    resolution: {integrity: sha512-FMnaAKXe4Cfd8TQurCVd9fs2XQVBFRCsP+Id/SRdUv89MlwYu9zXfoyx6BxM+brPTIUK38SHbo8iaxiwzLi9JQ==}
+    engines: {node: '>=16'}
+    cpu: [x64]
+    os: [linux]
 
-  '@codemirror/view@6.39.11':
-    resolution: {integrity: sha512-bWdeR8gWM87l4DB/kYSF9A+dVackzDb/V56Tq7QVrQ7rn86W0rgZFtlL3g3pem6AeGcb9NQNoy3ao4WpW4h5tQ==}
+  '@cloudflare/workerd-linux-arm64@1.20260617.1':
+    resolution: {integrity: sha512-MRoifFYcqbxxIIQy7PqO5tFY/qPFSnjXzakWl0sO93l+HLyG35jRAgOi6jfqa4kBxc7gKKtH861DcewjxUfkjA==}
+    engines: {node: '>=16'}
+    cpu: [arm64]
+    os: [linux]
 
-  '@colors/colors@1.6.0':
-    resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
-    engines: {node: '>=0.1.90'}
+  '@cloudflare/workerd-windows-64@1.20260617.1':
+    resolution: {integrity: sha512-rgBV9wQrv0OSKgCTTbhFUFY3sLGNANZ88aqaLvtmEn2gmbFVb1J4PDGochVUdB7NSEp4D/ghHva6/8SZmbONpw==}
+    engines: {node: '>=16'}
+    cpu: [x64]
+    os: [win32]
 
-  '@content-collections/core@0.8.2':
-    resolution: {integrity: sha512-62yVC3ne47YJ1KeCw5nk0H/G/xGBagcoWyMpVyTaCnDJhoIoTvmqBrsc+78Zk8s2Ssnb0Eo1Q4w3ZHwgL88pjg==}
+  '@content-collections/core@0.14.3':
+    resolution: {integrity: sha512-nbgfRswxudlKDBEO2AXVGGfsFMlenV2iVjNDddQGWD0qk3lBDkTRJy0AqdBvBOccB8/cj95nJyXEVocRRNyUcA==}
     peerDependencies:
       typescript: ^5.0.2
 
-  '@content-collections/integrations@0.2.1':
-    resolution: {integrity: sha512-AyEcS2MmcOXSYt6vNmJsAiu6EBYjtNiwYGUVUmpG3llm8Gt8uiNrhIhlHyv3cuk+N8KJ2PWemLcMqtQJ+sW3bA==}
+  '@content-collections/integrations@0.5.0':
+    resolution: {integrity: sha512-1en7r518sct0Y8CQ5IsuuBN4uAmtNLaWuxmseW43OxeXyj43Uu2aPBfbopjL4b5xH8WZBdDrrPmikgOl42U46A==}
     peerDependencies:
       '@content-collections/core': 0.x
 
-  '@content-collections/vite@0.2.4':
-    resolution: {integrity: sha512-3+n7pUnUMyjVasZLyxoUEU9VtJigWN/REliCyvAjsm0obv+6UpHAiRrkuLhn9luKAiHw4PRcFIJefBGz4i8Uzw==}
+  '@content-collections/vite@0.2.9':
+    resolution: {integrity: sha512-Eulni4LnzlvqYjWAOR/MYCQBnwn6/yRwJhQDNgsj5Aj56hwNG/zQMPBLhjxH+O2FGXbBTgYvdQickxwApRRu7w==}
     peerDependencies:
       '@content-collections/core': ^0.x
-      vite: ^5
-
-  '@dabh/diagnostics@2.0.8':
-    resolution: {integrity: sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q==}
+      vite: ^5 || ^6 || ^7
 
-  '@dependents/detective-less@5.0.1':
-    resolution: {integrity: sha512-Y6+WUMsTFWE5jb20IFP4YGa5IrGY/+a/FbOSjDF/wz9gepU2hwCYSXRHP/vPwBvwcY3SVMASt4yXxbXNXigmZQ==}
-    engines: {node: '>=18'}
+  '@cspotcode/source-map-support@0.8.1':
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
 
   '@dimforge/rapier3d-compat@0.12.0':
     resolution: {integrity: sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==}
@@ -731,12 +621,14 @@ packages:
     peerDependencies:
       effect: ^3.17.7
 
-  '@emnapi/runtime@1.5.0':
-    resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
+  '@emnapi/core@1.10.0':
+    resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
-  '@envelop/instrumentation@1.0.0':
-    resolution: {integrity: sha512-cxgkB66RQB95H3X27jlnxCRNTmPuSTgmBAq6/4n2Dtv4hsk4yz8FadA1ggmd0uZzvKqWD6CR+WFgTjhDqg7eyw==}
-    engines: {node: '>=18.0.0'}
+  '@emnapi/runtime@1.10.0':
+    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
+
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
   '@esbuild-kit/core-utils@3.3.2':
     resolution: {integrity: sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ==}
@@ -746,20 +638,20 @@ packages:
     resolution: {integrity: sha512-FxEMIkJKnodyA1OaCUoEvbYRkoZlLZ4d/eXFu9Fh8CbBBgP5EmZxrfTRyN0qpXZ4vOvqnE5YdRdcrmUUXuU+dA==}
     deprecated: 'Merged into tsx: https://tsx.is'
 
-  '@esbuild/aix-ppc64@0.25.10':
-    resolution: {integrity: sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==}
+  '@esbuild/aix-ppc64@0.25.12':
+    resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/aix-ppc64@0.25.9':
-    resolution: {integrity: sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==}
+  '@esbuild/aix-ppc64@0.27.4':
+    resolution: {integrity: sha512-cQPwL2mp2nSmHHJlCyoXgHGhbEPMrEEU5xhkcy3Hs/O7nGZqEpZ2sUtLaL9MORLtDfRvVl2/3PAuEkYZH0Ty8Q==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/aix-ppc64@0.27.0':
-    resolution: {integrity: sha512-KuZrd2hRjz01y5JK9mEBSD3Vj3mbCvemhT466rSuJYeE/hjuBrHfjjcjMdTm/sz7au+++sdbJZJmuBwQLuw68A==}
+  '@esbuild/aix-ppc64@0.28.1':
+    resolution: {integrity: sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
@@ -770,20 +662,20 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm64@0.25.10':
-    resolution: {integrity: sha512-LSQa7eDahypv/VO6WKohZGPSJDq5OVOo3UoFR1E4t4Gj1W7zEQMUhI+lo81H+DtB+kP+tDgBp+M4oNCwp6kffg==}
+  '@esbuild/android-arm64@0.25.12':
+    resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm64@0.25.9':
-    resolution: {integrity: sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==}
+  '@esbuild/android-arm64@0.27.4':
+    resolution: {integrity: sha512-gdLscB7v75wRfu7QSm/zg6Rx29VLdy9eTr2t44sfTW7CxwAtQghZ4ZnqHk3/ogz7xao0QAgrkradbBzcqFPasw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm64@0.27.0':
-    resolution: {integrity: sha512-CC3vt4+1xZrs97/PKDkl0yN7w8edvU2vZvAFGD16n9F0Cvniy5qvzRXjfO1l94efczkkQE6g1x0i73Qf5uthOQ==}
+  '@esbuild/android-arm64@0.28.1':
+    resolution: {integrity: sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
@@ -794,20 +686,20 @@ packages:
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-arm@0.25.10':
-    resolution: {integrity: sha512-dQAxF1dW1C3zpeCDc5KqIYuZ1tgAdRXNoZP7vkBIRtKZPYe2xVr/d3SkirklCHudW1B45tGiUlz2pUWDfbDD4w==}
+  '@esbuild/android-arm@0.25.12':
+    resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-arm@0.25.9':
-    resolution: {integrity: sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==}
+  '@esbuild/android-arm@0.27.4':
+    resolution: {integrity: sha512-X9bUgvxiC8CHAGKYufLIHGXPJWnr0OCdR0anD2e21vdvgCI8lIfqFbnoeOz7lBjdrAGUhqLZLcQo6MLhTO2DKQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-arm@0.27.0':
-    resolution: {integrity: sha512-j67aezrPNYWJEOHUNLPj9maeJte7uSMM6gMoxfPC9hOg8N02JuQi/T7ewumf4tNvJadFkvLZMlAq73b9uwdMyQ==}
+  '@esbuild/android-arm@0.28.1':
+    resolution: {integrity: sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
@@ -818,20 +710,20 @@ packages:
     cpu: [x64]
     os: [android]
 
-  '@esbuild/android-x64@0.25.10':
-    resolution: {integrity: sha512-MiC9CWdPrfhibcXwr39p9ha1x0lZJ9KaVfvzA0Wxwz9ETX4v5CHfF09bx935nHlhi+MxhA63dKRRQLiVgSUtEg==}
+  '@esbuild/android-x64@0.25.12':
+    resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
-  '@esbuild/android-x64@0.25.9':
-    resolution: {integrity: sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==}
+  '@esbuild/android-x64@0.27.4':
+    resolution: {integrity: sha512-PzPFnBNVF292sfpfhiyiXCGSn9HZg5BcAz+ivBuSsl6Rk4ga1oEXAamhOXRFyMcjwr2DVtm40G65N3GLeH1Lvw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
-  '@esbuild/android-x64@0.27.0':
-    resolution: {integrity: sha512-wurMkF1nmQajBO1+0CJmcN17U4BP6GqNSROP8t0X/Jiw2ltYGLHpEksp9MpoBqkrFR3kv2/te6Sha26k3+yZ9Q==}
+  '@esbuild/android-x64@0.28.1':
+    resolution: {integrity: sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
@@ -842,20 +734,20 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-arm64@0.25.10':
-    resolution: {integrity: sha512-JC74bdXcQEpW9KkV326WpZZjLguSZ3DfS8wrrvPMHgQOIEIG/sPXEN/V8IssoJhbefLRcRqw6RQH2NnpdprtMA==}
+  '@esbuild/darwin-arm64@0.25.12':
+    resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-arm64@0.25.9':
-    resolution: {integrity: sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==}
+  '@esbuild/darwin-arm64@0.27.4':
+    resolution: {integrity: sha512-b7xaGIwdJlht8ZFCvMkpDN6uiSmnxxK56N2GDTMYPr2/gzvfdQN8rTfBsvVKmIVY/X7EM+/hJKEIbbHs9oA4tQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-arm64@0.27.0':
-    resolution: {integrity: sha512-uJOQKYCcHhg07DL7i8MzjvS2LaP7W7Pn/7uA0B5S1EnqAirJtbyw4yC5jQ5qcFjHK9l6o/MX9QisBg12kNkdHg==}
+  '@esbuild/darwin-arm64@0.28.1':
+    resolution: {integrity: sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
@@ -866,20 +758,20 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.25.10':
-    resolution: {integrity: sha512-tguWg1olF6DGqzws97pKZ8G2L7Ig1vjDmGTwcTuYHbuU6TTjJe5FXbgs5C1BBzHbJ2bo1m3WkQDbWO2PvamRcg==}
+  '@esbuild/darwin-x64@0.25.12':
+    resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.25.9':
-    resolution: {integrity: sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==}
+  '@esbuild/darwin-x64@0.27.4':
+    resolution: {integrity: sha512-sR+OiKLwd15nmCdqpXMnuJ9W2kpy0KigzqScqHI3Hqwr7IXxBp3Yva+yJwoqh7rE8V77tdoheRYataNKL4QrPw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.27.0':
-    resolution: {integrity: sha512-8mG6arH3yB/4ZXiEnXof5MK72dE6zM9cDvUcPtxhUZsDjESl9JipZYW60C3JGreKCEP+p8P/72r69m4AZGJd5g==}
+  '@esbuild/darwin-x64@0.28.1':
+    resolution: {integrity: sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
@@ -890,20 +782,20 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-arm64@0.25.10':
-    resolution: {integrity: sha512-3ZioSQSg1HT2N05YxeJWYR+Libe3bREVSdWhEEgExWaDtyFbbXWb49QgPvFH8u03vUPX10JhJPcz7s9t9+boWg==}
+  '@esbuild/freebsd-arm64@0.25.12':
+    resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-arm64@0.25.9':
-    resolution: {integrity: sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==}
+  '@esbuild/freebsd-arm64@0.27.4':
+    resolution: {integrity: sha512-jnfpKe+p79tCnm4GVav68A7tUFeKQwQyLgESwEAUzyxk/TJr4QdGog9sqWNcUbr/bZt/O/HXouspuQDd9JxFSw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-arm64@0.27.0':
-    resolution: {integrity: sha512-9FHtyO988CwNMMOE3YIeci+UV+x5Zy8fI2qHNpsEtSF83YPBmE8UWmfYAQg6Ux7Gsmd4FejZqnEUZCMGaNQHQw==}
+  '@esbuild/freebsd-arm64@0.28.1':
+    resolution: {integrity: sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
@@ -914,20 +806,20 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.25.10':
-    resolution: {integrity: sha512-LLgJfHJk014Aa4anGDbh8bmI5Lk+QidDmGzuC2D+vP7mv/GeSN+H39zOf7pN5N8p059FcOfs2bVlrRr4SK9WxA==}
+  '@esbuild/freebsd-x64@0.25.12':
+    resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.25.9':
-    resolution: {integrity: sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==}
+  '@esbuild/freebsd-x64@0.27.4':
+    resolution: {integrity: sha512-2kb4ceA/CpfUrIcTUl1wrP/9ad9Atrp5J94Lq69w7UwOMolPIGrfLSvAKJp0RTvkPPyn6CIWrNy13kyLikZRZQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.27.0':
-    resolution: {integrity: sha512-zCMeMXI4HS/tXvJz8vWGexpZj2YVtRAihHLk1imZj4efx1BQzN76YFeKqlDr3bUWI26wHwLWPd3rwh6pe4EV7g==}
+  '@esbuild/freebsd-x64@0.28.1':
+    resolution: {integrity: sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
@@ -938,20 +830,20 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm64@0.25.10':
-    resolution: {integrity: sha512-5luJWN6YKBsawd5f9i4+c+geYiVEw20FVW5x0v1kEMWNq8UctFjDiMATBxLvmmHA4bf7F6hTRaJgtghFr9iziQ==}
+  '@esbuild/linux-arm64@0.25.12':
+    resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm64@0.25.9':
-    resolution: {integrity: sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==}
+  '@esbuild/linux-arm64@0.27.4':
+    resolution: {integrity: sha512-7nQOttdzVGth1iz57kxg9uCz57dxQLHWxopL6mYuYthohPKEK0vU0C3O21CcBK6KDlkYVcnDXY099HcCDXd9dA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm64@0.27.0':
-    resolution: {integrity: sha512-AS18v0V+vZiLJyi/4LphvBE+OIX682Pu7ZYNsdUHyUKSoRwdnOsMf6FDekwoAFKej14WAkOef3zAORJgAtXnlQ==}
+  '@esbuild/linux-arm64@0.28.1':
+    resolution: {integrity: sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
@@ -962,20 +854,20 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-arm@0.25.10':
-    resolution: {integrity: sha512-oR31GtBTFYCqEBALI9r6WxoU/ZofZl962pouZRTEYECvNF/dtXKku8YXcJkhgK/beU+zedXfIzHijSRapJY3vg==}
+  '@esbuild/linux-arm@0.25.12':
+    resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-arm@0.25.9':
-    resolution: {integrity: sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==}
+  '@esbuild/linux-arm@0.27.4':
+    resolution: {integrity: sha512-aBYgcIxX/wd5n2ys0yESGeYMGF+pv6g0DhZr3G1ZG4jMfruU9Tl1i2Z+Wnj9/KjGz1lTLCcorqE2viePZqj4Eg==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-arm@0.27.0':
-    resolution: {integrity: sha512-t76XLQDpxgmq2cNXKTVEB7O7YMb42atj2Re2Haf45HkaUpjM2J0UuJZDuaGbPbamzZ7bawyGFUkodL+zcE+jvQ==}
+  '@esbuild/linux-arm@0.28.1':
+    resolution: {integrity: sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
@@ -986,20 +878,20 @@ packages:
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.25.10':
-    resolution: {integrity: sha512-NrSCx2Kim3EnnWgS4Txn0QGt0Xipoumb6z6sUtl5bOEZIVKhzfyp/Lyw4C1DIYvzeW/5mWYPBFJU3a/8Yr75DQ==}
+  '@esbuild/linux-ia32@0.25.12':
+    resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.25.9':
-    resolution: {integrity: sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==}
+  '@esbuild/linux-ia32@0.27.4':
+    resolution: {integrity: sha512-oPtixtAIzgvzYcKBQM/qZ3R+9TEUd1aNJQu0HhGyqtx6oS7qTpvjheIWBbes4+qu1bNlo2V4cbkISr8q6gRBFA==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.27.0':
-    resolution: {integrity: sha512-Mz1jxqm/kfgKkc/KLHC5qIujMvnnarD9ra1cEcrs7qshTUSksPihGrWHVG5+osAIQ68577Zpww7SGapmzSt4Nw==}
+  '@esbuild/linux-ia32@0.28.1':
+    resolution: {integrity: sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
@@ -1010,20 +902,20 @@ packages:
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.25.10':
-    resolution: {integrity: sha512-xoSphrd4AZda8+rUDDfD9J6FUMjrkTz8itpTITM4/xgerAZZcFW7Dv+sun7333IfKxGG8gAq+3NbfEMJfiY+Eg==}
+  '@esbuild/linux-loong64@0.25.12':
+    resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.25.9':
-    resolution: {integrity: sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==}
+  '@esbuild/linux-loong64@0.27.4':
+    resolution: {integrity: sha512-8mL/vh8qeCoRcFH2nM8wm5uJP+ZcVYGGayMavi8GmRJjuI3g1v6Z7Ni0JJKAJW+m0EtUuARb6Lmp4hMjzCBWzA==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.27.0':
-    resolution: {integrity: sha512-QbEREjdJeIreIAbdG2hLU1yXm1uu+LTdzoq1KCo4G4pFOLlvIspBm36QrQOar9LFduavoWX2msNFAAAY9j4BDg==}
+  '@esbuild/linux-loong64@0.28.1':
+    resolution: {integrity: sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
@@ -1034,20 +926,20 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.25.10':
-    resolution: {integrity: sha512-ab6eiuCwoMmYDyTnyptoKkVS3k8fy/1Uvq7Dj5czXI6DF2GqD2ToInBI0SHOp5/X1BdZ26RKc5+qjQNGRBelRA==}
+  '@esbuild/linux-mips64el@0.25.12':
+    resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.25.9':
-    resolution: {integrity: sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==}
+  '@esbuild/linux-mips64el@0.27.4':
+    resolution: {integrity: sha512-1RdrWFFiiLIW7LQq9Q2NES+HiD4NyT8Itj9AUeCl0IVCA459WnPhREKgwrpaIfTOe+/2rdntisegiPWn/r/aAw==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.27.0':
-    resolution: {integrity: sha512-sJz3zRNe4tO2wxvDpH/HYJilb6+2YJxo/ZNbVdtFiKDufzWq4JmKAiHy9iGoLjAV7r/W32VgaHGkk35cUXlNOg==}
+  '@esbuild/linux-mips64el@0.28.1':
+    resolution: {integrity: sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
@@ -1058,20 +950,20 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.25.10':
-    resolution: {integrity: sha512-NLinzzOgZQsGpsTkEbdJTCanwA5/wozN9dSgEl12haXJBzMTpssebuXR42bthOF3z7zXFWH1AmvWunUCkBE4EA==}
+  '@esbuild/linux-ppc64@0.25.12':
+    resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.25.9':
-    resolution: {integrity: sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==}
+  '@esbuild/linux-ppc64@0.27.4':
+    resolution: {integrity: sha512-tLCwNG47l3sd9lpfyx9LAGEGItCUeRCWeAx6x2Jmbav65nAwoPXfewtAdtbtit/pJFLUWOhpv0FpS6GQAmPrHA==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.27.0':
-    resolution: {integrity: sha512-z9N10FBD0DCS2dmSABDBb5TLAyF1/ydVb+N4pi88T45efQ/w4ohr/F/QYCkxDPnkhkp6AIpIcQKQ8F0ANoA2JA==}
+  '@esbuild/linux-ppc64@0.28.1':
+    resolution: {integrity: sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
@@ -1082,20 +974,20 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.25.10':
-    resolution: {integrity: sha512-FE557XdZDrtX8NMIeA8LBJX3dC2M8VGXwfrQWU7LB5SLOajfJIxmSdyL/gU1m64Zs9CBKvm4UAuBp5aJ8OgnrA==}
+  '@esbuild/linux-riscv64@0.25.12':
+    resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.25.9':
-    resolution: {integrity: sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==}
+  '@esbuild/linux-riscv64@0.27.4':
+    resolution: {integrity: sha512-BnASypppbUWyqjd1KIpU4AUBiIhVr6YlHx/cnPgqEkNoVOhHg+YiSVxM1RLfiy4t9cAulbRGTNCKOcqHrEQLIw==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.27.0':
-    resolution: {integrity: sha512-pQdyAIZ0BWIC5GyvVFn5awDiO14TkT/19FTmFcPdDec94KJ1uZcmFs21Fo8auMXzD4Tt+diXu1LW1gHus9fhFQ==}
+  '@esbuild/linux-riscv64@0.28.1':
+    resolution: {integrity: sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
@@ -1106,20 +998,20 @@ packages:
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.25.10':
-    resolution: {integrity: sha512-3BBSbgzuB9ajLoVZk0mGu+EHlBwkusRmeNYdqmznmMc9zGASFjSsxgkNsqmXugpPk00gJ0JNKh/97nxmjctdew==}
+  '@esbuild/linux-s390x@0.25.12':
+    resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.25.9':
-    resolution: {integrity: sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==}
+  '@esbuild/linux-s390x@0.27.4':
+    resolution: {integrity: sha512-+eUqgb/Z7vxVLezG8bVB9SfBie89gMueS+I0xYh2tJdw3vqA/0ImZJ2ROeWwVJN59ihBeZ7Tu92dF/5dy5FttA==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.27.0':
-    resolution: {integrity: sha512-hPlRWR4eIDDEci953RI1BLZitgi5uqcsjKMxwYfmi4LcwyWo2IcRP+lThVnKjNtk90pLS8nKdroXYOqW+QQH+w==}
+  '@esbuild/linux-s390x@0.28.1':
+    resolution: {integrity: sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
@@ -1130,38 +1022,38 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/linux-x64@0.25.10':
-    resolution: {integrity: sha512-QSX81KhFoZGwenVyPoberggdW1nrQZSvfVDAIUXr3WqLRZGZqWk/P4T8p2SP+de2Sr5HPcvjhcJzEiulKgnxtA==}
+  '@esbuild/linux-x64@0.25.12':
+    resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/linux-x64@0.25.9':
-    resolution: {integrity: sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==}
+  '@esbuild/linux-x64@0.27.4':
+    resolution: {integrity: sha512-S5qOXrKV8BQEzJPVxAwnryi2+Iq5pB40gTEIT69BQONqR7JH1EPIcQ/Uiv9mCnn05jff9umq/5nqzxlqTOg9NA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/linux-x64@0.27.0':
-    resolution: {integrity: sha512-1hBWx4OUJE2cab++aVZ7pObD6s+DK4mPGpemtnAORBvb5l/g5xFGk0vc0PjSkrDs0XaXj9yyob3d14XqvnQ4gw==}
+  '@esbuild/linux-x64@0.28.1':
+    resolution: {integrity: sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-arm64@0.25.10':
-    resolution: {integrity: sha512-AKQM3gfYfSW8XRk8DdMCzaLUFB15dTrZfnX8WXQoOUpUBQ+NaAFCP1kPS/ykbbGYz7rxn0WS48/81l9hFl3u4A==}
+  '@esbuild/netbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-arm64@0.25.9':
-    resolution: {integrity: sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==}
+  '@esbuild/netbsd-arm64@0.27.4':
+    resolution: {integrity: sha512-xHT8X4sb0GS8qTqiwzHqpY00C95DPAq7nAwX35Ie/s+LO9830hrMd3oX0ZMKLvy7vsonee73x0lmcdOVXFzd6Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-arm64@0.27.0':
-    resolution: {integrity: sha512-6m0sfQfxfQfy1qRuecMkJlf1cIzTOgyaeXaiVaaki8/v+WB+U4hc6ik15ZW6TAllRlg/WuQXxWj1jx6C+dfy3w==}
+  '@esbuild/netbsd-arm64@0.28.1':
+    resolution: {integrity: sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
@@ -1172,38 +1064,38 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.25.10':
-    resolution: {integrity: sha512-7RTytDPGU6fek/hWuN9qQpeGPBZFfB4zZgcz2VK2Z5VpdUxEI8JKYsg3JfO0n/Z1E/6l05n0unDCNc4HnhQGig==}
+  '@esbuild/netbsd-x64@0.25.12':
+    resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.25.9':
-    resolution: {integrity: sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==}
+  '@esbuild/netbsd-x64@0.27.4':
+    resolution: {integrity: sha512-RugOvOdXfdyi5Tyv40kgQnI0byv66BFgAqjdgtAKqHoZTbTF2QqfQrFwa7cHEORJf6X2ht+l9ABLMP0dnKYsgg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.27.0':
-    resolution: {integrity: sha512-xbbOdfn06FtcJ9d0ShxxvSn2iUsGd/lgPIO2V3VZIPDbEaIj1/3nBBe1AwuEZKXVXkMmpr6LUAgMkLD/4D2PPA==}
+  '@esbuild/netbsd-x64@0.28.1':
+    resolution: {integrity: sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-arm64@0.25.10':
-    resolution: {integrity: sha512-5Se0VM9Wtq797YFn+dLimf2Zx6McttsH2olUBsDml+lm0GOCRVebRWUvDtkY4BWYv/3NgzS8b/UM3jQNh5hYyw==}
+  '@esbuild/openbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-arm64@0.25.9':
-    resolution: {integrity: sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==}
+  '@esbuild/openbsd-arm64@0.27.4':
+    resolution: {integrity: sha512-2MyL3IAaTX+1/qP0O1SwskwcwCoOI4kV2IBX1xYnDDqthmq5ArrW94qSIKCAuRraMgPOmG0RDTA74mzYNQA9ow==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-arm64@0.27.0':
-    resolution: {integrity: sha512-fWgqR8uNbCQ/GGv0yhzttj6sU/9Z5/Sv/VGU3F5OuXK6J6SlriONKrQ7tNlwBrJZXRYk5jUhuWvF7GYzGguBZQ==}
+  '@esbuild/openbsd-arm64@0.28.1':
+    resolution: {integrity: sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
@@ -1214,38 +1106,38 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.25.10':
-    resolution: {integrity: sha512-XkA4frq1TLj4bEMB+2HnI0+4RnjbuGZfet2gs/LNs5Hc7D89ZQBHQ0gL2ND6Lzu1+QVkjp3x1gIcPKzRNP8bXw==}
+  '@esbuild/openbsd-x64@0.25.12':
+    resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.25.9':
-    resolution: {integrity: sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==}
+  '@esbuild/openbsd-x64@0.27.4':
+    resolution: {integrity: sha512-u8fg/jQ5aQDfsnIV6+KwLOf1CmJnfu1ShpwqdwC0uA7ZPwFws55Ngc12vBdeUdnuWoQYx/SOQLGDcdlfXhYmXQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.27.0':
-    resolution: {integrity: sha512-aCwlRdSNMNxkGGqQajMUza6uXzR/U0dIl1QmLjPtRbLOx3Gy3otfFu/VjATy4yQzo9yFDGTxYDo1FfAD9oRD2A==}
+  '@esbuild/openbsd-x64@0.28.1':
+    resolution: {integrity: sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openharmony-arm64@0.25.10':
-    resolution: {integrity: sha512-AVTSBhTX8Y/Fz6OmIVBip9tJzZEUcY8WLh7I59+upa5/GPhh2/aM6bvOMQySspnCCHvFi79kMtdJS1w0DXAeag==}
+  '@esbuild/openharmony-arm64@0.25.12':
+    resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
 
-  '@esbuild/openharmony-arm64@0.25.9':
-    resolution: {integrity: sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==}
+  '@esbuild/openharmony-arm64@0.27.4':
+    resolution: {integrity: sha512-JkTZrl6VbyO8lDQO3yv26nNr2RM2yZzNrNHEsj9bm6dOwwu9OYN28CjzZkH57bh4w0I2F7IodpQvUAEd1mbWXg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
 
-  '@esbuild/openharmony-arm64@0.27.0':
-    resolution: {integrity: sha512-nyvsBccxNAsNYz2jVFYwEGuRRomqZ149A39SHWk4hV0jWxKM0hjBPm3AmdxcbHiFLbBSwG6SbpIcUbXjgyECfA==}
+  '@esbuild/openharmony-arm64@0.28.1':
+    resolution: {integrity: sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
@@ -1256,20 +1148,20 @@ packages:
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/sunos-x64@0.25.10':
-    resolution: {integrity: sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==}
+  '@esbuild/sunos-x64@0.25.12':
+    resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/sunos-x64@0.25.9':
-    resolution: {integrity: sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==}
+  '@esbuild/sunos-x64@0.27.4':
+    resolution: {integrity: sha512-/gOzgaewZJfeJTlsWhvUEmUG4tWEY2Spp5M20INYRg2ZKl9QPO3QEEgPeRtLjEWSW8FilRNacPOg8R1uaYkA6g==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/sunos-x64@0.27.0':
-    resolution: {integrity: sha512-Q1KY1iJafM+UX6CFEL+F4HRTgygmEW568YMqDA5UV97AuZSm21b7SXIrRJDwXWPzr8MGr75fUZPV67FdtMHlHA==}
+  '@esbuild/sunos-x64@0.28.1':
+    resolution: {integrity: sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
@@ -1280,20 +1172,20 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-arm64@0.25.10':
-    resolution: {integrity: sha512-ah+9b59KDTSfpaCg6VdJoOQvKjI33nTaQr4UluQwW7aEwZQsbMCfTmfEO4VyewOxx4RaDT/xCy9ra2GPWmO7Kw==}
+  '@esbuild/win32-arm64@0.25.12':
+    resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-arm64@0.25.9':
-    resolution: {integrity: sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==}
+  '@esbuild/win32-arm64@0.27.4':
+    resolution: {integrity: sha512-Z9SExBg2y32smoDQdf1HRwHRt6vAHLXcxD2uGgO/v2jK7Y718Ix4ndsbNMU/+1Qiem9OiOdaqitioZwxivhXYg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-arm64@0.27.0':
-    resolution: {integrity: sha512-W1eyGNi6d+8kOmZIwi/EDjrL9nxQIQ0MiGqe/AWc6+IaHloxHSGoeRgDRKHFISThLmsewZ5nHFvGFWdBYlgKPg==}
+  '@esbuild/win32-arm64@0.28.1':
+    resolution: {integrity: sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
@@ -1304,20 +1196,20 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.25.10':
-    resolution: {integrity: sha512-QHPDbKkrGO8/cz9LKVnJU22HOi4pxZnZhhA2HYHez5Pz4JeffhDjf85E57Oyco163GnzNCVkZK0b/n4Y0UHcSw==}
+  '@esbuild/win32-ia32@0.25.12':
+    resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.25.9':
-    resolution: {integrity: sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==}
+  '@esbuild/win32-ia32@0.27.4':
+    resolution: {integrity: sha512-DAyGLS0Jz5G5iixEbMHi5KdiApqHBWMGzTtMiJ72ZOLhbu/bzxgAe8Ue8CTS3n3HbIUHQz/L51yMdGMeoxXNJw==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.27.0':
-    resolution: {integrity: sha512-30z1aKL9h22kQhilnYkORFYt+3wp7yZsHWus+wSKAJR8JtdfI76LJ4SBdMsCopTR3z/ORqVu5L1vtnHZWVj4cQ==}
+  '@esbuild/win32-ia32@0.28.1':
+    resolution: {integrity: sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
@@ -1328,273 +1220,239 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@esbuild/win32-x64@0.25.10':
-    resolution: {integrity: sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw==}
+  '@esbuild/win32-x64@0.25.12':
+    resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
-  '@esbuild/win32-x64@0.25.9':
-    resolution: {integrity: sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==}
+  '@esbuild/win32-x64@0.27.4':
+    resolution: {integrity: sha512-+knoa0BDoeXgkNvvV1vvbZX4+hizelrkwmGJBdT17t8FNPwG2lKemmuMZlmaNQ3ws3DKKCxpb4zRZEIp3UxFCg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
-  '@esbuild/win32-x64@0.27.0':
-    resolution: {integrity: sha512-aIitBcjQeyOhMTImhLZmtxfdOcuNRpwlPNmlFKPcHQYPhEssw75Cl1TSXJXpMkzaua9FUetx/4OQKq7eJul5Cg==}
+  '@esbuild/win32-x64@0.28.1':
+    resolution: {integrity: sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.9.0':
-    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@fastify/otel@0.18.0':
+    resolution: {integrity: sha512-3TASCATfw+ctICSb4ymrv7iCm0qJ0N9CarB+CZ7zIJ7KqNbwI5JjyDL1/sxoC0ccTO1Zyd1iQ+oqncPg5FJXaA==}
     peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
-  '@eslint-community/regexpp@4.12.2':
-    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-
-  '@eslint/config-array@0.21.1':
-    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/config-helpers@0.4.2':
-    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/core@0.17.0':
-    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/eslintrc@3.3.3':
-    resolution: {integrity: sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/js@9.39.1':
-    resolution: {integrity: sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/object-schema@2.1.7':
-    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+      '@opentelemetry/api': ^1.9.0
 
-  '@eslint/plugin-kit@0.4.1':
-    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@fingerprintjs/fingerprintjs-pro-react@2.7.1':
+    resolution: {integrity: sha512-/vQtjd+P8C9OFU8Wvd4AScoNRP6RKDIvYQwwaY/b31PcRBNDqVV9xm7DDBg9uTdDv4KZM3ubEY4JyyVWkXs4EA==}
 
-  '@fastify/accept-negotiator@2.0.1':
-    resolution: {integrity: sha512-/c/TW2bO/v9JeEgoD/g1G5GxGeCF1Hafdf79WPmUlgYiBXummY0oX3VVq4yFkKKVBKDNlaDUYoab7g38RpPqCQ==}
+  '@fingerprintjs/fingerprintjs-pro-spa@1.3.3':
+    resolution: {integrity: sha512-jM5k30S9RT/WW6gnmNWACc7UHeK1md9NbZg8kUsdxvPtDeW8xKnA6tb58Rqfkg6kvqHTq5aHFzw9hgsTH3DbNQ==}
 
-  '@fastify/busboy@3.2.0':
-    resolution: {integrity: sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==}
+  '@fingerprintjs/fingerprintjs-pro@3.12.9':
+    resolution: {integrity: sha512-MiM8ASp9nQgY/abPK+1+LaZHvn6aaTX9Zze1ghCDO/Y86k1dbRnDeBr5Zg5fmEhwMda9J7+6zl54lds6GENZUw==}
 
-  '@floating-ui/core@1.6.9':
-    resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==}
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
 
-  '@floating-ui/dom@1.6.13':
-    resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==}
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
 
-  '@floating-ui/react-dom@2.1.2':
-    resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
+  '@floating-ui/react-dom@2.1.8':
+    resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  '@floating-ui/react@0.27.8':
-    resolution: {integrity: sha512-EQJ4Th328y2wyHR3KzOUOoTW2UKjFk53fmyahfwExnFQ8vnsMYqKc+fFPOkeYtj5tcp1DUMiNJ7BFhed7e9ONw==}
+  '@floating-ui/react@0.27.19':
+    resolution: {integrity: sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==}
     peerDependencies:
       react: '>=17.0.0'
       react-dom: '>=17.0.0'
 
-  '@floating-ui/utils@0.2.9':
-    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
-  '@hono/mcp@0.2.3':
-    resolution: {integrity: sha512-wrYKVQSjnBg4/ZinnnP/1t3jlvP3Z9fqZv8OzuhLXV4gVTLOHOHDhnXsIwD0nFVKk2pMOvA+sDfrKyRzw4yUPg==}
+  '@google/model-viewer@4.2.0':
+    resolution: {integrity: sha512-RjpAI5cLs9CdvPcMRsOs8Bea/lNmGTTyaPyl16o9Fv6Qn8VSpgBMmXFr/11yb0hTrsojp2dOACEcY77R8hVUVA==}
+    engines: {node: '>=6.0.0'}
     peerDependencies:
-      '@modelcontextprotocol/sdk': ^1.25.1
-      hono: '*'
-      hono-rate-limiter: ^0.4.2
-      zod: ^3.25.0 || ^4.0.0
+      three: ^0.182.0
+
+  '@hcaptcha/loader@2.3.0':
+    resolution: {integrity: sha512-i4lnNxKBe+COf3R1nFZEWaZoHIoJjvDgWqvcNrdZq8ehoSNMN6KVZ56dcQ02qKie2h3+BkbkwlJA9DOIuLlK/g==}
+
+  '@hcaptcha/react-hcaptcha@1.17.4':
+    resolution: {integrity: sha512-rIvgesG1N7SS9sAYYHFoWm+nXqRrxq7RcA9z2pKkDWV+S1GdfmrTNYA1aPyVWVe3eowphTCwyDJvl97Swwy0mw==}
+    peerDependencies:
+      react: '>= 16.3.0'
+      react-dom: '>= 16.3.0'
 
-  '@hono/node-server@1.19.8':
-    resolution: {integrity: sha512-0/g2lIOPzX8f3vzW1ggQgvG5mjtFBDBHFAzI5SFAi2DzSqS9luJwqg9T6O/gKYLi+inS7eNxBeIFkkghIPvrMA==}
+  '@hono/node-server@1.19.12':
+    resolution: {integrity: sha512-txsUW4SQ1iilgE0l9/e9VQWmELXifEFvmdA1j6WFh/aFPj99hIntrSsq/if0UWyGVkmrRPKA1wCeP+UCr1B9Uw==}
     engines: {node: '>=18.14.1'}
     peerDependencies:
       hono: ^4
 
-  '@humanfs/core@0.19.1':
-    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
-    engines: {node: '>=18.18.0'}
-
-  '@humanfs/node@0.16.7':
-    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
-    engines: {node: '>=18.18.0'}
-
-  '@humanwhocodes/module-importer@1.0.1':
-    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
-    engines: {node: '>=12.22'}
-
-  '@humanwhocodes/momoa@2.0.4':
-    resolution: {integrity: sha512-RE815I4arJFtt+FVeU1Tgp9/Xvecacji8w/V6XtXsWWH/wz/eNkNbhb+ny/+PlVZjV0rxQpRSQKNKE3lcktHEA==}
-    engines: {node: '>=10.10.0'}
-
-  '@humanwhocodes/retry@0.4.3':
-    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
-    engines: {node: '>=18.18'}
-
-  '@iarna/toml@2.2.5':
-    resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
-
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@iconify/utils@3.0.1':
-    resolution: {integrity: sha512-A78CUEnFGX8I/WlILxJCuIJXloL0j/OJ9PSchPAfCargEIKmUBWvvEMmKWB5oONwiUqlNt+5eRufdkLxeHIWYw==}
+  '@iconify/utils@3.1.0':
+    resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
 
-  '@img/colour@1.0.0':
-    resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
+  '@img/colour@1.1.0':
+    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
     engines: {node: '>=18'}
 
-  '@img/sharp-darwin-arm64@0.34.4':
-    resolution: {integrity: sha512-sitdlPzDVyvmINUdJle3TNHl+AG9QcwiAMsXmccqsCOMZNIdW2/7S26w0LyU8euiLVzFBL3dXPwVCq/ODnf2vA==}
+  '@img/sharp-darwin-arm64@0.34.5':
+    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-darwin-x64@0.34.4':
-    resolution: {integrity: sha512-rZheupWIoa3+SOdF/IcUe1ah4ZDpKBGWcsPX6MT0lYniH9micvIU7HQkYTfrx5Xi8u+YqwLtxC/3vl8TQN6rMg==}
+  '@img/sharp-darwin-x64@0.34.5':
+    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-arm64@1.2.3':
-    resolution: {integrity: sha512-QzWAKo7kpHxbuHqUC28DZ9pIKpSi2ts2OJnoIGI26+HMgq92ZZ4vk8iJd4XsxN+tYfNJxzH6W62X5eTcsBymHw==}
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-x64@1.2.3':
-    resolution: {integrity: sha512-Ju+g2xn1E2AKO6YBhxjj+ACcsPQRHT0bhpglxcEf+3uyPY+/gL8veniKoo96335ZaPo03bdDXMv0t+BBFAbmRA==}
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-linux-arm64@1.2.3':
-    resolution: {integrity: sha512-I4RxkXU90cpufazhGPyVujYwfIm9Nk1QDEmiIsaPwdnm013F7RIceaCc87kAH+oUB1ezqEvC6ga4m7MSlqsJvQ==}
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
-  '@img/sharp-libvips-linux-arm@1.2.3':
-    resolution: {integrity: sha512-x1uE93lyP6wEwGvgAIV0gP6zmaL/a0tGzJs/BIDDG0zeBhMnuUPm7ptxGhUbcGs4okDJrk4nxgrmxpib9g6HpA==}
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
-  '@img/sharp-libvips-linux-ppc64@1.2.3':
-    resolution: {integrity: sha512-Y2T7IsQvJLMCBM+pmPbM3bKT/yYJvVtLJGfCs4Sp95SjvnFIjynbjzsa7dY1fRJX45FTSfDksbTp6AGWudiyCg==}
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
 
-  '@img/sharp-libvips-linux-s390x@1.2.3':
-    resolution: {integrity: sha512-RgWrs/gVU7f+K7P+KeHFaBAJlNkD1nIZuVXdQv6S+fNA6syCcoboNjsV2Pou7zNlVdNQoQUpQTk8SWDHUA3y/w==}
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
-  '@img/sharp-libvips-linux-x64@1.2.3':
-    resolution: {integrity: sha512-3JU7LmR85K6bBiRzSUc/Ff9JBVIFVvq6bomKE0e63UXGeRw2HPVEjoJke1Yx+iU4rL7/7kUjES4dZ/81Qjhyxg==}
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.2.3':
-    resolution: {integrity: sha512-F9q83RZ8yaCwENw1GieztSfj5msz7GGykG/BA+MOUefvER69K/ubgFHNeSyUu64amHIYKGDs4sRCMzXVj8sEyw==}
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
-  '@img/sharp-libvips-linuxmusl-x64@1.2.3':
-    resolution: {integrity: sha512-U5PUY5jbc45ANM6tSJpsgqmBF/VsL6LnxJmIf11kB7J5DctHgqm0SkuXzVWtIY90GnJxKnC/JT251TDnk1fu/g==}
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
-  '@img/sharp-linux-arm64@0.34.4':
-    resolution: {integrity: sha512-YXU1F/mN/Wu786tl72CyJjP/Ngl8mGHN1hST4BGl+hiW5jhCnV2uRVTNOcaYPs73NeT/H8Upm3y9582JVuZHrQ==}
+  '@img/sharp-linux-arm64@0.34.5':
+    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
-  '@img/sharp-linux-arm@0.34.4':
-    resolution: {integrity: sha512-Xyam4mlqM0KkTHYVSuc6wXRmM7LGN0P12li03jAnZ3EJWZqj83+hi8Y9UxZUbxsgsK1qOEwg7O0Bc0LjqQVtxA==}
+  '@img/sharp-linux-arm@0.34.5':
+    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
-  '@img/sharp-linux-ppc64@0.34.4':
-    resolution: {integrity: sha512-F4PDtF4Cy8L8hXA2p3TO6s4aDt93v+LKmpcYFLAVdkkD3hSxZzee0rh6/+94FpAynsuMpLX5h+LRsSG3rIciUQ==}
+  '@img/sharp-linux-ppc64@0.34.5':
+    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
-  '@img/sharp-linux-s390x@0.34.4':
-    resolution: {integrity: sha512-qVrZKE9Bsnzy+myf7lFKvng6bQzhNUAYcVORq2P7bDlvmF6u2sCmK2KyEQEBdYk+u3T01pVsPrkj943T1aJAsw==}
+  '@img/sharp-linux-riscv64@0.34.5':
+    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-s390x@0.34.5':
+    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
-  '@img/sharp-linux-x64@0.34.4':
-    resolution: {integrity: sha512-ZfGtcp2xS51iG79c6Vhw9CWqQC8l2Ot8dygxoDoIQPTat/Ov3qAa8qpxSrtAEAJW+UjTXc4yxCjNfxm4h6Xm2A==}
+  '@img/sharp-linux-x64@0.34.5':
+    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
-  '@img/sharp-linuxmusl-arm64@0.34.4':
-    resolution: {integrity: sha512-8hDVvW9eu4yHWnjaOOR8kHVrew1iIX+MUgwxSuH2XyYeNRtLUe4VNioSqbNkB7ZYQJj9rUTT4PyRscyk2PXFKA==}
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
-  '@img/sharp-linuxmusl-x64@0.34.4':
-    resolution: {integrity: sha512-lU0aA5L8QTlfKjpDCEFOZsTYGn3AEiO6db8W5aQDxj0nQkVrZWmN3ZP9sYKWJdtq3PWPhUNlqehWyXpYDcI9Sg==}
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
-  '@img/sharp-wasm32@0.34.4':
-    resolution: {integrity: sha512-33QL6ZO/qpRyG7woB/HUALz28WnTMI2W1jgX3Nu2bypqLIKx/QKMILLJzJjI+SIbvXdG9fUnmrxR7vbi1sTBeA==}
+  '@img/sharp-wasm32@0.34.5':
+    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [wasm32]
 
-  '@img/sharp-win32-arm64@0.34.4':
-    resolution: {integrity: sha512-2Q250do/5WXTwxW3zjsEuMSv5sUU4Tq9VThWKlU2EYLm4MB7ZeMwF+SFJutldYODXF6jzc6YEOC+VfX0SZQPqA==}
+  '@img/sharp-win32-arm64@0.34.5':
+    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [win32]
 
-  '@img/sharp-win32-ia32@0.34.4':
-    resolution: {integrity: sha512-3ZeLue5V82dT92CNL6rsal6I2weKw1cYu+rGKm8fOCCtJTR2gYeUfY3FqUnIJsMUPIH68oS5jmZ0NiJ508YpEw==}
+  '@img/sharp-win32-ia32@0.34.5':
+    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ia32]
     os: [win32]
 
-  '@img/sharp-win32-x64@0.34.4':
-    resolution: {integrity: sha512-xIyj4wpYs8J18sVN3mSQjwrw7fKUqRw+Z5rnHNCy5fYTxigBz81u5mOMPmFumwjcn8+ld1ppptMBCLic1nz6ig==}
+  '@img/sharp-win32-x64@0.34.5':
+    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [win32]
 
-  '@import-maps/resolve@2.0.0':
-    resolution: {integrity: sha512-RwzRTpmrrS6Q1ZhQExwuxJGK1Wqhv4stt+OF2JzS+uawewpwNyU7EJL1WpBex7aDiiGLs4FsXGkfUBdYuX7xiQ==}
-
-  '@isaacs/balanced-match@4.0.1':
-    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
-    engines: {node: 20 || >=22}
-
-  '@isaacs/brace-expansion@5.0.0':
-    resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
-    engines: {node: 20 || >=22}
-
-  '@isaacs/fs-minipass@4.0.1':
-    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
-    engines: {node: '>=18.0.0'}
-
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -1605,94 +1463,155 @@ packages:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/source-map@0.3.11':
-    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
-
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
-  '@jridgewell/trace-mapping@0.3.30':
-    resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
-
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@jridgewell/trace-mapping@0.3.9':
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+
   '@jsonjoy.com/base64@1.1.2':
     resolution: {integrity: sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
+  '@jsonjoy.com/base64@17.67.0':
+    resolution: {integrity: sha512-5SEsJGsm15aP8TQGkDfJvz9axgPwAEm98S5DxOuYe8e1EbfajcDmgeXXzccEjh+mLnjqEKrkBdjHWS5vFNwDdw==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
   '@jsonjoy.com/buffers@1.2.1':
     resolution: {integrity: sha512-12cdlDwX4RUM3QxmUbVJWqZ/mrK6dFQH4Zxq6+r1YXKXYBNgZXndx2qbCJwh3+WWkCSn67IjnlG3XYTvmvYtgA==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
+  '@jsonjoy.com/buffers@17.67.0':
+    resolution: {integrity: sha512-tfExRpYxBvi32vPs9ZHaTjSP4fHAfzSmcahOfNxtvGHcyJel+aibkPlGeBB+7AoC6hL7lXIE++8okecBxx7lcw==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
   '@jsonjoy.com/codegen@1.0.0':
     resolution: {integrity: sha512-E8Oy+08cmCf0EK/NMxpaJZmOxPqM+6iSe2S4nlSBrPZOORoDJILxtbSUEDKQyTamm/BVAhIGllOBNU79/dwf0g==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/json-pack@1.21.0':
-    resolution: {integrity: sha512-+AKG+R2cfZMShzrF2uQw34v3zbeDYUqnQ+jg7ORic3BGtfw9p/+N6RJbq/kkV8JmYZaINknaEQ2m0/f693ZPpg==}
+  '@jsonjoy.com/codegen@17.67.0':
+    resolution: {integrity: sha512-idnkUplROpdBOV0HMcwhsCUS5TRUi9poagdGs70A6S4ux9+/aPuKbh8+UYRTLYQHtXvAdNfQWXDqZEx5k4Dj2Q==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/json-pointer@1.0.2':
-    resolution: {integrity: sha512-Fsn6wM2zlDzY1U+v4Nc8bo3bVqgfNTGcn6dMgs6FjrEnt4ZCe60o6ByKRjOGlI2gow0aE/Q41QOigdTqkyK5fg==}
+  '@jsonjoy.com/fs-core@4.57.1':
+    resolution: {integrity: sha512-YrEi/ZPmgc+GfdO0esBF04qv8boK9Dg9WpRQw/+vM8Qt3nnVIJWIa8HwZ/LXVZ0DB11XUROM8El/7yYTJX+WtA==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/util@1.9.0':
-    resolution: {integrity: sha512-pLuQo+VPRnN8hfPqUTLTHk126wuYdXVxE6aDmjSeV4NCAgyxWbiOIeNJVtID3h1Vzpoi9m4jXezf73I6LgabgQ==}
+  '@jsonjoy.com/fs-fsa@4.57.1':
+    resolution: {integrity: sha512-ooEPvSW/HQDivPDPZMibHGKZf/QS4WRir1czGZmXmp3MsQqLECZEpN0JobrD8iV9BzsuwdIv+PxtWX9WpPLsIA==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@jsonjoy.com/fs-node-builtins@4.57.1':
+    resolution: {integrity: sha512-XHkFKQ5GSH3uxm8c3ZYXVrexGdscpWKIcMWKFQpMpMJc8gA3AwOMBJXJlgpdJqmrhPyQXxaY9nbkNeYpacC0Og==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@juggle/resize-observer@3.4.0':
-    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
+  '@jsonjoy.com/fs-node-to-fsa@4.57.1':
+    resolution: {integrity: sha512-pqGHyWWzNck4jRfaGV39hkqpY5QjRUQ/nRbNT7FYbBa0xf4bDG+TE1Gt2KWZrSkrkZZDE3qZUjYMbjwSliX6pg==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
 
-  '@lezer/common@1.5.0':
-    resolution: {integrity: sha512-PNGcolp9hr4PJdXR4ix7XtixDrClScvtSCYW3rQG106oVMOOI+jFb+0+J3mbeL/53g1Zd6s0kJzaw6Ri68GmAA==}
+  '@jsonjoy.com/fs-node-utils@4.57.1':
+    resolution: {integrity: sha512-vp+7ZzIB8v43G+GLXTS4oDUSQmhAsRz532QmmWBbdYA20s465JvwhkSFvX9cVTqRRAQg+vZ7zWDaIEh0lFe2gw==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
 
-  '@lezer/css@1.3.0':
-    resolution: {integrity: sha512-pBL7hup88KbI7hXnZV3PQsn43DHy6TWyzuyk2AO9UyoXcDltvIdqWKE1dLL/45JVZ+YZkHe1WVHqO6wugZZWcw==}
+  '@jsonjoy.com/fs-node@4.57.1':
+    resolution: {integrity: sha512-3YaKhP8gXEKN+2O49GLNfNb5l2gbnCFHyAaybbA2JkkbQP3dpdef7WcUaHAulg/c5Dg4VncHsA3NWAUSZMR5KQ==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
 
-  '@lezer/highlight@1.2.3':
-    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
+  '@jsonjoy.com/fs-print@4.57.1':
+    resolution: {integrity: sha512-Ynct7ZJmfk6qoXDOKfpovNA36ITUx8rChLmRQtW08J73VOiuNsU8PB6d/Xs7fxJC2ohWR3a5AqyjmLojfrw5yw==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
 
-  '@lezer/html@1.3.13':
-    resolution: {integrity: sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==}
+  '@jsonjoy.com/fs-snapshot@4.57.1':
+    resolution: {integrity: sha512-/oG8xBNFMbDXTq9J7vepSA1kerS5vpgd3p5QZSPd+nX59uwodGJftI51gDYyHRpP57P3WCQf7LHtBYPqwUg2Bg==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
 
-  '@lezer/javascript@1.5.4':
-    resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==}
+  '@jsonjoy.com/json-pack@1.21.0':
+    resolution: {integrity: sha512-+AKG+R2cfZMShzrF2uQw34v3zbeDYUqnQ+jg7ORic3BGtfw9p/+N6RJbq/kkV8JmYZaINknaEQ2m0/f693ZPpg==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
 
-  '@lezer/json@1.0.3':
-    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+  '@jsonjoy.com/json-pack@17.67.0':
+    resolution: {integrity: sha512-t0ejURcGaZsn1ClbJ/3kFqSOjlryd92eQY465IYrezsXmPcfHPE/av4twRSxf6WE+TkZgLY+71vCZbiIiFKA/w==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
 
-  '@lezer/lr@1.4.7':
-    resolution: {integrity: sha512-wNIFWdSUfX9Jc6ePMzxSPVgTVB4EOfDIwLQLWASyiUdHKaMsiilj9bYiGkGQCKVodd0x6bgQCV207PILGFCF9Q==}
+  '@jsonjoy.com/json-pointer@1.0.2':
+    resolution: {integrity: sha512-Fsn6wM2zlDzY1U+v4Nc8bo3bVqgfNTGcn6dMgs6FjrEnt4ZCe60o6ByKRjOGlI2gow0aE/Q41QOigdTqkyK5fg==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
 
-  '@mapbox/node-pre-gyp@2.0.0':
-    resolution: {integrity: sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg==}
-    engines: {node: '>=18'}
-    hasBin: true
+  '@jsonjoy.com/json-pointer@17.67.0':
+    resolution: {integrity: sha512-+iqOFInH+QZGmSuaybBUNdh7yvNrXvqR+h3wjXm0N/3JK1EyyFAeGJvqnmQL61d1ARLlk/wJdFKSL+LHJ1eaUA==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@jsonjoy.com/util@1.9.0':
+    resolution: {integrity: sha512-pLuQo+VPRnN8hfPqUTLTHk126wuYdXVxE6aDmjSeV4NCAgyxWbiOIeNJVtID3h1Vzpoi9m4jXezf73I6LgabgQ==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@jsonjoy.com/util@17.67.0':
+    resolution: {integrity: sha512-6+8xBaz1rLSohlGh68D1pdw3AwDi9xydm8QNlAFkvnavCJYSze+pxoW2VKP8p308jtlMRLs5NTHfPlZLd4w7ew==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@kapaai/react-sdk@0.9.10':
+    resolution: {integrity: sha512-osQyFgBJmhNM207MpB0aZbjs2kjNHjEJbNc5YEReJuyFE72Iydn9CoZGxox2GYRgMIlQ7wljHCzgQqkvR8lXqA==}
+    peerDependencies:
+      react: '>=17.0.0'
+      react-dom: '>=17.0.0'
+
+  '@lit-labs/ssr-dom-shim@1.5.1':
+    resolution: {integrity: sha512-Aou5UdlSpr5whQe8AA/bZG0jMj96CoJIWbGfZ91qieWu5AWUMKw8VR/pAkQkJYvBNhmCcWnZlyyk5oze8JIqYA==}
 
-  '@marijn/find-cluster-break@1.0.2':
-    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+  '@lit/reactive-element@2.1.2':
+    resolution: {integrity: sha512-pbCDiVMnne1lYUIaYNN5wrwQXDtHaYtg7YEFPeW+hws6U47WeFvISGUWekPGKWOP1ygrs0ef0o1VJMk1exos5A==}
 
   '@mediapipe/tasks-vision@0.10.17':
     resolution: {integrity: sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==}
 
-  '@mermaid-js/parser@0.6.2':
-    resolution: {integrity: sha512-+PO02uGF6L6Cs0Bw8RpGhikVvMWEysfAyl27qTlroUB8jSWr1lL0Sf6zi78ZxlSnmgSY2AMMKVgghnN9jTtwkQ==}
+  '@mermaid-js/parser@1.1.0':
+    resolution: {integrity: sha512-gxK9ZX2+Fex5zu8LhRQoMeMPEHbc73UKZ0FQ54YrQtUxE1VVhMwzeNtKRPAu5aXks4FasbMe4xB4bWrmq6Jlxw==}
 
-  '@modelcontextprotocol/sdk@1.25.2':
-    resolution: {integrity: sha512-LZFeo4F9M5qOhC/Uc1aQSrBHxMrvxett+9KLHt7OhcExtoiRN9DKgbZffMP/nxjutWDQpfMDfP3nkHI4X9ijww==}
+  '@modelcontextprotocol/sdk@1.29.0':
+    resolution: {integrity: sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ==}
     engines: {node: '>=18'}
     peerDependencies:
       '@cfworker/json-schema': ^4.1.1
@@ -1736,351 +1655,234 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@neondatabase/serverless@0.10.4':
-    resolution: {integrity: sha512-2nZuh3VUO9voBauuh+IGYRhGU/MskWHt1IuZvHcJw6GLjDgtqj/KViKo7SIrLdGLdot7vFbiRRw+BgEy3wT9HA==}
-
-  '@netlify/api@14.0.6':
-    resolution: {integrity: sha512-tlG/gqA80WeAbJFYzcLdSP7v8jg1WgtJX+kQD20rMbU+Efga5XxwaiCHgjvpLvFi5hQMe1t2bG60CudxMN1T5g==}
-    engines: {node: '>=18.14.0'}
-
-  '@netlify/binary-info@1.0.0':
-    resolution: {integrity: sha512-4wMPu9iN3/HL97QblBsBay3E1etIciR84izI3U+4iALY+JHCrI+a2jO0qbAZ/nxKoegypYEaiiqWXylm+/zfrw==}
-
-  '@netlify/blobs@10.0.11':
-    resolution: {integrity: sha512-/pa7eD2gxkhJ6aUIJULrRu3tvAaimy+sA6vHUuGRMvncjOuRpeatXLHxuzdn8DyK1CZCjN3E33oXsdEpoqG7SA==}
-    engines: {node: ^14.16.0 || >=16.0.0}
+  '@napi-rs/wasm-runtime@1.1.2':
+    resolution: {integrity: sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
 
-  '@netlify/cache@3.1.1':
-    resolution: {integrity: sha512-n8DU/lH2vTIBM137bGlRmyZsWq3mGU3J8R2fnecD9CDxBx0jNsb8u0WEYC9E3tavPKyYmW1BvIGNNtWHn0R3Lg==}
-    engines: {node: '>=20.6.1'}
+  '@napi-rs/wasm-runtime@1.1.4':
+    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
 
-  '@netlify/config@23.2.0':
-    resolution: {integrity: sha512-zlI792/efPUY1XKtBML2OJBgKMyfNQIeGEYibH8SqeDxPjNuCy0qELE0U9Sc6+Ss34XryPBUPdV60tYhSoe6lw==}
-    engines: {node: '>=18.14.0'}
-    hasBin: true
+  '@observablehq/plot@0.6.17':
+    resolution: {integrity: sha512-/qaXP/7mc4MUS0s4cPPFASDRjtsWp85/TbfsciqDgU1HwYixbSbbytNuInD8AcTYC3xaxACgVX06agdfQy9W+g==}
+    engines: {node: '>=12'}
 
-  '@netlify/dev-utils@4.2.0':
-    resolution: {integrity: sha512-P/uLJ5IKB4DhUOd6Q4Mpk7N0YKrnijUhAL3C05dEftNi3U3xJB98YekYfsL3G6GkS3L35pKGMx+vKJRwUHpP1Q==}
-    engines: {node: ^18.14.0 || >=20}
+  '@octokit/endpoint@11.0.3':
+    resolution: {integrity: sha512-FWFlNxghg4HrXkD3ifYbS/IdL/mDHjh9QcsNyhQjN8dplUoZbejsdpmuqdA76nxj2xoWPs7p8uX2SNr9rYu0Ag==}
+    engines: {node: '>= 20'}
 
-  '@netlify/dev@4.5.12':
-    resolution: {integrity: sha512-Kbcu4EG1sTH9VxxaZraumu/8YJ2EkIe92+6ju+n1KYQ7P3qz2wughPr6Vtss06P9S1g70wu1mNxvvqj4IAlJlw==}
-    engines: {node: '>=20.6.1'}
+  '@octokit/graphql@9.0.3':
+    resolution: {integrity: sha512-grAEuupr/C1rALFnXTv6ZQhFuL1D8G5y8CN04RgrO4FIPMrtm+mcZzFG7dcBm+nq+1ppNixu+Jd78aeJOYxlGA==}
+    engines: {node: '>= 20'}
 
-  '@netlify/edge-bundler@14.5.6':
-    resolution: {integrity: sha512-00uOZIOFsoWKa04osBvQ763oAFZDtAGSIjlywU0TS/lZTQCVEs6k39yJz8v4UEhXvK5MCThiFv+tnlpTNJn3fQ==}
-    engines: {node: '>=18.14.0'}
+  '@octokit/openapi-types@27.0.0':
+    resolution: {integrity: sha512-whrdktVs1h6gtR+09+QsNk2+FO+49j6ga1c55YZudfEG+oKJVvJLQi3zkOm5JjiUXAagWK2tI2kTGKJ2Ys7MGA==}
 
-  '@netlify/edge-functions-bootstrap@2.16.0':
-    resolution: {integrity: sha512-v8QQihSbBHj3JxtJsHoepXALpNumD9M7egHoc8z62FYl5it34dWczkaJoFFopEyhiBVKi4K/n0ZYpdzwfujd6g==}
+  '@octokit/request-error@7.1.0':
+    resolution: {integrity: sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==}
+    engines: {node: '>= 20'}
 
-  '@netlify/edge-functions@2.18.2':
-    resolution: {integrity: sha512-DwkQIwiVO+2XU3zt5X96g3VEYI2mVtIdoFuia0TZLcWO8mzqceqNljL4xpCRREzZl9FT+HdwDF+YpYjZ+IRRTA==}
-    engines: {node: '>=18.0.0'}
+  '@octokit/request@10.0.8':
+    resolution: {integrity: sha512-SJZNwY9pur9Agf7l87ywFi14W+Hd9Jg6Ifivsd33+/bGUQIjNujdFiXII2/qSlN2ybqUHfp5xpekMEjIBTjlSw==}
+    engines: {node: '>= 20'}
 
-  '@netlify/functions@4.2.7':
-    resolution: {integrity: sha512-TN2sijuyrEejhLfataxAKSFjFi8ZC0IMqrubg3Rz3ROBBwk54vdLwxibHxnKexou75MXsrpCotsEzm/V0xZwBA==}
-    engines: {node: '>=18.0.0'}
+  '@octokit/types@16.0.0':
+    resolution: {integrity: sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==}
 
-  '@netlify/functions@5.1.0':
-    resolution: {integrity: sha512-LZtiQtf/QzPHIeNDZuIBxx04kmU7lCipWqZ26ejX7mYSB3yj2wvpZfF49kD8B8FoKTydSvgFmBpIcCO5FvpEXA==}
-    engines: {node: '>=18.0.0'}
+  '@oozcitak/dom@2.0.2':
+    resolution: {integrity: sha512-GjpKhkSYC3Mj4+lfwEyI1dqnsKTgwGy48ytZEhm4A/xnH/8z9M3ZVXKr/YGQi3uCLs1AEBS+x5T2JPiueEDW8w==}
+    engines: {node: '>=20.0'}
 
-  '@netlify/headers-parser@9.0.2':
-    resolution: {integrity: sha512-86YEGPxVemhksY1LeSr8NSOyH11RHvYHq+FuBJnTlPZoRDX+TD+0TAxF6lwzAgVTd1VPkyFEHlNgUGqw7aNzRQ==}
-    engines: {node: '>=18.14.0'}
+  '@oozcitak/infra@2.0.2':
+    resolution: {integrity: sha512-2g+E7hoE2dgCz/APPOEK5s3rMhJvNxSMBrP+U+j1OWsIbtSpWxxlUjq1lU8RIsFJNYv7NMlnVsCuHcUzJW+8vA==}
+    engines: {node: '>=20.0'}
 
-  '@netlify/headers@2.0.12':
-    resolution: {integrity: sha512-smDSAKvPEYufdMhZvNvb1/D00EL5QDleEHa7N6+CXKrG81WVzPrpWtCL67UP8qgewv0fDnLPal9XLL46Jvsa9A==}
-    engines: {node: '>=20.6.1'}
+  '@oozcitak/url@3.0.0':
+    resolution: {integrity: sha512-ZKfET8Ak1wsLAiLWNfFkZc/BraDccuTJKR6svTYc7sVjbR+Iu0vtXdiDMY4o6jaFl5TW2TlS7jbLl4VovtAJWQ==}
+    engines: {node: '>=20.0'}
 
-  '@netlify/images@1.2.8':
-    resolution: {integrity: sha512-VfjimnTRvFZ+8Ul/r4AlPMjBPK7+qZZuKli/el4MVwqt7+pXKrx3YkFPwT1XtoahqNJ8Mm2bZQzM8JB34PUxrA==}
-    engines: {node: '>=20.6.1'}
+  '@oozcitak/util@10.0.0':
+    resolution: {integrity: sha512-hAX0pT/73190NLqBPPWSdBVGtbY6VOhWYK3qqHqtXQ1gK7kS2yz4+ivsN07hpJ6I3aeMtKP6J6npsEKOAzuTLA==}
+    engines: {node: '>=20.0'}
 
-  '@netlify/neon@0.1.0':
-    resolution: {integrity: sha512-7FlZRfpR61iePnwjamH8t8WnF7ZG87a3wnMojvBjfUYlSMGeHxawoFfI7eyqGEeUV7djuiTB8QkxB+XiPw83WA==}
+  '@opentelemetry/api-logs@0.207.0':
+    resolution: {integrity: sha512-lAb0jQRVyleQQGiuuvCOTDVspc14nx6XJjP4FspJ1sNARo3Regq4ZZbrc3rN4b1TYSuUCvgH+UXUPug4SLOqEQ==}
+    engines: {node: '>=8.0.0'}
 
-  '@netlify/open-api@2.39.0':
-    resolution: {integrity: sha512-PMBktDmSRBS5act/GxHL3kvbRww5HPFZ9HIHXOrBu6vQesWYapoJaDiU/KDbqmkW1TyelGmURVcwsYr00qSAFg==}
-    engines: {node: '>=14.8.0'}
+  '@opentelemetry/api-logs@0.212.0':
+    resolution: {integrity: sha512-TEEVrLbNROUkYY51sBJGk7lO/OLjuepch8+hmpM6ffMJQ2z/KVCjdHuCFX6fJj8OkJP2zckPjrJzQtXU3IAsFg==}
+    engines: {node: '>=8.0.0'}
 
-  '@netlify/redirect-parser@15.0.3':
-    resolution: {integrity: sha512-/HB3fcRRNgf6O/pbLn4EYNDHrU2kiadMMnazg8/OjvQK2S9i4y61vQcrICvDxYKUKQdgeEaABUuaCNAJFnfD9w==}
-    engines: {node: '>=18.14.0'}
+  '@opentelemetry/api-logs@0.214.0':
+    resolution: {integrity: sha512-40lSJeqYO8Uz2Yj7u94/SJWE/wONa7rmMKjI1ZcIjgf3MHNHv1OZUCrCETGuaRF62d5pQD1wKIW+L4lmSMTzZA==}
+    engines: {node: '>=8.0.0'}
 
-  '@netlify/redirects@3.0.13':
-    resolution: {integrity: sha512-pRseix34XmP+PoUGgsHYqsyBxXvSF8plLkt+D9s/fv+MBEcLIGxZLHLNBHOmNIP+WX2SIusPOxwcL3DBVjbZkw==}
-    engines: {node: '>=20.6.1'}
+  '@opentelemetry/api@1.9.1':
+    resolution: {integrity: sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==}
+    engines: {node: '>=8.0.0'}
 
-  '@netlify/runtime-utils@2.1.0':
-    resolution: {integrity: sha512-z1h+wjB7IVYUsFZsuIYyNxiw5WWuylseY+eXaUDHBxNeLTlqziy+lz03QkR67CUR4Y790xGIhaHV00aOR2KAtw==}
-    engines: {node: ^18.14.0 || >=20}
+  '@opentelemetry/context-async-hooks@2.6.1':
+    resolution: {integrity: sha512-XHzhwRNkBpeP8Fs/qjGrAf9r9PRv67wkJQ/7ZPaBQQ68DYlTBBx5MF9LvPx7mhuXcDessKK2b+DcxqwpgkcivQ==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@netlify/runtime@4.0.16':
-    resolution: {integrity: sha512-8itGQs4yGByyFWUBxMUDJGgutAFChPlMos2oJr9DbQWsTZjbn9QnZ0rddh156upya4znqq6XnSJ7vc5Y7xqzEg==}
-    engines: {node: '>=20.6.1'}
+  '@opentelemetry/core@2.6.1':
+    resolution: {integrity: sha512-8xHSGWpJP9wBxgBpnqGL0R3PbdWQndL1Qp50qrg71+B28zK5OQmUgcDKLJgzyAAV38t4tOyLMGDD60LneR5W8g==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@netlify/serverless-functions-api@2.6.0':
-    resolution: {integrity: sha512-/m4HO0MNb7nBsHWKQ7JTeTZ3jDZpfQxs0LOn9h/+aPzGcdYW7DwKNudGq8NXYY5NPtRE3C+8qtr3xLfN9VOU6g==}
-    engines: {node: '>=18.0.0'}
+  '@opentelemetry/instrumentation-amqplib@0.61.0':
+    resolution: {integrity: sha512-mCKoyTGfRNisge4br0NpOFSy2Z1NnEW8hbCJdUDdJFHrPqVzc4IIBPA/vX0U+LUcQqrQvJX+HMIU0dbDRe0i0Q==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
 
-  '@netlify/static@3.0.11':
-    resolution: {integrity: sha512-+fAIBbZLQB6dwyX8JTUc7xvwO/+goaUmEIcHYpycwJwrphL2ZpcNAOVFq00alwpw0Szrf2LCE5bnom6/EOgbBQ==}
-    engines: {node: '>=20.6.1'}
+  '@opentelemetry/instrumentation-connect@0.57.0':
+    resolution: {integrity: sha512-FMEBChnI4FLN5TE9DHwfH7QpNir1JzXno1uz/TAucVdLCyrG0jTrKIcNHt/i30A0M2AunNBCkcd8Ei26dIPKdg==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
 
-  '@netlify/types@2.0.3':
-    resolution: {integrity: sha512-OcV8ivKTdsyANqVSQzbusOA7FVtE9s6zwxNCGR/aNnQaVxMUgm93UzKgfR7cZ1nnQNZHAbjd0dKJKaAUqrzbMw==}
-    engines: {node: ^18.14.0 || >=20}
+  '@opentelemetry/instrumentation-dataloader@0.31.0':
+    resolution: {integrity: sha512-f654tZFQXS5YeLDNb9KySrwtg7SnqZN119FauD7acBoTzuLduaiGTNz88ixcVSOOMGZ+EjJu/RFtx5klObC95g==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
 
-  '@netlify/types@2.2.0':
-    resolution: {integrity: sha512-XOWlZ2wPpdRKkAOcQbjIf/Qz7L4RjcSVINVNQ9p3F6U8V6KSEOsB3fPrc6Ly8EOeJioHUepRPuzHzJE/7V5EsA==}
-    engines: {node: ^18.14.0 || >=20}
+  '@opentelemetry/instrumentation-express@0.62.0':
+    resolution: {integrity: sha512-Tvx+vgAZKEQxU3Rx+xWLiR0mLxHwmk69/8ya04+VsV9WYh8w6Lhx5hm5yAMvo1wy0KqWgFKBLwSeo3sHCwdOww==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
 
-  '@netlify/vite-plugin-tanstack-start@1.0.2':
-    resolution: {integrity: sha512-2v21F6K28Wc7HGrGfASzs04o8xrDprHWt323+J7b1ToH7r0eC5IGkM1l3rPQlcom+TVkNvOejVlyEuqfJsr05g==}
-    engines: {node: ^22.12.0}
-    peerDependencies:
-      '@tanstack/react-start': '>=1.132.0'
-      '@tanstack/solid-start': '>=1.132.0'
-      vite: '>=7.0.0'
-    peerDependenciesMeta:
-      '@tanstack/react-start':
-        optional: true
-      '@tanstack/solid-start':
-        optional: true
-
-  '@netlify/vite-plugin@2.6.1':
-    resolution: {integrity: sha512-KhXWcwTzEDX+7lWyEs0TRwr4nIjlMs1/82l05czH9xG2K4iHSjE6R5qHFEdWvIh6W1He3t05h30UMf2QuHCqVw==}
-    engines: {node: ^20.6.1 || >=22}
-    peerDependencies:
-      vite: ^5 || ^6 || ^7
-
-  '@netlify/zip-it-and-ship-it@14.1.8':
-    resolution: {integrity: sha512-APPNgGUAb1kSe4e9KxhRAeQIPGx8EAfwZ3S61eGyZXXGXgjnKmC2Ho7jsFnLsElbt8Ailyzmi/wAjh0NHZjGjA==}
-    engines: {node: '>=18.14.0'}
-    hasBin: true
-
-  '@nodelib/fs.scandir@2.1.5':
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.stat@2.0.5':
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.walk@1.2.8':
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
-
-  '@number-flow/react@0.4.1':
-    resolution: {integrity: sha512-Vevf2iFJ+Tiqm2Sy2kKmdq0B3iZ+JrVleXmZgxqmbG6JSEU7EIK/yWR2XpPOkbJ8LvDQSUr8Zxpoq2gv7CdsGQ==}
-    peerDependencies:
-      react: ^18 || ^19.0.0-rc-915b914b3a-20240515
-      react-dom: ^18
-
-  '@observablehq/plot@0.6.17':
-    resolution: {integrity: sha512-/qaXP/7mc4MUS0s4cPPFASDRjtsWp85/TbfsciqDgU1HwYixbSbbytNuInD8AcTYC3xaxACgVX06agdfQy9W+g==}
-    engines: {node: '>=12'}
-
-  '@octokit/endpoint@9.0.2':
-    resolution: {integrity: sha512-qhKW8YLIi+Kmc92FQUFGr++DYtkx/1fBv+Thua6baqnjnOsgBYJDCvWZR1YcINuHGOEQt416WOfE+A/oG60NBQ==}
-    engines: {node: '>= 18'}
-
-  '@octokit/graphql@7.0.2':
-    resolution: {integrity: sha512-OJ2iGMtj5Tg3s6RaXH22cJcxXRi7Y3EBqbHTBRq+PQAqfaS8f/236fUrWhfSn8P4jovyzqucxme7/vWSSZBX2Q==}
-    engines: {node: '>= 18'}
-
-  '@octokit/openapi-types@19.0.2':
-    resolution: {integrity: sha512-8li32fUDUeml/ACRp/njCWTsk5t17cfTM1jp9n08pBrqs5cDFJubtjsSnuz56r5Tad6jdEPJld7LxNp9dNcyjQ==}
-
-  '@octokit/request-error@5.0.1':
-    resolution: {integrity: sha512-X7pnyTMV7MgtGmiXBwmO6M5kIPrntOXdyKZLigNfQWSEQzVxR4a4vo49vJjTWX70mPndj8KhfT4Dx+2Ng3vnBQ==}
-    engines: {node: '>= 18'}
-
-  '@octokit/request@8.1.4':
-    resolution: {integrity: sha512-M0aaFfpGPEKrg7XoA/gwgRvc9MSXHRO2Ioki1qrPDbl1e9YhjIwVoHE7HIKmv/m3idzldj//xBujcFNqGX6ENA==}
-    engines: {node: '>= 18'}
-
-  '@octokit/types@12.1.1':
-    resolution: {integrity: sha512-qnJTldJ1NyGT5MTsCg/Zi+y2IFHZ1Jo5+njNCjJ9FcainV7LjuHgmB697kA0g4MjZeDAJsM3B45iqCVsCLVFZg==}
-
-  '@oozcitak/dom@2.0.2':
-    resolution: {integrity: sha512-GjpKhkSYC3Mj4+lfwEyI1dqnsKTgwGy48ytZEhm4A/xnH/8z9M3ZVXKr/YGQi3uCLs1AEBS+x5T2JPiueEDW8w==}
-    engines: {node: '>=20.0'}
-
-  '@oozcitak/infra@2.0.2':
-    resolution: {integrity: sha512-2g+E7hoE2dgCz/APPOEK5s3rMhJvNxSMBrP+U+j1OWsIbtSpWxxlUjq1lU8RIsFJNYv7NMlnVsCuHcUzJW+8vA==}
-    engines: {node: '>=20.0'}
-
-  '@oozcitak/url@3.0.0':
-    resolution: {integrity: sha512-ZKfET8Ak1wsLAiLWNfFkZc/BraDccuTJKR6svTYc7sVjbR+Iu0vtXdiDMY4o6jaFl5TW2TlS7jbLl4VovtAJWQ==}
-    engines: {node: '>=20.0'}
-
-  '@oozcitak/util@10.0.0':
-    resolution: {integrity: sha512-hAX0pT/73190NLqBPPWSdBVGtbY6VOhWYK3qqHqtXQ1gK7kS2yz4+ivsN07hpJ6I3aeMtKP6J6npsEKOAzuTLA==}
-    engines: {node: '>=20.0'}
-
-  '@opentelemetry/api-logs@0.208.0':
-    resolution: {integrity: sha512-CjruKY9V6NMssL/T1kAFgzosF1v9o6oeN+aX5JB/C/xPNtmgIJqcXHG7fA82Ou1zCpWGl4lROQUKwUNE1pMCyg==}
-    engines: {node: '>=8.0.0'}
-
-  '@opentelemetry/api@1.9.0':
-    resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
-    engines: {node: '>=8.0.0'}
-
-  '@opentelemetry/context-async-hooks@2.3.0':
-    resolution: {integrity: sha512-hGcsT0qDP7Il1L+qT3JFpiGl1dCjF794Bb4yCRCYdr7XC0NwHtOF3ngF86Gk6TUnsakbyQsDQ0E/S4CU0F4d4g==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.10.0'
-
-  '@opentelemetry/core@2.2.0':
-    resolution: {integrity: sha512-FuabnnUm8LflnieVxs6eP7Z383hgQU4W1e3KJS6aOG3RxWxcHyBxH8fDMHNgu/gFx/M2jvTOW/4/PHhLz6bjWw==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.10.0'
-
-  '@opentelemetry/core@2.3.0':
-    resolution: {integrity: sha512-PcmxJQzs31cfD0R2dE91YGFcLxOSN4Bxz7gez5UwSUjCai8BwH/GI5HchfVshHkWdTkUs0qcaPJgVHKXUp7I3A==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.10.0'
-
-  '@opentelemetry/instrumentation-amqplib@0.55.0':
-    resolution: {integrity: sha512-5ULoU8p+tWcQw5PDYZn8rySptGSLZHNX/7srqo2TioPnAAcvTy6sQFQXsNPrAnyRRtYGMetXVyZUy5OaX1+IfA==}
-    engines: {node: ^18.19.0 || >=20.6.0}
+  '@opentelemetry/instrumentation-fs@0.33.0':
+    resolution: {integrity: sha512-sCZWXGalQ01wr3tAhSR9ucqFJ0phidpAle6/17HVjD6gN8FLmZMK/8sKxdXYHy3PbnlV1P4zeiSVFNKpbFMNLA==}
+    engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-connect@0.52.0':
-    resolution: {integrity: sha512-GXPxfNB5szMbV3I9b7kNWSmQBoBzw7MT0ui6iU/p+NIzVx3a06Ri2cdQO7tG9EKb4aKSLmfX9Cw5cKxXqX6Ohg==}
+  '@opentelemetry/instrumentation-generic-pool@0.57.0':
+    resolution: {integrity: sha512-orhmlaK+ZIW9hKU+nHTbXrCSXZcH83AescTqmpamHRobRmYSQwRbD0a1odc0yAzuzOtxYiHiXAnpnIpaSSY7Ow==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-dataloader@0.26.0':
-    resolution: {integrity: sha512-P2BgnFfTOarZ5OKPmYfbXfDFjQ4P9WkQ1Jji7yH5/WwB6Wm/knynAoA1rxbjWcDlYupFkyT0M1j6XLzDzy0aCA==}
+  '@opentelemetry/instrumentation-graphql@0.62.0':
+    resolution: {integrity: sha512-3YNuLVPUxafXkH1jBAbGsKNsP3XVzcFDhCDCE3OqBwCwShlqQbLMRMFh1T/d5jaVZiGVmSsfof+ICKD2iOV8xg==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-express@0.57.0':
-    resolution: {integrity: sha512-HAdx/o58+8tSR5iW+ru4PHnEejyKrAy9fYFhlEI81o10nYxrGahnMAHWiSjhDC7UQSY3I4gjcPgSKQz4rm/asg==}
+  '@opentelemetry/instrumentation-hapi@0.60.0':
+    resolution: {integrity: sha512-aNljZKYrEa7obLAxd1bCEDxF7kzCLGXTuTJZ8lMR9rIVEjmuKBXN1gfqpm/OB//Zc2zP4iIve1jBp7sr3mQV6w==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-fs@0.28.0':
-    resolution: {integrity: sha512-FFvg8fq53RRXVBRHZViP+EMxMR03tqzEGpuq55lHNbVPyFklSVfQBN50syPhK5UYYwaStx0eyCtHtbRreusc5g==}
+  '@opentelemetry/instrumentation-http@0.214.0':
+    resolution: {integrity: sha512-FlkDhZDRjDJDcO2LcSCtjRpkal1NJ8y0fBqBhTvfAR3JSYY2jAIj1kSS5IjmEBt4c3aWv+u/lqLuoCDrrKCSKg==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-generic-pool@0.52.0':
-    resolution: {integrity: sha512-ISkNcv5CM2IwvsMVL31Tl61/p2Zm2I2NAsYq5SSBgOsOndT0TjnptjufYVScCnD5ZLD1tpl4T3GEYULLYOdIdQ==}
+  '@opentelemetry/instrumentation-ioredis@0.62.0':
+    resolution: {integrity: sha512-ZYt//zcPve8qklaZX+5Z4MkU7UpEkFRrxsf2cnaKYBitqDnsCN69CPAuuMOX6NYdW2rG9sFy7V/QWtBlP5XiNQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-graphql@0.56.0':
-    resolution: {integrity: sha512-IPvNk8AFoVzTAM0Z399t34VDmGDgwT6rIqCUug8P9oAGerl2/PEIYMPOl/rerPGu+q8gSWdmbFSjgg7PDVRd3Q==}
+  '@opentelemetry/instrumentation-kafkajs@0.23.0':
+    resolution: {integrity: sha512-4K+nVo+zI+aDz0Z85SObwbdixIbzS9moIuKJaYsdlzcHYnKOPtB7ya8r8Ezivy/GVIBHiKJVq4tv+BEkgOMLaQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-hapi@0.55.0':
-    resolution: {integrity: sha512-prqAkRf9e4eEpy4G3UcR32prKE8NLNlA90TdEU1UsghOTg0jUvs40Jz8LQWFEs5NbLbXHYGzB4CYVkCI8eWEVQ==}
+  '@opentelemetry/instrumentation-knex@0.58.0':
+    resolution: {integrity: sha512-Hc/o8fSsaWxZ8r1Yw4rNDLwTpUopTf4X32y4W6UhlHmW8Wizz8wfhgOKIelSeqFVTKBBPIDUOsQWuIMxBmu8Bw==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-http@0.208.0':
-    resolution: {integrity: sha512-rhmK46DRWEbQQB77RxmVXGyjs6783crXCnFjYQj+4tDH/Kpv9Rbg3h2kaNyp5Vz2emF1f9HOQQvZoHzwMWOFZQ==}
+  '@opentelemetry/instrumentation-koa@0.62.0':
+    resolution: {integrity: sha512-uVip0VuGUQXZ+vFxkKxAUNq8qNl+VFlyHDh/U6IQ8COOEDfbEchdaHnpFrMYF3psZRUuoSIgb7xOeXj00RdwDA==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
-      '@opentelemetry/api': ^1.3.0
+      '@opentelemetry/api': ^1.9.0
 
-  '@opentelemetry/instrumentation-ioredis@0.56.0':
-    resolution: {integrity: sha512-XSWeqsd3rKSsT3WBz/JKJDcZD4QYElZEa0xVdX8f9dh4h4QgXhKRLorVsVkK3uXFbC2sZKAS2Ds+YolGwD83Dg==}
+  '@opentelemetry/instrumentation-lru-memoizer@0.58.0':
+    resolution: {integrity: sha512-6grM3TdMyHzlGY1cUA+mwoPueB1F3dYKgKtZIH6jOFXqfHAByyLTc+6PFjGM9tKh52CFBJaDwodNlL/Td39z7Q==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-kafkajs@0.18.0':
-    resolution: {integrity: sha512-KCL/1HnZN5zkUMgPyOxfGjLjbXjpd4odDToy+7c+UsthIzVLFf99LnfIBE8YSSrYE4+uS7OwJMhvhg3tWjqMBg==}
+  '@opentelemetry/instrumentation-mongodb@0.67.0':
+    resolution: {integrity: sha512-1WJp5N1lYfHq2IhECOTewFs5Tf2NfUOwQRqs/rZdXKTezArMlucxgzAaqcgp3A3YREXopXTpXHsxZTGHjNhMdQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-knex@0.53.0':
-    resolution: {integrity: sha512-xngn5cH2mVXFmiT1XfQ1aHqq1m4xb5wvU6j9lSgLlihJ1bXzsO543cpDwjrZm2nMrlpddBf55w8+bfS4qDh60g==}
+  '@opentelemetry/instrumentation-mongoose@0.60.0':
+    resolution: {integrity: sha512-8BahAZpKsOoc+lrZGb7Ofn4g3z8qtp5IxDfvAVpKXsEheQN7ONMH5djT5ihy6yf8yyeQJGS0gXFfpEAEeEHqQg==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-koa@0.57.0':
-    resolution: {integrity: sha512-3JS8PU/D5E3q295mwloU2v7c7/m+DyCqdu62BIzWt+3u9utjxC9QS7v6WmUNuoDN3RM+Q+D1Gpj13ERo+m7CGg==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.9.0
-
-  '@opentelemetry/instrumentation-lru-memoizer@0.53.0':
-    resolution: {integrity: sha512-LDwWz5cPkWWr0HBIuZUjslyvijljTwmwiItpMTHujaULZCxcYE9eU44Qf/pbVC8TulT0IhZi+RoGvHKXvNhysw==}
+  '@opentelemetry/instrumentation-mysql2@0.60.0':
+    resolution: {integrity: sha512-m/5d3bxQALllCzezYDk/6vajh0tj5OijMMvOZGr+qN1NMXm1dzMNwyJ0gNZW7Fo3YFRyj/jJMxIw+W7d525dlw==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-mongodb@0.61.0':
-    resolution: {integrity: sha512-OV3i2DSoY5M/pmLk+68xr5RvkHU8DRB3DKMzYJdwDdcxeLs62tLbkmRyqJZsYf3Ht7j11rq35pHOWLuLzXL7pQ==}
+  '@opentelemetry/instrumentation-mysql@0.60.0':
+    resolution: {integrity: sha512-08pO8GFPEIz2zquKDGteBZDNmwketdgH8hTe9rVYgW9kCJXq1Psj3wPQGx+VaX4ZJKCfPeoLMYup9+cxHvZyVQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-mongoose@0.55.0':
-    resolution: {integrity: sha512-5afj0HfF6aM6Nlqgu6/PPHFk8QBfIe3+zF9FGpX76jWPS0/dujoEYn82/XcLSaW5LPUDW8sni+YeK0vTBNri+w==}
+  '@opentelemetry/instrumentation-pg@0.66.0':
+    resolution: {integrity: sha512-KxfLGXBb7k2ueaPJfq2GXBDXBly8P+SpR/4Mj410hhNgmQF3sCqwXvUBQxZQkDAmsdBAoenM+yV1LhtsMRamcA==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-mysql2@0.55.0':
-    resolution: {integrity: sha512-0cs8whQG55aIi20gnK8B7cco6OK6N+enNhW0p5284MvqJ5EPi+I1YlWsWXgzv/V2HFirEejkvKiI4Iw21OqDWg==}
+  '@opentelemetry/instrumentation-redis@0.62.0':
+    resolution: {integrity: sha512-y3pPpot7WzR/8JtHcYlTYsyY8g+pbFhAqbwAuG5bLPnR6v6pt1rQc0DpH0OlGP/9CZbWBP+Zhwp9yFoygf/ZXQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-mysql@0.54.0':
-    resolution: {integrity: sha512-bqC1YhnwAeWmRzy1/Xf9cDqxNG2d/JDkaxnqF5N6iJKN1eVWI+vg7NfDkf52/Nggp3tl1jcC++ptC61BD6738A==}
+  '@opentelemetry/instrumentation-tedious@0.33.0':
+    resolution: {integrity: sha512-Q6WQwAD01MMTub31GlejoiFACYNw26J426wyjvU7by7fDIr2nZXNW4vhTGs7i7F0TnXBO3xN688g1tdUgYwJ5w==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-pg@0.61.0':
-    resolution: {integrity: sha512-UeV7KeTnRSM7ECHa3YscoklhUtTQPs6V6qYpG283AB7xpnPGCUCUfECFT9jFg6/iZOQTt3FHkB1wGTJCNZEvPw==}
+  '@opentelemetry/instrumentation-undici@0.24.0':
+    resolution: {integrity: sha512-oKzZ3uvqP17sV0EsoQcJgjEfIp0kiZRbYu/eD8p13Cbahumf8lb/xpYeNr/hfAJ4owzEtIDcGIjprfLcYbIKBQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
-      '@opentelemetry/api': ^1.3.0
+      '@opentelemetry/api': ^1.7.0
 
-  '@opentelemetry/instrumentation-redis@0.57.0':
-    resolution: {integrity: sha512-bCxTHQFXzrU3eU1LZnOZQ3s5LURxQPDlU3/upBzlWY77qOI1GZuGofazj3jtzjctMJeBEJhNwIFEgRPBX1kp/Q==}
+  '@opentelemetry/instrumentation@0.207.0':
+    resolution: {integrity: sha512-y6eeli9+TLKnznrR8AZlQMSJT7wILpXH+6EYq5Vf/4Ao+huI7EedxQHwRgVUOMLFbe7VFDvHJrX9/f4lcwnJsA==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-tedious@0.27.0':
-    resolution: {integrity: sha512-jRtyUJNZppPBjPae4ZjIQ2eqJbcRaRfJkr0lQLHFmOU/no5A6e9s1OHLd5XZyZoBJ/ymngZitanyRRA5cniseA==}
+  '@opentelemetry/instrumentation@0.212.0':
+    resolution: {integrity: sha512-IyXmpNnifNouMOe0I/gX7ENfv2ZCNdYTF0FpCsoBcpbIHzk81Ww9rQTYTnvghszCg7qGrIhNvWC8dhEifgX9Jg==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-undici@0.19.0':
-    resolution: {integrity: sha512-Pst/RhR61A2OoZQZkn6OLpdVpXp6qn3Y92wXa6umfJe9rV640r4bc6SWvw4pPN6DiQqPu2c8gnSSZPDtC6JlpQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.7.0
-
-  '@opentelemetry/instrumentation@0.208.0':
-    resolution: {integrity: sha512-Eju0L4qWcQS+oXxi6pgh7zvE2byogAkcsVv0OjHF/97iOz1N/aKE6etSGowYkie+YA1uo6DNwdSxaaNnLvcRlA==}
+  '@opentelemetry/instrumentation@0.214.0':
+    resolution: {integrity: sha512-MHqEX5Dk59cqVah5LiARMACku7jXSVk9iVDWOea4x3cr7VfdByeDCURK6o1lntT1JS/Tsovw01UJrBhN3/uC5w==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
@@ -2089,20 +1891,20 @@ packages:
     resolution: {integrity: sha512-1BCcU93iwSRZvDAgwUxC/DV4T/406SkMfxGqu5ojc3AvNI+I9GhV7v0J1HljsczuuhcnFLYqD5VmwVXfCGHzxA==}
     engines: {node: ^18.19.0 || >=20.6.0}
 
-  '@opentelemetry/resources@2.3.0':
-    resolution: {integrity: sha512-shlr2l5g+87J8wqYlsLyaUsgKVRO7RtX70Ckd5CtDOWtImZgaUDmf4Z2ozuSKQLM2wPDR0TE/3bPVBNJtRm/cQ==}
+  '@opentelemetry/resources@2.6.1':
+    resolution: {integrity: sha512-lID/vxSuKWXM55XhAKNoYXu9Cutoq5hFdkbTdI/zDKQktXzcWBVhNsOkiZFTMU9UtEWuGRNe0HUgmsFldIdxVA==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.3.0 <1.10.0'
 
-  '@opentelemetry/sdk-trace-base@2.3.0':
-    resolution: {integrity: sha512-B0TQ2e9h0ETjpI+eGmCz8Ojb+lnYms0SE3jFwEKrN/PK4aSVHU28AAmnOoBmfub+I3jfgPwvDJgomBA5a7QehQ==}
+  '@opentelemetry/sdk-trace-base@2.6.1':
+    resolution: {integrity: sha512-r86ut4T1e8vNwB35CqCcKd45yzqH6/6Wzvpk2/cZB8PsPLlZFTvrh8yfOS3CYZYcUmAx4hHTZJ8AO8Dj8nrdhw==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.3.0 <1.10.0'
 
-  '@opentelemetry/semantic-conventions@1.38.0':
-    resolution: {integrity: sha512-kocjix+/sSggfJhwXqClZ3i9Y/MI0fp7b+g7kCRm6psy2dsf8uApTRclwG18h8Avm7C9+fnt+O36PspJ/OzoWg==}
+  '@opentelemetry/semantic-conventions@1.40.0':
+    resolution: {integrity: sha512-cifvXDhcqMwwTlTK04GBNeIe7yyo28Mfby85QXFe1Yk8nmi36Ab/5UQwptOx84SsoGNRg+EVSjwzfSZMy6pmlw==}
     engines: {node: '>=14'}
 
   '@opentelemetry/sql-common@0.41.2':
@@ -2111,393 +1913,432 @@ packages:
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
 
-  '@panva/hkdf@1.2.1':
-    resolution: {integrity: sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==}
+  '@oxc-parser/binding-android-arm-eabi@0.120.0':
+    resolution: {integrity: sha512-WU3qtINx802wOl8RxAF1v0VvmC2O4D9M8Sv486nLeQ7iPHVmncYZrtBhB4SYyX+XZxj2PNnCcN+PW21jHgiOxg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
 
-  '@parcel/watcher-android-arm64@2.5.1':
-    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-parser/binding-android-arm64@0.120.0':
+    resolution: {integrity: sha512-SEf80EHdhlbjZEgzeWm0ZA/br4GKMenDW3QB/gtyeTV1gStvvZeFi40ioHDZvds2m4Z9J1bUAUL8yn1/+A6iGg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@parcel/watcher-darwin-arm64@2.5.1':
-    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-parser/binding-darwin-arm64@0.120.0':
+    resolution: {integrity: sha512-xVrrbCai8R8CUIBu3CjryutQnEYhZqs1maIqDvtUCFZb8vY33H7uh9mHpL3a0JBIKoBUKjPH8+rzyAeXnS2d6A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@parcel/watcher-darwin-x64@2.5.1':
-    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-parser/binding-darwin-x64@0.120.0':
+    resolution: {integrity: sha512-xyHBbnJ6mydnQUH7MAcafOkkrNzQC6T+LXgDH/3InEq2BWl/g424IMRiJVSpVqGjB+p2bd0h0WRR8iIwzjU7rw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@parcel/watcher-freebsd-x64@2.5.1':
-    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-parser/binding-freebsd-x64@0.120.0':
+    resolution: {integrity: sha512-UMnVRllquXUYTeNfFKmxTTEdZ/ix1nLl0ducDzMSREoWYGVIHnOOxoKMWlCOvRr9Wk/HZqo2rh1jeumbPGPV9A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@parcel/watcher-linux-arm-glibc@2.5.1':
-    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.120.0':
+    resolution: {integrity: sha512-tkvn2CQ7QdcsMnpfiX3fd3wA3EFsWKYlcQzq9cFw/xc89Al7W6Y4O0FgLVkVQpo0Tnq/qtE1XfkJOnRRA9S/NA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@parcel/watcher-linux-arm-musl@2.5.1':
-    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-parser/binding-linux-arm-musleabihf@0.120.0':
+    resolution: {integrity: sha512-WN5y135Ic42gQDk9grbwY9++fDhqf8knN6fnP+0WALlAUh4odY/BDK1nfTJRSfpJD9P3r1BwU0m3pW2DU89whQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@parcel/watcher-linux-arm64-glibc@2.5.1':
-    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-parser/binding-linux-arm64-gnu@0.120.0':
+    resolution: {integrity: sha512-1GgQBCcXvFMw99EPdMy+4NZ3aYyXsxjf9kbUUg8HuAy3ZBXzOry5KfFEzT9nqmgZI1cuetvApkiJBZLAPo8uaw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
-  '@parcel/watcher-linux-arm64-musl@2.5.1':
-    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-parser/binding-linux-arm64-musl@0.120.0':
+    resolution: {integrity: sha512-gmMQ70gsPdDBgpcErvJEoWNBr7bJooSLlvOBVBSGfOzlP5NvJ3bFvnUeZZ9d+dPrqSngtonf7nyzWUTUj/U+lw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.120.0':
+    resolution: {integrity: sha512-T/kZuU0ajop0xhzVMwH5r3srC9Nqup5HaIo+3uFjIN5uPxa0LvSxC1ZqP4aQGJVW5G0z8/nCkjIfSMS91P/wzw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
 
-  '@parcel/watcher-linux-x64-glibc@2.5.1':
-    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-parser/binding-linux-riscv64-gnu@0.120.0':
+    resolution: {integrity: sha512-vn21KXLAXzaI3N5CZWlBr1iWeXLl9QFIMor7S1hUjUGTeUuWCoE6JZB040/ZNDwf+JXPX8Ao9KbmJq9FMC2iGw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.120.0':
+    resolution: {integrity: sha512-SUbUxlar007LTGmSLGIC5x/WJvwhdX+PwNzFJ9f/nOzZOrCFbOT4ikt7pJIRg1tXVsEfzk5mWpGO1NFiSs4PIw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.120.0':
+    resolution: {integrity: sha512-hYiPJTxyfJY2+lMBFk3p2bo0R9GN+TtpPFlRqVchL1qvLG+pznstramHNvJlw9AjaoRUHwp9IKR7UZQnRPGjgQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.120.0':
+    resolution: {integrity: sha512-q+5jSVZkprJCIy3dzJpApat0InJaoxQLsJuD6DkX8hrUS61z2lHQ1Fe9L2+TYbKHXCLWbL0zXe7ovkIdopBGMQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
-  '@parcel/watcher-linux-x64-musl@2.5.1':
-    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-parser/binding-linux-x64-musl@0.120.0':
+    resolution: {integrity: sha512-D9QDDZNnH24e7X4ftSa6ar/2hCavETfW3uk0zgcMIrZNy459O5deTbWrjGzZiVrSWigGtlQwzs2McBP0QsfV1w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
-  '@parcel/watcher-wasm@2.5.1':
-    resolution: {integrity: sha512-RJxlQQLkaMMIuWRozy+z2vEqbaQlCuaCgVZIUCzQLYggY22LZbP5Y1+ia+FD724Ids9e+XIyOLXLrLgQSHIthw==}
-    engines: {node: '>= 10.0.0'}
-    bundledDependencies:
-      - napi-wasm
+  '@oxc-parser/binding-openharmony-arm64@0.120.0':
+    resolution: {integrity: sha512-TBU8ZwOUWAOUWVfmI16CYWbvh4uQb9zHnGBHsw5Cp2JUVG044OIY1CSHODLifqzQIMTXvDvLzcL89GGdUIqNrA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-parser/binding-wasm32-wasi@0.120.0':
+    resolution: {integrity: sha512-WG/FOZgDJCpJnuF3ToG/K28rcOmSY7FmFmfBKYb2fmLyhDzPpUldFGV7/Fz4ru0Iz/v4KPmf8xVgO8N3lO4KHA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
 
-  '@parcel/watcher-win32-arm64@2.5.1':
-    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-parser/binding-win32-arm64-msvc@0.120.0':
+    resolution: {integrity: sha512-1T0HKGcsz/BKo77t7+89L8Qvu4f9DoleKWHp3C5sJEcbCjDOLx3m9m722bWZTY+hANlUEs+yjlK+lBFsA+vrVQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@parcel/watcher-win32-ia32@2.5.1':
-    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-parser/binding-win32-ia32-msvc@0.120.0':
+    resolution: {integrity: sha512-L7vfLzbOXsjBXV0rv/6Y3Jd9BRjPeCivINZAqrSyAOZN3moCopDN+Psq9ZrGNZtJzP8946MtlRFZ0Als0wBCOw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@parcel/watcher-win32-x64@2.5.1':
-    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-parser/binding-win32-x64-msvc@0.120.0':
+    resolution: {integrity: sha512-ys+upfqNtSu58huAhJMBKl3XCkGzyVFBlMlGPzHeFKgpFF/OdgNs1MMf8oaJIbgMH8ZxgGF7qfue39eJohmKIg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@parcel/watcher@2.5.1':
-    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
-    engines: {node: '>= 10.0.0'}
+  '@oxc-project/types@0.120.0':
+    resolution: {integrity: sha512-k1YNu55DuvAip/MGE1FTsIuU3FUCn6v/ujG9V7Nq5Df/kX2CWb13hhwD0lmJGMGqE+bE1MXvv9SZVnMzEXlWcg==}
 
-  '@playwright/test@1.57.0':
-    resolution: {integrity: sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==}
-    engines: {node: '>=18'}
-    hasBin: true
+  '@oxc-project/types@0.130.0':
+    resolution: {integrity: sha512-ibD2usx9JRu7f5pu2tMKMI4cpA4NgXJQoYRP4pQ7Pxmn1l6k/53qWtQWZayhYy3X4QZkt90Ot+mJEaeXouio6Q==}
 
-  '@posthog/core@1.9.1':
-    resolution: {integrity: sha512-kRb1ch2dhQjsAapZmu6V66551IF2LnCbc1rnrQqnR7ArooVyJN9KOPXre16AJ3ObJz2eTfuP7x25BMyS2Y5Exw==}
+  '@oxfmt/binding-android-arm-eabi@0.43.0':
+    resolution: {integrity: sha512-CgU2s+/9hHZgo0IxVxrbMPrMj+tJ6VM3mD7Mr/4oiz4FNTISLoCvRmB5nk4wAAle045RtRjd86m673jwPyb1OQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
 
-  '@prisma/instrumentation@6.19.0':
-    resolution: {integrity: sha512-QcuYy25pkXM8BJ37wVFBO7Zh34nyRV1GOb2n3lPkkbRYfl4hWl3PTcImP41P0KrzVXfa/45p6eVCos27x3exIg==}
-    peerDependencies:
-      '@opentelemetry/api': ^1.8
+  '@oxfmt/binding-android-arm64@0.43.0':
+    resolution: {integrity: sha512-T9OfRwjA/EdYxAqbvR7TtqLv5nIrwPXuCtTwOHtS7aR9uXyn74ZYgzgTo6/ZwvTq9DY4W+DsV09hB2EXgn9EbA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
 
-  '@radix-ui/primitive@1.1.2':
-    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
+  '@oxfmt/binding-darwin-arm64@0.43.0':
+    resolution: {integrity: sha512-o3i49ZUSJWANzXMAAVY1wnqb65hn4JVzwlRQ5qfcwhRzIA8lGVaud31Q3by5ALHPrksp5QEaKCQF9aAS3TXpZA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@radix-ui/primitive@1.1.3':
-    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+  '@oxfmt/binding-darwin-x64@0.43.0':
+    resolution: {integrity: sha512-vWECzzCFkb0kK6jaHjbtC5sC3adiNWtqawFCxhpvsWlzVeKmv5bNvkB4nux+o4JKWTpHCM57NDK/MeXt44txmA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
 
-  '@radix-ui/react-accordion@1.2.12':
-    resolution: {integrity: sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxfmt/binding-freebsd-x64@0.43.0':
+    resolution: {integrity: sha512-rgz8JpkKiI/umOf7fl9gwKyQasC8bs5SYHy6g7e4SunfLBY3+8ATcD5caIg8KLGEtKFm5ujKaH8EfjcmnhzTLg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
 
-  '@radix-ui/react-arrow@1.1.4':
-    resolution: {integrity: sha512-qz+fxrqgNxG0dYew5l7qR3c7wdgRu1XVUHGnGYX7rg5HM4p9SWaRmJwfgR3J0SgyUKayLmzQIun+N6rWRgiRKw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxfmt/binding-linux-arm-gnueabihf@0.43.0':
+    resolution: {integrity: sha512-nWYnF3vIFzT4OM1qL/HSf1Yuj96aBuKWSaObXHSWliwAk2rcj7AWd6Lf7jowEBQMo4wCZVnueIGw/7C4u0KTBQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
 
-  '@radix-ui/react-arrow@1.1.7':
-    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxfmt/binding-linux-arm-musleabihf@0.43.0':
+    resolution: {integrity: sha512-sFg+NWJbLfupYTF4WELHAPSnLPOn1jiDZ33Z1jfDnTaA+cC3iB35x0FMMZTFdFOz3icRIArncwCcemJFGXu6TQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
 
-  '@radix-ui/react-checkbox@1.3.3':
-    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxfmt/binding-linux-arm64-gnu@0.43.0':
+    resolution: {integrity: sha512-MelWqv68tX6wZEILDrTc9yewiGXe7im62+5x0bNXlCYFOZdA+VnYiJfAihbROsZ5fm90p9C3haFrqjj43XnlAA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
-  '@radix-ui/react-collapsible@1.1.12':
-    resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxfmt/binding-linux-arm64-musl@0.43.0':
+    resolution: {integrity: sha512-ROaWfYh+6BSJ1Arwy5ujijTlwnZetxDxzBpDc1oBR4d7rfrPBqzeyjd5WOudowzQUgyavl2wEpzn1hw3jWcqLA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
 
-  '@radix-ui/react-collection@1.1.4':
-    resolution: {integrity: sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxfmt/binding-linux-ppc64-gnu@0.43.0':
+    resolution: {integrity: sha512-PJRs/uNxmFipJJ8+SyKHh7Y7VZIKQicqrrBzvfyM5CtKi8D7yZKTwUOZV3ffxmiC2e7l1SDJpkBEOyue5NAFsg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
 
-  '@radix-ui/react-collection@1.1.7':
-    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxfmt/binding-linux-riscv64-gnu@0.43.0':
+    resolution: {integrity: sha512-j6biGAgzIhj+EtHXlbNumvwG7XqOIdiU4KgIWRXAEj/iUbHKukKW8eXa4MIwpQwW1YkxovduKtzEAPnjlnAhVQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
 
-  '@radix-ui/react-compose-refs@1.1.2':
-    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@oxfmt/binding-linux-riscv64-musl@0.43.0':
+    resolution: {integrity: sha512-RYWxAcslKxvy7yri24Xm9cmD0RiANaiEPs007EFG6l9h1ChM69Q5SOzACaCoz4Z9dEplnhhneeBaTWMEdpgIbA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
 
-  '@radix-ui/react-context@1.1.2':
-    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@oxfmt/binding-linux-s390x-gnu@0.43.0':
+    resolution: {integrity: sha512-DT6Q8zfQQy3jxpezAsBACEHNUUixKSYTwdXeXojNHe4DQOoxjPdjr3Szu6BRNjxLykZM/xMNmp9ElOIyDppwtw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
 
-  '@radix-ui/react-dialog@1.1.15':
-    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxfmt/binding-linux-x64-gnu@0.43.0':
+    resolution: {integrity: sha512-R8Yk7iYcuZORXmCfFZClqbDxRZgZ9/HEidUuBNdoX8Ptx07cMePnMVJ/woB84lFIDjh2ROHVaOP40Ds3rBXFqg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
 
-  '@radix-ui/react-direction@1.1.1':
-    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@oxfmt/binding-linux-x64-musl@0.43.0':
+    resolution: {integrity: sha512-F2YYqyvnQNvi320RWZNAvsaWEHwmW3k4OwNJ1hZxRKXupY63expbBaNp6jAgvYs7y/g546vuQnGHQuCBhslhLQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
 
-  '@radix-ui/react-dismissable-layer@1.1.11':
-    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxfmt/binding-openharmony-arm64@0.43.0':
+    resolution: {integrity: sha512-OE6TdietLXV3F6c7pNIhx/9YC1/2YFwjU9DPc/fbjxIX19hNIaP1rS0cFjCGJlGX+cVJwIKWe8Mos+LdQ1yAJw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
 
-  '@radix-ui/react-dismissable-layer@1.1.7':
-    resolution: {integrity: sha512-j5+WBUdhccJsmH5/H0K6RncjDtoALSEr6jbkaZu+bjw6hOPOhHycr6vEUujl+HBK8kjUfWcoCJXxP6e4lUlMZw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxfmt/binding-win32-arm64-msvc@0.43.0':
+    resolution: {integrity: sha512-0nWK6a7pGkbdoypfVicmV9k/N1FwjPZENoqhlTU+5HhZnAhpIO3za30nEE33u6l6tuy9OVfpdXUqxUgZ+4lbZw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
 
-  '@radix-ui/react-dropdown-menu@2.1.12':
-    resolution: {integrity: sha512-VJoMs+BWWE7YhzEQyVwvF9n22Eiyr83HotCVrMQzla/OwRovXCgah7AcaEr4hMNj4gJxSdtIbcHGvmJXOoJVHA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxfmt/binding-win32-ia32-msvc@0.43.0':
+    resolution: {integrity: sha512-9aokTR4Ft+tRdvgN/pKzSkVy2ksc4/dCpDm9L/xFrbIw0yhLtASLbvoG/5WOTUh/BRPPnfGTsWznEqv0dlOmhA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
 
-  '@radix-ui/react-focus-guards@1.1.2':
-    resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@oxfmt/binding-win32-x64-msvc@0.43.0':
+    resolution: {integrity: sha512-4bPgdQux2ZLWn3bf2TTXXMHcJB4lenmuxrLqygPmvCJ104Yqzj1UctxSRzR31TiJ4MLaG22RK8dUsVpJtrCz5g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
 
-  '@radix-ui/react-focus-guards@1.1.3':
-    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@oxlint-tsgolint/darwin-arm64@0.19.0':
+    resolution: {integrity: sha512-FVOIp5Njte8Z6PpINz7sL5blqSro0pAL8VAHYQ+K5Xm4cOrPQ6DGIhH14oXnbRjzn8Kl69qjz8TPteyn8EqwsQ==}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@radix-ui/react-focus-scope@1.1.4':
-    resolution: {integrity: sha512-r2annK27lIW5w9Ho5NyQgqs0MmgZSTIKXWpVCJaLC1q2kZrZkcqnmHkCHMEmv8XLvsLlurKMPT+kbKkRkm/xVA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxlint-tsgolint/darwin-x64@0.19.0':
+    resolution: {integrity: sha512-GakDTDACePvqOFq3N4oQCl8SyMMa7VBnqV0gDcXPuK50jdWCUqlxM9tgRJarjyIVvmDEJRGYOen+4uBtVwg4Aw==}
+    cpu: [x64]
+    os: [darwin]
 
-  '@radix-ui/react-focus-scope@1.1.7':
-    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxlint-tsgolint/linux-arm64@0.19.0':
+    resolution: {integrity: sha512-Ya0R7somo+KDhhkPtENJ9Q28Fost+aqA3MPe86pEqgmukHFc/KO65PgShOSbIFjZNptELEQvsWL8gDxYZWhH3w==}
+    cpu: [arm64]
+    os: [linux]
 
-  '@radix-ui/react-id@1.1.1':
-    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@oxlint-tsgolint/linux-x64@0.19.0':
+    resolution: {integrity: sha512-yFH378jWc1k/oJmpk+TKpWbKvFieJJvsOHxVMSNFc+ukqs44ZSHVt4HFfAhXAt/bzVK2f7EIDTGp8Hm1OjoJ6Q==}
+    cpu: [x64]
+    os: [linux]
 
-  '@radix-ui/react-label@2.1.8':
-    resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxlint-tsgolint/win32-arm64@0.19.0':
+    resolution: {integrity: sha512-R6NyAtha7OWxh7NGBeFxqDTGAVl1Xj4xLa8Qj39PKbIDqBeVW8BIb+1nEnRp+Mo/VpRoeoFAcqlBsuMcUMd26Q==}
+    cpu: [arm64]
+    os: [win32]
 
-  '@radix-ui/react-menu@2.1.12':
-    resolution: {integrity: sha512-+qYq6LfbiGo97Zz9fioX83HCiIYYFNs8zAsVCMQrIakoNYylIzWuoD/anAD3UzvvR6cnswmfRFJFq/zYYq/k7Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxlint-tsgolint/win32-x64@0.19.0':
+    resolution: {integrity: sha512-2ePvxcbS5tPOmrQvxR8Kc+IqzdTtlrGeMDv+jjTYfkTFPmh2rF9yxVchi/4WM6js3gt2UauQeMV/tfnZNemENQ==}
+    cpu: [x64]
+    os: [win32]
 
-  '@radix-ui/react-popover@1.1.15':
-    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@oxlint/binding-android-arm-eabi@1.58.0':
+    resolution: {integrity: sha512-1T7UN3SsWWxpWyWGn1cT3ASNJOo+pI3eUkmEl7HgtowapcV8kslYpFQcYn431VuxghXakPNlbjRwhqmR37PFOg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxlint/binding-android-arm64@1.58.0':
+    resolution: {integrity: sha512-GryzujxuiRv2YFF7bRy8mKcxlbuAN+euVUtGJt9KKbLT8JBUIosamVhcthLh+VEr6KE6cjeVMAQxKAzJcoN7dg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxlint/binding-darwin-arm64@1.58.0':
+    resolution: {integrity: sha512-7/bRSJIwl4GxeZL9rPZ11anNTyUO9epZrfEJH/ZMla3+/gbQ6xZixh9nOhsZ0QwsTW7/5J2A/fHbD1udC5DQQA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxlint/binding-darwin-x64@1.58.0':
+    resolution: {integrity: sha512-EqdtJSiHweS2vfILNrpyJ6HUwpEq2g7+4Zx1FPi4hu3Hu7tC3znF6ufbXO8Ub2LD4mGgznjI7kSdku9NDD1Mkg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxlint/binding-freebsd-x64@1.58.0':
+    resolution: {integrity: sha512-VQt5TH4M42mY20F545G637RKxV/yjwVtKk2vfXuazfReSIiuvWBnv+FVSvIV5fKVTJNjt3GSJibh6JecbhGdBw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.58.0':
+    resolution: {integrity: sha512-fBYcj4ucwpAtjJT3oeBdFBYKvNyjRSK+cyuvBOTQjh0jvKp4yeA4S/D0IsCHus/VPaNG5L48qQkh+Vjy3HL2/Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm-musleabihf@1.58.0':
+    resolution: {integrity: sha512-0BeuFfwlUHlJ1xpEdSD1YO3vByEFGPg36uLjK1JgFaxFb4W6w17F8ET8sz5cheZ4+x5f2xzdnRrrWv83E3Yd8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm64-gnu@1.58.0':
+    resolution: {integrity: sha512-TXlZgnPTlxrQzxG9ZXU7BNwx1Ilrr17P3GwZY0If2EzrinqRH3zXPc3HrRcBJgcsoZNMuNL5YivtkJYgp467UQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-arm64-musl@1.58.0':
+    resolution: {integrity: sha512-zSoYRo5dxHLcUx93Stl2hW3hSNjPt99O70eRVWt5A1zwJ+FPjeCCANCD2a9R4JbHsdcl11TIQOjyigcRVOH2mw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-ppc64-gnu@1.58.0':
+    resolution: {integrity: sha512-NQ0U/lqxH2/VxBYeAIvMNUK1y0a1bJ3ZicqkF2c6wfakbEciP9jvIE4yNzCFpZaqeIeRYaV7AVGqEO1yrfVPjA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-gnu@1.58.0':
+    resolution: {integrity: sha512-X9J+kr3gIC9FT8GuZt0ekzpNUtkBVzMVU4KiKDSlocyQuEgi3gBbXYN8UkQiV77FTusLDPsovjo95YedHr+3yg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-musl@1.58.0':
+    resolution: {integrity: sha512-CDze3pi1OO3Wvb/QsXjmLEY4XPKGM6kIo82ssNOgmcl1IdndF9VSGAE38YLhADWmOac7fjqhBw82LozuUVxD0Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-s390x-gnu@1.58.0':
+    resolution: {integrity: sha512-b/89glbxFaEAcA6Uf1FvCNecBJEgcUTsV1quzrqXM/o4R1M4u+2KCVuyGCayN2UpsRWtGGLb+Ver0tBBpxaPog==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-gnu@1.58.0':
+    resolution: {integrity: sha512-0/yYpkq9VJFCEcuRlrViGj8pJUFFvNS4EkEREaN7CB1EcLXJIaVSSa5eCihwBGXtOZxhnblWgxks9juRdNQI7w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-musl@1.58.0':
+    resolution: {integrity: sha512-hr6FNvmcAXiH+JxSvaJ4SJ1HofkdqEElXICW9sm3/Rd5eC3t7kzvmLyRAB3NngKO2wzXRCAm4Z/mGWfrsS4X8w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-openharmony-arm64@1.58.0':
+    resolution: {integrity: sha512-R+O368VXgRql1K6Xar+FEo7NEwfo13EibPMoTv3sesYQedRXd6m30Dh/7lZMxnrQVFfeo4EOfYIP4FpcgWQNHg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
 
-  '@radix-ui/react-popper@1.2.4':
-    resolution: {integrity: sha512-3p2Rgm/a1cK0r/UVkx5F/K9v/EplfjAeIFCGOPYPO4lZ0jtg4iSQXt/YGTSLWaf4x7NG6Z4+uKFcylcTZjeqDA==}
+  '@oxlint/binding-win32-arm64-msvc@1.58.0':
+    resolution: {integrity: sha512-Q0FZiAY/3c4YRj4z3h9K1PgaByrifrfbBoODSeX7gy97UtB7pySPUQfC2B/GbxWU6k7CzQrRy5gME10PltLAFQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxlint/binding-win32-ia32-msvc@1.58.0':
+    resolution: {integrity: sha512-Y8FKBABrSPp9H0QkRLHDHOSUgM/309a3IvOVgPcVxYcX70wxJrk608CuTg7w+C6vEd724X5wJoNkBcGYfH7nNQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxlint/binding-win32-x64-msvc@1.58.0':
+    resolution: {integrity: sha512-bCn5rbiz5My+Bj7M09sDcnqW0QJyINRVxdZ65x1/Y2tGrMwherwK/lpk+HRQCKvXa8pcaQdF5KY5j54VGZLwNg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@poppinss/colors@4.1.6':
+    resolution: {integrity: sha512-H9xkIdFswbS8n1d6vmRd8+c10t2Qe+rZITbbDHHkQixH5+2x1FDGmi/0K+WgWiqQFKPSlIYB7jlH6Kpfn6Fleg==}
+
+  '@poppinss/dumper@0.6.5':
+    resolution: {integrity: sha512-NBdYIb90J7LfOI32dOewKI1r7wnkiH6m920puQ3qHUeZkxNkQiFnXVWoE6YtFSv6QOiPPf7ys6i+HWWecDz7sw==}
+
+  '@poppinss/exception@1.2.3':
+    resolution: {integrity: sha512-dCED+QRChTVatE9ibtoaxc+WkdzOSjYTKi/+uacHWIsfodVfpsueo3+DKpgU5Px8qXjgmXkSvhXvSCz3fnP9lw==}
+
+  '@prisma/instrumentation@7.6.0':
+    resolution: {integrity: sha512-ZPW2gRiwpPzEfgeZgaekhqXrbW+Y2RJKHVqUmlhZhKzRNCcvR6DykzylDrynpArKKRQtLxoZy36fK7U0p3pdgQ==}
     peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+      '@opentelemetry/api': ^1.8
 
-  '@radix-ui/react-popper@1.2.8':
-    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2509,8 +2350,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-portal@1.1.6':
-    resolution: {integrity: sha512-XmsIl2z1n/TsYFLIdYam2rmFwf9OC/Sh2avkbmVMDuBZIe7hSpM0cYnWPAo7nHOVx8zTuwDZGByfcqLdnzp3Vw==}
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2522,34 +2363,26 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-portal@1.1.9':
-    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-presence@1.1.4':
-    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-presence@1.1.5':
-    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+  '@radix-ui/react-dialog@1.1.15':
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2561,21 +2394,17 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-primitive@2.1.0':
-    resolution: {integrity: sha512-/J/FhLdK0zVcILOwt5g+dH4KnkonCtkVJsa2G6JmvbbtZfBEI1gMsO3QMjseL4F/SwfAMt1Vc/0XKYKq+xJ1sw==}
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-primitive@2.1.3':
-    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2587,8 +2416,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-primitive@2.1.4':
-    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+  '@radix-ui/react-dropdown-menu@2.1.16':
+    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2600,21 +2429,17 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-roving-focus@1.1.11':
-    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-roving-focus@1.1.7':
-    resolution: {integrity: sha512-C6oAg451/fQT3EGbWHbCQjYTtbyjNO1uzQgMzwyivcHT3GKNEmu1q3UuREhN+HzHAVtv3ivMVK08QlC+PkYw9Q==}
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2626,48 +2451,56 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-separator@1.1.8':
-    resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-slot@1.2.0':
-    resolution: {integrity: sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==}
+  '@radix-ui/react-menu@2.1.16':
+    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
     peerDependencies:
       '@types/react': '*'
+      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@radix-ui/react-slot@1.2.3':
-    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
     peerDependencies:
       '@types/react': '*'
+      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@radix-ui/react-slot@1.2.4':
-    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
       '@types/react': '*'
+      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@radix-ui/react-switch@1.2.6':
-    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2679,8 +2512,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-tabs@1.1.13':
-    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2692,8 +2525,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-toast@1.2.15':
-    resolution: {integrity: sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==}
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2705,8 +2538,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-toggle-group@1.1.11':
-    resolution: {integrity: sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==}
+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2718,17 +2551,22 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-toggle@1.1.10':
-    resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
+
+  '@radix-ui/react-slot@1.2.4':
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
         optional: true
 
   '@radix-ui/react-tooltip@1.2.8':
@@ -2789,15 +2627,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-use-previous@1.1.1':
-    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@radix-ui/react-use-rect@1.1.1':
     resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
@@ -2868,17 +2697,106 @@ packages:
       react-native:
         optional: true
 
-  '@rolldown/pluginutils@1.0.0-beta.40':
-    resolution: {integrity: sha512-s3GeJKSQOwBlzdUrj4ISjJj5SfSh+aqn0wjOar4Bx95iV1ETI7F6S/5hLcfAxZ9kXDcyrAkxPlqmd1ZITttf+w==}
+  '@rolldown/binding-android-arm64@1.0.1':
+    resolution: {integrity: sha512-fJI3I0r3C3Oj/zdBCpaCmBRZYf07xpaq4yCfDDoSFm+beWNzbIl26puW8RraUdugoJw/95zerNOn6jasAhzSmg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
 
-  '@rollup/pluginutils@5.3.0':
-    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
+  '@rolldown/binding-darwin-arm64@1.0.1':
+    resolution: {integrity: sha512-cKnAhWEsV7TPcA/5EAteDp6KcJZBQ2G+BqE7zayMMi7kMvwRsbv7WT9aOnn0WNl4SKEIf43vjS31iUPu80nzXg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.0.1':
+    resolution: {integrity: sha512-YKrVwQjIRBPo+5G/u03wGjbdy4q7pyzCe93DK9VJ7zkVmeg8LJ7GbgsiHWdR4xSoe4CAXRD7Bcjgbtr64bkXNg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.0.1':
+    resolution: {integrity: sha512-z/oBsREo46SsFqBwYtFe0kpJeBijAT48O/WXLI4suiCLBkr03RTtTJMCzSdDd2znlh8VJizL09XVkQgk8IZonw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.1':
+    resolution: {integrity: sha512-ik8q7GM11zxvYxFc2PeDcT6TBvhCQMaUxfph/M5l9sKuTs/Sjg3L+Byw0F7w0ZVLBZmx30P+gG0ECzzN+MFcmQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.1':
+    resolution: {integrity: sha512-QoSx2EkyrrdZ6kcyE8stqZ62t0Yra8Fs5ia9lOxJrh6TMQJK7gQKmscdTHf7pOXKREKrVwOtJcQG3qVSfc866A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-musl@1.0.1':
+    resolution: {integrity: sha512-uwNwFpwKeNiZawfAWBgg0VIztPTV3ihhh1vV334h9ivnNLorxnQMU6Fz8wG1Zb4Qh9LC1/MkcyT3YlDXG3Rsgg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.1':
+    resolution: {integrity: sha512-zY1bul7OWr7DFBiJ++wofXvnr8B45ce3QsQUhKrIhXsygAh7bTkwyeM1bi1a2g5C/yC/N8TZyGDEoMfm/l9mpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.1':
+    resolution: {integrity: sha512-0frlsT/f4Ft6I7SMESTKnF3cZsdicQn1dCMkF/jT9wDLE+gGoiQfv1nmT9e+s7s/fekvvy6tZM2jHvI2tkbJDQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.0.1':
+    resolution: {integrity: sha512-XABVmGp9Tg0WspTVvwduTc4fpqy6JnAUrSQe6OuyqD/03nI7r0O9OWUkMIwFrjKAIqolvqoA4ZrJppgwE0Gxmw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-musl@1.0.1':
+    resolution: {integrity: sha512-bV4fzswuzVcKD90o/VM6QqKxnxlDq0g2BISDLNVmxrnhpv1DDbyPhCIjYfvzYLV+MvkKKnQt2Q6AO86SEBULUQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-openharmony-arm64@1.0.1':
+    resolution: {integrity: sha512-/Mh0Zhq3OP7fVs0kcQHZP6lZEthMGTaSf8UBQYSFEZDWGXXlEC+nJ6EqenaK2t4LBXMe3A+K/G2BVXXdtOr4PQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-wasm32-wasi@1.0.1':
+    resolution: {integrity: sha512-+1xc9X45l8ufsBAm6Gjvx2qDRIY9lTVt0cgWNcJ+1gdhXvkbxePA60yRTwSTuXL09CMhyJmjpV7E3NoyxbqFQQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.1':
+    resolution: {integrity: sha512-1D+UqZdfnuR+Jy1GgMJwi85bD40H21uNmOPRWQhw4oRSuolZ/B5rixZ45DK2KXOTCvmVCecauWgEhbw8bI7tOw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.0.1':
+    resolution: {integrity: sha512-INAycaWuhlOK3wk4mRHGsdgwYWmd9cChdPdE9bwWmy6rn9VqVNYNFGhOdXrofXUxwHIncSiPNb8tNm8knDVIeQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.0-rc.7':
+    resolution: {integrity: sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA==}
+
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
 
   '@rollup/rollup-android-arm-eabi@4.53.3':
     resolution: {integrity: sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==}
@@ -2914,56 +2832,67 @@ packages:
     resolution: {integrity: sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.53.3':
     resolution: {integrity: sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.53.3':
     resolution: {integrity: sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.53.3':
     resolution: {integrity: sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.53.3':
     resolution: {integrity: sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.53.3':
     resolution: {integrity: sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.53.3':
     resolution: {integrity: sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.53.3':
     resolution: {integrity: sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.53.3':
     resolution: {integrity: sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.53.3':
     resolution: {integrity: sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.53.3':
     resolution: {integrity: sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.53.3':
     resolution: {integrity: sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==}
@@ -2993,340 +2922,493 @@ packages:
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
-  '@sentry-internal/browser-utils@10.32.1':
-    resolution: {integrity: sha512-sjLLep1es3rTkbtAdTtdpc/a6g7v7bK5YJiZJsUigoJ4NTiFeMI5uIDCxbH/tjJ1q23YE1LzVn7T96I+qBRjHA==}
+  '@sentry-internal/browser-utils@10.47.0':
+    resolution: {integrity: sha512-bVFRAeJWMBcBCvJKIFCMJ1/yQToL4vPGqfmlnDZeypcxkqUDKQ/Y3ziLHXoDL2sx0lagcgU2vH1QhCQ67Aujjw==}
     engines: {node: '>=18'}
 
-  '@sentry-internal/feedback@10.32.1':
-    resolution: {integrity: sha512-O24G8jxbfBY1RE/v2qFikPJISVMOrd/zk8FKyl+oUVYdOxU2Ucjk2cR3EQruBFlc7irnL6rT3GPfRZ/kBgLkmQ==}
+  '@sentry-internal/feedback@10.47.0':
+    resolution: {integrity: sha512-pdvMmi4dQpX5S/vAAzrhHPIw3T3HjUgDNgUiCBrlp7N9/6zGO2gNPhUnNekP+CjgI/z0rvf49RLqlDenpNrMOg==}
     engines: {node: '>=18'}
 
-  '@sentry-internal/replay-canvas@10.32.1':
-    resolution: {integrity: sha512-/XGTzWNWVc+B691fIVekV2KeoHFEDA5KftrLFAhEAW7uWOwk/xy3aQX4TYM0LcPm2PBKvoumlAD+Sd/aXk63oA==}
+  '@sentry-internal/replay-canvas@10.47.0':
+    resolution: {integrity: sha512-A5OY8friSe6g8WAK4L8IeOPiEd9D3Ps40DzRH5j2f6SUja0t90mKMvHRcRf8zq0d4BkdB+JM7tjOkwxpuv8heA==}
     engines: {node: '>=18'}
 
-  '@sentry-internal/replay@10.32.1':
-    resolution: {integrity: sha512-KKmLUgIaLRM0VjrMA1ByQTawZyRDYSkG2evvEOVpEtR9F0sumidAQdi7UY71QEKE1RYe/Jcp/3WoaqsMh8tbnQ==}
+  '@sentry-internal/replay@10.47.0':
+    resolution: {integrity: sha512-ScdovxP7hJxgMt70+7hFvwT02GIaIUAxdEM/YPsayZBeCoAukPW8WiwztJfoKtsfPyKJ5A6f0H3PIxTPcA9Row==}
     engines: {node: '>=18'}
 
-  '@sentry/babel-plugin-component-annotate@4.6.1':
-    resolution: {integrity: sha512-aSIk0vgBqv7PhX6/Eov+vlI4puCE0bRXzUG5HdCsHBpAfeMkI8Hva6kSOusnzKqs8bf04hU7s3Sf0XxGTj/1AA==}
-    engines: {node: '>= 14'}
+  '@sentry/babel-plugin-component-annotate@5.1.1':
+    resolution: {integrity: sha512-x2wEpBHwsTyTF2rWsLKJlzrRF1TTIGOfX+ngdE+Yd5DBkoS58HwQv824QOviPGQRla4/ypISqAXzjdDPL/zalg==}
+    engines: {node: '>= 18'}
 
-  '@sentry/browser@10.32.1':
-    resolution: {integrity: sha512-NPNCXTZ05ZGTFyJdKNqjykpFm+urem0ebosILQiw3C4BxNVNGH4vfYZexyl6prRhmg91oB6GjVNiVDuJiap1gg==}
+  '@sentry/browser@10.47.0':
+    resolution: {integrity: sha512-rC0agZdxKA5XWfL4VwPOr/rJMogXDqZgnVzr93YWpFn9DMZT/7LzxSJVPIJwRUjx3bFEby3PcTa3YaX7pxm1AA==}
     engines: {node: '>=18'}
 
-  '@sentry/bundler-plugin-core@4.6.1':
-    resolution: {integrity: sha512-WPeRbnMXm927m4Kr69NTArPfI+p5/34FHftdCRI3LFPMyhZDzz6J3wLy4hzaVUgmMf10eLzmq2HGEMvpQmdynA==}
-    engines: {node: '>= 14'}
+  '@sentry/bundler-plugin-core@5.1.1':
+    resolution: {integrity: sha512-F+itpwR9DyQR7gEkrXd2tigREPTvtF5lC8qu6e4anxXYRTui1+dVR0fXNwjpyAZMhIesLfXRN7WY7ggdj7hi0Q==}
+    engines: {node: '>= 18'}
 
-  '@sentry/cli-darwin@2.58.4':
-    resolution: {integrity: sha512-kbTD+P4X8O+nsNwPxCywtj3q22ecyRHWff98rdcmtRrvwz8CKi/T4Jxn/fnn2i4VEchy08OWBuZAqaA5Kh2hRQ==}
+  '@sentry/cli-darwin@2.58.5':
+    resolution: {integrity: sha512-lYrNzenZFJftfwSya7gwrHGxtE+Kob/e1sr9lmHMFOd4utDlmq0XFDllmdZAMf21fxcPRI1GL28ejZ3bId01fQ==}
     engines: {node: '>=10'}
     os: [darwin]
 
-  '@sentry/cli-linux-arm64@2.58.4':
-    resolution: {integrity: sha512-0g0KwsOozkLtzN8/0+oMZoOuQ0o7W6O+hx+ydVU1bktaMGKEJLMAWxOQNjsh1TcBbNIXVOKM/I8l0ROhaAb8Ig==}
+  '@sentry/cli-linux-arm64@2.58.5':
+    resolution: {integrity: sha512-/4gywFeBqRB6tR/iGMRAJ3HRqY6Z7Yp4l8ZCbl0TDLAfHNxu7schEw4tSnm2/Hh9eNMiOVy4z58uzAWlZXAYBQ==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux, freebsd, android]
 
-  '@sentry/cli-linux-arm@2.58.4':
-    resolution: {integrity: sha512-rdQ8beTwnN48hv7iV7e7ZKucPec5NJkRdrrycMJMZlzGBPi56LqnclgsHySJ6Kfq506A2MNuQnKGaf/sBC9REA==}
+  '@sentry/cli-linux-arm@2.58.5':
+    resolution: {integrity: sha512-KtHweSIomYL4WVDrBrYSYJricKAAzxUgX86kc6OnlikbyOhoK6Fy8Vs6vwd52P6dvWPjgrMpUYjW2M5pYXQDUw==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux, freebsd, android]
 
-  '@sentry/cli-linux-i686@2.58.4':
-    resolution: {integrity: sha512-NseoIQAFtkziHyjZNPTu1Gm1opeQHt7Wm1LbLrGWVIRvUOzlslO9/8i6wETUZ6TjlQxBVRgd3Q0lRBG2A8rFYA==}
+  '@sentry/cli-linux-i686@2.58.5':
+    resolution: {integrity: sha512-G7261dkmyxqlMdyvyP06b+RTIVzp1gZNgglj5UksxSouSUqRd/46W/2pQeOMPhloDYo9yLtCN2YFb3Mw4aUsWw==}
     engines: {node: '>=10'}
     cpu: [x86, ia32]
     os: [linux, freebsd, android]
 
-  '@sentry/cli-linux-x64@2.58.4':
-    resolution: {integrity: sha512-d3Arz+OO/wJYTqCYlSN3Ktm+W8rynQ/IMtSZLK8nu0ryh5mJOh+9XlXY6oDXw4YlsM8qCRrNquR8iEI1Y/IH+Q==}
+  '@sentry/cli-linux-x64@2.58.5':
+    resolution: {integrity: sha512-rP04494RSmt86xChkQ+ecBNRYSPbyXc4u0IA7R7N1pSLCyO74e5w5Al+LnAq35cMfVbZgz5Sm0iGLjyiUu4I1g==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux, freebsd, android]
 
-  '@sentry/cli-win32-arm64@2.58.4':
-    resolution: {integrity: sha512-bqYrF43+jXdDBh0f8HIJU3tbvlOFtGyRjHB8AoRuMQv9TEDUfENZyCelhdjA+KwDKYl48R1Yasb4EHNzsoO83w==}
+  '@sentry/cli-win32-arm64@2.58.5':
+    resolution: {integrity: sha512-AOJ2nCXlQL1KBaCzv38m3i2VmSHNurUpm7xVKd6yAHX+ZoVBI8VT0EgvwmtJR2TY2N2hNCC7UrgRmdUsQ152bA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
 
-  '@sentry/cli-win32-i686@2.58.4':
-    resolution: {integrity: sha512-3triFD6jyvhVcXOmGyttf+deKZcC1tURdhnmDUIBkiDPJKGT/N5xa4qAtHJlAB/h8L9jgYih9bvJnvvFVM7yug==}
+  '@sentry/cli-win32-i686@2.58.5':
+    resolution: {integrity: sha512-EsuboLSOnlrN7MMPJ1eFvfMDm+BnzOaSWl8eYhNo8W/BIrmNgpRUdBwnWn9Q2UOjJj5ZopukmsiMYtU/D7ml9g==}
     engines: {node: '>=10'}
     cpu: [x86, ia32]
     os: [win32]
 
-  '@sentry/cli-win32-x64@2.58.4':
-    resolution: {integrity: sha512-cSzN4PjM1RsCZ4pxMjI0VI7yNCkxiJ5jmWncyiwHXGiXrV1eXYdQ3n1LhUYLZ91CafyprR0OhDcE+RVZ26Qb5w==}
+  '@sentry/cli-win32-x64@2.58.5':
+    resolution: {integrity: sha512-IZf+XIMiQwj+5NzqbOQfywlOitmCV424Vtf9c+ep61AaVScUFD1TSrQbOcJJv5xGxhlxNOMNgMeZhdexdzrKZg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
-  '@sentry/cli@2.58.4':
-    resolution: {integrity: sha512-ArDrpuS8JtDYEvwGleVE+FgR+qHaOp77IgdGSacz6SZy6Lv90uX0Nu4UrHCQJz8/xwIcNxSqnN22lq0dH4IqTg==}
+  '@sentry/cli@2.58.5':
+    resolution: {integrity: sha512-tavJ7yGUZV+z3Ct2/ZB6mg339i08sAk6HDkgqmSRuQEu2iLS5sl9HIvuXfM6xjv8fwlgFOSy++WNABNAcGHUbg==}
     engines: {node: '>= 10'}
     hasBin: true
 
-  '@sentry/core@10.32.1':
-    resolution: {integrity: sha512-PH2ldpSJlhqsMj2vCTyU0BI2Fx1oIDhm7Izo5xFALvjVCS0gmlqHt1udu6YlKn8BtpGH6bGzssvv5APrk+OdPQ==}
-    engines: {node: '>=18'}
-
-  '@sentry/core@10.33.0':
-    resolution: {integrity: sha512-ehH1VSUclIHZKEZVdv+klofsFIh8FFzqA6AAV23RtLepptzA8wqQzUGraEuSN25sYcNmYJ0jti5U0Ys+WZv5Dw==}
-    engines: {node: '>=18'}
-
-  '@sentry/node-core@10.32.1':
-    resolution: {integrity: sha512-w56rxdBanBKc832zuwnE+zNzUQ19fPxfHEtOhK8JGPu3aSwQYcIxwz9z52lOx3HN7k/8Fj5694qlT3x/PokhRw==}
+  '@sentry/core@10.47.0':
+    resolution: {integrity: sha512-nsYRAx3EWezDut+Zl+UwwP07thh9uY7CfSAi2whTdcJl5hu1nSp2z8bba7Vq/MGbNLnazkd3A+GITBEML924JA==}
     engines: {node: '>=18'}
-    peerDependencies:
-      '@opentelemetry/api': ^1.9.0
-      '@opentelemetry/context-async-hooks': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/core': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/instrumentation': '>=0.57.1 <1'
-      '@opentelemetry/resources': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/semantic-conventions': ^1.37.0
 
-  '@sentry/node-core@10.33.0':
-    resolution: {integrity: sha512-73J1yLMdtjyadtcsrZ5VBYIyWrJ5gHh5dRsJlfm6XMD3ZFHQQ9Fwd6mwnSY+X+VLJaNq7RtoNECij6LLqE4R0g==}
+  '@sentry/node-core@10.47.0':
+    resolution: {integrity: sha512-qv6LsqHbkQmd0aQEUox/svRSz26J+l4gGjFOUNEay2armZu9XLD+Ct89jpFgZD5oIPNAj2jraodTRqydXiwS5w==}
     engines: {node: '>=18'}
     peerDependencies:
       '@opentelemetry/api': ^1.9.0
-      '@opentelemetry/context-async-hooks': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/core': ^1.30.1 || ^2.1.0 || ^2.2.0
+      '@opentelemetry/context-async-hooks': ^1.30.1 || ^2.1.0
+      '@opentelemetry/core': ^1.30.1 || ^2.1.0
+      '@opentelemetry/exporter-trace-otlp-http': '>=0.57.0 <1'
       '@opentelemetry/instrumentation': '>=0.57.1 <1'
-      '@opentelemetry/resources': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/semantic-conventions': ^1.37.0
-
-  '@sentry/node@10.32.1':
-    resolution: {integrity: sha512-oxlybzt8QW0lx/QaEj1DcvZDRXkgouewFelu/10dyUwv5So3YvipfvWInda+yMLmn25OggbloDQ0gyScA2jU3g==}
-    engines: {node: '>=18'}
+      '@opentelemetry/resources': ^1.30.1 || ^2.1.0
+      '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0
+      '@opentelemetry/semantic-conventions': ^1.39.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@opentelemetry/context-async-hooks':
+        optional: true
+      '@opentelemetry/core':
+        optional: true
+      '@opentelemetry/exporter-trace-otlp-http':
+        optional: true
+      '@opentelemetry/instrumentation':
+        optional: true
+      '@opentelemetry/resources':
+        optional: true
+      '@opentelemetry/sdk-trace-base':
+        optional: true
+      '@opentelemetry/semantic-conventions':
+        optional: true
 
-  '@sentry/node@10.33.0':
-    resolution: {integrity: sha512-HZ7U0igIXs8nHSeh0YAe9C3eE/fjkHOprctQHwoYpRrZelsKO8NsvZU0K/1+knFr36vFj7jtt1QlF/UjCQZD+Q==}
+  '@sentry/node@10.47.0':
+    resolution: {integrity: sha512-R+btqPepv88o635G6HtVewLjqCLUedBg5HBs7Nq1qbbKvyti01uArUF2f+3DsLenk5B9LUNiRlE+frZA44Ahmw==}
     engines: {node: '>=18'}
 
-  '@sentry/opentelemetry@10.32.1':
-    resolution: {integrity: sha512-YLssSz5Y+qPvufrh2cDaTXDoXU8aceOhB+YTjT8/DLF6SOj7Tzen52aAcjNaifawaxEsLCC8O+B+A2iA+BllvA==}
+  '@sentry/opentelemetry@10.47.0':
+    resolution: {integrity: sha512-f6Hw2lrpCjlOksiosP0Z2jK/+l+21SIdoNglVeG/sttMyx8C8ywONKh0Ha50sFsvB1VaB8n94RKzzf3hkh9V3g==}
     engines: {node: '>=18'}
     peerDependencies:
       '@opentelemetry/api': ^1.9.0
-      '@opentelemetry/context-async-hooks': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/core': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/semantic-conventions': ^1.37.0
+      '@opentelemetry/context-async-hooks': ^1.30.1 || ^2.1.0
+      '@opentelemetry/core': ^1.30.1 || ^2.1.0
+      '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0
+      '@opentelemetry/semantic-conventions': ^1.39.0
 
-  '@sentry/opentelemetry@10.33.0':
-    resolution: {integrity: sha512-v/6mAYLxtfcKLCw6Ktk46T6fWEQBVWB9Ah81axr8OvuIomK71jkv1zb0v7D8ot0ESesJ3JF6I/aKhfxpyLInSQ==}
+  '@sentry/react@10.47.0':
+    resolution: {integrity: sha512-ZtJV6xxF8jUVE9e3YQUG3Do0XapG1GjniyLyqMPgN6cNvs/HaRJODf7m60By+VGqcl5XArEjEPTvx8CdPUXDfA==}
     engines: {node: '>=18'}
     peerDependencies:
-      '@opentelemetry/api': ^1.9.0
-      '@opentelemetry/context-async-hooks': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/core': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0 || ^2.2.0
-      '@opentelemetry/semantic-conventions': ^1.37.0
+      react: ^16.14.0 || 17.x || 18.x || 19.x
 
-  '@sentry/react@10.32.1':
-    resolution: {integrity: sha512-/tX0HeACbAmVP57x8txTrGk/U3fa9pDBaoAtlOrnPv5VS/aC5SGkehXWeTGSAa+ahlOWwp3IF8ILVXRiOoG/Vg==}
-    engines: {node: '>=18'}
+  '@sentry/rollup-plugin@5.1.1':
+    resolution: {integrity: sha512-1d5NkdRR6aKWBP7czkY8sFFWiKnfmfRpQOj+m9bJTsyTjbMiEQJst6315w5pCVlRItPhBqpAraqAhutZFgvyVg==}
+    engines: {node: '>= 18'}
     peerDependencies:
-      react: ^16.14.0 || 17.x || 18.x || 19.x
+      rollup: '>=3.2.0'
 
-  '@sentry/tanstackstart-react@10.32.1':
-    resolution: {integrity: sha512-zbzMcF4X4NLbGQwJ1/nO4vSVY+m42sMhPUEgJDDr6Yo+4oaT5ejs0+K7t6S08LyDbLKUBPQuFtsroPCpfKPxlQ==}
+  '@sentry/tanstackstart-react@10.47.0':
+    resolution: {integrity: sha512-DEQ8XFqZ0VuwzR2hBll0XGWHrgnbCgPCkEzGF6RtvwWxnIv0ZuoRHFEYXtq5JIij2txaU8/74zwuaGqmJmTRiQ==}
     engines: {node: '>=18'}
 
-  '@sentry/vite-plugin@4.6.1':
-    resolution: {integrity: sha512-Qvys1y3o8/bfL3ikrHnJS9zxdjt0z3POshdBl3967UcflrTqBmnGNkcVk53SlmtJWIfh85fgmrLvGYwZ2YiqNg==}
-    engines: {node: '>= 14'}
+  '@sentry/vite-plugin@5.1.1':
+    resolution: {integrity: sha512-i6NWUDi2SDikfSUeMJvJTRdwEKYSfTd+mvBO2Ja51S1YK+hnickBuDfD+RvPerIXLuyRu3GamgNPbNqgCGUg/Q==}
+    engines: {node: '>= 18'}
 
-  '@shikijs/core@1.10.3':
-    resolution: {integrity: sha512-D45PMaBaeDHxww+EkcDQtDAtzv00Gcsp72ukBtaLSmqRvh0WgGMq3Al0rl1QQBZfuneO75NXMIzEZGFitThWbg==}
+  '@shopify/hydrogen-react@2026.4.0':
+    resolution: {integrity: sha512-RXtMkkZAJFv43BcNR2CNIkVbUqT28nU9uzJ05lewkX9yq2C7Vmf5AC2jLov+tevMYFqTPOQRiZYuxtym4UnKSA==}
+    peerDependencies:
+      react: ^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3
+      react-dom: ^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3
+      vite: ^5.1.0 || ^6.2.1
 
-  '@shikijs/transformers@1.10.3':
-    resolution: {integrity: sha512-MNjsyye2WHVdxfZUSr5frS97sLGe6G1T+1P41QjyBFJehZphMcr4aBlRLmq6OSPBslYe9byQPVvt/LJCOfxw8Q==}
+  '@sindresorhus/is@7.2.0':
+    resolution: {integrity: sha512-P1Cz1dWaFfR4IR+U13mqqiGsLFf1KbayybWwdd2vfctdV6hDpUkgCY0nKOLLTMSoRd/jJNjtbqzf13K8DCCXQw==}
+    engines: {node: '>=18'}
 
   '@sindresorhus/merge-streams@4.0.0':
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
-  '@so-ric/colorspace@1.1.6':
-    resolution: {integrity: sha512-/KiKkpHNOBgkFJwu9sh48LkHSMYGyuTcSFK/qMBdnOAlrRJzRSXAOFB5qwzaVQuDl8wAvHVMkaASQDReTahxuw==}
+  '@solid-primitives/event-listener@2.4.5':
+    resolution: {integrity: sha512-nwRV558mIabl4yVAhZKY8cb6G+O1F0M6Z75ttTu5hk+SxdOnKSGj+eetDIu7Oax1P138ZdUU01qnBPR8rnxaEA==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/keyboard@1.3.5':
+    resolution: {integrity: sha512-sav+l+PL+74z3yaftVs7qd8c2SXkqzuxPOVibUe5wYMt+U5Hxp3V3XCPgBPN2I6cANjvoFtz0NiU8uHVLdi9FQ==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/resize-observer@2.1.5':
+    resolution: {integrity: sha512-AiyTknKcNBaKHbcSMuxtSNM8FjIuiSuFyFghdD0TcCMU9hKi9EmsC5pjfjDwxE+5EueB1a+T/34PLRI5vbBbKw==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/rootless@1.5.3':
+    resolution: {integrity: sha512-N8cIDAHbWcLahNRLr0knAAQvXyEdEMoAZvIMZKmhNb1mlx9e2UOv9BRD5YNwQUJwbNoYVhhLwFOEOcVXFx0HqA==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/static-store@0.1.3':
+    resolution: {integrity: sha512-uxez7SXnr5GiRnzqO2IEDjOJRIXaG+0LZLBizmUA1FwSi+hrpuMzVBwyk70m4prcl8X6FDDXUl9O8hSq8wHbBQ==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/utils@6.4.0':
+    resolution: {integrity: sha512-AeGTBg8Wtkh/0s+evyLtP8piQoS4wyqqQaAFs2HJcFMMjYAtUgo+ZPduRXLjPlqKVc2ejeR544oeqpbn8Egn8A==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@speed-highlight/core@1.2.17':
+    resolution: {integrity: sha512-Z92FwKpCtfaW1V0jTU/fh3QzYEZN8wDwrzRIBoADCJfn4mJCNcJN/XegifX7BDrQ8/h9Xh/JnbyMchL0FqXrkg==}
 
   '@stablelib/base64@1.0.1':
     resolution: {integrity: sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==}
 
-  '@stackblitz/sdk@1.11.0':
-    resolution: {integrity: sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ==}
-
   '@standard-schema/spec@1.0.0-beta.4':
     resolution: {integrity: sha512-d3IxtzLo7P1oZ8s8YNvxzBUXRXojSut8pbPrTYtzsc5sn4+53jVqbk66pQerSZbZSJZQux6LkclB/+8IDordHg==}
 
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
-  '@tailwindcss/node@4.1.11':
-    resolution: {integrity: sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==}
+  '@swc/helpers@0.5.18':
+    resolution: {integrity: sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==}
 
-  '@tailwindcss/oxide-android-arm64@4.1.11':
-    resolution: {integrity: sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==}
-    engines: {node: '>= 10'}
+  '@tailwindcss/node@4.3.0':
+    resolution: {integrity: sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==}
+
+  '@tailwindcss/oxide-android-arm64@4.3.0':
+    resolution: {integrity: sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==}
+    engines: {node: '>= 20'}
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.11':
-    resolution: {integrity: sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==}
-    engines: {node: '>= 10'}
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
+    resolution: {integrity: sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==}
+    engines: {node: '>= 20'}
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.1.11':
-    resolution: {integrity: sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==}
-    engines: {node: '>= 10'}
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
+    resolution: {integrity: sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==}
+    engines: {node: '>= 20'}
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.11':
-    resolution: {integrity: sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==}
-    engines: {node: '>= 10'}
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
+    resolution: {integrity: sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==}
+    engines: {node: '>= 20'}
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
-    resolution: {integrity: sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==}
-    engines: {node: '>= 10'}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
+    resolution: {integrity: sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==}
+    engines: {node: '>= 20'}
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
-    resolution: {integrity: sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==}
-    engines: {node: '>= 10'}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
+    resolution: {integrity: sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==}
+    engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
-    resolution: {integrity: sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==}
-    engines: {node: '>= 10'}
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
+    resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
+    engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
-    resolution: {integrity: sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==}
-    engines: {node: '>= 10'}
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
+    resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
+    resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
+    engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
+    resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
+    resolution: {integrity: sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
+    resolution: {integrity: sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.0':
+    resolution: {integrity: sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/typography@0.5.19':
+    resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
+  '@tailwindcss/vite@4.3.0':
+    resolution: {integrity: sha512-t6J3OrB5Fc0ExuhohouH0fWUGMYL6PTLhW+E7zIk/pdbnJARZDCwjBznFnkh5ynRnIRSI4YjtTH0t6USjJISrw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
+  '@takumi-rs/core@2.0.0-beta.12':
+    resolution: {integrity: sha512-yLpGbArfVXyuCeZhGPFQXk3pdBVFPKJX86CPXI9uKTEEoJLlGLgCYr24Oo3pzpewDoBQD6jLnSUjIC2uw3uZgQ==}
+    engines: {node: '>=18'}
+
+  '@takumi-rs/helpers@2.0.0-beta.12':
+    resolution: {integrity: sha512-7cKNdy1jedIDZBy2TWUF4+blmAe/3/fA4qiW02HlX/Dys7Wg+7Buae8FXlkGFC2YOc953UmJiJe6PUY9bXh9LQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  '@takumi-rs/image-response@2.0.0-beta.12':
+    resolution: {integrity: sha512-nzPWTI67V80KcAfwEYF6CJCpw8z+9gHyc2U9kgTmwaewK1ZMDMiT3vFozQc/BojAF7KWdQD/56G/JovOQhKpEA==}
+    engines: {node: '>=18'}
+
+  '@takumi-rs/wasm@2.0.0-beta.12':
+    resolution: {integrity: sha512-nxQCULooDk4+x3LHrbZhbHC5/hfFaKFeK8+QIFoXeI05OBlsBSkQCGXT7AFlT/6/howw+/8A/QmGOcNi5yk6tg==}
+    engines: {node: '>=18'}
+
+  '@tanstack/ai-anthropic@0.10.1':
+    resolution: {integrity: sha512-D0Jfja8sggG/UmvGEmfjC7SOKMXzW35LB8uxPKh0Icb0dyRbOzaTWgdhJjFW9SaXRtyC2mn+Sl1qi1fMtF8sKA==}
+    peerDependencies:
+      '@tanstack/ai': ^0.20.1
+      zod: ^4.0.0
+
+  '@tanstack/ai-client@0.11.3':
+    resolution: {integrity: sha512-mUjKdbMIjNg9AcxsFi2YgT75oWBajZI9KJn4AzseWJwWxoVdZItmZZ1yyuFKMPJHy8LmB6H7XwWcPZbigjNazw==}
+
+  '@tanstack/ai-event-client@0.3.6':
+    resolution: {integrity: sha512-hqjdzj0eNaej5I+skPv2v4Tdg3F0+1tUmopuFVcPEb8kMX3zlvTCmN4R9symFJavW43ApVboVrL3G+7Sl4Iq9A==}
+    peerDependencies:
+      '@tanstack/ai': 0.20.1
+
+  '@tanstack/ai-openai@0.9.5':
+    resolution: {integrity: sha512-kS7uMolmbDEi32vo+1Qh1gs1+kxhMDb1m883XX2/q8K8Gn635cfXiu5DRHeDVJPwKSYgwOYFum4SwixTnI/j0A==}
+    peerDependencies:
+      '@tanstack/ai': ^0.20.1
+      '@tanstack/ai-client': ^0.11.3
+      zod: ^4.0.0
+
+  '@tanstack/ai-utils@0.2.0':
+    resolution: {integrity: sha512-ttFkUEg60sAUHPZZ9bwDuJS0K2pcI6JLpRcJS7FAiqD3+h3CtJZaF38eWG5nBy1w6fJ9zfaG7ExZf2AQpcyzDw==}
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
-    resolution: {integrity: sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
+  '@tanstack/ai@0.20.1':
+    resolution: {integrity: sha512-cv+OiqeDjtvt1WOw7VlY3V5LODBvMHhFGv0+hxgr8Wj4n0c29mI8IEja2490kS1PAaYuq92FQKVVX1PxEM/VCg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.9.0'
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
-    resolution: {integrity: sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
-      - tslib
+  '@tanstack/create@0.68.4':
+    resolution: {integrity: sha512-LJ4eGQQPxyh88rEfod21P2HSAnlNFLVxlCw5GphhTBgzQTTw1FUA86N1VnIrI8h7LofDY4LfP0X84KVavXZKxQ==}
+    engines: {node: '>=20'}
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
-    resolution: {integrity: sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
+  '@tanstack/devtools-client@0.0.6':
+    resolution: {integrity: sha512-f85ZJXJnDIFOoykG/BFIixuAevJovCvJF391LPs6YjBAPhGYC50NWlx1y4iF/UmK5/cCMx+/JqI5SBOz7FanQQ==}
+    engines: {node: '>=18'}
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
-    resolution: {integrity: sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
+  '@tanstack/devtools-event-bus@0.4.1':
+    resolution: {integrity: sha512-cNnJ89Q021Zf883rlbBTfsaxTfi2r73/qejGtyTa7ksErF3hyDyAq1aTbo5crK9dAL7zSHh9viKY1BtMls1QOA==}
+    engines: {node: '>=18'}
 
-  '@tailwindcss/oxide@4.1.11':
-    resolution: {integrity: sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==}
-    engines: {node: '>= 10'}
+  '@tanstack/devtools-event-client@0.4.3':
+    resolution: {integrity: sha512-OZI6QyULw0FI0wjgmeYzCIfbgPsOEzwJtCpa69XrfLMtNXLGnz3d/dIabk7frg0TmHo+Ah49w5I4KC7Tufwsvw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  '@tanstack/devtools-ui@0.5.2':
+    resolution: {integrity: sha512-GtaMk8kaGZ9ZdR8Pu5RAfcse/ZrxzH/xsAIFtHMapLs2VMqSPFfb1NvIDO1MAAfUcub8Ix8XKQEP0uYSPzoFKw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      solid-js: '>=1.9.7'
 
-  '@tailwindcss/typography@0.5.13':
-    resolution: {integrity: sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==}
+  '@tanstack/devtools-vite@0.7.0':
+    resolution: {integrity: sha512-VXki7K+Xwnpo3IKdNSWGe7YOvtZv33YlulGqaQ+YCpeQhYg8JFuxP50BXibDoRLj5EOX4r21Hs7COdxbRHXkTw==}
+    engines: {node: '>=18'}
+    hasBin: true
     peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  '@tailwindcss/vite@4.1.11':
-    resolution: {integrity: sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==}
+  '@tanstack/devtools@0.12.2':
+    resolution: {integrity: sha512-Xdl8pLzoDUvXaclQ0poY36WAPx0jEHk8vqUFd8FYFUm1BMshtB7RnTgD1HE9jCAXODxqw9I0gXBiUZLK3o3+Bw==}
+    engines: {node: '>=18'}
+    hasBin: true
     peerDependencies:
-      vite: ^5.2.0 || ^6 || ^7
+      solid-js: '>=1.9.7'
 
-  '@tanstack/cta-engine@0.47.0':
-    resolution: {integrity: sha512-5fLHdsAw/Kwk6XlmV06eF5UPUVyZk3kJzgkpsR/rP2BKWXFxQ7qebl1nSZxO16MCZRzR3j4WjI/+zRhR1Jis2Q==}
+  '@tanstack/highlight@0.0.3':
+    resolution: {integrity: sha512-U+4VEcxpRH1hazU9DHkeK31+O3V3pjU71UUNzTs+C4w2PtVsC5hDcnxbJxMC+fCvl9aLJGEIPc78Uw4tpd6mUw==}
 
-  '@tanstack/cta-framework-react-cra@0.47.0':
-    resolution: {integrity: sha512-37wTTJ3HVqGPbewil3GYF0ntRluvnZ1Rn91smJTsYbn9BBn7QpytKB7iPo7VzHpSImJjLP1MGh92JUyzKbpURA==}
+  '@tanstack/history@1.162.0':
+    resolution: {integrity: sha512-79pf/RkhteYZTRgcR4F9kbk84P2N8rugQJswxfIqovlbRiT3yI7eBE+5QorIrZaOKktsgzRlXh1l/du/xpl4iA==}
+    engines: {node: '>=20.19'}
 
-  '@tanstack/cta-ui-base@0.47.0':
-    resolution: {integrity: sha512-W7Da5EQGnNVuKfAjhI33qiCCUMB+iZH4z49zFKDkyfas1+Iz5j2I0Ade2saAtoyZna0xHRLA0Q6FgDP7X5CH9Q==}
+  '@tanstack/hotkeys@0.8.0':
+    resolution: {integrity: sha512-vqH7X9nb0MTJ/O08++dB5bP9jgj4+BIPOUu/U+6myG86lDsirZSVSobpq5UQpE7nBuk62i8eIYeOhd+OMl/UrA==}
+    engines: {node: '>=18'}
+
+  '@tanstack/markdown@0.0.9':
+    resolution: {integrity: sha512-vUqLs9YmmU3W/EHssxvCg2OQmeEkpvBfY2adpgQ0I5lfRdoEVRn+3+ZuLuMEgsypVECwotHndYpk+qIqtcfi1w==}
+    peerDependencies:
+      octane: '>=0.1.12'
+      react: '>=18'
+    peerDependenciesMeta:
+      octane:
+        optional: true
+      react:
+        optional: true
 
-  '@tanstack/cta-ui@0.47.0':
-    resolution: {integrity: sha512-oOAatxwuvYjvj5MsA3mCbeDbP30+cSq4DEC24QFDgXZMgxBYT7aX3assLs3De4M1B7l4IkJr2p3qiHENaTNNxg==}
+  '@tanstack/openai-base@0.3.4':
+    resolution: {integrity: sha512-AhNGgbpuMFVQB9zDuSPA5+x4twjc1Q3ql28T9XVZvGldTwOFYJbAmQ0pnQXcbumM+3Cgius2PylDJ6AxK72YTQ==}
+    peerDependencies:
+      '@tanstack/ai': ^0.20.1
 
-  '@tanstack/devtools-event-client@0.3.5':
-    resolution: {integrity: sha512-RL1f5ZlfZMpghrCIdzl6mLOFLTuhqmPNblZgBaeKfdtk5rfbjykurv+VfYydOFXj0vxVIoA2d/zT7xfD7Ph8fw==}
+  '@tanstack/pacer@0.21.1':
+    resolution: {integrity: sha512-hB01dd4rlsYcTCNP7wK186jgAe6K5qimgM1Y5Jtvz+9PUaILvpmeLLjmQNUNSO1l23lIt+CeQR6mO1mjlPvRtQ==}
     engines: {node: '>=18'}
 
-  '@tanstack/directive-functions-plugin@1.141.0':
-    resolution: {integrity: sha512-Ca8ylyh2c100Kn9nFUA4Gao95eISBGLbff+4unJ6MF+t+/FR3awIsIC5gBxeEVu+nv6HPaY9ZeD0/Ehh4OsXpQ==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      vite: '>=6.0.0 || >=7.0.0'
+  '@tanstack/query-core@5.100.11':
+    resolution: {integrity: sha512-lmE0994apShXPj8CUxgx4ch5yUJhE9k/+tVwihBvPOyerACWdBocfFg24t8+0RhtlTd7tEgchDkhlCxNssvDxw==}
 
-  '@tanstack/history@1.141.0':
-    resolution: {integrity: sha512-LS54XNyxyTs5m/pl1lkwlg7uZM3lvsv2FIIV1rsJgnfwVCnI+n4ZGZ2CcjNT13BPu/3hPP+iHmliBSscJxW5FQ==}
-    engines: {node: '>=12'}
+  '@tanstack/query-devtools@5.100.11':
+    resolution: {integrity: sha512-47rVBDuGMW/A4ekt3YQdz+q0JSIwktwGnWCYyQUvSs2/g/Oa+6Fi2/IQk4/Y4vf6u1uwI7hOogHslgMC8f3X/Q==}
 
-  '@tanstack/pacer@0.16.4':
-    resolution: {integrity: sha512-dqd6p1JK6iucOhJSOA1/VCvT46kZDoem/l/xcYtQpG4Ygxl8xzSW69oMk0bTSh+cAvFXDCrXn3wlS7Otir/fsA==}
+  '@tanstack/react-devtools@0.10.5':
+    resolution: {integrity: sha512-orVsRJ7oAXFb7oyafQCgx9YuK44jpILh5T/ddYuxAsolNfN5DZBr5/NLrWErD7HCGIzvYzg1TZI4sPxmiKvtvA==}
     engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      '@types/react-dom': '>=16.8'
+      react: '>=16.8'
+      react-dom: '>=16.8'
 
-  '@tanstack/query-core@5.90.12':
-    resolution: {integrity: sha512-T1/8t5DhV/SisWjDnaiU2drl6ySvsHj1bHBCWNXd+/T+Hh1cf6JodyEYMd5sgwm+b/mETT4EV3H+zCVczCU5hg==}
+  '@tanstack/react-hotkeys@0.10.0':
+    resolution: {integrity: sha512-GwOSndI5j3qBVYTmgP1mYyRTnlxb2MS17cwGlsavSxMQPSnmDf+m3LzMIpRMs+3zzQMjg3cYhHsFYizYlFI2tw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
 
-  '@tanstack/react-pacer@0.17.4':
-    resolution: {integrity: sha512-VdHuN+FkdKwPMD2uuO0qb04CBMOci68CeciQCTASA5Tmts9uxiSHIJEM+ABh/s4pSEdMKM/GI6sFWDNwwCf6yA==}
+  '@tanstack/react-pacer@0.22.1':
+    resolution: {integrity: sha512-CenQqK0GluSPIrnsG1yuD7w5uMSQ/4lI9AcGEFxBrRd66r260boWcYRIsS5+eHtXb238FoZYhKmJPGlhRzmHRw==}
     engines: {node: '>=18'}
     peerDependencies:
       react: '>=16.8'
       react-dom: '>=16.8'
 
-  '@tanstack/react-query@5.90.12':
-    resolution: {integrity: sha512-graRZspg7EoEaw0a8faiUASCyJrqjKPdqJ9EwuDRUF9mEYJ1YPczI9H+/agJ0mOJkPCJDk0lsz5QTrLZ/jQ2rg==}
+  '@tanstack/react-query-devtools@5.100.11':
+    resolution: {integrity: sha512-75RFlJEG53Ed/Cxe5WLmgIpOElPNpgLZq7h0fLFnM5XwTYxSTk1rX/gC6MqGVXsSdrbP7zn7hPSJx9MinwiUHA==}
     peerDependencies:
+      '@tanstack/react-query': ^5.100.11
       react: ^18 || ^19
 
-  '@tanstack/react-router-devtools@1.141.6':
-    resolution: {integrity: sha512-Uzb8GKg5Om8mCw2WjdDW1VBpyF+iaYOO/HK0ELbWO+TC6Nn/9pbbku/3HCMKHeLkmKPaMSW92do4Hu0bDYVglg==}
-    engines: {node: '>=12'}
+  '@tanstack/react-query@5.100.11':
+    resolution: {integrity: sha512-J0f9s5x3LE1450nNNfYx+e/n0DMa0uOBdFJUy5r0RvmsXd4nB/n0rbHtHI1vYXhikNFan+wf51p6Tmp4c8ucrg==}
     peerDependencies:
-      '@tanstack/react-router': ^1.141.6
-      '@tanstack/router-core': ^1.141.6
+      react: ^18 || ^19
+
+  '@tanstack/react-router-devtools@1.167.0':
+    resolution: {integrity: sha512-nGw095EG7IHx0h5NtlEmzf6vcCTaFNPWdTSuDKazajhN0ct/v/TkekJ9J6KYUCeV1a8/2ZmToc58M+0rrOyn7w==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@tanstack/react-router': ^1.170.0
+      '@tanstack/router-core': ^1.170.0
       react: '>=18.0.0 || >=19.0.0'
       react-dom: '>=18.0.0 || >=19.0.0'
     peerDependenciesMeta:
       '@tanstack/router-core':
         optional: true
 
-  '@tanstack/react-router-ssr-query@1.141.6':
-    resolution: {integrity: sha512-kdSnBAo8MnQvxabtAK0X/Z6vMW8pvr1woGznqCA0FgwPll4qbeN7k/nnSe3tZuxabqdT1PKz9TVjD+3RXxCAew==}
-    engines: {node: '>=12'}
+  '@tanstack/react-router-ssr-query@1.167.1':
+    resolution: {integrity: sha512-W9j5JPnBikyafvuUfykFfHIWod58OAbAAa5leNkXBcoDoocghMmu6w9uZOmUZvAWT7CSvgj5tBUtF7CM2OoHXQ==}
+    engines: {node: '>=20.19'}
     peerDependencies:
       '@tanstack/query-core': '>=5.90.0'
       '@tanstack/react-query': '>=5.90.0'
@@ -3334,44 +3416,69 @@ packages:
       react: '>=18.0.0 || >=19.0.0'
       react-dom: '>=18.0.0 || >=19.0.0'
 
-  '@tanstack/react-router@1.141.6':
-    resolution: {integrity: sha512-qWFxi2D6eGc1L03RzUuhyEOplZ7Q6q62YOl7Of9Y0q4YjwQwxRm4zxwDVtvUIoy4RLVCpqp5UoE+Nxv2PY9trg==}
-    engines: {node: '>=12'}
+  '@tanstack/react-router@1.170.16':
+    resolution: {integrity: sha512-w6eq1IJklujs1tESazaK/FxH0+H2l8vm/QPuu1cD3oRW/ubgKneQpd7b64ti/8gUyEimzimJQZDmJr6YHfP5+g==}
+    engines: {node: '>=20.19'}
     peerDependencies:
       react: '>=18.0.0 || >=19.0.0'
       react-dom: '>=18.0.0 || >=19.0.0'
 
-  '@tanstack/react-router@1.141.8':
-    resolution: {integrity: sha512-kPHeS3dF2kBBvFglRpGrHWKnlu6wmUpa7C6aKakI10d7vP+l42XNqe6ARl+9KwX5ujMgCvZ7lgknbZy5L2wiFA==}
-    engines: {node: '>=12'}
+  '@tanstack/react-start-client@1.168.14':
+    resolution: {integrity: sha512-oaz43fdOhBWfOPsdLkp3IejwYEXRyeaZ4CYexOPZx3eVXzm4LLozvNkkkBE9aje1sM5MVC2Yo6+cyv2HdVzkHQ==}
+    engines: {node: '>=22.12.0'}
     peerDependencies:
       react: '>=18.0.0 || >=19.0.0'
       react-dom: '>=18.0.0 || >=19.0.0'
 
-  '@tanstack/react-start-client@1.141.8':
-    resolution: {integrity: sha512-TDLLhwUxrFx3kiepmuFil+BRXc5z+6yTHQ1rNqn08CP/qWZTpwPXtbtAWkLiWyJvltb6fUAjhEk/Dikfyq+23A==}
+  '@tanstack/react-start-rsc@0.1.25':
+    resolution: {integrity: sha512-Rwm6cjcS148y2XAebr8jyrwU0SqsRSkW4/CuXesoHg+G3IOnVRHV0HOylJfnznUTVuH1nVhfQRPI5uWPJaw2TA==}
     engines: {node: '>=22.12.0'}
     peerDependencies:
+      '@rspack/core': '>=2.0.0-0'
+      '@vitejs/plugin-rsc': '>=0.5.20'
       react: '>=18.0.0 || >=19.0.0'
       react-dom: '>=18.0.0 || >=19.0.0'
+      react-server-dom-rspack: '>=0.0.2'
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      '@vitejs/plugin-rsc':
+        optional: true
+      react-server-dom-rspack:
+        optional: true
 
-  '@tanstack/react-start-server@1.141.8':
-    resolution: {integrity: sha512-ZK3ov4qeId0T/Us0rJt4HtvS5tlOXTV9pWa7lBJred5z5eI0lgS9blfTBtqtY1fLoplnGgjw7lBIUbSDcWmtPQ==}
+  '@tanstack/react-start-server@1.167.20':
+    resolution: {integrity: sha512-hg9xVI6yNDu+6NCalKz1h3Ea18HZEUu35i/ZMJz1WadwqcArLMp41nM1GNhOAtGIdpycrp9tT7ccqc9zuRMRpQ==}
     engines: {node: '>=22.12.0'}
     peerDependencies:
       react: '>=18.0.0 || >=19.0.0'
       react-dom: '>=18.0.0 || >=19.0.0'
 
-  '@tanstack/react-start@1.141.8':
-    resolution: {integrity: sha512-nfTUdXcUa5GERfwf+iYAPykTYLSc3L8cix4gOoIfV/IV+xSmsN/R5KUw57FKa8i25wCpVqtEGpj8QorIZ4PnMw==}
+  '@tanstack/react-start@1.168.26':
+    resolution: {integrity: sha512-ZzNecqKWC0p2643/kIcFUdsMrXZ8A4dXm4Yfe9zV/Y0u14MtSkh/Sk76RQYIU5S84VyDyKhHo0Ffh8HQbLdvFw==}
     engines: {node: '>=22.12.0'}
     peerDependencies:
+      '@rsbuild/core': ^2.0.0
+      '@vitejs/plugin-rsc': '*'
       react: '>=18.0.0 || >=19.0.0'
       react-dom: '>=18.0.0 || >=19.0.0'
       vite: '>=7.0.0'
+    peerDependenciesMeta:
+      '@rsbuild/core':
+        optional: true
+      '@vitejs/plugin-rsc':
+        optional: true
+      vite:
+        optional: true
+
+  '@tanstack/react-store@0.11.0':
+    resolution: {integrity: sha512-tX4YXh3PDkmpvGQWkWqKpzs/MSqbtuwY9dWdWhtV9Q50PmO+jOkUKIWIX4G85dwt7lxdHLXsiaEKPdKmC8F41w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@tanstack/react-store@0.8.0':
-    resolution: {integrity: sha512-1vG9beLIuB7q69skxK9r5xiLN3ztzIPfSQSs0GfeqWGO2tGIyInZx0x1COhpx97RKaONSoAb8C3dxacWksm1ow==}
+  '@tanstack/react-store@0.9.3':
+    resolution: {integrity: sha512-y2iHd/N9OkoQbFJLUX1T9vbc2O9tjH0pQRgTcx1/Nz4IlwLvkgpuglXUx+mXt0g5ZDFrEeDnONPqkbfxXJKwRg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -3383,37 +3490,40 @@ packages:
       react: '>=16.8'
       react-dom: '>=16.8'
 
-  '@tanstack/router-core@1.141.6':
-    resolution: {integrity: sha512-AqH61axLq2xFaM+B0veGQ4OOzMzr2Ih+qXzBmGRy5e0wMJkr1efPZXLF0K7nEjF++bmL/excew2Br6v9xrZ/5g==}
-    engines: {node: '>=12'}
+  '@tanstack/redact@0.0.18':
+    resolution: {integrity: sha512-8HV0qg2fCQRb5Avqy+wG6dMgKKojyLdNo42h3E9FQqwj+VYnEkdkGFS7FO1Ig9T9zkNc8SlwRoDEEkdFhIAvlg==}
+    peerDependencies:
+      vite: '>=5'
+    peerDependenciesMeta:
+      vite:
+        optional: true
 
-  '@tanstack/router-core@1.141.8':
-    resolution: {integrity: sha512-/wuEk6/FzzpSC3hkWFE0SU3+eunmLQdzp91MqrPQOOLKnJJb/KgUH8nn0UA3RPdr4y7vLmnzvsUOzrjrEpwYAA==}
-    engines: {node: '>=12'}
+  '@tanstack/router-core@1.171.13':
+    resolution: {integrity: sha512-+NOwEj1kO/6IGmpHRIZHasYxYWpyBQGNIZAST9aNrk9Q3YlU9SgqVnl1pbLa9qAKfeNdXQIRve0RQb/0kyDeDA==}
+    engines: {node: '>=20.19'}
 
-  '@tanstack/router-devtools-core@1.141.6':
-    resolution: {integrity: sha512-+qzAw16ELQWyj4bTX3zOIZDqGsq+AM6cRn1fp8/nzvw++TvN62k4hHAiRQn4EU+R03qjRUCE9315jzAf9Amslw==}
-    engines: {node: '>=12'}
+  '@tanstack/router-devtools-core@1.168.0':
+    resolution: {integrity: sha512-wQoQhlBK7nlZgqzaqdYXKWNTpdHdsaREdaPhFZVH0/Ador+F+eM3/NF2i3f2LPeS0GgKraZUQXe1Q/1+KHyEYg==}
+    engines: {node: '>=20.19'}
     peerDependencies:
-      '@tanstack/router-core': ^1.141.6
+      '@tanstack/router-core': ^1.170.0
       csstype: ^3.0.10
-      solid-js: '>=1.9.5'
     peerDependenciesMeta:
       csstype:
         optional: true
 
-  '@tanstack/router-generator@1.141.8':
-    resolution: {integrity: sha512-vFgfJT12CIFL6Iv2niC+2OeLooth6rgUJ4V/C6EZi5uOZR5kamMw41NgcINTDhNt5USsqYc0vmCM62oroFcMbA==}
-    engines: {node: '>=12'}
+  '@tanstack/router-generator@1.167.17':
+    resolution: {integrity: sha512-xtB9tB2Ws0tWR6Pi7nc3Qk9IYgoh1mQCKWjHqIl9tf6BNUpKoqniJoPAQ4+LGrK8FeZYU0o0p/qlZEyj9FAulA==}
+    engines: {node: '>=20.19'}
 
-  '@tanstack/router-plugin@1.141.8':
-    resolution: {integrity: sha512-kdm2CJb/HFgXiZG2qdV2XMB+RqcYypXBKmaVtz7uC6qpeglPcioxGcsASCLz0h8JGnq2ajFRPNVIxmRnwKREYA==}
-    engines: {node: '>=12'}
+  '@tanstack/router-plugin@1.168.18':
+    resolution: {integrity: sha512-MofS28/axfnfnhOD2RSgJEaU882aX5RsAzhGz5Vc4XhAmvCjy919u9JrNs4QsTWFbTD1P7IJ8WFlFVsrg0pStg==}
+    engines: {node: '>=20.19'}
     peerDependencies:
-      '@rsbuild/core': '>=1.0.2'
-      '@tanstack/react-router': ^1.141.8
-      vite: '>=5.0.0 || >=6.0.0 || >=7.0.0'
-      vite-plugin-solid: ^2.11.10
+      '@rsbuild/core': '>=1.0.2 || ^2.0.0'
+      '@tanstack/react-router': ^1.170.15
+      vite: '>=5.0.0 || >=6.0.0 || >=7.0.0 || >=8.0.0'
+      vite-plugin-solid: ^2.11.10 || ^3.0.0-0
       webpack: '>=5.92.0'
     peerDependenciesMeta:
       '@rsbuild/core':
@@ -3427,76 +3537,86 @@ packages:
       webpack:
         optional: true
 
-  '@tanstack/router-ssr-query-core@1.141.6':
-    resolution: {integrity: sha512-Eg1ytbJUs7213LlKiektBNm9eiSD5/nK6NzNVAXi5LCyfI+QUyEsJvrsm2q7wV7Aas0twSYzS/kKZQIpxYS2XA==}
-    engines: {node: '>=12'}
+  '@tanstack/router-ssr-query-core@1.169.1':
+    resolution: {integrity: sha512-rngux8s/3mPQzcjLYDLkNU31coYVyCgrVTfpdwqUdY5jIEHqGTXrO73DTkPR1PppwYUeVhmNCgl8TctRcnupjg==}
+    engines: {node: '>=20.19'}
     peerDependencies:
       '@tanstack/query-core': '>=5.90.0'
       '@tanstack/router-core': '>=1.127.0'
 
-  '@tanstack/router-utils@1.141.0':
-    resolution: {integrity: sha512-/eFGKCiix1SvjxwgzrmH4pHjMiMxc+GA4nIbgEkG2RdAJqyxLcRhd7RPLG0/LZaJ7d0ad3jrtRqsHLv2152Vbw==}
-    engines: {node: '>=12'}
+  '@tanstack/router-utils@1.162.2':
+    resolution: {integrity: sha512-hTWqJtqIFFdvuCl8WXNyrodp2L9zo2G37xKRrcVmVRWpAB2h+U1LuRAfS4tsFTiWOIoE/B+WDVFB8JpoEdw6jQ==}
+    engines: {node: '>=20.19'}
 
-  '@tanstack/server-functions-plugin@1.141.3':
-    resolution: {integrity: sha512-yHgVvw6mYwINyv2wGjCnk9Dw5yfsyGu5bAIptr3v6E9dByRVo3KexXhtxNM3vj++YEHYMQSbgCoxiVKp9cu5Iw==}
-    engines: {node: '>=12'}
+  '@tanstack/start-client-core@1.170.12':
+    resolution: {integrity: sha512-gwtZRMPUIAxmDV2AIQUhC0kSW262SV7BkHXEgy5B1woHQdrdsELuGOdJwdweLxrjyefORxk+9MYGqDY0Cxn0bw==}
+    engines: {node: '>=22.12.0'}
 
-  '@tanstack/start-client-core@1.141.8':
-    resolution: {integrity: sha512-WQNoCHtbv0wISR5O30MQyLl4hCAdB41LSwSvqX1ruZ6sJIdCz5716seDuFCCXjZ/H7K9fZd/+vTflIQsPGgHYg==}
+  '@tanstack/start-fn-stubs@1.162.0':
+    resolution: {integrity: sha512-QWfUZ3Yo923tdQn38LyKMU8rcTw69zc+T4dAvgTWV4O56SqFRsGfS0lSWIMhJRwXIx/bvdi7nTUBDdZtTHtpTQ==}
     engines: {node: '>=22.12.0'}
 
-  '@tanstack/start-plugin-core@1.141.8':
-    resolution: {integrity: sha512-7EO+eqBtQ7AoRmvBF3bFWS2nCRpQ6DG0gfITLPVeL3/00pTKXGHF4L4cHz84jRqx+7dvB1WnUq47/vIG/aCmOg==}
+  '@tanstack/start-plugin-core@1.171.18':
+    resolution: {integrity: sha512-weuOOjRD03BiKcF9NYKL5QADEQOp3yGHb0qIsOX42ENz5XUE4in2fXcVYHjSwwpzs+XGhWIFLp5J385pOVPuZQ==}
     engines: {node: '>=22.12.0'}
     peerDependencies:
+      '@rsbuild/core': ^2.0.0
       vite: '>=7.0.0'
+    peerDependenciesMeta:
+      '@rsbuild/core':
+        optional: true
+      vite:
+        optional: true
 
-  '@tanstack/start-server-core@1.141.8':
-    resolution: {integrity: sha512-mfrTzmVAC0XFdWtyfkfJMiYosMcvTsJiqNRg9/WhSM41+Mx5wOeV4QoveJv5ufjojiQQW3+/YSDdlfkYi3sfzA==}
+  '@tanstack/start-server-core@1.169.15':
+    resolution: {integrity: sha512-V8ie2G2Ecb3Nklk8/QuKzulxb+tDUqgz6rjJe8Isdp4iKVXZu/TscItkUP/4Q5Bu7W4gUy3P25O6soC1oW1SXQ==}
     engines: {node: '>=22.12.0'}
 
-  '@tanstack/start-storage-context@1.141.8':
-    resolution: {integrity: sha512-cuV8Mn9aiIBH47PlvSHYKyHx0+kYL5+JTzQ6JBEf5gsh5Wzhb2G23V2EDhoiJm0Itv/1+TvkaaGGarTssnr75Q==}
+  '@tanstack/start-storage-context@1.167.15':
+    resolution: {integrity: sha512-Jy0q4vdG6pv76N92+X+ag3fuOV2zINQagYyMN1/es7tPI1vzpKECIU8AqHqzI6ahkwaph7XDvmfUkiLJ3i4LOA==}
     engines: {node: '>=22.12.0'}
 
-  '@tanstack/store@0.8.0':
-    resolution: {integrity: sha512-Om+BO0YfMZe//X2z0uLF2j+75nQga6TpTJgLJQBiq85aOyZNIhkCgleNcud2KQg4k4v9Y9l+Uhru3qWMPGTOzQ==}
+  '@tanstack/store@0.11.0':
+    resolution: {integrity: sha512-WlzzCt3xi0G6pCAJu1U+2jiECwabETDpQDi3hfkFZvJii9AuZqEKbOiVarX1/bWhTNjU486yQtJCCasi/0q+Cw==}
+
+  '@tanstack/store@0.9.3':
+    resolution: {integrity: sha512-8reSzl/qGWGGVKhBoxXPMWzATSbZLZFWhwBAFO9NAyp0TxzfBP0mIrGb8CP8KrQTmvzXlR/vFPPUrHTLBGyFyw==}
 
   '@tanstack/table-core@8.21.3':
     resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
     engines: {node: '>=12'}
 
-  '@tanstack/virtual-file-routes@1.141.0':
-    resolution: {integrity: sha512-CJrWtr6L9TVzEImm9S7dQINx+xJcYP/aDkIi6gnaWtIgbZs1pnzsE0yJc2noqXZ+yAOqLx3TBGpBEs9tS0P9/A==}
-    engines: {node: '>=12'}
-
-  '@tweenjs/tween.js@23.1.3':
-    resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
+  '@tanstack/virtual-file-routes@1.162.0':
+    resolution: {integrity: sha512-uhOeFyxLcU41HzvrxsGpiWdcMbScY1EDgbZ5K7DVRMYInbLYWAC0EA/kx9wXAoSM8q82bUG2hRl8+EAjE6XAbA==}
+    engines: {node: '>=20.19'}
 
-  '@types/babel__core@7.20.5':
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+  '@tanstack/workflow-core@0.0.4':
+    resolution: {integrity: sha512-Ytl8uF1v+xKDCez1P7Qcfoe6OZ2HskQzfey8Kci5h83UoEOt8azi/KmfrkrE28ev46QPSqkOn4tTLvILgCi67w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@opentelemetry/api': ^1.9.0
 
-  '@types/babel__generator@7.6.8':
-    resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
+  '@tanstack/workflow-runtime@0.0.3':
+    resolution: {integrity: sha512-U2IRw+sednNI7kqG301o6RBrgAB7zob9uDjcsVr5RPQPjIWHk2a9tAJkVYQKCCWUbE6L37GW+Pl8nU2HqIISRQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@opentelemetry/api': ^1.9.0
 
-  '@types/babel__template@7.4.4':
-    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+  '@tanstack/workflow-store-drizzle-postgres@0.0.5':
+    resolution: {integrity: sha512-f7t5gI56Cy4hucnuY0hA1W5tKCjH1gKtQ+xX3uRX8/GDK5AeMIaGw4pL/YxiRwHFZYPxYppkTFmbb3i8z17g6w==}
+    engines: {node: '>=18'}
 
-  '@types/babel__traverse@7.20.6':
-    resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
+  '@tweenjs/tween.js@23.1.3':
+    resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
 
-  '@types/body-parser@1.19.6':
-    resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
+  '@tybys/wasm-util@0.10.1':
+    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
-  '@types/cookie@0.6.0':
-    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
-
-  '@types/d3-array@3.2.1':
-    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
 
   '@types/d3-axis@3.0.6':
     resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
@@ -3516,8 +3636,8 @@ packages:
   '@types/d3-delaunay@6.0.4':
     resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
 
-  '@types/d3-dispatch@3.0.6':
-    resolution: {integrity: sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==}
+  '@types/d3-dispatch@3.0.7':
+    resolution: {integrity: sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==}
 
   '@types/d3-drag@3.0.7':
     resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
@@ -3540,8 +3660,11 @@ packages:
   '@types/d3-geo@3.1.0':
     resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
 
-  '@types/d3-hierarchy@1.1.10':
-    resolution: {integrity: sha512-fx/z6fn+xRhyBfD5AIRj4Xj0rdZc/v+89w1rRacQdPh6wNd7XijqC2zalbLjeODxkDMB+Pls07xpcKwWq9nMQw==}
+  '@types/d3-hierarchy@1.1.11':
+    resolution: {integrity: sha512-lnQiU7jV+Gyk9oQYk0GGYccuexmQPTp08E0+4BidgFdiJivjEvf+esPSdZqCZ2C7UwTWejWpqetVaU8A+eX3FA==}
+
+  '@types/d3-hierarchy@3.1.7':
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
 
   '@types/d3-interpolate@3.0.4':
     resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
@@ -3567,8 +3690,8 @@ packages:
   '@types/d3-selection@3.0.11':
     resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
 
-  '@types/d3-shape@3.1.7':
-    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+  '@types/d3-shape@3.1.8':
+    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
 
   '@types/d3-time-format@4.0.3':
     resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
@@ -3588,8 +3711,8 @@ packages:
   '@types/d3@7.4.3':
     resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
 
-  '@types/debug@4.1.12':
-    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+  '@types/debug@4.1.13':
+    resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
 
   '@types/dom-speech-recognition@0.0.1':
     resolution: {integrity: sha512-udCxb8DvjcDKfk1WTBzDsxFbLgYxmQGKrE/ricoMqHRNjSlSUCcamVTA5lIQqzY10mY5qCY0QDwBfFEwhfoDPw==}
@@ -3597,15 +3720,12 @@ packages:
   '@types/draco3d@1.4.10':
     resolution: {integrity: sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==}
 
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
-  '@types/express-serve-static-core@5.1.1':
-    resolution: {integrity: sha512-v4zIMr/cX7/d2BpAEX3KNKL/JrT1s43s96lLvvdTmza1oEvDudCqK9aF/djc/SWgy8Yh0h30TZx5VpzqFCxk5A==}
-
-  '@types/express@5.0.6':
-    resolution: {integrity: sha512-sKYVuV7Sv9fbPIt/442koC7+IIwK5olP1KWeD88e/idgoJqDm3JV/YUiPwkoKK92ylff2MGxSz1CSjsXelx0YA==}
-
   '@types/geojson@7946.0.16':
     resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
 
@@ -3618,15 +3738,6 @@ packages:
   '@types/hogan.js@3.0.5':
     resolution: {integrity: sha512-/uRaY3HGPWyLqOyhgvW9Aa43BNnLZrNeQxl2p8wqId4UHMfPKolSB+U7BlZyO1ng7MkLnyEAItsBzCG0SDhqrA==}
 
-  '@types/http-errors@2.0.5':
-    resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==}
-
-  '@types/json-schema@7.0.15':
-    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
-
-  '@types/lodash@4.14.200':
-    resolution: {integrity: sha512-YI/M/4HRImtNf3pJgbF+W6FrXovqj+T+/HpENLTooK9PnkacBsDpeP3IpHab40CClUfhNmdM2WTNP2sa2dni5Q==}
-
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -3636,35 +3747,23 @@ packages:
   '@types/mysql@2.15.27':
     resolution: {integrity: sha512-YfWiV16IY0OeBfBCk8+hXKmdTKrKlwKN1MNKAPBu5JYxLwBEZl7QzeEpGnlZb3VMGJrrGmB84gXiH+ofs/TezA==}
 
-  '@types/node@22.19.3':
-    resolution: {integrity: sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==}
-
-  '@types/node@24.3.0':
-    resolution: {integrity: sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow==}
-
-  '@types/normalize-package-data@2.4.4':
-    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
+  '@types/node@25.5.0':
+    resolution: {integrity: sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==}
 
   '@types/offscreencanvas@2019.7.3':
     resolution: {integrity: sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==}
 
-  '@types/parse-json@4.0.2':
-    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
-
-  '@types/pg-pool@2.0.6':
-    resolution: {integrity: sha512-TaAUE5rq2VQYxab5Ts7WZhKNmuN78Q6PiFonTDdpbx8a1H0M1vhy3rhiMjl+e2iHmogyMw7jZF4FrE6eJUy5HQ==}
-
-  '@types/pg@8.11.6':
-    resolution: {integrity: sha512-/2WmmBXHLsfRqzfHW7BNZ8SbYzE8OSk7i3WjFYvfgRHj7S1xj+16Je5fUKv3lVdVzk/zn9TXOqf+avFCFIE0yQ==}
+  '@types/pg-pool@2.0.7':
+    resolution: {integrity: sha512-U4CwmGVQcbEuqpyju8/ptOKg6gEC+Tqsvj2xS9o1g71bUh8twxnC6ZL5rZKCsGN0iyH0CwgUyc9VR5owNQF9Ng==}
 
   '@types/pg@8.15.6':
     resolution: {integrity: sha512-NoaMtzhxOrubeL/7UZuNTrejB4MPAJ0RpxZqXQf2qXuVlTPuG6Y8p4u9dKRaue4yjmC7ZhzVO2/Yyyn25znrPQ==}
 
-  '@types/qs@6.9.18':
-    resolution: {integrity: sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==}
+  '@types/pg@8.20.0':
+    resolution: {integrity: sha512-bEPFOaMAHTEP1EzpvHTbmwR8UsFyHSKsRisLIHVMXnpNefSbGA1bD6CVy+qKjGSqmZqNqBDV2azOBo8TgkcVow==}
 
-  '@types/range-parser@1.2.7':
-    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
+  '@types/qs@6.15.0':
+    resolution: {integrity: sha512-JawvT8iBVWpzTrz3EGw9BTQFg3BQNmwERdKE22vlTxawwtbyUSlMppvZYKLZzB5zgACXdXxbD3m1bXaMqP/9ow==}
 
   '@types/react-dom@19.2.3':
     resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
@@ -3676,138 +3775,39 @@ packages:
     peerDependencies:
       '@types/react': '*'
 
-  '@types/react@19.2.5':
-    resolution: {integrity: sha512-keKxkZMqnDicuvFoJbzrhbtdLSPhj/rZThDlKWCDbgXmUg0rEUFtRssDXKYmtXluZlIqiC5VqkCgRwzuyLHKHw==}
+  '@types/react@19.2.14':
+    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
 
   '@types/remove-markdown@0.3.4':
     resolution: {integrity: sha512-i753EH/p02bw7bLlpfS/4CV1rdikbGiLabWyVsAvsFid3cA5RNU1frG7JycgY+NSnFwtoGlElvZVceCytecTDA==}
 
-  '@types/retry@0.12.2':
-    resolution: {integrity: sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==}
-
-  '@types/send@1.2.1':
-    resolution: {integrity: sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==}
-
-  '@types/serve-static@2.2.0':
-    resolution: {integrity: sha512-8mam4H1NHLtu7nmtalF7eyBH14QyOASmcxHhSfEoRyr0nP/YdoesEtU+uSRvMe96TW/HPTtkoKqQLl53N7UXMQ==}
-
   '@types/stats.js@0.17.4':
     resolution: {integrity: sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==}
 
+  '@types/tar-stream@3.1.4':
+    resolution: {integrity: sha512-921gW0+g29mCJX0fRvqeHzBlE/XclDaAG0Ousy1LCghsOhvaKacDeRGEVzQP9IPfKn8Vysy7FEXAIxycpc/CMg==}
+
   '@types/tedious@4.0.14':
     resolution: {integrity: sha512-KHPsfX/FoVbUGbyYvk1q9MMQHLPeRZhRJZdO45Q4YjvFkv4hMNghCWTvy7rdKessBsmtz4euWCWAB6/tVpI1Iw==}
 
-  '@types/three@0.182.0':
-    resolution: {integrity: sha512-WByN9V3Sbwbe2OkWuSGyoqQO8Du6yhYaXtXLoA5FkKTUJorZ+yOHBZ35zUUPQXlAKABZmbYp5oAqpA4RBjtJ/Q==}
-
-  '@types/triple-beam@1.3.5':
-    resolution: {integrity: sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==}
+  '@types/three@0.183.1':
+    resolution: {integrity: sha512-f2Pu5Hrepfgavttdye3PsH5RWyY/AvdZQwIVhrc4uNtvF7nOWJacQKcoVJn0S4f0yYbmAE6AR+ve7xDcuYtMGw==}
 
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
   '@types/webxr@0.5.24':
     resolution: {integrity: sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==}
 
-  '@types/yauzl@2.10.3':
-    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
-
-  '@typescript-eslint/eslint-plugin@8.48.1':
-    resolution: {integrity: sha512-X63hI1bxl5ohelzr0LY5coufyl0LJNthld+abwxpCoo6Gq+hSqhKwci7MUWkXo67mzgUK6YFByhmaHmUcuBJmA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^8.48.1
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/parser@8.48.1':
-    resolution: {integrity: sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/project-service@8.48.1':
-    resolution: {integrity: sha512-HQWSicah4s9z2/HifRPQ6b6R7G+SBx64JlFQpgSSHWPKdvCZX57XCbszg/bapbRsOEv42q5tayTYcEFpACcX1w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/scope-manager@8.48.1':
-    resolution: {integrity: sha512-rj4vWQsytQbLxC5Bf4XwZ0/CKd362DkWMUkviT7DCS057SK64D5lH74sSGzhI6PDD2HCEq02xAP9cX68dYyg1w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/tsconfig-utils@8.48.1':
-    resolution: {integrity: sha512-k0Jhs4CpEffIBm6wPaCXBAD7jxBtrHjrSgtfCjUvPp9AZ78lXKdTR8fxyZO5y4vWNlOvYXRtngSZNSn+H53Jkw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/type-utils@8.48.1':
-    resolution: {integrity: sha512-1jEop81a3LrJQLTf/1VfPQdhIY4PlGDBc/i67EVWObrtvcziysbLN3oReexHOM6N3jyXgCrkBsZpqwH0hiDOQg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/types@8.48.1':
-    resolution: {integrity: sha512-+fZ3LZNeiELGmimrujsDCT4CRIbq5oXdHe7chLiW8qzqyPMnn1puNstCrMNVAqwcl2FdIxkuJ4tOs/RFDBVc/Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/typescript-estree@8.48.1':
-    resolution: {integrity: sha512-/9wQ4PqaefTK6POVTjJaYS0bynCgzh6ClJHGSBj06XEHjkfylzB+A3qvyaXnErEZSaxhIo4YdyBgq6j4RysxDg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/utils@8.48.1':
-    resolution: {integrity: sha512-fAnhLrDjiVfey5wwFRwrweyRlCmdz5ZxXz2G/4cLn0YDLjTapmN4gcCsTBR1N2rWnZSDeWpYtgLDsJt+FpmcwA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/visitor-keys@8.48.1':
-    resolution: {integrity: sha512-BmxxndzEWhE4TIEEMBs8lP3MBWN3jFPs/p6gPm/wkv02o41hI6cq9AuSmGAaTTHPtA1FTi2jBre4A9rm5ZmX+Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@uiw/codemirror-extensions-basic-setup@4.25.4':
-    resolution: {integrity: sha512-YzNwkm0AbPv1EXhCHYR5v0nqfemG2jEB0Z3Att4rBYqKrlG7AA9Rhjc3IyBaOzsBu18wtrp9/+uhTyu7TXSRng==}
-    peerDependencies:
-      '@codemirror/autocomplete': '>=6.0.0'
-      '@codemirror/commands': '>=6.0.0'
-      '@codemirror/language': '>=6.0.0'
-      '@codemirror/lint': '>=6.0.0'
-      '@codemirror/search': '>=6.0.0'
-      '@codemirror/state': '>=6.0.0'
-      '@codemirror/view': '>=6.0.0'
-
-  '@uiw/codemirror-theme-github@4.25.4':
-    resolution: {integrity: sha512-M5zRT2vIpNsuKN0Lz+DwLnmhHW8Eddp1M9zC0hm3V+bvffmaSn/pUDey1eqGIv5xNNmjhqvDAz0a90xLYCzvSw==}
-
-  '@uiw/codemirror-themes@4.25.4':
-    resolution: {integrity: sha512-2SLktItgcZC4p0+PfFusEbAHwbuAWe3bOOntCevVgHtrWGtGZX3IPv2k8IKZMgOXtAHyGKpJvT9/nspPn/uCQg==}
-    peerDependencies:
-      '@codemirror/language': '>=6.0.0'
-      '@codemirror/state': '>=6.0.0'
-      '@codemirror/view': '>=6.0.0'
-
-  '@uiw/react-codemirror@4.25.4':
-    resolution: {integrity: sha512-ipO067oyfUw+DVaXhQCxkB0ZD9b7RnY+ByrprSYSKCHaULvJ3sqWYC/Zen6zVQ8/XC4o5EPBfatGiX20kC7XGA==}
-    peerDependencies:
-      '@babel/runtime': '>=7.11.0'
-      '@codemirror/state': '>=6.0.0'
-      '@codemirror/theme-one-dark': '>=6.0.0'
-      '@codemirror/view': '>=6.0.0'
-      codemirror: '>=6.0.0'
-      react: '>=17.0.0'
-      react-dom: '>=17.0.0'
-
-  '@ungap/structured-clone@1.2.0':
-    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
 
   '@uploadthing/mime-types@0.3.6':
     resolution: {integrity: sha512-t3tTzgwFV9+1D7lNDYc7Lr7kBwotHaX0ZsvoCGe7xGnXKo9z0jG2Sjl/msll12FeoLj77nyhsxevXyGpQDBvLg==}
@@ -3825,6 +3825,9 @@ packages:
   '@uploadthing/shared@7.1.10':
     resolution: {integrity: sha512-R/XSA3SfCVnLIzFpXyGaKPfbwlYlWYSTuGjTFHuJhdAomuBuhopAHLh2Ois5fJibAHzi02uP1QCKbgTAdmArqg==}
 
+  '@upsetjs/venn.js@2.0.0':
+    resolution: {integrity: sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==}
+
   '@use-gesture/core@10.3.1':
     resolution: {integrity: sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==}
 
@@ -3833,78 +3836,43 @@ packages:
     peerDependencies:
       react: '>= 16.8.0'
 
-  '@vercel/nft@0.29.4':
-    resolution: {integrity: sha512-6lLqMNX3TuycBPABycx7A9F1bHQR7kiQln6abjFbPrf5C/05qHM9M5E4PeTE59c7z8g6vHnx1Ioihb2AQl7BTA==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  '@visx/group@2.17.0':
-    resolution: {integrity: sha512-60Y2dIKRh3cp/Drpq//wM067ZNrnCcvFCXufPgIihv0Ix8O7oMsYxu3ch4XUMjks+U2IAZQr5Dnc+C9sTQFkhw==}
+  '@visx/group@3.12.0':
+    resolution: {integrity: sha512-Dye8iS1alVXPv7nj/7M37gJe6sSKqJLH7x6sEWAsRQ9clI0kFvjbKcKgF+U3aAVQr0NCohheFV+DtR8trfK/Ag==}
     peerDependencies:
       react: ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
 
-  '@visx/hierarchy@2.17.0':
-    resolution: {integrity: sha512-5JYrS0JHl66JnhkVPv1XMkBnl8vBakODSZqR8Tf2VxmcZitG2W4tEUNulApBznSqYHuT49YsNxlgAER/I8FZjg==}
+  '@visx/hierarchy@3.12.0':
+    resolution: {integrity: sha512-+X1HOeLEOODxjAD7ixrWJ4KCVei4wFe8ra3dYU0uZ14RdPPgUeiuyBfdeXWZuAHM6Ix9qrryneatQjkC3h4mvA==}
     peerDependencies:
       react: ^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0
 
-  '@visx/responsive@2.17.0':
-    resolution: {integrity: sha512-3dY2shGbQnoknIRv3Vfnwsy3ZA8Q5Q/rYnTLiokWChYRfNC8NMPoX9mprEeb/gMAxtKjaLn3zcCgd8R+eetxIQ==}
-    peerDependencies:
-      react: ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
-
-  '@vitejs/plugin-react@4.3.4':
-    resolution: {integrity: sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  '@vitejs/plugin-react@6.0.1':
+    resolution: {integrity: sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0
-
-  '@vue/compiler-core@3.5.22':
-    resolution: {integrity: sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==}
-
-  '@vue/compiler-dom@3.5.22':
-    resolution: {integrity: sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==}
-
-  '@vue/compiler-sfc@3.5.22':
-    resolution: {integrity: sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==}
-
-  '@vue/compiler-ssr@3.5.22':
-    resolution: {integrity: sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==}
-
-  '@vue/shared@3.5.22':
-    resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
+      '@rolldown/plugin-babel': ^0.1.7 || ^0.2.0
+      babel-plugin-react-compiler: ^1.0.0
+      vite: ^8.0.0
+    peerDependenciesMeta:
+      '@rolldown/plugin-babel':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
 
   '@webcontainer/api@1.6.1':
     resolution: {integrity: sha512-2RS2KiIw32BY1Icf6M1DvqSmcon9XICZCDgS29QJb2NmF12ZY2V5Ia+949hMKB3Wno+P/Y8W+sPP59PZeXSELg==}
 
-  '@webgpu/types@0.1.68':
-    resolution: {integrity: sha512-3ab1B59Ojb6RwjOspYLsTpCzbNB3ZaamIAxBMmvnNkiDoLTZUOBXZ9p5nAYVEkQlDdf6qAZWi1pqj9+ypiqznA==}
+  '@webgpu/types@0.1.69':
+    resolution: {integrity: sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==}
 
-  '@whatwg-node/disposablestack@0.0.6':
-    resolution: {integrity: sha512-LOtTn+JgJvX8WfBVJtF08TGrdjuFzGJc4mkP8EdDI8ADbvO7kiexYep1o8dwnt0okb0jYclCDXF13xU7Ge4zSw==}
-    engines: {node: '>=18.0.0'}
-
-  '@whatwg-node/fetch@0.10.11':
-    resolution: {integrity: sha512-eR8SYtf9Nem1Tnl0IWrY33qJ5wCtIWlt3Fs3c6V4aAaTFLtkEQErXu3SSZg/XCHrj9hXSJ8/8t+CdMk5Qec/ZA==}
-    engines: {node: '>=18.0.0'}
-
-  '@whatwg-node/node-fetch@0.8.1':
-    resolution: {integrity: sha512-cQmQEo7IsI0EPX9VrwygXVzrVlX43Jb7/DBZSmpnC7xH4xkyOnn/HykHpTaQk7TUs7zh59A5uTGqx3p2Ouzffw==}
-    engines: {node: '>=18.0.0'}
-
-  '@whatwg-node/promise-helpers@1.3.2':
-    resolution: {integrity: sha512-Nst5JdK47VIl9UcGwtv2Rcgyn5lWtZ0/mhRQ4G8NN2isxpq2TO30iqHzmwoJycjWuyUfg3GFXqP/gFHXeV57IA==}
-    engines: {node: '>=16.0.0'}
-
-  '@whatwg-node/server@0.10.13':
-    resolution: {integrity: sha512-Otmxo+0mp8az3B48pLI1I4msNOXPIoP7TLm6h5wOEQmynqHt8oP9nR6NJUeJk6iI5OtFpQtkbJFwfGkmplvc3Q==}
-    engines: {node: '>=18.0.0'}
+  '@xstate/fsm@2.0.0':
+    resolution: {integrity: sha512-p/zcvBMoU2ap5byMefLkR+AM+Eh99CU/SDEQeccgKlmFNOMDwphaRGqdk+emvel/SaGZ7Rf9sDvzAplLzLdEVQ==}
 
-  '@xstate/react@6.0.0':
-    resolution: {integrity: sha512-xXlLpFJxqLhhmecAXclBECgk+B4zYSrDTl8hTfPZBogkn82OHKbm9zJxox3Z/YXoOhAQhKFTRLMYGdlbhc6T9A==}
+  '@xstate/react@6.1.0':
+    resolution: {integrity: sha512-ep9F0jGTI63B/jE8GHdMpUqtuz7yRebNaKv8EMUaiSi29NOglywc2X2YSOV/ygbIK+LtmgZ0q9anoEA2iBSEOw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      xstate: ^5.20.0
+      xstate: ^5.28.0
     peerDependenciesMeta:
       xstate:
         optional: true
@@ -3912,18 +3880,6 @@ packages:
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
-  abbrev@3.0.1:
-    resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
-  abort-controller@3.0.0:
-    resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
-    engines: {node: '>=6.5'}
-
-  accepts@1.3.8:
-    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
-    engines: {node: '>= 0.6'}
-
   accepts@2.0.0:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
@@ -3933,13 +3889,8 @@ packages:
     peerDependencies:
       acorn: ^8
 
-  acorn-jsx@5.3.2:
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-
-  acorn@8.15.0:
-    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+  acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
@@ -3947,15 +3898,6 @@ packages:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
 
-  agent-base@7.1.4:
-    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
-    engines: {node: '>= 14'}
-
-  ajv-errors@3.0.0:
-    resolution: {integrity: sha512-V3wD15YHfHz6y0KdhYFjyy9vWtEVALT9UrxfN3zqlI6dMioHnJrqOYfyPKol3oqrnCM9uwkcdCwkJ0WUcbLMTQ==}
-    peerDependencies:
-      ajv: ^8.0.1
-
   ajv-formats@3.0.1:
     resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
     peerDependencies:
@@ -3964,19 +3906,16 @@ packages:
       ajv:
         optional: true
 
-  ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
-
-  ajv@8.17.1:
-    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+  ajv@8.18.0:
+    resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
 
-  algoliasearch-helper@3.24.3:
-    resolution: {integrity: sha512-3QKg5lzSfUiPN8Hn1ViHEGv6PjK7i4SFEDLzwlSzPO/4mVOsyos7B7/AsEtFQW5KHHPiCq6DyJl+mzg7CYlEgw==}
+  algoliasearch-helper@3.28.1:
+    resolution: {integrity: sha512-6iXpbkkrAI5HFpCWXlNmIDSBuoN/U1XnEvb2yJAoWfqrZ+DrybI7MQ5P5mthFaprmocq+zbi6HxnR28xnZAYBw==}
     peerDependencies:
       algoliasearch: '>= 3.1 < 6'
 
-  algoliasearch@5.23.4:
-    resolution: {integrity: sha512-QzAKFHl3fm53s44VHrTdEo0TkpL3XVUYQpnZy1r6/EHvMAyIg+O4hwprzlsNmcCHTNyVcF2S13DAUn7XhkC6qg==}
+  algoliasearch@5.50.0:
+    resolution: {integrity: sha512-yE5I83Q2s8euVou8Y3feXK08wyZInJWLYXgWO6Xti9jBUEZAGUahyeQ7wSZWkifLWVnQVKEz5RAmBlXG5nqxog==}
     engines: {node: '>= 14.0.0'}
 
   ansi-regex@5.0.1:
@@ -3991,122 +3930,49 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
-  ansis@4.1.0:
-    resolution: {integrity: sha512-BGcItUBWSMRgOCe+SVZJ+S7yTRG0eGt9cXAHev72yuGcY23hnLA7Bky5L/xLyPINoSN95geovfBkqoTlNZYa7w==}
+  ansis@4.2.0:
+    resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
     engines: {node: '>=14'}
 
-  anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-
-  archiver-utils@5.0.2:
-    resolution: {integrity: sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==}
-    engines: {node: '>= 14'}
-
-  archiver@7.0.1:
-    resolution: {integrity: sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==}
-    engines: {node: '>= 14'}
-
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
-  aria-hidden@1.2.4:
-    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
 
-  aria-query@5.3.2:
-    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
-    engines: {node: '>= 0.4'}
-
-  array-buffer-byte-length@1.0.1:
-    resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
-    engines: {node: '>= 0.4'}
-
   array-buffer-byte-length@1.0.2:
     resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
 
-  array-flatten@1.1.1:
-    resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
-
-  array-includes@3.1.9:
-    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.findlast@1.2.5:
-    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.flat@1.3.2:
-    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.flatmap@1.3.3:
-    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.tosorted@1.1.4:
-    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
-    engines: {node: '>= 0.4'}
-
-  arraybuffer.prototype.slice@1.0.3:
-    resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
-    engines: {node: '>= 0.4'}
-
   arraybuffer.prototype.slice@1.0.4:
     resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
     engines: {node: '>= 0.4'}
 
-  ast-module-types@6.0.1:
-    resolution: {integrity: sha512-WHw67kLXYbZuHTmcdbIrVArCq5wxo6NEuj3hiYAWr8mwJeC+C2mMCIBIWCiDoCye/OF/xelc+teJ1ERoWmnEIA==}
-    engines: {node: '>=18'}
-
-  ast-types-flow@0.0.8:
-    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
-
-  ast-types@0.16.1:
-    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
-    engines: {node: '>=4'}
+  ast-v8-to-istanbul@0.3.12:
+    resolution: {integrity: sha512-BRRC8VRZY2R4Z4lFIL35MwNXmwVqBityvOIwETtsCSwvjl0IdgFsy9NhdaA6j74nUdtJJlIypeRhpDam19Wq3g==}
 
-  async-sema@3.1.1:
-    resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
 
   async@3.2.6:
     resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
-  autoprefixer@10.4.18:
-    resolution: {integrity: sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-
   available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
-  axe-core@4.11.0:
-    resolution: {integrity: sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==}
-    engines: {node: '>=4'}
-
-  axobject-query@4.1.0:
-    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
-    engines: {node: '>= 0.4'}
-
-  b4a@1.7.3:
-    resolution: {integrity: sha512-5Q2mfq2WfGuFp3uS//0s6baOJLMoVduPYVeNmDYxu5OUA1/cBfvr2RIS7vi62LdNj/urk1hfmj867I3qt6uZ7Q==}
+  b4a@1.8.0:
+    resolution: {integrity: sha512-qRuSmNSkGQaHwNbM7J78Wwy+ghLEYF1zNrSeMxj4Kgw6y33O3mXcQ6Ie9fRvfU/YnxWkOchPXbaLb73TkIsfdg==}
     peerDependencies:
       react-native-b4a: '*'
     peerDependenciesMeta:
       react-native-b4a:
         optional: true
 
-  babel-dead-code-elimination@1.0.10:
-    resolution: {integrity: sha512-DV5bdJZTzZ0zn0DC24v3jD7Mnidh6xhKa4GfKCbq3sfW8kaWhDdZjP3i81geA8T33tdYqWKw4D3fVv0CwEgKVA==}
-
-  babel-plugin-macros@3.1.0:
-    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
-    engines: {node: '>=10', npm: '>=6'}
+  babel-dead-code-elimination@1.0.12:
+    resolution: {integrity: sha512-GERT7L2TiYcYDtYk1IpD+ASAYXjKbLTDPhBtYj7X1NuRMDTMtAx9kyBenub1Ev41lo91OHCKdmP+egTDmfQ7Ig==}
 
   bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
@@ -4114,34 +3980,67 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  bare-events@2.7.0:
-    resolution: {integrity: sha512-b3N5eTW1g7vXkw+0CXh/HazGTcO5KYuu/RCNaJbDMPI6LHDi+7qe8EmxKUVe1sUbY2KZOVZFyj62x0OEz9qyAA==}
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
+  bare-events@2.8.2:
+    resolution: {integrity: sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==}
+    peerDependencies:
+      bare-abort-controller: '*'
+    peerDependenciesMeta:
+      bare-abort-controller:
+        optional: true
+
+  bare-fs@4.5.6:
+    resolution: {integrity: sha512-1QovqDrR80Pmt5HPAsMsXTCFcDYr+NSUKW6nd6WO5v0JBmnItc/irNRzm2KOQ5oZ69P37y+AMujNyNtG+1Rggw==}
+    engines: {bare: '>=1.16.0'}
+    peerDependencies:
+      bare-buffer: '*'
+    peerDependenciesMeta:
+      bare-buffer:
+        optional: true
+
+  bare-os@3.8.6:
+    resolution: {integrity: sha512-l8xaNWWb/bXuzgsrlF5jaa5QYDJ9S0ddd54cP6CH+081+5iPrbJiCfBWQqrWYzmUhCbsH+WR6qxo9MeHVCr0MQ==}
+    engines: {bare: '>=1.14.0'}
+
+  bare-path@3.0.0:
+    resolution: {integrity: sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==}
+
+  bare-stream@2.12.0:
+    resolution: {integrity: sha512-w28i8lkBgREV3rPXGbgK+BO66q+ZpKqRWrZLiCdmmUlLPrQ45CzkvRhN+7lnv00Gpi2zy5naRxnUFAxCECDm9g==}
+    peerDependencies:
+      bare-abort-controller: '*'
+      bare-buffer: '*'
+      bare-events: '*'
+    peerDependenciesMeta:
+      bare-abort-controller:
+        optional: true
+      bare-buffer:
+        optional: true
+      bare-events:
+        optional: true
+
+  bare-url@2.4.0:
+    resolution: {integrity: sha512-NSTU5WN+fy/L0DDenfE8SXQna4voXuW0FHM7wH8i3/q9khUSchfPbPezO4zSFMnDGIf9YE+mt/RWhZgNRKRIXA==}
 
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  better-ajv-errors@1.2.0:
-    resolution: {integrity: sha512-UW+IsFycygIo7bclP9h5ugkNH8EjCSgqyFB/yQ4Hqqa1OEYDtb0uFIkYE0b6+CjkgJYVM5UKI/pJPxjYe9EZlA==}
-    engines: {node: '>= 12.13.0'}
-    peerDependencies:
-      ajv: 4.11.8 - 8
+  baseline-browser-mapping@2.10.13:
+    resolution: {integrity: sha512-BL2sTuHOdy0YT1lYieUxTw/QMtPBC3pmlJC6xk8BBYVv6vcw3SGdKemQ+Xsx9ik2F/lYDO9tqsFQH1r9PFuHKw==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
 
   bidi-js@1.0.3:
     resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
 
-  binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
-    engines: {node: '>=8'}
-
   binary-search-bounds@2.0.5:
     resolution: {integrity: sha512-H0ea4Fd3lS1+sTEB2TgcLoK21lLhwEJzlQv3IN47pJS976Gx4zoWe0ak3q+uYh60ppQxg9F16Ri4tS1sfD4+jA==}
 
-  bindings@1.5.0:
-    resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
-
-  body-parser@1.20.4:
-    resolution: {integrity: sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==}
-    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+  blake3-wasm@2.1.5:
+    resolution: {integrity: sha512-F1+K8EbfOZE49dtoPtmxUQrpXaBIl3ICvasLh+nJta0xkz+9kF/7uet9fLnwKqhDrmj6g+6K3Tw9yQPUg2ka5g==}
 
   body-parser@2.2.2:
     resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==}
@@ -4150,15 +4049,18 @@ packages:
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
-  brace-expansion@2.0.2:
-    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
-  braces@3.0.3:
-    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
-    engines: {node: '>=8'}
+  brace-expansion@2.0.3:
+    resolution: {integrity: sha512-MCV/fYJEbqx68aE58kv2cA/kiky1G8vux3OR6/jbS+jIMe/6fJWa0DTzJU7dqijOWYwHi1t29FlfYI9uytqlpA==}
+
+  brace-expansion@5.0.5:
+    resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==}
+    engines: {node: 18 || 20 || >=22}
 
-  browserslist@4.24.4:
-    resolution: {integrity: sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==}
+  browserslist@4.28.2:
+    resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -4167,16 +4069,6 @@ packages:
     engines: {node: '>= 0.4.0'}
     hasBin: true
 
-  buffer-crc32@0.2.13:
-    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
-
-  buffer-crc32@1.0.0:
-    resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
-    engines: {node: '>=8.0.0'}
-
-  buffer-equal-constant-time@1.0.1:
-    resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==}
-
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
@@ -4191,24 +4083,13 @@ packages:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
 
-  call-bind@1.0.7:
-    resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
-    engines: {node: '>= 0.4'}
-
   call-bind@1.0.8:
     resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
     engines: {node: '>= 0.4'}
 
   call-bound@1.0.4:
     resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
-    engines: {node: '>= 0.4'}
-
-  callsite@1.0.0:
-    resolution: {integrity: sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==}
-
-  callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
+    engines: {node: '>= 0.4'}
 
   camelcase@8.0.0:
     resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
@@ -4220,8 +4101,8 @@ packages:
     peerDependencies:
       three: '>=0.126.1'
 
-  caniuse-lite@1.0.30001692:
-    resolution: {integrity: sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==}
+  caniuse-lite@1.0.30001784:
+    resolution: {integrity: sha512-WU346nBTklUV9YfUl60fqRbU5ZqyXlqvo1SgigE1OAXK5bFL8LL9q1K7aap3N739l4BvNqnkm3YrGHiY9sfUQw==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -4247,11 +4128,14 @@ packages:
   character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
 
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
   cheerio-select@2.1.0:
     resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
 
-  cheerio@1.1.2:
-    resolution: {integrity: sha512-IkxPpb5rS/d1IiLbHMgfPuS0FgiWTtFIm/Nj+2woXDLTZ7fOT2eqzgYbdMlLweqlHbsZjxEChoVK+7iph7jyQg==}
+  cheerio@1.2.0:
+    resolution: {integrity: sha512-WDrybc/gKFpTYQutKIK6UvfcuxijIZfMfXaYm8NMsPQxSYvf+13fXUJ4rztGGbJcBQ/GF55gvrZ0Bc0bj/mqvg==}
     engines: {node: '>=20.18.1'}
 
   chevrotain-allstar@0.3.1:
@@ -4259,44 +4143,26 @@ packages:
     peerDependencies:
       chevrotain: ^11.0.0
 
-  chevrotain@11.0.3:
-    resolution: {integrity: sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==}
-
-  chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
+  chevrotain@11.1.2:
+    resolution: {integrity: sha512-opLQzEVriiH1uUQ4Kctsd49bRoFDXGGSC4GUqj7pGyxM3RehRhvTlZJc1FL/Flew2p5uwxa1tUDWKzI4wNM8pg==}
 
   chokidar@4.0.3:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
-  chownr@3.0.0:
-    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
-    engines: {node: '>=18'}
-
-  citty@0.1.6:
-    resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
-
-  cjs-module-lexer@1.4.3:
-    resolution: {integrity: sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==}
+  chokidar@5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
 
-  class-variance-authority@0.7.1:
-    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+  cjs-module-lexer@2.2.0:
+    resolution: {integrity: sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==}
 
-  classnames@2.3.2:
-    resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
-
-  clipboardy@4.0.0:
-    resolution: {integrity: sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==}
-    engines: {node: '>=18'}
+  classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
 
   cliui@7.0.4:
     resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
 
-  cliui@8.0.1:
-    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
-    engines: {node: '>=12'}
-
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -4307,9 +4173,6 @@ packages:
       react: ^18 || ^19 || ^19.0.0-rc
       react-dom: ^18 || ^19 || ^19.0.0-rc
 
-  codemirror@6.0.2:
-    resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
-
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -4317,46 +4180,15 @@ packages:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
-  color-convert@3.1.2:
-    resolution: {integrity: sha512-UNqkvCDXstVck3kdowtOTWROIJQwafjOfXSmddoDrXo4cewMKmusCeF22Q24zvjR8nwWib/3S/dfyzPItPEiJg==}
-    engines: {node: '>=14.6'}
-
   color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
 
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  color-name@2.0.2:
-    resolution: {integrity: sha512-9vEt7gE16EW7Eu7pvZnR0abW9z6ufzhXxGXZEVU9IqPdlsUiMwJeJfRtq0zePUmnbHGT9zajca7mX8zgoayo4A==}
-    engines: {node: '>=12.20'}
-
-  color-string@2.1.2:
-    resolution: {integrity: sha512-RxmjYxbWemV9gKu4zPgiZagUxbH3RQpEIO77XoSSX0ivgABDZ+h8Zuash/EMFLTI4N9QgFPOJ6JQpPZKFxa+dA==}
-    engines: {node: '>=18'}
-
-  color@5.0.2:
-    resolution: {integrity: sha512-e2hz5BzbUPcYlIRHo8ieAhYgoajrJr+hWoceg6E345TPsATMUKqDgzt8fSXZJJbxfpiPzkWyphz8yn8At7q3fA==}
-    engines: {node: '>=18'}
-
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
-  commander@10.0.1:
-    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
-    engines: {node: '>=14'}
-
-  commander@11.1.0:
-    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
-    engines: {node: '>=16'}
-
-  commander@12.1.0:
-    resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
-    engines: {node: '>=18'}
-
-  commander@2.20.3:
-    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
-
   commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -4365,27 +4197,12 @@ packages:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
     engines: {node: '>= 12'}
 
-  common-path-prefix@3.0.0:
-    resolution: {integrity: sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==}
-
-  compress-commons@6.0.2:
-    resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==}
-    engines: {node: '>= 14'}
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
   confbox@0.1.8:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
-  confbox@0.2.2:
-    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
-
-  consola@3.4.2:
-    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-
-  content-disposition@0.5.4:
-    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
-    engines: {node: '>= 0.6'}
-
   content-disposition@1.0.1:
     resolution: {integrity: sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==}
     engines: {node: '>=18'}
@@ -4400,36 +4217,26 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  cookie-es@1.2.2:
-    resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==}
-
-  cookie-es@2.0.0:
-    resolution: {integrity: sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==}
-
-  cookie-signature@1.0.7:
-    resolution: {integrity: sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==}
+  cookie-es@3.1.1:
+    resolution: {integrity: sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==}
 
   cookie-signature@1.2.2:
     resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
     engines: {node: '>=6.6.0'}
 
-  cookie@0.7.1:
-    resolution: {integrity: sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==}
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
 
-  cookie@1.0.2:
-    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
-    engines: {node: '>=18'}
-
-  copy-file@11.1.0:
-    resolution: {integrity: sha512-X8XDzyvYaA6msMyAM575CUoygY5b44QzLcGRKsK3MFmXcOvQa518dNPLsKYwkYsn72g3EiW+LE0ytd/FlqWmyw==}
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
     engines: {node: '>=18'}
 
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
-  cors@2.8.5:
-    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+  cors@2.8.6:
+    resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
     engines: {node: '>= 0.10'}
 
   cose-base@1.0.3:
@@ -4438,26 +4245,6 @@ packages:
   cose-base@2.2.0:
     resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
 
-  cosmiconfig@7.1.0:
-    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
-    engines: {node: '>=10'}
-
-  crc-32@1.2.2:
-    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
-    engines: {node: '>=0.8'}
-    hasBin: true
-
-  crc32-stream@6.0.0:
-    resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
-    engines: {node: '>= 14'}
-
-  crelt@1.0.6:
-    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
-
-  cron-parser@4.9.0:
-    resolution: {integrity: sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==}
-    engines: {node: '>=12.0.0'}
-
   cross-env@7.0.3:
     resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
     engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
@@ -4467,22 +4254,11 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  crossws@0.3.5:
-    resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
-
-  css-select@5.1.0:
-    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
-
-  css-tree@2.2.1:
-    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
 
-  css-tree@3.1.0:
-    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
-  css-what@6.1.0:
-    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
     engines: {node: '>= 6'}
 
   cssesc@3.0.0:
@@ -4490,15 +4266,8 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  cssfilter@0.0.10:
-    resolution: {integrity: sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==}
-
-  csso@5.0.5:
-    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
-
-  csstype@3.1.3:
-    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
   cytoscape-cose-bilkent@4.1.0:
     resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==}
@@ -4570,8 +4339,8 @@ packages:
     resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
     engines: {node: '>=12'}
 
-  d3-format@3.1.0:
-    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+  d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
     engines: {node: '>=12'}
 
   d3-geo@3.1.1:
@@ -4656,15 +4425,8 @@ packages:
     resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
     engines: {node: '>=12'}
 
-  dagre-d3-es@7.0.11:
-    resolution: {integrity: sha512-tvlJLyQf834SylNKax8Wkzco/1ias1OPw8DcUMDE7oUIoSEW25riQVuiu/0OWEFqT0cxHT3Pa9/D82Jr47IONw==}
-
-  damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
-
-  data-uri-to-buffer@4.0.1:
-    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
-    engines: {node: '>= 12'}
+  dagre-d3-es@7.0.14:
+    resolution: {integrity: sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==}
 
   data-view-buffer@1.0.2:
     resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
@@ -4678,29 +4440,8 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
-  date-fns@2.30.0:
-    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
-    engines: {node: '>=0.11'}
-
-  dayjs@1.11.18:
-    resolution: {integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==}
-
-  debug@2.6.9:
-    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
-  debug@4.4.1:
-    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
+  dayjs@1.11.20:
+    resolution: {integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==}
 
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
@@ -4711,26 +4452,8 @@ packages:
       supports-color:
         optional: true
 
-  decache@4.6.2:
-    resolution: {integrity: sha512-2LPqkLeu8XWHU8qNCS3kcF6sCcb5zIzvWaAHYSvPfwhdd7mHuah29NssMzrTYyHN4F5oFy2ko9OBYxegtU0FEw==}
-
-  decode-named-character-reference@1.2.0:
-    resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==}
-
-  dedent@1.7.0:
-    resolution: {integrity: sha512-HGFtf8yhuhGhqO07SV79tRp+br4MnbdjeVxotpn1QBl30pcLLCQjX5b2295ll0fv8RKDKsmWYrl05usHM9CewQ==}
-    peerDependencies:
-      babel-plugin-macros: ^3.1.0
-    peerDependenciesMeta:
-      babel-plugin-macros:
-        optional: true
-
-  deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-
-  deepmerge@4.3.1:
-    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
-    engines: {node: '>=0.10.0'}
+  decode-named-character-reference@1.3.0:
+    resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
 
   define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
@@ -4740,42 +4463,20 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
-  defu@6.1.4:
-    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
-
-  delaunator@5.0.1:
-    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+  delaunator@5.1.0:
+    resolution: {integrity: sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==}
 
   depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
 
-  deprecation@2.3.1:
-    resolution: {integrity: sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==}
-
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
 
-  destr@2.0.5:
-    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
-
-  destroy@1.2.0:
-    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
-    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
-
   detect-gpu@5.0.70:
     resolution: {integrity: sha512-bqerEP1Ese6nt3rFkwPnGbsUF9a4q+gMmpTVVOEzoCyeCc+y7/RvJnQZJx1JwhgQI5Ntg0Kgat8Uu7XpBqnz1w==}
 
-  detect-libc@1.0.3:
-    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
-    engines: {node: '>=0.10'}
-    hasBin: true
-
-  detect-libc@2.0.4:
-    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
-    engines: {node: '>=8'}
-
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
@@ -4783,67 +4484,17 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
-  detective-amd@6.0.1:
-    resolution: {integrity: sha512-TtyZ3OhwUoEEIhTFoc1C9IyJIud3y+xYkSRjmvCt65+ycQuc3VcBrPRTMWoO/AnuCyOB8T5gky+xf7Igxtjd3g==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  detective-cjs@6.0.1:
-    resolution: {integrity: sha512-tLTQsWvd2WMcmn/60T2inEJNhJoi7a//PQ7DwRKEj1yEeiQs4mrONgsUtEJKnZmrGWBBmE0kJ1vqOG/NAxwaJw==}
-    engines: {node: '>=18'}
-
-  detective-es6@5.0.1:
-    resolution: {integrity: sha512-XusTPuewnSUdoxRSx8OOI6xIA/uld/wMQwYsouvFN2LAg7HgP06NF1lHRV3x6BZxyL2Kkoih4ewcq8hcbGtwew==}
-    engines: {node: '>=18'}
-
-  detective-postcss@7.0.1:
-    resolution: {integrity: sha512-bEOVpHU9picRZux5XnwGsmCN4+8oZo7vSW0O0/Enq/TO5R2pIAP2279NsszpJR7ocnQt4WXU0+nnh/0JuK4KHQ==}
-    engines: {node: ^14.0.0 || >=16.0.0}
-    peerDependencies:
-      postcss: ^8.4.47
-
-  detective-sass@6.0.1:
-    resolution: {integrity: sha512-jSGPO8QDy7K7pztUmGC6aiHkexBQT4GIH+mBAL9ZyBmnUIOFbkfZnO8wPRRJFP/QP83irObgsZHCoDHZ173tRw==}
-    engines: {node: '>=18'}
-
-  detective-scss@5.0.1:
-    resolution: {integrity: sha512-MAyPYRgS6DCiS6n6AoSBJXLGVOydsr9huwXORUlJ37K3YLyiN0vYHpzs3AdJOgHobBfispokoqrEon9rbmKacg==}
-    engines: {node: '>=18'}
-
-  detective-stylus@5.0.1:
-    resolution: {integrity: sha512-Dgn0bUqdGbE3oZJ+WCKf8Dmu7VWLcmRJGc6RCzBgG31DLIyai9WAoEhYRgIHpt/BCRMrnXLbGWGPQuBUrnF0TA==}
-    engines: {node: '>=18'}
-
-  detective-typescript@14.0.0:
-    resolution: {integrity: sha512-pgN43/80MmWVSEi5LUuiVvO/0a9ss5V7fwVfrJ4QzAQRd3cwqU1SfWGXJFcNKUqoD5cS+uIovhw5t/0rSeC5Mw==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      typescript: ^5.4.4
-
-  detective-vue2@2.2.0:
-    resolution: {integrity: sha512-sVg/t6O2z1zna8a/UIV6xL5KUa2cMTQbdTIIvqNM0NIPswp52fe43Nwmbahzj3ww4D844u/vC2PYfiGLvD3zFA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      typescript: ^5.4.4
-
-  dettle@1.0.5:
-    resolution: {integrity: sha512-ZVyjhAJ7sCe1PNXEGveObOH9AC8QvMga3HJIghHawtG7mE4K5pW9nz/vDGAr/U7a3LWgdOzEE7ac9MURnyfaTA==}
-
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  diff@8.0.2:
-    resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
+  diff@8.0.4:
+    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
     engines: {node: '>=0.3.1'}
 
   discord-interactions@4.4.0:
     resolution: {integrity: sha512-jjJx8iwAeJcj8oEauV43fue9lNqkf38fy60aSs2+G8D1nJmDxUIrk08o3h0F3wgwuBWWJUZO+X/VgfXsxpCiJA==}
     engines: {node: '>=18.4.0'}
 
-  doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
-
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
@@ -4854,37 +4505,37 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
-  dompurify@3.2.6:
-    resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==}
+  dompurify@3.3.3:
+    resolution: {integrity: sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==}
 
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
-  dot-prop@9.0.0:
-    resolution: {integrity: sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==}
-    engines: {node: '>=18'}
-
-  dotenv-cli@8.0.0:
-    resolution: {integrity: sha512-aLqYbK7xKOiTMIRf1lDPbI+Y+Ip/wo5k3eyp6ePysVaSqbyxjyK3dK35BTxG+rmd7djf5q2UPs4noPNH+cj0Qw==}
+  dotenv-cli@11.0.0:
+    resolution: {integrity: sha512-r5pA8idbk7GFWuHEU7trSTflWcdBpQEK+Aw17UrSHjS6CReuhrrPcyC3zcQBPQvhArRHnBo/h6eLH1fkCvNlww==}
     hasBin: true
 
-  dotenv-expand@10.0.0:
-    resolution: {integrity: sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==}
+  dotenv-expand@12.0.3:
+    resolution: {integrity: sha512-uc47g4b+4k/M/SeaW1y4OApx+mtLWl92l5LMPP0GNXctZqELk+YGgOPIIC5elYmUH4OuoK3JLhuRUYegeySiFA==}
     engines: {node: '>=12'}
 
   dotenv@16.6.1:
     resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
     engines: {node: '>=12'}
 
+  dotenv@17.3.1:
+    resolution: {integrity: sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==}
+    engines: {node: '>=12'}
+
   draco3d@1.5.7:
     resolution: {integrity: sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==}
 
-  drizzle-kit@0.31.7:
-    resolution: {integrity: sha512-hOzRGSdyKIU4FcTSFYGKdXEjFsncVwHZ43gY3WU5Bz9j5Iadp6Rh6hxLSQ1IWXpKLBKt/d5y1cpSPcV+FcoQ1A==}
+  drizzle-kit@0.31.10:
+    resolution: {integrity: sha512-7OZcmQUrdGI+DUNNsKBn1aW8qSoKuTH7d0mYgSP8bAzdFzKoovxEFnoGQp2dVs82EOJeYycqRtciopszwUf8bw==}
     hasBin: true
 
-  drizzle-orm@0.44.7:
-    resolution: {integrity: sha512-quIpnYznjU9lHshEOAYLoZ9s3jweleHlZIAWR/jX9gAWNg/JhQ1wj0KGRf7/Zm+obRrYd9GjPVJg790QY9N5AQ==}
+  drizzle-orm@0.45.2:
+    resolution: {integrity: sha512-kY0BSaTNYWnoDMVoyY8uxmyHjpJW1geOmBMdSSicKo9CIIWkSxMIj2rkeSR51b8KAPB7m+qysjuHme5nKP+E5Q==}
     peerDependencies:
       '@aws-sdk/client-rds-data': '>=3'
       '@cloudflare/workers-types': '>=4'
@@ -4982,9 +4633,6 @@ packages:
   duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
-  ecdsa-sig-formatter@1.0.11:
-    resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
-
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -4996,35 +4644,12 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  electron-to-chromium@1.5.83:
-    resolution: {integrity: sha512-LcUDPqSt+V0QmI47XLzZrz5OqILSMGsPFkDYus22rIbgorSvBYEFqq854ltTmUdHkY92FSdAAvsh4jWEULMdfQ==}
-
-  embla-carousel-react@8.6.0:
-    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-
-  embla-carousel-reactive-utils@8.6.0:
-    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
-    peerDependencies:
-      embla-carousel: 8.6.0
-
-  embla-carousel@8.6.0:
-    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+  electron-to-chromium@1.5.330:
+    resolution: {integrity: sha512-jFNydB5kFtYUobh4IkWUnXeyDbjf/r9gcUEXe1xcrcUxIGfTdzPXA+ld6zBRbwvgIGVzDll/LTIiDztEtckSnA==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
-  emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-
-  empathic@2.0.0:
-    resolution: {integrity: sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==}
-    engines: {node: '>=14'}
-
-  enabled@2.0.0:
-    resolution: {integrity: sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==}
-
   encodeurl@2.0.0:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
@@ -5032,11 +4657,8 @@ packages:
   encoding-sniffer@0.2.1:
     resolution: {integrity: sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==}
 
-  end-of-stream@1.4.5:
-    resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
-
-  enhanced-resolve@5.18.3:
-    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
+  enhanced-resolve@5.21.5:
+    resolution: {integrity: sha512-mLCNbrQli11K1ySUmuNt4ZUB3OpGIDq4q2vTBTf5cL2lpsRjI9QKqSD0ndjW8FyvcW/Jj46gMe9syyHAsvMa/A==}
     engines: {node: '>=10.13.0'}
 
   entities@4.5.0:
@@ -5047,19 +4669,18 @@ packages:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
 
-  env-paths@3.0.0:
-    resolution: {integrity: sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  entities@7.0.1:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
+    engines: {node: '>=0.12'}
 
-  error-ex@1.3.2:
-    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
-  es-abstract@1.22.5:
-    resolution: {integrity: sha512-oW69R+4q2wG+Hc3KZePPZxOiisRIqfKBVo/HLx94QcJeWGU/8sZhCvc829rd1kS366vlJbzBfXf9yWwf0+Ko7w==}
-    engines: {node: '>= 0.4'}
+  error-stack-parser-es@1.0.5:
+    resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
 
-  es-abstract@1.24.0:
-    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
+  es-abstract@1.24.1:
+    resolution: {integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==}
     engines: {node: '>= 0.4'}
 
   es-define-property@1.0.1:
@@ -5070,61 +4691,35 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-iterator-helpers@1.2.1:
-    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
-    engines: {node: '>= 0.4'}
-
-  es-module-lexer@1.7.0:
-    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
-
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
 
-  es-set-tostringtag@2.0.3:
-    resolution: {integrity: sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==}
-    engines: {node: '>= 0.4'}
-
   es-set-tostringtag@2.1.0:
     resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
-  es-shim-unscopables@1.0.2:
-    resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
-
-  es-to-primitive@1.2.1:
-    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
-    engines: {node: '>= 0.4'}
-
   es-to-primitive@1.3.0:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
-  es6-promise@4.2.8:
-    resolution: {integrity: sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==}
-
-  esbuild-register@3.6.0:
-    resolution: {integrity: sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==}
-    peerDependencies:
-      esbuild: '>=0.12 <1'
-
   esbuild@0.18.20:
     resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
     engines: {node: '>=12'}
     hasBin: true
 
-  esbuild@0.25.10:
-    resolution: {integrity: sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==}
+  esbuild@0.25.12:
+    resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
     engines: {node: '>=18'}
     hasBin: true
 
-  esbuild@0.25.9:
-    resolution: {integrity: sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==}
+  esbuild@0.27.4:
+    resolution: {integrity: sha512-Rq4vbHnYkK5fws5NF7MYTU68FPRE1ajX7heQ/8QXXWqNgqqJ/GkmmyxIzUnf2Sr/bakf8l54716CcMGHYhMrrQ==}
     engines: {node: '>=18'}
     hasBin: true
 
-  esbuild@0.27.0:
-    resolution: {integrity: sha512-jd0f4NHbD6cALCyGElNpGAOtWxSq46l9X/sWB0Nzd5er4Kz2YTm+Vl0qKFT9KUJvD8+fiO8AvoHhFvEatfVixA==}
+  esbuild@0.28.1:
+    resolution: {integrity: sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -5139,105 +4734,28 @@ packages:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
 
-  escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
-
   escape-string-regexp@5.0.0:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
-  escodegen@2.1.0:
-    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
-    engines: {node: '>=6.0'}
-    hasBin: true
-
-  eslint-plugin-jsx-a11y@6.10.2:
-    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
-
-  eslint-plugin-react-hooks@7.0.1:
-    resolution: {integrity: sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
-
-  eslint-plugin-react@7.37.5:
-    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
-
-  eslint-scope@8.4.0:
-    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  eslint-visitor-keys@4.2.1:
-    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  eslint@9.39.1:
-    resolution: {integrity: sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    hasBin: true
-    peerDependencies:
-      jiti: '*'
-    peerDependenciesMeta:
-      jiti:
-        optional: true
-
-  esm-env@1.1.4:
-    resolution: {integrity: sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==}
-
-  espree@10.4.0:
-    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
     hasBin: true
 
-  esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
-    engines: {node: '>=0.10'}
-
-  esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
-
-  estraverse@5.3.0:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
 
-  estree-walker@2.0.2:
-    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
-
-  esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
   etag@1.8.1:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
 
-  event-target-shim@5.0.1:
-    resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
-    engines: {node: '>=6'}
-
   events-universal@1.0.1:
     resolution: {integrity: sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==}
 
-  events@3.3.0:
-    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
-    engines: {node: '>=0.8.x'}
-
   eventsource-parser@3.0.6:
     resolution: {integrity: sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==}
     engines: {node: '>=18.0.0'}
@@ -5246,30 +4764,22 @@ packages:
     resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
     engines: {node: '>=18.0.0'}
 
-  execa@8.0.1:
-    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
-    engines: {node: '>=16.17'}
-
   execa@9.6.1:
     resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
     engines: {node: ^18.19.0 || >=20.5.0}
 
-  express-rate-limit@7.5.1:
-    resolution: {integrity: sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==}
+  express-rate-limit@8.3.2:
+    resolution: {integrity: sha512-77VmFeJkO0/rvimEDuUC5H30oqUC4EyOhyGccfqoLebB0oiEYfM7nwPrsDsBL1gsTpwfzX8SFy2MT3TDyRq+bg==}
     engines: {node: '>= 16'}
     peerDependencies:
       express: '>= 4.11'
 
-  express@4.22.1:
-    resolution: {integrity: sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==}
-    engines: {node: '>= 0.10.0'}
-
   express@5.2.1:
     resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
     engines: {node: '>= 18'}
 
-  exsolve@1.0.7:
-    resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
 
   extend-shallow@2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
@@ -5278,46 +4788,25 @@ packages:
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
-  extract-zip@2.0.1:
-    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
-    engines: {node: '>= 10.17.0'}
-    hasBin: true
-
   fast-check@3.23.2:
     resolution: {integrity: sha512-h5+1OzzfCC3Ef7VbtKdcv7zsstUQwUDlYpUTvjeUsJAssPgLn7QzbboPtL5ro04Mq0rPOsMzl7q5hIbRs2wD1A==}
     engines: {node: '>=8.0.0'}
 
+  fast-content-type-parse@3.0.0:
+    resolution: {integrity: sha512-ZvLdcY8P+N8mGQJahJV5G4U88CSvT1rP8ApL6uETe88MBXrBHAkZlSEySdUlyztF7ccb+Znos3TFqaepHxdhBg==}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
   fast-fifo@1.3.2:
     resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
 
-  fast-glob@3.3.3:
-    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
-    engines: {node: '>=8.6.0'}
-
-  fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
-
-  fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
-
-  fast-safe-stringify@2.1.1:
-    resolution: {integrity: sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==}
-
   fast-sha256@1.3.0:
     resolution: {integrity: sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==}
 
   fast-uri@3.1.0:
     resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
 
-  fastq@1.17.1:
-    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
-
-  fd-slicer@1.1.0:
-    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
-
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
@@ -5327,13 +4816,6 @@ packages:
       picomatch:
         optional: true
 
-  fecha@4.2.3:
-    resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==}
-
-  fetch-blob@3.2.0:
-    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
-    engines: {node: ^12.20 || >= 14.13}
-
   fetchdts@0.1.7:
     resolution: {integrity: sha512-YoZjBdafyLIop9lSxXVI33oLD5kN31q4Td+CasofLLYeLXRFeOsuOw0Uo+XNRi9PZlbfdlN2GmRtm4tCEQ9/KA==}
 
@@ -5347,31 +4829,12 @@ packages:
     resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
     engines: {node: '>=18'}
 
-  file-entry-cache@8.0.0:
-    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
-    engines: {node: '>=16.0.0'}
-
   file-selector@0.6.0:
     resolution: {integrity: sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==}
     engines: {node: '>= 12'}
 
-  file-uri-to-path@1.0.0:
-    resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
-
-  filelist@1.0.4:
-    resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
-
-  fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
-    engines: {node: '>=8'}
-
-  filter-obj@6.1.0:
-    resolution: {integrity: sha512-xdMtCAODmPloU9qtmPcdBV9Kd27NtMse+4ayThxqIHUES5Z2S6bGpap5PpdmNM56ub7y3i1eyr+vJJIIgWGKmA==}
-    engines: {node: '>=18'}
-
-  finalhandler@1.3.2:
-    resolution: {integrity: sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==}
-    engines: {node: '>= 0.8'}
+  filelist@1.0.6:
+    resolution: {integrity: sha512-5giy2PkLYY1cP39p17Ech+2xlpTRL9HLspOfEgm0L6CwBXBTgsK5ou0JtzYuepxkaQ/tvhCFIJ5uXo0OrM2DxA==}
 
   finalhandler@2.1.1:
     resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
@@ -5380,39 +4843,14 @@ packages:
   find-my-way-ts@0.1.6:
     resolution: {integrity: sha512-a85L9ZoXtNAey3Y6Z+eBWW658kO/MwR7zIafkIUPUMf3isZG0NCs2pjW2wtjxAKuJPxMAsHUIP4ZPGv0o5gyTA==}
 
-  find-up-simple@1.0.1:
-    resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
-    engines: {node: '>=18'}
-
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
 
-  find-up@7.0.0:
-    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
-    engines: {node: '>=18'}
-
-  flat-cache@4.0.1:
-    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
-    engines: {node: '>=16'}
-
-  flatted@3.3.1:
-    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
-
-  fn.name@1.1.0:
-    resolution: {integrity: sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==}
-
-  for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
-
   for-each@0.3.5:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
 
-  formdata-polyfill@4.0.10:
-    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
-    engines: {node: '>=12.20.0'}
-
   forwarded-parse@2.1.2:
     resolution: {integrity: sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==}
 
@@ -5420,22 +4858,10 @@ packages:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
 
-  fraction.js@4.3.7:
-    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
-
-  fresh@0.5.2:
-    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
-    engines: {node: '>= 0.6'}
-
   fresh@2.0.0:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
 
-  fsevents@2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -5444,10 +4870,6 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  function.prototype.name@1.1.6:
-    resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
-    engines: {node: '>= 0.4'}
-
   function.prototype.name@1.1.8:
     resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
     engines: {node: '>= 0.4'}
@@ -5455,14 +4877,14 @@ packages:
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
+  generator-function@2.0.1:
+    resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
+    engines: {node: '>= 0.4'}
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
-  get-amd-module-type@6.0.1:
-    resolution: {integrity: sha512-MtjsmYiCXcYDDrGqtNbeIYdAl85n+5mSv2r3FbzER/YV3ZILw4HNNIw34HuV5pyl0jzs6GFYU1VHVEefhgcNHQ==}
-    engines: {node: '>=18'}
-
   get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -5475,50 +4897,23 @@ packages:
     resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
     engines: {node: '>=6'}
 
-  get-port-please@3.2.0:
-    resolution: {integrity: sha512-I9QVvBw5U/hw3RmWpYKRumUeaDgxTPd401x364rLmWBJcOQ753eov1eTgzDqRG9bqFIfDc7gfzcQEWrUri3o1A==}
-
-  get-port@7.1.0:
-    resolution: {integrity: sha512-QB9NKEeDg3xxVwCCwJQ9+xycaz6pBB6iQ76wiWMl1927n0Kir6alPiP+yuiICLLU4jpMe08dXfpebuQppFA2zw==}
-    engines: {node: '>=16'}
-
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
-  get-stream@5.2.0:
-    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
-    engines: {node: '>=8'}
-
-  get-stream@8.0.1:
-    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
-    engines: {node: '>=16'}
-
   get-stream@9.0.1:
     resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
     engines: {node: '>=18'}
 
-  get-symbol-description@1.0.2:
-    resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
-    engines: {node: '>= 0.4'}
-
   get-symbol-description@1.1.0:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
 
-  get-tsconfig@4.10.1:
-    resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
-
-  github-slugger@2.0.0:
-    resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
+  get-tsconfig@4.13.7:
+    resolution: {integrity: sha512-7tN6rFgBlMgpBML5j8typ92BKFi2sFQvIdpAqLA2beia5avZDrMs0FLZiM5etShWq5irVyGcGMEA1jcDaK7A/Q==}
 
-  glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
-
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
+  gifenc@1.0.3:
+    resolution: {integrity: sha512-xdr6AdrfGBcfzncONUOlXMBuc5wJDtOueE3c5rdG0oNgtINLD+f2iFZltrBRZYzACRbKr+mSVU/x98zv2u3jmw==}
 
   glob-to-regex.js@1.2.0:
     resolution: {integrity: sha512-QMwlOQKU/IzqMUOAZWubUOT8Qft+Y0KQWnX9nK3ch0CJg0tTp4TvGZsTfudYKv2NzoQSyPcnA6TYeIQ3jGichQ==}
@@ -5526,39 +4921,20 @@ packages:
     peerDependencies:
       tslib: '2'
 
-  glob@13.0.0:
-    resolution: {integrity: sha512-tvZgpqk6fz4BaNZ66ZsRaZnbHvP/jG3uKJvAZOwEVUL4RTA5nJeeLYfyN9/VA8NX/V3IBG+hkeuGpKjvELkVhA==}
-    engines: {node: 20 || >=22}
-
-  globals@14.0.0:
-    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
-    engines: {node: '>=18'}
-
-  globals@15.15.0:
-    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
-    engines: {node: '>=18'}
-
-  globalthis@1.0.3:
-    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
-    engines: {node: '>= 0.4'}
+  glob@13.0.6:
+    resolution: {integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==}
+    engines: {node: 18 || 20 || >=22}
+    hasBin: true
 
   globalthis@1.0.4:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
 
-  globrex@0.1.2:
-    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
-
   glsl-noise@0.0.0:
     resolution: {integrity: sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==}
 
-  gonzales-pe@4.3.0:
-    resolution: {integrity: sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==}
-    engines: {node: '>=0.6.0'}
-    hasBin: true
-
-  goober@2.1.16:
-    resolution: {integrity: sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==}
+  goober@2.1.18:
+    resolution: {integrity: sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw==}
     peerDependencies:
       csstype: ^3.0.10
 
@@ -5569,8 +4945,9 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+  graphql@16.13.2:
+    resolution: {integrity: sha512-5bJ+nf/UCpAjHM8i06fl7eLyVC9iuNAjm9qzkiu2ZGhM0VscSvS6WDPfAwkdkBuoXGM9FJSbKl6wylMwP9Ktig==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
 
   gray-matter@4.0.3:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
@@ -5580,12 +4957,10 @@ packages:
     resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
     engines: {node: '>=10'}
 
-  h3@1.15.4:
-    resolution: {integrity: sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ==}
-
-  h3@2.0.0-beta.5:
-    resolution: {integrity: sha512-ApIkLH+nTxzCC0Nq/GN1v6jkvu2eOLfdTnTs6ghiuG1EYHWJBDLzhk5tn7SZMEUNsLUjG4qfmqzBx2LG9I7Q/w==}
+  h3@2.0.1-rc.20:
+    resolution: {integrity: sha512-28ljodXuUp0fZovdiSRq4G9OgrxCztrJe5VdYzXAB7ueRvI7pIUqLU14Xi3XqdYJ/khXjfpUOOD2EQa6CmBgsg==}
     engines: {node: '>=20.11.1'}
+    hasBin: true
     peerDependencies:
       crossws: ^0.4.1
     peerDependenciesMeta:
@@ -5595,8 +4970,9 @@ packages:
   hachure-fill@0.5.2:
     resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
 
-  has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
 
   has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
@@ -5609,10 +4985,6 @@ packages:
   has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
-  has-proto@1.0.3:
-    resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
-    engines: {node: '>= 0.4'}
-
   has-proto@1.2.0:
     resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
     engines: {node: '>= 0.4'}
@@ -5629,32 +5001,23 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
-  hast-util-from-html@2.0.3:
-    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
-
   hast-util-from-parse5@8.0.3:
     resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
 
-  hast-util-heading-rank@3.0.0:
-    resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==}
-
-  hast-util-is-element@3.0.0:
-    resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
-
   hast-util-parse-selector@4.0.0:
     resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
 
   hast-util-raw@9.1.0:
     resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}
 
-  hast-util-to-html@9.0.5:
-    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+  hast-util-sanitize@5.0.2:
+    resolution: {integrity: sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg==}
 
-  hast-util-to-parse5@8.0.0:
-    resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
 
-  hast-util-to-string@3.0.1:
-    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
+  hast-util-to-parse5@8.0.1:
+    resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==}
 
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
@@ -5662,12 +5025,6 @@ packages:
   hastscript@9.0.1:
     resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
 
-  hermes-estree@0.25.1:
-    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
-
-  hermes-parser@0.25.1:
-    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
-
   hls.js@1.6.15:
     resolution: {integrity: sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==}
 
@@ -5675,69 +5032,33 @@ packages:
     resolution: {integrity: sha512-RqGs4wavGYJWE07t35JQccByczmNUXQT0E12ZYV1VKYu5UiAU9lsos/yBAcf840+zrUQQxgVduCR5/B8nNtibg==}
     hasBin: true
 
-  hoist-non-react-statics@3.3.2:
-    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
-
-  hono-rate-limiter@0.4.2:
-    resolution: {integrity: sha512-AAtFqgADyrmbDijcRTT/HJfwqfvhalya2Zo+MgfdrMPas3zSMD8SU03cv+ZsYwRU1swv7zgVt0shwN059yzhjw==}
-    peerDependencies:
-      hono: ^4.1.1
-
-  hono@4.11.3:
-    resolution: {integrity: sha512-PmQi306+M/ct/m5s66Hrg+adPnkD5jiO6IjA7WhWw0gSBSo1EcRegwuI1deZ+wd5pzCGynCcn2DprnE4/yEV4w==}
+  hono@4.12.9:
+    resolution: {integrity: sha512-wy3T8Zm2bsEvxKZM5w21VdHDDcwVS1yUFFY6i8UobSsKfFceT7TOwhbhfKsDyx7tYQlmRM5FLpIuYvNFyjctiA==}
     engines: {node: '>=16.9.0'}
 
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
-  hosted-git-info@7.0.2:
-    resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  htm@3.1.1:
-    resolution: {integrity: sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==}
-
-  html-dom-parser@5.0.8:
-    resolution: {integrity: sha512-vuWiX9EXgu8CJ5m9EP5c7bvBmNSuQVnrY8tl0z0ZX96Uth1IPlYH/8W8VZ/hBajFf18EN+j2pukbCNd01HEd1w==}
-
-  html-react-parser@5.1.10:
-    resolution: {integrity: sha512-gV22PvLij4wdEdtrZbGVC7Zy2OVWnQ0bYhX63S196ZRSx4+K0TuutCreHSXr+saUia8KeKB+2TYziVfijpH4Tw==}
-    peerDependencies:
-      '@types/react': 17 || 18
-      react: 0.14 || 15 || 16 || 17 || 18
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  htm@3.1.1:
+    resolution: {integrity: sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==}
+
+  html-url-attributes@3.0.1:
+    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
 
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
-  htmlparser2@10.0.0:
-    resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==}
-
-  htmlparser2@9.1.0:
-    resolution: {integrity: sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==}
+  htmlparser2@10.1.0:
+    resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==}
 
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
 
-  http-shutdown@1.2.2:
-    resolution: {integrity: sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==}
-    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
-
   https-proxy-agent@5.0.1:
     resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
     engines: {node: '>= 6'}
 
-  https-proxy-agent@7.0.6:
-    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
-    engines: {node: '>= 14'}
-
-  human-signals@5.0.0:
-    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
-    engines: {node: '>=16.17.0'}
-
   human-signals@8.0.1:
     resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
     engines: {node: '>=18.18.0'}
@@ -5751,10 +5072,6 @@ packages:
     resolution: {integrity: sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==}
     engines: {node: '>=10.18'}
 
-  iconv-lite@0.4.24:
-    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
-    engines: {node: '>=0.10.0'}
-
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -5766,62 +5083,34 @@ packages:
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
-  ignore@5.3.2:
-    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
-    engines: {node: '>= 4'}
-
   ignore@7.0.5:
     resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
     engines: {node: '>= 4'}
 
-  image-meta@0.2.2:
-    resolution: {integrity: sha512-3MOLanc3sb3LNGWQl1RlQlNWURE5g32aUphrDyFeCsxBTk08iE3VNe4CwsUZ0Qs1X+EfX0+r29Sxdpza4B+yRA==}
-
-  image-size@2.0.2:
-    resolution: {integrity: sha512-IRqXKlaXwgSMAMtpNzZa1ZAe8m+Sa1770Dhk8VkSsP9LS+iHD62Zd8FQKs8fbPiagBE7BzoFX23cxFnwshpV6w==}
-    engines: {node: '>=16.x'}
-    hasBin: true
-
   immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
 
-  import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
-    engines: {node: '>=6'}
-
-  import-in-the-middle@2.0.1:
-    resolution: {integrity: sha512-bruMpJ7xz+9jwGzrwEhWgvRrlKRYCRDBrfU+ur3FcasYXLJDxTruJ//8g2Noj+QFyRBeqbpj8Bhn4Fbw6HjvhA==}
+  import-in-the-middle@2.0.6:
+    resolution: {integrity: sha512-3vZV3jX0XRFW3EJDTwzWoZa+RH1b8eTTx6YOCjglrLyPuepwoBti1k3L2dKwdCUrnVEfc5CuRuGstaC/uQJJaw==}
 
-  imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
-
-  indent-string@5.0.0:
-    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
-    engines: {node: '>=12'}
-
-  index-to-position@1.2.0:
-    resolution: {integrity: sha512-Yg7+ztRkqslMAS2iFaU+Oa4KTSidr63OsFGlOrJoW981kIYO3CGCS3wA95P1mUi/IVSJkn0D479KTJpVpvFNuw==}
+  import-in-the-middle@3.0.0:
+    resolution: {integrity: sha512-OnGy+eYT7wVejH2XWgLRgbmzujhhVIATQH0ztIeRilwHBjTeG3pD+XnH3PKX0r9gJ0BuJmJ68q/oh9qgXnNDQg==}
     engines: {node: '>=18'}
 
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
-  inline-style-parser@0.2.3:
-    resolution: {integrity: sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g==}
+  inline-style-parser@0.2.7:
+    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
 
-  instantsearch-ui-components@0.11.1:
-    resolution: {integrity: sha512-ZqUbJYYgObQ47J08ftXV1KNC1vdEoiD4/49qrkCdW46kRzLxLgYXJGuEuk48DQwK4aBtIoccgTyfbMGfcqNjxg==}
+  instantsearch-ui-components@0.23.0:
+    resolution: {integrity: sha512-ILqp/RAm0mBrsFuGozTk09tPpQMiODtcLVHQRudXBC23YcaTpt9qTB30nWy5yHODb15dBH5DoUw7gqyUo/PPkw==}
 
-  instantsearch.js@4.78.1:
-    resolution: {integrity: sha512-nDTWQ6DUxYzBZfkSxb/QJsYMZPPU8SGlGurn9147ABvA5Eumtxmk3Qy55EBMl0VxKVltGy3axAYMRB/gKIIHkg==}
+  instantsearch.js@4.93.0:
+    resolution: {integrity: sha512-pTJN2ZPpySSpnTxbPo0f/l7IDjgvC/IoxRXgnQV2TT423uGXviEkzQuU2KcdfG9kio6nqcgBU3kQTe07OoHzkw==}
     peerDependencies:
       algoliasearch: '>= 3.1 < 6'
 
-  internal-slot@1.0.7:
-    resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
-    engines: {node: '>= 0.4'}
-
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
@@ -5836,20 +5125,19 @@ packages:
   interval-tree-1d@1.0.4:
     resolution: {integrity: sha512-wY8QJH+6wNI0uh4pDQzMvl+478Qh7Rl4qLmqiluxALlNvl+I+o5x38Pw3/z7mDPTPS1dQalZJXsmbvxx5gclhQ==}
 
+  ip-address@10.1.0:
+    resolution: {integrity: sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==}
+    engines: {node: '>= 12'}
+
   ipaddr.js@1.9.1:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
 
-  ipx@3.1.1:
-    resolution: {integrity: sha512-7Xnt54Dco7uYkfdAw0r2vCly3z0rSaVhEXMzPvl3FndsTVm5p26j+PO+gyinkYmcsEUvX2Rh7OGK7KzYWRu6BA==}
-    hasBin: true
-
-  iron-webcrypto@1.2.1:
-    resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
 
-  is-array-buffer@3.0.4:
-    resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
-    engines: {node: '>= 0.4'}
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
 
   is-array-buffer@3.0.5:
     resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
@@ -5858,25 +5146,14 @@ packages:
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
-  is-async-function@2.0.0:
-    resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
     engines: {node: '>= 0.4'}
 
-  is-bigint@1.0.4:
-    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
-
   is-bigint@1.1.0:
     resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
     engines: {node: '>= 0.4'}
 
-  is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-
-  is-boolean-object@1.1.2:
-    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
-    engines: {node: '>= 0.4'}
-
   is-boolean-object@1.2.2:
     resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
     engines: {node: '>= 0.4'}
@@ -5893,32 +5170,22 @@ packages:
     resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
     engines: {node: '>= 0.4'}
 
-  is-date-object@1.0.5:
-    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
-    engines: {node: '>= 0.4'}
-
   is-date-object@1.1.0:
     resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
 
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
   is-docker@2.2.1:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
     engines: {node: '>=8'}
     hasBin: true
 
-  is-docker@3.0.0:
-    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    hasBin: true
-
   is-extendable@0.1.1:
     resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
     engines: {node: '>=0.10.0'}
 
-  is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
-
   is-finalizationregistry@1.1.1:
     resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
     engines: {node: '>= 0.4'}
@@ -5927,18 +5194,12 @@ packages:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
-  is-generator-function@1.0.10:
-    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
+  is-generator-function@1.1.2:
+    resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
     engines: {node: '>= 0.4'}
 
-  is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
-
-  is-inside-container@1.0.0:
-    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
-    engines: {node: '>=14.16'}
-    hasBin: true
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
 
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
@@ -5948,48 +5209,20 @@ packages:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
 
-  is-network-error@1.1.0:
-    resolution: {integrity: sha512-tUdRRAnhT+OtCZR/LxZelH/C7QtjtFrTu5tXCA8pl55eTUElUHT+GPYV8MBMBvea/j+NxQqVt3LbWMRir7Gx9g==}
-    engines: {node: '>=16'}
-
-  is-number-object@1.0.7:
-    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
-    engines: {node: '>= 0.4'}
-
   is-number-object@1.1.1:
     resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
     engines: {node: '>= 0.4'}
 
-  is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
-
-  is-path-inside@4.0.0:
-    resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
-    engines: {node: '>=12'}
-
-  is-plain-obj@2.1.0:
-    resolution: {integrity: sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==}
-    engines: {node: '>=8'}
-
   is-plain-obj@4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
-  is-plain-object@5.0.0:
-    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
-    engines: {node: '>=0.10.0'}
-
   is-promise@2.2.2:
     resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
 
   is-promise@4.0.0:
     resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
 
-  is-regex@1.1.4:
-    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
-    engines: {node: '>= 0.4'}
-
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
@@ -5998,46 +5231,22 @@ packages:
     resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
     engines: {node: '>= 0.4'}
 
-  is-shared-array-buffer@1.0.3:
-    resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==}
-    engines: {node: '>= 0.4'}
-
   is-shared-array-buffer@1.0.4:
     resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
     engines: {node: '>= 0.4'}
 
-  is-stream@2.0.1:
-    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
-    engines: {node: '>=8'}
-
-  is-stream@3.0.0:
-    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   is-stream@4.0.1:
     resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
     engines: {node: '>=18'}
 
-  is-string@1.0.7:
-    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
-    engines: {node: '>= 0.4'}
-
   is-string@1.1.1:
     resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
     engines: {node: '>= 0.4'}
 
-  is-symbol@1.0.4:
-    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
-    engines: {node: '>= 0.4'}
-
   is-symbol@1.1.1:
     resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
     engines: {node: '>= 0.4'}
 
-  is-typed-array@1.1.13:
-    resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==}
-    engines: {node: '>= 0.4'}
-
   is-typed-array@1.1.15:
     resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
     engines: {node: '>= 0.4'}
@@ -6046,48 +5255,30 @@ packages:
     resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
     engines: {node: '>=18'}
 
-  is-url-superb@4.0.0:
-    resolution: {integrity: sha512-GI+WjezhPPcbM+tqE9LnmsY5qqjwHzTvjJ36wxYX5ujNXefSUJ/T17r5bqDV8yLhcgB59KTPNOc9O9cmHTPWsA==}
-    engines: {node: '>=10'}
-
-  is-url@1.2.4:
-    resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
-
   is-weakmap@2.0.2:
     resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
     engines: {node: '>= 0.4'}
 
-  is-weakref@1.0.2:
-    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
-
   is-weakref@1.1.1:
     resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
     engines: {node: '>= 0.4'}
 
-  is-weakset@2.0.3:
-    resolution: {integrity: sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==}
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
     engines: {node: '>= 0.4'}
 
   is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
 
-  is-wsl@3.1.0:
-    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
-    engines: {node: '>=16'}
-
-  is64bit@2.0.0:
-    resolution: {integrity: sha512-jv+8jaWCl0g2lSBkNSVXdzfBA0npK1HGC2KtWM9FumFRoGS94g3NbCCLVnCYHLjp4GrW2KZeeSTMo5ddtznmGw==}
-    engines: {node: '>=18'}
-
   isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
   isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
 
-  isbot@5.1.31:
-    resolution: {integrity: sha512-DPgQshehErHAqSCKDb3rNW03pa2wS/v5evvUqtxt6TTnHRqAG8FdzcSSJs9656pK6Y+NT7K9R4acEYXLHYfpUQ==}
+  isbot@5.1.37:
+    resolution: {integrity: sha512-5bcicX81xf6NlTEV8rWdg7Pk01LFizDetuYGHx6d/f6y3lR2/oo8IfxjzJqn1UdDEyCcwT9e7NRloj8DwCYujQ==}
     engines: {node: '>=18'}
 
   isexe@2.0.0:
@@ -6096,10 +5287,6 @@ packages:
   isoformat@0.2.1:
     resolution: {integrity: sha512-tFLRAygk9NqrRPhJSnNGh7g7oaVWDwR0wKh/GM2LgmPa50Eg4UfyaCO4I8k6EqJHl1/uh2RAD6g06n5ygEnrjQ==}
 
-  iterator.prototype@1.1.5:
-    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
-    engines: {node: '>= 0.4'}
-
   its-fine@2.0.0:
     resolution: {integrity: sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==}
     peerDependencies:
@@ -6110,25 +5297,18 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  jiti@2.5.1:
-    resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
-    hasBin: true
-
-  jiti@2.6.0:
-    resolution: {integrity: sha512-VXe6RjJkBPj0ohtqaO8vSWP3ZhAKo66fKrFNCll4BTcwljPLz03pCbaNKfzGP5MbrCYcbJ7v0nOYYwUzTEIdXQ==}
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
 
-  jose@5.10.0:
-    resolution: {integrity: sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==}
-
-  jose@6.1.3:
-    resolution: {integrity: sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==}
+  jose@6.2.2:
+    resolution: {integrity: sha512-d7kPDd34KO/YnzaDOlikGpOurfF0ByC2sEV4cANCtdqLlTfBlw2p14O/5d/zv40gJPbIQxfES3nSx1/oYNyuZQ==}
 
-  jpeg-js@0.4.4:
-    resolution: {integrity: sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==}
+  js-cookie@3.0.8:
+    resolution: {integrity: sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==}
 
-  js-image-generator@1.0.4:
-    resolution: {integrity: sha512-ckb7kyVojGAnArouVR+5lBIuwU1fcrn7E/YYSd0FK7oIngAkMmRvHASLro9Zt5SQdWToaI66NybG+OGxPw/HlQ==}
+  js-tokens@10.0.0:
+    resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
 
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@@ -6142,17 +5322,12 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
-
   json-parse-better-errors@1.0.2:
     resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
 
-  json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-
-  json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+  json-schema-to-ts@3.1.1:
+    resolution: {integrity: sha512-+DWg8jCJG2TEnpy7kOm/7/AxaYoaRbjVB4LFZLySZlWn8exGs3A4OLJR966cVvU26N7X9TWxl+Jsw7dzAqKT6g==}
+    engines: {node: '>=16'}
 
   json-schema-traverse@1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
@@ -6160,50 +5335,21 @@ packages:
   json-schema-typed@8.0.2:
     resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
 
-  json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+  json-with-bigint@3.5.8:
+    resolution: {integrity: sha512-eq/4KP6K34kwa7TcFdtvnftvHCD9KvHOGGICWwMFc4dOOKF5t4iYqnfLK8otCRCRv06FXOzGGyqE8h8ElMvvdw==}
 
   json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
     hasBin: true
 
-  jsonpointer@5.0.1:
-    resolution: {integrity: sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==}
-    engines: {node: '>=0.10.0'}
-
-  jsonwebtoken@9.0.2:
-    resolution: {integrity: sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==}
-    engines: {node: '>=12', npm: '>=6'}
-
-  jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
-
   jszip@3.10.1:
     resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
 
-  junk@4.0.1:
-    resolution: {integrity: sha512-Qush0uP+G8ZScpGMZvHUiRfI0YBWuB3gVBYlI0v0vvOJt5FLicco+IkP0a50LqTTQhmts/m6tP5SWE+USyIvcQ==}
-    engines: {node: '>=12.20'}
-
-  jwa@2.0.1:
-    resolution: {integrity: sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==}
-
-  jws@4.0.1:
-    resolution: {integrity: sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==}
-
-  jwt-decode@4.0.0:
-    resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
-    engines: {node: '>=18'}
-
-  katex@0.16.22:
-    resolution: {integrity: sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==}
+  katex@0.16.44:
+    resolution: {integrity: sha512-EkxoDTk8ufHqHlf9QxGwcxeLkWRR3iOuYfRpfORgYfqc8s13bgb+YtRY59NK5ZpRaCwq1kqA6a5lpX8C/eLphQ==}
     hasBin: true
 
-  keyv@4.5.4:
-    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
-
   khroma@2.1.0:
     resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==}
 
@@ -6211,31 +5357,16 @@ packages:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
 
-  kolorist@1.8.0:
-    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
-
-  kuler@2.0.0:
-    resolution: {integrity: sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==}
-
-  kysely@0.28.5:
-    resolution: {integrity: sha512-rlB0I/c6FBDWPcQoDtkxi9zIvpmnV5xoIalfCMSMCa7nuA6VGA3F54TW9mEgX4DVf10sXAWCF5fDbamI/5ZpKA==}
-    engines: {node: '>=20.0.0'}
-
-  lambda-local@2.2.0:
-    resolution: {integrity: sha512-bPcgpIXbHnVGfI/omZIlgucDqlf4LrsunwoKue5JdZeGybt8L6KyJz2Zu19ffuZwIwLj2NAI2ZyaqNT6/cetcg==}
-    engines: {node: '>=8'}
-    hasBin: true
-
-  langium@3.3.1:
-    resolution: {integrity: sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w==}
-    engines: {node: '>=16.0.0'}
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
 
-  language-subtag-registry@0.3.22:
-    resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
+  langium@4.2.1:
+    resolution: {integrity: sha512-zu9QWmjpzJcomzdJQAHgDVhLGq5bLosVak1KVa40NzQHXfqr4eAHupvnPOVXEoLkg6Ocefvf/93d//SB7du4YQ==}
+    engines: {node: '>=20.10.0', npm: '>=10.2.3'}
 
-  language-tags@1.0.9:
-    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
-    engines: {node: '>=0.10'}
+  launch-editor@2.13.2:
+    resolution: {integrity: sha512-4VVDnbOpLXy/s8rdRCSXb+zfMeFR0WlJWpET1iA9CQdlZDfwyLjUuGQzXU4VeOoey6AicSAluWan7Etga6Kcmg==}
 
   layout-base@1.0.2:
     resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
@@ -6243,144 +5374,105 @@ packages:
   layout-base@2.0.1:
     resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==}
 
-  lazystream@1.0.1:
-    resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
-    engines: {node: '>= 0.6.3'}
-
-  leven@3.1.0:
-    resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
-    engines: {node: '>=6'}
-
-  levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
-
   lie@3.3.0:
     resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
 
-  lightningcss-darwin-arm64@1.30.1:
-    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  lightningcss-darwin-x64@1.30.1:
-    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  lightningcss-freebsd-x64@1.30.1:
-    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  lightningcss-linux-arm-gnueabihf@1.30.1:
-    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
-  lightningcss-linux-arm64-gnu@1.30.1:
-    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
-  lightningcss-linux-arm64-musl@1.30.1:
-    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
-  lightningcss-linux-x64-gnu@1.30.1:
-    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
-  lightningcss-linux-x64-musl@1.30.1:
-    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
-  lightningcss-win32-arm64-msvc@1.30.1:
-    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  lightningcss-win32-x64-msvc@1.30.1:
-    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
-  lightningcss@1.30.1:
-    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
     engines: {node: '>= 12.0.0'}
 
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+  lit-element@4.2.2:
+    resolution: {integrity: sha512-aFKhNToWxoyhkNDmWZwEva2SlQia+jfG0fjIWV//YeTaWrVnOxD89dPKfigCUspXFmjzOEUQpOkejH5Ly6sG0w==}
 
-  listhen@1.9.0:
-    resolution: {integrity: sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg==}
-    hasBin: true
+  lit-html@3.3.2:
+    resolution: {integrity: sha512-Qy9hU88zcmaxBXcc10ZpdK7cOLXvXpRoBxERdtqV9QOrfpMZZ6pSYP91LhpPtap3sFMUiL7Tw2RImbe0Al2/kw==}
+
+  lit@3.3.2:
+    resolution: {integrity: sha512-NF9zbsP79l4ao2SNrH3NkfmFgN/hBYSQo90saIVI1o5GpjAdCPVstVzO1MrLOakHoEhYkrtRjPK6Ob521aoYWQ==}
 
   load-json-file@4.0.0:
     resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
     engines: {node: '>=4'}
 
-  local-pkg@1.1.2:
-    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
-    engines: {node: '>=14'}
-
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
-  locate-path@7.2.0:
-    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
-  lodash-es@4.17.21:
-    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
-
-  lodash.castarray@4.4.0:
-    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
-
-  lodash.includes@4.3.0:
-    resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
-
-  lodash.isboolean@3.0.3:
-    resolution: {integrity: sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==}
-
-  lodash.isinteger@4.0.4:
-    resolution: {integrity: sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==}
-
-  lodash.isnumber@3.0.3:
-    resolution: {integrity: sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==}
-
-  lodash.isplainobject@4.0.6:
-    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+  lodash-es@4.17.23:
+    resolution: {integrity: sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==}
 
-  lodash.isstring@4.0.1:
-    resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
-
-  lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-
-  lodash.once@4.1.1:
-    resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
-
-  lodash@4.17.21:
-    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-
-  logform@2.7.0:
-    resolution: {integrity: sha512-TFYA4jnP7PVbmlBIfhlSe+WKxs9dklXMTEGcBCIvLhE/Tn3H6Gk1norupVW7m5Cnd4bLcr08AytbyV/xj7f/kQ==}
-    engines: {node: '>= 12.0.0'}
+  lodash@4.17.23:
+    resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
 
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
@@ -6389,62 +5481,52 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
-  lru-cache@10.4.3:
-    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
-
-  lru-cache@11.2.4:
-    resolution: {integrity: sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==}
+  lru-cache@11.2.7:
+    resolution: {integrity: sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==}
     engines: {node: 20 || >=22}
 
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  lru-cache@7.18.3:
-    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
-    engines: {node: '>=12'}
-
-  lucide-react@0.554.0:
-    resolution: {integrity: sha512-St+z29uthEJVx0Is7ellNkgTEhaeSoA42I7JjOCBCrc5X6LYMGSv0P/2uS5HDLTExP5tpiqRD2PyUEOS6s9UXA==}
+  lucide-react@1.7.0:
+    resolution: {integrity: sha512-yI7BeItCLZJTXikmK4KNUGCKoGzSvbKlfCvw44bU4fXAL6v3gYS4uHD1jzsLkfwODYwI6Drw5Tu9Z5ulDe0TSg==}
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  lucide-react@0.561.0:
-    resolution: {integrity: sha512-Y59gMY38tl4/i0qewcqohPdEbieBy7SovpBL9IFebhc2mDd8x4PZSOsiFRkpPcOq6bj1r/mjH/Rk73gSlIJP2A==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  luxon@3.5.0:
-    resolution: {integrity: sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==}
-    engines: {node: '>=12'}
-
   maath@0.10.8:
     resolution: {integrity: sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==}
     peerDependencies:
       '@types/three': '>=0.134.0'
       three: '>=0.134.0'
 
-  magic-string@0.30.17:
-    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
-
-  magic-string@0.30.19:
-    resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
-
-  magic-string@0.30.8:
-    resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
-    engines: {node: '>=12'}
-
-  map-obj@5.0.2:
-    resolution: {integrity: sha512-K6K2NgKnTXimT3779/4KxSvobxOtMmx1LBZ3NwRxT/MDIR3Br/fQ4Q+WCX5QxjyUR8zg5+RV9Tbf2c5pAWTD2A==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
-  marked@15.0.12:
-    resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==}
-    engines: {node: '>= 18'}
+  markdown-to-jsx@7.7.17:
+    resolution: {integrity: sha512-7mG/1feQ0TX5I7YyMZVDgCC/y2I3CiEhIRQIhyov9nGBP5eoVrOXXHuL5ZP8GRfxVZKRiXWJgwXkb9It+nQZfQ==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      react: '>= 0.14.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+
+  marked@16.4.2:
+    resolution: {integrity: sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==}
+    engines: {node: '>= 20'}
     hasBin: true
 
+  marked@17.0.6:
+    resolution: {integrity: sha512-gB0gkNafnonOw0obSTEGZTT86IuhILt2Wfx0mWH/1Au83kybTayroZ/V6nS25mN7u8ASy+5fMhgB3XPNrOZdmA==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
+  match-sorter@8.2.0:
+    resolution: {integrity: sha512-qRVB7wYMJXizAWR4TKo5UYwgW7oAVzA8V9jve0wGzRvV91ou9dcqL+/2gJtD0PZ/Pm2Fq6cVT4VHXHmDFVMGRA==}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -6452,8 +5534,8 @@ packages:
   mdast-util-find-and-replace@3.0.2:
     resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
-  mdast-util-from-markdown@2.0.2:
-    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+  mdast-util-from-markdown@2.0.3:
+    resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
 
   mdast-util-gfm-autolink-literal@2.0.1:
     resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
@@ -6473,6 +5555,15 @@ packages:
   mdast-util-gfm@3.1.0:
     resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
 
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
   mdast-util-phrasing@4.1.0:
     resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
 
@@ -6485,59 +5576,33 @@ packages:
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
-  mdn-data@2.0.28:
-    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
-
-  mdn-data@2.12.2:
-    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
-
-  media-typer@0.3.0:
-    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
-    engines: {node: '>= 0.6'}
-
   media-typer@1.1.0:
     resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
     engines: {node: '>= 0.8'}
 
-  memfs@4.51.1:
-    resolution: {integrity: sha512-Eyt3XrufitN2ZL9c/uIRMyDwXanLI88h/L3MoWqNY747ha3dMR9dWqp8cRT5ntjZ0U1TNuq4U91ZXK0sMBjYOQ==}
+  memfs@4.57.1:
+    resolution: {integrity: sha512-WvzrWPwMQT+PtbX2Et64R4qXKK0fj/8pO85MrUCzymX3twwCiJCdvntW3HdhG1teLJcHDDLIKx5+c3HckWYZtQ==}
+    peerDependencies:
+      tslib: '2'
 
   memorystream@0.3.1:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
 
-  merge-descriptors@1.0.3:
-    resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
-
   merge-descriptors@2.0.0:
     resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
     engines: {node: '>=18'}
 
-  merge-options@3.0.4:
-    resolution: {integrity: sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==}
-    engines: {node: '>=10'}
-
-  merge-stream@2.0.0:
-    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-
-  merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-
-  mermaid@11.11.0:
-    resolution: {integrity: sha512-9lb/VNkZqWTRjVgCV+l1N+t4kyi94y+l5xrmBmbbxZYkfRl5hEDaTPMOcaWKCl1McG8nBEaMlWwkcAEEgjhBgg==}
+  mermaid@11.14.0:
+    resolution: {integrity: sha512-GSGloRsBs+JINmmhl0JDwjpuezCsHB4WGI4NASHxL3fHo3o/BRXTxhDLKnln8/Q0lRFRyDdEjmk1/d5Sn1Xz8g==}
 
   meshline@3.3.1:
     resolution: {integrity: sha512-/TQj+JdZkeSUOl5Mk2J7eLcYTLiQm2IDzmlSvYm7ov15anEcDJ92GHqqazxTSreeNgfnYu24kiEvvv0WlbCdFQ==}
     peerDependencies:
       three: '>=0.137'
 
-  meshoptimizer@0.22.0:
-    resolution: {integrity: sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==}
-
-  methods@1.1.2:
-    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
-    engines: {node: '>= 0.6'}
+  meshoptimizer@1.0.1:
+    resolution: {integrity: sha512-Vix+QlA1YYT3FwmBBZ+49cE5y/b+pRrcXKqGpS5ouh33d3lSp2PoTpCw19E0cKDFWalembrHnIaZetf27a+W2g==}
 
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
@@ -6623,65 +5688,37 @@ packages:
   micromark@4.0.2:
     resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
 
-  micromatch@4.0.8:
-    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
-    engines: {node: '>=8.6'}
-
-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-
   mime-db@1.54.0:
     resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
     engines: {node: '>= 0.6'}
 
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-
-  mime-types@3.0.1:
-    resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
-    engines: {node: '>= 0.6'}
-
   mime-types@3.0.2:
     resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
     engines: {node: '>=18'}
 
-  mime@1.6.0:
-    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
-    engines: {node: '>=4'}
+  miniflare@4.20260617.1:
+    resolution: {integrity: sha512-Go3/gzStm99QHptsSgU+q1S+xDfLoRgwjJNY80kaTVi0ENhTyqKq+sc4xZiWBSbM7uUcJwmzm8+QFKtcYLJ9nw==}
+    engines: {node: '>=22.0.0'}
     hasBin: true
 
-  mimic-fn@4.0.0:
-    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
-    engines: {node: '>=12'}
-
-  minimatch@10.1.1:
-    resolution: {integrity: sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==}
-    engines: {node: 20 || >=22}
+  minimatch@10.2.5:
+    resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
+    engines: {node: 18 || 20 || >=22}
 
-  minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+  minimatch@3.1.5:
+    resolution: {integrity: sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==}
 
-  minimatch@5.1.6:
-    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+  minimatch@5.1.9:
+    resolution: {integrity: sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==}
     engines: {node: '>=10'}
 
-  minimatch@9.0.5:
-    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
-  minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+  minipass@7.1.3:
+    resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  minizlib@3.0.2:
-    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
-    engines: {node: '>= 18'}
-
   mkdirp@0.3.0:
     resolution: {integrity: sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew==}
     deprecated: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
@@ -6690,25 +5727,12 @@ packages:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
 
-  mkdirp@3.0.1:
-    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
-    engines: {node: '>=10'}
-    hasBin: true
-
-  mlly@1.7.4:
-    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
-
-  module-definition@6.0.1:
-    resolution: {integrity: sha512-FeVc50FTfVVQnolk/WQT8MX+2WVcDnTGiq6Wo+/+lJ2ET1bRVi3HG3YlJUfqagNMc/kUlFSoR96AJkxGpKz13g==}
-    engines: {node: '>=18'}
-    hasBin: true
+  mlly@1.8.2:
+    resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
 
   module-details-from-path@1.0.4:
     resolution: {integrity: sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==}
 
-  ms@2.0.0:
-    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
-
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -6716,48 +5740,21 @@ packages:
     resolution: {integrity: sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==}
     hasBin: true
 
-  msgpackr@1.11.8:
-    resolution: {integrity: sha512-bC4UGzHhVvgDNS7kn9tV8fAucIYUBuGojcaLiz7v+P63Lmtm0Xeji8B/8tYKddALXxJLpwIeBmUN3u64C4YkRA==}
+  msgpackr@1.11.9:
+    resolution: {integrity: sha512-FkoAAyyA6HM8wL882EcEyFZ9s7hVADSwG9xrVx3dxxNQAtgADTrJoEWivID82Iv1zWDsv/OtbrrcZAzGzOMdNw==}
 
   multipasta@0.2.7:
     resolution: {integrity: sha512-KPA58d68KgGil15oDqXjkUBEBYc00XvbPj5/X+dyzeo/lWm9Nc25pQRlf1D+gv4OpK7NM0J1odrbu9JNNGvynA==}
 
-  nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+  nanoid@3.3.12:
+    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
-
-  negotiator@0.6.3:
-    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
-    engines: {node: '>= 0.6'}
-
   negotiator@1.0.0:
     resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
     engines: {node: '>= 0.6'}
 
-  netlify-redirector@0.5.0:
-    resolution: {integrity: sha512-4zdzIP+6muqPCuE8avnrgDJ6KW/2+UpHTRcTbMXCIRxiRmyrX+IZ4WSJGZdHPWF3WmQpXpy603XxecZ9iygN7w==}
-
-  next-themes@0.4.6:
-    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
-    peerDependencies:
-      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
-
-  node-addon-api@7.1.1:
-    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
-
-  node-domexception@1.0.0:
-    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
-    engines: {node: '>=10.5.0'}
-    deprecated: Use your platform's native DOMException instead
-
-  node-fetch-native@1.6.7:
-    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
-
   node-fetch@2.7.0:
     resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
     engines: {node: 4.x || >=6.0.0}
@@ -6767,64 +5764,20 @@ packages:
       encoding:
         optional: true
 
-  node-fetch@3.3.2:
-    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
-  node-forge@1.3.3:
-    resolution: {integrity: sha512-rLvcdSyRCyouf6jcOIPe/BgwG/d7hKjzMKOas33/pHEr6gbq18IK9zV7DiPvzsz0oBJPme6qr6H6kGZuI9/DZg==}
-    engines: {node: '>= 6.13.0'}
-
   node-gyp-build-optional-packages@5.2.2:
     resolution: {integrity: sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==}
     hasBin: true
 
-  node-gyp-build@4.8.4:
-    resolution: {integrity: sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==}
-    hasBin: true
-
-  node-mock-http@1.0.3:
-    resolution: {integrity: sha512-jN8dK25fsfnMrVsEhluUTPkBFY+6ybu7jSB1n+ri/vOGjJxU8J9CZhpSGkHXSkFjtUhbmoncG/YG9ta5Ludqog==}
-
-  node-releases@2.0.19:
-    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
-
-  node-source-walk@7.0.1:
-    resolution: {integrity: sha512-3VW/8JpPqPvnJvseXowjZcirPisssnBuDikk6JIZ8jQzF7KJQX52iPFX4RYYxLycYH7IbMRSPUOga/esVjy5Yg==}
-    engines: {node: '>=18'}
-
-  node-stream-zip@1.15.0:
-    resolution: {integrity: sha512-LN4fydt9TqhZhThkZIVQnF9cwjU3qmUH9h78Mx/K7d3VvfRqqwthLwJEUOEL0QPZ0XQmNN7be5Ggit5+4dq3Bw==}
-    engines: {node: '>=0.12.0'}
+  node-releases@2.0.36:
+    resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==}
 
   nopt@1.0.10:
     resolution: {integrity: sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==}
     hasBin: true
 
-  nopt@8.1.0:
-    resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-    hasBin: true
-
   normalize-package-data@2.5.0:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
 
-  normalize-package-data@6.0.2:
-    resolution: {integrity: sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  normalize-path@2.1.1:
-    resolution: {integrity: sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==}
-    engines: {node: '>=0.10.0'}
-
-  normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-
-  normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
-
   normalize-wheel@1.0.1:
     resolution: {integrity: sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==}
 
@@ -6833,10 +5786,6 @@ packages:
     engines: {node: '>= 4'}
     hasBin: true
 
-  npm-run-path@5.3.0:
-    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   npm-run-path@6.0.0:
     resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
     engines: {node: '>=18'}
@@ -6844,12 +5793,6 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
-  number-flow@0.4.0:
-    resolution: {integrity: sha512-sG2ngZe0y3M8DSa9VQfMA5J9Yi1i4RYaaZ/lgawTJpICftFAGaFgTUydaavZmUbOZcBnjDqNizcsyb1MDhrGaw==}
-
-  oauth4webapi@3.7.0:
-    resolution: {integrity: sha512-Q52wTPUWPsVLVVmTViXPQFMW2h2xv2jnDGxypjpelCFKaOjLsm7AxYuOk1oQgFm95VNDbuggasu9htXrz6XwKw==}
-
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -6862,35 +5805,10 @@ packages:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
-  object.assign@4.1.5:
-    resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
-    engines: {node: '>= 0.4'}
-
   object.assign@4.1.7:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
-  object.entries@1.1.9:
-    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
-    engines: {node: '>= 0.4'}
-
-  object.fromentries@2.0.8:
-    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
-    engines: {node: '>= 0.4'}
-
-  object.values@1.2.1:
-    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
-    engines: {node: '>= 0.4'}
-
-  obuf@1.1.2:
-    resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==}
-
-  ofetch@1.4.1:
-    resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
-
-  omit.js@2.0.2:
-    resolution: {integrity: sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg==}
-
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
@@ -6898,37 +5816,53 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
-  one-time@1.0.0:
-    resolution: {integrity: sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==}
-
-  onetime@6.0.0:
-    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
-    engines: {node: '>=12'}
-
   open@7.4.2:
     resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==}
     engines: {node: '>=8'}
 
-  optionator@0.9.3:
-    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
-    engines: {node: '>= 0.8.0'}
+  openai@6.33.0:
+    resolution: {integrity: sha512-xAYN1W3YsDXJWA5F277135YfkEk6H7D3D6vWwRhJ3OEkzRgcyK8z/P5P9Gyi/wB4N8kK9kM5ZjprfvyHagKmpw==}
+    hasBin: true
+    peerDependencies:
+      ws: ^8.18.0
+      zod: ^3.25 || ^4.0
+    peerDependenciesMeta:
+      ws:
+        optional: true
+      zod:
+        optional: true
 
   own-keys@1.0.1:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
-  p-event@6.0.1:
-    resolution: {integrity: sha512-Q6Bekk5wpzW5qIyUP4gdMEujObYstZl6DMMOSenwBvV0BlE5LkDwkjs5yHbZmdCEq2o4RJx4tE1vwxFVf2FG1w==}
-    engines: {node: '>=16.17'}
+  oxc-parser@0.120.0:
+    resolution: {integrity: sha512-WyPWZlcIm+Fkte63FGfgFB8mAAk33aH9h5N9lphXVOHSXEBFFsmYdOBedVKly363aWABjZdaj/m9lBfEY4wt+w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxfmt@0.43.0:
+    resolution: {integrity: sha512-KTYNG5ISfHSdmeZ25Xzb3qgz9EmQvkaGAxgBY/p38+ZiAet3uZeu7FnMwcSQJg152Qwl0wnYAxDc+Z/H6cvrwA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  oxlint-tsgolint@0.19.0:
+    resolution: {integrity: sha512-pSzUmDjMyjC8iUUZ7fCLo0D1iUaYIfodd/WIQ6Zra11YkjkUQk3BOFoW4I5ec6uZ/0s2FEmxtiZ7hiTXFRp1cg==}
+    hasBin: true
+
+  oxlint@1.58.0:
+    resolution: {integrity: sha512-t4s9leczDMqlvOSjnbCQe7gtoLkWgBGZ7sBdCJ9EOj5IXFSG/X7OAzK4yuH4iW+4cAYe8kLFbC8tuYMwWZm+Cg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      oxlint-tsgolint: '>=0.18.0'
+    peerDependenciesMeta:
+      oxlint-tsgolint:
+        optional: true
 
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
-  p-limit@4.0.0:
-    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   p-limit@6.2.0:
     resolution: {integrity: sha512-kuUqqHNUqoIWp/c467RI4X6mmyuojY5jGutNU0wVTmEOOfcuwLqyMVoAi9MKi2Ak+5i9+nhmrK4ufZE8069kHA==}
     engines: {node: '>=18'}
@@ -6937,59 +5871,26 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-locate@6.0.0:
-    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
-  p-map@7.0.3:
-    resolution: {integrity: sha512-VkndIv2fIB99swvQoA65bm+fsmt6UNdGeIB0oxBs+WhAhdh08QA04JXpI7rbB9r08/nkbysKoya9rtDERYOYMA==}
-    engines: {node: '>=18'}
-
-  p-retry@6.2.1:
-    resolution: {integrity: sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==}
-    engines: {node: '>=16.17'}
-
-  p-timeout@6.1.4:
-    resolution: {integrity: sha512-MyIV3ZA/PmyBN/ud8vV9XzwTrNtR4jFrObymZYnZqMmW0zA8Z17vnT0rBgFE/TlohB+YCHqXMgZzb3Csp49vqg==}
-    engines: {node: '>=14.16'}
-
-  p-wait-for@5.0.2:
-    resolution: {integrity: sha512-lwx6u1CotQYPVju77R+D0vFomni/AqRfqLmqQ8hekklqZ6gAY9rONh7lBQ0uxWMkC2AuX9b2DVAl8To0NyP1JA==}
-    engines: {node: '>=12'}
-
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
-  package-manager-detector@1.3.0:
-    resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
+  package-manager-detector@1.6.0:
+    resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
 
   pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
-  parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
 
   parse-gitignore@2.0.0:
     resolution: {integrity: sha512-RmVuCHWsfu0QPNW+mraxh/xjQVw/lhUCUru8Zni3Ctq3AoMhpDTq0OVdKS6iesd6Kqb7viCV3isAL43dciOSog==}
     engines: {node: '>=14'}
 
-  parse-imports@2.2.1:
-    resolution: {integrity: sha512-OL/zLggRp8mFhKL0rNORUTR4yBYujK/uU+xZL+/0Rgm2QE4nLO9v8PzEweSJEbMGKmDRjJE4R3IMJlL2di4JeQ==}
-    engines: {node: '>= 18'}
-
   parse-json@4.0.0:
     resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
     engines: {node: '>=4'}
 
-  parse-json@5.2.0:
-    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
-    engines: {node: '>=8'}
-
-  parse-json@8.3.0:
-    resolution: {integrity: sha512-ybiGyvspI+fAoRQbIPRddCcSTV9/LsJbf0e/S85VLowVGzRmokfneg2kwVW/KU5rOXrPSbF1qAKPMgNTqqROQQ==}
-    engines: {node: '>=18'}
-
   parse-ms@4.0.0:
     resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
     engines: {node: '>=18'}
@@ -7007,6 +5908,9 @@ packages:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
 
+  partial-json@0.1.7:
+    resolution: {integrity: sha512-Njv/59hHaokb/hRUjce3Hdv12wd60MtM9Z5Olmn+nehe0QDAsRtRbJPvJ0Z91TusF0SuZRIvnM+S4l6EIP8leA==}
+
   path-data-parser@0.1.0:
     resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==}
 
@@ -7014,10 +5918,6 @@ packages:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
-  path-exists@5.0.0:
-    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -7029,70 +5929,41 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  path-scurry@2.0.1:
-    resolution: {integrity: sha512-oWyT4gICAu+kaA7QWk/jvCHWarMKNs6pXOGWKDTr7cw4IGcUbW+PeTfbaQiLGheFRpjo6O9J0PmyMfQPjH71oA==}
-    engines: {node: 20 || >=22}
+  path-scurry@2.0.2:
+    resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
+    engines: {node: 18 || 20 || >=22}
 
-  path-to-regexp@0.1.12:
-    resolution: {integrity: sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==}
+  path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
 
-  path-to-regexp@8.3.0:
-    resolution: {integrity: sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==}
+  path-to-regexp@8.4.1:
+    resolution: {integrity: sha512-fvU78fIjZ+SBM9YwCknCvKOUKkLVqtWDVctl0s7xIqfmfb38t2TT4ZU2gHm+Z8xGwgW+QWEU3oQSAzIbo89Ggw==}
 
   path-type@3.0.0:
     resolution: {integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==}
     engines: {node: '>=4'}
 
-  path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-
-  path-type@6.0.0:
-    resolution: {integrity: sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==}
-    engines: {node: '>=18'}
-
-  pathe@1.1.2:
-    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
-
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
-  pend@1.2.0:
-    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
-
   pg-int8@1.0.1:
     resolution: {integrity: sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==}
     engines: {node: '>=4.0.0'}
 
-  pg-numeric@1.0.2:
-    resolution: {integrity: sha512-BM/Thnrw5jm2kKLE5uJkXqqExRUY/toLHda65XgFTBTFYZyopbKjBe29Ii3RbkvlsMoFwD+tHeGaCjjv0gHlyw==}
-    engines: {node: '>=4'}
-
-  pg-protocol@1.10.3:
-    resolution: {integrity: sha512-6DIBgBQaTKDJyxnXaLiLR8wBpQQcGWuAESkRBX/t6OwA8YsqP+iVSiond2EDy6Y/dsGk8rh/jtax3js5NeV7JQ==}
+  pg-protocol@1.13.0:
+    resolution: {integrity: sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==}
 
   pg-types@2.2.0:
     resolution: {integrity: sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==}
     engines: {node: '>=4'}
 
-  pg-types@4.1.0:
-    resolution: {integrity: sha512-o2XFanIMy/3+mThw69O8d4n1E5zsLhdO+OPqswezu7Z5ekP4hYDqlDjlmOpYMbzY2Br0ufCwJLdDIXeNVwcWFg==}
-    engines: {node: '>=10'}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
-  picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
-
-  picomatch@4.0.3:
-    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
 
-  picoquery@2.5.0:
-    resolution: {integrity: sha512-j1kgOFxtaCyoFCkpoYG2Oj3OdGakadO7HZ7o5CqyRazlmBekKhbDoUnNnXASE07xSY4nDImWZkrZv7toSxMi/g==}
-
   pidtree@0.3.1:
     resolution: {integrity: sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==}
     engines: {node: '>=0.10'}
@@ -7109,19 +5980,6 @@ packages:
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
-  pkg-types@2.3.0:
-    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
-
-  playwright-core@1.57.0:
-    resolution: {integrity: sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  playwright@1.57.0:
-    resolution: {integrity: sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==}
-    engines: {node: '>=18'}
-    hasBin: true
-
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
@@ -7132,101 +5990,52 @@ packages:
   points-on-path@0.2.1:
     resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==}
 
-  possible-typed-array-names@1.0.0:
-    resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
+  postal-mime@2.7.4:
+    resolution: {integrity: sha512-0WdnFQYUrPGGTFu1uOqD2s7omwua8xaeYGdO6rb88oD5yJ/4pPHDA4sdWqfD8wQVfCny563n/HQS7zTFft+f/g==}
+
   postcss-selector-parser@6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
 
-  postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-
-  postcss-values-parser@6.0.2:
-    resolution: {integrity: sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      postcss: ^8.2.9
-
-  postcss@8.5.6:
-    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+  postcss@8.5.15:
+    resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
     engines: {node: ^10 || ^12 || >=14}
 
   postgres-array@2.0.0:
     resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}
     engines: {node: '>=4'}
 
-  postgres-array@3.0.4:
-    resolution: {integrity: sha512-nAUSGfSDGOaOAEGwqsRY27GPOea7CNipJPOA7lPbdEpx5Kg3qzdP0AaWC5MlhTWV9s4hFX39nomVZ+C4tnGOJQ==}
-    engines: {node: '>=12'}
-
-  postgres-bytea@1.0.0:
-    resolution: {integrity: sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==}
+  postgres-bytea@1.0.1:
+    resolution: {integrity: sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==}
     engines: {node: '>=0.10.0'}
 
-  postgres-bytea@3.0.0:
-    resolution: {integrity: sha512-CNd4jim9RFPkObHSjVHlVrxoVQXz7quwNFpz7RY1okNNme49+sVyiTvTRobiLV548Hx/hb1BG+iE7h9493WzFw==}
-    engines: {node: '>= 6'}
-
   postgres-date@1.0.7:
     resolution: {integrity: sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==}
     engines: {node: '>=0.10.0'}
 
-  postgres-date@2.1.0:
-    resolution: {integrity: sha512-K7Juri8gtgXVcDfZttFKVmhglp7epKb1K4pgrkLxehjqkrgPhfG6OO8LHLkfaqkbpjNRnra018XwAr1yQFWGcA==}
-    engines: {node: '>=12'}
-
   postgres-interval@1.2.0:
     resolution: {integrity: sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==}
     engines: {node: '>=0.10.0'}
 
-  postgres-interval@3.0.0:
-    resolution: {integrity: sha512-BSNDnbyZCXSxgA+1f5UU2GmwhoI0aU5yMxRGO8CdFEcY2BQF9xm/7MqKnYoM1nJDk8nONNWDk9WeSmePFhQdlw==}
+  postgres@3.4.8:
+    resolution: {integrity: sha512-d+JFcLM17njZaOLkv6SCev7uoLaBtfK86vMUXhW1Z4glPWh4jozno9APvW/XKFJ3CCxVoC7OL38BqRydtu5nGg==}
     engines: {node: '>=12'}
 
-  postgres-range@1.1.4:
-    resolution: {integrity: sha512-i/hbxIE9803Alj/6ytL7UHQxRvZkI9O4Sy+J3HGc4F4oo/2eQAjTSNJ0bfxyse3bH0nuVesCk+3IRLaMtG3H6w==}
-
-  postgres@3.4.7:
-    resolution: {integrity: sha512-Jtc2612XINuBjIl/QTWsV5UvE8UHuNblcO3vVADSrKsrc6RqGX6lOW1cEo3CM2v0XG4Nat8nI+YM7/f26VxXLw==}
-    engines: {node: '>=12'}
-
-  posthog-node@5.20.0:
-    resolution: {integrity: sha512-LkR5KfrvEQTnUtNKN97VxFB00KcYG1Iz8iKg8r0e/i7f1eQhg1WSZO+Jp1B4bvtHCmdpIE4HwYbvCCzFoCyjVg==}
-    engines: {node: '>=20'}
-
   potpack@1.0.2:
     resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}
 
-  preact-render-to-string@5.2.3:
-    resolution: {integrity: sha512-aPDxUn5o3GhWdtJtW0svRC2SS/l8D9MAgo2+AWml+BhDImb27ALf04Q2d+AHqUUOc6RdSXFIBVa2gxzgMKgtZA==}
-    peerDependencies:
-      preact: '>=10'
-
-  preact@10.11.3:
-    resolution: {integrity: sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==}
-
-  preact@10.26.5:
-    resolution: {integrity: sha512-fmpDkgfGU6JYux9teDWLhj9mKN55tyepwYbxHgQuIxbWQzgFg5vk7Mrrtfx7xRxq798ynkY4DDDxZr235Kk+4w==}
+  preact@10.29.0:
+    resolution: {integrity: sha512-wSAGyk2bYR1c7t3SZ3jHcM6xy0lcBcDel6lODcs9ME6Th++Dx2KU+6D3HD8wMMKGA8Wpw7OMd3/4RGzYRpzwRg==}
 
-  precinct@12.2.0:
-    resolution: {integrity: sha512-NFBMuwIfaJ4SocE9YXPU/n4AcNSoFMVFjP72nvl3cx69j/ke61/hPOWFREVxLkFhhEGnA8ZuVfTqJBa+PK3b5w==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
-
-  prettier@3.7.4:
-    resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
+  prettier@3.8.1:
+    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
     engines: {node: '>=14'}
     hasBin: true
 
-  pretty-format@3.8.0:
-    resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
-
   pretty-ms@9.3.0:
     resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
     engines: {node: '>=18'}
@@ -7234,10 +6043,6 @@ packages:
   process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
-  process@0.11.10:
-    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
-    engines: {node: '>= 0.6.0'}
-
   progress@2.0.3:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
@@ -7248,9 +6053,6 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
-  property-information@6.5.0:
-    resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
-
   property-information@7.1.0:
     resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
@@ -7261,86 +6063,46 @@ packages:
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
-  pump@3.0.3:
-    resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
-
-  punycode@2.3.1:
-    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
-    engines: {node: '>=6'}
-
   pure-rand@6.1.0:
     resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
 
-  qs@6.14.1:
-    resolution: {integrity: sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==}
+  qs@6.15.0:
+    resolution: {integrity: sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==}
     engines: {node: '>=0.6'}
 
-  quansync@0.2.11:
-    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
-
-  querystringify@2.2.0:
-    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
-
-  queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-
-  quote-unquote@1.0.0:
-    resolution: {integrity: sha512-twwRO/ilhlG/FIgYeKGFqyHhoEhqgnKVkcmqMKi2r524gz3ZbDTcyFt38E9xjJI2vT+KbRNHVbnJ/e0I25Azwg==}
-
-  radix3@1.1.2:
-    resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
-
-  randombytes@2.1.0:
-    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
-
   range-parser@1.2.1:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
 
-  raw-body@2.5.3:
-    resolution: {integrity: sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==}
-    engines: {node: '>= 0.8'}
-
   raw-body@3.0.2:
     resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
     engines: {node: '>= 0.10'}
 
-  react-codemirror-merge@4.25.4:
-    resolution: {integrity: sha512-6WcYwK/o++SKACWA+g8oPkLh5QvH2yGc2HM1XTQ8NmhMWx02yykpC1Snz0je8FKhh6OAbhsQdJT+7BrkCn7qxA==}
-    peerDependencies:
-      '@babel/runtime': '>=7.11.0'
-      '@codemirror/state': '>=6.0.0'
-      '@codemirror/theme-one-dark': '>=6.0.0'
-      '@codemirror/view': '>=6.0.0'
-      codemirror: '>=6.0.0'
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
   react-colorful@5.6.1:
     resolution: {integrity: sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  react-dom@19.2.0:
-    resolution: {integrity: sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==}
+  react-dom@19.2.3:
+    resolution: {integrity: sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==}
     peerDependencies:
-      react: ^19.2.0
+      react: ^19.2.3
 
-  react-easy-crop@5.5.6:
-    resolution: {integrity: sha512-Jw3/ozs8uXj3NpL511Suc4AHY+mLRO23rUgipXvNYKqezcFSYHxe4QXibBymkOoY6oOtLVMPO2HNPRHYvMPyTw==}
+  react-easy-crop@5.5.7:
+    resolution: {integrity: sha512-kYo4NtMeXFQB7h1U+h5yhUkE46WQbQdq7if54uDlbMdZHdRgNehfvaFrXnFw5NR1PNoUOJIfTwLnWmEx/MaZnA==}
     peerDependencies:
       react: '>=16.4.0'
       react-dom: '>=16.4.0'
 
-  react-instantsearch-core@7.15.5:
-    resolution: {integrity: sha512-SFxiwwMf0f5F/8U0Y4ullvQ7bZtbYE516UOJbxaHhjV8yY0i8c22K4lrBFrYbxVRT7QAcp2wLGHiB7r/lD7eRA==}
+  react-instantsearch-core@7.29.0:
+    resolution: {integrity: sha512-iE7mciz4bE1qHjWzSirPSxQMCnEuCxVL0KSZ63mlB0esDv1ALlY8B9zJMYVWny73RKCnWgi2HXcwandFWvJPRg==}
     peerDependencies:
       algoliasearch: '>= 3.1 < 6'
       react: '>= 16.8.0 < 20'
 
-  react-instantsearch@7.15.5:
-    resolution: {integrity: sha512-dpymD+AS6ixEKxQHYDNQn91lPdvBOgOpkjIMR00gqPoZVnVSJ6aQ6juN/+fY7eLgeAdfSYL8qvX8ISGqbhiJ5A==}
+  react-instantsearch@7.29.0:
+    resolution: {integrity: sha512-+foJJVVsSLNY3K5rkB2dGEUoOyLMGTZsl9I8Zwwf/nZQqwoqH0QIvkenlJh7deyAq1/u19bq+H5EVX2d+EjRJQ==}
     peerDependencies:
       algoliasearch: '>= 3.1 < 6'
       react: '>= 16.8.0 < 20'
@@ -7349,13 +6111,6 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
-  react-property@2.0.2:
-    resolution: {integrity: sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==}
-
-  react-refresh@0.14.2:
-    resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
-    engines: {node: '>=0.10.0'}
-
   react-remove-scroll-bar@2.3.8:
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
@@ -7366,8 +6121,8 @@ packages:
       '@types/react':
         optional: true
 
-  react-remove-scroll@2.6.3:
-    resolution: {integrity: sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==}
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': '*'
@@ -7395,81 +6150,45 @@ packages:
       react-dom:
         optional: true
 
-  react@19.2.0:
-    resolution: {integrity: sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==}
+  react@19.2.3:
+    resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
     engines: {node: '>=0.10.0'}
 
-  read-package-up@11.0.0:
-    resolution: {integrity: sha512-MbgfoNPANMdb4oRBNg5eqLbB2t2r+o5Ua1pNt8BqGp4I0FJZhuVSOj3PaBPni4azWuSzEdNn2evevzVmEk1ohQ==}
-    engines: {node: '>=18'}
-
   read-pkg@3.0.0:
     resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
     engines: {node: '>=4'}
 
-  read-pkg@9.0.1:
-    resolution: {integrity: sha512-9viLL4/n1BJUCT1NXVTdS1jtm80yDEgR5T4yCelII49Mbj0v1rZdKqj7zCiYdbB0CuCgdrvHcNogAKTFPBocFA==}
-    engines: {node: '>=18'}
-
   readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
 
-  readable-stream@3.6.2:
-    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
-    engines: {node: '>= 6'}
-
-  readable-stream@4.7.0:
-    resolution: {integrity: sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  readdir-glob@1.1.3:
-    resolution: {integrity: sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==}
-
-  readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-
   readdirp@4.1.2:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
 
-  recast@0.23.11:
-    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
-    engines: {node: '>= 4'}
+  readdirp@5.0.0:
+    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+    engines: {node: '>= 20.19.0'}
 
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
 
-  regenerator-runtime@0.14.1:
-    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-
-  regexp.prototype.flags@1.5.2:
-    resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
-    engines: {node: '>= 0.4'}
-
   regexp.prototype.flags@1.5.4:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
 
-  rehype-autolink-headings@7.1.0:
-    resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==}
-
-  rehype-callouts@2.1.2:
-    resolution: {integrity: sha512-ZZWZ6EknUHiSzr4pQ88C7db3su4DElfJRmphZJbXpDdwW3urTwlYZpHckoC9pjEvBmUEEiJAM0uuc2uxyLdTfg==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+  regexparam@2.0.2:
+    resolution: {integrity: sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==}
+    engines: {node: '>=8'}
 
-  rehype-parse@9.0.1:
-    resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
+  rehype-harden@1.1.8:
+    resolution: {integrity: sha512-Qn7vR1xrf6fZCrkm9TDWi/AB4ylrHy+jqsNm1EHOAmbARYA6gsnVJBq/sdBh6kmT4NEZxH5vgIjrscefJAOXcw==}
 
   rehype-raw@7.0.0:
     resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
 
-  rehype-slug@6.0.0:
-    resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
-
-  rehype-stringify@10.0.1:
-    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
+  rehype-sanitize@6.0.0:
+    resolution: {integrity: sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg==}
 
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
@@ -7483,11 +6202,14 @@ packages:
   remark-stringify@11.0.0:
     resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
 
-  remove-markdown@0.5.0:
-    resolution: {integrity: sha512-x917M80K97K5IN1L8lUvFehsfhR8cYjGQ/yAMRI9E7JIKivtl5Emo5iD13DhMr+VojzMCiYk8V2byNPwT/oapg==}
+  remend@1.3.0:
+    resolution: {integrity: sha512-iIhggPkhW3hFImKtB10w0dz4EZbs28mV/dmbcYVonWEJ6UGHHpP+bFZnTh6GNWJONg5m+U56JrL+8IxZRdgWjw==}
+
+  remove-accents@0.5.0:
+    resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==}
 
-  remove-trailing-separator@1.1.0:
-    resolution: {integrity: sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==}
+  remove-markdown@0.6.3:
+    resolution: {integrity: sha512-Qvp2p0Q1irE7AaJO7QemJe04HdObHylJrG+q4hszvPlYp7q4EvfINpEIaIEFdB+3XTDp1h6fiyT60ae00gmRow==}
 
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
@@ -7501,14 +6223,8 @@ packages:
     resolution: {integrity: sha512-QT7FVMXfWOYFbeRBF6nu+I6tr2Tf3u0q8RIEjNob/heKY/nh7drD/k7eeMFmSQgnTtCzLDcCu/XEnpW2wk4xCQ==}
     engines: {node: '>=9.3.0 || >=8.10.0 <9.0.0'}
 
-  require-package-name@2.0.1:
-    resolution: {integrity: sha512-uuoJ1hU/k6M0779t3VMVIYpb2VMJk05cehCaABFhXaibcbvfgR8wKiozLjVFSzJPmQMRqIcO0HMyTFqfV09V6Q==}
-
-  requires-port@1.0.0:
-    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
-
-  resend@6.6.0:
-    resolution: {integrity: sha512-d1WoOqSxj5x76JtQMrieNAG1kZkh4NU4f+Je1yq4++JsDpLddhEwnJlNfvkCzvUuZy9ZquWmMMAm2mENd2JvRw==}
+  resend@6.10.0:
+    resolution: {integrity: sha512-i7CwZpYj4Oho1RxsTpLcCUkO08+HiL4NXrm6jLJ2WzJ89UGI8eROSieLONJA3hnUrf1OYnCyfq5F6POnHUMv1Q==}
     engines: {node: '>=20'}
     peerDependencies:
       '@react-email/render': '*'
@@ -7516,54 +6232,39 @@ packages:
       '@react-email/render':
         optional: true
 
-  resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-
-  resolve-from@5.0.0:
-    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
-    engines: {node: '>=8'}
-
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
-  resolve@1.22.10:
-    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+  resolve@1.22.11:
+    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
     engines: {node: '>= 0.4'}
     hasBin: true
 
-  resolve@2.0.0-next.5:
-    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
-    hasBin: true
-
-  retry@0.13.1:
-    resolution: {integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==}
-    engines: {node: '>= 4'}
-
-  reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-
   rimraf@2.6.3:
     resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==}
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
-  rimraf@6.1.2:
-    resolution: {integrity: sha512-cFCkPslJv7BAXJsYlK1dZsbP8/ZNLkCAQ0bi1hf5EKX2QHegmDFEFA6QhuYJlk7UDdc+02JjO80YSOrWPpw06g==}
+  rimraf@6.1.3:
+    resolution: {integrity: sha512-LKg+Cr2ZF61fkcaK1UdkH2yEBBKnYjTyWzTJT6KNPcSPaiT7HSdhtMXQuN5wkTX0Xu72KQ1l8S42rlmexS2hSA==}
     engines: {node: 20 || >=22}
     hasBin: true
 
-  robust-predicates@3.0.2:
-    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+  robust-predicates@3.0.3:
+    resolution: {integrity: sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==}
+
+  rolldown@1.0.1:
+    resolution: {integrity: sha512-X0KQHljNnEkWNqqiz9zJrGunh1B0HgOxLXvnFpCOcadzcy5qohZ3tqMEUg00vncoRovXuK3ZqCT9KnnKzoInFQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
 
   rollup@4.53.3:
     resolution: {integrity: sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  rou3@0.7.10:
-    resolution: {integrity: sha512-aoFj6f7MJZ5muJ+Of79nrhs9N3oLGqi2VEMe94Zbkjb6Wupha46EuoYgpWSOZlXww3bbd8ojgXTAA2mzimX5Ww==}
+  rou3@0.8.1:
+    resolution: {integrity: sha512-ePa+XGk00/3HuCqrEnK3LxJW7I0SdNg6EFzKUJG73hMAdDcOUC/i/aSz7LSDwLrGr33kal/rqOGydzwl6U7zBA==}
 
   roughjs@4.6.6:
     resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
@@ -7572,16 +6273,9 @@ packages:
     resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
     engines: {node: '>= 18'}
 
-  run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
-
   rw@1.3.3:
     resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
 
-  safe-array-concat@1.1.2:
-    resolution: {integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==}
-    engines: {node: '>=0.4'}
-
   safe-array-concat@1.1.3:
     resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
@@ -7589,31 +6283,17 @@ packages:
   safe-buffer@5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
 
-  safe-buffer@5.2.1:
-    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
-
   safe-push-apply@1.0.0:
     resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
     engines: {node: '>= 0.4'}
 
-  safe-regex-test@1.0.3:
-    resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
-    engines: {node: '>= 0.4'}
-
   safe-regex-test@1.1.0:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
 
-  safe-stable-stringify@2.5.0:
-    resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==}
-    engines: {node: '>=10'}
-
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sax@1.4.1:
-    resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
-
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
@@ -7632,55 +6312,29 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.7.2:
-    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
-    engines: {node: '>=10'}
-    hasBin: true
-
-  semver@7.7.3:
-    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+  semver@7.7.4:
+    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
     engines: {node: '>=10'}
     hasBin: true
 
-  send@0.19.2:
-    resolution: {integrity: sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==}
-    engines: {node: '>= 0.8.0'}
-
   send@1.2.1:
     resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
     engines: {node: '>= 18'}
 
-  serialize-javascript@6.0.2:
-    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
-
-  seroval-plugins@1.3.3:
-    resolution: {integrity: sha512-16OL3NnUBw8JG1jBLUoZJsLnQq0n5Ua6aHalhJK4fMQkz1lqR7Osz1sA30trBtd9VUDc2NgkuRCn8+/pBwqZ+w==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      seroval: ^1.0
+  serialize-javascript@7.0.5:
+    resolution: {integrity: sha512-F4LcB0UqUl1zErq+1nYEEzSHJnIwb3AF2XWB94b+afhrekOUijwooAYqFyRbjYkm2PAKBabx6oYv/xDxNi8IBw==}
+    engines: {node: '>=20.0.0'}
 
-  seroval-plugins@1.4.0:
-    resolution: {integrity: sha512-zir1aWzoiax6pbBVjoYVd0O1QQXgIL3eVGBMsBsNmM8Ukq90yGaWlfx0AB9dTS8GPqrOrbXn79vmItCUP9U3BQ==}
+  seroval-plugins@1.5.4:
+    resolution: {integrity: sha512-S0xQPhUTefAhNvNWFg0c1J8qJArHt5KdtJ/cFAofo06KD1MVSeFWyl4iiu+ApDIuw0WhjpOfCdgConOfAnLgkw==}
     engines: {node: '>=10'}
     peerDependencies:
       seroval: ^1.0
 
-  seroval@1.3.2:
-    resolution: {integrity: sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==}
-    engines: {node: '>=10'}
-
-  seroval@1.4.0:
-    resolution: {integrity: sha512-BdrNXdzlofomLTiRnwJTSEAaGKyHHZkbMXIywOh7zlzp4uZnXErEwl9XZ+N1hJSNpeTtNxWvVwN0wUzAIQ4Hpg==}
+  seroval@1.5.4:
+    resolution: {integrity: sha512-46uFvgrXTVxZcUorgSSRZ4y+ieqLLQRMlG4bnCZKW3qI6BZm7Rg4ntMW4p1mILEEBZWrFlcpp0AyIIlM6jD9iw==}
     engines: {node: '>=10'}
 
-  seroval@1.4.1:
-    resolution: {integrity: sha512-9GOc+8T6LN4aByLN75uRvMbrwY5RDBW6lSlknsY4LEa9ZmWcxKcRe1G/Q3HZXjltxMHTrStnvrwAICxZrhldtg==}
-    engines: {node: '>=10'}
-
-  serve-static@1.16.3:
-    resolution: {integrity: sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==}
-    engines: {node: '>= 0.8.0'}
-
   serve-static@2.2.1:
     resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
     engines: {node: '>= 18'}
@@ -7689,10 +6343,6 @@ packages:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
 
-  set-function-name@2.0.1:
-    resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
-    engines: {node: '>= 0.4'}
-
   set-function-name@2.0.2:
     resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
     engines: {node: '>= 0.4'}
@@ -7707,8 +6357,8 @@ packages:
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
-  sharp@0.34.4:
-    resolution: {integrity: sha512-FUH39xp3SBPnxWvd5iib1X8XY7J0K0X7d93sie9CJg2PO8/7gmg89Nve6OjItK53/MlAushNNxteBYfM6DEuoA==}
+  sharp@0.34.5:
+    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
   shebang-command@2.0.0:
@@ -7719,11 +6369,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shell-quote@1.8.1:
-    resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
-
-  shiki@1.10.3:
-    resolution: {integrity: sha512-eneCLncGuvPdTutJuLyUGS8QNPAVFO5Trvld2wgEq1e002mwctAhJKeMGWtWVXOIEzmlcLRqcgPSorR6AVzOmQ==}
+  shell-quote@1.8.3:
+    resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
+    engines: {node: '>= 0.4'}
 
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
@@ -7745,11 +6393,8 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  slashes@3.0.12:
-    resolution: {integrity: sha512-Q9VME8WyGkc7pJf6QEkj3wE+2CnvZMI+XJhwdTPR8Z/kWQRXi7boAWLDibRPyHRTUTPx5FaU7MsyrjI3yLB4HA==}
-
-  solid-js@1.9.9:
-    resolution: {integrity: sha512-A0ZBPJQldAeGCTW0YRYJmt7RCeh5rbFfPZ2aOttgYnctHE7HgKeHCBB/PVc2P7eOfmNXqMFFFoYYdm3S4dcbkA==}
+  solid-js@1.9.12:
+    resolution: {integrity: sha512-QzKaSJq2/iDrWR1As6MHZQ8fQkdOBf8GReYb7L5iKwMGceg7HxDcaOHk0at66tNgn9U2U7dXo8ZZpLIAmGMzgw==}
 
   sonner@2.0.7:
     resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
@@ -7783,14 +6428,14 @@ packages:
   spdx-correct@3.2.0:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
 
-  spdx-exceptions@2.3.0:
-    resolution: {integrity: sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==}
+  spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
 
   spdx-expression-parse@3.0.1:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
 
-  spdx-license-ids@3.0.16:
-    resolution: {integrity: sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==}
+  spdx-license-ids@3.0.23:
+    resolution: {integrity: sha512-CWLcCCH7VLu13TgOH+r8p1O/Znwhqv/dbb6lqWy67G+pT1kHmeD/+V36AVb/vq8QMIQwVShJ6Ssl5FPh0fuSdw==}
 
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
@@ -7798,18 +6443,13 @@ packages:
   sqids@0.3.0:
     resolution: {integrity: sha512-lOQK1ucVg+W6n3FhRwwSeUijxe93b51Bfz5PMRMihVf1iVkl82ePQG7V5vwrhzB11v0NtsR25PSZRGiSomJaJw==}
 
-  srvx@0.8.16:
-    resolution: {integrity: sha512-hmcGW4CgroeSmzgF1Ihwgl+Ths0JqAJ7HwjP2X7e3JzY7u4IydLMcdnlqGQiQGUswz+PO9oh/KtCpOISIvs9QQ==}
+  srvx@0.11.16:
+    resolution: {integrity: sha512-bp07zRuycfTY43IjAvvTFnmnJi8ikW0VFiHwOhhYcVW/L4xQ1XY4PAd4Nuum1rsA17C39zL7x+CDhrn5AL32Rw==}
     engines: {node: '>=20.16.0'}
     hasBin: true
 
-  srvx@0.9.8:
-    resolution: {integrity: sha512-RZaxTKJEE/14HYn8COLuUOJAt0U55N9l1Xf6jj+T0GoA01EUH1Xz5JtSUOI+EHn+AEgPCVn7gk6jHJffrr06fQ==}
-    engines: {node: '>=20.16.0'}
-    hasBin: true
-
-  stack-trace@0.0.10:
-    resolution: {integrity: sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==}
+  standardwebhooks@1.0.0:
+    resolution: {integrity: sha512-BbHGOQK9olHPMvQNHWul6MYlrRTAOKn03rOe4A8O3CLWhNf4YHBqq2HJKKC+sfqpxiBY52pNeesD6jIiLDz8jg==}
 
   stats-gl@2.4.2:
     resolution: {integrity: sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==}
@@ -7824,53 +6464,35 @@ packages:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
 
-  std-env@3.9.0:
-    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
-
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
 
-  streamx@2.23.0:
-    resolution: {integrity: sha512-kn+e44esVfn2Fa/O0CPFcex27fjIL6MkVae0Mm6q+E6f0hWv578YCERbv+4m02cjxvDsPKLnmxral/rR6lBMAg==}
+  streamdown@2.5.0:
+    resolution: {integrity: sha512-/tTnURfIOxZK/pqJAxsfCvETG/XCJHoWnk3jq9xLcuz6CSpnjjuxSRBTTL4PKGhxiZQf0lqPxGhImdpwcZ2XwA==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
+  streamx@2.25.0:
+    resolution: {integrity: sha512-0nQuG6jf1w+wddNEEXCF4nTg3LtufWINB5eFEN+5TNZW7KWJp6x87+JFL43vaAUPyCfH1wID+mNVyW6OHtFamg==}
 
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
 
-  string.prototype.includes@2.0.1:
-    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.matchall@4.0.12:
-    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
+  string.prototype.padend@3.1.6:
+    resolution: {integrity: sha512-XZpspuSB7vJWhvJc9DLSlrXl1mcA2BdoY5jjnS135ydXqLoqhs96JjDtCkjJEQHvfqZIp9hBuBMgI589peyx9Q==}
     engines: {node: '>= 0.4'}
 
-  string.prototype.padend@3.1.5:
-    resolution: {integrity: sha512-DOB27b/2UTTD+4myKUFh+/fXWcu/UDyASIXfg+7VzoCNNGOfWvoyU/x5pvVHr++ztyt/oSYI1BcWBBG/hmlNjA==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.repeat@1.0.0:
-    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
-
   string.prototype.trim@1.2.10:
     resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
     engines: {node: '>= 0.4'}
 
-  string.prototype.trim@1.2.8:
-    resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.trimend@1.0.7:
-    resolution: {integrity: sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==}
-
   string.prototype.trimend@1.0.9:
     resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
     engines: {node: '>= 0.4'}
 
-  string.prototype.trimstart@1.0.7:
-    resolution: {integrity: sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==}
-
   string.prototype.trimstart@1.0.8:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
@@ -7878,9 +6500,6 @@ packages:
   string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
 
-  string_decoder@1.3.0:
-    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
-
   stringify-entities@4.0.4:
     resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
 
@@ -7896,30 +6515,23 @@ packages:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
 
-  strip-final-newline@3.0.0:
-    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
-    engines: {node: '>=12'}
-
   strip-final-newline@4.0.0:
     resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
     engines: {node: '>=18'}
 
-  strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-
-  style-mod@4.1.3:
-    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
+  style-to-js@1.1.21:
+    resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
 
-  style-to-js@1.1.12:
-    resolution: {integrity: sha512-tv+/FkgNYHI2fvCoBMsqPHh5xovwiw+C3X0Gfnss/Syau0Nr3IqGOJ9XiOYXoPnToHVbllKFf5qCNFJGwFg5mg==}
-
-  style-to-object@1.0.6:
-    resolution: {integrity: sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==}
+  style-to-object@1.0.14:
+    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
 
   stylis@4.3.6:
     resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
 
+  supports-color@10.2.2:
+    resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
+    engines: {node: '>=18'}
+
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -7937,63 +6549,44 @@ packages:
     peerDependencies:
       react: '>=17.0'
 
-  svgo@4.0.0:
-    resolution: {integrity: sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==}
-    engines: {node: '>=16'}
-    hasBin: true
-
-  svix@1.76.1:
-    resolution: {integrity: sha512-CRuDWBTgYfDnBLRaZdKp9VuoPcNUq9An14c/k+4YJ15Qc5Grvf66vp0jvTltd4t7OIRj+8lM1DAgvSgvf7hdLw==}
-
-  system-architecture@0.1.0:
-    resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
-    engines: {node: '>=18'}
+  svix@1.88.0:
+    resolution: {integrity: sha512-vm/JrrUd3bVyBE+3L33TIyVSs8gS5fYx7lrISvKlDJXTYX1ACH4REX8P1tHxsSKoZi/rvifM1t0XRc5Vc45THw==}
 
-  tabbable@6.2.0:
-    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+  tabbable@6.4.0:
+    resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
 
-  tailwind-merge@1.14.0:
-    resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
+  tailwind-merge@3.5.0:
+    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
 
-  tailwind-merge@3.4.0:
-    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+  tailwindcss@4.2.2:
+    resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
 
-  tailwindcss-animate@1.0.7:
-    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
+  tailwindcss@4.3.0:
+    resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==}
 
-  tailwindcss@4.1.11:
-    resolution: {integrity: sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==}
+  takumi-js@2.0.0-beta.12:
+    resolution: {integrity: sha512-B0GOTCLh/XDYD+suulTk22UNiDsLB54UkPLj2lcK7+6j4AT1Jc/REXgShRNjeaWivSGIun7cjJX6Kaq7aGTlfA==}
+    engines: {node: '>=18'}
 
-  tapable@2.2.2:
-    resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
     engines: {node: '>=6'}
 
-  tar-stream@3.1.7:
-    resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
+  tar-stream@3.1.8:
+    resolution: {integrity: sha512-U6QpVRyCGHva435KoNWy9PRoi2IFYCgtEhq9nmrPPpbRacPs9IH4aJ3gbrFC8dPcXvdSZ4XXfXT5Fshbp2MtlQ==}
 
-  tar@7.4.3:
-    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
-    engines: {node: '>=18'}
+  teex@1.0.1:
+    resolution: {integrity: sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==}
 
   temp@0.9.4:
     resolution: {integrity: sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==}
     engines: {node: '>=6.0.0'}
 
-  terser@5.44.0:
-    resolution: {integrity: sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==}
-    engines: {node: '>=10'}
-    hasBin: true
-
-  text-decoder@1.2.3:
-    resolution: {integrity: sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==}
+  text-decoder@1.2.7:
+    resolution: {integrity: sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==}
 
-  text-hex@1.0.0:
-    resolution: {integrity: sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==}
-
-  thingies@2.5.0:
-    resolution: {integrity: sha512-s+2Bwztg6PhWUD7XMfeYm5qliDdSiZm7M7n8KjTkIsm3l/2lgVRc2/Gx/v+ZX8lT4FMA+i8aQvhcWylldc+ZNw==}
+  thingies@2.6.0:
+    resolution: {integrity: sha512-rMHRjmlFLM1R96UYPvpmnc3LYtdFrT33JIB7L9hetGue1qAPfn1N2LJeEjxUSidu1Iku+haLZXDuEXUHNGO/lg==}
     engines: {node: '>=10.18'}
     peerDependencies:
       tslib: ^2
@@ -8008,47 +6601,36 @@ packages:
     peerDependencies:
       three: '>=0.128.0'
 
-  three@0.182.0:
-    resolution: {integrity: sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==}
-
-  tiny-invariant@1.3.3:
-    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+  three@0.183.2:
+    resolution: {integrity: sha512-di3BsL2FEQ1PA7Hcvn4fyJOlxRRgFYBpMTcyOgkwJIaDOdJMebEFPA+t98EvjuljDx4hNulAGwF6KIjtwI5jgQ==}
 
-  tiny-warning@1.0.3:
-    resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
-
-  tinyexec@1.0.1:
-    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
-
-  tinyglobby@0.2.14:
-    resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
-    engines: {node: '>=12.0.0'}
+  tinyexec@1.0.4:
+    resolution: {integrity: sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==}
+    engines: {node: '>=18'}
 
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
-  tmp-promise@3.0.3:
-    resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==}
+  tinyglobby@0.2.16:
+    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
+    engines: {node: '>=12.0.0'}
+
+  tinypool@2.1.0:
+    resolution: {integrity: sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==}
+    engines: {node: ^20.0.0 || >=22.0.0}
 
-  tmp@0.2.5:
-    resolution: {integrity: sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==}
-    engines: {node: '>=14.14'}
+  tldts-core@7.4.2:
+    resolution: {integrity: sha512-nwEyF4vl4RSJjwSjBUmOSxc3BFPoIFdlRthJ6e+5v9P3bHNsoD06UjuqMUspqp7vsEZ1beaHi1km+optiE17yA==}
 
-  to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
+  tldts@7.4.2:
+    resolution: {integrity: sha512-kCwffuaH8ntKtygnWe1b4BJKWiCUH30n5KfoTr6IchcXOwR7chAOFJxFrH3vjANafUYrIA4a7SDL+nn7SiR4Sw==}
+    hasBin: true
 
   toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
-  toml@3.0.0:
-    resolution: {integrity: sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==}
-
-  tomlify-j0.4@3.0.0:
-    resolution: {integrity: sha512-2Ulkc8T7mXJ2l0W476YC/A209PR38Nw8PuaCNtk9uI3t1zzFdGQeWYGQvmj2PZkVvRC/Yoi4xQKMRnWc/N29tQ==}
-
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
@@ -8061,10 +6643,6 @@ packages:
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
-  triple-beam@1.4.1:
-    resolution: {integrity: sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==}
-    engines: {node: '>= 14.0.0'}
-
   troika-three-text@0.52.4:
     resolution: {integrity: sha512-V50EwcYGruV5rUZ9F4aNsrytGdKcXKALjEtQXIOBfhVoZU9VAqZNIoGQ3TMiooVqFAbR1w15T+f+8gkzoFzawg==}
     peerDependencies:
@@ -8081,26 +6659,13 @@ packages:
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
-  ts-api-utils@2.1.0:
-    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
-    engines: {node: '>=18.12'}
-    peerDependencies:
-      typescript: '>=4.8.4'
+  ts-algebra@2.0.0:
+    resolution: {integrity: sha512-FPAhNPFMrkwz76P7cdjdmiShwMynZYN6SgOujD1urY4oNm80Ou9oMdmbR45LotcKOXoy7wSmHkRFE6Mxbrhefw==}
 
   ts-dedent@2.2.0:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
 
-  tsconfck@3.1.4:
-    resolution: {integrity: sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-    peerDependencies:
-      typescript: ^5.0.0
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -8112,93 +6677,56 @@ packages:
   tunnel-rat@0.1.2:
     resolution: {integrity: sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==}
 
-  type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
-
   type-fest@4.41.0:
     resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
     engines: {node: '>=16'}
 
-  type-is@1.6.18:
-    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
-    engines: {node: '>= 0.6'}
-
   type-is@2.0.1:
     resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
     engines: {node: '>= 0.6'}
 
-  typed-array-buffer@1.0.2:
-    resolution: {integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==}
-    engines: {node: '>= 0.4'}
-
   typed-array-buffer@1.0.3:
     resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
     engines: {node: '>= 0.4'}
 
-  typed-array-byte-length@1.0.1:
-    resolution: {integrity: sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==}
-    engines: {node: '>= 0.4'}
-
   typed-array-byte-length@1.0.3:
     resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
     engines: {node: '>= 0.4'}
 
-  typed-array-byte-offset@1.0.2:
-    resolution: {integrity: sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==}
-    engines: {node: '>= 0.4'}
-
   typed-array-byte-offset@1.0.4:
     resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
     engines: {node: '>= 0.4'}
 
-  typed-array-length@1.0.5:
-    resolution: {integrity: sha512-yMi0PlwuznKHxKmcpoOdeLwxBoVPkqZxd7q2FgMkmD3bNwvF5VW0+UlUQ1k1vmktTu4Yu13Q0RIxEP8+B+wloA==}
-    engines: {node: '>= 0.4'}
-
   typed-array-length@1.0.7:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
-  typescript-eslint@8.48.1:
-    resolution: {integrity: sha512-FbOKN1fqNoXp1hIl5KYpObVrp0mCn+CLgn479nmu2IsRMrx2vyv74MmsBLVlhg8qVwNFGbXSp8fh1zp8pEoC2A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
-  typescript@5.9.2:
-    resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
+  typescript@6.0.2:
+    resolution: {integrity: sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==}
     engines: {node: '>=14.17'}
     hasBin: true
 
-  ufo@1.6.1:
-    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
-
-  ulid@3.0.1:
-    resolution: {integrity: sha512-dPJyqPzx8preQhqq24bBG1YNkvigm87K8kVEHCD+ruZg24t6IFEFv00xMWfxcC4djmFtiTLdFuADn4+DOz6R7Q==}
-    hasBin: true
-
-  unbox-primitive@1.0.2:
-    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
+  ufo@1.6.3:
+    resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
 
   unbox-primitive@1.1.0:
     resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
     engines: {node: '>= 0.4'}
 
-  uncrypto@0.1.3:
-    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
+  undici-types@7.18.2:
+    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
 
-  undici-types@6.21.0:
-    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
-
-  undici-types@7.10.0:
-    resolution: {integrity: sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==}
+  undici@7.24.7:
+    resolution: {integrity: sha512-H/nlJ/h0ggGC+uRL3ovD+G0i4bqhvsDOpbDv7At5eFLlj2b41L8QliGbnl2H7SnDiYhENphh1tQFJZf+MyfLsQ==}
+    engines: {node: '>=20.18.1'}
 
-  undici@7.14.0:
-    resolution: {integrity: sha512-Vqs8HTzjpQXZeXdpsfChQTlafcMQaaIwnGwLam1wudSSjlJeQ3bw1j+TLPePgrCnCpUXx7Ba5Pdpf5OBih62NQ==}
+  undici@7.28.0:
+    resolution: {integrity: sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==}
     engines: {node: '>=20.18.1'}
 
+  unenv@2.0.0-rc.24:
+    resolution: {integrity: sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw==}
+
   unicorn-magic@0.4.0:
     resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==}
     engines: {node: '>=20'}
@@ -8218,95 +6746,22 @@ packages:
   unist-util-visit-parents@6.0.2:
     resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
 
-  unist-util-visit@5.0.0:
-    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
-
-  universal-user-agent@6.0.0:
-    resolution: {integrity: sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==}
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
 
-  unixify@1.0.0:
-    resolution: {integrity: sha512-6bc58dPYhCMHHuwxldQxO3RRNZ4eCogZ/st++0+fcC1nr0jiGUtAdBJ2qzmLQWSxbtz42pWt4QQMiZ9HvZf5cg==}
-    engines: {node: '>=0.10.0'}
+  universal-user-agent@7.0.3:
+    resolution: {integrity: sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==}
 
   unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
-  unplugin@1.0.1:
-    resolution: {integrity: sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==}
-
-  unplugin@2.3.10:
-    resolution: {integrity: sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==}
-    engines: {node: '>=18.12.0'}
-
-  unstorage@1.17.1:
-    resolution: {integrity: sha512-KKGwRTT0iVBCErKemkJCLs7JdxNVfqTPc/85ae1XES0+bsHbc/sFBfVi5kJp156cc51BHinIH2l3k0EZ24vOBQ==}
-    peerDependencies:
-      '@azure/app-configuration': ^1.8.0
-      '@azure/cosmos': ^4.2.0
-      '@azure/data-tables': ^13.3.0
-      '@azure/identity': ^4.6.0
-      '@azure/keyvault-secrets': ^4.9.0
-      '@azure/storage-blob': ^12.26.0
-      '@capacitor/preferences': ^6.0.3 || ^7.0.0
-      '@deno/kv': '>=0.9.0'
-      '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0
-      '@planetscale/database': ^1.19.0
-      '@upstash/redis': ^1.34.3
-      '@vercel/blob': '>=0.27.1'
-      '@vercel/functions': ^2.2.12 || ^3.0.0
-      '@vercel/kv': ^1.0.1
-      aws4fetch: ^1.0.20
-      db0: '>=0.2.1'
-      idb-keyval: ^6.2.1
-      ioredis: ^5.4.2
-      uploadthing: ^7.4.4
-    peerDependenciesMeta:
-      '@azure/app-configuration':
-        optional: true
-      '@azure/cosmos':
-        optional: true
-      '@azure/data-tables':
-        optional: true
-      '@azure/identity':
-        optional: true
-      '@azure/keyvault-secrets':
-        optional: true
-      '@azure/storage-blob':
-        optional: true
-      '@capacitor/preferences':
-        optional: true
-      '@deno/kv':
-        optional: true
-      '@netlify/blobs':
-        optional: true
-      '@planetscale/database':
-        optional: true
-      '@upstash/redis':
-        optional: true
-      '@vercel/blob':
-        optional: true
-      '@vercel/functions':
-        optional: true
-      '@vercel/kv':
-        optional: true
-      aws4fetch:
-        optional: true
-      db0:
-        optional: true
-      idb-keyval:
-        optional: true
-      ioredis:
-        optional: true
-      uploadthing:
-        optional: true
-
-  untun@0.1.3:
-    resolution: {integrity: sha512-4luGP9LMYszMRZwsvyUd9MrxgEGZdZuZgpVQHEEX0lCYFESasVRvZd0EYpCkOIbJKHMuv0LskpXc/8Un+MJzEQ==}
-    hasBin: true
+  unplugin@3.0.0:
+    resolution: {integrity: sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
 
-  update-browserslist-db@1.1.2:
-    resolution: {integrity: sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==}
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -8332,21 +6787,6 @@ packages:
       tailwindcss:
         optional: true
 
-  uqr@0.1.2:
-    resolution: {integrity: sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==}
-
-  uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
-
-  url-parse@1.5.10:
-    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
-
-  urlpattern-polyfill@10.1.0:
-    resolution: {integrity: sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==}
-
-  urlpattern-polyfill@8.0.2:
-    resolution: {integrity: sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ==}
-
   use-callback-ref@1.3.3:
     resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
     engines: {node: '>=10'}
@@ -8376,11 +6816,6 @@ packages:
       '@types/react':
         optional: true
 
-  use-sync-external-store@1.2.0:
-    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-
   use-sync-external-store@1.6.0:
     resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
     peerDependencies:
@@ -8393,10 +6828,6 @@ packages:
     resolution: {integrity: sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==}
     engines: {node: '>= 4'}
 
-  utils-merge@1.0.1:
-    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
-    engines: {node: '>= 0.4.0'}
-
   uuid@10.0.0:
     resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
     hasBin: true
@@ -8405,8 +6836,8 @@ packages:
     resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
     hasBin: true
 
-  valibot@1.2.0:
-    resolution: {integrity: sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg==}
+  valibot@1.3.1:
+    resolution: {integrity: sha512-sfdRir/QFM0JaF22hqTroPc5xy4DimuGQVKFrzF1YfGwaS1nJot3Y8VqMdLO2Lg27fMzat2yD3pY5PbAYO39Gg==}
     peerDependencies:
       typescript: '>=5'
     peerDependenciesMeta:
@@ -8416,10 +6847,6 @@ packages:
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
-  validate-npm-package-name@5.0.1:
-    resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
@@ -8433,35 +6860,20 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vite-bundle-analyzer@1.2.1:
-    resolution: {integrity: sha512-dpJMQBnVjieMirpHILmgGsZAWU8fGyqK3ckj6O48wdy3fARlH7Mnz7BfYFUsd3ZdbuXjsYe7t5I/q2zsMOd5ig==}
+  vite-bundle-analyzer@1.3.6:
+    resolution: {integrity: sha512-elFXkF9oGy4CJEeOdP1DSEHRDKWfmaEDfT9/GuF4jmyfmUF6nC//iN+ythqMEVvrtchOEHGKLumZwnu1NjoI0w==}
     hasBin: true
 
-  vite-tsconfig-paths@5.0.1:
-    resolution: {integrity: sha512-yqwv+LstU7NwPeNqajZzLEBVpUFU6Dugtb2P84FXuvaoYA+/70l9MHE+GYfYAycVyPSDYZ7mjOFuYBRqlEpTig==}
-    peerDependencies:
-      vite: '*'
-    peerDependenciesMeta:
-      vite:
-        optional: true
-
-  vite-tsconfig-paths@5.1.4:
-    resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==}
-    peerDependencies:
-      vite: '*'
-    peerDependenciesMeta:
-      vite:
-        optional: true
-
-  vite@7.1.7:
-    resolution: {integrity: sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==}
+  vite@8.0.13:
+    resolution: {integrity: sha512-MFtjBYgzmSxmgA4RAfjIyXWpGe1oALnjgUTzzV7QLx/TKxCzjtMH6Fd9/eVK+5Fg1qNoz5VAwsmMs/NofrmJvw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
       '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.1.18
+      esbuild: ^0.27.0 || ^0.28.0
       jiti: '>=1.21.0'
       less: ^4.0.0
-      lightningcss: ^1.21.0
       sass: ^1.70.0
       sass-embedded: ^1.70.0
       stylus: '>=0.54.8'
@@ -8472,12 +6884,14 @@ packages:
     peerDependenciesMeta:
       '@types/node':
         optional: true
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
       jiti:
         optional: true
       less:
         optional: true
-      lightningcss:
-        optional: true
       sass:
         optional: true
       sass-embedded:
@@ -8493,10 +6907,10 @@ packages:
       yaml:
         optional: true
 
-  vitefu@1.1.1:
-    resolution: {integrity: sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==}
+  vitefu@1.1.3:
+    resolution: {integrity: sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==}
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
     peerDependenciesMeta:
       vite:
         optional: true
@@ -8518,19 +6932,12 @@ packages:
     resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==}
     hasBin: true
 
-  vscode-uri@3.0.8:
-    resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
-
-  w3c-keyname@2.2.8:
-    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
-  web-streams-polyfill@3.3.3:
-    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
-    engines: {node: '>= 8'}
-
   webgl-constants@1.1.1:
     resolution: {integrity: sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg==}
 
@@ -8540,13 +6947,6 @@ packages:
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
-  webpack-sources@3.3.3:
-    resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
-    engines: {node: '>=10.13.0'}
-
-  webpack-virtual-modules@0.5.0:
-    resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
-
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
@@ -8562,9 +6962,6 @@ packages:
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
-  which-boxed-primitive@1.0.2:
-    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
-
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
     engines: {node: '>= 0.4'}
@@ -8577,12 +6974,8 @@ packages:
     resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
     engines: {node: '>= 0.4'}
 
-  which-typed-array@1.1.15:
-    resolution: {integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==}
-    engines: {node: '>= 0.4'}
-
-  which-typed-array@1.1.19:
-    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+  which-typed-array@1.1.20:
+    resolution: {integrity: sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==}
     engines: {node: '>= 0.4'}
 
   which@2.0.2:
@@ -8590,13 +6983,24 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
-  winston-transport@4.9.0:
-    resolution: {integrity: sha512-8drMJ4rkgaPo1Me4zD/3WLfI/zPdA9o2IipKODunnGDcuqbHwjsbB79ylv04LCGGzU0xQ6vTznOMpQGaLhhm6A==}
-    engines: {node: '>= 12.0.0'}
+  workerd@1.20260617.1:
+    resolution: {integrity: sha512-Re5pl6pdowt3ZmWUzGlOuB7jbRIIPetgKalmo4cYmucQnVhpo7/3e4MfpekbhLi2EhZZz5EY9NWRu8zFzuEZew==}
+    engines: {node: '>=16'}
+    hasBin: true
 
-  winston@3.18.3:
-    resolution: {integrity: sha512-NoBZauFNNWENgsnC9YpgyYwOVrl2m58PpQ8lNHjV3kosGs7KJ7Npk9pCUE+WJlawVSe8mykWDKWFSVfs3QO9ww==}
-    engines: {node: '>= 12.0.0'}
+  worktop@0.7.3:
+    resolution: {integrity: sha512-WBHP1hk8pLP7ahAw13fugDWcO0SUAOiCD6DHT/bfLWoCIA/PL9u7GKdudT2nGZ8EGR1APbGCAI6ZzKG1+X+PnQ==}
+    engines: {node: '>=12'}
+
+  wrangler@4.103.0:
+    resolution: {integrity: sha512-3Lv1P5t2xcSEkSTKtG+Lz+3JFryuU7YPLkaCUj7gNe+CJsjZJLtUwqsh1x595QBxkIbCE0GAvDx2DCJUU4+oqw==}
+    engines: {node: '>=22.0.0'}
+    hasBin: true
+    peerDependencies:
+      '@cloudflare/workers-types': ^4.20260617.1
+    peerDependenciesMeta:
+      '@cloudflare/workers-types':
+        optional: true
 
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
@@ -8605,21 +7009,36 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
-  write-file-atomic@5.0.1:
-    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+  ws@8.20.0:
+    resolution: {integrity: sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
 
-  xmlbuilder2@4.0.1:
-    resolution: {integrity: sha512-vXeky0YRVjhx5pseJDQLk0F6u7gyA8++ceVOS88r4dWu4lWdY/ZjbL45QrN+g0GzZLg1D5AkzThpikZa98SC/g==}
-    engines: {node: '>=20.0'}
+  ws@8.21.0:
+    resolution: {integrity: sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
 
-  xss@1.0.15:
-    resolution: {integrity: sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==}
-    engines: {node: '>= 0.10.0'}
-    hasBin: true
+  xmlbuilder2@4.0.3:
+    resolution: {integrity: sha512-bx8Q1STctnNaaDymWnkfQLKofs0mGNN7rLLapJlGuV3VlvegD7Ls4ggMjE3aUSWItCCzU0PEv45lI87iSigiCA==}
+    engines: {node: '>=20.0'}
 
-  xstate@5.25.0:
-    resolution: {integrity: sha512-yyWzfhVRoTHNLjLoMmdwZGagAYfmnzpm9gPjlX2MhJZsDojXGqRxODDOi4BsgGRKD46NZRAdcLp6CKOyvQS0Bw==}
+  xstate@5.30.0:
+    resolution: {integrity: sha512-mIzIuMjtYVkqXq9dUzYQoag7b/dF1CBS/yhliuPLfR0FwKPC18HiUivb/crcqY2gknhR8gJEhnppLg6ubQ0gGw==}
 
   xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
@@ -8632,16 +7051,13 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
-  yallist@5.0.0:
-    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
-    engines: {node: '>=18'}
-
-  yaml@1.10.2:
-    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
-    engines: {node: '>= 6'}
+  yaml@2.8.3:
+    resolution: {integrity: sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
 
-  yaml@2.8.1:
-    resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==}
+  yaml@2.9.0:
+    resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==}
     engines: {node: '>= 14.6'}
     hasBin: true
 
@@ -8649,71 +7065,49 @@ packages:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
     engines: {node: '>=10'}
 
-  yargs-parser@21.1.1:
-    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
-    engines: {node: '>=12'}
-
   yargs@16.2.0:
     resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
     engines: {node: '>=10'}
 
-  yargs@17.7.2:
-    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
-    engines: {node: '>=12'}
-
-  yauzl@2.10.0:
-    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
-
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  yocto-queue@1.2.1:
-    resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
+  yocto-queue@1.2.2:
+    resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==}
     engines: {node: '>=12.20'}
 
   yoctocolors@2.1.2:
     resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
     engines: {node: '>=18'}
 
-  zip-stream@6.0.1:
-    resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
-    engines: {node: '>= 14'}
+  youch-core@0.3.3:
+    resolution: {integrity: sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA==}
+
+  youch@4.1.0-beta.10:
+    resolution: {integrity: sha512-rLfVLB4FgQneDr0dv1oddCVZmKjcJ6yX6mS4pU82Mq/Dt9a3cLZQ62pDBL4AUO+uVrCvtWz3ZFUL2HFAFJ/BXQ==}
 
-  zod-to-json-schema@3.25.1:
-    resolution: {integrity: sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA==}
+  zod-to-json-schema@3.24.6:
+    resolution: {integrity: sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==}
     peerDependencies:
-      zod: ^3.25 || ^4
+      zod: ^3.24.1
 
-  zod-validation-error@4.0.2:
-    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
-    engines: {node: '>=18.0.0'}
+  zod-to-json-schema@3.25.2:
+    resolution: {integrity: sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==}
     peerDependencies:
-      zod: ^3.25.0 || ^4.0.0
+      zod: ^3.25.28 || ^4
 
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
-  zod@4.3.5:
-    resolution: {integrity: sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==}
+  zod@4.3.6:
+    resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
 
-  zustand@4.5.2:
-    resolution: {integrity: sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==}
-    engines: {node: '>=12.7.0'}
-    peerDependencies:
-      '@types/react': '>=16.8'
-      immer: '>=9.0.6'
-      react: '>=16.8'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      immer:
-        optional: true
-      react:
-        optional: true
+  zod@4.4.3:
+    resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
-  zustand@5.0.9:
-    resolution: {integrity: sha512-ALBtUj0AfjJt3uNRQoL1tL2tMvj6Gp/6e39dnfT6uzpelGru8v1tPOGBzayOWbPJvujM8JojDk3E1LxeFisBNg==}
+  zustand@5.0.12:
+    resolution: {integrity: sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==}
     engines: {node: '>=12.20.0'}
     peerDependencies:
       '@types/react': '>=18.0.0'
@@ -8735,144 +7129,132 @@ packages:
 
 snapshots:
 
-  '@aashutoshrathi/word-wrap@1.2.6': {}
+  '@ag-ui/core@0.0.52':
+    dependencies:
+      zod: 3.25.76
+
+  '@algolia/abtesting@1.16.0':
+    dependencies:
+      '@algolia/client-common': 5.50.0
+      '@algolia/requester-browser-xhr': 5.50.0
+      '@algolia/requester-fetch': 5.50.0
+      '@algolia/requester-node-http': 5.50.0
 
-  '@algolia/client-abtesting@5.23.4':
+  '@algolia/client-abtesting@5.50.0':
     dependencies:
-      '@algolia/client-common': 5.23.4
-      '@algolia/requester-browser-xhr': 5.23.4
-      '@algolia/requester-fetch': 5.23.4
-      '@algolia/requester-node-http': 5.23.4
+      '@algolia/client-common': 5.50.0
+      '@algolia/requester-browser-xhr': 5.50.0
+      '@algolia/requester-fetch': 5.50.0
+      '@algolia/requester-node-http': 5.50.0
 
-  '@algolia/client-analytics@5.23.4':
+  '@algolia/client-analytics@5.50.0':
     dependencies:
-      '@algolia/client-common': 5.23.4
-      '@algolia/requester-browser-xhr': 5.23.4
-      '@algolia/requester-fetch': 5.23.4
-      '@algolia/requester-node-http': 5.23.4
+      '@algolia/client-common': 5.50.0
+      '@algolia/requester-browser-xhr': 5.50.0
+      '@algolia/requester-fetch': 5.50.0
+      '@algolia/requester-node-http': 5.50.0
 
-  '@algolia/client-common@5.23.4': {}
+  '@algolia/client-common@5.50.0': {}
 
-  '@algolia/client-insights@5.23.4':
+  '@algolia/client-insights@5.50.0':
     dependencies:
-      '@algolia/client-common': 5.23.4
-      '@algolia/requester-browser-xhr': 5.23.4
-      '@algolia/requester-fetch': 5.23.4
-      '@algolia/requester-node-http': 5.23.4
+      '@algolia/client-common': 5.50.0
+      '@algolia/requester-browser-xhr': 5.50.0
+      '@algolia/requester-fetch': 5.50.0
+      '@algolia/requester-node-http': 5.50.0
 
-  '@algolia/client-personalization@5.23.4':
+  '@algolia/client-personalization@5.50.0':
     dependencies:
-      '@algolia/client-common': 5.23.4
-      '@algolia/requester-browser-xhr': 5.23.4
-      '@algolia/requester-fetch': 5.23.4
-      '@algolia/requester-node-http': 5.23.4
+      '@algolia/client-common': 5.50.0
+      '@algolia/requester-browser-xhr': 5.50.0
+      '@algolia/requester-fetch': 5.50.0
+      '@algolia/requester-node-http': 5.50.0
 
-  '@algolia/client-query-suggestions@5.23.4':
+  '@algolia/client-query-suggestions@5.50.0':
     dependencies:
-      '@algolia/client-common': 5.23.4
-      '@algolia/requester-browser-xhr': 5.23.4
-      '@algolia/requester-fetch': 5.23.4
-      '@algolia/requester-node-http': 5.23.4
+      '@algolia/client-common': 5.50.0
+      '@algolia/requester-browser-xhr': 5.50.0
+      '@algolia/requester-fetch': 5.50.0
+      '@algolia/requester-node-http': 5.50.0
 
-  '@algolia/client-search@5.23.4':
+  '@algolia/client-search@5.50.0':
     dependencies:
-      '@algolia/client-common': 5.23.4
-      '@algolia/requester-browser-xhr': 5.23.4
-      '@algolia/requester-fetch': 5.23.4
-      '@algolia/requester-node-http': 5.23.4
+      '@algolia/client-common': 5.50.0
+      '@algolia/requester-browser-xhr': 5.50.0
+      '@algolia/requester-fetch': 5.50.0
+      '@algolia/requester-node-http': 5.50.0
 
   '@algolia/events@4.0.1': {}
 
-  '@algolia/ingestion@1.23.4':
-    dependencies:
-      '@algolia/client-common': 5.23.4
-      '@algolia/requester-browser-xhr': 5.23.4
-      '@algolia/requester-fetch': 5.23.4
-      '@algolia/requester-node-http': 5.23.4
-
-  '@algolia/monitoring@1.23.4':
+  '@algolia/ingestion@1.50.0':
     dependencies:
-      '@algolia/client-common': 5.23.4
-      '@algolia/requester-browser-xhr': 5.23.4
-      '@algolia/requester-fetch': 5.23.4
-      '@algolia/requester-node-http': 5.23.4
+      '@algolia/client-common': 5.50.0
+      '@algolia/requester-browser-xhr': 5.50.0
+      '@algolia/requester-fetch': 5.50.0
+      '@algolia/requester-node-http': 5.50.0
 
-  '@algolia/recommend@5.23.4':
+  '@algolia/monitoring@1.50.0':
     dependencies:
-      '@algolia/client-common': 5.23.4
-      '@algolia/requester-browser-xhr': 5.23.4
-      '@algolia/requester-fetch': 5.23.4
-      '@algolia/requester-node-http': 5.23.4
+      '@algolia/client-common': 5.50.0
+      '@algolia/requester-browser-xhr': 5.50.0
+      '@algolia/requester-fetch': 5.50.0
+      '@algolia/requester-node-http': 5.50.0
 
-  '@algolia/requester-browser-xhr@5.23.4':
+  '@algolia/recommend@5.50.0':
     dependencies:
-      '@algolia/client-common': 5.23.4
+      '@algolia/client-common': 5.50.0
+      '@algolia/requester-browser-xhr': 5.50.0
+      '@algolia/requester-fetch': 5.50.0
+      '@algolia/requester-node-http': 5.50.0
 
-  '@algolia/requester-fetch@5.23.4':
+  '@algolia/requester-browser-xhr@5.50.0':
     dependencies:
-      '@algolia/client-common': 5.23.4
+      '@algolia/client-common': 5.50.0
 
-  '@algolia/requester-node-http@5.23.4':
+  '@algolia/requester-fetch@5.50.0':
     dependencies:
-      '@algolia/client-common': 5.23.4
+      '@algolia/client-common': 5.50.0
 
-  '@ampproject/remapping@2.3.0':
+  '@algolia/requester-node-http@5.50.0':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.30
+      '@algolia/client-common': 5.50.0
 
   '@antfu/install-pkg@1.1.0':
     dependencies:
-      package-manager-detector: 1.3.0
-      tinyexec: 1.0.1
-
-  '@antfu/utils@9.2.0': {}
-
-  '@apm-js-collab/code-transformer@0.8.2': {}
-
-  '@apm-js-collab/tracing-hooks@0.3.1':
-    dependencies:
-      '@apm-js-collab/code-transformer': 0.8.2
-      debug: 4.4.3
-      module-details-from-path: 1.0.4
-    transitivePeerDependencies:
-      - supports-color
+      package-manager-detector: 1.6.0
+      tinyexec: 1.0.4
 
-  '@auth/core@0.37.0':
+  '@anthropic-ai/sdk@0.71.2(zod@4.3.6)':
     dependencies:
-      '@panva/hkdf': 1.2.1
-      '@types/cookie': 0.6.0
-      cookie: 0.7.1
-      jose: 5.10.0
-      oauth4webapi: 3.7.0
-      preact: 10.11.3
-      preact-render-to-string: 5.2.3(preact@10.11.3)
+      json-schema-to-ts: 3.1.1
+    optionalDependencies:
+      zod: 4.3.6
 
-  '@babel/code-frame@7.26.2':
+  '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/code-frame@7.27.1':
+  '@babel/code-frame@7.29.0':
     dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/compat-data@7.27.5': {}
+  '@babel/compat-data@7.29.0': {}
 
-  '@babel/core@7.28.4':
+  '@babel/core@7.29.0':
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.3
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
-      '@babel/helpers': 7.28.4
-      '@babel/parser': 7.28.4
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.5
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helpers': 7.29.2
+      '@babel/parser': 7.29.2
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
       '@jridgewell/remapping': 2.3.5
       convert-source-map: 2.0.0
       debug: 4.4.3
@@ -8882,360 +7264,163 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.28.3':
+  '@babel/generator@7.29.1':
     dependencies:
-      '@babel/parser': 7.28.3
-      '@babel/types': 7.28.2
+      '@babel/parser': 7.29.2
+      '@babel/types': 7.29.0
       '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.30
+      '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
-  '@babel/helper-annotate-as-pure@7.27.3':
+  '@babel/helper-compilation-targets@7.28.6':
     dependencies:
-      '@babel/types': 7.28.5
-
-  '@babel/helper-compilation-targets@7.27.2':
-    dependencies:
-      '@babel/compat-data': 7.27.5
+      '@babel/compat-data': 7.29.0
       '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.24.4
+      browserslist: 4.28.2
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.28.3(@babel/core@7.28.4)':
-    dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-member-expression-to-functions': 7.27.1
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.4)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.28.4
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-globals@7.28.0': {}
 
-  '@babel/helper-member-expression-to-functions@7.27.1':
-    dependencies:
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-imports@7.27.1':
-    dependencies:
-      '@babel/traverse': 7.28.3
-      '@babel/types': 7.28.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.4)':
-    dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.28.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-optimise-call-expression@7.27.1':
-    dependencies:
-      '@babel/types': 7.28.5
-
-  '@babel/helper-plugin-utils@7.27.1': {}
-
-  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.4)':
+  '@babel/helper-module-imports@7.28.6':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-member-expression-to-functions': 7.27.1
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.28.4
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
     dependencies:
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.5
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-string-parser@7.27.1': {}
 
-  '@babel/helper-validator-identifier@7.27.1': {}
-
   '@babel/helper-validator-identifier@7.28.5': {}
 
   '@babel/helper-validator-option@7.27.1': {}
 
-  '@babel/helpers@7.28.4':
-    dependencies:
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
-
-  '@babel/parser@7.28.3':
-    dependencies:
-      '@babel/types': 7.28.2
-
-  '@babel/parser@7.28.4':
-    dependencies:
-      '@babel/types': 7.28.5
-
-  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.4)':
-    dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.4)':
+  '@babel/helpers@7.29.2':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.4)':
-    dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
-      '@babel/helper-plugin-utils': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/plugin-transform-react-jsx-self@7.25.9(@babel/core@7.28.4)':
-    dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-transform-react-jsx-source@7.25.9(@babel/core@7.28.4)':
-    dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-transform-typescript@7.28.0(@babel/core@7.28.4)':
-    dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.4)
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/preset-typescript@7.27.1(@babel/core@7.28.4)':
-    dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
 
-  '@babel/runtime@7.24.5':
+  '@babel/parser@7.29.2':
     dependencies:
-      regenerator-runtime: 0.14.1
-
-  '@babel/runtime@7.28.4': {}
+      '@babel/types': 7.29.0
 
-  '@babel/template@7.27.2':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.3
-      '@babel/types': 7.28.2
+  '@babel/runtime@7.29.2': {}
 
-  '@babel/traverse@7.28.3':
+  '@babel/template@7.28.6':
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.3
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.3
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.2
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/code-frame': 7.29.0
+      '@babel/parser': 7.29.2
+      '@babel/types': 7.29.0
 
-  '@babel/traverse@7.28.4':
+  '@babel/traverse@7.29.0':
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.3
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
       '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.4
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
+      '@babel/parser': 7.29.2
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
       debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.28.2':
-    dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-
-  '@babel/types@7.28.4':
-    dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
-
-  '@babel/types@7.28.5':
+  '@babel/types@7.29.0':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
-  '@braintree/sanitize-url@7.1.1': {}
-
-  '@chevrotain/cst-dts-gen@11.0.3':
-    dependencies:
-      '@chevrotain/gast': 11.0.3
-      '@chevrotain/types': 11.0.3
-      lodash-es: 4.17.21
-
-  '@chevrotain/gast@11.0.3':
-    dependencies:
-      '@chevrotain/types': 11.0.3
-      lodash-es: 4.17.21
-
-  '@chevrotain/regexp-to-ast@11.0.3': {}
-
-  '@chevrotain/types@11.0.3': {}
-
-  '@chevrotain/utils@11.0.3': {}
+  '@braintree/sanitize-url@7.1.2': {}
 
-  '@codemirror/autocomplete@6.20.0':
+  '@chevrotain/cst-dts-gen@11.1.2':
     dependencies:
-      '@codemirror/language': 6.12.1
-      '@codemirror/state': 6.5.4
-      '@codemirror/view': 6.39.11
-      '@lezer/common': 1.5.0
+      '@chevrotain/gast': 11.1.2
+      '@chevrotain/types': 11.1.2
+      lodash-es: 4.17.23
 
-  '@codemirror/commands@6.10.1':
+  '@chevrotain/gast@11.1.2':
     dependencies:
-      '@codemirror/language': 6.12.1
-      '@codemirror/state': 6.5.4
-      '@codemirror/view': 6.39.11
-      '@lezer/common': 1.5.0
+      '@chevrotain/types': 11.1.2
+      lodash-es: 4.17.23
 
-  '@codemirror/lang-css@6.3.1':
-    dependencies:
-      '@codemirror/autocomplete': 6.20.0
-      '@codemirror/language': 6.12.1
-      '@codemirror/state': 6.5.4
-      '@lezer/common': 1.5.0
-      '@lezer/css': 1.3.0
-
-  '@codemirror/lang-html@6.4.11':
-    dependencies:
-      '@codemirror/autocomplete': 6.20.0
-      '@codemirror/lang-css': 6.3.1
-      '@codemirror/lang-javascript': 6.2.4
-      '@codemirror/language': 6.12.1
-      '@codemirror/state': 6.5.4
-      '@codemirror/view': 6.39.11
-      '@lezer/common': 1.5.0
-      '@lezer/css': 1.3.0
-      '@lezer/html': 1.3.13
+  '@chevrotain/regexp-to-ast@11.1.2': {}
 
-  '@codemirror/lang-javascript@6.2.4':
-    dependencies:
-      '@codemirror/autocomplete': 6.20.0
-      '@codemirror/language': 6.12.1
-      '@codemirror/lint': 6.9.2
-      '@codemirror/state': 6.5.4
-      '@codemirror/view': 6.39.11
-      '@lezer/common': 1.5.0
-      '@lezer/javascript': 1.5.4
+  '@chevrotain/types@11.1.2': {}
 
-  '@codemirror/lang-json@6.0.2':
-    dependencies:
-      '@codemirror/language': 6.12.1
-      '@lezer/json': 1.0.3
+  '@chevrotain/utils@11.1.2': {}
 
-  '@codemirror/language@6.12.1':
-    dependencies:
-      '@codemirror/state': 6.5.4
-      '@codemirror/view': 6.39.11
-      '@lezer/common': 1.5.0
-      '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.7
-      style-mod: 4.1.3
+  '@cloudflare/kv-asset-handler@0.5.0': {}
 
-  '@codemirror/lint@6.9.2':
+  '@cloudflare/unenv-preset@2.16.1(unenv@2.0.0-rc.24)(workerd@1.20260617.1)':
     dependencies:
-      '@codemirror/state': 6.5.4
-      '@codemirror/view': 6.39.11
-      crelt: 1.0.6
+      unenv: 2.0.0-rc.24
+    optionalDependencies:
+      workerd: 1.20260617.1
 
-  '@codemirror/merge@6.11.2':
+  '@cloudflare/vite-plugin@1.42.1(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))(workerd@1.20260617.1)(wrangler@4.103.0)':
     dependencies:
-      '@codemirror/language': 6.12.1
-      '@codemirror/state': 6.5.4
-      '@codemirror/view': 6.39.11
-      '@lezer/highlight': 1.2.3
-      style-mod: 4.1.3
+      '@cloudflare/unenv-preset': 2.16.1(unenv@2.0.0-rc.24)(workerd@1.20260617.1)
+      miniflare: 4.20260617.1
+      unenv: 2.0.0-rc.24
+      vite: 8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)
+      wrangler: 4.103.0
+      ws: 8.21.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+      - workerd
 
-  '@codemirror/search@6.6.0':
-    dependencies:
-      '@codemirror/state': 6.5.4
-      '@codemirror/view': 6.39.11
-      crelt: 1.0.6
+  '@cloudflare/workerd-darwin-64@1.20260617.1':
+    optional: true
 
-  '@codemirror/state@6.5.4':
-    dependencies:
-      '@marijn/find-cluster-break': 1.0.2
+  '@cloudflare/workerd-darwin-arm64@1.20260617.1':
+    optional: true
 
-  '@codemirror/theme-one-dark@6.1.3':
-    dependencies:
-      '@codemirror/language': 6.12.1
-      '@codemirror/state': 6.5.4
-      '@codemirror/view': 6.39.11
-      '@lezer/highlight': 1.2.3
+  '@cloudflare/workerd-linux-64@1.20260617.1':
+    optional: true
 
-  '@codemirror/view@6.39.11':
-    dependencies:
-      '@codemirror/state': 6.5.4
-      crelt: 1.0.6
-      style-mod: 4.1.3
-      w3c-keyname: 2.2.8
+  '@cloudflare/workerd-linux-arm64@1.20260617.1':
+    optional: true
 
-  '@colors/colors@1.6.0': {}
+  '@cloudflare/workerd-windows-64@1.20260617.1':
+    optional: true
 
-  '@content-collections/core@0.8.2(typescript@5.9.2)':
+  '@content-collections/core@0.14.3(typescript@6.0.2)':
     dependencies:
-      '@parcel/watcher': 2.5.1
+      '@standard-schema/spec': 1.1.0
       camelcase: 8.0.0
-      esbuild: 0.25.9
+      chokidar: 4.0.3
+      esbuild: 0.25.12
       gray-matter: 4.0.3
       p-limit: 6.2.0
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       pluralize: 8.0.0
-      serialize-javascript: 6.0.2
-      tinyglobby: 0.2.14
-      typescript: 5.9.2
-      yaml: 2.8.1
-      zod: 3.25.76
-
-  '@content-collections/integrations@0.2.1(@content-collections/core@0.8.2(typescript@5.9.2))':
-    dependencies:
-      '@content-collections/core': 0.8.2(typescript@5.9.2)
+      serialize-javascript: 7.0.5
+      tinyglobby: 0.2.15
+      typescript: 6.0.2
+      yaml: 2.8.3
 
-  '@content-collections/vite@0.2.4(@content-collections/core@0.8.2(typescript@5.9.2))(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))':
+  '@content-collections/integrations@0.5.0(@content-collections/core@0.14.3(typescript@6.0.2))':
     dependencies:
-      '@content-collections/core': 0.8.2(typescript@5.9.2)
-      '@content-collections/integrations': 0.2.1(@content-collections/core@0.8.2(typescript@5.9.2))
-      vite: 7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)
+      '@content-collections/core': 0.14.3(typescript@6.0.2)
 
-  '@dabh/diagnostics@2.0.8':
+  '@content-collections/vite@0.2.9(@content-collections/core@0.14.3(typescript@6.0.2))(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))':
     dependencies:
-      '@so-ric/colorspace': 1.1.6
-      enabled: 2.0.0
-      kuler: 2.0.0
+      '@content-collections/core': 0.14.3(typescript@6.0.2)
+      '@content-collections/integrations': 0.5.0(@content-collections/core@0.14.3(typescript@6.0.2))
+      vite: 8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)
 
-  '@dependents/detective-less@5.0.1':
+  '@cspotcode/source-map-support@0.8.1':
     dependencies:
-      gonzales-pe: 4.3.0
-      node-source-walk: 7.0.1
+      '@jridgewell/trace-mapping': 0.3.9
 
   '@dimforge/rapier3d-compat@0.12.0': {}
 
@@ -9243,21 +7428,27 @@ snapshots:
 
   '@effect/platform@0.90.3(effect@3.17.7)':
     dependencies:
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.40.0
       effect: 3.17.7
       find-my-way-ts: 0.1.6
-      msgpackr: 1.11.8
+      msgpackr: 1.11.9
       multipasta: 0.2.7
 
-  '@emnapi/runtime@1.5.0':
+  '@emnapi/core@1.10.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.10.0':
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@envelop/instrumentation@1.0.0':
+  '@emnapi/wasi-threads@1.2.1':
     dependencies:
-      '@whatwg-node/promise-helpers': 1.3.2
       tslib: 2.8.1
+    optional: true
 
   '@esbuild-kit/core-utils@3.3.2':
     dependencies:
@@ -9267,529 +7458,482 @@ snapshots:
   '@esbuild-kit/esm-loader@2.6.5':
     dependencies:
       '@esbuild-kit/core-utils': 3.3.2
-      get-tsconfig: 4.10.1
+      get-tsconfig: 4.13.7
 
-  '@esbuild/aix-ppc64@0.25.10':
+  '@esbuild/aix-ppc64@0.25.12':
     optional: true
 
-  '@esbuild/aix-ppc64@0.25.9':
+  '@esbuild/aix-ppc64@0.27.4':
     optional: true
 
-  '@esbuild/aix-ppc64@0.27.0':
+  '@esbuild/aix-ppc64@0.28.1':
     optional: true
 
   '@esbuild/android-arm64@0.18.20':
     optional: true
 
-  '@esbuild/android-arm64@0.25.10':
+  '@esbuild/android-arm64@0.25.12':
     optional: true
 
-  '@esbuild/android-arm64@0.25.9':
+  '@esbuild/android-arm64@0.27.4':
     optional: true
 
-  '@esbuild/android-arm64@0.27.0':
+  '@esbuild/android-arm64@0.28.1':
     optional: true
 
   '@esbuild/android-arm@0.18.20':
     optional: true
 
-  '@esbuild/android-arm@0.25.10':
+  '@esbuild/android-arm@0.25.12':
     optional: true
 
-  '@esbuild/android-arm@0.25.9':
+  '@esbuild/android-arm@0.27.4':
     optional: true
 
-  '@esbuild/android-arm@0.27.0':
+  '@esbuild/android-arm@0.28.1':
     optional: true
 
   '@esbuild/android-x64@0.18.20':
     optional: true
 
-  '@esbuild/android-x64@0.25.10':
+  '@esbuild/android-x64@0.25.12':
     optional: true
 
-  '@esbuild/android-x64@0.25.9':
+  '@esbuild/android-x64@0.27.4':
     optional: true
 
-  '@esbuild/android-x64@0.27.0':
+  '@esbuild/android-x64@0.28.1':
     optional: true
 
   '@esbuild/darwin-arm64@0.18.20':
     optional: true
 
-  '@esbuild/darwin-arm64@0.25.10':
+  '@esbuild/darwin-arm64@0.25.12':
     optional: true
 
-  '@esbuild/darwin-arm64@0.25.9':
+  '@esbuild/darwin-arm64@0.27.4':
     optional: true
 
-  '@esbuild/darwin-arm64@0.27.0':
+  '@esbuild/darwin-arm64@0.28.1':
     optional: true
 
   '@esbuild/darwin-x64@0.18.20':
     optional: true
 
-  '@esbuild/darwin-x64@0.25.10':
+  '@esbuild/darwin-x64@0.25.12':
     optional: true
 
-  '@esbuild/darwin-x64@0.25.9':
+  '@esbuild/darwin-x64@0.27.4':
     optional: true
 
-  '@esbuild/darwin-x64@0.27.0':
+  '@esbuild/darwin-x64@0.28.1':
     optional: true
 
   '@esbuild/freebsd-arm64@0.18.20':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.25.10':
+  '@esbuild/freebsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.25.9':
+  '@esbuild/freebsd-arm64@0.27.4':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.27.0':
+  '@esbuild/freebsd-arm64@0.28.1':
     optional: true
 
   '@esbuild/freebsd-x64@0.18.20':
     optional: true
 
-  '@esbuild/freebsd-x64@0.25.10':
+  '@esbuild/freebsd-x64@0.25.12':
     optional: true
 
-  '@esbuild/freebsd-x64@0.25.9':
+  '@esbuild/freebsd-x64@0.27.4':
     optional: true
 
-  '@esbuild/freebsd-x64@0.27.0':
+  '@esbuild/freebsd-x64@0.28.1':
     optional: true
 
   '@esbuild/linux-arm64@0.18.20':
     optional: true
 
-  '@esbuild/linux-arm64@0.25.10':
+  '@esbuild/linux-arm64@0.25.12':
     optional: true
 
-  '@esbuild/linux-arm64@0.25.9':
+  '@esbuild/linux-arm64@0.27.4':
     optional: true
 
-  '@esbuild/linux-arm64@0.27.0':
+  '@esbuild/linux-arm64@0.28.1':
     optional: true
 
   '@esbuild/linux-arm@0.18.20':
     optional: true
 
-  '@esbuild/linux-arm@0.25.10':
+  '@esbuild/linux-arm@0.25.12':
     optional: true
 
-  '@esbuild/linux-arm@0.25.9':
+  '@esbuild/linux-arm@0.27.4':
     optional: true
 
-  '@esbuild/linux-arm@0.27.0':
+  '@esbuild/linux-arm@0.28.1':
     optional: true
 
   '@esbuild/linux-ia32@0.18.20':
     optional: true
 
-  '@esbuild/linux-ia32@0.25.10':
+  '@esbuild/linux-ia32@0.25.12':
     optional: true
 
-  '@esbuild/linux-ia32@0.25.9':
+  '@esbuild/linux-ia32@0.27.4':
     optional: true
 
-  '@esbuild/linux-ia32@0.27.0':
+  '@esbuild/linux-ia32@0.28.1':
     optional: true
 
   '@esbuild/linux-loong64@0.18.20':
     optional: true
 
-  '@esbuild/linux-loong64@0.25.10':
+  '@esbuild/linux-loong64@0.25.12':
     optional: true
 
-  '@esbuild/linux-loong64@0.25.9':
+  '@esbuild/linux-loong64@0.27.4':
     optional: true
 
-  '@esbuild/linux-loong64@0.27.0':
+  '@esbuild/linux-loong64@0.28.1':
     optional: true
 
   '@esbuild/linux-mips64el@0.18.20':
     optional: true
 
-  '@esbuild/linux-mips64el@0.25.10':
+  '@esbuild/linux-mips64el@0.25.12':
     optional: true
 
-  '@esbuild/linux-mips64el@0.25.9':
+  '@esbuild/linux-mips64el@0.27.4':
     optional: true
 
-  '@esbuild/linux-mips64el@0.27.0':
+  '@esbuild/linux-mips64el@0.28.1':
     optional: true
 
   '@esbuild/linux-ppc64@0.18.20':
     optional: true
 
-  '@esbuild/linux-ppc64@0.25.10':
+  '@esbuild/linux-ppc64@0.25.12':
     optional: true
 
-  '@esbuild/linux-ppc64@0.25.9':
+  '@esbuild/linux-ppc64@0.27.4':
     optional: true
 
-  '@esbuild/linux-ppc64@0.27.0':
+  '@esbuild/linux-ppc64@0.28.1':
     optional: true
 
   '@esbuild/linux-riscv64@0.18.20':
     optional: true
 
-  '@esbuild/linux-riscv64@0.25.10':
+  '@esbuild/linux-riscv64@0.25.12':
     optional: true
 
-  '@esbuild/linux-riscv64@0.25.9':
+  '@esbuild/linux-riscv64@0.27.4':
     optional: true
 
-  '@esbuild/linux-riscv64@0.27.0':
+  '@esbuild/linux-riscv64@0.28.1':
     optional: true
 
   '@esbuild/linux-s390x@0.18.20':
     optional: true
 
-  '@esbuild/linux-s390x@0.25.10':
+  '@esbuild/linux-s390x@0.25.12':
     optional: true
 
-  '@esbuild/linux-s390x@0.25.9':
+  '@esbuild/linux-s390x@0.27.4':
     optional: true
 
-  '@esbuild/linux-s390x@0.27.0':
+  '@esbuild/linux-s390x@0.28.1':
     optional: true
 
   '@esbuild/linux-x64@0.18.20':
     optional: true
 
-  '@esbuild/linux-x64@0.25.10':
+  '@esbuild/linux-x64@0.25.12':
     optional: true
 
-  '@esbuild/linux-x64@0.25.9':
+  '@esbuild/linux-x64@0.27.4':
     optional: true
 
-  '@esbuild/linux-x64@0.27.0':
+  '@esbuild/linux-x64@0.28.1':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.25.10':
+  '@esbuild/netbsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.25.9':
+  '@esbuild/netbsd-arm64@0.27.4':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.27.0':
+  '@esbuild/netbsd-arm64@0.28.1':
     optional: true
 
   '@esbuild/netbsd-x64@0.18.20':
     optional: true
 
-  '@esbuild/netbsd-x64@0.25.10':
+  '@esbuild/netbsd-x64@0.25.12':
     optional: true
 
-  '@esbuild/netbsd-x64@0.25.9':
+  '@esbuild/netbsd-x64@0.27.4':
     optional: true
 
-  '@esbuild/netbsd-x64@0.27.0':
+  '@esbuild/netbsd-x64@0.28.1':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.25.10':
+  '@esbuild/openbsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.25.9':
+  '@esbuild/openbsd-arm64@0.27.4':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.27.0':
+  '@esbuild/openbsd-arm64@0.28.1':
     optional: true
 
   '@esbuild/openbsd-x64@0.18.20':
     optional: true
 
-  '@esbuild/openbsd-x64@0.25.10':
+  '@esbuild/openbsd-x64@0.25.12':
     optional: true
 
-  '@esbuild/openbsd-x64@0.25.9':
+  '@esbuild/openbsd-x64@0.27.4':
     optional: true
 
-  '@esbuild/openbsd-x64@0.27.0':
+  '@esbuild/openbsd-x64@0.28.1':
     optional: true
 
-  '@esbuild/openharmony-arm64@0.25.10':
+  '@esbuild/openharmony-arm64@0.25.12':
     optional: true
 
-  '@esbuild/openharmony-arm64@0.25.9':
+  '@esbuild/openharmony-arm64@0.27.4':
     optional: true
 
-  '@esbuild/openharmony-arm64@0.27.0':
+  '@esbuild/openharmony-arm64@0.28.1':
     optional: true
 
   '@esbuild/sunos-x64@0.18.20':
     optional: true
 
-  '@esbuild/sunos-x64@0.25.10':
+  '@esbuild/sunos-x64@0.25.12':
     optional: true
 
-  '@esbuild/sunos-x64@0.25.9':
+  '@esbuild/sunos-x64@0.27.4':
     optional: true
 
-  '@esbuild/sunos-x64@0.27.0':
+  '@esbuild/sunos-x64@0.28.1':
     optional: true
 
   '@esbuild/win32-arm64@0.18.20':
     optional: true
 
-  '@esbuild/win32-arm64@0.25.10':
+  '@esbuild/win32-arm64@0.25.12':
     optional: true
 
-  '@esbuild/win32-arm64@0.25.9':
+  '@esbuild/win32-arm64@0.27.4':
     optional: true
 
-  '@esbuild/win32-arm64@0.27.0':
+  '@esbuild/win32-arm64@0.28.1':
     optional: true
 
   '@esbuild/win32-ia32@0.18.20':
     optional: true
 
-  '@esbuild/win32-ia32@0.25.10':
+  '@esbuild/win32-ia32@0.25.12':
     optional: true
 
-  '@esbuild/win32-ia32@0.25.9':
+  '@esbuild/win32-ia32@0.27.4':
     optional: true
 
-  '@esbuild/win32-ia32@0.27.0':
+  '@esbuild/win32-ia32@0.28.1':
     optional: true
 
   '@esbuild/win32-x64@0.18.20':
     optional: true
 
-  '@esbuild/win32-x64@0.25.10':
+  '@esbuild/win32-x64@0.25.12':
     optional: true
 
-  '@esbuild/win32-x64@0.25.9':
+  '@esbuild/win32-x64@0.27.4':
     optional: true
 
-  '@esbuild/win32-x64@0.27.0':
+  '@esbuild/win32-x64@0.28.1':
     optional: true
 
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.1(jiti@2.6.0))':
+  '@fastify/otel@0.18.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      eslint: 9.39.1(jiti@2.6.0)
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/regexpp@4.12.2': {}
-
-  '@eslint/config-array@0.21.1':
-    dependencies:
-      '@eslint/object-schema': 2.1.7
-      debug: 4.4.3
-      minimatch: 3.1.2
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.212.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      minimatch: 10.2.5
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/config-helpers@0.4.2':
+  '@fingerprintjs/fingerprintjs-pro-react@2.7.1':
     dependencies:
-      '@eslint/core': 0.17.0
-
-  '@eslint/core@0.17.0':
-    dependencies:
-      '@types/json-schema': 7.0.15
-
-  '@eslint/eslintrc@3.3.3':
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.4.3
-      espree: 10.4.0
-      globals: 14.0.0
-      ignore: 5.3.2
-      import-fresh: 3.3.0
-      js-yaml: 3.14.2
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/js@9.39.1': {}
-
-  '@eslint/object-schema@2.1.7': {}
+      '@fingerprintjs/fingerprintjs-pro-spa': 1.3.3
+      fast-deep-equal: 3.1.3
 
-  '@eslint/plugin-kit@0.4.1':
+  '@fingerprintjs/fingerprintjs-pro-spa@1.3.3':
     dependencies:
-      '@eslint/core': 0.17.0
-      levn: 0.4.1
-
-  '@fastify/accept-negotiator@2.0.1': {}
+      '@fingerprintjs/fingerprintjs-pro': 3.12.9
+      tslib: 2.8.1
 
-  '@fastify/busboy@3.2.0': {}
+  '@fingerprintjs/fingerprintjs-pro@3.12.9': {}
 
-  '@floating-ui/core@1.6.9':
+  '@floating-ui/core@1.7.5':
     dependencies:
-      '@floating-ui/utils': 0.2.9
+      '@floating-ui/utils': 0.2.11
 
-  '@floating-ui/dom@1.6.13':
+  '@floating-ui/dom@1.7.6':
     dependencies:
-      '@floating-ui/core': 1.6.9
-      '@floating-ui/utils': 0.2.9
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
 
-  '@floating-ui/react-dom@2.1.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@floating-ui/react-dom@2.1.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@floating-ui/dom': 1.6.13
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@floating-ui/dom': 1.7.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  '@floating-ui/react@0.27.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@floating-ui/react@0.27.19(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@floating-ui/utils': 0.2.9
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      tabbable: 6.2.0
-
-  '@floating-ui/utils@0.2.9': {}
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@floating-ui/utils': 0.2.11
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      tabbable: 6.4.0
 
-  '@hono/mcp@0.2.3(@modelcontextprotocol/sdk@1.25.2(hono@4.11.3)(zod@4.3.5))(hono-rate-limiter@0.4.2(hono@4.11.3))(hono@4.11.3)(zod@4.3.5)':
-    dependencies:
-      '@modelcontextprotocol/sdk': 1.25.2(hono@4.11.3)(zod@4.3.5)
-      hono: 4.11.3
-      hono-rate-limiter: 0.4.2(hono@4.11.3)
-      pkce-challenge: 5.0.1
-      zod: 4.3.5
+  '@floating-ui/utils@0.2.11': {}
 
-  '@hono/node-server@1.19.8(hono@4.11.3)':
+  '@google/model-viewer@4.2.0(three@0.183.2)':
     dependencies:
-      hono: 4.11.3
+      '@monogrid/gainmap-js': 3.4.0(three@0.183.2)
+      lit: 3.3.2
+      three: 0.183.2
 
-  '@humanfs/core@0.19.1': {}
+  '@hcaptcha/loader@2.3.0': {}
 
-  '@humanfs/node@0.16.7':
+  '@hcaptcha/react-hcaptcha@1.17.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@humanfs/core': 0.19.1
-      '@humanwhocodes/retry': 0.4.3
+      '@babel/runtime': 7.29.2
+      '@hcaptcha/loader': 2.3.0
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  '@humanwhocodes/module-importer@1.0.1': {}
-
-  '@humanwhocodes/momoa@2.0.4': {}
-
-  '@humanwhocodes/retry@0.4.3': {}
-
-  '@iarna/toml@2.2.5': {}
+  '@hono/node-server@1.19.12(hono@4.12.9)':
+    dependencies:
+      hono: 4.12.9
 
   '@iconify/types@2.0.0': {}
 
-  '@iconify/utils@3.0.1':
+  '@iconify/utils@3.1.0':
     dependencies:
       '@antfu/install-pkg': 1.1.0
-      '@antfu/utils': 9.2.0
       '@iconify/types': 2.0.0
-      debug: 4.4.1
-      globals: 15.15.0
-      kolorist: 1.8.0
-      local-pkg: 1.1.2
-      mlly: 1.7.4
-    transitivePeerDependencies:
-      - supports-color
+      mlly: 1.8.2
 
-  '@img/colour@1.0.0': {}
+  '@img/colour@1.1.0': {}
 
-  '@img/sharp-darwin-arm64@0.34.4':
+  '@img/sharp-darwin-arm64@0.34.5':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.2.3
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
     optional: true
 
-  '@img/sharp-darwin-x64@0.34.4':
+  '@img/sharp-darwin-x64@0.34.5':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.2.3
+      '@img/sharp-libvips-darwin-x64': 1.2.4
     optional: true
 
-  '@img/sharp-libvips-darwin-arm64@1.2.3':
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
     optional: true
 
-  '@img/sharp-libvips-darwin-x64@1.2.3':
+  '@img/sharp-libvips-darwin-x64@1.2.4':
     optional: true
 
-  '@img/sharp-libvips-linux-arm64@1.2.3':
+  '@img/sharp-libvips-linux-arm64@1.2.4':
     optional: true
 
-  '@img/sharp-libvips-linux-arm@1.2.3':
+  '@img/sharp-libvips-linux-arm@1.2.4':
     optional: true
 
-  '@img/sharp-libvips-linux-ppc64@1.2.3':
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
     optional: true
 
-  '@img/sharp-libvips-linux-s390x@1.2.3':
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
     optional: true
 
-  '@img/sharp-libvips-linux-x64@1.2.3':
+  '@img/sharp-libvips-linux-s390x@1.2.4':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.2.3':
+  '@img/sharp-libvips-linux-x64@1.2.4':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-x64@1.2.3':
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
     optional: true
 
-  '@img/sharp-linux-arm64@0.34.4':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.2.3
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
     optional: true
 
-  '@img/sharp-linux-arm@0.34.4':
+  '@img/sharp-linux-arm64@0.34.5':
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.2.3
+      '@img/sharp-libvips-linux-arm64': 1.2.4
     optional: true
 
-  '@img/sharp-linux-ppc64@0.34.4':
+  '@img/sharp-linux-arm@0.34.5':
     optionalDependencies:
-      '@img/sharp-libvips-linux-ppc64': 1.2.3
+      '@img/sharp-libvips-linux-arm': 1.2.4
     optional: true
 
-  '@img/sharp-linux-s390x@0.34.4':
+  '@img/sharp-linux-ppc64@0.34.5':
     optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.2.3
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
     optional: true
 
-  '@img/sharp-linux-x64@0.34.4':
+  '@img/sharp-linux-riscv64@0.34.5':
     optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.2.3
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
     optional: true
 
-  '@img/sharp-linuxmusl-arm64@0.34.4':
+  '@img/sharp-linux-s390x@0.34.5':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.2.3
+      '@img/sharp-libvips-linux-s390x': 1.2.4
     optional: true
 
-  '@img/sharp-linuxmusl-x64@0.34.4':
+  '@img/sharp-linux-x64@0.34.5':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.2.3
+      '@img/sharp-libvips-linux-x64': 1.2.4
     optional: true
 
-  '@img/sharp-wasm32@0.34.4':
-    dependencies:
-      '@emnapi/runtime': 1.5.0
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
     optional: true
 
-  '@img/sharp-win32-arm64@0.34.4':
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
     optional: true
 
-  '@img/sharp-win32-ia32@0.34.4':
+  '@img/sharp-wasm32@0.34.5':
+    dependencies:
+      '@emnapi/runtime': 1.10.0
     optional: true
 
-  '@img/sharp-win32-x64@0.34.4':
+  '@img/sharp-win32-arm64@0.34.5':
     optional: true
 
-  '@import-maps/resolve@2.0.0': {}
-
-  '@isaacs/balanced-match@4.0.1': {}
-
-  '@isaacs/brace-expansion@5.0.0':
-    dependencies:
-      '@isaacs/balanced-match': 4.0.1
+  '@img/sharp-win32-ia32@0.34.5':
+    optional: true
 
-  '@isaacs/fs-minipass@4.0.1':
-    dependencies:
-      minipass: 7.1.2
+  '@img/sharp-win32-x64@0.34.5':
+    optional: true
 
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.30
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/remapping@2.3.5':
     dependencies:
@@ -9798,34 +7942,96 @@ snapshots:
 
   '@jridgewell/resolve-uri@3.1.2': {}
 
-  '@jridgewell/source-map@0.3.11':
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-    optional: true
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@jridgewell/trace-mapping@0.3.9':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@jsonjoy.com/base64@1.1.2(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
+
+  '@jsonjoy.com/base64@17.67.0(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
+
+  '@jsonjoy.com/buffers@1.2.1(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
+
+  '@jsonjoy.com/buffers@17.67.0(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
+
+  '@jsonjoy.com/codegen@1.0.0(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
+
+  '@jsonjoy.com/codegen@17.67.0(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
+
+  '@jsonjoy.com/fs-core@4.57.1(tslib@2.8.1)':
+    dependencies:
+      '@jsonjoy.com/fs-node-builtins': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-utils': 4.57.1(tslib@2.8.1)
+      thingies: 2.6.0(tslib@2.8.1)
+      tslib: 2.8.1
+
+  '@jsonjoy.com/fs-fsa@4.57.1(tslib@2.8.1)':
+    dependencies:
+      '@jsonjoy.com/fs-core': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-builtins': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-utils': 4.57.1(tslib@2.8.1)
+      thingies: 2.6.0(tslib@2.8.1)
+      tslib: 2.8.1
 
-  '@jridgewell/sourcemap-codec@1.5.5': {}
+  '@jsonjoy.com/fs-node-builtins@4.57.1(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
 
-  '@jridgewell/trace-mapping@0.3.30':
+  '@jsonjoy.com/fs-node-to-fsa@4.57.1(tslib@2.8.1)':
     dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jsonjoy.com/fs-fsa': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-builtins': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-utils': 4.57.1(tslib@2.8.1)
+      tslib: 2.8.1
 
-  '@jridgewell/trace-mapping@0.3.31':
+  '@jsonjoy.com/fs-node-utils@4.57.1(tslib@2.8.1)':
     dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jsonjoy.com/fs-node-builtins': 4.57.1(tslib@2.8.1)
+      tslib: 2.8.1
 
-  '@jsonjoy.com/base64@1.1.2(tslib@2.8.1)':
+  '@jsonjoy.com/fs-node@4.57.1(tslib@2.8.1)':
     dependencies:
+      '@jsonjoy.com/fs-core': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-builtins': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-utils': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-print': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-snapshot': 4.57.1(tslib@2.8.1)
+      glob-to-regex.js: 1.2.0(tslib@2.8.1)
+      thingies: 2.6.0(tslib@2.8.1)
       tslib: 2.8.1
 
-  '@jsonjoy.com/buffers@1.2.1(tslib@2.8.1)':
+  '@jsonjoy.com/fs-print@4.57.1(tslib@2.8.1)':
     dependencies:
+      '@jsonjoy.com/fs-node-utils': 4.57.1(tslib@2.8.1)
+      tree-dump: 1.1.0(tslib@2.8.1)
       tslib: 2.8.1
 
-  '@jsonjoy.com/codegen@1.0.0(tslib@2.8.1)':
+  '@jsonjoy.com/fs-snapshot@4.57.1(tslib@2.8.1)':
     dependencies:
+      '@jsonjoy.com/buffers': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-utils': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/json-pack': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/util': 17.67.0(tslib@2.8.1)
       tslib: 2.8.1
 
   '@jsonjoy.com/json-pack@1.21.0(tslib@2.8.1)':
@@ -9836,7 +8042,19 @@ snapshots:
       '@jsonjoy.com/json-pointer': 1.0.2(tslib@2.8.1)
       '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
       hyperdyperid: 1.2.0
-      thingies: 2.5.0(tslib@2.8.1)
+      thingies: 2.6.0(tslib@2.8.1)
+      tree-dump: 1.1.0(tslib@2.8.1)
+      tslib: 2.8.1
+
+  '@jsonjoy.com/json-pack@17.67.0(tslib@2.8.1)':
+    dependencies:
+      '@jsonjoy.com/base64': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/buffers': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/codegen': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/json-pointer': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/util': 17.67.0(tslib@2.8.1)
+      hyperdyperid: 1.2.0
+      thingies: 2.6.0(tslib@2.8.1)
       tree-dump: 1.1.0(tslib@2.8.1)
       tslib: 2.8.1
 
@@ -9846,95 +8064,71 @@ snapshots:
       '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
       tslib: 2.8.1
 
+  '@jsonjoy.com/json-pointer@17.67.0(tslib@2.8.1)':
+    dependencies:
+      '@jsonjoy.com/util': 17.67.0(tslib@2.8.1)
+      tslib: 2.8.1
+
   '@jsonjoy.com/util@1.9.0(tslib@2.8.1)':
     dependencies:
       '@jsonjoy.com/buffers': 1.2.1(tslib@2.8.1)
       '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1)
       tslib: 2.8.1
 
-  '@juggle/resize-observer@3.4.0': {}
-
-  '@lezer/common@1.5.0': {}
-
-  '@lezer/css@1.3.0':
-    dependencies:
-      '@lezer/common': 1.5.0
-      '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.7
-
-  '@lezer/highlight@1.2.3':
-    dependencies:
-      '@lezer/common': 1.5.0
-
-  '@lezer/html@1.3.13':
-    dependencies:
-      '@lezer/common': 1.5.0
-      '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.7
-
-  '@lezer/javascript@1.5.4':
+  '@jsonjoy.com/util@17.67.0(tslib@2.8.1)':
     dependencies:
-      '@lezer/common': 1.5.0
-      '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.7
+      '@jsonjoy.com/buffers': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/codegen': 17.67.0(tslib@2.8.1)
+      tslib: 2.8.1
 
-  '@lezer/json@1.0.3':
+  '@kapaai/react-sdk@0.9.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@lezer/common': 1.5.0
-      '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.7
+      '@fingerprintjs/fingerprintjs-pro-react': 2.7.1
+      '@fingerprintjs/fingerprintjs-pro-spa': 1.3.3
+      '@hcaptcha/react-hcaptcha': 1.17.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      js-cookie: 3.0.8
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      tldts: 7.4.2
 
-  '@lezer/lr@1.4.7':
-    dependencies:
-      '@lezer/common': 1.5.0
+  '@lit-labs/ssr-dom-shim@1.5.1': {}
 
-  '@mapbox/node-pre-gyp@2.0.0':
+  '@lit/reactive-element@2.1.2':
     dependencies:
-      consola: 3.4.2
-      detect-libc: 2.0.4
-      https-proxy-agent: 7.0.6
-      node-fetch: 2.7.0
-      nopt: 8.1.0
-      semver: 7.7.3
-      tar: 7.4.3
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
-  '@marijn/find-cluster-break@1.0.2': {}
+      '@lit-labs/ssr-dom-shim': 1.5.1
 
   '@mediapipe/tasks-vision@0.10.17': {}
 
-  '@mermaid-js/parser@0.6.2':
+  '@mermaid-js/parser@1.1.0':
     dependencies:
-      langium: 3.3.1
+      langium: 4.2.1
 
-  '@modelcontextprotocol/sdk@1.25.2(hono@4.11.3)(zod@4.3.5)':
+  '@modelcontextprotocol/sdk@1.29.0(zod@4.3.6)':
     dependencies:
-      '@hono/node-server': 1.19.8(hono@4.11.3)
-      ajv: 8.17.1
-      ajv-formats: 3.0.1(ajv@8.17.1)
+      '@hono/node-server': 1.19.12(hono@4.12.9)
+      ajv: 8.18.0
+      ajv-formats: 3.0.1(ajv@8.18.0)
       content-type: 1.0.5
-      cors: 2.8.5
+      cors: 2.8.6
       cross-spawn: 7.0.6
       eventsource: 3.0.7
       eventsource-parser: 3.0.6
       express: 5.2.1
-      express-rate-limit: 7.5.1(express@5.2.1)
-      jose: 6.1.3
+      express-rate-limit: 8.3.2(express@5.2.1)
+      hono: 4.12.9
+      jose: 6.2.2
       json-schema-typed: 8.0.2
       pkce-challenge: 5.0.1
       raw-body: 3.0.2
-      zod: 4.3.5
-      zod-to-json-schema: 3.25.1(zod@4.3.5)
+      zod: 4.3.6
+      zod-to-json-schema: 3.25.2(zod@4.3.6)
     transitivePeerDependencies:
-      - hono
       - supports-color
 
-  '@monogrid/gainmap-js@3.4.0(three@0.182.0)':
+  '@monogrid/gainmap-js@3.4.0(three@0.183.2)':
     dependencies:
       promise-worker-transferable: 1.0.4
-      three: 0.182.0
+      three: 0.183.2
 
   '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3':
     optional: true
@@ -9954,365 +8148,19 @@ snapshots:
   '@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3':
     optional: true
 
-  '@neondatabase/serverless@0.10.4':
-    dependencies:
-      '@types/pg': 8.11.6
-
-  '@netlify/api@14.0.6':
-    dependencies:
-      '@netlify/open-api': 2.39.0
-      node-fetch: 3.3.2
-      p-wait-for: 5.0.2
-      picoquery: 2.5.0
-
-  '@netlify/binary-info@1.0.0': {}
-
-  '@netlify/blobs@10.0.11':
-    dependencies:
-      '@netlify/dev-utils': 4.2.0
-      '@netlify/runtime-utils': 2.1.0
-
-  '@netlify/cache@3.1.1':
-    dependencies:
-      '@netlify/runtime-utils': 2.1.0
-
-  '@netlify/config@23.2.0':
-    dependencies:
-      '@iarna/toml': 2.2.5
-      '@netlify/api': 14.0.6
-      '@netlify/headers-parser': 9.0.2
-      '@netlify/redirect-parser': 15.0.3
-      chalk: 5.6.2
-      cron-parser: 4.9.0
-      deepmerge: 4.3.1
-      dot-prop: 9.0.0
-      execa: 8.0.1
-      fast-safe-stringify: 2.1.1
-      figures: 6.1.0
-      filter-obj: 6.1.0
-      find-up: 7.0.0
-      indent-string: 5.0.0
-      is-plain-obj: 4.1.0
-      map-obj: 5.0.2
-      omit.js: 2.0.2
-      p-locate: 6.0.0
-      path-type: 6.0.0
-      read-package-up: 11.0.0
-      tomlify-j0.4: 3.0.0
-      validate-npm-package-name: 5.0.1
-      yaml: 2.8.1
-      yargs: 17.7.2
-
-  '@netlify/dev-utils@4.2.0':
-    dependencies:
-      '@whatwg-node/server': 0.10.13
-      ansis: 4.1.0
-      chokidar: 4.0.3
-      decache: 4.6.2
-      dettle: 1.0.5
-      dot-prop: 9.0.0
-      empathic: 2.0.0
-      env-paths: 3.0.0
-      image-size: 2.0.2
-      js-image-generator: 1.0.4
-      parse-gitignore: 2.0.0
-      semver: 7.7.2
-      tmp-promise: 3.0.3
-      uuid: 11.1.0
-      write-file-atomic: 5.0.1
-
-  '@netlify/dev@4.5.12(rollup@4.53.3)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11))':
-    dependencies:
-      '@netlify/blobs': 10.0.11
-      '@netlify/config': 23.2.0
-      '@netlify/dev-utils': 4.2.0
-      '@netlify/edge-functions': 2.18.2
-      '@netlify/functions': 4.2.7(rollup@4.53.3)
-      '@netlify/headers': 2.0.12
-      '@netlify/images': 1.2.8(@netlify/blobs@10.0.11)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11))
-      '@netlify/redirects': 3.0.13
-      '@netlify/runtime': 4.0.16
-      '@netlify/static': 3.0.11
-      ulid: 3.0.1
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@deno/kv'
-      - '@planetscale/database'
-      - '@upstash/redis'
-      - '@vercel/blob'
-      - '@vercel/functions'
-      - '@vercel/kv'
-      - aws4fetch
-      - db0
-      - encoding
-      - idb-keyval
-      - ioredis
-      - react-native-b4a
-      - rollup
-      - supports-color
-      - uploadthing
-
-  '@netlify/edge-bundler@14.5.6':
-    dependencies:
-      '@import-maps/resolve': 2.0.0
-      ajv: 8.17.1
-      ajv-errors: 3.0.0(ajv@8.17.1)
-      better-ajv-errors: 1.2.0(ajv@8.17.1)
-      common-path-prefix: 3.0.0
-      env-paths: 3.0.0
-      esbuild: 0.25.10
-      execa: 8.0.1
-      find-up: 7.0.0
-      get-port: 7.1.0
-      node-stream-zip: 1.15.0
-      p-retry: 6.2.1
-      p-wait-for: 5.0.2
-      parse-imports: 2.2.1
-      path-key: 4.0.0
-      semver: 7.7.3
-      tar: 7.4.3
-      tmp-promise: 3.0.3
-      urlpattern-polyfill: 8.0.2
-      uuid: 11.1.0
-
-  '@netlify/edge-functions-bootstrap@2.16.0': {}
-
-  '@netlify/edge-functions@2.18.2':
-    dependencies:
-      '@netlify/dev-utils': 4.2.0
-      '@netlify/edge-bundler': 14.5.6
-      '@netlify/edge-functions-bootstrap': 2.16.0
-      '@netlify/runtime-utils': 2.1.0
-      '@netlify/types': 2.0.3
-      get-port: 7.1.0
-
-  '@netlify/functions@4.2.7(rollup@4.53.3)':
-    dependencies:
-      '@netlify/blobs': 10.0.11
-      '@netlify/dev-utils': 4.2.0
-      '@netlify/types': 2.0.3
-      '@netlify/zip-it-and-ship-it': 14.1.8(rollup@4.53.3)
-      cron-parser: 4.9.0
-      decache: 4.6.2
-      extract-zip: 2.0.1
-      is-stream: 4.0.1
-      jwt-decode: 4.0.0
-      lambda-local: 2.2.0
-      read-package-up: 11.0.0
-      source-map-support: 0.5.21
-    transitivePeerDependencies:
-      - encoding
-      - react-native-b4a
-      - rollup
-      - supports-color
-
-  '@netlify/functions@5.1.0':
-    dependencies:
-      '@netlify/types': 2.2.0
-
-  '@netlify/headers-parser@9.0.2':
-    dependencies:
-      '@iarna/toml': 2.2.5
-      escape-string-regexp: 5.0.0
-      fast-safe-stringify: 2.1.1
-      is-plain-obj: 4.1.0
-      map-obj: 5.0.2
-      path-exists: 5.0.0
-
-  '@netlify/headers@2.0.12':
-    dependencies:
-      '@netlify/headers-parser': 9.0.2
-
-  '@netlify/images@1.2.8(@netlify/blobs@10.0.11)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11))':
-    dependencies:
-      ipx: 3.1.1(@netlify/blobs@10.0.11)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11))
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@deno/kv'
-      - '@netlify/blobs'
-      - '@planetscale/database'
-      - '@upstash/redis'
-      - '@vercel/blob'
-      - '@vercel/functions'
-      - '@vercel/kv'
-      - aws4fetch
-      - db0
-      - idb-keyval
-      - ioredis
-      - uploadthing
-
-  '@netlify/neon@0.1.0':
-    dependencies:
-      '@neondatabase/serverless': 0.10.4
-
-  '@netlify/open-api@2.39.0': {}
-
-  '@netlify/redirect-parser@15.0.3':
-    dependencies:
-      '@iarna/toml': 2.2.5
-      fast-safe-stringify: 2.1.1
-      is-plain-obj: 4.1.0
-      path-exists: 5.0.0
-
-  '@netlify/redirects@3.0.13':
-    dependencies:
-      '@netlify/dev-utils': 4.2.0
-      '@netlify/redirect-parser': 15.0.3
-      cookie: 1.0.2
-      jsonwebtoken: 9.0.2
-      netlify-redirector: 0.5.0
-
-  '@netlify/runtime-utils@2.1.0': {}
-
-  '@netlify/runtime@4.0.16':
-    dependencies:
-      '@netlify/blobs': 10.0.11
-      '@netlify/cache': 3.1.1
-      '@netlify/runtime-utils': 2.1.0
-      '@netlify/types': 2.0.3
-
-  '@netlify/serverless-functions-api@2.6.0': {}
-
-  '@netlify/static@3.0.11':
-    dependencies:
-      mime-types: 3.0.1
-
-  '@netlify/types@2.0.3': {}
-
-  '@netlify/types@2.2.0': {}
-
-  '@netlify/vite-plugin-tanstack-start@1.0.2(@tanstack/react-start@1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)))(babel-plugin-macros@3.1.0)(rollup@4.53.3)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11))(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))':
-    dependencies:
-      '@netlify/vite-plugin': 2.6.1(babel-plugin-macros@3.1.0)(rollup@4.53.3)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11))(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
-      vite: 7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)
-    optionalDependencies:
-      '@tanstack/react-start': 1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@deno/kv'
-      - '@planetscale/database'
-      - '@upstash/redis'
-      - '@vercel/blob'
-      - '@vercel/functions'
-      - '@vercel/kv'
-      - aws4fetch
-      - babel-plugin-macros
-      - db0
-      - encoding
-      - idb-keyval
-      - ioredis
-      - react-native-b4a
-      - rollup
-      - supports-color
-      - uploadthing
-
-  '@netlify/vite-plugin@2.6.1(babel-plugin-macros@3.1.0)(rollup@4.53.3)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11))(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))':
-    dependencies:
-      '@netlify/dev': 4.5.12(rollup@4.53.3)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11))
-      '@netlify/dev-utils': 4.2.0
-      dedent: 1.7.0(babel-plugin-macros@3.1.0)
-      vite: 7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@deno/kv'
-      - '@planetscale/database'
-      - '@upstash/redis'
-      - '@vercel/blob'
-      - '@vercel/functions'
-      - '@vercel/kv'
-      - aws4fetch
-      - babel-plugin-macros
-      - db0
-      - encoding
-      - idb-keyval
-      - ioredis
-      - react-native-b4a
-      - rollup
-      - supports-color
-      - uploadthing
-
-  '@netlify/zip-it-and-ship-it@14.1.8(rollup@4.53.3)':
-    dependencies:
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
-      '@netlify/binary-info': 1.0.0
-      '@netlify/serverless-functions-api': 2.6.0
-      '@vercel/nft': 0.29.4(rollup@4.53.3)
-      archiver: 7.0.1
-      common-path-prefix: 3.0.0
-      copy-file: 11.1.0
-      es-module-lexer: 1.7.0
-      esbuild: 0.25.10
-      execa: 8.0.1
-      fast-glob: 3.3.3
-      filter-obj: 6.1.0
-      find-up: 7.0.0
-      is-path-inside: 4.0.0
-      junk: 4.0.1
-      locate-path: 7.2.0
-      merge-options: 3.0.4
-      minimatch: 9.0.5
-      normalize-path: 3.0.0
-      p-map: 7.0.3
-      path-exists: 5.0.0
-      precinct: 12.2.0
-      require-package-name: 2.0.1
-      resolve: 2.0.0-next.5
-      semver: 7.7.3
-      tmp-promise: 3.0.3
-      toml: 3.0.0
-      unixify: 1.0.0
-      urlpattern-polyfill: 8.0.2
-      yargs: 17.7.2
-      zod: 3.25.76
-    transitivePeerDependencies:
-      - encoding
-      - react-native-b4a
-      - rollup
-      - supports-color
-
-  '@nodelib/fs.scandir@2.1.5':
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-
-  '@nodelib/fs.stat@2.0.5': {}
-
-  '@nodelib/fs.walk@1.2.8':
+  '@napi-rs/wasm-runtime@1.1.2(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.17.1
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.1
+    optional: true
 
-  '@number-flow/react@0.4.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
-      esm-env: 1.1.4
-      number-flow: 0.4.0
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.1
+    optional: true
 
   '@observablehq/plot@0.6.17':
     dependencies:
@@ -10320,37 +8168,35 @@ snapshots:
       interval-tree-1d: 1.0.4
       isoformat: 0.2.1
 
-  '@octokit/endpoint@9.0.2':
+  '@octokit/endpoint@11.0.3':
     dependencies:
-      '@octokit/types': 12.1.1
-      is-plain-object: 5.0.0
-      universal-user-agent: 6.0.0
+      '@octokit/types': 16.0.0
+      universal-user-agent: 7.0.3
 
-  '@octokit/graphql@7.0.2':
+  '@octokit/graphql@9.0.3':
     dependencies:
-      '@octokit/request': 8.1.4
-      '@octokit/types': 12.1.1
-      universal-user-agent: 6.0.0
+      '@octokit/request': 10.0.8
+      '@octokit/types': 16.0.0
+      universal-user-agent: 7.0.3
 
-  '@octokit/openapi-types@19.0.2': {}
+  '@octokit/openapi-types@27.0.0': {}
 
-  '@octokit/request-error@5.0.1':
+  '@octokit/request-error@7.1.0':
     dependencies:
-      '@octokit/types': 12.1.1
-      deprecation: 2.3.1
-      once: 1.4.0
+      '@octokit/types': 16.0.0
 
-  '@octokit/request@8.1.4':
+  '@octokit/request@10.0.8':
     dependencies:
-      '@octokit/endpoint': 9.0.2
-      '@octokit/request-error': 5.0.1
-      '@octokit/types': 12.1.1
-      is-plain-object: 5.0.0
-      universal-user-agent: 6.0.0
+      '@octokit/endpoint': 11.0.3
+      '@octokit/request-error': 7.1.0
+      '@octokit/types': 16.0.0
+      fast-content-type-parse: 3.0.0
+      json-with-bigint: 3.5.8
+      universal-user-agent: 7.0.3
 
-  '@octokit/types@12.1.1':
+  '@octokit/types@16.0.0':
     dependencies:
-      '@octokit/openapi-types': 19.0.2
+      '@octokit/openapi-types': 27.0.0
 
   '@oozcitak/dom@2.0.2':
     dependencies:
@@ -10369,990 +8215,901 @@ snapshots:
 
   '@oozcitak/util@10.0.0': {}
 
-  '@opentelemetry/api-logs@0.208.0':
+  '@opentelemetry/api-logs@0.207.0':
     dependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
 
-  '@opentelemetry/api@1.9.0': {}
+  '@opentelemetry/api-logs@0.212.0':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
 
-  '@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/api-logs@0.214.0':
     dependencies:
-      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api': 1.9.1
 
-  '@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/api@1.9.1': {}
+
+  '@opentelemetry/context-async-hooks@2.6.1(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/api': 1.9.1
 
-  '@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/core@2.6.1(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/semantic-conventions': 1.40.0
 
-  '@opentelemetry/instrumentation-amqplib@0.55.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-amqplib@0.61.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-connect@0.52.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-connect@0.57.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
       '@types/connect': 3.4.38
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-dataloader@0.26.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-dataloader@0.31.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-express@0.57.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-express@0.62.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-fs@0.28.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-fs@0.33.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-generic-pool@0.52.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-generic-pool@0.57.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-graphql@0.56.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-graphql@0.62.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-hapi@0.55.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-hapi@0.60.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-http@0.208.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-http@0.214.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
       forwarded-parse: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-ioredis@0.56.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-ioredis@0.62.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
       '@opentelemetry/redis-common': 0.38.2
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-kafkajs@0.18.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-kafkajs@0.23.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-knex@0.53.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-knex@0.58.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-koa@0.57.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-koa@0.62.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-lru-memoizer@0.53.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-lru-memoizer@0.58.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mongodb@0.61.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mongodb@0.67.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mongoose@0.55.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mongoose@0.60.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mysql2@0.55.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mysql2@0.60.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mysql@0.54.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mysql@0.60.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
       '@types/mysql': 2.15.27
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-pg@0.61.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-pg@0.66.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.1)
       '@types/pg': 8.15.6
-      '@types/pg-pool': 2.0.6
+      '@types/pg-pool': 2.0.7
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-redis@0.57.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-redis@0.62.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
       '@opentelemetry/redis-common': 0.38.2
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.40.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-tedious@0.27.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-tedious@0.33.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
       '@types/tedious': 4.0.14
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-undici@0.19.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-undici@0.24.0(@opentelemetry/api@1.9.1)':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation@0.207.0(@opentelemetry/api@1.9.1)':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/api-logs': 0.207.0
+      import-in-the-middle: 2.0.6
+      require-in-the-middle: 8.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/instrumentation@0.212.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/api-logs': 0.212.0
+      import-in-the-middle: 2.0.6
+      require-in-the-middle: 8.0.1
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation@0.214.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/api-logs': 0.208.0
-      import-in-the-middle: 2.0.1
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/api-logs': 0.214.0
+      import-in-the-middle: 3.0.0
       require-in-the-middle: 8.0.1
     transitivePeerDependencies:
       - supports-color
 
   '@opentelemetry/redis-common@0.38.2': {}
 
-  '@opentelemetry/resources@2.3.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/resources@2.6.1(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
 
-  '@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/sdk-trace-base@2.6.1(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
 
-  '@opentelemetry/semantic-conventions@1.38.0': {}
+  '@opentelemetry/semantic-conventions@1.40.0': {}
 
-  '@opentelemetry/sql-common@0.41.2(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/sql-common@0.41.2(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
 
-  '@panva/hkdf@1.2.1': {}
+  '@oxc-parser/binding-android-arm-eabi@0.120.0':
+    optional: true
 
-  '@parcel/watcher-android-arm64@2.5.1':
+  '@oxc-parser/binding-android-arm64@0.120.0':
     optional: true
 
-  '@parcel/watcher-darwin-arm64@2.5.1':
+  '@oxc-parser/binding-darwin-arm64@0.120.0':
     optional: true
 
-  '@parcel/watcher-darwin-x64@2.5.1':
+  '@oxc-parser/binding-darwin-x64@0.120.0':
     optional: true
 
-  '@parcel/watcher-freebsd-x64@2.5.1':
+  '@oxc-parser/binding-freebsd-x64@0.120.0':
     optional: true
 
-  '@parcel/watcher-linux-arm-glibc@2.5.1':
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.120.0':
     optional: true
 
-  '@parcel/watcher-linux-arm-musl@2.5.1':
+  '@oxc-parser/binding-linux-arm-musleabihf@0.120.0':
     optional: true
 
-  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+  '@oxc-parser/binding-linux-arm64-gnu@0.120.0':
     optional: true
 
-  '@parcel/watcher-linux-arm64-musl@2.5.1':
+  '@oxc-parser/binding-linux-arm64-musl@0.120.0':
     optional: true
 
-  '@parcel/watcher-linux-x64-glibc@2.5.1':
+  '@oxc-parser/binding-linux-ppc64-gnu@0.120.0':
     optional: true
 
-  '@parcel/watcher-linux-x64-musl@2.5.1':
+  '@oxc-parser/binding-linux-riscv64-gnu@0.120.0':
     optional: true
 
-  '@parcel/watcher-wasm@2.5.1':
-    dependencies:
-      is-glob: 4.0.3
-      micromatch: 4.0.8
+  '@oxc-parser/binding-linux-riscv64-musl@0.120.0':
+    optional: true
 
-  '@parcel/watcher-win32-arm64@2.5.1':
+  '@oxc-parser/binding-linux-s390x-gnu@0.120.0':
     optional: true
 
-  '@parcel/watcher-win32-ia32@2.5.1':
+  '@oxc-parser/binding-linux-x64-gnu@0.120.0':
     optional: true
 
-  '@parcel/watcher-win32-x64@2.5.1':
+  '@oxc-parser/binding-linux-x64-musl@0.120.0':
     optional: true
 
-  '@parcel/watcher@2.5.1':
-    dependencies:
-      detect-libc: 1.0.3
-      is-glob: 4.0.3
-      micromatch: 4.0.8
-      node-addon-api: 7.1.1
-    optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.5.1
-      '@parcel/watcher-darwin-arm64': 2.5.1
-      '@parcel/watcher-darwin-x64': 2.5.1
-      '@parcel/watcher-freebsd-x64': 2.5.1
-      '@parcel/watcher-linux-arm-glibc': 2.5.1
-      '@parcel/watcher-linux-arm-musl': 2.5.1
-      '@parcel/watcher-linux-arm64-glibc': 2.5.1
-      '@parcel/watcher-linux-arm64-musl': 2.5.1
-      '@parcel/watcher-linux-x64-glibc': 2.5.1
-      '@parcel/watcher-linux-x64-musl': 2.5.1
-      '@parcel/watcher-win32-arm64': 2.5.1
-      '@parcel/watcher-win32-ia32': 2.5.1
-      '@parcel/watcher-win32-x64': 2.5.1
-
-  '@playwright/test@1.57.0':
-    dependencies:
-      playwright: 1.57.0
-
-  '@posthog/core@1.9.1':
-    dependencies:
-      cross-spawn: 7.0.6
+  '@oxc-parser/binding-openharmony-arm64@0.120.0':
+    optional: true
 
-  '@prisma/instrumentation@6.19.0(@opentelemetry/api@1.9.0)':
+  '@oxc-parser/binding-wasm32-wasi@0.120.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     transitivePeerDependencies:
-      - supports-color
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+    optional: true
 
-  '@radix-ui/primitive@1.1.2': {}
+  '@oxc-parser/binding-win32-arm64-msvc@0.120.0':
+    optional: true
 
-  '@radix-ui/primitive@1.1.3': {}
+  '@oxc-parser/binding-win32-ia32-msvc@0.120.0':
+    optional: true
 
-  '@radix-ui/react-accordion@1.2.12(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+  '@oxc-parser/binding-win32-x64-msvc@0.120.0':
+    optional: true
 
-  '@radix-ui/react-arrow@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+  '@oxc-project/types@0.120.0': {}
 
-  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+  '@oxc-project/types@0.130.0': {}
 
-  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+  '@oxfmt/binding-android-arm-eabi@0.43.0':
+    optional: true
 
-  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+  '@oxfmt/binding-android-arm64@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-darwin-arm64@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-darwin-x64@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-freebsd-x64@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm-gnueabihf@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm-musleabihf@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm64-gnu@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm64-musl@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-ppc64-gnu@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-riscv64-gnu@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-riscv64-musl@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-s390x-gnu@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-x64-gnu@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-linux-x64-musl@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-openharmony-arm64@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-win32-arm64-msvc@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-win32-ia32-msvc@0.43.0':
+    optional: true
+
+  '@oxfmt/binding-win32-x64-msvc@0.43.0':
+    optional: true
+
+  '@oxlint-tsgolint/darwin-arm64@0.19.0':
+    optional: true
+
+  '@oxlint-tsgolint/darwin-x64@0.19.0':
+    optional: true
+
+  '@oxlint-tsgolint/linux-arm64@0.19.0':
+    optional: true
+
+  '@oxlint-tsgolint/linux-x64@0.19.0':
+    optional: true
+
+  '@oxlint-tsgolint/win32-arm64@0.19.0':
+    optional: true
+
+  '@oxlint-tsgolint/win32-x64@0.19.0':
+    optional: true
+
+  '@oxlint/binding-android-arm-eabi@1.58.0':
+    optional: true
+
+  '@oxlint/binding-android-arm64@1.58.0':
+    optional: true
+
+  '@oxlint/binding-darwin-arm64@1.58.0':
+    optional: true
+
+  '@oxlint/binding-darwin-x64@1.58.0':
+    optional: true
+
+  '@oxlint/binding-freebsd-x64@1.58.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.58.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-musleabihf@1.58.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-gnu@1.58.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-musl@1.58.0':
+    optional: true
+
+  '@oxlint/binding-linux-ppc64-gnu@1.58.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-gnu@1.58.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-musl@1.58.0':
+    optional: true
+
+  '@oxlint/binding-linux-s390x-gnu@1.58.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-gnu@1.58.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-musl@1.58.0':
+    optional: true
 
-  '@radix-ui/react-collection@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.0(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+  '@oxlint/binding-openharmony-arm64@1.58.0':
+    optional: true
 
-  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+  '@oxlint/binding-win32-arm64-msvc@1.58.0':
+    optional: true
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.5)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.5
+  '@oxlint/binding-win32-ia32-msvc@1.58.0':
+    optional: true
 
-  '@radix-ui/react-context@1.1.2(@types/react@19.2.5)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.5
+  '@oxlint/binding-win32-x64-msvc@1.58.0':
+    optional: true
 
-  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@poppinss/colors@4.1.6':
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      aria-hidden: 1.2.4
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.6.3(@types/react@19.2.5)(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      kleur: 4.1.5
 
-  '@radix-ui/react-direction@1.1.1(@types/react@19.2.5)(react@19.2.0)':
+  '@poppinss/dumper@0.6.5':
     dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.5
+      '@poppinss/colors': 4.1.6
+      '@sindresorhus/is': 7.2.0
+      supports-color: 10.2.2
 
-  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
-
-  '@radix-ui/react-dismissable-layer@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
-
-  '@radix-ui/react-dropdown-menu@2.1.12(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-menu': 2.1.12(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+  '@poppinss/exception@1.2.3': {}
 
-  '@radix-ui/react-focus-guards@1.1.2(@types/react@19.2.5)(react@19.2.0)':
+  '@prisma/instrumentation@7.6.0(@opentelemetry/api@1.9.1)':
     dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.5
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/instrumentation': 0.207.0(@opentelemetry/api@1.9.1)
+    transitivePeerDependencies:
+      - supports-color
 
-  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.5)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.5
+  '@radix-ui/primitive@1.1.3': {}
 
-  '@radix-ui/react-focus-scope@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-id@1.1.1(@types/react@19.2.5)(react@19.2.0)':
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-label@2.1.8(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
-
-  '@radix-ui/react-menu@2.1.12(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.0(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      aria-hidden: 1.2.4
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.6.3(@types/react@19.2.5)(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      aria-hidden: 1.2.4
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.6.3(@types/react@19.2.5)(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
-
-  '@radix-ui/react-popper@1.2.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-arrow': 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/rect': 1.1.1
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
-
-  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/rect': 1.1.1
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
-
-  '@radix-ui/react-portal@1.1.6(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-presence@1.1.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-primitive@2.1.0(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.0(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
-
-  '@radix-ui/react-roving-focus@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
-
-  '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
-
-  '@radix-ui/react-slot@1.2.0(@types/react@19.2.5)(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-slot@1.2.3(@types/react@19.2.5)(react@19.2.0)':
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-slot@1.2.4(@types/react@19.2.5)(react@19.2.0)':
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-switch@1.2.6(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-toast@1.2.15(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-toggle-group@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-toggle@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
-
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.5)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.5)(react@19.2.0)':
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.5)(react@19.2.0)':
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.5)(react@19.2.0)':
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.5)(react@19.2.0)':
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      react: 19.2.0
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.5)(react@19.2.0)':
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      react: 19.2.0
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.5)(react@19.2.0)':
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
       '@radix-ui/rect': 1.1.1
-      react: 19.2.0
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.5)(react@19.2.0)':
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.14)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
-      '@types/react-dom': 19.2.3(@types/react@19.2.5)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
   '@radix-ui/rect@1.1.1': {}
 
-  '@react-three/drei@10.7.7(@react-three/fiber@9.5.0(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(three@0.182.0))(@types/react@19.2.5)(@types/three@0.182.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(three@0.182.0)':
+  '@react-three/drei@10.7.7(@react-three/fiber@9.5.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2))(@types/react@19.2.14)(@types/three@0.183.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2)':
     dependencies:
-      '@babel/runtime': 7.28.4
+      '@babel/runtime': 7.29.2
       '@mediapipe/tasks-vision': 0.10.17
-      '@monogrid/gainmap-js': 3.4.0(three@0.182.0)
-      '@react-three/fiber': 9.5.0(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(three@0.182.0)
-      '@use-gesture/react': 10.3.1(react@19.2.0)
-      camera-controls: 3.1.2(three@0.182.0)
+      '@monogrid/gainmap-js': 3.4.0(three@0.183.2)
+      '@react-three/fiber': 9.5.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2)
+      '@use-gesture/react': 10.3.1(react@19.2.3)
+      camera-controls: 3.1.2(three@0.183.2)
       cross-env: 7.0.3
       detect-gpu: 5.0.70
       glsl-noise: 0.0.0
       hls.js: 1.6.15
-      maath: 0.10.8(@types/three@0.182.0)(three@0.182.0)
-      meshline: 3.3.1(three@0.182.0)
-      react: 19.2.0
-      stats-gl: 2.4.2(@types/three@0.182.0)(three@0.182.0)
+      maath: 0.10.8(@types/three@0.183.1)(three@0.183.2)
+      meshline: 3.3.1(three@0.183.2)
+      react: 19.2.3
+      stats-gl: 2.4.2(@types/three@0.183.1)(three@0.183.2)
       stats.js: 0.17.0
-      suspend-react: 0.1.3(react@19.2.0)
-      three: 0.182.0
-      three-mesh-bvh: 0.8.3(three@0.182.0)
-      three-stdlib: 2.36.1(three@0.182.0)
-      troika-three-text: 0.52.4(three@0.182.0)
-      tunnel-rat: 0.1.2(@types/react@19.2.5)(react@19.2.0)
-      use-sync-external-store: 1.6.0(react@19.2.0)
+      suspend-react: 0.1.3(react@19.2.3)
+      three: 0.183.2
+      three-mesh-bvh: 0.8.3(three@0.183.2)
+      three-stdlib: 2.36.1(three@0.183.2)
+      troika-three-text: 0.52.4(three@0.183.2)
+      tunnel-rat: 0.1.2(@types/react@19.2.14)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
+      use-sync-external-store: 1.6.0(react@19.2.3)
       utility-types: 3.11.0
-      zustand: 5.0.9(@types/react@19.2.5)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
+      zustand: 5.0.12(@types/react@19.2.14)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
     optionalDependencies:
-      react-dom: 19.2.0(react@19.2.0)
+      react-dom: 19.2.3(react@19.2.3)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/three'
       - immer
 
-  '@react-three/fiber@9.5.0(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(three@0.182.0)':
+  '@react-three/fiber@9.5.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2)':
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.29.2
       '@types/webxr': 0.5.24
       base64-js: 1.5.1
       buffer: 6.0.3
-      its-fine: 2.0.0(@types/react@19.2.5)(react@19.2.0)
-      react: 19.2.0
-      react-use-measure: 2.1.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      its-fine: 2.0.0(@types/react@19.2.14)(react@19.2.3)
+      react: 19.2.3
+      react-use-measure: 2.1.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       scheduler: 0.27.0
-      suspend-react: 0.1.3(react@19.2.0)
-      three: 0.182.0
-      use-sync-external-store: 1.6.0(react@19.2.0)
-      zustand: 5.0.9(@types/react@19.2.5)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
+      suspend-react: 0.1.3(react@19.2.3)
+      three: 0.183.2
+      use-sync-external-store: 1.6.0(react@19.2.3)
+      zustand: 5.0.12(@types/react@19.2.14)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
     optionalDependencies:
-      react-dom: 19.2.0(react@19.2.0)
+      react-dom: 19.2.3(react@19.2.3)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  '@rolldown/pluginutils@1.0.0-beta.40': {}
+  '@rolldown/binding-android-arm64@1.0.1':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.0.1':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.0.1':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.0.1':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.1':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.1':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.0.1':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.1':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.1':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.0.1':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.0.1':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.0.1':
+    optional: true
 
-  '@rollup/pluginutils@5.3.0(rollup@4.53.3)':
+  '@rolldown/binding-wasm32-wasi@1.0.1':
     dependencies:
-      '@types/estree': 1.0.8
-      estree-walker: 2.0.2
-      picomatch: 4.0.3
-    optionalDependencies:
-      rollup: 4.53.3
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.1':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.0.1':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.0-rc.7': {}
+
+  '@rolldown/pluginutils@1.0.1': {}
 
   '@rollup/rollup-android-arm-eabi@4.53.3':
     optional: true
@@ -11422,73 +9179,72 @@ snapshots:
 
   '@sec-ant/readable-stream@0.4.1': {}
 
-  '@sentry-internal/browser-utils@10.32.1':
+  '@sentry-internal/browser-utils@10.47.0':
     dependencies:
-      '@sentry/core': 10.32.1
+      '@sentry/core': 10.47.0
 
-  '@sentry-internal/feedback@10.32.1':
+  '@sentry-internal/feedback@10.47.0':
     dependencies:
-      '@sentry/core': 10.32.1
+      '@sentry/core': 10.47.0
 
-  '@sentry-internal/replay-canvas@10.32.1':
+  '@sentry-internal/replay-canvas@10.47.0':
     dependencies:
-      '@sentry-internal/replay': 10.32.1
-      '@sentry/core': 10.32.1
+      '@sentry-internal/replay': 10.47.0
+      '@sentry/core': 10.47.0
 
-  '@sentry-internal/replay@10.32.1':
+  '@sentry-internal/replay@10.47.0':
     dependencies:
-      '@sentry-internal/browser-utils': 10.32.1
-      '@sentry/core': 10.32.1
+      '@sentry-internal/browser-utils': 10.47.0
+      '@sentry/core': 10.47.0
 
-  '@sentry/babel-plugin-component-annotate@4.6.1': {}
+  '@sentry/babel-plugin-component-annotate@5.1.1': {}
 
-  '@sentry/browser@10.32.1':
+  '@sentry/browser@10.47.0':
     dependencies:
-      '@sentry-internal/browser-utils': 10.32.1
-      '@sentry-internal/feedback': 10.32.1
-      '@sentry-internal/replay': 10.32.1
-      '@sentry-internal/replay-canvas': 10.32.1
-      '@sentry/core': 10.32.1
+      '@sentry-internal/browser-utils': 10.47.0
+      '@sentry-internal/feedback': 10.47.0
+      '@sentry-internal/replay': 10.47.0
+      '@sentry-internal/replay-canvas': 10.47.0
+      '@sentry/core': 10.47.0
 
-  '@sentry/bundler-plugin-core@4.6.1':
+  '@sentry/bundler-plugin-core@5.1.1':
     dependencies:
-      '@babel/core': 7.28.4
-      '@sentry/babel-plugin-component-annotate': 4.6.1
-      '@sentry/cli': 2.58.4
+      '@babel/core': 7.29.0
+      '@sentry/babel-plugin-component-annotate': 5.1.1
+      '@sentry/cli': 2.58.5
       dotenv: 16.6.1
       find-up: 5.0.0
-      glob: 13.0.0
-      magic-string: 0.30.8
-      unplugin: 1.0.1
+      glob: 13.0.6
+      magic-string: 0.30.21
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sentry/cli-darwin@2.58.4':
+  '@sentry/cli-darwin@2.58.5':
     optional: true
 
-  '@sentry/cli-linux-arm64@2.58.4':
+  '@sentry/cli-linux-arm64@2.58.5':
     optional: true
 
-  '@sentry/cli-linux-arm@2.58.4':
+  '@sentry/cli-linux-arm@2.58.5':
     optional: true
 
-  '@sentry/cli-linux-i686@2.58.4':
+  '@sentry/cli-linux-i686@2.58.5':
     optional: true
 
-  '@sentry/cli-linux-x64@2.58.4':
+  '@sentry/cli-linux-x64@2.58.5':
     optional: true
 
-  '@sentry/cli-win32-arm64@2.58.4':
+  '@sentry/cli-win32-arm64@2.58.5':
     optional: true
 
-  '@sentry/cli-win32-i686@2.58.4':
+  '@sentry/cli-win32-i686@2.58.5':
     optional: true
 
-  '@sentry/cli-win32-x64@2.58.4':
+  '@sentry/cli-win32-x64@2.58.5':
     optional: true
 
-  '@sentry/cli@2.58.4':
+  '@sentry/cli@2.58.5':
     dependencies:
       https-proxy-agent: 5.0.1
       node-fetch: 2.7.0
@@ -11496,715 +9252,764 @@ snapshots:
       proxy-from-env: 1.1.0
       which: 2.0.2
     optionalDependencies:
-      '@sentry/cli-darwin': 2.58.4
-      '@sentry/cli-linux-arm': 2.58.4
-      '@sentry/cli-linux-arm64': 2.58.4
-      '@sentry/cli-linux-i686': 2.58.4
-      '@sentry/cli-linux-x64': 2.58.4
-      '@sentry/cli-win32-arm64': 2.58.4
-      '@sentry/cli-win32-i686': 2.58.4
-      '@sentry/cli-win32-x64': 2.58.4
+      '@sentry/cli-darwin': 2.58.5
+      '@sentry/cli-linux-arm': 2.58.5
+      '@sentry/cli-linux-arm64': 2.58.5
+      '@sentry/cli-linux-i686': 2.58.5
+      '@sentry/cli-linux-x64': 2.58.5
+      '@sentry/cli-win32-arm64': 2.58.5
+      '@sentry/cli-win32-i686': 2.58.5
+      '@sentry/cli-win32-x64': 2.58.5
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sentry/core@10.32.1': {}
-
-  '@sentry/core@10.33.0': {}
+  '@sentry/core@10.47.0': {}
 
-  '@sentry/node-core@10.32.1(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)':
+  '@sentry/node-core@10.47.0(@opentelemetry/api@1.9.1)(@opentelemetry/context-async-hooks@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/core@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/instrumentation@0.214.0(@opentelemetry/api@1.9.1))(@opentelemetry/resources@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)':
     dependencies:
-      '@apm-js-collab/tracing-hooks': 0.3.1
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@sentry/core': 10.32.1
-      '@sentry/opentelemetry': 10.32.1(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
-      import-in-the-middle: 2.0.1
-    transitivePeerDependencies:
+      '@sentry/core': 10.47.0
+      '@sentry/opentelemetry': 10.47.0(@opentelemetry/api@1.9.1)(@opentelemetry/context-async-hooks@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/core@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)
+      import-in-the-middle: 3.0.0
+    optionalDependencies:
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/context-async-hooks': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
+
+  '@sentry/node@10.47.0':
+    dependencies:
+      '@fastify/otel': 0.18.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/context-async-hooks': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-amqplib': 0.61.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-connect': 0.57.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-dataloader': 0.31.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-express': 0.62.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-fs': 0.33.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-generic-pool': 0.57.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-graphql': 0.62.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-hapi': 0.60.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-http': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-ioredis': 0.62.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-kafkajs': 0.23.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-knex': 0.58.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-koa': 0.62.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-lru-memoizer': 0.58.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-mongodb': 0.67.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-mongoose': 0.60.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-mysql': 0.60.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-mysql2': 0.60.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-pg': 0.66.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-redis': 0.62.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-tedious': 0.33.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation-undici': 0.24.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@prisma/instrumentation': 7.6.0(@opentelemetry/api@1.9.1)
+      '@sentry/core': 10.47.0
+      '@sentry/node-core': 10.47.0(@opentelemetry/api@1.9.1)(@opentelemetry/context-async-hooks@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/core@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/instrumentation@0.214.0(@opentelemetry/api@1.9.1))(@opentelemetry/resources@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)
+      '@sentry/opentelemetry': 10.47.0(@opentelemetry/api@1.9.1)(@opentelemetry/context-async-hooks@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/core@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)
+      import-in-the-middle: 3.0.0
+    transitivePeerDependencies:
+      - '@opentelemetry/exporter-trace-otlp-http'
       - supports-color
 
-  '@sentry/node-core@10.33.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)':
-    dependencies:
-      '@apm-js-collab/tracing-hooks': 0.3.1
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@sentry/core': 10.33.0
-      '@sentry/opentelemetry': 10.33.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
-      import-in-the-middle: 2.0.1
+  '@sentry/opentelemetry@10.47.0(@opentelemetry/api@1.9.1)(@opentelemetry/context-async-hooks@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/core@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.6.1(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/context-async-hooks': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.6.1(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@sentry/core': 10.47.0
+
+  '@sentry/react@10.47.0(react@19.2.3)':
+    dependencies:
+      '@sentry/browser': 10.47.0
+      '@sentry/core': 10.47.0
+      react: 19.2.3
+
+  '@sentry/rollup-plugin@5.1.1(rollup@4.53.3)':
+    dependencies:
+      '@sentry/bundler-plugin-core': 5.1.1
+      magic-string: 0.30.21
+      rollup: 4.53.3
     transitivePeerDependencies:
+      - encoding
       - supports-color
 
-  '@sentry/node@10.32.1':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-amqplib': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-connect': 0.52.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-dataloader': 0.26.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-express': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-fs': 0.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-generic-pool': 0.52.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-graphql': 0.56.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-hapi': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-http': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-ioredis': 0.56.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-kafkajs': 0.18.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-knex': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-koa': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-lru-memoizer': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mongodb': 0.61.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mongoose': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mysql': 0.54.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mysql2': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-pg': 0.61.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-redis': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-tedious': 0.27.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-undici': 0.19.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@prisma/instrumentation': 6.19.0(@opentelemetry/api@1.9.0)
-      '@sentry/core': 10.32.1
-      '@sentry/node-core': 10.32.1(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
-      '@sentry/opentelemetry': 10.32.1(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
-      import-in-the-middle: 2.0.1
-      minimatch: 9.0.5
+  '@sentry/tanstackstart-react@10.47.0(react@19.2.3)(rollup@4.53.3)':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/semantic-conventions': 1.40.0
+      '@sentry-internal/browser-utils': 10.47.0
+      '@sentry/core': 10.47.0
+      '@sentry/node': 10.47.0
+      '@sentry/react': 10.47.0(react@19.2.3)
+      '@sentry/vite-plugin': 5.1.1(rollup@4.53.3)
     transitivePeerDependencies:
+      - '@opentelemetry/exporter-trace-otlp-http'
+      - encoding
+      - react
+      - rollup
       - supports-color
 
-  '@sentry/node@10.33.0':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-amqplib': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-connect': 0.52.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-dataloader': 0.26.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-express': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-fs': 0.28.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-generic-pool': 0.52.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-graphql': 0.56.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-hapi': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-http': 0.208.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-ioredis': 0.56.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-kafkajs': 0.18.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-knex': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-koa': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-lru-memoizer': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mongodb': 0.61.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mongoose': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mysql': 0.54.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mysql2': 0.55.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-pg': 0.61.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-redis': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-tedious': 0.27.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-undici': 0.19.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@prisma/instrumentation': 6.19.0(@opentelemetry/api@1.9.0)
-      '@sentry/core': 10.33.0
-      '@sentry/node-core': 10.33.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
-      '@sentry/opentelemetry': 10.33.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
-      import-in-the-middle: 2.0.1
-      minimatch: 9.0.5
+  '@sentry/vite-plugin@5.1.1(rollup@4.53.3)':
+    dependencies:
+      '@sentry/bundler-plugin-core': 5.1.1
+      '@sentry/rollup-plugin': 5.1.1(rollup@4.53.3)
     transitivePeerDependencies:
+      - encoding
+      - rollup
       - supports-color
 
-  '@sentry/opentelemetry@10.32.1(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)':
+  '@shopify/hydrogen-react@2026.4.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2)(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@sentry/core': 10.32.1
+      '@google/model-viewer': 4.2.0(three@0.183.2)
+      '@xstate/fsm': 2.0.0
+      ast-v8-to-istanbul: 0.3.12
+      graphql: 16.13.2
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      type-fest: 4.41.0
+      vite: 8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)
+      worktop: 0.7.3
+    transitivePeerDependencies:
+      - three
 
-  '@sentry/opentelemetry@10.33.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.3.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.3.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@sentry/core': 10.33.0
+  '@sindresorhus/is@7.2.0': {}
 
-  '@sentry/react@10.32.1(react@19.2.0)':
-    dependencies:
-      '@sentry/browser': 10.32.1
-      '@sentry/core': 10.32.1
-      hoist-non-react-statics: 3.3.2
-      react: 19.2.0
+  '@sindresorhus/merge-streams@4.0.0': {}
 
-  '@sentry/tanstackstart-react@10.32.1(react@19.2.0)':
+  '@solid-primitives/event-listener@2.4.5(solid-js@1.9.12)':
     dependencies:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@sentry-internal/browser-utils': 10.32.1
-      '@sentry/core': 10.32.1
-      '@sentry/node': 10.32.1
-      '@sentry/react': 10.32.1(react@19.2.0)
-    transitivePeerDependencies:
-      - react
-      - supports-color
+      '@solid-primitives/utils': 6.4.0(solid-js@1.9.12)
+      solid-js: 1.9.12
 
-  '@sentry/vite-plugin@4.6.1':
+  '@solid-primitives/keyboard@1.3.5(solid-js@1.9.12)':
     dependencies:
-      '@sentry/bundler-plugin-core': 4.6.1
-      unplugin: 1.0.1
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
+      '@solid-primitives/event-listener': 2.4.5(solid-js@1.9.12)
+      '@solid-primitives/rootless': 1.5.3(solid-js@1.9.12)
+      '@solid-primitives/utils': 6.4.0(solid-js@1.9.12)
+      solid-js: 1.9.12
 
-  '@shikijs/core@1.10.3':
+  '@solid-primitives/resize-observer@2.1.5(solid-js@1.9.12)':
     dependencies:
-      '@types/hast': 3.0.4
+      '@solid-primitives/event-listener': 2.4.5(solid-js@1.9.12)
+      '@solid-primitives/rootless': 1.5.3(solid-js@1.9.12)
+      '@solid-primitives/static-store': 0.1.3(solid-js@1.9.12)
+      '@solid-primitives/utils': 6.4.0(solid-js@1.9.12)
+      solid-js: 1.9.12
 
-  '@shikijs/transformers@1.10.3':
+  '@solid-primitives/rootless@1.5.3(solid-js@1.9.12)':
     dependencies:
-      shiki: 1.10.3
+      '@solid-primitives/utils': 6.4.0(solid-js@1.9.12)
+      solid-js: 1.9.12
 
-  '@sindresorhus/merge-streams@4.0.0': {}
+  '@solid-primitives/static-store@0.1.3(solid-js@1.9.12)':
+    dependencies:
+      '@solid-primitives/utils': 6.4.0(solid-js@1.9.12)
+      solid-js: 1.9.12
 
-  '@so-ric/colorspace@1.1.6':
+  '@solid-primitives/utils@6.4.0(solid-js@1.9.12)':
     dependencies:
-      color: 5.0.2
-      text-hex: 1.0.0
+      solid-js: 1.9.12
 
-  '@stablelib/base64@1.0.1': {}
+  '@speed-highlight/core@1.2.17': {}
 
-  '@stackblitz/sdk@1.11.0': {}
+  '@stablelib/base64@1.0.1': {}
 
   '@standard-schema/spec@1.0.0-beta.4': {}
 
   '@standard-schema/spec@1.1.0': {}
 
-  '@tailwindcss/node@4.1.11':
+  '@swc/helpers@0.5.18':
     dependencies:
-      '@ampproject/remapping': 2.3.0
-      enhanced-resolve: 5.18.3
-      jiti: 2.5.1
-      lightningcss: 1.30.1
-      magic-string: 0.30.17
+      tslib: 2.8.1
+
+  '@tailwindcss/node@4.3.0':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.21.5
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
       source-map-js: 1.2.1
-      tailwindcss: 4.1.11
+      tailwindcss: 4.3.0
 
-  '@tailwindcss/oxide-android-arm64@4.1.11':
+  '@tailwindcss/oxide-android-arm64@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.11':
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.1.11':
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.11':
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
     optional: true
 
-  '@tailwindcss/oxide@4.1.11':
-    dependencies:
-      detect-libc: 2.0.4
-      tar: 7.4.3
+  '@tailwindcss/oxide@4.3.0':
     optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.11
-      '@tailwindcss/oxide-darwin-arm64': 4.1.11
-      '@tailwindcss/oxide-darwin-x64': 4.1.11
-      '@tailwindcss/oxide-freebsd-x64': 4.1.11
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.11
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.11
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.11
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.11
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.11
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.11
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.11
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.11
-
-  '@tailwindcss/typography@0.5.13(tailwindcss@4.1.11)':
-    dependencies:
-      lodash.castarray: 4.4.0
-      lodash.isplainobject: 4.0.6
-      lodash.merge: 4.6.2
+      '@tailwindcss/oxide-android-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-x64': 4.3.0
+      '@tailwindcss/oxide-freebsd-x64': 4.3.0
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.0
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.0
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.0
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.0
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.0
+
+  '@tailwindcss/typography@0.5.19(tailwindcss@4.2.2)':
+    dependencies:
       postcss-selector-parser: 6.0.10
-      tailwindcss: 4.1.11
+      tailwindcss: 4.2.2
+
+  '@tailwindcss/vite@4.3.0(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))':
+    dependencies:
+      '@tailwindcss/node': 4.3.0
+      '@tailwindcss/oxide': 4.3.0
+      tailwindcss: 4.3.0
+      vite: 8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)
+
+  '@takumi-rs/core@2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@takumi-rs/helpers': 2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+    transitivePeerDependencies:
+      - react
+      - react-dom
 
-  '@tailwindcss/vite@4.1.11(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))':
+  '@takumi-rs/helpers@2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    optionalDependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
+  '@takumi-rs/image-response@2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      takumi-js: 2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+    transitivePeerDependencies:
+      - react
+      - react-dom
+
+  '@takumi-rs/wasm@2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@takumi-rs/helpers': 2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+    transitivePeerDependencies:
+      - react
+      - react-dom
+
+  '@tanstack/ai-anthropic@0.10.1(@tanstack/ai@0.20.1(@opentelemetry/api@1.9.1))(zod@4.3.6)':
+    dependencies:
+      '@anthropic-ai/sdk': 0.71.2(zod@4.3.6)
+      '@tanstack/ai': 0.20.1(@opentelemetry/api@1.9.1)
+      '@tanstack/ai-utils': 0.2.0
+      zod: 4.3.6
+
+  '@tanstack/ai-client@0.11.3(@opentelemetry/api@1.9.1)':
+    dependencies:
+      '@tanstack/ai': 0.20.1(@opentelemetry/api@1.9.1)
+      '@tanstack/ai-event-client': 0.3.6(@tanstack/ai@0.20.1(@opentelemetry/api@1.9.1))
+    transitivePeerDependencies:
+      - '@opentelemetry/api'
+
+  '@tanstack/ai-event-client@0.3.6(@tanstack/ai@0.20.1(@opentelemetry/api@1.9.1))':
+    dependencies:
+      '@tanstack/ai': 0.20.1(@opentelemetry/api@1.9.1)
+      '@tanstack/devtools-event-client': 0.4.3
+
+  '@tanstack/ai-openai@0.9.5(@tanstack/ai-client@0.11.3(@opentelemetry/api@1.9.1))(@tanstack/ai@0.20.1(@opentelemetry/api@1.9.1))(ws@8.21.0)(zod@4.3.6)':
+    dependencies:
+      '@tanstack/ai': 0.20.1(@opentelemetry/api@1.9.1)
+      '@tanstack/ai-client': 0.11.3(@opentelemetry/api@1.9.1)
+      '@tanstack/ai-utils': 0.2.0
+      '@tanstack/openai-base': 0.3.4(@tanstack/ai@0.20.1(@opentelemetry/api@1.9.1))(ws@8.21.0)(zod@4.3.6)
+      openai: 6.33.0(ws@8.21.0)(zod@4.3.6)
+      zod: 4.3.6
+    transitivePeerDependencies:
+      - ws
+
+  '@tanstack/ai-utils@0.2.0': {}
+
+  '@tanstack/ai@0.20.1(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@tailwindcss/node': 4.1.11
-      '@tailwindcss/oxide': 4.1.11
-      tailwindcss: 4.1.11
-      vite: 7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)
+      '@ag-ui/core': 0.0.52
+      '@tanstack/ai-event-client': 0.3.6(@tanstack/ai@0.20.1(@opentelemetry/api@1.9.1))
+      partial-json: 0.1.7
+    optionalDependencies:
+      '@opentelemetry/api': 1.9.1
 
-  '@tanstack/cta-engine@0.47.0':
+  '@tanstack/create@0.68.4(tslib@2.8.1)':
     dependencies:
       ejs: 3.1.10
       execa: 9.6.1
       ignore: 7.0.5
-      memfs: 4.51.1
+      memfs: 4.57.1(tslib@2.8.1)
       parse-gitignore: 2.0.0
-      prettier: 3.7.4
-      rimraf: 6.1.2
+      prettier: 3.8.1
+      rimraf: 6.1.3
       zod: 3.25.76
+    transitivePeerDependencies:
+      - tslib
 
-  '@tanstack/cta-framework-react-cra@0.47.0':
-    dependencies:
-      '@tanstack/cta-engine': 0.47.0
-
-  '@tanstack/cta-ui-base@0.47.0(@babel/runtime@7.28.4)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.6.0)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.11)(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(codemirror@6.0.2)(use-sync-external-store@1.6.0(react@19.2.0))':
-    dependencies:
-      '@codemirror/lang-css': 6.3.1
-      '@codemirror/lang-html': 6.4.11
-      '@codemirror/lang-javascript': 6.2.4
-      '@codemirror/lang-json': 6.0.2
-      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-dropdown-menu': 2.1.12(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-label': 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-popover': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-separator': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-switch': 1.2.6(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/cta-engine': 0.47.0
-      '@tanstack/react-query': 5.90.12(react@19.2.0)
-      '@uiw/codemirror-theme-github': 4.25.4(@codemirror/language@6.12.1)(@codemirror/state@6.5.4)(@codemirror/view@6.39.11)
-      '@uiw/react-codemirror': 4.25.4(@babel/runtime@7.28.4)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.6.0)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.11)(codemirror@6.0.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@webcontainer/api': 1.6.1
-      chalk: 5.6.2
-      class-variance-authority: 0.7.1
+  '@tanstack/devtools-client@0.0.6':
+    dependencies:
+      '@tanstack/devtools-event-client': 0.4.3
+
+  '@tanstack/devtools-event-bus@0.4.1':
+    dependencies:
+      ws: 8.20.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@tanstack/devtools-event-client@0.4.3': {}
+
+  '@tanstack/devtools-ui@0.5.2(csstype@3.2.3)(solid-js@1.9.12)':
+    dependencies:
       clsx: 2.1.1
-      embla-carousel-react: 8.6.0(react@19.2.0)
-      lucide-react: 0.554.0(react@19.2.0)
-      next-themes: 0.4.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-codemirror-merge: 4.25.4(@babel/runtime@7.28.4)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.6.0)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.11)(codemirror@6.0.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react-dom: 19.2.0(react@19.2.0)
-      sonner: 2.0.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      tailwind-merge: 3.4.0
-      zustand: 5.0.9(@types/react@19.2.5)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
+      dayjs: 1.11.20
+      goober: 2.1.18(csstype@3.2.3)
+      solid-js: 1.9.12
     transitivePeerDependencies:
-      - '@babel/runtime'
-      - '@codemirror/autocomplete'
-      - '@codemirror/language'
-      - '@codemirror/lint'
-      - '@codemirror/search'
-      - '@codemirror/state'
-      - '@codemirror/theme-one-dark'
-      - '@codemirror/view'
-      - '@types/react'
-      - '@types/react-dom'
-      - codemirror
-      - immer
-      - use-sync-external-store
+      - csstype
 
-  '@tanstack/cta-ui@0.47.0(@babel/runtime@7.28.4)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.6.0)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.11)(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(codemirror@6.0.2)(typescript@5.9.2)(use-sync-external-store@1.6.0(react@19.2.0))(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))':
+  '@tanstack/devtools-vite@0.7.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))':
     dependencies:
-      '@tailwindcss/vite': 4.1.11(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
-      '@tanstack/cta-engine': 0.47.0
-      '@tanstack/cta-ui-base': 0.47.0(@babel/runtime@7.28.4)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.6.0)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.11)(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(codemirror@6.0.2)(use-sync-external-store@1.6.0(react@19.2.0))
+      '@tanstack/devtools-client': 0.0.6
+      '@tanstack/devtools-event-bus': 0.4.1
       chalk: 5.6.2
-      cors: 2.8.5
-      execa: 9.6.1
-      express: 4.22.1
-      next-themes: 0.4.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      sonner: 2.0.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      tailwind-merge: 3.4.0
-      tailwindcss: 4.1.11
-      tailwindcss-animate: 1.0.7(tailwindcss@4.1.11)
-      vite-tsconfig-paths: 5.1.4(typescript@5.9.2)(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
+      launch-editor: 2.13.2
+      magic-string: 0.30.21
+      oxc-parser: 0.120.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      picomatch: 4.0.4
+      vite: 8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)
     transitivePeerDependencies:
-      - '@babel/runtime'
-      - '@codemirror/autocomplete'
-      - '@codemirror/language'
-      - '@codemirror/lint'
-      - '@codemirror/search'
-      - '@codemirror/state'
-      - '@codemirror/theme-one-dark'
-      - '@codemirror/view'
-      - '@types/react'
-      - '@types/react-dom'
-      - codemirror
-      - immer
-      - supports-color
-      - typescript
-      - use-sync-external-store
-      - vite
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - bufferutil
+      - utf-8-validate
+
+  '@tanstack/devtools@0.12.2(csstype@3.2.3)(solid-js@1.9.12)':
+    dependencies:
+      '@solid-primitives/event-listener': 2.4.5(solid-js@1.9.12)
+      '@solid-primitives/keyboard': 1.3.5(solid-js@1.9.12)
+      '@solid-primitives/resize-observer': 2.1.5(solid-js@1.9.12)
+      '@tanstack/devtools-client': 0.0.6
+      '@tanstack/devtools-event-bus': 0.4.1
+      '@tanstack/devtools-ui': 0.5.2(csstype@3.2.3)(solid-js@1.9.12)
+      clsx: 2.1.1
+      goober: 2.1.18(csstype@3.2.3)
+      solid-js: 1.9.12
+    transitivePeerDependencies:
+      - bufferutil
+      - csstype
+      - utf-8-validate
+
+  '@tanstack/highlight@0.0.3': {}
 
-  '@tanstack/devtools-event-client@0.3.5': {}
+  '@tanstack/history@1.162.0': {}
 
-  '@tanstack/directive-functions-plugin@1.141.0(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))':
+  '@tanstack/hotkeys@0.8.0':
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/core': 7.28.4
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.5
-      '@tanstack/router-utils': 1.141.0
-      babel-dead-code-elimination: 1.0.10
-      pathe: 2.0.3
-      tiny-invariant: 1.3.3
-      vite: 7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)
+      '@tanstack/store': 0.11.0
+
+  '@tanstack/markdown@0.0.9(react@19.2.3)':
+    optionalDependencies:
+      react: 19.2.3
+
+  '@tanstack/openai-base@0.3.4(@tanstack/ai@0.20.1(@opentelemetry/api@1.9.1))(ws@8.21.0)(zod@4.3.6)':
+    dependencies:
+      '@tanstack/ai': 0.20.1(@opentelemetry/api@1.9.1)
+      '@tanstack/ai-utils': 0.2.0
+      openai: 6.33.0(ws@8.21.0)(zod@4.3.6)
     transitivePeerDependencies:
-      - supports-color
+      - ws
+      - zod
+
+  '@tanstack/pacer@0.21.1':
+    dependencies:
+      '@tanstack/devtools-event-client': 0.4.3
+      '@tanstack/store': 0.11.0
+
+  '@tanstack/query-core@5.100.11': {}
 
-  '@tanstack/history@1.141.0': {}
+  '@tanstack/query-devtools@5.100.11': {}
+
+  '@tanstack/react-devtools@0.10.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(csstype@3.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.12)':
+    dependencies:
+      '@tanstack/devtools': 0.12.2(csstype@3.2.3)(solid-js@1.9.12)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    transitivePeerDependencies:
+      - bufferutil
+      - csstype
+      - solid-js
+      - utf-8-validate
 
-  '@tanstack/pacer@0.16.4':
+  '@tanstack/react-hotkeys@0.10.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@tanstack/devtools-event-client': 0.3.5
-      '@tanstack/store': 0.8.0
+      '@tanstack/hotkeys': 0.8.0
+      '@tanstack/react-store': 0.11.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  '@tanstack/query-core@5.90.12': {}
+  '@tanstack/react-pacer@0.22.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@tanstack/pacer': 0.21.1
+      '@tanstack/react-store': 0.11.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  '@tanstack/react-pacer@0.17.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@tanstack/react-query-devtools@5.100.11(@tanstack/react-query@5.100.11(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@tanstack/pacer': 0.16.4
-      '@tanstack/react-store': 0.8.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@tanstack/query-devtools': 5.100.11
+      '@tanstack/react-query': 5.100.11(react@19.2.3)
+      react: 19.2.3
 
-  '@tanstack/react-query@5.90.12(react@19.2.0)':
+  '@tanstack/react-query@5.100.11(react@19.2.3)':
     dependencies:
-      '@tanstack/query-core': 5.90.12
-      react: 19.2.0
+      '@tanstack/query-core': 5.100.11
+      react: 19.2.3
 
-  '@tanstack/react-router-devtools@1.141.6(@tanstack/react-router@1.141.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@tanstack/router-core@1.141.8)(csstype@3.1.3)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(solid-js@1.9.9)':
+  '@tanstack/react-router-devtools@1.167.0(@tanstack/react-router@1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.171.13)(csstype@3.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@tanstack/react-router': 1.141.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/router-devtools-core': 1.141.6(@tanstack/router-core@1.141.8)(csstype@3.1.3)(solid-js@1.9.9)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@tanstack/react-router': 1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/router-devtools-core': 1.168.0(@tanstack/router-core@1.171.13)(csstype@3.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@tanstack/router-core': 1.141.8
+      '@tanstack/router-core': 1.171.13
     transitivePeerDependencies:
       - csstype
-      - solid-js
 
-  '@tanstack/react-router-ssr-query@1.141.6(@tanstack/query-core@5.90.12)(@tanstack/react-query@5.90.12(react@19.2.0))(@tanstack/react-router@1.141.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@tanstack/router-core@1.141.8)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@tanstack/react-router-ssr-query@1.167.1(@tanstack/query-core@5.100.11)(@tanstack/react-query@5.100.11(react@19.2.3))(@tanstack/react-router@1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(@tanstack/router-core@1.171.13)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@tanstack/query-core': 5.90.12
-      '@tanstack/react-query': 5.90.12(react@19.2.0)
-      '@tanstack/react-router': 1.141.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/router-ssr-query-core': 1.141.6(@tanstack/query-core@5.90.12)(@tanstack/router-core@1.141.8)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@tanstack/query-core': 5.100.11
+      '@tanstack/react-query': 5.100.11(react@19.2.3)
+      '@tanstack/react-router': 1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/router-ssr-query-core': 1.169.1(@tanstack/query-core@5.100.11)(@tanstack/router-core@1.171.13)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     transitivePeerDependencies:
       - '@tanstack/router-core'
 
-  '@tanstack/react-router@1.141.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@tanstack/history': 1.141.0
-      '@tanstack/react-store': 0.8.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/router-core': 1.141.6
-      isbot: 5.1.31
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      tiny-invariant: 1.3.3
-      tiny-warning: 1.0.3
-
-  '@tanstack/react-router@1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@tanstack/history': 1.141.0
-      '@tanstack/react-store': 0.8.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/router-core': 1.141.8
-      isbot: 5.1.31
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      tiny-invariant: 1.3.3
-      tiny-warning: 1.0.3
-
-  '@tanstack/react-start-client@1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@tanstack/react-router': 1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/router-core': 1.141.8
-      '@tanstack/start-client-core': 1.141.8
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      tiny-invariant: 1.3.3
-      tiny-warning: 1.0.3
-
-  '@tanstack/react-start-server@1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@tanstack/history': 1.141.0
-      '@tanstack/react-router': 1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/router-core': 1.141.8
-      '@tanstack/start-client-core': 1.141.8
-      '@tanstack/start-server-core': 1.141.8
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+  '@tanstack/react-router@1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@tanstack/history': 1.162.0
+      '@tanstack/react-store': 0.9.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/router-core': 1.171.13
+      isbot: 5.1.37
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
+  '@tanstack/react-start-client@1.168.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@tanstack/react-router': 1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/router-core': 1.171.13
+      '@tanstack/start-client-core': 1.170.12
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
+  '@tanstack/react-start-rsc@0.1.25(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))':
+    dependencies:
+      '@tanstack/react-router': 1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/router-core': 1.171.13
+      '@tanstack/router-utils': 1.162.2
+      '@tanstack/start-client-core': 1.170.12
+      '@tanstack/start-fn-stubs': 1.162.0
+      '@tanstack/start-plugin-core': 1.171.18(@tanstack/react-router@1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
+      '@tanstack/start-server-core': 1.169.15
+      '@tanstack/start-storage-context': 1.167.15
+      pathe: 2.0.3
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    transitivePeerDependencies:
+      - '@rsbuild/core'
+      - crossws
+      - supports-color
+      - vite
+      - vite-plugin-solid
+      - webpack
+
+  '@tanstack/react-start-server@1.167.20(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@tanstack/react-router': 1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/router-core': 1.171.13
+      '@tanstack/start-server-core': 1.169.15
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     transitivePeerDependencies:
       - crossws
 
-  '@tanstack/react-start@1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))':
+  '@tanstack/react-start@1.168.26(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))':
     dependencies:
-      '@tanstack/react-router': 1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/react-start-client': 1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/react-start-server': 1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/router-utils': 1.141.0
-      '@tanstack/start-client-core': 1.141.8
-      '@tanstack/start-plugin-core': 1.141.8(@tanstack/react-router@1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
-      '@tanstack/start-server-core': 1.141.8
+      '@tanstack/react-router': 1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/react-start-client': 1.168.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/react-start-rsc': 0.1.25(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
+      '@tanstack/react-start-server': 1.167.20(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tanstack/router-utils': 1.162.2
+      '@tanstack/start-client-core': 1.170.12
+      '@tanstack/start-plugin-core': 1.171.18(@tanstack/react-router@1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
+      '@tanstack/start-server-core': 1.169.15
       pathe: 2.0.3
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      vite: 7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      vite: 8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)
     transitivePeerDependencies:
-      - '@rsbuild/core'
+      - '@rspack/core'
       - crossws
+      - react-server-dom-rspack
       - supports-color
       - vite-plugin-solid
       - webpack
 
-  '@tanstack/react-store@0.8.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@tanstack/react-store@0.11.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@tanstack/store': 0.8.0
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      use-sync-external-store: 1.6.0(react@19.2.0)
+      '@tanstack/store': 0.11.0
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      use-sync-external-store: 1.6.0(react@19.2.3)
 
-  '@tanstack/react-table@8.21.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@tanstack/react-store@0.9.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@tanstack/table-core': 8.21.3
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@tanstack/store': 0.9.3
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      use-sync-external-store: 1.6.0(react@19.2.3)
 
-  '@tanstack/router-core@1.141.6':
+  '@tanstack/react-table@8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@tanstack/history': 1.141.0
-      '@tanstack/store': 0.8.0
-      cookie-es: 2.0.0
-      seroval: 1.4.0
-      seroval-plugins: 1.4.0(seroval@1.4.0)
-      tiny-invariant: 1.3.3
-      tiny-warning: 1.0.3
+      '@tanstack/table-core': 8.21.3
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
+  '@tanstack/redact@0.0.18(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))':
+    optionalDependencies:
+      vite: 8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)
 
-  '@tanstack/router-core@1.141.8':
+  '@tanstack/router-core@1.171.13':
     dependencies:
-      '@tanstack/history': 1.141.0
-      '@tanstack/store': 0.8.0
-      cookie-es: 2.0.0
-      seroval: 1.4.1
-      seroval-plugins: 1.4.0(seroval@1.4.1)
-      tiny-invariant: 1.3.3
-      tiny-warning: 1.0.3
+      '@tanstack/history': 1.162.0
+      cookie-es: 3.1.1
+      seroval: 1.5.4
+      seroval-plugins: 1.5.4(seroval@1.5.4)
 
-  '@tanstack/router-devtools-core@1.141.6(@tanstack/router-core@1.141.8)(csstype@3.1.3)(solid-js@1.9.9)':
+  '@tanstack/router-devtools-core@1.168.0(@tanstack/router-core@1.171.13)(csstype@3.2.3)':
     dependencies:
-      '@tanstack/router-core': 1.141.8
+      '@tanstack/router-core': 1.171.13
       clsx: 2.1.1
-      goober: 2.1.16(csstype@3.1.3)
-      solid-js: 1.9.9
-      tiny-invariant: 1.3.3
+      goober: 2.1.18(csstype@3.2.3)
     optionalDependencies:
-      csstype: 3.1.3
+      csstype: 3.2.3
 
-  '@tanstack/router-generator@1.141.8':
+  '@tanstack/router-generator@1.167.17':
     dependencies:
-      '@tanstack/router-core': 1.141.8
-      '@tanstack/router-utils': 1.141.0
-      '@tanstack/virtual-file-routes': 1.141.0
-      prettier: 3.7.4
-      recast: 0.23.11
-      source-map: 0.7.6
-      tsx: 4.21.0
-      zod: 3.25.76
+      '@babel/types': 7.29.0
+      '@tanstack/router-core': 1.171.13
+      '@tanstack/router-utils': 1.162.2
+      '@tanstack/virtual-file-routes': 1.162.0
+      jiti: 2.7.0
+      magic-string: 0.30.21
+      prettier: 3.8.1
+      zod: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
-  '@tanstack/router-plugin@1.141.8(@tanstack/react-router@1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))':
-    dependencies:
-      '@babel/core': 7.28.4
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.5
-      '@tanstack/router-core': 1.141.8
-      '@tanstack/router-generator': 1.141.8
-      '@tanstack/router-utils': 1.141.0
-      '@tanstack/virtual-file-routes': 1.141.0
-      babel-dead-code-elimination: 1.0.10
-      chokidar: 3.6.0
-      unplugin: 2.3.10
-      zod: 3.25.76
+  '@tanstack/router-plugin@1.168.18(@tanstack/react-router@1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+      '@tanstack/router-core': 1.171.13
+      '@tanstack/router-generator': 1.167.17
+      '@tanstack/router-utils': 1.162.2
+      chokidar: 5.0.0
+      unplugin: 3.0.0
+      zod: 4.4.3
     optionalDependencies:
-      '@tanstack/react-router': 1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      vite: 7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)
+      '@tanstack/react-router': 1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      vite: 8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@tanstack/router-ssr-query-core@1.141.6(@tanstack/query-core@5.90.12)(@tanstack/router-core@1.141.8)':
+  '@tanstack/router-ssr-query-core@1.169.1(@tanstack/query-core@5.100.11)(@tanstack/router-core@1.171.13)':
     dependencies:
-      '@tanstack/query-core': 5.90.12
-      '@tanstack/router-core': 1.141.8
+      '@tanstack/query-core': 5.100.11
+      '@tanstack/router-core': 1.171.13
 
-  '@tanstack/router-utils@1.141.0':
+  '@tanstack/router-utils@1.162.2':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/generator': 7.28.3
-      '@babel/parser': 7.28.4
-      '@babel/preset-typescript': 7.27.1(@babel/core@7.28.4)
-      ansis: 4.1.0
-      diff: 8.0.2
+      '@babel/generator': 7.29.1
+      '@babel/parser': 7.29.2
+      '@babel/types': 7.29.0
+      ansis: 4.2.0
+      babel-dead-code-elimination: 1.0.12
+      diff: 8.0.4
       pathe: 2.0.3
-      tinyglobby: 0.2.15
+      tinyglobby: 0.2.16
     transitivePeerDependencies:
       - supports-color
 
-  '@tanstack/server-functions-plugin@1.141.3(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))':
+  '@tanstack/start-client-core@1.170.12':
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/core': 7.28.4
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.5
-      '@tanstack/directive-functions-plugin': 1.141.0(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
-      babel-dead-code-elimination: 1.0.10
-      tiny-invariant: 1.3.3
-    transitivePeerDependencies:
-      - supports-color
-      - vite
+      '@tanstack/router-core': 1.171.13
+      '@tanstack/start-fn-stubs': 1.162.0
+      '@tanstack/start-storage-context': 1.167.15
+      seroval: 1.5.4
 
-  '@tanstack/start-client-core@1.141.8':
-    dependencies:
-      '@tanstack/router-core': 1.141.8
-      '@tanstack/start-storage-context': 1.141.8
-      seroval: 1.4.1
-      tiny-invariant: 1.3.3
-      tiny-warning: 1.0.3
-
-  '@tanstack/start-plugin-core@1.141.8(@tanstack/react-router@1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))':
-    dependencies:
-      '@babel/code-frame': 7.26.2
-      '@babel/core': 7.28.4
-      '@babel/types': 7.28.5
-      '@rolldown/pluginutils': 1.0.0-beta.40
-      '@tanstack/router-core': 1.141.8
-      '@tanstack/router-generator': 1.141.8
-      '@tanstack/router-plugin': 1.141.8(@tanstack/react-router@1.141.8(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
-      '@tanstack/router-utils': 1.141.0
-      '@tanstack/server-functions-plugin': 1.141.3(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
-      '@tanstack/start-client-core': 1.141.8
-      '@tanstack/start-server-core': 1.141.8
-      babel-dead-code-elimination: 1.0.10
-      cheerio: 1.1.2
-      exsolve: 1.0.7
+  '@tanstack/start-fn-stubs@1.162.0': {}
+
+  '@tanstack/start-plugin-core@1.171.18(@tanstack/react-router@1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/core': 7.29.0
+      '@babel/types': 7.29.0
+      '@tanstack/router-core': 1.171.13
+      '@tanstack/router-generator': 1.167.17
+      '@tanstack/router-plugin': 1.168.18(@tanstack/react-router@1.170.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
+      '@tanstack/router-utils': 1.162.2
+      '@tanstack/start-server-core': 1.169.15
+      exsolve: 1.0.8
+      lightningcss: 1.32.0
       pathe: 2.0.3
-      srvx: 0.9.8
-      tinyglobby: 0.2.15
-      ufo: 1.6.1
-      vite: 7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)
-      vitefu: 1.1.1(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))
-      xmlbuilder2: 4.0.1
-      zod: 3.25.76
+      picomatch: 4.0.4
+      seroval: 1.5.4
+      source-map: 0.7.6
+      srvx: 0.11.16
+      tinyglobby: 0.2.16
+      ufo: 1.6.3
+      vitefu: 1.1.3(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))
+      xmlbuilder2: 4.0.3
+      zod: 4.4.3
+    optionalDependencies:
+      vite: 8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)
     transitivePeerDependencies:
-      - '@rsbuild/core'
       - '@tanstack/react-router'
       - crossws
       - supports-color
       - vite-plugin-solid
       - webpack
 
-  '@tanstack/start-server-core@1.141.8':
+  '@tanstack/start-server-core@1.169.15':
     dependencies:
-      '@tanstack/history': 1.141.0
-      '@tanstack/router-core': 1.141.8
-      '@tanstack/start-client-core': 1.141.8
-      '@tanstack/start-storage-context': 1.141.8
-      h3-v2: h3@2.0.0-beta.5
-      seroval: 1.4.1
-      tiny-invariant: 1.3.3
+      '@tanstack/history': 1.162.0
+      '@tanstack/router-core': 1.171.13
+      '@tanstack/start-client-core': 1.170.12
+      '@tanstack/start-storage-context': 1.167.15
+      fetchdts: 0.1.7
+      h3-v2: h3@2.0.1-rc.20
+      seroval: 1.5.4
     transitivePeerDependencies:
       - crossws
 
-  '@tanstack/start-storage-context@1.141.8':
+  '@tanstack/start-storage-context@1.167.15':
     dependencies:
-      '@tanstack/router-core': 1.141.8
+      '@tanstack/router-core': 1.171.13
 
-  '@tanstack/store@0.8.0': {}
+  '@tanstack/store@0.11.0': {}
 
-  '@tanstack/table-core@8.21.3': {}
+  '@tanstack/store@0.9.3': {}
 
-  '@tanstack/virtual-file-routes@1.141.0': {}
+  '@tanstack/table-core@8.21.3': {}
 
-  '@tweenjs/tween.js@23.1.3': {}
+  '@tanstack/virtual-file-routes@1.162.0': {}
 
-  '@types/babel__core@7.20.5':
+  '@tanstack/workflow-core@0.0.4(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.5
-      '@types/babel__generator': 7.6.8
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.20.6
+      '@opentelemetry/api': 1.9.1
+      '@standard-schema/spec': 1.1.0
 
-  '@types/babel__generator@7.6.8':
+  '@tanstack/workflow-runtime@0.0.3(@opentelemetry/api@1.9.1)':
     dependencies:
-      '@babel/types': 7.28.5
+      '@opentelemetry/api': 1.9.1
+      '@tanstack/workflow-core': 0.0.4(@opentelemetry/api@1.9.1)
 
-  '@types/babel__template@7.4.4':
+  '@tanstack/workflow-store-drizzle-postgres@0.0.5(@opentelemetry/api@1.9.1)(@types/pg@8.20.0)(postgres@3.4.8)':
     dependencies:
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.5
+      '@tanstack/workflow-core': 0.0.4(@opentelemetry/api@1.9.1)
+      '@tanstack/workflow-runtime': 0.0.3(@opentelemetry/api@1.9.1)
+      drizzle-orm: 0.45.2(@opentelemetry/api@1.9.1)(@types/pg@8.20.0)(postgres@3.4.8)
+    transitivePeerDependencies:
+      - '@aws-sdk/client-rds-data'
+      - '@cloudflare/workers-types'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@libsql/client-wasm'
+      - '@neondatabase/serverless'
+      - '@op-engineering/op-sqlite'
+      - '@opentelemetry/api'
+      - '@planetscale/database'
+      - '@prisma/client'
+      - '@tidbcloud/serverless'
+      - '@types/better-sqlite3'
+      - '@types/pg'
+      - '@types/sql.js'
+      - '@upstash/redis'
+      - '@vercel/postgres'
+      - '@xata.io/client'
+      - better-sqlite3
+      - bun-types
+      - expo-sqlite
+      - gel
+      - knex
+      - kysely
+      - mysql2
+      - pg
+      - postgres
+      - prisma
+      - sql.js
+      - sqlite3
 
-  '@types/babel__traverse@7.20.6':
-    dependencies:
-      '@babel/types': 7.28.5
+  '@tweenjs/tween.js@23.1.3': {}
 
-  '@types/body-parser@1.19.6':
+  '@tybys/wasm-util@0.10.1':
     dependencies:
-      '@types/connect': 3.4.38
-      '@types/node': 24.3.0
+      tslib: 2.8.1
+    optional: true
 
   '@types/connect@3.4.38':
     dependencies:
-      '@types/node': 24.3.0
-
-  '@types/cookie@0.6.0': {}
+      '@types/node': 25.5.0
 
-  '@types/d3-array@3.2.1': {}
+  '@types/d3-array@3.2.2': {}
 
   '@types/d3-axis@3.0.6':
     dependencies:
@@ -12220,12 +10025,12 @@ snapshots:
 
   '@types/d3-contour@3.0.6':
     dependencies:
-      '@types/d3-array': 3.2.1
+      '@types/d3-array': 3.2.2
       '@types/geojson': 7946.0.16
 
   '@types/d3-delaunay@6.0.4': {}
 
-  '@types/d3-dispatch@3.0.6': {}
+  '@types/d3-dispatch@3.0.7': {}
 
   '@types/d3-drag@3.0.7':
     dependencies:
@@ -12247,7 +10052,9 @@ snapshots:
     dependencies:
       '@types/geojson': 7946.0.16
 
-  '@types/d3-hierarchy@1.1.10': {}
+  '@types/d3-hierarchy@1.1.11': {}
+
+  '@types/d3-hierarchy@3.1.7': {}
 
   '@types/d3-interpolate@3.0.4':
     dependencies:
@@ -12269,7 +10076,7 @@ snapshots:
 
   '@types/d3-selection@3.0.11': {}
 
-  '@types/d3-shape@3.1.7':
+  '@types/d3-shape@3.1.8':
     dependencies:
       '@types/d3-path': 3.1.1
 
@@ -12290,14 +10097,14 @@ snapshots:
 
   '@types/d3@7.4.3':
     dependencies:
-      '@types/d3-array': 3.2.1
+      '@types/d3-array': 3.2.2
       '@types/d3-axis': 3.0.6
       '@types/d3-brush': 3.0.6
       '@types/d3-chord': 3.0.6
       '@types/d3-color': 3.1.3
       '@types/d3-contour': 3.0.6
       '@types/d3-delaunay': 6.0.4
-      '@types/d3-dispatch': 3.0.6
+      '@types/d3-dispatch': 3.0.7
       '@types/d3-drag': 3.0.7
       '@types/d3-dsv': 3.0.7
       '@types/d3-ease': 3.0.2
@@ -12305,7 +10112,7 @@ snapshots:
       '@types/d3-force': 3.0.10
       '@types/d3-format': 3.0.4
       '@types/d3-geo': 3.1.0
-      '@types/d3-hierarchy': 1.1.10
+      '@types/d3-hierarchy': 3.1.7
       '@types/d3-interpolate': 3.0.4
       '@types/d3-path': 3.1.1
       '@types/d3-polygon': 3.0.2
@@ -12314,14 +10121,14 @@ snapshots:
       '@types/d3-scale': 4.0.9
       '@types/d3-scale-chromatic': 3.1.0
       '@types/d3-selection': 3.0.11
-      '@types/d3-shape': 3.1.7
+      '@types/d3-shape': 3.1.8
       '@types/d3-time': 3.0.4
       '@types/d3-time-format': 4.0.3
       '@types/d3-timer': 3.0.2
       '@types/d3-transition': 3.0.9
       '@types/d3-zoom': 3.0.8
 
-  '@types/debug@4.1.12':
+  '@types/debug@4.1.13':
     dependencies:
       '@types/ms': 2.1.0
 
@@ -12329,20 +10136,11 @@ snapshots:
 
   '@types/draco3d@1.4.10': {}
 
-  '@types/estree@1.0.8': {}
-
-  '@types/express-serve-static-core@5.1.1':
+  '@types/estree-jsx@1.0.5':
     dependencies:
-      '@types/node': 24.3.0
-      '@types/qs': 6.9.18
-      '@types/range-parser': 1.2.7
-      '@types/send': 1.2.1
+      '@types/estree': 1.0.8
 
-  '@types/express@5.0.6':
-    dependencies:
-      '@types/body-parser': 1.19.6
-      '@types/express-serve-static-core': 5.1.1
-      '@types/serve-static': 2.2.0
+  '@types/estree@1.0.8': {}
 
   '@types/geojson@7946.0.16': {}
 
@@ -12354,255 +10152,92 @@ snapshots:
 
   '@types/hogan.js@3.0.5': {}
 
-  '@types/http-errors@2.0.5': {}
-
-  '@types/json-schema@7.0.15': {}
-
-  '@types/lodash@4.14.200': {}
-
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
 
   '@types/ms@2.1.0': {}
 
-  '@types/mysql@2.15.27':
-    dependencies:
-      '@types/node': 24.3.0
-
-  '@types/node@22.19.3':
+  '@types/mysql@2.15.27':
     dependencies:
-      undici-types: 6.21.0
+      '@types/node': 25.5.0
 
-  '@types/node@24.3.0':
+  '@types/node@25.5.0':
     dependencies:
-      undici-types: 7.10.0
-
-  '@types/normalize-package-data@2.4.4': {}
+      undici-types: 7.18.2
 
   '@types/offscreencanvas@2019.7.3': {}
 
-  '@types/parse-json@4.0.2':
-    optional: true
-
-  '@types/pg-pool@2.0.6':
+  '@types/pg-pool@2.0.7':
     dependencies:
-      '@types/pg': 8.15.6
-
-  '@types/pg@8.11.6':
-    dependencies:
-      '@types/node': 24.3.0
-      pg-protocol: 1.10.3
-      pg-types: 4.1.0
+      '@types/pg': 8.20.0
 
   '@types/pg@8.15.6':
     dependencies:
-      '@types/node': 24.3.0
-      pg-protocol: 1.10.3
+      '@types/node': 25.5.0
+      pg-protocol: 1.13.0
       pg-types: 2.2.0
 
-  '@types/qs@6.9.18': {}
+  '@types/pg@8.20.0':
+    dependencies:
+      '@types/node': 25.5.0
+      pg-protocol: 1.13.0
+      pg-types: 2.2.0
 
-  '@types/range-parser@1.2.7': {}
+  '@types/qs@6.15.0': {}
 
-  '@types/react-dom@19.2.3(@types/react@19.2.5)':
+  '@types/react-dom@19.2.3(@types/react@19.2.14)':
     dependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  '@types/react-reconciler@0.28.9(@types/react@19.2.5)':
+  '@types/react-reconciler@0.28.9(@types/react@19.2.14)':
     dependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  '@types/react@19.2.5':
+  '@types/react@19.2.14':
     dependencies:
-      csstype: 3.1.3
+      csstype: 3.2.3
 
   '@types/remove-markdown@0.3.4': {}
 
-  '@types/retry@0.12.2': {}
-
-  '@types/send@1.2.1':
-    dependencies:
-      '@types/node': 24.3.0
+  '@types/stats.js@0.17.4': {}
 
-  '@types/serve-static@2.2.0':
+  '@types/tar-stream@3.1.4':
     dependencies:
-      '@types/http-errors': 2.0.5
-      '@types/node': 24.3.0
-
-  '@types/stats.js@0.17.4': {}
+      '@types/node': 25.5.0
 
   '@types/tedious@4.0.14':
     dependencies:
-      '@types/node': 24.3.0
+      '@types/node': 25.5.0
 
-  '@types/three@0.182.0':
+  '@types/three@0.183.1':
     dependencies:
       '@dimforge/rapier3d-compat': 0.12.0
       '@tweenjs/tween.js': 23.1.3
       '@types/stats.js': 0.17.4
       '@types/webxr': 0.5.24
-      '@webgpu/types': 0.1.68
+      '@webgpu/types': 0.1.69
       fflate: 0.8.2
-      meshoptimizer: 0.22.0
+      meshoptimizer: 1.0.1
 
-  '@types/triple-beam@1.3.5': {}
+  '@types/trusted-types@2.0.7': {}
 
-  '@types/trusted-types@2.0.7':
-    optional: true
+  '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
 
   '@types/webxr@0.5.24': {}
 
-  '@types/yauzl@2.10.3':
-    dependencies:
-      '@types/node': 24.3.0
-    optional: true
-
-  '@typescript-eslint/eslint-plugin@8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2))(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2)
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/type-utils': 8.48.1(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2)
-      '@typescript-eslint/visitor-keys': 8.48.1
-      eslint: 9.39.1(jiti@2.6.0)
-      graphemer: 1.4.0
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.9.2)
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.2)
-      '@typescript-eslint/visitor-keys': 8.48.1
-      debug: 4.4.3
-      eslint: 9.39.1(jiti@2.6.0)
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/project-service@8.48.1(typescript@5.9.2)':
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.48.1(typescript@5.9.2)
-      '@typescript-eslint/types': 8.48.1
-      debug: 4.4.3
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/scope-manager@8.48.1':
-    dependencies:
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/visitor-keys': 8.48.1
-
-  '@typescript-eslint/tsconfig-utils@8.48.1(typescript@5.9.2)':
-    dependencies:
-      typescript: 5.9.2
-
-  '@typescript-eslint/type-utils@8.48.1(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2)':
-    dependencies:
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2)
-      debug: 4.4.3
-      eslint: 9.39.1(jiti@2.6.0)
-      ts-api-utils: 2.1.0(typescript@5.9.2)
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/types@8.48.1': {}
-
-  '@typescript-eslint/typescript-estree@8.48.1(typescript@5.9.2)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.48.1(typescript@5.9.2)
-      '@typescript-eslint/tsconfig-utils': 8.48.1(typescript@5.9.2)
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/visitor-keys': 8.48.1
-      debug: 4.4.3
-      minimatch: 9.0.5
-      semver: 7.7.3
-      tinyglobby: 0.2.15
-      ts-api-utils: 2.1.0(typescript@5.9.2)
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.48.1(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.0))
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.2)
-      eslint: 9.39.1(jiti@2.6.0)
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/visitor-keys@8.48.1':
-    dependencies:
-      '@typescript-eslint/types': 8.48.1
-      eslint-visitor-keys: 4.2.1
-
-  '@uiw/codemirror-extensions-basic-setup@4.25.4(@codemirror/autocomplete@6.20.0)(@codemirror/commands@6.10.1)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.6.0)(@codemirror/state@6.5.4)(@codemirror/view@6.39.11)':
-    dependencies:
-      '@codemirror/autocomplete': 6.20.0
-      '@codemirror/commands': 6.10.1
-      '@codemirror/language': 6.12.1
-      '@codemirror/lint': 6.9.2
-      '@codemirror/search': 6.6.0
-      '@codemirror/state': 6.5.4
-      '@codemirror/view': 6.39.11
-
-  '@uiw/codemirror-theme-github@4.25.4(@codemirror/language@6.12.1)(@codemirror/state@6.5.4)(@codemirror/view@6.39.11)':
-    dependencies:
-      '@uiw/codemirror-themes': 4.25.4(@codemirror/language@6.12.1)(@codemirror/state@6.5.4)(@codemirror/view@6.39.11)
-    transitivePeerDependencies:
-      - '@codemirror/language'
-      - '@codemirror/state'
-      - '@codemirror/view'
-
-  '@uiw/codemirror-themes@4.25.4(@codemirror/language@6.12.1)(@codemirror/state@6.5.4)(@codemirror/view@6.39.11)':
-    dependencies:
-      '@codemirror/language': 6.12.1
-      '@codemirror/state': 6.5.4
-      '@codemirror/view': 6.39.11
-
-  '@uiw/react-codemirror@4.25.4(@babel/runtime@7.28.4)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.6.0)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.11)(codemirror@6.0.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@babel/runtime': 7.28.4
-      '@codemirror/commands': 6.10.1
-      '@codemirror/state': 6.5.4
-      '@codemirror/theme-one-dark': 6.1.3
-      '@codemirror/view': 6.39.11
-      '@uiw/codemirror-extensions-basic-setup': 4.25.4(@codemirror/autocomplete@6.20.0)(@codemirror/commands@6.10.1)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.6.0)(@codemirror/state@6.5.4)(@codemirror/view@6.39.11)
-      codemirror: 6.0.2
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    transitivePeerDependencies:
-      - '@codemirror/autocomplete'
-      - '@codemirror/language'
-      - '@codemirror/lint'
-      - '@codemirror/search'
-
-  '@ungap/structured-clone@1.2.0': {}
+  '@ungap/structured-clone@1.3.0': {}
 
   '@uploadthing/mime-types@0.3.6': {}
 
-  '@uploadthing/react@7.3.3(react@19.2.0)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11))':
+  '@uploadthing/react@7.3.3(react@19.2.3)(uploadthing@7.7.4(express@5.2.1)(tailwindcss@4.2.2))':
     dependencies:
       '@uploadthing/shared': 7.1.10
       file-selector: 0.6.0
-      react: 19.2.0
-      uploadthing: 7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11)
+      react: 19.2.3
+      uploadthing: 7.7.4(express@5.2.1)(tailwindcss@4.2.2)
 
   '@uploadthing/shared@7.1.10':
     dependencies:
@@ -12610,171 +10245,68 @@ snapshots:
       effect: 3.17.7
       sqids: 0.3.0
 
+  '@upsetjs/venn.js@2.0.0':
+    optionalDependencies:
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
   '@use-gesture/core@10.3.1': {}
 
-  '@use-gesture/react@10.3.1(react@19.2.0)':
+  '@use-gesture/react@10.3.1(react@19.2.3)':
     dependencies:
       '@use-gesture/core': 10.3.1
-      react: 19.2.0
-
-  '@vercel/nft@0.29.4(rollup@4.53.3)':
-    dependencies:
-      '@mapbox/node-pre-gyp': 2.0.0
-      '@rollup/pluginutils': 5.3.0(rollup@4.53.3)
-      acorn: 8.15.0
-      acorn-import-attributes: 1.9.5(acorn@8.15.0)
-      async-sema: 3.1.1
-      bindings: 1.5.0
-      estree-walker: 2.0.2
-      glob: 13.0.0
-      graceful-fs: 4.2.11
-      node-gyp-build: 4.8.4
-      picomatch: 4.0.3
-      resolve-from: 5.0.0
-    transitivePeerDependencies:
-      - encoding
-      - rollup
-      - supports-color
+      react: 19.2.3
 
-  '@visx/group@2.17.0(react@19.2.0)':
+  '@visx/group@3.12.0(react@19.2.3)':
     dependencies:
-      '@types/react': 19.2.5
-      classnames: 2.3.2
+      '@types/react': 19.2.14
+      classnames: 2.5.1
       prop-types: 15.8.1
-      react: 19.2.0
+      react: 19.2.3
 
-  '@visx/hierarchy@2.17.0(react@19.2.0)':
+  '@visx/hierarchy@3.12.0(react@19.2.3)':
     dependencies:
-      '@types/d3-hierarchy': 1.1.10
-      '@types/react': 19.2.5
-      '@visx/group': 2.17.0(react@19.2.0)
-      classnames: 2.3.2
+      '@types/d3-hierarchy': 1.1.11
+      '@types/react': 19.2.14
+      '@visx/group': 3.12.0(react@19.2.3)
+      classnames: 2.5.1
       d3-hierarchy: 1.1.9
       prop-types: 15.8.1
-      react: 19.2.0
-
-  '@visx/responsive@2.17.0(react@19.2.0)':
-    dependencies:
-      '@juggle/resize-observer': 3.4.0
-      '@types/lodash': 4.14.200
-      '@types/react': 19.2.5
-      lodash: 4.17.21
-      prop-types: 15.8.1
-      react: 19.2.0
-
-  '@vitejs/plugin-react@4.3.4(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1))':
-    dependencies:
-      '@babel/core': 7.28.4
-      '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.28.4)
-      '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.28.4)
-      '@types/babel__core': 7.20.5
-      react-refresh: 0.14.2
-      vite: 7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vue/compiler-core@3.5.22':
-    dependencies:
-      '@babel/parser': 7.28.4
-      '@vue/shared': 3.5.22
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.1
-
-  '@vue/compiler-dom@3.5.22':
-    dependencies:
-      '@vue/compiler-core': 3.5.22
-      '@vue/shared': 3.5.22
+      react: 19.2.3
 
-  '@vue/compiler-sfc@3.5.22':
+  '@vitejs/plugin-react@6.0.1(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0))':
     dependencies:
-      '@babel/parser': 7.28.4
-      '@vue/compiler-core': 3.5.22
-      '@vue/compiler-dom': 3.5.22
-      '@vue/compiler-ssr': 3.5.22
-      '@vue/shared': 3.5.22
-      estree-walker: 2.0.2
-      magic-string: 0.30.19
-      postcss: 8.5.6
-      source-map-js: 1.2.1
-
-  '@vue/compiler-ssr@3.5.22':
-    dependencies:
-      '@vue/compiler-dom': 3.5.22
-      '@vue/shared': 3.5.22
-
-  '@vue/shared@3.5.22': {}
+      '@rolldown/pluginutils': 1.0.0-rc.7
+      vite: 8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)
 
   '@webcontainer/api@1.6.1': {}
 
-  '@webgpu/types@0.1.68': {}
-
-  '@whatwg-node/disposablestack@0.0.6':
-    dependencies:
-      '@whatwg-node/promise-helpers': 1.3.2
-      tslib: 2.8.1
-
-  '@whatwg-node/fetch@0.10.11':
-    dependencies:
-      '@whatwg-node/node-fetch': 0.8.1
-      urlpattern-polyfill: 10.1.0
-
-  '@whatwg-node/node-fetch@0.8.1':
-    dependencies:
-      '@fastify/busboy': 3.2.0
-      '@whatwg-node/disposablestack': 0.0.6
-      '@whatwg-node/promise-helpers': 1.3.2
-      tslib: 2.8.1
-
-  '@whatwg-node/promise-helpers@1.3.2':
-    dependencies:
-      tslib: 2.8.1
+  '@webgpu/types@0.1.69': {}
 
-  '@whatwg-node/server@0.10.13':
-    dependencies:
-      '@envelop/instrumentation': 1.0.0
-      '@whatwg-node/disposablestack': 0.0.6
-      '@whatwg-node/fetch': 0.10.11
-      '@whatwg-node/promise-helpers': 1.3.2
-      tslib: 2.8.1
+  '@xstate/fsm@2.0.0': {}
 
-  '@xstate/react@6.0.0(@types/react@19.2.5)(react@19.2.0)(xstate@5.25.0)':
+  '@xstate/react@6.1.0(@types/react@19.2.14)(react@19.2.3)(xstate@5.30.0)':
     dependencies:
-      react: 19.2.0
-      use-isomorphic-layout-effect: 1.2.1(@types/react@19.2.5)(react@19.2.0)
-      use-sync-external-store: 1.6.0(react@19.2.0)
+      react: 19.2.3
+      use-isomorphic-layout-effect: 1.2.1(@types/react@19.2.14)(react@19.2.3)
+      use-sync-external-store: 1.6.0(react@19.2.3)
     optionalDependencies:
-      xstate: 5.25.0
+      xstate: 5.30.0
     transitivePeerDependencies:
       - '@types/react'
 
   abbrev@1.1.1: {}
 
-  abbrev@3.0.1: {}
-
-  abort-controller@3.0.0:
-    dependencies:
-      event-target-shim: 5.0.1
-
-  accepts@1.3.8:
-    dependencies:
-      mime-types: 2.1.35
-      negotiator: 0.6.3
-
   accepts@2.0.0:
     dependencies:
-      mime-types: 3.0.1
+      mime-types: 3.0.2
       negotiator: 1.0.0
 
-  acorn-import-attributes@1.9.5(acorn@8.15.0):
-    dependencies:
-      acorn: 8.15.0
-
-  acorn-jsx@5.3.2(acorn@8.15.0):
+  acorn-import-attributes@1.9.5(acorn@8.16.0):
     dependencies:
-      acorn: 8.15.0
+      acorn: 8.16.0
 
-  acorn@8.15.0: {}
+  acorn@8.16.0: {}
 
   agent-base@6.0.2:
     dependencies:
@@ -12782,50 +10314,38 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  agent-base@7.1.4: {}
-
-  ajv-errors@3.0.0(ajv@8.17.1):
-    dependencies:
-      ajv: 8.17.1
-
-  ajv-formats@3.0.1(ajv@8.17.1):
+  ajv-formats@3.0.1(ajv@8.18.0):
     optionalDependencies:
-      ajv: 8.17.1
+      ajv: 8.18.0
 
-  ajv@6.12.6:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
-
-  ajv@8.17.1:
+  ajv@8.18.0:
     dependencies:
       fast-deep-equal: 3.1.3
       fast-uri: 3.1.0
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
-  algoliasearch-helper@3.24.3(algoliasearch@5.23.4):
+  algoliasearch-helper@3.28.1(algoliasearch@5.50.0):
     dependencies:
       '@algolia/events': 4.0.1
-      algoliasearch: 5.23.4
-
-  algoliasearch@5.23.4:
-    dependencies:
-      '@algolia/client-abtesting': 5.23.4
-      '@algolia/client-analytics': 5.23.4
-      '@algolia/client-common': 5.23.4
-      '@algolia/client-insights': 5.23.4
-      '@algolia/client-personalization': 5.23.4
-      '@algolia/client-query-suggestions': 5.23.4
-      '@algolia/client-search': 5.23.4
-      '@algolia/ingestion': 1.23.4
-      '@algolia/monitoring': 1.23.4
-      '@algolia/recommend': 5.23.4
-      '@algolia/requester-browser-xhr': 5.23.4
-      '@algolia/requester-fetch': 5.23.4
-      '@algolia/requester-node-http': 5.23.4
+      algoliasearch: 5.50.0
+
+  algoliasearch@5.50.0:
+    dependencies:
+      '@algolia/abtesting': 1.16.0
+      '@algolia/client-abtesting': 5.50.0
+      '@algolia/client-analytics': 5.50.0
+      '@algolia/client-common': 5.50.0
+      '@algolia/client-insights': 5.50.0
+      '@algolia/client-personalization': 5.50.0
+      '@algolia/client-query-suggestions': 5.50.0
+      '@algolia/client-search': 5.50.0
+      '@algolia/ingestion': 1.50.0
+      '@algolia/monitoring': 1.50.0
+      '@algolia/recommend': 5.50.0
+      '@algolia/requester-browser-xhr': 5.50.0
+      '@algolia/requester-fetch': 5.50.0
+      '@algolia/requester-node-http': 5.50.0
 
   ansi-regex@5.0.1: {}
 
@@ -12837,213 +10357,105 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
-  ansis@4.1.0: {}
-
-  anymatch@3.1.3:
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
-
-  archiver-utils@5.0.2:
-    dependencies:
-      glob: 13.0.0
-      graceful-fs: 4.2.11
-      is-stream: 2.0.1
-      lazystream: 1.0.1
-      lodash: 4.17.21
-      normalize-path: 3.0.0
-      readable-stream: 4.7.0
-
-  archiver@7.0.1:
-    dependencies:
-      archiver-utils: 5.0.2
-      async: 3.2.6
-      buffer-crc32: 1.0.0
-      readable-stream: 4.7.0
-      readdir-glob: 1.1.3
-      tar-stream: 3.1.7
-      zip-stream: 6.0.1
-    transitivePeerDependencies:
-      - react-native-b4a
+  ansis@4.2.0: {}
 
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
 
-  aria-hidden@1.2.4:
+  aria-hidden@1.2.6:
     dependencies:
       tslib: 2.8.1
 
-  aria-query@5.3.2: {}
-
-  array-buffer-byte-length@1.0.1:
-    dependencies:
-      call-bind: 1.0.7
-      is-array-buffer: 3.0.4
-
   array-buffer-byte-length@1.0.2:
     dependencies:
       call-bound: 1.0.4
       is-array-buffer: 3.0.5
 
-  array-flatten@1.1.1: {}
-
-  array-includes@3.1.9:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      is-string: 1.1.1
-      math-intrinsics: 1.1.0
-
-  array.prototype.findlast@1.2.5:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-shim-unscopables: 1.0.2
-
-  array.prototype.flat@1.3.2:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-shim-unscopables: 1.0.2
-
-  array.prototype.flatmap@1.3.3:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-shim-unscopables: 1.0.2
-
-  array.prototype.tosorted@1.1.4:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-shim-unscopables: 1.0.2
-
-  arraybuffer.prototype.slice@1.0.3:
-    dependencies:
-      array-buffer-byte-length: 1.0.1
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.22.5
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      is-array-buffer: 3.0.4
-      is-shared-array-buffer: 1.0.3
-
   arraybuffer.prototype.slice@1.0.4:
     dependencies:
       array-buffer-byte-length: 1.0.2
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       is-array-buffer: 3.0.5
 
-  ast-module-types@6.0.1: {}
-
-  ast-types-flow@0.0.8: {}
-
-  ast-types@0.16.1:
+  ast-v8-to-istanbul@0.3.12:
     dependencies:
-      tslib: 2.8.1
+      '@jridgewell/trace-mapping': 0.3.31
+      estree-walker: 3.0.3
+      js-tokens: 10.0.0
 
-  async-sema@3.1.1: {}
+  async-function@1.0.0: {}
 
   async@3.2.6: {}
 
-  autoprefixer@10.4.18(postcss@8.5.6):
+  available-typed-arrays@1.0.7:
     dependencies:
-      browserslist: 4.24.4
-      caniuse-lite: 1.0.30001692
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.1.1
-      postcss: 8.5.6
-      postcss-value-parser: 4.2.0
+      possible-typed-array-names: 1.1.0
 
-  available-typed-arrays@1.0.7:
+  b4a@1.8.0: {}
+
+  babel-dead-code-elimination@1.0.12:
     dependencies:
-      possible-typed-array-names: 1.0.0
+      '@babel/core': 7.29.0
+      '@babel/parser': 7.29.2
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
 
-  axe-core@4.11.0: {}
+  bail@2.0.2: {}
+
+  balanced-match@1.0.2: {}
 
-  axobject-query@4.1.0: {}
+  balanced-match@4.0.4: {}
 
-  b4a@1.7.3: {}
+  bare-events@2.8.2: {}
 
-  babel-dead-code-elimination@1.0.10:
+  bare-fs@4.5.6:
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/parser': 7.28.4
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.5
+      bare-events: 2.8.2
+      bare-path: 3.0.0
+      bare-stream: 2.12.0(bare-events@2.8.2)
+      bare-url: 2.4.0
+      fast-fifo: 1.3.2
     transitivePeerDependencies:
-      - supports-color
+      - bare-abort-controller
+      - react-native-b4a
 
-  babel-plugin-macros@3.1.0:
-    dependencies:
-      '@babel/runtime': 7.28.4
-      cosmiconfig: 7.1.0
-      resolve: 1.22.10
-    optional: true
+  bare-os@3.8.6: {}
 
-  bail@2.0.2: {}
+  bare-path@3.0.0:
+    dependencies:
+      bare-os: 3.8.6
 
-  balanced-match@1.0.2: {}
+  bare-stream@2.12.0(bare-events@2.8.2):
+    dependencies:
+      streamx: 2.25.0
+      teex: 1.0.1
+    optionalDependencies:
+      bare-events: 2.8.2
+    transitivePeerDependencies:
+      - react-native-b4a
 
-  bare-events@2.7.0: {}
+  bare-url@2.4.0:
+    dependencies:
+      bare-path: 3.0.0
 
   base64-js@1.5.1: {}
 
-  better-ajv-errors@1.2.0(ajv@8.17.1):
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@humanwhocodes/momoa': 2.0.4
-      ajv: 8.17.1
-      chalk: 4.1.2
-      jsonpointer: 5.0.1
-      leven: 3.1.0
+  baseline-browser-mapping@2.10.13: {}
 
   bidi-js@1.0.3:
     dependencies:
       require-from-string: 2.0.2
 
-  binary-extensions@2.2.0: {}
-
   binary-search-bounds@2.0.5: {}
 
-  bindings@1.5.0:
-    dependencies:
-      file-uri-to-path: 1.0.0
-
-  body-parser@1.20.4:
-    dependencies:
-      bytes: 3.1.2
-      content-type: 1.0.5
-      debug: 2.6.9
-      depd: 2.0.0
-      destroy: 1.2.0
-      http-errors: 2.0.1
-      iconv-lite: 0.4.24
-      on-finished: 2.4.1
-      qs: 6.14.1
-      raw-body: 2.5.3
-      type-is: 1.6.18
-      unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
+  blake3-wasm@2.1.5: {}
 
   body-parser@2.2.2:
     dependencies:
@@ -13053,7 +10465,7 @@ snapshots:
       http-errors: 2.0.1
       iconv-lite: 0.7.2
       on-finished: 2.4.1
-      qs: 6.14.1
+      qs: 6.15.0
       raw-body: 3.0.2
       type-is: 2.0.1
     transitivePeerDependencies:
@@ -13061,28 +10473,28 @@ snapshots:
 
   boolbase@1.0.0: {}
 
-  brace-expansion@2.0.2:
+  brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2
+      concat-map: 0.0.1
 
-  braces@3.0.3:
+  brace-expansion@2.0.3:
     dependencies:
-      fill-range: 7.1.1
+      balanced-match: 1.0.2
 
-  browserslist@4.24.4:
+  brace-expansion@5.0.5:
     dependencies:
-      caniuse-lite: 1.0.30001692
-      electron-to-chromium: 1.5.83
-      node-releases: 2.0.19
-      update-browserslist-db: 1.1.2(browserslist@4.24.4)
+      balanced-match: 4.0.4
 
-  btoa@1.2.1: {}
-
-  buffer-crc32@0.2.13: {}
-
-  buffer-crc32@1.0.0: {}
+  browserslist@4.28.2:
+    dependencies:
+      baseline-browser-mapping: 2.10.13
+      caniuse-lite: 1.0.30001784
+      electron-to-chromium: 1.5.330
+      node-releases: 2.0.36
+      update-browserslist-db: 1.2.3(browserslist@4.28.2)
 
-  buffer-equal-constant-time@1.0.1: {}
+  btoa@1.2.1: {}
 
   buffer-from@1.1.2: {}
 
@@ -13098,14 +10510,6 @@ snapshots:
       es-errors: 1.3.0
       function-bind: 1.1.2
 
-  call-bind@1.0.7:
-    dependencies:
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.3.0
-      set-function-length: 1.2.2
-
   call-bind@1.0.8:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -13118,17 +10522,13 @@ snapshots:
       call-bind-apply-helpers: 1.0.2
       get-intrinsic: 1.3.0
 
-  callsite@1.0.0: {}
-
-  callsites@3.1.0: {}
-
   camelcase@8.0.0: {}
 
-  camera-controls@3.1.2(three@0.182.0):
+  camera-controls@3.1.2(three@0.183.2):
     dependencies:
-      three: 0.182.0
+      three: 0.183.2
 
-  caniuse-lite@1.0.30001692: {}
+  caniuse-lite@1.0.30001784: {}
 
   ccount@2.0.1: {}
 
@@ -13151,78 +10551,56 @@ snapshots:
 
   character-entities@2.0.2: {}
 
+  character-reference-invalid@2.0.1: {}
+
   cheerio-select@2.1.0:
     dependencies:
       boolbase: 1.0.0
-      css-select: 5.1.0
-      css-what: 6.1.0
+      css-select: 5.2.2
+      css-what: 6.2.2
       domelementtype: 2.3.0
       domhandler: 5.0.3
       domutils: 3.2.2
 
-  cheerio@1.1.2:
+  cheerio@1.2.0:
     dependencies:
       cheerio-select: 2.1.0
       dom-serializer: 2.0.0
       domhandler: 5.0.3
       domutils: 3.2.2
       encoding-sniffer: 0.2.1
-      htmlparser2: 10.0.0
+      htmlparser2: 10.1.0
       parse5: 7.3.0
       parse5-htmlparser2-tree-adapter: 7.1.0
       parse5-parser-stream: 7.1.2
-      undici: 7.14.0
+      undici: 7.24.7
       whatwg-mimetype: 4.0.0
 
-  chevrotain-allstar@0.3.1(chevrotain@11.0.3):
-    dependencies:
-      chevrotain: 11.0.3
-      lodash-es: 4.17.21
-
-  chevrotain@11.0.3:
+  chevrotain-allstar@0.3.1(chevrotain@11.1.2):
     dependencies:
-      '@chevrotain/cst-dts-gen': 11.0.3
-      '@chevrotain/gast': 11.0.3
-      '@chevrotain/regexp-to-ast': 11.0.3
-      '@chevrotain/types': 11.0.3
-      '@chevrotain/utils': 11.0.3
-      lodash-es: 4.17.21
+      chevrotain: 11.1.2
+      lodash-es: 4.17.23
 
-  chokidar@3.6.0:
+  chevrotain@11.1.2:
     dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.3
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
+      '@chevrotain/cst-dts-gen': 11.1.2
+      '@chevrotain/gast': 11.1.2
+      '@chevrotain/regexp-to-ast': 11.1.2
+      '@chevrotain/types': 11.1.2
+      '@chevrotain/utils': 11.1.2
+      lodash-es: 4.17.23
 
   chokidar@4.0.3:
     dependencies:
       readdirp: 4.1.2
 
-  chownr@3.0.0: {}
-
-  citty@0.1.6:
+  chokidar@5.0.0:
     dependencies:
-      consola: 3.4.2
+      readdirp: 5.0.0
 
-  cjs-module-lexer@1.4.3: {}
+  cjs-module-lexer@2.2.0: {}
 
-  class-variance-authority@0.7.1:
-    dependencies:
-      clsx: 2.1.1
-
-  classnames@2.3.2: {}
-
-  clipboardy@4.0.0:
-    dependencies:
-      execa: 8.0.1
-      is-wsl: 3.1.0
-      is64bit: 2.0.0
+  classnames@2.5.1: {}
 
   cliui@7.0.4:
     dependencies:
@@ -13230,36 +10608,20 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
-  cliui@8.0.1:
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 7.0.0
-
   clsx@2.1.1: {}
 
-  cmdk@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+  cmdk@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.5)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.5))(@types/react@19.2.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
 
-  codemirror@6.0.2:
-    dependencies:
-      '@codemirror/autocomplete': 6.20.0
-      '@codemirror/commands': 6.10.1
-      '@codemirror/language': 6.12.1
-      '@codemirror/lint': 6.9.2
-      '@codemirror/search': 6.6.0
-      '@codemirror/state': 6.5.4
-      '@codemirror/view': 6.39.11
-
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -13268,87 +10630,39 @@ snapshots:
     dependencies:
       color-name: 1.1.4
 
-  color-convert@3.1.2:
-    dependencies:
-      color-name: 2.0.2
-
   color-name@1.1.3: {}
 
   color-name@1.1.4: {}
 
-  color-name@2.0.2: {}
-
-  color-string@2.1.2:
-    dependencies:
-      color-name: 2.0.2
-
-  color@5.0.2:
-    dependencies:
-      color-convert: 3.1.2
-      color-string: 2.1.2
-
   comma-separated-tokens@2.0.3: {}
 
-  commander@10.0.1: {}
-
-  commander@11.1.0: {}
-
-  commander@12.1.0: {}
-
-  commander@2.20.3: {}
-
   commander@7.2.0: {}
 
   commander@8.3.0: {}
 
-  common-path-prefix@3.0.0: {}
-
-  compress-commons@6.0.2:
-    dependencies:
-      crc-32: 1.2.2
-      crc32-stream: 6.0.0
-      is-stream: 2.0.1
-      normalize-path: 3.0.0
-      readable-stream: 4.7.0
+  concat-map@0.0.1: {}
 
   confbox@0.1.8: {}
 
-  confbox@0.2.2: {}
-
-  consola@3.4.2: {}
-
-  content-disposition@0.5.4:
-    dependencies:
-      safe-buffer: 5.2.1
-
   content-disposition@1.0.1: {}
 
   content-type@1.0.5: {}
 
   convert-source-map@1.9.0: {}
 
-  convert-source-map@2.0.0: {}
-
-  cookie-es@1.2.2: {}
-
-  cookie-es@2.0.0: {}
+  convert-source-map@2.0.0: {}
 
-  cookie-signature@1.0.7: {}
+  cookie-es@3.1.1: {}
 
   cookie-signature@1.2.2: {}
 
-  cookie@0.7.1: {}
-
-  cookie@1.0.2: {}
+  cookie@0.7.2: {}
 
-  copy-file@11.1.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      p-event: 6.0.1
+  cookie@1.1.1: {}
 
   core-util-is@1.0.3: {}
 
-  cors@2.8.5:
+  cors@2.8.6:
     dependencies:
       object-assign: 4.1.1
       vary: 1.1.2
@@ -13361,28 +10675,6 @@ snapshots:
     dependencies:
       layout-base: 2.0.1
 
-  cosmiconfig@7.1.0:
-    dependencies:
-      '@types/parse-json': 4.0.2
-      import-fresh: 3.3.0
-      parse-json: 5.2.0
-      path-type: 4.0.0
-      yaml: 1.10.2
-    optional: true
-
-  crc-32@1.2.2: {}
-
-  crc32-stream@6.0.0:
-    dependencies:
-      crc-32: 1.2.2
-      readable-stream: 4.7.0
-
-  crelt@1.0.6: {}
-
-  cron-parser@4.9.0:
-    dependencies:
-      luxon: 3.5.0
-
   cross-env@7.0.3:
     dependencies:
       cross-spawn: 7.0.6
@@ -13393,39 +10685,19 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  crossws@0.3.5:
-    dependencies:
-      uncrypto: 0.1.3
-
-  css-select@5.1.0:
+  css-select@5.2.2:
     dependencies:
       boolbase: 1.0.0
-      css-what: 6.1.0
+      css-what: 6.2.2
       domhandler: 5.0.3
       domutils: 3.2.2
       nth-check: 2.1.1
 
-  css-tree@2.2.1:
-    dependencies:
-      mdn-data: 2.0.28
-      source-map-js: 1.2.1
-
-  css-tree@3.1.0:
-    dependencies:
-      mdn-data: 2.12.2
-      source-map-js: 1.2.1
-
-  css-what@6.1.0: {}
+  css-what@6.2.2: {}
 
   cssesc@3.0.0: {}
 
-  cssfilter@0.0.10: {}
-
-  csso@5.0.5:
-    dependencies:
-      css-tree: 2.2.1
-
-  csstype@3.1.3: {}
+  csstype@3.2.3: {}
 
   cytoscape-cose-bilkent@4.1.0(cytoscape@3.33.1):
     dependencies:
@@ -13469,7 +10741,7 @@ snapshots:
 
   d3-delaunay@6.0.4:
     dependencies:
-      delaunator: 5.0.1
+      delaunator: 5.1.0
 
   d3-dispatch@3.0.1: {}
 
@@ -13496,7 +10768,7 @@ snapshots:
       d3-quadtree: 3.0.1
       d3-timer: 3.0.1
 
-  d3-format@3.1.0: {}
+  d3-format@3.1.2: {}
 
   d3-geo@3.1.1:
     dependencies:
@@ -13533,7 +10805,7 @@ snapshots:
   d3-scale@4.0.2:
     dependencies:
       d3-array: 3.2.4
-      d3-format: 3.1.0
+      d3-format: 3.1.2
       d3-interpolate: 3.0.1
       d3-time: 3.1.0
       d3-time-format: 4.1.0
@@ -13590,7 +10862,7 @@ snapshots:
       d3-ease: 3.0.1
       d3-fetch: 3.0.1
       d3-force: 3.0.0
-      d3-format: 3.1.0
+      d3-format: 3.1.2
       d3-geo: 3.1.1
       d3-hierarchy: 3.1.2
       d3-interpolate: 3.0.1
@@ -13608,14 +10880,10 @@ snapshots:
       d3-transition: 3.0.1(d3-selection@3.0.0)
       d3-zoom: 3.0.0
 
-  dagre-d3-es@7.0.11:
+  dagre-d3-es@7.0.14:
     dependencies:
       d3: 7.9.0
-      lodash-es: 4.17.21
-
-  damerau-levenshtein@1.0.8: {}
-
-  data-uri-to-buffer@4.0.1: {}
+      lodash-es: 4.17.23
 
   data-view-buffer@1.0.2:
     dependencies:
@@ -13635,40 +10903,16 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
-  date-fns@2.30.0:
-    dependencies:
-      '@babel/runtime': 7.24.5
-
-  dayjs@1.11.18: {}
-
-  debug@2.6.9:
-    dependencies:
-      ms: 2.0.0
-
-  debug@4.4.1:
-    dependencies:
-      ms: 2.1.3
+  dayjs@1.11.20: {}
 
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
 
-  decache@4.6.2:
-    dependencies:
-      callsite: 1.0.0
-
-  decode-named-character-reference@1.2.0:
+  decode-named-character-reference@1.3.0:
     dependencies:
       character-entities: 2.0.2
 
-  dedent@1.7.0(babel-plugin-macros@3.1.0):
-    optionalDependencies:
-      babel-plugin-macros: 3.1.0
-
-  deep-is@0.1.4: {}
-
-  deepmerge@4.3.1: {}
-
   define-data-property@1.1.4:
     dependencies:
       es-define-property: 1.0.1
@@ -13681,104 +10925,30 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
-  defu@6.1.4: {}
-
-  delaunator@5.0.1:
+  delaunator@5.1.0:
     dependencies:
-      robust-predicates: 3.0.2
+      robust-predicates: 3.0.3
 
   depd@2.0.0: {}
 
-  deprecation@2.3.1: {}
-
   dequal@2.0.3: {}
 
-  destr@2.0.5: {}
-
-  destroy@1.2.0: {}
-
   detect-gpu@5.0.70:
     dependencies:
       webgl-constants: 1.1.1
 
-  detect-libc@1.0.3: {}
-
-  detect-libc@2.0.4: {}
-
   detect-libc@2.1.2: {}
 
   detect-node-es@1.1.0: {}
 
-  detective-amd@6.0.1:
-    dependencies:
-      ast-module-types: 6.0.1
-      escodegen: 2.1.0
-      get-amd-module-type: 6.0.1
-      node-source-walk: 7.0.1
-
-  detective-cjs@6.0.1:
-    dependencies:
-      ast-module-types: 6.0.1
-      node-source-walk: 7.0.1
-
-  detective-es6@5.0.1:
-    dependencies:
-      node-source-walk: 7.0.1
-
-  detective-postcss@7.0.1(postcss@8.5.6):
-    dependencies:
-      is-url: 1.2.4
-      postcss: 8.5.6
-      postcss-values-parser: 6.0.2(postcss@8.5.6)
-
-  detective-sass@6.0.1:
-    dependencies:
-      gonzales-pe: 4.3.0
-      node-source-walk: 7.0.1
-
-  detective-scss@5.0.1:
-    dependencies:
-      gonzales-pe: 4.3.0
-      node-source-walk: 7.0.1
-
-  detective-stylus@5.0.1: {}
-
-  detective-typescript@14.0.0(typescript@5.9.2):
-    dependencies:
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.2)
-      ast-module-types: 6.0.1
-      node-source-walk: 7.0.1
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
-
-  detective-vue2@2.2.0(typescript@5.9.2):
-    dependencies:
-      '@dependents/detective-less': 5.0.1
-      '@vue/compiler-sfc': 3.5.22
-      detective-es6: 5.0.1
-      detective-sass: 6.0.1
-      detective-scss: 5.0.1
-      detective-stylus: 5.0.1
-      detective-typescript: 14.0.0(typescript@5.9.2)
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
-
-  dettle@1.0.5: {}
-
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
 
-  diff@8.0.2: {}
+  diff@8.0.4: {}
 
   discord-interactions@4.4.0: {}
 
-  doctrine@2.1.0:
-    dependencies:
-      esutils: 2.0.3
-
   dom-serializer@2.0.0:
     dependencies:
       domelementtype: 2.3.0
@@ -13791,7 +10961,7 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
-  dompurify@3.2.6:
+  dompurify@3.3.3:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
@@ -13801,39 +10971,35 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
-  dot-prop@9.0.0:
-    dependencies:
-      type-fest: 4.41.0
-
-  dotenv-cli@8.0.0:
+  dotenv-cli@11.0.0:
     dependencies:
       cross-spawn: 7.0.6
-      dotenv: 16.6.1
-      dotenv-expand: 10.0.0
+      dotenv: 17.3.1
+      dotenv-expand: 12.0.3
       minimist: 1.2.8
 
-  dotenv-expand@10.0.0: {}
+  dotenv-expand@12.0.3:
+    dependencies:
+      dotenv: 16.6.1
 
   dotenv@16.6.1: {}
 
+  dotenv@17.3.1: {}
+
   draco3d@1.5.7: {}
 
-  drizzle-kit@0.31.7:
+  drizzle-kit@0.31.10:
     dependencies:
       '@drizzle-team/brocli': 0.10.2
       '@esbuild-kit/esm-loader': 2.6.5
-      esbuild: 0.25.10
-      esbuild-register: 3.6.0(esbuild@0.25.10)
-    transitivePeerDependencies:
-      - supports-color
+      esbuild: 0.25.12
+      tsx: 4.21.0
 
-  drizzle-orm@0.44.7(@neondatabase/serverless@0.10.4)(@opentelemetry/api@1.9.0)(@types/pg@8.15.6)(kysely@0.28.5)(postgres@3.4.7):
+  drizzle-orm@0.45.2(@opentelemetry/api@1.9.1)(@types/pg@8.20.0)(postgres@3.4.8):
     optionalDependencies:
-      '@neondatabase/serverless': 0.10.4
-      '@opentelemetry/api': 1.9.0
-      '@types/pg': 8.15.6
-      kysely: 0.28.5
-      postgres: 3.4.7
+      '@opentelemetry/api': 1.9.1
+      '@types/pg': 8.20.0
+      postgres: 3.4.8
 
   dunder-proto@1.0.1:
     dependencies:
@@ -13843,10 +11009,6 @@ snapshots:
 
   duplexer@0.1.2: {}
 
-  ecdsa-sig-formatter@1.0.11:
-    dependencies:
-      safe-buffer: 5.2.1
-
   ee-first@1.1.1: {}
 
   effect@3.17.7:
@@ -13858,28 +11020,10 @@ snapshots:
     dependencies:
       jake: 10.9.4
 
-  electron-to-chromium@1.5.83: {}
-
-  embla-carousel-react@8.6.0(react@19.2.0):
-    dependencies:
-      embla-carousel: 8.6.0
-      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
-      react: 19.2.0
-
-  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
-    dependencies:
-      embla-carousel: 8.6.0
-
-  embla-carousel@8.6.0: {}
+  electron-to-chromium@1.5.330: {}
 
   emoji-regex@8.0.0: {}
 
-  emoji-regex@9.2.2: {}
-
-  empathic@2.0.0: {}
-
-  enabled@2.0.0: {}
-
   encodeurl@2.0.0: {}
 
   encoding-sniffer@0.2.1:
@@ -13887,70 +11031,24 @@ snapshots:
       iconv-lite: 0.6.3
       whatwg-encoding: 3.1.1
 
-  end-of-stream@1.4.5:
-    dependencies:
-      once: 1.4.0
-
-  enhanced-resolve@5.18.3:
+  enhanced-resolve@5.21.5:
     dependencies:
       graceful-fs: 4.2.11
-      tapable: 2.2.2
+      tapable: 2.3.3
 
   entities@4.5.0: {}
 
   entities@6.0.1: {}
 
-  env-paths@3.0.0: {}
+  entities@7.0.1: {}
 
-  error-ex@1.3.2:
+  error-ex@1.3.4:
     dependencies:
       is-arrayish: 0.2.1
 
-  es-abstract@1.22.5:
-    dependencies:
-      array-buffer-byte-length: 1.0.1
-      arraybuffer.prototype.slice: 1.0.3
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      es-set-tostringtag: 2.0.3
-      es-to-primitive: 1.2.1
-      function.prototype.name: 1.1.6
-      get-intrinsic: 1.3.0
-      get-symbol-description: 1.0.2
-      globalthis: 1.0.3
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-      has-proto: 1.0.3
-      has-symbols: 1.1.0
-      hasown: 2.0.2
-      internal-slot: 1.0.7
-      is-array-buffer: 3.0.4
-      is-callable: 1.2.7
-      is-negative-zero: 2.0.3
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.3
-      is-string: 1.0.7
-      is-typed-array: 1.1.13
-      is-weakref: 1.0.2
-      object-inspect: 1.13.4
-      object-keys: 1.1.1
-      object.assign: 4.1.5
-      regexp.prototype.flags: 1.5.2
-      safe-array-concat: 1.1.2
-      safe-regex-test: 1.0.3
-      string.prototype.trim: 1.2.8
-      string.prototype.trimend: 1.0.7
-      string.prototype.trimstart: 1.0.7
-      typed-array-buffer: 1.0.2
-      typed-array-byte-length: 1.0.1
-      typed-array-byte-offset: 1.0.2
-      typed-array-length: 1.0.5
-      unbox-primitive: 1.0.2
-      which-typed-array: 1.1.15
-
-  es-abstract@1.24.0:
+  error-stack-parser-es@1.0.5: {}
+
+  es-abstract@1.24.1:
     dependencies:
       array-buffer-byte-length: 1.0.2
       arraybuffer.prototype.slice: 1.0.4
@@ -14005,43 +11103,16 @@ snapshots:
       typed-array-byte-offset: 1.0.4
       typed-array-length: 1.0.7
       unbox-primitive: 1.1.0
-      which-typed-array: 1.1.19
+      which-typed-array: 1.1.20
 
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
 
-  es-iterator-helpers@1.2.1:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-set-tostringtag: 2.1.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.3.0
-      globalthis: 1.0.4
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-      has-proto: 1.2.0
-      has-symbols: 1.1.0
-      internal-slot: 1.1.0
-      iterator.prototype: 1.1.5
-      safe-array-concat: 1.1.3
-
-  es-module-lexer@1.7.0: {}
-
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
 
-  es-set-tostringtag@2.0.3:
-    dependencies:
-      get-intrinsic: 1.3.0
-      has-tostringtag: 1.0.2
-      hasown: 2.0.2
-
   es-set-tostringtag@2.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -14049,31 +11120,12 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
-  es-shim-unscopables@1.0.2:
-    dependencies:
-      hasown: 2.0.2
-
-  es-to-primitive@1.2.1:
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.0.5
-      is-symbol: 1.0.4
-
   es-to-primitive@1.3.0:
     dependencies:
       is-callable: 1.2.7
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
-  es6-promise@4.2.8: {}
-
-  esbuild-register@3.6.0(esbuild@0.25.10):
-    dependencies:
-      debug: 4.4.3
-      esbuild: 0.25.10
-    transitivePeerDependencies:
-      - supports-color
-
   esbuild@0.18.20:
     optionalDependencies:
       '@esbuild/android-arm': 0.18.20
@@ -14099,92 +11151,92 @@ snapshots:
       '@esbuild/win32-ia32': 0.18.20
       '@esbuild/win32-x64': 0.18.20
 
-  esbuild@0.25.10:
+  esbuild@0.25.12:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.25.10
-      '@esbuild/android-arm': 0.25.10
-      '@esbuild/android-arm64': 0.25.10
-      '@esbuild/android-x64': 0.25.10
-      '@esbuild/darwin-arm64': 0.25.10
-      '@esbuild/darwin-x64': 0.25.10
-      '@esbuild/freebsd-arm64': 0.25.10
-      '@esbuild/freebsd-x64': 0.25.10
-      '@esbuild/linux-arm': 0.25.10
-      '@esbuild/linux-arm64': 0.25.10
-      '@esbuild/linux-ia32': 0.25.10
-      '@esbuild/linux-loong64': 0.25.10
-      '@esbuild/linux-mips64el': 0.25.10
-      '@esbuild/linux-ppc64': 0.25.10
-      '@esbuild/linux-riscv64': 0.25.10
-      '@esbuild/linux-s390x': 0.25.10
-      '@esbuild/linux-x64': 0.25.10
-      '@esbuild/netbsd-arm64': 0.25.10
-      '@esbuild/netbsd-x64': 0.25.10
-      '@esbuild/openbsd-arm64': 0.25.10
-      '@esbuild/openbsd-x64': 0.25.10
-      '@esbuild/openharmony-arm64': 0.25.10
-      '@esbuild/sunos-x64': 0.25.10
-      '@esbuild/win32-arm64': 0.25.10
-      '@esbuild/win32-ia32': 0.25.10
-      '@esbuild/win32-x64': 0.25.10
-
-  esbuild@0.25.9:
+      '@esbuild/aix-ppc64': 0.25.12
+      '@esbuild/android-arm': 0.25.12
+      '@esbuild/android-arm64': 0.25.12
+      '@esbuild/android-x64': 0.25.12
+      '@esbuild/darwin-arm64': 0.25.12
+      '@esbuild/darwin-x64': 0.25.12
+      '@esbuild/freebsd-arm64': 0.25.12
+      '@esbuild/freebsd-x64': 0.25.12
+      '@esbuild/linux-arm': 0.25.12
+      '@esbuild/linux-arm64': 0.25.12
+      '@esbuild/linux-ia32': 0.25.12
+      '@esbuild/linux-loong64': 0.25.12
+      '@esbuild/linux-mips64el': 0.25.12
+      '@esbuild/linux-ppc64': 0.25.12
+      '@esbuild/linux-riscv64': 0.25.12
+      '@esbuild/linux-s390x': 0.25.12
+      '@esbuild/linux-x64': 0.25.12
+      '@esbuild/netbsd-arm64': 0.25.12
+      '@esbuild/netbsd-x64': 0.25.12
+      '@esbuild/openbsd-arm64': 0.25.12
+      '@esbuild/openbsd-x64': 0.25.12
+      '@esbuild/openharmony-arm64': 0.25.12
+      '@esbuild/sunos-x64': 0.25.12
+      '@esbuild/win32-arm64': 0.25.12
+      '@esbuild/win32-ia32': 0.25.12
+      '@esbuild/win32-x64': 0.25.12
+
+  esbuild@0.27.4:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.25.9
-      '@esbuild/android-arm': 0.25.9
-      '@esbuild/android-arm64': 0.25.9
-      '@esbuild/android-x64': 0.25.9
-      '@esbuild/darwin-arm64': 0.25.9
-      '@esbuild/darwin-x64': 0.25.9
-      '@esbuild/freebsd-arm64': 0.25.9
-      '@esbuild/freebsd-x64': 0.25.9
-      '@esbuild/linux-arm': 0.25.9
-      '@esbuild/linux-arm64': 0.25.9
-      '@esbuild/linux-ia32': 0.25.9
-      '@esbuild/linux-loong64': 0.25.9
-      '@esbuild/linux-mips64el': 0.25.9
-      '@esbuild/linux-ppc64': 0.25.9
-      '@esbuild/linux-riscv64': 0.25.9
-      '@esbuild/linux-s390x': 0.25.9
-      '@esbuild/linux-x64': 0.25.9
-      '@esbuild/netbsd-arm64': 0.25.9
-      '@esbuild/netbsd-x64': 0.25.9
-      '@esbuild/openbsd-arm64': 0.25.9
-      '@esbuild/openbsd-x64': 0.25.9
-      '@esbuild/openharmony-arm64': 0.25.9
-      '@esbuild/sunos-x64': 0.25.9
-      '@esbuild/win32-arm64': 0.25.9
-      '@esbuild/win32-ia32': 0.25.9
-      '@esbuild/win32-x64': 0.25.9
-
-  esbuild@0.27.0:
+      '@esbuild/aix-ppc64': 0.27.4
+      '@esbuild/android-arm': 0.27.4
+      '@esbuild/android-arm64': 0.27.4
+      '@esbuild/android-x64': 0.27.4
+      '@esbuild/darwin-arm64': 0.27.4
+      '@esbuild/darwin-x64': 0.27.4
+      '@esbuild/freebsd-arm64': 0.27.4
+      '@esbuild/freebsd-x64': 0.27.4
+      '@esbuild/linux-arm': 0.27.4
+      '@esbuild/linux-arm64': 0.27.4
+      '@esbuild/linux-ia32': 0.27.4
+      '@esbuild/linux-loong64': 0.27.4
+      '@esbuild/linux-mips64el': 0.27.4
+      '@esbuild/linux-ppc64': 0.27.4
+      '@esbuild/linux-riscv64': 0.27.4
+      '@esbuild/linux-s390x': 0.27.4
+      '@esbuild/linux-x64': 0.27.4
+      '@esbuild/netbsd-arm64': 0.27.4
+      '@esbuild/netbsd-x64': 0.27.4
+      '@esbuild/openbsd-arm64': 0.27.4
+      '@esbuild/openbsd-x64': 0.27.4
+      '@esbuild/openharmony-arm64': 0.27.4
+      '@esbuild/sunos-x64': 0.27.4
+      '@esbuild/win32-arm64': 0.27.4
+      '@esbuild/win32-ia32': 0.27.4
+      '@esbuild/win32-x64': 0.27.4
+
+  esbuild@0.28.1:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.27.0
-      '@esbuild/android-arm': 0.27.0
-      '@esbuild/android-arm64': 0.27.0
-      '@esbuild/android-x64': 0.27.0
-      '@esbuild/darwin-arm64': 0.27.0
-      '@esbuild/darwin-x64': 0.27.0
-      '@esbuild/freebsd-arm64': 0.27.0
-      '@esbuild/freebsd-x64': 0.27.0
-      '@esbuild/linux-arm': 0.27.0
-      '@esbuild/linux-arm64': 0.27.0
-      '@esbuild/linux-ia32': 0.27.0
-      '@esbuild/linux-loong64': 0.27.0
-      '@esbuild/linux-mips64el': 0.27.0
-      '@esbuild/linux-ppc64': 0.27.0
-      '@esbuild/linux-riscv64': 0.27.0
-      '@esbuild/linux-s390x': 0.27.0
-      '@esbuild/linux-x64': 0.27.0
-      '@esbuild/netbsd-arm64': 0.27.0
-      '@esbuild/netbsd-x64': 0.27.0
-      '@esbuild/openbsd-arm64': 0.27.0
-      '@esbuild/openbsd-x64': 0.27.0
-      '@esbuild/openharmony-arm64': 0.27.0
-      '@esbuild/sunos-x64': 0.27.0
-      '@esbuild/win32-arm64': 0.27.0
-      '@esbuild/win32-ia32': 0.27.0
-      '@esbuild/win32-x64': 0.27.0
+      '@esbuild/aix-ppc64': 0.28.1
+      '@esbuild/android-arm': 0.28.1
+      '@esbuild/android-arm64': 0.28.1
+      '@esbuild/android-x64': 0.28.1
+      '@esbuild/darwin-arm64': 0.28.1
+      '@esbuild/darwin-x64': 0.28.1
+      '@esbuild/freebsd-arm64': 0.28.1
+      '@esbuild/freebsd-x64': 0.28.1
+      '@esbuild/linux-arm': 0.28.1
+      '@esbuild/linux-arm64': 0.28.1
+      '@esbuild/linux-ia32': 0.28.1
+      '@esbuild/linux-loong64': 0.28.1
+      '@esbuild/linux-mips64el': 0.28.1
+      '@esbuild/linux-ppc64': 0.28.1
+      '@esbuild/linux-riscv64': 0.28.1
+      '@esbuild/linux-s390x': 0.28.1
+      '@esbuild/linux-x64': 0.28.1
+      '@esbuild/netbsd-arm64': 0.28.1
+      '@esbuild/netbsd-x64': 0.28.1
+      '@esbuild/openbsd-arm64': 0.28.1
+      '@esbuild/openbsd-x64': 0.28.1
+      '@esbuild/openharmony-arm64': 0.28.1
+      '@esbuild/sunos-x64': 0.28.1
+      '@esbuild/win32-arm64': 0.28.1
+      '@esbuild/win32-ia32': 0.28.1
+      '@esbuild/win32-x64': 0.28.1
 
   escalade@3.2.0: {}
 
@@ -14192,153 +11244,23 @@ snapshots:
 
   escape-string-regexp@1.0.5: {}
 
-  escape-string-regexp@4.0.0: {}
-
   escape-string-regexp@5.0.0: {}
 
-  escodegen@2.1.0:
-    dependencies:
-      esprima: 4.0.1
-      estraverse: 5.3.0
-      esutils: 2.0.3
-    optionalDependencies:
-      source-map: 0.6.1
-
-  eslint-plugin-jsx-a11y@6.10.2(eslint@9.39.1(jiti@2.6.0)):
-    dependencies:
-      aria-query: 5.3.2
-      array-includes: 3.1.9
-      array.prototype.flatmap: 1.3.3
-      ast-types-flow: 0.0.8
-      axe-core: 4.11.0
-      axobject-query: 4.1.0
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      eslint: 9.39.1(jiti@2.6.0)
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.9
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      safe-regex-test: 1.1.0
-      string.prototype.includes: 2.0.1
-
-  eslint-plugin-react-hooks@7.0.1(eslint@9.39.1(jiti@2.6.0)):
-    dependencies:
-      '@babel/core': 7.28.4
-      '@babel/parser': 7.28.4
-      eslint: 9.39.1(jiti@2.6.0)
-      hermes-parser: 0.25.1
-      zod: 4.3.5
-      zod-validation-error: 4.0.2(zod@4.3.5)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-react@7.37.5(eslint@9.39.1(jiti@2.6.0)):
-    dependencies:
-      array-includes: 3.1.9
-      array.prototype.findlast: 1.2.5
-      array.prototype.flatmap: 1.3.3
-      array.prototype.tosorted: 1.1.4
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.2.1
-      eslint: 9.39.1(jiti@2.6.0)
-      estraverse: 5.3.0
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
-      object.entries: 1.1.9
-      object.fromentries: 2.0.8
-      object.values: 1.2.1
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.5
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.12
-      string.prototype.repeat: 1.0.0
-
-  eslint-scope@8.4.0:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-
-  eslint-visitor-keys@3.4.3: {}
-
-  eslint-visitor-keys@4.2.1: {}
-
-  eslint@9.39.1(jiti@2.6.0):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.0))
-      '@eslint-community/regexpp': 4.12.2
-      '@eslint/config-array': 0.21.1
-      '@eslint/config-helpers': 0.4.2
-      '@eslint/core': 0.17.0
-      '@eslint/eslintrc': 3.3.3
-      '@eslint/js': 9.39.1
-      '@eslint/plugin-kit': 0.4.1
-      '@humanfs/node': 0.16.7
-      '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.3
-      '@types/estree': 1.0.8
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.6
-      debug: 4.4.3
-      escape-string-regexp: 4.0.0
-      eslint-scope: 8.4.0
-      eslint-visitor-keys: 4.2.1
-      espree: 10.4.0
-      esquery: 1.5.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 8.0.0
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      ignore: 5.3.2
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      json-stable-stringify-without-jsonify: 1.0.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.3
-    optionalDependencies:
-      jiti: 2.6.0
-    transitivePeerDependencies:
-      - supports-color
-
-  esm-env@1.1.4: {}
-
-  espree@10.4.0:
-    dependencies:
-      acorn: 8.15.0
-      acorn-jsx: 5.3.2(acorn@8.15.0)
-      eslint-visitor-keys: 4.2.1
-
   esprima@4.0.1: {}
 
-  esquery@1.5.0:
-    dependencies:
-      estraverse: 5.3.0
+  estree-util-is-identifier-name@3.0.0: {}
 
-  esrecurse@4.3.0:
+  estree-walker@3.0.3:
     dependencies:
-      estraverse: 5.3.0
-
-  estraverse@5.3.0: {}
-
-  estree-walker@2.0.2: {}
-
-  esutils@2.0.3: {}
+      '@types/estree': 1.0.8
 
   etag@1.8.1: {}
 
-  event-target-shim@5.0.1: {}
-
   events-universal@1.0.1:
     dependencies:
-      bare-events: 2.7.0
-
-  events@3.3.0: {}
+      bare-events: 2.8.2
+    transitivePeerDependencies:
+      - bare-abort-controller
 
   eventsource-parser@3.0.6: {}
 
@@ -14346,18 +11268,6 @@ snapshots:
     dependencies:
       eventsource-parser: 3.0.6
 
-  execa@8.0.1:
-    dependencies:
-      cross-spawn: 7.0.6
-      get-stream: 8.0.1
-      human-signals: 5.0.0
-      is-stream: 3.0.0
-      merge-stream: 2.0.0
-      npm-run-path: 5.3.0
-      onetime: 6.0.0
-      signal-exit: 4.1.0
-      strip-final-newline: 3.0.0
-
   execa@9.6.1:
     dependencies:
       '@sindresorhus/merge-streams': 4.0.0
@@ -14373,45 +11283,10 @@ snapshots:
       strip-final-newline: 4.0.0
       yoctocolors: 2.1.2
 
-  express-rate-limit@7.5.1(express@5.2.1):
+  express-rate-limit@8.3.2(express@5.2.1):
     dependencies:
       express: 5.2.1
-
-  express@4.22.1:
-    dependencies:
-      accepts: 1.3.8
-      array-flatten: 1.1.1
-      body-parser: 1.20.4
-      content-disposition: 0.5.4
-      content-type: 1.0.5
-      cookie: 0.7.1
-      cookie-signature: 1.0.7
-      debug: 2.6.9
-      depd: 2.0.0
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      etag: 1.8.1
-      finalhandler: 1.3.2
-      fresh: 0.5.2
-      http-errors: 2.0.1
-      merge-descriptors: 1.0.3
-      methods: 1.1.2
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      path-to-regexp: 0.1.12
-      proxy-addr: 2.0.7
-      qs: 6.14.1
-      range-parser: 1.2.1
-      safe-buffer: 5.2.1
-      send: 0.19.2
-      serve-static: 1.16.3
-      setprototypeof: 1.2.0
-      statuses: 2.0.2
-      type-is: 1.6.18
-      utils-merge: 1.0.1
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
+      ip-address: 10.1.0
 
   express@5.2.1:
     dependencies:
@@ -14419,7 +11294,7 @@ snapshots:
       body-parser: 2.2.2
       content-disposition: 1.0.1
       content-type: 1.0.5
-      cookie: 0.7.1
+      cookie: 0.7.2
       cookie-signature: 1.2.2
       debug: 4.4.3
       depd: 2.0.0
@@ -14430,12 +11305,12 @@ snapshots:
       fresh: 2.0.0
       http-errors: 2.0.1
       merge-descriptors: 2.0.0
-      mime-types: 3.0.1
+      mime-types: 3.0.2
       on-finished: 2.4.1
       once: 1.4.0
       parseurl: 1.3.3
       proxy-addr: 2.0.7
-      qs: 6.14.1
+      qs: 6.15.0
       range-parser: 1.2.1
       router: 2.2.0
       send: 1.2.1
@@ -14446,7 +11321,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  exsolve@1.0.7: {}
+  exsolve@1.0.8: {}
 
   extend-shallow@2.0.1:
     dependencies:
@@ -14454,60 +11329,23 @@ snapshots:
 
   extend@3.0.2: {}
 
-  extract-zip@2.0.1:
-    dependencies:
-      debug: 4.4.3
-      get-stream: 5.2.0
-      yauzl: 2.10.0
-    optionalDependencies:
-      '@types/yauzl': 2.10.3
-    transitivePeerDependencies:
-      - supports-color
-
   fast-check@3.23.2:
     dependencies:
       pure-rand: 6.1.0
 
+  fast-content-type-parse@3.0.0: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-fifo@1.3.2: {}
 
-  fast-glob@3.3.3:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
-
-  fast-json-stable-stringify@2.1.0: {}
-
-  fast-levenshtein@2.0.6: {}
-
-  fast-safe-stringify@2.1.1: {}
-
   fast-sha256@1.3.0: {}
 
   fast-uri@3.1.0: {}
 
-  fastq@1.17.1:
-    dependencies:
-      reusify: 1.0.4
-
-  fd-slicer@1.1.0:
-    dependencies:
-      pend: 1.2.0
-
-  fdir@6.5.0(picomatch@4.0.3):
+  fdir@6.5.0(picomatch@4.0.4):
     optionalDependencies:
-      picomatch: 4.0.3
-
-  fecha@4.2.3: {}
-
-  fetch-blob@3.2.0:
-    dependencies:
-      node-domexception: 1.0.0
-      web-streams-polyfill: 3.3.3
+      picomatch: 4.0.4
 
   fetchdts@0.1.7: {}
 
@@ -14519,37 +11357,13 @@ snapshots:
     dependencies:
       is-unicode-supported: 2.1.0
 
-  file-entry-cache@8.0.0:
-    dependencies:
-      flat-cache: 4.0.1
-
   file-selector@0.6.0:
     dependencies:
       tslib: 2.8.1
 
-  file-uri-to-path@1.0.0: {}
-
-  filelist@1.0.4:
-    dependencies:
-      minimatch: 5.1.6
-
-  fill-range@7.1.1:
-    dependencies:
-      to-regex-range: 5.0.1
-
-  filter-obj@6.1.0: {}
-
-  finalhandler@1.3.2:
+  filelist@1.0.6:
     dependencies:
-      debug: 2.6.9
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      statuses: 2.0.2
-      unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
+      minimatch: 5.1.9
 
   finalhandler@2.1.1:
     dependencies:
@@ -14562,67 +11376,28 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  find-my-way-ts@0.1.6: {}
-
-  find-up-simple@1.0.1: {}
-
-  find-up@5.0.0:
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
-
-  find-up@7.0.0:
-    dependencies:
-      locate-path: 7.2.0
-      path-exists: 5.0.0
-      unicorn-magic: 0.4.0
-
-  flat-cache@4.0.1:
-    dependencies:
-      flatted: 3.3.1
-      keyv: 4.5.4
-
-  flatted@3.3.1: {}
-
-  fn.name@1.1.0: {}
+  find-my-way-ts@0.1.6: {}
 
-  for-each@0.3.3:
+  find-up@5.0.0:
     dependencies:
-      is-callable: 1.2.7
+      locate-path: 6.0.0
+      path-exists: 4.0.0
 
   for-each@0.3.5:
     dependencies:
       is-callable: 1.2.7
 
-  formdata-polyfill@4.0.10:
-    dependencies:
-      fetch-blob: 3.2.0
-
   forwarded-parse@2.1.2: {}
 
   forwarded@0.2.0: {}
 
-  fraction.js@4.3.7: {}
-
-  fresh@0.5.2: {}
-
   fresh@2.0.0: {}
 
-  fsevents@2.3.2:
-    optional: true
-
   fsevents@2.3.3:
     optional: true
 
   function-bind@1.1.2: {}
 
-  function.prototype.name@1.1.6:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.22.5
-      functions-have-names: 1.2.3
-
   function.prototype.name@1.1.8:
     dependencies:
       call-bind: 1.0.8
@@ -14634,12 +11409,9 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
-  gensync@1.0.0-beta.2: {}
+  generator-function@2.0.1: {}
 
-  get-amd-module-type@6.0.1:
-    dependencies:
-      ast-module-types: 6.0.1
-      node-source-walk: 7.0.1
+  gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
 
@@ -14658,92 +11430,54 @@ snapshots:
 
   get-nonce@1.0.1: {}
 
-  get-port-please@3.2.0: {}
-
-  get-port@7.1.0: {}
-
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
-  get-stream@5.2.0:
-    dependencies:
-      pump: 3.0.3
-
-  get-stream@8.0.1: {}
-
   get-stream@9.0.1:
     dependencies:
       '@sec-ant/readable-stream': 0.4.1
       is-stream: 4.0.1
 
-  get-symbol-description@1.0.2:
-    dependencies:
-      call-bind: 1.0.7
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-
   get-symbol-description@1.1.0:
     dependencies:
       call-bound: 1.0.4
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
 
-  get-tsconfig@4.10.1:
+  get-tsconfig@4.13.7:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
-  github-slugger@2.0.0: {}
-
-  glob-parent@5.1.2:
-    dependencies:
-      is-glob: 4.0.3
-
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
+  gifenc@1.0.3: {}
 
   glob-to-regex.js@1.2.0(tslib@2.8.1):
     dependencies:
       tslib: 2.8.1
 
-  glob@13.0.0:
-    dependencies:
-      minimatch: 10.1.1
-      minipass: 7.1.2
-      path-scurry: 2.0.1
-
-  globals@14.0.0: {}
-
-  globals@15.15.0: {}
-
-  globalthis@1.0.3:
+  glob@13.0.6:
     dependencies:
-      define-properties: 1.2.1
+      minimatch: 10.2.5
+      minipass: 7.1.3
+      path-scurry: 2.0.2
 
   globalthis@1.0.4:
     dependencies:
       define-properties: 1.2.1
       gopd: 1.2.0
 
-  globrex@0.1.2: {}
-
   glsl-noise@0.0.0: {}
 
-  gonzales-pe@4.3.0:
-    dependencies:
-      minimist: 1.2.8
-
-  goober@2.1.16(csstype@3.1.3):
+  goober@2.1.18(csstype@3.2.3):
     dependencies:
-      csstype: 3.1.3
+      csstype: 3.2.3
 
   gopd@1.2.0: {}
 
   graceful-fs@4.2.11: {}
 
-  graphemer@1.4.0: {}
+  graphql@16.13.2: {}
 
   gray-matter@4.0.3:
     dependencies:
@@ -14756,28 +11490,14 @@ snapshots:
     dependencies:
       duplexer: 0.1.2
 
-  h3@1.15.4:
+  h3@2.0.1-rc.20:
     dependencies:
-      cookie-es: 1.2.2
-      crossws: 0.3.5
-      defu: 6.1.4
-      destr: 2.0.5
-      iron-webcrypto: 1.2.1
-      node-mock-http: 1.0.3
-      radix3: 1.1.2
-      ufo: 1.6.1
-      uncrypto: 0.1.3
-
-  h3@2.0.0-beta.5:
-    dependencies:
-      cookie-es: 2.0.0
-      fetchdts: 0.1.7
-      rou3: 0.7.10
-      srvx: 0.8.16
+      rou3: 0.8.1
+      srvx: 0.11.16
 
   hachure-fill@0.5.2: {}
 
-  has-bigints@1.0.2: {}
+  has-bigints@1.1.0: {}
 
   has-flag@3.0.0: {}
 
@@ -14787,8 +11507,6 @@ snapshots:
     dependencies:
       es-define-property: 1.0.1
 
-  has-proto@1.0.3: {}
-
   has-proto@1.2.0:
     dependencies:
       dunder-proto: 1.0.1
@@ -14803,15 +11521,6 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
-  hast-util-from-html@2.0.3:
-    dependencies:
-      '@types/hast': 3.0.4
-      devlop: 1.1.0
-      hast-util-from-parse5: 8.0.3
-      parse5: 7.3.0
-      vfile: 6.0.3
-      vfile-message: 4.0.3
-
   hast-util-from-parse5@8.0.3:
     dependencies:
       '@types/hast': 3.0.4
@@ -14823,14 +11532,6 @@ snapshots:
       vfile-location: 5.0.3
       web-namespaces: 2.0.1
 
-  hast-util-heading-rank@3.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-
-  hast-util-is-element@3.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-
   hast-util-parse-selector@4.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -14839,46 +11540,54 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
       '@types/unist': 3.0.3
-      '@ungap/structured-clone': 1.2.0
+      '@ungap/structured-clone': 1.3.0
       hast-util-from-parse5: 8.0.3
-      hast-util-to-parse5: 8.0.0
+      hast-util-to-parse5: 8.0.1
       html-void-elements: 3.0.0
       mdast-util-to-hast: 13.2.1
       parse5: 7.3.0
       unist-util-position: 5.0.0
-      unist-util-visit: 5.0.0
+      unist-util-visit: 5.1.0
       vfile: 6.0.3
       web-namespaces: 2.0.1
       zwitch: 2.0.4
 
-  hast-util-to-html@9.0.5:
+  hast-util-sanitize@5.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@ungap/structured-clone': 1.3.0
+      unist-util-position: 5.0.0
+
+  hast-util-to-jsx-runtime@2.3.6:
     dependencies:
+      '@types/estree': 1.0.8
       '@types/hast': 3.0.4
       '@types/unist': 3.0.3
-      ccount: 2.0.1
       comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
       hast-util-whitespace: 3.0.0
-      html-void-elements: 3.0.0
-      mdast-util-to-hast: 13.2.1
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
       property-information: 7.1.0
       space-separated-tokens: 2.0.2
-      stringify-entities: 4.0.4
-      zwitch: 2.0.4
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
 
-  hast-util-to-parse5@8.0.0:
+  hast-util-to-parse5@8.0.1:
     dependencies:
       '@types/hast': 3.0.4
       comma-separated-tokens: 2.0.3
       devlop: 1.1.0
-      property-information: 6.5.0
+      property-information: 7.1.0
       space-separated-tokens: 2.0.2
       web-namespaces: 2.0.1
       zwitch: 2.0.4
 
-  hast-util-to-string@3.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-
   hast-util-whitespace@3.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -14891,12 +11600,6 @@ snapshots:
       property-information: 7.1.0
       space-separated-tokens: 2.0.2
 
-  hermes-estree@0.25.1: {}
-
-  hermes-parser@0.25.1:
-    dependencies:
-      hermes-estree: 0.25.1
-
   hls.js@1.6.15: {}
 
   hogan.js@3.0.2:
@@ -14904,54 +11607,22 @@ snapshots:
       mkdirp: 0.3.0
       nopt: 1.0.10
 
-  hoist-non-react-statics@3.3.2:
-    dependencies:
-      react-is: 16.13.1
-
-  hono-rate-limiter@0.4.2(hono@4.11.3):
-    dependencies:
-      hono: 4.11.3
-
-  hono@4.11.3: {}
+  hono@4.12.9: {}
 
   hosted-git-info@2.8.9: {}
 
-  hosted-git-info@7.0.2:
-    dependencies:
-      lru-cache: 10.4.3
-
   htm@3.1.1: {}
 
-  html-dom-parser@5.0.8:
-    dependencies:
-      domhandler: 5.0.3
-      htmlparser2: 9.1.0
-
-  html-react-parser@5.1.10(@types/react@19.2.5)(react@19.2.0):
-    dependencies:
-      domhandler: 5.0.3
-      html-dom-parser: 5.0.8
-      react: 19.2.0
-      react-property: 2.0.2
-      style-to-js: 1.1.12
-    optionalDependencies:
-      '@types/react': 19.2.5
+  html-url-attributes@3.0.1: {}
 
   html-void-elements@3.0.0: {}
 
-  htmlparser2@10.0.0:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      domutils: 3.2.2
-      entities: 6.0.1
-
-  htmlparser2@9.1.0:
+  htmlparser2@10.1.0:
     dependencies:
       domelementtype: 2.3.0
       domhandler: 5.0.3
       domutils: 3.2.2
-      entities: 4.5.0
+      entities: 7.0.1
 
   http-errors@2.0.1:
     dependencies:
@@ -14961,8 +11632,6 @@ snapshots:
       statuses: 2.0.2
       toidentifier: 1.0.1
 
-  http-shutdown@1.2.2: {}
-
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
@@ -14970,25 +11639,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  https-proxy-agent@7.0.6:
-    dependencies:
-      agent-base: 7.1.4
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
-  human-signals@5.0.0: {}
-
   human-signals@8.0.1: {}
 
   husky@9.1.7: {}
 
   hyperdyperid@1.2.0: {}
 
-  iconv-lite@0.4.24:
-    dependencies:
-      safer-buffer: 2.1.2
-
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
@@ -14999,63 +11655,56 @@ snapshots:
 
   ieee754@1.2.1: {}
 
-  ignore@5.3.2: {}
-
   ignore@7.0.5: {}
 
-  image-meta@0.2.2: {}
-
-  image-size@2.0.2: {}
-
   immediate@3.0.6: {}
 
-  import-fresh@3.3.0:
+  import-in-the-middle@2.0.6:
     dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
+      acorn: 8.16.0
+      acorn-import-attributes: 1.9.5(acorn@8.16.0)
+      cjs-module-lexer: 2.2.0
+      module-details-from-path: 1.0.4
 
-  import-in-the-middle@2.0.1:
+  import-in-the-middle@3.0.0:
     dependencies:
-      acorn: 8.15.0
-      acorn-import-attributes: 1.9.5(acorn@8.15.0)
-      cjs-module-lexer: 1.4.3
+      acorn: 8.16.0
+      acorn-import-attributes: 1.9.5(acorn@8.16.0)
+      cjs-module-lexer: 2.2.0
       module-details-from-path: 1.0.4
 
-  imurmurhash@0.1.4: {}
-
-  indent-string@5.0.0: {}
-
-  index-to-position@1.2.0: {}
-
   inherits@2.0.4: {}
 
-  inline-style-parser@0.2.3: {}
+  inline-style-parser@0.2.7: {}
 
-  instantsearch-ui-components@0.11.1:
+  instantsearch-ui-components@0.23.0(react@19.2.3):
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@swc/helpers': 0.5.18
+      markdown-to-jsx: 7.7.17(react@19.2.3)
+      zod: 4.3.6
+      zod-to-json-schema: 3.24.6(zod@4.3.6)
+    transitivePeerDependencies:
+      - react
 
-  instantsearch.js@4.78.1(algoliasearch@5.23.4):
+  instantsearch.js@4.93.0(algoliasearch@5.50.0):
     dependencies:
       '@algolia/events': 4.0.1
+      '@swc/helpers': 0.5.18
       '@types/dom-speech-recognition': 0.0.1
       '@types/google.maps': 3.58.1
       '@types/hogan.js': 3.0.5
-      '@types/qs': 6.9.18
-      algoliasearch: 5.23.4
-      algoliasearch-helper: 3.24.3(algoliasearch@5.23.4)
+      '@types/qs': 6.15.0
+      algoliasearch: 5.50.0
+      algoliasearch-helper: 3.28.1(algoliasearch@5.50.0)
       hogan.js: 3.0.2
       htm: 3.1.1
-      instantsearch-ui-components: 0.11.1
-      preact: 10.26.5
-      qs: 6.14.1
+      instantsearch-ui-components: 0.23.0(react@19.2.3)
+      preact: 10.29.0
+      qs: 6.15.0
+      react: 19.2.3
       search-insights: 2.17.3
-
-  internal-slot@1.0.7:
-    dependencies:
-      es-errors: 1.3.0
-      hasown: 2.0.2
-      side-channel: 1.1.0
+      zod: 4.3.6
+      zod-to-json-schema: 3.24.6(zod@4.3.6)
 
   internal-slot@1.1.0:
     dependencies:
@@ -15071,53 +11720,16 @@ snapshots:
     dependencies:
       binary-search-bounds: 2.0.5
 
-  ipaddr.js@1.9.1: {}
+  ip-address@10.1.0: {}
 
-  ipx@3.1.1(@netlify/blobs@10.0.11)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11)):
-    dependencies:
-      '@fastify/accept-negotiator': 2.0.1
-      citty: 0.1.6
-      consola: 3.4.2
-      defu: 6.1.4
-      destr: 2.0.5
-      etag: 1.8.1
-      h3: 1.15.4
-      image-meta: 0.2.2
-      listhen: 1.9.0
-      ofetch: 1.4.1
-      pathe: 2.0.3
-      sharp: 0.34.4
-      svgo: 4.0.0
-      ufo: 1.6.1
-      unstorage: 1.17.1(@netlify/blobs@10.0.11)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11))
-      xss: 1.0.15
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@deno/kv'
-      - '@netlify/blobs'
-      - '@planetscale/database'
-      - '@upstash/redis'
-      - '@vercel/blob'
-      - '@vercel/functions'
-      - '@vercel/kv'
-      - aws4fetch
-      - db0
-      - idb-keyval
-      - ioredis
-      - uploadthing
+  ipaddr.js@1.9.1: {}
 
-  iron-webcrypto@1.2.1: {}
+  is-alphabetical@2.0.1: {}
 
-  is-array-buffer@3.0.4:
+  is-alphanumerical@2.0.1:
     dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.3.0
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
 
   is-array-buffer@3.0.5:
     dependencies:
@@ -15127,26 +11739,17 @@ snapshots:
 
   is-arrayish@0.2.1: {}
 
-  is-async-function@2.0.0:
+  is-async-function@2.1.1:
     dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
       has-tostringtag: 1.0.2
-
-  is-bigint@1.0.4:
-    dependencies:
-      has-bigints: 1.0.2
+      safe-regex-test: 1.1.0
 
   is-bigint@1.1.0:
     dependencies:
-      has-bigints: 1.0.2
-
-  is-binary-path@2.1.0:
-    dependencies:
-      binary-extensions: 2.2.0
-
-  is-boolean-object@1.1.2:
-    dependencies:
-      call-bind: 1.0.7
-      has-tostringtag: 1.0.2
+      has-bigints: 1.1.0
 
   is-boolean-object@1.2.2:
     dependencies:
@@ -15165,75 +11768,48 @@ snapshots:
       get-intrinsic: 1.3.0
       is-typed-array: 1.1.15
 
-  is-date-object@1.0.5:
-    dependencies:
-      has-tostringtag: 1.0.2
-
   is-date-object@1.1.0:
     dependencies:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  is-docker@2.2.1: {}
+  is-decimal@2.0.1: {}
 
-  is-docker@3.0.0: {}
+  is-docker@2.2.1: {}
 
   is-extendable@0.1.1: {}
 
-  is-extglob@2.1.1: {}
-
   is-finalizationregistry@1.1.1:
     dependencies:
       call-bound: 1.0.4
 
   is-fullwidth-code-point@3.0.0: {}
 
-  is-generator-function@1.0.10:
+  is-generator-function@1.1.2:
     dependencies:
+      call-bound: 1.0.4
+      generator-function: 2.0.1
+      get-proto: 1.0.1
       has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
 
-  is-glob@4.0.3:
-    dependencies:
-      is-extglob: 2.1.1
-
-  is-inside-container@1.0.0:
-    dependencies:
-      is-docker: 3.0.0
+  is-hexadecimal@2.0.1: {}
 
   is-map@2.0.3: {}
 
   is-negative-zero@2.0.3: {}
 
-  is-network-error@1.1.0: {}
-
-  is-number-object@1.0.7:
-    dependencies:
-      has-tostringtag: 1.0.2
-
   is-number-object@1.1.1:
     dependencies:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  is-number@7.0.0: {}
-
-  is-path-inside@4.0.0: {}
-
-  is-plain-obj@2.1.0: {}
-
   is-plain-obj@4.1.0: {}
 
-  is-plain-object@5.0.0: {}
-
   is-promise@2.2.2: {}
 
   is-promise@4.0.0: {}
 
-  is-regex@1.1.4:
-    dependencies:
-      call-bind: 1.0.7
-      has-tostringtag: 1.0.2
-
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -15243,125 +11819,74 @@ snapshots:
 
   is-set@2.0.3: {}
 
-  is-shared-array-buffer@1.0.3:
-    dependencies:
-      call-bind: 1.0.7
-
   is-shared-array-buffer@1.0.4:
     dependencies:
       call-bound: 1.0.4
 
-  is-stream@2.0.1: {}
-
-  is-stream@3.0.0: {}
-
   is-stream@4.0.1: {}
 
-  is-string@1.0.7:
-    dependencies:
-      has-tostringtag: 1.0.2
-
   is-string@1.1.1:
     dependencies:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  is-symbol@1.0.4:
-    dependencies:
-      has-symbols: 1.1.0
-
   is-symbol@1.1.1:
     dependencies:
       call-bound: 1.0.4
       has-symbols: 1.1.0
       safe-regex-test: 1.1.0
 
-  is-typed-array@1.1.13:
-    dependencies:
-      which-typed-array: 1.1.15
-
   is-typed-array@1.1.15:
     dependencies:
-      which-typed-array: 1.1.19
+      which-typed-array: 1.1.20
 
   is-unicode-supported@2.1.0: {}
 
-  is-url-superb@4.0.0: {}
-
-  is-url@1.2.4: {}
-
   is-weakmap@2.0.2: {}
 
-  is-weakref@1.0.2:
-    dependencies:
-      call-bind: 1.0.7
-
   is-weakref@1.1.1:
     dependencies:
       call-bound: 1.0.4
 
-  is-weakset@2.0.3:
+  is-weakset@2.0.4:
     dependencies:
-      call-bind: 1.0.8
+      call-bound: 1.0.4
       get-intrinsic: 1.3.0
 
   is-wsl@2.2.0:
     dependencies:
       is-docker: 2.2.1
 
-  is-wsl@3.1.0:
-    dependencies:
-      is-inside-container: 1.0.0
-
-  is64bit@2.0.0:
-    dependencies:
-      system-architecture: 0.1.0
-
   isarray@1.0.0: {}
 
   isarray@2.0.5: {}
 
-  isbot@5.1.31: {}
+  isbot@5.1.37: {}
 
   isexe@2.0.0: {}
 
   isoformat@0.2.1: {}
 
-  iterator.prototype@1.1.5:
-    dependencies:
-      define-data-property: 1.1.4
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      has-symbols: 1.1.0
-      set-function-name: 2.0.2
-
-  its-fine@2.0.0(@types/react@19.2.5)(react@19.2.0):
+  its-fine@2.0.0(@types/react@19.2.14)(react@19.2.3):
     dependencies:
-      '@types/react-reconciler': 0.28.9(@types/react@19.2.5)
-      react: 19.2.0
+      '@types/react-reconciler': 0.28.9(@types/react@19.2.14)
+      react: 19.2.3
     transitivePeerDependencies:
       - '@types/react'
 
   jake@10.9.4:
     dependencies:
       async: 3.2.6
-      filelist: 1.0.4
+      filelist: 1.0.6
       picocolors: 1.1.1
 
-  jiti@2.5.1: {}
+  jiti@2.7.0: {}
 
-  jiti@2.6.0: {}
+  jose@6.2.2: {}
 
-  jose@5.10.0: {}
+  js-cookie@3.0.8: {}
 
-  jose@6.1.3: {}
-
-  jpeg-js@0.4.4: {}
-
-  js-image-generator@1.0.4:
-    dependencies:
-      jpeg-js: 0.4.4
+  js-tokens@10.0.0: {}
 
   js-tokens@4.0.0: {}
 
@@ -15372,45 +11897,21 @@ snapshots:
 
   jsesc@3.1.0: {}
 
-  json-buffer@3.0.1: {}
-
   json-parse-better-errors@1.0.2: {}
 
-  json-parse-even-better-errors@2.3.1:
-    optional: true
-
-  json-schema-traverse@0.4.1: {}
+  json-schema-to-ts@3.1.1:
+    dependencies:
+      '@babel/runtime': 7.29.2
+      ts-algebra: 2.0.0
 
   json-schema-traverse@1.0.0: {}
 
   json-schema-typed@8.0.2: {}
 
-  json-stable-stringify-without-jsonify@1.0.1: {}
+  json-with-bigint@3.5.8: {}
 
   json5@2.2.3: {}
 
-  jsonpointer@5.0.1: {}
-
-  jsonwebtoken@9.0.2:
-    dependencies:
-      jws: 4.0.1
-      lodash.includes: 4.3.0
-      lodash.isboolean: 3.0.3
-      lodash.isinteger: 4.0.4
-      lodash.isnumber: 3.0.3
-      lodash.isplainobject: 4.0.6
-      lodash.isstring: 4.0.1
-      lodash.once: 4.1.1
-      ms: 2.1.3
-      semver: 7.7.3
-
-  jsx-ast-utils@3.3.5:
-    dependencies:
-      array-includes: 3.1.9
-      array.prototype.flat: 1.3.2
-      object.assign: 4.1.7
-      object.values: 1.2.1
-
   jszip@3.10.1:
     dependencies:
       lie: 3.3.0
@@ -15418,147 +11919,101 @@ snapshots:
       readable-stream: 2.3.8
       setimmediate: 1.0.5
 
-  junk@4.0.1: {}
-
-  jwa@2.0.1:
-    dependencies:
-      buffer-equal-constant-time: 1.0.1
-      ecdsa-sig-formatter: 1.0.11
-      safe-buffer: 5.2.1
-
-  jws@4.0.1:
-    dependencies:
-      jwa: 2.0.1
-      safe-buffer: 5.2.1
-
-  jwt-decode@4.0.0: {}
-
-  katex@0.16.22:
+  katex@0.16.44:
     dependencies:
       commander: 8.3.0
 
-  keyv@4.5.4:
-    dependencies:
-      json-buffer: 3.0.1
-
   khroma@2.1.0: {}
 
   kind-of@6.0.3: {}
 
-  kolorist@1.8.0: {}
-
-  kuler@2.0.0: {}
-
-  kysely@0.28.5:
-    optional: true
-
-  lambda-local@2.2.0:
-    dependencies:
-      commander: 10.0.1
-      dotenv: 16.6.1
-      winston: 3.18.3
+  kleur@4.1.5: {}
 
-  langium@3.3.1:
+  langium@4.2.1:
     dependencies:
-      chevrotain: 11.0.3
-      chevrotain-allstar: 0.3.1(chevrotain@11.0.3)
+      chevrotain: 11.1.2
+      chevrotain-allstar: 0.3.1(chevrotain@11.1.2)
       vscode-languageserver: 9.0.1
       vscode-languageserver-textdocument: 1.0.12
-      vscode-uri: 3.0.8
+      vscode-uri: 3.1.0
 
-  language-subtag-registry@0.3.22: {}
-
-  language-tags@1.0.9:
+  launch-editor@2.13.2:
     dependencies:
-      language-subtag-registry: 0.3.22
+      picocolors: 1.1.1
+      shell-quote: 1.8.3
 
   layout-base@1.0.2: {}
 
   layout-base@2.0.1: {}
 
-  lazystream@1.0.1:
-    dependencies:
-      readable-stream: 2.3.8
-
-  leven@3.1.0: {}
-
-  levn@0.4.1:
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-
   lie@3.3.0:
     dependencies:
       immediate: 3.0.6
 
-  lightningcss-darwin-arm64@1.30.1:
+  lightningcss-android-arm64@1.32.0:
     optional: true
 
-  lightningcss-darwin-x64@1.30.1:
+  lightningcss-darwin-arm64@1.32.0:
     optional: true
 
-  lightningcss-freebsd-x64@1.30.1:
+  lightningcss-darwin-x64@1.32.0:
     optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.30.1:
+  lightningcss-freebsd-x64@1.32.0:
     optional: true
 
-  lightningcss-linux-arm64-gnu@1.30.1:
+  lightningcss-linux-arm-gnueabihf@1.32.0:
     optional: true
 
-  lightningcss-linux-arm64-musl@1.30.1:
+  lightningcss-linux-arm64-gnu@1.32.0:
     optional: true
 
-  lightningcss-linux-x64-gnu@1.30.1:
+  lightningcss-linux-arm64-musl@1.32.0:
     optional: true
 
-  lightningcss-linux-x64-musl@1.30.1:
+  lightningcss-linux-x64-gnu@1.32.0:
     optional: true
 
-  lightningcss-win32-arm64-msvc@1.30.1:
+  lightningcss-linux-x64-musl@1.32.0:
     optional: true
 
-  lightningcss-win32-x64-msvc@1.30.1:
+  lightningcss-win32-arm64-msvc@1.32.0:
     optional: true
 
-  lightningcss@1.30.1:
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
     dependencies:
-      detect-libc: 2.0.4
+      detect-libc: 2.1.2
     optionalDependencies:
-      lightningcss-darwin-arm64: 1.30.1
-      lightningcss-darwin-x64: 1.30.1
-      lightningcss-freebsd-x64: 1.30.1
-      lightningcss-linux-arm-gnueabihf: 1.30.1
-      lightningcss-linux-arm64-gnu: 1.30.1
-      lightningcss-linux-arm64-musl: 1.30.1
-      lightningcss-linux-x64-gnu: 1.30.1
-      lightningcss-linux-x64-musl: 1.30.1
-      lightningcss-win32-arm64-msvc: 1.30.1
-      lightningcss-win32-x64-msvc: 1.30.1
-
-  lines-and-columns@1.2.4:
-    optional: true
-
-  listhen@1.9.0:
-    dependencies:
-      '@parcel/watcher': 2.5.1
-      '@parcel/watcher-wasm': 2.5.1
-      citty: 0.1.6
-      clipboardy: 4.0.0
-      consola: 3.4.2
-      crossws: 0.3.5
-      defu: 6.1.4
-      get-port-please: 3.2.0
-      h3: 1.15.4
-      http-shutdown: 1.2.2
-      jiti: 2.6.0
-      mlly: 1.7.4
-      node-forge: 1.3.3
-      pathe: 1.1.2
-      std-env: 3.9.0
-      ufo: 1.6.1
-      untun: 0.1.3
-      uqr: 0.1.2
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
+  lit-element@4.2.2:
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.5.1
+      '@lit/reactive-element': 2.1.2
+      lit-html: 3.3.2
+
+  lit-html@3.3.2:
+    dependencies:
+      '@types/trusted-types': 2.0.7
+
+  lit@3.3.2:
+    dependencies:
+      '@lit/reactive-element': 2.1.2
+      lit-element: 4.2.2
+      lit-html: 3.3.2
 
   load-json-file@4.0.0:
     dependencies:
@@ -15567,50 +12022,13 @@ snapshots:
       pify: 3.0.0
       strip-bom: 3.0.0
 
-  local-pkg@1.1.2:
-    dependencies:
-      mlly: 1.7.4
-      pkg-types: 2.3.0
-      quansync: 0.2.11
-
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
 
-  locate-path@7.2.0:
-    dependencies:
-      p-locate: 6.0.0
-
-  lodash-es@4.17.21: {}
-
-  lodash.castarray@4.4.0: {}
-
-  lodash.includes@4.3.0: {}
-
-  lodash.isboolean@3.0.3: {}
-
-  lodash.isinteger@4.0.4: {}
-
-  lodash.isnumber@3.0.3: {}
-
-  lodash.isplainobject@4.0.6: {}
-
-  lodash.isstring@4.0.1: {}
-
-  lodash.merge@4.6.2: {}
-
-  lodash.once@4.1.1: {}
-
-  lodash@4.17.21: {}
-
-  logform@2.7.0:
-    dependencies:
-      '@colors/colors': 1.6.0
-      '@types/triple-beam': 1.3.5
-      fecha: 4.2.3
-      ms: 2.1.3
-      safe-stable-stringify: 2.5.0
-      triple-beam: 1.4.1
+  lodash-es@4.17.23: {}
+
+  lodash@4.17.23: {}
 
   longest-streak@3.1.0: {}
 
@@ -15618,48 +12036,39 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
-  lru-cache@10.4.3: {}
-
-  lru-cache@11.2.4: {}
+  lru-cache@11.2.7: {}
 
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
 
-  lru-cache@7.18.3: {}
-
-  lucide-react@0.554.0(react@19.2.0):
-    dependencies:
-      react: 19.2.0
-
-  lucide-react@0.561.0(react@19.2.0):
+  lucide-react@1.7.0(react@19.2.3):
     dependencies:
-      react: 19.2.0
-
-  luxon@3.5.0: {}
+      react: 19.2.3
 
-  maath@0.10.8(@types/three@0.182.0)(three@0.182.0):
+  maath@0.10.8(@types/three@0.183.1)(three@0.183.2):
     dependencies:
-      '@types/three': 0.182.0
-      three: 0.182.0
+      '@types/three': 0.183.1
+      three: 0.183.2
 
-  magic-string@0.30.17:
+  magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  magic-string@0.30.19:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
+  markdown-table@3.0.4: {}
 
-  magic-string@0.30.8:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
+  markdown-to-jsx@7.7.17(react@19.2.3):
+    optionalDependencies:
+      react: 19.2.3
 
-  map-obj@5.0.2: {}
+  marked@16.4.2: {}
 
-  markdown-table@3.0.4: {}
+  marked@17.0.6: {}
 
-  marked@15.0.12: {}
+  match-sorter@8.2.0:
+    dependencies:
+      '@babel/runtime': 7.29.2
+      remove-accents: 0.5.0
 
   math-intrinsics@1.1.0: {}
 
@@ -15670,11 +12079,11 @@ snapshots:
       unist-util-is: 6.0.1
       unist-util-visit-parents: 6.0.2
 
-  mdast-util-from-markdown@2.0.2:
+  mdast-util-from-markdown@2.0.3:
     dependencies:
       '@types/mdast': 4.0.4
       '@types/unist': 3.0.3
-      decode-named-character-reference: 1.2.0
+      decode-named-character-reference: 1.3.0
       devlop: 1.1.0
       mdast-util-to-string: 4.0.0
       micromark: 4.0.2
@@ -15699,7 +12108,7 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.2
+      mdast-util-from-markdown: 2.0.3
       mdast-util-to-markdown: 2.1.2
       micromark-util-normalize-identifier: 2.0.1
     transitivePeerDependencies:
@@ -15708,7 +12117,7 @@ snapshots:
   mdast-util-gfm-strikethrough@2.0.0:
     dependencies:
       '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.2
+      mdast-util-from-markdown: 2.0.3
       mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
@@ -15718,7 +12127,7 @@ snapshots:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
       markdown-table: 3.0.4
-      mdast-util-from-markdown: 2.0.2
+      mdast-util-from-markdown: 2.0.3
       mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
@@ -15727,14 +12136,14 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.2
+      mdast-util-from-markdown: 2.0.3
       mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
   mdast-util-gfm@3.1.0:
     dependencies:
-      mdast-util-from-markdown: 2.0.2
+      mdast-util-from-markdown: 2.0.3
       mdast-util-gfm-autolink-literal: 2.0.1
       mdast-util-gfm-footnote: 2.1.0
       mdast-util-gfm-strikethrough: 2.0.0
@@ -15744,6 +12153,45 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   mdast-util-phrasing@4.1.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -15753,12 +12201,12 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
-      '@ungap/structured-clone': 1.2.0
+      '@ungap/structured-clone': 1.3.0
       devlop: 1.1.0
       micromark-util-sanitize-uri: 2.0.1
       trim-lines: 3.0.1
       unist-util-position: 5.0.0
-      unist-util-visit: 5.0.0
+      unist-util-visit: 5.1.0
       vfile: 6.0.3
 
   mdast-util-to-markdown@2.1.2:
@@ -15770,80 +12218,69 @@ snapshots:
       mdast-util-to-string: 4.0.0
       micromark-util-classify-character: 2.0.1
       micromark-util-decode-string: 2.0.1
-      unist-util-visit: 5.0.0
+      unist-util-visit: 5.1.0
       zwitch: 2.0.4
 
   mdast-util-to-string@4.0.0:
     dependencies:
       '@types/mdast': 4.0.4
 
-  mdn-data@2.0.28: {}
-
-  mdn-data@2.12.2: {}
-
-  media-typer@0.3.0: {}
-
   media-typer@1.1.0: {}
 
-  memfs@4.51.1:
+  memfs@4.57.1(tslib@2.8.1):
     dependencies:
+      '@jsonjoy.com/fs-core': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-fsa': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-node': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-builtins': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-to-fsa': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-utils': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-print': 4.57.1(tslib@2.8.1)
+      '@jsonjoy.com/fs-snapshot': 4.57.1(tslib@2.8.1)
       '@jsonjoy.com/json-pack': 1.21.0(tslib@2.8.1)
       '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
       glob-to-regex.js: 1.2.0(tslib@2.8.1)
-      thingies: 2.5.0(tslib@2.8.1)
+      thingies: 2.6.0(tslib@2.8.1)
       tree-dump: 1.1.0(tslib@2.8.1)
       tslib: 2.8.1
 
   memorystream@0.3.1: {}
 
-  merge-descriptors@1.0.3: {}
-
   merge-descriptors@2.0.0: {}
 
-  merge-options@3.0.4:
-    dependencies:
-      is-plain-obj: 2.1.0
-
-  merge-stream@2.0.0: {}
-
-  merge2@1.4.1: {}
-
-  mermaid@11.11.0:
+  mermaid@11.14.0:
     dependencies:
-      '@braintree/sanitize-url': 7.1.1
-      '@iconify/utils': 3.0.1
-      '@mermaid-js/parser': 0.6.2
+      '@braintree/sanitize-url': 7.1.2
+      '@iconify/utils': 3.1.0
+      '@mermaid-js/parser': 1.1.0
       '@types/d3': 7.4.3
+      '@upsetjs/venn.js': 2.0.0
       cytoscape: 3.33.1
       cytoscape-cose-bilkent: 4.1.0(cytoscape@3.33.1)
       cytoscape-fcose: 2.2.0(cytoscape@3.33.1)
       d3: 7.9.0
       d3-sankey: 0.12.3
-      dagre-d3-es: 7.0.11
-      dayjs: 1.11.18
-      dompurify: 3.2.6
-      katex: 0.16.22
+      dagre-d3-es: 7.0.14
+      dayjs: 1.11.20
+      dompurify: 3.3.3
+      katex: 0.16.44
       khroma: 2.1.0
-      lodash-es: 4.17.21
-      marked: 15.0.12
+      lodash-es: 4.17.23
+      marked: 16.4.2
       roughjs: 4.6.6
       stylis: 4.3.6
       ts-dedent: 2.2.0
       uuid: 11.1.0
-    transitivePeerDependencies:
-      - supports-color
 
-  meshline@3.3.1(three@0.182.0):
+  meshline@3.3.1(three@0.183.2):
     dependencies:
-      three: 0.182.0
-
-  meshoptimizer@0.22.0: {}
+      three: 0.183.2
 
-  methods@1.1.2: {}
+  meshoptimizer@1.0.1: {}
 
   micromark-core-commonmark@2.0.3:
     dependencies:
-      decode-named-character-reference: 1.2.0
+      decode-named-character-reference: 1.3.0
       devlop: 1.1.0
       micromark-factory-destination: 2.0.1
       micromark-factory-label: 2.0.1
@@ -15976,7 +12413,7 @@ snapshots:
 
   micromark-util-decode-string@2.0.1:
     dependencies:
-      decode-named-character-reference: 1.2.0
+      decode-named-character-reference: 1.3.0
       micromark-util-character: 2.1.1
       micromark-util-decode-numeric-character-reference: 2.0.2
       micromark-util-symbol: 2.0.1
@@ -16012,9 +12449,9 @@ snapshots:
 
   micromark@4.0.2:
     dependencies:
-      '@types/debug': 4.1.12
+      '@types/debug': 4.1.13
       debug: 4.4.3
-      decode-named-character-reference: 1.2.0
+      decode-named-character-reference: 1.3.0
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.3
       micromark-factory-space: 2.0.1
@@ -16032,54 +12469,39 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  micromatch@4.0.8:
-    dependencies:
-      braces: 3.0.3
-      picomatch: 2.3.1
-
-  mime-db@1.52.0: {}
-
   mime-db@1.54.0: {}
 
-  mime-types@2.1.35:
-    dependencies:
-      mime-db: 1.52.0
-
-  mime-types@3.0.1:
-    dependencies:
-      mime-db: 1.54.0
-
   mime-types@3.0.2:
     dependencies:
       mime-db: 1.54.0
 
-  mime@1.6.0: {}
-
-  mimic-fn@4.0.0: {}
-
-  minimatch@10.1.1:
+  miniflare@4.20260617.1:
     dependencies:
-      '@isaacs/brace-expansion': 5.0.0
+      '@cspotcode/source-map-support': 0.8.1
+      sharp: 0.34.5
+      undici: 7.28.0
+      workerd: 1.20260617.1
+      ws: 8.21.0
+      youch: 4.1.0-beta.10
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
 
-  minimatch@3.1.2:
+  minimatch@10.2.5:
     dependencies:
-      brace-expansion: 2.0.2
+      brace-expansion: 5.0.5
 
-  minimatch@5.1.6:
+  minimatch@3.1.5:
     dependencies:
-      brace-expansion: 2.0.2
+      brace-expansion: 1.1.12
 
-  minimatch@9.0.5:
+  minimatch@5.1.9:
     dependencies:
-      brace-expansion: 2.0.2
+      brace-expansion: 2.0.3
 
   minimist@1.2.8: {}
 
-  minipass@7.1.2: {}
-
-  minizlib@3.0.2:
-    dependencies:
-      minipass: 7.1.2
+  minipass@7.1.3: {}
 
   mkdirp@0.3.0: {}
 
@@ -16087,24 +12509,15 @@ snapshots:
     dependencies:
       minimist: 1.2.8
 
-  mkdirp@3.0.1: {}
-
-  mlly@1.7.4:
+  mlly@1.8.2:
     dependencies:
-      acorn: 8.15.0
+      acorn: 8.16.0
       pathe: 2.0.3
       pkg-types: 1.3.1
-      ufo: 1.6.1
-
-  module-definition@6.0.1:
-    dependencies:
-      ast-module-types: 6.0.1
-      node-source-walk: 7.0.1
+      ufo: 1.6.3
 
   module-details-from-path@1.0.4: {}
 
-  ms@2.0.0: {}
-
   ms@2.1.3: {}
 
   msgpackr-extract@3.0.3:
@@ -16119,91 +12532,38 @@ snapshots:
       '@msgpackr-extract/msgpackr-extract-win32-x64': 3.0.3
     optional: true
 
-  msgpackr@1.11.8:
+  msgpackr@1.11.9:
     optionalDependencies:
       msgpackr-extract: 3.0.3
 
   multipasta@0.2.7: {}
 
-  nanoid@3.3.11: {}
-
-  natural-compare@1.4.0: {}
-
-  negotiator@0.6.3: {}
+  nanoid@3.3.12: {}
 
   negotiator@1.0.0: {}
 
-  netlify-redirector@0.5.0: {}
-
-  next-themes@0.4.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
-    dependencies:
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-
-  node-addon-api@7.1.1: {}
-
-  node-domexception@1.0.0: {}
-
-  node-fetch-native@1.6.7: {}
-
   node-fetch@2.7.0:
     dependencies:
       whatwg-url: 5.0.0
 
-  node-fetch@3.3.2:
-    dependencies:
-      data-uri-to-buffer: 4.0.1
-      fetch-blob: 3.2.0
-      formdata-polyfill: 4.0.10
-
-  node-forge@1.3.3: {}
-
   node-gyp-build-optional-packages@5.2.2:
     dependencies:
       detect-libc: 2.1.2
     optional: true
 
-  node-gyp-build@4.8.4: {}
-
-  node-mock-http@1.0.3: {}
-
-  node-releases@2.0.19: {}
-
-  node-source-walk@7.0.1:
-    dependencies:
-      '@babel/parser': 7.28.4
-
-  node-stream-zip@1.15.0: {}
+  node-releases@2.0.36: {}
 
   nopt@1.0.10:
     dependencies:
       abbrev: 1.1.1
 
-  nopt@8.1.0:
-    dependencies:
-      abbrev: 3.0.1
-
   normalize-package-data@2.5.0:
     dependencies:
       hosted-git-info: 2.8.9
-      resolve: 1.22.10
+      resolve: 1.22.11
       semver: 5.7.2
       validate-npm-package-license: 3.0.4
 
-  normalize-package-data@6.0.2:
-    dependencies:
-      hosted-git-info: 7.0.2
-      semver: 7.7.3
-      validate-npm-package-license: 3.0.4
-
-  normalize-path@2.1.1:
-    dependencies:
-      remove-trailing-separator: 1.1.0
-
-  normalize-path@3.0.0: {}
-
-  normalize-range@0.1.2: {}
-
   normalize-wheel@1.0.1: {}
 
   npm-run-all@4.1.5:
@@ -16212,15 +12572,11 @@ snapshots:
       chalk: 2.4.2
       cross-spawn: 7.0.6
       memorystream: 0.3.1
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       pidtree: 0.3.1
       read-pkg: 3.0.0
-      shell-quote: 1.8.1
-      string.prototype.padend: 3.1.5
-
-  npm-run-path@5.3.0:
-    dependencies:
-      path-key: 4.0.0
+      shell-quote: 1.8.3
+      string.prototype.padend: 3.1.6
 
   npm-run-path@6.0.0:
     dependencies:
@@ -16231,25 +12587,12 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  number-flow@0.4.0:
-    dependencies:
-      esm-env: 1.1.4
-
-  oauth4webapi@3.7.0: {}
-
   object-assign@4.1.1: {}
 
   object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
 
-  object.assign@4.1.5:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      has-symbols: 1.1.0
-      object-keys: 1.1.1
-
   object.assign@4.1.7:
     dependencies:
       call-bind: 1.0.8
@@ -16259,37 +12602,6 @@ snapshots:
       has-symbols: 1.1.0
       object-keys: 1.1.1
 
-  object.entries@1.1.9:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
-  object.fromentries@2.0.8:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-
-  object.values@1.2.1:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
-  obuf@1.1.2: {}
-
-  ofetch@1.4.1:
-    dependencies:
-      destr: 2.0.5
-      node-fetch-native: 1.6.7
-      ufo: 1.6.1
-
-  omit.js@2.0.2: {}
-
   on-finished@2.4.1:
     dependencies:
       ee-first: 1.1.1
@@ -16298,27 +12610,15 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
-  one-time@1.0.0:
-    dependencies:
-      fn.name: 1.1.0
-
-  onetime@6.0.0:
-    dependencies:
-      mimic-fn: 4.0.0
-
   open@7.4.2:
     dependencies:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
-  optionator@0.9.3:
-    dependencies:
-      '@aashutoshrathi/word-wrap': 1.2.6
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
+  openai@6.33.0(ws@8.21.0)(zod@4.3.6):
+    optionalDependencies:
+      ws: 8.21.0
+      zod: 4.3.6
 
   own-keys@1.0.1:
     dependencies:
@@ -16326,80 +12626,125 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
-  p-event@6.0.1:
+  oxc-parser@0.120.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0):
     dependencies:
-      p-timeout: 6.1.4
+      '@oxc-project/types': 0.120.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.120.0
+      '@oxc-parser/binding-android-arm64': 0.120.0
+      '@oxc-parser/binding-darwin-arm64': 0.120.0
+      '@oxc-parser/binding-darwin-x64': 0.120.0
+      '@oxc-parser/binding-freebsd-x64': 0.120.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.120.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.120.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.120.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.120.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.120.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.120.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.120.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.120.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.120.0
+      '@oxc-parser/binding-linux-x64-musl': 0.120.0
+      '@oxc-parser/binding-openharmony-arm64': 0.120.0
+      '@oxc-parser/binding-wasm32-wasi': 0.120.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@oxc-parser/binding-win32-arm64-msvc': 0.120.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.120.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.120.0
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
 
-  p-limit@3.1.0:
+  oxfmt@0.43.0:
     dependencies:
-      yocto-queue: 0.1.0
+      tinypool: 2.1.0
+    optionalDependencies:
+      '@oxfmt/binding-android-arm-eabi': 0.43.0
+      '@oxfmt/binding-android-arm64': 0.43.0
+      '@oxfmt/binding-darwin-arm64': 0.43.0
+      '@oxfmt/binding-darwin-x64': 0.43.0
+      '@oxfmt/binding-freebsd-x64': 0.43.0
+      '@oxfmt/binding-linux-arm-gnueabihf': 0.43.0
+      '@oxfmt/binding-linux-arm-musleabihf': 0.43.0
+      '@oxfmt/binding-linux-arm64-gnu': 0.43.0
+      '@oxfmt/binding-linux-arm64-musl': 0.43.0
+      '@oxfmt/binding-linux-ppc64-gnu': 0.43.0
+      '@oxfmt/binding-linux-riscv64-gnu': 0.43.0
+      '@oxfmt/binding-linux-riscv64-musl': 0.43.0
+      '@oxfmt/binding-linux-s390x-gnu': 0.43.0
+      '@oxfmt/binding-linux-x64-gnu': 0.43.0
+      '@oxfmt/binding-linux-x64-musl': 0.43.0
+      '@oxfmt/binding-openharmony-arm64': 0.43.0
+      '@oxfmt/binding-win32-arm64-msvc': 0.43.0
+      '@oxfmt/binding-win32-ia32-msvc': 0.43.0
+      '@oxfmt/binding-win32-x64-msvc': 0.43.0
+
+  oxlint-tsgolint@0.19.0:
+    optionalDependencies:
+      '@oxlint-tsgolint/darwin-arm64': 0.19.0
+      '@oxlint-tsgolint/darwin-x64': 0.19.0
+      '@oxlint-tsgolint/linux-arm64': 0.19.0
+      '@oxlint-tsgolint/linux-x64': 0.19.0
+      '@oxlint-tsgolint/win32-arm64': 0.19.0
+      '@oxlint-tsgolint/win32-x64': 0.19.0
+
+  oxlint@1.58.0(oxlint-tsgolint@0.19.0):
+    optionalDependencies:
+      '@oxlint/binding-android-arm-eabi': 1.58.0
+      '@oxlint/binding-android-arm64': 1.58.0
+      '@oxlint/binding-darwin-arm64': 1.58.0
+      '@oxlint/binding-darwin-x64': 1.58.0
+      '@oxlint/binding-freebsd-x64': 1.58.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.58.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.58.0
+      '@oxlint/binding-linux-arm64-gnu': 1.58.0
+      '@oxlint/binding-linux-arm64-musl': 1.58.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.58.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.58.0
+      '@oxlint/binding-linux-riscv64-musl': 1.58.0
+      '@oxlint/binding-linux-s390x-gnu': 1.58.0
+      '@oxlint/binding-linux-x64-gnu': 1.58.0
+      '@oxlint/binding-linux-x64-musl': 1.58.0
+      '@oxlint/binding-openharmony-arm64': 1.58.0
+      '@oxlint/binding-win32-arm64-msvc': 1.58.0
+      '@oxlint/binding-win32-ia32-msvc': 1.58.0
+      '@oxlint/binding-win32-x64-msvc': 1.58.0
+      oxlint-tsgolint: 0.19.0
 
-  p-limit@4.0.0:
+  p-limit@3.1.0:
     dependencies:
-      yocto-queue: 1.2.1
+      yocto-queue: 0.1.0
 
   p-limit@6.2.0:
     dependencies:
-      yocto-queue: 1.2.1
+      yocto-queue: 1.2.2
 
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
 
-  p-locate@6.0.0:
-    dependencies:
-      p-limit: 4.0.0
-
-  p-map@7.0.3: {}
-
-  p-retry@6.2.1:
-    dependencies:
-      '@types/retry': 0.12.2
-      is-network-error: 1.1.0
-      retry: 0.13.1
-
-  p-timeout@6.1.4: {}
-
-  p-wait-for@5.0.2:
-    dependencies:
-      p-timeout: 6.1.4
-
   package-json-from-dist@1.0.1: {}
 
-  package-manager-detector@1.3.0: {}
+  package-manager-detector@1.6.0: {}
 
   pako@1.0.11: {}
 
-  parent-module@1.0.1:
+  parse-entities@4.0.2:
     dependencies:
-      callsites: 3.1.0
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.3.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
 
   parse-gitignore@2.0.0: {}
 
-  parse-imports@2.2.1:
-    dependencies:
-      es-module-lexer: 1.7.0
-      slashes: 3.0.12
-
   parse-json@4.0.0:
     dependencies:
-      error-ex: 1.3.2
+      error-ex: 1.3.4
       json-parse-better-errors: 1.0.2
 
-  parse-json@5.2.0:
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      error-ex: 1.3.2
-      json-parse-even-better-errors: 2.3.1
-      lines-and-columns: 1.2.4
-    optional: true
-
-  parse-json@8.3.0:
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      index-to-position: 1.2.0
-      type-fest: 4.41.0
-
   parse-ms@4.0.0: {}
 
   parse5-htmlparser2-tree-adapter@7.1.0:
@@ -16417,73 +12762,48 @@ snapshots:
 
   parseurl@1.3.3: {}
 
+  partial-json@0.1.7: {}
+
   path-data-parser@0.1.0: {}
 
   path-exists@4.0.0: {}
 
-  path-exists@5.0.0: {}
-
   path-key@3.1.1: {}
 
   path-key@4.0.0: {}
 
   path-parse@1.0.7: {}
 
-  path-scurry@2.0.1:
+  path-scurry@2.0.2:
     dependencies:
-      lru-cache: 11.2.4
-      minipass: 7.1.2
+      lru-cache: 11.2.7
+      minipass: 7.1.3
 
-  path-to-regexp@0.1.12: {}
+  path-to-regexp@6.3.0: {}
 
-  path-to-regexp@8.3.0: {}
+  path-to-regexp@8.4.1: {}
 
   path-type@3.0.0:
     dependencies:
       pify: 3.0.0
 
-  path-type@4.0.0:
-    optional: true
-
-  path-type@6.0.0: {}
-
-  pathe@1.1.2: {}
-
   pathe@2.0.3: {}
 
-  pend@1.2.0: {}
-
   pg-int8@1.0.1: {}
 
-  pg-numeric@1.0.2: {}
-
-  pg-protocol@1.10.3: {}
+  pg-protocol@1.13.0: {}
 
   pg-types@2.2.0:
     dependencies:
       pg-int8: 1.0.1
       postgres-array: 2.0.0
-      postgres-bytea: 1.0.0
+      postgres-bytea: 1.0.1
       postgres-date: 1.0.7
       postgres-interval: 1.2.0
 
-  pg-types@4.1.0:
-    dependencies:
-      pg-int8: 1.0.1
-      pg-numeric: 1.0.2
-      postgres-array: 3.0.4
-      postgres-bytea: 3.0.0
-      postgres-date: 2.1.0
-      postgres-interval: 3.0.0
-      postgres-range: 1.1.4
-
   picocolors@1.1.1: {}
 
-  picomatch@2.3.1: {}
-
-  picomatch@4.0.3: {}
-
-  picoquery@2.5.0: {}
+  picomatch@4.0.4: {}
 
   pidtree@0.3.1: {}
 
@@ -16494,23 +12814,9 @@ snapshots:
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
-      mlly: 1.7.4
-      pathe: 2.0.3
-
-  pkg-types@2.3.0:
-    dependencies:
-      confbox: 0.2.2
-      exsolve: 1.0.7
+      mlly: 1.8.2
       pathe: 2.0.3
 
-  playwright-core@1.57.0: {}
-
-  playwright@1.57.0:
-    dependencies:
-      playwright-core: 1.57.0
-    optionalDependencies:
-      fsevents: 2.3.2
-
   pluralize@8.0.0: {}
 
   points-on-curve@0.2.0: {}
@@ -16520,92 +12826,38 @@ snapshots:
       path-data-parser: 0.1.0
       points-on-curve: 0.2.0
 
-  possible-typed-array-names@1.0.0: {}
+  possible-typed-array-names@1.1.0: {}
+
+  postal-mime@2.7.4: {}
 
   postcss-selector-parser@6.0.10:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-value-parser@4.2.0: {}
-
-  postcss-values-parser@6.0.2(postcss@8.5.6):
-    dependencies:
-      color-name: 1.1.4
-      is-url-superb: 4.0.0
-      postcss: 8.5.6
-      quote-unquote: 1.0.0
-
-  postcss@8.5.6:
+  postcss@8.5.15:
     dependencies:
-      nanoid: 3.3.11
+      nanoid: 3.3.12
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
   postgres-array@2.0.0: {}
 
-  postgres-array@3.0.4: {}
-
-  postgres-bytea@1.0.0: {}
-
-  postgres-bytea@3.0.0:
-    dependencies:
-      obuf: 1.1.2
+  postgres-bytea@1.0.1: {}
 
   postgres-date@1.0.7: {}
 
-  postgres-date@2.1.0: {}
-
   postgres-interval@1.2.0:
     dependencies:
       xtend: 4.0.2
 
-  postgres-interval@3.0.0: {}
-
-  postgres-range@1.1.4: {}
-
-  postgres@3.4.7: {}
-
-  posthog-node@5.20.0:
-    dependencies:
-      '@posthog/core': 1.9.1
+  postgres@3.4.8: {}
 
   potpack@1.0.2: {}
 
-  preact-render-to-string@5.2.3(preact@10.11.3):
-    dependencies:
-      preact: 10.11.3
-      pretty-format: 3.8.0
-
-  preact@10.11.3: {}
-
-  preact@10.26.5: {}
+  preact@10.29.0: {}
 
-  precinct@12.2.0:
-    dependencies:
-      '@dependents/detective-less': 5.0.1
-      commander: 12.1.0
-      detective-amd: 6.0.1
-      detective-cjs: 6.0.1
-      detective-es6: 5.0.1
-      detective-postcss: 7.0.1(postcss@8.5.6)
-      detective-sass: 6.0.1
-      detective-scss: 5.0.1
-      detective-stylus: 5.0.1
-      detective-typescript: 14.0.0(typescript@5.9.2)
-      detective-vue2: 2.2.0(typescript@5.9.2)
-      module-definition: 6.0.1
-      node-source-walk: 7.0.1
-      postcss: 8.5.6
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
-
-  prelude-ls@1.2.1: {}
-
-  prettier@3.7.4: {}
-
-  pretty-format@3.8.0: {}
+  prettier@3.8.1: {}
 
   pretty-ms@9.3.0:
     dependencies:
@@ -16613,8 +12865,6 @@ snapshots:
 
   process-nextick-args@2.0.1: {}
 
-  process@0.11.10: {}
-
   progress@2.0.3: {}
 
   promise-worker-transferable@1.0.4:
@@ -16628,8 +12878,6 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
-  property-information@6.5.0: {}
-
   property-information@7.1.0: {}
 
   proxy-addr@2.0.7:
@@ -16639,42 +12887,14 @@ snapshots:
 
   proxy-from-env@1.1.0: {}
 
-  pump@3.0.3:
-    dependencies:
-      end-of-stream: 1.4.5
-      once: 1.4.0
-
-  punycode@2.3.1: {}
-
   pure-rand@6.1.0: {}
 
-  qs@6.14.1:
+  qs@6.15.0:
     dependencies:
       side-channel: 1.1.0
 
-  quansync@0.2.11: {}
-
-  querystringify@2.2.0: {}
-
-  queue-microtask@1.2.3: {}
-
-  quote-unquote@1.0.0: {}
-
-  radix3@1.1.2: {}
-
-  randombytes@2.1.0:
-    dependencies:
-      safe-buffer: 5.2.1
-
   range-parser@1.2.1: {}
 
-  raw-body@2.5.3:
-    dependencies:
-      bytes: 3.1.2
-      http-errors: 2.0.1
-      iconv-lite: 0.4.24
-      unpipe: 1.0.0
-
   raw-body@3.0.2:
     dependencies:
       bytes: 3.1.2
@@ -16682,105 +12902,80 @@ snapshots:
       iconv-lite: 0.7.2
       unpipe: 1.0.0
 
-  react-codemirror-merge@4.25.4(@babel/runtime@7.28.4)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.6.0)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.11)(codemirror@6.0.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
-    dependencies:
-      '@babel/runtime': 7.28.4
-      '@codemirror/merge': 6.11.2
-      '@codemirror/state': 6.5.4
-      '@codemirror/theme-one-dark': 6.1.3
-      '@codemirror/view': 6.39.11
-      '@uiw/react-codemirror': 4.25.4(@babel/runtime@7.28.4)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.2)(@codemirror/search@6.6.0)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.11)(codemirror@6.0.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      codemirror: 6.0.2
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    transitivePeerDependencies:
-      - '@codemirror/autocomplete'
-      - '@codemirror/language'
-      - '@codemirror/lint'
-      - '@codemirror/search'
-
-  react-colorful@5.6.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+  react-colorful@5.6.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  react-dom@19.2.0(react@19.2.0):
+  react-dom@19.2.3(react@19.2.3):
     dependencies:
-      react: 19.2.0
+      react: 19.2.3
       scheduler: 0.27.0
 
-  react-easy-crop@5.5.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+  react-easy-crop@5.5.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       normalize-wheel: 1.0.1
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
       tslib: 2.8.1
 
-  react-instantsearch-core@7.15.5(algoliasearch@5.23.4)(react@19.2.0):
+  react-instantsearch-core@7.29.0(algoliasearch@5.50.0)(react@19.2.3):
     dependencies:
-      '@babel/runtime': 7.24.5
-      algoliasearch: 5.23.4
-      algoliasearch-helper: 3.24.3(algoliasearch@5.23.4)
-      instantsearch.js: 4.78.1(algoliasearch@5.23.4)
-      react: 19.2.0
-      use-sync-external-store: 1.6.0(react@19.2.0)
+      '@swc/helpers': 0.5.18
+      algoliasearch: 5.50.0
+      algoliasearch-helper: 3.28.1(algoliasearch@5.50.0)
+      instantsearch.js: 4.93.0(algoliasearch@5.50.0)
+      react: 19.2.3
+      use-sync-external-store: 1.6.0(react@19.2.3)
+      zod: 4.3.6
+      zod-to-json-schema: 3.24.6(zod@4.3.6)
 
-  react-instantsearch@7.15.5(algoliasearch@5.23.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+  react-instantsearch@7.29.0(algoliasearch@5.50.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      '@babel/runtime': 7.24.5
-      algoliasearch: 5.23.4
-      instantsearch-ui-components: 0.11.1
-      instantsearch.js: 4.78.1(algoliasearch@5.23.4)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-instantsearch-core: 7.15.5(algoliasearch@5.23.4)(react@19.2.0)
+      '@swc/helpers': 0.5.18
+      algoliasearch: 5.50.0
+      instantsearch-ui-components: 0.23.0(react@19.2.3)
+      instantsearch.js: 4.93.0(algoliasearch@5.50.0)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-instantsearch-core: 7.29.0(algoliasearch@5.50.0)(react@19.2.3)
 
   react-is@16.13.1: {}
 
-  react-property@2.0.2: {}
-
-  react-refresh@0.14.2: {}
-
-  react-remove-scroll-bar@2.3.8(@types/react@19.2.5)(react@19.2.0):
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.14)(react@19.2.3):
     dependencies:
-      react: 19.2.0
-      react-style-singleton: 2.2.3(@types/react@19.2.5)(react@19.2.0)
+      react: 19.2.3
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.3)
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  react-remove-scroll@2.6.3(@types/react@19.2.5)(react@19.2.0):
+  react-remove-scroll@2.7.2(@types/react@19.2.14)(react@19.2.3):
     dependencies:
-      react: 19.2.0
-      react-remove-scroll-bar: 2.3.8(@types/react@19.2.5)(react@19.2.0)
-      react-style-singleton: 2.2.3(@types/react@19.2.5)(react@19.2.0)
+      react: 19.2.3
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.14)(react@19.2.3)
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.3)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.2.5)(react@19.2.0)
-      use-sidecar: 1.1.3(@types/react@19.2.5)(react@19.2.0)
+      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.3)
+      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  react-style-singleton@2.2.3(@types/react@19.2.5)(react@19.2.0):
+  react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.3):
     dependencies:
       get-nonce: 1.0.1
-      react: 19.2.0
+      react: 19.2.3
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  react-use-measure@2.1.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+  react-use-measure@2.1.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.2.0
+      react: 19.2.3
     optionalDependencies:
-      react-dom: 19.2.0(react@19.2.0)
+      react-dom: 19.2.3(react@19.2.3)
 
-  react@19.2.0: {}
-
-  read-package-up@11.0.0:
-    dependencies:
-      find-up-simple: 1.0.1
-      read-pkg: 9.0.1
-      type-fest: 4.41.0
+  react@19.2.3: {}
 
   read-pkg@3.0.0:
     dependencies:
@@ -16788,14 +12983,6 @@ snapshots:
       normalize-package-data: 2.5.0
       path-type: 3.0.0
 
-  read-pkg@9.0.1:
-    dependencies:
-      '@types/normalize-package-data': 2.4.4
-      normalize-package-data: 6.0.2
-      parse-json: 8.3.0
-      type-fest: 4.41.0
-      unicorn-magic: 0.4.0
-
   readable-stream@2.3.8:
     dependencies:
       core-util-is: 1.0.3
@@ -16806,57 +12993,20 @@ snapshots:
       string_decoder: 1.1.1
       util-deprecate: 1.0.2
 
-  readable-stream@3.6.2:
-    dependencies:
-      inherits: 2.0.4
-      string_decoder: 1.3.0
-      util-deprecate: 1.0.2
-
-  readable-stream@4.7.0:
-    dependencies:
-      abort-controller: 3.0.0
-      buffer: 6.0.3
-      events: 3.3.0
-      process: 0.11.10
-      string_decoder: 1.3.0
-
-  readdir-glob@1.1.3:
-    dependencies:
-      minimatch: 5.1.6
-
-  readdirp@3.6.0:
-    dependencies:
-      picomatch: 2.3.1
-
   readdirp@4.1.2: {}
 
-  recast@0.23.11:
-    dependencies:
-      ast-types: 0.16.1
-      esprima: 4.0.1
-      source-map: 0.6.1
-      tiny-invariant: 1.3.3
-      tslib: 2.8.1
+  readdirp@5.0.0: {}
 
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       get-intrinsic: 1.3.0
       get-proto: 1.0.1
-      which-builtin-type: 1.2.1
-
-  regenerator-runtime@0.14.1: {}
-
-  regexp.prototype.flags@1.5.2:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-errors: 1.3.0
-      set-function-name: 2.0.1
+      which-builtin-type: 1.2.1
 
   regexp.prototype.flags@1.5.4:
     dependencies:
@@ -16867,28 +13017,11 @@ snapshots:
       gopd: 1.2.0
       set-function-name: 2.0.2
 
-  rehype-autolink-headings@7.1.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@ungap/structured-clone': 1.2.0
-      hast-util-heading-rank: 3.0.0
-      hast-util-is-element: 3.0.0
-      unified: 11.0.5
-      unist-util-visit: 5.0.0
-
-  rehype-callouts@2.1.2:
-    dependencies:
-      '@types/hast': 3.0.4
-      hast-util-from-html: 2.0.3
-      hast-util-is-element: 3.0.0
-      hastscript: 9.0.1
-      unist-util-visit: 5.0.0
+  regexparam@2.0.2: {}
 
-  rehype-parse@9.0.1:
+  rehype-harden@1.1.8:
     dependencies:
-      '@types/hast': 3.0.4
-      hast-util-from-html: 2.0.3
-      unified: 11.0.5
+      unist-util-visit: 5.1.0
 
   rehype-raw@7.0.0:
     dependencies:
@@ -16896,19 +13029,10 @@ snapshots:
       hast-util-raw: 9.1.0
       vfile: 6.0.3
 
-  rehype-slug@6.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      github-slugger: 2.0.0
-      hast-util-heading-rank: 3.0.0
-      hast-util-to-string: 3.0.1
-      unist-util-visit: 5.0.0
-
-  rehype-stringify@10.0.1:
+  rehype-sanitize@6.0.0:
     dependencies:
       '@types/hast': 3.0.4
-      hast-util-to-html: 9.0.5
-      unified: 11.0.5
+      hast-util-sanitize: 5.0.2
 
   remark-gfm@4.0.1:
     dependencies:
@@ -16924,7 +13048,7 @@ snapshots:
   remark-parse@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.2
+      mdast-util-from-markdown: 2.0.3
       micromark-util-types: 2.0.2
       unified: 11.0.5
     transitivePeerDependencies:
@@ -16944,9 +13068,11 @@ snapshots:
       mdast-util-to-markdown: 2.1.2
       unified: 11.0.5
 
-  remove-markdown@0.5.0: {}
+  remend@1.3.0: {}
 
-  remove-trailing-separator@1.1.0: {}
+  remove-accents@0.5.0: {}
+
+  remove-markdown@0.6.3: {}
 
   require-directory@2.1.1: {}
 
@@ -16959,46 +13085,50 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  require-package-name@2.0.1: {}
-
-  requires-port@1.0.0: {}
-
-  resend@6.6.0:
+  resend@6.10.0:
     dependencies:
-      svix: 1.76.1
-
-  resolve-from@4.0.0: {}
-
-  resolve-from@5.0.0: {}
+      postal-mime: 2.7.4
+      svix: 1.88.0
 
   resolve-pkg-maps@1.0.0: {}
 
-  resolve@1.22.10:
-    dependencies:
-      is-core-module: 2.16.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
-  resolve@2.0.0-next.5:
+  resolve@1.22.11:
     dependencies:
       is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  retry@0.13.1: {}
-
-  reusify@1.0.4: {}
-
   rimraf@2.6.3:
     dependencies:
-      glob: 13.0.0
+      glob: 13.0.6
 
-  rimraf@6.1.2:
+  rimraf@6.1.3:
     dependencies:
-      glob: 13.0.0
+      glob: 13.0.6
       package-json-from-dist: 1.0.1
 
-  robust-predicates@3.0.2: {}
+  robust-predicates@3.0.3: {}
+
+  rolldown@1.0.1:
+    dependencies:
+      '@oxc-project/types': 0.130.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.1
+      '@rolldown/binding-darwin-arm64': 1.0.1
+      '@rolldown/binding-darwin-x64': 1.0.1
+      '@rolldown/binding-freebsd-x64': 1.0.1
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.1
+      '@rolldown/binding-linux-arm64-gnu': 1.0.1
+      '@rolldown/binding-linux-arm64-musl': 1.0.1
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.1
+      '@rolldown/binding-linux-s390x-gnu': 1.0.1
+      '@rolldown/binding-linux-x64-gnu': 1.0.1
+      '@rolldown/binding-linux-x64-musl': 1.0.1
+      '@rolldown/binding-openharmony-arm64': 1.0.1
+      '@rolldown/binding-wasm32-wasi': 1.0.1
+      '@rolldown/binding-win32-arm64-msvc': 1.0.1
+      '@rolldown/binding-win32-x64-msvc': 1.0.1
 
   rollup@4.53.3:
     dependencies:
@@ -17028,7 +13158,7 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.53.3
       fsevents: 2.3.3
 
-  rou3@0.7.10: {}
+  rou3@0.8.1: {}
 
   roughjs@4.6.6:
     dependencies:
@@ -17043,23 +13173,12 @@ snapshots:
       depd: 2.0.0
       is-promise: 4.0.0
       parseurl: 1.3.3
-      path-to-regexp: 8.3.0
+      path-to-regexp: 8.4.1
     transitivePeerDependencies:
       - supports-color
 
-  run-parallel@1.2.0:
-    dependencies:
-      queue-microtask: 1.2.3
-
   rw@1.3.3: {}
 
-  safe-array-concat@1.1.2:
-    dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.3.0
-      has-symbols: 1.1.0
-      isarray: 2.0.5
-
   safe-array-concat@1.1.3:
     dependencies:
       call-bind: 1.0.8
@@ -17070,31 +13189,19 @@ snapshots:
 
   safe-buffer@5.1.2: {}
 
-  safe-buffer@5.2.1: {}
-
   safe-push-apply@1.0.0:
     dependencies:
       es-errors: 1.3.0
       isarray: 2.0.5
 
-  safe-regex-test@1.0.3:
-    dependencies:
-      call-bind: 1.0.7
-      es-errors: 1.3.0
-      is-regex: 1.1.4
-
   safe-regex-test@1.1.0:
     dependencies:
       call-bound: 1.0.4
       es-errors: 1.3.0
       is-regex: 1.2.1
 
-  safe-stable-stringify@2.5.0: {}
-
   safer-buffer@2.1.2: {}
 
-  sax@1.4.1: {}
-
   scheduler@0.27.0: {}
 
   search-insights@2.17.3: {}
@@ -17108,27 +13215,7 @@ snapshots:
 
   semver@6.3.1: {}
 
-  semver@7.7.2: {}
-
-  semver@7.7.3: {}
-
-  send@0.19.2:
-    dependencies:
-      debug: 2.6.9
-      depd: 2.0.0
-      destroy: 1.2.0
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      etag: 1.8.1
-      fresh: 0.5.2
-      http-errors: 2.0.1
-      mime: 1.6.0
-      ms: 2.1.3
-      on-finished: 2.4.1
-      range-parser: 1.2.1
-      statuses: 2.0.2
-    transitivePeerDependencies:
-      - supports-color
+  semver@7.7.4: {}
 
   send@1.2.1:
     dependencies:
@@ -17146,36 +13233,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  serialize-javascript@6.0.2:
-    dependencies:
-      randombytes: 2.1.0
-
-  seroval-plugins@1.3.3(seroval@1.3.2):
-    dependencies:
-      seroval: 1.3.2
-
-  seroval-plugins@1.4.0(seroval@1.4.0):
-    dependencies:
-      seroval: 1.4.0
+  serialize-javascript@7.0.5: {}
 
-  seroval-plugins@1.4.0(seroval@1.4.1):
+  seroval-plugins@1.5.4(seroval@1.5.4):
     dependencies:
-      seroval: 1.4.1
-
-  seroval@1.3.2: {}
-
-  seroval@1.4.0: {}
-
-  seroval@1.4.1: {}
+      seroval: 1.5.4
 
-  serve-static@1.16.3:
-    dependencies:
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      parseurl: 1.3.3
-      send: 0.19.2
-    transitivePeerDependencies:
-      - supports-color
+  seroval@1.5.4: {}
 
   serve-static@2.2.1:
     dependencies:
@@ -17195,12 +13259,6 @@ snapshots:
       gopd: 1.2.0
       has-property-descriptors: 1.0.2
 
-  set-function-name@2.0.1:
-    dependencies:
-      define-data-property: 1.1.4
-      functions-have-names: 1.2.3
-      has-property-descriptors: 1.0.2
-
   set-function-name@2.0.2:
     dependencies:
       define-data-property: 1.1.4
@@ -17218,34 +13276,36 @@ snapshots:
 
   setprototypeof@1.2.0: {}
 
-  sharp@0.34.4:
+  sharp@0.34.5:
     dependencies:
-      '@img/colour': 1.0.0
+      '@img/colour': 1.1.0
       detect-libc: 2.1.2
-      semver: 7.7.3
+      semver: 7.7.4
     optionalDependencies:
-      '@img/sharp-darwin-arm64': 0.34.4
-      '@img/sharp-darwin-x64': 0.34.4
-      '@img/sharp-libvips-darwin-arm64': 1.2.3
-      '@img/sharp-libvips-darwin-x64': 1.2.3
-      '@img/sharp-libvips-linux-arm': 1.2.3
-      '@img/sharp-libvips-linux-arm64': 1.2.3
-      '@img/sharp-libvips-linux-ppc64': 1.2.3
-      '@img/sharp-libvips-linux-s390x': 1.2.3
-      '@img/sharp-libvips-linux-x64': 1.2.3
-      '@img/sharp-libvips-linuxmusl-arm64': 1.2.3
-      '@img/sharp-libvips-linuxmusl-x64': 1.2.3
-      '@img/sharp-linux-arm': 0.34.4
-      '@img/sharp-linux-arm64': 0.34.4
-      '@img/sharp-linux-ppc64': 0.34.4
-      '@img/sharp-linux-s390x': 0.34.4
-      '@img/sharp-linux-x64': 0.34.4
-      '@img/sharp-linuxmusl-arm64': 0.34.4
-      '@img/sharp-linuxmusl-x64': 0.34.4
-      '@img/sharp-wasm32': 0.34.4
-      '@img/sharp-win32-arm64': 0.34.4
-      '@img/sharp-win32-ia32': 0.34.4
-      '@img/sharp-win32-x64': 0.34.4
+      '@img/sharp-darwin-arm64': 0.34.5
+      '@img/sharp-darwin-x64': 0.34.5
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+      '@img/sharp-libvips-linux-arm': 1.2.4
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+      '@img/sharp-libvips-linux-x64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+      '@img/sharp-linux-arm': 0.34.5
+      '@img/sharp-linux-arm64': 0.34.5
+      '@img/sharp-linux-ppc64': 0.34.5
+      '@img/sharp-linux-riscv64': 0.34.5
+      '@img/sharp-linux-s390x': 0.34.5
+      '@img/sharp-linux-x64': 0.34.5
+      '@img/sharp-linuxmusl-arm64': 0.34.5
+      '@img/sharp-linuxmusl-x64': 0.34.5
+      '@img/sharp-wasm32': 0.34.5
+      '@img/sharp-win32-arm64': 0.34.5
+      '@img/sharp-win32-ia32': 0.34.5
+      '@img/sharp-win32-x64': 0.34.5
 
   shebang-command@2.0.0:
     dependencies:
@@ -17253,12 +13313,7 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shell-quote@1.8.1: {}
-
-  shiki@1.10.3:
-    dependencies:
-      '@shikijs/core': 1.10.3
-      '@types/hast': 3.0.4
+  shell-quote@1.8.3: {}
 
   side-channel-list@1.0.0:
     dependencies:
@@ -17290,18 +13345,16 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
-  slashes@3.0.12: {}
-
-  solid-js@1.9.9:
+  solid-js@1.9.12:
     dependencies:
-      csstype: 3.1.3
-      seroval: 1.3.2
-      seroval-plugins: 1.3.3(seroval@1.3.2)
+      csstype: 3.2.3
+      seroval: 1.5.4
+      seroval-plugins: 1.5.4(seroval@1.5.4)
 
-  sonner@2.0.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+  sonner@2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
   source-map-explorer@2.5.3:
     dependencies:
@@ -17310,9 +13363,9 @@ snapshots:
       convert-source-map: 1.9.0
       ejs: 3.1.10
       escape-html: 1.0.3
-      glob: 13.0.0
+      glob: 13.0.6
       gzip-size: 6.0.0
-      lodash: 4.17.21
+      lodash: 4.17.23
       open: 7.4.2
       source-map: 0.7.6
       temp: 0.9.4
@@ -17334,49 +13387,72 @@ snapshots:
   spdx-correct@3.2.0:
     dependencies:
       spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.16
+      spdx-license-ids: 3.0.23
 
-  spdx-exceptions@2.3.0: {}
+  spdx-exceptions@2.5.0: {}
 
   spdx-expression-parse@3.0.1:
     dependencies:
-      spdx-exceptions: 2.3.0
-      spdx-license-ids: 3.0.16
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.23
 
-  spdx-license-ids@3.0.16: {}
+  spdx-license-ids@3.0.23: {}
 
   sprintf-js@1.0.3: {}
 
   sqids@0.3.0: {}
 
-  srvx@0.8.16: {}
-
-  srvx@0.9.8: {}
+  srvx@0.11.16: {}
 
-  stack-trace@0.0.10: {}
+  standardwebhooks@1.0.0:
+    dependencies:
+      '@stablelib/base64': 1.0.1
+      fast-sha256: 1.3.0
 
-  stats-gl@2.4.2(@types/three@0.182.0)(three@0.182.0):
+  stats-gl@2.4.2(@types/three@0.183.1)(three@0.183.2):
     dependencies:
-      '@types/three': 0.182.0
-      three: 0.182.0
+      '@types/three': 0.183.1
+      three: 0.183.2
 
   stats.js@0.17.0: {}
 
   statuses@2.0.2: {}
 
-  std-env@3.9.0: {}
-
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
-  streamx@2.23.0:
+  streamdown@2.5.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      clsx: 2.1.1
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      marked: 17.0.6
+      mermaid: 11.14.0
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      rehype-harden: 1.1.8
+      rehype-raw: 7.0.0
+      rehype-sanitize: 6.0.0
+      remark-gfm: 4.0.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      remend: 1.3.0
+      tailwind-merge: 3.5.0
+      unified: 11.0.5
+      unist-util-visit: 5.1.0
+      unist-util-visit-parents: 6.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  streamx@2.25.0:
     dependencies:
       events-universal: 1.0.1
       fast-fifo: 1.3.2
-      text-decoder: 1.2.3
+      text-decoder: 1.2.7
     transitivePeerDependencies:
+      - bare-abort-controller
       - react-native-b4a
 
   string-width@4.2.3:
@@ -17385,38 +13461,12 @@ snapshots:
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
-  string.prototype.includes@2.0.1:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-
-  string.prototype.matchall@4.0.12:
+  string.prototype.padend@3.1.6:
     dependencies:
       call-bind: 1.0.8
-      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
+      es-abstract: 1.24.1
       es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      gopd: 1.2.0
-      has-symbols: 1.1.0
-      internal-slot: 1.1.0
-      regexp.prototype.flags: 1.5.4
-      set-function-name: 2.0.2
-      side-channel: 1.1.0
-
-  string.prototype.padend@3.1.5:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.22.5
-
-  string.prototype.repeat@1.0.0:
-    dependencies:
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
 
   string.prototype.trim@1.2.10:
     dependencies:
@@ -17424,22 +13474,10 @@ snapshots:
       call-bound: 1.0.4
       define-data-property: 1.1.4
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-object-atoms: 1.1.1
       has-property-descriptors: 1.0.2
 
-  string.prototype.trim@1.2.8:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.22.5
-
-  string.prototype.trimend@1.0.7:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.22.5
-
   string.prototype.trimend@1.0.9:
     dependencies:
       call-bind: 1.0.8
@@ -17447,12 +13485,6 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
-  string.prototype.trimstart@1.0.7:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.22.5
-
   string.prototype.trimstart@1.0.8:
     dependencies:
       call-bind: 1.0.8
@@ -17463,10 +13495,6 @@ snapshots:
     dependencies:
       safe-buffer: 5.1.2
 
-  string_decoder@1.3.0:
-    dependencies:
-      safe-buffer: 5.2.1
-
   stringify-entities@4.0.4:
     dependencies:
       character-entities-html4: 2.1.0
@@ -17480,24 +13508,20 @@ snapshots:
 
   strip-bom@3.0.0: {}
 
-  strip-final-newline@3.0.0: {}
-
   strip-final-newline@4.0.0: {}
 
-  strip-json-comments@3.1.1: {}
-
-  style-mod@4.1.3: {}
-
-  style-to-js@1.1.12:
+  style-to-js@1.1.21:
     dependencies:
-      style-to-object: 1.0.6
+      style-to-object: 1.0.14
 
-  style-to-object@1.0.6:
+  style-to-object@1.0.14:
     dependencies:
-      inline-style-parser: 0.2.3
+      inline-style-parser: 0.2.7
 
   stylis@4.3.6: {}
 
+  supports-color@10.2.2: {}
+
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
@@ -17508,92 +13532,72 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  suspend-react@0.1.3(react@19.2.0):
-    dependencies:
-      react: 19.2.0
-
-  svgo@4.0.0:
+  suspend-react@0.1.3(react@19.2.3):
     dependencies:
-      commander: 11.1.0
-      css-select: 5.1.0
-      css-tree: 3.1.0
-      css-what: 6.1.0
-      csso: 5.0.5
-      picocolors: 1.1.1
-      sax: 1.4.1
+      react: 19.2.3
 
-  svix@1.76.1:
+  svix@1.88.0:
     dependencies:
-      '@stablelib/base64': 1.0.1
-      '@types/node': 22.19.3
-      es6-promise: 4.2.8
-      fast-sha256: 1.3.0
-      url-parse: 1.5.10
+      standardwebhooks: 1.0.0
       uuid: 10.0.0
 
-  system-architecture@0.1.0: {}
+  tabbable@6.4.0: {}
 
-  tabbable@6.2.0: {}
+  tailwind-merge@3.5.0: {}
 
-  tailwind-merge@1.14.0: {}
+  tailwindcss@4.2.2: {}
 
-  tailwind-merge@3.4.0: {}
+  tailwindcss@4.3.0: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@4.1.11):
+  takumi-js@2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      tailwindcss: 4.1.11
-
-  tailwindcss@4.1.11: {}
+      '@takumi-rs/core': 2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@takumi-rs/helpers': 2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@takumi-rs/wasm': 2.0.0-beta.12(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+    transitivePeerDependencies:
+      - react
+      - react-dom
 
-  tapable@2.2.2: {}
+  tapable@2.3.3: {}
 
-  tar-stream@3.1.7:
+  tar-stream@3.1.8:
     dependencies:
-      b4a: 1.7.3
+      b4a: 1.8.0
+      bare-fs: 4.5.6
       fast-fifo: 1.3.2
-      streamx: 2.23.0
+      streamx: 2.25.0
     transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
       - react-native-b4a
 
-  tar@7.4.3:
+  teex@1.0.1:
     dependencies:
-      '@isaacs/fs-minipass': 4.0.1
-      chownr: 3.0.0
-      minipass: 7.1.2
-      minizlib: 3.0.2
-      mkdirp: 3.0.1
-      yallist: 5.0.0
+      streamx: 2.25.0
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
 
   temp@0.9.4:
     dependencies:
       mkdirp: 0.5.6
       rimraf: 2.6.3
 
-  terser@5.44.0:
+  text-decoder@1.2.7:
     dependencies:
-      '@jridgewell/source-map': 0.3.11
-      acorn: 8.15.0
-      commander: 2.20.3
-      source-map-support: 0.5.21
-    optional: true
-
-  text-decoder@1.2.3:
-    dependencies:
-      b4a: 1.7.3
+      b4a: 1.8.0
     transitivePeerDependencies:
       - react-native-b4a
 
-  text-hex@1.0.0: {}
-
-  thingies@2.5.0(tslib@2.8.1):
+  thingies@2.6.0(tslib@2.8.1):
     dependencies:
       tslib: 2.8.1
 
-  three-mesh-bvh@0.8.3(three@0.182.0):
+  three-mesh-bvh@0.8.3(three@0.183.2):
     dependencies:
-      three: 0.182.0
+      three: 0.183.2
 
-  three-stdlib@2.36.1(three@0.182.0):
+  three-stdlib@2.36.1(three@0.183.2):
     dependencies:
       '@types/draco3d': 1.4.10
       '@types/offscreencanvas': 2019.7.3
@@ -17601,42 +13605,32 @@ snapshots:
       draco3d: 1.5.7
       fflate: 0.6.10
       potpack: 1.0.2
-      three: 0.182.0
-
-  three@0.182.0: {}
-
-  tiny-invariant@1.3.3: {}
-
-  tiny-warning@1.0.3: {}
+      three: 0.183.2
 
-  tinyexec@1.0.1: {}
+  three@0.183.2: {}
 
-  tinyglobby@0.2.14:
-    dependencies:
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
+  tinyexec@1.0.4: {}
 
   tinyglobby@0.2.15:
     dependencies:
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
 
-  tmp-promise@3.0.3:
+  tinyglobby@0.2.16:
     dependencies:
-      tmp: 0.2.5
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
+  tinypool@2.1.0: {}
 
-  tmp@0.2.5: {}
+  tldts-core@7.4.2: {}
 
-  to-regex-range@5.0.1:
+  tldts@7.4.2:
     dependencies:
-      is-number: 7.0.0
+      tldts-core: 7.4.2
 
   toidentifier@1.0.1: {}
 
-  toml@3.0.0: {}
-
-  tomlify-j0.4@3.0.0: {}
-
   tr46@0.0.3: {}
 
   tree-dump@1.1.0(tslib@2.8.1):
@@ -17645,73 +13639,51 @@ snapshots:
 
   trim-lines@3.0.1: {}
 
-  triple-beam@1.4.1: {}
-
-  troika-three-text@0.52.4(three@0.182.0):
+  troika-three-text@0.52.4(three@0.183.2):
     dependencies:
       bidi-js: 1.0.3
-      three: 0.182.0
-      troika-three-utils: 0.52.4(three@0.182.0)
+      three: 0.183.2
+      troika-three-utils: 0.52.4(three@0.183.2)
       troika-worker-utils: 0.52.0
       webgl-sdf-generator: 1.1.1
 
-  troika-three-utils@0.52.4(three@0.182.0):
+  troika-three-utils@0.52.4(three@0.183.2):
     dependencies:
-      three: 0.182.0
+      three: 0.183.2
 
   troika-worker-utils@0.52.0: {}
 
   trough@2.2.0: {}
 
-  ts-api-utils@2.1.0(typescript@5.9.2):
-    dependencies:
-      typescript: 5.9.2
+  ts-algebra@2.0.0: {}
 
   ts-dedent@2.2.0: {}
 
-  tsconfck@3.1.4(typescript@5.9.2):
-    optionalDependencies:
-      typescript: 5.9.2
-
   tslib@2.8.1: {}
 
   tsx@4.21.0:
     dependencies:
-      esbuild: 0.27.0
-      get-tsconfig: 4.10.1
+      esbuild: 0.27.4
+      get-tsconfig: 4.13.7
     optionalDependencies:
       fsevents: 2.3.3
 
-  tunnel-rat@0.1.2(@types/react@19.2.5)(react@19.2.0):
+  tunnel-rat@0.1.2(@types/react@19.2.14)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3)):
     dependencies:
-      zustand: 4.5.2(@types/react@19.2.5)(react@19.2.0)
+      zustand: 5.0.12(@types/react@19.2.14)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
     transitivePeerDependencies:
       - '@types/react'
       - immer
       - react
-
-  type-check@0.4.0:
-    dependencies:
-      prelude-ls: 1.2.1
+      - use-sync-external-store
 
   type-fest@4.41.0: {}
 
-  type-is@1.6.18:
-    dependencies:
-      media-typer: 0.3.0
-      mime-types: 2.1.35
-
   type-is@2.0.1:
     dependencies:
       content-type: 1.0.5
       media-typer: 1.1.0
-      mime-types: 3.0.1
-
-  typed-array-buffer@1.0.2:
-    dependencies:
-      call-bind: 1.0.7
-      es-errors: 1.3.0
-      is-typed-array: 1.1.13
+      mime-types: 3.0.2
 
   typed-array-buffer@1.0.3:
     dependencies:
@@ -17719,14 +13691,6 @@ snapshots:
       es-errors: 1.3.0
       is-typed-array: 1.1.15
 
-  typed-array-byte-length@1.0.1:
-    dependencies:
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.2.0
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
-
   typed-array-byte-length@1.0.3:
     dependencies:
       call-bind: 1.0.8
@@ -17735,15 +13699,6 @@ snapshots:
       has-proto: 1.2.0
       is-typed-array: 1.1.15
 
-  typed-array-byte-offset@1.0.2:
-    dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.2.0
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
-
   typed-array-byte-offset@1.0.4:
     dependencies:
       available-typed-arrays: 1.0.7
@@ -17754,62 +13709,35 @@ snapshots:
       is-typed-array: 1.1.15
       reflect.getprototypeof: 1.0.10
 
-  typed-array-length@1.0.5:
-    dependencies:
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.2.0
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
-      possible-typed-array-names: 1.0.0
-
   typed-array-length@1.0.7:
     dependencies:
       call-bind: 1.0.8
       for-each: 0.3.5
       gopd: 1.2.0
       is-typed-array: 1.1.15
-      possible-typed-array-names: 1.0.0
+      possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
-  typescript-eslint@8.48.1(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2):
-    dependencies:
-      '@typescript-eslint/eslint-plugin': 8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2))(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2)
-      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2)
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1(jiti@2.6.0))(typescript@5.9.2)
-      eslint: 9.39.1(jiti@2.6.0)
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
-
-  typescript@5.9.2: {}
-
-  ufo@1.6.1: {}
+  typescript@6.0.2: {}
 
-  ulid@3.0.1: {}
-
-  unbox-primitive@1.0.2:
-    dependencies:
-      call-bind: 1.0.7
-      has-bigints: 1.0.2
-      has-symbols: 1.1.0
-      which-boxed-primitive: 1.0.2
+  ufo@1.6.3: {}
 
   unbox-primitive@1.1.0:
     dependencies:
       call-bound: 1.0.4
-      has-bigints: 1.0.2
+      has-bigints: 1.1.0
       has-symbols: 1.1.0
       which-boxed-primitive: 1.1.1
 
-  uncrypto@0.1.3: {}
+  undici-types@7.18.2: {}
 
-  undici-types@6.21.0: {}
+  undici@7.24.7: {}
 
-  undici-types@7.10.0: {}
+  undici@7.28.0: {}
 
-  undici@7.14.0: {}
+  unenv@2.0.0-rc.24:
+    dependencies:
+      pathe: 2.0.3
 
   unicorn-magic@0.4.0: {}
 
@@ -17840,61 +13768,29 @@ snapshots:
       '@types/unist': 3.0.3
       unist-util-is: 6.0.1
 
-  unist-util-visit@5.0.0:
+  unist-util-visit@5.1.0:
     dependencies:
       '@types/unist': 3.0.3
       unist-util-is: 6.0.1
       unist-util-visit-parents: 6.0.2
 
-  universal-user-agent@6.0.0: {}
-
-  unixify@1.0.0:
-    dependencies:
-      normalize-path: 2.1.1
+  universal-user-agent@7.0.3: {}
 
   unpipe@1.0.0: {}
 
-  unplugin@1.0.1:
-    dependencies:
-      acorn: 8.15.0
-      chokidar: 3.6.0
-      webpack-sources: 3.3.3
-      webpack-virtual-modules: 0.5.0
-
-  unplugin@2.3.10:
+  unplugin@3.0.0:
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      acorn: 8.15.0
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       webpack-virtual-modules: 0.6.2
 
-  unstorage@1.17.1(@netlify/blobs@10.0.11)(uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11)):
-    dependencies:
-      anymatch: 3.1.3
-      chokidar: 4.0.3
-      destr: 2.0.5
-      h3: 1.15.4
-      lru-cache: 10.4.3
-      node-fetch-native: 1.6.7
-      ofetch: 1.4.1
-      ufo: 1.6.1
-    optionalDependencies:
-      '@netlify/blobs': 10.0.11
-      uploadthing: 7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11)
-
-  untun@0.1.3:
-    dependencies:
-      citty: 0.1.6
-      consola: 3.4.2
-      pathe: 1.1.2
-
-  update-browserslist-db@1.1.2(browserslist@4.24.4):
+  update-browserslist-db@1.2.3(browserslist@4.28.2):
     dependencies:
-      browserslist: 4.24.4
+      browserslist: 4.28.2
       escalade: 3.2.0
       picocolors: 1.1.1
 
-  uploadthing@7.7.4(express@5.2.1)(h3@1.15.4)(tailwindcss@4.1.11):
+  uploadthing@7.7.4(express@5.2.1)(tailwindcss@4.2.2):
     dependencies:
       '@effect/platform': 0.90.3(effect@3.17.7)
       '@standard-schema/spec': 1.0.0-beta.4
@@ -17903,74 +13799,50 @@ snapshots:
       effect: 3.17.7
     optionalDependencies:
       express: 5.2.1
-      h3: 1.15.4
-      tailwindcss: 4.1.11
-
-  uqr@0.1.2: {}
+      tailwindcss: 4.2.2
 
-  uri-js@4.4.1:
+  use-callback-ref@1.3.3(@types/react@19.2.14)(react@19.2.3):
     dependencies:
-      punycode: 2.3.1
-
-  url-parse@1.5.10:
-    dependencies:
-      querystringify: 2.2.0
-      requires-port: 1.0.0
-
-  urlpattern-polyfill@10.1.0: {}
-
-  urlpattern-polyfill@8.0.2: {}
-
-  use-callback-ref@1.3.3(@types/react@19.2.5)(react@19.2.0):
-    dependencies:
-      react: 19.2.0
+      react: 19.2.3
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  use-isomorphic-layout-effect@1.2.1(@types/react@19.2.5)(react@19.2.0):
+  use-isomorphic-layout-effect@1.2.1(@types/react@19.2.14)(react@19.2.3):
     dependencies:
-      react: 19.2.0
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.5
+      '@types/react': 19.2.14
 
-  use-sidecar@1.1.3(@types/react@19.2.5)(react@19.2.0):
+  use-sidecar@1.1.3(@types/react@19.2.14)(react@19.2.3):
     dependencies:
       detect-node-es: 1.1.0
-      react: 19.2.0
+      react: 19.2.3
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.5
-
-  use-sync-external-store@1.2.0(react@19.2.0):
-    dependencies:
-      react: 19.2.0
+      '@types/react': 19.2.14
 
-  use-sync-external-store@1.6.0(react@19.2.0):
+  use-sync-external-store@1.6.0(react@19.2.3):
     dependencies:
-      react: 19.2.0
+      react: 19.2.3
 
   util-deprecate@1.0.2: {}
 
   utility-types@3.11.0: {}
 
-  utils-merge@1.0.1: {}
-
   uuid@10.0.0: {}
 
   uuid@11.1.0: {}
 
-  valibot@1.2.0(typescript@5.9.2):
+  valibot@1.3.1(typescript@6.0.2):
     optionalDependencies:
-      typescript: 5.9.2
+      typescript: 6.0.2
 
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
-  validate-npm-package-name@5.0.1: {}
-
   vary@1.1.2: {}
 
   vfile-location@5.0.3:
@@ -17988,50 +13860,26 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite-bundle-analyzer@1.2.1: {}
-
-  vite-tsconfig-paths@5.0.1(typescript@5.9.2)(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)):
-    dependencies:
-      debug: 4.4.3
-      globrex: 0.1.2
-      tsconfck: 3.1.4(typescript@5.9.2)
-    optionalDependencies:
-      vite: 7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  vite-tsconfig-paths@5.1.4(typescript@5.9.2)(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)):
-    dependencies:
-      debug: 4.4.3
-      globrex: 0.1.2
-      tsconfck: 3.1.4(typescript@5.9.2)
-    optionalDependencies:
-      vite: 7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
+  vite-bundle-analyzer@1.3.6: {}
 
-  vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1):
+  vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0):
     dependencies:
-      esbuild: 0.25.10
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
-      postcss: 8.5.6
-      rollup: 4.53.3
-      tinyglobby: 0.2.15
+      lightningcss: 1.32.0
+      picomatch: 4.0.4
+      postcss: 8.5.15
+      rolldown: 1.0.1
+      tinyglobby: 0.2.16
     optionalDependencies:
-      '@types/node': 24.3.0
+      '@types/node': 25.5.0
+      esbuild: 0.27.4
       fsevents: 2.3.3
-      jiti: 2.6.0
-      lightningcss: 1.30.1
-      terser: 5.44.0
+      jiti: 2.7.0
       tsx: 4.21.0
-      yaml: 2.8.1
+      yaml: 2.9.0
 
-  vitefu@1.1.1(vite@7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)):
+  vitefu@1.1.3(vite@8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)):
     optionalDependencies:
-      vite: 7.1.7(@types/node@24.3.0)(jiti@2.6.0)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.21.0)(yaml@2.8.1)
+      vite: 8.0.13(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)
 
   vscode-jsonrpc@8.2.0: {}
 
@@ -18048,24 +13896,16 @@ snapshots:
     dependencies:
       vscode-languageserver-protocol: 3.17.5
 
-  vscode-uri@3.0.8: {}
-
-  w3c-keyname@2.2.8: {}
+  vscode-uri@3.1.0: {}
 
   web-namespaces@2.0.1: {}
 
-  web-streams-polyfill@3.3.3: {}
-
   webgl-constants@1.1.1: {}
 
   webgl-sdf-generator@1.1.1: {}
 
   webidl-conversions@3.0.1: {}
 
-  webpack-sources@3.3.3: {}
-
-  webpack-virtual-modules@0.5.0: {}
-
   webpack-virtual-modules@0.6.2: {}
 
   whatwg-encoding@3.1.1:
@@ -18079,14 +13919,6 @@ snapshots:
       tr46: 0.0.3
       webidl-conversions: 3.0.1
 
-  which-boxed-primitive@1.0.2:
-    dependencies:
-      is-bigint: 1.0.4
-      is-boolean-object: 1.1.2
-      is-number-object: 1.0.7
-      is-string: 1.0.7
-      is-symbol: 1.0.4
-
   which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0
@@ -18100,33 +13932,25 @@ snapshots:
       call-bound: 1.0.4
       function.prototype.name: 1.1.8
       has-tostringtag: 1.0.2
-      is-async-function: 2.0.0
+      is-async-function: 2.1.1
       is-date-object: 1.1.0
       is-finalizationregistry: 1.1.1
-      is-generator-function: 1.0.10
+      is-generator-function: 1.1.2
       is-regex: 1.2.1
       is-weakref: 1.1.1
       isarray: 2.0.5
       which-boxed-primitive: 1.1.1
       which-collection: 1.0.2
-      which-typed-array: 1.1.19
+      which-typed-array: 1.1.20
 
   which-collection@1.0.2:
     dependencies:
       is-map: 2.0.3
       is-set: 2.0.3
       is-weakmap: 2.0.2
-      is-weakset: 2.0.3
-
-  which-typed-array@1.1.15:
-    dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.2.0
-      has-tostringtag: 1.0.2
+      is-weakset: 2.0.4
 
-  which-typed-array@1.1.19:
+  which-typed-array@1.1.20:
     dependencies:
       available-typed-arrays: 1.0.7
       call-bind: 1.0.8
@@ -18140,25 +13964,33 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
-  winston-transport@4.9.0:
-    dependencies:
-      logform: 2.7.0
-      readable-stream: 3.6.2
-      triple-beam: 1.4.1
-
-  winston@3.18.3:
-    dependencies:
-      '@colors/colors': 1.6.0
-      '@dabh/diagnostics': 2.0.8
-      async: 3.2.6
-      is-stream: 2.0.1
-      logform: 2.7.0
-      one-time: 1.0.0
-      readable-stream: 3.6.2
-      safe-stable-stringify: 2.5.0
-      stack-trace: 0.0.10
-      triple-beam: 1.4.1
-      winston-transport: 4.9.0
+  workerd@1.20260617.1:
+    optionalDependencies:
+      '@cloudflare/workerd-darwin-64': 1.20260617.1
+      '@cloudflare/workerd-darwin-arm64': 1.20260617.1
+      '@cloudflare/workerd-linux-64': 1.20260617.1
+      '@cloudflare/workerd-linux-arm64': 1.20260617.1
+      '@cloudflare/workerd-windows-64': 1.20260617.1
+
+  worktop@0.7.3:
+    dependencies:
+      regexparam: 2.0.2
+
+  wrangler@4.103.0:
+    dependencies:
+      '@cloudflare/kv-asset-handler': 0.5.0
+      '@cloudflare/unenv-preset': 2.16.1(unenv@2.0.0-rc.24)(workerd@1.20260617.1)
+      blake3-wasm: 2.1.5
+      esbuild: 0.28.1
+      miniflare: 4.20260617.1
+      path-to-regexp: 6.3.0
+      unenv: 2.0.0-rc.24
+      workerd: 1.20260617.1
+    optionalDependencies:
+      fsevents: 2.3.3
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
 
   wrap-ansi@7.0.0:
     dependencies:
@@ -18168,24 +14000,18 @@ snapshots:
 
   wrappy@1.0.2: {}
 
-  write-file-atomic@5.0.1:
-    dependencies:
-      imurmurhash: 0.1.4
-      signal-exit: 4.1.0
+  ws@8.20.0: {}
+
+  ws@8.21.0: {}
 
-  xmlbuilder2@4.0.1:
+  xmlbuilder2@4.0.3:
     dependencies:
       '@oozcitak/dom': 2.0.2
       '@oozcitak/infra': 2.0.2
       '@oozcitak/util': 10.0.0
       js-yaml: 3.14.2
 
-  xss@1.0.15:
-    dependencies:
-      commander: 2.20.3
-      cssfilter: 0.0.10
-
-  xstate@5.25.0: {}
+  xstate@5.30.0: {}
 
   xtend@4.0.2: {}
 
@@ -18193,17 +14019,12 @@ snapshots:
 
   yallist@3.1.1: {}
 
-  yallist@5.0.0: {}
+  yaml@2.8.3: {}
 
-  yaml@1.10.2:
-    optional: true
-
-  yaml@2.8.1: {}
+  yaml@2.9.0: {}
 
   yargs-parser@20.2.9: {}
 
-  yargs-parser@21.1.1: {}
-
   yargs@16.2.0:
     dependencies:
       cliui: 7.0.4
@@ -18214,56 +14035,43 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 20.2.9
 
-  yargs@17.7.2:
-    dependencies:
-      cliui: 8.0.1
-      escalade: 3.2.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      string-width: 4.2.3
-      y18n: 5.0.8
-      yargs-parser: 21.1.1
-
-  yauzl@2.10.0:
-    dependencies:
-      buffer-crc32: 0.2.13
-      fd-slicer: 1.1.0
-
   yocto-queue@0.1.0: {}
 
-  yocto-queue@1.2.1: {}
+  yocto-queue@1.2.2: {}
 
   yoctocolors@2.1.2: {}
 
-  zip-stream@6.0.1:
+  youch-core@0.3.3:
     dependencies:
-      archiver-utils: 5.0.2
-      compress-commons: 6.0.2
-      readable-stream: 4.7.0
+      '@poppinss/exception': 1.2.3
+      error-stack-parser-es: 1.0.5
 
-  zod-to-json-schema@3.25.1(zod@4.3.5):
+  youch@4.1.0-beta.10:
     dependencies:
-      zod: 4.3.5
+      '@poppinss/colors': 4.1.6
+      '@poppinss/dumper': 0.6.5
+      '@speed-highlight/core': 1.2.17
+      cookie: 1.1.1
+      youch-core: 0.3.3
 
-  zod-validation-error@4.0.2(zod@4.3.5):
+  zod-to-json-schema@3.24.6(zod@4.3.6):
     dependencies:
-      zod: 4.3.5
+      zod: 4.3.6
+
+  zod-to-json-schema@3.25.2(zod@4.3.6):
+    dependencies:
+      zod: 4.3.6
 
   zod@3.25.76: {}
 
-  zod@4.3.5: {}
+  zod@4.3.6: {}
 
-  zustand@4.5.2(@types/react@19.2.5)(react@19.2.0):
-    dependencies:
-      use-sync-external-store: 1.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.5
-      react: 19.2.0
+  zod@4.4.3: {}
 
-  zustand@5.0.9(@types/react@19.2.5)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0)):
+  zustand@5.0.12(@types/react@19.2.14)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3)):
     optionalDependencies:
-      '@types/react': 19.2.5
-      react: 19.2.0
-      use-sync-external-store: 1.6.0(react@19.2.0)
+      '@types/react': 19.2.14
+      react: 19.2.3
+      use-sync-external-store: 1.6.0(react@19.2.3)
 
   zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 000000000..e6add2aca
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,35 @@
+packages:
+  - .
+
+overrides:
+  cross-spawn: '>=6.0.6'
+  glob: '>=10.5.0'
+  node-forge: '>=1.3.2'
+  jws: '>=3.2.3'
+  qs: '>=6.14.1'
+  tunnel-rat>zustand: '5.0.12'
+  js-yaml: '^3.14.2'
+  minimatch@3.1.5>brace-expansion: '1.1.12'
+  minimatch@5.1.9>brace-expansion: '2.0.3'
+  minimatch@10.2.5>brace-expansion: '5.0.5'
+  npm-run-path@6.0.0>unicorn-magic: '0.4.0'
+
+allowBuilds:
+  # root dependency
+  esbuild: true
+
+  # watcher optional native package
+  '@parcel/watcher': false
+
+  # uploadthing optional native package
+  msgpackr-extract: false
+
+  #@takumi-rs
+  sharp: false
+
+  # sentry
+  '@sentry/cli': false
+  '@fingerprintjs/fingerprintjs-pro-react': false
+
+  # Cloudflare Workers local runtime
+  workerd: true
diff --git a/public/_headers b/public/_headers
index 66f2a0769..45563990d 100644
--- a/public/_headers
+++ b/public/_headers
@@ -3,3 +3,8 @@
 /builder
   Cross-Origin-Opener-Policy: same-origin
   Cross-Origin-Embedder-Policy: require-corp
+
+# Vite emits fingerprinted files under /assets, so they can be cached until
+# the filename changes on a later build.
+/assets/*
+  Cache-Control: public, max-age=31536000, immutable
diff --git a/public/ads.txt b/public/ads.txt
deleted file mode 100644
index 29b08a1e0..000000000
--- a/public/ads.txt
+++ /dev/null
@@ -1,1086 +0,0 @@
-google.com, pub-9403278435468733, DIRECT, f08c47fec0942fa0
-
-# Publift Fuse ads.txt #
-# Updated: May 2025 #
-# Contact: support@publift.com #
-
-
-# Publift
-
-OWNERDOMAIN=tanstack.com
-MANAGERDOMAIN=publift.com
-publift.com, 01JWZKNBMKR1DGYV29FBB2260R, DIRECT
-
-
-# Google
-
-google.com, pub-5884294479391638, RESELLER, f08c47fec0942fa0
-
-
-# Pubmatic
-
-pubmatic.com, 156230, RESELLER, 5d62403b186f2ace
-pubmatic.com, 156762, RESELLER, 5d62403b186f2ace
-pubmatic.com, 156974, RESELLER, 5d62403b186f2ace
-pubmatic.com, 158221, RESELLER, 5d62403b186f2ace
-
-# AppNexus
-
-appnexus.com, 9623, DIRECT, f5ab79cb980f11d1
-
-# Rubicon
-
-rubiconproject.com, 17348, RESELLER, 0bfd66d529a55807
-rubiconproject.com, 11504, RESELLER, 0bfd66d529a55807
-rubiconproject.com, 20884, DIRECT, 0bfd66d529a55807
-
-# OpenX
-
-openx.com, 540717835, RESELLER, 6a698e2ec38604c6
-openx.com, 540938618, DIRECT, 6a698e2ec38604c6
-
-
-# Criteo
-
-criteo.com, B-056930, DIRECT, 9fac4a4a87c2a44f
-themediagrid.com, U9IDX4, DIRECT, 35d5010d7789b49d
-
-
-# Teads
-
-teads.tv, 19340, DIRECT, 15a9c44f6d26cbe1
-
-# Index Exchange
-
-indexexchange.com, 186270, RESELLER
-indexexchange.com, 186407, DIRECT
-
-
-
-# Unruly
-
-video.unrulymedia.com, UNRX-PUB-a34a2f68-d5c2-4289-a7e3-5414a99e7e7f, DIRECT
-indexexchange.com, 182257, RESELLER
-appnexus.com, 6849, RESELLER
-rubiconproject.com, 15268, RESELLER
-video.unrulymedia.com, 197409739, DIRECT
-rhythmone.com, 197409739, DIRECT, a670c89d4a324e47
-
-
-# Sovrn
-
-sovrn.com, 267370, DIRECT, fafdf38b16bf6b2b
-lijit.com, 267370, DIRECT, fafdf38b16bf6b2b #SOVRN
-lijit.com, 267370-eb, DIRECT, fafdf38b16bf6b2b #SOVRN
-openx.com, 538959099, RESELLER, 6a698e2ec38604c6
-pubmatic.com, 137711, RESELLER, 5d62403b186f2ace
-pubmatic.com, 156212, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 17960, RESELLER, 0bfd66d529a55807
-appnexus.com, 1019, RESELLER, f5ab79cb980f11d1
-video.unrulymedia.com, 2444764291, RESELLER
-contextweb.com, 558511, RESELLER, 89ff185a4c4e857c
-krushmedia.com, AJxF6R572a9M6CaTvK, RESELLER,
-inmobi.com, b01aa06531c543d8a5fb9982f60afb00, RESELLER, 83e75a7ae333ca9d
-motorik.io, 100463, RESELLER
-smaato.com, 1100056344, RESELLER, 07bcf65f187117b4
-smartadserver.com, 4926, RESELLER, 060d053dcf45cbf3
-
-
-# GumGum
-
-gumgum.com,13654,RESELLER,ffdef49475d318a9
-rubiconproject.com,23434,RESELLER,0bfd66d529a55807
-pubmatic.com,157897,RESELLER,5d62403b186f2ace
-appnexus.com,2758,RESELLER,f5ab79cb980f11d1
-contextweb.com,558355,RESELLER,89ff185a4c4e857c
-openx.com,537149485,RESELLER,6a698e2ec38604c6
-improvedigital.com,1884,RESELLER
-admanmedia.com,799,RESELLER
-admedia.com,AM1606,RESELLER
-
-
-# TripleLift
-
-triplelift.com, 3084, DIRECT, 6c33edb13117fd86
-triplelift.com, 3084-EB, DIRECT, 6c33edb13117fd86
-
-
-
-# Mobfox
-
-uis.mobfox.com, 82221, DIRECT, 5529a3d1f59865be
-
-xandr.com, 2850, RESELLER, f5ab79cb980f11d1
-openx.com, 539249210, RESELLER, 6a698e2ec38604c6
-pubmatic.com, 156451, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 17494, RESELLER, 0bfd66d529a55807
-xad.com,589, RESELLER, 81cbf0a75a5e0e9a
-inmobi.com, a5e661acdc384e91a79a58eb3418e99f, RESELLER, 83e75a7ae333ca9d
-sonobi.com, 71169bd4a5, RESELLER, d1a215d9eb5aee9e
-loopme.com,11446,RESELLER,6c8d5f95897a5a3b
-vidoomy.com, 6858194, RESELLER
-adform.com, 2742, RESELLER
-
-# Amazon
-
-aps.amazon.com,8b48e249-e9e6-4a52-8b48-396ea93403e8,DIRECT
-indexexchange.com,192410,RESELLER,50b1c356f2c5c8fc
-pubmatic.com,160006,RESELLER,5d62403b186f2ace
-pubmatic.com,160096,RESELLER,5d62403b186f2ace
-rubiconproject.com,18020,RESELLER,0bfd66d529a55807
-pubmatic.com,157150,RESELLER,5d62403b186f2ace
-openx.com,540191398,RESELLER,6a698e2ec38604c6
-appnexus.com,1908,RESELLER,f5ab79cb980f11d1
-smaato.com,1100044650,RESELLER,07bcf65f187117b4
-ad-generation.jp,12474,RESELLER,7f4ea9029ac04e53
-districtm.io,100962,RESELLER,3fd707be9c4527c3
-yieldmo.com,2719019867620450718,RESELLER
-appnexus.com,3663,RESELLER,f5ab79cb980f11d1
-rhythmone.com,1654642120,RESELLER,a670c89d4a324e47
-yahoo.com,55029,RESELLER,e1a5b5b6e3255540
-gumgum.com,14141,RESELLER,ffdef49475d318a9
-admanmedia.com,726,RESELLER
-sharethrough.com,7144eb80,RESELLER,d53b998a7bd4ecd2
-emxdgt.com,2009,RESELLER,1e1d41537f7cad7f
-appnexus.com,1356,RESELLER,f5ab79cb980f11d1
-contextweb.com,562541,RESELLER,89ff185a4c4e857c
-smartadserver.com,4125,RESELLER,060d053dcf45cbf3
-inmobi.com,4fcebe6f9a714a95b066cfdbd5d354d4,DIRECT,83e75a7ae333ca9d
-themediagrid.com,JTQKMP,RESELLER,35d5010d7789b49d
-sovrn.com,375328,RESELLER,fafdf38b16bf6b2b
-lijit.com,375328,RESELLER,fafdf38b16bf6b2b
-beachfront.com,14804,RESELLER,e2541279e8e2ca4d
-improvedigital.com,2050,RESELLER
-mintegral.com,10043,RESELLER,0aeed750c80d6423
-sonobi.com,7f5fa520f8,RESELLER,d1a215d9eb5aee9e
-onetag.com,770a440e65869c2,RESELLER
-appnexus.com,9623,DIRECT,f5ab79cb980f11d1
-triplelift.com,2985,DIRECT,6c33edb13117fd86
-xandr.com, 9623, RESELLER, f5ab79cb980f11d1
-pubmatic.com, 162256, RESELLER, 5d62403b186f2ace
-media.net,8CUZ1MK22,RESELLER
-openx.com, 557939709, RESELLER, 6a698e2ec38604c6
-openx.com,557939709,DIRECT,6a698e2ec38604c6
-triplelift.com, 12396, RESELLER, 6c33edb13117fd86
-risecodes.com,63832beef8189a00015cb6d3,RESELLER
-inmobi.com,4fcebe6f9a714a95b066cfdbd5d354d4,DIRECT,83e75a7ae333ca9d
-mediago.io,045ac24b888bcf59a09731e7f0f2084f,RESELLER
-adyoulike.com,7463c359225e043c111036d7a29affa5,RESELLER
-minutemedia.com,01gya4708ddm,RESELLER
-smartadserver.com,4191,DIRECT,060d053dcf45cbf3
-visiblemeasures.com,1052,RESELLER
-admedia.com,AM1601,RESELLER
-undertone.com,4205,RESELLER,d954590d0cb265b9
-imds.tv,AM1601,RESELLER,ae6c32151e71f19d
-nativo.com,5711,RESELLER,59521ca7cc5e9fee
-kargo.com,8824,RESELLER
-start.io,123111883,RESELLER
-connectad.io,152,DIRECT,85ac85a30c93b3e5
-imds.tv,82606,RESELLER,ae6c32151e71f19d
-onlinemediasolutions.com,21020,RESELLER,b3868b187e4b6402
-supply.colossusssp.com,836,RESELLER,6c5b49d96ec1b458
-opera.com,pub12058951686464,RESELLER,55a0c5fd61378de3
-uis.mobfox.com,93308,RESELLER,5529a3d1f59865be
-opera.com,pub12058951686464,RESELLER,55a0c5fd61378de3
-yahoo.com, 55029, RESELLER, e1a5b5b6e3255540
-districtm.io, 100962, RESELLER, 3fd707be9c4527c3
-
-# ConnectAd Core
-
-connectad.io, 152, RESELLER, 85ac85a30c93b3e5
-adform.com, 768, RESELLER, 9f5210a2f0999e32
-rubiconproject.com, 26800, RESELLER, 0bfd66d529a55807
-
-# ConnectAd Extended
-pubmatic.com, 156077, RESELLER, 5d62403b186f2ace
-openx.com, 537145117, RESELLER, 6a698e2ec38604c6
-lijit.com, 244287, RESELLER, fafdf38b16bf6b2b
-openx.com, 538959099, RESELLER, 6a698e2ec38604c6
-pubmatic.com, 137711, RESELLER, 5d62403b186f2ace
-pubmatic.com, 156212, RESELLER, 5d62403b186f2ace
-appnexus.com, 1019, RESELLER, f5ab79cb980f11d1
-video.unrulymedia.com, 736135793, RESELLER
-
-
-# Improve Digital
-
-appnexus.com, 13231, RESELLER
-improvedigital.com, 2030, DIRECT
-inskinmedia.com, 126450, DIRECT, 7c0396763f74a3d5
-indexexchange.com, 184665, RESELLER, 50b1c356f2c5c8fc
-
-
-
-# AdaptMX
-
-appnexus.com, 12290, RESELLER, f5ab79cb980f11d1
-rubiconproject.com, 17960, RESELLER, 0bfd66d529a55807
-adform.com, 2865, RESELLER
-appnexus.com, 9393, RESELLER, f5ab79cb980f11d1
-indexexchange.com, 191503, RESELLER, 50b1c356f2c5c8fc
-openx.com, 559680764, RESELLER, 6a698e2ec38604c6
-rubiconproject.com, 23844, RESELLER, 0bfd66d529a55807
-smartadserver.com, 3056, RESELLER, 060d053dcf45cbf3
-yahoo.com, 49648, RESELLER
-pubmatic.com, 161527, RESELLER, 5d62403b186f2ace
-pubmatic.com, 158355, RESELLER, 5d62403b186f2ace
-lijit.com, 260380, RESELLER, fafdf38b16bf6b2b
-appnexus.com, 11924, RESELLER, f5ab79cb980f11d1
-amxrtb.com, 105199401, DIRECT
-appnexus.com, 11786, RESELLER
-
-
-# Kargo
-
-kargo.com, 8538, DIRECT
-indexexchange.com, 184081, RESELLER
-
-# 33across
-
-33across.com, 0010b00002QKn54AAD, DIRECT, bbea06d9c4d2853c #33Across #hb #tag
-
-# 33Across - Rubicon
-rubiconproject.com, 16414, RESELLER, 0bfd66d529a55807 #33Across #hb #tag
-rubiconproject.com, 21642, RESELLER, 0bfd66d529a55807 #33Across #hb #tag #viewable
-rubiconproject.com, 21434, RESELLER, 0bfd66d529a55807 #33Across #tag #ebda
-rubiconproject.com, 21720, RESELLER, 0bfd66d529a55807 #33Across EU #hb #tag
-
-# 33Across - PubMatic
-pubmatic.com, 156423, RESELLER, 5d62403b186f2ace #33Across #hb #tag #video
-pubmatic.com, 158136, RESELLER, 5d62403b186f2ace #33Across EU #hb #tag
-pubmatic.com, 158569, RESELLER, 5d62403b186f2ace #33Across #tag #ebda
-
-# 33Across - AppNexus
-appnexus.com, 10239, RESELLER, f5ab79cb980f11d1 #33Across #hb #tag #viewable
-appnexus.com, 1001, RESELLER, f5ab79cb980f11d1 #33Across #tag
-appnexus.com, 3135, RESELLER, f5ab79cb980f11d1 #33Across #tag
-
-# 33Across - OpenX
-openx.com, 537120563, RESELLER, 6a698e2ec38604c6 #33Across #hb #tag #video
-openx.com, 539392223, RESELLER, 6a698e2ec38604c6 #33Across #tag #ebda
-
-# 33Across - Verizon Media
-yahoo.com, 57289, RESELLER,  e1a5b5b6e3255540 #33Across #hb #tag
-
-# 33Across - Index Exchange
-indexexchange.com, 190966, RESELLER, 50b1c356f2c5c8fc #33Across #tag #ebda
-indexexchange.com, 191973, RESELLER, 50b1c356f2c5c8fc #33Across #hb #tag #viewable #video
-
-# 33Across - Conversant Media
-conversantmedia.com, 100141, RESELLER, 03113cd04947736d #hb #tag #video
-appnexus.com, 4052, RESELLER #33Across #hb
-contextweb.com, 561998, RESELLER, 89ff185a4c4e857c #33Across #hb
-openx.com, 540031703, RESELLER, 6a698e2ec38604c6 #33Across #hb
-pubmatic.com, 158100, RESELLER, 5d62403b186f2ace #33Across #hb
-yahoo.com, 55771, RESELLER, e1a5b5b6e3255540 #33Across #hb
-lijit.com, 411121, RESELLER, fafdf38b16bf6b2b #SOVRN #hb
-admanmedia.com, 2050, RESELLER #hb
-Appnerve.com, 187287, RESELLER #hb
-rubiconproject.com, 23644, RESELLER, 0bfd66d529a55807 #hb
-smartyads.com,300045, RESELLER, fd2bde0ff2e62c5d #hb
-e-planning.net,1bf7b5d803f178c4,RESELLER,c1ba615865ed87b2
-video.unrulymedia.com, 645663965, RESELLER
-
-# 33Across - Google
-google.com, pub-9557089510405422, RESELLER, f08c47fec0942fa0 #33Across #tag
-
-# 33Across - Sonobi
-sonobi.com, a416546bb7, RESELLER, d1a215d9eb5aee9e  #33Across #tag #ebda
-
-# 33Across - Amazon
-aps.amazon.com, 2840f06c-5d89-4853-a03e-3bfa567dd33c, DIRECT #33Across #tag
-pubmatic.com, 157150, RESELLER, 5d62403b186f2ace #33Across #tag
-openx.com, 540191398, RESELLER, 6a698e2ec38604c6 #33Across #tag
-rubiconproject.com, 18020, RESELLER, 0bfd66d529a55807 #33Across #tag
-appnexus.com, 1908, RESELLER, f5ab79cb980f11d1 #33Across #tag
-adtech.com, 12068, RESELLER, e1a5b5b6e3255540 #33Across #tag
-appnexus.com, 3663, RESELLER, f5ab79cb980f11d1 #33Across #tag
-yahoo.com, 55029, RESELLER, e1a5b5b6e3255540 #33Across #tag
-
-# 33Across - Pulsepoint
-contextweb.com, 561516, RESELLER, 89ff185a4c4e857c #33Across #hb #tag
-
-# 33Across - TripleLift
-triplelift.com, 12503, RESELLER, 6c33edb13117fd86
-
-# 33Across - Acuity Ads
-admanmedia.com, 1055, DIRECT
-visiblemeasures.com, 1055, DIRECT
-yahoo.com, 59674, RESELLER, e1a5b5b6e3255540
-openx.com, 540866936, RESELLER, 6a698e2ec38604c6
-rubiconproject.com, 14558, RESELLER, 0bfd66d529a55807
-
-# 33Across - LoopMe
-loopme.com,11575,RESELLER,6c8d5f95897a5a3b
-xandr.com, 13799, RESELLER
-sovrn.com, 400766, RESELLER, fafdf38b16bf6b2b
-lijit.com, 400766, RESELLER, fafdf38b16bf6b2b
-freewheel.tv, 1137745, RESELLER
-freewheel.tv, 1138513, RESELLER
-sharethrough.com, 6qlnf8SY, RESELLER, d53b998a7bd4ecd2
-triplelift.com, 12158, RESELLER, 6c33edb13117fd86
-rubiconproject.com, 20744, RESELLER, 0bfd66d529a55807
-pubmatic.com, 158154, RESELLER, 5d62403b186f2ace
-sonobi.com, b43e9530e7, RESELLER, d1a215d9eb5aee9e
-
-# 33Across - Unruly
-video.unrulymedia.com, 2439829435, DIRECT
-
-# 33Across - OpenWeb
-adyoulike.com, 1f301d3bcd723f5c372070bdfd142940, RESELLER
-loopme.com, 11480, RESELLER, 6c8d5f95897a5a3b
-pubmatic.com, 160925, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 20736, RESELLER, 0bfd66d529a55807
-spotim.market, sp_AYL2022, RESELLER, 077e5f709d15bdbb
-betweendigital.com, 44774, RESELLER
-lijit.com, 408376, RESELLER, fafdf38b16bf6b2b #SOVRN
-lijit.com, 408376-eb, RESELLER, fafdf38b16bf6b2b #SOVRN
-smartadserver.com, 4144, RESELLER
-onetag.com, 7a07370227fc000, RESELLER
-admixer.net, 5e789729-1e92-41ca-8b4f-987c6edae9fe, RESELLER
-nativo.com, 5848, RESELLER, 59521ca7cc5e9fee
-33across.com, 0015a00003HljHyAAJ, RESELLER
-video.unrulymedia.com, 297618916, RESELLER
-risecodes.com, 64c7a4acd6298f0001a7d867, RESELLER
-
-# 33Across - IQZone
-iqzone.com,IQ299,DIRECT
-zetaglobal.net,998,DIRECT
-lijit.com,456186,DIRECT,fafdf38b16bf6b2b
-video.unrulymedia.com,5336134699710583737,RESELLER
-freewheel.tv,1599302,RESELLER
-freewheel.tv,1599303,RESELLER
-
-# 33Across - Krush Media
-krushmedia.com, AJxF6R615a9M6CaTvK, RESELLER
-google.com, pub-7734005103835923, DIRECT, f08c47fec0942fa0
-loopme.com,12858,RESELLER,6c8d5f95897a5a3b
-onetag.com, 848879e82ca5940, DIRECT
-freewheel.tv, 1522514, RESELLER
-freewheel.tv, 1522338, RESELLER
-Media.net, 8CUT87EOU, DIRECT
-
-# 33Across - BetweenX
-betweendigital.com, 43962, DIRECT
-lijit.com, 273644, RESELLER, fafdf38b16bf6b2b
-contextweb.com, 562827, RESELLER, 89ff185a4c4e857c
-pubmatic.com, 159668, RESELLER, 5d62403b186f2ace
-onetag.com, 5d1628750185ace, RESELLER
-smartadserver.com, 4467, RESELLER
-richaudience.com, 4AoWPWXbVu, RESELLER
-
-# Inmobi
-
-inmobi.com, 4fcebe6f9a714a95b066cfdbd5d354d4, RESELLER, 83e75a7ae333ca9d
-rubiconproject.com, 11726, RESELLER, 0bfd66d529a55807
-rubiconproject.com, 12266, RESELLER, 0bfd66d529a55807
-conversantmedia.com, 40881, RESELLER, 03113cd04947736d
-loopme.com, 9724, RESELLER, 6c8d5f95897a5a3b
-lijit.com, 502742, RESELLER, fafdf38b16bf6b2b
-pubmatic.com, 156931, RESELLER, 5d62403b186f2ace
-pubmatic.com, 157097, RESELLER, 5d62403b186f2ace
-Blis.com, 33, RESELLER, 61453ae19a4b73f4
-verve.com, 5897, RESELLER, 0c8f5958fc2d6270
-blis.com, 33, RESELLER, 61453ae19a4b73f4
-mintegral.com, 10003, RESELLER
-pubnative.net, 1006951, RESELLER, d641df8625486a7b
-algorix.co, 54190, RESELLER, 5b394c12fea27a1d
-pubmatic.com, 159035, RESELLER, 5d62403b186f2ace
-yeahmobi.com, 5135082, RESELLER
-outbrain.com, 00bba279fec6daa01a0cb6fdccb023f0d5, RESELLER
-zmaticoo.com, 5135082, RESELLER
-zmaticoo.com, 113149, RESELLER
-rubiconproject.com, 20744, RESELLER, 0bfd66d529a55807
-openx.com, 540298543, RESELLER, 6a698e2ec38604c6
-contextweb.com, 562499, RESELLER, 89ff185a4c4e857c
-thebrave.io, 1234568, RESELLER, c25b2154543746ac
-iqzone.com, IQ87, RESELLER
-opera.com, pub6871903319744, RESELLER, 55a0c5fd61378de3
-rhebus.works, 7597018658, RESELLER
-mars.media, 1010450, RESELLER, 8624339f102fb076
-app-stock.com, 315417, RESELLER
-criteo.com, B-057955, RESELLER, 9fac4a4a87c2a44f
-loopme.com, 11414, RESELLER, 6c8d5f95897a5a3b
-pubmatic.com, 163758, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 16928, RESELLER, 0bfd66d529a55807
-appnexus.com, 8178, RESELLER, f5ab79cb980f11d1
-advertising.com, 28246, RESELLER
-onetag.com, 59aa7be4921bac8, RESELLER
-gamaigroup.com, 320201, RESELLER
-rubiconproject.com, 20050, RESELLER, 0bfd66d529a55807
-freewheel.tv, 1599106, RESELLER
-freewheel.tv, 1599109, RESELLER
-lunamedia.io, b82743ba2ddf4bcaab3d1d4f91b1330e, RESELLER, 524ecb396915caaf
-growintech.co, 102275, RESELLER
-prequel.tv, 518, RESELLER
-voisetech.com, 1023, RESELLER
-eskimi.com, 2020000030, RESELLER
-9dotsmedia.com, 122262, RESELLER, 45ff185b4c4e857d
-ssp.e-volution.ai, AJxF6R378a9M6CaTvK, RESELLER
-programmaticx.ai, 6999766, RESELLER
-jio.com, 1547219295, RESELLER
-lemmatechnologies.com, 89, RESELLER, 7829010c5bebd1fb
-peak226.com, 12904, RESELLER
-markappmedia.site, 587286, RESELLER
-smartadserver.com, 3232, RESELLER, 060d053dcf45cbf3
-onlinemediasolutions.com, 29556, RESELLER
-castify.ai, 1279123, RESELLER
-orangeclickmedia.com, C-1034, RESELLER
-bematterfull.com, 111399861, RESELLER
-fromthetop.io, 65529, RESELLER
-dauup.com, 34103, RESELLER
-sabio.us, 100071, RESELLER, 96ed93aaa9795702
-admanmedia.com, 2063, RESELLER
-se7en.es, 212430, RESELLER, 064bc410192443d8
-algorix.co, 60367, RESELLER, 5b394c12fea27a1d
-iion.io, 10171, RESELLER, 013a29748465dc57
-tredio.io, 357a6fdf7642bf815a88822c447d9dc432901, RESELLER
-waardex.com, 99236, RESELLER
-adtonos.com, PUB2356156682, RESELLER
-theaudiencestreet.com, TAS-703, RESELLER
-adingenious.com, 75036, RESELLER
-carbonatix.com, 141073554, RESELLER
-keenkale.com, 841, RESELLER
-rubiconproject.com, 26064, RESELLER, 0bfd66d529a55807
-bold-win.com, 148, RESELLER, 71746737d0bab951
-lijit.com, 481366, RESELLER, fafdf38b16bf6b2b
-videoheroes.tv, 212430, RESELLER, 064bc410192443d8
-video.unrulymedia.com, 188404962, RESELLER
-mman.kr, 32102, RESELLER
-rubiconproject.com, 26168, RESELLER, 0bfd66d529a55807
-rubiconproject.com, 26192, RESELLER, 0bfd66d529a55807
-pubmatic.com, 165116, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 25906, RESELLER, 0bfd66d529a55807
-smartyads.com, 478, RESELLER, fd2bde0ff2e62c5d
-playwire.com, 1025119, RESELLER
-contextweb.com, 558638, RESELLER, 89ff185a4c4e857c
-video.unrulymedia.com, 764922532, RESELLER
-acexchange.co.kr, 1562884725, RESELLER
-rubiconproject.com, 24400, RESELLER, 0bfd66d529a55807
-video.unrulymedia.com, 322585001, RESELLER
-e-planning.net, 608359bb987625b2, RESELLER, c1ba615865ed87b2
-pubmatic.com, 157559, RESELLER, 5d62403b186f2ace
-sonobi.com, 45dd948092, RESELLER, d1a215d9eb5aee9e
-thunder-monetize.com, 3905806597, RESELLER
-eliteappgrade.com, 514554, RESELLER
-Beapup.com, 522589, RESELLER
-themediasense.com, 1147, RESELLER
-mobismarter.com, 3294, RESELLER
-
-
-#Inmobi M-Web
-
-inmobi.com,4fcebe6f9a714a95b066cfdbd5d354d4,RESELLER,83e75a7ae333ca9d
-rubiconproject.com, 11726, RESELLER, 0bfd66d529a55807
-pubmatic.com, 157097, RESELLER, 5d62403b186f2ace
-pubmatic.com, 159035,RESELLER,5d62403b186f2ace
-loopme.com, 9724, RESELLER, 6c8d5f95897a5a3b
-smartyads.com,100034, RESELLER, fd2bde0ff2e62c5d
-engagebdr.com, 10181, RESELLER
-eskimi.com, eas-2020000005, RESELLER
-pubmatic.com, 158154, RESELLER, 5d62403b186f2ace
-admanmedia.com, 594, RESELLER
-admixer.net, eab09ea6-bcf7-4eff-965d-b4f43962c73c, RESELLER
-conversantmedia.com,40881,RESELLER,03113cd04947736d
-appnexus.com,4052,RESELLER
-contextweb.com,561998,RESELLER,89ff185a4c4e857c
-pubmatic.com,158100,RESELLER,5d62403b186f2ace
-yahoo.com,55771,RESELLER,e1a5b5b6e3255540
-ogury.com,e91052177a44df900ef9977b4b8314fe,RESELLER
-pubmatic.com, 157097, RESELLER, 5d62403b186f2ace
-rhythmone.com,188404962,RESELLER,a670c89d4a324e47
-video.unrulymedia.com,2169000724,RESELLER
-axonix.com,57716,RESELLER
-telaria.com,r3222-wec7r,RESELLER,1a4e959a1b50034a
-lemmatechnologies.com,89,RESELLER,7829010c5bebd1fb
-smartadserver.com,3564,RESELLER
-admanmedia.com,660,RESELLER
-pubmatic.com,156494,RESELLER,5d62403b186f2ace
-rubiconproject.com,20208,RESELLER,0bfd66d529a55807
-pubmatic.com,156931,RESELLER,5d62403b186f2ace
-lkqd.net,626,RESELLER,59c49fa9598a0117
-pubnative.net,1006951,RESELLER,d641df8625486a7b
-pubmatic.com,155975,RESELLER,5d62403b186f2ace
-appnexus.com,8178,RESELLER,f5ab79cb980f11d1
-rubiconproject.com,17328,RESELLER,0bfd66d529a55807
-openx.com,537152826,RESELLER,6a698e2ec38604c6
-verve.com,5897,RESELLER,0c8f5958fc2d6270
-sonobi.com,eaec54c63f,RESELLER,d1a215d9eb5aee9e
-onetag.com,59aa7be4921bac8,RESELLER
-advertising.com,28246,RESELLER
-rhythmone.com,4173858586,RESELLER,a670c89d4a324e47
-verve.com,15290,RESELLER,0c8f5958fc2d6270
-verve.com,5897,RESELLER,0c8f5958fc2d6270
-rubiconproject.com,15278,RESELLER,0bfd66d529a55807
-pubmatic.com,156517,RESELLER,5d62403b186f2ace
-
-# Nobid
-
-nobid.io, 22013853948, DIRECT
-zetaglobal.net, 693, DIRECT
-sharethrough.com, aRE1degH, RESELLER, d53b998a7bd4ecd2
-rubiconproject.com, 18694, RESELLER, 0bfd66d529a55807
-pubmatic.com, 156557, RESELLER
-rubiconproject.com, 24434, RESELLER, 0bfd66d529a55807
-amxrtb.com, 105199579, RESELLER
-appnexus.com, 12290, RESELLER
-lijit.com, 260380, RESELLER
-33across.com, 0010b00002Mq2FYAAZ, DIRECT, bbea06d9c4d2853c #33Across #hb #tag
-appnexus.com, 10239, RESELLER, f5ab79cb980f11d1 #33Across #hb #tag #viewable
-conversantmedia.com, 100141, RESELLER, 03113cd04947736d #hb #tag #video
-lijit.com, 273657, RESELLER, fafdf38b16bf6b2b
-video.unrulymedia.com, 347774562, RESELLER
-rubiconproject.com, 15268, RESELLER, 0bfd66d529a55807
-pubmatic.com, 159277, RESELLER
-inmobi.com,8f261ace12c3486ba2e0d2011cd97976,RESELLER,83e75a7ae333ca9d
-onetag.com, 694e68b73971b58, RESELLER
-sonobi.com, 7ad1b9f952, RESELLER, d1a215d9eb5aee9e
-dxkulture.com, 9533, DIRECT, 259726033fc4df0c
-xandr.com, 11429, RESELLER, f5ab79cb980f11d1
-audigentmedia.com, nobid1, DIRECT, ef36b9389dcaff12
-gumgum.com, 13926, RESELLER, ffdef49475d318a9
-mediafuse.com, 389, DIRECT
-Media.net, 8CUV34PJ4, RESELLER
-
-
-# TappX
-
-tappx.com, 36656, DIRECT, 9f375a07da0318ec
-pubmatic.com, 92509, RESELLER, 5d62403b186f2ace
-groundtruth.com, 107, RESELLER, 81cbf0a75a5e0e9a
-smartadserver.com, 1692, RESELLER
-rubiconproject.com, 13856, RESELLER, 0bfd66d529a55807
-adcolony.com, c490f6e7399a25d6, RESELLER, 1ad675c9de6b5176
-loopme.com, 11227, RESELLER, 6c8d5f95897a5a3b
-appnexus.com, 9569, RESELLER, f5ab79cb980f11d1
-pubmatic.com, 158111, RESELLER, 5d62403b186f2ace
-appnexus.com, 10824, RESELLER, f5ab79cb980f11d1
-chartboost.com, 5da62a1035b91e0aff190bf7, RESELLER
-
-# Smart
-
-smartadserver.com, 4191, RESELLER, 060d053dcf45cbf3
-smartadserver.com, 4191-OB, RESELLER, 060d053dcf45cbf3
-pubmatic.com, 156439, RESELLER, 5d62403b186f2ace
-pubmatic.com, 154037, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 16114, RESELLER, 0bfd66d529a55807
-openx.com, 537149888, RESELLER, 6a698e2ec38604c6
-appnexus.com, 3703, RESELLER, f5ab79cb980f11d1
-loopme.com, 5679, RESELLER, 6c8d5f95897a5a3b
-video.unrulymedia.com, 2564526802, RESELLER
-smaato.com, 1100044045, RESELLER, 07bcf65f187117b4
-adyoulike.com, b4bf4fdd9b0b915f746f6747ff432bde, RESELLER
-axonix.com, 57264, RESELLER
-sharethrough.com, OAW69Fon, RESELLER, d53b998a7bd4ecd2
-
-# Adagio
-
-adagio.io, 1140, DIRECT
-
-# Adagio - Magnite
-rubiconproject.com, 19116, RESELLER, 0bfd66d529a55807
-
-# Adagio - Pubmatic
-pubmatic.com, 159110, RESELLER, 5d62403b186f2ace
-
-# Adagio - Improve Digital
-improvedigital.com, 1790, RESELLER
-
-# Adagio - Onetag
-onetag.com, 6b859b96c564fbe, RESELLER
-appnexus.com, 13099, RESELLER
-pubmatic.com, 161593, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 11006, RESELLER, 0bfd66d529a55807
-
-# Adagio - Index Exchange
-indexexchange.com, 194558, RESELLER
-
-# Adagio - 33Across
-33across.com, 0015a00002oUk4aAAC, RESELLER, bbea06d9c4d2853c
-yahoo.com, 57289, RESELLER, e1a5b5b6e3255540
-appnexus.com, 10239, RESELLER, f5ab79cb980f11d1
-rubiconproject.com, 16414, RESELLER, 0bfd66d529a55807
-pubmatic.com, 156423, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 21642, RESELLER, 0bfd66d529a55807
-conversantmedia.com, 100141, RESELLER
-indexexchange.com, 191973, RESELLER, 50b1c356f2c5c8fc
-triplelift.com, 12503, RESELLER, 6c33edb13117fd86
-
-# Adagio - Equativ
-smartadserver.com, 3554, RESELLER
-pubmatic.com, 156439, RESELLER, 5d62403b186f2ace
-pubmatic.com, 154037, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 16114, RESELLER, 0bfd66d529a55807
-openx.com, 537149888, RESELLER, 6a698e2ec38604c6
-appnexus.com, 3703, RESELLER, f5ab79cb980f11d1
-loopme.com, 5679, RESELLER, 6c8d5f95897a5a3b
-video.unrulymedia.com, 2564526802, RESELLER
-pubnative.net, 1006576, RESELLER, d641df8625486a7b
-admanmedia.com, 43, RESELLER
-sharethrough.com, OAW69Fon, RESELLER, d53b998a7bd4ecd2
-
-# Adagio - Sovrn
-lijit.com, 367236, RESELLER, fafdf38b16bf6b2b
-openx.com, 538959099, RESELLER, 6a698e2ec38604c6
-pubmatic.com, 137711, RESELLER, 5d62403b186f2ace
-pubmatic.com, 156212, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 17960, RESELLER, 0bfd66d529a55807
-
-# Adagio - Freewheel
-freewheel.tv, 1568036, RESELLER
-freewheel.tv, 1568041, RESELLER
-
-# Adagio - OpenX
-openx.com, 558899373, RESELLER, 6a698e2ec38604c6
-
-# Adagio - Triplelift
-triplelift.com, 13482, RESELLER, 6c33edb13117fd86
-
-# Adagio - E-Planning
-e-planning.net, 83c06e81531537f4, RESELLER, c1ba615865ed87b2
-pubmatic.com, 156631, RESELLER, 5d62403b186f2ace
-openx.com, 541031350, RESELLER, 6a698e2ec38604c6
-rubiconproject.com, 12186, RESELLER, 0bfd66d529a55807
-zetaglobal.net, 891, RESELLER
-appnexus.com, 15941, RESELLER
-
-# Adagio - Nexxen
-video.unrulymedia.com, 5672421953199218469, RESELLER
-
-# Sharethrough
-
-sharethrough.com, EU8CIOkx, RESELLER, d53b998a7bd4ecd2
-sharethrough.com, a4f68c92, DIRECT, d53b998a7bd4ecd2
-indexexchange.com, 186046, RESELLER
-pubmatic.com, 156557, RESELLER
-pubmatic.com, 158723, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 18694, RESELLER, 0bfd66d529a55807
-openx.com, 540274407, RESELLER, 6a698e2ec38604c6
-33across.com, 0013300001kQj2HAAS, RESELLER, bbea06d9c4d2853c
-smaato.com, 1100047713, RESELLER, 07bcf65f187117b4
-
-
-
-
-# Onetag
-
-onetag.com, 77253abd802c05e, DIRECT
-onetag.com, 77253abd802c05e-OB, DIRECT
-appnexus.com, 13099, RESELLER
-pubmatic.com, 161593, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 11006, RESELLER, 0bfd66d529a55807
-freewheel.tv, 20393, RESELLER
-freewheel.tv, 24377, RESELLER
-
-
-
-# Gourmet Ads
-
-gourmetads.com, 14306, RESELLER
-appnexus.com, 1792, RESELLER, f5ab79cb980f11d1
-themediagrid.com, UPO4A3, RESELLER, 35d5010d7789b49d
-openx.com, 537142979, RESELLER, 6a698e2ec38604c6
-yahoo.com, 57830, RESELLER, e1a5b5b6e3255540
-amxrtb.com, 105199507, RESELLER
-rubiconproject.com, 10617, RESELLER, 0bfd66d529a55807
-indexexchange.com, 184268, RESELLER, 50b1c356f2c5c8fc
-pubmatic.com, 99931, RESELLER, 5d62403b186f2ace
-deepintent.com, 1252, RESELLER
-sovrn.com, 227193, RESELLER, fafdf38b16bf6b2b
-adform.com, 1655, RESELLER, 9f5210a2f0999e32
-criteo.com, B-060140, RESELLER, 9fac4a4a87c2a44f
-beachfront.com, 12562, RESELLER, e2541279e8e2ca4d
-contextweb.com, 561070, RESELLER, 89ff185a4c4e857c
-conversantmedia.com, 41603, RESELLER, 03113cd04947736d
-sharethrough.com, 1c3179bc, RESELLER, d53b998a7bd4ecd2
-emxdgt.com, 58, RESELLER, 1e1d41537f7cad7f
-rhythmone.com, 2441264164, RESELLER, a670c89d4a324e47
-yieldmo.com, 2322780807812293024, RESELLER
-synacor.com, 82386, RESELLER, e108f11b2cdf7d5b
-admanmedia.com, 854, RESELLER
-smaato.com, 1100010704, RESELLER, 07bcf65f187117b4
-smaato.com, 1100004890, RESELLER, 07bcf65f187117b4
-axonix.com, 59053, RESELLER
-smartadserver.com, 4188, RESELLER
-smartadserver.com, 4071, RESELLER
-themediagrid.com, Q5R9XH, RESELLER, 35d5010d7789b49d
-33across.com, 0015a00002vQAiXAAW, RESELLER, bbea06d9c4d2853c
-rubiconproject.com, 16414, RESELLER, 0bfd66d529a55807
-yahoo.com, 57289, RESELLER, e1a5b5b6e3255540
-appnexus.com, 10239, RESELLER, f5ab79cb980f11d1
-improvedigital.com, 2058, RESELLER
-
-
-# Ogury
-
-ogury.com, 5a93b205-d86c-4e96-a62e-01f593889ed0, DIRECT
-appnexus.com, 11470, RESELLER
-#pubmatic
-pubmatic.com, 163238, RESELLER, 5d62403b186f2ace
-#equativ
-smartadserver.com, 4537, RESELLER, 060d053dcf45cbf3
-#magnite
-rubiconproject.com, 25198, RESELLER, 0bfd66d529a55807
-thebrave.io, 1234746, RESELLER, c25b2154543746ac
-toponad.com, 16719c20554a4f, RESELLER, 1d49fe424a1a456d
-video.unrulymedia.com, 533898005, RESELLER #Nexxen
-dauup.com, 34141, RESELLER #Edge226
-sharethrough.com, OAW69Fon, RESELLER, d53b998a7bd4ecd2
-
-
-# OMS
-
-onlinemediasolutions.com, 20605, DIRECT, b3868b187e4b6402
-amxrtb.com, 105199514, RESELLER
-pubmatic.com, 161332, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 20416, RESELLER, 0bfd66d529a55807
-onomagic.com, 206051, DIRECT
-onetag.com, 75753f1ebcc343c, RESELLER
-lijit.com, 374814, RESELLER, fafdf38b16bf6b2b
-openx.com, 537153209, RESELLER, 6a698e2ec38604c6
-Media.net, 8CUB46Z7R, RESELLER
-onetag.com, 7b561459c997848, RESELLER
-audienciad.com, 206052, DIRECT
-video.unrulymedia.com, 6694405583287859332, RESELLER
-aps.amazon.com, 48266a61-b3d9-4cb7-b172-553abc6a42a4, DIRECT
-yieldmo.com, 2757543169808605705, RESELLER
-rubiconproject.com, 24364, RESELLER, 0bfd66d529a55807
-getmediamx.com, 1220605, DIRECT
-appnexus.com, 11801, RESELLER
-appnexus.com, 15629, RESELLER, f5ab79cb980f11d1
-indexexchange.com, 197494, RESELLER, 50b1c356f2c5c8fc
-appnexus.com, 15127, RESELLER
-loopme.com, 12733, RESELLER, 6c8d5f95897a5a3b
-themediagrid.com, IRK975, RESELLER, 35d5010d7789b49d
-sonobi.com, 3aed893727, RESELLER, d1a215d9eb5aee9e
-sharethrough.com, LxFeZvU4, RESELLER, d53b998a7bd4ecd2
-advibe.media, 820605, DIRECT
-adyoulike.com, e9a771d72c076dbe3cafc2c6477f9238, RESELLER
-33Across.com, 001Pg00000eHKL7IAO, RESELLER, bbea06d9c4d2853c
-
-
-
-# Sonobi
-
-sonobi.com, 54feb57a02, DIRECT, d1a215d9eb5aee9e
-contextweb.com, 560606, RESELLER, 89ff185a4c4e857c
-
-# Primis
-
-
-primis.tech, 30278, DIRECT, b6b21d256ef43532
-spotxchange.com, 84294, RESELLER, 7842df1d2fe2db34
-spotx.tv, 84294, RESELLER, 7842df1d2fe2db34
-yahoo.com, 59260, RESELLER, e1a5b5b6e3255540
-pubmatic.com, 156595, RESELLER, 5d62403b186f2ace
-google.com, pub-1320774679920841, RESELLER, f08c47fec0942fa0
-openx.com, 540258065, RESELLER, 6a698e2ec38604c6
-rubiconproject.com, 20130, RESELLER, 0bfd66d529a55807
-freewheel.tv, 19133, RESELLER, 74e8e47458f74754
-smartadserver.com, 3436, RESELLER, 060d053dcf45cbf3
-indexexchange.com, 191923, RESELLER, 50b1c356f2c5c8fc
-contextweb.com, 562350, RESELLER, 89ff185a4c4e857c
-tremorhub.com, mb9eo-oqsbf, RESELLER, 1a4e959a1b50034a
-telaria.com, mb9eo-oqsbf, RESELLER, 1a4e959a1b50034a
-adform.com, 2078, RESELLER
-supply.colossusssp.com, 290, RESELLER, 6c5b49d96ec1b458
-emxdgt.com, 1349, RESELLER, 1e1d41537f7cad7f
-Media.net, 8CU695QH7, RESELLER
-video.unrulymedia.com, 2338962694, RESELLER
-sharethrough.com, flUyJowI, RESELLER, d53b998a7bd4ecd2
-triplelift.com, 8210, RESELLER, 6c33edb13117fd86
-appnexus.com, 16007, RESELLER, f5ab79cb980f11d1
-pmc.com, 1240739, DIRECT, 8dd52f825890bb44
-rubiconproject.com, 10278, RESELLER, 0bfd66d529a55807
-sharethrough.com, jbYv3ec8, RESELLER, d53b998a7bd4ecd2
-ottadvisors.com, 122034096467, RESELLER
-
-# Medianet
-
-Media.net, 8CU995W35, DIRECT
-openx.com, 537100188, RESELLER, 6a698e2ec38604c6
-pubmatic.com, 159463, RESELLER, 5d62403b186f2ace
-EMXDGT.com, 1759, Reseller, 1e1d41537f7cad7f
-Appnexus.com, 1356, RESELLER, f5ab79cb980f11d1
-google.com, pub-7439041255533808, RESELLER, f08c47fec0942fa0
-rubiconproject.com, 19396, Reseller, 0bfd66d529a55807
-onetag.com, 5d49f482552c9b6, Reseller
-sonobi.com, 83729e979b, RESELLER
-rhythmone.com, 3611299104, RESELLER
-lemmatechnologies.com, 399, RESELLER, 7829010c5bebd1fb #LEMMA
-sharethrough.com, koRtppYA, RESELLER, d53b998a7bd4ecd2
-
-# Yandex
-
-yandex.com, 97916741, RESELLER
-improvedigital.com, 2031, RESELLER
-betweendigital.com, 43554, RESELLER
-uis.mobfox.com, 165, RESELLER
-Contextweb.com, 562899,RESELLER,89ff185a4c4e857c
-hyperad.tech, 150, RESELLER
-hyperad.tech, 215, RESELLER
-google.com, pub-5533854580432370, RESELLER, f08c47fec0942fa0
-
-# Epsilon/Conversant Media
-
-conversantmedia.com, 41333, RESELLER, 03113cd04947736d
-rubiconproject.com, 23644, RESELLER, 0bfd66d529a55807
-lijit.com, 411121, RESELLER, fafdf38b16bf6b2b #SOVRN
-admanmedia.com, 2050, RESELLER
-
-# Blockthrough
-
-blockthrough.com, 5708166709903360, DIRECT
-pubmatic.com, 160377, RESELLER, 5d62403b186f2ace
-indexexchange.com, 194341, RESELLER, 50b1c356f2c5c8fc
-rubiconproject.com, 23718, RESELLER, 0bfd66d529a55807
-appnexus.com, 6979, RESELLER
-lijit.com, 251666, RESELLER, fafdf38b16bf6b2b
-lijit.com, 251666-eb, RESELLER, fafdf38b16bf6b2b
-openx.com, 538959099, RESELLER, 6a698e2ec38604c6
-pubmatic.com, 137711, RESELLER, 5d62403b186f2ace
-pubmatic.com, 156212, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 17960, RESELLER, 0bfd66d529a55807
-appnexus.com, 1019, RESELLER, f5ab79cb980f11d1
-criteo.com, 8990, RESELLER
-sharethrough.com, 9zUewtvl, RESELLER, d53b998a7bd4ecd2
-pubmatic.com, 156557, RESELLER
-rubiconproject.com, 18694, RESELLER, 0bfd66d529a55807
-openx.com, 540274407, RESELLER, 6a698e2ec38604c6
-33across.com, 0013300001kQj2HAAS, RESELLER, bbea06d9c4d2853c
-smaato.com, 1100047713, RESELLER, 07bcf65f187117b4
-yahoo.com, 59531, RESELLER, e1a5b5b6e3255540
-smartadserver.com, 4342, RESELLER
-smartadserver.com, 4012, RESELLER
-Contextweb.com, 562926, RESELLER, 89ff185a4c4e857c
-
-# Vidazoo
-
-vidazoo.com, 66bd9d72ba3d00c6d7fcf12d, DIRECT, b6ada874b4d7d0b2
-rubiconproject.com, 17130, RESELLER, 0bfd66d529a55807
-lijit.com, 222372, RESELLER, fafdf38b16bf6b2b
-themediagrid.com, 3AW9JB, RESELLER, 35d5010d7789b49d
-pubmatic.com, 159988, RESELLER, 5d62403b186f2ace
-appnexus.com, 2794, RESELLER, f5ab79cb980f11d1
-openx.com, 541017750, RESELLER, 6a698e2ec38604c6
-video.unrulymedia.com, 2743945877, RESELLER
-media.net, 8CUN4Y5Y3, RESELLER
-sharethrough.com, S2rESyUH, RESELLER, d53b998a7bd4ecd2
-supply.colossusssp.com, 181, RESELLER, 6c5b49d96ec1b458
-
-# Opti Engage
-
-optidigital.com,p321,RESELLER
-pubmatic.com,158939,RESELLER,5d62403b186f2ace
-rubiconproject.com,20336,RESELLER,0bfd66d529a55807
-smartadserver.com,3379,RESELLER,060d053dcf45cbf3
-criteo.com,B-060926,RESELLER,9fac4a4a87c2a44f
-themediagrid.com,3ETIX5,RESELLER,35d5010d7789b49d
-improvedigital.com,1469,RESELLER
-onetag.com,806eabb849d0326,RESELLER
-triplelift.com,8183,RESELLER,6c33edb13117fd86
-appnexus.com,12190,RESELLER,f5ab79cb980f11d1
-rtbhouse.com,mSu1piUSmB9TF4AQDGk4,RESELLER
-sharethrough.com,OAW69Fon,RESELLER,d53b998a7bd4ecd2
-33across.com,001Pg00000HMy0YIAT,RESELLER,bbea06d9c4d2853c
-
-# Smile Wanted
-
-smilewanted.com, 5288, RESELLER
-rubiconproject.com, 19814, RESELLER, 0bfd66d529a55807
-appnexus.com, 10040, RESELLER
-smartadserver.com, 2491, RESELLER
-pubmatic.com, 158810, RESELLER, 5d62403b186f2ace
-openx.com, 557083110, RESELLER, 6a698e2ec38604c6
-adform.com, 3027, RESELLER
-video.unrulymedia.com, 1767448067723954599, RESELLER
-sharethrough.com, TZ1ahFV8, RESELLER, d53b998a7bd4ecd2
-onetag.com, 7f5d22b0006ab5a, RESELLER
-
-
-# iion
-
-iion.io, 10184, RESELLER, 013a29748465dc57
-adsparc.com, 2056, RESELLER
-sonobi.com, 22d19b6952, RESELLER, d1a215d9eb5aee9e
-sonobi.com, 35f7241993, RESELLER, d1a215d9eb5aee9e
-criteo.com, B-063681, RESELLER, 9fac4a4a87c2a44f
-themediagrid.com, 25XPU9, RESELLER, 35d5010d7789b49d
-sovrn.com, 270673, RESELLER, fafdf38b16bf6b2b
-lijit.com, 270673, RESELLER, fafdf38b16bf6b2b
-adyoulike.com, 39f06b755a61e5422e18e2bdbb1add4a, RESELLER
-appnexus.com, 14538, RESELLER, f5ab79cb980f11d1
-adform.com, 2985, RESELLER, 9f5210a2f0999e32
-video.unrulymedia.com, 346830101, RESELLER, 29bc7d05d309e1bc
-rhythmone.com, 346830101, RESELLER, a670c89d4a324e47
-loopme.com, 11594, RESELLER, 6c8d5f95897a5a3b
-improvedigital.com, 2226, RESELLER
-rubiconproject.com, 25322, RESELLER, 0bfd66d529a55807
-pubmatic.com, 163091, RESELLER, 5d62403b186f2ace
-smartadserver.com, 4618, RESELLER, 060d053dcf45cbf3
-e-planning.net,363e54c31fcf223d,RESELLER,c1ba615865ed87b2
-admixer.net, b72d403d-e25e-4bc7-ad9c-6e929a66f502, RESELLER
-admanmedia.com, 2160, RESELLER
-uis.mobfox.com, 726, RESELLER, 5529a3d1f59865be
-onetag.com, 89dd525077ba15e, RESELLER
-taipeidigital.com, 1122, RESELLER
-pubmatic.com, 164778, RESELLER, 5d62403b186f2ace
-gamaigroup.com,423059,RESELLER
-media.net, 8CU8564R6, RESELLER
-sharethrough.com, 249198ac, RESELLER, d53b998a7bd4ecd2
-smilewanted.com, 5098, RESELLER
-richaudience.com, 6InWSNO0Xo, RESELLER
-152media.info,152M956,RESELLER
-insticator.com,f01725e4-53f4-40e0-95bb-c4206ee0b577,RESELLER,b3511ffcafb23a32
-adyoulike.com, c614fe3fe0114cbf1f9d7d878e6e7ee7, RESELLER
-pubmatic.com, 163945, RESELLER, 5d62403b186f2ace
-thebrave.io, 1234647, RESELLER, c25b2154543746ac
-minutemedia.com, 01j6arbm5tne, RESELLER
-smaato.com, 1100057454, RESELLER, 07bcf65f187117b4
-
-
-# Kueez
-
-kueez.com, afdc2db641e0e1aaa6d4da5e9b438abf, DIRECT
-appnexus.com, 8826,RESELLER, f5ab79cb980f11d1
-sharethrough.com, n98xDzeL, RESELLER, d53b998a7bd4ecd2
-Media.net,8CU4JTRF9, RESELLER
-lijit.com, 407406, RESELLER, fafdf38b16bf6b2b #SOVRN
-yieldmo.com, 3133660606033240149, RESELLER
-Pubmatic.com, 162110, RESELLER, 5d62403b186f2ace
-themediagrid.com, UOT45Z, RESELLER, 35d5010d7789b49d
-openx.com, 557564833, RESELLER, 6a698e2ec38604c6
-rubiconproject.com, 16920, RESELLER, 0bfd66d529a55807
-sonobi.com, 4c4fba1717, RESELLER, d1a215d9eb5aee9e
-smartadserver.com,4288,reseller,060d053dcf45cbf3
-onetag.com,6e053d779444c00, RESELLER
-adform.com,2926,reseller
-Disqus.com, 108, RESELLER
-improvedigital.com,2106,reseller
-33across.com, 0010b00002ODU4HAAX, RESELLER, bbea06d9c4d2853c
-video.unrulymedia.com, 3486482593, RESELLER
-
-# Seedtag
-
-seedtag.com,67a4eeefe958720006afb8aa, DIRECT
-xandr.com, 4009, RESELLER, f5ab79cb980f11d1
-beachfront.com, 15250, RESELLER, e2541279e8e2ca4d
-smartadserver.com, 3050, RESELLER
-rubiconproject.com, 17280, RESELLER, 0bfd66d529a55807
-pubmatic.com, 157743, RESELLER, 5d62403b186f2ace
-openx.com, 558758631, RESELLER, 6a698e2ec38604c6
-lijit.com, 397546, RESELLER, fafdf38b16bf6b2b
-onetag.com, 75601b04186d260, RESELLER
-sharethrough.com, AXS5NfBr, RESELLER, d53b998a7bd4ecd2
-loopme.com, 11712, RESELLER, 6c8d5f95897a5a3b
-video.unrulymedia.com, 724823153, RESELLER
-adform.com, 1889, RESELLER
-33across.com, 0010b00002MptHCAAZ, RESELLER, bbea06d9c4d2853c
-adyoulike.com, 83d15ef72d387a1e60e5a1399a2b0c03, RESELLER
-rubiconproject.com, 16114, RESELLER, 0bfd66d529a55807
-openx.com, 537149888, RESELLER, 6a698e2ec38604c6
-loopme.com, 5679, RESELLER, 6c8d5f95897a5a3b
-pubmatic.com, 156212, RESELLER, 5d62403b186f2ace
-rubiconproject.com, 17960, RESELLER, 0bfd66d529a55807
-improvedigital.com, 1680, RESELLER
-
-
-# OptiDigital
-
-optidigital.com,p321,DIRECT
-pubmatic.com,158939,RESELLER,5d62403b186f2ace
-rubiconproject.com,20336,RESELLER,0bfd66d529a55807
-smartadserver.com,3379,RESELLER,060d053dcf45cbf3
-sharethrough.com,OAW69Fon,RESELLER,d53b998a7bd4ecd2
-criteo.com,B-060926,RESELLER,9fac4a4a87c2a44f
-themediagrid.com,3ETIX5,RESELLER,35d5010d7789b49d
-triplelift.com,8183,RESELLER,6c33edb13117fd86
-appnexus.com,12190,RESELLER,f5ab79cb980f11d1
-onetag.com,806eabb849d0326,RESELLER
-rtbhouse.com,mSu1piUSmB9TF4AQDGk4,RESELLER
-33across.com,001Pg00000HMy0YIAT,RESELLER,bbea06d9c4d2853c
-e-planning.net,a76893b96338e7e9,RESELLER,c1ba615865ed87b2
-video.unrulymedia.com,731539260,RESELLER
-
-
-# Datablocks
-
-datablocks.net, 2729574, DIRECT, a5dfa362888cedea
-rubiconproject.com, 26288, RESELLER, 0bfd66d529a55807
-appnexus.com, 11794, RESELLER, f5ab79cb980f11d1
-openx.com, 541013810, RESELLER, 6a698e2ec38604c6
-pubmatic.com, 162168, RESELLER, 5d62403b186f2ace
-sharethrough.com, a47bc2a5, RESELLER, d53b998a7bd4ecd2
-152media.info, 152M72, RESELLER
-media.net, 8CUM6VBVM, RESELLER
-onetag.com, 74c8f583aa2ba05, RESELLER
-amxrtb.com, 105199438, RESELLER
-gumgum.com,14204,RESELLER,ffdef49475d318a9
-sovrn.com, 273900, RESELLER, fafdf38b16bf6b2b
-sonobi.com, 911eaf6707, RESELLER, d1a215d9eb5aee9e
-zetaglobal.net, 505, RESELLER
-
-
-# Insticator/Cool Media
-
-insticator.com,ea7873c5-662b-4e03-a3f3-cec1a01d8a95,DIRECT,b3511ffcafb23a32
-sharethrough.com,Q9IzHdvp,RESELLER,d53b998a7bd4ecd2
-rubiconproject.com,17062,RESELLER,0bfd66d529a55807
-risecodes.com,6124caed9c7adb0001c028d8,RESELLER
-pubmatic.com,95054,RESELLER,5d62403b186f2ace
-video.unrulymedia.com,136898039,RESELLER
-openx.com,558230700,RESELLER,6a698e2ec38604c6
-lijit.com,257618,RESELLER,fafdf38b16bf6b2b
-appnexus.com,3695,RESELLER,f5ab79cb980f11d1
-minutemedia.com,01garg96c88b,RESELLER
-
-
-# Rich Audience
-
-richaudience.com, uUzZIc9lYN, DIRECT
-appnexus.com, 8233, RESELLER
-rubiconproject.com, 13510, RESELLER
-pubmatic.com, 81564, RESELLER, 5d62403b186f2ace
-pubmatic.com, 156538, RESELLER, 5d62403b186f2ace
-adform.com, 1942, RESELLER
-lijit.com, 249425, RESELLER
-smartadserver.com, 2640, RESELLER
-adyoulike.com, f1dfbb7f133fbdb25c96e7d85a5e628b, RESELLER
-contextweb.com, 563371, RESELLER, 89ff185a4c4e857c
-themediagrid.com, P19GFJ, RESELLER, 35d5010d7789b49d
-onetag.com, 8d4b087143c49f0, RESELLER
-amxrtb.com, 105199794, RESELLER
-smartadserver.com, 1999, RESELLER, 060d053dcf45cbf3
-indexexchange.com, 201092, RESELLER, 50b1c356f2c5c8fc
-indexexchange.com, 192450, RESELLER, 50b1c356f2c5c8fc
-onetag.com, 7a4244b2979db22, RESELLER
-onetag.com, 7a4244b2979db22-OB, RESELLER
-openx.com, 539625136, RESELLER
-google.com, pub-2128757167812663, RESELLER, f08c47fec0942fa0
-rubiconproject.com, 17210, RESELLER, 0bfd66d529a55807
-appnexus.com, 10264, RESELLER, f5ab79cb980f11d1
-pubmatic.com, 156383, RESELLER, 5d62403b186f2ace
-themediagrid.com, VIY354, RESELLER, 35d5010d7789b49d
-smartadserver.com, 1743, RESELLER, 060d053dcf45cbf3
-improvedigital.com, 2048, RESELLER
-lijit.com, 257429, RESELLER, fafdf38b16bf6b2b
-adform.com, 2474, RESELLER, 9f5210a2f0999e32
-triplelift.com, 12911, RESELLER, 6c33edb13117fd86
-aps.amazon.com, 93aec77c-f6d2-45bd-affc-a85ab5a72683, RESELLER
-
-# InfoLinks
-
-infolinks.com, 3434212, direct
-pubmatic.com, 156872, reseller, 5d62403b186f2ace
-xandr.com, 3251, reseller
-indexexchange.com, 191306, reseller
-lijit.com, 268479, reseller, fafdf38b16bf6b2b
-media.net, 8CUY6IX4H, reseller
-openx.com, 543174347, reseller, 6a698e2ec38604c6
-video.unrulymedia.com, 2221906906, reseller
-improvedigital.com, 2016, reseller
-onetag.com, 598ce3ddaee8c90, reseller
-
-
-#Legacy or Unique
-google.com, pub-9403278435468733, DIRECT, f08c47fec0942fa0
diff --git a/public/blog-assets/ag-ui-compliance/header.png b/public/blog-assets/ag-ui-compliance/header.png
new file mode 100644
index 000000000..b10bb5ef5
Binary files /dev/null and b/public/blog-assets/ag-ui-compliance/header.png differ
diff --git a/public/blog-assets/composite-components/header.jpg b/public/blog-assets/composite-components/header.jpg
deleted file mode 100644
index 316bd94b7..000000000
Binary files a/public/blog-assets/composite-components/header.jpg and /dev/null differ
diff --git a/public/blog-assets/debug-logging-for-tanstack-ai/header.png b/public/blog-assets/debug-logging-for-tanstack-ai/header.png
new file mode 100644
index 000000000..cb38d53be
Binary files /dev/null and b/public/blog-assets/debug-logging-for-tanstack-ai/header.png differ
diff --git a/public/blog-assets/from-docs-to-agents/diagram-discovery.svg b/public/blog-assets/from-docs-to-agents/diagram-discovery.svg
new file mode 100644
index 000000000..c74c331de
--- /dev/null
+++ b/public/blog-assets/from-docs-to-agents/diagram-discovery.svg
@@ -0,0 +1,90 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 400" font-family="'SF Mono', 'Fira Code', 'JetBrains Mono', monospace">
+  <defs>
+    <filter id="shadow" x="-4%" y="-4%" width="108%" height="108%">
+      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.08"/>
+    </filter>
+    <marker id="arrowGreen" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+      <polygon points="0 0, 8 3, 0 6" fill="#22c55e" opacity="0.7"/>
+    </marker>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="900" height="400" fill="#0a0a0a" rx="12"/>
+  
+  <!-- Title -->
+  <text x="450" y="38" text-anchor="middle" fill="#737373" font-size="13" font-weight="500" letter-spacing="1.5">npx intent install — DEPENDENCY GRAPH DISCOVERY</text>
+  
+  <!-- node_modules tree -->
+  <text x="60" y="80" fill="#525252" font-size="12">node_modules/</text>
+  
+  <!-- Regular package -->
+  <rect x="80" y="95" width="200" height="34" rx="6" fill="#171717" stroke="#292929" stroke-width="0.5"/>
+  <text x="96" y="116" fill="#525252" font-size="11">react</text>
+  <text x="260" y="116" text-anchor="end" fill="#404040" font-size="9">no skills</text>
+  
+  <!-- Intent-enabled package -->
+  <rect x="80" y="137" width="200" height="34" rx="6" fill="#0a1f0a" stroke="#166534" stroke-width="1"/>
+  <circle cx="96" cy="154" r="4" fill="#22c55e"/>
+  <text x="108" y="158" fill="#86efac" font-size="11" font-weight="600">@tanstack/router</text>
+  
+  <!-- Regular package -->
+  <rect x="80" y="179" width="200" height="34" rx="6" fill="#171717" stroke="#292929" stroke-width="0.5"/>
+  <text x="96" y="200" fill="#525252" font-size="11">tailwindcss</text>
+  <text x="260" y="200" text-anchor="end" fill="#404040" font-size="9">no skills</text>
+  
+  <!-- Intent-enabled package -->
+  <rect x="80" y="221" width="200" height="34" rx="6" fill="#0a1f0a" stroke="#166534" stroke-width="1"/>
+  <circle cx="96" cy="238" r="4" fill="#22c55e"/>
+  <text x="108" y="242" fill="#86efac" font-size="11" font-weight="600">@tanstack/query</text>
+  
+  <!-- Regular package -->
+  <rect x="80" y="263" width="200" height="34" rx="6" fill="#171717" stroke="#292929" stroke-width="0.5"/>
+  <text x="96" y="284" fill="#525252" font-size="11">zod</text>
+  <text x="260" y="284" text-anchor="end" fill="#404040" font-size="9">no skills</text>
+  
+  <!-- Intent-enabled package -->
+  <rect x="80" y="305" width="200" height="34" rx="6" fill="#0a1f0a" stroke="#166534" stroke-width="1"/>
+  <circle cx="96" cy="322" r="4" fill="#22c55e"/>
+  <text x="108" y="326" fill="#86efac" font-size="11" font-weight="600">@tanstack/table</text>
+  
+  <!-- Regular -->
+  <rect x="80" y="347" width="200" height="34" rx="6" fill="#171717" stroke="#292929" stroke-width="0.5"/>
+  <text x="96" y="368" fill="#525252" font-size="11">typescript</text>
+  <text x="260" y="368" text-anchor="end" fill="#404040" font-size="9">no skills</text>
+  
+  <!-- Arrows from intent-enabled to middle -->
+  <line x1="280" y1="154" x2="420" y2="185" stroke="#22c55e" stroke-width="1.5" marker-end="url(#arrowGreen)"/>
+  <line x1="280" y1="238" x2="420" y2="210" stroke="#22c55e" stroke-width="1.5" marker-end="url(#arrowGreen)"/>
+  <line x1="280" y1="322" x2="420" y2="220" stroke="#22c55e" stroke-width="1.5" marker-end="url(#arrowGreen)"/>
+  
+  <!-- intent install process -->
+  <rect x="430" y="170" width="140" height="65" rx="10" fill="#0a1f0a" stroke="#166534" stroke-width="1.5" filter="url(#shadow)"/>
+  <text x="500" y="196" text-anchor="middle" fill="#4ade80" font-size="13" font-weight="700">intent install</text>
+  <text x="500" y="214" text-anchor="middle" fill="#166534" font-size="10">discovers + wires</text>
+  
+  <!-- Arrow to output -->
+  <line x1="570" y1="202" x2="630" y2="202" stroke="#22c55e" stroke-width="1.5" marker-end="url(#arrowGreen)"/>
+  
+  <!-- Output: Agent config files -->
+  <rect x="640" y="95" width="230" height="220" rx="10" fill="#171717" stroke="#404040" stroke-width="1" filter="url(#shadow)"/>
+  <text x="755" y="122" text-anchor="middle" fill="#a3a3a3" font-size="10" letter-spacing="1.5">AGENT CONFIG</text>
+  
+  <rect x="660" y="138" width="190" height="32" rx="5" fill="#1a1a2e" stroke="#3b3b5c" stroke-width="0.5"/>
+  <text x="755" y="158" text-anchor="middle" fill="#a5b4fc" font-size="11" font-weight="600">CLAUDE.md</text>
+  
+  <rect x="660" y="180" width="190" height="32" rx="5" fill="#1a1a2e" stroke="#3b3b5c" stroke-width="0.5"/>
+  <text x="755" y="200" text-anchor="middle" fill="#a5b4fc" font-size="11" font-weight="600">.cursorrules</text>
+  
+  <rect x="660" y="222" width="190" height="32" rx="5" fill="#1a1a2e" stroke="#3b3b5c" stroke-width="0.5"/>
+  <text x="755" y="242" text-anchor="middle" fill="#a5b4fc" font-size="11" font-weight="600">.windsurfrules</text>
+  
+  <text x="755" y="284" text-anchor="middle" fill="#525252" font-size="10">Router skills ✓</text>
+  <text x="755" y="299" text-anchor="middle" fill="#525252" font-size="10">Query skills ✓</text>
+  <text x="755" y="314" text-anchor="middle" fill="#525252" font-size="10">Table skills ✓</text>
+  
+  <!-- Legend -->
+  <circle cx="420" cy="365" r="4" fill="#22c55e"/>
+  <text x="432" y="369" fill="#525252" font-size="10">intent-enabled package</text>
+  <rect x="560" y="359" width="12" height="12" rx="2" fill="#171717" stroke="#292929" stroke-width="0.5"/>
+  <text x="580" y="369" fill="#525252" font-size="10">standard package (skipped)</text>
+</svg>
diff --git a/public/blog-assets/from-docs-to-agents/diagram-lifecycle.svg b/public/blog-assets/from-docs-to-agents/diagram-lifecycle.svg
new file mode 100644
index 000000000..83769c5b8
--- /dev/null
+++ b/public/blog-assets/from-docs-to-agents/diagram-lifecycle.svg
@@ -0,0 +1,95 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 420" font-family="'SF Mono', 'Fira Code', 'JetBrains Mono', monospace">
+  <defs>
+    <filter id="shadow" x="-4%" y="-4%" width="108%" height="108%">
+      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.08"/>
+    </filter>
+    <linearGradient id="flowGrad" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#22c55e" stop-opacity="0.6"/>
+      <stop offset="100%" stop-color="#22c55e" stop-opacity="0.2"/>
+    </linearGradient>
+    <marker id="arrowGreen" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+      <polygon points="0 0, 8 3, 0 6" fill="#22c55e" opacity="0.7"/>
+    </marker>
+    <marker id="arrowAmber" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+      <polygon points="0 0, 8 3, 0 6" fill="#f59e0b" opacity="0.7"/>
+    </marker>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="900" height="420" fill="#0a0a0a" rx="12"/>
+  
+  <!-- Title -->
+  <text x="450" y="38" text-anchor="middle" fill="#737373" font-size="13" font-weight="500" letter-spacing="1.5">THE @TANSTACK/INTENT LIFECYCLE</text>
+  
+  <!-- Step 1: Your Docs -->
+  <rect x="30" y="80" width="160" height="90" rx="10" fill="#171717" stroke="#292929" stroke-width="1" filter="url(#shadow)"/>
+  <text x="110" y="108" text-anchor="middle" fill="#a3a3a3" font-size="10" letter-spacing="1">YOUR DOCS</text>
+  <text x="110" y="130" text-anchor="middle" fill="#e5e5e5" font-size="12" font-weight="600">guides/</text>
+  <text x="110" y="148" text-anchor="middle" fill="#e5e5e5" font-size="12" font-weight="600">migration/</text>
+  <text x="110" y="163" text-anchor="middle" fill="#525252" font-size="10">source of truth</text>
+  
+  <!-- Arrow 1 -->
+  <line x1="190" y1="125" x2="230" y2="125" stroke="#22c55e" stroke-width="1.5" marker-end="url(#arrowGreen)"/>
+  
+  <!-- Step 2: intent scaffold -->
+  <rect x="240" y="80" width="160" height="90" rx="10" fill="#0a1f0a" stroke="#166534" stroke-width="1" filter="url(#shadow)"/>
+  <text x="320" y="108" text-anchor="middle" fill="#4ade80" font-size="10" letter-spacing="1">CLI</text>
+  <text x="320" y="130" text-anchor="middle" fill="#86efac" font-size="13" font-weight="700">intent scaffold</text>
+  <text x="320" y="150" text-anchor="middle" fill="#166534" font-size="10">guided generation</text>
+  <text x="320" y="163" text-anchor="middle" fill="#166534" font-size="10">+ intent validate</text>
+  
+  <!-- Arrow 2 -->
+  <line x1="400" y1="125" x2="440" y2="125" stroke="#22c55e" stroke-width="1.5" marker-end="url(#arrowGreen)"/>
+  
+  <!-- Step 3: Skills in package -->
+  <rect x="450" y="80" width="160" height="90" rx="10" fill="#171717" stroke="#292929" stroke-width="1" filter="url(#shadow)"/>
+  <text x="530" y="108" text-anchor="middle" fill="#a3a3a3" font-size="10" letter-spacing="1">NPM PACKAGE</text>
+  <text x="530" y="130" text-anchor="middle" fill="#e5e5e5" font-size="12" font-weight="600">skills/</text>
+  <text x="530" y="148" text-anchor="middle" fill="#e5e5e5" font-size="12" font-weight="600">SKILL.md</text>
+  <text x="530" y="163" text-anchor="middle" fill="#525252" font-size="10">versioned with code</text>
+  
+  <!-- Arrow 3 -->
+  <line x1="610" y1="125" x2="650" y2="125" stroke="#22c55e" stroke-width="1.5" marker-end="url(#arrowGreen)"/>
+  
+  <!-- Step 4: npm update -->
+  <rect x="660" y="80" width="210" height="90" rx="10" fill="#171717" stroke="#292929" stroke-width="1" filter="url(#shadow)"/>
+  <text x="765" y="108" text-anchor="middle" fill="#a3a3a3" font-size="10" letter-spacing="1">CONSUMER PROJECT</text>
+  <text x="765" y="130" text-anchor="middle" fill="#e5e5e5" font-size="12" font-weight="600">npm install / update</text>
+  <text x="765" y="148" text-anchor="middle" fill="#86efac" font-size="13" font-weight="700">intent install</text>
+  <text x="765" y="163" text-anchor="middle" fill="#525252" font-size="10">auto-wires agent config</text>
+  
+  <!-- Second row: The feedback loop -->
+  <!-- Staleness check -->
+  <rect x="240" y="230" width="160" height="80" rx="10" fill="#1a1500" stroke="#713f12" stroke-width="1" filter="url(#shadow)"/>
+  <text x="320" y="255" text-anchor="middle" fill="#fbbf24" font-size="10" letter-spacing="1">STALENESS</text>
+  <text x="320" y="277" text-anchor="middle" fill="#fde68a" font-size="13" font-weight="700">intent stale</text>
+  <text x="320" y="297" text-anchor="middle" fill="#713f12" font-size="10">CI catches drift</text>
+  
+  <!-- Arrow from docs down to stale -->
+  <line x1="110" y1="170" x2="110" y2="265" stroke="#f59e0b" stroke-width="1" stroke-dasharray="4,4"/>
+  <line x1="110" y1="265" x2="240" y2="265" stroke="#f59e0b" stroke-width="1.5" marker-end="url(#arrowAmber)"/>
+  <text x="160" y="240" text-anchor="middle" fill="#713f12" font-size="9">docs change?</text>
+  
+  <!-- Arrow from stale back up to scaffold -->
+  <line x1="320" y1="230" x2="320" y2="178" stroke="#f59e0b" stroke-width="1.5" marker-end="url(#arrowAmber)"/>
+  <text x="345" y="208" fill="#713f12" font-size="9">update skill</text>
+  
+  <!-- Feedback -->
+  <rect x="540" y="230" width="160" height="80" rx="10" fill="#1a1500" stroke="#713f12" stroke-width="1" filter="url(#shadow)"/>
+  <text x="620" y="255" text-anchor="middle" fill="#fbbf24" font-size="10" letter-spacing="1">FEEDBACK</text>
+  <text x="620" y="277" text-anchor="middle" fill="#fde68a" font-size="13" font-weight="700">intent feedback</text>
+  <text x="620" y="297" text-anchor="middle" fill="#713f12" font-size="10">structured reports</text>
+  
+  <!-- Arrow from consumer down to feedback -->
+  <line x1="765" y1="170" x2="765" y2="270" stroke="#f59e0b" stroke-width="1" stroke-dasharray="4,4"/>
+  <line x1="765" y1="270" x2="700" y2="270" stroke="#f59e0b" stroke-width="1.5" marker-end="url(#arrowAmber)"/>
+  <text x="748" y="223" text-anchor="end" fill="#713f12" font-size="9">issue?</text>
+  
+  <!-- Arrow from feedback back to stale -->
+  <line x1="540" y1="270" x2="400" y2="270" stroke="#f59e0b" stroke-width="1.5" marker-end="url(#arrowAmber)"/>
+  
+  <!-- Bottom summary -->
+  <rect x="150" y="350" width="600" height="48" rx="24" fill="#0a1f0a" stroke="#166534" stroke-width="1"/>
+  <text x="450" y="370" text-anchor="middle" fill="#4ade80" font-size="12" font-weight="600">npm update = latest code + latest knowledge</text>
+  <text x="450" y="388" text-anchor="middle" fill="#166534" font-size="11">Skills travel with the tool, not the model's training cutoff</text>
+</svg>
diff --git a/public/blog-assets/from-docs-to-agents/diagram-split-brain.svg b/public/blog-assets/from-docs-to-agents/diagram-split-brain.svg
new file mode 100644
index 000000000..afd854ab5
--- /dev/null
+++ b/public/blog-assets/from-docs-to-agents/diagram-split-brain.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 340" font-family="'SF Mono', 'Fira Code', 'JetBrains Mono', monospace">
+  <defs>
+    <filter id="shadow" x="-4%" y="-4%" width="108%" height="108%">
+      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.08"/>
+    </filter>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="900" height="340" fill="#0a0a0a" rx="12"/>
+  
+  <!-- Title -->
+  <text x="450" y="38" text-anchor="middle" fill="#737373" font-size="13" font-weight="500" letter-spacing="1.5">THE VERSION SPLIT-BRAIN PROBLEM</text>
+  
+  <!-- Left side: Training data -->
+  <rect x="40" y="65" width="380" height="230" rx="10" fill="#171717" stroke="#7f1d1d" stroke-width="1" filter="url(#shadow)"/>
+  <text x="230" y="92" text-anchor="middle" fill="#ef4444" font-size="12" font-weight="700" letter-spacing="1">MODEL TRAINING DATA</text>
+  
+  <!-- Mixed v4 and v5 patterns -->
+  <rect x="65" y="110" width="330" height="36" rx="6" fill="#1c1412" stroke="#7f1d1d" stroke-width="0.5"/>
+  <text x="80" y="133" fill="#fca5a5" font-size="11">useQuery({ queryKey, queryFn })</text>
+  <rect x="310" y="116" width="28" height="20" rx="4" fill="#7f1d1d"/>
+  <text x="324" y="131" text-anchor="middle" fill="#fca5a5" font-size="9" font-weight="700">v5</text>
+  
+  <rect x="65" y="155" width="330" height="36" rx="6" fill="#1c1412" stroke="#7f1d1d" stroke-width="0.5"/>
+  <text x="80" y="178" fill="#fca5a5" font-size="11">useQuery(queryKey, queryFn)</text>
+  <rect x="310" y="161" width="28" height="20" rx="4" fill="#7f1d1d"/>
+  <text x="324" y="176" text-anchor="middle" fill="#fca5a5" font-size="9" font-weight="700">v4</text>
+  
+  <rect x="65" y="200" width="330" height="36" rx="6" fill="#1c1412" stroke="#7f1d1d" stroke-width="0.5"/>
+  <text x="80" y="223" fill="#fca5a5" font-size="11">createFileRoute('/posts')</text>
+  <rect x="310" y="206" width="28" height="20" rx="4" fill="#7f1d1d"/>
+  <text x="324" y="221" text-anchor="middle" fill="#fca5a5" font-size="9" font-weight="700">v1</text>
+  
+  <rect x="65" y="245" width="330" height="36" rx="6" fill="#1c1412" stroke="#7f1d1d" stroke-width="0.5"/>
+  <text x="80" y="268" fill="#fca5a5" font-size="11">new Route({ path: '/posts' })</text>
+  <rect x="310" y="251" width="36" height="20" rx="4" fill="#7f1d1d"/>
+  <text x="328" y="266" text-anchor="middle" fill="#fca5a5" font-size="9" font-weight="700">pre-v1</text>
+  
+  <!-- Question mark -->
+  <text x="230" y="308" text-anchor="middle" fill="#7f1d1d" font-size="11">No mechanism to know which applies to your project</text>
+  
+  <!-- VS divider -->
+  <text x="450" y="190" text-anchor="middle" fill="#404040" font-size="16" font-weight="700">vs</text>
+  
+  <!-- Right side: Skills -->
+  <rect x="480" y="65" width="380" height="230" rx="10" fill="#171717" stroke="#166534" stroke-width="1" filter="url(#shadow)"/>
+  <text x="670" y="92" text-anchor="middle" fill="#22c55e" font-size="12" font-weight="700" letter-spacing="1">INTENT SKILLS</text>
+  
+  <!-- Clean, version-locked -->
+  <rect x="505" y="110" width="330" height="48" rx="6" fill="#0a1f0a" stroke="#166534" stroke-width="0.5"/>
+  <text x="520" y="131" fill="#86efac" font-size="11" font-weight="600">@tanstack/query-intent@5.62.0</text>
+  <text x="520" y="148" fill="#166534" font-size="10">Pinned to your installed version</text>
+  
+  <rect x="505" y="170" width="330" height="48" rx="6" fill="#0a1f0a" stroke="#166534" stroke-width="0.5"/>
+  <text x="520" y="191" fill="#86efac" font-size="11" font-weight="600">@tanstack/router-intent@1.95.0</text>
+  <text x="520" y="208" fill="#166534" font-size="10">Pinned to your installed version</text>
+  
+  <rect x="505" y="230" width="330" height="48" rx="6" fill="#0a1f0a" stroke="#166534" stroke-width="0.5"/>
+  <text x="520" y="251" fill="#86efac" font-size="11" font-weight="600">npm update = latest skills</text>
+  <text x="520" y="268" fill="#166534" font-size="10">Knowledge always matches code</text>
+
+  <text x="670" y="308" text-anchor="middle" fill="#166534" font-size="11">Versioned, maintained, unambiguous</text>
+</svg>
diff --git a/public/blog-assets/from-docs-to-agents/diagram-status-quo.svg b/public/blog-assets/from-docs-to-agents/diagram-status-quo.svg
new file mode 100644
index 000000000..887e4dc2f
--- /dev/null
+++ b/public/blog-assets/from-docs-to-agents/diagram-status-quo.svg
@@ -0,0 +1,75 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 500" font-family="'SF Mono', 'Fira Code', 'JetBrains Mono', monospace">
+  <defs>
+    <filter id="shadow" x="-4%" y="-4%" width="108%" height="108%">
+      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.08"/>
+    </filter>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="900" height="500" fill="#0a0a0a" rx="12"/>
+  
+  <!-- Title -->
+  <text x="450" y="42" text-anchor="middle" fill="#737373" font-size="13" font-weight="500" letter-spacing="1.5">THE STATUS QUO</text>
+  
+  <!-- Source repos scattered around -->
+  <!-- Repo 1 -->
+  <rect x="30" y="75" width="195" height="72" rx="8" fill="#171717" stroke="#292929" stroke-width="1" filter="url(#shadow)"/>
+  <text x="48" y="100" fill="#a3a3a3" font-size="10" letter-spacing="0.5">GITHUB REPO</text>
+  <text x="48" y="120" fill="#e5e5e5" font-size="13" font-weight="600">awesome-cursorrules</text>
+  <text x="48" y="137" fill="#525252" font-size="10">Last updated: 4 months ago</text>
+  
+  <!-- Repo 2 -->
+  <rect x="250" y="68" width="195" height="72" rx="8" fill="#171717" stroke="#292929" stroke-width="1" filter="url(#shadow)"/>
+  <text x="268" y="93" fill="#a3a3a3" font-size="10" letter-spacing="0.5">DISCORD MESSAGE</text>
+  <text x="268" y="113" fill="#e5e5e5" font-size="13" font-weight="600">tanstack-router.md</text>
+  <text x="268" y="130" fill="#525252" font-size="10">Author: random_dev_42</text>
+  
+  <!-- Repo 3 -->
+  <rect x="470" y="75" width="195" height="72" rx="8" fill="#171717" stroke="#292929" stroke-width="1" filter="url(#shadow)"/>
+  <text x="488" y="100" fill="#a3a3a3" font-size="10" letter-spacing="0.5">GIST</text>
+  <text x="488" y="120" fill="#e5e5e5" font-size="13" font-weight="600">query-v4-rules.md</text>
+  <text x="488" y="137" fill="#ef4444" font-size="10" font-weight="600">⚠ Written for v4, not v5</text>
+  
+  <!-- Repo 4 -->
+  <rect x="690" y="68" width="185" height="72" rx="8" fill="#171717" stroke="#292929" stroke-width="1" filter="url(#shadow)"/>
+  <text x="708" y="93" fill="#a3a3a3" font-size="10" letter-spacing="0.5">BLOG POST</text>
+  <text x="708" y="113" fill="#e5e5e5" font-size="13" font-weight="600">table-tips.md</text>
+  <text x="708" y="130" fill="#525252" font-size="10">Author: unknown</text>
+  
+  <!-- Dashed arrows converging (manual copy-paste) -->
+  <line x1="128" y1="147" x2="390" y2="270" stroke="#525252" stroke-width="1" stroke-dasharray="5,5"/>
+  <line x1="348" y1="140" x2="420" y2="270" stroke="#525252" stroke-width="1" stroke-dasharray="5,5"/>
+  <line x1="568" y1="147" x2="460" y2="270" stroke="#525252" stroke-width="1" stroke-dasharray="5,5"/>
+  <line x1="783" y1="140" x2="500" y2="270" stroke="#525252" stroke-width="1" stroke-dasharray="5,5"/>
+  
+  <!-- Copy/paste label -->
+  <rect x="180" y="195" width="120" height="26" rx="13" fill="#292929"/>
+  <text x="240" y="212" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">copy + paste</text>
+  
+  <rect x="540" y="195" width="120" height="26" rx="13" fill="#292929"/>
+  <text x="600" y="212" text-anchor="middle" fill="#ef4444" font-size="11" font-weight="500">copy + paste</text>
+  
+  <!-- Your project -->
+  <rect x="310" y="270" width="280" height="100" rx="10" fill="#171717" stroke="#404040" stroke-width="1.5" filter="url(#shadow)"/>
+  <text x="450" y="298" text-anchor="middle" fill="#a3a3a3" font-size="10" letter-spacing="1.5">YOUR PROJECT</text>
+  <text x="450" y="322" text-anchor="middle" fill="#e5e5e5" font-size="14" font-weight="600">.cursorrules / CLAUDE.md</text>
+  <text x="450" y="345" text-anchor="middle" fill="#525252" font-size="11">Mixed versions · No update mechanism</text>
+  <text x="450" y="362" text-anchor="middle" fill="#525252" font-size="11">No way to detect staleness</text>
+  
+  <!-- Problems at the bottom -->
+  <rect x="100" y="415" width="155" height="52" rx="8" fill="#1c1412" stroke="#7f1d1d" stroke-width="1"/>
+  <text x="178" y="438" text-anchor="middle" fill="#fca5a5" font-size="11" font-weight="500">No versioning</text>
+  <text x="178" y="454" text-anchor="middle" fill="#7f1d1d" font-size="10">Which version is this for?</text>
+  
+  <rect x="280" y="415" width="155" height="52" rx="8" fill="#1c1412" stroke="#7f1d1d" stroke-width="1"/>
+  <text x="358" y="438" text-anchor="middle" fill="#fca5a5" font-size="11" font-weight="500">No updates</text>
+  <text x="358" y="454" text-anchor="middle" fill="#7f1d1d" font-size="10">Silently goes stale</text>
+  
+  <rect x="460" y="415" width="155" height="52" rx="8" fill="#1c1412" stroke="#7f1d1d" stroke-width="1"/>
+  <text x="538" y="438" text-anchor="middle" fill="#fca5a5" font-size="11" font-weight="500">No ownership</text>
+  <text x="538" y="454" text-anchor="middle" fill="#7f1d1d" font-size="10">Who maintains this?</text>
+  
+  <rect x="640" y="415" width="155" height="52" rx="8" fill="#1c1412" stroke="#7f1d1d" stroke-width="1"/>
+  <text x="718" y="438" text-anchor="middle" fill="#fca5a5" font-size="11" font-weight="500">No composition</text>
+  <text x="718" y="454" text-anchor="middle" fill="#7f1d1d" font-size="10">Skills don't know each other</text>
+</svg>
diff --git a/public/blog-assets/from-docs-to-agents/header.png b/public/blog-assets/from-docs-to-agents/header.png
new file mode 100644
index 000000000..bf1e74c3b
Binary files /dev/null and b/public/blog-assets/from-docs-to-agents/header.png differ
diff --git a/public/blog-assets/generation-hooks/header.png b/public/blog-assets/generation-hooks/header.png
new file mode 100644
index 000000000..29f2c9299
Binary files /dev/null and b/public/blog-assets/generation-hooks/header.png differ
diff --git a/public/blog-assets/how-we-test-tanstack-ai-across-7-providers/cover.png b/public/blog-assets/how-we-test-tanstack-ai-across-7-providers/cover.png
new file mode 100644
index 000000000..6988f3590
Binary files /dev/null and b/public/blog-assets/how-we-test-tanstack-ai-across-7-providers/cover.png differ
diff --git a/public/blog-assets/multi-turn-structured-output/header.png b/public/blog-assets/multi-turn-structured-output/header.png
new file mode 100644
index 000000000..7773c596e
Binary files /dev/null and b/public/blog-assets/multi-turn-structured-output/header.png differ
diff --git a/public/blog-assets/openrouter-partnership/header.png b/public/blog-assets/openrouter-partnership/header.png
new file mode 100644
index 000000000..7953e6c9c
Binary files /dev/null and b/public/blog-assets/openrouter-partnership/header.png differ
diff --git a/public/blog-assets/react-server-components/header.jpg b/public/blog-assets/react-server-components/header.jpg
new file mode 100644
index 000000000..e17f75bb1
Binary files /dev/null and b/public/blog-assets/react-server-components/header.jpg differ
diff --git a/public/blog-assets/removing-third-party-ads/header.jpg b/public/blog-assets/removing-third-party-ads/header.jpg
new file mode 100644
index 000000000..b53c55c50
Binary files /dev/null and b/public/blog-assets/removing-third-party-ads/header.jpg differ
diff --git a/public/blog-assets/run-coding-agents-in-a-sandbox/header.png b/public/blog-assets/run-coding-agents-in-a-sandbox/header.png
new file mode 100644
index 000000000..0acda7405
Binary files /dev/null and b/public/blog-assets/run-coding-agents-in-a-sandbox/header.png differ
diff --git a/public/blog-assets/start-adds-rsbuild-support/header.jpg b/public/blog-assets/start-adds-rsbuild-support/header.jpg
new file mode 100644
index 000000000..1b32223d3
Binary files /dev/null and b/public/blog-assets/start-adds-rsbuild-support/header.jpg differ
diff --git a/public/blog-assets/streaming-structured-output/header.png b/public/blog-assets/streaming-structured-output/header.png
new file mode 100644
index 000000000..688b43187
Binary files /dev/null and b/public/blog-assets/streaming-structured-output/header.png differ
diff --git a/public/blog-assets/tanstack-ai-audio-generation/header.png b/public/blog-assets/tanstack-ai-audio-generation/header.png
new file mode 100644
index 000000000..68aea3162
Binary files /dev/null and b/public/blog-assets/tanstack-ai-audio-generation/header.png differ
diff --git a/public/blog-assets/tanstack-ai-beta/devtools.png b/public/blog-assets/tanstack-ai-beta/devtools.png
new file mode 100644
index 000000000..6dc3093cc
Binary files /dev/null and b/public/blog-assets/tanstack-ai-beta/devtools.png differ
diff --git a/public/blog-assets/tanstack-ai-beta/header.png b/public/blog-assets/tanstack-ai-beta/header.png
new file mode 100644
index 000000000..15ce1962c
Binary files /dev/null and b/public/blog-assets/tanstack-ai-beta/header.png differ
diff --git a/public/blog-assets/tanstack-ai-code-mode/header.jpg b/public/blog-assets/tanstack-ai-code-mode/header.jpg
new file mode 100644
index 000000000..efe702196
Binary files /dev/null and b/public/blog-assets/tanstack-ai-code-mode/header.jpg differ
diff --git a/public/blog-assets/tanstack-ai-lazy-tool-discovery/header.webp b/public/blog-assets/tanstack-ai-lazy-tool-discovery/header.webp
new file mode 100644
index 000000000..34ed068ad
Binary files /dev/null and b/public/blog-assets/tanstack-ai-lazy-tool-discovery/header.webp differ
diff --git a/public/blog-assets/tanstack-ai-middleware/header.webp b/public/blog-assets/tanstack-ai-middleware/header.webp
new file mode 100644
index 000000000..163b24172
Binary files /dev/null and b/public/blog-assets/tanstack-ai-middleware/header.webp differ
diff --git a/public/blog-assets/tanstack-ai-orchestration/header.png b/public/blog-assets/tanstack-ai-orchestration/header.png
new file mode 100644
index 000000000..82824fe1f
Binary files /dev/null and b/public/blog-assets/tanstack-ai-orchestration/header.png differ
diff --git a/public/blog-assets/tanstack-ai-realtime-voice-chat/header.webp b/public/blog-assets/tanstack-ai-realtime-voice-chat/header.webp
new file mode 100644
index 000000000..b0e0db9b0
Binary files /dev/null and b/public/blog-assets/tanstack-ai-realtime-voice-chat/header.webp differ
diff --git a/public/blog-assets/tanstack-db-0.6-app-ready-with-persistence-and-includes/header.jpg b/public/blog-assets/tanstack-db-0.6-app-ready-with-persistence-and-includes/header.jpg
new file mode 100644
index 000000000..18f46edeb
Binary files /dev/null and b/public/blog-assets/tanstack-db-0.6-app-ready-with-persistence-and-includes/header.jpg differ
diff --git a/public/blog-assets/tanstack-open-source-awards-2026/header.jpg b/public/blog-assets/tanstack-open-source-awards-2026/header.jpg
new file mode 100644
index 000000000..186e4fe5d
Binary files /dev/null and b/public/blog-assets/tanstack-open-source-awards-2026/header.jpg differ
diff --git a/public/blog-assets/tanstack-router-route-matching-tree-rewrite/header.png b/public/blog-assets/tanstack-router-route-matching-tree-rewrite/big-number.png
similarity index 100%
rename from public/blog-assets/tanstack-router-route-matching-tree-rewrite/header.png
rename to public/blog-assets/tanstack-router-route-matching-tree-rewrite/big-number.png
diff --git a/public/blog-assets/tanstack-router-route-matching-tree-rewrite/header.jpg b/public/blog-assets/tanstack-router-route-matching-tree-rewrite/header.jpg
new file mode 100644
index 000000000..5ba4bcedb
Binary files /dev/null and b/public/blog-assets/tanstack-router-route-matching-tree-rewrite/header.jpg differ
diff --git a/public/blog-assets/tanstack-router-signal-graph/after-granular-store-graph-2.mp4 b/public/blog-assets/tanstack-router-signal-graph/after-granular-store-graph-2.mp4
new file mode 100644
index 000000000..9c5438886
Binary files /dev/null and b/public/blog-assets/tanstack-router-signal-graph/after-granular-store-graph-2.mp4 differ
diff --git a/public/blog-assets/tanstack-router-signal-graph/before-granular-store-graph-2.mp4 b/public/blog-assets/tanstack-router-signal-graph/before-granular-store-graph-2.mp4
new file mode 100644
index 000000000..df593b122
Binary files /dev/null and b/public/blog-assets/tanstack-router-signal-graph/before-granular-store-graph-2.mp4 differ
diff --git a/public/blog-assets/tanstack-router-signal-graph/bundle-size-history-react.png b/public/blog-assets/tanstack-router-signal-graph/bundle-size-history-react.png
new file mode 100644
index 000000000..af9c4c311
Binary files /dev/null and b/public/blog-assets/tanstack-router-signal-graph/bundle-size-history-react.png differ
diff --git a/public/blog-assets/tanstack-router-signal-graph/bundle-size-history-solid.png b/public/blog-assets/tanstack-router-signal-graph/bundle-size-history-solid.png
new file mode 100644
index 000000000..93f7f4f41
Binary files /dev/null and b/public/blog-assets/tanstack-router-signal-graph/bundle-size-history-solid.png differ
diff --git a/public/blog-assets/tanstack-router-signal-graph/bundle-size-history-vue.png b/public/blog-assets/tanstack-router-signal-graph/bundle-size-history-vue.png
new file mode 100644
index 000000000..81857b21b
Binary files /dev/null and b/public/blog-assets/tanstack-router-signal-graph/bundle-size-history-vue.png differ
diff --git a/public/blog-assets/tanstack-router-signal-graph/client-side-nav-react.png b/public/blog-assets/tanstack-router-signal-graph/client-side-nav-react.png
new file mode 100644
index 000000000..4e45156f1
Binary files /dev/null and b/public/blog-assets/tanstack-router-signal-graph/client-side-nav-react.png differ
diff --git a/public/blog-assets/tanstack-router-signal-graph/client-side-nav-solid.png b/public/blog-assets/tanstack-router-signal-graph/client-side-nav-solid.png
new file mode 100644
index 000000000..6e6c72a8c
Binary files /dev/null and b/public/blog-assets/tanstack-router-signal-graph/client-side-nav-solid.png differ
diff --git a/public/blog-assets/tanstack-router-signal-graph/client-side-nav-vue.png b/public/blog-assets/tanstack-router-signal-graph/client-side-nav-vue.png
new file mode 100644
index 000000000..6992a4599
Binary files /dev/null and b/public/blog-assets/tanstack-router-signal-graph/client-side-nav-vue.png differ
diff --git a/public/blog-assets/tanstack-router-signal-graph/header.jpg b/public/blog-assets/tanstack-router-signal-graph/header.jpg
new file mode 100644
index 000000000..9c03d0be2
Binary files /dev/null and b/public/blog-assets/tanstack-router-signal-graph/header.jpg differ
diff --git a/public/blog-assets/tanstack-router-signal-graph/store-updates-history-react.png b/public/blog-assets/tanstack-router-signal-graph/store-updates-history-react.png
new file mode 100644
index 000000000..8eebbb72d
Binary files /dev/null and b/public/blog-assets/tanstack-router-signal-graph/store-updates-history-react.png differ
diff --git a/public/blog-assets/tanstack-router-signal-graph/store-updates-history-solid.png b/public/blog-assets/tanstack-router-signal-graph/store-updates-history-solid.png
new file mode 100644
index 000000000..8acaef188
Binary files /dev/null and b/public/blog-assets/tanstack-router-signal-graph/store-updates-history-solid.png differ
diff --git a/public/blog-assets/tanstack-router-signal-graph/store-updates-history-vue.png b/public/blog-assets/tanstack-router-signal-graph/store-updates-history-vue.png
new file mode 100644
index 000000000..ad03c5070
Binary files /dev/null and b/public/blog-assets/tanstack-router-signal-graph/store-updates-history-vue.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/build-location-after.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/build-location-after.png
new file mode 100644
index 000000000..0b13aeebd
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/build-location-after.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/build-location-before.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/build-location-before.png
new file mode 100644
index 000000000..0a485cf35
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/build-location-before.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/delete-after.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/delete-after.png
new file mode 100644
index 000000000..116104df3
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/delete-after.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/delete-before.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/delete-before.png
new file mode 100644
index 000000000..1929a1455
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/delete-before.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/elu-empty.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/elu-empty.png
new file mode 100644
index 000000000..805778b5e
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/elu-empty.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/elu-links.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/elu-links.png
new file mode 100644
index 000000000..8fb0205a0
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/elu-links.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/elu-nested.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/elu-nested.png
new file mode 100644
index 000000000..6ac372f8f
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/elu-nested.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/header.jpg b/public/blog-assets/tanstack-start-5x-ssr-throughput/header.jpg
new file mode 100644
index 000000000..d4cb94a99
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/header.jpg differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/interpolate-after.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/interpolate-after.png
new file mode 100644
index 000000000..17fbd307e
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/interpolate-after.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/interpolate-before.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/interpolate-before.png
new file mode 100644
index 000000000..cda31f05e
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/interpolate-before.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/links-after.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/links-after.png
new file mode 100644
index 000000000..216cb4a40
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/links-after.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/nested-after.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/nested-after.png
new file mode 100644
index 000000000..3b8ee4bf3
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/nested-after.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/nothing-after.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/nothing-after.png
new file mode 100644
index 000000000..f3aa86a35
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/nothing-after.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/router-state-after.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/router-state-after.png
new file mode 100644
index 000000000..294319479
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/router-state-after.png differ
diff --git a/public/blog-assets/tanstack-start-5x-ssr-throughput/router-state-before.png b/public/blog-assets/tanstack-start-5x-ssr-throughput/router-state-before.png
new file mode 100644
index 000000000..38479c753
Binary files /dev/null and b/public/blog-assets/tanstack-start-5x-ssr-throughput/router-state-before.png differ
diff --git a/public/blog-assets/tanstack-start-solid-v2/header.png b/public/blog-assets/tanstack-start-solid-v2/header.png
new file mode 100644
index 000000000..4e3df9bcb
Binary files /dev/null and b/public/blog-assets/tanstack-start-solid-v2/header.png differ
diff --git a/public/blog-assets/tanstack-table-v9-memory-performance/charts.png b/public/blog-assets/tanstack-table-v9-memory-performance/charts.png
new file mode 100644
index 000000000..54feabaa0
Binary files /dev/null and b/public/blog-assets/tanstack-table-v9-memory-performance/charts.png differ
diff --git a/public/blog-assets/tanstack-table-v9-memory-performance/header.png b/public/blog-assets/tanstack-table-v9-memory-performance/header.png
new file mode 100644
index 000000000..f6f545a2f
Binary files /dev/null and b/public/blog-assets/tanstack-table-v9-memory-performance/header.png differ
diff --git a/public/blog-assets/tanstack-table-v9-reactivity/header.png b/public/blog-assets/tanstack-table-v9-reactivity/header.png
new file mode 100644
index 000000000..369809c5b
Binary files /dev/null and b/public/blog-assets/tanstack-table-v9-reactivity/header.png differ
diff --git a/public/blog-assets/tanstack-table-v9-taking-form/header.png b/public/blog-assets/tanstack-table-v9-taking-form/header.png
new file mode 100644
index 000000000..34842c3e4
Binary files /dev/null and b/public/blog-assets/tanstack-table-v9-taking-form/header.png differ
diff --git a/public/blog-assets/tanstack-table-v9-taking-form/screenshot-1.png b/public/blog-assets/tanstack-table-v9-taking-form/screenshot-1.png
new file mode 100644
index 000000000..d770ae671
Binary files /dev/null and b/public/blog-assets/tanstack-table-v9-taking-form/screenshot-1.png differ
diff --git a/public/blog-assets/tanstack-table-v9-typescript-performance/header.png b/public/blog-assets/tanstack-table-v9-typescript-performance/header.png
new file mode 100644
index 000000000..e117dab42
Binary files /dev/null and b/public/blog-assets/tanstack-table-v9-typescript-performance/header.png differ
diff --git a/public/blog-assets/type-safe-provider-tools-tanstack-ai/header.png b/public/blog-assets/type-safe-provider-tools-tanstack-ai/header.png
new file mode 100644
index 000000000..7b0e4cf68
Binary files /dev/null and b/public/blog-assets/type-safe-provider-tools-tanstack-ai/header.png differ
diff --git a/public/blog-assets/who-owns-the-tree/header.jpg b/public/blog-assets/who-owns-the-tree/header.jpg
new file mode 100644
index 000000000..56fd71c0a
Binary files /dev/null and b/public/blog-assets/who-owns-the-tree/header.jpg differ
diff --git a/public/blog-assets/your-mcp-your-way/header.png b/public/blog-assets/your-mcp-your-way/header.png
new file mode 100644
index 000000000..1599d6e71
Binary files /dev/null and b/public/blog-assets/your-mcp-your-way/header.png differ
diff --git a/public/fonts/Inter-Black.ttf b/public/fonts/Inter-Black.ttf
new file mode 100644
index 000000000..8e56c69d3
Binary files /dev/null and b/public/fonts/Inter-Black.ttf differ
diff --git a/public/fonts/Inter-ExtraBold.ttf b/public/fonts/Inter-ExtraBold.ttf
new file mode 100644
index 000000000..8a9a1bcb9
Binary files /dev/null and b/public/fonts/Inter-ExtraBold.ttf differ
diff --git a/public/fonts/Inter-Regular.ttf b/public/fonts/Inter-Regular.ttf
new file mode 100644
index 000000000..399a6e0c3
Binary files /dev/null and b/public/fonts/Inter-Regular.ttf differ
diff --git a/public/fonts/Inter-latin-ext.woff2 b/public/fonts/Inter-latin-ext.woff2
new file mode 100644
index 000000000..a0125fa05
Binary files /dev/null and b/public/fonts/Inter-latin-ext.woff2 differ
diff --git a/public/fonts/Inter-latin.woff2 b/public/fonts/Inter-latin.woff2
new file mode 100644
index 000000000..b0d0e2e5c
Binary files /dev/null and b/public/fonts/Inter-latin.woff2 differ
diff --git a/public/fonts/Inter.woff2 b/public/fonts/Inter.woff2
deleted file mode 100644
index 5a8d3e72a..000000000
Binary files a/public/fonts/Inter.woff2 and /dev/null differ
diff --git a/public/logos/amazon.svg b/public/logos/amazon.svg
deleted file mode 100644
index 0dde84436..000000000
--- a/public/logos/amazon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="752" width="2500" xmlns="http://www.w3.org/2000/svg" viewBox="-0.658000000000003 -1.875 384.24600000000004 119.917"><path d="M81.633 27.542V64.65a2.268 2.268 0 0 1-2.268 2.268H67.651a2.269 2.269 0 0 1-2.268-2.268V4.292a2.268 2.268 0 0 1 2.268-2.268h10.84a2.268 2.268 0 0 1 2.268 2.268v8.5S84.634.667 96.134.667c0 0 11.375-1.375 16 11.25 0 0 3.875-11.25 15.625-11.25 0 0 17.474-1.039 17.474 17.042l.133 9.958v37.108a2.268 2.268 0 0 1-2.268 2.268h-11.715a2.269 2.269 0 0 1-2.268-2.268l-.107-40.483c.333-9.167-7.083-8.5-7.083-8.5-9.333.167-8.435 11.875-8.435 11.875v37.108a2.268 2.268 0 0 1-2.268 2.268H99.508a2.269 2.269 0 0 1-2.268-2.268V25.208s.685-9.5-7.649-9.5c.001 0-8.249-1.083-7.958 11.834zM383.588 27.431v37.107a2.269 2.269 0 0 1-2.268 2.268l-12.183.236a2.269 2.269 0 0 1-2.268-2.268V25.208s.685-9.5-7.648-9.5c0 0-7.959-.392-7.959 14.503v34.438a2.269 2.269 0 0 1-2.268 2.268h-11.715a2.269 2.269 0 0 1-2.268-2.268V4.292a2.269 2.269 0 0 1 2.268-2.268h10.84a2.268 2.268 0 0 1 2.268 2.268v8.5S354.262.667 365.762.667c0 0 12.319-1.869 16.468 11.015.001-.001 1.358 2.657 1.358 15.749zM299.008.417c-14.98 0-27.125 12.625-27.125 33.875 0 18.709 9.375 33.875 27.125 33.875 16.75 0 27.125-15.166 27.125-33.875 0-20.875-12.144-33.875-27.125-33.875zm9.455 34.625c0 8-1 12.25-1 12.25-1.423 8.457-7.562 8.469-8.467 8.424-.977.039-7.168-.049-8.449-8.424 0 0-1-4.25-1-12.25v-1.333c0-8 1-12.25 1-12.25 1.281-8.375 7.473-8.463 8.449-8.425.905-.045 7.044-.034 8.467 8.425 0 0 1 4.25 1 12.25zM265.084 12.708v-8.66a2.269 2.269 0 0 0-2.268-2.268h-38.72a2.268 2.268 0 0 0-2.268 2.268v8.593a2.269 2.269 0 0 0 2.268 2.268h20.197l-23.906 34.68s-.942 1.406-.911 2.959v10.549s-.156 3.617 3.946 1.518c0 0 7.286-4.402 19.503-4.402 0 0 12.065-.15 20.109 4.781 0 0 3.339 1.518 3.339-1.82v-9.182s.303-2.43-2.884-3.947c0 0-9.258-5.084-21.399-4.25zM56.342 56.124l-3.667-5.582c-1.167-2.084-1.083-4.418-1.083-4.418V20.375C52.092-1.875 27.425.042 27.425.042 5.497.042 2.258 17.107 2.258 17.107c-.914 3.431 1.744 3.514 1.744 3.514l10.715 1.087s1.827.418 2.492-1.757c0 0 1.411-7.445 9.302-7.445 8.586 0 8.497 7.369 8.497 7.369v6.169c-17.14.573-25.083 5.331-25.083 5.331-10.583 6-9.917 17.917-9.917 17.917 0 19.416 18.5 18.582 18.5 18.582 11.833 0 18.833-8.666 18.833-8.666 2.083 3.668 5.917 7.166 5.917 7.166 1.918 2.08 3.917.334 3.917.334l8.667-7.416c1.916-1.418.5-3.168.5-3.168zm-32.059-.24c-5.566 0-7.635-5.531-6.711-10.967.925-5.436 5.729-9.708 17.437-9.583v3.305c.415 14.438-6.093 17.245-10.726 17.245zM212.008 56.124l-3.666-5.582c-1.167-2.084-1.084-4.418-1.084-4.418V20.375c.5-22.25-24.167-20.333-24.167-20.333-21.928 0-25.167 17.065-25.167 17.065-.914 3.431 1.744 3.514 1.744 3.514l10.715 1.087s1.827.418 2.492-1.757c0 0 1.411-7.445 9.302-7.445 8.586 0 8.497 7.369 8.497 7.369v6.169c-17.139.573-25.083 5.331-25.083 5.331-10.583 6-9.917 17.917-9.917 17.917 0 19.416 18.5 18.582 18.5 18.582 11.833 0 18.833-8.666 18.833-8.666 2.084 3.668 5.916 7.166 5.916 7.166 1.918 2.08 3.918.334 3.918.334l8.666-7.416c1.917-1.418.501-3.168.501-3.168zm-32.059-.24c-5.566 0-7.635-5.531-6.711-10.967.925-5.436 5.729-9.708 17.436-9.583v3.305c.416 14.438-6.091 17.245-10.725 17.245z"/><g fill="#f3971b"><path d="M241.504 104.862s-.98 1.705.224 2.086c0 0 1.36.531 3.056-1.043 0 0 12.369-10.805 12.667-30.477 0 0 .091-2.457-.895-3.129 0 0-3.875-3.428-17.809-2.385 0 0-12.146.82-18.777 6.707 0 0-.596.521-.596 1.191 0 0-.143 1.447 3.502.82 0 0 12.145-1.715 19.373-.82 0 0 3.727.447 4.77 1.715 0 0 1.714 1.416.819 6.109 0 .002-2.46 11.924-6.334 19.226z"/><path d="M239.055 85.989s1.814 2.35-1.113 4.377c0 0-31.267 25.01-83.767 25.01 0 0-54.042 2.666-99.167-38.334 0 0-1.582-1.389-.6-2.68 0 0 .878-1.188 3.151.104 0 0 42.449 26.451 98.199 26.451 0 0 38.75 1.5 78.5-15.5 0 0 3.167-1.641 4.797.572z"/></g></svg>
\ No newline at end of file
diff --git a/public/logos/apple.svg b/public/logos/apple.svg
deleted file mode 100644
index 4c7c6cfb9..000000000
--- a/public/logos/apple.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 2423.5 829" style="enable-background:new 0 0 2423.5 829;" xml:space="preserve">
-<path d="M563.7,440.5c-1-104.9,85.7-155.3,89.6-157.7c-48.8-71.3-124.6-81.1-151.6-82.2c-64.5-6.6-125.9,38-158.7,38
-	s-83.3-37.1-136.8-36c-70.4,1-135.3,40.9-171.6,103.9C-38.4,433.1,16,621.1,87.3,724c34.9,50.3,76.3,107,130.9,104.9
-	c52.6-2.1,72.4-34,135.8-34s81.3,34,136.8,33c56.5-1.1,92.3-51.4,126.9-101.9C657.5,667.5,674,611,675,608
-	C673.7,607.5,564.9,565.8,563.7,440.5"/>
-<path d="M459.4,132.4c29-35.1,48.5-83.8,43.2-132.4c-41.7,1.7-92.2,27.8-122.1,62.9c-26.8,31-50.3,80.6-43.9,128.2
-	C382.9,194.7,430.5,167.4,459.4,132.4 M929.4,543.6l-48,145.5h-61.7l157.1-462.4h72l157.7,462.4h-63.8l-49.4-145.5H929.4z
-	 M1081,496.9l-45.2-133.1c-10.3-30.2-17.1-57.6-24-84.4h-1.3c-6.9,27.4-14.4,55.5-23.3,83.7l-45.2,133.7L1081,496.9z M1253.3,465.4
-	c0-42.5-1.3-76.9-2.8-108.4h54.2l2.8,57h1.3c24.7-40.5,63.8-64.5,118-64.5c80.3,0,140.6,67.9,140.6,168.8
-	c0,119.4-72.7,178.3-150.9,178.3c-43.9,0-82.3-19.2-102.2-52.1h-1.3v180.4h-59.7V465.4z M1312.9,553.9c0,9,1.3,17.1,2.8,24.7
-	c11,41.8,47.3,70.7,90.6,70.7c63.8,0,100.9-52.1,100.9-128.3c0-66.6-35-123.4-98.8-123.4c-41.1,0-79.5,29.5-91.3,74.8
-	c-2.1,7.5-4.1,16.5-4.1,24.7L1312.9,553.9L1312.9,553.9z M1629.8,465.4c0-42.5-1.3-76.9-2.8-108.4h54.2l2.8,57h1.3
-	c24.7-40.5,63.8-64.5,118-64.5c80.3,0,140.6,67.9,140.6,168.8c0,119.4-72.7,178.3-150.9,178.3c-43.9,0-82.3-19.2-102.2-52.1h-1.3
-	v180.4h-59.7V465.4z M1689.5,553.9c0,9,1.3,17.1,2.8,24.7c11,41.8,47.3,70.7,90.6,70.7c63.8,0,100.9-52.1,100.9-128.3
-	c0-66.6-35-123.4-98.8-123.4c-41.1,0-79.5,29.5-91.3,74.8c-2.1,7.5-4.1,16.5-4.1,24.7L1689.5,553.9L1689.5,553.9z M2006.4,202h60.4
-	v487h-60.4V202z M2188.2,534c1.3,81.6,53.5,115.3,113.8,115.3c43.2,0,69.3-7.5,91.9-17.1l10.3,43.2c-21.2,9.6-57.6,20.6-110.4,20.6
-	c-102.2,0-163.3-67.2-163.3-167.4s59-179.1,155.7-179.1c108.4,0,137.2,95.3,137.2,156.4c0,12.4-1.3,21.9-2.1,28.1H2188.2z
-	 M2365.2,490.8c0.7-38.4-15.8-98.1-83.7-98.1c-61.1,0-87.8,56.3-92.6,98.1H2365.2z"/>
-</svg>
diff --git a/public/logos/cisco.svg b/public/logos/cisco.svg
deleted file mode 100644
index 568be678e..000000000
--- a/public/logos/cisco.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2500" height="1424" viewBox="11.752 12.764 797.655 454.437"><path d="M271 418.843h-32.635v-129.33H271v129.33z" fill="#c4122e"/><g transform="matrix(10.33728 0 0 -10.33728 -861.345 7843.84)"><defs><path id="a" d="M84.461 713.596h77.163v43.961H84.461v-43.961z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><g clip-path="url(#b)"><path d="M134.996 727.2c-.13.066-1.146.668-2.656.668-2.041 0-3.457-1.42-3.457-3.337 0-1.859 1.355-3.34 3.457-3.34 1.484 0 2.517.59 2.656.664v-3.358c-.396-.11-1.475-.445-2.877-.445-3.551 0-6.668 2.448-6.668 6.48 0 3.735 2.82 6.475 6.668 6.475 1.48 0 2.578-.36 2.877-.449V727.2zM102.043 727.2c-.127.066-1.142.668-2.652.668-2.045 0-3.46-1.42-3.46-3.337 0-1.859 1.356-3.34 3.46-3.34 1.484 0 2.516.59 2.652.664v-3.358c-.392-.11-1.47-.445-2.88-.445-3.548 0-6.661 2.448-6.661 6.48 0 3.735 2.82 6.475 6.662 6.475 1.486 0 2.582-.36 2.879-.449V727.2zM144.927 727.821c-1.873 0-3.264-1.474-3.264-3.29 0-1.82 1.391-3.293 3.264-3.293 1.871 0 3.266 1.473 3.266 3.293 0 1.816-1.395 3.29-3.266 3.29m6.611-3.29c0-3.579-2.763-6.479-6.61-6.479-3.849 0-6.608 2.9-6.608 6.48 0 3.572 2.76 6.475 6.607 6.475 3.848 0 6.611-2.903 6.611-6.476M121.512 727.941c-.047.015-1.376.382-2.468.382-1.265 0-1.953-.424-1.953-1.025 0-.762.928-1.028 1.447-1.192l.871-.277c2.05-.652 2.983-2.055 2.983-3.579 0-3.143-2.764-4.199-5.18-4.199-1.679 0-3.252.31-3.407.342v2.88c.278-.07 1.602-.466 2.981-.466 1.571 0 2.293.46 2.293 1.168 0 .634-.625 1-1.408 1.246-.19.064-.478.154-.674.218-1.758.556-3.224 1.59-3.224 3.66 0 2.34 1.752 3.911 4.662 3.911 1.537 0 2.983-.373 3.077-.398v-2.67z" fill="#c4122e"/><path d="M89.154 744.23c0 .862-.704 1.561-1.567 1.561s-1.568-.699-1.568-1.56v-3.285a1.568 1.568 0 0 1 3.135 0v3.284zM97.763 748.54a1.567 1.567 0 0 1-3.135 0v-7.594a1.567 1.567 0 0 1 3.135 0v7.595zM106.373 754.438c0 .862-.704 1.562-1.567 1.562-.864 0-1.568-.7-1.568-1.562v-16.613a1.568 1.568 0 0 1 3.135 0v16.613zM114.982 748.54a1.567 1.567 0 0 1-3.135 0v-7.594a1.567 1.567 0 0 1 3.135 0v7.595zM123.582 744.23a1.56 1.56 0 0 1-1.558 1.561 1.566 1.566 0 0 1-1.567-1.56v-3.285a1.562 1.562 0 1 1 3.125 0v3.284zM132.195 748.54a1.563 1.563 0 0 1-3.125 0v-7.594a1.562 1.562 0 1 1 3.125 0v7.595zM140.81 754.438a1.562 1.562 0 0 1-3.125 0v-16.613a1.564 1.564 0 1 1 3.125 0v16.613zM149.423 748.54c0 .863-.699 1.564-1.582 1.564a1.563 1.563 0 0 1-1.562-1.563v-7.595c0-.867.7-1.566 1.562-1.566.883 0 1.582.699 1.582 1.566v7.595zM158.02 744.23a1.563 1.563 0 0 1-3.128 0v-3.284c0-.867.701-1.567 1.564-1.567.862 0 1.563.7 1.563 1.567v3.284z" fill="#15495d"/><path d="M156.213 719.922v-.196h-.558v-1.451h-.23v1.45h-.56v.197h1.348zM156.33 719.922h.359l.493-1.351h.008l.477 1.35h.352v-1.646h-.235v1.35h-.008l-.5-1.35h-.217l-.488 1.35h-.011v-1.35h-.23v1.647z" fill="#c4122e"/></g></g></svg>
\ No newline at end of file
diff --git a/public/logos/docusign.svg b/public/logos/docusign.svg
deleted file mode 100644
index aac4ba1fc..000000000
--- a/public/logos/docusign.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 1 130 28.2" xmlns="http://www.w3.org/2000/svg" width="2500" height="523"><path d="M0 1.4h9.4c6 0 9.8 4.8 9.8 11.4 0 3.6-1.2 6.8-3.6 8.8C14 23 11.8 23.8 9 23.8H0zm8.7 18.5c4.3 0 5.9-2.6 5.9-7s-1.9-7.5-5.8-7.5H4.5V20h4.2zm11.2-4.1c0-4.8 3.4-8.5 8.4-8.5s8.4 3.7 8.4 8.5-3.4 8.5-8.4 8.5-8.4-3.8-8.4-8.5zm12.4 0c0-3.1-1.5-5.3-4.1-5.3s-4.1 2.1-4.1 5.3 1.4 5.2 4.1 5.2 4.1-2.1 4.1-5.2zm5.2 0c0-4.8 3.1-8.5 8-8.5 4.2 0 6.7 2.4 7.3 5.9h-4.2c-.3-1.4-1.4-2.5-2.9-2.5-2.6 0-3.9 2-3.9 5.1 0 3 1.2 5.1 3.8 5.1 1.7 0 2.9-.9 3.2-2.7H53c-.3 3.4-2.9 6.1-7.2 6.1-5.1-.1-8.3-3.8-8.3-8.5zm26.7 8v-1.9h-.1c-1.1 1.5-2.3 2.3-4.6 2.3-3.6 0-5.6-2.3-5.6-5.8V7.7h4.2v10c0 1.9.8 2.9 2.7 2.9 2 0 3.2-1.5 3.2-3.6V7.7h4.3v16h-4.1zM89 1.5h4.3v4H89zm0 6.2h4.3v16H89zm6 16.5h4.2c.3 1 1.3 1.8 3.2 1.8 2.4 0 3.6-1.2 3.6-3.3v-1.8h-.1c-.9 1.1-2.2 1.9-4.2 1.9-3.6 0-7.1-2.8-7.1-7.7 0-4.8 2.9-7.8 6.9-7.8 2 0 3.5.8 4.4 2.1h.1V7.7h4.1v14.8c0 2.3-.7 3.8-1.9 4.9-1.3 1.3-3.4 1.8-5.8 1.8-4.2 0-6.9-1.8-7.4-5zm11.3-9.2c0-2.3-1.3-4.3-3.8-4.3-2.2 0-3.6 1.7-3.6 4.4s1.4 4.3 3.6 4.3c2.7 0 3.8-2 3.8-4.4zm9.9-5.1c1.2-1.7 2.7-2.6 4.8-2.6 3.3 0 5.5 2.5 5.5 6v10.5h-4.3V14c0-1.7-1-2.9-2.8-2.9-1.9 0-3.3 1.5-3.3 3.7v9.1H112v-16h4.2zm-36.9.4C76 9.6 74.5 9 74.5 7.2c0-1.6 1.6-2.6 4-2.6 2.2 0 3.9 1 4.3 3.1h4.4C86.7 3.4 83.5 1 78.5 1s-8.6 2.3-8.6 6.7c0 4.7 3.7 5.7 7.7 6.6 3.4.8 5.5 1.2 5.5 3.4 0 2.1-2 2.9-4.3 2.9-3.2 0-4.7-1.1-5-3.8h-4.4c.2 4.7 3.6 7.4 9.7 7.4 5 0 8.7-2.5 8.7-7.1-.1-4.7-3.9-5.8-8.5-6.8zM128.3 10.7c-.9 0-1.7-.8-1.7-1.7s.8-1.7 1.7-1.7 1.7.8 1.7 1.7-.8 1.7-1.7 1.7zm0-3.1c-.8 0-1.4.6-1.4 1.4s.6 1.4 1.4 1.4 1.4-.6 1.4-1.4-.6-1.4-1.4-1.4z"/><path d="M127.7 8.1h.6c.2 0 .4 0 .5.1s.2.2.2.4c0 .3-.2.4-.3.5l.4.7h-.4l-.3-.6h-.4v.6h-.3zm.3.3v.5h.3c.1 0 .3 0 .3-.3 0 0 0-.2-.1-.2z"/></svg>
\ No newline at end of file
diff --git a/public/logos/google.svg b/public/logos/google.svg
deleted file mode 100644
index 519fe653e..000000000
--- a/public/logos/google.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="857" viewBox="0.512 0.511 748.99 256.61"><g transform="translate(4636.413 -2865.209)"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="-11445.563" y1="603.918" x2="-11445.563" y2="465.768" gradientTransform="matrix(1.3509 0 0 -1.3509 10917.478 3681.026)"><stop offset="0" stop-color="#196eef"/><stop offset=".5" stop-color="#186dee"/><stop offset="1" stop-color="#1065e7"/></linearGradient><path d="M-4520.08 2990.41h32.21v45.24c-10.05 3.229-22.74 5-35.931 5-53.46 0-84.88-45.78-84.88-90.49 0-43.851 28.42-74.61 68.07-74.61 25.09 0 39.689 8.5 52.75 20.34v14.76l24.49-24.49c-15.49-10.48-37.92-20.44-69.98-20.44-70.38 0-102.55 50.351-102.55 91.73 0 58.899 42.9 94.38 96.811 94.38 26.14 0 49.35-3.99 76.16-11.45v-46.74c0-2.39 1.05-4.03 2.62-5.47l8.46-8.46h-57.45l-10.78 10.7z" fill="url(#a)"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-11323.519" y1="556.948" x2="-11323.519" y2="467.618" gradientTransform="matrix(1.3509 0 0 -1.3509 10917.478 3681.026)"><stop offset="0" stop-color="#de5744"/><stop offset=".5" stop-color="#db4632"/><stop offset="1" stop-color="#d13d29"/></linearGradient><path d="M-4375.79 2928.93c-40.51 0-65.61 29.601-65.61 61.021 0 27.12 20.221 59.319 61.19 59.319 39.41 0 63.59-29.659 63.59-61.629 0-29.78-23.63-58.7-59.17-58.7v-.011zm-6.721 8.63c28.561 0 41.28 37.21 41.28 63.75 0 39.47-29.61 40.25-33.15 40.25-13.55 0-23.02-8.189-30.109-18.93-6.24-9.899-12.34-28.29-12.34-46.26 0-17.9 5.859-26.64 15.08-33.07 7.54-4.82 14.6-5.74 19.229-5.74h.01z" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-11130.575" y1="556.948" x2="-11130.575" y2="413.518" gradientTransform="matrix(1.3509 0 0 -1.3509 10917.478 3681.026)"><stop offset="0" stop-color="#1a6fef"/><stop offset=".25" stop-color="#1e72ef"/><stop offset=".5" stop-color="#166bec"/><stop offset=".75" stop-color="#1267e9"/><stop offset="1" stop-color="#1063e5" stop-opacity=".87"/></linearGradient><path d="M-4110.979 2928.92c-35.381 0-54.521 22.4-54.521 47.41 0 19.04 13.64 40.52 41.78 40.52h7.119s-1.939 4.71-1.949 9.26c0 6.711 2.41 10.48 7.529 16.28-48.42 2.95-67.88 22.48-67.88 43.47 0 18.381 17.601 36.471 54.59 36.471 43.79 0 66.47-24.311 66.47-48.17 0-16.82-8.38-26.04-29.6-41.94-6.24-4.85-7.45-7.939-7.45-11.569 0-5.2 3.11-8.641 4.25-9.94 2.01-2.12 5.49-4.54 6.79-5.7 7.13-6.04 17.2-14.979 17.2-32.82 0-12.24-5.091-22.77-16.69-32.63h14.16l10.64-10.64h-52.438zm-9.76 7.96c6.42 0 11.779 2.27 17.439 6.98 6.279 5.66 16.311 20.87 16.311 39.69 0 20.31-15.78 25.87-24.32 25.87-4.18 0-9.189-1.17-13.43-4.07-9.42-6.109-18.771-22.37-18.771-41.72 0-17.46 10.4-26.75 22.771-26.75zm14.01 113.22c2.699 0 4.64.221 4.64.221s6.37 4.55 10.82 7.949c10.36 8.19 16.819 14.45 16.819 25.601 0 15.33-14.22 27.35-37.25 27.35-25.279 0-44.6-11.77-44.6-30.989 0-15.921 13.24-29.623 49.571-30.132z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="-11061.771" y1="601.408" x2="-11061.771" y2="470.128" gradientTransform="matrix(1.3509 0 0 -1.3509 10917.478 3681.026)"><stop offset="0" stop-color="#0aa561"/><stop offset=".5" stop-color="#009b58"/><stop offset="1" stop-color="#00914b"/></linearGradient><path d="M-4050.88 3045.76h48.57l7.399-7.399-13.93-1.74c-3.75-.46-5.979-3.7-5.979-6.84v-146.71c0-2.89 1.34-4.37 2.319-5.311l8.761-8.76h-41.42l-10.78 10.78h16.1v151.97c0 2.16-.68 3.63-2.14 5.14l-8.9 8.87z" fill="url(#d)"/><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="-10998.289" y1="556.948" x2="-10998.289" y2="467.864" gradientTransform="matrix(1.3509 0 0 -1.3509 10917.478 3681.026)"><stop offset="0" stop-color="#de5644"/><stop offset=".5" stop-color="#da4531"/><stop offset="1" stop-color="#ce3a28"/></linearGradient><path d="M-3936.5 2928.93c-27.12 0-55.93 20.67-55.93 57.78 0 30.649 20.67 62.56 59.29 62.56 9.63 0 17.56-1.239 24.99-4.649 7.97-3.67 15.64-9.63 21.239-17.12-10.569 5.33-19.189 8.83-30.64 8.83-21.76 0-42.74-15.7-50.08-44.56l76.87-31.07c-4.44-15.83-16.96-31.771-45.729-31.771h-.01zm-5.021 8.49c14.551 0 25.07 11.97 25.07 21.34 0 3.03-1.899 4.63-5.66 6.11l-47.25 19.11s-1.279-5.95-1.279-12.38c0-26.97 19.5-34.18 29.119-34.18z" fill="url(#e)"/><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="-11221.762" y1="556.754" x2="-11221.762" y2="467.795" gradientTransform="matrix(1.3509 0 0 -1.3509 10917.478 3681.026)"><stop offset="0" stop-color="#ffc01a"/><stop offset=".5" stop-color="#ffba03"/><stop offset="1" stop-color="#ffb300"/></linearGradient><path d="M-4238.33 2928.93c-40.51 0-65.61 29.601-65.61 61.021 0 27.12 20.221 59.319 61.19 59.319 39.41 0 63.59-29.659 63.59-61.629 0-29.78-23.63-58.7-59.17-58.7v-.011zm-6.721 8.63c28.561 0 41.28 37.21 41.28 63.75 0 39.47-29.61 40.25-33.15 40.25-13.55 0-23.02-8.189-30.109-18.93-6.24-9.899-12.34-28.29-12.34-46.26 0-17.9 5.859-26.64 15.08-33.07 7.54-4.82 14.6-5.74 19.229-5.74h.01z" fill="url(#f)"/></g></svg>
\ No newline at end of file
diff --git a/public/logos/hp.svg b/public/logos/hp.svg
deleted file mode 100644
index 76edb0bb9..000000000
--- a/public/logos/hp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0.85 0.85 431.99799999999993 432" xmlns="http://www.w3.org/2000/svg" width="2500" height="2500"><path d="M216.85 432.85c-2.147 0-4.285-.038-6.42-.1l44.144-121.318h60.75c10.663 0 22.368-8.197 26.015-18.212l47.89-131.546c7.836-21.537-4.5-39.157-27.417-39.157h-84.28L206.82 316.833h-.027l-40.09 110.153C71.594 404.376.85 318.878.85 216.85c0-99.085 66.72-182.58 157.683-208.026l-41.365 113.693h-.012L48.39 311.432l45.777.004 58.48-160.53h34.405l-58.48 160.53 45.76.008 54.498-149.77c7.84-21.537-4.497-39.157-27.393-39.157h-38.48L207.14 1.077c3.22-.143 6.454-.227 9.708-.227 119.294 0 216 96.706 216 216 0 119.293-96.706 216-216 216zm130.692-282.06h-34.395L264.98 282.948h34.396z"/></svg>
\ No newline at end of file
diff --git a/public/logos/intuit.svg b/public/logos/intuit.svg
deleted file mode 100644
index 23a2827eb..000000000
--- a/public/logos/intuit.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 192.756 192.756"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="#fff" d="M0 0h192.756v192.756H0V0z"/><path d="M46.988 115.912V84.705h25.891c3.082 0 7.089 4.943 7.089 7.724v23.483h-12.02V99.844c0-2.162-.925-4.943-3.083-4.943H58.7v21.011H46.988zM98.461 84.859V76.98H85.054v7.879h-3.699v10.042h3.699v12.824c0 2.781 4.007 8.188 7.552 8.188h13.253v-9.578h-5.855c-.771 0-1.543-.619-1.543-1.391V94.901h7.398V84.859h-7.398zM140.457 84.782l.088 31.14h-25.891c-3.17-.086-7.178-5.031-7.178-7.811v-23.33h12.021v15.914c0 2.162.926 4.943 3.082 4.943h6.166V84.782h11.712zM155.176 115.912V84.859H143v31.053h12.176zM173.979 84.782v-7.879H160.57v7.879h-3.699v10.042h3.699v12.823c0 2.781 4.006 8.189 7.551 8.189h13.254v-9.58h-5.857c-.77 0-1.539-.617-1.539-1.391V94.824h7.396V84.782h-7.396zM17.877 83.469v-3.754h-3.745v3.754h3.745zM10.325 87.161v-3.754H6.58v3.754h3.745zM21.559 91.04v-3.754h-3.745v3.754h3.745zM17.814 94.794V91.04H14.07v3.754h3.744zM14.07 90.915v-3.754h-3.745v3.754h3.745zM25.304 94.794V91.04h-3.745v3.754h3.745zM32.794 94.794V91.04h-3.745v3.754h3.745zM6.58 94.669v-3.754H2.834v3.754H6.58zM10.325 98.424v-3.755H6.58v3.755h3.745z" fill="#900d35"/><path d="M27.358 115.932h17.877V76.825h-23.31c6.617 1.55 12.483 5.794 12.599 15.295.007.619 3.699 7.57 3.699 7.57.308.619.462 1.699-.617 1.699h-1.695c-.771 0-1.233.156-1.233 1.082v4.172c0 1.236-.616 2.162-2.157 2.162h-3.083c-1.387 0-2.158.928-2.158 2.318v4.635l.078.174zM188.49 85.796c.609.612.914 1.353.914 2.22 0 .874-.305 1.619-.914 2.235a3.006 3.006 0 0 1-2.219.924 3.012 3.012 0 0 1-2.221-.924 3.073 3.073 0 0 1-.908-2.235c0-.867.303-1.608.912-2.22a3.014 3.014 0 0 1 2.217-.924 3.01 3.01 0 0 1 2.219.924zm.364-.353c-.711-.708-1.572-1.062-2.582-1.062a3.5 3.5 0 0 0-2.568 1.062c-.711.712-1.068 1.57-1.068 2.573 0 1.013.354 1.876 1.059 2.588.709.715 1.568 1.072 2.578 1.072s1.871-.357 2.582-1.072a3.54 3.54 0 0 0 1.068-2.588 3.509 3.509 0 0 0-1.069-2.573zm-2.042 2.404c-.148.06-.373.089-.67.089h-.637v-1.45h.602c.391 0 .674.049.852.149s.266.295.266.586c0 .308-.137.517-.413.626zm-2.011 2.161h.705v-1.58h.557c.373 0 .635.043.785.129.252.149.377.456.377.919v.318l.016.129a.239.239 0 0 0 .01.044c.002.014.006.027.01.04h.66l-.025-.049a.708.708 0 0 1-.035-.209 5.325 5.325 0 0 1-.01-.298v-.293c0-.202-.072-.409-.219-.621-.145-.212-.375-.343-.689-.393.248-.04.441-.104.58-.193.262-.169.395-.433.395-.79 0-.503-.207-.841-.621-1.013-.232-.097-.598-.145-1.094-.145h-1.4v4.005h-.002z" fill="#900d35"/></g></svg>
\ No newline at end of file
diff --git a/public/logos/microsoft.svg b/public/logos/microsoft.svg
deleted file mode 100644
index 89f62370a..000000000
--- a/public/logos/microsoft.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 2499.6 2500" viewBox="0 0 2499.6 2500" xmlns="http://www.w3.org/2000/svg"><path d="m1187.9 1187.9h-1187.9v-1187.9h1187.9z" fill="#f1511b"/><path d="m2499.6 1187.9h-1188v-1187.9h1187.9v1187.9z" fill="#80cc28"/><path d="m1187.9 2500h-1187.9v-1187.9h1187.9z" fill="#00adef"/><path d="m2499.6 2500h-1188v-1187.9h1187.9v1187.9z" fill="#fbbc09"/></svg>
\ No newline at end of file
diff --git a/public/logos/nordstrom.svg b/public/logos/nordstrom.svg
deleted file mode 100644
index 766d5f06f..000000000
--- a/public/logos/nordstrom.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 192.756 192.756"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="#fff" d="M0 0h192.756v192.756H0V0z"/><path d="M8.504 127.518c.309-.076.579-.135.849-.135s.578.059.848.135c-.135-5.166-.174-9.1-.174-11.779 0-1.273.02-2.584.039-3.895l5.996 7.576c2.603 3.26 4.743 6.092 6.343 8.484h.328c-.02-2.102-.058-4.357-.058-6.729 0-4.223.058-8.85.212-13.92-.251.057-.521.115-.771.115s-.521-.059-.791-.115c.096 2.66.192 6.883.192 12.607 0 .752-.019 1.602-.058 2.623-3.663-4.434-7.77-9.543-12.146-15.617h-.481v3.143c0 6.112-.097 11.954-.328 17.507zM38.155 127.941c5.495 0 9.119-4.24 9.119-10.506 0-6.439-3.47-10.547-9.119-10.547-5.533 0-9.138 4.127-9.138 10.547 0 6.458 3.47 10.506 9.138 10.506z"/><path d="M38.155 126.805c-4.28 0-6.67-3.297-6.67-9.293 0-6.111 2.429-9.523 6.67-9.523 4.338 0 6.651 3.277 6.651 9.408.001 6.091-2.409 9.408-6.651 9.408z" fill="#fff"/><path d="M72.221 127.518c1.002-.02 1.658-.057 1.986-.057 1.234 0 2.449.135 3.605.135 6.42 0 9.756-3.838 9.756-10.816 0-3.701-1.138-6.555-3.162-8.193-1.465-1.176-3.2-1.428-5.533-1.428-2.005 0-3.605.154-4.8.154-.694 0-1.311-.037-1.851-.057.097 3.027.097 6.4.097 10.141-.001 3.566-.001 6.958-.098 10.121z"/><path d="M74.438 126.246a520.02 520.02 0 0 1-.096-9.621c0-2.66.038-5.359.077-8.117 1.388-.135 2.66-.154 3.74-.154 4.916 0 7.017 2.584 7.017 8.984 0 6.111-2.68 9.062-8.135 9.062-.791 0-1.658-.058-2.603-.154z" fill="#fff"/><path d="M93.332 126.342c1.099 1.041 2.525 1.562 4.145 1.562 3.586 0 5.881-2.604 5.881-6.402 0-2.582-1.002-4.01-3.258-5.166l-2.006-1.041c-1.716-.887-2.506-1.869-2.506-3.625 0-2.256 1.138-3.682 2.969-3.682 1.408 0 2.545.771 3.412 2.295.213-.83.424-1.602.693-2.295-1.213-.732-2.391-1.1-3.758-1.1-3.124 0-5.225 2.41-5.225 5.746 0 2.391 1.06 3.875 3.297 4.973l2.004 1.004c1.717.848 2.506 1.793 2.506 3.74 0 2.699-1.445 4.375-3.547 4.375-1.812 0-3.335-1.291-4.087-3.547a17.99 17.99 0 0 1-.52 3.163zM112.766 127.518c.404-.057.809-.057 1.176-.057.404 0 .771 0 1.117.057a691.98 691.98 0 0 1-.115-12.223c0-2.469.02-4.686.115-6.65h.715c1.695 0 3.16.096 4.395.365a4.804 4.804 0 0 1-.076-.887c0-.309.02-.598.076-.867-2.312.057-4.492.096-6.594.096-2.082 0-4.029-.039-5.918-.096.02.289.059.617.059.926 0 .25-.039.559-.059.828 1.061-.25 2.604-.365 4.551-.365h.674v4.953c-.001 4.377-.06 9.023-.116 13.92zM54.08 127.518c.405-.076.791-.135 1.157-.135.404 0 .771.059 1.156.135-.077-1.658-.135-3.143-.135-4.473v-11.586c0-.887.02-1.928.154-3.027.79-.059 1.465-.078 1.928-.078 2.854 0 4.261 1.33 4.261 4.012 0 2.93-1.832 4.355-5.514 4.355h-.231l3.566 5.631c.983 1.541 2.005 3.277 3.104 5.166a8.655 8.655 0 0 1 1.427-.135c.501 0 .983.059 1.484.135-2.525-3.74-4.781-7.057-6.632-10.025 3.22-.713 4.955-2.736 4.955-5.494 0-3.238-1.87-4.801-5.572-4.801-1.6 0-2.911.115-3.971.115-.27 0-.675-.037-1.138-.057.116 2.641.174 6.016.174 10.141 0 3.835-.019 7.191-.173 10.121zM125.934 127.518a6.164 6.164 0 0 1 1.156-.135c.404 0 .771.059 1.137.135a98.514 98.514 0 0 1-.115-4.473v-11.586c0-.887.02-1.928.135-3.027a27.204 27.204 0 0 1 1.947-.078c2.834 0 4.262 1.33 4.262 4.012 0 2.93-1.832 4.355-5.533 4.355h-.213l3.566 5.631c.984 1.541 2.006 3.277 3.086 5.166.48-.076.943-.135 1.445-.135.482 0 .982.059 1.484.135-2.525-3.74-4.781-7.057-6.652-10.025 3.221-.713 4.955-2.736 4.955-5.494 0-3.238-1.85-4.801-5.57-4.801-1.582 0-2.893.115-3.953.115-.27 0-.674-.037-1.137-.057.115 2.641.172 6.016.172 10.141-.001 3.835-.038 7.191-.172 10.121zM150.629 127.941c5.494 0 9.119-4.24 9.119-10.506 0-6.439-3.471-10.547-9.119-10.547-5.533 0-9.139 4.127-9.139 10.547 0 6.458 3.471 10.506 9.139 10.506z"/><path d="M150.629 126.805c-4.279 0-6.67-3.297-6.67-9.293 0-6.111 2.43-9.523 6.67-9.523 4.338 0 6.672 3.277 6.672 9.408 0 6.091-2.43 9.408-6.672 9.408z" fill="#fff"/><path d="M164.703 127.518c.348-.076.674-.135 1.002-.135.309 0 .617.059.906.135.039-2.756.387-7.672 1.215-14.768l3.875 8.541c1.061 2.352 1.908 4.357 2.352 6.207h.348c.693-2.352 2.66-7.422 6.344-14.787.309 1.908.809 6.826 1.271 14.807.387-.076.752-.135 1.119-.135.365 0 .752.059 1.117.135a1816.3 1816.3 0 0 1-1.967-20.648h-.309c-2.506 5.631-4.936 11.01-7.344 16.117-2.314-5.09-4.59-10.449-6.961-16.117h-.404c-1.04 9.968-1.831 16.888-2.564 20.648zM85.138 64.456c7.808-5.822 15.596-5.456 23.385 0v21.149c-7.789 5.456-15.577 5.803-23.385 0V64.456z"/><path d="M107.561 64.957v20.127c-7.115 4.82-14.421 5.09-21.458.02V64.938c7.036-5.051 14.342-4.801 21.458.019z" fill="#fff"/><path d="M106.094 65.748v18.546c-6.246 3.991-12.395 4.184-18.526.039V65.709c6.169-4.145 12.338-3.894 18.526.039z"/><path d="M91.134 83.06c.231-.077.462-.116.675-.116.212 0 .443.039.675.116a341.082 341.082 0 0 1-.154-9.351c0-1.021.02-2.062.039-3.084l4.743 5.996c2.062 2.603 3.76 4.839 5.031 6.748h.27a385.491 385.491 0 0 1 .115-16.406 2.266 2.266 0 0 1-.617.096c-.191 0-.404-.039-.615-.096.076 2.12.154 5.475.154 10.025 0 .579-.02 1.272-.039 2.063-2.912-3.509-6.189-7.558-9.64-12.396h-.385v2.506a355.678 355.678 0 0 1-.252 13.899z" fill="#fff"/></g></svg>
\ No newline at end of file
diff --git a/public/logos/salesforce.svg b/public/logos/salesforce.svg
deleted file mode 100644
index 2f8d2749f..000000000
--- a/public/logos/salesforce.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 192.756 192.756"><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M0 0h192.756v192.756H0V0z"/><path d="M17.982 98.957c-2.263-.545-4.27-1.137-4.27-3.498 0-3.225 3.16-3.634 4.697-3.634 1.196 0 2.348.227 3.202.772 1.366.818 1.623 1.862 1.75 2.453l2.434-.636c-.171-.682-.683-2.498-2.519-3.679-1.11-.727-2.732-1.227-4.739-1.227-6.105 0-7.301 3.815-7.301 6.042 0 4.223 3.416 5.133 5.294 5.586.811.182 1.665.363 2.434.545 1.665.363 4.354 1.045 4.354 3.861 0 2.271-1.665 4.27-5.166 4.27s-5.251-2.361-5.721-4.314l-2.477.908c.726 1.861 1.623 3.225 3.074 4.27.854.635 2.519 1.551 5.123 1.551 5.294 0 7.643-3.459 7.643-6.639 0-1.408-.47-2.77-1.366-3.814-1.281-1.5-2.989-1.953-4.312-2.316l-2.134-.501z" fill-rule="evenodd" clip-rule="evenodd"/><path d="M17.982 98.957c-2.263-.545-4.27-1.137-4.27-3.498 0-3.225 3.16-3.634 4.697-3.634 1.195 0 2.348.227 3.202.772 1.366.818 1.623 1.862 1.75 2.453l2.434-.636c-.171-.682-.684-2.498-2.519-3.679-1.11-.727-2.732-1.227-4.739-1.227-6.105 0-7.301 3.815-7.301 6.042 0 4.223 3.416 5.133 5.294 5.586.811.182 1.665.363 2.434.545 1.665.363 4.354 1.045 4.354 3.861 0 2.271-1.665 4.27-5.166 4.27s-5.251-2.361-5.721-4.314l-2.477.908c.726 1.861 1.623 3.225 3.074 4.27.854.635 2.519 1.551 5.123 1.551 5.294 0 7.643-3.459 7.643-6.639 0-1.408-.47-2.77-1.366-3.814-1.281-1.5-2.989-1.953-4.312-2.316l-2.134-.501z" fill="none" stroke="#fff" stroke-width=".617" stroke-miterlimit="2.613"/><path d="M46.973 109.541c-3.031.045-3.074-.863-3.074-4.68v-6.994c0-2.135 0-3.135-.256-4.18-.939-3.542-4.696-4.224-7.172-4.224-2.775 0-5.379.908-6.831 3.361-.812 1.272-1.025 2.634-1.196 3.724l2.775.5c.043-2.271.341-5.269 5.337-5.269 4.953 0 4.953 3.452 4.953 4.998v1.09l-2.434.59c-6.404 1.59-11.229 2.771-11.229 7.768 0 2.271 1.366 5.912 6.404 5.912 2.946 0 5.892-1.371 7.087-4.004.042-.137.085-.273.171-.455v.408c.213 3.316 2.391 3.59 5.465 3.59v-2.135zm-5.465-7.723c-.042 2.18-.128 3.906-1.708 5.588-1.324 1.406-3.501 2.361-5.422 2.361-2.86 0-4.056-1.863-4.056-3.588 0-2.682 2.562-3.498 4.867-4.18 1.067-.318 2.22-.637 5.038-1.453l1.281-.318v1.59z" fill-rule="evenodd" clip-rule="evenodd"/><path d="M46.972 109.541c-3.031.045-3.074-.863-3.074-4.68v-6.994c0-2.135 0-3.135-.256-4.179-.939-3.543-4.696-4.225-7.172-4.225-2.775 0-5.379.908-6.831 3.361-.812 1.272-1.025 2.634-1.196 3.724l2.775.5c.042-2.271.341-5.269 5.337-5.269 4.953 0 4.953 3.452 4.953 4.998v1.09l-2.434.59c-6.404 1.59-11.229 2.771-11.229 7.768 0 2.271 1.366 5.912 6.404 5.912 2.946 0 5.892-1.371 7.087-4.004.042-.137.085-.273.171-.455v.408c.213 3.316 2.391 3.59 5.464 3.59v-2.135h.001zm-5.464-7.723c-.043 2.18-.128 3.906-1.708 5.588-1.324 1.406-3.501 2.361-5.422 2.361-2.86 0-4.056-1.863-4.056-3.588 0-2.682 2.562-3.498 4.867-4.18 1.067-.318 2.22-.637 5.038-1.453l1.281-.318v1.59z" fill="none" stroke="#fff" stroke-width=".617" stroke-miterlimit="2.613"/><path fill-rule="evenodd" clip-rule="evenodd" d="M50.146 79.607h-2.519v32.069h2.519V79.607z"/><path fill="none" stroke="#fff" stroke-width=".617" stroke-miterlimit="2.613" d="M50.146 79.607h-2.519v32.069h2.519V79.607z"/><path d="M66.854 105.27c-1.75 3.725-4.312 4.543-6.532 4.543-.854 0-4.654 0-6.276-4.451-.598-1.682-.683-3.361-.64-4.496h15.797c.171-5.633-3.031-11.356-9.18-11.356-4.952 0-9.393 3.997-9.393 11.175 0 6.041 2.946 11.543 9.692 11.543 4.397 0 6.361-2.322 6.959-3.004a11.448 11.448 0 0 0 1.921-3.271l-2.348-.683zm-13.407-6.586c.47-4.133 3.032-6.767 6.532-6.767 2.006 0 3.373.817 4.227 1.635 1.366 1.363 1.921 3.226 2.135 5.132H53.447z" fill-rule="evenodd" clip-rule="evenodd"/><path d="M66.853 105.27c-1.75 3.725-4.312 4.543-6.532 4.543-.854 0-4.653 0-6.276-4.451-.598-1.682-.683-3.361-.64-4.496h15.797c.171-5.633-3.031-11.356-9.18-11.356-4.952 0-9.393 3.997-9.393 11.175 0 6.041 2.946 11.543 9.691 11.543 4.397 0 6.362-2.322 6.959-3.004a11.448 11.448 0 0 0 1.921-3.271l-2.347-.683zm-13.406-6.586c.47-4.133 3.031-6.767 6.532-6.767 2.006 0 3.373.817 4.227 1.635 1.366 1.363 1.921 3.226 2.135 5.132H53.447z" fill="none" stroke="#fff" stroke-width=".617" stroke-miterlimit="2.613"/><path d="M78.198 98.957c-2.263-.545-4.27-1.137-4.27-3.498 0-3.225 3.16-3.634 4.697-3.634 1.195 0 2.348.227 3.202.772 1.366.818 1.622 1.862 1.75 2.453l2.434-.636c-.17-.682-.683-2.498-2.519-3.679-1.11-.727-2.732-1.227-4.739-1.227-6.105 0-7.301 3.815-7.301 6.042 0 4.223 3.416 5.133 5.294 5.586.812.182 1.665.363 2.434.545 1.665.363 4.355 1.045 4.355 3.861 0 2.271-1.665 4.27-5.166 4.27s-5.251-2.361-5.721-4.314l-2.477.908c.726 1.861 1.623 3.225 3.074 4.27.854.635 2.52 1.551 5.124 1.551 5.294 0 7.642-3.459 7.642-6.639 0-1.408-.47-2.77-1.366-3.814-1.28-1.5-2.988-1.953-4.312-2.316l-2.135-.501z" fill-rule="evenodd" clip-rule="evenodd"/><path d="M78.198 98.957c-2.263-.545-4.27-1.137-4.27-3.498 0-3.225 3.16-3.634 4.696-3.634 1.196 0 2.348.227 3.203.772 1.366.818 1.622 1.862 1.75 2.453l2.434-.636c-.17-.682-.683-2.498-2.519-3.679-1.11-.727-2.732-1.227-4.739-1.227-6.105 0-7.301 3.815-7.301 6.042 0 4.223 3.416 5.133 5.294 5.586.812.182 1.665.363 2.434.545 1.665.363 4.355 1.045 4.355 3.861 0 2.271-1.665 4.27-5.166 4.27s-5.251-2.361-5.721-4.314l-2.477.908c.726 1.861 1.623 3.225 3.074 4.27.854.635 2.519 1.551 5.124 1.551 5.294 0 7.642-3.459 7.642-6.639 0-1.408-.47-2.77-1.366-3.814-1.28-1.5-2.988-1.953-4.312-2.316l-2.135-.501z" fill="none" stroke="#fff" stroke-width=".617" stroke-miterlimit="2.613"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#455993" d="M88.049 78.905h96.203v34.947H88.049V78.905z"/><path d="M157.328 103.805c-.205.613-.801 1.586-1.34 2.195-1.307 1.477-2.871 1.473-3.199 1.473-3.361 0-4.836-3.561-4.836-6.385 0-2.58 1.229-6.785 4.631-6.785.984 0 1.773.314 2.379.737 1.035.723 1.436 1.791 1.805 2.568l4.674-2.66c-2.705-4.462-6.766-5.117-9.145-5.117-7.135 0-10.742 5.239-10.742 11.462 0 8.719 6.52 11.18 10.619 11.18 2.42 0 4.518-.775 6.152-1.93 1.727-1.221 2.979-3.055 3.758-4.283l-4.756-2.455zM135.049 90.363h-5.877v21.409h6.314v-11.641c0-3.174 3.197-4.148 5.668-4.226v-5.747c-3.174-.426-5.25 1.16-6.105 5.603v-5.398zM117.27 89.749c-7.957-.45-11.977 4.748-11.977 11.298 0 7.9 5.332 11.346 11.18 11.346 8.117 0 11.141-5.943 11.141-11.346-.001-3.889-1.87-10.807-10.344-11.298zm-1.155 4.357c.875-.09 2.309-.045 3.58 1.307 1.154 1.261 1.711 3.291 1.711 5.904 0 3.695-1.631 6.715-4.934 6.715-3.42 0-5.012-3.289-5.012-7.031 0-1.621.277-3.244 1.033-4.596.837-1.488 1.872-2.164 3.622-2.299zM95.465 90.516h-3.403v4.227h3.362v17.028h6.273V94.743h4.184v-4.227h-4.225c-.006-.447-.008-3.489.002-3.827.051-1.83.453-2.18 2.459-2.18h1.518v-4.667c-1.23-.205-2.502-.409-3.773-.409-2.951 0-4.721 1.318-5.494 2.386-.826 1.141-.902 2.58-.902 3.643v5.054h-.001zM178.27 104.594c-.775 1.428-2.031 3.084-4.893 3.084-3.295 0-4.764-2.66-4.725-5.32h14.812c-.08-2.416-.238-6.591-2.939-9.58-2.66-2.947-6.234-3.069-7.465-3.069-8.18 0-10.643 6.631-10.643 11.788 0 7 4.328 11.059 10.484 11.059 3.334 0 6.035-1.316 7.822-3.035.73-.697 1.295-1.416 1.809-2.152l-4.262-2.775zm-9.776-5.762c.205-1.102.41-2.301 1.271-3.453.615-.8 1.682-1.701 3.199-1.701 1.105 0 2.295.5 3.074 1.451.902 1.151 1.066 2.601 1.189 3.703h-8.733z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/logos/ticketmaster.svg b/public/logos/ticketmaster.svg
deleted file mode 100644
index 30283cb11..000000000
--- a/public/logos/ticketmaster.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 192.756 192.756"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="#fff" d="M0 0h192.756v192.756H0V0z"/><path fill="#fce671" d="M185.258 103.168H2.834l1.038-1.971h182.214l-.828 1.971z"/><path d="M6.566 92.906l.311-1.14 4.354-1.037-.726 2.177h2.384l-.622 1.658h-2.28l-.933 2.903c0 .207-.415 1.141.415 1.141h1.555l-.519 1.658c-.829.104-1.555.104-2.176.104-2.695 0-4.25-.207-3.317-2.488l.933-3.317H3.872l.621-1.658h2.073v-.001zM11.956 100.162l2.281-7.256h4.042l-2.28 7.256h-4.043zm2.591-8.604l.622-1.865h4.042l-.519 1.865h-4.145zM26.259 95.393c.104-.311.104-.622-.104-.829-.104-.207-.519-.311-1.14-.311-1.451 0-1.969 1.451-2.28 2.28-.208.727-.518 2.281.829 2.281 1.451-.104 1.866-.83 2.073-1.451h4.043c-.311.932-1.244 1.762-2.384 2.279a12.17 12.17 0 0 1-4.042.727c-3.938 0-5.39-1.348-4.561-3.836.829-2.694 3.835-3.938 6.944-3.938 2.799 0 5.079.725 4.561 2.798h-3.939zM47.507 95.601c.415-.83.933-1.555 2.384-1.555.622-.104 1.036.104 1.244.415.207.311.311.726.104 1.141h-3.732v-.001zm7.049 1.452c.933-2.696.104-4.458-4.25-4.458-3.213 0-6.115 1.347-6.841 3.731-.829 2.799.415 4.043 4.664 4.043 1.244 0 2.487-.104 3.524-.52 1.14-.414 2.28-1.139 2.591-2.072h-3.628c-.415.727-1.14 1.037-2.384 1.037-1.451 0-1.555-.83-1.244-1.762h7.568v.001zM70 94.046h.104c1.036-1.037 2.591-1.347 4.146-1.347 1.244 0 2.591.415 2.695 1.347 1.036-.933 2.695-1.451 4.25-1.451 2.28 0 3.731 1.036 3.11 2.695l-1.451 4.872H78.81l1.347-4.25c.208-.726.208-1.555-1.14-1.555-1.866 0-2.073 1.555-2.176 1.659l-1.244 4.146h-4.042l1.347-4.25c.208-.726.104-1.555-1.14-1.555-1.969 0-2.177 1.555-2.177 1.659l-1.347 4.146h-4.042l1.762-5.391c.208-.726.311-1.14.415-1.866h3.938L70 94.046zM88.552 97.881c.208-.621.726-.828 1.348-1.037.622-.207 1.451-.207 2.28-.104-.311.934-.829 2.074-2.591 2.074-.726 0-1.14-.519-1.037-.933zm6.531 2.281c.104-.83.104-1.244.207-1.451l1.141-3.836c.623-1.658-1.762-2.28-3.939-2.28-1.244 0-2.591.104-3.835.518-1.14.311-2.073.829-2.488 1.969h3.835c.104-.519.622-1.14 1.659-1.14 1.555-.104 1.14.829.829 1.555h-1.244c-3.42-.104-6.012.622-6.634 2.487-.519 1.451.519 2.385 3.006 2.385 2.073 0 3.213-.623 3.835-1.141-.104.518-.207.725-.207.934h3.835zM103.893 95.083c.104-.208.104-.415-.104-.622-.104-.104-.414-.207-1.037-.207-.518 0-.932.207-1.141.622-.102.518 1.557.518 3.836 1.037 1.244.311 1.969.829 1.555 2.073-.621 1.865-3.42 2.385-5.805 2.385-2.59 0-5.079-.311-4.353-2.592h3.835a.886.886 0 0 0 0 .727c.207.104.518.311.932.311.727 0 1.348-.207 1.557-.727.414-1.244-6.115-.518-5.391-3.109.621-1.866 3.523-2.384 5.701-2.384 2.486 0 4.664.518 4.25 2.487h-3.835v-.001zM121.201 95.601c.416-.83.934-1.555 2.281-1.555.621-.104 1.037.104 1.244.415.311.311.311.726.207 1.141h-3.732v-.001zm7.049 1.452c.83-2.696 0-4.458-4.354-4.458-3.109 0-6.012 1.347-6.736 3.731-.934 2.799.414 4.043 4.664 4.043 1.244 0 2.488-.104 3.523-.52 1.141-.414 2.178-1.139 2.592-2.072h-3.732c-.311.727-1.139 1.037-2.279 1.037-1.451 0-1.555-.83-1.244-1.762h7.566v.001zM134.469 94.253h.104c.83-1.244 2.281-1.658 4.043-1.658l-.727 2.384h-.828c-2.072 0-3.109.829-3.523 2.281l-.83 2.902h-4.043l1.66-5.391c.207-.726.311-1.14.414-1.866h4.145l-.415 1.348zM152.607 95.29c.104-.415.104-.726-.104-.933-.104-.207-.518-.311-1.141-.311-1.451 0-1.969 1.555-2.279 2.28-.207.727-.52 2.281.932 2.281 1.451-.104 1.764-.83 1.971-1.451h4.041c-.311 1.035-1.242 1.762-2.383 2.279s-2.592.727-4.043.83c-3.938 0-5.389-1.348-4.561-3.939.83-2.695 3.836-3.835 7.049-3.835 2.695-.104 4.975.622 4.457 2.799h-3.939zM173.648 94.046c1.141-1.037 2.592-1.347 4.146-1.347 1.348 0 2.695.415 2.799 1.347 1.035-.933 2.59-1.347 4.248-1.451 2.281 0 3.629 1.036 3.111 2.591l-1.451 4.767h-4.043l1.348-4.145c.207-.726.104-1.451-1.141-1.451-1.969 0-2.176 1.451-2.176 1.555l-1.348 4.042H175.1l1.348-4.145c.207-.726.207-1.451-1.037-1.451-1.969 0-2.176 1.451-2.279 1.555l-1.244 4.042h-4.043l1.658-5.285c.312-.622.416-1.037.52-1.762h3.938l-.313 1.138zM161.107 96.119c.311-1.14.828-2.384 2.072-2.384 1.348 0 1.348 1.244 1.037 2.384-.207 1.037-.727 2.279-2.072 2.385-1.244-.106-1.244-1.348-1.037-2.385zm2.487-3.731c-2.486 0-4.975 1.244-5.596 3.938-.623 2.695 1.242 3.939 3.73 3.939 2.592 0 5.08-1.244 5.701-3.939.622-2.695-1.243-3.938-3.835-3.938zM141.725 100.266h-2.489l.52-2.489h2.486l-.517 2.489z" fill="#50779c"/><path fill="#fce671" d="M20.144 89.589l-.622 1.969h12.542l.518-1.969H20.144zM189.922 89.589H38.179l-.518 1.969h20.73v-.207l5.286-1.244.311.104-.415 1.347h47.472l.103-.414 5.182-1.244.311.104-.414 1.554h72.968l.727-1.969z"/><path d="M111.252 92.802l.311-1.14 4.354-1.037-.621 2.177h2.279l-.518 1.762h-2.385l-.828 2.903c-.104.104-.52 1.037.414 1.141.518-.104 1.037-.104 1.555-.104l-.518 1.658c-.934.104-1.555.104-2.178.207-2.695-.104-4.354-.311-3.42-2.592l1.037-3.213h-2.074l.52-1.762h2.072zM58.495 92.906l.311-1.14 4.354-1.037-.622 2.177h2.28l-.519 1.762h-2.384l-.829 2.902c-.104.207-.518 1.141.415 1.141.519 0 1.037 0 1.555-.104l-.518 1.658c-.933.104-1.555.207-2.177.207-2.798 0-4.353-.311-3.42-2.488l1.037-3.316h-2.073l.519-1.762h2.071zM30.198 100.162l3.213-10.573h4.042l-3.213 10.573h-4.042zm5.286-4.146l4.665-3.213h4.353l-4.561 3.109 2.799 4.25h-4.768l-2.488-4.146z" fill="#50779c"/></g></svg>
\ No newline at end of file
diff --git a/public/logos/uber.svg b/public/logos/uber.svg
deleted file mode 100644
index 7ca5b014f..000000000
--- a/public/logos/uber.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="351" viewBox="4.364 4.651 331.271 46.466"><path d="M47.741 4.761v26.537c0 9.081-4.381 14.448-17.538 14.448-13.195 0-17.599-5.367-17.599-14.448V12.644c-.169-4.422-3.794-7.975-8.24-7.975V9.82c1.611 0 2.893 1.252 3.045 2.824v20.468c0 10.521 8.252 17.997 22.793 17.997 14.519 0 22.738-7.478 22.738-17.997V4.761h-5.199zM198.803 44.995V32.562c0-1.707 1.451-3.109 3.133-3.143h22.654V24.18h-22.732a8.233 8.233 0 0 0-3.055.658V9.864h36.973V4.651h-42.225v45.556h43.762v-5.212h-38.51zM292.529 27.469c-1.1 0-2.139.225-3.1.616l-.045-18.518 28.545-.011a8.944 8.944 0 0 1 8.961 8.955c0 4.955-4.006 8.974-8.961 8.974l-25.4-.016zm39.916 17.843c-1.254 1.006-3.039.804-4.127-.352l-9.965-12.652c7.441-.229 13.397-6.327 13.397-13.809 0-7.658-6.203-13.849-13.851-13.849H284.17v45.557h5.211l.051-14.843c.057-1.654 1.455-3.032 3.147-3.032l19.185.005 12.463 15.827c2.869 3.39 7.906 3.955 11.406 1.204l-3.188-4.056zM133.661 45.312l-28.76-.025V32.365c.021-1.725 1.453-3.192 3.165-3.192l25.596-.006c4.46 0 8.059 3.61 8.059 8.048-.001 4.488-3.6 8.097-8.06 8.097m-28.76-35.745l28.892.033c4.048 0 7.323 3.285 7.323 7.34 0 4.032-3.274 7.312-7.323 7.312h-26.161a8.374 8.374 0 0 0-2.731.647V9.567zm36.27 17.1c2.934-2.234 4.856-5.756 4.856-9.749 0-6.752-5.483-12.251-12.251-12.251l-34.083-.016v45.556h33.968c7.164 0 12.964-5.812 12.964-12.992 0-4.351-2.159-8.192-5.454-10.548" fill="#10111c"/></svg>
\ No newline at end of file
diff --git a/public/logos/walmart.svg b/public/logos/walmart.svg
deleted file mode 100644
index b3755775a..000000000
--- a/public/logos/walmart.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="778" viewBox="0 0 135.43800000000002 42.144" width="2500" xmlns="http://www.w3.org/2000/svg"><g fill="navy"><path d="M4.703 42.048h5.826l2.325-11.936 1.96 11.936h6.016l4.283-18.555h-4.7l-2.49 14.635-2.274-14.501H9.962l-2.252 14.5-2.511-14.634H0zM27.388 23.493l-5.304 18.554h5.147l.83-3.92h6.38l1.017 3.92h4.967l-5.2-18.554zm3.87 3.59l1.934 6.665H29.21zM41.306 42.048h11.28V37.21h-6.385V23.493h-4.895zM65.204 23.493v18.554h4.825v-13.17l2.996 13.17h4.752l3.068-12.808v12.808h4.754V23.493H78l-2.573 12.803-2.55-12.803zM91.504 23.493L86.19 42.047h4.792l1.162-3.854h6.065l1.169 3.854h4.91l-5.13-18.554zm3.615 3.796l2.028 6.347h-3.92zM109.822 28.105h2.581c1.33 0 2.155.278 2.155 1.565 0 1.05-.73 1.719-1.771 1.719h-2.965zm-4.915 13.943h5.094v-7.18l4.528 7.18h5.828l-5.216-7.752c2.233-.809 4.502-2.25 4.502-5.852 0-4.45-3.198-4.95-6.37-4.95h-8.366zM125.272 42.144h5.058V28.52h5.108v-5.03h-15.26v5.03h5.094zM61.68 37.71l-3.893-2.836-3.948 2.892 1.52-4.653-3.911-2.854h4.838l1.501-4.579 1.483 4.579h4.82l-3.893 2.854 1.483 4.597z"/></g><g fill="#a40"><path d="M5.06 19.966h6.268l2.503-12.842 2.107 12.842h6.474L27.02.003h-5.057l-2.68 15.746L16.839.147h-6.12L8.296 15.749 5.594.003H0zM29.367.003L23.66 19.966h5.538l.892-4.218h6.866l1.093 4.218h5.344L37.8.003zm4.164 3.863l2.08 7.17h-4.283zM43.789 19.966h12.137v-5.204h-6.87V.003h-5.267zM60.896.003v19.963h5.19V5.795l3.224 14.171h5.114l3.3-13.78v13.78h5.116V.003h-8.177l-2.769 13.775L69.151.003zM89.035.003l-5.717 19.963h5.156l1.25-4.147h6.526l1.257 4.147h5.283L97.27.003zm3.89 4.084l2.182 6.829H90.89zM108.299 4.964h2.776c1.432 0 2.319.3 2.319 1.684 0 1.13-.786 1.85-1.906 1.85h-3.19zm-5.289 15.002h5.48v-7.725l4.873 7.725h6.27l-5.612-8.34c2.403-.87 4.844-2.422 4.844-6.296 0-4.789-3.44-5.327-6.854-5.327h-9zM124.5 20.07h5.443V5.412h5.495V0h-16.42v5.412h5.482z"/><path d="M51.345 7.518h8.177V12.6h-8.177z" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
diff --git a/public/logos/yahoo.svg b/public/logos/yahoo.svg
deleted file mode 100644
index d2a7e2990..000000000
--- a/public/logos/yahoo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="580" viewBox="0.501 0.5 998.999 231.851"><g transform="translate(1259.54 -281.525)"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="-2760.852" y1="3633.156" x2="-2713.705" y2="3372.804" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#210045"/><stop offset=".594" stop-color="#430085"/><stop offset="1" stop-color="#5000b2"/></linearGradient><path d="M-272.82 284.693c7.661 1.281 12.779 5.971 12.779 14.045 0 2.672-1.102 6.435-1.837 9.615-5.134 22.63-25.183 102.589-33.623 155.958l-7.767-7.769 24.719-164.165 5.729-7.684z" fill="url(#a)"/><path d="M-772.423 306.42c-10.348 2.479-20.506 2.409-30.493 0l15.856 16.467 14.637-16.467zM-930.936 306.42c10.348 2.479 20.507 2.409 30.493 0l-15.855 16.467-14.638-16.467z" fill="#6700e8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-3965.148" y1="3392.57" x2="-3825.369" y2="3677.752" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#5500bd"/><stop offset="1" stop-color="#5000ac"/></linearGradient><path d="M-1020.435 306.355c23.384 59.178 60.183 148.75 78.518 182.983l-27.145-8.295-67.165-167.966 15.792-6.722z" fill="url(#b)"/><path d="M-1041.697 306.35c7.468 2.502 13.662 2.654 21.264 0l-15.112 9.284-6.152-9.284z" fill="#6700e8"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-3920.091" y1="3537.693" x2="-3901.882" y2="3530.731" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#2a005a"/><stop offset="1" stop-color="#210046"/></linearGradient><path d="M-1030.957 312.809l68.438 167.851c-4.049 4.385-5.854 6.687-9.792 8.737-19.836-51.091-41.139-102.196-59.186-152.627l-8.909-15.104 9.449-8.857z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="-4073.047" y1="3673.329" x2="-3976.859" y2="3424.715" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#21004e"/><stop offset="1" stop-color="#39007f"/></linearGradient><path d="M-1089.818 489.333l-20.204-7.155 71.143-166.915 7.928-2.451v24.711c-11.064 31.919-39.136 101.951-58.867 151.81z" fill="url(#d)"/><path d="M-1106.576 282.025l6.708 15.247 17.076-7.928 6.943-7.318c-10.982 2.491-20.89 2.574-30.727-.001z" fill="#6700e8"/><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="-4122.404" y1="3443.818" x2="-4103.657" y2="3454.99" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#1b0041"/><stop offset="1" stop-color="#21004f"/></linearGradient><path d="M-1154.753 414.974l-11.587 4.27-7.318-12.807 72.573-115.874 5.188-1.777c7.162-1.618 14.974-3.354 20.062-6.761-11.528 15.57-53.495 88.344-78.918 132.949z" fill="url(#e)"/><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="-4084.08" y1="3339.554" x2="-4184.228" y2="3548.955" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#5500bd"/><stop offset="1" stop-color="#47008d"/></linearGradient><path d="M-1170.611 413.146l3.049-3.05 71.794-121.336-10.809-6.735c-8.668 16.146-40.638 68.392-60.986 101.847l-9.758 18.295 6.71 10.979z" fill="url(#f)"/><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="-4288.005" y1="3342.928" x2="-4188.409" y2="3550.831" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#5100b2"/><stop offset="1" stop-color="#5500bd"/></linearGradient><path d="M-1228.546 282.025c15.916 28.207 40.349 67.667 60.985 101.847v26.224l-4.879 4.879-71.354-126.851 15.248-6.099z" fill="url(#g)"/><path d="M-1240.308 289.697l11.762-7.672c-12.62 2.69-17.899 2.863-30.493 0l4.879 5.489 13.852 2.183z" fill="#6700e8"/><linearGradient id="h" gradientUnits="userSpaceOnUse" x1="-4270.417" y1="3455.239" x2="-4252.414" y2="3443.258" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#27005d" stop-opacity=".98"/><stop offset=".318" stop-color="#2b005d"/><stop offset=".598" stop-color="#280055"/><stop offset=".809" stop-color="#24004d"/><stop offset="1" stop-color="#230049"/></linearGradient><path d="M-1167.561 410.096l-5.488 7.929-7.318-3.05c-13.625-23.55-53.677-95.287-78.672-132.95 5.065 3.671 11.912 5.686 19.816 6.97l71.662 121.101z" fill="url(#h)"/><linearGradient id="i" gradientUnits="userSpaceOnUse" x1="-4189.426" y1="3549.587" x2="-4167.84" y2="3719.621" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#5500bd"/><stop offset="1" stop-color="#5300b5"/></linearGradient><path d="M-1152.924 513.161l-20.735-9.757 1.83-86.601 4.269-6.708 12.808 4.878 1.828 98.188z" fill="url(#i)"/><linearGradient id="j" gradientUnits="userSpaceOnUse" x1="-4196.706" y1="3550.403" x2="-4196.706" y2="3718.649" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#210045"/><stop offset=".25" stop-color="#25004d"/><stop offset=".5" stop-color="#2b005c"/><stop offset=".749" stop-color="#340071"/><stop offset="1" stop-color="#3e0088"/></linearGradient><path d="M-1167.561 506.454l-14.637 6.707 1.83-98.188 12.807-4.878v96.359z" fill="url(#j)"/><linearGradient id="k" gradientUnits="userSpaceOnUse" x1="-4102.986" y1="3677.251" x2="-3959.839" y2="3390.673" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#4d00a1"/><stop offset="1" stop-color="#5200b4"/></linearGradient><path d="M-1119.993 489.378c25.444-51.864 53.737-121.416 78.294-183.038l10.746 6.475-69.462 169.921-14.088 4.812-5.49 1.83z" fill="url(#k)"/><path d="M-963.246 480.354l21.352 8.993c-8.189-2.065-19.277-2.857-30.42.052l4.169-10.268 4.899 1.223z" fill="#200045"/><linearGradient id="l" gradientUnits="userSpaceOnUse" x1="-4038.352" y1="3578.623" x2="-3883.31" y2="3578.623" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#6700e8"/><stop offset=".506" stop-color="#6700e8"/><stop offset="1" stop-color="#6700e8"/></linearGradient><path d="M-1078.515 429.378l15.014-6.441c21.625.761 43.249.749 64.874 0l15.228 6.63-14.177 3.1h-70.184l-10.755-3.289z" fill="url(#l)"/><path d="M-1068.516 435.711l-10.079-6.333c31.673-.483 63.394-.444 95.168.188l-10.08 6.146c-25.002-.81-50.005-.714-75.009-.001z" fill="#200045"/><linearGradient id="m" gradientUnits="userSpaceOnUse" x1="-3772.074" y1="3529.594" x2="-3746.889" y2="3529.594" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#5a00c9"/><stop offset="1" stop-color="#4f00a8"/></linearGradient><path d="M-900.443 489.378l-21.345-7.317V318.006l6.099-3.049 15.246-8.538c-3.164 60.878-3.231 121.866 0 182.959z" fill="url(#m)"/><linearGradient id="n" gradientUnits="userSpaceOnUse" x1="-3796.501" y1="3529.595" x2="-3771.501" y2="3529.595" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#390080"/><stop offset=".5" stop-color="#31006e"/><stop offset="1" stop-color="#250056"/></linearGradient><path d="M-915.689 480.839v4.271l-15.247 4.27c2.426-60.89 2.656-121.865 0-182.958l15.247 8.538v165.879z" fill="url(#n)"/><linearGradient id="o" gradientUnits="userSpaceOnUse" x1="-3587.282" y1="3529.594" x2="-3561.392" y2="3529.594" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#3f008b"/><stop offset="1" stop-color="#220050"/></linearGradient><path d="M-802.917 489.378l21.346-7.317V318.006l-6.099-3.049-15.247-8.538c3.165 60.878 3.234 121.866 0 182.959z" fill="url(#o)"/><linearGradient id="p" gradientUnits="userSpaceOnUse" x1="-3771.635" y1="3527.404" x2="-3561.838" y2="3527.404" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#6700e8"/><stop offset=".5" stop-color="#6700e8"/><stop offset="1" stop-color="#6700e8"/></linearGradient><path d="M-915.628 397.52l12.815-5.714c34.058.857 68.154.794 102.283 0l12.856 5.714-15.902 3.8h-99.346l-12.706-3.8z" fill="url(#p)"/><linearGradient id="q" gradientUnits="userSpaceOnUse" x1="-3280.825" y1="3411.788" x2="-3441.714" y2="3648.774" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#1c0044"/><stop offset=".1" stop-color="#2f0065"/><stop offset=".205" stop-color="#34006d"/><stop offset=".3" stop-color="#3b007a"/><stop offset=".4" stop-color="#3c007a"/><stop offset=".5" stop-color="#490096"/><stop offset=".6" stop-color="#5000ab"/><stop offset=".7" stop-color="#5400ba"/><stop offset=".803" stop-color="#5500bc"/><stop offset=".9" stop-color="#5700c2"/><stop offset="1" stop-color="#5c00ce"/></linearGradient><path d="M-664.788 306.351c-59.896 0-89.783 37.446-89.783 91.897 0 68.197 45.237 91.822 89.001 91.822 51.983 0 89.25-29.248 89.25-91.65-.001-60.055-35.275-92.069-88.468-92.069zm-1.792 8.691c.562-.012 1.131 0 1.696 0 39.558 0 68.608 26.944 68.608 83.246 0 56.231-29.014 83.17-68.533 83.17-43.118 0-68.456-30.898-68.456-83.017.001-58.945 31.221-82.673 66.685-83.399z" fill="url(#q)"/><linearGradient id="r" gradientUnits="userSpaceOnUse" x1="-3461.777" y1="3657.298" x2="-3260.312" y2="3405.088" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#1b0041"/><stop offset=".1" stop-color="#1b0041"/><stop offset=".205" stop-color="#1b0041"/><stop offset=".3" stop-color="#240052"/><stop offset=".4" stop-color="#32006a"/><stop offset=".5" stop-color="#3d007d"/><stop offset=".6" stop-color="#490098"/><stop offset=".7" stop-color="#4f00a8"/><stop offset=".803" stop-color="#5500bc"/><stop offset=".9" stop-color="#5700c2"/><stop offset="1" stop-color="#6000da"/></linearGradient><path d="M-664.998 303.95c-64.688 0-98.626 41.016-98.626 94.186 0 58.195 37.051 93.689 98.53 93.689 66.469 0 98.931-40.002 98.931-93.08 0-59.18-38.767-94.795-98.835-94.795zm.191 6.061c51.075 0 84.941 30.726 84.941 88.392 0 59.917-35.791 88.01-85.705 88.01-42.021 0-85.456-22.681-85.456-88.163 0-52.283 28.708-88.239 86.22-88.239z" fill="url(#r)"/><linearGradient id="s" gradientUnits="userSpaceOnUse" x1="-2919.496" y1="3389.648" x2="-3070.137" y2="3674.172" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#1e0046"/><stop offset=".1" stop-color="#2d0061"/><stop offset=".205" stop-color="#33006b"/><stop offset=".3" stop-color="#400082"/><stop offset=".4" stop-color="#490096"/><stop offset=".5" stop-color="#5000ac"/><stop offset=".6" stop-color="#5500bd"/><stop offset=".7" stop-color="#4f00a8"/><stop offset=".803" stop-color="#5500bc"/><stop offset=".9" stop-color="#5700c2"/><stop offset="1" stop-color="#6000da"/></linearGradient><path d="M-441.275 296.994c-60.789 0-102.438 34.367-102.438 101.352 0 65.71 38.746 102.418 102.685 102.418 48.427 0 101.485-24.872 101.485-101.484.001-82.686-57.954-102.286-101.732-102.286zm-.323 7.318c48.376 0 84.008 29.388 84.008 94.205 0 70.458-43.104 93.309-83.933 93.309-43.621 0-83.359-25.601-83.359-94.701 0-71.621 44.046-92.813 83.284-92.813z" fill="url(#s)"/><linearGradient id="t" gradientUnits="userSpaceOnUse" x1="-3090.618" y1="3684.496" x2="-2899.554" y2="3380.303" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#1b0041"/><stop offset=".1" stop-color="#1b0041"/><stop offset=".205" stop-color="#1b0041"/><stop offset=".3" stop-color="#240052"/><stop offset=".4" stop-color="#32006a"/><stop offset=".5" stop-color="#3d007d"/><stop offset=".6" stop-color="#490098"/><stop offset=".7" stop-color="#4f00a8"/><stop offset=".803" stop-color="#5500bc"/><stop offset=".9" stop-color="#5700c2"/><stop offset="1" stop-color="#6000da"/></linearGradient><path d="M-441.674 292.934c-64.421 0-113.663 36.579-113.663 104.591 0 56.035 32.755 105.353 114.195 105.353 68.949 0 113.969-37.905 113.969-104.36 0-62.669-41.996-105.584-114.501-105.584zm.399 6.822c42.588 0 98.97 19.085 98.97 99.521 0 74.529-51.632 98.721-98.74 98.721-62.2 0-99.884-35.712-99.884-99.635 0-65.162 40.518-98.607 99.654-98.607z" fill="url(#t)"/><radialGradient id="u" cx="-1657.755" cy="3093.322" r="24.95" gradientTransform="matrix(-.2193 .7447 -.7822 -.2303 1750.597 2437.396)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6000d8"/><stop offset=".209" stop-color="#5c00cd"/><stop offset=".374" stop-color="#5500be"/><stop offset=".721" stop-color="#2d0062"/><stop offset="1" stop-color="#210045"/></radialGradient><path d="M-322.201 499.845c0-7.869 4.785-15.188 14.378-15.188 9.183 0 16.052 5.491 16.052 14.263 0 10.929-7.23 14.955-13.856 14.955-9.163.001-16.574-4.753-16.574-14.03z" fill="url(#u)"/><linearGradient id="v" gradientUnits="userSpaceOnUse" x1="-2772.776" y1="3634.607" x2="-2735.288" y2="3375.937" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#47008d"/><stop offset="1" stop-color="#5100b3"/></linearGradient><path d="M-306.881 462.566c7.436-52.557 11.959-107.792 16.302-162.868 0-10.977 7.255-15.271 14.576-15.271 1.282 0 3.175.268 3.175.268l-1.991 13.166-26.08 163.246-5.982 1.459z" fill="url(#v)"/><path d="M-1182.198 513.161l14.664-10.742 14.609 10.742s-8.1-1.473-14.61-1.473c-5.874.001-14.663 1.473-14.663 1.473zM-1119.995 489.4l20.455-8.844c3.121 3.741 5.897 6.914 9.73 8.791-7.363-1.993-18.512-2.888-30.185.029v.024zM-930.936 489.378c9.903-2.387 20.044-2.491 30.455 0l-15.208-8.539-15.247 8.539zM-902.813 404.285l-12.843-6.765c42.66.444 85.32.52 127.979 0l-12.825 6.726c-34.103-.46-68.206-.437-102.311.039z" fill="#200045"/><linearGradient id="w" gradientUnits="userSpaceOnUse" x1="-3561.979" y1="3529.595" x2="-3536.938" y2="3529.595" gradientTransform="translate(1384.692 -1754.8) scale(.6099)"><stop offset="0" stop-color="#5500bd"/><stop offset="1" stop-color="#5200b2"/></linearGradient><path d="M-787.669 480.839v4.271l15.246 4.27c-2.424-60.89-2.655-121.865 0-182.958l-15.246 8.538v165.879z" fill="url(#w)"/><path d="M-772.423 489.378c-9.902-2.387-20.043-2.491-30.454 0l15.208-8.539 15.246 8.539zM-300.156 456.401l-6.757 6.165c4.527-.797 8.029.385 11.433 1.756l-4.676-7.921z" fill="#200045"/><radialGradient id="x" cx="-2041.073" cy="1743.323" r="22.494" gradientTransform="matrix(-.808 -.1447 .1034 -.5774 -2103.737 1004.416)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6700e8"/><stop offset=".399" stop-color="#5c00ce"/><stop offset=".701" stop-color="#5600bf" stop-opacity=".045"/><stop offset="1" stop-color="#220047" stop-opacity="0"/></radialGradient><path d="M-260.408 297.738c0 7.171-6.654 12.984-14.861 12.984-8.209 0-14.861-5.813-14.861-12.984 0-7.17 6.652-12.983 14.861-12.983 8.207 0 14.861 5.813 14.861 12.983z" fill="url(#x)"/></g></svg>
\ No newline at end of file
diff --git a/public/shop/shirt.glb b/public/shop/shirt.glb
new file mode 100644
index 000000000..9c7609edd
Binary files /dev/null and b/public/shop/shirt.glb differ
diff --git a/scripts/auth-login.ts b/scripts/auth-login.ts
new file mode 100644
index 000000000..12ca3bd5a
--- /dev/null
+++ b/scripts/auth-login.ts
@@ -0,0 +1,122 @@
+#!/usr/bin/env tsx
+/**
+ * TanStack CLI Auth Login
+ *
+ * Opens a browser for OAuth on tanstack.com, mints a session token,
+ * and saves it as DEV_SESSION_TOKEN in .env.local for local development.
+ *
+ * Usage:
+ *   pnpm auth:login
+ *   pnpm auth:login --url http://localhost:3000   # auth against local server
+ */
+
+import { spawn } from 'child_process'
+import { readFileSync, writeFileSync, existsSync } from 'fs'
+import { resolve } from 'path'
+
+// ---------------------------------------------------------------------------
+// Config
+// ---------------------------------------------------------------------------
+
+const args = process.argv.slice(2)
+const urlFlagIdx = args.indexOf('--url')
+const BASE_URL =
+  urlFlagIdx !== -1 && args[urlFlagIdx + 1]
+    ? args[urlFlagIdx + 1]
+    : 'https://tanstack.com'
+
+const POLL_INTERVAL_MS = 2000
+const TIMEOUT_MS = 5 * 60 * 1000 // 5 minutes
+const ENV_FILE = resolve(process.cwd(), '.env.local')
+const ENV_KEY = 'DEV_SESSION_TOKEN'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function openBrowser(url: string) {
+  const platform = process.platform
+  const cmd =
+    platform === 'darwin' ? 'open' : platform === 'win32' ? 'start' : 'xdg-open'
+  spawn(cmd, [url], { detached: true, stdio: 'ignore' }).unref()
+}
+
+function upsertEnvFile(key: string, value: string) {
+  let contents = existsSync(ENV_FILE) ? readFileSync(ENV_FILE, 'utf8') : ''
+  const line = `${key}=${value}`
+  const pattern = new RegExp(`^${key}=.*$`, 'm')
+
+  if (pattern.test(contents)) {
+    contents = contents.replace(pattern, line)
+  } else {
+    contents =
+      contents.endsWith('\n') || contents === ''
+        ? contents + line + '\n'
+        : contents + '\n' + line + '\n'
+  }
+
+  writeFileSync(ENV_FILE, contents, 'utf8')
+}
+
+async function fetchJson<T>(url: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(url, options)
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status} from ${url}`)
+  }
+  return res.json() as Promise<T>
+}
+
+// ---------------------------------------------------------------------------
+// Main flow
+// ---------------------------------------------------------------------------
+
+async function main() {
+  console.log(`\nAuthenticating with ${BASE_URL}...\n`)
+
+  // 1. Create a ticket
+  const { ticketId } = await fetchJson<{ ticketId: string }>(
+    `${BASE_URL}/api/auth/cli/create-ticket`,
+    { method: 'POST' },
+  )
+
+  // 2. Open browser
+  const authUrl = `${BASE_URL}/auth/cli?ticket=${ticketId}`
+  console.log(`Opening browser to:\n  ${authUrl}\n`)
+  console.log('Waiting for you to complete sign-in...')
+  openBrowser(authUrl)
+
+  // 3. Poll for authorization
+  const deadline = Date.now() + TIMEOUT_MS
+  while (Date.now() < deadline) {
+    await new Promise((r) => setTimeout(r, POLL_INTERVAL_MS))
+
+    const result = await fetchJson<
+      | { authorized: false }
+      | { authorized: true; sessionToken: string }
+      | { error: string }
+    >(`${BASE_URL}/api/auth/cli/status/${ticketId}`).catch(() => null)
+
+    if (!result) continue
+
+    if ('error' in result) {
+      console.error(`\nError: ${result.error}`)
+      process.exit(1)
+    }
+
+    if (result.authorized) {
+      // 4. Save token
+      upsertEnvFile(ENV_KEY, result.sessionToken)
+      console.log(`\nSuccess! Token saved to .env.local as ${ENV_KEY}.`)
+      console.log('Restart your dev server to pick up the new session.\n')
+      process.exit(0)
+    }
+  }
+
+  console.error('\nTimed out waiting for authorization. Please try again.')
+  process.exit(1)
+}
+
+main().catch((err) => {
+  console.error('\nFailed:', err instanceof Error ? err.message : err)
+  process.exit(1)
+})
diff --git a/scripts/build-content-collections.mjs b/scripts/build-content-collections.mjs
new file mode 100644
index 000000000..d89662b90
--- /dev/null
+++ b/scripts/build-content-collections.mjs
@@ -0,0 +1,5 @@
+import { createBuilder } from '@content-collections/core'
+import path from 'node:path'
+
+const builder = await createBuilder(path.resolve('content-collections.ts'))
+await builder.build()
diff --git a/scripts/check-docs-menu-links.ts b/scripts/check-docs-menu-links.ts
new file mode 100644
index 000000000..7d5300bf5
--- /dev/null
+++ b/scripts/check-docs-menu-links.ts
@@ -0,0 +1,769 @@
+import { execFileSync } from 'node:child_process'
+import { mkdirSync, writeFileSync } from 'node:fs'
+import { dirname } from 'node:path'
+import { getBranch, publicLibraries } from '../src/libraries'
+import { resolveDocsPathRedirect } from '../src/utils/docs-redirects'
+import type { DocsRedirectManifest } from '../src/utils/docs-redirects'
+import type { LibrarySlim } from '../src/libraries'
+
+type ConfigItem = {
+  label: string
+  to: string
+}
+
+type ConfigFrameworkSection = {
+  label: string
+  children: Array<ConfigItem>
+}
+
+type ConfigSection = {
+  label: string
+  children: Array<ConfigItem>
+  frameworks?: Array<ConfigFrameworkSection>
+}
+
+type DocsConfig = {
+  sections: Array<ConfigSection>
+}
+
+type GitHubTreeItem = {
+  path: string
+  type: string
+}
+
+type MenuEntry = {
+  framework?: string
+  item: ConfigItem
+  section: string
+}
+
+type LinkTarget =
+  | {
+      kind: 'docs'
+      path: string
+    }
+  | {
+      kind: 'example'
+      examplePath: string
+      framework: string
+    }
+  | {
+      kind: 'internal'
+      path: string
+    }
+  | {
+      kind: 'external'
+    }
+
+type Candidate = {
+  branch: string
+  docsRoot: string
+  entry: MenuEntry
+  library: LibrarySlim
+  reason: string
+  target: Exclude<LinkTarget, { kind: 'external' }>
+  url: string
+}
+
+type BrokenLink = {
+  branch: string
+  docsRoot: string
+  finalUrl: string
+  framework?: string
+  label: string
+  library: string
+  reason: string
+  repo: string
+  section: string
+  status: number | 'error' | 'timeout'
+  target: string
+  targetKind: string
+  to: string
+  url: string
+}
+
+type SourceCandidate = Omit<BrokenLink, 'finalUrl' | 'status'>
+
+type FetchStatus = {
+  finalUrl: string
+  status: BrokenLink['status']
+}
+
+type CliOptions = {
+  baseUrl: string
+  jsonPath?: string
+  verifySite: boolean
+}
+
+const defaultBaseUrl = 'https://tanstack.com'
+const requestTimeoutMs = 30_000
+const httpConcurrency = 3
+const statusFetchAttempts = 2
+
+const cliOptions = parseCliOptions(process.argv.slice(2))
+const githubToken = getGitHubToken()
+
+main().catch((error: unknown) => {
+  console.error(error instanceof Error ? error.message : error)
+  process.exitCode = 1
+})
+
+async function main() {
+  const candidates: Array<Candidate> = []
+  let checkedDocs = 0
+  let checkedExamples = 0
+  let checkedInternal = 0
+
+  for (const library of publicLibraries) {
+    const branch = getBranch(library, 'latest')
+    const docsRoot = library.docsRoot || 'docs'
+    const [config, tree] = await Promise.all([
+      fetchDocsConfig(library.repo, branch, docsRoot),
+      fetchGitHubTree(library.repo, branch),
+    ])
+
+    if (!config) {
+      console.warn(
+        `${library.id}: skipped because ${docsRoot}/config.json was not found`,
+      )
+      continue
+    }
+
+    const manifest = buildDocsManifest(tree, docsRoot)
+    const entries = getMenuEntries(config)
+    let libraryCandidates = 0
+
+    for (const entry of entries) {
+      const target = getLinkTarget(entry.item.to, library)
+
+      if (target.kind === 'external') {
+        continue
+      }
+
+      if (target.kind === 'internal') {
+        checkedInternal += 1
+        continue
+      }
+
+      const url = buildDocsUrl(library.id, target)
+
+      if (target.kind === 'example') {
+        checkedExamples += 1
+
+        if (
+          !library.frameworks.some(
+            (framework) => framework === target.framework,
+          ) ||
+          !hasExample(tree, target)
+        ) {
+          libraryCandidates += 1
+          candidates.push({
+            branch,
+            docsRoot,
+            entry,
+            library,
+            reason: 'example directory was not found',
+            target,
+            url,
+          })
+        }
+
+        continue
+      }
+
+      checkedDocs += 1
+
+      const resolution = resolveDocsPathRedirect({
+        defaultDocs: library.defaultDocs ?? 'overview',
+        docsPath: target.path,
+        frameworks: library.frameworks,
+        manifest,
+      })
+
+      if (resolution.type === 'not-found') {
+        libraryCandidates += 1
+        candidates.push({
+          branch,
+          docsRoot,
+          entry,
+          library,
+          reason: 'docs markdown path was not found',
+          target,
+          url,
+        })
+      }
+    }
+
+    console.log(
+      [
+        library.id,
+        `${entries.length} menu items`,
+        `${manifest.paths.length} docs paths`,
+        `${libraryCandidates} candidates`,
+      ].join(': '),
+    )
+  }
+
+  const brokenLinks = cliOptions.verifySite
+    ? await verifyCandidates(candidates, cliOptions.baseUrl)
+    : candidates.map((candidate) => candidateToBrokenLink(candidate))
+
+  const report = {
+    generatedAt: new Date().toISOString(),
+    baseUrl: cliOptions.baseUrl,
+    checked: {
+      docs: checkedDocs,
+      examples: checkedExamples,
+      internal: checkedInternal,
+      candidates: candidates.length,
+      broken: brokenLinks.length,
+    },
+    sourceCandidates: candidates.map(candidateToSourceCandidate),
+    brokenLinks,
+  }
+
+  if (cliOptions.jsonPath) {
+    mkdirSync(dirname(cliOptions.jsonPath), { recursive: true })
+    writeFileSync(cliOptions.jsonPath, `${JSON.stringify(report, null, 2)}\n`)
+  }
+
+  console.log('')
+  console.log(
+    `checked ${checkedDocs} docs links, ${checkedExamples} example links, and ${checkedInternal} internal links`,
+  )
+
+  if (brokenLinks.length === 0) {
+    console.log('no broken docs menu links found')
+    return
+  }
+
+  console.log(`found ${brokenLinks.length} broken docs menu links`)
+  for (const link of brokenLinks) {
+    console.log(
+      [
+        `- ${link.status}`,
+        link.library,
+        link.section,
+        link.framework ? `(${link.framework})` : '',
+        `"${link.label}"`,
+        link.url,
+      ]
+        .filter(Boolean)
+        .join(' '),
+    )
+  }
+
+  process.exitCode = 1
+}
+
+function parseCliOptions(args: Array<string>): CliOptions {
+  const options: CliOptions = {
+    baseUrl: process.env.TANSTACK_DOCS_LINK_BASE_URL ?? defaultBaseUrl,
+    verifySite: true,
+  }
+
+  for (let index = 0; index < args.length; index += 1) {
+    const arg = args[index]
+
+    if (arg === '--') {
+      continue
+    }
+
+    if (arg === '--json') {
+      const value = args[index + 1]
+      if (!value) {
+        throw new Error('--json requires a file path')
+      }
+      options.jsonPath = value
+      index += 1
+      continue
+    }
+
+    if (arg === '--base-url') {
+      const value = args[index + 1]
+      if (!value) {
+        throw new Error('--base-url requires a URL')
+      }
+      options.baseUrl = value
+      index += 1
+      continue
+    }
+
+    if (arg === '--no-site') {
+      options.verifySite = false
+      continue
+    }
+
+    throw new Error(`Unknown argument: ${arg}`)
+  }
+
+  options.baseUrl = options.baseUrl.replace(/\/+$/g, '')
+
+  return options
+}
+
+function getGitHubToken() {
+  const envToken = process.env.GITHUB_TOKEN || process.env.GH_TOKEN
+
+  if (envToken) {
+    return envToken
+  }
+
+  try {
+    return execFileSync('gh', ['auth', 'token'], {
+      encoding: 'utf8',
+      stdio: ['ignore', 'pipe', 'ignore'],
+    }).trim()
+  } catch {
+    return undefined
+  }
+}
+
+async function verifyCandidates(candidates: Array<Candidate>, baseUrl: string) {
+  const results = await mapWithConcurrency(
+    candidates,
+    httpConcurrency,
+    async (candidate) => {
+      const status = await fetchStatus(new URL(candidate.url, baseUrl).href)
+
+      if (
+        typeof status.status === 'number' &&
+        status.status >= 200 &&
+        status.status < 400
+      ) {
+        return undefined
+      }
+
+      return candidateToBrokenLink(candidate, status)
+    },
+  )
+
+  return results.filter(isDefined)
+}
+
+async function fetchStatus(url: string): Promise<FetchStatus> {
+  let lastStatus: FetchStatus = {
+    finalUrl: url,
+    status: 'error',
+  }
+
+  for (let attempt = 0; attempt < statusFetchAttempts; attempt += 1) {
+    try {
+      const response = await fetch(url, {
+        headers: {
+          'User-Agent': 'tanstack-docs-menu-link-check',
+        },
+        signal: AbortSignal.timeout(requestTimeoutMs),
+      })
+      await response.body?.cancel()
+
+      return {
+        finalUrl: response.url,
+        status: response.status,
+      }
+    } catch (error) {
+      lastStatus =
+        error instanceof DOMException && error.name === 'TimeoutError'
+          ? {
+              finalUrl: url,
+              status: 'timeout',
+            }
+          : {
+              finalUrl: url,
+              status: 'error',
+            }
+    }
+  }
+
+  return lastStatus
+}
+
+function candidateToBrokenLink(
+  candidate: Candidate,
+  status: FetchStatus = {
+    finalUrl: candidate.url,
+    status: 'error',
+  },
+): BrokenLink {
+  return {
+    finalUrl: status.finalUrl,
+    status: status.status,
+    ...candidateToSourceCandidate(candidate),
+  }
+}
+
+function candidateToSourceCandidate(candidate: Candidate): SourceCandidate {
+  return {
+    branch: candidate.branch,
+    docsRoot: candidate.docsRoot,
+    framework: candidate.entry.framework,
+    label: candidate.entry.item.label,
+    library: candidate.library.id,
+    reason: candidate.reason,
+    repo: candidate.library.repo,
+    section: candidate.entry.section,
+    target: getTargetPath(candidate.target),
+    targetKind: candidate.target.kind,
+    to: candidate.entry.item.to,
+    url: candidate.url,
+  }
+}
+
+function getTargetPath(target: Exclude<LinkTarget, { kind: 'external' }>) {
+  if (target.kind === 'docs') {
+    return target.path
+  }
+
+  if (target.kind === 'example') {
+    return `examples/${target.framework}/${target.examplePath}`
+  }
+
+  return target.path
+}
+
+async function fetchGitHubTree(repo: string, branch: string) {
+  const value = await fetchGitHubJson(
+    `https://api.github.com/repos/${repo}/git/trees/${encodeURIComponent(
+      branch,
+    )}?recursive=1`,
+  )
+
+  if (!isRecord(value) || !Array.isArray(value.tree)) {
+    throw new Error(`Invalid GitHub tree response for ${repo}@${branch}`)
+  }
+
+  return value.tree.filter(isGitHubTreeItem)
+}
+
+async function fetchDocsConfig(repo: string, branch: string, docsRoot: string) {
+  const file = await fetchGitHubFile(repo, branch, `${docsRoot}/config.json`)
+
+  if (!file) {
+    return undefined
+  }
+
+  const parsed: unknown = JSON.parse(file)
+
+  if (!isDocsConfig(parsed)) {
+    throw new Error(`Invalid docs config for ${repo}@${branch}:${docsRoot}`)
+  }
+
+  return parsed
+}
+
+async function fetchGitHubFile(repo: string, branch: string, filePath: string) {
+  const value = await fetchGitHubJson(
+    `https://api.github.com/repos/${repo}/contents/${encodeURIComponent(
+      filePath,
+    ).replace(/%2F/g, '/')}?ref=${encodeURIComponent(branch)}`,
+    true,
+  )
+
+  if (!value) {
+    return undefined
+  }
+
+  if (!isRecord(value) || typeof value.content !== 'string') {
+    throw new Error(`Invalid GitHub file response for ${repo}:${filePath}`)
+  }
+
+  const encoding =
+    typeof value.encoding === 'string' ? value.encoding : 'base64'
+
+  return Buffer.from(
+    value.content,
+    encoding === 'base64' ? 'base64' : 'utf8',
+  ).toString('utf8')
+}
+
+async function fetchGitHubJson(url: string, allowNotFound = false) {
+  const response = await fetch(url, {
+    headers: {
+      Accept: 'application/vnd.github+json',
+      'User-Agent': 'tanstack-docs-menu-link-check',
+      ...(githubToken ? { Authorization: `Bearer ${githubToken}` } : {}),
+    },
+  })
+
+  if (allowNotFound && response.status === 404) {
+    await response.body?.cancel()
+    return undefined
+  }
+
+  if (!response.ok) {
+    throw new Error(
+      `GitHub request failed: ${response.status} ${response.statusText} ${url}`,
+    )
+  }
+
+  return response.json()
+}
+
+function buildDocsManifest(
+  tree: Array<GitHubTreeItem>,
+  docsRoot: string,
+): DocsRedirectManifest {
+  return {
+    paths: tree.flatMap((item) => {
+      if (
+        item.type !== 'blob' ||
+        !item.path.startsWith(`${docsRoot}/`) ||
+        !item.path.endsWith('.md')
+      ) {
+        return []
+      }
+
+      const canonicalPath = getCanonicalDocsPath(item.path, docsRoot)
+      return canonicalPath ? [canonicalPath] : []
+    }),
+    redirects: {},
+  }
+}
+
+function getCanonicalDocsPath(filePath: string, docsRoot: string) {
+  const normalizedFilePath = removeLeadingSlash(filePath)
+  const normalizedDocsRoot = removeLeadingSlash(docsRoot).replace(/\/+$/g, '')
+  const prefix = `${normalizedDocsRoot}/`
+
+  if (!normalizedFilePath.startsWith(prefix)) {
+    return undefined
+  }
+
+  return normalizedFilePath
+    .slice(prefix.length)
+    .replace(/\.md$/, '')
+    .replace(/\/index$/, '')
+}
+
+function getMenuEntries(config: DocsConfig): Array<MenuEntry> {
+  return config.sections.flatMap((section) => [
+    ...section.children.map((item) => ({
+      item,
+      section: section.label,
+    })),
+    ...(section.frameworks ?? []).flatMap((framework) =>
+      framework.children.map((item) => ({
+        framework: framework.label,
+        item,
+        section: section.label,
+      })),
+    ),
+  ])
+}
+
+function getLinkTarget(to: string, library: LibrarySlim): LinkTarget {
+  const trimmed = to.trim()
+
+  if (!trimmed || isExternalUrl(trimmed)) {
+    return { kind: 'external' }
+  }
+
+  const path = removeSearchAndHash(trimmed)
+
+  if (!path) {
+    return { kind: 'external' }
+  }
+
+  if (path === '..') {
+    return { kind: 'internal', path: `/${library.id}/latest` }
+  }
+
+  if (path === './framework') {
+    return { kind: 'internal', path: `/${library.id}/latest/docs/framework` }
+  }
+
+  const docsPath = getDocsPath(path)
+
+  if (!docsPath) {
+    return { kind: 'internal', path: replaceRouteParams(path, library.id) }
+  }
+
+  if (isSpecialDocsPath(docsPath)) {
+    return {
+      kind: 'internal',
+      path: `/${library.id}/latest/docs/${docsPath}`,
+    }
+  }
+
+  const exampleTarget = getExampleTarget(docsPath)
+
+  if (exampleTarget) {
+    return exampleTarget
+  }
+
+  return {
+    kind: 'docs',
+    path: docsPath,
+  }
+}
+
+function getDocsPath(path: string) {
+  if (path.startsWith('/')) {
+    const normalized = replaceRouteParams(path, '__library__')
+    const docsIndex = normalized.indexOf('/docs/')
+
+    if (docsIndex === -1) {
+      return undefined
+    }
+
+    return normalized.slice(docsIndex + '/docs/'.length)
+  }
+
+  if (path.startsWith('../')) {
+    return undefined
+  }
+
+  return path.replace(/^\.\//, '')
+}
+
+function getExampleTarget(docsPath: string): LinkTarget | undefined {
+  const match = /^framework\/([^/]+)\/examples\/(.+)$/.exec(docsPath)
+
+  if (!match) {
+    return undefined
+  }
+
+  const framework = match[1]
+  const examplePath = match[2]
+
+  if (!framework || !examplePath) {
+    return undefined
+  }
+
+  return {
+    examplePath,
+    framework,
+    kind: 'example',
+  }
+}
+
+function buildDocsUrl(libraryId: string, target: LinkTarget) {
+  switch (target.kind) {
+    case 'docs':
+      return `/${libraryId}/latest/docs/${target.path}`
+    case 'example':
+      return `/${libraryId}/latest/docs/framework/${target.framework}/examples/${target.examplePath}`
+    case 'internal':
+      return target.path
+    case 'external':
+      return ''
+  }
+}
+
+function hasExample(
+  tree: Array<GitHubTreeItem>,
+  target: Extract<LinkTarget, { kind: 'example' }>,
+) {
+  const prefix = `examples/${target.framework}/${target.examplePath}/`
+
+  return tree.some(
+    (item) => item.type === 'blob' && item.path.startsWith(prefix),
+  )
+}
+
+function isSpecialDocsPath(path: string) {
+  return ['blog', 'contributors', 'npm-stats', 'community-resources'].includes(
+    path,
+  )
+}
+
+function removeSearchAndHash(value: string) {
+  return value.split('#')[0]?.split('?')[0] ?? ''
+}
+
+function replaceRouteParams(path: string, libraryId: string) {
+  return path
+    .replaceAll('$libraryId', libraryId)
+    .replaceAll('$version', 'latest')
+}
+
+function isExternalUrl(value: string) {
+  return /^[a-z][a-z0-9+.-]*:/i.test(value)
+}
+
+function removeLeadingSlash(value: string) {
+  return value.replace(/^\/+/, '')
+}
+
+async function mapWithConcurrency<T, TResult>(
+  values: Array<T>,
+  concurrency: number,
+  fn: (value: T) => Promise<TResult>,
+) {
+  const results = new Array<TResult>(values.length)
+  let index = 0
+
+  const workers = Array.from(
+    { length: Math.min(concurrency, values.length) },
+    async () => {
+      while (index < values.length) {
+        const currentIndex = index
+        index += 1
+        results[currentIndex] = await fn(values[currentIndex])
+      }
+    },
+  )
+
+  await Promise.all(workers)
+
+  return results
+}
+
+function isDocsConfig(value: unknown): value is DocsConfig {
+  if (!isRecord(value) || !Array.isArray(value.sections)) {
+    return false
+  }
+
+  return value.sections.every(isConfigSection)
+}
+
+function isConfigSection(value: unknown): value is ConfigSection {
+  if (!isRecord(value)) {
+    return false
+  }
+
+  if (typeof value.label !== 'string' || !Array.isArray(value.children)) {
+    return false
+  }
+
+  const frameworks = value.frameworks
+
+  return (
+    value.children.every(isConfigItem) &&
+    (frameworks === undefined ||
+      (Array.isArray(frameworks) && frameworks.every(isFrameworkSection)))
+  )
+}
+
+function isFrameworkSection(value: unknown): value is ConfigFrameworkSection {
+  return (
+    isRecord(value) &&
+    typeof value.label === 'string' &&
+    Array.isArray(value.children) &&
+    value.children.every(isConfigItem)
+  )
+}
+
+function isConfigItem(value: unknown): value is ConfigItem {
+  return (
+    isRecord(value) &&
+    typeof value.label === 'string' &&
+    typeof value.to === 'string'
+  )
+}
+
+function isGitHubTreeItem(value: unknown): value is GitHubTreeItem {
+  return (
+    isRecord(value) &&
+    typeof value.path === 'string' &&
+    typeof value.type === 'string'
+  )
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function isDefined<T>(value: T | undefined): value is T {
+  return value !== undefined
+}
diff --git a/scripts/inspect-content-cache-paths.ts b/scripts/inspect-content-cache-paths.ts
new file mode 100644
index 000000000..c0217ff24
--- /dev/null
+++ b/scripts/inspect-content-cache-paths.ts
@@ -0,0 +1,114 @@
+import { and, eq, sql } from 'drizzle-orm'
+import { db } from '../src/db/client'
+import { githubContentCache } from '../src/db/schema'
+
+async function main() {
+  const repo = 'tanstack/router'
+  const gitRef = 'main'
+
+  console.log(`\n=== ${repo}@${gitRef} ===`)
+
+  const [{ total }] = await db
+    .select({ total: sql<number>`count(*)::int` })
+    .from(githubContentCache)
+    .where(
+      and(
+        eq(githubContentCache.repo, repo),
+        eq(githubContentCache.gitRef, gitRef),
+      ),
+    )
+  console.log(`total: ${total}`)
+
+  console.log('\nby contentKind:')
+  const byKind = await db
+    .select({
+      kind: githubContentCache.contentKind,
+      rows: sql<number>`count(*)::int`,
+      present: sql<number>`count(*) filter (where ${githubContentCache.isPresent})::int`,
+      absent: sql<number>`count(*) filter (where not ${githubContentCache.isPresent})::int`,
+    })
+    .from(githubContentCache)
+    .where(
+      and(
+        eq(githubContentCache.repo, repo),
+        eq(githubContentCache.gitRef, gitRef),
+      ),
+    )
+    .groupBy(githubContentCache.contentKind)
+  console.table(byKind)
+
+  console.log('\ntop-level path segment distribution:')
+  const byTopSegment = await db.execute(sql`
+    select
+      content_kind,
+      split_part(path, '/', 1) as top,
+      count(*)::int as rows
+    from github_content_cache
+    where repo = ${repo} and git_ref = ${gitRef}
+    group by content_kind, top
+    order by count(*) desc
+    limit 30
+  `)
+  console.table(byTopSegment)
+
+  console.log('\nfile extension distribution (file kind only):')
+  const byExt = await db.execute(sql`
+    select
+      case
+        when path ~ '\\.[a-zA-Z0-9]+$' then regexp_replace(path, '.*\\.([a-zA-Z0-9]+)$', '\\1')
+        else '(none)'
+      end as ext,
+      count(*)::int as rows
+    from github_content_cache
+    where repo = ${repo} and git_ref = ${gitRef} and content_kind = 'file'
+    group by ext
+    order by count(*) desc
+    limit 30
+  `)
+  console.table(byExt)
+
+  console.log('\nsample 20 random file paths:')
+  const samples = await db.execute(sql`
+    select path, is_present, length(coalesce(text_content, '')) as text_len
+    from github_content_cache
+    where repo = ${repo} and git_ref = ${gitRef} and content_kind = 'file'
+    order by random()
+    limit 20
+  `)
+  console.table(samples)
+
+  console.log('\nsample 10 random dir paths:')
+  const dirSamples = await db.execute(sql`
+    select path, is_present, jsonb_array_length(coalesce(json_content, '[]'::jsonb)) as entries
+    from github_content_cache
+    where repo = ${repo} and git_ref = ${gitRef} and content_kind = 'dir'
+    order by random()
+    limit 10
+  `)
+  console.table(dirSamples)
+
+  console.log('\npath length distribution:')
+  const lenBuckets = await db.execute(sql`
+    select
+      case
+        when length(path) < 50 then '< 50'
+        when length(path) < 100 then '50-100'
+        when length(path) < 200 then '100-200'
+        when length(path) < 500 then '200-500'
+        else '500+'
+      end as bucket,
+      count(*)::int as rows
+    from github_content_cache
+    where repo = ${repo} and git_ref = ${gitRef}
+    group by bucket
+    order by min(length(path))
+  `)
+  console.table(lenBuckets)
+}
+
+main()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err)
+    process.exit(1)
+  })
diff --git a/scripts/inspect-content-cache.ts b/scripts/inspect-content-cache.ts
new file mode 100644
index 000000000..c72904944
--- /dev/null
+++ b/scripts/inspect-content-cache.ts
@@ -0,0 +1,71 @@
+import { sql } from 'drizzle-orm'
+import { db } from '../src/db/client'
+import { docsArtifactCache, githubContentCache } from '../src/db/schema'
+
+async function main() {
+  console.log('\n=== github_content_cache ===')
+
+  const [{ total }] = await db
+    .select({ total: sql<number>`count(*)::int` })
+    .from(githubContentCache)
+  console.log(`total rows: ${total}`)
+
+  console.log('\nby repo:')
+  const byRepo = await db
+    .select({
+      repo: githubContentCache.repo,
+      rows: sql<number>`count(*)::int`,
+      refs: sql<number>`count(distinct ${githubContentCache.gitRef})::int`,
+    })
+    .from(githubContentCache)
+    .groupBy(githubContentCache.repo)
+    .orderBy(sql`count(*) desc`)
+  console.table(byRepo)
+
+  console.log('\ntop 20 (repo, gitRef) by row count:')
+  const byRef = await db
+    .select({
+      repo: githubContentCache.repo,
+      gitRef: githubContentCache.gitRef,
+      rows: sql<number>`count(*)::int`,
+      oldestCreated: sql<Date>`min(${githubContentCache.createdAt})`,
+      newestCreated: sql<Date>`max(${githubContentCache.createdAt})`,
+      newestUpdated: sql<Date>`max(${githubContentCache.updatedAt})`,
+    })
+    .from(githubContentCache)
+    .groupBy(githubContentCache.repo, githubContentCache.gitRef)
+    .orderBy(sql`count(*) desc`)
+    .limit(20)
+  console.table(byRef)
+
+  console.log('\ncreatedAt age buckets:')
+  const ageBuckets = await db.execute(sql`
+    select
+      case
+        when created_at > now() - interval '1 day' then '0-1d'
+        when created_at > now() - interval '7 days' then '1-7d'
+        when created_at > now() - interval '30 days' then '7-30d'
+        when created_at > now() - interval '90 days' then '30-90d'
+        when created_at > now() - interval '180 days' then '90-180d'
+        else '180d+'
+      end as bucket,
+      count(*)::int as rows
+    from github_content_cache
+    group by bucket
+    order by min(created_at)
+  `)
+  console.table(ageBuckets)
+
+  console.log('\n=== docs_artifact_cache ===')
+  const [{ totalArt }] = await db
+    .select({ totalArt: sql<number>`count(*)::int` })
+    .from(docsArtifactCache)
+  console.log(`total rows: ${totalArt}`)
+}
+
+main()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err)
+    process.exit(1)
+  })
diff --git a/scripts/link-packages.mjs b/scripts/link-packages.mjs
new file mode 100644
index 000000000..5499124dc
--- /dev/null
+++ b/scripts/link-packages.mjs
@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+/**
+ * Link local packages in parallel for faster dev startup
+ */
+
+import { spawn } from 'node:child_process'
+
+const packages = [
+  '../create-tsrouter-app/packages/cta-engine',
+  '../create-tsrouter-app/frameworks/react-cra',
+  '../create-tsrouter-app/frameworks/solid',
+]
+
+async function linkPackage(pkg) {
+  return new Promise((resolve, reject) => {
+    const proc = spawn('pnpm', ['link', pkg], { stdio: 'inherit' })
+    proc.on('close', (code) => {
+      if (code === 0) resolve()
+      else reject(new Error(`Failed to link ${pkg}`))
+    })
+    proc.on('error', reject)
+  })
+}
+
+try {
+  await Promise.all(packages.map(linkPackage))
+} catch (e) {
+  console.error(e.message)
+  process.exit(1)
+}
diff --git a/scripts/link.js b/scripts/link.js
deleted file mode 100644
index 8f08b0e8f..000000000
--- a/scripts/link.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { execSync } from 'child_process'
-import path from 'path'
-
-const packages = {
-  '@tanstack/history': 'router/packages/history',
-  '@tanstack/react-router': 'router/packages/react-router',
-  '@tanstack/router-cli': 'router/packages/router-cli',
-  '@tanstack/router-devtools': 'router/packages/router-devtools',
-  '@tanstack/router-generator': 'router/packages/router-generator',
-  '@tanstack/virtual-file-routes': 'router/packages/virtual-file-routes',
-  '@tanstack/router-plugin': 'router/packages/router-plugin',
-  '@tanstack/router-vite-plugin': 'router/packages/router-vite-plugin',
-  '@tanstack/react-router-ssr-query': 'router/packages/react-router-ssr-query',
-  '@tanstack/zod-adapter': 'router/packages/zod-adapter',
-  '@tanstack/valibot-adapter': 'router/packages/valibot-adapter',
-  '@tanstack/arktype-adapter': 'router/packages/arktype-adapter',
-  '@tanstack/start': 'router/packages/start',
-  '@tanstack/start-client': 'router/packages/start-client',
-  '@tanstack/start-server': 'router/packages/start-server',
-  '@tanstack/start-api-routes': 'router/packages/start-api-routes',
-  '@tanstack/start-server-functions-fetcher':
-    'router/packages/start-server-functions-fetcher',
-  '@tanstack/start-server-functions-handler':
-    'router/packages/start-server-functions-handler',
-  '@tanstack/start-server-functions-client':
-    'router/packages/start-server-functions-client',
-  '@tanstack/start-server-functions-ssr':
-    'router/packages/start-server-functions-ssr',
-  '@tanstack/start-server-functions-server':
-    'router/packages/start-server-functions-server',
-  '@tanstack/start-router-manifest': 'router/packages/start-router-manifest',
-  '@tanstack/start-config': 'router/packages/start-config',
-  '@tanstack/start-plugin': 'router/packages/start-plugin',
-  '@tanstack/eslint-plugin-router': 'router/packages/eslint-plugin-router',
-  '@tanstack/server-functions-plugin':
-    'router/packages/server-functions-plugin',
-  '@tanstack/directive-functions-plugin':
-    'router/packages/directive-functions-plugin',
-}
-
-const projectDir = process.cwd()
-const baseDir = path.resolve(process.cwd(), '..') // Uses the current working directory
-
-try {
-  Object.entries(packages).forEach(([packageName, packagePath]) => {
-    const fullPath = path.join(baseDir, packagePath)
-    console.log(`Linking ${packageName} from ${fullPath}`)
-    execSync(`cd "${fullPath}" && pnpm link --global`, { stdio: 'inherit' })
-  })
-
-  console.log(`Linking packages to project at ${projectDir}`)
-  Object.keys(packages).forEach((packageName) => {
-    execSync(`cd "${projectDir}" && pnpm link --global ${packageName}`, {
-      stdio: 'inherit',
-    })
-  })
-
-  console.log('All packages linked successfully!')
-} catch (error) {
-  console.error('Failed to link packages:', error)
-}
diff --git a/scripts/mcp-eval/run-eval.ts b/scripts/mcp-eval/run-eval.ts
index f81b5cf81..649181c1f 100644
--- a/scripts/mcp-eval/run-eval.ts
+++ b/scripts/mcp-eval/run-eval.ts
@@ -111,27 +111,6 @@ async function searchDocs(
   const text = response.result?.content[0]?.text || '{}'
   return JSON.parse(text)
 }
-
-async function getDoc(
-  library: string,
-  path: string,
-): Promise<{ title: string; content: string } | null> {
-  try {
-    const response = await callMcp('get_doc', { library, path })
-    if (response.error) return null
-
-    const metaText = response.result?.content[0]?.text || '{}'
-    const contentText = response.result?.content[1]?.text || ''
-
-    return {
-      ...JSON.parse(metaText),
-      content: contentText,
-    }
-  } catch {
-    return null
-  }
-}
-
 function extractPathFromUrl(url: string): string {
   // Extract path from URL like https://tanstack.com/router/latest/docs/integrations/query
   // Also handle anchors like #some-section
diff --git a/scripts/og-preview.ts b/scripts/og-preview.ts
new file mode 100644
index 000000000..30e9cb1b9
--- /dev/null
+++ b/scripts/og-preview.ts
@@ -0,0 +1,44 @@
+/**
+ * Renders one OG image per library to `.og-preview/`.
+ * Run with: pnpm exec tsx scripts/og-preview.ts
+ */
+import { mkdirSync, writeFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { libraries } from '../src/libraries/libraries'
+import { generateOgImageResponse } from '../src/server/og/generate.server'
+
+const OUT_DIR = resolve(process.cwd(), '.og-preview')
+
+async function renderToFile(
+  outPath: string,
+  input: Parameters<typeof generateOgImageResponse>[0],
+) {
+  const result = await generateOgImageResponse(input)
+  if ('kind' in result) {
+    console.warn(`[skip] ${input.libraryId}: ${result.kind}`)
+    return
+  }
+  const buf = Buffer.from(await result.arrayBuffer())
+  writeFileSync(outPath, buf)
+  console.log(`[ok] ${outPath}`)
+}
+
+async function main() {
+  mkdirSync(OUT_DIR, { recursive: true })
+
+  for (const lib of libraries) {
+    if (!lib.to) continue // skip entries without a landing page (react-charts, create-tsrouter-app)
+
+    await renderToFile(resolve(OUT_DIR, `${lib.id}.png`), { libraryId: lib.id })
+    await renderToFile(resolve(OUT_DIR, `${lib.id}-docs.png`), {
+      libraryId: lib.id,
+      title: 'Overview',
+      description: `${lib.tagline} Guides, API reference and examples in one place.`,
+    })
+  }
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})
diff --git a/scripts/preview-content-cache-prune.ts b/scripts/preview-content-cache-prune.ts
new file mode 100644
index 000000000..0b4a960e8
--- /dev/null
+++ b/scripts/preview-content-cache-prune.ts
@@ -0,0 +1,35 @@
+import { sql } from 'drizzle-orm'
+import { db } from '../src/db/client'
+
+async function main() {
+  console.log('\n=== preview prune impact ===')
+
+  const before = await db.execute(sql`
+    select
+      count(*)::int as total_rows,
+      count(*) filter (where is_present)::int as present_rows,
+      count(*) filter (where not is_present)::int as absent_rows,
+      count(*) filter (where not is_present and updated_at < now() - interval '1 day')::int as absent_older_than_1d,
+      count(*) filter (where updated_at < now() - interval '30 days')::int as any_older_than_30d
+    from github_content_cache
+  `)
+  console.table(before)
+
+  console.log('\nbreakdown of absent rows by repo (top 20):')
+  const byRepo = await db.execute(sql`
+    select repo, count(*)::int as absent_rows
+    from github_content_cache
+    where not is_present and updated_at < now() - interval '1 day'
+    group by repo
+    order by count(*) desc
+    limit 20
+  `)
+  console.table(byRepo)
+}
+
+main()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err)
+    process.exit(1)
+  })
diff --git a/scripts/prune-content-cache-negatives.ts b/scripts/prune-content-cache-negatives.ts
new file mode 100644
index 000000000..8bf3b4e98
--- /dev/null
+++ b/scripts/prune-content-cache-negatives.ts
@@ -0,0 +1,42 @@
+import { eq, sql } from 'drizzle-orm'
+import { db } from '../src/db/client'
+import { githubContentCache } from '../src/db/schema'
+
+/**
+ * One-shot cleanup: delete every negative cache row (is_present = false).
+ *
+ * The daily prune fn keeps negatives for 1 day going forward, but the
+ * existing rows had their updated_at bumped by mark*Stale so they all
+ * look fresh. They're safe to drop wholesale — anything still being
+ * requested will repopulate within 15 minutes (the negative TTL), and
+ * most are bogus paths that won't be requested again.
+ */
+async function main() {
+  const startTime = Date.now()
+
+  const [{ before }] = await db
+    .select({ before: sql<number>`count(*)::int` })
+    .from(githubContentCache)
+  console.log(`[prune-negatives] rows before: ${before}`)
+
+  const deleted = await db
+    .delete(githubContentCache)
+    .where(eq(githubContentCache.isPresent, false))
+    .returning({ id: githubContentCache.id })
+
+  const [{ after }] = await db
+    .select({ after: sql<number>`count(*)::int` })
+    .from(githubContentCache)
+
+  const duration = Date.now() - startTime
+  console.log(
+    `[prune-negatives] ✓ Deleted ${deleted.length} negative rows in ${duration}ms (rows after: ${after})`,
+  )
+}
+
+main()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error('[prune-negatives] ✗ Failed:', err)
+    process.exit(1)
+  })
diff --git a/scripts/prune-content-cache.ts b/scripts/prune-content-cache.ts
new file mode 100644
index 000000000..bdac0d3ba
--- /dev/null
+++ b/scripts/prune-content-cache.ts
@@ -0,0 +1,20 @@
+import { pruneStaleCacheRows } from '../src/utils/github-content-cache.server'
+
+async function main() {
+  const startTime = Date.now()
+  console.log('[prune-content-cache] Starting prune...')
+
+  const result = await pruneStaleCacheRows()
+  const duration = Date.now() - startTime
+
+  console.log(
+    `[prune-content-cache] ✓ Completed in ${duration}ms - deleted ${result.githubContentDeleted} content entries, ${result.docsArtifactDeleted} artifact entries (cutoff: ${result.cutoff.toISOString()})`,
+  )
+}
+
+main()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error('[prune-content-cache] ✗ Failed:', err)
+    process.exit(1)
+  })
diff --git a/scripts/purge-cloudflare-cache.mjs b/scripts/purge-cloudflare-cache.mjs
new file mode 100644
index 000000000..89e8a9142
--- /dev/null
+++ b/scripts/purge-cloudflare-cache.mjs
@@ -0,0 +1,105 @@
+const ZONE_NAME = process.env.CLOUDFLARE_ZONE_NAME || 'tanstack.com'
+
+const token =
+  process.env.CLOUDFLARE_CACHE_PURGE_TOKEN ||
+  process.env.CLOUDFLARE_API_TOKEN ||
+  process.env.CF_API_TOKEN
+
+if (!token) {
+  fail(
+    'Missing CLOUDFLARE_CACHE_PURGE_TOKEN, CLOUDFLARE_API_TOKEN, or CF_API_TOKEN.',
+  )
+}
+
+const zoneId =
+  process.env.CLOUDFLARE_ZONE_ID ||
+  process.env.CF_ZONE_ID ||
+  (await findZoneId(token, ZONE_NAME))
+
+if (!zoneId) {
+  fail(
+    `Missing CLOUDFLARE_ZONE_ID. Set it directly, or use a token with Zone:Read so ${ZONE_NAME} can be discovered.`,
+  )
+}
+
+const response = await fetch(
+  `https://api.cloudflare.com/client/v4/zones/${zoneId}/purge_cache`,
+  {
+    body: JSON.stringify({ purge_everything: true }),
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  },
+)
+
+const payload = await response.json().catch(() => undefined)
+
+if (!isCloudflareResponse(payload) || !response.ok || !payload.success) {
+  const message =
+    isCloudflareResponse(payload) && payload.errors.length
+      ? payload.errors
+          .map((error) => error.message)
+          .filter(Boolean)
+          .join('; ')
+      : `Cloudflare purge failed with status ${response.status}`
+
+  fail(message)
+}
+
+console.log(`Purged Cloudflare cache for ${ZONE_NAME}.`)
+
+async function findZoneId(apiToken, zoneName) {
+  const response = await fetch(
+    `https://api.cloudflare.com/client/v4/zones?name=${encodeURIComponent(
+      zoneName,
+    )}&status=active`,
+    {
+      headers: {
+        Authorization: `Bearer ${apiToken}`,
+        'Content-Type': 'application/json',
+      },
+    },
+  )
+
+  if (!response.ok) {
+    return undefined
+  }
+
+  const payload = await response.json().catch(() => undefined)
+  if (!isZoneListResponse(payload)) {
+    return undefined
+  }
+
+  const zone = payload.result.find((candidate) => candidate.name === zoneName)
+  return zone?.id
+}
+
+function isCloudflareResponse(value) {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    typeof value.success === 'boolean' &&
+    Array.isArray(value.errors)
+  )
+}
+
+function isZoneListResponse(value) {
+  return (
+    isCloudflareResponse(value) &&
+    Array.isArray(value.result) &&
+    value.result.every(
+      (zone) =>
+        typeof zone === 'object' &&
+        zone !== null &&
+        typeof zone.id === 'string' &&
+        typeof zone.name === 'string',
+    )
+  )
+}
+
+function fail(message) {
+  console.error(message)
+  process.exit(1)
+}
diff --git a/scripts/sync-docs-webhooks.ts b/scripts/sync-docs-webhooks.ts
new file mode 100644
index 000000000..833561b9d
--- /dev/null
+++ b/scripts/sync-docs-webhooks.ts
@@ -0,0 +1,133 @@
+import { execFileSync } from 'node:child_process'
+import { docsWebhookSources } from '../src/utils/docs-webhook-sources'
+
+type GitHubHook = {
+  active: boolean
+  config?: {
+    url?: string
+  }
+  events?: Array<string>
+  id: number
+}
+
+type DocsWebhookSource = {
+  refs: Array<string>
+  repo: string
+}
+
+const dryRun = process.argv.includes('--dry-run')
+const siteUrl = (process.env.SITE_URL || 'https://tanstack.com').replace(
+  /\/+$/g,
+  '',
+)
+const webhookUrl = `${siteUrl}/api/github/webhook`
+const webhookSecret = process.env.GITHUB_WEBHOOK_SECRET
+
+if (!dryRun && !webhookSecret) {
+  throw new Error(
+    'GITHUB_WEBHOOK_SECRET is required to create or update repository webhooks.',
+  )
+}
+
+if (!dryRun && webhookSecret) {
+  if (webhookSecret.length < 16 || /\s/.test(webhookSecret)) {
+    throw new Error(
+      'GITHUB_WEBHOOK_SECRET must be a raw secret value, not a secret manager placeholder.',
+    )
+  }
+}
+
+function runGh(args: Array<string>) {
+  return execFileSync('gh', args, {
+    cwd: process.cwd(),
+    encoding: 'utf8',
+    stdio: ['ignore', 'pipe', 'pipe'],
+  }).trim()
+}
+
+function listHooks(repo: string) {
+  const output = runGh(['api', `repos/${repo}/hooks`])
+
+  return JSON.parse(output) as Array<GitHubHook>
+}
+
+function createWebhook(repo: string) {
+  if (dryRun) {
+    console.log(`[dry-run] create webhook for ${repo} -> ${webhookUrl}`)
+    return
+  }
+
+  runGh([
+    'api',
+    `repos/${repo}/hooks`,
+    '--method',
+    'POST',
+    '-F',
+    'name=web',
+    '-F',
+    'active=true',
+    '-F',
+    'events[]=push',
+    '-F',
+    `config[url]=${webhookUrl}`,
+    '-F',
+    'config[content_type]=json',
+    '-F',
+    `config[secret]=${webhookSecret}`,
+    '-F',
+    'config[insecure_ssl]=0',
+  ])
+
+  console.log(`created webhook for ${repo}`)
+}
+
+function updateWebhook(repo: string, hookId: number) {
+  if (dryRun) {
+    console.log(
+      `[dry-run] update webhook ${hookId} for ${repo} -> ${webhookUrl}`,
+    )
+    return
+  }
+
+  runGh([
+    'api',
+    `repos/${repo}/hooks/${hookId}`,
+    '--method',
+    'PATCH',
+    '-F',
+    'active=true',
+    '-F',
+    'events[]=push',
+    '-F',
+    `config[url]=${webhookUrl}`,
+    '-F',
+    'config[content_type]=json',
+    '-F',
+    `config[secret]=${webhookSecret}`,
+    '-F',
+    'config[insecure_ssl]=0',
+  ])
+
+  console.log(`updated webhook ${hookId} for ${repo}`)
+}
+
+const webhookSources = docsWebhookSources as Array<DocsWebhookSource>
+
+console.log(`docs webhook target: ${webhookUrl}`)
+console.log('watched repos/refs:')
+
+for (const source of webhookSources) {
+  console.log(`- ${source.repo} (${source.refs.join(', ')})`)
+}
+
+for (const source of webhookSources) {
+  const hooks = listHooks(source.repo)
+  const existingHook = hooks.find((hook) => hook.config?.url === webhookUrl)
+
+  if (!existingHook) {
+    createWebhook(source.repo)
+    continue
+  }
+
+  updateWebhook(source.repo, existingHook.id)
+}
diff --git a/scripts/test-chunk-consistency.ts b/scripts/test-chunk-consistency.ts
index 723458fa6..d5a1fddcb 100644
--- a/scripts/test-chunk-consistency.ts
+++ b/scripts/test-chunk-consistency.ts
@@ -3,37 +3,7 @@
  * Verifies that the same package will always generate the same chunk keys
  */
 
-function generateNormalizedChunks(
-  startDate: string,
-  endDate: string,
-): Array<{ from: string; to: string }> {
-  const CHUNK_DAYS = 500
-  const chunks: Array<{ from: string; to: string }> = []
-
-  let currentFrom = new Date(startDate)
-  const finalDate = new Date(endDate)
-
-  while (currentFrom <= finalDate) {
-    const from = currentFrom.toISOString().substring(0, 10)
-
-    const potentialTo = new Date(currentFrom)
-    potentialTo.setDate(potentialTo.getDate() + CHUNK_DAYS - 1)
-
-    const to =
-      potentialTo > finalDate
-        ? finalDate.toISOString().substring(0, 10)
-        : potentialTo.toISOString().substring(0, 10)
-
-    chunks.push({ from, to })
-
-    currentFrom = new Date(to)
-    currentFrom.setDate(currentFrom.getDate() + 1)
-
-    if (to === endDate) break
-  }
-
-  return chunks
-}
+import { getNormalizedNpmDownloadChunks } from '../src/utils/npm-download-ranges'
 
 console.log('\n' + '='.repeat(80))
 console.log('🧪 Testing Chunk Boundary Consistency')
@@ -55,7 +25,11 @@ console.log('Testing chunk consistency across different "today" dates:\n')
 const allChunks: Record<string, Array<{ from: string; to: string }>> = {}
 
 for (const today of testDates) {
-  const chunks = generateNormalizedChunks(createdDate, today)
+  const chunks = getNormalizedNpmDownloadChunks({
+    startDate: createdDate,
+    endDate: today,
+    today,
+  })
   allChunks[today] = chunks
 
   console.log(`📅 If run on ${today}:`)
diff --git a/scripts/test-npm-cache.ts b/scripts/test-npm-cache.ts
index 7184d13f3..a1bbced9d 100644
--- a/scripts/test-npm-cache.ts
+++ b/scripts/test-npm-cache.ts
@@ -6,7 +6,7 @@
 import {
   getCachedNpmDownloadChunk,
   setCachedNpmDownloadChunk,
-} from '~/utils/stats-db.server'
+} from '../src/utils/npm-download-cache.server'
 
 async function testCache() {
   console.log('\n' + '='.repeat(80))
diff --git a/src/auth/auth.server.ts b/src/auth/auth.server.ts
index 112b85e4b..74794c930 100644
--- a/src/auth/auth.server.ts
+++ b/src/auth/auth.server.ts
@@ -112,6 +112,7 @@ export class AuthService implements IAuthService {
       adsDisabled: user.adsDisabled,
       interestedInHidingAds: user.interestedInHidingAds,
       lastUsedFramework: user.lastUsedFramework,
+      signupSources: user.signupSources,
     }
   }
 }
diff --git a/src/auth/capabilities.server.ts b/src/auth/capabilities.server.ts
index 47c2c5fbe..ccbe43124 100644
--- a/src/auth/capabilities.server.ts
+++ b/src/auth/capabilities.server.ts
@@ -5,17 +5,16 @@
  * Uses inversion of control for data access.
  */
 
-import type { ICapabilitiesRepository, AuthUser } from './types'
-import {
-  type Capability,
+import type { ICapabilitiesRepository, Capability } from './types'
+
+export {
   hasCapability,
   hasAllCapabilities,
   hasAnyCapability,
   isAdmin,
-} from '~/db/types'
-
-// Re-export capability utilities from shared types for backwards compatibility
-export { hasCapability, hasAllCapabilities, hasAnyCapability, isAdmin }
+  userHasCapability,
+  userIsAdmin,
+} from './capabilities'
 
 // ============================================================================
 // Capabilities Service
@@ -40,26 +39,3 @@ export class CapabilitiesService {
     return this.repository.getBulkEffectiveCapabilities(userIds)
   }
 }
-
-// ============================================================================
-// AuthUser-specific Capability Utilities
-// ============================================================================
-
-/**
- * Check if AuthUser has a specific capability
- */
-export function userHasCapability(
-  user: AuthUser | null | undefined,
-  capability: Capability,
-): boolean {
-  if (!user) return false
-  return hasCapability(user.capabilities, capability)
-}
-
-/**
- * Check if AuthUser is admin
- */
-export function userIsAdmin(user: AuthUser | null | undefined): boolean {
-  if (!user) return false
-  return isAdmin(user.capabilities)
-}
diff --git a/src/auth/capabilities.ts b/src/auth/capabilities.ts
new file mode 100644
index 000000000..12ea9bad1
--- /dev/null
+++ b/src/auth/capabilities.ts
@@ -0,0 +1,23 @@
+import type { AuthUser } from './types'
+import {
+  type Capability,
+  hasCapability,
+  hasAllCapabilities,
+  hasAnyCapability,
+  isAdmin,
+} from '~/db/types'
+
+export { hasCapability, hasAllCapabilities, hasAnyCapability, isAdmin }
+
+export function userHasCapability(
+  user: AuthUser | null | undefined,
+  capability: Capability,
+): boolean {
+  if (!user) return false
+  return hasCapability(user.capabilities, capability)
+}
+
+export function userIsAdmin(user: AuthUser | null | undefined): boolean {
+  if (!user) return false
+  return isAdmin(user.capabilities)
+}
diff --git a/src/auth/cli-tickets.server.ts b/src/auth/cli-tickets.server.ts
new file mode 100644
index 000000000..b7987a290
--- /dev/null
+++ b/src/auth/cli-tickets.server.ts
@@ -0,0 +1,109 @@
+/**
+ * CLI Auth Ticket Store
+ *
+ * In-memory store for short-lived CLI authentication tickets.
+ * Tickets are created by the CLI, then authorized in the browser after
+ * the user completes OAuth. The CLI polls for the token.
+ *
+ * TTL: 5 minutes. Single-use (consumed on exchange).
+ */
+
+const TICKET_TTL_MS = 5 * 60 * 1000
+const MAX_TICKETS = 1_000
+
+interface CliTicket {
+  userId: string | null
+  sessionToken: string | null
+  expiresAt: number
+  authorized: boolean
+}
+
+// Server handlers and server-function handlers can load this module through
+// different bundled entry points. Pin the Map to globalThis so those callers
+// share one ticket store instead of fragmenting module-level state.
+const TICKETS_KEY = Symbol.for('tanstack.cli-auth.tickets')
+const TICKETS_INTERVAL_KEY = Symbol.for('tanstack.cli-auth.cleanup')
+
+type GlobalWithTickets = typeof globalThis & {
+  [TICKETS_KEY]?: Map<string, CliTicket>
+  [TICKETS_INTERVAL_KEY]?: ReturnType<typeof setInterval>
+}
+
+const globalScope = globalThis as GlobalWithTickets
+
+const tickets: Map<string, CliTicket> = (globalScope[TICKETS_KEY] ??= new Map<
+  string,
+  CliTicket
+>())
+
+if (!globalScope[TICKETS_INTERVAL_KEY]) {
+  globalScope[TICKETS_INTERVAL_KEY] = setInterval(
+    () => {
+      cleanupExpiredTickets()
+    },
+    60 * 1000, // every minute
+  )
+}
+
+function cleanupExpiredTickets() {
+  const now = Date.now()
+  for (const [id, ticket] of tickets) {
+    if (ticket.expiresAt < now) {
+      tickets.delete(id)
+    }
+  }
+}
+
+function trimTicketStore() {
+  cleanupExpiredTickets()
+
+  while (tickets.size >= MAX_TICKETS) {
+    const oldestId = tickets.keys().next().value
+    if (!oldestId) break
+    tickets.delete(oldestId)
+  }
+}
+
+export function createCliTicket(): string {
+  trimTicketStore()
+
+  const id = crypto.randomUUID()
+  tickets.set(id, {
+    userId: null,
+    sessionToken: null,
+    expiresAt: Date.now() + TICKET_TTL_MS,
+    authorized: false,
+  })
+  return id
+}
+
+export function getCliTicket(id: string): CliTicket | null {
+  const ticket = tickets.get(id)
+  if (!ticket) return null
+  if (ticket.expiresAt < Date.now()) {
+    tickets.delete(id)
+    return null
+  }
+  return ticket
+}
+
+export function authorizeCliTicket(
+  id: string,
+  userId: string,
+  sessionToken: string,
+): boolean {
+  const ticket = getCliTicket(id)
+  if (!ticket) return false
+  ticket.userId = userId
+  ticket.sessionToken = sessionToken
+  ticket.authorized = true
+  return true
+}
+
+export function consumeCliTicket(id: string): string | null {
+  const ticket = getCliTicket(id)
+  if (!ticket || !ticket.authorized || !ticket.sessionToken) return null
+  const { sessionToken } = ticket
+  tickets.delete(id)
+  return sessionToken
+}
diff --git a/src/auth/client.ts b/src/auth/client.ts
index 9b79ed9e0..2090ddf25 100644
--- a/src/auth/client.ts
+++ b/src/auth/client.ts
@@ -6,6 +6,7 @@
  */
 
 import type { OAuthProvider } from './types'
+import { openCenteredPopupWindow } from '~/utils/browser-effects'
 
 // ============================================================================
 // Auth Client
@@ -19,23 +20,30 @@ export const authClient = {
     /**
      * Initiate OAuth sign-in with a social provider (full page redirect)
      */
-    social: ({ provider }: { provider: OAuthProvider }) => {
-      window.location.href = `/auth/${provider}/start`
+    social: ({
+      provider,
+      returnTo,
+    }: {
+      provider: OAuthProvider
+      returnTo?: string
+    }) => {
+      const url = returnTo
+        ? `/auth/${provider}/start?returnTo=${encodeURIComponent(returnTo)}`
+        : `/auth/${provider}/start`
+      window.location.href = url
     },
 
     /**
      * Initiate OAuth sign-in in a popup window (for modal-based login)
      */
     socialPopup: ({ provider }: { provider: OAuthProvider }) => {
-      const width = 500
-      const height = 600
-      const left = window.screenX + (window.outerWidth - width) / 2
-      const top = window.screenY + (window.outerHeight - height) / 2
-      window.open(
-        `/auth/${provider}/start?popup=true`,
-        'tanstack-oauth',
-        `width=${width},height=${height},left=${left},top=${top},popup=yes`,
-      )
+      return openCenteredPopupWindow({
+        url: `/auth/${provider}/start?popup=true`,
+        target: 'tanstack-oauth',
+        width: 500,
+        height: 600,
+        features: ['popup=yes'],
+      })
     },
   },
 
@@ -65,7 +73,7 @@ export function navigateToSignIn(
     window.location.href = url
   } else {
     const url = returnTo
-      ? `/login?returnTo=${encodeURIComponent(returnTo)}`
+      ? `/login?redirect=${encodeURIComponent(returnTo)}`
       : '/login'
     window.location.href = url
   }
diff --git a/src/auth/github.server.ts b/src/auth/github.server.ts
new file mode 100644
index 000000000..11fff55d5
--- /dev/null
+++ b/src/auth/github.server.ts
@@ -0,0 +1,106 @@
+/**
+ * GitHub Auth Utilities
+ *
+ * Helper functions for checking GitHub OAuth scopes and tokens.
+ */
+
+import { env } from '~/utils/env'
+import {
+  buildGitHubAuthUrl,
+  generateOAuthState,
+  getOAuthAccountRepository,
+} from './index.server'
+
+const REPO_SCOPE = 'public_repo'
+
+function hasRepoScopeInString(tokenScope: string | null): boolean {
+  if (!tokenScope) return false
+  const scopes = tokenScope.split(/[,\s]+/)
+  return scopes.includes(REPO_SCOPE) || scopes.includes('repo')
+}
+
+/**
+ * Check if a user has the public_repo scope for GitHub
+ */
+export async function hasGitHubRepoScope(userId: string): Promise<boolean> {
+  const repo = getOAuthAccountRepository()
+  const account = await repo.findByUserId(userId, 'github')
+  return hasRepoScopeInString(account?.tokenScope ?? null)
+}
+
+/**
+ * Get a user's GitHub access token
+ */
+export async function getGitHubToken(userId: string): Promise<string | null> {
+  const repo = getOAuthAccountRepository()
+  const account = await repo.findByUserId(userId, 'github')
+  return account?.accessToken ?? null
+}
+
+/**
+ * Get a user's GitHub username from their access token
+ */
+export async function getGitHubUsername(
+  accessToken: string,
+): Promise<string | null> {
+  const response = await fetch('https://api.github.com/user', {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      Accept: 'application/vnd.github.v3+json',
+      'User-Agent': 'TanStack.com',
+    },
+  })
+
+  if (!response.ok) return null
+
+  const profile = await response.json()
+  return profile.login ?? null
+}
+
+export interface GitHubAuthState {
+  hasGitHubAccount: boolean
+  hasRepoScope: boolean
+  accessToken: string | null
+}
+
+/**
+ * Get complete GitHub auth state for a user
+ */
+export async function getGitHubAuthState(
+  userId: string,
+): Promise<GitHubAuthState> {
+  const repo = getOAuthAccountRepository()
+  const account = await repo.findByUserId(userId, 'github')
+
+  if (!account) {
+    return {
+      hasGitHubAccount: false,
+      hasRepoScope: false,
+      accessToken: null,
+    }
+  }
+
+  return {
+    hasGitHubAccount: true,
+    hasRepoScope: hasRepoScopeInString(account.tokenScope),
+    accessToken: account.accessToken,
+  }
+}
+
+/**
+ * Build a GitHub re-auth URL with additional scopes
+ */
+export function buildGitHubReAuthUrl(
+  returnTo: string,
+  additionalScopes: Array<string>,
+): string {
+  const clientId = env.GITHUB_OAUTH_CLIENT_ID
+  if (!clientId) {
+    throw new Error('GITHUB_OAUTH_CLIENT_ID is not configured')
+  }
+
+  const state = generateOAuthState()
+
+  // Build auth URL with additional scopes
+  return buildGitHubAuthUrl(clientId, undefined, state, additionalScopes)
+}
diff --git a/src/auth/index.server.ts b/src/auth/index.server.ts
index d8ffb81e1..78ccbd425 100644
--- a/src/auth/index.server.ts
+++ b/src/auth/index.server.ts
@@ -67,6 +67,9 @@ export {
   createOAuthPopupCookie,
   clearOAuthPopupCookie,
   isOAuthPopupMode,
+  createOAuthReturnToCookie,
+  clearOAuthReturnToCookie,
+  getOAuthReturnTo,
   SESSION_DURATION_MS,
   SESSION_MAX_AGE_SECONDS,
 } from './session.server'
@@ -82,7 +85,7 @@ export {
   isAdmin,
   userHasCapability,
   userIsAdmin,
-} from './capabilities.server'
+} from './capabilities'
 
 // ============================================================================
 // OAuth Utilities
diff --git a/src/auth/index.ts b/src/auth/index.ts
index 9191a2460..45de08eda 100644
--- a/src/auth/index.ts
+++ b/src/auth/index.ts
@@ -54,4 +54,4 @@ export {
   isAdmin,
   userHasCapability,
   userIsAdmin,
-} from './capabilities.server'
+} from './capabilities'
diff --git a/src/auth/oauth.server.ts b/src/auth/oauth.server.ts
index f218d1d45..f980169b2 100644
--- a/src/auth/oauth.server.ts
+++ b/src/auth/oauth.server.ts
@@ -15,6 +15,38 @@ import type {
 } from './types'
 import { AuthError } from './types'
 
+const GITHUB_USER_AGENT = 'TanStack.com'
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+async function parseOAuthJson(
+  response: Response,
+  context: string,
+): Promise<unknown> {
+  const text = await response.text()
+
+  try {
+    return JSON.parse(text)
+  } catch {
+    const body = text.trim().slice(0, 300)
+    console.error(
+      `[OAuth] ${context} returned non-JSON response: status=${response.status}, statusText=${response.statusText}, body=${body}`,
+    )
+    throw new AuthError(`${context} returned non-JSON response`, 'OAUTH_ERROR')
+  }
+}
+
+function getStringField(record: Record<string, unknown>, key: string) {
+  const value = record[key]
+  return typeof value === 'string' ? value : undefined
+}
+
+function getGitHubApiError(data: unknown) {
+  return isRecord(data) ? getStringField(data, 'message') : undefined
+}
+
 // ============================================================================
 // OAuth Service Implementation
 // ============================================================================
@@ -34,6 +66,7 @@ export class OAuthService implements IOAuthService {
   async upsertOAuthAccount(
     provider: OAuthProvider,
     profile: OAuthProfile,
+    tokenInfo?: { accessToken: string; scope: string },
   ): Promise<OAuthResult> {
     try {
       // Check if OAuth account already exists
@@ -80,6 +113,16 @@ export class OAuthService implements IOAuthService {
           await this.userRepository.update(existingAccount.userId, updates)
         }
 
+        // Update token if provided
+        if (tokenInfo) {
+          await this.oauthAccountRepository.updateToken(
+            existingAccount.userId,
+            provider,
+            tokenInfo.accessToken,
+            tokenInfo.scope,
+          )
+        }
+
         return {
           userId: existingAccount.userId,
           isNewUser: false,
@@ -138,12 +181,14 @@ export class OAuthService implements IOAuthService {
         userId = newUser.id
       }
 
-      // Create OAuth account link
+      // Create OAuth account link with token if provided
       await this.oauthAccountRepository.create({
         userId,
         provider,
         providerAccountId: profile.id,
         email: profile.email,
+        accessToken: tokenInfo?.accessToken,
+        tokenScope: tokenInfo?.scope,
       })
 
       return {
@@ -179,14 +224,22 @@ export class OAuthService implements IOAuthService {
  */
 export function buildGitHubAuthUrl(
   clientId: string,
-  redirectUri: string,
+  redirectUri: string | undefined,
   state: string,
+  additionalScopes?: Array<string>,
 ): string {
-  return `https://github.com/login/oauth/authorize?client_id=${encodeURIComponent(
-    clientId,
-  )}&redirect_uri=${encodeURIComponent(
-    redirectUri,
-  )}&scope=user:email&state=${encodeURIComponent(state)}`
+  const scopes = ['user:email', ...(additionalScopes ?? [])].join(' ')
+  const params = new URLSearchParams({
+    client_id: clientId,
+    scope: scopes,
+    state,
+  })
+
+  if (redirectUri) {
+    params.set('redirect_uri', redirectUri)
+  }
+
+  return `https://github.com/login/oauth/authorize?${params.toString()}`
 }
 
 /**
@@ -204,6 +257,11 @@ export function buildGoogleAuthUrl(
   )}&response_type=code&scope=openid email profile&state=${encodeURIComponent(state)}`
 }
 
+export interface GitHubTokenResult {
+  accessToken: string
+  scope: string
+}
+
 /**
  * Exchange GitHub authorization code for access token
  */
@@ -211,8 +269,23 @@ export async function exchangeGitHubCode(
   code: string,
   clientId: string,
   clientSecret: string,
-  redirectUri: string,
-): Promise<string> {
+  redirectUri?: string,
+): Promise<GitHubTokenResult> {
+  const body: {
+    client_id: string
+    client_secret: string
+    code: string
+    redirect_uri?: string
+  } = {
+    client_id: clientId,
+    client_secret: clientSecret,
+    code,
+  }
+
+  if (redirectUri) {
+    body.redirect_uri = redirectUri
+  }
+
   const tokenResponse = await fetch(
     'https://github.com/login/oauth/access_token',
     {
@@ -220,32 +293,38 @@ export async function exchangeGitHubCode(
       headers: {
         'Content-Type': 'application/json',
         Accept: 'application/json',
+        'User-Agent': GITHUB_USER_AGENT,
       },
-      body: JSON.stringify({
-        client_id: clientId,
-        client_secret: clientSecret,
-        code,
-        redirect_uri: redirectUri,
-      }),
+      body: JSON.stringify(body),
     },
   )
 
-  const tokenData = await tokenResponse.json()
-  if (tokenData.error) {
+  const tokenData = await parseOAuthJson(tokenResponse, 'GitHub token exchange')
+  if (!isRecord(tokenData)) {
+    throw new AuthError('Invalid GitHub token response', 'OAUTH_ERROR')
+  }
+
+  const error = getStringField(tokenData, 'error')
+  if (error) {
+    const errorDescription = getStringField(tokenData, 'error_description')
     console.error(
-      `[OAuth] GitHub token exchange failed: ${tokenData.error}, description: ${tokenData.error_description || 'none'}`,
+      `[OAuth] GitHub token exchange failed: ${error}, description: ${errorDescription || 'none'}`,
     )
-    throw new AuthError(`GitHub OAuth error: ${tokenData.error}`, 'OAUTH_ERROR')
+    throw new AuthError(`GitHub OAuth error: ${error}`, 'OAUTH_ERROR')
   }
 
-  if (!tokenData.access_token) {
+  const accessToken = getStringField(tokenData, 'access_token')
+  if (!accessToken) {
     console.error(
       '[OAuth] GitHub token exchange succeeded but no access_token returned',
     )
     throw new AuthError('No access token received from GitHub', 'OAUTH_ERROR')
   }
 
-  return tokenData.access_token
+  return {
+    accessToken,
+    scope: getStringField(tokenData, 'scope') ?? '',
+  }
 }
 
 /**
@@ -258,21 +337,31 @@ export async function fetchGitHubProfile(
     headers: {
       Authorization: `Bearer ${accessToken}`,
       Accept: 'application/vnd.github.v3+json',
+      'User-Agent': GITHUB_USER_AGENT,
     },
   })
 
-  const profile = await profileResponse.json()
+  const profile = await parseOAuthJson(profileResponse, 'GitHub profile API')
+  if (!isRecord(profile)) {
+    throw new AuthError('Invalid GitHub profile response', 'OAUTH_ERROR')
+  }
+
+  if (!profileResponse.ok) {
+    const message = getGitHubApiError(profile) ?? 'Failed to fetch GitHub user'
+    throw new AuthError(message, 'OAUTH_ERROR')
+  }
 
   // Fetch email (may require separate call)
-  let email = profile.email
+  let email = getStringField(profile, 'email')
   if (!email) {
     const emailResponse = await fetch('https://api.github.com/user/emails', {
       headers: {
         Authorization: `Bearer ${accessToken}`,
         Accept: 'application/vnd.github.v3+json',
+        'User-Agent': GITHUB_USER_AGENT,
       },
     })
-    const emails = await emailResponse.json()
+    const emails = await parseOAuthJson(emailResponse, 'GitHub emails API')
 
     if (!Array.isArray(emails)) {
       console.error(
@@ -280,24 +369,34 @@ export async function fetchGitHubProfile(
         emails,
       )
       throw new AuthError(
-        emails?.message || 'Failed to fetch GitHub emails',
+        getGitHubApiError(emails) || 'Failed to fetch GitHub emails',
         'OAUTH_ERROR',
       )
     }
 
     const primaryEmail = emails.find(
-      (e: { primary: boolean; verified: boolean; email: string }) =>
-        e.primary && e.verified,
+      (emailRecord): emailRecord is Record<string, unknown> =>
+        isRecord(emailRecord) &&
+        emailRecord.primary === true &&
+        emailRecord.verified === true &&
+        typeof emailRecord.email === 'string',
     )
     const verifiedEmail = emails.find(
-      (e: { verified: boolean; email: string }) => e.verified,
+      (emailRecord): emailRecord is Record<string, unknown> =>
+        isRecord(emailRecord) &&
+        emailRecord.verified === true &&
+        typeof emailRecord.email === 'string',
     )
-    email = primaryEmail?.email || verifiedEmail?.email
+    email =
+      getStringField(primaryEmail ?? {}, 'email') ||
+      getStringField(verifiedEmail ?? {}, 'email')
   }
 
   if (!email) {
     console.error(
-      `[OAuth] No verified email found for GitHub user ${profile.id} (${profile.login})`,
+      `[OAuth] No verified email found for GitHub user ${String(
+        profile.id,
+      )} (${getStringField(profile, 'login') ?? 'unknown'})`,
     )
     throw new AuthError(
       'No verified email found for GitHub account',
@@ -308,8 +407,8 @@ export async function fetchGitHubProfile(
   return {
     id: String(profile.id),
     email,
-    name: profile.name || profile.login,
-    image: profile.avatar_url,
+    name: getStringField(profile, 'name') || getStringField(profile, 'login'),
+    image: getStringField(profile, 'avatar_url'),
   }
 }
 
diff --git a/src/auth/oauthClient.server.ts b/src/auth/oauthClient.server.ts
index 33884ef94..1133db4b7 100644
--- a/src/auth/oauthClient.server.ts
+++ b/src/auth/oauthClient.server.ts
@@ -5,6 +5,8 @@ import {
   oauthRefreshTokens,
 } from '~/db/schema'
 import { eq, and, sql, lt } from 'drizzle-orm'
+import { sha256Hex } from '~/utils/hash'
+import { envFunctions } from '~/utils/env.functions'
 
 // Token TTLs
 const AUTH_CODE_TTL_MS = 10 * 60 * 1000 // 10 minutes
@@ -14,6 +16,9 @@ const REFRESH_TOKEN_TTL_MS = 30 * 24 * 60 * 60 * 1000 // 30 days
 // Token prefixes (new generic prefixes)
 const ACCESS_TOKEN_PREFIX = 'oa_'
 const REFRESH_TOKEN_PREFIX = 'oar_'
+const REGISTERED_CLIENT_PREFIX = 'tsr_'
+const LAST_USED_WRITE_INTERVAL_MS = 5 * 60 * 1000
+const MAX_REGISTERED_CLIENT_PAYLOAD_LENGTH = 8192
 
 // Legacy prefixes for backwards compatibility
 const LEGACY_ACCESS_TOKEN_PREFIX = 'mcp_'
@@ -32,6 +37,161 @@ export type OAuthValidationResult =
       status: number
     }
 
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function isStringArray(value: unknown): value is Array<string> {
+  return Array.isArray(value) && value.every((item) => typeof item === 'string')
+}
+
+function normalizeRedirectUri(uri: string): string | null {
+  try {
+    return new URL(uri).toString()
+  } catch {
+    return null
+  }
+}
+
+function bytesToBase64Url(bytes: Uint8Array) {
+  let binary = ''
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte)
+  }
+
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
+}
+
+function stringToBase64Url(value: string) {
+  return bytesToBase64Url(new TextEncoder().encode(value))
+}
+
+function base64UrlToString(value: string): string | null {
+  try {
+    const padded = value
+      .replace(/-/g, '+')
+      .replace(/_/g, '/')
+      .padEnd(Math.ceil(value.length / 4) * 4, '=')
+    const binary = atob(padded)
+    const bytes = new Uint8Array(binary.length)
+    for (let index = 0; index < binary.length; index++) {
+      bytes[index] = binary.charCodeAt(index)
+    }
+    return new TextDecoder().decode(bytes)
+  } catch {
+    return null
+  }
+}
+
+function getOAuthClientSigningSecret() {
+  const secret = envFunctions.SESSION_SECRET
+  if (!secret && process.env.NODE_ENV === 'production') {
+    throw new Error('SESSION_SECRET is required for OAuth client registration')
+  }
+
+  return secret ?? 'development-oauth-client-registration-secret'
+}
+
+async function signOAuthClientPayload(payload: string) {
+  const key = await crypto.subtle.importKey(
+    'raw',
+    new TextEncoder().encode(getOAuthClientSigningSecret()),
+    { name: 'HMAC', hash: 'SHA-256' },
+    false,
+    ['sign'],
+  )
+  const signature = await crypto.subtle.sign(
+    'HMAC',
+    key,
+    new TextEncoder().encode(payload),
+  )
+  return bytesToBase64Url(new Uint8Array(signature))
+}
+
+function parseRegisteredClientPayload(
+  value: unknown,
+): { clientName: string; redirectUris: Array<string> } | null {
+  if (!isRecord(value)) return null
+
+  const clientName = value.clientName
+  const redirectUris = value.redirectUris
+  if (typeof clientName !== 'string' || !isStringArray(redirectUris)) {
+    return null
+  }
+
+  if (
+    clientName.length > 100 ||
+    redirectUris.length === 0 ||
+    redirectUris.length > 10 ||
+    redirectUris.join('').length > 4096 ||
+    redirectUris.some((uri) => uri.length > 2048 || !validateRedirectUri(uri))
+  ) {
+    return null
+  }
+
+  return { clientName, redirectUris }
+}
+
+export async function createRegisteredClientId(params: {
+  clientName: string
+  redirectUris: Array<string>
+}) {
+  const payload = JSON.stringify({
+    clientName: params.clientName,
+    redirectUris: params.redirectUris
+      .map(normalizeRedirectUri)
+      .filter((uri) => uri !== null),
+  })
+  const encodedPayload = stringToBase64Url(payload)
+  const signature = await signOAuthClientPayload(encodedPayload)
+
+  return `${REGISTERED_CLIENT_PREFIX}${encodedPayload}.${signature}`
+}
+
+export async function validateOAuthClientRedirectUri(
+  clientId: string,
+  redirectUri: string,
+) {
+  if (!clientId.startsWith(REGISTERED_CLIENT_PREFIX)) {
+    return false
+  }
+
+  const body = clientId.slice(REGISTERED_CLIENT_PREFIX.length)
+  const [encodedPayload, signature] = body.split('.')
+  if (
+    !encodedPayload ||
+    !signature ||
+    encodedPayload.length > MAX_REGISTERED_CLIENT_PAYLOAD_LENGTH
+  ) {
+    return false
+  }
+
+  const expectedSignature = await signOAuthClientPayload(encodedPayload)
+  if (expectedSignature !== signature) {
+    return false
+  }
+
+  const payloadText = base64UrlToString(encodedPayload)
+  if (!payloadText) {
+    return false
+  }
+
+  let payload: unknown
+  try {
+    payload = JSON.parse(payloadText)
+  } catch {
+    return false
+  }
+
+  const metadata = parseRegisteredClientPayload(payload)
+  const normalizedRedirectUri = normalizeRedirectUri(redirectUri)
+  return (
+    !!metadata &&
+    !!normalizedRedirectUri &&
+    metadata.redirectUris.includes(normalizedRedirectUri)
+  )
+}
+
 /**
  * Generate a secure random token with prefix
  */
@@ -47,13 +207,7 @@ export function generateToken(prefix: string): string {
 /**
  * Hash a token using SHA-256
  */
-export async function hashToken(token: string): Promise<string> {
-  const encoder = new TextEncoder()
-  const data = encoder.encode(token)
-  const hashBuffer = await crypto.subtle.digest('SHA-256', data)
-  const hashArray = Array.from(new Uint8Array(hashBuffer))
-  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
-}
+export const hashToken = sha256Hex
 
 /**
  * Validate redirect URI - must be localhost or HTTPS
@@ -61,6 +215,9 @@ export async function hashToken(token: string): Promise<string> {
 export function validateRedirectUri(uri: string): boolean {
   try {
     const url = new URL(uri)
+    if (url.username || url.password) {
+      return false
+    }
 
     // Allow localhost (any port)
     if (
@@ -68,7 +225,7 @@ export function validateRedirectUri(uri: string): boolean {
       url.hostname === '127.0.0.1' ||
       url.hostname === '[::1]'
     ) {
-      return true
+      return url.protocol === 'http:' || url.protocol === 'https:'
     }
 
     // Allow HTTPS URLs
@@ -135,6 +292,12 @@ export async function createAuthorizationCode(params: {
   codeChallengeMethod?: string
   scope?: string
 }): Promise<string> {
+  if (
+    !(await validateOAuthClientRedirectUri(params.clientId, params.redirectUri))
+  ) {
+    throw new Error('Client is not registered for this redirect URI')
+  }
+
   const code = generateToken('')
   const codeHash = await hashToken(code)
   const expiresAt = new Date(Date.now() + AUTH_CODE_TTL_MS)
@@ -172,12 +335,12 @@ export async function exchangeAuthorizationCode(params: {
 > {
   const codeHash = await hashToken(params.code)
 
-  // Find and validate auth code
+  // Atomically consume the authorization code before validation. Any exchange
+  // attempt makes the code single-use, even when the verifier is wrong.
   const authCodes = await db
-    .select()
-    .from(oauthAuthorizationCodes)
+    .delete(oauthAuthorizationCodes)
     .where(eq(oauthAuthorizationCodes.codeHash, codeHash))
-    .limit(1)
+    .returning()
 
   const authCode = authCodes[0]
 
@@ -187,9 +350,6 @@ export async function exchangeAuthorizationCode(params: {
 
   // Check expiration
   if (authCode.expiresAt < new Date()) {
-    await db
-      .delete(oauthAuthorizationCodes)
-      .where(eq(oauthAuthorizationCodes.id, authCode.id))
     return { success: false, error: 'invalid_grant' }
   }
 
@@ -207,11 +367,6 @@ export async function exchangeAuthorizationCode(params: {
     return { success: false, error: 'invalid_grant' }
   }
 
-  // Delete auth code (one-time use)
-  await db
-    .delete(oauthAuthorizationCodes)
-    .where(eq(oauthAuthorizationCodes.id, authCode.id))
-
   // Generate tokens (using new prefixes)
   const accessToken = generateToken(ACCESS_TOKEN_PREFIX)
   const refreshToken = generateToken(REFRESH_TOKEN_PREFIX)
@@ -332,6 +487,7 @@ export async function validateOAuthToken(
       userId: oauthAccessTokens.userId,
       clientId: oauthAccessTokens.clientId,
       expiresAt: oauthAccessTokens.expiresAt,
+      lastUsedAt: oauthAccessTokens.lastUsedAt,
     })
     .from(oauthAccessTokens)
     .where(eq(oauthAccessTokens.tokenHash, tokenHash))
@@ -356,11 +512,15 @@ export async function validateOAuthToken(
     }
   }
 
-  // Update last used (fire and forget)
-  db.update(oauthAccessTokens)
-    .set({ lastUsedAt: new Date() })
-    .where(eq(oauthAccessTokens.id, accessToken.id))
-    .catch(() => {})
+  if (
+    !accessToken.lastUsedAt ||
+    Date.now() - accessToken.lastUsedAt.getTime() > LAST_USED_WRITE_INTERVAL_MS
+  ) {
+    db.update(oauthAccessTokens)
+      .set({ lastUsedAt: new Date() })
+      .where(eq(oauthAccessTokens.id, accessToken.id))
+      .catch(() => {})
+  }
 
   return {
     success: true,
diff --git a/src/auth/repositories.server.ts b/src/auth/repositories.server.ts
index 2d19938b6..225065bf2 100644
--- a/src/auth/repositories.server.ts
+++ b/src/auth/repositories.server.ts
@@ -11,7 +11,7 @@
 
 import { db } from '~/db/client'
 import { users, oauthAccounts, roles, roleAssignments } from '~/db/schema'
-import { eq, and, inArray } from 'drizzle-orm'
+import { eq, and, inArray, sql } from 'drizzle-orm'
 import type {
   Capability,
   DbUser,
@@ -19,7 +19,9 @@ import type {
   IOAuthAccountRepository,
   IUserRepository,
   OAuthProvider,
+  SignupSource,
 } from './types'
+import { encryptToken, decryptStoredToken } from '~/utils/crypto.server'
 
 // ============================================================================
 // User Repository Implementation
@@ -53,6 +55,7 @@ export class DrizzleUserRepository implements IUserRepository {
     oauthImage?: string
     displayUsername?: string
     capabilities?: Capability[]
+    signupSources?: SignupSource[]
   }): Promise<DbUser> {
     const [newUser] = await db
       .insert(users)
@@ -63,6 +66,7 @@ export class DrizzleUserRepository implements IUserRepository {
         oauthImage: data.oauthImage,
         displayUsername: data.displayUsername,
         capabilities: data.capabilities || [],
+        signupSources: data.signupSources ?? [],
       })
       .returning()
 
@@ -84,7 +88,9 @@ export class DrizzleUserRepository implements IUserRepository {
       capabilities: Capability[]
       adsDisabled: boolean
       interestedInHidingAds: boolean
+      lastUsedFramework: string
       sessionVersion: number
+      signupSources: SignupSource[]
       updatedAt: Date
     }>,
   ): Promise<void> {
@@ -95,17 +101,13 @@ export class DrizzleUserRepository implements IUserRepository {
   }
 
   async incrementSessionVersion(userId: string): Promise<void> {
-    // Get current version first
-    const user = await this.findById(userId)
-    if (user) {
-      await db
-        .update(users)
-        .set({
-          sessionVersion: user.sessionVersion + 1,
-          updatedAt: new Date(),
-        })
-        .where(eq(users.id, userId))
-    }
+    await db
+      .update(users)
+      .set({
+        sessionVersion: sql`${users.sessionVersion} + 1`,
+        updatedAt: new Date(),
+      })
+      .where(eq(users.id, userId))
   }
 
   private mapToDbUser(user: typeof users.$inferSelect): DbUser {
@@ -120,6 +122,7 @@ export class DrizzleUserRepository implements IUserRepository {
       adsDisabled: user.adsDisabled,
       interestedInHidingAds: user.interestedInHidingAds,
       lastUsedFramework: user.lastUsedFramework,
+      signupSources: user.signupSources,
       sessionVersion: user.sessionVersion,
       createdAt: user.createdAt,
       updatedAt: user.updatedAt,
@@ -135,7 +138,11 @@ export class DrizzleOAuthAccountRepository implements IOAuthAccountRepository {
   async findByProviderAndAccountId(
     provider: OAuthProvider,
     providerAccountId: string,
-  ): Promise<{ userId: string } | null> {
+  ): Promise<{
+    userId: string
+    accessToken: string | null
+    tokenScope: string | null
+  } | null> {
     const account = await db.query.oauthAccounts.findFirst({
       where: and(
         eq(oauthAccounts.provider, provider),
@@ -145,7 +152,30 @@ export class DrizzleOAuthAccountRepository implements IOAuthAccountRepository {
 
     if (!account) return null
 
-    return { userId: account.userId }
+    return {
+      userId: account.userId,
+      accessToken: decryptStoredToken(account.accessToken),
+      tokenScope: account.tokenScope,
+    }
+  }
+
+  async findByUserId(
+    userId: string,
+    provider: OAuthProvider,
+  ): Promise<{ accessToken: string | null; tokenScope: string | null } | null> {
+    const account = await db.query.oauthAccounts.findFirst({
+      where: and(
+        eq(oauthAccounts.userId, userId),
+        eq(oauthAccounts.provider, provider),
+      ),
+    })
+
+    if (!account) return null
+
+    return {
+      accessToken: decryptStoredToken(account.accessToken),
+      tokenScope: account.tokenScope,
+    }
   }
 
   async create(data: {
@@ -153,14 +183,40 @@ export class DrizzleOAuthAccountRepository implements IOAuthAccountRepository {
     provider: OAuthProvider
     providerAccountId: string
     email: string
+    accessToken?: string
+    tokenScope?: string
   }): Promise<void> {
     await db.insert(oauthAccounts).values({
       userId: data.userId,
       provider: data.provider,
       providerAccountId: data.providerAccountId,
       email: data.email,
+      accessToken: data.accessToken
+        ? encryptToken(data.accessToken)
+        : undefined,
+      tokenScope: data.tokenScope,
     })
   }
+
+  async updateToken(
+    userId: string,
+    provider: OAuthProvider,
+    accessToken: string,
+    tokenScope: string,
+  ): Promise<void> {
+    await db
+      .update(oauthAccounts)
+      .set({
+        accessToken: encryptToken(accessToken),
+        tokenScope,
+      })
+      .where(
+        and(
+          eq(oauthAccounts.userId, userId),
+          eq(oauthAccounts.provider, provider),
+        ),
+      )
+  }
 }
 
 // ============================================================================
diff --git a/src/auth/session.server.ts b/src/auth/session.server.ts
index 782b234be..2e6104b00 100644
--- a/src/auth/session.server.ts
+++ b/src/auth/session.server.ts
@@ -12,75 +12,13 @@ import type { SessionCookieData, ISessionService } from './types'
 // ============================================================================
 
 function base64UrlEncode(str: string): string {
-  if (typeof btoa !== 'undefined') {
-    return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
-  }
-
-  const encoder = new TextEncoder()
-  const bytes = encoder.encode(str)
-  const base64 = bytesToBase64(bytes)
-  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
+  return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
 }
 
 function base64UrlDecode(str: string): string {
   const normalized = str.replace(/-/g, '+').replace(/_/g, '/')
-
-  if (typeof atob !== 'undefined') {
-    return atob(normalized)
-  }
-
-  const bytes = base64ToBytes(normalized)
-  const decoder = new TextDecoder()
-  return decoder.decode(bytes)
-}
-
-function bytesToBase64(bytes: Uint8Array): string {
-  const chars =
-    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
-  let result = ''
-  let i = 0
-
-  while (i < bytes.length) {
-    const a = bytes[i++]
-    const b = i < bytes.length ? bytes[i++] : 0
-    const c = i < bytes.length ? bytes[i++] : 0
-
-    const bitmap = (a << 16) | (b << 8) | c
-
-    result += chars.charAt((bitmap >> 18) & 63)
-    result += chars.charAt((bitmap >> 12) & 63)
-    result += i - 2 < bytes.length ? chars.charAt((bitmap >> 6) & 63) : '='
-    result += i - 1 < bytes.length ? chars.charAt(bitmap & 63) : '='
-  }
-
-  return result
-}
-
-function base64ToBytes(base64: string): Uint8Array {
-  const chars =
-    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
-  const lookup = new Map<string, number>()
-  for (let i = 0; i < chars.length; i++) {
-    lookup.set(chars[i], i)
-  }
-
-  base64 = base64.replace(/=+$/, '')
-  const bytes: number[] = []
-
-  for (let i = 0; i < base64.length; i += 4) {
-    const enc1 = lookup.get(base64[i]) ?? 0
-    const enc2 = lookup.get(base64[i + 1]) ?? 0
-    const enc3 = lookup.get(base64[i + 2]) ?? 0
-    const enc4 = lookup.get(base64[i + 3]) ?? 0
-
-    const bitmap = (enc1 << 18) | (enc2 << 12) | (enc3 << 6) | enc4
-
-    bytes.push((bitmap >> 16) & 255)
-    if (enc3 !== 64) bytes.push((bitmap >> 8) & 255)
-    if (enc4 !== 64) bytes.push(bitmap & 255)
-  }
-
-  return new Uint8Array(bytes)
+  const padded = normalized.padEnd(Math.ceil(normalized.length / 4) * 4, '=')
+  return atob(padded)
 }
 
 // ============================================================================
@@ -279,6 +217,30 @@ export function isOAuthPopupMode(request: Request): boolean {
   return cookies.split(';').some((c) => c.trim().startsWith('oauth_popup=1'))
 }
 
+export function createOAuthReturnToCookie(
+  returnTo: string,
+  isProduction: boolean,
+): string {
+  return `oauth_return_to=${encodeURIComponent(returnTo)}; HttpOnly; Path=/; Max-Age=${10 * 60}; SameSite=Lax${isProduction ? '; Secure' : ''}`
+}
+
+export function clearOAuthReturnToCookie(isProduction: boolean): string {
+  return `oauth_return_to=; HttpOnly; Path=/; Max-Age=0; SameSite=Lax${isProduction ? '; Secure' : ''}`
+}
+
+export function getOAuthReturnTo(request: Request): string | null {
+  const cookies = request.headers.get('cookie') || ''
+  const returnToCookie = cookies
+    .split(';')
+    .find((c) => c.trim().startsWith('oauth_return_to='))
+
+  if (!returnToCookie) {
+    return null
+  }
+
+  return decodeURIComponent(returnToCookie.split('=').slice(1).join('=').trim())
+}
+
 // ============================================================================
 // Session Constants
 // ============================================================================
diff --git a/src/auth/types.ts b/src/auth/types.ts
index 5a30cee43..e4af8e21a 100644
--- a/src/auth/types.ts
+++ b/src/auth/types.ts
@@ -7,10 +7,10 @@
  */
 
 // Re-export shared types from db/types.ts (single source of truth)
-export type { Capability, OAuthProvider } from '~/db/types'
+export type { Capability, OAuthProvider, SignupSource } from '~/db/types'
 export { CAPABILITIES as VALID_CAPABILITIES } from '~/db/types'
 
-import type { Capability, OAuthProvider } from '~/db/types'
+import type { Capability, OAuthProvider, SignupSource } from '~/db/types'
 
 export interface OAuthProfile {
   id: string
@@ -52,6 +52,7 @@ export interface AuthUser {
   adsDisabled: boolean | null
   interestedInHidingAds: boolean | null
   lastUsedFramework: string | null
+  signupSources: SignupSource[]
 }
 
 /**
@@ -68,6 +69,7 @@ export interface DbUser {
   adsDisabled: boolean | null
   interestedInHidingAds: boolean | null
   lastUsedFramework: string | null
+  signupSources: SignupSource[]
   sessionVersion: number
   createdAt: Date
   updatedAt: Date
@@ -91,6 +93,7 @@ export interface IUserRepository {
     oauthImage?: string
     displayUsername?: string
     capabilities?: Capability[]
+    signupSources?: SignupSource[]
   }): Promise<DbUser>
   update(
     userId: string,
@@ -104,6 +107,7 @@ export interface IUserRepository {
       adsDisabled: boolean
       interestedInHidingAds: boolean
       lastUsedFramework: string
+      signupSources: SignupSource[]
       sessionVersion: number
       updatedAt: Date
     }>,
@@ -118,13 +122,29 @@ export interface IOAuthAccountRepository {
   findByProviderAndAccountId(
     provider: OAuthProvider,
     providerAccountId: string,
-  ): Promise<{ userId: string } | null>
+  ): Promise<{
+    userId: string
+    accessToken: string | null
+    tokenScope: string | null
+  } | null>
+  findByUserId(
+    userId: string,
+    provider: OAuthProvider,
+  ): Promise<{ accessToken: string | null; tokenScope: string | null } | null>
   create(data: {
     userId: string
     provider: OAuthProvider
     providerAccountId: string
     email: string
+    accessToken?: string
+    tokenScope?: string
   }): Promise<void>
+  updateToken(
+    userId: string,
+    provider: OAuthProvider,
+    accessToken: string,
+    tokenScope: string,
+  ): Promise<void>
 }
 
 /**
@@ -169,6 +189,7 @@ export interface IOAuthService {
   upsertOAuthAccount(
     provider: OAuthProvider,
     profile: OAuthProfile,
+    tokenInfo?: { accessToken: string; scope: string },
   ): Promise<OAuthResult>
 }
 
diff --git a/src/blog/ag-grid-partnership.md b/src/blog/ag-grid-partnership.md
index 56547e1ec..8dcf3e1d6 100644
--- a/src/blog/ag-grid-partnership.md
+++ b/src/blog/ag-grid-partnership.md
@@ -1,6 +1,8 @@
 ---
 title: TanStack Table + Ag-Grid Partnership
 published: 2022-06-17
+excerpt: AG Grid is now the official TanStack Table open-source partner. Together we'll educate the ecosystem about the differences between the two libraries and when to choose which.
+library: table
 authors:
   - Tanner Linsley
   - Niall Crosby
diff --git a/src/blog/ag-ui-compliance.md b/src/blog/ag-ui-compliance.md
new file mode 100644
index 000000000..26f4f2e2a
--- /dev/null
+++ b/src/blog/ag-ui-compliance.md
@@ -0,0 +1,156 @@
+---
+title: 'TanStack AI now fully speaks AG-UI'
+published: 2026-05-17
+excerpt: 'Server-to-client AG-UI events already worked. TanStack AI now completes the round trip with client-to-server AG-UI compliance. Fully backward compatible.'
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![TanStack AI now fully speaks AG-UI](/blog-assets/ag-ui-compliance/header.png)
+
+Half the protocol was already there.
+
+For a while now, endpoints built with `@tanstack/ai` have emitted [AG-UI](https://ag-ui.com) events on the wire going out. The streaming side of the conversation (`RUN_STARTED`, tool-call events, run finish, errors) was already a compliant AG-UI event stream. The piece that was still proprietary was the _other_ direction: the request body going from client to server. The TanStack client POSTed `{ messages, data }`, not AG-UI's `RunAgentInput`.
+
+That last half is what this release fixes. **TanStack AI is now fully AG-UI compliant in both directions.** Server-to-client events were AG-UI before. Client-to-server requests are AG-UI now. The round trip is done.
+
+The same `@tanstack/ai-client` can hit any AG-UI server. Any AG-UI client can hit an endpoint built with `@tanstack/ai`, wherever you host it (TanStack Start, Next.js, Hono, raw Node, Bun, anywhere). And nothing about your existing code breaks.
+
+## Why this matters
+
+AG-UI is an open protocol for agent-to-frontend communication. It defines a single wire format, `RunAgentInput`, that carries the conversation, the tools, the thread and run IDs, and arbitrary forwarded properties. Servers that speak AG-UI can be addressed by any compliant client. Clients that emit AG-UI can talk to any compliant server.
+
+With server-to-client AG-UI already in place, a `@tanstack/ai` endpoint could _stream_ to a compliant client. But the client-to-server side was a one-way mirror: only the TanStack client could _send_ requests that endpoint understood. The asymmetry meant true cross-vendor interop was still gated on rewriting your request layer.
+
+Closing that gap is what this release does. The whole ecosystem (CopilotKit, CrewAI, LangGraph adapters, and now TanStack AI) gets to share the same plumbing in both directions.
+
+## What changed on the wire
+
+Before this release, `@tanstack/ai-client` POSTed:
+
+```json
+{
+  "messages": [...],
+  "data": { ... }
+}
+```
+
+After:
+
+```json
+{
+  "threadId": "thread-7f2a",
+  "runId": "run-a91",
+  "state": {},
+  "messages": [...],
+  "tools": [...],
+  "context": [],
+  "forwardedProps": { ... },
+  "data": { ... }
+}
+```
+
+The new envelope is the full AG-UI `RunAgentInput`. The old `data` field is still emitted as a mirror of `forwardedProps` so legacy servers reading `body.data.X` keep working unchanged. `threadId` persists per session, `runId` is fresh per send, and `tools` carries the client's `clientTools` declarations so the server can dispatch tool calls without a static registry.
+
+Server-to-client events haven't changed shape, because they were already AG-UI compliant. They just now carry the matching `threadId` and `runId` you sent in.
+
+## What changed in the API
+
+Three new things to know about, all opt-in.
+
+### `chat()` accepts `threadId`, `runId`, `parentRunId`
+
+These were always part of the AG-UI event semantics on the way out. They're now first-class options on `chat()` and flow through every provider adapter into `RUN_STARTED` events for observability and run correlation.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai/adapters'
+
+const stream = chat({
+  adapter: openaiText('gpt-4o'),
+  threadId: 'thread-7f2a',
+  runId: 'run-a91',
+  messages: [...],
+})
+```
+
+If you don't pass them, the runtime auto-generates a stable `threadId` per request and a fresh `runId` per call. Existing code that didn't know about them keeps working.
+
+### `chatParamsFromRequest` for the server
+
+A one-import helper that reads `req.json()`, validates the body against the AG-UI `RunAgentInputSchema`, and gives you a clean params object. On invalid input it throws a `400 Response` that frameworks like TanStack Start, SolidStart, Remix, and React Router 7 return to the client automatically.
+
+```ts
+import {
+  chat,
+  chatParamsFromRequest,
+  toServerSentEventsResponse,
+} from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai/adapters'
+
+export async function POST(req: Request) {
+  const params = await chatParamsFromRequest(req)
+  const stream = chat({
+    adapter: openaiText('gpt-4o'),
+    messages: params.messages,
+    threadId: params.threadId,
+    tools: serverTools,
+  })
+  return toServerSentEventsResponse(stream)
+}
+```
+
+That's the whole server. No body shape to remember, no manual validation, and a typed `params.forwardedProps` if you want client-driven options like provider, model, or temperature.
+
+### `forwardedProps` replaces `body` on the client
+
+`useChat({ body: {...} })` still works, but `body` is now `@deprecated`. The canonical name is `forwardedProps`, which is what the new wire format calls the field. A jscodeshift codemod ships in the repo to flip every site:
+
+```bash
+npx jscodeshift \
+  --parser=tsx \
+  -t https://raw.githubusercontent.com/TanStack/ai/main/codemods/ag-ui-compliance/transform.ts \
+  "src/**/*.{ts,tsx}"
+```
+
+It's import-source gated, so files that don't import from `@tanstack/ai*` are left alone.
+
+## Nothing breaks
+
+This is the part most "wire format change" releases get wrong. The upgrade ships three compatibility bridges so old code keeps running:
+
+| Surface                | Legacy (still works)                     | Canonical                 |
+| ---------------------- | ---------------------------------------- | ------------------------- |
+| Client option          | `body: { ... }`                          | `forwardedProps: { ... }` |
+| Server wire field      | `body.data.X` (mirror of forwardedProps) | `body.forwardedProps.X`   |
+| Server `chat()` option | `conversationId`                         | `threadId`                |
+
+An existing endpoint reading `body.data.provider` keeps reading `body.data.provider` because the client emits both `data` and `forwardedProps` with the same content. A `chat({ conversationId })` call keeps working because `conversationId` is now a deprecated alias of `threadId`. Mix old and new freely. The bridges will be removed in the next major release, so migrate at your convenience.
+
+## Bidirectional interop in practice
+
+With both halves of the protocol compliant, the boundaries between AI SDKs get a lot blurrier.
+
+**A pure AG-UI client (no TanStack code) hitting a `@tanstack/ai` endpoint** works end-to-end. Tool messages pass through as `ModelMessage` entries with `role: 'tool'`. AG-UI `reasoning` and `activity` messages with no TanStack equivalent are dropped at the boundary. `developer` messages collapse to `system` role. The outbound event stream was already AG-UI, so the foreign client renders it natively.
+
+**A TanStack client hitting a foreign AG-UI server** works for the common cases. Single-turn user messages mirror to AG-UI's `content` field. Server-emitted events stream and render. Multi-turn history with tool results from prior turns survives because the client sends AG-UI fan-out duplicates alongside the TanStack anchor messages.
+
+The practical upshot: if you've been waiting to try a different inference provider, a different framework's agent runtime, or a different orchestrator, the wire is no longer the thing standing in your way. Both directions speak the same language.
+
+## What's not in this release
+
+A few things were intentionally left out:
+
+- **Reasoning replay to LLM providers.** TanStack still drops `ThinkingPart` at the `UIMessage` → `ModelMessage` boundary. Providers like Anthropic that require thinking blocks to be replayed for extended thinking continuation are a separate track.
+- **AG-UI `state` and `context` fields.** Surfaced on the params object but not yet wired into `chat()`. They're available for your endpoint to inspect or forward.
+- **PHP and Python server packages.** No `chatParamsFromRequest` parity yet. Those examples temporarily lag on the old shape until the matching helpers ship.
+
+## Try it
+
+Upgrade `@tanstack/ai` and `@tanstack/ai-client` to the latest. If you're using one of the framework wrappers (`@tanstack/ai-react`, `-vue`, `-svelte`, `-solid`, `-preact`), bump those too so the client wire stays in lockstep.
+
+- [Migration guide](https://tanstack.com/ai/migration/ag-ui-compliance) walks through the three deprecation bridges and the codemod
+- [Star the repo](https://github.com/TanStack/ai) if this saved you an adapter
+
+The AI stack is supposed to be the part you compose, not the part that locks you in. AG-UI is how that starts being true across vendors. With this release, TanStack AI is the first SDK to ship full bidirectional client-to-server _and_ server-to-client compliance against the AG-UI 0.0.52 spec. The next agent runtime you adopt should not be the one that finally forces you to rewrite your wire layer.
diff --git a/src/blog/announcing-tanstack-form-v1.md b/src/blog/announcing-tanstack-form-v1.md
index 9e89d163d..d26fcd08a 100644
--- a/src/blog/announcing-tanstack-form-v1.md
+++ b/src/blog/announcing-tanstack-form-v1.md
@@ -1,6 +1,8 @@
 ---
 title: Announcing TanStack Form v1
 published: 2025-03-03
+excerpt: The first stable version of TanStack Form is live and ready for production. We support five frameworks at launch — React, Vue, Angular, Solid, and Lit.
+library: form
 authors:
   - Corbin Crutchley
 ---
diff --git a/src/blog/announcing-tanstack-query-v4.md b/src/blog/announcing-tanstack-query-v4.md
index ea584c310..2094f1ad3 100644
--- a/src/blog/announcing-tanstack-query-v4.md
+++ b/src/blog/announcing-tanstack-query-v4.md
@@ -1,6 +1,8 @@
 ---
 title: Announcing TanStack Query v4
 published: 2022-07-14
+excerpt: The next version of TanStack Query is here. The rebranding and monorepo restructuring finally allows us to bring the joy of react-query to other frameworks like Vue, Svelte, and Solid.
+library: query
 authors:
   - Dominik Dorfmeister
 ---
diff --git a/src/blog/announcing-tanstack-query-v5.md b/src/blog/announcing-tanstack-query-v5.md
index 49203db93..b061bdea3 100644
--- a/src/blog/announcing-tanstack-query-v5.md
+++ b/src/blog/announcing-tanstack-query-v5.md
@@ -1,6 +1,8 @@
 ---
 title: Announcing TanStack Query v5
 published: 2023-10-17
+excerpt: After 91 alpha releases, 35 betas, and 16 release candidates, TanStack Query v5.0.0 is finally here — smaller, better, and more intuitive than ever.
+library: query
 authors:
   - Dominik Dorfmeister
 ---
diff --git a/src/blog/announcing-tanstack-start-v1.md b/src/blog/announcing-tanstack-start-v1.md
index a9adb7d9c..eedc69561 100644
--- a/src/blog/announcing-tanstack-start-v1.md
+++ b/src/blog/announcing-tanstack-start-v1.md
@@ -1,6 +1,8 @@
 ---
 title: TanStack Start v1 Release Candidate
 published: 2025-09-23
+excerpt: TanStack Start has officially reached a v1.0 Release Candidate. This is the build we expect to ship as 1.0, pending your final feedback, docs polish, and a few last-mile fixes.
+library: start
 authors:
   - Tanner Linsley
 ---
diff --git a/src/blog/composite-components.md b/src/blog/composite-components.md
deleted file mode 100644
index 697d313a7..000000000
--- a/src/blog/composite-components.md
+++ /dev/null
@@ -1,419 +0,0 @@
----
-title: 'Composite Components: Server Components with Client-Led Composition'
-published: 2026-01-15
-draft: true
-authors:
-  - Manuel Schiller
-  - Tanner Linsley
----
-
-![Composite Components](/blog-assets/composite-components/header.jpg)
-
-React Server Components are a genuine leap for React. They reduce bundle size, stream UI as it resolves, and move work off the client.
-
-But the way RSCs have been implemented so far comes with a tradeoff: **the server owns the component tree**.  
-Your client code opts into interactivity with `'use client'`. **Composition flows one direction**: server decides, client receives. The React model you know (props, context, client-led composition) gets fragmented across environments.
-
-What if it didn't have to?
-
-What if RSCs were actually components? **Fetchable. Cacheable. Composable by the client.** Primitives that flow through your router, your cache, your data layer. No new directives beyond React's standard `'use client'`. A wire format that's standard Flight.
-
-That's what we built in **TanStack Start**.
-
-> **Status:** RSC support ships as an experimental feature in TanStack Start RC and will remain experimental into early v1. The API design is stable but expect refinements. See the [Start documentation](https://tanstack.com/start) for setup instructions.
-
----
-
-## Why RSCs Matter
-
-Before diving into the model, it's worth understanding when server components shine:
-
-- **Heavy dependencies stay on the server.** Markdown parsers, syntax highlighters, date formatting libraries can add hundreds of KB to your bundle. With RSCs, that code runs on the server and only the rendered output ships to the client.
-
-- **Colocated data fetching.** TanStack Router already eliminates waterfalls by parallelizing route loaders. RSCs offer a different ergonomic: awaiting data directly in the component that renders it, which can be convenient for static or slow-changing content.
-
-- **Sensitive logic stays secure.** API keys, database queries, business logic: none of it reaches the client bundle.
-
-- **Streaming for perceived performance.** Instead of waiting for all data before showing anything, RSCs stream UI progressively. Users see content immediately while slower parts load in the background.
-
-RSCs aren't about replacing client interactivity. They're about choosing where work happens. **The question is: who controls that choice?**
-
----
-
-## The One-Way Problem
-
-Existing RSC implementations support interleaving server and client components. You can pass `children` from a client component into a server component. Next.js documents this pattern explicitly. That works.
-
-But the server still produces the final RSC tree on each navigation. The client receives a server-owned tree wholesale. It can't independently request server-rendered subtrees and compose them based on client state. It can't cache a server component and reuse it across navigations. It can't fetch two server components and interleave them in a client-defined layout.
-
-**Next supports slotting, but the server still produces the final tree per request. What if RSC output were first-class data that the client could request, cache, and compose?**
-
----
-
-## Composite Components
-
-**TanStack Start treats RSC output as a composable UI value.**
-
-A **Composite Component** is a server-produced React component that the client can fetch, cache, stream, and then **assemble into its own UI tree**. It’s not “the server owns the tree and the client hydrates what it gets”. It’s the server shipping UI _pieces_ that remain composable at the client.
-
-Composite Components give you two levels of composition:
-
-### 1) Intra-component slotting (composition inside one component)
-
-A Composite Component can render real server UI, _and_ expose **slots** using plain React patterns:
-
-- `children`
-- render props (like `renderActions`)
-
-These aren’t framework-specific APIs. They’re just props.
-
-The important nuance: client-provided UI crosses the boundary as **opaque slot placeholders**. The server can position those placeholders (because it owns the frame), but it can’t inspect, clone, or transform client subtrees. That’s what keeps the model predictable.
-
-#### Server
-
-```tsx
-const getPost = createServerFn().handler(async ({ data }) => {
-  const post = await db.posts.get(data.postId)
-
-  return createServerComponent(
-    (props: {
-      children?: React.ReactNode
-      renderActions?: (data: {
-        postId: string
-        authorId: string
-      }) => React.ReactNode
-    }) => (
-      <article>
-        <h1>{post.title}</h1>
-        <p>{post.body}</p>
-
-        {/* Server renders this directly, it's interactive via 'use client' */}
-        <Link to="/posts/$postId" params={{ postId: post.nextPostId }}>
-          Next Post
-        </Link>
-
-        {/* Server requests client UI at a specific point */}
-        <footer>
-          {props.renderActions?.({ postId: post.id, authorId: post.authorId })}
-        </footer>
-
-        {/* Client fills this slot */}
-        {props.children}
-      </article>
-    ),
-  )
-})
-```
-
-#### Client
-
-```tsx
-function PostPage({ postId }) {
-  const { data: Post } = useQuery({
-    queryKey: ['post', postId],
-    queryFn: () => getPost({ data: { postId } }),
-  })
-
-  if (!Post) return <PostSkeleton />
-
-  return (
-    <Post
-      renderActions={({ postId, authorId }) => (
-        // Full client interactivity: hooks, state, context, all of it
-        <PostActions postId={postId} authorId={authorId} />
-      )}
-    >
-      <Comments postId={postId} />
-    </Post>
-  )
-}
-```
-
-Here the server renders the `<Link>` directly, but leaves **join points** for the client:
-
-- a render prop slot for `<PostActions>` (with server-provided arguments)
-- a `children` slot for `<Comments>`
-
-### 2) Inter-component composition (composition across many components)
-
-Once a Composite Component is just “data you can render”, the client can treat it like a building block:
-
-- interleave multiple Composite Components in a brand-new tree
-- wrap them in client providers/layout
-- nest one Composite Component inside another by passing it through slots
-- reorder/swap them based on client state
-
-Same component. Same mental model. No new boundaries for every deferral.
-
----
-
-## RSCs as a Primitive
-
-Here's the shift: in TanStack Start, **server components aren't a paradigm**. They're a _primitive_, a serialization format that flows through your existing architecture.
-
-When `createServerFn` returns a server component, that component is a **stream**. This means you don't have to wait for the entire component to finish rendering before sending HTML to the client. Parts of the UI can render immediately while slower async work (database queries, API calls) resolves in the background. The client sees a Suspense fallback, then the final content streams in when ready. No full page reload, no blocking.
-
-This works for SSR (streaming HTML during initial page load) and for client-side fetches (streaming RSC payloads during navigation or data refetches).
-
-The examples in this post await data before creating the component for simplicity. In practice, you can await inside the component body with nested `<Suspense>` boundaries to stream UI progressively as each piece resolves.
-
-Streams are universal. They work with:
-
-- **TanStack Router** → Load server components in route loaders, stream them during navigation
-- **TanStack Query** → Cache server components, refetch in the background, deduplicate requests
-- **TanStack DB** (coming soon) → Sync server component state, offline support, optimistic updates
-
-### In a route loader
-
-TanStack Router caches loader data automatically. The cache key is the route path plus its params—when params change, the loader refetches:
-
-```tsx
-export const Route = createFileRoute('/posts/$postId')({
-  loader: async ({ params }) => ({
-    Post: await getPost({ data: { postId: params.postId } }),
-  }),
-  component: PostPage,
-})
-
-function PostPage() {
-  const { Post } = Route.useLoaderData()
-
-  return (
-    <Post renderActions={({ postId }) => <PostActions postId={postId} />}>
-      <Comments />
-    </Post>
-  )
-}
-```
-
-Navigate from `/posts/abc` to `/posts/xyz` and the loader runs again because `$postId` changed. Navigate back to `/posts/abc` and Router serves the cached server component instantly (within the default `gcTime`).
-
-For dependencies beyond route params, use `loaderDeps` to include search params or other reactive values in the cache key:
-
-```tsx
-export const Route = createFileRoute('/posts/$postId')({
-  loaderDeps: ({ search }) => ({
-    tab: search.tab,
-    sort: search.sort,
-  }),
-  loader: async ({ params, deps }) => ({
-    Post: await getPost({
-      data: {
-        postId: params.postId,
-        tab: deps.tab,
-        sort: deps.sort,
-      },
-    }),
-  }),
-  component: PostPage,
-})
-```
-
-Now the cache key includes both the route param and search params. Change `?tab=comments` to `?tab=related` and the server component refetches. Change back and you get a cache hit.
-
-**Router handles this automatically.** No manual cache keys, no query configuration. The server component is fetched when dependencies change and cached when they don't.
-
-### With Query caching
-
-Because server components are just data, they integrate naturally with TanStack Query's caching model. The query key determines cache identity—include route params and the cache automatically invalidates when they change:
-
-```tsx
-function PostPage() {
-  const { postId } = Route.useParams()
-
-  const { data: Post } = useQuery({
-    queryKey: ['post', postId],
-    queryFn: () => getPost({ data: { postId } }),
-    staleTime: 5 * 60 * 1000,
-  })
-
-  if (!Post) return <PostSkeleton />
-
-  return (
-    <Post renderActions={({ postId }) => <PostActions postId={postId} />}>
-      <Comments postId={postId} />
-    </Post>
-  )
-}
-```
-
-**What happens when the user navigates:**
-
-- `/posts/abc` → fetches and caches the server component for post `abc`
-- `/posts/xyz` → cache miss on `['post', 'xyz']`, fetches post `xyz`
-- `/posts/abc` → cache hit, instant render from cache (within staleTime)
-
-The server component for post `abc` is still in the cache. Navigate back and it renders immediately—no network request, no loading state. The entire rendered UI tree is preserved.
-
-This works because **the RSC payload is the cache value**. Query doesn't know or care that it's caching a server component. It's just bytes that happen to decode into a React element tree.
-
-For static content that rarely changes, you can cache aggressively:
-
-```tsx
-const { data: Layout } = useQuery({
-  queryKey: ['layout'],
-  queryFn: () => getLayout(),
-  staleTime: Infinity, // Cache forever, refetch manually
-})
-```
-
-**The server component is just data.** Fetch it, cache it, compose it. **No special APIs. No framework-specific caching layers.** Just streams flowing through tools you already know.
-
----
-
-## How It Works
-
-When your server component accesses props, it's accessing a **proxy**.  
-Every property access and function call is tracked:
-
-- `props.children` → serialized as a slot placeholder
-- `props.renderActions({ postId, authorId })` → serialized with the arguments attached
-
-You can destructure props normally. `({ children, renderActions })` works just as well as `props.children`. The proxy handles both patterns.
-
-**A few rules apply:** Slot placeholders are opaque on the server. You can't `Object.keys()` the props proxy and expect to enumerate what was passed (you'll get nothing useful). You can't `JSON.stringify()` a render prop. Calls to render props are recorded in invocation order and replayed on the client in the same order. The [documentation](/start/latest/docs/server-components) covers the full contract.
-
-**Over the wire, it's a React element stream** with embedded placeholders. On the client:
-
-1. The stream decodes into a React element tree
-2. Placeholders match the props you passed when rendering
-3. Render functions replay with the serialized arguments
-
-```
-Server                              Client
-───────                             ──────
-props.renderActions({               renderActions prop is called
-  postId: "abc",             →      with { postId: "abc", authorId: "xyz" }
-  authorId: "xyz"
-})                                  Your function runs client-side
-                                    with full hooks/state/context
-```
-
-**Type safety flows through in TypeScript when client and server share types.** The function signature on the server determines what arguments your client function receives:
-
-```tsx
-const getPost = createServerFn().handler(async ({ data }) => {
-  const post = await db.posts.get(data.postId)
-
-  return createServerComponent(
-    (props: {
-      renderActions?: (data: {
-        postId: string
-        authorId: string
-      }) => React.ReactNode
-    }) => {
-      // TypeScript knows exactly what props.renderActions receives
-      props.renderActions?.({ postId: post.id, authorId: post.authorId })
-      // ...
-    },
-  )
-})
-```
-
----
-
-## The Full Spectrum
-
-With RSCs as primitives, TanStack Start covers every frontend use case:
-
-- **Fully Interactive**  
-  No server components at all. Client-first, SPA-style. RSCs are an optimization you add when helpful, not a paradigm you build around.
-
-- **Hybrid**  
-  Server components for static shells, data-heavy regions, or SEO-critical content. Slots for interactivity. Mix freely within the same component.
-
-- **Fully Static**  
-  Pre-render everything at build time. No hydration, no JavaScript. Ship HTML.
-
-**One framework. One mental model. The entire spectrum.**  
-You don't choose "interactive framework" or "static framework" or "RSC framework."  
-You choose patterns **per-route, per-component, per-use-case**. The architecture supports all of it.
-
----
-
-## Current Status: Experimental
-
-RSC support ships as an experimental feature in TanStack Start RC and will remain experimental into early v1. A few things to know:
-
-**React's Flight serializer**: This release uses React's native RSC Flight protocol for serialization. That means TanStack Start's usual serialization features aren't available within server components for now. Standard JavaScript primitives, Dates, and React elements serialize fine. Custom serialization plugins and extended types will come in a future release as we unify the serialization layers.
-
-**API surface**: The `createServerComponent` API and slot patterns shown here are stable in design but may see refinements based on feedback. We're shipping early to learn from real usage.
-
-**Performance**: Streaming works today. We're continuing to optimize the ReplayableStream buffering, frame protocol efficiency, and cache integration.
-
-If you hit rough edges, [open an issue](https://github.com/tanstack/router/issues) or drop into [Discord](https://tlinz.com/discord). This is the time to shape the API.
-
----
-
-## FAQ
-
-### How does this compare to Next.js App Router?
-
-Next.js App Router is server-first: your component tree lives on the server by default, and you opt into client interactivity with `'use client'` boundaries.
-
-TanStack Start is **isomorphic-first**: your tree lives wherever makes sense, and RSCs are a primitive you pull in when helpful. The key difference is **client-led composition**. Composite Components expose slots so the client can assemble the final tree, not just accept a server-owned one.
-
-Both approaches support RSCs. They differ in who owns the tree by default and how composition flows.
-
-### Can I use this with my existing Next.js/Remix app?
-
-Not directly. TanStack Start is its own framework built on TanStack Router. But if you're using TanStack Query or TanStack Router already, the mental model transfers. Server components become another data source that Query can cache and Router can load.
-
-### Do I have to use RSCs?
-
-No. RSCs are entirely opt-in. You can build fully client-side SPAs with TanStack Start, use traditional SSR without server components, or go fully static. RSCs are one tool in the spectrum, not a requirement.
-
-### What about React 19 / `use server` / Server Actions?
-
-TanStack Start's RSC implementation builds on React's Flight protocol and works with React 19. Server Actions are a separate primitive. `createServerFn` serves a similar purpose but integrates with TanStack's middleware, validation, and caching model. We're watching the Server Actions API and will align where it makes sense.
-
-### Can I define my component outside of `createServerComponent`?
-
-Yes. `createServerComponent` initiates the RSC stream generation, but your component can be defined separately and invoked inside:
-
-```tsx
-function PostArticle({ post, children, renderActions }) {
-  return (
-    <article>
-      <h1>{post.title}</h1>
-      {renderActions?.({ postId: post.id })}
-      {children}
-    </article>
-  )
-}
-
-const getPost = createServerFn().handler(async ({ data }) => {
-  const post = await db.posts.get(data.postId)
-  return createServerComponent((props) => (
-    <PostArticle post={post} {...props} />
-  ))
-})
-```
-
-### Can I return raw JSX instead of using `createServerComponent`?
-
-Not currently. Server functions that return UI must wrap it in `createServerComponent`. This is what enables the streaming, slot handling, and client rehydration. Plain JSX returned from a server function won't have the RSC serialization behavior.
-
-### Do `cloneElement` and React Context work with server component children?
-
-**`cloneElement`**: This won't work as you might expect. When children are passed from client to server, they're serialized as slot placeholders, not actual React elements the server can manipulate. The server can't inspect or clone client-provided children.
-
-**React Context**: Context providers rendered by the server component _will_ wrap client children. If your server component renders `<ThemeProvider value="dark">{children}</ThemeProvider>`, the client children can consume that context. However, the context must be defined in a way that works across the server/client boundary (typically with `'use client'` on the provider component).
-
-### Any security considerations?
-
-TanStack Start's RSC model has a fundamentally different security surface than other RSC implementations. **We don't send flight data to the server, nor do we parse it there.** Flight payloads flow one direction: from server to client. The server produces RSC streams; the client consumes them.
-
-Additionally, **TanStack Start does not support React Server Functions** (the `'use server'` directive that creates server-callable endpoints from client code). Recent React security advisories around RSC and server function serialization specifically target vulnerabilities in parsing untrusted flight data on the server and in server function argument handling—neither of which apply to TanStack Start's architecture.
-
-That said, treat your server functions like any API surface: authenticate requests, validate inputs, and keep React patched.
-
----
-
-## Get Started
-
-TanStack Start's RSC model is available now as an experimental feature.
-
-- [Documentation](https://tanstack.com/start)
-- [GitHub](https://github.com/tanstack/router)
-- [Discord](https://tlinz.com/discord)
diff --git a/src/blog/debug-logging-for-tanstack-ai.md b/src/blog/debug-logging-for-tanstack-ai.md
new file mode 100644
index 000000000..a2b77690d
--- /dev/null
+++ b/src/blog/debug-logging-for-tanstack-ai.md
@@ -0,0 +1,151 @@
+---
+title: 'One Flag, Every Chunk: Debug Logging Lands in TanStack AI'
+published: 2026-04-22
+excerpt: "Your AI pipeline is a black box: a missing chunk, a middleware that doesn't fire, a tool call with mystery args. TanStack AI now ships pluggable, category-toggleable debug logging across every activity and adapter. Flip one flag and the pipeline prints itself."
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![Debug Logging for TanStack AI](/blog-assets/debug-logging-for-tanstack-ai/header.png)
+
+You kick off a `chat()` call. A chunk goes missing. A middleware you wrote last week doesn't seem to fire. A tool gets called with arguments you can't explain. Your stream finishes, the UI looks wrong, and you have no idea which layer lied to you.
+
+Up until now your options were limited. You could wrap the SDK in a tracing platform, spend a day wiring OpenTelemetry, or sprinkle `console.log` into your own code and hope the problem lives where you can see it. Neither helps when the bug is **inside** the pipeline: a raw provider chunk that got dropped, a middleware that mutated config, a tool call the agent loop reissued.
+
+TanStack AI now has a built-in answer. **Flip one flag and the entire pipeline prints itself.**
+
+## Turn it on
+
+Add `debug: true` to any activity call:
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai/adapters'
+
+const stream = chat({
+  adapter: openaiText(),
+  model: 'gpt-4o',
+  messages: [{ role: 'user', content: 'Hello' }],
+  debug: true,
+})
+```
+
+Every internal event now prints to the console, prefixed with an emoji-tagged category so you can scan dense streaming logs without squinting:
+
+```
+📤 [tanstack-ai:request] 📤 activity=chat provider=openai model=gpt-4o messages=1 tools=0 stream=true
+🔁 [tanstack-ai:agentLoop] 🔁 run started
+📥 [tanstack-ai:provider] 📥 provider=openai type=response.output_text.delta
+📨 [tanstack-ai:output] 📨 type=TEXT_MESSAGE_CONTENT
+🧩 [tanstack-ai:middleware] 🧩 hook=onOutput
+🔧 [tanstack-ai:tools] 🔧 tool=getTodos phase=before
+```
+
+That is the whole setup. No exporters, no sidecar, no dashboard. Just what your pipeline is actually doing, right now, in the terminal you already have open.
+
+## Eight categories, not a log level
+
+Most logging libraries give you `debug`, `info`, `warn`, `error` and ask you to pick one. That mapping is wrong for an AI pipeline. **The noise isn't a severity, it's a source.** When you're chasing a tool bug you don't want provider chunks. When you're chasing a provider bug you don't want middleware chatter.
+
+So `debug` accepts a config object where every category toggles independently:
+
+```typescript
+chat({
+  adapter: openaiText(),
+  model: 'gpt-4o',
+  messages,
+  debug: { middleware: false }, // everything except middleware
+})
+```
+
+Omitted categories default to `true`, so the common case is "turn off the one thing that's drowning you." Every category maps to a real pipeline surface:
+
+| Category     | What it logs                                                   |
+| ------------ | -------------------------------------------------------------- |
+| `request`    | Outgoing call to a provider (model, message count, tool count) |
+| `provider`   | Every raw chunk or frame from the provider SDK                 |
+| `output`     | Every chunk or result yielded to the caller                    |
+| `middleware` | Inputs and outputs around every middleware hook                |
+| `tools`      | Before and after tool call execution                           |
+| `agentLoop`  | Agent-loop iterations and phase transitions                    |
+| `config`     | Config transforms returned by middleware `onConfig` hooks      |
+| `errors`     | Every caught error anywhere in the pipeline                    |
+
+Chat-only categories like `tools` and `agentLoop` just don't fire for `summarize()` or `generateImage()`, because they don't exist in those pipelines. You don't have to think about it.
+
+## Pipe it anywhere
+
+`console.log` is the right default for local work. It is the wrong default for production, where you want structured JSON going to a log shipper, not ANSI colors going to stdout.
+
+Pass your own `Logger` and the entire category system routes through it:
+
+```typescript
+import type { Logger } from '@tanstack/ai'
+import pino from 'pino'
+
+const pinoLogger = pino()
+const logger: Logger = {
+  debug: (msg, meta) => pinoLogger.debug(meta, msg),
+  info: (msg, meta) => pinoLogger.info(meta, msg),
+  warn: (msg, meta) => pinoLogger.warn(meta, msg),
+  error: (msg, meta) => pinoLogger.error(meta, msg),
+}
+
+chat({
+  adapter: openaiText(),
+  model: 'gpt-4o',
+  messages,
+  debug: { logger },
+})
+```
+
+The `Logger` interface is four methods. Anything that writes a line of text fits. Pino, winston, bunyan, a `fetch` to a logging service, a no-op that forwards to your existing observability layer. All valid.
+
+### Your logger can't break the pipeline
+
+This is the detail we lost sleep over. If your custom logger throws (a cyclic-meta `JSON.stringify`, a transport that rejects synchronously, a typo in a bound `this`), the exception should **not** bubble up and mask the real error that triggered the log call in the first place.
+
+Internally, every user-logger invocation is wrapped in a try/catch. A broken logger silently drops the log line. Your actual pipeline error still reaches you through thrown exceptions and `RUN_ERROR` chunks, exactly where you were looking for it.
+
+If you need to know when your own logger is failing, guard inside your implementation. The SDK will not guess how loud you want logger failures to be.
+
+## Every activity, every provider
+
+Debug logging isn't a chat-only feature. Every activity in TanStack AI accepts the same option:
+
+```typescript
+summarize({ adapter, text, debug: true })
+generateImage({ adapter, prompt: 'a cat', debug: { logger } })
+generateSpeech({ adapter, text, debug: { request: true } })
+generateTranscription({ adapter, audio, debug: true })
+generateVideo({ adapter, prompt, debug: true })
+```
+
+Realtime session adapters (`openaiRealtime`, `elevenlabsRealtime`) take it too.
+
+On the provider side, **every adapter in every provider package is wired through the structured logger**: OpenAI, Anthropic, Gemini, Grok, Groq, Ollama, OpenRouter, fal, and ElevenLabs. 25 adapters total. Zero ad-hoc `console.*` calls remain in adapter source code. Whether you're debugging an Anthropic text stream or an ElevenLabs realtime session, the output shape is the same.
+
+## The small decisions that add up
+
+A few calls that look cosmetic but matter once you're staring at a thousand-line log.
+
+**Emoji prefixes on both sides of the tag.** `📨 [tanstack-ai:output] 📨 ...` reads faster than raw brackets in a dense stream, and your eye can hop categories without parsing text.
+
+**`console.dir` with `depth: null`.** Node's default console formatting stops at depth 2, so nested provider chunks render as `[Object]` and you lose the thing you were trying to see. Debug logs surface the entire structure. In browsers, the raw object still lands in DevTools for interactive inspection.
+
+**Errors log unconditionally.** You don't have to remember to turn them on. If you really want total silence, `debug: false` or `debug: { errors: false }` does it. Otherwise errors flow through even when you haven't asked for any other category.
+
+**Internal devtools middleware is muted.** If you have the TanStack AI devtools middleware installed, its own hooks don't flood the `middleware` category. You see the middleware **you** wrote, not the plumbing.
+
+Each of these is a small call on its own. Together they're the difference between "debug output I actually read" and "debug output I pipe to `/dev/null` within ten seconds."
+
+## Getting it
+
+Debug logging ships in the latest `@tanstack/ai`. It's additive, backward-compatible, and available on every activity today. No config file, no exporter, no platform.
+
+Upgrade, add `debug: true` to the call you can't explain, and read the output.
+
+For the full reference, see the [Debug Logging guide](https://tanstack.com/ai/latest/docs/advanced/debug-logging). And if you want an even faster turnaround: TanStack AI ships an agent skill under `packages/typescript/ai/skills/` so your LLM-powered dev tools can discover the flag on their own.
+
+One flag. Every chunk. Your streams are no longer a black box.
diff --git a/src/blog/directives-and-the-platform-boundary.md b/src/blog/directives-and-the-platform-boundary.md
index 0170be024..6d69b8bb2 100644
--- a/src/blog/directives-and-the-platform-boundary.md
+++ b/src/blog/directives-and-the-platform-boundary.md
@@ -1,6 +1,7 @@
 ---
 title: Directives and the Platform Boundary
 published: 2025-10-24
+excerpt: Frameworks are inventing top-level directives that look like language features but aren't standardized. A constructive look at portability and keeping a clear boundary between platform and library spaces.
 authors:
   - Tanner Linsley
 description: A constructive look at framework directives, portability, and keeping a clear boundary between platform and library spaces.
diff --git a/src/blog/from-docs-to-agents.md b/src/blog/from-docs-to-agents.md
new file mode 100644
index 000000000..95ea15b6f
--- /dev/null
+++ b/src/blog/from-docs-to-agents.md
@@ -0,0 +1,154 @@
+---
+title: 'Introducing TanStack Intent: Ship Agent Skills with your npm Packages'
+published: 2026-03-04
+excerpt: Your docs are good. Your types are solid. Your agent still gets it wrong. TanStack Intent lets you ship agent skills alongside your npm packages so AI tools actually know how to use your library.
+library: intent
+authors:
+  - Sarah Gerrard
+  - Kyle Mathews
+---
+
+![From Docs to Agents](/blog-assets/from-docs-to-agents/header.png)
+
+Your docs are good. Your types are solid. Your agent still gets it wrong.
+
+Not because it's dumb — because nothing connects what you know about your tool to what agents know. Docs target humans who browse. Types check individual API calls but can't encode intent. Training data snapshots the ecosystem as it _was_, mixing versions with no way to tell which applies. The gap isn't content. It's lifecycle.
+
+## The copy-paste era
+
+The ecosystem already moves toward agent-readable knowledge. Cursor rules, CLAUDE.md files, skills directories — everyone agrees agents need more than docs and types. But delivery hasn't caught up.
+
+Today, if you want your agent to understand TanStack Router, you hunt for a community-maintained rules file on GitHub. Maybe it's in `awesome-cursorrules`. Maybe someone linked it in Discord. You copy it into `.cursorrules` or `CLAUDE.md`. Then you repeat for TanStack Query. And TanStack Table. Each from a different place, author, and point in time.
+
+Multiply that across every tool in your stack. You're managing copy-pasted knowledge files with no versioning, no update path, and no staleness signal. Did TanStack Router ship a breaking change last week? Your rules file doesn't know. Is that Query skill written for v4 or v5? Hope you checked.
+
+Finding skills is manual. Installing them is manual. Keeping them current is manual. When they drift — and they always drift — you discover it only when your agent produces subtly wrong code.
+
+Library maintainers already have the knowledge agents need — in docs, migration guides, "common mistakes" GitHub discussions, Discord answers. But none of it reaches agents through a channel the maintainer controls. The knowledge exists. The delivery mechanism doesn't.
+
+![The status quo: scattered rules files from different repos, authors, and versions, all manually copy-pasted into one project](/blog-assets/from-docs-to-agents/diagram-status-quo.svg)
+
+## Introducing `@tanstack/intent`
+
+`@tanstack/intent` is a CLI for library maintainers to generate, validate, and ship [Agent Skills](https://agentskills.io) alongside their npm packages. The [Agent Skills spec](https://agentskills.io) is an open standard already adopted by VS Code, GitHub Copilot, OpenAI Codex, Cursor, Claude Code, Goose, Amp, and others.
+
+**Skills ship inside your npm package.** They encode how your tool works, which patterns fit which goals, and what to avoid. Skills travel with the tool via `npm update` — not the model's training cutoff, not community-maintained rules files, not prompt snippets in READMEs. Versioned knowledge the maintainer owns, updated when the package updates.
+
+For popular, stable patterns — standard React hooks, Express middleware, Tailwind classes — agents do well. Training data is saturated with correct usage. But at the frontier — new tools, major version transitions, novel compositions across packages — agents hallucinate, confuse versions, and miss critical implications. The frontier is bigger than it sounds: every new library, every breaking change, every composition across tools that nobody has written about. And once a breaking change ships, models don't "catch up." They develop a permanent split-brain — training data contains _both_ versions forever with no way to disambiguate. Skills bypass this. They're pinned to the installed version.
+
+![Model training data mixes versions permanently vs. skills pinned to your installed version](/blog-assets/from-docs-to-agents/diagram-split-brain.svg)
+
+A skill is a short, versioned document that tells agents how to use a specific capability of your library — correct patterns, common mistakes, and when to apply them. Each skill declares which docs it was derived from:
+
+```
+---
+name: tanstack-router-search-params
+description: Type-safe search param patterns for TanStack Router. Use when working with search params, query params, or validateSearch.
+metadata:
+  sources:
+    - docs/framework/react/guide/search-params.md
+---
+```
+
+Inside the skill, you write what the agent needs to get right — including what NOT to do:
+
+```markdown
+## Search Params
+
+Use `validateSearch` to define type-safe search params on a route:
+
+const Route = createFileRoute('/products')({
+validateSearch: z.object({
+page: z.number().default(1),
+filter: z.string().optional(),
+}),
+})
+
+## Common Mistakes
+
+❌ Don't access search params via `window.location` — use
+`useSearch()` which is fully type-safe.
+
+❌ Don't parse search params manually. `validateSearch` handles
+parsing, validation, and defaults.
+```
+
+That `metadata.sources` field is what keeps skills current. When those docs change, the CLI flags the skill for review. One source of truth, one derived artifact that stays in sync.
+
+## Generating and validating skills
+
+You don't author skills from scratch. `@tanstack/intent scaffold` generates them from your library:
+
+```bash
+npx @tanstack/intent scaffold
+```
+
+The scaffold produces drafts you review, refine, and commit. Once committed, `@tanstack/intent validate` checks that they're well-formed:
+
+```bash
+npx @tanstack/intent validate
+```
+
+`@tanstack/intent setup-github-actions` copies CI workflow templates into your repo so validation runs on every push:
+
+```bash
+npx @tanstack/intent setup-github-actions
+```
+
+## The dependency graph does the discovery
+
+That's the maintainer side. For developers, the experience is simpler.
+
+When a developer runs `@tanstack/intent install`, the CLI discovers every intent-enabled package and wires skills into the agent configuration — CLAUDE.md, .cursorrules, whatever the tooling expects.
+
+```bash
+npx @tanstack/intent install
+```
+
+![intent install discovers intent-enabled packages in node_modules and wires skills into agent config](/blog-assets/from-docs-to-agents/diagram-discovery.svg)
+
+No per-library setup. No hunting for rules files. Install the package, run `@tanstack/intent install`, and the agent understands the tool. Update the package, and skills update too. Knowledge travels the same channel as code.
+
+`@tanstack/intent list` shows what's available:
+
+```bash
+npx @tanstack/intent list        # See what's intent-enabled in your deps
+npx @tanstack/intent list --json # Machine-readable output
+```
+
+For library maintainers, `@tanstack/intent meta` surfaces meta-skills — higher-level guidance on authoring and maintaining skills:
+
+```bash
+npx @tanstack/intent meta
+```
+
+## Keeping it current
+
+The real risk with any derived artifact is staleness. You update your docs, ship a new API, and skills silently drift. `@tanstack/intent` treats staleness as a first-class problem.
+
+`@tanstack/intent stale` checks for version drift, flagging skills that have fallen behind their sources:
+
+```bash
+npx @tanstack/intent stale           # Human-readable report
+npx @tanstack/intent stale --json    # Machine-readable for CI
+```
+
+Run it in CI and you get a failing check when sources change. Skills become part of your release checklist — not something you remember to update, but something your pipeline catches.
+
+![The intent lifecycle: docs to skills to npm to agent config, with staleness checks and feedback loops](/blog-assets/from-docs-to-agents/diagram-lifecycle.svg)
+
+The feedback loop runs both directions. `@tanstack/intent feedback` lets users submit structured reports when a skill produces wrong output — which skill, which version, what broke.
+
+```bash
+npx @tanstack/intent feedback
+```
+
+That context flows back to you as a maintainer, and the fix ships to everyone on the next `npm update`. Every support interaction produces an artifact that prevents the same class of problem for all future users — not just the one who reported it. This is what makes skills compound: each fix makes the skill better, and each `npm update` distributes the improvement.
+
+Skills that keep needing the same workaround signal something deeper. Sometimes the fix is a better skill. Sometimes it's a better API — the tool should absorb the lesson directly. A skill that persists forever means the tool has a design gap. A skill that disappears because the tool fixed the underlying problem is the system working exactly as intended.
+
+## Try it out
+
+We've started rolling out skills in [TanStack DB](https://github.com/TanStack/db/pull/1330) with other TanStack libraries following. If you maintain a library, tell your coding agent to run `npx @tanstack/intent scaffold` and let us know how it goes. We want feedback on the authoring workflow, the skill format, and what's missing. File issues on [GitHub](https://github.com/TanStack/intent) or find us on [Discord](https://tlinz.com/discord).
+
+The lifecycle: write your docs, generate skills, ship them with your package, validate and keep them current, learn from usage, improve your tool. Repeat.
diff --git a/src/blog/generation-hooks.md b/src/blog/generation-hooks.md
new file mode 100644
index 000000000..f93b80d46
--- /dev/null
+++ b/src/blog/generation-hooks.md
@@ -0,0 +1,265 @@
+---
+title: 'Generation Hooks: Type-Safe AI Beyond Chat'
+published: 2026-03-11
+excerpt: Chat is just the beginning. Your AI app needs image generation, text-to-speech, transcription, and more. TanStack AI now ships generation hooks — a unified set of React hooks for every non-chat AI activity.
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![Generation Hooks](/blog-assets/generation-hooks/header.png)
+
+Chat is just the beginning. Your AI-powered app probably needs to generate images, convert text to speech, transcribe audio, summarize documents, or create videos. Until now, wiring up each of these activities meant writing custom fetch logic, managing loading states, handling errors, and juggling streaming protocols for every single one.
+
+Not anymore.
+
+## One Pattern to Rule Them All
+
+TanStack AI now ships **generation hooks**: a unified set of React hooks (with Solid, Vue, and Svelte support) that give you first-class primitives for every non-chat AI activity:
+
+- `useGenerateImage()` for image generation
+- `useGenerateSpeech()` for text-to-speech
+- `useTranscription()` for audio transcription
+- `useSummarize()` for text summarization
+- `useGenerateVideo()` for video generation
+
+Every hook follows the exact same API surface. Learn one, and you know them all:
+
+```tsx
+const { generate, result, isLoading, error, stop, reset } = useGenerateImage({
+  connection: fetchServerSentEvents('/api/generate/image'),
+})
+
+// That's it. Call generate() and your UI reacts.
+generate({ prompt: 'A neon-lit cyberpunk cityscape at sunset' })
+```
+
+The `result` is fully typed. The `error` is handled. Loading state is tracked. Abort is built in. No boilerplate, no `useEffect` spaghetti, no manual state management.
+
+## Three Ways to Connect
+
+Every generation hook supports three transport modes, so you can pick the one that fits your architecture:
+
+### 1. Streaming (Connection Adapter)
+
+The classic SSE approach. Your server wraps the generation in `toServerSentEventsResponse()`, and the client consumes it through `fetchServerSentEvents()`:
+
+```tsx
+// Client
+const { generate, result, isLoading } = useGenerateImage({
+  connection: fetchServerSentEvents('/api/generate/image'),
+})
+```
+
+```typescript
+// Server (API route)
+const stream = generateImage({
+  adapter: openaiImage('gpt-image-1'),
+  prompt: data.prompt,
+  stream: true,
+})
+return toServerSentEventsResponse(stream)
+```
+
+This is the most flexible option. It works with any server framework, any hosting provider, any deployment model.
+
+### 2. Direct (Fetcher)
+
+Sometimes you don't need streaming. You just want to call a function and get a result. The fetcher mode does exactly that:
+
+```tsx
+const { generate, result, isLoading } = useGenerateImage({
+  fetcher: (input) => generateImageFn({ data: input }),
+})
+```
+
+The server function runs, returns JSON, and the hook updates your UI. Simple, synchronous from the user's perspective, and fully type-safe.
+
+### 3. Server Function Streaming (NEW)
+
+This is the one we're most excited about. It combines the **type safety of server functions** with the **real-time feedback of streaming**, and it works beautifully with TanStack Start.
+
+Here is the problem we solved: the `connection` approach uses a generic `Record<string, any>` for its data payload. Great for flexibility, but your input loses all type information. The `fetcher` approach is fully typed, but it waits for the entire result before updating the UI.
+
+Server Function Streaming gives you both. Your fetcher returns a `Response` object (an SSE stream), and the client automatically detects it and parses the stream in real-time:
+
+```tsx
+// Client - looks identical to the direct fetcher
+const { generate, result, isLoading } = useGenerateImage({
+  fetcher: (input) => generateImageStreamFn({ data: input }),
+})
+```
+
+```typescript
+// Server - just add stream: true and wrap with toServerSentEventsResponse
+export const generateImageStreamFn = createServerFn({ method: 'POST' })
+  .validator(
+    z.object({
+      prompt: z.string(),
+      numberOfImages: z.number().optional(),
+      size: z.string().optional(),
+    }),
+  )
+  .handler(({ data }) =>
+    toServerSentEventsResponse(
+      generateImage({
+        adapter: openaiImage('gpt-image-1'),
+        prompt: data.prompt,
+        stream: true,
+      }),
+    ),
+  )
+```
+
+From the client's perspective, the API is identical to a direct fetcher call. But behind the scenes, TanStack AI detects the `Response` object, reads the SSE stream, and feeds chunks through the same event pipeline used by the connection adapter. Progress events fire in real-time. Errors are reported as they happen. And your `input` parameter stays fully typed throughout.
+
+The detection is simple and zero-config: if your fetcher returns a `Response`, it's treated as an SSE stream. If it returns anything else, it's treated as a direct result. No flags, no configuration, no separate hook.
+
+## How It Works Under the Hood
+
+When a fetcher returns a `Response`, the `GenerationClient` runs a simple check:
+
+```typescript
+const result = await this.fetcher(input, { signal })
+
+if (result instanceof Response) {
+  // Parse as SSE stream - same pipeline as ConnectionAdapter
+  await this.processStream(parseSSEResponse(result, signal))
+} else {
+  // Use as direct result
+  this.setResult(result)
+}
+```
+
+The `parseSSEResponse` utility reads the response body as a stream of newline-delimited SSE events, parses each `data:` line into a `StreamChunk`, and yields them into the same `processStream` method that the ConnectionAdapter uses. Same event types, same state transitions, same callbacks.
+
+This means every feature that works with streaming connections also works with server function streaming: progress reporting, chunk callbacks, abort signals, error handling. All of it.
+
+## Result Transforms
+
+Sometimes the raw result from the server isn't what you want to store in state. Every generation hook accepts an `onResult` callback that can transform the result before it's stored:
+
+```tsx
+const { result } = useGenerateSpeech({
+  fetcher: (input) => generateSpeechStreamFn({ data: input }),
+  onResult: (raw) => {
+    // Convert base64 audio to a blob URL for playback
+    const bytes = Uint8Array.from(atob(raw.audio), (c) => c.charCodeAt(0))
+    const blob = new Blob([bytes], { type: raw.contentType ?? 'audio/mpeg' })
+    return {
+      audioUrl: URL.createObjectURL(blob),
+      format: raw.format,
+      duration: raw.duration,
+    }
+  },
+})
+
+// result is typed as { audioUrl: string; format?: string; duration?: number } | null
+```
+
+TypeScript infers the output type from your transform function. No explicit generics needed.
+
+## Video Generation: A First-Class Citizen
+
+Video generation is a different beast. Unlike image or speech generation, video providers like OpenAI's Sora use a jobs-based architecture: you submit a prompt, receive a job ID, then poll for status until the video is ready. This can take minutes.
+
+`useGenerateVideo()` handles all of this transparently:
+
+```tsx
+const { generate, result, jobId, videoStatus, isLoading } = useGenerateVideo({
+  fetcher: (input) => generateVideoStreamFn({ data: input }),
+})
+
+// In your JSX:
+{
+  videoStatus && (
+    <div>
+      <p>Status: {videoStatus.status}</p>
+      {videoStatus.progress != null && (
+        <div
+          className="progress-bar"
+          style={{ width: `${videoStatus.progress}%` }}
+        />
+      )}
+    </div>
+  )
+}
+```
+
+The hook exposes `jobId` and `videoStatus` as reactive state that updates in real-time as the server streams polling updates. Your users see "pending", "processing", progress percentages, and finally the completed video URL, all without you writing a single polling loop.
+
+## Every Activity, Same API
+
+Here's what makes this design special: the API is identical across all five generation types. Once you've built an image generation page, building a speech generation page is a matter of swapping the hook name and adjusting the input:
+
+| Hook                  | Input                                | Result                                          |
+| --------------------- | ------------------------------------ | ----------------------------------------------- |
+| `useGenerateImage()`  | `{ prompt, numberOfImages?, size? }` | `{ images: [{ url, b64Json, revisedPrompt }] }` |
+| `useGenerateSpeech()` | `{ text, voice?, format? }`          | `{ audio, contentType, format, duration }`      |
+| `useTranscription()`  | `{ audio, language? }`               | `{ text, segments, language, duration }`        |
+| `useSummarize()`      | `{ text, style?, maxLength? }`       | `{ summary }`                                   |
+| `useGenerateVideo()`  | `{ prompt, size?, duration? }`       | `{ jobId, status, url }`                        |
+
+Same `generate()`. Same `result`. Same `isLoading`. Same `error`. Same `stop()` and `reset()`. The consistency is intentional: we want AI features to be as easy to add to your app as a form submission.
+
+## Getting Started
+
+Install the packages:
+
+```bash
+pnpm add @tanstack/ai @tanstack/ai-react @tanstack/ai-client @tanstack/ai-openai
+```
+
+Create a server function that streams:
+
+```typescript
+import { createServerFn } from '@tanstack/react-start'
+import { generateImage, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiImage } from '@tanstack/ai-openai'
+
+export const generateImageStreamFn = createServerFn({ method: 'POST' })
+  .validator(z.object({ prompt: z.string() }))
+  .handler(({ data }) => {
+    return toServerSentEventsResponse(
+      generateImage({
+        adapter: openaiImage('gpt-image-1'),
+        prompt: data.prompt,
+        stream: true,
+      }),
+    )
+  })
+```
+
+Use it in your component:
+
+```tsx
+import { useGenerateImage } from '@tanstack/ai-react'
+import { generateImageStreamFn } from '../lib/server-fns'
+
+function ImageGenerator() {
+  const { generate, result, isLoading, error } = useGenerateImage({
+    fetcher: (input) => generateImageStreamFn({ data: input }),
+  })
+
+  return (
+    <div>
+      <button onClick={() => generate({ prompt: 'A mountain at dawn' })}>
+        {isLoading ? 'Generating...' : 'Generate'}
+      </button>
+      {result?.images.map((img, i) => (
+        <img key={i} src={img.url} alt="Generated" />
+      ))}
+    </div>
+  )
+}
+```
+
+Three lines of hook setup. Type-safe input. Streaming progress. Error handling. Abort support. That's it.
+
+## What's Next
+
+Generation hooks are available now in `@tanstack/ai-client` and `@tanstack/ai-react`. Support for Solid, Vue, and Svelte is coming soon with the same API surface.
+
+We're also working on expanding the adapter ecosystem so you can use these hooks with providers beyond OpenAI. The generation functions are provider-agnostic by design, so swapping from OpenAI to Anthropic or a local model will be a single line change.
+
+Build something cool and let us know. We can't wait to see what you create.
diff --git a/src/blog/how-we-test-tanstack-ai-across-7-providers.md b/src/blog/how-we-test-tanstack-ai-across-7-providers.md
new file mode 100644
index 000000000..846b8e774
--- /dev/null
+++ b/src/blog/how-we-test-tanstack-ai-across-7-providers.md
@@ -0,0 +1,146 @@
+---
+title: 'How We Test TanStack AI Across 7 Providers on Every PR'
+published: 2026-04-13
+draft: false
+excerpt: "TanStack AI runs 147 deterministic E2E tests across 7 LLM providers in under 2 minutes. Here's the testing infrastructure that makes it possible."
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![E2E Testing - All Tests Passed](/blog-assets/how-we-test-tanstack-ai-across-7-providers/cover.png)
+
+LLM responses are non-deterministic. API calls cost money. And the thing that works perfectly with OpenAI might silently break with Anthropic.
+
+If you've ever built on an AI SDK, you know the feeling: you trust the library works because the README says it supports your provider. But does it? Has anyone actually verified that tool calling works the same way across OpenAI, Gemini, and Ollama? That streaming structured output doesn't break when you switch from Groq to Anthropic?
+
+We got tired of wondering. So we built an E2E testing infrastructure for TanStack AI that verifies every feature across every provider on every pull request. 137 tests. 7 providers. About 2 minutes. Zero API keys required.
+
+Here's how it works and why it matters for the long-term stability of the project.
+
+## The Problem with Testing AI Libraries
+
+Unit tests are great for business logic. They're terrible for verifying that your OpenAI adapter actually produces the same streaming behavior as your Gemini adapter.
+
+The typical approach for AI SDKs is to unit-test the adapter layer with mocked HTTP responses, maybe run a handful of integration tests against a real API in CI, and call it a day. This breaks down in three predictable ways:
+
+**Mocks lie.** When you mock at the HTTP level, you're testing your assumptions about the API, not the API itself. Provider response formats change. Streaming chunk boundaries differ. Edge cases in tool call serialization only surface with real payloads.
+
+**Real API tests are flaky and expensive.** Rate limits, network timeouts, non-deterministic responses, and per-token costs all conspire to make CI unreliable. Most teams end up skipping these tests or running them manually before releases.
+
+**Provider parity is assumed, never verified.** You ship a new feature, test it with OpenAI, and assume the other 6 providers work the same way. They usually do. Until they don't, and a user files a bug report.
+
+TanStack AI's previous smoke-test setup hit all three of these walls. Tests were fragmented across multiple directories, coverage was inconsistent, and there was no way to run the full matrix quickly or deterministically. We needed something better.
+
+## What We Built
+
+The new E2E infrastructure has three components:
+
+1. **A TanStack Start test app** that serves as the harness, with routes for every provider/feature combination
+2. **aimock** as a drop-in replacement for real LLM APIs, serving deterministic fixture responses
+3. **Playwright** driving the browser with per-test isolation
+
+The flow is straightforward:
+
+```mermaid
+graph LR
+    A[Playwright] --> B[TanStack Start App]
+    B --> C[Provider Adapter]
+    C --> D[aimock]
+    D --> E[Fixture JSON]
+```
+
+Playwright opens the test app, navigates to a route like `/openai/chat`, and interacts with the UI. The app's provider adapter thinks it's talking to OpenAI, but the `baseURL` points at aimock. aimock matches the request against a fixture file and returns a deterministic response.
+
+Every test gets a unique `X-Test-Id` header. This is what makes parallel execution work: aimock uses the header to route each test to its own fixture sequence, so 137 tests can run simultaneously without stepping on each other.
+
+## The Numbers
+
+137 tests cover 17 features across 7 providers. Here's the matrix:
+
+| Category        | Tests | Features                                                          |
+| --------------- | ----- | ----------------------------------------------------------------- |
+| Chat and text   | 28    | chat, one-shot-text, multi-turn, structured-output                |
+| Tool calling    | 38    | single, parallel, approval, text-tool-text, agentic-structured    |
+| Multimodal      | 10    | image input, structured multimodal                                |
+| Generation      | 20    | summarize, summarize-stream, image-gen, TTS, transcription        |
+| Reasoning       | 3     | OpenAI, Anthropic, Gemini thinking blocks                         |
+| Tools-test page | 29    | client tools, approvals, race conditions, server-client sequences |
+| Advanced        | 6     | abort, lazy tools, custom events, middleware, error handling      |
+| Middleware      | 3     | onChunk transform, onBeforeToolCall skip, passthrough             |
+
+**Providers:** OpenAI, Anthropic, Gemini, Ollama, Groq, Grok, OpenRouter.
+
+Not every provider supports every feature (Ollama doesn't do image generation, for example). The test matrix encodes this: each test checks whether the provider supports the feature and skips gracefully if not. When a provider adds support, you flip a flag in the support matrix and the tests start running automatically.
+
+The full suite completes in about 2 minutes with parallel execution.
+
+## Why This Matters Long-Term
+
+Testing infrastructure isn't exciting. But it's the difference between an SDK you can trust for years and one that breaks in subtle ways every few releases.
+
+**Regressions are caught before they merge.** Every PR runs the full E2E suite. If a change to the streaming parser breaks Anthropic's tool calling, CI goes red before it hits main. No user reports. No hotfix releases.
+
+**New providers slot into the matrix.** Adding a provider means implementing the adapter, adding it to the support matrix, and pointing it at aimock. The existing 17 feature tests run against it automatically. The infrastructure scales with the project.
+
+**Contributors get fast feedback.** A 2-minute test suite that runs without API keys means anyone can fork the repo, make a change, and verify it works across all providers. No secrets to configure, no tokens to burn, no flaky CI to retry.
+
+**The test suite is documentation.** Every fixture file is a concrete example of what TanStack AI expects from a provider. The `chat/basic.json` fixture shows exactly what a chat response looks like. The `tool-calling/single.json` fixture shows the full tool call and response sequence. When behavior is ambiguous, the fixtures are the source of truth.
+
+This is how you build compound stability. Each test guards against a specific regression. Over time, the suite accumulates into a safety net that gets stronger with every contribution.
+
+## How aimock Makes It Work
+
+[aimock](https://github.com/CopilotKit/aimock) is an open-source mock server built by the CopilotKit team. It serves deterministic LLM responses from JSON fixture files. Here's what a fixture looks like:
+
+```json
+{
+  "fixtures": [
+    {
+      "match": { "userMessage": "[chat] recommend a guitar" },
+      "response": {
+        "content": "I'd recommend the Fender Stratocaster for its versatile tone..."
+      }
+    }
+  ]
+}
+```
+
+For tool calling, fixtures support multi-step sequences:
+
+```json
+{
+  "fixtures": [
+    {
+      "match": {
+        "userMessage": "[toolcall] what guitars do you have in stock",
+        "sequenceIndex": 0
+      },
+      "response": {
+        "toolCalls": [{ "name": "getGuitars", "arguments": "{}" }]
+      }
+    },
+    {
+      "match": {
+        "userMessage": "[toolcall] what guitars do you have in stock",
+        "sequenceIndex": 1
+      },
+      "response": {
+        "content": "Here's what we have in stock: ..."
+      }
+    }
+  ]
+}
+```
+
+The `sequenceIndex` field lets you model multi-turn tool flows: the LLM calls a tool, gets a result, then responds with text. aimock plays back each step in order.
+
+A single aimock instance starts in `globalSetup` and is shared across all tests. Provider adapters are configured to point at aimock's URL instead of the real API endpoint. The `X-Test-Id` header isolates parallel tests so they don't share fixture state.
+
+aimock also has a recording mode: set a real API key, run the tests, and it captures live responses as fixture files. This makes it easy to add new tests or update existing fixtures when provider behavior changes.
+
+This testing infrastructure is one of the things that makes [TanStack AI](https://tanstack.com/ai/latest) a reliable foundation for building AI-powered applications. If you're looking for an AI SDK that takes provider parity seriously, give it a try.
+
+---
+
+If you're interested in using aimock for your own project's LLM testing, check out the repo at [github.com/CopilotKit/aimock](https://github.com/CopilotKit/aimock). It's open source and works with any AI SDK, not just TanStack AI.
diff --git a/src/blog/incident-followup.md b/src/blog/incident-followup.md
new file mode 100644
index 000000000..013c5dd39
--- /dev/null
+++ b/src/blog/incident-followup.md
@@ -0,0 +1,115 @@
+---
+title: 'Hardening TanStack After the npm Compromise'
+published: 2026-05-12
+draft: false
+excerpt: "A companion to our incident postmortem: what we're changing across the org so the May 11 supply-chain attack can't happen the same way again."
+authors:
+  - Sarah Gerrard
+  - Corbin Crutchley
+  - Jack Herrington
+  - Tanner Linsley
+  - Florian Pellet
+  - Harry Whorlow
+---
+
+> **Status (2026-05-15): All clear ✅**
+>
+> After a three-day full security sweep and hardening pass, we're issuing an official all-clear on TanStack repo and package security.
+>
+> - Only the Router/Start repo was affected — 42 monorepo packages, 2 versions each. All were deprecated within the hour and removed by npm shortly after.
+> - All other TanStack repos and packages were unaffected and remain secure: Query, DB, Store, AI, Table, Form, HotKeys, Virtual, Pacer, Config, Devtools, CLI, Intent, etc.
+> - Every currently-available published version of every TanStack package — Router and Start included — is safe to install.
+
+_Last updated 2026-05-15 — see [Changelog](#changelog)._
+
+This week, 42 of our packages were republished to npm with malware baked into the published artifacts. The releases were triggered by our normal release pipeline after changes landed on main, but the malicious code was not authored, reviewed, or approved by us. By the time the first report reached our issue tracker, those compromised versions had already been available on the registry for about 20 to 26 minutes.
+
+We've already published [the full incident postmortem](/blog/npm-supply-chain-compromise-postmortem), and if you want the timeline, the attack chain, the exact package list, the IOCs, and the "what to do if you installed a bad version" guidance, that's the source of truth. Read that first.
+
+This post is the companion piece. The postmortem covered what happened. This one is about what we're changing because of it.
+
+## The shortest possible recap
+
+Just enough context so this post makes sense on its own:
+
+Someone opened a pull request from a throwaway fork. While we never got a chance to see the PR since it was immediately closed, it had still triggered a workflow that checked out the contributor's code and ran it in a job that had write access to our shared CI cache.
+
+The attacker's code poisoned the cache and later, when an entirely legitimate merge to main, from a different PR, ran our release workflow, it restored that poisoned cache, extracted our short-lived publish token out of the runner's memory, and used it to push malicious versions across our router-family packages.
+
+Just to be clear, no maintainer was phished, had a password leak, or a token stolen from their account. Since this attack rode in through a trusted cache, it didn't need to. The attacker managed to engineer a path where our own CI pipeline stole its own publish token for them, at the exact moment it was created, by way of a cache that everyone in the chain implicitly trusted. It is a sophisticated approach that we hadn't anticipated and that we're taking very seriously.
+
+## How our releases normally work
+
+In order to understand how this attack worked against us, it's important to understand how the release process for TanStack packages typically works. Every release that ships to npm under a `@tanstack/*` name goes through a staged process:
+
+1. Through a reviewed pull request, a change lands on `main` that includes a version bump and a changelog update. That PR is reviewed and merged by a maintainer, just like any other PR.
+2. Releases are cut from `main` by a CI workflow (when it works), not by a person running `npm publish` from a laptop.
+3. The workflow authenticates to npm through GitHub's OIDC trusted-publisher integration, which means there is no long-lived npm publish token sitting waiting to be stolen.
+4. The publish credential is minted at release time, scoped to that workflow, and expires almost immediately.
+
+The distinction that there was no publish token to be stolen is important. A large class of npm supply-chain attacks work by stealing a maintainer's publish token, often from their local machine or a compromised dev environment, that are then used to publish malicious versions directly.
+
+Our setup was designed specifically to make that path a non-starter. With no long-lived npm publish token sitting on a maintainer machine, an attacker couldn't simply compromise a laptop, steal credentials from a local environment, and publish malicious packages at will. That matters especially in the context of the current wave of malware and infostealer campaigns targeting developer machines and browser-stored secrets.
+
+OIDC-based publishing also gave us tighter control over who could release packages and under what conditions. Releases were tied to specific GitHub workflows running from specific repositories and branches, rather than to a reusable credential that could be copied, shared, or quietly reused elsewhere.
+
+With publishes tied back to workflow runs instead of a token, we also had a much easier time understanding the scope of the attack once we had the first report. It showed us exactly what workflow run triggered the publish, which branch it ran from, and when it ran. That audit trail was a significant advantage during incident response and helped us scope the what had happened much more quickly.
+
+## The honest part
+
+The way we had our workflow structured was inevitably how this was attack was made possible. The attack vector was a workflow that ran on [`pull_request_target`](https://docs.github.com/en/actions/reference/workflows-and-actions/events-that-trigger-workflows#pull_request_target), which is a special event that runs in the context of the base repository instead of the fork. That means the fork, which was renamed to avoid being detected as a fork of the repo, had write access to the cache that our release workflow later read from. While this has been [documented as a known-bad pattern by GitHub's own security team](https://securitylab.github.com/resources/github-actions-preventing-pwn-requests/) for over three years, we still had it in our workflow and it was the root cause of this attack.
+
+Knowing we had added in production is something we have to sit with now. While there are many things we had in place that worked as intended, not being on top of the fact that this pattern was in our workflow is a failure on our part. We had the information we needed to know that this was a potential problem, but we didn't connect the dots to our own setup.
+
+While we can say that the npm provenance, SLSA, OIDC, and 2FA all worked as advertised and still didn't stop this attack, that's not the whole story. The workflow shape itself was the hole, and that's what we're rebuilding now.
+
+Modern supply-chain defences are important, but they're not always enough on their own. We have to be more proactive about identifying and closing any holes in our workflows that could be exploited, rather than relying solely on the security features of the tools we use.
+
+Knowing that we had a known-bad pattern in our workflow, and it wasn't on our radar, means there was a breakdown in our internal processes and that's where we have to do better. We have to be more proactive about identifying and closing any holes in our workflows that could be exploited, rather than relying solely on the security features of the tools we use.
+
+## What we've already done
+
+These are the changes that have landed since the incident. They're not the whole plan — they're the things we could do quickly.
+
+- **Disabled the pnpm cache in our release pipeline.** We are still evaluating exactly what role the cache played here, whether it can be safely reintroduced (or if we even want it), and what additional hardening would be required if it is.
+- **Removed all caches from GitHub Actions** across the affected workflows. Same reasoning.
+- **Pinned every action in the org to a commit SHA.** No more `actions/checkout@v6.0.2`. A retargeted tag has the same blast radius as cache poisoning, and we'd just lived through cache poisoning, so we'd rather not open that wound again.
+- **Enforced non-SMS 2FA across npm and GitHub.** 2FA was already required, but SMS was still allowed as a factor. It isn't anymore.
+- **Removed every use of `pull_request_target` from our CI.** It was never in our CD pipeline but it shouldn't have been in CI either. If we need base-repo permissions to react to a PR, we'll do it through `workflow_run` against artefacts from a sandboxed `pull_request` job — the GitHub-recommended pattern for this exact scenario.
+- **Upgraded every repo to pnpm 11**, so we inherit the ecosystem install-cooldown behaviour. It's not a fix on its own. It buys us a window.
+
+Most of those are blast-radius reductions rather than root-cause fixes; they shrink what a similar attack could reach, but the workflow shape itself is what we're rebuilding in the next round.
+
+## What we're working on next
+
+Some of the changes we're making take more than a hotfix to land properly, and a few of them are still open questions we're working through together. We're including the unresolved ones because how we're thinking about them feels as relevant as what we've already shipped.
+
+- **Adding [`zizmor`](https://github.com/woodruffw/zizmor) as a required PR check on every repo.** It's a static analyser for GitHub Actions workflows, and there's a chance if we had it running against the workflow this incident exploited, it could have flagged the `pull_request_target` + fork-checkout pattern before any of this happened.
+- **Putting `CODEOWNERS` on `.github` folders**, restricting workflow changes to core maintainers. We're leaning toward "yes" on this one; workflow files are code that runs with our credentials, and that means they should be treated like the most privileged code in the repo, because that's effectively what they are.
+- **Replacing the pnpm setup cache with `actions/cache/restore`**, which has more conservative defaults: explicit restore, no implicit write-on-exit. The auto-save behaviour of `actions/cache@v5` is what allowed the cache write to happen regardless of our `permissions:` block, and we want that path closed by design instead of by accident.
+
+And then the more difficult thing...
+
+### The PR question
+
+This is the change we're least sure about.
+
+We've been talking about closing the ability for external contributors to open pull requests against TanStack repos. Not closing source (to be very clear, we are absolutely not going closed source) but shifting from "PRs welcome from anyone" to something closer to "issues and discussions welcome from anyone, PRs from non-maintainers by invitation." Contributors who want to land code might do it by filing a detailed issue or patch suggestion, or by doing the kind of investigative and review work that earns a path into a committer role over time.
+
+We have complicated feelings about this, because open PRs are part of how a lot of us became maintainers in the first place. The path from "user with a fix" to "trusted committer" tends to run straight through opening a PR and having someone review it, and closing that path narrows what it means to participate in the project in ways that aren't only about us. There's also a version of this where it doesn't actually solve the underlying problem; the attack vector wasn't "a malicious PR got merged," it was "a malicious PR ran in CI," and you can keep PRs open and still close the CI side of that hole, which is what most of the changes earlier in this post are doing.
+
+So with that in mind... we haven't decided. The discussion is ongoing, and we're flagging it here because we'd rather you hear about it from us, with the context attached, than read about it sideways somewhere later. If we do go that route, it'll come with its own post about how the new contribution model actually works in practice since telling people to "send a patch via an issue" without the infrastructure to make that a real path is just a polite way of telling them to go away.
+
+## What we're taking from this
+
+It's tempting, after something like this, to end on a paragraph about how the ecosystem needs to change (and it does). Cache scoping in GitHub Actions shouldn't silently bridge fork PRs and base-repo branches. Provenance shouldn't be confused with innocence. The gap between "this is a known-bad pattern" and "this pattern is hard to write by accident" is a gap the platform itself should be closing, not one every project should have to notice on its own. All of that is true, and we'll be advocating for it where we can.
+
+But it's not what we're sitting with right now. What we're sitting with is that the workflow shape that got exploited had been quietly working for a long time, and the parts of our security posture we actively thought about — OIDC, lockfiles, 2FA, signed commits — were the parts we'd already invested in. CI was the part we hadn't, and that's the part we're rebuilding now.
+
+To everyone who reported, verified, and helped triage — thank you. The fact that an independent researcher caught the dead-man's switch in the payload and warned responders before anyone started revoking tokens is the single reason this incident isn't significantly worse (even though it _is_ bad). That kind of work doesn't tend to make the headline, but it makes the difference, and we noticed.
+
+We'll do better.
+
+## Changelog
+
+- **2026-05-15** — Corrected the package count from "fourteen" (the scope in the initial third-party report) to 42 (the full scope identified by our subsequent scan). Refined the registry-exposure window from "about 20 minutes" to "20 to 26 minutes" using verified publish and report timestamps. Added an All-clear status banner.
diff --git a/src/blog/multi-turn-structured-output.md b/src/blog/multi-turn-structured-output.md
new file mode 100644
index 000000000..8229356b0
--- /dev/null
+++ b/src/blog/multi-turn-structured-output.md
@@ -0,0 +1,259 @@
+---
+title: 'Structured Output That Remembers Across Turns'
+published: 2026-05-19
+excerpt: 'useChat({ outputSchema }) used to keep one slot for partial/final, so multi-turn structured chats lost prior turns the moment a new one streamed in. Every assistant turn now carries its own typed StructuredOutputPart on its UIMessage. History is preserved by default, and the schema generic threads all the way down to messages[i].parts[j].data.'
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![Structured Output That Remembers Across Turns](/blog-assets/multi-turn-structured-output/header.png)
+
+You ask the LLM for a recipe. It plates up _Spaghetti Pomodoro_ — title, cuisine, servings, ingredients, steps, all typed against your schema. Beautiful. You ask it to make the recipe vegan. A new recipe streams in.
+
+Then the first one vanishes.
+
+That used to be the deal with `useChat({ outputSchema })`: one hook-level `partial` / `final` slot. The instant a new turn started streaming, the previous turn's recipe was clobbered. Multi-turn anything (recipe refinement, ticket triage, iterative form filling) needed manual history plumbing — you'd intercept every chunk, snapshot `final` into your own state, juggle a `recipes[]` array yourself, and keep it in sync with `messages[]` to avoid drift. The schema's type safety also stopped at `partial` / `final`; once a structured payload landed in your local array, it was `unknown` again unless you cast.
+
+We just shipped a different shape. Every assistant turn now carries its own typed `structured-output` part on its `UIMessage`. History is preserved by default. The schema generic threads all the way down to `messages[i].parts.find(p => p.type === 'structured-output').data` — no casts, no manual tracking. Same `useChat` hook, same `outputSchema` option, less code in your component. If you missed the prior post on streaming a single typed object end-to-end, [start here](https://tanstack.com/blog/streaming-structured-output) — that piece is the antecedent to this one.
+
+This post walks through what changed, why it matters for any multi-turn UI, and how to build the recipe-builder pattern end-to-end in roughly 80 lines (split across a server route and a client component).
+
+## The old shape
+
+The previous `useChat({ outputSchema })` exposed two values that tracked the _current_ run:
+
+- `partial` — `DeepPartial<T>`, the progressively-parsed object as JSON streamed in
+- `final` — `T | null`, the validated object once `structured-output.complete` fired
+
+On a single-turn extractor (paste a paragraph → get a typed `Person`), this was perfect. Field-by-field reveal as the JSON streamed, validated payload on terminal event, one render to consume both.
+
+On a multi-turn chat it fell apart. `partial` and `final` were a _single slot_, scoped to whichever run was most recent. As soon as you called `sendMessage()` again, the previous turn's `final` was gone. The runtime had no place to keep it — the typed structured payload didn't live on the message itself, only in this transient hook state.
+
+The workaround we'd see in user code:
+
+```tsx
+const [recipes, setRecipes] = useState<Array<Recipe>>([])
+
+const { sendMessage, final } = useChat({
+  outputSchema: RecipeSchema,
+  connection: fetchServerSentEvents('/api/recipes'),
+  onFinish: () => {
+    if (final) setRecipes((prev) => [...prev, final])
+  },
+})
+```
+
+Three problems with that:
+
+1. **The data lives in two places now.** `messages[]` has the assistant turns; `recipes[]` has the typed objects. Keeping them in sync (across reloads, retries, edits, server snapshots, replays) is your problem.
+2. **The model can't see the history.** Your `recipes[]` array is local to the component, the wire layer never sees it. When the user types "now make the vegan one cheaper," the LLM has no idea what "the vegan one" refers to; it only sees the raw text of each prior turn, with the structured response stripped to whatever it landed on the original `TextPart` as. Multi-turn refinement collapses.
+3. **You lose the schema's type safety.** `recipes` is typed, but the moment you try to round-trip a prior recipe back into the conversation, you're stringifying a typed object into the wire payload by hand. The library can't help you because it doesn't know `recipes` exists.
+
+The right place for this state is _on the message it came from_. That's what we shipped.
+
+## The new shape: typed parts on every assistant message
+
+Every `UIMessage` has a `parts: MessagePart[]` array. Before, the variants were `text`, `image`, `audio`, `video`, `document`, `tool-call`, `tool-result`, `thinking`. We added one:
+
+```ts
+type StructuredOutputPart<TData = unknown> = {
+  type: 'structured-output'
+  status: 'streaming' | 'complete' | 'error'
+  /** Progressive parse — populated while streaming and after complete. */
+  partial?: DeepPartial<TData>
+  /** Validated final object — set when status === 'complete'. */
+  data?: TData
+  /** Accumulating JSON buffer — source of truth for the wire round-trip. */
+  raw: string
+  reasoning?: string
+  errorMessage?: string
+}
+```
+
+The runtime routes `TEXT_MESSAGE_CONTENT` deltas (the streaming JSON bytes) into this part instead of building a `TextPart`. On the terminal `structured-output.complete` event, `status` flips to `'complete'` and `data` is populated with the validated object. Every assistant turn produces a _new_ assistant message, which carries its _own_ `structured-output` part. The previous turn's part is untouched.
+
+The hook-level `partial` and `final` still exist, they're derived from the _latest_ assistant message's part now, instead of being a sticky slot. That means they read `{}` and `null` between `sendMessage()` and the first chunk (because no new assistant message exists yet), and they snap to the freshest turn's payload as it streams. The migration is zero, the same code that read `partial` / `final` for a single-turn extractor reads identical values in the new shape.
+
+What changed is everything _else_. Walking `messages[]` now exposes the full history of typed objects:
+
+```tsx
+type RecipePart = StructuredOutputPart<Recipe>
+
+messages.map((m) => {
+  if (m.role === 'assistant') {
+    const part = m.parts.find(
+      (p): p is RecipePart => p.type === 'structured-output',
+    )
+    // part.data is Recipe (the schema-inferred type) — no cast.
+    // part.partial is DeepPartial<Recipe>.
+    if (part) return <RecipeCard part={part} />
+  }
+  return null
+})
+```
+
+The schema generic flows through `useChat<TTools, TSchema>` → `UIMessage<TTools, TData>` → `MessagePart<TTools, TData>` → `StructuredOutputPart<TData>`, so `part.data` resolves to `Recipe` with no cast. The `RecipePart` alias is for readability; you can inline `Extract<typeof p, { type: 'structured-output' }>` instead if you'd rather not name it. The same flow runs in Vue (`computed`), Solid (`createMemo`), and Svelte (`$derived.by`) — the parity work shipped in the same release.
+
+## Building a recipe refinement loop
+
+Here's the full recipe-builder pattern. Server endpoint first:
+
+```ts
+// app/api/recipes/route.ts
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { z } from 'zod'
+
+export const RecipeSchema = z.object({
+  title: z.string(),
+  cuisine: z.string(),
+  servings: z.number(),
+  estimatedCostUsd: z.number(),
+  ingredients: z.array(z.object({ item: z.string(), amount: z.string() })),
+  steps: z.array(z.string()),
+  tips: z.array(z.string()),
+})
+
+export type Recipe = z.infer<typeof RecipeSchema>
+
+const SYSTEM = `You are a chef. Reply with a single recipe matching the JSON schema. When the user asks for modifications, produce a new recipe in the same shape that reflects the change.`
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+  const stream = chat({
+    adapter: openaiText('gpt-5.2'),
+    messages,
+    systemPrompts: [SYSTEM],
+    outputSchema: RecipeSchema,
+    stream: true,
+  })
+  return toServerSentEventsResponse(stream)
+}
+```
+
+That's the whole server side. The only structured-output-specific lines are `outputSchema: RecipeSchema` and `stream: true`. The runtime takes care of converting the schema to JSON Schema, hitting the provider's native structured-output API, validating the response, and emitting `structured-output.start` + `structured-output.complete` events to the client.
+
+Client:
+
+```tsx
+import { useState } from 'react'
+import { useChat, fetchServerSentEvents } from '@tanstack/ai-react'
+import type { StructuredOutputPart } from '@tanstack/ai-client'
+import { RecipeSchema, type Recipe } from './api/recipes'
+
+type RecipePart = StructuredOutputPart<Recipe>
+
+export function RecipeBuilder() {
+  const [input, setInput] = useState('')
+
+  const { messages, sendMessage, isLoading } = useChat({
+    outputSchema: RecipeSchema,
+    connection: fetchServerSentEvents('/api/recipes'),
+  })
+
+  return (
+    <div>
+      {messages.map((m) => {
+        if (m.role === 'user') {
+          const text = m.parts
+            .filter((p) => p.type === 'text')
+            .map((p) => p.content)
+            .join('')
+          return <UserPrompt key={m.id} text={text} />
+        }
+        if (m.role === 'assistant') {
+          const part = m.parts.find(
+            (p): p is RecipePart => p.type === 'structured-output',
+          )
+          if (!part) return null
+          return <RecipeCard key={m.id} part={part} />
+        }
+        return null
+      })}
+
+      <input value={input} onChange={(e) => setInput(e.target.value)} />
+      <button
+        onClick={() => {
+          sendMessage(input)
+          setInput('')
+        }}
+        disabled={isLoading || !input.trim()}
+      >
+        {isLoading ? 'Cooking…' : 'Cook'}
+      </button>
+    </div>
+  )
+}
+
+function RecipeCard({ part }: { part: RecipePart }) {
+  // `data` is Recipe (typed by the schema). `partial` is DeepPartial<Recipe>.
+  // Both are typed — no cast, no `unknown`.
+  const recipe = part.data ?? part.partial ?? {}
+  return (
+    <article>
+      <h3>{recipe.title ?? 'Plating up…'}</h3>
+      {recipe.cuisine && <p>{recipe.cuisine}</p>}
+      {recipe.ingredients?.map((ing, i) => (
+        <li key={i}>
+          {ing?.amount} {ing?.item}
+        </li>
+      ))}
+    </article>
+  )
+}
+```
+
+That's the entire client side. There's no separate `recipes[]` state, no `onFinish` callback, no manual history sync. Each `sendMessage()` triggers a new run, which produces a new assistant message, which carries its own typed structured-output part. The render loop walks `messages` and the new card just lands.
+
+Try it:
+
+> "Pasta dinner for two, under $15." → recipe lands.
+>
+> "Now make it vegan." → second recipe lands. The first is still on screen.
+>
+> "Add a salad and make it gluten-free." → third recipe lands. Both previous turns are still there.
+
+## How the round-trip stays coherent
+
+Multi-turn structured chats only work if the model sees its own prior responses on each follow-up turn. Otherwise turn N+1 has no idea what "make it vegan" refers to.
+
+The wire layer handles this. When `useChat` sends turn N+1, it serializes the conversation back through `uiMessageToModelMessages`. For each assistant message with a completed `structured-output` part, the converter emits:
+
+```ts
+{ role: 'assistant', content: part.raw }
+```
+
+`part.raw` is the original JSON the model produced, preserved byte-for-byte from the streaming bytes that built the part in the first place. The model sees its own prior recipe verbatim and can reason about modifications. There's a defensive fallback (`JSON.stringify(part.data)`) for terminal-only completes that arrived without streamed bytes, plus a "drop the turn if we can't serialize it" guard for unserializable `data` like `BigInt`s or circular refs. Streaming and errored parts are dropped from the round-trip; you don't want to feed an incomplete JSON fragment back to the LLM.
+
+You don't see any of this. You called `sendMessage('now make it vegan')` and the model knew what it was modifying.
+
+## The schema generic threads through every framework
+
+The same release shipped parity across the framework hook packages: `@tanstack/ai-react`, `@tanstack/ai-vue`, `@tanstack/ai-solid`, and `@tanstack/ai-svelte` (which uses `createChat` instead of `useChat`). Each one threads the `TSchema` generic the same way:
+
+- `useChat<TTools, TSchema>` (or `createChat<TTools, TSchema>` for Svelte) substitutes `TData = InferSchemaType<TSchema>` when a schema is supplied.
+- `messages` becomes `Array<UIMessage<TTools, TData>>`.
+- `MessagePart<TTools, TData>` substitutes `StructuredOutputPart<TData>` into the discriminated union.
+
+Net effect: in any of the four frameworks, with `outputSchema: RecipeSchema`, `messages[i].parts.find(p => p.type === 'structured-output').data` resolves to `Recipe | undefined`. Default `TData = unknown` keeps every existing consumer that doesn't pass a schema source-compatible.
+
+`@tanstack/ai-preact` doesn't support `outputSchema` yet; that's tracked separately.
+
+## When to use this
+
+The multi-turn pattern lights up any UI where:
+
+- Users iterate on a structured object across turns (recipe builder, design spec refinement, ticket triage, A/B copy variants).
+- You want to render the history of typed objects, not just the latest.
+- You want the model to remember its own structured responses on follow-ups without you serializing them yourself.
+
+For a single round-trip (one prompt, one typed object), use [`chat({ outputSchema })`](https://tanstack.com/ai/docs/structured-outputs/one-shot), the non-streaming activity is simpler. For a streaming UI that progressively fills in one object (the classic field-by-field form), use [`useChat({ outputSchema })`](https://tanstack.com/ai/docs/structured-outputs/streaming) and read `partial` / `final`, the new shape preserves that surface unchanged. Use [multi-turn](https://tanstack.com/ai/docs/structured-outputs/multi-turn) when history is a feature, not a chore.
+
+## Try it
+
+The full recipe-builder UI ships in the [`ts-react-chat` example](https://github.com/TanStack/ai/tree/main/examples/ts-react-chat) at `/generations/structured-chat`: cuisine-aware hero banners, streaming preview, multi-turn history, the lot. The docs walk through the pattern at [structured-outputs/multi-turn](https://tanstack.com/ai/docs/structured-outputs/multi-turn).
+
+If you already use `useChat({ outputSchema })`, you don't need to change anything to get the new types — `partial` and `final` keep working. You opt into multi-turn the moment you walk `messages` instead of just reading the hook-level sugar.
+
+[**Read the multi-turn docs →**](https://tanstack.com/ai/docs/structured-outputs/multi-turn)
diff --git a/src/blog/netlify-partnership.md b/src/blog/netlify-partnership.md
index ae8f94b19..02e04020f 100644
--- a/src/blog/netlify-partnership.md
+++ b/src/blog/netlify-partnership.md
@@ -1,6 +1,7 @@
 ---
 title: TanStack + Netlify Partnership
 published: 2025-03-18
+excerpt: Netlify is now the official deployment partner for TanStack Start. Their focus on speed, simplicity, and flexibility aligns perfectly with our vision for full-stack development.
 authors:
   - Tanner Linsley
 ---
diff --git a/src/blog/npm-stats-the-right-way.md b/src/blog/npm-stats-the-right-way.md
index 12e7f995c..e194ca711 100644
--- a/src/blog/npm-stats-the-right-way.md
+++ b/src/blog/npm-stats-the-right-way.md
@@ -1,6 +1,7 @@
 ---
 title: 'How We Track Billions of Downloads: The NPM Stats API Deep Dive'
 published: 2025-12-02
+excerpt: When you're tracking download stats for 200+ packages with over 4 billion total downloads, you learn a few things about NPM's API. Some lessons are documented. Others you discover the hard way.
 authors:
   - Tanner Linsley
 ---
diff --git a/src/blog/npm-supply-chain-compromise-postmortem.md b/src/blog/npm-supply-chain-compromise-postmortem.md
new file mode 100644
index 000000000..15a25c6d7
--- /dev/null
+++ b/src/blog/npm-supply-chain-compromise-postmortem.md
@@ -0,0 +1,261 @@
+---
+title: 'Postmortem: TanStack npm supply-chain compromise'
+published: 2026-05-11
+excerpt: On 2026-05-11, an attacker chained a pull_request_target Pwn Request, GitHub Actions cache poisoning across the fork↔base trust boundary, and OIDC token extraction from runner memory to publish 84 malicious versions across 42 @tanstack/* packages on npm. Full postmortem.
+authors:
+  - Tanner Linsley
+---
+
+> **Status (2026-05-15): All clear ✅**
+>
+> After a three-day full security sweep and hardening pass, we're issuing an official all-clear on TanStack repo and package security.
+>
+> - Only the Router/Start repo was affected — 42 monorepo packages, 2 versions each. All were deprecated within the hour and removed by npm shortly after.
+> - All other TanStack repos and packages were unaffected and remain secure: Query, DB, Store, AI, Table, Form, HotKeys, Virtual, Pacer, Config, Devtools, CLI, Intent, etc.
+> - Every currently-available published version of every TanStack package — Router and Start included — is safe to install.
+>
+> See also: [Hardening TanStack After the npm Compromise](/blog/incident-followup) — the companion piece covering what we're changing because of this incident.
+
+_Last updated 2026-05-15 — see [Changelog](#changelog)._
+
+## TL;DR
+
+On 2026-05-11 between 19:20 and 19:26 UTC, an attacker published 84 malicious versions across 42 `@tanstack/*` npm packages by combining: the `pull_request_target` "Pwn Request" pattern, GitHub Actions cache poisoning across the fork↔base trust boundary, and runtime memory extraction of an OIDC token from the GitHub Actions runner process. No npm tokens were stolen and the npm publish workflow itself was not compromised.
+
+The malicious versions were detected publicly within 20 to 26 minutes (depending on which of the two publish batches a given version came from) by an external researcher `ashishkurmi` working for `stepsecurity`. All affected versions have been deprecated; npm security has been engaged to pull tarballs from the registry. We have no evidence of npm credentials being stolen, but we strongly recommend that anyone who installed an affected version on 2026-05-11 rotate AWS, GCP, Kubernetes, Vault, GitHub, npm, and SSH credentials reachable from the install host.
+
+**Tracking issue:** [TanStack/router#7383](https://github.com/TanStack/router/issues/7383)
+**GitHub Security Advisory:** [GHSA-g7cv-rxg3-hmpx](https://github.com/TanStack/router/security/advisories/GHSA-g7cv-rxg3-hmpx)
+
+## Impact
+
+### Packages affected
+
+42 packages, 84 versions (two per package, published roughly 6 minutes apart). See the tracking issue for the full table. Confirmed-clean families: `@tanstack/query*`, `@tanstack/table*`, `@tanstack/form*`, `@tanstack/virtual*`, `@tanstack/store`, `@tanstack/start` (the meta-package, not `@tanstack/start-*`).
+
+### What the malware does
+
+When a developer or CI environment runs `npm install`, `pnpm install`, or `yarn install` against any affected version, npm resolves the malicious `optionalDependencies` entry, fetches the orphan payload commit from the fork network, runs its `prepare` lifecycle script, and executes a ~2.3 MB obfuscated `router_init.js` smuggled into the affected tarball. The script:
+
+- Harvests credentials from common locations: AWS IMDS / Secrets Manager, GCP metadata, Kubernetes service-account tokens, Vault tokens, `~/.npmrc`, GitHub tokens (env, `gh` CLI, `.git-credentials`), SSH private keys
+- Exfiltrates over the Session/Oxen messenger file-upload network (`filev2.getsession.org`, `seed{1,2,3}.getsession.org`) — end-to-end encrypted with no attacker-controlled C2, so blocking by IP/domain is the only network mitigation
+- Self-propagates: enumerates other packages the victim maintains via `registry.npmjs.org/-/v1/search?text=maintainer:<user>` and republishes them with the same injection
+
+Because the payload runs as part of npm install's lifecycle, anyone who installed an affected version on 2026-05-11 must treat the install host as potentially compromised.
+
+---
+
+## Timeline
+
+All times UTC. Local timestamps from GitHub API and npm registry.
+
+### Pre-attack (cache poisoning phase)
+
+| Time              | Event                                                                                                                                                                                                                                                                                                     |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 2026-05-10 17:16  | Attacker creates fork [github.com/zblgg/configuration](https://github.com/zblgg/configuration) (a fork of TanStack/router, deliberately renamed to evade fork-list searches)                                                                                                                              |
+| 23:29             | Malicious commit `65bf499d16a5e8d25ba95d69ec9790a6dd4a1f14` authored on the fork by fabricated identity `claude <claude@users.noreply.github.com>`. Adds `packages/history/vite_setup.mjs` (a ~30,000-line bundled JS payload). Commit message prefixed with `[skip ci]` to suppress CI on the push event |
+| 2026-05-11 ~10:49 | PR #7378 opened against `TanStack/router#main` titled "WIP: simplify history build" by `zblgg`                                                                                                                                                                                                            |
+| 10:49 onwards     | `bundle-size.yml` and `labeler.yml` (both `pull_request_target`) auto-run for the PR — no first-time-contributor approval required because `pull_request_target` bypasses that gate. `pr.yml` (which uses `pull_request`) does NOT run, blocked pending approval that never came                          |
+| 11:01–11:11       | Multiple force-pushes by `zblgg` to the PR head, each triggering more `pull_request_target` runs                                                                                                                                                                                                          |
+| 11:11             | Force-push lands `65bf499d` (the malicious commit) on the PR head. `bundle-size.yml`'s `benchmark-pr` job checks out `refs/pull/7378/merge`, runs `pnpm install` + `pnpm nx run @benchmarks/bundle-size:build` — this executes `vite_setup.mjs`                                                           |
+| 11:29             | Cache entry `Linux-pnpm-store-6f9233a50def742c09fde54f56553d6b449a535adf87d4083690539f49ae4da11` (1.1 GB) saved to GitHub Actions cache for `TanStack/router`, scope `refs/heads/main` — keyed to match what `release.yml` will look up on the next push to main                                          |
+| 11:31             | Attacker force-pushes the PR back to current main HEAD (`b1c061af`), making the visible PR a 0-file no-op. PR closed and branch deleted in the same minute. Cache poison persists.                                                                                                                        |
+
+### Detonation (publish phase)
+
+| Time                | Event                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 2026-05-11 19:15:44 | Workflow run `25613093674` (Release) is re-run as attempt #4 against main HEAD `b1c061af`. Original trigger was PR #7369 (Shkumbin's `CSS.supports` fix), merged 2026-05-09 22:11:51 UTC. Poisoned cache is restored on the runner.                                                                                                                                                                                                                                                                                                                                                                       |
+| 19:16:18            | Manuel merges PR #7382 (jiti tsconfig paths fix) → push to main triggers a fresh `release.yml` run                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| 19:16:22            | Workflow run `25691781302` starts (attempt #1). Same poisoned cache restored.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| 19:20:39            | npm registry receives publish for `@tanstack/history@1.161.9` and 41 sibling packages from run `25613093674` (~half of the eventual 84 versions; the remainder come during run #2). Publish is authenticated via OIDC trusted-publisher binding for `TanStack/router release.yml@refs/heads/main` — but it does not come from the workflow's defined Publish Packages step, which was skipped because tests failed. It comes from the malware running during the test/cleanup phase, which mints an OIDC token via the workflow's `id-token: write` permission and POSTs directly to `registry.npmjs.org` |
+| 19:20:48            | Run `25613093674` completes (status: failure)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| 19:26:14            | npm registry receives publish for the second-version-per-package set (`@tanstack/history@1.161.12` etc.) from run `25691781302`. Same OIDC mechanism                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| 19:26:22            | Run `25691781302` completes (status: failure)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+
+### Detection and response
+
+| Time             | Event                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 2026-05-11 19:46 | External researcher `ashishkurmi` working for StepSecurity opens issue #7383 with a complete writeup of the malicious `optionalDependencies` fingerprint and the package list (initially 14 of the 42)                                                                                                                                                                                                                  |
+| ~19:50           | Researcher notifies npm security directly                                                                                                                                                                                                                                                                                                                                                                               |
+| ~20:00           | Manuel acknowledges in #7383 — incident response begins                                                                                                                                                                                                                                                                                                                                                                 |
+| ~20:10           | Manuel removes all other team push permissions on GitHub in case of user machines have been compromised                                                                                                                                                                                                                                                                                                                 |
+| 20:19            | Tanner deprecates `@tanstack/history@1.161.9` and `@1.161.12` — the first two versions taken out of circulation                                                                                                                                                                                                                                                                                                         |
+| 20:41            | Batch deprecation runs across the initial 14-package / 28-version scope from issue #7383                                                                                                                                                                                                                                                                                                                                |
+| ~21:00           | Comprehensive scan of all 295 `@tanstack/*` packages confirms full scope: 42 packages, 84 versions (28 more than the StepSecurity report).<br><br>Public Twitter/X/LinkedIn/Bluesky disclosure from @tan_stack and maintainers                                                                                                                                                                                          |
+| 21:03            | Final batch deprecation runs across the remaining versions to cover the full 42-package / 84-version scope                                                                                                                                                                                                                                                                                                              |
+| 21:30            | Investigation identifies `bundle-size.yml` `pull_request_target` cache-poisoning vector and the `zblgg/configuration` fork.<br><br>All cache entries for all `TanStack/*` GitHub repositories purged via API.<br><br>Hardening PR merged: `bundle-size.yml` restructured, `repository_owner` guards added, third-party action refs pinned to SHAs.<br><br>Official GitHub Security Advisory is published, CVE requested |
+| 22:13–23:55      | npm removes the affected tarballs registry-side in response to the StepSecurity notification from earlier in the evening — first removal at 22:13:38 (`@tanstack/query-core`), last at 23:55:26 (`@tanstack/router-core`)                                                                                                                                                                                               |
+| 2026-05-12 05:02 | Tanner emails security@npmjs.com and GitHub security with full IOC list and a formal request to pull tarballs registry-side.<br><br>Formal malware reports are submitted via npm                                                                                                                                                                                                                                        |
+
+### Response timing
+
+Elapsed time from two reference points: the first malicious **publish** (19:20 UTC) and the moment the incident became **known** (StepSecurity issue #7383, 19:46 UTC).
+
+| Milestone                           | From publish | From known |
+| ----------------------------------- | ------------ | ---------- |
+| Compromise publicly detected        | ~26 min      | —          |
+| First versions deprecated (2 of 84) | ~59 min      | ~33 min    |
+| Initial scope deprecated (28 of 84) | ~1h 21m      | ~55 min    |
+| Full scope deprecated (84 of 84)    | ~1h 43m      | ~1h 17m    |
+| First package removed by npm        | ~2h 53m      | ~2h 27m    |
+| Last package removed by npm         | ~4h 35m      | ~4h 9m     |
+
+---
+
+## Root cause
+
+Three vulnerabilities chained together. Each is necessary for the attack; none alone is sufficient.
+
+### 1. `pull_request_target` "Pwn Request" pattern in `bundle-size.yml`
+
+`bundle-size.yml` ran `pull_request_target` for fork PRs and, inside that trigger context, checked out the fork's PR-merge ref and ran a build:
+
+```yaml
+on:
+  pull_request_target:
+    paths: ['packages/**', 'benchmarks/**']
+
+jobs:
+  benchmark-pr:
+    steps:
+      - uses: actions/checkout@v6.0.2
+        with:
+          ref: refs/pull/${{ github.event.pull_request.number }}/merge # fork's merged code
+
+      - uses: TanStack/config/.github/setup@main # transitively calls actions/cache@v5
+
+      - run: pnpm nx run @benchmarks/bundle-size:build # executes fork-controlled code
+```
+
+The author of the workflow attempted a trust split (the `comment-pr` job is separate from `benchmark-pr`, with a comment in the YAML noting the intent to keep `benchmark-pr` "untrusted with read-only permissions"). The split is correct in spirit but missed two facts:
+
+- `actions/cache@v5`'s post-job save is not gated by `permissions:`. Cache writes use a runner-internal token, not the workflow `GITHUB_TOKEN`. Setting `permissions: contents: read` does not block cache mutation.
+- Cache scope is per-repo, shared across `pull_request_target` runs (which use the base repo's cache scope) and pushes to main. A PR running in the base repo's cache scope can poison entries that production workflows on main will later restore.
+
+### 2. GitHub Actions cache poisoning across trust boundaries
+
+The malicious `vite_setup.mjs` was specifically designed to write data into the pnpm-store directory under a key the legit `release.yml` workflow would compute and look up: `Linux-pnpm-store-${hashFiles('**/pnpm-lock.yaml')}`. When the `benchmark-pr` job ended, `actions/cache@v5`'s post-step saved the (now-poisoned) pnpm store to that exact key. When `release.yml` next ran on a push to main, its Setup Tools step restored the poisoned entry — entirely as designed.
+
+This is the class of attack documented by Adnan Khan in 2024. It's not a TanStack-specific bug; it's a known GitHub Actions design issue that requires conscious mitigation.
+
+### 3. OIDC token extraction from runner memory
+
+`release.yml` declares `id-token: write` (legitimately needed for npm OIDC trusted publishing). When the poisoned pnpm store is restored on the runner, attacker-controlled binaries are now on disk and get invoked during the build step. Those binaries:
+
+- Locate the GitHub Actions `Runner.Worker` process via `/proc/*/cmdline`
+- Read `/proc/<pid>/maps` and `/proc/<pid>/mem` to dump the worker's memory
+- Extract the OIDC token (which the runner mints lazily, in memory, when `id-token: write` is set)
+- Use the token to authenticate POST requests directly to `registry.npmjs.org` — bypassing the workflow's Publish Packages step entirely
+
+This is the same memory-extraction technique (and verbatim Python script, with attribution comment) used in the `tj-actions/changed-files` compromise of March 2025. The attacker did not invent novel tradecraft; they recombined published research.
+
+### Why none alone is enough
+
+- `pull_request_target` alone is fine for trusted operations (labeling, comments)
+- Cache poisoning alone (e.g., from inside an already-compromised dep) requires a separate publish vehicle
+- OIDC token extraction alone requires existing code execution on the runner
+
+The chain only works because each vulnerability bridges the trust boundary the others assumed: PR fork code crossing into base-repo cache, base-repo cache crossing into release-workflow runtime, and release-workflow runtime crossing into npm registry write access.
+
+---
+
+## Detection
+
+### How we found out
+
+Detection was external. External researcher `ashishkurmi` working for StepSecurity opened issue #7383 ~20 minutes after the publish, with full technical analysis. Tanner received a phone call from Socket.dev just moments after starting the war room confirming the situation.
+
+### IOC fingerprints (for downstream maintainers and security tools)
+
+In any `@tanstack/*` package's manifest:
+
+```json
+"optionalDependencies": {
+  "@tanstack/setup": "github:tanstack/router#79ac49eedf774dd4b0cfa308722bc463cfe5885c"
+}
+```
+
+- File: `router_init.js` (~2.3 MB, package root, not in `"files"`)
+- Cache key: `Linux-pnpm-store-6f9233a50def742c09fde54f56553d6b449a535adf87d4083690539f49ae4da11`
+- 2nd-stage payload URLs: `https://litter.catbox.moe/h8nc9u.js`, `https://litter.catbox.moe/7rrc6l.mjs`
+- Exfiltration network: `filev2.getsession.org`, `seed{1,2,3}.getsession.org`
+- Forged commit identity: `claude <claude@users.noreply.github.com>` (note: not the real Anthropic Claude — fabricated GitHub no-reply email)
+- Real attacker accounts: `zblgg` (id 127806521), `voicproducoes` (id 269549300)
+- Attacker fork: [github.com/zblgg/configuration](https://github.com/zblgg/configuration) (fork of TanStack/router renamed to evade fork searches)
+- Orphan payload commit (in fork network): `79ac49eedf774dd4b0cfa308722bc463cfe5885c`
+- Workflow runs that performed the malicious publishes:
+  - [github.com/TanStack/router/actions/runs/25613093674](https://github.com/TanStack/router/actions/runs/25613093674) (attempt 4)
+  - [github.com/TanStack/router/actions/runs/25691781302](https://github.com/TanStack/router/actions/runs/25691781302)
+
+---
+
+## Lessons learned
+
+### What went well
+
+- External researchers noticed and reported with full technical detail within ~20 min of the incident
+- Maintainer team coordinated immediately and effectively across many timezones
+- The detection community already had a clear public IOC pattern within hours
+
+### What could have been better
+
+- No internal alerting. We learned about the compromise from a third party. We need monitoring on our own publishes. We'll be working closely with security researcher firms in the ecosystem that have the ability to detect these issues very quickly, potentially even in-house, and making the feedback loop even tighter.
+- `pull_request_target` workflows had not been audited despite being a long-known dangerous pattern
+- Floating refs (`@v6.0.2`, `@main`) on third-party actions create standing supply-chain risk independent of this incident
+- Unpublish was unavailable for nearly all affected packages because of npm's "no unpublish if dependents exist" policy. We have to rely on npm security to pull tarballs server-side, which adds hours of delay during which malicious tarballs remain installable
+- The 7-maintainer list on the npm scope means seven separate credential-theft targets for the same blast radius
+- OIDC trusted-publisher binding has no per-publish review. Once configured, any code path in the workflow can mint a publish-capable token. We need either (a) move to short-lived classic tokens with manual review, or (b) add provenance-source-verification to detect publishes from unexpected workflow steps
+
+### What we got lucky on
+
+- The attacker chose a payload that broke tests, which made the publish step (which would have produced cleaner-looking tarballs) skip — meaning the attack was loud enough to detect quickly. A more careful attacker who didn't break tests could have published silently for hours longer
+- The attacker reused public tradecraft (verbatim memory-dump script with attribution comment) instead of writing novel code — making the IOC-matching faster
+
+---
+
+## Open questions
+
+These need answers before we close the postmortem.
+
+- Did `bundle-size.yml`'s Setup Tools step actually call `actions/cache@v5`? Verify by reading the post-job logs from one of the `pull_request_target` runs against PR #7378 (e.g., run id `25666610798`). Tanner has access; needs to be done manually
+- What was in the initial PR head commit (before the force-pushes wiped it)? GitHub's reflog may have it. Check via `gh api` or the GitHub support team
+- How did the malicious commit get into the fork's git object store specifically — was it pushed directly via git, or was it created via the GitHub web UI (which would leave audit-log entries)?
+- Was `voicproducoes` a real account or a sock puppet? Cross-reference its activity history
+- Did the npm cache also get poisoned (the 6 duplicate `linux-npm-store-*` entries)? Were any actually used?
+- Can we identify any other fork in the `TanStack/router` fork network that contains the orphan payload commit? (If yes, the cleanup is harder — every fork hosting it keeps it accessible via `github:tanstack/router#79ac49ee...`)
+- Are any other TanStack repos (router, query, table, form, virtual, etc.) using the same `bundle-size.yml`-style pattern? Audit needed
+- How many users actually downloaded the affected versions during the publish window? Get from npm support
+- Did any of the seven listed maintainers' machines get compromised separately? (None of the malicious publishes used a maintainer's npm token, but maintainer machines could have been the secondary target via the self-propagation logic)
+
+---
+
+## References
+
+- Tracking issue: [TanStack/router#7383](https://github.com/TanStack/router/issues/7383)
+- GitHub Security Advisory: [GHSA-g7cv-rxg3-hmpx](https://github.com/TanStack/router/security/advisories/GHSA-g7cv-rxg3-hmpx)
+- Related research:
+  - Adnan Khan, "The Monsters in Your Build Cache: Github Actions Cache Poisoning" (May 2024) — [adnanthekhan.com](https://adnanthekhan.com/2024/05/06/the-monsters-in-your-build-cache-github-actions-cache-poisoning/)
+  - GitHub Security Lab, "Keeping your GitHub Actions and workflows secure: Preventing pwn requests" — [securitylab.github.com](https://securitylab.github.com/research/github-actions-preventing-pwn-requests/)
+  - StepSecurity, "Harden-Runner detection: tj-actions/changed-files action is compromised" (March 2025) — [stepsecurity.io](https://www.stepsecurity.io/blog/harden-runner-detection-tj-actions-changed-files-action-is-compromised)
+- npm policies:
+  - Unpublish: [docs.npmjs.com/policies/unpublish](https://docs.npmjs.com/policies/unpublish)
+  - Provenance: [docs.npmjs.com/generating-provenance-statements](https://docs.npmjs.com/generating-provenance-statements)
+
+---
+
+## Appendix A — Affected versions
+
+See the GitHub Security Advisory for the full list of affected versions: [GHSA-g7cv-rxg3-hmpx](https://github.com/TanStack/router/security/advisories/GHSA-g7cv-rxg3-hmpx)
+
+## Changelog
+
+- **2026-05-15** — Refined the timeline with verified timestamps from GitHub, npm registry, and internal shell history. Notable corrections:
+  - PR #7369 was merged 2026-05-09 (the 19:15 UTC May 11 event was a re-run of that workflow, not a fresh merge).
+  - The StepSecurity issue was opened at 19:46:46 UTC (not ~19:50).
+  - Deprecation actually ran in two phases at ~20:19 / ~20:41 / ~21:03 UTC (not a single ~21:00 batch).
+  - The npm-side tarball removal window of 22:13–23:55 UTC was reattributed to npm acting on the StepSecurity notification rather than to our later email.
+  - The formal IOC email to npm/GitHub Security went out at 05:02 UTC May 12 (not ~20:30 UTC May 11).
+  - Added a Response timing summary and an All-clear status banner.
diff --git a/src/blog/openrouter-partnership.md b/src/blog/openrouter-partnership.md
new file mode 100644
index 000000000..f8b63798e
--- /dev/null
+++ b/src/blog/openrouter-partnership.md
@@ -0,0 +1,77 @@
+---
+title: TanStack + OpenRouter Partnership
+published: 2026-03-09
+excerpt: OpenRouter is now an official TanStack sponsor. The most concrete result is already shipped — a first-class TanStack AI adapter giving you access to 300+ models from 60+ providers through a single API.
+authors:
+  - Tanner Linsley
+---
+
+![TanStack + OpenRouter](/blog-assets/openrouter-partnership/header.png)
+
+**OpenRouter is now an official TanStack sponsor.** And the most concrete expression of that is already shipped: [`@tanstack/ai-openrouter`](https://tanstack.com/ai/latest/docs/adapters/openrouter) — a first-class TanStack AI adapter that gives you access to 300+ models from 60+ providers through a single, unified API.
+
+## Why OpenRouter
+
+When we started building TanStack AI, one of our core beliefs was that you shouldn't have to bet your integration on a single provider. The AI model landscape is moving faster than anyone can predict. The model that wins this quarter might not be the one you want next quarter, and rewriting your AI layer every time a new frontier model drops is exactly the kind of undifferentiated toil we want to help you avoid.
+
+OpenRouter solves this cleanly. One API key. One integration. GPT-5, Claude, Gemini, Llama, Mistral, DeepSeek — and whatever ships next month. When you want to try a different model, you change a string. When a provider goes down, OpenRouter routes around it automatically. That's the kind of leverage I want TanStack developers to have.
+
+## The Adapter
+
+```bash
+npm install @tanstack/ai-openrouter
+```
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openRouterText } from '@tanstack/ai-openrouter'
+
+const stream = chat({
+  adapter: openRouterText('anthropic/claude-sonnet-4.5'),
+  messages: [{ role: 'user', content: 'Hello!' }],
+})
+```
+
+Swap the model string for any of the [300+ models on OpenRouter](https://openrouter.ai/models?utm_source=tanstack). Everything else stays the same.
+
+One feature I particularly love is the auto-router with fallbacks. It's dead simple to set up and gives your app real production resilience without any retry logic of your own:
+
+```typescript
+const stream = chat({
+  adapter: openRouterText('openrouter/auto'),
+  messages,
+  providerOptions: {
+    models: [
+      'openai/gpt-5',
+      'anthropic/claude-sonnet-4.5',
+      'google/gemini-3-pro-preview',
+    ],
+    route: 'fallback',
+  },
+})
+```
+
+If the primary model fails or gets rate-limited, OpenRouter falls through to the next one. No outage pages, no extra infrastructure.
+
+## Jack's Image Generation Demo
+
+Our own Jack Herrington put together a demo showing off TanStack AI with the OpenRouter adapter to do image generation. It's a great look at how far this goes beyond just chat:
+
+<iframe
+  width="100%"
+  style="aspect-ratio: 16/9;"
+  src="https://www.youtube.com/embed/YOa99Wpzd3o"
+  title="Generating Images With TanStack AI"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+></iframe>
+
+## What This Means Going Forward
+
+OpenRouter's sponsorship of TanStack means the adapter is actively maintained, tested, and will stay in sync with both libraries as they evolve. More importantly, both teams are genuinely aligned on the same goal: give developers the most flexible AI integration possible without locking them into anything.
+
+If you're building AI features with TanStack, the OpenRouter adapter is the one I'd reach for first.
+
+- [TanStack AI + OpenRouter docs](https://tanstack.com/ai/latest/docs/adapters/openrouter)
+- [Browse OpenRouter models](https://openrouter.ai/models?utm_source=tanstack)
diff --git a/src/blog/power-in-pragmatism.md b/src/blog/power-in-pragmatism.md
index 5a9aeb44f..8ca88e364 100644
--- a/src/blog/power-in-pragmatism.md
+++ b/src/blog/power-in-pragmatism.md
@@ -1,6 +1,7 @@
 ---
 title: The Power in Pragmatism
 published: 2025-05-22
+excerpt: The web ecosystem moves fast. I've chased purity before, but pragmatism usually wins in the long run — especially when you're building tools developers can trust and adopt incrementally.
 authors:
   - Tanner Linsley
 ---
diff --git a/src/blog/react-server-components.md b/src/blog/react-server-components.md
new file mode 100644
index 000000000..fc9a1b9e8
--- /dev/null
+++ b/src/blog/react-server-components.md
@@ -0,0 +1,420 @@
+---
+title: 'React Server Components Your Way'
+published: 2026-04-13
+draft: false
+excerpt: RSCs are genuinely exciting — smaller bundles, streaming UI, moving heavy work off the client — but existing implementations force you into a one-size-fits-all pattern. What if you could fetch, cache, and compose them on your own terms?
+library: start
+authors:
+  - Manuel Schiller
+  - Tanner Linsley
+  - Jack Herrington
+---
+
+![React Server Components](/blog-assets/react-server-components/header.jpg)
+
+At TanStack, we have always strived to build tools that cover the 90% use case with ease, but still give you the flexibility to break out of the box for advanced use cases. Why? Because we know that when things get serious, **you know what's best for your application and deserve the freedom to take control**.
+
+That's always been the TanStack philosophy, and we're happy that you've trusted us to take our time to deliver that same experience with React Server Components.
+
+## What are server components?
+
+Yeah... no. This is not a server component crash course. If you are not familiar with Server Components by this point, please stop by the [official React Server Components documentation](https://react.dev/reference/rsc/server-components) for a few minutes to get acquainted.
+
+## Why do RSCs matter?
+
+RSCs are a necessary primitive for moving heavy or expensive rendering logic off the client and onto the server.
+
+**Especially static or infrequently changing content** that can be cached consistently and granularly.
+
+Markdown parsers, syntax highlighters, date formatting libraries, search indexing, content transforms, etc. are all great use cases, but certainly not the only ones.
+
+They are a _very powerful primitive_.
+
+## The RSC Status Quo
+
+Most people now think of RSCs in a server-first way: the server owns the tree, `'use client'` marks the interactive parts, and the framework conventions decide how the whole thing fits together.
+
+That model can be compelling. It makes streaming, server rendering, and colocated server-side work feel built in from the start.
+
+But it also turns RSCs from a useful primitive into the thing your whole app has to orbit. The framework ends up owning how RSCs are created, where they render, how interactive boundaries are defined, and how UI gets recomposed when data or user actions change.
+
+That is the part we kept getting hung up on. We do not think you should have to buy into that whole model up front just to get value out of RSCs.
+
+## A Different RSC Model
+
+What if you could use RSCs as granularly as you could fetch JSON on the client? In fact, what if the client decided how server-rendered UI gets fetched, cached, and composed in the first place?
+
+In TanStack Start, the core idea is that RSCs are **just streams of data** that you can fetch, cache, and render on your terms at any time on the client instead of a server-owned component tree. That one shift makes them far more composable without changing anything fundamental about how they work.
+
+With TanStack Start, RSCs are just React Flight streams. That sounds almost too obvious to say out loud, but that's exactly the point. We did not want them wrapped in a black-box convention with special rules, APIs, and network effects that change everything about the framework.
+
+We wanted RSCs to behave more like any other piece of server data, which means **nothing special should need to happen in a framework to support them** outside of simply supporting streaming as a first-class citizen.
+
+What does this mean in practice? You can:
+
+- Create and return them from anywhere on the server (server functions, API routes)
+- Decode them wherever you want (both SSR and on the client)
+- Cache them however you want. They're just streams of bytes. Immediately compatible with all existing tools.
+
+## What do they look like?
+
+Here is an RSC in TanStack Start:
+
+> Naturally, to cut down on server sync logic, we'll use TanStack Query to manage it!
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+import {
+  createFromReadableStream,
+  renderToReadableStream,
+} from '@tanstack/react-start/rsc'
+
+// Create a server function
+const getGreeting = createServerFn().handler(async () => {
+  // Create an RSC readable stream
+  return renderToReadableStream(
+    // Return JSX
+    <h1>Hello from the server</h1>,
+  )
+})
+
+function Greeting() {
+  const query = useQuery({
+    queryKey: ['greeting'],
+    queryFn: async () =>
+      // Create a renderable element from the stream
+      createFromReadableStream(
+        // Call our server function to get the stream
+        await getGreeting(),
+      ),
+  })
+
+  // Render!
+  return <>{query.data}</>
+}
+```
+
+## The Primitive APIs
+
+At the primitive level, the API surface is intentionally small:
+
+- **`renderToReadableStream`** renders React elements to a Flight stream on the server.
+- **`createFromReadableStream`** decodes a Flight stream on the client or during SSR.
+- **`createFromFetch`** decodes directly from a fetch response when that shape is more convenient.
+
+Under the hood, the story is straightforward: React renders to a Flight stream on the server, and the client decodes that stream back into a React element tree.
+
+There is no secret extra protocol here. That is the primitive. Standard Flight streams in, standard React elements out.
+
+That is enough to build a lot. You can treat RSC output like any other async resource in your app instead of a special-case framework-owned convention that you have to route every decision through.
+
+## Caching
+
+Speaking of unnecessary framework convention: caching is not something new to reinvent, and **RSCs are no exception**.
+
+When RSCs become "just data", the caching story gets a lot simpler. And because these are just granular streams delivered plainly over HTTP and handled transparently during rendering, they are not only easy to cache on the client, but also anywhere along the way on the server: in memory, in a database, behind a CDN, or wherever else your architecture already caches bytes, responses, or data.
+
+This equally applies to **caching layers you likely already know on the client** as well, instead of requiring novel approaches and mental model shifts.
+
+Let me explain.
+
+### Query: Fine-Grained Control
+
+TanStack Query illustrates this so well. It does not need a special "RSC mode". Once the RSC payload is part of an async query, you still get explicit cache keys, `staleTime`, background refetching, and the rest of Query's toolbox. For static content, just set `staleTime: Infinity` and you are done.
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+import {
+  createFromReadableStream,
+  renderToReadableStream,
+} from '@tanstack/react-start/rsc'
+
+const getGreeting = createServerFn().handler(async () => {
+  return renderToReadableStream(<h1>Hello from the server</h1>)
+})
+
+function PostPage({ postId }: { postId: string }) {
+  const { data } = useSuspenseQuery({
+    queryKey: ['greeting-rsc', postId],
+    queryFn: async () => ({
+      Greeting: await createFromReadableStream(await getGreeting()),
+    }),
+    staleTime: 5 * 60 * 1000,
+  })
+
+  return <>{data.Greeting}</>
+}
+```
+
+### Router: Automatic Route-Based Caching
+
+TanStack Router is even cooler. Because it natively supports streams, RSC payloads in route loaders are, again, "just data".
+
+You can await them, stream them (yes, stream a stream), and naturally cache the result in the router cache just like any other loader output.
+
+```tsx
+const getGreeting = createServerFn().handler(async () => {
+  return renderToReadableStream(<h1>Hello from the server</h1>)
+})
+
+export const Route = createFileRoute('/hello')({
+  loader: async () => ({
+    greeting: getGreeting(),
+  }),
+  component: function HelloPage() {
+    const { greeting } = Route.useLoaderData()
+    return <>{greeting}</>
+  },
+})
+```
+
+> Navigate from `/posts/abc` to `/posts/xyz` and the loader runs again. Navigate back to `/posts/abc` and Router can serve the cached result instantly. That snappy back-button experience falls out of the same loader caching model you are already using.
+
+### CDN: Cache The GET Response Itself
+
+Because GET server functions are still just HTTP under the hood, you can also cache the response itself at the CDN layer.
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+import { renderToReadableStream } from '@tanstack/react-start/rsc'
+import { setResponseHeaders } from '@tanstack/react-start/server'
+
+const getGreeting = createServerFn({ method: 'GET' }).handler(async () => {
+  setResponseHeaders(
+    new Headers({
+      'Cache-Control': 'public, max-age=0, must-revalidate',
+      'Netlify-CDN-Cache-Control':
+        'public, max-age=300, durable, stale-while-revalidate=300',
+    }),
+  )
+
+  return renderToReadableStream(<h1>Hello from the server</h1>)
+})
+```
+
+That is the same pattern we use here for blog and docs content. Browser cache rules can stay conservative while the CDN caches the server function response much more aggressively.
+
+With Start, RSCs fit into the same data workflows you already use.
+
+## Security: One-Way Data Flow
+
+You've probably seen recent CVEs around RSC stacks.
+
+We intentionally do not support `'use server'` actions, both because of existing attack vectors and because they can create highly implicit network boundaries.
+
+TanStack Start requires explicit RPCs via `createServerFn`. The client-server boundary is deliberate, with hardened serialization, validation, and middleware semantics that encourage treating all user input as untrusted by default.
+
+This keeps the attack surface smaller because the communication pattern is explicit. Still treat server functions like any API surface: authenticate, validate, and keep dependencies patched.
+
+## The Full Spectrum
+
+With RSCs as primitives, TanStack Start covers every frontend use case. And we mean _every_ one:
+
+- **Fully Interactive**  
+  No server components at all. Client-first, SPA-style. RSCs are an optimization you add when helpful, not a paradigm you're forced to build around. This is where most "apps" already live today.
+
+- **Hybrid**  
+  Server components for static shells, data-heavy regions, or SEO-critical content, with client components where interactivity matters. Mixed "app" and "site" projects (product + marketing) fit this especially well. In practice, this tends to help the "site" side more often than the "app" side.
+
+- **Mostly Static**  
+  Predominantly static content, parsed and rendered server-side as RSCs, but still a powerful and hydrated SPA with bits of client interactivity sprinkled in where needed (e.g. comments, search, dynamic widgets). Think blogs, docs, marketing pages.
+
+- **Fully Static**  
+  Pre-render everything at build time. Just ship HTML. You might not even need RSCs here if you never need to hydrate!
+
+**One framework. One mental model. The entire spectrum.**  
+You don't have to choose "interactive framework" or "static framework" or "RSC framework."  
+You choose patterns **per-route, per-component, per-use-case**. The architecture supports all of it. Because, again, you know what's best for your app.
+
+## What We Saw On TanStack.com
+
+We did not want to make the case with vibes, so we migrated the content-heavy parts of tanstack.com and measured it.
+
+The result was exactly what we hoped for, and also more limited than the hype would suggest.
+
+The best pages got meaningfully smaller:
+
+- **Blog post pages** dropped about **153 KB gzipped** from the client JS graph.
+- **Docs pages** dropped about **153 KB gzipped**.
+- **Docs example pages** dropped about **40 KB gzipped**.
+
+And the real-world numbers moved with them:
+
+- **`/blog/react-server-components`** went from **52 -> 74** in Lighthouse.
+  - Total Blocking Time dropped from **1,200ms -> 260ms**.
+  - Transfer size dropped from **1,101 KiB -> 785 KiB**.
+- **`/router/latest/docs/overview`** went from **78 -> 81**.
+  - Total Blocking Time dropped from **280ms -> 200ms**.
+  - Transfer size dropped from **917 KiB -> 777 KiB**.
+
+That is the point. **Heavy client work stopped shipping to the client.** Markdown parsing went away. Syntax highlighting went away. The browser got less JavaScript and did less work. As a side effect, we also got to delete the old client markdown and highlighting path instead of carrying two versions of the same rendering logic around.
+
+But RSCs are not a universal coupon code for performance. Some landing pages were basically flat, and a few were slightly worse. Pages that are already dominated by interactive UI shell do not automatically get faster just because you threaded a server component into the tree somewhere.
+
+That is the tradeoff:
+
+- **RSCs are great when the page is content-heavy, dependency-heavy, or both.** Docs, blogs, markdown pipelines, syntax highlighting, slow-changing content, SEO-heavy pages. That is the sweet spot.
+- **RSCs are less obviously useful when the page is already mostly client state and interaction.** Dashboards, builders, long-lived app sessions, and some landing pages can be flat or mixed unless you are removing real client-side work.
+
+That is why we think they matter. Not because every route should become a server component. Because when you use them where they fit, the payoff is measurable and not subtle.
+
+## Introducing Composite Components
+
+Everything above stands on its own. If all TanStack Start did was treat RSCs as fetchable, cacheable, renderable data, we would already think that was a better foundation for RSCs.
+
+But we kept pulling on one question: what if the server did not need to decide every client-shaped part of the UI at all?
+
+That led us to create something entirely new: **Composite Components**.
+
+`use client` still works the same way in TanStack Start when the server intentionally wants to render a client component. `use server` does not. Start uses explicit [Server Functions](/start/latest/docs/framework/react/guide/server-functions) instead.
+
+Composite Components are not a replacement for `use client`. They solve a similar composition problem from the opposite direction. Instead of the server deciding which client component renders where, the server can leave join points open and let the client own the tree and decide what fills them.
+
+That is the part that feels genuinely new to us.
+
+### Slots Inside One Component
+
+A Composite Component can render server UI while exposing **slots** for client content. Slots use plain React patterns you already know:
+
+- `children`
+- render props (like `renderPostActions`)
+
+Because the client owns the component tree, the components you pass into slots are regular client components. No `'use client'` directive required. The server positions them as opaque placeholders but can't inspect, clone, or transform them. That is the point: the server can ask for "something goes here" without needing to know what that something is.
+
+#### Server
+
+```tsx
+import { createCompositeComponent } from '@tanstack/react-start/rsc'
+
+const getPost = createServerFn().handler(async ({ data }) => {
+  const post = await db.posts.get(data.postId)
+
+  const src = await createCompositeComponent(
+    (props: {
+      children?: React.ReactNode
+      renderPostActions?: (data: {
+        postId: string
+        authorId: string
+      }) => React.ReactNode
+    }) => (
+      <article>
+        <h1>{post.title}</h1>
+        <p>{post.body}</p>
+
+        {/* Server renders this link directly */}
+        <Link to="/posts/$postId" params={{ postId: post.nextPostId }}>
+          Next Post
+        </Link>
+
+        {/* Slot: server requests client UI here */}
+        <footer>
+          {props.renderPostActions?.({
+            postId: post.id,
+            authorId: post.authorId,
+          })}
+        </footer>
+
+        {/* Slot: client fills this with children */}
+        {props.children}
+      </article>
+    ),
+  )
+
+  return { src }
+})
+```
+
+#### Client
+
+```tsx
+import { CompositeComponent } from '@tanstack/react-start/rsc'
+
+function PostPage({ postId }) {
+  const { data } = useSuspenseQuery({
+    queryKey: ['post', postId],
+    queryFn: () => getPost({ data: { postId } }),
+  })
+
+  return (
+    <CompositeComponent
+      src={data.src}
+      renderPostActions={({ postId, authorId }) => (
+        // Full client interactivity: hooks, state, context
+        <PostActions postId={postId} authorId={authorId} />
+      )}
+    >
+      <Comments postId={postId} />
+    </CompositeComponent>
+  )
+}
+```
+
+The server renders the `<Link>` directly and leaves join points for the client:
+
+- A `renderPostActions` slot for `<PostActions>` with server-provided arguments
+- A `children` slot for `<Comments>`
+
+Slot names are just props. `renderPostActions` is example code, not special API syntax.
+
+Since a Composite Component is still data, the client can also treat it as a building block:
+
+- Interleave multiple fragments in a new tree
+- Wrap them in client providers or layouts
+- Nest them through slots
+- Reorder or swap them based on client state
+
+Same mental model as normal React composition. The difference is that the server no longer has to decide every interesting part of the tree ahead of time.
+
+## Current Status: Experimental
+
+RSC support is experimental in TanStack Start RC and will remain experimental into early v1.
+
+**Serialization:** This release uses React's native Flight protocol. TanStack Start's usual serialization features aren't available within server components for now.
+
+**API surface:** The current helpers are stable enough to use, but expect refinements while the feature is experimental. The docs will stay current as the APIs evolve.
+
+If you hit rough edges, [open an issue](https://github.com/tanstack/router/issues) or join the [Discord](https://tlinz.com/discord).
+
+## FAQ
+
+We get questions. Here are answers.
+
+### How does this compare to Next.js App Router?
+
+Next.js App Router is server-first: your component tree lives on the server by default, and you opt into client interactivity with `'use client'`.
+
+TanStack Start is **isomorphic-first**: your tree lives wherever makes sense. At the base level, RSC output can be fetched, cached, and rendered where it makes sense instead of owning the whole tree. When you want to go further, Composite Components let the client assemble the final tree instead of just accepting a server-owned one.
+
+### Can I use this with Next.js or Remix?
+
+Not directly—TanStack Start is its own framework. But if you use TanStack Query or Router already, the mental model transfers.
+
+### Do I have to use RSCs?
+
+Nope. RSCs are completely opt-in. You can build fully client-side routes (including `ssr: false`), use traditional SSR without server components, or go fully static.
+
+They are another tool in the box, not the new mandatory center of gravity.
+
+### Where should I look for the full technical docs?
+
+The [Server Components docs](/start/latest/docs/framework/react/guide/server-components). They cover setup, helper APIs, examples, constraints, and the low-level details this post intentionally skips.
+
+### What about security?
+
+See the [Security: One-Way Data Flow](#security-one-way-data-flow) section above. The short version: TanStack Start's architecture doesn't parse Flight data from the client, so recent CVEs affecting other RSC frameworks don't apply here.
+
+---
+
+## Your RSCs, Your Way
+
+We started this post with a simple idea: you know what's best for your application architecture. That is why we built TanStack Start's RSC model to stay flexible instead of prescriptive.
+
+Too much of the ecosystem treats RSCs like they need to become your app architecture. We think they work better as a primitive. And when you want to go further, Composite Components open up a composition model that most RSC systems do not even try to offer. Want a fully interactive SPA? Go for it. Want to sprinkle in server components for heavy lifting? Easy. Want to go full static? That works too. The architecture supports all of it because _your_ app isn't one-size-fits-all, and your framework shouldn't be either.
+
+TanStack Start's RSC model is available now as an experimental feature. We're excited to see what you build with it.
+
+- [Server Components Docs](/start/latest/docs/framework/react/guide/server-components)
+- [GitHub](https://github.com/tanstack/router)
+- [Discord](https://tlinz.com/discord)
+
+Let's build something amazing together.
diff --git a/src/blog/removing-third-party-ads.md b/src/blog/removing-third-party-ads.md
new file mode 100644
index 000000000..5b8576993
--- /dev/null
+++ b/src/blog/removing-third-party-ads.md
@@ -0,0 +1,166 @@
+---
+title: 'We Removed 3rd Party Ads from TanStack.com'
+published: 2026-03-24
+excerpt: Cutting ad-tech and tracking overhead turned a pathological request graph into something sane again, and made the remaining first-party performance work finally obvious.
+authors:
+  - Tanner Linsley
+---
+
+![We Removed Third-Party Ads. tanstack.com Got Faster.](/blog-assets/removing-third-party-ads/header.jpg)
+
+For a long time, third-party ads on tanstack.com sat in an uncomfortable category for me: useful, but increasingly hard to justify.
+
+They helped fund the work. That part was real. When you are trying to run a serious open-source business without paywalls, VC, or licensing games, you do not casually throw away revenue. And ad revenue has a dangerous quality to it: it can feel free. Drop in the scripts, let the machinery run, and money shows up.
+
+What changed is that our partnership revenue finally reached the point where the ROI made sense to let the ad stack go. We had another engine for sustainability. That gave us room to stop optimizing for money that felt easy and start optimizing harder for product quality.
+
+But the cost was real too. More third-party JavaScript, more request fanout, more main-thread contention, more tracking surface area, and a worse experience for people who were just trying to read docs. The site was carrying around a small ad-tech zoo, and every optimization pass kept running into the same truth: a lot of the slowness was not ours.
+
+At some point you have to decide what business you are actually in. We're in the business of making the web feel faster, simpler, and more reliable. So we made the call to remove third-party ads from tanstack.com. Not reduce them. Not defer them. Remove them.
+
+We kept the ad real estate, but stopped letting Publift, Fuse, and the rest of the auction stack run the page. Then we measured the before and after.
+
+For the latest pass, I reran mobile Lighthouse against just three pages on the old site and the current site:
+
+- `/`
+- `/query`
+- `/query/latest/docs/framework/react/guides/queries`
+
+## The Before and After
+
+> I am not presenting these as triumphant final numbers. They are not. There is still a lot of work left to do, especially on the docs side. But this post is about the changes we made and what those changes bought us, not pretending the work is finished.
+
+Across the three production pages I care most about, the current site now lands between **51.5** and **80** on two-run mobile averages. That is still not amazing or perfect, but it is a very different place than the old site.
+
+The homepage is the cleanest place to start.
+
+| Metric           | Old homepage | Current homepage |
+| ---------------- | -----------: | ---------------: |
+| Lighthouse score |       **37** |           **80** |
+| FCP              |         4.5s |             3.0s |
+| LCP              |         6.8s |             3.9s |
+| TBT              |      1,370ms |            171ms |
+| TTI              |        34.3s |             5.4s |
+| Script transfer  |     1.95 MiB |          547 KiB |
+| Total transfer   |     13.1 MiB |          830 KiB |
+| Requests         |          103 |               61 |
+| Domains          |           17 |                3 |
+
+That alone would have been a worthwhile cleanup.
+
+The biggest win after that was the Query landing page. The old `/query` run was a disaster. The current `/query/latest` page is not perfect, but it is finally behaving like a real product page instead of an out-of-control dependency graph.
+
+| Metric           | Old `/query` | Current `/query/latest` |
+| ---------------- | -----------: | ----------------------: |
+| Lighthouse score |       **31** |                **78.5** |
+| FCP              |         3.9s |                    2.9s |
+| LCP              |         7.1s |                    4.5s |
+| TBT              |      2,110ms |                    66ms |
+| TTI              |        47.6s |                    5.3s |
+| Script transfer  |     5.04 MiB |                 532 KiB |
+| Total transfer   |     93.5 MiB |                 676 KiB |
+| Requests         |          718 |                      60 |
+| Domains          |           37 |                       5 |
+
+That is the kind of improvement that changes how a page feels, not just how a benchmark reads.
+
+But the docs page is the right place to look if you want to understand the work that is still left.
+
+| Metric           | Old docs page | Current docs page |
+| ---------------- | ------------: | ----------------: |
+| Lighthouse score |        **32** |          **51.5** |
+| FCP              |          6.1s |              5.7s |
+| LCP              |         18.8s |              9.0s |
+| TBT              |       1,960ms |             374ms |
+| TTI              |         19.7s |              9.0s |
+| Script transfer  |      2.38 MiB |           1.1 MiB |
+| Total transfer   |      2.83 MiB |          1.29 MiB |
+| Requests         |           116 |                99 |
+| Domains          |            17 |                 5 |
+
+That `80` on the homepage is not a promise that every Lighthouse run will land there forever. Lighthouse has variance. I do not care about pretending otherwise. But the direction here is not subtle.
+
+It is also worth saying plainly: these numbers are not the ceiling of what [TanStack Start](/start) can do. TanStack Start is extremely fast and lightweight. If anything, this post is about us getting tanstack.com closer to being the kind of showcase it should already be. This is a stepping stone, not the limit.
+
+## What Removing the Ad Stack Actually Bought Us
+
+This was not just a Lighthouse-number cleanup. It simplified the page. The homepage now loads less JavaScript, talks to fewer systems, and does less work before it becomes useful.
+
+And yes, the ad-heavy version could get absurd. In the latest rerun, the old homepage still pushed more than **13 MiB**. The old `/query` result was much worse: **93.5 MiB** total transfer and **718** requests. That is not a healthy page. That is a page losing control of its own dependency graph.
+
+And more importantly, the page stopped pulling in a bunch of third-party ad infrastructure:
+
+- `cdn.fuseplatform.net`
+- `securepubads.g.doubleclick.net`
+- `c.amazon-adsystem.com`
+- `config.aps.amazon-adsystem.com`
+- `cdn.id5-sync.com`
+- `cdn.confiant-integrations.net`
+- `metrics.rapidedge.io`
+
+Those are not harmless little tags. They bring auctions, identity sync, dependency chains, and whatever surprises their vendors decide to ship next.
+
+After the change, the remaining third-party footprint on the homepage is much narrower. We removed GTM and Funding Choices too, so at this point it is mostly direct analytics and monitoring:
+
+- Google Analytics
+- Sentry
+
+That is still not free, but it is a much smaller and more understandable trade.
+
+## Bundle Size, JavaScript, and Cookies
+
+Removing the ad stack did not fix everything by itself. We also kept doing normal performance work: trimming homepage code, deferring non-critical work, and cutting font payload. But removing ads was one of the cleanest wins because it improved multiple things at once:
+
+- less JavaScript loaded
+- fewer third-party origins
+- fewer chained requests
+- less main-thread contention
+- smaller cookie and privacy surface area
+
+That last one matters more than people admit. Even when consent tooling is present, an ad-tech stack tends to expand the number of systems touching identity, storage, and page lifecycle. Killing that whole class of dependencies is cleaner than trying to politely optimize it.
+
+## What We Do Instead Now
+
+We still have promotional real estate on the site, but now it is ours. That means TanStack products, our own announcements, and carefully chosen partnerships that we can serve directly without dragging in an auction waterfall. If something shows up on tanstack.com, it should earn its place.
+
+No mystery JavaScript. No third-party ad network stack. No performance tax disguised as monetization.
+
+## What Still Needs Work
+
+This is not the end of the performance story. It is the point where the remaining work becomes more honest.
+
+The homepage is now in good shape. The Query landing page is much healthier too. The docs pages are where the remaining weight is concentrated.
+
+In our latest production mobile checks, the averages looked like this:
+
+- homepage: **80**
+- Query landing page: **78.5**
+- Query docs page: **51.5**
+
+That gap matters. And the reason is not mysterious.
+
+Right now, too much of our docs rendering pipeline still ends up in the client. On the docs page we measured about **1.1 MiB** of script transfer, and about **358 KiB** of that is clearly tied to syntax highlighting alone: Shiki, its WebAssembly payload, themes, and language chunks.
+
+The markdown side is not fully out of the client either. Our docs component still renders markdown in React on the client path, and the markdown processor stack also shows up in client chunks. That means the browser is still paying for work that should mostly be done before hydration ever starts.
+
+That is exactly why I am excited about React Server Components here. And this is where a lot of people talk past each other.
+
+RSCs are not magic. They are just a good fit when you are optimizing for the right thing.
+
+In our case, the docs are mostly content at the end of a markdown pipeline that rarely changes. We care a lot about fast page loads, content retrieval, mobile devices, and shorter sessions. In that world, it makes perfect sense to do the markdown rendering and syntax highlighting on the server. The browser should get HTML, not a markdown pipeline. It should get highlighted code, not a syntax highlighter and a wasm runtime.
+
+If this were a client-heavy SPA, a dashboard, or an application where users stay in one session for a long time, the tradeoff could look different. In that case, shipping a markdown or highlighting pipeline once, paying the bundle cost, and amortizing it over the whole session can be completely reasonable, especially if it is lazy loaded.
+
+But that is not the optimization target here. Docs are not a dashboard. They are content. And for content like this, RSCs are a very good fit because they let us push the expensive pipeline work back to the server where it belongs.
+
+There will still be some client-side UI left for truly interactive bits. That is fine. But the heavy docs rendering path should not live there forever.
+
+So this ad-removal work is not the finish line. It is the cleanup pass that made the next layer of work obvious. We removed the third-party chaos first. Now we can go after the first-party rendering costs with much clearer visibility.
+
+## The Tradeoff
+
+I do not regret using ads when we needed them. They helped fund the work during an earlier stage, and I am grateful for that. But once partnership revenue crossed the right threshold, the calculus changed. Keeping the ad stack around meant saying goodbye to product quality in exchange for money that felt free.
+
+Performance is not a vanity metric for us. It is part of the product. So we made the call. The site is faster. The dependency graph is smaller. The privacy surface is smaller. The homepage feels more like ours.
+
+That is a trade I would make again.
diff --git a/src/blog/run-coding-agents-in-a-sandbox.md b/src/blog/run-coding-agents-in-a-sandbox.md
new file mode 100644
index 000000000..115237be5
--- /dev/null
+++ b/src/blog/run-coding-agents-in-a-sandbox.md
@@ -0,0 +1,162 @@
+---
+title: 'Run Any Coding Agent in a Sandbox, With One chat() Call'
+published: 2026-06-30
+excerpt: "Wiring a coding agent into your app means gluing each CLI's protocol and deciding where it safely runs. TanStack AI's new sandbox layer collapses both into one pattern, and lets you plug in any Agent Client Protocol agent with no dedicated package."
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![Run coding agents in a sandbox](/blog-assets/run-coding-agents-in-a-sandbox/header.png)
+
+Wiring a coding agent into your own app sounds simple until you actually do it. Then you hit two walls at once: every agent CLI speaks its own protocol, and every one of them wants to run somewhere it can touch a real filesystem and a shell.
+
+So you write a bespoke adapter for Claude Code. A different one for Codex. A third for whatever ships next quarter. And then you still have to answer the scary question: where does this thing run, and what can it reach while it runs?
+
+TanStack AI's new sandbox layer collapses both walls into one pattern. A coding agent runs **inside an isolated sandbox**, and its work streams straight back through the same `chat()` you already use. This post walks through how it fits together, and the part that has no equivalent anywhere else: plugging in _any_ agent that speaks the Agent Client Protocol, with no dedicated package.
+
+## The real problem: two moving parts, glued by hand
+
+A "coding agent in your app" is really two independent decisions:
+
+- **Which agent runs** - Claude Code, Codex, OpenCode, Grok Build, or something newer.
+- **Where it runs** - your laptop for dev, a container for isolation, a cloud VM or the edge for production.
+
+Most setups hard-couple those two decisions. The agent's SDK assumes a runtime, the runtime assumes an agent, and swapping either one means rewriting the integration. You end up maintaining a matrix of glue you never wanted to own.
+
+The fix is to make both decisions **independent and swappable**, behind one interface. That is exactly what the sandbox layer does.
+
+## One pattern: `chat()` + `withSandbox()`
+
+Here is a complete, runnable shape. An agent clones a repo into a Docker sandbox, fixes a bug, and streams its work back:
+
+```ts
+import { chat } from '@tanstack/ai'
+import { grokBuildText } from '@tanstack/ai-grok-build'
+import {
+  createSecrets,
+  defineSandbox,
+  defineWorkspace,
+  githubRepo,
+  withSandbox,
+} from '@tanstack/ai-sandbox'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+
+const sandbox = defineSandbox({
+  id: 'fix-the-bug',
+  provider: dockerSandbox({ image: 'node:22' }),
+  workspace: defineWorkspace({
+    source: githubRepo({ repo: 'owner/app' }),
+    setup: ['corepack enable', 'pnpm install'],
+    secrets: createSecrets({ XAI_API_KEY: process.env.XAI_API_KEY ?? '' }),
+  }),
+})
+
+const stream = chat({
+  adapter: grokBuildText('grok-build'),
+  messages,
+  middleware: [withSandbox(sandbox)],
+})
+```
+
+The harness adapter (`grokBuildText`) declares it needs a sandbox, `withSandbox()` provides one, and the agent's tool calls, file edits, and reasoning come back as the same AG-UI stream chunks any other adapter produces. Your UI does not need to know a coding agent is on the other end.
+
+Everything below is a variation on this one snippet.
+
+## Pick where it runs: the provider axis
+
+The provider owns isolation - _where_ the agent actually runs. Every provider implements the same `SandboxHandle` contract, so swapping one is a one-line change to your sandbox definition:
+
+```ts
+import { localProcessSandbox } from '@tanstack/ai-sandbox-local-process'
+import { dockerSandbox } from '@tanstack/ai-sandbox-docker'
+import { daytonaSandbox } from '@tanstack/ai-sandbox-daytona'
+import { vercelSandbox } from '@tanstack/ai-sandbox-vercel'
+
+const dev = localProcessSandbox() // your machine, fast dev loop
+const isolated = dockerSandbox({ image: 'node:22' }) // a real container boundary
+const cloud = daytonaSandbox() // managed cloud sandbox
+const microvm = vercelSandbox({ runtime: 'node24' }) // managed microVM
+```
+
+There is also a Cloudflare provider for running the agent and a live preview at the edge. The workspace, secrets, and policy you attach do not change when you swap providers - only the isolation, auth, and snapshot behavior do.
+
+## Pick which agent runs: the harness axis
+
+The harness decides _what_ runs. The first-class adapters cover the agents most people reach for:
+
+- `@tanstack/ai-grok-build` - `grokBuildText`
+- `@tanstack/ai-claude-code` - `claudeCodeText`
+- `@tanstack/ai-codex` - `codexText`
+- `@tanstack/ai-opencode` - `opencodeText`
+
+Switching agents is the other one-line change:
+
+```ts
+import { claudeCodeText } from '@tanstack/ai-claude-code'
+
+const stream = chat({
+  adapter: claudeCodeText('sonnet'),
+  messages,
+  middleware: [withSandbox(sandbox)],
+})
+```
+
+Same sandbox, same wiring, different agent. The two axes really are independent.
+
+## The part nobody else has: `acpCompatible`
+
+First-class adapters are great until the agent you want does not have one. This is where most stacks stop and you go back to writing glue.
+
+TanStack AI does not. The [Agent Client Protocol](https://agentclientprotocol.com) (ACP) is a shared JSON-RPC protocol that a growing list of coding agents already speak. `acpCompatible` turns _any_ of them into a `chat()` adapter, with no dedicated package. Think of it as the `openaiCompatible` of coding agents.
+
+```ts
+import { acpCompatible } from '@tanstack/ai-acp'
+
+const pi = acpCompatible({
+  name: 'pi',
+  command: ({ model, harnessCwd }) =>
+    `pi --acp -m ${model} --cwd ${harnessCwd}`,
+})
+
+const stream = chat({
+  adapter: pi('pi-fast'),
+  messages,
+  middleware: [withSandbox(sandbox)],
+})
+```
+
+That is the whole integration. You describe how to launch the agent's ACP server, and `acpCompatible` handles the session, permissions, tool bridging, and translation into the same AG-UI stream as every other adapter.
+
+The payoff is breadth. The [ACP agents list](https://agentclientprotocol.com/get-started/agents) already includes `gemini --acp`, Cursor, Goose, Cline, OpenHands, Qwen Code, Kimi CLI, Pi, and dozens more. Any of them drops into a sandbox with the snippet above. Like `openaiCompatible`, you can declare typed `models` and per-call `modelOptions` so the whole thing stays type-checked.
+
+## What you get for free
+
+Because every harness runs through the same sandbox layer, capabilities are shared rather than re-implemented per agent:
+
+- **Secrets** - `createSecrets()` injects values into the agent's environment at create time. They are never written to snapshots or the event log.
+- **Provisioning** - clone a repo, run setup commands, and project workspace skills (files, instructions, MCP servers) into the harness's native conventions.
+- **Streaming** - text, reasoning, and tool activity come back as standard AG-UI chunks, so existing chat UIs render an in-sandbox agent with no changes.
+- **Session resume** - thread a session id back through `modelOptions.sessionId` to continue where the agent left off.
+- **Guardrails** - permission modes (and `defineSandboxPolicy`) decide what the agent may do without prompting.
+
+## How it fits together
+
+```mermaid
+flowchart LR
+  UI["chat() in your app"] --> MW["withSandbox() middleware"]
+  MW --> SBX["Sandbox: real fs + shell"]
+  SBX --> CLI["Harness CLI: grok / claude / codex / any ACP agent"]
+  CLI -->|"ACP or stream"| TR["Translate to AG-UI chunks"]
+  TR --> UI
+```
+
+The middleware ensures the sandbox exists, the adapter spawns the agent inside it, and the agent's protocol (ACP for the compatible path, native streams for the first-class ones) is translated back into the chunks your UI already speaks.
+
+## Try it
+
+If you have ever wanted an agent to actually act on a real codebase - clone it, run the tests, edit files, hand back a diff - this is the shortest path there. Pick a provider, pick an agent (or bring your own ACP agent), and drive it with the `chat()` you already know.
+
+Read the [sandbox docs](https://tanstack.com/ai/latest/docs/sandbox/overview) to get an agent fixing a bug in a sandbox on your laptop in a few minutes, then swap the provider when you are ready to ship.
+
+One import. Any agent. Any sandbox.
diff --git a/src/blog/search-params-are-state.md b/src/blog/search-params-are-state.md
index 751147bf4..176b77c1c 100644
--- a/src/blog/search-params-are-state.md
+++ b/src/blog/search-params-are-state.md
@@ -1,6 +1,8 @@
 ---
 title: Search Params Are State
 published: 2025-06-03
+excerpt: Search params are global, serializable, and shareable — but in most apps they're hacked together with string parsing and brittle utils. They deserve to be treated as first-class state.
+library: router
 authors:
   - Tanner Linsley
 ---
diff --git a/src/blog/start-adds-rsbuild-support.md b/src/blog/start-adds-rsbuild-support.md
new file mode 100644
index 000000000..791c72f0b
--- /dev/null
+++ b/src/blog/start-adds-rsbuild-support.md
@@ -0,0 +1,56 @@
+---
+published: 2026-06-02
+authors:
+  - Manuel Schiller
+title: 'TanStack Start Adds First-Class Rsbuild Support'
+excerpt: 'TanStack Start now supports Rsbuild 2 alongside Vite, so teams can choose the build tool that best fits their stack, preferences, and infrastructure.'
+library: start
+---
+
+![React Server Components](/blog-assets/start-adds-rsbuild-support/header.jpg)
+
+TanStack Start now supports Rsbuild 2 alongside Vite, giving teams two supported build-tool paths for Start.
+
+Some teams prefer Vite. Some prefer Rsbuild because it is built on Rspack, feels familiar to teams with Webpack experience, or matches how the rest of their frontend infrastructure is organized. The new adapter makes that choice explicit: Start fits into either build tool through its plugin system.
+
+We built the adapter together with the Rsbuild and Rspack team, and some of that work fed back into Rsbuild and Rspack along the way.
+
+For a React app, the config looks like this:
+
+```ts title='rsbuild.config.ts'
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+
+export default defineConfig({
+  plugins: [pluginReact(), tanstackStart()],
+})
+```
+
+React and Solid are supported today, and because the Rsbuild work lives at Start's shared build layer, future framework adapters have the same path available to them.
+
+Rsbuild owns the build, while the framework plugin handles React or Solid and `tanstackStart()` wires Start into both the client and server builds. If you have used Start with Vite, the pattern is intentionally familiar because the Start build-tool plugins are designed to fit naturally into the toolchain you choose.
+
+## A Start path for teams using Rsbuild
+
+Some teams want to use Start with Rsbuild because they want Rspack under the hood, a Webpack-familiar model, or a build tool that matches the rest of their stack.
+
+That also matters for existing apps. A team moving to Start can keep more of its build setup in place instead of changing framework and build tool at once. One large company is already using the adapter while moving several apps from a Webpack setup to Start on Rsbuild.
+
+That path includes the full Start feature set, including React and Solid apps, Server Functions, SSR and streaming SSR, HMR, import protection, and React Server Components for React apps.
+
+## The two-adapter rule
+
+There is a pattern we keep running into at TanStack: the first adapter proves something can work, and the second adapter shows which parts actually belong in the core.
+
+TanStack Router and TanStack Start already went through this once at the UI framework layer, where adding Solid made the React assumptions easier to see and improved the shared core. Adding Rsbuild brought the same clarity to the build layer.
+
+Because the first Start build adapter was Vite, some build logic naturally grew around Vite's plugin lifecycle, and adding Rsbuild made the boundary sharper: shared Start build behavior in one place, build-tool-specific behavior in the Vite and Rsbuild adapters.
+
+## Your build tool, your choice
+
+Choosing Start should let a team keep its preferred build tool. With Vite and Rsbuild both supported, teams can use the toolchain that fits their stack while building the same kind of Start app.
+
+Teams that prefer Rsbuild, or already work in the Webpack and Rspack world, now get a native Start integration through Rsbuild's plugin system.
+
+The Rsbuild adapter is available now. Try it in a new Rsbuild project or in an existing codebase moving to Start.
diff --git a/src/blog/streaming-structured-output.md b/src/blog/streaming-structured-output.md
new file mode 100644
index 000000000..09cc76cf9
--- /dev/null
+++ b/src/blog/streaming-structured-output.md
@@ -0,0 +1,162 @@
+---
+title: 'Stop Waiting on JSON: Stream Structured Output with One Schema'
+published: 2026-05-14
+excerpt: 'Pass a Zod schema to useChat and get a typed `partial` and `final` for free. No more parsePartialJSON glue, no more onChunk wiring. TanStack AI now streams structured output end-to-end across OpenAI, OpenRouter, Grok, Groq, and Ollama.'
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![Stop Waiting on JSON](/blog-assets/streaming-structured-output/header.png)
+
+You ask an LLM for a `Person` object. You hit send. The spinner spins. Five seconds. Ten. Twenty. Somewhere on a server in Oregon, the model is happily generating tokens, and your user is staring at a loading state until the very last `}` of the JSON arrives.
+
+That UX is bad and you already know it. The fix, in theory, is "just stream it." The fix, in practice, has been writing 15 lines of glue: an `onChunk` handler, a `useState`, a `parsePartialJSON` call, a manual cast to your `Person` type. Repeat in every project. Hope you got the types right.
+
+This release kills the glue. `useChat({ outputSchema })` now gives you a typed `partial` and `final` straight from the hook. One schema. End to end.
+
+## The old shape
+
+Until now, mixing streaming with `outputSchema` in `@tanstack/ai` looked something like this on the client:
+
+```tsx
+const [partial, setPartial] = useState<Partial<Person>>({})
+const [final, setFinal] = useState<Person | null>(null)
+let raw = ''
+
+useChat({
+  connection: fetchServerSentEvents('/api/extract'),
+  onChunk: (chunk) => {
+    if (chunk.type === 'TEXT_MESSAGE_CONTENT') {
+      raw += chunk.delta
+      setPartial(parsePartialJSON(raw))
+    } else if (chunk.name === 'structured-output.complete') {
+      setFinal(chunk.value.object as Person)
+    }
+  },
+})
+```
+
+This works, but every byte of it is something you didn't want to write:
+
+- You're manually accumulating a string buffer.
+- You're calling `parsePartialJSON` yourself and hoping it tolerates whatever half-JSON the model just emitted.
+- You're casting `chunk.value.object` to `Person` with no real proof it actually matches your schema.
+- You're doing this in every component that wants a typed live preview.
+
+The schema lives on the server. The same schema would happily describe `partial` and `final` on the client. There was no reason for the client to be guessing.
+
+## The new shape
+
+Pass the schema. Get the types back.
+
+```tsx
+import { useChat } from '@tanstack/ai-react'
+import { fetchServerSentEvents } from '@tanstack/ai-client/event-client'
+import { PersonSchema } from './schemas'
+
+const { partial, final, status } = useChat({
+  connection: fetchServerSentEvents('/api/extract'),
+  outputSchema: PersonSchema,
+})
+```
+
+That's the whole thing.
+
+- `partial` is `DeepPartial<Person>` and updates on every streamed delta. The framework parses the partial JSON for you and narrows the type to whatever fields have arrived so far.
+- `final` is `Person | null`. It flips to a fully-typed `Person` the moment the model emits the structured-output completion event.
+- No `parsePartialJSON` import. No `onChunk`. No `useState`. No casts.
+
+The same hook returns the message stream you already use, so partial UI previews and chat transcripts live side-by-side without conflict.
+
+## What changed under the hood
+
+The headline is the hook, but the work that made it possible touches the whole stack.
+
+**A real type for the structured-output stream.** `chat({ outputSchema, stream: true })` now returns a `StructuredOutputStream<T>` that's a proper discriminated union: every regular `StreamChunk` plus a single tagged `StructuredOutputCompleteEvent<T>` carrying a strongly-typed `value.object`. You no longer fight `any` when you destructure or `switch` on the event.
+
+**Tagged variants for the other custom events too.** While we were in there, `ApprovalRequestedEvent` and `ToolInputAvailableEvent` became their own tagged shapes. Tool-calling flows narrow cleanly without a helper.
+
+**Per-chunk debug logging in the structured path.** The streaming structured output path now calls `logger.provider` on every chunk, matching the behavior of plain `chatStream`. Provider-level debugging is no longer a black box just because you opted into a schema.
+
+**Provider coverage.** OpenAI, OpenRouter, Grok, Groq, and Ollama (anything riding the `openai-base`) all go through the same streaming structured output pipeline. The summarize adapter got the same treatment, so structured summaries stream end-to-end too.
+
+**Framework parity.** `useChat({ outputSchema })` works in `@tanstack/ai-react`, `@tanstack/ai-vue`, `@tanstack/ai-solid`, and `@tanstack/ai-svelte`. Same return shape, same types, same behavior.
+
+## Why this is the right shape
+
+There's a temptation, when designing this kind of API, to invent a separate hook: `useStructuredChat`, `useTypedChat`, something parallel. That would have been a mistake. A schema isn't a different mode of chatting, it's just extra information the hook can use.
+
+By folding `outputSchema` into the existing `useChat`, the upgrade path from "I'm using a chat hook" to "I'm using a chat hook with typed streaming output" is _literally one prop_. Your tool wiring, your approval prompts, your transcript state, everything that was already on `useChat` still works exactly the same way. The new behavior only exists for the keys that depend on the schema.
+
+The cost of "one more hook for a slightly different case" is paid in docs, in user confusion, and in the long tail of `useFooButSometimesBar` hooks people inevitably accumulate. We'd rather not.
+
+## Try it
+
+Install the latest:
+
+```bash
+pnpm add @tanstack/ai @tanstack/ai-react @tanstack/ai-openai zod
+```
+
+Define the schema once. Use it on both sides.
+
+```ts
+// schemas.ts
+import { z } from 'zod'
+
+export const PersonSchema = z.object({
+  name: z.string(),
+  age: z.number(),
+  email: z.string().email(),
+})
+```
+
+On the server, hand the schema to `chat` and stream the response as Server-Sent Events:
+
+```ts
+// app/api/extract/route.ts
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai/adapters'
+import { PersonSchema } from './schemas'
+
+export async function POST(req: Request) {
+  const { messages } = await req.json()
+
+  const stream = chat({
+    adapter: openaiText('gpt-5.2'),
+    messages,
+    outputSchema: PersonSchema,
+    stream: true,
+  })
+
+  return toServerSentEventsResponse(stream)
+}
+```
+
+On the client, point `useChat` at that endpoint and pass the same schema:
+
+```tsx
+// app/extract/page.tsx
+import { useChat } from '@tanstack/ai-react'
+import { fetchServerSentEvents } from '@tanstack/ai-client/event-client'
+import { PersonSchema } from './schemas'
+
+const { partial, final } = useChat({
+  connection: fetchServerSentEvents('/api/extract'),
+  outputSchema: PersonSchema,
+})
+
+return (
+  <form>
+    <input value={partial.name ?? ''} readOnly />
+    <input value={partial.age ?? ''} readOnly />
+    <input value={partial.email ?? ''} readOnly />
+    {final && <p>Done. Extracted a fully-validated Person.</p>}
+  </form>
+)
+```
+
+Read the full guide: [tanstack.com/ai/docs/chat/structured-outputs](https://tanstack.com/ai/docs/chat/structured-outputs).
+
+Drop the glue. Pass the schema. Ship the feature.
diff --git a/src/blog/tanstack-2-years.md b/src/blog/tanstack-2-years.md
index d963af646..f344f4dbd 100644
--- a/src/blog/tanstack-2-years.md
+++ b/src/blog/tanstack-2-years.md
@@ -1,6 +1,7 @@
 ---
 title: The State of TanStack, Two Years of Full-Time OSS
 published: 2025-11-24
+excerpt: Two years ago I went all in on TanStack. No consulting, no safety nets. What started as a handful of libraries has grown into a real ecosystem powering millions of developers.
 authors:
   - Tanner Linsley
 ---
diff --git a/src/blog/tanstack-ai-alpha-2.md b/src/blog/tanstack-ai-alpha-2.md
index 4aa8da895..f779deb1c 100644
--- a/src/blog/tanstack-ai-alpha-2.md
+++ b/src/blog/tanstack-ai-alpha-2.md
@@ -1,6 +1,8 @@
 ---
 title: 'TanStack AI Alpha 2: Every Modality, Better APIs, Smaller Bundles'
 published: 2025-12-19
+excerpt: Two weeks since the first alpha and we've prototyped through 5-6 internal architectures. Alpha 2 brings every modality, better APIs, and smaller bundles.
+library: ai
 authors:
   - Alem Tuzlak
   - Jack Herrington
diff --git a/src/blog/tanstack-ai-alpha-your-ai-your-way.md b/src/blog/tanstack-ai-alpha-your-ai-your-way.md
index 1821a3e1b..7b75d45b4 100644
--- a/src/blog/tanstack-ai-alpha-your-ai-your-way.md
+++ b/src/blog/tanstack-ai-alpha-your-ai-your-way.md
@@ -1,6 +1,8 @@
 ---
 title: 'TanStack AI Alpha: Your AI, Your Way'
 published: 2025-12-04
+excerpt: The current AI landscape has a problem — pick a framework, pick a cloud provider, and suddenly you're locked in. TanStack AI is a framework-agnostic toolkit built for developers who want control.
+library: ai
 authors:
   - Jack Herrington
   - Alem Tuzlak
diff --git a/src/blog/tanstack-ai-audio-generation.md b/src/blog/tanstack-ai-audio-generation.md
new file mode 100644
index 000000000..78c84becf
--- /dev/null
+++ b/src/blog/tanstack-ai-audio-generation.md
@@ -0,0 +1,122 @@
+---
+title: 'TanStack AI Just Learned to Compose Music'
+published: 2026-04-24
+excerpt: TanStack AI adds a new generateAudio activity with streaming, plus fal and Gemini Lyria adapters for music, sound effects, text-to-speech, and transcription. One typed API, any provider.
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![TanStack AI Just Learned to Compose Music](/blog-assets/tanstack-ai-audio-generation/header.png)
+
+The AI audio ecosystem is a mess. Gemini's Lyria wants a natural-language prompt and returns raw PCM you have to wrap in a RIFF header yourself. Fal hosts dozens of audio models where one wants `music_length_ms` in milliseconds, the next wants `seconds_total`, and most want plain `duration`. ElevenLabs has its own shape. Whisper has another. Every provider disagrees on whether you get a URL, a base64 blob, or a raw buffer.
+
+If you are shipping an AI product that needs music, sound effects, speech, or transcription, you end up writing the same boring glue code five times.
+
+**TanStack AI just removed that glue.** The latest release lands a full audio stack: a new `generateAudio` activity, streaming support, fal and Gemini Lyria adapters, and framework hooks for React, Solid, Vue, and Svelte. One typed API, any provider.
+
+Here is what shipped and why you should care.
+
+## One activity, any audio model
+
+The new `generateAudio()` activity sits alongside `generateImage`, `generateSpeech`, `generateVideo`, and `generateTranscription` in `@tanstack/ai`. It takes a text prompt, dispatches to whatever adapter you hand it, and returns a `GeneratedAudio` object with exactly one of `url` or `b64Json`.
+
+```typescript
+import { generateAudio } from '@tanstack/ai'
+import { geminiAudio } from '@tanstack/ai-gemini/adapters'
+
+const adapter = geminiAudio('lyria-3-pro-preview')
+
+const result = await generateAudio({
+  adapter,
+  prompt: 'A cinematic orchestral piece with a rising string motif',
+})
+
+// result.audio is { url: string } | { b64Json: string } — exactly one, enforced by the type
+```
+
+Swap `geminiAudio` for `falAudio` and the exact same call generates music through MiniMax, DiffRhythm, Stable Audio 2.5, or any of the other models in fal's catalog. The adapter translates per-model details (like fal's `music_length_ms` vs `seconds_total` vs `duration` naming) so your app code never sees them.
+
+## Streaming, because audio generation takes seconds
+
+Music and SFX generation is slow. Lyria 3 Pro takes several seconds. Stable Audio takes longer. If you are building a UI, blocking the request the whole time is a bad experience.
+
+`generateAudio` now supports `stream: true`, returning an `AsyncIterable<StreamChunk>` you can pipe straight through `toServerSentEventsResponse()`:
+
+```typescript
+export async function POST(req: Request) {
+  const { prompt } = await req.json()
+
+  const stream = await generateAudio({
+    adapter: falAudio('fal-ai/minimax-music/v2.6'),
+    prompt,
+    stream: true,
+  })
+
+  return toServerSentEventsResponse(stream)
+}
+```
+
+The client receives progress events and the final audio over a single SSE connection, the same transport model already used by `generateImage` and `generateVideo`. No new infrastructure, no special-case code paths.
+
+## Framework hooks that feel like the others
+
+Every framework integration gets a new hook matching the existing media-hook shape:
+
+- `@tanstack/ai-react`: `useGenerateAudio`
+- `@tanstack/ai-solid`: `useGenerateAudio`
+- `@tanstack/ai-vue`: `useGenerateAudio`
+- `@tanstack/ai-svelte`: `createGenerateAudio`
+
+The API is identical to `useGenerateImage` and friends:
+
+```tsx
+import { useGenerateAudio } from '@tanstack/ai-react'
+
+function MusicGen() {
+  const { generate, result, isLoading, error, stop, reset } = useGenerateAudio({
+    connection,
+  })
+
+  return (
+    <>
+      <button onClick={() => generate({ prompt: 'Lo-fi hip-hop beat' })}>
+        Generate
+      </button>
+      {isLoading && <button onClick={stop}>Stop</button>}
+      {result?.audio.url && <audio src={result.audio.url} controls />}
+    </>
+  )
+}
+```
+
+Both `connection` (SSE) and `fetcher` (plain HTTP) transports are supported, so this works with TanStack Start, Next.js, Remix, or any backend you already have.
+
+## Providers that shipped in this release
+
+**Gemini** gets two new entry points:
+
+- `geminiAudio()` for Lyria 3 Pro and Lyria 3 Clip music generation. Lyria Pro reads duration from the natural-language prompt; Clip is fixed at 30 seconds and returns MP3.
+- A new `gemini-3.1-flash-tts-preview` TTS model with 70+ languages, 200+ audio tags, and multi-speaker dialogue via `multiSpeakerVoiceConfig`.
+
+**Fal** gets three tree-shakeable adapters:
+
+- `falSpeech()` for TTS via `fal-ai/gemini-3.1-flash-tts`, `fal-ai/minimax/speech-2.6-hd`, and the `fal-ai/kokoro/*` family.
+- `falTranscription()` for STT via `fal-ai/whisper`, `fal-ai/wizper`, and `fal-ai/speech-to-text/turbo`.
+- `falAudio()` for music, SFX, and the wider fal catalog: audio-to-audio, voice conversion and cloning, enhancement, separation, isolation, understanding, and merge.
+
+All four follow the tree-shakeable subpath-import pattern, so your bundle only grows by the adapters you actually import.
+
+## Try it
+
+The new activity is live in `@tanstack/ai` and the two provider packages:
+
+```bash
+pnpm add @tanstack/ai @tanstack/ai-fal
+# or
+pnpm add @tanstack/ai @tanstack/ai-gemini
+```
+
+Then open the [audio generation guide](/ai/docs/media/audio-generation) for the full adapter matrix, or pull the `ts-react-chat` example to see working TTS and transcription tabs plus a `/generations/audio` route covering Lyria and fal side by side.
+
+**Star [TanStack AI on GitHub](https://github.com/TanStack/ai)** if you want to see where this goes next.
diff --git a/src/blog/tanstack-ai-beta.md b/src/blog/tanstack-ai-beta.md
new file mode 100644
index 000000000..60c2d44ce
--- /dev/null
+++ b/src/blog/tanstack-ai-beta.md
@@ -0,0 +1,163 @@
+---
+title: 'TanStack AI Beta: The Switzerland of AI Tooling Grows Up'
+published: 2026-06-09
+excerpt: Six months ago we shipped the alpha with a promise - a framework-agnostic, provider-agnostic AI toolkit with no lock-in, ever. Today TanStack AI hits Beta with every modality, a hardened protocol, middleware, orchestration, host-side MCP, and 265 E2E tests running across 10 providers on every PR.
+library: ai
+authors:
+  - Tom Beckenham
+---
+
+![TanStack AI Beta](/blog-assets/tanstack-ai-beta/header.png)
+
+**The TanStack team is thrilled to announce the Beta release of [TanStack AI](/ai), the framework-agnostic, provider-agnostic AI toolkit built for developers who want control over their stack.**
+
+When we [shipped the alpha back in December](/blog/tanstack-ai-alpha-your-ai-your-way), we made a promise. No vendor lock-in. No platform to migrate to. No framework dictating how you build. Just honest open source tooling - the Switzerland of AI - that works with the stack you already have.
+
+Six months and a long list of releases later, that promise still holds. But the toolkit behind it has grown up. What was a handful of adapters and an early protocol is now a complete, multi-modal, multi-framework AI platform.
+
+This is the Beta.
+
+## What "Beta" Means
+
+The alpha was a bet on an architecture. We told you there would be bugs, rough edges, and APIs that might change, and there were. We prototyped through [an `ai()` function we had to kill](/blog/tanstack-ai-the-ai-function-postmortem), [re-architected the adapters](/blog/tanstack-ai-why-we-split-the-adapters), and [rebuilt the modality story twice](/blog/tanstack-ai-alpha-2) before we were happy.
+
+Beta means the bet paid off. The core APIs are stable. The protocol is documented and versioned. The surface area is broad enough to build a real product on, and the testing infrastructure is strong enough that we trust it. We're no longer asking you to take a chance on a prototype. We're asking you to build with us.
+
+## Every Modality, One API
+
+The biggest change since alpha is breadth. TanStack AI is no longer a text-generation library with extras bolted on. Every major modality is a first-class, typed activity, and every provider ships small, capability-split adapters (`openaiText`, `geminiAudio`) instead of one monolith:
+
+- **Text and [streaming structured data](/blog/streaming-structured-output)**: stream typed objects as they're generated, not just tokens, so your UI can render structured results progressively — and [keep them across turns](/blog/multi-turn-structured-output).
+- **[Tool calls](/ai/docs/tools/tools)**: defined once, with isolated [server](/ai/docs/tools/server-tools) and [client](/ai/docs/tools/client-tools) implementations and type safety that holds across the whole app.
+- **[Summarization](/ai/docs/reference/functions/summarize)** out of the box.
+- **[Image generation](/ai/docs/media/image-generation)** across providers.
+- **[Video generation](/ai/docs/media/video-generation)** through the same typed activity model: swap the provider, keep your code.
+- **[Audio generation](/blog/tanstack-ai-audio-generation)**: music, sound effects, text-to-speech, and transcription via a streaming `generateAudio` activity, with fal and Gemini Lyria adapters.
+- **[Realtime voice chat](/blog/tanstack-ai-realtime-voice-chat)**: real voice, real time, with OpenAI Realtime over WebRTC and ElevenLabs over WebSocket, all behind one provider-agnostic architecture.
+
+Here's what that looks like in practice. A chat endpoint on the server:
+
+```ts
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+export async function POST(request: Request) {
+  const { messages } = await request.json()
+
+  const stream = chat({
+    adapter: openaiText('gpt-5.2'),
+    messages,
+  })
+
+  return toServerSentEventsResponse(stream)
+}
+```
+
+And the client, in React:
+
+```tsx
+import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'
+
+function Chat() {
+  const { messages, sendMessage, isLoading } = useChat({
+    connection: fetchServerSentEvents('/api/chat'),
+  })
+  // render messages however you like
+}
+```
+
+And `useChat` is just the start of the hook family. Every modality gets one — `useGeneration` for streaming structured output, `useGenerateImage`, `useGenerateAudio`, `useGenerateSpeech`, `useTranscription`, `useSummarize`, `useGenerateVideo`, and `useRealtimeChat` — all with the same shape, all wired into devtools out of the box.
+
+Switching providers is the import and the adapter. Nothing else moves:
+
+```diff
+- import { openaiText } from '@tanstack/ai-openai'
++ import { anthropicText } from '@tanstack/ai-anthropic'
+
+  const stream = chat({
+-   adapter: openaiText('gpt-5.2'),
++   adapter: anthropicText('claude-opus-4-6'),
+    messages,
+  })
+```
+
+And every other modality follows the same shape — an adapter in, a typed result out:
+
+```ts
+import { generateAudio } from '@tanstack/ai'
+import { geminiAudio } from '@tanstack/ai-gemini'
+
+const result = await generateAudio({
+  adapter: geminiAudio('lyria-3-pro-preview'),
+  prompt: 'A cinematic orchestral piece with a rising string motif',
+})
+```
+
+Switch the modality, switch the provider, and the shape of your code stays the same.
+
+## Per-Model Type Safety That Actually Matters
+
+Every provider has different options. Every model supports different modalities and different native tools. TanStack AI types `modelOptions` on a per-model basis, so your IDE knows exactly what each model can do.
+
+That extends to provider tools: native capabilities like web search and code execution that some models support and others silently ignore. As of Beta, [those pairings are gated at the type level](/blog/type-safe-provider-tools-tanstack-ai). Wire an incompatible tool to a model and TypeScript tells you on the line where you pass it, instead of letting it fail quietly in production.
+
+## Composing Real Systems
+
+A toy chat endpoint is easy. A production one accretes logging, content guarding, caching, and tracing until it's an unmaintainable monster. Beta ships the pieces that keep that complexity in check:
+
+- **[Middleware](/blog/tanstack-ai-middleware)**: hook into every stage of the `chat()` lifecycle to observe, transform, or short-circuit behavior — plus built-in middleware for tool-result caching, content redaction, and OpenTelemetry tracing.
+- **[Lazy tool discovery](/blog/tanstack-ai-lazy-tool-discovery)**: stop spending tokens (and model accuracy) on tool definitions the model doesn't need yet.
+- **[Code Mode](/blog/tanstack-ai-code-mode)**: let the LLM write and execute TypeScript in a secure sandbox, composing your tools with loops, conditionals, and `Promise.all` in a single shot instead of one round-trip per call.
+- **[Host-side MCP](/blog/your-mcp-your-way)**: connect a single Model Context Protocol server or a whole pool, with managed or manual lifecycle and the type-safety level that fits your app, from zero-config discovery to fully generated end-to-end types.
+- **[Experimental orchestration](/blog/tanstack-ai-orchestration)**: generator-based workflows, typed agent calls, human-in-the-loop approvals, SSE streaming, AG-UI events, and React hooks for building multi-step agentic systems.
+
+## TypeScript First, On An Open Protocol
+
+TanStack AI is TypeScript-first. The toolkit, the per-model type safety, and everything you've seen in this post is built for TypeScript end to end. But the thing that makes it all portable is the protocol: we've documented exactly how the server and client communicate, and in Beta it's stable. Speak it over any transport (HTTP, WebSockets, RPC) through a connection adapter, and our clients work with your backend.
+
+**AG-UI is at its core.** The events flowing across that connection are AG-UI events, not a bespoke format with a compatibility shim on top. Because the standard is built in from the ground up, TanStack AI interoperates with the wider agent ecosystem out of the box: AG-UI-compliant agent frameworks like Microsoft Agent Framework, Agno, LangGraph, CrewAI, Mastra, Pydantic AI, and LlamaIndex can all sit behind a TanStack AI frontend. And because AG-UI is language-agnostic, that backend doesn't have to be TypeScript at all — point your client at an agent server written in Kotlin, Rust, .NET, Python, or anything else that speaks the protocol. It's the same no-lock-in principle, applied to the wire.
+
+On the client side, vanilla JS, React, Solid, Vue, Svelte, and Preact are all ready.
+
+## Debugging You Can Actually See
+
+AI pipelines are notoriously opaque: a missing chunk here, a middleware that didn't fire there, a tool call with mystery arguments. TanStack AI ships two answers:
+
+- **[Pluggable debug logging](/blog/debug-logging-for-tanstack-ai)**: flip one flag and the whole pipeline prints itself, with per-category toggles across every activity and adapter.
+- **Isomorphic devtools**: a full panel, built on [TanStack Devtools](/devtools), that shows you what the LLM is doing on both sides of the connection.
+
+![TanStack AI Devtools showing a live useChat hook: the conversation timeline, tool and token metrics, and the user view side by side](/blog-assets/tanstack-ai-beta/devtools.png)
+
+Debug mode is one line:
+
+```ts
+const stream = chat({
+  adapter: openaiText('gpt-5.2'),
+  messages,
+  debug: true, // or pick categories: { provider: true, middleware: true, tools: true }
+})
+```
+
+Raw provider chunks, middleware hook inputs and outputs, tool execution, agent-loop iterations — each its own toggle, with a pluggable logger if `console` isn't where you want it to go.
+
+## Tested Like We Mean It
+
+Confidence at Beta isn't a vibe. It's 265 deterministic end-to-end tests running across 10 LLM providers on every pull request — up from 147 tests and 7 providers when we [wrote about how we test](/blog/how-we-test-tanstack-ai-across-7-providers). Provider behavior drifts, models get deprecated, and APIs change underneath you. Our test suite catches it before you do.
+
+## Still Honest, Still Open Source
+
+None of this changes the original deal. There's no service to buy. No platform to migrate to. No vendor lock-in waiting around the corner, and there never will be. TanStack AI is open source, built by the same small, volunteer teams that have shipped framework-agnostic developer tools for years.
+
+And if you're weighing it against the Vercel AI SDK, we keep an honest, feature-by-feature [comparison in the docs](/ai/docs/comparison/vercel-ai-sdk) — including the places they're ahead.
+
+We're still taking a lot on, and we still want your help. Build adapters. File the bug you just hit. Tell us what's missing. Beta is the most stable TanStack AI has ever been, but it's not the finish line. It's the version we're confident enough to ask you to build on.
+
+So go build something. It starts with one install:
+
+```bash
+pnpm add @tanstack/ai @tanstack/ai-react @tanstack/ai-openai
+```
+
+And if OpenAI isn't your provider, that last package is the only thing you'd change — `ai-anthropic`, `ai-gemini`, `ai-groq`, `ai-ollama`, `ai-openrouter`, take your pick.
+
+[Get started with TanStack AI](/ai), and tell us what you ship.
diff --git a/src/blog/tanstack-ai-code-mode.md b/src/blog/tanstack-ai-code-mode.md
new file mode 100644
index 000000000..564bd9ee1
--- /dev/null
+++ b/src/blog/tanstack-ai-code-mode.md
@@ -0,0 +1,278 @@
+---
+title: 'Code Mode: Let Your AI Write Programs, Not Just Call Tools'
+published: 2026-04-08
+excerpt: One tool call at a time is the bottleneck. TanStack AI Code Mode lets the LLM write and execute TypeScript programs in secure sandboxes, composing your tools with loops, conditionals, and Promise.all in a single shot.
+library: ai
+authors:
+  - Jack Herrington
+  - Alem Tuzlak
+  - Tanner Linsley
+---
+
+![TanStack AI Code Mode](/blog-assets/tanstack-ai-code-mode/header.jpg)
+
+There are three things we know about LLMs and tools:
+
+1. **Tool calling is slow and expensive.** Every tool call means a round-trip. The calls themselves, their parameters, and their return values all bloat the context window, which bloats the token count on every subsequent request. Even when calls can be parallelized, the overhead compounds.
+2. **LLMs are hilariously bad at math.** Ask a model to sum a column of numbers from three API responses and you'll get a confident, but probably incorrect answer.
+3. **Frontier LLMs are very good at writing TypeScript.** They have an enormous amount of real-world TypeScript in their training data. They know how to `Promise.all`, `.reduce()`, `.filter()`, and handle async control flow.
+
+Put these together and they point in one direction: let the LLM do what it's good at (write TypeScript), and let a runtime handle what it's bad at (execution, math, orchestration).
+
+That's exactly what **Code Mode** is. Code mode gives the LLM an `execute_typescript` tool. Instead of orchestrating tools one at a time, the model writes a short TypeScript program that composes your tools with loops, conditionals, and data transformations, then executes it in a secure sandbox. One call in, one structured result out.
+
+If you've tried to connect an LLM to your APIs, you know the pain. The model has no concept of N+1 problems. It will happily fetch a list of 50 users, then make 50 individual requests to get each user's profile. It doesn't batch. It doesn't parallelize. It doesn't know how to aggregate results without burning a reasoning step per intermediate value.
+
+Code Mode hands those problems to TypeScript. The model writes `Promise.all` to batch API calls. It uses `.reduce()` to aggregate instead of asking the LLM to reason about each value. Math happens in the JavaScript runtime, not in the model's token prediction. **The N+1 problem disappears. The arithmetic is correct. Every time.**
+
+This is a game changer for any application that wants to put an LLM in front of real APIs.
+
+## Prior Art: Why Code Execution Matters
+
+We're not the first to recognize this pattern.
+
+**Anthropic's computer use and tool-use research** has shown that LLMs are dramatically more capable when they can write and execute code rather than being limited to predefined tool signatures. Their work on Claude's analysis tool demonstrated that giving models a code sandbox reduces error rates and increases task completion on complex multi-step problems.
+
+**Cloudflare coined the term "Code Mode"** in [their September 2025 blog post](https://blog.cloudflare.com/code-mode/) by Kenton Varda and Sunil Pai. Their insight was simple: LLMs are better at writing code to call APIs than at calling APIs directly. Sunil Pai has been a driving force in this space, pushing the idea that agents should generate and execute TypeScript against typed SDKs rather than making individual tool calls. Cloudflare's Dynamic Workers pioneered running that untrusted code at the edge in V8 isolates, and their execution model (send code to an isolated runtime, bridge specific capabilities in, get a result back) is exactly what we adopted. Code Mode supports Cloudflare Workers as a first-class isolate driver.
+
+What we've done is turn this pattern into a composable, model-agnostic tool that plugs into any TanStack AI chat pipeline. Code Mode works with any model that can write TypeScript and reason well. Use it with OpenAI, Anthropic, Gemini, Groq, xAI, Ollama, or any other provider through our adapter system. You don't need to build the sandbox infrastructure, the type stub generation, or the system prompt engineering. Define your tools, pick a driver, pick your model, and the LLM gets a TypeScript sandbox with typed access to your entire tool surface.
+
+## How It Works
+
+Code Mode is modeled as a single tool called `execute_typescript`. When the LLM decides it needs to compose multiple operations, it writes TypeScript code and passes it to this tool. The code runs inside an isolate: a sandboxed environment with no access to the host file system, network, or process.
+
+Your existing tools become `external_*` functions inside the sandbox. If you have a `fetchWeather` tool and a `searchProducts` tool, the sandbox sees `external_fetchWeather()` and `external_searchProducts()`, fully typed, fully async, fully isolated.
+
+### The N+1 example
+
+Consider an e-commerce app where the user asks: _"What are the top 5 best-selling products, and what's the average rating for each?"_
+
+Without Code Mode, the LLM calls `getTopProducts`, waits for the result, then calls `getProductRatings` five separate times (one per product), waits for each result, then tries to compute averages in its head. That's seven tool calls, seven round-trips, and the averages are likely wrong because the model is doing mental math on floating-point numbers.
+
+With Code Mode, the LLM writes this:
+
+```typescript
+const top = await external_getTopProducts({ limit: 5 })
+
+const ratings = await Promise.all(
+  top.products.map((p) => external_getProductRatings({ productId: p.id })),
+)
+
+return top.products.map((product, i) => {
+  const scores = ratings[i].ratings.map((r) => r.score)
+  const avg = scores.reduce((sum, s) => sum + s, 0) / scores.length
+  return {
+    name: product.name,
+    sales: product.totalSales,
+    averageRating: Math.round(avg * 100) / 100,
+  }
+})
+```
+
+One tool call. Five API fetches in parallel. Math computed in JavaScript, not in the model. The averages are correct to the penny. The context window savings compound fast: every round-trip you eliminate is hundreds of tokens you don't spend.
+
+### Why math matters
+
+LLMs predict tokens. They don't execute arithmetic. When the model says "the average is 4.37," it's pattern-matching, not computing. Code Mode moves all calculation into a real runtime. Sums, averages, percentages, currency conversions, date math: all of it runs as actual JavaScript. The model decides _what_ to compute. The sandbox computes it correctly.
+
+## Setting It Up
+
+### Install
+
+```bash
+pnpm add @tanstack/ai @tanstack/ai-code-mode zod
+```
+
+Pick an isolate driver:
+
+```bash
+# Node.js: fastest, V8 isolates via isolated-vm
+pnpm add @tanstack/ai-isolate-node
+
+# QuickJS WASM: no native deps, works in browsers and edge runtimes
+pnpm add @tanstack/ai-isolate-quickjs
+
+# Cloudflare Workers: run on the edge
+pnpm add @tanstack/ai-isolate-cloudflare
+```
+
+### Define tools
+
+Same `toolDefinition()` API you already use. Nothing changes here:
+
+```typescript
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+
+const fetchWeather = toolDefinition({
+  name: 'fetchWeather',
+  description: 'Get current weather for a city',
+  inputSchema: z.object({ location: z.string() }),
+  outputSchema: z.object({
+    temperature: z.number(),
+    condition: z.string(),
+  }),
+}).server(async ({ location }) => {
+  const res = await fetch(`https://api.weather.example/v1?city=${location}`)
+  return res.json()
+})
+```
+
+### Create Code Mode and use it with `chat()`
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { createCodeMode } from '@tanstack/ai-code-mode'
+import { createNodeIsolateDriver } from '@tanstack/ai-isolate-node'
+
+const { tool, systemPrompt } = createCodeMode({
+  driver: createNodeIsolateDriver(),
+  tools: [fetchWeather],
+  timeout: 30_000,
+})
+
+const result = await chat({
+  adapter: openaiText('gpt-5.4'),
+  systemPrompts: ['You are a helpful assistant.', systemPrompt],
+  tools: [tool],
+  messages,
+})
+```
+
+`createCodeMode` returns two things: the `execute_typescript` tool and a system prompt containing typed function stubs for every tool you passed in. The model sees exact input/output types, so it generates correct calls without guessing parameter shapes. TypeScript annotations are stripped automatically before execution.
+
+## Three Sandbox Runtimes
+
+Code Mode is runtime-agnostic. All three drivers implement the same `IsolateDriver` interface. Swap them without changing any other code.
+
+| Driver                            | Best for                    | Native deps     | Browser |
+| --------------------------------- | --------------------------- | --------------- | ------- |
+| `@tanstack/ai-isolate-node`       | Server-side Node.js         | Yes (C++ addon) | No      |
+| `@tanstack/ai-isolate-quickjs`    | Browsers, edge, portability | None (WASM)     | Yes     |
+| `@tanstack/ai-isolate-cloudflare` | Edge on Cloudflare          | None            | N/A     |
+
+The **Node driver** uses V8 isolates via `isolated-vm` for maximum performance. JIT compilation, no serialization overhead beyond tool call boundaries. The **QuickJS driver** compiles to WASM and runs anywhere JavaScript runs, including the browser. The **Cloudflare driver** sends code to a deployed Worker and bridges tool calls back to your server via HTTP round-trips.
+
+Each execution creates a fresh sandbox context. Configurable timeouts and memory limits prevent runaway scripts. The sandbox is destroyed after every call.
+
+## Skills: Persistent, Reusable Code Libraries
+
+Code Mode is powerful on its own. But what if your LLM could get smarter over time?
+
+Right now the model rewrites the same logic every time. If it figures out a good way to fetch and rank NPM packages, that knowledge disappears when the conversation ends.
+
+**Skills** fix this. The `@tanstack/ai-code-mode-skills` package lets the LLM save working code as a named, typed, persistent skill. On future requests, relevant skills are loaded from storage and exposed as first-class tools. The LLM calls them directly without rewriting the logic.
+
+### The lifecycle
+
+1. The LLM writes code via `execute_typescript` to solve a problem
+2. The code works. The LLM calls `register_skill` to save it with a name, description, and schemas
+3. On the next conversation, the system loads skill metadata and uses a cheap/fast model to select relevant skills
+4. Selected skills appear as direct tools the LLM can call, no sandbox needed
+5. Execution stats are tracked. Skills earn trust through successful runs
+
+### Two integration paths
+
+**High-level**: `codeModeWithSkills()` handles everything. Skill selection via a cheap LLM call, tool registry assembly, system prompt generation.
+
+```typescript
+import { codeModeWithSkills } from '@tanstack/ai-code-mode-skills'
+import { createFileSkillStorage } from '@tanstack/ai-code-mode-skills/storage'
+import { createNodeIsolateDriver } from '@tanstack/ai-isolate-node'
+import { openaiText } from '@tanstack/ai-openai'
+
+const storage = createFileSkillStorage({ directory: './.skills' })
+
+const { toolsRegistry, systemPrompt } = await codeModeWithSkills({
+  config: {
+    driver: createNodeIsolateDriver(),
+    tools: [myTool1, myTool2],
+    timeout: 60_000,
+  },
+  adapter: openaiText('gpt-5.4-mini'), // cheap model for skill selection
+  skills: { storage, maxSkillsInContext: 5 },
+  messages,
+})
+
+const stream = chat({
+  adapter: openaiText('gpt-5.4'), // strong model for reasoning
+  toolRegistry: toolsRegistry,
+  messages,
+  systemPrompts: ['You are a helpful assistant.', systemPrompt],
+})
+```
+
+**Manual**: use `createCodeMode`, `skillsToTools`, and `createSkillManagementTools` individually when you want full control over which skills load and how they're assembled.
+
+### Storage
+
+Skills are just TypeScript text and metadata. Your application is free to store them wherever it wants. We ship file-based and in-memory storage implementations, but anything that satisfies the `SkillStorage` interface works: a database, S3, Redis, whatever fits your stack.
+
+### Trust
+
+Skills start untrusted and earn trust through successful executions. Four built-in strategies control promotion thresholds:
+
+| Strategy       | Provisional at         | Trusted at              |
+| -------------- | ---------------------- | ----------------------- |
+| Default        | 10+ runs, ≥90% success | 100+ runs, ≥95% success |
+| Relaxed        | 3+ runs, ≥80% success  | 10+ runs, ≥90% success  |
+| Always trusted | Immediately            | Immediately             |
+| Custom         | You decide             | You decide              |
+
+Trust is metadata today. It doesn't gate execution. But the infrastructure is there for when you want to build approval workflows or restrict untrusted skills to sandboxed execution only.
+
+## Showing It in the UI
+
+Code Mode emits custom events through the AG-UI streaming protocol as code executes. Your client receives them via the `onCustomEvent` callback on `useChat`:
+
+| Event                         | When                                 |
+| ----------------------------- | ------------------------------------ |
+| `code_mode:execution_started` | Sandbox begins executing             |
+| `code_mode:console`           | Each `console.log/error/warn/info`   |
+| `code_mode:external_call`     | Before an `external_*` function runs |
+| `code_mode:external_result`   | After a successful `external_*` call |
+| `code_mode:external_error`    | When an `external_*` call fails      |
+
+Every event carries a `toolCallId` that ties it to the specific `execute_typescript` call, so you can render a live execution timeline alongside the right message. Console output streaming in, external function calls with arguments and durations, errors as they happen.
+
+## Try It: The Code Mode Demo
+
+It's hard to impart just how much of a game changer code mode really is. You have to try it for yourself. The TanStack AI monorepo includes a full working example at `examples/ts-code-mode-web`. It's a TanStack Start app with multiple demo scenarios:
+
+- **NPM/GitHub Chat**: ask questions about packages, the LLM writes code that calls NPM and GitHub APIs in parallel
+- **Database Demo**: natural language queries over an in-memory dataset, with skill registration
+- **Structured Output**: Code Mode generating typed, validated output
+- **Reporting**: an agent that builds live dashboards by writing code
+
+To run it:
+
+```bash
+git clone https://github.com/TanStack/ai.git
+cd ai
+pnpm install
+pnpm --filter ts-code-mode-web dev
+```
+
+Set your API keys in the example's `.env` file (OpenAI, Anthropic, or Gemini). The app lets you switch providers and isolate runtimes (Node vs. QuickJS) from the UI.
+
+## What's Next
+
+Code Mode is available now across three packages:
+
+```bash
+pnpm add @tanstack/ai-code-mode                # Core
+pnpm add @tanstack/ai-code-mode-skills         # Persistent skills
+pnpm add @tanstack/ai-isolate-node             # or quickjs, or cloudflare
+```
+
+We're working on:
+
+- **DevTools integration**: visual timeline of sandbox execution, skill creation, and trust progression
+- **More isolate drivers**: Deno, Docker, and AWS Lambda sandboxes
+
+The full documentation is in the [Code Mode Guide](https://tanstack.com/ai/latest/docs/guides/code-mode) and the [Skills Guide](https://tanstack.com/ai/latest/docs/guides/code-mode-with-skills).
+
+---
+
+_TanStack AI is open-source, provider-agnostic, and framework-agnostic. [Get started here.](https://tanstack.com/ai)_
diff --git a/src/blog/tanstack-ai-lazy-tool-discovery.md b/src/blog/tanstack-ai-lazy-tool-discovery.md
new file mode 100644
index 000000000..8b7be141e
--- /dev/null
+++ b/src/blog/tanstack-ai-lazy-tool-discovery.md
@@ -0,0 +1,171 @@
+---
+title: 'Lazy Tool Discovery: Scaling AI Tool Systems Without Drowning in Tokens'
+published: 2026-03-12
+excerpt: Every tool definition costs tokens and eats into the context window. Past a certain point it actually makes the model worse. Today we're shipping lazy tool discovery in TanStack AI.
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![Lazy Tool Discovery](/blog-assets/tanstack-ai-lazy-tool-discovery/header.webp)
+
+If you've built an AI-powered application with more than a handful of tools, you've probably hit the wall: every tool definition you send to the LLM costs tokens, eats into the context window, and — past a certain point — actually makes the model _worse_ at picking the right tool. More tools means more noise, slower responses, and higher bills.
+
+Today we're shipping **lazy tool discovery** in TanStack AI, a mechanism that lets the LLM discover tools on demand instead of receiving all of them upfront.
+
+## The Problem
+
+Consider a customer support agent with 30 tools: ticket lookup, order management, refund processing, knowledge base search, escalation workflows, analytics queries, and more. On any given request, the user probably needs 2–3 of these. But the LLM sees all 30 tool definitions on every single call.
+
+This creates three problems:
+
+1. **Token waste.** Tool definitions with descriptions and JSON schemas add up fast. Thirty detailed tools can easily burn 3,000–5,000 tokens before the conversation even starts.
+2. **Decision fatigue.** LLMs perform better with fewer, more relevant options. Research consistently shows that tool selection accuracy degrades as the number of available tools grows.
+3. **Inflexibility.** You either send everything or build your own routing layer to pre-filter tools. Neither option is great.
+
+## The Solution: `lazy: true`
+
+Lazy tool discovery adds a single flag to tool definitions:
+
+```typescript
+const searchProducts = toolDefinition({
+  name: 'searchProducts',
+  description: 'Search products by keyword',
+  inputSchema: z.object({
+    query: z.string(),
+  }),
+  lazy: true,
+})
+```
+
+That's it. Tools marked `lazy: true` are withheld from the LLM. In their place, the LLM sees a single synthetic tool called `__lazy__tool__discovery__` whose description lists the names of all available lazy tools.
+
+When the LLM decides it needs a tool, the flow looks like this:
+
+1. The LLM sees the discovery tool: _"You have access to additional tools: [searchProducts, compareProducts, calculateFinancing]"_
+2. The LLM calls the discovery tool: `{ toolNames: ["searchProducts"] }`
+3. The discovery tool returns the full description and JSON schema for `searchProducts`
+4. `searchProducts` is injected as a normal tool in the next iteration
+5. The LLM calls `searchProducts` directly with actual arguments
+
+From the LLM's perspective, it asked about a tool, learned what it does, and then used it. From your perspective, you saved tokens on every request where that tool wasn't needed.
+
+## How It Works Under the Hood
+
+When you pass tools to `chat()`, the engine separates them into eager tools (the default) and lazy tools. A `LazyToolManager` class handles the rest:
+
+- **Separation:** Eager tools are sent to the LLM immediately. Lazy tools are held back.
+- **Discovery tool:** If any lazy tools exist, a synthetic discovery tool is created and included in the tool set. Its description contains the names of all lazy tools so the LLM knows what's available.
+- **Dynamic injection:** When the LLM discovers a tool, it's added to the active tool set for the next agent loop iteration. The LLM then sees it as a regular tool with full schema — no proxy, no indirection.
+- **Multi-turn memory:** On each `chat()` call, the manager scans the message history for previous discovery results. Tools discovered in earlier turns are automatically pre-populated — the LLM doesn't need to re-discover them.
+- **Self-correction:** If the LLM tries to call a lazy tool it hasn't discovered yet (LLMs sometimes skip steps), it gets a helpful error: _"Tool 'searchProducts' must be discovered first. Call **lazy**tool**discovery** with toolNames: ['searchProducts'] to discover it."_ The LLM self-corrects on the next iteration.
+- **Auto-cleanup:** When all lazy tools have been discovered, the discovery tool removes itself from the active set. No unnecessary clutter.
+
+## Zero Overhead When Not Used
+
+If none of your tools have `lazy: true`, the behavior is identical to before. No discovery tool is created, no extra processing happens, no code paths change. The feature is entirely opt-in.
+
+## A Real Example
+
+Here's a guitar store chat application with a mix of eager and lazy tools:
+
+```typescript
+import { chat, toolDefinition, maxIterations } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import { z } from 'zod'
+
+// Always available — core functionality
+const getGuitars = toolDefinition({
+  name: 'getGuitars',
+  description: 'Get all guitars from inventory',
+  inputSchema: z.object({}),
+}).server(() => fetchGuitarsFromDB())
+
+const recommendGuitar = toolDefinition({
+  name: 'recommendGuitar',
+  description: 'Display a guitar recommendation to the user',
+  inputSchema: z.object({ id: z.number() }),
+}).server(({ id }) => ({ id }))
+
+// Discovered on demand — secondary features
+const compareGuitars = toolDefinition({
+  name: 'compareGuitars',
+  description: 'Compare two or more guitars side by side',
+  inputSchema: z.object({
+    guitarIds: z.array(z.number()).min(2),
+  }),
+  lazy: true,
+}).server(({ guitarIds }) => buildComparison(guitarIds))
+
+const calculateFinancing = toolDefinition({
+  name: 'calculateFinancing',
+  description: 'Calculate monthly payment plans for a guitar',
+  inputSchema: z.object({
+    guitarId: z.number(),
+    months: z.number(),
+  }),
+  lazy: true,
+}).server(({ guitarId, months }) => computePaymentPlan(guitarId, months))
+
+const searchGuitars = toolDefinition({
+  name: 'searchGuitars',
+  description: 'Search guitars by keyword in name or description',
+  inputSchema: z.object({
+    query: z.string(),
+  }),
+  lazy: true,
+}).server(({ query }) => searchInventory(query))
+
+// Use in chat — lazy tools work automatically
+const stream = chat({
+  adapter: openaiText('gpt-5.4'),
+  messages,
+  tools: [
+    getGuitars,
+    recommendGuitar,
+    compareGuitars,
+    calculateFinancing,
+    searchGuitars,
+  ],
+  agentLoopStrategy: maxIterations(20),
+})
+```
+
+When a user asks _"recommend me a guitar"_, the LLM sees `getGuitars`, `recommendGuitar`, and `__lazy__tool__discovery__`. It calls the first two and never touches discovery. Tokens saved.
+
+When a user asks _"compare the Motherboard Guitar and the Racing Guitar"_, the LLM sees the discovery tool, discovers `compareGuitars`, and calls it. One extra round-trip, but only when the feature is actually needed.
+
+When a user follows up with _"how much would the cheaper one cost per month?"_, the LLM has `compareGuitars` already available (from the earlier discovery) and discovers `calculateFinancing`. The conversation builds naturally without re-discovering tools.
+
+## When Should You Use It?
+
+Lazy discovery makes sense when:
+
+- **You have many tools** and most aren't needed in every conversation
+- **Some tools are niche** — advanced search, analytics, admin functions, reporting
+- **Tool descriptions are verbose** — detailed schemas with many properties
+- **You're cost-conscious** — fewer tokens per request means lower bills
+
+Keep tools eager (the default) when:
+
+- They're called in most conversations
+- The total tool count is small (under ~10)
+- Latency is critical and the extra discovery round-trip matters
+
+A good rule of thumb: if a tool is used in less than 30% of conversations, it's a strong candidate for `lazy: true`.
+
+## What's Next
+
+Lazy tool discovery is available now in `@tanstack/ai`. Add `lazy: true` to any tool definition and you're done.
+
+We're exploring a few follow-on improvements:
+
+- **Grouped discovery:** Discover related tools together (e.g., all analytics tools at once)
+- **Cost tracking:** Surface token savings from lazy tools in DevTools
+- **Smarter descriptions:** Let the discovery tool description include one-line summaries per lazy tool, not just names
+
+Check out the [full documentation](https://tanstack.com/ai/latest/docs/guides/lazy-tool-discovery) for details, or try it out in the [ts-react-chat example](https://github.com/TanStack/ai/tree/main/examples/ts-react-chat) which includes three lazy tools with test prompts.
+
+---
+
+_TanStack AI is an open-source, provider-agnostic AI SDK for building type-safe AI applications. [Get started here.](https://tanstack.com/ai)_
diff --git a/src/blog/tanstack-ai-middleware.md b/src/blog/tanstack-ai-middleware.md
new file mode 100644
index 000000000..244b5e5e6
--- /dev/null
+++ b/src/blog/tanstack-ai-middleware.md
@@ -0,0 +1,445 @@
+---
+title: 'TanStack AI Just Got Middleware — And It Changes Everything'
+published: 2026-03-12
+excerpt: Your chat endpoint starts simple, then you need logging, filtering, caching, rate limiting, and suddenly it's a 200-line monster. TanStack AI now ships a first-class middleware system.
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![TanStack AI Middleware](/blog-assets/tanstack-ai-middleware/header.webp)
+
+If you've ever built a production AI application, you know the pain. Your `chat()` call starts simple — then you need logging, then content filtering, then tool caching, then rate limiting, then an audit trail... and suddenly your clean server endpoint is a 200-line monster with deeply nested try/catch blocks.
+
+TanStack AI now ships a **first-class middleware system** for the `chat()` function. It's composable, type-safe, and comes with batteries included via the new `@tanstack/ai/middlewares` subpath export.
+
+Let's dive in.
+
+## The Shape of a Middleware
+
+A middleware is just an object with optional hooks. No classes, no inheritance, no decorators — just a plain object that satisfies the `ChatMiddleware` interface:
+
+```typescript
+import type { ChatMiddleware } from '@tanstack/ai'
+
+const logger: ChatMiddleware = {
+  name: 'logger',
+  onStart(ctx) {
+    console.log(
+      `[${ctx.requestId}] Chat started — model: ${ctx.model}, provider: ${ctx.provider}`,
+    )
+  },
+  onFinish(ctx, info) {
+    console.log(
+      `[${ctx.requestId}] Done in ${info.duration}ms — ${info.usage?.totalTokens} tokens`,
+    )
+  },
+}
+```
+
+Drop it into the `middleware` array and you're done:
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+
+const stream = chat({
+  adapter: openaiText('gpt-5.4'),
+  messages: [{ role: 'user', content: 'Explain middleware to me' }],
+  middleware: [logger],
+})
+```
+
+No wrapping, no monkey-patching, no provider-specific hacks.
+
+## The Lifecycle: 12 Hooks, Zero Guesswork
+
+The middleware system exposes hooks at every meaningful point in the `chat()` lifecycle:
+
+```
+chat() called
+  → onConfig (phase: 'init')     // transform config before anything runs
+  → onStart                       // one-time setup
+  ┌─ ITERATION LOOP ──────────────────────────────────────┐
+  │ → onConfig (phase: 'beforeModel')  // tweak config per iteration   │
+  │ → onIteration                       // observe iteration boundary   │
+  │ → onChunk (for every streamed chunk)                               │
+  │ → onBeforeToolCall → [tool executes] → onAfterToolCall             │
+  │ → onToolPhaseComplete               // all tools done this round   │
+  │ → onUsage                           // token counts                │
+  └────────────────────────────────────────────────────────┘
+  → onFinish / onAbort / onError   // exactly ONE fires
+```
+
+Every hook receives a rich `ChatMiddlewareContext` with `requestId`, `iteration`, `chunkIndex`, current `messages`, and two powerful control functions: **`abort()`** to stop the run, and **`defer()`** to register non-blocking side effects that run after streaming completes.
+
+## What Middleware Enables
+
+Before we look at code, let's talk about what this actually unlocks.
+
+### Transform Anything the Model Sees
+
+`onConfig` fires at two critical moments — once at startup (`phase: 'init'`) and once before every model call (`phase: 'beforeModel'`). Return a partial config and it's shallow-merged in. You can change `messages`, `systemPrompts`, `tools`, `temperature`, `maxTokens`, `metadata`, or `modelOptions` — per request, per iteration, conditionally.
+
+This means you can inject tenant-specific system prompts based on who's making the request. You can strip tools out after the first iteration so the model stops looping. You can bump temperature on retries. All without touching your adapter or your tool definitions.
+
+When multiple middleware define `onConfig`, the config is **piped** through them in order — each one sees the merged result of the previous. So you can layer concerns: one middleware handles auth-based prompt injection, another handles tool filtering, a third adjusts model parameters. They compose naturally.
+
+### Intercept Every Streamed Chunk
+
+`onChunk` gives you access to every piece of data the adapter yields. You can observe it, transform it, expand it into multiple chunks, or drop it entirely by returning `null`.
+
+This is where content filtering lives. Redact PII before it reaches the client. Strip out markdown formatting your UI doesn't support. Inject synthetic chunks to add custom metadata to the stream. If a previous middleware drops a chunk, downstream middleware never see it — the pipeline is clean.
+
+### Control Tool Execution Without Touching Tools
+
+`onBeforeToolCall` and `onAfterToolCall` wrap every tool invocation. Before a tool runs, you can:
+
+- **Pass through** — return `void`, the tool runs normally
+- **Transform arguments** — return `{ type: 'transformArgs', args }` to rewrite what the tool receives
+- **Skip execution** — return `{ type: 'skip', result }` to short-circuit with a synthetic result (this is how caching works)
+- **Abort the entire run** — return `{ type: 'abort', reason }` to stop everything
+
+This is **first-win** composition: the first middleware that returns a non-void decision wins, and the rest are skipped for that call. After execution, `onAfterToolCall` fires on all middleware with timing data, success/failure status, and the result or error.
+
+`onToolPhaseComplete` fires after _all_ tool calls in an iteration are done, giving you aggregate data — what completed, what needs user approval, what needs client-side execution. This is where you'd implement batch-level validation or summary logging.
+
+### Track Token Spend in Real Time
+
+`onUsage` fires once per model iteration with `promptTokens`, `completionTokens`, and `totalTokens`. Combined with `ctx.iteration`, you can build cumulative budgets, per-model cost tracking, or real-time spend dashboards without any external instrumentation.
+
+### Abort from Anywhere
+
+`ctx.abort(reason)` is available in every hook. Call it and the run stops gracefully — `onAbort` fires as the terminal hook with the reason and duration. This is how you implement timeouts, budget limits, content policy violations, or any "stop everything" signal.
+
+### Fire-and-Forget Side Effects
+
+`ctx.defer(promise)` registers a non-blocking promise that executes _after_ the terminal hook. It never blocks streaming. This is the right pattern for analytics, audit logs, webhook notifications, or database writes that shouldn't add latency to the user's response.
+
+### Thread Request-Scoped Data
+
+The `context` option on `chat()` is an opaque value that flows into `ctx.context` on every hook. Pass in your auth token, tenant ID, feature flags, or any request-scoped data — middleware reads it without coupling to your HTTP framework.
+
+## Composition: Order Matters (But Predictably)
+
+Middleware compose cleanly in array order with well-defined semantics:
+
+```typescript
+middleware: [authMiddleware, guardMiddleware, cacheMiddleware, loggerMiddleware]
+```
+
+| Hook               | Composition Model | What "order" means                                          |
+| ------------------ | ----------------- | ----------------------------------------------------------- |
+| `onConfig`         | **Piped**         | Each middleware transforms config, next one sees the result |
+| `onChunk`          | **Piped**         | Chunks flow through each middleware in sequence             |
+| `onBeforeToolCall` | **First-win**     | First non-void decision wins, rest are skipped              |
+| Everything else    | **Sequential**    | All run in order, no short-circuiting                       |
+
+This means you can stack a content guard _before_ a logger and the logger only sees the redacted output. Or put a rate limiter _before_ a cache and the cache never stores rate-limited calls. The ordering is explicit, the rules are simple, and there are no surprises.
+
+## Built-in Middleware: `@tanstack/ai/middlewares`
+
+The new subpath export ships two production-ready middlewares. You don't need to write these yourself — they're tree-shakeable, so unused ones don't end up in your bundle.
+
+### `toolCacheMiddleware` — Never Re-Execute the Same Tool Call
+
+If your agent calls `getWeather({ city: "Berlin" })` three times in a conversation, do you really want to hit the API three times?
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { toolCacheMiddleware } from '@tanstack/ai/middlewares'
+
+const stream = chat({
+  adapter,
+  messages,
+  tools: [weatherTool, stockTool],
+  middleware: [
+    toolCacheMiddleware({
+      ttl: 60_000, // expire after 60s
+      maxSize: 50, // LRU eviction at 50 entries
+      toolNames: ['getWeather'], // only cache weather lookups
+    }),
+  ],
+})
+```
+
+Under the hood, it uses `onBeforeToolCall` to check the cache and returns `{ type: 'skip', result }` on a hit — the tool never executes. On a miss, `onAfterToolCall` stores the result. Failed calls are never cached.
+
+**Custom cache keys** let you ignore irrelevant arguments:
+
+```typescript
+toolCacheMiddleware({
+  keyFn: (toolName, args) => {
+    const { page, ...rest } = args as Record<string, unknown>
+    return JSON.stringify([toolName, rest]) // ignore pagination
+  },
+})
+```
+
+**Pluggable storage** means you can swap the in-memory LRU map for Redis, a database, or anything with `getItem`/`setItem`/`deleteItem`:
+
+```typescript
+import { createClient } from 'redis'
+import {
+  toolCacheMiddleware,
+  type ToolCacheStorage,
+} from '@tanstack/ai/middlewares'
+
+const redis = createClient()
+
+const redisStorage: ToolCacheStorage = {
+  getItem: async (key) => {
+    const raw = await redis.get(`tool-cache:${key}`)
+    return raw ? JSON.parse(raw) : undefined
+  },
+  setItem: async (key, value) => {
+    await redis.set(`tool-cache:${key}`, JSON.stringify(value))
+  },
+  deleteItem: async (key) => {
+    await redis.del(`tool-cache:${key}`)
+  },
+}
+
+const stream = chat({
+  adapter,
+  messages,
+  tools: [weatherTool],
+  middleware: [toolCacheMiddleware({ storage: redisStorage, ttl: 60_000 })],
+})
+```
+
+### `contentGuardMiddleware` — Real-Time Stream Redaction
+
+Your model just streamed back a user's SSN. Your model just leaked an internal API key. Your model included PII in a customer-facing response.
+
+```typescript
+import { contentGuardMiddleware } from '@tanstack/ai/middlewares'
+
+const guard = contentGuardMiddleware({
+  rules: [
+    // Regex rules: pattern + replacement
+    { pattern: /\b\d{3}-\d{2}-\d{4}\b/g, replacement: '[SSN REDACTED]' },
+    { pattern: /sk-[a-zA-Z0-9]{48}/g, replacement: '[API KEY REDACTED]' },
+
+    // Function rules: full control
+    {
+      fn: (text) =>
+        text.replace(
+          /\b[A-Z0-9._%+-]+@company\.internal\b/gi,
+          '[EMAIL REDACTED]',
+        ),
+    },
+  ],
+  strategy: 'buffered', // catches patterns that span chunk boundaries
+  bufferSize: 60, // hold back 60 chars to catch cross-boundary matches
+  onFiltered: (info) => {
+    console.warn(`Content filtered in message ${info.messageId}`)
+  },
+})
+```
+
+Two strategies are available:
+
+- **`delta`** — applies rules to each chunk as it arrives. Zero added latency, but patterns split across chunk boundaries might slip through.
+- **`buffered`** (default) — accumulates content and applies rules to settled portions, holding back a configurable look-behind buffer. Catches cross-boundary patterns at the cost of a tiny delay.
+
+Set `blockOnMatch: true` to drop entire chunks when any rule matches instead of replacing:
+
+```typescript
+contentGuardMiddleware({
+  rules: [{ pattern: /CONFIDENTIAL/gi, replacement: '' }],
+  blockOnMatch: true, // if the word appears, the chunk is gone
+})
+```
+
+## Ideas: What You Could Build
+
+The middleware system is deliberately low-level and composable. Here are patterns that fall right out of the hook design.
+
+### Per-Iteration Tool Swapping
+
+Expose different tool sets at different stages of the agent loop — let the model search first, then unlock write tools:
+
+```typescript
+const progressiveTools: ChatMiddleware = {
+  name: 'progressive-tools',
+  onConfig(ctx, config) {
+    if (ctx.phase !== 'beforeModel') return
+
+    if (ctx.iteration === 0) {
+      return { tools: config.tools.filter((t) => t.name === 'search') }
+    }
+    // After search results come back, unlock everything
+  },
+}
+```
+
+### Token Budget Enforcement
+
+Track cumulative usage and abort when you've spent enough:
+
+```typescript
+function tokenBudget(maxTokens: number): ChatMiddleware {
+  let total = 0
+  return {
+    name: 'token-budget',
+    onUsage(ctx, usage) {
+      total += usage.totalTokens
+      if (total > maxTokens) {
+        ctx.abort(`Token budget exhausted: ${total}/${maxTokens}`)
+      }
+    },
+  }
+}
+```
+
+### Deferred Analytics (Non-Blocking)
+
+Fire-and-forget side effects that never slow down streaming:
+
+```typescript
+const analytics: ChatMiddleware = {
+  name: 'analytics',
+  onFinish(ctx, info) {
+    ctx.defer(
+      fetch('/api/analytics', {
+        method: 'POST',
+        body: JSON.stringify({
+          requestId: ctx.requestId,
+          model: ctx.model,
+          provider: ctx.provider,
+          duration: info.duration,
+          tokens: info.usage?.totalTokens,
+          toolCount: ctx.toolNames?.length ?? 0,
+        }),
+      }),
+    )
+  },
+}
+```
+
+### Dangerous Tool Guard
+
+Intercept tool calls and block the ones you don't trust:
+
+```typescript
+const dangerousToolGuard: ChatMiddleware = {
+  name: 'dangerous-tool-guard',
+  onBeforeToolCall(ctx, hookCtx) {
+    const blocked = ['deleteUser', 'dropTable', 'sendEmail']
+    if (blocked.includes(hookCtx.toolName)) {
+      return {
+        type: 'abort',
+        reason: `Blocked dangerous tool: ${hookCtx.toolName}`,
+      }
+    }
+  },
+}
+```
+
+### Tenant-Aware Prompt Injection
+
+Thread request-scoped data through middleware via `context`:
+
+```typescript
+// Server endpoint
+const stream = chat({
+  adapter,
+  messages,
+  middleware: [tenantMiddleware],
+  context: { tenantId: req.auth.tenantId, userId: req.auth.userId },
+})
+
+// Middleware reads it
+const tenantMiddleware: ChatMiddleware = {
+  name: 'tenant',
+  onConfig(ctx, config) {
+    const { tenantId } = ctx.context as { tenantId: string }
+    return {
+      systemPrompts: [
+        ...config.systemPrompts,
+        `You are an assistant for tenant ${tenantId}. Follow their policies.`,
+      ],
+    }
+  },
+}
+```
+
+### Stacking It All Together
+
+The real power is composition. Here's what a production setup might look like:
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai'
+import {
+  toolCacheMiddleware,
+  contentGuardMiddleware,
+} from '@tanstack/ai/middlewares'
+
+const stream = chat({
+  adapter: openaiText('gpt-5.4'),
+  messages: req.body.messages,
+  tools: [searchTool, weatherTool, calendarTool],
+  context: { tenantId: req.auth.tenantId },
+  middleware: [
+    // 1. Inject tenant system prompt
+    tenantMiddleware,
+    // 2. Guard dangerous tools before anything else
+    dangerousToolGuard,
+    // 3. Redact PII from the stream
+    contentGuardMiddleware({
+      rules: [
+        { pattern: /\b\d{3}-\d{2}-\d{4}\b/g, replacement: '[SSN REDACTED]' },
+      ],
+    }),
+    // 4. Cache expensive tool calls
+    toolCacheMiddleware({ ttl: 120_000 }),
+    // 5. Enforce token budget
+    tokenBudget(50_000),
+    // 6. Log everything (sees redacted output, not raw)
+    analytics,
+  ],
+})
+```
+
+Six concerns. Six middleware. Zero coupling between them. The order is explicit and the composition rules are predictable.
+
+## DevTools Integration
+
+Middleware events are wired into TanStack DevTools out of the box. Every hook execution, config transformation, and chunk transformation emits structured events via `@tanstack/ai-event-client`. The new **Iteration Timeline** and **Iteration Card** UI components let you visually trace what happened at each step of the agent loop — which middleware fired, how long each hook took, and what was transformed.
+
+This isn't just logging. It's a full timeline view of your middleware pipeline, per iteration, in real time.
+
+## Getting Started
+
+```bash
+pnpm add @tanstack/ai
+```
+
+All middleware types are exported from the main package:
+
+```typescript
+import type {
+  ChatMiddleware,
+  ChatMiddlewareContext,
+  ChatMiddlewareConfig,
+  BeforeToolCallDecision,
+  AfterToolCallInfo,
+  FinishInfo,
+  AbortInfo,
+  ErrorInfo,
+  UsageInfo,
+} from '@tanstack/ai'
+```
+
+Built-in middleware lives in the tree-shakeable subpath:
+
+```typescript
+import {
+  toolCacheMiddleware,
+  contentGuardMiddleware,
+} from '@tanstack/ai/middlewares'
+```
+
+The full middleware documentation is available in the [TanStack AI Middleware Guide](https://tanstack.com/ai/latest/docs/guides/middleware).
diff --git a/src/blog/tanstack-ai-orchestration.md b/src/blog/tanstack-ai-orchestration.md
new file mode 100644
index 000000000..1c66b54b9
--- /dev/null
+++ b/src/blog/tanstack-ai-orchestration.md
@@ -0,0 +1,468 @@
+---
+title: 'Introducing Experimental Workflows and Orchestrators in TanStack AI'
+published: 2026-05-28
+excerpt: 'Try the experimental TanStack AI orchestration PR build: generator-based workflows, typed agent calls, approvals, SSE streaming, AG-UI events, and React hooks.'
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![TanStack AI workflows and orchestrators](/blog-assets/tanstack-ai-orchestration/header.png)
+
+Most AI apps start with one `chat()` call.
+
+But as soon as you need something more complex, this all breaks apart. You either fall back to using sub-agents as tools, or you have to write your own glue and abstractions on top to make a semi-decent workflow or orchestration mechanism to power your app. This just detracts from your time to work on the features you really care about.
+
+The model needs to draft, critique, revise, ask for approval, call another model, update state, and show the user what is happening while the run is still in progress. At that point, a one-shot chat endpoint turns into a hand-rolled workflow engine made of fetch calls, temporary state, custom SSE events, and a lot of code nobody wanted to own.
+
+Today, TanStack introduces an experimental answer: **TanStack AI Workflows & Orchestrators**.
+
+Before we go further, a fair warning!
+
+This is not merged to `main`. It is not shipped, stable, or available in normal npm versions. It is a PR build you can try today through `pkg.pr.new` while the API is still being shaped. The goal is to get it in front of real use cases, demos, and feedback before we commit to the public API shape.
+
+This is where you come in. We need your help. We need people to test out our workflows and our orchestration mechanisms, give us their thoughts and opinions, and help us shape the final APIs.
+
+- PR: [TanStack/ai#542](https://github.com/TanStack/ai/pull/542)
+- PR build packages: [pkg.pr.new comment](https://github.com/TanStack/ai/pull/542#issuecomment-4416347869)
+- Package: `@tanstack/ai-orchestration`
+
+The goal is simple: compose multiple typed LLM and agent steps as normal TypeScript async generators, stream each step to the UI, pause for human approval, and resume through the same SSE flow.
+
+## Define your agents
+
+Agents are typed wrappers around a `chat()` call or any async function. `defineAgent` gives each step an input schema, output schema, and implementation.
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { defineAgent } from '@tanstack/ai-orchestration'
+import { openaiText } from '@tanstack/ai-openai'
+import { z } from 'zod'
+
+export const ArticleSchema = z.object({
+  title: z.string(),
+  body: z.string(),
+})
+
+export const writer = defineAgent({
+  name: 'writer',
+  input: z.object({
+    topic: z.string(),
+  }),
+  output: ArticleSchema,
+  run: ({ input }) =>
+    chat({
+      adapter: openaiText('gpt-4o'),
+      outputSchema: ArticleSchema,
+      stream: true,
+      systemPrompts: [
+        'Write a concise developer article with a clear title and practical body.',
+      ],
+      messages: [{ role: 'user', content: input.topic }],
+    }),
+})
+
+export const EditorReviewSchema = z.object({
+  approved: z.boolean(),
+  article: ArticleSchema,
+  notes: z.string(),
+})
+
+export const editor = defineAgent({
+  name: 'editor',
+  input: z.object({
+    article: ArticleSchema,
+    feedback: z.string().optional(),
+  }),
+  output: EditorReviewSchema,
+  run: ({ input }) =>
+    chat({
+      adapter: openaiText('gpt-4o'),
+      outputSchema: EditorReviewSchema,
+      stream: true,
+      systemPrompts: [
+        'Edit the article for accuracy, clarity, and practical developer tone. Apply any optional reviewer feedback.',
+      ],
+      messages: [{ role: 'user', content: JSON.stringify(input) }],
+    }),
+})
+```
+
+`defineAgent` wraps either a `chat()` call or a normal async function with input and output schemas. The workflow runtime uses those schemas to validate what enters and leaves the step, and TypeScript uses them to infer the callable shape inside a workflow. From the workflow's perspective, `writer` and `editor` are normal typed async steps.
+
+## Define a workflow
+
+Once agents exist, `defineWorkflow` composes them with `yield*` inside an `async function*`.
+
+```typescript
+import {
+  approve,
+  defineWorkflow,
+  fail,
+  succeed,
+} from '@tanstack/ai-orchestration'
+import { z } from 'zod'
+import { ArticleSchema, editor, writer } from './agents'
+
+export const ArticleInputSchema = z.object({
+  topic: z.string(),
+})
+
+export const ArticleWorkflowOutputSchema = z.discriminatedUnion('ok', [
+  z.object({
+    ok: z.literal(true),
+    article: ArticleSchema,
+  }),
+  z.object({
+    ok: z.literal(false),
+    reason: z.string(),
+  }),
+])
+
+export const articleWorkflow = defineWorkflow({
+  name: 'article-workflow',
+  input: ArticleInputSchema,
+  output: ArticleWorkflowOutputSchema,
+  agents: {
+    writer,
+    editor,
+  },
+  run: async function* ({ input, agents }) {
+    const draft = yield* agents.writer({ topic: input.topic })
+    const edited = yield* agents.editor({ article: draft })
+
+    if (!edited.approved) {
+      return fail(edited.notes)
+    }
+
+    const decision = yield* approve({
+      title: `Publish "${edited.article.title}"?`,
+      description: edited.notes,
+    })
+
+    if (!decision.approved) {
+      return fail(decision.feedback ?? 'Publication declined')
+    }
+
+    return succeed({ article: edited.article })
+  },
+})
+```
+
+The interesting part is the lack of framework ceremony. TypeScript knows the input expected by `agents.writer`, and it knows the shape returned after the `yield*`.
+
+Each `yield* agents.someAgent(...)` becomes a typed step. The runtime can emit lifecycle events around it, stream text while it runs, validate the result, snapshot state, and resume the generator with the typed output.
+
+The workflow body is just TypeScript. Use `if`, `for`, `while`, `try`, `await`, helper functions, and whatever domain code you already have. The orchestration runtime only cares about the things you `yield*`.
+
+Why async generator workflows? There are a lot of ways to model agent workflows. You can build a graph DSL. You can define nodes in JSON. You can describe a DAG and ask the runtime to interpret it. The reason we went with generator workflows is that whenever you yield the agent's step, it's streamed straight down to the client. The user sees everything in real time — tool calls, reasoning, whatever happens along the way — and by the end you just get the final output back.
+
+## Expose it over SSE
+
+Workflows run on the server. The browser consumes an event stream.
+
+The PR adds `parseWorkflowRequest`, `runWorkflow`, and `inMemoryRunStore` from `@tanstack/ai-orchestration`. You can pipe the returned stream through the existing `toServerSentEventsResponse` helper from `@tanstack/ai`.
+
+```typescript
+import { toServerSentEventsResponse } from '@tanstack/ai'
+import {
+  inMemoryRunStore,
+  parseWorkflowRequest,
+  runWorkflow,
+} from '@tanstack/ai-orchestration'
+import { articleWorkflow } from './article-workflow'
+
+const runStore = inMemoryRunStore({ ttl: 60 * 60 * 1000 })
+
+export async function POST(request: Request) {
+  const params = await parseWorkflowRequest(request)
+  const stream = runWorkflow({
+    workflow: articleWorkflow,
+    runStore,
+    ...params,
+  })
+
+  return toServerSentEventsResponse(stream)
+}
+```
+
+`runWorkflow` emits AG-UI-style lifecycle events for the run. That includes run and step events, state snapshots, JSON Patch state deltas, output, and errors. The UI does not need to invent its own event protocol for "writer started", "editor streamed text", "approval requested", or "run finished".
+
+The current built-in persistence is `inMemoryRunStore`. That is useful for local demos and single-process evaluation. Production durability is still future-facing and experimental run-store-interface territory, especially for long pauses, deploys, restarts, and multi-node environments. But the API is there to implement your own durable run store and swap it in when you're ready.
+
+## Run it without a UI
+
+A UI is optional. The SSE endpoint above exists so a browser can watch a run unfold, but the workflow itself is just a server-side async generator. If nothing is watching — a cron job, a queue worker, a batch script, or a plain JSON endpoint that only returns the final answer — you can run the workflow headless and never stream a single event to a client.
+
+`runWorkflow` returns an async iterable, and iterating it is what drives the workflow forward. So for a headless run you drain the stream to completion, then read the final result back from the run store:
+
+```typescript
+import { inMemoryRunStore, runWorkflow } from '@tanstack/ai-orchestration'
+import { articleWorkflow } from './article-workflow'
+
+const runStore = inMemoryRunStore({ ttl: 60 * 60 * 1000 })
+
+export async function generateArticle(topic: string) {
+  const runId = crypto.randomUUID()
+
+  const stream = runWorkflow({
+    workflow: articleWorkflow,
+    runStore,
+    runId,
+    input: { topic },
+  })
+
+  // No client is listening, so just drive the run to completion.
+  for await (const _event of stream) {
+    // Optionally log progress or persist events here.
+  }
+
+  const run = await runStore.getRunState(runId)
+
+  if (run?.status === 'finished') {
+    return run.output
+  }
+
+  throw new Error(run?.error?.message ?? `Workflow ended as "${run?.status}"`)
+}
+```
+
+The same typed agents, schemas, state snapshots, and validation apply. You just skip `toServerSentEventsResponse`, the React hooks, and the browser entirely.
+
+One caveat: a headless run has nobody to answer a `yield* approve(...)`. If the workflow hits an approval step, it pauses and `getRunState` reports `status: 'paused'` instead of `'finished'`. Server-only workflows shine when the pipeline runs end to end on its own. If you need a human in the loop, either resume the paused run programmatically with an `approval` result or keep a UI connected.
+
+## Consume it from React
+
+On the client, `WorkflowClient`, `useWorkflow`, and `useOrchestration` consume the streamed events and keep local run state updated.
+
+```tsx
+import { fetchWorkflowEvents, useWorkflow } from '@tanstack/ai-react'
+import {
+  ArticleInputSchema,
+  ArticleWorkflowOutputSchema,
+} from './article-workflow'
+
+export function ArticleWorkflowDemo() {
+  const workflow = useWorkflow({
+    input: ArticleInputSchema,
+    output: ArticleWorkflowOutputSchema,
+    connection: fetchWorkflowEvents('/api/article-workflow'),
+  })
+
+  return (
+    <section>
+      <button
+        type="button"
+        disabled={workflow.status === 'running'}
+        onClick={() =>
+          workflow.start({
+            topic: 'How typed agent workflows improve AI product UX',
+          })
+        }
+      >
+        Start workflow
+      </button>
+
+      {workflow.steps.map((step) => (
+        <div key={step.stepId}>
+          <strong>{step.stepName}</strong>
+          <span>{step.status}</span>
+        </div>
+      ))}
+
+      {workflow.currentText ? <pre>{workflow.currentText}</pre> : null}
+
+      {workflow.pendingApproval ? (
+        <div>
+          <h2>{workflow.pendingApproval.title}</h2>
+          <p>{workflow.pendingApproval.description}</p>
+          <button type="button" onClick={() => workflow.approve(true)}>
+            Approve
+          </button>
+          <button
+            type="button"
+            onClick={() => workflow.approve(false, 'Tighten the conclusion.')}
+          >
+            Request changes
+          </button>
+        </div>
+      ) : null}
+
+      {workflow.output?.ok ? (
+        <article>
+          <h1>{workflow.output.article.title}</h1>
+          <p>{workflow.output.article.body}</p>
+        </article>
+      ) : null}
+
+      {workflow.output && !workflow.output.ok ? (
+        <p>{workflow.output.reason}</p>
+      ) : null}
+    </section>
+  )
+}
+```
+
+There is also `useOrchestration` for the same runtime with orchestration vocabulary. If your mental model is "run a workflow", use `useWorkflow`. If your mental model is "let a router pick the next agent", use `useOrchestration`.
+
+```tsx
+import { fetchWorkflowEvents, useOrchestration } from '@tanstack/ai-react'
+
+export function ArticleOrchestrationDemo() {
+  const orchestration = useOrchestration({
+    input: ArticleInputSchema,
+    output: ArticleWorkflowOutputSchema,
+    connection: fetchWorkflowEvents('/api/article-orchestrator'),
+  })
+
+  return (
+    <button
+      type="button"
+      disabled={orchestration.status === 'running'}
+      onClick={() =>
+        orchestration.start({
+          topic: 'How typed orchestration improves AI product UX',
+        })
+      }
+    >
+      Start orchestration
+    </button>
+  )
+}
+```
+
+## Human approval is part of the stream
+
+Human-in-the-loop control is not a side channel in this PR.
+
+When workflow code calls `yield* approve(...)`, the runtime emits an `approval-requested` event, persists the paused run in the run store, and closes the SSE response. The HTTP request is done. The server does not keep a socket open while a user thinks, checks a diff, or gets approval from someone else.
+
+When the client calls `approve()`, it POSTs back to the same endpoint with the run id and approval result. `runWorkflow` resumes the generator and the next SSE response continues from the paused point.
+
+That means approvals, revisions, and denial feedback can be modeled in the workflow itself:
+
+```typescript
+const decision =
+  yield *
+  approve({
+    title: 'Publish article?',
+    description: edited.notes,
+  })
+
+if (!decision.approved) {
+  const revised =
+    yield *
+    agents.editor({
+      article: edited.article,
+      feedback: decision.feedback ?? 'Revise before publishing.',
+    })
+
+  return succeed({ article: revised.article })
+}
+```
+
+The same event stream also carries state snapshots and JSON Patch deltas, so a UI can show a live state inspector, a timeline, or a draft preview without waiting for the final result.
+
+## Workflows vs orchestrators
+
+Use a workflow when you know the pipeline.
+
+Writer, then editor, then approval is a workflow. Extract topics, draft outline, expand sections is a workflow. Run static checks, ask for approval, deploy to staging, ask again, deploy to production is a workflow.
+
+Use an orchestrator when the next step should be selected turn by turn.
+
+`defineOrchestrator` is a thin wrapper over workflows, so the workflow behavior already described applies the same way to orchestrators. It uses the same runtime pieces: typed agents, streaming steps, state snapshots, approvals, SSE transport, and React hooks.
+
+The body is a router. The router looks at input, mutable state, and the previous result, then returns the next agent to run. When the router is done, it returns the final output.
+
+```typescript
+import {
+  defineOrchestrator,
+  defineRouter,
+  succeed,
+} from '@tanstack/ai-orchestration'
+import { z } from 'zod'
+import { ArticleSchema, editor, writer } from './agents'
+import {
+  ArticleInputSchema,
+  ArticleWorkflowOutputSchema,
+} from './article-workflow'
+
+const ArticleStateSchema = z.object({
+  draft: ArticleSchema.optional(),
+  approved: z.boolean().default(false),
+})
+
+const articleRouter = defineRouter(
+  {
+    name: 'article-router',
+    state: ArticleStateSchema,
+  },
+  async function* ({ input, state }) {
+    if (!state.draft) {
+      return {
+        agent: 'writer',
+        input: {
+          topic: input.topic,
+        },
+      }
+    }
+
+    if (!state.approved) {
+      return {
+        agent: 'editor',
+        input: {
+          article: state.draft,
+        },
+      }
+    }
+
+    return {
+      done: true,
+      output: succeed({
+        article: state.draft,
+      }),
+    }
+  },
+)
+
+export const articleOrchestrator = defineOrchestrator({
+  name: 'article-orchestrator',
+  input: ArticleInputSchema,
+  output: ArticleWorkflowOutputSchema,
+  agents: {
+    writer,
+    editor,
+  },
+  router: articleRouter,
+})
+```
+
+Routers may also yield if their decision needs async work, but their return value is the important part: either the next `{ agent, input }` pair to run or `{ done, output }` when orchestration is complete.
+
+That gives you the same behavior with a different control-flow style. A workflow puts the sequence directly in the generator body. An orchestrator puts the next-step decision in a router.
+
+## Try it and send feedback
+
+If you are building multi-step AI product flows, this is the moment to test the shape. This is a PR build meant for evaluation, demos, and feedback — the public API can still change before stabilization.
+
+Install the PR packages directly from pkg.pr.new:
+
+```bash
+npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-orchestration@542
+npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai@542
+npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-react@542
+npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-client@542
+npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-openai@542
+```
+
+Full documentation for this PR lives on the GitHub branch, not the released TanStack docs site:
+
+- [Overview](https://github.com/TanStack/ai/blob/worktree-cryptic-singing-wadler/docs/orchestration/overview.md)
+- [Workflows guide](https://github.com/TanStack/ai/blob/worktree-cryptic-singing-wadler/docs/orchestration/workflows.md)
+- [Orchestrators](https://github.com/TanStack/ai/blob/worktree-cryptic-singing-wadler/docs/orchestration/orchestrators.md)
+- [Approvals](https://github.com/TanStack/ai/blob/worktree-cryptic-singing-wadler/docs/orchestration/approvals.md)
+- [Run persistence](https://github.com/TanStack/ai/blob/worktree-cryptic-singing-wadler/docs/orchestration/run-persistence.md)
+- [API reference](https://github.com/TanStack/ai/blob/worktree-cryptic-singing-wadler/docs/api/ai-orchestration.md)
+
+Then share demos, feedback, and rough edges on [PR 542](https://github.com/TanStack/ai/pull/542) before the API stabilizes.
diff --git a/src/blog/tanstack-ai-realtime-voice-chat.md b/src/blog/tanstack-ai-realtime-voice-chat.md
new file mode 100644
index 000000000..78f831dd7
--- /dev/null
+++ b/src/blog/tanstack-ai-realtime-voice-chat.md
@@ -0,0 +1,561 @@
+---
+title: 'Talk to Your AI: Realtime Voice Chat in TanStack AI'
+published: 2026-03-12
+excerpt: Text-based chat is table stakes. TanStack AI now ships first-class support for realtime voice conversations — real voice, real time, with the AI hearing you, thinking, and responding naturally.
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![Talk to Your AI: Realtime Voice Chat in TanStack AI](/blog-assets/tanstack-ai-realtime-voice-chat/header.webp)
+
+Text-based chat is table stakes. The next wave of AI applications is conversational — real voice, real time, with the AI hearing you, thinking, and responding as naturally as a phone call. TanStack AI now ships first-class support for **realtime voice conversations**, with a clean provider-agnostic architecture, client-side tool execution, multimodal input, and a React hook that makes the whole thing feel like building a form.
+
+Two providers are supported out of the box: **OpenAI Realtime** (via WebRTC) and **ElevenLabs** (via WebSocket). The adapter system means more providers can slot in without touching your application code.
+
+## The Architecture: Tokens on the Server, Connections on the Client
+
+Realtime voice chat has a fundamental constraint that text chat doesn't: the audio stream connects **directly from the browser to the provider**. You can't proxy a WebRTC session through your server. But you also can't ship your API key to the client.
+
+TanStack AI solves this with a **token/connection split**:
+
+1. Your server generates a short-lived ephemeral token using `realtimeToken()` — this never exposes your API key
+2. Your client uses that token to establish a direct connection via a provider-specific adapter
+3. Audio capture, playback, tool execution, and state management all happen client-side through `useRealtimeChat`
+
+The token is the only thing that crosses your server boundary. Everything else is a direct browser-to-provider stream.
+
+## Server Side: One Function, Any Provider
+
+The server-side surface is intentionally tiny. Generate a token, return it to the client:
+
+```typescript
+import { realtimeToken } from '@tanstack/ai'
+import { openaiRealtimeToken } from '@tanstack/ai-openai'
+
+// In your API route / server function
+const token = await realtimeToken({
+  adapter: openaiRealtimeToken({
+    model: 'gpt-realtime-1.5',
+  }),
+})
+
+// Return `token` to the client
+```
+
+For ElevenLabs, swap the adapter:
+
+```typescript
+import { elevenlabsRealtimeToken } from '@tanstack/ai-elevenlabs'
+
+const token = await realtimeToken({
+  adapter: elevenlabsRealtimeToken({
+    agentId: process.env.ELEVENLABS_AGENT_ID!,
+  }),
+})
+```
+
+That's the entire server-side implementation. The token adapters handle the provider-specific session creation (OpenAI's `/v1/realtime/sessions` endpoint, ElevenLabs' signed URL generation) and return a uniform `RealtimeToken` with `token`, `expiresAt`, and `config`. The client auto-refreshes tokens before they expire.
+
+## Client Side: `useRealtimeChat`
+
+The React hook is where the magic happens. It manages the entire connection lifecycle, audio capture/playback, voice activity detection, tool execution, message state, and audio visualization — all behind a single hook:
+
+```typescript
+import { useRealtimeChat } from '@tanstack/ai-react'
+import { openaiRealtime } from '@tanstack/ai-openai'
+
+function VoiceChat() {
+  const {
+    // Connection
+    status,       // 'idle' | 'connecting' | 'connected' | 'reconnecting' | 'error'
+    error,
+    connect,
+    disconnect,
+
+    // Conversation
+    mode,         // 'idle' | 'listening' | 'thinking' | 'speaking'
+    messages,
+    pendingUserTranscript,
+    pendingAssistantTranscript,
+
+    // Voice control
+    startListening,
+    stopListening,
+    interrupt,
+
+    // Input
+    sendText,
+    sendImage,
+
+    // Audio visualization
+    inputLevel,
+    outputLevel,
+  } = useRealtimeChat({
+    getToken: () => fetch('/api/realtime-token').then((r) => r.json()),
+    adapter: openaiRealtime(),
+    voice: 'alloy',
+    instructions: 'You are a helpful voice assistant. Keep responses concise.',
+  })
+
+  return (
+    <div>
+      <p>Status: {status} | Mode: {mode}</p>
+
+      {status === 'idle' ? (
+        <button onClick={connect}>Start Conversation</button>
+      ) : (
+        <button onClick={disconnect}>End Conversation</button>
+      )}
+
+      {mode === 'speaking' && (
+        <button onClick={interrupt}>Interrupt</button>
+      )}
+    </div>
+  )
+}
+```
+
+That's a working voice chat. The hook requests microphone access on connect, streams audio to the provider, plays back the AI's response, tracks transcripts in real time, and tears everything down on disconnect or unmount.
+
+## What `mode` Tells You
+
+The `mode` state gives you a single value that describes what's happening in the conversation right now:
+
+| Mode        | What's Happening                                   |
+| ----------- | -------------------------------------------------- |
+| `idle`      | Silence — no one is speaking                       |
+| `listening` | The user is speaking and the AI is hearing them    |
+| `thinking`  | The AI received input and is generating a response |
+| `speaking`  | The AI is producing audio output                   |
+
+This is enough to build responsive UI indicators — pulsing microphone icons, thinking spinners, speaking animations — without managing multiple boolean flags.
+
+## Voice Activity Detection: Three Modes
+
+How does the system know when the user starts and stops talking? That's voice activity detection (VAD), and TanStack AI supports three modes:
+
+```typescript
+useRealtimeChat({
+  // ...
+  vadMode: 'server', // Provider detects speech server-side (default)
+  vadMode: 'semantic', // Uses semantic understanding for turn boundaries (OpenAI only)
+  vadMode: 'manual', // You control start/stop via startListening() / stopListening()
+})
+```
+
+**Server VAD** is the simplest — the provider handles everything. **Semantic VAD** (OpenAI only) uses the model's understanding of conversation flow to decide when the user is done speaking, controlled by the `semanticEagerness` option (`'low'`, `'medium'`, `'high'`). **Manual** mode gives you full control for push-to-talk UIs:
+
+```typescript
+function PushToTalk() {
+  const { connect, startListening, stopListening, mode } = useRealtimeChat({
+    getToken: () => fetch('/api/realtime-token').then((r) => r.json()),
+    adapter: openaiRealtime(),
+    vadMode: 'manual',
+    autoCapture: false,
+  })
+
+  return (
+    <button
+      onPointerDown={startListening}
+      onPointerUp={stopListening}
+    >
+      {mode === 'listening' ? 'Release to Send' : 'Hold to Talk'}
+    </button>
+  )
+}
+```
+
+## Tools: The Same Definitions, Running on the Client
+
+The realtime system uses TanStack AI's isomorphic `toolDefinition()` system. Define your tool once with Zod schemas, implement it with `.client()`, and pass it directly to `useRealtimeChat`:
+
+```typescript
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+
+const getCurrentTime = toolDefinition({
+  name: 'getCurrentTime',
+  description: 'Get the current date and time.',
+  inputSchema: z.object({
+    timezone: z.string().optional(),
+  }),
+  outputSchema: z.object({
+    time: z.string(),
+    date: z.string(),
+    timezone: z.string(),
+  }),
+}).client(({ timezone }) => {
+  const tz = timezone || Intl.DateTimeFormat().resolvedOptions().timeZone
+  const now = new Date()
+  return {
+    time: now.toLocaleTimeString('en-US', { timeZone: tz }),
+    date: now.toLocaleDateString('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      timeZone: tz,
+    }),
+    timezone: tz,
+  }
+})
+
+const getWeather = toolDefinition({
+  name: 'getWeather',
+  description: 'Get the current weather for a location.',
+  inputSchema: z.object({
+    location: z.string(),
+  }),
+  outputSchema: z.object({
+    location: z.string(),
+    temperature: z.number(),
+    condition: z.string(),
+  }),
+}).client(async ({ location }) => {
+  const res = await fetch(
+    `/api/weather?location=${encodeURIComponent(location)}`,
+  )
+  return res.json()
+})
+```
+
+Then pass them in:
+
+```typescript
+useRealtimeChat({
+  getToken: () => fetch('/api/realtime-token').then((r) => r.json()),
+  adapter: openaiRealtime(),
+  tools: [getCurrentTime, getWeather],
+  instructions: `You are a voice assistant with access to tools.
+    You can tell the user the time and check the weather.
+    Keep responses concise since this is voice.`,
+})
+```
+
+When the AI decides to call a tool, the `RealtimeClient` executes it locally in the browser, sends the result back to the provider, and the AI continues talking with the tool's output. The user hears a natural response — "It's currently 72 degrees and sunny in San Francisco" — with no visible round-trip.
+
+## Multimodal Input: Text and Images Alongside Voice
+
+Voice is the primary input, but you're not limited to it. `sendText()` lets users type when voice isn't practical, and `sendImage()` (OpenAI only) lets users share images for the AI to see and discuss:
+
+```typescript
+function MultimodalChat() {
+  const { sendText, sendImage, status } = useRealtimeChat({ /* ... */ })
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    const reader = new FileReader()
+    reader.onload = () => {
+      const base64 = (reader.result as string).split(',')[1]!
+      sendImage(base64, file.type)
+    }
+    reader.readAsDataURL(file)
+  }
+
+  return (
+    <div>
+      {/* Text fallback */}
+      <form onSubmit={(e) => {
+        e.preventDefault()
+        const input = e.currentTarget.elements.namedItem('msg') as HTMLInputElement
+        sendText(input.value)
+        input.value = ''
+      }}>
+        <input name="msg" placeholder="Type a message..." />
+        <button type="submit">Send</button>
+      </form>
+
+      {/* Image input */}
+      <input type="file" accept="image/*" onChange={handleImageUpload} />
+    </div>
+  )
+}
+```
+
+The user can be mid-conversation by voice, snap a photo, send it, and ask "What's in this image?" — all within the same realtime session.
+
+## Audio Visualization
+
+The hook exposes audio levels and raw frequency/time-domain data for building visualizations:
+
+```typescript
+const {
+  inputLevel, // 0-1 normalized microphone volume
+  outputLevel, // 0-1 normalized speaker volume
+  getInputFrequencyData, // Uint8Array — FFT frequency bins
+  getOutputFrequencyData,
+  getInputTimeDomainData, // Uint8Array — waveform samples
+  getOutputTimeDomainData,
+} = useRealtimeChat({
+  /* ... */
+})
+```
+
+`inputLevel` and `outputLevel` update on every animation frame while connected — use them for simple volume bars:
+
+```typescript
+<div className="h-2 bg-gray-700 rounded-full overflow-hidden">
+  <div
+    className="h-full bg-green-500 transition-all duration-75"
+    style={{ width: `${inputLevel * 100}%` }}
+  />
+</div>
+```
+
+For waveform or frequency visualizations, use the raw data getters with a canvas:
+
+```typescript
+function Waveform({ getData }: { getData: () => Uint8Array }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    let frameId: number
+    function draw() {
+      const canvas = canvasRef.current
+      if (!canvas) return
+      const ctx = canvas.getContext('2d')!
+      const data = getData()
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      ctx.beginPath()
+      ctx.strokeStyle = '#22c55e'
+      ctx.lineWidth = 2
+
+      const sliceWidth = canvas.width / data.length
+      let x = 0
+      for (let i = 0; i < data.length; i++) {
+        const y = (data[i]! / 255) * canvas.height
+        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y)
+        x += sliceWidth
+      }
+      ctx.stroke()
+      frameId = requestAnimationFrame(draw)
+    }
+    draw()
+    return () => cancelAnimationFrame(frameId)
+  }, [getData])
+
+  return <canvas ref={canvasRef} width={200} height={40} />
+}
+
+// Usage
+<Waveform getData={getInputTimeDomainData} />
+<Waveform getData={getOutputTimeDomainData} />
+```
+
+## Live Transcripts
+
+While the user or assistant is speaking, you get streaming transcription via `pendingUserTranscript` and `pendingAssistantTranscript`. These update in real time as speech is recognized and are cleared when the final message is committed to `messages`:
+
+```typescript
+{pendingUserTranscript && (
+  <p className="italic opacity-60">{pendingUserTranscript}...</p>
+)}
+
+{pendingAssistantTranscript && (
+  <p className="italic opacity-60">{pendingAssistantTranscript}...</p>
+)}
+```
+
+Final messages land in the `messages` array as `RealtimeMessage` objects with typed `parts` — `text`, `audio` (with transcript), `image`, `tool-call`, and `tool-result`:
+
+```typescript
+messages.map((msg) => (
+  <div key={msg.id}>
+    {msg.parts.map((part, i) => {
+      if (part.type === 'audio') return <p key={i}>{part.transcript}</p>
+      if (part.type === 'text') return <p key={i}>{part.content}</p>
+      if (part.type === 'image') return <img key={i} src={`data:${part.mimeType};base64,${part.data}`} />
+      return null
+    })}
+    {msg.interrupted && <span>(interrupted)</span>}
+  </div>
+))
+```
+
+## Interruptions
+
+Users can interrupt the AI mid-sentence — just start talking (with server/semantic VAD) or call `interrupt()` programmatically. The AI stops speaking, the interrupted message is marked with `interrupted: true`, and the conversation continues naturally. The `onInterrupted` callback fires so you can update UI state:
+
+```typescript
+useRealtimeChat({
+  // ...
+  onInterrupted: () => {
+    console.log('User interrupted the AI')
+  },
+})
+```
+
+## Session Configuration
+
+The full set of session options covers everything you need to tune the voice experience:
+
+```typescript
+useRealtimeChat({
+  getToken: () => fetch('/api/realtime-token').then((r) => r.json()),
+  adapter: openaiRealtime(),
+
+  // Personality
+  instructions: 'You are a pirate. Respond in pirate speak.',
+  voice: 'coral', // alloy, ash, ballad, coral, echo, sage, shimmer, verse
+
+  // Generation
+  temperature: 0.9, // 0.6–1.2 for OpenAI realtime
+  maxOutputTokens: 500,
+
+  // Output control
+  outputModalities: ['audio', 'text'], // or just ['text'] for text-only responses
+
+  // VAD
+  vadMode: 'semantic',
+  semanticEagerness: 'medium', // low = waits longer, high = responds faster
+
+  // Audio
+  autoPlayback: true, // auto-play AI audio (default: true)
+  autoCapture: true, // request mic on connect (default: true)
+
+  // Tools
+  tools: [getCurrentTime, getWeather],
+
+  // Callbacks
+  onConnect: () => console.log('Connected'),
+  onDisconnect: () => console.log('Disconnected'),
+  onMessage: (msg) => console.log('New message:', msg),
+  onModeChange: (mode) => console.log('Mode:', mode),
+  onError: (err) => console.error('Error:', err),
+  onInterrupted: () => console.log('Interrupted'),
+})
+```
+
+## Switching Providers at Runtime
+
+Because adapters are just objects, you can switch providers based on user choice without restructuring your code:
+
+```typescript
+function VoiceChat({ provider }: { provider: 'openai' | 'elevenlabs' }) {
+  const adapter =
+    provider === 'openai' ? openaiRealtime() : elevenlabsRealtime()
+
+  const { status, connect, disconnect, messages, mode } = useRealtimeChat({
+    getToken: () =>
+      fetch('/api/realtime-token', {
+        method: 'POST',
+        body: JSON.stringify({ provider }),
+      }).then((r) => r.json()),
+    adapter,
+    voice: 'alloy',
+  })
+
+  // Same UI regardless of provider
+  // ...
+}
+```
+
+The server token endpoint picks the right adapter too:
+
+```typescript
+// Server
+async function handleTokenRequest(provider: string) {
+  if (provider === 'openai') {
+    return realtimeToken({
+      adapter: openaiRealtimeToken({ model: 'gpt-realtime-1.5' }),
+    })
+  }
+  if (provider === 'elevenlabs') {
+    return realtimeToken({
+      adapter: elevenlabsRealtimeToken({
+        agentId: process.env.ELEVENLABS_AGENT_ID!,
+      }),
+    })
+  }
+  throw new Error(`Unknown provider: ${provider}`)
+}
+```
+
+## Using the Client Directly (Without React)
+
+If you're not using React — or need lower-level control — the `RealtimeClient` class from `@tanstack/ai-client` provides the same functionality without framework coupling:
+
+```typescript
+import { RealtimeClient } from '@tanstack/ai-client'
+import { openaiRealtime } from '@tanstack/ai-openai'
+
+const client = new RealtimeClient({
+  getToken: () => fetch('/api/realtime-token').then((r) => r.json()),
+  adapter: openaiRealtime(),
+  instructions: 'You are a helpful assistant.',
+  voice: 'alloy',
+  tools: [getCurrentTime, getWeather],
+  onStatusChange: (status) => console.log('Status:', status),
+  onModeChange: (mode) => console.log('Mode:', mode),
+  onMessage: (msg) => console.log('Message:', msg),
+})
+
+// Connect
+await client.connect()
+
+// Listen to state changes
+const unsub = client.onStateChange((state) => {
+  console.log('Pending transcript:', state.pendingUserTranscript)
+})
+
+// Send text when voice isn't available
+client.sendText('What time is it?')
+
+// Send an image (OpenAI only)
+client.sendImage(base64Data, 'image/png')
+
+// Interrupt the AI
+client.interrupt()
+
+// Manual VAD control
+client.startListening()
+client.stopListening()
+
+// Access audio visualization
+console.log(client.audio?.inputLevel)
+
+// Clean up
+await client.disconnect()
+client.destroy()
+```
+
+This is how you'd integrate realtime voice into Solid, Vue, Svelte, or any other framework — wrap the `RealtimeClient` in your framework's reactivity primitives.
+
+## Ideas: What You Could Build
+
+The realtime system gives you the building blocks. Here's what falls out of them:
+
+**Voice-controlled dashboards** — "Show me last week's revenue" triggers a tool that queries your analytics API. The AI reads back the numbers while the dashboard updates in real time.
+
+**Multimodal customer support** — users describe a problem by voice, send a screenshot, and the AI sees both. Tool calls look up their account, check order status, or file a ticket — all executed client-side.
+
+**Language tutoring** — semantic VAD with low eagerness gives students time to think. The AI listens patiently, then responds with corrections. `pendingUserTranscript` shows what's being heard so students can self-correct.
+
+**Accessibility interfaces** — voice in, voice out, with text transcripts for deaf-accessible screen reading. `outputModalities: ['audio', 'text']` gives you both simultaneously.
+
+**Field data collection** — a technician inspects equipment, describes what they see, sends photos, and the AI logs structured data via tool calls. Push-to-talk with `vadMode: 'manual'` works in noisy environments.
+
+## Getting Started
+
+```bash
+# Core + React hook
+pnpm add @tanstack/ai @tanstack/ai-client @tanstack/ai-react
+
+# Pick your provider
+pnpm add @tanstack/ai-openai        # OpenAI Realtime (WebRTC)
+pnpm add @tanstack/ai-elevenlabs    # ElevenLabs (WebSocket)
+```
+
+Set your API key in the environment:
+
+```bash
+OPENAI_API_KEY=sk-...
+# or
+ELEVENLABS_API_KEY=...
+```
+
+The full documentation is available in the [Realtime Voice Chat Guide](https://tanstack.com/ai/latest/docs/guides/realtime-chat).
diff --git a/src/blog/tanstack-ai-the-ai-function-postmortem.md b/src/blog/tanstack-ai-the-ai-function-postmortem.md
index 2991b54c0..dfe7a804f 100644
--- a/src/blog/tanstack-ai-the-ai-function-postmortem.md
+++ b/src/blog/tanstack-ai-the-ai-function-postmortem.md
@@ -1,6 +1,8 @@
 ---
 title: 'The ai() Function That Almost Was'
 published: 2025-12-26
+excerpt: We spent eight days building an API we had to kill. One function to rule them all, one function to control all adapters, one function to make it all typesafe — here's what happened.
+library: ai
 authors:
   - Alem Tuzlak
 ---
diff --git a/src/blog/tanstack-ai-why-we-split-the-adapters.md b/src/blog/tanstack-ai-why-we-split-the-adapters.md
index af2180fc6..fe2dcba18 100644
--- a/src/blog/tanstack-ai-why-we-split-the-adapters.md
+++ b/src/blog/tanstack-ai-why-we-split-the-adapters.md
@@ -1,6 +1,8 @@
 ---
 title: 'TanStack AI: Why We Split the Adapters'
 published: 2026-01-02
+excerpt: Instead of one monolithic adapter that does everything, we split into smaller adapters each in charge of a single functionality. Here's why that architectural change matters.
+library: ai
 authors:
   - Alem Tuzlak
 ---
diff --git a/src/blog/tanstack-db-0.1-the-embedded-client-database-for-tanstack-query.md b/src/blog/tanstack-db-0.1-the-embedded-client-database-for-tanstack-query.md
index 960399080..eb838ea64 100644
--- a/src/blog/tanstack-db-0.1-the-embedded-client-database-for-tanstack-query.md
+++ b/src/blog/tanstack-db-0.1-the-embedded-client-database-for-tanstack-query.md
@@ -1,6 +1,8 @@
 ---
 title: Stop Re-Rendering. TanStack DB, the Embedded Client Database for TanStack Query
 published: 2025-07-30
+excerpt: Your React dashboard shouldn't grind to a halt because one TODO gets checked. TanStack DB is a client-side database powered by differential dataflow that plugs into your existing useQuery calls.
+library: db
 authors:
   - Kyle Mathews
   - Sam Willis
diff --git a/src/blog/tanstack-db-0.5-query-driven-sync.md b/src/blog/tanstack-db-0.5-query-driven-sync.md
index f9ce0bce1..bb60765c8 100644
--- a/src/blog/tanstack-db-0.5-query-driven-sync.md
+++ b/src/blog/tanstack-db-0.5-query-driven-sync.md
@@ -1,6 +1,8 @@
 ---
 title: TanStack DB 0.5 .  Query-Driven Sync
 published: 2025-11-12
+excerpt: Your component's query is now the API call. No custom endpoint, no GraphQL resolver, no backend change. TanStack DB 0.5 introduces query-driven sync that eliminates the glue code between your UI and your data.
+library: db
 authors:
   - Sam Willis
   - Kevin De Porre
diff --git a/src/blog/tanstack-db-0.6-app-ready-with-persistence-and-includes.md b/src/blog/tanstack-db-0.6-app-ready-with-persistence-and-includes.md
new file mode 100644
index 000000000..4972b9ce7
--- /dev/null
+++ b/src/blog/tanstack-db-0.6-app-ready-with-persistence-and-includes.md
@@ -0,0 +1,505 @@
+---
+title: TanStack DB 0.6 Now Includes Persistence, Offline Support, and Hierarchical Data
+excerpt: TanStack DB 0.6 adds SQLite-backed persistence across runtimes, hierarchical includes for projecting normalized data into UI-shaped trees, reactive effects, virtual props for sync state, and more.
+published: 2026-03-25
+draft: false
+library: db
+authors:
+  - Sam Willis
+  - Kevin De Porre
+---
+
+![Persistence, Offline Support, and Hierarchical Data](/blog-assets/tanstack-db-0.6-app-ready-with-persistence-and-includes/header.jpg)
+
+With v0.6 of TanStack DB, we're bringing some highly anticipated features and improving the ergonomics for app development.
+
+You can now project normalized data into the same hierarchical shape as your UI, persist local state across runtimes with a SQLite-backed layer, and trigger reactive side effects directly from live queries. Row metadata unlocks outbox views and delivery indicators (think WhatsApp-style), and APIs that previously relied on implicit behavior are now explicit and consistent.
+
+Here’s what shipped:
+
+- [Persistent local state](#persistent-local-state) via SQLite-backed adapters across browser, React Native, Expo, Node, Electron, Capacitor, Tauri, and Cloudflare Durable Objects
+- [Includes](#includes-project-your-data-into-the-same-shape-as-your-ui) for projecting normalized data into the hierarchical structure of your UI. Similar to GraphQL, but without the need for new infrastructure.
+- [`createEffect`](#createeffect-reactive-side-effects-for-workflows-tools-and-agents) for reactive workflows, side effects, and agent-style automation
+- [Virtual props](#virtual-props-outboxes-delivery-state-and-row-provenance) (`$synced`, `$origin`) for outbox views, sync indicators, and provenance-aware queries
+- [`queryOnce`](#queryonce) for one-shot queries using the same language as live queries
+- Indexes are now opt-in, and mutation handlers no longer rely on implicit return behavior (see [migration notes](#migration-notes))
+
+If you have been watching TanStack DB and waiting for it to feel like a more complete application data layer, this release moves it in that direction.
+
+If you're upgrading an existing app, jump straight to the [migration notes](#migration-notes).
+
+We are also putting out [a call for server-side rendering (SSR) design partners](#toward-v1-help-us-get-ssr-right) as we work toward v1.
+
+Finally, [PowerSync](https://www.powersync.com/) and [Trailbase](https://trailbase.io/) now support incremental sync with TanStack DB. This builds on the incremental sync model introduced for Query Collections and ElectricSQL in [TanStack DB 0.5: Query-Driven Sync](/blog/tanstack-db-0.5-query-driven-sync), extending it to additional backends.
+
+## Shopping List Demo App
+
+One of the best examples of what 0.6 unlocks is our React Native shopping list demo.
+
+<iframe
+  width="100%"
+  style="aspect-ratio: 16/9;"
+  src="https://www.youtube.com/embed/EBXOjQds8hU"
+  title="TanStack DB 0.6 Shopping List Demo"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+></iframe>
+
+It starts with persisted SQLite state via `op-sqlite`, projects normalized data into a hierarchical UI shape with [includes](#includes-project-your-data-into-the-same-shape-as-your-ui), and retains TanStack DB’s fine-grained reactivity underneath. The key shift is what that persistence enables when paired with [`@tanstack/offline-transactions`](https://github.com/TanStack/db/tree/main/packages/offline-transactions).
+
+TanStack DB already had the query engine, transaction model, optimistic updates, and the offline transaction API. Persistence was the missing piece. Once local state is durable, that stack can add up to something fully local-first instead of only feeling local while the app is open.
+
+### More than local-first
+
+Persistence is the most requested feature, but it does not define TanStack DB. The core idea is simpler: put a real transactional query engine on the client, and let storage and synchronization live wherever they belong. Local-first is one configuration of that. Server-authoritative with fast optimistic updates is another. Both are supported by the same primitives.
+
+## Persistent local state
+
+Persistence is the biggest practical unlock in 0.6.
+
+We’ve wanted a persistence layer for a while, and many of you have asked for it. The problem space was always broader than just "save some rows to disk":
+
+- not just faster startup
+- must compose with synced remote state and optimistic local state
+- must work across runtimes
+- must handle large datasets without assuming everything lives in memory
+- must support multiple tabs and windows
+- must have a sane approach to schema evolution
+
+That led to a pragmatic choice: **use SQLite as the persistence layer**.
+
+This gives TanStack DB a single persistence model that spans:
+
+- browser (via SQLite WASM)
+- React Native and Expo
+- Node
+- Electron
+- Tauri
+- Capacitor
+- Cloudflare Durable Objects
+
+Instead of building separate storage layers per environment, TanStack DB keeps one model with runtime-specific adapters. The result is optional persistent local state that enables local-first applications without constraining other architectures.
+
+For synced collections, persistence does **not** change the source of truth. The server remains authoritative. Persistence provides a durable local base for fast startup, offline work, and reconciliation back to the upstream source of truth when sync resumes.
+
+In practice, the React Native setup looks like this:
+
+```typescript
+import { open } from '@op-engineering/op-sqlite'
+import { createCollection } from '@tanstack/db'
+import { queryCollectionOptions } from '@tanstack/query-db-collection'
+import {
+  createReactNativeSQLitePersistence,
+  persistedCollectionOptions,
+} from '@tanstack/react-native-db-sqlite-persistence'
+
+type ShoppingItem = {
+  id: string
+  title: string
+  completed: boolean
+}
+
+const database = open({
+  name: `tanstack-db.sqlite`,
+  location: `default`,
+})
+
+const persistence = createReactNativeSQLitePersistence({
+  database,
+})
+
+export const shoppingItemsCollection = createCollection(
+  persistedCollectionOptions<ShoppingItem, string>({
+    persistence,
+    schemaVersion: 1,
+    ...queryCollectionOptions({
+      queryKey: ['shopping-items'],
+      queryFn: async () => api.shoppingItems.getAll(),
+      getKey: (item) => item.id,
+      onInsert: async ({ transaction }) => {
+        await api.shoppingItems.createBatch(transaction.mutations)
+      },
+    }),
+  }),
+)
+```
+
+That gives you a durable local base for a synced collection. Paired with `@tanstack/offline-transactions`, it also enables durable writes for a local-first flow.
+
+You can also use `persistedCollectionOptions(...)` without wrapping another synced collection config at all. In that mode, it is simply local state persisted to SQLite:
+
+```typescript
+const localDraftsCollection = createCollection(
+  persistedCollectionOptions<Draft, string>({
+    id: `drafts`,
+    getKey: (draft) => draft.id,
+    persistence,
+    schemaVersion: 1,
+  }),
+)
+```
+
+`schemaVersion` is the switch that keeps these modes honest. For synced collections, changing it clears the persisted local copy and triggers a re-sync from the server. For unsynced local-only collections, changing it throws and requires the application to handle migration explicitly.
+
+This same persistence story also extends beyond UI runtimes. As shown later in [createEffect](#createeffect-reactive-side-effects-for-workflows-tools-and-agents), a persistent TanStack DB running in environments like Cloudflare Durable Objects starts to resemble a state engine for workflows and agents.
+
+### Why SQLite
+
+Using SQLite in the browser is a pragmatic choice for both users and the project.
+
+We considered a split design where the browser used IndexedDB directly to avoid the SQLite WASM download. That path introduced tradeoffs: a more awkward indexing model, more complex connection management, and a divergent query architecture where the browser behaved differently from other runtimes. One sharp edge was that adding indexes required disconnecting all active connections, which does not fit well with TanStack DB’s dynamic usage.
+
+Standardizing on a single persistence engine keeps the model consistent and allows it to extend across mobile, desktop, server, edge, and agent-style runtimes without introducing per-environment complexity.
+
+We also evaluated the cost of the WASM bundle. In practice, for apps already syncing data to the client, the additional cost is relatively small. The tradeoff favors a more consistent persistence and query model over minimizing initial payload size.
+
+### Why this matters
+
+In practice, 0.6 gives you:
+
+- faster restarts
+- durable local state, including synced data and pending mutations
+- more practical offline-first UX
+- a consistent DB mental model across mobile, browser, desktop, server, edge, and agent runtimes
+
+This is the first _alpha_ release of persistence, and so we want to hear your feedback.
+
+## Includes: project your data into the same shape as your UI
+
+All UIs are hierarchical.
+
+Most data systems force a tradeoff: flat relational queries that require manual reshaping, or nested loading patterns that introduce N+1 queries and duplicated work.
+
+GraphQL tackles a similar problem from the server side: give the UI a hierarchical shape without forcing every client to manually stitch flat records back together.
+
+`includes` brings that same idea to the client. It lets you retrieve normalized data and project it directly into the hierarchical structure your UI renders—across any TanStack DB data source, without requiring GraphQL infrastructure.
+
+Instead of flattening `projects`, `issues`, and `comments` into repeated rows and rebuilding the tree yourself, you can express the hierarchy directly in the query:
+
+```typescript
+import { createLiveQueryCollection, eq } from '@tanstack/db'
+
+const projectsWithIssues = createLiveQueryCollection((q) =>
+  q.from({ p: projectsCollection }).select(({ p }) => ({
+    id: p.id,
+    name: p.name,
+    issues: q
+      .from({ i: issuesCollection })
+      .where(({ i }) => eq(i.projectId, p.id))
+      .select(({ i }) => ({
+        id: i.id,
+        title: i.title,
+        comments: q
+          .from({ c: commentsCollection })
+          .where(({ c }) => eq(c.issueId, i.id))
+          .select(({ c }) => ({
+            id: c.id,
+            body: c.body,
+          })),
+      })),
+  })),
+)
+```
+
+The query above fetches all projects and, for each one, includes its issues and each issue's comments through nested sub-queries. The result is a collection of `{ id, name, issues }` objects where the nested fields are also collections.
+
+### Why this is different
+
+The key detail is that the entire nested query runs as **one incremental query graph**.
+
+- avoids the N+1 problem
+- builds a single query graph, not one per row
+- batches server fetches for includes instead of issuing one request per row
+- preserves TanStack DB’s fine-grained incremental update model
+
+This is not just a projection API—it improves both performance and system behavior.
+
+### Fine-grained reactivity by default
+
+Includes also keep fine-grained reactivity intact.
+
+By default, each included field is materialized as a **child collection**. The parent row does not re-render when child data changes. Instead, you pass the child collection to a child component, call `useLiveQuery(childCollection)`, and only that component updates.
+
+This gives you a hierarchical UI shape without sacrificing TanStack DB’s granular reactivity, while centralizing data requirements instead of scattering them across components and loaders.
+
+```typescript
+import { useLiveQuery } from '@tanstack/react-db'
+import { eq } from '@tanstack/db'
+
+function ProjectList() {
+  const { data: projects } = useLiveQuery((q) =>
+    q.from({ p: projectsCollection }).select(({ p }) => ({
+      id: p.id,
+      name: p.name,
+      issues: q
+        .from({ i: issuesCollection })
+        .where(({ i }) => eq(i.projectId, p.id))
+        .select(({ i }) => ({
+          id: i.id,
+          title: i.title,
+        })),
+    })),
+  )
+
+  return (
+    <ul>
+      {projects.map((project) => (
+        <li key={project.id}>
+          <h3>{project.name}</h3>
+          <IssueList issuesCollection={project.issues} />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function IssueList({ issuesCollection }) {
+  const { data: issues } = useLiveQuery(issuesCollection)
+
+  return <ul>{issues.map((issue) => <li key={issue.id}>{issue.title}</li>)}</ul>
+}
+```
+
+### `toArray()` when you want materialized projections
+
+Sometimes a child collection is unnecessary. For simple aggregates, small lists (e.g. tags), or cases where a child render boundary adds overhead, `toArray()` lets you materialize the child query directly in the projection layer.
+
+```typescript
+import { createLiveQueryCollection, eq, toArray } from '@tanstack/db'
+
+const projectsWithIssueTags = createLiveQueryCollection((q) =>
+  q.from({ p: projectsCollection }).select(({ p }) => ({
+    id: p.id,
+    name: p.name,
+    issues: toArray(
+      q
+        .from({ i: issuesCollection })
+        .where(({ i }) => eq(i.projectId, p.id))
+        .select(({ i }) => ({
+          id: i.id,
+          title: i.title,
+        })),
+    ),
+  })),
+)
+```
+
+With `toArray()`, the parent row is re-emitted when the child data changes. Without it, the child `Collection` updates independently.
+
+### What shipped with includes
+
+Includes in 0.6 support:
+
+- arbitrarily nested subqueries, with child collections by default
+- `toArray()` for materialized arrays when needed
+- aggregates within child subqueries
+- `orderBy()` and `limit()` inside subqueries
+- child subqueries filtered by their parent row
+- patterns that preserve fine-grained updates at each level across frameworks
+
+Taken together, this is one of the largest additions in the release, making TanStack DB better suited for building application-shaped views over normalized data.
+
+## `createEffect`: reactive side effects for workflows, tools, and agents
+
+`createEffect` adds a reactive side-effect layer on top of live queries.
+
+It behaves like a database trigger, but operates on the result of an arbitrary live query rather than writes to a single table. Side effects are defined from the shape of the data you care about, not just low-level mutations.
+
+Effects do **not** materialize the full query result into a collection. They run incrementally on query-result deltas, keeping memory usage low and avoiding manual diffing. This aligns with the query engine’s incremental model and makes effects well-suited for workflow logic.
+
+The three event types map directly to query-result transitions:
+
+- `enter`: a row has entered the query result
+- `update`: a row changed but stayed in the query result
+- `exit`: a row left the query result
+
+Effects can be triggered by both local changes and synced updates. This supports standard workflow automation and extends naturally to agent-style systems: persist jobs or generations in a collection, define a query for items ready to run, and use `onEnter` to trigger the next step. State lives in TanStack DB, workflows react to query results, and the UI updates from the same source of truth.
+
+```typescript
+import { createEffect, eq } from '@tanstack/db'
+
+const effect = createEffect({
+  query: (q) =>
+    q
+      .from({ job: agentJobsCollection })
+      .where(({ job }) => eq(job.status, 'ready')),
+  skipInitial: true,
+  onEnter: async (event, ctx) => {
+    await runAgentStep(event.value, { signal: ctx.signal })
+  },
+  onError: (error, event) => {
+    console.error(`Failed to run job ${event.key}:`, error)
+  },
+})
+
+// Later
+await effect.dispose()
+```
+
+Combined with [persistent local state](#persistent-local-state) in environments like Cloudflare Durable Objects, TanStack DB starts to resemble a durable state engine for agent workflows, not just a UI data layer.
+
+This is one example, but it highlights how the 0.6 features work together: [includes](#includes-project-your-data-into-the-same-shape-as-your-ui), [virtual props](#virtual-props-outboxes-delivery-state-and-row-provenance), and reactive effects compose into something more capable than any single feature in isolation.
+
+## Virtual props: outboxes, delivery state, and row provenance
+
+Virtual props make row state visible directly in the query layer.
+
+They are:
+
+- `$synced`: whether the row is confirmed by sync or still only local/optimistic
+- `$origin`: whether the last confirmed change came from this client or from upstream sync
+- `$key`: the row key for the result
+- `$collectionId`: the source collection ID
+
+They can be used for workflow automation with `createEffect`, but are also immediately useful in the UI:
+
+- outbox views of unpersisted data
+- delivery or sync state indicators
+- double-tick style UI patterns (e.g. WhatsApp)
+
+Virtual props are one of those deceptively small features that end up being useful everywhere.
+
+```typescript
+import { createLiveQueryCollection, eq } from '@tanstack/db'
+
+const outbox = createLiveQueryCollection({
+  id: `outbox`,
+  query: (q) =>
+    q
+      .from({ item: messagesCollection })
+      .where(({ item }) => eq(item.$synced, false))
+      .select(({ item }) => ({
+        id: item.id,
+        body: item.body,
+        synced: item.$synced,
+        origin: item.$origin,
+      })),
+})
+```
+
+That query can drive a full outbox view, or smaller UI elements like delivery indicators in a chat interface. Because these props are queryable, they also pair naturally with [createEffect](#createeffect-reactive-side-effects-for-workflows-tools-and-agents) when you want workflows driven by optimistic or confirmed state transitions.
+
+## queryOnce
+
+Not every query needs to stay live.
+
+`queryOnce` gives TanStack DB a clean one-shot execution path for things like:
+
+- loaders
+- scripts
+- exports
+- tests
+- AI and LLM context building
+
+It is a small feature, but it completes the API in an important way. You can now use the same query language for both reactive and one-off reads.
+
+```typescript
+import { eq, queryOnce } from '@tanstack/db'
+
+const activeUsers = await queryOnce((q) =>
+  q
+    .from({ user: usersCollection })
+    .where(({ user }) => eq(user.active, true))
+    .select(({ user }) => ({ id: user.id, name: user.name })),
+)
+```
+
+## Migration notes
+
+0.6 also includes a few API cleanups and typing changes that are worth checking when you upgrade.
+
+### Cleaner nullable join typing
+
+This one is subtle, but important.
+
+TanStack DB uses JavaScript proxies in the declarative query builder to trace expressions like `dept.name` and turn them into query IR. In outer joins, the _resolved value_ may be optional in the final result, but **inside the query builder the proxy itself always exists**. Previously, types sometimes exposed joined refs as optional, implying you needed conditional logic in the query expression. That was misleading and led to bugs.
+
+In 0.6, optionality has been removed from the proxy shape and moved to a type parameter on the ref itself. Editor hints still reflect nullability, and the final query result type remains correct, but the expression-builder API is now cleaner and more accurate to how it actually works.
+
+Existing code will generally keep working, but stricter type checking may now flag places where code was relying on the old, misleading optional-ref typing.
+
+### Indexes are now opt-in
+
+Indexing is no longer something you silently get by default. In 0.6, you opt into the indexing machinery when you want it.
+
+The key configuration is:
+
+- `defaultIndexType`: the **new** option that tells TanStack DB which index implementation to create when an index is needed
+- `autoIndex`: the **existing** option that controls whether TanStack DB should automatically create indexes for simple queries
+
+That gives you three practical modes:
+
+- **No indexing**: omit indexing entirely. Smaller bundles, but queries may scan local data on startup.
+- **Auto indexing**: set a `defaultIndexType` and enable `autoIndex: 'eager'`. Indexes are created on demand.
+- **Manual indexing**: call [`collection.createIndex(...)`](https://tanstack.com/db/latest/docs/reference/interfaces/Collection#createindex) for specific fields, using either a collection-level `defaultIndexType` or per-index `indexType`.
+
+These modes existed before. The change in 0.6 is that indexing code is no longer included in the bundle unless you opt in.
+
+When enabled, two index implementations are available:
+
+- `BasicIndex` from `@tanstack/db/indexing`: lightweight, minimal bundle impact; uses a `Map` + array; slower updates on larger collections
+- `BTreeIndex` from `@tanstack/db/indexing`: heavier B+tree-based option; better for larger or more demanding datasets; higher bundle cost
+
+```typescript
+import { createCollection } from '@tanstack/db'
+import { BasicIndex } from '@tanstack/db/indexing'
+
+const collection = createCollection({
+  defaultIndexType: BasicIndex,
+  autoIndex: 'eager',
+  // ...
+})
+```
+
+### Magic return removal
+
+We are removing the “magic return” behavior from mutation handlers in favor of a more explicit, uniform model. The explicit options already existed; 0.6 standardizes on using them.
+
+The rule is simple: **when your mutation handler promise resolves, the optimistic state is removed.**
+
+If you need to coordinate sync behavior, do it explicitly in the handler rather than relying on implicit return values. This makes the API easier to reason about and consistent across collection types.
+
+```typescript
+// QueryCollection before: implicit "magic return" behavior
+onInsert: async ({ transaction }) => {
+  await writeToBackend(transaction)
+  return { refetch: false }
+}
+
+// QueryCollection after: explicit sync coordination
+onInsert: async ({ transaction, collection }) => {
+  await writeToBackend(transaction)
+  await collection.utils.refetch()
+}
+
+// ElectricCollection before: implicit txid return
+onInsert: async ({ transaction }) => {
+  const txid = await writeToBackendAndReturnTxId(transaction)
+  return { txid }
+}
+
+// ElectricCollection after: explicit txid waiting
+onInsert: async ({ transaction, collection }) => {
+  const txid = await writeToBackendAndReturnTxId(transaction)
+  await collection.utils.awaitTxId(txid)
+}
+```
+
+## Toward v1: help us get SSR right
+
+TanStack DB 0.6 closes a lot of the gaps people were experiencing.
+
+One major piece remains on the path to v1: **server-side rendering (SSR)**. We want to get this right.
+
+TanStack DB differs from TanStack Query and traditional API-driven architectures. The SSR story is not simply “do what Query does, but for DB.” It involves a different execution model, a different relationship between local and remote state, and different tradeoffs around hydration, persistence, and live updates.
+
+Rather than shipping a shallow solution, we are working with design partners to shape this properly. We are exploring SSR support and want input from teams planning to use TanStack DB in production.
+
+If that applies to you, fill out the form and share details about your app, constraints, and what a strong SSR model would require. We will set up calls with teams, interview them to understand the requirements and run proposals past them as we shape the design.
+
+- [Fill out the SSR design partner form](https://docs.google.com/forms/d/e/1FAIpQLSdoCZ_Z5uODArGpGkVI4tbU7q9qHAcGAXYYEoP9HFq3aKNs3A/viewform?usp=publish-editor).
+
+If you have been waiting for TanStack DB to feel more complete, more durable, and more application-shaped, 0.6 is a big step in that direction.
+
+And if you want to help shape the final piece on the road to v1, we would love to hear from you.
diff --git a/src/blog/tanstack-open-source-awards-2026.md b/src/blog/tanstack-open-source-awards-2026.md
new file mode 100644
index 000000000..5f2f26532
--- /dev/null
+++ b/src/blog/tanstack-open-source-awards-2026.md
@@ -0,0 +1,44 @@
+---
+title: TanStack Start and TanStack AI Win 2026 Open Source Awards
+published: 2026-06-22
+excerpt: TanStack Start won Breakthrough of the Year and TanStack AI won AI Project of the Year at the 2026 Open Source Awards in Amsterdam.
+library: start, ai
+authors:
+  - Tanner Linsley
+---
+
+![JavaScript Open Source Awards 2026](/blog-assets/tanstack-open-source-awards-2026/header.jpg)
+
+TanStack came home from the 2026 [Open Source Awards](https://osawards.com/) with two wins. [TanStack Start](/start) won **[Breakthrough of the Year](https://x.com/schanuelmiller/status/2065335239480660421)**, and [TanStack AI](/ai) won **[AI Project of the Year](https://www.linkedin.com/posts/alem-tuzlak_i-just-won-an-award-at-jsnation-for-the-ai-activity-7470863769561206784-eHNl)**.
+
+The awards were part of the [JSNation](https://jsnation.com/) and [React Summit](https://reactsummit.com/) week in Amsterdam, with JSNation hosting the 7th annual [JavaScript Open Source Awards](https://osawards.com/javascript/) on June 11, 2026 and React Summit happening the next day. The awards page describes the work as celebrating community success and highlighting impactful open source projects, and JSNation frames the goal even more directly: shine a light on great open source work that doesn't always get enough attention in a loud ecosystem.
+
+That part means a lot to us, because those are the conditions TanStack has always lived in. We don't have a giant product company behind the roadmap. We have maintainers, contributors, sponsors, stubborn opinions about the open web, and a community that keeps pushing the work into real production apps.
+
+## Start won for the hard middle of React apps
+
+Start being named Breakthrough of the Year feels especially good because full-stack React is a crowded category, and it would have been easy for Start to look like a strange bet from the outside.
+
+The bet was that Router's type-safe route model was already the right foundation, and that a framework should add the server layer around it instead of replacing it with magic. Start keeps routes, search params, loaders, pending states, links, and navigation grounded in TanStack Router, then adds full-document SSR, streaming, server functions, server routes, bundling, and deployable output.
+
+That's a lot of surface area, but the point has stayed simple. You should be able to build a React app that can grow from SPA to SSR to server-heavy workflows without changing the mental model every time the app crosses a boundary.
+
+This award lands after years of work from the Start maintainers and contributors, and after a stretch where Start has kept getting more real: [first-class Rsbuild support](/blog/start-adds-rsbuild-support), [major SSR throughput work](/blog/tanstack-start-5x-ssr-throughput), [experimental RSC work](/blog/react-server-components), and more teams using it outside of demos.
+
+## AI won because portability still matters
+
+TanStack AI winning AI Project of the Year hits a different nerve. The AI tooling market is moving fast, and many SDKs accidentally make the same trade: first you choose the provider, then the app architecture starts bending around that provider.
+
+TanStack AI is our refusal to do that. It's a TypeScript-first, framework-agnostic, provider-agnostic SDK with typed tools, streaming UI, structured output, media and realtime primitives, middleware, orchestration, and an AG-UI-native wire story that doesn't force your app through a hosted gateway.
+
+[Alem Tuzlak](https://gitnation.com/person/alem_tuzlak) was at JSNation teaching a [TanStack AI workshop](https://gitnation.com/contents/building-ai-powered-apps-with-tanstack-ai-from-setup-to-chat-tools) and giving a talk on [how we used AI to build TanStack AI](https://gitnation.com/contents/how-we-used-ai-to-build-tanstack-ai), which made the timing especially surreal. Two days before the JavaScript ceremony, we published the [TanStack AI Beta](/blog/tanstack-ai-beta), with every major modality, stable protocol work, provider adapters, and 265 E2E tests across 10 providers. That was the version we finally felt comfortable telling teams to build real products on.
+
+Winning the AI category that same week was a useful external signal that the open, portable path still matters. Maybe more now than before.
+
+## The ecosystem showed up
+
+Other projects announced as winners included TypeGPU, Biome, ZurichJS, Popcorn, and React Doctor. That list says a lot about where the ecosystem is right now: better foundations, sharper tools, stronger community work, stranger experiments, and AI tooling that developers can actually inspect.
+
+Thank you to JSNation, React Summit, GitNation, the Open Source Awards committee, everyone who nominated or voted, and every contributor who has touched Start or AI. Awards don't write code, triage issues, answer Discord threads, or keep APIs honest, but they do mark the moments where a community can look around and say, "yeah, this work is landing."
+
+We feel that. Now back to shipping.
diff --git a/src/blog/tanstack-router-route-matching-tree-rewrite.md b/src/blog/tanstack-router-route-matching-tree-rewrite.md
index addc75215..33cf5118f 100644
--- a/src/blog/tanstack-router-route-matching-tree-rewrite.md
+++ b/src/blog/tanstack-router-route-matching-tree-rewrite.md
@@ -1,14 +1,18 @@
 ---
 title: How we accidentally made route matching more performant by aiming for correctness
 published: 2025-11-18
+excerpt: A rewrite aimed at fixing edge cases in route matching accidentally delivered a 20,000x performance improvement. Route matching is no longer bottlenecked by the number of routes in your application.
+library: router
 authors:
   - Florian Pellet
 ---
 
-![Big performance number](/blog-assets/tanstack-router-route-matching-tree-rewrite/header.png)
+![Fantasy landscape illustration used as the article header](/blog-assets/tanstack-router-route-matching-tree-rewrite/header.jpg)
 
 We achieved a 20,000× performance improvement in route matching in TanStack Router. Let's be honest, this is _definitely_ cherry-picked, but the number is real and comes from a real production application. More importantly, it shows that matching a pathname to a route is no longer bottlenecked by the number of routes in your application.
 
+![Big performance number](/blog-assets/tanstack-router-route-matching-tree-rewrite/big-number.png)
+
 ## The Real Problem: correctness, not speed
 
 One big responsibility of a router is to match a given URL pathname (e.g., `/users/123`) to a route definition (e.g., `/users/$userId`). This is deceptively complex when you consider all the different types of route segments (static, dynamic, optional, wildcard) and the priority rules that govern which route should match first.
diff --git a/src/blog/tanstack-router-signal-graph.md b/src/blog/tanstack-router-signal-graph.md
new file mode 100644
index 000000000..f6c38318a
--- /dev/null
+++ b/src/blog/tanstack-router-signal-graph.md
@@ -0,0 +1,283 @@
+---
+published: 2026-03-31
+authors:
+  - Florian Pellet
+title: "TanStack Router's New Reactive Core: A Signal Graph"
+excerpt: TanStack Router now uses a granular signal graph as its reactive core. State is derived from that graph, which narrows change propagation and makes client-side navigation faster in our benchmarks.
+library: router
+---
+
+![veins of emerald as a signal graph embedded in the rock of a tropical island](/blog-assets/tanstack-router-signal-graph/header.jpg)
+
+TanStack Router used to keep all of its reactive state in one large object: `router.state`. [This refactor](https://github.com/TanStack/router/pull/6704) replaces that with a graph of smaller stores for the pieces of state that change independently. `router.state` still exists, but it is now derived from those stores instead of serving as the internal source of truth.
+
+This builds on TanStack Store's migration[^alien-migration] to [alien-signals](https://github.com/stackblitz/alien-signals), implemented by [@DavidKPiano](https://github.com/davidkpiano). In external benchmarks[^alien-bench], alien-signals performed very well. The faster primitive helps, but the bigger change is that this allows the router to track state in smaller pieces instead of routing everything through one broad store.
+
+Concretely, this means:
+
+- more targeted updates,
+- fewer store updates during navigation,
+- faster client-side navigation in our benchmarks,
+- the Solid adapter now uses native Solid signals internally.
+
+## Old Model: One Broad Router State
+
+The old model had one main reactive surface: `router.state`.
+
+That was useful. It made it possible to prototype features quickly and ship a broad API surface without first designing a perfect internal reactive topology. But it also meant many different concerns shared the same reactive entry point.
+
+| Concern           | Stored under `router.state`                  | Typical consumer                 |
+| ----------------- | -------------------------------------------- | -------------------------------- |
+| Location          | `location`, `resolvedLocation`               | `useLocation`, `Link`            |
+| Match lifecycle   | `matches`, `pendingMatches`, `cachedMatches` | `useMatch`, `Matches`, `Outlet`  |
+| Navigation status | `status`, `isLoading`, `isTransitioning`     | pending UI, transitions          |
+| Side effects      | `redirect`, `statusCode`                     | navigation and response handling |
+
+This did not mean every update rerendered everything. Options like `select` and `structuralSharing` could prevent propagation. But many consumers still subscribed to more router state than they actually needed.
+
+## Problem: Routing State Changes in Smaller Pieces
+
+Routing state does not change as one unit. During a navigation, one match stays active, another becomes pending, one link changes state, and some cached matches do not change at all.
+
+The old model captured those pieces of state, but all subscriptions still started from the same top-level state object. That mismatch shows up here:
+
+<figure>
+<video src="/blog-assets/tanstack-router-signal-graph/before-granular-store-graph-2.mp4" playsinline loop autoplay muted></video>
+<figcaption>
+A video showing that on every stateful event in the core of the router, changes are propagated to every subscription across the entire application.
+</figcaption>
+</figure>
+
+In practice, many consumers subscribed to more router state than they actually needed.
+
+## New Model: Smaller Stores Become the Source of Truth
+
+The main change is that the smaller stores are now the source of truth, and `router.state` is rebuilt from them.
+
+Instead of one broad state object, the router keeps separate stores with narrower responsibilities.
+
+- **top-level stores** for location, status, loading, transitions, redirects, and similar scalar state
+- **per-match stores** grouped into pools of active matches, pending matches, and cached matches.
+- **derived stores** for specific purposes like "is any match pending"
+
+`router.state` still exists for public APIs, but it is now rebuilt from the store graph instead of serving as the internal source of truth.
+
+The new picture looks like this:
+
+<figure>
+<video src="/blog-assets/tanstack-router-signal-graph/after-granular-store-graph-2.mp4" playsinline loop autoplay muted></video>
+<figcaption>
+A video showing that on each stateful event in the core of the router, only a specific subset of subscribers are updated in the application.
+</figcaption>
+</figure>
+
+> [!NOTE]
+> Active, pending, and cached matches are now modeled separately because
+> they have different lifecycles. This cuts down updates even further.
+
+Before, the smaller pieces of state were derived from `router.state`. Now, `router.state` is derived from the smaller stores. That is the core of this refactor.
+
+## Hook-Level Change: Subscribe to the Relevant Store
+
+With the smaller stores as the source of truth, router internals can subscribe to the exact store they need instead of selecting from one large snapshot. The clearest example is `useMatch`.
+
+Before this refactor, `useMatch` subscribed through the big router store and then searched `state.matches` for the match it cared about. Now it resolves the relevant store first and subscribes directly to it.
+
+```ts
+// Before
+useRouterState({
+  select: (state) => {
+    const match = state.matches.find((m) => m.routeId === routeId)
+    return /* select from one match */
+  }
+})
+
+// After
+const matchStore = router.stores.getMatchStoreByRouteId(routeId)
+useStore(matchStore, (match) => /* select from one match */)
+```
+
+This is an internal implementation detail, not a new public API surface for application code.
+
+> [!NOTE]
+> `getMatchStoreByRouteId` creates the derived signal on demand and stores it
+> in a Least-Recently-Used cache[^lru-cache] so other subscribers can reuse it
+> without leaking memory.
+
+The store-update-count graphs below show how many times subscriptions are invoked during various routing scenarios. The last point is this refactor.[^store-update-tests]
+
+<!-- ::start:tabs -->
+
+#### React
+
+<figure>
+<img src="/blog-assets/tanstack-router-signal-graph/store-updates-history-react.png" alt="A graph showing the number of times a useRouterState subscription is triggered in various test scenarios, going from a 5 to 18 range down to a 0 to 8 range">
+<figcaption>
+Absolute counts are not directly comparable across frameworks, because React, Solid, and Vue do not propagate updates in exactly the same way.
+</figcaption>
+</figure>
+
+#### Solid
+
+<figure>
+<img src="/blog-assets/tanstack-router-signal-graph/store-updates-history-solid.png" alt="A graph showing the number of times a useRouterState subscription is triggered in various test scenarios, going from a 3 to 19 range down to a 0 to 8 range">
+<figcaption>
+Absolute counts are not directly comparable across frameworks, because React, Solid, and Vue do not propagate updates in exactly the same way.
+</figcaption>
+</figure>
+
+#### Vue
+
+<figure>
+<img src="/blog-assets/tanstack-router-signal-graph/store-updates-history-vue.png" alt="A graph showing the number of times a useRouterState subscription is triggered in various test scenarios, going from a 6 to 46 range down to a 2 to 16 range">
+<figcaption>
+Absolute counts are not directly comparable across frameworks, because React, Solid, and Vue do not propagate updates in exactly the same way.
+</figcaption>
+</figure>
+
+<!-- ::end:tabs -->
+
+These graphs show that fewer subscribers are triggered during navigation.
+
+> [!IMPORTANT]
+> Vue Router is mentioned throughout this article as a useful reference. However it is still a work in progress. Vue Vapor (3.6) is on the doorstep (beta.9 at the time of writing), so the plan is to do the Vapor refactor and then support that refreshed version.
+
+## Store Boundary: One Contract, Multiple Implementations
+
+The refactor also moves the store implementation behind a shared contract.
+
+The router core defines the interface. Each adapter provides the implementation.
+
+```ts
+export interface RouterReadableStore<TValue> {
+  readonly state: TValue
+}
+
+export interface RouterWritableStore<TValue> {
+  readonly state: TValue
+  setState: (updater: (prev: TValue) => TValue) => void
+}
+
+export type StoreConfig = {
+  createMutableStore: MutableStoreFactory
+  createReadonlyStore: ReadonlyStoreFactory
+  batch: RouterBatchFn
+  init?: (stores: RouterStores<AnyRoute>) => void
+}
+```
+
+| Adapter | Store implementation |
+| :------ | :------------------- |
+| React   | TanStack Store       |
+| Vue     | TanStack Store       |
+| Solid   | Solid signals        |
+
+This keeps one router core while letting each adapter plug in the store model it wants.
+
+> [!NOTE]
+> Solid's derived stores are backed by native memos, and the adapter uses a `FinalizationRegistry`[^finalization-registry]
+> to dispose detached roots when those stores are garbage-collected.
+
+## Observable Result: Less Work During Navigation
+
+No new public API is required here. `useMatch`, `useLocation`, and `<Link>` keep the same surface. The difference is that navigation and preload flows now trigger fewer subscriptions.
+
+Our benchmarks isolate client-side navigation cost on a synthetic rerender-heavy page.[^client-nav-bench]
+
+- React: `7ms -> 4.5ms`
+- Solid: `12ms -> 8ms`
+- Vue: `7.5ms -> 6ms`
+
+<!-- ::start:tabs -->
+
+#### React
+
+<figure>
+<img src="/blog-assets/tanstack-router-signal-graph/client-side-nav-react.png" alt="">
+<figcaption>
+This graph shows the duration of 10 navigations on <code>main</code> (grey) and on <code>refactor-signals</code> (blue).
+</figcaption>
+</figure>
+
+#### Solid
+
+<figure>
+<img src="/blog-assets/tanstack-router-signal-graph/client-side-nav-solid.png" alt="">
+<figcaption>
+This graph shows the duration of 10 navigations on <code>main</code> (grey) and on <code>refactor-signals</code> (blue).
+</figcaption>
+</figure>
+
+#### Vue
+
+<figure>
+<img src="/blog-assets/tanstack-router-signal-graph/client-side-nav-vue.png" alt="">
+<figcaption>
+This graph shows the duration of 10 navigations on <code>main</code> (grey) and on <code>refactor-signals</code> (blue).
+</figcaption>
+</figure>
+
+<!-- ::end:tabs -->
+
+There is also a bundle-size tradeoff. In our synthetic bundle-size benchmarks, measuring gzipped sizes:[^bundle-size-bench]
+
+- ↗ React increased by `~1KiB`
+- ↗ Vue increased by `~1KiB`
+- ↘ Solid decreased by `~1KiB`
+
+React and Vue increased in size because representing the router as several stores takes more code than representing it as one state object. Solid decreased in size because it no longer depends on `tanstack/store`.
+
+<!-- ::start:tabs -->
+
+#### React
+
+<figure>
+<img src="/blog-assets/tanstack-router-signal-graph/bundle-size-history-react.png" alt="A graph of the history of the bundle size of a synthetic tanstack/react-router app, gaining 1KiB gzipped with this latest change">
+<figcaption>
+Only relative changes matter in this benchmark, they are based on arbitrary apps and absolute sizes are not representative.
+</figcaption>
+</figure>
+
+#### Solid
+
+<figure>
+<img src="/blog-assets/tanstack-router-signal-graph/bundle-size-history-solid.png" alt="A graph of the history of the bundle size of a synthetic tanstack/solid-router app, shedding 1KiB gzipped with this latest change">
+<figcaption>
+Only relative changes matter in this benchmark, they are based on arbitrary apps and absolute sizes are not representative.
+</figcaption>
+</figure>
+
+#### Vue
+
+<figure>
+<img src="/blog-assets/tanstack-router-signal-graph/bundle-size-history-vue.png" alt="A graph of the history of the bundle size of a synthetic tanstack/vue-router app, gaining 1KiB gzipped with this latest change">
+<figcaption>
+Only relative changes matter in this benchmark, they are based on arbitrary apps and absolute sizes are not representative.
+</figcaption>
+</figure>
+
+<!-- ::end:tabs -->
+
+## Closing
+
+This refactor changes how reactivity is structured inside the router.
+
+Before, `router.state` was the broad reactive surface and smaller pieces of state were derived from it. Now the smaller stores are primary, and `router.state` is a derived snapshot kept for the existing public API.
+
+In practice, that means route changes update more locally and trigger less work during navigation.
+
+---
+
+[^alien-migration]: [TanStack Store PR #265](https://github.com/TanStack/store/pull/265)
+
+[^alien-bench]: [js-reactivity-benchmark](https://github.com/transitive-bullshit/js-reactivity-benchmark) last updated January 2025
+
+[^store-update-tests]: Methodology and exact scenario assertions live in the adapter test files for [React](https://github.com/TanStack/router/blob/main/packages/react-router/tests/store-updates-during-navigation.test.tsx), [Solid](https://github.com/TanStack/router/blob/main/packages/solid-router/tests/store-updates-during-navigation.test.tsx), and [Vue](https://github.com/TanStack/router/blob/main/packages/vue-router/tests/store-updates-during-navigation.test.tsx).
+
+[^lru-cache]: For a great JavaScript-oriented explanation of how LRU caches work, see [Implementing an efficient LRU cache in JavaScript](https://yomguithereal.github.io/posts/lru-cache/).
+
+[^finalization-registry]: A [FinalizationRegistry](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry) allows us to hook into the Garbage Collector to execute arbitrary cleanup functions when an object gets collected.
+
+[^client-nav-bench]: These numbers come from the [`benchmarks/client-nav`](https://github.com/TanStack/router/tree/main/benchmarks/client-nav) CodSpeed suite, which runs a 10-navigation loop against a synthetic page that intentionally mounts many `useParams`, `useSearch`, and `Link` subscribers to amplify propagation costs. See [CodSpeed](https://codspeed.io/TanStack/router), and the [React app fixture](https://github.com/TanStack/router/blob/main/benchmarks/client-nav/react/app.tsx).
+
+[^bundle-size-bench]: These numbers come from the deterministic fixtures in [`benchmarks/bundle-size`](https://github.com/TanStack/router/tree/main/benchmarks/bundle-size), measured from the initial-load JS graph and tracked primarily as gzip deltas. See the [README](https://github.com/TanStack/router/blob/main/benchmarks/bundle-size/README.md).
diff --git a/src/blog/tanstack-router-typescript-performance.md b/src/blog/tanstack-router-typescript-performance.md
index 06b31a140..9a09550e8 100644
--- a/src/blog/tanstack-router-typescript-performance.md
+++ b/src/blog/tanstack-router-typescript-performance.md
@@ -1,6 +1,8 @@
 ---
 title: A milestone for TypeScript Performance in TanStack Router
 published: 2024-09-17
+excerpt: TanStack Router pushes the boundaries on type-safe routing, but large route trees can slow down the editor. Here's how we achieved a major milestone in TypeScript performance.
+library: router
 authors:
   - Christopher Horobin
 ---
diff --git a/src/blog/tanstack-start-5x-ssr-throughput.md b/src/blog/tanstack-start-5x-ssr-throughput.md
new file mode 100644
index 000000000..a8499725c
--- /dev/null
+++ b/src/blog/tanstack-start-5x-ssr-throughput.md
@@ -0,0 +1,393 @@
+---
+published: 2026-03-17
+authors:
+  - Manuel Schiller
+  - Florian Pellet
+title: '5x SSR Throughput: Profiling SSR Hot Paths in TanStack Start'
+excerpt: 'How profiling under sustained load uncovered SSR hot paths in TanStack Start and led to a 5.5x throughput gain by removing unnecessary server-side work.'
+library: start
+---
+
+![A flamegraph island in the tanstack universe](/blog-assets/tanstack-start-5x-ssr-throughput/header.jpg)
+
+## TL;DR
+
+We improved TanStack Start's SSR performance dramatically. Under sustained load (using our `links-100` stress benchmark with 100 concurrent connections, 30 seconds):
+
+- **Throughput**: 427 req/s → 2357 req/s (**5.5x**)
+- **Average latency**: 424ms → 43ms (**9.9x faster**)
+- **p99 latency**: 6558ms → 928ms (**7.1x faster**)
+- **Success rate**: 99.96% → 100% (the server stopped failing under load)
+
+For SSR-heavy deployments, this translates directly to lower hosting costs, the ability to handle traffic spikes without scaling, and eliminating user-facing errors.
+
+This work started after `v1.154.4` and targets server-side rendering performance. The goal was to increase throughput and reduce server CPU time per request.
+
+We did it with a repeatable process, not a single clever trick:
+
+- **Measure under load**, not in microbenchmarks.
+- Use **CPU profiling** to find the highest-impact work.
+- Remove **entire categories of cost** from the server hot path.
+
+We highlight the highest-impact patterns below:
+
+- avoid `URL` construction/parsing when it is not required
+- avoid reactivity work during SSR (subscriptions, structural sharing, batching)
+- add server-only fast paths behind a build-time `isServer` flag
+- avoid `delete` in performance-sensitive code
+
+## Methodology: feature-focused endpoints + flamegraphs
+
+We are not claiming that any single line of code is "the" reason. This work spanned over [20 PRs](https://github.com/TanStack/router/compare/v1.154.4...v1.157.18), with still more to come. Every change was validated by:
+
+- a stable load test (same endpoint, same load)
+- a before/after comparison on the same benchmark endpoint
+- a CPU profile (flamegraph) that explains the delta
+
+### Why feature-focused endpoints
+
+We did not benchmark "a representative app page". We used endpoints that exaggerate a feature so the profile is unambiguous:
+
+- **`links-100`**: renders ~100 links to stress link rendering and location building.
+- **`layouts-26-with-params`**: deep nesting + params to stress matching and path/param work.
+- **`empty`**: minimal route to establish a baseline for framework overhead.
+
+This is transferable: isolate the subsystem you want to improve, and benchmark that.
+
+### CPU profiling with `@platformatic/flame`
+
+To capture a CPU profile of the server under load, we start the built server with [`@platformatic/flame`](https://github.com/platformatic/flame):
+
+```sh
+flame run ./dist/server.mjs
+```
+
+This produces:
+
+- a CPU flamegraph
+- a heap flamegraph
+- and markdown summaries of the captured profile data
+
+### Load generation with `autocannon`
+
+While `@platformatic/flame` is running in one terminal, we used [`autocannon`](https://github.com/mcollina/autocannon) in another terminal to generate a 30s sustained load. We tracked:
+
+- requests per second (req/s)
+- latency distribution (average, p95, p99)
+
+Example command (adjust concurrency and route):
+
+```bash
+autocannon -d 30 -c 100 --warmup [ -d 2 -c 20 ] http://localhost:3000/bench/links-100
+```
+
+### How to interpret the results
+
+To improve SSR performance, we repeated the same loop:
+
+- Focus on **self time** first. That is where the CPU is actually spent.
+- Fix one hotspot, re-run the benchmark, and re-profile.
+- Prefer changes that remove work in the steady state.
+
+### Reproducing these benchmarks
+
+Our benchmarks were stable enough to produce very similar results on a range of setups. However, here are the exact environment details we used to run most of the benchmarks:
+
+- Node.js: v24.12.0
+- Hardware: MacBook Pro (M3 Max)
+- OS: macOS 15.7
+
+The exact benchmark code is available in [our repository](https://github.com/TanStack/router/tree/main/e2e/react-start/flamegraph-bench).
+
+## Finding 1: `URL` is expensive in server hot paths
+
+### The mechanism
+
+In our SSR profiles, `URL` construction/parsing showed up as significant self-time in the hot path on link-heavy endpoints. The cost comes from doing real work (parsing/normalization) and allocating objects. When you do it once, it does not matter. When you do it per link, per request, it dominates.
+
+### The transferable pattern
+
+Use cheap predicates first, then fall back to heavyweight parsing only when needed.
+
+- If a value is clearly internal (e.g. starts with `/` but not `//`, or starts with `.`), don't try to parse it as an absolute URL.
+- If a feature is only needed in edge cases (e.g. rewrite logic), keep it off the default path.
+
+### What we changed
+
+```typescript
+// Before: always parse
+const url = new URL(to, base)
+
+// After: check first, parse only if needed
+if (isSafeInternal(to)) {
+  // fast path: internal navigation, no parsing needed
+} else {
+  const url = new URL(to, base)
+  // ...external URL handling
+}
+```
+
+The `isSafeInternal` check can be orders of magnitude cheaper than constructing a `URL` object[^url-cost]. It's meant to be a cheap predicate, so it is okay if some URLs that _would_ be internal are classified as external and go through the slower path.
+
+See: [#6442](https://github.com/TanStack/router/pull/6442), [#6447](https://github.com/TanStack/router/pull/6447), [#6516](https://github.com/TanStack/router/pull/6516)
+
+### Measuring the improvements
+
+Like every PR in this series, this change was validated by profiling the impacted method before and after. For example we can see in the example below that the `buildLocation` method went from being one of the major bottlenecks of a navigation to being a very small part of the overall cost:
+
+<figure>
+<img src="/blog-assets/tanstack-start-5x-ssr-throughput/build-location-before.png" alt="CPU profiling of buildLocation before the changes">
+<figcaption>
+<b>Before:</b> The <code>RouterCore.buildLocation</code> (red arrow) method was creating a <code>new URL</code> every time (purple blocks), and then updating its search which re-triggers an expensive parsing step.
+</figcaption>
+</figure>
+
+<figure>
+<img
+src="/blog-assets/tanstack-start-5x-ssr-throughput/build-location-after.png"
+alt="CPU profiling of buildLocation after the changes"
+>
+<figcaption>
+<b>After:</b> The <code>isSafeInternal</code> check is able to fully skip the <code>URL</code>. <code>RouterCore.buildLocation</code> becomes an almost insignificant part of the overall cost.
+</figcaption>
+</figure>
+
+## Finding 2: SSR does not need reactivity
+
+### The mechanism
+
+SSR renders once per request.[^ssr-streaming] There is no ongoing UI to reactively update, so on the server:
+
+- store subscriptions add overhead but provide no benefit
+- structural sharing[^structural-sharing] reduces re-renders, but SSR does not re-render
+- batching reactive updates is irrelevant if nothing is subscribed
+
+### The transferable pattern
+
+If your code supports both client reactivity and SSR, gate the reactive machinery so the server can skip it entirely:
+
+- on the server: return state directly, no subscriptions, reduce immutability overhead
+- on the client: subscribe normally
+
+This is the difference between "server = a function" and "client = a reactive system".
+
+### What we changed
+
+```typescript
+// Before: same code path for client and server
+function useRouterState() {
+  return useStore(router, { ... }) // unnecessary subscription on the server
+}
+
+// After: server gets a simple snapshot
+function useRouterState() {
+  if (isServer) return router.store // no subscriptions on the server
+  return useStore(router, { ... }) // regular behavior on the client
+}
+```
+
+See: [#6497](https://github.com/TanStack/router/pull/6497), [#6482](https://github.com/TanStack/router/pull/6482)
+
+> [!NOTE]
+> `isServer` is a build-time constant. This means that the above code is not violating the rules of hooks in React. At runtime, the code will always execute the same branch.
+
+### Measuring the improvements
+
+Taking the example of the `useRouterState` hook, we can see that most of the client-only work was removed from the SSR pass, leading to a ~2x improvement in the total CPU time of this hook.
+
+<figure>
+<img
+  src="/blog-assets/tanstack-start-5x-ssr-throughput/router-state-before.png"
+  alt="CPU profiling of useRouterState before the changes"
+>
+<figcaption>
+<b>Before:</b> The <code>useRouterState</code> hook was subscribing to the router store, which triggers many sync and memoization calls before calling the <code>select</code> callback.
+</figcaption>
+</figure>
+
+<figure>
+<img
+  src="/blog-assets/tanstack-start-5x-ssr-throughput/router-state-after.png"
+  alt="CPU profiling of useRouterState after the changes"
+>
+<figcaption>
+<b>After:</b> The <code>isServer</code> check is able to skip directly to the <code>select</code> callback.
+</figcaption>
+</figure>
+
+## Finding 3: server-only fast paths are worth it (when gated correctly)
+
+### The mechanism
+
+As a general rule, client code cares about bundle size, while server code cares about CPU time per request. Those constraints are different.
+
+If you can guard a branch with a **build-time constant** like `isServer`, you can:
+
+- add server-only fast paths for common cases
+- keep the general algorithm for correctness and edge cases
+- allow bundlers to delete the server-only branch from client builds
+
+In TanStack Start, `isServer` is provided via build-time resolution of export conditions[^export-conditions] (client: `false`, server: `true`, dev/test: `undefined` with fallback). Modern bundlers like Vite, Rollup, and esbuild perform dead code elimination (DCE)[^dce], removing unreachable branches when the condition is a compile-time constant.
+
+### The transferable pattern
+
+Write two implementations:
+
+- **fast path** for the common case
+- **general path** for correctness
+
+And gate them behind a build-time constant so you don't inflate the bundle size for clients.
+
+### What we changed
+
+```typescript
+// isServer is resolved at build time:
+// - Vite/bundler replaces it with `true` (server) or `false` (client)
+// - Dead code elimination removes the unused branch
+
+if (isServer) {
+  // server-only fast path (removed from client bundle)
+  if (isCommonCase(input)) {
+    return fastServerPath(input)
+  }
+}
+// general algorithm that handles all cases
+return generalPath(input)
+```
+
+See: [#4648](https://github.com/TanStack/router/pull/4648), [#6505](https://github.com/TanStack/router/pull/6505), [#6506](https://github.com/TanStack/router/pull/6506)
+
+### Measuring the improvements
+
+Taking the example of the `matchRoutesInternal` method, we can see that its children's total CPU time was reduced by ~25%.
+
+<figure>
+<img
+  src="/blog-assets/tanstack-start-5x-ssr-throughput/interpolate-before.png"
+  alt="CPU profiling of interpolatePath before the changes"
+>
+<figcaption>
+<b>Before:</b> The <code>interpolatePath</code> function spends >1s using the generic <code>parseSegment</code> function.
+</figcaption>
+</figure>
+
+<figure>
+<img
+  src="/blog-assets/tanstack-start-5x-ssr-throughput/interpolate-after.png"
+  alt="CPU profiling of interpolatePath after the changes"
+>
+<figcaption>
+<b>After:</b> The <code>interpolatePath</code> function now uses the server-only fast path, skipping <code>parseSegment</code> entirely.
+</figcaption>
+</figure>
+
+## Finding 4: `delete` can be expensive
+
+### The mechanism
+
+Modern engines optimize property access using object "shapes" (e.g. V8 HiddenClasses[^v8-fast-properties] / JSC Structures[^webkit-delete-ic]) and inline caches. `delete` changes an object's shape and can force a slower internal representation (e.g. dictionary/slow properties), which can disable or degrade those optimizations and deopt optimized code.
+
+### The transferable pattern
+
+Avoid `delete` in hot paths. Prefer patterns that don't mutate object shapes in-place:
+
+- set a property to `undefined` (when semantics allow)
+- create a new object without the key (object rest destructuring) when you need a "key removed" shape
+
+### What we changed
+
+```typescript
+// Before: mutates shape
+delete this.shouldViewTransition
+
+// After: set to undefined
+this.shouldViewTransition = undefined
+```
+
+See: [#6456](https://github.com/TanStack/router/pull/6456), [#6515](https://github.com/TanStack/router/pull/6515)
+
+### Measuring the improvements
+
+Taking the example of the `startViewTransition` method, we can see that the total CPU time of this method was reduced by >50%.
+
+<figure>
+<img
+  src="/blog-assets/tanstack-start-5x-ssr-throughput/delete-before.png"
+  alt="CPU profiling of startViewTransition before the changes"
+>
+<figcaption>
+<b>Before:</b> The <code>startViewTransition</code> function (red arrow) has ~400ms of self-time in the hot path (i.e. not including the time spent in its children).
+</figcaption>
+</figure>
+
+<figure>
+<img
+  src="/blog-assets/tanstack-start-5x-ssr-throughput/delete-after.png"
+  alt="CPU profiling of startViewTransition after the changes"
+>
+<figcaption>
+<b>After:</b> Removing the <code>delete</code> statement almost completely removes the self-time of this function.
+</figcaption>
+</figure>
+
+## Results
+
+### Independent benchmark
+
+Matteo Collina independently benchmarked Start's SSR performance as part of his [article investigating SSR performance across React meta-frameworks](https://blog.platformatic.dev/react-ssr-framework-benchmark-tanstack-start-react-router-nextjs) and observed significant improvements after our optimizations. The following table summarizes the before/after results under sustained load:
+
+| Metric          |    Before |      After | Improvement              |
+| --------------- | --------: | ---------: | ------------------------ |
+| Success rate    |    75.52% |       100% | does not fail under load |
+| Throughput      | 477 req/s | 1041 req/s | +118% (2.2x)             |
+| Average latency |   3,171ms |     13.7ms | 231x faster              |
+| p90 latency     |  10,001ms |     23.0ms | 435x faster              |
+| p95 latency     |  10,001ms |     28.1ms | 370x faster              |
+
+The "before" numbers show a server under severe stress: 25% of requests failed (likely timeouts), and p90/p95 hit the 10s timeout ceiling. After the optimizations, the server handles the same load comfortably with sub-30ms tail latency and zero failures.
+
+To be clear: TanStack Start was not broken before these changes. Under normal traffic, SSR worked fine. These numbers reflect behavior under _sustained heavy load_ (the kind you see during traffic spikes or load testing). The optimizations increase headroom. At this same load, the server no longer drops requests, and it only starts failing at substantially higher load than before.
+
+### Event-loop utilization
+
+The following graphs show event-loop utilization[^elu] against throughput for each feature-focused endpoint, before and after the optimizations. Lower utilization at the same req/s means more headroom; higher req/s at the same utilization means more capacity.
+
+For reference, the machine on which these were measured reaches 100% event-loop utilization at 100k req/s on an empty Node HTTP server[^empty-node-http-server].
+
+#### 100 links per page
+
+![Event-loop utilization vs throughput for links-100, before and after](/blog-assets/tanstack-start-5x-ssr-throughput/elu-links.png)
+
+#### Deeply nested layout routes
+
+![Event-loop utilization vs throughput for nested routes, before and after](/blog-assets/tanstack-start-5x-ssr-throughput/elu-nested.png)
+
+#### Minimal route (baseline)
+
+![Event-loop utilization vs throughput for minimal route, before and after](/blog-assets/tanstack-start-5x-ssr-throughput/elu-empty.png)
+
+## Conclusion
+
+The biggest gains came from removing whole categories of work from the server hot path. Throughput improves when you eliminate repeated work, allocations, and unnecessary generality in the steady state.
+
+There were many other improvements (client and server) not covered here. SSR performance work is ongoing.
+
+## References
+
+[^v8-fast-properties]: V8 team, [Fast properties in V8](https://v8.dev/blog/fast-properties). Great article, but 9 years old so things might have changed.
+
+[^webkit-delete-ic]: WebKit, [A Tour of Inline Caching with Delete](https://webkit.org/blog/10298/inline-caching-delete/)
+
+[^structural-sharing]: Structural sharing is a pattern from immutable data libraries (Immer, React Query, TanStack Store) where unchanged portions of data structures are reused by reference to enable cheap equality checks. See [Structural Sharing](https://tanstack.com/query/latest/docs/framework/react/guides/render-optimizations#structural-sharing) in the TanStack Query documentation.
+
+[^ssr-streaming]: With streaming SSR and Suspense, the server may render multiple chunks, but each chunk is still a single-pass render with no reactive updates. See [renderToPipeableStream](https://react.dev/reference/react-dom/server/renderToPipeableStream) in the React documentation.
+
+[^url-cost]: The WHATWG URL Standard requires significant parsing work: scheme detection, authority parsing, path normalization, query string handling, and percent-encoding. See the [URL parsing algorithm](https://url.spec.whatwg.org/#url-parsing) for the full state machine.
+
+[^export-conditions]: Conditional exports are a Node.js feature that allows packages to define different entry points based on environment or import method. See [Conditional exports](https://nodejs.org/api/packages.html#conditional-exports) in the Node.js documentation.
+
+[^dce]: Dead code elimination is a standard compiler optimization. See esbuild's documentation on [tree shaking](https://esbuild.github.io/api/#tree-shaking), Rollup's [tree-shaking guide](https://rollupjs.org/introduction/#tree-shaking) and Rich Harris's article on [dead code elimination](https://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80).
+
+[^elu]: Event-loop utilization is the percentage of time the event loop is busy utilizing the CPU. See this [nodesource blog post](https://nodesource.com/blog/event-loop-utilization-nodejs) for more details.
+
+[^empty-node-http-server]: To get a reference for the values we were measuring, we ran a similar `autocannon` benchmark on the smallest possible Node HTTP server: `require('http').createServer((q,s)=>s.end()).listen(3000)`. This tells us the _theoretical_ maximum throughput of the machine and test setup.
diff --git a/src/blog/tanstack-start-solid-v2.md b/src/blog/tanstack-start-solid-v2.md
new file mode 100644
index 000000000..c364c36e3
--- /dev/null
+++ b/src/blog/tanstack-start-solid-v2.md
@@ -0,0 +1,72 @@
+---
+title: 'Solid 2.0 Beta Support in TanStack Router, Start, and Query'
+published: 2026-04-10
+excerpt: TanStack Router, Start, and Query now support the Solid 2.0 beta, so you can try Solid's next major release in real applications today.
+library: router, start, query
+authors:
+  - Brenley Dueck
+  - Birk Skyum
+---
+
+![Solid 2.0 Beta Support in TanStack Router, Start, and Query](/blog-assets/tanstack-start-solid-v2/header.png)
+
+Today we're excited to announce Solid 2.0 beta support in TanStack Router, Start, and Query!
+
+Solid 2.0 introduces major changes to async rendering, derived state, and SSR. We wanted to make sure you could try those changes in real applications right away, not just isolated demos. If you're evaluating Solid 2.0 and want routing, server rendering, and data fetching ready to go, you can start today.
+
+## Get Started Today
+
+You can get started in one of two ways:
+
+- Start from one of our [Solid examples](https://github.com/TanStack/router/tree/solid-router-v2-pre/examples/solid)
+- Upgrade an existing TanStack Router or TanStack Start app using the beta versions below
+
+If you're upgrading an existing app, update these dependencies first:
+
+<!-- ::start:tabs variant="package-manager" mode="install" -->
+
+solid: @tanstack/solid-router@^2.0.0-beta.11 @tanstack/solid-start@^2.0.0-beta.12 @tanstack/solid-router-devtools@^2.0.0-beta.8 solid-js@^2.0.0-beta.5 @solidjs/web@^2.0.0-beta.5
+
+<!-- ::end:tabs -->
+
+<!-- ::start:tabs variant="package-manager" mode="dev-install" -->
+
+solid: vite-plugin-solid@^3.0.0-next.4
+
+<!-- ::end:tabs -->
+
+If you use TanStack Query, also add:
+
+<!-- ::start:tabs variant="package-manager" mode="install" -->
+
+solid: @tanstack/solid-query@^6.0.0-beta.3 @tanstack/solid-query-devtools@^6.0.0-beta.3 @tanstack/solid-router-ssr-query@^2.0.0-beta.12
+
+<!-- ::end:tabs -->
+
+The TanStack APIs are mostly unchanged. The main breaking changes come from Solid 2.0 itself, so if you're upgrading an existing Solid app, read the official [Solid 2.0 migration guide](https://github.com/solidjs/solid/blob/next/documentation/solid-2.0/MIGRATION.md).
+
+## Why This Matters
+
+Solid 2.0 is more than a version bump. It opens up patterns that were awkward or impossible to express cleanly before, especially around async behavior, derived state, and SSR.
+
+That matters most in larger applications, where routing, loading states, and server rendering carry real weight. TanStack Router and TanStack Start are a natural fit there, and we wanted Solid users to be able to explore the new release now instead of waiting for app-level tooling to catch up.
+
+Some of the highlights in Solid 2.0 include:
+
+- Fine-grained non-nullable async
+- Mutable derivations
+- Derived signals
+- Pull-based run-once SSR
+- Pending UI as an expression
+
+If you want to dig deeper into the release itself, check out the [Solid 2.0 beta discussion](https://github.com/solidjs/solid/discussions/2596) and the [Road to 2.0 discussion](https://github.com/solidjs/solid/discussions/2425).
+
+## Still Early — We Want Your Feedback
+
+This support is intentionally early. We'd rather put Solid 2.0 support in your hands while the beta is still evolving than wait until every edge case is polished.
+
+We plan to track Solid core closely from beta to RC to stable, so TanStack Router, Start, and Query stay aligned throughout the 2.0 rollout.
+
+If you try TanStack Router, Start, or Query with Solid 2.0 beta, tell us what works, what feels rough, and where the integration breaks down. That feedback will help us tighten things up quickly.
+
+[Join the Discord](https://tlinz.com/discord) and tell us what worked, what felt rough, and what you'd like to see next.
diff --git a/src/blog/tanstack-table-v9-memory-performance.md b/src/blog/tanstack-table-v9-memory-performance.md
new file mode 100644
index 000000000..81e725327
--- /dev/null
+++ b/src/blog/tanstack-table-v9-memory-performance.md
@@ -0,0 +1,238 @@
+---
+title: How an Underrated Refactor Saved 90% Memory Usage
+published: 2026-06-22
+excerpt: TanStack Table V9 can use dramatically less memory than Table V8 in large tables because row, column, cell, and header APIs now live on shared prototypes instead of every object instance.
+library: table
+authors:
+  - Kevin Van Cott
+---
+
+![TanStack Table V9 - Memory Performance](/blog-assets/tanstack-table-v9-memory-performance/header.png)
+
+Up to 90% less memory usage in TanStack Table V9 compared to TanStack Table V8? Yes! For large tables at least.
+
+How did we achieve this? Or how was there this much room to improve to begin with?
+
+TanStack Table V9 has a lot of architectural changes for the better: a state management system overhaul and a new feature/plugin system with a much smaller "only pay for what you use" runtime model.
+
+But one of the largest performance wins during the development of Table V9 came from a more subtle behind-the-scenes refactor. This refactor resulted in TanStack Table V9 using **up to ~90% less memory** than Table V8 for large tables when needing to process hundreds of thousands or millions of rows, either paginated or virtualized.
+
+This improvement is either a big deal or one that barely matters, depending on how you want to use TanStack Table. In Table V8, depending on a large number of factors, you could only expect TanStack Table to be able to handle about 1 million (1.5 million at most) rows before running into memory issues in the browser (which is often the 4GB mark). With Table V9, the maximum number of rows that TanStack Table can handle before using 4GB of memory is now 10-16 million rows according to our benchmarks. Though note, that depending on how complex your web page is, you will most likely run into issues below these optimistic numbers, but this is up to a 10x improvement in the scalability of TanStack Table itself.
+
+Should you be fetching or otherwise asking TanStack Table to handle 15 million rows client-side in the browser? Well, usually not, though we have seen use-cases that are not that "far-fetched". 😉
+
+In this article, we'll go over our benchmark results, and then the details of how we achieved this performance improvement. It was surprisingly a simple refactor that had almost no downsides (besides 1 breaking change). There are probably many libraries out there that could be using this same pattern to improve their own memory usage, if they are not already.
+
+## The Results
+
+![chart showing the memory usage of TanStack Table V8 and Table V9 across paginated rows, virtualized rows, virtualized columns, and kitchen sink examples](/blog-assets/tanstack-table-v9-memory-performance/charts.png)
+
+The charts above show that as the number of cells (rows x columns) that TanStack Table is asked to process (not just render) grows, the memory usage differences between Table V8 and Table V9 become much more pronounced. On the left of the graph, the difference is negligible, but on the right, Table V9 uses more than **2.4 GB less retained JS heap** than Table V8 when processing 1 million rows x 8 columns.
+
+Here are the full benchmark results:
+
+| Benchmark Example   | # of Cells (rows x columns) | Table V8 Memory Used | Table V9 Memory Used | Memory Saved | Percentage Improvement |
+| ------------------- | --------------------------: | -------------------: | -------------------: | -----------: | ---------------------: |
+| paginated rows      |                 80 (10 x 8) |              1.93 MB |              1.91 MB |      0.02 MB |                   1.0% |
+| paginated rows      |           8,000 (1,000 x 8) |              4.71 MB |              2.22 MB |      2.49 MB |                  52.9% |
+| paginated rows      |       800,000 (100,000 x 8) |            272.58 MB |             27.28 MB |    245.30 MB |                  90.0% |
+| paginated rows      |   8,000,000 (1,000,000 x 8) |           2710.06 MB |            257.19 MB |   2452.87 MB |                  90.5% |
+| virtualized rows    |                 80 (10 x 8) |              2.13 MB |              2.10 MB |      0.03 MB |                   1.4% |
+| virtualized rows    |           8,000 (1,000 x 8) |              5.16 MB |              2.68 MB |      2.48 MB |                  48.1% |
+| virtualized rows    |       800,000 (100,000 x 8) |            273.42 MB |             28.12 MB |    245.30 MB |                  89.7% |
+| virtualized rows    |   8,000,000 (1,000,000 x 8) |           2714.32 MB |            261.46 MB |   2452.86 MB |                  90.4% |
+| virtualized columns |               100 (10 x 10) |              2.24 MB |              2.24 MB |      0.00 MB |                   0.0% |
+| virtualized columns |          10,000 (100 x 100) |              5.31 MB |              3.83 MB |      1.48 MB |                  27.9% |
+| virtualized columns |       100,000 (100 x 1,000) |             25.82 MB |             10.73 MB |     15.09 MB |                  58.4% |
+| virtualized columns |    1,000,000 (100 x 10,000) |            230.47 MB |             80.24 MB |    150.23 MB |                  65.2% |
+| kitchen sink        |                 80 (10 x 8) |              2.18 MB |              2.38 MB |     -0.20 MB |                  -9.2% |
+| kitchen sink        |           8,000 (1,000 x 8) |              4.96 MB |              2.79 MB |      2.17 MB |                  43.8% |
+| kitchen sink        |       800,000 (100,000 x 8) |            272.83 MB |             36.91 MB |    235.92 MB |                  86.5% |
+| kitchen sink        |   8,000,000 (1,000,000 x 8) |           2710.31 MB |            349.22 MB |   2361.09 MB |                  87.1% |
+
+Overall, as the number of rows scale up, the memory usage savings scale up as well in a very consistent way.
+
+Most of these example benchmarks are bare minimum examples that only implement one or two features like pagination or sorting, but the kitchen-sink example is supposed to be our more realistic example that uses all of the features that TanStack Table has to offer.
+
+One thing worth pointing out is that in the kitchen sink example case that only has 10 rows x 8 columns, Table V9 is actually using slightly more memory than Table V8. This is most likely because we've done some work to add even more internal memoization for CPU performance gains. But the increase in memory usage from those improvements is so low that this other refactor dwarfs it. We essentially unlocked a huge new budget for memory usage that we didn't have before, and that budget grows with the number of table-created objects. We can feel a bit more free to optimize for speed at the cost of a little more memory usage going forward.
+
+## How We Measured Memory Usage
+
+If you're curious about how these benchmarks were run, you can view the repository [here](https://github.com/KevinVandy/tanstack-table-benchmarks).
+
+The benchmark runner uses Playwright and the Chrome DevTools Protocol. For each example, it:
+
+1. Builds the Vite example for production
+2. Starts `vite preview`
+3. Opens the page in a fresh Chromium context
+4. Waits for the table to report that it is ready
+5. Forces garbage collection with `HeapProfiler.collectGarbage`
+6. Records retained JS heap
+7. Records DOM counts and rendered row/cell counts
+8. Scrolls or paginates the table when the example has an interaction to measure
+
+This benchmark is designed to stress the thing that changed: the number of row, column, cell, and header objects that TanStack Table creates.
+
+## The Refactor
+
+Let's get into how we achieved this performance improvement.
+
+The big reveal: We used shared prototypes... and that's pretty much it. Let's go over the details.
+
+### What Table V8 Did
+
+In TanStack Table V8, when the `table`, `row`, `column`, `cell`, `header`, etc. objects get created, both their values and methods were assigned directly to each object instance.
+
+Simplified a bit, constructing a new `row` object looked like this:
+
+```ts
+const row = {
+  // values
+  id,
+  index: rowIndex,
+  original,
+  depth,
+  parentId,
+  _valuesCache: {},
+  _uniqueValuesCache: {},
+
+  // methods
+  getValue: (columnId) => {
+    // ...
+  },
+  getUniqueValues: (columnId) => {
+    // ...
+  },
+  renderValue: (columnId) =>
+    row.getValue(columnId) ?? table.options.renderFallbackValue,
+  getLeafRows: () => flattenBy(row.subRows, (d) => d.subRows),
+  getParentRow: () =>
+    row.parentId ? table.getRow(row.parentId, true) : undefined,
+  getAllCells: memo(/* ... */),
+  _getAllCellsByColumnId: memo(/* ... */),
+  // maybe a dozen other methods from features ...
+}
+```
+
+That is a very natural way to write JavaScript. For normal application code, I wouldn't expect it to be written any other way. The issue is that in TanStack Table, this code might be inside of a loop that creates thousands or millions of rows. And each row has its own loop that creates perhaps dozens or hundreds of cells.
+
+So you end up in a situation where there are potentially millions of object instances that all have their own copy of the same methods over and over again. Millions of nearly identical `cell` and `row` objects. Potentially dozens or hundreds of nearly identical `column` and `header` objects.
+
+And the cost is not just the duplicate function objects. In this style, every arrow function can also carry a closure scope with it. That closure might capture the `row`, the `table`, caches, options, or other local values from the factory that created the object. Those closure scopes are retained per instance too, which is a big part of why the memory usage can scale so aggressively.
+
+### What Table V9 Does Instead
+
+During the development of the TanStack Table V9 alpha, we introduced this refactor when creating every `row`, `column`, `cell`, and `header` object.
+
+```ts
+function getRowPrototype(table) {
+  // Only create this row prototype once and cache it on the table instance
+  if (!table._rowPrototype) {
+    // create the row prototype object
+    table._rowPrototype = { table }
+
+    const features = Object.values(table._features)
+    for (let i = 0; i < features.length; i++) {
+      // create the methods for the row prototype - row.getValue(), row.getUniqueValues(), etc.
+      features[i]!.assignRowPrototype?.(table._rowPrototype, table)
+    }
+  }
+
+  return table._rowPrototype
+}
+
+// This code is in a loop that creates thousands or millions of rows
+export const constructRow = (
+  table,
+  id,
+  original,
+  rowIndex,
+  depth,
+  subRows,
+  parentId,
+) => {
+  // grab already made row prototype to get the methods
+  const row = Object.create(getRowPrototype(table))
+
+  // only assign unique values for this row
+  row._uniqueValuesCache = {}
+  row._valuesCache = {}
+  row.depth = depth
+  row.id = id
+  row.index = rowIndex
+  row.original = original
+  row.parentId = parentId
+  row.subRows = subRows ?? []
+
+  return row
+}
+```
+
+So instead of creating every `row.getValue()`, `row.getUniqueValues()`, etc. method for each `row` object potentially millions of times, we create them just once and then assign them to the `row` prototype, and then just assign the prototype to the new `row` object.
+
+This also eliminates those per-instance method closures. The shared prototype method receives the specific row through `this`, so the row-specific state stays on the row object instead of being captured by a new function scope for every row.
+
+We repeated this pattern for `column`, `cell`, and `header` objects too, though the largest impact was on the `row` objects, since those are the most likely to both scale and have a large amount of methods on them. We did not need to use prototype methods for the `table` object, because the `table` is already just 1 object instance.
+
+### Why Not Use JavaScript Classes?
+
+A natural question here is: why not just create `Row`, `Column`, `Cell`, and `Header` classes and put the methods there?
+
+For a normal library, that would make a lot of sense. JavaScript class methods already live on the class prototype, so a `class Row { getValue() {} }` implementation could get many of the same memory benefits as this refactor, as long as we did not use class fields or constructor-assigned arrow functions for the methods.
+
+The problem is that TanStack Table V9's APIs are dynamically composed from features. We only want `row.getVisibleCells()` to exist if the column visibility feature is registered. We only want `column.toggleSorting()` to exist if the row sorting feature is registered. The same idea applies across rows, columns, cells, headers, and custom plugin APIs.
+
+Trying to model that with classes would get awkward quickly. JavaScript classes have single inheritance, but TanStack Table's feature system is closer to conditional multiple inheritance. A table might use sorting, filtering, pagination, column visibility, row selection, pinning, grouping, and a custom plugin. Another table might use only sorting. Another might use a totally different combination.
+
+You could imagine building a chain of mixins like:
+
+```ts
+Row = withSorting(withColumnVisibility(withPagination(BaseRow)))
+```
+
+But then every feature needs to participate in class composition, ordering becomes more fragile, and custom plugins have to extend the right class shape at the right time. It is possible, but it is not simpler.
+
+The manual prototype approach gives us the part we actually want from classes, shared prototype methods, while keeping the feature system dynamic:
+
+Each table gets prototypes that contain exactly the APIs for the features it registered. That is the important part for the tree-shakable runtime model, and it is much cleaner than trying to force every possible feature combination through class inheritance.
+
+### Why Not Do This in Table V8?
+
+There was an original [PR](https://github.com/TanStack/table/pull/5927) from [Michael Leibman](https://github.com/mleibman-db) that proposed this kind of refactor for TanStack Table V8. However, we discovered that this technically introduces subtle breaking changes. So we decided that this would be less risky to implement in Table V9 instead.
+
+What are those subtle breaking changes? Mainly destructuring object methods doesn't work anymore.
+
+Code like this breaks:
+
+```ts
+const { getValue } = row
+
+const value = getValue('name')
+```
+
+You have to use the method like this:
+
+```ts
+const value = row.getValue('name')
+```
+
+This worked in Table V8 because methods like `getValue` were arrow functions created inside the row factory. They closed over the `row` object, so they did not care how they were called.
+
+In Table V9, the method is shared on the row prototype and uses its `this` context to know which row it is operating on. When you destructure a method like this, you get the function, but you lose the original receiver. Then `this` is `undefined` in strict mode, so the method cannot find the row. That strict-mode behavior applies automatically here because ES modules are always strict, and TanStack Table ships as modules.
+
+The methods won't appear as own properties (e.g. in Object.keys(row), object spread, or JSON.stringify). They live on the prototype, though you'll still find them under [[Prototype]] in the console. This also means shallow clones like `{ ...row }` will copy row data but drop the object's methods.
+
+```ts
+console.log(row)
+// { id, index, original, depth, parentId, _valuesCache, _uniqueValuesCache }
+```
+
+But you can still call the methods all the same. Calling `row.getValue()` still works because JavaScript will automatically look for the method on the prototype if it is not found on the object itself.
+
+This is a tradeoff worth making in a breaking change release, especially if it is the only downside, but we couldn't push this change out into Table V8.
+
+## Final Thoughts
+
+This is definitely a refactor worth making for a library like TanStack Table. I wonder how many other libraries or even applications out there could benefit from this same optimization when needing to scale. We definitely thought that it was worth sharing here in case it is useful for you.
+
+If you are wondering what this means for you as a user of TanStack Table, hopefully this is just an invisible improvement that you'll barely notice. We will be documenting the small breaking changes in the migration guide for Table V8 to Table V9.
diff --git a/src/blog/tanstack-table-v9-reactivity.md b/src/blog/tanstack-table-v9-reactivity.md
new file mode 100644
index 000000000..61559b6c2
--- /dev/null
+++ b/src/blog/tanstack-table-v9-reactivity.md
@@ -0,0 +1,352 @@
+---
+title: Inside TanStack Table V9 Reactivity
+published: 2026-07-19
+excerpt: TanStack Table V9 moves state and options behind reactive primitives so updates stay within the scopes that consume them. Here is the path we took to get there.
+library: table
+authors:
+  - Riccardo Perra
+---
+
+![TanStack Table V9 - Reactivity](/blog-assets/tanstack-table-v9-reactivity/header.png)
+
+You might have found yourself in a situation where a data grid may have started as just a simple table, but then it slowly became a small application surface in and of itself. One column renders a row-selection widget, another renders an inline editor, and a toolbar above the table shows how many rows are selected. When row selection changes, the selection widget and the counter need to update, while the other cells, editors, and pagination controls should not re-render just because one row became selected. Throw in features like search or especially column resizing, and you will find yourself in a situation where rendering performance really starts to matter.
+
+## Rethinking Reactivity for Table V9
+
+That rendering problem sits behind much of the recent TanStack Table V9 reactivity work. TanStack Table, along with an increasingly higher number of other TanStack libraries, challenges itself with having adapters for as many JavaScript frameworks as possible. Table V9 is shipping with a [record 9 dedicated framework adapters](https://tanstack.com/table/latest/docs/framework) so far, plus improved support for using it with no framework adapter at all in vanilla JavaScript. We have had to iterate multiple times during the development of Table V9 to get this correct — both in being performant and easy to maintain.
+
+TanStack Table was first built with just React in mind during the early years of this library, back when it was just called [react-table](https://www.npmjs.com/package/react-table). A lot of those state management and rendering pattern assumptions stuck around in the library's core, all the way through the vanilla JS rewrite of table-core in Table V8. The primary purpose of a headless library like TanStack Table is to provide the correct state management core, but we needed to rethink how much of the core library worked under the hood and connected to each framework's reactive model.
+
+The broader [TanStack Table V9: Taking Form](https://tanstack.com/blog/tanstack-table-v9-taking-form) announcement introduced the new state management and rendering controls. Table V9 keeps most of the same public method calls while moving state and options into a reactive graph that each adapter can connect to its framework.
+
+Users should not have to understand that graph in order to build a table. Even though TanStack Table is headless, one of our requirements for Table V9 was that it fit naturally into each framework's reactive model. The complexity of translating between the framework-agnostic core and each rendering model belongs inside the TanStack Table library, not in your application code.
+
+## TL;DR: Where Table V9 Landed
+
+A Table computation should react to the state it actually reads. Selecting a row should update its checkbox and the selected-row counter without forcing every cell to depend on the entire table state.
+
+TanStack Table V9 gets there by representing each feature-state slice (pagination, row selection, column sizing, filters, and others) with its own reactive atom, while `table.store` derives the aggregated state view for compatibility.
+
+The core reactivity depends on a small shared atom contract provided by @tanstack/store:
+
+- Signal-native adapters implement it with their framework primitives and can keep option reads in the same reactive graph.
+- Store-backed adapters keep options synchronized during render; in React, granular rendering is opt-in through selectors and `Subscribe`.
+
+Your application code still passes ordinary values and calls the same Table methods it always has. The rest of this article retraces how we got here: the adapter-level approaches we tried, the limits they exposed, and why the reactive boundary ultimately had to move underneath the Table APIs.
+
+## The Table V8 Starting Point
+
+Before Table V9 moved reactivity underneath the Table APIs, adapters connected the stable Table V8 instance to each framework's update model.
+
+### Keeping a Stable Table Instance in Sync
+
+TanStack Table V8 used a contract that served the library well across frameworks. The core built one table instance, attached feature APIs to it, stored resolved options on it, and exposed `setOptions` and `setState` so each adapter could keep that instance aligned with its framework.
+
+Table owned the table logic, React, Vue, Solid, Svelte, and Angular owned their render cycles, and each adapter sat between those two worlds to push fresh options into the table instance when framework state changed.
+
+Controlled pagination gives a concrete example: when a user clicks the next-page button, Table calls `onPaginationChange` and user code updates framework state. On the next render, the adapter passes the new `state.pagination` value back through `table.setOptions`, allowing the core to read `table.options.state.pagination` while continuing to use the same table instance.
+
+```ts
+const table = createTable({
+  state: { pagination },
+  onPaginationChange: setPagination,
+  // ...
+})
+
+table.setOptions((prev) => ({
+  ...prev,
+  state: { ...prev.state, pagination },
+}))
+```
+
+That contract kept the core portable, but the framework could not see which state, option, row, column, or cell value a call such as `table.getRowModel()` touched, even when Table's own memoization could reuse the result. Any connection between those reads and the framework render cycle had to be built by the adapter from the outside.
+
+The React adapter also predated React Compiler, and the [Table V8 documentation](https://tanstack.com/table/v8/docs/installation) warned that compiler-enabled apps might not work.
+
+### Making Table V8 Reactive in Angular with Signals
+
+At the time, TanStack Table did not have an Angular adapter, and I was contributing to the project from the outside just as Angular introduced signals. The new reactive model made an Angular adapter practical to explore, and building it became my entry point into Table.
+
+I kept the Table V8 core contract intact. `createAngularTable` accepted a reactive options callback, allowing the adapter to track values such as `data()` and synchronize the latest options through `setOptions`.
+
+```ts
+const data = signal<Person[]>([])
+const pagination = signal<PaginationState>({
+  pageIndex: 0,
+  pageSize: 20,
+})
+
+const table = createAngularTable(() => ({
+  data: data(),
+  columns,
+  state: {
+    pagination: pagination(),
+  },
+  onPaginationChange: (updater) =>
+    pagination.update((prev) =>
+      typeof updater === 'function' ? updater(prev) : updater,
+    ),
+}))
+```
+
+That solved reactivity at the adapter input, but Table's APIs were still plain method calls. Calling `table.getRowModel()` inside a `computed`, effect, or template did not give Angular a dependency to track.
+
+To bridge that gap, the adapter exposed the stable table instance through `tableSignal` and returned a proxy around it. Eligible `get*` methods lazily created an Angular `computed` that read `tableSignal()` before invoking the original method. A call such as `table.getRowModel()` could then participate in Angular's reactive context without changing the Table V8 core.
+
+The proxy's `get` handler can be reduced to this pseudocode:
+
+```ts
+return new Proxy(tableSignal, {
+  get(_, property) {
+    const table = untracked(tableSignal)
+    const method = table[property]
+
+    if (canBeComputed(property, method)) {
+      if (method.length === 0) {
+        // No arguments: one computed is enough.
+        return computed(() => {
+          tableSignal()
+          return method()
+        })
+      }
+
+      // With arguments: return a function that reads from a computed
+      // cached by the argument set.
+      // Implementation omitted.
+    }
+
+    return method
+  },
+})
+```
+
+The second branch covered methods such as `getColumn(columnId)` or `getRow(id, searchAll?)`. Each distinct set of arguments received its own computed, and later calls with the same arguments invoked the cached one. This preserved the original call signature while keeping the method reactive.
+
+Components rendered from column definitions made the integration harder. A `cell` definition could render an [`OnPush`](https://angular.dev/best-practices/skipping-subtrees) component through `flexRender`. `OnPush`, now Angular's default change-detection strategy, avoids checking a component subtree until Angular has a reason to do so, such as a new input, an event in that subtree, a tracked signal update, or an explicit request to check the view.
+
+In this case, `flexRender` could keep passing the same `CellContext` reference while the values returned by its Table methods changed. Angular saw neither a new input nor a signal dependency behind those methods, so the adapter had to coordinate table updates with view checks to keep the component current.
+
+The Angular adapter went through several iterations to make ordinary Table calls update reliably, including components rendered through `flexRender` with stable inputs. Its reactive boundary remained broad, however: the proxy only covered methods reached through the table instance, while `flexRender` had to re-check rendered content broadly instead of following only the state read by each component.
+
+React Compiler later exposed a similar boundary in React. A cell component could receive a stable `row` reference while `row.getIsSelected()` changed behind it, allowing the compiler to reuse memoized JSX because it could not see the state read hidden inside the method. Both cases pointed to the same Table V9 requirement: move reactivity underneath the Table APIs so rows, cells, headers, and columns can expose the dependencies they actually read.
+
+## Where Table V9 Reactivity Started: Wrapping Table Methods
+
+Table V9 introduced a deeper feature system, allowing a signal-based adapter to register reactivity while each table instance was constructed. Selected methods on the table, headers, columns, rows, and cells could be wrapped in derived reactive values. A call such as `row.getIsSelected()` could then participate in a tracked component, computed value, or effect without passing through the top-level table proxy.
+
+That solved the proxy's limited reach, but attached reactive machinery to the API objects created for each table instance, including the rows and cells materialized by its row models. Some of that work could be deferred until first access, but constructing row models and rendering the table still exercised part of the API, while creating computed wrappers lazily complicated method access and caching. With `R` rows and `C` cells per row, the cell portion alone covered `R × C` objects. If each cell exposed `N` eligible methods, the wrapping surface grew roughly as `R × C × N`, before counting the methods on rows, headers, columns, and the table itself. Those methods ultimately read a much smaller set of shared state and options, yet reactivity followed the shape of the constructed object graph.
+
+The boundary needed to move underneath the methods instead. Making state and option reads reactive would let the same APIs expose their dependencies without wrapping each method on every object.
+
+## Moving the Reactive Boundary into the Core
+
+TanStack Table first adopted [TanStack Store](https://github.com/TanStack/table/pull/6143) as part of the Table V9 rewrite. The initial implementation used the class-based `Store` and `Derived` APIs available at the time: one base store held Table-owned state, while a derived table-state snapshot reconciled it with controlled values such as `state.rowSelection`. State management had moved into the core, but every feature still read from one aggregated snapshot, while options remained plain values outside the store.
+
+Shortly afterward, the [`@tanstack/store` 0.9 update](https://github.com/TanStack/table/pull/6180) moved Store itself to a signal-backed implementation built on a modified version of `alien-signals`. Table adopted the new `createStore` and `createAtom` API, bringing signal-based dependency tracking into the core without changing its high-level state model.
+
+## Bringing Table Options into the Reactive Model
+
+The reactive state graph gave us a better place to read pagination, sorting, row selection, and the other state slices, but option changes still lived outside it. Since a table also depends on `data`, `columns`, row model factories, feature flags, callbacks, and user-provided getters, Table needed a reliable way for later reads to see those values when they changed after construction.
+
+This showed up in adapters as forced refresh code. An older framework adapter path updated the options and then cloned the base state only to wake up Store subscribers:
+
+```ts
+table.setOptions(updatedOptions)
+table.baseStore.setState((prev) => ({ ...prev }))
+```
+
+The second line did not change table state; it forced dependent reads to run because an option had changed outside the state graph.
+
+The `enableRowSelection` option is a good example. A row checkbox depends on `rowSelection` state and on whether that row can be selected at all. If an Angular, Solid, or Vue app changes `enableRowSelection` from a reactive value, `row.getCanSelect()` needs to see that option change. Updating selection state alone cannot fix a stale option read.
+
+[PR #6181](https://github.com/TanStack/table/pull/6181) added an `optionsStore`. Instead of storing resolved options only as a plain object on the table, the table could read options through a store-backed getter. `table.setOptions` updated that store, and table APIs that touched `table.options` could participate in the same reactive graph as state reads.
+
+```ts
+Object.defineProperty(table, 'options', {
+  get() {
+    return table.optionsStore.state
+  },
+  set(value) {
+    table.optionsStore.setState(() => value)
+  },
+})
+```
+
+Options reactivity brought the core model closer to how users write table code, where `data`, feature flags, and callbacks come from components and need to remain live inputs rather than construction-time configuration.
+
+## Keeping Two Reactive Graphs in Sync
+
+The Store-backed core still had to connect to each framework's reactive graph. A Store update could not schedule Angular, Solid, or Vue by itself; each adapter needed a native signal, memo, ref, or computed in the dependency path. Kevin and I iterated on where to make that translation.
+
+One version of that bridge used notifiers: the core remained Store-backed, while the adapter supplied functions that the framework could track and updated them whenever table state or options changed. The feature patched the Store `state` getter so it read the matching framework notifier before returning the Store value:
+
+```ts
+table.store = bindStore(table.store, () => stateSignal())
+table.optionsStore = bindStore(table.optionsStore, () => optionsSignal())
+
+function bindStore(store, notifier) {
+  const descriptor = Object.getOwnPropertyDescriptor(
+    Object.getPrototypeOf(store),
+    'state',
+  )!
+
+  Object.defineProperty(store, 'state', {
+    get() {
+      notifier?.()
+      return descriptor.get!.call(store)
+    },
+  })
+
+  return store
+}
+```
+
+If Angular read `table.store.state` inside a `computed`, the notifier gave Angular a dependency to track, allowing the adapter to trigger the computation again before it read the latest Store state.
+
+The notifier bridge let signal adapters wake their UI, but synchronizing two graphs introduced failure modes. In React, updating the options store during render could notify subscribers and schedule another render that synchronized the same options again. Signal adapters could instead miss an update when the component never read the notifier. Scheduling and untracked reads addressed individual cases, but the durable answer was one graph per adapter, implemented through a shared core contract.
+
+## State Became Granular
+
+[PR #6234](https://github.com/TanStack/table/pull/6234) split the table-state snapshot into separate atoms for each feature. Each slice has a writable base atom for Table-owned state and a readonly atom through which Table resolves the current value. A method such as `row.getIsSelected()` can now depend on row selection without subscribing to the entire table-state snapshot.
+
+This is where automatic dependency tracking becomes useful. When Angular runs a `computed`, Solid runs a `createMemo`, or Vue runs a `computed`, the framework records the reactive values read while that function executes. Since options had already moved into the graph, one Table calculation could now depend on feature state and options at the same time.
+
+A simplified version of the page-selection calculation makes those dependencies visible:
+
+```ts
+function getIsAllPageRowsSelected(table) {
+  const rows = table.getPaginatedRowModel().flatRows
+  const rowSelection = table.atoms.rowSelection.get()
+  const enableRowSelection = table.options.enableRowSelection
+
+  const selectableRows = rows.filter((row) =>
+    typeof enableRowSelection === 'function'
+      ? enableRowSelection(row)
+      : (enableRowSelection ?? true),
+  )
+
+  return (
+    selectableRows.length > 0 &&
+    selectableRows.every((row) => Boolean(rowSelection[row.id]))
+  )
+}
+```
+
+In a native signal adapter, evaluating this method inside a component, `computed`, or `createMemo` records those three incoming reads automatically.
+
+Per-feature atoms gave the graph the granularity we wanted, leaving one question: did every adapter have to build those atoms with the same runtime implementation, or could the core depend only on their shared contract?
+
+## The Final Design: One Contract, Many Reactive Runtimes
+
+TanStack Router gave us a useful precedent around the same time because it had its own state graph, its own adapters, and the same need to run well across React, Solid, and Vue. Its work on a [store factory](https://github.com/TanStack/router/pull/6704) and [native Solid primitives](https://github.com/TanStack/router/pull/6730) showed that the core could depend on a small shared shape while each adapter supplied the implementation that made sense for its framework.
+
+### The Core Contract
+
+[PR #6237](https://github.com/TanStack/table/pull/6237) made the implementation behind those atoms configurable. We kept TanStack Store's atom contracts as the common language while allowing each adapter to provide the primitives underneath. In other words, the core depends on the shared `Atom` and `ReadonlyAtom` surfaces, not on the runtime that implements them. The essential part of that contract is small:
+
+```ts
+interface TableReactivityBindings {
+  createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => Atom<T>
+  createReadonlyAtom: <T>(
+    fn: () => T,
+    options?: TableAtomOptions<T>,
+  ) => ReadonlyAtom<T>
+  batch: (fn: () => void) => void
+  schedule: (fn: () => void) => void
+  untrack: <T>(fn: () => T) => T
+}
+```
+
+The full interface also covers options-store creation, subscriptions, and cleanup. `constructTable` uses these bindings to build the same feature atoms for every adapter.
+
+React implements those calls with TanStack Store atoms. Angular, Solid, and Vue reuse their native reactive primitives and import the shared Store interfaces only as types, so those imports disappear from the emitted JavaScript. Batching and scheduling can come from the framework as well: Solid, for example, passes `batch` from `solid-js`. `constructTable` does not need a framework-specific branch, and frameworks without native signals can use the TanStack Store implementation directly.
+
+### Framework Bindings
+
+The adapter mapping remains small. The following pseudocode uses generic signal primitives, but the shape is the same whether an adapter builds it with a signal, memo, ref, or computed value:
+
+```ts
+import {
+  createComputed,
+  createSignal,
+  type ReadonlySignal,
+  type WritableSignal,
+} from 'your-signal-primitives'
+import type { Atom, ReadonlyAtom } from '@tanstack/store'
+
+function signalToReadonlyAtom<T>(source: ReadonlySignal<T>): ReadonlyAtom<T> {
+  // implementation: expose the signal through `get` and `subscribe`
+}
+
+function signalToWritableAtom<T>(source: WritableSignal<T>): Atom<T> {
+  // implementation: expose the signal through `get`, `set`, and `subscribe`
+}
+
+const nativeBindings = {
+  createReadonlyAtom<T>(
+    fn: () => T,
+    _options?: TableAtomOptions<T>,
+  ): ReadonlyAtom<T> {
+    return signalToReadonlyAtom(createComputed(fn))
+  },
+  createWritableAtom<T>(
+    initialValue: T,
+    _options?: TableAtomOptions<T>,
+  ): Atom<T> {
+    return signalToWritableAtom(createSignal(initialValue))
+  },
+}
+```
+
+That is the core atom mapping: a native readonly signal becomes a Store-compatible `ReadonlyAtom`, while a native writable signal becomes an `Atom`. The real adapters also preserve their framework lifecycle and subscription context. Angular does that in its [reactivity bindings](https://github.com/TanStack/table/blob/beta/packages/angular-table/src/reactivity.ts), Solid in its [Solid bindings](https://github.com/TanStack/table/blob/beta/packages/solid-table/src/reactivity.ts), and Vue in its [Vue bindings](https://github.com/TanStack/table/blob/beta/packages/vue-table/src/reactivity.ts).
+
+The core was already framework-agnostic in Table V8; Table V9 makes its reactivity layer portable too. The recently added [Ember adapter](https://github.com/TanStack/table/pull/6397), contributed by [Ryan Tablada](https://github.com/rtablada), shows that the contract does not require a conventional signals API: Ember's `@tracked` writable values and `@cached` derived values only need to expose compatible `Atom` and `ReadonlyAtom` surfaces. Table V9 also adds Preact and Alpine adapters, which provide Store-backed bindings. Rendering and lifecycle remain framework-specific, but a new adapter no longer needs a separate Table state model.
+
+## What This Changes for TanStack Table Users
+
+Reactivity now sits below the Table APIs, where each adapter can connect state and option reads to the component or subtree that should update.
+
+### Automatic Tracking in Signal-Native Adapters
+
+In signal-native adapters, calling a Table method inside a tracked component, computed value, or effect is enough to register its dependencies. A Solid component calling `table.getPageCount()`, for example, tracks the native primitives read underneath that method.
+
+The framework can then update only the reactive scope that performed the read, without an explicit `Subscribe` component. React reaches a similar result through TanStack Store selectors and explicit subscription boundaries.
+
+### Granular React Rendering and Compiler Compatibility
+
+React does not collect signal reads during render, so its adapter builds the table graph with `@tanstack/react-store`. Its `useSelector` hook connects an atom or Store to React through the selector-compatible `useSyncExternalStoreWithSelector` shim, using the source's `get` and `subscribe` methods.
+
+By default, `useTable` subscribes to every registered state slice, so any slice change schedules the table component. A basic table therefore needs no explicit selector or `Subscribe`, and React Compiler can observe the dependency at that level.
+
+Granular rendering is opt-in. `useTable` accepts a selector as its second argument to narrow the state that schedules the table component, while `Subscribe` creates an independent boundary lower in the tree. This is useful for components rendered from column definitions, where stable `row`, `cell`, or `header` references can hide the state read behind a Table method. The row-selection widget from the beginning can make that dependency explicit:
+
+```tsx
+import { Subscribe } from '@tanstack/react-table'
+
+const selectionColumn = columnHelper.display({
+  id: 'select',
+  cell: ({ row, table }) => (
+    <Subscribe
+      source={table.atoms.rowSelection}
+      selector={(selection) => selection[row.id]}
+    >
+      {(isSelected) => (
+        <RowSelectionWidget
+          checked={Boolean(isSelected)}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      )}
+    </Subscribe>
+  ),
+})
+```
+
+`Subscribe` uses `useSelector` underneath, so the compiler can keep the cell memoized and still update the widget when that row changes. Inline cells that already rerender with their parent usually do not need another boundary. The same opt-in mechanism can isolate frequently changing state such as filtering or column sizing; the [basic Subscribe example](https://tanstack.com/table/beta/docs/framework/react/examples/basic-subscribe?panel=code) shows the pattern in a complete table.
+
+## Reactivity Where It Belongs
+
+The path to Table V9 ran through proxies, wrapped methods, broad render checks, and bridges between reactive systems. Each iteration solved a real adapter problem, but they all pointed to the same boundary: reactivity needed to live underneath the Table APIs, where each framework could connect it to the primitives that already drive its UI.
+
+Back in the opening grid, the result is deliberately ordinary. Selecting a row can update its checkbox and the selected-row counter without treating every editor, filter, and pagination control as part of the same update. Changing page size can replace the visible rows, and column sizing can update the affected layout, while unrelated components remain outside those paths.
+
+Applications still pass ordinary values and call the same Table methods. Table V9 makes the machinery underneath those calls more explicit so that it can stay out of application code.
diff --git a/src/blog/tanstack-table-v9-taking-form.md b/src/blog/tanstack-table-v9-taking-form.md
new file mode 100644
index 000000000..2ab68dd7b
--- /dev/null
+++ b/src/blog/tanstack-table-v9-taking-form.md
@@ -0,0 +1,410 @@
+---
+title: 'TanStack Table V9: Taking Form'
+published: 2026-06-07
+excerpt: TanStack Table V9 is now in Beta. It wouldn't be as good as it is without our learnings from building TanStack Form.
+library: table
+authors:
+  - Kevin Van Cott
+---
+
+![TanStack Table V9 - Taking Form](/blog-assets/tanstack-table-v9-taking-form/header.png)
+
+TanStack Table V9 has been a long time coming, and at this point, it has probably taken too long 😅, but it is finally _almost\*_ here... almost.
+
+🎉 🎉 🎉 Announcing TanStack Table V9 Beta today! 🎉 🎉 🎉
+
+## TL;DR
+
+TanStack Table V9 has major state management improvements, is more tree-shakable, extendable, and composable while maintaining type safety, uses less memory, has broadly improved performance, has a much better devtools experience, has some new API patterns for setting up your table and table state management, and is caught up to the latest versions and patterns for React, Preact, Solid, Vue, Angular, Svelte, and Lit.
+
+## The Backstory on V9
+
+TanStack Table V9 has been a multi-year project for me (Kevin). Tanner handed me the maintainer keys for Table back in 2022 and started to trust me as the lead maintainer by the end of 2023 as he moved on to focus on TanStack Router and eventually TanStack Start. Since then, it has pretty much just been me and a few other drive-by contributors working on the project in my free time, which, of course, I never have enough of.
+
+Although, this changed a little over a year ago when [Riccardo Perra](https://github.com/riccardoperra) joined the TanStack Table team as a contributor. He's been instrumental in helping us finalize the new state management system, especially for the non-React signal-based adapters like Angular and Solid.
+
+Still, maintenance of the project has been a bit lackluster, especially as we have focussed on this new version for well-over the past year.
+
+The development of V9 often stalled as we tried to figure out the correct approaches. Thankfully, the start of work on another TanStack library (TanStack Form) gave us a new perspective on how to approach the problems. Eventually, we were able to cheat a bit and just copy the same approaches that Corbin introduced to us from his work on TanStack Form and TanStack Store. The major state management improvements that we are introducing in V9 wouldn't have been quite as good without this new perspective.
+
+### What Was Wrong With V8?
+
+TanStack Table V8 has been out for 4 years now 🤯. It has been pretty successful, but it also has suffered from a few issues caused by the fundamental design choices of v8.
+
+From both the constant feedback that we gather and our own experiences as maintainers, these were the biggest issues with V8:
+
+1. **State management didn't follow official React patterns.** This had been a smell for a while, but the moment the React Compiler became stable, TanStack Table V8 started breaking. The same state management system also made the non-React adapters harder to interact with.
+2. **There wasn't enough control over re-rendering or memoization.** Big tables paid the price for every state change, even when the part of state that changed had nothing to do with the part being rendered. The larger your table, the more memoization hacks you would find yourself trying to implement to keep your table performing well.
+3. **Large virtualized tables used too much memory.** TanStack Table was using more memory than expected, especially at the large scales of virtualized tables, which we definitely want to have as a core offering.
+4. **The feature set could feel bloated to some users and too basic to others at the same time.** Every feature and API that TanStack Table includes is currently very specifically scoped. We often found ourselves playing code-golf while working on fixes and improvements in order to not bloat the bundle for everyone. We needed to find a way to make TanStack Table scale both up and down without making the library overall worse for everyone.
+5. **Extending the library with custom functionality was difficult, or at least unclear.** Our answer to custom functionality was to just recommend using composition (Write your own code along-side TanStack Table code). While this is still good advice, we know that there are better ways to let you extend the library with your own functionality.
+6. **Making reusable table code was not straightforward.** If you had multiple tables that shared the same features, row models, table components, cell components, and default options, you had to invent your own wrapper patterns. This was possible, but it was not obvious or officially supported in a way that felt as good as the rest of TanStack.
+7. **The devtools were lackluster.** Useful devtools, outside of some basic debug logging, were neglected. They needed a refresh.
+
+These were all important problems that needed to be addressed, but we probably only needed to address one or two of them at a time for a new major release.
+
+I made what can now most definitely be considered a big mistake in trying to address all of these issues at once. It didn't start out that way, but now that we are at the end of alpha development, it is clear that this is what happened and that it would have been much more beneficial to move faster and deliver smaller improvements more frequently.
+
+Now that we are shipping V9 with fixes to all of the above, it's great and I think most will be very happy with the improvements, but we should try to prioritize the issues that actually matter better in the future, especially when we the maintainers have limited time to actually work on the project.
+
+On the bright side, V9 is going to be a foundational release for the future of TanStack Table to build upon.
+
+### The Start of V9 Development
+
+I've ordered the above list is issues of V8 in roughly the order of importance based on user complaints from the community that we've received over the years. So you'd think that the next major version of TanStack Table would start by addressing each of those issues in turn. But that's not what happened, unfortunately.
+
+In late 2023, I had this idea I couldn't "shake". What if Table V9 could be tree-shakable again, in a way similar to how react-table v7 was? One of the complaints that I've seen about TanStack Table was that it was "overkill" for simple use-cases. I usually disagreed with this, as TanStack Table V8 was a relatively small library with a bundle size of under 15kb, but I could see the point when developers would only be using less than 10% of the included API surface.
+
+A bit more history is useful here. React Table v7 had a hook-based plugin model. You only paid in bundle size for the features you actually used. It was very tree-shakable!
+
+```ts
+// react-table v7
+const instance = useTable(
+  { columns, data },
+  useSortBy,
+  useFilters,
+  usePagination,
+)
+```
+
+When Tanner rewrote the project for V8, a lot of that model went away. For some context, V8 was the first TanStack project to be rewritten fully in TypeScript (by Tanner himself), and the type system became, correctly, the most important constraint. V7's hook-plugin shape didn't translate cleanly to a strongly-typed core, so V8 ended up with one aggregated table model where every feature's types and code were pulled in together. Tree-shakability got deprioritized so the type story could be great.
+
+That trade was the right call. V8 is type-safe in a way v7 never was. But I kept poking at the question: could you have both? Could V9 give you v7's "only pay for what you use" and V8's type safety at the same time?
+
+I started prototyping. I figured it would take a few weeks. The full thinking lives in the V9 RFC trail ([#5270](https://github.com/TanStack/table/discussions/5270), [#5595](https://github.com/TanStack/table/discussions/5595), [#5834](https://github.com/TanStack/table/discussions/5834)) if you want the long version.
+
+### A Year on the Wrong Problem
+
+It didn't take a few months. It took over a year, and even then it wasn't really done. By early 2025 I had the tree-shakable refactor 99% working. The last 1% of getting TypeScript to work perfectly was going to be the death of me. Types are a cruel place to spend your limited free time 😭.
+
+![Any Year Now](/blog-assets/tanstack-table-v9-taking-form/screenshot-1.png)
+
+And then, while I was head-down on my favorite tree-shaking problem, the React Compiler shipped.
+
+The Compiler did me a favor I didn't ask for. It made the state management problem unignorable. The patterns Table had been using since V8 weren't compatible with the rules the Compiler now enforced. Suddenly, this was the most important problem I needed to address. And I found that it was actually a pretty hard problem to get 100% correct for all use cases and edge cases that we needed to continue to support.
+
+### Help arrives from TanStack Form
+
+[Corbin Crutchley](https://github.com/crutchcorn) had recently joined TanStack and was busy turning TanStack Form into something genuinely awesome. Form needed exactly the things Table needed: a way to model state once, in a core that wasn't React-flavored, and have it work with any JavaScript framework plus the React Compiler.
+
+The answer Form arrived at was a signals-style store with atom slices, derived state, selector-based subscriptions, and a single source of truth that every adapter could read and write to. This ended up being just about the same state management system that we needed for Table. It still took us a while to perfectly adapt the reactivity for how we needed it to work in Table, but we have eventually got it to work pretty well.
+
+In 2025, I actually ended up taking a small break from working exclusively on Table to start a new library called TanStack Pacer where I could more freely experiment at a smaller scale with our new TanStack Store state management patterns. This ended up being a very valuable side-quest, though TanStack Pacer itself is now growing into it's own early succesful project that requires even more time and attention.
+
+## What's New in V9?
+
+So that's the backstory for how TanStack Table V9 was developed. Now let's talk specifically about what's new in V9.
+
+### 1. State Management with TanStack Store
+
+You can still use the old syntax for custom state management as you did in V8, but now we use TanStack Store under the hood, and we let you use TanStack Store along-side TanStack Table.
+
+Here's the traditional way to manage state in V8, and you can still do this in V9.
+
+```ts
+// v8-style custom state
+const [pagination, setPagination] = useState({
+  pageIndex: 0,
+  pageSize: 10,
+})
+
+const table = useTable({
+  ...otherOptions,
+  state: {
+    pagination, // manage
+  },
+  onPaginationChange: setPagination, // required to hoist state updates to your scope
+})
+```
+
+But now, you can also manage state with TanStack Store Atoms.
+
+```ts
+const paginationAtom = useCreateAtom({
+  pageIndex: 0,
+  pageSize: 10,
+})
+
+const table = useTable({
+  ...otherOptions,
+  atoms: {
+    pagination: paginationAtom,
+  },
+})
+```
+
+This might not seem like a big deal, until we next discuss the benefits of using TanStack Store Atoms for state management over traditional React state management.
+
+### 2. Re-Rendering and Memoization Control
+
+Now that TanStack Table V9 uses TanStack Store under the hood, it gives you an option to control exactly how each part of your react tree re-renders when state changes via state selectors. By default, the entire table will re-render when any state changes, but this is just because of the default `state => state` selector when not specified.
+
+```ts
+const table = useTable(
+  {
+    ...options,
+  },
+  // 2nd arg for customizing the state selector
+  // (state) => state, // default selector
+  (state) => ({
+    pagination: state.pagination, // now only re-renders the entire table when pagination changes. All other state changes will be opt-in with `table.Subscribe`
+  }),
+)
+
+console.log(table.state) // logs { pagination: { pageIndex: 0, pageSize: 10 } }
+```
+
+This is the easy migration path. If you want the table component to behave a lot like V8, subscribe to the full state and keep rendering from `table.state`. If you want the V9 performance model, subscribe to less at the top and move the reactive reads closer to the components that actually need them.
+
+Let's take row selection as an example:
+
+```tsx
+<table.Subscribe source={table.atoms.rowSelection}>
+  {(rowSelection) => (
+    <div>{Object.keys(rowSelection).length.toLocaleString()} rows selected</div>
+  )}
+</table.Subscribe>
+```
+
+This is the kind of thing that sounds small until you have a giant table. Row selection changes should not have to re-render your pagination controls, your filter inputs, your table wrapper, and every other component that happens to have access to the table instance. In V9, you can subscribe to `rowSelection` exactly where the selected row count is rendered.
+
+For TanStack Form users, this should feel familiar. `form.Subscribe` and `table.Subscribe` are not the same API by accident. This is one of the places where Table very directly took form.
+
+One more small but important escape hatch: V9 also exports the underlying static functions that power many of the builder-pattern APIs. The builder APIs are still the main API, but static functions let you call the raw implementation directly when you want to opt out of our default memoization for a rare use case, or when you want one feature API without installing the whole feature onto the table instance.
+
+This could also be useful for a future Qwik adapter in the future.
+
+```ts
+import { row_getIsSelected } from '@tanstack/react-table/static-functions'
+
+// const isSelected = row.getIsSelected();
+const isSelected = row_getIsSelected(row) // optional static function instead of using the builder-pattern method
+```
+
+### 3. Less Memory Usage for Large Virtualized Tables
+
+Large virtualized tables exposed another V8 problem: even if you were only rendering a small window of rows, the table still had to create and maintain a lot of row, cell, and derived row-model objects behind the scenes.
+
+Some of that was just the nature of what Table does. A headless table library still needs a row model. But some of it was self-inflicted. Around the same time we were working on the new V9 state model, [mleibman-db](https://github.com/mleibman-db) opened [PR #5927](https://github.com/TanStack/table/pull/5927), which significantly reduced memory usage in V8 by moving more table APIs onto shared prototypes instead of recreating methods per instance.
+
+That work was eventually ported into V9 and then expanded on. Rows, cells, headers, and columns are now constructed with memory efficiency as a first-class constraint. Feature APIs are assigned to shared prototypes where possible. Per-instance data is still there when a feature needs it, but we are much more careful about what has to be allocated for every row and cell.
+
+There has also been a broader performance pass happening in V9. Some of those wins are not glamorous. They are things like removing unnecessary intermediate arrays, tightening dependency checks in memoized functions, avoiding wasted row clones, and adding memoization where virtualized layouts call the same size calculations over and over.
+
+That is exactly the kind of boring work that matters for tables at scale. A table can call the same small pieces of code thousands or millions of times. Small allocations become real allocations. Unnecessary row-model walks add up. V9 is not "done" with performance work, but both the memory and cpu usage are already in a much better place.
+
+### 4. Tree-Shakable Features That Scale Up and Down
+
+The tree-shakable feature work did make it into V9. To be clear, V8 was already somewhat tree-shakable. The client-side RowModels were opt-in. `filterFns`, `sortingFns`, and `aggregationFns` could be imported separately. We had already learned that tables need a way to pay for only some of the expensive data-processing code.
+
+V9 takes that idea a few steps further. Now the entire API surface for each feature is opt-in too. Features are no longer just "inside Table" by default. They are registered more like plugins, alongside the row models your table needs:
+
+```ts
+import {
+  createPaginatedRowModel,
+  createSortedRowModel,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from '@tanstack/react-table'
+
+const features = tableFeatures({
+  rowPaginationFeature,
+  rowSortingFeature,
+})
+
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
+    sortedRowModel: createSortedRowModel(sortFns),
+  },
+  columns,
+  data,
+})
+```
+
+If you do not register `rowSortingFeature`, you do not get sorting APIs and you do not ship sorting code. TypeScript knows that too, which is the part that took forever to get right. `table.setSorting` exists when sorting is registered. It does not exist when it is not. The same idea applies across the rest of the feature APIs.
+
+This solves the "bloated to some, too basic for others" problem in a much healthier way. A tiny table can use `tableFeatures({})` and only get the core row model. A full enterprise grid can register sorting, filtering, faceting, grouping, pagination, row selection, pinning, sizing, and everything else it needs.
+
+And yes, if you just want the V8-style "give me everything" setup while you migrate, `stockFeatures` exists. I would not use it as the default for new code, because it gives up a lot of the point of V9, but it is a useful bridge.
+
+### 5. Custom Features and Clearer Extension Points
+
+V8's answer to custom functionality was usually: compose around the table. That was, and still is, good advice. But it was not always satisfying advice.
+
+If you were building something like [Material React Table](https://material-react-table.com/), or a design-system table wrapper, or a table with app-specific behaviors like density, keyboard navigation, analytics, custom row actions, or server-side conventions, you could absolutely build those things around TanStack Table. But there was not a very clear "this is how Table itself adds features, and you can do the same thing" path.
+
+V9 changes that. The built-in features are just feature objects. They can provide default options, initial state, table APIs, column APIs, row APIs, cell APIs, and header APIs. Custom features can use that same system:
+
+```ts
+const features = tableFeatures({
+  rowPaginationFeature,
+  densityFeature, // make your own feature APIs, works just like a built-in feature!
+})
+
+const table = useTable({
+  features,
+  rowModels: {
+    paginatedRowModel: createPaginatedRowModel(),
+  },
+  columns,
+  data,
+})
+```
+
+That does not mean every custom behavior should become a Table feature. A lot of app code should still just be app code. But for reusable table packages and serious table abstractions, V9 finally gives you a first-class extension model that matches how the core library is built.
+
+This also means we can be more disciplined about what belongs in core. We do not have to accept every useful feature into TanStack Table itself just because there was no other clean way to build it. The core can stay smaller, while advanced users and ecosystem libraries get a better path to go further.
+
+> **Note:** The TypeScript generics for custom features still don't work perfectly. Declaration merging is still supported to fix those use cases. This might be worked on more in the future.
+
+### 6. Reusable Table Code with createTableHook
+
+Another place Table took from Form is in reusable composition. TanStack Form has a `createFormHook` for defining shared form infrastructure once, then reusing it across an app. Table V9 now has the same idea with `createTableHook`.
+
+The new [Composable Tables example](/table/latest/examples/composable-tables) shows this pattern too. You define your common table features, row models, default options, and reusable table/cell/header components once. Then each table only brings its own columns, data, and any custom options it needs:
+
+```tsx
+import {
+  createPaginatedRowModel,
+  createSortedRowModel,
+  createTableHook,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from '@tanstack/react-table'
+
+// Set up this stuff once, use for all tables
+export const { useAppTable, createAppColumnHelper } = createTableHook({
+  features: tableFeatures({
+    rowPaginationFeature,
+    rowSortingFeature,
+  }),
+  rowModels: {
+    sortedRowModel: createSortedRowModel(sortFns),
+    paginatedRowModel: createPaginatedRowModel(),
+  },
+  tableComponents: {
+    PaginationControls,
+    RowCount,
+  },
+  cellComponents: {
+    TextCell,
+    NumberCell,
+    RowActionsCell,
+  },
+})
+
+const columnHelper = createAppColumnHelper<Person>()
+
+function UsersTable({ data }: { data: Person[] }) {
+  const columns = columnHelper.columns([
+    columnHelper.accessor('firstName', {
+      header: 'First Name',
+      cell: ({ cell }) => <cell.TextCell />,
+    }),
+    columnHelper.display({
+      id: 'actions',
+      cell: ({ cell }) => <cell.RowActionsCell />,
+    }),
+  ])
+
+  const table = useAppTable({ columns, data }) // simpler "useTable" usage with features, row models, and table components already set up elsewhere
+
+  return (
+    <table.AppTable>
+      {() => (
+        <>
+          <table.RowCount />
+          <table.PaginationControls />
+        </>
+      )}
+    </table.AppTable>
+  )
+}
+```
+
+This makes it much easier to build a family of similar tables without re-declaring the same features and rendering conventions in every file. Your app can have one "app table" setup, or several setups for different table families, and still keep the column definitions and table instances strongly typed.
+
+There is also a new `tableOptions` helper for composing reusable option objects, similar in spirit to `queryOptions` in TanStack Query. It is a smaller utility than `createTableHook`, but it is useful when you just want type-safe shared options that can be spread into different table setups.
+
+### 7. Real Devtools
+
+The last V8 problem was devtools, and this one is mostly thanks to [AlemTuzlak](https://github.com/AlemTuzlak)'s work on the new `@tanstack/devtools` platform.
+
+Table V9 now has a real devtools integration. In React, you mount the TanStack Devtools host, add the table plugin, and register each table instance:
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import {
+  tableDevtoolsPlugin,
+  useTanStackTableDevtools,
+} from '@tanstack/react-table-devtools'
+
+function UsersTable() {
+  const table = useTable({
+    key: 'users-table',
+    features,
+    rowModels,
+    columns,
+    data,
+  })
+
+  useTanStackTableDevtools(table)
+
+  return <TableView table={table} />
+}
+
+function App() {
+  return (
+    <>
+      <UsersTable />
+      <TanStackDevtools plugins={[tableDevtoolsPlugin()]} />
+    </>
+  )
+}
+```
+
+The goal is pretty simple: when your table is not doing what you think it is doing, you should not have to start spelunking through `console.log(table.getState())` again. You should be able to inspect the table, its state, and its derived data in a supported panel that is built for Table.
+
+The default devtools entrypoint is also development-only, so you do not accidentally ship the real devtools implementation to production. If you do want production devtools for a preview environment or an internal admin tool, there is a `/production` entrypoint for that too.
+
+## Where this leaves us
+
+TanStack Table V9 has taken way too long to get here. I am not going to pretend otherwise. But what's in V9 right now is, honestly, the version of Table I wish I had been writing the whole time:
+
+- State management that follows React's rules, plays well with the Compiler, and works well with all javascript frameworks
+- Granular re-rendering via selectors and `Subscribe`
+- Better memory and cpu usage for large tables
+- Tree-shakable features, so the bundle reflects what you actually use, giving TanStack Table room to grow
+- Custom features that can plug into the same system as built-in features
+- `createTableHook` and `tableOptions`, so reusable table code is much easier to organize
+- Devtools that exist and are actually supported
+
+We think we are mostly done with the foundational changes for V9 in terms of state management, tree-shakability, etc. Now, while we are in beta, we have some good opportunities to make some final needed breaking changes and fixes to the features themselves before we go stable. We hope that this will not be as long of a beta process as some of the other TanStack libraries, but it depends on the feedback we get from the community and how much community help we can get to test and fix the issues that we find.
+
+If you have the stomach for a beta, I would love your help kicking the tires. You can find the V9 docs [here](/table/beta).
+
+We also have a [full migration guide for V8 to V9](/table/beta/docs/framework/react/guide/migrating)!
+
+We're also in the middle of a documentation rewrite for V9, already with lots of new examples and guides. Some pages might move around in the next few weeks as we finalize the new structure.
+
+Here are a bunch of the new Kitchen Sink examples worth checking out:
+
+- [React Kitchen Sink](/table/beta/docs/framework/react/examples/kitchen-sink)
+- [React Kitchen Sink with Shadcn Base](/table/beta/docs/framework/react/examples/kitchen-sink-shadcn-base)
+- [React Kitchen Sink with Shadcn Radix](/table/beta/docs/framework/react/examples/kitchen-sink-shadcn-radix)
+- [React Kitchen Sink with Hero UI](/table/beta/docs/framework/react/examples/kitchen-sink-hero-ui)
+- [React Kitchen Sink with Mantine](/table/beta/docs/framework/react/examples/kitchen-sink-mantine)
+- [React Kitchen Sink with Material UI](/table/beta/docs/framework/react/examples/kitchen-sink-material-ui)
+- [React Kitchen Sink with React Aria](/table/beta/docs/framework/react/examples/kitchen-sink-react-aria)
+- [Angular Kitchen Sink](/table/beta/docs/framework/angular/examples/kitchen-sink)
+- [Lit Kitchen Sink](/table/beta/docs/framework/lit/examples/kitchen-sink)
+- [Preact Kitchen Sink](/table/beta/docs/framework/preact/examples/kitchen-sink)
+- [Solid Kitchen Sink](/table/beta/docs/framework/solid/examples/kitchen-sink)
+- [Svelte Kitchen Sink](/table/beta/docs/framework/svelte/examples/kitchen-sink)
+- [Vue Kitchen Sink](/table/beta/docs/framework/vue/examples/kitchen-sink)
diff --git a/src/blog/tanstack-table-v9-typescript-performance.md b/src/blog/tanstack-table-v9-typescript-performance.md
new file mode 100644
index 000000000..318cb071e
--- /dev/null
+++ b/src/blog/tanstack-table-v9-typescript-performance.md
@@ -0,0 +1,315 @@
+---
+title: TypeScript Performance in TanStack Table V9
+published: 2026-06-14
+excerpt: TanStack Table V9's types do a lot more than V8's did. Here's how we cut type instantiations by 62-86% across every package between alpha.54 and beta.12 to keep the editor experience feeling instant.
+library: table
+authors:
+  - Kevin Van Cott
+---
+
+![TanStack Table V9 - TypeScript Performance](/blog-assets/tanstack-table-v9-typescript-performance/header.png)
+
+TanStack Table V9 has a much more capable, though more complex, type-level API than V8. The types in Table may not be as complicated as a project like TanStack Router or Form, but it has still grown more complex in V9 than it ever had been in previous versions.
+
+If you had been using the Table V9 alphas, there's a chance that you could feel a bit of slowness in your editor. It probably was not enough to crash your TypeScript server, but it probably was noticeable. Good news, though! Between the alpha and the latest beta, we cut TypeScript's type-checking work by 62-86% across every package, and 36-79% across all examples in our docs! The latest beta now type-checks faster than our alpha versions from last week by a wide margin, and the editor experience is back to feeling instant.
+
+This post covers where the cost came from, how we measured it, and the specific changes that fixed these issues. One of those changes is a still-overlooked TypeScript feature that many library authors seem to barely use, and it turned out to be one of our bigger optimizations, turning a trade-off into a win across the board.
+
+## Why V9's types do more work than V8's
+
+V8 pretty much had one `Table` type that you had to worry about. Every feature (sorting, filtering, grouping, pinning, and so on) was baked into a single `Table<TData>` whether you used it or not. That is easy on TypeScript: one interface, one generic parameter, nothing to compute. It is also part of why V8 couldn't tree-shake unused features out of your bundle, and why extending the table meant declaration-merging into global interfaces that affected every table in your app. These kind of limitations were the main complaints about TanStack Table V8.
+
+TanStack Table V9 is introducing multiple improvements in the developer experience, and it mostly revolves around refactoring the way we used TypeScript. In V9, features are modular. You pass exactly the features you want, and both the runtime and the types are assembled from your selection:
+
+```ts
+const features = tableFeatures({
+  rowSortingFeature,
+  columnFilteringFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  sortFns: { ...sortFns, mySortFn },
+})
+
+const table = useTable({ features, columns, data })
+```
+
+To support this, V9 introduces just one new generic parameter: `TFeatures`. That sounds modest, but it flows through everything, and it replaces a whole category of global declaration merging from V8 with per-table inference:
+
+- The `table` you get back only has APIs for the features you registered. No sorting feature, no `table.setSorting()` or `column.toggleSorting()` APIs in the types or in the bundle.
+- Custom `filterFns`, `sortFns`, and `aggregationFns` are inferred from the features object. `columnDef.sortFn` accepts `'mySortFn'` above because this table registered it.
+- `TableMeta`, `ColumnMeta`, and filter meta are declared per table instead of merged globally, so your tables no longer share one meta shape.
+- Plugins still use a small amount of declaration merging, but only to declare that they exist. Their types only show up on tables that register them.
+
+Under the hood, the table's type is assembled from a feature map. Each entry maps a registerable feature to the APIs that feature adds to the table, and a helper selects the registered entries and intersects them. This is what it looks like in the latest beta:
+
+```ts
+export interface Table_FeatureMap<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  columnFilteringFeature: Table_ColumnFiltering
+  columnGroupingFeature: Table_ColumnGrouping<TFeatures, TData>
+  columnOrderingFeature: Table_ColumnOrdering<TFeatures, TData>
+  columnPinningFeature: Table_ColumnPinning<TFeatures, TData>
+  columnResizingFeature: Table_ColumnResizing
+  columnSizingFeature: Table_ColumnSizing
+  columnVisibilityFeature: Table_ColumnVisibility<TFeatures, TData>
+  columnFacetingFeature: Table_ColumnFaceting<TFeatures, TData>
+  globalFilteringFeature: Table_GlobalFiltering<TFeatures, TData>
+  rowExpandingFeature: Table_RowExpanding<TFeatures, TData>
+  rowPaginationFeature: Table_RowPagination<TFeatures, TData>
+  rowPinningFeature: Table_RowPinning<TFeatures, TData>
+  rowSelectionFeature: Table_RowSelection<TFeatures, TData>
+  rowSortingFeature: Table_RowSorting<TFeatures, TData>
+}
+
+export type Table<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> = Table_Core<TFeatures, TData> &
+  ExtractFeatureMapTypes<TFeatures, Table_FeatureMap<TFeatures, TData>>
+```
+
+It did not start out this clean. In the alpha versions, there was no feature map and no shared helper. The selection logic was written out by hand, one conditional branch per feature, fed into `UnionToIntersection` to glue all of the table's APIs together:
+
+```ts
+// Avoid this Pattern!
+export type Table<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> = Table_Core<TFeatures, TData> &
+  UnionToIntersection<
+    | ('columnFilteringFeature' extends keyof TFeatures
+        ? Table_ColumnFiltering
+        : never)
+    | ('columnGroupingFeature' extends keyof TFeatures
+        ? Table_ColumnGrouping<TFeatures, TData>
+        : never)
+    | ('columnOrderingFeature' extends keyof TFeatures
+        ? Table_ColumnOrdering<TFeatures, TData>
+        : never)
+    | ('columnPinningFeature' extends keyof TFeatures
+        ? Table_ColumnPinning<TFeatures, TData>
+        : never)
+    | ('columnResizingFeature' extends keyof TFeatures
+        ? Table_ColumnResizing
+        : never)
+    | ('columnSizingFeature' extends keyof TFeatures
+        ? Table_ColumnSizing
+        : never)
+    | ('columnVisibilityFeature' extends keyof TFeatures
+        ? Table_ColumnVisibility<TFeatures, TData>
+        : never)
+    | ('columnFacetingFeature' extends keyof TFeatures
+        ? Table_ColumnFaceting<TFeatures, TData>
+        : never)
+    | ('globalFilteringFeature' extends keyof TFeatures
+        ? Table_GlobalFiltering<TFeatures, TData>
+        : never)
+    | ('rowExpandingFeature' extends keyof TFeatures
+        ? Table_RowExpanding<TFeatures, TData>
+        : never)
+    | ('rowPaginationFeature' extends keyof TFeatures
+        ? Table_RowPagination<TFeatures, TData>
+        : never)
+    | ('rowPinningFeature' extends keyof TFeatures
+        ? Table_RowPinning<TFeatures, TData>
+        : never)
+    | ('rowSelectionFeature' extends keyof TFeatures
+        ? Table_RowSelection<TFeatures, TData>
+        : never)
+    | ('rowSortingFeature' extends keyof TFeatures
+        ? Table_RowSorting<TFeatures, TData>
+        : never)
+  > &
+  Table_Plugins<TFeatures, TData>
+```
+
+This was a problem for type-checking performance. Every branch is its own conditional type, so a single evaluation of `Table` meant fourteen conditional instantiations, a union, and a `UnionToIntersection` pass that creates a function type per member. And it doesn't get evaluated once. It gets evaluated for every distinct `(TFeatures, TData)` pair the compiler encounters, and inside a library where every internal function is generic over both, that happens constantly. The column, row, cell, header, options, and state types each had their own copy of this same hand-written block, and because every copy was anonymous, none of the work was shareable or cacheable between them.
+
+To put a number on it, we checked out V8 and ran the same measurement against its core source with the same compiler:
+
+| `table-core` source only (TypeScript 6.0.3) |                               Instantiations |
+| ------------------------------------------- | -------------------------------------------: |
+| v8.21.3                                     |                                       78,054 |
+| v9 alpha.54                                 | <span style="color:#ef4444">1,144,560</span> |
+| v9 beta.12                                  |   <span style="color:#22c55e">158,636</span> |
+
+We expected V8 to be cheap since its types never had to compute anything, and it was: 78k instantiations is close to the floor for a library this size. The V9 alpha was <span style="color:#ef4444">**14.7×**</span> that. All the new type capability, paid for in full, on every check, in every editor session. Beta.12 brings it down to <span style="color:#f59e0b">**2.0×**</span> V8, while inferring per-table feature APIs, per-table fn registries, typed meta slots, and plugin merging that V8 didn't offer. We think that is a fair price for what the types now do. 14.7× was not.
+
+## How We Measured Type Performance
+
+Editor lag is mostly the TypeScript language service doing the same work `tsc` does, on demand, in whatever file you're editing. So instead of guessing, we tracked the same metric the compiler tracks.
+
+That metric that we measured was `Instantiations` from `tsc --extendedDiagnostics`: the number of times the compiler had to stamp out a generic type with concrete arguments. Unlike check times, this is deterministic. We used `tsc --generateTrace` to find where the work was happening. This is the same approach we used in our [TanStack Router TypeScript performance work](./tanstack-router-typescript-performance).
+
+One nuance worth flagging: we optimized against `tsc`, the compiler and language service nearly everyone runs today, where fewer instantiations is reliably better and the most stable number to chase. The upcoming Go-based [`tsgo` (TypeScript 7)](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0-beta/) checks types in parallel across independent workers that can duplicate shared work, so widely-referenced types may be instantiated once per worker and total count may map less directly to wall-clock time there.
+
+## The Results
+
+We measured at several points over the past week.
+
+All values in the tables below are TypeScript type instantiations as reported by `tsc --extendedDiagnostics`.
+
+_Lower is better._
+
+| Benchmark                                    |                                     alpha.54 |                                    beta.10 |                                    beta.12 |                            alpha.54 → beta.12 |
+| -------------------------------------------- | -------------------------------------------: | -----------------------------------------: | -----------------------------------------: | --------------------------------------------: |
+| `@tanstack/table-core` `tsc --noEmit`        | <span style="color:#ef4444">1,230,007</span> | <span style="color:#f59e0b">494,577</span> | <span style="color:#22c55e">266,723</span> | <span style="color:#22c55e">**−78.3%**</span> |
+| `@tanstack/table-core` declaration emit      | <span style="color:#ef4444">1,146,896</span> | <span style="color:#f59e0b">385,702</span> | <span style="color:#22c55e">161,432</span> | <span style="color:#22c55e">**−85.9%**</span> |
+| `@tanstack/react-table` `tsc --noEmit`       |   <span style="color:#ef4444">235,498</span> |  <span style="color:#f59e0b">73,690</span> |  <span style="color:#22c55e">54,442</span> | <span style="color:#22c55e">**−76.9%**</span> |
+| `examples/react/kitchen-sink` `tsc --noEmit` |   <span style="color:#ef4444">221,006</span> |  <span style="color:#f59e0b">85,839</span> |  <span style="color:#22c55e">74,583</span> | <span style="color:#22c55e">**−66.3%**</span> |
+
+And of course, this is not a react-only story. Every framework adapter improved:
+
+| Adapter package           |                                   alpha.54 |                                   beta.12 |                            alpha.54 → beta.12 |
+| ------------------------- | -----------------------------------------: | ----------------------------------------: | --------------------------------------------: |
+| `@tanstack/angular-table` | <span style="color:#ef4444">276,299</span> | <span style="color:#22c55e">49,813</span> | <span style="color:#22c55e">**−82.0%**</span> |
+| `@tanstack/lit-table`     | <span style="color:#ef4444">192,656</span> | <span style="color:#22c55e">44,066</span> | <span style="color:#22c55e">**−77.1%**</span> |
+| `@tanstack/preact-table`  | <span style="color:#ef4444">221,090</span> | <span style="color:#22c55e">41,420</span> | <span style="color:#22c55e">**−81.3%**</span> |
+| `@tanstack/react-table`   | <span style="color:#ef4444">235,498</span> | <span style="color:#22c55e">54,442</span> | <span style="color:#22c55e">**−76.9%**</span> |
+| `@tanstack/solid-table`   | <span style="color:#ef4444">198,164</span> | <span style="color:#22c55e">28,637</span> | <span style="color:#22c55e">**−85.6%**</span> |
+| `@tanstack/svelte-table`  | <span style="color:#ef4444">168,534</span> | <span style="color:#22c55e">29,303</span> | <span style="color:#22c55e">**−82.6%**</span> |
+| `@tanstack/vue-table`     | <span style="color:#ef4444">244,756</span> | <span style="color:#f59e0b">92,747</span> | <span style="color:#22c55e">**−62.1%**</span> |
+
+Every kitchen-sink example we can measure improved between 36% and 79%, including the heavyweight variants built on Material UI, Mantine, and shadcn. Down below, we'll cover how we were able to achieve these results.
+
+## How we improved type performance
+
+Four changes account for most of the gains.
+
+### Feature maps and `UnionToIntersection`
+
+The biggest family of wins all came from one rule: don't make the compiler recompute something you can write down as a named type.
+
+You saw both halves of this change above. The fourteen-branch union was in the alpha. The feature map ended up being the fix. The feature-to-type mapping moved into a plain named interface, and the selection logic moved into one small helper that every type family shares:
+
+```ts
+export type ExtractFeatureMapTypes<
+  TFeatures extends TableFeatures,
+  TFeatureMap extends object,
+> = UnionToIntersectionOrEmpty<
+  TFeatureMap[Extract<keyof TFeatures, keyof TFeatureMap>]
+>
+```
+
+The interface costs almost nothing to instantiate because the compiler resolves its members lazily, and indexing it with the registered keys replaces fourteen hand-written conditionals with a single one. Just as important, the map is a real named type now: plugins declaration-merge their own entries into it, which is what made the V9 plugin system fall out of this refactor almost for free. We made the same change across the options, state, column, row, cell, and header types, added inference guard tests so later optimizations couldn't quietly break the public API, and the core went from 1.23M instantiations to 495k by beta.10.
+
+We then came back for the rest of it. `ExtractFeatureMapTypes` still relies on `UnionToIntersection` internally, and that helper is expensive by nature. It leans on two of TypeScript's deeper rules at once. First, a naked type parameter in a conditional distributes over a union, so the helper turns the union of feature types into a union of function types, one per member. Then it exploits contravariance: function parameters are matched contravariantly, so when the compiler infers a single parameter type out of a union of function types, it is forced to combine the members into an intersection rather than a union. Wrapping each member in a function parameter is purely a trick to make that happen. The result is correct, but it means a function type gets created per member every time the helper runs, and none of it caches when the union's identity varies with `TData`. For the public `Table` and `TableOptions` types that cost is unavoidable, since the selected features genuinely depend on `TFeatures`. But our internal "broad" options type was running it over all thirteen stock feature option interfaces for every `(TFeatures, TData)` pair, and the stock features are known ahead of time. There is no reason to make the compiler compute an intersection that we can write out by hand:
+
+```ts
+export type TableOptions_All<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> = TableOptions_Core<TFeatures, TData> &
+  Partial<
+    TableOptions_ColumnFiltering<TFeatures, TData> &
+      TableOptions_ColumnGrouping &
+      /* ...the other eleven... */
+      TableOptions_PluginFeatureMapTypes<TFeatures, TData>
+  >
+```
+
+The one place `UnionToIntersection` still earns its keep is with plugins, since plugin keys are declaration-merged in by user code and can't be written out ahead of time. That last type in the intersection handles them, behind a guard that resolves to `unknown` when no plugins are merged:
+
+```ts
+type TableOptions_PluginFeatureMapTypes<TFeatures, TData> =
+  [Exclude<keyof TableOptions_FeatureMap<TFeatures, TData>, StockKeys>] extends [never]
+    ? unknown
+    : UnionToIntersection</* plugin entries only */>
+```
+
+If you don't use plugins, the expensive path never runs. If you do, you pay for your plugin keys and nothing else. We verified the plugin flow against our custom-plugin example, which merges its own options in and reads them back through this exact type.
+
+One sharp edge before moving on, because the "name everything" rule has a limit and we hit it. Splitting the feature maps into "static" and "data-dependent" halves so the static half could cache better seemed like an obvious next step. It made things worse, by 28,357 instantiations. A named type is only a cache point if it gets used from multiple places with the same arguments. Wrapping a conditional that still varies per call site in another named layer just adds instantiations. The hand-written intersection above works precisely because it removed the computation; it didn't rename it. We measured the split, reverted it, and kept the numbers in the log.
+
+### Making Custom Internal Types an Interface
+
+Profiling beta.10 with `tsc --generateTrace` was surprising: 77% of the core's remaining cost was the library checking itself. Hundreds of internal generic functions pass the table to each other, and every one of those calls related two instantiations of `Table_Internal`, our internal table type, which is only supposed to be used internally in the library. It was defined as the public conditional type plus some internal fields:
+
+```ts
+export interface Table_Internal<
+  TFeatures extends TableFeatures,
+  TData extends RowData = any,
+>
+  // core table interfaces only: no feature APIs, no conditional
+  extends
+    Omit<
+      Table_Table<TFeatures, TData>,
+      '_rowModels' | '_rowModelFns' | 'options' | 'initialState' | 'store'
+    >,
+    Table_Columns<TFeatures, TData>,
+    Table_Rows<TFeatures, TData>,
+    Table_RowModels<TFeatures, TData>,
+    Table_Headers<TFeatures, TData> {
+  // those omitted slots, redeclared as their broad all-features variants
+  options: TableOptions_All<TFeatures, TData> & {
+    /* state, atoms */
+  }
+  initialState: TableState_All
+  _rowModels: CachedRowModel_All<TFeatures, TData>
+  // ...store, atoms, _rowModelFns
+}
+```
+
+Since `Table<TFeatures, TData>` contains the feature-map conditional, every internal call site re-expanded it. The single biggest type-creation site in the entire program was the function types that `UnionToIntersection` distributes, and `Table_Internal` was the reason.
+
+The large improvement came from noticing that internal code doesn't need the feature-conditional view at all. Internally we already follow a "broad" convention (`TableState_All`, `CachedRowModel_All`, and friends) where every feature's slice is present regardless of registration. So we redefined `Table_Internal` as an interface that extends only the core table interfaces (columns, rows, headers, row models, and the base table properties) and redeclares its handful of internal slots (`options`, `initialState`, `store`, `atoms`, the row models) in their broad `*_All` forms. No feature-map conditional, statically known members, and a stable identity the compiler can relate without re-expanding the feature union each time. The public `Table` type is untouched, so nothing changes about the inference you write against.
+
+The table-core package dropped another 40% in instantiations. Declaration emit dropped 48%... but the react adapter got twice as slow. We'll discuss that issue next.
+
+### Variance annotations
+
+Now, about that react adapter doubling. The package check went from 74k to 136k instantiations when `Table_Internal` became an interface. Same core types, opposite result, and the explanation taught us more about the compiler than anything else in this effort.
+
+When TypeScript relates `SomeInterface<A>` to `SomeInterface<B>`, it wants to skip the member-by-member comparison and just compare `A` to `B`. To do that, it needs to know the variance of each type parameter, and it normally figures that out by probing the type's structure. But when a type parameter flows into conditional types, which `TFeatures` does everywhere, that measurement comes back marked unreliable. The compiler then falls back to comparing the full structure. The react adapter's hook layer creates a lot of fresh generic contexts, so it was paying the full expansion of `Table_Internal` over and over. As best we can tell, the old alias had sidestepped this without our intending it, because a deferred conditional type relates more lazily than an interface whose members are fully materialized.
+
+A large improvement came from looking at how TanStack Form and TanStack Router already annotate their big generic interfaces this way (`FieldApi` in Form carries 46 of these):
+
+```ts
+export interface Table_Core<
+  in out TFeatures extends TableFeatures,
+  in out TData extends RowData,
+>
+```
+
+`in out` declares the parameter invariant, and it is not a cache. It changes no behavior here, because these parameters already appear in both input and output positions throughout, so they were invariant in practice anyway. One subtlety worth being precise about: the compiler does validate variance annotations, but it lets you declare a parameter _more_ restrictive than its structure requires, and invariant is the most restrictive there is. So an `in out` annotation always passes that check, whatever the structure looks like, and the compiler uses the declared invariance instead of probing the structure to derive its own. That is safe, because narrowing a parameter to invariant can only remove assignments the compiler would otherwise have allowed, never introduce an unsound one. The cost shows up elsewhere, as the `TValue` experiment below illustrates: a relation you remove this way might be one your code actually relied on. What the annotation buys is a shortcut. The compiler relates instantiations by their type arguments directly, with no variance probing and no structural fallback.
+
+Annotating `Table_Internal` alone took the react adapter from 136k down to 66k, below where it started. Annotating the rest of table-core's generic interfaces (166 parameters in total) took it to 54.7k, shaved another 3% off the core, and moved the kitchen-sink example from flat to 13% better. What had looked like a core-versus-adapters trade-off became a win everywhere, for the price of two keywords per type parameter.
+
+One caveat from the same experiment, because variance annotations are not free everywhere. We tried annotating `TValue`, the cell value parameter, and the build broke immediately. `TValue` is genuinely covariant in output-position types, and forcing it invariant rejected the `Column<TF, TD, string>` to `Column<TF, TD, unknown>` widening that both the library and your apps rely on. The annotation itself was accepted, exactly as the "invariance is always safe" rule predicts. What it removed was a relation we actually needed, and the build caught it. So the rule of thumb is to only annotate parameters that are invariant in practice, and to treat a failing build as the check the annotation does not do for you. Measure, don't assume.
+
+### Explicit type arguments in the adapter hooks
+
+With the core fast, the profiler pointed at one last pattern, and it was in our own adapters. Every hook that builds a table did some version of this:
+
+```ts
+const table = constructTable({
+  ...tableOptions,
+  features: { coreReactivityFeature: reactivity(), ...tableOptions.features },
+})
+```
+
+That spread creates an anonymous object type, and that triggers the expensive half of the compiler's work: type inference. With no explicit type arguments, TypeScript has to infer `TFeatures` and `TData` back out of the shape of that anonymous object before it can do anything else, and that inference algorithm is far more involved than a plain comparison. In react's case that one expression accounted for roughly 740ms of traced check time. The fix is one line:
+
+```ts
+const table = constructTable<TFeatures, TData>({
+  /* same object */
+})
+```
+
+Passing the type arguments explicitly removes the inference step entirely. With `TFeatures` and `TData` already known, all the compiler has left is an assignability check: does this object match `TableOptions<TFeatures, TData>`? That is a cheap, direct comparison, and it is the difference between asking TypeScript to solve for the type parameters and simply telling it what they are. We found and fixed the same pattern in the angular and preact adapters, worth about 15% of each package's check. The lit, solid, svelte, and vue adapters already passed alias-typed variables and didn't need the change. If you maintain a library with construction helpers like this, this audit takes five minutes and is worth doing.
+
+## What this means for you
+
+If you are using TanStack Table in your app, you shouldn't need to think about any of these topics. This is supposed to be a concern of the library authors. It's our goal to provide a library that doesn't come slow out of the box, giving you tons of room to use the library to its full potential.
+
+If you are making a wrapper library or shared package around TanStack Table, you might consider the above advice as useful.
+
+If you tried the V9 alphas and felt the editor drag, I encourage you to try the newest beta. A full type-check of a real app's tables runs in about half the time it did in the alpha, the language service does a fraction of the work when you hover a `table.` or edit a column def, and nothing about the inference you write against has changed. Feature selection, per-table fn registries, typed meta, and plugins are all still fully inferred, now at 2.0× the type cost of V8's fixed table instead of 14.7×.
+
+For library authors doing heavy generics, the short version of our findings:
+
+1. Measure `Instantiations`. It is deterministic, and `--generateTrace` tells you where to look.
+2. Named types are only cache points when their arguments repeat. Wrapping a per-call-site conditional in more named layers makes things worse.
+3. Interfaces beat conditional-intersection aliases for hot internal types, but only if the compiler can relate them by their type arguments, which leads to:
+4. Annotate invariant type parameters with `in out` where possible. If your generics touch conditional types, the compiler's variance measurement goes unreliable and you silently pay structural fallbacks. This was the highest leverage-per-character change we made.
diff --git a/src/blog/tanstack-virtual-chat.md b/src/blog/tanstack-virtual-chat.md
new file mode 100644
index 000000000..1e08938f3
--- /dev/null
+++ b/src/blog/tanstack-virtual-chat.md
@@ -0,0 +1,118 @@
+---
+title: Chat UIs Are Lists Until They Aren't
+published: 2026-05-25
+excerpt: Chat, AI streams, and logs don't behave like ordinary lists. TanStack Virtual now supports end-anchored virtualization for prepend-stable history, append-follow, and streaming output that stays pinned.
+library: virtual
+authors:
+  - Tanner Linsley
+---
+
+In the last TanStack Virtual release, I left one thing on the table: reverse infinite scroll for chat, and it deserved its own pass.
+
+Chat used to be a niche UI, now it's everywhere, in support inboxes, activity logs, multiplayer feeds, copilots, AI agents, and streaming assistants. They all look like lists, but they don't behave like the lists virtualization libraries were originally built around.
+
+A normal virtual list is start-anchored, so the top of the content is the stable point. You scroll down, append more rows, measure dynamic heights, and everything mostly works.
+
+Chat flips that contract.
+
+- New output appears at the end.
+- Older history loads by prepending items at the start.
+- The last message can grow token by token while the model is streaming.
+- The user should only follow new output if they were already at the latest message.
+
+That last part matters. If someone scrolls up to read history, incoming messages shouldn't yank them back to the bottom, and if they're already there, the UI should stay pinned without every app rewriting the same scroll math.
+
+TanStack Virtual now has a first-class way to model that.
+
+```tsx
+const virtualizer = useVirtualizer({
+  count: messages.length,
+  getScrollElement: () => parentRef.current,
+  estimateSize: () => 72,
+  getItemKey: (index) => messages[index]!.id,
+  anchorTo: 'end',
+  followOnAppend: true,
+  scrollEndThreshold: 80,
+})
+```
+
+## End anchoring
+
+`anchorTo: 'end'` tells the virtualizer that the end of the list is the edge you want to preserve.
+
+When you prepend older messages, TanStack Virtual captures the currently visible item, finds the same keyed item after the data changes, and adjusts the scroll offset so it stays in the same visual position.
+
+That means no `column-reverse`, no inverted transforms, and no manual `scrollTop += delta` bookkeeping in every app. Just normal data:
+
+```tsx
+setMessages((current) => [...olderMessages, ...current])
+```
+
+The only real requirement is a stable key:
+
+```tsx
+getItemKey: (index) => messages[index]!.id
+```
+
+Index keys can't make prepend stability work, because after a prepend every old item moves to a new index, and the virtualizer needs to know which message is still the same message.
+
+## Follow only when pinned
+
+`followOnAppend` handles the "stay at latest, unless I am reading history" rule.
+
+If the user is already near the end, appended messages keep the viewport pinned, and if they've scrolled up, new output lands below without stealing their place.
+
+```tsx
+followOnAppend: true
+```
+
+You can also pass a scroll behavior:
+
+```tsx
+followOnAppend: 'smooth'
+```
+
+The threshold is configurable too:
+
+```tsx
+scrollEndThreshold: 80
+```
+
+That same end-state logic is exposed for UI:
+
+```tsx
+virtualizer.isAtEnd()
+virtualizer.getDistanceFromEnd()
+virtualizer.scrollToEnd()
+```
+
+So your "Jump to latest" button can use the same rules as the virtualizer itself.
+
+## Streaming output
+
+The modern version of chat isn't append-a-message, it's append a message and then resize it dozens or hundreds of times while tokens stream in.
+
+Without end anchoring, the scroll height grows but the scroll offset doesn't, so the user slowly drifts away from the bottom.
+
+With `anchorTo: 'end'`, if the viewport was pinned before the last item grew, TanStack Virtual applies the size delta and keeps the end pinned.
+
+That's the point of this feature: the common chat behaviors aren't userland chores anymore.
+
+## Still headless
+
+This still isn't a chat component.
+
+TanStack Virtual still doesn't render bubbles, loaders, timestamps, avatars, unread dividers, or composer UI. That part belongs to your app.
+
+What it does now is handle the scroll physics that almost every chat UI needs:
+
+- stable prepends
+- conditional append-follow
+- pinned streaming growth
+- end-distance helpers
+
+It's a small API with a pretty big ergonomic win.
+
+There is also a new [Chat guide](/virtual/latest/docs/chat) and a [React chat example](/virtual/latest/docs/framework/react/examples/chat) showing history prepends, appended messages, streaming replies, and a "Latest" control built with `scrollToEnd()`.
+
+Chat is one of the dominant UI patterns of modern apps now, and TanStack Virtual should make it feel boring to build.
diff --git a/src/blog/tanstack-virtual-perf-and-ios.md b/src/blog/tanstack-virtual-perf-and-ios.md
new file mode 100644
index 000000000..582fca7b0
--- /dev/null
+++ b/src/blog/tanstack-virtual-perf-and-ios.md
@@ -0,0 +1,86 @@
+---
+title: TanStack Virtual just got a lot faster, and finally handles iOS
+published: 2026-05-19
+authors:
+  - Tanner Linsley
+library: virtual
+excerpt: A perf-focused release for TanStack Virtual. Cold mount at 100k items is 5x faster, a hilarious worst-case bug now runs 1382x faster, iOS Safari momentum scroll works for the first time, and scroll-up jank with dynamic items is gone by default.
+---
+
+I spent three days last week auditing TanStack Virtual end-to-end, and what came out of it is the biggest single perf release the library has shipped in years. Cold mount on a 100k-item list dropped from 6.1 ms to 4.5 ms in real React. A worst-case `resizeItem` storm on 10k items went from nearly two seconds to 1.3 milliseconds. iOS Safari momentum scroll, which had been broken for years on dynamic-height lists, now actually works. Scroll-up jank with dynamic items, the single largest complaint cluster in our tracker, is gone by default.
+
+The work was a mix of bug fixes, a substantial internal rewrite for the hot path, and a new iOS-specific code path. Most of it landed in `virtual-core` so every framework adapter benefits. Here's what changed and why.
+
+## One bug was genuinely embarrassing
+
+Before measuring anything I read the entire `virtual-core` source looking for things that were quantifiably bad, and the worst one was a Map clone hiding in plain sight. Every time `resizeItem` ran, we'd do `this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size))`, which copies the whole size cache into a fresh Map just to invalidate a memo dep. For a 10k-item list where every item resizes once on mount, that's about 50 million wasted operations and a 1.9-second cold mount that nobody had pinned down. The fix was four lines (use a version counter, same dep pattern, integer comparison) and dropped that to 1.3 milliseconds. **1382× faster.**
+
+Below it were the usual smaller suspects: an `Object.entries+delete` pattern in `setOptions` that was triggering V8's dictionary-mode deopt on every render, a `Math.min(...arr)` spread that could blow the argument-list limit at 125k items, an `elementsCache` leak when React replaced a measured node, a `useReducer(() => ({}), {})` rerender pattern allocating per scroll event. None catastrophic alone, but together they explain why our issue tracker had recurring complaints about scroll stutter and slow initial renders on large lists.
+
+## The real ceiling was object allocation at scale
+
+After the audit fixes we still mounted a 100k-item list slower than we should have, and the cause was that we were allocating a `VirtualItem` object per index even though only ~50 are ever visible. The fix is the biggest single change in the release.
+
+For single-lane lists (the default and the common case) we now store start and size as a flat `Float64Array` and only construct `VirtualItem` objects when something actually reads `measurements[i]`. The public API still hands out an `Array<VirtualItem>` shape, but it's a `Proxy` that materializes lazily and caches. Internal hot paths read straight from the typed array, skipping the Proxy.
+
+Cold mount at 100k went from 6.1 ms to 4.5 ms in real React, and 2.5 ms to 0.54 ms in the synthetic bench. At 500k items it's now 2.7 ms instead of 14. The work is fully backward compatible: `measurementsCache` still satisfies its `Array<VirtualItem>` contract, internal consumers continue to read `[i].start` and `[i].end` the same way they used to, and only the lanes>1 path keeps the old eager allocation because lane assignment is order-dependent and harder to defer cleanly.
+
+## iOS Safari is rude
+
+If you've ever called `el.scrollTop = x` during a momentum scroll on iOS Safari, you know what happens: momentum dies, page snaps, user sees a jolt. iOS WebKit treats any programmatic scrollTop write during a touch-driven scroll as a cancel instruction, which is the opposite of what virtualization libraries want to do, because virtualization libraries write scrollTop in response to size measurements arriving.
+
+We had no iOS-specific handling at all. The "scroll stops abruptly when content above me resizes" complaints in our tracker have been some flavor of this for years.
+
+The fix defers the scrollTop write while a finger's on the screen, during the 150 ms post-touchend momentum window, and during the elastic-overscroll bounce. The accumulated adjustment flushes in a single write once everything actually settles, and the user keeps their momentum. About 370 bytes of iOS-specific code that doesn't tree-shake away on non-iOS bundles since the detection is runtime, but the per-event cost on non-iOS is one cached boolean check. That's an acceptable trade given how much of mobile traffic is iOS.
+
+## The backward-scroll jank had been festering for five years
+
+The biggest single complaint cluster in our issue tracker is "items jump while I scroll up" with dynamic heights, and the cause is that we were writing scrollTop on every above-viewport resize to keep the visible window stable. That makes sense during forward scroll, but during backward scroll the same write actively pushes the user past where they're trying to go. The community had independently rediscovered the same workaround five separate times across the years.
+
+We just gate it on direction now. Forward scroll and mount-time adjustments still fire, backward scroll skips them. Anyone who wants the old behavior can supply `shouldAdjustScrollPositionOnItemSizeChange` (it was already there) and ignore the direction.
+
+## A new method for scroll restoration
+
+`virtualizer.takeSnapshot()` returns the currently-measured items as plain `VirtualItem` objects, suitable for persisting through state storage and feeding back as `initialMeasurementsCache` on remount. Pair with the current `scrollOffset` and you get exact scroll restoration after route navigation:
+
+```tsx
+// On unmount
+const snapshot = virtualizer.takeSnapshot()
+const offset = virtualizer.scrollOffset
+sessionStorage.setItem('myList', JSON.stringify({ snapshot, offset }))
+
+// On remount
+const saved = JSON.parse(sessionStorage.getItem('myList') ?? 'null')
+useVirtualizer({
+  count: items.length,
+  estimateSize: () => 50,
+  getScrollElement: () => parentRef.current,
+  initialMeasurementsCache: saved?.snapshot,
+  initialOffset: saved?.offset,
+})
+```
+
+Only items the consumer actually rendered show up in the snapshot, since unmeasured items can fall back to `estimateSize` on restore.
+
+## The numbers
+
+Compared to the current published version:
+
+| Metric                                                | Before      | After           |
+| ----------------------------------------------------- | ----------- | --------------- |
+| Cold mount @ 100k items (real React)                  | 6.1 ms      | 4.5 ms          |
+| Cold mount @ 100k items (synthetic)                   | 2.5 ms      | 0.54 ms         |
+| Cold mount @ 500k items (synthetic)                   | 14 ms       | 2.7 ms          |
+| `resizeItem` storm on 10k items                       | 1.9 s       | 1.3 ms          |
+| `setOptions` × 10,000 (per render)                    | 14.4 ms     | 1.3 ms          |
+| `scrollToIndex` landing accuracy on dynamic 10k lists | within 1 px | 0.0 px          |
+| iOS Safari momentum scroll                            | broken      | works           |
+| Backward-scroll jank with dynamic items               | recurring   | gone by default |
+
+Bundle delta is about +900 bytes gzip, mostly the lazy fast-path machinery and the iOS code. Production minified comes out around 6.1 kB total. 91 unit tests, all green.
+
+## What's still on the list
+
+Reverse infinite scroll for chat use cases is the one big thing missing, and given how much of the modern web is now a streaming UI on top of a list, it deserves its own release with its own design pass rather than getting wedged into this one. A Fenwick-tree memory rewrite for 1M+ item lists is the other piece; it'll come if a real-world case actually asks for it.
+
+I also built a cross-library benchmark suite at `benchmarks/` while I was at it, since I wanted to verify my own changes didn't regress anything and the existing comparison content online is either stale or contradictory. It runs the same scenarios across every major virtualization library via Playwright, reports medians across runs, and is fully reproducible: `cd benchmarks && pnpm bench`. The bench is in the repo if you want to see it.
diff --git a/src/blog/type-safe-provider-tools-tanstack-ai.md b/src/blog/type-safe-provider-tools-tanstack-ai.md
new file mode 100644
index 000000000..b356b2626
--- /dev/null
+++ b/src/blog/type-safe-provider-tools-tanstack-ai.md
@@ -0,0 +1,156 @@
+---
+title: 'Your AI Tool Calls Should Fail at Compile Time, Not in Production'
+published: 2026-04-22
+excerpt: Provider tools like web search and code execution are supported on some models and silently ignored on others. TanStack AI now gates them per model at the type level, so incompatible pairings fail at compile time instead of in production.
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![Type-safe provider tools in TanStack AI](/blog-assets/type-safe-provider-tools-tanstack-ai/header.png)
+
+You wire up `webSearchTool` on your Anthropic adapter. You ship. A week later, a user complains the model's answers feel weirdly out of date. You dig in. Turns out the model you rolled out to half your users doesn't actually support that tool. No error. No exception. The model just quietly pretends the tool doesn't exist and makes up an answer.
+
+This is the worst kind of bug: type-clean, lint-clean, test-clean, production-loud.
+
+As of the latest TanStack AI release, this class of bug is impossible to ship. Provider tools are now gated at the type level, per model, at compile time. If the pairing is invalid, TypeScript tells you on the line where you pass the tool.
+
+## Why provider tools fail silently
+
+A "provider tool" is a native capability the provider hosts for you. Anthropic web search. OpenAI code interpreter. Gemini Google search. Computer use. Bash. Text editor. These are not functions you wrote; they're first-class features the provider's infrastructure runs on the model's behalf.
+
+Here's the catch: support is per model, not per provider.
+
+| Model              | Provider tools supported                                                |
+| ------------------ | ----------------------------------------------------------------------- |
+| `claude-3-haiku`   | `web_search` only                                                       |
+| `claude-3-5-haiku` | web tools only (`web_search`, `web_fetch`)                              |
+| `claude-opus-4-6`  | full superset (web, code execution, computer use, bash, editor, memory) |
+| `gpt-3.5-turbo`    | none                                                                    |
+| `gpt-5` family     | full superset                                                           |
+| `gemini-3-pro`     | full superset                                                           |
+| `gemini-lite`      | narrower subset                                                         |
+
+If you pass `computerUseTool` to `claude-3-haiku`, the provider either rejects the request, or more commonly, the model ignores the tool and generates a confident-sounding response anyway. No stack trace. No warning. Nothing for your tests to catch, because the response shape is valid, just wrong.
+
+The SDK cannot help you here unless the type system knows which model accepts which tool. That is the gap this release fills.
+
+## The broken path, before
+
+Before this release, every tool factory returned a plain `Tool`. The compiler treated them as interchangeable:
+
+```typescript
+import { chat } from '@tanstack/ai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+import { computerUseTool } from '@tanstack/ai-anthropic/tools'
+
+const stream = chat({
+  adapter: anthropicText('claude-3-haiku'),
+  tools: [
+    computerUseTool({
+      /* ... */
+    }),
+  ],
+})
+```
+
+Ships clean. Passes CI. Fails in the wild.
+
+## The fix: phantom-branded ProviderTool
+
+Every provider tool factory now returns a `ProviderTool<TProvider, TKind>` brand. The adapter carries a `toolCapabilities` list in its type channel, derived from each model's `supports.tools` array. TypeScript gates the `tools: [...]` array so only brands in that list are assignable.
+
+Same code, now:
+
+```typescript
+const stream = chat({
+  adapter: anthropicText('claude-3-haiku'),
+  tools: [
+    computerUseTool({
+      /* ... */
+    }),
+    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    // Type 'AnthropicComputerUseTool' is not assignable to type
+    // 'Tool & { "~toolKind"?: never } | ProviderTool<string, "web_search">'.
+  ],
+})
+```
+
+The error lands on the array element, exactly where you would fix it. Swap the model to `claude-opus-4-6` and the same line compiles. Swap `computerUseTool` for `webSearchTool` and it compiles on `claude-3-haiku` too, because haiku-3 supports web search.
+
+You don't have to remember the compatibility matrix. The compiler remembers it for you.
+
+## Your own tools stay frictionless
+
+Gating only makes sense for provider-hosted tools, because only those have per-model support differences. Tools you write yourself are your code; they run wherever your code runs. The `toolDefinition(...)` helper in `@tanstack/ai` returns a plain unbranded `Tool`, and the `customTool(...)` factories from the OpenAI and Anthropic adapters do the same. All of them are universally assignable:
+
+```typescript
+import { toolDefinition } from '@tanstack/ai'
+import { webSearchTool } from '@tanstack/ai-anthropic/tools'
+
+const myTool = toolDefinition({
+  /* ... */
+})
+
+chat({
+  adapter: anthropicText('claude-3-haiku'),
+  tools: [
+    myTool, // fine, always
+    webSearchTool({
+      /* ... */
+    }), // fine, haiku-3 supports it
+  ],
+})
+```
+
+No workarounds. No casts. User-defined tools behave the way they always have.
+
+## How it works under the hood
+
+Three ingredients make this safe:
+
+1. **Per-model capability declarations.** Each model constant declares a `supports.tools` array: `['web_search']`, or the full superset, or `[]`. This is the ground truth.
+
+2. **A capability map lifted into types.** A mapped type (for example `AnthropicChatModelToolCapabilitiesByName`) converts the runtime `supports.tools` into a type map indexed by model name. The text adapter threads this through a `toolCapabilities` generic on its `~types` channel.
+
+3. **A gated discriminated union on `tools`.** `TextActivityOptions['tools']` is declared as:
+
+   ```typescript
+   type ToolsFor<TAdapter> = ReadonlyArray<
+     | (Tool & { '~toolKind'?: never })
+     | ProviderTool<string, TAdapter['~types']['toolCapabilities'][number]>
+   >
+   ```
+
+   Unbranded tools match the first arm. Provider tools only match the second arm if their `TKind` is in the current adapter's capability list.
+
+"Phantom-branded" means the `TKind` tag exists only in the type system. At runtime, a `ProviderTool` is a plain object; the brand is erased by the TypeScript compiler. Zero bundle cost. Zero runtime cost. The guarantee is entirely in the types.
+
+## Why per-provider, not per-gateway
+
+There is a popular pattern in the AI SDK space: abstract tools behind a gateway layer so one interface "works everywhere." That has real ergonomic value. It also has a ceiling: the lowest common denominator of what every provider supports, with every provider's specific options flattened away.
+
+TanStack AI bets the other direction. You want _Anthropic's_ web search with its actual options (`max_uses`, domain filters, citation formatting), not a generic web-search shape that has to marshal onto four different providers. You want OpenAI's code interpreter with its full container model, not a lowest-common sandbox.
+
+The tradeoff of the native approach is obvious: more surface to misuse. That is exactly what per-model type gating fixes. You get the full provider-native tool surface, _and_ you get a compiler that refuses to let you misapply it.
+
+## Tree-shakeable `/tools` subpath
+
+Every adapter now exports its provider tools from a dedicated `/tools` subpath:
+
+```typescript
+import { webSearchTool } from '@tanstack/ai-anthropic/tools'
+import { codeInterpreterTool } from '@tanstack/ai-openai/tools'
+import { googleSearchTool } from '@tanstack/ai-gemini/tools'
+import { webSearchTool as openRouterWebSearch } from '@tanstack/ai-openrouter/tools'
+```
+
+If you don't import a tool, it doesn't end up in your bundle. Adapter roots stay lean; tool factories ship on demand. The same pattern holds across `@tanstack/ai-anthropic`, `@tanstack/ai-openai`, `@tanstack/ai-gemini`, `@tanstack/ai-openrouter`, `@tanstack/ai-grok`, and `@tanstack/ai-groq`.
+
+## Try it
+
+The AI tool-calling surface has always been underspecified at the type level. Models advertise capabilities they partially implement. SDKs promise uniformity they cannot fully deliver. The result is a class of bugs that slip past tests and only show up when a real user asks a real question.
+
+TanStack AI closes that gap at the exact point it matters: the line where you hand tools to a model. If the pairing is invalid, you know before you commit.
+
+Upgrade your `@tanstack/ai-*` adapters, import provider tools from the `/tools` subpath, and read the [Provider Tools guide](https://tanstack.com/ai/latest/docs/tools/provider-tools) for the per-model matrix.
diff --git a/src/blog/we-removed-rsc-from-tanstack-com.md b/src/blog/we-removed-rsc-from-tanstack-com.md
new file mode 100644
index 000000000..4a4cd3c56
--- /dev/null
+++ b/src/blog/we-removed-rsc-from-tanstack-com.md
@@ -0,0 +1,182 @@
+---
+title: 'We Removed React Server Components from TanStack.com'
+published: 2026-06-23
+draft: true
+excerpt: React Server Components solved a real performance problem for tanstack.com, but once our markdown and highlighting stack got small, we were left with a set of runtime and code-shape tradeoffs we didn't want anymore.
+library: start
+authors:
+  - Tanner Linsley
+---
+
+Earlier this year, tanstack.com became one of my favorite examples for React Server Components. Our content-heavy pages were shipping a giant markdown and syntax highlighting stack to the browser, we moved that work to the server, a meaningful amount of JavaScript disappeared, and the site got faster. We wrote about it, measured it, and felt pretty good about the result because it was exactly the kind of problem RSC is supposed to solve.
+
+The performance win was real, but after living with the architecture for a while, I kept noticing how long it took to explain what should have been a pretty boring content pipeline.
+
+Markdown became JSX in server-only files, JSX became a Flight payload, route code received `contentRsc`, and every change had to understand which side of the runtime boundary it was allowed to touch. The RSC APIs themselves did what we asked them to do, but the code around them kept collecting context, bundler configuration, dependency resolution, manual chunking, serialization boundaries, special files, and values that stopped looking like content by the time they reached the route.
+
+That was still a reasonable trade when the alternative was shipping Shiki and our old markdown stack to every docs reader, but it also left me wondering whether RSC was solving a hard application problem or mostly keeping a needlessly large dependency out of the browser.
+
+## RSC solved the problem we actually had
+
+The first performance pass came after we removed third-party ads from tanstack.com. Once the ad stack was gone, the remaining first-party cost was much easier to see, and docs were the obvious problem.
+
+At the time, one docs page was transferring about **1.1 MiB** of script, with about **358 KiB** clearly tied to syntax highlighting alone, mostly Shiki, its runtime pieces, themes, and language chunks. Markdown was still in the client path too, so the browser was basically downloading a small publishing system just to read the docs.
+
+RSC fixed that in the most direct way possible, render markdown and highlighted code on the server, send the result to the client as Flight data, and stop shipping the big renderer to every reader.
+
+The client bundle changes from that first move were substantial:
+
+| Page type          | Client JS graph change |
+| ------------------ | ---------------------: |
+| Blog post pages    |        -153 KB gzipped |
+| Docs pages         |        -153 KB gzipped |
+| Docs example pages |         -40 KB gzipped |
+
+The production pages moved too. `/blog/react-server-components` went from **52 to 74** in Lighthouse, Total Blocking Time dropped from **1,200ms to 260ms**, and transfer size dropped from **1,101 KiB to 785 KiB**. `/router/latest/docs/overview` went from **78 to 81**, TBT dropped from **280ms to 200ms**, and transfer size dropped from **917 KiB to 777 KiB**.
+
+I don't want to rewrite that history to make the rest of this post cleaner. RSC worked, heavy client code stopped shipping to the client, and the browser had less to do, but once we saw how much of the win came from markdown and syntax highlighting, a more obvious question started bothering me.
+
+Why did rendering markdown and highlighting code need **358 KiB** in the first place?
+
+RSC gave us a good way to keep that cost out of the browser, but it didn't make the underlying renderer any smaller. We still had a huge general-purpose content stack, and now we also had an architecture built around keeping it on the server. If we could make that stack small enough to ship, would we still choose RSC?
+
+Would anyone?
+
+I knew tanstack.com couldn't answer that for every app, and I'm still happy to be proven wrong, but it felt pretty existential at the time. Once you strip away the routing, data loading, and colocation story that tends to get bundled into RSC, the concrete technical benefit I kept coming back to was much simpler, server components can use logic and dependencies that never ship to the browser. That matters a ton when the dependency is a giant markdown and syntax highlighting stack. I was having a harder time finding places where it mattered enough to justify the same machinery without one.
+
+So we decided to find out whether the huge dependency was the use case.
+
+## We made the expensive part small
+
+We replaced the old stack with `@tanstack/markdown` and `@tanstack/highlight`, small packages built around the exact markdown and code rendering contract tanstack.com needs. We stopped depending on a general-purpose highlighting engine for a site that mostly needs predictable docs code blocks, stopped generating duplicate light and dark markup, stopped shipping inline token styles, and moved to class-based output with theme CSS.
+
+The result wasn't zero JavaScript, but it was small enough that shipping it stopped feeling irresponsible. On the production routes we measured, the explicit markdown and code renderer is about **27 KiB transferred**, roughly **18 to 19 KiB** more than the RSC version.
+
+That's the part that changed the whole decision for me. RSC had been solving a dependency problem by turning it into an architecture decision, and once the dependency problem mostly disappeared, all of the architecture was still there waiting to be paid for.
+
+Regular SSR could return raw markdown and source data through server functions, render it with packages we own, and keep the browser payload sane. We didn't need content to become a special serialized React value before a route could display it anymore, it could just be content again.
+
+## We kept the performance win
+
+We compared current production at `tanstack.com` against `old.tanstack.com`, which was still running the RSC version during the measurement window. These are direct Lighthouse CLI mobile runs against production URLs, with two-run averages from July 4, 2026.
+
+The current site includes normal production work that landed after the old site was cut, so this isn't a perfect RSC-only lab test and I wouldn't assign every byte below to removing RSC. The question I care about is narrower, after markdown and highlighting got small and we moved content back to regular SSR, did we give up the performance win RSC had bought us?
+
+On these routes, no.
+
+| Page                            | Old RSC score | Current SSR score | Old TBT | Current TBT | Old bytes | Current bytes |
+| ------------------------------- | ------------: | ----------------: | ------: | ----------: | --------: | ------------: |
+| `/blog/react-server-components` |            76 |                67 |  139 ms |       66 ms | 1,086 KiB |       889 KiB |
+| `/router/latest/docs/overview`  |            71 |                71 |  209 ms |      115 ms | 1,017 KiB |       836 KiB |
+
+The blog Lighthouse score is lower in this run and docs are tied, so I'm not going to pretend one noisy score is a product truth. The byte and main-thread story is much clearer, the current non-RSC site is smaller and has lower Total Blocking Time on the two routes that mattered most to our original RSC story.
+
+The payload breakdown is where the trade becomes easier to see:
+
+| Bucket                 | Old RSC blog | Current blog | Blog delta | Old RSC docs | Current docs | Docs delta |
+| ---------------------- | -----------: | -----------: | ---------: | -----------: | -----------: | ---------: |
+| Document               |       99 KiB |       37 KiB |    -62 KiB |       86 KiB |       34 KiB |    -52 KiB |
+| App JS/assets          |      526 KiB |      349 KiB |   -177 KiB |      543 KiB |      366 KiB |   -177 KiB |
+| Markdown/code renderer |        9 KiB |       27 KiB |    +18 KiB |        8 KiB |       27 KiB |    +19 KiB |
+| CSS                    |       46 KiB |       52 KiB |     +6 KiB |       46 KiB |       52 KiB |     +6 KiB |
+
+So what are we shipping more of? About **18 to 19 KiB** of explicit markdown and code-rendering chunks, plus a few KiB of CSS. Some of the **177 KiB** app JS reduction is probably unrelated cleanup, which is why I wouldn't call that an RSC delta, but the trade we can see is already enough, moving off RSC added a small renderer bucket and current production is still smaller overall on both routes.
+
+## Six pages changes the math
+
+The first-load comparison is actually the least favorable way to look at the current architecture, because that's the only time the browser pays for the renderer. Every page after that tilts the trade further toward regular SSR.
+
+In the RSC version, every new piece of server-backed content came with the rendered Flight payload for that content. We kept the renderer itself out of the browser, but each navigation, refetch, or new server data value could make us pay for its serialized component tree again.
+
+The regular SSR version pays for a tiny renderer once, then server functions only send the content data that changed. A docs request sends markdown, an example request sends source data, and the client already knows how to render both. We aren't retransferring the rendered component tree every time someone moves around the site.
+
+Local production payload checks showed that direction pretty clearly:
+
+| Payload                      | RSC gzip | SSR gzip |   Delta |
+| ---------------------------- | -------: | -------: | ------: |
+| Query landing code example   |   4.6 KB |   0.0 KB | -4.6 KB |
+| Router docs overview content |   5.2 KB |   3.7 KB | -1.5 KB |
+| Router example initial file  |   5.6 KB |   1.5 KB | -4.1 KB |
+| Heavy blog post content      |  15.0 KB |   9.4 KB | -5.6 KB |
+
+Our average visitor hits about six pages per session, so the first-load renderer cost is usually paid once while the payload savings keep showing up. The examples above save between **1.5 and 5.6 KB** every time that content is requested, and a page can request more than one server data value. By the sixth page, the renderer cost is old news while the RSC version would've kept sending rendered Flight payloads along the way.
+
+That is a much bigger part of this trade than we gave it credit for the first time around. RSC turned a reusable client dependency into recurring serialized output, which made sense when the reusable dependency was enormous, but once we got it down to a few dozen KiB, paying once and sending only the data changes fit our traffic much better.
+
+## The code kept telling us the same thing
+
+There was one question I kept using to test the architecture, where does markdown become something React can render?
+
+The RSC answer started in `fetchDocs` or `fetchBlogPost`, moved through `renderMarkdownToRsc`, rendered markdown into JSX in `processor.rsc.tsx`, wrapped that JSX in a fragment in `renderRsc.tsx`, called `renderServerComponent`, serialized the result, and eventually arrived at the route as `contentRsc`.
+
+The important part looked like this:
+
+```tsx
+import { renderServerComponent } from '@tanstack/react-start/rsc'
+import * as React from 'react'
+import { renderMarkdownToJsx } from './processor.rsc'
+
+export async function renderMarkdownToRsc(content: string) {
+  const { content: contentJsx, headings } = await renderMarkdownToJsx(content)
+  const contentRsc = await renderServerComponent(
+    React.createElement(React.Fragment, null, contentJsx),
+  )
+
+  return {
+    contentRsc,
+    headings,
+  }
+}
+```
+
+There's nothing offensive about that function, and none of this is an indictment of the TanStack Start RSC setup or helper APIs. They did what we asked them to do. The problem was the shape that accumulated around the boundary, route components received `contentRsc: React.ReactNode`, the place displaying markdown no longer explained how markdown became markup, and every human or coding agent working in that path had to know which files were normal React, which were server-only React, which values were raw content, which were Flight payloads, and which component tree only existed after serialization.
+
+That context isn't impossible to learn, but it made ordinary work feel oddly expensive. A content change could turn into a dependency graph question, a component change could turn into a server-boundary question, and bundler behavior was never very far away. None of those things were outrageous on their own, there were just too many of them for a markdown pipeline that no longer needed to hide a huge dependency.
+
+The migration commit, `92b1c481`, removed or renamed the whole content-specific RSC path:
+
+- `src/utils/markdown/processor.rsc.tsx`
+- `src/utils/markdown/renderRsc.tsx`
+- `src/components/markdown/CodeBlock.server.tsx`
+- `src/components/markdown/renderCodeBlock.server.tsx`
+- `src/utils/landing-code-example.functions.ts`
+- `src/components/landing/LandingCodeExampleCard.server.tsx`
+- `src/components/landing/codeExamples.server.tsx`
+- `src/components/markdown/MarkdownHeadingContext.tsx`
+
+The deletions split between the RSC-specific content path and the old rendering plugins:
+
+| Removed code                   | Files | Lines removed |
+| ------------------------------ | ----: | ------------: |
+| RSC-specific content plumbing  |     9 |           555 |
+| Old markdown/rendering plugins |     8 |           994 |
+
+The content path became boring again. Server functions return content data, `MarkdownContent` receives a markdown document and renders a normal `Markdown` component, landing examples are component data, and below-fold media-heavy sections still use targeted `Hydrate` timing so the browser doesn't eagerly schedule too much work on the first load.
+
+The browser is doing a little more rendering work now, and that's a trade I'm happy to make because the amount is small, predictable, and reused. In return, the data moving through the app looks like the source material again, the route explains what it renders, and opening one file doesn't require a mental model of the whole bundler.
+
+## RSC stopped earning its keep
+
+I don't think our first RSC move was fake or misguided, it solved the problem we had at the time and gave us a very real performance win. I'm also not trying to prove that regular SSR beats RSC everywhere, because two production routes on one site couldn't prove that even if I wanted them to.
+
+I also came away more skeptical of the broader RSC pitch. React core and Next.js tend to wrap server components in a much bigger story about routing, data loading, and colocation, but none of those things were what made RSC valuable here. The technical benefit we could actually point to was keeping expensive component logic and dependencies on the server and out of the client bundle, and that matters a ton for giant renderers, parsers, highlighters, formatters, and content pipelines.
+
+Maybe there are many more use cases where that benefit justifies the machinery and we haven't run into them yet. I'm happy to be proven wrong, but our strongest RSC use case disappeared as soon as the dependency got small, and I don't think that's nothing.
+
+For us, RSC bought relief from a huge markdown and highlighting stack, then that stack stopped being huge and we were left paying for runtime boundaries, bundler context, serialization, special files, and a content path that was harder for humans and coding agents to follow. The standard APIs weren't bad, the architecture just stopped earning its keep.
+
+## Supporting RSC is different from requiring it
+
+I don't want this post to flatten the amount of work behind TanStack Start's RSC support either. Manuel did a significant amount of difficult framework and bundler work to make Flight streams usable without forcing the rest of your application to orbit them, and we're going to keep supporting that work.
+
+The fact that RSC is opt-in is what makes this decision so uneventful. Tanstack.com can stop using it without TanStack Start removing the capability, changing direction, or asking every other Start user to agree with us.
+
+RSC support has also become something of an ecosystem checkbox. Next.js made RSC foundational to its current architecture, so people ask whether a framework supports RSC long before they can describe the problem they expect RSC to solve. I suspect most applications don't need them today, but developers still want to know the door is open, and that's fair.
+
+I also have no idea whether RSC will remain the primitive that fills this role forever. Better framework primitives may eventually cover enough of the same ground. Flight or something like it might become framework-agnostic, move closer to the platform, or matter a lot less in a future where React isn't the center of the frontend universe. Gasp.
+
+We don't need to predict that future to make a good decision now. Start can support RSC as an optional capability without treating it as the required center of every application. Honestly, the best evidence of Manuel's work may be that TanStack Start can keep supporting RSC while tanstack.com removes it, and neither choice has to compromise the other.
+
+Regular SSR is the boring answer again, and it fits tanstack.com better. The renderer is tiny, the first load is still smaller overall on the routes we measured, the next five pages send changed content data instead of fresh rendered Flight payloads, and the code explains itself when you open the route.
+
+I can imagine using RSC again when the server boundary is doing enough work to deserve being part of the application model, but I don't want to reach for an architecture to hide a dependency problem anymore. I'd rather make the dependency small and let content be content.
diff --git a/src/blog/who-owns-the-tree.md b/src/blog/who-owns-the-tree.md
new file mode 100644
index 000000000..d222fdb35
--- /dev/null
+++ b/src/blog/who-owns-the-tree.md
@@ -0,0 +1,188 @@
+---
+title: 'Who Owns the Tree? RSC as a Protocol, Not an Architecture'
+published: 2026-04-28
+draft: false
+excerpt: RSC is usually framed as a single architecture where the server owns the tree. But it's also a protocol, and the protocol supports more than one composition model. The overlooked question is who owns the tree.
+library: start
+authors:
+  - Tanner Linsley
+redirect_from:
+  - rsc-is-a-protocol-before-it-is-an-architecture
+  - who-owns-the-tree-rsc-is-a-protocol-not-an-architecture
+---
+
+![Who Owns the Tree?](/blog-assets/who-owns-the-tree/header.jpg)
+
+A few weeks ago we shipped [React Server Components Your Way](/blog/react-server-components), and the most common follow-up was:
+
+> Why even bother with two RSC composition models? Pick one.
+
+When most people talk about RSCs, they're usually referencing one specific architecture where the server owns the tree, `'use client'` marks the holes, and the framework stitches everything together at hydration. That's the model that people have in their heads when they say "RSC support".
+
+It's an important model and even more important that people know and understand that TanStack Start supports it, but...
+
+RSC is also a _protocol_, a way to serialize rendered React output, client refs, and non-JSON stuff into a stream that can be streamed to the client and reconstructed. The "conventional" server-owned tree is just **one way** to use that protocol.
+
+**So, who owns the tree?**
+
+If and when the server owns it, you need a way to drop client interactivity _into_ it, which is exactly what `'use client'` is for. Hopefully this doesn't come as a surprise. It's in the react docs and how pretty much every RSC framework model works to this day, including Start.
+
+However, if the _client_ owns it, you'll need a way to drop _server-rendered UI into it_. That's what Composite Components solve in TanStack Start.
+
+Both of these models are powered by the same protocol.
+
+## It matters more often than you think
+
+Alright, imagine you're building a dashboard where the client owns almost everything: tabs, filters, drag layout, optimistic updates, the command palette, all of it. But one chart happens to pull from a crappy and slow analytics API, runs a bunch of server-only computation and happens to require hundreds of kilobytes of charting code just to produce the markup.
+
+In the server-owned model approach, the obvious solution is to invert your whole route to the server, marking every interactive component along the way with `'use client'` and hope that the boundaries land where you want them.
+
+Don't get me wrong, this totally works. People do this every day in Next.js. But what you _really_ just did was adopted a server-first architecture for your whole app just to render _one single server-shaped region_ into a mostly client-side controlled tree.
+
+Now imagine the opposite being possible. Just keep the dashboard client-owned, ask the server through api/server function for the rendered chart markup, then drop it into the tree wherever you want, alongside whatever client state you already have.
+
+```tsx
+import { createFromReadableStream } from '@tanstack/react-start/rsc'
+
+function Dashboard() {
+  const { data: chart } = useSuspenseQuery({
+    queryKey: ['analytics-chart', range],
+    queryFn: async () =>
+      createFromReadableStream(await getAnalyticsChart({ data: { range } })),
+  })
+
+  return (
+    <DashboardShell>
+      <Filters />
+      <Tabs>
+        <Tab label="Overview">
+          {/* Server-rendered output, dropped into a client-owned tree */}
+          {chart}
+        </Tab>
+        <Tab label="Raw">
+          <ClientOnlyTable />
+        </Tab>
+      </Tabs>
+    </DashboardShell>
+  )
+}
+```
+
+The seam just moved a bit, and it's more transparent than what you're used to. And guess what, it's a totally valid and _awesome_ way to use the RSC protocol.
+
+## Both models can reach the extremes
+
+There is a fun symmetry here where both models can reach the _opposite_ extreme pretty easily.
+
+If you use a Server-owned model, just push `'use client'` high enough in the tree and the route effectively becomes an SPA. The server still owns the outer entry, but everything below the boundary is client-composed.
+
+If it's client-owned, render a server component as high as you can in the tree and the route suddenly behaves like a server-rendered page.
+
+Something interesting to point out though is that in \*both models, the client still receives and composes the result, even if that result is fully server-rendered\*\*.
+
+So the real distinction isn't which model can technically reach which outcome. Both can do it. It's more about which side the framework _naturally pulls you toward_, and how much friction you hit when you move the other direction.
+
+If you're shipping an eventual-SPA, the client is the final destination of the UI whether you like it or not, which is why I frequently make the case that the "client-owned" composition model with strong server composition primitives covers more ground and capability than the other. It keeps the control layer rooted where the user experience actually runs while still letting you do server-rendered regions, server-only computation, streaming, caching, and progressive enhancement wherever they make sense.
+
+## Why most frameworks only ship half
+
+The standard RSC model assumes server-owned trees, so the primitives are designed around that direction. `'use client'`, hydration boundaries, streaming, suspense fences, manifest-driven reference resolution all assume the server is composing and the client is receiving.
+
+That's fine for what those frameworks were built for and \*\*TanStack Start supports `'use client'` exactly the same.
+
+However, other frameworks don't really have a great answer when you ask:
+
+> How do I render this server fragment inside a client tree I'm already composing?
+
+or
+
+> How can I fetch and cache a server component from a useQuery/useEffect?
+
+The closest answer is usually "make the client thing a `'use client'` boundary inside a server tree" which works when the route is server-shaped, but when the route is _client-shaped_, you're inverting the entire architecture for little ROI.
+
+**Composite Components fill that gap.** A server function returns a rendered React fragment as Flight data. The client passes it to `<CompositeComponent>` and provides slots through `children` or render props. The server-rendered fragment can position those slots, but the client still owns the surrounding tree.
+
+```tsx
+// server
+const getPost = createServerFn().handler(async ({ data }) => {
+  const post = await db.posts.get(data.postId)
+  return {
+    src: await createCompositeComponent(
+      ({ children }: { children?: React.ReactNode }) => (
+        <article>
+          <h1>{post.title}</h1>
+          <p>{post.body}</p>
+          <footer>{children}</footer>
+        </article>
+      ),
+    ),
+  }
+})
+
+// client
+function PostPage({ postId }: { postId: string }) {
+  const { data } = useSuspenseQuery({
+    queryKey: ['post', postId],
+    queryFn: () => getPost({ data: { postId } }),
+  })
+
+  return (
+    <CompositeComponent src={data.src}>
+      <Comments postId={postId} />
+    </CompositeComponent>
+  )
+}
+```
+
+This is _additive_ and textbook **inversion of control**. Yes, start still supports `'use client'` when you want server-owned composition, but Composite Components enable the same idea from the opposite control plane.
+
+This isn't even foreign to React's original framing. The first Server Components RFC describes Client Components as the regular components you already know, and notes that Server Components can pass other Server Components _as children_ to Client Components. From the Client Component's perspective, that child is already rendered output. The same RFC also describes granular refetching from multiple entry points as part of the design direction even though the initial demo refetched the whole app.
+
+So ironically, this inverse model is _even closer_ to the original concepts by taking the protocol seriously and exposing a composition direction the protocol already makes possible.
+
+## A powerful primitive, not the whole pipeline
+
+"RSC support" is a phrase that feels overused and overstated to mean something like "correct" or "blessed", which is a weird thing to say about a primitive. I think more accurately, frameworks are using the RSC primitives in the way that has been **revealed and marketed to them thus far**, which is fine if that model covers your use cases. Ours needed more.
+
+RSC is more than serialization. It's React's attempt to bring data fetching, streaming, code splitting, server access, and client interactivity into one coherent model. Worthy goal, but it's still _one way_ to organize those concerns, and most of those concerns already have great answers elsewhere in the ecosystem.
+
+Routing solves waterfalls. Loaders kick off data work before render. Query libraries dedupe, cache, prefetch, stream, and invalidate. HTTP and CDNs cache responses. Server functions expose backend work without dragging the whole tree onto the server.
+
+So the question isn't whether RSC _can_ solve these problems. It can. The question is whether routing every concern through a rigid RSC architecture should be the **default answer for every app**.
+
+Start's answer is no. RSC is a powerful primitive in the pipeline, not the pipeline itself. Use it where rendered server UI is the right abstraction, and use the rest of the toolkit where those fit better. That's not rejecting RSC, it's rejecting RSC-as-silver-bullet for problems smaller, more composable tools already solve.
+
+That same instinct is why Start also doesn't ship a caching directive.
+
+## Why Start doesn't ship a caching directive
+
+People keep asking why we don't ship something like Next's `"use cache"`. Short answer: that directive assumes a framework- or platform-owned persistence layer, and Start can't honestly make that assumption.
+
+The directive marks something cacheable and the runtime handles the rest; keys, storage, invalidation, durability, cross-instance sharing, all the deployment-specific stuff. Which means the framework (or the platform under it) has to own the persistence contract. The directive doesn't _eliminate_ that question, it just hides it behind a one-liner at the call site.
+
+That works great when your framework is married to a specific platform. Start isn't. Cloudflare Workers, Netlify, Vercel, Node, Bun, Railway, any Nitro target; there's no single portable persistence layer across all of that, so there's no honest directive shape that means the same thing everywhere.
+
+Start takes the transparent route instead. A server function returns a Flight stream as bytes, and those bytes can be cached at any layer you already control.
+
+| Layer       | Cache option                                            |
+| ----------- | ------------------------------------------------------- |
+| Render pass | `React.cache` to dedupe calls within a render           |
+| Server      | Redis, KV, Postgres, in-memory LRU, or whatever you use |
+| Network     | HTTP caching and `Cache-Control` headers                |
+| Client      | Router cache, TanStack Query, or any client-side store  |
+
+`createFromReadableStream` decodes the bytes at render time, after the cache boundary. The cacheable primitive isn't a directive that hides persistence; it's transparent RSC output flowing through cache layers your app already understands.
+
+A directive is the right shape when the framework and platform can own the cache contract. Transparent bytes is the right shape when the framework needs to stay portable. We chose portable.
+
+## Closing
+
+The better question isn't "does this framework support RSC?" It's:
+
+> Which RSC composition models does it expose?
+
+TanStack Start exposes both, and you can mix them per route, per component, per use case. Same TanStack philosophy as always: you know what's best for your application, and the framework should get out of the way.
+
+---
+
+If you've been waiting for an RSC story that doesn't ask you to invert your whole architecture, this is it. RSC support in TanStack Start is [experimental and ready to play with](/start/latest/docs/framework/react/guide/server-components).
diff --git a/src/blog/why-tanstack-start-and-router.md b/src/blog/why-tanstack-start-and-router.md
index 602622441..4e0168379 100644
--- a/src/blog/why-tanstack-start-and-router.md
+++ b/src/blog/why-tanstack-start-and-router.md
@@ -1,6 +1,8 @@
 ---
 title: Why choose TanStack Start and Router?
 published: 2024-12-03
+excerpt: The frameworks we choose can make or break our developer experience. Here's why TanStack Start and Router offer a compelling alternative for building modern web applications.
+library: start, router
 authors:
   - Tanner Linsley
 ---
diff --git a/src/blog/why-tanstack-start-is-ditching-adapters.md b/src/blog/why-tanstack-start-is-ditching-adapters.md
index dcbad5963..0621a2fde 100644
--- a/src/blog/why-tanstack-start-is-ditching-adapters.md
+++ b/src/blog/why-tanstack-start-is-ditching-adapters.md
@@ -1,6 +1,8 @@
 ---
 title: Why TanStack Start is Ditching Adapters
 published: 2024-11-22
+excerpt: Every cloud environment has its own quirky incantations to get things working. We're dropping custom adapters in TanStack Start and building on Nitro instead — here's why.
+library: start
 authors:
   - Tanner Linsley
 ---
diff --git a/src/blog/your-mcp-your-way.md b/src/blog/your-mcp-your-way.md
new file mode 100644
index 000000000..826dd06e1
--- /dev/null
+++ b/src/blog/your-mcp-your-way.md
@@ -0,0 +1,613 @@
+---
+title: 'TanStack AI: Your MCP, your way'
+published: 2026-06-05
+excerpt: 'Host-side Model Context Protocol support lands in TanStack AI. Connect one MCP server or a whole pool, choose managed or manual lifecycle, and pick your type-safety level - from zero-config discovery to fully generated end-to-end types.'
+library: ai
+authors:
+  - Alem Tuzlak
+---
+
+![TanStack AI: Your MCP, your way](/blog-assets/your-mcp-your-way/header.png)
+
+Most "we support MCP now" announcements hand you exactly one way to use it. Connect to a server, get some tools, hope the lifecycle works out.
+
+`@tanstack/ai-mcp` takes the opposite stance. It is a **host-side [Model Context Protocol](https://modelcontextprotocol.io) client** that turns any MCP server into ordinary `ServerTool[]` you spread into `chat()`. Because the output is just tools, every layer above it stays the same: any adapter (OpenAI, Anthropic, Gemini, Ollama), any agent loop, any framework integration. TanStack AI never knows MCP was involved.
+
+That single design decision is what lets you use MCP **your way**: one server or fifty, fully managed or hand-wired, untyped-and-fast or generated-and-strict. This post walks the entire surface, every flag and every config, with the exact types from the package.
+
+Built on the official `@modelcontextprotocol/sdk`, the runtime stays edge-deployable. The Streamable HTTP transport is `node:`-free, the Node-only stdio transport is isolated behind a subpath, and the codegen CLI's heavy dependencies are bundled into the bin only, never into the library you ship.
+
+## The mental model
+
+There is exactly one idea to internalize:
+
+> An MCP client is a tool factory. You get back `ServerTool[]`. You spread them into `chat({ tools })`.
+
+```ts
+import { chat } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai/adapters'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const mcp = await createMCPClient({
+  transport: { type: 'http', url: process.env.MCP_URL! },
+})
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  tools: await mcp.tools(),
+})
+
+await mcp.close()
+```
+
+Everything else in this post is a variation on that line: how you build the client, how you type the tools, how many servers you fan in, and who owns `close()`.
+
+```mermaid
+flowchart LR
+  S1[MCP server] -->|callTool| C1[createMCPClient]
+  S2[MCP server] --> P[createMCPClients pool]
+  S3[MCP server] --> P
+  C1 -->|ServerTool array| CHAT["chat({ tools }) or chat({ mcp })"]
+  P -->|prefixed ServerTool array| CHAT
+  CLI[npx @tanstack/ai-mcp generate] -.->|compile-time types| C1
+  CLI -.->|compile-time types| P
+  CHAT --> ADP[any adapter: OpenAI / Anthropic / Gemini / Ollama]
+```
+
+> MCP tool execution is **server-side only**. `createMCPClient` lives in a server route or serverless function, never in browser code.
+
+## Standalone clients: `createMCPClient`
+
+A single client connects to a single server. The options are small and every field is load-bearing.
+
+```ts
+interface MCPClientOptions {
+  transport: TransportInput // config object or a raw SDK Transport
+  prefix?: string // tool-name prefix, e.g. 'github' -> 'github_search'
+  name?: string // client identity sent to the server (default 'tanstack-ai-mcp')
+  version?: string // client version (default '0.0.1')
+}
+```
+
+- **`transport`** is the only required field. It is either one of the built-in config objects below or a ready-made SDK `Transport` instance.
+- **`prefix`** rewrites every discovered tool name to `${prefix}_${name}`. Use it when one server's tool names might collide with another's. (Pools set this for you - see below.)
+- **`name`** and **`version`** are the client identity reported to the server during the MCP handshake.
+
+The returned `MCPClient` exposes the full protocol surface:
+
+```ts
+interface MCPClient {
+  readonly capabilities: Record<string, unknown> // server capabilities from the handshake
+  tools(options?): Promise<ServerTool[]> // discovery (overloaded, see below)
+  resources(): Promise<Resource[]>
+  readResource(uri: string): Promise<ReadResourceResult>
+  resourceTemplates(): Promise<ResourceTemplate[]>
+  prompts(): Promise<Prompt[]>
+  getPrompt(name, args?): Promise<GetPromptResult>
+  close(): Promise<void>
+  [Symbol.asyncDispose](): Promise<void> // for `await using`
+}
+```
+
+### Transports
+
+Four ways to connect, one consistent shape.
+
+**HTTP (Streamable HTTP)** is the preferred transport for remote servers and the only one that is fully edge-safe.
+
+```ts
+const mcp = await createMCPClient({
+  transport: {
+    type: 'http',
+    url: 'https://my-mcp-server.example.com/mcp',
+    headers: { Authorization: `Bearer ${process.env.MCP_TOKEN}` },
+    fetch: customFetch, // optional: bring your own fetch
+    authProvider: myOAuth, // optional: OAuth 2.1 (see Authentication)
+  },
+})
+```
+
+**SSE** is for servers that still implement the legacy Server-Sent Events transport. Same fields as HTTP (`url`, `headers?`, `fetch?`, `authProvider?`).
+
+```ts
+const mcp = await createMCPClient({
+  transport: { type: 'sse', url: 'https://example.com/sse' },
+})
+```
+
+**stdio** spawns a local MCP process. Because it imports Node-native modules, it is isolated behind the `@tanstack/ai-mcp/stdio` subpath so your edge bundles stay clean.
+
+```ts
+import { stdioTransport } from '@tanstack/ai-mcp/stdio'
+import { createMCPClient } from '@tanstack/ai-mcp'
+
+const mcp = await createMCPClient({
+  transport: stdioTransport({
+    command: 'node',
+    args: ['./my-mcp-server.js'],
+    env: { API_KEY: process.env.API_KEY ?? '' },
+    cwd: process.cwd(), // optional
+  }),
+})
+```
+
+Passing a `{ type: 'stdio' }` config object to `createMCPClient` directly throws on purpose, with a message pointing you at the subpath. That keeps the Node-only code path out of edge builds unless you opt in.
+
+**Custom transport** is the escape hatch: pass any SDK `Transport` instance straight through. `InMemoryTransport` is re-exported for in-process testing.
+
+```ts
+import { createMCPClient, InMemoryTransport } from '@tanstack/ai-mcp'
+
+const [clientTransport] = InMemoryTransport.createLinkedPair()
+const mcp = await createMCPClient({ transport: clientTransport })
+```
+
+This escape hatch is also how you handle interactive OAuth redirect flows: build a `StreamableHTTPClientTransport` yourself, keep a reference so you can call `transport.finishAuth(code)` in your callback route, then hand it to `createMCPClient({ transport })`.
+
+### Authentication
+
+Two paths, both passed on the `http`/`sse` transport config.
+
+- **Static tokens**: set `headers` and they are sent with every request.
+- **OAuth 2.1**: set `authProvider` to any `OAuthClientProvider` from `@modelcontextprotocol/sdk/client/auth.js`. The SDK transport then attaches tokens, refreshes them, and retries on 401 with no extra wiring on the TanStack side.
+
+```ts
+import type { OAuthClientProvider } from '@modelcontextprotocol/sdk/client/auth.js'
+
+declare const myOAuthProvider: OAuthClientProvider
+
+const mcp = await createMCPClient({
+  transport: {
+    type: 'http',
+    url: 'https://my-mcp-server.example.com/mcp',
+    authProvider: myOAuthProvider,
+  },
+})
+```
+
+## Three modes of type safety
+
+This is where "your way" gets literal. The same client supports three levels of typing, and you pick per call site.
+
+### Mode 1 - Auto-discovery: `client.tools()`
+
+Call `tools()` with no arguments to get every tool the server exposes. No setup. Tool arguments are `unknown` at compile time and validated at runtime against the server's JSON Schema.
+
+```ts
+const tools = await mcp.tools()
+// tools: ServerTool[] - names known, args typed `unknown`
+```
+
+Two behaviors worth knowing:
+
+- **Task-based tools are skipped.** A tool that declares `execution.taskSupport: 'required'` can only run through the SDK's experimental task flow, which plain `callTool` cannot satisfy (the server rejects it with `-32600`). Discovery filters these out so the model is never offered a tool that cannot succeed.
+- **Structured output is preserved.** When a tool declares an `outputSchema`, the client returns the server's `structuredContent` so your existing output validation runs against the typed payload instead of a JSON-in-text blob.
+
+### Mode 2 - Explicit definitions: `client.tools([...defs])`
+
+Pass TanStack `toolDefinition()` instances to get full TypeScript types and Zod validation. This is an **allowlist**: only the named tools come back.
+
+```ts
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+
+const searchDef = toolDefinition({
+  name: 'search',
+  description: 'Search for items',
+  inputSchema: z.object({ query: z.string() }),
+  outputSchema: z.array(z.object({ id: z.string(), title: z.string() })),
+})
+
+const tools = await mcp.tools([searchDef])
+// tools[0].execute is typed: (args: { query: string }) => ...
+```
+
+Two errors guard this path:
+
+- `MCPToolNotFoundError` if a definition's name is not on the server.
+- `MCPTaskRequiredToolError` if you explicitly bind a task-required tool (which discovery would have silently skipped).
+
+This mode reuses the existing `toolDefinition()` primitive. There is no parallel schema system to learn, and the per-tuple return type is preserved so each tool keeps its own input/output types.
+
+### Mode 3 - Generated types: `createMCPClient<GeneratedServer>`
+
+Run the codegen CLI against a live server to emit per-server `interface` types, then pass the type as a generic. Tool names narrow to the server's literal names, so a typo becomes a compile error, with zero runtime cost.
+
+```ts
+import type { GithubServer } from './mcp-types.generated'
+
+const mcp = await createMCPClient<GithubServer>({
+  transport: { type: 'http', url: process.env.GITHUB_MCP_URL! },
+})
+
+const tools = await mcp.tools()
+// each tool name is narrowed from GithubServer['tools']
+```
+
+Mode 3 types the tool _names_; tool _arguments_ stay untyped on the discovery path. Combine it with Mode 2 when you want both narrowed names and typed args. The full CLI workflow is in its own section below.
+
+## Resources and prompts
+
+MCP servers expose more than tools. The client surfaces resources and prompts directly, plus two converters that turn them into shapes `chat()` understands.
+
+```ts
+const resources = await mcp.resources()
+const file = await mcp.readResource('file:///readme.md')
+const templates = await mcp.resourceTemplates()
+
+const prompts = await mcp.prompts()
+const review = await mcp.getPrompt('code-review', { language: 'ts' })
+```
+
+To seed a conversation with that content, use the converters:
+
+```ts
+import { mcpResourceToContentPart, mcpPromptToMessages } from '@tanstack/ai-mcp'
+
+// fetch a resource and a prompt from the server
+const file = await mcp.readResource('file:///readme.md')
+const review = await mcp.getPrompt('code-review', { language: 'ts' })
+
+// resource content block -> ContentPart (text, with a sensible fallback for blobs)
+const readmePart = mcpResourceToContentPart(file.contents[0])
+
+// MCP prompt -> ModelMessage[] you can prepend to chat({ messages })
+const seeded = mcpPromptToMessages(review)
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages: [{ role: 'user', content: [readmePart] }, ...seeded, ...messages],
+  tools: await mcp.tools(),
+})
+```
+
+`mcpResourceToContentPart` maps a `text` field to a text part, a `blob` field to a `[binary resource <uri>]` placeholder, and anything else to stringified JSON. `mcpPromptToMessages` normalizes each message to a `user`/`assistant` role with text content.
+
+## Lifecycle and cancellation
+
+A standalone client is **caller-owned**. `chat()` never closes a client you spread manually, which is what makes warm reuse across requests possible.
+
+```ts
+// caller owns close()
+const mcp = await createMCPClient({ transport })
+try {
+  const stream = chat({
+    adapter: openaiText('gpt-5.5'),
+    messages,
+    tools: await mcp.tools(),
+  })
+  return toServerSentEventsResponse(stream)
+} finally {
+  // careful: see the streaming note below
+}
+```
+
+Tools execute **lazily while the response stream is consumed**, so the client must stay open until the stream is fully drained. In a route handler that returns a streaming `Response`, a `try/finally` around the `return` closes the client before the body streams and in-flight tool calls fail. Close in a middleware terminal hook (`onFinish`/`onAbort`/`onError`, exactly one fires per run) instead, or let the managed `mcp` option handle it.
+
+For scoped usage, the client implements `Symbol.asyncDispose`:
+
+```ts
+await using mcp = await createMCPClient({ transport })
+// closed automatically at end of scope
+```
+
+### Cancellation threads through tool execution
+
+The core `@tanstack/ai` package gained an optional `abortSignal` on `ToolExecutionContext`, and `chat()` threads the run's signal (the caller's `AbortController` combined with any middleware `abort()`) into every tool execution.
+
+`@tanstack/ai-mcp` forwards that signal straight into the SDK's `callTool`:
+
+```ts
+// inside the generated execute body
+ctx?.abortSignal?.throwIfAborted()
+const result = await client.callTool(
+  { name, arguments: args ?? {} },
+  undefined,
+  { signal: ctx?.abortSignal },
+)
+```
+
+The practical effect: when a chat run is aborted, a long-running MCP `callTool` is cancelled with it instead of running to completion in the background. The change is additive and backward-compatible.
+
+## Pools: `createMCPClients`
+
+One server is the simple case. Real agents pull tools from several. `createMCPClients` connects to many servers in parallel and merges their tools into one flat array.
+
+```ts
+import { createMCPClients } from '@tanstack/ai-mcp'
+
+const pool = await createMCPClients({
+  github: { transport: { type: 'http', url: process.env.GITHUB_MCP_URL! } },
+  linear: { transport: { type: 'http', url: process.env.LINEAR_MCP_URL! } },
+})
+
+// tools: [github_search_repos, github_create_issue, linear_create_issue, ...]
+const tools = await pool.tools()
+```
+
+The config is a `Record<string, MCPClientOptions>` - the same options as a single client, keyed by a name you choose. The pool gives you:
+
+- **Parallel connect with safe cleanup.** All servers connect via `Promise.allSettled`. If any one fails, the already-connected clients are closed before a single `MCPConnectionError` is thrown. No dangling connections.
+- **Auto-prefixing.** Each server's tools are prefixed with its config key by default, so `github` tools become `github_*`. This is collision-free out of the box.
+- **Per-server access.** `pool.clients.github` is a full `MCPClient`, so you can reach one server's resources, prompts, or typed-definition tools.
+- **A merged `tools()`.** It collects every server's tools, settles failures so a broken server is reported by its config key rather than an unattributed SDK error, and throws `DuplicateToolNameError` if two names still collide after prefixing.
+- **`close()` and `await using`.**
+
+```ts
+const linearTools = await pool.clients.linear.tools()
+const repoReadme = await pool.clients.github.readResource('repo://readme')
+```
+
+### Controlling the prefix
+
+The default prefix is the config key. Override it with a string, or disable it entirely with an empty string.
+
+```ts
+const pool = await createMCPClients({
+  github: {
+    transport: { type: 'http', url: process.env.GITHUB_MCP_URL! },
+    prefix: 'gh', // -> gh_search_repos
+  },
+  internal: {
+    transport: { type: 'http', url: process.env.INTERNAL_MCP_URL! },
+    prefix: '', // no prefix at all
+  },
+})
+
+await pool.close()
+// or: await using pool = await createMCPClients({ ... })
+```
+
+A pool satisfies the same structural contract as a single client (`tools()` plus `close()`), so anywhere a client works, a pool works too - including the managed `mcp` option next.
+
+## Managed MCP with `chat({ mcp })`
+
+Spreading tools manually gives you full control. Most of the time you do not want that control, you want the tools discovered and the connections closed for you. That is the `mcp` option, and it is the shortest path to a working integration.
+
+```ts
+const mcp = await createMCPClient({
+  transport: { type: 'http', url: process.env.MCP_URL! },
+})
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  mcp: { clients: [mcp] }, // chat() discovers the tools AND closes the client
+})
+
+return toServerSentEventsResponse(stream)
+```
+
+Here is every field on the option, with exact semantics.
+
+```ts
+interface ChatMCPOptions {
+  clients: Array<MCPToolSource> // clients and/or pools
+  connection?: 'close' | 'keep-alive' // default 'close'
+  lazyTools?: boolean // default false
+  onDiscoveryError?: (
+    error: unknown,
+    source: MCPToolSource,
+  ) => void | Promise<void>
+}
+```
+
+### `clients`
+
+An array of anything that satisfies `MCPToolSource`, which is the structural shape `{ tools(options?), close() }`. Both `MCPClient` and `MCPClients` (a pool) match by shape, so you can mix single clients and pools in one array. The core `@tanstack/ai` package does not import `@tanstack/ai-mcp` - the dependency only points one way.
+
+Discovered tools are appended to any tools you already passed via `tools`, so `mcp` and a hand-written `tools` array compose cleanly.
+
+### `connection`
+
+Controls what happens to the connections when the run ends.
+
+- **`'close'` (default)**: `chat()` closes each source after the agent loop completes and the stream is drained. Tools still execute throughout the run; the close happens last. This is the zero-lifecycle-code path.
+- **`'keep-alive'`**: `chat()` never closes the connections. You own them, which is exactly what you want for clients you keep warm across requests.
+
+```ts
+// warm pool reused across many requests
+const pool = await createMCPClients({
+  github: { transport: gh },
+  linear: { transport: ln },
+})
+
+function handler(messages) {
+  return chat({
+    adapter: openaiText('gpt-5.5'),
+    messages,
+    mcp: { clients: [pool], connection: 'keep-alive' }, // pool outlives the run
+  })
+}
+```
+
+### `lazyTools`
+
+When `true`, `chat()` calls each source's `tools({ lazy: true })`, which marks the tools `lazy` so their schemas are deferred. Useful when a server exposes a large catalog and you do not want to pay the full schema cost up front. Defaults to `false`.
+
+### `onDiscoveryError`
+
+Called when discovery fails for a single source, with the error and the source that produced it.
+
+- **Throw or rethrow** from the handler to fail the entire chat call fast.
+- **Return normally** to skip that source and continue with the rest.
+- **Omit the handler** to rethrow by default (fail-fast).
+
+Async handlers are awaited, so a rejected promise also fails fast.
+
+```ts
+mcp: {
+  clients: [primary, flaky],
+  onDiscoveryError(error, source) {
+    metrics.increment('mcp.discovery_error')
+    // returning (not throwing) => skip this source, keep the others
+  },
+}
+```
+
+### What discovery actually does
+
+When `chat({ mcp })` runs, an internal `MCPManager` is built from the option (and is an inert no-op when `mcp` is undefined, so there is no branching cost otherwise). On each run it:
+
+1. Calls `tools({ lazy })` on every source in parallel.
+2. Routes per-source failures through `onDiscoveryError` (or rethrows).
+3. Merges all tools and throws `MCPDuplicateToolNameError` if two names collide. The error message tells you to set a `prefix` or use a pool.
+4. Runs the chat, then in a `finally` calls `dispose()`, which closes sources only when the policy is `'close'`.
+
+If discovery itself throws, the manager disposes any connected sources first (when the policy is `'close'`) so a failed run does not leak connections.
+
+## The codegen CLI and how it plays with everything
+
+Modes 1 and 2 need no build step. Mode 3 does, and the CLI is how you get there. It introspects live servers and emits compile-time-only types that slot into both standalone clients and pools.
+
+### 1. Declare servers in `mcp.config.ts`
+
+```ts
+import { defineConfig } from '@tanstack/ai-mcp'
+
+export default defineConfig({
+  servers: {
+    github: {
+      transport: { type: 'http', url: 'https://github-mcp.example.com/mcp' },
+    },
+    linear: {
+      transport: { type: 'http', url: 'https://linear-mcp.example.com/mcp' },
+      prefix: 'linear', // must match the runtime createMCPClient({ prefix })
+    },
+  },
+  outFile: './mcp-types.generated.ts',
+})
+```
+
+`defineConfig` is purely for editor autocomplete and type checking of the config itself. Each `CodegenServerConfig` carries a `transport` and an optional `prefix`. That `prefix` must match whatever you pass at runtime, because it changes the tool names the types describe.
+
+### 2. Generate
+
+```bash
+npx @tanstack/ai-mcp generate
+```
+
+The CLI connects to each declared server, introspects its tools, resources, and prompts, and writes the result to `outFile`. Its heavier dependencies are bundled into the bin only, so they never reach the library you deploy.
+
+### 3. The output
+
+One interface per server (extending `ServerDescriptor`) plus a combined pool map:
+
+```ts
+// AUTO-GENERATED by `npx @tanstack/ai-mcp generate`. Do not edit.
+import type { ServerDescriptor } from '@tanstack/ai-mcp'
+
+export interface GithubServer extends ServerDescriptor {
+  tools: {
+    search_repositories: {
+      input: { query: string; limit?: number }
+      output: unknown
+    }
+    create_issue: {
+      input: { repo: string; title: string; body?: string }
+      output: unknown
+    }
+  }
+  resources: {}
+  prompts: {}
+  capabilities: { tools: {} } & Record<string, unknown>
+}
+
+export interface MCPServers extends Record<string, ServerDescriptor> {
+  github: GithubServer
+  linear: LinearServer
+}
+```
+
+### 4. Wire the types in
+
+For a single client, pass the per-server interface:
+
+```ts
+import type { GithubServer } from './mcp-types.generated'
+
+const mcp = await createMCPClient<GithubServer>({
+  transport: { type: 'http', url: process.env.GITHUB_MCP_URL! },
+})
+```
+
+For a pool, pass the combined `MCPServers` map. This is the part that makes codegen and pools click together: the generated map **constrains the pool config keys**, so a missing or misspelled server key is a compile error, and each `pool.clients[key]` is typed to that server's descriptor.
+
+```ts
+import type { MCPServers } from './mcp-types.generated'
+
+const pool = await createMCPClients<MCPServers>({
+  github: { transport: { type: 'http', url: process.env.GITHUB_MCP_URL! } },
+  linear: {
+    transport: { type: 'http', url: process.env.LINEAR_MCP_URL! },
+    prefix: 'linear', // matches the config; keeps generated names accurate
+  },
+})
+
+const tools = await pool.tools() // typed, then hand to chat({ mcp })
+```
+
+The types are a compile-time overlay. At runtime the pool builds the same descriptor-agnostic clients it always would, which is why the generated map costs nothing in your bundle and nothing at execution time.
+
+## Putting it together
+
+The three concepts compose into one summary: a single server, a pool, and generated types all feed the same `chat()`.
+
+```ts
+import { chat, toServerSentEventsResponse } from '@tanstack/ai'
+import { openaiText } from '@tanstack/ai-openai/adapters'
+import { createMCPClient, createMCPClients } from '@tanstack/ai-mcp'
+import type { MCPServers } from './mcp-types.generated'
+
+// one server, managed lifecycle
+const single = await createMCPClient({
+  transport: { type: 'http', url: oneUrl },
+})
+
+// many servers, typed pool, kept warm
+const pool = await createMCPClients<MCPServers>({
+  github: { transport: { type: 'http', url: process.env.GITHUB_MCP_URL! } },
+  linear: {
+    transport: { type: 'http', url: process.env.LINEAR_MCP_URL! },
+    prefix: 'linear',
+  },
+})
+
+const stream = chat({
+  adapter: openaiText('gpt-5.5'),
+  messages,
+  mcp: {
+    clients: [single, pool],
+    connection: 'keep-alive', // you own `pool`; close it on shutdown
+    lazyTools: true,
+    onDiscoveryError: (err, source) => log.warn('mcp discovery failed', err),
+  },
+})
+
+return toServerSentEventsResponse(stream)
+```
+
+One server or many. Managed or manual. Untyped or generated. Warm or closed. Same `chat()`, every time.
+
+## Why the architecture matters
+
+A few decisions are worth calling out because they affect where you can deploy:
+
+- **Edge-safe by default.** Streamable HTTP has no `node:` imports, so the common path runs on edge runtimes. The Node-only stdio transport is quarantined behind `@tanstack/ai-mcp/stdio` and only loads if you import it.
+- **No new tool primitive.** Typed tools reuse `toolDefinition()`. The package adds a client, a pool, converters, and a CLI - not a parallel schema system.
+- **Additive core change.** The only change to `@tanstack/ai` is an optional `abortSignal` on `ToolExecutionContext`, threaded through tool execution. Existing code keeps working; long-running tools gain cancellation.
+
+## Get started
+
+Install the package:
+
+```bash
+pnpm add @tanstack/ai-mcp
+```
+
+That is all you need - `@modelcontextprotocol/sdk` ships as a dependency, so it comes along automatically. Add it to your own `package.json` only if you import from it directly (for example the `OAuthClientProvider` type or a hand-built `StreamableHTTPClientTransport` in the escape-hatch path).
+
+Then connect a server, hand it to `chat()`, and ship. Read the full guides at [tanstack.com/ai](https://tanstack.com/ai): start with the MCP overview, then the managed `chat()` integration, the manual typed-tools path, and the codegen workflow.
+
+Whatever shape your MCP setup takes - one server or a fleet, fully managed or hand-wired, loosely typed or generated end-to-end - `@tanstack/ai-mcp` meets you there. It is your MCP, your way.
diff --git a/src/builder/api/compile.ts b/src/builder/api/compile.ts
new file mode 100644
index 000000000..619918b56
--- /dev/null
+++ b/src/builder/api/compile.ts
@@ -0,0 +1,690 @@
+import {
+  create,
+  createMemoryEnvironment,
+  type AddOn,
+  type Framework,
+  type Starter,
+} from './create-worker'
+
+type AddOnType = 'add-on' | 'example' | 'starter' | 'toolchain' | 'deployment'
+type AddOnPhase = 'setup' | 'add-on' | 'example'
+
+export interface AddOnCompiled {
+  id: string
+  name: string
+  description: string
+  type: AddOnType
+  phase: AddOnPhase
+  modes: Array<string>
+  files: Record<string, string>
+  deletedFiles: Array<string>
+  dependsOn?: Array<string>
+  options?: Record<string, unknown>
+  link?: string
+  tailwind: boolean
+  requiresTailwind?: boolean
+  warning?: string
+  priority?: number
+  author?: string
+  version?: string
+  license?: string
+  category?: string
+  packageAdditions?: {
+    dependencies?: Record<string, string>
+    devDependencies?: Record<string, string>
+    scripts?: Record<string, string>
+  }
+}
+
+export interface StarterCompiled {
+  id: string
+  name: string
+  description: string
+  type: AddOnType
+  phase: AddOnPhase
+  modes: Array<string>
+  files: Record<string, string>
+  deletedFiles: Array<string>
+  framework: string
+  mode: string
+  typescript: boolean
+  tailwind: boolean
+  banner?: string
+  dependsOn?: Array<string>
+}
+import { getFramework, DEFAULT_MODE, DEFAULT_REQUIRED_ADDONS, type FrameworkId } from './config'
+
+export interface ProjectDefinition {
+  name: string
+  framework?: FrameworkId
+  packageManager?: 'bun' | 'npm' | 'pnpm' | 'yarn'
+  tailwind?: boolean
+  features: Array<string>
+  featureOptions?: Record<string, Record<string, unknown>>
+  selectedExample?: string
+  customIntegrations?: Array<AddOnCompiled>
+  customTemplate?: StarterCompiled | null
+}
+
+export interface CompileRequest {
+  definition: ProjectDefinition
+  format?: 'full' | 'summary'
+}
+
+export interface CompileResponse {
+  files: Record<string, string>
+  packages: {
+    dependencies: Record<string, string>
+    devDependencies: Record<string, string>
+    scripts: Record<string, string>
+  }
+  envVars: Array<{
+    name: string
+    description: string
+    required?: boolean
+    example?: string
+  }>
+  commands: Array<{
+    command: string
+    args?: Array<string>
+  }>
+  warnings: Array<string>
+}
+
+export interface CompileHandlerOptions {
+  format?: 'full' | 'summary'
+}
+
+async function resolveAddOns(
+  featureIds: Array<string>,
+  customAddOns: Array<AddOnCompiled>,
+  frameworkId: FrameworkId = 'react',
+): Promise<Array<AddOn>> {
+  const framework = await getFramework(frameworkId)
+  const allFrameworkAddOns = framework.getAddOns()
+
+  const customIds = new Set(customAddOns.map((a: AddOnCompiled) => a.id))
+
+  const frameworkFeatureIds = featureIds.filter((id) => !customIds.has(id))
+
+  const resolvedFramework = await create.finalizeAddOns(
+    framework,
+    DEFAULT_MODE,
+    [...DEFAULT_REQUIRED_ADDONS, ...frameworkFeatureIds],
+  )
+
+  const customAsAddOns = customAddOns.map((compiled: AddOnCompiled) => ({
+    ...compiled,
+    getFiles: () => Promise.resolve(Object.keys(compiled.files)),
+    getFileContents: (path: string) => Promise.resolve(compiled.files[path] ?? ''),
+    getDeletedFiles: () => Promise.resolve(compiled.deletedFiles || []),
+  })) as unknown as Array<AddOn>
+
+  for (const custom of customAsAddOns) {
+    if (custom.dependsOn) {
+      for (const depId of custom.dependsOn) {
+        if (!resolvedFramework.some((a: AddOn) => a.id === depId)) {
+          const depAddOn = allFrameworkAddOns.find((a: AddOn) => a.id === depId)
+          if (depAddOn && !resolvedFramework.some((a: AddOn) => a.id === depId)) {
+            resolvedFramework.push(depAddOn)
+          }
+        }
+      }
+    }
+  }
+
+  return [...resolvedFramework, ...customAsAddOns]
+}
+
+function extractEnvVars(
+  addOns: Array<AddOn>,
+): Array<{ name: string; description: string; required?: boolean; example?: string }> {
+  const envVars: Array<{ name: string; description: string; required?: boolean; example?: string }> = []
+  const seen = new Set<string>()
+
+  for (const addOn of addOns) {
+    const files = addOn.files || {}
+    for (const [path, content] of Object.entries(files) as Array<[string, string]>) {
+      if (path.endsWith('.env') || path.endsWith('.env.example') || path.endsWith('.env.local.example')) {
+        const lines = content.split('\n')
+        for (const line of lines) {
+          const match = line.match(/^([A-Z_][A-Z0-9_]*)=(.*)$/)
+          if (match && !seen.has(match[1])) {
+            seen.add(match[1])
+            envVars.push({
+              name: match[1],
+              description: `Environment variable from ${addOn.name}`,
+              example: match[2] || undefined,
+            })
+          }
+        }
+      }
+    }
+  }
+
+  return envVars
+}
+
+function extractWarnings(addOns: Array<AddOn>): Array<string> {
+  return addOns
+    .filter((a) => a.warning)
+    .map((a) => `${a.name}: ${a.warning}`)
+}
+
+function _convertToStarter(template: StarterCompiled): Starter {
+  return {
+    ...template,
+    getFiles: () => Promise.resolve(Object.keys(template.files)),
+    getFileContents: (path: string) => Promise.resolve(template.files[path] ?? ''),
+    getDeletedFiles: () => Promise.resolve(template.deletedFiles || []),
+  } as unknown as Starter
+}
+
+function mergeOptionsWithDefaults(
+  chosenAddOns: Array<AddOn>,
+  userOptions: Record<string, Record<string, unknown>>,
+): Record<string, Record<string, unknown>> {
+  const defaults = create.populateAddOnOptionsDefaults(chosenAddOns)
+  const merged: Record<string, Record<string, unknown>> = { ...defaults }
+
+  for (const [addonId, options] of Object.entries(userOptions)) {
+    merged[addonId] = { ...merged[addonId], ...options }
+  }
+
+  return merged
+}
+
+export async function compileHandler(
+  definition: ProjectDefinition,
+  options: CompileHandlerOptions = {},
+): Promise<CompileResponse> {
+  const frameworkId = definition.framework ?? 'react'
+  const framework = await getFramework(frameworkId)
+  const featureOptions = definition.featureOptions ?? {}
+
+  // Merge selectedExample into features (CTA treats examples as add-ons)
+  const allFeatures = definition.selectedExample
+    ? [...definition.features, definition.selectedExample]
+    : definition.features
+
+  // Custom integrations disabled until stable launch
+  const chosenAddOns = await resolveAddOns(allFeatures, [], frameworkId)
+
+  const { environment, output } = createMemoryEnvironment(
+    `/project/${definition.name}`,
+  )
+
+  // Custom starters disabled until stable launch
+  await create.createApp(environment, {
+    projectName: definition.name,
+    targetDir: `/project/${definition.name}`,
+    framework,
+    mode: DEFAULT_MODE,
+    typescript: true,
+    tailwind: definition.tailwind ?? true,
+    packageManager: definition.packageManager ?? 'pnpm',
+    git: false,
+    install: false,
+    intent: false,
+    chosenAddOns,
+    addOnOptions: mergeOptionsWithDefaults(chosenAddOns, featureOptions),
+  })
+
+  const packageJson = output.files['package.json']
+    ? JSON.parse(output.files['package.json'])
+    : { dependencies: {}, devDependencies: {}, scripts: {} }
+
+  return {
+    files: options.format === 'summary' ? {} : output.files,
+    packages: {
+      dependencies: packageJson.dependencies || {},
+      devDependencies: packageJson.devDependencies || {},
+      scripts: packageJson.scripts || {},
+    },
+    envVars: extractEnvVars(chosenAddOns),
+    commands: output.commands,
+    warnings: extractWarnings(chosenAddOns),
+  }
+}
+
+type AttributionSource = {
+  sourceId: string
+  sourceName: string
+}
+
+type FileProvenance = {
+  source: 'framework' | 'add-on' | 'starter'
+  sourceId: string
+  sourceName: string
+}
+
+type CtaLineAttribution = {
+  line: number
+  sourceId: string
+  sourceName: string
+  type: 'original' | 'injected'
+}
+
+type CtaAttributedFile = {
+  content: string
+  provenance: FileProvenance
+  lineAttributions: Array<CtaLineAttribution>
+}
+
+type DependencyAttribution = {
+  name: string
+  version: string
+  type: 'dependency' | 'devDependency'
+  sourceId: string
+  sourceName: string
+}
+
+type AttributionOutput = {
+  attributedFiles: Record<string, CtaAttributedFile>
+  dependencies: Array<DependencyAttribution>
+}
+
+type IntegrationWithSource = NonNullable<AddOn['integrations']>[number] & {
+  _sourceId: string
+  _sourceName: string
+}
+
+type InjectionPattern = {
+  matches: (line: string) => boolean
+  appliesTo: (path: string) => boolean
+  source: AttributionSource
+}
+
+function normalizeAttributionPath(path: string) {
+  let nextPath = path.startsWith('./') ? path.slice(2) : path
+  nextPath = nextPath.replace(/\.ejs$/, '').replace(/_dot_/g, '.')
+
+  const match = nextPath.match(/^(.+\/)?__([^_]+)__(.+)$/)
+  return match ? (match[1] || '') + match[3] : nextPath
+}
+
+async function getFileProvenance(
+  filePath: string,
+  framework: Framework,
+  addOns: Array<AddOn>,
+  starter: Starter | undefined,
+): Promise<FileProvenance | null> {
+  const target = filePath.startsWith('./') ? filePath.slice(2) : filePath
+
+  if (starter) {
+    const files = await starter.getFiles()
+    if (files.some((file) => normalizeAttributionPath(file) === target)) {
+      return {
+        source: 'starter',
+        sourceId: starter.id,
+        sourceName: starter.name,
+      }
+    }
+  }
+
+  const typeOrder: Array<AddOnType> = [
+    'add-on',
+    'example',
+    'toolchain',
+    'deployment',
+  ]
+  const phaseOrder: Array<AddOnPhase> = ['setup', 'add-on', 'example']
+  const ordered = typeOrder.flatMap((type) =>
+    phaseOrder.flatMap((phase) =>
+      addOns.filter((addOn) => addOn.phase === phase && addOn.type === type),
+    ),
+  )
+
+  for (let index = ordered.length - 1; index >= 0; index--) {
+    const addOn = ordered[index]
+    if (!addOn) continue
+
+    const files = await addOn.getFiles()
+    if (files.some((file) => normalizeAttributionPath(file) === target)) {
+      return {
+        source: 'add-on',
+        sourceId: addOn.id,
+        sourceName: addOn.name,
+      }
+    }
+  }
+
+  const frameworkFiles = await framework.getFiles()
+  if (
+    frameworkFiles.some((file) => normalizeAttributionPath(file) === target)
+  ) {
+    return {
+      source: 'framework',
+      sourceId: framework.id,
+      sourceName: framework.name,
+    }
+  }
+
+  return null
+}
+
+function integrationInjections(
+  integration: IntegrationWithSource,
+): Array<InjectionPattern> {
+  const source = {
+    sourceId: integration._sourceId,
+    sourceName: integration._sourceName,
+  }
+  const injections: Array<InjectionPattern> = []
+  const appliesTo = (path: string) => {
+    if (integration.type === 'vite-plugin') return path.includes('vite.config')
+    if (
+      integration.type === 'provider' ||
+      integration.type === 'root-provider' ||
+      integration.type === 'devtools'
+    ) {
+      return path.includes('__root') || path.includes('root.tsx')
+    }
+    return false
+  }
+
+  if (integration.import) {
+    const prefix = integration.import.split(' from ')[0]
+    injections.push({
+      matches: (line) => line.includes(prefix),
+      appliesTo,
+      source,
+    })
+  }
+
+  const code = integration.code || integration.jsName
+  if (code) {
+    injections.push({
+      matches: (line) => line.includes(code),
+      appliesTo,
+      source,
+    })
+  }
+
+  return injections
+}
+
+function dependencyInjection(dep: DependencyAttribution): InjectionPattern {
+  return {
+    matches: (line) => line.includes(`"${dep.name}"`),
+    appliesTo: (path) => path.endsWith('package.json'),
+    source: { sourceId: dep.sourceId, sourceName: dep.sourceName },
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function readStringRecord(value: unknown): Record<string, string> | undefined {
+  if (!isRecord(value)) return undefined
+
+  const result: Record<string, string> = {}
+  for (const [key, entryValue] of Object.entries(value)) {
+    if (typeof entryValue !== 'string') {
+      return undefined
+    }
+    result[key] = entryValue
+  }
+
+  return result
+}
+
+function collectPackageTemplateDependencies(
+  packageTemplate: string,
+  source: AttributionSource,
+): Array<DependencyAttribution> {
+  try {
+    const value: unknown = JSON.parse(
+      packageTemplate.replace(/"[^"]*<%[^%]*%>[^"]*"/g, '""'),
+    )
+    if (!isRecord(value)) return []
+
+    return [
+      ...collectDependencies(
+        readStringRecord(value.dependencies),
+        'dependency',
+        source,
+      ),
+      ...collectDependencies(
+        readStringRecord(value.devDependencies),
+        'devDependency',
+        source,
+      ),
+    ]
+  } catch {
+    return []
+  }
+}
+
+function collectDependencies(
+  deps: Record<string, string> | undefined,
+  type: 'dependency' | 'devDependency',
+  source: AttributionSource,
+): Array<DependencyAttribution> {
+  if (!deps) return []
+
+  return Object.entries(deps).map(([name, version]) => ({
+    name,
+    version,
+    type,
+    ...source,
+  }))
+}
+
+async function computeAttribution(input: {
+  framework: Framework
+  chosenAddOns: Array<AddOn>
+  starter?: Starter
+  files: Record<string, string>
+}): Promise<AttributionOutput> {
+  const { framework, chosenAddOns, starter, files } = input
+
+  const integrations = chosenAddOns.flatMap((addOn) =>
+    (addOn.integrations ?? []).map((integration) => ({
+      ...integration,
+      _sourceId: addOn.id,
+      _sourceName: addOn.name,
+    })),
+  )
+
+  const dependencies = chosenAddOns.flatMap((addOn) => {
+    const source = { sourceId: addOn.id, sourceName: addOn.name }
+
+    return [
+      ...collectDependencies(
+        addOn.packageAdditions?.dependencies,
+        'dependency',
+        source,
+      ),
+      ...collectDependencies(
+        addOn.packageAdditions?.devDependencies,
+        'devDependency',
+        source,
+      ),
+      ...(addOn.packageTemplate
+        ? collectPackageTemplateDependencies(addOn.packageTemplate, source)
+        : []),
+    ]
+  })
+
+  const injections = [
+    ...integrations.flatMap(integrationInjections),
+    ...dependencies.map(dependencyInjection),
+  ]
+  const attributedFiles: Record<string, CtaAttributedFile> = {}
+
+  for (const [filePath, content] of Object.entries(files)) {
+    const provenance = await getFileProvenance(
+      filePath,
+      framework,
+      chosenAddOns,
+      starter,
+    )
+    if (!provenance) continue
+
+    const lines = content.split('\n')
+    const relevant = injections.filter((injection) =>
+      injection.appliesTo(filePath),
+    )
+    const injectedLines = new Map<number, AttributionSource>()
+
+    for (const injection of relevant) {
+      lines.forEach((line, index) => {
+        if (injection.matches(line) && !injectedLines.has(index + 1)) {
+          injectedLines.set(index + 1, injection.source)
+        }
+      })
+    }
+
+    attributedFiles[filePath] = {
+      content,
+      provenance,
+      lineAttributions: lines.map((_, index) => {
+        const line = index + 1
+        const injected = injectedLines.get(line)
+
+        return injected
+          ? {
+              line,
+              sourceId: injected.sourceId,
+              sourceName: injected.sourceName,
+              type: 'injected',
+            }
+          : {
+              line,
+              sourceId: provenance.sourceId,
+              sourceName: provenance.sourceName,
+              type: 'original',
+            }
+      }),
+    }
+  }
+
+  return { attributedFiles, dependencies }
+}
+
+// Line attribution interface (used by the UI)
+export interface LineAttribution {
+  lineNumber: number
+  featureId: string
+  featureName: string
+  type?: 'original' | 'injected'
+}
+
+export interface AttributedFile {
+  path: string
+  content: string
+  attributions: Array<LineAttribution>
+}
+
+export interface AttributedCompileOutput extends CompileResponse {
+  attributedFiles: Record<string, AttributedFile>
+  dependencies?: Array<{
+    name: string
+    version: string
+    type: 'dependency' | 'devDependency'
+    sourceId: string
+    sourceName: string
+  }>
+}
+
+export async function compileWithAttributionHandler(
+  definition: ProjectDefinition,
+): Promise<AttributedCompileOutput> {
+  const frameworkId = definition.framework ?? 'react'
+  const framework = await getFramework(frameworkId)
+  const featureOptions = definition.featureOptions ?? {}
+
+  // Merge selectedExample into features (CTA treats examples as add-ons)
+  const allFeatures = definition.selectedExample
+    ? [...definition.features, definition.selectedExample]
+    : definition.features
+
+  // Custom integrations disabled until stable launch
+  const chosenAddOns = await resolveAddOns(allFeatures, [], frameworkId)
+
+  const { environment, output } = createMemoryEnvironment(
+    `/project/${definition.name}`,
+  )
+
+  // Custom starters disabled until stable launch
+  await create.createApp(environment, {
+    projectName: definition.name,
+    targetDir: `/project/${definition.name}`,
+    framework,
+    mode: DEFAULT_MODE,
+    typescript: true,
+    tailwind: definition.tailwind ?? true,
+    packageManager: definition.packageManager ?? 'pnpm',
+    git: false,
+    install: false,
+    intent: false,
+    chosenAddOns,
+    addOnOptions: mergeOptionsWithDefaults(chosenAddOns, featureOptions),
+  })
+
+  const packageJson = output.files['package.json']
+    ? JSON.parse(output.files['package.json'])
+    : { dependencies: {}, devDependencies: {}, scripts: {} }
+
+  // Compute attribution using the new cta-engine attribution system
+  const attribution = await computeAttribution({
+    framework,
+    chosenAddOns,
+    starter: undefined,
+    files: output.files,
+  })
+
+  // Convert cta-engine attribution format to our UI format
+  // Baseline sources (framework + required addons) get mapped to 'base'
+  const baselineSourceIds = new Set([framework.id, ...DEFAULT_REQUIRED_ADDONS])
+  const attributedFiles: Record<string, AttributedFile> = {}
+
+  for (const [filePath, ctaFile] of Object.entries(attribution.attributedFiles)) {
+    attributedFiles[filePath] = {
+      path: filePath,
+      content: ctaFile.content,
+      attributions: ctaFile.lineAttributions.map((attr) => {
+        const isBaseline = baselineSourceIds.has(attr.sourceId)
+        return {
+          lineNumber: attr.line,
+          featureId: isBaseline ? 'base' : attr.sourceId,
+          featureName: isBaseline ? 'Base Template' : attr.sourceName,
+          type: attr.type,
+        }
+      }),
+    }
+  }
+
+  // For files that weren't in the attribution (e.g., generated files), use base attribution
+  for (const [filePath, content] of Object.entries(output.files)) {
+    if (!attributedFiles[filePath]) {
+      const lines = content.split('\n')
+      attributedFiles[filePath] = {
+        path: filePath,
+        content,
+        attributions: lines.map((_, i) => ({
+          lineNumber: i + 1,
+          featureId: 'base',
+          featureName: 'Base Template',
+          type: 'original' as const,
+        })),
+      }
+    }
+  }
+
+  return {
+    files: output.files,
+    packages: {
+      dependencies: packageJson.dependencies || {},
+      devDependencies: packageJson.devDependencies || {},
+      scripts: packageJson.scripts || {},
+    },
+    envVars: extractEnvVars(chosenAddOns),
+    commands: output.commands,
+    warnings: extractWarnings(chosenAddOns),
+    attributedFiles,
+    dependencies: attribution.dependencies,
+  }
+}
diff --git a/src/builder/api/config.ts b/src/builder/api/config.ts
new file mode 100644
index 000000000..d8f180f50
--- /dev/null
+++ b/src/builder/api/config.ts
@@ -0,0 +1,16 @@
+import { normalizeFrameworkId, type FrameworkId } from '../frameworks'
+import { create } from './create-worker'
+
+export { type FrameworkId, FRAMEWORKS, normalizeFrameworkId } from '../frameworks'
+
+export async function getFramework(id: FrameworkId | string = 'react') {
+  const frameworkId = normalizeFrameworkId(id)
+  const framework = await create.getFrameworkById(frameworkId)
+  if (!framework) {
+    throw new Error(`${id} framework not found`)
+  }
+  return framework
+}
+
+export const DEFAULT_MODE = 'file-router'
+export const DEFAULT_REQUIRED_ADDONS: Array<string> = []
diff --git a/src/builder/api/create-worker.ts b/src/builder/api/create-worker.ts
new file mode 100644
index 000000000..ed622b13b
--- /dev/null
+++ b/src/builder/api/create-worker.ts
@@ -0,0 +1,601 @@
+import {
+  createMemoryEnvironment,
+  createWorkerCreate,
+  createWorkerManifestLoader,
+  loadRemoteAddOn,
+  type AddOn,
+  type Framework,
+  type ManifestCatalog,
+  type Starter,
+  type WorkerAddOnManifestModule,
+  type WorkerFrameworkManifestModule,
+} from '@tanstack/create/worker'
+import { manifestCatalog } from '@tanstack/create/worker-manifest/catalog'
+
+type WorkerTemplateContext = Parameters<
+  WorkerAddOnManifestModule['renderManifestTemplate']
+>[1]
+
+type GeneratedTemplateContext = WorkerTemplateContext & {
+  packageManager: unknown
+  projectName: unknown
+  typescript: unknown
+  tailwind: unknown
+  js: unknown
+  jsx: unknown
+  fileRouter: unknown
+  codeRouter: unknown
+  routerOnly: unknown
+  includeExamples: unknown
+  addOnEnabled: Record<string, unknown>
+  addOnOption: Record<string, unknown>
+  addOns: Array<Record<string, unknown>>
+  integrations: Array<Record<string, unknown>>
+  routes: Array<Record<string, unknown>>
+  getPackageManagerAddScript: (...args: Array<unknown>) => string
+  getPackageManagerRunScript: (...args: Array<unknown>) => string
+  getPackageManagerExecuteScript: (...args: Array<unknown>) => string
+  relativePath: (...args: Array<unknown>) => string
+  integrationImportContent: (...args: Array<unknown>) => string
+  integrationImportCode: (...args: Array<unknown>) => string | undefined
+  renderTemplate: (content: string) => string
+  ignoreFile: () => never
+}
+
+type GeneratedWorkerManifestModule = {
+  renderManifestTemplate: (
+    template: string,
+    context: GeneratedTemplateContext,
+  ) => string | undefined
+  hasManifestTemplate?: (template: string) => boolean
+}
+
+type GeneratedWorkerFrameworkManifestModule = GeneratedWorkerManifestModule & {
+  framework: WorkerFrameworkManifestModule['framework']
+}
+
+type WorkerAddOnManifest = WorkerAddOnManifestModule['addOn']
+type WorkerFrameworkMetadata = ManifestCatalog['frameworks'][number]
+type WorkerAddOnMetadata = WorkerFrameworkMetadata['addOns'][number]
+type WorkerAddOnType = WorkerAddOnManifest['type']
+type WorkerAddOnPhase = WorkerAddOnManifest['phase']
+type WorkerAddOnCategory = NonNullable<WorkerAddOnManifest['category']>
+type WorkerAddOnExclusive = NonNullable<WorkerAddOnManifest['exclusive']>[number]
+type WorkerAddOnEnvVar = NonNullable<WorkerAddOnManifest['envVars']>[number]
+type WorkerAddOnOptions = NonNullable<WorkerAddOnManifest['options']>
+type WorkerAddOnOption = WorkerAddOnOptions[string]
+type WorkerAddOnPackageAdditions = NonNullable<
+  WorkerAddOnManifest['packageAdditions']
+>
+type GeneratedStringRecord = Record<string, string | undefined>
+type GeneratedAddOnPackageAdditions = {
+  dependencies?: GeneratedStringRecord
+  devDependencies?: GeneratedStringRecord
+  scripts?: GeneratedStringRecord
+}
+type GeneratedAddOnEnvVar = Omit<WorkerAddOnEnvVar, 'file'> & {
+  file?: string
+}
+type GeneratedAddOnOption = Omit<WorkerAddOnOption, 'type'> & {
+  type: string
+}
+type GeneratedAddOnOptions = Record<string, GeneratedAddOnOption | undefined>
+type GeneratedAddOnFields = {
+  type: string
+  phase: string
+  category?: string
+  exclusive?: Array<string>
+  envVars?: Array<GeneratedAddOnEnvVar>
+  options?: GeneratedAddOnOptions
+}
+type GeneratedAddOnManifest = Omit<
+  WorkerAddOnManifest,
+  | 'type'
+  | 'phase'
+  | 'category'
+  | 'exclusive'
+  | 'envVars'
+  | 'options'
+  | 'packageAdditions'
+> &
+  GeneratedAddOnFields & {
+    packageAdditions?: GeneratedAddOnPackageAdditions
+  }
+type GeneratedAddOnMetadata = Omit<
+  WorkerAddOnMetadata,
+  | 'type'
+  | 'phase'
+  | 'category'
+  | 'exclusive'
+  | 'envVars'
+  | 'options'
+  | 'packageAdditions'
+> &
+  GeneratedAddOnFields & {
+    packageAdditions?: GeneratedAddOnPackageAdditions
+  }
+
+type GeneratedWorkerAddOnManifestModule = GeneratedWorkerManifestModule & {
+  addOn: GeneratedAddOnManifest
+}
+
+function isSupportedFrameworkId(frameworkId: string) {
+  return frameworkId === 'react' || frameworkId === 'solid'
+}
+
+function isSupportedAddOnId(frameworkId: string, addOnId: string) {
+  return addOnId in (addOnLoaders[frameworkId] ?? {})
+}
+
+function getGeneratedTemplateContext(
+  context: WorkerTemplateContext,
+): GeneratedTemplateContext {
+  return {
+    ...context,
+    packageManager: context.packageManager,
+    projectName: context.projectName,
+    typescript: context.typescript,
+    tailwind: context.tailwind,
+    js: context.js,
+    jsx: context.jsx,
+    fileRouter: context.fileRouter,
+    codeRouter: context.codeRouter,
+    routerOnly: context.routerOnly,
+    includeExamples: context.includeExamples,
+    addOnEnabled: context.addOnEnabled,
+    addOnOption: context.addOnOption,
+    addOns: context.addOns,
+    integrations: context.integrations,
+    routes: context.routes,
+    getPackageManagerAddScript: context.getPackageManagerAddScript,
+    getPackageManagerRunScript: context.getPackageManagerRunScript,
+    getPackageManagerExecuteScript: context.getPackageManagerExecuteScript,
+    relativePath: context.relativePath,
+    integrationImportContent: context.integrationImportContent,
+    integrationImportCode: context.integrationImportCode,
+    renderTemplate: context.renderTemplate,
+    ignoreFile: context.ignoreFile,
+  }
+}
+
+function loadFramework(
+  load: () => Promise<GeneratedWorkerFrameworkManifestModule>,
+): () => Promise<WorkerFrameworkManifestModule> {
+  return async () => {
+    const module = await load()
+
+    return {
+      framework: module.framework,
+      hasManifestTemplate: module.hasManifestTemplate,
+      renderManifestTemplate(template, context) {
+        return module.renderManifestTemplate(
+          template,
+          getGeneratedTemplateContext(context),
+        )
+      },
+    }
+  }
+}
+
+function getAddOnType(type: string): WorkerAddOnType {
+  switch (type) {
+    case 'add-on':
+    case 'example':
+    case 'starter':
+    case 'toolchain':
+    case 'deployment':
+      return type
+    default:
+      throw new Error(`Unsupported add-on type: ${type}`)
+  }
+}
+
+function getAddOnPhase(phase: string): WorkerAddOnPhase {
+  switch (phase) {
+    case 'setup':
+    case 'add-on':
+    case 'example':
+      return phase
+    default:
+      throw new Error(`Unsupported add-on phase: ${phase}`)
+  }
+}
+
+function getAddOnCategory(
+  category: string | undefined,
+): WorkerAddOnCategory | undefined {
+  switch (category) {
+    case undefined:
+    case 'tanstack':
+    case 'database':
+    case 'orm':
+    case 'auth':
+    case 'deploy':
+    case 'styling':
+    case 'monitoring':
+    case 'cms':
+    case 'api':
+    case 'analytics':
+    case 'i18n':
+    case 'tooling':
+    case 'other':
+      return category
+    default:
+      throw new Error(`Unsupported add-on category: ${category}`)
+  }
+}
+
+function getAddOnExclusive(exclusive: string): WorkerAddOnExclusive {
+  switch (exclusive) {
+    case 'orm':
+    case 'auth':
+    case 'deploy':
+    case 'database':
+    case 'linter':
+      return exclusive
+    default:
+      throw new Error(`Unsupported add-on exclusivity group: ${exclusive}`)
+  }
+}
+
+function getAddOnEnvFile(file: string | undefined): WorkerAddOnEnvVar['file'] {
+  switch (file) {
+    case undefined:
+    case '.env':
+    case '.env.local':
+      return file
+    default:
+      throw new Error(`Unsupported add-on env file: ${file}`)
+  }
+}
+
+function getAddOnOption(option: GeneratedAddOnOption): WorkerAddOnOption {
+  switch (option.type) {
+    case 'select':
+      return {
+        ...option,
+        type: option.type,
+      }
+    default:
+      throw new Error(`Unsupported add-on option type: ${option.type}`)
+  }
+}
+
+function getAddOnOptions(
+  options: GeneratedAddOnOptions | undefined,
+): WorkerAddOnManifest['options'] {
+  if (!options) return undefined
+
+  const normalizedOptions: WorkerAddOnOptions = {}
+
+  for (const [key, option] of Object.entries(options)) {
+    if (option !== undefined) {
+      normalizedOptions[key] = getAddOnOption(option)
+    }
+  }
+
+  return normalizedOptions
+}
+
+function getAddOnEnvVars(
+  envVars: Array<GeneratedAddOnEnvVar> | undefined,
+): WorkerAddOnManifest['envVars'] {
+  return envVars?.map((envVar) => ({
+    ...envVar,
+    file: getAddOnEnvFile(envVar.file),
+  }))
+}
+
+function getStringRecord(
+  record: GeneratedStringRecord | undefined,
+): Record<string, string> | undefined {
+  if (!record) return undefined
+
+  const normalizedRecord: Record<string, string> = {}
+
+  for (const [key, value] of Object.entries(record)) {
+    if (value !== undefined) {
+      normalizedRecord[key] = value
+    }
+  }
+
+  return normalizedRecord
+}
+
+function getPackageAdditions(
+  packageAdditions: GeneratedAddOnPackageAdditions | undefined,
+): WorkerAddOnManifest['packageAdditions'] {
+  if (!packageAdditions) return undefined
+
+  const normalizedPackageAdditions: WorkerAddOnPackageAdditions = {
+    dependencies: getStringRecord(packageAdditions.dependencies),
+    devDependencies: getStringRecord(packageAdditions.devDependencies),
+    scripts: getStringRecord(packageAdditions.scripts),
+  }
+
+  return normalizedPackageAdditions
+}
+
+function getAddOnMetadata(
+  addOn: GeneratedAddOnMetadata,
+): WorkerAddOnMetadata {
+  return {
+    ...addOn,
+    type: getAddOnType(addOn.type),
+    phase: getAddOnPhase(addOn.phase),
+    category: getAddOnCategory(addOn.category),
+    exclusive: addOn.exclusive?.map(getAddOnExclusive),
+    envVars: getAddOnEnvVars(addOn.envVars),
+    options: getAddOnOptions(addOn.options),
+    packageAdditions: getPackageAdditions(addOn.packageAdditions),
+  }
+}
+
+function getAddOnManifest(addOn: GeneratedAddOnManifest): WorkerAddOnManifest {
+  return {
+    ...addOn,
+    type: getAddOnType(addOn.type),
+    phase: getAddOnPhase(addOn.phase),
+    category: getAddOnCategory(addOn.category),
+    exclusive: addOn.exclusive?.map(getAddOnExclusive),
+    envVars: getAddOnEnvVars(addOn.envVars),
+    options: getAddOnOptions(addOn.options),
+    packageAdditions: getPackageAdditions(addOn.packageAdditions),
+  }
+}
+
+function getManifestCatalog(): ManifestCatalog {
+  return {
+    frameworks: manifestCatalog.frameworks
+      .filter((framework) => isSupportedFrameworkId(framework.id))
+      .map((framework) => ({
+        ...framework,
+        addOns: framework.addOns
+          .filter((addOn) => isSupportedAddOnId(framework.id, addOn.id))
+          .map(getAddOnMetadata),
+      })),
+  }
+}
+
+function loadAddOn(
+  load: () => Promise<GeneratedWorkerAddOnManifestModule>,
+): () => Promise<WorkerAddOnManifestModule> {
+  return async () => {
+    const module = await load()
+
+    return {
+      addOn: getAddOnManifest(module.addOn),
+      hasManifestTemplate: module.hasManifestTemplate,
+      renderManifestTemplate(template, context) {
+        return module.renderManifestTemplate(
+          template,
+          getGeneratedTemplateContext(context),
+        )
+      },
+    }
+  }
+}
+
+const frameworkLoaders: Record<
+  string,
+  () => Promise<WorkerFrameworkManifestModule>
+> = {
+  react: loadFramework(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react'),
+  ),
+  solid: loadFramework(() =>
+    import('@tanstack/create/worker-manifest/frameworks/solid'),
+  ),
+}
+
+const reactAddOnLoaders = {
+  ai: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/ai'),
+  ),
+  'apollo-client': loadAddOn(() =>
+    import(
+      '@tanstack/create/worker-manifest/frameworks/react/add-ons/apollo-client'
+    ),
+  ),
+  'better-auth': loadAddOn(() =>
+    import(
+      '@tanstack/create/worker-manifest/frameworks/react/add-ons/better-auth'
+    ),
+  ),
+  biome: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/biome'),
+  ),
+  clerk: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/clerk'),
+  ),
+  cloudflare: loadAddOn(() =>
+    import(
+      '@tanstack/create/worker-manifest/frameworks/react/add-ons/cloudflare'
+    ),
+  ),
+  compiler: loadAddOn(() =>
+    import(
+      '@tanstack/create/worker-manifest/frameworks/react/add-ons/compiler'
+    ),
+  ),
+  convex: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/convex'),
+  ),
+  db: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/db'),
+  ),
+  drizzle: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/drizzle'),
+  ),
+  eslint: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/eslint'),
+  ),
+  form: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/form'),
+  ),
+  mcp: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/mcp'),
+  ),
+  neon: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/neon'),
+  ),
+  netlify: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/netlify'),
+  ),
+  nitro: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/nitro'),
+  ),
+  oRPC: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/orpc'),
+  ),
+  paraglide: loadAddOn(() =>
+    import(
+      '@tanstack/create/worker-manifest/frameworks/react/add-ons/paraglide'
+    ),
+  ),
+  posthog: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/posthog'),
+  ),
+  powersync: loadAddOn(() =>
+    import(
+      '@tanstack/create/worker-manifest/frameworks/react/add-ons/powersync'
+    ),
+  ),
+  prisma: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/prisma'),
+  ),
+  railway: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/railway'),
+  ),
+  resume: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/resume'),
+  ),
+  sentry: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/sentry'),
+  ),
+  shadcn: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/shadcn'),
+  ),
+  shopify: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/shopify'),
+  ),
+  'shopify-storefront': loadAddOn(() =>
+    import(
+      '@tanstack/create/worker-manifest/frameworks/react/add-ons/shopify-storefront'
+    ),
+  ),
+  store: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/store'),
+  ),
+  storybook: loadAddOn(() =>
+    import(
+      '@tanstack/create/worker-manifest/frameworks/react/add-ons/storybook'
+    ),
+  ),
+  strapi: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/strapi'),
+  ),
+  t3env: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/t3env'),
+  ),
+  table: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/table'),
+  ),
+  'tanstack-query': loadAddOn(() =>
+    import(
+      '@tanstack/create/worker-manifest/frameworks/react/add-ons/tanstack-query'
+    ),
+  ),
+  tRPC: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/trpc'),
+  ),
+  workos: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/react/add-ons/workos'),
+  ),
+} satisfies Record<string, () => Promise<WorkerAddOnManifestModule>>
+
+const solidAddOnLoaders = {
+  'better-auth': loadAddOn(() =>
+    import(
+      '@tanstack/create/worker-manifest/frameworks/solid/add-ons/better-auth'
+    ),
+  ),
+  biome: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/solid/add-ons/biome'),
+  ),
+  cloudflare: loadAddOn(() =>
+    import(
+      '@tanstack/create/worker-manifest/frameworks/solid/add-ons/cloudflare'
+    ),
+  ),
+  convex: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/solid/add-ons/convex'),
+  ),
+  eslint: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/solid/add-ons/eslint'),
+  ),
+  form: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/solid/add-ons/form'),
+  ),
+  netlify: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/solid/add-ons/netlify'),
+  ),
+  nitro: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/solid/add-ons/nitro'),
+  ),
+  railway: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/solid/add-ons/railway'),
+  ),
+  sentry: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/solid/add-ons/sentry'),
+  ),
+  'solid-ui': loadAddOn(() =>
+    import(
+      '@tanstack/create/worker-manifest/frameworks/solid/add-ons/solid-ui'
+    ),
+  ),
+  store: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/solid/add-ons/store'),
+  ),
+  strapi: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/solid/add-ons/strapi'),
+  ),
+  t3env: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/solid/add-ons/t3env'),
+  ),
+  tanchat: loadAddOn(() =>
+    import('@tanstack/create/worker-manifest/frameworks/solid/add-ons/tanchat'),
+  ),
+  'tanstack-query': loadAddOn(() =>
+    import(
+      '@tanstack/create/worker-manifest/frameworks/solid/add-ons/tanstack-query'
+    ),
+  ),
+} satisfies Record<string, () => Promise<WorkerAddOnManifestModule>>
+
+const addOnLoaders: Record<
+  string,
+  Record<string, () => Promise<WorkerAddOnManifestModule>>
+> = {
+  react: reactAddOnLoaders,
+  solid: solidAddOnLoaders,
+}
+
+export const create = createWorkerCreate(
+  createWorkerManifestLoader({
+    loadCatalog: async () => getManifestCatalog(),
+    async loadFramework(frameworkId) {
+      const load = frameworkLoaders[frameworkId]
+      if (!load) throw new Error(`Unsupported framework: ${frameworkId}`)
+      return load()
+    },
+    async loadAddOn(frameworkId, addOnId) {
+      const load = addOnLoaders[frameworkId]?.[addOnId]
+      if (!load) throw new Error(`Unsupported add-on: ${addOnId}`)
+      return load()
+    },
+  }),
+)
+
+export { createMemoryEnvironment, loadRemoteAddOn }
+export type { AddOn, Framework, Starter }
diff --git a/src/builder/api/feature-artifacts.ts b/src/builder/api/feature-artifacts.ts
new file mode 100644
index 000000000..905c22c35
--- /dev/null
+++ b/src/builder/api/feature-artifacts.ts
@@ -0,0 +1,110 @@
+import { type AddOnCompiled } from './compile'
+import { compileWithAttributionHandler, type ProjectDefinition } from './compile'
+import { type FrameworkId } from './config'
+
+export interface FeatureArtifactsRequest {
+  features: Array<string>
+  projectName?: string
+  framework?: FrameworkId
+  tailwind?: boolean
+  featureOptions?: Record<string, Record<string, unknown>>
+  customIntegrations?: Array<AddOnCompiled>
+}
+
+export interface FeatureArtifact {
+  files: Record<string, string>
+  injections: Record<string, { content: string; highlightedLines: Array<number> }>
+  packages: {
+    dependencies?: Record<string, string>
+    devDependencies?: Record<string, string>
+  }
+  envVars?: Array<{
+    name: string
+    description: string
+  }>
+}
+
+export interface FeatureArtifactsResponse {
+  artifacts: Record<string, FeatureArtifact>
+}
+
+export async function featureArtifactsHandler(
+  request: FeatureArtifactsRequest,
+): Promise<FeatureArtifactsResponse> {
+  if (!request.features || request.features.length === 0) {
+    return { artifacts: {} }
+  }
+
+  const projectName = request.projectName || 'my-app'
+  const tailwind = request.tailwind ?? true
+
+  const definition: ProjectDefinition = {
+    name: projectName,
+    framework: request.framework,
+    tailwind,
+    features: request.features,
+    featureOptions: request.featureOptions ?? {},
+    customIntegrations: request.customIntegrations,
+  }
+
+  const output = await compileWithAttributionHandler(definition)
+
+  const artifacts: Record<string, FeatureArtifact> = {}
+
+  for (const featureId of request.features) {
+    artifacts[featureId] = {
+      files: {},
+      injections: {},
+      packages: {
+        dependencies: {},
+        devDependencies: {},
+      },
+      envVars: [],
+    }
+  }
+
+  for (const [path, fileData] of Object.entries(output.attributedFiles)) {
+    const content = output.files[path]
+    if (!content || !fileData.attributions) continue
+
+    const linesByFeature = new Map<string, Array<number>>()
+    let hasBaseLines = false
+
+    for (const attr of fileData.attributions) {
+      if (attr.featureId === 'base') {
+        hasBaseLines = true
+        continue
+      }
+
+      if (!linesByFeature.has(attr.featureId)) {
+        linesByFeature.set(attr.featureId, [])
+      }
+      linesByFeature.get(attr.featureId)!.push(attr.lineNumber)
+    }
+
+    for (const [featureId, lines] of linesByFeature) {
+      if (!artifacts[featureId]) continue
+
+      if (hasBaseLines) {
+        artifacts[featureId].injections[path] = {
+          content,
+          highlightedLines: lines,
+        }
+      } else {
+        const allLinesFromThis = fileData.attributions.every(
+          (a) => a.featureId === featureId,
+        )
+        if (allLinesFromThis) {
+          artifacts[featureId].files[path] = content
+        } else {
+          artifacts[featureId].injections[path] = {
+            content,
+            highlightedLines: lines,
+          }
+        }
+      }
+    }
+  }
+
+  return { artifacts }
+}
diff --git a/src/builder/api/features.ts b/src/builder/api/features.ts
new file mode 100644
index 000000000..5dc6097e8
--- /dev/null
+++ b/src/builder/api/features.ts
@@ -0,0 +1,133 @@
+import { getFramework, DEFAULT_MODE, DEFAULT_REQUIRED_ADDONS, type FrameworkId } from './config'
+import { create, type AddOn } from './create-worker'
+import type { AddOnOption } from '@tanstack/create/worker'
+import { partners } from '~/utils/partners'
+
+// Set of active partner IDs for matching addons to partners
+const activePartnerIds = new Set(
+  partners.filter((p) => p.status === 'active').map((p) => p.id),
+)
+
+const isDev = process.env.NODE_ENV !== 'production'
+
+function normalizeUrl(url: string | undefined) {
+  if (!url) return url
+  if (isDev) {
+    return url.replace(/^https?:\/\/tanstack\.com/, '')
+  }
+  return url
+}
+
+export interface FeatureOption {
+  key: string
+  type: 'select' | 'boolean' | 'string'
+  label: string
+  description?: string
+  default: string | boolean | number | null
+  choices?: Array<{ value: string; label: string }>
+}
+
+export interface FeatureInfo {
+  id: string
+  name: string
+  description: string
+  category: string
+  requires: Array<string>
+  exclusive: Array<string>
+  hasOptions: boolean
+  options?: Array<FeatureOption>
+  link?: string
+  color?: string
+  partnerId?: string
+  requiresTailwind?: boolean
+}
+
+export interface FeaturesResponse {
+  features: Array<FeatureInfo>
+  examples: Array<FeatureInfo>
+  version: string
+}
+
+function mapAddOnOptions(addOn: AddOn): Array<FeatureOption> | undefined {
+  if (!addOn.options) return undefined
+
+  return Object.entries(addOn.options).map(([key, opt]) => {
+    const option = opt as AddOnOption
+    return {
+      key,
+      type: option.type,
+      label: option.label,
+      description: option.description,
+      default: option.default,
+      choices: option.type === 'select' ? option.options : undefined,
+    }
+  })
+}
+
+function getCategoryFromType(type: string): string {
+  switch (type) {
+    case 'deployment':
+      return 'deploy'
+    case 'toolchain':
+      return 'tooling'
+    case 'example':
+      return 'example'
+    default:
+      return 'other'
+  }
+}
+
+const CATEGORY_OVERRIDES: Record<string, string> = {
+  shopify: 'ecommerce',
+}
+
+function toFeatureInfo(addOn: AddOn): FeatureInfo {
+  // Type assertion for new fields that may not be in the cta-engine types yet
+  const addon = addOn as AddOn & {
+    category?: string
+    exclusive?: Array<string>
+    color?: string
+  }
+
+  return {
+    id: addon.id,
+    name: addon.name,
+    description: addon.description,
+    category:
+      CATEGORY_OVERRIDES[addon.id] ??
+      addon.category ??
+      getCategoryFromType(addon.type),
+    requires: addon.dependsOn ?? [],
+    exclusive: addon.exclusive ?? [],
+    hasOptions: !!addon.options,
+    options: mapAddOnOptions(addon),
+    link: normalizeUrl(addon.link),
+    color: addon.color,
+    partnerId: activePartnerIds.has(addon.id) ? addon.id : undefined,
+    requiresTailwind: addon.tailwind === true ? undefined : !addon.tailwind,
+  }
+}
+
+export async function getFeaturesHandler(
+  frameworkId: FrameworkId = 'react',
+): Promise<FeaturesResponse> {
+  const framework = await getFramework(frameworkId)
+  const allAddOns = create.getAllAddOns(framework, DEFAULT_MODE)
+
+  const features = allAddOns
+    .filter((addOn: AddOn) => {
+      if (DEFAULT_REQUIRED_ADDONS.includes(addOn.id)) return false
+      return ['add-on', 'deployment', 'toolchain'].includes(addOn.type)
+    })
+    .map(toFeatureInfo)
+
+  const examples = allAddOns
+    .filter((addOn: AddOn) => addOn.type === 'example')
+    .map(toFeatureInfo)
+
+  return {
+    features,
+    examples,
+    version: '1.0.0',
+  }
+}
diff --git a/src/builder/api/index.ts b/src/builder/api/index.ts
new file mode 100644
index 000000000..a564896db
--- /dev/null
+++ b/src/builder/api/index.ts
@@ -0,0 +1,52 @@
+export {
+  getFeaturesHandler,
+  type FeaturesResponse,
+  type FeatureInfo,
+  type FeatureOption,
+} from './features'
+
+export {
+  compileHandler,
+  compileWithAttributionHandler,
+  type ProjectDefinition,
+  type CompileRequest,
+  type CompileResponse,
+  type CompileHandlerOptions,
+  type AttributedCompileOutput,
+  type AttributedFile,
+  type LineAttribution,
+} from './compile'
+
+export {
+  validateHandler,
+  type ValidationError,
+  type ValidationSuggestion,
+  type ValidateResponse,
+} from './validate'
+
+export {
+  suggestHandler,
+  type SuggestRequest,
+  type SuggestResponse,
+  type FeatureSuggestion,
+} from './suggest'
+
+export {
+  featureArtifactsHandler,
+  type FeatureArtifactsRequest,
+  type FeatureArtifactsResponse,
+  type FeatureArtifact,
+} from './feature-artifacts'
+
+export {
+  loadRemoteIntegrationHandler,
+  loadRemoteTemplateHandler,
+  type RemoteIntegrationResponse,
+  type RemoteTemplateResponse,
+} from './remote'
+
+export type { AddOnCompiled as IntegrationCompiled, StarterCompiled as CustomTemplateCompiled } from './compile'
+
+export type FeatureId = string
+
+export { type FrameworkId, FRAMEWORKS, normalizeFrameworkId } from './config'
diff --git a/src/builder/api/remote.ts b/src/builder/api/remote.ts
new file mode 100644
index 000000000..b1c46d2da
--- /dev/null
+++ b/src/builder/api/remote.ts
@@ -0,0 +1,340 @@
+import { type AddOn } from './create-worker'
+import { type AddOnCompiled, type StarterCompiled } from './compile'
+import { validateRemoteUrl } from '~/utils/url-validation.server'
+import { isRecord } from '~/utils/api-boundary.server'
+import {
+  fetchWithTimeout,
+  readResponseJsonWithLimit,
+} from '~/utils/outbound-fetch.server'
+
+export interface RemoteIntegrationResponse {
+  integration?: AddOnCompiled
+  error?: string
+}
+
+export interface RemoteTemplateResponse {
+  template?: StarterCompiled
+  error?: string
+}
+
+const REMOTE_BUILDER_JSON_MAX_BYTES = 2 * 1024 * 1024
+const REMOTE_BUILDER_TIMEOUT_MS = 10_000
+const REMOTE_BUILDER_MAX_REDIRECTS = 3
+const REMOTE_BUILDER_JSON_TYPES = new Set([
+  'application/json',
+  'application/octet-stream',
+  'text/plain',
+])
+const ADD_ON_TYPES = new Set<string>([
+  'add-on',
+  'deployment',
+  'example',
+  'starter',
+  'toolchain',
+])
+const ADD_ON_PHASES = new Set<string>(['add-on', 'example', 'setup'])
+const ADD_ON_CATEGORIES = new Set<string>([
+  'analytics',
+  'api',
+  'auth',
+  'cms',
+  'database',
+  'deploy',
+  'i18n',
+  'monitoring',
+  'orm',
+  'other',
+  'styling',
+  'tanstack',
+  'tooling',
+])
+
+function toIntegrationCompiled(addOn: AddOn): AddOnCompiled {
+  return {
+    id: addOn.id,
+    name: addOn.name,
+    description: addOn.description,
+    type: addOn.type,
+    phase: addOn.phase,
+    modes: addOn.modes,
+    files: addOn.files ?? {},
+    deletedFiles: addOn.deletedFiles ?? [],
+    dependsOn: addOn.dependsOn,
+    options: addOn.options,
+    link: addOn.link,
+    tailwind: addOn.tailwind ?? true,
+    requiresTailwind: addOn.tailwind === true ? undefined : !addOn.tailwind,
+    warning: addOn.warning,
+    priority: addOn.priority,
+    author: addOn.author,
+    version: addOn.version,
+    license: addOn.license,
+    category: addOn.category,
+    packageAdditions: addOn.packageAdditions,
+  }
+}
+
+function isStringArray(value: unknown): value is Array<string> {
+  return Array.isArray(value) && value.every((item) => typeof item === 'string')
+}
+
+function isStringRecord(value: unknown): value is Record<string, string> {
+  return (
+    isRecord(value) &&
+    Object.values(value).every((item) => typeof item === 'string')
+  )
+}
+
+function readString(record: Record<string, unknown>, key: string) {
+  const value = record[key]
+  return typeof value === 'string' ? value : undefined
+}
+
+function readNumber(record: Record<string, unknown>, key: string) {
+  const value = record[key]
+  return typeof value === 'number' && Number.isFinite(value)
+    ? value
+    : undefined
+}
+
+function readOptionalBoolean(record: Record<string, unknown>, key: string) {
+  const value = record[key]
+  return typeof value === 'boolean' ? value : undefined
+}
+
+function readRecord(record: Record<string, unknown>, key: string) {
+  const value = record[key]
+  return isRecord(value) ? value : undefined
+}
+
+function readStringRecord(record: Record<string, unknown>, key: string) {
+  const value = record[key]
+  return isStringRecord(value) ? value : undefined
+}
+
+function isAddOnType(value: unknown): value is AddOn['type'] {
+  return typeof value === 'string' && ADD_ON_TYPES.has(value)
+}
+
+function isAddOnPhase(value: unknown): value is AddOn['phase'] {
+  return typeof value === 'string' && ADD_ON_PHASES.has(value)
+}
+
+function isAddOnCategory(value: unknown): value is NonNullable<AddOn['category']> {
+  return typeof value === 'string' && ADD_ON_CATEGORIES.has(value)
+}
+
+function readPackageAdditions(record: Record<string, unknown>) {
+  const value = readRecord(record, 'packageAdditions')
+  if (!value) return undefined
+
+  return {
+    dependencies: readStringRecord(value, 'dependencies'),
+    devDependencies: readStringRecord(value, 'devDependencies'),
+    scripts: readStringRecord(value, 'scripts'),
+  }
+}
+
+function isAllowedRemoteJsonType(contentType: string) {
+  if (!contentType) return true
+
+  const mediaType = contentType.split(';')[0]?.trim().toLowerCase()
+  return (
+    !!mediaType &&
+    (REMOTE_BUILDER_JSON_TYPES.has(mediaType) || mediaType.endsWith('+json'))
+  )
+}
+
+function assertValidRemoteUrl(url: string) {
+  const validation = validateRemoteUrl(url)
+  if (!validation.valid || !validation.normalizedUrl) {
+    throw new Error(validation.error ?? 'Invalid remote URL')
+  }
+
+  return validation.normalizedUrl
+}
+
+async function fetchRemoteJson(url: string) {
+  let currentUrl = assertValidRemoteUrl(url)
+
+  for (let redirectCount = 0; redirectCount <= REMOTE_BUILDER_MAX_REDIRECTS; redirectCount++) {
+    const response = await fetchWithTimeout(currentUrl, {
+      headers: {
+        Accept: 'application/json, text/plain;q=0.9, application/octet-stream;q=0.8',
+      },
+      redirect: 'manual',
+      timeoutMs: REMOTE_BUILDER_TIMEOUT_MS,
+    })
+
+    if (
+      response.status >= 300 &&
+      response.status < 400 &&
+      response.headers.has('location')
+    ) {
+      const location = response.headers.get('location')
+      if (!location) {
+        throw new Error('Remote resource returned an empty redirect')
+      }
+
+      currentUrl = assertValidRemoteUrl(new URL(location, currentUrl).toString())
+      continue
+    }
+
+    if (response.status >= 300 && response.status < 400) {
+      throw new Error('Remote resource redirected without a location')
+    }
+
+    if (!response.ok) {
+      throw new Error(`Remote resource returned ${response.status}`)
+    }
+
+    const contentType = response.headers.get('content-type') ?? ''
+    if (!isAllowedRemoteJsonType(contentType)) {
+      throw new Error('Remote resource did not return JSON')
+    }
+
+    return readResponseJsonWithLimit(response, REMOTE_BUILDER_JSON_MAX_BYTES)
+  }
+
+  throw new Error('Remote resource redirected too many times')
+}
+
+function toRemoteTemplate(value: unknown, url: string): StarterCompiled | null {
+  if (!isRecord(value)) return null
+
+  const name = readString(value, 'name')
+  const description = readString(value, 'description')
+  const framework = readString(value, 'framework')
+  const mode = readString(value, 'mode')
+  const files = readStringRecord(value, 'files')
+
+  if (!name || !description || !framework || !mode || !files) {
+    return null
+  }
+
+  return {
+    id: readString(value, 'id') ?? url,
+    name,
+    description,
+    type: 'starter',
+    phase: 'setup',
+    modes: isStringArray(value.modes) ? value.modes : [mode],
+    files,
+    deletedFiles: isStringArray(value.deletedFiles) ? value.deletedFiles : [],
+    framework,
+    mode,
+    typescript: readOptionalBoolean(value, 'typescript') ?? true,
+    tailwind: readOptionalBoolean(value, 'tailwind') ?? true,
+    banner: readString(value, 'banner'),
+    dependsOn: isStringArray(value.dependsOn) ? value.dependsOn : undefined,
+  }
+}
+
+async function loadRemoteTemplate(url: string) {
+  const json = await fetchRemoteJson(url)
+  const template = toRemoteTemplate(json, url)
+
+  if (!template) {
+    throw new Error(`Invalid starter: ${url}`)
+  }
+
+  return template
+}
+
+function toRemoteAddOn(value: unknown, url: string): AddOn | null {
+  if (!isRecord(value)) return null
+
+  const name = readString(value, 'name')
+  const description = readString(value, 'description')
+  const type = value.type
+  const phase = value.phase
+  const modes = value.modes
+  const files = readStringRecord(value, 'files')
+
+  if (
+    !name ||
+    !description ||
+    !isAddOnType(type) ||
+    !isAddOnPhase(phase) ||
+    !isStringArray(modes) ||
+    !files
+  ) {
+    return null
+  }
+
+  const deletedFiles = value.deletedFiles
+  const addOn: AddOn = {
+    id: url,
+    name,
+    description,
+    type,
+    phase,
+    modes,
+    files,
+    deletedFiles: isStringArray(deletedFiles) ? deletedFiles : [],
+    author: readString(value, 'author'),
+    version: readString(value, 'version'),
+    link: readString(value, 'link'),
+    license: readString(value, 'license'),
+    warning: readString(value, 'warning'),
+    tailwind: readOptionalBoolean(value, 'tailwind'),
+    category: isAddOnCategory(value.category) ? value.category : undefined,
+    priority: readNumber(value, 'priority'),
+    dependsOn: isStringArray(value.dependsOn) ? value.dependsOn : undefined,
+    packageAdditions: readPackageAdditions(value),
+    getFiles: () => Promise.resolve(Object.keys(files)),
+    getFileContents: (path: string) => Promise.resolve(files[path] ?? ''),
+    getDeletedFiles: () =>
+      Promise.resolve(isStringArray(deletedFiles) ? deletedFiles : []),
+  }
+
+  return addOn
+}
+
+async function loadRemoteIntegration(url: string) {
+  const json = await fetchRemoteJson(url)
+  const addOn = toRemoteAddOn(json, url)
+
+  if (!addOn) {
+    throw new Error(`Invalid add-on: ${url}`)
+  }
+
+  return addOn
+}
+
+export async function loadRemoteIntegrationHandler(
+  url: string,
+): Promise<RemoteIntegrationResponse> {
+  if (!url) {
+    return { error: 'URL is required' }
+  }
+
+  try {
+    const addOn = await loadRemoteIntegration(url)
+    const integration = toIntegrationCompiled(addOn)
+    return { integration }
+  } catch (error) {
+    return {
+      error:
+        error instanceof Error ? error.message : 'Failed to load integration',
+    }
+  }
+}
+
+export async function loadRemoteTemplateHandler(
+  url: string,
+): Promise<RemoteTemplateResponse> {
+  if (!url) {
+    return { error: 'URL is required' }
+  }
+
+  try {
+    const template = await loadRemoteTemplate(url)
+    return { template }
+  } catch (error) {
+    return {
+      error:
+        error instanceof Error ? error.message : 'Failed to load template',
+    }
+  }
+}
diff --git a/src/builder/api/request-boundary.server.ts b/src/builder/api/request-boundary.server.ts
new file mode 100644
index 000000000..a6b6de9f5
--- /dev/null
+++ b/src/builder/api/request-boundary.server.ts
@@ -0,0 +1,99 @@
+import {
+  jsonError,
+  jsonResponse,
+  readJsonBody,
+  validateJsonRequest,
+  validateSameOriginRequest,
+} from '~/utils/api-boundary.server'
+import {
+  checkIpRateLimit,
+  RATE_LIMITS,
+  rateLimitedResponse,
+  type RateLimitOptions,
+  type RateLimitResult,
+} from '~/utils/rateLimit.server'
+
+const BUILDER_JSON_MAX_BYTES = 128 * 1024
+
+export type BuilderJsonRequestResult<T> =
+  | { body: T; rateLimit: RateLimitResult }
+  | { response: Response }
+
+export async function readBuilderJsonRequest(
+  request: Request,
+  options: { rateLimit?: RateLimitOptions } = {},
+): Promise<BuilderJsonRequestResult<unknown>> {
+  const rateLimit = await checkIpRateLimit(
+    request,
+    options.rateLimit ?? RATE_LIMITS.builderCompile,
+  )
+  if (!rateLimit.allowed) {
+    return { response: rateLimitedResponse(rateLimit) }
+  }
+
+  const guardError = validateJsonRequest(request, {
+    maxContentLength: BUILDER_JSON_MAX_BYTES,
+  })
+  if (guardError) {
+    return {
+      response: jsonError(guardError.message, guardError.status, rateLimit.headers),
+    }
+  }
+
+  const result = await readJsonBody(request, {
+    maxContentLength: BUILDER_JSON_MAX_BYTES,
+  })
+  if (!result.success) {
+    return {
+      response: jsonError(
+        result.error.message,
+        result.error.status,
+        rateLimit.headers,
+      ),
+    }
+  }
+
+  return { body: result.body, rateLimit }
+}
+
+export async function validateBuilderGetRequest(
+  request: Request,
+  options: { rateLimit?: RateLimitOptions } = {},
+) {
+  const rateLimit = await checkIpRateLimit(
+    request,
+    options.rateLimit ?? RATE_LIMITS.builderCompile,
+  )
+  if (!rateLimit.allowed) {
+    return { response: rateLimitedResponse(rateLimit) }
+  }
+
+  const sameOriginError = validateSameOriginRequest(request)
+  if (sameOriginError) {
+    return {
+      response: jsonError(
+        sameOriginError.message,
+        sameOriginError.status,
+        rateLimit.headers,
+      ),
+    }
+  }
+
+  return { rateLimit }
+}
+
+export function builderJsonResponse(body: unknown, rateLimit?: RateLimitResult) {
+  return jsonResponse(body, { headers: rateLimit?.headers })
+}
+
+export function builderErrorResponse(
+  message: string,
+  status: number,
+  rateLimit?: RateLimitResult,
+) {
+  return jsonError(message, status, rateLimit?.headers)
+}
+
+export function builderInternalErrorResponse(message: string) {
+  return jsonError(message, 500)
+}
diff --git a/src/builder/api/request-schema.server.ts b/src/builder/api/request-schema.server.ts
new file mode 100644
index 000000000..cd0145d92
--- /dev/null
+++ b/src/builder/api/request-schema.server.ts
@@ -0,0 +1,106 @@
+import * as v from 'valibot'
+
+export const builderFrameworkSchema = v.picklist(['react', 'solid'])
+export const builderPackageManagerSchema = v.picklist([
+  'bun',
+  'npm',
+  'pnpm',
+  'yarn',
+])
+
+export const builderStringSchema = v.pipe(v.string(), v.maxLength(200))
+export const builderFeatureIdSchema = v.pipe(v.string(), v.maxLength(120))
+export const builderFeatureListSchema = v.pipe(
+  v.array(builderFeatureIdSchema),
+  v.maxLength(80),
+)
+export const builderFeatureOptionsSchema = v.record(
+  builderFeatureIdSchema,
+  v.record(builderStringSchema, v.unknown()),
+)
+const builderFileMapSchema = v.record(
+  v.pipe(v.string(), v.minLength(1), v.maxLength(260)),
+  v.string(),
+)
+
+export const builderProjectDefinitionSchema = v.object({
+  name: v.pipe(v.string(), v.minLength(1), v.maxLength(120)),
+  framework: v.optional(builderFrameworkSchema),
+  packageManager: v.optional(builderPackageManagerSchema),
+  tailwind: v.optional(v.boolean()),
+  features: builderFeatureListSchema,
+  featureOptions: v.optional(builderFeatureOptionsSchema),
+  selectedExample: v.optional(builderFeatureIdSchema),
+})
+
+export const builderCompileBodySchema = v.object({
+  definition: builderProjectDefinitionSchema,
+  format: v.optional(v.picklist(['full', 'summary'])),
+})
+
+export const builderValidateBodySchema = v.object({
+  definition: builderProjectDefinitionSchema,
+})
+
+export const builderSuggestBodySchema = v.object({
+  description: v.optional(v.pipe(v.string(), v.maxLength(4_000))),
+  current: v.optional(
+    v.object({
+      name: v.optional(v.pipe(v.string(), v.maxLength(120))),
+      framework: v.optional(builderFrameworkSchema),
+      packageManager: v.optional(builderPackageManagerSchema),
+      tailwind: v.optional(v.boolean()),
+      features: v.optional(builderFeatureListSchema),
+      featureOptions: v.optional(builderFeatureOptionsSchema),
+      selectedExample: v.optional(builderFeatureIdSchema),
+    }),
+  ),
+  intent: v.optional(
+    v.picklist(['full-stack', 'api-only', 'static', 'database', 'auth', 'deploy']),
+  ),
+})
+
+export const builderFeatureArtifactsBodySchema = v.object({
+  features: builderFeatureListSchema,
+  projectName: v.optional(v.pipe(v.string(), v.maxLength(120))),
+  framework: v.optional(builderFrameworkSchema),
+  tailwind: v.optional(v.boolean()),
+  featureOptions: v.optional(builderFeatureOptionsSchema),
+})
+
+export const builderRemoteLoadBodySchema = v.object({
+  url: v.pipe(v.string(), v.minLength(1), v.maxLength(2_048)),
+})
+
+export const builderDeployBodySchema = v.object({
+  repoName: v.pipe(v.string(), v.minLength(1), v.maxLength(100)),
+  isPrivate: v.boolean(),
+  projectName: v.pipe(v.string(), v.minLength(1), v.maxLength(120)),
+  framework: v.optional(builderFrameworkSchema),
+  packageManager: v.optional(builderPackageManagerSchema),
+  features: builderFeatureListSchema,
+  featureOptions: v.optional(builderFeatureOptionsSchema),
+  tailwind: v.boolean(),
+  files: v.optional(builderFileMapSchema),
+})
+
+export type BuilderProjectDefinition = v.InferOutput<
+  typeof builderProjectDefinitionSchema
+>
+export type BuilderCompileBody = v.InferOutput<typeof builderCompileBodySchema>
+export type BuilderValidateBody = v.InferOutput<typeof builderValidateBodySchema>
+export type BuilderSuggestBody = v.InferOutput<typeof builderSuggestBodySchema>
+export type BuilderFeatureArtifactsBody = v.InferOutput<
+  typeof builderFeatureArtifactsBodySchema
+>
+export type BuilderRemoteLoadBody = v.InferOutput<
+  typeof builderRemoteLoadBodySchema
+>
+export type BuilderDeployBody = v.InferOutput<typeof builderDeployBodySchema>
+
+export function parseBuilderRequest<T>(
+  schema: v.GenericSchema<unknown, T>,
+  body: unknown,
+) {
+  return v.parse(schema, body)
+}
diff --git a/src/builder/api/suggest.ts b/src/builder/api/suggest.ts
new file mode 100644
index 000000000..defd25279
--- /dev/null
+++ b/src/builder/api/suggest.ts
@@ -0,0 +1,205 @@
+import type { ProjectDefinition } from './compile'
+import { getFramework, DEFAULT_MODE } from './config'
+import { create, type AddOn } from './create-worker'
+
+export interface SuggestRequest {
+  description?: string
+  current?: Partial<ProjectDefinition>
+  intent?: 'full-stack' | 'api-only' | 'static' | 'database' | 'auth' | 'deploy'
+}
+
+export interface FeatureSuggestion {
+  id: string
+  name: string
+  reason: string
+  confidence: 'high' | 'medium' | 'low'
+  category: string
+}
+
+export interface SuggestResponse {
+  suggestions: Array<FeatureSuggestion>
+  reasoning: string
+  recommendedTemplate?: string
+}
+
+const FEATURE_KEYWORDS: Record<
+  string,
+  Array<{ keyword: string; weight: number }>
+> = {
+  'tanstack-query': [
+    { keyword: 'data fetching', weight: 1 },
+    { keyword: 'api', weight: 0.7 },
+    { keyword: 'server state', weight: 1 },
+    { keyword: 'cache', weight: 0.8 },
+    { keyword: 'react query', weight: 1 },
+    { keyword: 'tanstack query', weight: 1 },
+  ],
+  form: [
+    { keyword: 'form', weight: 1 },
+    { keyword: 'validation', weight: 0.8 },
+    { keyword: 'input', weight: 0.5 },
+  ],
+  drizzle: [
+    { keyword: 'database', weight: 0.9 },
+    { keyword: 'sql', weight: 0.8 },
+    { keyword: 'postgres', weight: 0.9 },
+    { keyword: 'orm', weight: 0.8 },
+    { keyword: 'drizzle', weight: 1 },
+  ],
+  prisma: [
+    { keyword: 'prisma', weight: 1 },
+    { keyword: 'database', weight: 0.7 },
+    { keyword: 'orm', weight: 0.7 },
+  ],
+  clerk: [
+    { keyword: 'auth', weight: 0.8 },
+    { keyword: 'authentication', weight: 0.9 },
+    { keyword: 'login', weight: 0.8 },
+    { keyword: 'clerk', weight: 1 },
+  ],
+  'better-auth': [
+    { keyword: 'auth', weight: 0.7 },
+    { keyword: 'self-hosted', weight: 1 },
+    { keyword: 'better-auth', weight: 1 },
+  ],
+  ai: [
+    { keyword: 'ai', weight: 1 },
+    { keyword: 'llm', weight: 0.9 },
+    { keyword: 'chatbot', weight: 0.9 },
+    { keyword: 'openai', weight: 0.8 },
+  ],
+  shadcn: [
+    { keyword: 'ui', weight: 0.6 },
+    { keyword: 'components', weight: 0.6 },
+    { keyword: 'shadcn', weight: 1 },
+  ],
+  sentry: [
+    { keyword: 'error tracking', weight: 1 },
+    { keyword: 'monitoring', weight: 0.8 },
+    { keyword: 'sentry', weight: 1 },
+  ],
+}
+
+const INTENT_FEATURES: Record<string, Array<string>> = {
+  'full-stack': ['drizzle', 'shadcn'],
+  'api-only': ['drizzle'],
+  database: ['drizzle'],
+  auth: ['clerk'],
+  deploy: [],
+}
+
+function getCategoryFromType(type: string): string {
+  switch (type) {
+    case 'deployment':
+      return 'deploy'
+    case 'toolchain':
+      return 'tooling'
+    default:
+      return 'other'
+  }
+}
+
+export async function suggestHandler(
+  request: SuggestRequest,
+): Promise<SuggestResponse> {
+  const framework = await getFramework()
+  const allAddOns = create.getAllAddOns(framework, DEFAULT_MODE)
+  const addOnMap = new Map(allAddOns.map((a: AddOn) => [a.id, a] as const))
+
+  const suggestions: Array<FeatureSuggestion> = []
+  const reasons: Array<string> = []
+
+  const currentFeatures = new Set(request.current?.features || [])
+
+  if (request.description) {
+    const description = request.description.toLowerCase()
+
+    for (const [featureId, keywords] of Object.entries(FEATURE_KEYWORDS)) {
+      if (currentFeatures.has(featureId)) continue
+
+      let score = 0
+      const matchedKeywords: Array<string> = []
+
+      for (const { keyword, weight } of keywords) {
+        if (description.includes(keyword.toLowerCase())) {
+          score += weight
+          matchedKeywords.push(keyword)
+        }
+      }
+
+      if (score > 0) {
+        const addOn = addOnMap.get(featureId) as AddOn | undefined
+        if (addOn) {
+          suggestions.push({
+            id: featureId,
+            name: addOn.name,
+            reason: `Matches: ${matchedKeywords.join(', ')}`,
+            confidence: score >= 1 ? 'high' : score >= 0.5 ? 'medium' : 'low',
+            category: getCategoryFromType(addOn.type),
+          })
+        }
+      }
+    }
+
+    if (suggestions.length > 0) {
+      reasons.push(
+        `Based on your description, I identified ${suggestions.length} relevant features.`,
+      )
+    }
+  }
+
+  if (request.intent && INTENT_FEATURES[request.intent]) {
+    const intentFeatures = INTENT_FEATURES[request.intent]
+
+    for (const featureId of intentFeatures) {
+      if (currentFeatures.has(featureId)) continue
+      if (suggestions.some((s) => s.id === featureId)) continue
+
+      const addOn = addOnMap.get(featureId) as AddOn | undefined
+      if (addOn) {
+        suggestions.push({
+          id: featureId,
+          name: addOn.name,
+          reason: `Recommended for ${request.intent} projects`,
+          confidence: 'high',
+          category: getCategoryFromType(addOn.type),
+        })
+      }
+    }
+
+    reasons.push(`Added recommendations for ${request.intent} development.`)
+  }
+
+  const confidenceOrder = { high: 0, medium: 1, low: 2 }
+  suggestions.sort(
+    (a, b) => confidenceOrder[a.confidence] - confidenceOrder[b.confidence],
+  )
+
+  for (const suggestion of [...suggestions]) {
+    const addOn = addOnMap.get(suggestion.id) as AddOn | undefined
+    if (addOn?.dependsOn) {
+      for (const required of addOn.dependsOn) {
+        if (
+          !currentFeatures.has(required) &&
+          !suggestions.some((s) => s.id === required)
+        ) {
+          const requiredAddOn = addOnMap.get(required) as AddOn | undefined
+          if (requiredAddOn) {
+            suggestions.push({
+              id: required,
+              name: requiredAddOn.name,
+              reason: `Required by ${suggestion.name}`,
+              confidence: 'high',
+              category: getCategoryFromType(requiredAddOn.type),
+            })
+          }
+        }
+      }
+    }
+  }
+
+  return {
+    suggestions: suggestions.slice(0, 10),
+    reasoning: reasons.join(' '),
+  }
+}
diff --git a/src/builder/api/validate.ts b/src/builder/api/validate.ts
new file mode 100644
index 000000000..13419ae07
--- /dev/null
+++ b/src/builder/api/validate.ts
@@ -0,0 +1,83 @@
+/**
+ * Validate API Handler (v2)
+ *
+ * Uses cta-engine to validate project definitions.
+ */
+
+import type { ProjectDefinition } from './compile'
+import { getFramework, DEFAULT_MODE } from './config'
+import { create, type AddOn } from './create-worker'
+
+export interface ValidationError {
+  field: string
+  message: string
+}
+
+export interface ValidationSuggestion {
+  type: 'add' | 'remove' | 'change'
+  feature?: string
+  option?: string
+  value?: unknown
+  reason: string
+}
+
+export interface ValidateResponse {
+  valid: boolean
+  errors: Array<ValidationError>
+  suggestions: Array<ValidationSuggestion>
+}
+
+export async function validateHandler(
+  definition: ProjectDefinition,
+): Promise<ValidateResponse> {
+  const framework = await getFramework()
+  const allAddOns = create.getAllAddOns(framework, DEFAULT_MODE)
+
+  const errors: Array<ValidationError> = []
+  const suggestions: Array<ValidationSuggestion> = []
+
+  const addOnMap = new Map(allAddOns.map((a: AddOn) => [a.id, a]))
+
+  if (!definition.name || definition.name.trim() === '') {
+    errors.push({
+      field: 'name',
+      message: 'Project name is required',
+    })
+  } else if (!/^[a-z0-9-_]+$/.test(definition.name)) {
+    errors.push({
+      field: 'name',
+      message:
+        'Project name can only contain lowercase letters, numbers, hyphens, and underscores',
+    })
+  }
+
+  for (const featureId of definition.features) {
+    if (!addOnMap.has(featureId)) {
+      errors.push({
+        field: 'features',
+        message: `Unknown feature: ${featureId}`,
+      })
+    }
+  }
+
+  for (const featureId of definition.features) {
+    const addOn = addOnMap.get(featureId) as AddOn | undefined
+    if (addOn?.dependsOn) {
+      for (const requiredId of addOn.dependsOn) {
+        if (!definition.features.includes(requiredId)) {
+          suggestions.push({
+            type: 'add',
+            feature: requiredId,
+            reason: `'${featureId}' requires '${requiredId}'`,
+          })
+        }
+      }
+    }
+  }
+
+  return {
+    valid: errors.length === 0,
+    errors,
+    suggestions,
+  }
+}
diff --git a/src/builder/frameworks.ts b/src/builder/frameworks.ts
new file mode 100644
index 000000000..23a5852f8
--- /dev/null
+++ b/src/builder/frameworks.ts
@@ -0,0 +1,34 @@
+/**
+ * Framework metadata for the builder UI.
+ * This file is safe to import on the client (no cta-engine dependencies).
+ */
+
+export type FrameworkId = 'react' | 'solid'
+
+export function normalizeFrameworkId(id?: string): FrameworkId {
+  switch (id) {
+    case 'solid':
+      return 'solid'
+    case 'react-cra':
+    case 'react':
+    default:
+      return 'react'
+  }
+}
+
+export const FRAMEWORKS: Array<{
+  id: FrameworkId
+  name: string
+  description: string
+}> = [
+  {
+    id: 'react',
+    name: 'React',
+    description: 'Full-stack React with TanStack Router',
+  },
+  {
+    id: 'solid',
+    name: 'Solid',
+    description: 'Full-stack Solid with TanStack Router',
+  },
+]
diff --git a/src/builder/templates.ts b/src/builder/templates.ts
new file mode 100644
index 000000000..28809a598
--- /dev/null
+++ b/src/builder/templates.ts
@@ -0,0 +1,127 @@
+/**
+ * Template Presets
+ *
+ * Hardcoded preset configurations for common app types.
+ * Users can select a template to pre-populate features, then modify freely.
+ */
+
+import type { LucideIcon } from 'lucide-react'
+import {
+  Rocket,
+  Bot,
+  LayoutDashboard,
+  FileText,
+  Server,
+  Radio,
+  Globe,
+  HardDrive,
+  Plus,
+  ShoppingBag,
+} from 'lucide-react'
+
+export interface Template {
+  id: string
+  name: string
+  description: string
+  icon: LucideIcon
+  color: string
+  features: Array<string>
+  /**
+   * When set, selecting this preset also selects the matching CLI example
+   * (passed as `--template <id>` to the @tanstack/cli) instead of toggling
+   * loose features. The example's `dependsOn` add-ons are auto-included.
+   */
+  exampleId?: string
+}
+
+export const TEMPLATES: Array<Template> = [
+  {
+    id: 'blank',
+    name: 'Blank',
+    description: 'Start from scratch',
+    icon: Plus,
+    color: '#6B7280', // gray
+    features: ['cloudflare'],
+  },
+  {
+    id: 'saas',
+    name: 'SaaS Starter',
+    description: 'Auth, database, monitoring',
+    icon: Rocket,
+    color: '#F97316', // orange
+    features: [
+      'cloudflare',
+      'better-auth',
+      'neon',
+      'drizzle',
+      'sentry',
+      'shadcn',
+      'form',
+    ],
+  },
+  {
+    id: 'ai-chat',
+    name: 'AI Chat',
+    description: 'LLM-powered app',
+    icon: Bot,
+    color: '#8B5CF6', // violet
+    features: ['cloudflare', 'ai', 'store', 'shadcn'],
+  },
+  {
+    id: 'dashboard',
+    name: 'Dashboard',
+    description: 'Admin panels, data tables',
+    icon: LayoutDashboard,
+    color: '#3B82F6', // blue
+    features: ['cloudflare', 'table', 'tanstack-query', 'shadcn', 'form'],
+  },
+  {
+    id: 'blog',
+    name: 'Blog / CMS',
+    description: 'Content-driven site',
+    icon: FileText,
+    color: '#EC4899', // pink
+    features: ['cloudflare', 'strapi', 'tanstack-query'],
+  },
+  {
+    id: 'api-first',
+    name: 'API-First',
+    description: 'Type-safe backend APIs',
+    icon: Server,
+    color: '#10B981', // emerald
+    features: ['cloudflare', 'tRPC', 'tanstack-query', 'drizzle'],
+  },
+  {
+    id: 'realtime',
+    name: 'Realtime',
+    description: 'Live, collaborative features',
+    icon: Radio,
+    color: '#EF4444', // red
+    features: ['cloudflare', 'convex', 'tanstack-query'],
+  },
+  {
+    id: 'i18n',
+    name: 'Multi-Language',
+    description: 'Internationalized app',
+    icon: Globe,
+    color: '#06B6D4', // cyan
+    features: ['cloudflare', 'paraglide', 'shadcn'],
+  },
+  {
+    id: 'local-first',
+    name: 'Local-First',
+    description: 'Offline-capable, sync-enabled',
+    icon: HardDrive,
+    color: '#F59E0B', // amber
+    features: ['cloudflare', 'db', 'tanstack-query', 'store'],
+  },
+  {
+    id: 'storefront',
+    name: 'Storefront',
+    description: 'Sell products with Shopify',
+    icon: ShoppingBag,
+    color: '#5A31F4', // Shopify purple
+    features: ['cloudflare'],
+    exampleId: 'shopify-storefront',
+  },
+]
diff --git a/src/components/AILibraryHero.tsx b/src/components/AILibraryHero.tsx
deleted file mode 100644
index db151ad53..000000000
--- a/src/components/AILibraryHero.tsx
+++ /dev/null
@@ -1,836 +0,0 @@
-import * as React from 'react'
-import { LinkProps } from '@tanstack/react-router'
-import type { Library } from '~/libraries'
-import { ChatPanel } from './ChatPanel'
-import { AnimationPhase } from '~/stores/aiLibraryHeroAnimation'
-import { useAILibraryHeroAnimation } from '~/hooks/useAILibraryHeroAnimation'
-import { AILibraryHeroCard } from './AILibraryHeroCard'
-import { AILibraryHeroBox } from './AILibraryHeroBox'
-import { AILibraryHeroServiceCard } from './AILibraryHeroServiceCard'
-import tsLogo from '~/images/ts-logo.svg'
-import reactLogo from '~/images/react-logo.svg'
-import solidLogo from '~/images/solid-logo.svg'
-import pythonLogo from '~/images/python.svg'
-import phpLightLogo from '~/images/php-light.svg'
-import phpDarkLogo from '~/images/php-dark.svg'
-import ollamaLightLogo from '~/images/ollama-light.svg'
-import ollamaDarkLogo from '~/images/ollama-dark.svg'
-import openaiLightLogo from '~/images/openai-light.svg'
-import openaiDarkLogo from '~/images/openai-dark.svg'
-import anthropicLightLogo from '~/images/anthropic-light.svg'
-import anthropicDarkLogo from '~/images/anthropic-dark.svg'
-import geminiLogo from '~/images/gemini.svg'
-
-import {
-  SVG_WIDTH,
-  SVG_HEIGHT,
-  BOX_FONT_SIZE,
-  BOX_FONT_WEIGHT,
-  SERVICE_WIDTH,
-  SERVICE_LOCATIONS,
-  SERVICE_Y_OFFSET,
-  SERVICE_Y_CENTER,
-  SERVICE_HEIGHT,
-  LIBRARY_CARD_WIDTH,
-  LIBRARY_CARD_HEIGHT,
-  LIBRARY_CARD_LOCATIONS,
-  SERVER_CARD_Y_OFFSET,
-  SERVER_CARD_LOCATIONS,
-  SERVER_CARD_WIDTH,
-  SERVER_CARD_HEIGHT,
-} from '~/stores/aiLibraryHeroAnimation'
-
-type AILibraryHeroProps = {
-  project: Library
-  cta?: {
-    linkProps: LinkProps
-    label: string
-    className?: string
-  }
-  actions?: React.ReactNode
-}
-
-const HIGHLIGHT_COLOR = 'rgba(255, 255, 240, 0.95)'
-
-export function AILibraryHero({}: AILibraryHeroProps) {
-  const strokeColor = 'var(--hero-stroke)'
-  const textColor = 'var(--hero-text)'
-  const glassGradientStart = 'var(--hero-glass-start)'
-  const glassGradientEnd = 'var(--hero-glass-end)'
-  // Use the animation hook - handles all animation state and orchestration
-  const { store } = useAILibraryHeroAnimation()
-
-  const {
-    phase,
-    selectedFramework,
-    selectedService,
-    selectedServer,
-    rotatingFramework,
-    rotatingServer,
-    rotatingService,
-    serviceOffset,
-    messages,
-    typingUserMessage,
-    connectionPulseDirection,
-  } = store
-
-  const getOpacity = (
-    index: number,
-    selectedIndex: number | null,
-    rotatingIndex: number | null,
-  ) => {
-    if (rotatingIndex !== null && rotatingIndex === index) {
-      return 1.0
-    }
-    if (selectedIndex !== null && selectedIndex === index) {
-      return 1.0
-    }
-    return 0.3
-  }
-
-  const getServiceOpacity = (index: number) => {
-    if (rotatingService !== null && rotatingService === index) {
-      return 1.0
-    }
-    if (selectedService !== null && selectedService === index) {
-      return 1.0
-    }
-    return 0.3
-  }
-
-  const getConnectionOpacity = (
-    frameworkIndex: number,
-    serverIndex: number,
-  ) => {
-    const isFrameworkSelected =
-      selectedFramework !== null && selectedFramework === frameworkIndex
-    const isServerSelected =
-      selectedServer !== null && selectedServer === serverIndex
-    const isHighlighting =
-      phase === AnimationPhase.SHOWING_CHAT ||
-      phase === AnimationPhase.PULSING_CONNECTIONS ||
-      phase === AnimationPhase.STREAMING_RESPONSE
-
-    // Active path: selected framework -> client -> ai -> selected server
-    if (isHighlighting && isFrameworkSelected && isServerSelected) {
-      return 1.0
-    }
-    // Unused lines should be low opacity
-    return 0.3
-  }
-
-  const getConnectionStrokeColor = (
-    frameworkIndex: number,
-    serverIndex: number,
-  ) => {
-    // If no selections, ALWAYS return original stroke color (highest priority check)
-    if (selectedFramework === null || selectedServer === null) {
-      return strokeColor
-    }
-
-    // Only highlight during specific phases
-    const isHighlighting =
-      phase === AnimationPhase.SHOWING_CHAT ||
-      phase === AnimationPhase.PULSING_CONNECTIONS ||
-      phase === AnimationPhase.STREAMING_RESPONSE
-
-    // If not in a highlighting phase, always return original stroke color
-    if (!isHighlighting) {
-      return strokeColor
-    }
-
-    // Now check if this is the active path
-    const isFrameworkSelected = selectedFramework === frameworkIndex
-    const isServerSelected = selectedServer === serverIndex
-
-    // Active path: selected framework -> client -> ai -> selected server
-    // Only return off-white if we're in a highlighting phase AND this is the active path
-    if (isFrameworkSelected && isServerSelected) {
-      return HIGHLIGHT_COLOR
-    }
-
-    // Not the active path, return original color
-    return strokeColor
-  }
-
-  const getConnectionPulse = () => {
-    if (
-      phase === AnimationPhase.PULSING_CONNECTIONS ||
-      phase === AnimationPhase.STREAMING_RESPONSE
-    ) {
-      return connectionPulseDirection === 'down' ? 'down' : 'up'
-    }
-    return null
-  }
-
-  const getScaleTransform = (
-    index: number,
-    selectedIndex: number | null,
-    centerX: number,
-    centerY: number,
-  ) => {
-    if (selectedIndex === index) {
-      return `translate(${centerX}, ${centerY}) scale(1.1) translate(-${centerX}, -${centerY})`
-    }
-    return ''
-  }
-
-  return (
-    <>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-            :root {
-              --hero-stroke: rgba(0, 0, 0, 0.6);
-              --hero-text: #000000;
-              --hero-glass-start: rgba(255, 255, 255, 0.8);
-              --hero-glass-end: rgba(255, 255, 255, 0.6);
-            }
-            :root.dark {
-              --hero-stroke: rgba(255, 255, 255, 0.8);
-              --hero-text: #ffffff;
-              --hero-glass-start: rgba(255, 255, 255, 0.55);
-              --hero-glass-end: rgba(255, 255, 255, 0.55);
-            }
-            @keyframes pulse-down {
-              0% {
-                opacity: 0.6;
-                filter: brightness(1) drop-shadow(0 0 2px currentColor);
-              }
-              50% {
-                opacity: 1;
-                filter: brightness(1.8) drop-shadow(0 0 8px currentColor);
-              }
-              100% {
-                opacity: 0.6;
-                filter: brightness(1) drop-shadow(0 0 2px currentColor);
-              }
-            }
-            @keyframes pulse-up {
-              0% {
-                opacity: 0.6;
-                filter: brightness(1) drop-shadow(0 0 2px currentColor);
-              }
-              50% {
-                opacity: 1;
-                filter: brightness(1.8) drop-shadow(0 0 8px currentColor);
-              }
-              100% {
-                opacity: 0.6;
-                filter: brightness(1) drop-shadow(0 0 2px currentColor);
-              }
-            }
-            .animate-pulse-down {
-              animation: pulse-down 1s ease-in-out infinite;
-              stroke-width: 5;
-            }
-            .animate-pulse-up {
-              animation: pulse-up 1s ease-in-out infinite;
-              stroke-width: 5;
-            }
-          `,
-        }}
-      />
-      <div className="relative flex flex-col items-center gap-8 text-center px-4 overflow-visible">
-        {/* Diagram and Chat Panel Container */}
-        <div className="relative z-10 w-full max-w-7xl mx-auto flex flex-col lg:flex-row items-center lg:items-stretch gap-8 lg:gap-12">
-          {/* SVG Diagram */}
-          <div
-            className="relative w-full lg:flex-1 overflow-visible"
-            style={{ height: SVG_HEIGHT }}
-          >
-            <svg
-              key={`${phase}-${selectedFramework}-${selectedServer}`}
-              xmlns="http://www.w3.org/2000/svg"
-              className="w-full h-full"
-              viewBox={`0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`}
-              style={{ overflow: 'visible' }}
-              preserveAspectRatio="xMidYMid meet"
-            >
-              <defs>
-                {/* Glass effect filter with blur and opacity */}
-                <filter id="glass" x="-50%" y="-50%" width="200%" height="200%">
-                  <feGaussianBlur
-                    in="SourceGraphic"
-                    stdDeviation="3"
-                    result="blur"
-                  />
-                  <feColorMatrix
-                    in="blur"
-                    type="matrix"
-                    values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.4 0"
-                    result="glassBlur"
-                  />
-                  <feComposite
-                    in="SourceGraphic"
-                    in2="glassBlur"
-                    operator="over"
-                  />
-                </filter>
-
-                {/* Subtle glow for lines */}
-                <filter
-                  id="lineGlow"
-                  x="-50%"
-                  y="-50%"
-                  width="200%"
-                  height="200%"
-                >
-                  <feGaussianBlur
-                    in="SourceGraphic"
-                    stdDeviation="1.5"
-                    result="coloredBlur"
-                  />
-                  <feMerge>
-                    <feMergeNode in="coloredBlur" />
-                    <feMergeNode in="SourceGraphic" />
-                  </feMerge>
-                </filter>
-
-                {/* Glass gradient */}
-                <linearGradient
-                  id="glassGradient"
-                  x1="0%"
-                  y1="0%"
-                  x2="0%"
-                  y2="100%"
-                >
-                  <stop
-                    offset="0%"
-                    stopColor={glassGradientStart}
-                    stopOpacity="1"
-                  />
-                  <stop
-                    offset="100%"
-                    stopColor={glassGradientEnd}
-                    stopOpacity="1"
-                  />
-                </linearGradient>
-
-                {/* Glass gradient for larger boxes */}
-                <linearGradient
-                  id="glassGradientLarge"
-                  x1="0%"
-                  y1="0%"
-                  x2="0%"
-                  y2="100%"
-                >
-                  <stop
-                    offset="0%"
-                    stopColor={glassGradientStart}
-                    stopOpacity="1"
-                  />
-                  <stop
-                    offset="100%"
-                    stopColor={glassGradientEnd}
-                    stopOpacity="1"
-                  />
-                </linearGradient>
-              </defs>
-
-              {/* Lines from frameworks to ai-client */}
-              <path
-                id="framework-line-0"
-                d="M 60 60 Q 60 80 151.26 80 Q 262.52 80 310 100"
-                fill="none"
-                stroke={getConnectionStrokeColor(0, selectedServer ?? -1)}
-                strokeWidth="1.5"
-                strokeMiterlimit="10"
-                filter="url(#lineGlow)"
-                opacity={getConnectionOpacity(0, selectedServer ?? -1)}
-                className={
-                  selectedFramework === 0 &&
-                  selectedServer !== null &&
-                  getConnectionPulse()
-                    ? getConnectionPulse() === 'down'
-                      ? 'animate-pulse-down'
-                      : 'animate-pulse-up'
-                    : ''
-                }
-              />
-              <path
-                id="framework-line-1"
-                d="M 220 60 Q 220 80 265 80 Q 310 80 310 100"
-                fill="none"
-                stroke={getConnectionStrokeColor(1, selectedServer ?? -1)}
-                strokeWidth="1.5"
-                strokeMiterlimit="10"
-                filter="url(#lineGlow)"
-                opacity={getConnectionOpacity(1, selectedServer ?? -1)}
-                className={
-                  selectedFramework === 1 &&
-                  selectedServer !== null &&
-                  getConnectionPulse()
-                    ? getConnectionPulse() === 'down'
-                      ? 'animate-pulse-down'
-                      : 'animate-pulse-up'
-                    : ''
-                }
-              />
-              <path
-                id="framework-line-2"
-                d="M 380 60 Q 380 80 355 80 Q 310 80 310 100"
-                fill="none"
-                stroke={getConnectionStrokeColor(2, selectedServer ?? -1)}
-                strokeWidth="1.5"
-                strokeMiterlimit="10"
-                filter="url(#lineGlow)"
-                opacity={getConnectionOpacity(2, selectedServer ?? -1)}
-                className={
-                  selectedFramework === 2 &&
-                  selectedServer !== null &&
-                  getConnectionPulse()
-                    ? getConnectionPulse() === 'down'
-                      ? 'animate-pulse-down'
-                      : 'animate-pulse-up'
-                    : ''
-                }
-              />
-              <path
-                id="framework-line-3"
-                d="M 540 60 Q 540 80 450 80 Q 358 80 310 100"
-                fill="none"
-                stroke={getConnectionStrokeColor(3, selectedServer ?? -1)}
-                strokeWidth="1.5"
-                strokeMiterlimit="10"
-                filter="url(#lineGlow)"
-                opacity={getConnectionOpacity(3, selectedServer ?? -1)}
-                className={
-                  selectedFramework === 3 &&
-                  selectedServer !== null &&
-                  getConnectionPulse()
-                    ? getConnectionPulse() === 'down'
-                      ? 'animate-pulse-down'
-                      : 'animate-pulse-up'
-                    : ''
-                }
-              />
-
-              {/* Lines from TanStack AI to servers */}
-              <path
-                id="server-line-0"
-                d="M 60 370 Q 60 350 151.26 350 Q 262.52 350 310 320"
-                fill="none"
-                stroke={getConnectionStrokeColor(selectedFramework ?? -1, 0)}
-                strokeWidth="1.5"
-                strokeMiterlimit="10"
-                filter="url(#lineGlow)"
-                opacity={getConnectionOpacity(selectedFramework ?? -1, 0)}
-                className={
-                  selectedServer === 0 &&
-                  selectedFramework !== null &&
-                  getConnectionPulse()
-                    ? getConnectionPulse() === 'down'
-                      ? 'animate-pulse-down'
-                      : 'animate-pulse-up'
-                    : ''
-                }
-              />
-              <path
-                id="server-line-1"
-                d="M 220 370 Q 220 345 265 345 Q 310 345 310 320"
-                fill="none"
-                stroke={getConnectionStrokeColor(selectedFramework ?? -1, 1)}
-                strokeWidth="1.5"
-                strokeMiterlimit="10"
-                filter="url(#lineGlow)"
-                opacity={getConnectionOpacity(selectedFramework ?? -1, 1)}
-                className={
-                  selectedServer === 1 &&
-                  selectedFramework !== null &&
-                  getConnectionPulse()
-                    ? getConnectionPulse() === 'down'
-                      ? 'animate-pulse-down'
-                      : 'animate-pulse-up'
-                    : ''
-                }
-              />
-              <path
-                id="server-line-2"
-                d="M 380 370 Q 380 345 355 345 Q 310 345 310 320"
-                fill="none"
-                stroke={getConnectionStrokeColor(selectedFramework ?? -1, 2)}
-                strokeWidth="1.5"
-                strokeMiterlimit="10"
-                filter="url(#lineGlow)"
-                opacity={getConnectionOpacity(selectedFramework ?? -1, 2)}
-                className={
-                  selectedServer === 2 &&
-                  selectedFramework !== null &&
-                  getConnectionPulse()
-                    ? getConnectionPulse() === 'down'
-                      ? 'animate-pulse-down'
-                      : 'animate-pulse-up'
-                    : ''
-                }
-              />
-              <path
-                id="server-line-3"
-                d="M 540 370 Q 540 350 450 350 Q 358 350 310 320"
-                fill="none"
-                stroke={getConnectionStrokeColor(selectedFramework ?? -1, 3)}
-                strokeWidth="1.5"
-                strokeMiterlimit="10"
-                filter="url(#lineGlow)"
-                opacity={getConnectionOpacity(selectedFramework ?? -1, 3)}
-                className={
-                  selectedServer === 3 &&
-                  selectedFramework !== null &&
-                  getConnectionPulse()
-                    ? getConnectionPulse() === 'down'
-                      ? 'animate-pulse-down'
-                      : 'animate-pulse-up'
-                    : ''
-                }
-              />
-
-              {/* Top layer: Frameworks */}
-              <AILibraryHeroCard
-                x={LIBRARY_CARD_LOCATIONS[0]}
-                y={0}
-                width={LIBRARY_CARD_WIDTH}
-                height={LIBRARY_CARD_HEIGHT}
-                label="Vanilla"
-                opacity={getOpacity(0, selectedFramework, rotatingFramework)}
-                textColor={textColor}
-                strokeColor={strokeColor}
-                fontSize={BOX_FONT_SIZE}
-                fontWeight={BOX_FONT_WEIGHT}
-                logo={tsLogo}
-                transform={getScaleTransform(
-                  0,
-                  selectedFramework,
-                  LIBRARY_CARD_LOCATIONS[0] + LIBRARY_CARD_WIDTH / 2,
-                  LIBRARY_CARD_HEIGHT / 2,
-                )}
-              />
-
-              <AILibraryHeroCard
-                x={LIBRARY_CARD_LOCATIONS[1]}
-                y={0}
-                width={LIBRARY_CARD_WIDTH}
-                height={LIBRARY_CARD_HEIGHT}
-                label="React"
-                opacity={getOpacity(1, selectedFramework, rotatingFramework)}
-                textColor={textColor}
-                strokeColor={strokeColor}
-                fontSize={BOX_FONT_SIZE}
-                fontWeight={BOX_FONT_WEIGHT}
-                logo={reactLogo}
-                transform={getScaleTransform(
-                  1,
-                  selectedFramework,
-                  LIBRARY_CARD_LOCATIONS[1] + LIBRARY_CARD_WIDTH / 2,
-                  LIBRARY_CARD_HEIGHT / 2,
-                )}
-              />
-
-              <AILibraryHeroCard
-                x={LIBRARY_CARD_LOCATIONS[2]}
-                y={0}
-                width={LIBRARY_CARD_WIDTH}
-                height={LIBRARY_CARD_HEIGHT}
-                label="Solid"
-                opacity={getOpacity(2, selectedFramework, rotatingFramework)}
-                textColor={textColor}
-                strokeColor={strokeColor}
-                fontSize={BOX_FONT_SIZE}
-                fontWeight={BOX_FONT_WEIGHT}
-                logo={solidLogo}
-                transform={getScaleTransform(
-                  2,
-                  selectedFramework,
-                  LIBRARY_CARD_LOCATIONS[2] + LIBRARY_CARD_WIDTH / 2,
-                  LIBRARY_CARD_HEIGHT / 2,
-                )}
-              />
-
-              <AILibraryHeroCard
-                x={LIBRARY_CARD_LOCATIONS[3]}
-                y={0}
-                width={LIBRARY_CARD_WIDTH}
-                height={LIBRARY_CARD_HEIGHT}
-                label="?"
-                opacity={getOpacity(3, selectedFramework, rotatingFramework)}
-                textColor={textColor}
-                strokeColor={strokeColor}
-                fontSize={BOX_FONT_SIZE}
-                fontWeight={BOX_FONT_WEIGHT}
-                isDashed={true}
-                transform={getScaleTransform(
-                  3,
-                  selectedFramework,
-                  LIBRARY_CARD_LOCATIONS[3] + LIBRARY_CARD_WIDTH / 2,
-                  LIBRARY_CARD_HEIGHT / 2,
-                )}
-              />
-
-              {/* @tanstack/ai-client box */}
-              <AILibraryHeroBox
-                x={150}
-                y={100}
-                width={320}
-                height={60}
-                label="@tanstack/ai-client"
-                textColor={textColor}
-                strokeColor={strokeColor}
-                fontSize={25}
-                fontWeight={900}
-                opacity={0.9}
-                logoSize={32}
-              />
-
-              {/* Large TanStack AI container box */}
-              <AILibraryHeroBox
-                x={150}
-                y={210}
-                width={320}
-                height={110}
-                label="TanStack AI"
-                textColor={textColor}
-                strokeColor={strokeColor}
-                fontSize={25}
-                fontWeight={900}
-                rx={16.5}
-                opacity={0.85}
-                logoSize={32}
-              />
-
-              {/* Line from ai-client to @tanstack/ai - drawn after boxes to be on top */}
-              <path
-                id="client-to-ai-line"
-                d="M 310 160 L 310 210"
-                fill="none"
-                stroke={
-                  // If no selections, ALWAYS return original stroke color (highest priority check)
-                  selectedFramework === null || selectedServer === null
-                    ? strokeColor
-                    : // Only highlight during specific phases
-                      phase === AnimationPhase.SHOWING_CHAT ||
-                        phase === AnimationPhase.PULSING_CONNECTIONS ||
-                        phase === AnimationPhase.STREAMING_RESPONSE
-                      ? HIGHLIGHT_COLOR
-                      : strokeColor
-                }
-                strokeWidth={
-                  phase === AnimationPhase.PULSING_CONNECTIONS ||
-                  phase === AnimationPhase.STREAMING_RESPONSE ||
-                  phase === AnimationPhase.SHOWING_CHAT
-                    ? 5
-                    : 2.5
-                }
-                strokeMiterlimit="10"
-                opacity={
-                  // Explicitly check for non-highlighting phases first
-                  phase === AnimationPhase.STARTING ||
-                  phase === AnimationPhase.DESELECTING ||
-                  phase === AnimationPhase.SELECTING_FRAMEWORK ||
-                  phase === AnimationPhase.SELECTING_SERVICE ||
-                  phase === AnimationPhase.SELECTING_SERVER ||
-                  phase === AnimationPhase.HOLDING ||
-                  selectedFramework === null ||
-                  selectedServer === null
-                    ? 0.3
-                    : phase === AnimationPhase.SHOWING_CHAT ||
-                        phase === AnimationPhase.PULSING_CONNECTIONS ||
-                        phase === AnimationPhase.STREAMING_RESPONSE
-                      ? 1.0
-                      : 0.3
-                }
-                className={
-                  getConnectionPulse()
-                    ? getConnectionPulse() === 'down'
-                      ? 'animate-pulse-down'
-                      : 'animate-pulse-up'
-                    : ''
-                }
-              />
-
-              {/* Provider layer */}
-              <g
-                transform={`translate(${serviceOffset}, 0)`}
-                className="transition-transform duration-500 ease-out"
-              >
-                <AILibraryHeroServiceCard
-                  x={SERVICE_LOCATIONS[0]}
-                  y={SERVICE_Y_OFFSET}
-                  width={SERVICE_WIDTH}
-                  height={SERVICE_HEIGHT}
-                  label="Ollama"
-                  opacity={getServiceOpacity(0)}
-                  textColor={textColor}
-                  strokeColor={strokeColor}
-                  fontSize={BOX_FONT_SIZE}
-                  fontWeight={BOX_FONT_WEIGHT}
-                  logoLight={ollamaLightLogo}
-                  logoDark={ollamaDarkLogo}
-                  transform={getScaleTransform(
-                    0,
-                    selectedService,
-                    SERVICE_LOCATIONS[0] + SERVICE_WIDTH / 2,
-                    SERVICE_Y_CENTER,
-                  )}
-                />
-
-                <AILibraryHeroServiceCard
-                  x={SERVICE_LOCATIONS[1]}
-                  y={SERVICE_Y_OFFSET}
-                  width={SERVICE_WIDTH}
-                  height={SERVICE_HEIGHT}
-                  label="OpenAI"
-                  opacity={getServiceOpacity(1)}
-                  textColor={textColor}
-                  strokeColor={strokeColor}
-                  fontSize={BOX_FONT_SIZE}
-                  fontWeight={BOX_FONT_WEIGHT}
-                  logoLight={openaiLightLogo}
-                  logoDark={openaiDarkLogo}
-                  transform={getScaleTransform(
-                    1,
-                    selectedService,
-                    SERVICE_LOCATIONS[1] + SERVICE_WIDTH / 2,
-                    SERVICE_Y_CENTER,
-                  )}
-                />
-
-                <AILibraryHeroServiceCard
-                  x={SERVICE_LOCATIONS[2]}
-                  y={SERVICE_Y_OFFSET}
-                  width={SERVICE_WIDTH}
-                  height={SERVICE_HEIGHT}
-                  label="Anthropic"
-                  opacity={getServiceOpacity(2)}
-                  textColor={textColor}
-                  strokeColor={strokeColor}
-                  fontSize={BOX_FONT_SIZE}
-                  fontWeight={BOX_FONT_WEIGHT}
-                  logoLight={anthropicLightLogo}
-                  logoDark={anthropicDarkLogo}
-                  transform={getScaleTransform(
-                    2,
-                    selectedService,
-                    SERVICE_LOCATIONS[2] + SERVICE_WIDTH / 2,
-                    SERVICE_Y_CENTER,
-                  )}
-                />
-
-                <AILibraryHeroServiceCard
-                  x={SERVICE_LOCATIONS[3]}
-                  y={SERVICE_Y_OFFSET}
-                  width={SERVICE_WIDTH}
-                  height={SERVICE_HEIGHT}
-                  label="Gemini"
-                  opacity={getServiceOpacity(3)}
-                  textColor={textColor}
-                  strokeColor={strokeColor}
-                  fontSize={BOX_FONT_SIZE}
-                  fontWeight={BOX_FONT_WEIGHT}
-                  logo={geminiLogo}
-                  transform={getScaleTransform(
-                    3,
-                    selectedService,
-                    SERVICE_LOCATIONS[3] + SERVICE_WIDTH / 2,
-                    SERVICE_Y_CENTER,
-                  )}
-                />
-              </g>
-
-              {/* Server layer */}
-              <AILibraryHeroCard
-                x={SERVER_CARD_LOCATIONS[0]}
-                y={SERVER_CARD_Y_OFFSET}
-                width={SERVER_CARD_WIDTH}
-                height={SERVER_CARD_HEIGHT}
-                label="TypeScript"
-                opacity={getOpacity(0, selectedServer, rotatingServer)}
-                textColor={textColor}
-                strokeColor={strokeColor}
-                fontSize={16}
-                fontWeight={BOX_FONT_WEIGHT}
-                logo={tsLogo}
-                transform={getScaleTransform(
-                  0,
-                  selectedServer,
-                  SERVER_CARD_LOCATIONS[0] + SERVER_CARD_WIDTH / 2,
-                  SERVER_CARD_Y_OFFSET + SERVER_CARD_HEIGHT / 2,
-                )}
-              />
-
-              <AILibraryHeroCard
-                x={SERVER_CARD_LOCATIONS[1]}
-                y={SERVER_CARD_Y_OFFSET}
-                width={SERVER_CARD_WIDTH}
-                height={SERVER_CARD_HEIGHT}
-                label="PHP"
-                opacity={getOpacity(1, selectedServer, rotatingServer)}
-                textColor={textColor}
-                strokeColor={strokeColor}
-                fontSize={BOX_FONT_SIZE}
-                fontWeight={BOX_FONT_WEIGHT}
-                logoLight={phpLightLogo}
-                logoDark={phpDarkLogo}
-                transform={getScaleTransform(
-                  1,
-                  selectedServer,
-                  SERVER_CARD_LOCATIONS[1] + SERVER_CARD_WIDTH / 2,
-                  SERVER_CARD_Y_OFFSET + SERVER_CARD_HEIGHT / 2,
-                )}
-              />
-
-              <AILibraryHeroCard
-                x={SERVER_CARD_LOCATIONS[2]}
-                y={SERVER_CARD_Y_OFFSET}
-                width={SERVER_CARD_WIDTH}
-                height={SERVER_CARD_HEIGHT}
-                label="Python"
-                opacity={getOpacity(2, selectedServer, rotatingServer)}
-                textColor={textColor}
-                strokeColor={strokeColor}
-                fontSize={BOX_FONT_SIZE}
-                fontWeight={BOX_FONT_WEIGHT}
-                logo={pythonLogo}
-                transform={getScaleTransform(
-                  2,
-                  selectedServer,
-                  SERVER_CARD_LOCATIONS[2] + SERVER_CARD_WIDTH / 2,
-                  SERVER_CARD_Y_OFFSET + SERVER_CARD_HEIGHT / 2,
-                )}
-              />
-
-              <AILibraryHeroCard
-                x={SERVER_CARD_LOCATIONS[3]}
-                y={SERVER_CARD_Y_OFFSET}
-                width={SERVER_CARD_WIDTH}
-                height={SERVER_CARD_HEIGHT}
-                label="?"
-                opacity={getOpacity(3, selectedServer, rotatingServer)}
-                textColor={textColor}
-                strokeColor={strokeColor}
-                fontSize={BOX_FONT_SIZE}
-                fontWeight={BOX_FONT_WEIGHT}
-                isDashed={true}
-                transform={getScaleTransform(
-                  3,
-                  selectedServer,
-                  SERVER_CARD_LOCATIONS[3] + SERVER_CARD_WIDTH / 2,
-                  SERVER_CARD_Y_OFFSET + SERVER_CARD_HEIGHT / 2,
-                )}
-              />
-            </svg>
-          </div>
-
-          {/* Chat Panel */}
-          <div
-            className="w-full max-w-[400px] lg:w-[400px] flex-shrink-0"
-            style={{ height: SVG_HEIGHT }}
-          >
-            <ChatPanel
-              messages={messages}
-              typingUserMessage={typingUserMessage}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/src/components/AILibraryHeroBox.tsx b/src/components/AILibraryHeroBox.tsx
deleted file mode 100644
index 610a86f4f..000000000
--- a/src/components/AILibraryHeroBox.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import * as React from 'react'
-
-type AILibraryHeroBoxProps = {
-  x: number
-  y: number
-  width: number
-  height: number
-  label?: string
-  textColor: string
-  strokeColor: string
-  fontSize?: number
-  fontWeight?: number
-  rx?: number
-  opacity?: number
-  strokeWidth?: number
-  fill?: string
-  showLogo?: boolean
-  logoSize?: number
-  centerText?: boolean
-}
-
-export function AILibraryHeroBox({
-  x,
-  y,
-  width,
-  height,
-  label,
-  textColor,
-  strokeColor,
-  fontSize = 25,
-  fontWeight = 900,
-  rx = 9,
-  opacity = 0.9,
-  strokeWidth = 3,
-  fill = 'url(#glassGradientLarge)',
-  logoSize = 40,
-}: AILibraryHeroBoxProps) {
-  // For centerText, align logo and text higher up; otherwise use normal center
-  const textX = 25 + logoSize
-  const textY = 15 + fontSize
-
-  // Position logo to the right of the text, centered vertically
-  const logoX = 15
-  const logoY = 15
-
-  return (
-    <g transform={`translate(${x}, ${y})`}>
-      <rect
-        width={width}
-        height={height}
-        rx={rx}
-        fill={fill}
-        stroke={strokeColor}
-        strokeWidth={strokeWidth}
-        filter="url(#glass)"
-        opacity={opacity}
-      />
-      {label && (
-        <text
-          x={textX}
-          y={textY}
-          fill={textColor}
-          fontFamily="Helvetica"
-          fontSize={fontSize}
-          fontWeight={fontWeight}
-          textAnchor="start"
-          opacity={opacity * 1.05}
-        >
-          {label}
-        </text>
-      )}
-      <image
-        href="/images/logos/logo-color-100.png"
-        x={logoX}
-        y={logoY}
-        width={logoSize}
-        height={logoSize}
-        opacity={opacity}
-        preserveAspectRatio="xMidYMid meet"
-      />
-    </g>
-  )
-}
diff --git a/src/components/AILibraryHeroCard.tsx b/src/components/AILibraryHeroCard.tsx
deleted file mode 100644
index a4918cfe1..000000000
--- a/src/components/AILibraryHeroCard.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-type AILibraryHeroCardProps = {
-  x: number
-  y: number
-  width: number
-  height: number
-  label: string
-  opacity: number
-  textColor: string
-  strokeColor: string
-  fontSize?: number
-  fontWeight?: number
-  rx?: number
-  isDashed?: boolean
-  logoLight?: string
-  logoDark?: string
-  logo?: string
-  logoSize?: number
-  transform?: string
-  fill?: string
-}
-
-export function AILibraryHeroCard({
-  x,
-  y,
-  width,
-  height,
-  label,
-  opacity,
-  textColor,
-  strokeColor,
-  fontSize = 18,
-  fontWeight = 700,
-  rx = 9,
-  isDashed = false,
-  logoLight,
-  logoDark,
-  logo,
-  logoSize = 20,
-  transform,
-  fill = 'url(#glassGradient)',
-}: AILibraryHeroCardProps) {
-  const hasLogo = logo || logoLight || logoDark
-  const hasSeparateLogos = !logo && logoLight && logoDark
-
-  const centerY = y + height / 2
-  const logoX = hasLogo ? x + 12 : 0
-  const logoY = centerY - logoSize / 2
-  const textX = hasLogo ? x + logoSize + 20 : x + width / 2
-  const textY = centerY + fontSize * 0.35
-
-  return (
-    <g className="transition-all duration-300" transform={transform}>
-      <rect
-        x={x}
-        y={y}
-        width={width}
-        height={height}
-        rx={rx}
-        fill={fill}
-        stroke={strokeColor}
-        strokeWidth="1.5"
-        strokeDasharray={isDashed ? '8 8' : undefined}
-        filter="url(#glass)"
-        opacity={opacity}
-      />
-      {logo && (
-        <image
-          href={logo}
-          x={logoX}
-          y={logoY}
-          width={logoSize}
-          height={logoSize}
-          opacity={opacity}
-          preserveAspectRatio="xMidYMid meet"
-        />
-      )}
-      {hasSeparateLogos && (
-        <>
-          <image
-            href={logoLight}
-            x={logoX}
-            y={logoY}
-            width={logoSize}
-            height={logoSize}
-            opacity={opacity}
-            preserveAspectRatio="xMidYMid meet"
-            className="dark:hidden"
-          />
-          <image
-            href={logoDark}
-            x={logoX}
-            y={logoY}
-            width={logoSize}
-            height={logoSize}
-            opacity={opacity}
-            preserveAspectRatio="xMidYMid meet"
-            className="hidden dark:block"
-          />
-        </>
-      )}
-      {!logo && !hasSeparateLogos && (logoLight || logoDark) && (
-        <image
-          href={logoLight || logoDark}
-          x={logoX}
-          y={logoY}
-          width={logoSize}
-          height={logoSize}
-          opacity={opacity}
-          preserveAspectRatio="xMidYMid meet"
-        />
-      )}
-      <text
-        x={textX}
-        y={textY}
-        fill={textColor}
-        fontFamily="Helvetica"
-        fontSize={fontSize}
-        fontWeight={fontWeight}
-        textAnchor={hasLogo ? 'start' : 'middle'}
-        opacity={opacity}
-      >
-        {label}
-      </text>
-    </g>
-  )
-}
diff --git a/src/components/AILibraryHeroServiceCard.tsx b/src/components/AILibraryHeroServiceCard.tsx
deleted file mode 100644
index da3bdd02b..000000000
--- a/src/components/AILibraryHeroServiceCard.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-type AILibraryHeroServiceCardProps = {
-  x: number
-  y: number
-  width: number
-  height: number
-  label: string
-  opacity: number
-  textColor: string
-  strokeColor: string
-  fontSize?: number
-  fontWeight?: number
-  rx?: number
-  logoLight?: string
-  logoDark?: string
-  logo?: string
-  logoSize?: number
-  transform?: string
-  fill?: string
-}
-
-export function AILibraryHeroServiceCard({
-  x,
-  y,
-  width,
-  height,
-  label,
-  opacity,
-  textColor,
-  strokeColor,
-  fontSize = 18,
-  fontWeight = 700,
-  rx = 6,
-  logoLight,
-  logoDark,
-  logo,
-  logoSize = 20,
-  transform,
-  fill = 'url(#glassGradient)',
-}: AILibraryHeroServiceCardProps) {
-  const hasLogo = logo || logoLight || logoDark
-  const hasSeparateLogos = !logo && logoLight && logoDark
-
-  const centerX = x + width / 2
-  const centerY = y + height / 2
-  const logoX = hasLogo ? x + 12 : 0
-  const logoY = centerY - logoSize / 2
-  const textX = hasLogo ? x + logoSize + 20 : centerX
-  const textY = centerY + fontSize * 0.35
-
-  return (
-    <g className="transition-all duration-300" transform={transform}>
-      <rect
-        x={x}
-        y={y}
-        width={width}
-        height={height}
-        rx={rx}
-        fill={fill}
-        stroke={strokeColor}
-        strokeWidth="1.5"
-        filter="url(#glass)"
-        opacity={opacity}
-      />
-      {logo && (
-        <image
-          href={logo}
-          x={logoX}
-          y={logoY}
-          width={logoSize}
-          height={logoSize}
-          opacity={opacity}
-          preserveAspectRatio="xMidYMid meet"
-        />
-      )}
-      {hasSeparateLogos && (
-        <>
-          <image
-            href={logoLight}
-            x={logoX}
-            y={logoY}
-            width={logoSize}
-            height={logoSize}
-            opacity={opacity}
-            preserveAspectRatio="xMidYMid meet"
-            className="dark:hidden"
-          />
-          <image
-            href={logoDark}
-            x={logoX}
-            y={logoY}
-            width={logoSize}
-            height={logoSize}
-            opacity={opacity}
-            preserveAspectRatio="xMidYMid meet"
-            className="hidden dark:block"
-          />
-        </>
-      )}
-      {!logo && !hasSeparateLogos && (logoLight || logoDark) && (
-        <image
-          href={logoLight || logoDark}
-          x={logoX}
-          y={logoY}
-          width={logoSize}
-          height={logoSize}
-          opacity={opacity}
-          preserveAspectRatio="xMidYMid meet"
-        />
-      )}
-      <text
-        x={textX}
-        y={textY}
-        fill={textColor}
-        fontFamily="Helvetica"
-        fontSize={fontSize}
-        fontWeight={fontWeight}
-        textAnchor={hasLogo ? 'start' : 'middle'}
-        opacity={opacity}
-      >
-        {label}
-      </text>
-    </g>
-  )
-}
diff --git a/src/components/AnnouncementBanner.tsx b/src/components/AnnouncementBanner.tsx
deleted file mode 100644
index 03162478a..000000000
--- a/src/components/AnnouncementBanner.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import * as React from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { useLocation, Link } from '@tanstack/react-router'
-import {
-  X,
-  Info,
-  AlertTriangle,
-  CheckCircle,
-  Gift,
-  ExternalLink,
-  ArrowRight,
-} from 'lucide-react'
-import {
-  getActiveBanners,
-  getDismissedBannerIds,
-  dismissBanner,
-  type ActiveBanner,
-} from '~/utils/banner.functions'
-
-const DISMISSED_BANNERS_KEY = 'tanstack_dismissed_banners'
-
-// Get dismissed banner IDs from localStorage (for anonymous users)
-function getLocalDismissedBanners(): string[] {
-  if (typeof window === 'undefined') return []
-  try {
-    const stored = localStorage.getItem(DISMISSED_BANNERS_KEY)
-    return stored ? JSON.parse(stored) : []
-  } catch {
-    return []
-  }
-}
-
-// Save dismissed banner ID to localStorage
-function saveLocalDismissedBanner(bannerId: string) {
-  if (typeof window === 'undefined') return
-  try {
-    const existing = getLocalDismissedBanners()
-    if (!existing.includes(bannerId)) {
-      localStorage.setItem(
-        DISMISSED_BANNERS_KEY,
-        JSON.stringify([...existing, bannerId]),
-      )
-    }
-  } catch {
-    // Ignore localStorage errors
-  }
-}
-
-const BANNER_STYLES = {
-  info: {
-    icon: Info,
-    bgClass:
-      'bg-blue-100/90 dark:bg-blue-950/90 backdrop-blur-md border-blue-200 dark:border-blue-800',
-    textClass: 'text-blue-900 dark:text-blue-100',
-    iconClass: 'text-blue-600 dark:text-blue-400',
-    linkClass:
-      'text-blue-700 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-200',
-  },
-  warning: {
-    icon: AlertTriangle,
-    bgClass:
-      'bg-amber-100/90 dark:bg-amber-950/90 backdrop-blur-md border-amber-200 dark:border-amber-800',
-    textClass: 'text-amber-900 dark:text-amber-100',
-    iconClass: 'text-amber-600 dark:text-amber-400',
-    linkClass:
-      'text-amber-700 dark:text-amber-300 hover:text-amber-800 dark:hover:text-amber-200',
-  },
-  success: {
-    icon: CheckCircle,
-    bgClass:
-      'bg-green-100/90 dark:bg-green-950/90 backdrop-blur-md border-green-200 dark:border-green-800',
-    textClass: 'text-green-900 dark:text-green-100',
-    iconClass: 'text-green-600 dark:text-green-400',
-    linkClass:
-      'text-green-700 dark:text-green-300 hover:text-green-800 dark:hover:text-green-200',
-  },
-  promo: {
-    icon: Gift,
-    bgClass:
-      'bg-purple-100/90 dark:bg-purple-950/90 backdrop-blur-md border-purple-200 dark:border-purple-800',
-    textClass: 'text-purple-900 dark:text-purple-100',
-    iconClass: 'text-purple-600 dark:text-purple-400',
-    linkClass:
-      'text-purple-700 dark:text-purple-300 hover:text-purple-800 dark:hover:text-purple-200',
-  },
-} as const
-
-interface BannerItemProps {
-  banner: ActiveBanner
-  onDismiss: (bannerId: string) => void
-}
-
-function BannerItem({ banner, onDismiss }: BannerItemProps) {
-  const style = BANNER_STYLES[banner.style] || BANNER_STYLES.info
-  const Icon = style.icon
-  const isExternalLink =
-    banner.linkUrl?.startsWith('http://') ||
-    banner.linkUrl?.startsWith('https://')
-  const isInternalLink = banner.linkUrl?.startsWith('/')
-
-  const linkContent = banner.linkUrl && (
-    <span className="inline-flex items-center gap-1.5 font-medium underline underline-offset-2 hover:no-underline">
-      {banner.linkText || 'Learn More'}
-      {isExternalLink ? (
-        <ExternalLink className="w-3 h-3" />
-      ) : (
-        <ArrowRight className="w-3 h-3" />
-      )}
-    </span>
-  )
-
-  return (
-    <div
-      className={`border-b ${style.bgClass} ${style.textClass}`}
-      role="alert"
-    >
-      <div className="max-w-7xl mx-auto px-4 py-3">
-        <div className="flex items-start gap-3">
-          <Icon className={`w-5 h-5 mt-0.5 flex-shrink-0 ${style.iconClass}`} />
-          <div className="flex-1 min-w-0">
-            <div className="font-medium">{banner.title}</div>
-            {banner.content && (
-              <div className="text-sm opacity-90 mt-0.5 line-clamp-2">
-                {banner.content}
-              </div>
-            )}
-            {banner.linkUrl && (
-              <div className={`text-sm mt-1.5 ${style.linkClass}`}>
-                {isExternalLink ? (
-                  <a
-                    href={banner.linkUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {linkContent}
-                  </a>
-                ) : isInternalLink ? (
-                  <Link to={banner.linkUrl}>{linkContent}</Link>
-                ) : (
-                  <a href={banner.linkUrl}>{linkContent}</a>
-                )}
-              </div>
-            )}
-          </div>
-          <button
-            type="button"
-            onClick={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-              onDismiss(banner.id)
-            }}
-            className="flex-shrink-0 p-1 rounded-md opacity-60 hover:opacity-100 hover:bg-black/5 dark:hover:bg-white/10 transition-all"
-            aria-label="Dismiss"
-          >
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function AnnouncementBanner() {
-  const location = useLocation()
-  const queryClient = useQueryClient()
-  const [localDismissed, setLocalDismissed] = React.useState<string[]>([])
-
-  // Load local dismissed banners on mount (client-side only)
-  React.useEffect(() => {
-    setLocalDismissed(getLocalDismissedBanners())
-  }, [])
-
-  // Fetch active banners for current path
-  const bannersQuery = useQuery({
-    queryKey: ['activeBanners', location.pathname],
-    queryFn: () => getActiveBanners({ data: { pathname: location.pathname } }),
-    staleTime: 1000 * 60 * 5, // 5 minutes
-  })
-
-  // Fetch dismissed banner IDs for logged-in users
-  const dismissedQuery = useQuery({
-    queryKey: ['dismissedBanners'],
-    queryFn: () => getDismissedBannerIds(),
-    staleTime: 1000 * 60 * 5, // 5 minutes
-  })
-
-  // Mutation to dismiss a banner
-  const dismissMutation = useMutation({
-    mutationFn: (bannerId: string) => dismissBanner({ data: { bannerId } }),
-    onSuccess: (result, bannerId) => {
-      if (result.success) {
-        // Server dismissal succeeded (logged-in user)
-        queryClient.invalidateQueries({ queryKey: ['dismissedBanners'] })
-      }
-      // Always save to localStorage as fallback
-      saveLocalDismissedBanner(bannerId)
-      setLocalDismissed((prev) => [...prev, bannerId])
-    },
-    onError: (_, bannerId) => {
-      // If server fails, still save locally
-      saveLocalDismissedBanner(bannerId)
-      setLocalDismissed((prev) => [...prev, bannerId])
-    },
-  })
-
-  const handleDismiss = (bannerId: string) => {
-    dismissMutation.mutate(bannerId)
-  }
-
-  // Combine server and local dismissed IDs
-  const allDismissed = React.useMemo(() => {
-    const serverDismissed = dismissedQuery.data || []
-    return new Set([...serverDismissed, ...localDismissed])
-  }, [dismissedQuery.data, localDismissed])
-
-  // Filter out dismissed banners
-  const visibleBanners = React.useMemo(() => {
-    if (!bannersQuery.data) return []
-    return bannersQuery.data.filter((banner) => !allDismissed.has(banner.id))
-  }, [bannersQuery.data, allDismissed])
-
-  if (visibleBanners.length === 0) {
-    return null
-  }
-
-  return (
-    <div className="w-full">
-      {visibleBanners.map((banner) => (
-        <BannerItem key={banner.id} banner={banner} onDismiss={handleDismiss} />
-      ))}
-    </div>
-  )
-}
diff --git a/src/components/AppDevtools.tsx b/src/components/AppDevtools.tsx
new file mode 100644
index 000000000..7fa587ed6
--- /dev/null
+++ b/src/components/AppDevtools.tsx
@@ -0,0 +1,26 @@
+import { useRouter } from '@tanstack/react-router'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+
+export function AppDevtools() {
+  const router = useRouter()
+
+  return (
+    <TanStackDevtools
+      config={{
+        customTrigger: <span className="hidden" aria-hidden="true" />,
+      }}
+      plugins={[
+        {
+          name: 'TanStack Query',
+          render: <ReactQueryDevtoolsPanel />,
+        },
+        {
+          name: 'TanStack Router',
+          render: <TanStackRouterDevtoolsPanel router={router} />,
+        },
+      ]}
+    />
+  )
+}
diff --git a/src/components/ApplicationStarter.tsx b/src/components/ApplicationStarter.tsx
new file mode 100644
index 000000000..d1e8fdc1f
--- /dev/null
+++ b/src/components/ApplicationStarter.tsx
@@ -0,0 +1,1262 @@
+import * as React from 'react'
+import { ClientOnly } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  Check,
+  ChevronDown,
+  Copy,
+  Download,
+  Loader2,
+  Rocket,
+} from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import anthropicDarkLogo from '~/images/anthropic-dark.svg'
+import anthropicLightLogo from '~/images/anthropic-light.svg'
+import openaiDarkLogo from '~/images/openai-dark.svg'
+import openaiLightLogo from '~/images/openai-light.svg'
+import type {
+  ApplicationStarterContext,
+  ApplicationStarterResult,
+} from '~/utils/application-starter'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '~/components/Collapsible'
+import {
+  GeneratedPromptPreviewBody,
+  GeneratedPromptPreviewHeader,
+  StarterChipButton,
+  StarterLibraryRows,
+  StarterPartnerRows,
+  StarterTooltipProvider,
+} from '~/components/application-builder/parts'
+import {
+  buildStarterPromptDeployUrl,
+  toneClasses,
+  type ApplicationStarterBuilderIntegration,
+  type StarterPromptDeployProvider,
+  type StarterTone,
+} from '~/components/application-builder/shared'
+import { useApplicationBuilder } from '~/components/application-builder/useApplicationBuilder'
+import { Button, GitHub } from '~/ui'
+
+export interface ApplicationStarterProps {
+  builderIntegration?: ApplicationStarterBuilderIntegration
+  className?: string
+  context: ApplicationStarterContext
+  footerContent?: React.ReactNode
+  enableHotkeys?: boolean
+  forceRouterOnly?: boolean
+  formId?: string
+  headerAction?: React.ReactNode
+  mode?: 'compact' | 'full'
+  onDirtyStateChange?: (dirty: boolean) => void
+  onResolvedResult?: (result: ApplicationStarterResult | null) => void
+  primaryActionLabel?: string
+  revealOptionsImmediately?: boolean
+  secondaryActionLabel?: string
+  showCliExportActions?: boolean
+  showPromptPreview?: boolean
+  suggestionContext?: ApplicationStarterContext
+  submitButton?: React.ReactNode
+  title?: React.ReactNode
+  tone?: StarterTone
+}
+
+const LazyApplicationStarterHotkeys = React.lazy(() =>
+  import('~/components/ApplicationStarterHotkeys.client').then((m) => ({
+    default: m.ApplicationStarterHotkeys,
+  })),
+)
+
+const LazyDeployDialog = React.lazy(() =>
+  import('~/components/builder/DeployDialog').then((m) => ({
+    default: m.DeployDialog,
+  })),
+)
+
+const starterPackageManagers = ['pnpm', 'npm', 'yarn', 'bun'] as const
+const starterToolchains = ['biome', 'eslint'] as const
+
+type HostingDeployPartnerId = 'cloudflare' | 'lovable' | 'netlify' | 'railway'
+type StarterTransientAction =
+  | 'claude'
+  | 'clone'
+  | 'codex'
+  | 'cursor'
+  | 'deploy'
+  | 'download'
+  | 'netlify'
+
+const hostingDeployPartnerLabels: Record<HostingDeployPartnerId, string> = {
+  cloudflare: 'Cloudflare',
+  lovable: 'Lovable',
+  netlify: 'Netlify',
+  railway: 'Railway',
+}
+
+function getHostingDeployPartnerId(
+  partnerId: string,
+): HostingDeployPartnerId | undefined {
+  switch (partnerId) {
+    case 'cloudflare':
+    case 'lovable':
+    case 'netlify':
+    case 'railway':
+      return partnerId
+    default:
+      return undefined
+  }
+}
+
+function getPromptDeployProvider(
+  partnerId: HostingDeployPartnerId,
+): StarterPromptDeployProvider | undefined {
+  switch (partnerId) {
+    case 'lovable':
+    case 'netlify':
+      return partnerId
+    case 'cloudflare':
+    case 'railway':
+      return undefined
+  }
+}
+
+function buildCodexStartUrl(prompt: string) {
+  return `codex://new?prompt=${encodeURIComponent(prompt)}`
+}
+
+function buildClaudeStartUrl(prompt: string) {
+  return `https://claude.ai/code?q=${encodeURIComponent(prompt)}`
+}
+
+function buildCursorStartUrl(prompt: string) {
+  return `cursor://anysphere.cursor-deeplink/prompt?text=${encodeURIComponent(prompt)}`
+}
+
+export function ApplicationStarter({
+  builderIntegration,
+  className,
+  context,
+  footerContent,
+  enableHotkeys = false,
+  forceRouterOnly = false,
+  formId,
+  headerAction,
+  mode = 'full',
+  onDirtyStateChange,
+  onResolvedResult,
+  primaryActionLabel = 'Copy Prompt',
+  revealOptionsImmediately = false,
+  secondaryActionLabel = 'Build with Netlify',
+  showCliExportActions = true,
+  showPromptPreview = true,
+  suggestionContext,
+  submitButton,
+  title = 'What would you like to build?',
+  tone = 'cyan',
+}: ApplicationStarterProps) {
+  const {
+    copiedKind,
+    copyResultValue,
+    dismissPromptCopyNotice,
+    deployDialogProvider,
+    generatePrompt,
+    hasGeneratedPrompt,
+    hasRevealedOptions,
+    hasInput,
+    hasMigrationRepositoryUrlError,
+    input,
+    isDeployDialogOpen,
+    isGenerating,
+    isGeneratingPrompt,
+    isModHeld,
+    loadingPhrase,
+    migrationRepositoryInputRef,
+    migrationRepositoryUrl,
+    openDeployDialog,
+    partnerSuggestions,
+    promptCopyNotice,
+    result,
+    selectSuggestion,
+    selectedPackageManager,
+    selectedLibraries,
+    selectedPartners,
+    selectedToolchain,
+    setIsDeployDialogOpen,
+    setIsModHeld,
+    showMigrationRepositoryInput,
+    trackActivation,
+    submitCurrentInput,
+    suggestions,
+    toggleLibrary,
+    togglePackageManager,
+    togglePartner,
+    toggleToolchain,
+    updateInput,
+    updateMigrationRepositoryUrl,
+  } = useApplicationBuilder({
+    builderIntegration,
+    context,
+    forceRouterOnly,
+    mode,
+    onDirtyStateChange,
+    onResolvedResult,
+    revealOptionsImmediately,
+    suggestionContext,
+  })
+
+  const palette = toneClasses[tone]
+  const compact = mode === 'compact'
+  const [showMoreActions, setShowMoreActions] = React.useState(false)
+  const [pendingHostingDeployPartner, setPendingHostingDeployPartner] =
+    React.useState<HostingDeployPartnerId | null>(null)
+  const [transientAction, setTransientAction] =
+    React.useState<StarterTransientAction | null>(null)
+  const [hasFocusedPromptInput, setHasFocusedPromptInput] =
+    React.useState(false)
+  const [isPromptFocused, setIsPromptFocused] = React.useState(false)
+  const [isMacShortcutPlatform, setIsMacShortcutPlatform] =
+    React.useState(false)
+  const [showPackageManagerOptions, setShowPackageManagerOptions] =
+    React.useState(false)
+  const [showToolchainOptions, setShowToolchainOptions] = React.useState(false)
+  const canRevealOptions =
+    hasInput && !hasMigrationRepositoryUrlError && !isGenerating
+  const canUseFinalActions =
+    hasRevealedOptions &&
+    hasInput &&
+    !hasMigrationRepositoryUrlError &&
+    !isGenerating
+  const transientActionTimerRef = React.useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null)
+  const showTransientActionFeedback = React.useCallback(
+    (action: StarterTransientAction) => {
+      if (transientActionTimerRef.current) {
+        clearTimeout(transientActionTimerRef.current)
+      }
+
+      setTransientAction(action)
+      transientActionTimerRef.current = setTimeout(() => {
+        setTransientAction((current) => (current === action ? null : current))
+        transientActionTimerRef.current = null
+      }, 1800)
+    },
+    [],
+  )
+  const selectedHostingDeployPartner = React.useMemo(
+    () =>
+      selectedPartners.flatMap((partnerId) => {
+        const hostingPartnerId = getHostingDeployPartnerId(partnerId)
+
+        return hostingPartnerId ? [hostingPartnerId] : []
+      })[0],
+    [selectedPartners],
+  )
+  const isSelectedHostingDeployPending =
+    pendingHostingDeployPartner !== null &&
+    pendingHostingDeployPartner === selectedHostingDeployPartner
+  const isDeployFeedbackActive =
+    isSelectedHostingDeployPending || transientAction === 'deploy'
+  const isPromptCopied = copiedKind === 'prompt'
+  const isCommandCopied = copiedKind === 'command'
+  const resultPrompt = result?.prompt
+  const selectedPromptDeployProvider = selectedHostingDeployPartner
+    ? getPromptDeployProvider(selectedHostingDeployPartner)
+    : undefined
+  const selectedHostingDeployHref = React.useMemo(
+    () =>
+      selectedPromptDeployProvider && result?.prompt
+        ? buildStarterPromptDeployUrl(
+            selectedPromptDeployProvider,
+            result.prompt,
+          )
+        : undefined,
+    [result?.prompt, selectedPromptDeployProvider],
+  )
+  const netlifyStartHref = React.useMemo(
+    () =>
+      resultPrompt
+        ? buildStarterPromptDeployUrl('netlify', resultPrompt)
+        : undefined,
+    [resultPrompt],
+  )
+  const codexStartHref = React.useMemo(
+    () => (resultPrompt ? buildCodexStartUrl(resultPrompt) : undefined),
+    [resultPrompt],
+  )
+  const claudeStartHref = React.useMemo(
+    () => (resultPrompt ? buildClaudeStartUrl(resultPrompt) : undefined),
+    [resultPrompt],
+  )
+  const cursorStartHref = React.useMemo(
+    () => (resultPrompt ? buildCursorStartUrl(resultPrompt) : undefined),
+    [resultPrompt],
+  )
+  const downloadHref = result?.downloadUrl
+  const trackSelectedHostingDeployLink = React.useCallback(() => {
+    if (!selectedHostingDeployPartner) {
+      return
+    }
+
+    trackActivation({
+      action:
+        selectedHostingDeployPartner === 'netlify' ? 'netlify_start' : 'deploy',
+      surface: 'result_panel',
+      provider: selectedHostingDeployPartner,
+    })
+  }, [selectedHostingDeployPartner, trackActivation])
+  const deployToSelectedHostingPartner = async () => {
+    if (!selectedHostingDeployPartner) {
+      return
+    }
+
+    setPendingHostingDeployPartner(selectedHostingDeployPartner)
+
+    try {
+      switch (selectedHostingDeployPartner) {
+        case 'cloudflare':
+          await openDeployDialog('cloudflare')
+          break
+        case 'lovable':
+          break
+        case 'netlify':
+          break
+        case 'railway':
+          await openDeployDialog('railway')
+          break
+      }
+    } finally {
+      setPendingHostingDeployPartner(null)
+    }
+  }
+  const renderCopyPromptButton = () => (
+    <Button
+      color="emerald"
+      variant={selectedHostingDeployPartner ? 'secondary' : 'primary'}
+      size="sm"
+      type="button"
+      onClick={() => void generatePrompt()}
+      disabled={!canUseFinalActions}
+    >
+      {isGeneratingPrompt ? (
+        <Loader2 className="h-4 w-4 animate-spin" />
+      ) : isPromptCopied ? (
+        <Check className="h-4 w-4" />
+      ) : (
+        <Copy className="h-4 w-4" />
+      )}
+      {isGeneratingPrompt
+        ? loadingPhrase
+        : isPromptCopied
+          ? 'Copied'
+          : primaryActionLabel}
+    </Button>
+  )
+  const renderCopyCliCommandButton = () => (
+    <Button
+      variant="secondary"
+      size="sm"
+      type="button"
+      onClick={() => {
+        void copyResultValue('command')
+      }}
+      disabled={!canUseFinalActions}
+    >
+      {isGeneratingPrompt ? (
+        <Loader2 className="h-4 w-4 animate-spin" />
+      ) : isCommandCopied ? (
+        <Check className="h-4 w-4" />
+      ) : (
+        <Copy className="h-4 w-4" />
+      )}
+      {isGeneratingPrompt
+        ? 'Preparing...'
+        : isCommandCopied
+          ? 'Copied'
+          : 'Copy CLI Command'}
+    </Button>
+  )
+  const renderActionAnchor = ({
+    action,
+    className,
+    href,
+    icon,
+    label,
+    onTrack,
+    rel = 'noopener noreferrer',
+    size,
+    target = '_blank',
+    variant = 'primary',
+  }: {
+    action: StarterTransientAction
+    className?: string
+    href?: string
+    icon: React.ReactNode
+    label: string
+    onTrack: () => void
+    rel?: string
+    size: 'xs' | 'sm'
+    target?: string
+    variant?: 'primary' | 'secondary'
+  }) => {
+    const disabled = !canUseFinalActions || !href || transientAction === action
+    const waitingForHref = !href
+
+    return (
+      <Button
+        as="a"
+        variant={variant}
+        size={size}
+        href={disabled ? undefined : href}
+        target={target}
+        rel={rel}
+        aria-disabled={disabled}
+        tabIndex={disabled ? -1 : undefined}
+        onClick={(event) => {
+          if (disabled) {
+            event.preventDefault()
+            return
+          }
+
+          onTrack()
+          showTransientActionFeedback(action)
+        }}
+        className={twMerge(
+          className,
+          disabled && 'pointer-events-none opacity-50',
+        )}
+      >
+        {transientAction === action || waitingForHref ? (
+          <Loader2
+            className={twMerge(
+              'animate-spin',
+              size === 'xs' ? 'h-3 w-3' : 'h-4 w-4',
+            )}
+          />
+        ) : (
+          icon
+        )}
+        {transientAction === action
+          ? 'Opening...'
+          : waitingForHref
+            ? 'Preparing...'
+            : label}
+      </Button>
+    )
+  }
+  const renderSelectedHostingDeployButton = () => {
+    if (!selectedHostingDeployPartner) {
+      return null
+    }
+
+    if (selectedPromptDeployProvider) {
+      const disabled =
+        !canUseFinalActions ||
+        !selectedHostingDeployHref ||
+        transientAction === 'deploy'
+      const waitingForHref = !selectedHostingDeployHref
+
+      return (
+        <Button
+          as="a"
+          color="emerald"
+          variant="primary"
+          size="sm"
+          href={disabled ? undefined : selectedHostingDeployHref}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-disabled={disabled}
+          tabIndex={disabled ? -1 : undefined}
+          onClick={(event) => {
+            if (disabled) {
+              event.preventDefault()
+              return
+            }
+
+            trackSelectedHostingDeployLink()
+            showTransientActionFeedback('deploy')
+          }}
+          className={disabled ? 'pointer-events-none opacity-50' : undefined}
+          aria-label={`Deploy to ${hostingDeployPartnerLabels[selectedHostingDeployPartner]}`}
+        >
+          {isDeployFeedbackActive || waitingForHref ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Rocket className="h-4 w-4" />
+          )}
+          {isDeployFeedbackActive
+            ? 'Opening...'
+            : waitingForHref
+              ? 'Preparing...'
+              : 'Deploy'}
+        </Button>
+      )
+    }
+
+    return (
+      <Button
+        color="emerald"
+        variant="primary"
+        size="sm"
+        type="button"
+        onClick={() => {
+          showTransientActionFeedback('deploy')
+          void deployToSelectedHostingPartner()
+        }}
+        disabled={
+          !canUseFinalActions ||
+          pendingHostingDeployPartner !== null ||
+          transientAction === 'deploy'
+        }
+        aria-label={`Deploy to ${hostingDeployPartnerLabels[selectedHostingDeployPartner]}`}
+      >
+        {isDeployFeedbackActive ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : (
+          <Rocket className="h-4 w-4" />
+        )}
+        {isDeployFeedbackActive ? 'Opening...' : 'Deploy'}
+      </Button>
+    )
+  }
+  const showOptionsSection = hasRevealedOptions || hasGeneratedPrompt
+  const showActionSection = hasRevealedOptions || hasGeneratedPrompt
+
+  React.useEffect(() => {
+    return () => {
+      if (transientActionTimerRef.current) {
+        clearTimeout(transientActionTimerRef.current)
+      }
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (typeof navigator === 'undefined') {
+      return
+    }
+
+    setIsMacShortcutPlatform(/Mac|iPhone|iPad|iPod/i.test(navigator.platform))
+  }, [])
+
+  return (
+    <div className={twMerge('relative', className)}>
+      {enableHotkeys && !compact && hasFocusedPromptInput ? (
+        <ClientOnly>
+          <React.Suspense fallback={null}>
+            <LazyApplicationStarterHotkeys
+              onSubmit={() => {
+                if (showActionSection) {
+                  void generatePrompt()
+                } else {
+                  void submitCurrentInput()
+                }
+              }}
+              onModKeyChange={setIsModHeld}
+              promptFocused={isPromptFocused}
+            />
+          </React.Suspense>
+        </ClientOnly>
+      ) : null}
+
+      {isDeployDialogOpen ? (
+        <React.Suspense fallback={null}>
+          <LazyDeployDialog
+            isOpen={isDeployDialogOpen}
+            onClose={() => setIsDeployDialogOpen(false)}
+            provider={deployDialogProvider}
+            starterRecipe={result?.recipe ?? null}
+            onTrackActivation={trackActivation}
+          />
+        </React.Suspense>
+      ) : null}
+
+      <div className="relative">
+        {compact ? (
+          <div className="space-y-2">
+            <h3
+              className={twMerge(
+                'font-semibold tracking-[-0.03em] text-gray-950 dark:text-white',
+                'text-base tracking-[-0.02em]',
+              )}
+            >
+              {title}
+            </h3>
+          </div>
+        ) : null}
+
+        <form
+          id={formId}
+          className={twMerge('space-y-3', compact ? 'mt-3' : 'mt-0')}
+          onSubmit={async (event) => {
+            event.preventDefault()
+            await submitCurrentInput()
+          }}
+        >
+          {compact ? (
+            <>
+              <div className="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-950">
+                <div className="border-b border-gray-200 px-3 py-2 dark:border-gray-800">
+                  <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                    Ideas
+                  </div>
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    {suggestions.map((suggestion) => (
+                      <StarterChipButton
+                        key={suggestion.label}
+                        compact
+                        onClick={() => {
+                          void selectSuggestion({ suggestion })
+                        }}
+                        palette={palette}
+                        selected={input === suggestion.input}
+                      >
+                        {suggestion.label}
+                      </StarterChipButton>
+                    ))}
+                  </div>
+                </div>
+
+                {showMigrationRepositoryInput ? (
+                  <div className="border-b border-gray-200 px-3 py-2 dark:border-gray-800">
+                    <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                      Existing Repository URL
+                    </div>
+                    <input
+                      ref={migrationRepositoryInputRef}
+                      type="text"
+                      value={migrationRepositoryUrl}
+                      onChange={(event) => {
+                        updateMigrationRepositoryUrl(event.target.value)
+                      }}
+                      placeholder="https://github.com/acme/legacy-next-app"
+                      className={twMerge(
+                        'mt-2 h-9 w-full rounded-md border border-gray-200 bg-white px-3 text-xs text-gray-900 outline-none transition-colors placeholder:text-gray-400 dark:border-gray-800 dark:bg-gray-950 dark:text-white dark:placeholder:text-gray-500',
+                        palette.ring,
+                        hasMigrationRepositoryUrlError &&
+                          'border-red-300 dark:border-red-800',
+                      )}
+                    />
+                    {hasMigrationRepositoryUrlError ? (
+                      <div className="mt-2 text-[11px] text-red-600 dark:text-red-400">
+                        Enter a valid Git or GitHub repository URL.
+                      </div>
+                    ) : null}
+                  </div>
+                ) : null}
+
+                <div className="relative">
+                  <div className="px-3 pt-2 text-[10px] font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                    Prompt
+                  </div>
+                  <textarea
+                    value={input}
+                    onChange={(event) => {
+                      updateInput(event.target.value)
+                    }}
+                    onFocus={() => {
+                      setHasFocusedPromptInput(true)
+                      setIsPromptFocused(true)
+                    }}
+                    onBlur={() => {
+                      setIsPromptFocused(false)
+                    }}
+                    rows={3}
+                    placeholder="Build a SaaS app with auth, Postgres, nested routes, and Sentry. Use pnpm and deploy to Cloudflare."
+                    className={twMerge(
+                      'w-full min-h-20 bg-transparent px-3 pb-2 pt-1 text-xs leading-5 text-gray-900 outline-none transition-colors dark:text-white',
+                      palette.ring,
+                    )}
+                  />
+                </div>
+
+                {!showOptionsSection ? (
+                  <div className="border-t border-gray-200 px-3 py-2 dark:border-gray-800">
+                    <Button
+                      color="emerald"
+                      className="pr-1"
+                      size="xs"
+                      type="submit"
+                      disabled={!canRevealOptions}
+                    >
+                      <ArrowRight className="h-4 w-4" />
+                      Next
+                      {enableHotkeys ? (
+                        <SubmitShortcutHint isMac={isMacShortcutPlatform} />
+                      ) : null}
+                    </Button>
+                  </div>
+                ) : null}
+              </div>
+
+              <Collapsible open={showOptionsSection}>
+                <CollapsibleContent className="mt-3">
+                  {showOptionsSection ? (
+                    <StarterTooltipProvider>
+                      <div className="space-y-2 rounded-lg border border-gray-200 bg-white px-3 py-3 dark:border-gray-800 dark:bg-gray-950">
+                        <div className="mb-3">
+                          <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                            TanStack Libraries
+                          </div>
+
+                          <div className="mt-2 space-y-2">
+                            <StarterLibraryRows
+                              compact
+                              selectedLibraries={selectedLibraries}
+                              toggleLibrary={toggleLibrary}
+                            />
+                          </div>
+                        </div>
+
+                        <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                          Partner Integrations
+                        </div>
+                        <StarterPartnerRows
+                          compact
+                          palette={palette}
+                          partnerSuggestions={partnerSuggestions}
+                          selectedPartners={selectedPartners}
+                          togglePartner={togglePartner}
+                        />
+                        <StarterCustomizationSection
+                          compact
+                          onOpenChange={setShowToolchainOptions}
+                          open={showToolchainOptions}
+                          title="Toolchain"
+                        >
+                          <div className="mt-2 flex flex-wrap gap-2">
+                            {starterToolchains.map((toolchain) => (
+                              <StarterChipButton
+                                key={toolchain}
+                                compact
+                                onClick={() => {
+                                  toggleToolchain(toolchain)
+                                }}
+                                palette={palette}
+                                selected={selectedToolchain === toolchain}
+                              >
+                                {toolchain}
+                              </StarterChipButton>
+                            ))}
+                          </div>
+                        </StarterCustomizationSection>
+                        <StarterCustomizationSection
+                          compact
+                          onOpenChange={setShowPackageManagerOptions}
+                          open={showPackageManagerOptions}
+                          title="Package Manager"
+                        >
+                          <div className="mt-2 flex flex-wrap gap-2">
+                            {starterPackageManagers.map((packageManager) => (
+                              <StarterChipButton
+                                key={packageManager}
+                                compact
+                                onClick={() => {
+                                  togglePackageManager(packageManager)
+                                }}
+                                palette={palette}
+                                selected={
+                                  selectedPackageManager === packageManager
+                                }
+                              >
+                                {packageManager}
+                              </StarterChipButton>
+                            ))}
+                          </div>
+                        </StarterCustomizationSection>
+                      </div>
+                    </StarterTooltipProvider>
+                  ) : null}
+                </CollapsibleContent>
+              </Collapsible>
+            </>
+          ) : (
+            <div className="relative overflow-hidden rounded-[1rem] border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-950">
+              <div>
+                <div className="border-b border-gray-200 bg-gray-50/70 px-5 py-4 dark:border-gray-800 dark:bg-gray-900/50">
+                  <div className="flex items-center justify-between gap-3">
+                    <h3 className="font-semibold tracking-[-0.04em] text-[1.375rem] md:text-[1.5rem] text-gray-950 dark:text-white">
+                      {title}
+                    </h3>
+                    {headerAction ? (
+                      <div className="shrink-0">{headerAction}</div>
+                    ) : null}
+                  </div>
+                  <div className="mt-4 flex flex-wrap gap-2">
+                    {suggestions.map((suggestion) => (
+                      <StarterChipButton
+                        key={suggestion.label}
+                        onClick={() => {
+                          void selectSuggestion({ suggestion })
+                        }}
+                        palette={palette}
+                        selected={input === suggestion.input}
+                      >
+                        {suggestion.label}
+                      </StarterChipButton>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="relative border-b border-gray-200 dark:border-gray-800">
+                  {showMigrationRepositoryInput ? (
+                    <div className="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
+                      <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                        Existing Repository URL
+                      </div>
+                      <input
+                        ref={migrationRepositoryInputRef}
+                        type="text"
+                        value={migrationRepositoryUrl}
+                        onChange={(event) => {
+                          updateMigrationRepositoryUrl(event.target.value)
+                        }}
+                        placeholder="https://github.com/acme/legacy-next-app"
+                        className={twMerge(
+                          'mt-3 h-10 w-full rounded-lg border border-gray-200 bg-white px-3 text-sm text-gray-900 outline-none transition-colors placeholder:text-gray-400 dark:border-gray-800 dark:bg-gray-950 dark:text-white dark:placeholder:text-gray-500',
+                          palette.ring,
+                          hasMigrationRepositoryUrlError &&
+                            'border-red-300 dark:border-red-800',
+                        )}
+                      />
+                      {hasMigrationRepositoryUrlError ? (
+                        <div className="mt-2 text-xs text-red-600 dark:text-red-400">
+                          Enter a valid Git or GitHub repository URL.
+                        </div>
+                      ) : null}
+                    </div>
+                  ) : null}
+
+                  <div className="px-5 pt-4 text-[10px] font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                    Prompt
+                  </div>
+                  <textarea
+                    value={input}
+                    onChange={(event) => {
+                      updateInput(event.target.value)
+                    }}
+                    onFocus={() => {
+                      setHasFocusedPromptInput(true)
+                      setIsPromptFocused(true)
+                    }}
+                    onBlur={() => {
+                      setIsPromptFocused(false)
+                    }}
+                    onClick={(event) => {
+                      if (enableHotkeys && isModHeld) {
+                        event.preventDefault()
+                        if (showActionSection) {
+                          void generatePrompt()
+                        } else {
+                          void submitCurrentInput()
+                        }
+                      }
+                    }}
+                    rows={4}
+                    placeholder="Build a SaaS app with auth, Postgres, nested routes, and Sentry. Use pnpm and deploy to Cloudflare."
+                    className={twMerge(
+                      'w-full min-h-28 bg-transparent px-5 pb-4 pt-1 text-sm leading-6 text-gray-900 outline-none transition-colors dark:text-white',
+                      palette.ring,
+                    )}
+                  />
+
+                  {!showActionSection ? (
+                    <div className="border-t border-gray-200 px-5 py-4 dark:border-gray-800">
+                      <div className="flex flex-wrap items-center gap-3">
+                        <Button
+                          color="emerald"
+                          className="pr-1.5"
+                          size="sm"
+                          type="submit"
+                          disabled={!canRevealOptions}
+                        >
+                          <ArrowRight className="h-4 w-4" />
+                          Next
+                          {enableHotkeys ? (
+                            <SubmitShortcutHint isMac={isMacShortcutPlatform} />
+                          ) : null}
+                        </Button>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+
+                <Collapsible open={showOptionsSection}>
+                  <CollapsibleContent>
+                    {showOptionsSection ? (
+                      <div className="bg-gray-50/70 px-5 py-4 dark:bg-gray-900/50">
+                        <StarterTooltipProvider>
+                          <div>
+                            <div className="mb-4">
+                              <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                                TanStack Libraries
+                              </div>
+
+                              <div className="mt-3 space-y-2.5">
+                                <StarterLibraryRows
+                                  selectedLibraries={selectedLibraries}
+                                  toggleLibrary={toggleLibrary}
+                                />
+                              </div>
+                            </div>
+
+                            <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                              Add Integrations
+                            </div>
+                            <div className="mt-3">
+                              <StarterPartnerRows
+                                palette={palette}
+                                partnerSuggestions={partnerSuggestions}
+                                selectedPartners={selectedPartners}
+                                size="compact"
+                                togglePartner={togglePartner}
+                              />
+                            </div>
+                            <StarterCustomizationSection
+                              onOpenChange={setShowToolchainOptions}
+                              open={showToolchainOptions}
+                              title="Toolchain"
+                            >
+                              <div className="mt-3 flex flex-wrap gap-2">
+                                {starterToolchains.map((toolchain) => (
+                                  <StarterChipButton
+                                    key={toolchain}
+                                    onClick={() => {
+                                      toggleToolchain(toolchain)
+                                    }}
+                                    palette={palette}
+                                    selected={selectedToolchain === toolchain}
+                                    size="compact"
+                                  >
+                                    {toolchain}
+                                  </StarterChipButton>
+                                ))}
+                              </div>
+                            </StarterCustomizationSection>
+                            <StarterCustomizationSection
+                              onOpenChange={setShowPackageManagerOptions}
+                              open={showPackageManagerOptions}
+                              title="Package Manager"
+                            >
+                              <div className="mt-3 flex flex-wrap gap-2">
+                                {starterPackageManagers.map(
+                                  (packageManager) => (
+                                    <StarterChipButton
+                                      key={packageManager}
+                                      onClick={() => {
+                                        togglePackageManager(packageManager)
+                                      }}
+                                      palette={palette}
+                                      selected={
+                                        selectedPackageManager ===
+                                        packageManager
+                                      }
+                                      size="compact"
+                                    >
+                                      {packageManager}
+                                    </StarterChipButton>
+                                  ),
+                                )}
+                              </div>
+                            </StarterCustomizationSection>
+                          </div>
+                        </StarterTooltipProvider>
+
+                        {footerContent ? (
+                          <div className="mt-4">{footerContent}</div>
+                        ) : null}
+                      </div>
+                    ) : null}
+                  </CollapsibleContent>
+                </Collapsible>
+
+                <Collapsible open={showActionSection}>
+                  <CollapsibleContent>
+                    {showActionSection ? (
+                      <div className="bg-gray-50/70 px-5 py-4 dark:bg-gray-900/50">
+                        <div className="flex flex-col gap-4">
+                          {!showCliExportActions ? (
+                            <div className="flex flex-wrap items-center gap-3">
+                              {!selectedHostingDeployPartner
+                                ? renderActionAnchor({
+                                    action: 'netlify',
+                                    className:
+                                      'border-[#00AD9F] bg-[#00AD9F] text-white hover:bg-[#009a8e]',
+                                    href: netlifyStartHref,
+                                    icon: <Rocket className="h-4 w-4" />,
+                                    label: secondaryActionLabel,
+                                    onTrack: () => {
+                                      trackActivation({
+                                        action: 'netlify_start',
+                                        surface: 'result_panel',
+                                        provider: 'netlify',
+                                      })
+                                    },
+                                    size: 'sm',
+                                  })
+                                : null}
+
+                              {renderActionAnchor({
+                                action: 'codex',
+                                className:
+                                  'border-gray-900 bg-gray-900 text-white hover:bg-gray-800 dark:border-gray-100 dark:bg-gray-100 dark:text-gray-950 dark:hover:bg-gray-200',
+                                href: codexStartHref,
+                                icon: (
+                                  <span className="relative h-4 w-4 shrink-0">
+                                    <img
+                                      src={openaiDarkLogo}
+                                      alt=""
+                                      aria-hidden="true"
+                                      className="h-4 w-4 dark:hidden"
+                                    />
+                                    <img
+                                      src={openaiLightLogo}
+                                      alt=""
+                                      aria-hidden="true"
+                                      className="hidden h-4 w-4 dark:block"
+                                    />
+                                  </span>
+                                ),
+                                label: 'Open in Codex',
+                                onTrack: () => {
+                                  trackActivation({
+                                    action: 'open_codex',
+                                    surface: 'result_panel',
+                                  })
+                                },
+                                size: 'sm',
+                              })}
+                            </div>
+                          ) : null}
+
+                          <div className="flex flex-wrap items-center gap-3">
+                            {renderSelectedHostingDeployButton()}
+                            {renderCopyPromptButton()}
+                            {showCliExportActions
+                              ? renderCopyCliCommandButton()
+                              : null}
+                          </div>
+
+                          {showCliExportActions && !showMoreActions ? (
+                            <div className="flex flex-wrap items-center gap-3">
+                              <Button
+                                variant="ghost"
+                                size="xs"
+                                type="button"
+                                onClick={() => setShowMoreActions(true)}
+                                className="h-auto border-transparent bg-transparent px-1 py-0 text-[11px] font-medium text-gray-500 hover:bg-transparent hover:text-gray-700 dark:text-gray-500 dark:hover:bg-transparent dark:hover:text-gray-300"
+                              >
+                                Show More
+                              </Button>
+                            </div>
+                          ) : null}
+
+                          {showCliExportActions && showMoreActions ? (
+                            <div className="flex flex-wrap items-center gap-2">
+                              {renderActionAnchor({
+                                action: 'codex',
+                                className:
+                                  'h-6 gap-1 px-2 text-[11px] border-gray-900 bg-gray-900 text-white hover:bg-gray-800 dark:border-gray-100 dark:bg-gray-100 dark:text-gray-950 dark:hover:bg-gray-200',
+                                href: codexStartHref,
+                                icon: (
+                                  <span className="relative h-3 w-3 shrink-0">
+                                    <img
+                                      src={openaiDarkLogo}
+                                      alt=""
+                                      aria-hidden="true"
+                                      className="h-3 w-3 dark:hidden"
+                                    />
+                                    <img
+                                      src={openaiLightLogo}
+                                      alt=""
+                                      aria-hidden="true"
+                                      className="hidden h-3 w-3 dark:block"
+                                    />
+                                  </span>
+                                ),
+                                label: 'Open in Codex',
+                                onTrack: () => {
+                                  trackActivation({
+                                    action: 'open_codex',
+                                    surface: 'result_panel',
+                                  })
+                                },
+                                size: 'xs',
+                              })}
+
+                              {renderActionAnchor({
+                                action: 'claude',
+                                className:
+                                  'h-6 gap-1 px-2 text-[11px] border-[#D4A373] bg-[#D4A373] text-white hover:bg-[#C6905C] dark:border-[#E6C49A] dark:bg-[#E6C49A] dark:text-gray-950 dark:hover:bg-[#DBB684]',
+                                href: claudeStartHref,
+                                icon: (
+                                  <span className="relative h-3 w-3 shrink-0">
+                                    <img
+                                      src={anthropicDarkLogo}
+                                      alt=""
+                                      aria-hidden="true"
+                                      className="h-3 w-3 dark:hidden"
+                                    />
+                                    <img
+                                      src={anthropicLightLogo}
+                                      alt=""
+                                      aria-hidden="true"
+                                      className="hidden h-3 w-3 dark:block"
+                                    />
+                                  </span>
+                                ),
+                                label: 'Open in Claude',
+                                onTrack: () => {
+                                  trackActivation({
+                                    action: 'open_claude',
+                                    surface: 'result_panel',
+                                  })
+                                },
+                                size: 'xs',
+                              })}
+
+                              {renderActionAnchor({
+                                action: 'cursor',
+                                className:
+                                  'h-6 gap-1 px-2 text-[11px] border-black bg-black text-white hover:bg-gray-900 dark:border-white dark:bg-white dark:text-black dark:hover:bg-gray-100',
+                                href: cursorStartHref,
+                                icon: <CursorIcon className="h-3 w-3" />,
+                                label: 'Open in Cursor',
+                                onTrack: () => {
+                                  trackActivation({
+                                    action: 'open_cursor',
+                                    surface: 'result_panel',
+                                  })
+                                },
+                                size: 'xs',
+                              })}
+
+                              <Button
+                                variant="secondary"
+                                size="xs"
+                                type="button"
+                                onClick={() => {
+                                  showTransientActionFeedback('clone')
+                                  void openDeployDialog(null)
+                                }}
+                                disabled={
+                                  !canUseFinalActions ||
+                                  transientAction === 'clone'
+                                }
+                                className="h-6 gap-1 px-2 text-[11px]"
+                              >
+                                {transientAction === 'clone' ? (
+                                  <Loader2 className="h-3 w-3 animate-spin" />
+                                ) : (
+                                  <GitHub className="h-3 w-3" />
+                                )}
+                                {transientAction === 'clone'
+                                  ? 'Opening...'
+                                  : 'Clone to GitHub'}
+                              </Button>
+
+                              {renderActionAnchor({
+                                action: 'download',
+                                className: 'h-6 gap-1 px-2 text-[11px]',
+                                href: downloadHref,
+                                icon: <Download className="h-3 w-3" />,
+                                label: 'Download ZIP',
+                                onTrack: () => {
+                                  trackActivation({
+                                    action: 'download',
+                                    surface: 'result_panel',
+                                  })
+                                },
+                                size: 'xs',
+                                variant: 'secondary',
+                              })}
+                            </div>
+                          ) : null}
+                        </div>
+                      </div>
+                    ) : null}
+                  </CollapsibleContent>
+                </Collapsible>
+
+                {showPromptPreview && hasGeneratedPrompt ? (
+                  <div className="border-t border-gray-200 dark:border-gray-800">
+                    <GeneratedPromptPreviewHeader
+                      copiedPrompt={copiedKind === 'prompt'}
+                      copyNotice={promptCopyNotice}
+                      onDismissCopyNotice={dismissPromptCopyNotice}
+                      onCopyPrompt={() => {
+                        void copyResultValue('prompt')
+                      }}
+                    />
+                    <GeneratedPromptPreviewBody prompt={result?.prompt ?? ''} />
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          )}
+
+          {compact ? submitButton : null}
+        </form>
+      </div>
+    </div>
+  )
+}
+
+function CursorIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className}>
+      <path d="M22.106 5.68 12.5.135a.998.998 0 0 0-.998 0L1.893 5.68a.84.84 0 0 0-.419.726v11.186c0 .3.16.577.42.727l9.607 5.547a.999.999 0 0 0 .998 0l9.608-5.547a.84.84 0 0 0 .42-.727V6.407a.84.84 0 0 0-.42-.726Zm-.603 1.176-9.275 16.064c-.063.108-.228.064-.228-.061V12.34a.59.59 0 0 0-.295-.51l-9.11-5.26c-.107-.062-.063-.228.062-.228h18.55c.264 0 .428.286.296.514Z" />
+    </svg>
+  )
+}
+
+function SubmitShortcutHint({ isMac }: { isMac: boolean }) {
+  return (
+    <span className="ml-1 inline-flex items-center gap-0.5">
+      <span className="inline-flex h-5 min-w-5 items-center justify-center rounded bg-white px-1 text-[10px] leading-none text-gray-950 dark:bg-gray-900 dark:text-white">
+        {isMac ? '⌘' : '⌃'}
+      </span>
+      <span className="inline-flex h-5 min-w-5 items-center justify-center rounded bg-white px-1 text-[10px] leading-none text-gray-950 dark:bg-gray-900 dark:text-white">
+        ↵
+      </span>
+    </span>
+  )
+}
+
+function StarterCustomizationSection({
+  children,
+  compact = false,
+  onOpenChange,
+  open,
+  title,
+}: {
+  children: React.ReactNode
+  compact?: boolean
+  onOpenChange: (open: boolean) => void
+  open: boolean
+  title: string
+}) {
+  return (
+    <Collapsible open={open} onOpenChange={onOpenChange}>
+      <div className={twMerge(compact ? 'pt-1' : 'pt-2')}>
+        <CollapsibleTrigger
+          className={twMerge(
+            'inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-[0.16em] text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300',
+            compact && 'text-[10px]',
+          )}
+        >
+          {title}
+          <ChevronDown
+            className={twMerge(
+              'h-3 w-3 transition-transform duration-200',
+              open && 'rotate-180',
+            )}
+          />
+        </CollapsibleTrigger>
+        <CollapsibleContent>{open ? children : null}</CollapsibleContent>
+      </div>
+    </Collapsible>
+  )
+}
diff --git a/src/components/ApplicationStarterHotkeys.client.tsx b/src/components/ApplicationStarterHotkeys.client.tsx
new file mode 100644
index 000000000..4bcf5f923
--- /dev/null
+++ b/src/components/ApplicationStarterHotkeys.client.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { useHeldKeys, useHotkey } from '@tanstack/react-hotkeys'
+
+interface ApplicationStarterHotkeysProps {
+  onSubmit: () => void
+  onModKeyChange: (isHeld: boolean) => void
+  promptFocused: boolean
+}
+
+export function ApplicationStarterHotkeys({
+  onSubmit,
+  onModKeyChange,
+  promptFocused,
+}: ApplicationStarterHotkeysProps) {
+  const heldKeys = useHeldKeys()
+  const isModHeld = heldKeys.includes('Meta') || heldKeys.includes('Control')
+
+  useHotkey('Mod+Enter', () => {
+    if (!promptFocused) {
+      return
+    }
+
+    onSubmit()
+  })
+
+  React.useEffect(() => {
+    onModKeyChange(isModHeld)
+    return () => onModKeyChange(false)
+  }, [isModHeld, onModKeyChange])
+
+  return null
+}
diff --git a/src/components/BackgroundGradient.tsx b/src/components/BackgroundGradient.tsx
index cfe0864f2..325e9f8aa 100644
--- a/src/components/BackgroundGradient.tsx
+++ b/src/components/BackgroundGradient.tsx
@@ -1,5 +1,5 @@
 import { twMerge } from 'tailwind-merge'
-import { useMatches, useParams } from '@tanstack/react-router'
+import { useLocation, useParams } from '@tanstack/react-router'
 import { findLibrary } from '~/libraries'
 
 export function BackgroundGradient() {
@@ -7,15 +7,13 @@ export function BackgroundGradient() {
     select: (p) => p.libraryId,
     strict: false,
   }) as string
-
-  const matches = useMatches()
+  const location = useLocation()
 
   if (!libraryId) {
-    const matchIndex = matches.findIndex((m) => m.routeId === '/_libraries')
-    const match = matches[matchIndex + 1]
-    if (match) {
-      // Route ID format: /_libraries/query/$version/ -> split gives ['', '_libraries', 'query', '$version', '']
-      libraryId = match.routeId.split('/')[2]
+    const pathnameLibraryId = location.pathname.split('/')[1]
+
+    if (pathnameLibraryId) {
+      libraryId = pathnameLibraryId
     }
   }
 
diff --git a/src/components/BlockWithFeedback.tsx b/src/components/BlockWithFeedback.tsx
index 06f49af81..b8d84a29c 100644
--- a/src/components/BlockWithFeedback.tsx
+++ b/src/components/BlockWithFeedback.tsx
@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge'
 import { DocFeedbackFloatingButton } from './DocFeedbackFloatingButton'
 import { DocFeedbackNote } from './DocFeedbackNote'
 import { useDocFeedbackRequired } from './DocFeedbackContext'
-import { getBlockIdentifier } from '~/utils/docFeedback.client'
+import { getBlockIdentifier } from '~/utils/docFeedback'
 
 interface BlockWithFeedbackProps {
   children: React.ReactNode
diff --git a/src/components/BlogAuthorFilter.tsx b/src/components/BlogAuthorFilter.tsx
new file mode 100644
index 000000000..cd3807f11
--- /dev/null
+++ b/src/components/BlogAuthorFilter.tsx
@@ -0,0 +1,133 @@
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownTrigger,
+} from '~/components/Dropdown'
+import { findMaintainerByAuthorName } from '~/utils/authors'
+import authorFallbackAvatar from '~/images/author-fallback.svg'
+
+function getAuthorAvatar(name: string): string {
+  return findMaintainerByAuthorName(name)?.avatar ?? authorFallbackAvatar
+}
+
+type BlogAuthorFilterProps = {
+  authors: string[]
+  selected: string | undefined
+  onSelect: (author: string | undefined) => void
+  className?: string
+}
+
+export function BlogAuthorFilter({
+  authors,
+  selected,
+  onSelect,
+  className,
+}: BlogAuthorFilterProps) {
+  // Ignore URL values that don't correspond to a real author in the list.
+  const activeAuthor =
+    selected && authors.includes(selected) ? selected : undefined
+
+  return (
+    <div className={twMerge('w-full', className)}>
+      <Dropdown>
+        <DropdownTrigger>
+          <button
+            type="button"
+            className={twMerge(
+              'relative w-full flex items-center gap-2 rounded-md py-1.5 px-2 text-left text-sm cursor-pointer transition-colors',
+              'focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
+              activeAuthor
+                ? 'bg-blue-50 dark:bg-blue-950/40 ring-1 ring-blue-500/50 text-blue-700 dark:text-blue-200'
+                : 'hover:bg-gray-500/10',
+            )}
+          >
+            <span
+              className={twMerge(
+                'flex items-center justify-center w-6 h-6 rounded border overflow-hidden shrink-0',
+                activeAuthor ? 'border-blue-500/30' : 'border-gray-500/20',
+              )}
+            >
+              <img
+                height={20}
+                width={20}
+                src={
+                  activeAuthor
+                    ? getAuthorAvatar(activeAuthor)
+                    : authorFallbackAvatar
+                }
+                alt=""
+                className="w-full h-full object-cover"
+              />
+            </span>
+            <span className="truncate font-medium flex-1">
+              {activeAuthor ?? 'All authors'}
+            </span>
+            <span className="flex items-center pr-1">
+              <ChevronsUpDown
+                className="h-4 w-4 opacity-40"
+                aria-hidden="true"
+              />
+            </span>
+          </button>
+        </DropdownTrigger>
+        <DropdownContent
+          align="start"
+          className="max-h-80 overflow-auto min-w-[16rem]"
+        >
+          <DropdownItem
+            onSelect={() => onSelect(undefined)}
+            className={twMerge(
+              'pr-8 relative',
+              !activeAuthor
+                ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-200 font-medium'
+                : 'font-normal',
+            )}
+          >
+            <span className="truncate">All authors</span>
+            {!activeAuthor ? (
+              <Check
+                className="h-4 w-4 absolute right-2 text-blue-600 dark:text-blue-300"
+                aria-hidden="true"
+              />
+            ) : null}
+          </DropdownItem>
+          {authors.length > 0 ? <DropdownSeparator /> : null}
+          {authors.map((name) => {
+            const isSelected = activeAuthor === name
+            return (
+              <DropdownItem
+                key={name}
+                onSelect={() => onSelect(name)}
+                className={twMerge(
+                  'pr-8 pl-2 relative',
+                  isSelected
+                    ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-200 font-medium'
+                    : 'font-normal',
+                )}
+              >
+                <img
+                  height={20}
+                  width={20}
+                  src={getAuthorAvatar(name)}
+                  alt=""
+                  className="w-5 h-5 rounded object-cover shrink-0"
+                />
+                <span className="truncate">{name}</span>
+                {isSelected ? (
+                  <Check
+                    className="h-4 w-4 absolute right-2 text-blue-600 dark:text-blue-300"
+                    aria-hidden="true"
+                  />
+                ) : null}
+              </DropdownItem>
+            )
+          })}
+        </DropdownContent>
+      </Dropdown>
+    </div>
+  )
+}
diff --git a/src/components/BlogCard.tsx b/src/components/BlogCard.tsx
new file mode 100644
index 000000000..3ddfba901
--- /dev/null
+++ b/src/components/BlogCard.tsx
@@ -0,0 +1,98 @@
+import { Link } from '@tanstack/react-router'
+import { Card } from '~/components/Card'
+import { CoverFallback } from '~/components/CoverFallback'
+import {
+  formatAuthors,
+  formatPublishedDate,
+  getBlogLibraries,
+} from '~/utils/blog-format'
+import { getOptimizedImageUrl } from '~/utils/optimizedImage'
+
+export type BlogCardPost = {
+  slug: string
+  title: string
+  published: string
+  excerpt: string
+  headerImage: string | undefined
+  authors: string[]
+  library: string | undefined
+}
+
+type BlogCardProps = {
+  post: BlogCardPost
+  showLibraryBadges?: boolean
+}
+
+export function BlogCard({ post, showLibraryBadges = true }: BlogCardProps) {
+  const { slug, title, published, excerpt, headerImage, authors, library } =
+    post
+  const blogLibraries = showLibraryBadges ? getBlogLibraries(library) : []
+
+  return (
+    <Card
+      as={Link}
+      to="/blog/$"
+      params={{ _splat: slug } as never}
+      className="relative flex flex-col justify-between overflow-hidden transition-all hover:shadow-sm hover:border-blue-500"
+    >
+      {blogLibraries.length ? (
+        <div className="absolute right-3 top-3 z-10 flex flex-wrap justify-end gap-1">
+          {blogLibraries.map((blogLibrary) => (
+            <div
+              key={blogLibrary.id}
+              className={`rounded-md px-2 py-1 text-xs font-black uppercase shadow-sm ${blogLibrary.bgStyle} ${blogLibrary.badgeTextStyle ?? 'text-white'}`}
+            >
+              {blogLibrary.name.replace('TanStack ', '')}
+            </div>
+          ))}
+        </div>
+      ) : null}
+      {headerImage ? (
+        <div className="aspect-video overflow-hidden bg-gray-100 dark:bg-gray-800">
+          <img
+            src={getOptimizedImageUrl(headerImage, {
+              fit: 'cover',
+              format: 'auto',
+              quality: 80,
+              width: 800,
+            })}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            className="w-full h-full object-cover"
+          />
+        </div>
+      ) : (
+        <CoverFallback
+          slug={slug}
+          library={library}
+          className="aspect-video w-full"
+        />
+      )}
+      <div className="p-4 md:p-8 flex flex-col gap-4 flex-1 justify-between">
+        <div>
+          <div className="text-lg font-extrabold">{title}</div>
+          <div className="text-xs italic font-light mt-1">
+            by {formatAuthors(authors)}
+            {published ? (
+              <time dateTime={published} title={formatPublishedDate(published)}>
+                {' '}
+                on {formatPublishedDate(published)}
+              </time>
+            ) : null}
+          </div>
+          {excerpt ? (
+            <p className="text-sm mt-4 text-gray-600 dark:text-gray-400 leading-7 line-clamp-4">
+              {excerpt}
+            </p>
+          ) : null}
+        </div>
+        <div>
+          <div className="text-blue-500 uppercase font-black text-sm">
+            Read More
+          </div>
+        </div>
+      </div>
+    </Card>
+  )
+}
diff --git a/src/components/BottomCTA.tsx b/src/components/BottomCTA.tsx
index 7bd49ffed..37f0a0a7e 100644
--- a/src/components/BottomCTA.tsx
+++ b/src/components/BottomCTA.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react'
-import type { LinkProps } from '@tanstack/react-router'
-import { Link } from '@tanstack/react-router'
+import { Link, LinkProps } from '@tanstack/react-router'
 import { Button } from '~/ui'
 
 type BottomCTAProps = {
-  linkProps: Omit<LinkProps, 'className' | 'children'>
+  linkProps: LinkProps
   label?: string
   className?: string
 }
@@ -15,7 +14,7 @@ export function BottomCTA({
   className,
 }: BottomCTAProps) {
   return (
-    <div className="flex flex-col gap-4 items-center">
+    <div className="flex flex-col items-center gap-4 px-4 py-12">
       <div className="font-extrabold text-xl lg:text-2xl">
         Wow, you've come a long way!
       </div>
@@ -23,6 +22,7 @@ export function BottomCTA({
         Only one thing left to do...
       </div>
       <div>
+        {/* @ts-expect-error - LinkProps is not assignable to ButtonProps */}
         <Button
           as={Link}
           {...linkProps}
diff --git a/src/components/BrandContextMenu.tsx b/src/components/BrandContextMenu.tsx
index 144ca64c0..ed21a7592 100644
--- a/src/components/BrandContextMenu.tsx
+++ b/src/components/BrandContextMenu.tsx
@@ -9,6 +9,7 @@ import {
   DropdownItem,
   DropdownSeparator,
 } from './Dropdown'
+import { copyTextToClipboard } from '~/utils/browser-effects'
 
 interface BrandContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode
@@ -32,7 +33,7 @@ export function BrandContextMenu({ children, ...rest }: BrandContextMenuProps) {
 
   const copyText = async (text: string) => {
     try {
-      await navigator.clipboard.writeText(text)
+      await copyTextToClipboard(text)
       notify(
         <div>
           <div className="font-medium">Copied to clipboard</div>
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 70e5ae5b0..15227b243 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -1,7 +1,7 @@
 import { Link } from '@tanstack/react-router'
 import { ChevronDown } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
-import type { MarkdownHeading } from '~/utils/markdown/processor'
+import type { MarkdownHeading } from '~/utils/markdown'
 import {
   Dropdown,
   DropdownTrigger,
@@ -16,7 +16,7 @@ type BreadcrumbsProps = {
   sectionTo?: string
   headings?: MarkdownHeading[]
   /** Breakpoint at which the TOC toggle is hidden (default: 'lg') */
-  tocHiddenBreakpoint?: 'md' | 'lg'
+  tocHiddenBreakpoint?: 'md' | 'lg' | 'xl'
 }
 
 export function Breadcrumbs({
@@ -26,7 +26,12 @@ export function Breadcrumbs({
   tocHiddenBreakpoint = 'lg',
 }: BreadcrumbsProps) {
   const showTocToggle = headings && headings.length > 1
-  const hiddenClass = tocHiddenBreakpoint === 'md' ? 'md:hidden' : 'lg:hidden'
+  const hiddenClass =
+    tocHiddenBreakpoint === 'md'
+      ? 'md:hidden'
+      : tocHiddenBreakpoint === 'xl'
+        ? 'xl:hidden'
+        : 'lg:hidden'
 
   return (
     <div className="flex flex-col">
@@ -43,7 +48,7 @@ export function Breadcrumbs({
         )}
         {showTocToggle && (
           <Dropdown>
-            <DropdownTrigger asChild={false}>
+            <DropdownTrigger>
               <button
                 className={twMerge(
                   hiddenClass,
diff --git a/src/components/BytesForm.tsx b/src/components/BytesForm.tsx
deleted file mode 100644
index 3e79d33c9..000000000
--- a/src/components/BytesForm.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import useBytesSubmit from '~/components/useBytesSubmit'
-import bytesImage from '~/images/bytes.svg'
-import { useToast } from '~/components/ToastProvider'
-import { useEffect } from 'react'
-
-export default function BytesForm() {
-  const { state, handleSubmit, error } = useBytesSubmit()
-  const { notify } = useToast()
-  useEffect(() => {
-    if (state === 'submitted') {
-      notify(
-        <div>
-          <div className="font-medium">Thanks for subscribing</div>
-          <div className="text-gray-500 dark:text-gray-400 text-xs">
-            Check your email to confirm your subscription
-          </div>
-        </div>,
-      )
-    }
-  }, [state, notify])
-
-  useEffect(() => {
-    if (error) {
-      notify(
-        <div>
-          <div className="font-medium">Subscription failed</div>
-          <div className="text-gray-500 dark:text-gray-400 text-xs">
-            Please try again in a moment
-          </div>
-        </div>,
-      )
-    }
-  }, [error, notify])
-  if (state === 'submitted') {
-    return (
-      <p>Success! Please, check your email to confirm your subscription.</p>
-    )
-  }
-  return (
-    <form onSubmit={handleSubmit}>
-      <div data-element="fields" className="grid relative">
-        <div className="relative">
-          <figure className="absolute right-[-8px] bottom-3 md:bottom-4">
-            <img height={38} width={38} src={bytesImage} alt="Bytes" />
-          </figure>
-          <input
-            className="text-xs border border-black/50 dark:border-white/50 rounded p-2 mb-1 md:mb-2 w-full bg-transparent"
-            name="email_address"
-            placeholder="Your email address"
-            type="email"
-            required
-          />
-        </div>
-        <button
-          type="submit"
-          className="text-xs mb-4 border rounded bg-rose-600 border-none text-white p-2"
-        >
-          {state !== 'loading' ? (
-            <span>Subscribe</span>
-          ) : (
-            <span>Loading...</span>
-          )}
-        </button>
-      </div>
-      <p className="text-xs text-gray-400">
-        No spam. Unsubscribe at <em>any</em> time.
-      </p>
-      {error && <p className="text-red-600">{error}</p>}
-    </form>
-  )
-}
diff --git a/src/components/ChatPanel.tsx b/src/components/ChatPanel.tsx
deleted file mode 100644
index 7b12ccbd4..000000000
--- a/src/components/ChatPanel.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react'
-import type { ChatMessage } from '~/stores/aiLibraryHeroAnimation'
-
-type ChatPanelProps = {
-  messages: ChatMessage[]
-  typingUserMessage: string
-}
-
-export function ChatPanel({ messages, typingUserMessage }: ChatPanelProps) {
-  return (
-    <div className="flex flex-col w-full md:w-[400px] h-full rounded-xl overflow-hidden shadow-lg bg-gradient-to-b from-white/95 to-gray-50/95 dark:from-gray-900/95 dark:to-gray-950/95 border border-gray-200/50 dark:border-gray-800/50 backdrop-blur-sm">
-      {/* Header */}
-      <div className="px-5 py-3.5 border-b bg-gradient-to-r from-white/50 to-gray-50/50 dark:from-gray-900/50 dark:to-gray-800/50 border-gray-200/50 dark:border-gray-800/50">
-        <h3 className="text-[10px] font-semibold uppercase tracking-widest text-center text-gray-400 dark:text-gray-500">
-          Chat Panel
-        </h3>
-      </div>
-
-      {/* Messages area */}
-      <div className="flex-1 overflow-hidden flex flex-col justify-end gap-3.5 p-5">
-        <div className="flex flex-col gap-3.5">
-          {messages.map((message) => (
-            <React.Fragment key={message.id}>
-              {/* User message - right aligned */}
-              <div className="flex justify-end">
-                <div className="max-w-[85%] px-4 py-2.5 rounded-2xl shadow-md bg-gradient-to-br from-blue-500 to-blue-600 dark:from-blue-600 dark:to-blue-700 text-white">
-                  <p className="text-sm leading-relaxed text-left">
-                    {message.user}
-                  </p>
-                </div>
-              </div>
-              {/* Assistant message - left aligned, appears below user message */}
-              {message.assistant && (
-                <div className="flex justify-start items-start">
-                  <div className="max-w-[85%] px-4 py-2.5 rounded-2xl shadow-md bg-white/60 dark:bg-gray-800/60 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700/50 backdrop-blur-sm">
-                    <p className="text-sm leading-relaxed whitespace-pre-wrap text-left">
-                      {message.assistant}
-                      {message.isStreaming && (
-                        <span className="inline-block w-1.5 h-4 ml-1.5 bg-blue-500 animate-pulse rounded-sm" />
-                      )}
-                    </p>
-                  </div>
-                </div>
-              )}
-            </React.Fragment>
-          ))}
-        </div>
-      </div>
-
-      {/* Input field at bottom */}
-      <div className="border-t px-5 py-4 bg-gradient-to-r from-white/50 to-gray-50/50 dark:from-gray-900/50 dark:to-gray-800/50 border-gray-200/50 dark:border-gray-800/50">
-        <div
-          className={`relative px-4 py-3 rounded-xl transition-all duration-200 bg-white/40 dark:bg-gray-800/40 border border-gray-200/40 dark:border-gray-700/40 ${
-            typingUserMessage
-              ? 'ring-1 ring-blue-500/30 !bg-white/60 dark:!bg-gray-800/60'
-              : ''
-          }`}
-        >
-          <p
-            className={`text-sm min-h-[20px] text-left ${
-              typingUserMessage
-                ? 'text-gray-900 dark:text-gray-200'
-                : 'text-gray-400 dark:text-gray-600 italic'
-            }`}
-          >
-            {typingUserMessage || 'Type a message...'}
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/CodeExampleCard.tsx b/src/components/CodeExampleCard.tsx
deleted file mode 100644
index 4ca1bbee9..000000000
--- a/src/components/CodeExampleCard.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useState } from 'react'
-import { Card } from '~/components/Card'
-import { CodeBlock } from '~/components/markdown'
-import { FrameworkIconTabs } from '~/components/FrameworkIconTabs'
-import type { Framework } from '~/libraries'
-
-interface CodeExampleCardProps {
-  title?: string
-  frameworks: Framework[]
-  codeByFramework: Partial<Record<Framework, { lang: string; code: string }>>
-}
-
-export function CodeExampleCard({
-  title = 'Just a quick look...',
-  frameworks,
-  codeByFramework,
-}: CodeExampleCardProps) {
-  const [framework, setFramework] = useState<Framework>(frameworks[0])
-
-  const selected =
-    codeByFramework[framework] || Object.values(codeByFramework)[0]
-
-  if (!selected) return null
-
-  return (
-    <div className="px-4 space-y-4 flex flex-col items-center">
-      <div className="text-3xl font-black">{title}</div>
-      <Card className="group overflow-hidden max-w-full mx-auto [&_pre]:bg-transparent! [&_pre]:p-4!">
-        <div>
-          <FrameworkIconTabs
-            frameworks={frameworks}
-            value={framework}
-            onChange={setFramework}
-          />
-          <CodeBlock className="mt-0 border-0" showTypeCopyButton={false}>
-            <code className={`language-${selected.lang}`}>{selected.code}</code>
-          </CodeBlock>
-        </div>
-      </Card>
-    </div>
-  )
-}
diff --git a/src/components/CodeExplorer.tsx b/src/components/CodeExplorer.tsx
index 9bf364fa8..773b37b5a 100644
--- a/src/components/CodeExplorer.tsx
+++ b/src/components/CodeExplorer.tsx
@@ -1,39 +1,12 @@
 import React from 'react'
-import { CodeBlock } from '~/components/markdown'
 import { FileExplorer } from './FileExplorer'
 import { InteractiveSandbox } from './InteractiveSandbox'
 import { CodeExplorerTopBar } from './CodeExplorerTopBar'
 import type { GitHubFileNode } from '~/utils/documents.server'
 import type { Library } from '~/libraries'
 import { twMerge } from 'tailwind-merge'
-
-function overrideExtension(ext: string | undefined) {
-  if (!ext) return 'txt'
-
-  // Override some extensions
-  if (['cts', 'mts'].includes(ext)) return 'ts'
-  if (['cjs', 'mjs'].includes(ext)) return 'js'
-  if (['prettierrc', 'babelrc', 'webmanifest'].includes(ext)) return 'json'
-  if (['env', 'example'].includes(ext)) return 'sh'
-  if (
-    [
-      'gitignore',
-      'prettierignore',
-      'log',
-      'gitattributes',
-      'editorconfig',
-      'lock',
-      'opts',
-      'Dockerfile',
-      'dockerignore',
-      'npmrc',
-      'nvmrc',
-    ].includes(ext)
-  )
-    return 'txt'
-
-  return ext
-}
+import { CodeBlock } from '~/components/markdown'
+import { getCodeBlockLanguageFromFilePath } from '~/components/markdown/codeBlock.shared'
 
 interface CodeExplorerProps {
   activeTab: 'code' | 'sandbox'
@@ -64,6 +37,7 @@ export function CodeExplorer({
 }: CodeExplorerProps) {
   const [isFullScreen, setIsFullScreen] = React.useState(false)
   const [isSidebarOpen, setIsSidebarOpen] = React.useState(true)
+  const currentCodeLanguage = getCodeBlockLanguageFromFilePath(currentPath)
 
   // Add escape key handler
   React.useEffect(() => {
@@ -116,19 +90,18 @@ export function CodeExplorer({
             prefetchFileContent={prefetchFileContent}
             setCurrentPath={setCurrentPath}
           />
-          <div className="flex-1 overflow-auto relative">
+          <div
+            className={twMerge(
+              'flex-1 overflow-auto relative',
+              isFullScreen ? 'max-h-[90dvh]' : 'max-h-[80dvh]',
+            )}
+          >
             <CodeBlock
+              className="h-full border-0"
               isEmbedded
-              className={twMerge(
-                'h-full border-0',
-                isFullScreen ? 'max-h-[90dvh]' : 'max-h-[80dvh]',
-              )}
+              showTypeCopyButton={false}
             >
-              <code
-                className={`language-${overrideExtension(
-                  currentPath.split('.').pop(),
-                )}`}
-              >
+              <code className={`language-${currentCodeLanguage}`}>
                 {currentCode}
               </code>
             </CodeBlock>
diff --git a/src/components/Collapsible.tsx b/src/components/Collapsible.tsx
index f7a3941ca..c187615dd 100644
--- a/src/components/Collapsible.tsx
+++ b/src/components/Collapsible.tsx
@@ -16,9 +16,8 @@ type CollapsibleProps = {
   className?: string
 }
 
-type CollapsibleTriggerProps = {
+type CollapsibleTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   children: React.ReactNode
-  className?: string
 }
 
 type CollapsibleContentProps = {
@@ -76,16 +75,26 @@ export function Collapsible({
 export function CollapsibleTrigger({
   children,
   className,
+  onClick,
+  onMouseDown,
+  type = 'button',
+  ...props
 }: CollapsibleTriggerProps) {
-  const { toggle } = useCollapsible()
+  const { open, toggle } = useCollapsible()
 
   return (
     <button
-      type="button"
-      onMouseDown={(e) => e.stopPropagation()}
+      {...props}
+      type={type}
+      aria-expanded={open}
+      onMouseDown={(e) => {
+        e.stopPropagation()
+        onMouseDown?.(e)
+      }}
       onClick={(e) => {
         e.stopPropagation()
         toggle()
+        onClick?.(e)
       }}
       className={twMerge('cursor-pointer select-none', className)}
       data-collapsible-trigger
diff --git a/src/components/CookieConsent.tsx b/src/components/CookieConsent.tsx
deleted file mode 100644
index 9feb11f3f..000000000
--- a/src/components/CookieConsent.tsx
+++ /dev/null
@@ -1,268 +0,0 @@
-import { Link } from '@tanstack/react-router'
-import { useEffect, useState } from 'react'
-import { Button } from '~/ui'
-
-declare global {
-  interface Window {
-    dataLayer: any[]
-    gtag: any
-  }
-}
-
-const EU_COUNTRIES = [
-  'AT',
-  'BE',
-  'BG',
-  'CZ',
-  'DE',
-  'DK',
-  'EE',
-  'ES',
-  'FI',
-  'FR',
-  'GB',
-  'GR',
-  'HR',
-  'HU',
-  'IE',
-  'IS',
-  'IT',
-  'LT',
-  'LU',
-  'LV',
-  'MT',
-  'NL',
-  'NO',
-  'PL',
-  'PT',
-  'RO',
-  'SE',
-  'SI',
-  'SK',
-  'CH',
-]
-
-export default function CookieConsent() {
-  const [showBanner, setShowBanner] = useState(false)
-  const [showSettings, setShowSettings] = useState(false)
-  const consentSettings = (() => {
-    if (typeof document === 'undefined') {
-      return { analytics: false, ads: false }
-    }
-    try {
-      const stored = localStorage.getItem('cookie_consent')
-      if (!stored) return { analytics: false, ads: false }
-      return JSON.parse(stored) as { analytics: boolean; ads: boolean }
-    } catch {
-      return { analytics: false, ads: false }
-    }
-  })()
-
-  const blockGoogleScripts = () => {
-    document.querySelectorAll('script').forEach((script) => {
-      if (
-        script.src?.includes('googletagmanager.com') ||
-        script.textContent?.includes('gtag(')
-      ) {
-        script.remove()
-      }
-    })
-    document.cookie =
-      '_ga=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.google.com'
-    document.cookie =
-      '_gid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.google.com'
-  }
-
-  const restoreGoogleScripts = () => {
-    if (!document.querySelector("script[src*='googletagmanager.com']")) {
-      const script = document.createElement('script')
-      script.src = 'https://www.googletagmanager.com/gtag/js?id=GTM-5N57KQT4'
-      script.async = true
-      document.body.appendChild(script)
-    }
-  }
-
-  const updateGTMConsent = (settings: { analytics: boolean; ads: boolean }) => {
-    window.dataLayer = window.dataLayer || []
-    window.dataLayer.push({
-      event: 'cookie_consent',
-      consent: {
-        analytics_storage: settings.analytics ? 'granted' : 'denied',
-        ad_storage: settings.ads ? 'granted' : 'denied',
-        ad_personalization: settings.ads ? 'granted' : 'denied',
-      },
-    })
-
-    if (typeof window.gtag === 'function') {
-      window.gtag('consent', 'update', {
-        analytics_storage: settings.analytics ? 'granted' : 'denied',
-        ad_storage: settings.ads ? 'granted' : 'denied',
-        ad_personalization: settings.ads ? 'granted' : 'denied',
-      })
-    }
-
-    if (settings.analytics || settings.ads) {
-      restoreGoogleScripts()
-    } else {
-      blockGoogleScripts()
-    }
-  }
-
-  useEffect(() => {
-    const checkLocationAndSetConsent = async () => {
-      // Only check location if no consent has been set yet
-      if (!consentSettings.analytics && !consentSettings.ads) {
-        try {
-          const response = await fetch(
-            'https://www.cloudflare.com/cdn-cgi/trace',
-          )
-          const data = await response.text()
-          const country = data.match(/loc=(\w+)/)?.[1]
-          const isEU = country ? EU_COUNTRIES.includes(country) : false
-
-          if (isEU) {
-            // Set default denied consent for EU users
-            const euConsent = { analytics: false, ads: false }
-            localStorage.setItem('cookie_consent', JSON.stringify(euConsent))
-            updateGTMConsent(euConsent)
-            setShowBanner(true)
-          } else {
-            // For non-EU users, set default accepted consent and don't show banner
-            const nonEuConsent = { analytics: true, ads: true }
-            localStorage.setItem('cookie_consent', JSON.stringify(nonEuConsent))
-            updateGTMConsent(nonEuConsent)
-            setShowBanner(false)
-          }
-        } catch (error) {
-          console.error('Error checking location:', error)
-          setShowBanner(true)
-        }
-      } else {
-        updateGTMConsent(consentSettings)
-      }
-    }
-
-    checkLocationAndSetConsent()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const acceptAllCookies = () => {
-    const consent = { analytics: true, ads: true }
-    localStorage.setItem('cookie_consent', JSON.stringify(consent))
-    updateGTMConsent(consent)
-    setShowBanner(false)
-  }
-
-  const rejectAllCookies = () => {
-    const consent = { analytics: false, ads: false }
-    localStorage.setItem('cookie_consent', JSON.stringify(consent))
-    updateGTMConsent(consent)
-    setShowBanner(false)
-  }
-
-  const openSettings = () => setShowSettings(true)
-  const closeSettings = () => setShowSettings(false)
-
-  return (
-    <>
-      {showBanner && (
-        <div
-          className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 p-4 z-50
-          text-sm gap-2 flex flex-col lg:flex-row [box-shadow:0_0_10px_rgba(0,0,0,0.2)]
-          items-center justify-between
-          "
-        >
-          <span className="text-xs">
-            We use cookies for site functionality, analytics, and ads{' '}
-            <strong>
-              (which is a large part of how TanStack OSS remains free forever)
-            </strong>
-            . See our{' '}
-            <Link to="/privacy" className="underline">
-              Privacy Policy
-            </Link>{' '}
-            for details.
-          </span>
-          <div className="flex gap-2 flex-wrap items-center">
-            <Button color="red" onClick={rejectAllCookies}>
-              Reject All
-            </Button>
-            <Button color="gray" onClick={openSettings}>
-              Customize
-            </Button>
-            <Button color="emerald" onClick={acceptAllCookies}>
-              Accept All
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {showSettings && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
-          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md w-full mx-4">
-            <h3 className="text-lg font-bold mb-4">Cookie Settings</h3>
-            <div className="space-y-4">
-              <div className="flex items-start gap-2">
-                <input
-                  type="checkbox"
-                  id="analytics-checkbox"
-                  defaultChecked={consentSettings.analytics}
-                  onChange={(e) => {
-                    const updated = {
-                      ...consentSettings,
-                      analytics: e.target.checked,
-                    }
-                    localStorage.setItem(
-                      'cookie_consent',
-                      JSON.stringify(updated),
-                    )
-                    updateGTMConsent(updated)
-                  }}
-                  className="mt-1"
-                />
-                <label htmlFor="analytics-checkbox" className="cursor-pointer">
-                  <span className="font-medium">Analytics</span>
-                  <p className="text-sm text-gray-600 dark:text-gray-400">
-                    Track site usage anonymously
-                  </p>
-                </label>
-              </div>
-              <div className="flex items-start gap-2">
-                <input
-                  type="checkbox"
-                  id="ads-checkbox"
-                  defaultChecked={consentSettings.ads}
-                  onChange={(e) => {
-                    const updated = {
-                      ...consentSettings,
-                      ads: e.target.checked,
-                    }
-                    if (typeof document !== 'undefined') {
-                      localStorage.setItem(
-                        'cookie_consent',
-                        JSON.stringify(updated),
-                      )
-                    }
-                    updateGTMConsent(updated)
-                  }}
-                  className="mt-1"
-                />
-                <label htmlFor="ads-checkbox" className="cursor-pointer">
-                  <span className="font-medium">Advertising</span>
-                  <p className="text-sm text-gray-600 dark:text-gray-400">
-                    Show personalized ads
-                  </p>
-                </label>
-              </div>
-              <div className="mt-6">
-                <Button color="emerald" onClick={closeSettings}>
-                  Save
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  )
-}
diff --git a/src/components/CopyMarkdownButton.tsx b/src/components/CopyMarkdownButton.tsx
index 4754b8e87..c9c002c13 100644
--- a/src/components/CopyMarkdownButton.tsx
+++ b/src/components/CopyMarkdownButton.tsx
@@ -1,127 +1,16 @@
 'use client'
-import { useState, useTransition } from 'react'
-
-import { type MouseEventHandler, useEffect, useRef } from 'react'
-import { useToast } from '~/components/ToastProvider'
-import { Check, Copy } from 'lucide-react'
-import { Button } from '~/ui'
+import { type MouseEventHandler } from 'react'
+import { useTemporaryFlag } from '~/utils/browser-effects'
 
 export function useCopyButton(
   onCopy: () => void | Promise<void>,
 ): [checked: boolean, onClick: MouseEventHandler] {
-  const [checked, setChecked] = useState(false)
-  const timeoutRef = useRef<number | null>(null)
+  const copied = useTemporaryFlag(1500)
 
   const onClick: MouseEventHandler = async () => {
-    if (timeoutRef.current) window.clearTimeout(timeoutRef.current)
-    const res = Promise.resolve(onCopy())
-
-    void res.then(() => {
-      setChecked(true)
-      timeoutRef.current = window.setTimeout(() => {
-        setChecked(false)
-      }, 1500)
-    })
+    await onCopy()
+    copied.trigger()
   }
 
-  // avoid updates after being unmounted
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) window.clearTimeout(timeoutRef.current)
-    }
-  }, [])
-
-  return [checked, onClick]
-}
-
-const cache = new Map<string, string>()
-
-interface CopyMarkdownButtonProps {
-  repo: string
-  branch: string
-  filePath: string
-}
-
-export function CopyMarkdownButton({
-  repo,
-  branch,
-  filePath,
-}: CopyMarkdownButtonProps) {
-  const [isLoading, startTransition] = useTransition()
-  const { notify } = useToast()
-  const [checked, onClick] = useCopyButton(async () => {
-    startTransition(() => {
-      const url = `https://raw.githubusercontent.com/${repo}/${branch}/${filePath}`
-      const cached = cache.get(url)
-
-      if (cached) {
-        navigator.clipboard.writeText(cached).then(() => {
-          notify(
-            <div>
-              <div className="font-medium">Copied markdown</div>
-              <div className="text-gray-500 dark:text-gray-400 text-xs">
-                Source content copied from cache
-              </div>
-            </div>,
-          )
-        })
-      } else {
-        fetch(url)
-          .then((response) => {
-            if (!response.ok) {
-              throw new Error('Fetch failed')
-            }
-            return response.text()
-          })
-          .then((content) => {
-            cache.set(url, content)
-            return navigator.clipboard.writeText(content).then(() => {
-              notify(
-                <div>
-                  <div className="font-medium">Copied markdown</div>
-                  <div className="text-gray-500 dark:text-gray-400 text-xs">
-                    Source content copied from GitHub
-                  </div>
-                </div>,
-              )
-            })
-          })
-          .catch(() => {
-            // fallback: try to copy current page content if available
-            const pageContent =
-              document.querySelector('.styled-markdown-content')?.textContent ||
-              ''
-            navigator.clipboard.writeText(pageContent).then(() => {
-              notify(
-                <div>
-                  <div className="font-medium">Copied markdown</div>
-                  <div className="text-gray-500 dark:text-gray-400 text-xs">
-                    Fallback: copied rendered page content
-                  </div>
-                </div>,
-              )
-            })
-          })
-      }
-    })
-  })
-
-  return (
-    <Button
-      disabled={isLoading}
-      className="bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-md backdrop-blur-sm"
-      onClick={onClick}
-      title="Copy markdown source"
-    >
-      {checked ? (
-        <>
-          <Check className="w-3 h-3" /> Copied to Clipboard
-        </>
-      ) : (
-        <>
-          <Copy className="w-3 h-3" /> Copy Markdown
-        </>
-      )}
-    </Button>
-  )
+  return [copied.active, onClick]
 }
diff --git a/src/components/CopyPageDropdown.tsx b/src/components/CopyPageDropdown.tsx
index 6a4da6fd2..715b60713 100644
--- a/src/components/CopyPageDropdown.tsx
+++ b/src/components/CopyPageDropdown.tsx
@@ -10,6 +10,13 @@ import {
   DropdownContent,
   DropdownItem,
 } from './Dropdown'
+import { getPackageManager } from '~/utils/markdown/installCommand'
+import {
+  copyTextToClipboard,
+  openPopupWindow,
+  useTemporaryFlag,
+} from '~/utils/browser-effects'
+import { getLocalStorageItem } from '~/utils/browser-storage'
 
 // Markdown icon component matching the screenshot
 function MarkdownIcon({ className }: { className?: string }) {
@@ -92,32 +99,72 @@ type CopyPageDropdownProps = {
   branch?: string
   /** File path in the repo (e.g., 'src/blog/my-post.md'). Required if repo is provided. */
   filePath?: string
+  /** Current framework for filtering markdown content (appended as ?framework= query param) */
+  currentFramework?: string
+  /** Raw content to copy directly, bypassing any fetch */
+  content?: string
+  /** Override the copy button label (default: "Copy page") */
+  label?: string
 }
 
 export function CopyPageDropdown({
   repo,
   branch,
   filePath,
+  currentFramework,
+  content: rawContent,
+  label = 'Copy page',
 }: CopyPageDropdownProps = {}) {
   const [open, setOpen] = React.useState(false)
-  const [copied, setCopied] = React.useState(false)
+  const copied = useTemporaryFlag()
   const { notify } = useToast()
 
-  // Determine if we should fetch from GitHub or use the page URL
-  const useGitHub = repo && branch && filePath
-  const gitHubUrl = useGitHub
-    ? `https://raw.githubusercontent.com/${repo}/${branch}/${filePath}`
-    : null
-  const pageMarkdownUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}${typeof window !== 'undefined' ? window.location.pathname.replace(/\/$/, '') : ''}.md`
+  // For docs pages in this repo, prefer the site's markdown endpoint so requests stay behind site caching.
+  const pageMarkdownUrl = (() => {
+    if (typeof window === 'undefined') {
+      return '.md'
+    }
+
+    const base = `${window.location.origin}${window.location.pathname.replace(/\/$/, '')}.md`
+    const params = new URLSearchParams(window.location.search)
+    if (currentFramework) {
+      params.set('framework', currentFramework)
+    }
+
+    // Read package manager from localStorage (same key as PackageManagerTabs)
+    const pm = getLocalStorageItem('packageManager')
+    const validPm = getPackageManager(pm)
+    params.set('pm', validPm)
+
+    const queryString = params.toString()
+    return queryString ? `${base}?${queryString}` : base
+  })()
+
+  const sourceMarkdownUrl =
+    repo === 'tanstack/tanstack.com'
+      ? pageMarkdownUrl
+      : repo && branch && filePath
+        ? `https://raw.githubusercontent.com/${repo}/${branch}/${filePath}`
+        : pageMarkdownUrl
 
   const handleCopyPage = async () => {
-    const urlToFetch = gitHubUrl || pageMarkdownUrl
+    if (rawContent) {
+      await copyTextToClipboard(rawContent)
+      copied.trigger()
+      notify(
+        <div>
+          <div className="font-medium">Copied to clipboard</div>
+        </div>,
+      )
+      return
+    }
+
+    const urlToFetch = sourceMarkdownUrl
     const cached = markdownCache.get(urlToFetch)
 
     const copyContent = async (content: string, source: string) => {
-      await navigator.clipboard.writeText(content)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
+      await copyTextToClipboard(content)
+      copied.trigger()
       notify(
         <div>
           <div className="font-medium">Copied to clipboard</div>
@@ -140,9 +187,9 @@ export function CopyPageDropdown({
       markdownCache.set(urlToFetch, content)
       await copyContent(
         content,
-        gitHubUrl
-          ? 'Markdown content copied from GitHub'
-          : 'Markdown content copied',
+        repo === 'tanstack/tanstack.com'
+          ? 'Markdown content copied from markdown endpoint'
+          : 'Markdown content copied from GitHub',
       )
     } catch {
       // Fallback: try to copy current page content if available
@@ -152,9 +199,8 @@ export function CopyPageDropdown({
         await copyContent(pageContent, 'Copied rendered page content')
       } else {
         // Last resort: copy the URL
-        await navigator.clipboard.writeText(window.location.href)
-        setCopied(true)
-        setTimeout(() => setCopied(false), 2000)
+        await copyTextToClipboard(window.location.href)
+        copied.trigger()
         notify(
           <div>
             <div className="font-medium">Copied to clipboard</div>
@@ -168,8 +214,8 @@ export function CopyPageDropdown({
   }
 
   const handleViewMarkdown = () => {
-    const url = gitHubUrl || pageMarkdownUrl
-    window.open(url, '_blank')
+    const url = sourceMarkdownUrl
+    openPopupWindow(url)
   }
 
   const handleOpenInClaude = () => {
@@ -177,7 +223,7 @@ export function CopyPageDropdown({
     const prompt = encodeURIComponent(
       `Read from this URL: ${pageUrl} and explain it to me`,
     )
-    window.open(`https://claude.ai/new?q=${prompt}`, '_blank')
+    openPopupWindow(`https://claude.ai/new?q=${prompt}`)
   }
 
   const handleOpenInChatGPT = () => {
@@ -185,17 +231,16 @@ export function CopyPageDropdown({
     const prompt = encodeURIComponent(
       `Read from this URL: ${pageUrl} and explain it to me`,
     )
-    window.open(`https://chatgpt.com/?q=${prompt}`, '_blank')
+    openPopupWindow(`https://chatgpt.com/?q=${prompt}`)
   }
 
   const handleOpenInCursor = () => {
     const pageUrl = window.location.href
     const prompt = `Read from this URL:\n${pageUrl}\nand explain it to me`
-    window.open(
+    openPopupWindow(
       `cursor://anysphere.cursor-deeplink/prompt?text=${encodeURIComponent(
         prompt,
       )}`,
-      '_blank',
     )
   }
 
@@ -204,16 +249,20 @@ export function CopyPageDropdown({
     const prompt = encodeURIComponent(
       `Read from this URL: ${pageUrl} and explain it to me`,
     )
-    window.open(`https://t3.chat/new?q=${prompt}`, '_blank')
+    openPopupWindow(`https://t3.chat/new?q=${prompt}`)
   }
 
   const menuItems = [
-    {
-      icon: MarkdownIcon,
-      label: 'View as Markdown',
-      description: 'Open this page in Markdown',
-      onSelect: handleViewMarkdown,
-    },
+    ...(!rawContent
+      ? [
+          {
+            icon: MarkdownIcon,
+            label: 'View as Markdown',
+            description: 'Open this page in Markdown',
+            onSelect: handleViewMarkdown,
+          },
+        ]
+      : []),
     {
       icon: ClaudeIcon,
       label: 'Open in Claude',
@@ -243,13 +292,14 @@ export function CopyPageDropdown({
   return (
     <ButtonGroup>
       <Button
+        type="button"
         variant="ghost"
         size="xs"
         rounded="none"
         className="border-0"
         onClick={handleCopyPage}
       >
-        {copied ? (
+        {copied.active ? (
           <>
             <Check className="w-3 h-3" />
             Copied!
@@ -257,17 +307,19 @@ export function CopyPageDropdown({
         ) : (
           <>
             <Copy className="w-3 h-3" />
-            Copy page
+            {label}
           </>
         )}
       </Button>
       <Dropdown open={open} onOpenChange={setOpen}>
         <DropdownTrigger>
           <Button
+            type="button"
             variant="ghost"
             size="xs"
             rounded="none"
             className="border-0 px-1.5"
+            aria-label={`More ${label} options`}
           >
             <ChevronDown className="w-3 h-3" />
           </Button>
@@ -279,7 +331,7 @@ export function CopyPageDropdown({
               onSelect={item.onSelect}
               className="gap-3 px-3 py-2.5"
             >
-              <div className="flex-shrink-0 w-5 h-5 flex items-center justify-center text-gray-700 dark:text-gray-400">
+              <div className="shrink-0 w-5 h-5 flex items-center justify-center text-gray-700 dark:text-gray-400">
                 <item.icon className="w-4 h-4" />
               </div>
               <div className="flex flex-col gap-0.5">
diff --git a/src/components/CoverFallback.tsx b/src/components/CoverFallback.tsx
new file mode 100644
index 000000000..b1923e4d5
--- /dev/null
+++ b/src/components/CoverFallback.tsx
@@ -0,0 +1,30 @@
+import { twMerge } from 'tailwind-merge'
+import { gradientBackgroundCss } from '~/utils/ogGradient'
+
+type CoverFallbackProps = {
+  slug: string
+  library?: string
+  className?: string
+  style?: React.CSSProperties
+}
+
+export function CoverFallback({
+  slug,
+  library,
+  className,
+  style,
+}: CoverFallbackProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={twMerge(
+        'bg-gray-100 dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800',
+        className,
+      )}
+      style={{
+        ...style,
+        backgroundImage: gradientBackgroundCss(slug, library),
+      }}
+    />
+  )
+}
diff --git a/src/components/DefaultCatchBoundary.tsx b/src/components/DefaultCatchBoundary.tsx
index 02c2c7600..5083603cd 100644
--- a/src/components/DefaultCatchBoundary.tsx
+++ b/src/components/DefaultCatchBoundary.tsx
@@ -9,6 +9,7 @@ import {
 import * as Sentry from '@sentry/tanstackstart-react'
 
 import { Button } from '~/ui'
+import { reloadOnStaleAppError } from '~/utils/stale-app-reload'
 import { useEffect } from 'react'
 
 // type DefaultCatchBoundaryType = {
@@ -18,34 +19,11 @@ import { useEffect } from 'react'
 //   isRoot?: boolean
 // }
 
-function isChunkLoadError(error: unknown): boolean {
-  if (!(error instanceof Error)) return false
-  return (
-    error.message.includes('Failed to fetch dynamically imported module') ||
-    error.message.includes('error loading dynamically imported module') ||
-    error.message.includes('Importing a module script failed') ||
-    error.name === 'ChunkLoadError'
-  )
-}
-
 export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
   const router = useRouter()
 
   useEffect(() => {
-    // Handle chunk loading errors (version skew) by reloading the page
-    if (isChunkLoadError(error) && typeof window !== 'undefined') {
-      const reloadKey = 'chunk-error-reload'
-      const lastReload = sessionStorage.getItem(reloadKey)
-      const now = Date.now()
-
-      // Only reload if we haven't reloaded in the last 10 seconds (prevent loop)
-      if (!lastReload || now - parseInt(lastReload, 10) > 10000) {
-        sessionStorage.setItem(reloadKey, now.toString())
-        window.location.reload()
-        return
-      }
-    }
-
+    if (reloadOnStaleAppError(error)) return
     Sentry.captureException(error)
   }, [error])
 
diff --git a/src/components/Doc.tsx b/src/components/Doc.tsx
index c32e00b7f..e260c3353 100644
--- a/src/components/Doc.tsx
+++ b/src/components/Doc.tsx
@@ -1,16 +1,15 @@
 import * as React from 'react'
 import { FoldHorizontal, UnfoldHorizontal } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
-import { useWidthToggle, DocNavigation } from '~/components/DocsLayout'
-import { AdGate } from '~/contexts/AdsContext'
-import { GamHeader } from './Gam'
+import { DocNavigation, WidthToggleContext } from '~/components/LibraryLayout'
+
 import { Toc } from './Toc'
-import { renderMarkdown } from '~/utils/markdown'
 import { DocBreadcrumb } from './DocBreadcrumb'
 import { MarkdownContent } from '~/components/markdown'
 import type { ConfigSchema } from '~/utils/config'
 import { useLocalCurrentFramework } from './FrameworkSelect'
 import { useParams } from '@tanstack/react-router'
+import { parseSiteMarkdown } from '~/utils/markdown'
 
 type DocProps = {
   title: string
@@ -51,11 +50,8 @@ export function Doc({
   footer,
   framework: frameworkProp,
 }: DocProps) {
-  // Extract headings synchronously during render to avoid hydration mismatch
-  const { headings, markup } = React.useMemo(
-    () => renderMarkdown(content),
-    [content],
-  )
+  const markdown = React.useMemo(() => parseSiteMarkdown(content), [content])
+  const headings = markdown.headings
 
   // Get current framework from prop, URL params, or local storage
   const { framework: paramsFramework } = useParams({ strict: false })
@@ -78,17 +74,10 @@ export function Doc({
     Record<string, IntersectionObserverEntry>
   >({})
 
-  // Try to get the width toggle context from DocsLayout
-  let isFullWidth = false
-  let setIsFullWidth: ((isFullWidth: boolean) => void) | undefined
+  const widthToggleContext = React.useContext(WidthToggleContext)
 
-  try {
-    const context = useWidthToggle()
-    isFullWidth = context.isFullWidth
-    setIsFullWidth = context.setIsFullWidth
-  } catch {
-    // Context not available, that's okay
-  }
+  const isFullWidth = widthToggleContext?.isFullWidth ?? false
+  const setIsFullWidth = widthToggleContext?.setIsFullWidth
 
   React.useEffect(() => {
     const callback = (headingsList: Array<IntersectionObserverEntry>) => {
@@ -129,16 +118,17 @@ export function Doc({
   }, [headings])
 
   return (
-    <div className="flex-1 min-h-0 flex flex-col">
-      <a href={`${pagePath}.md`} className="sr-only" aria-hidden="true">
+    <div className="flex-1 min-h-0 flex flex-col pt-4 lg:pt-6 xl:pt-8">
+      <a
+        href={`${pagePath}.md`}
+        className="sr-only"
+        tabIndex={-1}
+        aria-hidden="true"
+      >
         AI/LLM: This documentation page is available in plain markdown format at
         {pagePath}.md
       </a>
-      <AdGate>
-        <div className="py-2 pb-6 lg:py-4 lg:pb-8 xl:py-6 xl:pb-10 max-w-full">
-          <GamHeader />
-        </div>
-      </AdGate>
+
       <div
         className={twMerge(
           'w-full flex mx-auto max-w-[768px]',
@@ -159,11 +149,13 @@ export function Doc({
             repo={repo}
             branch={branch}
             filePath={filePath}
-            htmlMarkup={markup}
+            markdown={markdown}
             containerRef={markdownContainerRef}
             libraryId={libraryId}
             libraryVersion={libraryVersion}
             pagePath={pagePath}
+            currentFramework={currentFramework}
+            proseClassName="[font-size:14px]"
             titleBarActions={
               setIsFullWidth ? (
                 <button
@@ -184,7 +176,7 @@ export function Doc({
         </div>
 
         {isTocVisible && (
-          <div className="pl-4 w-32 lg:w-36 xl:w-44 2xl:w-56 3xl:w-64 shrink-0 hidden lg:block transition-all">
+          <div className="pl-4 w-32 lg:w-36 xl:w-44 2xl:w-56 3xl:w-64 shrink-0 hidden xl:block transition-all">
             <Toc
               headings={headings}
               activeHeadings={activeHeadings}
diff --git a/src/components/DocBreadcrumb.tsx b/src/components/DocBreadcrumb.tsx
index 7d60a380d..1b7e1eb78 100644
--- a/src/components/DocBreadcrumb.tsx
+++ b/src/components/DocBreadcrumb.tsx
@@ -1,7 +1,7 @@
 import { useParams } from '@tanstack/react-router'
 import { Breadcrumbs } from './Breadcrumbs'
 import type { ConfigSchema } from '~/utils/config'
-import type { MarkdownHeading } from '~/utils/markdown/processor'
+import type { MarkdownHeading } from '~/utils/markdown'
 
 function findSectionForDoc(
   config: ConfigSchema,
@@ -55,7 +55,7 @@ export function DocBreadcrumb({
     <Breadcrumbs
       section={section}
       headings={headings}
-      tocHiddenBreakpoint="lg"
+      tocHiddenBreakpoint="xl"
     />
   )
 }
diff --git a/src/components/DocFeedbackFloatingButton.tsx b/src/components/DocFeedbackFloatingButton.tsx
index c1155ea51..1ebac5a33 100644
--- a/src/components/DocFeedbackFloatingButton.tsx
+++ b/src/components/DocFeedbackFloatingButton.tsx
@@ -90,7 +90,7 @@ export function DocFeedbackFloatingButton({
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     <div
       ref={buttonRef}
-      className="doc-feedback-floating-btn absolute top-0 right-0 -translate-y-full z-[100]"
+      className="doc-feedback-floating-btn absolute top-0 right-0 -translate-y-full z-30"
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       onClick={(e) => e.stopPropagation()}
diff --git a/src/components/DocFeedbackNote.tsx b/src/components/DocFeedbackNote.tsx
index cc67574c4..4f814ad3c 100644
--- a/src/components/DocFeedbackNote.tsx
+++ b/src/components/DocFeedbackNote.tsx
@@ -370,14 +370,14 @@ export function DocFeedbackNote({
         >
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-2 flex-1 min-w-0">
-              <Icon className={`${colors.icon} text-xs flex-shrink-0`} />
+              <Icon className={`${colors.icon} text-xs shrink-0`} />
               <span className={`text-xs font-medium ${colors.text} truncate`}>
                 {isImprovement ? 'Your Improvement' : 'Your Note'}
               </span>
               {isImprovement && note.status && (
                 <span
                   className={twMerge(
-                    'text-[10px] px-1.5 py-0.5 rounded font-medium uppercase tracking-wide flex-shrink-0',
+                    'text-[10px] px-1.5 py-0.5 rounded font-medium uppercase tracking-wide shrink-0',
                     note.status === 'approved' &&
                       'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400',
                     note.status === 'denied' &&
@@ -390,7 +390,7 @@ export function DocFeedbackNote({
                 </span>
               )}
             </div>
-            <div className="flex items-center gap-1 flex-shrink-0">
+            <div className="flex items-center gap-1 shrink-0">
               {!note.isCollapsed && (
                 <>
                   <button
diff --git a/src/components/DocFeedbackProvider.tsx b/src/components/DocFeedbackProvider.tsx
index 4fff0eec0..cd058a88c 100644
--- a/src/components/DocFeedbackProvider.tsx
+++ b/src/components/DocFeedbackProvider.tsx
@@ -11,7 +11,7 @@ import { useLoginModal } from '~/contexts/LoginModalContext'
 import {
   findReferenceableBlocks,
   getBlockIdentifier,
-} from '~/utils/docFeedback.client'
+} from '~/utils/docFeedback'
 import type { DocFeedback } from '~/db/types'
 import { Lightbulb, MessageSquare } from 'lucide-react'
 
@@ -46,6 +46,9 @@ export function DocFeedbackProvider({
   const [blockMarkdowns, setBlockMarkdowns] = React.useState<
     Map<string, string>
   >(new Map())
+  const [blockElements, setBlockElements] = React.useState<
+    Map<string, HTMLElement>
+  >(new Map())
   const [hoveredBlockId, setHoveredBlockId] = React.useState<string | null>(
     null,
   )
@@ -87,15 +90,28 @@ export function DocFeedbackProvider({
     const selectorMap = new Map<string, string>()
     const hashMap = new Map<string, string>()
     const markdownMap = new Map<string, string>()
+    const elementMap = new Map<string, HTMLElement>()
     const listeners = new Map<
       HTMLElement,
       { enter: (e: MouseEvent) => void; leave: (e: MouseEvent) => void }
     >()
+    const findClosestBlock = (target: HTMLElement): HTMLElement | null => {
+      let closestBlock: HTMLElement | null = null
+
+      for (const candidate of blocks) {
+        if (!candidate.contains(target)) continue
+        if (!closestBlock || closestBlock.contains(candidate)) {
+          closestBlock = candidate
+        }
+      }
+
+      return closestBlock
+    }
 
     Promise.all(
       blocks.map(async (block, index) => {
         const blockId = `block-${index}`
-        block.setAttribute('data-block-id', blockId)
+        elementMap.set(blockId, block)
 
         const identifier = await getBlockIdentifier(block)
         selectorMap.set(blockId, identifier.selector)
@@ -106,8 +122,10 @@ export function DocFeedbackProvider({
         const handleMouseEnter = (e: MouseEvent) => {
           // Only handle hover if this is the most specific block being hovered
           // (prevent parent blocks from showing hover when child blocks are hovered)
-          const target = e.target as HTMLElement
-          const closestBlock = target.closest('[data-block-id]')
+          const target = e.target
+          if (!(target instanceof HTMLElement)) return
+
+          const closestBlock = findClosestBlock(target)
           if (closestBlock === block) {
             setHoveredBlockId(blockId)
             block.style.backgroundColor = 'rgba(59, 130, 246, 0.05)' // blue with low opacity
@@ -118,10 +136,15 @@ export function DocFeedbackProvider({
         const handleMouseLeave = (e: MouseEvent) => {
           // Only clear hover if we're actually leaving this block
           // (not just entering a child element)
-          const relatedTarget = e.relatedTarget as HTMLElement
+          const relatedTarget =
+            e.relatedTarget instanceof HTMLElement ? e.relatedTarget : null
+          const closestBlock = relatedTarget
+            ? findClosestBlock(relatedTarget)
+            : null
           if (
+            !relatedTarget ||
             !block.contains(relatedTarget) ||
-            relatedTarget?.closest('[data-block-id]') !== block
+            closestBlock !== block
           ) {
             setHoveredBlockId((current) =>
               current === blockId ? null : current,
@@ -147,13 +170,14 @@ export function DocFeedbackProvider({
       setBlockSelectors(new Map(selectorMap))
       setBlockContentHashes(new Map(hashMap))
       setBlockMarkdowns(new Map(markdownMap))
+      setBlockElements(new Map(elementMap))
 
       // Visual indicators will be updated by the separate effect below
     })
 
     return () => {
+      setBlockElements(new Map())
       blocks.forEach((block) => {
-        block.removeAttribute('data-block-id')
         block.style.backgroundColor = ''
         block.style.borderRight = ''
         block.style.paddingRight = ''
@@ -173,9 +197,7 @@ export function DocFeedbackProvider({
     if (!user || blockSelectors.size === 0) return
 
     blockSelectors.forEach((selector, blockId) => {
-      const block = document.querySelector(
-        `[data-block-id="${blockId}"]`,
-      ) as HTMLElement
+      const block = blockElements.get(blockId)
       if (!block) return
 
       const hasNote = userNotes.some((n) => n.blockSelector === selector)
@@ -196,7 +218,7 @@ export function DocFeedbackProvider({
         block.style.paddingRight = ''
       }
     })
-  }, [user, userNotes, userImprovements, blockSelectors])
+  }, [user, userNotes, userImprovements, blockSelectors, blockElements])
 
   const handleCloseCreating = React.useCallback(() => {
     setCreatingState(null)
@@ -250,6 +272,8 @@ export function DocFeedbackProvider({
       {Array.from(blockSelectors.keys()).map((blockId) => {
         const selector = blockSelectors.get(blockId)
         if (!selector) return null
+        const block = blockElements.get(blockId)
+        if (!block) return null
 
         // Check if this block has a note or improvement (only for logged-in users)
         const note = user
@@ -264,6 +288,7 @@ export function DocFeedbackProvider({
           <BlockButton
             key={blockId}
             blockId={blockId}
+            block={block}
             isHovered={isHovered}
             hasNote={!!note}
             hasImprovement={!!improvement}
@@ -286,8 +311,10 @@ export function DocFeedbackProvider({
         )?.[0]
 
         if (!blockId) return null
+        const block = blockElements.get(blockId)
+        if (!block) return null
 
-        return <NotePortal key={note.id} blockId={blockId} note={note} />
+        return <NotePortal key={note.id} block={block} note={note} />
       })}
 
       {/* Render improvements inline */}
@@ -298,13 +325,11 @@ export function DocFeedbackProvider({
         )?.[0]
 
         if (!blockId) return null
+        const block = blockElements.get(blockId)
+        if (!block) return null
 
         return (
-          <NotePortal
-            key={improvement.id}
-            blockId={blockId}
-            note={improvement}
-          />
+          <NotePortal key={improvement.id} block={block} note={improvement} />
         )
       })}
 
@@ -312,6 +337,7 @@ export function DocFeedbackProvider({
       {creatingState && (
         <CreatingFeedbackPortal
           blockId={creatingState.blockId}
+          block={blockElements.get(creatingState.blockId)}
           type={creatingState.type}
           blockSelector={blockSelectors.get(creatingState.blockId) || ''}
           blockContentHash={blockContentHashes.get(creatingState.blockId) || ''}
@@ -329,6 +355,7 @@ export function DocFeedbackProvider({
 // Component to render floating button for a block
 function BlockButton({
   blockId,
+  block,
   isHovered,
   hasNote,
   hasImprovement,
@@ -339,6 +366,7 @@ function BlockButton({
   onShowNote,
 }: {
   blockId: string
+  block: HTMLElement
   isHovered: boolean
   hasNote: boolean
   hasImprovement: boolean
@@ -356,12 +384,6 @@ function BlockButton({
 
   if (!mounted) return null
 
-  // Find the block element
-  const block = document.querySelector(
-    `[data-block-id="${blockId}"]`,
-  ) as HTMLElement
-  if (!block) return null
-
   // Don't show button if block is inside an editor or note portal
   if (block.closest('[data-editor-portal], [data-note-portal]')) return null
 
@@ -372,9 +394,9 @@ function BlockButton({
   if (!isHovered && !isMenuOpen) return null
 
   // Create portal container for button positioned at top-right of block
-  let portalContainer = document.querySelector(
+  let portalContainer = block.querySelector<HTMLElement>(
     `[data-button-portal="${blockId}"]`,
-  ) as HTMLElement
+  )
 
   if (!portalContainer) {
     portalContainer = document.createElement('div')
@@ -407,7 +429,13 @@ function BlockButton({
 }
 
 // Component to render note after a block
-function NotePortal({ blockId, note }: { blockId: string; note: DocFeedback }) {
+function NotePortal({
+  block,
+  note,
+}: {
+  block: HTMLElement
+  note: DocFeedback
+}) {
   const [mounted, setMounted] = React.useState(false)
 
   React.useEffect(() => {
@@ -416,24 +444,21 @@ function NotePortal({ blockId, note }: { blockId: string; note: DocFeedback }) {
 
   if (!mounted) return null
 
-  // Find the block element
-  const block = document.querySelector(`[data-block-id="${blockId}"]`)
-  if (!block) return null
-
   // Don't show note if block is inside an editor portal
   if (block.closest('[data-editor-portal]')) return null
 
   // Find the actual insertion point - if block is inside an anchor-heading, insert after the anchor
-  let insertionPoint = block as HTMLElement
+  let insertionPoint = block
   const anchorParent = block.parentElement
   if (anchorParent?.classList.contains('anchor-heading')) {
     insertionPoint = anchorParent
   }
 
   // Create portal container after the insertion point
-  let portalContainer = insertionPoint.parentElement?.querySelector(
-    `[data-note-portal="${note.id}"]`,
-  ) as HTMLElement
+  let portalContainer =
+    insertionPoint.parentElement?.querySelector<HTMLElement>(
+      `[data-note-portal="${note.id}"]`,
+    )
 
   if (!portalContainer) {
     portalContainer = document.createElement('div')
@@ -454,6 +479,7 @@ function NotePortal({ blockId, note }: { blockId: string; note: DocFeedback }) {
 // Component to render creating feedback interface after a block
 function CreatingFeedbackPortal({
   blockId,
+  block,
   type,
   blockSelector,
   blockContentHash,
@@ -464,6 +490,7 @@ function CreatingFeedbackPortal({
   onClose,
 }: {
   blockId: string
+  block?: HTMLElement
   type: 'note' | 'improvement'
   blockSelector: string
   blockContentHash?: string
@@ -480,22 +507,20 @@ function CreatingFeedbackPortal({
   }, [])
 
   if (!mounted) return null
-
-  // Find the block element
-  const block = document.querySelector(`[data-block-id="${blockId}"]`)
   if (!block) return null
 
   // Find the actual insertion point - if block is inside an anchor-heading, insert after the anchor
-  let insertionPoint = block as HTMLElement
+  let insertionPoint = block
   const anchorParent = block.parentElement
   if (anchorParent?.classList.contains('anchor-heading')) {
     insertionPoint = anchorParent
   }
 
   // Create portal container after the insertion point
-  let portalContainer = insertionPoint.parentElement?.querySelector(
-    `[data-creating-portal="${blockId}"]`,
-  ) as HTMLElement
+  let portalContainer =
+    insertionPoint.parentElement?.querySelector<HTMLElement>(
+      `[data-creating-portal="${blockId}"]`,
+    )
 
   if (!portalContainer) {
     portalContainer = document.createElement('div')
@@ -703,7 +728,7 @@ function CreatingFeedbackNote({
             <React.Suspense
               fallback={<div className={`${colors.icon} text-xs`}>...</div>}
             >
-              <Icon className={`${colors.icon} text-xs flex-shrink-0`} />
+              <Icon className={`${colors.icon} text-xs shrink-0`} />
             </React.Suspense>
             <span className={`text-xs font-medium ${colors.text}`}>
               {isImprovement ? 'New Improvement' : 'New Note'}
diff --git a/src/components/DocsCalloutBytes.tsx b/src/components/DocsCalloutBytes.tsx
deleted file mode 100644
index 5fd6945bd..000000000
--- a/src/components/DocsCalloutBytes.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import BytesForm from '~/components/BytesForm'
-
-export function DocsCalloutBytes(props: React.HTMLProps<HTMLDivElement>) {
-  return (
-    <div className="space-y-4" {...props}>
-      <div className="space-y-1 md:space-y-2">
-        <h6 className="text-[.8rem] uppercase font-black opacity-50">
-          Subscribe to Bytes
-        </h6>
-        <p className="text-xs md:text-xs">
-          Your weekly dose of JavaScript news. Delivered every Tuesday and
-          Friday to over 200,000 devs, for free.
-        </p>
-      </div>
-      <BytesForm />
-    </div>
-  )
-}
diff --git a/src/components/DocsCalloutNewsletter.tsx b/src/components/DocsCalloutNewsletter.tsx
new file mode 100644
index 000000000..1cbe74200
--- /dev/null
+++ b/src/components/DocsCalloutNewsletter.tsx
@@ -0,0 +1,17 @@
+import { NewsletterSignup } from '~/components/NewsletterSignup'
+
+export function DocsCalloutNewsletter(props: React.HTMLProps<HTMLDivElement>) {
+  return (
+    <div className="space-y-4" {...props}>
+      <div className="space-y-1 md:space-y-2">
+        <h6 className="text-[.8rem] uppercase font-black opacity-50">
+          TanStack News
+        </h6>
+        <p className="text-xs md:text-xs">
+          New posts, releases, and ecosystem updates from TanStack.
+        </p>
+      </div>
+      <NewsletterSignup />
+    </div>
+  )
+}
diff --git a/src/components/DocsCalloutQueryGG.tsx b/src/components/DocsCalloutQueryGG.tsx
deleted file mode 100644
index c3c02eca7..000000000
--- a/src/components/DocsCalloutQueryGG.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { LogoQueryGG } from '~/ui'
-import { useQueryGGPPPDiscount } from '~/hooks/useQueryGGPPPDiscount'
-
-export function DocsCalloutQueryGG() {
-  const ppp = useQueryGGPPPDiscount()
-
-  return (
-    <a
-      target="_blank"
-      className="cursor-pointer"
-      href="https://query.gg?s=tanstack"
-      rel="noreferrer"
-    >
-      <div className="space-y-3">
-        <h6 className="text-[.7rem] uppercase font-black opacity-50">
-          Want to Skip the Docs?
-        </h6>
-        <LogoQueryGG size="small" className="w-full" />
-
-        <blockquote className="text-sm -indent-[.45em] pl-2">
-          “If you’re serious about *really* understanding React Query, there’s
-          no better way than with query.gg”
-          <cite className="italic block text-right">—Tanner Linsley</cite>
-        </blockquote>
-
-        <div className="grid justify-center bg-gray-800 dark:bg-gray-100 text-gray-100 dark:text-gray-800 z-10"></div>
-
-        {ppp && (
-          <>
-            <p className="text-sm pl-2 py-2">
-              To help make query.gg more accessible, you can enable a regional
-              discount of {ppp.discount * 100}% off for being in {ppp.flag}{' '}
-              {ppp.country}.
-            </p>
-          </>
-        )}
-        <button className="block m-1 w-full mx-auto px-4 py-2 rounded uppercase font-bold text-sm text-center hover:bg-gray-100/70 dark:hover:bg-gray-800 cursor-default border-2 dark:border-gray-700/80">
-          {ppp ? ` Get ${ppp.discount * 100}% off ${ppp.flag}` : 'Learn More'}
-        </button>
-      </div>
-    </a>
-  )
-}
diff --git a/src/components/DocsLayout.tsx b/src/components/DocsLayout.tsx
deleted file mode 100644
index 6c729208f..000000000
--- a/src/components/DocsLayout.tsx
+++ /dev/null
@@ -1,854 +0,0 @@
-import * as React from 'react'
-import { ChevronLeft, ChevronRight, Menu } from 'lucide-react'
-import { GithubIcon } from '~/components/icons/GithubIcon'
-import { DiscordIcon } from '~/components/icons/DiscordIcon'
-import { Link, useMatches, useParams } from '@tanstack/react-router'
-import { useLocalStorage } from '~/utils/useLocalStorage'
-import { useClickOutside } from '~/hooks/useClickOutside'
-import { last } from '~/utils/utils'
-import type { ConfigSchema, MenuItem } from '~/utils/config'
-import { Framework, LibraryId } from '~/libraries'
-import { frameworkOptions } from '~/libraries/frameworks'
-import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
-import { twMerge } from 'tailwind-merge'
-import { partners, PartnerImage } from '~/utils/partners'
-import { GamHeader, GamVrec1 } from './Gam'
-import { AdGate } from '~/contexts/AdsContext'
-import { SearchButton } from './SearchButton'
-import { FrameworkSelect, useCurrentFramework } from './FrameworkSelect'
-import { VersionSelect } from './VersionSelect'
-import { Card } from './Card'
-
-// Mobile partners strip - inline in the docs toggle bar
-function MobilePartnersStrip({
-  partners,
-  onLabelClick,
-}: {
-  partners: Array<{
-    name: string
-    href: string
-    image: Parameters<typeof PartnerImage>[0]['config']
-  }>
-  onLabelClick?: () => void
-}) {
-  const innerRef = React.useRef<HTMLDivElement>(null)
-  const [isHovered, setIsHovered] = React.useState(false)
-  const scrollPositionRef = React.useRef(0)
-  const hasStartedRef = React.useRef(false)
-
-  React.useEffect(() => {
-    const inner = innerRef.current
-    if (!inner) return
-
-    let animationId: number
-    let timeoutId: ReturnType<typeof setTimeout>
-    const scrollSpeed = 0.15 // pixels per frame
-    const startDelay = 4000 // wait 4 seconds before starting (first time only)
-
-    const animate = () => {
-      if (!isHovered && inner) {
-        scrollPositionRef.current += scrollSpeed
-        // Reset when we've scrolled past the first set
-        if (scrollPositionRef.current >= inner.scrollWidth / 2) {
-          scrollPositionRef.current = 0
-        }
-        inner.style.transform = `translateX(${-scrollPositionRef.current}px)`
-      }
-      animationId = requestAnimationFrame(animate)
-    }
-
-    if (!hasStartedRef.current) {
-      timeoutId = setTimeout(() => {
-        hasStartedRef.current = true
-        animationId = requestAnimationFrame(animate)
-      }, startDelay)
-    } else {
-      animationId = requestAnimationFrame(animate)
-    }
-
-    return () => {
-      clearTimeout(timeoutId)
-      cancelAnimationFrame(animationId)
-    }
-  }, [isHovered])
-
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
-    <div
-      className="flex-1 flex items-center gap-2 min-w-0"
-      onClick={(e) => e.preventDefault()}
-    >
-      <button
-        type="button"
-        className="text-[9px] uppercase tracking-wide font-medium text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 shrink-0"
-        onClick={(e) => {
-          e.stopPropagation()
-          onLabelClick?.()
-        }}
-      >
-        Partners
-      </button>
-      <div
-        className="relative flex-1 overflow-hidden min-w-0"
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-        onTouchStart={() => setIsHovered(true)}
-        onTouchEnd={() => setIsHovered(false)}
-      >
-        <div className="overflow-hidden">
-          <div
-            ref={innerRef}
-            className="flex items-center gap-4 w-max py-1 will-change-transform"
-          >
-            {/* Duplicate partners for seamless loop */}
-            {[...partners, ...partners].map((partner, i) => (
-              <a
-                key={`${partner.name}-${i}`}
-                href={partner.href}
-                target="_blank"
-                rel="noreferrer"
-                className="shrink-0 flex items-center opacity-50 hover:opacity-100 transition-opacity"
-                onClick={(e) => e.stopPropagation()}
-              >
-                <div className="h-4 flex items-center [&_img]:h-full [&_img]:w-auto [&_div]:h-full">
-                  <PartnerImage config={partner.image} alt={partner.name} />
-                </div>
-              </a>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// Component for the collapsed menu strip showing box indicators
-// Minimap style: boxes with flex height filling available vertical space
-function DocsMenuStrip({
-  menuConfig,
-  activeItem,
-  fullPathname,
-  colorFrom,
-  colorTo,
-  frameworkLogo,
-  version,
-  onHover,
-  onClick,
-}: {
-  menuConfig: MenuItem[]
-  activeItem: string | undefined
-  fullPathname: string
-  colorFrom: string
-  colorTo: string
-  frameworkLogo: string | undefined
-  version: string
-  onHover: () => void
-  onClick: () => void
-}) {
-  // Flatten all menu items with section markers
-  const itemsWithSections: Array<{
-    to?: string
-    label: React.ReactNode
-    isSection: boolean
-  }> = []
-  menuConfig.forEach((group) => {
-    itemsWithSections.push({ label: group.label, isSection: true })
-    group.children?.forEach((child) => {
-      itemsWithSections.push({
-        to: child.to,
-        label: child.label,
-        isSection: false,
-      })
-    })
-  })
-
-  // Check if a menu item path matches the current location
-  const isItemActive = (itemTo: string | undefined): boolean => {
-    if (!itemTo) return false
-
-    // External links are never active
-    if (itemTo.startsWith('http')) return false
-
-    // Standard relative path comparison
-    if (itemTo === activeItem) return true
-
-    // Handle special menu items with different path formats
-    // ".." means we're on the library home page (no /docs suffix in pathname)
-    if (itemTo === '..') {
-      // Active when on the library version index (e.g., /query/latest but not /query/latest/docs/...)
-      return fullPathname.match(/^\/[^/]+\/[^/]+\/?$/) !== null
-    }
-
-    // "./framework" means we're on the frameworks index page
-    if (itemTo === './framework') {
-      return (
-        fullPathname.includes('/docs/framework') &&
-        !fullPathname.match(/\/docs\/framework\/[^/]+/)
-      )
-    }
-
-    // Handle absolute paths like "/$libraryId/$version/docs/contributors"
-    if (itemTo.includes('/$libraryId')) {
-      const pathSuffix = itemTo.split('/docs/')[1]
-      if (pathSuffix && fullPathname.includes(`/docs/${pathSuffix}`)) {
-        return true
-      }
-    }
-
-    return false
-  }
-
-  return (
-    <button
-      type="button"
-      className="flex flex-col gap-2 py-2 px-2 cursor-pointer h-full w-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-400/50"
-      onPointerEnter={onHover}
-      onFocus={onHover}
-      onClick={onClick}
-      aria-label="Open documentation menu"
-    >
-      {/* FrameworkSelect + VersionSelect icons */}
-      <div className="flex flex-col gap-2 shrink-0">
-        <div className="flex items-center justify-center">
-          <span className="flex items-center justify-center w-6 h-6">
-            {frameworkLogo ? (
-              <img src={frameworkLogo} alt="" className="w-4 h-4" />
-            ) : (
-              <Menu className="w-3.5 h-3.5 opacity-60" />
-            )}
-          </span>
-        </div>
-        <div className="flex items-center justify-center">
-          <span className="flex items-center justify-center px-1 py-0.5 text-[9px] font-medium opacity-60 border border-gray-500/30 rounded">
-            {version}
-          </span>
-        </div>
-      </div>
-
-      {/* Minimap: flex-height boxes filling remaining space */}
-      <div className="flex-1 flex flex-col gap-1 min-h-0">
-        {itemsWithSections.map((item, index) => {
-          const isActive = !item.isSection && isItemActive(item.to)
-
-          return (
-            <div
-              key={index}
-              className={twMerge(
-                'flex-1 min-h-[4px] max-h-[9px] min-w-[20px] rounded-sm',
-                item.isSection
-                  ? 'w-full bg-current opacity-15'
-                  : isActive
-                    ? `ml-2 w-[calc(100%-0.5rem)] bg-linear-to-r ${colorFrom} ${colorTo}`
-                    : 'ml-2 w-[calc(100%-0.5rem)] bg-current opacity-[0.06]',
-              )}
-              title={
-                typeof item.label === 'string'
-                  ? item.label
-                  : `Item ${index + 1}`
-              }
-            />
-          )
-        })}
-      </div>
-    </button>
-  )
-}
-
-// Helper to get text color class from framework badge
-const _getFrameworkTextColor = (frameworkValue: string | undefined) => {
-  if (!frameworkValue) return 'text-gray-500'
-  const framework = frameworkOptions.find((f) => f.value === frameworkValue)
-
-  return framework?.fontColor ?? 'text-gray-500'
-}
-
-// Create context for width toggle state
-const WidthToggleContext = React.createContext<{
-  isFullWidth: boolean
-  setIsFullWidth: (isFullWidth: boolean) => void
-} | null>(null)
-
-export const useWidthToggle = () => {
-  const context = React.useContext(WidthToggleContext)
-  if (!context) {
-    throw new Error('useWidthToggle must be used within a WidthToggleProvider')
-  }
-  return context
-}
-
-// Create context for doc navigation (prev/next)
-type DocNavItem = { label: React.ReactNode; to: string }
-const DocNavigationContext = React.createContext<{
-  prevItem?: DocNavItem
-  nextItem?: DocNavItem
-  colorFrom: string
-  colorTo: string
-  textColor: string
-} | null>(null)
-
-export const useDocNavigation = () => {
-  return React.useContext(DocNavigationContext)
-}
-
-export function DocNavigation() {
-  const context = useDocNavigation()
-  if (!context) return null
-
-  const { prevItem, nextItem, colorFrom, colorTo, textColor } = context
-
-  if (!prevItem && !nextItem) return null
-
-  return (
-    <div className="sticky flex items-stretch bottom-2 z-10 right-0 text-[10px] sm:text-xs md:text-sm print:hidden">
-      <div className="flex-1 flex justify-start">
-        {prevItem ? (
-          <Card
-            as={Link}
-            from="/$libraryId/$version/docs"
-            to={prevItem.to}
-            params
-            className="py-1 px-2 sm:py-2 sm:px-3 flex items-center gap-1 sm:gap-2"
-          >
-            <ChevronLeft className="w-3 h-3 sm:w-4 sm:h-4" />
-            <div className="flex flex-col">
-              <span className="hidden sm:block text-[10px] uppercase tracking-wider opacity-60 mb-0.5">
-                Previous
-              </span>
-              <span className="font-bold">{prevItem.label}</span>
-            </div>
-          </Card>
-        ) : null}
-      </div>
-      <div className="flex-1 flex justify-end">
-        {nextItem ? (
-          <Card
-            as={Link}
-            from="/$libraryId/$version/docs"
-            to={nextItem.to}
-            params
-            className="py-1 px-2 sm:py-2 sm:px-3 flex items-center gap-1 sm:gap-2"
-          >
-            <div className="flex flex-col items-end">
-              <span className="hidden sm:block text-[10px] uppercase tracking-wider opacity-60 mb-0.5">
-                Next
-              </span>
-              <span
-                className={`font-bold text-right bg-linear-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
-              >
-                {nextItem.label}
-              </span>
-            </div>
-            <ChevronRight
-              className={twMerge('w-3 h-3 sm:w-4 sm:h-4', textColor)}
-            />
-          </Card>
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-const useMenuConfig = ({
-  config,
-  repo,
-  frameworks,
-}: {
-  config: ConfigSchema
-  repo: string
-  frameworks: Framework[]
-}): MenuItem[] => {
-  const currentFramework = useCurrentFramework(frameworks)
-
-  const localMenu: MenuItem = {
-    label: 'Menu',
-    children: [
-      {
-        label: 'Home',
-        to: '..',
-      },
-      ...(frameworks.length > 1
-        ? [
-            {
-              label: 'Frameworks',
-              to: './framework',
-            },
-          ]
-        : []),
-      {
-        label: 'Contributors',
-        to: '/$libraryId/$version/docs/contributors',
-      },
-      {
-        label: 'NPM Stats',
-        to: '/$libraryId/$version/docs/npm-stats',
-      },
-      ...(config.sections.find((d) => d.label === 'Community Resources')
-        ? [
-            {
-              label: 'Community Resources',
-              to: '/$libraryId/$version/docs/community-resources',
-            },
-          ]
-        : []),
-      {
-        label: (
-          <div className="flex items-center gap-2">
-            GitHub <GithubIcon className="opacity-20" />
-          </div>
-        ),
-        to: `https://github.com/${repo}`,
-      },
-      {
-        label: (
-          <div className="flex items-center gap-2">
-            Discord <DiscordIcon className="text-lg opacity-20" />
-          </div>
-        ),
-        to: 'https://tlinz.com/discord',
-      },
-    ],
-  }
-
-  return [
-    localMenu,
-    // Merge the two menus together based on their group labels
-    ...config.sections.map((section): MenuItem | undefined => {
-      const frameworkDocs = section.frameworks?.find(
-        (f) => f.label === currentFramework.framework,
-      )
-      const frameworkItems = frameworkDocs?.children ?? []
-
-      const children = [
-        ...section.children.map((d) => ({ ...d, badge: 'core' })),
-        ...frameworkItems.map((d) => ({
-          ...d,
-          badge: currentFramework.framework,
-        })),
-      ]
-
-      if (children.length === 0) {
-        return undefined
-      }
-
-      return {
-        label: section.label,
-        children,
-        collapsible: section.collapsible ?? false,
-        defaultCollapsed: section.defaultCollapsed ?? false,
-      }
-    }),
-  ].filter((item) => item !== undefined)
-}
-
-type DocsLayoutProps = {
-  name: string
-  version: string
-  colorFrom: string
-  colorTo: string
-  textColor: string
-  config: ConfigSchema
-  frameworks: Framework[]
-  versions: string[]
-  repo: string
-  children: React.ReactNode
-  isLandingPage?: boolean
-}
-
-export function DocsLayout({
-  colorFrom,
-  colorTo,
-  textColor,
-  config,
-  frameworks,
-  repo,
-  children,
-  isLandingPage = false,
-}: DocsLayoutProps) {
-  const { libraryId, version } = useParams({
-    strict: false,
-  }) as { libraryId: LibraryId; version: string }
-  const { _splat } = useParams({ strict: false })
-  const menuConfig = useMenuConfig({ config, frameworks, repo })
-
-  const matches = useMatches()
-  const lastMatch = last(matches)
-
-  const isExample = matches.some((d) => d.pathname.includes('/examples/'))
-
-  const isNpmStats = matches.some((d) => d.pathname.includes('/docs/npm-stats'))
-
-  const detailsRef = React.useRef<HTMLElement>(null!)
-
-  const flatMenu = React.useMemo(
-    () => menuConfig.flatMap((d) => d?.children),
-    [menuConfig],
-  )
-
-  // Filter out external links for prev/next navigation
-  const internalFlatMenu = React.useMemo(
-    () => flatMenu.filter((d) => d && !d.to.startsWith('http')),
-    [flatMenu],
-  )
-
-  const docsMatch = matches.find((d) => d.pathname.includes('/docs'))
-  const docsPathname = docsMatch?.pathname ?? ''
-
-  const relativePathname = lastMatch.pathname.replace(docsPathname + '/', '')
-
-  const index = internalFlatMenu.findIndex((d) => d?.to === relativePathname)
-  const prevItem = internalFlatMenu[index - 1]
-  const nextItem = internalFlatMenu[index + 1]
-
-  // Get current framework's logo for the preview strip
-  const currentFramework = useCurrentFramework(frameworks)
-  const currentFrameworkOption = frameworkOptions.find(
-    (f) => f.value === currentFramework.framework,
-  )
-
-  const [isFullWidth, setIsFullWidth] = useLocalStorage('docsFullWidth', false)
-
-  const activePartners = partners.filter(
-    (d) => d.status === 'active' && d.name !== 'Nozzle.io',
-  )
-
-  const menuItems = menuConfig.map((group, i) => {
-    const WrapperComp = group.collapsible ? 'details' : 'div'
-    const LabelComp = group.collapsible ? 'summary' : 'div'
-
-    const isChildActive = group.children.some((d) => d.to === _splat)
-    const configGroupOpenState =
-      typeof group.defaultCollapsed !== 'undefined'
-        ? !group.defaultCollapsed // defaultCollapsed is true means the group is closed
-        : undefined
-    const isOpen = isChildActive ? true : (configGroupOpenState ?? false)
-
-    const detailsProps = group.collapsible ? { open: isOpen } : {}
-
-    return (
-      <WrapperComp
-        key={`group-${i}`}
-        className="[&>summary]:before:mr-1 [&>summary]:marker:text-[0.8em] [&>summary]:marker:leading-4 relative select-none"
-        {...detailsProps}
-      >
-        <LabelComp className="text-[.8em] font-bold leading-4 px-2 ts-sidebar-label">
-          {group?.label}
-        </LabelComp>
-        <div className="h-2" />
-        <ul className="text-[.85em] leading-snug list-none">
-          {group?.children?.map((child, i) => {
-            const linkClasses = `flex gap-2 items-center justify-between group px-2 py-1.5 rounded-lg hover:bg-gray-500/10 opacity-60 hover:opacity-100`
-
-            return (
-              <li key={i}>
-                {child.to.startsWith('http') ? (
-                  <a
-                    href={child.to}
-                    className={linkClasses}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {child.label}
-                  </a>
-                ) : (
-                  <Link
-                    from="/$libraryId/$version/docs"
-                    to={child.to}
-                    params
-                    onClick={() => {
-                      detailsRef.current.removeAttribute('open')
-                    }}
-                    activeOptions={{
-                      exact: true,
-                      includeHash: false,
-                      includeSearch: false,
-                    }}
-                    className="relative"
-                  >
-                    {(props) => {
-                      return (
-                        <div
-                          className={twMerge(
-                            linkClasses,
-                            props.isActive && 'opacity-100',
-                          )}
-                        >
-                          <div
-                            className={twMerge(
-                              'w-full',
-                              props.isActive
-                                ? `font-bold text-transparent bg-clip-text bg-linear-to-r ${colorFrom} ${colorTo}`
-                                : '',
-                            )}
-                          >
-                            {child.label}
-                          </div>
-                        </div>
-                      )
-                    }}
-                  </Link>
-                )}
-              </li>
-            )
-          })}
-        </ul>
-      </WrapperComp>
-    )
-  })
-
-  const smallMenu = (
-    <div
-      className="sm:hidden bg-white/50 sticky top-[var(--navbar-height)]
-    max-h-[calc(100dvh-var(--navbar-height))] overflow-y-auto z-20 dark:bg-black/60 backdrop-blur-lg"
-    >
-      <details
-        ref={detailsRef as any}
-        id="docs-details"
-        className="border-b border-gray-500/20"
-      >
-        <summary className="py-2 px-4 flex gap-2 items-center">
-          <div className="flex gap-2 items-center shrink-0 pr-2">
-            <Menu className="cursor-pointer" />
-            Docs
-          </div>
-          <div className="w-px h-6 bg-gray-300 dark:bg-gray-600 shrink-0" />
-          <MobilePartnersStrip
-            partners={activePartners}
-            onLabelClick={() => {
-              const details = detailsRef.current as HTMLDetailsElement | null
-              if (details) {
-                details.open = !details.open
-              }
-            }}
-          />
-        </summary>
-        <div className="flex flex-col gap-4 p-4 overflow-y-auto border-t border-gray-500/20 bg-white/20 text-lg dark:bg-black/20">
-          <div className="flex flex-col gap-1">
-            <FrameworkSelect libraryId={libraryId} />
-            <VersionSelect libraryId={libraryId} />
-          </div>
-          <SearchButton />
-          {menuItems}
-        </div>
-      </details>
-    </div>
-  )
-
-  // State and timer for auto-hide behavior (similar to Navbar)
-  const [showLargeMenu, setShowLargeMenu] = React.useState(false)
-  const leaveTimer = React.useRef<NodeJS.Timeout | undefined>(undefined)
-
-  // Close menu when clicking outside (only on sm-xl screens where it's an overlay)
-  const expandedMenuRef = useClickOutside<HTMLDivElement>({
-    enabled:
-      showLargeMenu &&
-      typeof window !== 'undefined' &&
-      window.innerWidth < 1280,
-    onClickOutside: () => setShowLargeMenu(false),
-  })
-
-  const largeMenu = (
-    <>
-      {/* Collapsed strip - visible on sm to xl, hidden on xl+. Lower z-index so expanded menu covers it */}
-      <div
-        className={twMerge(
-          'hidden sm:flex xl:hidden flex-col overflow-hidden',
-          'sticky top-[var(--navbar-height)] h-[calc(100dvh-var(--navbar-height))]',
-          'z-10 border-r border-gray-500/20',
-          'bg-white/50 dark:bg-black/30',
-          'w-10',
-        )}
-      >
-        <DocsMenuStrip
-          menuConfig={menuConfig}
-          activeItem={relativePathname}
-          fullPathname={lastMatch.pathname}
-          colorFrom={colorFrom}
-          colorTo={colorTo}
-          frameworkLogo={currentFrameworkOption?.logo}
-          version={version}
-          onHover={() => {
-            if (window.innerWidth < 1280) {
-              // Only auto-show on lg screens, not xl+
-              clearTimeout(leaveTimer.current)
-              setShowLargeMenu(true)
-            }
-          }}
-          onClick={() => {
-            if (window.innerWidth < 1280) {
-              clearTimeout(leaveTimer.current)
-              setShowLargeMenu(true)
-            }
-          }}
-        />
-      </div>
-
-      {/* Expanded menu - always visible on xl+, toggleable overlay on sm-xl */}
-      <div
-        ref={expandedMenuRef}
-        className={twMerge(
-          'max-w-[250px] xl:max-w-[300px] 2xl:max-w-[400px]',
-          'flex-col overflow-hidden',
-          'h-[calc(100dvh-var(--navbar-height))] top-[var(--navbar-height)]',
-          'z-20 border-r border-gray-500/20',
-          'transition-all duration-300',
-          // Hidden on smallest screens, flex on sm+
-          'hidden sm:flex',
-          // On sm to xl: fixed overlay that slides in from left-0 (covers the strip)
-          'sm:fixed sm:left-0 sm:bg-white sm:dark:bg-black/95 sm:backdrop-blur-lg sm:shadow-xl',
-          // On xl+: sticky positioning, no overlay styling
-          'xl:sticky xl:bg-transparent xl:dark:bg-transparent xl:backdrop-blur-none xl:shadow-none',
-          // Slide animation for sm-xl screens (off-screen by default, slides in when shown)
-          // On xl+: always visible (no translate)
-          !showLargeMenu && 'sm:-translate-x-full xl:translate-x-0',
-          showLargeMenu && 'sm:translate-x-0',
-        )}
-        onPointerEnter={(e) => {
-          if (e.pointerType === 'touch') return
-          if (window.innerWidth < 1280) {
-            clearTimeout(leaveTimer.current)
-          }
-        }}
-        onPointerLeave={(e) => {
-          if (e.pointerType === 'touch') return
-          if (window.innerWidth < 1280) {
-            leaveTimer.current = setTimeout(() => {
-              setShowLargeMenu(false)
-            }, 300)
-          }
-        }}
-      >
-        <div className="flex-1 flex flex-col overflow-y-auto">
-          <div className="flex flex-col gap-1 p-4">
-            <FrameworkSelect libraryId={libraryId} />
-            <VersionSelect libraryId={libraryId} />
-          </div>
-          <div className="flex-1 flex flex-col gap-4 text-base px-4 pt-0 pb-4">
-            {menuItems}
-          </div>
-        </div>
-      </div>
-    </>
-  )
-
-  return (
-    <WidthToggleContext.Provider value={{ isFullWidth, setIsFullWidth }}>
-      <DocNavigationContext.Provider
-        value={{ prevItem, nextItem, colorFrom, colorTo, textColor }}
-      >
-        <div
-          className={`
-          min-h-[calc(100dvh-var(--navbar-height))]
-          flex flex-col sm:flex-row
-          w-full transition-all duration-300
-          [overflow-x:clip]`}
-        >
-          {smallMenu}
-          {largeMenu}
-          <div
-            className={twMerge(
-              'flex flex-col max-w-full min-w-0 flex-1 min-h-0 relative',
-              !isLandingPage && 'px-4 sm:px-8',
-            )}
-          >
-            <div
-              className={twMerge(
-                `max-w-full min-w-0 flex flex-col justify-center w-full`,
-                !isLandingPage && 'min-h-[88dvh] sm:min-h-0',
-                !isLandingPage &&
-                  !isExample &&
-                  !isNpmStats &&
-                  !isFullWidth &&
-                  'mx-auto w-[900px]',
-              )}
-            >
-              {children}
-            </div>
-            {!isLandingPage && (
-              <AdGate>
-                <div className="py-8 lg:py-12 xl:py-16 max-w-full">
-                  <GamHeader />
-                </div>
-              </AdGate>
-            )}
-          </div>
-          {!isLandingPage && (
-            <div
-              className="w-full sm:w-[300px] shrink-0 sm:sticky
-          sm:top-[var(--navbar-height)]
-          "
-            >
-              <div className="sm:sticky sm:top-[var(--navbar-height)] ml-auto flex flex-wrap flex-row justify-center sm:flex-col gap-4 pb-4 max-w-full overflow-hidden">
-                <div className="flex flex-wrap items-stretch border-l border-gray-500/20 rounded-bl-lg overflow-hidden w-full">
-                  <div className="w-full flex gap-2 justify-between border-b border-gray-500/20 px-3 py-2">
-                    <Link
-                      className="font-medium opacity-60 hover:opacity-100 text-xs"
-                      to="/partners"
-                    >
-                      Partners
-                    </Link>
-                    <a
-                      href="https://docs.google.com/document/d/1Hg2MzY2TU6U3hFEZ3MLe2oEOM3JS4-eByti3kdJU3I8"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="font-medium opacity-60 hover:opacity-100 text-xs hover:underline"
-                    >
-                      Become a Partner
-                    </a>
-                  </div>
-                  {activePartners
-                    .filter((d) => d.id !== 'fireship')
-                    .map((partner) => {
-                      // flexBasis as percentage based on score, flexGrow to fill remaining row space
-                      const widthPercent = Math.round(partner.score * 100)
-
-                      return (
-                        <a
-                          key={partner.name}
-                          href={partner.href}
-                          target="_blank"
-                          rel="noreferrer"
-                          className="flex items-center justify-center px-3 py-2
-                            border-r border-b border-gray-500/20
-                            hover:bg-gray-500/10 transition-colors duration-150 ease-out"
-                          style={{
-                            flexBasis: `${widthPercent}%`,
-                            flexGrow: 1,
-                            flexShrink: 0,
-                          }}
-                        >
-                          <div
-                            style={{
-                              width: Math.max(
-                                60 + Math.round(140 * partner.score),
-                                70,
-                              ),
-                            }}
-                          >
-                            <PartnerImage
-                              config={partner.image}
-                              alt={partner.name}
-                            />
-                          </div>
-                        </a>
-                      )
-                    })}
-                </div>
-                <AdGate>
-                  <GamVrec1
-                    popupPosition="top"
-                    borderClassName="rounded-l-xl rounded-r-none"
-                  />
-                </AdGate>
-                {libraryId === 'query' ? (
-                  <div className="p-4 bg-white/70 dark:bg-black/40 rounded-lg flex flex-col">
-                    <DocsCalloutQueryGG />
-                  </div>
-                ) : null}
-              </div>
-            </div>
-          )}
-        </div>
-      </DocNavigationContext.Provider>
-    </WidthToggleContext.Provider>
-  )
-}
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 0a58bbf33..2754c6a1e 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -20,6 +20,10 @@ type DropdownContentProps = {
   className?: string
   align?: 'start' | 'center' | 'end'
   sideOffset?: number
+  portal?: boolean
+  onFocus?: React.FocusEventHandler<HTMLDivElement>
+  onPointerEnter?: React.PointerEventHandler<HTMLDivElement>
+  onPointerLeave?: React.PointerEventHandler<HTMLDivElement>
 }
 
 type DropdownItemProps = {
@@ -63,24 +67,35 @@ export function DropdownContent({
   className,
   align = 'end',
   sideOffset = 6,
+  portal = true,
+  onFocus,
+  onPointerEnter,
+  onPointerLeave,
 }: DropdownContentProps) {
-  return (
-    <DropdownMenu.Portal>
-      <DropdownMenu.Content
-        align={align}
-        sideOffset={sideOffset}
-        className={twMerge(
-          'dropdown-content z-[1000] min-w-48 rounded-lg p-1.5',
-          'border border-gray-200 dark:border-gray-700',
-          'bg-white dark:bg-gray-800',
-          'shadow-lg',
-          className,
-        )}
-      >
-        {children}
-      </DropdownMenu.Content>
-    </DropdownMenu.Portal>
+  const content = (
+    <DropdownMenu.Content
+      align={align}
+      sideOffset={sideOffset}
+      onFocus={onFocus}
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
+      className={twMerge(
+        'dropdown-content z-[1200] min-w-48 rounded-lg p-1.5',
+        'border border-gray-200 dark:border-gray-700',
+        'bg-white dark:bg-gray-800',
+        'shadow-lg',
+        className,
+      )}
+    >
+      {children}
+    </DropdownMenu.Content>
   )
+
+  if (!portal) {
+    return content
+  }
+
+  return <DropdownMenu.Portal>{content}</DropdownMenu.Portal>
 }
 
 export function DropdownItem({
diff --git a/src/components/ExampleDeployDialog.tsx b/src/components/ExampleDeployDialog.tsx
new file mode 100644
index 000000000..39255933f
--- /dev/null
+++ b/src/components/ExampleDeployDialog.tsx
@@ -0,0 +1,480 @@
+/**
+ * Example Deploy Dialog Component
+ *
+ * Dialog for deploying a library example to GitHub and then to a cloud provider.
+ * Based on the builder's DeployDialog but fetches example files instead of compiling.
+ */
+
+import { useState, useEffect, useCallback } from 'react'
+import {
+  Loader2,
+  ExternalLink,
+  AlertCircle,
+  Check,
+  Lock,
+  Globe,
+  Rocket,
+} from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { useAsyncDebouncer } from '@tanstack/react-pacer'
+import { Button, GitHub } from '~/ui'
+import { useDeployAuth } from './builder/useDeployAuth'
+import {
+  type DeployProvider,
+  type DeployState,
+  type RepoNameStatus,
+  PROVIDER_INFO,
+  checkRepoNameAvailability,
+  validateRepoNameFormat,
+} from './deploy/shared'
+
+export type { DeployProvider }
+
+interface ExampleDeployDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  provider: DeployProvider
+  repo: string
+  branch: string
+  examplePath: string
+  exampleName: string
+  libraryName: string
+}
+
+function generateDefaultRepoName(examplePath: string): string {
+  const parts = examplePath.split('/')
+  return parts[parts.length - 1] || 'my-tanstack-app'
+}
+
+export function ExampleDeployDialog({
+  isOpen,
+  onClose,
+  provider,
+  repo,
+  branch,
+  examplePath,
+  exampleName,
+  libraryName,
+}: ExampleDeployDialogProps) {
+  const auth = useDeployAuth()
+  const providerInfo = PROVIDER_INFO[provider]
+
+  const defaultRepoName = generateDefaultRepoName(examplePath)
+  const [state, setState] = useState<DeployState>({ step: 'auth-check' })
+  const [repoName, setRepoName] = useState(defaultRepoName)
+  const [isPrivate, setIsPrivate] = useState(false)
+  const [countdown, setCountdown] = useState<number | null>(null)
+  const [repoNameStatus, setRepoNameStatus] = useState<RepoNameStatus>('idle')
+  const [repoNameError, setRepoNameError] = useState<string | null>(null)
+
+  // Debounced repo name availability check
+  const nameCheckDebouncer = useAsyncDebouncer(
+    async (name: string) => {
+      const result = await checkRepoNameAvailability(name)
+      if (result.available) {
+        setRepoNameStatus('available')
+        setRepoNameError(null)
+      } else {
+        setRepoNameStatus('taken')
+        setRepoNameError('Repository name already exists')
+      }
+    },
+    {
+      wait: 500,
+      onError: () => {
+        setRepoNameStatus('idle')
+        setRepoNameError(null)
+      },
+    },
+  )
+
+  // Reset repo name when dialog opens with new example
+  useEffect(() => {
+    if (isOpen) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setRepoName(defaultRepoName)
+    }
+  }, [isOpen, defaultRepoName])
+
+  // Validate and check repo name
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setRepoNameError(null)
+
+    const validation = validateRepoNameFormat(repoName)
+    if (!validation.valid) {
+      setRepoNameStatus(validation.error ? 'invalid' : 'idle')
+      setRepoNameError(validation.error ?? null)
+      return
+    }
+
+    if (!auth.hasRepoScope) {
+      setRepoNameStatus('idle')
+      return
+    }
+
+    setRepoNameStatus('checking')
+    nameCheckDebouncer.maybeExecute(repoName)
+  }, [repoName, auth.hasRepoScope]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Refresh auth state when dialog opens
+  useEffect(() => {
+    if (isOpen) {
+      auth.refresh()
+    }
+  }, [isOpen]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Check auth state when dialog opens or auth changes
+  useEffect(() => {
+    if (!isOpen) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setState({ step: 'auth-check' })
+      setCountdown(null)
+      return
+    }
+
+    if (auth.isLoading) {
+      setState({ step: 'auth-check' })
+      return
+    }
+
+    if (!auth.authenticated || !auth.hasGitHubAccount || !auth.hasRepoScope) {
+      setState({ step: 'needs-auth' })
+      return
+    }
+
+    setState({ step: 'form' })
+  }, [
+    isOpen,
+    auth.isLoading,
+    auth.authenticated,
+    auth.hasGitHubAccount,
+    auth.hasRepoScope,
+  ])
+
+  // Auto-redirect countdown
+  useEffect(() => {
+    if (state.step !== 'success' || countdown === null) return
+
+    if (countdown <= 0) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setCountdown(null)
+      const deployUrl = providerInfo.deployUrl(state.owner, state.repoName)
+      window.open(deployUrl, '_blank')
+      return
+    }
+
+    const timer = setTimeout(() => setCountdown(countdown - 1), 1000)
+    return () => clearTimeout(timer)
+  }, [state, countdown, providerInfo])
+
+  const handleDeploy = useCallback(async () => {
+    setState({ step: 'deploying', message: 'Fetching example files...' })
+
+    try {
+      const response = await fetch('/api/example/deploy', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          repoName,
+          isPrivate,
+          sourceRepo: repo,
+          branch,
+          examplePath,
+          provider,
+          libraryName,
+          exampleName,
+        }),
+      })
+
+      const data = await response.json()
+
+      if (!data.success) {
+        setState({
+          step: 'error',
+          message: data.error ?? 'Deployment failed',
+          code: data.code,
+        })
+        return
+      }
+
+      setState({
+        step: 'success',
+        repoUrl: data.repoUrl,
+        owner: data.owner,
+        repoName: data.repoName,
+      })
+      setCountdown(3)
+    } catch (error) {
+      setState({
+        step: 'error',
+        message: error instanceof Error ? error.message : 'Deployment failed',
+      })
+    }
+  }, [
+    repoName,
+    isPrivate,
+    repo,
+    branch,
+    examplePath,
+    provider,
+    libraryName,
+    exampleName,
+  ])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+        aria-label="Close dialog"
+      />
+
+      {/* Dialog */}
+      <div className="relative w-full max-w-md bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+        {/* Header */}
+        <div
+          className="px-6 py-4 border-b border-gray-200 dark:border-gray-700"
+          style={{ backgroundColor: `${providerInfo.color}10` }}
+        >
+          <div className="flex items-center gap-3">
+            <div
+              className="w-10 h-10 rounded-lg flex items-center justify-center"
+              style={{ backgroundColor: providerInfo.color }}
+            >
+              <Rocket className="w-5 h-5 text-white" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                Deploy to {providerInfo.name}
+              </h2>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                {exampleName}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6">
+          {state.step === 'auth-check' && (
+            <div className="flex flex-col items-center justify-center py-8">
+              <Loader2 className="w-8 h-8 animate-spin text-gray-400" />
+              <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
+                Checking authentication...
+              </p>
+            </div>
+          )}
+
+          {state.step === 'needs-auth' && (
+            <div className="flex flex-col items-center text-center py-4">
+              <div className="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">
+                <GitHub className="w-8 h-8 text-gray-600 dark:text-gray-400" />
+              </div>
+              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+                GitHub Authorization Required
+              </h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+                To deploy this example, we need permission to create a
+                repository on your GitHub account.
+              </p>
+              <Button
+                variant="primary"
+                onClick={auth.redirectToGitHubAuth}
+                className="gap-2"
+              >
+                <GitHub className="w-4 h-4" />
+                Connect GitHub
+              </Button>
+            </div>
+          )}
+
+          {state.step === 'form' && (
+            <div className="space-y-4">
+              <div>
+                <label
+                  htmlFor="repo-name"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
+                >
+                  Repository Name
+                </label>
+                <div className="relative">
+                  <input
+                    id="repo-name"
+                    type="text"
+                    value={repoName}
+                    onChange={(e) => setRepoName(e.target.value)}
+                    placeholder="my-tanstack-app"
+                    className={twMerge(
+                      'w-full px-3 py-2 pr-9 text-sm bg-white dark:bg-gray-800 border rounded-lg focus:outline-none focus:ring-2',
+                      repoNameStatus === 'taken' || repoNameStatus === 'invalid'
+                        ? 'border-red-400 dark:border-red-500 focus:ring-red-500'
+                        : repoNameStatus === 'available'
+                          ? 'border-green-400 dark:border-green-500 focus:ring-green-500'
+                          : 'border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-cyan-500',
+                    )}
+                  />
+                  <div className="absolute right-2.5 top-1/2 -translate-y-1/2">
+                    {repoNameStatus === 'checking' && (
+                      <Loader2 className="w-4 h-4 animate-spin text-gray-400" />
+                    )}
+                    {repoNameStatus === 'available' && (
+                      <Check className="w-4 h-4 text-green-500" />
+                    )}
+                    {(repoNameStatus === 'taken' ||
+                      repoNameStatus === 'invalid') && (
+                      <AlertCircle className="w-4 h-4 text-red-500" />
+                    )}
+                  </div>
+                </div>
+                {repoNameError && (
+                  <p className="mt-1 text-xs text-red-500">{repoNameError}</p>
+                )}
+              </div>
+
+              <div>
+                <span className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+                  Visibility
+                </span>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => setIsPrivate(false)}
+                    className={twMerge(
+                      'flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border text-sm font-medium transition-colors',
+                      !isPrivate
+                        ? 'bg-blue-50 dark:bg-cyan-900/30 border-blue-500 dark:border-cyan-500 text-blue-700 dark:text-cyan-300'
+                        : 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700',
+                    )}
+                  >
+                    <Globe className="w-4 h-4" />
+                    Public
+                  </button>
+                  <button
+                    onClick={() => setIsPrivate(true)}
+                    className={twMerge(
+                      'flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border text-sm font-medium transition-colors',
+                      isPrivate
+                        ? 'bg-blue-50 dark:bg-cyan-900/30 border-blue-500 dark:border-cyan-500 text-blue-700 dark:text-cyan-300'
+                        : 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700',
+                    )}
+                  >
+                    <Lock className="w-4 h-4" />
+                    Private
+                  </button>
+                </div>
+              </div>
+
+              <div className="text-xs text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
+                <span className="font-medium">Source: </span>
+                {libraryName} / {examplePath}
+              </div>
+
+              <div className="flex gap-3 pt-2">
+                <Button
+                  variant="secondary"
+                  onClick={onClose}
+                  className="flex-1"
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  onClick={handleDeploy}
+                  disabled={
+                    !repoName.trim() ||
+                    repoNameStatus === 'taken' ||
+                    repoNameStatus === 'invalid' ||
+                    repoNameStatus === 'checking'
+                  }
+                  className="flex-1 gap-2"
+                >
+                  <GitHub className="w-4 h-4" />
+                  Create & Deploy
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {state.step === 'deploying' && (
+            <div className="flex flex-col items-center justify-center py-8">
+              <Loader2 className="w-8 h-8 animate-spin text-blue-500 dark:text-cyan-400" />
+              <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
+                {state.message}
+              </p>
+            </div>
+          )}
+
+          {state.step === 'success' && (
+            <div className="flex flex-col items-center text-center py-4">
+              <div className="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mb-4">
+                <Check className="w-8 h-8 text-green-600 dark:text-green-400" />
+              </div>
+              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+                Repository Created!
+              </h3>
+              <a
+                href={state.repoUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-blue-600 dark:text-cyan-400 hover:underline flex items-center gap-1 mb-4"
+              >
+                {state.owner}/{state.repoName}
+                <ExternalLink className="w-3 h-3" />
+              </a>
+              {countdown !== null && countdown > 0 && (
+                <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+                  Redirecting to {providerInfo.name} in {countdown}s...
+                </p>
+              )}
+              <Button
+                variant="primary"
+                onClick={() => {
+                  setCountdown(null)
+                  const deployUrl = providerInfo.deployUrl(
+                    state.owner,
+                    state.repoName,
+                  )
+                  window.open(deployUrl, '_blank')
+                }}
+                className="gap-2"
+                style={{ backgroundColor: providerInfo.color }}
+              >
+                <Rocket className="w-4 h-4" />
+                Deploy Now
+              </Button>
+            </div>
+          )}
+
+          {state.step === 'error' && (
+            <div className="flex flex-col items-center text-center py-4">
+              <div className="w-16 h-16 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-4">
+                <AlertCircle className="w-8 h-8 text-red-600 dark:text-red-400" />
+              </div>
+              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+                Deployment Failed
+              </h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+                {state.message}
+              </p>
+              <div className="flex gap-3">
+                <Button variant="secondary" onClick={onClose}>
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  onClick={() => setState({ step: 'form' })}
+                >
+                  Try Again
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/FeatureGrid.tsx b/src/components/FeatureGrid.tsx
index 55c5a37e5..ff629fb99 100644
--- a/src/components/FeatureGrid.tsx
+++ b/src/components/FeatureGrid.tsx
@@ -22,8 +22,8 @@ export function FeatureGrid({ title, items, gridClassName }: FeatureGridProps) {
         }
       >
         {items.map((d, i) => (
-          <span key={i} className="flex items-center gap-2">
-            <CheckCircleIcon className="text-green-500 " /> {d}
+          <span key={i} className="flex gap-2">
+            <CheckCircleIcon className="text-green-500 h-lh w-4 shrink-0" /> {d}
           </span>
         ))}
       </div>
diff --git a/src/components/FeatureGridSection.tsx b/src/components/FeatureGridSection.tsx
deleted file mode 100644
index 1c40b25fe..000000000
--- a/src/components/FeatureGridSection.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { ReactNode } from 'react'
-import { FeatureGrid } from '~/components/FeatureGrid'
-
-interface FeatureGridSectionProps {
-  title: string
-  description?: ReactNode
-  items: ReactNode[]
-  gridClassName?: string
-}
-
-export function FeatureGridSection({
-  title,
-  description,
-  items,
-  gridClassName,
-}: FeatureGridSectionProps) {
-  return (
-    <div className="px-4 sm:px-6 lg:px-8 mx-auto">
-      <div className="pb-8">
-        <h3 className="text-3xl font-bold">{title}</h3>
-        {description && (
-          <p className="mt-4 text-xl max-w-3xl leading-7 opacity-60">
-            {description}
-          </p>
-        )}
-      </div>
-      <FeatureGrid items={items} gridClassName={gridClassName} />
-    </div>
-  )
-}
diff --git a/src/components/FeedEntry.tsx b/src/components/FeedEntry.tsx
deleted file mode 100644
index 1e23dcc5a..000000000
--- a/src/components/FeedEntry.tsx
+++ /dev/null
@@ -1,442 +0,0 @@
-import { format, formatDistanceToNow } from '~/utils/dates'
-import { Markdown } from '~/components/markdown'
-import { libraries } from '~/libraries'
-import { partners } from '~/utils/partners'
-import { twMerge } from 'tailwind-merge'
-import { Link } from '@tanstack/react-router'
-import { TableRow, TableCell } from '~/components/TableComponents'
-import { Eye, EyeOff, SquarePen, Star, Trash } from 'lucide-react'
-
-export interface FeedEntry {
-  _id: string
-  id: string
-  entryType: 'release' | 'blog' | 'announcement'
-  title: string
-  content: string
-  excerpt?: string | null
-  publishedAt: number
-  createdAt: number
-  updatedAt?: number
-  metadata?: any
-  libraryIds: string[]
-  partnerIds?: string[]
-  tags: string[]
-  showInFeed: boolean
-  featured?: boolean
-  autoSynced: boolean
-  lastSyncedAt?: number
-}
-
-interface FeedEntryProps {
-  entry: FeedEntry
-  showFullContent?: boolean
-  expanded?: boolean
-  onExpandedChange?: (expanded: boolean) => void
-  adminActions?: {
-    onEdit?: (entry: FeedEntry) => void
-    onToggleVisibility?: (entry: FeedEntry, isVisible: boolean) => void
-    onToggleFeatured?: (entry: FeedEntry, featured: boolean) => void
-    onDelete?: (entry: FeedEntry) => void
-  }
-}
-
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export function FeedEntry({
-  entry,
-  showFullContent = false,
-  expanded: expandedProp,
-  onExpandedChange,
-  adminActions,
-}: FeedEntryProps) {
-  const expanded = expandedProp ?? showFullContent
-  const setExpanded = (value: boolean) => {
-    onExpandedChange?.(value)
-  }
-
-  // Get library info
-  const entryLibraries = entry.libraryIds
-    .map((id) => libraries.find((lib) => lib.id === id))
-    .filter((lib): lib is (typeof libraries)[number] => lib !== undefined)
-
-  // Get partner info
-  const entryPartners = entry.partnerIds
-    ? entry.partnerIds
-        .map((id) => partners.find((p) => p.id === id))
-        .filter((p): p is (typeof partners)[number] => p !== undefined)
-    : []
-
-  // Determine entry type badge
-  const getTypeBadge = () => {
-    // Check if this is a prerelease
-    const isPrerelease = entry.tags.includes('release:prerelease')
-
-    const badgeConfigs: Record<string, { label: string; className: string }> = {
-      release: {
-        label: 'Release',
-        className:
-          'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200',
-      },
-      prerelease: {
-        label: 'Prerelease',
-        className:
-          'bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200',
-      },
-      blog: {
-        label: 'Blog',
-        className:
-          'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200',
-      },
-      announcement: {
-        label: 'Announcement',
-        className:
-          'bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200',
-      },
-      partner: {
-        label: 'Partner',
-        className:
-          'bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200',
-      },
-      update: {
-        label: 'Update',
-        className:
-          'bg-teal-100 dark:bg-teal-900 text-teal-800 dark:text-teal-200',
-      },
-    }
-
-    const key =
-      entry.entryType === 'release' && isPrerelease
-        ? 'prerelease'
-        : entry.entryType
-
-    return (
-      badgeConfigs[key] || {
-        label: entry.entryType,
-        className:
-          'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200',
-      }
-    )
-  }
-
-  const badge = getTypeBadge()
-
-  // Get release level badge if present
-  // Prereleases will have both release:prerelease and release:major/minor/patch tags
-  // We want to show the base release level (major/minor/patch) badge
-  const getReleaseLevelBadge = () => {
-    // Find the base release level tag (major/minor/patch), ignoring prerelease tag
-    const releaseLevelTag = entry.tags.find(
-      (tag) =>
-        tag.startsWith('release:') &&
-        tag !== 'release:prerelease' &&
-        (tag === 'release:major' ||
-          tag === 'release:minor' ||
-          tag === 'release:patch'),
-    )
-    if (!releaseLevelTag) return null
-
-    const level = releaseLevelTag.replace('release:', '')
-    const badgeConfigs: Record<string, { label: string; className: string }> = {
-      major: {
-        label: 'Major',
-        className:
-          'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200',
-      },
-      minor: {
-        label: 'Minor',
-        className:
-          'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200',
-      },
-      patch: {
-        label: 'Patch',
-        className:
-          'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200',
-      },
-    }
-
-    return badgeConfigs[level] || null
-  }
-
-  const releaseLevelBadge = getReleaseLevelBadge()
-
-  // Determine external link if available
-  const getExternalLink = () => {
-    if (entry.metadata) {
-      if (entry.entryType === 'release' && entry.metadata.url) {
-        return entry.metadata.url
-      }
-      if (entry.entryType === 'blog' && entry.metadata.url) {
-        return entry.metadata.url
-      }
-    }
-    return null
-  }
-
-  const externalLink = getExternalLink()
-
-  const colSpan = adminActions ? 7 : 6
-
-  return (
-    <>
-      {/* Table Row */}
-      <TableRow
-        className={twMerge(
-          'cursor-pointer',
-          entry.featured && 'bg-yellow-50 dark:bg-yellow-900/10',
-        )}
-        onClick={() => setExpanded(!expanded)}
-      >
-        {/* Expand Arrow */}
-        <TableCell className="w-5 whitespace-nowrap">
-          <button
-            className="flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-            onClick={(e) => {
-              e.stopPropagation()
-              setExpanded(!expanded)
-            }}
-          >
-            <svg
-              className={twMerge(
-                'w-3.5 h-3.5 transition-transform',
-                expanded && 'rotate-90',
-              )}
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
-          </button>
-        </TableCell>
-
-        {/* Date */}
-        <TableCell className="hidden sm:table-cell text-[11px] text-gray-500 dark:text-gray-400 whitespace-nowrap">
-          <time
-            dateTime={new Date(entry.publishedAt).toISOString()}
-            title={format(new Date(entry.publishedAt), 'PPpp')}
-            className="cursor-help"
-          >
-            {formatDistanceToNow(new Date(entry.publishedAt), {
-              addSuffix: true,
-            })}
-          </time>
-        </TableCell>
-
-        {/* Badges */}
-        <TableCell className="whitespace-nowrap">
-          <div className="flex items-center gap-1">
-            {/* Category Badge (Release, Blog, Announcement, etc.) */}
-            <span
-              className={twMerge(
-                'px-1.5 py-0.5 rounded text-[10px] font-medium uppercase',
-                badge.className,
-              )}
-            >
-              {badge.label}
-            </span>
-            {/* Release Level Badge (Major, Minor, Patch, Pre) */}
-            {releaseLevelBadge && (
-              <span
-                className={twMerge(
-                  'px-1.5 py-0.5 rounded text-[10px] font-medium uppercase',
-                  releaseLevelBadge.className,
-                )}
-              >
-                {releaseLevelBadge.label}
-              </span>
-            )}
-          </div>
-        </TableCell>
-
-        {/* Title */}
-        <TableCell className="whitespace-nowrap">
-          <Link
-            to="/feed/$id"
-            params={{ id: entry._id }}
-            onClick={(e) => e.stopPropagation()}
-            className="text-xs font-semibold text-gray-900 dark:text-gray-100 truncate hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
-          >
-            {entry.title}
-          </Link>
-        </TableCell>
-
-        {/* Excerpt */}
-        <TableCell className="hidden md:table-cell whitespace-nowrap">
-          {entry.excerpt ? (
-            <p className="text-[11px] text-gray-600 dark:text-gray-400 truncate">
-              {entry.excerpt.replace(/\n/g, ' ')}
-            </p>
-          ) : (
-            <span className="text-[11px] text-gray-400 dark:text-gray-500">
-              —
-            </span>
-          )}
-        </TableCell>
-
-        {/* Tags/Badges */}
-        <TableCell className="hidden md:table-cell whitespace-nowrap">
-          <div className="flex items-center gap-1">
-            {entry.featured && (
-              <span className="px-1 py-0.5 rounded text-[10px] bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
-                ⭐
-              </span>
-            )}
-            {!entry.showInFeed && (
-              <span className="px-1 py-0.5 rounded text-[10px] bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">
-                Hidden
-              </span>
-            )}
-            {entryLibraries.length > 0 && (
-              <span className="text-[11px] text-gray-500 dark:text-gray-400 truncate">
-                {entryLibraries.map((lib) => lib.name).join(', ')}
-              </span>
-            )}
-          </div>
-        </TableCell>
-
-        {/* Admin Actions Column */}
-        {adminActions && (
-          <TableCell
-            className="hidden md:table-cell text-right whitespace-nowrap"
-            align="right"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center justify-end gap-0.5">
-              {adminActions.onEdit && (
-                <button
-                  onClick={() => adminActions.onEdit!(entry)}
-                  className="p-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors text-gray-600 dark:text-gray-400"
-                  title="Edit"
-                >
-                  <SquarePen className="w-3 h-3" />
-                </button>
-              )}
-              {adminActions.onToggleVisibility && (
-                <button
-                  onClick={() =>
-                    adminActions.onToggleVisibility!(entry, !entry.showInFeed)
-                  }
-                  className="p-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors text-gray-600 dark:text-gray-400"
-                  title={entry.showInFeed ? 'Hide' : 'Show'}
-                >
-                  {entry.showInFeed ? (
-                    <Eye className="w-3 h-3" />
-                  ) : (
-                    <EyeOff className="w-3 h-3" />
-                  )}
-                </button>
-              )}
-              {adminActions.onToggleFeatured && (
-                <button
-                  onClick={() =>
-                    adminActions.onToggleFeatured!(entry, !entry.featured)
-                  }
-                  className={`p-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors ${
-                    entry.featured
-                      ? 'text-yellow-500'
-                      : 'text-gray-600 dark:text-gray-400'
-                  }`}
-                  title="Toggle Featured"
-                >
-                  <Star className="w-3 h-3" />
-                </button>
-              )}
-              {adminActions.onDelete && (
-                <button
-                  onClick={() => adminActions.onDelete!(entry)}
-                  className="p-0.5 hover:bg-red-100 dark:hover:bg-red-900 rounded transition-colors text-red-500"
-                  title="Delete"
-                >
-                  <Trash className="w-3 h-3" />
-                </button>
-              )}
-            </div>
-          </TableCell>
-        )}
-      </TableRow>
-
-      {/* Expanded Content */}
-      {expanded && (
-        <TableRow className="bg-gray-50 dark:bg-gray-900/30">
-          <TableCell colSpan={colSpan} className="px-2 py-4">
-            <div className="pl-8">
-              {/* Metadata Row */}
-              <div className="flex items-center gap-4 mb-3 text-[11px] text-gray-600 dark:text-gray-400">
-                {entryLibraries.length > 0 && (
-                  <div className="flex items-center gap-2">
-                    <span>Libraries:</span>
-                    <div className="flex gap-1">
-                      {entryLibraries.map((lib) => (
-                        <span
-                          key={lib.id}
-                          className="px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"
-                        >
-                          {lib.name}
-                        </span>
-                      ))}
-                    </div>
-                  </div>
-                )}
-                {entryPartners.length > 0 && (
-                  <div className="flex items-center gap-2">
-                    <span>Partners:</span>
-                    <div className="flex gap-1">
-                      {entryPartners.map((partner) => (
-                        <span
-                          key={partner.id}
-                          className="px-1.5 py-0.5 rounded bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200"
-                        >
-                          {partner.name}
-                        </span>
-                      ))}
-                    </div>
-                  </div>
-                )}
-                {entry.tags.length > 0 && (
-                  <div className="flex items-center gap-2">
-                    <span>Tags:</span>
-                    <div className="flex gap-1 flex-wrap">
-                      {entry.tags.map((tag) => (
-                        <span
-                          key={tag}
-                          className="px-1.5 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400"
-                        >
-                          {tag}
-                        </span>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* Content */}
-              <div className="text-xs text-gray-900 dark:text-gray-100 leading-snug mb-3">
-                <Markdown rawContent={entry.content} />
-              </div>
-
-              {/* External Link */}
-              {externalLink && (
-                <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
-                  <a
-                    href={externalLink}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-blue-600 dark:text-blue-400 hover:underline text-xs font-medium"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    View on {entry.entryType === 'release' ? 'GitHub' : 'Blog'}{' '}
-                    →
-                  </a>
-                </div>
-              )}
-            </div>
-          </TableCell>
-        </TableRow>
-      )}
-    </>
-  )
-}
diff --git a/src/components/FeedEntryTimeline.tsx b/src/components/FeedEntryTimeline.tsx
deleted file mode 100644
index 67ddb2b89..000000000
--- a/src/components/FeedEntryTimeline.tsx
+++ /dev/null
@@ -1,364 +0,0 @@
-import * as React from 'react'
-import { format, formatDistanceToNow } from '~/utils/dates'
-import { Markdown } from '~/components/markdown'
-import { Card } from '~/components/Card'
-import { libraries } from '~/libraries'
-import { partners } from '~/utils/partners'
-import { twMerge } from 'tailwind-merge'
-import { FeedEntry } from './FeedEntry'
-import { Link } from '@tanstack/react-router'
-import { Eye, EyeOff, SquarePen, Star, Trash } from 'lucide-react'
-
-interface FeedEntryTimelineProps {
-  entry: FeedEntry
-  expanded?: boolean
-  onExpandedChange?: (expanded: boolean) => void
-  adminActions?: {
-    onEdit?: (entry: FeedEntry) => void
-    onToggleVisibility?: (entry: FeedEntry, isVisible: boolean) => void
-    onToggleFeatured?: (entry: FeedEntry, featured: boolean) => void
-    onDelete?: (entry: FeedEntry) => void
-  }
-}
-
-export function FeedEntryTimeline({
-  entry,
-  expanded: expandedProp = false,
-  onExpandedChange,
-  adminActions,
-}: FeedEntryTimelineProps) {
-  const expanded = expandedProp
-  const setExpanded = (value: boolean) => {
-    onExpandedChange?.(value)
-  }
-
-  // Get library info
-  const entryLibraries = entry.libraryIds
-    .map((id) => libraries.find((lib) => lib.id === id))
-    .filter(Boolean)
-
-  // Get partner info
-  const entryPartners = entry.partnerIds
-    ? entry.partnerIds
-        .map((id) => partners.find((p) => p.id === id))
-        .filter(Boolean)
-    : []
-
-  // Determine entry type badge
-  const getTypeBadge = () => {
-    const isPrerelease = entry.tags.includes('release:prerelease')
-
-    const badgeConfigs: Record<string, { label: string; className: string }> = {
-      release: {
-        label: 'Release',
-        className:
-          'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200',
-      },
-      prerelease: {
-        label: 'Prerelease',
-        className:
-          'bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200',
-      },
-      blog: {
-        label: 'Blog',
-        className:
-          'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200',
-      },
-      announcement: {
-        label: 'Announcement',
-        className:
-          'bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200',
-      },
-      partner: {
-        label: 'Partner',
-        className:
-          'bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200',
-      },
-      update: {
-        label: 'Update',
-        className:
-          'bg-teal-100 dark:bg-teal-900 text-teal-800 dark:text-teal-200',
-      },
-    }
-
-    const key =
-      entry.entryType === 'release' && isPrerelease
-        ? 'prerelease'
-        : entry.entryType
-
-    return (
-      badgeConfigs[key] || {
-        label: entry.entryType,
-        className:
-          'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200',
-      }
-    )
-  }
-
-  const badge = getTypeBadge()
-
-  // Get release level badge if present
-  const getReleaseLevelBadge = () => {
-    const releaseLevelTag = entry.tags.find(
-      (tag) =>
-        tag.startsWith('release:') &&
-        tag !== 'release:prerelease' &&
-        (tag === 'release:major' ||
-          tag === 'release:minor' ||
-          tag === 'release:patch'),
-    )
-    if (!releaseLevelTag) return null
-
-    const level = releaseLevelTag.replace('release:', '')
-    const badgeConfigs: Record<string, { label: string; className: string }> = {
-      major: {
-        label: 'Major',
-        className:
-          'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200',
-      },
-      minor: {
-        label: 'Minor',
-        className:
-          'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200',
-      },
-      patch: {
-        label: 'Patch',
-        className:
-          'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200',
-      },
-    }
-
-    return badgeConfigs[level] || null
-  }
-
-  const releaseLevelBadge = getReleaseLevelBadge()
-
-  // Determine external link if available
-  const getExternalLink = () => {
-    if (entry.metadata) {
-      if (entry.entryType === 'release' && entry.metadata.url) {
-        return entry.metadata.url
-      }
-      if (entry.entryType === 'blog' && entry.metadata.url) {
-        return entry.metadata.url
-      }
-    }
-    return null
-  }
-
-  const externalLink = getExternalLink()
-
-  return (
-    <Card
-      as="article"
-      className={twMerge(
-        'p-6 transition-all',
-        'hover:shadow-sm hover:border-gray-300 dark:hover:border-gray-700',
-        entry.featured &&
-          'bg-yellow-50 dark:bg-yellow-900/10 border-yellow-200 dark:border-yellow-800',
-      )}
-    >
-      {/* Header */}
-      <div className="flex items-start justify-between gap-4 mb-4">
-        <div className="flex-1 min-w-0">
-          {/* Badges and Date */}
-          <div className="flex items-center gap-2 flex-wrap mb-2">
-            <span
-              className={twMerge(
-                'px-2.5 py-1 rounded-md text-xs font-medium uppercase',
-                badge.className,
-              )}
-            >
-              {badge.label}
-            </span>
-            {releaseLevelBadge && (
-              <span
-                className={twMerge(
-                  'px-2.5 py-1 rounded-md text-xs font-medium uppercase',
-                  releaseLevelBadge.className,
-                )}
-              >
-                {releaseLevelBadge.label}
-              </span>
-            )}
-            {entry.featured && (
-              <span className="px-2.5 py-1 rounded-md text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
-                ⭐ Featured
-              </span>
-            )}
-            {!entry.showInFeed && (
-              <span className="px-2.5 py-1 rounded-md text-xs bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">
-                Hidden
-              </span>
-            )}
-          </div>
-
-          {/* Title */}
-          <Link
-            to="/feed/$id"
-            params={{ id: entry._id }}
-            className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2 hover:text-blue-600 dark:hover:text-blue-400 transition-colors block"
-          >
-            {entry.title}
-          </Link>
-
-          {/* Metadata */}
-          <div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400 flex-wrap">
-            <time
-              dateTime={new Date(entry.publishedAt).toISOString()}
-              title={format(new Date(entry.publishedAt), 'PPpp')}
-              className="cursor-help"
-            >
-              {formatDistanceToNow(new Date(entry.publishedAt), {
-                addSuffix: true,
-              })}
-            </time>
-            {entry.autoSynced && (
-              <span className="capitalize">
-                {entry.entryType === 'release' ? 'GitHub' : entry.entryType}
-              </span>
-            )}
-            {entryLibraries.length > 0 && (
-              <div className="flex items-center gap-2">
-                <span>Libraries:</span>
-                <div className="flex gap-1 flex-wrap">
-                  {entryLibraries.map((lib) => (
-                    <span
-                      key={lib!.id}
-                      className="px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs"
-                    >
-                      {lib!.name}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            )}
-            {entryPartners.length > 0 && (
-              <div className="flex items-center gap-2">
-                <span>Partners:</span>
-                <div className="flex gap-1 flex-wrap">
-                  {entryPartners.map((partner) => (
-                    <span
-                      key={partner!.id}
-                      className="px-2 py-0.5 rounded bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 text-xs"
-                    >
-                      {partner!.name}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Admin Actions */}
-        {adminActions && (
-          <div className="flex items-center gap-1 flex-shrink-0">
-            {adminActions.onEdit && (
-              <button
-                onClick={() => adminActions.onEdit!(entry)}
-                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors text-gray-600 dark:text-gray-400"
-                title="Edit"
-              >
-                <SquarePen className="w-4 h-4" />
-              </button>
-            )}
-            {adminActions.onToggleVisibility && (
-              <button
-                onClick={() =>
-                  adminActions.onToggleVisibility!(entry, !entry.showInFeed)
-                }
-                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors text-gray-600 dark:text-gray-400"
-                title={entry.showInFeed ? 'Hide' : 'Show'}
-              >
-                {entry.showInFeed ? (
-                  <Eye className="w-4 h-4" />
-                ) : (
-                  <EyeOff className="w-4 h-4" />
-                )}
-              </button>
-            )}
-            {adminActions.onToggleFeatured && (
-              <button
-                onClick={() =>
-                  adminActions.onToggleFeatured!(entry, !entry.featured)
-                }
-                className={twMerge(
-                  'p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors',
-                  entry.featured
-                    ? 'text-yellow-500'
-                    : 'text-gray-600 dark:text-gray-400',
-                )}
-                title="Toggle Featured"
-              >
-                <Star className="w-4 h-4" />
-              </button>
-            )}
-            {adminActions.onDelete && (
-              <button
-                onClick={() => adminActions.onDelete!(entry)}
-                className="p-2 hover:bg-red-100 dark:hover:bg-red-900 rounded transition-colors text-red-500"
-                title="Delete"
-              >
-                <Trash className="w-4 h-4" />
-              </button>
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* Content */}
-      <div className="mb-4">
-        {/* Tags - Only show when expanded */}
-        {expanded && entry.tags.length > 0 && (
-          <div className="flex items-center gap-2 mb-4 flex-wrap">
-            <span className="text-sm text-gray-600 dark:text-gray-400">
-              Tags:
-            </span>
-            {entry.tags.map((tag) => (
-              <span
-                key={tag}
-                className="px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs"
-              >
-                {tag}
-              </span>
-            ))}
-          </div>
-        )}
-
-        {/* Content - Truncated when not expanded */}
-        <div
-          className={twMerge(
-            'text-sm text-gray-900 dark:text-gray-100 leading-relaxed prose prose-sm dark:prose-invert max-w-none',
-            !expanded && 'line-clamp-6',
-          )}
-        >
-          <Markdown rawContent={entry.content} />
-        </div>
-
-        {/* Show more/less button */}
-        <button
-          onClick={() => setExpanded(!expanded)}
-          className="mt-3 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 font-medium"
-        >
-          {expanded ? 'Show less' : 'Show more'}
-        </button>
-      </div>
-
-      {/* Footer */}
-      {externalLink && (
-        <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
-          <a
-            href={externalLink}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium"
-            onClick={(e) => e.stopPropagation()}
-          >
-            View on {entry.entryType === 'release' ? 'GitHub' : 'Blog'} →
-          </a>
-        </div>
-      )}
-    </Card>
-  )
-}
diff --git a/src/components/FeedList.tsx b/src/components/FeedList.tsx
deleted file mode 100644
index 2ea4b50b5..000000000
--- a/src/components/FeedList.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import * as React from 'react'
-import {
-  UseQueryResult,
-  UseInfiniteQueryResult,
-  InfiniteData,
-} from '@tanstack/react-query'
-import { FeedEntry } from '~/components/FeedEntry'
-import { FeedEntryTimeline } from '~/components/FeedEntryTimeline'
-import { Spinner } from '~/components/Spinner'
-import { PaginationControls } from '~/components/PaginationControls'
-import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
-import type { FeedFilters } from '~/queries/feed'
-import type { FeedViewMode } from '~/db/types'
-import {
-  Table,
-  TableHeader,
-  TableHeaderRow,
-  TableHeaderCell,
-  TableBody,
-} from '~/components/TableComponents'
-
-interface FeedListProps {
-  query?: UseQueryResult<{
-    page: FeedEntry[]
-    isDone: boolean
-    counts: {
-      total: number
-      pages: number
-    }
-  }>
-  infiniteQuery?: UseInfiniteQueryResult<
-    InfiniteData<{
-      page: FeedEntry[]
-      isDone: boolean
-      counts: {
-        total: number
-        pages: number
-      }
-    }>
-  >
-  filters?: FeedFilters
-  currentPage: number
-  pageSize: number
-  onPageChange: (page: number) => void
-  onPageSizeChange: (pageSize: number) => void
-  viewMode?: FeedViewMode
-  expandedIds?: string[]
-  onExpandedChange?: (expandedIds: string[]) => void
-  onViewModeChange?: (viewMode: FeedViewMode) => void
-  onFiltersChange?: (filters: Partial<FeedFilters>) => void
-  adminActions?: {
-    onEdit?: (entry: FeedEntry) => void
-    onToggleVisibility?: (entry: FeedEntry, isVisible: boolean) => void
-    onToggleFeatured?: (entry: FeedEntry, featured: boolean) => void
-    onDelete?: (entry: FeedEntry) => void
-  }
-}
-
-export function FeedList({
-  query,
-  infiniteQuery,
-  currentPage,
-  pageSize,
-  onPageChange,
-  onPageSizeChange,
-  viewMode = 'table',
-  expandedIds,
-  onExpandedChange,
-  adminActions,
-}: FeedListProps) {
-  // For timeline mode, use infinite query
-  const isTimelineMode = viewMode === 'timeline'
-  const activeQuery = isTimelineMode ? infiniteQuery : query
-
-  // Intersection observer for infinite scrolling in timeline mode
-  const { ref: loadMoreRef, isIntersecting } = useIntersectionObserver({
-    rootMargin: '200px',
-    threshold: 0,
-    triggerOnce: false,
-  })
-
-  // Load more when intersection observer triggers in timeline mode
-  React.useEffect(() => {
-    if (
-      isTimelineMode &&
-      infiniteQuery &&
-      isIntersecting &&
-      infiniteQuery.hasNextPage &&
-      !infiniteQuery.isFetchingNextPage &&
-      !infiniteQuery.isLoading &&
-      infiniteQuery.data
-    ) {
-      infiniteQuery.fetchNextPage()
-    }
-  }, [
-    isTimelineMode,
-    infiniteQuery,
-    infiniteQuery?.hasNextPage,
-    infiniteQuery?.isFetchingNextPage,
-    infiniteQuery?.isLoading,
-    infiniteQuery?.data,
-    isIntersecting,
-  ])
-
-  // Table and timeline modes need the query
-  if (!activeQuery) {
-    return (
-      <div className="text-center py-12">
-        <p className="text-gray-600 dark:text-gray-400">
-          Loading feed entries...
-        </p>
-      </div>
-    )
-  }
-
-  if (activeQuery.isLoading) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <Spinner className="text-3xl text-gray-500" />
-      </div>
-    )
-  }
-
-  if (activeQuery.isError) {
-    return (
-      <div className="text-center py-12">
-        <p className="text-red-500 dark:text-red-400">
-          Error loading feed entries. Please try again later.
-        </p>
-      </div>
-    )
-  }
-
-  // For timeline mode, flatten all pages from infinite query
-  let allEntries: FeedEntry[] = []
-  let data: {
-    page: FeedEntry[]
-    isDone: boolean
-    counts: { total: number; pages: number }
-  } | null = null
-
-  if (isTimelineMode && infiniteQuery?.data) {
-    // Flatten all pages from InfiniteData structure
-    // infiniteQuery.data is InfiniteData which has a pages array
-    const pages = infiniteQuery.data.pages
-    allEntries = pages.flatMap((page) => page.page)
-    // Use first page's counts for reference
-    const firstPage = pages[0]
-    data = {
-      page: allEntries,
-      isDone: !infiniteQuery.hasNextPage,
-      counts: firstPage?.counts || { total: 0, pages: 0 },
-    }
-  } else if (query?.data) {
-    data = query.data
-    allEntries = data.page
-  }
-
-  if (!data || allEntries.length === 0) {
-    return (
-      <div className="text-center py-12">
-        <p className="text-gray-600 dark:text-gray-400">
-          No feed entries found. Try adjusting your filters.
-        </p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="min-w-0 relative">
-      {/* Table View */}
-      {viewMode === 'table' && (
-        <Table>
-          <TableHeader>
-            <TableHeaderRow>
-              <TableHeaderCell width="w-5"></TableHeaderCell>
-              <TableHeaderCell>Date</TableHeaderCell>
-              <TableHeaderCell>Type</TableHeaderCell>
-              <TableHeaderCell>Title</TableHeaderCell>
-              <TableHeaderCell>Excerpt</TableHeaderCell>
-              <TableHeaderCell>Tags</TableHeaderCell>
-              {adminActions && (
-                <TableHeaderCell align="right">Actions</TableHeaderCell>
-              )}
-            </TableHeaderRow>
-          </TableHeader>
-          <TableBody>
-            {data.page.map((entry) => (
-              <FeedEntry
-                key={entry._id}
-                entry={entry}
-                expanded={expandedIds?.includes(entry._id) ?? false}
-                onExpandedChange={(expanded) => {
-                  if (!onExpandedChange) return
-                  const current = expandedIds ?? []
-                  if (expanded) {
-                    onExpandedChange([...current, entry._id])
-                  } else {
-                    onExpandedChange(current.filter((id) => id !== entry._id))
-                  }
-                }}
-                adminActions={adminActions}
-              />
-            ))}
-          </TableBody>
-        </Table>
-      )}
-
-      {/* Timeline View */}
-      {viewMode === 'timeline' && (
-        <div className="space-y-4">
-          {allEntries.map((entry) => (
-            <FeedEntryTimeline
-              key={entry._id}
-              entry={entry}
-              expanded={expandedIds?.includes(entry._id) ?? false}
-              onExpandedChange={(expanded) => {
-                if (!onExpandedChange) return
-                const current = expandedIds ?? []
-                if (expanded) {
-                  onExpandedChange([...current, entry._id])
-                } else {
-                  onExpandedChange(current.filter((id) => id !== entry._id))
-                }
-              }}
-              adminActions={adminActions}
-            />
-          ))}
-          {/* Load more sentinel */}
-          {infiniteQuery && (
-            <div
-              ref={loadMoreRef}
-              className="py-4 flex items-center justify-center min-h-[100px]"
-            >
-              {infiniteQuery.isFetchingNextPage && (
-                <Spinner className="text-gray-500" />
-              )}
-              {!infiniteQuery.hasNextPage && allEntries.length > 0 && (
-                <p className="text-sm text-gray-500 dark:text-gray-400">
-                  No more entries to load
-                </p>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Pagination Controls - Bottom (Sticky) - Only for table mode */}
-      {viewMode === 'table' && data && data.page.length > 0 && (
-        <PaginationControls
-          currentPage={currentPage - 1}
-          totalPages={data.counts.pages}
-          totalItems={data.counts.total}
-          pageSize={pageSize}
-          onPageChange={(page) => onPageChange(page + 1)}
-          onPageSizeChange={onPageSizeChange}
-          canGoPrevious={currentPage > 1}
-          canGoNext={!data.isDone}
-          itemLabel="entries"
-          sticky
-        />
-      )}
-    </div>
-  )
-}
diff --git a/src/components/FeedPage.tsx b/src/components/FeedPage.tsx
deleted file mode 100644
index c37ee1e89..000000000
--- a/src/components/FeedPage.tsx
+++ /dev/null
@@ -1,309 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useMounted } from '~/hooks/useMounted'
-import { FeedList } from '~/components/FeedList'
-import { FeedTopBarFilters } from '~/components/FeedTopBarFilters'
-import { useFeedQuery } from '~/hooks/useFeedQuery'
-import { useFeedInfiniteQuery } from '~/hooks/useFeedInfiniteQuery'
-import { FeedEntry } from '~/components/FeedEntry'
-import { FEED_DEFAULTS } from '~/utils/feedDefaults'
-import { libraries } from '~/libraries'
-import { partners } from '~/utils/partners'
-import { useQuery } from '@tanstack/react-query'
-import {
-  getFeedFacetCountsQueryOptions,
-  type FeedFilters,
-} from '~/queries/feed'
-import type { FeedViewMode } from '~/db/types'
-
-// Re-export FeedFilters as FeedFiltersState for backwards compatibility
-export type FeedFiltersState = FeedFilters
-
-interface FeedPageProps {
-  search: FeedFiltersState & {
-    page?: number
-    pageSize?: number
-    viewMode?: FeedViewMode
-    expanded?: string[]
-  }
-  onNavigate: (updates: {
-    search?: Partial<
-      FeedFiltersState & {
-        page?: number
-        pageSize?: number
-        viewMode?: FeedViewMode
-        expanded?: string[]
-      }
-    >
-    replace?: boolean
-    resetScroll?: boolean
-  }) => void
-  includeHidden?: boolean
-  adminActions?: {
-    onEdit?: (entry: FeedEntry) => void
-    onToggleVisibility?: (entry: FeedEntry, isVisible: boolean) => void
-    onToggleFeatured?: (entry: FeedEntry, featured: boolean) => void
-    onDelete?: (entry: FeedEntry) => void
-  }
-}
-
-export function FeedPage({
-  search,
-  onNavigate,
-  includeHidden = false,
-  adminActions,
-}: FeedPageProps) {
-  const mounted = useMounted()
-
-  // Load saved filter preferences from localStorage (only on client)
-  const [_savedFilters, setSavedFilters] = useState<typeof search | null>(null)
-  const [savedViewMode, setSavedViewMode] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (mounted) {
-      const saved = localStorage.getItem('feedFilters')
-      if (saved) {
-        try {
-          const parsed = JSON.parse(saved)
-          // Convert null values back to undefined (they were nullified for JSON serialization)
-          const restored = Object.fromEntries(
-            Object.entries(parsed).map(([k, v]) => [
-              k,
-              v === null ? undefined : v,
-            ]),
-          )
-          // eslint-disable-next-line react-hooks/set-state-in-effect -- Intentional hydration from localStorage after SSR
-          setSavedFilters(restored as typeof search)
-        } catch {
-          // Ignore parse errors
-        }
-      }
-      const viewMode = localStorage.getItem('feedViewMode')
-      if (viewMode) {
-        setSavedViewMode(viewMode)
-      }
-    }
-  }, [mounted])
-
-  // Use search params directly - savedFilters is only used to restore preferences
-  // when navigating back to the page (the filters are already in the URL from the
-  // previous save). We only fall back to savedFilters for viewMode since that's
-  // not always in the URL.
-  const effectiveFilters = {
-    ...search,
-    viewMode:
-      search.viewMode ??
-      (savedViewMode === 'table' || savedViewMode === 'timeline'
-        ? savedViewMode
-        : undefined) ??
-      'table',
-  }
-
-  // Normalize empty arrays to undefined so they don't filter anything
-  const normalizeFilter = <T,>(value: T[] | undefined): T[] | undefined => {
-    return value && value.length > 0 ? value : undefined
-  }
-
-  const viewMode = effectiveFilters.viewMode ?? 'table'
-  const isTimelineMode = viewMode === 'timeline'
-
-  const feedQuery = useFeedQuery({
-    page: effectiveFilters.page ?? 1,
-    pageSize: effectiveFilters.pageSize ?? 50,
-    filters: {
-      entryTypes: normalizeFilter(effectiveFilters.entryTypes),
-      libraries: normalizeFilter(effectiveFilters.libraries),
-      partners: normalizeFilter(effectiveFilters.partners),
-      tags: normalizeFilter(effectiveFilters.tags),
-      releaseLevels: normalizeFilter(effectiveFilters.releaseLevels) ?? [
-        ...FEED_DEFAULTS.releaseLevels,
-      ],
-      includePrerelease: effectiveFilters.includePrerelease,
-      featured: effectiveFilters.featured,
-      search: effectiveFilters.search,
-      includeHidden,
-    },
-  })
-
-  const feedInfiniteQuery = useFeedInfiniteQuery({
-    pageSize: effectiveFilters.pageSize ?? 50,
-    filters: {
-      entryTypes: normalizeFilter(effectiveFilters.entryTypes),
-      libraries: normalizeFilter(effectiveFilters.libraries),
-      partners: normalizeFilter(effectiveFilters.partners),
-      tags: normalizeFilter(effectiveFilters.tags),
-      releaseLevels: normalizeFilter(effectiveFilters.releaseLevels) ?? [
-        ...FEED_DEFAULTS.releaseLevels,
-      ],
-      includePrerelease: effectiveFilters.includePrerelease,
-      featured: effectiveFilters.featured,
-      search: effectiveFilters.search,
-      includeHidden,
-    },
-  })
-
-  // Fetch facet counts based on current filters
-  const facetCountsQuery = useQuery(
-    getFeedFacetCountsQueryOptions({
-      entryTypes: effectiveFilters.entryTypes,
-      libraries: effectiveFilters.libraries,
-      partners: effectiveFilters.partners,
-      tags: effectiveFilters.tags,
-      releaseLevels: effectiveFilters.releaseLevels as any,
-      includePrerelease: effectiveFilters.includePrerelease,
-      featured: effectiveFilters.featured,
-      search: effectiveFilters.search,
-      includeHidden: adminActions !== undefined, // Admin sees all
-    }),
-  )
-
-  const handleFiltersChange = (newFilters: Partial<FeedFiltersState>): void => {
-    onNavigate({
-      search: {
-        ...search,
-        ...newFilters,
-        page: 1,
-      },
-      replace: true,
-    })
-
-    // Save to localStorage
-    // Note: JSON.stringify strips undefined values, so we need to explicitly
-    // null out fields that are being cleared to overwrite saved values
-    if (typeof window !== 'undefined') {
-      const updatedFilters = {
-        ...search,
-        ...newFilters,
-        page: 1,
-      }
-      // Convert undefined to null for JSON serialization, then back on parse
-      const forStorage = Object.fromEntries(
-        Object.entries(updatedFilters).map(([k, v]) => [
-          k,
-          v === undefined ? null : v,
-        ]),
-      )
-      localStorage.setItem('feedFilters', JSON.stringify(forStorage))
-      setSavedFilters(updatedFilters)
-    }
-  }
-
-  const handleClearFilters = () => {
-    onNavigate({
-      search: {
-        page: FEED_DEFAULTS.page,
-        pageSize: effectiveFilters.pageSize ?? FEED_DEFAULTS.pageSize,
-        viewMode: effectiveFilters.viewMode ?? FEED_DEFAULTS.viewMode,
-        entryTypes: undefined,
-        libraries: undefined,
-        partners: undefined,
-        tags: undefined,
-        releaseLevels: undefined,
-        includePrerelease: undefined,
-        featured: undefined,
-        search: undefined,
-      },
-      replace: true,
-    })
-
-    if (typeof window !== 'undefined') {
-      localStorage.removeItem('feedFilters')
-      setSavedFilters(null)
-    }
-  }
-
-  const handlePageSizeChange = (newPageSize: number) => {
-    onNavigate({
-      search: {
-        ...search,
-        pageSize: newPageSize,
-        page: 1,
-      },
-      replace: true,
-      resetScroll: false,
-    })
-  }
-
-  const handleViewModeChange = (viewMode: FeedViewMode) => {
-    onNavigate({
-      search: {
-        ...search,
-        viewMode,
-      },
-      replace: true,
-    })
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('feedViewMode', viewMode)
-    }
-  }
-
-  const handleExpandedChange = (expandedIds: string[]) => {
-    onNavigate({
-      search: {
-        ...search,
-        expanded: expandedIds.length > 0 ? expandedIds : undefined,
-      },
-      replace: true,
-      resetScroll: false,
-    })
-  }
-
-  const handlePageChange = (page: number) => {
-    onNavigate({
-      search: {
-        ...search,
-        page,
-      },
-      replace: true,
-      resetScroll: false,
-    })
-  }
-
-  const currentPage = effectiveFilters.page ?? 1
-  const pageSize = effectiveFilters.pageSize ?? 50
-
-  return (
-    <div className="p-2 sm:p-4 pb-0 flex flex-col max-w-full gap-2 sm:gap-4 relative">
-      <div className="w-full max-w-7xl mx-auto space-y-3">
-        <FeedTopBarFilters
-          libraries={libraries.filter(
-            (lib): lib is import('~/libraries/types').Library =>
-              'tagline' in lib,
-          )}
-          partners={partners}
-          selectedEntryTypes={effectiveFilters.entryTypes}
-          selectedLibraries={effectiveFilters.libraries}
-          selectedPartners={effectiveFilters.partners}
-          selectedTags={effectiveFilters.tags}
-          selectedReleaseLevels={
-            effectiveFilters.releaseLevels ?? [...FEED_DEFAULTS.releaseLevels]
-          }
-          includePrerelease={effectiveFilters.includePrerelease}
-          featured={effectiveFilters.featured}
-          search={effectiveFilters.search}
-          facetCounts={facetCountsQuery.data}
-          viewMode={viewMode}
-          onViewModeChange={handleViewModeChange}
-          onFiltersChange={handleFiltersChange}
-          onClearFilters={handleClearFilters}
-        />
-        <main className="flex-1 min-w-0 relative flex flex-col">
-          <FeedList
-            query={isTimelineMode ? undefined : feedQuery}
-            infiniteQuery={isTimelineMode ? feedInfiniteQuery : undefined}
-            filters={undefined}
-            currentPage={currentPage}
-            pageSize={pageSize}
-            onPageChange={handlePageChange}
-            onPageSizeChange={handlePageSizeChange}
-            viewMode={viewMode}
-            expandedIds={search.expanded}
-            onExpandedChange={handleExpandedChange}
-            onViewModeChange={handleViewModeChange}
-            onFiltersChange={handleFiltersChange}
-            adminActions={adminActions}
-          />
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/FeedPageLayout.tsx b/src/components/FeedPageLayout.tsx
deleted file mode 100644
index 95a120099..000000000
--- a/src/components/FeedPageLayout.tsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import * as React from 'react'
-import { ReactNode, createContext, useContext } from 'react'
-import { FeedList } from '~/components/FeedList'
-import {
-  FeedTopBarFilters,
-  FeedFacetCounts,
-} from '~/components/FeedTopBarFilters'
-import { FeedEntry } from '~/components/FeedEntry'
-import { UseQueryResult } from '@tanstack/react-query'
-import { libraries } from '~/libraries'
-import { partners } from '~/utils/partners'
-import { useQuery } from '@tanstack/react-query'
-import {
-  getFeedFacetCountsQueryOptions,
-  type FeedFilters,
-} from '~/queries/feed'
-import { Spinner } from '~/components/Spinner'
-import type { FeedViewMode } from '~/db/types'
-
-// Re-export FeedFilters as FeedFiltersState for backwards compatibility
-export type FeedFiltersState = FeedFilters
-
-interface FeedPageLayoutContextValue {
-  feedQuery: UseQueryResult<any>
-  facetCountsQuery: UseQueryResult<FeedFacetCounts>
-  currentPage: number
-  pageSize: number
-  filters: FeedFiltersState
-  onFiltersChange: (filters: Partial<FeedFiltersState>) => void
-  onClearFilters: () => void
-  onPageChange: (page: number) => void
-  onPageSizeChange: (pageSize: number) => void
-  viewMode?: FeedViewMode
-  onViewModeChange?: (viewMode: FeedViewMode) => void
-  expandedIds?: string[]
-  onExpandedChange?: (expandedIds: string[]) => void
-  adminActions?: {
-    onEdit?: (entry: FeedEntry) => void
-    onToggleVisibility?: (entry: FeedEntry, isVisible: boolean) => void
-    onToggleFeatured?: (entry: FeedEntry, featured: boolean) => void
-    onDelete?: (entry: FeedEntry) => void
-  }
-}
-
-const FeedPageLayoutContext = createContext<FeedPageLayoutContextValue | null>(
-  null,
-)
-
-function useFeedPageLayout() {
-  const context = useContext(FeedPageLayoutContext)
-  if (!context) {
-    throw new Error(
-      'FeedPageLayout components must be used within FeedPageLayout.Root',
-    )
-  }
-  return context
-}
-
-interface FeedPageLayoutRootProps {
-  feedQuery: UseQueryResult<any>
-  currentPage: number
-  pageSize: number
-  filters: FeedFiltersState
-  onFiltersChange: (filters: Partial<FeedFiltersState>) => void
-  onClearFilters: () => void
-  onPageChange: (page: number) => void
-  onPageSizeChange: (pageSize: number) => void
-  viewMode?: FeedViewMode
-  onViewModeChange?: (viewMode: FeedViewMode) => void
-  expandedIds?: string[]
-  onExpandedChange?: (expandedIds: string[]) => void
-  adminActions?: {
-    onEdit?: (entry: FeedEntry) => void
-    onToggleVisibility?: (entry: FeedEntry, isVisible: boolean) => void
-    onToggleFeatured?: (entry: FeedEntry, featured: boolean) => void
-    onDelete?: (entry: FeedEntry) => void
-  }
-  children: ReactNode
-}
-
-function FeedPageLayoutRoot({
-  feedQuery,
-  currentPage,
-  pageSize,
-  filters,
-  onFiltersChange,
-  onClearFilters,
-  onPageChange,
-  onPageSizeChange,
-  viewMode = 'table',
-  onViewModeChange,
-  expandedIds,
-  onExpandedChange,
-  adminActions,
-  children,
-}: FeedPageLayoutRootProps) {
-  // Fetch facet counts based on current filters
-  const facetCountsQuery = useQuery(
-    getFeedFacetCountsQueryOptions({
-      entryTypes: filters.entryTypes,
-      libraries: filters.libraries,
-      partners: filters.partners,
-      tags: filters.tags,
-      releaseLevels: filters.releaseLevels as any,
-      includePrerelease: filters.includePrerelease,
-      featured: filters.featured,
-      search: filters.search,
-      includeHidden: adminActions !== undefined, // Admin sees all
-    }),
-  )
-
-  return (
-    <FeedPageLayoutContext.Provider
-      value={{
-        feedQuery,
-        facetCountsQuery,
-        currentPage,
-        pageSize,
-        filters,
-        onFiltersChange,
-        onClearFilters,
-        onPageChange,
-        onPageSizeChange,
-        viewMode,
-        onViewModeChange,
-        expandedIds,
-        onExpandedChange,
-        adminActions,
-      }}
-    >
-      <div className="p-2 sm:p-4 pb-0 flex-1 flex flex-col max-w-full gap-2 sm:gap-4 relative">
-        <div className="flex-1 space-y-2 sm:space-y-4 w-full max-w-7xl mx-auto">
-          {children}
-        </div>
-      </div>
-    </FeedPageLayoutContext.Provider>
-  )
-}
-
-function FeedPageLayoutHeader({
-  title,
-  description,
-  actions,
-  extra,
-}: {
-  title: ReactNode
-  description?: ReactNode
-  actions?: ReactNode
-  extra?: ReactNode
-}) {
-  const { feedQuery } = useFeedPageLayout()
-
-  return (
-    <header className="">
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-3">
-          <h1 className="text-3xl font-black">{title}</h1>
-          {feedQuery.isFetching && (
-            <Spinner className="text-gray-500 dark:text-gray-400" />
-          )}
-        </div>
-        {actions}
-      </div>
-      {description && (
-        <p className="text-lg mt-4 text-gray-600 dark:text-gray-400">
-          {description}
-        </p>
-      )}
-      {extra && <div className="mt-4">{extra}</div>}
-    </header>
-  )
-}
-
-function FeedPageLayoutFilters() {
-  const {
-    filters,
-    onFiltersChange,
-    onClearFilters,
-    facetCountsQuery,
-    viewMode = 'table',
-    onViewModeChange,
-  } = useFeedPageLayout()
-
-  return (
-    <FeedTopBarFilters
-      libraries={libraries.filter(
-        (lib): lib is import('~/libraries/types').Library => 'tagline' in lib,
-      )}
-      partners={partners}
-      selectedEntryTypes={filters.entryTypes}
-      selectedLibraries={filters.libraries}
-      selectedPartners={filters.partners}
-      selectedTags={filters.tags}
-      selectedReleaseLevels={filters.releaseLevels}
-      includePrerelease={filters.includePrerelease}
-      featured={filters.featured}
-      search={filters.search}
-      facetCounts={facetCountsQuery.data}
-      viewMode={viewMode}
-      onViewModeChange={onViewModeChange}
-      onFiltersChange={onFiltersChange}
-      onClearFilters={onClearFilters}
-    />
-  )
-}
-
-function FeedPageLayoutContent({ children }: { children?: ReactNode }) {
-  const {
-    feedQuery,
-    currentPage,
-    pageSize,
-    onPageChange,
-    onPageSizeChange,
-    viewMode = 'table',
-    expandedIds,
-    onExpandedChange,
-    onViewModeChange,
-    onFiltersChange,
-    adminActions,
-  } = useFeedPageLayout()
-
-  return (
-    <main className="flex-1 min-w-0 relative flex flex-col">
-      <FeedList
-        query={feedQuery}
-        filters={undefined}
-        currentPage={currentPage}
-        pageSize={pageSize}
-        onPageChange={onPageChange}
-        onPageSizeChange={onPageSizeChange}
-        viewMode={viewMode}
-        expandedIds={expandedIds}
-        onExpandedChange={onExpandedChange}
-        onViewModeChange={onViewModeChange}
-        onFiltersChange={onFiltersChange}
-        adminActions={adminActions}
-      />
-      {children}
-    </main>
-  )
-}
-
-function FeedPageLayoutFooter({ children }: { children?: ReactNode }) {
-  return <>{children}</>
-}
-
-export const FeedPageLayout = {
-  Root: FeedPageLayoutRoot,
-  Header: FeedPageLayoutHeader,
-  Filters: FeedPageLayoutFilters,
-  Content: FeedPageLayoutContent,
-  Footer: FeedPageLayoutFooter,
-}
diff --git a/src/components/FeedTicker.tsx b/src/components/FeedTicker.tsx
deleted file mode 100644
index d158df98d..000000000
--- a/src/components/FeedTicker.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import * as React from 'react'
-import { useQuery, keepPreviousData } from '@tanstack/react-query'
-import { listFeedEntriesQueryOptions } from '~/queries/feed'
-import { Link } from '@tanstack/react-router'
-import { formatDistanceToNow } from '~/utils/dates'
-import { libraries } from '~/libraries'
-
-const DISPLAY_DURATION = 7000 // 7 seconds in milliseconds
-const TRANSITION_DURATION = 500 // 0.5 seconds for crossfade
-
-export function FeedTicker() {
-  // Fetch feed entries with default filters (major, minor releases only)
-  const feedQuery = useQuery({
-    ...listFeedEntriesQueryOptions({
-      pagination: {
-        limit: 10, // Fetch first 10 entries
-        page: 0,
-      },
-      filters: {
-        releaseLevels: ['major', 'minor'],
-        includePrerelease: false,
-      },
-    }),
-    placeholderData: keepPreviousData,
-  })
-
-  const [currentIndex, setCurrentIndex] = React.useState(0)
-  const [previousIndex, setPreviousIndex] = React.useState<number | null>(null)
-  const [isTransitioning, setIsTransitioning] = React.useState(false)
-
-  const entries = feedQuery.data?.page || []
-
-  React.useEffect(() => {
-    if (entries.length === 0) return
-
-    // Rotate to next item after DISPLAY_DURATION
-    const rotateTimeout = setTimeout(() => {
-      setPreviousIndex(currentIndex)
-      setIsTransitioning(true)
-      setCurrentIndex((prev) => (prev + 1) % entries.length)
-
-      // Clear previous after transition completes
-      setTimeout(() => {
-        setPreviousIndex(null)
-        setIsTransitioning(false)
-      }, TRANSITION_DURATION)
-    }, DISPLAY_DURATION)
-
-    return () => clearTimeout(rotateTimeout)
-  }, [currentIndex, entries.length])
-
-  // Reset to first item when entries change
-  React.useEffect(() => {
-    if (entries.length > 0) {
-      setCurrentIndex(0)
-      setPreviousIndex(null)
-      setIsTransitioning(false)
-    }
-  }, [entries.length])
-
-  // Don't show ticker if loading/empty
-  if (feedQuery.isLoading || entries.length === 0) {
-    return null
-  }
-
-  const currentEntry = entries[currentIndex]
-  const previousEntry = previousIndex !== null ? entries[previousIndex] : null
-  if (!currentEntry) return null
-
-  const renderEntry = (entry: typeof currentEntry) => {
-    // Entry type badge configs
-    const badgeConfigs: Record<string, { label: string; className: string }> = {
-      release: {
-        label: 'Release',
-        className:
-          'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200',
-      },
-      blog: {
-        label: 'Blog',
-        className:
-          'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200',
-      },
-      announcement: {
-        label: 'News',
-        className:
-          'bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200',
-      },
-    }
-
-    const badge = badgeConfigs[entry.entryType] || {
-      label: entry.entryType,
-      className:
-        'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200',
-    }
-
-    const isRelease = entry.entryType === 'release'
-
-    // For releases, get release level and version
-    const releaseLevelTag = isRelease
-      ? entry.tags.find(
-          (tag) =>
-            tag === 'release:major' ||
-            tag === 'release:minor' ||
-            tag === 'release:patch',
-        )
-      : null
-    const releaseLevel = releaseLevelTag?.replace('release:', '') || ''
-    const version = isRelease
-      ? (
-          (entry.metadata as { version?: string } | null)?.version || ''
-        ).replace(/@tanstack\//gi, '')
-      : ''
-
-    return (
-      <Link
-        to="/feed/$id"
-        params={{ id: entry._id }}
-        className="flex items-center gap-1.5 px-2 py-1 rounded-lg hover:bg-gray-100/50 dark:hover:bg-gray-800/50 transition-colors group"
-      >
-        {/* Entry type badge */}
-        <span
-          className={`px-1.5 py-0.5 rounded text-[10px] font-medium uppercase flex-shrink-0 ${badge.className}`}
-        >
-          {badge.label}
-        </span>
-
-        {/* Release level (for releases only) */}
-        {isRelease && releaseLevel && (
-          <span className="text-[10px] font-medium text-gray-600 dark:text-gray-400 flex-shrink-0 uppercase">
-            {releaseLevel}
-          </span>
-        )}
-
-        {/* Library name (for releases) */}
-        {isRelease &&
-          entry.libraryIds[0] &&
-          (() => {
-            const library = libraries.find(
-              (lib) => lib.id === entry.libraryIds[0],
-            )
-            return library ? (
-              <span className="text-[10px] font-semibold text-gray-700 dark:text-gray-300 flex-shrink-0">
-                {library.name}
-              </span>
-            ) : null
-          })()}
-
-        {/* Version (for releases) */}
-        {isRelease && version && (
-          <span className="text-[10px] font-medium text-gray-600 dark:text-gray-400 flex-shrink-0">
-            {version}
-          </span>
-        )}
-
-        {/* Time ago */}
-        <span className="text-[10px] text-gray-500 dark:text-gray-400 flex-shrink-0">
-          {formatDistanceToNow(new Date(entry.publishedAt), {
-            addSuffix: true,
-          })}
-        </span>
-
-        {/* Title or excerpt */}
-        {(entry.title || entry.excerpt) && (
-          <span className="text-[10px] text-gray-500 dark:text-gray-400 truncate flex-1 min-w-0">
-            {isRelease ? entry.excerpt : entry.title || entry.excerpt}
-          </span>
-        )}
-      </Link>
-    )
-  }
-
-  return (
-    <div
-      className="relative overflow-hidden rounded-lg bg-white dark:bg-black border border-gray-200/50 dark:border-gray-700/50"
-      style={{
-        height: '32px',
-        maxWidth: '320px',
-        width: '100%',
-      }}
-    >
-      <div className="h-full flex items-center">
-        {/* Previous entry fading out */}
-        {previousEntry && isTransitioning && (
-          <div
-            key={`prev-${previousIndex}`}
-            className="absolute inset-0 flex items-center animate-fade-out"
-          >
-            {renderEntry(previousEntry)}
-          </div>
-        )}
-        {/* Current entry fading in */}
-        <div
-          key={`curr-${currentIndex}`}
-          className={`absolute inset-0 flex items-center ${isTransitioning ? 'animate-fade-in' : ''}`}
-        >
-          {renderEntry(currentEntry)}
-        </div>
-      </div>
-      <style>{`
-        @keyframes fadeIn {
-          from { opacity: 0; }
-          to { opacity: 1; }
-        }
-        @keyframes fadeOut {
-          from { opacity: 1; }
-          to { opacity: 0; }
-        }
-        .animate-fade-in {
-          animation: fadeIn 500ms ease-out forwards;
-        }
-        .animate-fade-out {
-          animation: fadeOut 500ms ease-out forwards;
-        }
-      `}</style>
-    </div>
-  )
-}
diff --git a/src/components/FeedTopBarFilters.tsx b/src/components/FeedTopBarFilters.tsx
deleted file mode 100644
index 88db2ce11..000000000
--- a/src/components/FeedTopBarFilters.tsx
+++ /dev/null
@@ -1,375 +0,0 @@
-import * as React from 'react'
-import { useState } from 'react'
-import { useDebouncedValue } from '@tanstack/react-pacer'
-import { Library, type LibraryId } from '~/libraries'
-import { partners } from '~/utils/partners'
-import {
-  ENTRY_TYPES,
-  RELEASE_LEVELS,
-  type EntryType,
-  type ReleaseLevel,
-  type FeedViewMode,
-} from '~/db/types'
-import {
-  TopBarFilter,
-  FilterChip,
-  AddFilterButton,
-  FilterDropdownSection,
-  FilterCheckbox,
-  ViewModeToggle,
-  getFilterChipLabel,
-} from '~/components/FilterComponents'
-
-export interface FeedFacetCounts {
-  entryTypes?: Record<string, number>
-  libraries?: Record<string, number>
-  partners?: Record<string, number>
-  releaseLevels?: Record<string, number>
-  prerelease?: number
-  featured?: number
-}
-
-interface FeedTopBarFiltersProps {
-  libraries: Library[]
-  partners: typeof partners
-  selectedEntryTypes?: EntryType[]
-  selectedLibraries?: string[]
-  selectedPartners?: string[]
-  selectedTags?: string[]
-  selectedReleaseLevels?: ReleaseLevel[]
-  includePrerelease?: boolean
-  featured?: boolean
-  search?: string
-  facetCounts?: FeedFacetCounts
-  viewMode?: FeedViewMode
-  onViewModeChange?: (viewMode: FeedViewMode) => void
-  onFiltersChange: (filters: {
-    entryTypes?: EntryType[]
-    libraries?: LibraryId[]
-    partners?: string[]
-    tags?: string[]
-    releaseLevels?: ReleaseLevel[]
-    includePrerelease?: boolean
-    featured?: boolean
-    search?: string
-  }) => void
-  onClearFilters: () => void
-}
-
-export function FeedTopBarFilters({
-  libraries,
-  partners,
-  selectedEntryTypes,
-  selectedLibraries,
-  selectedPartners,
-  selectedTags,
-  selectedReleaseLevels,
-  includePrerelease,
-  featured,
-  search,
-  facetCounts,
-  viewMode = 'table',
-  onViewModeChange,
-  onFiltersChange,
-  onClearFilters,
-}: FeedTopBarFiltersProps) {
-  const [searchInput, setSearchInput] = useState(search || '')
-
-  const [debouncedSearch] = useDebouncedValue(searchInput, { wait: 300 })
-
-  React.useEffect(() => {
-    onFiltersChange({ search: debouncedSearch || undefined })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedSearch])
-
-  React.useEffect(() => {
-    setSearchInput(search || '')
-  }, [search])
-
-  const toggleEntryType = (entryType: EntryType) => {
-    const current = selectedEntryTypes || []
-    const updated = current.includes(entryType)
-      ? current.filter((t) => t !== entryType)
-      : [...current, entryType]
-    onFiltersChange({ entryTypes: updated.length > 0 ? updated : undefined })
-  }
-
-  const toggleLibrary = (libraryId: string) => {
-    const current = selectedLibraries || []
-    const updated = current.includes(libraryId)
-      ? current.filter((id) => id !== libraryId)
-      : [...current, libraryId]
-    onFiltersChange({
-      libraries: updated.length > 0 ? (updated as Library['id'][]) : undefined,
-    })
-  }
-
-  const togglePartner = (partnerId: string) => {
-    const current = selectedPartners || []
-    const updated = current.includes(partnerId)
-      ? current.filter((id) => id !== partnerId)
-      : [...current, partnerId]
-    onFiltersChange({ partners: updated.length > 0 ? updated : undefined })
-  }
-
-  const toggleTag = (tag: string) => {
-    const current = selectedTags || []
-    const updated = current.filter((t) => t !== tag)
-    onFiltersChange({ tags: updated.length > 0 ? updated : undefined })
-  }
-
-  const toggleReleaseLevel = (level: ReleaseLevel) => {
-    const current = selectedReleaseLevels || []
-    const updated = current.includes(level)
-      ? current.filter((l) => l !== level)
-      : [...current, level]
-    onFiltersChange({ releaseLevels: updated.length > 0 ? updated : undefined })
-  }
-
-  const togglePrerelease = () => {
-    onFiltersChange({ includePrerelease: !includePrerelease })
-  }
-
-  const toggleFeatured = () => {
-    onFiltersChange({ featured: featured ? undefined : true })
-  }
-
-  const hasActiveFilters = Boolean(
-    (selectedEntryTypes && selectedEntryTypes.length > 0) ||
-    (selectedLibraries && selectedLibraries.length > 0) ||
-    (selectedPartners && selectedPartners.length > 0) ||
-    (selectedTags && selectedTags.length > 0) ||
-    featured !== undefined ||
-    (selectedReleaseLevels && selectedReleaseLevels.length > 0) ||
-    (includePrerelease !== undefined && includePrerelease),
-  )
-
-  const visibleLibraries = libraries.filter((lib) => lib.visible !== false)
-
-  const getLibraryNames = (ids: string[]) =>
-    ids
-      .map((id) => libraries.find((l) => l.id === id)?.name || id)
-      .filter(Boolean)
-
-  const getPartnerNames = (ids: string[]) =>
-    ids
-      .map((id) => partners.find((p) => p.id === id)?.name || id)
-      .filter(Boolean)
-
-  return (
-    <TopBarFilter
-      search={{
-        value: searchInput,
-        onChange: setSearchInput,
-        placeholder: 'Search feed...',
-      }}
-      onClearAll={onClearFilters}
-      hasActiveFilters={hasActiveFilters}
-      trailing={
-        onViewModeChange && (
-          <ViewModeToggle
-            viewMode={viewMode}
-            onViewModeChange={onViewModeChange}
-            compact
-          />
-        )
-      }
-    >
-      {/* Active Filter Chips */}
-      {featured && (
-        <FilterChip
-          label="Featured"
-          onRemove={() => onFiltersChange({ featured: undefined })}
-        />
-      )}
-      {includePrerelease && (
-        <FilterChip
-          label="Include Prerelease"
-          onRemove={() => onFiltersChange({ includePrerelease: undefined })}
-        />
-      )}
-      {selectedReleaseLevels && selectedReleaseLevels.length > 0 && (
-        <FilterChip
-          label={getFilterChipLabel(
-            'Levels',
-            selectedReleaseLevels.map(
-              (l) => l.charAt(0).toUpperCase() + l.slice(1),
-            ),
-          )}
-          onRemove={() => onFiltersChange({ releaseLevels: undefined })}
-        />
-      )}
-      {selectedEntryTypes && selectedEntryTypes.length > 0 && (
-        <FilterChip
-          label={getFilterChipLabel(
-            'Types',
-            selectedEntryTypes.map(
-              (t) => t.charAt(0).toUpperCase() + t.slice(1),
-            ),
-          )}
-          onRemove={() => onFiltersChange({ entryTypes: undefined })}
-        />
-      )}
-      {selectedLibraries && selectedLibraries.length > 0 && (
-        <FilterChip
-          label={getFilterChipLabel(
-            'Libraries',
-            getLibraryNames(selectedLibraries),
-          )}
-          onRemove={() => onFiltersChange({ libraries: undefined })}
-        />
-      )}
-      {selectedPartners && selectedPartners.length > 0 && (
-        <FilterChip
-          label={getFilterChipLabel(
-            'Partners',
-            getPartnerNames(selectedPartners),
-          )}
-          onRemove={() => onFiltersChange({ partners: undefined })}
-        />
-      )}
-      {selectedTags &&
-        selectedTags.map((tag) => (
-          <FilterChip
-            key={tag}
-            label={`Tag: ${tag}`}
-            onRemove={() => toggleTag(tag)}
-          />
-        ))}
-
-      {/* Add Filter Dropdown */}
-      <AddFilterButton>
-        {/* Featured Toggle */}
-        <div className="px-3 py-2 border-b border-gray-200 dark:border-gray-700">
-          <FilterCheckbox
-            label="Featured only"
-            checked={featured ?? false}
-            onChange={toggleFeatured}
-            count={facetCounts?.featured}
-          />
-        </div>
-
-        {/* Release Levels */}
-        <FilterDropdownSection
-          title="Release Levels"
-          defaultExpanded
-          onSelectAll={() =>
-            onFiltersChange({ releaseLevels: ['major', 'minor', 'patch'] })
-          }
-          onSelectNone={() => onFiltersChange({ releaseLevels: undefined })}
-          isAllSelected={
-            selectedReleaseLevels?.length === RELEASE_LEVELS.length
-          }
-          isSomeSelected={
-            selectedReleaseLevels !== undefined &&
-            selectedReleaseLevels.length > 0 &&
-            selectedReleaseLevels.length < RELEASE_LEVELS.length
-          }
-        >
-          {RELEASE_LEVELS.map((level) => (
-            <FilterCheckbox
-              key={level}
-              label={level}
-              checked={selectedReleaseLevels?.includes(level) ?? false}
-              onChange={() => toggleReleaseLevel(level)}
-              count={facetCounts?.releaseLevels?.[level]}
-              capitalize
-            />
-          ))}
-          <FilterCheckbox
-            label="Include Prerelease"
-            checked={includePrerelease ?? false}
-            onChange={togglePrerelease}
-            count={facetCounts?.prerelease}
-          />
-        </FilterDropdownSection>
-
-        {/* Entry Types */}
-        <FilterDropdownSection
-          title="Entry Types"
-          defaultExpanded
-          onSelectAll={() => onFiltersChange({ entryTypes: [...ENTRY_TYPES] })}
-          onSelectNone={() => onFiltersChange({ entryTypes: undefined })}
-          isAllSelected={
-            selectedEntryTypes !== undefined &&
-            selectedEntryTypes.length === ENTRY_TYPES.length
-          }
-          isSomeSelected={
-            selectedEntryTypes !== undefined &&
-            selectedEntryTypes.length > 0 &&
-            selectedEntryTypes.length < ENTRY_TYPES.length
-          }
-        >
-          {ENTRY_TYPES.map((entryType) => (
-            <FilterCheckbox
-              key={entryType}
-              label={entryType}
-              checked={selectedEntryTypes?.includes(entryType) ?? false}
-              onChange={() => toggleEntryType(entryType)}
-              count={facetCounts?.entryTypes?.[entryType]}
-              capitalize
-            />
-          ))}
-        </FilterDropdownSection>
-
-        {/* Libraries */}
-        <FilterDropdownSection
-          title="Libraries"
-          onSelectAll={() =>
-            onFiltersChange({
-              libraries: visibleLibraries.map((lib) => lib.id),
-            })
-          }
-          onSelectNone={() => onFiltersChange({ libraries: undefined })}
-          isAllSelected={
-            selectedLibraries !== undefined &&
-            selectedLibraries.length === visibleLibraries.length
-          }
-          isSomeSelected={
-            selectedLibraries !== undefined &&
-            selectedLibraries.length > 0 &&
-            selectedLibraries.length < visibleLibraries.length
-          }
-        >
-          {visibleLibraries.map((lib) => (
-            <FilterCheckbox
-              key={lib.id}
-              label={lib.name}
-              checked={selectedLibraries?.includes(lib.id) ?? false}
-              onChange={() => toggleLibrary(lib.id)}
-              count={facetCounts?.libraries?.[lib.id]}
-            />
-          ))}
-        </FilterDropdownSection>
-
-        {/* Partners */}
-        <FilterDropdownSection
-          title="Partners"
-          onSelectAll={() =>
-            onFiltersChange({ partners: partners.map((p) => p.id) })
-          }
-          onSelectNone={() => onFiltersChange({ partners: undefined })}
-          isAllSelected={
-            selectedPartners !== undefined &&
-            selectedPartners.length === partners.length
-          }
-          isSomeSelected={
-            selectedPartners !== undefined &&
-            selectedPartners.length > 0 &&
-            selectedPartners.length < partners.length
-          }
-        >
-          {partners.map((partner) => (
-            <FilterCheckbox
-              key={partner.id}
-              label={partner.name}
-              checked={selectedPartners?.includes(partner.id) ?? false}
-              onChange={() => togglePartner(partner.id)}
-              count={facetCounts?.partners?.[partner.id]}
-            />
-          ))}
-        </FilterDropdownSection>
-      </AddFilterButton>
-    </TopBarFilter>
-  )
-}
diff --git a/src/components/FeedbackLeaderboard.tsx b/src/components/FeedbackLeaderboard.tsx
index 4efda4e85..443419d5f 100644
--- a/src/components/FeedbackLeaderboard.tsx
+++ b/src/components/FeedbackLeaderboard.tsx
@@ -136,7 +136,7 @@ export function FeedbackLeaderboard() {
                         key={entry.userId}
                         className={twMerge(
                           rank <= 3 && page === 1
-                            ? 'bg-gradient-to-r from-yellow-50 to-transparent dark:from-yellow-900/10'
+                            ? 'bg-linear-to-r from-yellow-50 to-transparent dark:from-yellow-900/10'
                             : '',
                         )}
                       >
@@ -179,7 +179,7 @@ export function FeedbackLeaderboard() {
                 </TableBody>
               </Table>
 
-              <div className="p-3 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border-t border-gray-200 dark:border-gray-700">
+              <div className="p-3 bg-linear-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border-t border-gray-200 dark:border-gray-700">
                 <PaginationControls
                   currentPage={page - 1}
                   totalPages={pagination.totalPages}
diff --git a/src/components/FeedbackModerationList.tsx b/src/components/FeedbackModerationList.tsx
index 2c86feb21..e301a5d90 100644
--- a/src/components/FeedbackModerationList.tsx
+++ b/src/components/FeedbackModerationList.tsx
@@ -13,7 +13,8 @@ import {
 import { PaginationControls } from './PaginationControls'
 import { Spinner } from './Spinner'
 import type { DocFeedback } from '~/db/types'
-import { calculatePoints } from '~/utils/docFeedback.client'
+import { calculatePoints } from '~/utils/docFeedback.shared'
+import { getRowFieldId } from '~/utils/route-encoding'
 import { Check, Lightbulb, TriangleAlert } from 'lucide-react'
 import { MessageSquare, X } from 'lucide-react'
 import { Badge, Button } from '~/ui'
@@ -155,6 +156,11 @@ export function FeedbackModerationList({
             const isExpanded = expandedIds.has(feedback.id)
             const isPending = feedback.status === 'pending'
             const isModeratingThis = isModeratingId === feedback.id
+            const moderationNoteId = getRowFieldId(
+              'feedback-moderation',
+              feedback.id,
+              'note',
+            )
 
             return (
               <React.Fragment key={feedback.id}>
@@ -333,12 +339,13 @@ export function FeedbackModerationList({
                         {isPending && (
                           <div>
                             <label
-                              htmlFor={`moderation-note-${feedback.id}`}
+                              htmlFor={moderationNoteId}
                               className="block text-sm font-semibold mb-2"
                             >
                               Internal Moderation Note (optional):
                             </label>
                             <textarea
+                              id={moderationNoteId}
                               value={moderationNotes[feedback.id] || ''}
                               onChange={(e) =>
                                 handleModerationNoteChange(
diff --git a/src/components/FeedbackModerationTopBar.tsx b/src/components/FeedbackModerationTopBar.tsx
index e00cba36f..26ce8dde4 100644
--- a/src/components/FeedbackModerationTopBar.tsx
+++ b/src/components/FeedbackModerationTopBar.tsx
@@ -1,4 +1,4 @@
-import { libraries } from '~/libraries'
+import { libraries, type LibraryId } from '~/libraries'
 import { DOC_FEEDBACK_STATUSES, type DocFeedbackStatus } from '~/db/types'
 import {
   TopBarFilter,
@@ -13,14 +13,14 @@ import { FormInput } from '~/ui'
 interface FeedbackModerationTopBarProps {
   filters: {
     status?: DocFeedbackStatus[]
-    libraryId?: string
+    libraryId?: LibraryId
     isDetached?: boolean
     dateFrom?: string
     dateTo?: string
   }
   onFilterChange: (filters: {
     status?: DocFeedbackStatus[]
-    libraryId?: string
+    libraryId?: LibraryId
     isDetached?: boolean
     dateFrom?: string
     dateTo?: string
@@ -63,7 +63,7 @@ export function FeedbackModerationTopBar({
     filters.dateTo,
   )
 
-  const getLibraryName = (id: string) =>
+  const getLibraryName = (id: LibraryId) =>
     libraries.find((l) => l.id === id)?.name || id
 
   const formatDateRange = () => {
@@ -130,7 +130,11 @@ export function FeedbackModerationTopBar({
           <select
             value={filters.libraryId || ''}
             onChange={(e) =>
-              onFilterChange({ libraryId: e.target.value || undefined })
+              onFilterChange({
+                libraryId: (e.target.value || undefined) as
+                  | LibraryId
+                  | undefined,
+              })
             }
             className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
           >
diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index 8e77b1d5a..13d36fc85 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -6,6 +6,8 @@ import htmlIconUrl from '~/images/file-icons/html.svg?url'
 import jsonIconUrl from '~/images/file-icons/json.svg?url'
 import svelteIconUrl from '~/images/file-icons/svelte.svg?url'
 import vueIconUrl from '~/images/file-icons/vue.svg?url'
+import markoIconUrl from '~/images/file-icons/marko.svg?url'
+import emberIconUrl from '~/images/ember-logo.svg?url'
 import textIconUrl from '~/images/file-icons/txt.svg?url'
 import type { GitHubFileNode } from '~/utils/documents.server'
 import { twMerge } from 'tailwind-merge'
@@ -30,6 +32,11 @@ const getFileIconPath = (filename: string) => {
       return svelteIconUrl
     case 'vue':
       return vueIconUrl
+    case 'marko':
+      return markoIconUrl
+    case 'gjs':
+    case 'gts':
+      return emberIconUrl
     default:
       return textIconUrl
   }
@@ -250,6 +257,36 @@ const RenderFileTree = (props: {
   currentPath: string | null
   setCurrentPath: (file: string) => void
 }) => {
+  const pendingPrefetchesRef = React.useRef<Record<string, number>>({})
+
+  const cancelPrefetch = (path: string) => {
+    const timeoutId = pendingPrefetchesRef.current[path]
+
+    if (timeoutId !== undefined) {
+      window.clearTimeout(timeoutId)
+      delete pendingPrefetchesRef.current[path]
+    }
+  }
+
+  const schedulePrefetch = (path: string) => {
+    cancelPrefetch(path)
+
+    pendingPrefetchesRef.current[path] = window.setTimeout(() => {
+      delete pendingPrefetchesRef.current[path]
+      props.prefetchFileContent(path)
+    }, 180)
+  }
+
+  React.useEffect(() => {
+    const pendingPrefetches = pendingPrefetchesRef.current
+
+    return () => {
+      for (const timeoutId of Object.values(pendingPrefetches)) {
+        window.clearTimeout(timeoutId)
+      }
+    }
+  }, [])
+
   if (!props.files) return null
 
   return (
@@ -282,15 +319,26 @@ const RenderFileTree = (props: {
           <div style={{ paddingLeft: getMarginLeft(file.depth) }}>
             <button
               onClick={() => {
+                cancelPrefetch(file.path)
+
                 if (file.type === 'dir') {
                   props.toggleFolder(file.path)
                 } else {
                   props.setCurrentPath(file.path)
                 }
               }}
-              onMouseEnter={() =>
-                file.type !== 'dir' && props.prefetchFileContent(file.path)
-              }
+              onMouseEnter={() => {
+                if (file.type !== 'dir') {
+                  schedulePrefetch(file.path)
+                }
+              }}
+              onFocus={() => {
+                if (file.type !== 'dir') {
+                  schedulePrefetch(file.path)
+                }
+              }}
+              onMouseLeave={() => cancelPrefetch(file.path)}
+              onBlur={() => cancelPrefetch(file.path)}
               className={twMerge(
                 `px-2 py-1.5 text-left w-full flex items-center gap-2 text-sm rounded transition-colors duration-200 min-w-0`,
                 props.currentPath === file.path
diff --git a/src/components/FilterComponents.tsx b/src/components/FilterComponents.tsx
index 6240a4be5..f9b0369ca 100644
--- a/src/components/FilterComponents.tsx
+++ b/src/components/FilterComponents.tsx
@@ -9,9 +9,9 @@ import {
   RotateCcw,
   SlidersHorizontal,
 } from 'lucide-react'
-import { useDebouncedValue } from '@tanstack/react-pacer'
+import { useDebouncer } from '@tanstack/react-pacer'
 import { twMerge } from 'tailwind-merge'
-import type { FeedViewMode } from '~/db/types'
+type FeedViewMode = 'table' | 'timeline'
 
 // =============================================================================
 // TOP BAR FILTER COMPONENTS
@@ -562,28 +562,37 @@ export function FilterSearch({
   // Local state for immediate UI updates
   const [inputValue, setInputValue] = useState(value || '')
 
-  // Debounce the input value
-  const [debouncedValue] = useDebouncedValue(inputValue, {
-    wait: debounceMs,
-  })
-
-  // Update parent when debounced value changes
-  React.useEffect(() => {
-    onChange(debouncedValue)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue])
+  const { maybeExecute, state: isPending } = useDebouncer(
+    onChange,
+    { wait: debounceMs },
+    (state) => ({
+      isPending: state.isPending,
+    }),
+  )
 
   // Sync local state when value prop changes externally
   React.useEffect(() => {
-    setInputValue(value || '')
-  }, [value])
+    const nextValue = value || ''
+
+    setInputValue((currentValue) => {
+      // While the user is editing, keep the local draft authoritative.
+      if (isPending) {
+        return currentValue
+      }
+
+      return nextValue
+    })
+  }, [isPending, value])
 
   return (
     <input
       type="text"
       placeholder={placeholder}
       value={inputValue}
-      onChange={(e) => setInputValue(e.target.value)}
+      onChange={(e) => {
+        setInputValue(e.target.value)
+        maybeExecute(e.target.value)
+      }}
       className={twMerge(
         'border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-black/40 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500',
         size === 'sm' ? 'px-2 py-1 text-xs' : 'px-2 py-1 text-sm',
@@ -619,7 +628,7 @@ export function ViewModeToggle({
 
   if (compact) {
     return (
-      <div className="flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5 flex-shrink-0">
+      <div className="flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5 shrink-0">
         {compactViewModes.map(({ mode, icon: Icon, title }) => (
           <button
             key={mode}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 6e24299a3..0e56901e2 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -6,12 +6,12 @@ const footerLinks = [
   { label: '@Tan_Stack on X.com', to: 'https://x.com/tan_stack' },
   {
     label: '@TannerLinsley on X.com',
-    to: 'https://twitter.com/tannerlinsley',
+    to: 'https://x.com/tannerlinsley',
   },
   { label: 'GitHub', to: 'https://github.com/tanstack' },
   {
-    label: 'Youtube',
-    to: 'https://www.youtube.com/user/tannerlinsley',
+    label: 'YouTube',
+    to: 'https://youtube.com/@tan_stack',
   },
   {
     label: 'Nozzle.io - Keyword Rank Tracker',
diff --git a/src/components/FrameworkCard.tsx b/src/components/FrameworkCard.tsx
index 7ceb627ee..0e5939de4 100644
--- a/src/components/FrameworkCard.tsx
+++ b/src/components/FrameworkCard.tsx
@@ -1,28 +1,35 @@
 import { Link } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
-import { Library } from '~/libraries'
+import type { Library, LibraryId } from '~/libraries'
 import { getFrameworkOptions } from '~/libraries/frameworks'
 import { useCopyButton } from '~/components/CopyMarkdownButton'
 import { useToast } from '~/components/ToastProvider'
 import { Check, Copy } from 'lucide-react'
 import { Card } from '~/components/Card'
+import {
+  getFrameworkDocsHash,
+  getFrameworkDocsPath,
+} from '~/libraries/frameworkSupport'
+import { copyTextToClipboard } from '~/utils/browser-effects'
 
 export function FrameworkCard({
   framework,
   libraryId,
+  version,
   packageName,
   index,
   library,
 }: {
   framework: ReturnType<typeof getFrameworkOptions>[number]
-  libraryId: string
+  libraryId: LibraryId
+  version: string
   packageName: string
   index: number
   library: Library
 }) {
   const { notify } = useToast()
   const [copied, onCopyClick] = useCopyButton(async () => {
-    await navigator.clipboard.writeText(packageName)
+    await copyTextToClipboard(packageName)
     notify(
       <div>
         <div className="font-medium">Copied package name</div>
@@ -33,16 +40,8 @@ export function FrameworkCard({
     )
   })
 
-  const hasCustomInstallPath = !!library.installPath
-  const installationPath = library.installPath
-    ? library.installPath
-        .replace('$framework', framework.value)
-        .replace('$libraryId', libraryId)
-    : 'installation'
-
-  // Add framework hash fragment only for default installation pages (when installPath is not defined)
-  // Link component adds the # automatically, so we just pass the value without #
-  const installationHash = !hasCustomInstallPath ? framework.value : undefined
+  const installationPath = getFrameworkDocsPath(framework.value, library)
+  const installationHash = getFrameworkDocsHash(framework.value, library)
 
   return (
     <Card
@@ -62,13 +61,15 @@ export function FrameworkCard({
         from="/$libraryId/$version/docs"
         to="./$"
         params={{
+          libraryId,
+          version,
           _splat: installationPath,
         }}
         hash={installationHash}
         className="flex flex-col flex-1 gap-4"
       >
         {/* Framework Logo */}
-        <div className="flex-shrink-0 flex justify-center">
+        <div className="shrink-0 flex justify-center">
           <img
             src={framework.logo}
             alt={framework.label}
@@ -97,7 +98,7 @@ export function FrameworkCard({
               e.stopPropagation()
               onCopyClick(e)
             }}
-            className="flex-shrink-0 p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors rounded hover:bg-gray-100 dark:hover:bg-gray-800"
+            className="shrink-0 p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors rounded hover:bg-gray-100 dark:hover:bg-gray-800"
             title="Copy package name"
           >
             {copied ? (
@@ -111,6 +112,8 @@ export function FrameworkCard({
           from="/$libraryId/$version/docs"
           to="./$"
           params={{
+            libraryId,
+            version,
             _splat: installationPath,
           }}
           hash={installationHash}
diff --git a/src/components/FrameworkSelect.tsx b/src/components/FrameworkSelect.tsx
index 1c2bb66f1..2d4e577e4 100644
--- a/src/components/FrameworkSelect.tsx
+++ b/src/components/FrameworkSelect.tsx
@@ -1,11 +1,25 @@
 import * as React from 'react'
 import { create } from 'zustand'
 import { useNavigate, useParams } from '@tanstack/react-router'
+import { useQueryClient } from '@tanstack/react-query'
 import { Select } from './Select'
 import { Framework, getLibrary, LibraryId } from '~/libraries'
 import { getFrameworkOptions } from '~/libraries/frameworks'
-import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
-import { updateLastUsedFramework } from '~/utils/users.server'
+import {
+  currentUserQueryOptions,
+  useCurrentUserQuery,
+} from '~/hooks/useCurrentUser'
+import { updateLastUsedFramework } from '~/utils/users.functions'
+import {
+  getLocalStorageItem,
+  setLocalStorageItem,
+} from '~/utils/browser-storage'
+
+function persistFrameworkToServer(framework: string) {
+  void updateLastUsedFramework({ data: { framework } }).catch(() => {
+    // Silently ignore errors - localStorage is the fallback
+  })
+}
 
 export function FrameworkSelect({ libraryId }: { libraryId: LibraryId }) {
   const library = getLibrary(libraryId)
@@ -41,12 +55,9 @@ export const useLocalCurrentFramework = create<{
   currentFramework?: string
   setCurrentFramework: (framework: string) => void
 }>((set) => ({
-  currentFramework:
-    typeof document !== 'undefined'
-      ? localStorage.getItem('framework') || undefined
-      : undefined,
+  currentFramework: getLocalStorageItem('framework') || undefined,
   setCurrentFramework: (framework: string) => {
-    localStorage.setItem('framework', framework)
+    setLocalStorageItem('framework', framework)
     set({ currentFramework: framework })
   },
 }))
@@ -56,8 +67,7 @@ export const useLocalCurrentFramework = create<{
  * Safe to call during SSR (returns undefined).
  */
 export function getStoredFrameworkPreference(): string | undefined {
-  if (typeof window === 'undefined') return undefined
-  return localStorage.getItem('framework') || undefined
+  return getLocalStorageItem('framework') || undefined
 }
 
 /**
@@ -66,20 +76,22 @@ export function getStoredFrameworkPreference(): string | undefined {
  */
 export function usePersistFrameworkPreference() {
   const userQuery = useCurrentUserQuery()
+  const queryClient = useQueryClient()
   const localCurrentFramework = useLocalCurrentFramework()
 
   return React.useCallback(
     (framework: string) => {
       // Always update localStorage as fallback
       localCurrentFramework.setCurrentFramework(framework)
+      queryClient.setQueryData(currentUserQueryOptions.queryKey, (user) =>
+        user ? { ...user, lastUsedFramework: framework } : user,
+      )
       // Update DB for logged-in users (fire-and-forget)
       if (userQuery.data) {
-        updateLastUsedFramework({ data: { framework } }).catch(() => {
-          // Silently ignore errors - localStorage is the fallback
-        })
+        persistFrameworkToServer(framework)
       }
     },
-    [localCurrentFramework, userQuery.data],
+    [localCurrentFramework, queryClient, userQuery.data],
   )
 }
 
@@ -111,6 +123,7 @@ function useFrameworkConfig({ frameworks }: { frameworks: Framework[] }) {
 export function useCurrentFramework(frameworks: Framework[]) {
   const navigate = useNavigate()
   const userQuery = useCurrentUserQuery()
+  const queryClient = useQueryClient()
 
   const { framework: paramsFramework } = useParams({
     strict: false,
@@ -134,14 +147,16 @@ export function useCurrentFramework(frameworks: Framework[]) {
       })
       // Always update localStorage as fallback
       localCurrentFramework.setCurrentFramework(framework)
+      queryClient.setQueryData(currentUserQueryOptions.queryKey, (user) =>
+        user ? { ...user, lastUsedFramework: framework } : user,
+      )
+
       // Update DB for logged-in users (fire-and-forget)
       if (userQuery.data) {
-        updateLastUsedFramework({ data: { framework } }).catch(() => {
-          // Silently ignore errors - localStorage is the fallback
-        })
+        persistFrameworkToServer(framework)
       }
     },
-    [localCurrentFramework, navigate, userQuery.data],
+    [localCurrentFramework, navigate, queryClient, userQuery.data],
   )
 
   React.useEffect(() => {
diff --git a/src/components/Gam.tsx b/src/components/Gam.tsx
index 99a898877..ab9b3a4ff 100644
--- a/src/components/Gam.tsx
+++ b/src/components/Gam.tsx
@@ -1,272 +1,41 @@
-import React from 'react'
-import { twMerge } from 'tailwind-merge'
-import { Link } from '@tanstack/react-router'
+import type React from 'react'
 
-declare global {
-  interface Window {
-    googletag:
-      | undefined
-      | Partial<{
-          cmd: {
-            push: (fn: () => void) => void
-          }
-          pubads: () => {
-            enableSingleRequest: () => void
-            refresh: (slots: any[]) => void
-          }
-          enableServices: () => void
-          display: (id: string) => void
-          defineSlot: (
-            path: string,
-            sizes: [number, number][],
-            id: string,
-          ) => {
-            addService: (pubads: any) => {
-              setTargeting: (key: string, value: string[]) => void
-            }
-          }
-        }>
-    fusetag: {
-      que: {
-        push: (fn: () => void) => void
-      }
-      pageInit: () => void
-    }
-  }
-}
+// Disabled ad positions — these return null for now.
+// They will be re-enabled when private partner ad campaigns are active.
 
-export function GamOnPageChange() {
-  if (typeof window === 'undefined' || !window.fusetag) return
-  try {
-    window.fusetag.que.push(function () {
-      try {
-        window.fusetag.pageInit()
-      } catch (error) {
-        // Suppress cross-origin errors from Publift Fuse ad viewability measurement
-        // These can occur on iOS Safari due to strict Same-Origin Policy enforcement
-        console.debug('Error during fusetag.pageInit():', error)
-      }
-    })
-  } catch (error) {
-    // Suppress cross-origin errors from Publift Fuse ad viewability measurement
-    console.debug('Error calling fusetag.que.push():', error)
-  }
+export function GamHeader(
+  _props: React.HTMLAttributes<HTMLDivElement> & {
+    adClassName?: string
+  },
+) {
+  return null
 }
 
-export const GamScripts = () => (
-  <>
-    <script
-      dangerouslySetInnerHTML={{
-        __html: `
-  // Add global error handler to suppress Publift Fuse cross-origin errors
-  // These errors occur in iOS Safari due to strict Same-Origin Policy enforcement
-  // when the ad viewability script tries to access parent window properties
-  // Also suppress race condition errors during navigation
-  (function() {
-    var originalErrorHandler = window.onerror;
-    window.onerror = function(message, source, lineno, colno, error) {
-      // Check if this is a Publift Fuse cross-origin error
-      if (
-        source && (
-          source.includes('/media/native/') ||
-          source.includes('fuse.js') ||
-          source.includes('fuseplatform.net') ||
-          source.includes('/nobid/blocking_script.js')
-        ) && (
-          (message && typeof message === 'string' && (
-            message.includes('contextWindow.parent') ||
-            message.includes('null is not an object') ||
-            message.includes('is not a function')
-          )) ||
-          (error && error.message && (
-            error.message.includes('contextWindow.parent') ||
-            error.message.includes('null is not an object') ||
-            error.message.includes('is not a function')
-          ))
-        )
-      ) {
-        // Suppress the error - log to console in debug mode
-        console.debug('Suppressed Publift Fuse cross-origin error:', message, source);
-        return true; // Prevent default error handling
-      }
-      // Call original error handler for other errors
-      if (originalErrorHandler) {
-        return originalErrorHandler.apply(this, arguments);
-      }
-      return false;
-    };
-  })();
-`,
-      }}
-    />
-    <script
-      async
-      src="https://cdn.fuseplatform.net/publift/tags/2/4019/fuse.js"
-      onError={(e) => {
-        // Suppress script loading errors from Publift Fuse
-        console.debug('Error loading fuse.js:', e)
-      }}
-    />
-    <script
-      dangerouslySetInnerHTML={{
-        __html: `window.googletag = window.googletag || { cmd: [] };
-  googletag.cmd.push(function () {
-    googletag.pubads().set("page_url", "https://tanstack.com/ ");
-  });`,
-      }}
-    />
-  </>
-)
-
-// GAM divs for ad placement
-const gamDivs = {
-  incontent_1: 'incontent_1',
-  incontent_2: 'incontent_2',
-  incontent_3: 'incontent_3',
-  incontent_4: 'incontent_4',
-  incontent_footer: 'incontent_footer',
-  mrec_1: 'mrec_1',
-  mrec_2: 'mrec_2',
-  vrec_1: 'vrec_1',
-  header: 'header',
-} as const
-
-function GamAd({
-  name,
-  adClassName,
-  className,
-  placeholderClassName,
-  popupPosition = 'bottom',
-  borderClassName,
-  ...props
-}: { name: keyof typeof gamDivs } & React.HTMLAttributes<HTMLDivElement> & {
+export function GamFooter(
+  _props?: React.HTMLAttributes<HTMLDivElement> & {
     adClassName?: string
     placeholderClassName?: string
     popupPosition?: 'top' | 'bottom'
     borderClassName?: string
-  }) {
-  const gamId = gamDivs[name]
-
-  const popupClasses =
-    popupPosition === 'top'
-      ? 'absolute bottom-full right-0 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300 z-10'
-      : 'absolute top-full right-0 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300 z-10'
-
-  borderClassName = twMerge('rounded-xl overflow-hidden', borderClassName)
-
-  return (
-    <div {...props} className={twMerge('relative group', className)}>
-      <div
-        className={twMerge(
-          'absolute inset-0 bg-white/50 dark:bg-black/20 shadow-md',
-          borderClassName,
-          placeholderClassName,
-          'pointer-events-none',
-        )}
-      >
-        <div className="flex justify-center items-center h-full opacity-50 gap-1">
-          <span className="inline-block w-1 h-1 rounded-full bg-gray-500 animate-pulse [animation-delay:0ms]" />
-          <span className="inline-block w-1 h-1 rounded-full bg-gray-500 animate-pulse [animation-delay:150ms]" />
-          <span className="inline-block w-1 h-1 rounded-full bg-gray-500 animate-pulse [animation-delay:300ms]" />
-        </div>
-        <div
-          className={twMerge(
-            'absolute -top-px -left-px -right-px -bottom-px border-[2px] border-gray-200 dark:border-gray-900',
-            borderClassName,
-          )}
-        />
-      </div>
-      <div className="relative overflow-hidden">
-        <div className={twMerge('overflow-hidden', borderClassName)}>
-          <div data-fuse={gamId} className={adClassName} />
-        </div>
-        <div
-          className={twMerge(
-            'absolute -top-px -left-px -right-px -bottom-px border-[2px] border-gray-200 dark:border-gray-900',
-            borderClassName,
-            'pointer-events-none',
-          )}
-        />
-      </div>
-      <div className={twMerge('flex gap-1', popupClasses)}>
-        <Link
-          to="/ads"
-          className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-2 py-1 bg-white/90 dark:bg-gray-700 rounded-lg shadow-md whitespace-nowrap"
-        >
-          Learn about TanStack Ads
-        </Link>
-        <Link
-          to="/ads"
-          hash="hide-ads"
-          className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-2 py-1 bg-white/90 dark:bg-gray-700 rounded-lg shadow-md whitespace-nowrap"
-        >
-          Hide Ads
-        </Link>
-      </div>
-    </div>
-  )
-}
-
-export function GamFooter(
-  props: Omit<React.ComponentProps<typeof GamAd>, 'name'>,
+    style?: React.CSSProperties
+  },
 ) {
-  return (
-    <GamAd
-      {...props}
-      name="incontent_footer"
-      style={{ maxWidth: '728px', ...props.style }}
-    />
-  )
+  return null
 }
 
 export function GamRightRailSquare() {
-  return (
-    <GamAd
-      name="mrec_1"
-      className="w-[320px]"
-      adClassName="scale-[.8] origin-top-left"
-    />
-  )
+  return null
 }
 
 export function GamLeftRailSquare() {
-  return (
-    <GamAd
-      name="mrec_2"
-      className="w-[320px]"
-      adClassName="scale-[.8] origin-top-left"
-    />
-  )
+  return null
 }
 
-// Export GAM div components for direct use
-
-export function GamVrec1(
-  props: Omit<React.ComponentProps<typeof GamAd>, 'name'>,
-) {
-  return (
-    <GamAd
-      {...props}
-      name="vrec_1"
-      className={twMerge('w-[300px] min-h-[600px]', props.className)}
-    />
-  )
+// No-ops — the external ad SDK is gone, these are kept for API compat.
+export function GamScripts() {
+  return null
 }
 
-export function GamHeader(
-  props: React.HTMLAttributes<HTMLDivElement> & {
-    adClassName?: string
-  },
-) {
-  return (
-    <GamAd
-      name="header"
-      {...props}
-      className={twMerge(
-        'w-full max-w-[728px] flex mx-auto justify-center',
-        props.className,
-      )}
-      adClassName={twMerge('h-[90px]', props.adClassName)}
-    />
-  )
+export function GamOnPageChange() {
+  // intentional no-op
 }
diff --git a/src/components/ImageUpload.client.tsx b/src/components/ImageUpload.client.tsx
new file mode 100644
index 000000000..fed0ed70c
--- /dev/null
+++ b/src/components/ImageUpload.client.tsx
@@ -0,0 +1,214 @@
+import * as React from 'react'
+import { useUploadThing } from '~/utils/uploadthing.client'
+import { useToast } from './ToastProvider'
+import { Upload, X, Loader2 } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import {
+  SHOWCASE_IMAGE_MAX_BYTES,
+  validateImageUploadFile,
+} from '~/utils/upload-preflight'
+
+export interface ImageUploadProps {
+  value?: string
+  onChange: (url: string | undefined) => void
+  label: string
+  hint?: string
+  required?: boolean
+  aspectRatio?: 'video' | 'square'
+  size?: 'default' | 'small'
+  className?: string
+}
+
+export function ImageUploadClient({
+  value,
+  onChange,
+  label,
+  hint,
+  required,
+  aspectRatio = 'video',
+  size = 'default',
+  className,
+}: ImageUploadProps) {
+  const { notify } = useToast()
+  const [isUploading, setIsUploading] = React.useState(false)
+  const [dragOver, setDragOver] = React.useState(false)
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  const { startUpload } = useUploadThing('showcaseUploader', {
+    onClientUploadComplete: (res) => {
+      setIsUploading(false)
+      if (res?.[0]?.ufsUrl) {
+        onChange(res[0].ufsUrl)
+      }
+    },
+    onUploadError: (error) => {
+      setIsUploading(false)
+      notify(
+        <div>
+          <div className="font-medium">Upload failed</div>
+          <div className="text-gray-500 dark:text-gray-400 text-xs">
+            {error.message}
+          </div>
+        </div>,
+      )
+    },
+  })
+
+  const handleFileSelect = async (file: File) => {
+    const validationError = validateImageUploadFile(
+      file,
+      SHOWCASE_IMAGE_MAX_BYTES,
+    )
+
+    if (validationError) {
+      notify(
+        <div>
+          <div className="font-medium">Invalid file type</div>
+          <div className="text-gray-500 dark:text-gray-400 text-xs">
+            {validationError}
+          </div>
+        </div>,
+      )
+      return
+    }
+
+    setIsUploading(true)
+    await startUpload([file])
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      handleFileSelect(file)
+    }
+    e.target.value = ''
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setDragOver(false)
+    const file = e.dataTransfer.files?.[0]
+    if (file) {
+      handleFileSelect(file)
+    }
+  }
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    setDragOver(true)
+  }
+
+  const handleDragLeave = () => {
+    setDragOver(false)
+  }
+
+  const handleRemove = () => {
+    onChange(undefined)
+  }
+
+  const isSmall = size === 'small'
+  const aspectClass = aspectRatio === 'video' ? 'aspect-video' : 'aspect-square'
+  const sizeClass = isSmall
+    ? 'w-24'
+    : aspectRatio === 'video'
+      ? 'max-w-md'
+      : 'w-40'
+
+  return (
+    <div className={className}>
+      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        {label} {required && '*'}
+      </label>
+
+      {value ? (
+        <div className={twMerge('relative', sizeClass)}>
+          <div
+            className={twMerge(
+              'relative overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-900',
+              aspectClass,
+            )}
+          >
+            <img
+              src={value}
+              alt="Uploaded"
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <button
+            type="button"
+            onClick={handleRemove}
+            className={twMerge(
+              'absolute bg-red-600 hover:bg-red-700 text-white rounded-full transition-colors',
+              isSmall ? 'top-1 right-1 p-1' : 'top-2 right-2 p-1.5',
+            )}
+            title="Remove image"
+          >
+            <X className={isSmall ? 'w-3 h-3' : 'w-4 h-4'} />
+          </button>
+        </div>
+      ) : (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        <div
+          onClick={() => fileInputRef.current?.click()}
+          onDrop={handleDrop}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          className={twMerge(
+            'relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed cursor-pointer transition-colors',
+            aspectClass,
+            sizeClass,
+            dragOver
+              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+              : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 bg-gray-50 dark:bg-gray-800/50',
+            isUploading && 'pointer-events-none opacity-60',
+          )}
+        >
+          {isUploading ? (
+            <div className="p-4 text-center">
+              <Loader2
+                className={twMerge(
+                  'text-blue-500 animate-spin mx-auto',
+                  isSmall ? 'w-5 h-5' : 'w-8 h-8',
+                )}
+              />
+              {!isSmall && (
+                <span className="mt-2 block text-sm text-gray-600 dark:text-gray-400">
+                  Uploading...
+                </span>
+              )}
+            </div>
+          ) : (
+            <div className="p-4 text-center">
+              <Upload
+                className={twMerge(
+                  'text-gray-400 mx-auto',
+                  isSmall ? 'w-5 h-5' : 'w-8 h-8',
+                )}
+              />
+              {!isSmall && (
+                <>
+                  <span className="mt-2 block text-sm text-gray-600 dark:text-gray-400">
+                    Click or drag to upload
+                  </span>
+                  <span className="mt-1 block text-xs text-gray-500">
+                    PNG, JPG up to 4MB
+                  </span>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/png,image/jpeg,image/webp,image/gif"
+        onChange={handleInputChange}
+        className="hidden"
+      />
+
+      {hint && <p className="mt-1 text-xs text-gray-500">{hint}</p>}
+    </div>
+  )
+}
diff --git a/src/components/ImageUpload.tsx b/src/components/ImageUpload.tsx
index abb76fa74..c570960e8 100644
--- a/src/components/ImageUpload.tsx
+++ b/src/components/ImageUpload.tsx
@@ -1,205 +1,21 @@
 import * as React from 'react'
-import { useUploadThing } from '~/utils/uploadthing'
-import { useToast } from './ToastProvider'
-import { Upload, X, Loader2 } from 'lucide-react'
-import { twMerge } from 'tailwind-merge'
+import { ClientOnly } from '@tanstack/react-router'
+import type { ImageUploadProps } from './ImageUpload.client'
 
-interface ImageUploadProps {
-  value?: string
-  onChange: (url: string | undefined) => void
-  label: string
-  hint?: string
-  required?: boolean
-  aspectRatio?: 'video' | 'square'
-  size?: 'default' | 'small'
-  className?: string
-}
-
-export function ImageUpload({
-  value,
-  onChange,
-  label,
-  hint,
-  required,
-  aspectRatio = 'video',
-  size = 'default',
-  className,
-}: ImageUploadProps) {
-  const { notify } = useToast()
-  const [isUploading, setIsUploading] = React.useState(false)
-  const [dragOver, setDragOver] = React.useState(false)
-  const fileInputRef = React.useRef<HTMLInputElement>(null)
-
-  const { startUpload } = useUploadThing('showcaseUploader', {
-    onClientUploadComplete: (res) => {
-      setIsUploading(false)
-      if (res?.[0]?.ufsUrl) {
-        onChange(res[0].ufsUrl)
-      }
-    },
-    onUploadError: (error) => {
-      setIsUploading(false)
-      notify(
-        <div>
-          <div className="font-medium">Upload failed</div>
-          <div className="text-gray-500 dark:text-gray-400 text-xs">
-            {error.message}
-          </div>
-        </div>,
-      )
-    },
-  })
-
-  const handleFileSelect = async (file: File) => {
-    if (!file.type.startsWith('image/')) {
-      notify(
-        <div>
-          <div className="font-medium">Invalid file type</div>
-          <div className="text-gray-500 dark:text-gray-400 text-xs">
-            Please select an image file
-          </div>
-        </div>,
-      )
-      return
-    }
-
-    setIsUploading(true)
-    await startUpload([file])
-  }
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) {
-      handleFileSelect(file)
-    }
-    e.target.value = ''
-  }
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault()
-    setDragOver(false)
-    const file = e.dataTransfer.files?.[0]
-    if (file) {
-      handleFileSelect(file)
-    }
-  }
+const LazyImageUploadClient = React.lazy(() =>
+  import('./ImageUpload.client').then((m) => ({
+    default: m.ImageUploadClient,
+  })),
+)
 
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault()
-    setDragOver(true)
-  }
-
-  const handleDragLeave = () => {
-    setDragOver(false)
-  }
-
-  const handleRemove = () => {
-    onChange(undefined)
-  }
-
-  const isSmall = size === 'small'
-  const aspectClass = aspectRatio === 'video' ? 'aspect-video' : 'aspect-square'
-  const sizeClass = isSmall
-    ? 'w-24'
-    : aspectRatio === 'video'
-      ? 'max-w-md'
-      : 'w-40'
+export type { ImageUploadProps }
 
+export function ImageUpload(props: ImageUploadProps) {
   return (
-    <div className={className}>
-      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-        {label} {required && '*'}
-      </label>
-
-      {value ? (
-        <div className={twMerge('relative', sizeClass)}>
-          <div
-            className={twMerge(
-              'relative overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-900',
-              aspectClass,
-            )}
-          >
-            <img
-              src={value}
-              alt="Uploaded"
-              className="w-full h-full object-cover"
-            />
-          </div>
-          <button
-            type="button"
-            onClick={handleRemove}
-            className={twMerge(
-              'absolute bg-red-600 hover:bg-red-700 text-white rounded-full transition-colors',
-              isSmall ? 'top-1 right-1 p-1' : 'top-2 right-2 p-1.5',
-            )}
-            title="Remove image"
-          >
-            <X className={isSmall ? 'w-3 h-3' : 'w-4 h-4'} />
-          </button>
-        </div>
-      ) : (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-        <div
-          onClick={() => fileInputRef.current?.click()}
-          onDrop={handleDrop}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          className={twMerge(
-            'relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed cursor-pointer transition-colors',
-            aspectClass,
-            sizeClass,
-            dragOver
-              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-              : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 bg-gray-50 dark:bg-gray-800/50',
-            isUploading && 'pointer-events-none opacity-60',
-          )}
-        >
-          {isUploading ? (
-            <div className="p-4 text-center">
-              <Loader2
-                className={twMerge(
-                  'text-blue-500 animate-spin mx-auto',
-                  isSmall ? 'w-5 h-5' : 'w-8 h-8',
-                )}
-              />
-              {!isSmall && (
-                <span className="mt-2 block text-sm text-gray-600 dark:text-gray-400">
-                  Uploading...
-                </span>
-              )}
-            </div>
-          ) : (
-            <div className="p-4 text-center">
-              <Upload
-                className={twMerge(
-                  'text-gray-400 mx-auto',
-                  isSmall ? 'w-5 h-5' : 'w-8 h-8',
-                )}
-              />
-              {!isSmall && (
-                <>
-                  <span className="mt-2 block text-sm text-gray-600 dark:text-gray-400">
-                    Click or drag to upload
-                  </span>
-                  <span className="mt-1 block text-xs text-gray-500">
-                    PNG, JPG up to 4MB
-                  </span>
-                </>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/*"
-        onChange={handleInputChange}
-        className="hidden"
-      />
-
-      {hint && <p className="mt-1 text-xs text-gray-500">{hint}</p>}
-    </div>
+    <ClientOnly>
+      <React.Suspense fallback={null}>
+        <LazyImageUploadClient {...props} />
+      </React.Suspense>
+    </ClientOnly>
   )
 }
diff --git a/src/components/InteractiveSandbox.tsx b/src/components/InteractiveSandbox.tsx
index b5c2cdabe..aedc5189d 100644
--- a/src/components/InteractiveSandbox.tsx
+++ b/src/components/InteractiveSandbox.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { stackBlitzIframeProps } from '~/utils/stackblitz-embed'
 
 interface InteractiveSandboxProps {
   isActive: boolean
@@ -17,6 +18,8 @@ export function InteractiveSandbox({
   libraryName,
   embedEditor,
 }: InteractiveSandboxProps) {
+  const isStackBlitz = embedEditor === 'stackblitz'
+
   return (
     <div
       className={`absolute inset-0 ${
@@ -25,8 +28,9 @@ export function InteractiveSandbox({
       aria-hidden={!isActive}
     >
       <iframe
-        src={embedEditor === 'codesandbox' ? codeSandboxUrl : stackBlitzUrl}
+        src={isStackBlitz ? stackBlitzUrl : codeSandboxUrl}
         title={`${libraryName} | ${examplePath}`}
+        {...(isStackBlitz ? stackBlitzIframeProps : {})}
         sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
         className="w-full h-full min-h-[80dvh] overflow-hidden shadow-lg bg-white dark:bg-black"
       />
diff --git a/src/components/LandingCommunitySection.tsx b/src/components/LandingCommunitySection.tsx
new file mode 100644
index 000000000..0c65da17d
--- /dev/null
+++ b/src/components/LandingCommunitySection.tsx
@@ -0,0 +1,48 @@
+import { Hydrate } from '@tanstack/react-start'
+import { visible } from '@tanstack/react-start/hydration'
+import type { LibraryId } from '~/libraries'
+import { MaintainersSection } from './MaintainersSection'
+import { PartnersSection } from './PartnersSection'
+
+interface LandingCommunitySectionProps {
+  libraryId: LibraryId
+}
+
+function SectionSkeleton({ title }: { title: string }) {
+  return (
+    <div className="px-4 w-full lg:max-w-(--breakpoint-lg) md:mx-auto">
+      <div className="space-y-8">
+        <div className="h-10 w-48 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse" />
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <div
+              key={`${title}-${index}`}
+              className="aspect-square rounded-lg bg-gray-200/70 dark:bg-gray-800/70 animate-pulse"
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function LandingCommunitySection({
+  libraryId,
+}: LandingCommunitySectionProps) {
+  return (
+    <Hydrate
+      when={visible({ rootMargin: '25%' })}
+      fallback={
+        <div className="flex flex-col gap-20 md:gap-24">
+          <SectionSkeleton title="Maintainers" />
+          <SectionSkeleton title="Partners" />
+        </div>
+      }
+    >
+      <div className="flex flex-col gap-20 md:gap-24">
+        <MaintainersSection libraryId={libraryId} />
+        <PartnersSection libraryId={libraryId} />
+      </div>
+    </Hydrate>
+  )
+}
diff --git a/src/components/LandingPageGad.tsx b/src/components/LandingPageGad.tsx
index 367053756..e017c9e86 100644
--- a/src/components/LandingPageGad.tsx
+++ b/src/components/LandingPageGad.tsx
@@ -1,12 +1,4 @@
-import { GamFooter } from './Gam'
-import { AdGate } from '~/contexts/AdsContext'
-
+// Landing page ad slot — disabled for now, reserved for future partner campaigns.
 export default function LandingPageGad() {
-  return (
-    <AdGate>
-      <div className={`lg:max-[400px] px-4 mx-auto flex justify-center`}>
-        <GamFooter />
-      </div>
-    </AdGate>
-  )
+  return null
 }
diff --git a/src/components/LazySponsorSection.tsx b/src/components/LazySponsorSection.tsx
deleted file mode 100644
index 2d7915c63..000000000
--- a/src/components/LazySponsorSection.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react'
-import { useSuspenseQuery } from '@tanstack/react-query'
-import { ArrowRight } from 'lucide-react'
-import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
-import { getSponsorsForSponsorPack } from '~/server/sponsors'
-import { Button } from '~/ui'
-import SponsorPack from './SponsorPack'
-import PlaceholderSponsorPack from './PlaceholderSponsorPack'
-
-type LazySponsorSectionProps = {
-  title?: React.ReactNode
-  aspectRatio?: string
-  showCTA?: boolean
-}
-
-function SponsorPackWithQuery() {
-  const { data: sponsors } = useSuspenseQuery({
-    queryKey: ['sponsors'],
-    queryFn: () => getSponsorsForSponsorPack(),
-    staleTime: 5 * 60 * 1000, // 5 minutes
-  })
-
-  return <SponsorPack sponsors={sponsors} />
-}
-
-export function LazySponsorSection({
-  title = 'Sponsors',
-  aspectRatio = '1/1',
-  showCTA = true,
-}: LazySponsorSectionProps) {
-  const { ref, isIntersecting } = useIntersectionObserver({
-    rootMargin: '50%', // Half viewport height - triggers when about half a page away
-    triggerOnce: true,
-  })
-
-  return (
-    <div
-      ref={ref}
-      className="px-4 w-full lg:max-w-(--breakpoint-lg) md:mx-auto"
-    >
-      <div className="space-y-8">
-        <h3 className="text-3xl font-bold">{title}</h3>
-        <div className="flex flex-wrap relative w-full" style={{ aspectRatio }}>
-          {!isIntersecting ? (
-            <PlaceholderSponsorPack />
-          ) : (
-            <React.Suspense fallback={<PlaceholderSponsorPack />}>
-              <SponsorPackWithQuery />
-            </React.Suspense>
-          )}
-        </div>
-        {showCTA ? (
-          <div className="flex justify-center">
-            <Button as="a" href="https://github.com/sponsors/tannerlinsley">
-              Become a Sponsor
-              <ArrowRight className="w-4 h-4" />
-            </Button>
-          </div>
-        ) : null}
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/LibrariesWidget.tsx b/src/components/LibrariesWidget.tsx
new file mode 100644
index 000000000..8ea597ed8
--- /dev/null
+++ b/src/components/LibrariesWidget.tsx
@@ -0,0 +1,31 @@
+import { Link } from '@tanstack/react-router'
+import { publicLibraries } from '~/libraries'
+
+const featuredLibraries = publicLibraries.slice(0, 8).map((library) => ({
+  id: library.id,
+  name: library.name,
+}))
+
+export function LibrariesWidget() {
+  return (
+    <div className="p-4">
+      <div className="mb-3">
+        <Link to="/" hash="libraries" className="font-semibold text-sm">
+          Libraries
+        </Link>
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        {featuredLibraries.map((library) => (
+          <Link
+            key={library.id}
+            to="/$libraryId"
+            params={{ libraryId: library.id }}
+            className="text-xs opacity-70 hover:opacity-100 hover:underline"
+          >
+            {library.name.replace('TanStack ', '')}
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/LibraryCard.tsx b/src/components/LibraryCard.tsx
index a7bbf7a85..a182e21d5 100644
--- a/src/components/LibraryCard.tsx
+++ b/src/components/LibraryCard.tsx
@@ -1,24 +1,35 @@
-import { Link } from '@tanstack/react-router'
+import { Link, useParams } from '@tanstack/react-router'
 import { Library } from '~/libraries'
+import { frameworkOptions } from '~/libraries/frameworks'
 import { twMerge } from 'tailwind-merge'
 
 export default function LibraryCard({
   library,
   index = 0,
   isGeneric = false,
+  namePrefix,
 }: {
   library: Library
   index?: number
   isGeneric?: boolean
+  namePrefix?: string
 }) {
   const isExternal = library.to?.startsWith('http')
   const Component = isExternal ? 'a' : Link
   const props = isExternal
     ? { href: library.to, target: '_blank', rel: 'noopener noreferrer' }
     : { to: library.to ?? '#' }
+  const params = useParams({ strict: false })
+  const frameworkPrefix =
+    namePrefix ??
+    frameworkOptions.find((framework) => framework.value === params.framework)
+      ?.label
 
   const hasTanStackPrefix = library.name.startsWith('TanStack ')
   const nameWithoutPrefix = library.name.replace('TanStack ', '')
+  const displayName = frameworkPrefix
+    ? `${frameworkPrefix}-${nameWithoutPrefix}`
+    : nameWithoutPrefix
 
   return (
     <Component
@@ -82,7 +93,7 @@ export default function LibraryCard({
                       : 'text-current'
                   }
                 >
-                  {nameWithoutPrefix}
+                  {displayName}
                 </span>
               </>
             ) : (
@@ -93,7 +104,7 @@ export default function LibraryCard({
                     : 'text-current'
                 }
               >
-                {nameWithoutPrefix}
+                {displayName}
               </span>
             )}
           </div>
@@ -153,7 +164,7 @@ export default function LibraryCard({
         <div
           className={twMerge(
             `absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md`,
-            ['bg-gradient-to-r', library.colorFrom, library.colorTo],
+            ['bg-linear-to-r', library.colorFrom, library.colorTo],
             'uppercase font-black italic text-xs',
             library.badgeTextStyle ?? 'text-white',
           )}
diff --git a/src/components/LibraryDownloadsMicro.tsx b/src/components/LibraryDownloadsMicro.tsx
new file mode 100644
index 000000000..8aefcae99
--- /dev/null
+++ b/src/components/LibraryDownloadsMicro.tsx
@@ -0,0 +1,415 @@
+import * as React from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { twMerge } from 'tailwind-merge'
+import type { LibrarySlim } from '~/libraries'
+import { ossStatsQuery, recentDownloadsQuery } from '~/queries/stats'
+import type { RecentDownloadStats } from '~/utils/stats.types'
+
+type DownloadPeriod = 'daily' | 'monthly' | 'weekly'
+
+type LibraryDownloadsMicroProps = {
+  animateIncreaseTrend?: boolean
+  className?: string
+  label?: string
+  labelClassName?: string
+  library: LibrarySlim
+  period?: DownloadPeriod
+  showTotals?: boolean
+  valueClassName?: string
+}
+
+type AnimatedDownloadData = {
+  stats: RecentDownloadStats | undefined
+  totalDownloads: number | undefined
+  trendPerMs: number
+}
+
+const weekInMs = 7 * 24 * 60 * 60 * 1000
+const statsRowClassName =
+  'grid w-64 max-w-full grid-cols-[minmax(11ch,max-content)_auto] items-baseline gap-1.5 text-sm font-bold text-zinc-600 dark:text-zinc-400'
+
+function hasDownloads(value: number | undefined | null): value is number {
+  return (
+    value !== undefined && value !== null && value > 0 && Number.isFinite(value)
+  )
+}
+
+function getRecentDownloadTotal(
+  stats: RecentDownloadStats | undefined,
+  period: DownloadPeriod,
+) {
+  if (!stats) {
+    return undefined
+  }
+
+  if (period === 'daily') {
+    return stats.dailyDownloads
+  }
+
+  if (period === 'weekly') {
+    return stats.weeklyDownloads
+  }
+
+  return stats.monthlyDownloads
+}
+
+function getWeeklyIncreaseTrendPerMs(stats: RecentDownloadStats | undefined) {
+  if (!stats) {
+    return 0
+  }
+
+  if (stats.weeklyDownloads <= 0 || !Number.isFinite(stats.weeklyDownloads)) {
+    return 0
+  }
+
+  const weeklyIncrease = stats.weeklyDownloads - stats.previousWeeklyDownloads
+  const positiveIncrease = Math.max(0, weeklyIncrease)
+
+  return (stats.weeklyDownloads + positiveIncrease) / weekInMs
+}
+
+function getAnimatedDownloadTotal({
+  stats,
+  totalDownloads,
+  trendPerMs,
+}: {
+  stats: RecentDownloadStats | undefined
+  totalDownloads: number | undefined
+  trendPerMs: number
+}) {
+  if (!hasDownloads(totalDownloads) || !stats || !trendPerMs) {
+    return totalDownloads ?? 0
+  }
+
+  const elapsedMs = Math.max(0, Date.now() - stats.updatedAt)
+  return Math.floor(totalDownloads + elapsedMs * trendPerMs)
+}
+
+function useAnimatedDownloadValueRef({
+  stats,
+  totalDownloads,
+  trendPerMs,
+}: {
+  stats: RecentDownloadStats | undefined
+  totalDownloads: number | undefined
+  trendPerMs: number
+}): React.RefCallback<HTMLSpanElement> {
+  const dataRef = React.useRef<AnimatedDownloadData>({
+    stats,
+    totalDownloads,
+    trendPerMs,
+  })
+  const elementRef = React.useRef<HTMLSpanElement | null>(null)
+  const frameRef = React.useRef<number | undefined>(undefined)
+  const lastValueRef = React.useRef<number | null>(null)
+
+  dataRef.current = {
+    stats,
+    totalDownloads,
+    trendPerMs,
+  }
+
+  const getValue = React.useCallback(
+    () => getAnimatedDownloadTotal(dataRef.current),
+    [],
+  )
+
+  const updateText = React.useCallback(() => {
+    const element = elementRef.current
+    if (!element) {
+      return
+    }
+
+    const value = getValue()
+
+    if (value === lastValueRef.current) {
+      return
+    }
+
+    lastValueRef.current = value
+    element.textContent = value.toLocaleString()
+  }, [getValue])
+
+  const canAnimate = React.useCallback(() => {
+    const data = dataRef.current
+
+    return (
+      data.trendPerMs > 0 &&
+      Number.isFinite(data.trendPerMs) &&
+      !!elementRef.current
+    )
+  }, [])
+
+  const stopFrame = React.useCallback(() => {
+    if (frameRef.current !== undefined) {
+      window.cancelAnimationFrame(frameRef.current)
+      frameRef.current = undefined
+    }
+  }, [])
+
+  const tick = React.useCallback(() => {
+    frameRef.current = undefined
+
+    if (document.visibilityState === 'hidden' || !canAnimate()) {
+      return
+    }
+
+    updateText()
+    frameRef.current = window.requestAnimationFrame(tick)
+  }, [canAnimate, updateText])
+
+  const startFrame = React.useCallback(() => {
+    if (
+      !canAnimate() ||
+      frameRef.current !== undefined ||
+      document.visibilityState === 'hidden'
+    ) {
+      return
+    }
+
+    frameRef.current = window.requestAnimationFrame(tick)
+  }, [canAnimate, tick])
+
+  React.useEffect(() => {
+    updateText()
+
+    if (!canAnimate()) {
+      stopFrame()
+      return
+    }
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'hidden') {
+        stopFrame()
+        return
+      }
+
+      updateText()
+      startFrame()
+    }
+
+    const handleResume = () => {
+      updateText()
+      startFrame()
+    }
+
+    startFrame()
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    window.addEventListener('focus', handleResume)
+    window.addEventListener('pageshow', handleResume)
+
+    return () => {
+      stopFrame()
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+      window.removeEventListener('focus', handleResume)
+      window.removeEventListener('pageshow', handleResume)
+    }
+  }, [
+    canAnimate,
+    startFrame,
+    stats?.updatedAt,
+    stopFrame,
+    totalDownloads,
+    trendPerMs,
+    updateText,
+  ])
+
+  return React.useCallback(
+    (node: HTMLSpanElement | null) => {
+      elementRef.current = node
+
+      if (node) {
+        updateText()
+        startFrame()
+        return
+      }
+
+      stopFrame()
+    },
+    [startFrame, stopFrame, updateText],
+  )
+}
+
+function getWeeklyTrendDescription(stats: RecentDownloadStats | undefined) {
+  if (!stats) {
+    return undefined
+  }
+
+  const weeklyIncrease = stats.weeklyDownloads - stats.previousWeeklyDownloads
+
+  if (weeklyIncrease <= 0 || !Number.isFinite(weeklyIncrease)) {
+    return 'ticking at the current weekly download pace'
+  }
+
+  return `up ${weeklyIncrease.toLocaleString()} from the previous week`
+}
+
+function formatStatsLabel(label: string) {
+  return label
+    .split(' ')
+    .map((word) => {
+      if (word.toLowerCase() === 'github') {
+        return 'GitHub'
+      }
+
+      if (word.toLowerCase() === 'npm') {
+        return 'NPM'
+      }
+
+      return word.charAt(0).toUpperCase() + word.slice(1)
+    })
+    .join(' ')
+}
+
+function formatAbbreviatedNumber(value: number) {
+  const units = [
+    { label: 'Billion', value: 1_000_000_000 },
+    { label: 'Million', value: 1_000_000 },
+    { label: 'Thousand', value: 1_000 },
+  ]
+
+  const unit = units.find((candidate) => Math.abs(value) >= candidate.value)
+
+  if (!unit) {
+    return value.toLocaleString()
+  }
+
+  return `${(value / unit.value).toFixed(1)} ${unit.label}`
+}
+
+export function LibraryDownloadsMicro({
+  animateIncreaseTrend = false,
+  className,
+  label = 'monthly npm downloads',
+  labelClassName,
+  library,
+  period = 'monthly',
+  showTotals = false,
+  valueClassName,
+}: LibraryDownloadsMicroProps) {
+  const { data: stats } = useQuery(recentDownloadsQuery({ library }))
+  const { data: ossStats } = useQuery({
+    ...ossStatsQuery({ library }),
+    enabled: showTotals,
+  })
+  const totalDownloads = getRecentDownloadTotal(stats, period)
+  const trendPerMs =
+    animateIncreaseTrend && period === 'weekly'
+      ? getWeeklyIncreaseTrendPerMs(stats)
+      : 0
+  const displayedDownloadsRef = useAnimatedDownloadValueRef({
+    stats,
+    totalDownloads,
+    trendPerMs,
+  })
+  const hasNpmDownloads = hasDownloads(totalDownloads)
+  const weeklyTrendDescription =
+    animateIncreaseTrend && period === 'weekly'
+      ? getWeeklyTrendDescription(stats)
+      : undefined
+  const totalDownloadCount = ossStats?.npm?.totalDownloads
+  const starCount = ossStats?.github?.starCount
+  const formattedLabel = formatStatsLabel(label)
+
+  const micro = hasNpmDownloads ? (
+    <span
+      className={twMerge(
+        showTotals
+          ? statsRowClassName
+          : 'inline-flex items-center gap-1.5 text-sm font-bold text-zinc-600 dark:text-zinc-400',
+      )}
+      title={weeklyTrendDescription}
+    >
+      <span
+        className={twMerge(
+          showTotals
+            ? 'text-left text-zinc-950 dark:text-white'
+            : 'relative z-10 text-zinc-950 dark:text-white',
+          valueClassName,
+        )}
+        ref={displayedDownloadsRef}
+        style={{ fontVariantNumeric: 'tabular-nums' }}
+      >
+        {(totalDownloads ?? 0).toLocaleString()}
+      </span>
+      <span
+        className={twMerge(
+          showTotals ? 'whitespace-nowrap' : 'relative z-10',
+          labelClassName,
+        )}
+      >
+        {formattedLabel}
+      </span>
+    </span>
+  ) : null
+
+  if (!showTotals) {
+    if (!micro) {
+      return null
+    }
+
+    return (
+      <span
+        className={twMerge(
+          showTotals ? 'inline-flex flex-col items-start gap-1.5' : undefined,
+          className,
+        )}
+      >
+        {micro}
+      </span>
+    )
+  }
+
+  const hasTotalDownloadCount = hasDownloads(totalDownloadCount)
+  const hasStarCount = hasDownloads(starCount)
+  const weeklyDownloadsRow = micro ?? (
+    <span aria-label={label} className={statsRowClassName}>
+      <span
+        className={twMerge(
+          'invisible text-left text-zinc-950 dark:text-white',
+          valueClassName,
+        )}
+        style={{ fontVariantNumeric: 'tabular-nums' }}
+      >
+        000,000,000
+      </span>
+      <span className={twMerge('whitespace-nowrap', labelClassName)}>
+        {formattedLabel}
+      </span>
+    </span>
+  )
+
+  return (
+    <span
+      className={twMerge('inline-flex flex-col items-start gap-1.5', className)}
+    >
+      <span className={statsRowClassName}>
+        <span
+          className={twMerge(
+            'text-left text-zinc-950 dark:text-white',
+            !hasTotalDownloadCount ? 'invisible' : undefined,
+          )}
+          style={{ fontVariantNumeric: 'tabular-nums' }}
+        >
+          {hasTotalDownloadCount
+            ? formatAbbreviatedNumber(totalDownloadCount)
+            : '00.0 Million'}
+        </span>
+        <span>Total Downloads</span>
+      </span>
+      {weeklyDownloadsRow}
+      <span className={statsRowClassName}>
+        <span
+          className={twMerge(
+            'text-left text-zinc-950 dark:text-white',
+            !hasStarCount ? 'invisible' : undefined,
+          )}
+          style={{ fontVariantNumeric: 'tabular-nums' }}
+        >
+          {hasStarCount ? starCount.toLocaleString() : '0'}
+        </span>
+        <span>GitHub Stars</span>
+      </span>
+    </span>
+  )
+}
diff --git a/src/components/LibraryFeatureHighlights.tsx b/src/components/LibraryFeatureHighlights.tsx
deleted file mode 100644
index 02a132802..000000000
--- a/src/components/LibraryFeatureHighlights.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Library } from '~/libraries'
-import { Card } from './Card'
-
-export function LibraryFeatureHighlights({
-  featureHighlights,
-}: {
-  featureHighlights: Library['featureHighlights']
-}) {
-  return featureHighlights?.length ? (
-    <div
-      className={`text-lg grid grid-cols-1 md:grid-cols-2 ${
-        featureHighlights.length > 3 ? 'xl:grid-cols-4' : 'xl:grid-cols-3'
-      } gap-x-8 gap-y-12 p-8 max-w-[1200px] mx-auto`}
-    >
-      {featureHighlights?.map((featureHighlight) => {
-        return (
-          <Card
-            key={featureHighlight.title}
-            className="p-4 pt-6 flex-1 flex flex-col gap-4 items-center rounded-xl relative"
-          >
-            <Card className="text-3xl text-center p-2 rounded-full absolute top-0 left-1/2 -translate-x-1/2 -translate-y-2/3">
-              {featureHighlight.icon}
-            </Card>
-            <div className="flex flex-col gap-4">
-              <h3 className="uppercase text-xl font-black">
-                {featureHighlight.title}
-              </h3>
-              <div className="text-sm text-gray-800 dark:text-gray-200 leading-6">
-                {featureHighlight.description}
-              </div>
-            </div>
-          </Card>
-        )
-      })}
-    </div>
-  ) : null
-}
diff --git a/src/components/LibraryHero.tsx b/src/components/LibraryHero.tsx
deleted file mode 100644
index 5c4fd69fd..000000000
--- a/src/components/LibraryHero.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from 'react'
-import { twMerge } from 'tailwind-merge'
-import { Link, LinkProps } from '@tanstack/react-router'
-import type { Library } from '~/libraries'
-import { Button } from '~/ui'
-
-type LibraryHeroProps = {
-  project: Library
-  cta?: {
-    linkProps: LinkProps
-    label: string
-    className?: string
-  }
-  actions?: React.ReactNode
-}
-
-export function LibraryHero({ project, cta, actions }: LibraryHeroProps) {
-  const resolvedName = project.name.replace('TanStack ', '')
-  const hasColor =
-    project.colorFrom && !project.colorFrom.includes('from-black')
-  // For colorless libraries, use a gray-to-black gradient to create contrast with the black TanStack text
-  const gradientText = hasColor
-    ? `pr-1 inline-block text-transparent bg-clip-text bg-linear-to-r ${project.colorFrom} ${project.colorTo}`
-    : 'pr-1 inline-block text-transparent bg-clip-text bg-linear-to-r from-gray-400 to-black dark:from-gray-500 dark:to-white'
-
-  return (
-    <div className="flex flex-col items-center gap-8 text-center px-4">
-      <h1 className="font-black flex gap-x-3 gap-y-0 items-center text-5xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em] flex-wrap justify-center leading-none">
-        <span>TanStack</span>
-        <span className={twMerge(gradientText, 'relative')}>
-          {resolvedName}
-          {project.badge ? (
-            <div
-              className={twMerge(
-                'absolute bottom-0 right-0 translate-y-full',
-                '[letter-spacing:0] text-sm md:text-base font-black lg:text-lg align-super text-white animate-bounce uppercase',
-                'dark:text-black bg-black dark:bg-white shadow-black/30 px-2 py-1 rounded-md',
-                'leading-none whitespace-nowrap',
-              )}
-            >
-              {String(project.badge).toUpperCase().trim()}
-            </div>
-          ) : null}
-        </span>
-      </h1>
-      <h2 className="font-bold text-2xl md:text-4xl max-w-xl xl:max-w-4xl text-balance [letter-spacing:-0.03em]">
-        {project.tagline}
-      </h2>
-      {project.description ? (
-        <p className="text opacity-90 max-w-lg xl:max-w-2xl lg:text-base text-balance">
-          {project.description}
-        </p>
-      ) : null}
-      {actions ? (
-        <div className="flex flex-wrap gap-2 justify-center">{actions}</div>
-      ) : cta ? (
-        <Button
-          as={Link}
-          {...cta.linkProps}
-          className={twMerge('py-2 px-4 text-sm', cta.className)}
-        >
-          {cta.label}
-        </Button>
-      ) : null}
-    </div>
-  )
-}
diff --git a/src/components/LibraryLayout.tsx b/src/components/LibraryLayout.tsx
new file mode 100644
index 000000000..6cf10e3df
--- /dev/null
+++ b/src/components/LibraryLayout.tsx
@@ -0,0 +1,1425 @@
+import * as React from 'react'
+import { ChevronLeft, ChevronRight, Menu, X } from 'lucide-react'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { DiscordIcon } from '~/components/icons/DiscordIcon'
+import { Link, useMatches, useParams } from '@tanstack/react-router'
+import { useLocalStorage } from '~/utils/useLocalStorage'
+import { useMediaQuery } from '~/utils/useMediaQuery'
+import { useClickOutside } from '~/hooks/useClickOutside'
+import { last } from '~/utils/utils'
+import type { ConfigSchema, MenuItem } from '~/utils/config'
+import { getActiveDocsNavTabId, getTabbedMenuConfig } from '~/utils/docsNavTabs'
+import { Framework, LibraryId } from '~/libraries'
+import { frameworkOptions } from '~/libraries/frameworks'
+import { twMerge } from 'tailwind-merge'
+import {
+  partners,
+  PartnerImage,
+  partnerTiers,
+  type Partner,
+  type PartnerTier,
+} from '~/utils/partners'
+import {
+  getPartnerPlacementAnalyticsMetadata,
+  getPartnerTierGroupsForPlacement,
+  type PartnerPlacementContext,
+} from '~/utils/partner-placement'
+import { usePartnerPlacementContext } from '~/utils/usePartnerPlacementContext'
+import { Footer } from './Footer'
+import { RecentPostsWidget } from './RecentPostsWidget'
+import { SearchButton } from './SearchButton'
+import { FrameworkSelect, useCurrentFramework } from './FrameworkSelect'
+import { VersionSelect } from './VersionSelect'
+import { Card } from './Card'
+import { PartnersRail, RightRail } from './RightRail'
+import { trackEvent, useTrackedImpression } from '~/utils/analytics'
+
+// Number of days a doc page is flagged as "New"/"Updated" in the sidebar.
+const RECENCY_WINDOW_DAYS = 7
+const RECENCY_WINDOW_MS = RECENCY_WINDOW_DAYS * 24 * 60 * 60 * 1000
+const docsPartnerTierWeights: Record<PartnerTier, number> = {
+  gold: 3,
+  silver: 2,
+  bronze: 1,
+}
+
+type DocRecency = 'new' | 'updated' | null
+type DocsPartner = {
+  category: Partner['category']
+  score: Partner['score']
+  tier?: Partner['tier']
+  id: string
+  name: string
+  href: string
+  image: Parameters<typeof PartnerImage>[0]['config']
+}
+type DocsPartnerTierGroup = {
+  tier: PartnerTier
+  partners: Array<DocsPartner>
+}
+type DocsPartnerScrollSlot = {
+  partner: DocsPartner
+  slotIndex: number
+}
+
+// Determine whether a doc page should show a recency pill, based on the
+// maintainer-supplied `addedAt` / `updatedAt` dates in the repo's docs/config.json.
+// "New" (added) takes priority over "Updated" (edited) when both are recent.
+function getDocRecency(addedAt?: string, updatedAt?: string): DocRecency {
+  const now = Date.now()
+
+  const isRecent = (iso?: string) => {
+    if (!iso) return false
+    const time = new Date(iso).getTime()
+    if (Number.isNaN(time)) return false
+    const age = now - time
+    // Reject future dates; only flag within the window.
+    return age >= 0 && age <= RECENCY_WINDOW_MS
+  }
+
+  if (isRecent(addedAt)) return 'new'
+  if (isRecent(updatedAt)) return 'updated'
+  return null
+}
+
+function DocRecencyPill({
+  recency,
+  date,
+}: {
+  recency: Exclude<DocRecency, null>
+  date?: string
+}) {
+  const isNew = recency === 'new'
+  const label = isNew ? 'New' : 'Updated'
+
+  let title: string | undefined
+  if (date) {
+    // Parse date-only strings (YYYY-MM-DD) as local time so the tooltip doesn't
+    // drift to the previous day in negative-UTC timezones (new Date('2026-06-01')
+    // is UTC midnight, which toLocaleDateString would render as the prior day).
+    const dateOnly = /^(\d{4})-(\d{2})-(\d{2})$/.exec(date)
+    const parsed = dateOnly
+      ? new Date(
+          Number(dateOnly[1]),
+          Number(dateOnly[2]) - 1,
+          Number(dateOnly[3]),
+        )
+      : new Date(date)
+    if (!Number.isNaN(parsed.getTime())) {
+      title = `${isNew ? 'Added' : 'Updated'} ${parsed.toLocaleDateString()}`
+    }
+  }
+
+  return (
+    <span
+      title={title}
+      className={twMerge(
+        'shrink-0 rounded-full px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wide leading-none',
+        isNew
+          ? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
+          : 'bg-sky-500/15 text-sky-600 dark:text-sky-400',
+      )}
+    >
+      {label}
+    </span>
+  )
+}
+
+function DocsPartnerSlot({
+  orderPlacementContext,
+  partners,
+}: {
+  orderPlacementContext: PartnerPlacementContext
+  partners: Array<DocsPartner>
+}) {
+  const tierGroups = React.useMemo(
+    () => getPartnerTierGroupsForPlacement(partners, orderPlacementContext),
+    [partners, orderPlacementContext],
+  )
+  const activeSlot = useDocsPartnerScrollSlot(tierGroups)
+  const { displayedSlot, flipState } = useFlippingDocsPartnerSlot(activeSlot)
+
+  if (!displayedSlot) {
+    return null
+  }
+
+  return (
+    <div className="docs-partner-slot ml-auto flex shrink-0 items-stretch border-l border-gray-500/20 pl-2 pr-3 md:hidden">
+      <DocsPartnerSlotLink
+        key={`${displayedSlot.partner.id}:${displayedSlot.slotIndex}`}
+        flipState={flipState}
+        orderPlacementContext={orderPlacementContext}
+        partner={displayedSlot.partner}
+        slotIndex={displayedSlot.slotIndex}
+      />
+    </div>
+  )
+}
+
+function DocsPartnerSlotLink({
+  flipState,
+  orderPlacementContext,
+  partner,
+  slotIndex,
+}: {
+  flipState: DocsPartnerFlipState
+  orderPlacementContext: PartnerPlacementContext
+  partner: DocsPartner
+  slotIndex: number
+}) {
+  const analyticsMetadata = getPartnerPlacementAnalyticsMetadata(
+    partner,
+    orderPlacementContext,
+  )
+  const ref = useTrackedImpression<'partner_viewed', HTMLAnchorElement>({
+    event: 'partner_viewed',
+    props: {
+      partner_id: partner.id,
+      placement: 'docs_strip',
+      ...analyticsMetadata,
+      slot_index: slotIndex,
+    },
+  })
+  const compactImageConfig = getCompactPartnerImageConfig(partner.image)
+
+  const onClick = () => {
+    let destinationHost: string | undefined
+    try {
+      destinationHost = new URL(partner.href).host
+    } catch {
+      // Bad/relative href — track without host rather than dropping.
+    }
+    trackEvent('partner_clicked', {
+      partner_id: partner.id,
+      placement: 'docs_strip',
+      destination: 'external',
+      destination_host: destinationHost,
+      ...analyticsMetadata,
+      slot_index: slotIndex,
+    })
+  }
+
+  return (
+    <a
+      ref={ref}
+      href={partner.href}
+      target="_blank"
+      rel="noreferrer"
+      aria-label={`${partner.name} partner`}
+      className={twMerge(
+        'docs-partner-slot-link flex h-full shrink-0 items-center justify-center opacity-80 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current',
+      )}
+      data-flip-state={flipState}
+      onClick={onClick}
+    >
+      <div className="flex h-5 max-w-full shrink items-center justify-center [&>div]:!w-auto [&>div]:h-full [&>div]:max-w-full [&_img]:h-full [&_img]:max-w-full [&_img]:w-auto">
+        <PartnerImage
+          className="h-full w-auto object-contain"
+          config={compactImageConfig}
+          alt={partner.name}
+        />
+      </div>
+    </a>
+  )
+}
+
+function useDocsPartnerScrollSlot(tierGroups: Array<DocsPartnerTierGroup>) {
+  const [slot, setSlot] = React.useState(() =>
+    getDocsPartnerScrollSlot(tierGroups, 0),
+  )
+
+  React.useEffect(() => {
+    let animationFrame: number | undefined
+
+    const update = () => {
+      animationFrame = undefined
+      const nextSlot = getDocsPartnerScrollSlot(
+        tierGroups,
+        getPageScrollProgress(),
+      )
+      setSlot((previousSlot) =>
+        areDocsPartnerSlotsEqual(previousSlot, nextSlot)
+          ? previousSlot
+          : nextSlot,
+      )
+    }
+
+    const requestUpdate = () => {
+      if (animationFrame !== undefined) {
+        return
+      }
+      animationFrame = window.requestAnimationFrame(update)
+    }
+
+    update()
+    window.addEventListener('scroll', requestUpdate, { passive: true })
+    window.addEventListener('resize', requestUpdate)
+
+    let resizeObserver: ResizeObserver | undefined
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(requestUpdate)
+      resizeObserver.observe(document.documentElement)
+      if (document.body) {
+        resizeObserver.observe(document.body)
+      }
+    }
+
+    return () => {
+      if (animationFrame !== undefined) {
+        window.cancelAnimationFrame(animationFrame)
+      }
+      window.removeEventListener('scroll', requestUpdate)
+      window.removeEventListener('resize', requestUpdate)
+      resizeObserver?.disconnect()
+    }
+  }, [tierGroups])
+
+  return slot
+}
+
+type DocsPartnerFlipState = 'idle' | 'out' | 'in'
+
+function useFlippingDocsPartnerSlot(
+  activeSlot: DocsPartnerScrollSlot | undefined,
+) {
+  const [displayedSlot, setDisplayedSlot] = React.useState(activeSlot)
+  const [flipState, setFlipState] = React.useState<DocsPartnerFlipState>('idle')
+  const displayedSlotRef = React.useRef(displayedSlot)
+
+  React.useEffect(() => {
+    displayedSlotRef.current = displayedSlot
+  }, [displayedSlot])
+
+  React.useEffect(() => {
+    const currentDisplayedSlot = displayedSlotRef.current
+
+    if (areDocsPartnerSlotsEqual(currentDisplayedSlot, activeSlot)) {
+      return
+    }
+
+    if (!activeSlot) {
+      setDisplayedSlot(undefined)
+      setFlipState('idle')
+      return
+    }
+
+    const prefersReducedMotion = window.matchMedia(
+      '(prefers-reduced-motion: reduce)',
+    ).matches
+
+    if (!currentDisplayedSlot || prefersReducedMotion) {
+      setDisplayedSlot(activeSlot)
+      setFlipState('idle')
+      return
+    }
+
+    setFlipState('out')
+    const timeout = window.setTimeout(() => {
+      setDisplayedSlot(activeSlot)
+      setFlipState('in')
+    }, 120)
+
+    return () => {
+      window.clearTimeout(timeout)
+    }
+  }, [activeSlot])
+
+  React.useEffect(() => {
+    if (
+      flipState !== 'in' ||
+      !areDocsPartnerSlotsEqual(displayedSlot, activeSlot)
+    ) {
+      return
+    }
+
+    const timeout = window.setTimeout(() => {
+      setFlipState('idle')
+    }, 160)
+
+    return () => {
+      window.clearTimeout(timeout)
+    }
+  }, [activeSlot, displayedSlot, flipState])
+
+  return { displayedSlot, flipState }
+}
+
+function getDocsPartnerScrollSlot(
+  tierGroups: Array<DocsPartnerTierGroup>,
+  progress: number,
+): DocsPartnerScrollSlot | undefined {
+  const availableGroups = partnerTiers
+    .map((tier) => tierGroups.find((group) => group.tier === tier))
+    .filter((group): group is DocsPartnerTierGroup => {
+      return Boolean(group && group.partners.length > 0)
+    })
+
+  if (!availableGroups.length) {
+    return undefined
+  }
+
+  const totalWeight = availableGroups.reduce(
+    (total, group) => total + docsPartnerTierWeights[group.tier],
+    0,
+  )
+  const normalizedProgress = clampProgress(progress)
+  let progressStart = 0
+  let slotIndexOffset = 0
+
+  for (const [groupIndex, group] of availableGroups.entries()) {
+    const tierShare = docsPartnerTierWeights[group.tier] / totalWeight
+    const progressEnd = progressStart + tierShare
+    const isLastGroup = groupIndex === availableGroups.length - 1
+
+    if (normalizedProgress < progressEnd || isLastGroup) {
+      const localProgress = clampProgress(
+        (normalizedProgress - progressStart) / tierShare,
+      )
+      const partnerIndex = Math.min(
+        group.partners.length - 1,
+        Math.floor(localProgress * group.partners.length),
+      )
+
+      return {
+        partner: group.partners[partnerIndex],
+        slotIndex: slotIndexOffset + partnerIndex,
+      }
+    }
+
+    progressStart = progressEnd
+    slotIndexOffset += group.partners.length
+  }
+
+  return undefined
+}
+
+function getPageScrollProgress() {
+  const documentElement = document.documentElement
+  const body = document.body
+  const totalHeight = Math.max(
+    documentElement.scrollHeight,
+    body?.scrollHeight ?? 0,
+  )
+  const viewportHeight = window.innerHeight || documentElement.clientHeight
+  // scrollY tops out at totalHeight - viewportHeight; using that range keeps
+  // the final partner reachable when the viewport bottom hits the page bottom.
+  const scrollableHeight = Math.max(0, totalHeight - viewportHeight)
+
+  if (scrollableHeight === 0) {
+    return 0
+  }
+
+  const scrollTop = Math.min(
+    Math.max(window.scrollY || documentElement.scrollTop, 0),
+    scrollableHeight,
+  )
+
+  return scrollTop / scrollableHeight
+}
+
+function clampProgress(value: number) {
+  if (!Number.isFinite(value)) {
+    return 0
+  }
+
+  return Math.min(Math.max(value, 0), 1)
+}
+
+function areDocsPartnerSlotsEqual(
+  left: DocsPartnerScrollSlot | undefined,
+  right: DocsPartnerScrollSlot | undefined,
+) {
+  return (
+    left?.partner.id === right?.partner.id &&
+    left?.slotIndex === right?.slotIndex
+  )
+}
+
+function getCompactPartnerImageConfig(
+  image: Parameters<typeof PartnerImage>[0]['config'],
+): Parameters<typeof PartnerImage>[0]['config'] {
+  if (!image.scale) {
+    return image
+  }
+
+  if ('light' in image) {
+    return {
+      light: image.light,
+      dark: image.dark,
+    }
+  }
+
+  return {
+    src: image.src,
+  }
+}
+
+// Helper to get text color class from framework badge
+const _getFrameworkTextColor = (frameworkValue: string | undefined) => {
+  if (!frameworkValue) return 'text-gray-500'
+  const framework = frameworkOptions.find((f) => f.value === frameworkValue)
+
+  return framework?.fontColor ?? 'text-gray-500'
+}
+
+// Create context for width toggle state
+export const WidthToggleContext = React.createContext<{
+  isFullWidth: boolean
+  setIsFullWidth: (isFullWidth: boolean) => void
+} | null>(null)
+
+export const useWidthToggle = () => {
+  const context = React.useContext(WidthToggleContext)
+  if (!context) {
+    throw new Error('useWidthToggle must be used within a WidthToggleProvider')
+  }
+  return context
+}
+
+// Create context for doc navigation (prev/next)
+type DocNavItem = { label: React.ReactNode; to: string }
+const DocNavigationContext = React.createContext<{
+  libraryId: LibraryId
+  version: string
+  prevItem?: DocNavItem
+  nextItem?: DocNavItem
+  colorFrom: string
+  colorTo: string
+  textColor: string
+} | null>(null)
+
+type FrameworkDocsLinkTarget = {
+  kind: 'docs' | 'examples'
+  framework: string
+  splat: string
+}
+
+function getFrameworkDocsLinkTarget(
+  to: string,
+): FrameworkDocsLinkTarget | undefined {
+  const match = /^framework\/([^/]+)\/(.+)$/.exec(to)
+
+  if (!match) {
+    return undefined
+  }
+
+  const framework = match[1]
+  const splat = match[2]
+
+  if (!framework || !splat) {
+    return undefined
+  }
+
+  const examplesPrefix = 'examples/'
+
+  if (splat.startsWith(examplesPrefix)) {
+    return {
+      kind: 'examples',
+      framework,
+      splat: splat.slice(examplesPrefix.length),
+    }
+  }
+
+  return {
+    kind: 'docs',
+    framework,
+    splat,
+  }
+}
+
+export const useDocNavigation = () => {
+  return React.useContext(DocNavigationContext)
+}
+
+export function DocNavigation() {
+  const context = useDocNavigation()
+  if (!context) return null
+
+  const {
+    libraryId,
+    version,
+    prevItem,
+    nextItem,
+    colorFrom,
+    colorTo,
+    textColor,
+  } = context
+
+  if (!prevItem && !nextItem) return null
+
+  return (
+    <div className="sticky flex items-stretch bottom-2 z-10 right-0 text-[10px] sm:text-xs md:text-sm print:hidden">
+      <div className="flex-1 flex justify-start">
+        {prevItem ? (
+          <DocNavigationCard
+            direction="previous"
+            item={prevItem}
+            libraryId={libraryId}
+            version={version}
+          />
+        ) : null}
+      </div>
+      <div className="flex-1 flex justify-end">
+        {nextItem ? (
+          <DocNavigationCard
+            colorFrom={colorFrom}
+            colorTo={colorTo}
+            direction="next"
+            item={nextItem}
+            libraryId={libraryId}
+            textColor={textColor}
+            version={version}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+function DocNavigationCard({
+  colorFrom,
+  colorTo,
+  direction,
+  item,
+  libraryId,
+  textColor,
+  version,
+}: {
+  colorFrom?: string
+  colorTo?: string
+  direction: 'previous' | 'next'
+  item: DocNavItem
+  libraryId: LibraryId
+  textColor?: string
+  version: string
+}) {
+  const frameworkDocsTarget = getFrameworkDocsLinkTarget(item.to)
+  const className = 'py-1 px-2 sm:py-2 sm:px-3 flex items-center gap-1 sm:gap-2'
+  const children =
+    direction === 'previous' ? (
+      <>
+        <ChevronLeft className="w-3 h-3 sm:w-4 sm:h-4" />
+        <div className="flex flex-col">
+          <span className="hidden sm:block text-[10px] uppercase tracking-wider opacity-60 mb-0.5">
+            Previous
+          </span>
+          <span className="font-bold">{item.label}</span>
+        </div>
+      </>
+    ) : (
+      <>
+        <div className="flex flex-col items-end">
+          <span className="hidden sm:block text-[10px] uppercase tracking-wider opacity-60 mb-0.5">
+            Next
+          </span>
+          <span
+            className={`font-bold text-right bg-linear-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
+          >
+            {item.label}
+          </span>
+        </div>
+        <ChevronRight className={twMerge('w-3 h-3 sm:w-4 sm:h-4', textColor)} />
+      </>
+    )
+
+  if (frameworkDocsTarget) {
+    if (frameworkDocsTarget.kind === 'examples') {
+      return (
+        <Link
+          to="/$libraryId/$version/docs/framework/$framework/examples/$"
+          params={{
+            libraryId,
+            version,
+            framework: frameworkDocsTarget.framework,
+            _splat: frameworkDocsTarget.splat,
+          }}
+        >
+          <Card className={className}>{children}</Card>
+        </Link>
+      )
+    }
+
+    return (
+      <Link
+        to="/$libraryId/$version/docs/framework/$framework/$"
+        params={{
+          libraryId,
+          version,
+          framework: frameworkDocsTarget.framework,
+          _splat: frameworkDocsTarget.splat,
+        }}
+      >
+        <Card className={className}>{children}</Card>
+      </Link>
+    )
+  }
+
+  return (
+    <Card
+      as={Link}
+      from="/$libraryId/$version/docs"
+      to={item.to}
+      params={{ libraryId, version } as never}
+      className={className}
+    >
+      {children}
+    </Card>
+  )
+}
+
+const useMenuConfig = ({
+  config,
+  repo,
+  frameworks,
+  libraryId,
+}: {
+  config: ConfigSchema
+  repo: string
+  frameworks: Framework[]
+  libraryId: string
+}): MenuItem[] => {
+  const currentFramework = useCurrentFramework(frameworks)
+
+  const localMenu: MenuItem = {
+    label: 'Menu',
+    children: [
+      {
+        label: 'Home',
+        to: '..',
+      },
+      {
+        label: 'Blog',
+        to: '/$libraryId/$version/docs/blog',
+      },
+      ...(frameworks.length > 1
+        ? [
+            {
+              label: 'Frameworks',
+              to: './framework',
+            },
+          ]
+        : []),
+      ...(libraryId === 'intent'
+        ? [
+            {
+              label: 'Skills Registry',
+              to: '/intent/registry',
+            },
+          ]
+        : []),
+      {
+        label: 'Contributors',
+        to: '/$libraryId/$version/docs/contributors',
+      },
+      {
+        label: 'NPM Stats',
+        to: '/$libraryId/$version/docs/npm-stats',
+      },
+      ...(config.sections.find((d) => d.label === 'Community Resources')
+        ? [
+            {
+              label: 'Community Resources',
+              to: '/$libraryId/$version/docs/community-resources',
+            },
+          ]
+        : []),
+      {
+        label: (
+          <div className="flex items-center gap-2">
+            GitHub <GithubIcon className="opacity-20" />
+          </div>
+        ),
+        to: `https://github.com/${repo}`,
+      },
+      {
+        label: (
+          <div className="flex items-center gap-2">
+            Discord <DiscordIcon className="text-lg opacity-20" />
+          </div>
+        ),
+        to: 'https://tlinz.com/discord',
+      },
+    ],
+  }
+
+  return [
+    localMenu,
+    // Merge the two menus together based on their group labels
+    ...config.sections.map((section): MenuItem | undefined => {
+      const frameworkDocs = section.frameworks?.find(
+        (f) => f.label === currentFramework.framework,
+      )
+      const frameworkItems = frameworkDocs?.children ?? []
+
+      const children = [
+        ...section.children.map((d) => ({ ...d, badge: 'core' })),
+        ...frameworkItems.map((d) => ({
+          ...d,
+          badge: currentFramework.framework,
+        })),
+      ]
+
+      if (children.length === 0) {
+        return undefined
+      }
+
+      return {
+        label: section.label,
+        tab: section.tab,
+        children,
+        collapsible: section.collapsible ?? false,
+        defaultCollapsed: section.defaultCollapsed ?? false,
+      }
+    }),
+  ].filter((item) => item !== undefined)
+}
+
+type LibraryLayoutProps = {
+  libraryId: LibraryId
+  name: string
+  version: string
+  colorFrom: string
+  colorTo: string
+  textColor: string
+  config: ConfigSchema
+  frameworks: Framework[]
+  versions: string[]
+  repo: string
+  children: React.ReactNode
+  isLandingPage?: boolean
+}
+
+export function LibraryLayout({
+  libraryId,
+  colorFrom,
+  colorTo,
+  textColor,
+  config,
+  frameworks,
+  repo,
+  children,
+  isLandingPage = false,
+}: LibraryLayoutProps) {
+  const { version } = useParams({
+    strict: false,
+  }) as { version: string }
+  const { _splat } = useParams({ strict: false })
+  const menuConfig = useMenuConfig({ config, frameworks, repo, libraryId })
+
+  const matches = useMatches()
+  const lastMatch = last(matches)
+
+  const isExample = matches.some((d) => d.pathname.includes('/examples/'))
+
+  const isNpmStats = matches.some((d) => d.pathname.includes('/docs/npm-stats'))
+
+  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false)
+  const mobileMenuDialogRef = React.useRef<HTMLDivElement>(null)
+  const mobileMenuToggleId = 'docs-mobile-menu-toggle'
+  const closeMobileMenu = React.useCallback(() => {
+    setMobileMenuOpen(false)
+  }, [])
+
+  const docsMatch = matches.find((d) => d.pathname.includes('/docs'))
+  const docsPathname = docsMatch?.pathname ?? ''
+
+  const relativePathname = lastMatch.pathname.replace(docsPathname + '/', '')
+
+  React.useEffect(() => {
+    closeMobileMenu()
+  }, [closeMobileMenu, lastMatch.pathname])
+
+  React.useEffect(() => {
+    if (!mobileMenuOpen) return
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeMobileMenu()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [closeMobileMenu, mobileMenuOpen])
+
+  const tabbedMenuConfig = React.useMemo(() => {
+    return getTabbedMenuConfig(menuConfig)
+  }, [menuConfig])
+
+  const activeTabId = React.useMemo(() => {
+    return getActiveDocsNavTabId({
+      isExample,
+      menuConfig,
+      pathname: lastMatch.pathname,
+      relativePathname,
+    })
+  }, [isExample, lastMatch.pathname, menuConfig, relativePathname])
+
+  const visibleMenuConfig = React.useMemo(() => {
+    return (
+      tabbedMenuConfig.find((tab) => tab.id === activeTabId)?.groups ??
+      menuConfig
+    )
+  }, [activeTabId, menuConfig, tabbedMenuConfig])
+
+  const flatMenu = React.useMemo(
+    () => visibleMenuConfig.flatMap((d) => d.children),
+    [visibleMenuConfig],
+  )
+
+  // Filter out external links for prev/next navigation
+  const internalFlatMenu = React.useMemo(
+    () => flatMenu.filter((d) => !d.to.startsWith('http')),
+    [flatMenu],
+  )
+
+  const index = internalFlatMenu.findIndex((d) => d?.to === relativePathname)
+  const prevItem = internalFlatMenu[index - 1]
+  const nextItem = internalFlatMenu[index + 1]
+
+  const [isFullWidth, setIsFullWidth] = useLocalStorage('docsFullWidth', false)
+
+  const activePartners = React.useMemo(
+    () => partners.filter((d) => d.status === 'active'),
+    [],
+  )
+  const docsPartnerOrderContext = usePartnerPlacementContext({
+    orderStrategy: 'tier-rotated',
+    surface: 'docs_rail',
+  })
+  const shouldShowDocsPartnerSlot = useMediaQuery('(max-width: 767.98px)')
+  const isDesktopViewport = useMediaQuery('(min-width: 768px)')
+
+  const groupInitialOpenState = React.useMemo(() => {
+    return visibleMenuConfig.reduce<Record<string, boolean>>(
+      (acc, group, index) => {
+        const isChildActive = group.children.some(
+          (child) => child.to === _splat,
+        )
+        const key = `${index}:${String(group.label)}`
+
+        acc[key] = isChildActive
+          ? true
+          : typeof group.defaultCollapsed !== 'undefined'
+            ? !group.defaultCollapsed
+            : false
+
+        return acc
+      },
+      {},
+    )
+  }, [visibleMenuConfig, _splat])
+
+  const [openGroups, setOpenGroups] = React.useState(groupInitialOpenState)
+
+  React.useEffect(() => {
+    setOpenGroups((prev) => {
+      let hasChanged = false
+      const next = { ...prev }
+
+      Object.entries(groupInitialOpenState).forEach(([key, isOpen]) => {
+        if (!(key in next)) {
+          next[key] = isOpen
+          hasChanged = true
+          return
+        }
+
+        if (isOpen && !next[key]) {
+          next[key] = true
+          hasChanged = true
+        }
+      })
+
+      return hasChanged ? next : prev
+    })
+  }, [groupInitialOpenState])
+
+  const libraryHomePath = `/${libraryId}/${version}`
+
+  const menuItems = visibleMenuConfig.map((group, i) => {
+    const groupKey = `${i}:${String(group.label)}`
+
+    const groupContent = (
+      <>
+        {group.collapsible ? (
+          <summary
+            className="text-[.8em] font-bold leading-4 px-2 ts-sidebar-label"
+            onClick={(event) => {
+              event.preventDefault()
+              setOpenGroups((prev) => ({
+                ...prev,
+                [groupKey]: !(prev[groupKey] ?? false),
+              }))
+            }}
+          >
+            {group.label}
+          </summary>
+        ) : (
+          <div className="text-[.8em] font-bold leading-4 px-2 ts-sidebar-label">
+            {group.label}
+          </div>
+        )}
+        <div className="h-2" />
+        <ul className="text-[.85em] leading-snug list-none">
+          {group?.children?.map((child, i) => {
+            const linkClasses = `flex gap-2 items-center justify-between group px-2 py-1.5 rounded-lg hover:bg-gray-500/10 opacity-60 hover:opacity-100`
+            const linkParams =
+              !child.to.startsWith('/') || child.to.includes('/$libraryId')
+                ? ({ libraryId, version } as never)
+                : undefined
+            const isHomeLink = child.to === '..'
+            const frameworkDocsTarget = getFrameworkDocsLinkTarget(child.to)
+
+            const recency = getDocRecency(child.addedAt, child.updatedAt)
+            const recencyPill = recency ? (
+              <DocRecencyPill
+                recency={recency}
+                date={recency === 'new' ? child.addedAt : child.updatedAt}
+              />
+            ) : null
+
+            const renderLinkContent = (isActive: boolean) => (
+              <div className={twMerge(linkClasses, isActive && 'opacity-100')}>
+                <div
+                  className={twMerge(
+                    'w-full',
+                    isActive
+                      ? `font-bold text-transparent bg-clip-text bg-linear-to-r ${colorFrom} ${colorTo}`
+                      : '',
+                  )}
+                >
+                  {child.label}
+                </div>
+                {recencyPill}
+              </div>
+            )
+
+            return (
+              <li key={i}>
+                {child.to.startsWith('http') ? (
+                  <a
+                    href={child.to}
+                    className={linkClasses}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <span className="w-full">{child.label}</span>
+                    {recencyPill}
+                  </a>
+                ) : isHomeLink ? (
+                  <Link
+                    to={libraryHomePath}
+                    onClick={closeMobileMenu}
+                    className="relative"
+                  >
+                    <div
+                      className={twMerge(
+                        linkClasses,
+                        !docsMatch && 'opacity-100',
+                      )}
+                    >
+                      <div
+                        className={twMerge(
+                          'w-full',
+                          !docsMatch
+                            ? `font-bold text-transparent bg-clip-text bg-linear-to-r ${colorFrom} ${colorTo}`
+                            : '',
+                        )}
+                      >
+                        {child.label}
+                      </div>
+                    </div>
+                  </Link>
+                ) : frameworkDocsTarget?.kind === 'examples' ? (
+                  <Link
+                    to="/$libraryId/$version/docs/framework/$framework/examples/$"
+                    params={{
+                      libraryId,
+                      version,
+                      framework: frameworkDocsTarget.framework,
+                      _splat: frameworkDocsTarget.splat,
+                    }}
+                    onClick={closeMobileMenu}
+                    preload="intent"
+                    activeOptions={{
+                      exact: true,
+                      includeHash: false,
+                      includeSearch: false,
+                    }}
+                    className="relative"
+                  >
+                    {(props) => renderLinkContent(props.isActive)}
+                  </Link>
+                ) : frameworkDocsTarget ? (
+                  <Link
+                    to="/$libraryId/$version/docs/framework/$framework/$"
+                    params={{
+                      libraryId,
+                      version,
+                      framework: frameworkDocsTarget.framework,
+                      _splat: frameworkDocsTarget.splat,
+                    }}
+                    onClick={closeMobileMenu}
+                    preload="intent"
+                    activeOptions={{
+                      exact: true,
+                      includeHash: false,
+                      includeSearch: false,
+                    }}
+                    className="relative"
+                  >
+                    {(props) => renderLinkContent(props.isActive)}
+                  </Link>
+                ) : (
+                  <Link
+                    from="/$libraryId/$version/docs"
+                    to={child.to}
+                    params={linkParams}
+                    onClick={closeMobileMenu}
+                    preload="intent"
+                    activeOptions={{
+                      exact: true,
+                      includeHash: false,
+                      includeSearch: false,
+                    }}
+                    className="relative"
+                  >
+                    {(props) => renderLinkContent(props.isActive)}
+                  </Link>
+                )}
+              </li>
+            )
+          })}
+        </ul>
+      </>
+    )
+
+    return group.collapsible ? (
+      <details
+        key={`group-${i}`}
+        className="[&>summary]:before:mr-1 [&>summary]:marker:text-[0.8em] [&>summary]:marker:leading-4 relative select-none"
+        open={openGroups[groupKey] ?? false}
+      >
+        {groupContent}
+      </details>
+    ) : (
+      <div
+        key={`group-${i}`}
+        className="[&>summary]:before:mr-1 [&>summary]:marker:text-[0.8em] [&>summary]:marker:leading-4 relative select-none"
+      >
+        {groupContent}
+      </div>
+    )
+  })
+
+  const smallMenu = (
+    <div className="min-[900px]:hidden">
+      <input
+        id={mobileMenuToggleId}
+        type="checkbox"
+        aria-label="Documentation menu"
+        aria-controls="docs-mobile-menu"
+        checked={mobileMenuOpen}
+        data-docs-mobile-menu-toggle
+        className="sr-only"
+        onChange={(event) => {
+          setMobileMenuOpen(event.currentTarget.checked)
+        }}
+      />
+      <label
+        htmlFor={mobileMenuToggleId}
+        aria-label="Close documentation menu"
+        data-docs-mobile-backdrop
+        className="fixed inset-x-0 bottom-0 top-[var(--navbar-height)] z-40 bg-black/30 backdrop-blur-sm"
+      />
+      <div
+        ref={mobileMenuDialogRef}
+        id="docs-mobile-menu"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Documentation navigation"
+        data-docs-mobile-menu
+        tabIndex={-1}
+        className="fixed inset-x-0 top-[var(--navbar-height)] z-50 m-0 w-full max-w-none p-0 min-[900px]:hidden
+        max-h-[calc(100dvh-var(--navbar-height))] overflow-y-auto
+        bg-white dark:bg-black/95 backdrop-blur-lg border-b border-gray-500/20 shadow-xl"
+      >
+        <div className="flex items-center justify-between py-2 px-4 border-b border-gray-500/20">
+          <span className="font-bold">Docs</span>
+          <button
+            type="button"
+            aria-label="Close menu"
+            aria-controls="docs-mobile-menu"
+            className="p-1 rounded-md hover:bg-gray-500/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current cursor-pointer"
+            onClick={closeMobileMenu}
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+        <div className="flex flex-col gap-4 p-4 text-lg">
+          <div className="flex flex-col gap-1">
+            <FrameworkSelect libraryId={libraryId} />
+            <VersionSelect libraryId={libraryId} />
+          </div>
+          <SearchButton />
+          {menuItems}
+        </div>
+      </div>
+    </div>
+  )
+
+  // State and timer for auto-hide behavior (similar to Navbar)
+  const [showLargeMenu, setShowLargeMenu] = React.useState(false)
+  const leaveTimer = React.useRef<NodeJS.Timeout | undefined>(undefined)
+  const largeMenuTriggerRef = React.useRef<HTMLButtonElement>(null)
+  const largeMenuClickOutsideRefs = React.useMemo(
+    () => [largeMenuTriggerRef],
+    [],
+  )
+
+  const openLargeMenu = React.useCallback(() => {
+    clearTimeout(leaveTimer.current)
+    setShowLargeMenu(true)
+  }, [])
+
+  // Close menu when clicking outside (only on sm-xl screens where it's an overlay)
+  const expandedMenuRef = useClickOutside<HTMLDivElement>({
+    enabled:
+      showLargeMenu &&
+      typeof window !== 'undefined' &&
+      window.innerWidth < 1280,
+    onClickOutside: () => setShowLargeMenu(false),
+    additionalRefs: largeMenuClickOutsideRefs,
+  })
+
+  const largeMenu = (
+    <>
+      {/* Expanded menu - always visible on xl+, toggleable overlay on md-xl */}
+      <div
+        id="docs-desktop-menu"
+        data-docs-desktop-menu
+        ref={expandedMenuRef}
+        className={twMerge(
+          'max-w-[250px] xl:max-w-[300px] 2xl:max-w-[400px]',
+          'flex-col overflow-hidden',
+          'h-[calc(100dvh-var(--navbar-height)-var(--docs-tabs-height))] top-[calc(var(--navbar-height)+var(--docs-tabs-height))]',
+          'border-r border-gray-500/20',
+          'transition-all duration-300',
+          // Hidden on smallest screens, flex once the main navbar switches to desktop.
+          'hidden min-[900px]:flex',
+          // On narrow desktop to xl: fixed overlay that slides in from left-0 beneath the docs tab bar.
+          'min-[900px]:fixed min-[900px]:left-0 min-[900px]:z-40 min-[900px]:bg-white min-[900px]:dark:bg-black/95 min-[900px]:backdrop-blur-lg min-[900px]:shadow-xl',
+          // On xl+: sticky positioning sitting inline below tabs, no overlay styling
+          'xl:sticky xl:z-20 xl:bg-transparent xl:dark:bg-transparent xl:backdrop-blur-none xl:shadow-none',
+          // Slide animation for md-xl screens (off-screen by default, slides in when shown)
+          // On xl+: always visible (no translate)
+          !showLargeMenu && 'md:-translate-x-full xl:translate-x-0',
+          showLargeMenu && 'md:translate-x-0',
+        )}
+        onPointerEnter={(e) => {
+          if (e.pointerType === 'touch') return
+          if (window.innerWidth < 1280) {
+            clearTimeout(leaveTimer.current)
+          }
+        }}
+        onPointerLeave={(e) => {
+          if (e.pointerType === 'touch') return
+          // Keep sidebar open while a dropdown opened from inside it is active (e.g. FrameworkSelect, VersionSelect)
+          if (expandedMenuRef.current?.querySelector('[data-state="open"]'))
+            return
+          if (window.innerWidth < 1280) {
+            leaveTimer.current = setTimeout(() => {
+              setShowLargeMenu(false)
+            }, 300)
+          }
+        }}
+      >
+        <div className="flex-1 flex flex-col overflow-y-auto min-w-[230px]">
+          <div className="flex flex-col gap-1 p-4">
+            <FrameworkSelect libraryId={libraryId} />
+            <VersionSelect libraryId={libraryId} />
+          </div>
+          <div className="flex-1 flex flex-col gap-4 text-base px-4 pt-0 pb-4">
+            {menuItems}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+
+  const docsTabs = (
+    <div className="sticky top-[var(--navbar-height)] z-30 border-b border-gray-500/20 bg-white/90 dark:bg-black/80 backdrop-blur-lg">
+      <div className="flex items-stretch">
+        <button
+          type="button"
+          aria-label="Documentation menu"
+          aria-expanded={mobileMenuOpen ? true : undefined}
+          aria-controls="docs-mobile-menu"
+          onClick={() => setMobileMenuOpen((prev) => !prev)}
+          data-docs-mobile-trigger
+          className="min-[900px]:hidden flex items-center gap-1.5 shrink-0 px-3 border-r border-gray-500/20 text-slate-600 dark:text-slate-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current"
+        >
+          <Menu className="w-4 h-4" data-docs-mobile-closed-icon />
+          <X className="w-4 h-4" data-docs-mobile-open-icon />
+          <span className="text-xs font-medium max-[479.98px]:sr-only">
+            Menu
+          </span>
+        </button>
+        <button
+          ref={largeMenuTriggerRef}
+          type="button"
+          aria-label="Open documentation menu"
+          aria-expanded={showLargeMenu}
+          aria-controls="docs-desktop-menu"
+          onPointerEnter={(event) => {
+            if (event.pointerType === 'touch') return
+            openLargeMenu()
+          }}
+          onPointerDown={openLargeMenu}
+          onMouseEnter={openLargeMenu}
+          onFocus={openLargeMenu}
+          onClick={openLargeMenu}
+          data-docs-menu-trigger
+          className="hidden min-[900px]:flex xl:hidden items-center gap-1 shrink-0 px-2 border-r border-gray-500/20 text-xs font-medium text-slate-600 dark:text-slate-300 min-[1120px]:gap-1.5 min-[1120px]:px-3 min-[1120px]:text-[13px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current"
+        >
+          <Menu className="w-4 h-4" />
+          <span className="text-xs font-medium">Menu</span>
+        </button>
+        <div className="relative flex min-w-0 flex-1 items-stretch">
+          <nav
+            aria-label="Documentation sections"
+            className="flex min-w-0 flex-1 items-stretch gap-3 overflow-x-auto px-3 text-xs min-[1120px]:gap-6 min-[1120px]:px-6 min-[1120px]:text-[13px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          >
+            {tabbedMenuConfig.map((tab) => {
+              const target = tab.firstItem
+              const isActive = tab.id === activeTabId
+
+              if (!target) {
+                return null
+              }
+
+              const linkParams =
+                !target.to.startsWith('/') || target.to.includes('/$libraryId')
+                  ? ({ libraryId, version } as never)
+                  : undefined
+
+              return (
+                <Link
+                  key={tab.id}
+                  from="/$libraryId/$version/docs"
+                  to={target.to}
+                  params={linkParams}
+                  activeOptions={{
+                    exact: true,
+                    includeHash: false,
+                    includeSearch: false,
+                  }}
+                  aria-current={isActive ? 'page' : undefined}
+                  className={twMerge(
+                    'relative whitespace-nowrap py-3 font-semibold transition-colors',
+                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current rounded-sm',
+                    isActive
+                      ? `text-transparent bg-clip-text bg-linear-to-r ${colorFrom} ${colorTo}`
+                      : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100',
+                  )}
+                >
+                  {tab.label}
+                  {isActive ? (
+                    <span
+                      aria-hidden="true"
+                      className={twMerge(
+                        'absolute left-0 right-0 -bottom-px h-[3px] rounded-t-full bg-linear-to-r',
+                        colorFrom,
+                        colorTo,
+                      )}
+                    />
+                  ) : null}
+                </Link>
+              )
+            })}
+          </nav>
+          <div
+            aria-hidden="true"
+            data-docs-tabs-scroll-fade
+            className="pointer-events-none absolute inset-y-0 right-0 z-10 w-8 bg-linear-to-r from-white/0 to-white/95 dark:from-black/0 dark:to-black/90 min-[640px]:w-10"
+          />
+        </div>
+        {shouldShowDocsPartnerSlot && activePartners.length ? (
+          <DocsPartnerSlot
+            orderPlacementContext={docsPartnerOrderContext}
+            partners={activePartners}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+
+  return (
+    <WidthToggleContext.Provider value={{ isFullWidth, setIsFullWidth }}>
+      <DocNavigationContext.Provider
+        value={{
+          libraryId,
+          version,
+          prevItem,
+          nextItem,
+          colorFrom,
+          colorTo,
+          textColor,
+        }}
+      >
+        <div
+          data-docs-layout
+          data-docs-menu-open={showLargeMenu ? 'true' : undefined}
+          className={`
+           md:min-h-[calc(100dvh-var(--navbar-height))]
+           flex flex-col
+          w-full transition-all duration-300
+          [overflow-x:clip]`}
+        >
+          {smallMenu}
+          {docsTabs}
+          <div className="flex flex-col md:flex-row flex-1 min-h-0">
+            {largeMenu}
+            <div
+              className={twMerge(
+                'flex flex-col max-w-full min-w-0 flex-1 min-h-0 relative',
+              )}
+            >
+              <div
+                className={twMerge(
+                  `max-w-full min-w-0 flex flex-col justify-center w-full`,
+
+                  !isLandingPage && 'px-4 md:px-8',
+
+                  !isLandingPage &&
+                    !isExample &&
+                    !isNpmStats &&
+                    !isFullWidth &&
+                    'mx-auto w-[900px]',
+                )}
+              >
+                {children}
+              </div>
+              {!isLandingPage && (
+                <div className="pt-8 md:pt-12">
+                  <Footer />
+                </div>
+              )}
+            </div>
+            {!isLandingPage && (
+              <RightRail
+                breakpoint="md"
+                className="md:w-[220px]"
+                stickyOffset="docs-tabs"
+              >
+                <PartnersRail
+                  analyticsPlacement="docs_rail"
+                  partners={activePartners}
+                />
+                <div className="hidden md:block border border-gray-500/20 rounded-l-lg overflow-hidden w-full">
+                  <RecentPostsWidget enabled={isDesktopViewport} />
+                </div>
+              </RightRail>
+            )}
+          </div>
+        </div>
+      </DocNavigationContext.Provider>
+    </WidthToggleContext.Provider>
+  )
+}
diff --git a/src/components/LibraryPageContainer.tsx b/src/components/LibraryPageContainer.tsx
deleted file mode 100644
index 57faf342c..000000000
--- a/src/components/LibraryPageContainer.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { ReactNode } from 'react'
-
-interface LibraryPageContainerProps {
-  children: ReactNode
-}
-
-export function LibraryPageContainer({ children }: LibraryPageContainerProps) {
-  return (
-    <div className="flex flex-col gap-20 md:gap-32 max-w-full pt-32">
-      {children}
-    </div>
-  )
-}
diff --git a/src/components/LibraryStatsSection.tsx b/src/components/LibraryStatsSection.tsx
index 3448fa076..a08cb375e 100644
--- a/src/components/LibraryStatsSection.tsx
+++ b/src/components/LibraryStatsSection.tsx
@@ -1,21 +1,75 @@
-import OpenSourceStats from '~/components/OpenSourceStats'
-import { AdGate } from '~/contexts/AdsContext'
-import { GamHeader } from '~/components/Gam'
+import { useQuery } from '@tanstack/react-query'
+import { Download, Star } from 'lucide-react'
+import type * as React from 'react'
 import type { Library } from '~/libraries'
+import { ossStatsQuery } from '~/queries/stats'
 
 interface LibraryStatsSectionProps {
   library: Library
 }
 
+function isValidMetric(value: number | undefined | null): value is number {
+  return (
+    value !== undefined && value !== null && value > 0 && Number.isFinite(value)
+  )
+}
+
+function LibraryPlainStat({
+  href,
+  icon,
+  label,
+  value,
+}: {
+  href: string
+  icon: React.ReactNode
+  label: string
+  value: number | undefined
+}) {
+  const hasValue = isValidMetric(value)
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className="group inline-flex items-baseline gap-2 text-left"
+      aria-label={`${hasValue ? value.toLocaleString() : '0'} ${label}`}
+    >
+      <span className="text-zinc-500 transition-colors group-hover:text-zinc-950 dark:text-zinc-500 dark:group-hover:text-white">
+        {icon}
+      </span>
+      <span
+        className="text-xl font-black text-zinc-950 transition-colors group-hover:text-zinc-700 dark:text-white dark:group-hover:text-zinc-200"
+        style={{ fontVariantNumeric: 'tabular-nums' }}
+      >
+        {hasValue ? value.toLocaleString() : '0'}
+      </span>
+      <span className="text-sm font-bold text-zinc-500 transition-colors group-hover:text-zinc-700 dark:text-zinc-400 dark:group-hover:text-zinc-200">
+        {label}
+      </span>
+    </a>
+  )
+}
+
 export function LibraryStatsSection({ library }: LibraryStatsSectionProps) {
+  const { data: stats } = useQuery(ossStatsQuery({ library }))
+
   return (
-    <>
-      <div className="w-fit mx-auto px-4">
-        <OpenSourceStats library={library} />
+    <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+      <div className="flex flex-col items-start gap-3 sm:flex-row sm:flex-wrap sm:gap-6">
+        <LibraryPlainStat
+          href="https://www.npmjs.com/org/tanstack"
+          icon={<Download size={18} aria-hidden="true" />}
+          label="NPM Downloads"
+          value={stats?.npm?.totalDownloads}
+        />
+        <LibraryPlainStat
+          href={`https://github.com/${library.repo}`}
+          icon={<Star size={18} aria-hidden="true" />}
+          label="GitHub Stars"
+          value={stats?.github?.starCount}
+        />
       </div>
-      <AdGate>
-        <GamHeader />
-      </AdGate>
-    </>
+    </div>
   )
 }
diff --git a/src/components/LibraryTestimonials.tsx b/src/components/LibraryTestimonials.tsx
index 2cd182260..dfb1c27a5 100644
--- a/src/components/LibraryTestimonials.tsx
+++ b/src/components/LibraryTestimonials.tsx
@@ -51,7 +51,7 @@ export function LibraryTestimonials({
 
 function TestimonialCard({ testimonial }: { testimonial: Testimonial }) {
   return (
-    <Card className="flex-shrink-0 w-72 md:w-80 p-5">
+    <Card className="shrink-0 w-72 md:w-80 p-5">
       <div className="flex items-start gap-1 mb-3">
         {[...Array(5)].map((_, j) => (
           <Star
diff --git a/src/components/LibraryWordmark.tsx b/src/components/LibraryWordmark.tsx
new file mode 100644
index 000000000..9b264be1c
--- /dev/null
+++ b/src/components/LibraryWordmark.tsx
@@ -0,0 +1,48 @@
+import { twMerge } from 'tailwind-merge'
+import type { LibrarySlim } from '~/libraries'
+
+type LibraryWordmarkProps = {
+  className?: string
+  colorProduct?: boolean
+  includeTanStack?: boolean
+  library: Pick<LibrarySlim, 'colorFrom' | 'colorTo' | 'name'>
+  productClassName?: string
+  tanStackClassName?: string
+}
+
+export function LibraryWordmark({
+  className,
+  colorProduct = true,
+  includeTanStack = true,
+  library,
+  productClassName,
+  tanStackClassName,
+}: LibraryWordmarkProps) {
+  const productName = library.name.replace(/^TanStack\s+/i, '')
+
+  return (
+    <span
+      className={twMerge(
+        'inline-flex flex-wrap items-baseline gap-x-[0.22em] gap-y-1 font-black uppercase leading-none [letter-spacing:-.05em]',
+        className,
+      )}
+    >
+      {includeTanStack ? (
+        <span className={twMerge('inline-block', tanStackClassName)}>
+          TanStack
+        </span>
+      ) : null}
+      <span
+        className={twMerge(
+          'inline-block pr-1',
+          colorProduct
+            ? `bg-linear-to-r bg-clip-text text-transparent ${library.colorFrom} ${library.colorTo}`
+            : '',
+          productClassName,
+        )}
+      >
+        {productName}
+      </span>
+    </span>
+  )
+}
diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
index d213ceaee..3bb29aba0 100644
--- a/src/components/LoginModal.tsx
+++ b/src/components/LoginModal.tsx
@@ -11,6 +11,36 @@ interface LoginModalProps {
 }
 
 export function LoginModal({ open, onOpenChange }: LoginModalProps) {
+  React.useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    function handleMessage(event: MessageEvent) {
+      if (
+        event.origin === window.location.origin &&
+        event.data &&
+        typeof event.data === 'object' &&
+        'type' in event.data &&
+        event.data.type === 'TANSTACK_AUTH_SUCCESS'
+      ) {
+        onOpenChange(false)
+        window.location.reload()
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [open, onOpenChange])
+
+  const openSocialPopup = (provider: 'github' | 'google') => {
+    const popup = authClient.signIn.socialPopup({ provider })
+
+    if (!popup) {
+      authClient.signIn.social({ provider })
+    }
+  }
+
   return (
     <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
       <DialogPrimitive.Portal>
@@ -27,18 +57,16 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 
           <div className="space-y-3">
             <button
-              onClick={() =>
-                authClient.signIn.socialPopup({ provider: 'github' })
-              }
+              type="button"
+              onClick={() => openSocialPopup('github')}
               className="w-full flex items-center justify-center gap-2 bg-gray-900 hover:bg-black text-white dark:bg-white dark:hover:bg-gray-100 dark:text-gray-900 font-medium py-2.5 px-4 rounded-lg transition-colors"
             >
               <GithubIcon className="w-5 h-5" />
               Continue with GitHub
             </button>
             <button
-              onClick={() =>
-                authClient.signIn.socialPopup({ provider: 'google' })
-              }
+              type="button"
+              onClick={() => openSocialPopup('google')}
               className="w-full flex items-center justify-center gap-2 bg-[#DB4437] hover:bg-[#c53929] text-white font-medium py-2.5 px-4 rounded-lg transition-colors"
             >
               <GoogleIcon className="w-5 h-5" />
diff --git a/src/components/MaintainerCard.tsx b/src/components/MaintainerCard.tsx
index 4d541e390..63941e823 100644
--- a/src/components/MaintainerCard.tsx
+++ b/src/components/MaintainerCard.tsx
@@ -6,6 +6,7 @@ import {
   getPersonsMaintainerOf,
 } from '~/libraries/maintainers'
 import { useState } from 'react'
+import { Link } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
 
 function RoleBadge({
@@ -42,7 +43,11 @@ function RoleBadge({
     )
   }
 
-  return <span className="text-gray-500 dark:text-gray-400">{role}</span>
+  return (
+    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-500 text-white">
+      {role}
+    </span>
+  )
 }
 
 function FrameworkChip({ framework }: { framework: Framework }) {
@@ -89,8 +94,9 @@ function LibraryBadge({ library }: { library: Library }) {
   const bgClass = `${library.bgStyle ?? 'bg-gray-500'}/40`
   if (library.to) {
     return (
-      <a
-        href={`${library.to}/latest/docs/contributors`}
+      <Link
+        to="/$libraryId/$version/docs/contributors"
+        params={{ libraryId: library.id, version: 'latest' }}
         className={twMerge(
           `inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold text-green-900 dark:text-green-200 capitalize hover:underline focus:outline-none focus:ring-2 focus:ring-blue-400 transition-colors`,
           bgClass,
@@ -101,7 +107,7 @@ function LibraryBadge({ library }: { library: Library }) {
         title={`View all contributors for ${library.name}`}
       >
         {library.name.replace('TanStack', '🌴')}
-      </a>
+      </Link>
     )
   }
   return (
@@ -142,6 +148,16 @@ const MaintainerSocialIcons: Record<
       <path d="M5.20238 1.4019C7.95375 3.43816 10.9136 7.56632 12 9.78164V15.6329C12 15.5084 11.9513 15.6491 11.8463 15.9523C11.2793 17.594 9.0645 24.0012 4.00012 18.8791C1.3335 16.1822 2.568 13.4854 7.422 12.6712C4.64512 13.1368 1.52325 12.3672 0.66675 9.34985C0.42 8.48185 0 3.13532 0 2.41322C0 -1.20394 3.21712 -0.066993 5.20238 1.4019ZM18.7976 1.4019C16.0462 3.43816 13.0864 7.56632 12 9.78164V15.6329C12 15.5084 12.0487 15.6491 12.1537 15.9523C12.7207 17.594 14.9355 24.0012 19.9999 18.8791C22.6665 16.1822 21.432 13.4854 16.578 12.6712C19.3549 13.1368 22.4768 12.3672 23.3333 9.34985C23.58 8.48185 24 3.13532 24 2.41322C24 -1.20394 20.7832 -0.066993 18.7976 1.4019Z" />
     </svg>
   ),
+  linkedIn: (
+    <svg
+      viewBox="0 0 24 24"
+      className="w-5 h-5"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+    </svg>
+  ),
   website: (
     <svg
       viewBox="0 0 24 24"
@@ -224,12 +240,14 @@ export function CompactMaintainerCard({
       aria-label={`View ${maintainer.name}'s GitHub profile`}
       className="group relative aspect-square block rounded-lg shadow-xs border border-gray-200 dark:border-gray-800 overflow-hidden"
       tabIndex={0}
-      style={{
-        backgroundImage: `url(${maintainer.avatar})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-      }}
     >
+      <img
+        alt={`Avatar of ${maintainer.name}`}
+        className="absolute inset-0 w-full h-full object-cover"
+        src={maintainer.avatar}
+        loading="lazy"
+        decoding="async"
+      />
       <div className="absolute inset-0 bg-linear-to-t from-black/70 via-black/20 to-transparent" />
       <div className="absolute inset-0 p-3 flex flex-col justify-end">
         <div className="text-white">
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 71ecc4b38..817ea5e86 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,837 +1,1515 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
-const LazyBrandContextMenu = React.lazy(() =>
-  import('./BrandContextMenu').then((m) => ({ default: m.BrandContextMenu })),
+const LazyAiDock = React.lazy(() =>
+  import('./SearchModal').then((m) => ({ default: m.AiDock })),
 )
+const LazyNavbarAuthControls = React.lazy(() =>
+  import('./NavbarAuthControls').then((m) => ({
+    default: m.NavbarAuthControls,
+  })),
+)
+import { NavbarCartButton } from './NavbarCartButton'
+import { Link, useLocation, useMatches } from '@tanstack/react-router'
 import {
-  Link,
-  useLocation,
-  useMatches,
-  useNavigate,
-} from '@tanstack/react-router'
-import { NetlifyImage } from './NetlifyImage'
-import {
+  BookOpen,
   Code,
-  Users,
-  Music,
+  ExternalLink,
+  Grid2X2,
+  Hammer,
+  Heart,
   HelpCircle,
-  BookOpen,
-  TrendingUp,
-  Shirt,
-  ShieldCheck,
+  Mail,
+  Menu,
+  Newspaper,
   Paintbrush,
-  Hammer,
+  ShieldCheck,
+  ShoppingBag,
+  Sparkles,
+  TrendingUp,
   User,
-  Menu,
+  Users,
   X,
-  Rss,
-  Grid2X2,
-  Sparkles,
 } from 'lucide-react'
 import { ThemeToggle } from './ThemeToggle'
-import { SearchButton } from './SearchButton'
-// const LazyFeedTicker = React.lazy(() =>
-//   import('./FeedTicker').then((m) => ({ default: m.FeedTicker })),
-// )
-import {
-  Authenticated,
-  Unauthenticated,
-  AuthLoading,
-} from '~/components/AuthComponents'
+import { AiDockButton, SearchButton } from './SearchButton'
+import { BrandContextMenu } from './BrandContextMenu'
+import { useSearchContext } from '~/contexts/SearchContext'
 import {
-  libraries,
-  findLibrary,
-  SIDEBAR_LIBRARY_IDS,
+  isPublicLibrary,
+  librariesByGroup,
+  librariesGroupNamesMap,
   type LibrarySlim,
+  type PublicLibrarySlim,
 } from '~/libraries'
-import { ADMIN_ACCESS_CAPABILITIES } from '~/db/types'
-import { useCapabilities } from '~/hooks/useCapabilities'
-import { useCurrentUser } from '~/hooks/useCurrentUser'
-import { useClickOutside } from '~/hooks/useClickOutside'
 import { GithubIcon } from '~/components/icons/GithubIcon'
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownTrigger,
+} from '~/components/Dropdown'
 import { DiscordIcon } from '~/components/icons/DiscordIcon'
 import { InstagramIcon } from '~/components/icons/InstagramIcon'
+import { OptimizedImage } from '~/components/OptimizedImage'
 import { BSkyIcon } from '~/components/icons/BSkyIcon'
 import { BrandXIcon } from '~/components/icons/BrandXIcon'
-const LazyAnnouncementBanner = React.lazy(() =>
-  import('~/components/AnnouncementBanner').then((m) => ({
-    default: m.AnnouncementBanner,
-  })),
-)
-const LazyAuthenticatedUserMenu = React.lazy(() =>
-  import('~/components/AuthenticatedUserMenu').then((m) => ({
-    default: m.AuthenticatedUserMenu,
-  })),
-)
-import { authClient } from '~/utils/auth.client'
-import { useToast } from '~/components/ToastProvider'
-
-import { Card } from '~/components/Card'
+import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '~/components/Collapsible'
+import { groupToSlug } from '~/components/stack/stack-categories'
+import { getProducts } from '~/utils/shop.functions'
+import { formatMoney, shopifyImageUrl } from '~/utils/shopify-format'
+import type { ProductListItem } from '~/utils/shopify-queries'
 
 type LogoProps = {
-  showMenu: boolean
-  setShowMenu: React.Dispatch<React.SetStateAction<boolean>>
-  menuButtonRef: React.RefObject<HTMLButtonElement | null>
-  title?: React.ComponentType<any> | null
+  title?: React.ComponentType | null
 }
 
-const LogoSection = ({
-  showMenu,
-  setShowMenu,
-  menuButtonRef,
-  title,
-}: LogoProps) => {
-  const pointerInsideButtonRef = React.useRef(false)
-  const toggleMenu = () => {
-    setShowMenu((prev) => !prev)
-  }
+const LogoSection = ({ title }: LogoProps) => {
   return (
-    <>
-      <button
-        aria-label="Open Menu"
-        className={twMerge(
-          'flex items-center justify-center',
-          'transition-all duration-300 h-8 px-2 py-1 lg:px-0',
-          // At lg: only visible when Title exists (flyout mode)
-          // Below lg: always visible
-          title
-            ? 'lg:w-9 lg:opacity-100 lg:translate-x-0'
-            : 'lg:w-0 lg:opacity-0 lg:-translate-x-full',
-        )}
-        ref={menuButtonRef}
-        onClick={toggleMenu}
-        onPointerEnter={(e) => {
-          // Enable hover to open flyout at md+ (but not touch)
-          if (window.innerWidth < 768 || e.pointerType === 'touch') return
-          if (pointerInsideButtonRef.current) return
-          pointerInsideButtonRef.current = true
-          setShowMenu(true)
-        }}
-        onPointerLeave={() => {
-          pointerInsideButtonRef.current = false
-        }}
-      >
-        {showMenu ? <X /> : <Menu />}
-      </button>
-      <Link
-        to="/"
-        className={twMerge(`inline-flex items-center gap-1.5 cursor-pointer`)}
-      >
-        <div className="w-[30px] inline-grid items-center grid-cols-1 grid-rows-1 [&>*]:transition-opacity [&>*]:duration-1000">
-          <NetlifyImage
-            src="/images/logos/logo-color-100.png"
-            alt=""
-            width={30}
-            className="row-start-1 col-start-1 w-full group-hover:opacity-0"
-          />
-          <img
-            src={'/images/logos/logo-black.svg'}
-            alt=""
-            className="row-start-1 col-start-1 w-full dark:opacity-0 opacity-0 group-hover:opacity-100"
-          />
-          <img
-            src={'/images/logos/logo-white.svg'}
-            alt=""
-            className="row-start-1 col-start-1 w-full light:opacity-0 dark:block opacity-0 group-hover:opacity-100"
-          />
-        </div>
-        <div>TanStack</div>
-      </Link>
-    </>
+    <Link
+      to="/"
+      className={twMerge(
+        `inline-flex items-center gap-1.5 cursor-pointer`,
+        title ? 'shrink-0' : '',
+      )}
+    >
+      <div className="w-[30px] inline-grid items-center grid-cols-1 grid-rows-1 [&>*]:transition-opacity [&>*]:duration-1000">
+        <OptimizedImage
+          src="/images/logos/logo-color-100.png"
+          alt=""
+          width={30}
+          quality={90}
+          className="row-start-1 col-start-1 w-full group-hover:opacity-0"
+        />
+        <img
+          src={'/images/logos/logo-black.svg'}
+          alt=""
+          className="row-start-1 col-start-1 w-full dark:opacity-0 opacity-0 group-hover:opacity-100"
+        />
+        <img
+          src={'/images/logos/logo-white.svg'}
+          alt=""
+          className="row-start-1 col-start-1 w-full light:opacity-0 dark:block opacity-0 group-hover:opacity-100"
+        />
+      </div>
+      <div>TanStack</div>
+    </Link>
   )
 }
 
-const MobileCard = ({
-  children,
-  isActive,
-}: {
-  children: React.ReactNode
-  isActive?: boolean
-}) => (
-  <Card
-    className={twMerge(
-      'md:contents border-gray-200/50 dark:border-gray-700/50 shadow-sm',
-      isActive && 'ring-2 ring-gray-400/30 dark:ring-gray-500/30',
-    )}
-  >
-    {children}
-  </Card>
-)
-
-export function Navbar({ children }: { children: React.ReactNode }) {
-  const matches = useMatches()
-  const capabilities = useCapabilities()
-  const user = useCurrentUser()
-  const navigate = useNavigate()
-  const { notify } = useToast()
-
-  const signOut = async () => {
-    await authClient.signOut()
-    navigate({ to: '/login' })
-    notify(
-      <div>
-        <div className="font-medium">Signed out</div>
-        <div className="text-gray-500 dark:text-gray-400 text-xs">
-          You have been logged out
-        </div>
-      </div>,
-    )
-  }
-
-  const { Title, library } = React.useMemo(() => {
-    const match = [...matches].reverse().find((m) => m.staticData.Title)
-    const libraryId = match?.params?.libraryId
-
-    return {
-      Title: match?.staticData.Title ?? null,
-      library: libraryId ? findLibrary(libraryId) : null,
-    }
-  }, [matches])
-
-  const canAdmin = capabilities.some((cap) =>
-    (ADMIN_ACCESS_CAPABILITIES as readonly string[]).includes(cap),
-  )
-
-  const canApiKeys = !!user // Any logged-in user can access API keys
-
-  const containerRef = React.useRef<HTMLDivElement>(null)
+type IconComponent = React.ComponentType<{ className?: string }>
 
-  React.useEffect(() => {
-    const updateContainerHeight = () => {
-      if (containerRef.current) {
-        const height = containerRef.current.offsetHeight
-        document.documentElement.style.setProperty(
-          '--navbar-height',
-          `${height}px`,
-        )
-      }
-    }
+type NavMenuKey =
+  | 'libraries'
+  | 'learn'
+  | 'community'
+  | 'tools'
+  | 'merch'
+  | 'support'
 
-    updateContainerHeight() // Initial call to set the height
+type NavMenuItem = {
+  label: string
+  to: string
+  hash?: string
+  description?: string
+  badge?: string
+  icon?: IconComponent
+}
 
-    window.addEventListener('resize', updateContainerHeight)
-    return () => {
-      window.removeEventListener('resize', updateContainerHeight)
-    }
-  }, [])
+type NavMenuSection = {
+  label: string
+  items: readonly NavMenuItem[]
+}
 
-  const [showMenu, setShowMenu] = React.useState(false)
-  const largeMenuRef = React.useRef<HTMLDivElement>(null)
-  const menuButtonRef = React.useRef<HTMLButtonElement>(null)
+type NavMenuGroup = {
+  key: NavMenuKey
+  label: string
+  to?: string
+  sections: readonly NavMenuSection[]
+  rail?: {
+    eyebrow: string
+    title: string
+    description: string
+    item: NavMenuItem
+  }
+}
 
-  // Close mobile menu when clicking outside
-  const smallMenuRef = useClickOutside<HTMLDivElement>({
-    enabled: showMenu,
-    onClickOutside: () => setShowMenu(false),
-    additionalRefs: [largeMenuRef, menuButtonRef],
-  })
+type NavigationLibrary = PublicLibrarySlim
 
-  const loginButton = (
-    <>
-      {(() => {
-        const loginEl = (
-          <Link
-            to="/login"
-            className="flex items-center gap-1 rounded-md px-2 py-1.5
-            bg-black dark:bg-white text-white dark:text-black
-            hover:bg-gray-800 dark:hover:bg-gray-200
-            transition-colors duration-200 text-xs font-medium"
-          >
-            <User className="w-3.5 h-3.5" />
-            <span>Log In</span>
-          </Link>
-        )
-
-        return (
-          <>
-            <AuthLoading>{loginEl}</AuthLoading>
-            <Unauthenticated>{loginEl}</Unauthenticated>
-          </>
-        )
-      })()}
-
-      <Authenticated>
-        <React.Suspense fallback={<div className="w-[26px] h-[26px]" />}>
-          <LazyAuthenticatedUserMenu
-            user={user}
-            canAdmin={canAdmin}
-            canApiKeys={canApiKeys}
-            onSignOut={signOut}
-          />
-        </React.Suspense>
-      </Authenticated>
-    </>
-  )
+const MERCH_MENU_PRODUCT_COUNT = 6
 
-  const socialLinks = (
-    <div className="flex items-center [&_a]:p-1.5 [&_a]:opacity-50 [&_a:hover]:opacity-100 [&_a]:transition-opacity [&_svg]:text-sm">
-      <a
-        href={`https://github.com/${library?.repo ?? 'tanstack'}`}
-        aria-label={`Follow ${library?.name ?? 'TanStack'} on GitHub`}
-      >
-        <GithubIcon />
-      </a>
-      <a href="https://x.com/tan_stack" aria-label="Follow TanStack on X.com">
-        <BrandXIcon />
-      </a>
-      <a
-        href="https://bsky.app/profile/tanstack.com"
-        aria-label="Follow TanStack on Besky"
-      >
-        <BSkyIcon />
-      </a>
-      <a
-        href="https://instagram.com/tan_stack"
-        aria-label="Follow TanStack on Instagram"
-      >
-        <InstagramIcon />
-      </a>
-      <a href="https://tlinz.com/discord" aria-label="Join TanStack Discord">
-        <DiscordIcon />
-      </a>
-    </div>
-  )
+type LibraryGroupId = keyof typeof librariesByGroup
 
-  const navbar = (
-    <div
-      className={twMerge(
-        'w-full p-2 fixed top-0 z-[100] bg-white/90 dark:bg-black/90 backdrop-blur-lg',
-        'flex items-center justify-between gap-4',
-        'border-b border-gray-500/20',
-      )}
-      ref={containerRef}
-    >
-      <div className="flex items-center min-w-0">
-        <div className="flex items-center gap-2 font-black text-xl uppercase min-w-0">
-          <React.Suspense
-            fallback={
-              <LogoSection
-                menuButtonRef={menuButtonRef}
-                setShowMenu={setShowMenu}
-                showMenu={showMenu}
-                title={Title}
-              />
-            }
-          >
-            <LazyBrandContextMenu
-              className={twMerge(`flex items-center group flex-shrink-0`)}
-            >
-              <LogoSection
-                menuButtonRef={menuButtonRef}
-                setShowMenu={setShowMenu}
-                showMenu={showMenu}
-                title={Title}
-              />
-            </LazyBrandContextMenu>
-          </React.Suspense>
-          {Title ? (
-            <div className="truncate">
-              <Title />
-            </div>
-          ) : null}
-        </div>
-      </div>
-      <div className="hidden xl:flex flex-1 justify-end min-w-0">
-        <Link
-          to="/mcp"
-          className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md
-            bg-gradient-to-r from-emerald-600 to-teal-700
-            hover:from-emerald-500 hover:to-teal-600
-            text-white text-xs font-medium
-            shadow-sm hover:shadow-md
-            transition-all duration-200"
-        >
-          <span className="px-1 py-px text-[9px] font-bold bg-white/20 rounded uppercase">
-            Alpha
-          </span>
-          <span>Try TanStack MCP</span>
-        </Link>
-      </div>
-      <div className="flex items-center gap-2">
-        <div className="hidden min-[750px]:block">{socialLinks}</div>
-        <div className="hidden sm:block">
-          <SearchButton />
-        </div>
-        <ThemeToggle />
-        <div className="flex items-center gap-2">{loginButton}</div>
-      </div>
-    </div>
-  )
+const DESKTOP_NAV_CLASS = 'hidden min-[900px]:flex'
+const MOBILE_NAV_CLASS = 'min-[900px]:hidden'
+const DESKTOP_SOCIAL_CLASS = 'hidden min-[1120px]:flex'
+const LIBRARY_MENU_GROUP_IDS: readonly LibraryGroupId[] = [
+  'framework',
+  'state',
+  'headlessUI',
+  'performance',
+  'tooling',
+]
+const DESKTOP_LIBRARY_MENU_GROUP_COLUMNS: readonly (readonly LibraryGroupId[])[] =
+  [['framework', 'state'], ['headlessUI', 'performance'], ['tooling']]
 
-  const activeLibrary = useLocation({
-    select: (location) => {
-      return libraries.find((library) => {
-        return library.to && location.pathname.startsWith(library.to)
-      })
+const NAV_GROUPS = [
+  {
+    key: 'libraries',
+    label: 'Libraries',
+    to: '/libraries',
+    sections: [],
+  },
+  {
+    key: 'learn',
+    label: 'Blog',
+    to: '/blog',
+    sections: [
+      {
+        label: 'Resources',
+        items: [
+          {
+            label: 'Blog',
+            to: '/blog',
+            description: 'Release notes, architecture notes, and essays.',
+            icon: Newspaper,
+          },
+          {
+            label: 'YouTube',
+            to: 'https://youtube.com/@tan_stack',
+            description: 'The official TanStack channel.',
+            icon: YouTubeIcon,
+          },
+        ],
+      },
+    ],
+    rail: {
+      eyebrow: 'Workshops',
+      title: 'Learn from maintainers',
+      description:
+        'Remote and in-person TanStack workshops for teams that need depth.',
+      item: {
+        label: 'Professional Workshops',
+        to: '/workshops',
+        icon: Users,
+      },
     },
-  })
-
-  const linkClasses = `flex items-center justify-between gap-2 group px-3 py-3 md:px-2 md:py-1 rounded-lg hover:bg-gray-500/10 font-bold text-base md:text-sm`
-
-  const items = (
-    <div className="contents md:block">
-      <div className="contents md:block">
-        {(() => {
-          return libraries
-            .filter(
-              (
-                d,
-              ): d is LibrarySlim & {
-                to: string
-                textStyle: string
-                badge?: string
-                colorFrom: string
-              } =>
-                d.to !== undefined &&
-                d.visible !== false &&
-                (SIDEBAR_LIBRARY_IDS as readonly string[]).includes(d.id),
-            )
-            .sort((a, b) => {
-              const indexA = SIDEBAR_LIBRARY_IDS.indexOf(
-                a.id as (typeof SIDEBAR_LIBRARY_IDS)[number],
-              )
-              const indexB = SIDEBAR_LIBRARY_IDS.indexOf(
-                b.id as (typeof SIDEBAR_LIBRARY_IDS)[number],
-              )
-              return indexA - indexB
-            })
-        })().map((library, i) => {
-          const [_, name] = library.name.split(' ')
-          const isActive = library.to === activeLibrary?.to
-
-          return (
-            <div key={i} className="contents md:block">
-              {library.to?.startsWith('http') ? (
-                <>
-                  {/* Mobile: Card wrapper */}
-                  <MobileCard>
-                    <a
-                      href={library.to}
-                      className={twMerge(linkClasses, 'md:hidden')}
-                    >
-                      <span
-                        className={twMerge(
-                          'w-4 h-4 md:w-3 md:h-3 rounded-sm border border-white/50',
-                          library.bgStyle,
-                        )}
-                      />
-                      {name}
-                    </a>
-                  </MobileCard>
-                  {/* Desktop: no card */}
-                  <a
-                    href={library.to}
-                    className={twMerge(linkClasses, 'hidden md:flex')}
-                  >
-                    <span
-                      className={twMerge(
-                        'w-3 h-3 rounded-sm border border-white/50',
-                        library.bgStyle,
-                      )}
-                    />
-                    {name}
-                  </a>
-                </>
-              ) : (
-                <>
-                  {/* Mobile: Direct link with Card */}
-                  <MobileCard isActive={isActive}>
-                    <Link
-                      to={`${library.to}/latest`}
-                      className={twMerge(
-                        linkClasses,
-                        'md:hidden',
-                        isActive ? 'bg-gray-500/5' : '',
-                      )}
-                    >
-                      <span
-                        className={twMerge(
-                          'w-4 h-4 md:w-3 md:h-3 rounded-sm',
-                          library.bgStyle,
-                        )}
-                      />
-                      <span
-                        style={{
-                          viewTransitionName: `library-name-${library.id}`,
-                        }}
-                        className={twMerge(
-                          'flex-1 text-left',
-                          isActive ? 'font-bold' : '',
-                        )}
-                      >
-                        {name}
-                      </span>
-                      {library.badge ? (
-                        <span
-                          className={twMerge(
-                            `px-2 py-px uppercase font-black rounded-md text-[.65rem]`,
-                            'border-2 bg-transparent',
-                            library.textStyle,
-                            library.borderStyle,
-                          )}
-                        >
-                          {library.badge}
-                        </span>
-                      ) : null}
-                    </Link>
-                  </MobileCard>
-                  {/* Desktop: Simple link */}
-                  <Link
-                    to={`${library.to}/latest`}
-                    className={twMerge(
-                      linkClasses,
-                      'hidden md:flex',
-                      isActive ? 'bg-gray-500/10 dark:bg-gray-500/30' : '',
-                    )}
-                  >
-                    <span
-                      className={twMerge('w-3 h-3 rounded-sm', library.bgStyle)}
-                    />
-                    <span
-                      style={{
-                        viewTransitionName: `library-name-${library.id}`,
-                      }}
-                      className={twMerge(
-                        'flex-1 text-left',
-                        isActive ? 'font-bold' : '',
-                      )}
-                    >
-                      {name}
-                    </span>
-                    {library.badge ? (
-                      <span
-                        className={twMerge(
-                          `px-2 py-px uppercase font-black rounded-md text-[.6rem]`,
-                          'border bg-transparent',
-                          'border-current text-current',
-                          'opacity-90 group-hover:opacity-100 transition-opacity',
-                          library.textColor,
-                        )}
-                      >
-                        {library.badge}
-                      </span>
-                    ) : null}
-                  </Link>
-                </>
-              )}
-            </div>
-          )
-        })}
-        {/* Mobile: More Libraries card */}
-        <MobileCard>
-          <Link
-            to="/libraries"
-            className={twMerge(linkClasses, 'font-normal md:hidden')}
-            activeProps={{
-              className: twMerge(
-                'font-bold! bg-gray-500/10 dark:bg-gray-500/30',
-              ),
-            }}
-          >
-            <div className="flex items-center gap-2">
-              <Grid2X2 className="w-5 h-5 md:w-4 md:h-4" />
-              <div>More Libraries</div>
-            </div>
-          </Link>
-        </MobileCard>
-        {/* Desktop: More Libraries link */}
-        <Link
-          to="/libraries"
-          className={twMerge(linkClasses, 'font-normal hidden md:flex')}
-          activeProps={{
-            className: twMerge('font-bold! bg-gray-500/10 dark:bg-gray-500/30'),
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Grid2X2 className="w-4 h-4" />
-            <div>More Libraries</div>
-          </div>
-        </Link>
-        <div className="py-2 hidden md:block col-span-2">
-          <div className="bg-gray-500/10 h-px" />
-        </div>
-      </div>
-      {/* Mobile separator */}
-      <div className="col-span-2 sm:col-span-3 py-3 md:hidden">
-        <div className="bg-gray-500/10 h-px" />
-      </div>
-      <div className="contents md:block">
-        {/* Mobile: Builder card */}
-        <MobileCard>
-          <Link
-            to="/builder"
-            className={twMerge(linkClasses, 'font-normal md:hidden')}
-            activeProps={{
-              className: twMerge(
-                'font-bold! bg-gray-500/10 dark:bg-gray-500/30',
-              ),
-            }}
-          >
-            <div className="flex items-center gap-2 w-full">
-              <Hammer className="w-5 h-5" />
-              <div className="flex items-center justify-between flex-1 gap-2">
-                <span>Builder</span>
-                <span className="px-1.5 py-0.5 text-[.6rem] font-black border border-amber-500 text-amber-500 rounded-md uppercase">
-                  Alpha
-                </span>
-              </div>
-            </div>
-          </Link>
-        </MobileCard>
-        {/* Desktop: Builder link */}
-        <Link
-          to="/builder"
-          className={twMerge(linkClasses, 'font-normal hidden md:flex')}
-          activeProps={{
-            className: twMerge('font-bold! bg-gray-500/10 dark:bg-gray-500/30'),
-          }}
-        >
-          <div className="flex items-center gap-2 w-full">
-            <Hammer className="w-4 h-4" />
-            <div className="flex items-center justify-between flex-1 gap-2">
-              <span>Builder</span>
-              <span className="px-1.5 py-0.5 text-[.6rem] font-black border border-amber-500 text-amber-500 rounded-md uppercase">
-                Alpha
-              </span>
-            </div>
-          </div>
-        </Link>
-        {[
+  },
+  {
+    key: 'community',
+    label: 'Community',
+    sections: [
+      {
+        label: 'Channels',
+        items: [
+          {
+            label: 'Discord',
+            to: 'https://tlinz.com/discord',
+            description: 'Community support and real-time discussion.',
+            icon: DiscordIcon,
+          },
           {
-            label: (
-              <>
-                <span>Feed</span>
-                <span className="px-1.5 py-0.5 text-[.6rem] font-black border border-blue-500 text-blue-500 rounded-md uppercase">
-                  Beta
-                </span>
-              </>
-            ),
-            icon: Rss,
-            to: '/feed',
+            label: 'GitHub',
+            to: 'https://github.com/TanStack',
+            description: 'Source, issues, discussions, and releases.',
+            icon: GithubIcon,
           },
+        ],
+      },
+      {
+        label: 'People & Work',
+        items: [
           {
             label: 'Maintainers',
-            icon: Code,
             to: '/maintainers',
+            description: 'Meet the people maintaining the stack.',
+            icon: Code,
           },
           {
-            label: 'Partners',
+            label: 'Contributors',
+            to: '/maintainers',
+            description: 'Core, library, and community contributors.',
             icon: Users,
-            to: '/partners',
           },
           {
             label: 'Showcase',
-            icon: Sparkles,
             to: '/showcase',
+            description: 'Products and teams building with TanStack.',
+            icon: Sparkles,
           },
+        ],
+      },
+    ],
+  },
+  {
+    key: 'tools',
+    label: 'Tools',
+    sections: [
+      {
+        label: 'Tools',
+        items: [
           {
-            label: 'Blog',
-            icon: Music,
-            to: '/blog',
+            label: 'Builder',
+            to: '/builder',
+            description: 'Generate TanStack app starters.',
+            badge: 'Alpha',
+            icon: Hammer,
           },
           {
-            label: (
-              <>
-                <span>Learn</span>
-                <span className="px-1.5 py-0.5 text-[.6rem] font-black border border-green-500 text-green-500 rounded-md uppercase">
-                  NEW
-                </span>
-              </>
-            ),
-            icon: BookOpen,
-            to: '/learn',
+            label: 'Stats',
+            to: '/stats/npm',
+            description: 'NPM and ecosystem usage data.',
+            icon: TrendingUp,
           },
+        ],
+      },
+    ],
+  },
+  {
+    key: 'merch',
+    label: 'Merch',
+    to: '/shop',
+    sections: [],
+  },
+  {
+    key: 'support',
+    label: 'Support',
+    sections: [
+      {
+        label: 'Support',
+        items: [
           {
-            label: 'Support',
-            icon: HelpCircle,
+            label: 'Support Overview',
             to: '/support',
+            description: 'Find the right support path.',
+            icon: HelpCircle,
           },
           {
-            label: 'Stats',
-            icon: TrendingUp,
-            to: '/stats/npm',
+            label: 'Partners',
+            to: '/partners',
+            description: 'Companies supporting TanStack.',
+            icon: Heart,
           },
           {
-            label: 'Discord',
-            icon: DiscordIcon,
-            to: 'https://tlinz.com/discord',
-            target: '_blank',
+            label: 'OSS Sponsors',
+            to: '/',
+            hash: 'sponsors',
+            description: 'Sponsors keeping TanStack open source.',
+            icon: ShieldCheck,
           },
           {
-            label: 'Merch',
-            icon: Shirt,
-            to: '/merch',
+            label: 'Enterprise Support',
+            to: '/paid-support',
+            description: 'Private consulting and expert support.',
+            icon: Users,
           },
           {
-            label: 'GitHub',
-            icon: GithubIcon,
-            to: 'https://github.com/tanstack',
+            label: 'Contact',
+            to: 'mailto:support@tanstack.com',
+            description: 'Get in touch with the TanStack team.',
+            icon: Mail,
           },
+        ],
+      },
+      {
+        label: 'About',
+        items: [
           {
             label: 'Ethos',
-            icon: ShieldCheck,
             to: '/ethos',
+            description: 'How we think about open source and products.',
+            icon: ShieldCheck,
           },
           {
             label: 'Tenets',
-            icon: BookOpen,
             to: '/tenets',
+            description: 'The values that shape TanStack libraries.',
+            icon: BookOpen,
           },
           {
             label: 'Brand Guide',
-            icon: Paintbrush,
             to: '/brand-guide',
+            description: 'Logos, colors, and brand usage.',
+            icon: Paintbrush,
           },
-        ].map((item, i) => {
-          const Icon = item.icon
-          return (
-            <React.Fragment key={i}>
-              {/* Mobile: Card */}
-              <MobileCard>
-                <Link
-                  to={item.to}
-                  className={twMerge(linkClasses, 'font-normal md:hidden')}
-                  activeProps={{
-                    className: twMerge(
-                      'font-bold! bg-gray-500/10 dark:bg-gray-500/30',
-                    ),
-                  }}
-                  target={item.to.startsWith('http') ? '_blank' : undefined}
-                >
-                  <div className="flex items-center gap-2 w-full">
-                    <Icon className="w-5 h-5" />
-                    <div className="flex items-center justify-between flex-1 gap-2">
-                      {item.label}
-                    </div>
-                  </div>
-                </Link>
-              </MobileCard>
-              {/* Desktop: Link */}
-              <Link
-                to={item.to}
-                className={twMerge(linkClasses, 'font-normal hidden md:flex')}
-                activeProps={{
-                  className: twMerge(
-                    'font-bold! bg-gray-500/10 dark:bg-gray-500/30',
-                  ),
-                }}
-                target={item.to.startsWith('http') ? '_blank' : undefined}
-              >
-                <div className="flex items-center gap-2 w-full">
-                  <Icon className="w-4 h-4" />
-                  <div className="flex items-center justify-between flex-1 gap-2">
-                    {item.label}
-                  </div>
-                </div>
-              </Link>
-            </React.Fragment>
-          )
-        })}
-      </div>
-    </div>
-  )
+        ],
+      },
+    ],
+    rail: {
+      eyebrow: 'Partners',
+      title: 'Work with TanStack',
+      description: 'Sponsorships, placements, and partner pages.',
+      item: {
+        label: 'Partnership Inquiry',
+        to: 'mailto:partners@tanstack.com?subject=TanStack Partnership Inquiry',
+        icon: Mail,
+      },
+    },
+  },
+] as const satisfies readonly NavMenuGroup[]
 
-  const smallMenu = showMenu ? (
-    <div
-      ref={smallMenuRef}
-      className="md:hidden bg-white/50 dark:bg-black/60 backdrop-blur-[20px] z-50
-    fixed top-[var(--navbar-height)] left-0 right-0 max-h-[calc(100dvh-var(--navbar-height))] overflow-y-auto
-    "
-    >
-      <div
-        className="flex flex-col whitespace-nowrap overflow-y-auto
-          border-t border-gray-500/20 text-lg bg-white/80 dark:bg-black/90"
-      >
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-        <div
-          onClick={(event) => {
-            const target = event.target as HTMLElement
-            if (target.closest('[data-collapsible-trigger]')) {
-              return
-            }
-            if (target.closest('a') || target.closest('button')) {
-              setShowMenu(false)
-            }
-          }}
-        >
-          <div className="px-3 pt-3 sm:hidden">
-            <SearchButton className="w-full py-3 text-base [&_svg]:w-5 [&_svg]:h-5" />
-          </div>
-          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 text-base p-3 border-b border-gray-500/20">
-            {items}
-          </div>
-          <div className="p-4 sm:hidden">{socialLinks}</div>
-        </div>
-      </div>
-    </div>
-  ) : null
+function isNavigationLibrary(
+  library: LibrarySlim,
+): library is NavigationLibrary {
+  return isPublicLibrary(library)
+}
 
-  const inlineMenu = !Title
+function getLibraryDisplayName(library: LibrarySlim) {
+  return library.name.replace(/^TanStack\s+/, '')
+}
 
-  const leaveTimer = React.useRef<NodeJS.Timeout | undefined>(undefined)
+function isExternalLink(to: string) {
+  return to.startsWith('http') || to.startsWith('mailto:')
+}
 
-  const largeMenu = (
-    <>
-      <div
-        ref={largeMenuRef}
-        className={twMerge(
-          `hidden md:flex flex-col
-      h-[calc(100dvh-var(--navbar-height))] z-20
-      bg-white/50 dark:bg-black/30 border-r border-gray-500/20`,
-          'transition-all duration-300',
-          'z-50',
-          // md breakpoint: always flyout
-          'md:fixed md:top-[var(--navbar-height)] md:bg-white md:dark:bg-black/90 md:backdrop-blur-lg md:shadow-xl',
-          !showMenu && 'md:-translate-x-full',
-          showMenu && 'md:translate-x-0',
-          // lg breakpoint: inline when no Title, flyout when Title
-          inlineMenu &&
-            'lg:sticky lg:top-[var(--navbar-height)] lg:translate-x-0 lg:bg-white/50 lg:dark:bg-black/30 lg:backdrop-blur-none lg:shadow-none',
-          !inlineMenu &&
-            'lg:fixed lg:top-[var(--navbar-height)] lg:bg-white lg:dark:bg-black/90 lg:backdrop-blur-lg lg:shadow-xl',
-          !inlineMenu && !showMenu && 'lg:-translate-x-full',
-          !inlineMenu && showMenu && 'lg:translate-x-0',
-        )}
-        onPointerEnter={(e) => {
-          if (e.pointerType === 'touch') return
-          clearTimeout(leaveTimer.current)
-        }}
-        onPointerLeave={(e) => {
-          if (e.pointerType === 'touch') return
-          leaveTimer.current = setTimeout(() => {
-            setShowMenu(false)
-          }, 300)
-        }}
-      >
-        <div className="flex-1 flex flex-col gap-4 whitespace-nowrap overflow-y-auto text-base pb-[50px] min-w-[220px]">
-          <div className="flex flex-col gap-1 text-sm p-2">{items}</div>
-        </div>
-      </div>
-    </>
+function getLibraryDocsTo(library: NavigationLibrary) {
+  return `${library.to}/latest/docs`
+}
+
+function getLibraryMenuGroups() {
+  return LIBRARY_MENU_GROUP_IDS.map((groupId) => {
+    const groupLibraries = librariesByGroup[groupId]
+    const libraries = groupLibraries.filter(isNavigationLibrary)
+
+    return {
+      id: groupId,
+      label: librariesGroupNamesMap[groupId],
+      libraries,
+    }
+  }).filter((group) => group.libraries.length > 0)
+}
+
+function getDesktopLibraryMenuColumns(
+  libraryMenuGroups: ReturnType<typeof getLibraryMenuGroups>,
+) {
+  const groupsById = new Map(
+    libraryMenuGroups.map((group) => [group.id, group]),
   )
 
+  return DESKTOP_LIBRARY_MENU_GROUP_COLUMNS.map((columnGroupIds) =>
+    columnGroupIds.flatMap((groupId) => {
+      const group = groupsById.get(groupId)
+
+      return group ? [group] : []
+    }),
+  ).filter((columnGroups) => columnGroups.length > 0)
+}
+
+function AiDockMount() {
+  const { isAiDockOpen } = useSearchContext()
+  const [hasActivated, setHasActivated] = React.useState(isAiDockOpen)
+
+  React.useEffect(() => {
+    if (isAiDockOpen) {
+      setHasActivated(true)
+    }
+  }, [isAiDockOpen])
+
+  if (!hasActivated && !isAiDockOpen) {
+    return null
+  }
+
   return (
-    <>
-      {navbar}
-      {/* Sticky announcement banners below the nav */}
-      <div className="sticky top-[var(--navbar-height)] z-[99]">
-        <React.Suspense fallback={null}>
-          <LazyAnnouncementBanner />
-        </React.Suspense>
-      </div>
-      <div
-        className={twMerge(
+    <React.Suspense fallback={null}>
+      <LazyAiDock />
+    </React.Suspense>
+  )
+}
+
+export function Navbar({ children }: { children: React.ReactNode }) {
+  const matches = useMatches()
+  const location = useLocation()
+
+  const { Title } = React.useMemo(() => {
+    const match = [...matches].reverse().find((m) => m.staticData.Title)
+
+    return {
+      Title: match?.staticData.Title ?? null,
+    }
+  }, [matches])
+
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const desktopNavRef = React.useRef<HTMLElement>(null)
+
+  React.useEffect(() => {
+    const desktopNav = desktopNavRef.current
+
+    if (!desktopNav) {
+      return
+    }
+
+    const updateDesktopNavWidth = () => {
+      const targetWidth = Math.ceil(
+        desktopNav.getBoundingClientRect().width + 32,
+      )
+
+      desktopNav.style.setProperty(
+        '--ts-primary-nav-target-width',
+        `${targetWidth}px`,
+      )
+    }
+
+    let animationFrameId: number | null = null
+    const scheduleDesktopNavWidthUpdate = () => {
+      if (animationFrameId !== null) {
+        return
+      }
+
+      animationFrameId = window.requestAnimationFrame(() => {
+        animationFrameId = null
+        updateDesktopNavWidth()
+      })
+    }
+
+    updateDesktopNavWidth()
+
+    const resizeObserver =
+      typeof window.ResizeObserver === 'function'
+        ? new window.ResizeObserver(scheduleDesktopNavWidthUpdate)
+        : null
+
+    resizeObserver?.observe(desktopNav)
+    window.addEventListener('resize', scheduleDesktopNavWidthUpdate)
+
+    return () => {
+      if (animationFrameId !== null) {
+        window.cancelAnimationFrame(animationFrameId)
+      }
+
+      resizeObserver?.disconnect()
+      window.removeEventListener('resize', scheduleDesktopNavWidthUpdate)
+    }
+  }, [])
+
+  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false)
+  const [dismissedDesktopMenuKey, setDismissedDesktopMenuKey] =
+    React.useState<NavMenuKey | null>(null)
+  const [canLoadAuthControls, setCanLoadAuthControls] = React.useState(false)
+
+  React.useEffect(() => {
+    setMobileMenuOpen(false)
+  }, [location.href])
+
+  const blurActiveNavigationElement = React.useCallback(() => {
+    if (typeof document === 'undefined') {
+      return
+    }
+
+    const activeElement = document.activeElement
+
+    if (
+      activeElement instanceof HTMLElement &&
+      containerRef.current?.contains(activeElement)
+    ) {
+      activeElement.blur()
+    }
+  }, [])
+
+  const dismissDesktopMenu = React.useCallback(
+    (key: NavMenuKey) => {
+      setDismissedDesktopMenuKey(key)
+      blurActiveNavigationElement()
+    },
+    [blurActiveNavigationElement],
+  )
+
+  const requestAuthControls = React.useCallback(() => {
+    setCanLoadAuthControls(true)
+  }, [])
+
+  React.useEffect(() => {
+    if (!mobileMenuOpen) {
+      return
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setMobileMenuOpen(false)
+      }
+    }
+
+    document.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [mobileMenuOpen])
+
+  const getLoginButtonFallback = (className?: string) => (
+    <Link
+      to="/login"
+      aria-label="Log In"
+      className={twMerge(
+        'flex shrink-0 items-center gap-1 rounded-md px-2 py-1.5 whitespace-nowrap',
+        'bg-black dark:bg-white text-white dark:text-black',
+        'hover:bg-gray-800 dark:hover:bg-gray-200',
+        'transition-colors duration-200 text-xs font-medium',
+        className,
+      )}
+    >
+      <User className="w-3.5 h-3.5" />
+      <span className="hidden min-[430px]:inline">Log In</span>
+    </Link>
+  )
+  const renderAuthControls = (className?: string) =>
+    canLoadAuthControls ? (
+      <React.Suspense fallback={getLoginButtonFallback(className)}>
+        <LazyNavbarAuthControls className={className} />
+      </React.Suspense>
+    ) : (
+      getLoginButtonFallback(className)
+    )
+
+  const socialLinks = <SocialStack />
+  const siteBackdropActive = mobileMenuOpen
+
+  const navbar = (
+    <div
+      className={twMerge(
+        'w-full h-[var(--navbar-height)] p-2 fixed top-0 z-[100] bg-white/90 dark:bg-black/90 backdrop-blur-lg',
+        'flex items-center justify-between gap-2 min-[1120px]:gap-3',
+        'border-b border-gray-500/20',
+      )}
+      ref={containerRef}
+    >
+      <div className="flex min-w-0 flex-1 items-center gap-2 min-[1120px]:gap-3">
+        <div className="flex items-center gap-2 font-black text-xl uppercase min-w-0">
+          <BrandContextMenu
+            className={twMerge(`flex items-center group shrink-0`)}
+          >
+            <LogoSection title={Title} />
+          </BrandContextMenu>
+          {Title ? (
+            <div className="truncate">
+              <Title />
+            </div>
+          ) : null}
+        </div>
+
+        <nav
+          ref={desktopNavRef}
+          aria-label="Primary navigation"
+          className={twMerge(
+            DESKTOP_NAV_CLASS,
+            'relative shrink-0 items-center gap-0',
+          )}
+        >
+          {NAV_GROUPS.map((group) => (
+            <DesktopNavTrigger
+              key={group.key}
+              group={group}
+              dismissed={dismissedDesktopMenuKey === group.key}
+              onDismiss={() => dismissDesktopMenu(group.key)}
+              onResetDismissed={() => {
+                setDismissedDesktopMenuKey((dismissedKey) =>
+                  dismissedKey === group.key ? null : dismissedKey,
+                )
+              }}
+            />
+          ))}
+        </nav>
+      </div>
+
+      <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
+        <div className={DESKTOP_SOCIAL_CLASS}>{socialLinks}</div>
+        <ThemeToggle />
+        <NavbarCartButton />
+        <SearchButton iconOnly />
+        <AiDockButton />
+        <div
+          className={twMerge(DESKTOP_NAV_CLASS, 'items-center gap-2')}
+          onFocusCapture={requestAuthControls}
+          onPointerEnter={requestAuthControls}
+          onTouchStart={requestAuthControls}
+        >
+          {renderAuthControls()}
+        </div>
+        <button
+          type="button"
+          aria-label={mobileMenuOpen ? 'Close Menu' : 'Open Menu'}
+          aria-expanded={mobileMenuOpen}
+          aria-controls="primary-mobile-menu"
+          className={twMerge(
+            'inline-flex h-9 w-9 items-center justify-center rounded-md',
+            'text-gray-700 transition-colors hover:bg-gray-500/10',
+            'dark:text-gray-200',
+            MOBILE_NAV_CLASS,
+          )}
+          onClick={() => setMobileMenuOpen((prev) => !prev)}
+        >
+          {mobileMenuOpen ? (
+            <X className="h-5 w-5" />
+          ) : (
+            <Menu className="h-5 w-5" />
+          )}
+        </button>
+      </div>
+    </div>
+  )
+
+  const mobileMenu = (
+    <Collapsible
+      open={mobileMenuOpen}
+      onOpenChange={setMobileMenuOpen}
+      className={MOBILE_NAV_CLASS}
+    >
+      <CollapsibleContent
+        className={twMerge(
+          'fixed left-0 right-0 top-[var(--navbar-height)] z-[90]',
+          'motion-reduce:transition-none',
+          mobileMenuOpen ? 'pointer-events-auto' : 'pointer-events-none',
+        )}
+      >
+        <div
+          id="primary-mobile-menu"
+          data-mobile-menu
+          aria-hidden={!mobileMenuOpen}
+          className={twMerge(
+            'ts-glass-menu max-h-[calc(100dvh-var(--navbar-height))] overflow-y-auto',
+            'border-b border-white/45 bg-white/80 text-base shadow-2xl shadow-black/15 backdrop-blur-2xl backdrop-saturate-150',
+            'dark:border-white/10 dark:bg-black/70 dark:shadow-black/50',
+          )}
+        >
+          <div className="border-t border-white/30 dark:border-white/10">
+            <div
+              className="flex items-center justify-end gap-2 p-2"
+              onFocusCapture={requestAuthControls}
+              onPointerEnter={requestAuthControls}
+              onTouchStart={requestAuthControls}
+            >
+              {socialLinks}
+              {renderAuthControls('h-9 px-3 text-sm')}
+            </div>
+            <nav
+              className="grid gap-1.5 px-2 pb-2"
+              aria-label="Mobile navigation"
+            >
+              {NAV_GROUPS.map((group) => (
+                <MobileMenuGroup
+                  key={group.key}
+                  group={group}
+                  onNavigate={() => setMobileMenuOpen(false)}
+                />
+              ))}
+            </nav>
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+
+  return (
+    <>
+      {navbar}
+      {mobileMenu}
+      <div
+        aria-hidden="true"
+        data-site-menu-tint
+        className={twMerge(
+          'pointer-events-none fixed inset-x-0 bottom-0 top-[var(--navbar-height)] z-[80]',
+          'bg-white/45 transition-opacity duration-200 motion-reduce:transition-none dark:bg-black/45',
+          siteBackdropActive ? 'opacity-100' : 'opacity-0',
+        )}
+      />
+      <div
+        data-site-content
+        className={twMerge(
           `min-h-[calc(100dvh-var(--navbar-height))] flex flex-col
-          min-w-0 md:flex-row w-full transition-all duration-300
+          min-w-0 w-full transition-[filter] duration-200 motion-reduce:transition-none
           pt-[var(--navbar-height)]`,
+          siteBackdropActive ? 'blur-[4px]' : 'filter-none',
         )}
       >
-        {smallMenu}
-        {largeMenu}
         <div className="flex-1 min-w-0 flex flex-col w-full min-h-0">
           {children}
         </div>
       </div>
+      <AiDockMount />
+    </>
+  )
+}
+
+function DesktopNavTrigger({
+  group,
+  dismissed,
+  onDismiss,
+  onResetDismissed,
+}: {
+  group: NavMenuGroup
+  dismissed: boolean
+  onDismiss: () => void
+  onResetDismissed: () => void
+}) {
+  const triggerClassName = twMerge(
+    'ts-mega-trigger inline-flex items-center gap-1 rounded-md px-2 py-2 text-xs font-medium min-[1120px]:gap-1.5 min-[1120px]:px-3 min-[1120px]:text-[13px]',
+    'text-gray-700 transition-colors hover:bg-gray-500/10 hover:text-gray-950',
+    'dark:text-gray-300 dark:hover:text-white',
+  )
+
+  return (
+    <div
+      className="ts-mega-trigger-wrap"
+      data-menu-key={group.key}
+      data-menu-dismissed={dismissed ? 'true' : undefined}
+      onPointerLeave={onResetDismissed}
+      onFocusCapture={onResetDismissed}
+    >
+      {group.to ? (
+        <Link
+          to={group.to}
+          data-menu-key={group.key}
+          className={triggerClassName}
+          onClick={onDismiss}
+          preload="intent"
+        >
+          <span>{group.label}</span>
+        </Link>
+      ) : (
+        <button
+          type="button"
+          data-menu-key={group.key}
+          className={triggerClassName}
+          onMouseDown={(event) => {
+            event.preventDefault()
+          }}
+        >
+          <span>{group.label}</span>
+        </button>
+      )}
+      <DesktopNavDropdown group={group} onNavigate={onDismiss} />
+    </div>
+  )
+}
+
+function DesktopNavDropdown({
+  group,
+  onNavigate,
+}: {
+  group: NavMenuGroup
+  onNavigate: () => void
+}) {
+  return (
+    <div className="ts-mega-dropdown">
+      <div
+        className={twMerge(
+          'ts-mega-dropdown-panel ts-glass-menu rounded-xl',
+          'w-max min-w-[var(--ts-primary-nav-target-width,0px)] max-w-[calc(100vw-2rem)]',
+          'border border-white/45 bg-white/80 p-4 shadow-2xl shadow-black/15 backdrop-blur-2xl backdrop-saturate-150',
+          'dark:border-white/10 dark:bg-black/70 dark:shadow-black/50',
+        )}
+      >
+        <MegaMenuContent
+          group={group}
+          onNavigate={onNavigate}
+          variant="desktop"
+        />
+      </div>
+    </div>
+  )
+}
+
+function MobileMenuGroup({
+  group,
+  onNavigate,
+}: {
+  group: NavMenuGroup
+  onNavigate: () => void
+}) {
+  return (
+    <Collapsible className="overflow-hidden rounded-lg border border-gray-500/10 bg-white/35 dark:border-white/10 dark:bg-white/[0.03]">
+      {({ open }) => (
+        <>
+          {group.to ? (
+            <div className="flex items-center">
+              <CollapsibleTrigger
+                aria-label={`${open ? 'Collapse' : 'Expand'} ${group.label}`}
+                className={twMerge(
+                  'flex min-w-0 flex-1 items-center px-3 py-3 text-left font-black text-gray-800',
+                  'hover:text-gray-950 focus:outline-none dark:text-gray-200 dark:hover:text-white',
+                  open && 'text-gray-950 dark:text-white',
+                )}
+              >
+                <span className="min-w-0 flex-1 truncate">{group.label}</span>
+              </CollapsibleTrigger>
+            </div>
+          ) : (
+            <CollapsibleTrigger
+              className={twMerge(
+                'flex w-full items-center px-3 py-3 text-left font-black text-gray-800',
+                'hover:text-gray-950 dark:text-gray-200 dark:hover:text-white',
+                open && 'text-gray-950 dark:text-white',
+              )}
+            >
+              {group.label}
+            </CollapsibleTrigger>
+          )}
+          <CollapsibleContent className="border-t border-gray-500/10 motion-reduce:transition-none dark:border-white/10">
+            <div className="px-2 pb-3 pt-1">
+              <MegaMenuContent
+                group={group}
+                onNavigate={onNavigate}
+                variant="mobile"
+              />
+            </div>
+          </CollapsibleContent>
+        </>
+      )}
+    </Collapsible>
+  )
+}
+
+function MegaMenuContent({
+  group,
+  onNavigate,
+  variant,
+}: {
+  group: NavMenuGroup
+  onNavigate: () => void
+  variant: 'desktop' | 'mobile'
+}) {
+  if (group.key === 'libraries') {
+    return <LibrariesMenuContent onNavigate={onNavigate} variant={variant} />
+  }
+
+  if (group.key === 'merch') {
+    return <MerchMenuContent onNavigate={onNavigate} variant={variant} />
+  }
+
+  return (
+    <div
+      className={twMerge(
+        variant === 'desktop'
+          ? group.rail
+            ? 'grid w-max items-start gap-4 grid-cols-[max-content_260px]'
+            : 'grid w-max gap-3'
+          : 'grid gap-3',
+      )}
+    >
+      <div>
+        <div
+          className={twMerge(
+            'grid gap-3',
+            variant === 'desktop' &&
+              group.sections.length > 1 &&
+              'grid-cols-[repeat(2,260px)]',
+          )}
+        >
+          {group.sections.map((section, sectionIndex) => (
+            <div
+              key={section.label}
+              className={twMerge(
+                variant === 'mobile' && sectionIndex === 0 && 'pt-1.5',
+                variant === 'mobile' && sectionIndex > 0 && 'pt-3',
+              )}
+            >
+              <div className="mb-2 px-2 text-xs font-black uppercase text-gray-500 dark:text-gray-400">
+                {section.label}
+              </div>
+              <div
+                className={twMerge(
+                  'grid gap-1',
+                  variant === 'desktop' &&
+                    group.key === 'learn' &&
+                    'grid-cols-[repeat(2,260px)]',
+                  variant === 'desktop' &&
+                    group.key === 'tools' &&
+                    'grid-cols-[repeat(2,260px)]',
+                )}
+              >
+                {section.items.map((item) => (
+                  <MenuItemLink
+                    key={`${item.label}-${item.to}-${item.hash ?? ''}`}
+                    item={item}
+                    onNavigate={onNavigate}
+                    variant={variant}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      {group.rail ? (
+        <MenuRail rail={group.rail} onNavigate={onNavigate} variant={variant} />
+      ) : null}
+    </div>
+  )
+}
+
+function LibrariesMenuContent({
+  onNavigate,
+  variant,
+}: {
+  onNavigate: () => void
+  variant: 'desktop' | 'mobile'
+}) {
+  const libraryMenuGroups = getLibraryMenuGroups()
+  const desktopLibraryMenuColumns =
+    getDesktopLibraryMenuColumns(libraryMenuGroups)
+  const allLibrariesItem: NavMenuItem = {
+    label: 'All Libraries',
+    to: '/libraries',
+    description: 'Browse the full set of public packages.',
+    icon: Grid2X2,
+  }
+
+  return (
+    <div
+      className={twMerge(variant === 'desktop' ? 'grid gap-4' : 'grid gap-3')}
+    >
+      <div>
+        <div
+          className={twMerge(
+            variant === 'desktop'
+              ? 'grid w-max max-h-[min(62dvh,560px)] grid-cols-[repeat(3,max-content)] items-start justify-start gap-x-8 overflow-y-auto pr-2'
+              : 'grid gap-3',
+          )}
+        >
+          {variant === 'mobile' ? (
+            <MenuItemLink
+              item={allLibrariesItem}
+              onNavigate={onNavigate}
+              variant="mobile"
+              compact
+            />
+          ) : null}
+          {variant === 'desktop'
+            ? desktopLibraryMenuColumns.map((columnGroups) => (
+                <div
+                  key={columnGroups.map((group) => group.id).join('-')}
+                  className="grid content-start gap-y-5"
+                >
+                  {columnGroups.map((group) => (
+                    <LibraryMenuGroup
+                      key={group.id}
+                      group={group}
+                      onNavigate={onNavigate}
+                      variant="desktop"
+                    />
+                  ))}
+                </div>
+              ))
+            : libraryMenuGroups.map((group) => (
+                <LibraryMenuGroup
+                  key={group.id}
+                  group={group}
+                  onNavigate={onNavigate}
+                  variant="mobile"
+                />
+              ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function LibraryMenuGroup({
+  group,
+  onNavigate,
+  variant,
+}: {
+  group: ReturnType<typeof getLibraryMenuGroups>[number]
+  onNavigate: () => void
+  variant: 'desktop' | 'mobile'
+}) {
+  const categorySlug = groupToSlug[group.id]
+
+  return (
+    <section
+      className={twMerge(
+        'break-inside-avoid',
+        variant === 'desktop' ? '[break-inside:avoid]' : 'pb-3',
+      )}
+    >
+      <div className="mb-1.5 px-1">
+        {variant === 'desktop' ? (
+          <Link
+            to="/stack/$category"
+            params={{ category: categorySlug }}
+            onClick={onNavigate}
+            className="inline-flex rounded px-1 py-0.5 text-xs font-black uppercase text-gray-500 hover:bg-gray-500/10 hover:text-gray-950 focus:bg-gray-500/10 focus:text-gray-950 focus:outline-none dark:text-gray-400 dark:hover:text-white dark:focus:text-white"
+            preload="intent"
+          >
+            {group.label}
+          </Link>
+        ) : (
+          <div className="px-1 py-0.5 text-xs font-black uppercase text-gray-500 dark:text-gray-400">
+            {group.label}
+          </div>
+        )}
+      </div>
+      <div className="grid gap-0.5">
+        {group.libraries.map((library) => (
+          <LibraryMenuItem
+            key={library.id}
+            library={library}
+            onNavigate={onNavigate}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function LibraryMenuItem({
+  library,
+  onNavigate,
+}: {
+  library: NavigationLibrary
+  onNavigate: () => void
+}) {
+  const name = getLibraryDisplayName(library)
+  const docsTo = getLibraryDocsTo(library)
+
+  return (
+    <div data-library-menu-item className="flex items-center gap-1.5">
+      <Link
+        to={library.to}
+        onClick={onNavigate}
+        className="group/library flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 py-2 text-sm font-black text-gray-900 hover:bg-gray-500/10 focus:bg-gray-500/10 focus:outline-none dark:text-gray-100"
+        preload="intent"
+      >
+        <span
+          className={twMerge(
+            'h-4 w-3.5 shrink-0 rounded-[5px] border border-white/30',
+            library.bgStyle,
+          )}
+        />
+        <span className="flex min-w-0 flex-1 items-center gap-1.5">
+          <span className="min-w-0 truncate">{name}</span>
+          {library.badge ? (
+            <span
+              data-library-badge
+              className={twMerge(
+                'invisible inline-flex shrink-0 rounded-md border border-current px-1.5 py-0.5 text-[0.58rem] font-black uppercase leading-none',
+                'group-hover/library:visible group-focus-within/library:visible',
+                library.textStyle,
+              )}
+            >
+              {library.badge}
+            </span>
+          ) : null}
+        </span>
+      </Link>
+      <div className="flex shrink-0 items-center gap-1">
+        <Link
+          to={docsTo}
+          onClick={onNavigate}
+          className="rounded-lg px-2 py-2 text-xs font-bold text-gray-600 hover:bg-gray-500/10 hover:text-gray-950 focus:bg-gray-500/10 focus:text-gray-950 focus:outline-none dark:text-gray-400 dark:hover:text-white dark:focus:text-white"
+          preload="intent"
+        >
+          Docs
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+function MerchMenuContent({
+  onNavigate,
+  variant,
+}: {
+  onNavigate: () => void
+  variant: 'desktop' | 'mobile'
+}) {
+  const rootRef = React.useRef<HTMLDivElement>(null)
+  const [shouldLoad, setShouldLoad] = React.useState(false)
+  const [products, setProducts] = React.useState<Array<ProductListItem>>([])
+  const [loading, setLoading] = React.useState(true)
+
+  React.useEffect(() => {
+    const root = rootRef.current
+    const triggerWrap =
+      variant === 'desktop'
+        ? root?.closest<HTMLElement>('.ts-mega-trigger-wrap')
+        : null
+    const target = triggerWrap ?? root
+
+    if (!target) {
+      return
+    }
+
+    const load = () => {
+      setShouldLoad(true)
+    }
+
+    target.addEventListener('pointerenter', load)
+    target.addEventListener('focusin', load)
+
+    return () => {
+      target.removeEventListener('pointerenter', load)
+      target.removeEventListener('focusin', load)
+    }
+  }, [variant])
+
+  React.useEffect(() => {
+    if (!shouldLoad) {
+      return
+    }
+
+    let cancelled = false
+
+    async function loadProducts() {
+      setLoading(true)
+
+      try {
+        const page = await getProducts({
+          data: {
+            first: MERCH_MENU_PRODUCT_COUNT,
+            sortKey: 'CREATED_AT',
+            reverse: true,
+          },
+        })
+
+        if (!cancelled) {
+          setProducts(page.nodes)
+        }
+      } catch {
+        if (!cancelled) {
+          setProducts([])
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false)
+        }
+      }
+    }
+
+    loadProducts()
+
+    return () => {
+      cancelled = true
+    }
+  }, [shouldLoad])
+
+  const allMerchItem: NavMenuItem = {
+    label: 'All Merch',
+    to: '/shop',
+    description: 'Browse all TanStack apparel, accessories, and stickers.',
+    icon: ShoppingBag,
+  }
+
+  return (
+    <div
+      ref={rootRef}
+      className={twMerge(variant === 'desktop' ? 'grid gap-4' : 'grid gap-3')}
+    >
+      <section>
+        <div className="mb-2 px-2 text-xs font-black uppercase text-gray-500 dark:text-gray-400">
+          Recent Products
+        </div>
+        <div
+          className={twMerge(
+            'grid gap-1',
+            variant === 'desktop' && 'md:grid-cols-2',
+          )}
+        >
+          {shouldLoad && loading
+            ? Array.from({ length: MERCH_MENU_PRODUCT_COUNT }, (_, index) => (
+                <div
+                  key={index}
+                  className={twMerge(
+                    'rounded-lg px-2 py-1.5',
+                    variant === 'desktop'
+                      ? 'flex w-44 items-center gap-2'
+                      : 'flex items-center gap-2',
+                  )}
+                  aria-hidden="true"
+                >
+                  <div
+                    className={twMerge(
+                      'shrink-0 animate-pulse rounded-md bg-gray-200 dark:bg-gray-800',
+                      variant === 'desktop' ? 'h-10 w-10' : 'h-11 w-11',
+                    )}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="h-3 w-3/4 animate-pulse rounded bg-gray-200 dark:bg-gray-800" />
+                    <div className="mt-1.5 h-2.5 w-1/3 animate-pulse rounded bg-gray-200 dark:bg-gray-800" />
+                  </div>
+                </div>
+              ))
+            : products.map((product) => (
+                <MerchProductLink
+                  key={product.id}
+                  product={product}
+                  onNavigate={onNavigate}
+                  variant={variant}
+                />
+              ))}
+        </div>
+      </section>
+      <MenuItemLink
+        item={allMerchItem}
+        onNavigate={onNavigate}
+        variant={variant}
+        compact
+      />
+    </div>
+  )
+}
+
+function MerchProductLink({
+  product,
+  onNavigate,
+  variant,
+}: {
+  product: ProductListItem
+  onNavigate: () => void
+  variant: 'desktop' | 'mobile'
+}) {
+  const image = product.featuredImage
+  const price = product.priceRange.minVariantPrice
+
+  return (
+    <Link
+      to="/shop/products/$handle"
+      params={{ handle: product.handle }}
+      onClick={onNavigate}
+      className={twMerge(
+        'group flex items-center gap-2 rounded-lg px-2 py-1.5 text-left hover:bg-gray-500/10 focus:bg-gray-500/10 focus:outline-none',
+        variant === 'desktop' && 'w-44',
+        variant === 'mobile' && 'py-2',
+      )}
+      preload="intent"
+    >
+      <span
+        className={twMerge(
+          'block overflow-hidden rounded-md bg-gray-100 dark:bg-gray-900',
+          variant === 'desktop' ? 'h-10 w-10 shrink-0' : 'h-11 w-11 shrink-0',
+        )}
+      >
+        {image ? (
+          <img
+            src={shopifyImageUrl(image.url, { width: 160, format: 'webp' })}
+            alt={image.altText ?? product.title}
+            className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
+            loading="lazy"
+          />
+        ) : (
+          <span className="flex h-full w-full items-center justify-center text-gray-400">
+            <ShoppingBag className="h-5 w-5" />
+          </span>
+        )}
+      </span>
+      <span className="block min-w-0">
+        <span className="block truncate text-sm font-bold text-gray-950 dark:text-white">
+          {product.title}
+        </span>
+        <span className="mt-0.5 block text-xs text-gray-600 dark:text-gray-400">
+          {formatMoney(price.amount, price.currencyCode)}
+        </span>
+      </span>
+    </Link>
+  )
+}
+
+function MenuRail({
+  rail,
+  onNavigate,
+  variant,
+}: {
+  rail: NonNullable<NavMenuGroup['rail']>
+  onNavigate: () => void
+  variant: 'desktop' | 'mobile'
+}) {
+  if (variant === 'mobile') {
+    return (
+      <div className="pt-1">
+        <MenuItemLink
+          item={rail.item}
+          onNavigate={onNavigate}
+          variant="mobile"
+          compact
+        />
+      </div>
+    )
+  }
+
+  return (
+    <aside className="w-[260px] rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-950">
+      <div className="text-xs font-black uppercase text-gray-500 dark:text-gray-400">
+        {rail.eyebrow}
+      </div>
+      <div className="mt-2 text-base font-black text-gray-950 dark:text-white">
+        {rail.title}
+      </div>
+      <p className="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-400">
+        {rail.description}
+      </p>
+      <div className="mt-4">
+        <MenuItemLink
+          item={rail.item}
+          onNavigate={onNavigate}
+          variant="desktop"
+          compact
+        />
+      </div>
+    </aside>
+  )
+}
+
+function MenuItemLink({
+  item,
+  onNavigate,
+  variant,
+  compact,
+}: {
+  item: NavMenuItem
+  onNavigate: () => void
+  variant: 'desktop' | 'mobile'
+  compact?: boolean
+}) {
+  const Icon = item.icon
+  const isExternal = isExternalLink(item.to)
+  const className = twMerge(
+    'group flex items-start gap-3 rounded-lg px-2 py-2.5 text-left',
+    'hover:bg-gray-500/10 focus:bg-gray-500/10 focus:outline-none',
+    compact && 'bg-white dark:bg-black/40',
+    variant === 'desktop' && !compact && 'w-[260px]',
+    variant === 'mobile' && 'px-2 py-3',
+  )
+  const content = (
+    <>
+      {Icon ? (
+        <span className="mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gray-100 text-gray-700 dark:bg-gray-900 dark:text-gray-300">
+          <Icon className="h-4 w-4" />
+        </span>
+      ) : null}
+      <span className="min-w-0 flex-1">
+        <span className="flex items-center gap-2">
+          <span className="font-bold text-gray-950 dark:text-white">
+            {item.label}
+          </span>
+          {item.badge ? (
+            <span className="rounded-md border border-green-500/50 px-1.5 py-0.5 text-[0.6rem] font-black uppercase leading-none text-green-600 dark:text-green-400">
+              {item.badge}
+            </span>
+          ) : null}
+          {isExternal && !item.to.startsWith('mailto:') ? (
+            <ExternalLink className="h-3 w-3 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300" />
+          ) : null}
+        </span>
+        {item.description ? (
+          <span
+            className={twMerge(
+              'mt-0.5 block text-gray-600 dark:text-gray-400',
+              variant === 'desktop' ? 'text-xs leading-4' : 'text-sm leading-5',
+            )}
+          >
+            {item.description}
+          </span>
+        ) : null}
+      </span>
     </>
   )
+
+  if (isExternal) {
+    return (
+      <a
+        href={item.to}
+        target={item.to.startsWith('mailto:') ? undefined : '_blank'}
+        rel={item.to.startsWith('mailto:') ? undefined : 'noopener noreferrer'}
+        className={className}
+        onClick={onNavigate}
+      >
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <Link
+      to={item.to}
+      hash={item.hash}
+      className={className}
+      onClick={onNavigate}
+      preload="intent"
+    >
+      {content}
+    </Link>
+  )
+}
+
+const SOCIAL_LINKS = [
+  {
+    label: 'GitHub',
+    href: 'https://github.com/TanStack',
+    Icon: GithubIcon,
+  },
+  {
+    label: 'Discord',
+    href: 'https://tlinz.com/discord',
+    Icon: DiscordIcon,
+  },
+  {
+    label: 'YouTube',
+    href: 'https://youtube.com/@tan_stack',
+    Icon: YouTubeIcon,
+  },
+  {
+    label: 'X (Twitter)',
+    href: 'https://x.com/tan_stack',
+    Icon: BrandXIcon,
+  },
+  {
+    label: 'Bluesky',
+    href: 'https://bsky.app/profile/tanstack.com',
+    Icon: BSkyIcon,
+  },
+  {
+    label: 'Instagram',
+    href: 'https://instagram.com/tan_stack',
+    Icon: InstagramIcon,
+  },
+] as const
+
+function SocialStack() {
+  const stackTop = SOCIAL_LINKS.slice(0, 3)
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <button
+          type="button"
+          aria-label="TanStack social channels"
+          title="Social channels"
+          className="inline-flex h-9 items-center px-0"
+        >
+          <span className="relative inline-flex items-center">
+            {stackTop.map(({ label, Icon }, i) => (
+              <span
+                key={label}
+                className={twMerge(
+                  'inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-600 shadow-sm transition-transform dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300',
+                  i > 0 && '-ml-3',
+                )}
+                style={{ zIndex: stackTop.length - i }}
+              >
+                <Icon className="h-3 w-3" />
+              </span>
+            ))}
+          </span>
+        </button>
+      </DropdownTrigger>
+      <DropdownContent align="end" sideOffset={8} className="min-w-44">
+        {SOCIAL_LINKS.map(({ label, href, Icon }) => (
+          <DropdownItem key={href} asChild>
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`TanStack on ${label}`}
+            >
+              <Icon className="h-3.5 w-3.5" />
+              <span>{label}</span>
+            </a>
+          </DropdownItem>
+        ))}
+      </DropdownContent>
+    </Dropdown>
+  )
 }
diff --git a/src/components/NavbarAuthControls.tsx b/src/components/NavbarAuthControls.tsx
new file mode 100644
index 000000000..a311a30e0
--- /dev/null
+++ b/src/components/NavbarAuthControls.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react'
+import { User } from 'lucide-react'
+import { Link, useNavigate } from '@tanstack/react-router'
+import { twMerge } from 'tailwind-merge'
+import {
+  Authenticated,
+  AuthLoading,
+  Unauthenticated,
+} from '~/components/AuthComponents'
+import { authClient } from '~/auth/client'
+import { ADMIN_ACCESS_CAPABILITIES } from '~/db/types'
+import { useToast } from '~/components/ToastProvider'
+import { useCapabilities } from '~/hooks/useCapabilities'
+import { useCurrentUser } from '~/hooks/useCurrentUser'
+
+const LazyAuthenticatedUserMenu = React.lazy(() =>
+  import('~/components/AuthenticatedUserMenu').then((m) => ({
+    default: m.AuthenticatedUserMenu,
+  })),
+)
+const adminCapabilities = new Set<string>(ADMIN_ACCESS_CAPABILITIES)
+
+type NavbarAuthControlsProps = {
+  className?: string
+}
+
+export function NavbarAuthControls({ className }: NavbarAuthControlsProps) {
+  const capabilities = useCapabilities()
+  const user = useCurrentUser()
+  const navigate = useNavigate()
+  const { notify } = useToast()
+
+  const canAdmin = capabilities.some((cap) => adminCapabilities.has(cap))
+
+  const canApiKeys = !!user
+
+  const loginButton = (
+    <Link
+      to="/login"
+      aria-label="Log In"
+      className={twMerge(
+        'flex shrink-0 items-center gap-1 rounded-md px-2 py-1.5 whitespace-nowrap',
+        'bg-black dark:bg-white text-white dark:text-black',
+        'hover:bg-gray-800 dark:hover:bg-gray-200',
+        'transition-colors duration-200 text-xs font-medium',
+        className,
+      )}
+    >
+      <User className="w-3.5 h-3.5" />
+      <span className="hidden min-[430px]:inline">Log In</span>
+    </Link>
+  )
+
+  const signOut = async () => {
+    await authClient.signOut()
+    navigate({ to: '/login' })
+    notify(
+      <div>
+        <div className="font-medium">Signed out</div>
+        <div className="text-gray-500 dark:text-gray-400 text-xs">
+          You have been logged out
+        </div>
+      </div>,
+    )
+  }
+
+  return (
+    <>
+      <AuthLoading>{loginButton}</AuthLoading>
+      <Unauthenticated>{loginButton}</Unauthenticated>
+      <Authenticated>
+        <React.Suspense fallback={loginButton}>
+          <LazyAuthenticatedUserMenu
+            user={user ?? null}
+            canAdmin={canAdmin}
+            canApiKeys={canApiKeys}
+            onSignOut={signOut}
+          />
+        </React.Suspense>
+      </Authenticated>
+    </>
+  )
+}
diff --git a/src/components/NavbarCartButton.tsx b/src/components/NavbarCartButton.tsx
new file mode 100644
index 000000000..4d97c6f9b
--- /dev/null
+++ b/src/components/NavbarCartButton.tsx
@@ -0,0 +1,73 @@
+import { Link, useLocation } from '@tanstack/react-router'
+import { ShoppingCart } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { useCart } from '~/hooks/useCart'
+import { useCartDrawerStore } from '~/components/shop/cartDrawerStore'
+
+const badgeClasses = twMerge(
+  'absolute -top-1 -right-1 min-w-[1.125rem] h-[1.125rem] px-1',
+  'flex items-center justify-center rounded-full',
+  'text-[0.65rem] font-bold leading-none',
+  'bg-black text-white dark:bg-white dark:text-black',
+)
+
+const buttonClasses = twMerge(
+  'relative flex items-center justify-center',
+  'h-9 w-9 rounded-lg transition-colors',
+  'hover:bg-gray-500/10 text-gray-700 dark:text-gray-300',
+)
+
+/**
+ * Cart button in the main Navbar.
+ *
+ * Behaviour:
+ *   • On /shop/* routes → opens the cart drawer (drawer is mounted in
+ *     ShopLayout, so it exists on these routes)
+ *   • Everywhere else → navigates to /shop/cart (no drawer mounted
+ *     outside the shop, and full navigation is the right UX anyway)
+ *
+ * Visibility:
+ *   • Always visible on /shop/* routes (even at zero items)
+ *   • Site-wide when the cart has at least one item
+ *   • Hidden elsewhere when the cart is empty
+ */
+export function NavbarCartButton() {
+  const { pathname } = useLocation()
+  const { totalQuantity } = useCart()
+  const openDrawer = useCartDrawerStore((s) => s.openDrawer)
+  const onShopRoute = pathname === '/shop' || pathname.startsWith('/shop/')
+
+  if (!onShopRoute && totalQuantity === 0) return null
+
+  const badge =
+    totalQuantity > 0 ? (
+      <span className={badgeClasses}>
+        {totalQuantity > 99 ? '99+' : totalQuantity}
+      </span>
+    ) : null
+
+  const label = totalQuantity > 0 ? `Cart (${totalQuantity} items)` : 'Cart'
+
+  // On shop routes: open the drawer (it's mounted in ShopLayout)
+  if (onShopRoute) {
+    return (
+      <button
+        type="button"
+        onClick={openDrawer}
+        aria-label={label}
+        className={buttonClasses}
+      >
+        <ShoppingCart className="w-4 h-4" />
+        {badge}
+      </button>
+    )
+  }
+
+  // Everywhere else: navigate to the cart page
+  return (
+    <Link to="/shop/cart" aria-label={label} className={buttonClasses}>
+      <ShoppingCart className="w-4 h-4" />
+      {badge}
+    </Link>
+  )
+}
diff --git a/src/components/NetlifyImage.tsx b/src/components/NetlifyImage.tsx
deleted file mode 100644
index e33569d46..000000000
--- a/src/components/NetlifyImage.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react'
-import { getNetlifyImageUrl } from '~/utils/netlifyImage'
-
-type NetlifyImageProps = Omit<
-  React.ImgHTMLAttributes<HTMLImageElement>,
-  'src'
-> & {
-  src: string
-  width?: number
-  height?: number
-  quality?: number
-}
-
-/**
- * Optimized image component using Netlify Image CDN.
- * @see https://docs.netlify.com/build/image-cdn/overview/
- */
-export function NetlifyImage({
-  src,
-  width,
-  height,
-  quality,
-  alt = '',
-  loading = 'lazy',
-  decoding = 'async',
-  ...props
-}: NetlifyImageProps) {
-  const optimizedSrc = React.useMemo(
-    () => getNetlifyImageUrl(src, { width, height, quality }),
-    [src, width, height, quality],
-  )
-
-  return (
-    <img
-      src={optimizedSrc}
-      width={width}
-      height={height}
-      alt={alt}
-      loading={loading}
-      decoding={decoding}
-      {...props}
-    />
-  )
-}
diff --git a/src/components/NewsletterSignup.tsx b/src/components/NewsletterSignup.tsx
new file mode 100644
index 000000000..5be7aba99
--- /dev/null
+++ b/src/components/NewsletterSignup.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { Check, LogIn, Mail } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { useToast } from '~/components/ToastProvider'
+import { useLoginModal } from '~/contexts/LoginModalContext'
+import { currentUserQueryOptions, useCurrentUser } from '~/hooks/useCurrentUser'
+import { Button } from '~/ui'
+import { addUserSignupSource } from '~/utils/users.functions'
+
+type NewsletterSignupProps = {
+  className?: string
+  buttonClassName?: string
+  noteClassName?: string
+  successClassName?: string
+  showNote?: boolean
+}
+
+export function NewsletterSignup({
+  className,
+  buttonClassName,
+  noteClassName,
+  successClassName,
+  showNote = true,
+}: NewsletterSignupProps) {
+  const user = useCurrentUser()
+  const queryClient = useQueryClient()
+  const { notify } = useToast()
+  const { openLoginModal } = useLoginModal()
+  const isSubscribed = user?.signupSources.includes('newsletter') ?? false
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: () => addUserSignupSource({ data: { source: 'newsletter' } }),
+    onSuccess: async (result) => {
+      await queryClient.invalidateQueries(currentUserQueryOptions)
+
+      notify(
+        <div>
+          <div className="font-medium">
+            {result.alreadyTagged ? 'Already subscribed' : "You're subscribed"}
+          </div>
+          <div className="text-gray-500 dark:text-gray-400 text-xs">
+            We'll use your TanStack login email.
+          </div>
+        </div>,
+      )
+    },
+    onError: () => {
+      notify(
+        <div>
+          <div className="font-medium">Subscription failed</div>
+          <div className="text-gray-500 dark:text-gray-400 text-xs">
+            Please try again in a moment
+          </div>
+        </div>,
+      )
+    },
+  })
+
+  const handleSubscribe = React.useCallback(() => {
+    if (isPending || isSubscribed) {
+      return
+    }
+
+    if (!user) {
+      openLoginModal({
+        onSuccess: () => mutate(),
+      })
+      return
+    }
+
+    mutate()
+  }, [isPending, isSubscribed, mutate, openLoginModal, user])
+
+  if (isSubscribed) {
+    return (
+      <p
+        className={twMerge(
+          'inline-flex items-center gap-1.5 text-xs font-medium text-emerald-700 dark:text-emerald-400',
+          successClassName,
+        )}
+      >
+        <Check className="h-3.5 w-3.5" />
+        You're subscribed
+      </p>
+    )
+  }
+
+  return (
+    <div className={twMerge('grid gap-2', className)}>
+      <Button
+        type="button"
+        onClick={handleSubscribe}
+        disabled={isPending}
+        className={twMerge('w-full', buttonClassName)}
+      >
+        {user ? <Mail className="h-4 w-4" /> : <LogIn className="h-4 w-4" />}
+        {isPending
+          ? 'Subscribing...'
+          : user
+            ? 'Subscribe with my login'
+            : 'Log in to subscribe'}
+      </Button>
+      {showNote ? (
+        <p
+          className={twMerge(
+            'text-xs text-gray-500 dark:text-gray-400',
+            noteClassName,
+          )}
+        >
+          We'll use your TanStack login email.
+        </p>
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
index 34c8c5106..87b880986 100644
--- a/src/components/NotFound.tsx
+++ b/src/components/NotFound.tsx
@@ -1,26 +1,446 @@
-import { Link } from '@tanstack/react-router'
-import { Ghost } from 'lucide-react'
+import * as React from 'react'
+import { Link, useRouterState } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  BookOpen,
+  Boxes,
+  Compass,
+  HelpCircle,
+  Home,
+  LifeBuoy,
+  Newspaper,
+  ShoppingBag,
+  Sparkles,
+  type LucideIcon,
+} from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { libraries, type LibrarySlim } from '~/libraries'
 import { Button } from '~/ui'
 
-export function NotFound({ children }: { children?: any }) {
+type Accent = 'amber' | 'blue' | 'cyan' | 'emerald' | 'gray' | 'rose'
+
+type NotFoundDestination = {
+  key: string
+  label: string
+  description: string
+  href: string
+  icon: LucideIcon
+  accent: Accent
+  score: number
+}
+
+const accentStyles: Record<Accent, string> = {
+  amber:
+    'border-amber-500/30 bg-amber-500/10 text-amber-700 hover:border-amber-500/60 dark:text-amber-300',
+  blue: 'border-blue-500/30 bg-blue-500/10 text-blue-700 hover:border-blue-500/60 dark:text-blue-300',
+  cyan: 'border-cyan-500/30 bg-cyan-500/10 text-cyan-700 hover:border-cyan-500/60 dark:text-cyan-300',
+  emerald:
+    'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 hover:border-emerald-500/60 dark:text-emerald-300',
+  gray: 'border-gray-300 bg-gray-100 text-gray-700 hover:border-gray-400 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-500',
+  rose: 'border-rose-500/30 bg-rose-500/10 text-rose-700 hover:border-rose-500/60 dark:text-rose-300',
+}
+
+const fallbackDestinations: NotFoundDestination[] = [
+  {
+    key: 'libraries',
+    label: 'All libraries',
+    description: 'Browse TanStack Query, Router, Table, Start, and more.',
+    href: '/libraries',
+    icon: Boxes,
+    accent: 'emerald',
+    score: 1,
+  },
+  {
+    key: 'blog',
+    label: 'Blog',
+    description: 'Read release notes, deep dives, and project updates.',
+    href: '/blog',
+    icon: Newspaper,
+    accent: 'cyan',
+    score: 1,
+  },
+  {
+    key: 'support',
+    label: 'Support',
+    description: 'Find paid support, community help, and project resources.',
+    href: '/support',
+    icon: LifeBuoy,
+    accent: 'amber',
+    score: 1,
+  },
+]
+
+const sectionDestinations: NotFoundDestination[] = [
+  {
+    key: 'shop',
+    label: 'Shop',
+    description: 'Find TanStack merch and products.',
+    href: '/shop',
+    icon: ShoppingBag,
+    accent: 'rose',
+    score: 0,
+  },
+  {
+    key: 'showcase',
+    label: 'Showcase',
+    description: 'Explore projects built with TanStack.',
+    href: '/showcase',
+    icon: Sparkles,
+    accent: 'cyan',
+    score: 0,
+  },
+  {
+    key: 'explore',
+    label: 'Explore',
+    description: 'Sail through the TanStack ecosystem.',
+    href: '/explore',
+    icon: Compass,
+    accent: 'blue',
+    score: 0,
+  },
+]
+
+function safeDecode(value: string) {
+  try {
+    return decodeURIComponent(value)
+  } catch {
+    return value
+  }
+}
+
+function getPathTokens(pathname: string) {
+  return new Set(
+    safeDecode(pathname)
+      .toLowerCase()
+      .split(/[^a-z0-9]+/g)
+      .filter(Boolean),
+  )
+}
+
+function compact(value: string) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, '')
+}
+
+function getLibraryAliases(library: LibrarySlim) {
+  const aliases = [
+    library.id,
+    library.name.replace(/^TanStack\s+/i, ''),
+    library.repo.split('/').at(-1) ?? '',
+    library.corePackageName ?? '',
+    ...(library.legacyPackages ?? []),
+  ]
+
+  return aliases
+    .flatMap((alias) => alias.split(/[^a-zA-Z0-9]+/g))
+    .map((alias) => alias.toLowerCase())
+    .filter((alias) => alias.length > 1 && alias !== 'tanstack')
+}
+
+function scoreLibraryMatch(library: LibrarySlim, pathname: string) {
+  const tokens = getPathTokens(pathname)
+  const compactPath = compact(pathname)
+  const aliases = getLibraryAliases(library)
+  let score = 0
+
+  for (const alias of aliases) {
+    if (tokens.has(alias)) {
+      score += 8
+      continue
+    }
+
+    if (alias.length > 3 && compactPath.includes(compact(alias))) {
+      score += 3
+    }
+  }
+
+  return score
+}
+
+function getLibraryDestinations(pathname: string) {
+  return libraries
+    .filter((library) => library.visible !== false)
+    .map((library) => ({
+      library,
+      score: scoreLibraryMatch(library, pathname),
+    }))
+    .filter((match) => match.score > 0)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 2)
+    .flatMap(({ library, score }) => {
+      const destinations: NotFoundDestination[] = []
+
+      if (library.to) {
+        destinations.push({
+          key: `library-${library.id}`,
+          label: library.name,
+          description: library.tagline,
+          href: library.to,
+          icon: BookOpen,
+          accent: 'emerald',
+          score: score + 2,
+        })
+      }
+
+      if (library.latestVersion) {
+        destinations.push({
+          key: `library-docs-${library.id}`,
+          label: `${library.name.replace(/^TanStack\s+/i, '')} docs`,
+          description: 'Open the current docs for this project.',
+          href: `/${library.id}/latest/docs/${library.defaultDocs ?? 'overview'}`,
+          icon: BookOpen,
+          accent: 'cyan',
+          score: score + 1,
+        })
+      }
+
+      return destinations
+    })
+}
+
+function scoreSectionDestination(
+  destination: NotFoundDestination,
+  pathname: string,
+) {
+  const tokens = getPathTokens(pathname)
+  const keywordScores: Record<string, number> = {
+    blog: 8,
+    post: 4,
+    article: 4,
+    docs: 5,
+    guide: 3,
+    library: 5,
+    libraries: 6,
+    package: 3,
+    npm: 4,
+    shop: 8,
+    cart: 4,
+    product: 4,
+    merch: 6,
+    showcase: 8,
+    example: 4,
+    examples: 4,
+    explore: 8,
+    support: 8,
+    help: 6,
+    partner: 5,
+    partners: 5,
+  }
+
+  let score = destination.score
+  for (const [keyword, value] of Object.entries(keywordScores)) {
+    if (!tokens.has(keyword)) continue
+
+    if (
+      destination.key.includes(keyword) ||
+      destination.label.toLowerCase().includes(keyword) ||
+      destination.description.toLowerCase().includes(keyword)
+    ) {
+      score += value
+    }
+  }
+
+  return score
+}
+
+function getSectionDestinations(pathname: string) {
+  const docsDestination: NotFoundDestination = {
+    key: 'docs',
+    label: 'Docs',
+    description: 'Pick a library, then jump into its current documentation.',
+    href: '/libraries',
+    icon: BookOpen,
+    accent: 'emerald',
+    score: 0,
+  }
+
+  const helpDestination: NotFoundDestination = {
+    key: 'help',
+    label: 'Support',
+    description: 'Get help when the missing page was supposed to unblock you.',
+    href: '/support',
+    icon: HelpCircle,
+    accent: 'amber',
+    score: 0,
+  }
+
+  return [docsDestination, helpDestination, ...sectionDestinations]
+    .map((destination) => ({
+      ...destination,
+      score: scoreSectionDestination(destination, pathname),
+    }))
+    .filter((destination) => destination.score > 0)
+}
+
+function getSuggestedDestinations(pathname: string) {
+  const destinations = [
+    ...getLibraryDestinations(pathname),
+    ...getSectionDestinations(pathname),
+    ...fallbackDestinations,
+  ]
+
+  const deduped = new Map<string, NotFoundDestination>()
+
+  for (const destination of destinations) {
+    const existing = deduped.get(destination.href)
+    if (!existing || destination.score > existing.score) {
+      deduped.set(destination.href, destination)
+    }
+  }
+
+  return Array.from(deduped.values())
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 5)
+}
+
+function DestinationCard({
+  destination,
+}: {
+  destination: NotFoundDestination
+}) {
+  const Icon = destination.icon
+
+  return (
+    <Link
+      to={destination.href}
+      className={twMerge(
+        'group grid min-h-28 grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 rounded-lg border p-4 transition-all hover:-translate-y-0.5 hover:shadow-md',
+        accentStyles[destination.accent],
+      )}
+    >
+      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-white/75 shadow-sm dark:bg-black/40">
+        <Icon className="h-4 w-4" />
+      </span>
+      <span className="min-w-0">
+        <span className="block text-sm font-semibold text-gray-950 dark:text-white">
+          {destination.label}
+        </span>
+        <span className="mt-1 block text-sm leading-5 text-gray-600 dark:text-gray-400">
+          {destination.description}
+        </span>
+      </span>
+      <ArrowRight className="mt-1 h-4 w-4 shrink-0 opacity-50 transition-transform group-hover:translate-x-0.5 group-hover:opacity-100" />
+    </Link>
+  )
+}
+
+export function NotFound({ children }: { children?: React.ReactNode }) {
+  const pathname = useRouterState({
+    select: (state) => state.location.pathname,
+  })
+  const decodedPathname = safeDecode(pathname)
+  const suggestions = React.useMemo(
+    () => getSuggestedDestinations(pathname),
+    [pathname],
+  )
+
   return (
-    <div className="p-4 flex-1">
-      <div className="p-8 flex flex-col items-center justify-center gap-6 bg-white/90 dark:bg-black/90 rounded-xl">
-        <h1 className="text-3xl font-black uppercase [letter-spacing:-0.02em]">
-          404 Not Found
-        </h1>
-        <Ghost className="text-[10rem] opacity-20 hover:opacity-100 animate-bounce mt-8 blur-md hover:blur-none transition-all duration-300" />
-        <p>The page you are looking for does not exist.</p>
-        {children || (
-          <p className="flex items-center gap-2 flex-wrap">
-            <Button color="emerald" onClick={() => window.history.back()}>
-              Go back
+    <div className="flex min-h-[calc(100dvh-var(--navbar-height))] flex-1 bg-gray-50 text-gray-950 dark:bg-gray-950 dark:text-white">
+      <div className="mx-auto grid w-full max-w-6xl gap-8 px-4 py-10 md:px-8 lg:grid-cols-[minmax(0,0.95fr)_minmax(360px,1.05fr)] lg:items-center lg:py-16">
+        <section className="space-y-7 lg:self-start">
+          <div className="inline-flex items-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-1 text-xs font-semibold uppercase text-gray-500 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400">
+            <Compass className="h-3.5 w-3.5" />
+            404 Not Found
+          </div>
+
+          <div className="space-y-4">
+            <h1 className="max-w-2xl text-4xl font-black leading-tight tracking-normal text-gray-950 dark:text-white md:text-6xl">
+              This route is not on the map.
+            </h1>
+            <p className="max-w-xl text-base leading-7 text-gray-600 dark:text-gray-400 md:text-lg">
+              The address might have moved, been renamed, or picked up an extra
+              segment. I checked the path and found a few places that are more
+              likely to help.
+            </p>
+          </div>
+
+          <div className="rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+            <div className="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
+              Tried path
+            </div>
+            <div className="mt-2 overflow-x-auto rounded-md bg-gray-100 px-3 py-2 font-mono text-sm text-gray-700 dark:bg-black/40 dark:text-gray-300">
+              {decodedPathname || '/'}
+            </div>
+          </div>
+
+          <div className="flex flex-wrap gap-3">
+            <Button as={Link} to="/libraries" color="emerald">
+              <Boxes className="h-4 w-4" />
+              Browse libraries
+            </Button>
+            <Button as={Link} to="/support" variant="ghost">
+              <LifeBuoy className="h-4 w-4" />
+              Support
             </Button>
-            <Button as={Link} to="/" color="cyan">
-              Start Over
+            <Button as={Link} to="/" variant="ghost">
+              <Home className="h-4 w-4" />
+              Home
             </Button>
-          </p>
-        )}
+          </div>
+
+          {children ? <div>{children}</div> : null}
+        </section>
+
+        <section className="space-y-4 lg:self-start">
+          <div className="relative min-h-[260px] overflow-hidden rounded-lg border border-gray-200/80 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+            <div
+              aria-hidden="true"
+              className="absolute inset-0 text-gray-300 opacity-20 dark:text-gray-700 dark:opacity-15"
+              style={{
+                backgroundImage:
+                  'linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px)',
+                backgroundSize: '34px 34px',
+              }}
+            />
+            <div className="relative flex items-center justify-between gap-4">
+              <div className="rounded-md border border-gray-200 bg-white/85 px-3 py-1.5 text-xs font-semibold text-gray-600 shadow-sm backdrop-blur dark:border-gray-700 dark:bg-black/50 dark:text-gray-300">
+                Route recovery
+              </div>
+              <div className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-1.5 text-xs font-semibold text-amber-700 dark:text-amber-300">
+                Detour ready
+              </div>
+            </div>
+
+            <div className="relative mt-12 space-y-6">
+              <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3">
+                <span className="h-4 w-4 rounded-full border-4 border-emerald-500 bg-white dark:bg-gray-950" />
+                <span className="h-px bg-linear-to-r from-emerald-500 via-cyan-500 to-amber-500" />
+                <span className="h-4 w-4 rounded-full border-4 border-amber-500 bg-white dark:bg-gray-950" />
+              </div>
+              <div className="grid gap-3 sm:grid-cols-3">
+                {suggestions.slice(0, 3).map((suggestion) => (
+                  <Link
+                    key={`map-${suggestion.key}`}
+                    to={suggestion.href}
+                    className="rounded-md border border-gray-200 bg-white/90 px-3 py-2 text-sm font-medium text-gray-700 shadow-sm backdrop-blur transition-colors hover:border-emerald-500/60 hover:text-emerald-700 dark:border-gray-700 dark:bg-black/45 dark:text-gray-300 dark:hover:border-emerald-400/60 dark:hover:text-emerald-300"
+                  >
+                    {suggestion.label}
+                  </Link>
+                ))}
+              </div>
+            </div>
+
+            <img
+              src="/images/ship.png"
+              alt=""
+              aria-hidden="true"
+              className="absolute -right-5 -bottom-4 w-28 rotate-[-8deg] opacity-80 drop-shadow-lg md:w-36"
+            />
+          </div>
+
+          <div>
+            <h2 className="text-sm font-semibold uppercase text-gray-500 dark:text-gray-400">
+              Best matches
+            </h2>
+            <div className="mt-3 grid gap-3">
+              {suggestions.map((suggestion) => (
+                <DestinationCard
+                  key={suggestion.key}
+                  destination={suggestion}
+                />
+              ))}
+            </div>
+          </div>
+        </section>
       </div>
     </div>
   )
diff --git a/src/components/NotesModerationList.tsx b/src/components/NotesModerationList.tsx
index bc1cd8186..13154bb68 100644
--- a/src/components/NotesModerationList.tsx
+++ b/src/components/NotesModerationList.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { Link } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
 import {
   Table,
@@ -12,7 +13,7 @@ import {
 import { PaginationControls } from './PaginationControls'
 import { Spinner } from './Spinner'
 import type { DocFeedback } from '~/db/types'
-import { calculatePoints } from '~/utils/docFeedback.client'
+import { calculatePoints } from '~/utils/docFeedback.shared'
 import { ExternalLink, TriangleAlert } from 'lucide-react'
 import { Badge } from '~/ui'
 
@@ -211,15 +212,15 @@ export function NotesModerationList({
                     </div>
                   </TableCell>
                   <TableCell onClick={(e) => e.stopPropagation()}>
-                    <a
-                      href={feedback.pagePath}
+                    <Link
+                      to={feedback.pagePath}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="inline-flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:underline"
                     >
                       <ExternalLink className="text-[10px]" />
                       View Doc
-                    </a>
+                    </Link>
                   </TableCell>
                 </TableRow>
                 {isExpanded && (
diff --git a/src/components/NotesModerationTopBar.tsx b/src/components/NotesModerationTopBar.tsx
index 2926e20ab..a4ffea9ae 100644
--- a/src/components/NotesModerationTopBar.tsx
+++ b/src/components/NotesModerationTopBar.tsx
@@ -1,4 +1,4 @@
-import { libraries } from '~/libraries'
+import { libraries, type LibraryId } from '~/libraries'
 import {
   TopBarFilter,
   FilterChip,
@@ -10,13 +10,13 @@ import { FormInput } from '~/ui'
 
 interface NotesModerationTopBarProps {
   filters: {
-    libraryId?: string
+    libraryId?: LibraryId
     isDetached?: boolean
     dateFrom?: string
     dateTo?: string
   }
   onFilterChange: (filters: {
-    libraryId?: string
+    libraryId?: LibraryId
     isDetached?: boolean
     dateFrom?: string
     dateTo?: string
@@ -43,7 +43,7 @@ export function NotesModerationTopBar({
     filters.dateTo,
   )
 
-  const getLibraryName = (id: string) =>
+  const getLibraryName = (id: LibraryId) =>
     libraries.find((l) => l.id === id)?.name || id
 
   const formatDateRange = () => {
@@ -89,7 +89,11 @@ export function NotesModerationTopBar({
           <select
             value={filters.libraryId || ''}
             onChange={(e) =>
-              onFilterChange({ libraryId: e.target.value || undefined })
+              onFilterChange({
+                libraryId: (e.target.value || undefined) as
+                  | LibraryId
+                  | undefined,
+              })
             }
             className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
           >
diff --git a/src/components/OpenSourceStats.tsx b/src/components/OpenSourceStats.tsx
index 78decf9e8..ad58a92d8 100644
--- a/src/components/OpenSourceStats.tsx
+++ b/src/components/OpenSourceStats.tsx
@@ -1,28 +1,40 @@
-import { useSuspenseQuery } from '@tanstack/react-query'
-import { BlankErrorBoundary } from './BlankErrorBoundary'
-import { Suspense } from 'react'
-import { Library } from '~/libraries'
-import { ossStatsQuery } from '~/queries/stats'
+import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import * as React from 'react'
+import { type Library } from '~/libraries'
+import {
+  homepageNpmStatsSummaryQuery,
+  ossStatsQuery,
+  recentDownloadsQuery,
+} from '~/queries/stats'
 import { useNpmDownloadCounter } from '~/hooks/useNpmDownloadCounter'
-import { Box, Download, Star, Users } from 'lucide-react'
-import { Card } from './Card'
+import { Download, Star, TrendingUp } from 'lucide-react'
+import {
+  tanStackTotalNpmStatsLibrary,
+  tanStackTotalNpmStatsSearch,
+} from '~/utils/tanstack-npm-stats'
 
-const NpmDownloadCounter = ({
-  npmData,
+function formatBillions(value: number) {
+  return `${(value / 1_000_000_000).toFixed(2)} Billion`
+}
+
+function WeeklyDownloadCounter({
+  ratePerDay,
+  weeklyDownloads,
 }: {
-  npmData: {
-    totalDownloads: number
-    ratePerDay?: number
-    updatedAt?: number
-    tag?: string
-  }
-}) => {
-  const ref = useNpmDownloadCounter(npmData)
-  // Provide initial SSR value, hook will update it on client
-  const initialCount = npmData.totalDownloads ?? 0
+  ratePerDay?: number
+  weeklyDownloads: number
+}) {
+  const startedAtRef = React.useRef(Date.now())
+  const ref = useNpmDownloadCounter({
+    totalDownloads: weeklyDownloads,
+    ratePerDay,
+    updatedAt: startedAtRef.current,
+  })
+
   return (
     <span ref={ref} style={{ fontVariantNumeric: 'tabular-nums' }}>
-      {initialCount.toLocaleString()}
+      {weeklyDownloads.toLocaleString()}
     </span>
   )
 }
@@ -37,171 +49,193 @@ function isValidMetric(value: number | undefined | null): boolean {
   )
 }
 
-function OssStatsContent({ library }: { library?: Library }) {
-  const { data: stats } = useSuspenseQuery(ossStatsQuery({ library }))
+function StatValue({
+  placeholder,
+  children,
+}: {
+  placeholder: string
+  children: React.ReactNode
+}) {
+  return (
+    <span className="inline-grid [&>*]:col-start-1 [&>*]:row-start-1">
+      <span className="invisible" aria-hidden>
+        {placeholder}
+      </span>
+      <span>{children}</span>
+    </span>
+  )
+}
+
+type BaseHomeStatLinkProps = {
+  children: React.ReactNode
+  className: string
+  gradientClassName: string
+}
 
-  const npmDownloads = stats.npm?.totalDownloads ?? 0
-  const starCount = stats.github?.starCount ?? 0
-  const contributorCount = stats.github?.contributorCount ?? 0
-  const dependentCount = stats.github?.dependentCount ?? 0
+type HomeStatLinkProps =
+  | (BaseHomeStatLinkProps & {
+      href: string
+      search?: never
+      to?: never
+    })
+  | (BaseHomeStatLinkProps & {
+      href?: never
+      search: typeof tanStackTotalNpmStatsSearch
+      to: '/stats/npm'
+    })
 
-  const hasNpmDownloads = isValidMetric(npmDownloads)
-  const hasStarCount = isValidMetric(starCount)
-  const hasContributorCount = isValidMetric(contributorCount)
-  const hasDependentCount = isValidMetric(dependentCount)
+function HomeStatLink({
+  children,
+  className,
+  gradientClassName,
+  href,
+  search,
+  to,
+}: HomeStatLinkProps) {
+  const mergedClassName = `group min-w-0 rounded-r-md border-l-2 px-4 py-2 text-left transition-opacity ${className} ${gradientClassName}`
 
-  const hasAnyData =
-    hasNpmDownloads || hasStarCount || hasContributorCount || hasDependentCount
+  if (to) {
+    return (
+      <Link to={to} search={search} className={mergedClassName}>
+        {children}
+      </Link>
+    )
+  }
 
   return (
-    <div>
-      <Card
-        className="relative p-8 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-8 items-center
-      justify-center xl:place-items-center rounded-[2rem]"
-      >
-        {!hasAnyData && (
-          <div className="absolute inset-0 z-10 flex items-center justify-center pointer-events-none">
-            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-pink-500/10 to-purple-500/10 border border-pink-500/20 dark:border-pink-500/30 backdrop-blur-sm pointer-events-auto">
-              <span className="text-2xl">🚀</span>
-              <p className="text-sm font-medium text-pink-600 dark:text-pink-400">
-                <span className="font-bold">Fresh out of the oven!</span> This
-                library just launched. Be among the first to star, download, and
-                contribute!
-              </p>
+    <a href={href} target="_blank" rel="noreferrer" className={mergedClassName}>
+      {children}
+    </a>
+  )
+}
+
+export default function OssStats({ library }: { library?: Library }) {
+  const { data: stats, isLoading } = useQuery(ossStatsQuery({ library }))
+  const { data: homepageNpmSummary, isLoading: isLoadingHomepageNpmSummary } =
+    useQuery({
+      ...homepageNpmStatsSummaryQuery(),
+      enabled: !library,
+    })
+  const { data: recentDownloads, isLoading: isLoadingRecentDownloads } =
+    useQuery({
+      ...recentDownloadsQuery({
+        library: library ?? tanStackTotalNpmStatsLibrary,
+      }),
+      enabled: Boolean(library),
+    })
+
+  const totalNpmStats = stats?.npm
+  const npmDownloads = library
+    ? (totalNpmStats?.totalDownloads ?? 0)
+    : (homepageNpmSummary?.totalDownloads ?? 0)
+  const starCount = stats?.github?.starCount ?? 0
+  const weeklyDownloads = library
+    ? (recentDownloads?.weeklyDownloads ?? 0)
+    : (homepageNpmSummary?.weeklyDownloads ?? 0)
+  const weeklyRatePerDay = library
+    ? undefined
+    : homepageNpmSummary?.weeklyRatePerDay
+
+  const hasNpmDownloads =
+    !(library ? isLoading : isLoadingHomepageNpmSummary) &&
+    isValidMetric(npmDownloads)
+  const hasStarCount = !isLoading && isValidMetric(starCount)
+  const hasWeeklyDownloads =
+    !(library ? isLoadingRecentDownloads : isLoadingHomepageNpmSummary) &&
+    isValidMetric(weeklyDownloads)
+
+  const hasAnyData = hasNpmDownloads || hasWeeklyDownloads || hasStarCount
+
+  const loading = isLoading || !stats
+  const npmLoading = library
+    ? isLoading || !totalNpmStats
+    : isLoadingHomepageNpmSummary || !homepageNpmSummary
+  const weeklyLoading = library
+    ? isLoadingRecentDownloads || !recentDownloads
+    : isLoadingHomepageNpmSummary || !homepageNpmSummary
+
+  if (!loading && !npmLoading && !weeklyLoading && !hasAnyData) {
+    return null
+  }
+
+  return (
+    <div className="mx-auto grid w-full max-w-3xl grid-cols-1 gap-4 sm:grid-cols-3">
+      {npmLoading || hasNpmDownloads ? (
+        <HomeStatLink
+          to="/stats/npm"
+          search={tanStackTotalNpmStatsSearch}
+          className="border-emerald-500 hover:text-emerald-500"
+          gradientClassName="bg-linear-to-r from-transparent to-emerald-500/5"
+        >
+          <div className="flex min-w-0 items-start gap-3">
+            <Download className="mt-1 size-5 shrink-0 transition-colors duration-200" />
+            <div className="min-w-0">
+              <div className="relative text-2xl font-black leading-none tracking-tight transition-colors duration-200">
+                <StatValue placeholder="00.00 Billion">
+                  {hasNpmDownloads ? formatBillions(npmDownloads) : null}
+                </StatValue>
+              </div>
+              <div className="mt-1 text-sm font-semibold italic text-zinc-500 transition-colors duration-200 dark:text-zinc-400">
+                NPM Downloads
+              </div>
             </div>
           </div>
-        )}
-        <a
-          href="https://www.npmjs.com/org/tanstack"
-          target="_blank"
-          rel="noreferrer"
-          className={`group flex gap-4 items-center ${
-            !hasNpmDownloads ? 'opacity-50' : ''
-          } ${!hasAnyData ? 'blur-sm' : ''}`}
+        </HomeStatLink>
+      ) : null}
+
+      {weeklyLoading || hasWeeklyDownloads ? (
+        <HomeStatLink
+          to="/stats/npm"
+          search={tanStackTotalNpmStatsSearch}
+          className="border-cyan-500 hover:text-cyan-500"
+          gradientClassName="bg-linear-to-r from-transparent to-cyan-500/5"
         >
-          <Download className="text-2xl group-hover:text-emerald-500 transition-colors duration-200" />
-          <div>
-            <div className="text-2xl font-bold opacity-80 relative group-hover:text-emerald-500 transition-colors duration-200">
-              {hasNpmDownloads ? (
-                <NpmDownloadCounter npmData={stats.npm} />
-              ) : (
-                <span>0</span>
-              )}
-            </div>
-            <div className="text-sm opacity-60 font-medium italic group-hover:text-emerald-500 transition-colors duration-200">
-              NPM Downloads
+          <div className="flex min-w-0 items-start gap-3">
+            <TrendingUp className="mt-1 size-5 shrink-0 transition-colors duration-200" />
+            <div className="min-w-0">
+              <div className="relative text-2xl font-black leading-none tracking-tight transition-colors duration-200">
+                <StatValue placeholder="00,000,000">
+                  {hasWeeklyDownloads ? (
+                    <WeeklyDownloadCounter
+                      ratePerDay={weeklyRatePerDay}
+                      weeklyDownloads={weeklyDownloads}
+                    />
+                  ) : null}
+                </StatValue>
+              </div>
+              <div className="mt-1 text-sm font-semibold italic text-zinc-500 transition-colors duration-200 dark:text-zinc-400">
+                Weekly Downloads
+              </div>
             </div>
           </div>
-        </a>
-        <a
+        </HomeStatLink>
+      ) : null}
+
+      {loading || hasStarCount ? (
+        <HomeStatLink
           href={
             library
               ? `https://github.com/${library.repo}`
               : 'https://github.com/orgs/TanStack/repositories?q=sort:stars'
           }
-          target="_blank"
-          rel="noreferrer"
-          className={`group flex gap-4 items-center ${
-            !hasStarCount ? 'opacity-50' : ''
-          } ${!hasAnyData ? 'blur-sm' : ''}`}
+          className="border-yellow-500 hover:text-yellow-500"
+          gradientClassName="bg-linear-to-r from-transparent to-yellow-500/5"
         >
-          <Star className="group-hover:text-yellow-500 text-2xl transition-colors duration-200" />
-          <div>
-            <div className="text-2xl font-bold opacity-80 leading-none group-hover:text-yellow-500 transition-colors duration-200 relative">
-              {hasStarCount ? starCount.toLocaleString() : '0'}
-            </div>
-            <div className="text-sm opacity-60 font-medium italic -mt-1 group-hover:text-yellow-500 transition-colors duration-200">
-              Stars on Github
+          <div className="flex min-w-0 items-start gap-3">
+            <Star className="mt-1 size-5 shrink-0 transition-colors duration-200" />
+            <div className="min-w-0">
+              <div className="relative text-2xl font-black leading-none tracking-tight transition-colors duration-200">
+                <StatValue placeholder="000,000">
+                  {hasStarCount ? starCount.toLocaleString() : null}
+                </StatValue>
+              </div>
+              <div className="mt-1 text-sm font-semibold italic text-zinc-500 transition-colors duration-200 dark:text-zinc-400">
+                GitHub Stars
+              </div>
             </div>
           </div>
-        </a>
-        <div
-          className={`flex gap-4 items-center ${
-            !hasContributorCount ? 'opacity-50' : ''
-          } ${!hasAnyData ? 'blur-sm' : ''}`}
-        >
-          <Users className="text-2xl" />
-          <div className="">
-            <div className="text-2xl font-bold opacity-80 relative">
-              {hasContributorCount ? contributorCount.toLocaleString() : '0'}
-            </div>
-            <div className="text-sm opacity-60 font-medium italic -mt-1">
-              Contributors on GitHub
-            </div>
-          </div>
-        </div>
-        <div
-          className={`flex gap-4 items-center ${
-            !hasDependentCount ? 'opacity-50' : ''
-          } ${!hasAnyData ? 'blur-sm' : ''}`}
-        >
-          <Box className="text-2xl" />
-          <div className="">
-            <div className="text-2xl font-bold opacity-80 relative">
-              {hasDependentCount ? dependentCount.toLocaleString() : '0'}
-            </div>
-            <div className="text-sm opacity-60 font-medium italic -mt-1">
-              Dependents on GitHub
-            </div>
-          </div>
-        </div>
-      </Card>
+        </HomeStatLink>
+      ) : null}
     </div>
   )
 }
-
-function OssStatsSkeleton() {
-  return (
-    <Card
-      className="relative p-8 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-8 items-center
-      justify-center xl:place-items-center rounded-[2rem]"
-    >
-      <div className="flex gap-4 items-center">
-        <Download className="text-2xl" />
-        <div>
-          <div className="text-2xl font-bold opacity-80 h-7 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
-          <div className="text-sm opacity-60 font-medium italic">
-            NPM Downloads
-          </div>
-        </div>
-      </div>
-      <div className="flex gap-4 items-center">
-        <Star className="text-2xl" />
-        <div>
-          <div className="text-2xl font-bold opacity-80 h-7 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
-          <div className="text-sm opacity-60 font-medium italic -mt-1">
-            Stars on Github
-          </div>
-        </div>
-      </div>
-      <div className="flex gap-4 items-center">
-        <Users className="text-2xl" />
-        <div>
-          <div className="text-2xl font-bold opacity-80 h-7 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
-          <div className="text-sm opacity-60 font-medium italic -mt-1">
-            Contributors on GitHub
-          </div>
-        </div>
-      </div>
-      <div className="flex gap-4 items-center">
-        <Box className="text-2xl" />
-        <div>
-          <div className="text-2xl font-bold opacity-80 h-7 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
-          <div className="text-sm opacity-60 font-medium italic -mt-1">
-            Dependents on GitHub
-          </div>
-        </div>
-      </div>
-    </Card>
-  )
-}
-
-export default function OssStats({ library }: { library?: Library }) {
-  return (
-    <Suspense fallback={<OssStatsSkeleton />}>
-      <BlankErrorBoundary>
-        <OssStatsContent library={library} />
-      </BlankErrorBoundary>
-    </Suspense>
-  )
-}
diff --git a/src/components/OptimizedImage.tsx b/src/components/OptimizedImage.tsx
new file mode 100644
index 000000000..5dab57cea
--- /dev/null
+++ b/src/components/OptimizedImage.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react'
+import {
+  getOptimizedImageUrl,
+  type ImageOptimizationOptions,
+} from '~/utils/optimizedImage'
+
+type OptimizedImageProps = Omit<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  'src'
+> &
+  ImageOptimizationOptions & {
+    src: string
+  }
+
+export function OptimizedImage({
+  fit,
+  format,
+  height,
+  quality,
+  src,
+  width,
+  alt = '',
+  loading = 'lazy',
+  decoding = 'async',
+  ...props
+}: OptimizedImageProps) {
+  const optimizedSrc = React.useMemo(
+    () => getOptimizedImageUrl(src, { fit, format, height, quality, width }),
+    [fit, format, height, quality, src, width],
+  )
+
+  return (
+    <img
+      src={optimizedSrc}
+      width={width}
+      height={height}
+      alt={alt}
+      loading={loading}
+      decoding={decoding}
+      {...props}
+    />
+  )
+}
diff --git a/src/components/PaginationControls.tsx b/src/components/PaginationControls.tsx
index 786b8e007..ece3cca9e 100644
--- a/src/components/PaginationControls.tsx
+++ b/src/components/PaginationControls.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 
 interface PaginationControlsProps {
@@ -31,6 +32,8 @@ export function PaginationControls({
   itemLabel = 'items',
   sticky = false,
 }: PaginationControlsProps) {
+  const pageSizeSelectId = `${React.useId()}-page-size`
+
   const goToPreviousPage = () => {
     if (canGoPrevious) {
       onPageChange(currentPage - 1)
@@ -83,7 +86,10 @@ export function PaginationControls({
   }
 
   const content = (
-    <div className="flex items-center justify-between flex-wrap gap-3">
+    <nav
+      aria-label={`${itemLabel} pagination`}
+      className="flex items-center justify-between flex-wrap gap-3"
+    >
       <div className="text-sm text-gray-600 dark:text-gray-400">
         Showing{' '}
         <span className="font-semibold text-gray-900 dark:text-white">
@@ -109,12 +115,13 @@ export function PaginationControls({
         {showPageSizeSelector && (
           <>
             <label
-              htmlFor="pageSize"
+              htmlFor={pageSizeSelectId}
               className="text-sm text-gray-600 dark:text-gray-400"
             >
               Per page:
             </label>
             <select
+              id={pageSizeSelectId}
               value={pageSize}
               onChange={(e) => {
                 const next = parseInt(e.target.value, 10)
@@ -133,6 +140,7 @@ export function PaginationControls({
 
         <div className="flex gap-1 items-center">
           <button
+            type="button"
             onClick={goToPreviousPage}
             disabled={!canGoPrevious}
             className="flex items-center px-2 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 hover:text-gray-900 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 gap-1 transition-colors"
@@ -158,6 +166,7 @@ export function PaginationControls({
               const isActive = pageNum === currentPage
               return (
                 <button
+                  type="button"
                   key={pageNum}
                   onClick={() => onPageChange(pageNum as number)}
                   className={
@@ -173,6 +182,7 @@ export function PaginationControls({
           </div>
 
           <button
+            type="button"
             onClick={goToNextPage}
             disabled={!canGoNext}
             className="flex items-center px-2 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 hover:text-gray-900 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 gap-1 transition-colors"
@@ -182,7 +192,7 @@ export function PaginationControls({
           </button>
         </div>
       </div>
-    </div>
+    </nav>
   )
 
   if (sticky) {
diff --git a/src/components/PartnersGrid.tsx b/src/components/PartnersGrid.tsx
index 474b550ce..de55c8292 100644
--- a/src/components/PartnersGrid.tsx
+++ b/src/components/PartnersGrid.tsx
@@ -1,44 +1,187 @@
 import * as React from 'react'
-import { partners as allPartners, PartnerImage } from '~/utils/partners'
+import {
+  partners as allPartners,
+  PartnerImage,
+  partnerTierFlares,
+  partnerTierLabels,
+  type PartnerTier,
+} from '~/utils/partners'
+import {
+  getPartnerPlacementAnalyticsMetadata,
+  getPartnerTierGroupsForPlacement,
+  type PartnerPlacementContext,
+} from '~/utils/partner-placement'
+import { usePartnerPlacementContext } from '~/utils/usePartnerPlacementContext'
 import { Card } from '~/components/Card'
+import {
+  trackEvent,
+  useTrackedImpression,
+  type PartnerPlacement,
+} from '~/utils/analytics'
 
 type PartnerItem = (typeof allPartners)[number]
 
 type PartnersGridProps = {
+  analyticsPlacement?: PartnerPlacement
   partnersList?: PartnerItem[]
 }
 
-export function PartnersGrid({ partnersList }: PartnersGridProps) {
+const tierLayout: Record<
+  PartnerTier,
+  {
+    flexBasis: string
+    minHeight: string
+    logoMaxWidth: string
+    logoMaxHeight: string
+    padding: string
+  }
+> = {
+  gold: {
+    flexBasis: 'basis-full sm:basis-1/2',
+    minHeight: 'min-h-[220px]',
+    logoMaxWidth: 'max-w-[400px]',
+    logoMaxHeight: 'max-h-[120px]',
+    padding: 'p-12',
+  },
+  silver: {
+    flexBasis: 'basis-full sm:basis-1/3 lg:basis-1/4',
+    minHeight: 'min-h-[130px]',
+    logoMaxWidth: 'max-w-[180px]',
+    logoMaxHeight: 'max-h-[56px]',
+    padding: 'p-6',
+  },
+  bronze: {
+    flexBasis: 'basis-1/2 sm:basis-1/4 lg:basis-1/5 xl:basis-1/6',
+    minHeight: 'min-h-[100px]',
+    logoMaxWidth: 'max-w-[110px]',
+    logoMaxHeight: 'max-h-[36px]',
+    padding: 'p-4',
+  },
+}
+
+function PartnerGridItem({
+  analyticsPlacement,
+  index,
+  placementContext,
+  partner,
+}: {
+  analyticsPlacement: PartnerPlacement
+  index: number
+  placementContext: PartnerPlacementContext
+  partner: PartnerItem
+}) {
+  const analyticsMetadata = getPartnerPlacementAnalyticsMetadata(
+    partner,
+    placementContext,
+  )
+  const ref = useTrackedImpression<'partner_viewed', HTMLAnchorElement>({
+    event: 'partner_viewed',
+    props: {
+      partner_id: partner.id,
+      ...analyticsMetadata,
+      placement: analyticsPlacement,
+      slot_index: index,
+    },
+  })
+
+  const layout = tierLayout[partner.tier ?? 'bronze']
+
+  return (
+    <a
+      ref={ref}
+      href={partner.href}
+      target="_blank"
+      rel="noreferrer"
+      className={`flex items-center justify-center
+        border-r border-b border-gray-200 dark:border-gray-800
+        hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors duration-150 ease-out
+        ${layout.flexBasis} ${layout.minHeight} ${layout.padding}`}
+      onClick={() => {
+        let destinationHost: string | undefined
+        try {
+          destinationHost = new URL(partner.href).host
+        } catch {
+          // Bad/relative href — track without host rather than dropping.
+        }
+        trackEvent('partner_clicked', {
+          partner_id: partner.id,
+          placement: analyticsPlacement,
+          destination: 'external',
+          destination_host: destinationHost,
+          ...analyticsMetadata,
+          slot_index: index,
+        })
+      }}
+    >
+      <div
+        className={`w-full flex items-center justify-center ${layout.logoMaxWidth}`}
+      >
+        <PartnerImage
+          className={`w-full object-contain ${layout.logoMaxHeight}`}
+          config={partner.image}
+          alt={partner.name}
+        />
+      </div>
+    </a>
+  )
+}
+
+export function PartnersGrid({
+  analyticsPlacement = 'grid',
+  partnersList,
+}: PartnersGridProps) {
   const items = (partnersList ?? allPartners).filter(
     (partner) => partner.status === 'active',
   )
 
-  // Sort by score descending so larger partners come first
-  const sortedItems = [...items].sort((a, b) => b.score - a.score)
+  const placementContext = usePartnerPlacementContext({
+    orderStrategy: 'tier-rotated',
+    surface: analyticsPlacement,
+  })
+
+  const tiersWithPartners = getPartnerTierGroupsForPlacement(
+    items,
+    placementContext,
+  )
+
+  let slotIndex = 0
 
   return (
-    <Card className="overflow-hidden">
-      <div className="flex flex-wrap justify-center items-stretch -mr-px -mb-px">
-        {sortedItems.map((partner) => {
-          // Size the cell based on score
-          const width = Math.max(Math.round(120 + 280 * partner.score), 150)
-
-          return (
-            <a
-              key={partner.name}
-              href={partner.href}
-              target="_blank"
-              rel="noreferrer"
-              className="flex items-center justify-center p-6
-                border-r border-b border-gray-200 dark:border-gray-800
-                hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors duration-150 ease-out"
-              style={{ width, flexGrow: partner.score }}
-            >
-              <PartnerImage config={partner.image} alt={partner.name} />
-            </a>
-          )
-        })}
-      </div>
-    </Card>
+    <div className="flex flex-col gap-3">
+      {tiersWithPartners.map((row) => {
+        const flare = partnerTierFlares[row.tier]
+        return (
+          <Card
+            key={row.tier}
+            className={`overflow-hidden rounded-none rounded-l-sm rounded-r-2xl bg-linear-to-b ${flare.gradientStops}`}
+          >
+            <div className="ml-1.5 bg-white dark:bg-gray-900">
+              <div className="px-4 pt-3 pb-2 border-b border-gray-200 dark:border-gray-800 flex items-center gap-2">
+                <span className={flare.iconColor}>{flare.icon}</span>
+                <span
+                  className={`text-[10px] uppercase tracking-[0.18em] font-semibold ${flare.labelColor}`}
+                >
+                  {partnerTierLabels[row.tier]}
+                </span>
+              </div>
+              <div className="flex flex-wrap items-stretch -mr-px -mb-px">
+                {row.partners.map((partner) => {
+                  const index = slotIndex++
+                  return (
+                    <PartnerGridItem
+                      key={partner.id}
+                      analyticsPlacement={analyticsPlacement}
+                      index={index}
+                      placementContext={placementContext}
+                      partner={partner}
+                    />
+                  )
+                })}
+              </div>
+            </div>
+          </Card>
+        )
+      })}
+    </div>
   )
 }
diff --git a/src/components/PartnersSection.tsx b/src/components/PartnersSection.tsx
index effa88b64..23bfdfe4c 100644
--- a/src/components/PartnersSection.tsx
+++ b/src/components/PartnersSection.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { Link } from '@tanstack/react-router'
-import { partners } from '~/utils/partners'
 import { PartnersGrid } from './PartnersGrid'
 import { PartnershipCallout } from './PartnershipCallout'
 import { LibraryId } from '~/libraries'
@@ -21,36 +20,28 @@ export function PartnersSection({
     throw new Error('Library ID is required')
   }
 
-  const filtered = partners.filter((p) =>
-    libraryId
-      ? p.libraries?.includes(libraryId as any) && p.status === 'active'
-      : p.status === 'active',
-  )
-
   return (
     <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto mx-auto max-w-full">
-      {filtered.length ? (
-        <div className="space-y-8">
-          <h3 className="text-3xl font-bold">{title}</h3>
-          <PartnersGrid />
-          <PartnershipCallout libraryId={libraryId} />
-          {showPreviousLink ? (
-            <div className="flex justify-center mt-6">
-              <Button
-                as={Link}
-                to="/partners"
-                search={
-                  (libraryId
-                    ? { libraries: [libraryId], status: 'inactive' }
-                    : { status: 'inactive' }) as any
-                }
-              >
-                View Previous Partners
-              </Button>
-            </div>
-          ) : null}
-        </div>
-      ) : null}
+      <div className="space-y-8">
+        <h3 className="text-3xl font-bold">{title}</h3>
+        <PartnersGrid analyticsPlacement="library_grid" />
+        <PartnershipCallout libraryId={libraryId} />
+        {showPreviousLink ? (
+          <div className="flex justify-center mt-6">
+            <Button
+              as={Link}
+              to="/partners"
+              search={
+                (libraryId
+                  ? { libraries: [libraryId], status: 'inactive' }
+                  : { status: 'inactive' }) as any
+              }
+            >
+              View Previous Partners
+            </Button>
+          </div>
+        ) : null}
+      </div>
     </div>
   )
 }
diff --git a/src/components/PartnershipCallout.tsx b/src/components/PartnershipCallout.tsx
index cb815ec83..e91cab77c 100644
--- a/src/components/PartnershipCallout.tsx
+++ b/src/components/PartnershipCallout.tsx
@@ -1,6 +1,7 @@
 import { getLibrary, LibraryId } from '~/libraries'
 import { HeartHandshake } from 'lucide-react'
 import { Card } from './Card'
+import { trackEvent } from '~/utils/analytics'
 
 interface PartnershipCalloutProps {
   libraryId: LibraryId
@@ -27,6 +28,11 @@ export function PartnershipCallout({ libraryId }: PartnershipCalloutProps) {
         <a
           href={`mailto:partners@tanstack.com?subject=TanStack ${library.name} Partnership`}
           className="text-blue-500 uppercase font-black text-sm"
+          onClick={() => {
+            trackEvent('partner_inquiry_started', {
+              placement: 'library_callout',
+            })
+          }}
         >
           Let's chat
         </a>
diff --git a/src/components/PlaceholderSponsorPack.tsx b/src/components/PlaceholderSponsorPack.tsx
index e6f484e5a..cab22be9a 100644
--- a/src/components/PlaceholderSponsorPack.tsx
+++ b/src/components/PlaceholderSponsorPack.tsx
@@ -1,105 +1,32 @@
-import React from 'react'
-import { Pack, hierarchy } from '@visx/hierarchy'
-import { ParentSize } from './ParentSize'
-
-// Generate realistic placeholder sponsor data with curved distribution
-// Simulates real sponsor ecosystems: few large sponsors, many small ones
-const generatePlaceholderSponsors = () => {
-  const sponsors = []
-  const totalSponsors = 150 // More realistic number
-
-  for (let i = 0; i < totalSponsors; i++) {
-    const normalizedIndex = i / (totalSponsors - 1)
-    const size = Math.pow(1 - normalizedIndex, 10)
-
-    const jitter = (Math.random() - 0.5) * 0.1
-    const finalSize = Math.max(0.01, Math.min(1.0, size + jitter))
-
-    sponsors.push({
-      login: `placeholder-${i + 1}`,
-      name: '',
-      imageUrl: '',
-      linkUrl: '',
-      size: finalSize,
-    })
+function createBubbleStyle(index: number) {
+  const left = ((index * 37) % 100) / 100
+  const top = ((index * 61) % 100) / 100
+  const size = 20 + ((index * 17) % 90)
+  const opacity = 0.14 + ((index * 13) % 12) / 100
+
+  return {
+    left: `${8 + left * 84}%`,
+    top: `${6 + top * 88}%`,
+    width: `${size}px`,
+    height: `${size}px`,
+    opacity,
   }
-
-  // Sort by size descending (largest first) like real sponsor data
-  return sponsors.sort((a, b) => b.size - a.size)
 }
 
 export default function PlaceholderSponsorPack() {
-  const sponsors = React.useMemo(() => generatePlaceholderSponsors(), [])
-
-  const pack = React.useMemo(
-    () => ({
-      children: sponsors,
-      name: 'root',
-      radius: 0,
-      distance: 0,
-    }),
-    [sponsors],
-  )
-
-  const root = React.useMemo(
-    () =>
-      hierarchy(pack)
-        .sum((d) => 0.0007 + ((d as { size?: number }).size || 0))
-        .sort(
-          (a, b) =>
-            ((b.data as { size?: number })?.size ?? 0) -
-            ((a.data as { size?: number })?.size ?? 0),
-        ),
-    [pack],
-  )
-
   return (
-    <ParentSize>
-      {({ width = 800 }) => {
-        return width < 10 ? null : (
+    <div className="relative w-full h-full overflow-hidden rounded-[2rem] bg-linear-to-br from-gray-100/80 via-white to-gray-50 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
+      {Array.from({ length: 48 }).map((_, index) => {
+        const style = createBubbleStyle(index)
+
+        return (
           <div
-            style={{
-              width,
-              height: width,
-              position: 'relative',
-            }}
-          >
-            <style
-              dangerouslySetInnerHTML={{
-                __html: `
-                .placeholder-bubble {
-                  background: rgba(156, 163, 175, 0.3);
-                  transform: translate(-50%, -50%);
-                }
-              `,
-              }}
-            />
-            <Pack root={root} size={[width, width]} padding={width * 0.005}>
-              {(packData) => {
-                const circles = packData.descendants().slice(1) // skip first layer
-                return (
-                  <div>
-                    {[...circles].reverse().map((circle, i) => {
-                      return (
-                        <div
-                          key={`placeholder-circle-${i}`}
-                          className="placeholder-bubble absolute rounded-full border border-gray-300/20 dark:border-gray-600/20"
-                          style={{
-                            left: circle.x,
-                            top: circle.y,
-                            width: circle.r * 2,
-                            height: circle.r * 2,
-                          }}
-                        />
-                      )
-                    })}
-                  </div>
-                )
-              }}
-            </Pack>
-          </div>
+            key={index}
+            className="absolute -translate-x-1/2 -translate-y-1/2 rounded-full border border-gray-300/30 bg-gray-300/40 dark:border-gray-700/40 dark:bg-gray-700/30"
+            style={style}
+          />
         )
-      }}
-    </ParentSize>
+      })}
+    </div>
   )
 }
diff --git a/src/components/QueryGGBanner.tsx b/src/components/QueryGGBanner.tsx
index 69264b82c..9b6d899a8 100644
--- a/src/components/QueryGGBanner.tsx
+++ b/src/components/QueryGGBanner.tsx
@@ -38,13 +38,33 @@ export function QueryGGBanner() {
           href="https://query.gg?s=tanstack"
           className="xl:w-7/12 pb-4 grid grid-cols-[70px_1fr_70px] sm:grid-cols-[100px_1fr_100px] md:grid-cols-[140px_1fr_140px] xl:grid-cols-[110px_1fr] 2xl:grid-cols-[150px_1fr]"
         >
-          <img src={cornerTopLeft} alt="sun" className="" />
+          <img
+            src={cornerTopLeft}
+            alt="sun"
+            width={242}
+            height={232}
+            loading="lazy"
+            decoding="async"
+            className="h-auto w-full"
+          />
           <img
             src={headerCourse}
             alt="Query.gg - The Official React Query Course"
-            className="-mt-px w-10/12 max-w-[350px] justify-self-center"
+            width={316}
+            height={136}
+            loading="lazy"
+            decoding="async"
+            className="-mt-px h-auto w-10/12 max-w-[350px] justify-self-center"
+          />
+          <img
+            src={cornerTopRight}
+            alt="moon"
+            width={242}
+            height={232}
+            loading="lazy"
+            decoding="async"
+            className="h-auto w-full xl:hidden"
           />
-          <img src={cornerTopRight} alt="moon" className="xl:hidden" />
         </a>
         <div className="hidden xl:block w-[80px] mr-[-55px] bg-[#231f20] border-4 border-r-0 border-[#f9f4da] border-s-[#f9f4da] shadow-[-4px_0_0_#231f20] -skew-x-15 z-0"></div>
         <div className="xl:w-5/12 py-2 xl:pb-0 grid xl:grid-cols-[1fr_90px] 2xl:grid-cols-[1fr_120px] justify-center bg-[#231f20] border-2 xl:border-4 xl:border-l-0 border-[#f9f4da] text-[#f9f4da] z-10">
@@ -60,7 +80,11 @@ export function QueryGGBanner() {
           <img
             src={cornerFishBottomRight}
             alt="mutated fish"
-            className="hidden xl:block self-end"
+            width={242}
+            height={232}
+            loading="lazy"
+            decoding="async"
+            className="hidden h-auto w-full self-end xl:block"
           />
         </div>
       </div>
diff --git a/src/components/RecentPostsWidget.tsx b/src/components/RecentPostsWidget.tsx
new file mode 100644
index 000000000..189b47312
--- /dev/null
+++ b/src/components/RecentPostsWidget.tsx
@@ -0,0 +1,86 @@
+import { Link } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { fetchRecentPosts, type RecentPost } from '~/utils/blog.functions'
+import { formatPublishedDate } from '~/utils/blog-format'
+
+type RecentPostsWidgetProps = {
+  posts?: ReadonlyArray<RecentPost>
+  /** Set to false to skip the client fetch when the widget is rendered but not visible (e.g. hidden below a CSS breakpoint). Ignored when `posts` is provided. */
+  enabled?: boolean
+}
+
+function RecentPostsList({ posts }: { posts: ReadonlyArray<RecentPost> }) {
+  return (
+    <div className="flex flex-col">
+      <div className="flex items-center justify-between border-b border-gray-500/20 px-3 py-2">
+        <Link
+          to="/blog"
+          className="font-medium opacity-60 hover:opacity-100 text-xs"
+        >
+          Latest Posts
+        </Link>
+      </div>
+      <div className="flex flex-col divide-y divide-gray-500/10">
+        {posts.map((post) => (
+          <Link
+            key={post.slug}
+            to="/blog/$"
+            params={{ _splat: post.slug } as never}
+            className="flex flex-col gap-0.5 px-3 py-2.5
+              hover:bg-gray-500/5 transition-colors duration-150"
+          >
+            <span className="text-xs font-medium leading-snug line-clamp-2">
+              {post.title}
+            </span>
+            <span className="text-[10px] text-gray-500 dark:text-gray-500">
+              {formatPublishedDate(post.published)}
+            </span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function RecentPostsSkeleton() {
+  return (
+    <div className="flex flex-col">
+      <div className="flex items-center justify-between border-b border-gray-500/20 px-3 py-2">
+        <Link
+          to="/blog"
+          className="font-medium opacity-60 hover:opacity-100 text-xs"
+        >
+          Latest Posts
+        </Link>
+      </div>
+      <div className="flex flex-col divide-y divide-gray-500/10">
+        {Array.from({ length: 3 }).map((_, index) => (
+          <div key={`recent-post-skeleton-${index}`} className="px-3 py-2.5">
+            <div className="h-3.5 w-full rounded bg-gray-200/70 dark:bg-gray-800/70" />
+            <div className="mt-2 h-2.5 w-20 rounded bg-gray-100 dark:bg-gray-900" />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function RecentPostsWidget({
+  posts,
+  enabled = true,
+}: RecentPostsWidgetProps) {
+  const recentPostsQuery = useQuery({
+    queryKey: ['recentPosts'],
+    queryFn: () => fetchRecentPosts(),
+    enabled: posts === undefined && enabled,
+    staleTime: 1000 * 60 * 5,
+  })
+
+  const visiblePosts = posts ?? recentPostsQuery.data
+
+  if (!visiblePosts) {
+    return <RecentPostsSkeleton />
+  }
+
+  return <RecentPostsList posts={visiblePosts} />
+}
diff --git a/src/components/RedirectVersionBanner.tsx b/src/components/RedirectVersionBanner.tsx
index 6ca077dbe..eb06fe9af 100644
--- a/src/components/RedirectVersionBanner.tsx
+++ b/src/components/RedirectVersionBanner.tsx
@@ -29,7 +29,7 @@ export function RedirectVersionBanner(props: {
         <p className="block">
           You are currently reading <strong>{version}</strong> docs. Redirect to{' '}
           <Link
-            to={activeMatch.fullPath}
+            to={activeMatch.fullPath as never}
             params={{ version: 'latest' } as never}
             className="font-bold underline"
           >
@@ -40,7 +40,7 @@ export function RedirectVersionBanner(props: {
         <div className="flex gap-2 flex-col lg:flex-row items-center">
           <Button
             as={Link}
-            to={activeMatch.fullPath}
+            to={activeMatch.fullPath as never}
             params={{ version: 'latest' } as never}
             replace
             variant="secondary"
diff --git a/src/components/RightRail.tsx b/src/components/RightRail.tsx
new file mode 100644
index 000000000..25d0c6b0d
--- /dev/null
+++ b/src/components/RightRail.tsx
@@ -0,0 +1,270 @@
+import * as React from 'react'
+import { Link } from '@tanstack/react-router'
+import { twMerge } from 'tailwind-merge'
+import {
+  PartnerImage,
+  partnerTierFlares,
+  partnerTierLabels,
+  type Partner,
+  type PartnerTier,
+} from '~/utils/partners'
+import {
+  getPartnerPlacementAnalyticsMetadata,
+  getPartnerTierGroupsForPlacement,
+  type PartnerPlacementContext,
+} from '~/utils/partner-placement'
+import { usePartnerPlacementContext } from '~/utils/usePartnerPlacementContext'
+import {
+  trackEvent,
+  useTrackedImpression,
+  type PartnerPlacement,
+} from '~/utils/analytics'
+
+type RailPartner = {
+  category: Partner['category']
+  id: string
+  name: string
+  href: string
+  score: number
+  tier?: PartnerTier
+  image: Parameters<typeof PartnerImage>[0]['config']
+}
+
+type RightRailProps = {
+  children: React.ReactNode
+  className?: string
+  breakpoint?: 'sm' | 'md'
+  stickyOffset?: 'navbar' | 'docs-tabs'
+}
+
+export function RightRail({
+  children,
+  className,
+  breakpoint = 'sm',
+  stickyOffset = 'navbar',
+}: RightRailProps) {
+  const stickyTopClass =
+    stickyOffset === 'docs-tabs'
+      ? breakpoint === 'md'
+        ? 'md:top-[calc(var(--navbar-height)+var(--docs-tabs-height,0px))]'
+        : 'sm:top-[calc(var(--navbar-height)+var(--docs-tabs-height,0px))]'
+      : breakpoint === 'md'
+        ? 'md:top-[var(--navbar-height)]'
+        : 'sm:top-[var(--navbar-height)]'
+  const stickyMaxHeightClass =
+    stickyOffset === 'docs-tabs'
+      ? breakpoint === 'md'
+        ? 'md:max-h-[calc(100dvh-var(--navbar-height)-var(--docs-tabs-height,0px))]'
+        : 'sm:max-h-[calc(100dvh-var(--navbar-height)-var(--docs-tabs-height,0px))]'
+      : breakpoint === 'md'
+        ? 'md:max-h-[calc(100dvh-var(--navbar-height))]'
+        : 'sm:max-h-[calc(100dvh-var(--navbar-height))]'
+  const wrapperBreakpointClass =
+    breakpoint === 'md'
+      ? 'w-full md:w-[300px] shrink-0 md:sticky hidden md:block'
+      : 'w-full sm:w-[300px] shrink-0 sm:sticky hidden sm:block'
+
+  const innerBreakpointClass = breakpoint === 'md' ? 'md:sticky' : 'sm:sticky'
+
+  return (
+    <div className={twMerge(wrapperBreakpointClass, stickyTopClass, className)}>
+      <div
+        className={twMerge(
+          innerBreakpointClass,
+          stickyTopClass,
+          stickyMaxHeightClass,
+          'ml-auto flex flex-col gap-4 pb-4 max-w-full overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&>*]:shrink-0',
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+const railTierLayout: Record<
+  PartnerTier,
+  {
+    flexBasis: string
+    minHeight: string
+    logoMaxWidth: string
+    logoMaxHeight: string
+    padding: string
+  }
+> = {
+  gold: {
+    flexBasis: 'basis-full',
+    minHeight: 'min-h-[72px]',
+    logoMaxWidth: 'max-w-[180px]',
+    logoMaxHeight: 'max-h-[40px]',
+    padding: 'px-4 py-3',
+  },
+  silver: {
+    flexBasis: 'basis-1/2',
+    minHeight: 'min-h-[60px]',
+    logoMaxWidth: 'max-w-[100px]',
+    logoMaxHeight: 'max-h-[26px]',
+    padding: 'px-2.5 py-2.5',
+  },
+  bronze: {
+    flexBasis: 'basis-1/3',
+    minHeight: 'min-h-[56px]',
+    logoMaxWidth: 'max-w-[70px]',
+    logoMaxHeight: 'max-h-[22px]',
+    padding: 'px-2 py-2',
+  },
+}
+
+export function PartnersRail({
+  analyticsPlacement,
+  partners,
+  title = 'Partners',
+  titleTo = '/partners',
+}: {
+  analyticsPlacement: PartnerPlacement
+  partners: Array<RailPartner>
+  title?: string
+  titleTo?: '/partners'
+}) {
+  const placementContext = usePartnerPlacementContext({
+    orderStrategy: 'tier-rotated',
+    surface: analyticsPlacement,
+  })
+
+  const rowsByTier = getPartnerTierGroupsForPlacement(
+    partners,
+    placementContext,
+  )
+
+  let slotIndex = 0
+
+  return (
+    <div className="group/rail flex flex-col border-l border-gray-500/20 rounded-bl-lg overflow-hidden w-full">
+      <div className="w-full flex gap-2 justify-between items-center border-b border-gray-500/20 px-3 py-2">
+        <Link
+          className="font-medium opacity-60 hover:opacity-100 text-xs"
+          to={titleTo}
+        >
+          {title}
+        </Link>
+        <a
+          href="https://docs.google.com/document/d/1Hg2MzY2TU6U3hFEZ3MLe2oEOM3JS4-eByti3kdJU3I8"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="font-medium opacity-60 hover:opacity-100 text-xs hover:underline"
+          onClick={() => {
+            trackEvent('partner_inquiry_started', {
+              placement: analyticsPlacement,
+            })
+          }}
+        >
+          Become a Partner
+        </a>
+      </div>
+      {rowsByTier.map((row) => {
+        const flare = partnerTierFlares[row.tier]
+        return (
+          <div
+            key={row.tier}
+            className="relative flex flex-wrap items-stretch w-full"
+          >
+            {/* Tier-colored top line */}
+            <div
+              className={`absolute top-0 left-0 right-0 h-1 bg-linear-to-r ${flare.gradientStops}`}
+            />
+            {/* Absolute top-left tier label */}
+            <div
+              className={`absolute top-0.5 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-1 px-1.5 py-px rounded-full bg-white dark:bg-gray-900 z-10 ${flare.labelColor} text-[8px] uppercase tracking-[0.14em] font-semibold`}
+            >
+              <span className={flare.iconColor}>{flare.icon}</span>
+              <span>{partnerTierLabels[row.tier]}</span>
+            </div>
+            {row.partners.map((partner) => {
+              const index = slotIndex++
+              return (
+                <PartnersRailItem
+                  key={partner.id}
+                  analyticsPlacement={analyticsPlacement}
+                  index={index}
+                  placementContext={placementContext}
+                  partner={partner}
+                />
+              )
+            })}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function PartnersRailItem({
+  analyticsPlacement,
+  index,
+  placementContext,
+  partner,
+}: {
+  analyticsPlacement: PartnerPlacement
+  index: number
+  placementContext: PartnerPlacementContext
+  partner: RailPartner
+}) {
+  const layout = railTierLayout[partner.tier ?? 'bronze']
+  const analyticsMetadata = getPartnerPlacementAnalyticsMetadata(
+    partner,
+    placementContext,
+  )
+  const ref = useTrackedImpression<'partner_viewed', HTMLAnchorElement>({
+    event: 'partner_viewed',
+    props: {
+      partner_id: partner.id,
+      placement: analyticsPlacement,
+      ...analyticsMetadata,
+      slot_index: index,
+    },
+  })
+
+  return (
+    <a
+      ref={ref}
+      href={partner.href}
+      target="_blank"
+      rel="noreferrer"
+      className={twMerge(
+        'flex items-center justify-center overflow-hidden border-r border-b border-gray-500/20 hover:bg-gray-500/10 transition-colors duration-150 ease-out',
+        layout.flexBasis,
+        layout.minHeight,
+        layout.padding,
+      )}
+      onClick={() => {
+        let destinationHost: string | undefined
+        try {
+          destinationHost = new URL(partner.href).host
+        } catch {
+          // Bad/relative href — track without host rather than dropping.
+        }
+        trackEvent('partner_clicked', {
+          partner_id: partner.id,
+          placement: analyticsPlacement,
+          destination: 'external',
+          destination_host: destinationHost,
+          ...analyticsMetadata,
+          slot_index: index,
+        })
+      }}
+    >
+      <div
+        className={twMerge(
+          'w-full flex items-center justify-center mx-auto grayscale brightness-90 group-hover/rail:grayscale-0 group-hover/rail:brightness-100 transition-[filter] duration-500 ease-out',
+          layout.logoMaxWidth,
+        )}
+      >
+        <PartnerImage
+          className={twMerge('w-full object-contain', layout.logoMaxHeight)}
+          config={partner.image}
+          alt={partner.name}
+        />
+      </div>
+    </a>
+  )
+}
diff --git a/src/components/SearchButton.tsx b/src/components/SearchButton.tsx
index 78b98e364..96bcf0d5a 100644
--- a/src/components/SearchButton.tsx
+++ b/src/components/SearchButton.tsx
@@ -1,29 +1,134 @@
 import * as React from 'react'
 import { Command, Search } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
-import { useSearchContext } from '~/contexts/SearchContext'
 import { Button } from '~/ui'
+import { useSearchContext } from '~/contexts/SearchContext'
 
 interface SearchButtonProps {
   className?: string
-  children?: React.ReactNode
+  iconOnly?: boolean
 }
 
-export function SearchButton({ className }: SearchButtonProps) {
+function AiGlyph() {
+  return (
+    <span className="relative flex h-5 w-5 items-center justify-center">
+      <span className="text-xs font-black leading-none tracking-normal">
+        AI
+      </span>
+    </span>
+  )
+}
+
+export function SearchButton({
+  className,
+  iconOnly = false,
+}: SearchButtonProps) {
   const { openSearch } = useSearchContext()
 
   return (
     <Button
-      variant="ghost"
-      size="xs"
+      type="button"
+      data-search-trigger="true"
       onClick={openSearch}
-      className={twMerge('gap-2 bg-gray-500/5 dark:bg-gray-500/30', className)}
+      aria-label="Search TanStack"
+      aria-haspopup="dialog"
+      variant={iconOnly ? 'icon' : 'ghost'}
+      color="gray"
+      size={iconOnly ? 'icon-sm' : 'xs'}
+      title="Search"
+      className={twMerge(
+        iconOnly
+          ? 'h-7 w-7 rounded-md p-0'
+          : 'gap-2 bg-gray-500/5 dark:bg-gray-500/30',
+        className,
+      )}
     >
       <Search className="w-3.5 h-3.5" />
-      <span>Search...</span>
-      <div className="flex items-center bg-gray-500/10 dark:bg-gray-500/30 rounded px-1 py-0.5 gap-0.5 text-[10px] whitespace-nowrap">
-        <Command className="w-2.5 h-2.5" /> K
-      </div>
+      {iconOnly ? (
+        <span className="sr-only">Search</span>
+      ) : (
+        <>
+          <span>Search...</span>
+          <div className="flex items-center bg-gray-500/10 dark:bg-gray-500/30 rounded px-1 py-0.5 gap-0.5 text-[10px] whitespace-nowrap">
+            <Command className="w-2.5 h-2.5" /> K
+          </div>
+        </>
+      )}
+    </Button>
+  )
+}
+
+export function AiDockButton({ className }: { className?: string }) {
+  const {
+    cancelAiDockHoverClose,
+    closeAiDock,
+    isAiDockDirty,
+    isAiDockOpen,
+    openAiDock,
+    scheduleAiDockHoverClose,
+  } = useSearchContext()
+  const openedByHoverRef = React.useRef(false)
+
+  const handlePointerEnter = (event: React.PointerEvent<HTMLButtonElement>) => {
+    if (event.pointerType === 'touch') {
+      return
+    }
+
+    cancelAiDockHoverClose()
+
+    if (isAiDockDirty && !isAiDockOpen) {
+      openedByHoverRef.current = true
+      openAiDock()
+    }
+  }
+
+  const handlePointerLeave = (event: React.PointerEvent<HTMLButtonElement>) => {
+    if (event.pointerType === 'touch') {
+      return
+    }
+
+    openedByHoverRef.current = false
+
+    if (isAiDockDirty) {
+      scheduleAiDockHoverClose()
+    }
+  }
+
+  const handleClick = () => {
+    if (openedByHoverRef.current) {
+      openedByHoverRef.current = false
+      return
+    }
+
+    if (isAiDockOpen) {
+      closeAiDock()
+      return
+    }
+
+    openAiDock()
+  }
+
+  return (
+    <Button
+      type="button"
+      onClick={handleClick}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+      aria-label={isAiDockOpen ? 'Close AI panel' : 'Open AI panel'}
+      aria-haspopup="dialog"
+      aria-pressed={isAiDockOpen}
+      variant="ghost"
+      size="icon-sm"
+      title="Ask AI"
+      className={twMerge(
+        'h-7 w-8 rounded-md p-0 bg-gray-500/5 dark:bg-gray-500/30',
+        isAiDockOpen &&
+          'bg-cyan-500/10 text-cyan-700 dark:bg-cyan-400/15 dark:text-cyan-300 border-cyan-500/20 dark:border-cyan-300/20',
+        className,
+      )}
+    >
+      <AiGlyph />
+      <span className="sr-only">Ask AI</span>
     </Button>
   )
 }
diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx
index 7b55935db..48302cbe2 100644
--- a/src/components/SearchModal.tsx
+++ b/src/components/SearchModal.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react'
+import { createPortal } from 'react-dom'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { Command } from 'cmdk'
 import { twMerge } from 'tailwind-merge'
 import {
   Dropdown,
@@ -9,25 +11,49 @@ import {
 } from './Dropdown'
 import {
   InstantSearch,
-  SearchBox,
   Snippet,
   Configure,
-  useMenu,
   useInstantSearch,
   useInfiniteHits,
+  useSearchBox,
 } from 'react-instantsearch'
 import { liteClient } from 'algoliasearch/lite'
-import { X, Search, ChevronDown, CornerDownLeft } from 'lucide-react'
+import {
+  X,
+  Search,
+  SearchSlash,
+  ChevronDown,
+  CornerDownLeft,
+  ArrowUp,
+  Check,
+  Copy,
+  ExternalLink,
+  History,
+  MessageSquarePlus,
+  ThumbsDown,
+  ThumbsUp,
+  Maximize2,
+  Minimize2,
+} from 'lucide-react'
+import {
+  DefaultKapaApiService,
+  KapaProvider,
+  processStream,
+  useChat,
+  type StreamSource,
+} from '@kapaai/react-sdk'
+import { Streamdown } from 'streamdown'
 import { Link, useRouterState } from '@tanstack/react-router'
 import { useSearchContext } from '~/contexts/SearchContext'
-import { libraries } from '~/libraries'
+import { publicLibraries, type Framework } from '~/libraries'
 import { frameworkOptions } from '~/libraries/frameworks'
 import { capitalize } from '~/utils/utils'
-import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
-import {
-  getStoredFrameworkPreference,
-  usePersistFrameworkPreference,
-} from './FrameworkSelect'
+import { usePersistFrameworkPreference } from './FrameworkSelect'
+import { shouldPersistFrameworkForHit } from '~/utils/searchRecords'
+import { CodeBlock } from '~/components/markdown/CodeBlock'
+import { InlineCode } from '~/ui/InlineCode'
+import { env } from '~/utils/env'
+import { getRoutableInternalLinkTarget, isSafeHref } from '~/utils/url-boundary'
 
 /**
  * Safely decode HTML entities without using innerHTML.
@@ -83,7 +109,11 @@ interface AlgoliaHighlightResult {
 interface AlgoliaHit extends Record<string, unknown> {
   objectID: string
   url: string
+  url_without_anchor?: string
+  urlWithAnchor?: string
   library?: string
+  framework?: string
+  routeStyle?: string
   hierarchy: AlgoliaHierarchy
   content?: string
   type?: string
@@ -93,6 +123,40 @@ interface AlgoliaHit extends Record<string, unknown> {
   _snippetResult?: Record<string, unknown>
 }
 
+type SearchHitPageFields = {
+  url: string
+  url_without_anchor?: string
+  urlWithAnchor?: string
+}
+
+function getSearchHitPageKey(hit: SearchHitPageFields) {
+  const hitUrl = hit.url_without_anchor ?? hit.urlWithAnchor ?? hit.url
+
+  try {
+    const url = new URL(hitUrl, 'https://tanstack.com')
+    return `${url.origin}${decodeURIComponent(url.pathname)}${url.search}`
+  } catch {
+    return hitUrl.split('#')[0].replace(/%40/gi, '@')
+  }
+}
+
+function dedupeSearchHitsByPage<THit extends SearchHitPageFields>(
+  hits: THit[],
+) {
+  const seenPageKeys = new Set<string>()
+
+  return hits.filter((hit) => {
+    const pageKey = getSearchHitPageKey(hit)
+
+    if (seenPageKeys.has(pageKey)) {
+      return false
+    }
+
+    seenPageKeys.add(pageKey)
+    return true
+  })
+}
+
 // Custom Highlight component that decodes HTML entities
 function DecodedHighlight({
   attribute,
@@ -153,6 +217,188 @@ const searchClient = liteClient(
   'FQ0DQ6MA3C',
   '10c34d6a5c89f6048cf644d601e65172',
 )
+const searchIndexName = 'tanstack-test'
+const AI_DOCK_WIDTH_STORAGE_KEY = 'tanstack-ai-dock-width'
+const AI_DOCK_MIN_WIDTH = 320
+const AI_DOCK_DEFAULT_WIDTH = 360
+const AI_DOCK_MAX_WIDTH_RATIO = 0.5
+const AI_DOCK_MAXIMIZED_WIDTH = 1200
+const DEFAULT_SEARCH_FRAMEWORK: Framework = 'react'
+const KAPA_RECAPTCHA_READY_TIMEOUT_MS = 8_000
+const KAPA_INTEGRATION_ID = '86e864f7-401e-48c8-ac6f-5fcbc86c5668'
+
+type SearchSurface = 'modal' | 'dock'
+type AiDockStyle = React.CSSProperties & {
+  '--ai-dock-width': string
+  '--ai-dock-max-width': string
+}
+
+function getAiDockMaxWidth(viewportWidth: number) {
+  return Math.max(
+    AI_DOCK_MIN_WIDTH,
+    Math.floor(viewportWidth * AI_DOCK_MAX_WIDTH_RATIO),
+  )
+}
+
+function clampAiDockWidth(width: number, viewportWidth: number) {
+  return Math.min(
+    Math.max(Math.round(width), AI_DOCK_MIN_WIDTH),
+    getAiDockMaxWidth(viewportWidth),
+  )
+}
+
+function readAiDockWidth() {
+  if (typeof window === 'undefined') {
+    return AI_DOCK_DEFAULT_WIDTH
+  }
+
+  const storedWidth = Number(localStorage.getItem(AI_DOCK_WIDTH_STORAGE_KEY))
+
+  if (!Number.isFinite(storedWidth)) {
+    return clampAiDockWidth(AI_DOCK_DEFAULT_WIDTH, window.innerWidth)
+  }
+
+  return clampAiDockWidth(storedWidth, window.innerWidth)
+}
+
+function writeAiDockWidth(width: number) {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  localStorage.setItem(AI_DOCK_WIDTH_STORAGE_KEY, String(Math.round(width)))
+}
+
+function waitForKapaRecaptchaReady() {
+  if (typeof window === 'undefined') {
+    return Promise.resolve()
+  }
+
+  return new Promise<void>((resolve) => {
+    let timeoutId: number | null = null
+    let intervalId: number | null = null
+    let isSettled = false
+    let hasRegisteredReadyCallback = false
+
+    const cleanup = () => {
+      if (timeoutId !== null) {
+        window.clearTimeout(timeoutId)
+        timeoutId = null
+      }
+
+      if (intervalId !== null) {
+        window.clearInterval(intervalId)
+        intervalId = null
+      }
+    }
+
+    const finish = () => {
+      if (isSettled) {
+        return
+      }
+
+      isSettled = true
+      cleanup()
+      window.setTimeout(resolve, 0)
+    }
+
+    const checkReady = () => {
+      if (hasRegisteredReadyCallback) {
+        return true
+      }
+
+      const enterprise = window.grecaptcha?.enterprise
+
+      if (!enterprise) {
+        return false
+      }
+
+      hasRegisteredReadyCallback = true
+
+      if (intervalId !== null) {
+        window.clearInterval(intervalId)
+        intervalId = null
+      }
+
+      enterprise.ready(finish)
+      return true
+    }
+
+    timeoutId = window.setTimeout(finish, KAPA_RECAPTCHA_READY_TIMEOUT_MS)
+
+    if (checkReady()) {
+      return
+    }
+
+    intervalId = window.setInterval(checkReady, 50)
+  })
+}
+
+function buildSearchFilters({
+  selectedLibrary,
+  selectedFramework,
+}: {
+  selectedLibrary: string
+  selectedFramework: string
+}) {
+  const filterParts: string[] = ['(version:latest OR version:all)']
+
+  if (selectedLibrary) {
+    filterParts.push(`library:${selectedLibrary}`)
+  }
+
+  if (selectedFramework) {
+    filterParts.push(`(framework:${selectedFramework} OR framework:all)`)
+  }
+
+  return filterParts.join(' AND ')
+}
+
+function getSearchableLibraries() {
+  return publicLibraries.filter((library) => library.latestVersion)
+}
+
+function isFramework(value: string): value is Framework {
+  return frameworkOptions.some((framework) => framework.value === value)
+}
+
+function getRouteFramework(pathname: string) {
+  const pathParts = pathname.split('/').filter(Boolean)
+  const frameworkIndex = pathParts.findIndex((part) => part === 'framework')
+
+  if (frameworkIndex === -1) {
+    return ''
+  }
+
+  const routeFramework = pathParts[frameworkIndex + 1]
+
+  return routeFramework && isFramework(routeFramework) ? routeFramework : ''
+}
+
+function getSearchFilterDefaults(pathname: string) {
+  const searchableLibraries = getSearchableLibraries()
+  const [firstPathPart] = pathname.split('/').filter(Boolean)
+  const routeLibrary = searchableLibraries.find(
+    (library) => library.id === firstPathPart,
+  )
+  const availableFrameworks = routeLibrary
+    ? routeLibrary.frameworks
+    : Array.from(
+        new Set(searchableLibraries.flatMap((library) => library.frameworks)),
+      )
+  const routeFramework = getRouteFramework(pathname)
+  const selectedFramework =
+    routeFramework && availableFrameworks.includes(routeFramework)
+      ? routeFramework
+      : availableFrameworks.includes(DEFAULT_SEARCH_FRAMEWORK)
+        ? DEFAULT_SEARCH_FRAMEWORK
+        : ''
+
+  return {
+    selectedLibrary: routeLibrary?.id ?? '',
+    selectedFramework,
+  }
+}
 
 // Context to share filter state between components
 const SearchFiltersContext = React.createContext<{
@@ -165,15 +411,18 @@ const SearchFiltersContext = React.createContext<{
   libraryItems: Array<{
     value: string
     label: string
-    count: number
     isRefined: boolean
   }>
   frameworkItems: Array<{
     value: string
     label: string
-    count: number
     isRefined: boolean
   }>
+  searchQuery: string
+  setSearchQuery: (value: string) => void
+  showSearchResults: boolean
+  toggleShowSearchResults: () => void
+  hideSearchResults: () => void
 } | null>(null)
 
 function useSearchFilters() {
@@ -186,89 +435,89 @@ function useSearchFilters() {
   return context
 }
 
-function SearchFiltersProvider({ children }: { children: React.ReactNode }) {
-  const userQuery = useCurrentUserQuery()
-  const [selectedLibrary, setSelectedLibrary] = React.useState('')
-  const lastUsedFramework = userQuery.data?.lastUsedFramework
-
-  // Get initial framework from user preference (DB if logged in, localStorage otherwise)
-  const getInitialFramework = React.useCallback(() => {
-    if (lastUsedFramework) {
-      return lastUsedFramework
-    }
-    return getStoredFrameworkPreference() || ''
-  }, [lastUsedFramework])
-
-  const [selectedFramework, setSelectedFramework] =
-    React.useState(getInitialFramework)
-
-  // Use useMenu just to get the list of available options and counts
-  // We do NOT use refine() because facet filters don't support OR logic
-  // Instead, we build custom filter strings via Configure component
-  const { items: rawLibraryItems } = useMenu({
-    attribute: 'library',
-    limit: 50,
-  })
-
-  const { items: rawFrameworkItems } = useMenu({
-    attribute: 'framework',
-    limit: 50,
-  })
-
-  // Auto-select based on current page URL
+function SearchFiltersProvider({
+  children,
+  resetFiltersOnOpen = false,
+}: {
+  children: React.ReactNode
+  resetFiltersOnOpen?: boolean
+}) {
   const pathname = useRouterState({
     select: (state) => state.location.pathname,
   })
+  const defaultFilters = React.useMemo(
+    () => getSearchFilterDefaults(pathname),
+    [pathname],
+  )
+  const [selectedLibrary, setSelectedLibrary] = React.useState(
+    defaultFilters.selectedLibrary,
+  )
+  const [searchQuery, setSearchQuery] = React.useState('')
+  const [showSearchResults, setShowSearchResults] = React.useState(() => {
+    if (typeof window === 'undefined') return true
+    return localStorage.getItem('search-show-results') !== 'false'
+  })
+  const [selectedFramework, setSelectedFramework] = React.useState(
+    defaultFilters.selectedFramework,
+  )
 
-  // Auto-select library from URL on mount
-  const hasAutoSelectedLibrary = React.useRef(false)
   React.useEffect(() => {
-    if (hasAutoSelectedLibrary.current) return
-    const pathParts = pathname.split('/').filter(Boolean)
-    const urlLibrary = libraries.find((l) => l.id === pathParts[0])
-    if (urlLibrary) {
-      setSelectedLibrary(urlLibrary.id)
-      hasAutoSelectedLibrary.current = true
+    if (!resetFiltersOnOpen) {
+      return
     }
-  }, [pathname])
 
-  // Auto-select framework from URL or preference on mount
-  const hasAutoSelectedFramework = React.useRef(false)
-  React.useEffect(() => {
-    if (hasAutoSelectedFramework.current) return
+    setSelectedLibrary(defaultFilters.selectedLibrary)
+    setSelectedFramework(defaultFilters.selectedFramework)
+  }, [
+    defaultFilters.selectedFramework,
+    defaultFilters.selectedLibrary,
+    resetFiltersOnOpen,
+  ])
 
-    // First check URL for framework
-    const frameworkMatch = pathname.match(/\/framework\/([^/]+)/)
-    if (frameworkMatch) {
-      setSelectedFramework(frameworkMatch[1])
-      hasAutoSelectedFramework.current = true
-      return
+  const searchableLibraries = React.useMemo(() => getSearchableLibraries(), [])
+
+  const selectedLibraryInfo = React.useMemo(
+    () => searchableLibraries.find((library) => library.id === selectedLibrary),
+    [searchableLibraries, selectedLibrary],
+  )
+
+  const availableFrameworkValues = React.useMemo(() => {
+    if (selectedLibraryInfo) {
+      return selectedLibraryInfo.frameworks
     }
 
-    // Fall back to stored preference
-    const storedFramework = getInitialFramework()
-    if (storedFramework) {
-      setSelectedFramework(storedFramework)
-      hasAutoSelectedFramework.current = true
+    return Array.from(
+      new Set(searchableLibraries.flatMap((library) => library.frameworks)),
+    )
+  }, [searchableLibraries, selectedLibraryInfo])
+
+  React.useEffect(() => {
+    if (!selectedLibraryInfo || !selectedFramework) {
+      return
     }
-  }, [pathname, getInitialFramework])
-
-  // Sort items by their defined order and filter out "all" from display
-  const libraryItems = [...rawLibraryItems]
-    .filter((item) => item.value !== 'all')
-    .sort((a, b) => {
-      const aIndex = libraries.findIndex((l) => l.id === a.value)
-      const bIndex = libraries.findIndex((l) => l.id === b.value)
-      return aIndex - bIndex
-    })
 
-  const frameworkItems = [...rawFrameworkItems]
-    .filter((item) => item.value !== 'all')
-    .sort((a, b) => {
-      const aIndex = frameworkOptions.findIndex((f) => f.value === a.value)
-      const bIndex = frameworkOptions.findIndex((f) => f.value === b.value)
-      return aIndex - bIndex
-    })
+    if (
+      !selectedLibraryInfo.frameworks.some(
+        (framework) => framework === selectedFramework,
+      )
+    ) {
+      setSelectedFramework('')
+    }
+  }, [selectedFramework, selectedLibraryInfo])
+
+  const libraryItems = searchableLibraries.map((library) => ({
+    value: library.id,
+    label: library.id,
+    isRefined: library.id === selectedLibrary,
+  }))
+
+  const frameworkItems = frameworkOptions
+    .filter((framework) => availableFrameworkValues.includes(framework.value))
+    .map((framework) => ({
+      value: framework.value,
+      label: framework.label,
+      isRefined: framework.value === selectedFramework,
+    }))
 
   // Wrapper functions that just update state (no Algolia refine)
   const selectLibrary = React.useCallback((value: string) => {
@@ -279,6 +528,19 @@ function SearchFiltersProvider({ children }: { children: React.ReactNode }) {
     setSelectedFramework(value)
   }, [])
 
+  const toggleShowSearchResults = React.useCallback(() => {
+    setShowSearchResults((current) => {
+      const next = !current
+      localStorage.setItem('search-show-results', String(next))
+      return next
+    })
+  }, [])
+
+  const hideSearchResults = React.useCallback(() => {
+    setShowSearchResults(false)
+    localStorage.setItem('search-show-results', 'false')
+  }, [])
+
   return (
     <SearchFiltersContext.Provider
       value={{
@@ -290,6 +552,11 @@ function SearchFiltersProvider({ children }: { children: React.ReactNode }) {
         refineFramework: selectFramework,
         libraryItems,
         frameworkItems,
+        searchQuery,
+        setSearchQuery,
+        showSearchResults,
+        toggleShowSearchResults,
+        hideSearchResults,
       }}
     >
       {children}
@@ -297,29 +564,10 @@ function SearchFiltersProvider({ children }: { children: React.ReactNode }) {
   )
 }
 
-// Component that builds dynamic filter strings including "all" library/framework pages
+// Component that builds dynamic filter strings for the selected search scope.
 function DynamicFilters() {
   const { selectedLibrary, selectedFramework } = useSearchFilters()
 
-  // Build filter string
-  // - Always filter to latest version OR "all" (for core pages)
-  // - When library selected: include that library OR "all" (for core pages)
-  // - When framework selected: include that framework OR "all" (for integration pages)
-  const filterParts: string[] = []
-
-  // Version filter: include latest OR "all" (core pages)
-  filterParts.push('(version:latest OR version:all)')
-
-  if (selectedLibrary) {
-    // Include selected library OR "all" (core pages like /ethos)
-    filterParts.push(`(library:${selectedLibrary} OR library:all)`)
-  }
-
-  if (selectedFramework) {
-    // Include selected framework OR "all" (integration pages, core pages)
-    filterParts.push(`(framework:${selectedFramework} OR framework:all)`)
-  }
-
   return (
     <Configure
       attributesToRetrieve={[
@@ -330,8 +578,14 @@ function DynamicFilters() {
         'hierarchy.lvl5',
         'hierarchy.lvl6',
         'url',
+        'url_without_anchor',
+        'anchor',
+        'urlWithAnchor',
         'content',
         'library',
+        'framework',
+        'version',
+        'routeStyle',
       ]}
       attributesToHighlight={[
         'hierarchy.lvl1',
@@ -343,11 +597,16 @@ function DynamicFilters() {
         'content',
       ]}
       attributesToSnippet={['content:50']}
-      filters={filterParts.join(' AND ')}
+      distinct={1}
+      filters={buildSearchFilters({ selectedLibrary, selectedFramework })}
     />
   )
 }
 
+function getInternalLinkTarget(hrefValue: string) {
+  return getRoutableInternalLinkTarget(hrefValue)
+}
+
 const SafeLink = React.forwardRef(
   (
     {
@@ -362,12 +621,13 @@ const SafeLink = React.forwardRef(
     }: React.AnchorHTMLAttributes<HTMLAnchorElement>,
     ref: React.Ref<HTMLAnchorElement>,
   ) => {
-    const isInternal = href?.includes('//tanstack.com')
+    const hrefValue = href ?? ''
+    const internalTarget = getInternalLinkTarget(hrefValue)
 
-    if (!isInternal) {
+    if (!internalTarget) {
       return (
         <a
-          href={href}
+          href={isSafeHref(hrefValue) ? href : undefined}
           className={className}
           onKeyDown={onKeyDown}
           role={role}
@@ -383,7 +643,8 @@ const SafeLink = React.forwardRef(
 
     return (
       <Link
-        to={href?.split('//tanstack.com')[1]}
+        to={internalTarget.path}
+        hash={internalTarget.hash}
         className={className}
         onKeyDown={onKeyDown}
         role={role}
@@ -396,33 +657,2320 @@ const SafeLink = React.forwardRef(
         {children}
       </Link>
     )
-  },
-)
+  },
+)
+
+function KapaMarkdownLink({
+  href,
+  children,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return (
+    <SafeLink
+      href={href}
+      className="font-medium text-gray-900 dark:text-gray-100 border-b border-gray-400/60 dark:border-gray-500/60 hover:border-gray-900 dark:hover:border-gray-100 transition-colors pb-px"
+      {...props}
+    >
+      {children}
+    </SafeLink>
+  )
+}
+
+function KapaMarkdownTable({
+  children,
+  className,
+  ...props
+}: React.TableHTMLAttributes<HTMLTableElement>) {
+  return (
+    <div className="my-3 max-w-full overflow-x-auto rounded-xl border border-gray-200 bg-white dark:border-white/[0.12] dark:bg-black/20">
+      <table
+        className={twMerge(
+          className,
+          'w-full min-w-[34rem] border-collapse text-left',
+        )}
+        {...props}
+      >
+        {children}
+      </table>
+    </div>
+  )
+}
+
+function KapaMarkdownTableHead({
+  children,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <thead
+      className={twMerge(
+        className,
+        'border-b border-gray-200 bg-gray-50/80 dark:border-white/[0.12] dark:bg-white/[0.04]',
+      )}
+      {...props}
+    >
+      {children}
+    </thead>
+  )
+}
+
+function KapaMarkdownTableBody({
+  children,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <tbody
+      className={twMerge(
+        className,
+        '[&_tr:last-child_td]:border-b-0 [&_tr:last-child_th]:border-b-0',
+      )}
+      {...props}
+    >
+      {children}
+    </tbody>
+  )
+}
+
+function KapaMarkdownTableCell({
+  children,
+  className,
+  ...props
+}: React.TdHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <td
+      className={twMerge(
+        className,
+        'border-b border-l border-gray-200/80 px-3 py-2 align-top first:border-l-0 dark:border-white/[0.08]',
+      )}
+      {...props}
+    >
+      {children}
+    </td>
+  )
+}
+
+function KapaMarkdownTableHeaderCell({
+  children,
+  className,
+  ...props
+}: React.ThHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <th
+      className={twMerge(
+        className,
+        'border-b border-l border-gray-200 px-3 py-2 font-semibold align-top first:border-l-0 dark:border-white/[0.1]',
+      )}
+      {...props}
+    >
+      {children}
+    </th>
+  )
+}
+
+const streamdownComponents = {
+  pre: CodeBlock,
+  code: InlineCode,
+  a: KapaMarkdownLink,
+  table: KapaMarkdownTable,
+  thead: KapaMarkdownTableHead,
+  tbody: KapaMarkdownTableBody,
+  td: KapaMarkdownTableCell,
+  th: KapaMarkdownTableHeaderCell,
+  ul: ({ children }: { children?: React.ReactNode }) => (
+    <ul className="list-disc list-outside pl-5 space-y-1 my-2">{children}</ul>
+  ),
+  ol: ({ children }: { children?: React.ReactNode }) => (
+    <ol className="list-decimal list-outside pl-5 space-y-1 my-2">
+      {children}
+    </ol>
+  ),
+  li: ({ children }: { children?: React.ReactNode }) => (
+    <li className="leading-relaxed">{children}</li>
+  ),
+}
+
+function parseSourceGroupIDs(value: string | undefined) {
+  if (!value) {
+    return undefined
+  }
+
+  const ids = value
+    .split(',')
+    .map((id) => id.trim())
+    .filter((id) => id.length > 0)
+
+  return ids.length > 0 ? ids : undefined
+}
+
+type KapaReaction = 'upvote' | 'downvote'
+
+type KapaDisplayQA = {
+  id: string | null
+  question: string
+  answer: string
+  sources: Array<StreamSource>
+  isGenerationAborted: boolean
+  isFeedbackSubmissionEnabled?: boolean
+  reaction: KapaReaction | null
+}
+
+type KapaHistoryItem = {
+  threadId: string
+  title: string
+  createdAt: number
+  updatedAt: number
+  conversation: Array<KapaDisplayQA>
+}
+
+type KapaSubmitQueryArgs = Parameters<DefaultKapaApiService['submitQuery']>[0]
+type KapaChatStreamCallbacks = Parameters<
+  DefaultKapaApiService['submitQuery']
+>[1]
+type KapaSubmitFeedbackArgs = Parameters<
+  DefaultKapaApiService['addFeedback']
+>[0]
+
+const KAPA_HISTORY_STORAGE_KEY = 'tanstack-kapa-chat-history'
+const KAPA_HISTORY_LIMIT = 5
+
+class KapaThreadOverrideApiService {
+  private service = new DefaultKapaApiService(processStream)
+
+  constructor(
+    private threadIdOverrideRef: React.MutableRefObject<string | null>,
+  ) {}
+
+  submitQuery(
+    args: KapaSubmitQueryArgs,
+    callbacks: KapaChatStreamCallbacks,
+  ): Promise<void> {
+    return this.service.submitQuery(
+      { ...args, threadId: this.threadIdOverrideRef.current },
+      callbacks,
+    )
+  }
+
+  addFeedback(args: KapaSubmitFeedbackArgs): Promise<void> {
+    return this.service.addFeedback(args)
+  }
+
+  abortCurrent(): void {
+    this.service.abortCurrent()
+  }
+}
+
+function isUnknownRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function isDefined<T>(value: T | null): value is T {
+  return value !== null
+}
+
+function readString(value: unknown) {
+  return typeof value === 'string' ? value : ''
+}
+
+function readNumber(value: unknown) {
+  return typeof value === 'number' && Number.isFinite(value) ? value : 0
+}
+
+function parseKapaReaction(value: unknown): KapaReaction | null {
+  if (value === 'upvote' || value === 'downvote') {
+    return value
+  }
+
+  return null
+}
+
+function parseKapaSource(value: unknown): StreamSource | null {
+  if (!isUnknownRecord(value)) {
+    return null
+  }
+
+  const title = readString(value.title)
+  const sourceUrl = readString(value.source_url)
+
+  if (
+    !title ||
+    title.length > 160 ||
+    !sourceUrl ||
+    sourceUrl.length > 2048 ||
+    !isSafeHref(sourceUrl)
+  ) {
+    return null
+  }
+
+  return {
+    title,
+    subtitle: readString(value.subtitle),
+    source_url: sourceUrl,
+    source_type: readString(value.source_type),
+  }
+}
+
+function parseKapaHistoryQA(value: unknown): KapaDisplayQA | null {
+  if (!isUnknownRecord(value)) {
+    return null
+  }
+
+  const question = readString(value.question).trim()
+
+  if (!question) {
+    return null
+  }
+
+  const sourceValues = Array.isArray(value.sources) ? value.sources : []
+
+  return {
+    id: typeof value.id === 'string' ? value.id : null,
+    question,
+    answer: readString(value.answer),
+    sources: sourceValues.map(parseKapaSource).filter(isDefined),
+    isGenerationAborted: value.isGenerationAborted === true,
+    isFeedbackSubmissionEnabled: value.isFeedbackSubmissionEnabled === true,
+    reaction: parseKapaReaction(value.reaction),
+  }
+}
+
+function parseKapaHistoryItem(value: unknown): KapaHistoryItem | null {
+  if (!isUnknownRecord(value)) {
+    return null
+  }
+
+  const threadId = readString(value.threadId)
+  const conversationValues = Array.isArray(value.conversation)
+    ? value.conversation
+    : []
+  const conversation = conversationValues
+    .map(parseKapaHistoryQA)
+    .filter(isDefined)
+
+  if (!threadId || conversation.length === 0) {
+    return null
+  }
+
+  const updatedAt = readNumber(value.updatedAt) || Date.now()
+
+  return {
+    threadId,
+    title: readString(value.title) || buildKapaHistoryTitle(conversation),
+    createdAt: readNumber(value.createdAt) || updatedAt,
+    updatedAt,
+    conversation,
+  }
+}
+
+function readKapaHistory() {
+  if (typeof window === 'undefined') {
+    return []
+  }
+
+  try {
+    const raw = localStorage.getItem(KAPA_HISTORY_STORAGE_KEY)
+    if (!raw) {
+      return []
+    }
+
+    const parsed: unknown = JSON.parse(raw)
+    if (!Array.isArray(parsed)) {
+      return []
+    }
+
+    return parsed
+      .map(parseKapaHistoryItem)
+      .filter(isDefined)
+      .sort((a, b) => b.updatedAt - a.updatedAt)
+      .slice(0, KAPA_HISTORY_LIMIT)
+  } catch {
+    return []
+  }
+}
+
+function writeKapaHistory(items: Array<KapaHistoryItem>) {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  try {
+    localStorage.setItem(
+      KAPA_HISTORY_STORAGE_KEY,
+      JSON.stringify(items.slice(0, KAPA_HISTORY_LIMIT)),
+    )
+  } catch {
+    // Ignore storage failures so chat keeps working.
+  }
+}
+
+function buildKapaHistoryTitle(conversation: Array<KapaDisplayQA>) {
+  const firstQuestion =
+    conversation
+      .find((qa) => qa.question.trim().length > 0)
+      ?.question.trim()
+      .replace(/\s+/g, ' ') || 'Untitled chat'
+
+  return firstQuestion.length > 64
+    ? `${firstQuestion.slice(0, 61)}...`
+    : firstQuestion
+}
+
+function toStoredKapaQA(qa: KapaDisplayQA): KapaDisplayQA {
+  return {
+    id: qa.id,
+    question: qa.question,
+    answer: qa.answer,
+    sources: qa.sources.map((source) => ({
+      title: source.title,
+      subtitle: source.subtitle,
+      source_url: source.source_url,
+      source_type: source.source_type,
+    })),
+    isGenerationAborted: qa.isGenerationAborted,
+    isFeedbackSubmissionEnabled: qa.isFeedbackSubmissionEnabled,
+    reaction: qa.reaction,
+  }
+}
+
+function upsertKapaHistoryItem(
+  threadId: string,
+  conversation: Array<KapaDisplayQA>,
+) {
+  const current = readKapaHistory()
+  const existing = current.find((item) => item.threadId === threadId)
+  const now = Date.now()
+  const nextItem: KapaHistoryItem = {
+    threadId,
+    title: buildKapaHistoryTitle(conversation),
+    createdAt: existing?.createdAt ?? now,
+    updatedAt: now,
+    conversation: conversation.map(toStoredKapaQA),
+  }
+  const next = [
+    nextItem,
+    ...current.filter((item) => item.threadId !== threadId),
+  ].slice(0, KAPA_HISTORY_LIMIT)
+
+  writeKapaHistory(next)
+  return next
+}
+
+function formatKapaHistoryTime(updatedAt: number) {
+  const elapsed = Date.now() - updatedAt
+
+  if (elapsed < 60_000) {
+    return 'now'
+  }
+
+  if (elapsed < 3_600_000) {
+    return `${Math.floor(elapsed / 60_000)}m ago`
+  }
+
+  if (elapsed < 86_400_000) {
+    return `${Math.floor(elapsed / 3_600_000)}h ago`
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+  }).format(new Date(updatedAt))
+}
+
+function useKapaChatHistory() {
+  const [items, setItems] =
+    React.useState<Array<KapaHistoryItem>>(readKapaHistory)
+
+  const save = React.useCallback(
+    (threadId: string, conversation: Array<KapaDisplayQA>) => {
+      if (conversation.length === 0) {
+        return
+      }
+
+      setItems(upsertKapaHistoryItem(threadId, conversation))
+    },
+    [],
+  )
+
+  return { items, save }
+}
+
+function getSourceScope(sourceUrl: string) {
+  let pathname = sourceUrl
+
+  try {
+    pathname = new URL(sourceUrl).pathname
+  } catch {
+    pathname = sourceUrl
+  }
+
+  const pathParts = pathname.split('/').filter(Boolean)
+  const libraryId = pathParts[0]
+  const library = publicLibraries.find((item) => item.id === libraryId)
+  const frameworkIndex = pathParts.indexOf('framework')
+  const frameworkValue =
+    frameworkIndex >= 0 ? pathParts[frameworkIndex + 1] : undefined
+  const framework = frameworkValue
+    ? frameworkOptions.find((item) => item.value === frameworkValue)
+    : undefined
+
+  return { library, framework }
+}
+
+function SourceScopeBadges({
+  library,
+  framework,
+}: ReturnType<typeof getSourceScope>) {
+  if (!library && !framework) {
+    return null
+  }
+
+  return (
+    <span className="inline-flex items-center gap-1 shrink-0">
+      {library ? (
+        <span
+          className={twMerge(
+            'text-[10px] font-black uppercase leading-none',
+            library.textStyle || 'text-gray-500 dark:text-gray-400',
+          )}
+        >
+          {library.id}
+        </span>
+      ) : null}
+      {framework ? (
+        <span
+          className={twMerge(
+            'inline-flex items-center gap-0.5 text-[10px] font-semibold leading-none',
+            framework.fontColor,
+          )}
+        >
+          <img
+            src={framework.logo}
+            alt=""
+            aria-hidden="true"
+            className="w-2.5 h-2.5"
+          />
+          {capitalize(framework.label)}
+        </span>
+      ) : null}
+    </span>
+  )
+}
+
+function ChatControlTooltip({ children }: { children: React.ReactNode }) {
+  return (
+    <span
+      aria-hidden="true"
+      data-chat-control-tooltip
+      className="pointer-events-none absolute right-0 top-full z-30 mt-1.5 whitespace-nowrap rounded-md bg-gray-900 px-2 py-1 text-[11px] font-medium text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100 group-focus:opacity-100 group-focus-visible:opacity-100 dark:bg-gray-100 dark:text-gray-900"
+    >
+      {children}
+    </span>
+  )
+}
+
+const compactChatControlClass =
+  'group relative h-8 w-8 justify-center rounded-lg bg-transparent shadow-none border-transparent hover:border-gray-200 focus-visible:border-gray-200 dark:hover:border-white/10 dark:focus-visible:border-white/10'
+
+function DockMaximizeButton({
+  isMaximized,
+  onToggle,
+}: {
+  isMaximized: boolean
+  onToggle: () => void
+}) {
+  const label = isMaximized ? 'Minimize panel' : 'Maximize panel'
+
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      title={label}
+      aria-label={label}
+      aria-pressed={isMaximized}
+      className={twMerge(
+        'pointer-events-auto flex items-center text-xs backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 disabled:opacity-40 disabled:hover:text-gray-400 dark:disabled:hover:text-gray-500 shadow-sm transition-colors',
+        compactChatControlClass,
+      )}
+    >
+      {isMaximized ? (
+        <Minimize2 className="w-3.5 h-3.5" />
+      ) : (
+        <Maximize2 className="w-3.5 h-3.5" />
+      )}
+      <ChatControlTooltip>{label}</ChatControlTooltip>
+    </button>
+  )
+}
+
+function CopyChatButton({
+  conversation,
+  compact = false,
+}: {
+  conversation: Array<KapaDisplayQA>
+  compact?: boolean
+}) {
+  const [copied, setCopied] = React.useState(false)
+  const hasConversation = conversation.length > 0
+  const label = copied ? 'Copied' : 'Copy chat'
+  const resetCopiedTimerRef = React.useRef<number | null>(null)
+
+  React.useEffect(() => {
+    return () => {
+      if (resetCopiedTimerRef.current) {
+        window.clearTimeout(resetCopiedTimerRef.current)
+      }
+    }
+  }, [])
+
+  const handleCopy = () => {
+    const text = conversation
+      .map((qa) =>
+        [`You: ${qa.question}`, qa.answer ? `TanStack: ${qa.answer}` : '']
+          .filter(Boolean)
+          .join('\n\n'),
+      )
+      .join('\n\n')
+
+    if (!text) {
+      return
+    }
+
+    navigator.clipboard.writeText(text).then(() => {
+      if (resetCopiedTimerRef.current) {
+        window.clearTimeout(resetCopiedTimerRef.current)
+      }
+
+      setCopied(true)
+      resetCopiedTimerRef.current = window.setTimeout(() => {
+        setCopied(false)
+        resetCopiedTimerRef.current = null
+      }, 2000)
+    })
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      disabled={!hasConversation}
+      title={label}
+      aria-label={label}
+      className={twMerge(
+        'pointer-events-auto flex items-center text-xs backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 disabled:opacity-40 disabled:hover:text-gray-400 dark:disabled:hover:text-gray-500 shadow-sm transition-colors',
+        compact
+          ? compactChatControlClass
+          : 'gap-1 px-2 py-1 rounded-md bg-white/80 dark:bg-black/80',
+        copied &&
+          'border-green-500/30 bg-green-500/10 text-green-600 hover:bg-green-500/15 hover:text-green-700 dark:border-green-400/30 dark:bg-green-400/10 dark:text-green-300 dark:hover:bg-green-400/15 dark:hover:text-green-200',
+      )}
+    >
+      {copied ? (
+        <Check className="w-3.5 h-3.5" />
+      ) : (
+        <Copy className="w-3 h-3" />
+      )}
+      {compact ? <ChatControlTooltip>{label}</ChatControlTooltip> : label}
+    </button>
+  )
+}
+
+function KapaHistoryButton({
+  items,
+  activeThreadId,
+  isBusy,
+  onSelect,
+  compact = false,
+}: {
+  items: Array<KapaHistoryItem>
+  activeThreadId: string | null
+  isBusy: boolean
+  onSelect: (item: KapaHistoryItem) => void
+  compact?: boolean
+}) {
+  const { cancelAiDockHoverClose } = useSearchContext()
+  const cancelPendingDockClose = React.useCallback(() => {
+    if (!compact) {
+      return
+    }
+
+    cancelAiDockHoverClose()
+  }, [cancelAiDockHoverClose, compact])
+
+  return (
+    <Dropdown
+      modal={false}
+      onOpenChange={(open) => {
+        if (open) {
+          cancelPendingDockClose()
+        }
+      }}
+    >
+      <DropdownTrigger>
+        <button
+          type="button"
+          disabled={isBusy}
+          aria-label="Chat history"
+          title="Chat history"
+          className={twMerge(
+            'pointer-events-auto flex items-center text-xs backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 disabled:opacity-40 disabled:hover:text-gray-400 dark:disabled:hover:text-gray-500 shadow-sm transition-colors',
+            compact
+              ? compactChatControlClass
+              : 'gap-1 px-1.5 sm:px-2 py-1 rounded-md bg-white/80 dark:bg-black/80',
+          )}
+        >
+          <History className="w-3 h-3" />
+          {compact ? (
+            <ChatControlTooltip>Chat history</ChatControlTooltip>
+          ) : (
+            <span className="hidden sm:inline">History</span>
+          )}
+        </button>
+      </DropdownTrigger>
+      <DropdownContent
+        align="end"
+        sideOffset={8}
+        className="w-72 max-w-[calc(100vw-2rem)]"
+        onFocus={cancelPendingDockClose}
+        onPointerEnter={cancelPendingDockClose}
+      >
+        {items.length === 0 ? (
+          <div className="px-2 py-2 text-xs text-gray-400 dark:text-gray-500">
+            No saved chats yet
+          </div>
+        ) : null}
+        {items.map((item) => {
+          const isActive = item.threadId === activeThreadId
+
+          return (
+            <DropdownItem
+              key={item.threadId}
+              onSelect={() => {
+                cancelPendingDockClose()
+                onSelect(item)
+              }}
+              className="items-start justify-between gap-3 py-2"
+            >
+              <span className="min-w-0">
+                <span className="block truncate text-xs font-semibold text-gray-700 dark:text-gray-200">
+                  {item.title}
+                </span>
+                <span className="block truncate text-[10px] text-gray-400 dark:text-gray-500">
+                  {formatKapaHistoryTime(item.updatedAt)}
+                </span>
+              </span>
+              {isActive ? (
+                <Check className="mt-0.5 w-3 h-3 shrink-0 text-green-500" />
+              ) : null}
+            </DropdownItem>
+          )
+        })}
+      </DropdownContent>
+    </Dropdown>
+  )
+}
+
+function MessageActionButton({
+  icon,
+  title,
+  onClick,
+}: {
+  icon: 'copy'
+  title: string
+  onClick: () => void
+}) {
+  const [flashed, setFlashed] = React.useState(false)
+
+  const handleClick = () => {
+    onClick()
+    if (icon === 'copy') {
+      setFlashed(true)
+      setTimeout(() => setFlashed(false), 1500)
+    }
+  }
+
+  const iconEl = flashed ? (
+    <Check className="w-3 h-3 text-green-500" />
+  ) : (
+    <Copy className="w-3 h-3" />
+  )
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      title={title}
+      className="p-1 rounded text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+    >
+      {iconEl}
+    </button>
+  )
+}
+
+function AIMessageHeader({ action }: { action?: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between mb-1.5">
+      <div className="flex items-center gap-1.5 min-w-0">
+        <div className="w-5 h-5 rounded-full overflow-hidden ring-1 ring-black/10 dark:ring-white/10 shrink-0">
+          <img
+            src="/images/logos/logo-color-100.png"
+            alt="TanStack"
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <div className="flex flex-wrap items-baseline gap-x-1.5 gap-y-0 min-w-0">
+          <span className="text-xs font-semibold text-gray-500 dark:text-gray-400">
+            TanStack
+          </span>
+          <a
+            href="https://www.kapa.ai/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[10px] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+          >
+            answers by kapa.ai
+          </a>
+        </div>
+      </div>
+      {action}
+    </div>
+  )
+}
+
+function AlgoliaAttribution() {
+  return (
+    <a
+      href="https://www.algolia.com/developers/?utm_medium=referral&utm_content=powered_by&utm_source=tanstack.com&utm_campaign=docsearch"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-center gap-1.5 opacity-45 hover:opacity-75 transition-opacity shrink-0"
+      onClick={(event) => event.stopPropagation()}
+    >
+      <span className="hidden sm:inline text-[10px] text-gray-400 dark:text-gray-500">
+        search by
+      </span>
+      <img
+        src="/Algolia-logo-blue.svg"
+        alt="Algolia"
+        className="h-2.5 w-auto dark:hidden"
+      />
+      <img
+        src="/Algolia-logo-white.svg"
+        alt="Algolia"
+        className="h-2.5 w-auto hidden dark:block"
+      />
+    </a>
+  )
+}
+
+function getKapaSuggestions(selectedLibrary: string) {
+  if (selectedLibrary === 'query') {
+    return [
+      'How do I invalidate a query?',
+      'What is staleTime vs gcTime?',
+      'How do I handle optimistic updates?',
+    ]
+  }
+
+  if (selectedLibrary === 'router') {
+    return [
+      'How do I do nested layouts?',
+      'What is the difference between loader and beforeLoad?',
+      'How do I type search params?',
+    ]
+  }
+
+  if (selectedLibrary === 'start') {
+    return [
+      'How do I create a server function?',
+      'How do I add authentication?',
+      'How does middleware work?',
+    ]
+  }
+
+  if (selectedLibrary === 'table') {
+    return [
+      'How do I add column sorting?',
+      'How do I implement row selection?',
+      'How do I virtualize rows?',
+    ]
+  }
+
+  if (selectedLibrary === 'form') {
+    return [
+      'How do I validate on submit?',
+      'How do I handle async validation?',
+      'How do I use array fields?',
+    ]
+  }
+
+  return [
+    'How do I get started with TanStack Query?',
+    'What is the difference between Start and Router?',
+    'Which TanStack library should I use for data fetching?',
+  ]
+}
+
+function KapaWelcome({
+  selectedLibrary,
+  selectedFramework,
+  onSuggestion,
+  disabled,
+  compact = false,
+}: {
+  selectedLibrary: string
+  selectedFramework: string
+  onSuggestion: (suggestion: string) => void
+  disabled?: boolean
+  compact?: boolean
+}) {
+  const suggestions = getKapaSuggestions(selectedLibrary)
+
+  return (
+    <div>
+      <AIMessageHeader />
+      <div className="rounded-2xl px-3.5 py-3 bg-white dark:bg-white/[0.06] border border-gray-200 dark:border-white/10 shadow-sm space-y-2.5">
+        <p
+          className={twMerge(
+            'text-gray-700 dark:text-gray-300 leading-relaxed',
+            compact ? 'text-[13px]' : 'text-sm',
+          )}
+        >
+          Ask a TanStack docs question in plain English.
+          {(selectedLibrary || selectedFramework) && (
+            <>
+              {' '}
+              Your search is focused on{' '}
+              {selectedLibrary && (
+                <span className="font-semibold text-gray-900 dark:text-white">
+                  TanStack {selectedLibrary.toUpperCase()}
+                </span>
+              )}
+              {selectedLibrary && selectedFramework && ' + '}
+              {selectedFramework && (
+                <span className="font-semibold text-gray-900 dark:text-white">
+                  {capitalize(selectedFramework)}
+                </span>
+              )}
+              .
+            </>
+          )}
+        </p>
+        <div className="space-y-1.5">
+          <p className="text-[11px] font-medium uppercase tracking-wide text-gray-400 dark:text-gray-500">
+            Try asking
+          </p>
+          <div className="flex flex-wrap gap-1.5">
+            {suggestions.map((suggestion) => (
+              <button
+                key={suggestion}
+                type="button"
+                disabled={disabled}
+                onClick={() => onSuggestion(suggestion)}
+                className={twMerge(
+                  'px-2.5 py-1 rounded-full bg-gray-100 dark:bg-white/[0.08] text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/[0.14] disabled:hover:bg-gray-100 dark:disabled:hover:bg-white/[0.08] disabled:opacity-50 disabled:cursor-default transition-colors border border-gray-200 dark:border-white/10 text-left',
+                  compact ? 'text-[11px]' : 'text-xs',
+                )}
+              >
+                {suggestion}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function KapaAnswer({
+  qa,
+  isStreaming,
+  error,
+  onCopyQuestion,
+  onFeedback,
+  compact = false,
+}: {
+  qa: KapaDisplayQA
+  isStreaming: boolean
+  error?: string | null
+  onCopyQuestion: () => void
+  onFeedback: (reaction: 'upvote' | 'downvote') => void
+  compact?: boolean
+}) {
+  const canSubmitFeedback =
+    qa.id !== null && qa.isFeedbackSubmissionEnabled && qa.reaction === null
+  const hasAnswerError = !isStreaming && !qa.answer && !!error
+
+  return (
+    <div className="space-y-3">
+      <div className="group flex flex-col items-end gap-1">
+        <div
+          className={twMerge(
+            'max-w-[85%] px-3.5 py-2 rounded-2xl rounded-tr-sm bg-gray-900 dark:bg-white text-white dark:text-gray-900 break-words',
+            compact ? 'text-[13px]' : 'text-sm',
+          )}
+        >
+          {qa.question}
+        </div>
+        <div className="flex items-center gap-0.5 opacity-60 group-hover:opacity-100 transition-opacity">
+          <MessageActionButton
+            icon="copy"
+            title="Copy"
+            onClick={onCopyQuestion}
+          />
+        </div>
+      </div>
+      <div>
+        <AIMessageHeader />
+        <div className="rounded-2xl px-3.5 py-2.5 bg-white dark:bg-white/[0.06] border border-gray-200 dark:border-white/10 shadow-sm">
+          {hasAnswerError ? (
+            <p
+              className={twMerge(
+                'text-red-700 dark:text-red-300 leading-relaxed',
+                compact ? 'text-[13px]' : 'text-sm',
+              )}
+            >
+              {error}
+            </p>
+          ) : qa.answer ? (
+            <div
+              className={twMerge(
+                'text-gray-800 dark:text-gray-200 leading-relaxed break-words',
+                compact ? 'text-[13px]' : 'text-sm',
+              )}
+            >
+              <Streamdown
+                components={streamdownComponents}
+                isAnimating={isStreaming}
+              >
+                {qa.answer}
+              </Streamdown>
+            </div>
+          ) : (
+            <div className="flex items-center gap-1 py-0.5">
+              <span className="w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-500 animate-bounce [animation-delay:0ms]" />
+              <span className="w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-500 animate-bounce [animation-delay:150ms]" />
+              <span className="w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-500 animate-bounce [animation-delay:300ms]" />
+            </div>
+          )}
+        </div>
+        {!isStreaming && qa.sources.length > 0 && (
+          <div className="mt-2 space-y-1">
+            <p className="text-[11px] font-medium uppercase tracking-wide text-gray-400 dark:text-gray-500 px-0.5">
+              Sources
+            </p>
+            <div className="flex flex-wrap gap-1.5">
+              {qa.sources.map((source) => {
+                const subtitle =
+                  source.subtitle && source.subtitle !== source.title
+                    ? source.subtitle
+                    : ''
+                const label = subtitle
+                  ? `${source.title} - ${subtitle}`
+                  : source.title
+                const sourceScope = getSourceScope(source.source_url)
+                const hasSourceScope =
+                  !!sourceScope.library || !!sourceScope.framework
+                const internalTarget = getInternalLinkTarget(source.source_url)
+
+                return (
+                  <SafeLink
+                    key={source.source_url}
+                    href={source.source_url}
+                    target={internalTarget ? undefined : '_blank'}
+                    rel={internalTarget ? undefined : 'noopener noreferrer'}
+                    className="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] font-medium bg-gray-100 dark:bg-white/[0.06] text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-white/[0.12] hover:text-gray-900 dark:hover:text-gray-200 border border-gray-200 dark:border-white/10 transition-colors max-w-[280px]"
+                  >
+                    <SourceScopeBadges {...sourceScope} />
+                    {!hasSourceScope ? (
+                      <ExternalLink className="w-2.5 h-2.5 flex-none opacity-60" />
+                    ) : null}
+                    <span className="truncate">{label}</span>
+                  </SafeLink>
+                )
+              })}
+            </div>
+          </div>
+        )}
+        {!isStreaming && qa.answer && (
+          <div className="flex items-center gap-0.5 mt-1.5 px-0.5">
+            <button
+              type="button"
+              onClick={() => onFeedback('upvote')}
+              disabled={!canSubmitFeedback}
+              title="Helpful"
+              className={twMerge(
+                'p-1 rounded transition-colors',
+                qa.reaction === 'upvote'
+                  ? 'text-green-500'
+                  : 'text-gray-300 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 disabled:opacity-40',
+              )}
+            >
+              <ThumbsUp className="w-3 h-3" />
+            </button>
+            <button
+              type="button"
+              onClick={() => onFeedback('downvote')}
+              disabled={!canSubmitFeedback}
+              title="Not helpful"
+              className={twMerge(
+                'p-1 rounded transition-colors',
+                qa.reaction === 'downvote'
+                  ? 'text-red-500'
+                  : 'text-gray-300 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 disabled:opacity-40',
+              )}
+            >
+              <ThumbsDown className="w-3 h-3" />
+            </button>
+            <div className="w-px h-3 bg-gray-200 dark:bg-white/10 mx-0.5" />
+            <MessageActionButton
+              icon="copy"
+              title="Copy"
+              onClick={() => navigator.clipboard.writeText(qa.answer)}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function KapaChatPanel({
+  onReset,
+  isFullHeight,
+  onToggleFullHeight,
+  threadIdOverrideRef,
+  newChatRequestId,
+  surface,
+  isDockMaximized = false,
+  onToggleDockMaximized,
+}: {
+  onReset: () => void
+  isFullHeight: boolean
+  onToggleFullHeight: () => void
+  threadIdOverrideRef: React.MutableRefObject<string | null>
+  newChatRequestId: number
+  surface: SearchSurface
+  isDockMaximized?: boolean
+  onToggleDockMaximized?: () => void
+}) {
+  const {
+    conversation,
+    threadId,
+    submitQuery,
+    isGeneratingAnswer,
+    isPreparingAnswer,
+    stopGeneration,
+    resetConversation,
+    addFeedback,
+    error,
+  } = useChat()
+  const {
+    aiDockAskRequest,
+    clearAiDockAskRequest,
+    closeSearch,
+    setAiDockDirty,
+  } = useSearchContext()
+  const { selectedLibrary, selectedFramework, showSearchResults, searchQuery } =
+    useSearchFilters()
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const { items: historyItems, save: saveHistory } = useKapaChatHistory()
+  const [selectedHistoryItem, setSelectedHistoryItem] =
+    React.useState<KapaHistoryItem | null>(null)
+  const isBusy = isGeneratingAnswer || isPreparingAnswer
+  const isDock = surface === 'dock'
+  const isSubmittingRef = React.useRef(false)
+  const pendingSubmitIdRef = React.useRef(0)
+  const lockedToBottom = React.useRef(true)
+  const handledNewChatRequestId = React.useRef(newChatRequestId)
+  const handledAiDockAskRequestId = React.useRef(0)
+  const displayConversation = React.useMemo<Array<KapaDisplayQA>>(() => {
+    const liveConversation = Array.from(conversation)
+
+    if (!selectedHistoryItem) {
+      return liveConversation
+    }
+
+    return [...selectedHistoryItem.conversation, ...liveConversation]
+  }, [conversation, selectedHistoryItem])
+  const hasConversation = displayConversation.length > 0
+  const activeThreadId = threadId ?? selectedHistoryItem?.threadId ?? null
+
+  React.useEffect(() => {
+    if (!isDock) {
+      return
+    }
+
+    setAiDockDirty(
+      searchQuery.trim().length > 0 || displayConversation.length > 0 || isBusy,
+    )
+  }, [displayConversation.length, isBusy, isDock, searchQuery, setAiDockDirty])
+
+  React.useEffect(() => {
+    if (threadId) {
+      threadIdOverrideRef.current = threadId
+    }
+  }, [threadId, threadIdOverrideRef])
+
+  React.useEffect(() => {
+    if (!threadId || isBusy || displayConversation.length === 0) {
+      return
+    }
+
+    saveHistory(threadId, displayConversation)
+  }, [displayConversation, isBusy, saveHistory, threadId])
+
+  React.useEffect(() => {
+    const element = scrollRef.current
+    if (!element) return
+
+    const handleScroll = () => {
+      const distanceFromBottom =
+        element.scrollHeight - element.scrollTop - element.clientHeight
+      lockedToBottom.current = distanceFromBottom < 80
+    }
+
+    element.addEventListener('scroll', handleScroll, { passive: true })
+    return () => {
+      element.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      const element = scrollRef.current
+      if (element && lockedToBottom.current) {
+        element.scrollTop = element.scrollHeight
+      }
+    })
+
+    return () => cancelAnimationFrame(frame)
+  }, [displayConversation, isBusy])
+
+  React.useEffect(() => {
+    if (!isBusy) {
+      isSubmittingRef.current = false
+    }
+  }, [isBusy])
+
+  const ask = React.useCallback(
+    (question: string) => {
+      const trimmed = question.trim()
+      if (trimmed.length < 3 || isBusy || isSubmittingRef.current) {
+        return
+      }
+
+      const submitId = pendingSubmitIdRef.current + 1
+      pendingSubmitIdRef.current = submitId
+      isSubmittingRef.current = true
+
+      waitForKapaRecaptchaReady().then(() => {
+        if (pendingSubmitIdRef.current !== submitId) {
+          return
+        }
+
+        submitQuery(trimmed)
+      })
+    },
+    [isBusy, submitQuery],
+  )
+
+  const selectHistoryItem = React.useCallback(
+    (item: KapaHistoryItem) => {
+      if (isBusy) {
+        return
+      }
+
+      resetConversation()
+      threadIdOverrideRef.current = item.threadId
+      setSelectedHistoryItem(item)
+      lockedToBottom.current = true
+    },
+    [isBusy, resetConversation, threadIdOverrideRef],
+  )
+
+  const clearActiveChat = React.useCallback(() => {
+    pendingSubmitIdRef.current += 1
+    isSubmittingRef.current = false
+    resetConversation()
+    threadIdOverrideRef.current = null
+    setSelectedHistoryItem(null)
+    lockedToBottom.current = true
+    onReset()
+  }, [onReset, resetConversation, threadIdOverrideRef])
+
+  const startNewChat = React.useCallback(() => {
+    if (isBusy) {
+      stopGeneration()
+    }
+
+    clearActiveChat()
+  }, [clearActiveChat, isBusy, stopGeneration])
+
+  React.useEffect(() => {
+    if (handledNewChatRequestId.current === newChatRequestId) {
+      return
+    }
+
+    handledNewChatRequestId.current = newChatRequestId
+    startNewChat()
+  }, [newChatRequestId, startNewChat])
+
+  React.useEffect(() => {
+    if (!isDock || !aiDockAskRequest) {
+      return
+    }
+
+    if (handledAiDockAskRequestId.current === aiDockAskRequest.id) {
+      return
+    }
+
+    if (isBusy) {
+      stopGeneration()
+      return
+    }
+
+    handledAiDockAskRequestId.current = aiDockAskRequest.id
+    clearActiveChat()
+    ask(aiDockAskRequest.question)
+    clearAiDockAskRequest(aiDockAskRequest.id)
+  }, [
+    ask,
+    aiDockAskRequest,
+    clearActiveChat,
+    clearAiDockAskRequest,
+    isBusy,
+    isDock,
+    stopGeneration,
+  ])
+
+  return (
+    <section
+      ref={scrollRef}
+      className={twMerge(
+        'overflow-y-auto flex flex-col',
+        isDock
+          ? 'flex-1 min-h-0'
+          : isFullHeight
+            ? 'flex-1 min-h-0'
+            : 'flex-1 min-h-0 sm:flex-none sm:max-h-[min(600px,calc(100dvh-2rem-90px))]',
+      )}
+    >
+      <div
+        className={twMerge(
+          'sticky top-0 flex items-center justify-between gap-1.5',
+          isDock
+            ? 'z-20 px-3 py-2 border-b border-gray-200/80 dark:border-white/10 bg-white/90 dark:bg-black/90 backdrop-blur-xl shadow-sm'
+            : 'z-10 pt-2 pb-1 px-4 sm:px-5 pointer-events-none',
+        )}
+      >
+        {isDock ? null : <StickyTopBlur />}
+        <div className="relative z-10 flex items-center gap-1 min-w-0">
+          {isDock ? (
+            <div className="min-w-0 py-1.5">
+              <div className="truncate text-sm font-bold leading-4 text-gray-900 dark:text-white">
+                TanStack AI
+              </div>
+            </div>
+          ) : (
+            <>
+              <button
+                type="button"
+                onClick={closeSearch}
+                className="pointer-events-auto flex items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
+                aria-label="Close search"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+              <button
+                type="button"
+                onClick={onToggleFullHeight}
+                className="hidden sm:flex pointer-events-auto items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
+                aria-label={isFullHeight ? 'Collapse search' : 'Expand search'}
+              >
+                {isFullHeight ? (
+                  <Minimize2 className="w-3 h-3" />
+                ) : (
+                  <Maximize2 className="w-3 h-3" />
+                )}
+              </button>
+            </>
+          )}
+        </div>
+        <div
+          className={twMerge(
+            'relative z-10 flex items-center',
+            isDock
+              ? 'gap-0.5 rounded-xl bg-gray-500/5 dark:bg-white/[0.04] p-0.5'
+              : 'gap-1.5',
+          )}
+        >
+          {isDock && onToggleDockMaximized ? (
+            <DockMaximizeButton
+              isMaximized={isDockMaximized}
+              onToggle={onToggleDockMaximized}
+            />
+          ) : null}
+          <KapaHistoryButton
+            items={historyItems}
+            activeThreadId={activeThreadId}
+            isBusy={isBusy}
+            onSelect={selectHistoryItem}
+            compact={isDock}
+          />
+          {hasConversation ? (
+            <>
+              <CopyChatButton
+                conversation={displayConversation}
+                compact={isDock}
+              />
+              <button
+                type="button"
+                onClick={startNewChat}
+                title="New chat"
+                aria-label="New chat"
+                className={twMerge(
+                  'pointer-events-auto flex items-center text-xs backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors',
+                  isDock
+                    ? compactChatControlClass
+                    : 'gap-1 px-2 py-1 rounded-md bg-white/80 dark:bg-black/80',
+                )}
+              >
+                <MessageSquarePlus className="w-3.5 h-3.5" />
+                {isDock ? (
+                  <ChatControlTooltip>New chat</ChatControlTooltip>
+                ) : (
+                  'New chat'
+                )}
+              </button>
+            </>
+          ) : null}
+        </div>
+      </div>
+      <div
+        className={twMerge(
+          'flex-1 pt-3 space-y-4',
+          isDock ? 'px-3 pb-[260px]' : 'px-3 sm:px-4 pb-[220px]',
+        )}
+      >
+        {displayConversation.length === 0 ? (
+          <KapaWelcome
+            selectedLibrary={showSearchResults ? selectedLibrary : ''}
+            selectedFramework={showSearchResults ? selectedFramework : ''}
+            onSuggestion={ask}
+            compact={isDock}
+          />
+        ) : (
+          displayConversation.map((qa, index) => {
+            const liveIndex =
+              index -
+              (selectedHistoryItem
+                ? selectedHistoryItem.conversation.length
+                : 0)
+            const isLiveQA = liveIndex >= 0
+            const isLatestLiveQA = liveIndex === conversation.length - 1
+            const isStreamingLatest = isLiveQA && isLatestLiveQA && isBusy
+            const answerError = isLiveQA && isLatestLiveQA ? error : null
+
+            return (
+              <KapaAnswer
+                key={qa.id ?? `${qa.question}-${index}`}
+                qa={qa}
+                isStreaming={isStreamingLatest}
+                error={answerError}
+                onCopyQuestion={() =>
+                  navigator.clipboard.writeText(qa.question)
+                }
+                onFeedback={(reaction) => {
+                  if (qa.id !== null) {
+                    addFeedback(qa.id, reaction)
+                  }
+                }}
+                compact={isDock}
+              />
+            )
+          })
+        )}
+        {error && conversation.length === 0 && (
+          <div className="rounded-lg border border-red-300/70 dark:border-red-500/30 bg-red-50 dark:bg-red-500/10 px-3 py-2 text-sm text-red-700 dark:text-red-300">
+            {error}
+          </div>
+        )}
+      </div>
+      <div className="sticky bottom-0">
+        <div className="absolute bottom-full left-0 right-0">
+          <SearchResultsInChat surface={surface} />
+        </div>
+        <InputBar
+          isBusy={isBusy}
+          onAskAISubmit={ask}
+          onStop={stopGeneration}
+          surface={surface}
+        />
+      </div>
+    </section>
+  )
+}
+
+function StickyTopBlur() {
+  const mask =
+    '[mask-image:linear-gradient(to_bottom,black_0%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_bottom,black_0%,transparent_100%)]'
+
+  return (
+    <div
+      className="absolute inset-x-0 top-0 z-0 h-20 pointer-events-none"
+      aria-hidden="true"
+    >
+      <div
+        className={twMerge(
+          'absolute inset-x-0 top-0 h-20 bg-white/25 dark:bg-black/25 backdrop-blur-sm',
+          mask,
+        )}
+      />
+      <div
+        className={twMerge(
+          'absolute inset-x-0 top-0 h-14 bg-white/25 dark:bg-black/25 backdrop-blur-md',
+          mask,
+        )}
+      />
+      <div
+        className={twMerge(
+          'absolute inset-x-0 top-0 h-8 bg-white/20 dark:bg-black/20 backdrop-blur-lg',
+          mask,
+        )}
+      />
+    </div>
+  )
+}
+
+function KapaUnavailablePanel({
+  isFullHeight,
+  onToggleFullHeight,
+  surface,
+  isDockMaximized = false,
+  onToggleDockMaximized,
+}: {
+  isFullHeight: boolean
+  onToggleFullHeight: () => void
+  surface: SearchSurface
+  isDockMaximized?: boolean
+  onToggleDockMaximized?: () => void
+}) {
+  const { closeSearch, setAiDockDirty } = useSearchContext()
+  const { selectedLibrary, selectedFramework, showSearchResults, searchQuery } =
+    useSearchFilters()
+  const isDock = surface === 'dock'
+
+  React.useEffect(() => {
+    if (!isDock) {
+      return
+    }
+
+    setAiDockDirty(searchQuery.trim().length > 0)
+  }, [isDock, searchQuery, setAiDockDirty])
+
+  return (
+    <section
+      className={twMerge(
+        'overflow-y-auto flex flex-col',
+        isDock
+          ? 'flex-1 min-h-0'
+          : isFullHeight
+            ? 'flex-1 min-h-0'
+            : 'flex-1 min-h-0 sm:flex-none sm:max-h-[min(600px,calc(100dvh-2rem-90px))]',
+      )}
+    >
+      <div
+        className={twMerge(
+          'sticky top-0 flex items-center justify-between gap-1.5',
+          isDock
+            ? 'z-20 px-3 py-2 border-b border-gray-200/80 dark:border-white/10 bg-white/90 dark:bg-black/90 backdrop-blur-xl shadow-sm'
+            : 'z-10 pt-2 pb-1 px-4 sm:px-5 pointer-events-none',
+        )}
+      >
+        {isDock ? null : <StickyTopBlur />}
+        <div className="relative z-10 flex items-center gap-1 min-w-0">
+          {isDock ? (
+            <div className="min-w-0 py-1.5">
+              <div className="truncate text-sm font-bold leading-4 text-gray-900 dark:text-white">
+                TanStack AI
+              </div>
+            </div>
+          ) : (
+            <>
+              <button
+                type="button"
+                onClick={closeSearch}
+                className="pointer-events-auto flex items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
+                aria-label="Close search"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+              <button
+                type="button"
+                onClick={onToggleFullHeight}
+                className="hidden sm:flex pointer-events-auto items-center justify-center w-6 h-6 rounded-md bg-white/80 dark:bg-black/80 backdrop-blur-sm border border-gray-200 dark:border-white/10 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-white dark:hover:bg-black/90 shadow-sm transition-colors"
+                aria-label={isFullHeight ? 'Collapse search' : 'Expand search'}
+              >
+                {isFullHeight ? (
+                  <Minimize2 className="w-3 h-3" />
+                ) : (
+                  <Maximize2 className="w-3 h-3" />
+                )}
+              </button>
+            </>
+          )}
+        </div>
+        {isDock && onToggleDockMaximized ? (
+          <div className="relative z-10 flex items-center gap-0.5 rounded-xl bg-gray-500/5 dark:bg-white/[0.04] p-0.5">
+            <DockMaximizeButton
+              isMaximized={isDockMaximized}
+              onToggle={onToggleDockMaximized}
+            />
+          </div>
+        ) : null}
+      </div>
+      <div
+        className={twMerge(
+          'flex-1 pt-3 space-y-4',
+          isDock ? 'px-3 pb-[260px]' : 'px-3 sm:px-4 pb-[220px]',
+        )}
+      >
+        <div className="rounded-xl border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-300">
+          Kapa is not configured. Add{' '}
+          <code className="font-mono">VITE_KAPA_INTEGRATION_ID</code> to enable
+          AI answers.
+        </div>
+        <KapaWelcome
+          selectedLibrary={showSearchResults ? selectedLibrary : ''}
+          selectedFramework={showSearchResults ? selectedFramework : ''}
+          onSuggestion={() => {}}
+          disabled
+          compact={isDock}
+        />
+      </div>
+      <div className="sticky bottom-0">
+        <div className="absolute bottom-full left-0 right-0">
+          <SearchResultsInChat surface={surface} />
+        </div>
+        <InputBar isBusy onAskAISubmit={() => {}} surface={surface} />
+      </div>
+    </section>
+  )
+}
+
+function SearchPanel({
+  isFullHeight,
+  onToggleFullHeight,
+  newChatRequestId,
+  surface,
+  isDockMaximized = false,
+  onToggleDockMaximized,
+}: {
+  isFullHeight: boolean
+  onToggleFullHeight: () => void
+  newChatRequestId: number
+  surface: SearchSurface
+  isDockMaximized?: boolean
+  onToggleDockMaximized?: () => void
+}) {
+  const integrationId = KAPA_INTEGRATION_ID
+  const threadIdOverrideRef = React.useRef<string | null>(null)
+  const apiService = React.useMemo(
+    () => new KapaThreadOverrideApiService(threadIdOverrideRef),
+    [],
+  )
+  const sourceGroupIDsInclude = React.useMemo(
+    () => parseSourceGroupIDs(env.VITE_KAPA_SOURCE_GROUP_IDS),
+    [],
+  )
+
+  React.useEffect(() => {
+    return () => {
+      apiService.abortCurrent()
+    }
+  }, [apiService])
+
+  return (
+    <div
+      className={twMerge(
+        'bg-white/90 dark:bg-black/90 backdrop-blur-lg sm:rounded-[1.75rem] shadow-lg dark:border dark:border-white/20 overflow-hidden',
+        surface === 'dock'
+          ? 'h-full flex flex-col rounded-none sm:rounded-none border-l border-gray-200 bg-white shadow-2xl backdrop-blur-none dark:border-white/10 dark:bg-black'
+          : isFullHeight
+            ? 'flex flex-col h-full'
+            : 'h-dvh sm:h-auto flex flex-col',
+      )}
+    >
+      {integrationId ? (
+        <KapaProvider
+          integrationId={integrationId}
+          sourceGroupIDsInclude={sourceGroupIDsInclude}
+          userTrackingMode="cookie"
+          apiService={apiService}
+        >
+          <KapaChatPanel
+            onReset={() => {}}
+            isFullHeight={isFullHeight}
+            onToggleFullHeight={onToggleFullHeight}
+            threadIdOverrideRef={threadIdOverrideRef}
+            newChatRequestId={newChatRequestId}
+            surface={surface}
+            isDockMaximized={isDockMaximized}
+            onToggleDockMaximized={onToggleDockMaximized}
+          />
+        </KapaProvider>
+      ) : (
+        <KapaUnavailablePanel
+          isFullHeight={isFullHeight}
+          onToggleFullHeight={onToggleFullHeight}
+          surface={surface}
+          isDockMaximized={isDockMaximized}
+          onToggleDockMaximized={onToggleDockMaximized}
+        />
+      )}
+    </div>
+  )
+}
+
+function CommandSearchPanel({
+  isFullHeight,
+  onToggleFullHeight,
+}: {
+  isFullHeight: boolean
+  onToggleFullHeight: () => void
+}) {
+  return (
+    <Command
+      label="Search TanStack"
+      shouldFilter={false}
+      loop
+      className={twMerge(
+        'flex flex-col overflow-hidden bg-white/95 text-left shadow-2xl backdrop-blur-xl dark:border dark:border-white/20 dark:bg-black/95 sm:rounded-[1.5rem]',
+        isFullHeight ? 'h-full' : 'h-dvh sm:h-[min(760px,calc(100dvh-2rem))]',
+      )}
+    >
+      <CommandSearchInput
+        isFullHeight={isFullHeight}
+        onToggleFullHeight={onToggleFullHeight}
+      />
+      <CommandSearchResults />
+    </Command>
+  )
+}
+
+function CommandSearchInput({
+  isFullHeight,
+  onToggleFullHeight,
+}: {
+  isFullHeight: boolean
+  onToggleFullHeight: () => void
+}) {
+  const { closeSearch } = useSearchContext()
+  const { refine } = useSearchBox()
+  const { searchQuery, setSearchQuery } = useSearchFilters()
+  const hasQuery = searchQuery.trim().length > 0
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  React.useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      inputRef.current?.focus({ preventScroll: true })
+    })
+
+    return () => cancelAnimationFrame(frame)
+  }, [])
+
+  const clearSearch = React.useCallback(() => {
+    setSearchQuery('')
+    refine('')
+  }, [refine, setSearchQuery])
+
+  return (
+    <header className="flex-none border-b border-gray-200/80 bg-white/95 px-3 py-3 dark:border-white/10 dark:bg-black/95 sm:px-4">
+      <div className="flex items-center gap-2">
+        <div className="flex min-w-0 flex-1 items-center gap-3 rounded-xl border border-gray-200 bg-gray-500/[0.04] px-3 py-2.5 shadow-sm dark:border-white/10 dark:bg-white/[0.06]">
+          <Search className="h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500" />
+          <Command.Input
+            ref={inputRef}
+            aria-label="Search TanStack"
+            placeholder="Search TanStack..."
+            value={searchQuery}
+            onValueChange={(nextQuery) => {
+              setSearchQuery(nextQuery)
+              refine(nextQuery)
+            }}
+            className="w-full bg-transparent text-base text-gray-900 outline-none placeholder:text-gray-400 dark:text-white dark:placeholder:text-gray-500 [&::-webkit-search-cancel-button]:hidden"
+          />
+          <button
+            type="button"
+            onClick={clearSearch}
+            className={twMerge(
+              'flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-gray-400 transition-opacity hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200',
+              hasQuery ? 'opacity-100' : 'pointer-events-none opacity-0',
+            )}
+            tabIndex={-1}
+            aria-label="Clear search"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <button
+          type="button"
+          onClick={onToggleFullHeight}
+          className="hidden h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-400 shadow-sm transition-colors hover:text-gray-700 dark:border-white/10 dark:bg-white/[0.06] dark:text-gray-500 dark:hover:text-gray-200 sm:flex"
+          aria-label={isFullHeight ? 'Collapse search' : 'Expand search'}
+        >
+          {isFullHeight ? (
+            <Minimize2 className="h-4 w-4" />
+          ) : (
+            <Maximize2 className="h-4 w-4" />
+          )}
+        </button>
+        <button
+          type="button"
+          onClick={closeSearch}
+          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-400 shadow-sm transition-colors hover:text-gray-700 dark:border-white/10 dark:bg-white/[0.06] dark:text-gray-500 dark:hover:text-gray-200"
+          aria-label="Close search"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+    </header>
+  )
+}
+
+function CommandSearchResults() {
+  const { results } = useInstantSearch()
+  const { hits, isLastPage, showMore } = useInfiniteHits<AlgoliaHit>({
+    transformItems: dedupeSearchHitsByPage,
+  })
+  const sentinelRef = React.useRef<HTMLDivElement>(null)
+  const resultsScrollRef = React.useRef<HTMLDivElement>(null)
+
+  const {
+    selectedLibrary,
+    selectedFramework,
+    setSelectedLibrary,
+    setSelectedFramework,
+    searchQuery,
+  } = useSearchFilters()
+
+  const refinedLibrary = selectedLibrary || null
+  const refinedFramework = selectedFramework || null
+  const trimmedQuery = searchQuery.trim()
+  const hasQuery = trimmedQuery.length > 0
+
+  const clearFramework = () => {
+    setSelectedFramework('')
+  }
+
+  const clearLibrary = () => {
+    setSelectedLibrary('')
+  }
+
+  const resultSummary = results.__isArtificial ? (
+    <>Searching for &ldquo;{trimmedQuery}&rdquo;</>
+  ) : results.nbHits > 0 ? (
+    <>
+      Results for{' '}
+      <span className="font-medium text-gray-600 dark:text-gray-300">
+        &ldquo;{trimmedQuery}&rdquo;
+      </span>
+    </>
+  ) : (
+    <>No results for &ldquo;{trimmedQuery}&rdquo;</>
+  )
+
+  React.useEffect(() => {
+    const sentinel = sentinelRef.current
+    if (!sentinel || !hasQuery || !hits.length) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !isLastPage) {
+            showMore()
+          }
+        })
+      },
+      { root: resultsScrollRef.current, rootMargin: '260px' },
+    )
+
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [hasQuery, hits, isLastPage, showMore])
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex-none border-b border-gray-200/80 px-3 py-2 dark:border-white/10 sm:px-4">
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+          <div
+            className="flex min-w-0 flex-wrap items-center gap-1.5"
+            data-command-search-controls="true"
+          >
+            <FrameworkRefinement compact />
+            <LibraryRefinement compact />
+          </div>
+          {hasQuery ? (
+            <p className="min-w-[10rem] flex-1 truncate text-xs text-gray-500 dark:text-gray-400">
+              {resultSummary}
+            </p>
+          ) : null}
+          <div className="ml-auto flex shrink-0 items-center">
+            <AlgoliaAttribution />
+          </div>
+        </div>
+      </div>
+      <Command.List
+        ref={resultsScrollRef}
+        className="min-h-0 flex-1 overflow-y-auto scroll-py-2"
+        label="Search results"
+      >
+        {hasQuery ? (
+          <>
+            <AskAIResult query={trimmedQuery} />
+            <NoResults
+              refinedFramework={refinedFramework}
+              refinedLibrary={refinedLibrary}
+              clearFramework={clearFramework}
+              clearLibrary={clearLibrary}
+            />
+            {hits.map((hit, index) => (
+              <Hit
+                key={hit.objectID}
+                commandValue={`hit-${hit.objectID}-${index}`}
+                hit={hit}
+                refinedLibrary={refinedLibrary}
+                refinedFramework={refinedFramework}
+              />
+            ))}
+            <div ref={sentinelRef} className="h-4" aria-hidden="true" />
+          </>
+        ) : (
+          <div className="flex h-full items-center justify-center px-6 py-16 text-sm text-gray-400 dark:text-gray-500">
+            Search TanStack
+          </div>
+        )}
+      </Command.List>
+    </div>
+  )
+}
+
+function AskAIResult({ query }: { query: string }) {
+  const { askAiDock } = useSearchContext()
+
+  return (
+    <Command.Item
+      value="ask-ai"
+      onSelect={() => askAiDock(query)}
+      className={twMerge(
+        'flex w-full cursor-pointer scroll-my-2 items-center gap-3 border-b border-gray-200 px-4 py-3 text-left outline-none transition-colors dark:border-white/10',
+        'hover:bg-gray-500/10 data-[selected=true]:bg-cyan-500/10 dark:data-[selected=true]:bg-cyan-400/10',
+      )}
+    >
+      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-cyan-500/10 text-cyan-700 dark:bg-cyan-400/15 dark:text-cyan-300">
+        <MessageSquarePlus className="h-4 w-4" />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block text-sm font-semibold text-gray-900 dark:text-white">
+          Ask AI
+        </span>
+        <span className="block truncate text-xs text-gray-500 dark:text-gray-400">
+          Open TanStack AI with this query
+        </span>
+      </span>
+      <CornerDownLeft className="h-4 w-4 shrink-0 text-gray-300 dark:text-gray-600" />
+    </Command.Item>
+  )
+}
+
+function InputBar({
+  isBusy,
+  onAskAISubmit,
+  onStop,
+  surface,
+}: {
+  isBusy: boolean
+  onAskAISubmit: (question: string) => void
+  onStop?: () => void
+  surface: SearchSurface
+}) {
+  const { refine } = useSearchBox()
+  const { searchQuery, setSearchQuery } = useSearchFilters()
+  const trimmedQuery = searchQuery.trim()
+  const hasQuery = trimmedQuery.length > 0
+  const canAsk = trimmedQuery.length >= 3 && !isBusy
+  const canStop = isBusy && !!onStop
+  const isDock = surface === 'dock'
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  React.useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      inputRef.current?.focus({ preventScroll: true })
+    })
+
+    return () => cancelAnimationFrame(frame)
+  }, [])
+
+  const submitQuestion = React.useCallback(() => {
+    if (!canAsk) return
+
+    setSearchQuery('')
+    refine('')
+    onAskAISubmit(trimmedQuery)
+  }, [canAsk, onAskAISubmit, refine, setSearchQuery, trimmedQuery])
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault()
+
+    submitQuestion()
+  }
+
+  return (
+    <div className={twMerge('flex-none px-3', isDock ? 'pb-4' : 'pb-3')}>
+      <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/[0.06] shadow-sm overflow-visible">
+        <div className="flex items-center gap-2 px-3 py-2.5">
+          <Search className="w-4 h-4 opacity-30 flex-none" />
+          <form className="flex-1 min-w-0" onSubmit={handleSubmit}>
+            <input
+              ref={inputRef}
+              type="search"
+              aria-label="Search"
+              placeholder={
+                isDock
+                  ? 'Ask AI or search docs...'
+                  : 'Search or ask a question...'
+              }
+              value={searchQuery}
+              onChange={(event) => {
+                const nextQuery = event.target.value
+                setSearchQuery(nextQuery)
+                refine(nextQuery)
+              }}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault()
+                  submitQuestion()
+                }
+              }}
+              className={twMerge(
+                'w-full outline-none [&::-webkit-search-cancel-button]:hidden bg-transparent text-gray-800 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500',
+                isDock ? 'text-[13px]' : 'text-sm',
+              )}
+            />
+            <button type="submit" className="hidden" tabIndex={-1}>
+              Search
+            </button>
+          </form>
+
+          <button
+            type="button"
+            onClick={() => {
+              setSearchQuery('')
+              refine('')
+            }}
+            className={twMerge(
+              'flex-none w-5 h-5 flex items-center justify-center rounded transition-opacity',
+              hasQuery
+                ? 'opacity-40 hover:opacity-70 cursor-pointer'
+                : 'opacity-0 pointer-events-none',
+            )}
+            tabIndex={-1}
+            aria-label="Clear search"
+          >
+            <X className="w-3.5 h-3.5" />
+          </button>
+          <SearchResultsToggle />
+
+          <button
+            type="button"
+            onClick={canStop ? onStop : submitQuestion}
+            disabled={!canStop && !canAsk}
+            className={twMerge(
+              'flex items-center justify-center w-7 h-7 rounded-full transition-all',
+              canAsk || canStop
+                ? 'bg-gray-900 dark:bg-white text-white dark:text-black hover:opacity-80'
+                : 'bg-gray-200 dark:bg-white/10 text-gray-400 dark:text-gray-600 cursor-default',
+            )}
+            aria-label={canStop ? 'Stop generating answer' : 'Ask AI'}
+          >
+            {canStop ? (
+              <span className="w-2 h-2 rounded-[1px] bg-current" />
+            ) : (
+              <ArrowUp className="w-3.5 h-3.5" />
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SearchResultsToggle() {
+  const { showSearchResults, toggleShowSearchResults } = useSearchFilters()
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const [tooltipRect, setTooltipRect] = React.useState<DOMRect | null>(null)
+  const tooltipText = showSearchResults
+    ? 'Hide search results'
+    : 'Show search results'
+
+  const showTooltip = () => {
+    const rect = buttonRef.current?.getBoundingClientRect()
+    if (rect) {
+      setTooltipRect(rect)
+    }
+  }
+
+  const hideTooltip = () => {
+    setTooltipRect(null)
+  }
+
+  return (
+    <div className="relative flex-none">
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={toggleShowSearchResults}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+        onFocus={showTooltip}
+        onBlur={hideTooltip}
+        aria-pressed={showSearchResults}
+        aria-label={tooltipText}
+        className={twMerge(
+          'p-1.5 rounded transition-colors focus:outline-none',
+          showSearchResults
+            ? 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
+            : 'text-gray-300 dark:text-gray-600 hover:text-gray-400 dark:hover:text-gray-400',
+        )}
+      >
+        {showSearchResults ? (
+          <SearchSlash className="w-[18px] h-[18px]" />
+        ) : (
+          <Search className="w-[18px] h-[18px]" />
+        )}
+      </button>
+      {tooltipRect && typeof document !== 'undefined'
+        ? createPortal(
+            <div
+              className="pointer-events-none fixed z-[1200] whitespace-nowrap px-2.5 py-1.5 rounded-md bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs shadow-lg"
+              style={{
+                top: tooltipRect.top - 8,
+                left: tooltipRect.right,
+                transform: 'translate(-100%, -100%)',
+              }}
+            >
+              {tooltipText}
+              <div className="absolute right-2 -bottom-1 w-2 h-2 bg-gray-900 dark:bg-gray-100 rotate-45" />
+            </div>,
+            document.body,
+          )
+        : null}
+    </div>
+  )
+}
+
+function SearchResultsInChat({ surface }: { surface: SearchSurface }) {
+  const { results } = useInstantSearch()
+  const { hits, isLastPage, showMore } = useInfiniteHits<AlgoliaHit>({
+    transformItems: dedupeSearchHitsByPage,
+  })
+  const sentinelRef = React.useRef<HTMLDivElement>(null)
+  const resultsScrollRef = React.useRef<HTMLDivElement>(null)
+
+  const {
+    selectedLibrary,
+    selectedFramework,
+    setSelectedLibrary,
+    setSelectedFramework,
+    searchQuery,
+    showSearchResults,
+    hideSearchResults,
+  } = useSearchFilters()
+
+  const refinedLibrary = selectedLibrary || null
+  const refinedFramework = selectedFramework || null
+  const trimmedQuery = searchQuery.trim()
+  const hasQuery = trimmedQuery.length > 0
+  const isOpen = hasQuery && showSearchResults
+  const isDock = surface === 'dock'
+
+  const clearFramework = () => {
+    setSelectedFramework('')
+  }
+
+  const clearLibrary = () => {
+    setSelectedLibrary('')
+  }
+
+  const hideSearchResultsButton = (
+    <button
+      type="button"
+      onClick={hideSearchResults}
+      aria-label="Hide search results"
+      className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-gray-900 text-white shadow-sm transition-colors hover:bg-gray-700 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
+    >
+      <X className="w-3 h-3" />
+    </button>
+  )
+
+  const resultSummary =
+    hits.length > 0 ? (
+      <>
+        {results.nbHits} page{results.nbHits === 1 ? '' : 's'} for{' '}
+        <span className="font-medium text-gray-500 dark:text-gray-400">
+          &ldquo;{trimmedQuery}&rdquo;
+        </span>
+      </>
+    ) : (
+      <>No pages found for &ldquo;{trimmedQuery}&rdquo;</>
+    )
+
+  React.useEffect(() => {
+    const sentinel = sentinelRef.current
+    if (!sentinel || !hits.length) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !isLastPage) {
+            showMore()
+          }
+        })
+      },
+      { root: resultsScrollRef.current, rootMargin: '200px' },
+    )
+
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [hits, isLastPage, showMore])
+
+  return (
+    <div
+      className="overflow-hidden transition-[height] duration-300"
+      style={{
+        height: isOpen ? (isDock ? '260px' : '210px') : '0px',
+        transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      }}
+    >
+      <div className={isDock ? 'px-3' : 'px-6'}>
+        <div className="rounded-t-2xl rounded-b-none border border-b-0 border-gray-200 dark:border-white/10 overflow-hidden bg-white dark:bg-white/[0.06]">
+          <div
+            className={twMerge(
+              'px-3 py-1.5 border-b border-gray-100 dark:border-white/[0.06] flex gap-2',
+              isDock ? 'flex-col items-stretch' : 'items-center',
+            )}
+          >
+            {isDock ? (
+              <>
+                <div className="flex min-w-0 items-center gap-2">
+                  <p className="flex-1 text-[11px] text-gray-400 dark:text-gray-500 min-w-0 truncate">
+                    {resultSummary}
+                  </p>
+                  {hideSearchResultsButton}
+                </div>
+                <div className="flex items-center justify-end">
+                  <AlgoliaAttribution />
+                </div>
+                <div className="flex min-w-0 items-center gap-2">
+                  <FrameworkRefinement compact />
+                  <LibraryRefinement compact />
+                </div>
+              </>
+            ) : (
+              <>
+                <p className="flex-1 text-[11px] text-gray-400 dark:text-gray-500 min-w-0 truncate">
+                  {resultSummary}
+                </p>
+                <div className="ml-auto flex min-w-0 items-center justify-end gap-1.5">
+                  <FrameworkRefinement compact />
+                  <LibraryRefinement compact />
+                  <AlgoliaAttribution />
+                  {hideSearchResultsButton}
+                </div>
+              </>
+            )}
+          </div>
+          <div
+            ref={resultsScrollRef}
+            className={twMerge(
+              'overflow-y-auto',
+              isDock ? 'h-[210px]' : 'h-[180px]',
+            )}
+            role="listbox"
+            aria-label="Search results"
+          >
+            <NoResults
+              refinedFramework={refinedFramework}
+              refinedLibrary={refinedLibrary}
+              clearFramework={clearFramework}
+              clearLibrary={clearLibrary}
+            />
+            {hits.map((hit) => (
+              <Hit
+                key={hit.objectID}
+                hit={hit}
+                refinedLibrary={refinedLibrary}
+                refinedFramework={refinedFramework}
+              />
+            ))}
+            <div ref={sentinelRef} className="h-2" aria-hidden="true" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
 
 const Hit = ({
   hit,
+  commandValue,
   isFocused,
   refinedLibrary,
   refinedFramework,
 }: {
   hit: AlgoliaHit
+  commandValue?: string
   isFocused?: boolean
   refinedLibrary: string | null
   refinedFramework: string | null
 }) => {
   const { closeSearch } = useSearchContext()
+  const persistFramework = usePersistFrameworkPreference()
+
+  const handleActivate = () => {
+    const framework = hit.framework
+    if (
+      framework &&
+      shouldPersistFrameworkForHit({
+        url: hit.url,
+        framework,
+        routeStyle: hit.routeStyle,
+      })
+    ) {
+      persistFramework(framework)
+    }
+
+    closeSearch()
+  }
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault()
+      e.stopPropagation()
       const link = e.currentTarget as HTMLAnchorElement
       link.click()
-      closeSearch()
     }
   }
 
   const handleClick = () => {
-    closeSearch()
+    handleActivate()
+  }
+
+  const handleCommandSelect = () => {
+    handleActivate()
+    if (typeof window !== 'undefined') {
+      window.location.assign(hitUrl)
+    }
   }
 
   const ref = React.useRef<HTMLAnchorElement>(null!)
@@ -435,12 +2983,13 @@ const Hit = ({
 
   // Get library and framework info for this hit
   const hitLibrary = hit.library as string | undefined
-  const hitFramework = frameworkOptions.find((f) =>
-    hit.url.includes(`/framework/${f.value}`),
-  )
+  const hitFramework =
+    frameworkOptions.find((f) => f.value === hit.framework) ??
+    frameworkOptions.find((f) => hit.url.includes(`/framework/${f.value}`))
   const hitLibraryInfo = hitLibrary
-    ? libraries.find((l) => l.id === hitLibrary)
+    ? publicLibraries.find((l) => l.id === hitLibrary)
     : null
+  const hitUrl = hit.urlWithAnchor ?? hit.url
 
   // Build hierarchy prefix based on what's filtered
   const prefixParts: React.ReactNode[] = []
@@ -451,8 +3000,8 @@ const Hit = ({
       <span
         key="library"
         className={twMerge(
-          'inline-flex items-center px-2 py-0.5 rounded text-xs font-black text-white uppercase',
-          hitLibraryInfo.bgStyle,
+          'inline-flex items-center text-[11px] font-black uppercase',
+          hitLibraryInfo.textStyle || 'text-gray-500 dark:text-gray-400',
         )}
       >
         {hitLibraryInfo.id}
@@ -465,12 +3014,15 @@ const Hit = ({
     prefixParts.push(
       <span
         key="framework"
-        className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-bold bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400"
+        className={twMerge(
+          'inline-flex items-center gap-1 text-[11px] font-semibold',
+          hitFramework.fontColor,
+        )}
       >
         <img
           src={hitFramework.logo}
           alt={hitFramework.label}
-          className="w-3.5 h-3.5"
+          className="w-3 h-3"
         />
         {capitalize(hitFramework.label)}
       </span>,
@@ -486,9 +3038,83 @@ const Hit = ({
     'lvl6',
   ].filter((lvl) => hit.hierarchy[lvl])
 
+  const content = (
+    <article className="flex items-start gap-4">
+      <div className="flex-1">
+        <h3 className="text-xs leading-relaxed text-gray-900 dark:text-white flex items-center gap-1.5 flex-wrap">
+          {prefixParts.length > 0 && (
+            <>
+              {prefixParts.map((part, i) => (
+                <React.Fragment key={i}>
+                  {part}
+                  <span className="text-gray-400 dark:text-gray-600 text-xs">
+                    ›
+                  </span>
+                </React.Fragment>
+              ))}
+            </>
+          )}
+          {hierarchyLevels.map((lvl, i, arr) => (
+            <React.Fragment key={lvl}>
+              <span className="text-gray-600 dark:text-gray-400 [&_mark]:font-semibold [&_mark]:!bg-transparent [&_mark]:text-black [&_mark]:dark:text-white [&_mark]:inline [&_mark]:!p-0 [&_mark]:!m-0 [&_mark]:!rounded-none">
+                <DecodedHighlight attribute={`hierarchy.${lvl}`} hit={hit} />
+              </span>
+              {i < arr.length - 1 && (
+                <span className="text-gray-400 dark:text-gray-600 text-xs">
+                  ›
+                </span>
+              )}
+            </React.Fragment>
+          ))}
+        </h3>
+        {hit.content ? (
+          <p className="text-[11px] leading-relaxed text-gray-600 dark:text-gray-400 mt-0.5 line-clamp-2 [&_mark]:font-semibold [&_mark]:!bg-transparent [&_mark]:text-black [&_mark]:dark:text-white [&_mark]:inline [&_mark]:!p-0 [&_mark]:!m-0 [&_mark]:!rounded-none">
+            <Snippet
+              attribute="content"
+              hit={hit as Parameters<typeof Snippet>[0]['hit']}
+            />
+          </p>
+        ) : null}
+      </div>
+      {refinedFramework && hitFramework ? (
+        <div className="flex-none">
+          <div
+            className={twMerge(
+              'flex items-center gap-1 text-[11px] font-semibold',
+              hitFramework.fontColor,
+            )}
+          >
+            <img
+              src={hitFramework.logo}
+              alt={hitFramework.label}
+              className="w-3 h-3"
+            />
+            {capitalize(hitFramework.label)}
+          </div>
+        </div>
+      ) : null}
+    </article>
+  )
+
+  if (commandValue) {
+    return (
+      <Command.Item
+        value={commandValue}
+        onSelect={handleCommandSelect}
+        className={twMerge(
+          'block cursor-pointer scroll-my-2 px-4 py-2.5 focus:outline-none border-b border-gray-300 dark:border-gray-700',
+          'hover:bg-gray-500/10 data-[selected=true]:bg-gray-500/20',
+        )}
+        data-search-hit="true"
+      >
+        {content}
+      </Command.Item>
+    )
+  }
+
   return (
     <SafeLink
-      href={hit.url}
+      href={hitUrl}
       className={twMerge(
         'block px-4 py-2.5 focus:outline-none border-b border-gray-300 dark:border-gray-700',
         isFocused ? 'bg-gray-500/20' : 'hover:bg-gray-500/10',
@@ -499,92 +3125,51 @@ const Hit = ({
       role="option"
       aria-selected={isFocused}
       tabIndex={-1}
+      data-search-hit="true"
       ref={ref}
     >
-      <article className="flex items-start gap-4">
-        <div className="flex-1">
-          <h3 className="text-sm text-gray-900 dark:text-white flex items-center gap-1.5 flex-wrap pl-8 [&>*:first-child]:-ml-8">
-            {prefixParts.length > 0 && (
-              <>
-                {prefixParts.map((part, i) => (
-                  <React.Fragment key={i}>
-                    {part}
-                    <span className="text-gray-400 dark:text-gray-600 text-xs">
-                      ›
-                    </span>
-                  </React.Fragment>
-                ))}
-              </>
-            )}
-            {hierarchyLevels.map((lvl, i, arr) => (
-              <React.Fragment key={lvl}>
-                <span className="text-gray-600 dark:text-gray-400 [&_mark]:font-black [&_mark]:!bg-transparent [&_mark]:text-black [&_mark]:dark:text-white [&_mark]:inline [&_mark]:!p-0 [&_mark]:!m-0 [&_mark]:!rounded-none">
-                  <DecodedHighlight attribute={`hierarchy.${lvl}`} hit={hit} />
-                </span>
-                {i < arr.length - 1 && (
-                  <span className="text-gray-400 dark:text-gray-600 text-xs">
-                    ›
-                  </span>
-                )}
-              </React.Fragment>
-            ))}
-          </h3>
-          {hit.content ? (
-            <p className="text-xs text-gray-600 dark:text-gray-400 mt-0.5 ml-8 line-clamp-2 [&_mark]:font-black [&_mark]:!bg-transparent [&_mark]:text-black [&_mark]:dark:text-white [&_mark]:inline [&_mark]:!p-0 [&_mark]:!m-0 [&_mark]:!rounded-none">
-              <Snippet
-                attribute="content"
-                hit={hit as Parameters<typeof Snippet>[0]['hit']}
-              />
-            </p>
-          ) : null}
-        </div>
-        {refinedFramework && hitFramework ? (
-          <div className="flex-none">
-            <div className="flex items-center gap-1 text-xs font-black bg-white rounded-xl px-2 py-1 dark:bg-black">
-              <img
-                src={hitFramework.logo}
-                alt={hitFramework.label}
-                className="w-4"
-              />
-              {capitalize(hitFramework.label)}
-            </div>
-          </div>
-        ) : null}
-      </article>
+      {content}
     </SafeLink>
   )
 }
 
-function LibraryRefinement() {
+type SearchScopePickerProps = {
+  compact?: boolean
+}
+
+function LibraryRefinement({ compact = false }: SearchScopePickerProps) {
   const {
     selectedLibrary,
     setSelectedLibrary,
     libraryItems: items,
   } = useSearchFilters()
 
-  const currentLibrary = libraries.find((l) => l.id === selectedLibrary)
+  const currentLibrary = publicLibraries.find((l) => l.id === selectedLibrary)
 
   return (
-    <Dropdown>
-      <DropdownTrigger asChild={false}>
-        <button className="flex items-center gap-1 text-sm focus:outline-none cursor-pointer font-bold">
+    <Dropdown modal={false}>
+      <DropdownTrigger>
+        <button
+          type="button"
+          className={twMerge(
+            'flex min-w-0 items-center gap-1 p-0.5 cursor-pointer font-bold rounded focus:ring-2 text-gray-900 dark:text-gray-100',
+            compact ? 'max-w-[10rem] text-xs' : 'text-sm',
+          )}
+        >
           {currentLibrary ? (
-            <span className="uppercase font-black [letter-spacing:-.05em]">
+            <span className="min-w-0 truncate uppercase font-black">
               <span className="opacity-50">TanStack</span>{' '}
               <span className={currentLibrary.textStyle}>
                 {currentLibrary.id.toUpperCase()}
               </span>
             </span>
           ) : (
-            <span>All Libraries</span>
+            <span className="truncate">All Libraries</span>
           )}
-          <ChevronDown className="w-3.5 h-3.5 opacity-50" />
+          <ChevronDown className="w-3 h-3 opacity-50 shrink-0" />
         </button>
       </DropdownTrigger>
-      <DropdownContent
-        align="start"
-        className="max-h-[60vh] w-64 overflow-auto"
-      >
+      <DropdownContent align="end" className="max-h-[60vh] w-64 overflow-auto">
         <DropdownItem
           onSelect={() => setSelectedLibrary('')}
           className="font-bold"
@@ -592,22 +3177,19 @@ function LibraryRefinement() {
           All Libraries
         </DropdownItem>
         {items.map((item) => {
-          const lib = libraries.find((l) => l.id === item.value)
+          const lib = publicLibraries.find((l) => l.id === item.value)
           return (
             <DropdownItem
               key={item.value}
               onSelect={() => setSelectedLibrary(item.value)}
               className="justify-between"
             >
-              <span className="uppercase font-black [letter-spacing:-.05em]">
+              <span className="uppercase font-black">
                 <span className="opacity-50">TanStack</span>{' '}
                 <span className={lib?.textStyle ?? ''}>
                   {item.label.toUpperCase()}
                 </span>
               </span>
-              <span className="text-gray-400 text-xs font-normal">
-                ({item.count})
-              </span>
             </DropdownItem>
           )
         })}
@@ -616,7 +3198,7 @@ function LibraryRefinement() {
   )
 }
 
-function FrameworkRefinement() {
+function FrameworkRefinement({ compact = false }: SearchScopePickerProps) {
   const {
     selectedFramework,
     setSelectedFramework,
@@ -637,28 +3219,35 @@ function FrameworkRefinement() {
   )
 
   return (
-    <Dropdown>
-      <DropdownTrigger asChild={false}>
-        <button className="flex items-center gap-1 text-sm font-bold focus:outline-none cursor-pointer">
+    <Dropdown modal={false}>
+      <DropdownTrigger>
+        <button
+          type="button"
+          className={twMerge(
+            'flex min-w-0 items-center gap-1 p-0.5 font-bold rounded cursor-pointer focus:ring-2 text-gray-900 dark:text-gray-100',
+            compact ? 'max-w-[9rem] text-xs' : 'text-sm',
+          )}
+        >
           {currentFramework && (
             <img
               src={currentFramework.logo}
-              alt={currentFramework.label}
-              className="w-4 h-4"
+              alt=""
+              aria-hidden="true"
+              className={twMerge(
+                'shrink-0',
+                compact ? 'w-3.5 h-3.5' : 'w-4 h-4',
+              )}
             />
           )}
-          <span>
+          <span className="truncate">
             {currentFramework
               ? capitalize(currentFramework.label)
               : 'All Frameworks'}
           </span>
-          <ChevronDown className="w-3.5 h-3.5 opacity-50" />
+          <ChevronDown className="w-3 h-3 opacity-50 shrink-0" />
         </button>
       </DropdownTrigger>
-      <DropdownContent
-        align="start"
-        className="max-h-[60vh] w-52 overflow-auto"
-      >
+      <DropdownContent align="end" className="max-h-[60vh] w-52 overflow-auto">
         <DropdownItem onSelect={() => handleSelect('')} className="font-bold">
           All Frameworks
         </DropdownItem>
@@ -671,10 +3260,16 @@ function FrameworkRefinement() {
               className="justify-between"
             >
               <span className="flex items-center gap-2">
-                {fw && <img src={fw.logo} alt={fw.label} className="w-4 h-4" />}
+                {fw && (
+                  <img
+                    src={fw.logo}
+                    alt=""
+                    aria-hidden="true"
+                    className="w-4 h-4"
+                  />
+                )}
                 <span className="font-bold">{capitalize(item.label)}</span>
               </span>
-              <span className="text-gray-400 text-xs">({item.count})</span>
             </DropdownItem>
           )
         })}
@@ -704,7 +3299,7 @@ function NoResults({
     ? frameworkOptions.find((f) => f.value === refinedFramework)
     : null
   const currentLibrary = refinedLibrary
-    ? libraries.find((l) => l.id === refinedLibrary)
+    ? publicLibraries.find((l) => l.id === refinedLibrary)
     : null
 
   return (
@@ -717,8 +3312,6 @@ function NoResults({
         <div className="mt-4 inline-flex items-center gap-2">
           <button
             onClick={clearFramework}
-            role="option"
-            aria-selected="true"
             className="inline-flex items-center gap-2 px-4 py-2 text-sm font-bold rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors shadow-sm"
           >
             Search all frameworks
@@ -735,8 +3328,6 @@ function NoResults({
         <div className="mt-4 inline-flex items-center gap-2">
           <button
             onClick={clearLibrary}
-            role="option"
-            aria-selected="true"
             className="inline-flex items-center gap-2 px-4 py-2 text-sm font-bold rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors shadow-sm"
           >
             Search all libraries
@@ -757,292 +3348,408 @@ const _submitIconComponent = () => {
   return <Search />
 }
 
-const resetIconComponent = () => {
-  return <X />
+function isSearchModalPortalTarget(target: EventTarget | null) {
+  return target instanceof Element && !!target.closest('.dropdown-content')
 }
 
+const searchModalTransitionMs = 140
+
 export function SearchModal() {
-  const { isOpen, closeSearch, openSearch } = useSearchContext()
-  const [focusedIndex, setFocusedIndex] = React.useState(0)
-  const containerRef = React.useRef<HTMLDivElement>(null)
+  const { isOpen, closeSearch } = useSearchContext()
+  const contentRef = React.useRef<HTMLDivElement>(null)
+  const bodyPointerEventsRef = React.useRef('')
+  const [shouldRenderSearch, setShouldRenderSearch] = React.useState(isOpen)
+  const [isFullHeight, setIsFullHeight] = React.useState(() => {
+    if (typeof window === 'undefined') return false
+    return localStorage.getItem('search-full-height') === 'true'
+  })
+
+  const toggleFullHeight = React.useCallback(() => {
+    setIsFullHeight((current) => {
+      const next = !current
+      localStorage.setItem('search-full-height', String(next))
+      return next
+    })
+  }, [])
 
-  // Reset focused index when modal opens
   React.useEffect(() => {
     if (isOpen) {
-      setFocusedIndex(0)
+      setShouldRenderSearch(true)
+      return
     }
+
+    const timeout = window.setTimeout(() => {
+      setShouldRenderSearch(false)
+      requestAnimationFrame(() => {
+        document.body.style.pointerEvents = bodyPointerEventsRef.current
+      })
+    }, searchModalTransitionMs)
+
+    return () => window.clearTimeout(timeout)
   }, [isOpen])
 
-  const focusedIndexRef = React.useRef(focusedIndex)
+  React.useEffect(() => {
+    if (!isOpen) {
+      return
+    }
+
+    const frame = requestAnimationFrame(() => {
+      contentRef.current
+        ?.querySelector<HTMLInputElement>('input[type="search"]')
+        ?.focus({ preventScroll: true })
+    })
+
+    return () => cancelAnimationFrame(frame)
+  }, [isOpen])
 
   React.useEffect(() => {
-    focusedIndexRef.current = focusedIndex
-  }, [focusedIndex])
+    if (typeof document === 'undefined') {
+      return
+    }
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    e.persist()
-
-    if (!containerRef.current) return
-
-    const items = containerRef.current.querySelectorAll('[role="option"]')
-    if (!items.length) return
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault()
-        setFocusedIndex((prev) => Math.min(prev + 1, items.length - 1))
-        break
-      case 'ArrowUp':
-        e.preventDefault()
-        setFocusedIndex((prev) => Math.max(prev - 1, 0))
-        break
-      case 'Home':
-        e.preventDefault()
-        setFocusedIndex(0)
-        break
-      case 'End':
-        e.preventDefault()
-        setFocusedIndex(items.length - 1)
-        break
-      case 'Enter':
-        e.preventDefault()
-        const item = items[focusedIndexRef.current] as HTMLElement
-        if (item) {
-          item.click()
-        }
-        break
-      case 'Escape':
-        e.preventDefault()
-        closeSearch()
-        break
+    if (isOpen) {
+      document.body.style.pointerEvents = 'none'
+      return
     }
-  }
+
+    const frame = requestAnimationFrame(() => {
+      document.body.style.pointerEvents = bodyPointerEventsRef.current
+    })
+
+    return () => cancelAnimationFrame(frame)
+  }, [isOpen])
 
   React.useEffect(() => {
-    const handleGlobalKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault()
-        if (!isOpen) {
-          openSearch()
-        }
-      }
+    if (typeof document === 'undefined') {
+      return
     }
 
-    window.addEventListener('keydown', handleGlobalKeyDown)
+    bodyPointerEventsRef.current =
+      document.body.style.pointerEvents === 'none'
+        ? ''
+        : document.body.style.pointerEvents
 
     return () => {
-      window.removeEventListener('keydown', handleGlobalKeyDown)
+      document.body.style.pointerEvents = bodyPointerEventsRef.current
     }
-  }, [isOpen, openSearch])
+  }, [])
+
+  const shouldMountSearch = isOpen || shouldRenderSearch
 
   return (
-    <DialogPrimitive.Root open={isOpen} onOpenChange={closeSearch}>
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="fixed inset-0 z-[999] bg-black/60 xl:bg-black/30 backdrop-blur-sm" />
-        <DialogPrimitive.Content
-          className="fixed z-[1000] top-8 left-1/2 -translate-x-1/2 w-[98%] xl:w-full max-w-3xl text-left bg-white/80 dark:bg-black/80 shadow-lg rounded-lg xl:rounded-xl divide-y divide-gray-500/20 backdrop-blur-lg dark:border dark:border-white/20 outline-none"
-          ref={containerRef}
-          onKeyDown={handleKeyDown}
-        >
-          <InstantSearch searchClient={searchClient} indexName="tanstack-test">
-            <SearchFiltersProvider>
-              <DynamicFilters />
-              <div className="flex items-center gap-2 px-4 py-3 overflow-visible">
-                <Search className="w-5 h-5 opacity-50 flex-none" />
-                <LibraryRefinement />
-                <span className="text-gray-400 dark:text-gray-600">/</span>
-                <FrameworkRefinement />
-                <span className="text-gray-400 dark:text-gray-600">/</span>
-                <SearchBox
-                  placeholder="Search..."
-                  classNames={{
-                    root: 'flex-1',
-                    form: 'flex items-center',
-                    input:
-                      'w-full outline-none font-bold [&::-webkit-search-cancel-button]:hidden bg-transparent',
-                    submit: 'hidden',
-                    reset: 'p-1 opacity-50 hover:opacity-100',
-                  }}
-                  resetIconComponent={resetIconComponent}
-                  // eslint-disable-next-line jsx-a11y/no-autofocus
-                  autoFocus
-                />
-              </div>
-              <SearchResults focusedIndex={focusedIndex} />
-              <div className="flex items-center justify-end gap-1.5 px-4 py-2 text-xs text-gray-400 dark:text-gray-500 border-t border-gray-500/20">
-                <span>Search by</span>
-                <a
-                  href="https://www.algolia.com/developers/?utm_medium=referral&utm_content=powered_by&utm_source=tanstack.com&utm_campaign=docsearch"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center gap-1 hover:opacity-70 transition-opacity"
+    <DialogPrimitive.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          closeSearch()
+        }
+      }}
+    >
+      <DialogPrimitive.Portal forceMount>
+        {shouldMountSearch ? (
+          <>
+            <DialogPrimitive.Overlay
+              forceMount
+              className="search-modal-overlay fixed inset-0 z-[999] bg-black/60 backdrop-blur-sm xl:bg-black/30"
+            />
+            <DialogPrimitive.Content
+              forceMount
+              ref={contentRef}
+              className={twMerge(
+                'search-modal-content fixed z-[1000] inset-0 sm:inset-auto sm:top-4 sm:left-1/2 sm:-translate-x-1/2 sm:w-[96%] xl:w-full sm:max-w-4xl text-left outline-none',
+                isFullHeight && 'sm:bottom-4',
+              )}
+              onInteractOutside={(event) => {
+                if (isSearchModalPortalTarget(event.target)) {
+                  event.preventDefault()
+                }
+              }}
+            >
+              <DialogPrimitive.Title className="sr-only">
+                Search TanStack
+              </DialogPrimitive.Title>
+              <DialogPrimitive.Description className="sr-only">
+                Search TanStack and open TanStack AI from the current query.
+              </DialogPrimitive.Description>
+              <div className="search-modal-panel-transition h-full">
+                <InstantSearch
+                  searchClient={searchClient}
+                  indexName={searchIndexName}
                 >
-                  <img
-                    src="/Algolia-logo-blue.svg"
-                    alt="Algolia"
-                    className="h-4 w-auto dark:hidden"
-                  />
-                  <img
-                    src="/Algolia-logo-white.svg"
-                    alt="Algolia"
-                    className="h-4 w-auto hidden dark:block"
-                  />
-                </a>
+                  <SearchFiltersProvider resetFiltersOnOpen={isOpen}>
+                    <DynamicFilters />
+                    <CommandSearchPanel
+                      isFullHeight={isFullHeight}
+                      onToggleFullHeight={toggleFullHeight}
+                    />
+                  </SearchFiltersProvider>
+                </InstantSearch>
               </div>
-            </SearchFiltersProvider>
-          </InstantSearch>
-        </DialogPrimitive.Content>
+            </DialogPrimitive.Content>
+          </>
+        ) : null}
       </DialogPrimitive.Portal>
     </DialogPrimitive.Root>
   )
 }
 
-function SearchResults({ focusedIndex }: { focusedIndex: number }) {
-  const { results } = useInstantSearch()
-  const { hits, isLastPage, showMore } = useInfiniteHits()
-  const containerRef = React.useRef<HTMLDivElement>(null)
-  const sentinelRef = React.useRef<HTMLDivElement>(null)
-
+export function AiDock() {
   const {
-    selectedLibrary,
-    selectedFramework,
-    setSelectedLibrary,
-    setSelectedFramework,
-    libraryItems: _libraryItems,
-    frameworkItems,
-  } = useSearchFilters()
+    cancelAiDockHoverClose,
+    isAiDockOpen,
+    newChatRequestId,
+    scheduleAiDockHoverClose,
+  } = useSearchContext()
+  const [hasActivated, setHasActivated] = React.useState(isAiDockOpen)
+  const [isDockVisible, setIsDockVisible] = React.useState(false)
+  const [isDockMaximized, setIsDockMaximized] = React.useState(false)
+  const [dockWidth, setDockWidth] = React.useState(readAiDockWidth)
+  const [viewportWidth, setViewportWidth] = React.useState(() =>
+    typeof window === 'undefined'
+      ? AI_DOCK_DEFAULT_WIDTH / AI_DOCK_MAX_WIDTH_RATIO
+      : window.innerWidth,
+  )
+  const [isResizingDock, setIsResizingDock] = React.useState(false)
+  const contentRef = React.useRef<HTMLDivElement>(null)
+  const isResizingDockRef = React.useRef(false)
+  const displayedDockWidth = clampAiDockWidth(dockWidth, viewportWidth)
+  const dockMaxWidth = getAiDockMaxWidth(viewportWidth)
+  const dockStyle: AiDockStyle = {
+    '--ai-dock-width': `${displayedDockWidth}px`,
+    '--ai-dock-max-width': `${AI_DOCK_MAXIMIZED_WIDTH}px`,
+  }
 
-  const persistFramework = usePersistFrameworkPreference()
+  React.useEffect(() => {
+    if (!isAiDockOpen) {
+      setIsDockVisible(false)
+      return
+    }
 
-  // Use selected values directly (no longer relying on Algolia's isRefined)
-  const refinedLibrary = selectedLibrary || null
-  const refinedFramework = selectedFramework || null
+    setHasActivated(true)
 
-  const clearFramework = () => {
-    setSelectedFramework('')
-  }
+    let enterFrame = 0
+    const mountFrame = requestAnimationFrame(() => {
+      enterFrame = requestAnimationFrame(() => {
+        setIsDockVisible(true)
+      })
+    })
 
-  const clearLibrary = () => {
-    setSelectedLibrary('')
-  }
+    return () => {
+      cancelAnimationFrame(mountFrame)
+      cancelAnimationFrame(enterFrame)
+    }
+  }, [isAiDockOpen])
 
-  // Infinite scroll with Intersection Observer
   React.useEffect(() => {
-    const sentinel = sentinelRef.current
-    const container = containerRef.current
-    if (!sentinel || !container || !hits.length) return
+    if (typeof window === 'undefined') {
+      return
+    }
 
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting && !isLastPage) {
-            showMore()
-          }
-        })
-      },
-      {
-        root: container,
-        rootMargin: '200px',
-      },
-    )
+    const handleResize = () => {
+      setViewportWidth(window.innerWidth)
+    }
 
-    observer.observe(sentinel)
-    return () => observer.disconnect()
-  }, [hits, isLastPage, showMore])
+    handleResize()
+    window.addEventListener('resize', handleResize)
 
-  if (!results.query) {
-    return (
-      <div className="p-6 text-gray-500 dark:text-gray-400">
-        <p className="text-lg font-medium text-center">Search TanStack</p>
-        <p className="mt-2 text-sm text-center">
-          Start typing to search, or select a library or framework below.
-        </p>
-        <div className="mt-6 flex gap-8 justify-center">
-          {!selectedLibrary && (
-            <div className="flex flex-col gap-2">
-              <p className="text-xs font-medium uppercase tracking-wide opacity-60">
-                Libraries
-              </p>
-              <div className="flex flex-wrap gap-1.5 max-w-xs">
-                {libraries
-                  .filter((lib) => 'bgStyle' in lib)
-                  .map((lib) => (
-                    <button
-                      key={lib.id}
-                      onClick={() => {
-                        setSelectedLibrary(lib.id)
-                      }}
-                      className={twMerge(
-                        'px-2 py-1 text-xs font-black uppercase rounded text-white transition-opacity hover:opacity-80',
-                        lib.bgStyle,
-                      )}
-                    >
-                      {lib.id}
-                    </button>
-                  ))}
-              </div>
-            </div>
-          )}
-          {!selectedFramework && frameworkItems.length > 0 && (
-            <div className="flex flex-col gap-2">
-              <p className="text-xs font-medium uppercase tracking-wide opacity-60">
-                Frameworks
-              </p>
-              <div className="flex flex-wrap gap-1.5 max-w-xs">
-                {frameworkItems.map((item) => {
-                  const fw = frameworkOptions.find(
-                    (f) => f.value === item.value,
-                  )
-                  if (!fw) return null
-                  return (
-                    <button
-                      key={fw.value}
-                      onClick={() => {
-                        setSelectedFramework(fw.value)
-                        persistFramework(fw.value)
-                      }}
-                      className="flex items-center gap-1.5 px-2 py-1 text-xs font-bold rounded bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      <img
-                        src={fw.logo}
-                        alt={fw.label}
-                        className="w-3.5 h-3.5"
-                      />
-                      {fw.label}
-                    </button>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    )
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (!isAiDockOpen || !isDockVisible) {
+      return
+    }
+
+    const frame = requestAnimationFrame(() => {
+      contentRef.current
+        ?.querySelector<HTMLInputElement>('input[type="search"]')
+        ?.focus({ preventScroll: true })
+    })
+
+    return () => cancelAnimationFrame(frame)
+  }, [isAiDockOpen, isDockVisible])
+
+  const toggleDockMaximized = React.useCallback(() => {
+    setIsDockMaximized((current) => !current)
+  }, [])
+
+  const handleResizePointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (isDockMaximized || typeof window === 'undefined') {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+      cancelAiDockHoverClose()
+
+      const startX = event.clientX
+      const startWidth = displayedDockWidth
+      let nextWidth = startWidth
+      const previousCursor = document.body.style.cursor
+      const previousUserSelect = document.body.style.userSelect
+
+      isResizingDockRef.current = true
+      setIsResizingDock(true)
+      document.body.style.cursor = 'ew-resize'
+      document.body.style.userSelect = 'none'
+
+      const stopResizing = () => {
+        window.removeEventListener('pointermove', handlePointerMove)
+        window.removeEventListener('pointerup', stopResizing)
+        window.removeEventListener('pointercancel', stopResizing)
+        document.body.style.cursor = previousCursor
+        document.body.style.userSelect = previousUserSelect
+        isResizingDockRef.current = false
+        setIsResizingDock(false)
+        writeAiDockWidth(nextWidth)
+      }
+
+      const handlePointerMove = (moveEvent: PointerEvent) => {
+        const currentViewportWidth = window.innerWidth
+        nextWidth = clampAiDockWidth(
+          startWidth + startX - moveEvent.clientX,
+          currentViewportWidth,
+        )
+        setViewportWidth(currentViewportWidth)
+        setDockWidth(nextWidth)
+      }
+
+      window.addEventListener('pointermove', handlePointerMove)
+      window.addEventListener('pointerup', stopResizing)
+      window.addEventListener('pointercancel', stopResizing)
+    },
+    [cancelAiDockHoverClose, displayedDockWidth, isDockMaximized],
+  )
+
+  const handleResizeKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (isDockMaximized) {
+        return
+      }
+
+      const step = event.shiftKey ? 48 : 16
+      let nextWidth: number | null = null
+
+      if (event.key === 'ArrowLeft') {
+        nextWidth = displayedDockWidth + step
+      } else if (event.key === 'ArrowRight') {
+        nextWidth = displayedDockWidth - step
+      } else if (event.key === 'Home') {
+        nextWidth = AI_DOCK_MIN_WIDTH
+      } else if (event.key === 'End') {
+        nextWidth = dockMaxWidth
+      }
+
+      if (nextWidth === null) {
+        return
+      }
+
+      event.preventDefault()
+
+      const clampedWidth = clampAiDockWidth(nextWidth, viewportWidth)
+      setDockWidth(clampedWidth)
+      writeAiDockWidth(clampedWidth)
+    },
+    [displayedDockWidth, dockMaxWidth, isDockMaximized, viewportWidth],
+  )
+
+  const handlePointerEnter = (event: React.PointerEvent<HTMLElement>) => {
+    if (event.pointerType === 'touch') {
+      return
+    }
+
+    cancelAiDockHoverClose()
+  }
+
+  const handlePointerLeave = (event: React.PointerEvent<HTMLElement>) => {
+    if (event.pointerType === 'touch') {
+      return
+    }
+
+    if (isResizingDockRef.current) {
+      return
+    }
+
+    if (
+      event.relatedTarget instanceof Element &&
+      event.relatedTarget.closest('.dropdown-content')
+    ) {
+      return
+    }
+
+    scheduleAiDockHoverClose()
+  }
+
+  if (!hasActivated) {
+    return null
   }
 
   return (
     <div
-      ref={containerRef}
-      className="max-h-[80dvh] overflow-y-auto"
-      role="listbox"
-      aria-label="Search results"
+      ref={contentRef}
+      aria-label="TanStack AI"
+      aria-hidden={!isAiDockOpen}
+      inert={!isAiDockOpen}
+      style={dockStyle}
+      className={twMerge(
+        'fixed top-[var(--navbar-height)] right-0 bottom-0 z-[1000] w-full max-w-full pointer-events-none',
+        isDockMaximized
+          ? 'sm:w-[min(var(--ai-dock-max-width),100vw)]'
+          : 'sm:w-[var(--ai-dock-width)]',
+        !isResizingDock && 'transition-[width] duration-300 ease-out',
+      )}
     >
-      <NoResults
-        refinedFramework={refinedFramework}
-        refinedLibrary={refinedLibrary}
-        clearFramework={clearFramework}
-        clearLibrary={clearLibrary}
-      />
-      {hits.map((hit, index) => (
-        <Hit
-          key={hit.objectID}
-          hit={hit as AlgoliaHit}
-          isFocused={index === focusedIndex}
-          refinedLibrary={refinedLibrary}
-          refinedFramework={refinedFramework}
-        />
-      ))}
-      <div ref={sentinelRef} className="h-4" aria-hidden="true" />
+      <aside
+        onPointerEnter={handlePointerEnter}
+        onPointerLeave={handlePointerLeave}
+        className={twMerge(
+          'pointer-events-auto absolute right-0 top-0 h-full w-full max-w-full text-left outline-none transition-[transform,translate,opacity] duration-300 ease-out',
+          isDockVisible
+            ? 'translate-x-0 opacity-100'
+            : 'translate-x-full opacity-0 pointer-events-none',
+        )}
+      >
+        {!isDockMaximized ? (
+          <div
+            role="separator"
+            aria-label="Resize AI panel"
+            aria-orientation="vertical"
+            aria-valuemin={AI_DOCK_MIN_WIDTH}
+            aria-valuemax={dockMaxWidth}
+            aria-valuenow={displayedDockWidth}
+            tabIndex={0}
+            onPointerDown={handleResizePointerDown}
+            onKeyDown={handleResizeKeyDown}
+            className="group/resize absolute left-0 top-0 z-40 hidden h-full w-3 -translate-x-1.5 cursor-ew-resize touch-none outline-none sm:block"
+          >
+            <div
+              className={twMerge(
+                'absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-transparent transition-colors',
+                isResizingDock
+                  ? 'bg-cyan-500/70'
+                  : 'group-hover/resize:bg-cyan-500/50 group-focus/resize:bg-cyan-500/60',
+              )}
+            />
+          </div>
+        ) : null}
+        <h2 className="sr-only">TanStack AI</h2>
+        <InstantSearch searchClient={searchClient} indexName={searchIndexName}>
+          <SearchFiltersProvider>
+            <DynamicFilters />
+            <SearchPanel
+              isFullHeight
+              onToggleFullHeight={() => {}}
+              newChatRequestId={newChatRequestId}
+              surface="dock"
+              isDockMaximized={isDockMaximized}
+              onToggleDockMaximized={toggleDockMaximized}
+            />
+          </SearchFiltersProvider>
+        </InstantSearch>
+      </aside>
     </div>
   )
 }
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 286262337..39abbaaf0 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -43,7 +43,10 @@ export function Select<T extends SelectOption>({
     <div className={twMerge('w-full', className)}>
       <Dropdown>
         <DropdownTrigger>
-          <button className="relative items-center w-full gap-2 flex hover:bg-gray-500/10 cursor-pointer rounded-md py-1.5 px-2 text-left focus:outline-none text-sm">
+          <button
+            type="button"
+            className="relative items-center w-full gap-2 flex hover:bg-gray-500/10 cursor-pointer rounded-md py-1.5 px-2 text-left focus:outline-none text-sm"
+          >
             {icon ? (
               <span className="flex items-center justify-center w-6 h-6 rounded border border-gray-500/20">
                 {icon}
@@ -67,7 +70,7 @@ export function Select<T extends SelectOption>({
             </span>
           </button>
         </DropdownTrigger>
-        <DropdownContent align="start" className="max-h-60 overflow-auto">
+        <DropdownContent align="start" className="max-h-80 overflow-auto">
           {available.map((option) => (
             <DropdownItem
               key={option.value}
@@ -84,7 +87,7 @@ export function Select<T extends SelectOption>({
                   width={18}
                   src={option.logo}
                   alt={`${option.label} logo`}
-                  className="flex-shrink-0"
+                  className="shrink-0"
                 />
               ) : null}
               <span className="truncate">{option.label}</span>
diff --git a/src/components/ShowcaseCard.tsx b/src/components/ShowcaseCard.tsx
index aed5332b0..d766cf6ac 100644
--- a/src/components/ShowcaseCard.tsx
+++ b/src/components/ShowcaseCard.tsx
@@ -46,6 +46,9 @@ export function ShowcaseCard({
           <img
             src={showcase.screenshotUrl}
             alt={showcase.name}
+            loading="lazy"
+            decoding="async"
+            fetchPriority="low"
             className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
           />
           {/* Logo overlay */}
@@ -54,6 +57,8 @@ export function ShowcaseCard({
               <img
                 src={showcase.logoUrl}
                 alt=""
+                loading="lazy"
+                decoding="async"
                 className="w-full h-full object-cover"
               />
             </div>
diff --git a/src/components/ShowcaseDetail.tsx b/src/components/ShowcaseDetail.tsx
index da78eb81f..1892403cb 100644
--- a/src/components/ShowcaseDetail.tsx
+++ b/src/components/ShowcaseDetail.tsx
@@ -12,7 +12,7 @@ import {
 import { Button } from '~/ui'
 import { twMerge } from 'tailwind-merge'
 import { libraries, type LibraryId } from '~/libraries'
-import { USE_CASE_LABELS } from '~/utils/showcase.client'
+import { USE_CASE_LABELS } from '~/utils/showcase.shared'
 import { voteShowcase } from '~/utils/showcase.functions'
 import {
   getShowcaseQueryOptions,
diff --git a/src/components/ShowcaseGallery.tsx b/src/components/ShowcaseGallery.tsx
index afeeadd46..d6489634f 100644
--- a/src/components/ShowcaseGallery.tsx
+++ b/src/components/ShowcaseGallery.tsx
@@ -15,6 +15,8 @@ import { Plus } from 'lucide-react'
 import { Button } from '~/ui'
 import { useCurrentUser } from '~/hooks/useCurrentUser'
 import { useLoginModal } from '~/contexts/LoginModalContext'
+import type { LibraryId } from '~/libraries'
+import { PAGE_SIZE_OPTIONS } from '~/routes/showcase'
 
 export function ShowcaseGallery() {
   const navigate = useNavigate({ from: '/showcase/' })
@@ -23,11 +25,13 @@ export function ShowcaseGallery() {
   const currentUser = useCurrentUser()
   const { openLoginModal } = useLoginModal()
 
+  const pageSize = search.pageSize ?? 24
+
   const { data, isLoading } = useQuery(
     getApprovedShowcasesQueryOptions({
       pagination: {
         page: search.page,
-        pageSize: 24,
+        pageSize,
       },
       filters: {
         libraryIds: search.libraryIds,
@@ -68,7 +72,7 @@ export function ShowcaseGallery() {
       // Snapshot previous values
       const previousShowcases = queryClient.getQueryData(
         getApprovedShowcasesQueryOptions({
-          pagination: { page: search.page, pageSize: 24 },
+          pagination: { page: search.page, pageSize },
           filters: {
             libraryIds: search.libraryIds,
             useCases: search.useCases as ShowcaseUseCase[],
@@ -112,7 +116,7 @@ export function ShowcaseGallery() {
       // Optimistically update showcase score
       queryClient.setQueryData(
         getApprovedShowcasesQueryOptions({
-          pagination: { page: search.page, pageSize: 24 },
+          pagination: { page: search.page, pageSize },
           filters: {
             libraryIds: search.libraryIds,
             useCases: search.useCases as ShowcaseUseCase[],
@@ -153,7 +157,7 @@ export function ShowcaseGallery() {
       if (context?.previousShowcases) {
         queryClient.setQueryData(
           getApprovedShowcasesQueryOptions({
-            pagination: { page: search.page, pageSize: 24 },
+            pagination: { page: search.page, pageSize },
             filters: {
               libraryIds: search.libraryIds,
               useCases: search.useCases as ShowcaseUseCase[],
@@ -186,13 +190,13 @@ export function ShowcaseGallery() {
     voteMutation.mutate({ showcaseId, value })
   }
 
-  const handleLibraryToggle = (libraryId: string) => {
+  const handleLibraryToggle = (libraryId: LibraryId) => {
     const current = search.libraryIds || []
     const updated = current.includes(libraryId)
-      ? current.filter((id: string) => id !== libraryId)
+      ? current.filter((id) => id !== libraryId)
       : [...current, libraryId]
     navigate({
-      search: (prev: typeof search) => ({
+      search: (prev) => ({
         ...prev,
         libraryIds: updated.length > 0 ? updated : undefined,
         page: 1,
@@ -250,6 +254,16 @@ export function ShowcaseGallery() {
     })
   }
 
+  const handlePageSizeChange = (newPageSize: number) => {
+    navigate({
+      search: (prev: typeof search) => ({
+        ...prev,
+        pageSize: newPageSize,
+        page: 1,
+      }),
+    })
+  }
+
   const handleSearchChange = (q: string) => {
     navigate({
       search: (prev: typeof search) => ({
@@ -281,7 +295,7 @@ export function ShowcaseGallery() {
   return (
     <div className="min-h-screen">
       {/* Header */}
-      <div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-950">
+      <div className="bg-linear-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-950">
         <div className="max-w-7xl mx-auto px-4 py-12 sm:py-16">
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
             <div>
@@ -357,12 +371,14 @@ export function ShowcaseGallery() {
                   currentPage={search.page - 1}
                   totalPages={data.pagination.totalPages}
                   totalItems={data.pagination.total}
-                  pageSize={24}
+                  pageSize={pageSize}
                   onPageChange={handlePageChange}
-                  onPageSizeChange={() => {}}
+                  onPageSizeChange={handlePageSizeChange}
                   canGoPrevious={search.page > 1}
                   canGoNext={search.page < data.pagination.totalPages}
                   itemLabel="projects"
+                  showPageSizeSelector
+                  pageSizeOptions={[...PAGE_SIZE_OPTIONS]}
                 />
               </div>
             )}
diff --git a/src/components/ShowcaseModerationList.tsx b/src/components/ShowcaseModerationList.tsx
index 769a60cc4..6b48f866e 100644
--- a/src/components/ShowcaseModerationList.tsx
+++ b/src/components/ShowcaseModerationList.tsx
@@ -23,6 +23,7 @@ import {
 } from 'lucide-react'
 import { libraries } from '~/libraries'
 import { Badge, Button } from '~/ui'
+import { getRowFieldId } from '~/utils/route-encoding'
 import { Fragment, useState } from 'react'
 
 interface ShowcaseModerationListProps {
@@ -205,6 +206,11 @@ export function ShowcaseModerationList({
             const isExpanded = expandedIds.has(showcase.id)
             const isPending = showcase.status === 'pending'
             const isModeratingThis = isModeratingId === showcase.id
+            const moderationNoteId = getRowFieldId(
+              'showcase-moderation',
+              showcase.id,
+              'note',
+            )
 
             return (
               <Fragment key={showcase.id}>
@@ -528,13 +534,13 @@ export function ShowcaseModerationList({
                         {isPending && (
                           <div>
                             <label
-                              htmlFor="note"
+                              htmlFor={moderationNoteId}
                               className="block text-sm font-semibold mb-2"
                             >
                               Internal Moderation Note (optional):
                             </label>
                             <textarea
-                              id="note"
+                              id={moderationNoteId}
                               value={moderationNotes[showcase.id] || ''}
                               onChange={(e) =>
                                 handleModerationNoteChange(
diff --git a/src/components/ShowcaseModerationTopBar.tsx b/src/components/ShowcaseModerationTopBar.tsx
index 83ecea29b..05daa9ad9 100644
--- a/src/components/ShowcaseModerationTopBar.tsx
+++ b/src/components/ShowcaseModerationTopBar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { libraries } from '~/libraries'
+import { libraries, type LibraryId } from '~/libraries'
 import { SHOWCASE_STATUSES, type ShowcaseStatus } from '~/db/types'
 import {
   TopBarFilter,
@@ -13,12 +13,12 @@ import {
 interface ShowcaseModerationTopBarProps {
   filters: {
     status?: ShowcaseStatus[]
-    libraryId?: string[]
+    libraryId?: LibraryId[]
     isFeatured?: boolean
   }
   onFilterChange: (filters: {
     status?: ShowcaseStatus[]
-    libraryId?: string[]
+    libraryId?: LibraryId[]
     isFeatured?: boolean
   }) => void
 }
@@ -41,7 +41,7 @@ export function ShowcaseModerationTopBar({
     onFilterChange({ status: updated.length > 0 ? updated : undefined })
   }
 
-  const toggleLibrary = (libraryId: string) => {
+  const toggleLibrary = (libraryId: LibraryId) => {
     const current = filters.libraryId || []
     const updated = current.includes(libraryId)
       ? current.filter((l) => l !== libraryId)
@@ -67,7 +67,7 @@ export function ShowcaseModerationTopBar({
     filters.isFeatured !== undefined,
   )
 
-  const getLibraryName = (id: string) =>
+  const getLibraryName = (id: LibraryId) =>
     libraries.find((l) => l.id === id)?.name || id
 
   return (
diff --git a/src/components/ShowcaseSection.tsx b/src/components/ShowcaseSection.tsx
index 627a205c6..05008ba9d 100644
--- a/src/components/ShowcaseSection.tsx
+++ b/src/components/ShowcaseSection.tsx
@@ -12,11 +12,12 @@ import { Button } from '~/ui'
 import { ArrowRight, Plus } from 'lucide-react'
 import { useCurrentUser } from '~/hooks/useCurrentUser'
 import { useLoginModal } from '~/contexts/LoginModalContext'
+import type { LibraryId } from '~/libraries'
 
 interface ShowcaseSectionProps {
   title?: string
   subtitle?: string
-  libraryId?: string
+  libraryId?: LibraryId
   limit?: number
   showViewAll?: boolean
   minItems?: number
@@ -25,7 +26,7 @@ interface ShowcaseSectionProps {
 export function SubmitShowcasePlaceholder({
   libraryId,
 }: {
-  libraryId?: string
+  libraryId?: LibraryId
 }) {
   return (
     <Link
@@ -235,7 +236,12 @@ export function ShowcaseSection({
 
       {showViewAll && (
         <div className="mt-8 flex justify-center">
-          <Link to="/showcase" search={libraryId ? { libraryId } : undefined}>
+          <Link
+            to="/showcase"
+            search={{
+              libraryIds: libraryId ? [libraryId] : undefined,
+            }}
+          >
             <Button variant="ghost" size="xs">
               View all projects
               <ArrowRight className="w-4 h-4" />
@@ -267,7 +273,7 @@ export function LibraryShowcases({
   libraryId,
   libraryName,
 }: {
-  libraryId: string
+  libraryId: LibraryId
   libraryName: string
 }) {
   return (
diff --git a/src/components/ShowcaseSubmitForm.tsx b/src/components/ShowcaseSubmitForm.tsx
index e98b20faa..1b33ccdb2 100644
--- a/src/components/ShowcaseSubmitForm.tsx
+++ b/src/components/ShowcaseSubmitForm.tsx
@@ -10,7 +10,7 @@ import {
 import {
   getAutoIncludedLibraries,
   USE_CASE_LABELS,
-} from '~/utils/showcase.client'
+} from '~/utils/showcase.shared'
 import { useToast } from './ToastProvider'
 import { Check, AlertCircle } from 'lucide-react'
 import { Button, FormInput } from '~/ui'
diff --git a/src/components/ShowcaseTopBarFilters.tsx b/src/components/ShowcaseTopBarFilters.tsx
index d6971092d..7c9042cb6 100644
--- a/src/components/ShowcaseTopBarFilters.tsx
+++ b/src/components/ShowcaseTopBarFilters.tsx
@@ -3,12 +3,12 @@ import {
   FacetFilterButton,
   FilterCheckbox,
 } from '~/components/FilterComponents'
-import { libraries } from '~/libraries'
+import { libraries, type LibraryId } from '~/libraries'
 import { SHOWCASE_USE_CASES_UI, type ShowcaseUseCase } from '~/db/types'
-import { USE_CASE_LABELS } from '~/utils/showcase.client'
+import { USE_CASE_LABELS } from '~/utils/showcase.shared'
 
 interface ShowcaseFilters {
-  libraryIds?: string[]
+  libraryIds?: LibraryId[]
   useCases?: ShowcaseUseCase[]
   hasSourceCode?: boolean
   q?: string
@@ -16,7 +16,7 @@ interface ShowcaseFilters {
 
 interface ShowcaseTopBarFiltersProps {
   filters: ShowcaseFilters
-  onLibraryToggle: (libraryId: string) => void
+  onLibraryToggle: (libraryId: LibraryId) => void
   onClearLibraries: () => void
   onUseCaseToggle: (useCase: ShowcaseUseCase) => void
   onClearUseCases: () => void
@@ -26,7 +26,7 @@ interface ShowcaseTopBarFiltersProps {
 }
 
 const LIBRARY_OPTIONS = libraries
-  .filter((lib) => lib.name)
+  .filter((lib) => lib.name && lib.visible !== false)
   .slice(0, 10)
   .map((lib) => ({
     id: lib.id,
diff --git a/src/components/SimpleMarkdown.tsx b/src/components/SimpleMarkdown.tsx
deleted file mode 100644
index d30dc53ea..000000000
--- a/src/components/SimpleMarkdown.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from 'react'
-import { MarkdownLink } from '~/components/markdown'
-import type { HTMLProps } from 'react'
-import parse, {
-  attributesToProps,
-  domToReact,
-  Element,
-  HTMLReactParserOptions,
-} from 'html-react-parser'
-import { renderMarkdown } from '~/utils/markdown'
-import { InlineCode, MarkdownImg } from '~/ui'
-
-/**
- * Lightweight markdown renderer for simple content like excerpts.
- * Does NOT include syntax highlighting (shiki) or diagram rendering (mermaid).
- * Use the full <Markdown> component for documentation with code blocks.
- */
-
-const markdownComponents: Record<string, React.FC<any>> = {
-  a: MarkdownLink,
-  code: InlineCode,
-  pre: function Pre({ children, ...rest }: HTMLProps<HTMLPreElement>) {
-    return (
-      <pre
-        className="bg-gray-100 dark:bg-gray-800 rounded p-2 overflow-x-auto text-sm"
-        {...rest}
-      >
-        {children}
-      </pre>
-    )
-  },
-  img: MarkdownImg,
-}
-
-const options: HTMLReactParserOptions = {
-  replace: (domNode) => {
-    if (domNode instanceof Element && domNode.attribs) {
-      const replacer = markdownComponents[domNode.name]
-      if (replacer) {
-        return React.createElement(
-          replacer,
-          attributesToProps(domNode.attribs),
-          domToReact(domNode.children as any, options),
-        )
-      }
-    }
-    return
-  },
-}
-
-type SimpleMarkdownProps = {
-  rawContent?: string
-  htmlMarkup?: string
-}
-
-export function SimpleMarkdown({
-  rawContent,
-  htmlMarkup,
-}: SimpleMarkdownProps) {
-  const rendered = React.useMemo(() => {
-    if (rawContent) {
-      return renderMarkdown(rawContent)
-    }
-
-    if (htmlMarkup) {
-      return { markup: htmlMarkup, headings: [] }
-    }
-
-    return { markup: '', headings: [] }
-  }, [rawContent, htmlMarkup])
-
-  return React.useMemo(() => {
-    if (!rendered.markup) {
-      return null
-    }
-
-    return parse(rendered.markup, options)
-  }, [rendered.markup])
-}
diff --git a/src/components/SponsorPack.tsx b/src/components/SponsorPack.tsx
index 7da5f2cda..38cdca9dc 100644
--- a/src/components/SponsorPack.tsx
+++ b/src/components/SponsorPack.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Pack, hierarchy } from '@visx/hierarchy'
 import { ParentSize } from './ParentSize'
 import { twMerge } from 'tailwind-merge'
-import { getSponsorsForSponsorPack } from '~/server/sponsors'
+import { getSponsorsForSponsorPack } from '~/utils/sponsors.functions'
 
 type DisplaySponsor = Awaited<
   ReturnType<typeof getSponsorsForSponsorPack>
@@ -46,12 +46,13 @@ export default function SponsorPack({
 
   return (
     <ParentSize>
-      {({ width = 800 }) => {
-        return width < 10 ? null : (
+      {({ height, width }) => {
+        return width < 10 || height < 10 ? null : (
           <div
             style={{
-              width,
-              height: width,
+              width: '100%',
+              height: '100%',
+              overflow: 'hidden',
               position: 'relative',
             }}
           >
@@ -76,7 +77,11 @@ export default function SponsorPack({
             `,
               }}
             />
-            <Pack root={root} size={[width, width]} padding={width * 0.005}>
+            <Pack
+              root={root}
+              size={[width, height]}
+              padding={Math.min(width, height) * 0.005}
+            >
               {(packData) => {
                 const circles = packData.descendants().slice(1) // skip first layer
                 return (
diff --git a/src/components/SponsorSection.tsx b/src/components/SponsorSection.tsx
new file mode 100644
index 000000000..b68c69b2a
--- /dev/null
+++ b/src/components/SponsorSection.tsx
@@ -0,0 +1,64 @@
+import type { CSSProperties, ReactNode } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Hydrate } from '@tanstack/react-start'
+import { visible } from '@tanstack/react-start/hydration'
+import { ArrowRight } from 'lucide-react'
+import { getSponsorsForSponsorPack } from '~/utils/sponsors.functions'
+import { Button } from '~/ui'
+import PlaceholderSponsorPack from './PlaceholderSponsorPack'
+import SponsorPack from './SponsorPack'
+
+type SponsorSectionProps = {
+  title?: ReactNode
+  aspectRatio?: string
+  packMaxWidth?: CSSProperties['maxWidth']
+  showCTA?: boolean
+}
+
+function SponsorPackWithQuery() {
+  const { data: sponsors } = useQuery({
+    queryKey: ['sponsors'],
+    queryFn: () => getSponsorsForSponsorPack(),
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  })
+
+  if (!sponsors) {
+    return <PlaceholderSponsorPack />
+  }
+
+  return <SponsorPack sponsors={sponsors} />
+}
+
+export function SponsorSection({
+  title = 'Sponsors',
+  aspectRatio = '1/1',
+  packMaxWidth,
+  showCTA = true,
+}: SponsorSectionProps) {
+  return (
+    <div className="px-4 w-full lg:max-w-(--breakpoint-lg) md:mx-auto">
+      <div className="space-y-8">
+        <h3 className="text-3xl font-bold">{title}</h3>
+        <div
+          className="relative mx-auto flex w-full flex-wrap overflow-hidden [&>div]:h-full [&>div]:w-full"
+          style={{ aspectRatio, maxWidth: packMaxWidth }}
+        >
+          <Hydrate
+            when={visible({ rootMargin: '50%' })}
+            fallback={<PlaceholderSponsorPack />}
+          >
+            <SponsorPackWithQuery />
+          </Hydrate>
+        </div>
+        {showCTA ? (
+          <div className="flex justify-center">
+            <Button as="a" href="https://github.com/sponsors/tannerlinsley">
+              Become a Sponsor
+              <ArrowRight className="w-4 h-4" />
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/SponsorsSection.tsx b/src/components/SponsorsSection.tsx
index 837466dce..0af52786d 100644
--- a/src/components/SponsorsSection.tsx
+++ b/src/components/SponsorsSection.tsx
@@ -26,7 +26,7 @@ export function SponsorsSection({
         {title}
       </h3>
       <div
-        className="my-4 flex flex-wrap mx-auto max-w-(--breakpoint-lg)"
+        className="my-4 flex flex-wrap mx-auto max-w-(--breakpoint-lg) overflow-hidden"
         style={{ aspectRatio }}
       >
         <Await
diff --git a/src/components/StackBlitzEmbed.tsx b/src/components/StackBlitzEmbed.tsx
index a8443f05c..11e54fdbc 100644
--- a/src/components/StackBlitzEmbed.tsx
+++ b/src/components/StackBlitzEmbed.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useIsDark } from '~/hooks/useIsDark'
+import { stackBlitzIframeProps } from '~/utils/stackblitz-embed'
 
 type StackBlitzEmbedProps = {
   repo: string
@@ -27,10 +28,12 @@ export function StackBlitzEmbed({
   const src = `https://stackblitz.com/github/${repo}/tree/${branch}/${examplePath}?embed=1&theme=${themeParam}&preset=${preset}${fileParam}`
 
   return (
+    //oxlint-disable-next-line jsx-a11y/iframe-has-title
     <iframe
+      title={title || `${repo}: ${examplePath}`}
       key={`${examplePath}-${themeParam}`}
       src={src}
-      title={title || `${repo}: ${examplePath}`}
+      {...stackBlitzIframeProps}
       sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
       className="shadow-lg"
       loading="lazy"
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
index 0a8745cf5..66cd34251 100644
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -1,4 +1,3 @@
-import { ScriptOnce } from '@tanstack/react-router'
 import { createClientOnlyFn, createIsomorphicFn } from '@tanstack/react-start'
 import * as React from 'react'
 import { createContext, ReactNode, useEffect, useState } from 'react'
@@ -41,6 +40,8 @@ const getSystemTheme = createIsomorphicFn()
 
 const updateThemeClass = createClientOnlyFn((themeMode: ThemeMode) => {
   const root = document.documentElement
+  root.classList.add('theme-switching')
+
   root.classList.remove('light', 'dark', 'auto')
   const newTheme = themeMode === 'auto' ? getSystemTheme() : themeMode
   root.classList.add(newTheme)
@@ -56,6 +57,15 @@ const updateThemeClass = createClientOnlyFn((themeMode: ThemeMode) => {
       newTheme === 'dark' ? THEME_COLORS.dark : THEME_COLORS.light,
     )
   }
+
+  // Force reflow so the no-transition styles apply to the theme change,
+  // then remove the class on the next frame so subsequent interactions animate.
+  void root.offsetHeight
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      root.classList.remove('theme-switching')
+    })
+  })
 })
 
 const getNextTheme = createClientOnlyFn((current: ThemeMode): ThemeMode => {
@@ -66,34 +76,6 @@ const getNextTheme = createClientOnlyFn((current: ThemeMode): ThemeMode => {
   return themes[(themes.indexOf(current) + 1) % themes.length]
 })
 
-const themeDetectorScript = (function () {
-  function themeFn() {
-    try {
-      const storedTheme = localStorage.getItem('theme') || 'auto'
-      const validTheme = ['light', 'dark', 'auto'].includes(storedTheme)
-        ? storedTheme
-        : 'auto'
-
-      if (validTheme === 'auto') {
-        const autoTheme = window.matchMedia('(prefers-color-scheme: dark)')
-          .matches
-          ? 'dark'
-          : 'light'
-        document.documentElement.classList.add(autoTheme, 'auto')
-      } else {
-        document.documentElement.classList.add(validTheme)
-      }
-    } catch (e) {
-      const autoTheme = window.matchMedia('(prefers-color-scheme: dark)')
-        .matches
-        ? 'dark'
-        : 'light'
-      document.documentElement.classList.add(autoTheme, 'auto')
-    }
-  }
-  return `(${themeFn.toString()})();`
-})()
-
 type ThemeContextProps = {
   themeMode: ThemeMode
   resolvedTheme: ResolvedTheme
@@ -105,24 +87,18 @@ const ThemeContext = createContext<ThemeContextProps | undefined>(undefined)
 type ThemeProviderProps = {
   children: ReactNode
 }
-const getResolvedThemeFromDOM = createIsomorphicFn()
-  .server((): ResolvedTheme => 'light')
-  .client((): ResolvedTheme => {
-    return document.documentElement.classList.contains('dark')
-      ? 'dark'
-      : 'light'
-  })
 
 export function ThemeProvider({ children }: ThemeProviderProps) {
-  const [themeMode, setThemeMode] = useState<ThemeMode>(getStoredThemeMode)
-  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>(
-    getResolvedThemeFromDOM,
-  )
+  const [themeMode, setThemeMode] = useState<ThemeMode>('auto')
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>('light')
 
-  // Sync resolved theme from DOM on mount (handles SSR -> client transition)
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- Intentional hydration after SSR
-    setResolvedTheme(getResolvedThemeFromDOM())
+    const storedThemeMode = getStoredThemeMode()
+    setThemeMode(storedThemeMode)
+    updateThemeClass(storedThemeMode)
+    setResolvedTheme(
+      storedThemeMode === 'auto' ? getSystemTheme() : storedThemeMode,
+    )
   }, [])
 
   // Listen for system theme changes when in auto mode
@@ -152,7 +128,6 @@ export function ThemeProvider({ children }: ThemeProviderProps) {
     <ThemeContext.Provider
       value={{ themeMode, resolvedTheme, setTheme, toggleMode }}
     >
-      <ScriptOnce children={themeDetectorScript} />
       {children}
     </ThemeContext.Provider>
   )
@@ -165,3 +140,13 @@ export const useTheme = () => {
   }
   return context
 }
+
+// Returns the class string for <html> element
+// Reads from DOM on client (matches what head script set), empty on server
+const getHtmlClass = createIsomorphicFn()
+  .server(() => '')
+  .client(() => document.documentElement.className)
+
+export function useHtmlClass(): string {
+  return getHtmlClass()
+}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index a0e894a08..1209f67fa 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -4,7 +4,7 @@ import { Moon, Sun, SunMoon } from 'lucide-react'
 import { Button } from '~/ui'
 
 export function ThemeToggle() {
-  const { themeMode, toggleMode } = useTheme()
+  const { themeMode, resolvedTheme, toggleMode } = useTheme()
 
   const handleToggleMode = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
@@ -15,17 +15,36 @@ export function ThemeToggle() {
   const label =
     themeMode === 'auto' ? 'Auto' : themeMode === 'light' ? 'Light' : 'Dark'
 
+  const nextLabel =
+    themeMode === 'auto' ? 'light' : themeMode === 'light' ? 'dark' : 'auto'
+
+  const activeIcon = themeMode === 'auto' ? 'auto' : resolvedTheme
+
+  const getIconClassName = (icon: typeof activeIcon) =>
+    [
+      'col-start-1 row-start-1 h-3.5 w-3.5 shrink-0 transition-opacity motion-reduce:transition-none',
+      activeIcon === icon ? 'opacity-100' : 'opacity-0',
+    ].join(' ')
+
   return (
-    <Button variant="ghost" size="xs" onClick={handleToggleMode}>
-      {themeMode === 'auto' ? (
-        <SunMoon className="w-3.5 h-3.5" />
-      ) : (
-        <>
-          <Sun className="w-3.5 h-3.5 hidden light:block" />
-          <Moon className="w-3.5 h-3.5 hidden dark:block" />
-        </>
-      )}
-      <span className="hidden sm:inline">{label}</span>
+    <Button
+      type="button"
+      variant="icon"
+      color="gray"
+      size="icon-sm"
+      onClick={handleToggleMode}
+      aria-label={`Theme: ${label}. Switch to ${nextLabel} mode.`}
+      title={`Theme: ${label}. Switch to ${nextLabel} mode.`}
+      className="h-7 w-7 shrink-0 rounded-md p-0 leading-none"
+    >
+      <span
+        aria-hidden="true"
+        className="grid h-3.5 w-3.5 shrink-0 place-items-center"
+      >
+        <SunMoon className={getIconClassName('auto')} />
+        <Sun className={getIconClassName('light')} />
+        <Moon className={getIconClassName('dark')} />
+      </span>
     </Button>
   )
 }
diff --git a/src/components/ToastProvider.tsx b/src/components/ToastProvider.tsx
index e34d4889e..e61cde9ce 100644
--- a/src/components/ToastProvider.tsx
+++ b/src/components/ToastProvider.tsx
@@ -1,16 +1,11 @@
 import * as React from 'react'
-import * as Toast from '@radix-ui/react-toast'
+import { Toaster, toast } from 'sonner'
+import { useTheme } from '~/components/ThemeProvider'
 
 type ToastOptions = {
   durationMs?: number
 }
 
-type ToastItem = {
-  id: string
-  content: React.ReactNode
-  durationMs: number
-}
-
 type ToastContextValue = {
   notify: (content: React.ReactNode, options?: ToastOptions) => string
 }
@@ -30,22 +25,16 @@ export function ToastProvider({
 }: {
   children: React.ReactNode
 }): React.ReactElement {
-  const [toasts, setToasts] = React.useState<ToastItem[]>([])
+  const { resolvedTheme } = useTheme()
 
   const notify = React.useCallback(
     (content: React.ReactNode, options?: ToastOptions) => {
-      const id = Math.random().toString(36).slice(2)
-      const durationMs = options?.durationMs ?? 2500
-      setToasts((prev) => [...prev, { id, content, durationMs }])
-      return id
+      const id = toast(content, { duration: options?.durationMs ?? 2500 })
+      return String(id)
     },
     [],
   )
 
-  const removeToast = React.useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id))
-  }, [])
-
   const contextValue = React.useMemo<ToastContextValue>(
     () => ({ notify }),
     [notify],
@@ -53,23 +42,22 @@ export function ToastProvider({
 
   return (
     <ToastContext.Provider value={contextValue}>
-      <Toast.Provider swipeDirection="right">
-        {children}
-        {toasts.map((t) => (
-          <Toast.Root
-            key={t.id}
-            defaultOpen
-            duration={t.durationMs}
-            onOpenChange={(open) => {
-              if (!open) removeToast(t.id)
-            }}
-            className="relative z-[60] rounded-md border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 shadow-lg outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-50"
-          >
-            <div className="flex items-start gap-2">{t.content}</div>
-          </Toast.Root>
-        ))}
-        <Toast.Viewport className="fixed bottom-4 right-4 z-[60] flex max-h-screen w-96 flex-col gap-2 p-0 outline-none" />
-      </Toast.Provider>
+      {children}
+      <Toaster
+        theme={resolvedTheme}
+        position="bottom-right"
+        swipeDirections={['right']}
+        offset={16}
+        gap={8}
+        toastOptions={{
+          unstyled: true,
+          classNames: {
+            toast:
+              'relative w-96 rounded-md border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 shadow-lg outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-50',
+            content: 'flex items-start gap-2',
+          },
+        }}
+      />
     </ToastContext.Provider>
   )
 }
diff --git a/src/components/Toc.tsx b/src/components/Toc.tsx
index a7f2e70a4..94aeeb803 100644
--- a/src/components/Toc.tsx
+++ b/src/components/Toc.tsx
@@ -1,7 +1,7 @@
 import { Link } from '@tanstack/react-router'
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
-import { MarkdownHeading } from '~/utils/markdown/processor'
+import type { MarkdownHeading } from '~/utils/markdown'
 
 const headingLevels: Record<number, string> = {
   1: '',
@@ -41,7 +41,7 @@ export function Toc({
     })
   }, [headings, currentFramework])
   return (
-    <nav className="flex flex-col sticky top-[var(--navbar-height)] max-h-[calc(100dvh-var(--navbar-height))] overflow-hidden">
+    <nav className="flex flex-col sticky top-[calc(var(--navbar-height)+var(--docs-tabs-height,0px))] max-h-[calc(100dvh-var(--navbar-height)-var(--docs-tabs-height,0px))] overflow-hidden">
       <div className="py-1">
         <h3 className="text-[.8em] lg:text-[.825em] xl:text-[.875em] 2xl:text-[.9em] font-bold">
           On this page
diff --git a/src/components/TocMobile.tsx b/src/components/TocMobile.tsx
index 3c8d6cc62..0b88e2122 100644
--- a/src/components/TocMobile.tsx
+++ b/src/components/TocMobile.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Link } from '@tanstack/react-router'
-import { MarkdownHeading } from '~/utils/markdown/processor'
+import type { MarkdownHeading } from '~/utils/markdown'
 import { ChevronDown, ChevronRight } from 'lucide-react'
 
 interface TocMobileProps {
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 2dab0bbeb..a68e52681 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -1,18 +1,20 @@
 import * as React from 'react'
 import {
   useFloating,
-  useHover,
-  useInteractions,
   FloatingPortal,
   offset,
   shift,
   flip,
   autoUpdate,
+  useMergeRefs,
 } from '@floating-ui/react'
 
+type TooltipTriggerProps = React.HTMLProps<HTMLElement> &
+  React.RefAttributes<HTMLElement>
+
 interface TooltipProps {
   content: React.ReactNode
-  children: React.ReactElement
+  children: React.ReactElement<TooltipTriggerProps>
   placement?: 'top' | 'right' | 'bottom' | 'left'
   className?: string
 }
@@ -25,7 +27,7 @@ export function Tooltip({
 }: TooltipProps) {
   const [isOpen, setIsOpen] = React.useState(false)
 
-  const { refs, floatingStyles, context } = useFloating({
+  const { refs, floatingStyles } = useFloating<HTMLElement>({
     open: isOpen,
     onOpenChange: setIsOpen,
     placement,
@@ -33,24 +35,43 @@ export function Tooltip({
     whileElementsMounted: autoUpdate,
   })
 
-  const hover = useHover(context)
+  const triggerRef = useMergeRefs([refs.setReference, children.props.ref])
+  const triggerProps = children.props
+
+  const handleMouseEnter: React.MouseEventHandler<HTMLElement> = (event) => {
+    triggerProps.onMouseEnter?.(event)
+    setIsOpen(true)
+  }
+
+  const handleMouseLeave: React.MouseEventHandler<HTMLElement> = (event) => {
+    triggerProps.onMouseLeave?.(event)
+    setIsOpen(false)
+  }
+
+  const handleFocus: React.FocusEventHandler<HTMLElement> = (event) => {
+    triggerProps.onFocus?.(event)
+    setIsOpen(true)
+  }
 
-  const { getReferenceProps, getFloatingProps } = useInteractions([hover])
+  const handleBlur: React.FocusEventHandler<HTMLElement> = (event) => {
+    triggerProps.onBlur?.(event)
+    setIsOpen(false)
+  }
 
   return (
     <>
-      {/* eslint-disable-next-line react-hooks/refs */}
       {React.cloneElement(children, {
-        // eslint-disable-next-line react-hooks/refs
-        ref: refs.setReference,
-        ...getReferenceProps(),
-      } as any)}
+        ref: triggerRef,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+      })}
       <FloatingPortal>
         {isOpen && (
           <div
             ref={refs.setFloating /* eslint-disable-line react-hooks/refs */}
             style={floatingStyles}
-            {...getFloatingProps()}
             className={`z-50 rounded-md bg-gray-900 px-3 py-1.5 text-sm text-white shadow-lg dark:bg-gray-800 ${className}`}
           >
             {content}
diff --git a/src/components/TrustedByMarquee.tsx b/src/components/TrustedByMarquee.tsx
deleted file mode 100644
index e3fa602c2..000000000
--- a/src/components/TrustedByMarquee.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { twMerge } from 'tailwind-merge'
-
-const brandLogos: Record<string, string> = {
-  Google: '/logos/google.svg',
-  Amazon: '/logos/amazon.svg',
-  Apple: '/logos/apple.svg',
-  Microsoft: '/logos/microsoft.svg',
-  Walmart: '/logos/walmart.svg',
-  Uber: '/logos/uber.svg',
-  Salesforce: '/logos/salesforce.svg',
-  Cisco: '/logos/cisco.svg',
-  Intuit: '/logos/intuit.svg',
-  HP: '/logos/hp.svg',
-  Docusign: '/logos/docusign.svg',
-  TicketMaster: '/logos/ticketmaster.svg',
-  Nordstrom: '/logos/nordstrom.svg',
-  'Yahoo!': '/logos/yahoo.svg',
-}
-
-type TrustedByMarqueeProps = {
-  brands: string[]
-  speed?: number // pixels per second
-  className?: string
-}
-
-export function TrustedByMarquee({
-  brands,
-  speed = 150,
-  className,
-}: TrustedByMarqueeProps) {
-  const animationDuration = `${(brands.length * 200) / speed}s`
-
-  return (
-    <div className={twMerge('overflow-hidden w-full group', className)}>
-      <div className="uppercase tracking-wider text-sm font-semibold text-center text-gray-400 mb-6">
-        Trusted in Production by
-      </div>
-      <div className="relative w-full">
-        {/* Left fade */}
-        <div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-[#fdfdfd] dark:from-[#0a0a0a] to-transparent z-10 pointer-events-none" />
-        {/* Right fade */}
-        <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-[#fdfdfd] dark:from-[#0a0a0a] to-transparent z-10 pointer-events-none" />
-        <div
-          className="flex gap-8 items-center whitespace-nowrap will-change-transform animate-[marquee_linear_infinite] group-hover:[animation-play-state:paused]"
-          style={{
-            animationDuration,
-          }}
-        >
-          {[...brands, ...brands, ...brands].map((brand, i) => {
-            const logoSrc = brandLogos[brand]
-            return logoSrc ? (
-              <img
-                key={i}
-                src={logoSrc}
-                alt={brand}
-                className="max-w-24 max-h-14 w-auto h-auto object-contain opacity-50 grayscale hover:opacity-100 transition-all duration-200 dark:invert dark:opacity-70 shrink-0"
-              />
-            ) : (
-              <span
-                key={i}
-                className="text-lg font-bold opacity-50 dark:opacity-70 shrink-0"
-              >
-                {brand}
-              </span>
-            )
-          })}
-        </div>
-      </div>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-          @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-33.333%); } }
-          .animate-\[marquee_linear_infinite\] { animation-name: marquee; animation-timing-function: linear; animation-iteration-count: infinite; }
-        `,
-        }}
-      />
-    </div>
-  )
-}
diff --git a/src/components/UserFeedbackSection.tsx b/src/components/UserFeedbackSection.tsx
index cc10fa430..f2e9e8205 100644
--- a/src/components/UserFeedbackSection.tsx
+++ b/src/components/UserFeedbackSection.tsx
@@ -3,7 +3,7 @@ import { Link } from '@tanstack/react-router'
 import { getUserDocFeedbackQueryOptions } from '~/queries/docFeedback'
 import { PaginationControls } from './PaginationControls'
 import { Spinner } from './Spinner'
-import { calculatePoints } from '~/utils/docFeedback.client'
+import { calculatePoints } from '~/utils/docFeedback.shared'
 import { Award, ExternalLink, Lightbulb, MessageSquare } from 'lucide-react'
 import { Badge } from '~/ui'
 import { useState } from 'react'
@@ -12,7 +12,7 @@ interface UserFeedbackSectionProps {
   userId: string
 }
 
-export function UserFeedbackSection({}: UserFeedbackSectionProps) {
+export function UserFeedbackSection(_props: UserFeedbackSectionProps) {
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(10)
 
@@ -34,7 +34,7 @@ export function UserFeedbackSection({}: UserFeedbackSectionProps) {
   return (
     <div className="space-y-6">
       {/* Points Summary Box */}
-      <div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
+      <div className="bg-linear-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
         <div className="flex items-start justify-between">
           <div>
             <div className="flex items-center gap-2 mb-2">
diff --git a/src/components/VersionSelect.tsx b/src/components/VersionSelect.tsx
index 532d2caa3..f6d79fed7 100644
--- a/src/components/VersionSelect.tsx
+++ b/src/components/VersionSelect.tsx
@@ -4,6 +4,10 @@ import { useNavigate, useParams } from '@tanstack/react-router'
 import { Tag } from 'lucide-react'
 import { Select, SelectOption } from './Select'
 import { getLibrary, LibraryId } from '~/libraries'
+import {
+  getLocalStorageItem,
+  setLocalStorageItem,
+} from '~/utils/browser-storage'
 
 export function VersionSelect({ libraryId }: { libraryId: LibraryId }) {
   const library = getLibrary(libraryId)
@@ -28,12 +32,9 @@ const useLocalCurrentVersion = create<{
   currentVersion?: string
   setCurrentVersion: (version: string) => void
 }>((set) => ({
-  currentVersion:
-    typeof document !== 'undefined'
-      ? localStorage.getItem('version') || undefined
-      : undefined,
+  currentVersion: getLocalStorageItem('version') || undefined,
   setCurrentVersion: (version: string) => {
-    localStorage.setItem('version', version)
+    setLocalStorageItem('version', version)
     set({ currentVersion: version })
   },
 }))
diff --git a/src/components/account/AccountProfilePictureSection.client.tsx b/src/components/account/AccountProfilePictureSection.client.tsx
new file mode 100644
index 000000000..87e40815c
--- /dev/null
+++ b/src/components/account/AccountProfilePictureSection.client.tsx
@@ -0,0 +1,238 @@
+import * as React from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { Camera, RotateCcw, Trash2 } from 'lucide-react'
+import { Avatar } from '~/components/Avatar'
+import { AvatarCropModal } from '~/components/AvatarCropModal'
+import { useToast } from '~/components/ToastProvider'
+import { Button } from '~/ui'
+import { removeProfileImage, revertProfileImage } from '~/utils/users.functions'
+import { useUploadThing } from '~/utils/uploadthing.client'
+import { currentUserQueryOptions } from '~/hooks/useCurrentUser'
+import {
+  AVATAR_IMAGE_MAX_BYTES,
+  validateImageUploadFile,
+} from '~/utils/upload-preflight'
+
+type AccountProfileUser = {
+  image?: string | null
+  oauthImage?: string | null
+  name?: string | null
+  email?: string | null
+}
+
+export function AccountProfilePictureSection({
+  user,
+}: {
+  user: AccountProfileUser | undefined
+}) {
+  const queryClient = useQueryClient()
+  const { notify } = useToast()
+
+  const [cropModalOpen, setCropModalOpen] = React.useState(false)
+  const [selectedImage, setSelectedImage] = React.useState<string | null>(null)
+  const [isUploading, setIsUploading] = React.useState(false)
+  const [isReverting, setIsReverting] = React.useState(false)
+  const [isRemoving, setIsRemoving] = React.useState(false)
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  const { startUpload } = useUploadThing('avatarUploader', {
+    onClientUploadComplete: () => {
+      setIsUploading(false)
+      queryClient.invalidateQueries(currentUserQueryOptions)
+      notify(
+        <div>
+          <div className="font-medium">Profile picture updated</div>
+          <div className="text-gray-500 dark:text-gray-400 text-xs">
+            Your new avatar is now live
+          </div>
+        </div>,
+      )
+    },
+    onUploadError: (error) => {
+      setIsUploading(false)
+      notify(
+        <div>
+          <div className="font-medium">Upload failed</div>
+          <div className="text-gray-500 dark:text-gray-400 text-xs">
+            {error.message}
+          </div>
+        </div>,
+      )
+    },
+  })
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      const validationError = validateImageUploadFile(
+        file,
+        AVATAR_IMAGE_MAX_BYTES,
+      )
+
+      if (validationError) {
+        notify(
+          <div>
+            <div className="font-medium">Upload unavailable</div>
+            <div className="text-gray-500 dark:text-gray-400 text-xs">
+              {validationError}
+            </div>
+          </div>,
+        )
+        e.target.value = ''
+        return
+      }
+
+      const reader = new FileReader()
+      reader.onload = () => {
+        if (typeof reader.result === 'string') {
+          setSelectedImage(reader.result)
+          setCropModalOpen(true)
+        }
+      }
+      reader.readAsDataURL(file)
+    }
+    e.target.value = ''
+  }
+
+  const handleCropComplete = async (croppedBlob: Blob) => {
+    setIsUploading(true)
+    const file = new File([croppedBlob], 'avatar.jpg', { type: 'image/jpeg' })
+    await startUpload([file])
+  }
+
+  const handleRevertToOAuth = async () => {
+    if (!user?.oauthImage) return
+
+    setIsReverting(true)
+    try {
+      await revertProfileImage()
+      queryClient.invalidateQueries(currentUserQueryOptions)
+      notify(
+        <div>
+          <div className="font-medium">Profile picture reverted</div>
+          <div className="text-gray-500 dark:text-gray-400 text-xs">
+            Using your OAuth provider image
+          </div>
+        </div>,
+      )
+    } catch {
+      notify(
+        <div>
+          <div className="font-medium">Error</div>
+          <div className="text-gray-500 dark:text-gray-400 text-xs">
+            Failed to revert profile picture
+          </div>
+        </div>,
+      )
+    } finally {
+      setIsReverting(false)
+    }
+  }
+
+  const handleRemovePhoto = async () => {
+    setIsRemoving(true)
+    try {
+      await removeProfileImage()
+      queryClient.invalidateQueries(currentUserQueryOptions)
+      notify(
+        <div>
+          <div className="font-medium">Profile picture removed</div>
+          <div className="text-gray-500 dark:text-gray-400 text-xs">
+            Using default avatar
+          </div>
+        </div>,
+      )
+    } catch {
+      notify(
+        <div>
+          <div className="font-medium">Error</div>
+          <div className="text-gray-500 dark:text-gray-400 text-xs">
+            Failed to remove profile picture
+          </div>
+        </div>,
+      )
+    } finally {
+      setIsRemoving(false)
+    }
+  }
+
+  const hasCustomImage = user?.image && user.image !== user.oauthImage
+  const canRevert = hasCustomImage && user?.oauthImage
+  const hasAnyImage = user?.image || user?.oauthImage
+
+  return (
+    <>
+      <div className="flex items-center gap-4">
+        <div className="relative group">
+          <Avatar
+            image={user?.image}
+            oauthImage={user?.oauthImage}
+            name={user?.name}
+            email={user?.email}
+            size="xl"
+          />
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isUploading}
+            className="absolute inset-0 flex items-center justify-center bg-black/50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer disabled:cursor-not-allowed"
+          >
+            <Camera className="w-6 h-6 text-white" />
+          </button>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/png,image/jpeg,image/webp,image/gif"
+            onChange={handleFileSelect}
+            className="hidden"
+          />
+        </div>
+        <div className="flex flex-col gap-2">
+          <Button
+            variant="ghost"
+            size="xs"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isUploading}
+          >
+            <Camera className="w-3.5 h-3.5" />
+            {isUploading ? 'Uploading...' : 'Change photo'}
+          </Button>
+          {canRevert && (
+            <Button
+              variant="ghost"
+              size="xs"
+              onClick={handleRevertToOAuth}
+              disabled={isReverting}
+            >
+              <RotateCcw className="w-3.5 h-3.5" />
+              {isReverting ? 'Reverting...' : 'Revert to original'}
+            </Button>
+          )}
+          {hasAnyImage && (
+            <Button
+              variant="ghost"
+              size="xs"
+              onClick={handleRemovePhoto}
+              disabled={isRemoving}
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+              {isRemoving ? 'Removing...' : 'Remove photo'}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {selectedImage && (
+        <AvatarCropModal
+          open={cropModalOpen}
+          onOpenChange={(open) => {
+            setCropModalOpen(open)
+            if (!open) setSelectedImage(null)
+          }}
+          imageSrc={selectedImage}
+          onCropComplete={handleCropComplete}
+        />
+      )}
+    </>
+  )
+}
diff --git a/src/components/admin/BannerEditor.tsx b/src/components/admin/BannerEditor.tsx
deleted file mode 100644
index 4827535d2..000000000
--- a/src/components/admin/BannerEditor.tsx
+++ /dev/null
@@ -1,757 +0,0 @@
-import * as React from 'react'
-import { useState } from 'react'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { libraries } from '~/libraries'
-import {
-  createBanner,
-  updateBanner,
-  type BannerWithMeta,
-} from '~/utils/banner.functions'
-import {
-  Save,
-  X,
-  Link2,
-  Settings,
-  Eye,
-  Calendar,
-  Globe,
-  BookOpen,
-  Info,
-  AlertTriangle,
-  CheckCircle,
-  Gift,
-  ExternalLink,
-} from 'lucide-react'
-import { FormInput, Button } from '~/ui'
-
-interface BannerEditorProps {
-  banner: BannerWithMeta | null
-  onSave: () => void
-  onCancel: () => void
-}
-
-const BANNER_STYLES = [
-  {
-    value: 'info',
-    label: 'Info',
-    icon: Info,
-    bgClass:
-      'bg-blue-100 dark:bg-blue-950 border-blue-200 dark:border-blue-800',
-    textClass: 'text-blue-900 dark:text-blue-100',
-    iconClass: 'text-blue-600 dark:text-blue-400',
-  },
-  {
-    value: 'warning',
-    label: 'Warning',
-    icon: AlertTriangle,
-    bgClass:
-      'bg-amber-100 dark:bg-amber-950 border-amber-200 dark:border-amber-800',
-    textClass: 'text-amber-900 dark:text-amber-100',
-    iconClass: 'text-amber-600 dark:text-amber-400',
-  },
-  {
-    value: 'success',
-    label: 'Success',
-    icon: CheckCircle,
-    bgClass:
-      'bg-green-100 dark:bg-green-950 border-green-200 dark:border-green-800',
-    textClass: 'text-green-900 dark:text-green-100',
-    iconClass: 'text-green-600 dark:text-green-400',
-  },
-  {
-    value: 'promo',
-    label: 'Promo',
-    icon: Gift,
-    bgClass:
-      'bg-purple-100 dark:bg-purple-950 border-purple-200 dark:border-purple-800',
-    textClass: 'text-purple-900 dark:text-purple-100',
-    iconClass: 'text-purple-600 dark:text-purple-400',
-  },
-] as const
-
-type BannerStyle = (typeof BANNER_STYLES)[number]['value']
-type BannerScope = 'global' | 'targeted'
-
-export function BannerEditor({ banner, onSave, onCancel }: BannerEditorProps) {
-  const isNew = banner === null
-  const queryClient = useQueryClient()
-
-  // Form state
-  const [title, setTitle] = useState(banner?.title || '')
-  const [content, setContent] = useState(banner?.content || '')
-  const [linkUrl, setLinkUrl] = useState(banner?.linkUrl || '')
-  const [linkText, setLinkText] = useState(banner?.linkText || '')
-  const [style, setStyle] = useState<BannerStyle>(banner?.style ?? 'info')
-  const [scope, setScope] = useState<BannerScope>(banner?.scope ?? 'global')
-  const [pathPrefixes, setPathPrefixes] = useState<string[]>(
-    banner?.pathPrefixes ?? [],
-  )
-  const [newPathPrefix, setNewPathPrefix] = useState('')
-  const [isActive, setIsActive] = useState(banner?.isActive ?? true)
-  const [startsAt, setStartsAt] = useState(
-    banner?.startsAt
-      ? new Date(banner.startsAt).toISOString().slice(0, 16)
-      : '',
-  )
-  const [expiresAt, setExpiresAt] = useState(
-    banner?.expiresAt
-      ? new Date(banner.expiresAt).toISOString().slice(0, 16)
-      : '',
-  )
-  const [priority, setPriority] = useState(banner?.priority ?? 0)
-  const [saving, setSaving] = useState(false)
-
-  // Mutations
-  const createMutation = useMutation({
-    mutationFn: createBanner,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['banners'] })
-    },
-  })
-
-  const updateMutation = useMutation({
-    mutationFn: updateBanner,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['banners'] })
-    },
-  })
-
-  const handleSave = async () => {
-    setSaving(true)
-    try {
-      if (isNew) {
-        await createMutation.mutateAsync({
-          data: {
-            title,
-            content: content || undefined,
-            linkUrl: linkUrl || undefined,
-            linkText: linkText || undefined,
-            style,
-            scope,
-            pathPrefixes,
-            isActive,
-            startsAt: startsAt ? new Date(startsAt).getTime() : undefined,
-            expiresAt: expiresAt ? new Date(expiresAt).getTime() : undefined,
-            priority,
-          },
-        })
-      } else {
-        await updateMutation.mutateAsync({
-          data: {
-            id: banner.id,
-            title,
-            content: content || undefined,
-            linkUrl: linkUrl || undefined,
-            linkText: linkText || undefined,
-            style,
-            scope,
-            pathPrefixes,
-            isActive,
-            startsAt: startsAt ? new Date(startsAt).getTime() : null,
-            expiresAt: expiresAt ? new Date(expiresAt).getTime() : null,
-            priority,
-          },
-        })
-      }
-      onSave()
-    } catch (error) {
-      console.error('Error saving banner:', error)
-      const errorMessage =
-        error instanceof Error ? error.message : 'Unknown error occurred'
-      alert(`Failed to save banner: ${errorMessage}`)
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const addPathPrefix = (prefix: string) => {
-    const normalizedPrefix = prefix.startsWith('/') ? prefix : `/${prefix}`
-    if (!pathPrefixes.includes(normalizedPrefix)) {
-      setPathPrefixes((prev) => [...prev, normalizedPrefix])
-    }
-    setNewPathPrefix('')
-  }
-
-  const removePathPrefix = (prefix: string) => {
-    setPathPrefixes((prev) => prev.filter((p) => p !== prefix))
-  }
-
-  const isValid = title.trim().length > 0
-  const currentStyle =
-    BANNER_STYLES.find((s) => s.value === style) || BANNER_STYLES[0]
-
-  // Repeated class patterns
-  const cardClass =
-    'bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden'
-  const cardHeaderClass =
-    'px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50'
-  const labelClass =
-    'block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2'
-
-  return (
-    <div className="min-h-full">
-      {/* Sticky Header */}
-      <div className="sticky top-0 z-10 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 -mx-8 px-8 py-4 mb-6">
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
-              {isNew ? 'Create Banner' : 'Edit Banner'}
-            </h1>
-            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-              {isNew
-                ? 'Create a new site-wide banner'
-                : `Editing: ${banner?.title}`}
-            </p>
-          </div>
-          <div className="flex items-center gap-3">
-            <Button variant="secondary" onClick={onCancel}>
-              <X className="w-4 h-4" />
-              Cancel
-            </Button>
-            <Button onClick={handleSave} disabled={saving || !isValid}>
-              <Save className="w-4 h-4" />
-              {saving ? 'Saving...' : 'Save Banner'}
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
-        {/* Left Column - Form */}
-        <div className="space-y-6">
-          {/* Content Card */}
-          <div className={cardClass}>
-            <div className={cardHeaderClass}>
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
-                  <Info className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-                </div>
-                <div>
-                  <h2 className="font-semibold text-gray-900 dark:text-white">
-                    Banner Content
-                  </h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    Title and message for the banner
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className="p-6 space-y-5">
-              {/* Title */}
-              <div>
-                <label htmlFor="title" className={labelClass}>
-                  Title <span className="text-red-500">*</span>
-                </label>
-                <FormInput
-                  type="text"
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                  placeholder="Enter banner title"
-                />
-              </div>
-
-              {/* Content */}
-              <div>
-                <label htmlFor="content" className={labelClass}>
-                  Description
-                  <span className="ml-2 text-xs font-normal text-gray-400">
-                    (Optional - shown below title)
-                  </span>
-                </label>
-                <textarea
-                  value={content}
-                  onChange={(e) => setContent(e.target.value)}
-                  rows={2}
-                  className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
-                  placeholder="Optional additional details"
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* Link Card */}
-          <div className={cardClass}>
-            <div className={cardHeaderClass}>
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
-                  <Link2 className="w-4 h-4 text-green-600 dark:text-green-400" />
-                </div>
-                <div>
-                  <h2 className="font-semibold text-gray-900 dark:text-white">
-                    Link (Optional)
-                  </h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    Make the banner clickable
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className="p-6 space-y-5">
-              {/* Link URL */}
-              <div>
-                <label htmlFor="linkUrl" className={labelClass}>
-                  Link URL
-                </label>
-                <FormInput
-                  type="url"
-                  value={linkUrl}
-                  onChange={(e) => setLinkUrl(e.target.value)}
-                  placeholder="https://example.com/page"
-                />
-              </div>
-
-              {/* Link Text */}
-              <div>
-                <label htmlFor="linkText" className={labelClass}>
-                  Link Text
-                  <span className="ml-2 text-xs font-normal text-gray-400">
-                    (Button text - defaults to "Learn More")
-                  </span>
-                </label>
-                <FormInput
-                  type="text"
-                  value={linkText}
-                  onChange={(e) => setLinkText(e.target.value)}
-                  placeholder="Learn More"
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* Style & Targeting Card */}
-          <div className={cardClass}>
-            <div className={cardHeaderClass}>
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                  <Settings className="w-4 h-4 text-purple-600 dark:text-purple-400" />
-                </div>
-                <div>
-                  <h2 className="font-semibold text-gray-900 dark:text-white">
-                    Style & Targeting
-                  </h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    Appearance and where to show the banner
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className="p-6 space-y-5">
-              {/* Banner Style */}
-              <div>
-                <label
-                  htmlFor="style"
-                  className="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-3"
-                >
-                  Banner Style
-                </label>
-                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
-                  {BANNER_STYLES.map((s) => {
-                    const Icon = s.icon
-                    return (
-                      <button
-                        key={s.value}
-                        type="button"
-                        onClick={() => setStyle(s.value)}
-                        className={`flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-all ${
-                          style === s.value
-                            ? `border-current ${s.bgClass} ${s.textClass}`
-                            : 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'
-                        }`}
-                      >
-                        <Icon
-                          className={`w-5 h-5 ${style === s.value ? s.iconClass : 'text-gray-400'}`}
-                        />
-                        <span
-                          className={`text-xs font-medium ${style === s.value ? '' : 'text-gray-600 dark:text-gray-400'}`}
-                        >
-                          {s.label}
-                        </span>
-                      </button>
-                    )
-                  })}
-                </div>
-              </div>
-
-              {/* Banner Scope */}
-              <div>
-                <label
-                  htmlFor="scope"
-                  className="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-3"
-                >
-                  Banner Scope
-                </label>
-                <div className="grid grid-cols-2 gap-3">
-                  <button
-                    type="button"
-                    onClick={() => setScope('global')}
-                    className={`flex items-center gap-3 p-4 rounded-lg border-2 transition-all ${
-                      scope === 'global'
-                        ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20'
-                        : 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'
-                    }`}
-                  >
-                    <Globe
-                      className={`w-5 h-5 ${scope === 'global' ? 'text-purple-500' : 'text-gray-400'}`}
-                    />
-                    <div className="text-left">
-                      <div
-                        className={`font-medium ${scope === 'global' ? 'text-purple-700 dark:text-purple-300' : 'text-gray-600 dark:text-gray-400'}`}
-                      >
-                        Global
-                      </div>
-                      <div className="text-xs text-gray-500 dark:text-gray-400">
-                        Show on all pages
-                      </div>
-                    </div>
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setScope('targeted')}
-                    className={`flex items-center gap-3 p-4 rounded-lg border-2 transition-all ${
-                      scope === 'targeted'
-                        ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20'
-                        : 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'
-                    }`}
-                  >
-                    <BookOpen
-                      className={`w-5 h-5 ${scope === 'targeted' ? 'text-purple-500' : 'text-gray-400'}`}
-                    />
-                    <div className="text-left">
-                      <div
-                        className={`font-medium ${scope === 'targeted' ? 'text-purple-700 dark:text-purple-300' : 'text-gray-600 dark:text-gray-400'}`}
-                      >
-                        Targeted
-                      </div>
-                      <div className="text-xs text-gray-500 dark:text-gray-400">
-                        Only on specific paths
-                      </div>
-                    </div>
-                  </button>
-                </div>
-              </div>
-
-              {/* Path Prefix Selection - Only show if scope is targeted */}
-              {scope === 'targeted' && (
-                <div>
-                  <label className="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
-                    Show Banner On Paths
-                    {pathPrefixes.length > 0 && (
-                      <span className="ml-2 text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 px-2 py-0.5 rounded-full">
-                        {pathPrefixes.length} path
-                        {pathPrefixes.length !== 1 ? 's' : ''}
-                      </span>
-                    )}
-                  </label>
-
-                  {/* Quick add library paths */}
-                  <div className="mb-3">
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">
-                      Quick add library:
-                    </p>
-                    <div className="flex flex-wrap gap-1.5">
-                      {libraries
-                        .filter(
-                          (lib) => !('visible' in lib) || lib.visible !== false,
-                        )
-                        .map((library) => (
-                          <button
-                            key={library.id}
-                            type="button"
-                            onClick={() => addPathPrefix(`/${library.id}`)}
-                            disabled={pathPrefixes.includes(`/${library.id}`)}
-                            className={`px-2 py-1 rounded text-xs font-medium transition-all ${
-                              pathPrefixes.includes(`/${library.id}`)
-                                ? 'bg-gray-200 dark:bg-gray-600 text-gray-400 dark:text-gray-500 cursor-not-allowed'
-                                : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-purple-100 dark:hover:bg-purple-900/30 hover:text-purple-600 dark:hover:text-purple-400'
-                            }`}
-                          >
-                            {library.name}
-                          </button>
-                        ))}
-                    </div>
-                  </div>
-
-                  {/* Custom path input */}
-                  <div className="flex gap-2 mb-3">
-                    <FormInput
-                      type="text"
-                      value={newPathPrefix}
-                      onChange={(e) => setNewPathPrefix(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' && newPathPrefix.trim()) {
-                          e.preventDefault()
-                          addPathPrefix(newPathPrefix.trim())
-                        }
-                      }}
-                      placeholder="/custom/path"
-                      focusRing="purple"
-                      className="flex-1 px-3 py-2 text-sm"
-                    />
-                    <Button
-                      size="sm"
-                      color="purple"
-                      onClick={() => {
-                        if (newPathPrefix.trim()) {
-                          addPathPrefix(newPathPrefix.trim())
-                        }
-                      }}
-                      disabled={!newPathPrefix.trim()}
-                    >
-                      Add
-                    </Button>
-                  </div>
-
-                  {/* Selected paths */}
-                  {pathPrefixes.length > 0 && (
-                    <div className="flex flex-wrap gap-2">
-                      {pathPrefixes.map((prefix) => (
-                        <span
-                          key={prefix}
-                          className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full text-sm"
-                        >
-                          <code className="text-xs">{prefix}</code>
-                          <button
-                            type="button"
-                            onClick={() => removePathPrefix(prefix)}
-                            className="text-purple-500 hover:text-purple-700 dark:hover:text-purple-200"
-                          >
-                            <X className="w-3 h-3" />
-                          </button>
-                        </span>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Scheduling Card */}
-          <div className={cardClass}>
-            <div className={cardHeaderClass}>
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-orange-100 dark:bg-orange-900/30 rounded-lg">
-                  <Calendar className="w-4 h-4 text-orange-600 dark:text-orange-400" />
-                </div>
-                <div>
-                  <h2 className="font-semibold text-gray-900 dark:text-white">
-                    Scheduling
-                  </h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    When the banner should be active
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className="p-6 space-y-5">
-              {/* Active Toggle */}
-              <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
-                <label htmlFor="isActive">
-                  <div className="font-medium text-gray-900 dark:text-white">
-                    Active
-                  </div>
-                  <div className="text-sm text-gray-500 dark:text-gray-400">
-                    Banner will only show when active
-                  </div>
-                </label>
-                <div className="relative">
-                  <input
-                    type="checkbox"
-                    checked={isActive}
-                    onChange={(e) => setIsActive(e.target.checked)}
-                    className="sr-only"
-                  />
-                  <div
-                    className={`w-11 h-6 rounded-full transition-colors ${isActive ? 'bg-green-500' : 'bg-gray-300 dark:bg-gray-600'}`}
-                  >
-                    <div
-                      className={`w-5 h-5 bg-white rounded-full shadow transform transition-transform mt-0.5 ${isActive ? 'translate-x-5.5 ml-0.5' : 'translate-x-0.5'}`}
-                    />
-                  </div>
-                </div>
-              </div>
-
-              {/* Start Date */}
-              <div>
-                <label htmlFor="startsAt" className={labelClass}>
-                  Start Date & Time
-                  <span className="ml-2 text-xs font-normal text-gray-400">
-                    (Optional - shows immediately if empty)
-                  </span>
-                </label>
-                <FormInput
-                  type="datetime-local"
-                  value={startsAt}
-                  onChange={(e) => setStartsAt(e.target.value)}
-                  focusRing="orange"
-                />
-              </div>
-
-              {/* End Date */}
-              <div>
-                <label htmlFor="expiresAt" className={labelClass}>
-                  End Date & Time
-                  <span className="ml-2 text-xs font-normal text-gray-400">
-                    (Optional - never expires if empty)
-                  </span>
-                </label>
-                <FormInput
-                  type="datetime-local"
-                  value={expiresAt}
-                  onChange={(e) => setExpiresAt(e.target.value)}
-                  focusRing="orange"
-                />
-              </div>
-
-              {/* Priority */}
-              <div>
-                <label htmlFor="priority" className={labelClass}>
-                  Priority
-                  <span className="ml-2 text-xs font-normal text-gray-400">
-                    (Higher = shown first when multiple banners match)
-                  </span>
-                </label>
-                <FormInput
-                  type="number"
-                  value={priority}
-                  onChange={(e) => setPriority(parseInt(e.target.value) || 0)}
-                  focusRing="orange"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Right Column - Live Preview */}
-        <div className="xl:sticky xl:top-24 xl:self-start">
-          <div className={cardClass}>
-            <div className={cardHeaderClass}>
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
-                  <Eye className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
-                </div>
-                <div>
-                  <h2 className="font-semibold text-gray-900 dark:text-white">
-                    Live Preview
-                  </h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    How the banner will appear to users
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className="p-6">
-              {/* Banner Preview */}
-              <div
-                className={`p-4 rounded-lg border ${currentStyle.bgClass} ${currentStyle.textClass}`}
-              >
-                <div className="flex items-start gap-3">
-                  <currentStyle.icon
-                    className={`w-5 h-5 mt-0.5 flex-shrink-0 ${currentStyle.iconClass}`}
-                  />
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium">{title || 'Banner Title'}</div>
-                    {content && (
-                      <div className="text-sm opacity-90 mt-0.5">{content}</div>
-                    )}
-                    {linkUrl && (
-                      <a
-                        href={linkUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-1.5 mt-2 text-sm font-medium underline hover:no-underline"
-                      >
-                        {linkText || 'Learn More'}
-                        <ExternalLink className="w-3 h-3" />
-                      </a>
-                    )}
-                  </div>
-                  <button
-                    type="button"
-                    className="text-current opacity-60 hover:opacity-100 transition-opacity flex-shrink-0"
-                    title="Dismiss"
-                  >
-                    <X className="w-4 h-4" />
-                  </button>
-                </div>
-              </div>
-              <p className="text-xs text-gray-500 dark:text-gray-400 mt-3">
-                Users can dismiss the banner by clicking the X button.
-              </p>
-
-              {/* Status Summary */}
-              <div className="mt-6 space-y-3">
-                <h3 className="text-sm font-medium text-gray-900 dark:text-white">
-                  Status Summary
-                </h3>
-                <div className="space-y-2 text-sm">
-                  <div className="flex items-center justify-between">
-                    <span className="text-gray-500 dark:text-gray-400">
-                      Status
-                    </span>
-                    <span
-                      className={`px-2 py-0.5 rounded-full text-xs font-medium ${
-                        isActive
-                          ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
-                          : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
-                      }`}
-                    >
-                      {isActive ? 'Active' : 'Inactive'}
-                    </span>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <span className="text-gray-500 dark:text-gray-400">
-                      Scope
-                    </span>
-                    <span className="text-gray-900 dark:text-white capitalize">
-                      {scope}
-                    </span>
-                  </div>
-                  {scope === 'targeted' && pathPrefixes.length > 0 && (
-                    <div className="flex items-center justify-between">
-                      <span className="text-gray-500 dark:text-gray-400">
-                        Paths
-                      </span>
-                      <span className="text-gray-900 dark:text-white">
-                        {pathPrefixes.length} path
-                        {pathPrefixes.length !== 1 ? 's' : ''}
-                      </span>
-                    </div>
-                  )}
-                  {startsAt && (
-                    <div className="flex items-center justify-between">
-                      <span className="text-gray-500 dark:text-gray-400">
-                        Starts
-                      </span>
-                      <span className="text-gray-900 dark:text-white">
-                        {new Date(startsAt).toLocaleString()}
-                      </span>
-                    </div>
-                  )}
-                  {expiresAt && (
-                    <div className="flex items-center justify-between">
-                      <span className="text-gray-500 dark:text-gray-400">
-                        Expires
-                      </span>
-                      <span className="text-gray-900 dark:text-white">
-                        {new Date(expiresAt).toLocaleString()}
-                      </span>
-                    </div>
-                  )}
-                  <div className="flex items-center justify-between">
-                    <span className="text-gray-500 dark:text-gray-400">
-                      Priority
-                    </span>
-                    <span className="text-gray-900 dark:text-white">
-                      {priority}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/admin/CapabilityBadge.tsx b/src/components/admin/CapabilityBadge.tsx
index 2bfb23029..dc00f433f 100644
--- a/src/components/admin/CapabilityBadge.tsx
+++ b/src/components/admin/CapabilityBadge.tsx
@@ -13,7 +13,6 @@ const capabilityVariants: Record<
   admin: 'error',
   disableAds: 'purple',
   builder: 'info',
-  feed: 'orange',
   'moderate-feedback': 'success',
   'moderate-showcases': 'teal',
 }
diff --git a/src/components/admin/DocsCacheTab.tsx b/src/components/admin/DocsCacheTab.tsx
new file mode 100644
index 000000000..b0911cd23
--- /dev/null
+++ b/src/components/admin/DocsCacheTab.tsx
@@ -0,0 +1,371 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { BookOpen, Clock3, Database, GitBranch, RefreshCw } from 'lucide-react'
+import {
+  AdminEmptyState,
+  AdminLoading,
+  AdminPageHeader,
+  StatsCard,
+} from '~/components/admin'
+import { Card } from '~/components/Card'
+import { formatDistanceToNow } from '~/utils/dates'
+import {
+  invalidateDocsCache,
+  listDocsCacheRepos,
+} from '~/utils/docs-admin.functions'
+import { docsWebhookSources } from '~/utils/docs-webhook-sources'
+import { Button } from '~/ui'
+
+const docsCacheQueryKey = ['admin', 'docs-cache'] as const
+
+type DocsCacheResponse = Awaited<ReturnType<typeof listDocsCacheRepos>>
+type DocsCacheRepo = DocsCacheResponse['repos'][number]
+
+function getRepoStatus(repo: DocsCacheRepo) {
+  if (repo.totalEntries === 0) {
+    return {
+      label: 'No Cache',
+      className:
+        'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
+    }
+  }
+
+  if (repo.staleEntries === 0) {
+    return {
+      label: 'Fresh',
+      className:
+        'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300',
+    }
+  }
+
+  if (repo.staleEntries === repo.totalEntries) {
+    return {
+      label: 'Stale',
+      className:
+        'bg-amber-100 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300',
+    }
+  }
+
+  return {
+    label: 'Mixed',
+    className:
+      'bg-blue-100 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300',
+  }
+}
+
+export function DocsCacheTab() {
+  const queryClient = useQueryClient()
+  const docsCacheQuery = useQuery({
+    queryKey: docsCacheQueryKey,
+    queryFn: () => listDocsCacheRepos(),
+    staleTime: 0,
+  })
+
+  const invalidateMutation = useMutation({
+    mutationFn: (repo: string | null) =>
+      invalidateDocsCache({ data: repo ? { repo } : {} }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: docsCacheQueryKey })
+    },
+  })
+
+  const data = docsCacheQuery.data
+  const repos =
+    data && data.repos.length > 0
+      ? data.repos
+      : docsWebhookSources.map((source) => ({
+          repo: source.repo,
+          refs: source.refs,
+          isWatched: true,
+          contentEntries: 0,
+          artifactEntries: 0,
+          staleContentEntries: 0,
+          staleArtifactEntries: 0,
+          totalEntries: 0,
+          staleEntries: 0,
+          cachedRefCount: source.refs.length,
+          lastUpdatedAt: null,
+        }))
+
+  if (docsCacheQuery.isLoading && !data) {
+    return <AdminLoading />
+  }
+
+  if (!data && !docsCacheQuery.isError && repos.length === 0) {
+    return (
+      <div className="space-y-6">
+        <AdminPageHeader icon={<BookOpen />} title="Docs Cache" />
+        <AdminEmptyState
+          icon={<Database className="h-6 w-6" />}
+          title="No docs cache repos found"
+          description="No watched repos or cached docs entries are available yet."
+        />
+      </div>
+    )
+  }
+
+  const invalidatingRepo = invalidateMutation.variables
+  const invalidatingAll =
+    invalidateMutation.isPending && invalidatingRepo === null
+
+  return (
+    <div className="space-y-6">
+      <AdminPageHeader
+        icon={<BookOpen />}
+        title="Docs Cache"
+        isLoading={docsCacheQuery.isFetching}
+        actions={
+          <Button
+            size="sm"
+            color="orange"
+            onClick={() => invalidateMutation.mutate(null)}
+            disabled={
+              invalidateMutation.isPending ||
+              (data?.summary.totalEntries ?? 0) === 0
+            }
+            title="Mark every cached docs row stale so the next docs request repopulates it"
+          >
+            <RefreshCw
+              className={invalidatingAll ? 'h-4 w-4 animate-spin' : 'h-4 w-4'}
+            />
+            {invalidatingAll ? 'Invalidating...' : 'Invalidate All Docs'}
+          </Button>
+        }
+      />
+
+      <Card className="p-4">
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          Marks cached docs content and generated docs artifacts stale in the
+          database. Nothing is deleted. The next docs request for that repo will
+          fetch fresh content from GitHub and rebuild derived artifacts.
+        </p>
+      </Card>
+
+      {docsCacheQuery.isError ? (
+        <MutationBanner
+          tone="error"
+          title="Docs cache overview failed to load"
+          description={
+            docsCacheQuery.error instanceof Error
+              ? docsCacheQuery.error.message
+              : String(docsCacheQuery.error)
+          }
+          onDismiss={() => docsCacheQuery.refetch()}
+        />
+      ) : null}
+
+      {invalidateMutation.data ? (
+        <MutationBanner
+          tone={
+            invalidateMutation.data.totalInvalidated > 0 ? 'success' : 'neutral'
+          }
+          title={
+            invalidateMutation.data.repo
+              ? `Invalidated ${invalidateMutation.data.repo}`
+              : 'Invalidated all docs repos'
+          }
+          description={`${invalidateMutation.data.totalInvalidated.toLocaleString()} entries marked stale (${invalidateMutation.data.staleContentCount.toLocaleString()} content, ${invalidateMutation.data.staleArtifactCount.toLocaleString()} artifacts).`}
+          onDismiss={() => invalidateMutation.reset()}
+        />
+      ) : null}
+
+      {invalidateMutation.isError ? (
+        <MutationBanner
+          tone="error"
+          title="Docs invalidation failed"
+          description={
+            invalidateMutation.error instanceof Error
+              ? invalidateMutation.error.message
+              : String(invalidateMutation.error)
+          }
+          onDismiss={() => invalidateMutation.reset()}
+        />
+      ) : null}
+
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+        <StatsCard
+          label="Watched Repos"
+          value={data?.summary.watchedRepoCount ?? docsWebhookSources.length}
+          icon={<GitBranch className="h-5 w-5" />}
+        />
+        <StatsCard
+          label="Cached Repos"
+          value={data?.summary.cachedRepoCount ?? 0}
+          icon={<Database className="h-5 w-5" />}
+        />
+        <StatsCard
+          label="Content Rows"
+          value={data?.summary.contentEntries ?? 0}
+          icon={<BookOpen className="h-5 w-5" />}
+        />
+        <StatsCard
+          label="Artifact Rows"
+          value={data?.summary.artifactEntries ?? 0}
+          icon={<Clock3 className="h-5 w-5" />}
+        />
+      </div>
+
+      <Card className="overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="min-w-full text-sm">
+            <thead className="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950/40">
+              <tr>
+                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                  Repo
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                  Refs
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                  Cache Rows
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                  Status
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                  Last Touched
+                </th>
+                <th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                  Action
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
+              {repos.map((repo) => {
+                const status = getRepoStatus(repo)
+                const isInvalidatingRepo =
+                  invalidateMutation.isPending && invalidatingRepo === repo.repo
+
+                return (
+                  <tr key={repo.repo} className="bg-white dark:bg-gray-900/70">
+                    <td className="px-4 py-3 align-top">
+                      <div className="font-mono text-xs text-gray-900 dark:text-gray-100">
+                        {repo.repo}
+                      </div>
+                      <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                        {repo.isWatched ? 'watched' : 'cached only'}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3 align-top">
+                      {repo.refs.length > 0 ? (
+                        <div className="flex flex-wrap gap-1">
+                          {repo.refs.map((ref) => (
+                            <span
+                              key={ref}
+                              className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-800 dark:text-gray-300"
+                            >
+                              {ref}
+                            </span>
+                          ))}
+                        </div>
+                      ) : repo.cachedRefCount > 0 ? (
+                        <span className="text-xs text-gray-500 dark:text-gray-400">
+                          {repo.cachedRefCount} cached ref
+                          {repo.cachedRefCount === 1 ? '' : 's'}
+                        </span>
+                      ) : (
+                        <span className="text-xs text-gray-400 dark:text-gray-500">
+                          —
+                        </span>
+                      )}
+                    </td>
+                    <td className="px-4 py-3 align-top">
+                      <div className="font-medium text-gray-900 dark:text-gray-100">
+                        {repo.totalEntries.toLocaleString()}
+                      </div>
+                      <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                        {repo.contentEntries.toLocaleString()} content,{' '}
+                        {repo.artifactEntries.toLocaleString()} artifacts
+                      </div>
+                      {repo.staleEntries > 0 ? (
+                        <div className="mt-1 text-xs text-amber-600 dark:text-amber-400">
+                          {repo.staleEntries.toLocaleString()} already stale
+                        </div>
+                      ) : null}
+                    </td>
+                    <td className="px-4 py-3 align-top">
+                      <span
+                        className={`inline-flex rounded-full px-2 py-1 text-xs font-medium ${status.className}`}
+                      >
+                        {status.label}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 align-top text-xs text-gray-500 dark:text-gray-400">
+                      {repo.lastUpdatedAt
+                        ? formatDistanceToNow(new Date(repo.lastUpdatedAt), {
+                            addSuffix: true,
+                          })
+                        : 'Never'}
+                    </td>
+                    <td className="px-4 py-3 align-top text-right">
+                      <Button
+                        size="sm"
+                        color="orange"
+                        onClick={() => invalidateMutation.mutate(repo.repo)}
+                        disabled={
+                          invalidateMutation.isPending ||
+                          repo.totalEntries === 0
+                        }
+                        title={`Mark ${repo.repo} docs cache entries stale`}
+                      >
+                        <RefreshCw
+                          className={
+                            isInvalidatingRepo
+                              ? 'h-4 w-4 animate-spin'
+                              : 'h-4 w-4'
+                          }
+                        />
+                        {isInvalidatingRepo ? 'Invalidating...' : 'Invalidate'}
+                      </Button>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  )
+}
+
+function MutationBanner({
+  title,
+  description,
+  tone,
+  onDismiss,
+}: {
+  title: string
+  description: string
+  tone: 'error' | 'neutral' | 'success'
+  onDismiss: () => void
+}) {
+  const className = {
+    success:
+      'border-emerald-200 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950/30',
+    neutral:
+      'border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/30',
+    error: 'border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/30',
+  }[tone]
+
+  return (
+    <div className={`rounded-lg border p-4 ${className}`}>
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="text-sm font-medium text-gray-900 dark:text-white">
+            {title}
+          </div>
+          <div className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+            {description}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="text-xs text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+        >
+          dismiss
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/admin/FeedEntryEditor.tsx b/src/components/admin/FeedEntryEditor.tsx
deleted file mode 100644
index 8705ad5db..000000000
--- a/src/components/admin/FeedEntryEditor.tsx
+++ /dev/null
@@ -1,536 +0,0 @@
-import * as React from 'react'
-import { useState } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { FeedEntry } from '~/components/FeedEntry'
-import { Markdown } from '~/components/markdown'
-import { libraries } from '~/libraries'
-import { partners } from '~/utils/partners'
-import { currentUserQueryOptions } from '~/queries/auth'
-import { useCreateFeedEntry, useUpdateFeedEntry } from '~/utils/mutations'
-import { generateManualEntryId } from '~/utils/feed-manual'
-import {
-  Save,
-  X,
-  FileText,
-  Tags,
-  Settings,
-  Eye,
-  Calendar,
-  Check,
-} from 'lucide-react'
-import { FormInput, Button } from '~/ui'
-
-interface FeedEntryEditorProps {
-  entry: FeedEntry | null
-  onSave: () => void
-  onCancel: () => void
-}
-
-export function FeedEntryEditor({
-  entry,
-  onSave,
-  onCancel,
-}: FeedEntryEditorProps) {
-  const isNew = entry === null
-
-  const [title, setTitle] = useState(entry?.title || '')
-  const [content, setContent] = useState(entry?.content || '')
-  const [excerpt, setExcerpt] = useState(entry?.excerpt || '')
-  const [publishedAt, setPublishedAt] = useState(
-    entry
-      ? new Date(entry.publishedAt).toISOString().split('T')[0]
-      : new Date().toISOString().split('T')[0],
-  )
-  // All manually created entries are announcements
-  const entryType = 'announcement' as const
-  const [selectedLibraries, setSelectedLibraries] = useState<string[]>(
-    entry?.libraryIds || [],
-  )
-  const [selectedPartners, setSelectedPartners] = useState<string[]>(
-    entry?.partnerIds || [],
-  )
-  const [tags, setTags] = useState<string>(entry?.tags.join(', ') || '')
-  const [showInFeed, setShowInFeed] = useState(entry?.showInFeed ?? true)
-  const [featured, setFeatured] = useState(entry?.featured ?? false)
-  const [saving, setSaving] = useState(false)
-
-  const userQuery = useQuery(currentUserQueryOptions())
-  const user = userQuery.data
-  const createEntry = useCreateFeedEntry()
-  const updateEntry = useUpdateFeedEntry()
-
-  const handleSave = async () => {
-    if (!user) {
-      alert('User not loaded. Please wait and try again.')
-      return
-    }
-
-    if (!user.userId) {
-      alert('User ID is missing. Please refresh the page and try again.')
-      return
-    }
-
-    setSaving(true)
-    try {
-      const tagArray = tags
-        .split(',')
-        .map((t) => t.trim())
-        .filter(Boolean)
-
-      if (isNew) {
-        const entryId = generateManualEntryId()
-        await createEntry.mutateAsync({
-          id: entryId,
-          entryType,
-          title,
-          content,
-          excerpt: excerpt || undefined,
-          publishedAt: new Date(publishedAt).getTime(),
-          metadata: {
-            createdBy: user.userId,
-          },
-          libraryIds: selectedLibraries,
-          partnerIds:
-            selectedPartners.length > 0 ? selectedPartners : undefined,
-          tags: tagArray,
-          showInFeed,
-          featured,
-          autoSynced: false,
-        })
-      } else {
-        await updateEntry.mutateAsync({
-          id: entry.id,
-          entryType,
-          title,
-          content,
-          excerpt: excerpt || undefined,
-          publishedAt: new Date(publishedAt).getTime(),
-          libraryIds: selectedLibraries,
-          partnerIds:
-            selectedPartners.length > 0 ? selectedPartners : undefined,
-          tags: tagArray,
-          showInFeed,
-          featured,
-        })
-      }
-      onSave()
-    } catch (error) {
-      console.error('Error saving entry:', error)
-      const errorMessage =
-        error instanceof Error ? error.message : 'Unknown error occurred'
-      alert(
-        `Failed to save entry: ${errorMessage}\n\nCheck the console for more details.`,
-      )
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const toggleLibrary = (libraryId: string) => {
-    setSelectedLibraries((prev) =>
-      prev.includes(libraryId)
-        ? prev.filter((id) => id !== libraryId)
-        : [...prev, libraryId],
-    )
-  }
-
-  const togglePartner = (partnerId: string) => {
-    setSelectedPartners((prev) =>
-      prev.includes(partnerId)
-        ? prev.filter((id) => id !== partnerId)
-        : [...prev, partnerId],
-    )
-  }
-
-  const isValid = title.trim() && content.trim() && user
-
-  // Repeated class patterns
-  const cardClass =
-    'bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden'
-  const cardHeaderClass =
-    'px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50'
-  const labelClass =
-    'block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2'
-  const chipBase = 'px-3 py-1.5 rounded-full text-sm font-medium transition-all'
-  const chipUnselected =
-    'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
-
-  return (
-    <div className="min-h-full">
-      {/* Sticky Header */}
-      <div className="sticky top-0 z-10 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 -mx-8 px-8 py-4 mb-6">
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
-              {isNew ? 'Create Announcement' : 'Edit Entry'}
-            </h1>
-            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-              {isNew
-                ? 'Create a new announcement for the feed'
-                : `Editing: ${entry?.title}`}
-            </p>
-          </div>
-          <div className="flex items-center gap-3">
-            <Button variant="secondary" onClick={onCancel}>
-              <X className="w-4 h-4" />
-              Cancel
-            </Button>
-            <Button onClick={handleSave} disabled={saving || !isValid}>
-              <Save className="w-4 h-4" />
-              {saving ? 'Saving...' : 'Save Entry'}
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
-        {/* Left Column - Form */}
-        <div className="space-y-6">
-          {/* Basic Information Card */}
-          <div className={cardClass}>
-            <div className={cardHeaderClass}>
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
-                  <FileText className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-                </div>
-                <div>
-                  <h2 className="font-semibold text-gray-900 dark:text-white">
-                    Basic Information
-                  </h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    Title, content, and publication details
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className="p-6 space-y-5">
-              {/* Title */}
-              <div>
-                <label htmlFor="title" className={labelClass}>
-                  Title <span className="text-red-500">*</span>
-                </label>
-                <FormInput
-                  type="text"
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                  placeholder="Enter a descriptive title"
-                />
-              </div>
-
-              {/* Content */}
-              <div>
-                <label htmlFor="content" className={labelClass}>
-                  Content <span className="text-red-500">*</span>
-                  <span className="ml-2 text-xs font-normal text-gray-400">
-                    (Markdown supported)
-                  </span>
-                </label>
-                <textarea
-                  value={content}
-                  onChange={(e) => setContent(e.target.value)}
-                  rows={12}
-                  className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
-                  placeholder="Write your announcement content here..."
-                />
-              </div>
-
-              {/* Excerpt */}
-              <div>
-                <label htmlFor="excerpt" className={labelClass}>
-                  Excerpt
-                  <span className="ml-2 text-xs font-normal text-gray-400">
-                    (Optional - auto-generated if empty)
-                  </span>
-                </label>
-                <textarea
-                  value={excerpt}
-                  onChange={(e) => setExcerpt(e.target.value)}
-                  rows={2}
-                  className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
-                  placeholder="Brief summary for feed previews"
-                />
-              </div>
-
-              {/* Published Date */}
-              <div>
-                <label htmlFor="publishedAt" className={labelClass}>
-                  <Calendar className="inline mr-2 w-4 h-4 text-gray-400" />
-                  Published Date <span className="text-red-500">*</span>
-                </label>
-                <FormInput
-                  type="date"
-                  value={publishedAt}
-                  onChange={(e) => setPublishedAt(e.target.value)}
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* Categorization Card */}
-          <div className={cardClass}>
-            <div className={cardHeaderClass}>
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                  <Tags className="w-4 h-4 text-purple-600 dark:text-purple-400" />
-                </div>
-                <div>
-                  <h2 className="font-semibold text-gray-900 dark:text-white">
-                    Categorization
-                  </h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    Category, libraries, and tags
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className="p-6 space-y-5">
-              {/* Libraries */}
-              <div>
-                <label className={labelClass}>
-                  Related Libraries
-                  {selectedLibraries.length > 0 && (
-                    <span className="ml-2 text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-2 py-0.5 rounded-full">
-                      {selectedLibraries.length} selected
-                    </span>
-                  )}
-                </label>
-                <div className="flex flex-wrap gap-2">
-                  {libraries.map((library) => (
-                    <button
-                      key={library.id}
-                      type="button"
-                      onClick={() => toggleLibrary(library.id)}
-                      className={`${chipBase} ${
-                        selectedLibraries.includes(library.id)
-                          ? 'bg-blue-600 text-white'
-                          : chipUnselected
-                      }`}
-                    >
-                      {selectedLibraries.includes(library.id) && (
-                        <Check className="inline mr-1.5 w-3 h-3" />
-                      )}
-                      {library.name}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              {/* Partners */}
-              <div>
-                <label className={labelClass}>
-                  Related Partners
-                  {selectedPartners.length > 0 && (
-                    <span className="ml-2 text-xs bg-pink-100 dark:bg-pink-900/30 text-pink-600 dark:text-pink-400 px-2 py-0.5 rounded-full">
-                      {selectedPartners.length} selected
-                    </span>
-                  )}
-                </label>
-                <div className="flex flex-wrap gap-2">
-                  {partners
-                    .filter((p) => p.status === 'active')
-                    .map((partner) => (
-                      <button
-                        key={partner.id}
-                        type="button"
-                        onClick={() => togglePartner(partner.id)}
-                        className={`${chipBase} ${
-                          selectedPartners.includes(partner.id)
-                            ? 'bg-pink-600 text-white'
-                            : chipUnselected
-                        }`}
-                      >
-                        {selectedPartners.includes(partner.id) && (
-                          <Check className="inline mr-1.5 w-3 h-3" />
-                        )}
-                        {partner.name}
-                      </button>
-                    ))}
-                </div>
-              </div>
-
-              {/* Tags */}
-              <div>
-                <label htmlFor="tags" className={labelClass}>
-                  Tags
-                  <span className="ml-2 text-xs font-normal text-gray-400">
-                    (comma-separated)
-                  </span>
-                </label>
-                <FormInput
-                  type="text"
-                  value={tags}
-                  onChange={(e) => setTags(e.target.value)}
-                  placeholder="e.g., release:major, breaking-change"
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* Display Options Card */}
-          <div className={cardClass}>
-            <div className={cardHeaderClass}>
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
-                  <Settings className="w-4 h-4 text-green-600 dark:text-green-400" />
-                </div>
-                <div>
-                  <h2 className="font-semibold text-gray-900 dark:text-white">
-                    Display Options
-                  </h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    Visibility and featuring settings
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className="p-6">
-              <div className="space-y-4">
-                {[
-                  {
-                    id: 'showInFeed',
-                    label: 'Show in Feed',
-                    description: 'Display this entry in the public feed',
-                    checked: showInFeed,
-                    onChange: setShowInFeed,
-                    activeColor: 'bg-green-500',
-                  },
-                  {
-                    id: 'featured',
-                    label: 'Featured',
-                    description: 'Highlight this entry in the feed',
-                    checked: featured,
-                    onChange: setFeatured,
-                    activeColor: 'bg-yellow-500',
-                  },
-                ].map(
-                  ({
-                    id,
-                    label,
-                    description,
-                    checked,
-                    onChange,
-                    activeColor,
-                  }) => (
-                    <div
-                      key={id}
-                      className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      <label htmlFor={id}>
-                        <div className="font-medium text-gray-900 dark:text-white">
-                          {label}
-                        </div>
-                        <div className="text-sm text-gray-500 dark:text-gray-400">
-                          {description}
-                        </div>
-                      </label>
-                      <div className="relative">
-                        <input
-                          type="checkbox"
-                          checked={checked}
-                          onChange={(e) => onChange(e.target.checked)}
-                          className="sr-only"
-                        />
-                        <div
-                          className={`w-11 h-6 rounded-full transition-colors ${checked ? activeColor : 'bg-gray-300 dark:bg-gray-600'}`}
-                        >
-                          <div
-                            className={`w-5 h-5 bg-white rounded-full shadow transform transition-transform mt-0.5 ${checked ? 'translate-x-5.5 ml-0.5' : 'translate-x-0.5'}`}
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  ),
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Right Column - Live Preview */}
-        <div className="xl:sticky xl:top-24 xl:self-start">
-          <div className={cardClass}>
-            <div className={cardHeaderClass}>
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
-                  <Eye className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
-                </div>
-                <div>
-                  <h2 className="font-semibold text-gray-900 dark:text-white">
-                    Live Preview
-                  </h2>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">
-                    How it will appear in the feed
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className="p-6">
-              {title || content ? (
-                <div className="prose dark:prose-invert prose-sm max-w-none">
-                  <h2 className="text-xl font-bold mt-0 mb-4">
-                    {title || 'Untitled'}
-                  </h2>
-                  {excerpt && (
-                    <p className="text-gray-600 dark:text-gray-400 italic border-l-4 border-gray-200 dark:border-gray-700 pl-4 mb-4">
-                      {excerpt}
-                    </p>
-                  )}
-                  <Markdown rawContent={content || '*No content yet*'} />
-                </div>
-              ) : (
-                <div className="text-center py-12 text-gray-400 dark:text-gray-500">
-                  <FileText className="w-10 h-10 mx-auto mb-3 opacity-50" />
-                  <p>Start typing to see a preview</p>
-                </div>
-              )}
-            </div>
-
-            {/* Preview Metadata */}
-            {(selectedLibraries.length > 0 ||
-              selectedPartners.length > 0 ||
-              tags) && (
-              <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
-                <div className="flex flex-wrap gap-2">
-                  {selectedLibraries.map((id) => {
-                    const lib = libraries.find((l) => l.id === id)
-                    return lib ? (
-                      <span
-                        key={id}
-                        className="px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"
-                      >
-                        {lib.name}
-                      </span>
-                    ) : null
-                  })}
-                  {selectedPartners.map((id) => {
-                    const partner = partners.find((p) => p.id === id)
-                    return partner ? (
-                      <span
-                        key={id}
-                        className="px-2 py-1 text-xs bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-300 rounded-full"
-                      >
-                        {partner.name}
-                      </span>
-                    ) : null
-                  })}
-                  {tags
-                    .split(',')
-                    .map((t) => t.trim())
-                    .filter(Boolean)
-                    .map((tag) => (
-                      <span
-                        key={tag}
-                        className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-full"
-                      >
-                        {tag}
-                      </span>
-                    ))}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/admin/FeedSyncStatus.tsx b/src/components/admin/FeedSyncStatus.tsx
deleted file mode 100644
index 6d13f3841..000000000
--- a/src/components/admin/FeedSyncStatus.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import * as React from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { getFeedStatsQueryOptions } from '~/queries/feed'
-import {
-  syncAllFeedSources,
-  syncGitHubSource,
-  syncBlogSource,
-} from '~/utils/admin'
-import { Spinner } from '~/components/Spinner'
-import { RefreshCw } from 'lucide-react'
-import { Button } from '~/ui'
-
-export function FeedSyncStatus({
-  onSyncComplete,
-}: {
-  onSyncComplete?: () => void
-} = {}) {
-  const statsQuery = useQuery(getFeedStatsQueryOptions())
-  const [syncingAll, setSyncingAll] = React.useState(false)
-  const [syncingSources, setSyncingSources] = React.useState<
-    Record<string, boolean>
-  >({})
-
-  const handleSyncAll = async () => {
-    setSyncingAll(true)
-    try {
-      await syncAllFeedSources()
-      statsQuery.refetch()
-      onSyncComplete?.()
-    } catch (error) {
-      console.error('Error syncing all sources:', error)
-      alert('Failed to sync all sources. Please check console for details.')
-    } finally {
-      setSyncingAll(false)
-    }
-  }
-
-  const handleSyncSource = async (source: string) => {
-    setSyncingSources((prev) => ({ ...prev, [source]: true }))
-    try {
-      if (source === 'github') {
-        await syncGitHubSource()
-      } else if (source === 'blog') {
-        await syncBlogSource()
-      }
-      statsQuery.refetch()
-      onSyncComplete?.()
-    } catch (error) {
-      console.error(`Error syncing ${source}:`, error)
-      alert(`Failed to sync ${source}. Please check console for details.`)
-    } finally {
-      setSyncingSources((prev) => ({ ...prev, [source]: false }))
-    }
-  }
-
-  if (statsQuery.isLoading) {
-    return <div>Loading stats...</div>
-  }
-
-  const stats = statsQuery.data
-
-  return (
-    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
-      <div className="flex items-center justify-between mb-2">
-        <h2 className="text-sm font-semibold">Sync Status</h2>
-        <div className="flex items-center gap-2">
-          <Button
-            size="xs"
-            onClick={handleSyncAll}
-            disabled={syncingAll || Object.values(syncingSources).some(Boolean)}
-          >
-            {syncingAll ? (
-              <Spinner className="text-xs" />
-            ) : (
-              <RefreshCw className="w-3 h-3" />
-            )}
-            Sync All
-          </Button>
-        </div>
-      </div>
-
-      {stats && (
-        <>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-3">
-            <div className="text-center">
-              <div className="text-base font-bold">{stats.total}</div>
-              <div className="text-xs text-gray-600 dark:text-gray-400">
-                Total
-              </div>
-            </div>
-            <div className="text-center">
-              <div className="text-base font-bold">{stats.visible}</div>
-              <div className="text-xs text-gray-600 dark:text-gray-400">
-                Visible
-              </div>
-            </div>
-            <div className="text-center">
-              <div className="text-base font-bold">{stats.featured}</div>
-              <div className="text-xs text-gray-600 dark:text-gray-400">
-                Featured
-              </div>
-            </div>
-            <div className="text-center">
-              <div className="text-base font-bold">
-                {Object.keys(stats.byEntryType).length}
-              </div>
-              <div className="text-xs text-gray-600 dark:text-gray-400">
-                Entry Types
-              </div>
-            </div>
-          </div>
-
-          {/* Sync Sources */}
-          <div className="mb-3">
-            <h3 className="text-xs font-medium mb-1.5 text-gray-600 dark:text-gray-400">
-              Sync Sources
-            </h3>
-            <div className="space-y-1">
-              {(['github', 'blog'] as const).map((source) => {
-                const isSyncing = syncingSources[source] || false
-                return (
-                  <div
-                    key={source}
-                    className="flex items-center justify-between px-2 py-1 bg-gray-50 dark:bg-gray-700 rounded text-xs"
-                  >
-                    <span className="capitalize">{source}</span>
-                    <div className="flex items-center gap-2">
-                      <button
-                        onClick={() => handleSyncSource(source)}
-                        disabled={
-                          syncingAll ||
-                          isSyncing ||
-                          Object.values(syncingSources).some(Boolean)
-                        }
-                        className="p-0.5 text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                        title={`Sync ${source}`}
-                      >
-                        {isSyncing ? (
-                          <Spinner className="text-xs" />
-                        ) : (
-                          <RefreshCw className="w-2.5 h-2.5" />
-                        )}
-                      </button>
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-
-          {/* By Entry Type Breakdown */}
-          <div>
-            <h3 className="text-xs font-medium mb-1.5 text-gray-600 dark:text-gray-400">
-              By Entry Type
-            </h3>
-            <div className="space-y-1">
-              {Object.entries(stats.byEntryType).map(([entryType, count]) => (
-                <div
-                  key={entryType}
-                  className="flex items-center justify-between px-2 py-1 bg-gray-50 dark:bg-gray-700 rounded text-xs"
-                >
-                  <span className="capitalize">{entryType}</span>
-                  <span className="font-semibold">{count}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/application-builder/parts.tsx b/src/components/application-builder/parts.tsx
new file mode 100644
index 000000000..6dba557b2
--- /dev/null
+++ b/src/components/application-builder/parts.tsx
@@ -0,0 +1,620 @@
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { Check, Copy, Sparkles, X } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import {
+  getApplicationStarterConflictingPartnerIds,
+  type ApplicationStarterPartnerSuggestion,
+  PartnerImage,
+} from '~/utils/partners'
+import { Button } from '~/ui'
+import {
+  colorWithAlpha,
+  isPinnedStarterLibrary,
+  type StarterTryLibrary,
+  starterTryLibraries,
+  type StarterPalette,
+  type StarterPartnerButtonStyle,
+} from './shared'
+import type { LibraryId } from '~/libraries'
+
+export function StarterChipButton({
+  className,
+  children,
+  compact = false,
+  disabled = false,
+  onClick,
+  palette,
+  selected,
+  size = 'default',
+}: {
+  className?: string
+  children: React.ReactNode
+  compact?: boolean
+  disabled?: boolean
+  onClick?: () => void
+  palette: StarterPalette
+  selected: boolean
+  size?: 'compact' | 'default'
+}) {
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      disabled={disabled}
+      onClick={onClick}
+      className={twMerge(
+        compact
+          ? 'rounded-lg border-2 px-2.5 py-1.5 text-[12px] font-medium transition-all duration-200'
+          : size === 'compact'
+            ? 'rounded-lg border-2 px-2.5 py-1.5 text-[12px] font-medium transition-all duration-200'
+            : 'rounded-lg border-2 px-3 py-1.5 text-[13px] font-medium transition-all duration-200',
+        selected
+          ? twMerge(
+              palette.chipSelected,
+              'translate-y-[-1px] opacity-100 shadow-[0_4px_12px_rgba(15,23,42,0.08)]',
+            )
+          : palette.chip,
+        disabled && 'cursor-default opacity-70',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+export function StarterTooltipProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <TooltipPrimitive.Provider delayDuration={1000} skipDelayDuration={500}>
+      {children}
+    </TooltipPrimitive.Provider>
+  )
+}
+
+export function StarterLibraryRows({
+  compact = false,
+  selectedLibraries,
+  toggleLibrary,
+}: {
+  compact?: boolean
+  selectedLibraries: Array<LibraryId>
+  toggleLibrary: (libraryId: LibraryId) => void
+}) {
+  const libraries = [
+    ...starterTryLibraries.filter((library) => !library.locked),
+    ...starterTryLibraries.filter((library) => library.locked),
+  ]
+
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {libraries.map((library) => (
+        <StarterHoverTooltip
+          key={library.id}
+          content={<StarterLibraryTooltip library={library} />}
+        >
+          <StarterLibraryChipButton
+            compact={compact}
+            library={library}
+            onClick={() => {
+              if (!isPinnedStarterLibrary(library.id)) {
+                toggleLibrary(library.id)
+              }
+            }}
+            selected={library.locked || selectedLibraries.includes(library.id)}
+          />
+        </StarterHoverTooltip>
+      ))}
+    </div>
+  )
+}
+
+const StarterLibraryChipButton = React.forwardRef<
+  HTMLButtonElement,
+  {
+    compact?: boolean
+    library: StarterTryLibrary
+    selected: boolean
+  } & React.ComponentPropsWithoutRef<'button'>
+>(function StarterLibraryChipButton(
+  { compact = false, library, selected, ...buttonProps },
+  ref,
+) {
+  const baseClass = compact
+    ? 'inline-flex items-center rounded-md border-2 px-2 py-1 text-[10px] leading-none transition-all duration-200'
+    : 'inline-flex items-center rounded-md border-2 px-2.5 py-1 text-[11px] leading-none transition-all duration-200'
+  const selectedClass =
+    'translate-y-[-1px] border-current bg-white shadow-[0_4px_12px_rgba(15,23,42,0.08)] dark:bg-gray-950'
+  const stateClass =
+    library.locked || selected
+      ? selectedClass
+      : 'border-gray-200 hover:border-current/45 dark:border-gray-800'
+
+  return (
+    <button
+      {...buttonProps}
+      ref={ref}
+      type="button"
+      aria-disabled={library.locked || undefined}
+      aria-pressed={selected}
+      aria-label={`TanStack ${library.label}`}
+      className={twMerge(
+        baseClass,
+        library.textStyle,
+        stateClass,
+        buttonProps.className,
+      )}
+    >
+      <span className="inline-flex items-center gap-1 leading-none font-black uppercase tracking-[-0.03em]">
+        {library.locked ? (
+          <StarterLockedGlyph className="h-2.5 w-2.5 shrink-0 opacity-80" />
+        ) : null}
+        {library.label}
+      </span>
+    </button>
+  )
+})
+
+function StarterLockedGlyph({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true"
+      className={className}
+    >
+      <path d="M5.5 6V4.75a2.5 2.5 0 1 1 5 0V6h.75A1.75 1.75 0 0 1 13 7.75v4.5A1.75 1.75 0 0 1 11.25 14h-6.5A1.75 1.75 0 0 1 3 12.25v-4.5A1.75 1.75 0 0 1 4.75 6h.75Zm1.25 0h2.5V4.75a1.25 1.25 0 1 0-2.5 0V6Z" />
+    </svg>
+  )
+}
+
+function StarterLibraryTooltip({ library }: { library: StarterTryLibrary }) {
+  return (
+    <div className="w-[min(22rem,calc(100vw-1rem))] rounded-xl border border-gray-200 bg-white/95 px-3.5 py-3 text-left shadow-lg shadow-gray-950/10 dark:border-gray-800 dark:bg-gray-950/95">
+      <div className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-[0.18em] text-gray-400 dark:text-gray-500">
+        <Sparkles className="h-3.5 w-3.5" />
+        TanStack {library.label}
+      </div>
+      <div className="mt-2 flex flex-wrap gap-1.5">
+        <span className="rounded-full border border-gray-200 bg-gray-50 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">
+          {library.locked ? 'Included' : 'Optional'}
+        </span>
+      </div>
+      <div className="mt-2 text-sm leading-5 text-gray-600 dark:text-gray-300">
+        {library.description ?? library.tagline}
+      </div>
+    </div>
+  )
+}
+
+const StarterPartnerButton = React.forwardRef<
+  HTMLButtonElement,
+  {
+    compact?: boolean
+    palette: StarterPalette
+    partner: ApplicationStarterPartnerSuggestion
+    muted: boolean
+    selected: boolean
+    size?: 'compact' | 'default'
+  } & React.ComponentPropsWithoutRef<'button'>
+>(function StarterPartnerButton(
+  {
+    compact = false,
+    muted,
+    palette,
+    partner,
+    selected,
+    size = 'default',
+    ...buttonProps
+  },
+  ref,
+) {
+  const accent = partner.brandColor ?? '#64748B'
+  const accessibleLabel = partner.label
+  const partnerTag = partner.tags[0]
+  const isTierOne = partner.tier === 1
+  const isTierTwo = partner.tier === 2
+  const isTierThree = partner.tier === 3
+  const showsLogoOnly = isTierOne || isTierTwo
+  const usesPaletteSurface = isTierTwo
+  const buttonSizeClass = showsLogoOnly
+    ? compact
+      ? 'rounded-xl text-[13px] font-semibold'
+      : 'rounded-xl text-sm font-semibold'
+    : compact || size === 'compact'
+      ? 'rounded-lg px-2.5 py-1.5 text-[12px] font-medium'
+      : 'rounded-lg px-3 py-1.5 text-[13px] font-medium'
+  const logoFrameClass = isTierOne
+    ? 'h-17 min-w-18'
+    : compact
+      ? 'h-11 min-w-16'
+      : 'h-12 min-w-18'
+  const logoWidthClass = isTierOne
+    ? 'w-36'
+    : compact || size === 'compact'
+      ? 'w-20'
+      : 'w-22'
+  const logoStackAlignmentClass = isTierTwo ? 'items-center' : 'items-start'
+  const logoTagClass = isTierTwo ? 'text-center self-center' : ''
+  const tierOneTone = isTierOne
+    ? selected
+      ? 'translate-y-[-1px] border-transparent'
+      : 'border-gray-200 bg-white hover:border-[var(--starter-partner-hover-border-color)] active:border-[var(--starter-partner-active-border-color)] dark:border-gray-800 dark:bg-gray-950 dark:hover:border-[var(--starter-partner-hover-border-color)] dark:active:border-[var(--starter-partner-active-border-color)]'
+    : null
+  const tierThreeTone = isTierThree
+    ? selected
+      ? 'translate-y-[-1px] border-current bg-white shadow-[0_4px_12px_rgba(15,23,42,0.08)] dark:bg-gray-950'
+      : 'border-gray-200 bg-white text-gray-700 hover:border-[var(--starter-partner-hover-border-color)] hover:text-current active:border-[var(--starter-partner-active-border-color)] dark:border-gray-800 dark:bg-gray-950 dark:text-gray-200 dark:hover:border-[var(--starter-partner-hover-border-color)] dark:active:border-[var(--starter-partner-active-border-color)]'
+    : null
+  const hoverBorderColor = colorWithAlpha(accent, 0.5) ?? accent
+  const style: StarterPartnerButtonStyle = {
+    '--starter-partner-active-border-color': accent,
+    '--starter-partner-border-hover': usesPaletteSurface
+      ? hoverBorderColor
+      : undefined,
+    '--starter-partner-hover-border-color': hoverBorderColor,
+    backgroundColor: undefined,
+    borderColor:
+      isTierOne && selected
+        ? accent
+        : selected && usesPaletteSurface
+          ? accent
+          : undefined,
+    color: isTierThree && selected ? accent : undefined,
+    boxShadow: selected
+      ? usesPaletteSurface
+        ? undefined
+        : `0 6px 16px ${colorWithAlpha(accent, 0.12)}`
+      : usesPaletteSurface
+        ? undefined
+        : `0 1px 2px ${colorWithAlpha(accent, 0.08)}`,
+  }
+
+  return (
+    <button
+      {...buttonProps}
+      ref={ref}
+      type="button"
+      aria-pressed={selected}
+      aria-label={
+        muted
+          ? `${accessibleLabel}, inactive while another exclusive partner is selected`
+          : accessibleLabel
+      }
+      className={twMerge(
+        'inline-flex items-center text-gray-800 transition-all duration-200 dark:text-gray-100',
+        'border-2',
+        buttonSizeClass,
+        selected && 'translate-y-[-1px]',
+        showsLogoOnly ? 'justify-start text-left' : 'gap-2 text-left',
+        tierOneTone,
+        usesPaletteSurface && palette.chip,
+        usesPaletteSurface &&
+          'hover:border-[var(--starter-partner-border-hover)] active:border-[var(--starter-partner-active-border-color)]',
+        tierThreeTone,
+        muted &&
+          'border-transparent opacity-60 saturate-50 grayscale hover:border-transparent hover:text-gray-700 active:border-transparent dark:border-transparent dark:hover:border-transparent dark:hover:text-gray-200 dark:active:border-transparent',
+        buttonProps.className,
+      )}
+      style={style}
+    >
+      {showsLogoOnly ? (
+        <span
+          className={twMerge(
+            'flex h-full flex-col px-3 py-1.5',
+            logoStackAlignmentClass,
+            logoFrameClass,
+          )}
+        >
+          <span
+            className={twMerge(
+              'flex flex-1 items-center justify-start',
+              logoWidthClass,
+            )}
+          >
+            <PartnerImage
+              className="block w-full max-h-7 object-contain"
+              config={partner.image}
+              alt=""
+            />
+          </span>
+          {partnerTag ? (
+            <span
+              className={twMerge(
+                'mt-auto text-[9px] font-medium tracking-[0.02em] text-gray-400 dark:text-gray-500',
+                logoTagClass,
+              )}
+            >
+              {partnerTag}
+            </span>
+          ) : null}
+          <span className="sr-only">{accessibleLabel}</span>
+        </span>
+      ) : (
+        <span className="flex flex-col items-start gap-px">
+          <span>{partner.label}</span>
+          {partnerTag ? (
+            <span className="text-[9px] font-medium tracking-[0.02em] text-gray-400 dark:text-gray-500">
+              {partnerTag}
+            </span>
+          ) : null}
+        </span>
+      )}
+    </button>
+  )
+})
+
+export function StarterPartnerRows({
+  compact = false,
+  palette,
+  partnerSuggestions,
+  selectedPartners,
+  size = 'default',
+  togglePartner,
+}: {
+  compact?: boolean
+  palette: StarterPalette
+  partnerSuggestions: Array<ApplicationStarterPartnerSuggestion>
+  selectedPartners: Array<string>
+  size?: 'compact' | 'default'
+  togglePartner: (
+    partner: ApplicationStarterPartnerSuggestion,
+    selected: boolean,
+  ) => void
+}) {
+  const mutedPartnerIds = React.useMemo(() => {
+    const partnerIds = new Set<string>()
+
+    for (const selectedPartnerId of selectedPartners) {
+      const selectedPartner = partnerSuggestions.find(
+        (partner) => partner.id === selectedPartnerId,
+      )
+
+      if (!selectedPartner) {
+        continue
+      }
+
+      for (const partnerId of getApplicationStarterConflictingPartnerIds(
+        selectedPartner,
+        partnerSuggestions,
+      )) {
+        partnerIds.add(partnerId)
+      }
+    }
+
+    for (const selectedPartnerId of selectedPartners) {
+      partnerIds.delete(selectedPartnerId)
+    }
+
+    return partnerIds
+  }, [partnerSuggestions, selectedPartners])
+  const rows = ([1, 2, 3] as const)
+    .map((tier) => ({
+      tier,
+      partners: partnerSuggestions.filter((partner) => partner.tier === tier),
+    }))
+    .filter((row) => row.partners.length > 0)
+
+  return (
+    <div className="space-y-4.5">
+      {rows.map((row) => (
+        <div key={row.tier} className="flex flex-wrap gap-1.5">
+          {row.partners.map((partner) => {
+            const selected = selectedPartners.includes(partner.id)
+            const muted = mutedPartnerIds.has(partner.id)
+
+            return (
+              <StarterHoverTooltip
+                key={partner.id}
+                content={<StarterPartnerTooltip partner={partner} />}
+              >
+                <StarterPartnerButton
+                  compact={compact}
+                  onClick={() => togglePartner(partner, selected)}
+                  muted={muted}
+                  palette={palette}
+                  partner={partner}
+                  selected={selected}
+                  size={size}
+                />
+              </StarterHoverTooltip>
+            )
+          })}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function StarterPartnerTooltip({
+  partner,
+}: {
+  partner: ApplicationStarterPartnerSuggestion
+}) {
+  return (
+    <div className="w-[min(22rem,calc(100vw-1rem))] rounded-xl border border-gray-200 bg-white/95 px-3.5 py-3 text-left shadow-lg shadow-gray-950/10 dark:border-gray-800 dark:bg-gray-950/95">
+      <div className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-[0.18em] text-gray-400 dark:text-gray-500">
+        <Sparkles className="h-3.5 w-3.5" />
+        {partner.label}
+      </div>
+      {partner.tags.length > 0 ? (
+        <div className="mt-2 flex flex-wrap gap-1.5">
+          {partner.tags.map((tag) => (
+            <span
+              key={tag}
+              className="rounded-full border border-gray-200 bg-gray-50 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      ) : null}
+      <div className="mt-2 text-sm leading-5 text-gray-600 dark:text-gray-300">
+        {partner.description}
+      </div>
+    </div>
+  )
+}
+
+function StarterHoverTooltip({
+  children,
+  content,
+}: {
+  children: React.ReactElement
+  content: React.ReactNode
+}) {
+  return (
+    <TooltipPrimitive.Root>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+          side="bottom"
+          align="center"
+          sideOffset={8}
+          className="z-[500] transition-opacity duration-150 data-[state=closed]:opacity-0 data-[state=delayed-open]:opacity-100"
+        >
+          {content}
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  )
+}
+
+export function GeneratedPromptPreviewHeader({
+  copiedPrompt = false,
+  copyNotice,
+  onDismissCopyNotice,
+  onCopyPrompt,
+  title = 'Prompt Preview',
+}: {
+  copiedPrompt?: boolean
+  copyNotice?: boolean
+  onDismissCopyNotice?: () => void
+  onCopyPrompt?: () => void
+  title?: string
+}) {
+  return (
+    <div className="border-b border-gray-200 bg-gray-50/70 px-4 py-3 dark:border-gray-800 dark:bg-gray-900/70">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-gray-400 dark:text-gray-500">
+            {title}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {onCopyPrompt ? (
+            <Button
+              variant="secondary"
+              size="sm"
+              type="button"
+              onClick={onCopyPrompt}
+            >
+              {copiedPrompt ? (
+                <>
+                  <Check className="h-4 w-4" />
+                  Copied
+                </>
+              ) : (
+                <>
+                  <Copy className="h-4 w-4" />
+                  Copy Prompt
+                </>
+              )}
+            </Button>
+          ) : null}
+        </div>
+      </div>
+
+      {copyNotice ? (
+        <div className="mt-3 flex items-start justify-between gap-3 rounded-lg border border-emerald-200 bg-emerald-50/80 px-3 py-2.5 dark:border-emerald-900/70 dark:bg-emerald-950/30">
+          <div>
+            <div className="text-sm font-medium text-emerald-900 dark:text-emerald-200">
+              Prompt copied to clipboard
+            </div>
+            <div className="mt-1 text-[11px] leading-5 text-emerald-800/80 dark:text-emerald-300/80">
+              Paste it into your favorite AI or coding agent.
+            </div>
+          </div>
+          {onDismissCopyNotice ? (
+            <button
+              type="button"
+              onClick={onDismissCopyNotice}
+              className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-emerald-200/80 text-emerald-800 transition-colors hover:bg-emerald-100 dark:border-emerald-800 dark:text-emerald-300 dark:hover:bg-emerald-900/50"
+              aria-label="Dismiss copied prompt notice"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export function GeneratedPromptPreviewBody({ prompt }: { prompt: string }) {
+  return (
+    <div className="px-4 py-4">
+      <pre
+        className="min-w-0 max-w-full max-h-40 overflow-y-auto !overflow-x-hidden whitespace-pre-wrap break-words !text-gray-700 dark:!text-gray-200 text-xs leading-6"
+        style={{ color: 'inherit' }}
+      >
+        <code
+          className="block min-w-0 max-w-full !whitespace-pre-wrap break-words font-sans !text-inherit [word-break:normal]"
+          style={{ color: 'inherit' }}
+        >
+          {prompt}
+        </code>
+      </pre>
+    </div>
+  )
+}
+
+export function GeneratedPromptPreviewFooter({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="border-t border-gray-200 bg-gray-50/70 px-4 py-3 dark:border-gray-800 dark:bg-gray-900/70">
+      {children}
+    </div>
+  )
+}
+
+export function GeneratedPromptPreviewCard({
+  copiedPrompt = false,
+  copyNotice,
+  footer,
+  onDismissCopyNotice,
+  onCopyPrompt,
+  prompt,
+  title = 'Prompt Preview',
+}: {
+  copiedPrompt?: boolean
+  copyNotice?: boolean
+  footer?: React.ReactNode
+  onDismissCopyNotice?: () => void
+  onCopyPrompt?: () => void
+  prompt: string
+  title?: string
+}) {
+  return (
+    <div className="overflow-hidden rounded-[1rem] border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-950">
+      <GeneratedPromptPreviewHeader
+        copiedPrompt={copiedPrompt}
+        copyNotice={copyNotice}
+        onDismissCopyNotice={onDismissCopyNotice}
+        onCopyPrompt={onCopyPrompt}
+        title={title}
+      />
+      <GeneratedPromptPreviewBody prompt={prompt} />
+      {footer ? (
+        <GeneratedPromptPreviewFooter>{footer}</GeneratedPromptPreviewFooter>
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/components/application-builder/shared.ts b/src/components/application-builder/shared.ts
new file mode 100644
index 000000000..7081d9748
--- /dev/null
+++ b/src/components/application-builder/shared.ts
@@ -0,0 +1,397 @@
+import type { CSSProperties } from 'react'
+import { libraries, type LibraryId } from '~/libraries'
+import { composeApplicationStarterInput } from '~/utils/partners'
+import {
+  type ApplicationStarterAnalysis,
+  sanitizeStarterPrompt,
+  type ApplicationStarterRequest,
+  type ApplicationStarterResult,
+} from '~/utils/application-starter'
+
+export type StarterTone = 'cyan' | 'emerald' | 'violet'
+export type StarterDeployProvider = 'cloudflare' | 'netlify' | 'railway'
+export type StarterPromptDeployProvider = 'lovable' | 'netlify'
+export type StarterPackageManager = 'bun' | 'npm' | 'pnpm' | 'yarn'
+export type StarterToolchain = 'biome' | 'eslint'
+
+export interface StarterPalette {
+  button: 'cyan' | 'emerald' | 'purple'
+  chip: string
+  chipSelected: string
+  ring: string
+}
+
+export interface ApplicationStarterBuilderIntegration {
+  applyResult: (
+    result: ApplicationStarterResult,
+    options?: { silent?: boolean },
+  ) => Promise<boolean>
+  downloadResult?: (result: ApplicationStarterResult) => Promise<void>
+}
+
+export interface ApplicationStarterAnonymousQuota {
+  limit: number
+  remaining: number
+  resetAt: string
+}
+
+export interface ApplicationStarterStatusResponse {
+  anonymousGenerationQuota: ApplicationStarterAnonymousQuota | null
+  authenticated: boolean
+}
+
+export interface StarterTryLibrary {
+  description?: string
+  id: LibraryId
+  label: string
+  locked: boolean
+  tagline: string
+  textStyle: string
+}
+
+export type StarterPartnerButtonStyle = CSSProperties & {
+  '--starter-partner-active-border-color'?: string
+  '--starter-partner-border-hover'?: string
+  '--starter-partner-hover-border-color'?: string
+}
+
+const nextJsMigrationPattern =
+  /migrat(?:e|ing|ion).*(next(?:\.js)?)|(next(?:\.js)?).*(migrat(?:e|ing|ion))/i
+const remixMigrationPattern =
+  /migrat(?:e|ing|ion).*(remix|react[\s-]?router)|(remix|react[\s-]?router).*(migrat(?:e|ing|ion))/i
+const migrationRepositoryUrlPattern = /^(https?:\/\/\S+|git@\S+|ssh:\/\/\S+)$/i
+
+export const STARTER_NEXTJS_MIGRATION_GUIDE_URL =
+  'https://tanstack.com/start/latest/docs/framework/react/migrate-from-next-js'
+export const STARTER_REMIX_MIGRATION_GUIDE_URL =
+  'https://tanstack.com/router/latest/docs/guide/how-to/migrate-from-react-router'
+
+export const starterPinnedLibraryIds = [
+  'start',
+  'router',
+  'intent',
+  'cli',
+] as const satisfies Array<LibraryId>
+
+export const starterAddonLibraryIds = [
+  'query',
+  'table',
+  'form',
+  'store',
+  'db',
+  'ai',
+  'hotkeys',
+  'pacer',
+  'virtual',
+] as const satisfies Array<LibraryId>
+
+const starterTryLibraryIds = [
+  ...starterPinnedLibraryIds,
+  ...starterAddonLibraryIds,
+] as const satisfies Array<LibraryId>
+
+export const starterTryLibraries = starterTryLibraryIds.flatMap((libraryId) => {
+  const library = libraries.find((candidate) => candidate.id === libraryId)
+
+  if (!library) {
+    return []
+  }
+
+  return [
+    {
+      description: library.description,
+      id: library.id,
+      label: library.name.replace(/^TanStack\s+/, ''),
+      locked: starterPinnedLibraryIds.some(
+        (pinnedLibraryId) => pinnedLibraryId === library.id,
+      ),
+      tagline: library.tagline,
+      textStyle: library.textStyle,
+    },
+  ]
+})
+
+export const toneClasses: Record<StarterTone, StarterPalette> = {
+  cyan: {
+    button: 'cyan',
+    chip: 'border-gray-200 bg-white text-gray-600 hover:border-cyan-200 hover:text-cyan-700 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300 dark:hover:border-cyan-900 dark:hover:text-cyan-200',
+    chipSelected:
+      'border-cyan-300 bg-cyan-50 text-cyan-700 dark:border-cyan-800 dark:bg-cyan-950/40 dark:text-cyan-200',
+    ring: 'focus:ring-cyan-500',
+  },
+  emerald: {
+    button: 'emerald',
+    chip: 'border-gray-200 bg-white text-gray-600 hover:border-emerald-200 hover:text-emerald-700 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300 dark:hover:border-emerald-900 dark:hover:text-emerald-200',
+    chipSelected:
+      'border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-200',
+    ring: 'focus:ring-emerald-500',
+  },
+  violet: {
+    button: 'purple',
+    chip: 'border-gray-200 bg-white text-gray-600 hover:border-violet-200 hover:text-violet-700 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300 dark:hover:border-violet-900 dark:hover:text-violet-200',
+    chipSelected:
+      'border-violet-300 bg-violet-50 text-violet-700 dark:border-violet-800 dark:bg-violet-950/40 dark:text-violet-200',
+    ring: 'focus:ring-violet-500',
+  },
+}
+
+export const starterLoadingPhrases = [
+  'Charting the route...',
+  'Smoothing the shoreline...',
+  'Scanning the horizon...',
+  'Catching a better breeze...',
+  'Hoisting a fresh draft...',
+  'Finding calmer waters...',
+]
+
+export function buildStarterPromptDeployUrl(
+  provider: StarterPromptDeployProvider,
+  prompt: string,
+) {
+  switch (provider) {
+    case 'lovable': {
+      const url = new URL('https://lovable.dev/')
+
+      url.searchParams.set('autosubmit', 'true')
+      url.searchParams.set('utm_source', 'tanstack')
+      url.hash = `prompt=${encodeURIComponent(prompt)}`
+
+      return url.toString()
+    }
+    case 'netlify': {
+      const url = new URL('https://app.netlify.com/start')
+
+      url.searchParams.set('prompt', prompt)
+      url.searchParams.set('utm_source', 'tanstack')
+
+      return url.toString()
+    }
+  }
+}
+
+export function isPinnedStarterLibrary(libraryId: LibraryId) {
+  return starterPinnedLibraryIds.some(
+    (pinnedLibraryId) => pinnedLibraryId === libraryId,
+  )
+}
+
+export function isNextJsMigrationInput(input: string) {
+  return nextJsMigrationPattern.test(input)
+}
+
+export function isRemixMigrationInput(input: string) {
+  return remixMigrationPattern.test(input)
+}
+
+export function getStarterMigrationGuideUrl(input: string) {
+  if (isNextJsMigrationInput(input)) {
+    return STARTER_NEXTJS_MIGRATION_GUIDE_URL
+  }
+
+  if (isRemixMigrationInput(input)) {
+    return STARTER_REMIX_MIGRATION_GUIDE_URL
+  }
+
+  return null
+}
+
+export function normalizeMigrationRepositoryUrl(value: string) {
+  return value.trim()
+}
+
+export function isValidMigrationRepositoryUrl(value: string) {
+  return migrationRepositoryUrlPattern.test(value)
+}
+
+export function composeStarterInput({
+  forceRouterOnly = false,
+  inferredPartners,
+  input,
+  migrationRepositoryUrl,
+  packageManager,
+  selectedLibraries,
+  selectedPartners,
+  toolchain,
+}: {
+  forceRouterOnly?: boolean
+  inferredPartners: Array<string>
+  input: string
+  migrationRepositoryUrl: string
+  packageManager?: StarterPackageManager
+  selectedLibraries: Array<LibraryId>
+  selectedPartners: Array<string>
+  toolchain?: StarterToolchain
+}) {
+  const composedInput = composeApplicationStarterInput(
+    input,
+    selectedPartners,
+    inferredPartners,
+    {
+      forceRouterOnly,
+    },
+  )
+  const normalizedRepositoryUrl = normalizeMigrationRepositoryUrl(
+    migrationRepositoryUrl,
+  )
+  const selectedTryLibraries = starterTryLibraries.filter((library) =>
+    selectedLibraries.includes(library.id),
+  )
+  const selectedAddonLibraries = selectedTryLibraries.filter(
+    (library) => !library.locked,
+  )
+  const libraryInstruction = selectedAddonLibraries.length
+    ? `Include and demonstrate these TanStack libraries in the project: ${selectedTryLibraries
+        .map((library) => `TanStack ${library.label}`)
+        .join(', ')}.`
+    : ''
+  const packageManagerInstruction = packageManager
+    ? `Use ${packageManager} for package management.`
+    : ''
+  const toolchainInstruction = toolchain
+    ? `Use ${toolchain} as the project toolchain.`
+    : ''
+
+  const baseInput = [
+    composedInput,
+    libraryInstruction,
+    packageManagerInstruction,
+    toolchainInstruction,
+  ]
+    .filter(Boolean)
+    .join('\n\n')
+
+  if (!isNextJsMigrationInput(input) || !normalizedRepositoryUrl) {
+    return baseInput
+  }
+
+  return [
+    baseInput,
+    '',
+    `Legacy repository URL: ${normalizedRepositoryUrl}`,
+    'After scaffolding the new app, clone the legacy project into ./legacy-source and migrate it incrementally into the fresh TanStack app.',
+  ]
+    .filter(Boolean)
+    .join('\n')
+}
+
+export function colorWithAlpha(color: string | undefined, alpha: number) {
+  if (!color?.startsWith('#')) {
+    return undefined
+  }
+
+  const normalized =
+    color.length === 4
+      ? color
+          .slice(1)
+          .split('')
+          .map((part) => `${part}${part}`)
+          .join('')
+      : color.slice(1)
+
+  if (normalized.length !== 6) {
+    return undefined
+  }
+
+  const red = Number.parseInt(normalized.slice(0, 2), 16)
+  const green = Number.parseInt(normalized.slice(2, 4), 16)
+  const blue = Number.parseInt(normalized.slice(4, 6), 16)
+
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`
+}
+
+export async function resolveApplicationStarter(
+  request: ApplicationStarterRequest,
+) {
+  const response = await fetch('/api/application-starter/resolve', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(request),
+  })
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => null)
+    throw new ApplicationStarterError(
+      error?.details || error?.error || 'Failed to resolve application starter',
+      {
+        code: error?.code,
+        loginRequired: error?.loginRequired,
+        retryAfter: error?.retryAfter,
+      },
+    )
+  }
+
+  const result = (await response.json()) as ApplicationStarterResult
+
+  return {
+    ...result,
+    prompt: sanitizeStarterPrompt(result.prompt),
+  }
+}
+
+export async function analyzeApplicationStarter(
+  request: ApplicationStarterRequest,
+) {
+  const response = await fetch('/api/application-starter/resolve', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      ...request,
+      mode: 'analyze',
+    }),
+  })
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => null)
+    throw new ApplicationStarterError(
+      error?.details || error?.error || 'Failed to analyze application starter',
+      {
+        code: error?.code,
+        loginRequired: error?.loginRequired,
+        retryAfter: error?.retryAfter,
+      },
+    )
+  }
+
+  return (await response.json()) as ApplicationStarterAnalysis
+}
+
+export function isApplicationStarterStatusResponse(
+  value: unknown,
+): value is ApplicationStarterStatusResponse {
+  if (typeof value !== 'object' || value === null) {
+    return false
+  }
+
+  const candidate = value as Record<string, unknown>
+  const quota = candidate.anonymousGenerationQuota
+  const quotaRecord =
+    typeof quota === 'object' && quota !== null
+      ? (quota as Record<string, unknown>)
+      : null
+
+  const hasValidQuota =
+    quota === null ||
+    (quotaRecord !== null &&
+      typeof quotaRecord.limit === 'number' &&
+      typeof quotaRecord.remaining === 'number' &&
+      typeof quotaRecord.resetAt === 'string')
+
+  return typeof candidate.authenticated === 'boolean' && hasValidQuota
+}
+
+export class ApplicationStarterError extends Error {
+  code?: string
+  loginRequired?: boolean
+  retryAfter?: number
+
+  constructor(
+    message: string,
+    options?: { code?: string; loginRequired?: boolean; retryAfter?: number },
+  ) {
+    super(message)
+    this.name = 'ApplicationStarterError'
+    this.code = options?.code
+    this.loginRequired = options?.loginRequired
+    this.retryAfter = options?.retryAfter
+  }
+}
diff --git a/src/components/application-builder/useApplicationBuilder.tsx b/src/components/application-builder/useApplicationBuilder.tsx
new file mode 100644
index 000000000..7c558c932
--- /dev/null
+++ b/src/components/application-builder/useApplicationBuilder.tsx
@@ -0,0 +1,1000 @@
+import * as React from 'react'
+import { useDebouncedValue } from '@tanstack/react-pacer'
+import { useToast } from '~/components/ToastProvider'
+import {
+  trackEvent,
+  defaultBuilderSessionContext,
+  type BuilderAction,
+  type BuilderSessionContext,
+} from '~/utils/analytics'
+import {
+  extractMigrationRepositoryUrl,
+  getApplicationStarterSuggestions,
+  resolveApplicationStarterDeterministically,
+  type ApplicationStarterContext,
+  type ApplicationStarterResult,
+} from '~/utils/application-starter'
+import {
+  getApplicationStarterCompatiblePartnerIds,
+  getApplicationStarterConflictingPartnerIds,
+  getApplicationStarterInferredPartnerIds,
+  getApplicationStarterPartnerSuggestions,
+  getApplicationStarterSelectedPartnerIds,
+  getApplicationStarterVisiblePartnerSuggestions,
+  type ApplicationStarterPartnerSuggestion,
+} from '~/utils/partners'
+import { usePartnerPlacementContext } from '~/utils/usePartnerPlacementContext'
+import type { LibraryId } from '~/libraries'
+import {
+  buildStarterPromptDeployUrl,
+  composeStarterInput,
+  isNextJsMigrationInput,
+  isPinnedStarterLibrary,
+  isValidMigrationRepositoryUrl,
+  normalizeMigrationRepositoryUrl,
+  type StarterPackageManager,
+  starterAddonLibraryIds,
+  starterLoadingPhrases,
+  starterPinnedLibraryIds,
+  type StarterToolchain,
+  type ApplicationStarterBuilderIntegration,
+  type StarterDeployProvider,
+} from './shared'
+
+interface UseApplicationBuilderOptions {
+  builderIntegration?: ApplicationStarterBuilderIntegration
+  context: ApplicationStarterContext
+  forceRouterOnly?: boolean
+  mode: 'compact' | 'full'
+  onDirtyStateChange?: (dirty: boolean) => void
+  onResolvedResult?: (result: ApplicationStarterResult | null) => void
+  revealOptionsImmediately?: boolean
+  suggestionContext?: ApplicationStarterContext
+}
+
+type CopyTrigger = 'automatic' | 'user'
+
+function openPendingDeployWindow(providerName: string) {
+  const deployWindow = window.open('', '_blank')
+
+  if (deployWindow) {
+    deployWindow.opener = null
+    deployWindow.document.title = `Opening ${providerName}`
+    deployWindow.document.body.textContent = `Opening ${providerName}...`
+  }
+
+  return deployWindow
+}
+
+function navigatePendingDeployWindow(
+  deployWindow: Window | null,
+  deployUrl: string,
+) {
+  if (deployWindow) {
+    deployWindow.location.href = deployUrl
+    deployWindow.focus()
+    return
+  }
+
+  window.location.assign(deployUrl)
+}
+
+function closePendingDeployWindow(deployWindow: Window | null) {
+  deployWindow?.close()
+}
+
+export function useApplicationBuilder({
+  builderIntegration,
+  context,
+  forceRouterOnly = false,
+  onDirtyStateChange,
+  onResolvedResult,
+  revealOptionsImmediately = false,
+  suggestionContext = context,
+}: UseApplicationBuilderOptions) {
+  const { notify } = useToast()
+  const suggestions = getApplicationStarterSuggestions(suggestionContext)
+  const partnerPlacementContext = usePartnerPlacementContext({
+    orderStrategy: 'tier-rotated',
+    surface: 'application_starter_suggestions',
+  })
+  const partnerSuggestions = React.useMemo(
+    () => getApplicationStarterPartnerSuggestions(partnerPlacementContext),
+    [partnerPlacementContext],
+  )
+  const [input, setInput] = React.useState(() => suggestions[0]?.input ?? '')
+  const [hasRevealedOptions, setHasRevealedOptions] = React.useState(
+    revealOptionsImmediately,
+  )
+  const [result, setResult] = React.useState<ApplicationStarterResult | null>(
+    null,
+  )
+  const [copiedKind, setCopiedKind] = React.useState<string | null>(null)
+  const [showPromptCopyNotice, setShowPromptCopyNotice] = React.useState(false)
+  const [loadingPhrase, setLoadingPhrase] = React.useState(
+    starterLoadingPhrases[0]!,
+  )
+  const [deployDialogProvider, setDeployDialogProvider] =
+    React.useState<StarterDeployProvider | null>(null)
+  const [isDeployDialogOpen, setIsDeployDialogOpen] = React.useState(false)
+  const [isDirtySinceLastResult, setIsDirtySinceLastResult] =
+    React.useState(false)
+  const [isRebuildingResult, setIsRebuildingResult] = React.useState(false)
+  const [isModHeld, setIsModHeld] = React.useState(false)
+  const [migrationRepositoryUrl, setMigrationRepositoryUrl] = React.useState(
+    () => extractMigrationRepositoryUrl(suggestions[0]?.input ?? '') ?? '',
+  )
+  const [debouncedInput] = useDebouncedValue(input, { wait: 300 })
+  const [debouncedMigrationRepositoryUrl] = useDebouncedValue(
+    migrationRepositoryUrl,
+    { wait: 300 },
+  )
+  const [explicitLibrarySelections, setExplicitLibrarySelections] =
+    React.useState<Partial<Record<LibraryId, boolean>>>({})
+  const [explicitPartnerSelections, setExplicitPartnerSelections] =
+    React.useState<Record<string, boolean>>({})
+  const [selectedPackageManager, setSelectedPackageManager] = React.useState<
+    StarterPackageManager | undefined
+  >(undefined)
+  const [selectedToolchain, setSelectedToolchain] = React.useState<
+    StarterToolchain | undefined
+  >(undefined)
+  const latestRequestIdRef = React.useRef(0)
+  const hasUserEditedStarterRef = React.useRef(false)
+  const migrationRepositoryInputRef = React.useRef<HTMLInputElement | null>(
+    null,
+  )
+  const explicitlySelectedPartners = React.useMemo(
+    () =>
+      partnerSuggestions.flatMap((partner) =>
+        explicitPartnerSelections[partner.id] === true ? [partner.id] : [],
+      ),
+    [explicitPartnerSelections, partnerSuggestions],
+  )
+  const selectedPartners = React.useMemo(
+    () =>
+      getApplicationStarterCompatiblePartnerIds(
+        explicitlySelectedPartners,
+        partnerSuggestions,
+      ),
+    [explicitlySelectedPartners, partnerSuggestions],
+  )
+  const visiblePartnerSuggestions = React.useMemo(
+    () =>
+      getApplicationStarterVisiblePartnerSuggestions(
+        partnerSuggestions,
+        selectedPartners,
+      ),
+    [partnerSuggestions, selectedPartners],
+  )
+  const explicitlySelectedLibraries = React.useMemo(
+    () =>
+      starterAddonLibraryIds.flatMap((libraryId) =>
+        explicitLibrarySelections[libraryId] === true ? [libraryId] : [],
+      ),
+    [explicitLibrarySelections],
+  )
+  const selectedLibraries = React.useMemo<Array<LibraryId>>(
+    () => [...starterPinnedLibraryIds, ...explicitlySelectedLibraries],
+    [explicitlySelectedLibraries],
+  )
+  // Session context (mode_used, idea_used) is stamped on every builder
+  // event so any breakdown works without joining sessions in BigQuery.
+  // Stored in a ref because mutations don't need to trigger re-renders.
+  const sessionContextRef = React.useRef<BuilderSessionContext>(
+    defaultBuilderSessionContext,
+  )
+
+  const setSessionIdea = React.useCallback((label: string) => {
+    sessionContextRef.current = {
+      ...sessionContextRef.current,
+      idea_used: label,
+    }
+  }, [])
+
+  const invalidateResult = React.useCallback(
+    (options?: { clearResult?: boolean }) => {
+      latestRequestIdRef.current += 1
+
+      if (result) {
+        setIsDirtySinceLastResult(true)
+      }
+
+      if (options?.clearResult ?? true) {
+        setResult(null)
+        onResolvedResult?.(null)
+      }
+
+      setShowPromptCopyNotice(false)
+    },
+    [onResolvedResult, result],
+  )
+
+  const markUserEditedStarter = React.useCallback(() => {
+    hasUserEditedStarterRef.current = true
+  }, [])
+
+  const markInputDirty = React.useCallback(() => {
+    markUserEditedStarter()
+    invalidateResult({ clearResult: false })
+  }, [invalidateResult, markUserEditedStarter])
+
+  React.useEffect(() => {
+    if (revealOptionsImmediately) {
+      setHasRevealedOptions(true)
+    }
+  }, [revealOptionsImmediately])
+
+  React.useEffect(() => {
+    onDirtyStateChange?.(isDirtySinceLastResult)
+  }, [isDirtySinceLastResult, onDirtyStateChange])
+
+  const normalizedMigrationRepositoryUrl = normalizeMigrationRepositoryUrl(
+    migrationRepositoryUrl,
+  )
+  const showMigrationRepositoryInput =
+    isNextJsMigrationInput(input) || normalizedMigrationRepositoryUrl.length > 0
+  const hasMigrationRepositoryUrlError =
+    normalizedMigrationRepositoryUrl.length > 0 &&
+    !isValidMigrationRepositoryUrl(normalizedMigrationRepositoryUrl)
+
+  React.useEffect(() => {
+    if (!showMigrationRepositoryInput) {
+      return
+    }
+
+    const timeout = window.setTimeout(() => {
+      migrationRepositoryInputRef.current?.focus()
+    }, 0)
+
+    return () => {
+      window.clearTimeout(timeout)
+    }
+  }, [showMigrationRepositoryInput])
+
+  const buildSubmittedInput = React.useCallback(
+    (
+      nextSelectedPartners: Array<string> = explicitlySelectedPartners,
+      nextInferredPartners: Array<string> = [],
+      nextSelectedLibraries: Array<LibraryId> = selectedLibraries,
+    ) =>
+      composeStarterInput({
+        forceRouterOnly,
+        inferredPartners: nextInferredPartners,
+        input,
+        migrationRepositoryUrl,
+        packageManager: selectedPackageManager,
+        selectedLibraries: nextSelectedLibraries,
+        selectedPartners: nextSelectedPartners,
+        toolchain: selectedToolchain,
+      }),
+    [
+      explicitlySelectedPartners,
+      forceRouterOnly,
+      input,
+      migrationRepositoryUrl,
+      selectedPackageManager,
+      selectedLibraries,
+      selectedToolchain,
+    ],
+  )
+
+  const buildDebouncedSubmittedInput = React.useCallback(
+    (
+      nextSelectedPartners: Array<string> = explicitlySelectedPartners,
+      nextInferredPartners: Array<string> = [],
+      nextSelectedLibraries: Array<LibraryId> = selectedLibraries,
+    ) =>
+      composeStarterInput({
+        forceRouterOnly,
+        inferredPartners: nextInferredPartners,
+        input: debouncedInput,
+        migrationRepositoryUrl: debouncedMigrationRepositoryUrl,
+        packageManager: selectedPackageManager,
+        selectedLibraries: nextSelectedLibraries,
+        selectedPartners: nextSelectedPartners,
+        toolchain: selectedToolchain,
+      }),
+    [
+      debouncedInput,
+      debouncedMigrationRepositoryUrl,
+      explicitlySelectedPartners,
+      forceRouterOnly,
+      selectedPackageManager,
+      selectedLibraries,
+      selectedToolchain,
+    ],
+  )
+
+  const toggleLibrary = React.useCallback(
+    (libraryId: LibraryId) => {
+      if (isPinnedStarterLibrary(libraryId)) {
+        return
+      }
+
+      markUserEditedStarter()
+      invalidateResult()
+      const selected = selectedLibraries.includes(libraryId)
+
+      setExplicitLibrarySelections((current) => ({
+        ...current,
+        [libraryId]: !selected,
+      }))
+    },
+    [invalidateResult, markUserEditedStarter, selectedLibraries],
+  )
+
+  const togglePartner = React.useCallback(
+    (partner: ApplicationStarterPartnerSuggestion, selected: boolean) => {
+      markUserEditedStarter()
+      invalidateResult()
+      setExplicitPartnerSelections((current) => {
+        const nextSelected = !selected
+        const next = {
+          ...current,
+          [partner.id]: nextSelected,
+        }
+
+        if (nextSelected) {
+          for (const partnerId of getApplicationStarterConflictingPartnerIds(
+            partner,
+            partnerSuggestions,
+          )) {
+            next[partnerId] = false
+          }
+        }
+
+        return next
+      })
+    },
+    [invalidateResult, markUserEditedStarter, partnerSuggestions],
+  )
+
+  const togglePackageManager = React.useCallback(
+    (packageManager: StarterPackageManager) => {
+      markUserEditedStarter()
+      invalidateResult()
+
+      setSelectedPackageManager((current) =>
+        current === packageManager ? undefined : packageManager,
+      )
+    },
+    [invalidateResult, markUserEditedStarter],
+  )
+
+  const toggleToolchain = React.useCallback(
+    (toolchain: StarterToolchain) => {
+      markUserEditedStarter()
+      invalidateResult()
+
+      setSelectedToolchain((current) =>
+        current === toolchain ? undefined : toolchain,
+      )
+    },
+    [invalidateResult, markUserEditedStarter],
+  )
+
+  const dismissPromptCopyNotice = React.useCallback(() => {
+    setShowPromptCopyNotice(false)
+  }, [])
+
+  const revealPromptCopyNotice = React.useCallback(() => {
+    setShowPromptCopyNotice(true)
+  }, [])
+
+  const markCopied = React.useCallback(
+    (
+      kind: string,
+      options?: { showPromptNotice?: boolean; trigger?: CopyTrigger },
+    ) => {
+      setCopiedKind(kind)
+      setTimeout(
+        () => setCopiedKind((current) => (current === kind ? null : current)),
+        1800,
+      )
+
+      if (kind === 'prompt' && options?.showPromptNotice) {
+        revealPromptCopyNotice()
+      }
+
+      // Only treat user-driven copies as activation. Automatic copies that
+      // fire as a side-effect of generation are not activation signals.
+      const trigger = options?.trigger ?? 'user'
+      if (trigger === 'user' && kind === 'prompt') {
+        trackEvent('builder_activated', {
+          ...sessionContextRef.current,
+          action: 'copy_prompt',
+          surface: 'result_panel',
+          automatic: false,
+        })
+      }
+    },
+    [revealPromptCopyNotice],
+  )
+
+  const handleCopy = React.useCallback(
+    async (
+      value: string,
+      kind: string,
+      options?: {
+        notify?: boolean
+        showPromptNotice?: boolean
+        trigger?: CopyTrigger
+      },
+    ) => {
+      await navigator.clipboard.writeText(value)
+      markCopied(kind, {
+        showPromptNotice: options?.showPromptNotice,
+        trigger: options?.trigger,
+      })
+
+      if (options?.notify === false) {
+        return
+      }
+
+      notify(
+        <div>
+          <div className="font-medium">Copied {kind}</div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">
+            Paste it into your AI tool or terminal.
+          </div>
+        </div>,
+      )
+    },
+    [markCopied, notify],
+  )
+
+  const applyResolvedResultState = React.useCallback(
+    (nextResult: ApplicationStarterResult) => {
+      setIsDirtySinceLastResult(false)
+      setResult(nextResult)
+      onResolvedResult?.(nextResult)
+    },
+    [onResolvedResult],
+  )
+
+  const resolveSubmittedInput = React.useCallback(
+    async (
+      submittedInput: string,
+      options?: { applyBuilder?: boolean; silentBuilder?: boolean },
+    ) => {
+      const trimmed = submittedInput.trim()
+      if (!trimmed) {
+        return null
+      }
+
+      const requestId = latestRequestIdRef.current + 1
+      latestRequestIdRef.current = requestId
+      const phraseIndex = Math.floor(
+        Math.random() * starterLoadingPhrases.length,
+      )
+      setLoadingPhrase(starterLoadingPhrases[phraseIndex]!)
+      setIsRebuildingResult(true)
+
+      try {
+        const nextResult = await resolveApplicationStarterDeterministically({
+          context,
+          input: trimmed,
+        })
+
+        if (requestId !== latestRequestIdRef.current) {
+          return null
+        }
+
+        applyResolvedResultState(nextResult)
+
+        if (options?.applyBuilder && builderIntegration) {
+          await builderIntegration.applyResult(nextResult, {
+            silent: options.silentBuilder,
+          })
+        }
+
+        return nextResult
+      } catch (error) {
+        if (requestId === latestRequestIdRef.current) {
+          notify(
+            <div>
+              <div className="font-medium">Could not rebuild the prompt</div>
+              <div className="text-xs text-gray-500 dark:text-gray-400">
+                {error instanceof Error ? error.message : 'Please try again.'}
+              </div>
+            </div>,
+          )
+
+          trackEvent('builder_failed', {
+            ...sessionContextRef.current,
+            stage: 'generation',
+            error_message:
+              error instanceof Error ? error.message : 'unknown_error',
+          })
+        }
+
+        return null
+      } finally {
+        if (requestId === latestRequestIdRef.current) {
+          setIsRebuildingResult(false)
+        }
+      }
+    },
+    [applyResolvedResultState, builderIntegration, context, notify],
+  )
+
+  const trackGeneratedResult = React.useCallback(
+    (nextResult: ApplicationStarterResult, submittedInput: string) => {
+      const selectedPartnerIds =
+        getApplicationStarterSelectedPartnerIds(submittedInput)
+      const inferredPartnerIds =
+        getApplicationStarterInferredPartnerIds(submittedInput)
+      const finalPartnerIds = [
+        ...new Set([...selectedPartnerIds, ...inferredPartnerIds]),
+      ]
+      const finalFeatureIds = [
+        ...new Set(
+          [
+            ...nextResult.recipe.features,
+            nextResult.recipe.deployment,
+            nextResult.recipe.toolchain,
+          ].filter((feature): feature is string => !!feature),
+        ),
+      ]
+      const promptText =
+        `${nextResult.prompt}\n${nextResult.cliCommand}`.toLowerCase()
+      const finalPromptFeatureIds = finalFeatureIds.filter((featureId) =>
+        promptText.includes(featureId.toLowerCase()),
+      )
+
+      trackEvent('builder_generated', {
+        ...sessionContextRef.current,
+        final_deployment: nextResult.recipe.deployment,
+        final_package_manager: nextResult.recipe.packageManager,
+        final_library_count: selectedLibraries.length,
+        final_partner_count: finalPartnerIds.length,
+        final_addon_count: finalPromptFeatureIds.length,
+        // Joined arrays - use SPLIT() in BigQuery for top-N reporting.
+        library_ids: selectedLibraries.join(','),
+        partner_ids: finalPartnerIds.join(','),
+        addon_ids: finalPromptFeatureIds.join(','),
+      })
+    },
+    [selectedLibraries],
+  )
+
+  React.useEffect(() => {
+    if (!hasRevealedOptions) {
+      return
+    }
+
+    const submittedInput = buildDebouncedSubmittedInput()
+
+    if (!submittedInput.trim()) {
+      return
+    }
+
+    void resolveSubmittedInput(submittedInput, {
+      applyBuilder: hasUserEditedStarterRef.current,
+      silentBuilder: true,
+    })
+  }, [buildDebouncedSubmittedInput, hasRevealedOptions, resolveSubmittedInput])
+
+  const selectSuggestion = React.useCallback(
+    async ({
+      suggestion,
+    }: {
+      suggestion: { input: string; label: string }
+    }) => {
+      markInputDirty()
+      setInput(suggestion.input)
+
+      if (!isNextJsMigrationInput(suggestion.input)) {
+        setMigrationRepositoryUrl('')
+      }
+
+      // Stamp the idea on subsequent builder events so any downstream
+      // outcome (analyzed/generated/activated) carries this attribution.
+      setSessionIdea(suggestion.label)
+    },
+    [markInputDirty, setSessionIdea],
+  )
+
+  const ensureResolvedResult = React.useCallback(async () => {
+    const submittedInput = buildSubmittedInput()
+
+    if (!submittedInput.trim()) {
+      return null
+    }
+
+    if (result && !isDirtySinceLastResult) {
+      return result
+    }
+
+    return resolveSubmittedInput(submittedInput)
+  }, [
+    buildSubmittedInput,
+    isDirtySinceLastResult,
+    resolveSubmittedInput,
+    result,
+  ])
+
+  const copyResultValue = React.useCallback(
+    async (kind: 'command' | 'prompt') => {
+      const nextResult = await ensureResolvedResult()
+
+      if (!nextResult) {
+        return
+      }
+
+      await handleCopy(
+        kind === 'prompt' ? nextResult.prompt : nextResult.cliCommand,
+        kind,
+        kind === 'prompt'
+          ? {
+              notify: false,
+            }
+          : undefined,
+      )
+    },
+    [ensureResolvedResult, handleCopy],
+  )
+
+  // Generic activation tracker used both inside the hook and passed to the
+  // DeployDialog so dialog actions carry the same session context as
+  // result-panel actions.
+  const trackActivation = React.useCallback(
+    (params: {
+      action: BuilderAction
+      surface: 'result_panel' | 'deploy_dialog'
+      provider?: string
+      automatic?: boolean
+    }) => {
+      trackEvent('builder_activated', {
+        ...sessionContextRef.current,
+        action: params.action,
+        surface: params.surface,
+        provider: params.provider,
+        automatic: params.automatic ?? false,
+      })
+    },
+    [],
+  )
+
+  const trackAction = React.useCallback(
+    (action: BuilderAction, provider?: StarterDeployProvider | null) => {
+      trackActivation({
+        action,
+        surface: 'result_panel',
+        provider: provider ?? undefined,
+      })
+    },
+    [trackActivation],
+  )
+
+  const withResolvedResult = React.useCallback(
+    async (
+      run: (nextResult: ApplicationStarterResult) => void | Promise<void>,
+    ) => {
+      const nextResult = await ensureResolvedResult()
+
+      if (!nextResult) {
+        return null
+      }
+
+      return run(nextResult)
+    },
+    [ensureResolvedResult],
+  )
+
+  const withResolvedPrompt = React.useCallback(
+    async (
+      run: (nextResult: ApplicationStarterResult) => void | Promise<void>,
+    ) => {
+      return withResolvedResult(async (nextResult) => {
+        if (!nextResult.prompt) {
+          return
+        }
+
+        return run(nextResult)
+      })
+    },
+    [withResolvedResult],
+  )
+
+  const navigateToResult = React.useCallback(
+    async (kind: 'advanced' | 'download') => {
+      await withResolvedResult((nextResult) => {
+        trackAction(kind === 'advanced' ? 'open_advanced' : 'download')
+
+        if (kind === 'download' && builderIntegration?.downloadResult) {
+          return builderIntegration.downloadResult(nextResult)
+        }
+
+        const destination =
+          kind === 'download'
+            ? nextResult.downloadUrl
+            : nextResult.advancedBuilderUrl
+
+        if (!destination) {
+          return
+        }
+
+        window.location.assign(destination)
+      })
+    },
+    [builderIntegration, trackAction, withResolvedResult],
+  )
+
+  const openDeployDialog = React.useCallback(
+    async (provider: StarterDeployProvider | null) => {
+      await withResolvedResult((nextResult) => {
+        if (nextResult.recipe.target !== 'start') {
+          return
+        }
+
+        trackAction(provider ? 'deploy' : 'clone_repo', provider)
+        setDeployDialogProvider(provider)
+        setIsDeployDialogOpen(true)
+      })
+    },
+    [trackAction, withResolvedResult],
+  )
+
+  const openNetlifyStart = React.useCallback(async () => {
+    const deployWindow = openPendingDeployWindow('Netlify')
+    let openedDeployUrl = false
+    const netlifyPartner = partnerSuggestions.find(
+      (partner) => partner.id === 'netlify',
+    )
+    const netlifyConflictIds = netlifyPartner
+      ? getApplicationStarterConflictingPartnerIds(
+          netlifyPartner,
+          partnerSuggestions,
+        )
+      : ['cloudflare']
+    const nextSelectedPartners = explicitlySelectedPartners.filter(
+      (partnerId) => !netlifyConflictIds.includes(partnerId),
+    )
+    const removedConflictingPartner =
+      nextSelectedPartners.length !== explicitlySelectedPartners.length
+
+    if (removedConflictingPartner) {
+      setExplicitPartnerSelections((current) => {
+        const next = { ...current }
+
+        for (const partnerId of netlifyConflictIds) {
+          next[partnerId] = false
+        }
+
+        return next
+      })
+      invalidateResult()
+    }
+
+    const nextSelectedLibraries = selectedLibraries
+    const submittedInput = buildSubmittedInput(
+      nextSelectedPartners,
+      [],
+      nextSelectedLibraries,
+    )
+
+    try {
+      if (!submittedInput.trim()) {
+        return
+      }
+
+      const nextResult =
+        !removedConflictingPartner && result && !isDirtySinceLastResult
+          ? result
+          : await resolveSubmittedInput(submittedInput)
+
+      if (!nextResult?.prompt) {
+        return
+      }
+
+      trackEvent('builder_activated', {
+        ...sessionContextRef.current,
+        action: 'netlify_start',
+        surface: 'result_panel',
+        provider: 'netlify',
+        automatic: false,
+      })
+
+      openedDeployUrl = true
+      navigatePendingDeployWindow(
+        deployWindow,
+        buildStarterPromptDeployUrl('netlify', nextResult.prompt),
+      )
+    } finally {
+      if (!openedDeployUrl) {
+        closePendingDeployWindow(deployWindow)
+      }
+    }
+  }, [
+    buildSubmittedInput,
+    explicitlySelectedPartners,
+    invalidateResult,
+    isDirtySinceLastResult,
+    partnerSuggestions,
+    result,
+    resolveSubmittedInput,
+    selectedLibraries,
+  ])
+
+  const openLovableStart = React.useCallback(async () => {
+    const deployWindow = openPendingDeployWindow('Lovable')
+    let openedDeployUrl = false
+
+    try {
+      await withResolvedPrompt((nextResult) => {
+        trackActivation({
+          action: 'deploy',
+          surface: 'result_panel',
+          provider: 'lovable',
+        })
+
+        openedDeployUrl = true
+        navigatePendingDeployWindow(
+          deployWindow,
+          buildStarterPromptDeployUrl('lovable', nextResult.prompt),
+        )
+      })
+    } finally {
+      if (!openedDeployUrl) {
+        closePendingDeployWindow(deployWindow)
+      }
+    }
+  }, [trackActivation, withResolvedPrompt])
+
+  const openCodexStart = React.useCallback(async () => {
+    await withResolvedPrompt((nextResult) => {
+      trackAction('open_codex')
+      window.location.assign(
+        `codex://new?prompt=${encodeURIComponent(nextResult.prompt)}`,
+      )
+    })
+  }, [trackAction, withResolvedPrompt])
+
+  const openClaudeStart = React.useCallback(async () => {
+    await withResolvedPrompt((nextResult) => {
+      trackAction('open_claude')
+      window.open(
+        `https://claude.ai/code?q=${encodeURIComponent(nextResult.prompt)}`,
+        '_blank',
+        'noopener,noreferrer',
+      )
+    })
+  }, [trackAction, withResolvedPrompt])
+
+  const openCursorStart = React.useCallback(async () => {
+    await withResolvedPrompt((nextResult) => {
+      trackAction('open_cursor')
+      window.open(
+        `cursor://anysphere.cursor-deeplink/prompt?text=${encodeURIComponent(nextResult.prompt)}`,
+        '_blank',
+        'noopener,noreferrer',
+      )
+    })
+  }, [trackAction, withResolvedPrompt])
+
+  const generatePrompt = React.useCallback(async () => {
+    const submittedInput = buildSubmittedInput()
+    const nextResult =
+      result && !isDirtySinceLastResult
+        ? result
+        : await resolveSubmittedInput(submittedInput)
+
+    if (!nextResult) {
+      return
+    }
+
+    trackGeneratedResult(nextResult, submittedInput)
+
+    if (builderIntegration) {
+      const applied = await builderIntegration.applyResult(nextResult, {
+        silent: false,
+      })
+
+      if (applied) {
+        notify(
+          <div>
+            <div className="font-medium">Builder configured</div>
+            <div className="text-xs text-gray-500 dark:text-gray-400">
+              The prompt was applied to the builder immediately.
+            </div>
+          </div>,
+        )
+      }
+    }
+
+    await handleCopy(nextResult.prompt, 'prompt', {
+      notify: false,
+      showPromptNotice: true,
+    })
+  }, [
+    buildSubmittedInput,
+    builderIntegration,
+    handleCopy,
+    isDirtySinceLastResult,
+    notify,
+    resolveSubmittedInput,
+    result,
+    trackGeneratedResult,
+  ])
+
+  const hasInput = buildSubmittedInput().trim().length > 0
+  const hasGeneratedPrompt = !!result?.prompt
+  const isGeneratingPrompt = isRebuildingResult
+  const isGeneratingNetlify = false
+  const isGenerating = isRebuildingResult
+
+  const updateInput = React.useCallback(
+    (value: string) => {
+      markInputDirty()
+      setInput(value)
+    },
+    [markInputDirty],
+  )
+
+  const updateMigrationRepositoryUrl = React.useCallback(
+    (value: string) => {
+      markUserEditedStarter()
+      invalidateResult()
+      setMigrationRepositoryUrl(value)
+    },
+    [invalidateResult, markUserEditedStarter],
+  )
+
+  const submitCurrentInput = React.useCallback(async () => {
+    if (!input.trim()) {
+      return
+    }
+
+    setHasRevealedOptions(true)
+  }, [input])
+
+  return {
+    copiedKind,
+    copyResultValue,
+    dismissPromptCopyNotice,
+    deployDialogProvider,
+    generatePrompt,
+    hasGeneratedPrompt,
+    hasRevealedOptions,
+    hasInput,
+    hasMigrationRepositoryUrlError,
+    input,
+    isDeployDialogOpen,
+    isGenerating,
+    isGeneratingNetlify,
+    isGeneratingPrompt,
+    isModHeld,
+    loadingPhrase,
+    migrationRepositoryInputRef,
+    migrationRepositoryUrl,
+    navigateToResult,
+    openClaudeStart,
+    openCursorStart,
+    openCodexStart,
+    openDeployDialog,
+    openLovableStart,
+    openNetlifyStart,
+    partnerSuggestions: visiblePartnerSuggestions,
+    promptCopyNotice: showPromptCopyNotice,
+    result,
+    selectSuggestion,
+    selectedPackageManager,
+    selectedLibraries,
+    selectedPartners,
+    selectedToolchain,
+    setIsDeployDialogOpen,
+    setIsModHeld,
+    showMigrationRepositoryInput,
+    trackActivation,
+    submitCurrentInput,
+    suggestions,
+    toggleLibrary,
+    togglePackageManager,
+    togglePartner,
+    toggleToolchain,
+    updateInput,
+    updateMigrationRepositoryUrl,
+  }
+}
diff --git a/src/components/builder/BuilderLayout.tsx b/src/components/builder/BuilderLayout.tsx
deleted file mode 100644
index 73215ddb5..000000000
--- a/src/components/builder/BuilderLayout.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * BuilderLayout - Main 2-panel layout for the builder
- * Left panel: Configuration (starters, options, add-ons)
- * Right panel: File explorer and preview tabs
- */
-
-import * as React from 'react'
-import { ConfigPanel } from './config/ConfigPanel'
-import { ExplorerPanel } from './explorer/ExplorerPanel'
-
-export function BuilderLayout() {
-  const [isMobileConfigOpen, setIsMobileConfigOpen] = React.useState(true)
-
-  return (
-    <div className="flex h-full w-full overflow-hidden bg-gray-50 dark:bg-gray-950">
-      {/* Left panel - Config */}
-      <div
-        className={`
-          w-full md:w-[400px] lg:w-[440px] shrink-0
-          border-r border-gray-200 dark:border-gray-800
-          bg-white dark:bg-gray-900
-          overflow-y-auto
-          ${isMobileConfigOpen ? 'block' : 'hidden md:block'}
-        `}
-      >
-        <ConfigPanel />
-      </div>
-
-      {/* Right panel - Explorer/Preview */}
-      <div
-        className={`
-          flex-1 min-w-0 min-h-0 overflow-hidden
-          bg-white dark:bg-gray-900
-          ${isMobileConfigOpen ? 'hidden md:flex' : 'flex'}
-          flex-col
-        `}
-      >
-        <ExplorerPanel
-          isMobileConfigOpen={isMobileConfigOpen}
-          onToggleMobileConfig={() => setIsMobileConfigOpen((p) => !p)}
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/builder/BuilderPage.client.tsx b/src/components/builder/BuilderPage.client.tsx
new file mode 100644
index 000000000..3115beed3
--- /dev/null
+++ b/src/components/builder/BuilderPage.client.tsx
@@ -0,0 +1,10 @@
+import { BuilderProvider } from './BuilderProvider'
+import { BuilderWorkspace } from './BuilderWorkspace'
+
+export function BuilderPage() {
+  return (
+    <BuilderProvider>
+      <BuilderWorkspace />
+    </BuilderProvider>
+  )
+}
diff --git a/src/components/builder/BuilderProvider.tsx b/src/components/builder/BuilderProvider.tsx
index 1340d91db..a3f9eda3b 100644
--- a/src/components/builder/BuilderProvider.tsx
+++ b/src/components/builder/BuilderProvider.tsx
@@ -1,152 +1,72 @@
 /**
- * BuilderProvider - Wraps CTA providers and handles initialization
+ * Builder Provider (v2)
+ *
+ * Initializes the builder store and handles feature loading.
+ * Uses proper theme support.
  */
 
-import * as React from 'react'
 import {
-  CTAProvider,
-  WebContainerProvider,
-  useReady,
-  useManager,
-} from '@tanstack/cta-ui-base'
-import { useDryRun } from '@tanstack/cta-ui-base/dist/store/project'
-import {
-  useBuilderSearch,
-  useInitializeAddonsFromUrl,
-} from './hooks/useBuilderSearch'
-import { useCapabilities } from '~/hooks/useCapabilities'
-import { hasCapability } from '~/db/types'
-
-type BuilderProviderProps = {
-  children: React.ReactNode
-}
-
-// Context for lazy preview activation
-type PreviewContextValue = {
-  canPreview: boolean
-  previewActivated: boolean
-  activatePreview: () => void
-}
-
-const PreviewContext = React.createContext<PreviewContextValue>({
-  canPreview: false,
-  previewActivated: false,
-  activatePreview: () => {},
-})
-
-export function usePreviewContext() {
-  return React.useContext(PreviewContext)
+  createContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react'
+import { useSearch } from '@tanstack/react-router'
+import { useBuilderStore } from './store'
+import { normalizeFrameworkId } from '~/builder/frameworks'
+
+interface BuilderContextValue {
+  ready: boolean
 }
 
-// Inner component that only runs after CTA is ready
-// This avoids calling useAddOns before data is loaded (which has a bug)
-function BuilderReadyInner({ children }: BuilderProviderProps) {
-  // Sync URL state with CTA state (uses useAddOns internally)
-  useBuilderSearch()
-
-  // Initialize addons from URL after registry loads
-  useInitializeAddonsFromUrl()
-
-  // Check if user can use preview (admin only for now)
-  const capabilities = useCapabilities()
-  const canPreview = hasCapability(capabilities, 'admin')
-
-  // Lazy preview activation - only start WebContainer when user clicks Preview
-  const [previewActivated, setPreviewActivated] = React.useState(false)
-  const activatePreview = React.useCallback(() => {
-    setPreviewActivated(true)
-  }, [])
-
-  const previewContextValue = React.useMemo(
-    () => ({ canPreview, previewActivated, activatePreview }),
-    [canPreview, previewActivated, activatePreview],
-  )
-
-  const dryRun = useDryRun()
-
-  // Convert dry run files to WebContainer format
-  const dryRunFiles = dryRun?.files
-  const projectFiles = React.useMemo(() => {
-    if (!dryRunFiles) return []
-    return Object.entries(dryRunFiles).map(([path, content]) => ({
-      path: path.replace(/^\.\//, ''),
-      content: content as string,
-    }))
-  }, [dryRunFiles])
+const BuilderContext = createContext<BuilderContextValue>({ ready: false })
 
-  // Only load WebContainer if user can preview AND has activated it
-  if (!canPreview || !previewActivated) {
-    return (
-      <PreviewContext.Provider value={previewContextValue}>
-        {children}
-      </PreviewContext.Provider>
-    )
-  }
-
-  return (
-    <PreviewContext.Provider value={previewContextValue}>
-      <WebContainerProvider projectFiles={projectFiles}>
-        {children}
-      </WebContainerProvider>
-    </PreviewContext.Provider>
-  )
+interface BuilderProviderProps {
+  children: ReactNode
 }
 
-function BuilderProviderInner({ children }: BuilderProviderProps) {
-  // Initialize manager to start CTA engine
-  useManager()
-
-  const ready = useReady()
-
-  // Delay showing loading state to avoid flash during HMR
-  // HMR typically re-initializes within ~100ms, so we wait a bit before showing loading
-  const [showLoading, setShowLoading] = React.useState(false)
-
-  React.useEffect(() => {
-    if (ready) {
-      setShowLoading(false)
-      return
+export function BuilderProvider({ children }: BuilderProviderProps) {
+  const [ready, setReady] = useState(false)
+  const search = useSearch({ strict: false }) as { framework?: string }
+  const loadFeatures = useBuilderStore((s) => s.loadFeatures)
+  const featuresLoaded = useBuilderStore((s) => s.featuresLoaded)
+  const initializedRef = useRef(false)
+
+  // Set framework from URL before loading features (only once on mount)
+  useEffect(() => {
+    if (initializedRef.current) return
+    initializedRef.current = true
+
+    // Set framework directly in store without triggering loadFeatures
+    if (search.framework) {
+      useBuilderStore.setState({
+        framework: normalizeFrameworkId(search.framework),
+      })
     }
+    loadFeatures()
+  }, [loadFeatures, search.framework])
 
-    // Only show loading after a short delay to avoid HMR flash
-    const timeout = setTimeout(() => {
-      setShowLoading(true)
-    }, 150)
-
-    return () => clearTimeout(timeout)
-  }, [ready])
-
-  if (!ready && showLoading) {
-    return <BuilderLoading />
-  }
-
-  if (!ready) {
-    // Brief moment before showing loading - render nothing or a minimal placeholder
-    return null
-  }
-
-  return <BuilderReadyInner>{children}</BuilderReadyInner>
-}
+  useEffect(() => {
+    if (featuresLoaded) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setReady(true)
+    }
+  }, [featuresLoaded])
 
-export function BuilderProvider({ children }: BuilderProviderProps) {
   return (
-    <CTAProvider>
-      <BuilderProviderInner>{children}</BuilderProviderInner>
-    </CTAProvider>
+    <BuilderContext.Provider value={{ ready }}>
+      {ready ? children : <BuilderLoading />}
+    </BuilderContext.Provider>
   )
 }
 
 function BuilderLoading() {
   return (
-    <div className="flex items-center justify-center h-full w-full">
-      <div className="flex flex-col items-center gap-4">
-        <div className="relative">
-          <div className="w-12 h-12 rounded-full border-4 border-gray-200 dark:border-gray-700" />
-          <div className="absolute inset-0 w-12 h-12 rounded-full border-4 border-transparent border-t-blue-500 animate-spin" />
-        </div>
-        <p className="text-sm text-gray-500 dark:text-gray-400">
-          Loading builder...
-        </p>
+    <div className="flex items-center justify-center h-full bg-gray-50 dark:bg-gray-900">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 dark:border-cyan-400 mx-auto mb-4" />
+        <p className="text-gray-500 dark:text-gray-400">Loading builder...</p>
       </div>
     </div>
   )
diff --git a/src/components/builder/BuilderSummary.tsx b/src/components/builder/BuilderSummary.tsx
new file mode 100644
index 000000000..f73c639f0
--- /dev/null
+++ b/src/components/builder/BuilderSummary.tsx
@@ -0,0 +1,311 @@
+import * as React from 'react'
+import { useMemo } from 'react'
+import { twMerge } from 'tailwind-merge'
+import {
+  BookOpen,
+  Code,
+  FileText,
+  Palette,
+  Rocket,
+  Settings2,
+  Terminal,
+} from 'lucide-react'
+import {
+  useAvailableExamples,
+  useAvailableFeatures,
+  useFeatures,
+  useFramework,
+  usePackageManager,
+  useProjectName,
+  useSelectedExample,
+  useSelectedTemplate,
+  useSkipGit,
+  useSkipInstall,
+  useTailwind,
+} from './store'
+import { useCliCommand } from './useBuilderUrl'
+import { GeneratedPromptPreviewCard } from '~/components/application-builder/parts'
+import { TEMPLATES } from '~/builder/templates'
+import {
+  STARTER_AGENTS_CONTEXT_INSTRUCTION,
+  STARTER_INTENT_INSTALL_COMMAND,
+  STARTER_INTENT_LIST_COMMAND,
+  STARTER_INTENT_USAGE_INSTRUCTION,
+} from '~/utils/application-starter'
+
+type SummaryFeature = {
+  id: string
+  name: string
+  description?: string
+  color?: string
+  link?: string
+}
+
+export type BuilderSummaryData = {
+  addOnFeatures: Array<SummaryFeature>
+  cliCommand: string
+  deploymentFeatures: Array<SummaryFeature>
+  exampleName?: string
+  framework: 'react' | 'solid'
+  headline: string
+  packageManager: 'bun' | 'npm' | 'pnpm' | 'yarn'
+  projectName: string
+  prompt: string
+  selectedTemplate?: string
+  tailwind: boolean
+  toolingFeatures: Array<SummaryFeature>
+}
+
+export function useBuilderSummaryData(): BuilderSummaryData {
+  const availableExamples = useAvailableExamples()
+  const availableFeatures = useAvailableFeatures()
+  const cliCommand = useCliCommand()
+  const features = useFeatures()
+  const framework = useFramework()
+  const packageManager = usePackageManager()
+  const projectName = useProjectName()
+  const selectedExample = useSelectedExample()
+  const selectedTemplate = useSelectedTemplate()
+  const skipGit = useSkipGit()
+  const skipInstall = useSkipInstall()
+  const tailwind = useTailwind()
+
+  return useMemo(() => {
+    const templateName = selectedTemplate
+      ? TEMPLATES.find((template) => template.id === selectedTemplate)?.name
+      : undefined
+    const exampleName = selectedExample
+      ? availableExamples.find((example) => example.id === selectedExample)
+          ?.name
+      : undefined
+
+    const selectedFeatures = features
+      .map((id) => availableFeatures.find((feature) => feature.id === id))
+      .filter((feature): feature is NonNullable<typeof feature> => !!feature)
+
+    const deploymentFeatures = selectedFeatures.filter(
+      (feature) => feature.category === 'deploy',
+    )
+    const toolingFeatures = selectedFeatures.filter(
+      (feature) => feature.category === 'tooling',
+    )
+    const addOnFeatures = selectedFeatures.filter(
+      (feature) =>
+        feature.category !== 'deploy' && feature.category !== 'tooling',
+    )
+
+    const promptSections = [
+      [
+        `Create a TanStack Start application named ${projectName} using ${framework === 'solid' ? 'Solid' : 'React'}.`,
+        'Start by scaffolding the project with the TanStack CLI.',
+        `Use this command: ${cliCommand}`,
+      ].join('\n'),
+      [
+        `After scaffolding, install dependencies and then wire TanStack Intent into the repo with: ${STARTER_INTENT_INSTALL_COMMAND}`,
+        `Then inspect the installed package skills with: ${STARTER_INTENT_LIST_COMMAND}`,
+        STARTER_INTENT_USAGE_INSTRUCTION,
+        STARTER_AGENTS_CONTEXT_INSTRUCTION,
+      ].join('\n'),
+      [
+        templateName ? `Start from the ${templateName} template.` : null,
+        exampleName
+          ? `Use the ${exampleName} example as the guiding shape.`
+          : null,
+        addOnFeatures.length > 0
+          ? `Include these integrations: ${addOnFeatures.map((feature) => feature.name).join(', ')}.`
+          : 'Keep the stack minimal and add only the essentials already selected.',
+        deploymentFeatures.length > 0
+          ? `Target deployment: ${deploymentFeatures.map((feature) => feature.name).join(', ')}.`
+          : null,
+        toolingFeatures.length > 0
+          ? `Tooling choices: ${toolingFeatures.map((feature) => feature.name).join(', ')}.`
+          : null,
+        `Use ${packageManager} for package management and ${tailwind ? 'keep Tailwind enabled' : 'avoid Tailwind-specific setup'}.`,
+      ]
+        .filter(Boolean)
+        .join('\n'),
+      [
+        skipInstall ? 'Do not install dependencies automatically.' : null,
+        skipGit ? 'Do not initialize git automatically.' : null,
+      ]
+        .filter(Boolean)
+        .join('\n'),
+      'After scaffolding, explain the resulting structure and the next setup steps.',
+    ].filter(Boolean)
+
+    const headline = [
+      framework === 'solid' ? 'Solid' : 'React',
+      selectedTemplate ?? 'Custom starter',
+      addOnFeatures.length > 0
+        ? `with ${addOnFeatures
+            .slice(0, 3)
+            .map((feature) => feature.name)
+            .join(', ')}`
+        : 'with a minimal stack',
+    ].join(' ')
+
+    return {
+      addOnFeatures,
+      cliCommand,
+      deploymentFeatures,
+      exampleName,
+      framework,
+      headline,
+      packageManager,
+      projectName,
+      prompt: promptSections.join('\n\n'),
+      selectedTemplate: templateName,
+      tailwind,
+      toolingFeatures,
+    }
+  }, [
+    availableExamples,
+    availableFeatures,
+    cliCommand,
+    features,
+    framework,
+    packageManager,
+    projectName,
+    selectedExample,
+    selectedTemplate,
+    skipGit,
+    skipInstall,
+    tailwind,
+  ])
+}
+
+export function BuilderSummaryPanel({
+  summary,
+  className,
+  compact = false,
+  overlay,
+}: {
+  summary: BuilderSummaryData
+  className?: string
+  compact?: boolean
+  overlay?: {
+    description: string
+    title: string
+  } | null
+}) {
+  return (
+    <div
+      className={twMerge(
+        compact ? '' : 'flex-1 overflow-auto bg-white dark:bg-gray-900',
+        className,
+      )}
+    >
+      <div className="relative">
+        {overlay ? (
+          <div className="absolute inset-0 z-10 flex items-center justify-center rounded-[1rem] bg-white/65 px-6 text-center backdrop-blur-sm dark:bg-gray-950/70">
+            <div className="max-w-sm rounded-2xl border border-gray-200 bg-white/95 px-5 py-4 shadow-lg dark:border-gray-800 dark:bg-gray-900/95">
+              <div className="text-sm font-semibold text-gray-900 dark:text-white">
+                {overlay.title}
+              </div>
+              <div className="mt-2 text-sm leading-6 text-gray-500 dark:text-gray-400">
+                {overlay.description}
+              </div>
+            </div>
+          </div>
+        ) : null}
+
+        <div
+          className={twMerge(
+            compact
+              ? 'flex flex-col gap-4'
+              : 'mx-auto flex w-full max-w-5xl flex-col gap-5 px-5 py-5 lg:px-8 lg:py-6',
+            overlay && 'pointer-events-none select-none blur-sm',
+          )}
+        >
+          <div className="overflow-hidden rounded-[1rem] border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-950">
+            <div
+              className={twMerge(
+                compact ? 'px-4 py-4' : 'px-5 py-5 lg:px-6 lg:py-6',
+              )}
+            >
+              <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-cyan-600/80 dark:text-cyan-300/80">
+                Summary
+              </div>
+              <h2
+                className={twMerge(
+                  'mt-2 font-semibold tracking-[-0.04em] text-gray-950 dark:text-white',
+                  compact ? 'text-xl' : 'text-2xl',
+                )}
+              >
+                {summary.projectName}
+              </h2>
+              <p
+                className={twMerge(
+                  'mt-2 max-w-2xl text-gray-600 dark:text-gray-300',
+                  compact ? 'text-xs leading-5' : 'text-sm leading-6',
+                )}
+              >
+                {summary.headline}
+              </p>
+              <div className="mt-4 flex flex-wrap gap-2">
+                <SummaryBadge
+                  icon={Code}
+                  label={summary.framework === 'solid' ? 'Solid' : 'React'}
+                />
+                <SummaryBadge icon={Terminal} label={summary.packageManager} />
+                <SummaryBadge
+                  icon={Palette}
+                  label={summary.tailwind ? 'Tailwind' : 'Custom CSS'}
+                />
+                <SummaryBadge
+                  icon={Rocket}
+                  label={
+                    summary.deploymentFeatures.length > 0
+                      ? summary.deploymentFeatures
+                          .map((feature) => feature.name)
+                          .join(', ')
+                      : 'Portable'
+                  }
+                />
+                {summary.selectedTemplate ? (
+                  <SummaryBadge
+                    icon={FileText}
+                    label={summary.selectedTemplate}
+                  />
+                ) : null}
+                {summary.toolingFeatures.length > 0 ? (
+                  <SummaryBadge
+                    icon={Settings2}
+                    label={summary.toolingFeatures
+                      .map((feature) => feature.name)
+                      .join(', ')}
+                  />
+                ) : null}
+                {summary.exampleName ? (
+                  <SummaryBadge icon={BookOpen} label={summary.exampleName} />
+                ) : null}
+              </div>
+            </div>
+          </div>
+
+          <div className={twMerge('space-y-4')}>
+            <GeneratedPromptPreviewCard
+              prompt={summary.prompt}
+              title="Prompt Preview"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SummaryBadge({
+  icon: Icon,
+  label,
+}: {
+  icon: React.ComponentType<{ className?: string }>
+  label: string
+}) {
+  return (
+    <div className="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white/90 px-3 py-1.5 text-xs font-medium text-gray-600 shadow-sm dark:border-gray-800 dark:bg-gray-950/80 dark:text-gray-300">
+      <Icon className="h-3.5 w-3.5" />
+      {label}
+    </div>
+  )
+}
diff --git a/src/components/builder/BuilderWorkspace.tsx b/src/components/builder/BuilderWorkspace.tsx
new file mode 100644
index 000000000..c8b216bd6
--- /dev/null
+++ b/src/components/builder/BuilderWorkspace.tsx
@@ -0,0 +1,237 @@
+import { useCallback, useMemo, useState } from 'react'
+import { HelpCircle, X } from 'lucide-react'
+import { useBuilderStore } from './store'
+import { useBuilderUrl } from './useBuilderUrl'
+import { BuilderSummaryPanel, useBuilderSummaryData } from './BuilderSummary'
+import { ApplicationStarter } from '~/components/ApplicationStarter'
+import { useToast } from '~/components/ToastProvider'
+import type { ApplicationStarterResult } from '~/utils/application-starter'
+import { downloadBuilderResult } from './client-generation'
+
+export function BuilderWorkspace() {
+  useBuilderUrl()
+
+  const [showIntro, setShowIntro] = useState(false)
+  const [lastGeneratedBuilderSignature, setLastGeneratedBuilderSignature] =
+    useState<string | null>(null)
+  const [isPromptDirtySinceGenerate, setIsPromptDirtySinceGenerate] =
+    useState(false)
+  const [latestStarterResult, setLatestStarterResult] =
+    useState<ApplicationStarterResult | null>(null)
+  const features = useBuilderStore((state) => state.features)
+  const featureOptions = useBuilderStore((state) => state.featureOptions)
+  const framework = useBuilderStore((state) => state.framework)
+  const packageManager = useBuilderStore((state) => state.packageManager)
+  const projectName = useBuilderStore((state) => state.projectName)
+  const selectedTemplate = useBuilderStore((state) => state.selectedTemplate)
+  const tailwind = useBuilderStore((state) => state.tailwind)
+  const applyStarterRecipe = useBuilderStore(
+    (state) => state.applyStarterRecipe,
+  )
+  const summary = useBuilderSummaryData()
+  const { notify } = useToast()
+  const displayedSummary = useMemo(
+    () =>
+      latestStarterResult
+        ? {
+            ...summary,
+            cliCommand: latestStarterResult.cliCommand,
+            prompt: latestStarterResult.prompt,
+          }
+        : summary,
+    [latestStarterResult, summary],
+  )
+
+  const currentBuilderSignature = useMemo(
+    () =>
+      createBuilderSignature({
+        featureOptions,
+        features,
+        framework,
+        packageManager,
+        projectName,
+        selectedTemplate,
+        tailwind,
+      }),
+    [
+      featureOptions,
+      features,
+      framework,
+      packageManager,
+      projectName,
+      selectedTemplate,
+      tailwind,
+    ],
+  )
+
+  const summaryOverlay =
+    isPromptDirtySinceGenerate ||
+    (lastGeneratedBuilderSignature !== null &&
+      currentBuilderSignature !== lastGeneratedBuilderSignature)
+      ? {
+          title: 'Summary out of date',
+          description:
+            'The prompt or builder options changed. Copy the prompt again to refresh this summary.',
+        }
+      : null
+
+  const applyStarterResult = useCallback(
+    async (
+      result: ApplicationStarterResult,
+      options?: { silent?: boolean },
+    ) => {
+      if (result.recipe.target === 'router') {
+        if (!options?.silent) {
+          notify(
+            <div>
+              <div className="font-medium">Router-only stays prompt-first</div>
+              <div className="text-xs text-gray-500 dark:text-gray-400">
+                `/builder` remains a TanStack Start advanced surface.
+              </div>
+            </div>,
+          )
+        }
+
+        return false
+      }
+
+      await applyStarterRecipe(result.recipe)
+      setLastGeneratedBuilderSignature(
+        createBuilderSignatureFromStore(useBuilderStore.getState()),
+      )
+      setIsPromptDirtySinceGenerate(false)
+      return true
+    },
+    [applyStarterRecipe, notify],
+  )
+  const starterBuilderIntegration = useMemo(
+    () => ({
+      applyResult: applyStarterResult,
+      downloadResult: downloadBuilderResult,
+    }),
+    [applyStarterResult],
+  )
+
+  return (
+    <div className="h-full overflow-y-auto bg-gray-50 dark:bg-gray-950">
+      <div className="mx-auto grid w-full max-w-[1760px] gap-6 px-4 py-4 sm:px-6 xl:grid-cols-[minmax(0,1.35fr)_minmax(22rem,0.82fr)] 2xl:grid-cols-[minmax(0,1.5fr)_minmax(24rem,0.75fr)]">
+        <div className="min-w-0">
+          {showIntro ? (
+            <div className="mb-4 rounded-[28px] border border-cyan-200/60 bg-linear-to-br from-cyan-50 via-white to-white px-5 py-5 shadow-sm dark:border-cyan-900/60 dark:from-cyan-950/30 dark:via-gray-950 dark:to-gray-950 lg:px-7 lg:py-6">
+              <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-cyan-600/80 dark:text-cyan-300/80">
+                TanStack Builder
+              </div>
+              <h1 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-gray-950 dark:text-white lg:text-3xl">
+                Describe the app. Keep the tuning light.
+              </h1>
+              <p className="max-w-3xl text-sm leading-6 text-gray-600 dark:text-gray-300 lg:text-base">
+                <span className="mt-3 block">
+                  Start with the agentic builder flow. If you need a CLI-first,
+                  ZIP, or deployable approximation instead, open CLI mode and
+                  use the scaffoldable subset of the stack.
+                </span>
+              </p>
+            </div>
+          ) : null}
+
+          <ApplicationStarter
+            builderIntegration={starterBuilderIntegration}
+            className="rounded-[28px]"
+            context="builder"
+            enableHotkeys
+            headerAction={
+              <button
+                type="button"
+                onClick={() => setShowIntro((current) => !current)}
+                className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 shadow-sm transition-colors hover:border-cyan-300 hover:text-cyan-700 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-400 dark:hover:border-cyan-800 dark:hover:text-cyan-300"
+                aria-expanded={showIntro}
+                aria-label={
+                  showIntro ? 'Hide builder help' : 'Show builder help'
+                }
+                title={showIntro ? 'Hide builder help' : 'Show builder help'}
+              >
+                {showIntro ? (
+                  <X className="h-4 w-4" />
+                ) : (
+                  <HelpCircle className="h-4 w-4" />
+                )}
+              </button>
+            }
+            onDirtyStateChange={(dirty) => {
+              if (lastGeneratedBuilderSignature !== null) {
+                setIsPromptDirtySinceGenerate(dirty)
+              }
+            }}
+            onResolvedResult={setLatestStarterResult}
+            revealOptionsImmediately
+            showPromptPreview={false}
+            tone="cyan"
+          />
+        </div>
+
+        <div className="min-w-0 xl:sticky xl:top-0 xl:self-start">
+          <BuilderSummaryPanel
+            overlay={summaryOverlay}
+            summary={displayedSummary}
+            compact
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function createBuilderSignature({
+  featureOptions,
+  features,
+  framework,
+  packageManager,
+  projectName,
+  selectedTemplate,
+  tailwind,
+}: {
+  featureOptions: Record<string, Record<string, unknown>>
+  features: Array<string>
+  framework: string
+  packageManager: string
+  projectName: string
+  selectedTemplate: string | null
+  tailwind: boolean
+}) {
+  const normalizedFeatureOptions = Object.fromEntries(
+    Object.entries(featureOptions)
+      .sort(([left], [right]) => left.localeCompare(right))
+      .map(([featureId, options]) => [
+        featureId,
+        Object.fromEntries(
+          Object.entries(options).sort(([left], [right]) =>
+            left.localeCompare(right),
+          ),
+        ),
+      ]),
+  )
+
+  return JSON.stringify({
+    featureOptions: normalizedFeatureOptions,
+    features: [...features].sort(),
+    framework,
+    packageManager,
+    projectName,
+    selectedTemplate,
+    tailwind,
+  })
+}
+
+function createBuilderSignatureFromStore(
+  state: ReturnType<typeof useBuilderStore.getState>,
+) {
+  return createBuilderSignature({
+    featureOptions: state.featureOptions,
+    features: state.features,
+    framework: state.framework,
+    packageManager: state.packageManager,
+    projectName: state.projectName,
+    selectedTemplate: state.selectedTemplate,
+    tailwind: state.tailwind,
+  })
+}
diff --git a/src/components/builder/CustomAddonDialog.tsx b/src/components/builder/CustomAddonDialog.tsx
new file mode 100644
index 000000000..c7465cc9a
--- /dev/null
+++ b/src/components/builder/CustomAddonDialog.tsx
@@ -0,0 +1,247 @@
+/**
+ * Custom Integration Dialog
+ *
+ * Allows importing integrations from external URLs.
+ */
+
+import { useState } from 'react'
+import { Link } from '@tanstack/react-router'
+import { twMerge } from 'tailwind-merge'
+import {
+  Plus,
+  Loader2,
+  AlertCircle,
+  X,
+  ExternalLink,
+  HelpCircle,
+} from 'lucide-react'
+import { useBuilderStore, useTailwind } from './store'
+import type { IntegrationCompiled } from '~/builder/api'
+
+interface CustomAddonDialogProps {
+  onClose?: () => void
+}
+
+export function CustomAddonDialog({ onClose }: CustomAddonDialogProps) {
+  const [url, setUrl] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [preview, setPreview] = useState<IntegrationCompiled | null>(null)
+
+  const addCustomIntegration = useBuilderStore((s) => s.addCustomIntegration)
+  const tailwind = useTailwind()
+
+  const handleLoad = async () => {
+    if (!url.trim()) {
+      setError('Please enter a URL')
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+    setPreview(null)
+
+    try {
+      const response = await fetch(
+        `/api/builder/load-remote-addon?url=${encodeURIComponent(url)}`,
+      )
+      const data = await response.json()
+
+      if (data.error) {
+        setError(data.error)
+      } else if (data.integration) {
+        setPreview(data.integration)
+      }
+    } catch {
+      setError('Failed to load integration')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleAdd = () => {
+    if (!preview) return
+
+    // Check Tailwind requirement
+    if (preview.requiresTailwind && !tailwind) {
+      setError('This integration requires Tailwind CSS. Enable Tailwind first.')
+      return
+    }
+
+    addCustomIntegration(preview)
+    onClose?.()
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !isLoading) {
+      if (preview) {
+        handleAdd()
+      } else {
+        handleLoad()
+      }
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* URL Input */}
+      <div>
+        <label
+          htmlFor="custom-addon-url"
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+        >
+          Integration URL
+        </label>
+        <div className="flex gap-2">
+          <input
+            id="custom-addon-url"
+            type="url"
+            value={url}
+            onChange={(e) => {
+              setUrl(e.target.value)
+              setError(null)
+              setPreview(null)
+            }}
+            onKeyDown={handleKeyDown}
+            placeholder="https://example.com/my-integration.json"
+            className="flex-1 px-3 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500"
+            disabled={isLoading}
+          />
+          <button
+            onClick={handleLoad}
+            disabled={isLoading || !url.trim()}
+            className={twMerge(
+              'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+              isLoading || !url.trim()
+                ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 cursor-not-allowed'
+                : 'bg-cyan-500 text-white hover:bg-cyan-600',
+            )}
+          >
+            {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Load'}
+          </button>
+        </div>
+        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+          Enter the URL to an integration JSON file (e.g., from GitHub raw
+          content)
+        </p>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-700 dark:text-red-400">
+          <AlertCircle className="w-4 h-4 mt-0.5 shrink-0" />
+          <span>{error}</span>
+        </div>
+      )}
+
+      {/* Preview */}
+      {preview && (
+        <div className="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg space-y-3">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-gray-100">
+                {preview.name}
+              </h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                {preview.description}
+              </p>
+            </div>
+            {preview.link && (
+              <a
+                href={preview.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                <ExternalLink className="w-4 h-4" />
+              </a>
+            )}
+          </div>
+
+          {/* Metadata */}
+          <div className="flex flex-wrap gap-2 text-xs">
+            {preview.author && (
+              <span className="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded">
+                By {preview.author}
+              </span>
+            )}
+            {preview.version && (
+              <span className="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded">
+                v{preview.version}
+              </span>
+            )}
+            {preview.category && (
+              <span className="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded">
+                {preview.category}
+              </span>
+            )}
+            {preview.requiresTailwind && (
+              <span className="px-2 py-1 bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-400 rounded">
+                Requires Tailwind
+              </span>
+            )}
+          </div>
+
+          {/* Files count */}
+          <div className="text-xs text-gray-500 dark:text-gray-400">
+            {Object.keys(preview.files).length} files included
+          </div>
+
+          {/* Add button */}
+          <button
+            onClick={handleAdd}
+            className="w-full px-4 py-2 text-sm font-medium bg-cyan-500 text-white rounded-lg hover:bg-cyan-600 transition-colors"
+          >
+            Add to Project
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Button to open custom integration dialog in a modal-like expandable section
+ */
+export function CustomAddonButton() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div className="border-t border-gray-200 dark:border-gray-700 pt-2 mt-2">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={twMerge(
+          'w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded-lg border border-dashed transition-colors',
+          isOpen
+            ? 'border-cyan-500 bg-cyan-50 dark:bg-cyan-900/20 text-cyan-700 dark:text-cyan-400'
+            : 'border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-gray-400 dark:hover:border-gray-500',
+        )}
+      >
+        {isOpen ? (
+          <>
+            <X className="w-4 h-4" />
+            Cancel
+          </>
+        ) : (
+          <>
+            <Plus className="w-4 h-4" />
+            Custom Integration
+            <Link
+              to="/builder/docs"
+              onClick={(e) => e.stopPropagation()}
+              className="p-0.5 hover:text-blue-600 dark:hover:text-cyan-400"
+            >
+              <HelpCircle className="w-3.5 h-3.5" />
+            </Link>
+          </>
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="mt-3 p-3 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg">
+          <CustomAddonDialog onClose={() => setIsOpen(false)} />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/builder/CustomTemplateDialog.tsx b/src/components/builder/CustomTemplateDialog.tsx
new file mode 100644
index 000000000..2aa1c417c
--- /dev/null
+++ b/src/components/builder/CustomTemplateDialog.tsx
@@ -0,0 +1,341 @@
+/**
+ * Custom Template Dialog
+ *
+ * Allows importing project templates from external URLs.
+ */
+
+import { useState } from 'react'
+import { Link } from '@tanstack/react-router'
+import { twMerge } from 'tailwind-merge'
+import {
+  Loader2,
+  AlertCircle,
+  Link as LinkIcon,
+  X,
+  HelpCircle,
+} from 'lucide-react'
+import { useBuilderStore, useCustomTemplate } from './store'
+import type { CustomTemplateCompiled } from '~/builder/api'
+
+interface CustomTemplateDialogProps {
+  onClose?: () => void
+}
+
+export function CustomTemplateDialog({ onClose }: CustomTemplateDialogProps) {
+  const [url, setUrl] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [preview, setPreview] = useState<CustomTemplateCompiled | null>(null)
+
+  const setCustomTemplate = useBuilderStore((s) => s.setCustomTemplate)
+
+  const handleLoad = async () => {
+    if (!url.trim()) {
+      setError('Please enter a URL')
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+    setPreview(null)
+
+    try {
+      const response = await fetch(
+        `/api/builder/load-remote-template?url=${encodeURIComponent(url)}`,
+      )
+      const data = await response.json()
+
+      if (data.error) {
+        setError(data.error)
+      } else if (data.template) {
+        setPreview(data.template)
+      }
+    } catch {
+      setError('Failed to load template')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleApply = () => {
+    if (!preview) return
+    setCustomTemplate(preview)
+    onClose?.()
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !isLoading) {
+      if (preview) {
+        handleApply()
+      } else {
+        handleLoad()
+      }
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* URL Input */}
+      <div>
+        <label
+          htmlFor="custom-template-url"
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+        >
+          Template URL
+        </label>
+        <div className="flex gap-2">
+          <input
+            id="custom-template-url"
+            type="url"
+            value={url}
+            onChange={(e) => {
+              setUrl(e.target.value)
+              setError(null)
+              setPreview(null)
+            }}
+            onKeyDown={handleKeyDown}
+            placeholder="https://example.com/my-template.json"
+            className="flex-1 px-3 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500"
+            disabled={isLoading}
+          />
+          <button
+            onClick={handleLoad}
+            disabled={isLoading || !url.trim()}
+            className={twMerge(
+              'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+              isLoading || !url.trim()
+                ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 cursor-not-allowed'
+                : 'bg-cyan-500 text-white hover:bg-cyan-600',
+            )}
+          >
+            {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Load'}
+          </button>
+        </div>
+        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+          Enter the URL to a template JSON file
+        </p>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-700 dark:text-red-400">
+          <AlertCircle className="w-4 h-4 mt-0.5 shrink-0" />
+          <span>{error}</span>
+        </div>
+      )}
+
+      {/* Preview */}
+      {preview && (
+        <div className="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg space-y-3">
+          <div>
+            <h3 className="font-medium text-gray-900 dark:text-gray-100">
+              {preview.name}
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              {preview.description}
+            </p>
+          </div>
+
+          {/* Metadata */}
+          <div className="flex flex-wrap gap-2 text-xs">
+            {preview.tailwind && (
+              <span className="px-2 py-1 bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-400 rounded">
+                Tailwind
+              </span>
+            )}
+            {preview.typescript && (
+              <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 rounded">
+                TypeScript
+              </span>
+            )}
+            {preview.dependsOn && preview.dependsOn.length > 0 && (
+              <span className="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded">
+                {preview.dependsOn.length} add-ons
+              </span>
+            )}
+          </div>
+
+          {/* Apply button */}
+          <button
+            onClick={handleApply}
+            className="w-full px-4 py-2 text-sm font-medium bg-cyan-500 text-white rounded-lg hover:bg-cyan-600 transition-colors"
+          >
+            Use This Template
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Display and manage custom template selection
+ */
+export function CustomTemplateSection() {
+  const [isOpen, setIsOpen] = useState(false)
+  const customTemplate = useCustomTemplate()
+  const setCustomTemplate = useBuilderStore((s) => s.setCustomTemplate)
+
+  if (customTemplate) {
+    return (
+      <div className="p-3 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex items-center gap-2">
+            <LinkIcon className="w-4 h-4 text-purple-600 dark:text-purple-400" />
+            <div>
+              <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                {customTemplate.name}
+              </span>
+              <span className="block text-xs text-gray-500 dark:text-gray-400">
+                Custom Template
+              </span>
+            </div>
+          </div>
+          <button
+            onClick={() => setCustomTemplate(null)}
+            className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="border-t border-gray-200 dark:border-gray-700 pt-2 mt-2">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={twMerge(
+          'w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded-lg border border-dashed transition-colors',
+          isOpen
+            ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-400'
+            : 'border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-gray-400 dark:hover:border-gray-500',
+        )}
+      >
+        {isOpen ? (
+          <>
+            <X className="w-4 h-4" />
+            Cancel
+          </>
+        ) : (
+          <>
+            <LinkIcon className="w-4 h-4" />
+            Custom Template
+            <Link
+              to="/builder/docs"
+              onClick={(e) => e.stopPropagation()}
+              className="p-0.5 hover:text-blue-600 dark:hover:text-cyan-400"
+            >
+              <HelpCircle className="w-3.5 h-3.5" />
+            </Link>
+          </>
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="mt-3 p-3 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg">
+          <CustomTemplateDialog onClose={() => setIsOpen(false)} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Custom template item for use in template grid
+ */
+export function CustomTemplateItem({
+  isExpanded,
+  onToggle,
+}: {
+  isExpanded: boolean
+  onToggle: () => void
+}) {
+  const customTemplate = useCustomTemplate()
+  const setCustomTemplate = useBuilderStore((s) => s.setCustomTemplate)
+
+  if (customTemplate) {
+    return (
+      <div className="col-span-full">
+        <div className="p-3 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-purple-100 dark:bg-purple-900/50 text-purple-600 dark:text-purple-400">
+                <LinkIcon className="w-4 h-4" />
+              </div>
+              <div>
+                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  {customTemplate.name}
+                </span>
+                <span className="block text-xs text-gray-500 dark:text-gray-400">
+                  Custom Template
+                </span>
+              </div>
+            </div>
+            <button
+              onClick={() => setCustomTemplate(null)}
+              className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <button
+        onClick={onToggle}
+        className={twMerge(
+          'p-3 rounded-lg border text-left transition-all flex items-start gap-2 border-dashed',
+          isExpanded
+            ? 'bg-purple-50 dark:bg-purple-900/20 border-purple-500 dark:border-purple-500'
+            : 'bg-white dark:bg-gray-800/50 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800',
+        )}
+      >
+        <div
+          className={twMerge(
+            'w-8 h-8 rounded-lg flex items-center justify-center shrink-0',
+            isExpanded
+              ? 'bg-purple-100 dark:bg-purple-900/50 text-purple-600 dark:text-purple-400'
+              : 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400',
+          )}
+        >
+          <LinkIcon className="w-4 h-4" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span
+              className={twMerge(
+                'font-medium text-sm',
+                isExpanded
+                  ? 'text-purple-700 dark:text-purple-300'
+                  : 'text-gray-900 dark:text-gray-100',
+              )}
+            >
+              Custom Template
+            </span>
+            <Link
+              to="/builder/docs"
+              onClick={(e) => e.stopPropagation()}
+              className="p-0.5 text-gray-400 hover:text-blue-600 dark:hover:text-cyan-400"
+            >
+              <HelpCircle className="w-3.5 h-3.5" />
+            </Link>
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 line-clamp-1">
+            Import from URL
+          </div>
+        </div>
+      </button>
+      {isExpanded && (
+        <div className="col-span-full p-3 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg">
+          <CustomTemplateDialog onClose={onToggle} />
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/src/components/builder/DeployDialog.tsx b/src/components/builder/DeployDialog.tsx
new file mode 100644
index 000000000..f52a6cd59
--- /dev/null
+++ b/src/components/builder/DeployDialog.tsx
@@ -0,0 +1,582 @@
+/**
+ * Deploy Dialog Component
+ *
+ * Dialog for deploying a project to GitHub and then to a cloud provider.
+ */
+
+import { useState, useEffect, useCallback } from 'react'
+import {
+  Loader2,
+  ExternalLink,
+  AlertCircle,
+  Check,
+  Lock,
+  Globe,
+  Rocket,
+} from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { useAsyncDebouncer } from '@tanstack/react-pacer'
+import { Button, GitHub } from '~/ui'
+import { useDeployAuth } from './useDeployAuth'
+import {
+  useFeatures,
+  useFeatureOptions,
+  useFramework,
+  usePackageManager,
+  useTailwind,
+  useProjectName,
+} from './store'
+import {
+  type DeployProvider,
+  type DeployState,
+  type RepoNameStatus,
+  PROVIDER_INFO,
+  checkRepoNameAvailability,
+  validateRepoNameFormat,
+} from '../deploy/shared'
+import {
+  getRecipeBuilderFeatures,
+  type ApplicationStarterRecipe,
+} from '~/utils/application-starter'
+import type { BuilderAction } from '~/utils/analytics'
+import { compileBuilderProject } from './client-generation'
+
+interface DeployDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  provider?: DeployProvider | null
+  starterRecipe?: ApplicationStarterRecipe | null
+  /**
+   * Fires `builder_activated` events with the parent's session context
+   * (mode_used, idea_used). Optional so the dialog can render outside the
+   * builder flow without an analytics trail.
+   */
+  onTrackActivation?: (params: {
+    action: BuilderAction
+    surface: 'deploy_dialog'
+    provider?: string
+    automatic?: boolean
+  }) => void
+}
+
+export function DeployDialog({
+  isOpen,
+  onClose,
+  provider,
+  starterRecipe,
+  onTrackActivation,
+}: DeployDialogProps) {
+  const auth = useDeployAuth()
+  const builderFeatures = useFeatures()
+  const builderFeatureOptions = useFeatureOptions()
+  const builderFramework = useFramework()
+  const builderPackageManager = usePackageManager()
+  const builderTailwind = useTailwind()
+  const builderProjectName = useProjectName()
+
+  const features = starterRecipe
+    ? getRecipeBuilderFeatures(starterRecipe)
+    : builderFeatures
+  const featureOptions = starterRecipe?.featureOptions ?? builderFeatureOptions
+  const framework = starterRecipe?.framework ?? builderFramework
+  const packageManager = starterRecipe?.packageManager ?? builderPackageManager
+  const tailwind = starterRecipe?.tailwind ?? builderTailwind
+  const projectName = starterRecipe?.projectName ?? builderProjectName
+
+  const [state, setState] = useState<DeployState>({ step: 'auth-check' })
+  const [repoName, setRepoName] = useState(projectName)
+  const [isPrivate, setIsPrivate] = useState(false)
+  const [countdown, setCountdown] = useState<number | null>(null)
+  const [repoNameStatus, setRepoNameStatus] = useState<RepoNameStatus>('idle')
+  const [repoNameError, setRepoNameError] = useState<string | null>(null)
+
+  const providerInfo = provider ? PROVIDER_INFO[provider] : null
+
+  const trackDialogLinkClick = useCallback(
+    (
+      action: 'repo' | 'provider_auto_redirect' | 'provider_manual_redirect',
+    ) => {
+      const builderAction: BuilderAction =
+        action === 'repo'
+          ? 'open_repo'
+          : action === 'provider_auto_redirect'
+            ? 'provider_redirect_auto'
+            : 'provider_redirect_manual'
+      onTrackActivation?.({
+        action: builderAction,
+        surface: 'deploy_dialog',
+        provider: provider ?? undefined,
+        automatic: action === 'provider_auto_redirect',
+      })
+    },
+    [onTrackActivation, provider],
+  )
+
+  // Debounced repo name availability check
+  const nameCheckDebouncer = useAsyncDebouncer(
+    async (name: string) => {
+      const result = await checkRepoNameAvailability(name)
+      if (result.available) {
+        setRepoNameStatus('available')
+        setRepoNameError(null)
+      } else {
+        setRepoNameStatus('taken')
+        setRepoNameError('Repository name already exists')
+      }
+    },
+    {
+      wait: 500,
+      onError: () => {
+        // On error, reset to idle (don't block the user)
+        setRepoNameStatus('idle')
+        setRepoNameError(null)
+      },
+    },
+  )
+
+  // Update repo name when project name changes
+  useEffect(() => {
+    setRepoName(projectName)
+  }, [projectName])
+
+  // Validate and check repo name
+  useEffect(() => {
+    // Reset error
+    setRepoNameError(null)
+
+    // Validate format first
+    const validation = validateRepoNameFormat(repoName)
+    if (!validation.valid) {
+      setRepoNameStatus(validation.error ? 'invalid' : 'idle')
+      setRepoNameError(validation.error ?? null)
+      return
+    }
+
+    // Only check availability if authenticated with repo scope
+    if (!auth.hasRepoScope) {
+      setRepoNameStatus('idle')
+      return
+    }
+
+    setRepoNameStatus('checking')
+    nameCheckDebouncer.maybeExecute(repoName)
+  }, [repoName, auth.hasRepoScope]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Refresh auth state when dialog opens
+  useEffect(() => {
+    if (isOpen) {
+      auth.refresh()
+    }
+  }, [isOpen]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Check auth state when dialog opens or auth changes
+  useEffect(() => {
+    if (!isOpen) {
+      setState({ step: 'auth-check' })
+      setCountdown(null)
+      return
+    }
+
+    if (auth.isLoading) {
+      setState({ step: 'auth-check' })
+      return
+    }
+
+    if (!auth.authenticated || !auth.hasGitHubAccount || !auth.hasRepoScope) {
+      setState({ step: 'needs-auth' })
+      return
+    }
+
+    setState({ step: 'form' })
+  }, [
+    isOpen,
+    auth.isLoading,
+    auth.authenticated,
+    auth.hasGitHubAccount,
+    auth.hasRepoScope,
+  ])
+
+  // Auto-redirect countdown (only when there's a provider)
+  useEffect(() => {
+    if (state.step !== 'success' || countdown === null || !providerInfo) return
+
+    if (countdown <= 0) {
+      // Redirect to provider deploy page
+      setCountdown(null) // Prevent double-open
+      const deployUrl = providerInfo.deployUrl(state.owner, state.repoName)
+      trackDialogLinkClick('provider_auto_redirect')
+      window.open(deployUrl, '_blank')
+      return
+    }
+
+    const timer = setTimeout(() => setCountdown(countdown - 1), 1000)
+    return () => clearTimeout(timer)
+  }, [countdown, onClose, providerInfo, state, trackDialogLinkClick])
+
+  const handleDeploy = useCallback(async () => {
+    setState({ step: 'deploying', message: 'Generating project...' })
+
+    try {
+      const files = await compileBuilderProject({
+        name: projectName,
+        framework,
+        packageManager,
+        tailwind,
+        features,
+        featureOptions,
+      })
+
+      setState({ step: 'deploying', message: 'Creating repository...' })
+
+      const response = await fetch('/api/builder/deploy/github', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          repoName,
+          isPrivate,
+          projectName,
+          framework,
+          packageManager,
+          features,
+          featureOptions,
+          tailwind,
+          files,
+        }),
+      })
+
+      const data = await response.json()
+
+      if (!data.success) {
+        setState({
+          step: 'error',
+          message: data.error ?? 'Deployment failed',
+          code: data.code,
+        })
+        return
+      }
+
+      setState({
+        step: 'success',
+        repoUrl: data.repoUrl,
+        owner: data.owner,
+        repoName: data.repoName,
+      })
+      // Only start countdown if there's a provider to redirect to
+      if (providerInfo) {
+        setCountdown(3)
+      }
+    } catch (error) {
+      setState({
+        step: 'error',
+        message: error instanceof Error ? error.message : 'Deployment failed',
+      })
+    }
+  }, [
+    repoName,
+    isPrivate,
+    projectName,
+    framework,
+    packageManager,
+    features,
+    featureOptions,
+    tailwind,
+    providerInfo,
+  ])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+        aria-label="Close dialog"
+      />
+
+      {/* Dialog */}
+      <div className="relative w-full max-w-md bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+        {/* Header */}
+        <div
+          className="px-6 py-4 border-b border-gray-200 dark:border-gray-700"
+          style={
+            providerInfo
+              ? { backgroundColor: `${providerInfo.color}10` }
+              : undefined
+          }
+        >
+          <div className="flex items-center gap-3">
+            <div
+              className={twMerge(
+                'w-10 h-10 rounded-lg flex items-center justify-center',
+                !providerInfo && 'bg-gray-800',
+              )}
+              style={
+                providerInfo
+                  ? { backgroundColor: providerInfo.color }
+                  : undefined
+              }
+            >
+              {providerInfo ? (
+                <Rocket className="w-5 h-5 text-white" />
+              ) : (
+                <GitHub className="w-5 h-5 text-white" />
+              )}
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                {providerInfo
+                  ? `Deploy to ${providerInfo.name}`
+                  : 'Create GitHub Repository'}
+              </h2>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                {providerInfo
+                  ? 'Create a GitHub repo and deploy'
+                  : 'Push your project to GitHub'}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6">
+          {state.step === 'auth-check' && (
+            <div className="flex flex-col items-center justify-center py-8">
+              <Loader2 className="w-8 h-8 animate-spin text-gray-400" />
+              <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
+                Checking authentication...
+              </p>
+            </div>
+          )}
+
+          {state.step === 'needs-auth' && (
+            <div className="flex flex-col items-center text-center py-4">
+              <div className="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">
+                <GitHub className="w-8 h-8 text-gray-600 dark:text-gray-400" />
+              </div>
+              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+                GitHub Authorization Required
+              </h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+                To deploy, we need permission to create repositories on your
+                GitHub account.
+              </p>
+              <Button
+                variant="primary"
+                onClick={auth.redirectToGitHubAuth}
+                className="gap-2"
+              >
+                <GitHub className="w-4 h-4" />
+                Connect GitHub
+              </Button>
+            </div>
+          )}
+
+          {state.step === 'form' && (
+            <div className="space-y-4">
+              <div>
+                <label
+                  htmlFor="repo-name"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
+                >
+                  Repository Name
+                </label>
+                <div className="relative">
+                  <input
+                    id="repo-name"
+                    type="text"
+                    value={repoName}
+                    onChange={(e) => setRepoName(e.target.value)}
+                    placeholder="my-tanstack-app"
+                    className={twMerge(
+                      'w-full px-3 py-2 pr-9 text-sm bg-white dark:bg-gray-800 border rounded-lg focus:outline-none focus:ring-2',
+                      repoNameStatus === 'taken' || repoNameStatus === 'invalid'
+                        ? 'border-red-400 dark:border-red-500 focus:ring-red-500'
+                        : repoNameStatus === 'available'
+                          ? 'border-green-400 dark:border-green-500 focus:ring-green-500'
+                          : 'border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-cyan-500',
+                    )}
+                  />
+                  <div className="absolute right-2.5 top-1/2 -translate-y-1/2">
+                    {repoNameStatus === 'checking' && (
+                      <Loader2 className="w-4 h-4 animate-spin text-gray-400" />
+                    )}
+                    {repoNameStatus === 'available' && (
+                      <Check className="w-4 h-4 text-green-500" />
+                    )}
+                    {(repoNameStatus === 'taken' ||
+                      repoNameStatus === 'invalid') && (
+                      <AlertCircle className="w-4 h-4 text-red-500" />
+                    )}
+                  </div>
+                </div>
+                {repoNameError && (
+                  <p className="mt-1 text-xs text-red-500">{repoNameError}</p>
+                )}
+              </div>
+
+              <div>
+                <span className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+                  Visibility
+                </span>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => setIsPrivate(false)}
+                    className={twMerge(
+                      'flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border text-sm font-medium transition-colors',
+                      !isPrivate
+                        ? 'bg-blue-50 dark:bg-cyan-900/30 border-blue-500 dark:border-cyan-500 text-blue-700 dark:text-cyan-300'
+                        : 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700',
+                    )}
+                  >
+                    <Globe className="w-4 h-4" />
+                    Public
+                  </button>
+                  <button
+                    onClick={() => setIsPrivate(true)}
+                    className={twMerge(
+                      'flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border text-sm font-medium transition-colors',
+                      isPrivate
+                        ? 'bg-blue-50 dark:bg-cyan-900/30 border-blue-500 dark:border-cyan-500 text-blue-700 dark:text-cyan-300'
+                        : 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700',
+                    )}
+                  >
+                    <Lock className="w-4 h-4" />
+                    Private
+                  </button>
+                </div>
+              </div>
+
+              {features.length > 0 && (
+                <div className="text-xs text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
+                  <span className="font-medium">Integrations: </span>
+                  {features.join(', ')}
+                </div>
+              )}
+
+              <div className="flex gap-3 pt-2">
+                <Button
+                  variant="secondary"
+                  onClick={onClose}
+                  className="flex-1"
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  onClick={handleDeploy}
+                  disabled={
+                    !repoName.trim() ||
+                    repoNameStatus === 'taken' ||
+                    repoNameStatus === 'invalid' ||
+                    repoNameStatus === 'checking'
+                  }
+                  className="flex-1 gap-2"
+                >
+                  <GitHub className="w-4 h-4" />
+                  {providerInfo ? 'Create & Deploy' : 'Create Repository'}
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {state.step === 'deploying' && (
+            <div className="flex flex-col items-center justify-center py-8">
+              <Loader2 className="w-8 h-8 animate-spin text-blue-500 dark:text-cyan-400" />
+              <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
+                {state.message}
+              </p>
+            </div>
+          )}
+
+          {state.step === 'success' && (
+            <div className="flex flex-col items-center text-center py-4">
+              <div className="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mb-4">
+                <Check className="w-8 h-8 text-green-600 dark:text-green-400" />
+              </div>
+              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+                Repository Created!
+              </h3>
+              <a
+                href={state.repoUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() => {
+                  trackDialogLinkClick('repo')
+                }}
+                className="text-sm text-blue-600 dark:text-cyan-400 hover:underline flex items-center gap-1 mb-4"
+              >
+                {state.owner}/{state.repoName}
+                <ExternalLink className="w-3 h-3" />
+              </a>
+              {providerInfo ? (
+                <>
+                  {countdown !== null && countdown > 0 && (
+                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+                      Redirecting to {providerInfo.name} in {countdown}s...
+                    </p>
+                  )}
+                  {(() => {
+                    const deployUrl = providerInfo.deployUrl(
+                      state.owner,
+                      state.repoName,
+                    )
+
+                    return (
+                      <Button
+                        as="a"
+                        variant="primary"
+                        href={deployUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={() => {
+                          setCountdown(null) // Cancel auto-redirect
+                          trackDialogLinkClick('provider_manual_redirect')
+                        }}
+                        className="gap-2"
+                        style={{ backgroundColor: providerInfo.color }}
+                      >
+                        <Rocket className="w-4 h-4" />
+                        Deploy Now
+                      </Button>
+                    )
+                  })()}
+                </>
+              ) : (
+                <Button variant="secondary" onClick={onClose}>
+                  Done
+                </Button>
+              )}
+            </div>
+          )}
+
+          {state.step === 'error' && (
+            <div className="flex flex-col items-center text-center py-4">
+              <div className="w-16 h-16 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-4">
+                <AlertCircle className="w-8 h-8 text-red-600 dark:text-red-400" />
+              </div>
+              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+                Deployment Failed
+              </h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+                {state.message}
+              </p>
+              <div className="flex gap-3">
+                <Button variant="secondary" onClick={onClose}>
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  onClick={() => setState({ step: 'form' })}
+                >
+                  Try Again
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/builder/FeaturePicker.tsx b/src/components/builder/FeaturePicker.tsx
new file mode 100644
index 000000000..883c7e48f
--- /dev/null
+++ b/src/components/builder/FeaturePicker.tsx
@@ -0,0 +1,647 @@
+/**
+ * Feature Picker (v2)
+ *
+ * Component for selecting features in the builder.
+ * Shows Framework (locked) -> Styling (Tailwind toggle) -> Add-ons hierarchy.
+ * Grouped by category with conflict/dependency handling.
+ * Features partner badges, external links, and collapsible sections.
+ * Partner features use the shared partner placement policy within categories.
+ */
+
+import { useState, useMemo } from 'react'
+import { twMerge } from 'tailwind-merge'
+import { Star, ExternalLink, ChevronDown, Sparkles, X } from 'lucide-react'
+import { matchSorter } from 'match-sorter'
+import {
+  useBuilderStore,
+  useFeatureState,
+  useAvailableFeatures,
+  useAvailableExamples,
+  useSelectedExample,
+  useIntegrationSearch,
+} from './store'
+import { partners, type Partner } from '~/utils/partners'
+import {
+  getPartnerPlacementContext,
+  getPartnersForPlacement,
+} from '~/utils/partner-placement'
+import { Tooltip } from '~/ui/Tooltip'
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from '~/components/Collapsible'
+import type { FeatureId, FeatureInfo } from '~/builder/api'
+
+type FeatureCategory =
+  | 'tanstack'
+  | 'database'
+  | 'orm'
+  | 'auth'
+  | 'deploy'
+  | 'tooling'
+  | 'monitoring'
+  | 'api'
+  | 'i18n'
+  | 'cms'
+  | 'ecommerce'
+  | 'other'
+
+const builderFeaturePlacementContext = getPartnerPlacementContext({
+  orderStrategy: 'contextual-recommendation',
+  surface: 'builder_feature_picker',
+})
+
+const partnersById = new Map(
+  partners
+    .filter((partner) => partner.status === 'active')
+    .map((partner) => [partner.id, partner]),
+)
+
+const CATEGORY_INFO: Record<
+  FeatureCategory,
+  { label: string; description: string; color: string }
+> = {
+  tanstack: {
+    label: 'TanStack',
+    description: 'Official TanStack libraries',
+    color: '#00D1B2', // TanStack cyan/teal
+  },
+  database: {
+    label: 'Database',
+    description: 'Database providers and real-time backends',
+    color: '#3B82F6', // Blue
+  },
+  orm: {
+    label: 'ORM',
+    description: 'Object-relational mapping and query builders',
+    color: '#6366F1', // Indigo
+  },
+  auth: {
+    label: 'Authentication',
+    description: 'User authentication and authorization',
+    color: '#8B5CF6', // Purple
+  },
+  deploy: {
+    label: 'Deployment',
+    description: 'Hosting and deployment platforms',
+    color: '#EC4899', // Pink
+  },
+  monitoring: {
+    label: 'Monitoring',
+    description: 'Observability, error tracking, and performance monitoring',
+    color: '#F59E0B', // Amber
+  },
+  cms: {
+    label: 'CMS',
+    description: 'Content management systems',
+    color: '#10B981', // Emerald
+  },
+  ecommerce: {
+    label: 'Ecommerce',
+    description: 'Storefronts, checkout, and product catalogs',
+    color: '#5A31F4', // Shopify purple
+  },
+  tooling: {
+    label: 'Tooling',
+    description: 'Development tools, linting, and utilities',
+    color: '#F472B6', // Pink-400
+  },
+  api: {
+    label: 'API',
+    description: 'Type-safe APIs and RPC frameworks',
+    color: '#EF4444', // Red
+  },
+  i18n: {
+    label: 'i18n',
+    description: 'Internationalization and localization',
+    color: '#14B8A6', // Teal
+  },
+  other: {
+    label: 'Other',
+    description: 'Additional tools and integrations',
+    color: '#A78BFA', // Violet-400
+  },
+}
+
+const CATEGORY_ORDER: Array<FeatureCategory> = [
+  'tanstack',
+  'deploy',
+  'database',
+  'orm',
+  'auth',
+  'monitoring',
+  'api',
+  'i18n',
+  'cms',
+  'ecommerce',
+  'tooling',
+  'other',
+]
+
+// Custom addon color used in store.ts addCustomAddon
+const CUSTOM_ADDON_COLOR = '#8B5CF6'
+
+function getFeaturePartner(feature: FeatureInfo) {
+  if (!feature.partnerId) {
+    return undefined
+  }
+
+  return partnersById.get(feature.partnerId)
+}
+
+function getFeaturePartnerPlacementRank(
+  feature: FeatureInfo,
+  partnerRankById: Map<string, number>,
+) {
+  if (!feature.partnerId) {
+    return undefined
+  }
+
+  return partnerRankById.get(feature.partnerId)
+}
+
+function getPartnerPlacementRankById(features: Array<FeatureInfo>) {
+  const featurePartners = Array<Partner>()
+  const featurePartnerIds = new Set<string>()
+
+  for (const feature of features) {
+    const partner = getFeaturePartner(feature)
+
+    if (!partner || featurePartnerIds.has(partner.id)) {
+      continue
+    }
+
+    featurePartnerIds.add(partner.id)
+    featurePartners.push(partner)
+  }
+
+  return new Map(
+    getPartnersForPlacement(
+      featurePartners,
+      builderFeaturePlacementContext,
+    ).map((partner, index) => [partner.id, index]),
+  )
+}
+
+// Sort features: partners first by shared placement policy, then non-partners, custom addons last
+function sortFeaturesByPartnerPlacement(
+  features: Array<FeatureInfo>,
+): Array<FeatureInfo> {
+  const partnerRankById = getPartnerPlacementRankById(features)
+
+  return features
+    .map((feature, index) => ({ feature, index }))
+    .sort((left, right) => {
+      // Custom addons always last
+      const leftIsCustom = left.feature.color === CUSTOM_ADDON_COLOR
+      const rightIsCustom = right.feature.color === CUSTOM_ADDON_COLOR
+
+      if (leftIsCustom && !rightIsCustom) return 1
+      if (!leftIsCustom && rightIsCustom) return -1
+
+      const leftPartnerRank = getFeaturePartnerPlacementRank(
+        left.feature,
+        partnerRankById,
+      )
+      const rightPartnerRank = getFeaturePartnerPlacementRank(
+        right.feature,
+        partnerRankById,
+      )
+
+      if (leftPartnerRank !== undefined && rightPartnerRank !== undefined) {
+        const partnerComparison = leftPartnerRank - rightPartnerRank
+
+        if (partnerComparison !== 0) {
+          return partnerComparison
+        }
+
+        return left.index - right.index
+      }
+
+      if (leftPartnerRank !== undefined) return -1
+      if (rightPartnerRank !== undefined) return 1
+
+      return left.index - right.index
+    })
+    .map(({ feature }) => feature)
+}
+
+export function FeaturePicker() {
+  const availableFeatures = useAvailableFeatures()
+  const search = useIntegrationSearch()
+
+  // Filter features by search
+  const filteredFeatures = useMemo(() => {
+    if (!search.trim()) return availableFeatures
+    return matchSorter(availableFeatures, search, {
+      keys: ['name', 'description', 'category'],
+    })
+  }, [availableFeatures, search])
+
+  // Separate partner features for "Featured" section, sorted by placement policy
+  const partnerFeatures = useMemo(
+    () =>
+      sortFeaturesByPartnerPlacement(
+        filteredFeatures.filter((f) => f.partnerId),
+      ),
+    [filteredFeatures],
+  )
+
+  // Group features by category, with partners sorted first by placement policy
+  const featuresByCategory = useMemo(() => {
+    return CATEGORY_ORDER.reduce(
+      (acc, category) => {
+        const categoryFeatures = filteredFeatures.filter(
+          (f) => f.category === category,
+        )
+        acc[category] = sortFeaturesByPartnerPlacement(categoryFeatures)
+        return acc
+      },
+      {} as Record<FeatureCategory, Array<FeatureInfo>>,
+    )
+  }, [filteredFeatures])
+
+  const isSearching = search.trim().length > 0
+
+  return (
+    <div className="p-4 space-y-2">
+      {/* Example Picker */}
+      {!isSearching && <ExamplePicker />}
+
+      {/* Featured section */}
+      {partnerFeatures.length > 0 && !isSearching && (
+        <FeatureSection
+          title="Featured"
+          description="Popular integrations from our partners"
+          features={partnerFeatures}
+          categoryColor="#F59E0B"
+          defaultOpen
+        />
+      )}
+
+      {/* Category sections */}
+      {CATEGORY_ORDER.map((category) => {
+        const features = featuresByCategory[category]
+        if (!features || features.length === 0) return null
+
+        const info = CATEGORY_INFO[category]
+        return (
+          <FeatureSection
+            key={category}
+            title={info.label}
+            description={info.description}
+            features={features}
+            categoryColor={info.color}
+            defaultOpen
+            forceOpen={isSearching}
+          />
+        )
+      })}
+
+      {/* No results */}
+      {isSearching && filteredFeatures.length === 0 && (
+        <div className="text-center text-gray-500 dark:text-gray-400 py-8 text-sm">
+          No add-ons found for "{search}"
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface FeatureSectionProps {
+  title: string
+  description: string
+  features: Array<FeatureInfo>
+  categoryColor: string
+  defaultOpen?: boolean
+  forceOpen?: boolean
+}
+
+function FeatureSection({
+  title,
+  description,
+  features,
+  categoryColor,
+  defaultOpen = false,
+  forceOpen = false,
+}: FeatureSectionProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen)
+  const effectiveOpen = forceOpen || isOpen
+
+  return (
+    <Collapsible open={effectiveOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger className="w-full flex items-center justify-between py-3">
+        <div className="text-left">
+          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+            {title}
+          </h2>
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            {description}
+          </p>
+        </div>
+        <ChevronDown
+          className={twMerge(
+            'w-4 h-4 text-gray-400 transition-transform duration-200',
+            effectiveOpen && 'rotate-180',
+          )}
+        />
+      </CollapsibleTrigger>
+
+      <CollapsibleContent>
+        <div className="mt-1 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 xl:grid-cols-2 gap-1 px-1 pb-2">
+          {features.map((feature) => (
+            <FeatureCard
+              key={feature.id}
+              feature={feature}
+              categoryColor={categoryColor}
+            />
+          ))}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+interface FeatureCardProps {
+  feature: FeatureInfo
+  categoryColor: string
+}
+
+function FeatureCard({ feature, categoryColor }: FeatureCardProps) {
+  const toggleFeature = useBuilderStore((s) => s.toggleFeature)
+  const getFeatureInfo = useBuilderStore((s) => s.getFeatureInfo)
+  const { selected, enabled, disabledReason, exclusiveConflict, requiredBy } =
+    useFeatureState(feature.id)
+
+  const handleClick = () => {
+    if (enabled && !requiredBy) {
+      toggleFeature(feature.id)
+    }
+  }
+
+  const handleLinkClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+  }
+
+  const isPartner = Boolean(feature.partnerId)
+  const isDisabled = !enabled || !!requiredBy
+
+  // Build tooltip content
+  const tooltipContent = disabledReason
+    ? disabledReason
+    : exclusiveConflict
+      ? `Replaces ${getFeatureInfo(exclusiveConflict)?.name ?? exclusiveConflict}`
+      : null
+
+  // Use feature color for the dot and selected state
+  const featureColor = feature.color ?? categoryColor
+
+  const cardContent = (
+    <button
+      onClick={handleClick}
+      disabled={isDisabled}
+      className={twMerge(
+        'relative w-full flex items-center gap-3 p-3 rounded-lg border text-left transition-all',
+        selected
+          ? 'border-current'
+          : enabled
+            ? 'bg-white dark:bg-gray-800/50 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800'
+            : 'bg-gray-100 dark:bg-gray-800/30 border-gray-200 dark:border-gray-800 opacity-60 cursor-not-allowed',
+      )}
+      style={
+        selected
+          ? {
+              borderColor: featureColor,
+              backgroundColor: `${featureColor}15`,
+            }
+          : undefined
+      }
+    >
+      {/* Color dot */}
+      <div
+        className={twMerge(
+          'w-3 h-3 shrink-0 rounded-full',
+          !enabled && 'opacity-50',
+        )}
+        style={{ backgroundColor: featureColor }}
+      />
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <h3
+          className={twMerge(
+            'font-medium text-sm',
+            selected && 'text-gray-900 dark:text-gray-100',
+            !selected && enabled && 'text-gray-900 dark:text-gray-100',
+            !selected && !enabled && 'text-gray-500 dark:text-gray-500',
+          )}
+        >
+          {feature.name}
+        </h3>
+        <p className="text-xs text-gray-500 dark:text-gray-400 line-clamp-1 sm:line-clamp-2 md:line-clamp-1 xl:line-clamp-2">
+          {feature.description}
+        </p>
+      </div>
+
+      {/* Partner badge + External link stacked */}
+      {(isPartner || feature.link) && (
+        <div className="flex flex-col items-center gap-2 shrink-0">
+          {isPartner && (
+            <span className="flex items-center gap-0.5 text-[9px] font-semibold text-amber-500 dark:text-amber-400 leading-none">
+              <Star className="w-2.5 h-2.5 fill-amber-500 dark:fill-amber-400" />
+              Partner
+            </span>
+          )}
+          {feature.link && (
+            <a
+              href={feature.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={handleLinkClick}
+              className="p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+            >
+              <ExternalLink className="w-3.5 h-3.5" />
+            </a>
+          )}
+        </div>
+      )}
+    </button>
+  )
+
+  if (tooltipContent) {
+    return (
+      <Tooltip content={tooltipContent} side="top">
+        <div>{cardContent}</div>
+      </Tooltip>
+    )
+  }
+
+  return cardContent
+}
+
+// Feature options panel
+interface FeatureOptionsProps {
+  featureId: FeatureId
+}
+
+export function FeatureOptions({ featureId }: FeatureOptionsProps) {
+  const feature = useBuilderStore((s) => s.getFeatureInfo(featureId))
+  const featureOptions = useBuilderStore((s) => s.featureOptions)
+  const setFeatureOption = useBuilderStore((s) => s.setFeatureOption)
+
+  if (!feature || !feature.options || feature.options.length === 0) {
+    return null
+  }
+
+  const currentOptions = featureOptions[featureId] || {}
+
+  return (
+    <div className="space-y-3">
+      {feature.options.map((option) => (
+        <div key={option.key}>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            {option.label}
+          </label>
+          {option.type === 'select' && option.choices && (
+            <select
+              value={String(currentOptions[option.key] ?? option.default)}
+              onChange={(e) =>
+                setFeatureOption(featureId, option.key, e.target.value)
+              }
+              className="w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-cyan-500"
+            >
+              {option.choices.map((choice) => (
+                <option key={choice.value} value={choice.value}>
+                  {choice.label}
+                </option>
+              ))}
+            </select>
+          )}
+          {option.type === 'boolean' && (
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={Boolean(currentOptions[option.key] ?? option.default)}
+                onChange={(e) =>
+                  setFeatureOption(featureId, option.key, e.target.checked)
+                }
+                className="rounded border-gray-300 dark:border-gray-600 text-cyan-600 focus:ring-cyan-500"
+              />
+              <span className="text-sm text-gray-600 dark:text-gray-400">
+                Enable
+              </span>
+            </label>
+          )}
+          {option.type === 'string' && (
+            <input
+              type="text"
+              value={String(currentOptions[option.key] ?? option.default ?? '')}
+              onChange={(e) =>
+                setFeatureOption(featureId, option.key, e.target.value)
+              }
+              className="w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-cyan-500"
+            />
+          )}
+          {option.description && (
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              {option.description}
+            </p>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+/**
+ * Example Picker - Single-select section for full demo apps
+ */
+function ExamplePicker() {
+  const examples = useAvailableExamples()
+  const selectedExample = useSelectedExample()
+  const selectExample = useBuilderStore((s) => s.selectExample)
+  const [isOpen, setIsOpen] = useState(true)
+
+  if (examples.length === 0) return null
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger className="w-full flex items-center justify-between py-3">
+        <div className="text-left">
+          <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+            Examples
+          </h2>
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            Start with a complete demo app
+          </p>
+        </div>
+        <ChevronDown
+          className={twMerge(
+            'w-4 h-4 text-gray-400 transition-transform duration-200',
+            isOpen && 'rotate-180',
+          )}
+        />
+      </CollapsibleTrigger>
+
+      <CollapsibleContent>
+        <div className="mt-1 grid grid-cols-1 gap-1 px-1 pb-2">
+          {examples.map((example) => {
+            const isSelected = selectedExample === example.id
+
+            return (
+              <button
+                key={example.id}
+                onClick={() =>
+                  selectExample(isSelected ? null : (example.id as any))
+                }
+                className={twMerge(
+                  'relative w-full flex items-center gap-3 p-3 rounded-lg border text-left transition-all',
+                  isSelected
+                    ? 'bg-purple-50 dark:bg-purple-900/20 border-purple-500 dark:border-purple-400'
+                    : 'bg-white dark:bg-gray-800/50 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800',
+                )}
+              >
+                {/* Icon */}
+                <div
+                  className={twMerge(
+                    'w-8 h-8 shrink-0 rounded-lg flex items-center justify-center',
+                    isSelected
+                      ? 'bg-purple-100 dark:bg-purple-900/50 text-purple-600 dark:text-purple-400'
+                      : 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400',
+                  )}
+                >
+                  <Sparkles className="w-4 h-4" />
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                  <h3
+                    className={twMerge(
+                      'font-medium text-sm',
+                      isSelected
+                        ? 'text-purple-700 dark:text-purple-300'
+                        : 'text-gray-900 dark:text-gray-100',
+                    )}
+                  >
+                    {example.name}
+                  </h3>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 line-clamp-1">
+                    {example.description}
+                  </p>
+                </div>
+
+                {/* Deselect button when selected */}
+                {isSelected && (
+                  <div className="shrink-0 p-1 text-purple-600 dark:text-purple-400">
+                    <X className="w-4 h-4" />
+                  </div>
+                )}
+              </button>
+            )
+          })}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
diff --git a/src/components/builder/TemplatePicker.tsx b/src/components/builder/TemplatePicker.tsx
new file mode 100644
index 000000000..1e2ddfbd2
--- /dev/null
+++ b/src/components/builder/TemplatePicker.tsx
@@ -0,0 +1,76 @@
+/**
+ * TemplatePicker - Preset template selection for common app types
+ */
+
+import { twMerge } from 'tailwind-merge'
+import { TEMPLATES } from '~/builder/templates'
+import { useBuilderStore } from './store'
+
+export function TemplatePicker() {
+  const selectedTemplate = useBuilderStore((s) => s.selectedTemplate)
+  const setTemplate = useBuilderStore((s) => s.setTemplate)
+  const featuresLoaded = useBuilderStore((s) => s.featuresLoaded)
+
+  return (
+    <div className="p-4 pb-0">
+      <h3 className="text-base font-semibold text-gray-700 dark:text-gray-300 mb-1">
+        Template
+      </h3>
+      <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
+        Start with a preset configuration
+      </p>
+      <div className="grid grid-cols-2 gap-2">
+        {TEMPLATES.map((template) => {
+          const Icon = template.icon
+          const isSelected = selectedTemplate === template.id
+          const color = template.color
+
+          return (
+            <button
+              key={template.id}
+              type="button"
+              onClick={() => setTemplate(template.id)}
+              disabled={!featuresLoaded}
+              className={twMerge(
+                'flex items-center gap-2.5 p-2.5 rounded-lg border-2 transition-all text-left',
+                isSelected
+                  ? ''
+                  : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800',
+                !featuresLoaded && 'opacity-50 cursor-wait',
+              )}
+              style={
+                isSelected
+                  ? {
+                      borderColor: color,
+                      backgroundColor: `${color}15`,
+                    }
+                  : undefined
+              }
+            >
+              <div
+                className="w-8 h-8 rounded-md flex items-center justify-center shrink-0 text-white"
+                style={{ backgroundColor: color }}
+              >
+                <Icon className="w-4 h-4" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <div
+                  className={twMerge(
+                    'text-sm font-medium truncate',
+                    !isSelected && 'text-gray-900 dark:text-white',
+                  )}
+                  style={isSelected ? { color } : undefined}
+                >
+                  {template.name}
+                </div>
+                <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                  {template.description}
+                </div>
+              </div>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/builder/client-generation.ts b/src/components/builder/client-generation.ts
new file mode 100644
index 000000000..91fd39546
--- /dev/null
+++ b/src/components/builder/client-generation.ts
@@ -0,0 +1,98 @@
+import {
+  getRecipeBuilderFeatures,
+  type ApplicationStarterRecipe,
+  type ApplicationStarterResult,
+} from '~/utils/application-starter'
+import type { FrameworkId } from '~/builder/frameworks'
+
+const BASE64_PREFIX = 'base64::'
+
+export interface BuilderProjectInput {
+  name: string
+  framework?: FrameworkId
+  packageManager?: 'bun' | 'npm' | 'pnpm' | 'yarn'
+  tailwind?: boolean
+  features: Array<string>
+  featureOptions: Record<string, Record<string, unknown>>
+}
+
+function decodeBase64File(content: string): Uint8Array | null {
+  if (!content.startsWith(BASE64_PREFIX)) {
+    return null
+  }
+
+  const decoded = atob(content.slice(BASE64_PREFIX.length))
+  return Uint8Array.from(decoded, (char) => char.charCodeAt(0))
+}
+
+function recipeToProjectInput(
+  recipe: ApplicationStarterRecipe,
+): BuilderProjectInput {
+  return {
+    name: recipe.projectName || 'my-tanstack-app',
+    framework: recipe.framework,
+    packageManager: recipe.packageManager,
+    tailwind: recipe.tailwind,
+    features: getRecipeBuilderFeatures(recipe),
+    featureOptions: recipe.featureOptions,
+  }
+}
+
+export async function compileBuilderProject(input: BuilderProjectInput) {
+  if (import.meta.env.SSR) {
+    throw new Error(
+      'Builder project generation is only available in the browser',
+    )
+  }
+
+  const { compileHandler } = await import('~/builder/api/compile')
+
+  const result = await compileHandler({
+    name: input.name,
+    framework: input.framework,
+    packageManager: input.packageManager,
+    tailwind: input.tailwind,
+    features: input.features,
+    featureOptions: input.featureOptions,
+  })
+
+  return result.files
+}
+
+export async function compileBuilderRecipe(recipe: ApplicationStarterRecipe) {
+  return compileBuilderProject(recipeToProjectInput(recipe))
+}
+
+export async function downloadBuilderResult(result: ApplicationStarterResult) {
+  const input = recipeToProjectInput(result.recipe)
+  const [files, zipModule] = await Promise.all([
+    compileBuilderProject(input),
+    import('jszip'),
+  ])
+
+  const zip = new zipModule.default()
+  const rootFolder = zip.folder(input.name)
+
+  if (!rootFolder) {
+    throw new Error('Failed to create ZIP folder')
+  }
+
+  for (const [filePath, content] of Object.entries(files)) {
+    const binaryContent = decodeBase64File(content)
+    if (binaryContent) {
+      rootFolder.file(filePath, binaryContent, { binary: true })
+    } else {
+      rootFolder.file(filePath, content)
+    }
+  }
+
+  const blob = await zip.generateAsync({ type: 'blob' })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `${input.name}.zip`
+  document.body.append(link)
+  link.click()
+  link.remove()
+  URL.revokeObjectURL(url)
+}
diff --git a/src/components/builder/config/AddOnCard.tsx b/src/components/builder/config/AddOnCard.tsx
deleted file mode 100644
index 176a2865c..000000000
--- a/src/components/builder/config/AddOnCard.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-/**
- * AddOnCard - Individual add-on toggle card
- */
-
-import * as React from 'react'
-import { twMerge } from 'tailwind-merge'
-import { useAddOns } from '@tanstack/cta-ui-base/dist/store/project'
-
-type AddOnInfo = {
-  id: string
-  name: string
-  description: string
-  type: string
-  author?: string
-  link?: string
-  warning?: string
-}
-
-type PartnerInfo = {
-  brandColor?: string
-}
-
-type AddOnCardProps = {
-  addon: AddOnInfo
-  partnerInfo?: PartnerInfo
-}
-
-export function AddOnCard({ addon, partnerInfo }: AddOnCardProps) {
-  const { toggleAddOn, addOnState, userSelectedAddOns } = useAddOns()
-
-  const state = addOnState[addon.id]
-  // Use addOnState to determine if selected (includes dependency resolution)
-  const isSelected = state?.selected ?? false
-  // Auto-enabled means it was selected by a dependency, not user selection
-  const isAutoEnabled = isSelected && !userSelectedAddOns.includes(addon.id)
-  // Disabled means it can't be toggled (e.g., forced add-on)
-  const isDisabled = state && !state.enabled
-
-  const handleToggle = () => {
-    toggleAddOn(addon.id)
-  }
-
-  const isPartner = !!partnerInfo
-
-  return (
-    <button
-      type="button"
-      onClick={handleToggle}
-      disabled={isDisabled}
-      className={twMerge(
-        'w-full flex items-start gap-3 p-3 rounded-lg border text-left transition-all relative overflow-hidden',
-        isSelected
-          ? 'border-blue-500 bg-blue-50 dark:bg-blue-950/30'
-          : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800',
-        isDisabled && 'opacity-50 cursor-not-allowed',
-        isPartner &&
-          !isSelected &&
-          'ring-1 ring-inset ring-gray-200/50 dark:ring-gray-700/50',
-      )}
-      style={
-        isPartner && partnerInfo.brandColor
-          ? {
-              borderLeftWidth: '3px',
-              borderLeftColor: partnerInfo.brandColor,
-            }
-          : undefined
-      }
-    >
-      {/* Checkbox indicator */}
-      <div
-        className={twMerge(
-          'w-5 h-5 rounded border-2 flex-shrink-0 flex items-center justify-center mt-0.5 transition-colors',
-          isSelected
-            ? 'border-blue-500 bg-blue-500 text-white'
-            : 'border-gray-300 dark:border-gray-600',
-        )}
-      >
-        {isSelected && (
-          <svg
-            className="w-3 h-3"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={3}
-              d="M5 13l4 4L19 7"
-            />
-          </svg>
-        )}
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <h3
-            className={twMerge(
-              'text-sm font-medium truncate',
-              isSelected
-                ? 'text-blue-700 dark:text-blue-300'
-                : 'text-gray-900 dark:text-white',
-            )}
-          >
-            {addon.name}
-          </h3>
-
-          {/* Auto-selected indicator */}
-          {isAutoEnabled && (
-            <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">
-              auto
-            </span>
-          )}
-
-          {/* Warning indicator */}
-          {addon.warning && (
-            <span className="text-amber-500" title={addon.warning}>
-              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                <path
-                  fillRule="evenodd"
-                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </span>
-          )}
-
-          {/* Partner badge - right aligned */}
-          {isPartner && (
-            <span
-              className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-medium ml-auto"
-              style={{
-                backgroundColor: partnerInfo.brandColor
-                  ? `${partnerInfo.brandColor}18`
-                  : undefined,
-                color: partnerInfo.brandColor || undefined,
-              }}
-            >
-              <svg
-                className="w-2.5 h-2.5"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
-                  clipRule="evenodd"
-                />
-              </svg>
-              Partner
-            </span>
-          )}
-        </div>
-
-        <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2">
-          {addon.description}
-        </p>
-
-        {/* Author / Link */}
-        {addon.author && (
-          <p className="text-[10px] text-gray-400 dark:text-gray-500 mt-1">
-            by {addon.author}
-          </p>
-        )}
-      </div>
-
-      {/* External link */}
-      {addon.link && (
-        <a
-          href={addon.link}
-          target="_blank"
-          rel="noopener noreferrer"
-          onClick={(e) => e.stopPropagation()}
-          className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-1"
-        >
-          <svg
-            className="w-4 h-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-            />
-          </svg>
-        </a>
-      )}
-    </button>
-  )
-}
diff --git a/src/components/builder/config/AddOnSection.tsx b/src/components/builder/config/AddOnSection.tsx
deleted file mode 100644
index 52ed18ff4..000000000
--- a/src/components/builder/config/AddOnSection.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * AddOnSection - A category section containing add-on cards
- */
-
-import * as React from 'react'
-import { AddOnCard } from './AddOnCard'
-
-type AddOnInfo = {
-  id: string
-  name: string
-  description: string
-  type: string
-  author?: string
-  link?: string
-  warning?: string
-  priority?: number
-}
-
-type PartnerInfo = {
-  brandColor?: string
-}
-
-type AddOnSectionProps = {
-  title: string
-  description: string
-  addons: AddOnInfo[]
-  defaultExpanded?: boolean
-  partnerInfo?: Map<string, PartnerInfo>
-}
-
-export function AddOnSection({
-  title,
-  description,
-  addons,
-  defaultExpanded = true,
-  partnerInfo,
-}: AddOnSectionProps) {
-  const [isCollapsed, setIsCollapsed] = React.useState(!defaultExpanded)
-
-  // Sort addons by priority (higher first), then alphabetically
-  const sortedAddons = React.useMemo(() => {
-    return [...addons].sort((a, b) => {
-      const priorityDiff = (b.priority ?? 0) - (a.priority ?? 0)
-      if (priorityDiff !== 0) return priorityDiff
-      return a.name.localeCompare(b.name)
-    })
-  }, [addons])
-
-  return (
-    <section>
-      <button
-        type="button"
-        onClick={() => setIsCollapsed((p) => !p)}
-        className="w-full flex items-center justify-between mb-3 group"
-      >
-        <div className="text-left">
-          <h2 className="text-sm font-semibold text-gray-900 dark:text-white">
-            {title}
-          </h2>
-          <p className="text-xs text-gray-500 dark:text-gray-400">
-            {description}
-          </p>
-        </div>
-        <svg
-          className={`w-4 h-4 text-gray-400 transition-transform ${
-            isCollapsed ? '' : 'rotate-180'
-          }`}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-      </button>
-
-      {!isCollapsed && (
-        <div className="grid grid-cols-1 gap-2">
-          {sortedAddons.map((addon) => (
-            <AddOnCard
-              key={addon.id}
-              addon={addon}
-              partnerInfo={partnerInfo?.get(addon.id.toLowerCase())}
-            />
-          ))}
-        </div>
-      )}
-    </section>
-  )
-}
diff --git a/src/components/builder/config/ConfigPanel.tsx b/src/components/builder/config/ConfigPanel.tsx
deleted file mode 100644
index e3d905a3c..000000000
--- a/src/components/builder/config/ConfigPanel.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * ConfigPanel - Left panel containing all configuration options
- */
-
-import * as React from 'react'
-import { TemplatePicker } from './TemplatePicker'
-import { ProjectConfig } from './ProjectConfig'
-import { AddOnSection } from './AddOnSection'
-import { ExportDropdown } from '../export/ExportDropdown'
-import {
-  useAddOns,
-  useProjectName,
-  setProjectName,
-} from '@tanstack/cta-ui-base/dist/store/project'
-import {
-  getAddOnCategory,
-  ADD_ON_CATEGORIES,
-  type AddOnCategory,
-} from '../types'
-import { partners } from '~/utils/partners'
-
-// Get partner IDs for filtering
-const partnerIds = new Set(partners.map((p) => p.id.toLowerCase()))
-
-// Build partner info map for premium styling
-const partnerInfoMap = new Map(
-  partners.map((p) => [p.id.toLowerCase(), { brandColor: p.brandColor }]),
-)
-
-export function ConfigPanel() {
-  const { availableAddOns } = useAddOns()
-  const projectName = useProjectName()
-
-  // Featured add-ons (only actual partners, sorted by their score)
-  const featuredAddOns = React.useMemo(() => {
-    return availableAddOns
-      .filter((addon) => partnerIds.has(addon.id.toLowerCase()))
-      .sort((a, b) => {
-        // Sort by partner score (from partners list)
-        const partnerA = partners.find(
-          (p) => p.id.toLowerCase() === a.id.toLowerCase(),
-        )
-        const partnerB = partners.find(
-          (p) => p.id.toLowerCase() === b.id.toLowerCase(),
-        )
-        return (partnerB?.score ?? 0) - (partnerA?.score ?? 0)
-      })
-  }, [availableAddOns])
-
-  // Group add-ons by category (partners appear in both Featured AND their category)
-  const addOnsByCategory = React.useMemo(() => {
-    const grouped = new Map<AddOnCategory, typeof availableAddOns>()
-
-    for (const addon of availableAddOns) {
-      const category = getAddOnCategory(addon.type, addon.id)
-
-      if (!grouped.has(category)) {
-        grouped.set(category, [])
-      }
-      grouped.get(category)!.push(addon)
-    }
-
-    // Sort categories by predefined order
-    const categoryOrder: AddOnCategory[] = [
-      'deployment',
-      'database',
-      'auth',
-      'data',
-      'ui',
-      'tooling',
-      'example',
-    ]
-
-    return categoryOrder
-      .filter((cat) => grouped.has(cat) && grouped.get(cat)!.length > 0)
-      .map((cat) => ({
-        category: cat,
-        label: ADD_ON_CATEGORIES[cat].label,
-        description: ADD_ON_CATEGORIES[cat].description,
-        addons: grouped.get(cat)!,
-      }))
-  }, [availableAddOns])
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Sticky header - Project name + Export button */}
-      <div className="sticky top-0 z-10 p-4 pb-3 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shadow-sm">
-        <label
-          htmlFor="project-name-input"
-          className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5"
-        >
-          Project Name
-        </label>
-        <div className="flex gap-2">
-          <input
-            id="project-name-input"
-            type="text"
-            value={projectName}
-            onChange={(e) => setProjectName(e.target.value)}
-            placeholder="my-tanstack-app"
-            className="flex-1 px-3 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
-          />
-          <ExportDropdown large />
-        </div>
-      </div>
-
-      {/* Scrollable content */}
-      <div className="flex flex-col gap-6 p-4 overflow-y-auto">
-        {/* Project Configuration */}
-        <ProjectConfig hideProjectName />
-
-        {/* Template Selection */}
-        <section>
-          <h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">
-            Template
-          </h2>
-          <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
-            Start blank or with pre-configured addons
-          </p>
-          <TemplatePicker />
-        </section>
-
-        {/* Featured Add-ons (Partners) */}
-        {featuredAddOns.length > 0 && (
-          <AddOnSection
-            title="Featured"
-            description="Popular integrations from our partners"
-            addons={featuredAddOns}
-            defaultExpanded
-            partnerInfo={partnerInfoMap}
-          />
-        )}
-
-        {/* Add-ons by Category */}
-        {addOnsByCategory.map(({ category, label, description, addons }) => (
-          <AddOnSection
-            key={category}
-            title={label}
-            description={description}
-            addons={addons}
-            partnerInfo={partnerInfoMap}
-          />
-        ))}
-
-        {/* Empty state if no add-ons */}
-        {addOnsByCategory.length === 0 && availableAddOns.length === 0 && (
-          <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-            <p className="text-sm">Loading add-ons...</p>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/builder/config/ProjectConfig.tsx b/src/components/builder/config/ProjectConfig.tsx
deleted file mode 100644
index 6bb59b716..000000000
--- a/src/components/builder/config/ProjectConfig.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-/**
- * ProjectConfig - Project name, router mode, and feature toggles
- */
-
-import * as React from 'react'
-import { twMerge } from 'tailwind-merge'
-import {
-  useProjectName,
-  useRouterMode,
-  useProjectOptions,
-  useModeEditable,
-  useTypeScriptEditable,
-  useTailwindEditable,
-  setProjectName,
-  setRouterMode,
-  setTypeScript,
-  setTailwind,
-} from '@tanstack/cta-ui-base/dist/store/project'
-
-type ProjectConfigProps = {
-  hideProjectName?: boolean
-}
-
-export function ProjectConfig({ hideProjectName }: ProjectConfigProps) {
-  const projectName = useProjectName()
-  const routerMode = useRouterMode()
-  const modeEditable = useModeEditable()
-  const typescriptEditable = useTypeScriptEditable()
-  const tailwindEditable = useTailwindEditable()
-
-  const typescript = useProjectOptions((s) => s.typescript)
-  const tailwind = useProjectOptions((s) => s.tailwind)
-
-  return (
-    <div className="space-y-4">
-      {/* Project Name */}
-      {!hideProjectName && (
-        <div>
-          <label
-            htmlFor="project-name"
-            className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5"
-          >
-            Project Name
-          </label>
-          <input
-            id="project-name"
-            type="text"
-            value={projectName}
-            onChange={(e) => setProjectName(e.target.value)}
-            placeholder="my-tanstack-app"
-            className="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
-          />
-        </div>
-      )}
-
-      {/* Router Mode - hidden when not editable (forced to file-router) */}
-      {modeEditable && (
-        <div>
-          <div className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
-            Router Mode
-          </div>
-          <div className="flex gap-2">
-            <ModeButton
-              label="File Router"
-              description="Routes from file structure"
-              isSelected={routerMode === 'file-router'}
-              onClick={() => setRouterMode('file-router')}
-            />
-            <ModeButton
-              label="Code Router"
-              description="Routes defined in code"
-              isSelected={routerMode === 'code-router'}
-              onClick={() => setRouterMode('code-router')}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* Feature Toggles - only show if at least one is editable */}
-      {(typescriptEditable || tailwindEditable) && (
-        <div className="flex gap-4">
-          {typescriptEditable && (
-            <FeatureToggle
-              label="TypeScript"
-              enabled={typescript}
-              onChange={setTypeScript}
-              icon={
-                <svg
-                  className="w-4 h-4"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                >
-                  <path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" />
-                </svg>
-              }
-            />
-          )}
-          {tailwindEditable && (
-            <FeatureToggle
-              label="Tailwind"
-              enabled={tailwind}
-              onChange={setTailwind}
-              icon={
-                <svg
-                  className="w-4 h-4"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                >
-                  <path d="M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z" />
-                </svg>
-              }
-            />
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-type ModeButtonProps = {
-  label: string
-  description: string
-  isSelected: boolean
-  onClick: () => void
-}
-
-function ModeButton({
-  label,
-  description,
-  isSelected,
-  onClick,
-}: ModeButtonProps) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={twMerge(
-        'flex-1 p-3 rounded-lg border-2 text-left transition-all',
-        isSelected
-          ? 'border-blue-500 bg-blue-50 dark:bg-blue-950/30'
-          : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600',
-      )}
-    >
-      <div
-        className={twMerge(
-          'text-sm font-medium',
-          isSelected
-            ? 'text-blue-700 dark:text-blue-300'
-            : 'text-gray-900 dark:text-white',
-        )}
-      >
-        {label}
-      </div>
-      <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-        {description}
-      </div>
-    </button>
-  )
-}
-
-type FeatureToggleProps = {
-  label: string
-  enabled: boolean
-  onChange: (enabled: boolean) => void
-  icon?: React.ReactNode
-}
-
-function FeatureToggle({ label, enabled, onChange, icon }: FeatureToggleProps) {
-  return (
-    <button
-      type="button"
-      onClick={() => onChange(!enabled)}
-      className={twMerge(
-        'flex items-center gap-2 px-3 py-2 rounded-lg border transition-all',
-        enabled
-          ? 'border-blue-500 bg-blue-50 dark:bg-blue-950/30 text-blue-700 dark:text-blue-300'
-          : 'border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600',
-      )}
-    >
-      {icon}
-      <span className="text-sm font-medium">{label}</span>
-      <div
-        className={twMerge(
-          'w-8 h-5 rounded-full transition-colors relative',
-          enabled ? 'bg-blue-500' : 'bg-gray-300 dark:bg-gray-600',
-        )}
-      >
-        <div
-          className={twMerge(
-            'absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform',
-            enabled ? 'translate-x-3.5' : 'translate-x-0.5',
-          )}
-        />
-      </div>
-    </button>
-  )
-}
diff --git a/src/components/builder/config/TemplatePicker.tsx b/src/components/builder/config/TemplatePicker.tsx
deleted file mode 100644
index 2f7c87c51..000000000
--- a/src/components/builder/config/TemplatePicker.tsx
+++ /dev/null
@@ -1,317 +0,0 @@
-/**
- * TemplatePicker - Unified template selection combining starters and addon presets
- */
-
-import * as React from 'react'
-import { twMerge } from 'tailwind-merge'
-import {
-  useRegistry,
-  useProjectStarter,
-  setProjectStarter,
-  useAddOns,
-  useReady,
-} from '@tanstack/cta-ui-base/dist/store/project'
-import { loadRemoteStarter } from '@tanstack/cta-ui-base/dist/lib/api'
-import {
-  Rocket,
-  Bot,
-  LayoutDashboard,
-  FileText,
-  Server,
-  Radio,
-  Globe,
-  HardDrive,
-  Plus,
-  Package,
-} from 'lucide-react'
-
-type TemplatePreset = {
-  id: string
-  name: string
-  description: string
-  icon: React.ComponentType<{ className?: string }>
-  addons: string[]
-}
-
-const TEMPLATE_PRESETS: TemplatePreset[] = [
-  {
-    id: 'saas',
-    name: 'SaaS Starter',
-    description: 'Auth, database, monitoring',
-    icon: Rocket,
-    addons: ['clerk', 'neon', 'sentry', 'shadcn', 'form'],
-  },
-  {
-    id: 'ai-chat',
-    name: 'AI Chat',
-    description: 'LLM-powered app',
-    icon: Bot,
-    addons: ['ai', 'store', 'shadcn'],
-  },
-  {
-    id: 'dashboard',
-    name: 'Dashboard',
-    description: 'Admin panels, data tables',
-    icon: LayoutDashboard,
-    addons: ['table', 'tanstack-query', 'shadcn', 'form'],
-  },
-  {
-    id: 'blog',
-    name: 'Blog / CMS',
-    description: 'Content-driven site',
-    icon: FileText,
-    addons: ['strapi', 'tanstack-query'],
-  },
-  {
-    id: 'api-first',
-    name: 'API-First',
-    description: 'Type-safe backend APIs',
-    icon: Server,
-    addons: ['tRPC', 'tanstack-query', 'drizzle'],
-  },
-  {
-    id: 'realtime',
-    name: 'Realtime',
-    description: 'Live, collaborative features',
-    icon: Radio,
-    addons: ['convex', 'tanstack-query'],
-  },
-  {
-    id: 'i18n',
-    name: 'Multi-Language',
-    description: 'Internationalized app',
-    icon: Globe,
-    addons: ['paraglide', 'shadcn'],
-  },
-  {
-    id: 'local-first',
-    name: 'Local-First',
-    description: 'Offline-capable, sync-enabled',
-    icon: HardDrive,
-    addons: ['db', 'tanstack-query', 'store'],
-  },
-]
-
-type RegistryStarter = {
-  name: string
-  description: string
-  url: string
-  banner?: string
-  framework?: string
-}
-
-export function TemplatePicker() {
-  const ready = useReady()
-  const registry = useRegistry()
-  const projectStarter = useProjectStarter((s) => s.projectStarter)
-  const { availableAddOns, chosenAddOns, toggleAddOn } = useAddOns()
-  const [loading, setLoading] = React.useState<string | null>(null)
-
-  const remoteStarters = React.useMemo(
-    () => (registry?.starters ?? []) as RegistryStarter[],
-    [registry?.starters],
-  )
-
-  const selectedStarterUrl = projectStarter?.url ?? 'blank'
-
-  // Check if current selection matches a preset
-  const activePresetId = React.useMemo(() => {
-    if (!ready || selectedStarterUrl !== 'blank') return null
-
-    for (const preset of TEMPLATE_PRESETS) {
-      const presetSet = new Set(
-        preset.addons.filter((id) => availableAddOns.some((a) => a.id === id)),
-      )
-      const chosenSet = new Set(chosenAddOns)
-
-      if (presetSet.size === chosenSet.size) {
-        let matches = true
-        for (const id of presetSet) {
-          if (!chosenSet.has(id)) {
-            matches = false
-            break
-          }
-        }
-        if (matches) return preset.id
-      }
-    }
-    return null
-  }, [ready, selectedStarterUrl, availableAddOns, chosenAddOns])
-
-  const isBlankSelected =
-    selectedStarterUrl === 'blank' && chosenAddOns.length === 0
-
-  const handleSelectBlank = () => {
-    setProjectStarter(undefined)
-    // Turn off all currently selected addons
-    for (const addonId of chosenAddOns) {
-      toggleAddOn(addonId)
-    }
-  }
-
-  const handleSelectPreset = (preset: TemplatePreset) => {
-    if (!ready) return
-
-    // Reset to blank starter
-    setProjectStarter(undefined)
-
-    // Clear existing addons
-    for (const addonId of chosenAddOns) {
-      if (!preset.addons.includes(addonId)) {
-        toggleAddOn(addonId)
-      }
-    }
-
-    // Enable preset addons
-    for (const addonId of preset.addons) {
-      const isAvailable = availableAddOns.some((a) => a.id === addonId)
-      const isChosen = chosenAddOns.includes(addonId)
-      if (isAvailable && !isChosen) {
-        toggleAddOn(addonId)
-      }
-    }
-  }
-
-  const handleSelectRemoteStarter = async (url: string) => {
-    setLoading(url)
-    try {
-      const starterData = await loadRemoteStarter(url)
-      if ('error' in starterData) {
-        console.error('Failed to load starter:', starterData.error)
-      } else {
-        setProjectStarter(starterData)
-      }
-    } catch (error) {
-      console.error('Failed to load starter:', error)
-    } finally {
-      setLoading(null)
-    }
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Main templates grid */}
-      <div className="grid grid-cols-2 gap-2">
-        {/* Blank option */}
-        <TemplateCard
-          name="Blank"
-          description="Start from scratch"
-          icon={Plus}
-          isSelected={isBlankSelected}
-          onClick={handleSelectBlank}
-        />
-
-        {/* Preset templates */}
-        {TEMPLATE_PRESETS.map((preset) => (
-          <TemplateCard
-            key={preset.id}
-            name={preset.name}
-            description={preset.description}
-            icon={preset.icon}
-            isSelected={activePresetId === preset.id}
-            onClick={() => handleSelectPreset(preset)}
-          />
-        ))}
-      </div>
-
-      {/* Remote starters (if any) */}
-      {remoteStarters.length > 0 && (
-        <div>
-          <h3 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">
-            Community Starters
-          </h3>
-          <div className="grid grid-cols-2 gap-2">
-            {remoteStarters.map((starter) => (
-              <TemplateCard
-                key={starter.url}
-                name={starter.name}
-                description={starter.description}
-                icon={Package}
-                isSelected={selectedStarterUrl === starter.url}
-                isLoading={loading === starter.url}
-                onClick={() => handleSelectRemoteStarter(starter.url)}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-type TemplateCardProps = {
-  name: string
-  description: string
-  icon: React.ComponentType<{ className?: string }>
-  isSelected: boolean
-  isLoading?: boolean
-  onClick: () => void
-}
-
-function TemplateCard({
-  name,
-  description,
-  icon: Icon,
-  isSelected,
-  isLoading,
-  onClick,
-}: TemplateCardProps) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={isLoading}
-      className={twMerge(
-        'flex items-center gap-2.5 p-2.5 rounded-lg border transition-all text-left',
-        isSelected
-          ? 'border-blue-500 bg-blue-50 dark:bg-blue-950/30'
-          : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800',
-        isLoading && 'opacity-50 cursor-wait',
-      )}
-    >
-      <div
-        className={twMerge(
-          'w-8 h-8 rounded-md flex items-center justify-center shrink-0',
-          isSelected
-            ? 'bg-blue-500 text-white'
-            : 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400',
-        )}
-      >
-        {isLoading ? (
-          <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-        ) : (
-          <Icon className="w-4 h-4" />
-        )}
-      </div>
-      <div className="min-w-0 flex-1">
-        <div
-          className={twMerge(
-            'text-sm font-medium truncate',
-            isSelected
-              ? 'text-blue-700 dark:text-blue-300'
-              : 'text-gray-900 dark:text-white',
-          )}
-        >
-          {name}
-        </div>
-        <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
-          {description}
-        </div>
-      </div>
-    </button>
-  )
-}
diff --git a/src/components/builder/explorer/CodeViewer.tsx b/src/components/builder/explorer/CodeViewer.tsx
deleted file mode 100644
index 2eaae6702..000000000
--- a/src/components/builder/explorer/CodeViewer.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * CodeViewer - Displays file content with syntax highlighting
- * Uses the same CodeBlock component as the rest of the site
- */
-
-import * as React from 'react'
-import { CodeBlock } from '~/components/markdown'
-
-type CodeViewerProps = {
-  filePath: string | null
-  content: string | null
-}
-
-export function CodeViewer({ filePath, content }: CodeViewerProps) {
-  if (!filePath || content == null) {
-    return (
-      <div className="flex items-center justify-center h-full text-gray-400 dark:text-gray-500">
-        <p className="text-sm">Select a file to view its contents</p>
-      </div>
-    )
-  }
-
-  // Get file extension for language detection
-  const ext = filePath.split('.').pop()?.toLowerCase() || ''
-  const language = getLanguage(ext)
-
-  return (
-    <div className="builder-code-viewer flex flex-col h-full min-w-0 overflow-hidden">
-      <CodeBlock
-        className="h-full flex-1 min-w-0 rounded-none border-0 [&>div:first-child]:rounded-none"
-        isEmbedded
-        dataCodeTitle={filePath.replace(/^\.\//, '')}
-      >
-        <code className={`language-${language}`}>{content}</code>
-      </CodeBlock>
-    </div>
-  )
-}
-
-function getLanguage(ext: string): string {
-  switch (ext) {
-    case 'ts':
-    case 'tsx':
-      return 'tsx'
-    case 'js':
-    case 'jsx':
-      return 'jsx'
-    case 'json':
-      return 'json'
-    case 'css':
-      return 'css'
-    case 'html':
-      return 'html'
-    case 'md':
-      return 'markdown'
-    case 'svg':
-      return 'html'
-    case 'yaml':
-    case 'yml':
-      return 'yaml'
-    default:
-      return 'plaintext'
-  }
-}
diff --git a/src/components/builder/explorer/ExplorerPanel.tsx b/src/components/builder/explorer/ExplorerPanel.tsx
deleted file mode 100644
index 1ac868d6b..000000000
--- a/src/components/builder/explorer/ExplorerPanel.tsx
+++ /dev/null
@@ -1,322 +0,0 @@
-/**
- * ExplorerPanel - Right panel with file tree, code viewer, and preview tabs
- */
-
-import * as React from 'react'
-import { twMerge } from 'tailwind-merge'
-import { useNavigate, useSearch } from '@tanstack/react-router'
-import { useIsFetching } from '@tanstack/react-query'
-import { FileExplorer } from '~/components/FileExplorer'
-import { CodeViewer } from './CodeViewer'
-import { LivePreview } from '../preview/LivePreview'
-import { Terminal } from '../preview/Terminal'
-import { useDryRun } from '@tanstack/cta-ui-base/dist/store/project'
-import { usePreviewContext } from '../BuilderProvider'
-import type { ExplorerTab } from '../types'
-
-type ExplorerPanelProps = {
-  isMobileConfigOpen: boolean
-  onToggleMobileConfig: () => void
-}
-
-// Convert flat files to GitHubFileNode tree structure
-type FileNode = {
-  name: string
-  path: string
-  type: 'file' | 'dir'
-  children?: FileNode[]
-  depth: number
-}
-
-function filesToGitHubTree(files: Record<string, string>): FileNode[] {
-  const root: FileNode[] = []
-  const paths = Object.keys(files).sort()
-
-  for (const filePath of paths) {
-    const normalizedPath = filePath.replace(/^\.\//, '')
-    const parts = normalizedPath.split('/')
-    let currentLevel = root
-
-    for (let i = 0; i < parts.length; i++) {
-      const part = parts[i]
-      const isFile = i === parts.length - 1
-      const currentPath = parts.slice(0, i + 1).join('/')
-
-      let existing = currentLevel.find((n) => n.name === part)
-
-      if (!existing) {
-        existing = {
-          name: part,
-          path: currentPath,
-          type: isFile ? 'file' : 'dir',
-          depth: i,
-          children: isFile ? undefined : [],
-        }
-        currentLevel.push(existing)
-      }
-
-      if (!isFile && existing.children) {
-        currentLevel = existing.children
-      }
-    }
-  }
-
-  // Sort: directories first, then alphabetically
-  const sortNodes = (nodes: FileNode[]): FileNode[] => {
-    return nodes
-      .sort((a, b) => {
-        if (a.type !== b.type) {
-          return a.type === 'dir' ? -1 : 1
-        }
-        return a.name.localeCompare(b.name)
-      })
-      .map((node) => ({
-        ...node,
-        children: node.children ? sortNodes(node.children) : undefined,
-      }))
-  }
-
-  return sortNodes(root)
-}
-
-export function ExplorerPanel({
-  isMobileConfigOpen,
-  onToggleMobileConfig,
-}: ExplorerPanelProps) {
-  const navigate = useNavigate({ from: '/builder' })
-  const search = useSearch({ from: '/builder' })
-  const { canPreview, previewActivated, activatePreview } = usePreviewContext()
-
-  // Force files tab if preview is disabled or not activated
-  const activeTab =
-    canPreview && previewActivated ? (search.tab ?? 'files') : 'files'
-
-  const handlePreviewClick = () => {
-    if (!previewActivated) {
-      activatePreview()
-    }
-    setActiveTab('preview')
-  }
-  const selectedFile = search.file ?? null
-  const isTerminalOpen = search.terminal ?? true
-
-  const setActiveTab = (tab: ExplorerTab) => {
-    navigate({ to: '.', search: { ...search, tab }, replace: true })
-  }
-
-  const setSelectedFile = (file: string | null) => {
-    navigate({
-      to: '.',
-      search: { ...search, file: file ?? undefined },
-      replace: true,
-    })
-  }
-
-  const setIsTerminalOpen = (open: boolean | ((prev: boolean) => boolean)) => {
-    const newValue = typeof open === 'function' ? open(isTerminalOpen) : open
-    navigate({
-      to: '.',
-      search: { ...search, terminal: newValue },
-      replace: true,
-    })
-  }
-
-  const dryRun = useDryRun()
-  const isFetchingDryRun = useIsFetching({ queryKey: ['dry-run'] }) > 0
-  const files = React.useMemo(
-    () => (dryRun?.files ?? {}) as Record<string, string>,
-    [dryRun?.files],
-  )
-  const hasFiles = Object.keys(files).length > 0
-
-  // Keep track of previous files to avoid blank state during loading
-  const previousFilesRef = React.useRef<Record<string, string>>(files)
-  React.useEffect(() => {
-    if (hasFiles) {
-      previousFilesRef.current = files
-    }
-  }, [files, hasFiles])
-
-  // Use previous files while loading to avoid blank state
-  const displayFiles = hasFiles ? files : previousFilesRef.current
-
-  // Convert flat files to tree structure for FileExplorer
-  const fileTree = React.useMemo(
-    () => filesToGitHubTree(displayFiles),
-    [displayFiles],
-  )
-
-  // Auto-select first file if none selected
-  React.useEffect(() => {
-    if (!selectedFile && Object.keys(displayFiles).length > 0) {
-      const fileKeys = Object.keys(displayFiles)
-      const preferredFiles = [
-        'src/routes/index.tsx',
-        'src/routes/__root.tsx',
-        'src/app.tsx',
-        'src/main.tsx',
-        'package.json',
-      ]
-
-      for (const preferred of preferredFiles) {
-        const match = fileKeys.find(
-          (k) =>
-            k.endsWith(preferred) || k === `./${preferred}` || k === preferred,
-        )
-        if (match) {
-          // Store without ./ prefix to match tree paths
-          setSelectedFile(match.replace(/^\.\//, ''))
-          return
-        }
-      }
-
-      // Fallback to first file
-      setSelectedFile(fileKeys[0].replace(/^\.\//, ''))
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- setSelectedFile is stable from useState
-  }, [displayFiles, selectedFile])
-
-  // Try to find file content - files may have ./ prefix or not
-  const selectedFileContent = selectedFile
-    ? (displayFiles[selectedFile] ?? displayFiles[`./${selectedFile}`] ?? null)
-    : null
-
-  return (
-    <div className="flex flex-col h-full min-h-0 overflow-hidden">
-      {/* Tab bar */}
-      <div className="flex items-center shrink-0 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
-        {/* Mobile config toggle */}
-        <button
-          type="button"
-          onClick={onToggleMobileConfig}
-          className="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-          aria-label={isMobileConfigOpen ? 'Show preview' : 'Show config'}
-        >
-          <svg
-            className="w-5 h-5"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            {isMobileConfigOpen ? (
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-              />
-            ) : (
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-              />
-            )}
-          </svg>
-        </button>
-
-        <TabButton
-          label="Files"
-          isActive={activeTab === 'files'}
-          onClick={() => setActiveTab('files')}
-        />
-        {canPreview && (
-          <TabButton
-            label="Preview"
-            isActive={activeTab === 'preview'}
-            onClick={handlePreviewClick}
-          />
-        )}
-
-        {/* Spacer */}
-        <div className="flex-1" />
-
-        {/* Terminal toggle - only show when preview is activated */}
-        {canPreview && previewActivated && (
-          <button
-            type="button"
-            onClick={() => setIsTerminalOpen((p) => !p)}
-            className={twMerge(
-              'px-3 py-2 text-xs font-medium transition-colors',
-              isTerminalOpen
-                ? 'text-blue-600 dark:text-blue-400'
-                : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300',
-            )}
-          >
-            Terminal
-          </button>
-        )}
-      </div>
-
-      {/* Content area */}
-      <div className="flex-1 overflow-hidden flex flex-col relative">
-        {activeTab === 'files' ? (
-          <div className="flex-1 flex min-h-0 overflow-hidden">
-            {/* File tree sidebar using existing FileExplorer */}
-            <FileExplorer
-              currentPath={selectedFile}
-              githubContents={fileTree as any}
-              isSidebarOpen={true}
-              libraryColor="bg-blue-500"
-              prefetchFileContent={() => {}}
-              setCurrentPath={setSelectedFile}
-            />
-
-            {/* Code viewer */}
-            <div className="flex-1 min-w-0 min-h-0 overflow-auto">
-              <CodeViewer
-                filePath={selectedFile}
-                content={selectedFileContent}
-              />
-            </div>
-          </div>
-        ) : canPreview && previewActivated ? (
-          <div className="flex-1 overflow-hidden">
-            <LivePreview />
-          </div>
-        ) : null}
-
-        {/* Terminal panel - only show when preview is activated */}
-        {canPreview && previewActivated && isTerminalOpen && (
-          <Terminal onClose={() => setIsTerminalOpen(false)} />
-        )}
-
-        {/* Loading overlay */}
-        {isFetchingDryRun && (
-          <div className="absolute inset-0 bg-white/50 dark:bg-gray-900/50 backdrop-blur-[1px] flex items-center justify-center z-10">
-            <div className="flex items-center gap-3 px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
-              <div className="w-5 h-5 border-2 border-gray-300 dark:border-gray-600 border-t-blue-500 rounded-full animate-spin" />
-              <span className="text-sm text-gray-600 dark:text-gray-300">
-                Generating...
-              </span>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-type TabButtonProps = {
-  label: string
-  isActive: boolean
-  onClick: () => void
-}
-
-function TabButton({ label, isActive, onClick }: TabButtonProps) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={twMerge(
-        'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
-        isActive
-          ? 'border-blue-500 text-blue-600 dark:text-blue-400'
-          : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300',
-      )}
-    >
-      {label}
-    </button>
-  )
-}
diff --git a/src/components/builder/export/ExportDropdown.tsx b/src/components/builder/export/ExportDropdown.tsx
deleted file mode 100644
index 798d49403..000000000
--- a/src/components/builder/export/ExportDropdown.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-/**
- * ExportDropdown - Export menu with ZIP and CLI command options
- */
-
-import * as React from 'react'
-import { twMerge } from 'tailwind-merge'
-import {
-  useProjectName,
-  useRouterMode,
-  useAddOns,
-  useProjectStarter,
-  useProjectOptions,
-  useDryRun,
-} from '@tanstack/cta-ui-base/dist/store/project'
-import { generateCliCommand } from '../types'
-
-type ExportDropdownProps = {
-  large?: boolean
-}
-
-export function ExportDropdown({ large }: ExportDropdownProps) {
-  const [isOpen, setIsOpen] = React.useState(false)
-  const [copiedCli, setCopiedCli] = React.useState(false)
-  const dropdownRef = React.useRef<HTMLDivElement>(null)
-
-  // CTA state
-  const projectName = useProjectName()
-  const routerMode = useRouterMode()
-  const { chosenAddOns } = useAddOns()
-  const projectStarter = useProjectStarter((s) => s.projectStarter)
-  const dryRun = useDryRun()
-
-  const typescript = useProjectOptions((s) => s.typescript)
-  const tailwind = useProjectOptions((s) => s.tailwind)
-  const files = (dryRun?.files ?? {}) as Record<string, string>
-  const hasFiles = Object.keys(files).length > 0
-
-  // Close dropdown when clicking outside
-  React.useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(e.target as Node)
-      ) {
-        setIsOpen(false)
-      }
-    }
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside)
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [isOpen])
-
-  const cliCommand = generateCliCommand({
-    projectName: projectName || 'my-app',
-    mode: routerMode,
-    typescript,
-    tailwind,
-    addons: chosenAddOns,
-    starter: projectStarter?.id,
-  })
-
-  const handleCopyCli = async () => {
-    try {
-      await navigator.clipboard.writeText(cliCommand)
-      setCopiedCli(true)
-      setTimeout(() => setCopiedCli(false), 2000)
-    } catch {
-      // Fallback
-      const textarea = document.createElement('textarea')
-      textarea.value = cliCommand
-      document.body.appendChild(textarea)
-      textarea.select()
-      document.execCommand('copy')
-      document.body.removeChild(textarea)
-      setCopiedCli(true)
-      setTimeout(() => setCopiedCli(false), 2000)
-    }
-  }
-
-  const handleDownloadZip = async () => {
-    if (!hasFiles) return
-
-    // Dynamically import JSZip
-    const JSZip = (await import('jszip')).default
-    const zip = new JSZip()
-
-    // Add all files to ZIP
-    for (const [path, content] of Object.entries(files)) {
-      // Normalize path (remove leading ./)
-      const normalizedPath = path.replace(/^\.\//, '')
-      zip.file(normalizedPath, content)
-    }
-
-    // Generate and download
-    const blob = await zip.generateAsync({ type: 'blob' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `${projectName || 'tanstack-app'}.zip`
-    document.body.appendChild(a)
-    a.click()
-    document.body.removeChild(a)
-    URL.revokeObjectURL(url)
-
-    setIsOpen(false)
-  }
-
-  return (
-    <div ref={dropdownRef} className="relative">
-      {/* Trigger button */}
-      <button
-        type="button"
-        onClick={() => setIsOpen((p) => !p)}
-        className={twMerge(
-          'flex items-center gap-1 font-medium text-white bg-emerald-600 hover:bg-emerald-700 rounded-md transition-colors',
-          large ? 'px-4 py-2 text-sm' : 'px-2 py-1 text-xs',
-        )}
-      >
-        <span>Export</span>
-        <svg
-          className={twMerge(
-            'transition-transform',
-            large ? 'w-4 h-4' : 'w-3 h-3',
-            isOpen && 'rotate-180',
-          )}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-      </button>
-
-      {/* Dropdown menu */}
-      {isOpen && (
-        <div className="absolute right-0 mt-2 w-72 rounded-lg bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50">
-          {/* Download ZIP */}
-          <button
-            type="button"
-            onClick={handleDownloadZip}
-            className="w-full flex items-start gap-3 px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors text-left"
-          >
-            <div className="w-8 h-8 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center shrink-0">
-              <svg
-                className="w-4 h-4 text-green-600 dark:text-green-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                />
-              </svg>
-            </div>
-            <div>
-              <div className="text-sm font-medium text-gray-900 dark:text-white">
-                Download ZIP
-              </div>
-              <div className="text-xs text-gray-500 dark:text-gray-400">
-                Download project as a ZIP file
-              </div>
-            </div>
-          </button>
-
-          {/* Copy CLI command */}
-          <button
-            type="button"
-            onClick={handleCopyCli}
-            className="w-full flex items-start gap-3 px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors text-left"
-          >
-            <div className="w-8 h-8 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center shrink-0">
-              <svg
-                className="w-4 h-4 text-purple-600 dark:text-purple-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                />
-              </svg>
-            </div>
-            <div>
-              <div className="text-sm font-medium text-gray-900 dark:text-white">
-                {copiedCli ? 'Copied!' : 'Copy CLI Command'}
-              </div>
-              <div className="text-xs text-gray-500 dark:text-gray-400">
-                Use npx create-tanstack-app
-              </div>
-            </div>
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/builder/hooks/useBuilderSearch.ts b/src/components/builder/hooks/useBuilderSearch.ts
deleted file mode 100644
index b91d452e8..000000000
--- a/src/components/builder/hooks/useBuilderSearch.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * Hook for syncing builder state with URL search params
- * Enables shareable builder configurations via URL
- */
-
-import * as React from 'react'
-import { useSearch, useNavigate } from '@tanstack/react-router'
-import {
-  useProjectName,
-  useRouterMode,
-  useAddOns,
-  useProjectStarter,
-  useProjectOptions,
-  useReady,
-  setProjectName,
-  setRouterMode,
-  setTypeScript,
-  setTailwind,
-} from '@tanstack/cta-ui-base/dist/store/project'
-import type { BuilderSearchParams } from '../types'
-
-// Debounce helper to avoid excessive URL updates
-function useDebouncedCallback<TArgs extends unknown[]>(
-  callback: (...args: TArgs) => void,
-  delay: number,
-) {
-  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  return React.useCallback(
-    (...args: TArgs) => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-      }
-      timeoutRef.current = setTimeout(() => {
-        callback(...args)
-      }, delay)
-    },
-    [callback, delay],
-  )
-}
-
-export function useBuilderSearch() {
-  const navigate = useNavigate()
-  const ready = useReady()
-
-  // Get current search params - this will be typed by the route
-  const search = useSearch({ from: '/builder' }) as BuilderSearchParams
-
-  // CTA state hooks - only use useAddOns when ready to avoid iteration bug
-  const projectName = useProjectName()
-  const routerMode = useRouterMode()
-  const addOnsResult = useAddOns()
-  const chosenAddOns = ready ? addOnsResult.chosenAddOns : []
-  const projectStarter = useProjectStarter((s) => s.projectStarter)
-  const typescript = useProjectOptions((s) => s.typescript)
-  const tailwind = useProjectOptions((s) => s.tailwind)
-
-  // Track if we're currently syncing from URL to avoid loops
-  const isSyncingFromUrl = React.useRef(false)
-  const isInitialized = React.useRef(false)
-
-  // Debounced URL update to avoid excessive history entries
-  const updateUrl = useDebouncedCallback((params: BuilderSearchParams) => {
-    if (isSyncingFromUrl.current) return
-
-    navigate({
-      to: '/builder',
-      search: (prev: BuilderSearchParams) => ({
-        ...prev,
-        ...params,
-      }),
-      replace: true,
-    })
-  }, 300)
-
-  // Initialize from URL params on mount
-  React.useEffect(() => {
-    if (isInitialized.current) return
-    isInitialized.current = true
-
-    isSyncingFromUrl.current = true
-
-    // Set project name from URL or use a better default
-    setProjectName(search.name || 'my-tanstack-app')
-
-    if (search.mode) {
-      setRouterMode(search.mode)
-    }
-
-    if (typeof search.ts === 'boolean') {
-      setTypeScript(search.ts)
-    }
-
-    if (typeof search.tw === 'boolean') {
-      setTailwind(search.tw)
-    }
-
-    // Starter and addons need registry to be loaded first
-    // They'll be handled in a separate effect
-
-    // Allow time for CTA to process before enabling URL sync
-    setTimeout(() => {
-      isSyncingFromUrl.current = false
-    }, 500)
-  }, [search])
-
-  // Sync CTA state -> URL (after initialization)
-  React.useEffect(() => {
-    if (!isInitialized.current || isSyncingFromUrl.current) return
-
-    updateUrl({
-      name: projectName || undefined,
-      mode: routerMode as BuilderSearchParams['mode'],
-      ts: typescript,
-      tw: tailwind,
-      starter: projectStarter?.id,
-      addons: chosenAddOns.length > 0 ? chosenAddOns.join(',') : undefined,
-    })
-  }, [
-    projectName,
-    routerMode,
-    chosenAddOns,
-    projectStarter,
-    typescript,
-    tailwind,
-    updateUrl,
-  ])
-
-  // Return current params for consumers
-  return {
-    search,
-    projectName,
-    routerMode,
-    chosenAddOns,
-    projectStarter,
-    typescript,
-    tailwind,
-  }
-}
-
-// Hook for initializing addons from URL after registry loads
-export function useInitializeAddonsFromUrl() {
-  const ready = useReady()
-  const search = useSearch({ from: '/builder' }) as BuilderSearchParams
-  const addOnsResult = useAddOns()
-  const initialized = React.useRef(false)
-
-  // Only access addOns properties when ready
-  const availableAddOns = ready ? addOnsResult.availableAddOns : []
-  const chosenAddOns = ready ? addOnsResult.chosenAddOns : []
-  const toggleAddOn = addOnsResult.toggleAddOn
-
-  React.useEffect(() => {
-    if (!ready) return
-    if (initialized.current) return
-    if (!search.addons) return
-    if (availableAddOns.length === 0) return
-
-    initialized.current = true
-
-    const urlAddons = search.addons.split(',').filter(Boolean)
-
-    for (const addonId of urlAddons) {
-      const addon = availableAddOns.find((a) => a.id === addonId)
-      if (addon && !chosenAddOns.includes(addonId)) {
-        toggleAddOn(addonId)
-      }
-    }
-  }, [ready, search.addons, availableAddOns, toggleAddOn, chosenAddOns])
-}
diff --git a/src/components/builder/index.ts b/src/components/builder/index.ts
index af07c1b75..c1f95f529 100644
--- a/src/components/builder/index.ts
+++ b/src/components/builder/index.ts
@@ -1,34 +1,17 @@
 /**
- * Builder component exports
+ * Builder v2 Components
+ *
+ * New builder implementation using the internal builder engine API.
  */
 
 export { BuilderProvider } from './BuilderProvider'
-export { BuilderLayout } from './BuilderLayout'
-
-// Config components
-export { ConfigPanel } from './config/ConfigPanel'
-export { TemplatePicker } from './config/TemplatePicker'
-export { ProjectConfig } from './config/ProjectConfig'
-export { AddOnSection } from './config/AddOnSection'
-export { AddOnCard } from './config/AddOnCard'
-
-// Explorer components
-export { ExplorerPanel } from './explorer/ExplorerPanel'
-export { CodeViewer } from './explorer/CodeViewer'
-
-// Preview components
-export { LivePreview } from './preview/LivePreview'
-export { PreviewLoading } from './preview/PreviewLoading'
-export { Terminal } from './preview/Terminal'
-
-// Export components
-export { ExportDropdown } from './export/ExportDropdown'
-
-// Types
-export * from './types'
-
-// Hooks
+export { FeaturePicker, FeatureOptions } from './FeaturePicker'
 export {
-  useBuilderSearch,
-  useInitializeAddonsFromUrl,
-} from './hooks/useBuilderSearch'
+  useBuilderStore,
+  useProjectName,
+  useFeatures,
+  useAvailableFeatures,
+  useFeaturesLoaded,
+  useFeatureState,
+} from './store'
+export { useBuilderUrl, useCliCommand } from './useBuilderUrl'
diff --git a/src/components/builder/preview/LivePreview.tsx b/src/components/builder/preview/LivePreview.tsx
deleted file mode 100644
index e8ee82459..000000000
--- a/src/components/builder/preview/LivePreview.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * LivePreview - WebContainer iframe with controls
- */
-
-import * as React from 'react'
-import { useWebContainer } from '@tanstack/cta-ui-base'
-import { PreviewLoading } from './PreviewLoading'
-
-export function LivePreview() {
-  const webContainer = useWebContainer()
-  const [refreshKey, setRefreshKey] = React.useState(0)
-
-  // Track WebContainer state reactively
-  const [state, setState] = React.useState(() => ({
-    previewUrl: webContainer?.getState().previewUrl ?? null,
-    ready: webContainer?.getState().ready ?? false,
-    error: webContainer?.getState().error ?? null,
-    setupStep: webContainer?.getState().setupStep ?? 'idle',
-  }))
-
-  // Subscribe to state changes
-  React.useEffect(() => {
-    if (!webContainer) return
-
-    // Set initial state
-    const initial = webContainer.getState()
-    setState({
-      previewUrl: initial.previewUrl,
-      ready: initial.ready,
-      error: initial.error,
-      setupStep: initial.setupStep,
-    })
-
-    const unsubscribe = webContainer.subscribe((newState) => {
-      setState({
-        previewUrl: newState.previewUrl,
-        ready: newState.ready,
-        error: newState.error,
-        setupStep: newState.setupStep,
-      })
-    })
-
-    return unsubscribe
-  }, [webContainer])
-
-  const handleRefresh = () => {
-    setRefreshKey((k) => k + 1)
-  }
-
-  // Show loading state - use setupStep since ready flag may not be set
-  const isReady = state.setupStep === 'ready' && state.previewUrl
-  if (!isReady) {
-    return <PreviewLoading setupStep={state.setupStep} error={state.error} />
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Toolbar */}
-      <div className="flex items-center gap-2 px-3 py-2 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
-        {/* Refresh button */}
-        <button
-          type="button"
-          onClick={handleRefresh}
-          className="p-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-          title="Refresh preview"
-        >
-          <svg
-            className="w-4 h-4 text-gray-500 dark:text-gray-400"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-            />
-          </svg>
-        </button>
-
-        {/* URL bar */}
-        <div className="flex-1 px-3 py-1.5 rounded bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-sm font-mono text-gray-600 dark:text-gray-400 truncate">
-          {state.previewUrl}
-        </div>
-
-        {/* Note: WebContainer URLs are internal and can't be opened externally */}
-        <span
-          className="p-1.5 rounded text-gray-300 dark:text-gray-600 cursor-not-allowed"
-          title="WebContainer preview can only run in this iframe"
-        >
-          <svg
-            className="w-4 h-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-            />
-          </svg>
-        </span>
-      </div>
-
-      {/* Iframe */}
-      <div className="flex-1 bg-white">
-        <iframe
-          key={refreshKey}
-          src={state.previewUrl ?? undefined}
-          title="Live Preview"
-          className="w-full h-full border-0"
-          sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/builder/preview/PreviewLoading.tsx b/src/components/builder/preview/PreviewLoading.tsx
deleted file mode 100644
index e4eeb2ee7..000000000
--- a/src/components/builder/preview/PreviewLoading.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * PreviewLoading - Loading and error states for WebContainer preview
- */
-
-import * as React from 'react'
-import { twMerge } from 'tailwind-merge'
-import { SETUP_STEP_LABELS, type SetupStep } from '../types'
-
-type PreviewLoadingProps = {
-  setupStep: SetupStep | string
-  error: string | null
-}
-
-export function PreviewLoading({ setupStep, error }: PreviewLoadingProps) {
-  if (error) {
-    return (
-      <div className="flex items-center justify-center h-full bg-gray-50 dark:bg-gray-900">
-        <div className="flex flex-col items-center gap-4 max-w-md text-center p-6">
-          <div className="w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
-            <svg
-              className="w-6 h-6 text-red-500"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-              />
-            </svg>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
-              Preview Error
-            </h3>
-            <p className="text-sm text-gray-500 dark:text-gray-400">{error}</p>
-          </div>
-          <p className="text-xs text-gray-400 dark:text-gray-500">
-            WebContainer requires specific browser headers. Make sure COOP/COEP
-            headers are configured.
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  const stepLabel = SETUP_STEP_LABELS[setupStep as SetupStep] ?? setupStep
-
-  return (
-    <div className="flex items-center justify-center h-full bg-gray-50 dark:bg-gray-900">
-      <div className="flex flex-col items-center gap-6">
-        {/* Spinner */}
-        <div className="relative">
-          <div className="w-16 h-16 rounded-full border-4 border-gray-200 dark:border-gray-700" />
-          <div className="absolute inset-0 w-16 h-16 rounded-full border-4 border-transparent border-t-blue-500 animate-spin" />
-        </div>
-
-        {/* Status */}
-        <div className="text-center">
-          <p className="text-sm font-medium text-gray-900 dark:text-white mb-1">
-            {stepLabel}
-          </p>
-          <p className="text-xs text-gray-500 dark:text-gray-400">
-            Setting up your development environment
-          </p>
-        </div>
-
-        {/* Progress steps */}
-        <div className="flex items-center gap-2">
-          <ProgressStep
-            label="Mount"
-            isActive={setupStep === 'mounting'}
-            isComplete={isStepComplete('mounting', setupStep as SetupStep)}
-          />
-          <ProgressConnector
-            isComplete={isStepComplete('mounting', setupStep as SetupStep)}
-          />
-          <ProgressStep
-            label="Install"
-            isActive={setupStep === 'installing'}
-            isComplete={isStepComplete('installing', setupStep as SetupStep)}
-          />
-          <ProgressConnector
-            isComplete={isStepComplete('installing', setupStep as SetupStep)}
-          />
-          <ProgressStep
-            label="Start"
-            isActive={setupStep === 'starting'}
-            isComplete={isStepComplete('starting', setupStep as SetupStep)}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function isStepComplete(step: SetupStep, currentStep: SetupStep): boolean {
-  const order: SetupStep[] = [
-    'idle',
-    'mounting',
-    'installing',
-    'starting',
-    'ready',
-  ]
-  const stepIndex = order.indexOf(step)
-  const currentIndex = order.indexOf(currentStep)
-  return currentIndex > stepIndex
-}
-
-type ProgressStepProps = {
-  label: string
-  isActive: boolean
-  isComplete: boolean
-}
-
-function ProgressStep({ label, isActive, isComplete }: ProgressStepProps) {
-  return (
-    <div className="flex flex-col items-center gap-1">
-      <div
-        className={twMerge(
-          'w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium transition-colors',
-          isComplete
-            ? 'bg-green-500 text-white'
-            : isActive
-              ? 'bg-blue-500 text-white'
-              : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400',
-        )}
-      >
-        {isComplete ? (
-          <svg
-            className="w-4 h-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={3}
-              d="M5 13l4 4L19 7"
-            />
-          </svg>
-        ) : (
-          <span>{label[0]}</span>
-        )}
-      </div>
-      <span className="text-[10px] text-gray-500 dark:text-gray-400">
-        {label}
-      </span>
-    </div>
-  )
-}
-
-function ProgressConnector({ isComplete }: { isComplete: boolean }) {
-  return (
-    <div
-      className={twMerge(
-        'w-8 h-0.5 -mt-4',
-        isComplete ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-700',
-      )}
-    />
-  )
-}
diff --git a/src/components/builder/preview/Terminal.tsx b/src/components/builder/preview/Terminal.tsx
deleted file mode 100644
index 764f8c0c1..000000000
--- a/src/components/builder/preview/Terminal.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * Terminal - Collapsible terminal output panel
- */
-
-import * as React from 'react'
-import { useWebContainer } from '@tanstack/cta-ui-base'
-
-type TerminalProps = {
-  onClose: () => void
-}
-
-export function Terminal({ onClose }: TerminalProps) {
-  const webContainer = useWebContainer()
-  const scrollRef = React.useRef<HTMLDivElement>(null)
-  const [output, setOutput] = React.useState<string[]>([])
-
-  // Subscribe to terminal output
-  React.useEffect(() => {
-    if (!webContainer) return
-
-    // Get initial output
-    setOutput(webContainer.getState().terminalOutput)
-
-    // Subscribe to updates
-    const unsubscribe = webContainer.subscribe((state) => {
-      setOutput(state.terminalOutput)
-    })
-
-    return unsubscribe
-  }, [webContainer])
-
-  // Auto-scroll to bottom
-  React.useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
-    }
-  }, [output])
-
-  return (
-    <div className="h-48 border-t border-gray-200 dark:border-gray-700 flex flex-col bg-gray-50 dark:bg-gray-950">
-      {/* Header */}
-      <div className="flex items-center justify-between px-3 py-1.5 border-b border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-900">
-        <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
-          Terminal
-        </span>
-        <div className="flex items-center gap-1">
-          {/* Clear button */}
-          <button
-            type="button"
-            onClick={() => webContainer?.getState().setTerminalOutput([])}
-            className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-            title="Clear terminal"
-          >
-            <svg
-              className="w-3.5 h-3.5 text-gray-500 dark:text-gray-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-              />
-            </svg>
-          </button>
-
-          {/* Close button */}
-          <button
-            type="button"
-            onClick={onClose}
-            className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-            title="Close terminal"
-          >
-            <svg
-              className="w-3.5 h-3.5 text-gray-500 dark:text-gray-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-
-      {/* Output */}
-      <div
-        ref={scrollRef}
-        className="flex-1 overflow-auto p-3 font-mono text-xs leading-relaxed"
-      >
-        {output.length === 0 ? (
-          <span className="text-gray-400 dark:text-gray-500">
-            Waiting for output...
-          </span>
-        ) : (
-          output.map((line, index) => (
-            <div key={index} className="whitespace-pre-wrap">
-              <span className={getLineColor(line)}>{line}</span>
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  )
-}
-
-function getLineColor(line: string): string {
-  const lineLower = line.toLowerCase()
-
-  if (lineLower.includes('error') || lineLower.includes('failed')) {
-    return 'text-red-600 dark:text-red-400'
-  }
-
-  if (lineLower.includes('warning') || lineLower.includes('warn')) {
-    return 'text-yellow-600 dark:text-yellow-400'
-  }
-
-  if (
-    lineLower.includes('success') ||
-    lineLower.includes('ready') ||
-    lineLower.includes('done')
-  ) {
-    return 'text-green-600 dark:text-green-400'
-  }
-
-  if (line.startsWith('>') || line.startsWith('$')) {
-    return 'text-blue-600 dark:text-blue-400'
-  }
-
-  return 'text-gray-700 dark:text-gray-300'
-}
diff --git a/src/components/builder/store.ts b/src/components/builder/store.ts
new file mode 100644
index 000000000..e16eb8ed9
--- /dev/null
+++ b/src/components/builder/store.ts
@@ -0,0 +1,506 @@
+/**
+ * Builder Store (v2)
+ *
+ * Local state management for the new builder using Zustand.
+ * No external CTA dependencies.
+ */
+
+import { create } from 'zustand'
+import { subscribeWithSelector } from 'zustand/middleware'
+import type {
+  FeatureId,
+  FeatureInfo,
+  ProjectDefinition,
+  IntegrationCompiled,
+  CustomTemplateCompiled,
+} from '~/builder/api'
+import type { FrameworkId } from '~/builder/frameworks'
+import {
+  getRecipeBuilderFeatures,
+  isCliTemplateId,
+  type ApplicationStarterRecipe,
+} from '~/utils/application-starter'
+import { TEMPLATES } from '~/builder/templates'
+
+type PackageManager = 'pnpm' | 'npm' | 'yarn' | 'bun'
+
+interface BuilderState {
+  // Project configuration
+  projectName: string
+  framework: FrameworkId
+  tailwind: boolean
+  features: Array<FeatureId>
+  featureOptions: Record<string, Record<string, unknown>>
+
+  // Selected example (single-select, locks its dependencies)
+  selectedExample: FeatureId | null
+
+  // Selected template preset
+  selectedTemplate: string | null
+
+  // CLI options
+  packageManager: PackageManager
+  skipInstall: boolean
+  skipGit: boolean
+
+  // Custom integrations/templates (loaded from URLs)
+  customIntegrations: Array<IntegrationCompiled>
+  customTemplate: CustomTemplateCompiled | null
+
+  // Registry data (loaded from API)
+  availableFeatures: Array<FeatureInfo>
+  availableExamples: Array<FeatureInfo>
+  featuresLoaded: boolean
+
+  // UI state
+  integrationSearch: string
+
+  // Actions
+  setProjectName: (name: string) => void
+  setFramework: (framework: FrameworkId) => void
+  setTailwind: (enabled: boolean) => void
+  toggleFeature: (id: FeatureId) => void
+  setFeatureOption: (
+    featureId: FeatureId,
+    optionKey: string,
+    value: unknown,
+  ) => void
+  setFeatures: (features: Array<FeatureId>) => void
+  selectExample: (id: FeatureId | null) => void
+  setPackageManager: (pm: PackageManager) => void
+  setSkipInstall: (skip: boolean) => void
+  setSkipGit: (skip: boolean) => void
+  addCustomIntegration: (integration: IntegrationCompiled) => void
+  removeCustomIntegration: (id: string) => void
+  setCustomTemplate: (template: CustomTemplateCompiled | null) => void
+  setIntegrationSearch: (search: string) => void
+  setTemplate: (id: string | null) => void
+  applyStarterRecipe: (recipe: ApplicationStarterRecipe) => Promise<void>
+  loadFeatures: () => Promise<void>
+  reset: () => void
+
+  // Derived state helpers
+  hasFeature: (id: FeatureId) => boolean
+  getFeatureInfo: (id: FeatureId) => FeatureInfo | undefined
+  getExampleInfo: (id: FeatureId) => FeatureInfo | undefined
+  getDefinition: () => ProjectDefinition
+  isFeatureLockedByExample: (id: FeatureId) => boolean
+}
+
+const initialState = {
+  projectName: 'my-tanstack-app',
+  framework: 'react' as FrameworkId,
+  tailwind: true,
+  features: [] as Array<FeatureId>,
+  featureOptions: {} as Record<string, Record<string, unknown>>,
+  selectedExample: null as FeatureId | null,
+  selectedTemplate: 'blank' as string | null,
+  packageManager: 'pnpm' as PackageManager,
+  skipInstall: false,
+  skipGit: false,
+  customIntegrations: [] as Array<IntegrationCompiled>,
+  customTemplate: null as CustomTemplateCompiled | null,
+  availableFeatures: [] as Array<FeatureInfo>,
+  availableExamples: [] as Array<FeatureInfo>,
+  integrationSearch: '',
+  featuresLoaded: false,
+}
+
+export const useBuilderStore = create<BuilderState>()(
+  subscribeWithSelector((set, get) => ({
+    ...initialState,
+
+    setProjectName: (name) => set({ projectName: name }),
+
+    setFramework: (framework) => {
+      set({
+        framework,
+        features: [],
+        featureOptions: {},
+        selectedExample: null,
+        selectedTemplate: 'blank',
+        availableFeatures: [],
+        availableExamples: [],
+        featuresLoaded: false,
+      })
+      get().loadFeatures()
+    },
+
+    setTailwind: (enabled) => {
+      const { features, availableFeatures } = get()
+      if (!enabled) {
+        const filtered = features.filter((id) => {
+          const feature = availableFeatures.find((f) => f.id === id)
+          return !feature?.requiresTailwind
+        })
+        set({ tailwind: enabled, features: filtered })
+      } else {
+        set({ tailwind: enabled })
+      }
+    },
+
+    toggleFeature: (id) => {
+      const {
+        features,
+        availableFeatures,
+        selectedExample,
+        availableExamples,
+      } = get()
+
+      // Check if this feature is locked by selected example
+      if (selectedExample) {
+        const example = availableExamples.find((e) => e.id === selectedExample)
+        if (example?.requires.includes(id)) {
+          return // Can't toggle features locked by example
+        }
+      }
+
+      const isSelected = features.includes(id)
+
+      if (isSelected) {
+        const toRemove = new Set([id])
+        for (const f of availableFeatures) {
+          if (f.requires.includes(id) && features.includes(f.id)) {
+            toRemove.add(f.id)
+          }
+        }
+        set({ features: features.filter((f) => !toRemove.has(f)) })
+      } else {
+        const feature = availableFeatures.find((f) => f.id === id)
+        if (!feature) return
+
+        const exclusiveConflicts = new Set<FeatureId>()
+        if (feature.exclusive.length > 0) {
+          for (const existingId of features) {
+            const existing = availableFeatures.find((f) => f.id === existingId)
+            if (
+              existing?.exclusive.some((e) => feature.exclusive.includes(e))
+            ) {
+              exclusiveConflicts.add(existingId)
+            }
+          }
+        }
+
+        if (exclusiveConflicts.size > 0) {
+          const withoutConflicts = features.filter(
+            (f) => !exclusiveConflicts.has(f),
+          )
+          set({
+            features: [...withoutConflicts, ...feature.requires, id],
+          })
+        } else {
+          const newFeatures = new Set([...features, ...feature.requires, id])
+          set({ features: Array.from(newFeatures) })
+        }
+      }
+    },
+
+    setFeatureOption: (featureId, optionKey, value) => {
+      const { featureOptions } = get()
+      set({
+        featureOptions: {
+          ...featureOptions,
+          [featureId]: {
+            ...featureOptions[featureId],
+            [optionKey]: value,
+          },
+        },
+      })
+    },
+
+    setFeatures: (features) => set({ features }),
+
+    selectExample: (id) => {
+      const { availableExamples, features } = get()
+
+      if (id === null) {
+        // Deselecting example - remove its locked dependencies from features
+        const currentExample = get().selectedExample
+        if (currentExample) {
+          const example = availableExamples.find((e) => e.id === currentExample)
+          if (example) {
+            const lockedFeatures = new Set(example.requires)
+            set({
+              selectedExample: null,
+              features: features.filter((f) => !lockedFeatures.has(f)),
+            })
+            return
+          }
+        }
+        set({ selectedExample: null })
+        return
+      }
+
+      const example = availableExamples.find((e) => e.id === id)
+      if (!example) return
+
+      // Add example's required features (locked)
+      const newFeatures = new Set([...features, ...example.requires])
+
+      set({
+        selectedExample: id,
+        features: Array.from(newFeatures),
+      })
+    },
+
+    setPackageManager: (pm) => set({ packageManager: pm }),
+    setSkipInstall: (skip) => set({ skipInstall: skip }),
+    setSkipGit: (skip) => set({ skipGit: skip }),
+
+    addCustomIntegration: (integration) => {
+      const { customIntegrations, features, availableFeatures } = get()
+      if (customIntegrations.some((i) => i.id === integration.id)) return
+
+      const featureInfo: FeatureInfo = {
+        id: integration.id,
+        name: integration.name,
+        description: integration.description,
+        category: 'other',
+        requires: integration.dependsOn ?? [],
+        exclusive: [],
+        hasOptions: !!integration.options,
+        link: integration.link,
+        color: '#8B5CF6',
+        requiresTailwind: integration.tailwind === false ? true : undefined,
+      }
+
+      set({
+        customIntegrations: [...customIntegrations, integration],
+        availableFeatures: [...availableFeatures, featureInfo],
+        features: [...features, integration.id],
+      })
+    },
+
+    removeCustomIntegration: (id) => {
+      const { customIntegrations, features, availableFeatures } = get()
+      set({
+        customIntegrations: customIntegrations.filter((i) => i.id !== id),
+        availableFeatures: availableFeatures.filter((f) => f.id !== id),
+        features: features.filter((f) => f !== id),
+      })
+    },
+
+    setCustomTemplate: (template) => {
+      set({ customTemplate: template })
+    },
+
+    setIntegrationSearch: (search) => {
+      set({ integrationSearch: search })
+    },
+
+    setTemplate: (id) => {
+      const template = TEMPLATES.find((t) => t.id === id)
+      if (!template) return
+
+      const { availableFeatures, availableExamples } = get()
+
+      // Filter to only features that exist in current framework
+      const validFeatures = template.features.filter((f) =>
+        availableFeatures.some((af) => af.id === f),
+      )
+
+      const example = template.exampleId
+        ? availableExamples.find((e) => e.id === template.exampleId)
+        : undefined
+      const exampleLockedFeatures = example?.requires ?? []
+      const featuresWithExampleDeps = Array.from(
+        new Set([...validFeatures, ...exampleLockedFeatures]),
+      ).filter((f) => availableFeatures.some((af) => af.id === f))
+
+      set({
+        selectedTemplate: id,
+        features: featuresWithExampleDeps,
+        featureOptions: {},
+        selectedExample: example?.id ?? null,
+      })
+    },
+
+    applyStarterRecipe: async (recipe) => {
+      if (get().framework !== recipe.framework) {
+        set({
+          framework: recipe.framework,
+          features: [],
+          featureOptions: {},
+          selectedExample: null,
+          selectedTemplate: 'blank',
+          availableFeatures: [],
+          availableExamples: [],
+          featuresLoaded: false,
+        })
+        await get().loadFeatures()
+      } else if (!get().featuresLoaded) {
+        await get().loadFeatures()
+      }
+
+      const { availableFeatures, availableExamples, projectName } = get()
+      const validFeatures = getRecipeBuilderFeatures(recipe).filter(
+        (featureId) =>
+          availableFeatures.some((feature) => feature.id === featureId),
+      )
+
+      const recipeTemplateIsExample = isCliTemplateId(recipe.template)
+      const exampleLockedFeatures = recipeTemplateIsExample
+        ? (availableExamples.find((e) => e.id === recipe.template)?.requires ??
+          [])
+        : []
+
+      // featureOptions are valid for any add-on the project will end up with —
+      // either explicitly chosen features or those locked by the selected example.
+      const optionEligibleFeatures = new Set([
+        ...validFeatures,
+        ...exampleLockedFeatures,
+      ])
+      const nextFeatureOptions = Object.fromEntries(
+        Object.entries(recipe.featureOptions).filter(([featureId]) =>
+          optionEligibleFeatures.has(featureId),
+        ),
+      )
+
+      set({
+        projectName: recipe.projectName ?? projectName,
+        tailwind: recipe.tailwind,
+        features: validFeatures,
+        featureOptions: nextFeatureOptions,
+        selectedExample: recipeTemplateIsExample ? recipe.template! : null,
+        selectedTemplate: recipeTemplateIsExample
+          ? null
+          : (recipe.template ?? null),
+        packageManager: recipe.packageManager,
+        skipInstall: false,
+        skipGit: false,
+      })
+    },
+
+    loadFeatures: async () => {
+      try {
+        if (import.meta.env.SSR) {
+          throw new Error('Builder features are only loaded in the browser')
+        }
+
+        const { framework } = get()
+        const { getFeaturesHandler } = await import('~/builder/api/features')
+        const data = await getFeaturesHandler(framework)
+        set({
+          availableFeatures: data.features,
+          availableExamples: data.examples || [],
+          featuresLoaded: true,
+        })
+        // Apply blank template after features load to set default features
+        get().setTemplate('blank')
+      } catch (error) {
+        console.error('Failed to load features:', error)
+        set({ featuresLoaded: true })
+      }
+    },
+
+    reset: () => set(initialState),
+
+    hasFeature: (id) => get().features.includes(id),
+
+    getFeatureInfo: (id) => get().availableFeatures.find((f) => f.id === id),
+
+    getExampleInfo: (id) => get().availableExamples.find((e) => e.id === id),
+
+    getDefinition: () => ({
+      name: get().projectName,
+      framework: get().framework,
+      features: get().features,
+      featureOptions: get().featureOptions,
+      selectedExample: get().selectedExample ?? undefined,
+    }),
+
+    isFeatureLockedByExample: (id) => {
+      const { selectedExample, availableExamples } = get()
+      if (!selectedExample) return false
+      const example = availableExamples.find((e) => e.id === selectedExample)
+      return example?.requires.includes(id) ?? false
+    },
+  })),
+)
+
+// Selector hooks for common patterns
+export const useProjectName = () => useBuilderStore((s) => s.projectName)
+export const useFramework = () => useBuilderStore((s) => s.framework)
+export const useTailwind = () => useBuilderStore((s) => s.tailwind)
+export const useFeatures = () => useBuilderStore((s) => s.features)
+export const useFeatureOptions = () => useBuilderStore((s) => s.featureOptions)
+export const useSelectedExample = () =>
+  useBuilderStore((s) => s.selectedExample)
+export const usePackageManager = () => useBuilderStore((s) => s.packageManager)
+export const useSkipInstall = () => useBuilderStore((s) => s.skipInstall)
+export const useSkipGit = () => useBuilderStore((s) => s.skipGit)
+export const useAvailableFeatures = () =>
+  useBuilderStore((s) => s.availableFeatures)
+export const useAvailableExamples = () =>
+  useBuilderStore((s) => s.availableExamples)
+export const useFeaturesLoaded = () => useBuilderStore((s) => s.featuresLoaded)
+export const useCustomIntegrations = () =>
+  useBuilderStore((s) => s.customIntegrations)
+export const useCustomTemplate = () => useBuilderStore((s) => s.customTemplate)
+export const useIntegrationSearch = () =>
+  useBuilderStore((s) => s.integrationSearch)
+export const useSelectExample = () => useBuilderStore((s) => s.selectExample)
+export const useSelectedTemplate = () =>
+  useBuilderStore((s) => s.selectedTemplate)
+
+// Feature state with exclusive/requirement analysis
+export function useFeatureState(id: FeatureId) {
+  const features = useBuilderStore((s) => s.features)
+  const tailwind = useBuilderStore((s) => s.tailwind)
+  const availableFeatures = useBuilderStore((s) => s.availableFeatures)
+  const isFeatureLockedByExample = useBuilderStore(
+    (s) => s.isFeatureLockedByExample,
+  )
+
+  const feature = availableFeatures.find((f) => f.id === id)
+  if (!feature) {
+    return {
+      selected: false,
+      enabled: false,
+      disabledReason: null as string | null,
+      exclusiveConflict: null as FeatureId | null,
+      requiredBy: null as FeatureId | null,
+      lockedByExample: false,
+    }
+  }
+
+  const selected = features.includes(id)
+  const lockedByExample = isFeatureLockedByExample(id)
+
+  // Check if disabled due to Tailwind requirement
+  const needsTailwind = feature.requiresTailwind && !tailwind
+
+  // Check if there's a feature with overlapping exclusive type selected
+  const exclusiveConflict =
+    feature.exclusive.length > 0
+      ? (availableFeatures.find(
+          (f) =>
+            f.id !== id &&
+            features.includes(f.id) &&
+            f.exclusive.some((e) => feature.exclusive.includes(e)),
+        )?.id as FeatureId | null)
+      : null
+
+  // Check if required by another selected feature (truly disables toggling off)
+  const requiredBy = availableFeatures.find(
+    (f) => features.includes(f.id) && f.requires.includes(id),
+  )?.id
+
+  // Determine disabled reason
+  const disabledReason = needsTailwind
+    ? 'Requires Tailwind CSS'
+    : lockedByExample
+      ? 'Required by selected example'
+      : requiredBy
+        ? `Required by ${availableFeatures.find((f) => f.id === requiredBy)?.name ?? requiredBy}`
+        : null
+
+  return {
+    selected,
+    enabled: !needsTailwind,
+    disabledReason,
+    exclusiveConflict,
+    requiredBy: requiredBy || null,
+    lockedByExample,
+  }
+}
diff --git a/src/components/builder/types.ts b/src/components/builder/types.ts
deleted file mode 100644
index 329e4b713..000000000
--- a/src/components/builder/types.ts
+++ /dev/null
@@ -1,311 +0,0 @@
-/**
- * Shared types for the Builder UI components
- */
-
-// URL search params for shareable builder state
-export type BuilderSearchParams = {
-  name?: string
-  mode?: 'file-router' | 'code-router'
-  ts?: boolean
-  tw?: boolean
-  starter?: string
-  addons?: string // comma-separated addon IDs
-}
-
-// Add-on categories for grouping in the UI
-export type AddOnCategory =
-  | 'auth'
-  | 'database'
-  | 'data'
-  | 'ui'
-  | 'tooling'
-  | 'deployment'
-  | 'example'
-
-// Category metadata for display
-export const ADD_ON_CATEGORIES: Record<
-  AddOnCategory,
-  { label: string; description: string }
-> = {
-  database: {
-    label: 'Database',
-    description: 'Database clients and ORMs',
-  },
-  auth: {
-    label: 'Authentication',
-    description: 'User authentication and authorization',
-  },
-  data: {
-    label: 'Data & APIs',
-    description: 'Data fetching, state management, and API integrations',
-  },
-  ui: {
-    label: 'UI & Forms',
-    description: 'Component libraries, forms, and styling',
-  },
-  tooling: {
-    label: 'Tooling',
-    description: 'Development tools, testing, and utilities',
-  },
-  deployment: {
-    label: 'Deployment',
-    description: 'Hosting and deployment platforms',
-  },
-  example: {
-    label: 'Examples',
-    description: 'Example code and templates',
-  },
-}
-
-// Explicit category overrides for specific add-on IDs
-const ADDON_CATEGORY_OVERRIDES: Record<string, AddOnCategory> = {
-  // Database
-  neon: 'database',
-  drizzle: 'database',
-  prisma: 'database',
-  convex: 'database',
-  turso: 'database',
-
-  // Auth
-  clerk: 'auth',
-  workos: 'auth',
-
-  // Data & APIs
-  query: 'data',
-  'tanstack-query': 'data',
-  'apollo-client': 'data',
-  trpc: 'data',
-  orpc: 'data',
-  store: 'data',
-  'tanstack-store': 'data',
-  ai: 'data',
-
-  // UI & Forms
-  shadcn: 'ui',
-  form: 'ui',
-  'tanstack-form': 'ui',
-  table: 'ui',
-  'tanstack-table': 'ui',
-
-  // Tooling
-  biome: 'tooling',
-  eslint: 'tooling',
-  sentry: 'tooling',
-  storybook: 'tooling',
-  compiler: 'tooling',
-  't3-env': 'tooling',
-  t3env: 'tooling',
-  paraglide: 'tooling',
-  mcp: 'tooling',
-  strapi: 'tooling',
-
-  // Deployment
-  netlify: 'deployment',
-  cloudflare: 'deployment',
-  vercel: 'deployment',
-  nitro: 'deployment',
-}
-
-// Map add-on type from CTA to our categories
-export function getAddOnCategory(type: string, id: string): AddOnCategory {
-  const idLower = id.toLowerCase()
-
-  // Check explicit overrides first
-  if (ADDON_CATEGORY_OVERRIDES[idLower]) {
-    return ADDON_CATEGORY_OVERRIDES[idLower]
-  }
-
-  // Check type field from CTA
-  switch (type) {
-    case 'deployment':
-      return 'deployment'
-    case 'toolchain':
-      return 'tooling'
-    case 'example':
-      return 'example'
-  }
-
-  // Fallback: infer from ID patterns
-  if (
-    idLower.includes('auth') ||
-    idLower.includes('clerk') ||
-    idLower.includes('lucia')
-  ) {
-    return 'auth'
-  }
-
-  if (
-    idLower.includes('drizzle') ||
-    idLower.includes('prisma') ||
-    idLower.includes('convex') ||
-    idLower.includes('supabase') ||
-    idLower.includes('postgres') ||
-    idLower.includes('sqlite') ||
-    idLower.includes('turso') ||
-    idLower.includes('neon') ||
-    idLower.includes('db')
-  ) {
-    return 'database'
-  }
-
-  if (
-    idLower.includes('query') ||
-    idLower.includes('apollo') ||
-    idLower.includes('trpc') ||
-    idLower.includes('orpc') ||
-    idLower.includes('store')
-  ) {
-    return 'data'
-  }
-
-  if (
-    idLower.includes('shadcn') ||
-    idLower.includes('radix') ||
-    idLower.includes('form') ||
-    idLower.includes('table')
-  ) {
-    return 'ui'
-  }
-
-  if (
-    idLower.includes('eslint') ||
-    idLower.includes('prettier') ||
-    idLower.includes('biome') ||
-    idLower.includes('test') ||
-    idLower.includes('vitest') ||
-    idLower.includes('sentry') ||
-    idLower.includes('storybook') ||
-    idLower.includes('compiler')
-  ) {
-    return 'tooling'
-  }
-
-  if (
-    idLower.includes('vercel') ||
-    idLower.includes('netlify') ||
-    idLower.includes('cloudflare') ||
-    idLower.includes('docker') ||
-    idLower.includes('nitro')
-  ) {
-    return 'deployment'
-  }
-
-  // Default to tooling instead of "other" since most uncategorized things are tools
-  return 'tooling'
-}
-
-// File tree node structure (converted from flat file map)
-export type FileTreeNode = {
-  name: string
-  path: string
-  type: 'file' | 'directory'
-  children?: FileTreeNode[]
-  depth: number
-}
-
-// Convert flat file map to tree structure
-export function filesToTree(files: Record<string, string>): FileTreeNode[] {
-  const root: FileTreeNode[] = []
-  const paths = Object.keys(files).sort()
-
-  for (const filePath of paths) {
-    const parts = filePath.replace(/^\.\//, '').split('/')
-    let currentLevel = root
-
-    for (let i = 0; i < parts.length; i++) {
-      const part = parts[i]
-      const isFile = i === parts.length - 1
-      const currentPath = parts.slice(0, i + 1).join('/')
-
-      let existing = currentLevel.find((n) => n.name === part)
-
-      if (!existing) {
-        existing = {
-          name: part,
-          path: currentPath,
-          type: isFile ? 'file' : 'directory',
-          depth: i,
-          children: isFile ? undefined : [],
-        }
-        currentLevel.push(existing)
-      }
-
-      if (!isFile && existing.children) {
-        currentLevel = existing.children
-      }
-    }
-  }
-
-  // Sort: directories first, then alphabetically
-  const sortNodes = (nodes: FileTreeNode[]): FileTreeNode[] => {
-    return nodes
-      .sort((a, b) => {
-        if (a.type !== b.type) {
-          return a.type === 'directory' ? -1 : 1
-        }
-        return a.name.localeCompare(b.name)
-      })
-      .map((node) => ({
-        ...node,
-        children: node.children ? sortNodes(node.children) : undefined,
-      }))
-  }
-
-  return sortNodes(root)
-}
-
-// Generate CLI command from options
-export function generateCliCommand(options: {
-  projectName: string
-  mode: string
-  typescript: boolean
-  tailwind: boolean
-  addons: string[]
-  starter?: string
-}): string {
-  const args = [`npx create-tanstack-app@latest ${options.projectName}`]
-
-  if (options.mode === 'code-router') {
-    args.push('--mode code-router')
-  }
-
-  if (!options.typescript) {
-    args.push('--no-typescript')
-  }
-
-  if (!options.tailwind) {
-    args.push('--no-tailwind')
-  }
-
-  if (options.starter) {
-    args.push(`--starter ${options.starter}`)
-  }
-
-  if (options.addons.length > 0) {
-    args.push(`--add-ons ${options.addons.join(',')}`)
-  }
-
-  return args.join(' \\\n  ')
-}
-
-// Explorer panel tab type
-export type ExplorerTab = 'files' | 'preview'
-
-// WebContainer setup steps for progress display
-// These match the CTA WebContainer store states
-export type SetupStep =
-  | 'idle'
-  | 'mounting'
-  | 'installing'
-  | 'starting'
-  | 'ready'
-  | 'error'
-
-export const SETUP_STEP_LABELS: Record<SetupStep, string> = {
-  idle: 'Waiting...',
-  mounting: 'Mounting files...',
-  installing: 'Installing dependencies...',
-  starting: 'Starting dev server...',
-  ready: 'Ready',
-  error: 'Error',
-}
diff --git a/src/components/builder/useBuilderUrl.ts b/src/components/builder/useBuilderUrl.ts
new file mode 100644
index 000000000..7ae22f1d4
--- /dev/null
+++ b/src/components/builder/useBuilderUrl.ts
@@ -0,0 +1,278 @@
+/**
+ * Builder URL Sync Hook (v2)
+ *
+ * Bidirectional sync between URL search params and builder store.
+ */
+
+import { useEffect, useRef } from 'react'
+import { useNavigate, useSearch } from '@tanstack/react-router'
+import { useDebouncedCallback } from '@tanstack/react-pacer'
+import { useBuilderStore } from './store'
+import type { FeatureId } from '~/builder/api'
+import type { FrameworkId } from '~/builder/frameworks' // Used in syncToUrl type
+
+interface BuilderSearchParams {
+  name?: string
+  framework?: string
+  template?: string // template preset ID
+  features?: string // comma-separated feature IDs
+  pm?: string // package manager: pnpm, npm, yarn, bun
+  tailwind?: string
+  // Feature options serialized as: featureId.optionKey=value
+  [key: string]: string | undefined
+}
+
+export function useBuilderUrl() {
+  const navigate = useNavigate()
+  const search = useSearch({ strict: false }) as BuilderSearchParams
+  const isSyncingFromUrl = useRef(false)
+
+  const projectName = useBuilderStore((s) => s.projectName)
+  const framework = useBuilderStore((s) => s.framework)
+  const features = useBuilderStore((s) => s.features)
+  const featureOptions = useBuilderStore((s) => s.featureOptions)
+  const selectedTemplate = useBuilderStore((s) => s.selectedTemplate)
+  const packageManager = useBuilderStore((s) => s.packageManager)
+  const tailwind = useBuilderStore((s) => s.tailwind)
+  const featuresLoaded = useBuilderStore((s) => s.featuresLoaded)
+  const setProjectName = useBuilderStore((s) => s.setProjectName)
+  const setFeatures = useBuilderStore((s) => s.setFeatures)
+  const setFeatureOption = useBuilderStore((s) => s.setFeatureOption)
+  const setTemplate = useBuilderStore((s) => s.setTemplate)
+  const setPackageManager = useBuilderStore((s) => s.setPackageManager)
+  const setTailwind = useBuilderStore((s) => s.setTailwind)
+
+  // Initialize from URL on mount (only once when features load)
+  const initializedRef = useRef(false)
+  useEffect(() => {
+    if (!featuresLoaded || initializedRef.current) return
+    initializedRef.current = true
+
+    isSyncingFromUrl.current = true
+
+    // Set project name
+    if (search.name) {
+      setProjectName(search.name)
+    }
+
+    // Set package manager
+    if (search.pm && ['pnpm', 'npm', 'yarn', 'bun'].includes(search.pm)) {
+      setPackageManager(search.pm as 'pnpm' | 'npm' | 'yarn' | 'bun')
+    }
+
+    if (search.tailwind === 'false') {
+      setTailwind(false)
+    }
+
+    // Note: framework is set in BuilderProvider before features load
+
+    // Apply template if specified (this sets features)
+    if (search.template) {
+      setTemplate(search.template)
+
+      if (search.features) {
+        const featureList = search.features
+          .split(',')
+          .filter(Boolean) as Array<FeatureId>
+
+        setFeatures(
+          Array.from(
+            new Set([...useBuilderStore.getState().features, ...featureList]),
+          ),
+        )
+      }
+    }
+    // Otherwise set features from URL
+    else if (search.features) {
+      const featureList = search.features
+        .split(',')
+        .filter(Boolean) as Array<FeatureId>
+      setFeatures(featureList)
+    }
+
+    // Set feature options (keys like "drizzle.database")
+    for (const [key, value] of Object.entries(search)) {
+      if (key.includes('.') && value) {
+        const [featureId, optionKey] = key.split('.')
+        setFeatureOption(featureId as FeatureId, optionKey, value)
+      }
+    }
+
+    // Allow state changes to trigger URL sync after initial load
+    setTimeout(() => {
+      isSyncingFromUrl.current = false
+    }, 100)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [featuresLoaded])
+
+  // Debounced URL sync to avoid lag when typing
+  const syncToUrl = useDebouncedCallback(
+    (
+      name: string,
+      fw: FrameworkId,
+      feats: Array<FeatureId>,
+      opts: Record<string, Record<string, unknown>>,
+      template: string | null,
+      pm: string,
+      hasTailwind: boolean,
+    ) => {
+      navigate({
+        to: '/builder',
+        search: (prev: any) => {
+          const params: Record<string, unknown> = { ...prev }
+
+          // Update project name
+          if (name && name !== 'my-tanstack-app') {
+            params.name = name
+          } else {
+            delete params.name
+          }
+
+          // Update framework (skip if default react)
+          if (fw && fw !== 'react') {
+            params.framework = fw
+          } else {
+            delete params.framework
+          }
+
+          // Update template (skip if blank)
+          if (template && template !== 'blank') {
+            params.template = template
+          } else {
+            delete params.template
+          }
+
+          // Update package manager (skip if default pnpm)
+          if (pm && pm !== 'pnpm') {
+            params.pm = pm
+          } else {
+            delete params.pm
+          }
+
+          if (!hasTailwind) {
+            params.tailwind = 'false'
+          } else {
+            delete params.tailwind
+          }
+
+          // Update features
+          if (feats.length > 0) {
+            params.features = feats.join(',')
+          } else {
+            delete params.features
+          }
+
+          // Clear old feature options (keys with dots)
+          for (const key of Object.keys(params)) {
+            if (key.includes('.')) {
+              delete params[key]
+            }
+          }
+
+          // Serialize current feature options
+          for (const [featureId, options] of Object.entries(opts)) {
+            for (const [optionKey, value] of Object.entries(options)) {
+              if (value !== undefined && value !== null) {
+                params[`${featureId}.${optionKey}`] = String(value)
+              }
+            }
+          }
+
+          return params
+        },
+        replace: true,
+      })
+    },
+    { wait: 300 },
+  )
+
+  // Sync state changes to URL (debounced)
+  useEffect(() => {
+    if (!featuresLoaded || isSyncingFromUrl.current) return
+    syncToUrl(
+      projectName,
+      framework,
+      features,
+      featureOptions,
+      selectedTemplate,
+      packageManager,
+      tailwind,
+    )
+  }, [
+    projectName,
+    framework,
+    features,
+    featureOptions,
+    selectedTemplate,
+    packageManager,
+    tailwind,
+    featuresLoaded,
+    syncToUrl,
+  ])
+}
+
+/**
+ * Generate CLI command from current state
+ */
+export function useCliCommand(): string {
+  const projectName = useBuilderStore((s) => s.projectName)
+  const framework = useBuilderStore((s) => s.framework)
+  const features = useBuilderStore((s) => s.features)
+  const featureOptions = useBuilderStore((s) => s.featureOptions)
+  const selectedExample = useBuilderStore((s) => s.selectedExample)
+  const availableExamples = useBuilderStore((s) => s.availableExamples)
+  const tailwind = useBuilderStore((s) => s.tailwind)
+  const packageManager = useBuilderStore((s) => s.packageManager)
+  const skipInstall = useBuilderStore((s) => s.skipInstall)
+  const skipGit = useBuilderStore((s) => s.skipGit)
+
+  let cmd = `npx @tanstack/cli@latest create ${projectName}`
+  cmd += ' --agent'
+
+  // Map internal framework ID to CLI framework name
+  if (framework === 'solid') {
+    cmd += ' --framework Solid'
+  }
+
+  cmd += ` --package-manager ${packageManager}`
+
+  if (tailwind) {
+    cmd += ' --tailwind'
+  } else {
+    cmd += ' --no-tailwind'
+  }
+
+  if (selectedExample) {
+    cmd += ` --template ${selectedExample}`
+  }
+
+  // Skip add-ons that the selected example will pull in via dependsOn
+  const exampleLockedFeatures = selectedExample
+    ? new Set(
+        availableExamples.find((e) => e.id === selectedExample)?.requires ?? [],
+      )
+    : new Set<string>()
+  const addOnFeatures = features.filter((f) => !exampleLockedFeatures.has(f))
+
+  if (addOnFeatures.length > 0) {
+    cmd += ` --add-ons ${addOnFeatures.join(',')}`
+  }
+
+  const addOnConfigEntries = Object.entries(featureOptions).filter(
+    ([, options]) => options && Object.keys(options).length > 0,
+  )
+  if (addOnConfigEntries.length > 0) {
+    const json = JSON.stringify(Object.fromEntries(addOnConfigEntries))
+    cmd += ` --add-on-config '${json.replace(/'/g, `'\\''`)}'`
+  }
+
+  if (skipInstall) {
+    cmd += ' --no-install'
+  }
+
+  if (skipGit) {
+    cmd += ' --no-git'
+  }
+
+  return cmd
+}
diff --git a/src/components/builder/useDeployAuth.ts b/src/components/builder/useDeployAuth.ts
new file mode 100644
index 000000000..cbf6f44fb
--- /dev/null
+++ b/src/components/builder/useDeployAuth.ts
@@ -0,0 +1,98 @@
+/**
+ * Deploy Auth Hook
+ *
+ * Manages GitHub authentication state for the deploy flow.
+ */
+
+import { useState, useCallback, useEffect } from 'react'
+
+interface DeployAuthState {
+  isLoading: boolean
+  authenticated: boolean
+  hasGitHubAccount: boolean
+  hasRepoScope: boolean
+}
+
+interface UseDeployAuthReturn extends DeployAuthState {
+  refresh: () => Promise<void>
+  redirectToGitHubAuth: () => void
+}
+
+async function fetchAuthStateFromServer(): Promise<DeployAuthState> {
+  try {
+    const response = await fetch('/api/builder/deploy/github')
+    const data = await response.json()
+    return {
+      isLoading: false,
+      authenticated: data.authenticated ?? false,
+      hasGitHubAccount: data.hasGitHubAccount ?? false,
+      hasRepoScope: data.hasRepoScope ?? false,
+    }
+  } catch {
+    return {
+      isLoading: false,
+      authenticated: false,
+      hasGitHubAccount: false,
+      hasRepoScope: false,
+    }
+  }
+}
+
+export function useDeployAuth(): UseDeployAuthReturn {
+  const [state, setState] = useState<DeployAuthState>({
+    isLoading: true,
+    authenticated: false,
+    hasGitHubAccount: false,
+    hasRepoScope: false,
+  })
+
+  const fetchAuthState = useCallback(async () => {
+    setState((s) => ({ ...s, isLoading: true }))
+    const newState = await fetchAuthStateFromServer()
+    setState(newState)
+  }, [])
+
+  // Fetch auth state on mount
+  useEffect(() => {
+    let cancelled = false
+    fetchAuthStateFromServer().then((newState) => {
+      if (!cancelled) {
+        setState(newState)
+      }
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const redirectToGitHubAuth = useCallback(() => {
+    // Open GitHub OAuth in a popup so user doesn't lose their place
+    const authUrl = `/auth/github/start?popup=true&scope=public_repo`
+    const width = 500
+    const height = 700
+    const left = window.screenX + (window.outerWidth - width) / 2
+    const top = window.screenY + (window.outerHeight - height) / 2
+    const popup = window.open(
+      authUrl,
+      'github-auth',
+      `width=${width},height=${height},left=${left},top=${top},popup=yes`,
+    )
+
+    // Poll for popup close and refresh auth state
+    if (popup) {
+      const checkClosed = setInterval(() => {
+        if (popup.closed) {
+          clearInterval(checkClosed)
+          // Refresh auth state after popup closes
+          fetchAuthState()
+        }
+      }, 500)
+    }
+  }, [fetchAuthState])
+
+  return {
+    ...state,
+    refresh: fetchAuthState,
+    redirectToGitHubAuth,
+  }
+}
diff --git a/src/components/charts/PlotContainer.tsx b/src/components/charts/PlotContainer.tsx
new file mode 100644
index 000000000..3e1929f97
--- /dev/null
+++ b/src/components/charts/PlotContainer.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react'
+import * as Plot from '@observablehq/plot'
+
+export const observablePlotClassName = 'tanstack-observable-plot'
+
+interface PlotContainerProps {
+  /** Build Plot options given the measured container width. */
+  options: (width: number) => Parameters<typeof Plot.plot>[0]
+  /** Fixed height in pixels. Passed through to the wrapper div. */
+  height: number
+  className?: string
+  style?: React.CSSProperties
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+}
+
+export function PlotContainer({
+  options,
+  height,
+  className,
+  style,
+  onClick,
+}: PlotContainerProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [ready, setReady] = React.useState(false)
+
+  React.useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    let currentPlot: ReturnType<typeof Plot.plot> | null = null
+
+    const render = () => {
+      if (currentPlot) {
+        currentPlot.remove()
+        currentPlot = null
+      }
+
+      const width = container.clientWidth
+      if (width === 0) return
+
+      currentPlot = Plot.plot({ ...options(width), width, height })
+      const svg =
+        currentPlot instanceof SVGSVGElement
+          ? currentPlot
+          : currentPlot.querySelector('svg')
+      svg?.classList.add(observablePlotClassName)
+      if (svg) svg.style.overflow = 'visible'
+      container.appendChild(currentPlot)
+      setReady(true)
+    }
+
+    render()
+
+    const observer = new ResizeObserver(render)
+    observer.observe(container)
+
+    return () => {
+      observer.disconnect()
+      if (currentPlot) currentPlot.remove()
+    }
+  }, [options, height])
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!onClick || (e.key !== 'Enter' && e.key !== ' ')) return
+      e.preventDefault()
+      // Synthesize a click at the container center for keyboard users
+      const el = e.currentTarget
+      const rect = el.getBoundingClientRect()
+      const synth = new MouseEvent('click', {
+        bubbles: true,
+        clientX: rect.left + rect.width / 2,
+        clientY: rect.top + rect.height / 2,
+      })
+      el.dispatchEvent(synth)
+    },
+    [onClick],
+  )
+
+  return (
+    <div
+      ref={containerRef}
+      className={`${!ready ? 'animate-pulse rounded bg-gray-100 dark:bg-gray-800/40' : ''} ${className ?? ''}`}
+      style={{ width: '100%', height, ...style }}
+      onClick={onClick}
+      onKeyDown={onClick ? handleKeyDown : undefined}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      aria-label={onClick ? 'Interactive chart' : undefined}
+    />
+  )
+}
diff --git a/src/components/charts/TimeSeriesChart.tsx b/src/components/charts/TimeSeriesChart.tsx
index 9ca8922da..0d5f19542 100644
--- a/src/components/charts/TimeSeriesChart.tsx
+++ b/src/components/charts/TimeSeriesChart.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as Plot from '@observablehq/plot'
 import { type BinType, binTimeSeriesData } from '~/utils/chart'
+import { PlotContainer } from '~/components/charts/PlotContainer'
 
 export type ChartVariant = 'area' | 'bar' | 'cumulative'
 
@@ -21,47 +22,26 @@ export function TimeSeriesChart({
   height = 200,
   yLabel,
 }: TimeSeriesChartProps) {
-  const containerRef = React.useRef<HTMLDivElement>(null)
-
-  React.useEffect(() => {
-    if (!containerRef.current || data.length === 0) return
-
-    const container = containerRef.current
-
-    const renderChart = () => {
-      if (!container) return
-      container.innerHTML = ''
-
+  const options = React.useCallback(
+    (_width: number) => {
       const binnedData = binTimeSeriesData(data, binType)
-      if (binnedData.length === 0) return
+      if (binnedData.length === 0) return { marks: [] }
 
       const marks = getMarksForVariant(variant, binnedData, color, binType)
 
-      const plot = Plot.plot({
-        width: container.clientWidth,
-        height,
+      return {
         marginLeft: 60,
         marginRight: 20,
         marginTop: 20,
         marginBottom: 40,
-        x: { label: 'Date', type: 'utc', grid: true },
+        x: { label: 'Date', type: 'utc' as const, grid: true },
         y: { label: yLabel ?? getDefaultYLabel(variant), grid: true },
         marks,
         style: { background: 'transparent', fontSize: '12px' },
-      })
-
-      container.appendChild(plot)
-    }
-
-    renderChart()
-    const resizeObserver = new ResizeObserver(() => renderChart())
-    resizeObserver.observe(container)
-
-    return () => {
-      resizeObserver.disconnect()
-      container.innerHTML = ''
-    }
-  }, [data, binType, variant, color, height, yLabel])
+      }
+    },
+    [data, binType, variant, color, yLabel],
+  )
 
   if (data.length === 0) {
     return (
@@ -71,7 +51,7 @@ export function TimeSeriesChart({
     )
   }
 
-  return <div ref={containerRef} className="w-full" />
+  return <PlotContainer options={options} height={height} />
 }
 
 function getDefaultYLabel(variant: ChartVariant): string {
@@ -89,15 +69,6 @@ function getMarksForVariant(
   color: string,
   binType: BinType,
 ): Plot.Markish[] {
-  const _tipFormat = {
-    x: (d: Date) =>
-      d.toLocaleDateString('en-US', {
-        month: 'long',
-        day: 'numeric',
-        year: 'numeric',
-      }),
-  }
-
   switch (variant) {
     case 'bar':
       return [
diff --git a/src/components/deploy/shared.ts b/src/components/deploy/shared.ts
new file mode 100644
index 000000000..c2ff11a44
--- /dev/null
+++ b/src/components/deploy/shared.ts
@@ -0,0 +1,98 @@
+/**
+ * Shared Deploy Dialog utilities
+ *
+ * Common types, constants, and validation for deploy dialogs.
+ */
+
+export type DeployProvider = 'cloudflare' | 'netlify' | 'railway'
+
+export type DeployState =
+  | { step: 'auth-check' }
+  | { step: 'needs-auth' }
+  | { step: 'form' }
+  | { step: 'deploying'; message: string }
+  | { step: 'success'; repoUrl: string; owner: string; repoName: string }
+  | { step: 'error'; message: string; code?: string }
+
+export type RepoNameStatus =
+  | 'idle'
+  | 'checking'
+  | 'available'
+  | 'taken'
+  | 'invalid'
+
+export interface ProviderInfo {
+  name: string
+  color: string
+  deployUrl: (owner: string, repo: string) => string
+}
+
+export const PROVIDER_INFO: Record<DeployProvider, ProviderInfo> = {
+  cloudflare: {
+    name: 'Cloudflare',
+    color: '#F38020',
+    deployUrl: (owner, repo) => {
+      const url = new URL('https://deploy.workers.cloudflare.com/')
+
+      url.searchParams.set('url', `https://github.com/${owner}/${repo}`)
+
+      return url.toString()
+    },
+  },
+  netlify: {
+    name: 'Netlify',
+    color: '#00C7B7',
+    deployUrl: (owner, repo) => {
+      const url = new URL('https://app.netlify.com/start/deploy')
+
+      url.searchParams.set('repository', `https://github.com/${owner}/${repo}`)
+
+      return url.toString()
+    },
+  },
+  railway: {
+    name: 'Railway',
+    color: '#9B4DCA',
+    deployUrl: () => {
+      const url = new URL('https://railway.com/new/github')
+
+      url.searchParams.set('utm_medium', 'sponsor')
+      url.searchParams.set('utm_source', 'oss')
+      url.searchParams.set('utm_campaign', 'tanstack')
+
+      return url.toString()
+    },
+  },
+}
+
+export async function checkRepoNameAvailability(
+  name: string,
+): Promise<{ available: boolean }> {
+  const response = await fetch(
+    `/api/builder/deploy/check-name?name=${encodeURIComponent(name)}`,
+  )
+  return response.json()
+}
+
+export function validateRepoNameFormat(name: string): {
+  valid: boolean
+  error?: string
+} {
+  if (!name.trim()) {
+    return { valid: false }
+  }
+
+  const validPattern = /^[a-zA-Z0-9][a-zA-Z0-9._-]*$/
+  if (!validPattern.test(name)) {
+    return {
+      valid: false,
+      error: 'Letters, numbers, hyphens, underscores, and periods only',
+    }
+  }
+
+  if (name.length > 100) {
+    return { valid: false, error: 'Must be 100 characters or less' }
+  }
+
+  return { valid: true }
+}
diff --git a/src/components/game/IslandExplorer.tsx b/src/components/game/IslandExplorer.client.tsx
similarity index 96%
rename from src/components/game/IslandExplorer.tsx
rename to src/components/game/IslandExplorer.client.tsx
index 46ccd0c55..190509544 100644
--- a/src/components/game/IslandExplorer.tsx
+++ b/src/components/game/IslandExplorer.client.tsx
@@ -46,7 +46,7 @@ function LoadingOverlay() {
   const [headline, subtext] = LOADING_MESSAGES[messageIndex]
 
   return (
-    <div className="absolute inset-0 bg-gradient-to-b from-sky-400 to-cyan-600 flex items-center justify-center z-50">
+    <div className="absolute inset-0 bg-linear-to-b from-sky-400 to-cyan-600 flex items-center justify-center z-50">
       <div className="text-center">
         <div className="w-16 h-16 mx-auto mb-4 border-4 border-white/30 border-t-white rounded-full animate-spin" />
         <p className="text-white text-lg font-medium">{headline}</p>
diff --git a/src/components/game/engine/GameEngine.ts b/src/components/game/engine/GameEngine.ts
index 5165bd606..bdc44092b 100644
--- a/src/components/game/engine/GameEngine.ts
+++ b/src/components/game/engine/GameEngine.ts
@@ -698,8 +698,16 @@ export class GameEngine {
   }
 
   start(): void {
+    if (this.animationFrameId !== null || this.isDisposed) {
+      return
+    }
+
+    this.isPaused = document.hidden
     this.clock.start()
-    this.loop()
+
+    if (!this.isPaused) {
+      this.animationFrameId = requestAnimationFrame(this.loop)
+    }
   }
 
   stop(): void {
@@ -710,18 +718,18 @@ export class GameEngine {
   }
 
   private loop = (): void => {
-    if (this.isDisposed) return
-
-    this.animationFrameId = requestAnimationFrame(this.loop)
+    this.animationFrameId = null
 
-    // Skip updates when tab is not visible
-    if (this.isPaused) return
+    if (this.isDisposed || this.isPaused) {
+      return
+    }
 
     const delta = this.clock.getDelta()
     const time = this.clock.getElapsedTime()
 
     this.update(delta, time)
     this.render()
+    this.animationFrameId = requestAnimationFrame(this.loop)
   }
 
   private update(delta: number, time: number): void {
@@ -815,9 +823,19 @@ export class GameEngine {
 
   private handleVisibilityChange = (): void => {
     this.isPaused = document.hidden
+
+    if (document.hidden) {
+      this.stop()
+      return
+    }
+
     if (!document.hidden) {
       // Reset clock delta when resuming to avoid large time jumps
       this.clock.getDelta()
+
+      if (this.animationFrameId === null && !this.isDisposed) {
+        this.animationFrameId = requestAnimationFrame(this.loop)
+      }
     }
   }
 
diff --git a/src/components/game/hooks/useGameStore.ts b/src/components/game/hooks/useGameStore.ts
index 8647ab98e..51c46232d 100644
--- a/src/components/game/hooks/useGameStore.ts
+++ b/src/components/game/hooks/useGameStore.ts
@@ -1,6 +1,5 @@
 import { create } from 'zustand'
 import type { IslandData } from '../utils/islandGenerator'
-import type { RockCollider } from '../utils/collision'
 import {
   type Upgrade,
   type ShipStats,
@@ -10,48 +9,33 @@ import {
   SHOWCASE_UPGRADE_ORDER,
 } from '../utils/upgrades'
 import { type ShopItemType, SHOP_ITEMS } from '../utils/shopItems'
+import type {
+  RockCollider,
+  BoatType,
+  GameStage,
+  AIDifficulty,
+  OtherPlayer,
+  CoinData,
+  Cannonball,
+  PurchasedBoosts,
+  PersistedState,
+} from '../types'
+
+// Re-export types for consumers
+export type {
+  RockCollider,
+  BoatType,
+  GameStage,
+  AIDifficulty,
+  OtherPlayer,
+  CoinData,
+  Cannonball,
+  PurchasedBoosts,
+}
 
 // Keys for localStorage persistence
 const STORAGE_KEY = 'tanstack-island-explorer'
 
-// Purchased permanent shop boosts (stackable items)
-interface PurchasedBoosts {
-  permSpeed: number // Number of permanent speed boosts purchased
-  permAccel: number // Number of permanent acceleration boosts purchased
-  permHealth: number // Number of permanent health boosts purchased (+25 each, max 8)
-  rapidFire: boolean // Whether rapid fire (auto-loader) is purchased
-}
-
-// State that gets persisted to localStorage
-// This is the SINGLE SOURCE OF TRUTH for what gets saved
-interface PersistedState {
-  // Progress
-  discoveredIslands: string[]
-  coinsCollected: number
-  collectedCoinIds: number[] // Which specific coins are collected
-  unlockedUpgrades: Upgrade[]
-  shipStats: ShipStats
-  kills: number
-  deaths: number
-  purchasedBoosts: PurchasedBoosts
-
-  // Game state
-  stage: GameStage
-  boatType: BoatType
-  showcaseUnlocked: boolean // Whether showcase expansion is unlocked
-  cornersUnlocked: boolean // Whether corner boss islands are unlocked
-  gameWon: boolean // Whether the player has captured all 4 corners
-
-  // Position
-  boatPosition: [number, number, number]
-  boatRotation: number
-  boatHealth: number
-
-  // Active effects
-  compassTargetId: string | null // Store ID, not full object
-  speedBoostEndTime: number | null
-}
-
 // Save to localStorage (immediate, no debounce)
 function saveToLocalStorage(state: PersistedState): void {
   try {
@@ -116,44 +100,6 @@ function extractPersistedState(state: {
   }
 }
 
-export interface CoinData {
-  id: number
-  position: [number, number, number]
-  collected: boolean
-  collectedAt?: number // Timestamp when collected (for respawn timer)
-}
-
-export type BoatType = 'dinghy' | 'ship'
-export type GameStage = 'exploration' | 'battle'
-
-// Other players/AI in the world
-// AI difficulty tier (affects stats)
-export type AIDifficulty = 'easy' | 'medium' | 'hard' | 'elite' | 'boss'
-
-export interface OtherPlayer {
-  id: string
-  isAI: boolean
-  position: [number, number, number]
-  rotation: number
-  velocity: number
-  boatType: BoatType
-  color: string
-  health: number
-  maxHealth?: number // For AI ships
-  difficulty?: AIDifficulty // For AI ships
-  homePosition?: [number, number] // For AI ships - where they patrol around
-}
-
-// Cannonball projectile
-export interface Cannonball {
-  id: number
-  position: [number, number, number]
-  velocity: [number, number, number]
-  ownerId: string // 'player' or AI id
-  createdAt: number
-  isGatling?: boolean // Gatling rounds are smaller/faster
-}
-
 interface GameState {
   // Game phase
   phase: 'intro' | 'playing' | 'upgrading' | 'complete' | 'gameover'
diff --git a/src/components/game/scene/IslandInfo3D.tsx b/src/components/game/scene/IslandInfo3D.tsx
index 3fb6ed352..b6bcdc71a 100644
--- a/src/components/game/scene/IslandInfo3D.tsx
+++ b/src/components/game/scene/IslandInfo3D.tsx
@@ -5,6 +5,7 @@ import * as THREE from 'three'
 import type { IslandData } from '../utils/islandGenerator'
 import { getLibraryColor } from '../utils/colors'
 import { set3DObjectClicked } from '../ui/TouchControls'
+import { trackEvent } from '~/utils/analytics'
 
 interface IslandInfo3DProps {
   island: IslandData
@@ -45,6 +46,18 @@ export function IslandInfo3D({ island, exiting = false }: IslandInfo3DProps) {
 
   const handleClick = () => {
     if (partner?.href) {
+      let destinationHost: string | undefined
+      try {
+        destinationHost = new URL(partner.href).host
+      } catch {
+        // Bad/relative href — track without host rather than dropping.
+      }
+      trackEvent('partner_clicked', {
+        partner_id: partner.id,
+        placement: 'ecosystem_game',
+        destination: 'external',
+        destination_host: destinationHost,
+      })
       window.open(partner.href, '_blank')
     } else if (library) {
       window.location.href = `/${library.id}`
diff --git a/src/components/game/types.ts b/src/components/game/types.ts
new file mode 100644
index 000000000..7f8fa3642
--- /dev/null
+++ b/src/components/game/types.ts
@@ -0,0 +1,86 @@
+/**
+ * Shared types for game components
+ * Extracted to break circular dependencies
+ */
+
+// IslandData type is referenced in other game components
+import type { IslandData as _IslandData } from './utils/islandGenerator'
+
+export interface RockCollider {
+  position: [number, number]
+  radius: number
+}
+
+export type BoatType = 'dinghy' | 'ship'
+export type GameStage = 'exploration' | 'battle'
+
+// AI difficulty tier (affects stats)
+export type AIDifficulty = 'easy' | 'medium' | 'hard' | 'elite' | 'boss'
+
+export interface OtherPlayer {
+  id: string
+  isAI: boolean
+  position: [number, number, number]
+  rotation: number
+  velocity: number
+  boatType: BoatType
+  color: string
+  health: number
+  maxHealth?: number // For AI ships
+  difficulty?: AIDifficulty // For AI ships
+  homePosition?: [number, number] // For AI ships - where they patrol around
+}
+
+export interface CoinData {
+  id: number
+  position: [number, number, number]
+  collected: boolean
+  collectedAt?: number // Timestamp when collected (for respawn timer)
+}
+
+// Cannonball projectile
+export interface Cannonball {
+  id: number
+  position: [number, number, number]
+  velocity: [number, number, number]
+  ownerId: string // 'player' or AI id
+  createdAt: number
+  isGatling?: boolean // Gatling rounds are smaller/faster
+}
+
+// Purchased permanent shop boosts (stackable items)
+export interface PurchasedBoosts {
+  permSpeed: number // Number of permanent speed boosts purchased
+  permAccel: number // Number of permanent acceleration boosts purchased
+  permHealth: number // Number of permanent health boosts purchased (+25 each, max 8)
+  rapidFire: boolean // Whether rapid fire (auto-loader) is purchased
+}
+
+// State that gets persisted to localStorage
+export interface PersistedState {
+  // Progress
+  discoveredIslands: string[]
+  coinsCollected: number
+  collectedCoinIds: number[] // Which specific coins are collected
+  unlockedUpgrades: import('./utils/upgrades').Upgrade[]
+  shipStats: import('./utils/upgrades').ShipStats
+  kills: number
+  deaths: number
+  purchasedBoosts: PurchasedBoosts
+
+  // Game state
+  stage: GameStage
+  boatType: BoatType
+  showcaseUnlocked: boolean // Whether showcase expansion is unlocked
+  cornersUnlocked: boolean // Whether corner boss islands are unlocked
+  gameWon: boolean // Whether the player has captured all 4 corners
+
+  // Position
+  boatPosition: [number, number, number]
+  boatRotation: number
+  boatHealth: number
+
+  // Active effects
+  compassTargetId: string | null // Store ID, not full object
+  speedBoostEndTime: number | null
+}
diff --git a/src/components/game/ui/CompleteOverlay.tsx b/src/components/game/ui/CompleteOverlay.tsx
index 95c3ba856..94e213c21 100644
--- a/src/components/game/ui/CompleteOverlay.tsx
+++ b/src/components/game/ui/CompleteOverlay.tsx
@@ -13,7 +13,7 @@ export function CompleteOverlay() {
   }
 
   return (
-    <div className="absolute inset-0 z-20 flex items-center justify-center bg-gradient-to-b from-amber-400/90 to-orange-500/90 backdrop-blur-sm">
+    <div className="absolute inset-0 z-20 flex items-center justify-center bg-linear-to-b from-amber-400/90 to-orange-500/90 backdrop-blur-sm">
       <div className="max-w-md mx-4 text-center">
         {/* Trophy */}
         <div className="w-24 h-24 mx-auto mb-6 bg-white/20 rounded-full flex items-center justify-center">
diff --git a/src/components/game/ui/DebugPanel.tsx b/src/components/game/ui/DebugPanel.tsx
index da92b77e2..f03fec78f 100644
--- a/src/components/game/ui/DebugPanel.tsx
+++ b/src/components/game/ui/DebugPanel.tsx
@@ -5,17 +5,16 @@ import {
   PARTNER_UPGRADE_ORDER,
   SHOWCASE_UPGRADE_ORDER,
 } from '../utils/upgrades'
+import { currentUserQueryOptions } from '~/hooks/useCurrentUser'
 
 const UPGRADE_ORDER = [...PARTNER_UPGRADE_ORDER, ...SHOWCASE_UPGRADE_ORDER]
-import { getCurrentUser } from '~/utils/auth.server'
 
 export function DebugPanel() {
   const [isCollapsed, setIsCollapsed] = useState(true)
 
   // Fetch user directly without route context dependency
   const userQuery = useQuery({
-    queryKey: ['currentUser'],
-    queryFn: () => getCurrentUser(),
+    ...currentUserQueryOptions,
     staleTime: 30 * 1000,
   })
 
diff --git a/src/components/game/ui/GameHUD.tsx b/src/components/game/ui/GameHUD.tsx
index 43e680144..a72c26aac 100644
--- a/src/components/game/ui/GameHUD.tsx
+++ b/src/components/game/ui/GameHUD.tsx
@@ -197,7 +197,7 @@ export function GameHUD() {
             </span>
             <div className="w-32 h-3 bg-black/50 rounded-full overflow-hidden max-md:w-20 max-md:h-2">
               <div
-                className="h-full bg-gradient-to-r from-red-600 to-red-400"
+                className="h-full bg-linear-to-r from-red-600 to-red-400"
                 style={{
                   width: `${(boatHealth / totalMaxHealth) * 100}%`,
                 }}
@@ -217,8 +217,8 @@ export function GameHUD() {
               <div
                 className={`h-full transition-all duration-75 ${
                   cooldownProgress >= 1
-                    ? 'bg-gradient-to-r from-cyan-500 to-cyan-300'
-                    : 'bg-gradient-to-r from-cyan-800 to-cyan-600'
+                    ? 'bg-linear-to-r from-cyan-500 to-cyan-300'
+                    : 'bg-linear-to-r from-cyan-800 to-cyan-600'
                 }`}
                 style={{ width: `${cooldownProgress * 100}%` }}
               />
@@ -233,7 +233,7 @@ export function GameHUD() {
       {/* Upgrade notification */}
       {showUpgradeNotification && upgradeInfo && (
         <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-in fade-in zoom-in duration-300">
-          <div className="bg-gradient-to-br from-yellow-500/90 to-amber-600/90 backdrop-blur-md rounded-2xl px-8 py-5 text-center shadow-2xl border border-yellow-300/30">
+          <div className="bg-linear-to-br from-yellow-500/90 to-amber-600/90 backdrop-blur-md rounded-2xl px-8 py-5 text-center shadow-2xl border border-yellow-300/30">
             <div className="text-4xl mb-2">{upgradeInfo.icon}</div>
             <div className="text-white font-bold text-xl mb-1">
               {upgradeInfo.name}
@@ -248,7 +248,7 @@ export function GameHUD() {
       {/* Showcase unlock notification */}
       {showShowcaseUnlock && (
         <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-in fade-in zoom-in duration-300">
-          <div className="bg-gradient-to-br from-purple-500/90 to-violet-600/90 backdrop-blur-md rounded-2xl px-8 py-6 text-center shadow-2xl border border-purple-300/30 max-w-sm">
+          <div className="bg-linear-to-br from-purple-500/90 to-violet-600/90 backdrop-blur-md rounded-2xl px-8 py-6 text-center shadow-2xl border border-purple-300/30 max-w-sm">
             <div className="text-5xl mb-3">🏝️</div>
             <div className="text-white font-bold text-xl mb-2">
               Showcase Islands Unlocked!
@@ -270,7 +270,7 @@ export function GameHUD() {
       {/* Corners unlock notification */}
       {showCornersUnlock && (
         <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-in fade-in zoom-in duration-300">
-          <div className="bg-gradient-to-br from-gray-900/95 to-red-950/95 backdrop-blur-md rounded-2xl px-8 py-6 text-center shadow-2xl border border-red-500/30 max-w-sm">
+          <div className="bg-linear-to-br from-gray-900/95 to-red-950/95 backdrop-blur-md rounded-2xl px-8 py-6 text-center shadow-2xl border border-red-500/30 max-w-sm">
             <div className="text-5xl mb-3">💀</div>
             <div className="text-red-400 font-bold text-xl mb-2">
               The Four Corners Await
diff --git a/src/components/game/ui/GameOverOverlay.tsx b/src/components/game/ui/GameOverOverlay.tsx
index 3ba95589f..d4cdc5b65 100644
--- a/src/components/game/ui/GameOverOverlay.tsx
+++ b/src/components/game/ui/GameOverOverlay.tsx
@@ -69,7 +69,7 @@ export function GameOverOverlay() {
               transform: animationStep >= 1 ? 'scale(1)' : 'scale(0.5)',
             }}
           >
-            <div className="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-red-500 to-red-700 flex items-center justify-center shadow-lg">
+            <div className="w-20 h-20 mx-auto rounded-full bg-linear-to-br from-red-500 to-red-700 flex items-center justify-center shadow-lg">
               <span className="text-4xl">💀</span>
             </div>
           </div>
diff --git a/src/components/game/utils/collision.ts b/src/components/game/utils/collision.ts
index 387eb4074..de059a785 100644
--- a/src/components/game/utils/collision.ts
+++ b/src/components/game/utils/collision.ts
@@ -1,10 +1,7 @@
 import type { IslandData } from './islandGenerator'
-import type { OtherPlayer } from '../hooks/useGameStore'
+import type { OtherPlayer, RockCollider } from '../types'
 
-export interface RockCollider {
-  position: [number, number]
-  radius: number
-}
+export type { RockCollider }
 
 // Seeded random for consistent rock generation
 function seededRandom(seed: number) {
diff --git a/src/components/home/HomeApplicationStarter.tsx b/src/components/home/HomeApplicationStarter.tsx
new file mode 100644
index 000000000..85cb99139
--- /dev/null
+++ b/src/components/home/HomeApplicationStarter.tsx
@@ -0,0 +1,22 @@
+import { Hydrate } from '@tanstack/react-start'
+import { idle, visible } from '@tanstack/react-start/hydration'
+
+import { ApplicationStarter } from '~/components/ApplicationStarter'
+import { HomeApplicationStarterFallback } from './HomeSectionFallbacks'
+
+export function HomeApplicationStarter() {
+  return (
+    <Hydrate
+      when={visible({ rootMargin: '180px 0px' })}
+      prefetch={idle({ timeout: 3500 })}
+      fallback={<HomeApplicationStarterFallback />}
+    >
+      <ApplicationStarter
+        context="home"
+        enableHotkeys
+        showPromptPreview={false}
+        tone="cyan"
+      />
+    </Hydrate>
+  )
+}
diff --git a/src/components/home/HomeCommunitySection.tsx b/src/components/home/HomeCommunitySection.tsx
new file mode 100644
index 000000000..ad9cb113a
--- /dev/null
+++ b/src/components/home/HomeCommunitySection.tsx
@@ -0,0 +1,91 @@
+import { Link } from '@tanstack/react-router'
+import { Hydrate } from '@tanstack/react-start'
+import { visible } from '@tanstack/react-start/hydration'
+import { SponsorSection } from '~/components/SponsorSection'
+import { MaintainerCard } from '~/components/MaintainerCard'
+import { coreMaintainers } from '~/libraries/maintainers'
+import { Button } from '~/ui'
+
+export function HomeCommunitySection() {
+  return (
+    <Hydrate
+      when={visible({ rootMargin: '25%' })}
+      fallback={<CommunitySkeleton />}
+    >
+      <HomeCommunityContent />
+    </Hydrate>
+  )
+}
+
+function CommunitySkeleton() {
+  return (
+    <div className="space-y-24">
+      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
+        <div className="h-10 w-52 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse mb-6" />
+        <div className="grid gap-6 grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 6 }).map((_, index) => (
+            <div
+              key={`maintainer-skeleton-${index}`}
+              className="h-52 rounded-lg bg-gray-100/70 dark:bg-gray-900/60 animate-pulse"
+            />
+          ))}
+        </div>
+      </div>
+      <div className="lg:max-w-(--breakpoint-lg) px-4 mx-auto">
+        <div className="h-10 w-44 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse mb-8" />
+        <div className="aspect-square max-w-[900px] mx-auto rounded-full bg-gray-100/70 dark:bg-gray-900/60 animate-pulse" />
+      </div>
+    </div>
+  )
+}
+
+function HomeCommunityContent() {
+  return (
+    <div className="space-y-24">
+      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
+        <h3 id="maintainers" className="text-3xl font-bold mb-6 scroll-mt-24">
+          <a
+            href="#maintainers"
+            className="hover:underline decoration-gray-400 dark:decoration-gray-600"
+          >
+            Core Maintainers
+          </a>
+        </h3>
+        <div className="grid gap-6 grid-cols-2 lg:grid-cols-3">
+          {coreMaintainers.map((maintainer) => (
+            <MaintainerCard key={maintainer.github} maintainer={maintainer} />
+          ))}
+        </div>
+        <div className="flex justify-center mt-6">
+          <Button as={Link} to="/maintainers">
+            View All Maintainers
+          </Button>
+        </div>
+      </div>
+
+      <div className="lg:max-w-(--breakpoint-lg) px-4 mx-auto">
+        <div id="sponsors" className="scroll-mt-24">
+          <SponsorSection
+            title={
+              <a
+                href="#sponsors"
+                className="hover:underline decoration-gray-400 dark:decoration-gray-600"
+              >
+                OSS Sponsors
+              </a>
+            }
+          />
+        </div>
+        <div className="h-4" />
+        <p className="italic mx-auto max-w-(--breakpoint-sm) text-gray-500 dark:text-gray-400 text-center">
+          Sponsors get special perks like{' '}
+          <strong>
+            private discord channels, priority issue requests, and direct
+            support
+          </strong>
+          !
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/home/HomeNewsletterSection.tsx b/src/components/home/HomeNewsletterSection.tsx
new file mode 100644
index 000000000..49233a569
--- /dev/null
+++ b/src/components/home/HomeNewsletterSection.tsx
@@ -0,0 +1,36 @@
+import { Card } from '~/components/Card'
+import { NewsletterSignup } from '~/components/NewsletterSignup'
+import { Footer } from '~/components/Footer'
+
+export function HomeNewsletterSection() {
+  return (
+    <>
+      <div className="px-4 mx-auto max-w-(--breakpoint-lg) relative">
+        <Card className="rounded-md p-8 md:p-14">
+          <div>
+            <div className="relative inline-block max-w-full">
+              <h3 id="newsletter" className="text-3xl font-bold scroll-mt-24">
+                <a
+                  href="#newsletter"
+                  className="hover:underline decoration-gray-400 dark:decoration-gray-600"
+                >
+                  Subscribe to TanStack News
+                </a>
+              </h3>
+            </div>
+
+            <p className="text-lg mt-1">
+              New posts, releases, and ecosystem updates from TanStack.
+            </p>
+          </div>
+          <NewsletterSignup
+            className="mt-4 max-w-sm"
+            noteClassName="text-sm opacity-50 font-semibold italic"
+          />
+        </Card>
+      </div>
+      <div className="h-20" />
+      <Footer />
+    </>
+  )
+}
diff --git a/src/components/home/HomeSectionFallbacks.tsx b/src/components/home/HomeSectionFallbacks.tsx
new file mode 100644
index 000000000..03e09e84c
--- /dev/null
+++ b/src/components/home/HomeSectionFallbacks.tsx
@@ -0,0 +1,143 @@
+import { Card } from '~/components/Card'
+
+function SectionTitle({ id, title }: { id: string; title: string }) {
+  return (
+    <h3 id={id} className="text-3xl font-bold mb-6 scroll-mt-24">
+      <a
+        href={`#${id}`}
+        className="hover:underline decoration-gray-400 dark:decoration-gray-600"
+      >
+        {title}
+      </a>
+    </h3>
+  )
+}
+
+function SectionBlock({ className }: { className?: string }) {
+  return (
+    <Card
+      aria-hidden="true"
+      className={`animate-pulse overflow-hidden ${className ?? 'min-h-[220px]'}`}
+    >
+      <div className="h-full w-full bg-linear-to-br from-gray-100 via-gray-50 to-gray-100 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900" />
+    </Card>
+  )
+}
+
+export function HomeSocialProofFallback() {
+  return (
+    <div className="space-y-24 min-h-[1840px] md:min-h-[1260px] lg:min-h-[1180px]">
+      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
+        <SectionTitle id="partners" title="Partners" />
+        <SectionBlock className="min-h-[360px] md:min-h-[240px]" />
+      </div>
+
+      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
+        <div className="space-y-2">
+          <div className="h-8 w-56 rounded bg-gray-200 dark:bg-gray-800" />
+          <div className="h-5 w-80 max-w-full rounded bg-gray-100 dark:bg-gray-900" />
+        </div>
+        <div className="mt-8">
+          <SectionBlock className="min-h-[420px] md:min-h-[360px]" />
+        </div>
+      </div>
+
+      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
+        <SectionTitle id="blog" title="Latest Blog Posts" />
+        <SectionBlock className="min-h-[420px] md:min-h-[320px]" />
+      </div>
+    </div>
+  )
+}
+
+export function HomeCommunityFallback() {
+  return (
+    <div className="space-y-24 min-h-[1180px] md:min-h-[780px] lg:min-h-[760px]">
+      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
+        <SectionTitle id="maintainers" title="Core Maintainers" />
+        <SectionBlock className="min-h-[260px] md:min-h-[220px]" />
+      </div>
+
+      <div className="px-4 w-full lg:max-w-(--breakpoint-lg) md:mx-auto">
+        <div className="space-y-8">
+          <div className="h-10 w-48 rounded bg-gray-200 dark:bg-gray-800" />
+          <SectionBlock className="min-h-[320px] md:min-h-[260px]" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function HomeNewsletterFallback() {
+  return (
+    <div className="px-4 mx-auto max-w-(--breakpoint-lg) relative min-h-[330px] md:min-h-[360px]">
+      <Card className="rounded-md p-8 min-h-[250px] animate-pulse">
+        <div className="h-8 w-64 rounded bg-gray-200 dark:bg-gray-700" />
+        <div className="mt-2 h-5 w-56 rounded bg-gray-100 dark:bg-gray-800" />
+        <div className="mt-6 grid max-w-sm gap-2">
+          <div className="h-12 rounded bg-gray-200 dark:bg-gray-700" />
+          <div className="h-4 w-56 rounded bg-gray-100 dark:bg-gray-800" />
+        </div>
+      </Card>
+      <div className="h-20" />
+    </div>
+  )
+}
+
+export function HomeApplicationStarterFallback() {
+  return (
+    <div
+      aria-hidden="true"
+      className="min-h-[320px] overflow-hidden rounded-[1rem] border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-950 md:min-h-[360px]"
+    >
+      <div className="border-b border-gray-200 bg-gray-50/70 px-5 py-4 dark:border-gray-800 dark:bg-gray-900/50">
+        <div className="h-7 w-64 max-w-full rounded bg-gray-200 dark:bg-gray-800" />
+        <div className="mt-4 flex flex-wrap gap-2">
+          <div className="h-9 w-28 rounded-lg bg-gray-200 dark:bg-gray-800" />
+          <div className="h-9 w-32 rounded-lg bg-gray-200 dark:bg-gray-800" />
+          <div className="h-9 w-24 rounded-lg bg-gray-200 dark:bg-gray-800" />
+        </div>
+      </div>
+
+      <div className="relative border-b border-gray-200 dark:border-gray-800">
+        <div className="px-5 pt-4">
+          <div className="h-3 w-12 rounded bg-gray-200 dark:bg-gray-800" />
+        </div>
+        <div className="px-5 pb-4 pt-3">
+          <div className="h-28 rounded-xl bg-gray-100 dark:bg-gray-900" />
+        </div>
+
+        <div className="border-t border-gray-200 px-5 py-4 dark:border-gray-800">
+          <div className="flex flex-wrap gap-3">
+            <div className="h-10 w-28 rounded-lg bg-gray-200 dark:bg-gray-800" />
+            <div className="h-10 w-36 rounded-lg bg-gray-200 dark:bg-gray-800" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function HomeStatsFallback() {
+  return (
+    <div
+      aria-hidden="true"
+      className="mx-auto grid w-full max-w-3xl animate-pulse grid-cols-1 gap-4 sm:grid-cols-3"
+    >
+      {Array.from({ length: 3 }).map((_, index) => (
+        <div
+          key={index}
+          className="min-w-0 rounded-r-md border-l-2 border-gray-200 bg-linear-to-r from-transparent to-gray-200/10 px-4 py-2 dark:border-gray-800 dark:to-gray-800/10"
+        >
+          <div className="flex min-w-0 items-start gap-3">
+            <div className="mt-1 h-5 w-5 shrink-0 rounded bg-gray-200 dark:bg-gray-800" />
+            <div className="min-w-0">
+              <div className="h-7 w-32 rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="mt-2 h-4 w-28 rounded bg-gray-100 dark:bg-gray-800" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/home/HomeSocialProofSection.tsx b/src/components/home/HomeSocialProofSection.tsx
new file mode 100644
index 000000000..3f3210ec4
--- /dev/null
+++ b/src/components/home/HomeSocialProofSection.tsx
@@ -0,0 +1,162 @@
+import { Link } from '@tanstack/react-router'
+import { Hydrate } from '@tanstack/react-start'
+import { visible } from '@tanstack/react-start/hydration'
+import { ArrowRight } from 'lucide-react'
+import { Card } from '~/components/Card'
+import { PartnersGrid } from '~/components/PartnersGrid'
+import { Button } from '~/ui'
+import { formatAuthors, formatPublishedDate } from '~/utils/blog-format'
+import type { RecentPost } from '~/utils/blog.functions'
+
+type HomeSocialProofSectionProps = {
+  recentPosts: ReadonlyArray<RecentPost>
+}
+
+export function HomeSocialProofSection({
+  recentPosts,
+}: HomeSocialProofSectionProps) {
+  return (
+    <Hydrate
+      when={visible({ rootMargin: '25%' })}
+      fallback={<SocialProofSkeleton />}
+    >
+      <HomeSocialProofContent recentPosts={recentPosts} />
+    </Hydrate>
+  )
+}
+
+function SocialProofSkeleton() {
+  return (
+    <div className="space-y-24">
+      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
+        <div className="h-10 w-40 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse mb-6" />
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-px overflow-hidden rounded-md border border-gray-200 dark:border-gray-800">
+          {Array.from({ length: 8 }).map((_, index) => (
+            <div
+              key={`partner-skeleton-${index}`}
+              className="min-h-[130px] bg-gray-100/70 dark:bg-gray-900/60 animate-pulse"
+            />
+          ))}
+        </div>
+      </div>
+      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
+        <div className="h-10 w-56 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse mb-6" />
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {Array.from({ length: 3 }).map((_, index) => (
+            <Card
+              key={`post-skeleton-${index}`}
+              className="overflow-hidden animate-pulse"
+            >
+              <div className="aspect-video bg-gray-100 dark:bg-gray-800" />
+              <div className="p-4">
+                <div className="h-5 w-5/6 rounded bg-gray-200 dark:bg-gray-700" />
+                <div className="mt-3 h-3 w-2/3 rounded bg-gray-200 dark:bg-gray-700" />
+                <div className="mt-4 space-y-2">
+                  <div className="h-3 rounded bg-gray-100 dark:bg-gray-800" />
+                  <div className="h-3 rounded bg-gray-100 dark:bg-gray-800" />
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function HomeSocialProofContent({ recentPosts }: HomeSocialProofSectionProps) {
+  return (
+    <div className="space-y-24">
+      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
+        <h3 id="partners" className="text-3xl font-bold mb-6 scroll-mt-24">
+          <a
+            href="#partners"
+            className="hover:underline decoration-gray-400 dark:decoration-gray-600"
+          >
+            Partners
+          </a>
+        </h3>
+        <PartnersGrid analyticsPlacement="home_grid" />
+        <div className="flex justify-center mt-6">
+          <Link to="/partners" search={{ status: 'inactive' }}>
+            <Button as="span">
+              View Previous Partners
+              <ArrowRight className="w-4 h-4" />
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      {recentPosts.length > 0 && (
+        <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
+          <h3 id="blog" className="text-3xl font-bold mb-6 scroll-mt-24">
+            <a
+              href="#blog"
+              className="hover:underline decoration-gray-400 dark:decoration-gray-600"
+            >
+              Latest Blog Posts
+            </a>
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {recentPosts.map(
+              ({ slug, title, published, excerpt, headerImage, authors }) => {
+                return (
+                  <Card
+                    as={Link}
+                    key={slug}
+                    to="/blog/$"
+                    params={{ _splat: slug } as never}
+                    className="flex flex-col justify-between overflow-hidden transition-all hover:shadow-md hover:border-blue-500"
+                  >
+                    {headerImage ? (
+                      <div className="aspect-video overflow-hidden bg-gray-100 dark:bg-gray-800">
+                        <img
+                          src={headerImage}
+                          alt=""
+                          loading="lazy"
+                          decoding="async"
+                          className="w-full h-full object-cover"
+                        />
+                      </div>
+                    ) : null}
+                    <div className="p-4 flex flex-col gap-3 flex-1 justify-between">
+                      <div>
+                        <div className="text-base font-bold">{title}</div>
+                        <div className="text-xs italic font-light mt-1 text-gray-600 dark:text-gray-400">
+                          by {formatAuthors(authors)}
+                          {published ? (
+                            <time
+                              dateTime={published}
+                              title={formatPublishedDate(published)}
+                            >
+                              {' '}
+                              on {formatPublishedDate(published)}
+                            </time>
+                          ) : null}
+                        </div>
+                        {excerpt ? (
+                          <p className="text-sm mt-3 text-gray-600 dark:text-gray-400 line-clamp-4 leading-relaxed">
+                            {excerpt}
+                          </p>
+                        ) : null}
+                      </div>
+                      <div className="text-blue-500 uppercase font-bold text-xs">
+                        Read More →
+                      </div>
+                    </div>
+                  </Card>
+                )
+              },
+            )}
+          </div>
+          <div className="flex justify-center mt-6">
+            <Button as={Link} to="/blog">
+              View All Posts
+              <ArrowRight className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/home/HomeStatsSection.tsx b/src/components/home/HomeStatsSection.tsx
new file mode 100644
index 000000000..3b7f263a7
--- /dev/null
+++ b/src/components/home/HomeStatsSection.tsx
@@ -0,0 +1,5 @@
+import OpenSourceStats from '~/components/OpenSourceStats'
+
+export function HomeStatsSection() {
+  return <OpenSourceStats />
+}
diff --git a/src/components/icons/YouTubeIcon.tsx b/src/components/icons/YouTubeIcon.tsx
new file mode 100644
index 000000000..8cb19b583
--- /dev/null
+++ b/src/components/icons/YouTubeIcon.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+export function YouTubeIcon({
+  className,
+  width = '1em',
+  height = '1em',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 461 461"
+      fill="currentColor"
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728 c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137 C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z" />
+    </svg>
+  )
+}
diff --git a/src/components/intent/SkillDependencyGraph.tsx b/src/components/intent/SkillDependencyGraph.tsx
new file mode 100644
index 000000000..916230515
--- /dev/null
+++ b/src/components/intent/SkillDependencyGraph.tsx
@@ -0,0 +1,282 @@
+import * as React from 'react'
+import {
+  forceSimulation,
+  forceLink,
+  forceManyBody,
+  forceCenter,
+  forceCollide,
+  type SimulationNodeDatum,
+  type SimulationLinkDatum,
+} from 'd3'
+import { Link } from '@tanstack/react-router'
+import { SKILL_TYPE_STYLES } from '~/routes/intent/registry/$packageName'
+
+interface SkillNode {
+  name: string
+  type: string | null
+  requires: Array<string> | null
+}
+
+interface GraphNode extends SimulationNodeDatum {
+  id: string
+  type: string | null
+  hasIncoming: boolean
+  hasOutgoing: boolean
+}
+
+interface GraphLink extends SimulationLinkDatum<GraphNode> {
+  source: string | GraphNode
+  target: string | GraphNode
+}
+
+const TYPE_COLORS: Record<string, { fill: string; stroke: string }> = {
+  core: { fill: '#8b5cf6', stroke: '#7c3aed' },
+  'sub-skill': { fill: '#6b7280', stroke: '#4b5563' },
+  framework: { fill: '#f59e0b', stroke: '#d97706' },
+  lifecycle: { fill: '#10b981', stroke: '#059669' },
+  composition: { fill: '#3b82f6', stroke: '#2563eb' },
+  security: { fill: '#ef4444', stroke: '#dc2626' },
+}
+
+const DEFAULT_COLOR = { fill: '#9ca3af', stroke: '#6b7280' }
+
+export function SkillDependencyGraph({
+  skills,
+  packageName,
+}: {
+  readonly skills: Array<SkillNode>
+  readonly packageName: string
+}) {
+  const svgRef = React.useRef<SVGSVGElement>(null)
+  const [nodes, setNodes] = React.useState<Array<GraphNode>>([])
+  const [links, setLinks] = React.useState<Array<GraphLink>>([])
+  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 })
+
+  // Build graph data
+  const { graphNodes, graphLinks, hasEdges } = React.useMemo(() => {
+    const skillNames = new Set(skills.map((s) => s.name))
+    const gNodes: Array<GraphNode> = skills.map((s) => ({
+      id: s.name,
+      type: s.type,
+      hasIncoming: false,
+      hasOutgoing:
+        (s.requires?.filter((r) => skillNames.has(r)).length ?? 0) > 0,
+    }))
+
+    const gLinks: Array<GraphLink> = []
+    const incomingSet = new Set<string>()
+
+    for (const skill of skills) {
+      if (!skill.requires) continue
+      for (const req of skill.requires) {
+        if (skillNames.has(req)) {
+          gLinks.push({ source: skill.name, target: req })
+          incomingSet.add(req)
+        }
+      }
+    }
+
+    for (const node of gNodes) {
+      node.hasIncoming = incomingSet.has(node.id)
+    }
+
+    return {
+      graphNodes: gNodes,
+      graphLinks: gLinks,
+      hasEdges: gLinks.length > 0,
+    }
+  }, [skills])
+
+  // Measure container
+  const containerRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (!containerRef.current) return
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      const { width } = entry.contentRect
+      const height = Math.min(Math.max(width * 0.6, 200), 400)
+      setDimensions({ width, height })
+    })
+    observer.observe(containerRef.current)
+    return () => observer.disconnect()
+  }, [])
+
+  // Run force simulation
+  React.useEffect(() => {
+    if (dimensions.width === 0 || graphNodes.length === 0) return
+
+    const nodesCopy = graphNodes.map((n) => ({ ...n }))
+    const linksCopy = graphLinks.map((l) => ({ ...l }))
+
+    const sim = forceSimulation(nodesCopy)
+      .force(
+        'link',
+        forceLink<GraphNode, GraphLink>(linksCopy)
+          .id((d) => d.id)
+          .distance(80),
+      )
+      .force('charge', forceManyBody().strength(-200))
+      .force('center', forceCenter(dimensions.width / 2, dimensions.height / 2))
+      .force('collide', forceCollide(35))
+
+    sim.on('end', () => {
+      setNodes([...nodesCopy])
+      setLinks(
+        linksCopy.map((l) => ({
+          ...l,
+          source: l.source as GraphNode,
+          target: l.target as GraphNode,
+        })),
+      )
+    })
+
+    // Run synchronously for small graphs
+    sim.tick(200)
+    sim.stop()
+    setNodes([...nodesCopy])
+    setLinks(
+      linksCopy.map((l) => ({
+        ...l,
+        source: l.source as GraphNode,
+        target: l.target as GraphNode,
+      })),
+    )
+
+    return () => {
+      sim.stop()
+    }
+  }, [graphNodes, graphLinks, dimensions])
+
+  if (!hasEdges) return null
+
+  const NODE_RADIUS = 6
+
+  return (
+    <div
+      ref={containerRef}
+      className="rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden bg-gray-50/50 dark:bg-gray-900/30"
+    >
+      {dimensions.width > 0 && nodes.length > 0 && (
+        <svg
+          ref={svgRef}
+          width={dimensions.width}
+          height={dimensions.height}
+          className="block"
+        >
+          <defs>
+            <marker
+              id="arrowhead"
+              markerWidth="8"
+              markerHeight="6"
+              refX="7"
+              refY="3"
+              orient="auto"
+            >
+              <path
+                d="M0,0 L8,3 L0,6"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1"
+                className="text-gray-400 dark:text-gray-600"
+              />
+            </marker>
+          </defs>
+
+          {/* Links */}
+          {links.map((link, i) => {
+            const source = link.source as GraphNode
+            const target = link.target as GraphNode
+            if (
+              source.x == null ||
+              source.y == null ||
+              target.x == null ||
+              target.y == null
+            )
+              return null
+
+            // Shorten line to stop at node edge
+            const dx = target.x - source.x
+            const dy = target.y - source.y
+            const dist = Math.sqrt(dx * dx + dy * dy)
+            if (dist === 0) return null
+            const offsetX = (dx / dist) * (NODE_RADIUS + 4)
+            const offsetY = (dy / dist) * (NODE_RADIUS + 4)
+
+            return (
+              <line
+                key={i}
+                x1={source.x + offsetX}
+                y1={source.y + offsetY}
+                x2={target.x - offsetX}
+                y2={target.y - offsetY}
+                stroke="currentColor"
+                strokeWidth={1.5}
+                className="text-gray-300 dark:text-gray-700"
+                markerEnd="url(#arrowhead)"
+              />
+            )
+          })}
+
+          {/* Nodes */}
+          {nodes.map((node) => {
+            if (node.x == null || node.y == null) return null
+            const colors = TYPE_COLORS[node.type ?? ''] ?? DEFAULT_COLOR
+
+            return (
+              <Link
+                key={node.id}
+                to="/intent/registry/$packageName/$skillName"
+                params={{ packageName, skillName: node.id }}
+              >
+                <g className="cursor-pointer group">
+                  <circle
+                    cx={node.x}
+                    cy={node.y}
+                    r={NODE_RADIUS}
+                    fill={colors.fill}
+                    stroke={colors.stroke}
+                    strokeWidth={1.5}
+                    opacity={0.85}
+                    className="transition-opacity group-hover:opacity-100"
+                  />
+                  <text
+                    x={node.x}
+                    y={node.y + NODE_RADIUS + 12}
+                    textAnchor="middle"
+                    className="text-[10px] fill-gray-500 dark:fill-gray-400 font-mono group-hover:fill-gray-900 dark:group-hover:fill-gray-100 transition-colors"
+                  >
+                    {node.id}
+                  </text>
+                </g>
+              </Link>
+            )
+          })}
+        </svg>
+      )}
+
+      {/* Legend */}
+      <div className="flex items-center gap-3 px-3 py-2 border-t border-gray-200 dark:border-gray-800 text-[10px] text-gray-400 dark:text-gray-500">
+        <span className="uppercase tracking-wider font-medium">
+          Dependencies
+        </span>
+        <span className="text-gray-300 dark:text-gray-700">|</span>
+        {Object.entries(SKILL_TYPE_STYLES)
+          .filter(([type]) => skills.some((s) => s.type === type))
+          .map(([type]) => {
+            const colors = TYPE_COLORS[type] ?? DEFAULT_COLOR
+            return (
+              <span key={type} className="flex items-center gap-1">
+                <span
+                  className="w-2 h-2 rounded-full"
+                  style={{ backgroundColor: colors.fill }}
+                />
+                {type}
+              </span>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/intent/SkillDiffViewer.tsx b/src/components/intent/SkillDiffViewer.tsx
new file mode 100644
index 000000000..e48c484cf
--- /dev/null
+++ b/src/components/intent/SkillDiffViewer.tsx
@@ -0,0 +1,257 @@
+import * as React from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { diffLines } from 'diff'
+import { intentSkillContentDiffQueryOptions } from '~/queries/intent'
+
+export function SkillDiffViewer({
+  packageName,
+  skillName,
+  fromVersion,
+  toVersion,
+}: {
+  readonly packageName: string
+  readonly skillName: string
+  readonly fromVersion: string
+  readonly toVersion: string
+}) {
+  const diffQuery = useQuery(
+    intentSkillContentDiffQueryOptions({
+      packageName,
+      skillName,
+      fromVersion,
+      toVersion,
+    }),
+  )
+
+  if (diffQuery.isLoading) {
+    const SKELETON_WIDTHS = ['85%', '72%', '90%', '65%', '78%', '82%']
+    return (
+      <div className="rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden">
+        <div className="animate-pulse p-4 space-y-2">
+          {SKELETON_WIDTHS.map((w, i) => (
+            <div
+              key={i}
+              className="h-4 rounded bg-gray-100 dark:bg-gray-800/60"
+              style={{ width: w }}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  const data = diffQuery.data
+  if (!data || (data.fromContent === null && data.toContent === null)) {
+    return (
+      <p className="text-xs text-gray-400 dark:text-gray-500 italic">
+        Content not available for diff.
+      </p>
+    )
+  }
+
+  const changes = diffLines(data.fromContent ?? '', data.toContent ?? '')
+
+  // Build line-level entries from diff hunks
+  const lines: Array<{
+    type: 'context' | 'added' | 'removed'
+    content: string
+    oldNum: number | null
+    newNum: number | null
+  }> = []
+
+  let oldLine = 1
+  let newLine = 1
+
+  for (const change of changes) {
+    const lineTexts = change.value.split('\n')
+    // diffLines includes a trailing empty string from the final newline
+    if (lineTexts[lineTexts.length - 1] === '') lineTexts.pop()
+
+    for (const text of lineTexts) {
+      if (change.added) {
+        lines.push({
+          type: 'added',
+          content: text,
+          oldNum: null,
+          newNum: newLine++,
+        })
+      } else if (change.removed) {
+        lines.push({
+          type: 'removed',
+          content: text,
+          oldNum: oldLine++,
+          newNum: null,
+        })
+      } else {
+        lines.push({
+          type: 'context',
+          content: text,
+          oldNum: oldLine++,
+          newNum: newLine++,
+        })
+      }
+    }
+  }
+
+  // Collapse long runs of context lines (show first/last 3 of each run)
+  const CONTEXT_WINDOW = 3
+  const collapsed = collapseContext(lines, CONTEXT_WINDOW)
+
+  const addedCount = lines.filter((l) => l.type === 'added').length
+  const removedCount = lines.filter((l) => l.type === 'removed').length
+
+  return (
+    <div className="rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden text-xs">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-800">
+        <span className="font-mono text-gray-500 dark:text-gray-400">
+          v{fromVersion} → v{toVersion}
+        </span>
+        <div className="flex items-center gap-2 ml-auto tabular-nums">
+          {addedCount > 0 && (
+            <span className="text-emerald-600 dark:text-emerald-400">
+              +{addedCount}
+            </span>
+          )}
+          {removedCount > 0 && (
+            <span className="text-red-500 dark:text-red-400">
+              -{removedCount}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Diff body */}
+      <div className="overflow-x-auto">
+        <table className="w-full font-mono text-[13px] leading-5 border-collapse">
+          <tbody>
+            {collapsed.map((entry, i) => {
+              if (entry.kind === 'separator') {
+                return (
+                  <tr key={`sep-${i}`}>
+                    <td
+                      colSpan={3}
+                      className="px-3 py-1.5 text-center text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900/30 border-y border-gray-100 dark:border-gray-800/50 select-none"
+                    >
+                      ⋯ {entry.hiddenCount} unchanged{' '}
+                      {entry.hiddenCount === 1 ? 'line' : 'lines'}
+                    </td>
+                  </tr>
+                )
+              }
+
+              const line = entry.line
+              const bgClass =
+                line.type === 'added'
+                  ? 'bg-emerald-50/70 dark:bg-emerald-950/20'
+                  : line.type === 'removed'
+                    ? 'bg-red-50/70 dark:bg-red-950/20'
+                    : ''
+              const gutterClass =
+                line.type === 'added'
+                  ? 'text-emerald-500/60 dark:text-emerald-600/60 bg-emerald-50 dark:bg-emerald-950/30'
+                  : line.type === 'removed'
+                    ? 'text-red-400/60 dark:text-red-600/60 bg-red-50 dark:bg-red-950/30'
+                    : 'text-gray-300 dark:text-gray-700 bg-gray-50/50 dark:bg-gray-900/20'
+              const prefixChar =
+                line.type === 'added'
+                  ? '+'
+                  : line.type === 'removed'
+                    ? '-'
+                    : ' '
+              const prefixColor =
+                line.type === 'added'
+                  ? 'text-emerald-600 dark:text-emerald-400'
+                  : line.type === 'removed'
+                    ? 'text-red-500 dark:text-red-400'
+                    : 'text-transparent'
+
+              return (
+                <tr key={i} className={bgClass}>
+                  <td
+                    className={`w-[1px] whitespace-nowrap px-2 py-0 text-right select-none border-r border-gray-100 dark:border-gray-800/50 tabular-nums ${gutterClass}`}
+                  >
+                    {line.oldNum ?? ''}
+                  </td>
+                  <td
+                    className={`w-[1px] whitespace-nowrap px-2 py-0 text-right select-none border-r border-gray-100 dark:border-gray-800/50 tabular-nums ${gutterClass}`}
+                  >
+                    {line.newNum ?? ''}
+                  </td>
+                  <td className="px-3 py-0 whitespace-pre-wrap break-all">
+                    <span className={`select-none mr-1.5 ${prefixColor}`}>
+                      {prefixChar}
+                    </span>
+                    {line.content}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+type CollapsedEntry =
+  | {
+      kind: 'line'
+      line: {
+        type: 'context' | 'added' | 'removed'
+        content: string
+        oldNum: number | null
+        newNum: number | null
+      }
+    }
+  | { kind: 'separator'; hiddenCount: number }
+
+function collapseContext(
+  lines: Array<{
+    type: 'context' | 'added' | 'removed'
+    content: string
+    oldNum: number | null
+    newNum: number | null
+  }>,
+  window: number,
+): Array<CollapsedEntry> {
+  // Find runs of consecutive context lines
+  const result: Array<CollapsedEntry> = []
+  let contextStart: number | null = null
+
+  const flushContext = (end: number) => {
+    if (contextStart === null) return
+    const runLength = end - contextStart
+    if (runLength <= window * 2 + 1) {
+      // Short run — show all lines
+      for (let j = contextStart; j < end; j++) {
+        result.push({ kind: 'line', line: lines[j] })
+      }
+    } else {
+      // Long run — show first `window`, separator, last `window`
+      for (let j = contextStart; j < contextStart + window; j++) {
+        result.push({ kind: 'line', line: lines[j] })
+      }
+      result.push({
+        kind: 'separator',
+        hiddenCount: runLength - window * 2,
+      })
+      for (let j = end - window; j < end; j++) {
+        result.push({ kind: 'line', line: lines[j] })
+      }
+    }
+    contextStart = null
+  }
+
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].type === 'context') {
+      if (contextStart === null) contextStart = i
+    } else {
+      flushContext(i)
+      result.push({ kind: 'line', line: lines[i] })
+    }
+  }
+  flushContext(lines.length)
+
+  return result
+}
diff --git a/src/components/intent/SkillSparkline.tsx b/src/components/intent/SkillSparkline.tsx
new file mode 100644
index 000000000..a077dd225
--- /dev/null
+++ b/src/components/intent/SkillSparkline.tsx
@@ -0,0 +1,193 @@
+import * as React from 'react'
+import * as Plot from '@observablehq/plot'
+import { PlotContainer } from '~/components/charts/PlotContainer'
+import type { SkillHistoryEntry } from '~/utils/intent.functions'
+
+export function SkillSparklinePlaceholder({
+  height = 40,
+}: {
+  height?: number
+}) {
+  return (
+    <div
+      className="animate-pulse rounded bg-gray-100 dark:bg-gray-800/40"
+      style={{ width: '100%', height }}
+    />
+  )
+}
+
+interface SkillSparklineProps {
+  history: Array<SkillHistoryEntry>
+  height?: number
+  maxSlots?: number
+  onVersionClick?: (entry: SkillHistoryEntry, index: number) => void
+}
+
+export function SkillSparkline({
+  history,
+  height = 40,
+  maxSlots,
+  onVersionClick,
+}: SkillSparklineProps) {
+  const n = history.length
+  const slots = Math.max(maxSlots ?? n, n)
+  const offset = slots - n
+
+  const options = React.useCallback(
+    (width: number) => {
+      const pxPerSlot = width / slots
+      const barPx = Math.min(10, pxPerSlot * 0.6)
+      const barW = (barPx / 2) * (slots / width)
+
+      const rectData: Array<{
+        x1: number
+        x2: number
+        y1: number
+        y2: number
+        type: string
+      }> = []
+
+      for (let i = 0; i < n; i++) {
+        const entry = history[i]
+        const x = i + offset
+        const hasChanges =
+          entry.added > 0 || entry.modified > 0 || entry.removed > 0
+
+        if (hasChanges) {
+          let y0 = 0
+          if (entry.added > 0) {
+            rectData.push({
+              x1: x - barW,
+              x2: x + barW,
+              y1: y0,
+              y2: y0 + entry.added,
+              type: 'added',
+            })
+            y0 += entry.added
+          }
+          if (entry.modified > 0) {
+            rectData.push({
+              x1: x - barW,
+              x2: x + barW,
+              y1: y0,
+              y2: y0 + entry.modified,
+              type: 'modified',
+            })
+            y0 += entry.modified
+          }
+          if (entry.removed > 0) {
+            rectData.push({
+              x1: x - barW,
+              x2: x + barW,
+              y1: y0,
+              y2: y0 + entry.removed,
+              type: 'removed',
+            })
+          }
+        } else {
+          // No changes — gray bar showing total
+          rectData.push({
+            x1: x - barW,
+            x2: x + barW,
+            y1: 0,
+            y2: entry.total,
+            type: 'unchanged',
+          })
+        }
+      }
+
+      const yMax = Math.max(...history.map((h) => h.total), 1)
+
+      const tipData = history.map((d, i) => {
+        const status =
+          d.added > 0
+            ? 'added'
+            : d.modified > 0
+              ? 'modified'
+              : d.removed > 0
+                ? 'removed'
+                : 'unchanged'
+        return { ...d, _x: i + offset, _status: status }
+      })
+
+      return {
+        height,
+        marginLeft: 0,
+        marginRight: 0,
+        marginTop: 2,
+        marginBottom: 2,
+        x: { axis: null, domain: [-0.5, slots - 0.5] },
+        y: { axis: null, domain: [0, yMax] },
+        marks: [
+          Plot.rect(rectData, {
+            x1: 'x1',
+            x2: 'x2',
+            y1: 'y1',
+            y2: 'y2',
+            fill: 'type',
+          }),
+          Plot.tip(
+            tipData,
+            Plot.pointer({
+              x: '_x',
+              y: 'total',
+              fill: '_status',
+              channels: {
+                Version: (d) => `v${d.version}`,
+                Skills: (d) => d.total,
+                Added: (d) => (d.added > 0 ? `+${d.added}` : null),
+                Removed: (d) => (d.removed > 0 ? `-${d.removed}` : null),
+                Modified: (d) => (d.modified > 0 ? `~${d.modified}` : null),
+              },
+              format: {
+                x: false,
+                y: false,
+                fill: true,
+              },
+            } as Plot.TipOptions),
+          ),
+        ],
+        color: {
+          domain: ['added', 'removed', 'modified', 'unchanged'],
+          range: ['#22c55e', '#ef4444', '#f59e0b', '#808080'],
+        },
+        style: { background: 'transparent' },
+      } satisfies Partial<Parameters<typeof Plot.plot>[0]>
+    },
+    [history, height, slots, offset, n],
+  )
+
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!onVersionClick) return
+      const container = e.currentTarget
+      const rect = container.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const width = container.clientWidth
+      if (width === 0) return
+
+      const domainX = (x / width) * slots - 0.5
+      const slotIndex = Math.round(domainX)
+      const historyIndex = slotIndex - offset
+      if (historyIndex < 0 || historyIndex >= n) return
+
+      e.preventDefault()
+      e.stopPropagation()
+      onVersionClick(history[historyIndex], historyIndex)
+    },
+    [onVersionClick, slots, offset, n, history],
+  )
+
+  if (history.length === 0) {
+    return null
+  }
+
+  return (
+    <PlotContainer
+      options={options}
+      height={height}
+      onClick={onVersionClick ? handleClick : undefined}
+      style={onVersionClick ? { cursor: 'pointer' } : undefined}
+    />
+  )
+}
diff --git a/src/components/intent/SkillSparklineFallback.tsx b/src/components/intent/SkillSparklineFallback.tsx
new file mode 100644
index 000000000..bcfddb5a9
--- /dev/null
+++ b/src/components/intent/SkillSparklineFallback.tsx
@@ -0,0 +1,8 @@
+export function SkillSparklineFallback({ height = 40 }: { height?: number }) {
+  return (
+    <div
+      className="animate-pulse rounded bg-gray-100 dark:bg-gray-800/40"
+      style={{ width: '100%', height }}
+    />
+  )
+}
diff --git a/src/components/landing/AiLanding.tsx b/src/components/landing/AiLanding.tsx
index 419f529fc..a54410668 100644
--- a/src/components/landing/AiLanding.tsx
+++ b/src/components/landing/AiLanding.tsx
@@ -1,141 +1,1020 @@
-import { useParams } from '@tanstack/react-router'
-import { Footer } from '~/components/Footer'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
-import { PartnersSection } from '~/components/PartnersSection'
-import { MaintainersSection } from '~/components/MaintainersSection'
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  Bot,
+  BookOpen,
+  GitBranch,
+  Mic,
+  MonitorCog,
+  Plug,
+  Radio,
+  ScanSearch,
+  Sparkles,
+  Split,
+  WandSparkles,
+} from 'lucide-react'
+
 import { BottomCTA } from '~/components/BottomCTA'
-import { aiProject } from '~/libraries/ai'
-import { AILibraryHero } from '~/components/AILibraryHero'
-import { getLibrary } from '~/libraries'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
 import LandingPageGad from '~/components/LandingPageGad'
-import { LibraryHero } from '~/components/LibraryHero'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { LibraryStatsSection } from '~/components/LibraryStatsSection'
+import { getLibrary } from '~/libraries'
 
+import { LandingEcosystemProof } from '~/components/landing/LandingEcosystemProof'
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
 const library = getLibrary('ai')
+const aiAgentPrompt = [
+  'Build a TanStack AI feature for a TypeScript app.',
+  'Use the headless client or framework adapter, AG-UI-compatible request/event streams, provider adapters, typed client/server tools, structured output, and observable runtime state without routing traffic through a hosted gateway.',
+  'Show provider portability, tool approval, streaming UI, and media/realtime capabilities where useful.',
+].join(' ')
+
+const heroProof = [
+  {
+    label: 'AG-UI native',
+    value: 'portable client and event protocol',
+  },
+  {
+    label: 'Provider adapters',
+    value: 'OpenRouter, OpenAI, Anthropic, Gemini',
+  },
+  {
+    label: 'Typed tools',
+    value: 'client, server, approvals, media',
+  },
+]
+
+const aiHeroClients = ['Vanilla', 'React', 'Vue', 'Solid', 'Svelte', 'Preact']
+const aiHeroServers = [
+  { label: 'TanStack AI', detail: 'TypeScript', kind: 'tanstack' as const },
+  { label: 'Python', dotted: true },
+  { label: 'Go', dotted: true },
+  { label: 'PHP', dotted: true },
+]
+const aiHeroProviders = ['OpenRouter', 'OpenAI', 'Anthropic', 'Gemini']
+const graphClientNodes = aiHeroClients.map((label, index) => ({
+  label,
+  x: [34, 154, 274][index % 3] ?? 154,
+  y: index < 3 ? 44 : 90,
+  width: 86,
+  height: 34,
+}))
+const graphAgUiNode = {
+  label: 'TanStack AI Client',
+  detail: 'AG-UI',
+  kind: 'tanstack' as const,
+  x: 142,
+  y: 138,
+  width: 136,
+  height: 58,
+}
+const graphServerNodes = aiHeroServers.map((server, index) => ({
+  ...server,
+  x: [38, 178, 254, 326][index] ?? 178,
+  y: index === 0 ? 254 : 260,
+  width: index === 0 ? 124 : 56,
+  height: index === 0 ? 54 : 42,
+}))
+const graphProviderNodes = aiHeroProviders.map((label, index) => ({
+  label,
+  x: 18 + index * 98,
+  y: 352,
+  width: 78,
+  height: 34,
+}))
+const aiHeroMessages = [
+  {
+    user: 'Build the invoice assistant on our stack.',
+    assistant:
+      'Using TanStack AI for TypeScript, AG-UI events, a server tool for invoices, and OpenRouter for model routing.',
+  },
+  {
+    user: 'Ask before it charges a card.',
+    assistant:
+      'Tool approval added. The UI will pause on chargeCard until your app confirms it.',
+  },
+  {
+    user: 'Can we switch providers later?',
+    assistant:
+      'Yes. The provider stays behind an adapter; the app keeps the same event stream and typed tools.',
+  },
+]
+
+type AiHeroChatMessage = {
+  assistant: string
+  id: string
+  isStreaming: boolean
+  user: string
+}
+
+const featureCards = [
+  {
+    title: 'Protocol first, gateway never required.',
+    body: 'Clients and servers speak AG-UI-compatible requests and event streams, so teams can own their transport, runtime, and deployment shape.',
+    icon: <Radio size={18} />,
+  },
+  {
+    title: 'Providers are adapters, not the architecture.',
+    body: 'Use OpenRouter, OpenAI, Anthropic, Gemini, Ollama, Groq, Grok/xAI, ElevenLabs, and fal.ai without making the app proprietary to one vendor.',
+    icon: <Plug size={18} />,
+  },
+  {
+    title: 'Tools stay typed where they run.',
+    body: 'Define client, server, isomorphic, and provider-native tools with input/output types, approvals, and runtime boundaries that remain visible.',
+    icon: <Bot size={18} />,
+  },
+  {
+    title: 'Media is part of the same SDK story.',
+    body: 'Text, structured output, reasoning streams, image, speech, transcription, realtime voice, and video can share provider-aware primitives.',
+    icon: <Mic size={18} />,
+  },
+]
+
+const pipelineSteps = [
+  {
+    label: 'Client',
+    body: 'Headless client or framework hook starts the interaction from your UI.',
+  },
+  {
+    label: 'Protocol',
+    body: 'AG-UI request and event streams keep client/server interop explicit.',
+  },
+  {
+    label: 'Provider',
+    body: 'Adapters translate into model-specific capabilities and options.',
+  },
+  {
+    label: 'Observe',
+    body: 'Devtools, middleware, logs, and hooks make the runtime explainable.',
+  },
+]
+
+const runtimeSignals = [
+  {
+    label: 'tool approval',
+    value: 'pending: chargeCard',
+  },
+  {
+    label: 'stream event',
+    value: 'reasoning.delta',
+  },
+  {
+    label: 'structured output',
+    value: 'schema matched',
+  },
+  {
+    label: 'media job',
+    value: 'image generation complete',
+  },
+]
+
+const frameworkAdapters = [
+  'React',
+  'Vue',
+  'Solid',
+  'Svelte',
+  'Preact',
+  'Vanilla',
+]
 
 export default function AiLanding() {
   const { version } = useParams({ strict: false })
+  const resolvedVersion = version ?? library.latestVersion
 
   return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={aiProject}
-        cta={{
-          linkProps: {
-            to: '/$libraryId/$version/docs',
-            params: { libraryId: library.id, version },
-          },
-          label: 'Get Started',
-          className: 'bg-pink-500 border-pink-500 hover:bg-pink-600 text-white',
-        }}
-      />
-      <AILibraryHero
-        project={aiProject}
-        cta={{
-          linkProps: {
-            to: '/$libraryId/$version/docs',
-            params: { libraryId: library.id, version },
-          },
-          label: 'Get Started',
-          className: 'bg-pink-500 border-pink-500 hover:bg-pink-600 text-white',
-        }}
-      />
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#fff1f7] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-pink-950/10 bg-[#ffe4f0] dark:border-pink-300/10 dark:bg-[#190612]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<WandSparkles size={14} />}>
+              Open AI application SDK
+            </SectionKicker>
 
-      <LibraryStatsSection library={library} />
+            <div className="mt-4 flex flex-wrap items-start gap-x-3 gap-y-2">
+              <h1 className="text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+                <LibraryWordmark library={library} />
+              </h1>
+              {library.badge ? (
+                <span className="rounded-md bg-zinc-950 px-2 py-1 text-xs font-black uppercase text-white dark:bg-white dark:text-zinc-950">
+                  {library.badge}
+                </span>
+              ) : null}
+            </div>
 
-      <LibraryFeatureHighlights
-        featureHighlights={aiProject.featureHighlights}
-      />
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              Own the AI stack between your UI and your models.
+            </p>
 
-      <div className="px-4 sm:px-6 lg:px-8 mx-auto">
-        <div className="pb-8">
-          <h3 className="text-3xl font-bold">
-            A complete AI ecosystem, not a vendor platform
-          </h3>
-          <p className="mt-6 text-xl leading-7 opacity-75 max-w-[90vw] sm:max-w-[500px] lg:max-w-[800px]">
-            TanStack AI is a pure open-source ecosystem of libraries and
-            standards, not a service. We connect you directly to the AI
-            providers you choose, with no middleman, no service fees, and no
-            vendor lock-in. Just powerful, type-safe tools built by and for the
-            community.
-          </p>
-        </div>
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mx-auto max-w-[90vw] sm:max-w-[600px] lg:max-w-[1200px]">
-          <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Server Agnostic</h4>
-            <p className="opacity-90 text-sm leading-relaxed">
-              Use any backend server you want. Well-documented protocol with
-              libraries for TypeScript, PHP, Python, and more.
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              AI is an open-source SDK for building provider-portable AI
+              features with AG-UI-compatible clients, server helpers, typed
+              tools, media generation, and observable runtime primitives without
+              a hosted gateway in the middle.
             </p>
+
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
+
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <AiLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={aiAgentPrompt}
+                label="Copy AI Prompt"
+              />
+            </div>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+            <LandingEcosystemProof />
           </div>
-          <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Client Agnostic</h4>
-            <p className="opacity-90 text-sm leading-relaxed">
-              Vanilla client library (@tanstack/ai-client) or framework
-              integrations for React, Solid, and more coming soon.
+
+          <AiGraphChatPanel />
+        </div>
+      </section>
+
+      <section className="border-b border-pink-950/10 bg-[#fff7fb] dark:border-pink-300/10 dark:bg-[#1f0916]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Sparkles size={14} />}>Why AI</SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              AI apps need protocols and boundaries, not another black box.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              A useful AI layer has to cross clients, servers, providers, tools,
+              streaming events, approvals, and observability. AI keeps those
+              boundaries explicit so teams can swap pieces without rewriting the
+              product.
             </p>
           </div>
-          <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Service Agnostic</h4>
-            <p className="opacity-90 text-sm leading-relaxed">
-              Connect to OpenAI, Anthropic, Gemini, and Ollama out of the box.
-              Create custom adapters for any provider.
-            </p>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
           </div>
-          <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Full Tooling Support</h4>
-            <p className="opacity-90 text-sm leading-relaxed">
-              Complete support for client and server tools, including tool
-              approvals and execution control.
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <LifecyclePanel />
+          <div>
+            <SectionKicker icon={<GitBranch size={14} />}>
+              Runtime pipeline
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              From UI intent to model output, every hop stays visible.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              AI features are distributed systems wearing a chat box. The SDK
+              gives each hop a typed place to live so the app can stream, tool
+              call, approve, retry, observe, and render intentionally.
             </p>
           </div>
-          <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Thinking & Reasoning</h4>
-            <p className="opacity-90 text-sm leading-relaxed">
-              Full support for thinking and reasoning models with
-              thinking/reasoning tokens streamed to clients.
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.82fr_1.18fr] lg:items-start xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<ScanSearch size={14} />}>
+              Observable runtime
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Debug the interaction, not just the final answer.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Tool calls, approvals, model options, provider events, structured
+              output, middleware, and media jobs all need to be inspectable if
+              the feature is going to be operated with confidence.
             </p>
           </div>
-          <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Fully Type-Safe</h4>
-            <p className="opacity-90 text-sm leading-relaxed">
-              Complete type safety across providers, models, and model options
-              from end to end.
+
+          <RuntimePanel />
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<Split size={14} />}>
+              Framework adapters
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Headless core, renderer-specific ergonomics.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Start from the headless client or use the adapter for your UI
+              runtime. The provider, protocol, tools, and event model stay the
+              same.
             </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              {frameworkAdapters.map((framework) => (
+                <span
+                  key={framework}
+                  className="rounded-md border border-pink-200 bg-pink-50 px-3 py-1.5 text-sm font-bold text-pink-800 dark:border-pink-900 dark:bg-pink-950/40 dark:text-pink-200"
+                >
+                  {framework}
+                </span>
+              ))}
+            </div>
           </div>
-          <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Next-Gen DevTools</h4>
-            <p className="opacity-90 text-sm leading-relaxed">
-              Amazing developer tools that show you everything happening with
-              your AI connections in real-time.
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fff1f7] py-12 dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<MonitorCog size={14} />}>
+              Product control
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Bring your providers, servers, and product constraints.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              AI should help teams standardize the app layer without flattening
+              provider capabilities or forcing a hosted platform into the
+              critical path.
             </p>
           </div>
-          <div className="border border-gray-200 dark:border-gray-800 rounded-xl shadow-xs p-6 transition-all duration-300 ease-out bg-white dark:bg-gray-900 hover:shadow-sm hover:border-pink-500/50 hover:-translate-y-1">
-            <h4 className="text-xl font-bold mb-3">Pure Open Source</h4>
-            <p className="opacity-90 text-sm leading-relaxed">
-              No hidden service, no fees, no upsells. Community-supported
-              software connecting you directly to your chosen providers.
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              AI stays useful by staying close to real product work.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, adapters, examples, partners, and GitHub sponsors
+              keep the SDK honest as models, providers, and app expectations
+              keep changing.
             </p>
           </div>
         </div>
-      </div>
 
-      <MaintainersSection libraryId="ai" />
-      <PartnersSection libraryId="ai" />
-      <LazySponsorSection />
-      <LandingPageGad />
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="ai" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
 
+      <LandingPageGad />
       <BottomCTA
         linkProps={{
           to: '/$libraryId/$version/docs',
-          params: { libraryId: library.id, version },
+          params: { libraryId: library.id, version: resolvedVersion },
         }}
         label="Get Started!"
-        className="bg-purple-500 border-purple-500 hover:bg-purple-600 text-white"
+        className="border-pink-500 bg-pink-500 text-white hover:bg-pink-600"
       />
       <Footer />
-    </LibraryPageContainer>
+    </div>
+  )
+}
+
+function AiGraphChatPanel() {
+  const [activeClient, setActiveClient] = React.useState(0)
+  const [activeProvider, setActiveProvider] = React.useState(0)
+  const [chatMessages, setChatMessages] = React.useState<
+    Array<AiHeroChatMessage>
+  >([])
+  const [typingUserMessage, setTypingUserMessage] = React.useState('')
+  const primaryServerNode = graphServerNodes[0]
+  const chatScrollRef = React.useRef<HTMLDivElement>(null)
+  const chatLockedToBottomRef = React.useRef(true)
+
+  React.useEffect(() => {
+    const clientIntervalId = window.setInterval(() => {
+      setActiveClient((current) => (current + 1) % aiHeroClients.length)
+    }, 2300)
+    const providerIntervalId = window.setInterval(() => {
+      setActiveProvider((current) => (current + 1) % aiHeroProviders.length)
+    }, 4100)
+
+    return () => {
+      window.clearInterval(clientIntervalId)
+      window.clearInterval(providerIntervalId)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    let cancelled = false
+    const timeouts: Array<number> = []
+
+    const addTimeout = (callback: () => void, delay: number) => {
+      const timeoutId = window.setTimeout(callback, delay)
+      timeouts.push(timeoutId)
+    }
+
+    const streamAssistantResponse = (
+      id: string,
+      response: string,
+      onComplete: () => void,
+    ) => {
+      let currentIndex = 0
+
+      const streamChunk = () => {
+        if (cancelled) {
+          return
+        }
+
+        if (currentIndex < response.length) {
+          const chunkSize = 2 + Math.floor(Math.random() * 7)
+          const nextIndex = Math.min(currentIndex + chunkSize, response.length)
+          const nextText = response.slice(0, nextIndex)
+
+          setChatMessages((currentMessages) =>
+            currentMessages.map((message) =>
+              message.id === id
+                ? { ...message, assistant: nextText, isStreaming: true }
+                : message,
+            ),
+          )
+
+          currentIndex = nextIndex
+          addTimeout(streamChunk, 22 + Math.floor(Math.random() * 58))
+          return
+        }
+
+        setChatMessages((currentMessages) =>
+          currentMessages.map((message) =>
+            message.id === id ? { ...message, isStreaming: false } : message,
+          ),
+        )
+        addTimeout(onComplete, 1600)
+      }
+
+      addTimeout(streamChunk, 450)
+    }
+
+    const typeUserMessage = (
+      messageIndex: number,
+      onComplete: (id: string) => void,
+    ) => {
+      const message = aiHeroMessages[messageIndex]
+      let currentIndex = 0
+
+      setTypingUserMessage('')
+
+      const typeChar = () => {
+        if (cancelled) {
+          return
+        }
+
+        if (currentIndex < message.user.length) {
+          currentIndex += 1
+          setTypingUserMessage(message.user.slice(0, currentIndex))
+          addTimeout(typeChar, 30 + Math.floor(Math.random() * 40))
+          return
+        }
+
+        addTimeout(() => {
+          const id = `${messageIndex}-${Date.now()}`
+
+          setTypingUserMessage('')
+          setChatMessages((currentMessages) => [
+            ...currentMessages.slice(-1),
+            {
+              assistant: '',
+              id,
+              isStreaming: true,
+              user: message.user,
+            },
+          ])
+          onComplete(id)
+        }, 320)
+      }
+
+      typeChar()
+    }
+
+    const playMessage = (messageIndex: number) => {
+      if (cancelled) {
+        return
+      }
+
+      const nextMessageIndex = messageIndex % aiHeroMessages.length
+      const message = aiHeroMessages[nextMessageIndex]
+
+      typeUserMessage(nextMessageIndex, (id) => {
+        streamAssistantResponse(id, message.assistant, () => {
+          playMessage(nextMessageIndex + 1)
+        })
+      })
+    }
+
+    addTimeout(() => playMessage(0), 700)
+
+    return () => {
+      cancelled = true
+      timeouts.forEach((timeoutId) => window.clearTimeout(timeoutId))
+    }
+  }, [])
+
+  React.useEffect(() => {
+    const element = chatScrollRef.current
+    if (!element) {
+      return
+    }
+
+    const handleScroll = () => {
+      const distanceFromBottom =
+        element.scrollHeight - element.scrollTop - element.clientHeight
+
+      chatLockedToBottomRef.current = distanceFromBottom < 72
+    }
+
+    element.addEventListener('scroll', handleScroll, { passive: true })
+    return () => {
+      element.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    const frameId = window.requestAnimationFrame(() => {
+      const element = chatScrollRef.current
+
+      if (element && chatLockedToBottomRef.current) {
+        element.scrollTop = element.scrollHeight
+      }
+    })
+
+    return () => window.cancelAnimationFrame(frameId)
+  }, [chatMessages])
+
+  return (
+    <div className="grid w-full min-w-0 max-w-full items-start gap-5 lg:grid-cols-[1.05fr_0.95fr]">
+      <AiDemoWindow title="client graph">
+        <div className="relative h-[26rem] overflow-hidden bg-[#fff7fb] dark:bg-[#120914]">
+          <div className="absolute inset-0 opacity-45 [background-image:linear-gradient(rgba(236,72,153,.14)_1px,transparent_1px),linear-gradient(90deg,rgba(236,72,153,.14)_1px,transparent_1px)] [background-size:28px_28px]" />
+          <svg
+            className="pointer-events-none absolute inset-0 h-full w-full"
+            viewBox="0 0 420 420"
+            aria-hidden="true"
+          >
+            {graphClientNodes.map((node, index) => (
+              <GraphLine
+                key={`client-${node.label}`}
+                active={activeClient === index}
+                d={curveBetween(
+                  bottomAnchor(node),
+                  topAnchor(graphAgUiNode),
+                  0.45,
+                )}
+              />
+            ))}
+            {graphServerNodes.map((node, index) => (
+              <GraphLine
+                key={`server-${node.label}`}
+                active={index === 0}
+                d={curveBetween(
+                  bottomAnchor(graphAgUiNode),
+                  topAnchor(node),
+                  0.5,
+                )}
+              />
+            ))}
+            {graphProviderNodes.map((node, index) => (
+              <GraphLine
+                key={`provider-${node.label}`}
+                active={activeProvider === index}
+                d={curveBetween(
+                  bottomAnchor(primaryServerNode),
+                  topAnchor(node),
+                  0.55,
+                )}
+              />
+            ))}
+          </svg>
+
+          <GraphLabel x={18} y={24}>
+            client
+          </GraphLabel>
+          <GraphLabel x={50} y={236}>
+            server / runtime
+          </GraphLabel>
+          <GraphLabel x={18} y={328}>
+            provider
+          </GraphLabel>
+
+          {graphClientNodes.map((node, index) => (
+            <GraphNode
+              key={node.label}
+              active={index === activeClient}
+              label={node.label}
+              node={node}
+            />
+          ))}
+          <GraphNode
+            active
+            detail={graphAgUiNode.detail}
+            kind={graphAgUiNode.kind}
+            label={graphAgUiNode.label}
+            node={graphAgUiNode}
+          />
+          {graphServerNodes.map((node, index) => (
+            <GraphNode
+              key={node.label}
+              active={index === 0}
+              detail={node.detail}
+              dotted={node.dotted}
+              kind={node.kind}
+              label={node.label}
+              node={node}
+            />
+          ))}
+          {graphProviderNodes.map((node, index) => (
+            <GraphNode
+              key={node.label}
+              active={index === activeProvider}
+              label={node.label}
+              node={node}
+            />
+          ))}
+        </div>
+      </AiDemoWindow>
+
+      <AiDemoWindow title="chat runtime">
+        <div className="flex h-[26rem] min-w-0 flex-col bg-zinc-50 dark:bg-zinc-900">
+          <div
+            ref={chatScrollRef}
+            className="min-h-0 flex-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          >
+            <div className="flex min-h-full flex-col justify-end gap-2.5 p-4">
+              {chatMessages.map((message) => (
+                <React.Fragment key={message.id}>
+                  <div className="ml-auto max-w-[86%] rounded-xl bg-pink-500 px-3 py-2 text-xs font-bold leading-5 text-white shadow-sm">
+                    {message.user}
+                  </div>
+                  {message.assistant || message.isStreaming ? (
+                    <div className="max-w-[90%] rounded-xl border border-zinc-200 bg-white px-3 py-2 text-xs leading-5 text-zinc-800 shadow-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200">
+                      {message.assistant}
+                      {message.isStreaming ? (
+                        <span className="ml-1 inline-block h-3.5 w-1 rounded-sm bg-pink-500 align-[-0.2rem] motion-safe:animate-pulse" />
+                      ) : null}
+                    </div>
+                  ) : null}
+                </React.Fragment>
+              ))}
+              <div className="grid gap-2 pt-2 text-xs font-bold sm:grid-cols-2">
+                {[
+                  ['event', 'assistant.delta'],
+                  ['tool', 'approval required'],
+                  ['provider', aiHeroProviders[activeProvider]],
+                  ['server', 'TanStack AI'],
+                ].map(([label, value]) => (
+                  <div
+                    key={label}
+                    className="rounded-lg bg-white px-3 py-2 dark:bg-zinc-950"
+                  >
+                    <p className="text-[0.58rem] uppercase text-zinc-500 dark:text-zinc-500">
+                      {label}
+                    </p>
+                    <p className="mt-1 truncate text-pink-700 dark:text-pink-300">
+                      {value}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="shrink-0 border-t border-zinc-200 p-4 dark:border-zinc-800">
+            <div
+              className={
+                typingUserMessage
+                  ? 'rounded-lg border border-pink-300 bg-white px-3 py-2 text-sm font-bold text-zinc-950 ring-1 ring-pink-500/30 dark:border-pink-900 dark:bg-zinc-950 dark:text-zinc-100'
+                  : 'rounded-lg border border-pink-200 bg-white px-3 py-2 text-sm font-bold text-zinc-500 dark:border-pink-950 dark:bg-zinc-950 dark:text-zinc-500'
+              }
+            >
+              {typingUserMessage || 'Type a message...'}
+              {typingUserMessage ? (
+                <span className="ml-1 inline-block h-4 w-1 rounded-sm bg-pink-500 align-[-0.2rem] motion-safe:animate-pulse" />
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </AiDemoWindow>
+    </div>
+  )
+}
+
+function AiDemoWindow({
+  children,
+  title,
+}: {
+  children: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="w-full min-w-0 overflow-hidden rounded-lg border border-pink-200 bg-white shadow-sm shadow-pink-950/5 dark:border-pink-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3 border-b border-pink-100 px-4 py-3 dark:border-pink-950/70">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          {title}
+        </span>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+type GraphNodePosition = {
+  height: number
+  label: string
+  width: number
+  x: number
+  y: number
+}
+
+type GraphPoint = {
+  x: number
+  y: number
+}
+
+function topAnchor(node: GraphNodePosition): GraphPoint {
+  return {
+    x: node.x + node.width / 2,
+    y: node.y,
+  }
+}
+
+function bottomAnchor(node: GraphNodePosition): GraphPoint {
+  return {
+    x: node.x + node.width / 2,
+    y: node.y + node.height,
+  }
+}
+
+function curveBetween(start: GraphPoint, end: GraphPoint, bend = 0.5): string {
+  if (Math.abs(end.y - start.y) > Math.abs(end.x - start.x)) {
+    const controlY = start.y + (end.y - start.y) * bend
+
+    return `M ${start.x} ${start.y} C ${start.x} ${controlY}, ${end.x} ${controlY}, ${end.x} ${end.y}`
+  }
+
+  const controlX = start.x + (end.x - start.x) * bend
+  return `M ${start.x} ${start.y} C ${controlX} ${start.y}, ${controlX} ${end.y}, ${end.x} ${end.y}`
+}
+
+function graphStyle(node: GraphNodePosition): React.CSSProperties {
+  return {
+    height: `${(node.height / 420) * 100}%`,
+    left: `${(node.x / 420) * 100}%`,
+    top: `${(node.y / 420) * 100}%`,
+    width: `${(node.width / 420) * 100}%`,
+  }
+}
+
+function GraphLine({ active, d }: { active?: boolean; d: string }) {
+  return (
+    <path
+      d={d}
+      fill="none"
+      stroke={active ? 'currentColor' : 'rgb(113 113 122 / 0.28)'}
+      strokeLinecap="round"
+      strokeWidth={active ? 3 : 1.5}
+      className={
+        active
+          ? 'text-zinc-950 transition-all duration-500 dark:text-white'
+          : 'transition-all duration-500'
+      }
+    />
+  )
+}
+
+function GraphLabel({
+  children,
+  x,
+  y,
+}: {
+  children: React.ReactNode
+  x: number
+  y: number
+}) {
+  return (
+    <div
+      className="absolute z-10 text-[0.62rem] font-black uppercase text-zinc-500 dark:text-zinc-500"
+      style={{
+        left: `${(x / 420) * 100}%`,
+        top: `${(y / 420) * 100}%`,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function GraphNode({
+  active,
+  detail,
+  dotted,
+  kind,
+  label,
+  node,
+}: {
+  active?: boolean
+  detail?: string
+  dotted?: boolean
+  kind?: 'tanstack'
+  label: string
+  node: GraphNodePosition
+}) {
+  const isTanStack = kind === 'tanstack'
+
+  return (
+    <div
+      style={graphStyle(node)}
+      className={
+        isTanStack
+          ? active
+            ? 'absolute z-20 flex flex-col items-center justify-center rounded-lg border-2 border-pink-300 bg-linear-to-br from-pink-400 to-pink-700 px-2 text-center text-xs font-black leading-tight text-white shadow-xl shadow-pink-950/30 ring-2 ring-pink-200/70 transition-all duration-500 dark:from-pink-300 dark:to-pink-600 dark:ring-pink-400/25'
+            : 'absolute z-20 flex flex-col items-center justify-center rounded-lg border-2 border-pink-300 bg-linear-to-br from-white to-pink-100 px-2 text-center text-xs font-black leading-tight text-pink-700 shadow-md shadow-pink-950/10 transition-all duration-500 dark:border-pink-500/70 dark:from-pink-950/70 dark:to-pink-900/25 dark:text-pink-100'
+          : active
+            ? 'absolute z-20 flex flex-col items-center justify-center rounded-lg border border-zinc-950 bg-zinc-950 px-2 text-center text-xs font-black leading-tight text-white shadow-lg shadow-zinc-950/20 transition-all duration-500 dark:border-white dark:bg-white dark:text-zinc-950 dark:shadow-white/10'
+            : dotted
+              ? 'absolute z-20 flex flex-col items-center justify-center rounded-lg border border-dashed border-zinc-400 bg-white/70 px-2 text-center text-xs font-bold leading-tight text-zinc-500 transition-all duration-500 dark:border-zinc-600 dark:bg-zinc-950/65 dark:text-zinc-500'
+              : 'absolute z-20 flex flex-col items-center justify-center rounded-lg border border-zinc-300 bg-white/85 px-2 text-center text-xs font-bold leading-tight text-zinc-600 transition-all duration-500 dark:border-zinc-700 dark:bg-zinc-950/80 dark:text-zinc-400'
+      }
+    >
+      <span>{label}</span>
+      {detail ? (
+        <span
+          className={
+            active
+              ? 'mt-0.5 block text-[0.58rem] uppercase opacity-75'
+              : 'mt-0.5 block text-[0.58rem] uppercase text-zinc-400 dark:text-zinc-500'
+          }
+        >
+          {detail}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+function LifecyclePanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {pipelineSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-[#fff1f7] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-pink-100 text-sm font-black text-pink-800 dark:bg-pink-950 dark:text-pink-200">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function RuntimePanel() {
+  return (
+    <div className="min-w-0 rounded-lg border border-pink-200 bg-white p-4 dark:border-pink-900 dark:bg-zinc-950">
+      <div className="rounded-lg bg-zinc-950 p-4 text-sm text-pink-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          const {'{'} messages, addToolApprovalResponse {'}'} = useChat({'{'}
+          <br />
+          &nbsp;&nbsp;connection: fetchServerSentEvents(&quot;/api/chat&quot;),
+          <br />
+          &nbsp;&nbsp;tools,
+          <br />
+          &nbsp;&nbsp;devtools: {'{'} name: &quot;Support Chat&quot; {'}'}
+          <br />
+          {'}'})
+        </p>
+      </div>
+
+      <div className="mt-4 grid gap-3 md:grid-cols-2">
+        {runtimeSignals.map((signal) => (
+          <div
+            key={signal.label}
+            className="rounded-lg border border-zinc-200 bg-[#fff7fb] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <p className="text-[0.65rem] font-black uppercase text-zinc-500 dark:text-zinc-400">
+              {signal.label}
+            </p>
+            <p className="mt-2 text-sm font-bold leading-6 text-zinc-950 dark:text-white">
+              {signal.value}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-pink-100 text-pink-800 dark:bg-pink-950 dark:text-pink-200">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-pink-700 dark:text-pink-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-pink-500 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function AiLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
   )
 }
diff --git a/src/components/landing/CliLanding.tsx b/src/components/landing/CliLanding.tsx
new file mode 100644
index 000000000..bc787962d
--- /dev/null
+++ b/src/components/landing/CliLanding.tsx
@@ -0,0 +1,509 @@
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  Bot,
+  BookOpen,
+  FileCode2,
+  GitBranch,
+  Layers,
+  PackagePlus,
+  Puzzle,
+  Sparkles,
+  Terminal,
+} from 'lucide-react'
+
+import { BottomCTA } from '~/components/BottomCTA'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
+import LandingPageGad from '~/components/LandingPageGad'
+import { getLibrary } from '~/libraries'
+
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
+const library = getLibrary('cli')
+const cliAgentPrompt = [
+  'Use TanStack CLI for a TanStack project workflow.',
+  'Show how the CLI, Builder, docs search, and modular integrations can scaffold or modify a TanStack Start app with auth, database, styling, deployment, and package-specific best practices.',
+  'Keep generated changes inspectable and grounded in TanStack docs instead of relying on generic framework assumptions.',
+].join(' ')
+
+const heroProof = [
+  {
+    label: 'CLI',
+    value: 'project commands and generated changes',
+  },
+  {
+    label: 'Docs',
+    value: 'search, fetch, and introspect',
+  },
+  {
+    label: 'Builder',
+    value: 'visual stack selection and export',
+  },
+]
+
+const commandRows = [
+  ['search-docs', '"router loaders" --library router'],
+  ['create', 'my-app --add-ons clerk,drizzle'],
+  ['libraries', '--group state --json'],
+  ['ecosystem', '--category database --json'],
+]
+
+const featureCards = [
+  {
+    title: 'A CLI that knows TanStack instead of guessing.',
+    body: 'Commands can start from TanStack docs, packages, examples, and integration metadata rather than generic project templates.',
+    icon: <Terminal size={18} />,
+  },
+  {
+    title: 'CLI introspection turns docs into agent context.',
+    body: 'Use JSON commands for docs, libraries, add-ons, and ecosystem data so generated work can reference current TanStack conventions.',
+    icon: <Bot size={18} />,
+  },
+  {
+    title: 'Integrations become selectable building blocks.',
+    body: 'Auth, databases, styling, deployment, and more can be composed into a Start-ready app without burying every choice in hand-written setup.',
+    icon: <Puzzle size={18} />,
+  },
+  {
+    title: 'The Builder makes the stack visible.',
+    body: 'Use the web UI to select libraries and partners, preview generated choices, and export a plan the CLI or agent can execute.',
+    icon: <Layers size={18} />,
+  },
+]
+
+const workflowSteps = [
+  {
+    label: 'Discover',
+    body: 'Search docs, examples, packages, and integrations through direct CLI commands.',
+  },
+  {
+    label: 'Choose',
+    body: 'Select libraries, partners, deployment targets, and app shape.',
+  },
+  {
+    label: 'Generate',
+    body: 'Create or modify files with TanStack-specific conventions in mind.',
+  },
+  {
+    label: 'Review',
+    body: 'Inspect the generated plan and project changes before shipping.',
+  },
+]
+
+const builderOutputs = [
+  {
+    label: 'libraries',
+    value: 'Start, Router, Query, Form',
+  },
+  {
+    label: 'partners',
+    value: 'Cloudflare, Clerk, Drizzle',
+  },
+  {
+    label: 'files',
+    value: 'routes, server fns, env, deploy config',
+  },
+  {
+    label: 'CLI config',
+    value: '.tanstack.json and chosen add-ons',
+  },
+]
+
+export default function CliLanding() {
+  const { version } = useParams({ strict: false })
+  const resolvedVersion = version ?? library.latestVersion
+
+  return (
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#eef2ff] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-indigo-950/10 bg-[#e0e7ff] dark:border-indigo-300/10 dark:bg-[#090b1e]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<Terminal size={14} />}>
+              CLI, add-ons, and Builder
+            </SectionKicker>
+
+            <div className="mt-4 flex flex-wrap items-start gap-x-3 gap-y-2">
+              <h1 className="text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+                <LibraryWordmark library={library} />
+              </h1>
+              {library.badge ? (
+                <span className="rounded-md bg-zinc-950 px-2 py-1 text-xs font-black uppercase text-white dark:bg-white dark:text-zinc-950">
+                  {library.badge}
+                </span>
+              ) : null}
+            </div>
+
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              Turn TanStack knowledge into project changes.
+            </p>
+
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              CLI brings together project commands, docs search, modular
+              integrations, and the Builder so TanStack Start apps can be
+              scaffolded and customized with current TanStack context.
+            </p>
+
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
+
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <CliLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <CliSecondaryLink
+                to="/builder"
+                label="Try the Builder"
+                icon={<Layers size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={cliAgentPrompt}
+                label="Copy CLI Prompt"
+              />
+            </div>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+          </div>
+
+          <CliWorkbenchPanel />
+        </div>
+      </section>
+
+      <section className="border-b border-indigo-950/10 bg-[#f4f6ff] dark:border-indigo-300/10 dark:bg-[#0e1026]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Sparkles size={14} />}>Why CLI</SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Project setup is where documentation meets the filesystem.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The hard part is not printing a template. It is choosing the right
+              TanStack libraries, wiring partner integrations, following current
+              docs, and leaving the user with a project they can understand.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <WorkflowPanel />
+          <div>
+            <SectionKicker icon={<GitBranch size={14} />}>
+              Project workflow
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Discover, choose, generate, review.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              CLI should help a team move from product intent to project files
+              without hiding the important decisions behind a magic template.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.82fr_1.18fr] lg:items-start xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<PackagePlus size={14} />}>
+              Builder output
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Make the stack visible before files change.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The Builder turns app intent into a readable stack brief: TanStack
+              libraries, partner integrations, deployment target, generated
+              files, and CLI-ready configuration.
+            </p>
+          </div>
+
+          <BuilderPanel />
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<FileCode2 size={14} />}>
+              Developer ergonomics
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Generated code should still feel authored.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              CLI is strongest when it gives teams inspectable changes,
+              traceable docs context, and a clear path back to the choices that
+              produced the project.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              CLI connects the docs, packages, partners, and people.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, integrations, examples, partners, and GitHub sponsors
+              keep the project workflow grounded in real TanStack usage.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="cli" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
+
+      <LandingPageGad />
+      <BottomCTA
+        linkProps={{
+          to: '/$libraryId/$version/docs',
+          params: { libraryId: library.id, version: resolvedVersion },
+        }}
+        label="Get Started!"
+        className="border-indigo-500 bg-indigo-500 text-white hover:bg-indigo-600"
+      />
+      <Footer />
+    </div>
+  )
+}
+
+function CliWorkbenchPanel() {
+  const [activeCommandIndex, setActiveCommandIndex] = React.useState(0)
+  const activeCommand = commandRows[activeCommandIndex] ?? commandRows[0]
+  const activeCommandPreview = `npx @tanstack/cli ${activeCommand[0]} ${activeCommand[1]}`
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-indigo-200 bg-white p-4 shadow-sm shadow-indigo-950/5 dark:border-indigo-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          tanstack cli
+        </span>
+      </div>
+
+      <div className="mt-4 rounded-lg bg-zinc-950 p-4 text-sm text-indigo-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          npx @tanstack/cli create --list-add-ons --json
+          <br />
+          {activeCommandPreview}
+          <br />
+          npx @tanstack/cli doc query framework/react/overview --json
+        </p>
+      </div>
+
+      <div className="mt-4 grid gap-3 md:grid-cols-2">
+        {commandRows.map(([label, value], index) => (
+          <button
+            key={label}
+            aria-pressed={activeCommandIndex === index}
+            className={
+              activeCommandIndex === index
+                ? 'rounded-lg border border-indigo-500 bg-indigo-500 p-4 text-left text-white'
+                : 'rounded-lg border border-zinc-200 bg-indigo-50 p-4 text-left transition-colors hover:border-indigo-300 dark:border-zinc-800 dark:bg-indigo-950/20 dark:hover:border-indigo-800'
+            }
+            type="button"
+            onClick={() => setActiveCommandIndex(index)}
+          >
+            <p
+              className={
+                activeCommandIndex === index
+                  ? 'text-[0.65rem] font-black uppercase text-white/75'
+                  : 'text-[0.65rem] font-black uppercase text-indigo-700 dark:text-indigo-300'
+              }
+            >
+              {label}
+            </p>
+            <p className="mt-2 text-sm font-bold leading-6">{value}</p>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function WorkflowPanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {workflowSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-[#eef2ff] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-100 text-sm font-black text-indigo-800 dark:bg-indigo-950 dark:text-indigo-200">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function BuilderPanel() {
+  return (
+    <div className="min-w-0 rounded-lg border border-indigo-200 bg-white p-4 dark:border-indigo-900 dark:bg-zinc-950">
+      <div className="grid gap-3 md:grid-cols-2">
+        {builderOutputs.map((output) => (
+          <div
+            key={output.label}
+            className="rounded-lg border border-zinc-200 bg-[#f4f6ff] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <p className="text-[0.65rem] font-black uppercase text-zinc-500 dark:text-zinc-400">
+              {output.label}
+            </p>
+            <p className="mt-2 text-sm font-bold leading-6 text-zinc-950 dark:text-white">
+              {output.value}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 rounded-lg bg-indigo-50 p-4 text-sm leading-6 text-indigo-950 dark:bg-indigo-950/25 dark:text-indigo-100">
+        The output is not just a template. It is a stack decision record that an
+        agent, CLI command, or developer can follow.
+      </div>
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-100 text-indigo-800 dark:bg-indigo-950 dark:text-indigo-200">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-indigo-700 dark:text-indigo-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-indigo-500 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function CliLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
+  )
+}
+
+function CliSecondaryLink({
+  icon,
+  label,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-indigo-300 bg-transparent px-4 py-2.5 text-sm font-bold text-indigo-700 transition-colors hover:bg-indigo-500/10 dark:border-indigo-700 dark:text-indigo-300 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
+  )
+}
diff --git a/src/components/landing/ConfigLanding.tsx b/src/components/landing/ConfigLanding.tsx
index 7e2fc16d9..5771d257d 100644
--- a/src/components/landing/ConfigLanding.tsx
+++ b/src/components/landing/ConfigLanding.tsx
@@ -1,81 +1,503 @@
-import { Footer } from '~/components/Footer'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
-import { LibraryHero } from '~/components/LibraryHero'
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  BookOpen,
+  Boxes,
+  ClipboardCheck,
+  FileCheck2,
+  GitBranch,
+  PackageCheck,
+  ScanLine,
+  ShieldCheck,
+  Sparkles,
+  TerminalSquare,
+} from 'lucide-react'
+
 import { BottomCTA } from '~/components/BottomCTA'
-import { configProject } from '~/libraries/config'
-import { getLibrary } from '~/libraries'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
 import LandingPageGad from '~/components/LandingPageGad'
-import { Button } from '~/ui'
-import { PartnersSection } from '~/components/PartnersSection'
-import { MaintainersSection } from '~/components/MaintainersSection'
-import { CheckCircleIcon } from '~/components/icons/CheckCircleIcon'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { LibraryStatsSection } from '~/components/LibraryStatsSection'
+import { getLibrary } from '~/libraries'
 
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
 const library = getLibrary('config')
+const configAgentPrompt = [
+  'Set up TanStack Config for a TypeScript package.',
+  'Use the opinionated ESLint, Vite package build, CI/CD, package structure, and publish defaults while keeping project-specific configuration minimal and explicit.',
+  'Show how the package should produce publint-friendly output, Changesets-backed releases, and repeatable local/CI workflows.',
+].join(' ')
+
+const heroProof = [
+  {
+    label: 'Build',
+    value: 'Vite-powered package output',
+  },
+  {
+    label: 'Validate',
+    value: 'ESLint, tests, package checks',
+  },
+  {
+    label: 'Release',
+    value: 'Changesets, npm + GitHub',
+  },
+]
+
+const releaseRows = [
+  ['typecheck', 'passed'],
+  ['lint', 'passed'],
+  ['package exports', 'verified'],
+  ['changesets', 'ready'],
+  ['npm publish', 'ready'],
+]
+
+const featureCards = [
+  {
+    title: 'Opinionated where packages are repetitive.',
+    body: 'Linting, package builds, CI tasks, publishing, and release hygiene should not become bespoke work in every package repo.',
+    icon: <ClipboardCheck size={18} />,
+  },
+  {
+    title: 'Vite ecosystem without a hand-built pipeline.',
+    body: 'Use modern build primitives and package output conventions without rebuilding the same config stack for every library.',
+    icon: <TerminalSquare size={18} />,
+  },
+  {
+    title: 'Publishing rules stay visible.',
+    body: 'Exports, package metadata, release branches, and npm publish behavior can be reviewed as part of the same workflow.',
+    icon: <PackageCheck size={18} />,
+  },
+  {
+    title: 'Minimal config, consistent results.',
+    body: 'The point is not zero configuration forever. It is a small surface where deviations are intentional and easy to audit.',
+    icon: <ShieldCheck size={18} />,
+  },
+]
+
+const pipelineSteps = [
+  {
+    label: 'Author',
+    body: 'Write library code while package defaults handle the routine surrounding work.',
+  },
+  {
+    label: 'Build',
+    body: 'Generate package output with consistent module, types, and export expectations.',
+  },
+  {
+    label: 'Verify',
+    body: 'Run type, lint, test, package, and publication checks before release.',
+  },
+  {
+    label: 'Publish',
+    body: 'Version, tag, and publish through a repeatable release path.',
+  },
+]
+
+const auditSignals = [
+  {
+    label: 'exports',
+    value: './dist/index.js + types',
+  },
+  {
+    label: 'publint',
+    value: 'package shape checked',
+  },
+  {
+    label: 'changesets',
+    value: 'versioning ready',
+  },
+  {
+    label: 'release',
+    value: 'npm + GitHub ready',
+  },
+]
 
 export default function ConfigLanding() {
+  const { version } = useParams({ strict: false })
+  const resolvedVersion = version ?? library.latestVersion
+
   return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={configProject}
-        actions={
-          <Button
-            as="a"
-            href={`/config/latest/docs`}
-            className="bg-gray-500 border-gray-500 hover:bg-gray-600 text-white"
-          >
-            Get Started
-          </Button>
-        }
-      />
+    <div className="w-full min-w-0 overflow-x-hidden bg-zinc-100 text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-black">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<FileCheck2 size={14} />}>
+              Package maintenance tooling
+            </SectionKicker>
 
-      <LibraryStatsSection library={library} />
+            <h1 className="mt-4 text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+              <LibraryWordmark library={library} />
+            </h1>
 
-      <LibraryFeatureHighlights
-        featureHighlights={configProject.featureHighlights}
-      />
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              Make package publishing boring in the best way.
+            </p>
 
-      <div className="px-4 sm:px-6 lg:px-8 mx-auto container">
-        <div className="pb-8">
-          <h3 className="text-3xl font-bold">Hassle-Free Setup</h3>
-          <p className="mt-4 text-xl max-w-3xl leading-7 opacity-60">
-            Incorporate TanStack Config into your development toolkit and
-            experience a new level of efficiency, speed, and customization in
-            building and releasing high-quality JavaScript packages.
-          </p>
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Config is the opinionated toolchain TanStack uses to keep
+              JavaScript packages linted, built, tested in CI, versioned with
+              Changesets, and published with minimal per-package ceremony.
+            </p>
+
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
+
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <ConfigLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={configAgentPrompt}
+                label="Copy Config Prompt"
+              />
+            </div>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+          </div>
+
+          <ReleasePanel />
         </div>
-        <div className="grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-4 w-max mx-auto">
-          {[
-            'Vite ecosystem',
-            'Opinionated defaults',
-            'Publint-compliant',
-            'Minimal configuration',
-            'Package versioning',
-            'Automated changelogs',
-          ].map((d, i) => (
-            <span key={i} className="flex items-center gap-2">
-              <CheckCircleIcon className="text-green-500" /> {d}
-            </span>
-          ))}
+      </section>
+
+      <section className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Sparkles size={14} />}>
+              Why Config
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Package quality is mostly repetitive work.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Every library needs the same boring promises: exports resolve,
+              types ship, tests pass, release branches are configured, and npm
+              publishes what consumers expect. Config turns that repetition into
+              shared defaults.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
         </div>
-      </div>
+      </section>
 
-      <MaintainersSection libraryId="config" />
-      <PartnersSection libraryId="config" />
-      <LazySponsorSection />
-      <LandingPageGad />
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <PipelinePanel />
+          <div>
+            <SectionKicker icon={<GitBranch size={14} />}>
+              Release pipeline
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Local and CI should agree about what shipping means.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Config gives package repos a shared path from source code to
+              published artifact, so maintainers spend less time debugging the
+              release machinery itself.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.82fr_1.18fr] lg:items-start xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<ScanLine size={14} />}>
+              Package audit
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              The artifact matters as much as the source.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The consumer sees your package boundary: exports, module formats,
+              types, metadata, release branch, and version. Config keeps that
+              boundary part of the workflow.
+            </p>
+          </div>
+
+          <AuditPanel />
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<Boxes size={14} />}>
+              Maintainer ergonomics
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Defaults for the parts nobody wants to rediscover.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Use Config when the repo should feel like a TanStack package:
+              predictable scripts, modern build output, release automation, and
+              a small escape hatch when the package needs something special.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Config exists because maintaining packages is real work.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, examples, partners, and GitHub sponsors help keep the
+              boring parts of package publishing reliable for the libraries
+              built on top.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="config" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
 
+      <LandingPageGad />
       <BottomCTA
         linkProps={{
           to: '/$libraryId/$version/docs',
-          params: { libraryId: library.id },
+          params: { libraryId: library.id, version: resolvedVersion },
         }}
         label="Get Started!"
-        className="bg-gray-500 border-gray-500 hover:bg-gray-600 text-white"
+        className="border-zinc-950 bg-zinc-950 text-white hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200"
       />
       <Footer />
-    </LibraryPageContainer>
+    </div>
+  )
+}
+
+function ReleasePanel() {
+  const [completedRows, setCompletedRows] = React.useState(
+    () => new Set(releaseRows.map(([label]) => label)),
+  )
+  const completedCount = completedRows.size
+  const toggleRow = (label: string) => {
+    setCompletedRows((current) => {
+      const next = new Set(current)
+
+      if (next.has(label)) {
+        next.delete(label)
+      } else {
+        next.add(label)
+      }
+
+      return next
+    })
+  }
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-zinc-300 bg-white p-4 shadow-sm shadow-zinc-950/5 dark:border-zinc-800 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          release checklist
+        </span>
+      </div>
+
+      <div className="mt-4 rounded-lg bg-zinc-950 p-4 text-sm text-zinc-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          vite build &amp;&amp; publint --strict
+          <br />
+          nx affected
+          <br />
+          changesets {completedCount}/{releaseRows.length}
+          <br />
+          publish config: branchConfigs, packages, npm, github{' '}
+          {completedCount === releaseRows.length ? '--ready' : '--blocked'}
+        </p>
+      </div>
+
+      <div className="mt-4 space-y-2">
+        {releaseRows.map(([label, state]) => (
+          <button
+            key={label}
+            aria-pressed={completedRows.has(label)}
+            className="flex w-full items-center justify-between gap-3 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-left transition-colors hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900"
+            type="button"
+            onClick={() => toggleRow(label)}
+          >
+            <span className="font-bold">{label}</span>
+            <span
+              className={
+                completedRows.has(label)
+                  ? 'rounded-md bg-emerald-100 px-2 py-1 text-[0.65rem] font-black uppercase text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200'
+                  : 'rounded-md bg-amber-100 px-2 py-1 text-[0.65rem] font-black uppercase text-amber-800 dark:bg-amber-950 dark:text-amber-200'
+              }
+            >
+              {completedRows.has(label) ? state : 'pending'}
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function PipelinePanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {pipelineSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-zinc-950 text-sm font-black text-white dark:bg-white dark:text-zinc-950">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function AuditPanel() {
+  return (
+    <div className="min-w-0 rounded-lg border border-zinc-300 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
+      <div className="grid gap-3 md:grid-cols-2">
+        {auditSignals.map((signal) => (
+          <div
+            key={signal.label}
+            className="rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <p className="text-[0.65rem] font-black uppercase text-zinc-500 dark:text-zinc-400">
+              {signal.label}
+            </p>
+            <p className="mt-2 text-sm font-bold leading-6 text-zinc-950 dark:text-white">
+              {signal.value}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 rounded-lg bg-zinc-950 p-4 text-sm text-zinc-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          package.json exports
+          <br />
+          dist/index.js
+          <br />
+          dist/index.d.ts
+          <br />
+          .changeset/*.md
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-zinc-950 text-white dark:bg-white dark:text-zinc-950">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-zinc-700 dark:text-zinc-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-zinc-950 pl-3 dark:border-white">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function ConfigLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
   )
 }
diff --git a/src/components/landing/DbLanding.tsx b/src/components/landing/DbLanding.tsx
index 5e25a5e24..2b39437c0 100644
--- a/src/components/landing/DbLanding.tsx
+++ b/src/components/landing/DbLanding.tsx
@@ -1,93 +1,671 @@
-import { Footer } from '~/components/Footer'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
-import { PartnersSection } from '~/components/PartnersSection'
-import { MaintainersSection } from '~/components/MaintainersSection'
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  BookOpen,
+  DatabaseZap,
+  GalleryVerticalEnd,
+  GitBranch,
+  Layers,
+  Network,
+  PlugZap,
+  RefreshCcw,
+  Sparkles,
+  Split,
+  Zap,
+} from 'lucide-react'
+
 import { BottomCTA } from '~/components/BottomCTA'
-import { dbProject } from '~/libraries/db'
-import { LibraryHero } from '~/components/LibraryHero'
-import { getLibrary } from '~/libraries'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
 import LandingPageGad from '~/components/LandingPageGad'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { LibraryStatsSection } from '~/components/LibraryStatsSection'
+import { getLibrary } from '~/libraries'
 
+import { LandingEcosystemProof } from '~/components/landing/LandingEcosystemProof'
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
 const library = getLibrary('db')
+const dbAgentPrompt = [
+  'Build a TanStack DB data layer for a TypeScript app.',
+  'Model API data as typed collections, query across collections with live queries, use optimistic mutations for local writes, and keep derived UI reactive through the DB query engine.',
+  'Show how TanStack DB can start with an existing API or TanStack Query workflow, then add query-driven sync, incremental joins, and optional persistence when the product needs it.',
+].join(' ')
+
+const heroProof = [
+  {
+    label: 'Collections',
+    value: 'typed sets of synced API data',
+  },
+  {
+    label: 'Live queries',
+    value: 'joins, filters, aggregates, reactivity',
+  },
+  {
+    label: 'Local writes',
+    value: 'optimistic transactions and rollback',
+  },
+]
+
+type DbTodoStatus = 'done' | 'open'
+
+type DbTodo = {
+  id: string
+  optimistic?: boolean
+  owner: string
+  status: DbTodoStatus
+  title: string
+}
+
+const dbInitialTodos: Array<DbTodo> = [
+  {
+    id: 'todo-1',
+    owner: 'Tanner',
+    status: 'open',
+    title: 'Ship invite flow',
+  },
+  {
+    id: 'todo-2',
+    owner: 'Noah',
+    status: 'open',
+    title: 'Review pricing copy',
+  },
+  {
+    id: 'todo-3',
+    owner: 'David',
+    status: 'done',
+    title: 'Wire product analytics',
+  },
+]
+
+const dbNewTodoTitles = [
+  'Follow up with design partner',
+  'Triage sync edge case',
+  'Publish roadmap note',
+]
+
+const featureCards = [
+  {
+    title: 'Collections make API data queryable.',
+    body: 'Load, sync, or persist typed records into collections, then query the data your UI actually needs instead of spreading derived state through components.',
+    icon: <GalleryVerticalEnd size={18} />,
+  },
+  {
+    title: 'Live queries update the result, not the whole app.',
+    body: 'DB uses differential dataflow to recompute only the changed parts of joins, filters, and aggregates, so large local graphs still feel instant.',
+    icon: <Zap size={18} />,
+  },
+  {
+    title: 'Local writes are first-class.',
+    body: 'Optimistic mutations can stage transactions across collections, update the UI immediately, then commit or rollback with lifecycle support.',
+    icon: <RefreshCcw size={18} />,
+  },
+  {
+    title: 'Sync strategy can evolve with the product.',
+    body: 'Start with REST, GraphQL, tRPC, TanStack Query, Electric, PowerSync, Trailbase, or your own collection creator without changing how components query.',
+    icon: <PlugZap size={18} />,
+  },
+]
+
+const pipelineSteps = [
+  {
+    label: 'Collect',
+    body: 'API records enter typed collections from sync engines, query functions, persistence, or custom loaders.',
+  },
+  {
+    label: 'Query',
+    body: 'The UI declares the live query shape: filters, joins, includes, aggregates, ordering, and limits.',
+  },
+  {
+    label: 'Increment',
+    body: 'When data changes, DB updates only the affected query results instead of recomputing the full graph.',
+  },
+  {
+    label: 'Render',
+    body: 'Framework adapters subscribe components to the result so the view stays current without manual cache wiring.',
+  },
+]
+
+const queryDrivenSync = [
+  {
+    label: 'predicate',
+    value: 'where issue.projectId = route.params.id',
+  },
+  {
+    label: 'subset',
+    value: 'load only the records this live query can see',
+  },
+  {
+    label: 'dedupe',
+    value: 'shared requirements collapse into fewer network calls',
+  },
+  {
+    label: 'fallback',
+    value: 'fetch broad, filter client-side, optimize later',
+  },
+]
+
+const frameworkAdapters = ['React', 'Vue', 'Solid', 'Svelte', 'Vanilla']
 
 export default function DbLanding() {
+  const { version } = useParams({ strict: false })
+  const resolvedVersion = version ?? library.latestVersion
+
   return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={dbProject}
-        cta={{
-          linkProps: {
-            from: '/$libraryId/$version',
-            to: './docs',
-            params: { libraryId: library.id },
-          },
-          label: 'Get Started',
-          className:
-            'bg-orange-500 border-orange-500 hover:bg-orange-600 text-white',
-        }}
-      />
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#fff7ed] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-orange-950/10 bg-[#fff1e4] dark:border-orange-300/10 dark:bg-[#160a03]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<DatabaseZap size={14} />}>
+              Reactive client store
+            </SectionKicker>
 
-      <LibraryStatsSection library={library} />
+            <div className="mt-4 flex flex-wrap items-start gap-x-3 gap-y-2">
+              <h1 className="text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+                <LibraryWordmark library={library} />
+              </h1>
+              {library.badge ? (
+                <span className="rounded-md bg-zinc-950 px-2 py-1 text-xs font-black uppercase text-white dark:bg-white dark:text-zinc-950">
+                  {library.badge}
+                </span>
+              ) : null}
+            </div>
 
-      <LibraryFeatureHighlights
-        featureHighlights={dbProject.featureHighlights}
-      />
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              Query your API data like local reactive state.
+            </p>
 
-      <div className="px-4 sm:px-6 lg:px-8 mx-auto">
-        <div className="pb-8">
-          <h3 className="text-3xl font-bold">Blazing fast apps</h3>
-          <p className="mt-6 text-xl leading-7 opacity-75 max-w-[90vw] sm:max-w-[500px] lg:max-w-[800px]">
-            Built on a{' '}
-            <a
-              href="https://github.com/electric-sql/d2ts"
-              className="text-orange-400"
-            >
-              Typescript implementation of differential dataflow
-            </a>
-            , TanStack DB gives you real-time sync, live queries and local
-            writes. With no stale data, super fast re-rendering and
-            sub-millisecond cross-collection queries, even for large complex
-            apps.
-          </p>
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              DB turns synced API data into typed collections, then runs live
+              queries over them so joins, filters, optimistic writes, and
+              derived UI stay fast and consistent without hand-built client
+              state.
+            </p>
+
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
+
+            <p className="mt-4 max-w-xl border-l-2 border-orange-500 pl-3 text-sm font-black text-orange-900 dark:text-orange-200">
+              The first brownfield, backend-agnostic sync engine for frontend
+              apps.
+            </p>
+
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <DbLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={dbAgentPrompt}
+                label="Copy DB Prompt"
+              />
+            </div>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+            <LandingEcosystemProof />
+          </div>
+
+          <DbWorkbenchPanel />
         </div>
-        <div className="grid grid-flow-row grid-cols-1 sm:grid-cols-2 gap-x-4 sm:gap-x-10 lg:gap-x-12 gap-y-4 mx-auto max-w-[90vw] sm:max-w-[500px] lg:max-w-[650px]">
+      </section>
+
+      <section className="border-b border-orange-950/10 bg-[#fff8f0] dark:border-orange-300/10 dark:bg-[#1b0d05]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
           <div>
-            <h4 className="text-xl my-2">Blazing fast query engine</h4>
-            <p>For sub-millisecond live queries.</p>
+            <SectionKicker icon={<Sparkles size={14} />}>Why DB</SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Server state gets awkward when the UI needs a data graph.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Query is excellent for fetching and caching resources. DB adds the
+              reactive relational layer that product apps eventually need: local
+              collections, cross-collection queries, optimistic transactions,
+              and incremental updates.
+            </p>
           </div>
-          <div>
-            <h4 className="text-xl my-2">Instant local writes</h4>
-            <p>With sync and lifecycle support.</p>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
           </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <PipelinePanel />
           <div>
-            <h4 className="text-xl my-2">Fine-grained reactivity</h4>
-            <p>To minimize component re-rendering.</p>
+            <SectionKicker icon={<GitBranch size={14} />}>
+              Differential dataflow
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              The view is a query over collections.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              DB keeps normalized collections in memory, then updates live query
+              results incrementally as records change. The UI describes the data
+              shape; DB keeps it current.
+            </p>
           </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.82fr_1.18fr] lg:items-start xl:max-w-[92rem]">
           <div>
-            <h4 className="text-xl my-2">Normalized data</h4>
-            <p>To keep your backend simple and fast.</p>
+            <SectionKicker icon={<Network size={14} />}>
+              Query-driven sync
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Let the component query become the loading contract.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              When sync mode is on demand, DB can pass query predicates,
+              ordering, and limits to your loader. Map that shape to an API
+              precisely, or start broad and let DB filter locally while your API
+              catches up.
+            </p>
           </div>
+
+          <SyncPanel />
         </div>
-      </div>
+      </section>
 
-      <MaintainersSection libraryId="db" />
-      <PartnersSection libraryId="db" />
-      <LazySponsorSection />
-      <LandingPageGad />
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<Layers size={14} />}>
+              Framework adapters
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              A data model below your renderer.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Use the adapter that fits your app while keeping collections, live
+              queries, transactions, and sync strategy in the same DB model.
+            </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              {frameworkAdapters.map((framework) => (
+                <span
+                  key={framework}
+                  className="rounded-md border border-orange-200 bg-orange-50 px-3 py-1.5 text-sm font-bold text-orange-800 dark:border-orange-900 dark:bg-orange-950/40 dark:text-orange-200"
+                >
+                  {framework}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
 
+      <section className="border-b border-zinc-200 bg-[#fff7ed] py-12 dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<Split size={14} />}>
+              Product shape
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Use DB when a cache starts wanting to be a database.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              It is built for apps with real relationships, local writes, subset
+              loading, sync engines, persistence, and UI-shaped derived data.
+              Keep Query for request orchestration; bring in DB when the client
+              needs a reactive data graph.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              DB is being shaped with teams building data-heavy products.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, examples, sync integrations, partners, and GitHub
+              sponsors keep the reactive data layer close to production app
+              problems.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="db" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
+
+      <LandingPageGad />
       <BottomCTA
         linkProps={{
-          from: '/$libraryId/$version',
-          to: './docs',
-          params: { libraryId: library.id },
+          to: '/$libraryId/$version/docs',
+          params: { libraryId: library.id, version: resolvedVersion },
         }}
         label="Get Started!"
-        className="bg-orange-500 border-orange-500 hover:bg-orange-600 text-white"
+        className="border-orange-500 bg-orange-500 text-white hover:bg-orange-600"
       />
       <Footer />
-    </LibraryPageContainer>
+    </div>
+  )
+}
+
+function DbWorkbenchPanel() {
+  const [todos, setTodos] = React.useState(dbInitialTodos)
+  const [nextTodoIndex, setNextTodoIndex] = React.useState(0)
+  const [lastAction, setLastAction] = React.useState('live query: open todos')
+  const openTodos = todos.filter((todo) => todo.status === 'open')
+  const optimisticCount = todos.filter((todo) => todo.optimistic).length
+  const insertTodo = () => {
+    const title =
+      dbNewTodoTitles[nextTodoIndex % dbNewTodoTitles.length] ??
+      'New synced task'
+
+    setTodos((currentTodos) => [
+      {
+        id: `todo-local-${nextTodoIndex}`,
+        optimistic: true,
+        owner: 'You',
+        status: 'open',
+        title,
+      },
+      ...currentTodos,
+    ])
+    setNextTodoIndex((current) => current + 1)
+    setLastAction('todoCollection.insert()')
+  }
+  const completeFirstOpenTodo = () => {
+    const firstOpenTodo = openTodos[0]
+
+    if (!firstOpenTodo) {
+      return
+    }
+
+    setTodos((currentTodos) =>
+      currentTodos.map((todo) =>
+        todo.id === firstOpenTodo.id
+          ? { ...todo, optimistic: true, status: 'done' }
+          : todo,
+      ),
+    )
+    setLastAction('todoCollection.update()')
+  }
+  const confirmServerSync = () => {
+    setTodos((currentTodos) =>
+      currentTodos.map((todo) => ({ ...todo, optimistic: false })),
+    )
+    setLastAction('server transaction confirmed')
+  }
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-orange-200 bg-white p-4 shadow-sm shadow-orange-950/5 dark:border-orange-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          todo collection
+        </span>
+      </div>
+
+      <div className="mt-4 grid gap-3 lg:grid-cols-[0.74fr_1.26fr]">
+        <div className="space-y-3">
+          {[
+            ['collection', `${todos.length} todos`],
+            ['live query', `${openTodos.length} open`],
+            ['optimistic', `${optimisticCount} pending`],
+          ].map(([label, value]) => (
+            <div
+              key={label}
+              className="rounded-lg border border-zinc-200 bg-orange-50 p-3 dark:border-zinc-800 dark:bg-orange-950/20"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <p className="font-mono text-sm font-black">{label}</p>
+                  <p className="mt-1 text-xs font-bold text-zinc-500 dark:text-zinc-400">
+                    todosCollection
+                  </p>
+                </div>
+                <span className="rounded-md bg-orange-100 px-2 py-1 text-[0.65rem] font-black uppercase text-orange-800 dark:bg-orange-950 dark:text-orange-200">
+                  {value}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="min-w-0 rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-900">
+          <div className="flex items-center justify-between gap-3">
+            <span className="font-mono text-sm font-black">
+              useLiveQuery(openTodos)
+            </span>
+            <span className="rounded-md bg-orange-100 px-2 py-1 text-[0.65rem] font-black uppercase text-orange-800 dark:bg-orange-950 dark:text-orange-200">
+              {lastAction}
+            </span>
+          </div>
+
+          <div className="mt-3 flex flex-wrap gap-2">
+            <button
+              className="rounded-md border border-orange-200 bg-white px-3 py-2 text-xs font-black text-orange-800 transition-colors hover:border-orange-400 dark:border-orange-900 dark:bg-zinc-950 dark:text-orange-200"
+              type="button"
+              onClick={insertTodo}
+            >
+              Insert todo
+            </button>
+            <button
+              className="rounded-md border border-zinc-200 bg-white px-3 py-2 text-xs font-black text-zinc-700 transition-colors hover:border-orange-300 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300"
+              type="button"
+              onClick={completeFirstOpenTodo}
+            >
+              Complete first
+            </button>
+            <button
+              className="rounded-md border border-zinc-200 bg-white px-3 py-2 text-xs font-black text-zinc-700 transition-colors hover:border-orange-300 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300"
+              type="button"
+              onClick={confirmServerSync}
+            >
+              Server confirms
+            </button>
+            <span className="rounded-md bg-orange-50 px-3 py-2 text-xs font-black uppercase text-orange-900 dark:bg-orange-950/25 dark:text-orange-100">
+              {optimisticCount > 0 ? 'optimistic' : 'synced'}
+            </span>
+          </div>
+
+          <div className="mt-4 overflow-hidden rounded-lg border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+            <div className="grid grid-cols-[1.4fr_0.75fr_0.7fr] border-b border-zinc-200 bg-orange-50 text-[0.65rem] font-black uppercase text-orange-900 dark:border-zinc-800 dark:bg-orange-950/30 dark:text-orange-100">
+              {['Open todo', 'Owner', 'State'].map((header) => (
+                <div key={header} className="px-3 py-2">
+                  {header}
+                </div>
+              ))}
+            </div>
+            {openTodos.map((todo) => (
+              <div
+                key={todo.id}
+                className="grid grid-cols-[1.4fr_0.75fr_0.7fr] border-b border-zinc-100 text-sm last:border-b-0 dark:border-zinc-800"
+              >
+                <div className="min-w-0 px-3 py-3">
+                  <span className="block truncate font-bold">{todo.title}</span>
+                </div>
+                <div className="min-w-0 px-3 py-3">
+                  <span className="block truncate font-bold">{todo.owner}</span>
+                </div>
+                <div className="min-w-0 px-3 py-3">
+                  <span className="block truncate font-bold">
+                    {todo.optimistic ? 'pending' : 'synced'}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-4 rounded-lg bg-orange-50 p-3 text-sm leading-6 text-orange-950 dark:bg-orange-950/25 dark:text-orange-100">
+            Insert or complete a todo. The collection changes first, then the
+            live query result updates immediately while the server catches up.
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function PipelinePanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {pipelineSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-[#fff7ed] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-orange-100 text-sm font-black text-orange-800 dark:bg-orange-950 dark:text-orange-200">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function SyncPanel() {
+  return (
+    <div className="min-w-0 rounded-lg border border-orange-200 bg-white p-4 dark:border-orange-900 dark:bg-zinc-950">
+      <div className="rounded-lg bg-zinc-950 p-4 text-sm text-orange-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          useLiveQuery((q) =&gt;
+          <br />
+          &nbsp;&nbsp;q.from({'{'} issue: issuesCollection {'}'})
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;.join({'{'} project: projectsCollection {'}'},
+          ({`{`} issue, project {`}`}) =&gt;
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eq(issue.projectId, project.id))
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;.orderBy(({`{`} issue {`}`}) =&gt;
+          issue.updatedAt, &quot;desc&quot;))
+        </p>
+      </div>
+
+      <div className="mt-4 grid gap-3 md:grid-cols-2">
+        {queryDrivenSync.map((item) => (
+          <div
+            key={item.label}
+            className="rounded-lg border border-zinc-200 bg-[#fff8f0] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <p className="text-[0.65rem] font-black uppercase text-zinc-500 dark:text-zinc-400">
+              {item.label}
+            </p>
+            <p className="mt-2 text-sm font-bold leading-6 text-zinc-950 dark:text-white">
+              {item.value}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-orange-100 text-orange-800 dark:bg-orange-950 dark:text-orange-200">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-orange-700 dark:text-orange-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-orange-500 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function DbLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
   )
 }
diff --git a/src/components/landing/DevtoolsLanding.tsx b/src/components/landing/DevtoolsLanding.tsx
index eb1c19044..e5d612503 100644
--- a/src/components/landing/DevtoolsLanding.tsx
+++ b/src/components/landing/DevtoolsLanding.tsx
@@ -1,85 +1,556 @@
-import { Footer } from '~/components/Footer'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  BookOpen,
+  Dock,
+  Eye,
+  Gauge,
+  Layers,
+  PanelRight,
+  Plug,
+  Puzzle,
+  ScanSearch,
+  Sparkles,
+  Workflow,
+} from 'lucide-react'
+
 import { BottomCTA } from '~/components/BottomCTA'
-import { LibraryHero } from '~/components/LibraryHero'
-import { devtoolsProject } from '~/libraries/devtools'
-import { getLibrary } from '~/libraries'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
 import LandingPageGad from '~/components/LandingPageGad'
-import { PartnersSection } from '~/components/PartnersSection'
-import { MaintainersSection } from '~/components/MaintainersSection'
-import { CheckCircleIcon } from '~/components/icons/CheckCircleIcon'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { LibraryStatsSection } from '~/components/LibraryStatsSection'
+import { getLibrary } from '~/libraries'
 
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
 const library = getLibrary('devtools')
+const devtoolsAgentPrompt = [
+  'Add TanStack Devtools to a TypeScript app.',
+  'Use the unified devtools shell to host TanStack panels and any custom product devtools, keeping the panel lightweight, framework-friendly, and available during development without coupling product code to one library-specific inspector.',
+  'Include examples for mounting built-in panels and product-specific panels through the plugins array.',
+].join(' ')
+
+const heroProof = [
+  {
+    label: 'One shell',
+    value: 'Query, Router, custom panels',
+  },
+  {
+    label: 'Bring panels',
+    value: 'library devtools or product-specific tools',
+  },
+  {
+    label: 'Framework friendly',
+    value: 'React, Vue, Solid, Preact, Angular',
+  },
+]
+
+const panels = [
+  {
+    title: 'Query',
+    body: 'cache, observers, mutations, stale state',
+  },
+  {
+    title: 'Router',
+    body: 'matches, loaders, params, pending state',
+  },
+  {
+    title: 'Custom',
+    body: 'feature flags, jobs, queues, product state',
+  },
+]
+
+const featureCards = [
+  {
+    title: 'A shared place for runtime truth.',
+    body: 'TanStack apps already have rich runtime state. Devtools gives that state a consistent panel instead of scattering inspectors across the UI.',
+    icon: <ScanSearch size={18} />,
+  },
+  {
+    title: 'Custom panels belong next to library panels.',
+    body: 'Register product-specific devtools beside Query and Router so teams can inspect the state that matters for their own workflow.',
+    icon: <Puzzle size={18} />,
+  },
+  {
+    title: 'The shell stays light.',
+    body: 'The devtools UI is built to be mounted in development without turning each TanStack package into its own windowing system.',
+    icon: <Gauge size={18} />,
+  },
+  {
+    title: 'Frameworks get adapters, not rewrites.',
+    body: 'Use the shell from React, Vue, Solid, Preact, Angular, or vanilla integration points while panels keep their own internal state model.',
+    icon: <Layers size={18} />,
+  },
+]
+
+const panelLifecycle = [
+  {
+    label: 'Mount',
+    body: 'Add the devtools shell once near the app root.',
+  },
+  {
+    label: 'Register',
+    body: 'Provide TanStack panels or custom panels through the plugins array.',
+  },
+  {
+    label: 'Inspect',
+    body: 'Read cache, route, queue, feature, or product state while the app is live.',
+  },
+  {
+    label: 'Share',
+    body: 'Keep product-specific debugging tools in the same workflow as the core libraries.',
+  },
+]
+
+const frameworkAdapters = [
+  'React',
+  'Vue',
+  'Solid',
+  'Preact',
+  'Angular',
+  'Vanilla',
+]
 
 export default function DevtoolsLanding() {
+  const { version } = useParams({ strict: false })
+  const resolvedVersion = version ?? library.latestVersion
+
   return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={devtoolsProject}
-        cta={{
-          linkProps: {
-            from: '/$libraryId/$version',
-            to: './docs',
-            params: { libraryId: library.id },
-          },
-          label: 'Get Started',
-          className:
-            'bg-slate-500 border-slate-500 hover:bg-slate-600 text-white',
-        }}
-      />
+    <div className="w-full min-w-0 overflow-x-hidden bg-zinc-100 text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-black">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<Dock size={14} />}>
+              Unified devtools shell
+            </SectionKicker>
 
-      <LibraryStatsSection library={library} />
+            <div className="mt-4 flex flex-wrap items-start gap-x-3 gap-y-2">
+              <h1 className="text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+                <LibraryWordmark library={library} />
+              </h1>
+              {library.badge ? (
+                <span className="rounded-md bg-zinc-950 px-2 py-1 text-xs font-black uppercase text-white dark:bg-white dark:text-zinc-950">
+                  {library.badge}
+                </span>
+              ) : null}
+            </div>
 
-      <LibraryFeatureHighlights
-        featureHighlights={devtoolsProject.featureHighlights}
-      />
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              One panel for the state your app is built on.
+            </p>
 
-      <div className="px-4 sm:px-6 lg:px-8 mx-auto container">
-        <div className="pb-8">
-          <h3 className="text-3xl font-bold">Unified Development Experience</h3>
-          <p className="mt-4 text-xl max-w-3xl leading-7 opacity-60">
-            TanStack Devtools brings together all your development tools in one
-            place, making debugging and development more efficient than ever
-            before.
-          </p>
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Devtools brings TanStack inspectors and your own custom panels
+              into one development surface, so the cache, routes, mutations,
+              queues, flags, and product-specific state can be explored while
+              the app is running.
+            </p>
+
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
+
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <DevtoolsLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={devtoolsAgentPrompt}
+                label="Copy Devtools Prompt"
+              />
+            </div>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+          </div>
+
+          <DevtoolsPanel />
         </div>
-        <div className="grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-4 w-max mx-auto">
-          {[
-            'Centralized Panel',
-            'Framework Agnostic',
-            'Custom Devtools',
-            'Lightweight',
-            'Solid.js Powered',
-            'Extensible API',
-            'Type Safe',
-            'Plugin System',
-            'Real-time Updates',
-          ].map((d, i) => (
-            <span key={i} className="flex items-center gap-2">
-              <CheckCircleIcon className="text-green-500" /> {d}
-            </span>
-          ))}
+      </section>
+
+      <section className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Sparkles size={14} />}>
+              Why Devtools
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Every serious app grows its own debugging surface.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Instead of inventing floating panels per library or hiding debug
+              screens behind product routes, Devtools gives teams a shared shell
+              for runtime introspection.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
         </div>
-      </div>
+      </section>
 
-      <MaintainersSection libraryId="devtools" />
-      <PartnersSection libraryId="devtools" />
-      <LazySponsorSection />
-      <LandingPageGad />
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <LifecyclePanel />
+          <div>
+            <SectionKicker icon={<Workflow size={14} />}>
+              Panel workflow
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Mount the shell once. Let panels bring the detail.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Devtools should feel like infrastructure: present when you need
+              it, quiet when you do not, and flexible enough for the next
+              TanStack library or product-specific inspector.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.82fr_1.18fr] lg:items-start xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Plug size={14} />}>
+              Custom panels
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              The product can have devtools too.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Add panels for feature flags, sync jobs, queues, local storage,
+              generated clients, background tasks, or anything your team needs
+              to inspect without shipping another admin route.
+            </p>
+          </div>
+
+          <CustomPanelExample />
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<PanelRight size={14} />}>
+              Framework adapters
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              A shared shell across app runtimes.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Use Devtools where your app lives, then host panels that speak the
+              state model of each TanStack library or your product code.
+            </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              {frameworkAdapters.map((framework) => (
+                <span
+                  key={framework}
+                  className="rounded-md border border-zinc-300 bg-zinc-100 px-3 py-1.5 text-sm font-bold text-zinc-800 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200"
+                >
+                  {framework}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
 
+      <section className="border-b border-zinc-200 bg-zinc-100 py-12 dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<Eye size={14} />}>Field notes</SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              A good devtool makes invisible state negotiable.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The point is not another chrome wrapper. It is giving teams a
+              reliable place to see, question, and debug the runtime state their
+              app depends on.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Devtools connects the work happening across the stack.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, panel authors, examples, partners, and GitHub
+              sponsors keep the shell useful as TanStack libraries keep growing.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="devtools" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
+
+      <LandingPageGad />
       <BottomCTA
         linkProps={{
-          from: '/$libraryId/$version',
-          to: './docs',
-          params: { libraryId: library.id },
+          to: '/$libraryId/$version/docs',
+          params: { libraryId: library.id, version: resolvedVersion },
         }}
         label="Get Started!"
-        className="bg-slate-500 border-slate-500 hover:bg-slate-600 hover:border-slate-600 text-white"
+        className="border-zinc-950 bg-zinc-950 text-white hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200"
       />
       <Footer />
-    </LibraryPageContainer>
+    </div>
+  )
+}
+
+function DevtoolsPanel() {
+  const [activePanelIndex, setActivePanelIndex] = React.useState(0)
+  const activePanel = panels[activePanelIndex] ?? panels[0]
+  const panelStats =
+    activePanel.title === 'Query'
+      ? [
+          ['queries', '42'],
+          ['mutations', '3'],
+          ['stale', '8'],
+        ]
+      : activePanel.title === 'Router'
+        ? [
+            ['matches', '6'],
+            ['loaders', '4'],
+            ['pending', '1'],
+          ]
+        : [
+            ['jobs', '12'],
+            ['flags', '9'],
+            ['queues', '2'],
+          ]
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-zinc-300 bg-zinc-950 p-4 text-white shadow-sm shadow-zinc-950/10 dark:border-zinc-800">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-400">unified shell</span>
+      </div>
+
+      <div className="mt-4 grid gap-3 lg:grid-cols-[0.45fr_1fr]">
+        <div className="space-y-2">
+          {panels.map((panel, index) => (
+            <button
+              key={panel.title}
+              className={`w-full rounded-lg border px-3 py-2 text-left transition-colors ${
+                index === activePanelIndex
+                  ? 'border-white bg-white text-zinc-950'
+                  : 'border-zinc-800 bg-zinc-900 text-zinc-200 hover:border-zinc-600'
+              }`}
+              type="button"
+              onClick={() => setActivePanelIndex(index)}
+            >
+              <p className="text-sm font-black">{panel.title}</p>
+            </button>
+          ))}
+        </div>
+
+        <div className="rounded-lg border border-zinc-800 bg-black p-4">
+          <div className="grid gap-3 sm:grid-cols-3">
+            {panelStats.map(([label, value]) => (
+              <div key={label} className="rounded-lg bg-zinc-900 p-3">
+                <p className="text-[0.65rem] font-black uppercase text-zinc-500">
+                  {label}
+                </p>
+                <p className="mt-1 text-lg font-black">{value}</p>
+              </div>
+            ))}
+          </div>
+          <div className="mt-4 space-y-2">
+            {[
+              activePanel,
+              ...panels.filter((panel) => panel !== activePanel),
+            ].map((panel) => (
+              <div
+                key={panel.body}
+                className={
+                  panel === activePanel
+                    ? 'rounded-lg border border-white/30 bg-zinc-900 p-3'
+                    : 'rounded-lg border border-zinc-800 bg-zinc-950 p-3'
+                }
+              >
+                <p className="text-xs font-black uppercase text-zinc-500">
+                  {panel.title}
+                </p>
+                <p className="mt-1 text-sm text-zinc-300">{panel.body}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function LifecyclePanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {panelLifecycle.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-zinc-950 text-sm font-black text-white dark:bg-white dark:text-zinc-950">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function CustomPanelExample() {
+  return (
+    <div className="min-w-0 rounded-lg border border-zinc-300 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
+      <div className="rounded-lg bg-zinc-950 p-4 text-sm text-zinc-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          &lt;TanStackDevtools
+          <br />
+          &nbsp;&nbsp;plugins={'{'}[{'{'}
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;name: &quot;Background Jobs&quot;,
+          <br />
+          &nbsp;&nbsp;&nbsp;&nbsp;render: &lt;JobsPanel /&gt;,
+          <br />
+          &nbsp;&nbsp;{'}'}]{'}'}
+          <br />
+          /&gt;
+        </p>
+      </div>
+
+      <div className="mt-4 grid gap-3 md:grid-cols-2">
+        {[
+          ['feature flags', 'which flags are active and why'],
+          ['sync jobs', 'pending, failed, retrying, complete'],
+          ['queues', 'active tasks, concurrency, next flush'],
+          ['generated clients', 'requests, schemas, cache entries'],
+        ].map(([label, body]) => (
+          <div
+            key={label}
+            className="rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <p className="text-sm font-black">{label}</p>
+            <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+              {body}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-zinc-950 text-white dark:bg-white dark:text-zinc-950">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-zinc-700 dark:text-zinc-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-zinc-950 pl-3 dark:border-white">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function DevtoolsLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
   )
 }
diff --git a/src/components/landing/FormLanding.tsx b/src/components/landing/FormLanding.tsx
index bbe9dcca8..db4265610 100644
--- a/src/components/landing/FormLanding.tsx
+++ b/src/components/landing/FormLanding.tsx
@@ -1,216 +1,633 @@
-import { useParams } from '@tanstack/react-router'
-import { Footer } from '~/components/Footer'
-import { formProject } from '~/libraries/form'
-import { Framework, getBranch, getLibrary } from '~/libraries'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
-import { LibraryHero } from '~/components/LibraryHero'
-import { FeatureGrid } from '~/components/FeatureGrid'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  BadgeCheck,
+  BookOpen,
+  FileCheck2,
+  Fingerprint,
+  Keyboard,
+  ListChecks,
+  Loader2,
+  ShieldCheck,
+  SlidersHorizontal,
+  Split,
+  WandSparkles,
+} from 'lucide-react'
+
 import { BottomCTA } from '~/components/BottomCTA'
-import LandingPageGad from '~/components/LandingPageGad'
-import { PartnersSection } from '~/components/PartnersSection'
-import { MaintainersSection } from '~/components/MaintainersSection'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
 import { LibraryTestimonials } from '~/components/LibraryTestimonials'
-import { LibraryShowcases } from '~/components/ShowcaseSection'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { LibraryStatsSection } from '~/components/LibraryStatsSection'
-import { CodeExampleCard } from '~/components/CodeExampleCard'
-import { StackBlitzSection } from '~/components/StackBlitzSection'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
+import LandingPageGad from '~/components/LandingPageGad'
+import { getLibrary } from '~/libraries'
+import { formProject } from '~/libraries/form'
+import { LandingCodeExampleCard } from '~/components/landing/LandingCodeExampleCard'
+import { formCodeExample } from '~/components/landing/codeExamples'
 
+import { LandingEcosystemProof } from '~/components/landing/LandingEcosystemProof'
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
 const library = getLibrary('form')
+const formAgentPrompt = [
+  'Build a TanStack Form experience for a TypeScript app.',
+  'Use typed form and field APIs, validators, async validation with debouncing where useful, deeply nested object/array fields, and granular subscriptions so only relevant UI updates.',
+  'Keep the form headless and render accessible product-specific controls instead of generic form wrappers.',
+].join(' ')
 
-const codeExamples: Partial<Record<Framework, { lang: string; code: string }>> =
-  {
-    react: {
-      lang: 'tsx',
-      code: `import { useForm } from '@tanstack/react-form'
-
-const form = useForm({
-  defaultValues: { name: '' },
-  onSubmit: async ({ value }) => console.log(value),
-})
-// Bind inputs to form.state and form.handleSubmit`,
-    },
-    vue: {
-      lang: 'vue',
-      code: `<script setup lang="ts">
-import { useForm } from '@tanstack/vue-form'
-
-const form = useForm({
-  defaultValues: { name: '' },
-  onSubmit: async ({ value }) => console.log(value),
-})
-</script>
-
-<template>
-  <form @submit.prevent="form.handleSubmit">
-    <input v-model="form.state.values.name" />
-    <button type="submit">Submit</button>
-  </form>
-</template>`,
-    },
-    angular: {
-      lang: 'ts',
-      code: `import { Component } from '@angular/core'
-import { createAngularForm } from '@tanstack/angular-form'
-
-@Component({
-  standalone: true,
-  selector: 'app-form',
-  template: '<form (submit)="form.handleSubmit($event)"><input [value]="form.state().values.name" (input)="form.setFieldValue(\\"name\\", $any($event.target).value)" /><button type="submit">Submit</button></form>',
-})
-export class AppComponent {
-  form = createAngularForm(() => ({
-    defaultValues: { name: '' },
-    onSubmit: async ({ value }) => console.log(value),
-  }))
-}`,
-    },
-    solid: {
-      lang: 'tsx',
-      code: `import { createForm } from '@tanstack/solid-form'
-
-export default function SimpleForm() {
-  const form = createForm({
-    defaultValues: { name: '' },
-    onSubmit: async ({ value }) => console.log(value),
-  })
+const heroProof = [
+  {
+    label: 'Typed fields',
+    value: 'values, errors, validators, submit payloads',
+  },
+  {
+    label: 'Granular reactivity',
+    value: 'subscribe to exactly what the UI needs',
+  },
+  {
+    label: 'Headless controls',
+    value: 'bring your inputs, layouts, and design system',
+  },
+]
 
-  return (
-    <form onSubmit={form.handleSubmit}>
-      <input value={form.state.values.name} onInput={(e) => form.setFieldValue('name', e.currentTarget.value)} />
-      <button type="submit">Submit</button>
-    </form>
-  )
-}`,
-    },
-    svelte: {
-      lang: 'svelte',
-      code: `<script lang="ts">
-  import { createForm } from '@tanstack/svelte-form'
-  const form = createForm({
-    defaultValues: { name: '' },
-    onSubmit: async ({ value }) => console.log(value),
-  })
-</script>
-
-<form on:submit|preventDefault={form.handleSubmit}>
-  <input bind:value={form.state.values.name} />
-  <button type="submit">Submit</button>
-</form>`,
-    },
-    lit: {
-      lang: 'ts',
-      code: `import { LitElement, customElement, html } from 'lit'
-import { createLitForm } from '@tanstack/lit-form'
-
-@customElement('simple-form')
-export class SimpleForm extends LitElement {
-  form = createLitForm({
-    defaultValues: { name: '' },
-    onSubmit: async ({ value }) => console.log(value),
-  })
-
-  override render() {
-    return html\`<form @submit=\${(e: Event) => { e.preventDefault(); this.form.handleSubmit(e); }}>
-      <input .value=\${this.form.state.values.name} @input=\${(e: any) => this.form.setFieldValue('name', e.target.value)} />
-      <button type="submit">Submit</button>
-    </form>\`
-  }
-}`,
-    },
-  }
+type FormDemoField = {
+  detail: string
+  name: 'profile.email' | 'company.plan' | 'members[2].role'
+}
+
+type FormDemoPlan = 'team' | 'enterprise'
+
+const formFields: Array<FormDemoField> = [
+  {
+    name: 'profile.email',
+    detail: 'schema + async availability',
+  },
+  {
+    name: 'company.plan',
+    detail: 'recalculates billing preview',
+  },
+  {
+    name: 'members[2].role',
+    detail: 'debounced permission check',
+  },
+]
+
+const formPlanOptions: Array<FormDemoPlan> = ['team', 'enterprise']
+
+const validationSteps = [
+  {
+    label: 'Change',
+    body: 'Field state updates immediately and only subscribers that care re-render.',
+  },
+  {
+    label: 'Validate',
+    body: 'Sync validators run close to the field; async checks can debounce before they touch the network.',
+  },
+  {
+    label: 'Derive',
+    body: 'Errors, touched, dirty, canSubmit, and field metadata stay typed and inspectable.',
+  },
+  {
+    label: 'Submit',
+    body: 'Submit handlers receive the inferred value shape instead of hand-assembled payloads.',
+  },
+]
+
+const featureCards = [
+  {
+    title: 'TypeScript is part of the form model.',
+    body: 'Field names, values, validators, errors, and submit handlers stay connected, so refactors travel through the whole form instead of leaving string paths behind.',
+    icon: <Fingerprint size={18} />,
+  },
+  {
+    title: 'Headless composition keeps forms honest.',
+    body: 'Use components or hooks, but keep the real controls in your product UI. Labels, hints, validation states, layout, and accessibility remain yours.',
+    icon: <FileCheck2 size={18} />,
+  },
+  {
+    title: 'Subscriptions make big forms feel small.',
+    body: 'A checkout, onboarding wizard, or admin editor can subscribe to narrow field and form state instead of repainting the whole surface on every keystroke.',
+    icon: <Split size={18} />,
+  },
+  {
+    title: 'Async validation is built for users.',
+    body: 'Debounced async checks, validation events, and pending states let the form stay responsive while slow business rules happen in the background.',
+    icon: <Loader2 size={18} />,
+  },
+]
+
+const fieldStates = [
+  {
+    label: 'value',
+    value: 'form.state.values.profile.email',
+  },
+  {
+    label: 'error',
+    value: 'field.state.meta.errors',
+  },
+  {
+    label: 'pending',
+    value: 'form.state.isFieldsValidating',
+  },
+  {
+    label: 'submit',
+    value: 'form.handleSubmit()',
+  },
+]
+
+const frameworkAdapters = [
+  'React',
+  'Vue',
+  'Angular',
+  'Solid',
+  'Lit',
+  'Svelte',
+  'Preact',
+]
 
 export default function FormLanding() {
   const { version } = useParams({ strict: false })
-  const branch = getBranch(formProject, version)
+  const resolvedVersion = version ?? library.latestVersion
 
   return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={formProject}
-        cta={{
-          linkProps: {
-            to: '/$libraryId/$version/docs',
-            params: { libraryId: library.id, version },
-          },
-          label: 'Get Started',
-          className:
-            'bg-yellow-400 border-yellow-400 hover:bg-yellow-500 text-black',
-        }}
-      />
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#fffbeb] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-yellow-950/10 bg-[#fff7d6] dark:border-yellow-300/10 dark:bg-[#151005]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<ListChecks size={14} />}>
+              Headless form state
+            </SectionKicker>
 
-      <LibraryStatsSection library={library} />
+            <div className="mt-4 flex flex-wrap items-start gap-x-3 gap-y-2">
+              <h1 className="text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+                <LibraryWordmark library={library} />
+              </h1>
+              {library.badge ? (
+                <span className="rounded-md bg-zinc-950 px-2 py-1 text-xs font-black uppercase text-white dark:bg-white dark:text-zinc-950">
+                  {library.badge}
+                </span>
+              ) : null}
+            </div>
 
-      <LibraryFeatureHighlights
-        featureHighlights={formProject.featureHighlights}
-      />
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              Forms that stay typed after the first field.
+            </p>
 
-      <LibraryTestimonials testimonials={formProject.testimonials} />
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Form gives complex, interactive forms a headless state model:
+              typed fields, granular subscriptions, validation events, async
+              checks, nested values, and framework adapters without forcing a UI
+              wrapper onto your design system.
+            </p>
 
-      <CodeExampleCard
-        frameworks={formProject.frameworks}
-        codeByFramework={codeExamples}
-      />
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
 
-      <FeatureGrid
-        title="No dependencies. All the Features."
-        items={[
-          'Framework agnostic design',
-          'First Class TypeScript Support',
-          'Headless',
-          'Tiny / Zero Deps',
-          'Granularly Reactive Components/Hooks',
-          'Extensibility and plugin architecture',
-          'Modular architecture',
-          'Form/Field validation',
-          'Async Validation',
-          'Built-in Async Validation Debouncing',
-          'Configurable Validation Events',
-          'Deeply Nested Object/Array Fields',
-        ]}
-      />
+            <p className="mt-4 max-w-xl border-l-2 border-yellow-500 pl-3 text-sm font-black text-yellow-900 dark:text-yellow-200">
+              The most type-safe form library ever built for TypeScript apps.
+            </p>
 
-      <div className="flex flex-col gap-4">
-        <div className="px-4 sm:px-6 lg:px-8 mx-auto container max-w-3xl">
-          <h3 className="text-3xl font-bold">Less code, fewer edge cases.</h3>
-          <p className="my-4 text-xl leading-7 text-gray-600">
-            Instead of encouraging hasty abstractions and hook-focused APIs,
-            TanStack Form embraces composition where it counts by giving you
-            headless APIs via components (and hooks if you want them of course).
-            TanStack Form is designed to be used directly in your components and
-            UI. This means less code, fewer edge cases, and deeper control over
-            your UI. Try it out with one of the examples below!
-          </p>
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <FormLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={formAgentPrompt}
+                label="Copy Form Prompt"
+              />
+            </div>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+            <LandingEcosystemProof />
+          </div>
+
+          <FormStatePanel />
         </div>
-      </div>
+      </section>
 
-      <StackBlitzSection
-        project={formProject}
-        branch={branch}
-        examplePath="examples/${framework}/simple"
-        title={(framework) => `tanstack//${framework}-form: simple`}
-      />
+      <section className="border-b border-yellow-950/10 bg-[#fffbea] dark:border-yellow-300/10 dark:bg-[#181205]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<WandSparkles size={14} />}>
+              Why Form
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Most form complexity is invisible until it hurts.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The hard part is not rendering an input. It is keeping values,
+              validation, async checks, nested fields, submit state, and UI
+              feedback correct as the form grows. Form makes that state explicit
+              without making the markup generic.
+            </p>
+          </div>
 
-      <MaintainersSection libraryId="form" />
-      <PartnersSection libraryId="form" />
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
+        </div>
+      </section>
 
-      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
-        <LibraryShowcases libraryId="form" libraryName="TanStack Form" />
-      </div>
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <ValidationPipeline />
+          <div>
+            <SectionKicker icon={<ShieldCheck size={14} />}>
+              Validation lifecycle
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Validate at the speed of the user, not the framework.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Trigger validation on the events that matter, debounce expensive
+              checks, show pending states precisely, and keep inferred types all
+              the way to submit.
+            </p>
+          </div>
+        </div>
+      </section>
 
-      <LazySponsorSection />
-      <LandingPageGad />
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.82fr_1.18fr] lg:items-start xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<SlidersHorizontal size={14} />}>
+              Field subscriptions
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Subscribe to the part of the form this component actually needs.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Product forms are full of tiny dependencies: badges, summaries,
+              disabled buttons, async warnings, derived previews. Form lets
+              those surfaces listen narrowly instead of turning every keystroke
+              into a full-form repaint.
+            </p>
+          </div>
+
+          <SubscriptionPanel />
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<Keyboard size={14} />}>
+              Framework adapters
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              One form model for every UI runtime.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Use the adapter that matches your framework while keeping the same
+              typed form model, validation strategy, and headless composition
+              story.
+            </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              {frameworkAdapters.map((framework) => (
+                <span
+                  key={framework}
+                  className="rounded-md border border-yellow-200 bg-yellow-50 px-3 py-1.5 text-sm font-bold text-yellow-900 dark:border-yellow-900 dark:bg-yellow-950/40 dark:text-yellow-200"
+                >
+                  {framework}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div className="min-w-0 max-w-full overflow-hidden">
+            <LandingCodeExampleCard example={formCodeExample} />
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fffbeb] py-12 dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<BadgeCheck size={14} />}>
+              Field notes
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Less code because the form model is doing real work.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The old copy had the right instinct: fewer hasty abstractions,
+              fewer edge cases, and deeper control over the UI. This page now
+              shows where that leverage comes from.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-8">
+          <LibraryTestimonials testimonials={formProject.testimonials} />
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Form is being shaped in public on the way to the next wave of
+              product forms.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, examples, framework adapters, partner integrations,
+              and GitHub sponsors keep the product close to real-world form
+              pain.
+            </p>
+          </div>
+        </div>
 
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="form" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
+
+      <LandingPageGad />
       <BottomCTA
         linkProps={{
           to: '/$libraryId/$version/docs',
-          params: { libraryId: library.id, version },
+          params: { libraryId: library.id, version: resolvedVersion },
         }}
         label="Get Started!"
-        className="bg-yellow-500 border-yellow-500 hover:bg-yellow-600 text-black"
+        className="border-yellow-500 bg-yellow-500 text-black hover:bg-yellow-600"
       />
       <Footer />
-    </LibraryPageContainer>
+    </div>
+  )
+}
+
+function FormStatePanel() {
+  const [email, setEmail] = React.useState('sarah@tanstack.com')
+  const [plan, setPlan] = React.useState<FormDemoPlan>('team')
+  const [role, setRole] = React.useState('admin')
+  const isEmailValid = email.includes('@') && email.includes('.')
+  const isRolePending = role.length > 0 && role.length < 5
+  const isRoleValid = role.length >= 5
+  const dirtyFields = [
+    email !== 'sarah@tanstack.com',
+    plan !== 'team',
+    role !== 'admin',
+  ].filter(Boolean).length
+  const canSubmit = isEmailValid && isRoleValid && !isRolePending
+
+  const getFieldState = (name: FormDemoField['name']) => {
+    if (name === 'profile.email') {
+      return isEmailValid ? 'valid' : 'error'
+    }
+
+    if (name === 'company.plan') {
+      return plan === 'enterprise' ? 'dirty' : 'valid'
+    }
+
+    if (isRolePending) {
+      return 'pending'
+    }
+
+    return isRoleValid ? 'valid' : 'error'
+  }
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-yellow-200 bg-white p-4 shadow-sm shadow-yellow-950/5 dark:border-yellow-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          form store
+        </span>
+      </div>
+
+      <div className="mt-4 space-y-3">
+        {formFields.map((field) => (
+          <div
+            key={field.name}
+            className="rounded-lg border border-zinc-100 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <p className="truncate font-mono text-sm font-black text-zinc-950 dark:text-white">
+                  {field.name}
+                </p>
+                <p className="mt-1 text-xs leading-5 text-zinc-600 dark:text-zinc-400">
+                  {field.detail}
+                </p>
+              </div>
+              <span className="shrink-0 rounded-md bg-yellow-100 px-2 py-1 text-[0.65rem] font-black uppercase text-yellow-900 dark:bg-yellow-950 dark:text-yellow-200">
+                {getFieldState(field.name)}
+              </span>
+            </div>
+            <div className="mt-3">
+              {field.name === 'profile.email' ? (
+                <input
+                  className="w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm font-bold text-zinc-950 outline-none focus:border-yellow-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-white"
+                  value={email}
+                  onChange={(event) => setEmail(event.target.value)}
+                />
+              ) : field.name === 'company.plan' ? (
+                <div className="grid grid-cols-2 gap-2">
+                  {formPlanOptions.map((option) => (
+                    <button
+                      key={option}
+                      aria-pressed={plan === option}
+                      className={
+                        plan === option
+                          ? 'rounded-md border border-yellow-500 bg-yellow-500 px-3 py-2 text-sm font-black capitalize text-black'
+                          : 'rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm font-black capitalize text-zinc-700 transition-colors hover:border-yellow-400 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300'
+                      }
+                      type="button"
+                      onClick={() => setPlan(option)}
+                    >
+                      {option}
+                    </button>
+                  ))}
+                </div>
+              ) : (
+                <input
+                  className="w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm font-bold text-zinc-950 outline-none focus:border-yellow-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-white"
+                  value={role}
+                  onChange={(event) => setRole(event.target.value)}
+                />
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 grid gap-3 sm:grid-cols-3">
+        {[
+          ['dirty', `${dirtyFields} fields`],
+          ['validating', isRolePending ? '1 async' : '0 async'],
+          ['canSubmit', `${canSubmit}`],
+        ].map(([label, value]) => (
+          <div
+            key={label}
+            className="rounded-lg bg-yellow-50 p-3 dark:bg-yellow-950/25"
+          >
+            <p className="text-[0.65rem] font-black uppercase text-yellow-800 dark:text-yellow-300">
+              {label}
+            </p>
+            <p className="mt-1 text-sm font-black text-yellow-950 dark:text-yellow-100">
+              {value}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ValidationPipeline() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {validationSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-[#fffdf2] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-yellow-100 text-sm font-black text-yellow-900 dark:bg-yellow-950 dark:text-yellow-200">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function SubscriptionPanel() {
+  return (
+    <div className="min-w-0 rounded-lg border border-yellow-200 bg-white p-4 dark:border-yellow-900 dark:bg-zinc-950">
+      <div className="rounded-lg bg-zinc-950 p-4 text-sm text-yellow-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          useStore(form.store, state =&gt; state.values.profile.email)
+          <br />
+          form.Subscribe({'{'} selector: state =&gt; state.canSubmit {'}'})
+        </p>
+      </div>
+
+      <div className="mt-4 grid gap-3 md:grid-cols-2">
+        {fieldStates.map((state) => (
+          <div
+            key={state.label}
+            className="rounded-lg border border-zinc-200 bg-[#fffdf2] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <p className="text-[0.65rem] font-black uppercase text-zinc-500 dark:text-zinc-400">
+              {state.label}
+            </p>
+            <p className="mt-2 break-words font-mono text-sm font-black leading-6 text-zinc-950 dark:text-white">
+              {state.value}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-yellow-100 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-200">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-yellow-700 dark:text-yellow-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-yellow-500 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function FormLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
   )
 }
diff --git a/src/components/landing/HotkeysLanding.tsx b/src/components/landing/HotkeysLanding.tsx
new file mode 100644
index 000000000..a181db7a9
--- /dev/null
+++ b/src/components/landing/HotkeysLanding.tsx
@@ -0,0 +1,482 @@
+import * as React from 'react'
+import { ClientOnly, Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  BookOpen,
+  Crosshair,
+  Keyboard,
+  ListOrdered,
+  Monitor,
+  Pointer,
+  Radio,
+  Sparkles,
+} from 'lucide-react'
+
+import { BottomCTA } from '~/components/BottomCTA'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import LandingPageGad from '~/components/LandingPageGad'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
+import { getLibrary } from '~/libraries'
+
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
+const library = getLibrary('hotkeys')
+
+const LazyHotkeysShortcutBinding = React.lazy(() =>
+  import('~/components/landing/HotkeysShortcut.client').then((m) => ({
+    default: m.HotkeysShortcutBinding,
+  })),
+)
+
+const hotkeysAgentPrompt = [
+  'Build a keyboard shortcut system with TanStack Hotkeys.',
+  'Use type-safe hotkey strings, cross-platform Mod handling, scoping, input filtering, key state tracking, sequences, recording, display formatting, and framework adapters.',
+  'Include a visible shortcut help surface and avoid global shortcuts firing inside text inputs unless explicitly intended.',
+].join(' ')
+
+const heroProof = [
+  {
+    label: 'Type-safe strings',
+    value: 'validated modifiers and keys',
+  },
+  {
+    label: 'Cross-platform',
+    value: 'Mod maps to Cmd or Ctrl',
+  },
+  {
+    label: 'Context-aware',
+    value: 'scopes, inputs, cleanup, conflicts',
+  },
+]
+
+const shortcutRows = [
+  ['Mod+K', 'open search'],
+  ['G then D', 'go to dashboard'],
+  ['Shift+?', 'show shortcuts'],
+  ['Esc', 'close current panel'],
+]
+
+const featureCards = [
+  {
+    title: 'Shortcut strings are part of the type system.',
+    body: 'Define combinations with a type-safe Hotkey string so invalid modifiers and keys get caught before users do.',
+    icon: <Keyboard size={18} />,
+  },
+  {
+    title: 'Mod means the right thing on each platform.',
+    body: 'Use one shortcut definition while macOS gets Cmd and other platforms get Ctrl without hand-written platform checks.',
+    icon: <Monitor size={18} />,
+  },
+  {
+    title: 'Sequences and holds unlock richer UI.',
+    body: 'Support Vim-style sequences, multi-step commands, key hold detection, and contextual command flows.',
+    icon: <ListOrdered size={18} />,
+  },
+  {
+    title: 'Recording belongs in the product.',
+    body: 'Let users capture and customize shortcuts with recorder utilities instead of building keyboard parsing from scratch.',
+    icon: <Radio size={18} />,
+  },
+]
+
+const lifecycleSteps = [
+  {
+    label: 'Define',
+    body: 'Write a type-safe shortcut string with platform-aware modifiers.',
+  },
+  {
+    label: 'Scope',
+    body: 'Attach it globally, to a document, or to a specific element/ref.',
+  },
+  {
+    label: 'Filter',
+    body: 'Avoid accidental firing in text inputs or conflicting UI regions.',
+  },
+  {
+    label: 'Handle',
+    body: 'Run the command, track key state, record input, or render help text.',
+  },
+]
+
+const frameworkAdapters = [
+  'React',
+  'Preact',
+  'Solid',
+  'Svelte',
+  'Vue',
+  'Angular',
+]
+
+export default function HotkeysLanding() {
+  const { version } = useParams({ strict: false })
+  const resolvedVersion = version ?? library.latestVersion
+
+  return (
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#fff1f2] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <ClientOnly>
+        <React.Suspense fallback={null}>
+          <LazyHotkeysShortcutBinding />
+        </React.Suspense>
+      </ClientOnly>
+
+      <section className="max-w-full overflow-hidden border-b border-rose-950/10 bg-[#ffe4e6] dark:border-rose-300/10 dark:bg-[#1d0710]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<Keyboard size={14} />}>
+              Type-safe keyboard interactions
+            </SectionKicker>
+
+            <div className="mt-4 flex flex-wrap items-start gap-x-3 gap-y-2">
+              <h1 className="text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+                <LibraryWordmark library={library} />
+              </h1>
+              {library.badge ? (
+                <span className="rounded-md bg-zinc-950 px-2 py-1 text-xs font-black uppercase text-white dark:bg-white dark:text-zinc-950">
+                  {library.badge}
+                </span>
+              ) : null}
+            </div>
+
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              Keyboard shortcuts that know where they are allowed to fire.
+            </p>
+
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Hotkeys gives apps type-safe shortcut strings, cross-platform Mod
+              handling, scopes, sequences, recording, key state tracking, and
+              framework adapters for serious keyboard interaction systems.
+            </p>
+
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
+
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <HotkeysLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={hotkeysAgentPrompt}
+                label="Copy Hotkeys Prompt"
+              />
+            </div>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+          </div>
+
+          <ShortcutPanel />
+        </div>
+      </section>
+
+      <section className="border-b border-rose-950/10 bg-[#fff7f8] dark:border-rose-300/10 dark:bg-[#230914]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Sparkles size={14} />}>
+              Why Hotkeys
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Keyboard UX is product logic, not an event listener.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Great shortcuts need platform-aware labels, scoped behavior, input
+              safety, conflict avoidance, sequences, recording, and help
+              surfaces. Hotkeys gives those mechanics a typed home.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <LifecyclePanel />
+          <div>
+            <SectionKicker icon={<Crosshair size={14} />}>
+              Shortcut lifecycle
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Define, scope, filter, handle.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Hotkeys keeps the full lifecycle explicit so shortcuts feel fast
+              without surprising people while they type, edit, or work inside a
+              focused panel.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<Pointer size={14} />}>
+              Framework adapters
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              One keyboard core, product-specific command systems.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Use the core shortcut model across UI runtimes, then wire it into
+              the framework adapter and command surface your product needs.
+            </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              {frameworkAdapters.map((framework) => (
+                <span
+                  key={framework}
+                  className="rounded-md border border-rose-200 bg-rose-50 px-3 py-1.5 text-sm font-bold text-rose-800 dark:border-rose-900 dark:bg-rose-950/40 dark:text-rose-200"
+                >
+                  {framework}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Hotkeys is for apps where keyboard UX is part of the product.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, adapters, examples, partners, and GitHub sponsors
+              keep the shortcut system grounded in real command-heavy
+              interfaces.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="hotkeys" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
+
+      <LandingPageGad />
+      <BottomCTA
+        linkProps={{
+          to: '/$libraryId/$version/docs',
+          params: { libraryId: library.id, version: resolvedVersion },
+        }}
+        label="Get Started!"
+        className="border-rose-600 bg-rose-600 text-white hover:bg-rose-700"
+      />
+      <Footer />
+    </div>
+  )
+}
+
+function ShortcutPanel() {
+  const [activeShortcut, setActiveShortcut] = React.useState('Mod+K')
+  const sequenceRef = React.useRef<string | null>(null)
+
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const key = event.key.toLowerCase()
+
+      if ((event.metaKey || event.ctrlKey) && key === 'k') {
+        setActiveShortcut('Mod+K')
+        return
+      }
+
+      if (event.shiftKey && event.key === '?') {
+        setActiveShortcut('Shift+?')
+        return
+      }
+
+      if (event.key === 'Escape') {
+        setActiveShortcut('Esc')
+        return
+      }
+
+      if (sequenceRef.current === 'g' && key === 'd') {
+        setActiveShortcut('G then D')
+        sequenceRef.current = null
+        return
+      }
+
+      sequenceRef.current = key === 'g' ? 'g' : null
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [])
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-rose-200 bg-white p-4 shadow-sm shadow-rose-950/5 dark:border-rose-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          shortcut map
+        </span>
+      </div>
+
+      <div className="mt-4 space-y-3">
+        {shortcutRows.map(([keys, action]) => (
+          <button
+            key={keys}
+            aria-pressed={activeShortcut === keys}
+            className={
+              activeShortcut === keys
+                ? 'grid w-full gap-3 rounded-lg border border-rose-500 bg-rose-500 p-3 text-left text-white sm:grid-cols-[0.42fr_1fr] sm:items-center'
+                : 'grid w-full gap-3 rounded-lg border border-zinc-200 bg-rose-50 p-3 text-left transition-colors hover:border-rose-300 dark:border-zinc-800 dark:bg-rose-950/20 dark:hover:border-rose-800 sm:grid-cols-[0.42fr_1fr] sm:items-center'
+            }
+            type="button"
+            onClick={() => setActiveShortcut(keys)}
+          >
+            <kbd
+              className={
+                activeShortcut === keys
+                  ? 'rounded-md bg-white px-3 py-2 text-center font-mono text-sm font-black text-rose-700'
+                  : 'rounded-md bg-zinc-950 px-3 py-2 text-center font-mono text-sm font-black text-white dark:bg-white dark:text-zinc-950'
+              }
+            >
+              {keys}
+            </kbd>
+            <span className="font-bold">{action}</span>
+          </button>
+        ))}
+      </div>
+
+      <div className="mt-4 rounded-lg bg-zinc-950 p-4 text-sm text-rose-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          useHotkey(&quot;{activeShortcut}&quot;, runCommand, {'{'} enabled:{' '}
+          isPanelOpen {'}'})
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function LifecyclePanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {lifecycleSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-[#fff1f2] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-rose-100 text-sm font-black text-rose-800 dark:bg-rose-950 dark:text-rose-200">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-rose-100 text-rose-800 dark:bg-rose-950 dark:text-rose-200">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-rose-700 dark:text-rose-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-rose-500 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function HotkeysLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
+  )
+}
diff --git a/src/components/landing/HotkeysShortcut.client.tsx b/src/components/landing/HotkeysShortcut.client.tsx
new file mode 100644
index 000000000..522cad65f
--- /dev/null
+++ b/src/components/landing/HotkeysShortcut.client.tsx
@@ -0,0 +1,15 @@
+import { useHotkey } from '@tanstack/react-hotkeys'
+import { useNavigate } from '@tanstack/react-router'
+
+export function HotkeysShortcutBinding() {
+  const navigate = useNavigate()
+
+  useHotkey('Mod+Enter', () => {
+    navigate({
+      to: '/$libraryId/$version/docs',
+      params: { libraryId: 'hotkeys', version: 'latest' },
+    })
+  })
+
+  return null
+}
diff --git a/src/components/landing/IntentLanding.tsx b/src/components/landing/IntentLanding.tsx
new file mode 100644
index 000000000..7b94130a4
--- /dev/null
+++ b/src/components/landing/IntentLanding.tsx
@@ -0,0 +1,602 @@
+import * as React from 'react'
+import { Link, useNavigate, useParams } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import {
+  ArrowRight,
+  BookOpen,
+  Bot,
+  FileSearch,
+  GitBranch,
+  Package,
+  PackageCheck,
+  RefreshCw,
+  ScanLine,
+  Sparkles,
+  WandSparkles,
+} from 'lucide-react'
+
+import { BottomCTA } from '~/components/BottomCTA'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { SkillSparkline } from '~/components/intent/SkillSparkline'
+import LandingPageGad from '~/components/LandingPageGad'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
+import { getLibrary } from '~/libraries'
+import {
+  intentDirectoryQueryOptions,
+  intentSkillHistoryQueryOptions,
+  intentStatsQueryOptions,
+} from '~/queries/intent'
+import type { SkillHistoryEntry } from '~/utils/intent.functions'
+import { encodePackageNameSlug } from '~/utils/route-encoding'
+
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
+const library = getLibrary('intent')
+const intentAgentPrompt = [
+  'Ship Agent Skills with a TypeScript npm package using TanStack Intent.',
+  'Generate, validate, and publish versioned skills that agents can discover from node_modules, include source-doc references, and run stale checks in CI when documentation changes.',
+  'Show the package registry, skill history, versioned updates, and how skills travel with npm releases instead of depending on model training cutoffs.',
+].join(' ')
+
+const heroProof = [
+  {
+    label: 'In npm',
+    value: 'skills version with the package',
+  },
+  {
+    label: 'Discoverable',
+    value: 'agents load from node_modules',
+  },
+  {
+    label: 'Freshness',
+    value: 'source docs and stale checks',
+  },
+]
+
+const packageFiles = [
+  ['package.json', 'keywords and files entries'],
+  ['skills/router/SKILL.md', 'procedural agent knowledge'],
+  ['docs/routing.md', 'source reference'],
+  ['stale report', 'flags source drift'],
+]
+
+const featureCards = [
+  {
+    title: 'Skills travel with library versions.',
+    body: 'Agent guidance updates through npm releases instead of waiting for model training data or copied prompt files to catch up.',
+    icon: <Package size={18} />,
+  },
+  {
+    title: 'Discovery happens from node_modules.',
+    body: 'Install the package and compatible agents can find the skill metadata where the code already lives.',
+    icon: <Bot size={18} />,
+  },
+  {
+    title: 'Source docs keep skills accountable.',
+    body: 'Skills declare the docs they depend on, so stale checks can flag them when the source material changes.',
+    icon: <FileSearch size={18} />,
+  },
+  {
+    title: 'The registry makes the ecosystem visible.',
+    body: 'Packages, skills, versions, download signals, and history become browsable instead of hidden inside package tarballs.',
+    icon: <ScanLine size={18} />,
+  },
+]
+
+const lifecycleSteps = [
+  {
+    label: 'Author',
+    body: 'Write the procedural skill close to the library and its source docs.',
+  },
+  {
+    label: 'Validate',
+    body: 'Check metadata, source references, and skill structure before release.',
+  },
+  {
+    label: 'Publish',
+    body: 'Ship the skill with the npm package version that contains the code.',
+  },
+  {
+    label: 'Discover',
+    body: 'Agents load versioned skills from installed packages on demand.',
+  },
+]
+
+export default function IntentLanding() {
+  const { version } = useParams({ strict: false })
+  const resolvedVersion = version ?? library.latestVersion
+
+  return (
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#f0f9ff] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-sky-950/10 bg-[#e0f2fe] dark:border-sky-300/10 dark:bg-[#061522]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<WandSparkles size={14} />}>
+              Agent skills in npm
+            </SectionKicker>
+
+            <div className="mt-4 flex flex-wrap items-start gap-x-3 gap-y-2">
+              <h1 className="text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+                <LibraryWordmark library={library} />
+              </h1>
+              {library.badge ? (
+                <span className="rounded-md bg-zinc-950 px-2 py-1 text-xs font-black uppercase text-white dark:bg-white dark:text-zinc-950">
+                  {library.badge}
+                </span>
+              ) : null}
+            </div>
+
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              Package the knowledge agents need with the library itself.
+            </p>
+
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Intent lets maintainers generate, validate, publish, and track
+              Agent Skills alongside npm packages, so agents discover current
+              procedural knowledge from installed code instead of stale model
+              memory.
+            </p>
+
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
+
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <IntentLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <IntentSecondaryLink
+                to="/intent/registry"
+                label="View Registry"
+                icon={<PackageCheck size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={intentAgentPrompt}
+                label="Copy Intent Prompt"
+              />
+            </div>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+          </div>
+
+          <IntentPackagePanel />
+        </div>
+      </section>
+
+      <section className="border-b border-sky-950/10 bg-[#f4fbff] dark:border-sky-300/10 dark:bg-[#071b2b]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Sparkles size={14} />}>
+              Why Intent
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Libraries need to ship agent knowledge, not just code.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Agents are only as useful as the procedural context they can
+              retrieve. Intent gives library authors a way to version that
+              context with the package and keep it tied to the docs it came
+              from.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <IntentRegistryPreview />
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <LifecyclePanel />
+          <div>
+            <SectionKicker icon={<GitBranch size={14} />}>
+              Skill lifecycle
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Author, validate, publish, discover.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Skills become part of the library release process. They are
+              written near the source, validated like package artifacts, and
+              discovered by agents from installed dependencies.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<RefreshCw size={14} />}>
+              Staleness checks
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              If the docs drift, the skill should know.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Intent can compare skill source references against documentation
+              changes, making skill freshness a release signal instead of a
+              guess.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Intent helps open source libraries teach agents how to use them.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, package authors, examples, partners, and GitHub
+              sponsors keep agent skills close to the libraries they describe.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="intent" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
+
+      <LandingPageGad />
+      <BottomCTA
+        linkProps={{
+          to: '/$libraryId/$version/docs',
+          params: { libraryId: library.id, version: resolvedVersion },
+        }}
+        label="Get Started!"
+        className="border-sky-500 bg-sky-500 text-white hover:bg-sky-600"
+      />
+      <Footer />
+    </div>
+  )
+}
+
+function IntentPackagePanel() {
+  const [activeFileIndex, setActiveFileIndex] = React.useState(1)
+  const activeFile = packageFiles[activeFileIndex] ?? packageFiles[0]
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-sky-200 bg-white p-4 shadow-sm shadow-sky-950/5 dark:border-sky-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          package skill map
+        </span>
+      </div>
+
+      <div className="mt-4 rounded-lg bg-zinc-950 p-4 text-sm text-sky-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          npx @tanstack/intent scaffold
+          <br />
+          npx @tanstack/intent validate {activeFile[0]}
+          <br />
+          npx @tanstack/intent stale --json
+        </p>
+      </div>
+
+      <div className="mt-4 space-y-2">
+        {packageFiles.map(([file, detail], index) => (
+          <button
+            key={file}
+            aria-pressed={activeFileIndex === index}
+            className={
+              activeFileIndex === index
+                ? 'grid w-full gap-2 rounded-lg border border-sky-500 bg-sky-500 p-3 text-left text-white sm:grid-cols-[0.45fr_1fr]'
+                : 'grid w-full gap-2 rounded-lg border border-zinc-200 bg-sky-50 p-3 text-left transition-colors hover:border-sky-300 dark:border-zinc-800 dark:bg-sky-950/20 dark:hover:border-sky-800 sm:grid-cols-[0.45fr_1fr]'
+            }
+            type="button"
+            onClick={() => setActiveFileIndex(index)}
+          >
+            <span className="font-mono text-sm font-black">{file}</span>
+            <span
+              className={
+                activeFileIndex === index
+                  ? 'text-sm text-white/80'
+                  : 'text-sm text-zinc-700 dark:text-zinc-300'
+              }
+            >
+              {detail}
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function IntentRegistryPreview() {
+  const statsQuery = useQuery(intentStatsQueryOptions())
+  const directoryQuery = useQuery(
+    intentDirectoryQueryOptions({ sort: 'downloads', pageSize: 9 }),
+  )
+
+  const stats = statsQuery.data
+  const packages = directoryQuery.data?.packages
+
+  const packageNames = React.useMemo(
+    () => (packages ?? []).map((p) => p.name),
+    [packages],
+  )
+  const skillHistoryQuery = useQuery(
+    intentSkillHistoryQueryOptions(packageNames),
+  )
+  const skillHistory = React.useMemo(
+    () => skillHistoryQuery.data ?? {},
+    [skillHistoryQuery.data],
+  )
+  const maxSlots = React.useMemo(
+    () => Math.max(...Object.values(skillHistory).map((h) => h.length), 2),
+    [skillHistory],
+  )
+
+  const navigate = useNavigate()
+
+  if (!statsQuery.isLoading && (stats?.packageCount ?? 0) === 0) {
+    return null
+  }
+
+  return (
+    <section className="border-b border-zinc-200 bg-white py-12 dark:border-zinc-800 dark:bg-zinc-950">
+      <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+        <div className="mb-6 flex items-end justify-between gap-4">
+          <div>
+            <SectionKicker icon={<PackageCheck size={14} />}>
+              Skills Registry
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight">
+              Browse the packages already shipping skills.
+            </h2>
+            <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+              {stats ? (
+                <>
+                  <span className="font-black text-sky-600 dark:text-sky-400">
+                    {stats.packageCount}
+                  </span>{' '}
+                  {stats.packageCount === 1 ? 'package' : 'packages'},{' '}
+                  <span className="font-black text-sky-600 dark:text-sky-400">
+                    {stats.skillCount}
+                  </span>{' '}
+                  {stats.skillCount === 1 ? 'skill' : 'skills'} indexed
+                </>
+              ) : (
+                'Loading...'
+              )}
+            </p>
+          </div>
+          <Link
+            to="/intent/registry"
+            className="shrink-0 text-sm font-bold text-sky-600 hover:underline dark:text-sky-400"
+          >
+            Browse all
+          </Link>
+        </div>
+
+        {packages && packages.length > 0 ? (
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {packages.map((pkg) => (
+              <Link
+                key={pkg.name}
+                to="/intent/registry/$packageName"
+                params={{ packageName: encodePackageNameSlug(pkg.name) }}
+                className="group flex flex-col gap-2 rounded-lg border border-zinc-200 bg-zinc-50 p-4 transition-colors hover:border-sky-300 dark:border-zinc-800 dark:bg-zinc-900/50 dark:hover:border-sky-700"
+              >
+                <div className="mb-1 flex items-start justify-between gap-2">
+                  <span className="truncate font-mono text-sm font-black text-zinc-900 transition-colors group-hover:text-sky-600 dark:text-zinc-100 dark:group-hover:text-sky-400">
+                    {pkg.name}
+                  </span>
+                  <div className="w-20 shrink-0">
+                    {skillHistory[pkg.name] &&
+                    skillHistory[pkg.name].length > 0 ? (
+                      <SkillSparkline
+                        history={skillHistory[pkg.name]}
+                        height={24}
+                        maxSlots={maxSlots}
+                        onVersionClick={(entry: SkillHistoryEntry) => {
+                          navigate({
+                            to: '/intent/registry/$packageName',
+                            params: {
+                              packageName: encodePackageNameSlug(pkg.name),
+                            },
+                            search: { version: entry.version },
+                          })
+                        }}
+                      />
+                    ) : null}
+                  </div>
+                </div>
+                <div className="flex items-center gap-3 text-[11px] text-zinc-400 dark:text-zinc-500">
+                  <span className="shrink-0 text-xs font-bold tabular-nums text-sky-600 dark:text-sky-400">
+                    {pkg.skillNames.length}{' '}
+                    {pkg.skillNames.length === 1 ? 'skill' : 'skills'}
+                  </span>
+                  {pkg.monthlyDownloads > 0 ? (
+                    <span className="tabular-nums">
+                      {pkg.monthlyDownloads >= 1_000_000
+                        ? `${(pkg.monthlyDownloads / 1_000_000).toFixed(1)}M`
+                        : pkg.monthlyDownloads >= 1_000
+                          ? `${Math.floor(pkg.monthlyDownloads / 1_000)}K`
+                          : pkg.monthlyDownloads}
+                      /mo
+                    </span>
+                  ) : null}
+                  <span className="font-mono">v{pkg.latestVersion}</span>
+                  {pkg.frameworks.length > 0 ? (
+                    <span>{pkg.frameworks.slice(0, 2).join(', ')}</span>
+                  ) : null}
+                </div>
+                {pkg.description ? (
+                  <p className="line-clamp-1 text-xs text-zinc-500 dark:text-zinc-400">
+                    {pkg.description}
+                  </p>
+                ) : null}
+              </Link>
+            ))}
+          </div>
+        ) : directoryQuery.isLoading ? (
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div
+                key={i}
+                className="h-20 animate-pulse rounded-lg border border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900/30"
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+function LifecyclePanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {lifecycleSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-[#f0f9ff] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100 text-sm font-black text-sky-800 dark:bg-sky-950 dark:text-sky-200">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100 text-sky-800 dark:bg-sky-950 dark:text-sky-200">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-sky-700 dark:text-sky-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-sky-500 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function IntentLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
+  )
+}
+
+function IntentSecondaryLink({
+  icon,
+  label,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-sky-300 bg-transparent px-4 py-2.5 text-sm font-bold text-sky-700 transition-colors hover:bg-sky-500/10 dark:border-sky-700 dark:text-sky-300 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
+  )
+}
diff --git a/src/components/landing/LandingCodeExampleCard.tsx b/src/components/landing/LandingCodeExampleCard.tsx
new file mode 100644
index 000000000..8026c78c4
--- /dev/null
+++ b/src/components/landing/LandingCodeExampleCard.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react'
+import { CodeBlock } from '~/components/markdown/CodeBlock'
+import { Tabs, type TabDefinition } from '~/components/markdown/Tabs'
+import type { Framework } from '~/libraries'
+
+export interface LandingCodeExampleData {
+  frameworks: Array<Framework>
+  title?: string
+  codeByFramework: Partial<Record<Framework, { lang: string; code: string }>>
+}
+
+export interface LandingCodeExampleCardProps {
+  example?: LandingCodeExampleData | null
+  renderFallback?: (framework: Framework) => React.ReactNode
+}
+
+export function LandingCodeExampleCard({
+  example,
+  renderFallback,
+}: LandingCodeExampleCardProps) {
+  if (!example) {
+    return null
+  }
+
+  const {
+    codeByFramework,
+    frameworks,
+    title = 'Just a quick look...',
+  } = example
+
+  if (frameworks.length === 0) {
+    return null
+  }
+
+  const tabs: Array<TabDefinition> = frameworks.map((framework) => ({
+    slug: framework,
+    name: framework,
+    headers: [],
+  }))
+
+  return (
+    <div className="px-4 space-y-4 flex flex-col items-center">
+      <div className="text-3xl font-black">{title}</div>
+      <div className="max-w-full min-w-0">
+        <Tabs tabs={tabs}>
+          {frameworks.map((framework) => {
+            const example = codeByFramework[framework]
+
+            if (!example) {
+              return (
+                <div key={framework}>
+                  {renderFallback ? renderFallback(framework) : null}
+                </div>
+              )
+            }
+
+            return (
+              <CodeBlock
+                key={framework}
+                className="mt-0 border-0"
+                showTypeCopyButton={false}
+              >
+                <code className={`language-${example.lang}`}>
+                  {example.code}
+                </code>
+              </CodeBlock>
+            )
+          })}
+        </Tabs>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/landing/LandingCopyPromptButton.tsx b/src/components/landing/LandingCopyPromptButton.tsx
new file mode 100644
index 000000000..e610a4a58
--- /dev/null
+++ b/src/components/landing/LandingCopyPromptButton.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react'
+import { CheckCircle2, Copy } from 'lucide-react'
+import { copyTextToClipboard } from '~/utils/browser-effects'
+
+type LandingCopyPromptButtonProps = {
+  getPrompt?: () => Promise<string> | string
+  label?: string
+  prompt?: string
+}
+
+export function LandingCopyPromptButton({
+  getPrompt,
+  label = 'Copy Prompt',
+  prompt,
+}: LandingCopyPromptButtonProps) {
+  const [status, setStatus] = React.useState<
+    'idle' | 'copying' | 'copied' | 'error'
+  >('idle')
+
+  React.useEffect(() => {
+    if (status !== 'copied' && status !== 'error') {
+      return
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setStatus('idle')
+    }, 1800)
+
+    return () => {
+      window.clearTimeout(timeoutId)
+    }
+  }, [status])
+
+  return (
+    <button
+      type="button"
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-300 bg-white px-4 py-2.5 text-sm font-bold text-zinc-900 transition-colors hover:border-zinc-400 disabled:cursor-wait disabled:opacity-75 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 dark:hover:border-zinc-500 sm:w-auto"
+      disabled={status === 'copying'}
+      onClick={async () => {
+        setStatus('copying')
+
+        try {
+          const resolvedPrompt = getPrompt ? await getPrompt() : prompt
+
+          if (!resolvedPrompt) {
+            throw new Error('Prompt unavailable')
+          }
+
+          await copyTextToClipboard(resolvedPrompt)
+          setStatus('copied')
+        } catch {
+          setStatus('error')
+        }
+      }}
+    >
+      {status === 'copied' ? (
+        <CheckCircle2 size={16} aria-hidden="true" />
+      ) : (
+        <Copy size={16} aria-hidden="true" />
+      )}
+      {status === 'copied'
+        ? 'Copied'
+        : status === 'copying'
+          ? 'Copying...'
+          : status === 'error'
+            ? 'Copy failed'
+            : label}
+    </button>
+  )
+}
diff --git a/src/components/landing/LandingEcosystemProof.tsx b/src/components/landing/LandingEcosystemProof.tsx
new file mode 100644
index 000000000..487b7302b
--- /dev/null
+++ b/src/components/landing/LandingEcosystemProof.tsx
@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+
+export function LandingEcosystemProof() {
+  return (
+    <div className="mt-5 flex max-w-2xl flex-wrap items-center gap-x-4 gap-y-2 border-l-2 border-zinc-300 pl-3 text-sm text-zinc-600 dark:border-zinc-700 dark:text-zinc-400">
+      <span className="inline-flex items-center gap-1.5 font-semibold text-zinc-800 dark:text-zinc-200">
+        <GithubIcon className="h-3.5 w-3.5" />
+        Built in public
+      </span>
+      <Link
+        to="/partners"
+        className="font-semibold hover:text-zinc-950 dark:hover:text-white"
+      >
+        Partner-backed
+      </Link>
+      <Link
+        to="/support"
+        className="font-semibold hover:text-zinc-950 dark:hover:text-white"
+      >
+        Sponsor-supported
+      </Link>
+    </div>
+  )
+}
diff --git a/src/components/landing/McpLanding.tsx b/src/components/landing/McpLanding.tsx
deleted file mode 100644
index 801d9fcaa..000000000
--- a/src/components/landing/McpLanding.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Link } from '@tanstack/react-router'
-import { Footer } from '~/components/Footer'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
-import { LibraryHero } from '~/components/LibraryHero'
-import { BottomCTA } from '~/components/BottomCTA'
-import { mcpProject } from '~/libraries/mcp'
-import { getLibrary } from '~/libraries'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
-import LandingPageGad from '~/components/LandingPageGad'
-import { Button } from '~/ui'
-import { MaintainersSection } from '~/components/MaintainersSection'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { Key } from 'lucide-react'
-
-const library = getLibrary('mcp')
-
-export default function McpLanding() {
-  const canApiKeys = true // Any logged-in user can access API keys
-
-  return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={mcpProject}
-        actions={
-          <>
-            <Button as="a" href={`/mcp/latest/docs`} variant="secondary">
-              Get Started
-            </Button>
-            {canApiKeys && (
-              <Button as={Link} to="/account/integrations">
-                <Key className="w-3.5 h-3.5" />
-                Get API Key
-              </Button>
-            )}
-          </>
-        }
-      />
-
-      <LibraryFeatureHighlights
-        featureHighlights={mcpProject.featureHighlights}
-      />
-
-      <MaintainersSection libraryId="mcp" />
-      <LazySponsorSection />
-      <LandingPageGad />
-
-      <BottomCTA
-        linkProps={{
-          to: '/$libraryId/$version/docs',
-          params: { libraryId: library.id },
-        }}
-        label="Get Started!"
-        className="bg-black dark:bg-white border-black dark:border-white hover:bg-gray-800 dark:hover:bg-gray-200 text-white dark:text-black"
-      />
-      <Footer />
-    </LibraryPageContainer>
-  )
-}
diff --git a/src/components/landing/PacerLanding.tsx b/src/components/landing/PacerLanding.tsx
index 294875797..027fb1f29 100644
--- a/src/components/landing/PacerLanding.tsx
+++ b/src/components/landing/PacerLanding.tsx
@@ -1,83 +1,608 @@
-import { Footer } from '~/components/Footer'
-import { LibraryHero } from '~/components/LibraryHero'
-import { PartnersSection } from '~/components/PartnersSection'
-import { MaintainersSection } from '~/components/MaintainersSection'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  BookOpen,
+  CircleGauge,
+  Clock,
+  Gauge,
+  Layers,
+  ListChecks,
+  PauseCircle,
+  RefreshCcw,
+  Rows3,
+  Split,
+  WandSparkles,
+} from 'lucide-react'
+
 import { BottomCTA } from '~/components/BottomCTA'
-import { pacerProject } from '~/libraries/pacer'
-import { getLibrary } from '~/libraries'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
 import LandingPageGad from '~/components/LandingPageGad'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { LibraryStatsSection } from '~/components/LibraryStatsSection'
-import { FeatureGridSection } from '~/components/FeatureGridSection'
+import { getLibrary } from '~/libraries'
 
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
 const library = getLibrary('pacer')
+const pacerAgentPrompt = [
+  'Build a TanStack Pacer timing layer for a TypeScript app.',
+  'Use debouncing, throttling, rate limiting, queuing, or batching where each fits the workflow, and expose cancellation, pause/resume, retry, status, and concurrency controls for async work.',
+  'Keep the primitives framework-agnostic while wiring reactive state through the correct adapter for the UI runtime.',
+].join(' ')
+
+const heroProof = [
+  {
+    label: 'Noisy input',
+    value: 'debounce search, autosave, validation',
+  },
+  {
+    label: 'Fast events',
+    value: 'throttle resize, scroll, pointer work',
+  },
+  {
+    label: 'Async pressure',
+    value: 'queue, batch, limit, cancel',
+  },
+]
+
+type PacerSearchResult = {
+  label: string
+  query: string
+  result: string
+}
+
+const pacerSearchResults: Array<PacerSearchResult> = [
+  {
+    label: 'Router',
+    query: 'router loader',
+    result: 'Router loaders, preload, search params',
+  },
+  {
+    label: 'Virtual',
+    query: 'virtual chat',
+    result: 'Virtual chat, scrollToEnd, dynamic rows',
+  },
+  {
+    label: 'Table',
+    query: 'table filters',
+    result: 'Table filters, sorting, column visibility',
+  },
+]
+
+const featureCards = [
+  {
+    title: 'Debounce the work that should wait.',
+    body: 'Search, validation, autosave, and expensive calculations can wait for intent instead of firing on every keystroke.',
+    icon: <Clock size={18} />,
+  },
+  {
+    title: 'Throttle the work that should pace itself.',
+    body: 'Scroll, resize, pointer, sensor, and realtime events can stay responsive without flooding the app.',
+    icon: <Gauge size={18} />,
+  },
+  {
+    title: 'Queue the work that needs order.',
+    body: 'Run async tasks with FIFO, LIFO, priority, pause/resume, cancellation, retries, and concurrency control.',
+    icon: <Rows3 size={18} />,
+  },
+  {
+    title: 'Batch the work that should travel together.',
+    body: 'Collect writes, logs, telemetry, or cache operations into sensible flushes instead of shipping every item alone.',
+    icon: <Split size={18} />,
+  },
+]
+
+const lifecycleSteps = [
+  {
+    label: 'Accept',
+    body: 'The primitive receives calls from UI events, async workflows, or service boundaries.',
+  },
+  {
+    label: 'Pace',
+    body: 'Timing, rate, concurrency, ordering, and batching rules decide when work may run.',
+  },
+  {
+    label: 'Signal',
+    body: 'Reactive state reports idle, pending, running, queued, success, error, and cancelled work.',
+  },
+  {
+    label: 'Flush',
+    body: 'Manual controls can flush, cancel, pause, resume, retry, or drain the current workload.',
+  },
+]
+
+const frameworkAdapters = ['React', 'Preact', 'Solid', 'Angular', 'Vanilla']
 
 export default function PacerLanding() {
+  const { version } = useParams({ strict: false })
+  const resolvedVersion = version ?? library.latestVersion
+
   return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={pacerProject}
-        cta={{
-          linkProps: {
-            from: '/$libraryId/$version',
-            to: './docs',
-            params: { libraryId: library.id },
-          },
-          label: 'Get Started',
-          className: 'bg-lime-600 border-lime-600 hover:bg-lime-700 text-white',
-        }}
-      />
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#f7fee7] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-lime-950/10 bg-[#ecfccb] dark:border-lime-300/10 dark:bg-[#0b1604]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<CircleGauge size={14} />}>
+              Timing and pressure control
+            </SectionKicker>
 
-      <LibraryStatsSection library={library} />
+            <div className="mt-4 flex flex-wrap items-start gap-x-3 gap-y-2">
+              <h1 className="text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+                <LibraryWordmark library={library} />
+              </h1>
+              {library.badge ? (
+                <span className="rounded-md bg-zinc-950 px-2 py-1 text-xs font-black uppercase text-white dark:bg-white dark:text-zinc-950">
+                  {library.badge}
+                </span>
+              ) : null}
+            </div>
 
-      <LibraryFeatureHighlights
-        featureHighlights={pacerProject.featureHighlights}
-      />
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              Control when work is allowed to happen.
+            </p>
 
-      <FeatureGridSection
-        title="Framework Agnostic & Feature Rich"
-        description="TanStack Pacer's API is highly modular and framework-independent while still prioritizing ergonomics. Behold, the obligatory feature-list:"
-        items={[
-          'Lightweight',
-          'Tree-Shaking',
-          'Type-Safe',
-          'Framework Agnostic',
-          'Reactive & Subscribable State',
-          'Rate Limiting',
-          'Throttling',
-          'Debouncing',
-          'Queuing',
-          'Batching',
-          'Flush Controls',
-          'LIFO/FIFO/Dequeue Ordering',
-          'Concurrency Control',
-          'Queue Prioritization',
-          'Pause/Resume Controls',
-          'Cancellation',
-          'Abort Controller Support',
-          'Async/Sync Execution',
-          'Multiple Layers of Abstraction',
-        ]}
-        gridClassName="grid grid-flow-row grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-10 gap-y-4 mx-auto"
-      />
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Pacer gives JavaScript apps typed primitives for debouncing,
+              throttling, rate limiting, queuing, and batching so expensive work
+              runs at the speed the product can actually afford.
+            </p>
 
-      <MaintainersSection libraryId="pacer" />
-      <PartnersSection libraryId="pacer" />
-      <LazySponsorSection />
-      <LandingPageGad />
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
 
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <PacerLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={pacerAgentPrompt}
+                label="Copy Pacer Prompt"
+              />
+            </div>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+          </div>
+
+          <PacerPanel />
+        </div>
+      </section>
+
+      <section className="border-b border-lime-950/10 bg-[#f7fee7] dark:border-lime-300/10 dark:bg-[#0f1b07]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<WandSparkles size={14} />}>
+              Why Pacer
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Performance problems often start as scheduling problems.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The app does not need every keypress, scroll tick, resize event,
+              network write, or background task to run immediately. Pacer gives
+              each workflow the timing policy it deserves.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <LifecyclePanel />
+          <div>
+            <SectionKicker icon={<RefreshCcw size={14} />}>
+              Control lifecycle
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Accept the work now. Run it when it makes sense.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Every primitive exposes state and controls, so the product can
+              show pending work, cancel stale tasks, flush intentionally, or
+              pause a queue before it becomes user-visible chaos.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.82fr_1.18fr] lg:items-start xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<PauseCircle size={14} />}>
+              Async workflows
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Queues should be observable, cancellable, and boring.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Pacer handles sync and async execution, abort controllers,
+              retries, ordering, queue state, concurrency, and manual controls
+              without making each feature team invent its own scheduler.
+            </p>
+          </div>
+
+          <AsyncPanel />
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<Layers size={14} />}>
+              Framework adapters
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Core timing primitives, reactive UI adapters.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Use Pacer in plain TypeScript, then connect the same primitives to
+              framework state through adapters when the UI needs to react to
+              queue, pending, error, or success state.
+            </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              {frameworkAdapters.map((framework) => (
+                <span
+                  key={framework}
+                  className="rounded-md border border-lime-200 bg-lime-50 px-3 py-1.5 text-sm font-bold text-lime-800 dark:border-lime-900 dark:bg-lime-950/40 dark:text-lime-200"
+                >
+                  {framework}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#f7fee7] py-12 dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<ListChecks size={14} />}>
+              Feature surface
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              One timing toolbox instead of scattered timers.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Debounce, throttle, rate limit, queue, batch, flush, cancel,
+              pause, resume, retry, prioritize, and control concurrency from one
+              typed set of primitives.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Pacer is built for the messy edges of real app work.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, adapters, examples, partners, and GitHub sponsors
+              keep the timing primitives grounded in the places apps actually
+              get overwhelmed.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="pacer" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
+
+      <LandingPageGad />
       <BottomCTA
         linkProps={{
-          from: '/$libraryId/$version',
-          to: './docs',
-          params: { libraryId: library.id },
+          to: '/$libraryId/$version/docs',
+          params: { libraryId: library.id, version: resolvedVersion },
         }}
         label="Get Started!"
-        className="bg-lime-600 border-lime-600 hover:bg-lime-700 hover:border-lime-700 text-white"
+        className="border-lime-600 bg-lime-600 text-white hover:bg-lime-700"
       />
       <Footer />
-    </LibraryPageContainer>
+    </div>
+  )
+}
+
+function PacerPanel() {
+  const timeoutRef = React.useRef<number | null>(null)
+  const [inputValue, setInputValue] = React.useState('router loader')
+  const [debouncedQuery, setDebouncedQuery] = React.useState('router loader')
+  const [inputEvents, setInputEvents] = React.useState(0)
+  const [executions, setExecutions] = React.useState(1)
+  const [isWaiting, setIsWaiting] = React.useState(false)
+  const activeResult =
+    pacerSearchResults.find((item) => item.query === debouncedQuery) ??
+    pacerSearchResults.find((item) =>
+      debouncedQuery.includes(item.label.toLowerCase()),
+    ) ??
+    pacerSearchResults[0]
+
+  React.useEffect(() => {
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current)
+    }
+
+    if (inputValue === debouncedQuery) {
+      setIsWaiting(false)
+      return
+    }
+
+    setIsWaiting(true)
+    timeoutRef.current = window.setTimeout(() => {
+      setDebouncedQuery(inputValue)
+      setExecutions((current) => current + 1)
+      setIsWaiting(false)
+    }, 650)
+
+    return () => {
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [debouncedQuery, inputValue])
+
+  const changeInputValue = (nextValue: string) => {
+    setInputValue(nextValue)
+    setInputEvents((current) => current + 1)
+  }
+
+  const flushSearch = () => {
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current)
+    }
+
+    if (debouncedQuery !== inputValue) {
+      setExecutions((current) => current + 1)
+    }
+
+    setDebouncedQuery(inputValue)
+    setIsWaiting(false)
+  }
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-lime-200 bg-white p-4 shadow-sm shadow-lime-950/5 dark:border-lime-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          debounced search
+        </span>
+      </div>
+
+      <div className="mt-4 rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900">
+        <label
+          className="text-xs font-black uppercase text-lime-800 dark:text-lime-300"
+          htmlFor="pacer-search-demo"
+        >
+          Search docs
+        </label>
+        <input
+          id="pacer-search-demo"
+          className="mt-2 w-full rounded-md border border-lime-200 bg-white px-3 py-2 text-sm font-bold text-zinc-950 outline-none focus:border-lime-500 dark:border-lime-900 dark:bg-zinc-950 dark:text-white"
+          value={inputValue}
+          onChange={(event) => changeInputValue(event.target.value)}
+        />
+        <div className="mt-3 flex flex-wrap gap-2">
+          {pacerSearchResults.map((item) => (
+            <button
+              key={item.query}
+              className="rounded-md border border-lime-200 bg-white px-3 py-2 text-xs font-black text-lime-800 transition-colors hover:border-lime-400 dark:border-lime-900 dark:bg-zinc-950 dark:text-lime-200"
+              type="button"
+              onClick={() => changeInputValue(item.query)}
+            >
+              {item.label}
+            </button>
+          ))}
+          <button
+            className="rounded-md border border-lime-600 bg-lime-600 px-3 py-2 text-xs font-black text-white transition-colors hover:bg-lime-700"
+            type="button"
+            onClick={flushSearch}
+          >
+            Flush now
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-4 grid gap-3 sm:grid-cols-2">
+        {[
+          ['raw input', inputValue || 'empty'],
+          ['paced query', debouncedQuery || 'empty'],
+          ['input events', `${inputEvents}`],
+          ['executed searches', `${executions}`],
+        ].map(([label, value]) => (
+          <div
+            key={label}
+            className="rounded-lg bg-lime-50 p-3 dark:bg-lime-950/25"
+          >
+            <p className="text-[0.65rem] font-black uppercase text-lime-800 dark:text-lime-300">
+              {label}
+            </p>
+            <p className="mt-1 text-sm font-black text-lime-950 dark:text-lime-100">
+              {value}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 rounded-lg bg-lime-50 p-4 dark:bg-lime-950/25">
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-xs font-black uppercase text-lime-800 dark:text-lime-300">
+            {isWaiting ? 'waiting 650ms' : 'result'}
+          </p>
+          <span className="rounded-md bg-white px-2 py-1 text-[0.65rem] font-black uppercase text-lime-800 dark:bg-zinc-950 dark:text-lime-200">
+            debounce
+          </span>
+        </div>
+        <p className="mt-2 text-sm font-black text-lime-950 dark:text-lime-100">
+          {activeResult?.result ?? 'No matching docs yet'}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function LifecyclePanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {lifecycleSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-[#f7fee7] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-lime-100 text-sm font-black text-lime-800 dark:bg-lime-950 dark:text-lime-200">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function AsyncPanel() {
+  return (
+    <div className="min-w-0 rounded-lg border border-lime-200 bg-white p-4 dark:border-lime-900 dark:bg-zinc-950">
+      <div className="rounded-lg bg-zinc-950 p-4 text-sm text-lime-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          const queue = new AsyncQueuer(uploadFile, {'{'} concurrency: 3 {'}'})
+          <br />
+          queue.addItem(file)
+          <br />
+          queue.store.subscribe(state =&gt; syncStatus(state.status))
+        </p>
+      </div>
+
+      <div className="mt-4 grid gap-3 md:grid-cols-2">
+        {[
+          ['pause/resume', 'stop the queue without losing work'],
+          ['abort', 'cancel stale async tasks cleanly'],
+          ['retry', 'recover transient failures'],
+          ['flush', 'run the pending batch intentionally'],
+        ].map(([label, body]) => (
+          <div
+            key={label}
+            className="rounded-lg border border-zinc-200 bg-[#f7fee7] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <p className="text-sm font-black">{label}</p>
+            <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+              {body}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-lime-100 text-lime-800 dark:bg-lime-950 dark:text-lime-200">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-lime-700 dark:text-lime-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-lime-500 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function PacerLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
   )
 }
diff --git a/src/components/landing/QueryLanding.tsx b/src/components/landing/QueryLanding.tsx
index 483ca2945..d74a76883 100644
--- a/src/components/landing/QueryLanding.tsx
+++ b/src/components/landing/QueryLanding.tsx
@@ -1,233 +1,798 @@
-import { useParams } from '@tanstack/react-router'
-import { Footer } from '~/components/Footer'
-import { LibraryHero } from '~/components/LibraryHero'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
-import { PartnersSection } from '~/components/PartnersSection'
-import { MaintainersSection } from '~/components/MaintainersSection'
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  Activity,
+  ArrowRight,
+  BookOpen,
+  DatabaseZap,
+  Eye,
+  Flame,
+  GitBranch,
+  Infinity as InfinityIcon,
+  Network,
+  Plus,
+  RefreshCcw,
+  RotateCcw,
+  Sparkles,
+} from 'lucide-react'
+
 import { BottomCTA } from '~/components/BottomCTA'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryTestimonials } from '~/components/LibraryTestimonials'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
+import LandingPageGad from '~/components/LandingPageGad'
 import { QueryGGBanner } from '~/components/QueryGGBanner'
+import { getLibrary } from '~/libraries'
 import { queryProject } from '~/libraries/query'
-import { Framework, getBranch, getLibrary } from '~/libraries'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
-import LandingPageGad from '~/components/LandingPageGad'
-import { LibraryTestimonials } from '~/components/LibraryTestimonials'
-import { LibraryShowcases } from '~/components/ShowcaseSection'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { LibraryStatsSection } from '~/components/LibraryStatsSection'
-import { CodeExampleCard } from '~/components/CodeExampleCard'
-import { StackBlitzSection } from '~/components/StackBlitzSection'
-import { FeatureGridSection } from '~/components/FeatureGridSection'
+import { LandingCodeExampleCard } from '~/components/landing/LandingCodeExampleCard'
+import { queryCodeExample } from '~/components/landing/codeExamples'
+import { usePrefersReducedMotion } from '~/utils/usePrefersReducedMotion'
 
+import { LandingEcosystemProof } from '~/components/landing/LandingEcosystemProof'
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
 const library = getLibrary('query')
+const queryAgentPrompt = [
+  'Build a TanStack Query server-state layer for a TypeScript app.',
+  'Use query keys that model the product domain, colocated query functions, mutations with optimistic updates where useful, and targeted invalidation after writes.',
+  'Include loading, error, empty, background-refetch, and stale data states. Prefer framework adapters from TanStack Query and avoid storing server data in global client state.',
+].join(' ')
 
-const codeExamples: Partial<Record<Framework, { lang: string; code: string }>> =
+const heroProof = [
   {
-    react: {
-      lang: 'tsx',
-      code: `import { useQuery } from '@tanstack/react-query'
-
-function Todos() {
-  const { data, isPending, error } = useQuery({
-    queryKey: ['todos'],
-    queryFn: () => fetch('/api/todos').then(r => r.json()),
-  })
+    label: 'Server-state cache',
+    value: 'freshness, retries, gc, dedupe',
+  },
+  {
+    label: 'Mutation workflow',
+    value: 'optimistic UI, rollback, invalidate',
+  },
+  {
+    label: 'Framework adapters',
+    value: 'React, Vue, Solid, Svelte, Angular, Lit',
+  },
+]
 
-  if (isPending) return <span>Loading...</span>
-  if (error) return <span>Oops!</span>
+type QueryHeroIssue = {
+  id: string
+  observers: number
+  priority: number
+  title: string
+}
 
-  return <ul>{data.map(t => <li key={t.id}>{t.title}</li>)}</ul>
+type QueryHeroSnapshot = {
+  fetchedAt: number
+  revision: number
+  rows: Array<QueryHeroIssue>
 }
 
-export default Todos`,
-    },
-    solid: {
-      lang: 'tsx',
-      code: `import { createQuery } from '@tanstack/solid-query'
+type QueryHeroMutationContext = {
+  previous?: QueryHeroSnapshot
+}
 
-function Todos() {
-  const todos = createQuery(() => ({
-    queryKey: ['todos'],
-    queryFn: () => fetch('/api/todos').then(r => r.json()),
-  }))
+const queryHeroInitialRows: Array<QueryHeroIssue> = [
+  {
+    id: 'router-cache',
+    observers: 3,
+    priority: 98,
+    title: 'Router dashboard',
+  },
+  {
+    id: 'project-detail',
+    observers: 2,
+    priority: 91,
+    title: 'Project detail',
+  },
+  {
+    id: 'offline-queue',
+    observers: 1,
+    priority: 84,
+    title: 'Offline mutation queue',
+  },
+]
 
-  return <ul>{todos.data?.map((t) => <li>{t.title}</li>)}</ul>
+const queryHeroInitialSnapshot: QueryHeroSnapshot = {
+  fetchedAt: 0,
+  revision: 0,
+  rows: queryHeroInitialRows,
 }
 
-export default Todos`,
-    },
-    vue: {
-      lang: 'vue',
-      code: `<script setup lang="ts">
-import { useQuery } from '@tanstack/vue-query'
-
-const { data, isPending, error } = useQuery({
-  queryKey: ['todos'],
-  queryFn: () => fetch('/api/todos').then(r => r.json()),
-})
-</script>
-
-<template>
-  <ul v-if="data">
-    <li v-for="t in data" :key="t.id">{{ t.title }}</li>
-  </ul>
-  <span v-else-if="isPending">Loading...</span>
-  <span v-else>Oops!</span>
-</template>`,
-    },
-    svelte: {
-      lang: 'svelte',
-      code: `<script lang="ts">
-  import { createQuery } from '@tanstack/svelte-query'
-  const todos = createQuery({
-    queryKey: ['todos'],
-    queryFn: () => fetch('/api/todos').then(r => r.json()),
-  })
-</script>
-
-{#if $todos.isPending}
-  Loading...
-{:else if $todos.error}
-  Oops!
-{:else}
-  <ul>
-    {#each $todos.data as t}
-      <li>{t.title}</li>
-    {/each}
-  </ul>
-{/if}`,
-    },
-    angular: {
-      lang: 'ts',
-      code: `import { Component } from '@angular/core'
-import { injectQuery } from '@tanstack/angular-query-experimental'
-
-@Component({
-  selector: 'todos',
-  standalone: true,
-  template: \`
-    <ng-container *ngIf="todos.isPending()">
-      Loading...
-    </ng-container>
-    <ul *ngIf="todos.data() as data">
-      <li *ngFor="let t of data">
-        {{ t.title }}
-      </li>
-    </ul>
-  \`,
-})
-export class TodosComponent {
-  todos = injectQuery(() => ({
-    queryKey: ['todos'],
-    queryFn: () => fetch('/api/todos').then(r => r.json()),
-  }))
-}
-`,
-    },
-  }
+const queryHeroMutationTitles = [
+  'Optimistic table edit',
+  'Search filter sync',
+  'Background retry lane',
+  'Prefetched route data',
+]
+
+const lifecycleSteps = [
+  {
+    label: 'Fetch',
+    body: 'A query function resolves data or throws. Query owns retry, cancellation, and deduping.',
+  },
+  {
+    label: 'Share',
+    body: 'Every observer reads the same cache entry instead of refetching from every component.',
+  },
+  {
+    label: 'Revalidate',
+    body: 'Stale data can stay on screen while a background refetch quietly refreshes it.',
+  },
+  {
+    label: 'Collect',
+    body: 'Unused data sticks around long enough to feel instant, then garbage collection cleans up.',
+  },
+]
+
+const featureCards = [
+  {
+    title: 'Important defaults do the boring work.',
+    body: 'Caching, request dedupe, retries, background refetching, window-focus updates, and garbage collection are already wired for the shape of real apps.',
+    icon: <Sparkles size={18} />,
+  },
+  {
+    title: 'Query keys become the cache contract.',
+    body: 'Keys describe the resource, inputs, filters, and scope so reads, writes, invalidation, prefetching, and devtools all speak the same language.',
+    icon: <GitBranch size={18} />,
+  },
+  {
+    title: 'Mutations have a real lifecycle.',
+    body: 'Handle pending UI, optimistic writes, invalidation, rollback, and follow-up refetches without inventing an ad hoc client-state machine.',
+    icon: <RefreshCcw size={18} />,
+  },
+  {
+    title: 'Devtools make the cache visible.',
+    body: 'See query keys, observers, freshness, retries, errors, mutations, and cache contents while the app is actually running.',
+    icon: <Eye size={18} />,
+  },
+]
+
+const mutationSteps = [
+  {
+    label: 'optimistic write',
+    code: "setQueryData(['todos'], next)",
+  },
+  {
+    label: 'server mutation',
+    code: 'await saveTodo(todo)',
+  },
+  {
+    label: 'targeted refresh',
+    code: "invalidateQueries({ queryKey: ['todos'] })",
+  },
+  {
+    label: 'rollback path',
+    code: 'onError: restoreSnapshot',
+  },
+]
+
+const frameworkAdapters = [
+  'React',
+  'Vue',
+  'Solid',
+  'Svelte',
+  'Angular',
+  'Preact',
+  'Lit',
+]
 
 export default function QueryLanding() {
   const { version } = useParams({ strict: false })
-  const branch = getBranch(queryProject, version)
+  const resolvedVersion = version ?? library.latestVersion
 
   return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={queryProject}
-        cta={{
-          linkProps: {
-            to: '/$libraryId/$version/docs',
-            params: { libraryId: library.id, version },
-          },
-          label: 'Read the Docs',
-          className: 'bg-red-500 border-red-500 hover:bg-red-600 text-white',
-        }}
-      />
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#fff8f3] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-red-950/10 bg-[#fff3ec] dark:border-red-300/10 dark:bg-[#130806]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.86fr_1.14fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<DatabaseZap size={14} />}>
+              Server-state manager
+            </SectionKicker>
 
-      <LibraryStatsSection library={library} />
+            <h1 className="mt-4 text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+              <LibraryWordmark library={library} />
+            </h1>
 
-      <CodeExampleCard
-        frameworks={queryProject.frameworks}
-        codeByFramework={codeExamples}
-      />
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              Stop syncing server data by hand.
+            </p>
 
-      <LibraryFeatureHighlights
-        featureHighlights={queryProject.featureHighlights}
-      />
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Query gives async data a cache, a lifecycle, and a set of
+              declarative APIs for fetching, sharing, refetching, mutating, and
+              observing server state across TypeScript applications.
+            </p>
 
-      <LibraryTestimonials testimonials={queryProject.testimonials} />
-
-      <FeatureGridSection
-        title="No dependencies. All the Features."
-        description="With zero dependencies, TanStack Query is extremely lean given the dense feature set it provides. From weekend hobbies all the way to enterprise e-commerce systems (Yes, I'm lookin' at you Walmart!), TanStack Query is the battle-hardened tool to help you succeed at the speed of your creativity."
-        items={[
-          'Backend agnostic',
-          'Dedicated Devtools',
-          'Auto Caching',
-          'Auto Refetching',
-          'Window Focus Refetching',
-          'Polling/Realtime Queries',
-          'Parallel Queries',
-          'Dependent Queries',
-          'Mutations API',
-          'Automatic Garbage Collection',
-          'Paginated/Cursor Queries',
-          'Load-More/Infinite Scroll Queries',
-          'Scroll Recovery',
-          'Request Cancellation',
-          'Suspense Ready!',
-          'Render-as-you-fetch',
-          'Prefetching',
-          'Variable-length Parallel Queries',
-          'Offline Support',
-          'SSR Support',
-          'Data Selectors',
-        ]}
-      />
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
+
+            <p className="mt-4 max-w-xl border-l-2 border-red-500 pl-3 text-sm font-black text-red-800 dark:text-red-200">
+              The server-state standard for modern frontend apps.
+            </p>
+
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <QueryLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={queryAgentPrompt}
+                label="Copy Query Prompt"
+              />
+            </div>
 
-      <div className="flex flex-col gap-4">
-        <div className="px-4 sm:px-6 lg:px-8 mx-auto max-w-3xl">
-          <h3 className="text-3xl font-bold">Less code, fewer edge cases.</h3>
-          <p className="my-4 text-xl leading-7 text-gray-600">
-            Instead of writing reducers, caching logic, timers, retry logic,
-            complex async/await scripting (I could keep going...), you literally
-            write a tiny fraction of the code you normally would. You will be
-            surprised at how little code you're writing or how much code you're
-            deleting when you use TanStack Query. Try it out with one of the
-            examples below!
-          </p>
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+            <LandingEcosystemProof />
+          </div>
+
+          <QueryCachePanel />
         </div>
-      </div>
+      </section>
 
-      <StackBlitzSection
-        project={queryProject}
-        branch={branch}
-        examplePath="examples/${framework}/simple"
-        title={(framework) => `tannerlinsley/${framework}-query: basic`}
-      />
+      <section className="border-b border-red-950/10 bg-[#fff7ed] dark:border-red-300/10 dark:bg-[#170b07]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Activity size={14} />}>
+              Why Query
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Server state is not the same problem as client state.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Server data is remote, shared, cached, refetched, invalidated, and
+              sometimes stale on purpose. Query handles that lifecycle directly
+              instead of making you recreate it with reducers, effects, and
+              synchronized stores.
+            </p>
+          </div>
 
-      <MaintainersSection libraryId="query" />
-      <PartnersSection libraryId="query" />
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
+        </div>
+      </section>
 
-      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
-        <LibraryShowcases libraryId="query" libraryName="TanStack Query" />
-      </div>
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.08fr_0.92fr] lg:items-center xl:max-w-[92rem]">
+          <CacheLifecyclePanel />
+          <div>
+            <SectionKicker icon={<RotateCcw size={14} />}>
+              Cache lifecycle
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Keep data useful while the network catches up.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Query lets stale data remain valuable. Screens can render
+              instantly from cache, refetch in the background, keep previous
+              results during pagination, and recover when the user comes back
+              online.
+            </p>
+          </div>
+        </div>
+      </section>
 
-      <div className="px-4">
-        <QueryGGBanner />
-      </div>
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.82fr_1.18fr] lg:items-start xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Network size={14} />}>
+              Mutations
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Writes update the world, then the cache.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Query keeps mutation work explicit: optimistic updates, pending
+              states, error recovery, invalidation, and background
+              reconciliation are first-class instead of scattered through
+              components.
+            </p>
+          </div>
 
-      <LazySponsorSection />
-      <LandingPageGad />
+          <MutationPanel />
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<InfinityIcon size={14} />}>
+              Framework adapters
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              One server-state model, every UI runtime.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The core cache model travels across frameworks. Teams can keep the
+              same query keys, invalidation strategy, mutation semantics, and
+              mental model whether the UI is React, Vue, Solid, Svelte, Angular,
+              Preact, or Lit.
+            </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              {frameworkAdapters.map((framework) => (
+                <span
+                  key={framework}
+                  className="rounded-md border border-red-200 bg-red-50 px-3 py-1.5 text-sm font-bold text-red-800 dark:border-red-900 dark:bg-red-950/40 dark:text-red-200"
+                >
+                  {framework}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div className="min-w-0 max-w-full overflow-hidden">
+            <LandingCodeExampleCard example={queryCodeExample} />
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fff8f3] py-12 dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<Flame size={14} />}>
+              Field notes
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Query is the default answer for async server state.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The original copy was right: Query saves code by deleting whole
+              categories of hand-written fetching, loading, retry, cache, and
+              mutation logic.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-8">
+          <LibraryTestimonials testimonials={queryProject.testimonials} />
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Maintainers, education, sponsors, and partners keep Query moving.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Query is built in public and taught in public. The maintainers,
+              partner integrations, Query.gg, and GitHub sponsors all stay close
+              to the product story.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="query" />
+
+          <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+            <QueryGGBanner />
+          </div>
 
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
+
+      <LandingPageGad />
       <BottomCTA
         linkProps={{
           to: '/$libraryId/$version/docs',
-          params: { libraryId: library.id, version },
+          params: { libraryId: library.id, version: resolvedVersion },
         }}
-        label="Read the Docs!"
-        className="bg-red-500 border-red-500 hover:bg-red-600 text-white"
+        label="Get Started!"
+        className="border-red-500 bg-red-500 text-white hover:bg-red-600"
       />
       <Footer />
-    </LibraryPageContainer>
+    </div>
+  )
+}
+
+function QueryCachePanel() {
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const queryClient = useQueryClient()
+  const serverRowsRef = React.useRef(queryHeroInitialRows)
+  const serverRevisionRef = React.useRef(0)
+  const mutationSequenceRef = React.useRef(0)
+  const [isLive, setIsLive] = React.useState(false)
+  const projectsQuery = useQuery({
+    initialData: queryHeroInitialSnapshot,
+    initialDataUpdatedAt: 0,
+    queryFn: async (): Promise<QueryHeroSnapshot> => {
+      await waitForQueryHero(620)
+
+      return {
+        fetchedAt: Date.now(),
+        revision: serverRevisionRef.current,
+        rows: serverRowsRef.current,
+      }
+    },
+    queryKey: ['landing-query-hero'],
+    refetchInterval: isLive ? 4200 : false,
+    staleTime: 3200,
+  })
+  const addIssueMutation = useMutation<
+    QueryHeroIssue,
+    Error,
+    QueryHeroIssue,
+    QueryHeroMutationContext
+  >({
+    mutationFn: async (issue: QueryHeroIssue) => {
+      await waitForQueryHero(720)
+      serverRevisionRef.current += 1
+      serverRowsRef.current = [
+        issue,
+        ...serverRowsRef.current.filter((row) => row.id !== issue.id),
+      ].slice(0, 5)
+
+      return issue
+    },
+    onError: (_error, _issue, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData<QueryHeroSnapshot>(
+          ['landing-query-hero'],
+          context.previous,
+        )
+      }
+    },
+    onMutate: async (issue) => {
+      await queryClient.cancelQueries({ queryKey: ['landing-query-hero'] })
+      const previous = queryClient.getQueryData<QueryHeroSnapshot>([
+        'landing-query-hero',
+      ])
+
+      queryClient.setQueryData<QueryHeroSnapshot>(
+        ['landing-query-hero'],
+        (current) => ({
+          fetchedAt: current?.fetchedAt ?? 0,
+          revision: current?.revision ?? serverRevisionRef.current,
+          rows: [
+            issue,
+            ...(current?.rows ?? queryHeroInitialRows).filter(
+              (row) => row.id !== issue.id,
+            ),
+          ].slice(0, 5),
+        }),
+      )
+
+      return { previous }
+    },
+    onSettled: () =>
+      queryClient.invalidateQueries({ queryKey: ['landing-query-hero'] }),
+  })
+  const cacheState = projectsQuery.isFetching
+    ? 'fetching'
+    : projectsQuery.isStale
+      ? 'stale'
+      : 'fresh'
+  const fetchedLabel =
+    projectsQuery.data.fetchedAt > 0
+      ? `${Math.max(0, Math.round((Date.now() - projectsQuery.data.fetchedAt) / 1000))}s ago`
+      : 'primed'
+
+  React.useEffect(() => {
+    if (prefersReducedMotion === false) {
+      setIsLive(true)
+    }
+  }, [prefersReducedMotion])
+
+  const addIssue = () => {
+    const nextSequence = mutationSequenceRef.current + 1
+    const nextTitle =
+      queryHeroMutationTitles[
+        (nextSequence - 1) % queryHeroMutationTitles.length
+      ]
+
+    mutationSequenceRef.current = nextSequence
+    addIssueMutation.mutate({
+      id: `optimistic-${nextSequence}`,
+      observers: (nextSequence % 3) + 1,
+      priority: 72 + ((nextSequence * 7) % 24),
+      title: nextTitle,
+    })
+  }
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-red-200 bg-white p-4 shadow-sm shadow-red-950/5 dark:border-red-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          query client
+        </span>
+      </div>
+
+      <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap gap-2">
+          <span
+            className={
+              cacheState === 'fresh'
+                ? 'rounded-md bg-emerald-100 px-3 py-2 text-xs font-black uppercase text-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-200'
+                : cacheState === 'fetching'
+                  ? 'rounded-md bg-amber-100 px-3 py-2 text-xs font-black uppercase text-amber-800 dark:bg-amber-950/50 dark:text-amber-200'
+                  : 'rounded-md bg-red-100 px-3 py-2 text-xs font-black uppercase text-red-800 dark:bg-red-950/50 dark:text-red-200'
+            }
+          >
+            {cacheState}
+          </span>
+          <span className="rounded-md border border-zinc-200 px-3 py-2 text-xs font-black uppercase text-zinc-500 dark:border-zinc-800 dark:text-zinc-400">
+            rev {projectsQuery.data.revision} / {fetchedLabel}
+          </span>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <button
+            aria-pressed={isLive}
+            className={
+              isLive
+                ? 'rounded-md border border-red-500 bg-red-500 px-3 py-2 text-xs font-black text-white'
+                : 'rounded-md border border-zinc-200 bg-white px-3 py-2 text-xs font-black text-zinc-700 transition-colors hover:border-red-300 hover:text-red-800 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300 dark:hover:border-red-700 dark:hover:text-red-200'
+            }
+            type="button"
+            onClick={() => setIsLive((current) => !current)}
+          >
+            Live {isLive ? 'on' : 'off'}
+          </button>
+          <button
+            className="inline-flex items-center gap-2 rounded-md border border-zinc-200 bg-white px-3 py-2 text-xs font-black text-zinc-700 transition-colors hover:border-red-300 hover:text-red-800 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300 dark:hover:border-red-700 dark:hover:text-red-200"
+            type="button"
+            onClick={() => projectsQuery.refetch()}
+          >
+            <RefreshCcw
+              aria-hidden="true"
+              className={projectsQuery.isFetching ? 'animate-spin' : ''}
+              size={14}
+            />
+            Refetch
+          </button>
+          <button
+            className="inline-flex items-center gap-2 rounded-md border border-red-500 bg-red-500 px-3 py-2 text-xs font-black text-white transition-colors hover:bg-red-600 disabled:cursor-wait disabled:opacity-70"
+            disabled={addIssueMutation.isPending}
+            type="button"
+            onClick={addIssue}
+          >
+            <Plus aria-hidden="true" size={14} />
+            Add issue
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-4 grid gap-3 lg:grid-cols-[1.05fr_0.95fr]">
+        <div className="space-y-2">
+          {projectsQuery.data.rows.map((row) => (
+            <div
+              key={row.id}
+              className="rounded-lg border border-zinc-100 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-900"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <p className="truncate font-mono text-sm font-black text-zinc-950 dark:text-white">
+                    ['issues', '{row.id}']
+                  </p>
+                  <p className="mt-1 text-xs leading-5 text-zinc-600 dark:text-zinc-400">
+                    {row.title}
+                  </p>
+                </div>
+                <span className="shrink-0 rounded-md bg-red-100 px-2 py-1 text-[0.65rem] font-black uppercase text-red-800 dark:bg-red-950 dark:text-red-200">
+                  p{row.priority}
+                </span>
+              </div>
+              <div className="mt-3 flex items-center gap-1.5">
+                {Array.from({ length: row.observers }).map((_, index) => (
+                  <span
+                    key={index}
+                    className="h-2 flex-1 rounded-full bg-red-400/80"
+                  />
+                ))}
+                <span className="ml-2 text-[0.65rem] font-black uppercase text-zinc-500 dark:text-zinc-400">
+                  {row.observers} observers
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="grid content-between gap-3 rounded-lg bg-amber-50 p-4 text-amber-950 dark:bg-amber-950/25 dark:text-amber-100">
+          <div>
+            <p className="text-sm font-black">useQuery()</p>
+            <p className="mt-2 text-xs leading-5 text-amber-950/75 dark:text-amber-100/75">
+              Components declare the data they need. The cache coordinates
+              fetches, subscribers, freshness, and background updates.
+            </p>
+          </div>
+
+          <div className="space-y-2 text-xs font-bold">
+            {[
+              `status: ${projectsQuery.status}`,
+              `isFetching: ${projectsQuery.isFetching}`,
+              'staleTime: 3_200',
+              `mutation: ${addIssueMutation.status}`,
+            ].map((item) => (
+              <div
+                key={item}
+                className="rounded-md bg-white/80 px-3 py-2 font-mono dark:bg-zinc-950/70"
+              >
+                {item}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function waitForQueryHero(ms: number) {
+  return new Promise<void>((resolve) => {
+    setTimeout(resolve, ms)
+  })
+}
+
+function CacheLifecyclePanel() {
+  return (
+    <div className="min-w-0 rounded-lg border border-red-200 bg-white p-4 dark:border-red-900 dark:bg-zinc-950">
+      <div className="grid gap-3 sm:grid-cols-4">
+        {lifecycleSteps.map((step, index) => (
+          <div
+            key={step.label}
+            className="rounded-lg border border-zinc-200 bg-[#fffaf4] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-red-100 text-sm font-black text-red-800 dark:bg-red-950 dark:text-red-200">
+              {index + 1}
+            </span>
+            <h3 className="mt-4 text-lg font-black leading-tight">
+              {step.label}
+            </h3>
+            <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+              {step.body}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 rounded-lg bg-zinc-950 p-4 text-sm text-red-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          <span className="text-red-300">queryKey</span>: ['projects', filters]
+          <br />
+          <span className="text-amber-300">queryFn</span>: fetchProjects
+          <br />
+          staleTime: 30_000
+          <br />
+          gcTime: 300_000
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function MutationPanel() {
+  return (
+    <div className="min-w-0 rounded-lg border border-red-200 bg-white p-4 dark:border-red-900 dark:bg-zinc-950">
+      <div className="grid gap-3 md:grid-cols-2">
+        {mutationSteps.map((step, index) => (
+          <div
+            key={step.label}
+            className="rounded-lg border border-zinc-200 bg-[#fffaf4] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <div className="flex items-center justify-between gap-3">
+              <span className="rounded-md bg-red-100 px-2 py-1 text-xs font-black text-red-800 dark:bg-red-950 dark:text-red-200">
+                {index + 1}
+              </span>
+              <span className="text-[0.65rem] font-black uppercase text-zinc-500 dark:text-zinc-400">
+                {step.label}
+              </span>
+            </div>
+            <p className="mt-4 break-words font-mono text-sm font-black leading-6 text-zinc-950 dark:text-white">
+              {step.code}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 rounded-lg bg-red-50 p-4 text-sm font-bold leading-6 text-red-950 dark:bg-red-950/30 dark:text-red-100">
+        Result: the UI can feel instant, the server remains the source of truth,
+        and the cache knows exactly what changed.
+      </div>
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-200">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-red-700 dark:text-red-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-red-500 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function QueryLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
   )
 }
diff --git a/src/components/landing/RangerLanding.tsx b/src/components/landing/RangerLanding.tsx
index b6112c9fc..6ad9a427d 100644
--- a/src/components/landing/RangerLanding.tsx
+++ b/src/components/landing/RangerLanding.tsx
@@ -1,53 +1,214 @@
-import { useParams } from '@tanstack/react-router'
-import { rangerProject } from '~/libraries/ranger'
-import { Footer } from '~/components/Footer'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  BookOpen,
+  Gauge,
+  GitBranch,
+  MoveHorizontal,
+  Ruler,
+  SlidersHorizontal,
+  Sparkles,
+  StretchHorizontal,
+} from 'lucide-react'
+
 import { BottomCTA } from '~/components/BottomCTA'
-import { LibraryHero } from '~/components/LibraryHero'
-import { getBranch, getLibrary } from '~/libraries'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
 import LandingPageGad from '~/components/LandingPageGad'
-import { PartnersSection } from '~/components/PartnersSection'
-import { MaintainersSection } from '~/components/MaintainersSection'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { LibraryStatsSection } from '~/components/LibraryStatsSection'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
 import { StackBlitzSection } from '~/components/StackBlitzSection'
+import { getBranch, getLibrary } from '~/libraries'
+import { rangerProject } from '~/libraries/ranger'
 
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
 const library = getLibrary('ranger')
+const rangerAgentPrompt = [
+  'Build a custom range or multi-range slider with TanStack Ranger.',
+  'Keep the slider headless: own the markup, track, ticks, labels, thumbs, formatting, and accessibility while using Ranger for range math and thumb interaction state.',
+  'Show min/max, steps, multiple thumbs, constrained movement, and product-specific styling.',
+].join(' ')
+
+const heroProof = [
+  {
+    label: 'Headless track',
+    value: 'bring your own UI and semantics',
+  },
+  {
+    label: 'Multi-thumb',
+    value: 'ranges, bounds, steps, constraints',
+  },
+  {
+    label: 'React hooks',
+    value: 'range math without a slider skin',
+  },
+]
+
+const featureCards = [
+  {
+    title: 'The slider is yours.',
+    body: 'Ranger gives interaction state and range math without rendering the track, thumbs, labels, or layout for you.',
+    icon: <SlidersHorizontal size={18} />,
+  },
+  {
+    title: 'Multi-range without bespoke math.',
+    body: 'Build price filters, timelines, editors, split ranges, or multi-thumb controls with bounds and steps handled predictably.',
+    icon: <MoveHorizontal size={18} />,
+  },
+  {
+    title: 'Ticks and labels can be product-specific.',
+    body: 'Display percentages, dates, currency, logarithmic labels, marks, or custom annotations from the same headless primitives.',
+    icon: <Ruler size={18} />,
+  },
+  {
+    title: 'Small utility, high inversion of control.',
+    body: 'Ranger is useful precisely because it does not become your design system. It stays under the component you actually need.',
+    icon: <Gauge size={18} />,
+  },
+]
+
+const rangeSteps = [
+  {
+    label: 'Values',
+    body: 'Start with one value, two bounds, or a set of range handles.',
+  },
+  {
+    label: 'Track',
+    body: 'Map percentages and segments into your own track UI.',
+  },
+  {
+    label: 'Thumbs',
+    body: 'Render handles with labels, tooltips, constraints, and focus state.',
+  },
+  {
+    label: 'Commit',
+    body: 'Send final values into filters, charts, editors, or forms.',
+  },
+]
 
 export default function RangerLanding() {
   const { version } = useParams({ strict: false })
-  const branch = getBranch(rangerProject, version)
+  const resolvedVersion = version ?? library.latestVersion
+  const branch = getBranch(rangerProject, resolvedVersion)
 
   return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={rangerProject}
-        cta={{
-          linkProps: {
-            to: '/$libraryId/$version/docs',
-            params: { libraryId: library.id, version },
-          },
-          label: 'Get Started',
-          className:
-            'bg-slate-500 border-slate-500 hover:bg-slate-600 text-white',
-        }}
-      />
+    <div className="w-full min-w-0 overflow-x-hidden bg-zinc-100 text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-black">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<StretchHorizontal size={14} />}>
+              Headless range controls
+            </SectionKicker>
 
-      <LibraryStatsSection library={library} />
+            <h1 className="mt-4 text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+              <LibraryWordmark library={library} />
+            </h1>
 
-      <LibraryFeatureHighlights
-        featureHighlights={rangerProject.featureHighlights}
-      />
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              Build the slider your product actually needs.
+            </p>
 
-      <div className="flex flex-col gap-4">
-        <div className="px-4 sm:px-6 lg:px-8 mx-auto container max-w-3xl">
-          <h3 className="text-3xl font-bold">Take it for a spin!</h3>
-          <p className="my-4 text-xl leading-7 text-gray-600">
-            Let's see it in action!
-          </p>
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Ranger provides headless primitives for range and multi-range
+              sliders, leaving the track, thumbs, labels, ticks, and product UI
+              completely under your control.
+            </p>
+
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
+
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <RangerLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={rangerAgentPrompt}
+                label="Copy Ranger Prompt"
+              />
+            </div>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+          </div>
+
+          <RangerLabPanel />
         </div>
-      </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Sparkles size={14} />}>
+              Why Ranger
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Range controls are small until the product gets specific.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Once a slider needs multiple thumbs, custom labels, controlled
+              values, meaningful ticks, and a design system skin, a prebuilt UI
+              becomes the wrong abstraction. Ranger keeps the hard math below
+              your component.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <StepPanel />
+          <div>
+            <SectionKicker icon={<GitBranch size={14} />}>
+              Slider lifecycle
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Values in, product-specific control out.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Ranger helps translate values into interactive geometry. Your app
+              decides what those values mean and how the user should see them.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<SlidersHorizontal size={14} />}>
+              Example
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Take the range math for a spin.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The example stays simple on purpose: hooks provide the behavior,
+              and the component owns the rendered slider.
+            </p>
+          </div>
+        </div>
+      </section>
 
       <StackBlitzSection
         project={rangerProject}
@@ -56,20 +217,236 @@ export default function RangerLanding() {
         title="tannerlinsley/react-ranger: basic"
       />
 
-      <MaintainersSection libraryId="ranger" />
-      <PartnersSection libraryId="ranger" />
-      <LazySponsorSection />
-      <LandingPageGad />
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Ranger stays small so your component can be specific.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, examples, partners, and GitHub sponsors keep the
+              headless range primitive useful without turning it into a UI kit.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="ranger" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
 
+      <LandingPageGad />
       <BottomCTA
         linkProps={{
           to: '/$libraryId/$version/docs',
-          params: { libraryId: library.id, version },
+          params: { libraryId: library.id, version: resolvedVersion },
         }}
         label="Get Started!"
-        className="bg-slate-500 border-slate-500 hover:bg-slate-600 text-white"
+        className="border-zinc-950 bg-zinc-950 text-white hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200"
       />
       <Footer />
-    </LibraryPageContainer>
+    </div>
+  )
+}
+
+function RangerLabPanel() {
+  const [values, setValues] = React.useState<Array<number>>([120, 310, 640])
+  const sortedValues = [...values].sort((a, b) => a - b)
+  const updateValue = (index: number, nextValue: number) => {
+    setValues((current) => {
+      const minValue = index > 0 ? current[index - 1] + 10 : 0
+      const maxValue =
+        index < current.length - 1 ? current[index + 1] - 10 : 1000
+      const nextValues = current.map((value, valueIndex) =>
+        valueIndex === index
+          ? Math.min(Math.max(nextValue, minValue), maxValue)
+          : value,
+      )
+
+      return nextValues
+    })
+  }
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-zinc-300 bg-white p-4 shadow-sm shadow-zinc-950/5 dark:border-zinc-800 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          multi-range slider
+        </span>
+      </div>
+
+      <div className="mt-8 px-2">
+        <div className="relative h-4 rounded-full bg-zinc-200 dark:bg-zinc-800">
+          <div
+            className="absolute top-0 h-4 rounded-full bg-zinc-950 dark:bg-white"
+            style={{
+              left: `${sortedValues[0] / 10}%`,
+              right: `${100 - sortedValues[sortedValues.length - 1] / 10}%`,
+            }}
+          />
+          {values.map((value, index) => (
+            <div
+              key={index}
+              className="absolute top-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 rounded-full border-4 border-white bg-zinc-950 shadow-md dark:border-zinc-950 dark:bg-white"
+              style={{ left: `${value / 10}%` }}
+            >
+              <span className="absolute left-1/2 top-10 -translate-x-1/2 whitespace-nowrap rounded-md bg-zinc-950 px-2 py-1 text-xs font-black text-white dark:bg-white dark:text-zinc-950">
+                ${value}
+              </span>
+            </div>
+          ))}
+        </div>
+        <div className="mt-16 grid grid-cols-5 text-center text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          {['0', '250', '500', '750', '1000'].map((tick) => (
+            <span key={tick}>{tick}</span>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-6 grid gap-2">
+        {values.map((value, index) => (
+          <label key={index} className="grid gap-1">
+            <span className="text-[0.65rem] font-black uppercase text-zinc-500 dark:text-zinc-400">
+              Handle {index + 1}
+            </span>
+            <input
+              className="accent-zinc-950 dark:accent-white"
+              max={1000}
+              min={0}
+              step={10}
+              type="range"
+              value={value}
+              onChange={(event) =>
+                updateValue(index, event.currentTarget.valueAsNumber)
+              }
+            />
+          </label>
+        ))}
+      </div>
+
+      <div className="mt-6 rounded-lg bg-zinc-950 p-4 text-sm text-zinc-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          useRanger({'{'} getRangerElement: () =&gt; rangerRef.current,
+          <br />
+          &nbsp;&nbsp;min: 0, max: 1000,
+          <br />
+          &nbsp;&nbsp;stepSize: 10, values: [{values.join(', ')}],
+          <br />
+          &nbsp;&nbsp;onChange: instance =&gt; setValues(instance.sortedValues){' '}
+          {'}'})
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function StepPanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {rangeSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-zinc-950 text-sm font-black text-white dark:bg-white dark:text-zinc-950">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-zinc-950 text-white dark:bg-white dark:text-zinc-950">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-zinc-700 dark:text-zinc-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-zinc-950 pl-3 dark:border-white">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function RangerLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
   )
 }
diff --git a/src/components/landing/RouterLanding.tsx b/src/components/landing/RouterLanding.tsx
index f179c9554..c8d61c6b6 100644
--- a/src/components/landing/RouterLanding.tsx
+++ b/src/components/landing/RouterLanding.tsx
@@ -1,154 +1,657 @@
-import { useParams } from '@tanstack/react-router'
-import { routerProject } from '~/libraries/router'
-import { Footer } from '~/components/Footer'
-import { LibraryHero } from '~/components/LibraryHero'
-import { FeatureGrid } from '~/components/FeatureGrid'
-import { PartnersSection } from '~/components/PartnersSection'
-import { MaintainersSection } from '~/components/MaintainersSection'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  BookOpen,
+  Boxes,
+  DatabaseZap,
+  Link as LinkIcon,
+  ListTree,
+  MousePointerClick,
+  Route,
+  Search,
+  Sparkles,
+} from 'lucide-react'
+
 import { BottomCTA } from '~/components/BottomCTA'
-import { Framework, getBranch, getLibrary } from '~/libraries'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
-import LandingPageGad from '~/components/LandingPageGad'
-import { LibraryTestimonials } from '~/components/LibraryTestimonials'
-import { LibraryShowcases } from '~/components/ShowcaseSection'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { LibraryStatsSection } from '~/components/LibraryStatsSection'
-import { CodeExampleCard } from '~/components/CodeExampleCard'
-import { StackBlitzSection } from '~/components/StackBlitzSection'
+import { ApplicationStarter } from '~/components/ApplicationStarter'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
+import { getLibrary } from '~/libraries'
+import {
+  getApplicationStarterSuggestions,
+  resolveApplicationStarterDeterministically,
+} from '~/utils/application-starter'
 
+import { LandingEcosystemProof } from '~/components/landing/LandingEcosystemProof'
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
 const library = getLibrary('router')
+const routerBlankStarterInput = getRouterBlankStarterInput()
 
-const codeExamples: Partial<Record<Framework, { lang: string; code: string }>> =
-  {
-    react: {
-      lang: 'tsx',
-      code: `import { createRootRoute, createRoute, createRouter, RouterProvider } from '@tanstack/react-router'
-
-const rootRoute = createRootRoute()
-const indexRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/',
-  component: () => <div>Hello World</div>,
-})
-const routeTree = rootRoute.addChildren([indexRoute])
-const router = createRouter({ routeTree })
-
-export default function App() {
-  return <RouterProvider router={router} />
-}`,
-    },
-    solid: {
-      lang: 'tsx',
-      code: `import { createRootRoute, createRoute, createRouter, RouterProvider } from '@tanstack/solid-router'
-
-const rootRoute = createRootRoute()
-const indexRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/',
-  component: () => <div>Hello World</div>,
-})
-const routeTree = rootRoute.addChildren([indexRoute])
-const router = createRouter({ routeTree })
-
-export default function App() {
-  return <RouterProvider router={router} />
-}`,
-    },
-  }
+let cachedRouterAgentPrompt: string | null = null
+
+const routeFiles = [
+  {
+    file: 'routes/__root.tsx',
+    label: 'app shell',
+    detail: 'providers, error boundary, layout',
+  },
+  {
+    file: 'routes/_app.tsx',
+    label: 'layout route',
+    detail: 'authenticated product frame',
+  },
+  {
+    file: 'routes/_app.invoices.$id.tsx',
+    label: 'typed params',
+    detail: 'id, loader data, links',
+  },
+  {
+    file: 'routes/_app.search.tsx',
+    label: 'URL state',
+    detail: 'validated filters and pagination',
+  },
+]
+
+const heroProof = [
+  {
+    label: 'Typed route map',
+    value: 'paths, params, links, navigate',
+  },
+  {
+    label: 'URL state APIs',
+    value: 'search schemas, parse, serialize',
+  },
+  {
+    label: 'Data before render',
+    value: 'loaders, cache, prefetch, pending UI',
+  },
+]
+
+const routeContractCards = [
+  {
+    eyebrow: 'links',
+    title: 'Navigation knows the route tree.',
+    body: 'Link, redirect, and navigate calls autocomplete against generated paths, params, and search contracts instead of stringly-typed guesses.',
+    icon: <LinkIcon size={18} />,
+  },
+  {
+    eyebrow: 'search',
+    title: 'Search params behave like state.',
+    body: 'Parse, validate, inherit, update, and share URL state with the same confidence you expect from a state manager.',
+    icon: <Search size={18} />,
+  },
+  {
+    eyebrow: 'loaders',
+    title: 'Data work starts at the route.',
+    body: 'Route loaders run in parallel, preload on intent, cache results, and hand typed data to the component before render.',
+    icon: <DatabaseZap size={18} />,
+  },
+  {
+    eyebrow: 'boundaries',
+    title: 'Every route owns its lifecycle.',
+    body: 'Pending UI, errors, not-found states, code splitting, and context can live where the product route actually changes.',
+    icon: <Boxes size={18} />,
+  },
+]
+
+type RouterSearchPreset = {
+  label: string
+  page: number
+  q: string
+  sort: 'stars' | 'recent'
+  tags: Array<string>
+}
+
+const searchExamples: Array<RouterSearchPreset> = [
+  {
+    label: 'Popular docs',
+    page: 2,
+    q: 'router',
+    sort: 'stars',
+    tags: ['react', 'solid'],
+  },
+  {
+    label: 'Recent guides',
+    page: 1,
+    q: 'loader',
+    sort: 'recent',
+    tags: ['data'],
+  },
+  {
+    label: 'Vue examples',
+    page: 3,
+    q: 'search',
+    sort: 'stars',
+    tags: ['vue', 'url-state'],
+  },
+]
+
+const loaderSteps = [
+  {
+    label: 'match',
+    body: 'The next route is known before the component renders.',
+  },
+  {
+    label: 'preload',
+    body: 'Hover, viewport, or intent can start route data early.',
+  },
+  {
+    label: 'cache',
+    body: 'Loaders reuse fresh results and avoid waterfalls by default.',
+  },
+  {
+    label: 'render',
+    body: 'Components receive typed loader data and pending state.',
+  },
+]
 
 export default function RouterLanding() {
   const { version } = useParams({ strict: false })
-  const branch = getBranch(routerProject, version)
+  const resolvedVersion = version ?? library.latestVersion
 
   return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={routerProject}
-        cta={{
-          linkProps: {
-            to: '/$libraryId/$version/docs',
-            params: { libraryId: library.id, version },
-          },
-          label: 'Get Started',
-          className:
-            'bg-emerald-500 border-emerald-500 hover:bg-emerald-600 text-white',
-        }}
-      />
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#f7fbf7] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-emerald-950/10 bg-[#f3fbf5] dark:border-emerald-300/10 dark:bg-[#04100b]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.88fr_1.12fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<Route size={14} />}>
+              Type-safe router
+            </SectionKicker>
 
-      <LibraryStatsSection library={library} />
+            <h1 className="mt-4 text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+              <LibraryWordmark library={library} />
+            </h1>
 
-      <CodeExampleCard
-        frameworks={routerProject.frameworks}
-        codeByFramework={codeExamples}
-      />
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              The route tree is the application contract.
+            </p>
 
-      <LibraryFeatureHighlights
-        featureHighlights={routerProject.featureHighlights}
-      />
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Router turns your routes into typed APIs for navigation, URL
+              state, loaders, pending states, and code splitting. Keep the app
+              client-first, then bring Start in when the same route tree needs a
+              server.
+            </p>
 
-      <LibraryTestimonials testimonials={routerProject.testimonials} />
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
 
-      <MaintainersSection libraryId="router" />
-      <PartnersSection libraryId="router" />
+            <p className="mt-4 max-w-xl border-l-2 border-emerald-500 pl-3 text-sm font-black text-emerald-800 dark:text-emerald-200">
+              The fastest-growing router in the JavaScript ecosystem.
+            </p>
 
-      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
-        <LibraryShowcases libraryId="router" libraryName="TanStack Router" />
-      </div>
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <RouterLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                getPrompt={getRouterAgentPrompt}
+                label="Copy Router Prompt"
+              />
+            </div>
 
-      <FeatureGrid
-        title="Feature Rich and Lightweight"
-        items={[
-          '100% Typesafe',
-          'Parallel Route Loaders',
-          '1st-class Search Param APIs',
-          'Nested/Layout Routes',
-          'Lightweight (12kb)',
-          'Suspense + Transitions',
-          'Strict Navigation',
-          'Auto-completed Paths',
-          'Search Param Schemas',
-          'Search Param Validation',
-          'Search Param Parsing + Serialization',
-          'Search Param Pre/Post Processing',
-          'Structural Sharing',
-          'Automatic Prefetching',
-          'Asynchronous Elements',
-          'Pending Elements',
-          'Error Boundaries',
-        ]}
-      />
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+            <LandingEcosystemProof />
+          </div>
+
+          <RouteMapPanel />
+        </div>
+      </section>
 
-      <div>
-        <div className="flex flex-col gap-4">
-          <div className="px-4 sm:px-6 lg:px-8 mx-auto max-w-3xl">
-            <h3 className="text-3xl font-bold">Take it for a spin!</h3>
-            <p className="my-4 text-xl leading-7 text-gray-600">
-              Create a route, pop in a Router, and start slingin' some code!
+      <section className="border-b border-emerald-950/10 bg-[#ecf9ef] dark:border-emerald-300/10 dark:bg-[#06150d]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<Sparkles size={14} />}>
+              Application builder
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Start with a Router app, then add only what the product asks for.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Describe the app shape and the builder will bias toward Router:
+              typed routes, search state, loaders, and a clean client-side
+              foundation. When the brief needs full-stack work, it can point you
+              toward Start instead of pretending every app is the same.
             </p>
           </div>
+
+          <div className="min-w-0 max-w-full overflow-hidden">
+            <ApplicationStarter
+              context="router"
+              forceRouterOnly
+              mode="compact"
+              primaryActionLabel="Copy Router Prompt"
+              secondaryActionLabel="Build Router app on Netlify"
+              title="Describe the app you want to route"
+              tone="emerald"
+            />
+          </div>
         </div>
+      </section>
 
-        <StackBlitzSection
-          project={routerProject}
-          branch={branch}
-          examplePath="examples/${framework}/kitchen-sink-file-based"
-          title="tannerlinsley/router: kitchen-sink"
-        />
-      </div>
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.7fr_1.3fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<ListTree size={14} />}>
+              Route contract
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              The file, the URL, and the component agree.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Router is not just a path matcher. It is a generated contract that
+              ties route params, search schemas, loader data, context, links,
+              and navigation to the same route tree.
+            </p>
+          </div>
 
-      <LazySponsorSection />
-      <LandingPageGad />
+          <div className="grid gap-4 md:grid-cols-2">
+            {routeContractCards.map((card) => (
+              <ContractCard key={card.title} {...card} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.1fr_0.9fr] lg:items-center xl:max-w-[92rem]">
+          <SearchStatePanel />
+          <div>
+            <SectionKicker icon={<Search size={14} />}>URL state</SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Search params without the URLSearchParams ceremony.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Filters, tabs, pagination, sort order, and shareable UI state can
+              live in the URL without becoming string parsing chores. Router
+              gives search params schemas, validation, inheritance, structural
+              sharing, and type-safe writes.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.76fr_1.24fr] lg:items-start xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<MousePointerClick size={14} />}>
+              Loaders and preload
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Navigation can start before the click lands.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Route loaders hoist async work out of components, run in parallel,
+              cache results, and preload when the user shows intent. The route
+              owns the data boundary, so pending and error UI stay close to the
+              product surface.
+            </p>
+          </div>
+
+          <LoaderPipeline />
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Router is the foundation many TanStack apps build on.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Router is built in public by the same community shaping Start,
+              Query, and the rest of the stack. Maintainers, examples, partners,
+              and sponsors stay part of the product story.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="router" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
 
       <BottomCTA
         linkProps={{
           to: '/$libraryId/$version/docs',
-          params: { libraryId: library.id, version },
+          params: { libraryId: library.id, version: resolvedVersion },
         }}
         label="Get Started!"
-        className="bg-emerald-500 border-emerald-500 hover:bg-emerald-600 text-white"
+        className="border-emerald-500 bg-emerald-500 text-white hover:bg-emerald-600"
       />
       <Footer />
-    </LibraryPageContainer>
+    </div>
   )
 }
+
+function RouteMapPanel() {
+  return (
+    <div className="min-w-0 w-full max-w-full overflow-hidden rounded-lg border border-emerald-200 bg-white p-4 shadow-sm shadow-emerald-950/5 dark:border-emerald-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          generated route map
+        </span>
+      </div>
+
+      <div className="mt-4 grid gap-3 lg:grid-cols-[1.08fr_0.92fr]">
+        <div className="space-y-2">
+          {routeFiles.map((routeFile, index) => (
+            <div
+              key={routeFile.file}
+              className="grid grid-cols-[auto_1fr] gap-3 rounded-lg border border-zinc-100 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-900"
+            >
+              <span className="flex h-8 w-8 items-center justify-center rounded-md bg-emerald-100 font-mono text-sm font-black text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">
+                {index + 1}
+              </span>
+              <div className="min-w-0">
+                <p className="truncate font-mono text-sm font-black text-zinc-950 dark:text-white">
+                  {routeFile.file}
+                </p>
+                <p className="mt-1 text-xs leading-5 text-zinc-600 dark:text-zinc-400">
+                  <span className="font-bold text-zinc-800 dark:text-zinc-200">
+                    {routeFile.label}
+                  </span>{' '}
+                  {routeFile.detail}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="grid content-between gap-3 rounded-lg bg-emerald-50 p-4 text-emerald-950 dark:bg-emerald-950/35 dark:text-emerald-100">
+          <div>
+            <p className="text-sm font-black">RouteTree.gen.ts</p>
+            <p className="mt-2 text-xs leading-5 text-emerald-950/75 dark:text-emerald-100/75">
+              A generated map keeps the route files, params, search schemas, and
+              loader outputs connected to the APIs you call every day.
+            </p>
+          </div>
+
+          <div className="grid gap-2 text-xs font-bold">
+            {[
+              '<Link to="/invoices/$id" />',
+              'navigate({ search })',
+              'useLoaderData()',
+              'validateSearch()',
+            ].map((item) => (
+              <div
+                key={item}
+                className="rounded-md bg-white/80 px-3 py-2 font-mono dark:bg-zinc-950/70"
+              >
+                {item}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SearchStatePanel() {
+  const [selectedPresetIndex, setSelectedPresetIndex] = React.useState(0)
+  const selectedPreset =
+    searchExamples[selectedPresetIndex] ?? searchExamples[0]
+  const searchParamDisplay = buildSearchParamDisplay(selectedPreset)
+
+  return (
+    <div className="min-w-0 rounded-lg border border-emerald-200 bg-white p-4 dark:border-emerald-900 dark:bg-zinc-950">
+      <div className="flex items-start justify-between gap-4">
+        <p className="min-w-0 break-all font-mono text-sm font-black leading-6 text-zinc-950 dark:text-white">
+          /docs
+          <span className="text-emerald-600 dark:text-emerald-300">
+            {searchParamDisplay.replace('/docs', '')}
+          </span>
+        </p>
+        <span className="rounded-md bg-emerald-100 px-2 py-1 text-xs font-black uppercase text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">
+          validated
+        </span>
+      </div>
+
+      <div className="mt-4 flex flex-wrap gap-2">
+        {searchExamples.map((preset, index) => (
+          <button
+            key={preset.label}
+            aria-pressed={selectedPresetIndex === index}
+            className={
+              selectedPresetIndex === index
+                ? 'rounded-lg border border-emerald-500 bg-emerald-500 px-3 py-2 text-left text-white'
+                : 'rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-left transition-colors hover:border-emerald-300 hover:bg-emerald-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-emerald-800 dark:hover:bg-emerald-950/25'
+            }
+            type="button"
+            onClick={() => setSelectedPresetIndex(index)}
+          >
+            <p
+              className={
+                selectedPresetIndex === index
+                  ? 'text-[0.65rem] font-black uppercase text-white/75'
+                  : 'text-[0.65rem] font-black uppercase text-zinc-500 dark:text-zinc-400'
+              }
+            >
+              {preset.label}
+            </p>
+            <p
+              className={
+                selectedPresetIndex === index
+                  ? 'mt-1 font-mono text-sm font-bold text-white'
+                  : 'mt-1 font-mono text-sm font-bold text-zinc-950 dark:text-white'
+              }
+            >
+              q={preset.q}
+            </p>
+          </button>
+        ))}
+      </div>
+
+      <div className="mt-3 grid gap-2 sm:grid-cols-4">
+        {[
+          ['sort', selectedPreset.sort],
+          ['page', `${selectedPreset.page}`],
+          ['tags', selectedPreset.tags.join(',')],
+          ['matched', `${selectedPreset.tags.length + selectedPreset.page}`],
+        ].map(([key, value]) => (
+          <div
+            key={key}
+            className="rounded-lg bg-emerald-50 px-3 py-2 dark:bg-emerald-950/25"
+          >
+            <p className="text-[0.65rem] font-black uppercase text-emerald-800 dark:text-emerald-300">
+              {key}
+            </p>
+            <p className="mt-1 truncate font-mono text-sm font-bold text-emerald-950 dark:text-emerald-100">
+              {value}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 rounded-lg bg-zinc-950 p-4 text-sm text-emerald-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          <span className="text-emerald-300">validateSearch</span>: z.object(
+          {'{'}
+          <br />
+          &nbsp;&nbsp;q: z.string().optional(),
+          <br />
+          &nbsp;&nbsp;page: z.number().catch(1),
+          <br />
+          &nbsp;&nbsp;sort: z.enum(['stars', 'recent']),
+          <br />
+          &nbsp;&nbsp;tags: z.array(z.string()).catch([])
+          <br />
+          {'}'})
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function buildSearchParamDisplay(preset: RouterSearchPreset) {
+  const params = new URLSearchParams({
+    page: `${preset.page}`,
+    q: preset.q,
+    sort: preset.sort,
+    tags: preset.tags.join(','),
+  })
+
+  return `/docs?${params.toString()}`
+}
+
+function LoaderPipeline() {
+  return (
+    <div className="grid gap-3 md:grid-cols-4">
+      {loaderSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="relative rounded-lg border border-zinc-200 bg-[#fbfaf7] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-100 text-sm font-black text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black capitalize leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ContractCard({
+  body,
+  eyebrow,
+  icon,
+  title,
+}: {
+  body: string
+  eyebrow: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-[#fbfaf7] p-5 dark:border-zinc-800 dark:bg-zinc-900">
+      <div className="flex items-start justify-between gap-4">
+        <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">
+          {icon}
+        </span>
+        <span className="rounded-md bg-zinc-100 px-2 py-1 text-[0.65rem] font-black uppercase text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
+          {eyebrow}
+        </span>
+      </div>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-emerald-700 dark:text-emerald-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-emerald-500 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function RouterLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
+  )
+}
+
+function getRouterBlankStarterInput() {
+  const blankStarter = getApplicationStarterSuggestions('router').find(
+    (suggestion) => suggestion.label === 'Blank starter',
+  )
+
+  return (
+    blankStarter?.input ??
+    'Create a blank TanStack Router app with no extra integrations or feature scaffolding.'
+  )
+}
+
+async function getRouterAgentPrompt() {
+  if (cachedRouterAgentPrompt) {
+    return cachedRouterAgentPrompt
+  }
+
+  const result = await resolveApplicationStarterDeterministically({
+    context: 'router',
+    input: routerBlankStarterInput,
+  })
+
+  cachedRouterAgentPrompt = result.prompt
+  return cachedRouterAgentPrompt
+}
diff --git a/src/components/landing/StartLanding.tsx b/src/components/landing/StartLanding.tsx
index 6f3ab38df..51325926b 100644
--- a/src/components/landing/StartLanding.tsx
+++ b/src/components/landing/StartLanding.tsx
@@ -1,142 +1,658 @@
-import { Link } from '@tanstack/react-router'
-import { Footer } from '~/components/Footer'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  BookOpen,
+  CheckCircle2,
+  ExternalLink,
+  GitBranch,
+  Layers,
+  Network,
+  Rocket,
+  Server,
+  Sparkles,
+} from 'lucide-react'
+
 import { BottomCTA } from '~/components/BottomCTA'
-import { LibraryHero } from '~/components/LibraryHero'
-import { startProject } from '~/libraries/start'
-import { getLibrary } from '~/libraries'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
-import LandingPageGad from '~/components/LandingPageGad'
-import { PartnersSection } from '~/components/PartnersSection'
-import { MaintainersSection } from '~/components/MaintainersSection'
-import { LibraryTestimonials } from '~/components/LibraryTestimonials'
-import { Button } from '~/ui'
+import { ApplicationStarter } from '~/components/ApplicationStarter'
+import { Footer } from '~/components/Footer'
 import { GithubIcon } from '~/components/icons/GithubIcon'
-import { Book, Wallpaper } from 'lucide-react'
-import { BrandXIcon } from '~/components/icons/BrandXIcon'
-import { LibraryShowcases } from '~/components/ShowcaseSection'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { LibraryStatsSection } from '~/components/LibraryStatsSection'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
+import { getLibrary } from '~/libraries'
+import {
+  getApplicationStarterSuggestions,
+  resolveApplicationStarterDeterministically,
+} from '~/utils/application-starter'
 
+import { LandingEcosystemProof } from '~/components/landing/LandingEcosystemProof'
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
 const library = getLibrary('start')
+const startBlankStarterInput = getStartBlankStarterInput()
+
+let cachedStartAgentPrompt: string | null = null
+
+const featureCards = [
+  {
+    title: 'Built on TanStack Router',
+    body: 'Routes, params, search schemas, loaders, pending states, links, and navigation all come from TanStack Router. Start adds the server and deployment layer around that app model.',
+    icon: <Network size={18} />,
+  },
+  {
+    title: 'URL state is first-class',
+    body: 'Search params are parsed, validated, inherited, and written through Router APIs, so filters, tabs, pagination, and deep app state can be shared instead of synchronized by hand.',
+    icon: <GitBranch size={18} />,
+  },
+  {
+    title: 'Server work stays explicit',
+    body: 'createServerFn gives loaders, components, hooks, and handlers access to server-only work with validation, serializable boundaries, and same-origin RPC semantics.',
+    icon: <Server size={18} />,
+  },
+  {
+    title: 'SSR keeps the app model',
+    body: 'Start can render the full document, stream useful UI, or opt routes into SPA/selective SSR modes while preserving the interactive client-side Router experience.',
+    icon: <Layers size={18} />,
+  },
+]
+
+const startRuntimeSteps = [
+  {
+    label: 'Match route',
+    file: 'routes/_app.projects.$id.tsx',
+    body: 'Router narrows params, search, context, loader deps, and links before React starts rendering.',
+  },
+  {
+    label: 'Run loader',
+    file: 'loader({ context, params })',
+    body: 'Start can do the preload on the server, dehydrate Query, and reuse the same contract during client navigation.',
+  },
+  {
+    label: 'Call server function',
+    file: 'createServerFn({ method: "GET" })',
+    body: 'Database, auth, and environment work stay behind an explicit, validated server boundary.',
+  },
+  {
+    label: 'Stream document',
+    file: 'SSR + route data + pending UI',
+    body: 'The HTML shell, head tags, loader data, and useful pending states can leave as one streaming response.',
+  },
+  {
+    label: 'Ship runtime output',
+    file: 'runtime adapter for the host',
+    body: 'The same app model builds for the deployment target instead of changing how routes are authored.',
+  },
+]
+
+const startRuntimeOutputs = [
+  {
+    label: 'Route contract',
+    value: 'params.id, search.tab, loaderData',
+  },
+  {
+    label: 'Server boundary',
+    value: 'db, auth, env, files, mutations',
+  },
+  {
+    label: 'Deploy output',
+    value: 'Node, Workers, Netlify, Railway',
+  },
+]
+
+const rcChecklist = [
+  {
+    label: 'Pin the RC',
+    body: 'Lock Start and Router packages instead of floating on broad ranges.',
+  },
+  {
+    label: 'Track release notes',
+    body: 'Treat version bumps as planned work and re-run the routes, loaders, and server functions that matter.',
+  },
+  {
+    label: 'Report sharp edges',
+    body: 'Small reproductions are still valuable while the final docs polish and last-mile fixes land.',
+  },
+]
+
+const fieldNotes = [
+  {
+    title: 'Lovable builds new projects on Start',
+    body: 'Lovable says projects created after May 13 are server-rendered and powered by TanStack Start, with type safety and deployment flexibility as core reasons.',
+    source: 'Lovable',
+    sourceDetail: 'Inside Lovable',
+    href: 'https://lovable.dev/blog/building-apps-using-tanstack-start',
+  },
+  {
+    title: 'Thoughtworks put Start on the Radar',
+    body: 'Technology Radar Vol. 34 lists TanStack Start in Assess and calls out compile-time safety across server functions, loaders, and routing.',
+    source: 'Thoughtworks',
+    sourceDetail: 'Technology Radar',
+    href: 'https://www.thoughtworks.com/content/dam/thoughtworks/documents/radar/2026/04/tr_technology_radar_vol_34_en.pdf',
+  },
+  {
+    title: 'Bun documents Start in its ecosystem',
+    body: "Bun's official guide covers creating, running, hosting, and templating TanStack Start apps, including production deployment paths.",
+    source: 'Bun',
+    sourceDetail: 'Ecosystem guide',
+    href: 'https://bun.com/docs/guides/ecosystem/tanstack-start',
+  },
+  {
+    title: 'Frontend Masters teaches the workflow',
+    body: "Web Dev Simplified's Frontend Masters tutorial builds a complete full-stack project with TanStack Start and compares it to Next.js.",
+    source: 'Frontend Masters',
+    sourceDetail: 'Web Dev Simplified',
+    href: 'https://frontendmasters.com/tutorials/webdevsimplified/tanstack-start/',
+  },
+]
 
 export default function StartLanding() {
+  const { version } = useParams({ strict: false })
+  const resolvedVersion = version ?? library.latestVersion
+
   return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={startProject}
-        actions={
-          <div className="flex justify-center gap-4 flex-wrap">
-            <Button
-              as={Link}
-              from={'/$libraryId/$version'}
-              to={'./docs/framework/$framework/$'}
-              params={
-                {
-                  libraryId: library.id,
-                  framework: 'react',
-                  _splat: 'quick-start',
-                } as never
-              }
-              hash={'impatient'}
-              className="bg-transparent border-cyan-500 dark:border-cyan-600 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500/10"
-            >
-              Try it in 60 seconds
-            </Button>
-            <Button
-              as={Link}
-              from="/$libraryId/$version"
-              to="./docs"
-              params={{ libraryId: library.id } as never}
-              className="bg-cyan-500 border-cyan-500 hover:bg-cyan-600 dark:bg-cyan-600 dark:border-cyan-600 text-white"
-            >
-              Get Started
-            </Button>
-          </div>
-        }
-      />
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#f6fbfb] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-cyan-950/10 bg-[#f4fbfb] dark:border-cyan-300/10 dark:bg-[#041010]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.85fr_1.15fr] lg:items-start lg:py-12 xl:max-w-[92rem] 2xl:grid-cols-[0.78fr_1.22fr]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-cyan-700 dark:text-cyan-300">
+              <Sparkles size={14} aria-hidden="true" />
+              Full-stack framework
+            </p>
 
-      <LibraryStatsSection library={library} />
+            <div className="mt-4 flex flex-wrap items-start gap-x-3 gap-y-2">
+              <h1 className="text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+                <LibraryWordmark library={library} />
+              </h1>
+              {library.badge ? (
+                <span className="rounded-md bg-zinc-950 px-2 py-1 text-xs font-black uppercase text-white dark:bg-white dark:text-zinc-950">
+                  {library.badge}
+                </span>
+              ) : null}
+            </div>
 
-      <LibraryFeatureHighlights
-        featureHighlights={startProject.featureHighlights}
-      />
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              The full-stack framework for Router-first apps.
+            </p>
+
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Start takes TanStack Router's typed route tree, URL state,
+              loaders, and prefetching, then adds the server pieces:
+              full-document SSR, streaming, server functions, server routes, and
+              build output for the runtime you choose.
+            </p>
+
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
+
+            <p className="mt-4 max-w-xl border-l-2 border-cyan-500 pl-3 text-sm font-black text-cyan-800 dark:text-cyan-200">
+              The fastest-growing full-stack framework in the JavaScript
+              ecosystem.
+            </p>
+
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <StartLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                getPrompt={getStartAgentPrompt}
+                label="Copy Start Prompt"
+              />
+            </div>
 
-      <LibraryTestimonials testimonials={startProject.testimonials} />
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              <ProofPill
+                label="Built on Router"
+                value="Routes, search, loaders, links"
+              />
+              <ProofPill
+                label="Client-authored, server-powered"
+                value="SSR, streaming, server functions"
+              />
+              <ProofPill
+                label="Portable output"
+                value="Cloudflare, Railway, Netlify ready"
+              />
+            </div>
+            <LandingEcosystemProof />
+          </div>
 
-      <div className="space-y-8 px-4">
-        <div className="font-black text-3xl mr-1 text-center">
-          When can I use it?
+          <div className="w-full min-w-0 max-w-full overflow-hidden">
+            <StartRuntimePanel />
+          </div>
         </div>
-        <div className="max-w-full p-8 w-[800px] mx-auto leading-loose space-y-4 bg-white dark:bg-gray-900 rounded-xl shadow-xs border border-gray-300 dark:border-gray-800">
-          <div>
-            You can use <strong>TanStack Start RC</strong> today! We're
-            feature-complete and preparing for 1.0. We invite you to provide
-            feedback to help us finalize the release! If you choose to ship an
-            RC Start app to production, we recommend locking your dependencies
-            to a specific version and keeping up with the latest releases.
+      </section>
+
+      <section className="border-b border-cyan-950/10 bg-[#eefafa] dark:border-cyan-300/10 dark:bg-[#061515]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<Sparkles size={14} />}>
+              Application builder
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Turn an app idea into a Start-ready implementation plan.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Pick a starting shape, describe the product, and let the builder
+              assemble the TanStack libraries and partner integrations that fit
+              the job. The output is a practical agent prompt, not a generic
+              starter checklist.
+            </p>
+          </div>
+
+          <div className="min-w-0 max-w-full overflow-hidden">
+            <ApplicationStarter
+              context="start"
+              mode="compact"
+              primaryActionLabel="Copy Start Prompt"
+              secondaryActionLabel="Build Start on Netlify"
+              title="Describe the app you want to build"
+              tone="cyan"
+            />
           </div>
         </div>
-        <div className="grid items-center gap-2 justify-center grid-cols-1 sm:grid-cols-2 w-[600px] max-w-full mx-auto">
-          <Link
-            from={'/$libraryId/$version'}
-            to="./docs/framework/$framework/examples/$"
-            params={{
-              libraryId: library.id,
-              framework: 'react',
-              _splat: 'start-basic',
-            }}
-            className="flex items-center gap-2 py-2 px-4 bg-cyan-900 rounded-lg text-white font-black"
-          >
-            <Wallpaper className="min-w-4" /> See an Example
-          </Link>
-          <Link
-            from={'/$libraryId/$version'}
-            to="./docs"
-            params={{ libraryId: library.id }}
-            className="flex items-center gap-2 py-2 px-4 bg-cyan-800 rounded-lg text-white font-black"
-          >
-            <Book className="min-w-4" /> Try it out!
-          </Link>
-          <a
-            href={`https://github.com/tanstack/tanstack.com`}
-            className="flex items-center gap-2 py-2 px-4 bg-cyan-700 rounded-lg text-white font-black"
-          >
-            <GithubIcon className="min-w-4" /> TanStack.com Source
-          </a>
-          <a
-            href={`https://twitter.com/intent/post?text=${encodeURIComponent(
-              `TanStack Start is in BETA! It's a new full-stack React framework from @Tan_Stack and you can check it out at https://tanstack.com/start/`,
-            )}`}
-            target="_blank"
-            className="flex items-center gap-2 py-2 px-4 bg-cyan-500 rounded-lg text-white font-black"
-            rel="noreferrer"
-          >
-            <BrandXIcon className="min-w-4" /> Tweet about it!
-          </a>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr]">
+          <div>
+            <SectionKicker icon={<GitBranch size={14} />}>
+              Why Start
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Most of the framework is the route tree.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              If all you need is a SPA router, use Router. Start is for the
+              moment the same app also needs SSR, streaming, server-only work,
+              server routes, middleware, and deployable server output.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
         </div>
-      </div>
+      </section>
 
-      <MaintainersSection libraryId="start" />
-      <PartnersSection libraryId="start" />
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-6 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.9fr_1.1fr]">
+          <div className="rounded-lg border border-cyan-200 bg-cyan-50 p-6 dark:border-cyan-900/70 dark:bg-cyan-950/20">
+            <SectionKicker icon={<Rocket size={14} />}>RC status</SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight">
+              Feature-complete, still listening.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The RC API is considered stable and preparing for 1.0. For
+              production apps, lock dependencies to a specific version and keep
+              up with the final feedback, docs polish, and last-mile fixes.
+            </p>
+            <div className="mt-6 rounded-lg border border-cyan-200/70 bg-white/75 p-4 dark:border-cyan-900/70 dark:bg-zinc-950/60">
+              <p className="text-sm font-black text-cyan-950 dark:text-cyan-100">
+                Production RC checklist
+              </p>
+              <div className="mt-3 grid gap-3">
+                {rcChecklist.map((item) => (
+                  <div
+                    key={item.label}
+                    className="grid grid-cols-[auto_1fr] gap-2 text-sm leading-6 text-cyan-950 dark:text-cyan-100"
+                  >
+                    <CheckCircle2
+                      className="mt-1 h-4 w-4 text-cyan-700 dark:text-cyan-300"
+                      aria-hidden="true"
+                    />
+                    <div>
+                      <span className="font-black">{item.label}</span>
+                      <span className="text-cyan-950/75 dark:text-cyan-100/75">
+                        {' '}
+                        {item.body}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
 
-      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
-        <LibraryShowcases libraryId="start" libraryName="TanStack Start" />
-      </div>
+          <div className="grid gap-4 md:grid-cols-2">
+            {fieldNotes.map((note) => (
+              <FieldNoteCard key={note.title} {...note} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Partners and GitHub sponsors stay close to the product story.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Start is built in public, supported by maintainers, partner
+              integrations, and sponsors who help keep the work moving.
+            </p>
+          </div>
+        </div>
 
-      <LazySponsorSection />
-      <LandingPageGad />
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="start" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
 
       <BottomCTA
         linkProps={{
-          from: '/$libraryId/$version',
-          to: './docs',
-          params: { libraryId: library.id },
+          to: '/$libraryId/$version/docs',
+          params: { libraryId: library.id, version: resolvedVersion },
         }}
         label="Get Started!"
-        className="bg-cyan-500 border-cyan-500 hover:bg-cyan-600 text-white"
+        className="border-cyan-500 bg-cyan-500 text-white hover:bg-cyan-600"
       />
       <Footer />
-    </LibraryPageContainer>
+    </div>
+  )
+}
+
+function StartRuntimePanel() {
+  return (
+    <div className="min-w-0 w-full max-w-full overflow-hidden rounded-lg border border-cyan-200 bg-white p-4 shadow-sm shadow-cyan-950/5 dark:border-cyan-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          Router + server
+        </span>
+      </div>
+
+      <div className="mt-4">
+        <p className="text-sm font-black leading-5 text-zinc-950 dark:text-white">
+          Start keeps Router as the application contract.
+        </p>
+        <p className="mt-2 text-xs leading-5 text-zinc-600 dark:text-zinc-400">
+          Then it runs the server work Router shouldn't own: SSR, streaming,
+          server functions, server routes, and deployable output.
+        </p>
+      </div>
+
+      <div className="mt-4 grid gap-4 xl:grid-cols-[1.04fr_0.96fr]">
+        <div className="min-w-0 overflow-hidden rounded-lg bg-zinc-950 p-4 text-zinc-100 shadow-inner shadow-black/20 dark:bg-black">
+          <div className="flex min-w-0 items-center justify-between gap-3">
+            <p className="min-w-0 truncate font-mono text-xs font-bold text-cyan-200">
+              GET /projects/tanstack?tab=activity
+            </p>
+            <span className="shrink-0 rounded-md bg-emerald-400/15 px-1.5 py-0.5 text-[0.65rem] font-black uppercase leading-none text-emerald-200">
+              server first
+            </span>
+          </div>
+
+          <div className="mt-4 min-w-0 overflow-x-auto pb-1 font-mono text-[0.72rem] leading-5">
+            <p className="whitespace-nowrap">
+              <span className="text-pink-300">export const</span>{' '}
+              <span className="text-white">Route</span> = createFileRoute(
+              <span className="text-emerald-300">'/_app/projects/$id'</span>)(
+              {'{'}
+            </p>
+            <p className="whitespace-nowrap pl-4">
+              validateSearch:{' '}
+              <span className="text-emerald-300">projectSearchSchema</span>,
+            </p>
+            <p className="whitespace-nowrap pl-4">
+              loader: ({'{'} context, params {'}'}) =&gt;
+            </p>
+            <p className="whitespace-nowrap pl-8">
+              context.queryClient.ensureQueryData(projectQuery(params.id)),
+            </p>
+            <p className="whitespace-nowrap">{'})'}</p>
+            <p className="mt-3 whitespace-nowrap text-zinc-400">
+              <span className="text-pink-300">const</span>{' '}
+              <span className="text-cyan-300">getProject</span> =
+              createServerFn({'{'} method:{' '}
+              <span className="text-emerald-300">'GET'</span> {'}'})
+            </p>
+            <p className="whitespace-nowrap pl-4 text-zinc-400">
+              .handler(({'{'} data {'}'}) =&gt; db.project.find(data.id))
+            </p>
+          </div>
+        </div>
+
+        <div className="rounded-lg bg-cyan-50 p-4 dark:bg-cyan-950/30">
+          <div className="flex items-center justify-between gap-3">
+            <p className="text-sm font-black text-cyan-950 dark:text-cyan-100">
+              Request trace
+            </p>
+            <span className="inline-flex items-center gap-1.5 rounded-md bg-white px-1.5 py-0.5 text-[0.65rem] font-black uppercase text-cyan-800 dark:bg-cyan-950 dark:text-cyan-200">
+              <span className="h-1.5 w-1.5 rounded-full bg-cyan-500 motion-safe:animate-pulse" />
+              streaming
+            </span>
+          </div>
+
+          <div className="mt-4 grid gap-3">
+            {startRuntimeSteps.map((step, index) => {
+              const isLastStep = index === startRuntimeSteps.length - 1
+
+              return (
+                <div
+                  key={step.label}
+                  className="grid grid-cols-[2rem_1fr] gap-3"
+                >
+                  <span className="flex h-8 w-8 items-center justify-center rounded-lg border border-cyan-200 bg-white text-xs font-black text-cyan-800 dark:border-cyan-800 dark:bg-zinc-950 dark:text-cyan-200">
+                    {index + 1}
+                  </span>
+                  <div
+                    className={
+                      isLastStep
+                        ? 'min-w-0'
+                        : 'min-w-0 border-b border-cyan-200/70 pb-3 dark:border-cyan-800/70'
+                    }
+                  >
+                    <div className="flex min-w-0 items-start justify-between gap-3">
+                      <p className="text-sm font-black leading-5 text-zinc-950 dark:text-white">
+                        {step.label}
+                      </p>
+                      <p className="min-w-0 truncate font-mono text-[0.65rem] font-bold text-cyan-800/80 dark:text-cyan-100/75">
+                        {step.file}
+                      </p>
+                    </div>
+                    <p className="mt-1 text-xs leading-5 text-cyan-950/75 dark:text-cyan-100/75">
+                      {step.body}
+                    </p>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-4 grid gap-3 sm:grid-cols-3">
+        {startRuntimeOutputs.map((output) => (
+          <div
+            key={output.label}
+            className="rounded-lg border border-zinc-100 bg-zinc-50 px-3 py-2.5 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <p className="text-xs font-black text-zinc-950 dark:text-white">
+              {output.label}
+            </p>
+            <p className="mt-1 text-xs leading-5 text-zinc-600 dark:text-zinc-400">
+              {output.value}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-zinc-600 dark:text-zinc-400">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-cyan-500 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
   )
 }
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-[#fbfaf7] p-5 dark:border-zinc-800 dark:bg-zinc-900">
+      <div className="flex items-center gap-3">
+        <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-cyan-100 text-cyan-800 dark:bg-cyan-950 dark:text-cyan-200">
+          {icon}
+        </span>
+        <h3 className="text-xl font-black leading-tight">{title}</h3>
+      </div>
+      <p className="mt-4 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function FieldNoteCard({
+  body,
+  href,
+  source,
+  sourceDetail,
+  title,
+}: {
+  body: string
+  href: string
+  source: string
+  sourceDetail: string
+  title: string
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group flex min-h-48 flex-col justify-between rounded-lg border border-zinc-200 bg-white p-5 transition-colors hover:border-cyan-300 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-cyan-800"
+    >
+      <div>
+        <div className="flex items-start justify-between gap-4">
+          <p className="text-xs font-black uppercase text-cyan-700 dark:text-cyan-300">
+            {source}
+          </p>
+          <ExternalLink
+            className="mt-0.5 h-4 w-4 shrink-0 text-zinc-400 transition-colors group-hover:text-cyan-600 dark:group-hover:text-cyan-300"
+            aria-hidden="true"
+          />
+        </div>
+        <h3 className="mt-3 text-lg font-black leading-tight text-zinc-950 dark:text-white">
+          {title}
+        </h3>
+        <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+          {body}
+        </p>
+      </div>
+      <p className="mt-5 text-xs font-bold text-zinc-500 dark:text-zinc-400">
+        {sourceDetail}
+      </p>
+    </a>
+  )
+}
+
+function StartLink({
+  icon,
+  label,
+  muted = false,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  muted?: boolean
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className={
+        muted
+          ? 'inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-300 bg-white px-4 py-2.5 text-sm font-bold text-zinc-900 transition-colors hover:border-zinc-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 dark:hover:border-zinc-500 sm:w-auto'
+          : 'inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto'
+      }
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
+  )
+}
+
+function getStartBlankStarterInput() {
+  const blankStarter = getApplicationStarterSuggestions('start').find(
+    (suggestion) => suggestion.label === 'Blank starter',
+  )
+
+  return (
+    blankStarter?.input ??
+    'Create a blank TanStack Start app with no extra integrations or feature scaffolding.'
+  )
+}
+
+async function getStartAgentPrompt() {
+  if (cachedStartAgentPrompt) {
+    return cachedStartAgentPrompt
+  }
+
+  const result = await resolveApplicationStarterDeterministically({
+    context: 'start',
+    input: startBlankStarterInput,
+  })
+
+  cachedStartAgentPrompt = result.prompt
+  return cachedStartAgentPrompt
+}
diff --git a/src/components/landing/StoreLanding.tsx b/src/components/landing/StoreLanding.tsx
index 6d62a6c1b..1fb76e5db 100644
--- a/src/components/landing/StoreLanding.tsx
+++ b/src/components/landing/StoreLanding.tsx
@@ -1,56 +1,622 @@
-import { Footer } from '~/components/Footer'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  BookOpen,
+  Cpu,
+  Fingerprint,
+  Layers,
+  Radio,
+  RefreshCcw,
+  ScanLine,
+  Sparkles,
+  Split,
+  WandSparkles,
+} from 'lucide-react'
+
 import { BottomCTA } from '~/components/BottomCTA'
-import { LibraryHero } from '~/components/LibraryHero'
-import { storeProject } from '~/libraries/store'
-import { getLibrary } from '~/libraries'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
 import LandingPageGad from '~/components/LandingPageGad'
-import { PartnersSection } from '~/components/PartnersSection'
-import { MaintainersSection } from '~/components/MaintainersSection'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { LibraryStatsSection } from '~/components/LibraryStatsSection'
+import { getLibrary } from '~/libraries'
 
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
 const library = getLibrary('store')
+const storeAgentPrompt = [
+  'Build a TanStack Store state model for a TypeScript app.',
+  'Use immutable updates, derived values, scoped subscriptions, and framework adapters so components subscribe only to the state slices they need.',
+  'Keep the store small and framework-agnostic, and show how it can power UI state, library internals, or adapters without replacing server-state tools like TanStack Query or DB.',
+].join(' ')
+
+const heroProof = [
+  {
+    label: 'Immutable core',
+    value: 'predictable updates and snapshots',
+  },
+  {
+    label: 'Reactive selectors',
+    value: 'subscribe to the slice that matters',
+  },
+  {
+    label: 'Adapter friendly',
+    value: 'React, Vue, Solid, Svelte, Angular, Lit',
+  },
+]
+
+const featureCards = [
+  {
+    title: 'Small enough to sit under other libraries.',
+    body: 'Store is the tiny reactive primitive that powers parts of the TanStack ecosystem, including framework adapters and library internals.',
+    icon: <Cpu size={18} />,
+  },
+  {
+    title: 'Immutable updates keep changes legible.',
+    body: 'State transitions are explicit, snapshots are predictable, and derived values can be reasoned about without mutating shared objects in place.',
+    icon: <Fingerprint size={18} />,
+  },
+  {
+    title: 'Subscriptions stay narrow.',
+    body: 'Components can listen to exactly the state they render, so a busy product surface does not need to repaint just because nearby state changed.',
+    icon: <Radio size={18} />,
+  },
+  {
+    title: 'Framework adapters are a layer, not the store.',
+    body: 'Use the adapter for your renderer while the core store stays portable across apps, packages, and UI runtimes.',
+    icon: <Layers size={18} />,
+  },
+]
+
+const lifecycleSteps = [
+  {
+    label: 'Write',
+    body: 'An action updates store state through a predictable immutable transition.',
+  },
+  {
+    label: 'Derive',
+    body: 'Computed values can depend on the store without becoming another hand-synced state bucket.',
+  },
+  {
+    label: 'Select',
+    body: 'Subscribers choose the exact slice they need for rendering or effects.',
+  },
+  {
+    label: 'Adapt',
+    body: 'Framework adapters bridge the same store into React, Vue, Solid, Svelte, Angular, Lit, or vanilla code.',
+  },
+]
+
+const subscriptionExamples = [
+  {
+    label: 'component',
+    value: 'useSelector(appStore, state => state.filters)',
+  },
+  {
+    label: 'derived',
+    value: 'visibleCount = selectedIds.length',
+  },
+  {
+    label: 'effect',
+    value: 'store.subscribe(listener)',
+  },
+  {
+    label: 'adapter',
+    value: 'same core, renderer-specific bindings',
+  },
+]
+
+const frameworkAdapters = [
+  'React',
+  'Preact',
+  'Solid',
+  'Svelte',
+  'Vue',
+  'Angular',
+  'Lit',
+]
 
 export default function StoreLanding() {
+  const { version } = useParams({ strict: false })
+  const resolvedVersion = version ?? library.latestVersion
+
   return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={storeProject}
-        cta={{
-          linkProps: {
-            from: '/$libraryId/$version',
-            to: './docs',
-            params: { libraryId: library.id },
-          },
-          label: 'Get Started',
-          className:
-            'bg-stone-600 border-stone-600 hover:bg-stone-700 text-white',
-        }}
-      />
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#f8f5ee] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-twine-950/10 bg-[#eee6d3] dark:border-twine-300/10 dark:bg-[#160d09]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<WandSparkles size={14} />}>
+              Immutable reactive store
+            </SectionKicker>
 
-      <LibraryStatsSection library={library} />
+            <div className="mt-4 flex flex-wrap items-start gap-x-3 gap-y-2">
+              <h1 className="text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+                <LibraryWordmark library={library} />
+              </h1>
+              {library.badge ? (
+                <span className="rounded-md bg-zinc-950 px-2 py-1 text-xs font-black uppercase text-white dark:bg-white dark:text-zinc-950">
+                  {library.badge}
+                </span>
+              ) : null}
+            </div>
 
-      <LibraryFeatureHighlights
-        featureHighlights={storeProject.featureHighlights}
-      />
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              The tiny reactive core behind serious state.
+            </p>
 
-      <MaintainersSection libraryId="store" />
-      <PartnersSection libraryId="store" />
-      <LazySponsorSection />
-      <LandingPageGad />
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Store is a framework-agnostic state primitive for immutable
+              updates, derived values, and targeted subscriptions. It is small
+              enough for library internals and flexible enough for product UI
+              state that should stay reactive without becoming server state.
+            </p>
+
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
 
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <StoreLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={storeAgentPrompt}
+                label="Copy Store Prompt"
+              />
+            </div>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+          </div>
+
+          <StorePanel />
+        </div>
+      </section>
+
+      <section className="border-b border-twine-950/10 bg-[#f8f5ee] dark:border-twine-300/10 dark:bg-[#1b100b]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Sparkles size={14} />}>
+              Why Store
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Some state should be local, reactive, and boring.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Store is not trying to be your server cache, database, or router.
+              It is the small state primitive you reach for when client state
+              needs predictable updates, granular subscriptions, and adapters
+              without a framework-specific runtime.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <LifecyclePanel />
+          <div>
+            <SectionKicker icon={<RefreshCcw size={14} />}>
+              Store lifecycle
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Write once, derive once, subscribe precisely.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              A good store keeps state transitions visible and component
+              subscriptions narrow. Store gives you the primitives without
+              forcing a global architecture on the whole app.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.82fr_1.18fr] lg:items-start xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<ScanLine size={14} />}>
+              Subscriptions
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Let the component ask for less.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Filters, editor drafts, selected rows, hover state, panel layout,
+              and derived labels all change at different speeds. Store lets each
+              UI surface subscribe to its own slice.
+            </p>
+          </div>
+
+          <SubscriptionPanel />
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<Split size={14} />}>
+              Framework adapters
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              One store core, renderer-specific bindings.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The store can live below React, Preact, Solid, Svelte, Vue,
+              Angular, Lit, or vanilla TypeScript. The adapter connects it to
+              the renderer without changing the state model.
+            </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              {frameworkAdapters.map((framework) => (
+                <span
+                  key={framework}
+                  className="rounded-md border border-twine-200 bg-twine-50 px-3 py-1.5 text-sm font-bold text-twine-800 dark:border-twine-900 dark:bg-twine-950/40 dark:text-twine-200"
+                >
+                  {framework}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#f8f5ee] py-12 dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<Cpu size={14} />}>Field notes</SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              The quiet primitive behind louder libraries.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Store matters because it disappears. It gives TanStack libraries a
+              shared reactive substrate while staying small enough for your own
+              client state.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Store is maintained close to the libraries that rely on it.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, framework adapters, examples, partners, and GitHub
+              sponsors keep the primitive honest because it has to serve real
+              TanStack packages.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="store" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
+
+      <LandingPageGad />
       <BottomCTA
         linkProps={{
-          from: '/$libraryId/$version',
-          to: './docs',
-          params: { libraryId: library.id },
+          to: '/$libraryId/$version/docs',
+          params: { libraryId: library.id, version: resolvedVersion },
         }}
         label="Get Started!"
-        className="bg-stone-700 border-stone-700 hover:bg-stone-800 text-white"
+        className="border-twine-700 bg-twine-700 text-white hover:bg-twine-800"
       />
       <Footer />
-    </LibraryPageContainer>
+    </div>
+  )
+}
+
+function StorePanel() {
+  const [theme, setTheme] = React.useState<'light' | 'dark'>('light')
+  const [density, setDensity] = React.useState<'comfortable' | 'compact'>(
+    'comfortable',
+  )
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true)
+  const previewRows =
+    density === 'compact'
+      ? ['Routes', 'Queries', 'Tables', 'Forms']
+      : ['Routes', 'Queries', 'Tables']
+  const storeRows = [
+    ['theme', theme],
+    ['sidebar', isSidebarOpen ? 'open' : 'closed'],
+    ['density', density],
+  ]
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-twine-200 bg-white p-4 shadow-sm shadow-twine-950/5 dark:border-twine-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          settings store
+        </span>
+      </div>
+
+      <div className="mt-4 grid gap-3 lg:grid-cols-[0.9fr_1.1fr]">
+        <div className="space-y-3">
+          {storeRows.map(([key, value]) => (
+            <div
+              key={key}
+              className="rounded-lg border border-zinc-200 bg-twine-50 p-3 dark:border-zinc-800 dark:bg-twine-950/20"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <p className="truncate font-mono text-sm font-black">
+                    ui.{key}
+                  </p>
+                  <p className="mt-1 text-xs font-bold text-zinc-500 dark:text-zinc-400">
+                    subscribed slice
+                  </p>
+                </div>
+                <span className="rounded-md bg-twine-100 px-2 py-1 text-[0.65rem] font-black uppercase text-twine-800 dark:bg-twine-950 dark:text-twine-200">
+                  {value}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="min-w-0 rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900">
+          <p className="font-mono text-sm font-black">uiStore.setState()</p>
+          <div className="mt-4 grid gap-2 sm:grid-cols-2">
+            <button
+              className={
+                theme === 'dark'
+                  ? 'rounded-md border border-twine-700 bg-twine-700 px-3 py-2 text-sm font-black text-white'
+                  : 'rounded-md border border-twine-200 bg-white px-3 py-2 text-sm font-black text-twine-800 transition-colors hover:border-twine-400 dark:border-twine-900 dark:bg-zinc-950 dark:text-twine-200'
+              }
+              type="button"
+              onClick={() =>
+                setTheme((current) => (current === 'light' ? 'dark' : 'light'))
+              }
+            >
+              Toggle theme
+            </button>
+            <button
+              className="rounded-md border border-twine-200 bg-white px-3 py-2 text-sm font-black text-twine-800 transition-colors hover:border-twine-400 dark:border-twine-900 dark:bg-zinc-950 dark:text-twine-200"
+              type="button"
+              onClick={() =>
+                setDensity((current) =>
+                  current === 'comfortable' ? 'compact' : 'comfortable',
+                )
+              }
+            >
+              Toggle density
+            </button>
+            <button
+              className="rounded-md border border-twine-200 bg-white px-3 py-2 text-sm font-black text-twine-800 transition-colors hover:border-twine-400 dark:border-twine-900 dark:bg-zinc-950 dark:text-twine-200 sm:col-span-2"
+              type="button"
+              onClick={() => setIsSidebarOpen((current) => !current)}
+            >
+              {isSidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
+            </button>
+          </div>
+
+          <div
+            className={
+              theme === 'dark'
+                ? 'mt-4 rounded-lg bg-zinc-950 p-3 text-white'
+                : 'mt-4 rounded-lg bg-white p-3 text-zinc-950'
+            }
+          >
+            <div className="flex items-center justify-between gap-3 border-b border-zinc-200 pb-2 text-sm dark:border-zinc-800">
+              <span className="font-black">Preview</span>
+              <span className="rounded-md bg-twine-100 px-2 py-1 text-[0.65rem] font-black uppercase text-twine-800">
+                {theme}
+              </span>
+            </div>
+            <div
+              className={
+                isSidebarOpen
+                  ? 'mt-3 grid gap-3 sm:grid-cols-[0.42fr_1fr]'
+                  : 'mt-3 grid gap-3'
+              }
+            >
+              {isSidebarOpen ? (
+                <div className="rounded-md bg-twine-100 p-2 text-xs font-black text-twine-900">
+                  Docs
+                  <br />
+                  Examples
+                  <br />
+                  API
+                </div>
+              ) : null}
+              <div className="space-y-2">
+                {previewRows.map((row) => (
+                  <div
+                    key={row}
+                    className={
+                      density === 'compact'
+                        ? 'rounded-md border border-zinc-200 px-2 py-1 text-xs font-bold dark:border-zinc-800'
+                        : 'rounded-md border border-zinc-200 px-3 py-2 text-sm font-bold dark:border-zinc-800'
+                    }
+                  >
+                    {row}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-4 space-y-2">
+            {[
+              ['Header', 'theme'],
+              ['Sidebar', 'sidebar'],
+              ['List rows', 'density'],
+            ].map(([label, value]) => (
+              <div
+                key={label}
+                className="flex items-center justify-between gap-3 rounded-lg bg-white px-3 py-2 text-sm dark:bg-zinc-950"
+              >
+                <span className="font-black">{label}</span>
+                <span className="text-right text-zinc-600 dark:text-zinc-400">
+                  subscribes to ui.{value}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function LifecyclePanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {lifecycleSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-[#f8f5ee] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-twine-100 text-sm font-black text-twine-800 dark:bg-twine-950 dark:text-twine-200">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function SubscriptionPanel() {
+  return (
+    <div className="min-w-0 rounded-lg border border-twine-200 bg-white p-4 dark:border-twine-900 dark:bg-zinc-950">
+      <div className="rounded-lg bg-zinc-950 p-4 text-sm text-twine-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          const filters = useSelector(store, state =&gt; state.filters)
+          <br />
+          const canSave = useSelector(store, state =&gt; state.draft.isDirty)
+        </p>
+      </div>
+
+      <div className="mt-4 grid gap-3 md:grid-cols-2">
+        {subscriptionExamples.map((item) => (
+          <div
+            key={item.label}
+            className="rounded-lg border border-zinc-200 bg-[#f8f5ee] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <p className="text-[0.65rem] font-black uppercase text-zinc-500 dark:text-zinc-400">
+              {item.label}
+            </p>
+            <p className="mt-2 break-words font-mono text-sm font-black leading-6 text-zinc-950 dark:text-white">
+              {item.value}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-twine-100 text-twine-800 dark:bg-twine-950 dark:text-twine-200">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-twine-700 dark:text-twine-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-twine-500 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function StoreLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
   )
 }
diff --git a/src/components/landing/TableLanding.tsx b/src/components/landing/TableLanding.tsx
index a0ab189b0..56e95aec1 100644
--- a/src/components/landing/TableLanding.tsx
+++ b/src/components/landing/TableLanding.tsx
@@ -1,445 +1,954 @@
-import { useState } from 'react'
-import { useParams } from '@tanstack/react-router'
-import { tableProject } from '~/libraries/table'
-import { Footer } from '~/components/Footer'
-import { Card } from '~/components/Card'
-import { LibraryHero } from '~/components/LibraryHero'
-import { FeatureGrid } from '~/components/FeatureGrid'
-import { PartnersSection } from '~/components/PartnersSection'
-import { MaintainersSection } from '~/components/MaintainersSection'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
-import { StackBlitzEmbed } from '~/components/StackBlitzEmbed'
-import { FrameworkIconTabs } from '~/components/FrameworkIconTabs'
-import { CodeBlock } from '~/components/markdown'
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type ColumnFiltersState,
+  type PaginationState,
+  type RowSelectionState,
+  type SortingState,
+  type VisibilityState,
+} from '@tanstack/react-table'
+import {
+  ArrowRight,
+  BookOpen,
+  Boxes,
+  ChevronDown,
+  ChevronUp,
+  Columns3,
+  EyeOff,
+  Filter,
+  Grid3X3,
+  Layers,
+  MoveHorizontal,
+  Rows3,
+  Scaling,
+  Search,
+  SlidersHorizontal,
+  Sparkles,
+} from 'lucide-react'
+
 import { BottomCTA } from '~/components/BottomCTA'
-import { Framework, getBranch, getLibrary } from '~/libraries'
-import { getExampleStartingPath } from '~/utils/sandbox'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
-import LandingPageGad from '~/components/LandingPageGad'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
 import { LibraryTestimonials } from '~/components/LibraryTestimonials'
-import { LibraryShowcases } from '~/components/ShowcaseSection'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { LibraryStatsSection } from '~/components/LibraryStatsSection'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
+import LandingPageGad from '~/components/LandingPageGad'
+import { getLibrary } from '~/libraries'
+import { tableProject } from '~/libraries/table'
+import { LandingCodeExampleCard } from '~/components/landing/LandingCodeExampleCard'
+import { tableCodeExample } from '~/components/landing/codeExamples'
 
+import { LandingEcosystemProof } from '~/components/landing/LandingEcosystemProof'
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
 const library = getLibrary('table')
+const tableAgentPrompt = [
+  'Build a TanStack Table data grid for a TypeScript app.',
+  'Keep the table headless: define column defs, row models, sorting, filtering, pagination, selection, column visibility, and controlled state without prescribing markup.',
+  'Render accessible table markup and show how table state can be owned by the product UI or synchronized to URL/server state when needed.',
+].join(' ')
 
-const codeExamples: Partial<Record<Framework, { lang: string; code: string }>> =
+const heroProof = [
+  {
+    label: 'Headless engine',
+    value: 'bring your markup, styles, and components',
+  },
+  {
+    label: 'Row models',
+    value: 'sort, filter, group, expand, paginate',
+  },
   {
-    react: {
-      lang: 'tsx',
-      code: `import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table'
+    label: 'Controlled state',
+    value: 'own every toggle, filter, and selection',
+  },
+]
+
+type TableIssue = {
+  id: string
+  owner: string
+  project: string
+  score: number
+  status: 'active' | 'review' | 'shipped'
+}
 
-const data = [{ id: 1, name: 'Ada' }]
-const columns = [{ accessorKey: 'name', header: 'Name' }]
+type TableStatusFilter = 'all' | TableIssue['status']
 
-export default function SimpleTable() {
-  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() })
+const tableStatusFilters: Array<{
+  label: string
+  value: TableStatusFilter
+}> = [
+  { label: 'All', value: 'all' },
+  { label: 'Active', value: 'active' },
+  { label: 'Review', value: 'review' },
+  { label: 'Shipped', value: 'shipped' },
+]
 
-  return (
-    <table>
-      <thead>
-        {table.getHeaderGroups().map((hg) => (
-          <tr key={hg.id}>
-            {hg.headers.map((header) => (
-              <th key={header.id}>
-                {flexRender(header.column.columnDef.header, header.getContext())}
-              </th>
-            ))}
-          </tr>
-        ))}
-      </thead>
-      <tbody>
-        {table.getRowModel().rows.map((row) => (
-          <tr key={row.id}>
-            {row.getVisibleCells().map((cell) => (
-              <td key={cell.id}>
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}`,
-    },
-    angular: {
-      lang: 'ts',
-      code: `import { Component, signal } from '@angular/core'
-import { createAngularTable, getCoreRowModel, FlexRenderDirective, type ColumnDef } from '@tanstack/angular-table'
-
-type Person = { id: number; name: string }
-
-@Component({
-  standalone: true,
-  selector: 'app-table',
-  imports: [FlexRenderDirective],
-  template: \`
-<table>
-  <thead>
-    @for (hg of table.getHeaderGroups(); track hg.id) {
-      <tr>
-        @for (header of hg.headers; track header.id) {
-          <th>
-            <ng-container *flexRender="header.column.columnDef.header; props: header.getContext()"></ng-container>
-          </th>
-        }
-      </tr>
-    }
-  </thead>
-  <tbody>
-    @for (row of table.getRowModel().rows; track row.id) {
-      <tr>
-        @for (cell of row.getVisibleCells(); track cell.id) {
-          <td>
-            <ng-container *flexRender="cell.column.columnDef.cell; props: cell.getContext()"></ng-container>
-          </td>
-        }
-      </tr>
-    }
-  </tbody>
-</table>
-  \`,
-})
-export class AppComponent {
-  data = signal<Person[]>([{ id: 1, name: 'Ada' }])
-
-  columns: ColumnDef<Person>[] = [
-    { accessorKey: 'name', header: 'Name' },
-  ]
-
-  table = createAngularTable(() => ({
-    data: this.data(),
-    columns: this.columns,
-    getCoreRowModel: getCoreRowModel(),
-  }))
-}`,
-    },
-    solid: {
-      lang: 'tsx',
-      code: `import { createSolidTable, getCoreRowModel, flexRender } from '@tanstack/solid-table'
+const tableRows: Array<TableIssue> = [
+  {
+    id: 'issue-732',
+    owner: 'Tanner',
+    project: 'Router docs',
+    score: 98,
+    status: 'active',
+  },
+  {
+    id: 'issue-681',
+    owner: 'Dominik',
+    project: 'Query cache',
+    score: 94,
+    status: 'review',
+  },
+  {
+    id: 'issue-644',
+    owner: 'Kevin',
+    project: 'Table filters',
+    score: 91,
+    status: 'shipped',
+  },
+  {
+    id: 'issue-612',
+    owner: 'Ben',
+    project: 'Virtual lists',
+    score: 88,
+    status: 'active',
+  },
+  {
+    id: 'issue-590',
+    owner: 'Arthur',
+    project: 'Column pinning',
+    score: 84,
+    status: 'review',
+  },
+  {
+    id: 'issue-551',
+    owner: 'Noel',
+    project: 'Faceted search',
+    score: 79,
+    status: 'shipped',
+  },
+  {
+    id: 'issue-523',
+    owner: 'Zach',
+    project: 'Bulk actions',
+    score: 76,
+    status: 'active',
+  },
+  {
+    id: 'issue-507',
+    owner: 'Luca',
+    project: 'Density switch',
+    score: 72,
+    status: 'review',
+  },
+]
+
+const pipelineSteps = [
+  {
+    label: 'Columns',
+    body: 'Column defs describe accessors, headers, cells, metadata, and feature behavior without owning your DOM.',
+    icon: <Columns3 size={18} />,
+  },
+  {
+    label: 'Rows',
+    body: 'Core, filtered, sorted, grouped, expanded, and paginated row models compose into the exact data shape you need.',
+    icon: <Rows3 size={18} />,
+  },
+  {
+    label: 'State',
+    body: 'Let Table manage state by default, then control the pieces your product needs to own.',
+    icon: <SlidersHorizontal size={18} />,
+  },
+  {
+    label: 'Markup',
+    body: 'Render semantic tables, card grids, virtualized panes, or spreadsheet-like layouts from the same engine.',
+    icon: <Grid3X3 size={18} />,
+  },
+]
+
+const featureCards = [
+  {
+    title: 'Headless means the designer still wins.',
+    body: 'Table gives you the math and state. Your app keeps the elements, classes, interactions, density, empty states, and brand-specific details.',
+    icon: <Sparkles size={18} />,
+  },
+  {
+    title: 'Feature power without a grid tax.',
+    body: 'Sorting, filtering, faceting, grouping, aggregation, expansion, selection, sizing, pinning, visibility, ordering, and pagination are opt-in row models.',
+    icon: <Boxes size={18} />,
+  },
+  {
+    title: 'Server-side data is not an afterthought.',
+    body: 'Pagination, sorting, and filters can be local, controlled, URL-driven, or backed by your API. Table does not assume where the data lives.',
+    icon: <Filter size={18} />,
+  },
+  {
+    title: 'Virtualization stays your choice.',
+    body: 'Pair with TanStack Virtual when the table needs huge rows or columns, without turning the table engine into a scroll container framework.',
+    icon: <Scaling size={18} />,
+  },
+]
 
-const data = [{ id: 1, name: 'Ada' }]
-const columns = [{ accessorKey: 'name', header: 'Name' }]
+const stateControls = [
+  {
+    label: 'sorting',
+    value: '[{ id: "score", desc: true }]',
+  },
+  {
+    label: 'columnVisibility',
+    value: '{ owner: false }',
+  },
+  {
+    label: 'rowSelection',
+    value: '{ "issue-42": true }',
+  },
+  {
+    label: 'pagination',
+    value: '{ pageIndex: 2, pageSize: 25 }',
+  },
+]
+
+const frameworkAdapters = [
+  'React',
+  'Vue',
+  'Solid',
+  'Svelte',
+  'Qwik',
+  'Angular',
+  'Lit',
+  'Alpine',
+  'Vanilla',
+]
 
-export default function SimpleTable() {
-  const table = createSolidTable({ data, columns, getCoreRowModel: getCoreRowModel() })
+export default function TableLanding() {
+  const { version } = useParams({ strict: false })
+  const resolvedVersion = version ?? library.latestVersion
 
   return (
-    <table>
-      <thead>
-        {table.getHeaderGroups().map((hg) => (
-          <tr>
-            {hg.headers.map((header) => (
-              <th>{flexRender(header.column.columnDef.header, header.getContext())}</th>
-            ))}
-          </tr>
-        ))}
-      </thead>
-      <tbody>
-        {table.getRowModel().rows.map((row) => (
-          <tr>
-            {row.getVisibleCells().map((cell) => (
-              <td>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}`,
-    },
-    vue: {
-      lang: 'vue',
-      code: `<script setup lang="ts">
-import { useVueTable, getCoreRowModel, flexRender } from '@tanstack/vue-table'
-
-const data = [{ id: 1, name: 'Ada' }]
-const columns = [{ accessorKey: 'name', header: 'Name' }]
-const table = useVueTable({ data, columns, getCoreRowModel: getCoreRowModel() })
-</script>
-
-<template>
-  <table>
-    <thead>
-      <tr v-for="hg in table.getHeaderGroups()" :key="hg.id">
-        <th v-for="header in hg.headers" :key="header.id">
-          {{ flexRender(header.column.columnDef.header, header.getContext()) }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="row in table.getRowModel().rows" :key="row.id">
-        <td v-for="cell in row.getVisibleCells()" :key="cell.id">
-          {{ flexRender(cell.column.columnDef.cell, cell.getContext()) }}
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>`,
-    },
-    svelte: {
-      lang: 'svelte',
-      code: `<script lang="ts">
-  import { createSvelteTable, getCoreRowModel, flexRender } from '@tanstack/svelte-table'
-  const data = [{ id: 1, name: 'Ada' }]
-  const columns = [{ accessorKey: 'name', header: 'Name' }]
-  const table = createSvelteTable({ data, columns, getCoreRowModel: getCoreRowModel() })
-</script>
-
-<table>
-  <thead>
-    {#each table.getHeaderGroups() as hg}
-      <tr>
-        {#each hg.headers as header}
-          <th>{flexRender(header.column.columnDef.header, header.getContext())}</th>
-        {/each}
-      </tr>
-    {/each}
-  </thead>
-  <tbody>
-    {#each table.getRowModel().rows as row}
-      <tr>
-        {#each row.getVisibleCells() as cell}
-          <td>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
-        {/each}
-      </tr>
-    {/each}
-  </tbody>
-</table>`,
-    },
-    lit: {
-      lang: 'ts',
-      code: `import { LitElement, customElement, html } from 'lit'
-import { createLitTable, getCoreRowModel, flexRender } from '@tanstack/lit-table'
-
-const data = [{ id: 1, name: 'Ada' }]
-const columns = [{ accessorKey: 'name', header: 'Name' }]
-
-@customElement('simple-table')
-export class SimpleTable extends LitElement {
-  table = createLitTable({ data, columns, getCoreRowModel: getCoreRowModel() })
-
-  render() {
-    return html\`<table>
-      <thead>
-        \${this.table.getHeaderGroups().map((hg) => html\`<tr>
-          \${hg.headers.map((header) => html\`<th>\${flexRender(header.column.columnDef.header, header.getContext())}</th>\`)}
-        </tr>\`)}
-      </thead>
-      <tbody>
-        \${this.table.getRowModel().rows.map((row) => html\`<tr>
-          \${row.getVisibleCells().map((cell) => html\`<td>\${flexRender(cell.column.columnDef.cell, cell.getContext())}</td>\`)}
-        </tr>\`)}
-      </tbody>
-    </table>\`
-  }
-}`,
-    },
-    qwik: {
-      lang: 'tsx',
-      code: `import { component$ } from '@builder.io/qwik'
-import { createQwikTable, getCoreRowModel, flexRender } from '@tanstack/qwik-table'
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#f4f9ff] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-blue-950/10 bg-[#eef7ff] dark:border-blue-300/10 dark:bg-[#06101a]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<Grid3X3 size={14} />}>
+              Headless table engine
+            </SectionKicker>
+
+            <h1 className="mt-4 text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+              <LibraryWordmark library={library} />
+            </h1>
+
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              Build the table you actually designed.
+            </p>
+
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Table is the headless engine for rows, columns, sorting,
+              filtering, grouping, pagination, selection, and controlled state.
+              It gives you the hard parts of a data grid without taking over the
+              markup.
+            </p>
+
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
+
+            <p className="mt-4 max-w-xl border-l-2 border-blue-500 pl-3 text-sm font-black text-blue-800 dark:text-blue-200">
+              The most popular and most used data grid engine in the world.
+            </p>
+
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <TableLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={tableAgentPrompt}
+                label="Copy Table Prompt"
+              />
+            </div>
 
-const data = [{ id: 1, name: 'Ada' }]
-const columns = [{ accessorKey: 'name', header: 'Name' }]
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+            <LandingEcosystemProof />
+          </div>
 
-export default component$(() => {
-  const table = createQwikTable({ data, columns, getCoreRowModel: getCoreRowModel() })
-  return (
-    <table>
-      <thead>
-        {table.getHeaderGroups().map((hg) => (
-          <tr>
-            {hg.headers.map((header) => (
-              <th>{flexRender(header.column.columnDef.header, header.getContext())}</th>
-            ))}
-          </tr>
-        ))}
-      </thead>
-      <tbody>
-        {table.getRowModel().rows.map((row) => (
-          <tr>
-            {row.getVisibleCells().map((cell) => (
-              <td>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+          <TableWorkbenchPanel />
+        </div>
+      </section>
+
+      <section className="border-b border-blue-950/10 bg-[#f8fbff] dark:border-blue-300/10 dark:bg-[#08131f]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Layers size={14} />}>Why Table</SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              A data grid should not decide your UI system.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Most table libraries sell a finished component. TanStack Table
+              sells the engine underneath it, so your product can keep its own
+              design language, interaction model, accessibility choices, and
+              performance strategy.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
             ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <PipelinePanel />
+          <div>
+            <SectionKicker icon={<MoveHorizontal size={14} />}>
+              Row model pipeline
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Compose the exact table behavior the product needs.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Start with core rows, then opt into filtering, sorting, grouping,
+              expansion, pagination, selection, column sizing, and visibility.
+              Every feature is explicit, and every state slice can be
+              controlled.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.82fr_1.18fr] lg:items-start xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<SlidersHorizontal size={14} />}>
+              Controlled state
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Own the table state that matters.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Keep internal state for quick prototypes, then lift sorting,
+              filters, pagination, selection, visibility, sizing, or ordering
+              into your app when the product needs URL state, server queries, or
+              saved user preferences.
+            </p>
+          </div>
+
+          <ControlledStatePanel />
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<Grid3X3 size={14} />}>
+              Framework adapters
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              One table core, every renderer.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The table model is framework agnostic. Use the adapter that fits
+              the UI runtime, keep the same column definitions and feature
+              strategy, and render the table with your own components.
+            </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              {frameworkAdapters.map((framework) => (
+                <span
+                  key={framework}
+                  className="rounded-md border border-blue-200 bg-blue-50 px-3 py-1.5 text-sm font-bold text-blue-800 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-200"
+                >
+                  {framework}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div className="min-w-0 max-w-full overflow-hidden">
+            <LandingCodeExampleCard example={tableCodeExample} />
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#f4f9ff] py-12 dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<EyeOff size={14} />}>
+              Field notes
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              The best Table examples do not look alike.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              That is the point. TanStack Table powers shadcn-style data tables,
+              accessible React Aria tables, dense admin grids, custom filters,
+              and spreadsheet-like product surfaces because it stays below the
+              visual layer.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-8">
+          <LibraryTestimonials testimonials={tableProject.testimonials} />
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Table is shaped by the people building serious tables.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, framework adapters, partner integrations, examples,
+              and GitHub sponsors all keep the table engine close to real
+              product work.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="table" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
+
+      <LandingPageGad />
+      <BottomCTA
+        linkProps={{
+          to: '/$libraryId/$version/docs',
+          params: { libraryId: library.id, version: resolvedVersion },
+        }}
+        label="Get Started!"
+        className="border-blue-500 bg-blue-500 text-white hover:bg-blue-600"
+      />
+      <Footer />
+    </div>
   )
-})`,
-    },
-    vanilla: {
-      lang: 'ts',
-      code: `import { createTable, getCoreRowModel, flexRender } from '@tanstack/table-core'
-
-const data = [{ id: 1, name: 'Ada' }]
-const columns = [{ accessorKey: 'name', header: 'Name' }]
-
-const table = createTable({ data, columns, getCoreRowModel: getCoreRowModel() })
-
-const thead = document.querySelector('thead')!
-table.getHeaderGroups().forEach((hg) => {
-  const tr = document.createElement('tr')
-  hg.headers.forEach((header) => {
-    const th = document.createElement('th')
-    th.textContent = String(flexRender(header.column.columnDef.header, header.getContext()))
-    tr.appendChild(th)
+}
+
+function TableWorkbenchPanel() {
+  const [globalFilter, setGlobalFilter] = React.useState('')
+  const [statusFilter, setStatusFilter] =
+    React.useState<TableStatusFilter>('all')
+  const [sorting, setSorting] = React.useState<SortingState>([
+    { id: 'score', desc: true },
+  ])
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({
+    'issue-732': true,
+    'issue-681': true,
   })
-  thead.appendChild(tr)
-})
-
-const tbody = document.querySelector('tbody')!
-table.getRowModel().rows.forEach((row) => {
-  const tr = document.createElement('tr')
-  row.getVisibleCells().forEach((cell) => {
-    const td = document.createElement('td')
-    td.textContent = String(flexRender(cell.column.columnDef.cell, cell.getContext()))
-    tr.appendChild(td)
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({
+      owner: true,
+      score: true,
+      status: true,
+    })
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 4,
   })
-  tbody.appendChild(tr)
-})`,
-    },
-  }
+  const columnFilters = React.useMemo<ColumnFiltersState>(() => {
+    if (statusFilter === 'all') {
+      return []
+    }
 
-export default function TableLanding() {
-  const { version } = useParams({ strict: false })
-  const branch = getBranch(tableProject, version)
-  const [framework, setFramework] = useState<Framework>('react')
-  const sandboxFirstFileName = getExampleStartingPath(framework)
+    return [{ id: 'status', value: statusFilter }]
+  }, [statusFilter])
+  const columns = React.useMemo<Array<ColumnDef<TableIssue>>>(
+    () => [
+      {
+        id: 'select',
+        cell: ({ row }) => (
+          <input
+            aria-label={`Select ${row.original.project}`}
+            checked={row.getIsSelected()}
+            className="h-4 w-4 rounded border-zinc-300 text-blue-600"
+            type="checkbox"
+            onChange={() => row.toggleSelected()}
+          />
+        ),
+        enableSorting: false,
+        header: () => <span className="sr-only">Select rows</span>,
+      },
+      {
+        accessorKey: 'project',
+        cell: ({ row }) => row.original.project,
+        header: 'Project',
+      },
+      {
+        accessorKey: 'status',
+        cell: ({ row }) => <StatusBadge status={row.original.status} />,
+        filterFn: (row, _columnId, filterValue) =>
+          row.original.status === filterValue,
+        header: 'Status',
+      },
+      {
+        accessorKey: 'owner',
+        cell: ({ row }) => row.original.owner,
+        header: 'Owner',
+      },
+      {
+        accessorKey: 'score',
+        cell: ({ row }) => `${row.original.score}`,
+        header: 'Score',
+      },
+    ],
+    [],
+  )
+  const table = useReactTable({
+    columns,
+    data: tableRows,
+    enableRowSelection: true,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getRowId: (row) => row.id,
+    getSortedRowModel: getSortedRowModel(),
+    globalFilterFn: (row, _columnId, filterValue) => {
+      const search = String(filterValue).trim().toLowerCase()
+
+      if (!search) {
+        return true
+      }
+
+      return [row.original.project, row.original.owner, row.original.status]
+        .join(' ')
+        .toLowerCase()
+        .includes(search)
+    },
+    onColumnVisibilityChange: setColumnVisibility,
+    onGlobalFilterChange: setGlobalFilter,
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    state: {
+      columnFilters,
+      columnVisibility,
+      globalFilter,
+      pagination,
+      rowSelection,
+      sorting,
+    },
+  })
+  const filteredRowsCount = table.getFilteredRowModel().rows.length
+  const selectedRowsCount = table.getSelectedRowModel().rows.length
+  const pageCount = table.getPageCount()
 
-  const selectedCode = codeExamples[framework]
+  React.useEffect(() => {
+    setPagination((current) => ({
+      ...current,
+      pageIndex: 0,
+    }))
+  }, [globalFilter, statusFilter])
 
   return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={tableProject}
-        cta={{
-          linkProps: {
-            to: '/$libraryId/$version/docs',
-            params: { libraryId: library.id, version },
-          },
-          label: 'Get Started',
-          className: 'bg-blue-500 border-blue-500 hover:bg-blue-600 text-white',
-        }}
-      />
-
-      <LibraryStatsSection library={library} />
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-blue-200 bg-white p-4 shadow-sm shadow-blue-950/5 dark:border-blue-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          table instance
+        </span>
+      </div>
 
-      {/* Custom code example card with fallback for unsupported frameworks */}
-      <div className="px-4 space-y-4 flex flex-col items-center">
-        <div className="text-3xl font-black">Just a quick look...</div>
-        <Card className="group relative overflow-hidden max-w-full mx-auto [&_pre]:bg-transparent! [&_pre]:p-4!">
-          <FrameworkIconTabs
-            frameworks={tableProject.frameworks}
-            value={framework}
-            onChange={setFramework}
+      <div className="mt-4 grid gap-3 lg:grid-cols-[1fr_auto]">
+        <label className="flex min-w-0 items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900">
+          <Search
+            aria-hidden="true"
+            className="shrink-0 text-blue-700 dark:text-blue-300"
+            size={16}
+          />
+          <span className="sr-only">Search table rows</span>
+          <input
+            className="min-w-0 flex-1 bg-transparent text-sm font-bold text-zinc-950 outline-none placeholder:text-zinc-400 dark:text-white"
+            placeholder="Search projects or owners"
+            value={globalFilter}
+            onChange={(event) => setGlobalFilter(event.target.value)}
           />
-          {selectedCode ? (
-            <CodeBlock className="mt-0 border-0" showTypeCopyButton={false}>
-              <code className={`language-${selectedCode.lang}`}>
-                {selectedCode.code}
-              </code>
-            </CodeBlock>
-          ) : (
-            <div className="p-6 text-center text-lg w-full bg-gray-900 text-white">
-              Looking for the <strong>@tanstack/{framework}-table</strong>{' '}
-              example? We could use your help to build the{' '}
-              <strong>@tanstack/{framework}-table</strong> adapter! Join the{' '}
-              <a
-                href="https://tlinz.com/discord"
-                className="text-teal-400 font-bold underline"
+        </label>
+        <div className="flex flex-wrap gap-2">
+          {tableStatusFilters.map((filter) => (
+            <button
+              key={filter.value}
+              aria-pressed={statusFilter === filter.value}
+              className={
+                statusFilter === filter.value
+                  ? 'rounded-md border border-blue-600 bg-blue-600 px-3 py-2 text-xs font-black text-white'
+                  : 'rounded-md border border-zinc-200 bg-white px-3 py-2 text-xs font-black text-zinc-700 transition-colors hover:border-blue-300 hover:text-blue-800 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300 dark:hover:border-blue-700 dark:hover:text-blue-200'
+              }
+              type="button"
+              onClick={() => setStatusFilter(filter.value)}
+            >
+              {filter.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-3 flex flex-wrap items-center justify-between gap-2">
+        <div className="flex flex-wrap gap-2">
+          {['owner', 'status', 'score'].map((columnId) => {
+            const column = table.getColumn(columnId)
+            const isVisible = column?.getIsVisible() ?? false
+
+            return (
+              <button
+                key={columnId}
+                aria-pressed={isVisible}
+                className={
+                  isVisible
+                    ? 'rounded-md border border-blue-200 bg-blue-50 px-3 py-1.5 text-xs font-black capitalize text-blue-800 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-200'
+                    : 'rounded-md border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-xs font-black capitalize text-zinc-500 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-500'
+                }
+                type="button"
+                onClick={() => column?.toggleVisibility()}
+              >
+                {columnId}
+              </button>
+            )
+          })}
+        </div>
+        <span className="text-xs font-black text-zinc-500 dark:text-zinc-400">
+          {filteredRowsCount} rows / {selectedRowsCount} selected
+        </span>
+      </div>
+
+      <div className="mt-4 overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-800">
+        <table className="w-full table-fixed border-collapse text-left text-sm">
+          <thead className="border-b border-zinc-200 bg-blue-50 text-xs font-black uppercase text-blue-950 dark:border-zinc-800 dark:bg-blue-950/30 dark:text-blue-100">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    className={getTableHeroCellClassName(header.column.id)}
+                    scope="col"
+                  >
+                    {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                      <button
+                        className="flex w-full min-w-0 items-center gap-1 text-left"
+                        type="button"
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        <span className="truncate">
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                        </span>
+                        {header.column.getIsSorted() === 'asc' ? (
+                          <ChevronUp aria-hidden="true" size={13} />
+                        ) : header.column.getIsSorted() === 'desc' ? (
+                          <ChevronDown aria-hidden="true" size={13} />
+                        ) : null}
+                      </button>
+                    ) : (
+                      flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )
+                    )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody className="divide-y divide-zinc-200 dark:divide-zinc-800">
+            {table.getRowModel().rows.map((row) => (
+              <tr
+                key={row.id}
+                className={
+                  row.getIsSelected()
+                    ? 'bg-blue-50/80 dark:bg-blue-950/25'
+                    : 'bg-white dark:bg-zinc-950'
+                }
               >
-                TanStack Discord Server
-              </a>{' '}
-              and let's get to work!
+                {row.getVisibleCells().map((cell) => (
+                  <td
+                    key={cell.id}
+                    className={getTableHeroCellClassName(cell.column.id)}
+                  >
+                    <span className="block truncate font-bold text-zinc-900 dark:text-zinc-100">
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </span>
+                  </td>
+                ))}
+              </tr>
+            ))}
+            {table.getRowModel().rows.length === 0 ? (
+              <tr>
+                <td
+                  className="px-3 py-6 text-center text-sm font-bold text-zinc-500 dark:text-zinc-400"
+                  colSpan={table.getVisibleLeafColumns().length}
+                >
+                  No matching rows
+                </td>
+              </tr>
+            ) : null}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mt-4 grid gap-3 sm:grid-cols-[1fr_auto] sm:items-center">
+        <div className="grid gap-3 sm:grid-cols-3">
+          {[
+            ['Filtered', statusFilter === 'all' ? 'all rows' : statusFilter],
+            [
+              'Sorted',
+              sorting[0]
+                ? `${sorting[0].id} ${sorting[0].desc ? 'desc' : 'asc'}`
+                : 'none',
+            ],
+            ['Selected', `${selectedRowsCount} rows`],
+          ].map(([label, value]) => (
+            <div
+              key={label}
+              className="rounded-lg bg-blue-50 p-3 dark:bg-blue-950/25"
+            >
+              <p className="text-[0.65rem] font-black uppercase text-blue-700 dark:text-blue-300">
+                {label}
+              </p>
+              <p className="mt-1 truncate text-sm font-black text-blue-950 dark:text-blue-100">
+                {value}
+              </p>
             </div>
-          )}
-        </Card>
+          ))}
+        </div>
+        <div className="flex items-center justify-end gap-2">
+          <button
+            className="rounded-md border border-zinc-200 px-3 py-2 text-xs font-black text-zinc-700 transition-colors hover:border-blue-300 hover:text-blue-800 disabled:cursor-not-allowed disabled:opacity-40 dark:border-zinc-800 dark:text-zinc-300 dark:hover:border-blue-700 dark:hover:text-blue-200"
+            disabled={!table.getCanPreviousPage()}
+            type="button"
+            onClick={() => table.previousPage()}
+          >
+            Prev
+          </button>
+          <span className="min-w-[3.25rem] text-center text-xs font-black text-zinc-500 dark:text-zinc-400">
+            {Math.min(
+              table.getState().pagination.pageIndex + 1,
+              pageCount || 1,
+            )}{' '}
+            / {Math.max(pageCount, 1)}
+          </span>
+          <button
+            className="rounded-md border border-zinc-200 px-3 py-2 text-xs font-black text-zinc-700 transition-colors hover:border-blue-300 hover:text-blue-800 disabled:cursor-not-allowed disabled:opacity-40 dark:border-zinc-800 dark:text-zinc-300 dark:hover:border-blue-700 dark:hover:text-blue-200"
+            disabled={!table.getCanNextPage()}
+            type="button"
+            onClick={() => table.nextPage()}
+          >
+            Next
+          </button>
+        </div>
       </div>
+    </div>
+  )
+}
 
-      <LibraryFeatureHighlights
-        featureHighlights={tableProject.featureHighlights}
-      />
+function StatusBadge({ status }: { status: TableIssue['status'] }) {
+  const className =
+    status === 'active'
+      ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-200'
+      : status === 'review'
+        ? 'bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-200'
+        : 'bg-blue-100 text-blue-800 dark:bg-blue-950/60 dark:text-blue-200'
 
-      <LibraryTestimonials testimonials={tableProject.testimonials} />
-
-      <FeatureGrid
-        title="Framework Agnostic & Feature Rich"
-        items={[
-          'Lightweight (10 - 15kb)',
-          'Tree-Shaking',
-          'Headless',
-          'Cell Formatters',
-          'Auto-managed internal state',
-          'Opt-in fully controlled state',
-          'Sorting',
-          'Multi Sort',
-          'Global Filters',
-          'Columns Filters',
-          'Pagination',
-          'Row Grouping',
-          'Aggregation',
-          'Row Selection',
-          'Row Expansion',
-          'Column Ordering',
-          'Column Visibility',
-          'Column Resizing',
-          'Virtualizable',
-          'Server-side/external Data',
-          'Nested/Grouped Headers',
-          'Footers',
-        ]}
-        gridClassName="grid grid-flow-row grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-10 gap-y-4 mx-auto"
-      />
+  return (
+    <span className={`rounded-md px-2 py-1 text-xs font-black ${className}`}>
+      {status}
+    </span>
+  )
+}
 
-      <div className="flex flex-col gap-4">
-        <div className="px-4 sm:px-6 lg:px-8 mx-auto container max-w-3xl">
-          <h3 className="text-3xl font-bold">Take it for a spin!</h3>
-          <p className="my-4 text-xl leading-7 text-gray-600">
-            With some basic styles, some table markup and few columns, you're
-            already well on your way to creating a drop-dead powerful table.
+function getTableHeroCellClassName(columnId: string) {
+  if (columnId === 'select') {
+    return 'w-10 px-3 py-3'
+  }
+
+  if (columnId === 'score') {
+    return 'w-[4.5rem] px-3 py-3'
+  }
+
+  if (columnId === 'status') {
+    return 'w-[6.5rem] px-3 py-3'
+  }
+
+  if (columnId === 'owner') {
+    return 'w-24 px-3 py-3'
+  }
+
+  return 'min-w-0 px-3 py-3'
+}
+
+function PipelinePanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {pipelineSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-[#f8fbff] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <div className="flex items-start justify-between gap-4">
+            <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-200">
+              {step.icon}
+            </span>
+            <span className="rounded-md bg-zinc-100 px-2 py-1 text-[0.65rem] font-black uppercase text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
+              {index + 1}
+            </span>
+          </div>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
           </p>
         </div>
+      ))}
+    </div>
+  )
+}
+
+function ControlledStatePanel() {
+  return (
+    <div className="min-w-0 rounded-lg border border-blue-200 bg-white p-4 dark:border-blue-900 dark:bg-zinc-950">
+      <div className="rounded-lg bg-zinc-950 p-4 text-sm text-blue-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          state: {'{'}
+          <br />
+          &nbsp;&nbsp;sorting,
+          <br />
+          &nbsp;&nbsp;columnVisibility,
+          <br />
+          &nbsp;&nbsp;rowSelection,
+          <br />
+          &nbsp;&nbsp;pagination
+          <br />
+          {'}'}
+        </p>
       </div>
 
-      <div className="px-4">
-        <div className="relative w-full bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow-xl">
-          <FrameworkIconTabs
-            frameworks={tableProject.frameworks}
-            value={framework}
-            onChange={setFramework}
-          />
-          <StackBlitzEmbed
-            repo={tableProject.repo}
-            branch={branch}
-            examplePath={`examples/${framework}/basic`}
-            file={sandboxFirstFileName}
-            title="tannerlinsley/react-table: basic"
-          />
-        </div>
+      <div className="mt-4 grid gap-3 md:grid-cols-2">
+        {stateControls.map((control) => (
+          <div
+            key={control.label}
+            className="rounded-lg border border-zinc-200 bg-[#f8fbff] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <p className="text-[0.65rem] font-black uppercase text-zinc-500 dark:text-zinc-400">
+              {control.label}
+            </p>
+            <p className="mt-2 break-words font-mono text-sm font-black leading-6 text-zinc-950 dark:text-white">
+              {control.value}
+            </p>
+          </div>
+        ))}
       </div>
+    </div>
+  )
+}
 
-      <MaintainersSection libraryId="table" />
-      <PartnersSection libraryId="table" />
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-200">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
 
-      <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
-        <LibraryShowcases libraryId="table" libraryName="TanStack Table" />
-      </div>
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-blue-700 dark:text-blue-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
 
-      <LazySponsorSection />
-      <LandingPageGad />
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-blue-500 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
 
-      <BottomCTA
-        linkProps={{
-          to: '/$libraryId/$version/docs',
-          params: { libraryId: library.id, version },
-        }}
-        label="Get Started!"
-        className="bg-teal-500 border-teal-500 hover:bg-teal-600 text-white"
-      />
-      <Footer />
-    </LibraryPageContainer>
+function TableLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
   )
 }
diff --git a/src/components/landing/VirtualLanding.tsx b/src/components/landing/VirtualLanding.tsx
index 7902038ef..526b9c050 100644
--- a/src/components/landing/VirtualLanding.tsx
+++ b/src/components/landing/VirtualLanding.tsx
@@ -1,237 +1,1383 @@
-import { useState } from 'react'
-import { useParams } from '@tanstack/react-router'
-import { virtualProject } from '~/libraries/virtual'
-import { getLibrary } from '~/libraries'
-import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
-import { Footer } from '~/components/Footer'
-import { LibraryHero } from '~/components/LibraryHero'
-import { FeatureGrid } from '~/components/FeatureGrid'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowDownToLine,
+  ArrowRight,
+  BookOpen,
+  BoxSelect,
+  Eye,
+  Gauge,
+  Grid3X3,
+  History,
+  List,
+  MessageSquareText,
+  MoveHorizontal,
+  MousePointer2,
+  Pause,
+  Play,
+  Ruler,
+  Scaling,
+  Send,
+  Sparkles,
+  StretchHorizontal,
+  Timer,
+} from 'lucide-react'
+
 import { BottomCTA } from '~/components/BottomCTA'
-import { StackBlitzEmbed } from '~/components/StackBlitzEmbed'
-import { FrameworkIconTabs } from '~/components/FrameworkIconTabs'
-import { Framework, getBranch } from '~/libraries'
-import LandingPageGad from '~/components/LandingPageGad'
-import { PartnersSection } from '~/components/PartnersSection'
-import { MaintainersSection } from '~/components/MaintainersSection'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
 import { LibraryTestimonials } from '~/components/LibraryTestimonials'
-import { LibraryPageContainer } from '~/components/LibraryPageContainer'
-import { LibraryStatsSection } from '~/components/LibraryStatsSection'
-import { CodeExampleCard } from '~/components/CodeExampleCard'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
+import LandingPageGad from '~/components/LandingPageGad'
+import { getLibrary } from '~/libraries'
+import { virtualProject } from '~/libraries/virtual'
+import { LandingCodeExampleCard } from '~/components/landing/LandingCodeExampleCard'
+import { virtualCodeExample } from '~/components/landing/codeExamples'
+import { usePrefersReducedMotion } from '~/utils/usePrefersReducedMotion'
 
+import { LandingEcosystemProof } from '~/components/landing/LandingEcosystemProof'
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
 const library = getLibrary('virtual')
+const virtualAgentPrompt = [
+  'Build a TanStack Virtual experience for a TypeScript app.',
+  'Use a headless virtualizer for a large list or grid, render only visible items plus overscan, support dynamic measurement where rows can change size, and keep the scroll container/markup owned by the product UI.',
+  'Include smooth scrolling, sticky affordances where useful, and clear empty/loading states without replacing the app design system.',
+].join(' ')
 
-const codeExamples: Partial<Record<Framework, { lang: string; code: string }>> =
-  {
-    react: {
-      lang: 'tsx',
-      code: `import { useVirtualizer } from '@tanstack/react-virtual'
-
-const rowVirtualizer = useVirtualizer({
-  count: 1000,
-  getScrollElement: () => parentRef.current,
-  estimateSize: () => 36,
-})
-// Map virtual rows to your UI`,
-    },
-    solid: {
-      lang: 'tsx',
-      code: `import { createVirtualizer } from '@tanstack/solid-virtual'
-
-const parentRef: HTMLElement | undefined = undefined
-
-const rowVirtualizer = createVirtualizer({
-  count: 1000,
-  getScrollElement: () => parentRef!,
-  estimateSize: () => 36,
-})
-// Map rowVirtualizer.getVirtualItems() to your UI`,
-    },
-    vue: {
-      lang: 'vue',
-      code: `<script setup lang="ts">
-import { ref } from 'vue'
-import { useVirtualizer } from '@tanstack/vue-virtual'
-
-const parentRef = ref<HTMLElement | null>(null)
-
-const rowVirtualizer = useVirtualizer({
-  count: 1000,
-  getScrollElement: () => parentRef.value!,
-  estimateSize: () => 36,
-})
-</script>
-
-<template>
-  <div ref="parentRef" style="overflow: auto; height: 300px">
-    <!-- Render rowVirtualizer.getVirtualItems() -->
-  </div>
-</template>`,
-    },
-    svelte: {
-      lang: 'svelte',
-      code: `<script lang="ts">
-  import { createVirtualizer } from '@tanstack/svelte-virtual'
-  let parentRef: HTMLDivElement
-  const rowVirtualizer = createVirtualizer({
-    count: 1000,
-    getScrollElement: () => parentRef,
-    estimateSize: () => 36,
-  })
-</script>
-
-<div bind:this={parentRef} style="overflow:auto; height:300px">
-  <!-- Render $rowVirtualizer.getVirtualItems() -->
-</div>`,
-    },
-    angular: {
-      lang: 'ts',
-      code: `import { Component, ElementRef, viewChild } from '@angular/core'
-import { createAngularVirtualizer } from '@tanstack/angular-virtual'
-
-@Component({
-  standalone: true,
-  selector: 'virtual-list',
-  template: '<div #parent style="overflow:auto; height:300px"></div>',
-})
-export class VirtualListComponent {
-  parent = viewChild.required<ElementRef<HTMLDivElement>>('parent')
-  virtualizer = createAngularVirtualizer(() => ({
-    count: 1000,
-    getScrollElement: () => this.parent().nativeElement,
-    estimateSize: () => 36,
-  }))
-}`,
-    },
-    lit: {
-      lang: 'ts',
-      code: `import { LitElement, customElement, html } from 'lit'
-import { createLitVirtualizer } from '@tanstack/lit-virtual'
-
-@customElement('virtual-list')
-export class VirtualList extends LitElement {
-  private parent?: HTMLDivElement
-  virtualizer = createLitVirtualizer({
-    count: 1000,
-    getScrollElement: () => this.parent!,
-    estimateSize: () => 36,
-  })
-
-  render() {
-    return html\`<div style="overflow:auto; height:300px"></div>\`
-  }
-}`,
-    },
-  }
+const heroProof = [
+  {
+    label: 'Visible window',
+    value: 'render the viewport, not the dataset',
+  },
+  {
+    label: 'Measured sizing',
+    value: 'fixed, variable, dynamic rows',
+  },
+  {
+    label: 'Headless scroll',
+    value: 'own the container, markup, and styles',
+  },
+]
+
+const virtualDemoRows = Array.from({ length: 34 }, (_, index) => ({
+  label: `Row ${index + 180}`,
+  height: [34, 52, 42, 66, 38, 58, 46, 74, 40][index % 9],
+}))
+
+const featureCards = [
+  {
+    title: 'The DOM stays small while the list stays huge.',
+    body: 'Virtual calculates the visible range, pads the scroll space, and lets you render only the items the user can actually see.',
+    icon: <Eye size={18} />,
+  },
+  {
+    title: 'Measurement handles real content.',
+    body: 'Use fixed sizes when you can, measured dynamic sizes when content varies, and overscan to keep fast scrolling smooth.',
+    icon: <Ruler size={18} />,
+  },
+  {
+    title: 'Scroll containers stay product-owned.',
+    body: 'Window scrolling, element scrolling, grids, lanes, sticky UI, and custom markup remain your responsibility and your freedom.',
+    icon: <MousePointer2 size={18} />,
+  },
+  {
+    title: 'It composes with the rest of the stack.',
+    body: 'Pair Virtual with Table for giant grids, Query for paged data, Router for URL state, or your own renderer for anything else.',
+    icon: <Sparkles size={18} />,
+  },
+]
+
+const pipelineSteps = [
+  {
+    label: 'Count',
+    body: 'Tell the virtualizer how many things exist, even if most of them are not mounted.',
+  },
+  {
+    label: 'Estimate',
+    body: 'Start from a stable size estimate so the scroll range is known immediately.',
+  },
+  {
+    label: 'Measure',
+    body: 'Let dynamic items report real sizes as content loads or expands.',
+  },
+  {
+    label: 'Render',
+    body: 'Map virtual items to your own absolutely positioned rows, cells, or cards.',
+  },
+]
+
+const virtualModes = [
+  {
+    title: 'Vertical lists',
+    body: 'Feeds, menus, logs, timelines, search results, and long admin indexes.',
+    icon: <List size={18} />,
+  },
+  {
+    title: 'Horizontal lanes',
+    body: 'Calendars, kanban lanes, timelines, image strips, and dense inspectors.',
+    icon: <MoveHorizontal size={18} />,
+  },
+  {
+    title: 'Grid surfaces',
+    body: 'Rows and columns that need windowing without adopting a canned grid UI.',
+    icon: <Grid3X3 size={18} />,
+  },
+]
+
+type VirtualAlign = 'start' | 'center' | 'end'
+
+type VirtualScrollAction =
+  | {
+      align: VirtualAlign
+      code: string
+      detail: string
+      index: number
+      kind: 'index'
+      label: string
+    }
+  | {
+      code: string
+      detail: string
+      kind: 'offset'
+      label: string
+      offset: number
+    }
+  | {
+      code: string
+      detail: string
+      kind: 'end'
+      label: string
+    }
+
+const virtualScrollActions: Array<VirtualScrollAction> = [
+  {
+    kind: 'index',
+    label: 'Row 180',
+    detail: 'start align',
+    code: 'virtualizer.scrollToIndex(180)',
+    index: 0,
+    align: 'start',
+  },
+  {
+    kind: 'index',
+    label: 'Row 198',
+    detail: 'center align',
+    code: "virtualizer.scrollToIndex(198, { align: 'center' })",
+    index: 18,
+    align: 'center',
+  },
+  {
+    kind: 'offset',
+    label: 'Offset 640',
+    detail: 'pixel scroll',
+    code: 'virtualizer.scrollToOffset(640)',
+    offset: 640,
+  },
+  {
+    kind: 'end',
+    label: 'End',
+    detail: 'latest edge',
+    code: 'virtualizer.scrollToEnd()',
+  },
+]
+
+type VirtualChatRole = 'assistant' | 'tool' | 'user'
+
+type VirtualChatMessage = {
+  body: string
+  id: string
+  role: VirtualChatRole
+  status?: string
+}
+
+type VirtualChatAnchor = {
+  id: string
+  offset: number
+}
+
+const initialChatMessages: Array<VirtualChatMessage> = [
+  {
+    id: 'm-07',
+    role: 'user',
+    body: 'Can you summarize the alerts from the last deploy?',
+  },
+  {
+    id: 'm-08',
+    role: 'assistant',
+    body: 'Three services reported higher latency, but only search crossed the user-visible threshold. I would start with the cache miss spike at 14:42.',
+  },
+  {
+    id: 'm-09',
+    role: 'tool',
+    body: 'query deploy_events --service search --window 30m',
+    status: 'tool result',
+  },
+  {
+    id: 'm-10',
+    role: 'assistant',
+    body: 'The slow requests line up with a schema warmup path. The good news: the regression is isolated and the route recovered after the cache filled.',
+  },
+  {
+    id: 'm-11',
+    role: 'user',
+    body: 'Draft the follow-up for the incident channel.',
+  },
+  {
+    id: 'm-12',
+    role: 'assistant',
+    body: 'Posted a concise update: cause, impact window, current status, and one owner for the follow-up patch.',
+  },
+]
+
+const olderChatMessages: Array<VirtualChatMessage> = [
+  {
+    id: 'm-01',
+    role: 'user',
+    body: 'Start a deploy review and keep the message list pinned unless I scroll away.',
+  },
+  {
+    id: 'm-02',
+    role: 'assistant',
+    body: 'I will keep the latest turn visible while new output streams, and preserve this exact reading position if older history loads above it.',
+  },
+  {
+    id: 'm-03',
+    role: 'tool',
+    body: 'fetch traces --cursor before:m-07 --limit 50',
+    status: 'prepended',
+  },
+  {
+    id: 'm-04',
+    role: 'assistant',
+    body: 'Older context loaded without shifting the visible message. That is the part chat UIs usually end up rebuilding by hand.',
+  },
+  {
+    id: 'm-05',
+    role: 'user',
+    body: 'Keep going if the model response grows.',
+  },
+  {
+    id: 'm-06',
+    role: 'assistant',
+    body: 'Streaming output can resize the last row over and over while the viewport stays anchored to the end.',
+  },
+]
+
+const chatStreamChunks = [
+  'Virtual treats chat as an end-anchored list.',
+  'Older history can be prepended while the current message keeps its visual position.',
+  'When the user is already at the latest message, appended tokens keep following the end.',
+  'If the user scrolls up to read, new output lands below without stealing the viewport.',
+]
+
+const frameworkAdapters = ['React', 'Vue', 'Solid', 'Svelte', 'Lit', 'Angular']
 
 export default function VirtualLanding() {
   const { version } = useParams({ strict: false })
-  const [framework, setFramework] = useState<Framework>('react')
-  const branch = getBranch(virtualProject, version)
+  const resolvedVersion = version ?? library.latestVersion
 
   return (
-    <LibraryPageContainer>
-      <LibraryHero
-        project={virtualProject}
-        cta={{
-          linkProps: {
-            to: '/$libraryId/$version/docs',
-            params: { libraryId: library.id, version },
-          },
-          label: 'Get Started',
-          className:
-            'bg-purple-500 border-purple-500 hover:bg-purple-600 text-white',
-        }}
-      />
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#fbf7ff] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-purple-950/10 bg-[#f8f0ff] dark:border-purple-300/10 dark:bg-[#120818]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<StretchHorizontal size={14} />}>
+              Headless virtualization
+            </SectionKicker>
 
-      <LibraryStatsSection library={library} />
+            <h1 className="mt-4 text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+              <LibraryWordmark library={library} />
+            </h1>
 
-      <CodeExampleCard
-        frameworks={virtualProject.frameworks}
-        codeByFramework={codeExamples}
-      />
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              Massive scroll surfaces without massive DOM.
+            </p>
 
-      <LibraryFeatureHighlights
-        featureHighlights={virtualProject.featureHighlights}
-      />
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Virtual calculates the visible window for long lists, grids, and
+              scroll containers so your app can keep the markup, layout, and
+              design while rendering only the work the user can see.
+            </p>
 
-      <LibraryTestimonials testimonials={virtualProject.testimonials} />
-
-      <FeatureGrid
-        title="Framework Agnostic & Feature Rich"
-        items={[
-          'Lightweight (10 - 15kb)',
-          'Tree-Shaking',
-          'Headless',
-          'Vertical/Column Virtualization',
-          'Horizontal/Row Virtualization',
-          'Grid Virtualization',
-          'Window-Scrolling',
-          'Fixed Sizing',
-          'Variable Sizing',
-          'Dynamic/Measured Sizing',
-          'Scrolling Utilities',
-          'Sticky Items',
-        ]}
-        gridClassName="grid grid-flow-row grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-10 gap-y-4 mx-auto"
-      />
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
 
-      <div className="flex flex-col gap-4">
-        <div className="px-4 sm:px-6 lg:px-8 mx-auto container max-w-3xl">
-          <h3 className="text-3xl font-bold">Take it for a spin!</h3>
-          <p className="my-4 text-xl leading-7 text-gray-600">
-            With just a few divs and some inline styles, you're already well on
-            your way to creating an extremely powerful virtualization
-            experience.
-          </p>
+            <p className="mt-4 max-w-xl border-l-2 border-purple-500 pl-3 text-sm font-black text-purple-800 dark:text-purple-200">
+              The most popular and most used virtualization engine for modern
+              web apps.
+            </p>
+
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <VirtualLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={virtualAgentPrompt}
+                label="Copy Virtual Prompt"
+              />
+            </div>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+            <LandingEcosystemProof />
+          </div>
+
+          <VirtualWindowPanel />
         </div>
-      </div>
+      </section>
 
-      <div className="px-4">
-        <div className="relative w-full bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow-xl">
-          <FrameworkIconTabs
-            frameworks={virtualProject.frameworks}
-            value={framework}
-            onChange={setFramework}
-          />
-          {['vue', 'solid', 'svelte'].includes(framework) ? (
-            <div className="p-6 text-center text-lg w-full bg-black text-white">
-              Looking for the <strong>@tanstack/{framework}-virtual</strong>{' '}
-              example? We could use your help to build the{' '}
-              <strong>@tanstack/{framework}-virtual</strong> adapter! Join the{' '}
-              <a
-                href="https://tlinz.com/discord"
-                className="text-teal-500 font-bold"
-              >
-                TanStack Discord Server
-              </a>{' '}
-              and let's get to work!
+      <section className="border-b border-purple-950/10 bg-[#fcf8ff] dark:border-purple-300/10 dark:bg-[#160b1d]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Gauge size={14} />}>
+              Why Virtual
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Performance is a layout problem before it is a rendering problem.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Virtualization is not just fewer nodes. It is scroll math,
+              measurement, overscan, dynamic content, and container ownership.
+              Virtual gives you those primitives without forcing a visual
+              component on top.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <PipelinePanel />
+          <div>
+            <SectionKicker icon={<Timer size={14} />}>
+              Virtualizer lifecycle
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Keep the scroll range honest while the DOM stays lean.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Estimate first, measure when needed, then render virtual items
+              into your own row, card, cell, or lane components. The API is
+              small because the layout remains yours.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#f4fbff] dark:border-zinc-800 dark:bg-[#071016]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.76fr_1.24fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<MessageSquareText size={14} />}>
+              AI chat virtualization
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Chat scroll is backwards, streaming, and constantly resizing.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Chat, agents, copilots, logs, and support inboxes need end
+              anchoring, stable prepends, append-follow, and a reliable way to
+              jump back to the latest turn. Virtual now models those behaviors
+              as scroll primitives instead of app-specific bookkeeping.
+            </p>
+            <div className="mt-5 grid gap-3 sm:grid-cols-2">
+              {[
+                ['anchorTo', "'end' keeps the latest edge stable"],
+                ['followOnAppend', 'follow only when already pinned'],
+                ['scrollToEnd', 'wire a Latest control to the API'],
+                ['measureElement', 'let streamed bubbles grow naturally'],
+              ].map(([label, value]) => (
+                <div key={label} className="border-l-2 border-sky-500 pl-3">
+                  <p className="font-mono text-sm font-black text-sky-800 dark:text-sky-200">
+                    {label}
+                  </p>
+                  <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+                    {value}
+                  </p>
+                </div>
+              ))}
             </div>
-          ) : (
-            <StackBlitzEmbed
-              repo={virtualProject.repo}
-              branch={branch}
-              examplePath={`examples/${framework}/fixed`}
-              title="tannerlinsley/react-virtual: fixed"
-            />
-          )}
+          </div>
+
+          <VirtualChatPanel />
         </div>
-      </div>
+      </section>
 
-      <MaintainersSection libraryId="virtual" />
-      <PartnersSection libraryId="virtual" />
-      <LazySponsorSection />
-      <LandingPageGad />
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.82fr_1.18fr] lg:items-start xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<BoxSelect size={14} />}>
+              Scroll surfaces
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Lists, lanes, and grids all share the same windowing idea.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              A virtualizer is a calculation layer. Whether the output becomes a
+              vertical feed, a horizontal timeline, or a two-dimensional grid,
+              the product keeps control of the actual experience.
+            </p>
+          </div>
+
+          <ModePanel />
+        </div>
+      </section>
 
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<Scaling size={14} />}>
+              Framework adapters
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              The same virtual math across UI runtimes.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Use the adapter that fits your framework, or work from the core.
+              The virtual range, measurements, and scroll behavior stay focused
+              on the data and container instead of the renderer.
+            </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              {frameworkAdapters.map((framework) => (
+                <span
+                  key={framework}
+                  className="rounded-md border border-purple-200 bg-purple-50 px-3 py-1.5 text-sm font-bold text-purple-800 dark:border-purple-900 dark:bg-purple-950/40 dark:text-purple-200"
+                >
+                  {framework}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div className="min-w-0 max-w-full overflow-hidden">
+            <LandingCodeExampleCard example={virtualCodeExample} />
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fbf7ff] py-12 dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<Gauge size={14} />}>
+              Field notes
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Smooth scrolling is table stakes. Owning the surface is the point.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              The existing copy had the right spirit: a tiny API for vertical,
+              horizontal, and grid-style virtualization, with all the design
+              control left in your hands.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-8">
+          <LibraryTestimonials testimonials={virtualProject.testimonials} />
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Virtual is small because the community keeps it sharp.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, adapters, examples, partners, and GitHub sponsors
+              keep the virtualization core close to real scrolling problems.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="virtual" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
+
+      <LandingPageGad />
       <BottomCTA
         linkProps={{
           to: '/$libraryId/$version/docs',
-          params: { libraryId: library.id, version },
+          params: { libraryId: library.id, version: resolvedVersion },
         }}
         label="Get Started!"
-        className="bg-purple-500 border-purple-500 hover:bg-purple-600 text-white"
+        className="border-purple-500 bg-purple-500 text-white hover:bg-purple-600"
       />
       <Footer />
-    </LibraryPageContainer>
+    </div>
+  )
+}
+
+function VirtualWindowPanel() {
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const scrollContainerRef = React.useRef<HTMLDivElement>(null)
+  const scrollOffsetRef = React.useRef(0)
+  const isProgrammaticScrollRef = React.useRef(false)
+  const programmaticScrollResetRef = React.useRef<number | null>(null)
+  const [scrollOffset, setScrollOffset] = React.useState(0)
+  const [isAutoScrolling, setIsAutoScrolling] = React.useState(false)
+  const [lastScrollOperation, setLastScrollOperation] = React.useState(
+    virtualScrollActions[0]?.code ?? 'virtualizer.scrollToIndex(180)',
+  )
+  const viewportHeight = 320
+  const overscan = 96
+  const measurements = React.useMemo(() => {
+    let start = 0
+
+    return virtualDemoRows.map((row) => {
+      const measurement = {
+        ...row,
+        start,
+        end: start + row.height,
+      }
+
+      start += row.height + 8
+
+      return measurement
+    })
+  }, [])
+  const totalSize = measurements[measurements.length - 1]?.end ?? 0
+  const maxOffset = Math.max(totalSize - viewportHeight, 0)
+  const activeStart = scrollOffset
+  const activeEnd = scrollOffset + viewportHeight
+  const mountedRows = measurements.filter(
+    (row) =>
+      row.end >= activeStart - overscan && row.start <= activeEnd + overscan,
+  )
+  const activeRows = mountedRows.filter(
+    (row) => row.end >= activeStart && row.start <= activeEnd,
+  )
+  const isRowMounted = (row: { end: number; start: number }) =>
+    row.end >= activeStart - overscan && row.start <= activeEnd + overscan
+  const isRowVisible = (row: { end: number; start: number }) =>
+    row.end >= activeStart && row.start <= activeEnd
+
+  React.useEffect(() => {
+    scrollOffsetRef.current = scrollOffset
+  }, [scrollOffset])
+
+  React.useEffect(() => {
+    if (prefersReducedMotion === false) {
+      setIsAutoScrolling(true)
+    }
+  }, [prefersReducedMotion])
+
+  React.useEffect(() => {
+    return () => {
+      if (programmaticScrollResetRef.current !== null) {
+        window.clearTimeout(programmaticScrollResetRef.current)
+      }
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (!isAutoScrolling || prefersReducedMotion) {
+      return
+    }
+
+    const scrollElement = scrollContainerRef.current
+
+    if (!scrollElement) {
+      return
+    }
+
+    let frameId = 0
+    let startTime: number | null = null
+    const duration = 6800
+    const startingPhase =
+      maxOffset > 0 ? scrollOffsetRef.current / maxOffset : 0
+
+    const update = (time: number) => {
+      if (startTime === null) {
+        startTime = time - startingPhase * duration
+      }
+
+      const phase = ((time - startTime) % duration) / duration
+      const eased = 0.5 - Math.cos(phase * Math.PI * 2) / 2
+      const nextOffset = eased * maxOffset
+
+      isProgrammaticScrollRef.current = true
+      scrollElement.scrollTop = nextOffset
+      setScrollOffset(nextOffset)
+
+      if (programmaticScrollResetRef.current !== null) {
+        window.clearTimeout(programmaticScrollResetRef.current)
+      }
+
+      programmaticScrollResetRef.current = window.setTimeout(() => {
+        isProgrammaticScrollRef.current = false
+      }, 40)
+      frameId = window.requestAnimationFrame(update)
+    }
+
+    frameId = window.requestAnimationFrame(update)
+
+    return () => window.cancelAnimationFrame(frameId)
+  }, [isAutoScrolling, maxOffset, prefersReducedMotion])
+
+  const markProgrammaticScroll = (resetDelay: number) => {
+    isProgrammaticScrollRef.current = true
+
+    if (programmaticScrollResetRef.current !== null) {
+      window.clearTimeout(programmaticScrollResetRef.current)
+    }
+
+    programmaticScrollResetRef.current = window.setTimeout(() => {
+      isProgrammaticScrollRef.current = false
+    }, resetDelay)
+  }
+
+  const scrollToVirtualOffset = (nextOffset: number, operation: string) => {
+    const scrollElement = scrollContainerRef.current
+    const clampedOffset = Math.max(0, Math.min(nextOffset, maxOffset))
+
+    setIsAutoScrolling(false)
+    setLastScrollOperation(operation)
+
+    if (!scrollElement) {
+      setScrollOffset(clampedOffset)
+      return
+    }
+
+    const behavior: ScrollBehavior = prefersReducedMotion ? 'auto' : 'smooth'
+
+    if (behavior === 'auto') {
+      setScrollOffset(clampedOffset)
+    }
+
+    markProgrammaticScroll(prefersReducedMotion ? 80 : 460)
+    scrollElement.scrollTo({ top: clampedOffset, behavior })
+  }
+
+  const getIndexOffset = (index: number, align: VirtualAlign) => {
+    const measurement = measurements[index]
+
+    if (!measurement) {
+      return 0
+    }
+
+    if (align === 'center') {
+      return measurement.start - viewportHeight / 2 + measurement.height / 2
+    }
+
+    if (align === 'end') {
+      return measurement.end - viewportHeight
+    }
+
+    return measurement.start
+  }
+
+  const runScrollAction = (action: VirtualScrollAction) => {
+    if (action.kind === 'index') {
+      scrollToVirtualOffset(
+        getIndexOffset(action.index, action.align),
+        action.code,
+      )
+      return
+    }
+
+    if (action.kind === 'offset') {
+      scrollToVirtualOffset(action.offset, action.code)
+      return
+    }
+
+    scrollToVirtualOffset(maxOffset, action.code)
+  }
+
+  const pauseAutoScroll = () => {
+    if (isAutoScrolling) {
+      setIsAutoScrolling(false)
+    }
+  }
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-purple-200 bg-white p-4 shadow-sm shadow-purple-950/5 dark:border-purple-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          10,000 rows / {mountedRows.length} mounted / {activeRows.length}{' '}
+          visible
+        </span>
+      </div>
+
+      <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-2 rounded-lg bg-purple-50 px-3 py-2 dark:bg-purple-950/25">
+          <span
+            className={
+              isAutoScrolling
+                ? 'h-2 w-2 rounded-full bg-emerald-500'
+                : 'h-2 w-2 rounded-full bg-zinc-400'
+            }
+          />
+          <span className="text-xs font-black uppercase text-purple-800 dark:text-purple-200">
+            {isAutoScrolling ? 'Auto loop' : 'Manual'}
+          </span>
+        </div>
+        <button
+          className="inline-flex items-center gap-2 rounded-md border border-purple-200 bg-white px-3 py-2 text-xs font-black text-purple-800 transition-colors hover:border-purple-400 hover:bg-purple-50 dark:border-purple-900 dark:bg-zinc-950 dark:text-purple-200 dark:hover:border-purple-600 dark:hover:bg-purple-950/25"
+          type="button"
+          onClick={() => setIsAutoScrolling((current) => !current)}
+        >
+          {isAutoScrolling ? (
+            <Pause aria-hidden="true" size={14} />
+          ) : (
+            <Play aria-hidden="true" size={14} />
+          )}
+          {isAutoScrolling ? 'Pause' : 'Resume'}
+        </button>
+      </div>
+
+      <div className="mt-4 rounded-lg border border-purple-100 bg-purple-50/70 p-3 dark:border-purple-900 dark:bg-purple-950/20">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <p className="text-xs font-black uppercase text-purple-800 dark:text-purple-200">
+            scroll API
+          </p>
+          <code className="max-w-full truncate rounded bg-white px-2 py-1 font-mono text-[0.68rem] font-bold text-purple-800 dark:bg-zinc-950 dark:text-purple-200">
+            {lastScrollOperation}
+          </code>
+        </div>
+        <div className="mt-3 grid gap-2 sm:grid-cols-2 xl:grid-cols-4">
+          {virtualScrollActions.map((action) => {
+            const isActive = lastScrollOperation === action.code
+
+            return (
+              <button
+                key={action.code}
+                aria-pressed={isActive}
+                className={
+                  isActive
+                    ? 'rounded-md border border-purple-500 bg-purple-500 px-3 py-2 text-left text-white shadow-sm shadow-purple-950/15'
+                    : 'rounded-md border border-purple-200 bg-white px-3 py-2 text-left text-purple-900 transition-colors hover:border-purple-400 hover:bg-purple-100 dark:border-purple-900 dark:bg-zinc-950 dark:text-purple-100 dark:hover:border-purple-600 dark:hover:bg-purple-950/30'
+                }
+                type="button"
+                onClick={() => runScrollAction(action)}
+              >
+                <span className="flex items-center justify-between gap-2 text-xs font-black">
+                  {action.label}
+                  <ArrowRight aria-hidden="true" size={13} />
+                </span>
+                <span
+                  className={
+                    isActive
+                      ? 'mt-1 block text-[0.65rem] font-bold uppercase text-white/75'
+                      : 'mt-1 block text-[0.65rem] font-bold uppercase text-purple-600 dark:text-purple-300'
+                  }
+                >
+                  {action.detail}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      <div className="mt-4 grid gap-3 lg:grid-cols-[0.68fr_1.32fr]">
+        <div className="rounded-lg bg-purple-50 p-3 dark:bg-purple-950/25">
+          <p className="text-xs font-black uppercase text-purple-800 dark:text-purple-200">
+            range
+          </p>
+          <div className="mt-3 h-80 overflow-hidden rounded-md bg-white p-2 dark:bg-zinc-950">
+            <div className="relative h-full overflow-hidden rounded-md bg-zinc-200 dark:bg-zinc-800">
+              <div
+                className="absolute left-2 right-2 z-10 rounded-md border-2 border-purple-500 bg-purple-500/10 shadow-lg shadow-purple-950/20"
+                style={{
+                  height: `${(viewportHeight / totalSize) * 100}%`,
+                  top: `${(scrollOffset / totalSize) * 100}%`,
+                }}
+              />
+              {measurements.map((row) => {
+                const rowMounted = isRowMounted(row)
+                const rowVisible = isRowVisible(row)
+
+                return (
+                  <div
+                    key={row.label}
+                    className={
+                      rowVisible
+                        ? 'absolute left-4 right-4 rounded bg-purple-400/90 shadow-sm shadow-purple-950/30 dark:bg-purple-300/90'
+                        : rowMounted
+                          ? 'absolute left-4 right-4 rounded bg-zinc-400/40 dark:bg-zinc-600/70'
+                          : 'absolute left-4 right-4 rounded bg-zinc-400/12 dark:bg-zinc-700/25'
+                    }
+                    style={{
+                      height: Math.max(3, Math.min(9, row.height / 8)),
+                      top: `${(row.start / totalSize) * 100}%`,
+                    }}
+                  />
+                )
+              })}
+            </div>
+          </div>
+        </div>
+
+        <div className="overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-900">
+          <div
+            ref={scrollContainerRef}
+            aria-label="Virtualized rows"
+            className="relative overflow-y-auto rounded-md bg-white dark:bg-zinc-950"
+            role="region"
+            style={{ height: viewportHeight }}
+            onScroll={(event) => {
+              setScrollOffset(event.currentTarget.scrollTop)
+
+              if (isProgrammaticScrollRef.current) {
+                isProgrammaticScrollRef.current = false
+                return
+              }
+
+              setIsAutoScrolling(false)
+            }}
+            onMouseDown={pauseAutoScroll}
+            onTouchStart={pauseAutoScroll}
+            onWheel={pauseAutoScroll}
+          >
+            <div className="relative w-full" style={{ height: totalSize }}>
+              {mountedRows.map((row) => {
+                const rowVisible = isRowVisible(row)
+
+                return (
+                  <div
+                    key={row.label}
+                    className={
+                      rowVisible
+                        ? 'absolute left-3 right-3 rounded-md border border-purple-400 bg-purple-500/20 px-3 py-2 shadow-sm dark:border-purple-500 dark:bg-purple-500/25'
+                        : 'absolute left-3 right-3 rounded-md border border-zinc-200 bg-white px-3 py-2 shadow-sm dark:border-zinc-800 dark:bg-zinc-900'
+                    }
+                    style={{
+                      height: row.height,
+                      top: row.start,
+                    }}
+                  >
+                    <div className="flex h-full items-center justify-between gap-3">
+                      <span className="font-mono text-sm font-black">
+                        {row.label}
+                      </span>
+                      <span
+                        className={
+                          rowVisible
+                            ? 'text-xs font-bold text-purple-700 dark:text-purple-200'
+                            : 'text-xs font-bold text-zinc-500 dark:text-zinc-400'
+                        }
+                      >
+                        {row.height}px measured
+                      </span>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function VirtualChatPanel() {
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const chatScrollRef = React.useRef<HTMLDivElement>(null)
+  const didInitialScrollRef = React.useRef(false)
+  const prependAnchorRef = React.useRef<VirtualChatAnchor | null>(null)
+  const shouldFollowRef = React.useRef(true)
+  const isAtEndRef = React.useRef(true)
+  const streamMessageIdRef = React.useRef<string | null>(null)
+  const streamRunRef = React.useRef(1)
+  const streamStepRef = React.useRef(0)
+  const [messages, setMessages] = React.useState(initialChatMessages)
+  const [scrollOffset, setScrollOffset] = React.useState(0)
+  const [hasPrependedHistory, setHasPrependedHistory] = React.useState(false)
+  const [isStreaming, setIsStreaming] = React.useState(false)
+  const [lastChatOperation, setLastChatOperation] =
+    React.useState("anchorTo: 'end'")
+  const viewportHeight = 420
+  const overscan = 150
+  const measurements = React.useMemo(() => {
+    let start = 0
+
+    return messages.map((message, index) => {
+      const height = getChatMessageHeight(message)
+      const measurement = {
+        ...message,
+        end: start + height,
+        height,
+        index,
+        start,
+      }
+
+      start += height + 10
+
+      return measurement
+    })
+  }, [messages])
+  const totalSize = measurements[measurements.length - 1]?.end ?? 0
+  const maxOffset = Math.max(totalSize - viewportHeight, 0)
+  const activeStart = scrollOffset
+  const activeEnd = scrollOffset + viewportHeight
+  const mountedMessages = measurements.filter(
+    (message) =>
+      message.end >= activeStart - overscan &&
+      message.start <= activeEnd + overscan,
+  )
+  const visibleMessages = mountedMessages.filter(
+    (message) => message.end >= activeStart && message.start <= activeEnd,
+  )
+  const distanceFromEnd = Math.max(maxOffset - scrollOffset, 0)
+  const isAtEnd = distanceFromEnd < 48
+
+  React.useEffect(() => {
+    isAtEndRef.current = isAtEnd
+  }, [isAtEnd])
+
+  React.useEffect(() => {
+    if (didInitialScrollRef.current) {
+      return
+    }
+
+    const scrollElement = chatScrollRef.current
+
+    if (!scrollElement) {
+      return
+    }
+
+    didInitialScrollRef.current = true
+    scrollElement.scrollTop = maxOffset
+    setScrollOffset(maxOffset)
+  }, [maxOffset])
+
+  React.useEffect(() => {
+    const anchor = prependAnchorRef.current
+
+    if (!anchor) {
+      return
+    }
+
+    const scrollElement = chatScrollRef.current
+    const nextAnchor = measurements.find((message) => message.id === anchor.id)
+
+    if (!scrollElement || !nextAnchor) {
+      prependAnchorRef.current = null
+      return
+    }
+
+    const nextOffset = Math.max(
+      0,
+      Math.min(nextAnchor.start - anchor.offset, maxOffset),
+    )
+
+    scrollElement.scrollTop = nextOffset
+    setScrollOffset(nextOffset)
+    prependAnchorRef.current = null
+  }, [maxOffset, measurements])
+
+  React.useEffect(() => {
+    if (!shouldFollowRef.current) {
+      return
+    }
+
+    shouldFollowRef.current = false
+
+    const scrollElement = chatScrollRef.current
+
+    if (!scrollElement) {
+      return
+    }
+
+    const frameId = window.requestAnimationFrame(() => {
+      const behavior: ScrollBehavior = prefersReducedMotion ? 'auto' : 'smooth'
+
+      scrollElement.scrollTo({ top: maxOffset, behavior })
+      setScrollOffset(maxOffset)
+    })
+
+    return () => window.cancelAnimationFrame(frameId)
+  }, [maxOffset, messages, prefersReducedMotion])
+
+  React.useEffect(() => {
+    if (!isStreaming) {
+      return
+    }
+
+    const intervalId = window.setInterval(() => {
+      const activeMessageId = streamMessageIdRef.current
+      const nextStep = streamStepRef.current + 1
+      const visibleChunkCount = Math.min(nextStep, chatStreamChunks.length)
+
+      if (!activeMessageId) {
+        window.clearInterval(intervalId)
+        setIsStreaming(false)
+        return
+      }
+
+      streamStepRef.current = nextStep
+      shouldFollowRef.current = isAtEndRef.current
+
+      setMessages((currentMessages) =>
+        currentMessages.map((message) =>
+          message.id === activeMessageId
+            ? {
+                ...message,
+                body: chatStreamChunks.slice(0, visibleChunkCount).join(' '),
+                status:
+                  visibleChunkCount === chatStreamChunks.length
+                    ? 'complete'
+                    : 'streaming',
+              }
+            : message,
+        ),
+      )
+
+      if (visibleChunkCount === chatStreamChunks.length) {
+        window.clearInterval(intervalId)
+        setIsStreaming(false)
+      }
+    }, 680)
+
+    return () => window.clearInterval(intervalId)
+  }, [isStreaming])
+
+  const scrollChatToEnd = () => {
+    const scrollElement = chatScrollRef.current
+
+    setLastChatOperation('virtualizer.scrollToEnd()')
+    shouldFollowRef.current = false
+
+    if (!scrollElement) {
+      return
+    }
+
+    const behavior: ScrollBehavior = prefersReducedMotion ? 'auto' : 'smooth'
+
+    scrollElement.scrollTo({ top: maxOffset, behavior })
+    setScrollOffset(maxOffset)
+  }
+
+  const prependHistory = () => {
+    if (hasPrependedHistory) {
+      return
+    }
+
+    const anchorMessage = visibleMessages[0] ?? mountedMessages[0]
+
+    if (anchorMessage) {
+      prependAnchorRef.current = {
+        id: anchorMessage.id,
+        offset: anchorMessage.start - scrollOffset,
+      }
+    }
+
+    setLastChatOperation("anchorTo: 'end' + stable getItemKey")
+    setHasPrependedHistory(true)
+    setMessages((currentMessages) => [...olderChatMessages, ...currentMessages])
+  }
+
+  const streamReply = () => {
+    if (isStreaming) {
+      return
+    }
+
+    const nextRun = streamRunRef.current
+    const nextMessageId = `stream-${nextRun}`
+
+    streamRunRef.current = nextRun + 1
+    streamStepRef.current = 1
+    streamMessageIdRef.current = nextMessageId
+    shouldFollowRef.current = isAtEndRef.current
+    setLastChatOperation('followOnAppend + measured stream')
+    setIsStreaming(true)
+    setMessages((currentMessages) => [
+      ...currentMessages,
+      {
+        id: nextMessageId,
+        role: 'assistant',
+        body: chatStreamChunks[0] ?? '',
+        status: 'streaming',
+      },
+    ])
+  }
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-sky-200 bg-white p-4 shadow-sm shadow-sky-950/5 dark:border-sky-900 dark:bg-zinc-950">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-sky-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-purple-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          {messages.length} messages / {mountedMessages.length} mounted /{' '}
+          {visibleMessages.length} visible
+        </span>
+      </div>
+
+      <div className="mt-4 grid gap-3 md:grid-cols-[1fr_auto] md:items-center">
+        <div className="min-w-0 rounded-lg bg-sky-50 px-3 py-2 dark:bg-sky-950/25">
+          <p className="truncate font-mono text-xs font-bold text-sky-900 dark:text-sky-200">
+            {lastChatOperation}
+          </p>
+          <p className="mt-1 text-xs font-bold text-zinc-500 dark:text-zinc-400">
+            {Math.round(distanceFromEnd)}px from end /{' '}
+            {isAtEnd ? 'pinned' : 'reading history'}
+          </p>
+        </div>
+
+        <div className="grid grid-cols-3 gap-2">
+          <button
+            className={
+              hasPrependedHistory
+                ? 'inline-flex items-center justify-center gap-1 rounded-md border border-zinc-200 bg-zinc-100 px-3 py-2 text-xs font-black text-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-600'
+                : 'inline-flex items-center justify-center gap-1 rounded-md border border-sky-200 bg-white px-3 py-2 text-xs font-black text-sky-800 transition-colors hover:border-sky-400 hover:bg-sky-50 dark:border-sky-900 dark:bg-zinc-950 dark:text-sky-200 dark:hover:border-sky-600 dark:hover:bg-sky-950/30'
+            }
+            disabled={hasPrependedHistory}
+            type="button"
+            onClick={prependHistory}
+          >
+            <History aria-hidden="true" size={14} />
+            History
+          </button>
+          <button
+            className={
+              isStreaming
+                ? 'inline-flex items-center justify-center gap-1 rounded-md border border-emerald-300 bg-emerald-100 px-3 py-2 text-xs font-black text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200'
+                : 'inline-flex items-center justify-center gap-1 rounded-md border border-emerald-200 bg-white px-3 py-2 text-xs font-black text-emerald-800 transition-colors hover:border-emerald-400 hover:bg-emerald-50 dark:border-emerald-900 dark:bg-zinc-950 dark:text-emerald-200 dark:hover:border-emerald-600 dark:hover:bg-emerald-950/30'
+            }
+            disabled={isStreaming}
+            type="button"
+            onClick={streamReply}
+          >
+            <Send aria-hidden="true" size={14} />
+            Stream
+          </button>
+          <button
+            className="inline-flex items-center justify-center gap-1 rounded-md border border-purple-200 bg-white px-3 py-2 text-xs font-black text-purple-800 transition-colors hover:border-purple-400 hover:bg-purple-50 dark:border-purple-900 dark:bg-zinc-950 dark:text-purple-200 dark:hover:border-purple-600 dark:hover:bg-purple-950/30"
+            type="button"
+            onClick={scrollChatToEnd}
+          >
+            <ArrowDownToLine aria-hidden="true" size={14} />
+            Latest
+          </button>
+        </div>
+      </div>
+
+      <div
+        ref={chatScrollRef}
+        aria-label="Virtualized AI chat transcript"
+        className="mt-4 overflow-y-auto rounded-lg border border-zinc-200 bg-[#f7fbff] dark:border-zinc-800 dark:bg-zinc-900"
+        role="region"
+        style={{ height: viewportHeight }}
+        onScroll={(event) => setScrollOffset(event.currentTarget.scrollTop)}
+      >
+        <div className="relative w-full" style={{ height: totalSize }}>
+          {mountedMessages.map((message) => {
+            const isUser = message.role === 'user'
+            const isTool = message.role === 'tool'
+
+            return (
+              <div
+                key={message.id}
+                className="absolute left-0 right-0 px-3"
+                style={{ height: message.height, top: message.start }}
+              >
+                <div
+                  className={
+                    isUser
+                      ? 'ml-auto max-w-[78%] rounded-lg border border-purple-200 bg-purple-600 px-3 py-2 text-white shadow-sm shadow-purple-950/15'
+                      : isTool
+                        ? 'mr-auto max-w-[82%] rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-emerald-950 dark:border-emerald-900 dark:bg-emerald-950/30 dark:text-emerald-100'
+                        : 'mr-auto max-w-[82%] rounded-lg border border-sky-200 bg-white px-3 py-2 text-zinc-900 shadow-sm shadow-sky-950/5 dark:border-sky-900 dark:bg-zinc-950 dark:text-zinc-100'
+                  }
+                >
+                  <div className="flex items-center justify-between gap-3">
+                    <span
+                      className={
+                        isUser
+                          ? 'text-[0.65rem] font-black uppercase text-white/75'
+                          : isTool
+                            ? 'text-[0.65rem] font-black uppercase text-emerald-700 dark:text-emerald-300'
+                            : 'text-[0.65rem] font-black uppercase text-sky-700 dark:text-sky-300'
+                      }
+                    >
+                      {message.role}
+                    </span>
+                    {message.status ? (
+                      <span className="rounded bg-white/70 px-1.5 py-0.5 text-[0.62rem] font-black uppercase text-zinc-600 dark:bg-zinc-900 dark:text-zinc-300">
+                        {message.status}
+                      </span>
+                    ) : null}
+                  </div>
+                  <p className="mt-2 text-sm font-medium leading-6">
+                    {message.body}
+                  </p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function getChatMessageHeight(message: VirtualChatMessage) {
+  const charactersPerLine = message.role === 'tool' ? 36 : 54
+  const baseHeight = message.role === 'tool' ? 74 : 92
+  const lineCount = Math.max(
+    1,
+    Math.ceil(message.body.length / charactersPerLine),
+  )
+
+  return baseHeight + (lineCount - 1) * 18
+}
+
+function PipelinePanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {pipelineSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-[#fbf7ff] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-purple-100 text-sm font-black text-purple-800 dark:bg-purple-950 dark:text-purple-200">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ModePanel() {
+  return (
+    <div className="grid gap-4 md:grid-cols-3">
+      {virtualModes.map((mode) => (
+        <div
+          key={mode.title}
+          className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-purple-100 text-purple-800 dark:bg-purple-950 dark:text-purple-200">
+            {mode.icon}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {mode.title}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {mode.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-purple-100 text-purple-800 dark:bg-purple-950 dark:text-purple-200">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-purple-700 dark:text-purple-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-purple-500 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function VirtualLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
   )
 }
diff --git a/src/components/landing/WorkflowLanding.tsx b/src/components/landing/WorkflowLanding.tsx
new file mode 100644
index 000000000..2e507aa0b
--- /dev/null
+++ b/src/components/landing/WorkflowLanding.tsx
@@ -0,0 +1,540 @@
+import * as React from 'react'
+import { Link, useParams } from '@tanstack/react-router'
+import {
+  ArrowRight,
+  BookOpen,
+  GitBranch,
+  Hourglass,
+  Network,
+  PlayCircle,
+  RotateCcw,
+  ScanSearch,
+  ShieldCheck,
+  Sparkles,
+  Workflow,
+} from 'lucide-react'
+
+import { BottomCTA } from '~/components/BottomCTA'
+import { Footer } from '~/components/Footer'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import LandingPageGad from '~/components/LandingPageGad'
+import { LandingCommunitySection } from '~/components/LandingCommunitySection'
+import { SponsorSection } from '~/components/SponsorSection'
+import { LibraryDownloadsMicro } from '~/components/LibraryDownloadsMicro'
+import { LibraryWordmark } from '~/components/LibraryWordmark'
+import { getLibrary } from '~/libraries'
+
+import { LandingCopyPromptButton } from '~/components/landing/LandingCopyPromptButton'
+const library = getLibrary('workflow')
+const workflowAgentPrompt = [
+  'Build a TanStack Workflow process for a TypeScript app.',
+  'Model a multi-step workflow with typed inputs and outputs, retries, backoff, approvals, fan-out, and inspectable execution history.',
+  'Keep business process state explicit, and verify concrete API calls against the current Workflow docs before implementation.',
+].join(' ')
+
+const heroProof = [
+  {
+    label: 'Typed graph',
+    value: 'inputs, outputs, context, transitions',
+  },
+  {
+    label: 'Run state',
+    value: 'history, attempts, next actions',
+  },
+  {
+    label: 'Recovery',
+    value: 'retries, backoff, approvals, inspection',
+  },
+]
+
+const timelineRows = [
+  {
+    step: 'validate order',
+    state: 'done',
+    detail: 'typed payload accepted',
+  },
+  {
+    step: 'reserve inventory',
+    state: 'retrying',
+    detail: 'backoff 30s',
+  },
+  {
+    step: 'manager approval',
+    state: 'waiting',
+    detail: 'human gate',
+  },
+  {
+    step: 'fan-out fulfillment',
+    state: 'queued',
+    detail: '3 regions',
+  },
+]
+
+const featureCards = [
+  {
+    title: 'Business processes become typed graphs.',
+    body: 'Inputs, outputs, shared context, branching, and step boundaries stay modeled in TypeScript instead of being implied by background job glue.',
+    icon: <GitBranch size={18} />,
+  },
+  {
+    title: 'State is part of the model.',
+    body: 'Long-running work needs visible run state around slow systems, retries, human delays, and the next action the process is waiting on.',
+    icon: <ShieldCheck size={18} />,
+  },
+  {
+    title: 'Retries live next to the work.',
+    body: 'Backoff, recovery, compensation, and error handling stay close to the step that can fail, where maintainers can reason about it.',
+    icon: <RotateCcw size={18} />,
+  },
+  {
+    title: 'Workflow state is meant to be inspected.',
+    body: 'A process that matters needs visible history, status, inputs, outputs, and next actions, not a hidden promise chain.',
+    icon: <ScanSearch size={18} />,
+  },
+]
+
+const lifecycleSteps = [
+  {
+    label: 'Start',
+    body: 'A typed workflow run begins with a known input and initial context.',
+  },
+  {
+    label: 'Step',
+    body: 'Each step owns its input, output, retry policy, and side effects.',
+  },
+  {
+    label: 'Wait',
+    body: 'The run can pause around external systems, timers, or approvals.',
+  },
+  {
+    label: 'Resume',
+    body: 'Execution continues with history and state intact after interruptions.',
+  },
+]
+
+const observabilityItems = [
+  {
+    label: 'run id',
+    value: 'order-4832',
+  },
+  {
+    label: 'current step',
+    value: 'reserve inventory',
+  },
+  {
+    label: 'attempt',
+    value: '2 of 5',
+  },
+  {
+    label: 'next action',
+    value: 'wait for approval',
+  },
+]
+
+export default function WorkflowLanding() {
+  const { version } = useParams({ strict: false })
+  const resolvedVersion = version ?? library.latestVersion
+
+  return (
+    <div className="w-full min-w-0 overflow-x-hidden bg-[#eff6ff] text-zinc-950 dark:bg-zinc-950 dark:text-white">
+      <section className="max-w-full overflow-hidden border-b border-blue-950/10 bg-[#dbeafe] dark:border-blue-300/10 dark:bg-[#061325]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-10 lg:max-w-[80rem] lg:grid-cols-[0.84fr_1.16fr] lg:items-start lg:py-12 xl:max-w-[92rem]">
+          <div className="min-w-0 max-w-full sm:max-w-3xl">
+            <SectionKicker icon={<Workflow size={14} />}>
+              Durable typed processes
+            </SectionKicker>
+
+            <div className="mt-4 flex flex-wrap items-start gap-x-3 gap-y-2">
+              <h1 className="text-5xl font-black leading-[0.95] sm:text-6xl lg:text-7xl">
+                <LibraryWordmark library={library} />
+              </h1>
+              {library.badge ? (
+                <span className="rounded-md bg-zinc-950 px-2 py-1 text-xs font-black uppercase text-white dark:bg-white dark:text-zinc-950">
+                  {library.badge}
+                </span>
+              ) : null}
+            </div>
+
+            <p className="mt-5 max-w-2xl text-lg font-bold leading-8 text-zinc-900 dark:text-zinc-100 sm:text-xl">
+              Put long-running business work in a model you can trust.
+            </p>
+
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Workflow is for modeling approvals, retries, fan-out, slow
+              external systems, and visible run state as TypeScript workflows
+              instead of one-off background jobs scattered across the app.
+            </p>
+
+            <LibraryDownloadsMicro
+              animateIncreaseTrend
+              library={library}
+              className="mt-5"
+              label="weekly downloads"
+              period="weekly"
+              showTotals
+            />
+
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+              <WorkflowLink
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: library.id, version: resolvedVersion }}
+                label="Read the docs"
+                icon={<BookOpen size={16} aria-hidden="true" />}
+              />
+              <LandingCopyPromptButton
+                prompt={workflowAgentPrompt}
+                label="Copy Workflow Prompt"
+              />
+            </div>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {heroProof.map((proof) => (
+                <ProofPill key={proof.label} {...proof} />
+              ))}
+            </div>
+          </div>
+
+          <WorkflowRunPanel />
+        </div>
+      </section>
+
+      <section className="border-b border-blue-950/10 bg-[#f4f8ff] dark:border-blue-300/10 dark:bg-[#07182d]">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.74fr_1.26fr] xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Sparkles size={14} />}>
+              Why Workflow
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              Background jobs become business systems eventually.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              If a process needs retries, approvals, multiple services, human
+              waiting time, and trusted state, it deserves a workflow model
+              instead of another hidden async function.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            {featureCards.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[1.05fr_0.95fr] lg:items-center xl:max-w-[92rem]">
+          <LifecyclePanel />
+          <div>
+            <SectionKicker icon={<PlayCircle size={14} />}>
+              Execution model
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Start, step, wait, resume.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Typed workflows let process state move through time deliberately
+              instead of hoping a single request or queue worker keeps
+              everything together.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-[#fbfaf6] dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.82fr_1.18fr] lg:items-start xl:max-w-[92rem]">
+          <div>
+            <SectionKicker icon={<Hourglass size={14} />}>
+              Observable process state
+            </SectionKicker>
+            <h2 className="mt-3 max-w-xl text-3xl font-black leading-tight sm:text-4xl">
+              If the business cares, the runtime should show it.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Runs need IDs, inputs, history, attempts, waiting reasons, and
+              next actions so operators and developers can tell what happened
+              and what comes next.
+            </p>
+          </div>
+
+          <ObservabilityPanel />
+        </div>
+      </section>
+
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid w-full min-w-0 max-w-full gap-8 px-4 py-12 lg:max-w-[80rem] lg:grid-cols-[0.72fr_1.28fr] lg:items-start xl:max-w-[92rem]">
+          <div className="max-w-xl">
+            <SectionKicker icon={<Network size={14} />}>
+              Typed orchestration
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              The workflow graph is application code.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Keep the process definition close to the TypeScript app, with
+              step-level types and explicit recovery behavior.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-white py-12 dark:bg-zinc-950">
+        <div className="mx-auto w-full max-w-[80rem] px-4 xl:max-w-[92rem]">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<GithubIcon className="h-4 w-4" />}>
+              Open source ecosystem
+            </SectionKicker>
+            <h2 className="mt-3 text-3xl font-black leading-tight sm:text-4xl">
+              Workflow is for the parts of apps that cannot be hand-waved.
+            </h2>
+            <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Maintainers, examples, partners, and GitHub sponsors keep the
+              orchestration model close to real long-running product work.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-14">
+          <LandingCommunitySection libraryId="workflow" />
+          <SponsorSection
+            title="GitHub Sponsors"
+            aspectRatio="1/1"
+            packMaxWidth="900px"
+            showCTA
+          />
+        </div>
+      </section>
+
+      <LandingPageGad />
+      <BottomCTA
+        linkProps={{
+          to: '/$libraryId/$version/docs',
+          params: { libraryId: library.id, version: resolvedVersion },
+        }}
+        label="Explore Workflow"
+        className="border-blue-800 bg-blue-800 text-white hover:bg-blue-900"
+      />
+      <Footer />
+    </div>
+  )
+}
+
+function WorkflowRunPanel() {
+  const [activeStepIndex, setActiveStepIndex] = React.useState(1)
+  const [retryCount, setRetryCount] = React.useState(1)
+  const displayedRows = timelineRows.map((row, index) => {
+    if (index < activeStepIndex) {
+      return { ...row, state: 'done' }
+    }
+
+    if (index === activeStepIndex) {
+      return {
+        ...row,
+        detail:
+          row.step === 'reserve inventory'
+            ? `backoff ${retryCount * 15}s`
+            : row.detail,
+        state: row.step === 'manager approval' ? 'waiting' : 'running',
+      }
+    }
+
+    return { ...row, state: 'queued' }
+  })
+
+  return (
+    <div className="w-full min-w-0 max-w-full overflow-hidden rounded-lg border border-blue-200 bg-white p-4 shadow-sm shadow-blue-950/5 dark:border-blue-900 dark:bg-zinc-950">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+          <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        </div>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          order workflow
+        </span>
+      </div>
+
+      <div className="mt-4 flex flex-wrap gap-2">
+        <button
+          className="rounded-md border border-blue-600 bg-blue-600 px-3 py-2 text-xs font-black text-white transition-colors hover:bg-blue-700"
+          type="button"
+          onClick={() =>
+            setActiveStepIndex((current) =>
+              current >= timelineRows.length - 1 ? 0 : current + 1,
+            )
+          }
+        >
+          Advance
+        </button>
+        <button
+          className="rounded-md border border-blue-200 bg-white px-3 py-2 text-xs font-black text-blue-800 transition-colors hover:border-blue-400 dark:border-blue-900 dark:bg-zinc-950 dark:text-blue-200"
+          type="button"
+          onClick={() => setRetryCount((current) => current + 1)}
+        >
+          Retry step
+        </button>
+        <button
+          className="rounded-md border border-zinc-200 bg-white px-3 py-2 text-xs font-black text-zinc-700 transition-colors hover:border-blue-300 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300"
+          type="button"
+          onClick={() => {
+            setActiveStepIndex(0)
+            setRetryCount(1)
+          }}
+        >
+          Restart
+        </button>
+      </div>
+
+      <div className="mt-4 space-y-3">
+        {displayedRows.map((row, index) => (
+          <div
+            key={row.step}
+            className="grid gap-3 rounded-lg border border-zinc-200 bg-blue-50 p-3 dark:border-zinc-800 dark:bg-blue-950/20 sm:grid-cols-[auto_1fr_auto] sm:items-center"
+          >
+            <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-sm font-black text-blue-900 dark:bg-blue-950 dark:text-blue-200">
+              {index + 1}
+            </span>
+            <div>
+              <p className="font-black">{row.step}</p>
+              <p className="mt-1 text-xs font-bold text-zinc-600 dark:text-zinc-400">
+                {row.detail}
+              </p>
+            </div>
+            <span className="rounded-md bg-white px-2 py-1 text-[0.65rem] font-black uppercase text-blue-900 dark:bg-zinc-950 dark:text-blue-200">
+              {row.state}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function LifecyclePanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {lifecycleSteps.map((step, index) => (
+        <div
+          key={step.label}
+          className="rounded-lg border border-zinc-200 bg-[#eff6ff] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-100 text-sm font-black text-blue-900 dark:bg-blue-950 dark:text-blue-200">
+            {index + 1}
+          </span>
+          <h3 className="mt-4 text-lg font-black leading-tight">
+            {step.label}
+          </h3>
+          <p className="mt-2 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+            {step.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ObservabilityPanel() {
+  return (
+    <div className="min-w-0 rounded-lg border border-blue-200 bg-white p-4 dark:border-blue-900 dark:bg-zinc-950">
+      <div className="grid gap-3 md:grid-cols-2">
+        {observabilityItems.map((item) => (
+          <div
+            key={item.label}
+            className="rounded-lg border border-zinc-200 bg-[#f4f8ff] p-4 dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <p className="text-[0.65rem] font-black uppercase text-zinc-500 dark:text-zinc-400">
+              {item.label}
+            </p>
+            <p className="mt-2 text-sm font-bold leading-6 text-zinc-950 dark:text-white">
+              {item.value}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 rounded-lg bg-zinc-950 p-4 text-sm text-blue-100 dark:bg-black">
+        <p className="font-mono leading-6">
+          step: &quot;reserve inventory&quot;
+          <br />
+          attempts: 2 / 5
+          <br />
+          next: &quot;manager approval&quot;
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function FeatureCard({
+  body,
+  icon,
+  title,
+}: {
+  body: string
+  icon: React.ReactNode
+  title: string
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-100 text-blue-900 dark:bg-blue-950 dark:text-blue-200">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+    </div>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-blue-800 dark:text-blue-300">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function ProofPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-l-2 border-blue-600 pl-3">
+      <p className="text-sm font-black text-zinc-950 dark:text-white">
+        {label}
+      </p>
+      <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+        {value}
+      </p>
+    </div>
+  )
+}
+
+function WorkflowLink({
+  icon,
+  label,
+  params,
+  to,
+}: {
+  icon: React.ReactNode
+  label: string
+  params: Record<string, string>
+  to: string
+}) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="inline-flex w-full max-w-full items-center justify-center gap-2 rounded-lg border border-zinc-950 bg-zinc-950 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto"
+    >
+      {icon}
+      {label}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
+  )
+}
diff --git a/src/components/landing/codeExamples.ts b/src/components/landing/codeExamples.ts
new file mode 100644
index 000000000..76b725dd0
--- /dev/null
+++ b/src/components/landing/codeExamples.ts
@@ -0,0 +1,324 @@
+import type { Framework } from '~/libraries'
+import type { LandingCodeExampleData } from './LandingCodeExampleCard'
+
+const queryCodeExampleFrameworks: Array<Framework> = [
+  'react',
+  'preact',
+  'solid',
+  'vue',
+  'svelte',
+  'angular',
+  'lit',
+]
+
+export const queryCodeExample: LandingCodeExampleData = {
+  frameworks: queryCodeExampleFrameworks,
+  codeByFramework: {
+    react: {
+      lang: 'tsx',
+      code: `import { useQuery } from '@tanstack/react-query'
+
+function Todos() {
+  const { data, isPending, error } = useQuery({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/api/todos').then(r => r.json()),
+  })
+
+  if (isPending) return <span>Loading...</span>
+  if (error) return <span>Oops!</span>
+
+  return <ul>{data.map(t => <li key={t.id}>{t.title}</li>)}</ul>
+}
+
+export default Todos`,
+    },
+    solid: {
+      lang: 'tsx',
+      code: `import { createQuery } from '@tanstack/solid-query'
+
+function Todos() {
+  const todos = createQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/api/todos').then(r => r.json()),
+  }))
+
+  return <ul>{todos.data?.map((t) => <li>{t.title}</li>)}</ul>
+}
+
+export default Todos`,
+    },
+    preact: {
+      lang: 'tsx',
+      code: `import { useQuery } from '@tanstack/preact-query'
+
+function Todos() {
+  const { data, isPending, error } = useQuery({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/api/todos').then(r => r.json()),
+  })
+
+  if (isPending) return <span>Loading...</span>
+  if (error) return <span>Oops!</span>
+
+  return <ul>{data.map(t => <li key={t.id}>{t.title}</li>)}</ul>
+}
+
+export default Todos`,
+    },
+    vue: {
+      lang: 'vue',
+      code: `<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+
+const { data, isPending, error } = useQuery({
+  queryKey: ['todos'],
+  queryFn: () => fetch('/api/todos').then(r => r.json()),
+})
+</script>
+
+<template>
+  <ul v-if="data">
+    <li v-for="t in data" :key="t.id">{{ t.title }}</li>
+  </ul>
+  <span v-else-if="isPending">Loading...</span>
+  <span v-else>Oops!</span>
+</template>`,
+    },
+    svelte: {
+      lang: 'svelte',
+      code: `<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+
+  const todos = createQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/api/todos').then(r => r.json()),
+  }))
+</script>
+
+{#if todos.isLoading}
+  Loading...
+{:else if todos.isError}
+  Oops!
+{:else if todos.isSuccess}
+  <ul>
+    {#each todos.data as t}
+      <li>{t.title}</li>
+    {/each}
+  </ul>
+{/if}`,
+    },
+    angular: {
+      lang: 'ts',
+      code: `import { Component } from '@angular/core'
+import { injectQuery } from '@tanstack/angular-query-experimental'
+
+@Component({
+  selector: 'todos',
+  standalone: true,
+  template: \
+\`
+    <ng-container *ngIf="todos.isPending()">
+      Loading...
+    </ng-container>
+    <ul *ngIf="todos.data() as data">
+      <li *ngFor="let t of data">
+        {{ t.title }}
+      </li>
+    </ul>
+  \`,
+})
+export class TodosComponent {
+  todos = injectQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: () => fetch('/api/todos').then(r => r.json()),
+  }))
+}
+`,
+    },
+    lit: {
+      lang: 'ts',
+      code: `import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { createQueryController } from '@tanstack/lit-query'
+
+@customElement('todos-list')
+export class TodosList extends LitElement {
+  private todos = createQueryController(this, {
+    queryKey: ['todos'],
+    queryFn: () => fetch('/api/todos').then(r => r.json()),
+  })
+
+  render() {
+    const { data, isPending, error } = this.todos()
+
+    if (isPending) return html\`<span>Loading...</span>\`
+    if (error) return html\`<span>Oops!</span>\`
+
+    return html\`<ul>\${data.map(t => html\`<li>\${t.title}</li>\`)}</ul>\`
+  }
+}`,
+    },
+  },
+}
+
+export const formCodeExample: LandingCodeExampleData = {
+  frameworks: ['react'],
+  title: 'React field and submit state',
+  codeByFramework: {
+    react: {
+      lang: 'tsx',
+      code: `import { useForm } from '@tanstack/react-form'
+
+export default function PeoplePage() {
+  const form = useForm({
+    defaultValues: { age: 0 },
+    onSubmit: ({ value }) => {
+      alert(JSON.stringify(value, null, 2))
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name="age"
+        validators={{
+          onChange: ({ value }) =>
+            value > 13 ? undefined : 'Must be 13 or older',
+        }}
+        children={(field) => (
+          <>
+            <input
+              name={field.name}
+              value={field.state.value}
+              type="number"
+              onBlur={field.handleBlur}
+              onChange={(event) =>
+                field.handleChange(event.target.valueAsNumber)
+              }
+            />
+            {!field.state.meta.isValid && (
+              <em>{field.state.meta.errors.join(', ')}</em>
+            )}
+          </>
+        )}
+      />
+      <form.Subscribe
+        selector={(state) => [state.canSubmit, state.isSubmitting]}
+        children={([canSubmit, isSubmitting]) => (
+          <button type="submit" disabled={!canSubmit}>
+            {isSubmitting ? '...' : 'Submit'}
+          </button>
+        )}
+      />
+    </form>
+  )
+}`,
+    },
+  },
+}
+
+export const virtualCodeExample: LandingCodeExampleData = {
+  frameworks: ['react'],
+  title: 'React virtual rows',
+  codeByFramework: {
+    react: {
+      lang: 'tsx',
+      code: `import * as React from 'react'
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+export default function VirtualRows() {
+  const parentRef = React.useRef<HTMLDivElement>(null)
+  const rowVirtualizer = useVirtualizer({
+    count: 10000,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 36,
+  })
+
+  return (
+    <div ref={parentRef} style={{ height: 320, overflow: 'auto' }}>
+      <div
+        style={{
+          height: rowVirtualizer.getTotalSize(),
+          position: 'relative',
+        }}
+      >
+        {rowVirtualizer.getVirtualItems().map((virtualRow) => (
+          <div
+            key={virtualRow.key}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: virtualRow.size,
+              transform: 'translateY(' + virtualRow.start + 'px)',
+            }}
+          >
+            Row {virtualRow.index}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}`,
+    },
+  },
+}
+
+export const tableCodeExample: LandingCodeExampleData = {
+  frameworks: ['react'],
+  title: 'React table instance',
+  codeByFramework: {
+    react: {
+      lang: 'tsx',
+      code: `import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table'
+
+const data = [{ id: 1, name: 'Ada' }]
+const columns = [{ accessorKey: 'name', header: 'Name' }]
+
+export default function SimpleTable() {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <table>
+      <thead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <th key={header.id}>
+                {flexRender(
+                  header.column.columnDef.header,
+                  header.getContext(),
+                )}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody>
+        {table.getRowModel().rows.map((row) => (
+          <tr key={row.id}>
+            {row.getVisibleCells().map((cell) => (
+              <td key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}`,
+    },
+  },
+}
diff --git a/src/components/markdown/BundlerTabs.tsx b/src/components/markdown/BundlerTabs.tsx
new file mode 100644
index 000000000..4e782424a
--- /dev/null
+++ b/src/components/markdown/BundlerTabs.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react'
+import { Tabs, type TabDefinition } from './Tabs'
+import { createPersistedEnumStore } from './usePersistedEnumStore'
+import {
+  BUNDLERS,
+  BUNDLER_LABELS,
+  DEFAULT_BUNDLER,
+  isBundler,
+  type Bundler,
+} from '~/utils/markdown/bundler'
+
+const bundlerStore = createPersistedEnumStore<Bundler>({
+  storageKey: 'bundler',
+  values: BUNDLERS,
+  defaultValue: DEFAULT_BUNDLER,
+})
+
+export type BundlerTabsProps = {
+  tabs: Array<{ slug: string; name: string }>
+  panelContent?: Record<string, 'code-only' | 'mixed'>
+  children: Array<React.ReactNode> | React.ReactNode
+}
+
+export function BundlerTabs({
+  tabs,
+  panelContent,
+  children,
+}: BundlerTabsProps) {
+  bundlerStore.useHydrate()
+
+  const activeBundler = bundlerStore((s) => s.value)
+  const setBundler = bundlerStore((s) => s.setValue)
+
+  const childrenArray = React.Children.toArray(children)
+
+  const panelsBySlug = React.useMemo(() => {
+    const map = new Map<string, React.ReactNode>()
+    tabs.forEach((tab, index) => {
+      map.set(tab.slug, childrenArray[index])
+    })
+    return map
+  }, [tabs, childrenArray])
+
+  const tabDefinitions = React.useMemo<Array<TabDefinition>>(
+    () =>
+      tabs
+        .filter((tab) => isBundler(tab.slug))
+        .map((tab) => ({
+          slug: tab.slug,
+          name: BUNDLER_LABELS[tab.slug as Bundler] ?? tab.name,
+          headers: [],
+        })),
+    [tabs],
+  )
+
+  const orderedChildren = React.useMemo(
+    () => tabDefinitions.map((tab) => panelsBySlug.get(tab.slug)),
+    [tabDefinitions, panelsBySlug],
+  )
+
+  const resolvedActiveSlug = tabDefinitions.some(
+    (tab) => tab.slug === activeBundler,
+  )
+    ? activeBundler
+    : (tabDefinitions[0]?.slug ?? activeBundler)
+
+  const handleTabChange = React.useCallback(
+    (slug: string) => {
+      if (isBundler(slug)) {
+        setBundler(slug)
+      }
+    },
+    [setBundler],
+  )
+
+  if (tabDefinitions.length === 0) return null
+
+  return (
+    <Tabs
+      tabs={tabDefinitions}
+      activeSlug={resolvedActiveSlug}
+      onTabChange={handleTabChange}
+      panelContent={panelContent}
+    >
+      {orderedChildren.map((child, index) => (
+        <React.Fragment key={tabDefinitions[index]?.slug ?? index}>
+          {child}
+        </React.Fragment>
+      ))}
+    </Tabs>
+  )
+}
diff --git a/src/components/markdown/CodeBlock.tsx b/src/components/markdown/CodeBlock.tsx
index 2aefd0616..5ae9a727f 100644
--- a/src/components/markdown/CodeBlock.tsx
+++ b/src/components/markdown/CodeBlock.tsx
@@ -1,263 +1,55 @@
+import { renderCodeBlockData } from '@tanstack/highlight'
 import * as React from 'react'
-import { twMerge } from 'tailwind-merge'
-import { useToast } from '~/components/ToastProvider'
-import { Copy } from 'lucide-react'
-import type { Mermaid } from 'mermaid'
-import { transformerNotationDiff } from '@shikijs/transformers'
-import { createHighlighter, type HighlighterGeneric } from 'shiki'
-import { Button } from '~/ui'
-
-// Language aliases mapping
-const LANG_ALIASES: Record<string, string> = {
-  ts: 'typescript',
-  js: 'javascript',
-  sh: 'bash',
-  shell: 'bash',
-  console: 'bash',
-  zsh: 'bash',
-  cmd: 'bash',
-  md: 'markdown',
-  txt: 'plaintext',
-  text: 'plaintext',
-  yml: 'yaml',
-  json5: 'jsonc',
-  eslintrc: 'jsonc',
-}
-
-// Lazy highlighter singleton
-let highlighterPromise: Promise<HighlighterGeneric<any, any>> | null = null
-let mermaidInstance: Mermaid | null = null
-const genSvgMap = new Map<string, string>()
-const failedLanguages = new Set<string>()
-
-async function getHighlighter(language: string): Promise<{
-  highlighter: HighlighterGeneric<any, any>
-  effectiveLang: string
-}> {
-  if (!highlighterPromise) {
-    highlighterPromise = createHighlighter({
-      themes: ['github-light', 'vitesse-dark'],
-      langs: [
-        'typescript',
-        'javascript',
-        'tsx',
-        'jsx',
-        'bash',
-        'json',
-        'html',
-        'css',
-        'markdown',
-        'plaintext',
-        'toml',
-        'yaml',
-        'sql',
-        'diff',
-        'vue',
-        'svelte',
-        'scss',
-        'jsonc',
-        'vue-html',
-        'angular-html',
-        'angular-ts',
-      ],
-    })
-  }
-
-  const highlighter = await highlighterPromise
-  const normalizedLang = LANG_ALIASES[language] || language
-  const langToLoad = normalizedLang === 'mermaid' ? 'plaintext' : normalizedLang
-
-  // Return plaintext for known failed languages
-  if (failedLanguages.has(langToLoad)) {
-    return { highlighter, effectiveLang: 'plaintext' }
+import { CodeBlockView } from './CodeBlockView'
+import { MermaidBlock } from './MermaidBlock'
+import { extractCodeBlockData, type CodeBlockProps } from './codeBlock.shared'
+
+export function CodeBlock(props: CodeBlockProps) {
+  const { code, lang, title } = extractCodeBlockData(props)
+
+  if (lang === 'mermaid') {
+    return (
+      <MermaidBlock
+        className={props.className}
+        code={code}
+        isEmbedded={props.isEmbedded}
+        showTypeCopyButton={props.showTypeCopyButton}
+        style={props.style}
+        title={title}
+      />
+    )
   }
 
-  // Load language if not already loaded
-  if (!highlighter.getLoadedLanguages().includes(langToLoad as any)) {
-    try {
-      await highlighter.loadLanguage(langToLoad as any)
-    } catch {
-      console.warn(`Shiki: Language "${langToLoad}" not found, using plaintext`)
-      failedLanguages.add(langToLoad)
-      return { highlighter, effectiveLang: 'plaintext' }
-    }
-  }
-
-  return { highlighter, effectiveLang: langToLoad }
-}
-
-// Lazy load mermaid only when needed
-async function getMermaid(): Promise<Mermaid> {
-  if (!mermaidInstance) {
-    const { default: mermaid } = await import('mermaid')
-    mermaid.initialize({ startOnLoad: false, securityLevel: 'loose' })
-    mermaidInstance = mermaid
-  }
-  return mermaidInstance
-}
-
-function extractPreAttributes(html: string): {
-  class: string | null
-  style: string | null
-} {
-  const match = html.match(/<pre\b([^>]*)>/i)
-  if (!match) {
-    return { class: null, style: null }
-  }
-
-  const attributes = match[1]
-
-  const classMatch = attributes.match(/\bclass\s*=\s*["']([^"']*)["']/i)
-  const styleMatch = attributes.match(/\bstyle\s*=\s*["']([^"']*)["']/i)
-
-  return {
-    class: classMatch ? classMatch[1] : null,
-    style: styleMatch ? styleMatch[1] : null,
-  }
+  return (
+    <HighlightedCodeBlock code={code} lang={lang} props={props} title={title} />
+  )
 }
 
-export function CodeBlock({
-  isEmbedded,
-  showTypeCopyButton = true,
-  ...props
-}: React.HTMLProps<HTMLPreElement> & {
-  isEmbedded?: boolean
-  showTypeCopyButton?: boolean
-  dataCodeTitle?: string
+function HighlightedCodeBlock({
+  code,
+  lang,
+  props,
+  title,
+}: {
+  code: string
+  lang: string
+  props: CodeBlockProps
+  title?: string
 }) {
-  // Extract title from data-code-title attribute, handling both camelCase and kebab-case
-  const rawTitle = ((props as any)?.dataCodeTitle ||
-    (props as any)?.['data-code-title']) as string | undefined
-
-  // Filter out "undefined" strings, null, and empty strings
-  const title =
-    rawTitle && rawTitle !== 'undefined' && rawTitle.trim().length > 0
-      ? rawTitle.trim()
-      : undefined
-
-  const childElement = props.children as
-    | undefined
-    | { props?: { className?: string; children?: string } }
-  const lang = childElement?.props?.className?.replace('language-', '')
-
-  const children = props.children as
-    | undefined
-    | {
-        props: {
-          children: string
-        }
-      }
-
-  const [copied, setCopied] = React.useState(false)
-  const ref = React.useRef<any>(null)
-  const { notify } = useToast()
-
-  const code = children?.props.children
-
-  const [codeElement, setCodeElement] = React.useState(
-    <pre ref={ref} className={`shiki h-full github-light dark:vitesse-dark`}>
-      <code>{lang === 'mermaid' ? <svg /> : code}</code>
-    </pre>,
-  )
-
-  React[
-    typeof document !== 'undefined' ? 'useLayoutEffect' : 'useEffect'
-  ](() => {
-    ;(async () => {
-      const themes = ['github-light', 'vitesse-dark']
-      const langStr = lang || 'plaintext'
-
-      const { highlighter, effectiveLang } = await getHighlighter(langStr)
-      // Trim trailing newlines to prevent empty lines at end of code block
-      const trimmedCode = (code || '').trimEnd()
-
-      const htmls = await Promise.all(
-        themes.map(async (theme) => {
-          const output = highlighter.codeToHtml(trimmedCode, {
-            lang: effectiveLang,
-            theme,
-            transformers: [transformerNotationDiff()],
-          })
-
-          if (lang === 'mermaid') {
-            const preAttributes = extractPreAttributes(output)
-            let svgHtml = genSvgMap.get(trimmedCode)
-            if (!svgHtml) {
-              const mermaid = await getMermaid()
-              const { svg } = await mermaid.render('foo', trimmedCode)
-              genSvgMap.set(trimmedCode, svg)
-              svgHtml = svg
-            }
-            return `<div class='${preAttributes.class} py-4 bg-neutral-50'>${svgHtml}</div>`
-          }
-
-          return output
-        }),
-      )
-
-      setCodeElement(
-        <div
-          className={twMerge(
-            isEmbedded ? 'h-full [&>pre]:h-full [&>pre]:rounded-none' : '',
-          )}
-          dangerouslySetInnerHTML={{ __html: htmls.join('') }}
-          ref={ref}
-        />,
-      )
-    })()
-  }, [code, lang])
+  const rendered = React.useMemo(() => {
+    return renderCodeBlockData({ code, lang, title })
+  }, [code, lang, title])
 
   return (
-    <div
-      className={twMerge(
-        'codeblock w-full max-w-full relative not-prose border border-gray-500/20 rounded-md [&_pre]:rounded-md',
-        props.className,
-      )}
+    <CodeBlockView
+      className={props.className}
+      copyText={rendered.copyText}
+      htmlMarkup={rendered.htmlMarkup}
+      isEmbedded={props.isEmbedded}
+      lang={rendered.lang}
+      showTypeCopyButton={props.showTypeCopyButton}
       style={props.style}
-    >
-      {(title || showTypeCopyButton) && (
-        <div className="flex items-center justify-between px-4 py-2 bg-gray-50 dark:bg-gray-900">
-          <div className="text-xs text-gray-700 dark:text-gray-300">
-            {title || (lang?.toLowerCase() === 'bash' ? 'sh' : (lang ?? ''))}
-          </div>
-
-          <Button
-            variant="ghost"
-            size="xs"
-            className={twMerge('border-0 rounded-md transition-opacity')}
-            onClick={() => {
-              let copyContent =
-                typeof ref.current?.innerText === 'string'
-                  ? ref.current.innerText
-                  : ''
-
-              if (copyContent.endsWith('\n')) {
-                copyContent = copyContent.slice(0, -1)
-              }
-
-              navigator.clipboard.writeText(copyContent)
-              setCopied(true)
-              setTimeout(() => setCopied(false), 2000)
-              notify(
-                <div className="flex flex-col">
-                  <span className="font-medium">Copied code</span>
-                  <span className="text-gray-500 dark:text-gray-400 text-xs">
-                    Code block copied to clipboard
-                  </span>
-                </div>,
-              )
-            }}
-            aria-label="Copy code to clipboard"
-          >
-            {copied ? (
-              <span className="text-xs">Copied!</span>
-            ) : (
-              <Copy className="w-4 h-4" />
-            )}
-          </Button>
-        </div>
-      )}
-      {codeElement}
-    </div>
+      title={rendered.title}
+    />
   )
 }
diff --git a/src/components/markdown/CodeBlockView.tsx b/src/components/markdown/CodeBlockView.tsx
new file mode 100644
index 000000000..1121b3ddb
--- /dev/null
+++ b/src/components/markdown/CodeBlockView.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react'
+import { Copy } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { useToast } from '~/components/ToastProvider'
+import { Button } from '~/ui'
+import { copyTextToClipboard, useTemporaryFlag } from '~/utils/browser-effects'
+
+export function CodeBlockView({
+  className,
+  copyText,
+  htmlMarkup,
+  isEmbedded,
+  lang,
+  showTypeCopyButton = true,
+  style,
+  title,
+}: {
+  className?: string
+  copyText: string
+  htmlMarkup: string
+  isEmbedded?: boolean
+  lang?: string
+  showTypeCopyButton?: boolean
+  style?: React.CSSProperties
+  title?: string
+}) {
+  const copied = useTemporaryFlag()
+  const { notify } = useToast()
+
+  return (
+    <div
+      className={twMerge(
+        'codeblock w-full max-w-full relative not-prose border border-gray-500/20 rounded-md overflow-hidden [&_pre]:rounded-none',
+        className,
+      )}
+      style={style}
+    >
+      {(title || showTypeCopyButton) && (
+        <div className="flex items-center justify-between px-4 py-2 bg-gray-50 dark:bg-gray-900 rounded-t-md">
+          <div className="text-xs text-gray-700 dark:text-gray-300">
+            {title || (lang?.toLowerCase() === 'bash' ? 'sh' : (lang ?? ''))}
+          </div>
+
+          <Button
+            variant="ghost"
+            size="xs"
+            className={twMerge('border-0 rounded-md transition-opacity')}
+            onClick={async () => {
+              await copyTextToClipboard(copyText)
+              copied.trigger()
+              notify(
+                <div className="flex flex-col">
+                  <span className="font-medium">Copied code</span>
+                  <span className="text-gray-500 dark:text-gray-400 text-xs">
+                    Code block copied to clipboard
+                  </span>
+                </div>,
+              )
+            }}
+            aria-label="Copy code to clipboard"
+          >
+            {copied.active ? (
+              <span className="text-xs">Copied!</span>
+            ) : (
+              <Copy className="w-4 h-4" />
+            )}
+          </Button>
+        </div>
+      )}
+
+      <div
+        className={twMerge(
+          isEmbedded ? 'h-full [&>pre]:h-full [&>pre]:rounded-none' : '',
+        )}
+        dangerouslySetInnerHTML={{ __html: htmlMarkup }}
+      />
+    </div>
+  )
+}
diff --git a/src/components/markdown/FileTabs.tsx b/src/components/markdown/FileTabs.tsx
index d29923d0d..a49f1851f 100644
--- a/src/components/markdown/FileTabs.tsx
+++ b/src/components/markdown/FileTabs.tsx
@@ -41,12 +41,15 @@ export function FileTabs({ tabs, children }: FileTabsProps) {
         {childrenArray.map((child, index) => {
           const tab = tabs[index]
           if (!tab) return null
+          const isActive = tab.slug === activeSlug
           return (
             <div
               key={`${id}-${tab.slug}-panel`}
               data-tab={tab.slug}
-              hidden={tab.slug !== activeSlug}
-              className="file-tabs-panel"
+              data-content="code-only"
+              className={`border border-t-0 border-gray-500/20 rounded-b-md overflow-hidden ${
+                isActive ? '' : 'hidden'
+              }`}
             >
               {child}
             </div>
diff --git a/src/components/markdown/FrameworkContent.tsx b/src/components/markdown/FrameworkContent.tsx
index 26601f0ae..0a94e1107 100644
--- a/src/components/markdown/FrameworkContent.tsx
+++ b/src/components/markdown/FrameworkContent.tsx
@@ -1,34 +1,24 @@
 import { useLocalCurrentFramework } from '../FrameworkSelect'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { useParams } from '@tanstack/react-router'
-import { Tabs } from './Tabs'
 import type { Framework } from '~/libraries/types'
-import { Children, ReactNode } from 'react'
+import { Children, isValidElement, type ReactNode } from 'react'
 
-type CodeBlockMeta = {
-  title: string
-  code: string
-  language: string
+type FrameworkContentProps = {
+  children?: ReactNode
 }
 
-type FrameworkContentProps = {
-  codeBlocksByFramework: Record<string, CodeBlockMeta[]>
-  availableFrameworks: string[]
-  /** Pre-rendered React children for each framework (from domToReact) */
-  panelsByFramework: Record<string, ReactNode>
+function isFrameworkPanel(child: ReactNode): child is React.ReactElement<{
+  'data-framework': string
+  children?: ReactNode
+}> {
+  return (
+    isValidElement<{ 'data-framework'?: string }>(child) &&
+    typeof child.props['data-framework'] === 'string'
+  )
 }
 
-/**
- * Renders content for the currently selected framework.
- * - If no content for framework: shows nothing
- * - If 1 code block: shows just the code block (minimal style)
- * - If multiple code blocks: shows as file tabs
- * - If no code blocks but has content: shows the content directly
- */
-export function FrameworkContent({
-  codeBlocksByFramework,
-  panelsByFramework,
-}: FrameworkContentProps) {
+export function FrameworkContent({ children }: FrameworkContentProps) {
   const { framework: paramsFramework } = useParams({ strict: false })
   const localCurrentFramework = useLocalCurrentFramework()
   const userQuery = useCurrentUserQuery()
@@ -40,37 +30,16 @@ export function FrameworkContent({
     'react') as Framework
 
   const normalizedFramework = actualFramework.toLowerCase()
-
-  // Find the framework's code blocks
-  const frameworkBlocks = codeBlocksByFramework[normalizedFramework] || []
-  const frameworkPanel = panelsByFramework[normalizedFramework]
-
-  // If no panel content at all for this framework, show nothing
-  if (!frameworkPanel) {
+  const panels = Children.toArray(children).filter(isFrameworkPanel)
+  const fallbackPanel = panels[0]
+  const activePanel =
+    panels.find(
+      (child) => child.props['data-framework'] === normalizedFramework,
+    ) || fallbackPanel
+
+  if (!activePanel || !isValidElement(activePanel)) {
     return null
   }
 
-  // If no code blocks, just render the content directly
-  if (frameworkBlocks.length === 0) {
-    return <div className="framework-content">{frameworkPanel}</div>
-  }
-
-  // If 1 code block, render minimal style
-  if (frameworkBlocks.length === 1) {
-    return <div className="framework-content">{frameworkPanel}</div>
-  }
-
-  // Multiple code blocks - show as file tabs
-  const tabs = frameworkBlocks.map((block, index) => ({
-    slug: `file-${index}`,
-    name: block.title || 'Untitled',
-  }))
-
-  const childrenArray = Children.toArray(frameworkPanel)
-
-  return (
-    <div className="framework-content">
-      <Tabs tabs={tabs}>{childrenArray}</Tabs>
-    </div>
-  )
+  return <div className="framework-content">{activePanel.props.children}</div>
 }
diff --git a/src/components/markdown/Markdown.tsx b/src/components/markdown/Markdown.tsx
index a5fa01be5..5753d29d3 100644
--- a/src/components/markdown/Markdown.tsx
+++ b/src/components/markdown/Markdown.tsx
@@ -1,155 +1,215 @@
-import type { HTMLProps } from 'react'
+import { renderMarkdownReact } from '@tanstack/markdown/react'
 import * as React from 'react'
+import { InlineCode, MarkdownImg } from '~/ui'
+import {
+  findFirstImageSrc,
+  parseSiteMarkdown,
+  type MarkdownDocument,
+} from '~/utils/markdown'
+import { isSafeHttpUrl } from '~/utils/url-boundary'
+import { CodeBlock } from './CodeBlock'
 import { MarkdownLink } from './MarkdownLink'
+import {
+  MdCommentComponent,
+  MdFrameworkPanel,
+  MdTabPanel,
+} from './MdComponents'
+
+type MarkdownRenderOptions = {
+  preserveTabPanels?: boolean
+}
 
-import parse, {
-  attributesToProps,
-  domToReact,
-  Element,
-  HTMLReactParserOptions,
-} from 'html-react-parser'
+export type MarkdownProps = {
+  content?: string
+  document?: MarkdownDocument
+  preserveTabPanels?: boolean
+  /** Render the first image in the document as high-priority/eager (e.g. blog post hero images) */
+  eagerFirstImage?: boolean
+}
 
-import { renderMarkdown } from '~/utils/markdown'
-import { CodeBlock } from './CodeBlock'
-import { handleTabsComponent } from './MarkdownTabsHandler'
-import { handleFrameworkComponent } from './MarkdownFrameworkHandler'
-import { InlineCode, MarkdownImg } from '~/ui'
+export function Markdown({
+  content,
+  document,
+  preserveTabPanels,
+  eagerFirstImage,
+}: MarkdownProps) {
+  const parsed = React.useMemo(
+    () => document ?? parseSiteMarkdown(content ?? ''),
+    [content, document],
+  )
 
-type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  return React.useMemo(() => {
+    const firstImageSrc = eagerFirstImage
+      ? findFirstImageSrc(parsed)
+      : undefined
+
+    return renderMarkdownReact(parsed, {
+      allowHtml: true,
+      components: createMarkdownComponents({
+        preserveTabPanels,
+        firstImageSrc,
+      }),
+      headingAnchors,
+    })
+  }, [parsed, preserveTabPanels, eagerFirstImage])
+}
 
-const CustomHeading = ({
-  Comp,
-  id,
-  children,
-  ...props
-}: HTMLProps<HTMLHeadingElement> & {
-  Comp: HeadingLevel
-}) => {
-  // Convert children to array and strip any inner anchor (native 'a' or MarkdownLink)
-  const childrenArray = React.Children.toArray(children)
-  const sanitizedChildren = childrenArray.map((child) => {
-    if (
-      React.isValidElement(child) &&
-      (child.type === 'a' || child.type === MarkdownLink)
-    ) {
-      // replace anchor child with its own children so outer anchor remains the only link
-      return (child.props as { children?: React.ReactNode }).children ?? null
-    }
-    return child
-  })
-
-  const heading = (
-    <Comp id={id} {...props}>
-      {sanitizedChildren}
-    </Comp>
-  )
+const headingAnchors = {
+  ariaHidden: true,
+  className: 'anchor-heading anchor-heading-link',
+  content: '#',
+  tabIndex: -1,
+}
+
+function CodeFigure({ children }: { children?: React.ReactNode }) {
+  return <>{children}</>
+}
+
+function CodeFigcaption() {
+  return null
+}
+
+function createHeadingComponent(
+  level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6',
+) {
+  function HeadingComponent({
+    children,
+    className,
+    id,
+    ...props
+  }: React.HTMLAttributes<HTMLHeadingElement>) {
+    const Tag = level
 
-  if (id) {
     return (
-      <a
-        href={`#${id}`}
-        className={`anchor-heading *:scroll-my-20 *:lg:scroll-my-4`}
+      <Tag
+        id={id}
+        className={`${className ?? ''} block scroll-my-20 lg:scroll-my-4`}
+        {...props}
       >
-        {heading}
-      </a>
+        {children}
+      </Tag>
     )
   }
 
-  return heading
+  HeadingComponent.displayName = `Heading${level.toUpperCase()}`
+
+  return HeadingComponent
 }
 
-const makeHeading =
-  (type: HeadingLevel) => (props: HTMLProps<HTMLHeadingElement>) => (
-    <CustomHeading
-      Comp={type}
-      {...props}
-      className={`${props.className ?? ''} block`}
-    />
-  )
+const trustedIframeHosts = [
+  'codesandbox.io',
+  'stackblitz.com',
+  'www.youtube.com',
+  'youtube.com',
+  'www.youtube-nocookie.com',
+  'youtube-nocookie.com',
+  'player.vimeo.com',
+]
+
+function isTrustedIframeSrc(src: string | undefined) {
+  if (!src || !isSafeHttpUrl(src)) {
+    return false
+  }
+
+  try {
+    const url = new URL(src)
+    return trustedIframeHosts.some(
+      (host) => url.hostname === host || url.hostname.endsWith(`.${host}`),
+    )
+  } catch {
+    return false
+  }
+}
+
+function MarkdownIframe(props: React.IframeHTMLAttributes<HTMLIFrameElement>) {
+  if (!isTrustedIframeSrc(props.src)) {
+    return null
+  }
 
-const MarkdownIframe = React.memo(function MarkdownIframe(
-  props: HTMLProps<HTMLIFrameElement>,
-) {
   return <iframe {...props} className="w-full" title="Embedded Content" />
-})
-
-const markdownComponents: Record<string, React.FC> = {
-  a: MarkdownLink,
-  pre: CodeBlock,
-  h1: makeHeading('h1'),
-  h2: makeHeading('h2'),
-  h3: makeHeading('h3'),
-  h4: makeHeading('h4'),
-  h5: makeHeading('h5'),
-  h6: makeHeading('h6'),
-  code: InlineCode,
-  iframe: MarkdownIframe,
-  img: MarkdownImg,
 }
 
-const options: HTMLReactParserOptions = {
-  replace: (domNode) => {
-    if (domNode instanceof Element && domNode.attribs) {
-      if (domNode.name === 'md-comment-component') {
-        const componentName = domNode.attribs['data-component']
-        const rawAttributes = domNode.attribs['data-attributes']
-        const attributes: Record<string, any> = {}
-        try {
-          Object.assign(attributes, JSON.parse(rawAttributes))
-        } catch {
-          // ignore JSON parse errors and fall back to empty props
-        }
-
-        switch (componentName?.toLowerCase()) {
-          case 'tabs':
-            return handleTabsComponent(domNode, attributes, options)
-          case 'framework':
-            return handleFrameworkComponent(domNode, attributes, options)
-          default:
-            return <div>{domToReact(domNode.children as any, options)}</div>
-        }
-      }
-
-      const replacer = markdownComponents[domNode.name]
-      if (replacer) {
-        return React.createElement(
-          replacer,
-          attributesToProps(domNode.attribs),
-          domToReact(domNode.children as any, options),
-        )
-      }
-    }
-
-    return
-  },
+function CodeElement({
+  children,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLElement>) {
+  if (className?.includes('language-')) {
+    return (
+      <code className={className} {...props}>
+        {children}
+      </code>
+    )
+  }
+
+  return (
+    <InlineCode className={className} {...props}>
+      {children}
+    </InlineCode>
+  )
 }
 
-type MarkdownProps = {
-  rawContent?: string
-  htmlMarkup?: string
+function LinkElement(props: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  if (props.className?.includes('anchor-heading')) {
+    // eslint-disable-next-line jsx-a11y/anchor-has-content
+    return <a {...props} />
+  }
+
+  return <MarkdownLink {...props} />
 }
 
-export const Markdown = React.memo(function Markdown({
-  rawContent,
-  htmlMarkup,
-}: MarkdownProps) {
-  const rendered = React.useMemo(() => {
-    if (rawContent) {
-      return renderMarkdown(rawContent)
-    }
+function TableElement({
+  className,
+  ...props
+}: React.TableHTMLAttributes<HTMLTableElement>) {
+  return (
+    <div className="w-full max-w-full overflow-x-auto">
+      <table
+        className={['min-w-full', className].filter(Boolean).join(' ')}
+        {...props}
+      />
+    </div>
+  )
+}
 
-    if (htmlMarkup) {
-      return { markup: htmlMarkup, headings: [] }
-    }
+function createMarkdownComponents(
+  options: MarkdownRenderOptions & { firstImageSrc?: string } = {},
+) {
+  function MdCommentComponentWithOptions(
+    props: React.ComponentProps<typeof MdCommentComponent>,
+  ) {
+    return (
+      <MdCommentComponent
+        {...props}
+        preserveTabPanels={options.preserveTabPanels}
+      />
+    )
+  }
 
-    return { markup: '', headings: [] }
-  }, [rawContent, htmlMarkup])
+  function ImgElement(props: React.ComponentProps<typeof MarkdownImg>) {
+    const isFirstImage =
+      options.firstImageSrc !== undefined && props.src === options.firstImageSrc
 
-  return React.useMemo(() => {
-    if (!rendered.markup) {
-      return null
-    }
+    return <MarkdownImg {...props} priority={isFirstImage} />
+  }
 
-    return parse(rendered.markup, options)
-  }, [rendered.markup])
-})
+  return {
+    a: LinkElement,
+    code: CodeElement,
+    figcaption: CodeFigcaption,
+    figure: CodeFigure,
+    h1: createHeadingComponent('h1'),
+    h2: createHeadingComponent('h2'),
+    h3: createHeadingComponent('h3'),
+    h4: createHeadingComponent('h4'),
+    h5: createHeadingComponent('h5'),
+    h6: createHeadingComponent('h6'),
+    iframe: MarkdownIframe,
+    img: ImgElement,
+    'md-comment-component': MdCommentComponentWithOptions,
+    'md-framework-panel': MdFrameworkPanel,
+    'md-tab-panel': MdTabPanel,
+    pre: CodeBlock,
+    table: TableElement,
+  }
+}
diff --git a/src/components/markdown/MarkdownContent.tsx b/src/components/markdown/MarkdownContent.tsx
index 86553d4a3..1d22a521f 100644
--- a/src/components/markdown/MarkdownContent.tsx
+++ b/src/components/markdown/MarkdownContent.tsx
@@ -1,21 +1,26 @@
 import * as React from 'react'
-import { SquarePen } from 'lucide-react'
+import { ChevronDown, Copy, SquarePen } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
+import { ButtonGroup } from '~/components/ButtonGroup'
 import { DocTitle } from '~/components/DocTitle'
-import { Markdown } from './Markdown'
-import { CopyPageDropdown } from '~/components/CopyPageDropdown'
 import { DocFeedbackProvider } from '~/components/DocFeedbackProvider'
 import { Button } from '~/ui'
+import type { SiteMarkdownDocument } from '~/utils/markdown'
+import { Markdown } from './Markdown'
+
+const LazyCopyPageDropdown = React.lazy(() =>
+  import('~/components/CopyPageDropdown').then((m) => ({
+    default: m.CopyPageDropdown,
+  })),
+)
 
 type MarkdownContentProps = {
   title: string
   repo: string
   branch: string
   filePath: string
-  /** Pre-rendered HTML markup (from renderMarkdown). If not provided, rawContent will be rendered. */
-  htmlMarkup?: string
-  /** Raw markdown content to render. Used if htmlMarkup is not provided. */
-  rawContent?: string
+  markdown: SiteMarkdownDocument
+  preserveTabPanels?: boolean
   /** Additional elements to render in the title bar (e.g., width toggle button) */
   titleBarActions?: React.ReactNode
   /** Additional class names for the prose container */
@@ -26,6 +31,37 @@ type MarkdownContentProps = {
   libraryId?: string
   libraryVersion?: string
   pagePath?: string
+  /** Current framework for filtering markdown content */
+  currentFramework?: string
+  /** Render the first image in the document as high-priority/eager (e.g. blog post hero images) */
+  eagerFirstImage?: boolean
+}
+
+function CopyPageDropdownFallback() {
+  return (
+    <ButtonGroup>
+      <Button
+        variant="ghost"
+        size="xs"
+        rounded="none"
+        className="border-0"
+        disabled
+      >
+        <Copy className="w-3 h-3" />
+        Copy page
+      </Button>
+      <Button
+        variant="ghost"
+        size="xs"
+        rounded="none"
+        className="border-0 px-1.5"
+        disabled
+        aria-label="More copy actions"
+      >
+        <ChevronDown className="w-3 h-3" />
+      </Button>
+    </ButtonGroup>
+  )
 }
 
 export function MarkdownContent({
@@ -33,44 +69,73 @@ export function MarkdownContent({
   repo,
   branch,
   filePath,
-  htmlMarkup,
-  rawContent,
+  markdown,
+  preserveTabPanels,
   titleBarActions,
   proseClassName,
   containerRef,
   libraryId,
   libraryVersion,
   pagePath,
+  currentFramework,
+  eagerFirstImage,
 }: MarkdownContentProps) {
-  const renderMarkdownContent = () => {
-    const markdownElement = htmlMarkup ? (
-      <Markdown htmlMarkup={htmlMarkup} />
-    ) : rawContent ? (
-      <Markdown rawContent={rawContent} />
-    ) : null
+  const [canLoadCopyControls, setCanLoadCopyControls] = React.useState(false)
 
-    if (libraryId && libraryVersion && pagePath) {
-      return (
-        <DocFeedbackProvider
-          pagePath={pagePath}
-          libraryId={libraryId}
-          libraryVersion={libraryVersion}
-        >
-          {markdownElement}
-        </DocFeedbackProvider>
-      )
-    }
+  React.useEffect(() => {
+    setCanLoadCopyControls(true)
+  }, [])
 
-    return markdownElement
-  }
+  const renderedMarkdown = (
+    <Markdown
+      document={markdown}
+      preserveTabPanels={preserveTabPanels}
+      eagerFirstImage={eagerFirstImage}
+    />
+  )
+
+  const contentNode =
+    libraryId && libraryVersion && pagePath ? (
+      <DocFeedbackProvider
+        pagePath={pagePath}
+        libraryId={libraryId}
+        libraryVersion={libraryVersion}
+      >
+        {renderedMarkdown}
+      </DocFeedbackProvider>
+    ) : (
+      renderedMarkdown
+    )
 
   return (
     <>
       {title ? (
         <div className="flex flex-wrap items-center justify-between gap-2">
           <DocTitle>{title}</DocTitle>
-          <div className="flex items-center gap-2 shrink-0">
-            <CopyPageDropdown repo={repo} branch={branch} filePath={filePath} />
+          <div
+            className="flex items-center gap-2 shrink-0"
+            onFocusCapture={() => {
+              setCanLoadCopyControls(true)
+            }}
+            onPointerEnter={() => {
+              setCanLoadCopyControls(true)
+            }}
+            onTouchStart={() => {
+              setCanLoadCopyControls(true)
+            }}
+          >
+            {canLoadCopyControls ? (
+              <React.Suspense fallback={<CopyPageDropdownFallback />}>
+                <LazyCopyPageDropdown
+                  repo={repo}
+                  branch={branch}
+                  filePath={filePath}
+                  currentFramework={currentFramework}
+                />
+              </React.Suspense>
+            ) : (
+              <CopyPageDropdownFallback />
+            )}
             {titleBarActions}
           </div>
         </div>
@@ -87,7 +152,7 @@ export function MarkdownContent({
           proseClassName,
         )}
       >
-        {renderMarkdownContent()}
+        {contentNode}
       </div>
       <div className="h-12" />
       <div className="w-full h-px bg-gray-500 opacity-30" />
diff --git a/src/components/markdown/MarkdownFrameworkHandler.tsx b/src/components/markdown/MarkdownFrameworkHandler.tsx
deleted file mode 100644
index de0b877a3..000000000
--- a/src/components/markdown/MarkdownFrameworkHandler.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react'
-import { domToReact, Element } from 'html-react-parser'
-import type { HTMLReactParserOptions } from 'html-react-parser'
-
-// Helper to resolve different module shapes (named export vs default)
-function resolveModuleDefault(mod: any, key: string): React.ComponentType<any> {
-  if (!mod) return undefined as any
-  if (mod[key] && typeof mod[key] === 'function') return mod[key]
-  if (mod.default) {
-    if (mod.default[key] && typeof mod.default[key] === 'function')
-      return mod.default[key]
-    if (typeof mod.default === 'function') return mod.default
-  }
-  if (typeof mod === 'function') return mod
-  return (mod as any).default ?? (mod as any)
-}
-
-const FrameworkContent = React.lazy<React.ComponentType<any>>(() =>
-  import('./FrameworkContent').then((mod) => ({
-    default: resolveModuleDefault(mod, 'FrameworkContent'),
-  })),
-)
-
-export function handleFrameworkComponent(
-  domNode: Element,
-  attributes: Record<string, any>,
-  options: HTMLReactParserOptions,
-) {
-  const frameworkMeta = domNode.attribs['data-framework-meta']
-  if (!frameworkMeta) {
-    return null
-  }
-
-  try {
-    const { codeBlocksByFramework } = JSON.parse(frameworkMeta)
-    const availableFrameworks = JSON.parse(
-      domNode.attribs['data-available-frameworks'] || '[]',
-    )
-
-    const panelElements = domNode.children?.filter(
-      (child): child is Element =>
-        child instanceof Element && child.name === 'md-framework-panel',
-    )
-
-    // Build panelsByFramework map
-    const panelsByFramework: Record<string, React.ReactNode> = {}
-    panelElements?.forEach((panel) => {
-      const fw = panel.attribs['data-framework']
-      if (fw) {
-        panelsByFramework[fw] = domToReact(panel.children as any, options)
-      }
-    })
-
-    return (
-      <React.Suspense fallback={<div>Loading...</div>}>
-        <FrameworkContent
-          codeBlocksByFramework={codeBlocksByFramework}
-          availableFrameworks={availableFrameworks}
-          panelsByFramework={panelsByFramework}
-        />
-      </React.Suspense>
-    )
-  } catch {
-    return null
-  }
-}
diff --git a/src/components/markdown/MarkdownHeadingContext.tsx b/src/components/markdown/MarkdownHeadingContext.tsx
deleted file mode 100644
index de4a2b6a9..000000000
--- a/src/components/markdown/MarkdownHeadingContext.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react'
-import { MarkdownHeading } from '~/utils/markdown/processor'
-
-const MarkdownHeadingContext = React.createContext<{
-  headings: MarkdownHeading[]
-  setHeadings(headings: MarkdownHeading[]): void
-}>({
-  headings: [],
-  setHeadings: () => undefined,
-})
-
-export function MarkdownHeadingProvider({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  const [headings, setHeadings] = React.useState<MarkdownHeading[]>([])
-
-  const value = React.useMemo(() => ({ headings, setHeadings }), [headings])
-
-  return (
-    <MarkdownHeadingContext.Provider value={value}>
-      {children}
-    </MarkdownHeadingContext.Provider>
-  )
-}
-
-export function useMarkdownHeadings() {
-  return React.useContext(MarkdownHeadingContext)
-}
diff --git a/src/components/markdown/MarkdownLink.tsx b/src/components/markdown/MarkdownLink.tsx
index 488724b81..2906b841c 100644
--- a/src/components/markdown/MarkdownLink.tsx
+++ b/src/components/markdown/MarkdownLink.tsx
@@ -1,5 +1,6 @@
 import { Link } from '@tanstack/react-router'
 import type { HTMLProps } from 'react'
+import { isSafeHref } from '~/utils/url-boundary'
 
 function isRelativeLink(link: string) {
   return (
@@ -8,20 +9,78 @@ function isRelativeLink(link: string) {
     !link.startsWith('https://') &&
     !link.startsWith('//') &&
     !link.startsWith('#') &&
-    !link.startsWith('mailto:')
+    !link.startsWith('mailto:') &&
+    !/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(link)
   )
 }
 
+function isStaticAssetLink(link: string) {
+  const [pathname] = link.split(/[?#]/)
+  return /\.[a-z0-9]+$/i.test(pathname) && !pathname.endsWith('.md')
+}
+
+function isRoutableInternalLink(link: string) {
+  return (
+    link.startsWith('/') &&
+    !link.startsWith('//') &&
+    link !== '/api' &&
+    !link.startsWith('/api/') &&
+    !isStaticAssetLink(link)
+  )
+}
+
+function normalizeRoutableInternalPathname(pathname: string) {
+  const routerFrameworkMatch = pathname.match(
+    /^\/router\/([^/]+)\/docs\/framework\/[^/]+\/(.+)$/,
+  )
+
+  if (!routerFrameworkMatch) {
+    return pathname
+  }
+
+  const [, version, docsPath] = routerFrameworkMatch
+
+  if (!version || !docsPath || docsPath.startsWith('examples/')) {
+    return pathname
+  }
+
+  return `/router/${version}/docs/${docsPath}`
+}
+
 export function MarkdownLink({
   href: hrefProp,
   ...rest
 }: HTMLProps<HTMLAnchorElement>) {
-  if (!isRelativeLink(hrefProp ?? '')) {
+  const href = hrefProp ?? ''
+
+  if (!isSafeHref(href)) {
+    // eslint-disable-next-line jsx-a11y/anchor-has-content
+    return <a {...rest} />
+  }
+
+  if (isRoutableInternalLink(href)) {
+    const [hrefWithoutHash, hash] = href.split('#')
+    const hrefWithoutMd = normalizeRoutableInternalPathname(
+      hrefWithoutHash.replace('.md', ''),
+    )
+
+    return (
+      <Link
+        {...rest}
+        to={hrefWithoutMd}
+        hash={hash}
+        preload={false}
+        ref={undefined}
+      />
+    )
+  }
+
+  if (!isRelativeLink(href)) {
     // eslint-disable-next-line jsx-a11y/anchor-has-content
     return <a {...rest} href={hrefProp} />
   }
 
-  const [hrefWithoutHash, hash] = hrefProp?.split('#') ?? []
+  const [hrefWithoutHash, hash] = href.split('#')
   let hrefWithoutMd = hrefWithoutHash.replace('.md', '')
 
   // Force relative links to resolve one level higher
@@ -39,7 +98,7 @@ export function MarkdownLink({
       unsafeRelative="path"
       to={hrefWithoutMd}
       hash={hash}
-      preload={undefined}
+      preload={false}
       ref={undefined}
     />
   )
diff --git a/src/components/markdown/MarkdownTabsHandler.tsx b/src/components/markdown/MarkdownTabsHandler.tsx
deleted file mode 100644
index d453cbdb6..000000000
--- a/src/components/markdown/MarkdownTabsHandler.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import * as React from 'react'
-import { domToReact, Element } from 'html-react-parser'
-import type { HTMLReactParserOptions } from 'html-react-parser'
-import type { Framework } from '~/libraries/types'
-
-// Helper to resolve different module shapes (named export vs default)
-function resolveModuleDefault(mod: any, key: string): React.ComponentType<any> {
-  if (!mod) return undefined as any
-  if (mod[key] && typeof mod[key] === 'function') return mod[key]
-  if (mod.default) {
-    if (mod.default[key] && typeof mod.default[key] === 'function')
-      return mod.default[key]
-    if (typeof mod.default === 'function') return mod.default
-  }
-  if (typeof mod === 'function') return mod
-  return (mod as any).default ?? (mod as any)
-}
-
-const Tabs = React.lazy<React.ComponentType<any>>(() =>
-  import('./Tabs').then((mod) => ({
-    default: resolveModuleDefault(mod, 'Tabs'),
-  })),
-)
-const PackageManagerTabs = React.lazy<React.ComponentType<any>>(() =>
-  import('./PackageManagerTabs').then((mod) => ({
-    default: resolveModuleDefault(mod, 'PackageManagerTabs'),
-  })),
-)
-const FileTabs = React.lazy<React.ComponentType<any>>(() =>
-  import('./FileTabs').then((mod) => ({
-    default: resolveModuleDefault(mod, 'FileTabs'),
-  })),
-)
-
-export function handleTabsComponent(
-  domNode: Element,
-  attributes: Record<string, any>,
-  options: HTMLReactParserOptions,
-) {
-  const pmMeta = domNode.attribs['data-package-manager-meta']
-
-  // Handle package-manager variant
-  if (pmMeta) {
-    try {
-      const { packagesByFramework, mode } = JSON.parse(pmMeta)
-      const frameworks = Object.keys(packagesByFramework) as Framework[]
-
-      return (
-        <React.Suspense fallback={<div>Loading...</div>}>
-          <PackageManagerTabs
-            packagesByFramework={packagesByFramework}
-            mode={mode}
-            frameworks={frameworks}
-          />
-        </React.Suspense>
-      )
-    } catch {
-      // Fall through to default tabs if parsing fails
-    }
-  }
-
-  // Check if this is files variant
-  const filesMeta = domNode.attribs['data-files-meta']
-  if (filesMeta) {
-    try {
-      const tabs = attributes.tabs || []
-
-      const panelElements = domNode.children?.filter(
-        (child): child is Element =>
-          child instanceof Element && child.name === 'md-tab-panel',
-      )
-
-      const children = panelElements?.map((panel) =>
-        domToReact(panel.children as any, options),
-      )
-
-      return (
-        <React.Suspense fallback={<div>Loading...</div>}>
-          <FileTabs tabs={tabs} children={children as any} />
-        </React.Suspense>
-      )
-    } catch {
-      // Fall through to default tabs if parsing fails
-    }
-  }
-
-  // Handle default tabs variant
-  const tabs = attributes.tabs
-
-  if (!tabs || !Array.isArray(tabs)) {
-    return null
-  }
-
-  const panelElements = domNode.children?.filter(
-    (child): child is Element =>
-      child instanceof Element && child.name === 'md-tab-panel',
-  )
-
-  const children = panelElements?.map((panel) => {
-    const result = domToReact(panel.children as any, options)
-    // Wrap in fragment to ensure it's a single React node
-    return <>{result}</>
-  })
-
-  return (
-    <React.Suspense fallback={<div>Loading...</div>}>
-      <Tabs tabs={tabs} children={children as any} />
-    </React.Suspense>
-  )
-}
diff --git a/src/components/markdown/MdComponents.tsx b/src/components/markdown/MdComponents.tsx
new file mode 100644
index 000000000..7bfd2041f
--- /dev/null
+++ b/src/components/markdown/MdComponents.tsx
@@ -0,0 +1,314 @@
+import * as React from 'react'
+import { FileTabs } from './FileTabs'
+import { FrameworkContent } from './FrameworkContent'
+import { PackageManagerTabs } from './PackageManagerTabs'
+import { BundlerTabs } from './BundlerTabs'
+import { CodeBlock } from './CodeBlock'
+import { Tabs } from './Tabs'
+import {
+  getInstallCommand,
+  PACKAGE_MANAGERS,
+  type InstallMode,
+} from '~/utils/markdown/installCommand'
+
+function parseJson(value: string | undefined) {
+  if (!value) {
+    return null
+  }
+
+  try {
+    return JSON.parse(value)
+  } catch {
+    return null
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+type TabMeta = {
+  name: string
+  slug: string
+}
+
+function getTabs(value: unknown): Array<TabMeta> {
+  if (!isRecord(value) || !Array.isArray(value.tabs)) {
+    return []
+  }
+
+  return value.tabs.filter(
+    (tab): tab is TabMeta =>
+      isRecord(tab) &&
+      typeof tab.name === 'string' &&
+      typeof tab.slug === 'string',
+  )
+}
+
+function isPackageGroups(value: unknown): value is string[][] {
+  return (
+    Array.isArray(value) &&
+    value.every(
+      (group) =>
+        Array.isArray(group) &&
+        group.every((packageName) => typeof packageName === 'string'),
+    )
+  )
+}
+
+function isInstallMode(value: unknown): value is InstallMode {
+  return (
+    value === 'install' ||
+    value === 'dev-install' ||
+    value === 'local-install' ||
+    value === 'create' ||
+    value === 'custom'
+  )
+}
+
+type PackageManagerMeta = {
+  mode: InstallMode
+  packagesByFramework: Record<string, string[][]>
+}
+
+function getPackageManagerMeta(value: unknown): PackageManagerMeta | null {
+  if (!isRecord(value) || !isInstallMode(value.mode)) {
+    return null
+  }
+
+  const rawPackagesByFramework = value.packagesByFramework
+  if (!isRecord(rawPackagesByFramework)) {
+    return null
+  }
+
+  const packagesByFramework: Record<string, string[][]> = {}
+
+  for (const [framework, packageGroups] of Object.entries(
+    rawPackagesByFramework,
+  )) {
+    if (!isPackageGroups(packageGroups)) {
+      return null
+    }
+
+    packagesByFramework[framework] = packageGroups
+  }
+
+  return {
+    mode: value.mode,
+    packagesByFramework,
+  }
+}
+
+type MdCommentComponentProps = {
+  'data-attributes'?: string
+  'data-component'?: string
+  'data-files-meta'?: string
+  'data-package-manager-meta'?: string
+  'data-bundler-meta'?: string
+  preserveTabPanels?: boolean
+  children?: React.ReactNode
+}
+
+function isMdTabPanelElement(
+  child: React.ReactNode,
+): child is React.ReactElement<MdTabPanelProps> {
+  return (
+    React.isValidElement(child) &&
+    (child.type === MdTabPanel || child.type === 'md-tab-panel')
+  )
+}
+
+function isMdFrameworkPanelElement(
+  child: React.ReactNode,
+): child is React.ReactElement<MdFrameworkPanelProps> {
+  return (
+    React.isValidElement(child) &&
+    (child.type === MdFrameworkPanel || child.type === 'md-framework-panel')
+  )
+}
+
+function renderPanelChildren(
+  panels: Array<React.ReactElement<MdTabPanelProps>>,
+  preserveTabPanels: boolean,
+) {
+  return panels.map((panel, index) => {
+    if (!preserveTabPanels) {
+      return panel.props.children
+    }
+
+    return <React.Fragment key={index}>{panel.props.children}</React.Fragment>
+  })
+}
+
+export function MdCommentComponent({
+  'data-attributes': rawAttributes,
+  'data-component': componentName,
+  'data-files-meta': filesMeta,
+  'data-package-manager-meta': packageManagerMeta,
+  'data-bundler-meta': bundlerMeta,
+  preserveTabPanels = false,
+  children,
+}: MdCommentComponentProps) {
+  const parsedAttributes = parseJson(rawAttributes)
+  const attributes =
+    parsedAttributes && typeof parsedAttributes === 'object'
+      ? parsedAttributes
+      : {}
+
+  const normalizedComponentName = componentName?.toLowerCase()
+
+  if (normalizedComponentName === 'tabs') {
+    const parsedPackageManagerMeta = parseJson(packageManagerMeta)
+    const resolvedPackageManagerMeta = getPackageManagerMeta(
+      parsedPackageManagerMeta,
+    )
+
+    if (resolvedPackageManagerMeta) {
+      const frameworkPanels = Object.entries(
+        resolvedPackageManagerMeta.packagesByFramework,
+      ).flatMap(([framework, packageGroups]) => {
+        return PACKAGE_MANAGERS.map((packageManager) => {
+          const commandText = getInstallCommand(
+            packageManager,
+            packageGroups,
+            resolvedPackageManagerMeta.mode,
+          ).join('\n')
+
+          return (
+            <div
+              key={`${framework}-${packageManager}`}
+              data-framework={framework}
+              data-package-manager={packageManager}
+            >
+              <CodeBlock>
+                <code className="language-bash">{commandText}</code>
+              </CodeBlock>
+            </div>
+          )
+        })
+      })
+
+      return <PackageManagerTabs>{frameworkPanels}</PackageManagerTabs>
+    }
+
+    const childArray = React.Children.toArray(children)
+    const panels = childArray.filter(isMdTabPanelElement)
+
+    const parsedBundlerMeta = parseJson(bundlerMeta)
+
+    if (
+      parsedBundlerMeta &&
+      typeof parsedBundlerMeta === 'object' &&
+      panels.length
+    ) {
+      const tabs = getTabs(attributes)
+
+      const panelContent: Record<string, 'code-only' | 'mixed'> = {}
+      const childrenBySlug = new Map<string, React.ReactNode>()
+      panels.forEach((panel, index) => {
+        const slug = panel.props['data-tab-slug']
+        if (!slug) return
+        const content = panel.props['data-content']
+        if (content === 'code-only' || content === 'mixed') {
+          panelContent[slug] = content
+        }
+        childrenBySlug.set(slug, panel.props.children)
+        // Preserve insertion order for tabs that came in without metadata
+        void index
+      })
+
+      return (
+        <BundlerTabs tabs={tabs} panelContent={panelContent}>
+          {tabs.map((tab) => (
+            <React.Fragment key={tab.slug}>
+              {childrenBySlug.get(tab.slug)}
+            </React.Fragment>
+          ))}
+        </BundlerTabs>
+      )
+    }
+
+    const parsedFilesMeta = parseJson(filesMeta)
+
+    if (
+      parsedFilesMeta &&
+      typeof parsedFilesMeta === 'object' &&
+      panels.length
+    ) {
+      const tabs = getTabs(attributes)
+
+      return (
+        <FileTabs tabs={tabs}>
+          {renderPanelChildren(panels, preserveTabPanels)}
+        </FileTabs>
+      )
+    }
+
+    const tabs = getTabs(attributes)
+
+    if (!tabs.length) {
+      return <div>{children}</div>
+    }
+
+    return (
+      <Tabs tabs={tabs}>{renderPanelChildren(panels, preserveTabPanels)}</Tabs>
+    )
+  }
+
+  if (normalizedComponentName === 'framework') {
+    return <MdFrameworkComponentInner>{children}</MdFrameworkComponentInner>
+  }
+
+  return <div>{children}</div>
+}
+
+type MdTabPanelProps = {
+  'data-tab-slug'?: string
+  'data-tab-index'?: string
+  'data-content'?: 'code-only' | 'mixed'
+  children?: React.ReactNode
+}
+
+export function MdTabPanel({ children }: MdTabPanelProps) {
+  return <>{children}</>
+}
+
+type MdFrameworkPanelProps = {
+  'data-framework'?: string
+  children?: React.ReactNode
+}
+
+export function MdFrameworkPanel({ children }: MdFrameworkPanelProps) {
+  return <>{children}</>
+}
+
+function MdFrameworkComponentInner({
+  children,
+}: {
+  children?: React.ReactNode
+}) {
+  const frameworkPanels: Array<React.ReactNode> = []
+
+  for (const child of React.Children.toArray(children)) {
+    if (!isMdFrameworkPanelElement(child)) {
+      continue
+    }
+
+    const framework = child.props['data-framework']
+    if (!framework) {
+      continue
+    }
+
+    frameworkPanels.push(
+      <div key={framework} data-framework={framework}>
+        {child.props.children}
+      </div>,
+    )
+  }
+
+  if (!frameworkPanels.length) {
+    return <div>{children}</div>
+  }
+
+  return <FrameworkContent>{frameworkPanels}</FrameworkContent>
+}
diff --git a/src/components/markdown/MermaidBlock.tsx b/src/components/markdown/MermaidBlock.tsx
new file mode 100644
index 000000000..1cf099b2f
--- /dev/null
+++ b/src/components/markdown/MermaidBlock.tsx
@@ -0,0 +1,129 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+import { CodeBlockView } from './CodeBlockView'
+import { buildPlainCodeBlockHtml } from './codeBlock.shared'
+
+type MermaidRenderState =
+  | {
+      status: 'loading'
+      svg?: undefined
+    }
+  | {
+      status: 'rendered'
+      svg: string
+    }
+  | {
+      status: 'error'
+      svg?: undefined
+    }
+
+function getIsDarkMode() {
+  return document.documentElement.classList.contains('dark')
+}
+
+function useIsDarkMode() {
+  const [isDark, setIsDark] = React.useState(false)
+
+  React.useEffect(() => {
+    const updateIsDark = () => setIsDark(getIsDarkMode())
+    updateIsDark()
+
+    const observer = new MutationObserver(updateIsDark)
+    observer.observe(document.documentElement, {
+      attributeFilter: ['class'],
+      attributes: true,
+    })
+
+    return () => observer.disconnect()
+  }, [])
+
+  return isDark
+}
+
+export function MermaidBlock({
+  className,
+  code,
+  isEmbedded,
+  showTypeCopyButton,
+  style,
+  title,
+}: {
+  className?: string
+  code: string
+  isEmbedded?: boolean
+  showTypeCopyButton?: boolean
+  style?: React.CSSProperties
+  title?: string
+}) {
+  const isDark = useIsDarkMode()
+  const reactId = React.useId()
+  const mermaidId = React.useMemo(
+    () => `mermaid-${reactId.replace(/[^a-zA-Z0-9_-]/g, '')}`,
+    [reactId],
+  )
+  const [renderState, setRenderState] = React.useState<MermaidRenderState>({
+    status: 'loading',
+  })
+
+  React.useEffect(() => {
+    let cancelled = false
+
+    async function renderMermaid() {
+      setRenderState({ status: 'loading' })
+
+      try {
+        const mermaid = (await import('mermaid')).default
+
+        mermaid.initialize({
+          securityLevel: 'strict',
+          startOnLoad: false,
+          theme: isDark ? 'dark' : 'default',
+        })
+
+        const { svg } = await mermaid.render(mermaidId, code)
+
+        if (!cancelled) {
+          setRenderState({ status: 'rendered', svg })
+        }
+      } catch {
+        if (!cancelled) {
+          setRenderState({ status: 'error' })
+        }
+      }
+    }
+
+    void renderMermaid()
+
+    return () => {
+      cancelled = true
+    }
+  }, [code, isDark, mermaidId])
+
+  if (renderState.status !== 'rendered') {
+    return (
+      <CodeBlockView
+        className={className}
+        copyText={code.trimEnd()}
+        htmlMarkup={buildPlainCodeBlockHtml(code)}
+        isEmbedded={isEmbedded}
+        lang="mermaid"
+        showTypeCopyButton={showTypeCopyButton}
+        style={style}
+        title={title}
+      />
+    )
+  }
+
+  return (
+    <div
+      className={twMerge(
+        'mermaid-block not-prose w-full max-w-full overflow-x-auto rounded-md border border-gray-500/20 bg-white p-4 dark:bg-gray-950 [&_svg]:mx-auto [&_svg]:max-w-none',
+        className,
+      )}
+      style={style}
+      role="img"
+      aria-label={title ?? 'Mermaid diagram'}
+      dangerouslySetInnerHTML={{ __html: renderState.svg }}
+    />
+  )
+}
diff --git a/src/components/markdown/PackageManagerTabs.tsx b/src/components/markdown/PackageManagerTabs.tsx
index 31bade627..ea06b8082 100644
--- a/src/components/markdown/PackageManagerTabs.tsx
+++ b/src/components/markdown/PackageManagerTabs.tsx
@@ -1,160 +1,50 @@
 import { useLocalCurrentFramework } from '../FrameworkSelect'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { useParams } from '@tanstack/react-router'
-import { create } from 'zustand'
+import * as React from 'react'
 import { Tabs, type TabDefinition } from './Tabs'
-import { CodeBlock } from './CodeBlock'
+import { createPersistedEnumStore } from './usePersistedEnumStore'
 import type { Framework } from '~/libraries/types'
+import {
+  PACKAGE_MANAGERS,
+  isPackageManager,
+  type PackageManager,
+} from '~/utils/markdown/installCommand'
 
-type PackageManager = 'bun' | 'npm' | 'pnpm' | 'yarn'
-type InstallMode =
-  | 'install'
-  | 'dev-install'
-  | 'local-install'
-  | 'create'
-  | 'custom'
+const DEFAULT_PACKAGE_MANAGER: PackageManager = 'npm'
 
-// Use zustand for cross-component synchronization
-// This ensures all PackageManagerTabs instances on the page stay in sync
-const usePackageManagerStore = create<{
-  packageManager: PackageManager
-  setPackageManager: (pm: PackageManager) => void
-}>((set) => ({
-  packageManager:
-    typeof document !== 'undefined'
-      ? (localStorage.getItem('packageManager') as PackageManager) || 'npm'
-      : 'npm',
-  setPackageManager: (pm: PackageManager) => {
-    localStorage.setItem('packageManager', pm)
-    set({ packageManager: pm })
-  },
-}))
+const packageManagerStore = createPersistedEnumStore<PackageManager>({
+  storageKey: 'packageManager',
+  values: PACKAGE_MANAGERS,
+  defaultValue: DEFAULT_PACKAGE_MANAGER,
+})
 
 type PackageManagerTabsProps = {
-  packagesByFramework: Record<string, string[][]>
-  mode: InstallMode
-  frameworks: Framework[]
+  children?: React.ReactNode
 }
 
-const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'pnpm', 'yarn', 'bun']
-
-function getInstallCommand(
-  packageManager: PackageManager,
-  packageGroups: string[][],
-  mode: InstallMode,
-): string[] {
-  const commands: string[] = []
-
-  if (mode === 'custom') {
-    for (const packages of packageGroups) {
-      const pkgStr = packages.join(' ')
-      switch (packageManager) {
-        case 'npm':
-          commands.push(`npm ${pkgStr}`)
-          break
-        case 'pnpm':
-          commands.push(`pnpm ${pkgStr}`)
-          break
-        case 'yarn':
-          commands.push(`yarn ${pkgStr}`)
-          break
-        case 'bun':
-          commands.push(`bun ${pkgStr}`)
-          break
-      }
-    }
-  }
-
-  if (mode === 'create') {
-    for (const packages of packageGroups) {
-      const pkgStr = packages.join(' ')
-      switch (packageManager) {
-        case 'npm':
-          commands.push(`npm create ${pkgStr}`)
-          break
-        case 'pnpm':
-          commands.push(`pnpm create ${pkgStr}`)
-          break
-        case 'yarn':
-          commands.push(`yarn create ${pkgStr}`)
-          break
-        case 'bun':
-          commands.push(`bun create ${pkgStr}`)
-          break
-      }
-    }
-  }
-
-  if (mode === 'local-install') {
-    // Each group becomes one command line
-    for (const packages of packageGroups) {
-      const pkgStr = packages.join(' ')
-      switch (packageManager) {
-        case 'npm':
-          commands.push(`npx ${pkgStr}`)
-          break
-        case 'pnpm':
-          commands.push(`pnpx ${pkgStr}`)
-          break
-        case 'yarn':
-          commands.push(`yarn dlx ${pkgStr}`)
-          break
-        case 'bun':
-          commands.push(`bunx ${pkgStr}`)
-          break
-      }
-    }
-    return commands
-  }
-
-  if (mode === 'dev-install') {
-    for (const packages of packageGroups) {
-      const pkgStr = packages.join(' ')
-      switch (packageManager) {
-        case 'npm':
-          commands.push(`npm i -D ${pkgStr}`)
-          break
-        case 'pnpm':
-          commands.push(`pnpm add -D ${pkgStr}`)
-          break
-        case 'yarn':
-          commands.push(`yarn add -D ${pkgStr}`)
-          break
-        case 'bun':
-          commands.push(`bun add -d ${pkgStr}`)
-          break
-      }
-    }
-    return commands
-  }
-
-  // install mode
-  for (const packages of packageGroups) {
-    const pkgStr = packages.join(' ')
-    switch (packageManager) {
-      case 'npm':
-        commands.push(`npm i ${pkgStr}`)
-        break
-      case 'pnpm':
-        commands.push(`pnpm add ${pkgStr}`)
-        break
-      case 'yarn':
-        commands.push(`yarn add ${pkgStr}`)
-        break
-      case 'bun':
-        commands.push(`bun add ${pkgStr}`)
-        break
-    }
-  }
-  return commands
+function isPackageManagerPanel(
+  child: React.ReactNode,
+): child is React.ReactElement<{
+  'data-framework': string
+  'data-package-manager': string
+  children?: React.ReactNode
+}> {
+  return (
+    React.isValidElement<{
+      'data-framework'?: string
+      'data-package-manager'?: string
+    }>(child) &&
+    typeof child.props['data-framework'] === 'string' &&
+    typeof child.props['data-package-manager'] === 'string'
+  )
 }
 
-export function PackageManagerTabs({
-  packagesByFramework,
-  mode,
-}: PackageManagerTabsProps) {
-  const { packageManager: storedPackageManager, setPackageManager } =
-    usePackageManagerStore()
+export function PackageManagerTabs({ children }: PackageManagerTabsProps) {
+  packageManagerStore.useHydrate()
+
+  const storedPackageManager = packageManagerStore((s) => s.value)
+  const setPackageManager = packageManagerStore((s) => s.setValue)
 
   const { framework: paramsFramework } = useParams({ strict: false })
   const localCurrentFramework = useLocalCurrentFramework()
@@ -167,44 +57,53 @@ export function PackageManagerTabs({
     'react') as Framework
 
   const normalizedFramework = actualFramework.toLowerCase()
-  const packageGroups = packagesByFramework[normalizedFramework]
+  const panels = React.Children.toArray(children).filter(isPackageManagerPanel)
+  const availableFramework = panels.find((child) => {
+    return child.props['data-framework'] === normalizedFramework
+  })
+    ? normalizedFramework
+    : panels[0]?.props['data-framework']
+  const packageManagerPanels = panels.filter((child) => {
+    return child.props['data-framework'] === availableFramework
+  })
 
-  // Hide component if current framework not in package list
-  if (!packageGroups || packageGroups.length === 0) {
+  const handleTabChange = React.useCallback(
+    (slug: string) => {
+      if (isPackageManager(slug)) {
+        setPackageManager(slug)
+      }
+    },
+    [setPackageManager],
+  )
+
+  if (!packageManagerPanels.length) {
     return null
   }
 
-  // Use stored package manager if valid, otherwise default to first one
-  const selectedPackageManager = PACKAGE_MANAGERS.includes(storedPackageManager)
+  const selectedPackageManager = isPackageManager(storedPackageManager)
     ? storedPackageManager
     : PACKAGE_MANAGERS[0]
 
-  // Generate tabs for each package manager
-  const tabs: TabDefinition[] = PACKAGE_MANAGERS.map((pm) => ({
-    slug: pm,
-    name: pm,
-    headers: [],
-  }))
+  const tabs: Array<TabDefinition> = packageManagerPanels.map((panel) => {
+    const packageManager = panel.props['data-package-manager'] as PackageManager
 
-  // Generate children (command blocks) for each package manager
-  const children = PACKAGE_MANAGERS.map((pm) => {
-    const commands = getInstallCommand(pm, packageGroups, mode)
-    const commandText = commands.join('\n')
-    return (
-      <CodeBlock key={pm}>
-        <code className="language-bash">{commandText}</code>
-      </CodeBlock>
-    )
+    return {
+      slug: packageManager,
+      name: packageManager,
+      headers: [],
+    }
   })
 
   return (
     <div className="package-manager-tabs">
       <Tabs
         tabs={tabs}
-        children={children}
         activeSlug={selectedPackageManager}
-        onTabChange={(slug) => setPackageManager(slug as PackageManager)}
-      />
+        onTabChange={handleTabChange}
+        panelContent="code-only"
+      >
+        {packageManagerPanels.map((panel) => panel.props.children)}
+      </Tabs>
     </div>
   )
 }
diff --git a/src/components/markdown/Tabs.tsx b/src/components/markdown/Tabs.tsx
index dd2867c1a..2f92a14fd 100644
--- a/src/components/markdown/Tabs.tsx
+++ b/src/components/markdown/Tabs.tsx
@@ -13,6 +13,7 @@ export type TabsProps = {
   children?: Array<React.ReactNode> | React.ReactNode
   activeSlug?: string
   onTabChange?: (slug: string) => void
+  panelContent?: Record<string, string> | string
 }
 
 export function Tabs({
@@ -20,16 +21,19 @@ export function Tabs({
   children: childrenProp,
   activeSlug: controlledActiveSlug,
   onTabChange,
+  panelContent,
 }: TabsProps) {
+  const isControlled = controlledActiveSlug !== undefined
   const id = React.useId()
   const childrenArray = React.Children.toArray(childrenProp)
 
   const params = useParams({ strict: false })
-  const framework = params?.framework ?? undefined
+  const frameworkParam = isControlled ? undefined : params?.framework
 
   const [internalActiveSlug, setInternalActiveSlug] = React.useState(() => {
-    const match = framework
-      ? tabsProp.find((tab) => tab.slug === framework)
+    if (isControlled) return ''
+    const match = frameworkParam
+      ? tabsProp.find((tab) => tab.slug === frameworkParam)
       : undefined
     return match?.slug ?? tabsProp[0]?.slug ?? ''
   })
@@ -63,18 +67,23 @@ export function Tabs({
           )
         })}
       </div>
-      <div
-        className={`border border-gray-500/20 rounded-b-md bg-gray-100 dark:bg-gray-900`}
-      >
+      <div className="border border-gray-500/20 rounded-b-md bg-gray-100 dark:bg-gray-900 overflow-hidden">
         {childrenArray.map((child, index) => {
           const tab = tabsProp[index]
           if (!tab) return null
+          const isActive = tab.slug === activeSlug
+          const content =
+            typeof panelContent === 'string'
+              ? panelContent
+              : panelContent?.[tab.slug]
           return (
             <div
               key={`${id}-${tab.slug}`}
               data-tab={tab.slug}
-              hidden={tab.slug !== activeSlug}
-              className="max-w-none flex flex-col gap-2 text-base"
+              data-content={content}
+              className={`max-w-none flex-col gap-2 text-base ${
+                isActive ? 'flex' : 'hidden'
+              }`}
             >
               {child}
             </div>
@@ -85,42 +94,40 @@ export function Tabs({
   )
 }
 
-const Tab = React.memo(
-  ({
-    tab,
-    activeSlug,
-    setActiveSlug,
-  }: {
-    id?: string
-    tab: TabDefinition
-    activeSlug: string
-    setActiveSlug: (slug: string) => void
-  }) => {
-    const option = React.useMemo(
-      () =>
-        frameworkOptions.find(
-          (o) =>
-            o.value === tab.slug.toLowerCase() ||
-            o.label.toLowerCase() === tab.name.toLowerCase(),
-        ),
-      [tab.slug, tab.name],
-    )
+const Tab = React.memo(function Tab({
+  tab,
+  activeSlug,
+  setActiveSlug,
+}: {
+  id?: string
+  tab: TabDefinition
+  activeSlug: string
+  setActiveSlug: (slug: string) => void
+}) {
+  const option = React.useMemo(
+    () =>
+      frameworkOptions.find(
+        (o) =>
+          o.value === tab.slug.toLowerCase() ||
+          o.label.toLowerCase() === tab.name.toLowerCase(),
+      ),
+    [tab.slug, tab.name],
+  )
 
-    return (
-      <button
-        aria-label={tab.name}
-        title={tab.name}
-        type="button"
-        onClick={() => setActiveSlug(tab.slug)}
-        className={`inline-flex items-center justify-center gap-2 px-3 py-1.5 -mb-[1px] border-b-2 text-sm font-bold transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 rounded-t-md overflow-y-none ${
-          activeSlug === tab.slug
-            ? 'border-current text-current bg-gray-100 dark:bg-gray-900'
-            : 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200'
-        }`}
-      >
-        {option && <img src={option.logo} alt="" className="w-4 h-4 -ml-1" />}
-        <span>{tab.name}</span>
-      </button>
-    )
-  },
-)
+  return (
+    <button
+      aria-label={tab.name}
+      title={tab.name}
+      type="button"
+      onClick={() => setActiveSlug(tab.slug)}
+      className={`inline-flex items-center justify-center gap-2 px-3 py-1.5 -mb-[1px] border-b-2 text-sm font-bold transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 rounded-t-md overflow-y-none ${
+        activeSlug === tab.slug
+          ? 'border-current text-current bg-gray-100 dark:bg-gray-900'
+          : 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-200'
+      }`}
+    >
+      {option && <img src={option.logo} alt="" className="w-4 h-4 -ml-1" />}
+      <span>{tab.name}</span>
+    </button>
+  )
+})
diff --git a/src/components/markdown/codeBlock.shared.tsx b/src/components/markdown/codeBlock.shared.tsx
new file mode 100644
index 000000000..ffbbdcc30
--- /dev/null
+++ b/src/components/markdown/codeBlock.shared.tsx
@@ -0,0 +1,114 @@
+import * as React from 'react'
+
+export type CodeBlockProps = React.HTMLProps<HTMLPreElement> & {
+  'data-code-title'?: string
+  dataCodeTitle?: string
+  isEmbedded?: boolean
+  showTypeCopyButton?: boolean
+}
+
+export function escapeHtml(value: string) {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}
+
+export function buildPlainCodeBlockHtml(code: string) {
+  return `<pre class="th-code th-code--plaintext h-full" data-language="plaintext"><code>${escapeHtml(
+    code,
+  )}</code></pre>`
+}
+
+export function extractCodeBlockData(props: CodeBlockProps) {
+  const rawTitle = props.dataCodeTitle || props['data-code-title']
+
+  const title =
+    rawTitle && rawTitle !== 'undefined' && rawTitle.trim().length > 0
+      ? rawTitle.trim()
+      : undefined
+
+  const codeElement = getCodeElementProps(props.children)
+  const lang = codeElement.className?.replace('language-', '') || 'plaintext'
+  const code = codeElement.children
+
+  return {
+    code,
+    lang,
+    title,
+  }
+}
+
+function getCodeElementProps(node: React.ReactNode) {
+  if (!React.isValidElement(node)) {
+    return {
+      children: '',
+      className: undefined,
+    }
+  }
+
+  const { props } = node
+
+  if (typeof props !== 'object' || props === null) {
+    return {
+      children: '',
+      className: undefined,
+    }
+  }
+
+  const className =
+    'className' in props && typeof props.className === 'string'
+      ? props.className
+      : undefined
+
+  const children =
+    'children' in props && typeof props.children === 'string'
+      ? props.children
+      : ''
+
+  return {
+    children,
+    className,
+  }
+}
+
+export function getCodeBlockLanguageFromFilePath(filePath: string) {
+  const ext = filePath.split('.').pop()?.toLowerCase()
+
+  if (!ext) {
+    return 'txt'
+  }
+
+  if (['cts', 'mts'].includes(ext)) return 'ts'
+  if (['cjs', 'mjs'].includes(ext)) return 'js'
+  if (ext === 'gts') return 'ts'
+  if (ext === 'gjs') return 'js'
+  if (['prettierrc', 'babelrc', 'webmanifest'].includes(ext)) return 'json'
+  if (['env', 'example'].includes(ext)) return 'sh'
+
+  // Marko is HTML-based; @tanstack/highlight has no Marko grammar, so fall
+  // back to html for reasonable tag/attribute/string coloring.
+  if (ext === 'marko') return 'html'
+
+  if (
+    [
+      'gitignore',
+      'prettierignore',
+      'log',
+      'gitattributes',
+      'editorconfig',
+      'lock',
+      'opts',
+      'dockerfile',
+      'dockerignore',
+      'npmrc',
+      'nvmrc',
+    ].includes(ext)
+  ) {
+    return 'txt'
+  }
+
+  return ext
+}
diff --git a/src/components/markdown/index.ts b/src/components/markdown/index.ts
index f4b3dc588..e78381274 100644
--- a/src/components/markdown/index.ts
+++ b/src/components/markdown/index.ts
@@ -1,12 +1,8 @@
-export { Markdown } from './Markdown'
 export { MarkdownLink } from './MarkdownLink'
 export { MarkdownContent } from './MarkdownContent'
-export {
-  MarkdownHeadingProvider,
-  useMarkdownHeadings,
-} from './MarkdownHeadingContext'
 export { CodeBlock } from './CodeBlock'
 export { Tabs } from './Tabs'
 export { FileTabs } from './FileTabs'
 export { PackageManagerTabs } from './PackageManagerTabs'
+export { BundlerTabs } from './BundlerTabs'
 export { FrameworkContent } from './FrameworkContent'
diff --git a/src/components/markdown/usePersistedEnumStore.ts b/src/components/markdown/usePersistedEnumStore.ts
new file mode 100644
index 000000000..a246f9683
--- /dev/null
+++ b/src/components/markdown/usePersistedEnumStore.ts
@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { create, type StoreApi, type UseBoundStore } from 'zustand'
+
+type EnumStore<TValue extends string> = {
+  value: TValue
+  setValue: (value: TValue) => void
+}
+
+export type PersistedEnumStore<TValue extends string> = UseBoundStore<
+  StoreApi<EnumStore<TValue>>
+> & {
+  useHydrate: () => void
+}
+
+/**
+ * Creates a zustand store backed by `localStorage` that holds a value from a
+ * fixed enum (e.g. `'vite' | 'rsbuild'`).
+ *
+ * Hydration is deferred to a `useEffect` to avoid SSR/CSR markup mismatches:
+ * the server and the first client render both see `defaultValue`, then the
+ * client swaps in the persisted value on mount.
+ */
+export function createPersistedEnumStore<TValue extends string>(options: {
+  storageKey: string
+  values: ReadonlyArray<TValue>
+  defaultValue: TValue
+}): PersistedEnumStore<TValue> {
+  const { storageKey, values, defaultValue } = options
+
+  const isValid = (candidate: string): candidate is TValue =>
+    (values as ReadonlyArray<string>).includes(candidate)
+
+  const store = create<EnumStore<TValue>>((set) => ({
+    value: defaultValue,
+    setValue: (value) => {
+      if (typeof window !== 'undefined') {
+        try {
+          window.localStorage.setItem(storageKey, value)
+        } catch {
+          // Ignore quota / privacy-mode errors; in-memory state still updates.
+        }
+      }
+      set({ value })
+    },
+  })) as PersistedEnumStore<TValue>
+
+  let hasHydrated = false
+
+  store.useHydrate = function useHydrate() {
+    React.useEffect(() => {
+      if (hasHydrated) return
+      hasHydrated = true
+      if (typeof window === 'undefined') return
+      try {
+        const stored = window.localStorage.getItem(storageKey)
+        if (stored && isValid(stored)) {
+          store.setState({ value: stored })
+        }
+      } catch {
+        // Ignore storage access errors.
+      }
+    }, [])
+  }
+
+  return store
+}
diff --git a/src/components/npm-stats/BaselineSection.tsx b/src/components/npm-stats/BaselineSection.tsx
new file mode 100644
index 000000000..64b4d0db1
--- /dev/null
+++ b/src/components/npm-stats/BaselineSection.tsx
@@ -0,0 +1,274 @@
+import * as React from 'react'
+import { Pin, PinOff, Plus, X, ChevronDown, Eye, EyeOff } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@radix-ui/react-dropdown-menu'
+import { twMerge } from 'tailwind-merge'
+import { Tooltip } from '~/components/Tooltip'
+import { PackageSearch } from './PackageSearch'
+import { getBaselineDisplayName, type PackageGroup } from './shared'
+import type { BaselinePreset } from '~/routes/stats/npm/-comparisons'
+
+export const BASELINE_LINE_COLOR = '#3b82f6'
+
+export type BaselineSectionProps = {
+  packageGroups: PackageGroup[]
+  presets: BaselinePreset[]
+  canToggleShowBaseline: boolean
+  normalizeBaseline: boolean
+  showBaseline: boolean
+  onToggleNormalizeBaseline: () => void
+  onToggleShowBaseline: () => void
+  onAddBaseline: (packageName: string, color?: string) => void
+  onApplyPreset: (preset: BaselinePreset) => void
+  onClearBaselines: () => void
+}
+
+export function BaselineSection({
+  packageGroups,
+  presets,
+  canToggleShowBaseline,
+  normalizeBaseline,
+  showBaseline,
+  onToggleNormalizeBaseline,
+  onToggleShowBaseline,
+  onAddBaseline,
+  onApplyPreset,
+  onClearBaselines,
+}: BaselineSectionProps) {
+  const baselineGroups = packageGroups.filter((pg) => pg.baseline)
+  const [showSearch, setShowSearch] = React.useState(false)
+  const baselineDisplayName = getBaselineDisplayName(baselineGroups)
+  const hasBaselines = baselineGroups.length > 0
+  const normalizeActive = hasBaselines && normalizeBaseline
+
+  const labelButton = (
+    <Tooltip
+      content={
+        !hasBaselines
+          ? 'Add baseline packages to enable normalization'
+          : normalizeBaseline
+            ? 'Disable normalization (stop dividing other lines by baseline)'
+            : 'Enable normalization (divide other lines by combined baseline)'
+      }
+    >
+      <button
+        onClick={onToggleNormalizeBaseline}
+        disabled={!hasBaselines}
+        className={twMerge(
+          'flex items-center gap-1 font-semibold',
+          normalizeActive
+            ? 'text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300'
+            : 'text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300',
+          !hasBaselines && 'cursor-default opacity-60',
+        )}
+      >
+        {normalizeActive ? (
+          <Pin className="w-3 h-3" />
+        ) : (
+          <PinOff className="w-3 h-3" />
+        )}
+        <span>Baseline</span>
+      </button>
+    </Tooltip>
+  )
+
+  const isBaselineShown = canToggleShowBaseline && showBaseline
+  const baselineName = (
+    <span className={twMerge('font-medium', !isBaselineShown && 'opacity-70')}>
+      {baselineDisplayName}
+    </span>
+  )
+
+  const chip = hasBaselines && (
+    <div
+      className="flex items-center gap-1.5 rounded px-1.5 py-0.5 text-xs text-blue-900 dark:text-blue-100"
+      style={{ backgroundColor: `${BASELINE_LINE_COLOR}25` }}
+    >
+      {canToggleShowBaseline ? (
+        <Tooltip
+          content={
+            isBaselineShown
+              ? 'Hide combined baseline line on chart'
+              : 'Show combined baseline line on chart'
+          }
+        >
+          <button
+            onClick={onToggleShowBaseline}
+            className="flex items-center gap-1.5 hover:brightness-110"
+          >
+            {isBaselineShown ? (
+              <Eye className="w-3 h-3 text-blue-600 dark:text-blue-300" />
+            ) : (
+              <EyeOff className="w-3 h-3 text-gray-400 dark:text-gray-500" />
+            )}
+            {baselineName}
+          </button>
+        </Tooltip>
+      ) : (
+        <div className="flex items-center gap-1.5">
+          <EyeOff className="w-3 h-3 text-gray-400 dark:text-gray-500" />
+          {baselineName}
+        </div>
+      )}
+      <Tooltip content="Clear all baselines">
+        <button
+          onClick={onClearBaselines}
+          className="text-gray-500 hover:text-red-500"
+          aria-label="Clear all baselines"
+        >
+          <X className="w-3 h-3" />
+        </button>
+      </Tooltip>
+    </div>
+  )
+
+  const addButton = (
+    <Tooltip content="Search for a package to add as baseline">
+      <button
+        onClick={() => setShowSearch(true)}
+        className="flex items-center gap-1 px-1.5 py-0.5 text-xs rounded
+          text-blue-700 dark:text-blue-300 hover:bg-blue-500/10 font-medium"
+      >
+        <Plus className="w-3 h-3" />
+        Add
+      </button>
+    </Tooltip>
+  )
+
+  const presetsMenu = (
+    <DropdownMenu>
+      <Tooltip content="Apply a curated baseline preset">
+        <DropdownMenuTrigger asChild>
+          <button
+            className="flex items-center gap-0.5 px-1.5 py-0.5 text-xs rounded
+              text-blue-700 dark:text-blue-300 hover:bg-blue-500/10 font-medium"
+          >
+            Presets
+            <ChevronDown className="w-3 h-3" />
+          </button>
+        </DropdownMenuTrigger>
+      </Tooltip>
+      <DropdownMenuContent
+        className="min-w-[320px] max-w-[400px] bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 z-50 border border-gray-200 dark:border-gray-700"
+        sideOffset={5}
+        align="start"
+      >
+        <div className="px-2 pt-1 pb-0.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+          Single Package
+        </div>
+        {presets
+          .filter((p) => p.category === 'single')
+          .map((preset) => (
+            <DropdownMenuItem
+              key={preset.id}
+              onSelect={(e) => {
+                e.preventDefault()
+                onApplyPreset(preset)
+              }}
+              className="w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/10 outline-none cursor-pointer flex items-center gap-2"
+            >
+              <div
+                className="w-2.5 h-2.5 rounded"
+                style={{
+                  backgroundColor: preset.packages[0]?.color ?? 'currentColor',
+                }}
+              />
+              <span className="font-medium text-gray-900 dark:text-gray-100">
+                {preset.title}
+              </span>
+            </DropdownMenuItem>
+          ))}
+
+        <div className="h-px bg-gray-500/20 my-1.5" />
+
+        <div className="px-2 pt-1 pb-0.5 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+          Equal-Weighted Index
+        </div>
+        {presets
+          .filter((p) => p.category === 'index')
+          .map((preset) => (
+            <DropdownMenuItem
+              key={preset.id}
+              onSelect={(e) => {
+                e.preventDefault()
+                onApplyPreset(preset)
+              }}
+              className="w-full px-2 py-2 text-left text-sm rounded hover:bg-gray-500/10 outline-none cursor-pointer"
+            >
+              <div className="font-medium text-gray-900 dark:text-gray-100">
+                {preset.title}
+              </div>
+              <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                {preset.description}
+              </div>
+              <div className="flex flex-wrap gap-1 mt-1.5">
+                {preset.packages.map((p) => (
+                  <div
+                    key={p.name}
+                    className="flex items-center gap-1 text-[10px] font-mono text-gray-600 dark:text-gray-300"
+                  >
+                    <div
+                      className="w-2 h-2 rounded"
+                      style={{ backgroundColor: p.color ?? 'currentColor' }}
+                    />
+                    {p.name}
+                  </div>
+                ))}
+              </div>
+            </DropdownMenuItem>
+          ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
+        {labelButton}
+
+        {!hasBaselines ? (
+          <span className="text-gray-500 dark:text-gray-400 italic">none</span>
+        ) : (
+          chip
+        )}
+
+        <div className="flex items-center gap-0.5">
+          {addButton}
+          {presetsMenu}
+        </div>
+      </div>
+
+      {showSearch && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-2 sm:p-4">
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-2 sm:p-4 w-full max-w-md">
+            <div className="flex justify-between items-center mb-2 sm:mb-4">
+              <h3 className="text-base sm:text-lg font-medium flex items-center gap-2">
+                <Pin className="w-4 h-4 text-blue-500" />
+                Add baseline package
+              </h3>
+              <button
+                onClick={() => setShowSearch(false)}
+                className="p-0.5 sm:p-1 hover:text-red-500"
+              >
+                <X className="w-4 h-4 sm:w-5 sm:h-5" />
+              </button>
+            </div>
+            <PackageSearch
+              onSelect={(pkg) => {
+                onAddBaseline(pkg)
+                setShowSearch(false)
+              }}
+              placeholder="Search for baseline package..."
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus={true}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/src/components/npm-stats/ChartControls.tsx b/src/components/npm-stats/ChartControls.tsx
index 340eeb5e3..3c4485637 100644
--- a/src/components/npm-stats/ChartControls.tsx
+++ b/src/components/npm-stats/ChartControls.tsx
@@ -1,6 +1,19 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
-import { EllipsisVertical } from 'lucide-react'
+import {
+  ArrowDownWideNarrow,
+  ChartArea,
+  ChartBar,
+  ChartBarStacked,
+  ChartLine,
+  Clock3,
+  Columns3,
+  History,
+  Layers,
+  Rows3,
+  Waves,
+  type LucideIcon,
+} from 'lucide-react'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,85 +24,157 @@ import { Tooltip } from '~/components/Tooltip'
 import {
   type TimeRange,
   type BinType,
+  type ChartType,
   type TransformMode,
   type ShowDataMode,
-  type FacetValue,
+  type ViewMode,
+  type LatestBarSort,
+  type BarOrientation,
   timeRanges,
   binningOptions,
+  historyChartTypes,
+  latestChartTypes,
   isBinningOptionValidForRange,
-} from './NPMStatsChart'
+} from './shared'
 
 const dropdownButtonStyles = {
-  base: 'bg-gray-500/10 rounded-md px-2 py-1 text-sm flex items-center gap-1',
+  base: 'flex h-6 items-center gap-0.5 rounded bg-gray-500/10 px-1.5 py-0.5 text-xs leading-none',
   active: 'bg-gray-500/20',
 } as const
 
+const dropdownContentStyles =
+  'min-w-[180px] rounded-md bg-white p-1.5 shadow-lg dark:bg-gray-800 z-50'
+const dropdownHeaderStyles =
+  'mb-1 flex items-center justify-between px-0.5 text-xs font-medium'
+const dropdownItemStyles =
+  'flex w-full cursor-pointer items-center gap-1.5 rounded px-1.5 py-1 text-left text-xs outline-none hover:bg-gray-500/20 data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500'
+const segmentedControlStyles =
+  'flex h-6 items-center rounded bg-gray-500/10 p-0.5 text-xs leading-none'
+const segmentedButtonStyles = 'flex h-5 items-center gap-0.5 rounded px-1.5'
+const iconSegmentedButtonStyles =
+  'flex size-5 items-center justify-center rounded'
+
+const chartTypeIcons = {
+  line: ChartLine,
+  stacked: Layers,
+  'stacked-area': ChartArea,
+  'stacked-stream': Waves,
+  bar: ChartBar,
+  'stacked-bar': ChartBarStacked,
+} as const satisfies Partial<Record<ChartType, LucideIcon>>
+
 const transformOptions = [
   { value: 'none', label: 'Actual Values' },
   { value: 'normalize-y', label: 'Relative Change' },
-] as const
+] as const satisfies ReadonlyArray<{
+  value: TransformMode
+  label: string
+}>
 
 const showDataModeOptions = [
   { value: 'all', label: 'All Data' },
   { value: 'complete', label: 'Hide Partial Data' },
 ] as const
 
-const facetOptions = [{ value: 'name', label: 'Package' }] as const
-
 export type ChartControlsProps = {
+  viewMode: ViewMode
+  chartType: ChartType
   range: TimeRange
   binType: BinType
   transform: TransformMode
   showDataMode: ShowDataMode
+  barSort: LatestBarSort
+  barOrientation: BarOrientation
+  onViewModeChange: (mode: ViewMode) => void
+  onChartTypeChange: (chartType: ChartType) => void
   onRangeChange: (range: TimeRange) => void
   onBinTypeChange: (binType: BinType) => void
   onTransformChange: (transform: TransformMode) => void
   onShowDataModeChange: (mode: ShowDataMode) => void
-  // Optional facet controls (main page only)
-  facetX?: FacetValue
-  facetY?: FacetValue
-  onFacetXChange?: (value: FacetValue | undefined) => void
-  onFacetYChange?: (value: FacetValue | undefined) => void
+  onBarSortChange: (barSort: LatestBarSort) => void
+  onBarOrientationChange: (barOrientation: BarOrientation) => void
 }
 
 export function ChartControls({
+  viewMode,
+  chartType,
   range,
   binType,
   transform,
   showDataMode,
+  barSort,
+  barOrientation,
+  onViewModeChange,
+  onChartTypeChange,
   onRangeChange,
   onBinTypeChange,
   onTransformChange,
   onShowDataModeChange,
-  facetX,
-  facetY,
-  onFacetXChange,
-  onFacetYChange,
+  onBarSortChange,
+  onBarOrientationChange,
 }: ChartControlsProps) {
-  const showFacets = onFacetXChange && onFacetYChange
+  const chartTypeOptions =
+    viewMode === 'history' ? historyChartTypes : latestChartTypes
+  const canUseTransform = viewMode === 'history' && chartType === 'line'
+  const showDataModeDisabled =
+    viewMode === 'latest' || transform === 'normalize-y'
+  const showBarSort =
+    viewMode === 'latest' &&
+    (chartType === 'bar' || chartType === 'stacked-bar')
+  const showBarOrientation = showBarSort
 
   return (
     <>
+      <div className={segmentedControlStyles}>
+        <Tooltip content="Show the full timeline">
+          <button
+            onClick={() => onViewModeChange('history')}
+            className={twMerge(
+              segmentedButtonStyles,
+              viewMode === 'history'
+                ? 'bg-white text-blue-600 shadow-sm dark:bg-gray-900 dark:text-blue-400'
+                : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',
+            )}
+          >
+            <History className="size-3" />
+            Timeline
+          </button>
+        </Tooltip>
+        <Tooltip content="Show one selected bucket snapshot">
+          <button
+            onClick={() => onViewModeChange('latest')}
+            className={twMerge(
+              segmentedButtonStyles,
+              viewMode === 'latest'
+                ? 'bg-white text-blue-600 shadow-sm dark:bg-gray-900 dark:text-blue-400'
+                : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',
+            )}
+          >
+            <Clock3 className="size-3" />
+            Snapshot
+          </button>
+        </Tooltip>
+      </div>
+
       {/* Time Range */}
       <DropdownMenu>
         <Tooltip content="Select time range">
           <DropdownMenuTrigger asChild>
             <button className={twMerge(dropdownButtonStyles.base)}>
               {timeRanges.find((r) => r.value === range)?.label}
-              <EllipsisVertical className="w-3 h-3" />
             </button>
           </DropdownMenuTrigger>
         </Tooltip>
-        <DropdownMenuContent className="min-w-[200px] bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 z-50">
-          <div className="flex justify-between items-center mb-2">
-            <span className="text-sm font-medium">Time Range</span>
+        <DropdownMenuContent className={dropdownContentStyles}>
+          <div className={dropdownHeaderStyles}>
+            <span>Time Range</span>
           </div>
           {timeRanges.map(({ value, label }) => (
             <DropdownMenuItem
               key={value}
               onSelect={() => onRangeChange(value)}
               className={twMerge(
-                'w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer',
+                dropdownItemStyles,
                 value === range ? 'text-blue-500 bg-blue-500/10' : '',
                 'data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500',
               )}
@@ -111,24 +196,27 @@ export function ChartControls({
               )}
             >
               {binningOptions.find((b) => b.value === binType)?.label}
-              <EllipsisVertical className="w-3 h-3" />
             </button>
           </DropdownMenuTrigger>
         </Tooltip>
-        <DropdownMenuContent className="min-w-[200px] bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 z-50">
-          <div className="flex justify-between items-center mb-2">
-            <span className="text-sm font-medium">Binning Interval</span>
+        <DropdownMenuContent className={dropdownContentStyles}>
+          <div className={dropdownHeaderStyles}>
+            <span>Binning Interval</span>
           </div>
           {binningOptions.map(({ label, value }) => (
             <DropdownMenuItem
               key={value}
               onSelect={() => onBinTypeChange(value)}
-              disabled={!isBinningOptionValidForRange(range, value)}
+              disabled={
+                viewMode === 'history' &&
+                !isBinningOptionValidForRange(range, value)
+              }
               className={twMerge(
-                'w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer',
+                dropdownItemStyles,
                 binType === value ? 'text-blue-500 bg-blue-500/10' : '',
                 'data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500',
-                !isBinningOptionValidForRange(range, value)
+                viewMode === 'history' &&
+                  !isBinningOptionValidForRange(range, value)
                   ? 'opacity-50 cursor-not-allowed'
                   : '',
               )}
@@ -139,33 +227,124 @@ export function ChartControls({
         </DropdownMenuContent>
       </DropdownMenu>
 
+      {/* Chart Type */}
+      <div aria-label="Chart type" className={segmentedControlStyles}>
+        {chartTypeOptions.map(({ value, label }) => {
+          const Icon = chartTypeIcons[value] ?? ChartBar
+
+          return (
+            <Tooltip content={label} key={value}>
+              <button
+                aria-label={`${label} chart`}
+                aria-pressed={chartType === value}
+                className={twMerge(
+                  iconSegmentedButtonStyles,
+                  chartType === value
+                    ? 'bg-white text-blue-600 shadow-sm dark:bg-gray-900 dark:text-blue-400'
+                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',
+                )}
+                onClick={() => onChartTypeChange(value)}
+                type="button"
+              >
+                <Icon className="size-3.5" />
+              </button>
+            </Tooltip>
+          )
+        })}
+      </div>
+
+      {showBarOrientation ? (
+        <div className={segmentedControlStyles}>
+          <Tooltip content="Use vertical bars">
+            <button
+              onClick={() => onBarOrientationChange('vertical')}
+              className={twMerge(
+                segmentedButtonStyles,
+                barOrientation === 'vertical'
+                  ? 'bg-white text-blue-600 shadow-sm dark:bg-gray-900 dark:text-blue-400'
+                  : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',
+              )}
+            >
+              <Columns3 className="size-3" />
+              Vertical
+            </button>
+          </Tooltip>
+          <Tooltip content="Use horizontal bars">
+            <button
+              onClick={() => onBarOrientationChange('horizontal')}
+              className={twMerge(
+                segmentedButtonStyles,
+                barOrientation === 'horizontal'
+                  ? 'bg-white text-blue-600 shadow-sm dark:bg-gray-900 dark:text-blue-400'
+                  : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',
+              )}
+            >
+              <Rows3 className="size-3" />
+              Horizontal
+            </button>
+          </Tooltip>
+        </div>
+      ) : null}
+
+      {showBarSort ? (
+        <Tooltip
+          content={
+            barSort === 'value'
+              ? 'Sort bars by series name'
+              : 'Sort bars by value'
+          }
+        >
+          <button
+            className={twMerge(
+              dropdownButtonStyles.base,
+              barSort === 'value' && dropdownButtonStyles.active,
+            )}
+            onClick={() =>
+              onBarSortChange(barSort === 'value' ? 'name' : 'value')
+            }
+          >
+            <ArrowDownWideNarrow className="size-3" />
+            {barSort === 'value' ? 'Value Sort' : 'Name Sort'}
+          </button>
+        </Tooltip>
+      ) : null}
+
       {/* Y-Axis Transform */}
       <DropdownMenu>
-        <Tooltip content="Transform the Y-axis to show relative changes between packages. 'None' shows actual download numbers, while 'Normalize Y' shows percentage changes relative to the first data point.">
+        <Tooltip
+          content={
+            canUseTransform
+              ? "Transform the Y-axis to show relative changes between packages. 'None' shows actual download numbers, while 'Normalize Y' shows percentage changes relative to the first data point."
+              : 'Relative change is only available for history line charts'
+          }
+        >
           <DropdownMenuTrigger asChild>
             <button
               className={twMerge(
                 dropdownButtonStyles.base,
                 transform !== 'none' && dropdownButtonStyles.active,
+                !canUseTransform && 'opacity-50 cursor-not-allowed',
               )}
+              disabled={!canUseTransform}
             >
               {transformOptions.find((opt) => opt.value === transform)?.label}
-              <EllipsisVertical className="w-3 h-3" />
             </button>
           </DropdownMenuTrigger>
         </Tooltip>
-        <DropdownMenuContent className="min-w-[200px] bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 z-50">
-          <div className="flex justify-between items-center mb-2">
-            <span className="text-sm font-medium">Y-Axis Transform</span>
+        <DropdownMenuContent className={dropdownContentStyles}>
+          <div className={dropdownHeaderStyles}>
+            <span>Y-Axis Transform</span>
           </div>
           {transformOptions.map(({ value, label }) => (
             <DropdownMenuItem
               key={value}
-              onSelect={() => onTransformChange(value as TransformMode)}
+              onSelect={() => onTransformChange(value)}
+              disabled={!canUseTransform}
               className={twMerge(
-                'w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer',
+                dropdownItemStyles,
                 transform === value ? 'text-blue-500 bg-blue-500/10' : '',
                 'data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500',
+                !canUseTransform ? 'opacity-50 cursor-not-allowed' : '',
               )}
             >
               {label}
@@ -174,111 +353,15 @@ export function ChartControls({
         </DropdownMenuContent>
       </DropdownMenu>
 
-      {/* Facet X (optional) */}
-      {showFacets && (
-        <DropdownMenu>
-          <Tooltip content="Split the visualization horizontally by package">
-            <DropdownMenuTrigger asChild>
-              <button
-                className={twMerge(
-                  dropdownButtonStyles.base,
-                  facetX && dropdownButtonStyles.active,
-                )}
-              >
-                {facetX
-                  ? `Facet X by ${facetOptions.find((opt) => opt.value === facetX)?.label}`
-                  : 'No Facet X'}
-                <EllipsisVertical className="w-3 h-3" />
-              </button>
-            </DropdownMenuTrigger>
-          </Tooltip>
-          <DropdownMenuContent className="min-w-[200px] bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 z-50">
-            <div className="flex justify-between items-center mb-2">
-              <span className="text-sm font-medium">Horizontal Facet</span>
-            </div>
-            <DropdownMenuItem
-              onSelect={() => onFacetXChange(undefined)}
-              className={twMerge(
-                'w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer',
-                !facetX ? 'text-blue-500 bg-blue-500/10' : '',
-                'data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500',
-              )}
-            >
-              No Facet
-            </DropdownMenuItem>
-            {facetOptions.map(({ value, label }) => (
-              <DropdownMenuItem
-                key={value}
-                onSelect={() => onFacetXChange(value)}
-                className={twMerge(
-                  'w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer',
-                  facetX === value ? 'text-blue-500 bg-blue-500/10' : '',
-                  'data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500',
-                )}
-              >
-                {label}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
-
-      {/* Facet Y (optional) */}
-      {showFacets && (
-        <DropdownMenu>
-          <Tooltip content="Split the visualization vertically by package">
-            <DropdownMenuTrigger asChild>
-              <button
-                className={twMerge(
-                  dropdownButtonStyles.base,
-                  facetY && dropdownButtonStyles.active,
-                )}
-              >
-                {facetY
-                  ? `Facet Y by ${facetOptions.find((opt) => opt.value === facetY)?.label}`
-                  : 'No Facet Y'}
-                <EllipsisVertical className="w-3 h-3" />
-              </button>
-            </DropdownMenuTrigger>
-          </Tooltip>
-          <DropdownMenuContent className="min-w-[200px] bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 z-50">
-            <div className="flex justify-between items-center mb-2">
-              <span className="text-sm font-medium">Vertical Facet</span>
-            </div>
-            <DropdownMenuItem
-              onSelect={() => onFacetYChange(undefined)}
-              className={twMerge(
-                'w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer',
-                !facetY ? 'text-blue-500 bg-blue-500/10' : '',
-                'data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500',
-              )}
-            >
-              No Facet
-            </DropdownMenuItem>
-            {facetOptions.map(({ value, label }) => (
-              <DropdownMenuItem
-                key={value}
-                onSelect={() => onFacetYChange(value)}
-                className={twMerge(
-                  'w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer',
-                  facetY === value ? 'text-blue-500 bg-blue-500/10' : '',
-                  'data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500',
-                )}
-              >
-                {label}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
-
       {/* Show Data Mode */}
       <DropdownMenu>
         <Tooltip
           content={
-            transform === 'normalize-y'
-              ? 'Only complete data is shown when using relative change'
-              : 'Control how data is displayed'
+            viewMode === 'latest'
+              ? 'Snapshot mode always shows the selected bucket'
+              : transform === 'normalize-y'
+                ? 'Only complete data is shown when using relative change'
+                : 'Control how data is displayed'
           }
         >
           <DropdownMenuTrigger asChild>
@@ -286,34 +369,31 @@ export function ChartControls({
               className={twMerge(
                 dropdownButtonStyles.base,
                 showDataMode !== 'all' && dropdownButtonStyles.active,
-                transform === 'normalize-y' && 'opacity-50 cursor-not-allowed',
+                showDataModeDisabled && 'opacity-50 cursor-not-allowed',
               )}
-              disabled={transform === 'normalize-y'}
+              disabled={showDataModeDisabled}
             >
               {
                 showDataModeOptions.find((opt) => opt.value === showDataMode)
                   ?.label
               }
-              <EllipsisVertical className="w-3 h-3" />
             </button>
           </DropdownMenuTrigger>
         </Tooltip>
-        <DropdownMenuContent className="min-w-[200px] bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 z-50">
-          <div className="flex justify-between items-center mb-2">
-            <span className="text-sm font-medium">Data Display Mode</span>
+        <DropdownMenuContent className={dropdownContentStyles}>
+          <div className={dropdownHeaderStyles}>
+            <span>Data Display Mode</span>
           </div>
           {showDataModeOptions.map(({ value, label }) => (
             <DropdownMenuItem
               key={value}
               onSelect={() => onShowDataModeChange(value)}
-              disabled={transform === 'normalize-y'}
+              disabled={showDataModeDisabled}
               className={twMerge(
-                'w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer',
+                dropdownItemStyles,
                 showDataMode === value ? 'text-blue-500 bg-blue-500/10' : '',
                 'data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500',
-                transform === 'normalize-y'
-                  ? 'opacity-50 cursor-not-allowed'
-                  : '',
+                showDataModeDisabled ? 'opacity-50 cursor-not-allowed' : '',
               )}
             >
               {label}
diff --git a/src/components/npm-stats/ColorPickerPopover.tsx b/src/components/npm-stats/ColorPickerPopover.tsx
index 7d1adfae3..619724f09 100644
--- a/src/components/npm-stats/ColorPickerPopover.tsx
+++ b/src/components/npm-stats/ColorPickerPopover.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { createPortal } from 'react-dom'
 import { HexColorPicker } from 'react-colorful'
 
 export interface ColorPickerPopoverProps {
@@ -22,7 +23,9 @@ export function ColorPickerPopover({
   onReset,
   onClose,
 }: ColorPickerPopoverProps) {
-  return (
+  if (typeof document === 'undefined') return null
+
+  return createPortal(
     <div
       className="fixed z-50 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2"
       style={{
@@ -54,6 +57,7 @@ export function ColorPickerPopover({
           Done
         </button>
       </div>
-    </div>
+    </div>,
+    document.body,
   )
 }
diff --git a/src/components/npm-stats/DisabledChartActions.tsx b/src/components/npm-stats/DisabledChartActions.tsx
new file mode 100644
index 000000000..7fffe392c
--- /dev/null
+++ b/src/components/npm-stats/DisabledChartActions.tsx
@@ -0,0 +1,33 @@
+import { Download, List } from 'lucide-react'
+import { Tooltip } from '~/components/Tooltip'
+
+const disabledChartActionButtonStyles =
+  'flex size-6 cursor-not-allowed items-center justify-center rounded bg-gray-500/10 text-gray-600 opacity-50 dark:text-gray-400'
+
+export function DisabledChartActions() {
+  return (
+    <div className="flex items-center gap-1">
+      <Tooltip content="Chart export available after render">
+        <button
+          aria-label="Export chart"
+          className={disabledChartActionButtonStyles}
+          disabled={true}
+          type="button"
+        >
+          <Download className="size-3" />
+        </button>
+      </Tooltip>
+      <Tooltip content="Plot legend available after render">
+        <button
+          aria-label="Show Plot legend"
+          aria-pressed={false}
+          className={disabledChartActionButtonStyles}
+          disabled={true}
+          type="button"
+        >
+          <List className="size-3" />
+        </button>
+      </Tooltip>
+    </div>
+  )
+}
diff --git a/src/components/npm-stats/LatestBucketNavigator.tsx b/src/components/npm-stats/LatestBucketNavigator.tsx
new file mode 100644
index 000000000..515bf3757
--- /dev/null
+++ b/src/components/npm-stats/LatestBucketNavigator.tsx
@@ -0,0 +1,352 @@
+import * as React from 'react'
+import {
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  MoreHorizontal,
+  Pause,
+  Play,
+} from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@radix-ui/react-dropdown-menu'
+import {
+  binningOptionsByType,
+  getLatestBucketOffsetBounds,
+  getLatestBucketOffsetOptions,
+} from './binning'
+import {
+  defaultPlaybackIntervalMs,
+  maxPlaybackIntervalMs,
+  type BinType,
+  type TimeRange,
+} from './shared'
+
+const playbackSpeedOptions = [
+  { label: 'Slow', intervalMs: 800 },
+  { label: 'Medium', intervalMs: 350 },
+  { label: 'Fast', intervalMs: 150 },
+  { label: 'Very Fast', intervalMs: 75 },
+  { label: 'Very Very Fast', intervalMs: 35 },
+] as const
+
+const navigatorButtonStyles =
+  'flex size-6 items-center justify-center hover:bg-gray-500/10 disabled:cursor-not-allowed disabled:opacity-40'
+const borderedNavigatorButtonStyles = `${navigatorButtonStyles} border-l border-gray-500/15`
+const menuItemStyles =
+  'flex w-full cursor-pointer items-center gap-1.5 rounded px-1.5 py-1 text-left text-xs outline-none hover:bg-gray-500/20 data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500'
+
+export type LatestBucketNavigatorProps = {
+  binType: BinType
+  range: TimeRange
+  bucketOffset: number
+  isLooping: boolean
+  isPlaying: boolean
+  playbackIntervalMs: number
+  onBucketOffsetChange: (bucketOffset: number) => void
+  onLoopingChange: (isLooping: boolean) => void
+  onPlaybackIntervalChange: (playbackIntervalMs: number) => void
+  onPlayingChange: (isPlaying: boolean) => void
+}
+
+export function LatestBucketNavigator({
+  binType,
+  range,
+  bucketOffset,
+  isLooping,
+  isPlaying,
+  playbackIntervalMs,
+  onBucketOffsetChange,
+  onLoopingChange,
+  onPlaybackIntervalChange,
+  onPlayingChange,
+}: LatestBucketNavigatorProps) {
+  const bucketSelectId = React.useId()
+  const bucketRangeListId = React.useId()
+  const playbackIntervalInputId = React.useId()
+  const pendingRestartRef = React.useRef(false)
+  const [playbackIntervalInput, setPlaybackIntervalInput] = React.useState(
+    `${defaultPlaybackIntervalMs}`,
+  )
+  const bounds = getLatestBucketOffsetBounds({ binType, range })
+  const bucketOptions = React.useMemo(
+    () => getLatestBucketOffsetOptions({ binType, range }),
+    [binType, range],
+  )
+  const clampedBucketOffset = Math.max(
+    bounds.minOffset,
+    Math.min(bucketOffset, bounds.maxOffset),
+  )
+  const binLabel = binningOptionsByType[binType].single
+  const canGoBack = clampedBucketOffset > bounds.minOffset
+  const canGoForward = clampedBucketOffset < bounds.maxOffset
+  const canPlay = bounds.minOffset < bounds.maxOffset
+
+  React.useEffect(() => {
+    if (!canPlay && isPlaying) {
+      onPlayingChange(false)
+    }
+  }, [canPlay, isPlaying, onPlayingChange])
+
+  React.useEffect(() => {
+    setPlaybackIntervalInput(`${playbackIntervalMs}`)
+  }, [playbackIntervalMs])
+
+  React.useEffect(() => {
+    pendingRestartRef.current = false
+  }, [binType, range])
+
+  React.useEffect(() => {
+    if (pendingRestartRef.current && clampedBucketOffset < bounds.maxOffset) {
+      pendingRestartRef.current = false
+    }
+  }, [bounds.maxOffset, clampedBucketOffset])
+
+  React.useEffect(() => {
+    if (!isPlaying || !canPlay) return
+
+    if (pendingRestartRef.current && clampedBucketOffset >= bounds.maxOffset) {
+      return
+    }
+
+    if (clampedBucketOffset >= bounds.maxOffset) {
+      if (!isLooping) {
+        onPlayingChange(false)
+        return
+      }
+
+      const timeoutId = window.setTimeout(() => {
+        onBucketOffsetChange(bounds.minOffset)
+      }, playbackIntervalMs)
+
+      return () => window.clearTimeout(timeoutId)
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      onBucketOffsetChange(clampedBucketOffset + 1)
+    }, playbackIntervalMs)
+
+    return () => window.clearTimeout(timeoutId)
+  }, [
+    bounds.maxOffset,
+    bounds.minOffset,
+    canPlay,
+    clampedBucketOffset,
+    isLooping,
+    isPlaying,
+    onBucketOffsetChange,
+    onPlayingChange,
+    playbackIntervalMs,
+  ])
+
+  const handleTogglePlayback = () => {
+    if (!canPlay) return
+
+    if (isPlaying) {
+      onPlayingChange(false)
+      pendingRestartRef.current = false
+      return
+    }
+
+    if (clampedBucketOffset >= bounds.maxOffset) {
+      pendingRestartRef.current = true
+      onBucketOffsetChange(bounds.minOffset)
+    }
+
+    onPlayingChange(true)
+  }
+  const handlePlaybackIntervalInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const value = event.target.value
+    setPlaybackIntervalInput(value)
+
+    const nextInterval = Number(value)
+    if (
+      Number.isInteger(nextInterval) &&
+      nextInterval > 0 &&
+      nextInterval <= maxPlaybackIntervalMs
+    ) {
+      onPlaybackIntervalChange(nextInterval)
+    }
+  }
+
+  return (
+    <>
+      <label className="sr-only" htmlFor={bucketSelectId}>
+        Select {binLabel}
+      </label>
+      <div className="relative min-w-36">
+        <select
+          className="h-6 w-full appearance-none rounded border border-gray-500/15 bg-white/80 pl-2 pr-6 text-xs font-medium text-gray-800 shadow-xs outline-none hover:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:bg-gray-900/70 dark:text-gray-100 dark:hover:bg-gray-900"
+          id={bucketSelectId}
+          onChange={(event) =>
+            onBucketOffsetChange(Number(event.currentTarget.value))
+          }
+          value={clampedBucketOffset}
+        >
+          {bucketOptions.map((option) => (
+            <option key={option.offset} value={option.offset}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <ChevronDown className="pointer-events-none absolute right-1.5 top-1/2 size-3 -translate-y-1/2 text-gray-500" />
+      </div>
+      <div className="flex items-center overflow-hidden rounded border border-gray-500/15 bg-white/70 shadow-xs dark:bg-gray-900/70">
+        <button
+          aria-label={`First ${binLabel}`}
+          className={navigatorButtonStyles}
+          disabled={!canGoBack}
+          onClick={() => onBucketOffsetChange(bounds.minOffset)}
+          type="button"
+        >
+          <ChevronsLeft className="size-3.5" />
+        </button>
+        <button
+          aria-label={`Previous ${binLabel}`}
+          className={borderedNavigatorButtonStyles}
+          disabled={!canGoBack}
+          onClick={() => onBucketOffsetChange(clampedBucketOffset - 1)}
+          type="button"
+        >
+          <ChevronLeft className="size-3.5" />
+        </button>
+        <button
+          aria-label={`Next ${binLabel}`}
+          className={borderedNavigatorButtonStyles}
+          disabled={!canGoForward}
+          onClick={() => onBucketOffsetChange(clampedBucketOffset + 1)}
+          type="button"
+        >
+          <ChevronRight className="size-3.5" />
+        </button>
+        <button
+          aria-label={`Last ${binLabel}`}
+          className={borderedNavigatorButtonStyles}
+          disabled={!canGoForward}
+          onClick={() => onBucketOffsetChange(bounds.maxOffset)}
+          type="button"
+        >
+          <ChevronsRight className="size-3.5" />
+        </button>
+      </div>
+      <div className="flex max-w-[348px] flex-1 items-center overflow-hidden rounded border border-gray-500/15 bg-white/70 shadow-xs dark:bg-gray-900/70">
+        <button
+          aria-label={isPlaying ? 'Pause bucket playback' : 'Play buckets'}
+          aria-pressed={isPlaying}
+          className={navigatorButtonStyles}
+          disabled={!canPlay}
+          onClick={handleTogglePlayback}
+          type="button"
+        >
+          {isPlaying ? (
+            <Pause className="size-3.5" />
+          ) : (
+            <Play className="size-3.5" />
+          )}
+        </button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              aria-label="Bucket playback options"
+              className={borderedNavigatorButtonStyles}
+              type="button"
+            >
+              <MoreHorizontal className="size-3.5" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="start"
+            className="z-50 min-w-[160px] rounded-md bg-white p-1.5 shadow-lg dark:bg-gray-800"
+            collisionPadding={8}
+            sideOffset={5}
+          >
+            <div className="mb-1 flex items-center justify-between px-0.5 text-xs font-medium">
+              <span>Playback Speed</span>
+            </div>
+            {playbackSpeedOptions.map((option) => (
+              <DropdownMenuItem
+                className={menuItemStyles}
+                key={option.intervalMs}
+                onSelect={() => onPlaybackIntervalChange(option.intervalMs)}
+              >
+                <Check
+                  className={
+                    option.intervalMs === playbackIntervalMs
+                      ? 'size-3 opacity-100'
+                      : 'size-3 opacity-0'
+                  }
+                />
+                <span>{option.label}</span>
+              </DropdownMenuItem>
+            ))}
+            <div className="mt-1 px-0.5 pb-1">
+              <label
+                className="mb-1 block text-xs font-medium"
+                htmlFor={playbackIntervalInputId}
+              >
+                Custom ms
+              </label>
+              <input
+                className="h-6 w-full rounded border border-gray-500/20 bg-transparent px-1.5 text-xs outline-none focus:border-blue-500"
+                id={playbackIntervalInputId}
+                max={maxPlaybackIntervalMs}
+                min={1}
+                onChange={handlePlaybackIntervalInputChange}
+                onKeyDown={(event) => event.stopPropagation()}
+                step={1}
+                type="number"
+                value={playbackIntervalInput}
+              />
+            </div>
+            <div className="my-1 h-px bg-gray-500/20" />
+            <DropdownMenuItem
+              className={menuItemStyles}
+              onSelect={() => onLoopingChange(!isLooping)}
+            >
+              <Check
+                className={
+                  isLooping ? 'size-3 opacity-100' : 'size-3 opacity-0'
+                }
+              />
+              <span>Loop</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <div className="flex h-6 min-w-36 max-w-[300px] flex-1 items-center border-l border-gray-500/15 bg-gray-500/5 px-1.5">
+          <input
+            aria-label={`Scrub ${binLabel}s`}
+            className="block h-6 w-full appearance-none bg-transparent outline-none
+              [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:bg-blue-600 [&::-moz-range-thumb]:shadow-md
+              [&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-gray-500/15
+              [&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-gray-500/15
+              [&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:shadow-md
+              dark:[&::-moz-range-thumb]:border-gray-900 dark:[&::-moz-range-track]:bg-gray-100/15
+              dark:[&::-webkit-slider-runnable-track]:bg-gray-100/15 dark:[&::-webkit-slider-thumb]:border-gray-900"
+            list={bucketRangeListId}
+            max={bounds.maxOffset}
+            min={bounds.minOffset}
+            onChange={(event) =>
+              onBucketOffsetChange(Number(event.currentTarget.value))
+            }
+            step={1}
+            type="range"
+            value={clampedBucketOffset}
+          />
+        </div>
+      </div>
+      <datalist id={bucketRangeListId}>
+        {bucketOptions.map((option) => (
+          <option key={option.offset} value={option.offset} />
+        ))}
+      </datalist>
+    </>
+  )
+}
diff --git a/src/components/npm-stats/NPMStatsChart.tsx b/src/components/npm-stats/NPMStatsChart.tsx
index 8317d4301..b0ef859c4 100644
--- a/src/components/npm-stats/NPMStatsChart.tsx
+++ b/src/components/npm-stats/NPMStatsChart.tsx
@@ -1,233 +1,3622 @@
 import * as React from 'react'
-import * as v from 'valibot'
+import { createPortal } from 'react-dom'
 import * as Plot from '@observablehq/plot'
 import * as d3 from 'd3'
-import { ParentSize } from '~/components/ParentSize'
-import { packageGroupSchema } from '~/routes/stats/npm/-comparisons'
-import { defaultColors } from '~/utils/npm-packages'
-
-// Types
-export type PackageGroup = v.InferOutput<typeof packageGroupSchema>
-
-export const binTypeSchema = v.picklist([
-  'yearly',
-  'monthly',
-  'weekly',
-  'daily',
-])
-export type BinType = v.InferOutput<typeof binTypeSchema>
-
-export const transformModeSchema = v.picklist(['none', 'normalize-y'])
-export type TransformMode = v.InferOutput<typeof transformModeSchema>
-
-export const showDataModeSchema = v.picklist(['all', 'complete'])
-export type ShowDataMode = v.InferOutput<typeof showDataModeSchema>
-
-export type TimeRange =
-  | '7-days'
-  | '30-days'
-  | '90-days'
-  | '180-days'
-  | '365-days'
-  | '730-days'
-  | '1825-days'
-  | 'all-time'
-
-export type FacetValue = 'name'
-
-// Type for query data returned from npm stats API
-export type NpmQueryData = Array<{
-  packages: Array<{
-    name?: string
-    hidden?: boolean
-    downloads: Array<{ day: string; downloads: number }>
-  }>
-  start: string
-  end: string
-  error?: string
-  actualStartDate?: Date
+import { GIFEncoder, applyPalette, quantize } from 'gifenc'
+import { Check, Code2, Copy, Download, List } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@radix-ui/react-dropdown-menu'
+import { twMerge } from 'tailwind-merge'
+import { Tooltip } from '~/components/Tooltip'
+import { observablePlotClassName } from '~/components/charts/PlotContainer'
+import {
+  binningOptionsByType,
+  getHistoryStartDate,
+  getUtcDay,
+  getUtcToday,
+  NPM_STATS_START_DATE,
+} from './binning'
+import { selectLatestBucketQueryData } from './npmQueryOptions'
+import type {
+  BarOrientation,
+  BinType,
+  ChartType,
+  LatestBarSort,
+  NpmQueryData,
+  PackageGroup,
+  ShowDataMode,
+  TimeRange,
+  TransformMode,
+  ViewMode,
+} from './shared'
+import {
+  formatNumber,
+  getBaselineDisplayName,
+  getPackageColor,
+  getPackageGroupLabel,
+  hasPackageGroupLabel,
+  isPackageGroupHidden,
+} from './shared'
+import { BASELINE_LINE_COLOR } from './BaselineSection'
+
+const BASELINE_LINE_SERIES = '__baseline__'
+const percentFormatter = new Intl.NumberFormat('en-US', {
+  style: 'percent',
+  maximumFractionDigits: 1,
+})
+const compactAxisNumberFormatter = d3.format('.3~s')
+const chartUpdateTransitionDurationMs = 500
+const chartUpdateEase = d3.easeExpOut
+
+function formatCompactAxisNumber(value: number) {
+  if (!Number.isFinite(value) || value === 0) return '0'
+  return compactAxisNumberFormatter(value)
+}
+
+type StackedDateRow<Datum> = {
+  date: Date
+  pointsBySeries: Map<string, Datum>
+  [seriesName: string]: Date | Map<string, Datum> | number
+}
+
+declare global {
+  interface SVGSVGElement {
+    updateBarPlot?: (options: BarPlotUpdateOptions) => void
+  }
+}
+
+type CategoricalAxis = 'x' | 'y'
+type BarRectAttributes = {
+  height: number | undefined
+  width: number | undefined
+  x: number | undefined
+  y: number | undefined
+}
+type BarPlotUpdateOptions = {
+  nextBarKeys: Array<string>
+  nextDomain: Array<string>
+  nextPlot: ReturnType<typeof Plot.plot>
+}
+type KeyedBarRect = {
+  key: string
+  rect: SVGRectElement
+}
+type AxisTickPart = 'tick' | 'label' | 'grid'
+type AxisTickPositionAttribute =
+  | 'transform'
+  | 'x'
+  | 'y'
+  | 'x1'
+  | 'x2'
+  | 'y1'
+  | 'y2'
+type AxisTickElementAttributes = Record<
+  AxisTickPositionAttribute,
+  string | undefined
+> & {
+  opacity: number | undefined
+}
+type KeyedTickElement = {
+  category: string
+  element: SVGElement
+  key: string
+  part: AxisTickPart
+}
+type TimelineRangeValue = {
+  end: number | undefined
+  start: number | undefined
+}
+type TimelineRangeScrubberProps = {
+  dates: Array<Date>
+  endIndex: number
+  marginLeft: number
+  marginRight: number
+  onRangeChange: (startIndex: number, endIndex: number) => void
+  startIndex: number
+}
+type TimelineScrubberDragState = {
+  anchorIndex: number
+  focusIndex: number
+}
+type TimelineScrubberPanState = {
+  anchorIndex: number
+  endIndex: number
+  startIndex: number
+}
+
+const axisTickPositionAttributes: Array<AxisTickPositionAttribute> = [
+  'transform',
+  'x',
+  'y',
+  'x1',
+  'x2',
+  'y1',
+  'y2',
+]
+const timelineScrubberDateFormatter = new Intl.DateTimeFormat('en-US', {
+  day: 'numeric',
+  month: 'short',
+  year: 'numeric',
+})
+const timelineScrubberInputStyles =
+  'pointer-events-none absolute inset-0 h-8 w-full appearance-none bg-transparent outline-none [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:cursor-ew-resize [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-gray-400 [&::-moz-range-thumb]:bg-gray-300 [&::-moz-range-thumb]:shadow-xs [&::-moz-range-track]:h-3 [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-0 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:cursor-ew-resize [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-gray-400 [&::-webkit-slider-thumb]:bg-gray-300 [&::-webkit-slider-thumb]:shadow-xs dark:[&::-moz-range-thumb]:border-gray-500 dark:[&::-moz-range-thumb]:bg-gray-700 dark:[&::-webkit-slider-thumb]:border-gray-500 dark:[&::-webkit-slider-thumb]:bg-gray-700'
+const timelineScrubberStartInputStyles =
+  '[&::-moz-range-thumb]:rounded-l-sm [&::-moz-range-thumb]:rounded-r-[1px] [&::-webkit-slider-thumb]:rounded-l-sm [&::-webkit-slider-thumb]:rounded-r-[1px]'
+const timelineScrubberEndInputStyles =
+  '[&::-moz-range-thumb]:rounded-l-[1px] [&::-moz-range-thumb]:rounded-r-sm [&::-webkit-slider-thumb]:rounded-l-[1px] [&::-webkit-slider-thumb]:rounded-r-sm'
+
+function getNumberAttribute(element: Element | undefined, attribute: string) {
+  const value = Number(element?.getAttribute(attribute))
+  return Number.isFinite(value) ? value : undefined
+}
+
+function clampTimelineIndex(index: number, maxIndex: number) {
+  return Math.max(0, Math.min(index, maxIndex))
+}
+
+function getTimelineIndexForTime({
+  dates,
+  fallbackIndex,
+  time,
+}: {
+  dates: Array<Date>
+  fallbackIndex: number
+  time: number | undefined
+}) {
+  if (time === undefined || !Number.isFinite(time) || dates.length === 0) {
+    return fallbackIndex
+  }
+
+  let low = 0
+  let high = dates.length - 1
+
+  while (low <= high) {
+    const middle = Math.floor((low + high) / 2)
+    const middleTime = dates[middle]?.getTime()
+
+    if (middleTime === undefined) break
+    if (middleTime === time) return middle
+    if (middleTime < time) {
+      low = middle + 1
+    } else {
+      high = middle - 1
+    }
+  }
+
+  const nextIndex = clampTimelineIndex(low, dates.length - 1)
+  const previousIndex = clampTimelineIndex(low - 1, dates.length - 1)
+  const nextTime = dates[nextIndex]?.getTime()
+  const previousTime = dates[previousIndex]?.getTime()
+  const nextDistance =
+    nextTime === undefined
+      ? Number.POSITIVE_INFINITY
+      : Math.abs(nextTime - time)
+  const previousDistance =
+    previousTime === undefined
+      ? Number.POSITIVE_INFINITY
+      : Math.abs(previousTime - time)
+
+  return previousDistance <= nextDistance ? previousIndex : nextIndex
+}
+
+function formatTimelineScrubberDate(date: Date | undefined) {
+  return date ? timelineScrubberDateFormatter.format(date) : ''
+}
+
+function getTimelineIndexFromPointer({
+  clientX,
+  element,
+  maxIndex,
+}: {
+  clientX: number
+  element: HTMLElement
+  maxIndex: number
+}) {
+  const box = element.getBoundingClientRect()
+  const progress = box.width > 0 ? (clientX - box.left) / box.width : 0
+
+  return clampTimelineIndex(Math.round(progress * maxIndex), maxIndex)
+}
+
+function getChartUpdateTransition() {
+  return d3
+    .transition()
+    .duration(chartUpdateTransitionDurationMs)
+    .ease(chartUpdateEase)
+}
+
+function getBarRectAttributes(rect: SVGRectElement): BarRectAttributes {
+  return {
+    height: getNumberAttribute(rect, 'height'),
+    width: getNumberAttribute(rect, 'width'),
+    x: getNumberAttribute(rect, 'x'),
+    y: getNumberAttribute(rect, 'y'),
+  }
+}
+
+function getBarRects(svg: SVGSVGElement) {
+  return [...svg.querySelectorAll<SVGRectElement>('g[aria-label="bar"] rect')]
+}
+
+function getBarGroup(svg: SVGSVGElement) {
+  return svg.querySelector<SVGGElement>('g[aria-label="bar"]')
+}
+
+function getBarCapLayer(svg: SVGSVGElement) {
+  return svg.querySelector<SVGElement>('g[aria-label="tick"]')
+}
+
+function getBarCapElements(svg: SVGSVGElement) {
+  return [...svg.querySelectorAll<SVGElement>('g[aria-label="tick"]>*')]
+}
+
+function getKeyedBarRects({
+  barKeys,
+  svg,
+}: {
+  barKeys: Array<string>
+  svg: SVGSVGElement
+}) {
+  const keyedBars: Array<KeyedBarRect> = []
+
+  getBarRects(svg).forEach((bar, index) => {
+    const key = barKeys[index]
+    if (!key) return
+
+    bar.setAttribute('data-bar-key', key)
+    keyedBars.push({ key, rect: bar })
+  })
+
+  return keyedBars
+}
+
+function getKeyedBarCapElements({
+  barKeys,
+  svg,
+}: {
+  barKeys: Array<string>
+  svg: SVGSVGElement
+}) {
+  const keyedCaps: Array<KeyedTickElement> = []
+
+  getBarCapElements(svg).forEach((element, index) => {
+    const key = barKeys[index]
+    if (!key) return
+
+    element.setAttribute('data-bar-cap-key', key)
+    keyedCaps.push({ category: key, element, key, part: 'tick' })
+  })
+
+  return keyedCaps
+}
+
+function getLiveKeyedBarRects(svg: SVGSVGElement) {
+  const keyedBars: Array<KeyedBarRect> = []
+
+  getBarRects(svg).forEach((bar) => {
+    const key = bar.getAttribute('data-bar-key')
+    if (!key) return
+
+    keyedBars.push({ key, rect: bar })
+  })
+
+  return keyedBars
+}
+
+function getLiveKeyedBarCapElements(svg: SVGSVGElement) {
+  const keyedCaps: Array<KeyedTickElement> = []
+
+  getBarCapElements(svg).forEach((element) => {
+    const key = element.getAttribute('data-bar-cap-key')
+    if (!key) return
+
+    keyedCaps.push({ category: key, element, key, part: 'tick' })
+  })
+
+  return keyedCaps
+}
+
+function getBarRectAttributesByKey({
+  barKeys,
+  svg,
+}: {
+  barKeys: Array<string>
+  svg: SVGSVGElement
+}) {
+  const attributesByKey = new Map<string, BarRectAttributes>()
+
+  getKeyedBarRects({ barKeys, svg }).forEach(({ key, rect }) => {
+    attributesByKey.set(key, getBarRectAttributes(rect))
+  })
+
+  return attributesByKey
+}
+
+function getBarRectsByKey({
+  barKeys,
+  svg,
+}: {
+  barKeys: Array<string>
+  svg: SVGSVGElement
+}) {
+  const rectsByKey = new Map<string, SVGRectElement>()
+
+  getKeyedBarRects({ barKeys, svg }).forEach(({ key, rect }) => {
+    rectsByKey.set(key, rect)
+  })
+
+  return rectsByKey
+}
+
+function getBarCapElementsByKey({
+  barKeys,
+  svg,
+}: {
+  barKeys: Array<string>
+  svg: SVGSVGElement
+}) {
+  const elementByKey = new Map<string, KeyedTickElement>()
+
+  getKeyedBarCapElements({ barKeys, svg }).forEach((keyedCap) => {
+    elementByKey.set(keyedCap.key, keyedCap)
+  })
+
+  return elementByKey
+}
+
+function getUniqueKeyedBarRects(svg: SVGSVGElement) {
+  const keyedBarsByKey = new Map<string, SVGRectElement>()
+
+  getLiveKeyedBarRects(svg).forEach(({ key, rect }) => {
+    if (!keyedBarsByKey.has(key)) {
+      keyedBarsByKey.set(key, rect)
+    }
+  })
+
+  return [...keyedBarsByKey].map(([key, rect]) => ({ key, rect }))
+}
+
+function getElementOpacity(element: Element) {
+  const opacity = Number(element.getAttribute('opacity'))
+  return Number.isFinite(opacity) ? opacity : undefined
+}
+
+function getCollapsedBarRectAttributes({
+  axis,
+  attributes,
+}: {
+  axis: CategoricalAxis
+  attributes: BarRectAttributes
+}): BarRectAttributes {
+  const x = attributes.x ?? 0
+  const y = attributes.y ?? 0
+  const width = attributes.width ?? 0
+  const height = attributes.height ?? 0
+
+  if (axis === 'x') {
+    return {
+      x,
+      y: y + height,
+      width,
+      height: 0,
+    }
+  }
+
+  return {
+    x,
+    y,
+    width: 0,
+    height,
+  }
+}
+
+function setBarRectAttributes(
+  rect: SVGRectElement,
+  attributes: BarRectAttributes,
+) {
+  if (attributes.x !== undefined) rect.setAttribute('x', `${attributes.x}`)
+  if (attributes.y !== undefined) rect.setAttribute('y', `${attributes.y}`)
+  if (attributes.width !== undefined) {
+    rect.setAttribute('width', `${attributes.width}`)
+  }
+  if (attributes.height !== undefined) {
+    rect.setAttribute('height', `${attributes.height}`)
+  }
+}
+
+function cloneBarRect(rect: SVGRectElement) {
+  const clone = rect.cloneNode(true)
+  return clone instanceof SVGRectElement ? clone : undefined
+}
+
+function getCategoricalTickElements({
+  axis,
+  domain,
+  svg,
+}: {
+  axis: CategoricalAxis
+  domain: Array<string>
+  svg: SVGSVGElement
+}) {
+  const keyedTicks: Array<KeyedTickElement> = []
+  const tickParts: Array<{
+    part: AxisTickPart
+    elements: Array<SVGElement>
+  }> = [
+    {
+      part: 'tick',
+      elements: [
+        ...svg.querySelectorAll<SVGElement>(
+          `[aria-label='${axis}-axis tick']>*`,
+        ),
+      ],
+    },
+    {
+      part: 'label',
+      elements: [
+        ...svg.querySelectorAll<SVGElement>(
+          `[aria-label='${axis}-axis tick label']>*`,
+        ),
+      ],
+    },
+  ]
+
+  tickParts.forEach(({ elements, part }) => {
+    elements.forEach((element, index) => {
+      const category = element.textContent?.trim() || domain[index] || ''
+      if (!category) return
+
+      const key = `${part}:${category}`
+      element.setAttribute('data-axis-tick-category', category)
+      element.setAttribute('data-axis-tick-key', key)
+      element.setAttribute('data-axis-tick-part', part)
+      keyedTicks.push({ category, element, key, part })
+    })
+  })
+
+  return keyedTicks
+}
+
+function getLiveCategoricalTickElements({
+  axis,
+  svg,
+}: {
+  axis: CategoricalAxis
+  svg: SVGSVGElement
+}) {
+  const keyedTicks: Array<KeyedTickElement> = []
+  const tickElements = [
+    ...svg.querySelectorAll<SVGElement>(`[aria-label='${axis}-axis tick']>*`),
+    ...svg.querySelectorAll<SVGElement>(
+      `[aria-label='${axis}-axis tick label']>*`,
+    ),
+  ]
+
+  tickElements.forEach((element) => {
+    const key = element.getAttribute('data-axis-tick-key')
+    if (!key) return
+
+    const category = element.getAttribute('data-axis-tick-category') ?? key
+    const part =
+      element.getAttribute('data-axis-tick-part') === 'label' ? 'label' : 'tick'
+    keyedTicks.push({ category, element, key, part })
+  })
+
+  return keyedTicks
+}
+
+function getCategoricalTickElementsByKey({
+  axis,
+  domain,
+  svg,
+}: {
+  axis: CategoricalAxis
+  domain: Array<string>
+  svg: SVGSVGElement
+}) {
+  const elementByKey = new Map<string, KeyedTickElement>()
+
+  getCategoricalTickElements({ axis, domain, svg }).forEach((keyedTick) => {
+    elementByKey.set(keyedTick.key, keyedTick)
+  })
+
+  return elementByKey
+}
+
+function getTickElementTransform(element: SVGElement | undefined) {
+  return element?.getAttribute('transform') || undefined
+}
+
+function cloneTickElement(element: SVGElement) {
+  const clone = element.cloneNode(true)
+  return clone instanceof SVGElement ? clone : undefined
+}
+
+function getAxisTickElementAttributes(
+  element: SVGElement,
+): AxisTickElementAttributes {
+  const attributes: AxisTickElementAttributes = {
+    opacity: getElementOpacity(element),
+    transform: undefined,
+    x: undefined,
+    y: undefined,
+    x1: undefined,
+    x2: undefined,
+    y1: undefined,
+    y2: undefined,
+  }
+
+  axisTickPositionAttributes.forEach((attribute) => {
+    attributes[attribute] = element.getAttribute(attribute) || undefined
+  })
+
+  return attributes
+}
+
+function setAxisTickElementAttributes(
+  element: SVGElement,
+  attributes: AxisTickElementAttributes,
+) {
+  axisTickPositionAttributes.forEach((attribute) => {
+    const value = attributes[attribute]
+    if (value === undefined) {
+      element.removeAttribute(attribute)
+      return
+    }
+
+    element.setAttribute(attribute, value)
+  })
+
+  if (attributes.opacity === undefined) {
+    element.removeAttribute('opacity')
+    return
+  }
+
+  element.setAttribute('opacity', `${attributes.opacity}`)
+}
+
+function transitionAxisTickElementsToTarget({
+  targetAttributesByKey,
+  ticks,
+  transition,
+}: {
+  targetAttributesByKey: Map<string, AxisTickElementAttributes>
+  ticks: Array<KeyedTickElement>
+  transition: d3.Transition<d3.BaseType, unknown, null, undefined>
+}) {
+  const tickTransition = d3
+    .selectAll<SVGElement, string>(ticks.map(({ element }) => element))
+    .data(ticks.map(({ key }) => key))
+    .transition(transition)
+    .attr('opacity', 1)
+
+  axisTickPositionAttributes.forEach((attribute) => {
+    tickTransition.attr(attribute, function (key) {
+      const targetAttributes = targetAttributesByKey.get(key)
+      if (!targetAttributes) return this.getAttribute(attribute)
+
+      return targetAttributes[attribute] ?? null
+    })
+  })
+}
+
+function getValueAxisTickElements({
+  axis,
+  svg,
+}: {
+  axis: CategoricalAxis
+  svg: SVGSVGElement
+}) {
+  const keyedTicks: Array<KeyedTickElement> = []
+  const labelValues = [
+    ...svg.querySelectorAll<SVGElement>(
+      `[aria-label='${axis}-axis tick label']>*`,
+    ),
+  ].map((element) => element.textContent?.trim() || '')
+  const tickParts: Array<{
+    part: AxisTickPart
+    elements: Array<SVGElement>
+  }> = [
+    {
+      part: 'grid',
+      elements: [
+        ...svg.querySelectorAll<SVGElement>(`[aria-label='${axis}-grid']>*`),
+      ],
+    },
+    {
+      part: 'tick',
+      elements: [
+        ...svg.querySelectorAll<SVGElement>(
+          `[aria-label='${axis}-axis tick']>*`,
+        ),
+      ],
+    },
+    {
+      part: 'label',
+      elements: [
+        ...svg.querySelectorAll<SVGElement>(
+          `[aria-label='${axis}-axis tick label']>*`,
+        ),
+      ],
+    },
+  ]
+
+  tickParts.forEach(({ elements, part }) => {
+    elements.forEach((element, index) => {
+      const category = labelValues[index] || element.textContent?.trim() || ''
+      if (!category) return
+
+      const key = `value:${part}:${category}`
+      element.setAttribute('data-value-axis-tick-category', category)
+      element.setAttribute('data-value-axis-tick-key', key)
+      element.setAttribute('data-value-axis-tick-part', part)
+      keyedTicks.push({ category, element, key, part })
+    })
+  })
+
+  return keyedTicks
+}
+
+function getLiveValueAxisTickElements({
+  axis,
+  svg,
+}: {
+  axis: CategoricalAxis
+  svg: SVGSVGElement
+}) {
+  const keyedTicks: Array<KeyedTickElement> = []
+  const tickElements = [
+    ...svg.querySelectorAll<SVGElement>(`[aria-label='${axis}-grid']>*`),
+    ...svg.querySelectorAll<SVGElement>(`[aria-label='${axis}-axis tick']>*`),
+    ...svg.querySelectorAll<SVGElement>(
+      `[aria-label='${axis}-axis tick label']>*`,
+    ),
+  ]
+
+  tickElements.forEach((element) => {
+    const key = element.getAttribute('data-value-axis-tick-key')
+    if (!key) return
+
+    const category =
+      element.getAttribute('data-value-axis-tick-category') ?? key
+    const partAttribute = element.getAttribute('data-value-axis-tick-part')
+    const part =
+      partAttribute === 'grid'
+        ? 'grid'
+        : partAttribute === 'label'
+          ? 'label'
+          : 'tick'
+    keyedTicks.push({ category, element, key, part })
+  })
+
+  return keyedTicks
+}
+
+function getValueAxisTickElementsByKey({
+  axis,
+  svg,
+}: {
+  axis: CategoricalAxis
+  svg: SVGSVGElement
+}) {
+  const elementByKey = new Map<string, KeyedTickElement>()
+
+  getValueAxisTickElements({ axis, svg }).forEach((keyedTick) => {
+    if (!elementByKey.has(keyedTick.key)) {
+      elementByKey.set(keyedTick.key, keyedTick)
+    }
+  })
+
+  return elementByKey
+}
+
+function getCategoricalTickLayerByPart({
+  axis,
+  svg,
+}: {
+  axis: CategoricalAxis
+  svg: SVGSVGElement
+}) {
+  const layerByPart = new Map<AxisTickPart, SVGElement>()
+  const gridLayer = svg.querySelector<SVGElement>(`[aria-label='${axis}-grid']`)
+  const tickLayer = svg.querySelector<SVGElement>(
+    `[aria-label='${axis}-axis tick']`,
+  )
+  const tickLabelLayer = svg.querySelector<SVGElement>(
+    `[aria-label='${axis}-axis tick label']`,
+  )
+
+  if (gridLayer) layerByPart.set('grid', gridLayer)
+  if (tickLayer) layerByPart.set('tick', tickLayer)
+  if (tickLabelLayer) layerByPart.set('label', tickLabelLayer)
+
+  return layerByPart
+}
+
+function attachCategoricalDomainUpdater({
+  axis,
+  barKeys,
+  domain,
+  svg,
+}: {
+  axis: CategoricalAxis
+  barKeys: Array<string>
+  domain: Array<string>
+  svg: SVGSVGElement
+}) {
+  const valueAxis: CategoricalAxis = axis === 'x' ? 'y' : 'x'
+
+  getKeyedBarRects({ barKeys, svg })
+  getKeyedBarCapElements({ barKeys, svg })
+  getCategoricalTickElements({ axis, domain, svg })
+  getValueAxisTickElements({ axis: valueAxis, svg })
+
+  svg.updateBarPlot = ({ nextBarKeys, nextDomain, nextPlot }) => {
+    const nextSvg = getPlotSvg(nextPlot)
+    if (!nextSvg) return
+
+    const currentKeyedBars = getUniqueKeyedBarRects(svg)
+    const currentBarAttributesByKey = new Map<string, BarRectAttributes>()
+    const currentBarsByKey = new Map<string, SVGRectElement>()
+
+    currentKeyedBars.forEach(({ key, rect }) => {
+      currentBarAttributesByKey.set(key, getBarRectAttributes(rect))
+      currentBarsByKey.set(key, rect)
+    })
+
+    const targetBarAttributesByKey = getBarRectAttributesByKey({
+      barKeys: nextBarKeys,
+      svg: nextSvg,
+    })
+    const targetBarsByKey = getBarRectsByKey({
+      barKeys: nextBarKeys,
+      svg: nextSvg,
+    })
+    const nextBarGroup = getBarGroup(nextSvg)
+    const currentBarCaps = getLiveKeyedBarCapElements(svg)
+    const currentBarCapElementsByKey = new Map<string, KeyedTickElement>()
+
+    currentBarCaps.forEach((cap) => {
+      if (!currentBarCapElementsByKey.has(cap.key)) {
+        currentBarCapElementsByKey.set(cap.key, cap)
+      }
+    })
+
+    const targetBarCapElementsByKey = getBarCapElementsByKey({
+      barKeys: nextBarKeys,
+      svg: nextSvg,
+    })
+    const targetBarCapAttributesByKey = new Map<
+      string,
+      AxisTickElementAttributes
+    >()
+
+    targetBarCapElementsByKey.forEach(({ element }, key) => {
+      targetBarCapAttributesByKey.set(
+        key,
+        getAxisTickElementAttributes(element),
+      )
+    })
+
+    const nextBarCapLayer = getBarCapLayer(nextSvg)
+    const currentKeyedTicks = getLiveCategoricalTickElements({ axis, svg })
+    const currentTickElementsByKey = new Map<string, KeyedTickElement>()
+
+    currentKeyedTicks.forEach((tick) => {
+      if (!currentTickElementsByKey.has(tick.key)) {
+        currentTickElementsByKey.set(tick.key, tick)
+      }
+    })
+
+    const targetTickElementsByKey = getCategoricalTickElementsByKey({
+      axis,
+      domain: nextDomain,
+      svg: nextSvg,
+    })
+    const targetTickTransformByKey = new Map<string, string>()
+
+    targetTickElementsByKey.forEach(({ element }, key) => {
+      const transform = getTickElementTransform(element)
+      if (transform) {
+        targetTickTransformByKey.set(key, transform)
+      }
+    })
+
+    const targetTickLayersByPart = getCategoricalTickLayerByPart({
+      axis,
+      svg: nextSvg,
+    })
+    const currentValueTicks = getLiveValueAxisTickElements({
+      axis: valueAxis,
+      svg,
+    })
+    const currentValueTickElementsByKey = new Map<string, KeyedTickElement>()
+
+    currentValueTicks.forEach((tick) => {
+      if (!currentValueTickElementsByKey.has(tick.key)) {
+        currentValueTickElementsByKey.set(tick.key, tick)
+      }
+    })
+
+    const targetValueTickElementsByKey = getValueAxisTickElementsByKey({
+      axis: valueAxis,
+      svg: nextSvg,
+    })
+    const targetValueTickAttributesByKey = new Map<
+      string,
+      AxisTickElementAttributes
+    >()
+
+    targetValueTickElementsByKey.forEach(({ element }, key) => {
+      targetValueTickAttributesByKey.set(
+        key,
+        getAxisTickElementAttributes(element),
+      )
+    })
+
+    const targetValueTickLayersByPart = getCategoricalTickLayerByPart({
+      axis: valueAxis,
+      svg: nextSvg,
+    })
+    const transition = getChartUpdateTransition()
+    const retainedBars: Array<KeyedBarRect> = []
+    const enteringBars: Array<KeyedBarRect> = []
+
+    nextBarKeys.forEach((key) => {
+      const targetBar = targetBarsByKey.get(key)
+      const targetAttributes = targetBarAttributesByKey.get(key)
+      if (!targetBar || !targetAttributes) return
+
+      const currentAttributes = currentBarAttributesByKey.get(key)
+      if (currentAttributes) {
+        setBarRectAttributes(targetBar, currentAttributes)
+        const currentBar = currentBarsByKey.get(key)
+        const currentOpacity = currentBar
+          ? getElementOpacity(currentBar)
+          : undefined
+        if (currentOpacity !== undefined) {
+          targetBar.setAttribute('opacity', `${currentOpacity}`)
+        }
+        retainedBars.push({ key, rect: targetBar })
+        return
+      }
+
+      setBarRectAttributes(
+        targetBar,
+        getCollapsedBarRectAttributes({
+          axis,
+          attributes: targetAttributes,
+        }),
+      )
+      targetBar.setAttribute('opacity', '0')
+      enteringBars.push({ key, rect: targetBar })
+    })
+
+    if (nextBarGroup) {
+      currentKeyedBars.forEach(({ key, rect }) => {
+        if (targetBarAttributesByKey.has(key)) return
+
+        const exitingBar = cloneBarRect(rect)
+        if (!exitingBar) return
+
+        const currentAttributes = getBarRectAttributes(rect)
+        setBarRectAttributes(exitingBar, currentAttributes)
+        const currentOpacity = getElementOpacity(rect)
+        if (currentOpacity !== undefined) {
+          exitingBar.setAttribute('opacity', `${currentOpacity}`)
+        }
+        exitingBar.setAttribute('data-bar-key', key)
+        nextBarGroup.append(exitingBar)
+        d3.select<SVGRectElement, BarRectAttributes>(exitingBar)
+          .datum(
+            getCollapsedBarRectAttributes({
+              axis,
+              attributes: currentAttributes,
+            }),
+          )
+          .transition(transition)
+          .attr('opacity', 0)
+          .attr('x', (attributes) => attributes.x ?? 0)
+          .attr('y', (attributes) => attributes.y ?? 0)
+          .attr('width', (attributes) => attributes.width ?? 0)
+          .attr('height', (attributes) => attributes.height ?? 0)
+          .remove()
+      })
+    }
+
+    const retainedTicks: Array<KeyedTickElement> = []
+    const enteringTicks: Array<KeyedTickElement> = []
+    const retainedBarCaps: Array<KeyedTickElement> = []
+    const enteringBarCaps: Array<KeyedTickElement> = []
+
+    targetBarCapElementsByKey.forEach((targetCap, key) => {
+      const currentCap = currentBarCapElementsByKey.get(key)
+
+      if (currentCap) {
+        setAxisTickElementAttributes(
+          targetCap.element,
+          getAxisTickElementAttributes(currentCap.element),
+        )
+        retainedBarCaps.push(targetCap)
+        return
+      }
+
+      targetCap.element.setAttribute('opacity', '0')
+      enteringBarCaps.push(targetCap)
+    })
+
+    currentBarCaps.forEach((currentCap) => {
+      if (targetBarCapElementsByKey.has(currentCap.key) || !nextBarCapLayer) {
+        return
+      }
+
+      const exitingCap = cloneTickElement(currentCap.element)
+      if (!exitingCap) return
+
+      setAxisTickElementAttributes(
+        exitingCap,
+        getAxisTickElementAttributes(currentCap.element),
+      )
+      exitingCap.setAttribute('data-bar-cap-key', currentCap.key)
+      nextBarCapLayer.append(exitingCap)
+      d3.select(exitingCap).transition(transition).attr('opacity', 0).remove()
+    })
+
+    targetTickElementsByKey.forEach((targetTick, key) => {
+      const currentTick = currentTickElementsByKey.get(key)
+      const targetTransform = targetTickTransformByKey.get(key)
+
+      if (currentTick) {
+        const currentTransform = getTickElementTransform(currentTick.element)
+        if (currentTransform) {
+          targetTick.element.setAttribute('transform', currentTransform)
+        }
+        const currentOpacity = getElementOpacity(currentTick.element)
+        if (currentOpacity !== undefined) {
+          targetTick.element.setAttribute('opacity', `${currentOpacity}`)
+        }
+        retainedTicks.push(targetTick)
+        return
+      }
+
+      if (targetTransform) {
+        targetTick.element.setAttribute('transform', targetTransform)
+      }
+      targetTick.element.setAttribute('opacity', '0')
+      enteringTicks.push(targetTick)
+    })
+
+    currentKeyedTicks.forEach((currentTick) => {
+      if (targetTickElementsByKey.has(currentTick.key)) return
+
+      const targetLayer = targetTickLayersByPart.get(currentTick.part)
+      if (!targetLayer) return
+
+      const exitingTick = cloneTickElement(currentTick.element)
+      if (!exitingTick) return
+
+      const currentTransform = getTickElementTransform(currentTick.element)
+      if (currentTransform) {
+        exitingTick.setAttribute('transform', currentTransform)
+      }
+      const currentOpacity = getElementOpacity(currentTick.element)
+      if (currentOpacity !== undefined) {
+        exitingTick.setAttribute('opacity', `${currentOpacity}`)
+      }
+      exitingTick.setAttribute('data-axis-tick-category', currentTick.category)
+      exitingTick.setAttribute('data-axis-tick-key', currentTick.key)
+      exitingTick.setAttribute('data-axis-tick-part', currentTick.part)
+      targetLayer.append(exitingTick)
+      d3.select(exitingTick).transition(transition).attr('opacity', 0).remove()
+    })
+
+    const retainedValueTicks: Array<KeyedTickElement> = []
+    const enteringValueTicks: Array<KeyedTickElement> = []
+
+    targetValueTickElementsByKey.forEach((targetTick, key) => {
+      const currentTick = currentValueTickElementsByKey.get(key)
+
+      if (currentTick) {
+        setAxisTickElementAttributes(
+          targetTick.element,
+          getAxisTickElementAttributes(currentTick.element),
+        )
+        retainedValueTicks.push(targetTick)
+        return
+      }
+
+      targetTick.element.setAttribute('opacity', '0')
+      enteringValueTicks.push(targetTick)
+    })
+
+    currentValueTicks.forEach((currentTick) => {
+      if (targetValueTickElementsByKey.has(currentTick.key)) return
+
+      const targetLayer = targetValueTickLayersByPart.get(currentTick.part)
+      if (!targetLayer) return
+
+      const exitingTick = cloneTickElement(currentTick.element)
+      if (!exitingTick) return
+
+      setAxisTickElementAttributes(
+        exitingTick,
+        getAxisTickElementAttributes(currentTick.element),
+      )
+      exitingTick.setAttribute(
+        'data-value-axis-tick-category',
+        currentTick.category,
+      )
+      exitingTick.setAttribute('data-value-axis-tick-key', currentTick.key)
+      exitingTick.setAttribute('data-value-axis-tick-part', currentTick.part)
+      targetLayer.append(exitingTick)
+      d3.select(exitingTick).transition(transition).attr('opacity', 0).remove()
+    })
+
+    d3.selectAll<SVGRectElement, string>(retainedBars.map(({ rect }) => rect))
+      .data(retainedBars.map(({ key }) => key))
+      .transition(transition)
+      .attr('opacity', 1)
+      .attr('x', function (key) {
+        return (
+          targetBarAttributesByKey.get(key)?.x ??
+          getNumberAttribute(this, 'x') ??
+          0
+        )
+      })
+      .attr('y', function (key) {
+        return (
+          targetBarAttributesByKey.get(key)?.y ??
+          getNumberAttribute(this, 'y') ??
+          0
+        )
+      })
+      .attr('width', function (key) {
+        return (
+          targetBarAttributesByKey.get(key)?.width ??
+          getNumberAttribute(this, 'width') ??
+          0
+        )
+      })
+      .attr('height', function (key) {
+        return (
+          targetBarAttributesByKey.get(key)?.height ??
+          getNumberAttribute(this, 'height') ??
+          0
+        )
+      })
+
+    d3.selectAll<SVGRectElement, string>(enteringBars.map(({ rect }) => rect))
+      .data(enteringBars.map(({ key }) => key))
+      .transition(transition)
+      .attr('opacity', 1)
+      .attr('x', function (key) {
+        return (
+          targetBarAttributesByKey.get(key)?.x ??
+          getNumberAttribute(this, 'x') ??
+          0
+        )
+      })
+      .attr('y', function (key) {
+        return (
+          targetBarAttributesByKey.get(key)?.y ??
+          getNumberAttribute(this, 'y') ??
+          0
+        )
+      })
+      .attr('width', function (key) {
+        return (
+          targetBarAttributesByKey.get(key)?.width ??
+          getNumberAttribute(this, 'width') ??
+          0
+        )
+      })
+      .attr('height', function (key) {
+        return (
+          targetBarAttributesByKey.get(key)?.height ??
+          getNumberAttribute(this, 'height') ??
+          0
+        )
+      })
+
+    d3.selectAll<SVGElement, string>(
+      retainedTicks.map(({ element }) => element),
+    )
+      .data(retainedTicks.map(({ key }) => key))
+      .transition(transition)
+      .attr('opacity', 1)
+      .attr('transform', function (key) {
+        return (
+          targetTickTransformByKey.get(key) ?? this.getAttribute('transform')
+        )
+      })
+
+    d3.selectAll<SVGElement, string>(
+      enteringTicks.map(({ element }) => element),
+    )
+      .data(enteringTicks.map(({ key }) => key))
+      .transition(transition)
+      .attr('opacity', 1)
+      .attr('transform', function (key) {
+        return (
+          targetTickTransformByKey.get(key) ?? this.getAttribute('transform')
+        )
+      })
+
+    transitionAxisTickElementsToTarget({
+      targetAttributesByKey: targetValueTickAttributesByKey,
+      ticks: retainedValueTicks,
+      transition,
+    })
+
+    transitionAxisTickElementsToTarget({
+      targetAttributesByKey: targetValueTickAttributesByKey,
+      ticks: enteringValueTicks,
+      transition,
+    })
+
+    transitionAxisTickElementsToTarget({
+      targetAttributesByKey: targetBarCapAttributesByKey,
+      ticks: retainedBarCaps,
+      transition,
+    })
+
+    transitionAxisTickElementsToTarget({
+      targetAttributesByKey: targetBarCapAttributesByKey,
+      ticks: enteringBarCaps,
+      transition,
+    })
+  }
+}
+
+function getInsideOutOrderByLatestValue({
+  latestValues,
+  sums,
+}: {
+  latestValues: Array<number>
+  sums: Array<number>
+}) {
+  const order = d3
+    .range(latestValues.length)
+    .sort(
+      (a, b) =>
+        d3.descending(latestValues[a] ?? 0, latestValues[b] ?? 0) ||
+        d3.ascending(a, b),
+    )
+  const tops: Array<number> = []
+  const bottoms: Array<number> = []
+  let topSum = 0
+  let bottomSum = 0
+
+  order.forEach((index) => {
+    const sum = sums[index] ?? 0
+
+    if (topSum < bottomSum) {
+      topSum += sum
+      tops.push(index)
+      return
+    }
+
+    bottomSum += sum
+    bottoms.push(index)
+  })
+
+  return bottoms.reverse().concat(tops)
+}
+
+function getSubPackageColorForPackages({
+  groupName,
+  packageIndex,
+  packages,
+}: {
+  groupName: string
+  packageIndex: number
+  packages: Array<PackageGroup>
+}) {
+  const groupColor = getPackageColor(groupName, packages)
+  const color = d3.color(groupColor)
+  if (!color || packageIndex === 0) return groupColor
+
+  return packageIndex % 2 === 0
+    ? color.darker(packageIndex * 0.25).toString()
+    : color.brighter(packageIndex * 0.35).toString()
+}
+
+// Plot figure component
+type PlotOptions = NonNullable<Parameters<typeof Plot.plot>[0]>
+type ChartExportFormat = 'svg' | 'png' | 'jpeg' | 'gif' | 'webm'
+type ColorLegendEntry = {
+  label: string
+  color: string
+}
+type ExportLegendItem = {
+  color: string
+  label: string
+}
+type ExportLegendLayoutItem = {
+  item: ExportLegendItem
+  width: number
+}
+type ExportLegendLayoutRow = {
+  items: Array<ExportLegendLayoutItem>
+  width: number
+}
+type ChartFillGradient = {
+  bottomOpacity: number
+  color: string
+  id: string
+  topOpacity: number
+}
+type ExportBackgroundMode = 'opaque' | 'transparent'
+type ExportStyle = {
+  backgroundColor: string
+  backgroundMode: ExportBackgroundMode
+  color: string
+}
+type SerializedExportSvg = {
+  height: number
+  source: string
+  width: number
+}
+type SerializedAnimationFrame = SerializedExportSvg & {
+  delayMs: number
+}
+type LatestBucketOffsetBounds = {
+  maxOffset: number
+  minOffset: number
+}
+export type NpmStatsChartEmbedOptions = {
+  includeTimelineRange: boolean
+  lockWidth: boolean
+  showLegend: boolean
+}
+export type NpmStatsChartEmbedConfig = {
+  buildUrl: (options: NpmStatsChartEmbedOptions) => string
+  hasTimelineRange: boolean
+  hasWidth: boolean
+}
+
+const chartExportOptions = [
+  { value: 'svg', label: 'SVG' },
+  { value: 'png', label: 'PNG' },
+  { value: 'jpeg', label: 'JPEG' },
+  { value: 'gif', label: 'GIF' },
+  { value: 'webm', label: 'WebM' },
+] as const satisfies ReadonlyArray<{
+  value: ChartExportFormat
+  label: string
 }>
+const animatedExportMaxFrames = 240
+const animatedExportMinDelayMs = 35
+const animatedExportMaxDelayMs = 100
+const axisTickAverageCharacterWidth = 6.4
+const axisTickLineHeight = 12
+const chartActionButtonStyles =
+  'flex size-6 items-center justify-center rounded bg-gray-500/10 text-gray-600 hover:bg-gray-500/20 hover:text-blue-500 dark:text-gray-400 dark:hover:text-gray-100'
+const chartActionDropdownContentStyles =
+  'z-50 min-w-[120px] rounded-md bg-white p-1.5 shadow-lg dark:bg-gray-800'
+const chartActionDropdownItemStyles =
+  'flex w-full cursor-pointer items-center rounded px-1.5 py-1 text-left text-xs outline-none hover:bg-gray-500/20 data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500'
+const chartEmbedInputStyles =
+  'w-full rounded border border-gray-500/20 bg-gray-50 px-2 py-1.5 font-mono text-[11px] leading-snug outline-none focus:border-blue-500 dark:bg-gray-900'
+const svgNamespace = 'http://www.w3.org/2000/svg'
+
+function clampNumber(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(value, max))
+}
+
+function getEstimatedAxisLabelWidth(label: string) {
+  return Math.ceil(label.length * axisTickAverageCharacterWidth)
+}
+
+function getCategoricalAxisLeftMargin({
+  labels,
+  width,
+}: {
+  labels: Array<string>
+  width: number
+}) {
+  const longestLabelWidth =
+    d3.max(labels, (label) => getEstimatedAxisLabelWidth(label)) ?? 0
+  const maxMargin = clampNumber(Math.round(width * 0.38), 110, 280)
+
+  return clampNumber(longestLabelWidth + 26, 90, maxMargin)
+}
+
+function getVerticalCategoricalXAxisLayout({
+  height,
+  labels,
+  marginLeft,
+  marginRight,
+  width,
+}: {
+  height: number
+  labels: Array<string>
+  marginLeft: number
+  marginRight: number
+  width: number
+}) {
+  const availableWidth = Math.max(0, width - marginLeft - marginRight)
+  const tickSlotWidth = labels.length ? availableWidth / labels.length : 0
+  const longestLabelWidth =
+    d3.max(labels, (label) => getEstimatedAxisLabelWidth(label)) ?? 0
+  const shouldRotateTicks =
+    labels.length > 0 && longestLabelWidth > Math.max(36, tickSlotWidth - 8)
+
+  if (!shouldRotateTicks) {
+    return {
+      labelOffset: 35,
+      marginBottom: 64,
+      tickRotate: undefined,
+    }
+  }
+
+  const tickAngle = Math.PI / 6
+  const rotatedTickHeight = Math.ceil(
+    longestLabelWidth * Math.sin(tickAngle) +
+      axisTickLineHeight * Math.cos(tickAngle),
+  )
+  const maxMarginBottom = clampNumber(Math.round(height * 0.45), 88, 160)
+
+  return {
+    labelOffset: 55,
+    marginBottom: clampNumber(44 + rotatedTickHeight, 76, maxMarginBottom),
+    tickRotate: -30,
+  }
+}
+
+function getPlotContentHeight({
+  reservedHeight,
+  totalHeight,
+}: {
+  reservedHeight: number
+  totalHeight: number | undefined
+}) {
+  return Math.max(1, Math.floor((totalHeight ?? 0) - reservedHeight))
+}
+
+function getExportFileName(format: ChartExportFormat) {
+  if (format === 'jpeg') return 'npm-stats-chart.jpg'
+  return `npm-stats-chart.${format}`
+}
+
+function isAnimatedExportFormat(
+  format: ChartExportFormat,
+): format is 'gif' | 'webm' {
+  return format === 'gif' || format === 'webm'
+}
+
+function getStableIdPart(value: string) {
+  let hash = 2166136261
+
+  for (let index = 0; index < value.length; index++) {
+    hash = Math.imul(hash ^ value.charCodeAt(index), 16777619)
+  }
+
+  return (hash >>> 0).toString(36)
+}
+
+function getChartFillGradients({
+  bottomOpacity = 0.1,
+  entries,
+  idPrefix,
+  topOpacity = 0.8,
+}: {
+  bottomOpacity?: number
+  entries: Array<ColorLegendEntry>
+  idPrefix: string
+  topOpacity?: number
+}) {
+  const seenColors = new Set<string>()
+  const gradients: Array<ChartFillGradient> = []
+
+  entries.forEach((entry) => {
+    if (seenColors.has(entry.color)) return
+
+    seenColors.add(entry.color)
+    gradients.push({
+      bottomOpacity,
+      color: entry.color,
+      id: `${idPrefix}-${getStableIdPart(entry.color)}`,
+      topOpacity,
+    })
+  })
+
+  return gradients
+}
+
+function getChartFillGradientUrl({
+  color,
+  gradients,
+}: {
+  color: string
+  gradients: Array<ChartFillGradient>
+}) {
+  const gradient = gradients.find((entry) => entry.color === color)
+
+  return gradient ? `url(#${gradient.id})` : color
+}
+
+function applyChartFillGradients({
+  gradients,
+  svg,
+}: {
+  gradients: Array<ChartFillGradient>
+  svg: SVGSVGElement
+}) {
+  if (!gradients.length) return
+
+  const ownerDocument = svg.ownerDocument
+  const defs =
+    svg.querySelector('defs') ??
+    ownerDocument.createElementNS(svgNamespace, 'defs')
+
+  if (!defs.parentNode) {
+    svg.prepend(defs)
+  }
+
+  gradients.forEach((entry) => {
+    let gradient = defs.querySelector<SVGLinearGradientElement>(`#${entry.id}`)
+
+    if (!gradient) {
+      gradient = ownerDocument.createElementNS(svgNamespace, 'linearGradient')
+      gradient.setAttribute('id', entry.id)
+      defs.append(gradient)
+    } else {
+      gradient.replaceChildren()
+    }
+
+    gradient.setAttribute('x1', '0')
+    gradient.setAttribute('x2', '0')
+    gradient.setAttribute('y1', '1')
+    gradient.setAttribute('y2', '0')
+
+    const bottomStop = ownerDocument.createElementNS(svgNamespace, 'stop')
+    bottomStop.setAttribute('offset', '0%')
+    bottomStop.setAttribute('stop-color', entry.color)
+    bottomStop.setAttribute('stop-opacity', `${entry.bottomOpacity}`)
+    gradient.append(bottomStop)
+
+    const topStop = ownerDocument.createElementNS(svgNamespace, 'stop')
+    topStop.setAttribute('offset', '100%')
+    topStop.setAttribute('stop-color', entry.color)
+    topStop.setAttribute('stop-opacity', `${entry.topOpacity}`)
+    gradient.append(topStop)
+  })
+}
+
+function getUniqueColorLegendEntries(entries: Array<ColorLegendEntry>) {
+  const colorByLabel = new Map<string, string>()
+
+  entries.forEach((entry) => {
+    if (!colorByLabel.has(entry.label)) {
+      colorByLabel.set(entry.label, entry.color)
+    }
+  })
+
+  return [...colorByLabel].map(([label, color]) => ({ label, color }))
+}
+
+function getPlotSvg(plot: ReturnType<typeof Plot.plot> | null) {
+  if (!plot) return undefined
+  if (plot instanceof SVGSVGElement) return plot
+  return plot.querySelector('svg') ?? undefined
+}
+
+function getLatestExportPackageData({
+  binType,
+  packages,
+  queryData,
+}: {
+  binType: BinType
+  packages: Array<PackageGroup>
+  queryData: NpmQueryData
+}) {
+  const binUnit = binningOptionsByType[binType].bin
+  const earliestQueryStart = queryData
+    .map((pkg) => getUtcDay(new Date(pkg.start)))
+    .sort((a, b) => a.getTime() - b.getTime())[0]
+  const startDate = binUnit.floor(earliestQueryStart || NPM_STATS_START_DATE)
+
+  const combinedPackageGroups = queryData.map((queryPackageGroup, index) => {
+    const packageGroupWithHidden = packages[index]
+    const shouldAlwaysIncludeFirstPackage =
+      !packageGroupWithHidden ||
+      !hasPackageGroupLabel(packageGroupWithHidden) ||
+      !!packageGroupWithHidden.baseline
+    const visiblePackages = queryPackageGroup.packages.filter((p, i) => {
+      const hiddenState = packageGroupWithHidden?.packages.find(
+        (pg) => pg.name === p.name,
+      )?.hidden
+      return (i === 0 && shouldAlwaysIncludeFirstPackage) || !hiddenState
+    })
+    const groupName = packageGroupWithHidden
+      ? getPackageGroupLabel(packageGroupWithHidden)
+      : queryPackageGroup.packages[0]?.name || 'Unknown'
+    const downloadsByDate = new Map<number, number>()
+
+    visiblePackages.forEach((pkg) => {
+      pkg.downloads.forEach((d) => {
+        const date = getUtcDay(new Date(d.day))
+        if (date < startDate) return
+
+        downloadsByDate.set(
+          date.getTime(),
+          (downloadsByDate.get(date.getTime()) || 0) + d.downloads,
+        )
+      })
+    })
+
+    const packageDownloads = visiblePackages.map((pkg) => {
+      const packageName = pkg.name || groupName
+      const packageDownloadsByDate = new Map<number, number>()
+
+      pkg.downloads.forEach((d) => {
+        const date = getUtcDay(new Date(d.day))
+        if (date < startDate) return
+
+        packageDownloadsByDate.set(
+          date.getTime(),
+          (packageDownloadsByDate.get(date.getTime()) || 0) + d.downloads,
+        )
+      })
+
+      return {
+        packageName,
+        downloads: Array.from(packageDownloadsByDate.entries()).map(
+          ([date, downloads]) => ({
+            date: getUtcDay(new Date(date)),
+            downloads,
+          }),
+        ),
+      }
+    })
+
+    return {
+      groupName,
+      packageDownloads,
+      downloads: Array.from(downloadsByDate.entries()).map(
+        ([date, downloads]) => [getUtcDay(new Date(date)), downloads],
+      ) as Array<[Date, number]>,
+    }
+  })
+
+  return combinedPackageGroups
+    .map((packageGroup) => {
+      const binned = d3.sort(
+        d3.rollup(
+          packageGroup.downloads,
+          (v) => d3.sum(v, (d) => d[1]),
+          (d) => binUnit.floor(d[0]),
+        ),
+        (d) => d[0],
+      )
+
+      return {
+        ...packageGroup,
+        downloads: binned.map((d) => ({
+          name: packageGroup.groupName,
+          date: getUtcDay(new Date(d[0])),
+          downloads: d[1],
+        })),
+        packageDownloads: packageGroup.packageDownloads.map((pkg) => {
+          const packageBinned = d3.sort(
+            d3.rollup(
+              pkg.downloads,
+              (v) => d3.sum(v, (d) => d.downloads),
+              (d) => binUnit.floor(d.date),
+            ),
+            (d) => d[0],
+          )
+
+          return {
+            ...pkg,
+            groupName: packageGroup.groupName,
+            downloads: packageBinned.map((d) => ({
+              groupName: packageGroup.groupName,
+              packageName: pkg.packageName,
+              date: getUtcDay(new Date(d[0])),
+              downloads: d[1],
+            })),
+          }
+        }),
+      }
+    })
+    .filter((_, index) => {
+      const packageGroupWithHidden = packages[index]
+      return packageGroupWithHidden
+        ? !isPackageGroupHidden(packageGroupWithHidden)
+        : true
+    })
+}
+
+function createLatestBarExportPlot({
+  barOrientation,
+  barSort,
+  binType,
+  chartType,
+  gradientIdPrefix,
+  height,
+  packages,
+  queryData,
+  width,
+}: {
+  barOrientation: BarOrientation
+  barSort: LatestBarSort
+  binType: BinType
+  chartType: ChartType
+  gradientIdPrefix: string
+  height: number
+  packages: Array<PackageGroup>
+  queryData: NpmQueryData
+  width: number
+}) {
+  const filteredPackageData = getLatestExportPackageData({
+    binType,
+    packages,
+    queryData,
+  })
+  const latestBarGroups = filteredPackageData
+    .map((packageGroup) => ({
+      packageGroup,
+      name: packageGroup.groupName,
+      downloads: d3.sum(packageGroup.downloads, (d) => d.downloads),
+    }))
+    .filter((group) => group.downloads > 0)
+    .sort((a, b) =>
+      barSort === 'value'
+        ? d3.descending(a.downloads, b.downloads) ||
+          a.name.localeCompare(b.name)
+        : a.name.localeCompare(b.name),
+    )
+  const latestBarDomain = latestBarGroups.map((group) => group.name)
+  const latestGroupedBarData = latestBarGroups.map((group) => ({
+    name: group.name,
+    seriesName: group.name,
+    downloads: group.downloads,
+    label: `${group.name}: ${formatNumber(group.downloads)}`,
+  }))
+  const latestStackedBarData = latestBarGroups.flatMap((group) => {
+    let y0 = 0
+    const sortedPackageDownloads = group.packageGroup.packageDownloads
+      .map((pkg, packageIndex) => ({
+        ...pkg,
+        packageIndex,
+        totalDownloads: d3.sum(pkg.downloads, (d) => d.downloads),
+      }))
+      .filter((pkg) => pkg.totalDownloads > 0)
+      .sort((a, b) => b.totalDownloads - a.totalDownloads)
+
+    return sortedPackageDownloads.map((pkg) => {
+      const point = {
+        groupName: group.name,
+        packageName: pkg.packageName,
+        packageIndex: pkg.packageIndex,
+        downloads: pkg.totalDownloads,
+        y0,
+        y1: y0 + pkg.totalDownloads,
+        label: `${pkg.packageName}: ${formatNumber(pkg.totalDownloads)}`,
+      }
+      y0 += pkg.totalDownloads
+      return point
+    })
+  })
+  const isStackedBar = chartType === 'stacked-bar'
+  const isHorizontalBar = barOrientation === 'horizontal'
+  const marginRight = 10
+  const marginLeft = isHorizontalBar
+    ? getCategoricalAxisLeftMargin({ labels: latestBarDomain, width })
+    : 70
+  const verticalXAxisLayout = getVerticalCategoricalXAxisLayout({
+    height,
+    labels: latestBarDomain,
+    marginLeft,
+    marginRight,
+    width,
+  })
+  const getSeriesColor = (d: { name?: string }) =>
+    d.name ? getPackageColor(d.name, packages) : 'currentColor'
+  const getSubPackageColor = (d: { groupName: string; packageIndex: number }) =>
+    getSubPackageColorForPackages({ ...d, packages })
+  const colorLegendEntries = getUniqueColorLegendEntries(
+    isStackedBar
+      ? latestStackedBarData.map((bar) => ({
+          label: `${bar.groupName} / ${bar.packageName}`,
+          color: getSubPackageColor(bar),
+        }))
+      : latestGroupedBarData.map((bar) => ({
+          label: bar.name,
+          color: getPackageColor(bar.name, packages),
+        })),
+  )
+  const fillGradients = getChartFillGradients({
+    bottomOpacity: 0.7,
+    entries: colorLegendEntries,
+    idPrefix: gradientIdPrefix,
+    topOpacity: 1,
+  })
+  const getSeriesGradientFill = (d: { name?: string }) =>
+    getChartFillGradientUrl({
+      color: getSeriesColor(d),
+      gradients: fillGradients,
+    })
+  const getSubPackageGradientFill = (d: {
+    groupName: string
+    packageIndex: number
+  }) =>
+    getChartFillGradientUrl({
+      color: getSubPackageColor(d),
+      gradients: fillGradients,
+    })
+  const plot = Plot.plot({
+    marginLeft,
+    marginRight,
+    marginBottom: isHorizontalBar ? 64 : verticalXAxisLayout.marginBottom,
+    width,
+    height,
+    marks: (
+      [
+        isHorizontalBar
+          ? Plot.ruleX([0], {
+              stroke: 'currentColor',
+              strokeWidth: 1.5,
+              strokeOpacity: 0.5,
+            })
+          : Plot.ruleY([0], {
+              stroke: 'currentColor',
+              strokeWidth: 1.5,
+              strokeOpacity: 0.5,
+            }),
+        !isStackedBar && !isHorizontalBar
+          ? Plot.barY(latestGroupedBarData, {
+              x: 'name',
+              y: 'downloads',
+              fill: getSeriesGradientFill,
+            })
+          : undefined,
+        !isStackedBar && isHorizontalBar
+          ? Plot.barX(latestGroupedBarData, {
+              x: 'downloads',
+              y: 'name',
+              fill: getSeriesGradientFill,
+            })
+          : undefined,
+        isStackedBar && !isHorizontalBar
+          ? Plot.barY(latestStackedBarData, {
+              x: 'groupName',
+              y1: 'y0',
+              y2: 'y1',
+              fill: getSubPackageGradientFill,
+            })
+          : undefined,
+        isStackedBar && isHorizontalBar
+          ? Plot.barX(latestStackedBarData, {
+              y: 'groupName',
+              x1: 'y0',
+              x2: 'y1',
+              fill: getSubPackageGradientFill,
+            })
+          : undefined,
+      ] as const
+    ).filter(Boolean),
+    x: {
+      domain: isHorizontalBar ? undefined : latestBarDomain,
+      label: isHorizontalBar ? 'Downloads' : null,
+      labelOffset: isHorizontalBar ? 35 : verticalXAxisLayout.labelOffset,
+      tickFormat: isHorizontalBar ? formatCompactAxisNumber : undefined,
+      tickRotate: isHorizontalBar ? undefined : verticalXAxisLayout.tickRotate,
+    },
+    y: {
+      domain: isHorizontalBar ? latestBarDomain : undefined,
+      label: null,
+      labelOffset: 35,
+    },
+    grid: true,
+    color: {
+      domain: colorLegendEntries.map((entry) => entry.label),
+      range: colorLegendEntries.map((entry) => entry.color),
+      legend: false,
+    },
+  })
+  const svg = getPlotSvg(plot)
+  if (svg) {
+    applyChartFillGradients({ gradients: fillGradients, svg })
+  }
+
+  return plot
+}
+
+function getSvgDimensions(svg: SVGSVGElement) {
+  const box = svg.getBoundingClientRect()
+  const viewBox = svg.viewBox.baseVal
+  const width = svg.width.baseVal.value || viewBox.width || box.width || 1
+  const height = svg.height.baseVal.value || viewBox.height || box.height || 1
+
+  return {
+    width: Math.max(1, Math.ceil(width)),
+    height: Math.max(1, Math.ceil(height)),
+  }
+}
+
+function isTransparentColor(color: string) {
+  const normalizedColor = color.trim().toLowerCase()
+
+  return (
+    normalizedColor === '' ||
+    normalizedColor === 'transparent' ||
+    normalizedColor === 'rgba(0, 0, 0, 0)' ||
+    normalizedColor === 'rgba(0,0,0,0)' ||
+    /^rgba\(.+,\s*0(?:\.0+)?\)$/.test(normalizedColor) ||
+    /^rgb\(.+\/\s*0(?:%|\.0+)?\)$/.test(normalizedColor)
+  )
+}
+
+function getEffectiveBackgroundColor(element: Element) {
+  const defaultView = element.ownerDocument.defaultView
+  if (!defaultView) return '#ffffff'
+
+  let current: Element | null = element
+  while (current) {
+    const backgroundColor =
+      defaultView.getComputedStyle(current).backgroundColor
+    if (!isTransparentColor(backgroundColor)) {
+      return backgroundColor
+    }
+
+    current = current.parentElement
+  }
+
+  const bodyBackgroundColor = defaultView.getComputedStyle(
+    element.ownerDocument.body,
+  ).backgroundColor
+  if (!isTransparentColor(bodyBackgroundColor)) {
+    return bodyBackgroundColor
+  }
+
+  return element.ownerDocument.documentElement.classList.contains('dark')
+    ? '#030712'
+    : '#ffffff'
+}
+
+function getExportStyle({
+  format,
+  svg,
+}: {
+  format: ChartExportFormat
+  svg: SVGSVGElement
+}): ExportStyle {
+  const computedStyle = svg.ownerDocument.defaultView?.getComputedStyle(svg)
+  const color = computedStyle?.color || 'currentColor'
+
+  return {
+    backgroundColor: getEffectiveBackgroundColor(svg),
+    backgroundMode:
+      format === 'jpeg' || isAnimatedExportFormat(format)
+        ? 'opaque'
+        : 'transparent',
+    color,
+  }
+}
+
+function getExportLegendItems({
+  container,
+  showLegend,
+}: {
+  container: HTMLDivElement | null
+  showLegend: boolean
+}) {
+  if (!container || !showLegend) return []
+
+  return [...container.querySelectorAll<HTMLElement>('[class$="-swatch"]')]
+    .map((swatch): ExportLegendItem | undefined => {
+      const label = swatch.textContent?.trim()
+      const swatchSvg = swatch.querySelector<SVGElement>('svg')
+      const color =
+        swatchSvg?.getAttribute('fill') ||
+        swatchSvg?.style.fill ||
+        swatch.querySelector<SVGElement>('[fill]')?.getAttribute('fill')
+
+      if (!label || !color || color === 'none') return undefined
+
+      return { color, label }
+    })
+    .filter((item): item is ExportLegendItem => item !== undefined)
+}
+
+function getEstimatedLegendLabelWidth(label: string) {
+  return Math.ceil(label.length * 5.8)
+}
+
+function getLegendLayout({
+  items,
+  width,
+}: {
+  items: Array<ExportLegendItem>
+  width: number
+}) {
+  const maxRowWidth = Math.max(1, width - 24)
+  const itemGap = 12
+  const rows: Array<ExportLegendLayoutRow> = []
+  let currentRow: ExportLegendLayoutRow = { items: [], width: 0 }
+
+  items.forEach((item) => {
+    const itemWidth = 10 + 5 + getEstimatedLegendLabelWidth(item.label)
+    const nextWidth = currentRow.items.length
+      ? currentRow.width + itemGap + itemWidth
+      : itemWidth
+
+    if (currentRow.items.length && nextWidth > maxRowWidth) {
+      rows.push(currentRow)
+      currentRow = { items: [{ item, width: itemWidth }], width: itemWidth }
+      return
+    }
+
+    currentRow.items.push({ item, width: itemWidth })
+    currentRow.width = nextWidth
+  })
+
+  if (currentRow.items.length) {
+    rows.push(currentRow)
+  }
+
+  return {
+    height: rows.length ? 12 + rows.length * 14 + (rows.length - 1) * 5 + 8 : 0,
+    itemGap,
+    maxRowWidth,
+    rows,
+  }
+}
+
+function appendExportLegend({
+  exportSvg,
+  exportStyle,
+  items,
+  plotHeight,
+  width,
+}: {
+  exportSvg: SVGSVGElement
+  exportStyle: ExportStyle
+  items: Array<ExportLegendItem>
+  plotHeight: number
+  width: number
+}) {
+  if (!items.length) return 0
+
+  const ownerDocument = exportSvg.ownerDocument
+  const layout = getLegendLayout({ items, width })
+  const group = ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'g')
+  group.setAttribute('font-family', 'system-ui, sans-serif')
+  group.setAttribute('font-size', '10')
+  group.setAttribute('fill', exportStyle.color)
+
+  let y = plotHeight + 12
+
+  layout.rows.forEach((row) => {
+    let x = 12 + Math.max(0, (layout.maxRowWidth - row.width) / 2)
+
+    row.items.forEach(({ item, width: itemWidth }, index) => {
+      if (index > 0) {
+        x += layout.itemGap
+      }
+
+      const rect = ownerDocument.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'rect',
+      )
+      rect.setAttribute('x', `${x}`)
+      rect.setAttribute('y', `${y + 2}`)
+      rect.setAttribute('width', '10')
+      rect.setAttribute('height', '10')
+      rect.setAttribute('fill', item.color)
+      group.append(rect)
+
+      const text = ownerDocument.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'text',
+      )
+      text.setAttribute('x', `${x + 15}`)
+      text.setAttribute('y', `${y + 7}`)
+      text.setAttribute('dominant-baseline', 'central')
+      text.textContent = item.label
+      group.append(text)
+
+      x += itemWidth
+    })
+
+    y += 19
+  })
+
+  exportSvg.append(group)
+  return layout.height
+}
+
+function serializeSvg({
+  exportStyle,
+  legendItems,
+  svg,
+}: {
+  exportStyle: ExportStyle
+  legendItems: Array<ExportLegendItem>
+  svg: SVGSVGElement
+}): SerializedExportSvg | undefined {
+  const clone = svg.cloneNode(true)
+  if (!(clone instanceof SVGSVGElement)) return undefined
+
+  const { height, width } = getSvgDimensions(svg)
+  const ownerDocument = svg.ownerDocument
+  const exportSvg = ownerDocument.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'svg',
+  )
+  const legendHeight = legendItems.length
+    ? getLegendLayout({ items: legendItems, width }).height
+    : 0
+  const exportHeight = height + legendHeight
+  const background = ownerDocument.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'rect',
+  )
+
+  exportSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+  exportSvg.setAttribute('width', `${width}`)
+  exportSvg.setAttribute('height', `${exportHeight}`)
+  exportSvg.setAttribute('viewBox', `0 0 ${width} ${exportHeight}`)
+  exportSvg.style.backgroundColor =
+    exportStyle.backgroundMode === 'opaque'
+      ? exportStyle.backgroundColor
+      : 'transparent'
+  exportSvg.style.color = exportStyle.color
+
+  if (exportStyle.backgroundMode === 'opaque') {
+    background.setAttribute('width', '100%')
+    background.setAttribute('height', '100%')
+    background.setAttribute('fill', exportStyle.backgroundColor)
+    exportSvg.append(background)
+  }
+
+  clone.setAttribute('x', '0')
+  clone.setAttribute('y', '0')
+  clone.setAttribute('width', `${width}`)
+  clone.setAttribute('height', `${height}`)
+  clone.style.backgroundColor = 'transparent'
+  clone.style.color = exportStyle.color
+  exportSvg.append(clone)
+
+  appendExportLegend({
+    exportSvg,
+    exportStyle,
+    items: legendItems,
+    plotHeight: height,
+    width,
+  })
+
+  return {
+    height: exportHeight,
+    source: new XMLSerializer().serializeToString(exportSvg),
+    width,
+  }
+}
+
+function downloadBlob({
+  blob,
+  fileName,
+  ownerDocument,
+}: {
+  blob: Blob
+  fileName: string
+  ownerDocument: Document
+}) {
+  const url = URL.createObjectURL(blob)
+  const anchor = ownerDocument.createElement('a')
+  anchor.href = url
+  anchor.download = fileName
+  anchor.style.display = 'none'
+  ownerDocument.body.append(anchor)
+  anchor.click()
+  anchor.remove()
+
+  const defaultView = ownerDocument.defaultView
+  if (defaultView) {
+    defaultView.setTimeout(() => URL.revokeObjectURL(url), 0)
+  } else {
+    URL.revokeObjectURL(url)
+  }
+}
+
+function canvasToBlob({
+  canvas,
+  type,
+}: {
+  canvas: HTMLCanvasElement
+  type: 'image/png' | 'image/jpeg'
+}) {
+  return new Promise<Blob | undefined>((resolve) => {
+    canvas.toBlob(
+      (blob) => {
+        resolve(blob ?? undefined)
+      },
+      type,
+      0.92,
+    )
+  })
+}
+
+function waitForMs(defaultView: Window, durationMs: number) {
+  return new Promise<void>((resolve) => {
+    defaultView.setTimeout(resolve, durationMs)
+  })
+}
+
+function getAnimatedExportFrameDelayMs(playbackIntervalMs: number | undefined) {
+  const interval = playbackIntervalMs ?? animatedExportMaxDelayMs
+
+  return Math.max(
+    animatedExportMinDelayMs,
+    Math.min(interval, animatedExportMaxDelayMs),
+  )
+}
+
+function getAnimatedExportBucketOffsets(bounds: LatestBucketOffsetBounds) {
+  const bucketCount = bounds.maxOffset - bounds.minOffset + 1
+  if (bucketCount <= 1) return [bounds.maxOffset]
+  if (bucketCount <= animatedExportMaxFrames) {
+    return d3.range(bounds.minOffset, bounds.maxOffset + 1)
+  }
+
+  const offsets: Array<number> = []
+  const seenOffsets = new Set<number>()
+
+  for (let index = 0; index < animatedExportMaxFrames; index++) {
+    const progress = index / (animatedExportMaxFrames - 1)
+    const offset = Math.round(
+      bounds.minOffset + progress * (bounds.maxOffset - bounds.minOffset),
+    )
+
+    if (!seenOffsets.has(offset)) {
+      seenOffsets.add(offset)
+      offsets.push(offset)
+    }
+  }
+
+  return offsets
+}
+
+async function drawSerializedSvgToCanvas({
+  canvas,
+  exportStyle,
+  ownerDocument,
+  serializedSvg,
+}: {
+  canvas: HTMLCanvasElement
+  exportStyle: ExportStyle
+  ownerDocument: Document
+  serializedSvg: SerializedExportSvg
+}) {
+  const defaultView = ownerDocument.defaultView
+  const ImageConstructor = defaultView?.Image
+  if (!ImageConstructor) return undefined
+
+  if (
+    canvas.width !== serializedSvg.width ||
+    canvas.height !== serializedSvg.height
+  ) {
+    canvas.width = serializedSvg.width
+    canvas.height = serializedSvg.height
+  }
+
+  const context = canvas.getContext('2d')
+  if (!context) return undefined
+
+  const image = new ImageConstructor()
+  const sourceBlob = new Blob([serializedSvg.source], {
+    type: 'image/svg+xml;charset=utf-8',
+  })
+  const sourceUrl = URL.createObjectURL(sourceBlob)
+
+  try {
+    const loaded = await new Promise<boolean>((resolve) => {
+      image.onload = () => resolve(true)
+      image.onerror = () => resolve(false)
+      image.src = sourceUrl
+    })
+    if (!loaded) return undefined
+
+    context.setTransform(1, 0, 0, 1, 0, 0)
+    context.clearRect(0, 0, serializedSvg.width, serializedSvg.height)
+    if (exportStyle.backgroundMode === 'opaque') {
+      context.fillStyle = exportStyle.backgroundColor
+      context.fillRect(0, 0, serializedSvg.width, serializedSvg.height)
+    }
+    context.drawImage(image, 0, 0, serializedSvg.width, serializedSvg.height)
+
+    return context
+  } finally {
+    URL.revokeObjectURL(sourceUrl)
+  }
+}
+
+async function rasterizeSvg({
+  exportStyle,
+  legendItems,
+  svg,
+  type,
+}: {
+  exportStyle: ExportStyle
+  legendItems: Array<ExportLegendItem>
+  svg: SVGSVGElement
+  type: 'image/png' | 'image/jpeg'
+}) {
+  const serializedSvg = serializeSvg({ exportStyle, legendItems, svg })
+  if (!serializedSvg) return undefined
+
+  const ownerDocument = svg.ownerDocument
+  const defaultView = ownerDocument.defaultView
+  const ImageConstructor = defaultView?.Image
+  if (!ImageConstructor) return undefined
+
+  const image = new ImageConstructor()
+  const sourceBlob = new Blob([serializedSvg.source], {
+    type: 'image/svg+xml;charset=utf-8',
+  })
+  const sourceUrl = URL.createObjectURL(sourceBlob)
+
+  try {
+    const loaded = await new Promise<boolean>((resolve) => {
+      image.onload = () => resolve(true)
+      image.onerror = () => resolve(false)
+      image.src = sourceUrl
+    })
+    if (!loaded) return undefined
+
+    const scale = defaultView.devicePixelRatio || 1
+    const canvas = ownerDocument.createElement('canvas')
+    canvas.width = serializedSvg.width * scale
+    canvas.height = serializedSvg.height * scale
+
+    const context = canvas.getContext('2d')
+    if (!context) return undefined
+
+    context.scale(scale, scale)
+    if (exportStyle.backgroundMode === 'opaque') {
+      context.fillStyle = exportStyle.backgroundColor
+      context.fillRect(0, 0, serializedSvg.width, serializedSvg.height)
+    }
+    context.drawImage(image, 0, 0, serializedSvg.width, serializedSvg.height)
+
+    return await canvasToBlob({ canvas, type })
+  } finally {
+    URL.revokeObjectURL(sourceUrl)
+  }
+}
+
+function getSupportedWebmMimeType(defaultView: Window) {
+  const MediaRecorderConstructor = defaultView.MediaRecorder
+  if (!MediaRecorderConstructor) return undefined
+
+  return (
+    ['video/webm;codecs=vp9', 'video/webm;codecs=vp8', 'video/webm'].find(
+      (mimeType) => MediaRecorderConstructor.isTypeSupported(mimeType),
+    ) ?? undefined
+  )
+}
+
+async function encodeGifFrames({
+  exportStyle,
+  frames,
+  ownerDocument,
+}: {
+  exportStyle: ExportStyle
+  frames: Array<SerializedAnimationFrame>
+  ownerDocument: Document
+}) {
+  if (!frames.length) return undefined
+
+  const canvas = ownerDocument.createElement('canvas')
+  const gif = GIFEncoder()
+
+  for (const frame of frames) {
+    const context = await drawSerializedSvgToCanvas({
+      canvas,
+      exportStyle,
+      ownerDocument,
+      serializedSvg: frame,
+    })
+    if (!context) return undefined
+
+    const imageData = context.getImageData(0, 0, frame.width, frame.height)
+    const palette = quantize(imageData.data, 256)
+    const index = applyPalette(imageData.data, palette)
+    gif.writeFrame(index, frame.width, frame.height, {
+      delay: frame.delayMs,
+      palette,
+    })
+  }
+
+  gif.finish()
+  const bytes = gif.bytes()
+  const buffer = new ArrayBuffer(bytes.byteLength)
+  new Uint8Array(buffer).set(bytes)
+
+  return new Blob([buffer], { type: 'image/gif' })
+}
+
+async function encodeWebmFrames({
+  exportStyle,
+  frames,
+  ownerDocument,
+}: {
+  exportStyle: ExportStyle
+  frames: Array<SerializedAnimationFrame>
+  ownerDocument: Document
+}) {
+  const defaultView = ownerDocument.defaultView
+  if (!defaultView || !frames.length) return undefined
+
+  const mimeType = getSupportedWebmMimeType(defaultView)
+  const MediaRecorderConstructor = defaultView.MediaRecorder
+  if (!mimeType || !MediaRecorderConstructor) return undefined
+
+  const canvas = ownerDocument.createElement('canvas')
+  const firstFrame = frames[0]
+  if (!firstFrame) return undefined
+  if (typeof canvas.captureStream !== 'function') return undefined
+
+  canvas.width = firstFrame.width
+  canvas.height = firstFrame.height
+
+  const stream = canvas.captureStream(
+    1000 / Math.max(animatedExportMinDelayMs, firstFrame.delayMs),
+  )
+  const recorder = new MediaRecorderConstructor(stream, { mimeType })
+  const chunks: Array<Blob> = []
+  const stopped = new Promise<Blob | undefined>((resolve) => {
+    recorder.ondataavailable = (event) => {
+      if (event.data.size > 0) {
+        chunks.push(event.data)
+      }
+    }
+    recorder.onerror = () => resolve(undefined)
+    recorder.onstop = () => {
+      resolve(chunks.length ? new Blob(chunks, { type: mimeType }) : undefined)
+    }
+  })
+  const videoTrack = stream.getVideoTracks()[0]
+  const requestFrame = videoTrack
+    ? Reflect.get(videoTrack, 'requestFrame')
+    : undefined
+  let failed = false
+
+  recorder.start()
+
+  try {
+    for (const frame of frames) {
+      const context = await drawSerializedSvgToCanvas({
+        canvas,
+        exportStyle,
+        ownerDocument,
+        serializedSvg: frame,
+      })
+      if (!context) {
+        failed = true
+        break
+      }
+
+      if (typeof requestFrame === 'function' && videoTrack) {
+        requestFrame.call(videoTrack)
+      }
+      await waitForMs(defaultView, frame.delayMs)
+    }
+  } finally {
+    if (recorder.state !== 'inactive') {
+      recorder.stop()
+    }
+  }
+
+  const blob = await stopped
+  stream.getTracks().forEach((track) => track.stop())
+
+  return failed ? undefined : blob
+}
+
+function getSnapshotAnimationFrames({
+  barOrientation,
+  barSort,
+  binType,
+  bucketOffsetBounds,
+  chartType,
+  exportStyle,
+  gradientIdPrefix,
+  height,
+  legendItems,
+  packages,
+  playbackIntervalMs,
+  queryData,
+  width,
+}: {
+  barOrientation: BarOrientation
+  barSort: LatestBarSort
+  binType: BinType
+  bucketOffsetBounds: LatestBucketOffsetBounds
+  chartType: ChartType
+  exportStyle: ExportStyle
+  gradientIdPrefix: string
+  height: number
+  legendItems: Array<ExportLegendItem>
+  packages: Array<PackageGroup>
+  playbackIntervalMs: number | undefined
+  queryData: NpmQueryData
+  width: number
+}) {
+  const frameDelayMs = getAnimatedExportFrameDelayMs(playbackIntervalMs)
+
+  return getAnimatedExportBucketOffsets(bucketOffsetBounds)
+    .map((bucketOffset): SerializedAnimationFrame | undefined => {
+      const bucketQueryData = selectLatestBucketQueryData({
+        queryData,
+        binType,
+        bucketOffset,
+      })
+      if (!bucketQueryData) return undefined
+
+      const plot = createLatestBarExportPlot({
+        barOrientation,
+        barSort,
+        binType,
+        chartType,
+        gradientIdPrefix: `${gradientIdPrefix}-frame-${bucketOffset}`,
+        height,
+        packages,
+        queryData: bucketQueryData,
+        width,
+      })
+      const svg = getPlotSvg(plot)
+      const serializedSvg = svg
+        ? serializeSvg({ exportStyle, legendItems, svg })
+        : undefined
+      plot.remove()
+      if (!serializedSvg) return undefined
+
+      return {
+        ...serializedSvg,
+        delayMs: frameDelayMs,
+      }
+    })
+    .filter((frame): frame is SerializedAnimationFrame => frame !== undefined)
+}
+
+function renderPlotLegend({
+  container,
+  plot,
+  showLegend,
+}: {
+  container: HTMLDivElement | null
+  plot: ReturnType<typeof Plot.plot> | null
+  showLegend: boolean
+}) {
+  if (!container) return
+
+  container.replaceChildren()
+
+  if (!showLegend || !plot) return
+
+  const legend = plot.legend('color', { legend: 'swatches' })
+  if (legend) {
+    container.append(legend)
+  }
+}
+
+function ChartActions({
+  canExportAnimation,
+  disabled,
+  embedConfig,
+  exportingFormat,
+  onExport,
+  onToggleLegend,
+  showLegend,
+}: {
+  canExportAnimation: boolean
+  disabled: boolean
+  embedConfig?: NpmStatsChartEmbedConfig
+  exportingFormat: ChartExportFormat | null
+  onExport: (format: ChartExportFormat) => void
+  onToggleLegend: () => void
+  showLegend: boolean
+}) {
+  const buttonStyles = twMerge(
+    chartActionButtonStyles,
+    disabled && 'cursor-not-allowed opacity-50',
+  )
+
+  return (
+    <div className="flex items-center gap-1">
+      <DropdownMenu>
+        <Tooltip
+          content={
+            exportingFormat
+              ? `Exporting ${getExportFileName(exportingFormat)}`
+              : disabled
+                ? 'Chart export available after render'
+                : 'Export chart'
+          }
+        >
+          <DropdownMenuTrigger asChild>
+            <button
+              aria-label="Export chart"
+              className={buttonStyles}
+              disabled={disabled}
+              type="button"
+            >
+              <Download className="size-3" />
+            </button>
+          </DropdownMenuTrigger>
+        </Tooltip>
+        <DropdownMenuContent
+          className={chartActionDropdownContentStyles}
+          collisionPadding={8}
+          sideOffset={5}
+        >
+          <div className="mb-1 flex items-center justify-between px-0.5 text-xs font-medium">
+            <span>Export</span>
+          </div>
+          {chartExportOptions
+            .filter(
+              ({ value }) =>
+                canExportAnimation || !isAnimatedExportFormat(value),
+            )
+            .map(({ label, value }) => (
+              <DropdownMenuItem
+                className={chartActionDropdownItemStyles}
+                disabled={disabled}
+                key={value}
+                onSelect={() => onExport(value)}
+              >
+                {label}
+              </DropdownMenuItem>
+            ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Tooltip
+        content={
+          disabled
+            ? 'Plot legend available after render'
+            : showLegend
+              ? 'Hide Plot legend'
+              : 'Show Plot legend'
+        }
+      >
+        <button
+          aria-label={showLegend ? 'Hide Plot legend' : 'Show Plot legend'}
+          aria-pressed={showLegend}
+          className={twMerge(
+            buttonStyles,
+            showLegend && 'bg-blue-500/10 text-blue-500',
+          )}
+          disabled={disabled}
+          onClick={onToggleLegend}
+          type="button"
+        >
+          <List className="size-3" />
+        </button>
+      </Tooltip>
+      {embedConfig ? <EmbedChartAction embedConfig={embedConfig} /> : null}
+    </div>
+  )
+}
+
+function getAbsoluteEmbedUrl(url: string) {
+  const base =
+    typeof window === 'undefined'
+      ? 'https://tanstack.com'
+      : window.location.origin
+
+  return new URL(url, base).toString()
+}
+
+function CopyButton({
+  copied,
+  label,
+  onCopy,
+}: {
+  copied: boolean
+  label: string
+  onCopy: () => void
+}) {
+  return (
+    <button
+      className="flex shrink-0 items-center gap-1 rounded bg-gray-500/10 px-2 py-1 text-[11px] font-medium text-gray-600 hover:bg-gray-500/20 hover:text-blue-500 dark:text-gray-300 dark:hover:text-gray-100"
+      onClick={onCopy}
+      type="button"
+    >
+      {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+      {copied ? 'Copied' : label}
+    </button>
+  )
+}
+
+function EmbedOption({
+  checked,
+  children,
+  disabled,
+  onCheckedChange,
+}: {
+  checked: boolean
+  children: React.ReactNode
+  disabled?: boolean
+  onCheckedChange: (checked: boolean) => void
+}) {
+  return (
+    <label
+      className={twMerge(
+        'flex items-center gap-2 text-xs text-gray-700 dark:text-gray-200',
+        disabled && 'cursor-not-allowed opacity-50',
+      )}
+    >
+      <input
+        checked={checked}
+        className="size-3.5 accent-blue-500"
+        disabled={disabled}
+        onChange={(event) => onCheckedChange(event.currentTarget.checked)}
+        type="checkbox"
+      />
+      <span>{children}</span>
+    </label>
+  )
+}
+
+function EmbedChartAction({
+  embedConfig,
+}: {
+  embedConfig: NpmStatsChartEmbedConfig
+}) {
+  const [showLegend, setShowLegend] = React.useState(true)
+  const [includeTimelineRange, setIncludeTimelineRange] = React.useState(
+    embedConfig.hasTimelineRange,
+  )
+  const [lockWidth, setLockWidth] = React.useState(false)
+  const [iframeHeight, setIframeHeight] = React.useState(420)
+  const [copiedTarget, setCopiedTarget] = React.useState<
+    'iframe' | 'url' | null
+  >(null)
+
+  React.useEffect(() => {
+    if (!embedConfig.hasTimelineRange) {
+      setIncludeTimelineRange(false)
+    }
+  }, [embedConfig.hasTimelineRange])
+
+  React.useEffect(() => {
+    if (!embedConfig.hasWidth) {
+      setLockWidth(false)
+    }
+  }, [embedConfig.hasWidth])
 
-// Binning options configuration
-export const binningOptions = [
-  {
-    label: 'Yearly',
-    value: 'yearly',
-    single: 'year',
-    bin: d3.utcYear,
-  },
-  {
-    label: 'Monthly',
-    value: 'monthly',
-    single: 'month',
-    bin: d3.utcMonth,
-  },
-  {
-    label: 'Weekly',
-    value: 'weekly',
-    single: 'week',
-    bin: d3.utcWeek,
-  },
-  {
-    label: 'Daily',
-    value: 'daily',
-    single: 'day',
-    bin: d3.utcDay,
-  },
-] as const
-
-export const binningOptionsByType = binningOptions.reduce(
-  (acc, option) => {
-    acc[option.value] = option
-    return acc
-  },
-  {} as Record<BinType, (typeof binningOptions)[number]>,
-)
-
-export const timeRanges = [
-  { value: '7-days', label: '7 Days' },
-  { value: '30-days', label: '30 Days' },
-  { value: '90-days', label: '90 Days' },
-  { value: '180-days', label: '6 Months' },
-  { value: '365-days', label: '1 Year' },
-  { value: '730-days', label: '2 Years' },
-  { value: '1825-days', label: '5 Years' },
-  { value: 'all-time', label: 'All Time' },
-] as const
-
-export const defaultRangeBinTypes: Record<TimeRange, BinType> = {
-  '7-days': 'daily',
-  '30-days': 'daily',
-  '90-days': 'weekly',
-  '180-days': 'weekly',
-  '365-days': 'weekly',
-  '730-days': 'monthly',
-  '1825-days': 'monthly',
-  'all-time': 'monthly',
-}
-
-// Get or assign colors for packages
-export function getPackageColor(
-  packageName: string,
-  packages: PackageGroup[],
-): string {
-  // Find the package group that contains this package
-  const packageInfo = packages.find((pkg) =>
-    pkg.packages.some((p) => p.name === packageName),
+  const embedUrl = getAbsoluteEmbedUrl(
+    embedConfig.buildUrl({
+      includeTimelineRange,
+      lockWidth,
+      showLegend,
+    }),
   )
-  if (packageInfo?.color) {
-    return packageInfo.color
-  }
+  const iframeCode = `<iframe src="${embedUrl}" title="TanStack NPM Stats chart" loading="lazy" style="width:100%;height:${iframeHeight}px;border:0;"></iframe>`
 
-  // Otherwise, assign a default color based on the package's position
-  const packageIndex = packages.findIndex((pkg) =>
-    pkg.packages.some((p) => p.name === packageName),
+  const copyText = React.useCallback(
+    async (target: 'iframe' | 'url', text: string) => {
+      await navigator.clipboard.writeText(text)
+      setCopiedTarget(target)
+      window.setTimeout(() => {
+        setCopiedTarget((currentTarget) =>
+          currentTarget === target ? null : currentTarget,
+        )
+      }, 1500)
+    },
+    [],
   )
-  return defaultColors[packageIndex % defaultColors.length]
-}
 
-// Custom number formatter for more precise control
-export const formatNumber = (num: number) => {
-  if (num >= 1_000_000) {
-    return `${(num / 1_000_000).toFixed(1)}M`
-  }
-  if (num >= 1_000) {
-    return `${(num / 1_000).toFixed(1)}k`
-  }
-  return num.toString()
+  return (
+    <DropdownMenu>
+      <Tooltip content="Embed chart">
+        <DropdownMenuTrigger asChild>
+          <button
+            aria-label="Embed chart"
+            className={chartActionButtonStyles}
+            type="button"
+          >
+            <Code2 className="size-3" />
+          </button>
+        </DropdownMenuTrigger>
+      </Tooltip>
+      <DropdownMenuContent
+        align="end"
+        className="z-50 w-[min(420px,calc(100vw-2rem))] rounded-md bg-white p-3 text-gray-900 shadow-lg dark:bg-gray-800 dark:text-gray-100"
+        collisionPadding={8}
+        sideOffset={5}
+      >
+        <div className="space-y-3">
+          <div className="flex items-center justify-between gap-3">
+            <div className="text-xs font-medium">Embed chart</div>
+            <label className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300">
+              <span>Iframe height</span>
+              <input
+                className="w-16 rounded border border-gray-500/20 bg-gray-50 px-1.5 py-1 text-right font-mono text-[11px] outline-none focus:border-blue-500 dark:bg-gray-900"
+                max={1200}
+                min={240}
+                onChange={(event) => {
+                  const nextHeight = Number(event.currentTarget.value)
+                  if (!Number.isFinite(nextHeight)) return
+                  setIframeHeight(Math.max(240, Math.min(1200, nextHeight)))
+                }}
+                type="number"
+                value={iframeHeight}
+              />
+            </label>
+          </div>
+
+          <div className="grid gap-1.5">
+            <EmbedOption checked={showLegend} onCheckedChange={setShowLegend}>
+              Show legend by default
+            </EmbedOption>
+            <EmbedOption
+              checked={includeTimelineRange}
+              disabled={!embedConfig.hasTimelineRange}
+              onCheckedChange={setIncludeTimelineRange}
+            >
+              Include current timeline zoom
+            </EmbedOption>
+            <EmbedOption
+              checked={lockWidth}
+              disabled={!embedConfig.hasWidth}
+              onCheckedChange={setLockWidth}
+            >
+              Lock current chart width
+            </EmbedOption>
+          </div>
+
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-[11px] font-medium text-gray-500">URL</span>
+              <CopyButton
+                copied={copiedTarget === 'url'}
+                label="Copy URL"
+                onCopy={() => {
+                  void copyText('url', embedUrl)
+                }}
+              />
+            </div>
+            <input
+              className={chartEmbedInputStyles}
+              readOnly
+              value={embedUrl}
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-[11px] font-medium text-gray-500">
+                Iframe
+              </span>
+              <CopyButton
+                copied={copiedTarget === 'iframe'}
+                label="Copy iframe"
+                onCopy={() => {
+                  void copyText('iframe', iframeCode)
+                }}
+              />
+            </div>
+            <textarea
+              className={twMerge(chartEmbedInputStyles, 'min-h-20 resize-none')}
+              readOnly
+              value={iframeCode}
+            />
+          </div>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
 }
 
-// Check if a binning option is valid for a time range
-export function isBinningOptionValidForRange(
-  range: TimeRange,
-  binType: BinType,
-): boolean {
-  switch (range) {
-    case '7-days':
-    case '30-days':
-      return binType === 'daily'
-    case '90-days':
-    case '180-days':
-      return (
-        binType === 'daily' || binType === 'weekly' || binType === 'monthly'
+function useElementWidth() {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [width, setWidth] = React.useState(0)
+
+  React.useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const setMeasuredWidth = (nextWidth: number) => {
+      setWidth((previousWidth) =>
+        previousWidth === nextWidth ? previousWidth : nextWidth,
       )
-    case '365-days':
-      return (
-        binType === 'daily' || binType === 'weekly' || binType === 'monthly'
+    }
+
+    const updateWidth = () => {
+      setMeasuredWidth(Math.round(container.getBoundingClientRect().width))
+    }
+
+    updateWidth()
+
+    const ownerWindow = container.ownerDocument.defaultView
+    if (!ownerWindow?.ResizeObserver) {
+      ownerWindow?.addEventListener('resize', updateWidth)
+      return () => {
+        ownerWindow?.removeEventListener('resize', updateWidth)
+      }
+    }
+
+    const resizeObserver = new ownerWindow.ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+
+      setMeasuredWidth(Math.round(entry.contentRect.width))
+    })
+
+    resizeObserver.observe(container)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+
+  return { containerRef, width }
+}
+
+function useMeasuredElementHeight<T extends HTMLElement>() {
+  const [element, setElement] = React.useState<T | null>(null)
+  const [height, setHeight] = React.useState(0)
+
+  const ref = React.useCallback((nextElement: T | null) => {
+    setElement(nextElement)
+  }, [])
+
+  React.useEffect(() => {
+    if (!element) {
+      setHeight(0)
+      return
+    }
+
+    const setMeasuredHeight = (nextHeight: number) => {
+      setHeight((previousHeight) =>
+        previousHeight === nextHeight ? previousHeight : nextHeight,
       )
-    case '730-days':
-    case '1825-days':
-    case 'all-time':
-      return true
+    }
+
+    const updateHeight = () => {
+      setMeasuredHeight(Math.ceil(element.getBoundingClientRect().height))
+    }
+
+    updateHeight()
+
+    const ownerWindow = element.ownerDocument.defaultView
+    if (!ownerWindow?.ResizeObserver) {
+      ownerWindow?.addEventListener('resize', updateHeight)
+      return () => {
+        ownerWindow?.removeEventListener('resize', updateHeight)
+      }
+    }
+
+    const resizeObserver = new ownerWindow.ResizeObserver(updateHeight)
+    resizeObserver.observe(element)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [element])
+
+  return { height, ref }
+}
+
+function TimelineRangeScrubber({
+  dates,
+  endIndex,
+  marginLeft,
+  marginRight,
+  onRangeChange,
+  startIndex,
+}: TimelineRangeScrubberProps) {
+  const scrubberRef = React.useRef<HTMLDivElement>(null)
+  const [dragState, setDragState] =
+    React.useState<TimelineScrubberDragState | null>(null)
+  const [panState, setPanState] =
+    React.useState<TimelineScrubberPanState | null>(null)
+  const maxIndex = dates.length - 1
+  if (maxIndex < 1) return null
+
+  const safeStartIndex = Math.min(
+    clampTimelineIndex(startIndex, maxIndex),
+    maxIndex - 1,
+  )
+  const safeEndIndex = Math.max(
+    clampTimelineIndex(endIndex, maxIndex),
+    safeStartIndex + 1,
+  )
+  const displayStartIndex = dragState
+    ? Math.min(dragState.anchorIndex, dragState.focusIndex)
+    : safeStartIndex
+  const displayEndIndex = dragState
+    ? Math.max(dragState.anchorIndex, dragState.focusIndex)
+    : safeEndIndex
+  const startPercent = (displayStartIndex / maxIndex) * 100
+  const endPercent = (displayEndIndex / maxIndex) * 100
+  const middlePercent = (startPercent + endPercent) / 2
+  const startLabel = formatTimelineScrubberDate(dates[safeStartIndex])
+  const endLabel = formatTimelineScrubberDate(dates[safeEndIndex])
+  const isZoomed = safeStartIndex > 0 || safeEndIndex < maxIndex
+
+  const handleStartChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const nextStartIndex = Math.min(
+      Number(event.currentTarget.value),
+      safeEndIndex - 1,
+    )
+    onRangeChange(nextStartIndex, safeEndIndex)
+  }
+
+  const handleEndChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const nextEndIndex = Math.max(
+      Number(event.currentTarget.value),
+      safeStartIndex + 1,
+    )
+    onRangeChange(safeStartIndex, nextEndIndex)
+  }
+  const handleSelectionPointerDown = (
+    event: React.PointerEvent<HTMLDivElement>,
+  ) => {
+    if (event.button !== 0 || event.target instanceof HTMLInputElement) return
+
+    event.preventDefault()
+    const index = getTimelineIndexFromPointer({
+      clientX: event.clientX,
+      element: event.currentTarget,
+      maxIndex,
+    })
+
+    event.currentTarget.setPointerCapture(event.pointerId)
+    setDragState({ anchorIndex: index, focusIndex: index })
+  }
+  const handleSelectionPointerMove = (
+    event: React.PointerEvent<HTMLDivElement>,
+  ) => {
+    if (!dragState || panState) return
+
+    const focusIndex = getTimelineIndexFromPointer({
+      clientX: event.clientX,
+      element: event.currentTarget,
+      maxIndex,
+    })
+
+    setDragState({ ...dragState, focusIndex })
+  }
+  const handleSelectionPointerUp = (
+    event: React.PointerEvent<HTMLDivElement>,
+  ) => {
+    if (!dragState || panState) return
+
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId)
+    }
+
+    const focusIndex = getTimelineIndexFromPointer({
+      clientX: event.clientX,
+      element: event.currentTarget,
+      maxIndex,
+    })
+    const start = Math.min(dragState.anchorIndex, focusIndex)
+    const end = Math.max(dragState.anchorIndex, focusIndex)
+    setDragState(null)
+
+    if (start === end) return
+
+    onRangeChange(start, end)
+  }
+  const handleSelectionPointerCancel = (
+    event: React.PointerEvent<HTMLDivElement>,
+  ) => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId)
+    }
+    setDragState(null)
+    setPanState(null)
+  }
+  const handleSelectionDoubleClick = (
+    event: React.MouseEvent<HTMLDivElement>,
+  ) => {
+    event.preventDefault()
+    setDragState(null)
+    setPanState(null)
+    onRangeChange(0, maxIndex)
+  }
+  const handlePanPointerDown = (
+    event: React.PointerEvent<HTMLButtonElement>,
+  ) => {
+    const scrubber = scrubberRef.current
+    if (event.button !== 0 || !scrubber) return
+
+    event.preventDefault()
+    event.stopPropagation()
+    const anchorIndex = getTimelineIndexFromPointer({
+      clientX: event.clientX,
+      element: scrubber,
+      maxIndex,
+    })
+
+    event.currentTarget.setPointerCapture(event.pointerId)
+    setPanState({
+      anchorIndex,
+      endIndex: safeEndIndex,
+      startIndex: safeStartIndex,
+    })
+  }
+  const handlePanPointerMove = (
+    event: React.PointerEvent<HTMLButtonElement>,
+  ) => {
+    const scrubber = scrubberRef.current
+    if (!panState || !scrubber) return
+
+    event.preventDefault()
+    event.stopPropagation()
+    const focusIndex = getTimelineIndexFromPointer({
+      clientX: event.clientX,
+      element: scrubber,
+      maxIndex,
+    })
+    const delta = focusIndex - panState.anchorIndex
+    const rangeSize = panState.endIndex - panState.startIndex
+    const nextStartIndex = Math.max(
+      0,
+      Math.min(panState.startIndex + delta, maxIndex - rangeSize),
+    )
+    const nextEndIndex = nextStartIndex + rangeSize
+
+    if (nextStartIndex !== safeStartIndex || nextEndIndex !== safeEndIndex) {
+      onRangeChange(nextStartIndex, nextEndIndex)
+    }
+  }
+  const handlePanPointerUp = (event: React.PointerEvent<HTMLButtonElement>) => {
+    event.stopPropagation()
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId)
+    }
+    setPanState(null)
+  }
+  const handlePanPointerCancel = (
+    event: React.PointerEvent<HTMLButtonElement>,
+  ) => {
+    event.stopPropagation()
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId)
+    }
+    setPanState(null)
   }
+
+  return (
+    <div
+      className="group relative h-8 cursor-crosshair"
+      onDoubleClick={handleSelectionDoubleClick}
+      onPointerCancel={handleSelectionPointerCancel}
+      onPointerDown={handleSelectionPointerDown}
+      onPointerMove={handleSelectionPointerMove}
+      onPointerUp={handleSelectionPointerUp}
+      ref={scrubberRef}
+      style={{ marginLeft, marginRight }}
+    >
+      <div className="absolute left-0 right-0 top-1/2 h-3 -translate-y-1/2 cursor-crosshair rounded-sm bg-gray-500/10 dark:bg-gray-100/10" />
+      <div
+        className="absolute top-1/2 h-3 -translate-y-1/2 cursor-crosshair rounded-sm bg-gray-500/20 dark:bg-gray-100/20"
+        style={{
+          left: `${startPercent}%`,
+          right: `${100 - endPercent}%`,
+        }}
+      />
+      {isZoomed ? (
+        <button
+          aria-label="Pan timeline zoom range"
+          className={twMerge(
+            'absolute top-1/2 z-10 hidden h-3 w-6 -translate-x-1/2 -translate-y-1/2 cursor-grab items-center justify-center gap-0.5 rounded-sm border border-gray-400 bg-gray-300 text-gray-700 shadow-xs group-hover:flex dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200',
+            panState && 'flex cursor-grabbing',
+          )}
+          onPointerCancel={handlePanPointerCancel}
+          onPointerDown={handlePanPointerDown}
+          onPointerMove={handlePanPointerMove}
+          onPointerUp={handlePanPointerUp}
+          style={{ left: `${middlePercent}%` }}
+          type="button"
+        >
+          <span className="h-2 w-px bg-current opacity-80" />
+          <span className="h-2 w-px bg-current opacity-80" />
+        </button>
+      ) : null}
+      <input
+        aria-label="Timeline zoom start"
+        aria-valuetext={startLabel}
+        className={twMerge(
+          timelineScrubberInputStyles,
+          timelineScrubberStartInputStyles,
+          dragState && 'hidden',
+        )}
+        max={maxIndex}
+        min={0}
+        onChange={handleStartChange}
+        step={1}
+        type="range"
+        value={safeStartIndex}
+      />
+      <input
+        aria-label="Timeline zoom end"
+        aria-valuetext={endLabel}
+        className={twMerge(
+          timelineScrubberInputStyles,
+          timelineScrubberEndInputStyles,
+          dragState && 'hidden',
+        )}
+        max={maxIndex}
+        min={0}
+        onChange={handleEndChange}
+        step={1}
+        type="range"
+        value={safeEndIndex}
+      />
+    </div>
+  )
 }
 
-// Plot figure component
-function PlotFigure({ options }: { options: Parameters<typeof Plot.plot>[0] }) {
+function PlotFigure({
+  barKeys,
+  domain,
+  domainAxis,
+  domainIdentityKey,
+  dataUpdateKey,
+  fillGradients,
+  footer,
+  legendRef,
+  layoutKey,
+  onRenderedChange,
+  options,
+  plotRef,
+  showLegend,
+}: {
+  barKeys?: Array<string>
+  domain?: Array<string>
+  domainAxis?: CategoricalAxis
+  domainIdentityKey?: string
+  dataUpdateKey?: string
+  fillGradients: Array<ChartFillGradient>
+  footer?: React.ReactNode
+  legendRef: { current: HTMLDivElement | null }
+  layoutKey?: string
+  onRenderedChange: (rendered: boolean) => void
+  options: PlotOptions
+  plotRef: { current: ReturnType<typeof Plot.plot> | null }
+  showLegend: boolean
+}) {
   const containerRef = React.useRef<HTMLDivElement>(null)
+  const domainOrderKeyRef = React.useRef<string | undefined>(undefined)
+  const domainIdentityKeyRef = React.useRef<string | undefined>(undefined)
+  const dataUpdateKeyRef = React.useRef<string | undefined>(undefined)
+  const layoutKeyRef = React.useRef<string | undefined>(undefined)
+  const showLegendRef = React.useRef(showLegend)
+  const { height: legendHeight, ref: measuredLegendRef } =
+    useMeasuredElementHeight<HTMLDivElement>()
+  const { height: footerHeight, ref: footerRef } =
+    useMeasuredElementHeight<HTMLDivElement>()
+  const sizeRef = React.useRef<{
+    height: number | undefined
+    width: number | undefined
+  } | null>(null)
+
+  const setLegendRef = React.useCallback(
+    (element: HTMLDivElement | null) => {
+      legendRef.current = element
+      measuredLegendRef(element)
+    },
+    [legendRef, measuredLegendRef],
+  )
+  const plotOptions = React.useMemo(
+    () => ({
+      ...options,
+      height: getPlotContentHeight({
+        reservedHeight: legendHeight + footerHeight,
+        totalHeight: options.height,
+      }),
+    }),
+    [footerHeight, legendHeight, options],
+  )
+
+  React.useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const nextSize = {
+      height: plotOptions.height,
+      width: plotOptions.width,
+    }
+    const previousSize = sizeRef.current
+    const sizeChanged =
+      previousSize !== null &&
+      (previousSize.height !== nextSize.height ||
+        previousSize.width !== nextSize.width)
+
+    const commitPlot = (plot: ReturnType<typeof Plot.plot>) => {
+      container.replaceChildren(plot)
+      plotRef.current = plot
+      onRenderedChange(true)
+      renderPlotLegend({
+        container: legendRef.current,
+        plot,
+        showLegend: showLegendRef.current,
+      })
+      const svg = getPlotSvg(plot)
+      if (svg) {
+        applyChartFillGradients({ gradients: fillGradients, svg })
+      }
+      if (svg && domain && domainAxis && barKeys) {
+        attachCategoricalDomainUpdater({
+          axis: domainAxis,
+          barKeys,
+          domain,
+          svg,
+        })
+      }
+      domainOrderKeyRef.current = domain?.join('\u0000')
+      domainIdentityKeyRef.current = domainIdentityKey
+      dataUpdateKeyRef.current = dataUpdateKey
+      layoutKeyRef.current = layoutKey
+      sizeRef.current = nextSize
+    }
+
+    const replacePlot = () => {
+      commitPlot(Plot.plot(plotOptions))
+    }
+
+    const domainOrderKey = domain?.join('\u0000')
+    const domainOrderChanged = domainOrderKeyRef.current !== domainOrderKey
+    const domainIdentityChanged =
+      domainIdentityKeyRef.current !== domainIdentityKey
+    const dataChanged = dataUpdateKeyRef.current !== dataUpdateKey
+    const layoutChanged = layoutKeyRef.current !== layoutKey
+
+    const plotSvg = getPlotSvg(plotRef.current)
+
+    if (
+      domain &&
+      domainIdentityKey !== undefined &&
+      barKeys &&
+      !sizeChanged &&
+      !layoutChanged &&
+      plotSvg?.updateBarPlot
+    ) {
+      if (domainOrderChanged || domainIdentityChanged || dataChanged) {
+        const nextPlot = Plot.plot(plotOptions)
+        commitPlot(nextPlot)
+        plotSvg.updateBarPlot({
+          nextBarKeys: barKeys,
+          nextDomain: domain,
+          nextPlot,
+        })
+      }
+      return
+    }
+
+    replacePlot()
+  }, [
+    barKeys,
+    dataUpdateKey,
+    domain,
+    domainAxis,
+    domainIdentityKey,
+    fillGradients,
+    legendRef,
+    layoutKey,
+    onRenderedChange,
+    plotOptions,
+    plotRef,
+  ])
 
   React.useEffect(() => {
-    if (!containerRef.current) return
-    const plot = Plot.plot(options)
-    containerRef.current.append(plot)
-    return () => plot.remove()
-  }, [options])
+    showLegendRef.current = showLegend
+    renderPlotLegend({
+      container: legendRef.current,
+      plot: plotRef.current,
+      showLegend,
+    })
+  }, [legendRef, plotRef, showLegend])
+
+  React.useEffect(
+    () => () => {
+      plotRef.current?.remove()
+      plotRef.current = null
+      onRenderedChange(false)
+    },
+    [onRenderedChange, plotRef],
+  )
 
-  return <div ref={containerRef} />
+  return (
+    <div className="relative" style={{ height: options.height }}>
+      <div
+        className={twMerge(
+          'flex justify-center overflow-x-auto px-2 pb-2 text-xs',
+          !showLegend && 'hidden',
+        )}
+        ref={setLegendRef}
+      />
+      <div ref={containerRef} />
+      {footer ? (
+        <div className="flow-root pt-1" ref={footerRef}>
+          {footer}
+        </div>
+      ) : null}
+    </div>
+  )
 }
 
 // Props for the NPMStatsChart component
 export type NPMStatsChartProps = {
+  actionsContainer?: HTMLElement | null
+  embedConfig?: NpmStatsChartEmbedConfig
+  onActionsMountedChange?: (mounted: boolean) => void
   queryData: NpmQueryData | undefined
+  height: number
+  viewMode: ViewMode
+  chartType: ChartType
+  barSort: LatestBarSort
+  barOrientation: BarOrientation
   transform: TransformMode
   binType: BinType
   packages: PackageGroup[]
   range: TimeRange
-  facetX?: FacetValue
-  facetY?: FacetValue
   showDataMode: ShowDataMode
+  normalizeBaseline?: boolean
+  showBaseline?: boolean
+  showLegend?: boolean
+  timelineEnd?: number
+  timelineStart?: number
+  animationBucketOffsetBounds?: LatestBucketOffsetBounds
+  animationFrameIntervalMs?: number
+  animationQueryData?: NpmQueryData
+  onShowLegendChange?: (showLegend: boolean) => void
+  onTimelineRangeChange?: (range: TimelineRangeValue) => void
 }
 
 export function NPMStatsChart({
+  actionsContainer,
+  embedConfig,
+  onActionsMountedChange,
   queryData,
+  height,
+  viewMode,
+  chartType,
+  barSort,
+  barOrientation,
   transform,
   binType,
   packages,
   range,
-  facetX,
-  facetY,
   showDataMode,
+  normalizeBaseline = true,
+  showBaseline = false,
+  showLegend: controlledShowLegend,
+  timelineEnd,
+  timelineStart,
+  animationBucketOffsetBounds,
+  animationFrameIntervalMs,
+  animationQueryData,
+  onShowLegendChange,
+  onTimelineRangeChange,
 }: NPMStatsChartProps) {
-  if (!queryData?.length) return null
+  const { containerRef, width } = useElementWidth()
+  const rawGradientId = React.useId()
+  const gradientIdPrefix = `npm-stats-fill-${rawGradientId.replace(
+    /[^a-zA-Z0-9_-]/g,
+    '',
+  )}`
+  const legendRef = React.useRef<HTMLDivElement>(null)
+  const plotRef = React.useRef<ReturnType<typeof Plot.plot> | null>(null)
+  const [uncontrolledShowLegend, setUncontrolledShowLegend] =
+    React.useState(false)
+  const showLegend = controlledShowLegend ?? uncontrolledShowLegend
+  const showLegendRef = React.useRef(showLegend)
+  const [chartRendered, setChartRendered] = React.useState(false)
+  const [exportingFormat, setExportingFormat] =
+    React.useState<ChartExportFormat | null>(null)
+
+  React.useEffect(() => {
+    showLegendRef.current = showLegend
+  }, [showLegend])
+
+  React.useEffect(() => {
+    if (!actionsContainer) return
+
+    onActionsMountedChange?.(true)
+    return () => {
+      onActionsMountedChange?.(false)
+    }
+  }, [actionsContainer, onActionsMountedChange])
+
+  const handleChartRenderedChange = React.useCallback((rendered: boolean) => {
+    setChartRendered((previousRendered) =>
+      previousRendered === rendered ? previousRendered : rendered,
+    )
+  }, [])
+  const canExportAnimation =
+    viewMode === 'latest' &&
+    !!animationQueryData?.length &&
+    !!animationBucketOffsetBounds &&
+    animationBucketOffsetBounds.minOffset <
+      animationBucketOffsetBounds.maxOffset
+
+  const handleExport = React.useCallback(
+    async (format: ChartExportFormat) => {
+      if (exportingFormat) return
+
+      const svg = getPlotSvg(plotRef.current)
+      if (!svg) return
+
+      setExportingFormat(format)
+
+      try {
+        const exportStyle = getExportStyle({ format, svg })
+        const legendItems = getExportLegendItems({
+          container: legendRef.current,
+          showLegend: showLegendRef.current,
+        })
+
+        if (format === 'svg') {
+          const serializedSvg = serializeSvg({ exportStyle, legendItems, svg })
+          if (!serializedSvg) return
+
+          downloadBlob({
+            blob: new Blob([serializedSvg.source], {
+              type: 'image/svg+xml;charset=utf-8',
+            }),
+            fileName: getExportFileName(format),
+            ownerDocument: svg.ownerDocument,
+          })
+          return
+        }
+
+        if (isAnimatedExportFormat(format)) {
+          if (
+            !canExportAnimation ||
+            !animationQueryData ||
+            !animationBucketOffsetBounds
+          ) {
+            return
+          }
+
+          const frames = getSnapshotAnimationFrames({
+            barOrientation,
+            barSort,
+            binType,
+            bucketOffsetBounds: animationBucketOffsetBounds,
+            chartType,
+            exportStyle,
+            gradientIdPrefix,
+            height,
+            legendItems,
+            packages,
+            playbackIntervalMs: animationFrameIntervalMs,
+            queryData: animationQueryData,
+            width,
+          })
+          const blob =
+            format === 'gif'
+              ? await encodeGifFrames({
+                  exportStyle,
+                  frames,
+                  ownerDocument: svg.ownerDocument,
+                })
+              : await encodeWebmFrames({
+                  exportStyle,
+                  frames,
+                  ownerDocument: svg.ownerDocument,
+                })
+          if (!blob) return
+
+          downloadBlob({
+            blob,
+            fileName: getExportFileName(format),
+            ownerDocument: svg.ownerDocument,
+          })
+          return
+        }
+
+        const blob = await rasterizeSvg({
+          exportStyle,
+          legendItems,
+          svg,
+          type: format === 'png' ? 'image/png' : 'image/jpeg',
+        })
+        if (!blob) return
+
+        downloadBlob({
+          blob,
+          fileName: getExportFileName(format),
+          ownerDocument: svg.ownerDocument,
+        })
+      } finally {
+        setExportingFormat(null)
+      }
+    },
+    [
+      animationBucketOffsetBounds,
+      animationFrameIntervalMs,
+      animationQueryData,
+      barOrientation,
+      barSort,
+      binType,
+      canExportAnimation,
+      chartType,
+      exportingFormat,
+      gradientIdPrefix,
+      height,
+      packages,
+      width,
+    ],
+  )
+
+  const handleToggleLegend = React.useCallback(() => {
+    const nextShowLegend = !showLegend
+
+    if (controlledShowLegend === undefined) {
+      setUncontrolledShowLegend(nextShowLegend)
+    }
+
+    onShowLegendChange?.(nextShowLegend)
+  }, [controlledShowLegend, onShowLegendChange, showLegend])
+
+  const canUseChartActions =
+    chartRendered && !!queryData?.length && width > 0 && !exportingFormat
+  const chartActions = actionsContainer
+    ? createPortal(
+        <ChartActions
+          canExportAnimation={canExportAnimation}
+          disabled={!canUseChartActions}
+          embedConfig={embedConfig}
+          exportingFormat={exportingFormat}
+          onExport={(format) => {
+            void handleExport(format)
+          }}
+          onToggleLegend={handleToggleLegend}
+          showLegend={canUseChartActions && showLegend}
+        />,
+        actionsContainer,
+      )
+    : null
+
+  if (!queryData?.length) {
+    return (
+      <div ref={containerRef} className="w-full" style={{ height }}>
+        {chartActions}
+      </div>
+    )
+  }
 
   const binOption = binningOptionsByType[binType]
   const binUnit = binningOptionsByType[binType].bin
+  const effectiveTransform =
+    viewMode === 'history' && chartType === 'line' ? transform : 'none'
+  const useBaseline = viewMode === 'history'
 
-  const now = d3.utcDay(new Date())
+  const now = getUtcToday()
 
   let startDate = (() => {
+    if (viewMode === 'latest') {
+      const earliestQueryStart = queryData
+        .map((pkg) => getUtcDay(new Date(pkg.start)))
+        .sort((a, b) => a.getTime() - b.getTime())[0]
+      return earliestQueryStart || NPM_STATS_START_DATE
+    }
+
     switch (range) {
-      case '7-days':
-        return d3.utcDay.offset(now, -7)
-      case '30-days':
-        return d3.utcDay.offset(now, -30)
-      case '90-days':
-        return d3.utcDay.offset(now, -90)
-      case '180-days':
-        return d3.utcDay.offset(now, -180)
-      case '365-days':
-        return d3.utcDay.offset(now, -365)
-      case '730-days':
-        return d3.utcDay.offset(now, -730)
-      case '1825-days':
-        return d3.utcDay.offset(now, -1825)
       case 'all-time':
         // Use the actual start date from the query data, or fall back to npm's stats start date
         const earliestActualStartDate = queryData
           .map((pkg) => pkg.actualStartDate)
           .filter((d): d is Date => d !== undefined)
           .sort((a, b) => a.getTime() - b.getTime())[0]
-        return earliestActualStartDate || d3.utcDay(new Date('2015-01-10'))
+        return earliestActualStartDate || NPM_STATS_START_DATE
+      default:
+        return getHistoryStartDate(range, now)
     }
   })()
 
@@ -236,6 +3625,10 @@ export function NPMStatsChart({
   const combinedPackageGroups = queryData.map((queryPackageGroup, index) => {
     // Get the corresponding package group from the packages prop to get the hidden state
     const packageGroupWithHidden = packages[index]
+    const shouldAlwaysIncludeFirstPackage =
+      !packageGroupWithHidden ||
+      !hasPackageGroupLabel(packageGroupWithHidden) ||
+      !!packageGroupWithHidden.baseline
 
     // Filter out any sub packages that are hidden before
     // summing them into a unified downloads count
@@ -243,15 +3636,18 @@ export function NPMStatsChart({
       const hiddenState = packageGroupWithHidden?.packages.find(
         (pg) => pg.name === p.name,
       )?.hidden
-      return !i || !hiddenState
+      return (i === 0 && shouldAlwaysIncludeFirstPackage) || !hiddenState
     })
 
+    const groupName = packageGroupWithHidden
+      ? getPackageGroupLabel(packageGroupWithHidden)
+      : queryPackageGroup.packages[0]?.name || 'Unknown'
     const downloadsByDate: Map<number, number> = new Map()
 
     visiblePackages.forEach((pkg) => {
       pkg.downloads.forEach((d) => {
         // Clamp the data to the floor bin of the start date
-        const date = d3.utcDay(new Date(d.day))
+        const date = getUtcDay(new Date(d.day))
         if (date < startDate) return
 
         downloadsByDate.set(
@@ -262,10 +3658,38 @@ export function NPMStatsChart({
       })
     })
 
+    const packageDownloads = visiblePackages.map((pkg) => {
+      const packageName = pkg.name || groupName
+      const packageDownloadsByDate: Map<number, number> = new Map()
+
+      pkg.downloads.forEach((d) => {
+        const date = getUtcDay(new Date(d.day))
+        if (date < startDate) return
+
+        packageDownloadsByDate.set(
+          date.getTime(),
+          (packageDownloadsByDate.get(date.getTime()) || 0) + d.downloads,
+        )
+      })
+
+      return {
+        packageName,
+        downloads: Array.from(packageDownloadsByDate.entries()).map(
+          ([date, downloads]) => ({
+            date: getUtcDay(new Date(date)),
+            downloads,
+          }),
+        ),
+      }
+    })
+
     return {
       ...queryPackageGroup,
+      label: groupName,
+      groupName,
+      packageDownloads,
       downloads: Array.from(downloadsByDate.entries()).map(
-        ([date, downloads]) => [d3.utcDay(new Date(date)), downloads],
+        ([date, downloads]) => [getUtcDay(new Date(date)), downloads],
       ) as [Date, number][],
     }
   })
@@ -283,34 +3707,101 @@ export function NPMStatsChart({
     )
 
     const downloads = binned.map((d) => ({
-      name: packageGroup.packages[0]?.name,
-      date: d3.utcDay(new Date(d[0])),
+      name: packageGroup.groupName,
+      date: getUtcDay(new Date(d[0])),
       downloads: d[1],
     }))
 
     return {
       ...packageGroup,
       downloads,
+      packageDownloads: packageGroup.packageDownloads.map((pkg) => {
+        const packageBinned = d3.sort(
+          d3.rollup(
+            pkg.downloads,
+            (v) => d3.sum(v, (d) => d.downloads),
+            (d) => binUnit.floor(d.date),
+          ),
+          (d) => d[0],
+        )
+
+        return {
+          ...pkg,
+          groupName: packageGroup.groupName,
+          downloads: packageBinned.map((d) => ({
+            groupName: packageGroup.groupName,
+            packageName: pkg.packageName,
+            date: getUtcDay(new Date(d[0])),
+            downloads: d[1],
+          })),
+        }
+      }),
     }
   })
 
-  // Apply the baseline correction
-  const baselinePackageIndex = packages.findIndex((pkg) => {
-    return pkg.baseline
-  })
+  // Build the baseline divisor.
+  //
+  // Single-package baseline: divisor[T] = downloads_baseline[T]. Tracked
+  // packages divided by this give "% of baseline" — intuitive when there's
+  // one familiar reference like react.
+  //
+  // Multi-package baseline: equal-weighted growth index. Each baseline j is
+  // first re-based to its own T0:  ix_j[T] = downloads_j[T] / downloads_j[T0].
+  // We average ix across baseline packages to get a unitless multiplier B[T]
+  // starting at 1.0 — each member contributes its growth rate equally
+  // regardless of size, so the largest member can't dominate the line shape.
+  // Tracked packages are then divided by B[T], yielding download values
+  // adjusted for baseline growth.
+  const baselineGroups = useBaseline
+    ? binnedPackageData.filter((_, index) => packages[index]?.baseline)
+    : []
+  const baselineLineName = getBaselineDisplayName(
+    packages.filter((packageGroup) => packageGroup.baseline),
+  )
+  const isMultiBaseline = baselineGroups.length > 1
 
-  const baselinePackage = binnedPackageData[baselinePackageIndex]
+  const baselineDivisorByDate = baselineGroups.length
+    ? (() => {
+        if (!isMultiBaseline) {
+          // Single baseline group — divisor is its raw download counts.
+          const single = new Map<number, number>()
+          baselineGroups[0]?.downloads.forEach((d) => {
+            single.set(d.date.getTime(), d.downloads)
+          })
+          return single
+        }
+        // Equal-weighted index: index each baseline to its own T0 then average.
+        const perPackageIndex = baselineGroups.map((group) => {
+          const t0 = group.downloads[0]?.downloads ?? 0
+          const ix = new Map<number, number>()
+          group.downloads.forEach((d) => {
+            ix.set(d.date.getTime(), t0 > 0 ? d.downloads / t0 : 1)
+          })
+          return ix
+        })
+        const allDates = new Set<number>()
+        perPackageIndex.forEach((ix) =>
+          ix.forEach((_, key) => allDates.add(key)),
+        )
+        const averaged = new Map<number, number>()
+        allDates.forEach((key) => {
+          let sum = 0
+          let count = 0
+          perPackageIndex.forEach((ix) => {
+            const v = ix.get(key)
+            if (v !== undefined) {
+              sum += v
+              count++
+            }
+          })
+          if (count > 0) averaged.set(key, sum / count)
+        })
+        return averaged
+      })()
+    : undefined
 
-  const baseLineValuesByDate =
-    baselinePackage && binnedPackageData.length
-      ? (() => {
-          return new Map(
-            baselinePackage.downloads.map((d) => {
-              return [d.date.getTime(), d.downloads]
-            }),
-          )
-        })()
-      : undefined
+  const normalizeByBaseline =
+    useBaseline && !!baselineDivisorByDate && normalizeBaseline
 
   const correctedPackageData = binnedPackageData.map((packageGroup) => {
     const first = packageGroup.downloads[0]
@@ -319,130 +3810,691 @@ export function NPMStatsChart({
     return {
       ...packageGroup,
       downloads: packageGroup.downloads.map((d) => {
-        if (baseLineValuesByDate) {
-          d.downloads =
-            d.downloads / (baseLineValuesByDate.get(d.date.getTime()) || 1)
-        }
+        const downloads =
+          normalizeByBaseline && baselineDivisorByDate
+            ? d.downloads / (baselineDivisorByDate.get(d.date.getTime()) || 1)
+            : d.downloads
 
         return {
           ...d,
-          change: d.downloads - firstDownloads,
+          downloads,
+          change: downloads - firstDownloads,
         }
       }),
     }
   })
 
-  // Filter out any top-level hidden packages
+  // Filter out any top-level hidden packages. Baseline series stay in the
+  // plot when visible — they render as a flat reference line at 1.0 (every
+  // point divided by itself) so users can see the baseline alongside the
+  // normalized series.
   const filteredPackageData = correctedPackageData.filter((_, index) => {
     const packageGroupWithHidden = packages[index]
-    const isHidden = packageGroupWithHidden?.packages[0]?.hidden
-    const isBaseline = packageGroupWithHidden?.baseline
-    return !isBaseline && !isHidden
+    return packageGroupWithHidden
+      ? !isPackageGroupHidden(packageGroupWithHidden)
+      : true
   })
 
-  const plotData = filteredPackageData.flatMap((d) => d.downloads)
+  const plotData = filteredPackageData.flatMap((d) =>
+    d.downloads.map((download) => ({
+      ...download,
+      seriesName: download.name,
+    })),
+  )
+
+  if (
+    useBaseline &&
+    chartType === 'line' &&
+    showBaseline &&
+    baselineDivisorByDate
+  ) {
+    const baselinePoints = [...baselineDivisorByDate.entries()]
+      .sort((a, b) => a[0] - b[0])
+      .map(([time, divisor]) => ({
+        name: baselineLineName,
+        seriesName: BASELINE_LINE_SERIES,
+        date: getUtcDay(new Date(time)),
+        // When normalized, baseline / baseline = 1 at every point.
+        // When raw, multi-baseline shows the growth-index multiplier (~1.0+);
+        // single-baseline shows the raw divisor value (downloads).
+        downloads: normalizeByBaseline ? 1 : divisor,
+      }))
+    const firstBaselineDownloads = baselinePoints[0]?.downloads ?? 0
+    plotData.push(
+      ...baselinePoints.map((d) => ({
+        ...d,
+        change: d.downloads - firstBaselineDownloads,
+      })),
+    )
+  }
 
   const baseOptions: Plot.LineYOptions = {
     x: 'date',
-    y: transform === 'normalize-y' ? 'change' : 'downloads',
-    fx: facetX,
-    fy: facetY,
+    y: effectiveTransform === 'normalize-y' ? 'change' : 'downloads',
   } as const
+  const lineOptions: Plot.LineYOptions = {
+    ...baseOptions,
+    z: 'seriesName',
+  }
+  const getStrokeColor = (d: { name?: string; seriesName?: string }) => {
+    if (d.seriesName === BASELINE_LINE_SERIES) return BASELINE_LINE_COLOR
+    return d.name ? getPackageColor(d.name, packages) : 'currentColor'
+  }
 
   const partialBinEnd = binUnit.floor(now)
   const partialBinStart = binUnit.offset(partialBinEnd, -1)
 
   // Force complete data mode when using relative change
   const effectiveShowDataMode =
-    transform === 'normalize-y' ? 'complete' : showDataMode
+    effectiveTransform === 'normalize-y' ? 'complete' : showDataMode
+  const completeTimeData =
+    effectiveShowDataMode === 'all'
+      ? plotData
+      : plotData.filter((d) => d.date < partialBinEnd)
+  const timelineScrubberDates =
+    viewMode === 'history'
+      ? [...new Set(completeTimeData.map((d) => d.date.getTime()))]
+          .sort((a, b) => a - b)
+          .map((time) => getUtcDay(new Date(time)))
+      : []
+  const timelineScrubberMaxIndex = timelineScrubberDates.length - 1
+  const rawTimelineStartIndex =
+    timelineScrubberMaxIndex > 0
+      ? getTimelineIndexForTime({
+          dates: timelineScrubberDates,
+          fallbackIndex: 0,
+          time: timelineStart,
+        })
+      : 0
+  const timelineStartIndex =
+    timelineScrubberMaxIndex > 0
+      ? Math.min(
+          clampTimelineIndex(rawTimelineStartIndex, timelineScrubberMaxIndex),
+          timelineScrubberMaxIndex - 1,
+        )
+      : 0
+  const rawTimelineEndIndex =
+    timelineScrubberMaxIndex > 0
+      ? getTimelineIndexForTime({
+          dates: timelineScrubberDates,
+          fallbackIndex: timelineScrubberMaxIndex,
+          time: timelineEnd,
+        })
+      : timelineScrubberMaxIndex
+  const timelineEndIndex =
+    timelineScrubberMaxIndex > 0
+      ? clampTimelineIndex(
+          Math.max(rawTimelineEndIndex, timelineStartIndex + 1),
+          timelineScrubberMaxIndex,
+        )
+      : timelineScrubberMaxIndex
+  const hasTimelineZoom =
+    timelineScrubberMaxIndex > 0 &&
+    (timelineStartIndex > 0 || timelineEndIndex < timelineScrubberMaxIndex)
+  const timelineZoomDomain = hasTimelineZoom
+    ? [
+        timelineScrubberDates[timelineStartIndex],
+        timelineScrubberDates[timelineEndIndex],
+      ]
+    : undefined
+  const seriesOrder = [
+    ...new Set(
+      filteredPackageData.map((packageGroup) => packageGroup.groupName),
+    ),
+  ]
+  const plotDataByDate = new Map<
+    number,
+    Map<string, (typeof plotData)[number]>
+  >()
+
+  plotData.forEach((point) => {
+    if (!point.seriesName) return
+
+    const dateKey = point.date.getTime()
+    const dateMap = plotDataByDate.get(dateKey) ?? new Map()
+    dateMap.set(point.seriesName, point)
+    plotDataByDate.set(dateKey, dateMap)
+  })
+
+  const getStackedRowValue = (
+    row: StackedDateRow<(typeof plotData)[number]>,
+    seriesName: string,
+  ) => {
+    const value = row[seriesName]
+    return typeof value === 'number' ? value : 0
+  }
+
+  const stackRows: Array<StackedDateRow<(typeof plotData)[number]>> = [
+    ...new Set(completeTimeData.map((d) => d.date.getTime())),
+  ]
+    .sort((a, b) => a - b)
+    .map((dateKey) => {
+      const dateMap = plotDataByDate.get(dateKey)
+      const row: StackedDateRow<(typeof plotData)[number]> = {
+        date: getUtcDay(new Date(dateKey)),
+        pointsBySeries: dateMap ?? new Map(),
+      }
+
+      seriesOrder.forEach((seriesName) => {
+        row[seriesName] = dateMap?.get(seriesName)?.downloads ?? 0
+      })
+
+      return row
+    })
+  const latestStackRow = stackRows[stackRows.length - 1]
+  const stackOrder =
+    chartType === 'stacked-stream'
+      ? getInsideOutOrderByLatestValue({
+          latestValues: seriesOrder.map((seriesName) =>
+            latestStackRow ? getStackedRowValue(latestStackRow, seriesName) : 0,
+          ),
+          sums: seriesOrder.map((seriesName) =>
+            d3.sum(stackRows, (row) => getStackedRowValue(row, seriesName)),
+          ),
+        })
+      : d3.range(seriesOrder.length)
+  const stackOffset =
+    chartType === 'stacked-stream'
+      ? d3.stackOffsetWiggle
+      : chartType === 'stacked-area'
+        ? d3.stackOffsetExpand
+        : d3.stackOffsetNone
+
+  const stackedTimeData = d3
+    .stack<StackedDateRow<(typeof plotData)[number]>, string>()
+    .keys(seriesOrder)
+    .value((row, seriesName) => getStackedRowValue(row, seriesName))
+    .order(stackOrder)
+    .offset(stackOffset)(stackRows)
+    .sort((a, b) => a.index - b.index)
+    .flatMap((series) =>
+      series.map((segment) => {
+        const downloads = getStackedRowValue(segment.data, series.key)
+        const totalDownloads = seriesOrder.reduce(
+          (sum, seriesName) =>
+            sum + getStackedRowValue(segment.data, seriesName),
+          0,
+        )
+        const share = totalDownloads > 0 ? downloads / totalDownloads : 0
+
+        return {
+          name: series.key,
+          seriesName: series.key,
+          date: segment.data.date,
+          downloads,
+          y0: segment[0],
+          y1: segment[1],
+          label:
+            chartType === 'stacked-area'
+              ? `${series.key}: ${formatNumber(downloads)} (${percentFormatter.format(share)})`
+              : `${series.key}: ${formatNumber(downloads)}`,
+        }
+      }),
+    )
+
+  const latestBarGroups = filteredPackageData
+    .map((packageGroup) => ({
+      packageGroup,
+      name: packageGroup.groupName,
+      downloads: d3.sum(packageGroup.downloads, (d) => d.downloads),
+    }))
+    .filter((group) => group.downloads > 0)
+    .sort((a, b) =>
+      barSort === 'value'
+        ? d3.descending(a.downloads, b.downloads) ||
+          a.name.localeCompare(b.name)
+        : a.name.localeCompare(b.name),
+    )
+  const latestBarDomain = latestBarGroups.map((group) => group.name)
+
+  const latestGroupedBarData = latestBarGroups.map((group) => ({
+    name: group.name,
+    seriesName: group.name,
+    downloads: group.downloads,
+    label: `${group.name}: ${formatNumber(group.downloads)}`,
+  }))
+  const latestBarDomainIdentityKey = [...latestBarDomain].sort().join('|')
+  const latestGroupedBarDataUpdateKey = latestGroupedBarData
+    .map(
+      (bar) =>
+        `${bar.name}:${bar.downloads}:${getPackageColor(bar.name, packages)}`,
+    )
+    .sort()
+    .join('|')
+
+  const latestStackedBarData = latestBarGroups.flatMap((group) => {
+    let y0 = 0
+
+    const sortedPackageDownloads = group.packageGroup.packageDownloads
+      .map((pkg, packageIndex) => ({
+        ...pkg,
+        packageIndex,
+        totalDownloads: d3.sum(pkg.downloads, (d) => d.downloads),
+      }))
+      .filter((pkg) => pkg.totalDownloads > 0)
+      .sort((a, b) => b.totalDownloads - a.totalDownloads)
+
+    return sortedPackageDownloads.map((pkg) => {
+      const point = {
+        groupName: group.name,
+        packageName: pkg.packageName,
+        packageIndex: pkg.packageIndex,
+        downloads: pkg.totalDownloads,
+        y0,
+        y1: y0 + pkg.totalDownloads,
+        label: `${pkg.packageName}: ${formatNumber(pkg.totalDownloads)}`,
+      }
+      y0 += pkg.totalDownloads
+      return point
+    })
+  })
+  const getSubPackageColor = (d: { groupName: string; packageIndex: number }) =>
+    getSubPackageColorForPackages({ ...d, packages })
+  const latestStackedBarDataUpdateKey = latestStackedBarData
+    .map(
+      (bar) =>
+        `${bar.groupName}:${bar.packageName}:${bar.downloads}:${bar.y0}:${
+          bar.y1
+        }:${getSubPackageColor(bar)}`,
+    )
+    .sort()
+    .join('|')
+  const latestBarDataUpdateKey =
+    chartType === 'stacked-bar'
+      ? latestStackedBarDataUpdateKey
+      : latestGroupedBarDataUpdateKey
+  const latestBarKeys =
+    chartType === 'stacked-bar'
+      ? latestStackedBarData.map(
+          (bar) =>
+            `${bar.groupName}\u0000${bar.packageName}\u0000${bar.packageIndex}`,
+        )
+      : latestGroupedBarData.map((bar) => bar.name)
+
+  const isLatestGroupedBar = viewMode === 'latest' && chartType === 'bar'
+  const isLatestStackedBar =
+    viewMode === 'latest' && chartType === 'stacked-bar'
+  const isLatestBar = isLatestGroupedBar || isLatestStackedBar
+  const isHorizontalBar = isLatestBar && barOrientation === 'horizontal'
+  const isLatestVerticalBar = isLatestBar && barOrientation === 'vertical'
+  const marginRight = 10
+  const marginLeft = isHorizontalBar
+    ? getCategoricalAxisLeftMargin({ labels: latestBarDomain, width })
+    : 70
+  const latestVerticalXAxisLayout = getVerticalCategoricalXAxisLayout({
+    height,
+    labels: latestBarDomain,
+    marginLeft,
+    marginRight,
+    width,
+  })
+  const xLabel = isHorizontalBar
+    ? 'Downloads'
+    : viewMode === 'latest'
+      ? null
+      : 'Date'
+  const yLabel = isHorizontalBar
+    ? null
+    : chartType === 'stacked-area'
+      ? 'Download Share'
+      : chartType === 'stacked-stream'
+        ? 'Downloads (stream)'
+        : effectiveTransform === 'normalize-y'
+          ? 'Downloads Growth'
+          : normalizeByBaseline
+            ? isMultiBaseline
+              ? 'Downloads (indexed)'
+              : 'Downloads (% of baseline)'
+            : 'Downloads'
+  const usePercentYAxis =
+    chartType === 'stacked-area' ||
+    (normalizeByBaseline &&
+      !isMultiBaseline &&
+      effectiveTransform !== 'normalize-y')
+  const yTickFormat = isHorizontalBar
+    ? undefined
+    : usePercentYAxis
+      ? (value: number) => percentFormatter.format(value)
+      : formatCompactAxisNumber
+  const xTickFormat = isHorizontalBar ? formatCompactAxisNumber : undefined
+  const colorLegendEntries = getUniqueColorLegendEntries(
+    isLatestStackedBar
+      ? latestStackedBarData.map((bar) => ({
+          label: `${bar.groupName} / ${bar.packageName}`,
+          color: getSubPackageColor(bar),
+        }))
+      : isLatestGroupedBar
+        ? latestGroupedBarData.map((bar) => ({
+            label: bar.name,
+            color: getPackageColor(bar.name, packages),
+          }))
+        : plotData
+            .map((d) => d.name)
+            .filter((name): name is string => name !== undefined)
+            .map((name) => ({
+              label: name,
+              color:
+                name === baselineLineName
+                  ? BASELINE_LINE_COLOR
+                  : getPackageColor(name, packages),
+            })),
+  )
+  const useHistoryAreaFill =
+    viewMode === 'history' &&
+    (chartType === 'stacked' ||
+      chartType === 'stacked-area' ||
+      chartType === 'stacked-stream')
+  const fillGradients = getChartFillGradients({
+    bottomOpacity: isLatestBar ? 0.7 : useHistoryAreaFill ? 0.25 : 0.1,
+    entries: colorLegendEntries,
+    idPrefix: gradientIdPrefix,
+    topOpacity: isLatestBar ? 1 : useHistoryAreaFill ? 0.9 : 0.8,
+  })
+  const getSeriesGradientFill = (d: { name?: string; seriesName?: string }) =>
+    getChartFillGradientUrl({
+      color: getStrokeColor(d),
+      gradients: fillGradients,
+    })
+  const getSubPackageGradientFill = (d: {
+    groupName: string
+    packageIndex: number
+  }) =>
+    getChartFillGradientUrl({
+      color: getSubPackageColor(d),
+      gradients: fillGradients,
+    })
 
   return (
-    <ParentSize>
-      {({ width = 1000, height }) => (
+    <div ref={containerRef} className="w-full">
+      {chartActions}
+      {width > 0 ? (
         <PlotFigure
+          barKeys={isLatestBar ? latestBarKeys : undefined}
+          domain={isLatestBar ? latestBarDomain : undefined}
+          domainAxis={
+            isLatestBar
+              ? barOrientation === 'vertical'
+                ? 'x'
+                : 'y'
+              : undefined
+          }
+          domainIdentityKey={
+            isLatestBar ? latestBarDomainIdentityKey : undefined
+          }
+          dataUpdateKey={isLatestBar ? latestBarDataUpdateKey : undefined}
+          fillGradients={fillGradients}
+          footer={
+            viewMode === 'history' && timelineScrubberMaxIndex > 0 ? (
+              <TimelineRangeScrubber
+                dates={timelineScrubberDates}
+                endIndex={timelineEndIndex}
+                marginLeft={marginLeft}
+                marginRight={marginRight}
+                onRangeChange={(nextStartIndex, nextEndIndex) => {
+                  if (
+                    nextStartIndex <= 0 &&
+                    nextEndIndex >= timelineScrubberMaxIndex
+                  ) {
+                    onTimelineRangeChange?.({
+                      end: undefined,
+                      start: undefined,
+                    })
+                    return
+                  }
+
+                  onTimelineRangeChange?.({
+                    end: timelineScrubberDates[nextEndIndex]?.getTime(),
+                    start: timelineScrubberDates[nextStartIndex]?.getTime(),
+                  })
+                }}
+                startIndex={timelineStartIndex}
+              />
+            ) : null
+          }
+          legendRef={legendRef}
+          layoutKey={isLatestBar ? `${chartType}:${barOrientation}` : undefined}
+          onRenderedChange={handleChartRenderedChange}
+          plotRef={plotRef}
+          showLegend={showLegend}
           options={{
-            marginLeft: 70,
-            marginRight: 10,
-            marginBottom: 70,
+            className: observablePlotClassName,
+            marginLeft,
+            marginRight,
+            marginBottom: isLatestVerticalBar
+              ? latestVerticalXAxisLayout.marginBottom
+              : 70,
             width,
             height,
+            style: { overflow: 'visible' },
             marks: (
               [
-                facetX || facetY
-                  ? Plot.frame({
-                      strokeOpacity: 0.2,
+                isHorizontalBar
+                  ? Plot.ruleX([0], {
+                      stroke: 'currentColor',
+                      strokeWidth: 1.5,
+                      strokeOpacity: 0.5,
                     })
-                  : undefined,
-                Plot.ruleY([0], {
-                  stroke: 'currentColor',
-                  strokeWidth: 1.5,
-                  strokeOpacity: 0.5,
-                }),
+                  : Plot.ruleY([0], {
+                      stroke: 'currentColor',
+                      strokeWidth: 1.5,
+                      strokeOpacity: 0.5,
+                    }),
+                viewMode === 'history' &&
+                chartType === 'line' &&
                 effectiveShowDataMode === 'all'
                   ? Plot.lineY(
                       plotData.filter((d) => d.date >= partialBinStart),
                       {
-                        ...baseOptions,
-                        stroke: 'name',
+                        ...lineOptions,
+                        stroke: getStrokeColor,
                         strokeWidth: 1.5,
                         strokeDasharray: '2 4',
                         strokeOpacity: 0.8,
                         curve: 'monotone-x',
+                        clip: hasTimelineZoom ? true : undefined,
+                      },
+                    )
+                  : undefined,
+                viewMode === 'history' && chartType === 'line'
+                  ? Plot.lineY(
+                      plotData.filter((d) => d.date < partialBinEnd),
+                      {
+                        ...lineOptions,
+                        stroke: getStrokeColor,
+                        strokeWidth: 2,
+                        curve: 'monotone-x',
+                        clip: hasTimelineZoom ? true : undefined,
                       },
                     )
                   : undefined,
-                Plot.lineY(
-                  plotData.filter((d) => d.date < partialBinEnd),
-                  {
-                    ...baseOptions,
-                    stroke: 'name',
-                    strokeWidth: 2,
-                    curve: 'monotone-x',
-                  },
-                ),
-                Plot.tip(
-                  effectiveShowDataMode === 'all'
-                    ? plotData
-                    : plotData.filter((d) => d.date < partialBinEnd),
-                  Plot.pointer({
-                    ...baseOptions,
-                    stroke: 'name',
-                    format: {
-                      x: (d) =>
-                        d.toLocaleDateString('en-US', {
-                          month: 'long',
-                          day: 'numeric',
-                          year: 'numeric',
-                        }),
-                    },
-                  } as Plot.TipOptions),
-                ),
+                viewMode === 'history' && chartType === 'line'
+                  ? Plot.tip(
+                      completeTimeData,
+                      Plot.pointer({
+                        ...baseOptions,
+                        stroke: 'name',
+                        format: {
+                          x: (d) =>
+                            d.toLocaleDateString('en-US', {
+                              month: 'long',
+                              day: 'numeric',
+                              year: 'numeric',
+                            }),
+                        },
+                      } as Plot.TipOptions),
+                    )
+                  : undefined,
+                viewMode === 'history' &&
+                (chartType === 'stacked' || chartType === 'stacked-area')
+                  ? Plot.areaY(stackedTimeData, {
+                      x: 'date',
+                      y1: 'y0',
+                      y2: 'y1',
+                      z: 'seriesName',
+                      fill: getSeriesGradientFill,
+                      curve: 'monotone-x',
+                      clip: hasTimelineZoom ? true : undefined,
+                    })
+                  : undefined,
+                viewMode === 'history' && chartType === 'stacked-stream'
+                  ? Plot.areaY(stackedTimeData, {
+                      x: 'date',
+                      y1: 'y0',
+                      y2: 'y1',
+                      z: 'seriesName',
+                      fill: getSeriesGradientFill,
+                      curve: 'monotone-x',
+                      clip: hasTimelineZoom ? true : undefined,
+                    })
+                  : undefined,
+                viewMode === 'history' &&
+                (chartType === 'stacked' ||
+                  chartType === 'stacked-area' ||
+                  chartType === 'stacked-stream')
+                  ? Plot.lineY(stackedTimeData, {
+                      x: 'date',
+                      y: 'y1',
+                      z: 'seriesName',
+                      stroke: getStrokeColor,
+                      strokeWidth: 1.4,
+                      strokeOpacity: 0.95,
+                      curve: 'monotone-x',
+                      clip: hasTimelineZoom ? true : undefined,
+                    })
+                  : undefined,
+                viewMode === 'history' &&
+                (chartType === 'stacked' ||
+                  chartType === 'stacked-area' ||
+                  chartType === 'stacked-stream')
+                  ? Plot.tip(
+                      stackedTimeData,
+                      Plot.pointerX({
+                        x: 'date',
+                        y1: 'y0',
+                        y2: 'y1',
+                        title: 'label',
+                        maxRadius: 80,
+                        format: {
+                          x: (d) =>
+                            d.toLocaleDateString('en-US', {
+                              month: 'long',
+                              day: 'numeric',
+                              year: 'numeric',
+                            }),
+                        },
+                      }),
+                    )
+                  : undefined,
+                isLatestGroupedBar && barOrientation === 'vertical'
+                  ? Plot.barY(latestGroupedBarData, {
+                      x: 'name',
+                      y: 'downloads',
+                      fill: getSeriesGradientFill,
+                    })
+                  : undefined,
+                isLatestGroupedBar && barOrientation === 'vertical'
+                  ? Plot.tip(
+                      latestGroupedBarData,
+                      Plot.pointerX({
+                        x: 'name',
+                        y1: 0,
+                        y2: 'downloads',
+                        title: 'label',
+                        maxRadius: 80,
+                      }),
+                    )
+                  : undefined,
+                isLatestGroupedBar && barOrientation === 'horizontal'
+                  ? Plot.barX(latestGroupedBarData, {
+                      x: 'downloads',
+                      y: 'name',
+                      fill: getSeriesGradientFill,
+                    })
+                  : undefined,
+                isLatestGroupedBar && barOrientation === 'horizontal'
+                  ? Plot.tip(
+                      latestGroupedBarData,
+                      Plot.pointerY({
+                        x1: 0,
+                        x2: 'downloads',
+                        y: 'name',
+                        title: 'label',
+                        maxRadius: 80,
+                      }),
+                    )
+                  : undefined,
+                isLatestStackedBar && barOrientation === 'vertical'
+                  ? Plot.barY(latestStackedBarData, {
+                      x: 'groupName',
+                      y1: 'y0',
+                      y2: 'y1',
+                      fill: getSubPackageGradientFill,
+                    })
+                  : undefined,
+                isLatestStackedBar && barOrientation === 'vertical'
+                  ? Plot.tip(
+                      latestStackedBarData,
+                      Plot.pointerX({
+                        x: 'groupName',
+                        y1: 'y0',
+                        y2: 'y1',
+                        title: 'label',
+                        maxRadius: 80,
+                      }),
+                    )
+                  : undefined,
+                isLatestStackedBar && barOrientation === 'horizontal'
+                  ? Plot.barX(latestStackedBarData, {
+                      y: 'groupName',
+                      x1: 'y0',
+                      x2: 'y1',
+                      fill: getSubPackageGradientFill,
+                    })
+                  : undefined,
+                isLatestStackedBar && barOrientation === 'horizontal'
+                  ? Plot.tip(
+                      latestStackedBarData,
+                      Plot.pointerY({
+                        x1: 'y0',
+                        x2: 'y1',
+                        y: 'groupName',
+                        title: 'label',
+                        maxRadius: 80,
+                      }),
+                    )
+                  : undefined,
               ] as const
             ).filter(Boolean),
             x: {
-              label: 'Date',
-              labelOffset: 35,
+              domain: isLatestVerticalBar
+                ? latestBarDomain
+                : timelineZoomDomain,
+              label: xLabel,
+              labelOffset: isLatestVerticalBar
+                ? latestVerticalXAxisLayout.labelOffset
+                : 35,
+              tickFormat: xTickFormat,
+              tickRotate: isLatestVerticalBar
+                ? latestVerticalXAxisLayout.tickRotate
+                : undefined,
             },
             y: {
-              label:
-                transform === 'normalize-y'
-                  ? 'Downloads Growth'
-                  : baselinePackage
-                    ? 'Downloads (% of baseline)'
-                    : 'Downloads',
+              domain: isHorizontalBar ? latestBarDomain : undefined,
+              label: yLabel,
               labelOffset: 35,
+              tickFormat: yTickFormat,
             },
             grid: true,
             color: {
-              domain: [...new Set(plotData.map((d) => d.name))],
-              range: [...new Set(plotData.map((d) => d.name))]
-                .filter((pkg): pkg is string => pkg !== undefined)
-                .map((pkg) => getPackageColor(pkg, packages)),
+              domain: colorLegendEntries.map((entry) => entry.label),
+              range: colorLegendEntries.map((entry) => entry.color),
               legend: false,
             },
           }}
         />
+      ) : (
+        <div style={{ height }} />
       )}
-    </ParentSize>
+    </div>
   )
 }
diff --git a/src/components/npm-stats/NPMSummary.tsx b/src/components/npm-stats/NPMSummary.tsx
index 1c63d1bc7..1dbb4639f 100644
--- a/src/components/npm-stats/NPMSummary.tsx
+++ b/src/components/npm-stats/NPMSummary.tsx
@@ -5,7 +5,7 @@ import { queryOptions } from '@tanstack/react-query'
 import { BlankErrorBoundary } from '~/components/BlankErrorBoundary'
 import { ossStatsQuery } from '~/queries/stats'
 import { useNpmDownloadCounter } from '~/hooks/useNpmDownloadCounter'
-import { fetchRecentDownloadStats } from '~/utils/stats.server'
+import { fetchRecentDownloadStats } from '~/utils/stats-queries.functions'
 import type { Library } from '~/libraries'
 
 /**
diff --git a/src/components/npm-stats/PackagePills.tsx b/src/components/npm-stats/PackagePills.tsx
index e646c7eb6..e1d3ccc40 100644
--- a/src/components/npm-stats/PackagePills.tsx
+++ b/src/components/npm-stats/PackagePills.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
-import { X, Plus, Eye, EyeOff, Pin, EllipsisVertical } from 'lucide-react'
+import { X, Plus, Eye, EyeOff, EllipsisVertical } from 'lucide-react'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -8,7 +8,13 @@ import {
   DropdownMenuTrigger,
 } from '@radix-ui/react-dropdown-menu'
 import { Tooltip } from '~/components/Tooltip'
-import { type PackageGroup, getPackageColor } from './NPMStatsChart'
+import {
+  type PackageGroup,
+  getPackageColor,
+  getPackageGroupLabel,
+  hasPackageGroupLabel,
+  isPackageGroupHidden,
+} from './shared'
 
 export type PackagePillProps = {
   packageGroup: PackageGroup
@@ -19,8 +25,8 @@ export type PackagePillProps = {
   onToggleVisibility: (index: number, packageName: string) => void
   onRemove: (index: number) => void
   // Optional advanced features (main page only)
-  onBaselineChange?: (packageName: string) => void
   onCombinePackage?: (packageName: string) => void
+  onLabelChange?: (index: number, label: string) => void
   onRemoveFromGroup?: (mainPackage: string, subPackage: string) => void
   openMenuPackage?: string | null
   onMenuOpenChange?: (packageName: string, open: boolean) => void
@@ -34,221 +40,243 @@ export function PackagePill({
   onColorClick,
   onToggleVisibility,
   onRemove,
-  onBaselineChange,
   onCombinePackage,
+  onLabelChange,
   onRemoveFromGroup,
   openMenuPackage,
   onMenuOpenChange,
 }: PackagePillProps) {
+  const currentLabel = packageGroup.label ?? ''
+  const [draftLabel, setDraftLabel] = React.useState(currentLabel)
+  const labelInputId = React.useId()
+
+  React.useEffect(() => {
+    setDraftLabel(currentLabel)
+  }, [currentLabel])
+
   const mainPackage = packageGroup.packages[0]
   if (!mainPackage) return null
 
+  const hasLabel = hasPackageGroupLabel(packageGroup)
   const packageList = packageGroup.packages
-  const isCombined = packageList.length > 1
-  const subPackages = packageList.filter((p) => p.name !== mainPackage.name)
+  const listedPackages = hasLabel
+    ? packageList
+    : packageList.filter((p) => p.name !== mainPackage.name)
+  const showPackageList = listedPackages.length > 0
+  const showPackageCount = !hasLabel && showPackageList
   const color = getPackageColor(mainPackage.name, allPackageGroups)
+  const label = getPackageGroupLabel(packageGroup)
+  const isGroupHidden = isPackageGroupHidden(packageGroup)
 
   const showAdvancedMenu =
-    onBaselineChange && onCombinePackage && onMenuOpenChange
+    onMenuOpenChange && (onCombinePackage || onLabelChange)
+  const handleLabelBlur = () => {
+    if (draftLabel !== currentLabel) {
+      onLabelChange?.(index, draftLabel)
+    }
+  }
 
   return (
     <div
-      className={`flex flex-col items-start
-        rounded-md text-gray-900
-        px-1 py-0.5
-        sm:px-2 sm:py-1
-        dark:text-gray-100 text-xs sm:text-sm`}
+      className="flex flex-col items-start rounded text-xs leading-none text-gray-900 dark:text-gray-100"
       style={{
         backgroundColor: `${color}20`,
       }}
     >
-      <div className="flex items-center gap-1 w-full">
-        {packageGroup.baseline ? (
-          <>
-            <Tooltip content="Remove baseline">
-              <button
-                onClick={() => onBaselineChange?.(mainPackage.name)}
-                className="hover:text-blue-500"
-              >
-                <Pin className="w-3 h-3 sm:w-4 sm:h-4 text-blue-500" />
-              </button>
-            </Tooltip>
-            <span>{mainPackage.name}</span>
-          </>
-        ) : (
-          <>
-            <Tooltip content="Change color">
-              <button
-                onClick={(e) => onColorClick(mainPackage.name, e)}
-                className="hover:opacity-80"
-              >
-                <div
-                  className="w-3 h-3 sm:w-4 sm:h-4 rounded"
-                  style={{ backgroundColor: color }}
-                />
-              </button>
-            </Tooltip>
-            <Tooltip content="Toggle package visibility">
-              <button
-                onClick={() => onToggleVisibility(index, mainPackage.name)}
-                className={twMerge(
-                  'hover:text-blue-500 flex items-center gap-1',
-                  mainPackage.hidden ? 'opacity-50' : '',
-                )}
-              >
-                {mainPackage.name}
-                {mainPackage.hidden ? (
-                  <EyeOff className="w-3 h-3 sm:w-4 sm:h-4" />
-                ) : null}
-              </button>
-            </Tooltip>
-          </>
-        )}
-        {isCombined ? (
-          <span className="text-black/70 dark:text-white/70 text-[.7em] font-black py-0.5 px-1 leading-none rounded-md border-[1.5px] border-current opacity-80">
-            + {subPackages.length}
-          </span>
-        ) : null}
-
-        {/* Advanced dropdown menu (main page only) */}
-        {showAdvancedMenu && (
-          <div className="relative flex items-center">
-            <DropdownMenu
-              open={openMenuPackage === mainPackage.name}
-              onOpenChange={(open) => onMenuOpenChange(mainPackage.name, open)}
+      <div className="flex w-full items-stretch">
+        <Tooltip content="Change color">
+          <button
+            onClick={(e) => onColorClick(mainPackage.name, e)}
+            className="flex w-5 shrink-0 hover:opacity-80"
+          >
+            <div
+              className="w-full rounded-l"
+              style={{ backgroundColor: color }}
+            />
+          </button>
+        </Tooltip>
+        <div className="flex min-w-0 flex-1 items-center gap-0.5 py-1 pl-1.5 pr-2">
+          <Tooltip content="Toggle package visibility">
+            <button
+              onClick={() =>
+                onToggleVisibility(index, hasLabel ? label : mainPackage.name)
+              }
+              className={twMerge(
+                'hover:text-blue-500 flex min-w-0 max-w-48 items-center gap-0.5',
+                isGroupHidden ? 'opacity-50' : '',
+              )}
             >
-              <Tooltip content="More options">
-                <DropdownMenuTrigger asChild>
-                  <button className="px-0.5 sm:px-1 hover:text-blue-500">
-                    <EllipsisVertical className="w-3 h-3 sm:w-4 sm:h-4" />
-                  </button>
-                </DropdownMenuTrigger>
-              </Tooltip>
-              <DropdownMenuContent
-                className="min-w-[200px] bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 z-50"
-                sideOffset={5}
+              <span className="truncate">{label}</span>
+              {isGroupHidden ? <EyeOff className="size-3.5 shrink-0" /> : null}
+            </button>
+          </Tooltip>
+          {showPackageCount ? (
+            <span className="rounded-sm border border-current px-1 text-[11px] font-black leading-none text-black/70 opacity-80 dark:text-white/70">
+              + {listedPackages.length}
+            </span>
+          ) : null}
+
+          {/* Advanced dropdown menu (main page only) */}
+          {showAdvancedMenu && (
+            <div className="relative flex items-center">
+              <DropdownMenu
+                open={openMenuPackage === mainPackage.name}
+                onOpenChange={(open) =>
+                  onMenuOpenChange(mainPackage.name, open)
+                }
               >
-                <div className="flex justify-between items-center mb-2">
-                  <span className="text-sm font-medium">Options</span>
-                </div>
-                <div className="space-y-1">
-                  <DropdownMenuItem
-                    onSelect={(e) => {
-                      e.preventDefault()
-                      onToggleVisibility(index, mainPackage.name)
-                    }}
-                    className="w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer"
-                  >
-                    {mainPackage.hidden ? (
-                      <EyeOff className="text-sm" />
-                    ) : (
-                      <Eye className="text-sm" />
-                    )}
-                    {mainPackage.hidden ? 'Show Package' : 'Hide Package'}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onSelect={(e) => {
-                      e.preventDefault()
-                      onBaselineChange(mainPackage.name)
-                    }}
-                    className={twMerge(
-                      'w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer',
-                      packageGroup.baseline ? 'text-blue-500' : '',
-                    )}
-                  >
-                    <Pin className="text-sm" />
-                    {packageGroup.baseline
-                      ? 'Remove Baseline'
-                      : 'Set as Baseline'}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onSelect={(e) => {
-                      e.preventDefault()
-                      onColorClick(
-                        mainPackage.name,
-                        e as unknown as React.MouseEvent,
-                      )
-                    }}
-                    className="w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer"
-                  >
-                    <div
-                      className="w-3 h-3 rounded-full"
-                      style={{ backgroundColor: color }}
-                    />
-                    Change Color
-                  </DropdownMenuItem>
-                  {isCombined && onRemoveFromGroup && (
-                    <>
-                      <div className="h-px bg-gray-500/20 my-1" />
-                      <div className="px-2 py-1 text-xs font-medium text-gray-500">
-                        Sub-packages
-                      </div>
-                      {subPackages.map((subPackage) => (
-                        <DropdownMenuItem
-                          key={subPackage.name}
-                          onSelect={(e) => {
-                            e.preventDefault()
-                            onToggleVisibility(index, subPackage.name)
-                          }}
-                          className="w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer"
+                <Tooltip content="More options">
+                  <DropdownMenuTrigger asChild>
+                    <button className="px-0.5 hover:text-blue-500">
+                      <EllipsisVertical className="size-3.5" />
+                    </button>
+                  </DropdownMenuTrigger>
+                </Tooltip>
+                <DropdownMenuContent
+                  className="z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[200px] overflow-y-auto rounded-lg bg-white p-2 shadow-lg dark:bg-gray-800"
+                  collisionPadding={8}
+                  sideOffset={5}
+                >
+                  <div className="flex justify-between items-center mb-2">
+                    <span className="text-sm font-medium">Options</span>
+                  </div>
+                  <div className="space-y-1">
+                    {onLabelChange && (
+                      <div className="px-2 py-1.5 space-y-1">
+                        <label
+                          className="block text-xs font-medium text-gray-500"
+                          htmlFor={labelInputId}
                         >
-                          <div className="flex-1 flex items-center justify-between">
-                            <div className="flex items-center gap-2">
-                              {subPackage.hidden ? (
-                                <EyeOff className="text-sm" />
-                              ) : (
-                                <Eye className="text-sm" />
-                              )}
-                              <span
-                                className={
-                                  subPackage.hidden ? 'opacity-50' : ''
-                                }
+                          Label
+                        </label>
+                        <input
+                          className="w-full rounded border border-gray-500/20 bg-white px-2 py-1 text-sm outline-none focus:border-blue-500 dark:bg-gray-900"
+                          id={labelInputId}
+                          maxLength={80}
+                          onBlur={handleLabelBlur}
+                          onChange={(event) =>
+                            setDraftLabel(event.currentTarget.value)
+                          }
+                          onClick={(event) => event.stopPropagation()}
+                          onKeyDown={(event) => {
+                            event.stopPropagation()
+                            if (event.key === 'Enter') {
+                              event.currentTarget.blur()
+                            }
+                          }}
+                          placeholder={mainPackage.name}
+                          value={draftLabel}
+                        />
+                      </div>
+                    )}
+                    <DropdownMenuItem
+                      onSelect={(e) => {
+                        e.preventDefault()
+                        onToggleVisibility(
+                          index,
+                          hasLabel ? label : mainPackage.name,
+                        )
+                      }}
+                      className="w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer"
+                    >
+                      {isGroupHidden ? (
+                        <EyeOff className="text-sm" />
+                      ) : (
+                        <Eye className="text-sm" />
+                      )}
+                      {isGroupHidden ? 'Show Package' : 'Hide Package'}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onSelect={(e) => {
+                        e.preventDefault()
+                        onColorClick(
+                          mainPackage.name,
+                          e as unknown as React.MouseEvent,
+                        )
+                      }}
+                      className="w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer"
+                    >
+                      <div
+                        className="w-3 h-3 rounded-full"
+                        style={{ backgroundColor: color }}
+                      />
+                      Change Color
+                    </DropdownMenuItem>
+                    {showPackageList && onRemoveFromGroup && (
+                      <>
+                        <div className="h-px bg-gray-500/20 my-1" />
+                        <div className="px-2 py-1 text-xs font-medium text-gray-500">
+                          {hasLabel ? 'Packages' : 'Sub-packages'}
+                        </div>
+                        {listedPackages.map((subPackage) => (
+                          <DropdownMenuItem
+                            key={subPackage.name}
+                            onSelect={(e) => {
+                              e.preventDefault()
+                              onToggleVisibility(index, subPackage.name)
+                            }}
+                            className="w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer"
+                          >
+                            <div className="flex-1 flex items-center justify-between">
+                              <div className="flex items-center gap-2">
+                                {subPackage.hidden ? (
+                                  <EyeOff className="text-sm" />
+                                ) : (
+                                  <Eye className="text-sm" />
+                                )}
+                                <span
+                                  className={
+                                    subPackage.hidden ? 'opacity-50' : ''
+                                  }
+                                >
+                                  {subPackage.name}
+                                </span>
+                              </div>
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  onRemoveFromGroup(
+                                    mainPackage.name,
+                                    subPackage.name,
+                                  )
+                                }}
+                                className="p-1 text-gray-400 hover:text-red-500"
                               >
-                                {subPackage.name}
-                              </span>
+                                <X className="w-3 h-3" />
+                              </button>
                             </div>
-                            <button
-                              onClick={(e) => {
-                                e.stopPropagation()
-                                onRemoveFromGroup(
-                                  mainPackage.name,
-                                  subPackage.name,
-                                )
-                              }}
-                              className="p-1 text-gray-400 hover:text-red-500"
-                            >
-                              <X className="w-3 h-3" />
-                            </button>
-                          </div>
-                        </DropdownMenuItem>
-                      ))}
-                    </>
-                  )}
-                  <DropdownMenuItem
-                    onSelect={(e) => {
-                      e.preventDefault()
-                      onCombinePackage(mainPackage.name)
-                    }}
-                    className="w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer"
-                  >
-                    <Plus className="text-sm" />
-                    Add Packages
-                  </DropdownMenuItem>
-                </div>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        )}
+                          </DropdownMenuItem>
+                        ))}
+                      </>
+                    )}
+                    {onCombinePackage && (
+                      <DropdownMenuItem
+                        onSelect={(e) => {
+                          e.preventDefault()
+                          onCombinePackage(mainPackage.name)
+                        }}
+                        className="w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer"
+                      >
+                        <Plus className="text-sm" />
+                        Add Packages
+                      </DropdownMenuItem>
+                    )}
+                  </div>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          )}
 
-        <button
-          onClick={() => onRemove(index)}
-          className="ml-auto pl-0.5 sm:pl-1 text-gray-500 hover:text-red-500"
-        >
-          <X className="w-3 h-3 sm:w-4 sm:h-4" />
-        </button>
+          <button
+            onClick={() => onRemove(index)}
+            className="ml-auto pl-0.5 text-gray-500 hover:text-red-500"
+          >
+            <X className="size-3.5" />
+          </button>
+        </div>
       </div>
       {error && (
-        <div className="mt-1 text-xs font-mono text-red-500 px-1 font-medium bg-red-500/10 rounded">
+        <div className="mt-0.5 rounded bg-red-500/10 px-1 py-0.5 font-mono text-[10px] font-medium leading-none text-red-500">
           {error}
         </div>
       )}
@@ -263,8 +291,8 @@ export type PackagePillsProps = {
   onToggleVisibility: (index: number, packageName: string) => void
   onRemove: (index: number) => void
   // Optional advanced features (main page only)
-  onBaselineChange?: (packageName: string) => void
   onCombinePackage?: (packageName: string) => void
+  onLabelChange?: (index: number, label: string) => void
   onRemoveFromGroup?: (mainPackage: string, subPackage: string) => void
   openMenuPackage?: string | null
   onMenuOpenChange?: (packageName: string, open: boolean) => void
@@ -276,31 +304,34 @@ export function PackagePills({
   onColorClick,
   onToggleVisibility,
   onRemove,
-  onBaselineChange,
   onCombinePackage,
+  onLabelChange,
   onRemoveFromGroup,
   openMenuPackage,
   onMenuOpenChange,
 }: PackagePillsProps) {
   return (
-    <div className="flex flex-wrap gap-1 sm:gap-2">
-      {packageGroups.map((pkg, index) => (
-        <PackagePill
-          key={pkg.packages[0]?.name ?? index}
-          packageGroup={pkg}
-          index={index}
-          allPackageGroups={packageGroups}
-          error={queryData?.[index]?.error}
-          onColorClick={onColorClick}
-          onToggleVisibility={onToggleVisibility}
-          onRemove={onRemove}
-          onBaselineChange={onBaselineChange}
-          onCombinePackage={onCombinePackage}
-          onRemoveFromGroup={onRemoveFromGroup}
-          openMenuPackage={openMenuPackage}
-          onMenuOpenChange={onMenuOpenChange}
-        />
-      ))}
+    <div className="flex flex-wrap gap-1">
+      {packageGroups.map((pkg, index) => {
+        if (pkg.baseline) return null
+        return (
+          <PackagePill
+            key={pkg.packages[0]?.name ?? index}
+            packageGroup={pkg}
+            index={index}
+            allPackageGroups={packageGroups}
+            error={queryData?.[index]?.error}
+            onColorClick={onColorClick}
+            onToggleVisibility={onToggleVisibility}
+            onRemove={onRemove}
+            onCombinePackage={onCombinePackage}
+            onLabelChange={onLabelChange}
+            onRemoveFromGroup={onRemoveFromGroup}
+            openMenuPackage={openMenuPackage}
+            onMenuOpenChange={onMenuOpenChange}
+          />
+        )
+      })}
     </div>
   )
 }
diff --git a/src/components/npm-stats/PackageSearch.tsx b/src/components/npm-stats/PackageSearch.tsx
index 4ac1fd0d5..4c75fc257 100644
--- a/src/components/npm-stats/PackageSearch.tsx
+++ b/src/components/npm-stats/PackageSearch.tsx
@@ -3,16 +3,19 @@ import { useDebouncedValue } from '@tanstack/react-pacer'
 import { Search } from 'lucide-react'
 import { keepPreviousData, useQuery } from '@tanstack/react-query'
 import { Command } from 'cmdk'
+import { twMerge } from 'tailwind-merge'
 import { Spinner } from '~/components/Spinner'
 
 type NpmSearchResult = {
   name: string
   description?: string
   version?: string
-  label?: string
   publisher?: { username?: string }
 }
 
+const CREATE_ITEM_VALUE = '__create__'
+const MIN_SEARCH_QUERY_LENGTH = 2
+
 export type PackageSearchProps = {
   onSelect: (packageName: string) => void
   placeholder?: string
@@ -48,110 +51,123 @@ export function PackageSearch({
     }
   }, [])
 
+  const trimmedInput = debouncedInputValue.trim()
+  const hasUsableQuery = trimmedInput.length >= MIN_SEARCH_QUERY_LENGTH
+
   const searchQuery = useQuery({
-    queryKey: ['npm-search', debouncedInputValue],
+    queryKey: ['npm-search', trimmedInput],
     queryFn: async () => {
-      if (!debouncedInputValue || debouncedInputValue.length <= 2)
-        return [] as Array<NpmSearchResult>
-
       const response = await fetch(
-        `https://api.npms.io/v2/search?q=${encodeURIComponent(
-          debouncedInputValue,
+        `https://registry.npmjs.org/-/v1/search?text=${encodeURIComponent(
+          trimmedInput,
         )}&size=10`,
       )
       const data = (await response.json()) as {
-        results: Array<{ package: NpmSearchResult }>
+        objects: Array<{ package: NpmSearchResult }>
       }
-      return data.results.map((r) => r.package)
+      return data.objects.map((r) => r.package)
     },
-    enabled: debouncedInputValue.length > 2,
+    enabled: hasUsableQuery,
     placeholderData: keepPreviousData,
   })
 
-  const results = React.useMemo(() => {
-    const hasInputValue = searchQuery.data?.find(
-      (d) => d.name === debouncedInputValue,
-    )
-
-    return [
-      ...(hasInputValue
-        ? []
-        : [
-            {
-              name: debouncedInputValue,
-              label: `Use "${debouncedInputValue}"`,
-            },
-          ]),
-      ...(searchQuery.data ?? []),
-    ]
-  }, [searchQuery.data, debouncedInputValue])
-
-  const handleInputChange = (value: string) => {
-    setInputValue(value)
-  }
+  const searchResults = hasUsableQuery ? (searchQuery.data ?? []) : []
+  const showCreateItem =
+    hasUsableQuery &&
+    trimmedInput.length > 0 &&
+    !searchResults.some((d) => d.name === trimmedInput)
 
   const handleSelect = (value: string) => {
-    const selectedItem = results?.find((item) => item.name === value)
-    if (!selectedItem) return
-
-    onSelect(selectedItem.name)
+    if (value === CREATE_ITEM_VALUE) {
+      if (!trimmedInput) return
+      onSelect(trimmedInput)
+    } else {
+      const match = searchResults.find((item) => item.name === value)
+      if (!match) return
+      onSelect(match.name)
+    }
     setInputValue('')
     setOpen(false)
   }
 
+  const showList = open && inputValue.length > 0
+
   return (
-    <div className="flex-1" ref={containerRef}>
-      <div className="relative">
-        <Command className="w-full" shouldFilter={false}>
-          <div className="flex items-center gap-1">
-            <Search className="text-lg" />
-            <Command.Input
-              placeholder={placeholder}
-              className="w-full bg-gray-500/10 rounded-md px-2 py-1 min-w-[200px] text-sm"
-              value={inputValue}
-              onValueChange={handleInputChange}
-              onFocus={() => setOpen(true)}
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus={autoFocus}
-            />
-          </div>
+    <div className="relative w-full max-w-[250px]" ref={containerRef}>
+      <Command
+        className="w-full"
+        shouldFilter={false}
+        loop
+        label="Search npm packages"
+      >
+        <div className="relative text-xs">
+          <Search className="pointer-events-none absolute left-1.5 top-1/2 size-3.5 -translate-y-1/2 text-gray-500" />
+          <Command.Input
+            placeholder={placeholder}
+            className="h-6 w-full min-w-[180px] rounded bg-gray-500/10 py-0.5 pl-6 pr-6 text-xs outline-none"
+            value={inputValue}
+            onValueChange={setInputValue}
+            onFocus={() => setOpen(true)}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus={autoFocus}
+          />
           {searchQuery.isFetching && (
-            <div className="absolute right-2 top-0 bottom-0 flex items-center justify-center">
-              <Spinner className="text-sm" />
+            <div className="pointer-events-none absolute bottom-0 right-1.5 top-0 flex items-center justify-center">
+              <Spinner className="text-xs" />
+            </div>
+          )}
+        </div>
+        <Command.List
+          className={twMerge(
+            'absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded bg-white text-xs shadow-lg divide-y divide-gray-500/10 dark:bg-gray-800',
+            !showList && 'hidden',
+          )}
+        >
+          {inputValue.trim().length < MIN_SEARCH_QUERY_LENGTH ? (
+            <div className="px-2 py-1.5 text-gray-500 dark:text-gray-400">
+              Keep typing to search...
             </div>
+          ) : searchQuery.isLoading ? (
+            <div className="px-2 py-1.5 text-gray-500 dark:text-gray-400">
+              Searching...
+            </div>
+          ) : !searchResults.length && !showCreateItem ? (
+            <div className="px-2 py-1.5 text-gray-500 dark:text-gray-400">
+              No packages found
+            </div>
+          ) : null}
+          {showCreateItem && (
+            <Command.Item
+              key={CREATE_ITEM_VALUE}
+              value={CREATE_ITEM_VALUE}
+              onSelect={handleSelect}
+              className="cursor-pointer px-2 py-1.5 hover:bg-gray-500/20 data-[selected=true]:bg-gray-500/20"
+            >
+              <div className="font-medium">Use "{trimmedInput}"</div>
+            </Command.Item>
           )}
-          {inputValue.length && open ? (
-            <Command.List className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 overflow-auto divide-y divide-gray-500/10">
-              {inputValue.length < 3 ? (
-                <div className="px-3 py-2">Keep typing to search...</div>
-              ) : searchQuery.isLoading ? (
-                <div className="px-3 py-2 flex items-center gap-2">
-                  Searching...
+          {searchResults.map((item) => (
+            <Command.Item
+              key={item.name}
+              value={item.name}
+              onSelect={handleSelect}
+              className="cursor-pointer px-2 py-1.5 hover:bg-gray-500/20 data-[selected=true]:bg-gray-500/20"
+            >
+              <div className="font-medium">{item.name}</div>
+              {item.description ? (
+                <div className="text-[11px] leading-snug text-gray-500 dark:text-gray-400">
+                  {item.description}
                 </div>
-              ) : !results?.length ? (
-                <div className="px-3 py-2">No packages found</div>
               ) : null}
-              {results?.map((item) => (
-                <Command.Item
-                  key={item.name}
-                  value={item.name}
-                  onSelect={handleSelect}
-                  className="px-3 py-2 cursor-pointer hover:bg-gray-500/20 data-[selected=true]:bg-gray-500/20"
-                >
-                  <div className="font-medium">{item.label || item.name}</div>
-                  <div className="text-sm text-gray-500 dark:text-gray-400">
-                    {item.description}
-                  </div>
-                  <div className="text-xs text-gray-400 dark:text-gray-500">
-                    {item.version ? `v${item.version}• ` : ''}
-                    {item.publisher?.username}
-                  </div>
-                </Command.Item>
-              ))}
-            </Command.List>
-          ) : null}
-        </Command>
-      </div>
+              <div className="text-[10px] leading-snug text-gray-400 dark:text-gray-500">
+                {item.version ? `v${item.version}` : ''}
+                {item.version && item.publisher?.username ? ' • ' : ''}
+                {item.publisher?.username}
+              </div>
+            </Command.Item>
+          ))}
+        </Command.List>
+      </Command>
     </div>
   )
 }
diff --git a/src/components/npm-stats/PopularComparisons.tsx b/src/components/npm-stats/PopularComparisons.tsx
index 6305847e8..7331c06c0 100644
--- a/src/components/npm-stats/PopularComparisons.tsx
+++ b/src/components/npm-stats/PopularComparisons.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Link } from '@tanstack/react-router'
-import type { PackageGroup } from './NPMStatsChart'
+import { getPackageGroupLabel, type PackageGroup } from './shared'
 import { defaultColors } from '~/utils/npm-packages'
 
 export type ComparisonGroup = {
@@ -16,6 +16,8 @@ type PopularComparisonsProps = {
   onSelect?: (comparison: ComparisonGroup) => void
 }
 
+const PREVIEW_PACKAGE_LIMIT = 8
+
 export function PopularComparisons({
   comparisons,
   linkTo = '.',
@@ -23,45 +25,63 @@ export function PopularComparisons({
 }: PopularComparisonsProps) {
   return (
     <div>
-      <h2 className="text-xl font-semibold mb-4">Popular Comparisons</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <h2 className="text-lg font-semibold mb-3">Presets</h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-3">
         {comparisons.map((comparison) => {
-          const baselinePackage = comparison.packageGroups.find(
+          const baselinePackages = comparison.packageGroups.filter(
             (pg) => pg.baseline,
           )
+          const previewPackageGroups = comparison.packageGroups
+            .filter((d) => !d.baseline)
+            .slice(0, PREVIEW_PACKAGE_LIMIT)
+          const hiddenPreviewCount =
+            comparison.packageGroups.filter((d) => !d.baseline).length -
+            previewPackageGroups.length
 
           const content = (
-            <div className="space-y-4">
-              <div className="space-y-2">
+            <div className="space-y-2">
+              <div className="space-y-1.5">
                 <div>
-                  <h3 className="font-medium">{comparison.title}</h3>
+                  <h3 className="text-sm font-medium leading-tight">
+                    {comparison.title}
+                  </h3>
                 </div>
-                <div className="flex flex-wrap gap-2">
-                  {comparison.packageGroups
-                    .filter((d) => !d.baseline)
-                    .map((packageGroup) => (
+                <div className="flex flex-wrap gap-x-2 gap-y-1">
+                  {previewPackageGroups.map((packageGroup) => (
+                    <div
+                      key={getPackageGroupLabel(packageGroup)}
+                      className="flex items-center gap-1 text-xs leading-tight"
+                    >
                       <div
-                        key={packageGroup.packages[0]?.name}
-                        className="flex items-center gap-1.5 text-sm"
-                      >
-                        <div
-                          className="w-3 h-3 rounded-full"
-                          style={{
-                            backgroundColor:
-                              packageGroup.color || defaultColors[0],
-                          }}
-                        />
-                        <span>{packageGroup.packages[0]?.name}</span>
-                      </div>
-                    ))}
+                        className="w-2.5 h-2.5 rounded-full"
+                        style={{
+                          backgroundColor:
+                            packageGroup.color || defaultColors[0],
+                        }}
+                      />
+                      <span>{getPackageGroupLabel(packageGroup)}</span>
+                    </div>
+                  ))}
+                  {hiddenPreviewCount > 0 && (
+                    <div className="text-xs leading-tight text-gray-500 dark:text-gray-400">
+                      + {hiddenPreviewCount} more
+                    </div>
+                  )}
                 </div>
               </div>
-              {baselinePackage && (
-                <div className="flex items-center gap-1 text-sm">
+              {baselinePackages.length > 0 && (
+                <div className="flex items-center gap-1 text-xs flex-wrap">
                   <div className="font-medium">Baseline:</div>
-                  <div className="bg-gray-500/10 rounded-md px-2 py-1 leading-none font-bold text-sm">
-                    {baselinePackage.packages[0]?.name}
-                  </div>
+                  {baselinePackages.map((pg, i) => (
+                    <React.Fragment key={getPackageGroupLabel(pg) || i}>
+                      {i > 0 && (
+                        <span className="text-blue-500/60 text-xs">+</span>
+                      )}
+                      <div className="bg-blue-500/10 text-blue-700 dark:text-blue-300 rounded px-1.5 py-0.5 leading-none font-bold">
+                        {getPackageGroupLabel(pg)}
+                      </div>
+                    </React.Fragment>
+                  ))}
                 </div>
               )}
             </div>
@@ -72,7 +92,7 @@ export function PopularComparisons({
               <button
                 key={comparison.title}
                 onClick={() => onSelect(comparison)}
-                className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors text-left w-full"
+                className="block p-3 bg-gray-500/10 hover:bg-gray-500/20 rounded-md transition-colors text-left w-full"
               >
                 {content}
               </button>
@@ -86,6 +106,7 @@ export function PopularComparisons({
               search={(prev: Record<string, unknown>) => ({
                 ...prev,
                 packageGroups: comparison.packageGroups,
+                bucketOffset: 0,
               })}
               resetScroll={false}
               onClick={() => {
@@ -94,7 +115,7 @@ export function PopularComparisons({
                   behavior: 'smooth',
                 })
               }}
-              className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors"
+              className="block p-3 bg-gray-500/10 hover:bg-gray-500/20 rounded-md transition-colors"
             >
               {content}
             </Link>
diff --git a/src/components/npm-stats/Resizable.tsx b/src/components/npm-stats/Resizable.tsx
index 7072d3f36..3cd2bbd01 100644
--- a/src/components/npm-stats/Resizable.tsx
+++ b/src/components/npm-stats/Resizable.tsx
@@ -1,68 +1,372 @@
 import * as React from 'react'
 
+export type ResizeChangeOptions = {
+  replace: boolean
+}
+
+export type ResizableSizeChange = {
+  height?: number
+  width?: number | undefined
+}
+
 export type ResizableProps = {
   height: number
-  onHeightChange: (height: number) => void
+  width?: number
+  onSizeChange: (
+    size: ResizableSizeChange,
+    options: ResizeChangeOptions,
+  ) => void
   children: React.ReactNode
   minHeight?: number
+  minWidth?: number
+  fullWidthSnapThreshold?: number
+  enableWidthResize?: boolean
 }
 
+type ResizePreviewSize = {
+  height: number
+  width: number
+}
+
+const dimensionTooltipStyles =
+  'pointer-events-none absolute z-50 whitespace-nowrap rounded bg-gray-900 px-1.5 py-0.5 text-[10px] font-medium leading-4 text-white shadow-sm dark:bg-gray-100 dark:text-gray-900'
+
 export function Resizable({
   height,
-  onHeightChange,
+  width,
+  onSizeChange,
   children,
   minHeight = 300,
+  minWidth = 320,
+  fullWidthSnapThreshold = 12,
+  enableWidthResize = true,
 }: ResizableProps) {
-  const [isDragging, setIsDragging] = React.useState(false)
-  const [dragEl, setDragEl] = React.useState<HTMLDivElement | null>(null)
+  const [isHeightDragging, setIsHeightDragging] = React.useState(false)
+  const [isWidthDragging, setIsWidthDragging] = React.useState(false)
+  const [isCornerDragging, setIsCornerDragging] = React.useState(false)
+  const [containerWidth, setContainerWidth] = React.useState(0)
+  const [previewSize, setPreviewSize] =
+    React.useState<ResizePreviewSize | null>(null)
+  const containerRef = React.useRef<HTMLDivElement>(null)
   const startYRef = React.useRef<number>(0)
+  const startXRef = React.useRef<number>(0)
   const startHeightRef = React.useRef<number>(height)
+  const startWidthRef = React.useRef<number>(width ?? 0)
 
-  const onHeightChangeRef = React.useRef(onHeightChange)
+  const onSizeChangeRef = React.useRef(onSizeChange)
   React.useEffect(() => {
-    onHeightChangeRef.current = onHeightChange
+    onSizeChangeRef.current = onSizeChange
   })
 
   React.useEffect(() => {
-    if (!dragEl) return
+    const container = containerRef.current
+    if (!container) return
+
+    const updateContainerWidth = () => {
+      setContainerWidth(Math.round(container.getBoundingClientRect().width))
+    }
+
+    updateContainerWidth()
+
+    const ownerWindow = container.ownerDocument.defaultView
+    if (!ownerWindow?.ResizeObserver) {
+      ownerWindow?.addEventListener('resize', updateContainerWidth)
+      return () => {
+        ownerWindow?.removeEventListener('resize', updateContainerWidth)
+      }
+    }
+
+    const resizeObserver = new ownerWindow.ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      setContainerWidth(Math.round(entry.contentRect.width))
+    })
+
+    resizeObserver.observe(container)
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+
+  const getMaxWidth = React.useCallback(() => {
+    return (
+      containerWidth ||
+      Math.round(containerRef.current?.getBoundingClientRect().width ?? 0)
+    )
+  }, [containerWidth])
+
+  const getHeightFromDelta = React.useCallback(
+    (deltaY: number) => Math.max(minHeight, startHeightRef.current + deltaY),
+    [minHeight],
+  )
+
+  const getWidthFromDelta = React.useCallback(
+    ({ deltaX, maxWidth }: { deltaX: number; maxWidth: number }) => {
+      const rawWidth = startWidthRef.current + deltaX * 2
+      const nextMinWidth = Math.min(minWidth, maxWidth)
+      const nextWidth = Math.max(
+        nextMinWidth,
+        Math.min(maxWidth, Math.round(rawWidth)),
+      )
+
+      if (nextWidth >= maxWidth - fullWidthSnapThreshold) {
+        return undefined
+      }
 
-    const handleMouseDown = (e: MouseEvent) => {
-      setIsDragging(true)
+      return nextWidth
+    },
+    [fullWidthSnapThreshold, minWidth],
+  )
+
+  const handleHeightMouseDown = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.preventDefault()
+      setIsHeightDragging(true)
+      const currentWidth = width ?? getMaxWidth()
+      setPreviewSize({ height, width: currentWidth })
       startYRef.current = e.clientY
       startHeightRef.current = height
 
+      const ownerDocument = e.currentTarget.ownerDocument
+      const previousCursor = ownerDocument.body.style.cursor
+      const previousUserSelect = ownerDocument.body.style.userSelect
+      ownerDocument.body.style.cursor = 'ns-resize'
+      ownerDocument.body.style.userSelect = 'none'
+
       const handleMouseMove = (e: MouseEvent) => {
         const deltaY = e.clientY - startYRef.current
-        const newHeight = Math.max(minHeight, startHeightRef.current + deltaY)
-        onHeightChangeRef.current(newHeight)
+        const newHeight = getHeightFromDelta(deltaY)
+        setPreviewSize({ height: newHeight, width: currentWidth })
+        onSizeChangeRef.current({ height: newHeight }, { replace: true })
       }
 
-      const handleMouseUp = () => {
-        setIsDragging(false)
-        document.removeEventListener('mousemove', handleMouseMove)
-        document.removeEventListener('mouseup', handleMouseUp)
+      const handleMouseUp = (e: MouseEvent) => {
+        const deltaY = e.clientY - startYRef.current
+        const newHeight = getHeightFromDelta(deltaY)
+        if (newHeight !== startHeightRef.current) {
+          onSizeChangeRef.current({ height: newHeight }, { replace: false })
+        } else {
+          onSizeChangeRef.current({}, { replace: false })
+        }
+
+        setIsHeightDragging(false)
+        setPreviewSize(null)
+        ownerDocument.body.style.cursor = previousCursor
+        ownerDocument.body.style.userSelect = previousUserSelect
+        ownerDocument.removeEventListener('mousemove', handleMouseMove)
+        ownerDocument.removeEventListener('mouseup', handleMouseUp)
       }
 
-      document.addEventListener('mousemove', handleMouseMove)
-      document.addEventListener('mouseup', handleMouseUp)
-    }
+      ownerDocument.addEventListener('mousemove', handleMouseMove)
+      ownerDocument.addEventListener('mouseup', handleMouseUp)
+    },
+    [getHeightFromDelta, getMaxWidth, height, width],
+  )
 
-    dragEl.addEventListener('mousedown', handleMouseDown)
-    return () => {
-      dragEl?.removeEventListener('mousedown', handleMouseDown)
-    }
-  }, [dragEl, height, minHeight])
+  const handleWidthMouseDown = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const maxWidth = getMaxWidth()
+      if (!maxWidth) return
+
+      e.preventDefault()
+      setIsWidthDragging(true)
+      startXRef.current = e.clientX
+      startWidthRef.current = Math.min(width ?? maxWidth, maxWidth)
+      setPreviewSize({ height, width: startWidthRef.current })
+
+      const ownerDocument = e.currentTarget.ownerDocument
+      const previousCursor = ownerDocument.body.style.cursor
+      const previousUserSelect = ownerDocument.body.style.userSelect
+      ownerDocument.body.style.cursor = 'ew-resize'
+      ownerDocument.body.style.userSelect = 'none'
+
+      const handleMouseMove = (e: MouseEvent) => {
+        const deltaX = e.clientX - startXRef.current
+        const newWidth = getWidthFromDelta({ deltaX, maxWidth })
+        setPreviewSize({ height, width: newWidth ?? maxWidth })
+        onSizeChangeRef.current({ width: newWidth }, { replace: true })
+      }
+
+      const handleMouseUp = (e: MouseEvent) => {
+        const deltaX = e.clientX - startXRef.current
+        const newWidth = getWidthFromDelta({ deltaX, maxWidth })
+        if (newWidth !== width) {
+          onSizeChangeRef.current({ width: newWidth }, { replace: false })
+        } else {
+          onSizeChangeRef.current({}, { replace: false })
+        }
+
+        setIsWidthDragging(false)
+        setPreviewSize(null)
+        ownerDocument.body.style.cursor = previousCursor
+        ownerDocument.body.style.userSelect = previousUserSelect
+        ownerDocument.removeEventListener('mousemove', handleMouseMove)
+        ownerDocument.removeEventListener('mouseup', handleMouseUp)
+      }
+
+      ownerDocument.addEventListener('mousemove', handleMouseMove)
+      ownerDocument.addEventListener('mouseup', handleMouseUp)
+    },
+    [getMaxWidth, getWidthFromDelta, height, width],
+  )
+
+  const handleWidthDoubleClick = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.preventDefault()
+      e.stopPropagation()
+      if (width !== undefined) {
+        onSizeChangeRef.current({ width: undefined }, { replace: false })
+      }
+    },
+    [width],
+  )
+
+  const handleCornerMouseDown = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const maxWidth = getMaxWidth()
+      if (!maxWidth) return
+
+      e.preventDefault()
+      e.stopPropagation()
+      setIsHeightDragging(true)
+      setIsWidthDragging(true)
+      setIsCornerDragging(true)
+      startXRef.current = e.clientX
+      startYRef.current = e.clientY
+      startHeightRef.current = height
+      startWidthRef.current = Math.min(width ?? maxWidth, maxWidth)
+      setPreviewSize({ height, width: startWidthRef.current })
+
+      const ownerDocument = e.currentTarget.ownerDocument
+      const previousCursor = ownerDocument.body.style.cursor
+      const previousUserSelect = ownerDocument.body.style.userSelect
+      ownerDocument.body.style.cursor = 'nwse-resize'
+      ownerDocument.body.style.userSelect = 'none'
+
+      const handleMouseMove = (e: MouseEvent) => {
+        const deltaX = e.clientX - startXRef.current
+        const deltaY = e.clientY - startYRef.current
+        const newHeight = getHeightFromDelta(deltaY)
+        const newWidth = getWidthFromDelta({ deltaX, maxWidth })
+
+        setPreviewSize({ height: newHeight, width: newWidth ?? maxWidth })
+        onSizeChangeRef.current(
+          { height: newHeight, width: newWidth },
+          { replace: true },
+        )
+      }
+
+      const handleMouseUp = (e: MouseEvent) => {
+        const deltaX = e.clientX - startXRef.current
+        const deltaY = e.clientY - startYRef.current
+        const newHeight = getHeightFromDelta(deltaY)
+        const newWidth = getWidthFromDelta({ deltaX, maxWidth })
+        const hasHeightChanged = newHeight !== startHeightRef.current
+        const hasWidthChanged = newWidth !== width
+
+        if (hasHeightChanged || hasWidthChanged) {
+          onSizeChangeRef.current(
+            {
+              ...(hasHeightChanged ? { height: newHeight } : {}),
+              ...(hasWidthChanged ? { width: newWidth } : {}),
+            },
+            { replace: false },
+          )
+        } else {
+          onSizeChangeRef.current({}, { replace: false })
+        }
+
+        setIsHeightDragging(false)
+        setIsWidthDragging(false)
+        setIsCornerDragging(false)
+        setPreviewSize(null)
+        ownerDocument.body.style.cursor = previousCursor
+        ownerDocument.body.style.userSelect = previousUserSelect
+        ownerDocument.removeEventListener('mousemove', handleMouseMove)
+        ownerDocument.removeEventListener('mouseup', handleMouseUp)
+      }
+
+      ownerDocument.addEventListener('mousemove', handleMouseMove)
+      ownerDocument.addEventListener('mouseup', handleMouseUp)
+    },
+    [getHeightFromDelta, getMaxWidth, getWidthFromDelta, height, width],
+  )
+
+  const visibleWidth = Math.round(previewSize?.width ?? width ?? containerWidth)
+  const visibleHeight = Math.round(previewSize?.height ?? height)
+  const widthLabel = `${visibleWidth}px`
+  const heightLabel = `${visibleHeight}px`
+  const cornerLabel = `${visibleWidth}px x ${visibleHeight}px`
+  const showWidthTooltip = isWidthDragging && !isCornerDragging
+  const showHeightTooltip = isHeightDragging && !isCornerDragging
 
   return (
-    <div className="relative" style={{ height }}>
-      {children}
+    <div ref={containerRef} className="relative w-full">
       <div
-        ref={setDragEl}
-        className={`absolute bottom-0 left-0 right-0 h-2 cursor-ns-resize flex items-center justify-center select-none ${
-          isDragging ? 'bg-blue-500' : 'hover:bg-gray-500/20'
-        }`}
+        className="relative mx-auto"
+        style={{ width: width ?? '100%', maxWidth: '100%' }}
       >
-        <div className="w-8 h-1 bg-gray-400 rounded-full" />
+        {children}
+        {enableWidthResize ? (
+          <div
+            role="separator"
+            aria-label="Resize chart width"
+            aria-orientation="vertical"
+            onMouseDown={handleWidthMouseDown}
+            onDoubleClick={handleWidthDoubleClick}
+            className="group absolute right-0 top-0 z-20 flex w-3 cursor-ew-resize select-none items-center justify-center hover:bg-gray-500/20"
+            style={{ height: Math.max(0, height - 8) }}
+          >
+            <span
+              aria-hidden="true"
+              className={`${dimensionTooltipStyles} right-full top-1/2 mr-1 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 ${
+                showWidthTooltip ? 'opacity-100' : ''
+              }`}
+            >
+              {widthLabel}
+            </span>
+            <div className="h-8 w-1 rounded-full bg-gray-400" />
+          </div>
+        ) : null}
+        {enableWidthResize ? (
+          <div
+            role="separator"
+            aria-label="Resize chart width and height"
+            aria-orientation="horizontal"
+            onMouseDown={handleCornerMouseDown}
+            onDoubleClick={handleWidthDoubleClick}
+            className="group absolute right-0 z-40 flex h-5 w-5 cursor-nwse-resize select-none items-end justify-end rounded-tl-md p-1 hover:bg-gray-500/20"
+            style={{ top: Math.max(0, height - 20) }}
+          >
+            <span
+              aria-hidden="true"
+              className={`${dimensionTooltipStyles} bottom-full right-full mb-1 mr-1 opacity-0 transition-opacity group-hover:opacity-100 ${
+                isCornerDragging ? 'opacity-100' : ''
+              }`}
+            >
+              {cornerLabel}
+            </span>
+            <div className="h-2.5 w-2.5 border-b-2 border-r-2 border-gray-400" />
+          </div>
+        ) : null}
+        <div
+          role="separator"
+          aria-label="Resize chart height"
+          aria-orientation="horizontal"
+          onMouseDown={handleHeightMouseDown}
+          className="group absolute left-0 right-0 z-30 flex h-2 cursor-ns-resize select-none items-center justify-center hover:bg-gray-500/20"
+          style={{ top: Math.max(0, height - 2) }}
+        >
+          <span
+            aria-hidden="true"
+            className={`${dimensionTooltipStyles} bottom-full left-1/2 mb-1 -translate-x-1/2 opacity-0 transition-opacity group-hover:opacity-100 ${
+              showHeightTooltip ? 'opacity-100' : ''
+            }`}
+          >
+            {heightLabel}
+          </span>
+          <div className="h-1 w-8 rounded-full bg-gray-400" />
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/npm-stats/StatsTable.tsx b/src/components/npm-stats/StatsTable.tsx
index 6f09b611b..fe91c52b0 100644
--- a/src/components/npm-stats/StatsTable.tsx
+++ b/src/components/npm-stats/StatsTable.tsx
@@ -2,21 +2,27 @@ import * as React from 'react'
 import * as d3 from 'd3'
 import { X, EyeOff } from 'lucide-react'
 import { Tooltip } from '~/components/Tooltip'
+import { binningOptionsByType } from './binning'
 import {
   type PackageGroup,
   type TransformMode,
   type NpmQueryData,
   type BinType,
-  binningOptionsByType,
+  type ViewMode,
   getPackageColor,
+  getPackageGroupLabel,
+  hasPackageGroupLabel,
+  isPackageGroupHidden,
   formatNumber,
-} from './NPMStatsChart'
+} from './shared'
 
 export interface StatsTableProps {
   queryData: NpmQueryData | undefined
   packageGroups: PackageGroup[]
-  binOption: (typeof binningOptionsByType)[BinType]
+  binType: BinType
   transform: TransformMode
+  viewMode?: ViewMode
+  packageGroupIndexes?: number[]
   onColorClick: (packageName: string, event: React.MouseEvent) => void
   onToggleVisibility: (index: number, packageName: string) => void
   onRemove: (index: number) => void
@@ -24,6 +30,11 @@ export interface StatsTableProps {
 
 interface PackageStat {
   package: string
+  packageName: string
+  packages: Array<{
+    hidden: boolean | undefined
+    name: string
+  }>
   totalDownloads: number
   binDownloads: number
   growth: number
@@ -39,20 +50,38 @@ interface PackageStat {
 function calculateStats(
   queryData: NpmQueryData | undefined,
   packageGroups: PackageGroup[],
-  binOption: StatsTableProps['binOption'],
+  binType: BinType,
+  viewMode: ViewMode,
+  packageGroupIndexes: number[] | undefined,
 ): PackageStat[] {
   if (!queryData) return []
 
+  const binOption = binningOptionsByType[binType]
+
   return queryData
     .map((packageGroupDownloads, index) => {
+      if (packageGroups[index]?.baseline) return null
       if (!packageGroupDownloads.packages.some((p) => p.downloads.length)) {
         return null
       }
 
+      const packageGroup = packageGroups[index]
       const firstPackage = packageGroupDownloads.packages[0]
       if (!firstPackage?.name) return null
 
-      const sortedDownloads = packageGroupDownloads.packages
+      const shouldAlwaysIncludeFirstPackage =
+        !packageGroup ||
+        !hasPackageGroupLabel(packageGroup) ||
+        !!packageGroup.baseline
+
+      const visiblePackages = packageGroupDownloads.packages.filter((p, i) => {
+        const hiddenState = packageGroup?.packages.find(
+          (pg) => pg.name === p.name,
+        )?.hidden
+        return (i === 0 && shouldAlwaysIncludeFirstPackage) || !hiddenState
+      })
+
+      const sortedDownloads = visiblePackages
         .flatMap((p) => p.downloads)
         .sort(
           (a, b) =>
@@ -64,9 +93,12 @@ function calculateStats(
       const now = d3.utcDay(new Date())
       const partialBinEnd = binUnit.floor(now)
 
-      const filteredDownloads = sortedDownloads.filter(
-        (d) => d3.utcDay(new Date(d.day)) < partialBinEnd,
-      )
+      const filteredDownloads =
+        viewMode === 'latest'
+          ? sortedDownloads
+          : sortedDownloads.filter(
+              (d) => d3.utcDay(new Date(d.day)) < partialBinEnd,
+            )
 
       const binnedDownloads = d3.sort(
         d3.rollup(
@@ -88,14 +120,24 @@ function calculateStats(
       const growthPercentage = growth / (firstBin[1] || 1)
 
       return {
-        package: firstPackage.name,
+        package: packageGroup
+          ? getPackageGroupLabel(packageGroup)
+          : firstPackage.name,
+        packageName:
+          packageGroup && hasPackageGroupLabel(packageGroup)
+            ? getPackageGroupLabel(packageGroup)
+            : firstPackage.name,
+        packages: packageGroup?.packages.map((pkg) => ({
+          hidden: pkg.hidden,
+          name: pkg.name,
+        })) ?? [{ hidden: firstPackage.hidden, name: firstPackage.name }],
         totalDownloads: d3.sum(binnedDownloads, (d) => d[1]),
         binDownloads: lastBin[1],
         growth,
         growthPercentage,
         color,
-        hidden: firstPackage.hidden,
-        index,
+        hidden: packageGroup ? isPackageGroupHidden(packageGroup) : undefined,
+        index: packageGroupIndexes?.[index] ?? index,
       }
     })
     .filter((stat): stat is PackageStat => stat != null)
@@ -108,18 +150,32 @@ function calculateStats(
 export function StatsTable({
   queryData,
   packageGroups,
-  binOption,
+  binType,
   transform,
+  viewMode = 'history',
+  packageGroupIndexes,
   onColorClick,
   onToggleVisibility,
   onRemove,
 }: StatsTableProps) {
-  const stats = calculateStats(queryData, packageGroups, binOption)
+  const binOption = binningOptionsByType[binType]
+  const stats = calculateStats(
+    queryData,
+    packageGroups,
+    binType,
+    viewMode,
+    packageGroupIndexes,
+  )
   const sortedStats = [...stats].sort((a, b) =>
     transform === 'normalize-y'
       ? b.growth - a.growth
       : b.binDownloads - a.binDownloads,
   )
+  const showPackagesColumn = packageGroups.some(
+    (packageGroup) =>
+      !packageGroup.baseline &&
+      (hasPackageGroupLabel(packageGroup) || packageGroup.packages.length > 1),
+  )
 
   return (
     <div className="overflow-x-auto rounded-xl">
@@ -129,11 +185,19 @@ export function StatsTable({
             <th className="px-3 sm:px-6 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
               Package Name
             </th>
+            {showPackagesColumn && (
+              <th className="px-3 sm:px-6 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                NPM Packages
+              </th>
+            )}
             <th className="px-3 sm:px-6 py-2 sm:py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-              Total Period Downloads
+              {viewMode === 'latest'
+                ? 'Selected Bucket Downloads'
+                : 'Total Period Downloads'}
             </th>
             <th className="px-3 sm:px-6 py-2 sm:py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-              Downloads last {binOption.single}
+              Downloads {viewMode === 'latest' ? 'selected' : 'last'}{' '}
+              {binOption.single}
             </th>
           </tr>
         </thead>
@@ -144,7 +208,7 @@ export function StatsTable({
                 <div className="flex items-center gap-2">
                   <Tooltip content="Change color">
                     <button
-                      onClick={(e) => onColorClick(stat.package, e)}
+                      onClick={(e) => onColorClick(stat.packageName, e)}
                       className="hover:opacity-80"
                     >
                       <div
@@ -158,7 +222,7 @@ export function StatsTable({
                       <Tooltip content="Toggle visibility">
                         <button
                           onClick={() =>
-                            onToggleVisibility(stat.index, stat.package)
+                            onToggleVisibility(stat.index, stat.packageName)
                           }
                           className="p-0.5 hover:text-blue-500 flex items-center gap-1"
                         >
@@ -180,6 +244,25 @@ export function StatsTable({
                   </div>
                 </div>
               </td>
+              {showPackagesColumn && (
+                <td className="px-3 sm:px-6 py-1 sm:py-2 text-xs sm:text-sm text-gray-500 dark:text-gray-400">
+                  <div className="flex flex-wrap gap-1">
+                    {stat.packages.slice(0, 4).map((pkg) => (
+                      <span
+                        key={pkg.name}
+                        className={`rounded bg-gray-500/10 px-1.5 py-0.5 leading-none ${pkg.hidden ? 'opacity-50' : ''}`}
+                      >
+                        {pkg.name}
+                      </span>
+                    ))}
+                    {stat.packages.length > 4 && (
+                      <span className="rounded bg-gray-500/10 px-1.5 py-0.5 leading-none">
+                        + {stat.packages.length - 4} more
+                      </span>
+                    )}
+                  </div>
+                </td>
+              )}
               <td className="px-3 sm:px-6 py-1 sm:py-2 whitespace-nowrap text-xs sm:text-sm text-gray-500 dark:text-gray-400 text-right">
                 {formatNumber(stat.totalDownloads)}
               </td>
diff --git a/src/components/npm-stats/binning.ts b/src/components/npm-stats/binning.ts
new file mode 100644
index 000000000..3f22bd199
--- /dev/null
+++ b/src/components/npm-stats/binning.ts
@@ -0,0 +1,198 @@
+import * as d3 from 'd3'
+
+import type { BinType, TimeRange } from './shared'
+
+export const NPM_STATS_START_DATE = d3.utcDay(new Date('2015-01-10'))
+
+export const binningOptionsByType = {
+  yearly: {
+    label: 'Yearly',
+    value: 'yearly',
+    single: 'year',
+    bin: d3.utcYear,
+  },
+  monthly: {
+    label: 'Monthly',
+    value: 'monthly',
+    single: 'month',
+    bin: d3.utcMonth,
+  },
+  weekly: {
+    label: 'Weekly',
+    value: 'weekly',
+    single: 'week',
+    bin: d3.utcWeek,
+  },
+  daily: {
+    label: 'Daily',
+    value: 'daily',
+    single: 'day',
+    bin: d3.utcDay,
+  },
+} as const satisfies Record<
+  BinType,
+  {
+    label: string
+    value: BinType
+    single: string
+    bin: (date: Date) => Date
+  }
+>
+
+export function getUtcToday() {
+  const today = d3.utcDay(new Date())
+  today.setHours(0, 0, 0, 0)
+  return today
+}
+
+export function getUtcDay(date: Date) {
+  return d3.utcDay(date)
+}
+
+export function getHistoryStartDate(range: TimeRange, now = getUtcToday()) {
+  switch (range) {
+    case '7-days':
+      return d3.utcDay.offset(now, -7)
+    case '30-days':
+      return d3.utcDay.offset(now, -30)
+    case '90-days':
+      return d3.utcDay.offset(now, -90)
+    case '180-days':
+      return d3.utcDay.offset(now, -180)
+    case '365-days':
+      return d3.utcDay.offset(now, -365)
+    case '730-days':
+      return d3.utcDay.offset(now, -730)
+    case '1825-days':
+      return d3.utcDay.offset(now, -1825)
+    case 'all-time':
+      return NPM_STATS_START_DATE
+  }
+}
+
+export function formatNpmStatsDate(date: Date) {
+  return date.toISOString().split('T')[0]
+}
+
+export function getLatestBucketWindow({
+  binType,
+  bucketOffset,
+  now = getUtcToday(),
+}: {
+  binType: BinType
+  bucketOffset: number
+  now?: Date
+}) {
+  const binUnit = binningOptionsByType[binType].bin
+  const currentBucketStart = binUnit.floor(now)
+  const clampedOffset = Math.min(bucketOffset, 0)
+  const startDate = binUnit.offset(currentBucketStart, clampedOffset)
+  const nextBucketStart = binUnit.offset(startDate, 1)
+  const lastBucketDate = d3.utcDay.offset(nextBucketStart, -1)
+  const endDate = lastBucketDate > now ? now : lastBucketDate
+
+  return {
+    startDate,
+    endDate,
+    nextBucketStart,
+  }
+}
+
+export function getLatestBucketOffsetBounds({
+  binType,
+  range,
+  now = getUtcToday(),
+}: {
+  binType: BinType
+  range?: TimeRange
+  now?: Date
+}) {
+  const binUnit = binningOptionsByType[binType].bin
+  const currentBucketStart = binUnit.floor(now)
+  const rangeStartDate = range ? getHistoryStartDate(range, now) : undefined
+  const firstAvailableDate =
+    rangeStartDate && rangeStartDate > NPM_STATS_START_DATE
+      ? rangeStartDate
+      : NPM_STATS_START_DATE
+  const firstBucketStart = binUnit.floor(firstAvailableDate)
+  const minOffset = -binUnit.count(firstBucketStart, currentBucketStart)
+
+  return {
+    minOffset,
+    maxOffset: 0,
+  }
+}
+
+export function formatLatestBucketLabel({
+  binType,
+  startDate,
+  endDate,
+}: {
+  binType: BinType
+  startDate: Date
+  endDate: Date
+}) {
+  switch (binType) {
+    case 'yearly':
+      return startDate.toLocaleDateString('en-US', {
+        timeZone: 'UTC',
+        year: 'numeric',
+      })
+    case 'monthly':
+      return startDate.toLocaleDateString('en-US', {
+        timeZone: 'UTC',
+        month: 'long',
+        year: 'numeric',
+      })
+    case 'weekly':
+      return `${startDate.toLocaleDateString('en-US', {
+        timeZone: 'UTC',
+        month: 'short',
+        day: 'numeric',
+      })} - ${endDate.toLocaleDateString('en-US', {
+        timeZone: 'UTC',
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      })}`
+    case 'daily':
+      return startDate.toLocaleDateString('en-US', {
+        timeZone: 'UTC',
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+      })
+  }
+}
+
+export function getLatestBucketOffsetOptions({
+  binType,
+  range,
+  now = getUtcToday(),
+}: {
+  binType: BinType
+  range?: TimeRange
+  now?: Date
+}) {
+  const bounds = getLatestBucketOffsetBounds({ binType, range, now })
+  const options: Array<{ offset: number; label: string }> = []
+
+  for (
+    let bucketOffset = bounds.maxOffset;
+    bucketOffset >= bounds.minOffset;
+    bucketOffset--
+  ) {
+    const window = getLatestBucketWindow({ binType, bucketOffset, now })
+
+    options.push({
+      offset: bucketOffset,
+      label: formatLatestBucketLabel({
+        binType,
+        startDate: window.startDate,
+        endDate: window.endDate,
+      }),
+    })
+  }
+
+  return options
+}
diff --git a/src/components/npm-stats/index.ts b/src/components/npm-stats/index.ts
index eda7a9be1..9c1fd470b 100644
--- a/src/components/npm-stats/index.ts
+++ b/src/components/npm-stats/index.ts
@@ -1,24 +1,37 @@
+export { NPMStatsChart, type NPMStatsChartProps } from './NPMStatsChart'
+
+export type {
+  NpmQueryData,
+  PackageGroup,
+  BinType,
+  ChartType,
+  TransformMode,
+  ShowDataMode,
+  LatestBarSort,
+  BarOrientation,
+  TimeRange,
+  ViewMode,
+} from './shared'
+
 export {
-  NPMStatsChart,
-  type NPMStatsChartProps,
-  type NpmQueryData,
-  type PackageGroup,
-  type BinType,
-  type TransformMode,
-  type ShowDataMode,
-  type TimeRange,
-  type FacetValue,
   binTypeSchema,
+  chartTypeSchema,
   transformModeSchema,
   showDataModeSchema,
+  latestBarSortSchema,
+  barOrientationSchema,
+  viewModeSchema,
   binningOptions,
-  binningOptionsByType,
   timeRanges,
   defaultRangeBinTypes,
   getPackageColor,
   formatNumber,
   isBinningOptionValidForRange,
-} from './NPMStatsChart'
+  isChartTypeValidForViewMode,
+  getDefaultChartTypeForViewMode,
+} from './shared'
+
+export { binningOptionsByType } from './binning'
 
 export { PopularComparisons, type ComparisonGroup } from './PopularComparisons'
 
@@ -37,6 +50,11 @@ export { StatsTable, type StatsTableProps } from './StatsTable'
 
 export { NPMSummary } from './NPMSummary'
 
+export {
+  LatestBucketNavigator,
+  type LatestBucketNavigatorProps,
+} from './LatestBucketNavigator'
+
 export { ChartControls, type ChartControlsProps } from './ChartControls'
 
 export {
diff --git a/src/components/npm-stats/npmQueryOptions.ts b/src/components/npm-stats/npmQueryOptions.ts
index 9646a7ca5..a3b27e4b6 100644
--- a/src/components/npm-stats/npmQueryOptions.ts
+++ b/src/components/npm-stats/npmQueryOptions.ts
@@ -1,6 +1,19 @@
-import * as d3 from 'd3'
 import { keepPreviousData, queryOptions } from '@tanstack/react-query'
-import type { PackageGroup, TimeRange, NpmQueryData } from './NPMStatsChart'
+import type {
+  BinType,
+  NpmQueryData,
+  PackageGroup,
+  TimeRange,
+  ViewMode,
+} from './shared'
+import { fetchNpmDownloadsBulk } from '~/utils/stats-queries.functions'
+import {
+  formatNpmStatsDate,
+  getHistoryStartDate,
+  getLatestBucketWindow,
+  getUtcDay,
+  getUtcToday,
+} from './binning'
 
 /**
  * Shared TanStack Query options for fetching NPM download statistics.
@@ -12,39 +25,14 @@ export function npmQueryOptions({
 }: {
   packageGroups: PackageGroup[]
   range: TimeRange
+  viewMode?: ViewMode
+  binType?: BinType
+  bucketOffset?: number
 }) {
-  const now = d3.utcDay(new Date())
-  // Set to start of today to avoid timezone issues
-  now.setHours(0, 0, 0, 0)
-  const endDate = now
-
-  // NPM download statistics only go back to January 10, 2015
-  const NPM_STATS_START_DATE = d3.utcDay(new Date('2015-01-10'))
-
-  const startDate = (() => {
-    switch (range) {
-      case '7-days':
-        return d3.utcDay.offset(now, -7)
-      case '30-days':
-        return d3.utcDay.offset(now, -30)
-      case '90-days':
-        return d3.utcDay.offset(now, -90)
-      case '180-days':
-        return d3.utcDay.offset(now, -180)
-      case '365-days':
-        return d3.utcDay.offset(now, -365)
-      case '730-days':
-        return d3.utcDay.offset(now, -730)
-      case '1825-days':
-        return d3.utcDay.offset(now, -1825)
-      case 'all-time':
-        // Use NPM's stats start date - the API will return empty data for dates before packages existed
-        return NPM_STATS_START_DATE
-    }
-  })()
-
-  const formatDate = (date: Date) => {
-    return date.toISOString().split('T')[0]
+  const now = getUtcToday()
+  const dateWindow = {
+    startDate: getHistoryStartDate(range, now),
+    endDate: now,
   }
 
   return queryOptions({
@@ -57,9 +45,6 @@ export function npmQueryOptions({
     ],
     queryFn: async (): Promise<NpmQueryData> => {
       try {
-        // Import the bulk server function for fetching all npm downloads at once
-        const { fetchNpmDownloadsBulk } = await import('~/utils/stats.server')
-
         // Make a single bulk request for all packages
         const results = await fetchNpmDownloadsBulk({
           data: {
@@ -69,20 +54,20 @@ export function npmQueryOptions({
                 hidden: p.hidden,
               })),
             })),
-            startDate: formatDate(startDate),
-            endDate: formatDate(endDate),
+            startDate: formatNpmStatsDate(dateWindow.startDate),
+            endDate: formatNpmStatsDate(dateWindow.endDate),
           },
         })
 
         // Process results to match the expected format
-        return results.map((result, groupIndex) => {
-          let actualStartDate = startDate
+        return results.map((result: any, groupIndex: number) => {
+          let actualStartDate = dateWindow.startDate
 
           // Find the earliest non-zero download for this package group
           for (const pkg of result.packages) {
-            const firstNonZero = pkg.downloads.find((d) => d.downloads > 0)
+            const firstNonZero = pkg.downloads.find((d: any) => d.downloads > 0)
             if (firstNonZero) {
-              const firstNonZeroDate = d3.utcDay(new Date(firstNonZero.day))
+              const firstNonZeroDate = getUtcDay(new Date(firstNonZero.day))
               if (firstNonZeroDate < actualStartDate) {
                 actualStartDate = firstNonZeroDate
               }
@@ -90,14 +75,14 @@ export function npmQueryOptions({
           }
 
           return {
-            packages: result.packages.map((pkg) => ({
+            packages: result.packages.map((pkg: any) => ({
               ...packageGroups[groupIndex]?.packages.find(
                 (p) => p.name === pkg.name,
               ),
               downloads: pkg.downloads,
             })),
-            start: formatDate(actualStartDate),
-            end: formatDate(endDate),
+            start: formatNpmStatsDate(actualStartDate),
+            end: formatNpmStatsDate(dateWindow.endDate),
             error: result.error ?? undefined,
             actualStartDate,
           }
@@ -110,13 +95,45 @@ export function npmQueryOptions({
             ...pkg,
             downloads: [],
           })),
-          start: formatDate(startDate),
-          end: formatDate(endDate),
+          start: formatNpmStatsDate(dateWindow.startDate),
+          end: formatNpmStatsDate(dateWindow.endDate),
           error: 'Failed to fetch package data (see console for details)',
-          actualStartDate: startDate,
+          actualStartDate: dateWindow.startDate,
         }))
       }
     },
     placeholderData: keepPreviousData,
   })
 }
+
+export function selectLatestBucketQueryData({
+  queryData,
+  binType,
+  bucketOffset,
+  now = getUtcToday(),
+}: {
+  queryData: NpmQueryData | undefined
+  binType: BinType
+  bucketOffset: number
+  now?: Date
+}) {
+  if (!queryData) return undefined
+
+  const dateWindow = getLatestBucketWindow({ binType, bucketOffset, now })
+  const startTime = dateWindow.startDate.getTime()
+  const endTime = dateWindow.endDate.getTime()
+
+  return queryData.map((packageGroup) => ({
+    ...packageGroup,
+    packages: packageGroup.packages.map((pkg) => ({
+      ...pkg,
+      downloads: pkg.downloads.filter((download) => {
+        const dayTime = getUtcDay(new Date(download.day)).getTime()
+        return dayTime >= startTime && dayTime <= endTime
+      }),
+    })),
+    start: formatNpmStatsDate(dateWindow.startDate),
+    end: formatNpmStatsDate(dateWindow.endDate),
+    actualStartDate: dateWindow.startDate,
+  }))
+}
diff --git a/src/components/npm-stats/shared.ts b/src/components/npm-stats/shared.ts
new file mode 100644
index 000000000..930783130
--- /dev/null
+++ b/src/components/npm-stats/shared.ts
@@ -0,0 +1,232 @@
+import * as v from 'valibot'
+
+import { packageGroupSchema } from '~/routes/stats/npm/-comparisons'
+import { defaultColors } from '~/utils/npm-packages'
+
+export type PackageGroup = v.InferOutput<typeof packageGroupSchema>
+
+export function getPackageGroupLabel(packageGroup: PackageGroup): string {
+  return packageGroup.label?.trim() || packageGroup.packages[0]?.name || ''
+}
+
+export function hasPackageGroupLabel(packageGroup: PackageGroup): boolean {
+  return !!packageGroup.label?.trim()
+}
+
+export function isPackageGroupHidden(packageGroup: PackageGroup): boolean {
+  if (packageGroup.hidden !== undefined) return packageGroup.hidden
+
+  if (hasPackageGroupLabel(packageGroup) && !packageGroup.baseline) {
+    return false
+  }
+
+  return !!packageGroup.packages[0]?.hidden
+}
+
+export const binTypeSchema = v.picklist([
+  'yearly',
+  'monthly',
+  'weekly',
+  'daily',
+])
+export type BinType = v.InferOutput<typeof binTypeSchema>
+
+export const transformModeSchema = v.picklist(['none', 'normalize-y'])
+export type TransformMode = v.InferOutput<typeof transformModeSchema>
+
+export const showDataModeSchema = v.picklist(['all', 'complete'])
+export type ShowDataMode = v.InferOutput<typeof showDataModeSchema>
+
+export const latestBarSortSchema = v.picklist(['name', 'value'])
+export type LatestBarSort = v.InferOutput<typeof latestBarSortSchema>
+
+export const defaultPlaybackIntervalMs = 350
+export const maxPlaybackIntervalMs = 60000
+export const playbackIntervalMsSchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(1),
+  v.maxValue(maxPlaybackIntervalMs),
+)
+
+export const barOrientationSchema = v.picklist(['vertical', 'horizontal'])
+export type BarOrientation = v.InferOutput<typeof barOrientationSchema>
+
+export const viewModeSchema = v.picklist(['history', 'latest'])
+export type ViewMode = v.InferOutput<typeof viewModeSchema>
+
+export const chartTypeSchema = v.picklist([
+  'line',
+  'stacked',
+  'stacked-area',
+  'stacked-stream',
+  'bar',
+  'horizontal-bar',
+  'stacked-bar',
+])
+export type ChartType = v.InferOutput<typeof chartTypeSchema>
+
+export type TimeRange =
+  | '7-days'
+  | '30-days'
+  | '90-days'
+  | '180-days'
+  | '365-days'
+  | '730-days'
+  | '1825-days'
+  | 'all-time'
+
+export type NpmQueryData = Array<{
+  packages: Array<{
+    name?: string
+    hidden?: boolean
+    downloads: Array<{ day: string; downloads: number }>
+  }>
+  start: string
+  end: string
+  error?: string
+  actualStartDate?: Date
+}>
+
+export const binningOptions = [
+  {
+    label: 'Yearly',
+    value: 'yearly',
+    single: 'year',
+  },
+  {
+    label: 'Monthly',
+    value: 'monthly',
+    single: 'month',
+  },
+  {
+    label: 'Weekly',
+    value: 'weekly',
+    single: 'week',
+  },
+  {
+    label: 'Daily',
+    value: 'daily',
+    single: 'day',
+  },
+] as const
+
+export const historyChartTypes = [
+  { label: 'Line', value: 'line' },
+  { label: 'Stacked', value: 'stacked' },
+  { label: 'Stacked Area', value: 'stacked-area' },
+  { label: 'Stream', value: 'stacked-stream' },
+] as const satisfies ReadonlyArray<{
+  label: string
+  value: ChartType
+}>
+
+export const latestChartTypes = [
+  { label: 'Bar', value: 'bar' },
+  { label: 'Stacked Bar', value: 'stacked-bar' },
+] as const satisfies ReadonlyArray<{
+  label: string
+  value: ChartType
+}>
+
+export const timeRanges = [
+  { value: '7-days', label: '7 Days' },
+  { value: '30-days', label: '30 Days' },
+  { value: '90-days', label: '90 Days' },
+  { value: '180-days', label: '6 Months' },
+  { value: '365-days', label: '1 Year' },
+  { value: '730-days', label: '2 Years' },
+  { value: '1825-days', label: '5 Years' },
+  { value: 'all-time', label: 'All Time' },
+] as const
+
+export const defaultRangeBinTypes: Record<TimeRange, BinType> = {
+  '7-days': 'daily',
+  '30-days': 'daily',
+  '90-days': 'weekly',
+  '180-days': 'weekly',
+  '365-days': 'weekly',
+  '730-days': 'weekly',
+  '1825-days': 'weekly',
+  'all-time': 'weekly',
+}
+
+export function getPackageColor(
+  packageName: string,
+  packages: PackageGroup[],
+): string {
+  const packageInfo = packages.find(
+    (pkg) =>
+      pkg.label === packageName ||
+      pkg.packages.some((p) => p.name === packageName),
+  )
+
+  if (packageInfo?.color) {
+    return packageInfo.color
+  }
+
+  const packageIndex = packages.findIndex(
+    (pkg) =>
+      pkg.label === packageName ||
+      pkg.packages.some((p) => p.name === packageName),
+  )
+
+  return defaultColors[Math.max(packageIndex, 0) % defaultColors.length]
+}
+
+export function getBaselineDisplayName(packageGroups: PackageGroup[]): string {
+  const baselineNames = packageGroups
+    .filter((packageGroup) => packageGroup.baseline)
+    .flatMap((packageGroup) => {
+      const label = packageGroup.baselineLabel?.trim()
+      if (label) return [label]
+
+      const groupLabel = getPackageGroupLabel(packageGroup)
+      return groupLabel ? [groupLabel] : []
+    })
+
+  return [...new Set(baselineNames)].join(', ') || 'Baseline'
+}
+
+export const formatNumber = (num: number) => {
+  if (num >= 1_000_000) {
+    return `${(num / 1_000_000).toFixed(1)}M`
+  }
+  if (num >= 1_000) {
+    return `${(num / 1_000).toFixed(1)}k`
+  }
+  return num.toString()
+}
+
+export function isBinningOptionValidForRange(
+  range: TimeRange,
+  binType: BinType,
+): boolean {
+  switch (range) {
+    case '7-days':
+    case '30-days':
+      return binType === 'daily'
+    case '90-days':
+    case '180-days':
+    case '365-days':
+      return (
+        binType === 'daily' || binType === 'weekly' || binType === 'monthly'
+      )
+    case '730-days':
+    case '1825-days':
+    case 'all-time':
+      return true
+  }
+}
+
+export function isChartTypeValidForViewMode(
+  viewMode: ViewMode,
+  chartType: ChartType,
+): boolean {
+  const options = viewMode === 'history' ? historyChartTypes : latestChartTypes
+  return options.some((option) => option.value === chartType)
+}
+
+export function getDefaultChartTypeForViewMode(viewMode: ViewMode): ChartType {
+  return viewMode === 'history' ? 'line' : 'bar'
+}
diff --git a/src/components/shop/CartDrawer.tsx b/src/components/shop/CartDrawer.tsx
new file mode 100644
index 000000000..b290165b2
--- /dev/null
+++ b/src/components/shop/CartDrawer.tsx
@@ -0,0 +1,251 @@
+import * as Dialog from '@radix-ui/react-dialog'
+import { Link } from '@tanstack/react-router'
+import { Minus, Plus, ShoppingCart, Trash2, X } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { useCart, useRemoveCartLine, useUpdateCartLine } from '~/hooks/useCart'
+import { formatMoney, shopifyImageUrl } from '~/utils/shopify-format'
+import type { CartLineDetail } from '~/utils/shopify-queries'
+import { ShopLabel, ShopMono } from './ui'
+
+type CartDrawerProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+/**
+ * Slide-in cart drawer. Shares state with /shop/cart through the same
+ * useCart React Query key. The root element wears `shop-scope` because the
+ * drawer is portaled outside the ShopLayout tree.
+ */
+export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
+  const { cart, totalQuantity } = useCart()
+  const hasLines = !!cart && cart.lines.nodes.length > 0
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="cart-overlay fixed inset-0 z-[100] bg-black/40" />
+        <Dialog.Content
+          className={twMerge(
+            'shop-scope cart-panel',
+            'fixed right-4 top-[calc(var(--navbar-height,56px)+0.5rem)] z-[100]',
+            'w-[calc(100vw-2rem)] sm:w-[24rem]',
+            'max-h-[calc(100dvh-var(--navbar-height,56px)-1rem)]',
+            'flex flex-col rounded-xl',
+            'bg-shop-bg-2 border border-shop-line text-shop-text',
+            'shadow-[0_25px_50px_-12px_rgba(0,0,0,0.4)]',
+          )}
+          aria-describedby={undefined}
+        >
+          <header className="flex items-center justify-between px-5 py-3 border-b border-shop-line">
+            <Dialog.Title asChild>
+              <ShopLabel as="h2">
+                Cart{totalQuantity > 0 ? ` (${totalQuantity})` : ''}
+              </ShopLabel>
+            </Dialog.Title>
+            <Dialog.Close
+              aria-label="Close cart"
+              className="p-1 rounded-md text-shop-text-2 hover:text-shop-text"
+            >
+              <X className="w-3.5 h-3.5" />
+            </Dialog.Close>
+          </header>
+
+          {hasLines ? (
+            <>
+              <ul className="overflow-y-auto px-5 flex-1 min-h-0">
+                {cart.lines.nodes.map((line) => (
+                  <DrawerCartLine
+                    key={line.id}
+                    line={line}
+                    onClose={() => onOpenChange(false)}
+                  />
+                ))}
+              </ul>
+              <DrawerFooter cart={cart} onClose={() => onOpenChange(false)} />
+            </>
+          ) : (
+            <DrawerEmpty onClose={() => onOpenChange(false)} />
+          )}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+function DrawerEmpty({ onClose }: { onClose: () => void }) {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center gap-4 p-8 text-center text-shop-text-2">
+      <ShoppingCart className="w-10 h-10 text-shop-muted" />
+      <p>Your cart is empty.</p>
+      <Link
+        to="/shop"
+        onClick={onClose}
+        className="
+          inline-flex items-center gap-2 px-4 py-2.5 rounded-md
+          bg-shop-accent text-shop-accent-ink font-semibold text-[13px]
+          transition-[filter] hover:brightness-110 group
+        "
+      >
+        Shop all products
+        <span className="transition-transform group-hover:translate-x-[3px]">
+          →
+        </span>
+      </Link>
+    </div>
+  )
+}
+
+function DrawerFooter({
+  cart,
+  onClose,
+}: {
+  cart: NonNullable<ReturnType<typeof useCart>['cart']>
+  onClose: () => void
+}) {
+  const subtotal = cart.cost.subtotalAmount
+  return (
+    <footer className="px-5 py-4 flex flex-col gap-3 border-t border-shop-line">
+      <div className="flex justify-between text-sm">
+        <span className="text-shop-text-2">Subtotal</span>
+        <ShopMono className="font-medium text-shop-text">
+          {formatMoney(subtotal.amount, subtotal.currencyCode)}
+        </ShopMono>
+      </div>
+      <p className="font-shop-mono text-xs text-shop-muted tracking-[0.06em]">
+        Shipping and taxes calculated at checkout.
+      </p>
+      <a
+        href={cart.checkoutUrl}
+        className="
+          w-full h-10 rounded-md bg-shop-accent text-shop-accent-ink
+          font-semibold text-[13px] flex items-center justify-center gap-2
+          transition-[filter] hover:brightness-110 group
+        "
+      >
+        Checkout
+        <span className="transition-transform group-hover:translate-x-[3px]">
+          →
+        </span>
+      </a>
+      <Link
+        to="/shop/cart"
+        onClick={onClose}
+        className="text-center text-sm text-shop-text-2 hover:underline"
+      >
+        View cart
+      </Link>
+    </footer>
+  )
+}
+
+function DrawerCartLine({
+  line,
+  onClose,
+}: {
+  line: CartLineDetail
+  onClose: () => void
+}) {
+  const update = useUpdateCartLine()
+  const remove = useRemoveCartLine()
+  const { merchandise } = line
+  const options = merchandise.selectedOptions
+    .filter((o) => o.name.toLowerCase() !== 'title')
+    .map((o) => `${o.name}: ${o.value}`)
+    .join(' · ')
+
+  const isBusy = update.isPending || remove.isPending
+
+  return (
+    <li className="flex gap-3 py-4 border-b border-shop-line">
+      <Link
+        to="/shop/$handle"
+        params={{ handle: merchandise.product.handle }}
+        onClick={onClose}
+        className="shrink-0 w-16 h-16 rounded-md border border-shop-line bg-shop-panel overflow-hidden"
+      >
+        {merchandise.image ? (
+          <img
+            src={shopifyImageUrl(merchandise.image.url, {
+              width: 160,
+              format: 'webp',
+            })}
+            alt={merchandise.image.altText ?? merchandise.product.title}
+            className="w-full h-full object-cover"
+          />
+        ) : null}
+      </Link>
+      <div className="flex-1 min-w-0 flex flex-col gap-1">
+        <Link
+          to="/shop/$handle"
+          params={{ handle: merchandise.product.handle }}
+          onClick={onClose}
+          className="text-sm font-semibold text-shop-text hover:underline truncate"
+        >
+          {merchandise.product.title}
+        </Link>
+        {options ? (
+          <ShopMono className="block text-xs text-shop-muted truncate">
+            {options}
+          </ShopMono>
+        ) : null}
+        <div className="flex items-center justify-between mt-1">
+          <div className="inline-flex items-center border border-shop-line rounded-md text-xs">
+            <button
+              type="button"
+              onClick={() => {
+                if (line.quantity <= 1) {
+                  remove.mutate({ lineId: line.id })
+                } else {
+                  update.mutate({
+                    lineId: line.id,
+                    quantity: line.quantity - 1,
+                  })
+                }
+              }}
+              disabled={isBusy}
+              aria-label="Decrease quantity"
+              className="p-1.5 text-shop-text-2 hover:text-shop-text disabled:opacity-50"
+            >
+              <Minus className="w-3 h-3" />
+            </button>
+            <span className="font-shop-mono text-shop-text min-w-[1.5rem] text-center">
+              {line.quantity}
+            </span>
+            <button
+              type="button"
+              onClick={() =>
+                update.mutate({
+                  lineId: line.id,
+                  quantity: line.quantity + 1,
+                })
+              }
+              disabled={isBusy}
+              aria-label="Increase quantity"
+              className="p-1.5 text-shop-text-2 hover:text-shop-text disabled:opacity-50"
+            >
+              <Plus className="w-3 h-3" />
+            </button>
+          </div>
+          <div className="flex items-center gap-2">
+            <ShopMono className="text-sm font-medium text-shop-text">
+              {formatMoney(
+                line.cost.totalAmount.amount,
+                line.cost.totalAmount.currencyCode,
+              )}
+            </ShopMono>
+            <button
+              type="button"
+              onClick={() => remove.mutate({ lineId: line.id })}
+              disabled={isBusy}
+              aria-label="Remove from cart"
+              className="p-1 rounded-md text-shop-muted hover:text-shop-text disabled:opacity-50"
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </li>
+  )
+}
diff --git a/src/components/shop/ProductCard.tsx b/src/components/shop/ProductCard.tsx
new file mode 100644
index 000000000..4ce67bdd9
--- /dev/null
+++ b/src/components/shop/ProductCard.tsx
@@ -0,0 +1,257 @@
+import * as React from 'react'
+import { Link } from '@tanstack/react-router'
+import { ProductImage } from './ProductImage'
+import { ShopMono } from './ui'
+import { formatMoney, shopifyImageUrl } from '~/utils/shopify-format'
+import type { ProductListItem } from '~/utils/shopify-queries'
+
+const TWO_WEEKS_MS = 365 * 24 * 60 * 60 * 1000
+
+// Kept in sync with ProductDrawer COLOR_HEX — last token wins ("Vintage Black" → black)
+const COLOR_MAP: Record<string, string> = {
+  black: '#0a0a0a',
+  white: '#f5f5f0',
+  cream: '#e4dcc4',
+  bone: '#e4dcc4',
+  natural: '#ddd3b8',
+  vintage: '#e8e0d0',
+  fog: '#c9c6ba',
+  sand: '#c8b97a',
+  ink: '#16130d',
+  navy: '#1a2e50',
+  slate: '#2e3339',
+  olive: '#5a5a3a',
+  rust: '#b84a27',
+  red: '#c41d1d',
+  blue: '#1d4ed8',
+  sea: '#3a5d66',
+  green: '#15803d',
+  gray: '#6b7280',
+  grey: '#6b7280',
+  charcoal: '#3a3a3c',
+  heather: '#8a8a9a',
+  denim: '#1a4569',
+  brown: '#6b3a2a',
+  pink: '#e8749a',
+  purple: '#7c3aed',
+  yellow: '#ca8a04',
+  orange: '#c2410c',
+  royal: '#4169e1',
+  kelly: '#4daa59',
+  aqua: '#00c4d4',
+  rose: '#c8818a',
+  dusty: '#c8818a',
+  coral: '#e8756a',
+  forest: '#228b22',
+  teal: '#0d9488',
+  lavender: '#967bb6',
+  lilac: '#967bb6',
+  tan: '#d2b48c',
+  ivory: '#fffff0',
+  gold: '#c9a227',
+  silver: '#a8a9ad',
+  ash: '#b2bec3',
+  stone: '#78716c',
+  moss: '#6b7c55',
+  sage: '#87a878',
+  sky: '#0ea5e9',
+  midnight: '#1e1b4b',
+  espresso: '#3c1f0f',
+  // card-specific
+  mixed: '#ef4c7a',
+  holo: '#d6e7ff',
+  polished: '#c5b07a',
+  blend: '#e8e0d0',
+}
+
+// Last token wins: "Vintage Black" → ["vintage","black"] reversed → "black" wins
+function colorHex(name: string): string | undefined {
+  const tokens = name
+    .toLowerCase()
+    .split(/[\s_-]+/)
+    .reverse()
+  for (const token of tokens) {
+    if (COLOR_MAP[token]) return COLOR_MAP[token]
+  }
+  return undefined
+}
+
+const NEW_BADGE_GRADIENT =
+  'linear-gradient(180deg, rgba(116,220,255,0.99) 8.23%, rgba(255,242,124,0.99) 29.88%, rgba(255,160,92,0.99) 61.46%, rgba(255,95,95,0.99) 89.43%)'
+
+function NewBadge() {
+  return (
+    <div
+      className="absolute bottom-3 left-3 z-[2] h-5 px-2.5 rounded-full flex items-center"
+      style={{ background: NEW_BADGE_GRADIENT }}
+    >
+      <span className="font-shop-mono font-medium text-shop-xs text-black leading-none tracking-wide">
+        NEW
+      </span>
+    </div>
+  )
+}
+
+type ProductCardProps = {
+  product: ProductListItem
+  sizes?: string
+  loading?: 'eager' | 'lazy'
+  onQuickView?: (handle: string) => void
+}
+
+export function ProductCard({
+  product,
+  sizes,
+  loading = 'lazy',
+  onQuickView,
+}: ProductCardProps) {
+  const { minVariantPrice, maxVariantPrice } = product.priceRange
+  const compareAt = product.compareAtPriceRange?.minVariantPrice
+  const isRange = minVariantPrice.amount !== maxVariantPrice.amount
+
+  const isNew = product.publishedAt
+    ? Date.now() - new Date(product.publishedAt).getTime() < TWO_WEEKS_MS
+    : false
+
+  const colorOption = product.options?.find((o) => /colou?r/i.test(o.name))
+  const swatches = colorOption
+    ? colorOption.values.slice(0, 6).map((v) => ({
+        name: v,
+        hex: colorHex(v),
+      }))
+    : []
+
+  const [hoveredColor, setHoveredColor] = React.useState<string | null>(null)
+
+  // Preload all color-variant images on mount so hover swaps are instant
+  React.useEffect(() => {
+    if (!colorOption) return
+    const seen = new Set<string>()
+    for (const v of product.variants.nodes) {
+      if (!v.image?.url || seen.has(v.image.url)) continue
+      seen.add(v.image.url)
+      const img = new Image()
+      img.src = shopifyImageUrl(v.image.url, { width: 600, format: 'webp' })
+    }
+  }, [colorOption, product.variants.nodes])
+
+  const activeImage = React.useMemo(() => {
+    if (!hoveredColor || !colorOption) return product.featuredImage
+    const variant = product.variants.nodes.find((v) =>
+      v.selectedOptions.some(
+        (o) => /colou?r/i.test(o.name) && o.value === hoveredColor,
+      ),
+    )
+    return variant?.image ?? product.featuredImage
+  }, [hoveredColor, colorOption, product])
+
+  const cardBody = (
+    <div
+      className="
+        group flex flex-col min-w-[340px] max-w-[400px] w-full rounded-xl
+        border border-transparent bg-transparent
+        hover:bg-[#EFEFE3] dark:hover:bg-shop-bg-2 hover:border-shop-line-2
+        transition-[border-color,background-color] duration-200
+        px-[22px] pt-7 pb-5
+      "
+    >
+      {/* Image */}
+      <div className="relative aspect-square rounded-lg overflow-hidden">
+        <ProductImage
+          image={activeImage}
+          alt={product.title}
+          width={600}
+          sizes={sizes}
+          loading={loading}
+          className="w-full h-full object-cover"
+        />
+        {isNew ? <NewBadge /> : null}
+      </div>
+
+      {/* Meta */}
+      <div className="flex flex-col gap-2.5 pt-4">
+        {/* Title + price */}
+        <div className="flex justify-between items-baseline gap-3">
+          <span className="text-shop-title font-semibold font-shop-display leading-tight text-shop-text truncate">
+            {product.title}
+          </span>
+          <ShopMono className="text-shop-price text-shop-text whitespace-nowrap shrink-0 font-light">
+            {isRange ? 'From ' : ''}
+            {formatMoney(minVariantPrice.amount, minVariantPrice.currencyCode)}
+            {compareAt &&
+            Number(compareAt.amount) > Number(minVariantPrice.amount) ? (
+              <span className="ml-1.5 text-shop-ui text-shop-muted line-through">
+                {formatMoney(compareAt.amount, compareAt.currencyCode)}
+              </span>
+            ) : null}
+          </ShopMono>
+        </div>
+
+        {/* Swatches + Quick View row */}
+        <div className="flex items-center justify-between">
+          {/* Round color swatches — hover to preview color */}
+          <div
+            className="flex gap-[10px]"
+            onMouseLeave={() => setHoveredColor(null)}
+          >
+            {swatches.map((s) => (
+              <span
+                key={s.name}
+                title={s.name}
+                onMouseEnter={() => setHoveredColor(s.name)}
+                className={`w-4 h-4 rounded-full shrink-0 cursor-pointer border transition-[box-shadow,border-color,transform] duration-150 ${
+                  hoveredColor === s.name
+                    ? 'border-white/70 ring-2 ring-white/30 scale-125'
+                    : 'border-white/15 hover:scale-110'
+                }`}
+                style={
+                  s.hex
+                    ? { background: s.hex }
+                    : {
+                        background:
+                          'conic-gradient(from 30deg,#ef4c7a,#f4c74a,#22c993,#36d3f3,#4b9bff,#ef4c7a)',
+                      }
+                }
+              />
+            ))}
+          </div>
+
+          {/* Quick View — hover only */}
+          <span className="opacity-0 group-hover:opacity-100 transition-opacity text-shop-xs text-shop-text-2 inline-flex items-center gap-1">
+            Quick View
+            <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+              <path
+                d="M2 5h6M6 2l3 3-3 3"
+                stroke="currentColor"
+                strokeWidth="1.6"
+                fill="none"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+
+  if (onQuickView) {
+    return (
+      <button
+        type="button"
+        onClick={() => onQuickView(product.handle)}
+        className="text-left block cursor-pointer bg-transparent border-0 p-0"
+      >
+        {cardBody}
+      </button>
+    )
+  }
+
+  return (
+    <Link
+      to="/shop/$handle"
+      params={{ handle: product.handle }}
+      className="block"
+    >
+      {cardBody}
+    </Link>
+  )
+}
diff --git a/src/components/shop/ProductDrawer.tsx b/src/components/shop/ProductDrawer.tsx
new file mode 100644
index 000000000..d298f5d4d
--- /dev/null
+++ b/src/components/shop/ProductDrawer.tsx
@@ -0,0 +1,822 @@
+import * as React from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { twMerge } from 'tailwind-merge'
+import { getProduct } from '~/utils/shop.functions'
+import type {
+  ProductDetail,
+  ProductDetailVariant,
+} from '~/utils/shopify-queries'
+import { formatMoney } from '~/utils/shopify-format'
+import { ProductImage } from './ProductImage'
+import { ShopMono, ShopSelect } from './ui'
+import { useAddToCart } from '~/hooks/useCart'
+import { useCartDrawerStore } from './cartDrawerStore'
+
+// Color name → hex for chip fill. Tokenizes multi-word names ("Vintage White" → "white").
+const COLOR_HEX: Record<string, string> = {
+  black: '#0a0a0a',
+  white: '#f5f5f0',
+  cream: '#e4dcc4',
+  bone: '#e4dcc4',
+  natural: '#ddd3b8',
+  vintage: '#e8e0d0',
+  fog: '#c9c6ba',
+  sand: '#c8b97a',
+  ink: '#16130d',
+  navy: '#1a2e50',
+  slate: '#2e3339',
+  olive: '#5a5a3a',
+  rust: '#b84a27',
+  red: '#c41d1d',
+  blue: '#1d4ed8',
+  sea: '#3a5d66',
+  green: '#15803d',
+  gray: '#6b7280',
+  grey: '#6b7280',
+  charcoal: '#3a3a3c',
+  heather: '#8a8a9a',
+  denim: '#1a4569',
+  brown: '#6b3a2a',
+  pink: '#e8749a',
+  purple: '#7c3aed',
+  yellow: '#ca8a04',
+  orange: '#c2410c',
+  royal: '#4169e1',
+  kelly: '#4daa59',
+  aqua: '#00c4d4',
+  rose: '#c8818a',
+  dusty: '#c8818a',
+  coral: '#e8756a',
+  maroon: '#800020',
+  forest: '#228b22',
+  teal: '#0d9488',
+  lavender: '#967bb6',
+  lilac: '#967bb6',
+  tan: '#d2b48c',
+  ivory: '#fffff0',
+  gold: '#c9a227',
+  silver: '#a8a9ad',
+  ash: '#b2bec3',
+  stone: '#78716c',
+  moss: '#6b7c55',
+  sage: '#87a878',
+  sky: '#0ea5e9',
+  midnight: '#1e1b4b',
+  espresso: '#3c1f0f',
+}
+
+const MAX_INLINE_OPTION_VALUES = 8
+const DEFAULT_DRAWER_WIDTH = 1000
+const MIN_DRAWER_WIDTH = 320
+const MOBILE_DRAWER_BREAKPOINT = 768
+
+function isDarkColor(hex: string): boolean {
+  const h = hex.replace('#', '')
+  const r = parseInt(h.slice(0, 2), 16)
+  const g = parseInt(h.slice(2, 4), 16)
+  const b = parseInt(h.slice(4, 6), 16)
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 < 0.15
+}
+
+function resolveColorHex(name: string): string | undefined {
+  const lower = name.toLowerCase()
+  if (COLOR_HEX[lower]) return COLOR_HEX[lower]
+  // Reverse so last token wins ("Vintage Black" → black, not vintage)
+  const tokens = lower.split(/[\s_-]+/).reverse()
+  for (const token of tokens) {
+    if (COLOR_HEX[token]) return COLOR_HEX[token]
+  }
+  return undefined
+}
+
+function findMatchingVariant(
+  variants: Array<ProductDetailVariant>,
+  selected: Record<string, string>,
+): ProductDetailVariant | undefined {
+  // Empty string means "not yet chosen" — treated as wildcard for availability checks
+  return variants.find((v) =>
+    v.selectedOptions.every((o) => {
+      const s = selected[o.name]
+      return !s || s === o.value
+    }),
+  )
+}
+
+function findExactVariant(
+  variants: Array<ProductDetailVariant>,
+  selected: Record<string, string>,
+): ProductDetailVariant | undefined {
+  return variants.find((v) =>
+    v.selectedOptions.every((o) => selected[o.name] === o.value),
+  )
+}
+
+type ProductDrawerProps = {
+  productHandle: string | null
+  initialProduct?: ProductDetail | null
+  allHandles: string[]
+  onClose: () => void
+  onChange: (handle: string) => void
+}
+
+function getInitialProduct(
+  handle: string | null,
+  product: ProductDetail | null | undefined,
+) {
+  if (!handle || product?.handle !== handle) return undefined
+  return product
+}
+
+function getDrawerMaxWidth() {
+  if (typeof window === 'undefined') return DEFAULT_DRAWER_WIDTH
+  if (window.innerWidth < MOBILE_DRAWER_BREAKPOINT) return window.innerWidth
+  return Math.floor(window.innerWidth * 0.8)
+}
+
+function clampDrawerWidth(width: number) {
+  if (typeof window === 'undefined') return width
+  if (window.innerWidth < MOBILE_DRAWER_BREAKPOINT) return window.innerWidth
+  return Math.max(MIN_DRAWER_WIDTH, Math.min(getDrawerMaxWidth(), width))
+}
+
+export function ProductDrawer({
+  productHandle,
+  initialProduct,
+  allHandles,
+  onClose,
+  onChange,
+}: ProductDrawerProps) {
+  const [width, setWidth] = React.useState(DEFAULT_DRAWER_WIDTH)
+  const [isDragging, setIsDragging] = React.useState(false)
+  const dragStateRef = React.useRef<{ startX: number; startW: number }>({
+    startX: 0,
+    startW: 0,
+  })
+  const drawerRef = React.useRef<HTMLElement>(null)
+
+  // Restore persisted width on mount
+  React.useEffect(() => {
+    const saved = parseInt(localStorage.getItem('drawerWidth') ?? '0', 10)
+    setWidth(
+      clampDrawerWidth(
+        saved >= MIN_DRAWER_WIDTH ? saved : DEFAULT_DRAWER_WIDTH,
+      ),
+    )
+  }, [])
+
+  React.useEffect(() => {
+    const onResize = () => setWidth((current) => clampDrawerWidth(current))
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+
+  const isOpen = !!productHandle
+
+  // Keep the last-known handle alive through the exit animation so the drawer
+  // slides out with content visible (not empty). Uses the derived-state pattern
+  // so displayHandle is updated synchronously on open (no empty-frame flash).
+  const [displayHandle, setDisplayHandle] = React.useState<string | null>(
+    productHandle,
+  )
+  const [prevProductHandle, setPrevProductHandle] = React.useState<
+    string | null
+  >(productHandle)
+  if (productHandle !== prevProductHandle) {
+    setPrevProductHandle(productHandle)
+    if (productHandle) setDisplayHandle(productHandle)
+  }
+
+  // Clear displayHandle after exit animation completes
+  React.useEffect(() => {
+    if (!productHandle) {
+      const t = setTimeout(() => setDisplayHandle(null), 400)
+      return () => clearTimeout(t)
+    }
+  }, [productHandle])
+
+  // Pre-fetch product data so the drawer only animates open once content is ready,
+  // preventing the skeleton flash. Same query key as DrawerBody so cache is shared.
+  const { data: prefetchedProduct } = useQuery({
+    queryKey: ['shopify', 'product', displayHandle ?? ''],
+    queryFn: () => getProduct({ data: { handle: displayHandle! } }),
+    enabled: !!displayHandle,
+    initialData: getInitialProduct(displayHandle, initialProduct),
+    staleTime: 5 * 60 * 1000,
+  })
+
+  // Delay the open animation until data is in cache. Close animates immediately.
+  const isAnimatedOpen = isOpen && !!prefetchedProduct
+
+  const effectiveWidth = width
+
+  const navigateStep = React.useCallback(
+    (dir: number) => {
+      if (!productHandle || allHandles.length === 0) return
+      const idx = allHandles.indexOf(productHandle)
+      const next = (idx + dir + allHandles.length) % allHandles.length
+      const nextHandle = allHandles[next]
+      if (nextHandle) onChange(nextHandle)
+    },
+    [productHandle, allHandles, onChange],
+  )
+
+  // Keyboard nav
+  React.useEffect(() => {
+    if (!isOpen) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+      if (e.key === 'ArrowRight') navigateStep(1)
+      if (e.key === 'ArrowLeft') navigateStep(-1)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [isOpen, onClose, navigateStep])
+
+  // Splitter drag
+  const onSplitterMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault()
+    const currentW = drawerRef.current?.getBoundingClientRect().width ?? width
+    dragStateRef.current = { startX: e.clientX, startW: currentW }
+    setIsDragging(true)
+  }
+
+  React.useEffect(() => {
+    if (!isDragging) return
+    const onMove = (e: MouseEvent) => {
+      const dx = dragStateRef.current.startX - e.clientX
+      const maxW = getDrawerMaxWidth()
+      const next = Math.max(
+        MIN_DRAWER_WIDTH,
+        Math.min(maxW, dragStateRef.current.startW + dx),
+      )
+      setWidth(Math.round(next))
+    }
+    const onUp = () => {
+      setIsDragging(false)
+      localStorage.setItem(
+        'drawerWidth',
+        String(drawerRef.current?.getBoundingClientRect().width ?? width),
+      )
+    }
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('mouseup', onUp)
+    return () => {
+      window.removeEventListener('mousemove', onMove)
+      window.removeEventListener('mouseup', onUp)
+    }
+  }, [isDragging, width])
+
+  return (
+    <>
+      {/* Scrim */}
+      <button
+        type="button"
+        aria-label="Close product drawer"
+        tabIndex={isAnimatedOpen ? 0 : -1}
+        onClick={onClose}
+        className={twMerge(
+          'fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm transition-opacity duration-300',
+          isAnimatedOpen
+            ? 'opacity-100 pointer-events-auto'
+            : 'opacity-0 pointer-events-none',
+        )}
+      />
+
+      {/* Drawer */}
+      <aside
+        ref={drawerRef}
+        aria-label="Product detail"
+        aria-hidden={!isAnimatedOpen}
+        style={{ width: effectiveWidth }}
+        className={twMerge(
+          'fixed top-[48px] right-0 bottom-0 z-[70]',
+          'border-l border-shop-line flex flex-col',
+          'shadow-[-30px_0_60px_-20px_rgba(0,0,0,0.5)]',
+          'min-w-[320px] max-w-[100vw] md:max-w-[80vw]',
+          isDragging
+            ? 'transition-none select-none'
+            : 'transition-transform duration-[380ms] ease-[cubic-bezier(0.2,0.8,0.2,1)]',
+          isAnimatedOpen ? 'translate-x-0' : 'translate-x-full',
+        )}
+      >
+        {/* Splitter handle */}
+        <div
+          role="separator"
+          aria-label="Drag to resize drawer"
+          onMouseDown={onSplitterMouseDown}
+          onDoubleClick={() => {
+            const next = clampDrawerWidth(DEFAULT_DRAWER_WIDTH)
+            setWidth(next)
+            localStorage.setItem('drawerWidth', String(next))
+          }}
+          className={twMerge(
+            'absolute top-0 bottom-0 left-[-4px] w-2 z-[2] cursor-col-resize group',
+            'hidden md:block',
+          )}
+        >
+          {/* Thin line */}
+          <div
+            className={twMerge(
+              'absolute left-[3px] top-0 bottom-0 w-[2px] transition-colors',
+              isDragging
+                ? 'bg-shop-accent'
+                : 'bg-transparent group-hover:bg-shop-accent',
+            )}
+          />
+          {/* Grab pill */}
+          <div
+            className={twMerge(
+              'absolute left-0 top-1/2 -translate-y-1/2 w-2 h-10 rounded bg-shop-panel border border-shop-line-2 transition-[opacity,border-color]',
+              isDragging
+                ? 'opacity-100 border-shop-accent'
+                : 'opacity-60 group-hover:opacity-100 group-hover:border-shop-accent',
+            )}
+          />
+        </div>
+
+        {/* Width readout during drag */}
+        {isDragging ? (
+          <div className="absolute top-3 left-4 z-[3] font-shop-mono text-shop-xs text-shop-accent-ink bg-shop-accent px-1.5 py-[3px] rounded pointer-events-none">
+            {width} px
+          </div>
+        ) : null}
+
+        {/* Close button — pinned to top-left of drawer, above scroll content */}
+        <button
+          type="button"
+          aria-label="Close product detail"
+          title="Close (Esc)"
+          onClick={onClose}
+          className="absolute top-3 left-3 z-[3] p-1 text-shop-muted hover:text-shop-text transition-colors"
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden>
+            <path
+              d="M2 2l10 10M12 2L2 12"
+              stroke="currentColor"
+              strokeWidth="1.6"
+            />
+          </svg>
+        </button>
+
+        {/* Body — keyed to productHandle so it resets on product change;
+            displayHandle keeps it mounted through the exit animation */}
+        {displayHandle ? (
+          <DrawerBody
+            key={productHandle ?? displayHandle}
+            productHandle={displayHandle}
+            initialProduct={prefetchedProduct}
+          />
+        ) : null}
+      </aside>
+    </>
+  )
+}
+
+/* ─── Lazy-loaded drawer body ─────────────────────────────────────────── */
+
+function DrawerBody({
+  productHandle,
+  initialProduct,
+}: {
+  productHandle: string
+  initialProduct?: ProductDetail | null
+}) {
+  const { data: product, isLoading } = useQuery({
+    queryKey: ['shopify', 'product', productHandle],
+    queryFn: () => getProduct({ data: { handle: productHandle } }),
+    initialData: getInitialProduct(productHandle, initialProduct),
+    staleTime: 5 * 60 * 1000,
+  })
+
+  if (isLoading || !product) {
+    return (
+      <div className="shop-product-drawer-shell flex-1 overflow-y-auto">
+        <div className="shop-product-drawer-layout">
+          <div className="shop-product-drawer-media">
+            <div className="shop-product-drawer-main-image aspect-square bg-shop-panel animate-pulse" />
+          </div>
+          <div className="shop-product-drawer-details bg-shop-bg p-5 flex flex-col gap-3">
+            <div className="h-3 w-24 bg-shop-panel-2 rounded animate-pulse" />
+            <div className="h-7 w-3/4 bg-shop-panel-2 rounded animate-pulse" />
+            <div className="h-12 bg-shop-panel-2 rounded animate-pulse" />
+            <div className="h-4 w-full bg-shop-panel-2 rounded animate-pulse" />
+            <div className="h-4 w-4/5 bg-shop-panel-2 rounded animate-pulse" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return <DrawerContent product={product} />
+}
+
+/* ─── Full product content ────────────────────────────────────────────── */
+
+function DrawerContent({ product }: { product: ProductDetail }) {
+  const variants = product.variants.nodes
+
+  const [selected, setSelected] = React.useState<Record<string, string>>(() =>
+    Object.fromEntries(product.options.map((o) => [o.name, ''])),
+  )
+  const [quantity, setQuantity] = React.useState(1)
+  const [activeImageIndex, setActiveImageIndex] = React.useState(0)
+  const [showAdded, setShowAdded] = React.useState(false)
+  // heroOverride: set to variant image when user picks a color; cleared on thumbnail click
+  const [heroOverride, setHeroOverride] = React.useState<
+    (typeof product.images.nodes)[0] | null
+  >(null)
+
+  // Exact variant for add-to-cart; wildcard findMatchingVariant used only for chip availability
+  const selectedVariant = findExactVariant(variants, selected)
+  // True once the user has explicitly picked every option (color, size, etc.)
+  const isComplete = product.options
+    .filter((o) => o.values.length > 1)
+    .every((o) => !!selected[o.name])
+
+  // Sync hero image when color selection changes — uses wildcard match so image
+  // updates immediately on color pick even before size is chosen.
+  const variantForImage = findMatchingVariant(variants, selected)
+  React.useEffect(() => {
+    if (variantForImage?.image) setHeroOverride(variantForImage.image)
+    else setHeroOverride(null)
+  }, [variantForImage?.id, variantForImage?.image, variantForImage?.image?.url])
+
+  // Resolve which thumbnail index is "active" — match override url into the list
+  const heroOverrideIndex = heroOverride
+    ? product.images.nodes.findIndex((img) => img.url === heroOverride.url)
+    : -1
+  const activeThumbnailIndex = heroOverride
+    ? heroOverrideIndex
+    : activeImageIndex
+  const heroImage =
+    heroOverride ?? product.images.nodes[activeImageIndex] ?? null
+
+  const displayPrice = selectedVariant?.price ?? variants[0]?.price ?? null
+
+  const addToCart = useAddToCart()
+  const openCartDrawer = useCartDrawerStore((s) => s.openDrawer)
+
+  React.useEffect(() => {
+    if (!showAdded) return
+    const id = window.setTimeout(() => setShowAdded(false), 1500)
+    return () => window.clearTimeout(id)
+  }, [showAdded])
+
+  return (
+    <div className="shop-product-drawer-shell flex-1 overflow-y-auto [scrollbar-width:thin] [scrollbar-color:var(--shop-line)_transparent]">
+      <div className="shop-product-drawer-layout">
+        {/* Hero image + vertical thumbnail strip */}
+        <div className="shop-product-drawer-media relative">
+          {/* Main image — leaves room for thumbnail strip when present */}
+          <div
+            className={`shop-product-drawer-main-image aspect-square bg-shop-bg/40 backdrop-blur-[20px] relative overflow-hidden p-6${product.images.nodes.length > 1 ? ' mr-[108px]' : ''}`}
+          >
+            {heroImage ? (
+              <ProductImage
+                image={heroImage}
+                alt={product.title}
+                width={1200}
+                sizes="(min-width: 1120px) 60vw, (min-width: 768px) 520px, 100vw"
+                loading="eager"
+                className="w-full h-full object-cover"
+              />
+            ) : null}
+          </div>
+
+          {/* Vertical thumbnail strip — absolutely pinned so it scrolls within hero height */}
+          {product.images.nodes.length > 1 ? (
+            <div className="shop-product-drawer-thumbs absolute top-0 right-0 bottom-0 w-[108px] flex flex-col gap-1.5 px-[14px] py-[10px] overflow-y-auto [scrollbar-width:none] bg-shop-bg/40 backdrop-blur-[20px] border-l border-shop-line">
+              {product.images.nodes.map((img, i) => (
+                <button
+                  key={`${img.url}-${i}`}
+                  type="button"
+                  onClick={() => {
+                    setActiveImageIndex(i)
+                    setHeroOverride(null)
+                  }}
+                  aria-label={`View image ${i + 1}`}
+                  className={twMerge(
+                    'w-[80px] aspect-square rounded-md overflow-hidden transition-opacity shrink-0',
+                    i === activeThumbnailIndex
+                      ? 'opacity-100 ring-1 ring-shop-line-2'
+                      : 'opacity-45 hover:opacity-75',
+                  )}
+                >
+                  <ProductImage
+                    image={img}
+                    alt={`${product.title} — image ${i + 1}`}
+                    width={160}
+                    sizes="15vw"
+                    className="w-full h-full object-cover"
+                  />
+                </button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="shop-product-drawer-details bg-shop-bg">
+          <div className="mx-3 border-t border-shop-line" />
+
+          {/* Title + price */}
+          <div className="flex justify-between items-baseline gap-3 px-6 py-[15px]">
+            <h2 className="font-shop-display font-semibold text-shop-heading leading-tight tracking-[-0.015em] text-shop-text">
+              {product.title}
+            </h2>
+            {displayPrice ? (
+              <ShopMono className="text-shop-price text-shop-text font-light whitespace-nowrap shrink-0">
+                {formatMoney(displayPrice.amount, displayPrice.currencyCode)}
+              </ShopMono>
+            ) : null}
+          </div>
+
+          {/* COLOR + SIZE + QUANTITY — all on one flex-wrap row */}
+          <div className="flex flex-wrap gap-x-6 gap-y-5 items-start justify-start px-6 py-5">
+            {product.options
+              .filter((o) => o.values.length > 1)
+              .map((option) => {
+                const isSizeOption = /size/i.test(option.name)
+                const shouldUseSelect =
+                  option.values.length > MAX_INLINE_OPTION_VALUES
+
+                if (shouldUseSelect) {
+                  return (
+                    <div
+                      key={option.id}
+                      className="shop-product-option flex flex-col gap-3"
+                    >
+                      <span className="font-shop-mono italic text-shop-sm text-shop-muted uppercase tracking-[0.1em]">
+                        {option.name}
+                      </span>
+                      <ShopSelect
+                        value={selected[option.name]}
+                        className="w-full"
+                        triggerClassName="w-full justify-between rounded-full px-4 py-2 text-shop-sm"
+                        onChange={(e) =>
+                          setSelected({
+                            ...selected,
+                            [option.name]: e.target.value,
+                          })
+                        }
+                      >
+                        <option value="" disabled>
+                          Select {option.name}
+                        </option>
+                        {option.values.map((value) => {
+                          const match = findMatchingVariant(variants, {
+                            ...selected,
+                            [option.name]: value,
+                          })
+                          return (
+                            <option
+                              key={value}
+                              value={value}
+                              disabled={!match?.availableForSale}
+                            >
+                              {value}
+                            </option>
+                          )
+                        })}
+                      </ShopSelect>
+                    </div>
+                  )
+                }
+
+                if (isSizeOption) {
+                  return (
+                    <div
+                      key={option.id}
+                      className="shop-product-option flex flex-col gap-3"
+                    >
+                      <span className="font-shop-mono italic text-shop-sm text-shop-muted uppercase tracking-[0.1em]">
+                        {option.name}
+                      </span>
+                      <div className="flex flex-wrap gap-1.5">
+                        {option.values.map((value) => {
+                          const isSelected = selected[option.name] === value
+                          const match = findMatchingVariant(variants, {
+                            ...selected,
+                            [option.name]: value,
+                          })
+                          const isUnavailable = !match?.availableForSale
+                          return (
+                            <button
+                              key={value}
+                              type="button"
+                              aria-pressed={isSelected}
+                              disabled={isUnavailable}
+                              onClick={() =>
+                                setSelected({
+                                  ...selected,
+                                  [option.name]: value,
+                                })
+                              }
+                              className={twMerge(
+                                'px-4 py-2 font-shop-mono text-shop-sm leading-none whitespace-nowrap',
+                                'rounded-full border transition-[background-color,color,border-color] duration-150',
+                                isSelected
+                                  ? 'bg-shop-text text-shop-bg border-shop-text'
+                                  : 'bg-shop-surface text-shop-text border-shop-line hover:enabled:bg-shop-surface-hover hover:enabled:border-shop-line-2',
+                                isUnavailable &&
+                                  !isSelected &&
+                                  'opacity-40 cursor-not-allowed line-through',
+                              )}
+                            >
+                              {value}
+                            </button>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  )
+                }
+
+                // Color / other options
+                return (
+                  <div
+                    key={option.id}
+                    className="shop-product-option flex flex-col gap-3"
+                  >
+                    <span className="font-shop-mono italic text-shop-sm text-shop-muted uppercase tracking-[0.1em]">
+                      {option.name}
+                    </span>
+                    <div className="flex flex-wrap gap-1.5">
+                      {option.values.map((value) => {
+                        const isSelected = selected[option.name] === value
+                        const match = findMatchingVariant(variants, {
+                          ...selected,
+                          [option.name]: value,
+                        })
+                        const isUnavailable = !match?.availableForSale
+                        const hex = resolveColorHex(value)
+                        return (
+                          <button
+                            key={value}
+                            type="button"
+                            aria-pressed={isSelected}
+                            disabled={isUnavailable}
+                            onClick={() =>
+                              setSelected({ ...selected, [option.name]: value })
+                            }
+                            style={
+                              isSelected && hex
+                                ? {
+                                    backgroundColor: hex,
+                                    ...(isDarkColor(hex)
+                                      ? {
+                                          boxShadow:
+                                            'inset 0 0 0 1.5px rgba(255,255,255,0.25)',
+                                        }
+                                      : {}),
+                                  }
+                                : undefined
+                            }
+                            className={twMerge(
+                              'px-4 py-2 font-shop-mono text-shop-sm leading-none whitespace-nowrap',
+                              'rounded-full border transition-[background-color,color,border-color] duration-150',
+                              isSelected && !hex
+                                ? 'bg-shop-accent text-shop-accent-ink border-shop-accent'
+                                : isSelected && hex && isDarkColor(hex)
+                                  ? 'text-white border-transparent'
+                                  : isSelected && hex
+                                    ? 'text-shop-text border-transparent'
+                                    : 'bg-shop-surface text-shop-text border-shop-line hover:enabled:bg-shop-surface-hover hover:enabled:border-shop-line-2',
+                              isUnavailable &&
+                                !isSelected &&
+                                'opacity-40 cursor-not-allowed line-through',
+                            )}
+                          >
+                            {value}
+                          </button>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )
+              })}
+
+            {/* Quantity pill */}
+            <div className="shop-product-quantity flex flex-col gap-3 shrink-0">
+              <span className="font-shop-mono italic text-shop-sm text-shop-muted uppercase tracking-[0.1em]">
+                Quantity
+              </span>
+              <div className="bg-shop-surface flex h-[38px] items-center justify-center gap-4 px-4 rounded-full w-[100px] font-shop-mono select-none">
+                <button
+                  type="button"
+                  onClick={() => setQuantity((q) => q + 1)}
+                  aria-label="Increase quantity"
+                  className="text-shop-sm text-shop-text-2 leading-none hover:text-shop-text transition-colors"
+                >
+                  +
+                </button>
+                <span className="text-shop-sm text-shop-text min-w-[1ch] text-center">
+                  {quantity}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+                  aria-label="Decrease quantity"
+                  className="text-shop-sm text-shop-text-2 leading-none hover:text-shop-text transition-colors"
+                >
+                  −
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="mx-3 border-t border-shop-line" />
+
+          {/* Add to Cart */}
+          <div className="flex flex-col items-center px-6 py-5">
+            <button
+              type="button"
+              disabled={
+                !isComplete ||
+                !selectedVariant?.availableForSale ||
+                (addToCart.isPending && !showAdded)
+              }
+              onClick={() => {
+                if (!selectedVariant) return
+                setShowAdded(true)
+                openCartDrawer()
+                addToCart.mutate({
+                  variantId: selectedVariant.id,
+                  quantity,
+                  line: {
+                    productTitle: product.title,
+                    productHandle: product.handle,
+                    variantTitle: selectedVariant.title,
+                    price: selectedVariant.price,
+                    image: selectedVariant.image,
+                    selectedOptions: selectedVariant.selectedOptions,
+                  },
+                })
+              }}
+              style={
+                isComplete && !showAdded && selectedVariant?.availableForSale
+                  ? {
+                      backgroundImage:
+                        'linear-gradient(235.54deg, rgba(116,220,255,0.99) 3.4%, rgba(255,242,124,0.99) 13.1%, rgba(255,160,92,0.99) 27.1%, rgba(255,95,95,0.99) 39.5%)',
+                      backgroundSize: '200% 200%',
+                      animation:
+                        'shop-cta-gradient 12s ease infinite, shop-cta-rotate 30s linear infinite',
+                    }
+                  : undefined
+              }
+              className={twMerge(
+                'w-full max-w-[760px] rounded-full px-4 py-3 flex items-center justify-center gap-2.5',
+                'font-shop-display font-semibold text-shop-title',
+                'transition-[background-color,color,border-color,opacity] duration-500',
+                isComplete && !showAdded && selectedVariant?.availableForSale
+                  ? 'hover:enabled:brightness-105 text-black'
+                  : isComplete && !selectedVariant?.availableForSale
+                    ? 'bg-shop-surface text-shop-muted border border-shop-line'
+                    : 'bg-shop-surface/30 border border-shop-line text-shop-muted cursor-not-allowed',
+              )}
+            >
+              {isComplete && !showAdded && selectedVariant?.availableForSale ? (
+                <svg
+                  width="22"
+                  height="22"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.75"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden
+                >
+                  <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" />
+                  <path d="M3 6h18" />
+                  <path d="M16 10a4 4 0 01-8 0" />
+                </svg>
+              ) : null}
+              {showAdded
+                ? '✓ Added'
+                : !isComplete
+                  ? 'Add to Cart'
+                  : !selectedVariant?.availableForSale
+                    ? 'Sold out'
+                    : 'Add to Cart'}
+            </button>
+          </div>
+
+          <div className="mx-3 border-t border-shop-line" />
+
+          {/* Description */}
+          {product.descriptionHtml ? (
+            <div className="flex flex-col gap-2.5 px-6 py-4">
+              <span className="font-shop-mono italic text-shop-sm text-shop-muted uppercase tracking-[0.1em]">
+                Description
+              </span>
+              <div
+                className="text-shop-body text-shop-text-2 leading-[1.6] [&_p]:mb-2 [&_p:last-child]:mb-0"
+                dangerouslySetInnerHTML={{ __html: product.descriptionHtml }}
+              />
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/shop/ProductImage.tsx b/src/components/shop/ProductImage.tsx
new file mode 100644
index 000000000..ba2a87f33
--- /dev/null
+++ b/src/components/shop/ProductImage.tsx
@@ -0,0 +1,66 @@
+import { twMerge } from 'tailwind-merge'
+import { shopifyImageUrl } from '~/utils/shopify-format'
+
+type ShopifyImageFields = {
+  url: string
+  altText?: string | null
+  width?: number | null
+  height?: number | null
+}
+
+type ProductImageProps = {
+  image: ShopifyImageFields | null | undefined
+  alt: string
+  /** Intrinsic width rendered for layout. The srcset still covers multiple DPRs. */
+  width: number
+  /**
+   * Viewport widths this image occupies, for correct `sizes` hinting.
+   * Default assumes 1–4 column grid. Override for hero/PDP placements.
+   */
+  sizes?: string
+  loading?: 'eager' | 'lazy'
+  className?: string
+}
+
+/**
+ * Responsive Shopify CDN image. Emits a srcset with DPR-aware widths so
+ * retina gets sharper pixels and mobile doesn't download desktop-sized
+ * assets. Shopify's CDN serves WebP on-the-fly via `?format=webp`.
+ */
+export function ProductImage({
+  image,
+  alt,
+  width,
+  sizes = '(min-width: 1024px) 25vw, (min-width: 640px) 33vw, 100vw',
+  loading = 'lazy',
+  className,
+}: ProductImageProps) {
+  if (!image) return null
+  const aspect = image.width && image.height ? image.width / image.height : 1
+  const height = Math.round(width / aspect)
+
+  // Provide 1x, 1.5x, 2x, 3x variants bounded by the image's intrinsic width.
+  const multipliers = [1, 1.5, 2, 3]
+  const srcset = multipliers
+    .map((m) => Math.round(width * m))
+    .filter((w, i, arr) => w <= (image.width ?? w) && arr.indexOf(w) === i)
+    .map(
+      (w) =>
+        `${shopifyImageUrl(image.url, { width: w, format: 'webp' })} ${w}w`,
+    )
+    .join(', ')
+
+  return (
+    <img
+      src={shopifyImageUrl(image.url, { width, format: 'webp' })}
+      srcSet={srcset}
+      sizes={sizes}
+      alt={image.altText ?? alt}
+      width={width}
+      height={height}
+      loading={loading}
+      decoding="async"
+      className={twMerge('h-full w-full object-cover', className)}
+    />
+  )
+}
diff --git a/src/components/shop/ShopDropCard.tsx b/src/components/shop/ShopDropCard.tsx
new file mode 100644
index 000000000..ffeec2d08
--- /dev/null
+++ b/src/components/shop/ShopDropCard.tsx
@@ -0,0 +1,65 @@
+import { Link } from '@tanstack/react-router'
+import { ShopLabel, ShopMono, ShopPanel, ShopPulse } from './ui'
+
+export type DropCardRow = { label: string; value: string }
+
+type Props = {
+  /** Top-row label, e.g. "Shop now — free US shipping over $75". */
+  status: string
+  /** Display headline inside the card. */
+  headline: string
+  /** Rows of key/value copy (dashed dividers between). */
+  rows?: Array<DropCardRow>
+  /** Primary CTA. */
+  cta: { label: string; href: string }
+  /** Optional sub-line below the CTA (e.g. countdown or fine print). */
+  ctaSub?: React.ReactNode
+}
+
+/**
+ * Live-drop / promo card in the shop hero. Pulses green, leads with a
+ * display-type headline, prices out a few stats, and drops a CTA at the foot.
+ */
+export function ShopDropCard({ status, headline, rows, cta, ctaSub }: Props) {
+  return (
+    <ShopPanel className="w-full md:min-w-[280px] md:max-w-[320px] p-4 pb-3.5 flex flex-col self-start">
+      <ShopLabel className="mb-2.5 flex items-center gap-2 text-shop-muted">
+        <ShopPulse />
+        {status}
+      </ShopLabel>
+      <div className="font-shop-display font-bold text-[19px] tracking-[-0.015em] text-shop-text">
+        {headline}
+      </div>
+      {rows?.map((row) => (
+        <div
+          key={row.label}
+          className="flex justify-between text-[12px] text-shop-text-2 border-t border-dashed border-shop-line-2 pt-1.5 mt-2"
+        >
+          <span>{row.label}</span>
+          <ShopMono className="text-shop-text text-[11px] font-medium">
+            {row.value}
+          </ShopMono>
+        </div>
+      ))}
+      <Link
+        to={cta.href}
+        className="
+          mt-3 flex items-center justify-center gap-2
+          px-3 py-2.5 rounded-md bg-shop-accent text-shop-accent-ink
+          text-[12.5px] font-semibold tracking-[0.01em]
+          transition-[filter] hover:brightness-110 group
+        "
+      >
+        {cta.label}
+        <span className="transition-transform group-hover:translate-x-[3px]">
+          →
+        </span>
+      </Link>
+      {ctaSub ? (
+        <ShopMono className="mt-2 text-center text-[11px] text-shop-muted tracking-[0.04em]">
+          {ctaSub}
+        </ShopMono>
+      ) : null}
+    </ShopPanel>
+  )
+}
diff --git a/src/components/shop/ShopHero.tsx b/src/components/shop/ShopHero.tsx
new file mode 100644
index 000000000..6f8c6c1fc
--- /dev/null
+++ b/src/components/shop/ShopHero.tsx
@@ -0,0 +1,34 @@
+/**
+ * Editorial hero title + lede. The `<em>` spans in `title` render in the
+ * accent color with a soft underline; use them for emphasis (they match the
+ * Merch Store design prototype).
+ */
+export function ShopHero({
+  title,
+  lede,
+}: {
+  title: React.ReactNode
+  lede?: React.ReactNode
+}) {
+  return (
+    <div className="flex-1 min-w-0">
+      <h1
+        className="
+          font-shop-display font-bold text-shop-text
+          text-shop-display leading-[1.02] tracking-[-0.03em] m-0
+          [&_em]:not-italic [&_em]:text-shop-accent [&_em]:relative
+          [&_em]:after:content-[''] [&_em]:after:absolute [&_em]:after:inset-x-0
+          [&_em]:after:-bottom-0.5 [&_em]:after:h-[3px]
+          [&_em]:after:bg-shop-accent [&_em]:after:opacity-[0.35] [&_em]:after:rounded-sm
+        "
+      >
+        {title}
+      </h1>
+      {lede ? (
+        <p className="text-shop-text-2 text-shop-sm font-normal mt-3.5 max-w-[58ch] leading-[1.55] opacity-75">
+          {lede}
+        </p>
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/components/shop/ShopHero3D.tsx b/src/components/shop/ShopHero3D.tsx
new file mode 100644
index 000000000..9f0ab13e9
--- /dev/null
+++ b/src/components/shop/ShopHero3D.tsx
@@ -0,0 +1,414 @@
+import * as React from 'react'
+import * as THREE from 'three'
+import { Canvas, useFrame, useThree } from '@react-three/fiber'
+import { Decal, Environment, useGLTF, useTexture } from '@react-three/drei'
+import { easing } from 'maath'
+
+type ShopHero3DProps = {
+  isDark?: boolean
+}
+
+const BRAND_IMAGES = {
+  light: [
+    '/images/logos/logo-color-600.png',
+    '/images/logos/logo-color-banner-600.png',
+    '/images/logos/logo-black.svg',
+    '/images/logos/logo-word-black.svg',
+    '/images/logos/splash-light.png',
+  ],
+  dark: [
+    '/images/logos/logo-color-600.png',
+    '/images/logos/logo-color-banner-600.png',
+    '/images/logos/logo-white.svg',
+    '/images/logos/logo-word-white.svg',
+    '/images/logos/splash-dark.png',
+  ],
+}
+
+type Placement = {
+  decal: [number, number, number]
+  decalRotation?: [number, number, number]
+  scale: number
+  maxWidth?: number
+  shirtPos: [number, number, number]
+  shirtRot: [number, number, number]
+}
+
+const PLACEMENTS: Array<Placement> = [
+  {
+    // Left chest patch
+    decal: [0.06, 0.16, 0.14],
+    scale: 0.07,
+    maxWidth: 0.1,
+    shirtPos: [-0.02, -0.16, 0],
+    shirtRot: [-0.03, -0.15, 0.01],
+  },
+  {
+    // Oversized
+    decal: [0, 0.02, 0.15],
+    scale: 0.35,
+    shirtPos: [0, -0.1, -0.25],
+    shirtRot: [-0.02, -0.12, 0.01],
+  },
+  {
+    // Right chest patch
+    decal: [-0.06, 0.16, 0.14],
+    scale: 0.07,
+    maxWidth: 0.1,
+    shirtPos: [0.02, -0.16, 0],
+    shirtRot: [-0.03, 0.15, -0.01],
+  },
+  {
+    // Back neck — high collar placement, shirt rotates to show the back
+    decal: [0, 0.19, -0.1],
+    decalRotation: [0, Math.PI, 0],
+    scale: 0.06,
+    maxWidth: 0.09,
+    shirtPos: [0, -0.17, 0],
+    shirtRot: [-0.03, Math.PI * 0.97, 0.01],
+  },
+  {
+    // Left sleeve
+    decal: [0.23, 0.115, -0.015],
+    decalRotation: [-0.03, 1.72, -0.06],
+    scale: 0.05,
+    maxWidth: 0.07,
+    shirtPos: [-0.13, -0.15, -0.02],
+    shirtRot: [-0.23, -1.13, 0.08],
+  },
+]
+
+export function ShopHero3D({ isDark = false }: ShopHero3DProps) {
+  const images = isDark ? BRAND_IMAGES.dark : BRAND_IMAGES.light
+
+  return (
+    <div className="w-full h-full relative">
+      <Canvas
+        camera={{ position: [0.06, 0.095, 0.45], fov: 25 }}
+        gl={{
+          antialias: true,
+          toneMapping: THREE.ACESFilmicToneMapping,
+          toneMappingExposure: 1.0,
+        }}
+        className="!absolute inset-0"
+      >
+        <Scene images={images} isDark={isDark} />
+      </Canvas>
+    </div>
+  )
+}
+
+function Scene({ images, isDark }: { images: Array<string>; isDark: boolean }) {
+  const { gl } = useThree()
+  React.useEffect(() => {
+    gl.setClearColor(isDark ? '#0a0a0b' : '#e8e6e4', 1)
+  }, [gl, isDark])
+
+  return (
+    <>
+      <Environment
+        preset="studio"
+        environmentIntensity={isDark ? 0.35 : 0.85}
+      />
+      <directionalLight
+        position={[-2, 3, 3]}
+        intensity={isDark ? 0.3 : 0.6}
+        color={isDark ? '#b8c0d0' : '#ffffff'}
+      />
+      <directionalLight
+        position={[2, -1, 2]}
+        intensity={isDark ? 0.05 : 0.1}
+        color="#e8e0f0"
+      />
+      <ShirtWithDecals images={images} isDark={isDark} />
+    </>
+  )
+}
+
+function useFabricTexture(isDark: boolean) {
+  return React.useMemo(() => {
+    const size = 512
+    const canvas = document.createElement('canvas')
+    canvas.width = size
+    canvas.height = size
+    const ctx = canvas.getContext('2d')!
+    ctx.fillStyle = isDark ? '#1a1a1a' : '#f8f6f4'
+    ctx.fillRect(0, 0, size, size)
+    const hStroke = isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.05)'
+    ctx.lineWidth = 1
+    for (let y = 0; y < size; y += 2) {
+      ctx.strokeStyle = hStroke
+      ctx.beginPath()
+      ctx.moveTo(0, y + (Math.random() - 0.5) * 0.6)
+      ctx.lineTo(size, y + (Math.random() - 0.5) * 0.6)
+      ctx.stroke()
+    }
+    const vStroke = isDark ? 'rgba(255,255,255,0.025)' : 'rgba(0,0,0,0.03)'
+    for (let x = 0; x < size; x += 2) {
+      ctx.strokeStyle = vStroke
+      ctx.beginPath()
+      ctx.moveTo(x + (Math.random() - 0.5) * 0.6, 0)
+      ctx.lineTo(x + (Math.random() - 0.5) * 0.6, size)
+      ctx.stroke()
+    }
+    const imageData = ctx.getImageData(0, 0, size, size)
+    const { data } = imageData
+    for (let i = 0; i < data.length; i += 4) {
+      const noise = (Math.random() - 0.5) * 14
+      data[i] = Math.min(255, Math.max(0, data[i]! + noise))
+      data[i + 1] = Math.min(255, Math.max(0, data[i + 1]! + noise))
+      data[i + 2] = Math.min(255, Math.max(0, data[i + 2]! + noise))
+    }
+    ctx.putImageData(imageData, 0, 0)
+    const texture = new THREE.CanvasTexture(canvas)
+    texture.wrapS = THREE.RepeatWrapping
+    texture.wrapT = THREE.RepeatWrapping
+    texture.repeat.set(20, 20)
+    texture.anisotropy = 8
+    return texture
+  }, [isDark])
+}
+
+function useBumpTexture() {
+  return React.useMemo(() => {
+    const size = 256
+    const canvas = document.createElement('canvas')
+    canvas.width = size
+    canvas.height = size
+    const ctx = canvas.getContext('2d')!
+
+    // Mid-gray base
+    ctx.fillStyle = '#808080'
+    ctx.fillRect(0, 0, size, size)
+
+    // Draw a jersey-knit V pattern — interlocking V shapes that mimic
+    // the face side of a knit cotton tee
+    const stitchW = 5 // width of one stitch column
+    const stitchH = 6 // height of one stitch row
+    ctx.lineWidth = 1.5
+    ctx.lineCap = 'round'
+
+    for (let row = 0; row < size / stitchH + 1; row++) {
+      for (let col = 0; col < size / stitchW + 1; col++) {
+        const x = col * stitchW
+        const y = row * stitchH
+        // Offset every other row
+        const offset = row % 2 === 0 ? 0 : stitchW / 2
+
+        // V-stitch: two short diagonal strokes forming a V
+        const cx = x + offset
+        const cy = y
+
+        // Light ridge (top of stitch)
+        ctx.strokeStyle = 'rgba(255,255,255,0.25)'
+        ctx.beginPath()
+        ctx.moveTo(cx - stitchW * 0.35, cy)
+        ctx.lineTo(cx, cy + stitchH * 0.5)
+        ctx.stroke()
+
+        // Dark groove (bottom of stitch)
+        ctx.strokeStyle = 'rgba(0,0,0,0.3)'
+        ctx.beginPath()
+        ctx.moveTo(cx, cy + stitchH * 0.5)
+        ctx.lineTo(cx + stitchW * 0.35, cy)
+        ctx.stroke()
+
+        // Subtle horizontal separation between rows
+        ctx.strokeStyle = 'rgba(0,0,0,0.12)'
+        ctx.lineWidth = 0.5
+        ctx.beginPath()
+        ctx.moveTo(cx - stitchW * 0.4, cy + stitchH * 0.5)
+        ctx.lineTo(cx + stitchW * 0.4, cy + stitchH * 0.5)
+        ctx.stroke()
+        ctx.lineWidth = 1.5
+      }
+    }
+
+    // Add fiber noise on top
+    const imageData = ctx.getImageData(0, 0, size, size)
+    const { data } = imageData
+    for (let i = 0; i < data.length; i += 4) {
+      const n = (Math.random() - 0.5) * 30
+      data[i] = Math.min(255, Math.max(0, data[i]! + n))
+      data[i + 1] = Math.min(255, Math.max(0, data[i + 1]! + n))
+      data[i + 2] = Math.min(255, Math.max(0, data[i + 2]! + n))
+    }
+    ctx.putImageData(imageData, 0, 0)
+
+    const texture = new THREE.CanvasTexture(canvas)
+    texture.wrapS = THREE.RepeatWrapping
+    texture.wrapT = THREE.RepeatWrapping
+    texture.repeat.set(24, 24)
+    texture.anisotropy = 8
+    return texture
+  }, [])
+}
+
+function ShirtWithDecals({
+  images,
+  isDark,
+}: {
+  images: Array<string>
+  isDark: boolean
+}) {
+  const { nodes } = useGLTF('/shop/shirt.glb') as any
+  const groupRef = React.useRef<any>(null)
+  const fabricMap = useFabricTexture(isDark)
+  const bumpMap = useBumpTexture()
+
+  // Clone the bump texture for the decal with its own repeat —
+  // the decal has 0-1 UVs across a small area, so fewer tiles
+  const decalNormalMap = React.useMemo(() => {
+    const tex = bumpMap.clone()
+    tex.repeat.set(4, 4)
+    tex.needsUpdate = true
+    return tex
+  }, [bumpMap])
+
+  // Transition state machine: visible → fading-out → swap → fading-in → visible
+  const [combo, setCombo] = React.useState({ imageIdx: 0, placementIdx: 0 })
+  const [nextCombo, setNextCombo] = React.useState<{
+    imageIdx: number
+    placementIdx: number
+  } | null>(null)
+  const decalOpacity = React.useRef(1)
+  const phase = React.useRef<'visible' | 'fading-out' | 'fading-in'>('visible')
+  const decalMatRef = React.useRef<any>(null)
+
+  // Queue a new combo every cycle
+  React.useEffect(() => {
+    const id = setInterval(() => {
+      const next = (() => {
+        let ni: number
+        let np: number
+        do {
+          ni = Math.floor(Math.random() * images.length)
+          np = Math.floor(Math.random() * PLACEMENTS.length)
+        } while (
+          np === combo.placementIdx ||
+          (ni === combo.imageIdx && np === combo.placementIdx)
+        )
+        return { imageIdx: ni, placementIdx: np }
+      })()
+      setNextCombo(next)
+      phase.current = 'fading-out'
+    }, 6000)
+    return () => clearInterval(id)
+  }, [images.length, combo])
+
+  const decalTexture = useTexture(images[combo.imageIdx]!)
+  const placement = PLACEMENTS[combo.placementIdx]!
+
+  const decalScale = React.useMemo(() => {
+    const img = decalTexture.image as HTMLImageElement | undefined
+    if (!img || !img.width || !img.height)
+      return [placement.scale, placement.scale, 1] as [number, number, number]
+    const aspect = img.width / img.height
+    let sx = placement.scale
+    let sy = placement.scale
+    if (aspect > 1) {
+      sx = placement.scale * aspect
+    } else {
+      sy = placement.scale / aspect
+    }
+    if (placement.maxWidth && sx > placement.maxWidth) {
+      const ratio = placement.maxWidth / sx
+      sx *= ratio
+      sy *= ratio
+    }
+    return [sx, sy, 1] as [number, number, number]
+  }, [decalTexture, placement.scale, placement.maxWidth])
+
+  useFrame((state, delta) => {
+    if (!groupRef.current) return
+
+    // Subtle idle camera drift — slow sine waves on position
+    const t = state.clock.elapsedTime
+    state.camera.position.x = 0.06 + Math.sin(t * 0.3) * 0.005
+    state.camera.position.y = 0.095 + Math.cos(t * 0.25) * 0.003
+    state.camera.position.z =
+      0.45 + (Math.sin(t * 0.15) + Math.sin(t * 0.37)) * 0.035
+
+    const targetRot: [number, number, number] = [
+      placement.shirtRot[0] + state.pointer.y * 0.02,
+      placement.shirtRot[1] + state.pointer.x * -0.03,
+      placement.shirtRot[2],
+    ]
+    // Strip last frame's Y drift before damping (so it doesn't accumulate)
+    const prevT = t - delta
+    groupRef.current.rotation.x -= Math.sin(prevT * 0.2) * 0.1
+
+    easing.damp3(groupRef.current.position, placement.shirtPos, 0.8, delta)
+    easing.dampE(groupRef.current.rotation, targetRot, 0.8, delta)
+
+    // Re-apply this frame's X drift (tilt up/down)
+    groupRef.current.rotation.x += Math.sin(t * 0.2) * 0.1
+
+    // Animate decal opacity
+    const speed = 2 // opacity units per second
+    if (phase.current === 'fading-out') {
+      decalOpacity.current = Math.max(0, decalOpacity.current - delta * speed)
+      if (decalOpacity.current <= 0 && nextCombo) {
+        setCombo(nextCombo)
+        setNextCombo(null)
+        phase.current = 'fading-in'
+      }
+    } else if (phase.current === 'fading-in') {
+      decalOpacity.current = Math.min(1, decalOpacity.current + delta * speed)
+      if (decalOpacity.current >= 1) {
+        phase.current = 'visible'
+      }
+    }
+
+    // Apply opacity to decal material
+    if (decalMatRef.current) {
+      decalMatRef.current.opacity = decalOpacity.current
+    }
+  })
+
+  return (
+    <group ref={groupRef}>
+      <mesh geometry={nodes.T_Shirt_male.geometry} dispose={null}>
+        <meshPhysicalMaterial
+          color={isDark ? '#020202' : '#ffffff'}
+          map={fabricMap}
+          normalMap={bumpMap}
+          normalScale={
+            new THREE.Vector2(isDark ? 0.03 : 0.4, isDark ? 0.03 : 0.4)
+          }
+          roughness={isDark ? 0.9 : 0.7}
+          metalness={0}
+          envMapIntensity={isDark ? 0.3 : 1.0}
+          sheen={isDark ? 0.25 : 0.8}
+          sheenRoughness={isDark ? 0.7 : 0.4}
+          sheenColor={isDark ? '#2a2a2e' : '#eae5e0'}
+          side={THREE.DoubleSide}
+        />
+        <Decal
+          position={[...placement.decal]}
+          rotation={[...(placement.decalRotation ?? [0, 0, 0])]}
+          scale={decalScale}
+        >
+          <meshPhysicalMaterial
+            ref={decalMatRef}
+            map={decalTexture}
+            normalMap={decalNormalMap}
+            normalScale={
+              new THREE.Vector2(isDark ? 0.1 : 0.3, isDark ? 0.1 : 0.3)
+            }
+            transparent
+            polygonOffset
+            polygonOffsetFactor={-1}
+            roughness={0.95}
+            metalness={0}
+            envMapIntensity={0.3}
+            color={isDark ? '#dddddd' : '#f0f0f0'}
+            side={THREE.FrontSide}
+          />
+        </Decal>
+      </mesh>
+    </group>
+  )
+}
+
+useGLTF.preload('/shop/shirt.glb')
diff --git a/src/components/shop/ShopLayout.tsx b/src/components/shop/ShopLayout.tsx
new file mode 100644
index 000000000..d035dbe9c
--- /dev/null
+++ b/src/components/shop/ShopLayout.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { CartDrawer } from './CartDrawer'
+import { useCartDrawerStore } from './cartDrawerStore'
+
+type ShopLayoutProps = {
+  children: React.ReactNode
+}
+
+export function ShopLayout({ children }: ShopLayoutProps) {
+  return (
+    <div className="shop-scope relative min-h-[calc(100vh-var(--navbar-height,0px))]">
+      <main className="min-w-0">{children}</main>
+      <ShopCartDrawer />
+    </div>
+  )
+}
+
+function ShopCartDrawer() {
+  const open = useCartDrawerStore((s) => s.open)
+  const setOpen = useCartDrawerStore((s) => s.setOpen)
+  return <CartDrawer open={open} onOpenChange={setOpen} />
+}
diff --git a/src/components/shop/ShopNote.tsx b/src/components/shop/ShopNote.tsx
new file mode 100644
index 000000000..c85c54c1b
--- /dev/null
+++ b/src/components/shop/ShopNote.tsx
@@ -0,0 +1,23 @@
+/**
+ * Accent-tinted callout used for drop notes / disclaimers.
+ * Pass a short `pill` label to highlight (mono, uppercase) and children for
+ * the body copy.
+ */
+export function ShopNote({
+  pill,
+  children,
+}: {
+  pill?: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className="mt-4 p-3 rounded-lg flex gap-2.5 items-start text-[12px] text-shop-text-2 leading-[1.55] bg-shop-accent/10 border border-shop-accent/20">
+      {pill ? (
+        <span className="font-shop-mono text-[9.5px] tracking-[0.1em] uppercase bg-shop-accent text-shop-accent-ink px-1.5 py-0.5 rounded font-semibold shrink-0 mt-0.5">
+          {pill}
+        </span>
+      ) : null}
+      <span>{children}</span>
+    </div>
+  )
+}
diff --git a/src/components/shop/ShopSpecs.tsx b/src/components/shop/ShopSpecs.tsx
new file mode 100644
index 000000000..50006f8bf
--- /dev/null
+++ b/src/components/shop/ShopSpecs.tsx
@@ -0,0 +1,23 @@
+export type Spec = { label: string; value: React.ReactNode }
+
+/** Two-column specs grid — mono label, plain value. */
+export function ShopSpecs({ specs }: { specs: Array<Spec> }) {
+  return (
+    <div className="grid grid-cols-2 border-t border-shop-line mt-5.5">
+      {specs.map((spec, i) => (
+        <div
+          key={spec.label}
+          className={
+            'flex justify-between gap-2.5 py-2.5 border-b border-shop-line text-[12.5px] ' +
+            (i % 2 === 0 ? 'pr-3 border-r border-shop-line' : 'pl-3')
+          }
+        >
+          <b className="font-shop-mono font-normal text-shop-muted text-[10.5px] tracking-[0.08em] uppercase">
+            {spec.label}
+          </b>
+          <span className="text-shop-text text-right">{spec.value}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/shop/ShopStrip.tsx b/src/components/shop/ShopStrip.tsx
new file mode 100644
index 000000000..bb83ddb3a
--- /dev/null
+++ b/src/components/shop/ShopStrip.tsx
@@ -0,0 +1,18 @@
+import { ShopPanel } from './ui'
+
+/** Bottom-of-page info strip (shipping, returns, etc.). */
+export function ShopStrip({ items }: { items: Array<string> }) {
+  return (
+    <ShopPanel className="mt-12 px-4.5 py-4 flex flex-wrap gap-4 justify-between font-shop-mono text-[11px] tracking-[0.1em] uppercase text-shop-text-2">
+      {items.map((item) => (
+        <span key={item} className="inline-flex items-center gap-2">
+          <span
+            aria-hidden="true"
+            className="inline-block w-1.5 h-1.5 rounded-full bg-shop-accent"
+          />
+          {item}
+        </span>
+      ))}
+    </ShopPanel>
+  )
+}
diff --git a/src/components/shop/cartDrawerStore.ts b/src/components/shop/cartDrawerStore.ts
new file mode 100644
index 000000000..7de88be02
--- /dev/null
+++ b/src/components/shop/cartDrawerStore.ts
@@ -0,0 +1,19 @@
+import { create } from 'zustand'
+
+/**
+ * Tiny store that controls the global cart drawer's open state. Kept in a
+ * module rather than React context so any component — the navbar button,
+ * the "Add to cart" button on the PDP, etc. — can trigger it without
+ * threading props.
+ */
+export const useCartDrawerStore = create<{
+  open: boolean
+  setOpen: (open: boolean) => void
+  openDrawer: () => void
+  closeDrawer: () => void
+}>((set) => ({
+  open: false,
+  setOpen: (open) => set({ open }),
+  openDrawer: () => set({ open: true }),
+  closeDrawer: () => set({ open: false }),
+}))
diff --git a/src/components/shop/ui/Badge.tsx b/src/components/shop/ui/Badge.tsx
new file mode 100644
index 000000000..73fa231d3
--- /dev/null
+++ b/src/components/shop/ui/Badge.tsx
@@ -0,0 +1,33 @@
+import { twMerge } from 'tailwind-merge'
+
+type Variant = 'new' | 'sale' | 'neutral'
+
+const variants: Record<Variant, string> = {
+  new: 'bg-shop-accent text-shop-accent-ink border-transparent font-semibold',
+  sale: 'text-shop-orange border-shop-orange bg-transparent',
+  neutral: 'bg-shop-bg-2 text-shop-text border-shop-line-2',
+}
+
+/** Mono, uppercase pill used on product cards for New/Sale/Low-stock. */
+export function ShopBadge({
+  variant = 'neutral',
+  children,
+  className,
+}: {
+  variant?: Variant
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <span
+      className={twMerge(
+        'inline-flex items-center font-shop-mono text-shop-2xs tracking-[0.1em] uppercase',
+        'px-1.5 py-[3px] rounded border',
+        variants[variant],
+        className,
+      )}
+    >
+      {children}
+    </span>
+  )
+}
diff --git a/src/components/shop/ui/Button.tsx b/src/components/shop/ui/Button.tsx
new file mode 100644
index 000000000..3f40bafc0
--- /dev/null
+++ b/src/components/shop/ui/Button.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type Variant = 'primary' | 'outline' | 'ghost'
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: Variant
+  fullWidth?: boolean
+}
+
+const base =
+  'inline-flex items-center justify-center gap-2 rounded-md font-semibold font-shop-display transition-[filter,border-color,background-color,color] disabled:opacity-50 disabled:cursor-not-allowed'
+
+const variants: Record<Variant, string> = {
+  primary:
+    'bg-shop-accent text-shop-accent-ink px-4 py-2.5 text-shop-ui hover:enabled:brightness-110',
+  outline:
+    'border border-shop-line bg-shop-panel text-shop-text px-3.5 py-2 text-shop-sm hover:enabled:border-shop-line-2',
+  ghost:
+    'text-shop-text-2 hover:enabled:text-shop-text hover:enabled:bg-shop-panel px-2 py-1.5 text-shop-sm',
+}
+
+/** Shop button. Three visual weights — primary, outline, ghost. */
+export const ShopButton = React.forwardRef<HTMLButtonElement, Props>(
+  function ShopButton(
+    {
+      variant = 'outline',
+      fullWidth,
+      type = 'button',
+      className,
+      children,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        {...rest}
+        className={twMerge(
+          base,
+          variants[variant],
+          fullWidth && 'w-full',
+          className,
+        )}
+      >
+        {children}
+      </button>
+    )
+  },
+)
diff --git a/src/components/shop/ui/Chip.tsx b/src/components/shop/ui/Chip.tsx
new file mode 100644
index 000000000..222b28f2a
--- /dev/null
+++ b/src/components/shop/ui/Chip.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  isSelected?: boolean
+  isUnavailable?: boolean
+  /** Full hex color for color-swatch chips — drives both selected (100%) and unselected (80%) states. */
+  colorBg?: string
+  /** Legacy: hex background only for the selected state. */
+  selectedBg?: string
+  /** Forced text color when using selectedBg — auto-derived from selectedBg if omitted. */
+  selectedTextColor?: string
+}
+
+export const ShopChip = React.forwardRef<HTMLButtonElement, Props>(
+  function ShopChip(
+    {
+      isSelected,
+      isUnavailable,
+      children,
+      className,
+      disabled,
+      colorBg,
+      selectedBg,
+      selectedTextColor,
+      style,
+      ...rest
+    },
+    ref,
+  ) {
+    const chipStyle: React.CSSProperties = colorBg
+      ? {
+          backgroundColor: isSelected ? colorBg : hexToRgba(colorBg, 0.8),
+          borderColor: isSelected ? colorBg : hexToRgba(colorBg, 0.5),
+          color: contrastColor(colorBg),
+        }
+      : isSelected && selectedBg
+        ? {
+            backgroundColor: selectedBg,
+            borderColor: selectedBg,
+            color: selectedTextColor ?? contrastColor(selectedBg),
+          }
+        : {}
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-pressed={isSelected}
+        disabled={disabled ?? isUnavailable}
+        {...rest}
+        style={{ ...style, ...chipStyle }}
+        className={twMerge(
+          'inline-flex items-center gap-[7px] px-3 py-1.5 rounded-md border text-shop-sm',
+          'font-shop-display transition-[border-color,background-color,color]',
+          !colorBg && 'bg-shop-surface text-shop-text border-shop-line',
+          !colorBg &&
+            'hover:enabled:bg-shop-surface-hover hover:enabled:border-shop-line-2',
+          isSelected &&
+            !colorBg &&
+            !selectedBg &&
+            'bg-shop-panel-2 border-shop-accent text-shop-text hover:enabled:border-shop-accent',
+          isUnavailable &&
+            !isSelected &&
+            'line-through text-shop-muted opacity-40 cursor-not-allowed',
+          className,
+        )}
+      >
+        {children}
+      </button>
+    )
+  },
+)
+
+function hexToRgba(hex: string, alpha: number): string {
+  const h = hex.replace('#', '')
+  const r = parseInt(h.slice(0, 2), 16)
+  const g = parseInt(h.slice(2, 4), 16)
+  const b = parseInt(h.slice(4, 6), 16)
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+/** Returns '#000' or '#fff' based on the perceived luminance of a hex color. */
+function contrastColor(hex: string): string {
+  const h = hex.replace('#', '')
+  const r = parseInt(h.slice(0, 2), 16)
+  const g = parseInt(h.slice(2, 4), 16)
+  const b = parseInt(h.slice(4, 6), 16)
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+  return luminance > 0.55 ? '#000000' : '#ffffff'
+}
diff --git a/src/components/shop/ui/Crumb.tsx b/src/components/shop/ui/Crumb.tsx
new file mode 100644
index 000000000..9b74be9be
--- /dev/null
+++ b/src/components/shop/ui/Crumb.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { Link } from '@tanstack/react-router'
+
+export type Crumb = { label: string; href?: string }
+
+/**
+ * Mono, uppercase breadcrumb trail. Intermediate crumbs link; the current
+ * page renders as emphasized plain text.
+ */
+export function ShopCrumbs({ crumbs }: { crumbs: Array<Crumb> }) {
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className="font-shop-mono text-[11px] tracking-[0.12em] uppercase text-shop-muted flex items-center gap-2 flex-wrap"
+    >
+      {crumbs.map((crumb, i) => {
+        const isLast = i === crumbs.length - 1
+        return (
+          <React.Fragment key={`${crumb.label}-${i}`}>
+            {crumb.href && !isLast ? (
+              <Link
+                to={crumb.href}
+                className="text-shop-muted hover:text-shop-text transition-colors"
+              >
+                {crumb.label}
+              </Link>
+            ) : (
+              <span
+                aria-current={isLast ? 'page' : undefined}
+                className={isLast ? 'text-shop-text font-medium' : undefined}
+              >
+                {crumb.label}
+              </span>
+            )}
+            {isLast ? null : (
+              <span aria-hidden="true" className="opacity-40">
+                /
+              </span>
+            )}
+          </React.Fragment>
+        )
+      })}
+    </nav>
+  )
+}
diff --git a/src/components/shop/ui/Input.tsx b/src/components/shop/ui/Input.tsx
new file mode 100644
index 000000000..32db691be
--- /dev/null
+++ b/src/components/shop/ui/Input.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type Props = React.InputHTMLAttributes<HTMLInputElement>
+
+/** Shop-styled input. */
+export const ShopInput = React.forwardRef<HTMLInputElement, Props>(
+  function ShopInput({ className, ...rest }, ref) {
+    return (
+      <input
+        ref={ref}
+        {...rest}
+        className={twMerge(
+          'px-2.5 py-2 border border-shop-line rounded-md',
+          'bg-shop-panel text-shop-text text-[13px]',
+          'placeholder:text-shop-muted',
+          'focus:outline-none focus:border-shop-accent',
+          'w-full',
+          className,
+        )}
+      />
+    )
+  },
+)
diff --git a/src/components/shop/ui/Mono.tsx b/src/components/shop/ui/Mono.tsx
new file mode 100644
index 000000000..d18ad1ae6
--- /dev/null
+++ b/src/components/shop/ui/Mono.tsx
@@ -0,0 +1,42 @@
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Mono uppercase label used for section headings and metadata rows.
+ * Consistent typography across the shop: JetBrains Mono, 10.5px,
+ * 0.14em tracking, uppercase.
+ */
+export function ShopLabel({
+  children,
+  className,
+  as: Tag = 'div',
+}: {
+  children: React.ReactNode
+  className?: string
+  as?: 'div' | 'h2' | 'h3' | 'h4' | 'legend' | 'span'
+}) {
+  return (
+    <Tag
+      className={twMerge(
+        'font-shop-mono text-shop-xs tracking-[0.14em] uppercase text-shop-muted font-medium',
+        className,
+      )}
+    >
+      {children}
+    </Tag>
+  )
+}
+
+/** Mono text span for inline prices, counts, etc. — DM Mono, inherited size. */
+export function ShopMono({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <span className={`font-shop-mono${className ? ` ${className}` : ''}`}>
+      {children}
+    </span>
+  )
+}
diff --git a/src/components/shop/ui/Panel.tsx b/src/components/shop/ui/Panel.tsx
new file mode 100644
index 000000000..534cd6908
--- /dev/null
+++ b/src/components/shop/ui/Panel.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * A bordered surface card — live drop card, cart summary, product info box,
+ * etc. Use padding + flex utilities on the consumer to arrange contents.
+ */
+export const ShopPanel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(function ShopPanel({ className, children, ...rest }, ref) {
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      className={twMerge(
+        'border border-shop-line rounded-xl bg-shop-panel',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+})
diff --git a/src/components/shop/ui/Pulse.tsx b/src/components/shop/ui/Pulse.tsx
new file mode 100644
index 000000000..90051c847
--- /dev/null
+++ b/src/components/shop/ui/Pulse.tsx
@@ -0,0 +1,15 @@
+import { twMerge } from 'tailwind-merge'
+
+/** Animated green dot — signals "live" / "in stock". Keyframes in shop.css. */
+export function ShopPulse({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={twMerge(
+        'inline-block w-[7px] h-[7px] rounded-full bg-shop-green shrink-0',
+        '[animation:shop-pulse_1.8s_infinite]',
+        className,
+      )}
+    />
+  )
+}
diff --git a/src/components/shop/ui/Qty.tsx b/src/components/shop/ui/Qty.tsx
new file mode 100644
index 000000000..8a75ca918
--- /dev/null
+++ b/src/components/shop/ui/Qty.tsx
@@ -0,0 +1,69 @@
+import { Minus, Plus } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+
+type Props = {
+  quantity: number
+  onChange: (next: number) => void
+  min?: number
+  max?: number
+  disabled?: boolean
+  size?: 'sm' | 'md'
+  className?: string
+}
+
+/**
+ * Quantity stepper — shared between the PDP add-to-cart row, the cart page,
+ * and the cart drawer. Mono digit in the center, chrome-free buttons on each
+ * side.
+ */
+export function ShopQty({
+  quantity,
+  onChange,
+  min = 0,
+  max = 99,
+  disabled,
+  size = 'md',
+  className,
+}: Props) {
+  const cell =
+    size === 'sm'
+      ? 'h-7 w-7 [&_svg]:w-3 [&_svg]:h-3'
+      : 'h-10 w-8 [&_svg]:w-3.5 [&_svg]:h-3.5'
+  return (
+    <div
+      className={twMerge(
+        'inline-flex items-center border border-shop-line rounded-md bg-shop-panel',
+        'px-1.5',
+        className,
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => onChange(quantity - 1)}
+        disabled={disabled || quantity <= min}
+        aria-label="Decrease quantity"
+        className={twMerge(
+          'grid place-items-center text-shop-text-2 disabled:opacity-50 disabled:cursor-not-allowed',
+          cell,
+        )}
+      >
+        <Minus />
+      </button>
+      <span className="font-shop-mono text-[13px] text-shop-text min-w-[1.5rem] text-center select-none">
+        {quantity}
+      </span>
+      <button
+        type="button"
+        onClick={() => onChange(quantity + 1)}
+        disabled={disabled || quantity >= max}
+        aria-label="Increase quantity"
+        className={twMerge(
+          'grid place-items-center text-shop-text-2 disabled:opacity-50 disabled:cursor-not-allowed',
+          cell,
+        )}
+      >
+        <Plus />
+      </button>
+    </div>
+  )
+}
diff --git a/src/components/shop/ui/Select.tsx b/src/components/shop/ui/Select.tsx
new file mode 100644
index 000000000..6db1405af
--- /dev/null
+++ b/src/components/shop/ui/Select.tsx
@@ -0,0 +1,193 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type OptionData = { value: string; label: string; disabled: boolean }
+
+type Props = {
+  value?: string
+  onChange?: (e: { target: { value: string } }) => void
+  className?: string
+  triggerClassName?: string
+  children?: React.ReactNode
+}
+
+function getOptionLabel(children: React.ReactNode, value: string): string {
+  const text = React.Children.toArray(children)
+    .map((part) =>
+      typeof part === 'string' || typeof part === 'number' ? String(part) : '',
+    )
+    .join('')
+    .trim()
+  return text || value
+}
+
+function extractOptions(children: React.ReactNode): Array<OptionData> {
+  const options: Array<OptionData> = []
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child) || child.type !== 'option') return
+    const el = child as React.ReactElement<{
+      value?: string
+      children?: React.ReactNode
+      disabled?: boolean
+    }>
+    const value = String(el.props.value ?? '')
+    const label = getOptionLabel(el.props.children, value)
+    options.push({ value, label, disabled: el.props.disabled ?? false })
+  })
+  return options
+}
+
+/** Custom themed dropdown. Keeps the same onChange API as a native <select>
+ * so all call-sites stay unchanged. */
+export function ShopSelect({
+  value,
+  onChange,
+  className,
+  triggerClassName,
+  children,
+}: Props) {
+  const [open, setOpen] = React.useState(false)
+  const [focused, setFocused] = React.useState<string | null>(null)
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+  const menuRef = React.useRef<HTMLDivElement>(null)
+
+  const options = extractOptions(children)
+  const selected = options.find((o) => o.value === value)
+
+  // Close on outside click
+  React.useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => {
+      if (
+        !triggerRef.current?.contains(e.target as Node) &&
+        !menuRef.current?.contains(e.target as Node)
+      ) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  // Keyboard navigation
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (!open) {
+      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+        e.preventDefault()
+        setOpen(true)
+        setFocused(value ?? options[0]?.value ?? null)
+      }
+      return
+    }
+    const idx = options.findIndex((o) => o.value === focused)
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setFocused(options[Math.min(idx + 1, options.length - 1)]?.value ?? null)
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setFocused(options[Math.max(idx - 1, 0)]?.value ?? null)
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      if (focused) select(focused)
+    } else if (e.key === 'Escape') {
+      setOpen(false)
+      triggerRef.current?.focus()
+    }
+  }
+
+  const select = (optValue: string) => {
+    if (options.find((opt) => opt.value === optValue)?.disabled) return
+    onChange?.({ target: { value: optValue } })
+    setOpen(false)
+    triggerRef.current?.focus()
+  }
+
+  return (
+    <div className={twMerge('relative', className)}>
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onKeyDown={onKeyDown}
+        onClick={() => {
+          setOpen((o) => !o)
+          if (!open) setFocused(value ?? options[0]?.value ?? null)
+        }}
+        className={twMerge(
+          'flex items-center gap-2 border border-shop-line-2 rounded-xl',
+          'py-2.5 pl-4 pr-3 bg-transparent text-shop-text-2 font-shop-mono text-shop-ui',
+          'cursor-pointer transition-colors select-none whitespace-nowrap',
+          'hover:border-shop-muted hover:text-shop-text',
+          open && 'border-shop-muted text-shop-text',
+          triggerClassName,
+        )}
+      >
+        {selected?.label ?? '—'}
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+          aria-hidden
+          className={twMerge(
+            'transition-transform duration-150 shrink-0',
+            open && 'rotate-180',
+          )}
+        >
+          <path
+            d="M2 4l3 3 3-3"
+            stroke="currentColor"
+            fill="none"
+            strokeWidth="1.4"
+            strokeLinecap="round"
+          />
+        </svg>
+      </button>
+
+      {open ? (
+        <div
+          ref={menuRef}
+          role="listbox"
+          className={twMerge(
+            'absolute right-0 top-[calc(100%+6px)] z-[200] min-w-full',
+            'bg-shop-panel border border-shop-line rounded-xl max-h-[min(320px,60vh)] overflow-y-auto overflow-x-hidden',
+            'shadow-[0_8px_24px_-4px_rgba(0,0,0,0.18),0_2px_8px_-2px_rgba(0,0,0,0.12)]',
+          )}
+        >
+          {options.map((opt) => {
+            const isSelected = opt.value === value
+            const isFocused = opt.value === focused
+            return (
+              <button
+                key={opt.value}
+                type="button"
+                role="option"
+                aria-selected={isSelected}
+                disabled={opt.disabled}
+                onMouseEnter={() => setFocused(opt.value)}
+                onClick={() => select(opt.value)}
+                className={twMerge(
+                  'w-full text-left px-4 py-2.5 font-shop-mono text-shop-ui whitespace-nowrap',
+                  'transition-colors duration-75 flex items-center gap-2',
+                  isSelected ? 'text-shop-accent' : 'text-shop-text-2',
+                  isFocused &&
+                    !opt.disabled &&
+                    'bg-shop-surface text-shop-text',
+                  opt.disabled && 'opacity-40 cursor-not-allowed line-through',
+                )}
+              >
+                <span
+                  className={twMerge(
+                    'w-1.5 h-1.5 rounded-full shrink-0 transition-opacity',
+                    isSelected ? 'bg-shop-accent opacity-100' : 'opacity-0',
+                  )}
+                />
+                {opt.label}
+              </button>
+            )
+          })}
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/components/shop/ui/Size.tsx b/src/components/shop/ui/Size.tsx
new file mode 100644
index 000000000..b342b75fd
--- /dev/null
+++ b/src/components/shop/ui/Size.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  isSelected?: boolean
+  isUnavailable?: boolean
+}
+
+/** Size cell used in the variant selector grid. Mono, short, tappable. */
+export const ShopSize = React.forwardRef<HTMLButtonElement, Props>(
+  function ShopSize(
+    { isSelected, isUnavailable, children, className, disabled, ...rest },
+    ref,
+  ) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-pressed={isSelected}
+        disabled={disabled ?? isUnavailable}
+        {...rest}
+        className={twMerge(
+          'px-0 py-2.5 rounded-md text-center border border-shop-line',
+          'font-shop-mono font-medium text-shop-sm',
+          'bg-shop-surface text-shop-text',
+          'transition-[border-color,background-color]',
+          'hover:enabled:bg-shop-surface-hover hover:enabled:border-shop-line-2',
+          isSelected &&
+            'bg-shop-accent text-shop-accent-ink border-shop-accent',
+          isUnavailable &&
+            !isSelected &&
+            'line-through text-shop-muted opacity-40 cursor-not-allowed',
+          className,
+        )}
+      >
+        {children}
+      </button>
+    )
+  },
+)
diff --git a/src/components/shop/ui/Tab.tsx b/src/components/shop/ui/Tab.tsx
new file mode 100644
index 000000000..bc0f6dd80
--- /dev/null
+++ b/src/components/shop/ui/Tab.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  isActive?: boolean
+  count?: number
+}
+
+/** Filter tab used in the shop landing header. Pill-shaped, DM Mono, border-only active state. */
+export const ShopTab = React.forwardRef<HTMLButtonElement, Props>(
+  function ShopTab(
+    { isActive, count: _count, children, className, ...rest },
+    ref,
+  ) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        {...rest}
+        className={twMerge(
+          'inline-flex items-center px-4 py-2.5 rounded-xl font-shop-mono text-shop-ui transition-colors cursor-pointer',
+          isActive
+            ? 'border-2 border-shop-muted font-medium text-shop-text'
+            : 'border border-shop-line-2 font-normal text-shop-text-2 hover:text-shop-text hover:border-shop-muted',
+          className,
+        )}
+      >
+        {children}
+      </button>
+    )
+  },
+)
diff --git a/src/components/shop/ui/index.ts b/src/components/shop/ui/index.ts
new file mode 100644
index 000000000..9fb7ec9fd
--- /dev/null
+++ b/src/components/shop/ui/index.ts
@@ -0,0 +1,12 @@
+export { ShopButton } from './Button'
+export { ShopBadge } from './Badge'
+export { ShopLabel, ShopMono } from './Mono'
+export { ShopPulse } from './Pulse'
+export { ShopSelect } from './Select'
+export { ShopInput } from './Input'
+export { ShopTab } from './Tab'
+export { ShopChip } from './Chip'
+export { ShopSize } from './Size'
+export { ShopQty } from './Qty'
+export { ShopPanel } from './Panel'
+export { ShopCrumbs, type Crumb } from './Crumb'
diff --git a/src/components/stack/CategoryArticle.tsx b/src/components/stack/CategoryArticle.tsx
new file mode 100644
index 000000000..5de2e2910
--- /dev/null
+++ b/src/components/stack/CategoryArticle.tsx
@@ -0,0 +1,1175 @@
+import * as React from 'react'
+import { Link } from '@tanstack/react-router'
+import { twMerge } from 'tailwind-merge'
+import {
+  ArrowRight,
+  Braces,
+  CheckCircle2,
+  ChevronRight,
+  Clock3,
+  Database,
+  Keyboard,
+  Newspaper,
+  PackageCheck,
+  Rocket,
+  Search,
+  SlidersHorizontal,
+  Sparkles,
+  Table as TableIcon,
+  Terminal,
+  Wrench,
+  Zap,
+} from 'lucide-react'
+
+import { LibraryWordmark } from '~/components/LibraryWordmark'
+import type { LibraryId, LibrarySlim } from '~/libraries'
+import { formatPublishedDate } from '~/utils/blog-format'
+import type { RelatedPost as RelatedPostData } from '~/utils/blog.functions'
+import {
+  categoryMeta,
+  getCategoryLibraries,
+  type CategorySlug,
+} from './stack-categories'
+
+type RelatedPost = {
+  post: { slug: string; title: string; published: string; excerpt?: string }
+  lib: LibrarySlim
+}
+
+const heroTitleClassName =
+  'mt-4 text-3xl font-black leading-[1.04] sm:text-4xl lg:text-5xl'
+
+const libraryLinkClassName =
+  'group flex h-full flex-col rounded-lg border border-zinc-200 bg-white p-5 transition-colors hover:border-zinc-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-950 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-600 dark:focus-visible:outline-white'
+
+const staticPanelClassName =
+  'rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950'
+
+export function CategoryArticle({
+  slug,
+  relatedPosts: relatedPostsData,
+}: {
+  slug: CategorySlug
+  relatedPosts: Array<RelatedPostData>
+}) {
+  const meta = categoryMeta[slug]
+  const libraries = getCategoryLibraries(slug)
+  const relatedPosts = reconstructRelatedPosts(libraries, relatedPostsData)
+
+  return (
+    <div className="bg-white text-zinc-950 dark:bg-zinc-950 dark:text-zinc-50">
+      <Breadcrumb categoryName={meta.name} />
+
+      {slug === 'framework' ? (
+        <FrameworkCategory libraries={libraries} relatedPosts={relatedPosts} />
+      ) : null}
+      {slug === 'state' ? (
+        <StateCategory libraries={libraries} relatedPosts={relatedPosts} />
+      ) : null}
+      {slug === 'ui' ? (
+        <UiCategory libraries={libraries} relatedPosts={relatedPosts} />
+      ) : null}
+      {slug === 'performance' ? (
+        <PerformanceCategory
+          libraries={libraries}
+          relatedPosts={relatedPosts}
+        />
+      ) : null}
+      {slug === 'tooling' ? (
+        <ToolingCategory libraries={libraries} relatedPosts={relatedPosts} />
+      ) : null}
+    </div>
+  )
+}
+
+/**
+ * Reconstructs {post, lib} pairs from the server-provided, already-ordered
+ * and already-sliced related-posts data, using the in-memory `libraries`
+ * array (pure, client-safe) rather than sending non-serializable LibrarySlim
+ * objects (e.g. `handleRedirects`) over the server-fn RPC boundary.
+ */
+function reconstructRelatedPosts(
+  libraries: Array<LibrarySlim>,
+  data: Array<RelatedPostData>,
+): Array<RelatedPost> {
+  const libraryById = new Map<LibraryId, LibrarySlim>(
+    libraries.map((lib) => [lib.id, lib]),
+  )
+  return data.flatMap(({ libraryId, post }) => {
+    const lib = libraryById.get(libraryId)
+    return lib ? [{ post, lib }] : []
+  })
+}
+
+function Breadcrumb({ categoryName }: { categoryName: string }) {
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950"
+    >
+      <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-1.5 px-4 py-2.5 text-xs text-zinc-500 dark:text-zinc-400">
+        <Link to="/" className="hover:text-zinc-950 dark:hover:text-white">
+          Home
+        </Link>
+        <ChevronRight size={12} aria-hidden="true" />
+        <Link
+          to="/libraries"
+          className="hover:text-zinc-950 dark:hover:text-white"
+        >
+          Libraries
+        </Link>
+        <ChevronRight size={12} aria-hidden="true" />
+        <span className="font-semibold text-zinc-700 dark:text-zinc-300">
+          {categoryName}
+        </span>
+      </div>
+    </nav>
+  )
+}
+
+function FrameworkCategory({
+  libraries,
+  relatedPosts,
+}: {
+  libraries: Array<LibrarySlim>
+  relatedPosts: Array<RelatedPost>
+}) {
+  const start = getLibraryById(libraries, 'start')
+  const router = getLibraryById(libraries, 'router')
+
+  return (
+    <>
+      <section className="border-b border-cyan-950/10 bg-[#f6fbfb] dark:border-cyan-300/10 dark:bg-[#041010]">
+        <div className="mx-auto grid max-w-7xl gap-8 px-4 py-10 lg:grid-cols-[0.88fr_1.12fr] lg:items-start lg:py-12">
+          <div className="max-w-3xl">
+            <SectionKicker icon={<Sparkles size={14} />}>
+              Framework
+            </SectionKicker>
+            <h1 className={heroTitleClassName}>
+              Typed apps, from SPA to full-stack.
+            </h1>
+            <p className="mt-5 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Keep the same route model when an app stays client-side or grows a
+              server boundary.
+            </p>
+            <div className="mt-7 flex flex-wrap gap-3">
+              <LibraryButton library={start} label="Explore Start" />
+              <LibraryButton library={router} label="Explore Router" muted />
+            </div>
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {[
+                ['Route model', 'Routes, search, loaders, links'],
+                ['Server boundary', 'Rendering and functions in one app'],
+                ['Portable output', 'Ready for common hosts'],
+              ].map(([label, detail]) => (
+                <div key={label} className="border-l-2 border-cyan-500/70 pl-3">
+                  <p className="text-sm font-bold text-zinc-950 dark:text-white">
+                    {label}
+                  </p>
+                  <p className="mt-1 text-sm leading-5 text-zinc-600 dark:text-zinc-400">
+                    {detail}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <FrameworkPlanPanel />
+        </div>
+      </section>
+
+      <section className="bg-white dark:bg-zinc-950">
+        <div className="mx-auto grid max-w-7xl gap-5 px-4 py-12 lg:grid-cols-[1.1fr_0.9fr]">
+          <Link
+            to={start.to ?? '#'}
+            className="group flex h-full flex-col rounded-lg border border-cyan-200 bg-cyan-50 p-6 transition-colors hover:border-cyan-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-950 dark:border-cyan-900/70 dark:bg-cyan-950/20 dark:hover:border-cyan-600 dark:focus-visible:outline-cyan-100"
+          >
+            <LibraryTitle library={start} overline="Lead library" />
+            <h2 className="mt-5 max-w-2xl text-3xl font-black leading-tight sm:text-4xl">
+              <LibraryWordmark library={start} includeTanStack={false} /> takes
+              the route tree all the way to production.
+            </h2>
+            <p className="mt-4 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Use it when the app framework should own the server boundary.
+            </p>
+            <OpenLibraryCta
+              library={start}
+              className="mt-7 border-cyan-200 text-cyan-800 group-hover:border-cyan-400 group-hover:text-cyan-950 dark:border-cyan-800 dark:text-cyan-200 dark:group-hover:border-cyan-500 dark:group-hover:text-white"
+            />
+          </Link>
+
+          <Link
+            to={router.to ?? '#'}
+            className={twMerge(libraryLinkClassName, 'p-6')}
+          >
+            <LibraryTitle library={router} overline="Foundation" />
+            <div className="mt-5 rounded-lg border border-emerald-200 bg-white p-4 font-mono text-xs leading-6 text-zinc-700 dark:border-emerald-900 dark:bg-zinc-950 dark:text-zinc-300">
+              {[
+                'routes/__root.tsx',
+                'routes/index.tsx',
+                'routes/projects.$id.tsx',
+                'loader: typed project data',
+                'search: validated filters',
+              ].map((line, index) => (
+                <div key={line} className="flex items-center gap-3">
+                  <span className="w-5 text-right text-emerald-600 dark:text-emerald-400">
+                    {index + 1}
+                  </span>
+                  <span>{line}</span>
+                </div>
+              ))}
+            </div>
+            <p className="mt-5 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+              Use it when routing is the foundation, without needing a full
+              server app.
+            </p>
+            <OpenLibraryCta library={router} className="mt-5" />
+          </Link>
+        </div>
+      </section>
+
+      <RelatedPostsBlock items={relatedPosts} />
+    </>
+  )
+}
+
+function FrameworkPlanPanel() {
+  return (
+    <div className="rounded-lg border border-cyan-950/10 bg-white p-5 shadow-sm shadow-cyan-950/5 dark:border-cyan-300/15 dark:bg-zinc-950">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <div>
+          <p className="text-xs font-bold text-cyan-700 dark:text-cyan-300">
+            App plan
+          </p>
+          <p className="mt-0.5 text-sm text-zinc-600 dark:text-zinc-400">
+            Map the product brief before choosing the runtime boundary.
+          </p>
+        </div>
+        <span className="inline-flex items-center gap-1 rounded-md border border-cyan-200 bg-cyan-50 px-2 py-1 text-xs font-semibold text-cyan-800 dark:border-cyan-800 dark:bg-cyan-950/50 dark:text-cyan-200">
+          <Rocket size={13} aria-hidden="true" />
+          App-ready
+        </span>
+      </div>
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {[
+          ['Routes', 'Nested screens'],
+          ['Data', 'Load before render'],
+          ['Server', 'Add only when needed'],
+        ].map(([label, detail]) => (
+          <div key={label} className="border-l-2 border-cyan-500/60 pl-3">
+            <p className="text-sm font-black text-zinc-950 dark:text-white">
+              {label}
+            </p>
+            <p className="mt-1 text-xs font-semibold text-zinc-600 dark:text-zinc-400">
+              {detail}
+            </p>
+          </div>
+        ))}
+      </div>
+      <div className="mt-5 rounded-lg border border-zinc-200 bg-zinc-50 p-4 font-mono text-xs leading-6 text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300">
+        {[
+          '/ routes and layouts',
+          '+ loaders before render',
+          '+ server boundary when needed',
+          '-> deploy target ready',
+        ].map((line) => (
+          <div key={line}>{line}</div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function StateCategory({
+  libraries,
+  relatedPosts,
+}: {
+  libraries: Array<LibrarySlim>
+  relatedPosts: Array<RelatedPost>
+}) {
+  const query = getLibraryById(libraries, 'query')
+  const db = getLibraryById(libraries, 'db')
+  const store = getLibraryById(libraries, 'store')
+  const ai = getLibraryById(libraries, 'ai')
+
+  return (
+    <>
+      <section className="border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid max-w-7xl gap-8 px-4 py-12 lg:grid-cols-[0.92fr_1.08fr] lg:items-center">
+          <div>
+            <SectionKicker icon={<Database size={14} />}>
+              Data & State Management
+            </SectionKicker>
+            <h1 className={heroTitleClassName}>
+              The right state layer for every kind of data.
+            </h1>
+            <p className="mt-5 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Remote cache, synced collections, local signals, and model work.
+              Pick by who owns the truth.
+            </p>
+          </div>
+
+          <div className="rounded-lg border border-zinc-200 bg-white p-5 shadow-sm shadow-zinc-950/5 dark:border-zinc-800 dark:bg-zinc-900">
+            <div className="grid gap-3">
+              {[
+                {
+                  key: 'cache',
+                  label: 'Cache',
+                  detail: 'freshness, retries, invalidation',
+                },
+                {
+                  key: 'collect',
+                  label: 'Collect',
+                  detail: 'live queries, optimistic writes',
+                },
+                {
+                  key: 'signal',
+                  label: 'Signal',
+                  detail: 'selectors, derived state, adapters',
+                },
+                {
+                  key: 'model',
+                  label: 'Model',
+                  detail: 'providers, tools, AG-UI streams',
+                },
+              ].map(({ key, label, detail }) => (
+                <div
+                  key={key}
+                  className="grid gap-2 border-l-2 border-zinc-200 py-2 pl-3 dark:border-zinc-700 sm:grid-cols-[7rem_1fr] sm:items-baseline"
+                >
+                  <div className="text-sm font-black text-zinc-950 dark:text-white">
+                    {label}
+                  </div>
+                  <p className="text-sm font-semibold text-zinc-600 dark:text-zinc-400">
+                    {detail}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-white dark:bg-zinc-950">
+        <div className="mx-auto max-w-7xl px-4 py-12">
+          <h2 className="text-2xl font-black leading-tight sm:text-3xl">
+            Open the state libraries
+          </h2>
+
+          <div className="mt-6 grid gap-4 md:grid-cols-2">
+            <StateLibraryCard
+              library={query}
+              title="Remote server data"
+              body="Cache API data with stale time, retries, mutations, and invalidation."
+            />
+            <StateLibraryCard
+              library={db}
+              title="Synced client collections"
+              body="Read live collections locally while writes reconcile with an API."
+            />
+            <StateLibraryCard
+              library={store}
+              title="Local reactive state"
+              body="Keep client-owned state small, derived, and framework-friendly."
+            />
+            <StateLibraryCard
+              library={ai}
+              title="Typed model work"
+              body="Represent providers, tools, streams, and AG-UI events in TypeScript."
+            />
+          </div>
+        </div>
+      </section>
+
+      <RelatedPostsBlock items={relatedPosts} />
+    </>
+  )
+}
+
+function StateLibraryCard({
+  body,
+  library,
+  title,
+}: {
+  body: string
+  library: LibrarySlim
+  title: string
+}) {
+  return (
+    <Link to={library.to ?? '#'} className={libraryLinkClassName}>
+      <LibraryTitle library={library} />
+      <h3 className="mt-4 text-2xl font-black leading-tight">{title}</h3>
+      <p className="mt-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+      <OpenLibraryCta library={library} className="mt-5" />
+    </Link>
+  )
+}
+
+function UiCategory({
+  libraries,
+  relatedPosts,
+}: {
+  libraries: Array<LibrarySlim>
+  relatedPosts: Array<RelatedPost>
+}) {
+  const table = getLibraryById(libraries, 'table')
+  const form = getLibraryById(libraries, 'form')
+  const hotkeys = getLibraryById(libraries, 'hotkeys')
+
+  return (
+    <>
+      <section className="border-b border-zinc-200 bg-[#f8faf9] dark:border-zinc-800 dark:bg-[#090b0d]">
+        <div className="mx-auto grid max-w-7xl gap-8 px-4 py-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
+          <div>
+            <SectionKicker icon={<TableIcon size={14} />}>
+              UI & UX
+            </SectionKicker>
+            <h1 className={heroTitleClassName}>
+              Headless engines for the UI users actually touch.
+            </h1>
+            <p className="mt-5 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Keep the markup and styling. Let the state model handle rows,
+              fields, validation, shortcut scopes, and type safety.
+            </p>
+          </div>
+
+          <InteractionWorkbench />
+        </div>
+      </section>
+
+      <section className="bg-white dark:bg-zinc-950">
+        <div className="mx-auto max-w-7xl px-4 py-12">
+          <h2 className="text-2xl font-black leading-tight sm:text-3xl">
+            Open the UI libraries
+          </h2>
+
+          <div className="mt-6 grid gap-4 lg:grid-cols-3">
+            <UiSurfaceCard
+              detail="Sort, filter, group, size, select, and virtualize without taking a table skin."
+              icon={<TableIcon size={18} />}
+              library={table}
+              title="Data density"
+            />
+            <UiSurfaceCard
+              detail="Field state, validation, submission, and async checks without losing control of inputs."
+              icon={<SlidersHorizontal size={18} />}
+              library={form}
+              title="Input confidence"
+            />
+            <UiSurfaceCard
+              detail="Scopes, sequences, key state, and command surfaces for keyboard-first flows."
+              icon={<Keyboard size={18} />}
+              library={hotkeys}
+              title="Keyboard flow"
+            />
+          </div>
+        </div>
+      </section>
+
+      <RelatedPostsBlock items={relatedPosts} />
+    </>
+  )
+}
+
+function InteractionWorkbench() {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm shadow-zinc-950/5 dark:border-zinc-800 dark:bg-zinc-950">
+      <div className="grid gap-4 md:grid-cols-[1.1fr_0.9fr]">
+        <div
+          className={twMerge(
+            staticPanelClassName,
+            'border-l-2 border-l-blue-500',
+          )}
+        >
+          <SignalLabel
+            dotClassName="bg-blue-500"
+            label="Rows"
+            overline="Grid state"
+          />
+          <TableSample />
+        </div>
+        <div className="grid gap-4">
+          <div
+            className={twMerge(
+              staticPanelClassName,
+              'border-l-2 border-l-yellow-500',
+            )}
+          >
+            <SignalLabel
+              dotClassName="bg-yellow-500"
+              label="Fields"
+              overline="Input state"
+            />
+            <FormSample />
+          </div>
+          <div
+            className={twMerge(
+              staticPanelClassName,
+              'border-l-2 border-l-rose-500',
+            )}
+          >
+            <SignalLabel
+              dotClassName="bg-rose-500"
+              label="Commands"
+              overline="Command state"
+            />
+            <HotkeysSample />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function UiSurfaceCard({
+  detail,
+  icon,
+  library,
+  title,
+}: {
+  detail: string
+  icon: React.ReactNode
+  library: LibrarySlim
+  title: string
+}) {
+  return (
+    <Link to={library.to ?? '#'} className={libraryLinkClassName}>
+      <div className="flex items-center justify-between gap-3">
+        <LibraryTitle library={library} overline={title} />
+        <span className="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white text-zinc-700 dark:bg-zinc-950 dark:text-zinc-300">
+          {icon}
+        </span>
+      </div>
+      <p className="mt-5 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {detail}
+      </p>
+      <OpenLibraryCta library={library} className="mt-5" />
+    </Link>
+  )
+}
+
+function TableSample() {
+  return (
+    <div className="mt-4 overflow-hidden rounded-lg border border-blue-200 bg-white text-xs dark:border-blue-900 dark:bg-zinc-950">
+      <div className="grid grid-cols-3 bg-blue-100 font-bold text-blue-950 dark:bg-blue-950/60 dark:text-blue-100">
+        {['Name', 'Status', 'MRR'].map((heading) => (
+          <div key={heading} className="px-3 py-2">
+            {heading}
+          </div>
+        ))}
+      </div>
+      {[
+        ['Acme', 'Active', '$12k'],
+        ['Orbit', 'Trial', '$4k'],
+        ['North', 'Active', '$8k'],
+      ].map((row) => (
+        <div
+          key={row.join(':')}
+          className="grid grid-cols-3 border-t border-blue-100 text-zinc-600 dark:border-blue-900/60 dark:text-zinc-300"
+        >
+          {row.map((cell) => (
+            <div key={cell} className="px-3 py-2">
+              {cell}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function FormSample() {
+  return (
+    <div className="mt-4 space-y-2 text-xs">
+      {[
+        ['Email', 'team@tanstack.com'],
+        ['Plan', 'Startup'],
+      ].map(([label, value]) => (
+        <div key={label}>
+          <p className="mb-1 font-semibold text-yellow-800 dark:text-yellow-200">
+            {label}
+          </p>
+          <div className="rounded-md border border-yellow-200 bg-white px-3 py-2 text-zinc-600 dark:border-yellow-900 dark:bg-zinc-950 dark:text-zinc-300">
+            {value}
+          </div>
+        </div>
+      ))}
+      <div className="flex items-center gap-1.5 text-yellow-800 dark:text-yellow-200">
+        <CheckCircle2 size={14} aria-hidden="true" />
+        Schema and field state agree
+      </div>
+    </div>
+  )
+}
+
+function HotkeysSample() {
+  return (
+    <div className="mt-4 flex flex-wrap items-center gap-2 text-xs">
+      {['Cmd', 'K', 'then', 'P'].map((key) => (
+        <span
+          key={key}
+          className="rounded-md border border-rose-200 bg-white px-2.5 py-2 font-bold text-rose-800 shadow-sm dark:border-rose-900 dark:bg-zinc-950 dark:text-rose-200"
+        >
+          {key}
+        </span>
+      ))}
+      <span className="basis-full text-rose-800 dark:text-rose-200">
+        Sequence opens project switcher
+      </span>
+    </div>
+  )
+}
+
+function PerformanceCategory({
+  libraries,
+  relatedPosts,
+}: {
+  libraries: Array<LibrarySlim>
+  relatedPosts: Array<RelatedPost>
+}) {
+  const virtual = getLibraryById(libraries, 'virtual')
+  const pacer = getLibraryById(libraries, 'pacer')
+
+  return (
+    <>
+      <section className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-[#0b0d08]">
+        <div className="mx-auto grid max-w-7xl gap-8 px-4 py-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
+          <div>
+            <SectionKicker icon={<Zap size={14} />}>Performance</SectionKicker>
+            <h1 className={heroTitleClassName}>
+              Render less, schedule less, stay fast.
+            </h1>
+            <p className="mt-5 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              Keep large interfaces and event-heavy surfaces inside the next
+              frame.
+            </p>
+          </div>
+
+          <FrameBudgetLab />
+        </div>
+      </section>
+
+      <section className="bg-white dark:bg-zinc-950">
+        <div className="mx-auto max-w-7xl px-4 py-12">
+          <div className="grid gap-4 lg:grid-cols-2">
+            <PerformanceLibraryPanel
+              body="Render only the visible slice and measure rows as they change."
+              library={virtual}
+              title="Virtual reduces the visible work."
+            />
+            <PerformanceLibraryPanel
+              body="Debounce, throttle, queue, batch, and rate-limit expensive work."
+              library={pacer}
+              title="Pacer shapes time before it reaches work."
+            />
+          </div>
+        </div>
+      </section>
+
+      <RelatedPostsBlock items={relatedPosts} />
+    </>
+  )
+}
+
+function FrameBudgetLab() {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-5 shadow-sm shadow-zinc-950/5 dark:border-zinc-800 dark:bg-zinc-950">
+      <div className="mb-5 flex items-center justify-between gap-3">
+        <p className="font-bold">16ms frame lab</p>
+        <Clock3 className="text-lime-700 dark:text-lime-300" size={18} />
+      </div>
+      <div className="grid gap-4 md:grid-cols-2">
+        <div
+          className={twMerge(
+            staticPanelClassName,
+            'border-l-2 border-l-purple-500',
+          )}
+        >
+          <SignalLabel
+            dotClassName="bg-purple-500"
+            label="Visible rows"
+            overline="DOM pressure"
+          />
+          <div className="mt-4 space-y-1.5">
+            {Array.from({ length: 7 }).map((_, index) => (
+              <div
+                key={index}
+                className={twMerge(
+                  'h-7 rounded-md border px-3 text-xs leading-7',
+                  index > 1 && index < 5
+                    ? 'border-purple-300 bg-white text-purple-900 dark:border-purple-700 dark:bg-zinc-950 dark:text-purple-100'
+                    : 'border-purple-100 bg-purple-100/70 text-purple-400 dark:border-purple-900/60 dark:bg-purple-950/20 dark:text-purple-500',
+                )}
+              >
+                row {index + 121}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div
+          className={twMerge(
+            staticPanelClassName,
+            'border-l-2 border-l-lime-500',
+          )}
+        >
+          <SignalLabel
+            dotClassName="bg-lime-500"
+            label="Event stream"
+            overline="Event pressure"
+          />
+          <div className="mt-4 space-y-3">
+            {[
+              ['input burst', 'debounce'],
+              ['scroll stream', 'throttle'],
+              ['write queue', 'batch'],
+            ].map(([event, action]) => (
+              <div
+                key={event}
+                className="grid grid-cols-[1fr_auto] items-center gap-3 rounded-md bg-white px-3 py-2 text-xs dark:bg-zinc-950"
+              >
+                <span className="text-zinc-600 dark:text-zinc-300">
+                  {event}
+                </span>
+                <span className="rounded-md bg-lime-100 px-2 py-1 font-bold text-lime-800 dark:bg-lime-950 dark:text-lime-200">
+                  {action}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function PerformanceLibraryPanel({
+  body,
+  library,
+  title,
+}: {
+  body: string
+  library: LibrarySlim
+  title: string
+}) {
+  return (
+    <Link
+      to={library.to ?? '#'}
+      className={twMerge(libraryLinkClassName, 'p-6')}
+    >
+      <h2 className="text-3xl font-black leading-tight">
+        <LibraryLeadTitle library={library} title={title} />
+      </h2>
+      <p className="mt-4 text-base leading-7 text-zinc-700 dark:text-zinc-300">
+        {body}
+      </p>
+      <OpenLibraryCta library={library} className="mt-6" />
+    </Link>
+  )
+}
+
+function LibraryLeadTitle({
+  library,
+  title,
+}: {
+  library: LibrarySlim
+  title: string
+}) {
+  const productName = shortName(library)
+
+  if (!title.startsWith(productName)) {
+    return <>{title}</>
+  }
+
+  return (
+    <>
+      <LibraryWordmark library={library} includeTanStack={false} />
+      {title.slice(productName.length)}
+    </>
+  )
+}
+
+function ToolingCategory({
+  libraries,
+  relatedPosts,
+}: {
+  libraries: Array<LibrarySlim>
+  relatedPosts: Array<RelatedPost>
+}) {
+  const devtools = getLibraryById(libraries, 'devtools')
+  const config = getLibraryById(libraries, 'config')
+  const cli = getLibraryById(libraries, 'cli')
+  const intent = getLibraryById(libraries, 'intent')
+
+  return (
+    <>
+      <section className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950">
+        <div className="mx-auto grid max-w-7xl gap-8 px-4 py-12 lg:grid-cols-[0.88fr_1.12fr] lg:items-center">
+          <div>
+            <SectionKicker icon={<Wrench size={14} />}>Tooling</SectionKicker>
+            <h1 className={heroTitleClassName}>
+              The tools around TanStack apps and packages.
+            </h1>
+            <p className="mt-5 max-w-2xl text-base leading-7 text-zinc-700 dark:text-zinc-300 sm:text-lg">
+              A smaller loop around projects, packages, runtime inspection, and
+              package-level guidance.
+            </p>
+          </div>
+
+          <ToolingWorkbench />
+        </div>
+      </section>
+
+      <section className="bg-white dark:bg-zinc-950">
+        <div className="mx-auto max-w-7xl px-4 py-12">
+          <h2 className="text-2xl font-black leading-tight sm:text-3xl">
+            Open the tools
+          </h2>
+          <div className="mt-6 grid gap-4 lg:grid-cols-4">
+            <ToolingStep
+              detail="Create Start apps, search docs, and export prompts."
+              icon={<Terminal size={18} />}
+              library={cli}
+              step="Create"
+            />
+            <ToolingStep
+              detail="Lint, build, test, version, and publish packages."
+              icon={<PackageCheck size={18} />}
+              library={config}
+              step="Package"
+            />
+            <ToolingStep
+              detail="Inspect TanStack libraries through one dockable panel."
+              icon={<Search size={18} />}
+              library={devtools}
+              step="Inspect"
+            />
+            <ToolingStep
+              detail="Ship package-scoped guidance for assistants."
+              icon={<Braces size={18} />}
+              library={intent}
+              step="Remember"
+            />
+          </div>
+        </div>
+      </section>
+
+      <RelatedPostsBlock items={relatedPosts} />
+    </>
+  )
+}
+
+function ToolingWorkbench() {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-zinc-950 p-4 text-white shadow-sm shadow-zinc-950/10 dark:border-zinc-800">
+      <div className="mb-4 flex items-center gap-2 text-sm text-zinc-400">
+        <span className="h-2.5 w-2.5 rounded-md bg-red-400" />
+        <span className="h-2.5 w-2.5 rounded-md bg-yellow-400" />
+        <span className="h-2.5 w-2.5 rounded-md bg-emerald-400" />
+        <span className="ml-2 font-mono">package-workbench</span>
+      </div>
+      <div className="grid gap-3 md:grid-cols-2">
+        <WorkbenchCell
+          code={['create app workspace', 'template: app + data']}
+          icon={<Terminal size={16} />}
+          label="Create"
+        />
+        <WorkbenchCell
+          code={['shared lint/build/test', 'publish: versions ready']}
+          icon={<PackageCheck size={16} />}
+          label="Package"
+        />
+        <WorkbenchCell
+          code={['runtime panel open', 'custom dock: app metrics']}
+          icon={<Search size={16} />}
+          label="Inspect"
+        />
+        <WorkbenchCell
+          code={['package notes installed', 'context: dependency-scoped']}
+          icon={<Braces size={16} />}
+          label="Remember"
+        />
+      </div>
+    </div>
+  )
+}
+
+function WorkbenchCell({
+  code,
+  icon,
+  label,
+}: {
+  code: Array<string>
+  icon: React.ReactNode
+  label: string
+}) {
+  return (
+    <div className="rounded-lg border border-white/10 bg-white/5 p-4">
+      <div className="flex items-center gap-2 text-white">
+        {icon}
+        <span className="text-sm font-black leading-tight">{label}</span>
+      </div>
+      <div className="mt-4 space-y-1 font-mono text-xs text-zinc-300">
+        {code.map((line) => (
+          <div key={line}>{line}</div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ToolingStep({
+  detail,
+  icon,
+  library,
+  step,
+}: {
+  detail: string
+  icon: React.ReactNode
+  library: LibrarySlim
+  step: string
+}) {
+  return (
+    <Link to={library.to ?? '#'} className={libraryLinkClassName}>
+      <div className="flex items-center justify-between gap-3">
+        <span className="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white text-zinc-700 dark:bg-zinc-950 dark:text-zinc-300">
+          {icon}
+        </span>
+        <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400">
+          {step}
+        </span>
+      </div>
+      <LibraryTitle library={library} className="mt-5" />
+      <p className="mt-4 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
+        {detail}
+      </p>
+      <OpenLibraryCta library={library} className="mt-5" />
+    </Link>
+  )
+}
+
+function RelatedPostsBlock({ items }: { items: Array<RelatedPost> }) {
+  if (items.length === 0) {
+    return null
+  }
+
+  return (
+    <section className="border-t border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950">
+      <div className="mx-auto max-w-7xl px-4 py-12">
+        <SectionKicker icon={<Newspaper size={14} />}>
+          From the team
+        </SectionKicker>
+        <h2 className="mt-3 text-2xl font-black leading-tight sm:text-3xl">
+          Recent writing from these libraries
+        </h2>
+        <ul className="mt-6 grid gap-3 md:grid-cols-2">
+          {items.map(({ post, lib }) => (
+            <li key={post.slug}>
+              <Link
+                to="/blog/$"
+                params={{ _splat: post.slug }}
+                className="group flex h-full flex-col rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700"
+              >
+                <div className="flex flex-wrap items-center gap-2">
+                  <span
+                    className={twMerge(
+                      'inline-flex rounded-md bg-linear-to-r px-2 py-1 text-xs font-black text-white',
+                      lib.colorFrom,
+                      lib.colorTo,
+                    )}
+                  >
+                    <LibraryWordmark
+                      library={lib}
+                      includeTanStack={false}
+                      colorProduct={false}
+                    />
+                  </span>
+                  <span className="text-xs font-semibold text-zinc-500 dark:text-zinc-400">
+                    {formatPublishedDate(post.published)}
+                  </span>
+                </div>
+                <p className="mt-3 text-base font-bold leading-snug group-hover:underline">
+                  {post.title}
+                </p>
+                {post.excerpt ? (
+                  <p className="mt-2 line-clamp-2 text-sm leading-6 text-zinc-600 dark:text-zinc-400">
+                    {post.excerpt}
+                  </p>
+                ) : null}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+function SectionKicker({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon: React.ReactNode
+}) {
+  return (
+    <p className="inline-flex items-center gap-2 text-sm font-black uppercase text-zinc-600 dark:text-zinc-400">
+      {icon}
+      {children}
+    </p>
+  )
+}
+
+function SignalLabel({
+  className,
+  dotClassName,
+  label,
+  overline,
+}: {
+  className?: string
+  dotClassName: string
+  label: string
+  overline?: string
+}) {
+  return (
+    <div className={twMerge('min-w-0', className)}>
+      {overline ? (
+        <p className="text-xs font-bold uppercase text-zinc-500 dark:text-zinc-400">
+          {overline}
+        </p>
+      ) : null}
+      <div
+        className={twMerge(
+          'inline-flex items-center gap-2 text-sm font-black leading-tight',
+          overline ? 'mt-1' : undefined,
+        )}
+      >
+        <span className={twMerge('h-2 w-2 rounded-full', dotClassName)} />
+        <span>{label}</span>
+      </div>
+    </div>
+  )
+}
+
+function LibraryTitle({
+  className,
+  library,
+  overline,
+}: {
+  className?: string
+  library: LibrarySlim
+  overline?: string
+}) {
+  return (
+    <div className={twMerge('min-w-0', className)}>
+      {overline ? (
+        <p className="text-xs font-bold uppercase text-zinc-500 dark:text-zinc-400">
+          {overline}
+        </p>
+      ) : null}
+      <div
+        className={twMerge(
+          'flex flex-wrap items-center gap-2',
+          overline ? 'mt-1' : undefined,
+        )}
+      >
+        <h3 className="text-xl font-black leading-tight">
+          <LibraryWordmark library={library} />
+        </h3>
+        {library.badge ? (
+          <span
+            className={twMerge(
+              'rounded-md bg-linear-to-r px-1.5 py-0.5 text-xs font-black uppercase',
+              library.colorFrom,
+              library.colorTo,
+              library.badgeTextStyle ?? 'text-white',
+            )}
+          >
+            {library.badge}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+function OpenLibraryCta({
+  className,
+  library,
+}: {
+  className?: string
+  library: LibrarySlim
+}) {
+  return (
+    <span
+      className={twMerge(
+        'mt-auto inline-flex w-fit items-center gap-1.5 rounded-md border border-zinc-200 bg-white px-2.5 py-1.5 text-xs font-bold text-zinc-700 transition-colors group-hover:border-zinc-400 group-hover:text-zinc-950 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-300 dark:group-hover:border-zinc-500 dark:group-hover:text-white',
+        className,
+      )}
+    >
+      Open {shortName(library)}
+      <ArrowRight size={13} aria-hidden="true" />
+    </span>
+  )
+}
+
+function LibraryButton({
+  label,
+  library,
+  muted = false,
+}: {
+  label: string
+  library: LibrarySlim
+  muted?: boolean
+}) {
+  const productName = shortName(library)
+  const actionLabel = label.endsWith(productName)
+    ? label.slice(0, -productName.length).trim()
+    : label
+
+  return (
+    <Link
+      to={library.to ?? '#'}
+      className={twMerge(
+        'inline-flex items-center gap-2 rounded-lg border px-4 py-2.5 text-sm font-bold transition-colors',
+        muted
+          ? 'border-zinc-300 bg-white text-zinc-800 hover:border-zinc-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 dark:hover:border-zinc-500'
+          : 'border-zinc-950 bg-zinc-950 text-white hover:bg-zinc-800 dark:border-white dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200',
+      )}
+    >
+      {actionLabel ? `${actionLabel} ` : null}
+      {label.endsWith(productName) ? (
+        <LibraryWordmark
+          library={library}
+          includeTanStack={false}
+          colorProduct={false}
+        />
+      ) : null}
+      <ArrowRight size={15} aria-hidden="true" />
+    </Link>
+  )
+}
+
+function getLibraryById(
+  libraries: Array<LibrarySlim>,
+  libraryId: LibrarySlim['id'],
+) {
+  const library = libraries.find((candidate) => candidate.id === libraryId)
+
+  if (library) {
+    return library
+  }
+
+  const fallback = libraries[0]
+
+  if (!fallback) {
+    throw new Error(`No libraries available for category lookup: ${libraryId}`)
+  }
+
+  return fallback
+}
+
+function shortName(library: LibrarySlim) {
+  return library.name.replace('TanStack ', '')
+}
diff --git a/src/components/stack/stack-categories.ts b/src/components/stack/stack-categories.ts
new file mode 100644
index 000000000..bfa217da6
--- /dev/null
+++ b/src/components/stack/stack-categories.ts
@@ -0,0 +1,123 @@
+import { librariesByGroup, librariesGroupNamesMap } from '~/libraries'
+import type { LibrarySlim } from '~/libraries'
+
+export type GroupId = keyof typeof librariesByGroup
+
+export type CategorySlug =
+  | 'framework'
+  | 'state'
+  | 'ui'
+  | 'performance'
+  | 'tooling'
+
+export const slugToGroup: Record<CategorySlug, GroupId> = {
+  framework: 'framework',
+  state: 'state',
+  ui: 'headlessUI',
+  performance: 'performance',
+  tooling: 'tooling',
+}
+
+export const groupToSlug: Record<GroupId, CategorySlug> = {
+  framework: 'framework',
+  state: 'state',
+  headlessUI: 'ui',
+  performance: 'performance',
+  tooling: 'tooling',
+}
+
+export const categorySlugs = Object.keys(slugToGroup) as CategorySlug[]
+
+export type CategoryMeta = {
+  slug: CategorySlug
+  groupId: GroupId
+  name: string
+  shortName: string
+  headline: string
+  intro: string
+  topPickId: string
+  /** Accent gradient classes for the hero / numbered chips. */
+  accent: { from: string; to: string; text: string }
+}
+
+export const categoryMeta: Record<CategorySlug, CategoryMeta> = {
+  framework: {
+    slug: 'framework',
+    groupId: 'framework',
+    name: librariesGroupNamesMap.framework,
+    shortName: 'Framework',
+    headline: 'Router-first apps, from SPA to full-stack',
+    intro:
+      'Typed routes, URL state, loaders, links, SSR, streaming, server functions, and deployable output from one app model.',
+    topPickId: 'start',
+    accent: {
+      from: 'from-teal-500',
+      to: 'to-cyan-500',
+      text: 'text-cyan-600 dark:text-cyan-400',
+    },
+  },
+  state: {
+    slug: 'state',
+    groupId: 'state',
+    name: librariesGroupNamesMap.state,
+    shortName: 'Data & State',
+    headline: 'The right state layer for every kind of data',
+    intro:
+      'Four layers for apps that cache remote truth, sync collections, react locally, and talk to models.',
+    topPickId: 'query',
+    accent: {
+      from: 'from-cyan-500',
+      to: 'to-emerald-500',
+      text: 'text-cyan-600 dark:text-cyan-400',
+    },
+  },
+  ui: {
+    slug: 'ui',
+    groupId: 'headlessUI',
+    name: librariesGroupNamesMap.headlessUI,
+    shortName: 'UI & UX',
+    headline: 'Headless engines for the UI users actually touch',
+    intro:
+      'Tables, forms, and hotkeys that leave markup and styling in your hands while handling row models, field state, and keyboard flow.',
+    topPickId: 'table',
+    accent: {
+      from: 'from-blue-500',
+      to: 'to-yellow-500',
+      text: 'text-blue-600 dark:text-blue-400',
+    },
+  },
+  performance: {
+    slug: 'performance',
+    groupId: 'performance',
+    name: librariesGroupNamesMap.performance,
+    shortName: 'Performance',
+    headline: 'Render less, schedule less, stay fast',
+    intro:
+      'Virtualization and pacing primitives for large interfaces, event-heavy inputs, queues, batches, and rate limits.',
+    topPickId: 'virtual',
+    accent: {
+      from: 'from-purple-500',
+      to: 'to-lime-500',
+      text: 'text-purple-600 dark:text-purple-400',
+    },
+  },
+  tooling: {
+    slug: 'tooling',
+    groupId: 'tooling',
+    name: librariesGroupNamesMap.tooling,
+    shortName: 'Tooling',
+    headline: 'The tools around TanStack apps and packages',
+    intro:
+      'The workbench around TanStack apps and packages: inspect libraries, scaffold projects, publish packages, and preserve package guidance.',
+    topPickId: 'devtools',
+    accent: {
+      from: 'from-indigo-500',
+      to: 'to-orange-500',
+      text: 'text-indigo-600 dark:text-indigo-400',
+    },
+  },
+}
+
+export function getCategoryLibraries(slug: CategorySlug): LibrarySlim[] {
+  return [...librariesByGroup[slugToGroup[slug]]]
+}
diff --git a/src/components/useBytesSubmit.tsx b/src/components/useBytesSubmit.tsx
deleted file mode 100644
index 1ace71962..000000000
--- a/src/components/useBytesSubmit.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useState } from 'react'
-
-function sendBytesOptIn({
-  email,
-  influencer,
-  source,
-  referral,
-}: {
-  email: string
-  influencer: string
-  source?: string
-  referral?: string
-}) {
-  return fetch(`https://bytes.dev/api/bytes-optin-cors`, {
-    method: 'POST',
-    body: JSON.stringify({ email, influencer, source, referral }),
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
-  }).then((res) => res.json())
-}
-
-export default function useBytesSubmit() {
-  const [state, setState] = useState('initial')
-  const [error, setError] = useState(null)
-
-  const handleSubmit = (e: any) => {
-    e.preventDefault()
-    const email = e.target.email_address.value
-    setState('loading')
-    sendBytesOptIn({ email, influencer: 'tanstack' })
-      .then(() => {
-        setState('submitted')
-      })
-      .catch((err) => {
-        setError(err)
-      })
-  }
-
-  return { handleSubmit, state, error }
-}
diff --git a/src/contexts/LoginModalContext.tsx b/src/contexts/LoginModalContext.tsx
index 8ad863ba0..5bf39fcc6 100644
--- a/src/contexts/LoginModalContext.tsx
+++ b/src/contexts/LoginModalContext.tsx
@@ -1,15 +1,24 @@
 import * as React from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { LoginModal } from '~/components/LoginModal'
+import { currentUserQueryOptions } from '~/hooks/useCurrentUser'
 
 interface LoginModalContextValue {
   openLoginModal: (options?: { onSuccess?: () => void }) => void
   closeLoginModal: () => void
 }
 
-const LoginModalContext = React.createContext<LoginModalContextValue | null>(
-  null,
-)
+declare global {
+  var __tanstackLoginModalContext:
+    | React.Context<LoginModalContextValue | null>
+    | undefined
+}
+
+const LoginModalContext =
+  import.meta.env.DEV && typeof window !== 'undefined'
+    ? (globalThis.__tanstackLoginModalContext ??=
+        React.createContext<LoginModalContextValue | null>(null))
+    : React.createContext<LoginModalContextValue | null>(null)
 
 export function useLoginModal() {
   const context = React.useContext(LoginModalContext)
@@ -45,7 +54,7 @@ export function LoginModalProvider({ children }: LoginModalProviderProps) {
     const handleMessage = (event: MessageEvent) => {
       if (event.origin !== window.location.origin) return
       if (event.data?.type === 'TANSTACK_AUTH_SUCCESS') {
-        queryClient.invalidateQueries({ queryKey: ['currentUser'] })
+        queryClient.invalidateQueries(currentUserQueryOptions)
         const onSuccess = pendingOnSuccessRef.current
         setIsOpen(false)
         pendingOnSuccessRef.current = undefined
diff --git a/src/contexts/SearchContext.tsx b/src/contexts/SearchContext.tsx
index 55d890ca4..bced4b1a0 100644
--- a/src/contexts/SearchContext.tsx
+++ b/src/contexts/SearchContext.tsx
@@ -1,9 +1,27 @@
 import * as React from 'react'
 
+const LazySearchModal = React.lazy(() =>
+  import('~/components/SearchModal').then((m) => ({ default: m.SearchModal })),
+)
+
 interface SearchContextType {
   isOpen: boolean
+  isAiDockOpen: boolean
+  isAiDockDirty: boolean
+  aiDockAskRequest: {
+    id: number
+    question: string
+  } | null
+  newChatRequestId: number
   openSearch: () => void
+  openAiDock: () => void
+  askAiDock: (question: string) => void
+  clearAiDockAskRequest: (id: number) => void
   closeSearch: () => void
+  closeAiDock: () => void
+  cancelAiDockHoverClose: () => void
+  scheduleAiDockHoverClose: () => void
+  setAiDockDirty: (isDirty: boolean) => void
 }
 
 const SearchContext = React.createContext<SearchContextType | undefined>(
@@ -12,18 +30,174 @@ const SearchContext = React.createContext<SearchContextType | undefined>(
 
 export function SearchProvider({ children }: { children: React.ReactNode }) {
   const [isOpen, setIsOpen] = React.useState(false)
+  const [isAiDockOpen, setIsAiDockOpen] = React.useState(false)
+  const [isAiDockDirty, setIsAiDockDirty] = React.useState(false)
+  const [hasLoadedSearch, setHasLoadedSearch] = React.useState(false)
+  const [newChatRequestId, setNewChatRequestId] = React.useState(0)
+  const [aiDockAskRequest, setAiDockAskRequest] = React.useState<{
+    id: number
+    question: string
+  } | null>(null)
+  const aiDockCloseTimerRef = React.useRef<number | null>(null)
+
+  const cancelAiDockHoverClose = React.useCallback(() => {
+    if (!aiDockCloseTimerRef.current) {
+      return
+    }
+
+    window.clearTimeout(aiDockCloseTimerRef.current)
+    aiDockCloseTimerRef.current = null
+  }, [])
+
+  const openSearch = React.useCallback(() => {
+    setHasLoadedSearch(true)
+    setIsOpen(true)
+  }, [])
+
+  const openAiDock = React.useCallback(() => {
+    cancelAiDockHoverClose()
+    setIsOpen(false)
+    setIsAiDockOpen(true)
+  }, [cancelAiDockHoverClose])
+
+  const askAiDock = React.useCallback(
+    (question: string) => {
+      const trimmedQuestion = question.trim()
+      if (trimmedQuestion.length < 3) {
+        return
+      }
+
+      cancelAiDockHoverClose()
+      setIsOpen(false)
+      setIsAiDockDirty(true)
+      setIsAiDockOpen(true)
+      setAiDockAskRequest((current) => ({
+        id: (current?.id ?? 0) + 1,
+        question: trimmedQuestion,
+      }))
+    },
+    [cancelAiDockHoverClose],
+  )
+
+  const clearAiDockAskRequest = React.useCallback((id: number) => {
+    setAiDockAskRequest((current) => (current?.id === id ? null : current))
+  }, [])
+
+  const closeSearch = React.useCallback(() => {
+    setIsOpen(false)
+  }, [])
+
+  const closeAiDock = React.useCallback(() => {
+    cancelAiDockHoverClose()
+    setIsAiDockOpen(false)
+  }, [cancelAiDockHoverClose])
+
+  const scheduleAiDockHoverClose = React.useCallback(() => {
+    cancelAiDockHoverClose()
+    aiDockCloseTimerRef.current = window.setTimeout(() => {
+      setIsAiDockOpen(false)
+      aiDockCloseTimerRef.current = null
+    }, 300)
+  }, [cancelAiDockHoverClose])
+
+  React.useEffect(() => {
+    return () => {
+      cancelAiDockHoverClose()
+    }
+  }, [cancelAiDockHoverClose])
+
+  const requestNewChat = React.useCallback(() => {
+    setNewChatRequestId((current) => current + 1)
+  }, [])
 
   const value = React.useMemo(
     () => ({
       isOpen,
-      openSearch: () => setIsOpen(true),
-      closeSearch: () => setIsOpen(false),
+      isAiDockOpen,
+      isAiDockDirty,
+      aiDockAskRequest,
+      newChatRequestId,
+      openSearch,
+      openAiDock,
+      askAiDock,
+      clearAiDockAskRequest,
+      closeSearch,
+      closeAiDock,
+      cancelAiDockHoverClose,
+      scheduleAiDockHoverClose,
+      setAiDockDirty: setIsAiDockDirty,
     }),
-    [isOpen],
+    [
+      aiDockAskRequest,
+      askAiDock,
+      cancelAiDockHoverClose,
+      clearAiDockAskRequest,
+      closeAiDock,
+      closeSearch,
+      isAiDockDirty,
+      isAiDockOpen,
+      isOpen,
+      newChatRequestId,
+      openAiDock,
+      openSearch,
+      scheduleAiDockHoverClose,
+    ],
   )
 
+  React.useEffect(() => {
+    const handleDocumentClick = (event: MouseEvent) => {
+      if (!(event.target instanceof Element)) return
+
+      const trigger = event.target.closest('[data-search-trigger]')
+      if (!trigger) return
+      if (trigger instanceof HTMLButtonElement && trigger.disabled) return
+
+      event.preventDefault()
+      openSearch()
+    }
+
+    document.addEventListener('click', handleDocumentClick)
+    return () => {
+      document.removeEventListener('click', handleDocumentClick)
+    }
+  }, [openSearch])
+
+  React.useEffect(() => {
+    const handleGlobalKeyDown = (event: KeyboardEvent) => {
+      if (!(event.metaKey || event.ctrlKey)) return
+      if (event.altKey || event.shiftKey) return
+      // Match both `key` and `code` so the shortcut works on non-QWERTY layouts.
+      const isK = event.key.toLowerCase() === 'k' || event.code === 'KeyK'
+      if (!isK) return
+
+      event.preventDefault()
+      event.stopPropagation()
+
+      if (isOpen) {
+        requestNewChat()
+        return
+      }
+
+      openSearch()
+    }
+
+    document.addEventListener('keydown', handleGlobalKeyDown, { capture: true })
+    return () => {
+      document.removeEventListener('keydown', handleGlobalKeyDown, {
+        capture: true,
+      })
+    }
+  }, [isOpen, openSearch, requestNewChat])
+
   return (
-    <SearchContext.Provider value={value}>{children}</SearchContext.Provider>
+    <SearchContext.Provider value={value}>
+      {children}
+      {hasLoadedSearch ? (
+        <React.Suspense fallback={null}>
+          <LazySearchModal />
+        </React.Suspense>
+      ) : null}
+    </SearchContext.Provider>
   )
 }
 
diff --git a/src/db/client.ts b/src/db/client.ts
index 1553e7392..b0d7d5d73 100644
--- a/src/db/client.ts
+++ b/src/db/client.ts
@@ -1,29 +1,96 @@
 import { drizzle } from 'drizzle-orm/postgres-js'
 import postgres from 'postgres'
+import { AsyncLocalStorage } from 'node:async_hooks'
+import {
+  getDatabaseConnectionString,
+  isIsolateRuntime,
+} from '~/server/runtime/host.server'
 import * as schema from './schema'
 
+type PostgresClient = ReturnType<typeof postgres>
+type Database = ReturnType<typeof drizzle<typeof schema>>
+type DatabaseContext = {
+  client?: PostgresClient
+  connectionString: string
+  db?: Database
+}
+
 // Lazy initialization to avoid throwing at module load time
-let _client: ReturnType<typeof postgres> | null = null
-let _db: ReturnType<typeof drizzle<typeof schema>> | null = null
+let _client: PostgresClient | null = null
+let _db: Database | null = null
+const databaseStorage = new AsyncLocalStorage<DatabaseContext>()
+
+function createPostgresClient(connectionString: string) {
+  return postgres(connectionString, {
+    max: isIsolateRuntime() ? 5 : 1,
+    idle_timeout: 20,
+    connect_timeout: 10,
+    fetch_types: !isIsolateRuntime(),
+  })
+}
+
+function createDatabase(connectionString: string) {
+  const client = createPostgresClient(connectionString)
+  return {
+    client,
+    db: drizzle(client, { schema }),
+  }
+}
+
+function getDatabaseUrl() {
+  const context = databaseStorage.getStore()
+  const connectionString = context?.connectionString ?? process.env.DATABASE_URL
+  if (!connectionString) {
+    throw new Error('DATABASE_URL environment variable is not set')
+  }
+  return connectionString
+}
+
+function getRequestDb(context: DatabaseContext) {
+  if (!context.db) {
+    const database = createDatabase(context.connectionString)
+    context.client = database.client
+    context.db = database.db
+  }
+
+  return context.db
+}
 
 function getDb() {
+  const context = databaseStorage.getStore()
+  if (context) {
+    return getRequestDb(context)
+  }
+
+  if (isIsolateRuntime()) {
+    return createDatabase(getDatabaseUrl()).db
+  }
+
   if (!_db) {
-    const connectionString = process.env.DATABASE_URL
-    if (!connectionString) {
-      throw new Error('DATABASE_URL environment variable is not set')
-    }
-    _client = postgres(connectionString, {
-      max: 1,
-      idle_timeout: 20,
-      connect_timeout: 10,
-    })
-    _db = drizzle(_client, { schema })
+    const database = createDatabase(getDatabaseUrl())
+    _client = database.client
+    _db = database.db
   }
   return _db
 }
 
+export async function runWithDatabaseContext<T>(
+  fn: () => Promise<T>,
+): Promise<T> {
+  if (!isIsolateRuntime()) {
+    return fn()
+  }
+
+  const connectionString = await getDatabaseConnectionString()
+  if (!connectionString) {
+    return fn()
+  }
+
+  return databaseStorage.run({ connectionString }, fn)
+}
+
 // Use a getter to lazily initialize db on first access
-export const db = new Proxy({} as ReturnType<typeof drizzle<typeof schema>>, {
+export const db = new Proxy({} as Database, {
   get(_target, prop, _receiver) {
     const realDb = getDb()
     const value = Reflect.get(realDb, prop, realDb)
diff --git a/src/db/schema.ts b/src/db/schema.ts
index dc1862fd8..7d3d8860f 100644
--- a/src/db/schema.ts
+++ b/src/db/schema.ts
@@ -17,6 +17,7 @@ import {
 } from 'drizzle-orm/pg-core'
 import { relations } from 'drizzle-orm'
 import type { InferSelectModel, InferInsertModel } from 'drizzle-orm'
+import type { SignupSource } from './types'
 
 // Re-export client-safe types and constants
 export type {
@@ -24,13 +25,11 @@ export type {
   OAuthProvider,
   DocFeedbackType,
   DocFeedbackStatus,
-  BannerScope,
-  BannerStyle,
-  EntryType,
   ShowcaseStatus,
   ShowcaseUseCase,
   AuditAction,
   ReleaseLevel,
+  SignupSource,
 } from './types'
 
 import {
@@ -38,9 +37,6 @@ import {
   OAUTH_PROVIDERS,
   DOC_FEEDBACK_TYPES,
   DOC_FEEDBACK_STATUSES,
-  BANNER_SCOPES,
-  BANNER_STYLES,
-  ENTRY_TYPES,
   SHOWCASE_STATUSES,
   SHOWCASE_USE_CASES,
   AUDIT_ACTIONS,
@@ -52,14 +48,11 @@ export {
   OAUTH_PROVIDERS,
   DOC_FEEDBACK_TYPES,
   DOC_FEEDBACK_STATUSES,
-  BANNER_SCOPES,
-  BANNER_STYLES,
-  ENTRY_TYPES,
   SHOWCASE_STATUSES,
   SHOWCASE_USE_CASES,
   AUDIT_ACTIONS,
   RELEASE_LEVELS,
-  MANUAL_ENTRY_TYPES,
+  SIGNUP_SOURCES,
 } from './types'
 
 // Enums - using imported constants as single source of truth
@@ -74,9 +67,6 @@ export const docFeedbackStatusEnum = pgEnum(
   'doc_feedback_status',
   DOC_FEEDBACK_STATUSES,
 )
-export const bannerScopeEnum = pgEnum('banner_scope', BANNER_SCOPES)
-export const bannerStyleEnum = pgEnum('banner_style', BANNER_STYLES)
-export const entryTypeEnum = pgEnum('entry_type', ENTRY_TYPES)
 export const showcaseStatusEnum = pgEnum('showcase_status', SHOWCASE_STATUSES)
 export const showcaseUseCaseEnum = pgEnum(
   'showcase_use_case',
@@ -101,6 +91,10 @@ export const users = pgTable(
     adsDisabled: boolean('ads_disabled').default(false),
     interestedInHidingAds: boolean('interested_in_hiding_ads').default(false),
     lastUsedFramework: varchar('last_used_framework', { length: 50 }),
+    signupSources: jsonb('signup_sources')
+      .$type<SignupSource[]>()
+      .notNull()
+      .default([]),
     sessionVersion: integer('session_version').notNull().default(0),
     createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
       .notNull()
@@ -211,6 +205,8 @@ export const oauthAccounts = pgTable(
       length: 255,
     }).notNull(),
     email: varchar('email', { length: 255 }).notNull(),
+    accessToken: text('access_token'),
+    tokenScope: text('token_scope'),
     createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
       .notNull()
       .defaultNow(),
@@ -230,86 +226,6 @@ export const oauthAccounts = pgTable(
 export type OAuthAccount = InferSelectModel<typeof oauthAccounts>
 export type NewOAuthAccount = InferInsertModel<typeof oauthAccounts>
 
-// Feed entries table
-export const feedEntries = pgTable(
-  'feed_entries',
-  {
-    id: uuid('id').primaryKey().defaultRandom(),
-    // Unique identifier (e.g., "github:tanstack/query:v5.0.0" or UUID for manual)
-    entryId: varchar('entry_id', { length: 255 }).notNull().unique(),
-    // Entry type: release (auto-synced from GitHub), blog (auto-synced), announcement (manual)
-    entryType: entryTypeEnum('entry_type').notNull().default('announcement'),
-    title: text('title').notNull(),
-    content: text('content').notNull(), // Markdown content
-    excerpt: text('excerpt'),
-    publishedAt: timestamp('published_at', {
-      withTimezone: true,
-      mode: 'date',
-    }).notNull(),
-    createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
-      .notNull()
-      .defaultNow(),
-    updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'date' })
-      .notNull()
-      .defaultNow(),
-    // Source-specific metadata (JSON blob for debugging)
-    metadata: jsonb('metadata'),
-    // Categorization
-    libraryIds: varchar('library_ids', { length: 255 })
-      .array()
-      .notNull()
-      .default([]),
-    partnerIds: varchar('partner_ids', { length: 255 })
-      .array()
-      .notNull()
-      .default([]),
-    tags: varchar('tags', { length: 255 }).array().notNull().default([]),
-    // Display control
-    showInFeed: boolean('show_in_feed').notNull().default(true),
-    featured: boolean('featured').default(false),
-    // Auto-sync metadata
-    autoSynced: boolean('auto_synced').notNull().default(false),
-    lastSyncedAt: timestamp('last_synced_at', {
-      withTimezone: true,
-      mode: 'date',
-    }),
-  },
-  (table) => ({
-    publishedAtIdx: index('feed_entries_published_at_idx').on(
-      table.publishedAt,
-    ),
-    entryTypeIdx: index('feed_entries_entry_type_idx').on(table.entryType),
-    showInFeedPublishedIdx: index(
-      'feed_entries_show_in_feed_published_at_idx',
-    ).on(table.showInFeed, table.publishedAt),
-    // GIN indexes for array columns (created via SQL migration)
-    // libraryIdsGin: index('feed_entries_library_ids_gin_idx').using('gin', table.libraryIds),
-    // tagsGin: index('feed_entries_tags_gin_idx').using('gin', table.tags),
-  }),
-)
-
-export type FeedEntry = InferSelectModel<typeof feedEntries>
-export type NewFeedEntry = InferInsertModel<typeof feedEntries>
-
-// Feed config table
-export const feedConfig = pgTable(
-  'feed_config',
-  {
-    id: uuid('id').primaryKey().defaultRandom(),
-    key: varchar('key', { length: 255 }).notNull().unique(), // e.g., 'defaultFilters'
-    value: jsonb('value').notNull(),
-    updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'date' })
-      .notNull()
-      .defaultNow(),
-  },
-  (table) => ({
-    keyIdx: index('feed_config_key_idx').on(table.key),
-  }),
-)
-
-export type FeedConfig = InferSelectModel<typeof feedConfig>
-export type NewFeedConfig = InferInsertModel<typeof feedConfig>
-
 // GitHub Stats cache table (for caching expensive GitHub API calls)
 export const githubStatsCache = pgTable(
   'github_stats_cache',
@@ -343,31 +259,21 @@ export const githubStatsCache = pgTable(
 
 export type GithubStatsCache = InferSelectModel<typeof githubStatsCache>
 
-// NPM Packages table (combines registry and stats cache)
-export const npmPackages = pgTable(
-  'npm_packages',
+export const githubContentCache = pgTable(
+  'github_content_cache',
   {
     id: uuid('id').primaryKey().defaultRandom(),
-    // Package name (e.g., "@tanstack/react-query")
-    packageName: varchar('package_name', { length: 255 }).notNull().unique(),
-
-    // Package metadata (from npm registry)
-    githubRepo: varchar('github_repo', { length: 255 }),
-    libraryId: varchar('library_id', { length: 255 }),
-    isLegacy: boolean('is_legacy').default(false),
-    metadataCheckedAt: timestamp('metadata_checked_at', {
+    repo: varchar('repo', { length: 255 }).notNull(),
+    gitRef: varchar('git_ref', { length: 255 }).notNull(),
+    contentKind: varchar('content_kind', { length: 20 }).notNull(),
+    path: varchar('path', { length: 1024 }).notNull(),
+    isPresent: boolean('is_present').notNull().default(true),
+    textContent: text('text_content'),
+    jsonContent: jsonb('json_content'),
+    staleAt: timestamp('stale_at', {
       withTimezone: true,
       mode: 'date',
-    }),
-
-    // Stats cache (from npm downloads API)
-    downloads: bigint('downloads', { mode: 'number' }),
-    ratePerDay: real('rate_per_day'), // Growth rate in downloads per day (for animation)
-    statsExpiresAt: timestamp('stats_expires_at', {
-      withTimezone: true,
-      mode: 'date',
-    }),
-
+    }).notNull(),
     createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
       .notNull()
       .defaultNow(),
@@ -376,33 +282,33 @@ export const npmPackages = pgTable(
       .defaultNow(),
   },
   (table) => ({
-    packageNameIdx: index('npm_packages_package_name_idx').on(
-      table.packageName,
+    repoRefIdx: index('github_content_cache_repo_ref_idx').on(
+      table.repo,
+      table.gitRef,
     ),
-    githubRepoIdx: index('npm_packages_github_repo_idx').on(table.githubRepo),
-    libraryIdIdx: index('npm_packages_library_id_idx').on(table.libraryId),
-    statsExpiresAtIdx: index('npm_packages_stats_expires_at_idx').on(
-      table.statsExpiresAt,
+    staleAtIdx: index('github_content_cache_stale_at_idx').on(table.staleAt),
+    uniqueContent: uniqueIndex('github_content_cache_unique').on(
+      table.repo,
+      table.gitRef,
+      table.contentKind,
+      table.path,
     ),
   }),
 )
 
-export type NpmPackage = InferSelectModel<typeof npmPackages>
-export type NewNpmPackage = InferInsertModel<typeof npmPackages>
+export type GithubContentCache = InferSelectModel<typeof githubContentCache>
 
-// NPM Org Stats cache table (for pre-aggregated org-level stats)
-export const npmOrgStatsCache = pgTable(
-  'npm_org_stats_cache',
+export const docsArtifactCache = pgTable(
+  'docs_artifact_cache',
   {
     id: uuid('id').primaryKey().defaultRandom(),
-    // Organization name (e.g., "tanstack")
-    orgName: varchar('org_name', { length: 255 }).notNull().unique(),
-    // Pre-aggregated total downloads
-    totalDownloads: bigint('total_downloads', { mode: 'number' }).notNull(),
-    // Per-package stats breakdown (JSON) - needed for per-package rate info
-    packageStats: jsonb('package_stats').notNull(),
-    // When this cache entry expires (should refresh after this)
-    expiresAt: timestamp('expires_at', {
+    repo: varchar('repo', { length: 255 }).notNull(),
+    gitRef: varchar('git_ref', { length: 255 }).notNull(),
+    docsRoot: varchar('docs_root', { length: 255 }).notNull(),
+    artifactType: varchar('artifact_type', { length: 50 }).notNull(),
+    artifactKey: varchar('artifact_key', { length: 255 }).notNull(),
+    payload: jsonb('payload').notNull(),
+    staleAt: timestamp('stale_at', {
       withTimezone: true,
       mode: 'date',
     }).notNull(),
@@ -414,50 +320,76 @@ export const npmOrgStatsCache = pgTable(
       .defaultNow(),
   },
   (table) => ({
-    orgNameIdx: index('npm_org_stats_cache_org_name_idx').on(table.orgName),
-    expiresAtIdx: index('npm_org_stats_cache_expires_at_idx').on(
-      table.expiresAt,
+    repoRefDocsRootIdx: index('docs_artifact_cache_repo_ref_docs_root_idx').on(
+      table.repo,
+      table.gitRef,
+      table.docsRoot,
+    ),
+    staleAtIdx: index('docs_artifact_cache_stale_at_idx').on(table.staleAt),
+    uniqueArtifact: uniqueIndex('docs_artifact_cache_unique').on(
+      table.repo,
+      table.gitRef,
+      table.docsRoot,
+      table.artifactType,
+      table.artifactKey,
     ),
   }),
 )
 
-export type NpmOrgStatsCache = InferSelectModel<typeof npmOrgStatsCache>
-export type NewNpmOrgStatsCache = InferInsertModel<typeof npmOrgStatsCache>
-
-// NPM Library Stats cache table (for pre-aggregated library-level stats)
-export const npmLibraryStatsCache = pgTable(
-  'npm_library_stats_cache',
+export const ossStatsCache = pgTable(
+  'oss_stats_cache',
   {
     id: uuid('id').primaryKey().defaultRandom(),
-    // Library ID (e.g., "query", "table")
-    libraryId: varchar('library_id', { length: 255 }).notNull().unique(),
-    // Pre-aggregated total downloads for this library
-    totalDownloads: bigint('total_downloads', { mode: 'number' }).notNull(),
-    // Previous total downloads (for calculating rate of change)
-    previousTotalDownloads: bigint('previous_total_downloads', {
-      mode: 'number',
+    scopeType: varchar('scope_type', { length: 20 }).notNull(),
+    scopeKey: varchar('scope_key', { length: 255 }).notNull(),
+
+    githubStarCount: integer('github_star_count').notNull().default(0),
+    githubContributorCount: integer('github_contributor_count')
+      .notNull()
+      .default(0),
+    githubDependentCount: integer('github_dependent_count'),
+    githubForkCount: integer('github_fork_count'),
+    githubRepositoryCount: integer('github_repository_count'),
+
+    githubDeltaStarCount: integer('github_delta_star_count'),
+    githubDeltaContributorCount: integer('github_delta_contributor_count'),
+    githubDeltaDependentCount: integer('github_delta_dependent_count'),
+    githubDeltaForkCount: integer('github_delta_fork_count'),
+    githubUpdatedAt: timestamp('github_updated_at', {
+      withTimezone: true,
+      mode: 'date',
     }),
-    // Package count
-    packageCount: integer('package_count').notNull(),
-    // When this cache entry was last updated
-    updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'date' })
+
+    npmTotalDownloads: bigint('npm_total_downloads', { mode: 'number' })
       .notNull()
-      .defaultNow(),
+      .default(0),
+    npmRatePerDay: real('npm_rate_per_day'),
+    npmPackageCount: integer('npm_package_count').notNull().default(0),
+    npmUpdatedAt: timestamp('npm_updated_at', {
+      withTimezone: true,
+      mode: 'date',
+    }),
+
+    timeDeltaMs: bigint('time_delta_ms', { mode: 'number' }),
     createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
       .notNull()
       .defaultNow(),
+    updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'date' })
+      .notNull()
+      .defaultNow(),
   },
   (table) => ({
-    libraryIdIdx: index('npm_library_stats_cache_library_id_idx').on(
-      table.libraryId,
+    scopeUnique: uniqueIndex('oss_stats_cache_scope_unique').on(
+      table.scopeType,
+      table.scopeKey,
     ),
+    scopeTypeIdx: index('oss_stats_cache_scope_type_idx').on(table.scopeType),
+    scopeKeyIdx: index('oss_stats_cache_scope_key_idx').on(table.scopeKey),
   }),
 )
 
-export type NpmLibraryStatsCache = InferSelectModel<typeof npmLibraryStatsCache>
-export type NewNpmLibraryStatsCache = InferInsertModel<
-  typeof npmLibraryStatsCache
->
+export type OssStatsCache = InferSelectModel<typeof ossStatsCache>
+export type NewOssStatsCache = InferInsertModel<typeof ossStatsCache>
 
 // NPM Download Chunks cache table (for caching historical date range downloads)
 // This table stores immutable historical chunks and cacheable recent chunks
@@ -579,112 +511,6 @@ export const docFeedback = pgTable(
 export type DocFeedback = InferSelectModel<typeof docFeedback>
 export type NewDocFeedback = InferInsertModel<typeof docFeedback>
 
-// Banners table (separate from feed entries)
-export const banners = pgTable(
-  'banners',
-  {
-    id: uuid('id').primaryKey().defaultRandom(),
-    // Display content
-    title: text('title').notNull(),
-    content: text('content'), // Optional longer content/description
-    // Link (makes banner clickable)
-    linkUrl: text('link_url'),
-    linkText: varchar('link_text', { length: 255 }),
-    // Styling
-    style: bannerStyleEnum('style').notNull().default('info'),
-    // Targeting
-    scope: bannerScopeEnum('scope').notNull().default('global'),
-    pathPrefixes: varchar('path_prefixes', { length: 255 })
-      .array()
-      .notNull()
-      .default([]),
-    // Scheduling
-    isActive: boolean('is_active').notNull().default(true),
-    startsAt: timestamp('starts_at', { withTimezone: true, mode: 'date' }),
-    expiresAt: timestamp('expires_at', { withTimezone: true, mode: 'date' }),
-    // Priority (higher = shown first when multiple banners match)
-    priority: integer('priority').notNull().default(0),
-    // Metadata
-    createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
-      .notNull()
-      .defaultNow(),
-    updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'date' })
-      .notNull()
-      .defaultNow(),
-  },
-  (table) => ({
-    isActiveIdx: index('banners_is_active_idx').on(table.isActive),
-    priorityIdx: index('banners_priority_idx').on(table.priority),
-    startsAtIdx: index('banners_starts_at_idx').on(table.startsAt),
-    expiresAtIdx: index('banners_expires_at_idx').on(table.expiresAt),
-  }),
-)
-
-export type Banner = InferSelectModel<typeof banners>
-export type NewBanner = InferInsertModel<typeof banners>
-
-// Banner dismissals table (for tracking which banners users have dismissed)
-export const bannerDismissals = pgTable(
-  'banner_dismissals',
-  {
-    id: uuid('id').primaryKey().defaultRandom(),
-    bannerId: uuid('banner_id')
-      .notNull()
-      .references(() => banners.id, { onDelete: 'cascade' }),
-    userId: uuid('user_id')
-      .notNull()
-      .references(() => users.id, { onDelete: 'cascade' }),
-    dismissedAt: timestamp('dismissed_at', { withTimezone: true, mode: 'date' })
-      .notNull()
-      .defaultNow(),
-  },
-  (table) => ({
-    bannerIdIdx: index('banner_dismissals_banner_id_idx').on(table.bannerId),
-    userIdIdx: index('banner_dismissals_user_id_idx').on(table.userId),
-    userBannerUnique: uniqueIndex('banner_dismissals_user_banner_unique').on(
-      table.userId,
-      table.bannerId,
-    ),
-  }),
-)
-
-export type BannerDismissal = InferSelectModel<typeof bannerDismissals>
-export type NewBannerDismissal = InferInsertModel<typeof bannerDismissals>
-
-// Announcement dismissals table (legacy - for tracking which feed entry banners users have dismissed)
-export const announcementDismissals = pgTable(
-  'announcement_dismissals',
-  {
-    id: uuid('id').primaryKey().defaultRandom(),
-    // The feed entry ID (references feedEntries.entryId, not the UUID)
-    announcementId: varchar('announcement_id', { length: 255 }).notNull(),
-    // User who dismissed (nullable for future anonymous tracking if needed)
-    userId: uuid('user_id')
-      .notNull()
-      .references(() => users.id, { onDelete: 'cascade' }),
-    dismissedAt: timestamp('dismissed_at', { withTimezone: true, mode: 'date' })
-      .notNull()
-      .defaultNow(),
-  },
-  (table) => ({
-    announcementIdIdx: index('announcement_dismissals_announcement_id_idx').on(
-      table.announcementId,
-    ),
-    userIdIdx: index('announcement_dismissals_user_id_idx').on(table.userId),
-    // Ensure a user can only dismiss an announcement once
-    userAnnouncementUnique: uniqueIndex(
-      'announcement_dismissals_user_announcement_unique',
-    ).on(table.userId, table.announcementId),
-  }),
-)
-
-export type AnnouncementDismissal = InferSelectModel<
-  typeof announcementDismissals
->
-export type NewAnnouncementDismissal = InferInsertModel<
-  typeof announcementDismissals
->
-
 // Login history table (tracks user logins for analytics and security)
 export const loginHistory = pgTable(
   'login_history',
@@ -878,8 +704,6 @@ export const usersRelations = relations(users, ({ many }) => ({
   oauthAccounts: many(oauthAccounts),
   roleAssignments: many(roleAssignments),
   docFeedback: many(docFeedback),
-  announcementDismissals: many(announcementDismissals),
-  bannerDismissals: many(bannerDismissals),
   loginHistory: many(loginHistory),
   auditLogs: many(auditLogs),
   userActivity: many(userActivity),
@@ -930,34 +754,6 @@ export const docFeedbackRelations = relations(docFeedback, ({ one }) => ({
   }),
 }))
 
-export const announcementDismissalsRelations = relations(
-  announcementDismissals,
-  ({ one }) => ({
-    user: one(users, {
-      fields: [announcementDismissals.userId],
-      references: [users.id],
-    }),
-  }),
-)
-
-export const bannersRelations = relations(banners, ({ many }) => ({
-  dismissals: many(bannerDismissals),
-}))
-
-export const bannerDismissalsRelations = relations(
-  bannerDismissals,
-  ({ one }) => ({
-    banner: one(banners, {
-      fields: [bannerDismissals.bannerId],
-      references: [banners.id],
-    }),
-    user: one(users, {
-      fields: [bannerDismissals.userId],
-      references: [users.id],
-    }),
-  }),
-)
-
 export const loginHistoryRelations = relations(loginHistory, ({ one }) => ({
   user: one(users, {
     fields: [loginHistory.userId],
@@ -1197,6 +993,171 @@ export const oauthRefreshTokens = pgTable(
 export type OAuthRefreshToken = InferSelectModel<typeof oauthRefreshTokens>
 export type NewOAuthRefreshToken = InferInsertModel<typeof oauthRefreshTokens>
 
+// =============================================================================
+// Intent Registry Tables
+// =============================================================================
+// These tables power the /intent/registry skill browser. The design is
+// intentionally lean: we only persist what NPM cannot give us efficiently
+// (the verified list of intent-compatible packages, per-version skill
+// frontmatter for fast listing/filtering/diffing). Full SKILL.md bodies are
+// stored deduplicated by content hash so unchanged skills across versions cost
+// one row, not N.
+// =============================================================================
+
+// Verified intent-compatible packages discovered via NPM keyword search
+export const intentPackages = pgTable('intent_packages', {
+  name: varchar('name', { length: 255 }).primaryKey(),
+  verified: boolean('verified').notNull().default(false),
+  firstSeenAt: timestamp('first_seen_at', { withTimezone: true, mode: 'date' })
+    .notNull()
+    .defaultNow(),
+  lastSyncedAt: timestamp('last_synced_at', {
+    withTimezone: true,
+    mode: 'date',
+  })
+    .notNull()
+    .defaultNow(),
+})
+
+export type IntentPackage = InferSelectModel<typeof intentPackages>
+export type NewIntentPackage = InferInsertModel<typeof intentPackages>
+
+// Per-version snapshot of a package's skills (latest + last 5 versions)
+//
+// syncStatus tracks domain progress for each discovered package version:
+//   'pending'  -- version discovered, tarball not yet downloaded/extracted
+//   'synced'   -- skills extracted and indexed successfully
+//   'failed'   -- tarball processing failed (will be retried next cycle)
+// Workflow run/step replay lives in the Workflow Postgres store, not here.
+export const intentPackageVersions = pgTable(
+  'intent_package_versions',
+  {
+    id: integer('id').primaryKey().generatedAlwaysAsIdentity(),
+    packageName: varchar('package_name', { length: 255 })
+      .notNull()
+      .references(() => intentPackages.name, { onDelete: 'cascade' }),
+    version: varchar('version', { length: 100 }).notNull(),
+    skillCount: integer('skill_count').notNull().default(0),
+    publishedAt: timestamp('published_at', {
+      withTimezone: true,
+      mode: 'date',
+    }),
+    // Tarball URL stored at discovery time so the processing phase doesn't
+    // need to re-fetch the full packument
+    tarballUrl: varchar('tarball_url', { length: 1024 }),
+    syncStatus: varchar('sync_status', { length: 20 })
+      .notNull()
+      .default('pending'),
+    syncedAt: timestamp('synced_at', { withTimezone: true, mode: 'date' }),
+    failureReason: text('failure_reason'),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
+      .notNull()
+      .defaultNow(),
+  },
+  (table) => ({
+    packageNameIdx: index('intent_package_versions_package_name_idx').on(
+      table.packageName,
+    ),
+    syncStatusIdx: index('intent_package_versions_sync_status_idx').on(
+      table.syncStatus,
+    ),
+    packageVersionUnique: uniqueIndex(
+      'intent_package_versions_package_version_unique',
+    ).on(table.packageName, table.version),
+  }),
+)
+
+export type IntentPackageVersion = InferSelectModel<
+  typeof intentPackageVersions
+>
+export type NewIntentPackageVersion = InferInsertModel<
+  typeof intentPackageVersions
+>
+
+// Deduplicated SKILL.md bodies -- one row per unique content hash
+// Unchanged skills across versions share a single row here
+export const intentSkillContent = pgTable('intent_skill_content', {
+  contentHash: varchar('content_hash', { length: 64 }).primaryKey(),
+  content: text('content').notNull(),
+  createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
+    .notNull()
+    .defaultNow(),
+})
+
+export type IntentSkillContent = InferSelectModel<typeof intentSkillContent>
+export type NewIntentSkillContent = InferInsertModel<typeof intentSkillContent>
+
+// Per-skill frontmatter metadata (name, description, type, framework, etc.)
+export const intentSkills = pgTable(
+  'intent_skills',
+  {
+    id: integer('id').primaryKey().generatedAlwaysAsIdentity(),
+    packageVersionId: integer('package_version_id')
+      .notNull()
+      .references(() => intentPackageVersions.id, { onDelete: 'cascade' }),
+    // Skill path relative to skills/ dir, e.g. "db-core/live-queries"
+    name: varchar('name', { length: 255 }).notNull(),
+    description: text('description'),
+    // Skill type: core | sub-skill | framework | lifecycle | composition | security
+    type: varchar('type', { length: 50 }),
+    // Framework: react | vue | solid | svelte | angular (nullable = framework-agnostic)
+    framework: varchar('framework', { length: 50 }),
+    // Other skills that must be loaded before this one
+    requires: text('requires').array(),
+    // File path within the package's skills/ directory, e.g. "db-core/live-queries"
+    skillPath: varchar('skill_path', { length: 500 }),
+    // SHA-256 of the SKILL.md body (for change detection between versions)
+    contentHash: varchar('content_hash', { length: 64 })
+      .notNull()
+      .references(() => intentSkillContent.contentHash),
+    lineCount: integer('line_count').notNull().default(0),
+  },
+  (table) => ({
+    packageVersionIdIdx: index('intent_skills_package_version_id_idx').on(
+      table.packageVersionId,
+    ),
+    nameIdx: index('intent_skills_name_idx').on(table.name),
+    frameworkIdx: index('intent_skills_framework_idx').on(table.framework),
+    typeIdx: index('intent_skills_type_idx').on(table.type),
+    packageVersionSkillUnique: uniqueIndex(
+      'intent_skills_package_version_skill_unique',
+    ).on(table.packageVersionId, table.name),
+  }),
+)
+
+export type IntentSkill = InferSelectModel<typeof intentSkills>
+export type NewIntentSkill = InferInsertModel<typeof intentSkills>
+
+// Relations
+export const intentPackagesRelations = relations(
+  intentPackages,
+  ({ many }) => ({
+    versions: many(intentPackageVersions),
+  }),
+)
+
+export const intentPackageVersionsRelations = relations(
+  intentPackageVersions,
+  ({ one, many }) => ({
+    package: one(intentPackages, {
+      fields: [intentPackageVersions.packageName],
+      references: [intentPackages.name],
+    }),
+    skills: many(intentSkills),
+  }),
+)
+
+export const intentSkillsRelations = relations(intentSkills, ({ one }) => ({
+  packageVersion: one(intentPackageVersions, {
+    fields: [intentSkills.packageVersionId],
+    references: [intentPackageVersions.id],
+  }),
+  content: one(intentSkillContent, {
+    fields: [intentSkills.contentHash],
+    references: [intentSkillContent.contentHash],
+  }),
+}))
+
 // Backwards compatibility aliases
 /** @deprecated Use oauthRefreshTokens instead */
 export const oauthMcpRefreshTokens = oauthRefreshTokens
diff --git a/src/db/types.ts b/src/db/types.ts
index 49d265930..327240cfd 100644
--- a/src/db/types.ts
+++ b/src/db/types.ts
@@ -4,12 +4,12 @@
 // Enum constants - single source of truth for both TypeScript types and Drizzle pgEnums
 export const CAPABILITIES = [
   'admin',
+  'api-keys',
   'disableAds',
   'builder',
-  'feed',
+  'mcp',
   'moderate-feedback',
   'moderate-showcases',
-  'mcp',
 ] as const
 
 export const OAUTH_PROVIDERS = ['github', 'google'] as const
@@ -18,12 +18,6 @@ export const DOC_FEEDBACK_TYPES = ['note', 'improvement'] as const
 
 export const DOC_FEEDBACK_STATUSES = ['pending', 'approved', 'denied'] as const
 
-export const BANNER_SCOPES = ['global', 'targeted'] as const
-
-export const BANNER_STYLES = ['info', 'warning', 'success', 'promo'] as const
-
-export const ENTRY_TYPES = ['release', 'blog', 'announcement'] as const
-
 export const SHOWCASE_STATUSES = ['pending', 'approved', 'denied'] as const
 
 // Note: 'open-source' is kept in enum for DB compatibility but hidden from UI
@@ -56,12 +50,6 @@ export const AUDIT_ACTIONS = [
   'role.delete',
   'role.assignment.create',
   'role.assignment.delete',
-  'banner.create',
-  'banner.update',
-  'banner.delete',
-  'feed.entry.create',
-  'feed.entry.update',
-  'feed.entry.delete',
   'feedback.moderate',
   'showcase.create',
   'showcase.update',
@@ -71,21 +59,18 @@ export const AUDIT_ACTIONS = [
 
 export const RELEASE_LEVELS = ['major', 'minor', 'patch'] as const
 
-export const FEED_VIEW_MODES = ['table', 'timeline'] as const
+export const SIGNUP_SOURCES = ['newsletter'] as const
 
 // Derived types from constants
 export type Capability = (typeof CAPABILITIES)[number]
 export type OAuthProvider = (typeof OAUTH_PROVIDERS)[number]
 export type DocFeedbackType = (typeof DOC_FEEDBACK_TYPES)[number]
 export type DocFeedbackStatus = (typeof DOC_FEEDBACK_STATUSES)[number]
-export type BannerScope = (typeof BANNER_SCOPES)[number]
-export type BannerStyle = (typeof BANNER_STYLES)[number]
-export type EntryType = (typeof ENTRY_TYPES)[number]
 export type ShowcaseStatus = (typeof SHOWCASE_STATUSES)[number]
 export type ShowcaseUseCase = (typeof SHOWCASE_USE_CASES)[number]
 export type AuditAction = (typeof AUDIT_ACTIONS)[number]
 export type ReleaseLevel = (typeof RELEASE_LEVELS)[number]
-export type FeedViewMode = (typeof FEED_VIEW_MODES)[number]
+export type SignupSource = (typeof SIGNUP_SOURCES)[number]
 
 // Legacy aliases for backwards compatibility
 /** @deprecated Use CAPABILITIES instead */
@@ -96,11 +81,6 @@ export const ADMIN_ACCESS_CAPABILITIES = [
   'admin',
   'moderate-feedback',
   'moderate-showcases',
-  'feed',
-] as const
-
-export const MANUAL_ENTRY_TYPES: readonly EntryType[] = [
-  'announcement',
 ] as const
 
 // Inferred model types (manually defined to avoid drizzle-orm dependency)
@@ -117,6 +97,7 @@ export interface User {
   adsDisabled: boolean | null
   interestedInHidingAds: boolean | null
   lastUsedFramework: string | null
+  signupSources: SignupSource[]
   sessionVersion: number
   createdAt: Date
   updatedAt: Date
diff --git a/src/hooks/useAILibraryHeroAnimation.ts b/src/hooks/useAILibraryHeroAnimation.ts
deleted file mode 100644
index 52f1f425f..000000000
--- a/src/hooks/useAILibraryHeroAnimation.ts
+++ /dev/null
@@ -1,347 +0,0 @@
-import { useEffect, useCallback, useRef } from 'react'
-import {
-  useAILibraryHeroAnimationStore,
-  AnimationPhase,
-  SERVICE_WIDTH,
-  SERVICE_GUTTER,
-} from '~/stores/aiLibraryHeroAnimation'
-
-const FRAMEWORKS_COUNT = 4
-const SERVICES_COUNT = 4
-const SERVERS_COUNT = 4
-
-const MESSAGES = [
-  {
-    user: 'What makes TanStack AI different?',
-    assistant:
-      'TanStack AI is completely agnostic - server agnostic, client agnostic, and service agnostic. Use any backend (TypeScript, PHP, Python), any client (vanilla JS, React, Solid), and any AI service (OpenAI, Anthropic, Gemini, Ollama). We provide the libraries and standards, you choose your stack.',
-  },
-  {
-    user: 'Do you support tools?',
-    assistant:
-      'Yes! We have full support for both client and server tooling, including tool approvals. You can execute tools on either side with complete type safety and control.',
-  },
-  {
-    user: 'What about thinking models?',
-    assistant:
-      "We fully support thinking and reasoning models. All thinking and reasoning tokens are sent to the client, giving you complete visibility into the model's reasoning process.",
-  },
-  {
-    user: 'How type-safe is it?',
-    assistant:
-      'We have total type safety across providers, models, and model options. Every interaction is fully typed from end to end, catching errors at compile time.',
-  },
-  {
-    user: 'What about developer experience?',
-    assistant:
-      'We have next-generation dev tools that show you everything happening with your AI connection in real-time. Debug, inspect, and optimize with complete visibility.',
-  },
-  {
-    user: 'Is this a service I have to pay for?',
-    assistant:
-      "No! TanStack AI is pure open source software. We don't have a service to promote or charge for. This is an ecosystem of libraries and standards connecting you with the services you choose - completely community supported.",
-  },
-]
-
-// Animation timing configuration
-const TIMING = {
-  phaseTransition: 500,
-  rotationFast: 100,
-  rotationSlowBase: 150,
-  rotationSlowIncrement: 50,
-  serviceRotationFast: 120,
-  serviceRotationSlowBase: 180,
-  serviceRotationSlowIncrement: 60,
-  afterSelection: 800,
-  afterServiceSelection: 1000,
-  typingCharBase: 30,
-  typingCharVariance: 40,
-  pulsingDuration: 2000,
-  streamingChunkBase: 20,
-  streamingChunkVariance: 60,
-  afterStreamComplete: 500,
-  holdDuration: 2000,
-  restartDelay: 1000,
-}
-
-function getRandomIndex(length: number, exclude?: number): number {
-  let index
-  do {
-    index = Math.floor(Math.random() * length)
-  } while (exclude !== undefined && index === exclude)
-  return index
-}
-
-function getRandomRotationCount(base: number, variance: number): number {
-  return base + Math.floor(Math.random() * variance)
-}
-
-export function useAILibraryHeroAnimation() {
-  const timeoutsRef = useRef<NodeJS.Timeout[]>([])
-  const store = useAILibraryHeroAnimationStore()
-  const hasStartedRef = useRef(false)
-
-  const addTimeout = useCallback((fn: () => void, delay: number) => {
-    const timeout = setTimeout(fn, delay)
-    timeoutsRef.current.push(timeout)
-    return timeout
-  }, [])
-
-  const clearAllTimeouts = useCallback(() => {
-    timeoutsRef.current.forEach(clearTimeout)
-    timeoutsRef.current = []
-  }, [])
-
-  // Rotation animation runner
-  const runRotation = useCallback(
-    (opts: {
-      count: number
-      setRotating: (index: number | null) => void
-      setSelected: (index: number) => void
-      targetIndex: number
-      itemCount: number
-      getDelay: (iteration: number, total: number) => number
-      onComplete: () => void
-    }) => {
-      let currentIndex = Math.floor(Math.random() * opts.itemCount)
-
-      const rotate = (iteration: number) => {
-        if (iteration < opts.count - 1) {
-          opts.setRotating(currentIndex)
-          currentIndex = (currentIndex + 1) % opts.itemCount
-          addTimeout(
-            () => rotate(iteration + 1),
-            opts.getDelay(iteration, opts.count),
-          )
-        } else {
-          opts.setRotating(opts.targetIndex)
-          addTimeout(() => {
-            opts.setSelected(opts.targetIndex)
-            opts.setRotating(null)
-            addTimeout(opts.onComplete, TIMING.afterSelection)
-          }, TIMING.afterSelection)
-        }
-      }
-
-      rotate(0)
-    },
-    [addTimeout],
-  )
-
-  // Select framework, service, and server in sequence
-  const selectStackCombination = useCallback(
-    (onComplete: () => void) => {
-      store.setPhase(AnimationPhase.DESELECTING)
-
-      addTimeout(() => {
-        // Phase: Select framework
-        store.setPhase(AnimationPhase.SELECTING_FRAMEWORK)
-        const targetFramework = getRandomIndex(FRAMEWORKS_COUNT)
-        const frameworkRotations = getRandomRotationCount(8, 4)
-
-        runRotation({
-          count: frameworkRotations,
-          setRotating: store.setRotatingFramework,
-          setSelected: store.setSelectedFramework,
-          targetIndex: targetFramework,
-          itemCount: FRAMEWORKS_COUNT,
-          getDelay: (i, total) =>
-            i < total - 4
-              ? TIMING.rotationFast
-              : TIMING.rotationSlowBase +
-                (i - (total - 4)) * TIMING.rotationSlowIncrement,
-          onComplete: () => {
-            // Phase: Select service
-            store.setPhase(AnimationPhase.SELECTING_SERVICE)
-            const currentService =
-              useAILibraryHeroAnimationStore.getState().selectedService
-            const targetService = getRandomIndex(
-              SERVICES_COUNT,
-              currentService ?? undefined,
-            )
-            const serviceRotations = getRandomRotationCount(6, 3)
-
-            let currentServiceIndex = Math.floor(Math.random() * SERVICES_COUNT)
-
-            const rotateService = (iteration: number) => {
-              if (iteration < serviceRotations - 1) {
-                store.setRotatingService(currentServiceIndex)
-                currentServiceIndex = (currentServiceIndex + 1) % SERVICES_COUNT
-                const delay =
-                  iteration < serviceRotations - 3
-                    ? TIMING.serviceRotationFast
-                    : TIMING.serviceRotationSlowBase +
-                      (iteration - (serviceRotations - 3)) *
-                        TIMING.serviceRotationSlowIncrement
-                addTimeout(() => rotateService(iteration + 1), delay)
-              } else {
-                store.setRotatingService(targetService)
-                addTimeout(() => {
-                  store.setSelectedService(targetService)
-                  store.setRotatingService(null)
-                  const targetX = -(
-                    SERVICE_WIDTH / 2 +
-                    SERVICE_GUTTER / 2 +
-                    targetService * (SERVICE_WIDTH + SERVICE_GUTTER)
-                  )
-                  store.setServiceOffset(targetX)
-
-                  addTimeout(() => {
-                    // Phase: Select server
-                    store.setPhase(AnimationPhase.SELECTING_SERVER)
-                    const targetServer = getRandomIndex(SERVERS_COUNT)
-                    const serverRotations = getRandomRotationCount(8, 4)
-
-                    runRotation({
-                      count: serverRotations,
-                      setRotating: store.setRotatingServer,
-                      setSelected: store.setSelectedServer,
-                      targetIndex: targetServer,
-                      itemCount: SERVERS_COUNT,
-                      getDelay: (i, total) =>
-                        i < total - 4
-                          ? TIMING.rotationFast
-                          : TIMING.rotationSlowBase +
-                            (i - (total - 4)) * TIMING.rotationSlowIncrement,
-                      onComplete,
-                    })
-                  }, TIMING.afterServiceSelection)
-                }, TIMING.afterSelection)
-              }
-            }
-
-            rotateService(0)
-          },
-        })
-      }, TIMING.phaseTransition)
-    },
-    [addTimeout, runRotation, store],
-  )
-
-  // Type user message character by character
-  const typeUserMessage = useCallback(
-    (message: string, onComplete: () => void) => {
-      store.clearTypingUserMessage()
-      let index = 0
-
-      const typeChar = () => {
-        if (index < message.length) {
-          store.setTypingUserMessage(message.slice(0, index + 1))
-          index++
-          const delay =
-            TIMING.typingCharBase +
-            Math.floor(Math.random() * TIMING.typingCharVariance)
-          addTimeout(typeChar, delay)
-        } else {
-          addTimeout(() => {
-            store.clearTypingUserMessage()
-            store.addMessage(message)
-            onComplete()
-          }, 300)
-        }
-      }
-
-      typeChar()
-    },
-    [addTimeout, store],
-  )
-
-  // Stream assistant response
-  const streamResponse = useCallback(
-    (response: string, onComplete: () => void) => {
-      store.setCurrentMessageStreaming(true)
-      let currentIndex = 0
-
-      const streamChunk = () => {
-        if (currentIndex < response.length) {
-          const chunkSize = 2 + Math.floor(Math.random() * 7)
-          const nextIndex = Math.min(currentIndex + chunkSize, response.length)
-          store.updateCurrentAssistantMessage(response.slice(0, nextIndex))
-          currentIndex = nextIndex
-          const delay =
-            TIMING.streamingChunkBase +
-            Math.floor(Math.random() * TIMING.streamingChunkVariance)
-          addTimeout(streamChunk, delay)
-        } else {
-          store.setCurrentMessageStreaming(false)
-          addTimeout(onComplete, TIMING.afterStreamComplete)
-        }
-      }
-
-      streamChunk()
-    },
-    [addTimeout, store],
-  )
-
-  // Process a single message in the conversation
-  const processMessage = useCallback(
-    (messageIndex: number, onAllComplete: () => void) => {
-      if (messageIndex >= MESSAGES.length) {
-        // All messages shown, restart
-        store.clearMessages()
-        addTimeout(() => {
-          store.setPhase(AnimationPhase.STARTING)
-          addTimeout(() => {
-            selectStackCombination(() => processMessage(0, onAllComplete))
-          }, TIMING.restartDelay)
-        }, TIMING.restartDelay)
-        return
-      }
-
-      const message = MESSAGES[messageIndex]
-      store.setPhase(AnimationPhase.SHOWING_CHAT)
-
-      typeUserMessage(message.user, () => {
-        addTimeout(() => {
-          // Pulsing phase
-          store.setPhase(AnimationPhase.PULSING_CONNECTIONS)
-          store.setConnectionPulseDirection('down')
-
-          addTimeout(() => {
-            // Streaming phase
-            store.setPhase(AnimationPhase.STREAMING_RESPONSE)
-            store.setConnectionPulseDirection('up')
-
-            streamResponse(message.assistant, () => {
-              store.setPhase(AnimationPhase.HOLDING)
-              addTimeout(() => {
-                selectStackCombination(() =>
-                  processMessage(messageIndex + 1, onAllComplete),
-                )
-              }, TIMING.holdDuration)
-            })
-          }, TIMING.pulsingDuration)
-        }, 500)
-      })
-    },
-    [
-      addTimeout,
-      store,
-      selectStackCombination,
-      typeUserMessage,
-      streamResponse,
-    ],
-  )
-
-  // Start the animation sequence
-  const startAnimation = useCallback(() => {
-    store.setPhase(AnimationPhase.STARTING)
-    addTimeout(() => {
-      selectStackCombination(() => processMessage(0, () => {}))
-    }, TIMING.restartDelay)
-  }, [addTimeout, store, selectStackCombination, processMessage])
-
-  // Effect to run animation on mount - only run once
-  useEffect(() => {
-    if (hasStartedRef.current) return
-    hasStartedRef.current = true
-    startAnimation()
-    return () => {
-      clearAllTimeouts()
-      hasStartedRef.current = false
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  return { store }
-}
diff --git a/src/hooks/useCart.ts b/src/hooks/useCart.ts
new file mode 100644
index 000000000..b80b7a300
--- /dev/null
+++ b/src/hooks/useCart.ts
@@ -0,0 +1,304 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  addToCart,
+  applyDiscountCode,
+  getCart,
+  removeCartLine,
+  removeDiscountCode,
+  updateCartLine,
+} from '~/utils/shop.functions'
+import type { CartDetail, CartLineDetail } from '~/utils/shopify-queries'
+
+/**
+ * Shared React Query key for the current user's cart.
+ *
+ * The cart ID lives in an httpOnly cookie on the server, so the client never
+ * needs to know it — a single cache key is enough. Route loaders prefetch
+ * into this key so the first render already has the data.
+ */
+export const CART_QUERY_KEY = ['shopify', 'cart'] as const
+
+/**
+ * Mutation key shared across all cart-mutating hooks. Used by
+ * `settleWhenIdle` to determine whether other cart mutations are still
+ * in flight before triggering a background refetch.
+ */
+const CART_MUTATION_KEY = ['shopify', 'cart', 'mutate'] as const
+
+/**
+ * Explicit in-flight counter. We don't rely on `queryClient.isMutating()`
+ * because its exact semantics at `onSettled` time (does it still count the
+ * current mutation?) vary across React Query versions and are under-documented.
+ * A module-level counter is unambiguous: increment in onMutate, decrement in
+ * onSettled, invalidate when the count hits zero.
+ */
+let cartMutationsInFlight = 0
+
+function trackMutationStart() {
+  cartMutationsInFlight++
+}
+
+/**
+ * Call from every cart mutation's `onSettled`. Decrements the in-flight
+ * counter, and when the last mutation settles, triggers a single background
+ * refetch to reconcile all accumulated optimistic changes with server truth.
+ *
+ * Returns the invalidation promise so the mutation stays in `isPending`
+ * until the refetch completes.
+ *
+ * @see https://tkdodo.eu/blog/concurrent-optimistic-updates-in-react-query
+ */
+function settleWhenIdle(qc: ReturnType<typeof useQueryClient>) {
+  cartMutationsInFlight = Math.max(0, cartMutationsInFlight - 1)
+  if (cartMutationsInFlight === 0) {
+    return qc.invalidateQueries({ queryKey: CART_QUERY_KEY })
+  }
+}
+
+/**
+ * Read the current cart. Data is loader-seeded on shop routes, so there is
+ * no hydration gap — components that call this render with real data on the
+ * first frame. On non-shop routes the hook falls back to fetching on mount.
+ */
+export function useCart() {
+  const query = useQuery<CartDetail | null>({
+    queryKey: CART_QUERY_KEY,
+    queryFn: () => getCart(),
+    staleTime: 30_000,
+  })
+
+  return {
+    cart: query.data ?? null,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    isError: query.isError,
+    error: query.error,
+    refetch: query.refetch,
+    totalQuantity: query.data?.totalQuantity ?? 0,
+  }
+}
+
+/**
+ * Snapshot of the product/variant from the PDP, passed through to
+ * onMutate so a full optimistic cart line can be rendered instantly.
+ */
+type AddToCartLineSnapshot = {
+  productTitle: string
+  productHandle: string
+  variantTitle: string
+  price: { amount: string; currencyCode: string }
+  image: {
+    url: string
+    altText?: string | null
+    width?: number | null
+    height?: number | null
+  } | null
+  selectedOptions: Array<{ name: string; value: string }>
+}
+
+type AddToCartInput = {
+  variantId: string
+  quantity?: number
+  /** Product snapshot for optimistic line rendering. */
+  line?: AddToCartLineSnapshot
+}
+
+export function useAddToCart() {
+  const qc = useQueryClient()
+
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: (input: AddToCartInput) =>
+      addToCart({
+        data: { variantId: input.variantId, quantity: input.quantity ?? 1 },
+      }),
+
+    onMutate: async (input) => {
+      trackMutationStart()
+      const quantity = input.quantity ?? 1
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+      const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
+
+      if (previous && input.line) {
+        const snap = input.line
+
+        // Does this variant already have a line in the cart?
+        const existingIdx = previous.lines.nodes.findIndex(
+          (l) => l.merchandise.id === input.variantId,
+        )
+
+        let nextLines: CartDetail['lines']['nodes']
+        if (existingIdx >= 0) {
+          nextLines = previous.lines.nodes.map((l, i) =>
+            i === existingIdx ? { ...l, quantity: l.quantity + quantity } : l,
+          )
+        } else {
+          const lineTotal = String(Number(snap.price.amount) * quantity)
+          nextLines = [
+            {
+              id: `optimistic-${Date.now()}`,
+              quantity,
+              merchandise: {
+                id: input.variantId,
+                title: snap.variantTitle,
+                availableForSale: true,
+                selectedOptions: snap.selectedOptions,
+                price: snap.price,
+                image: snap.image,
+                product: {
+                  handle: snap.productHandle,
+                  title: snap.productTitle,
+                },
+              },
+              cost: {
+                totalAmount: {
+                  amount: lineTotal,
+                  currencyCode: snap.price.currencyCode,
+                },
+              },
+            } as CartLineDetail,
+            ...previous.lines.nodes,
+          ]
+        }
+
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          totalQuantity: nextLines.reduce((s, l) => s + l.quantity, 0),
+          lines: { ...previous.lines, nodes: nextLines },
+        })
+      } else if (previous) {
+        // No snapshot — fall back to just bumping the count
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          totalQuantity: (previous.totalQuantity ?? 0) + quantity,
+        })
+      }
+
+      return { previous }
+    },
+
+    onError: (_err, _input, ctx) => {
+      if (ctx?.previous !== undefined)
+        qc.setQueryData(CART_QUERY_KEY, ctx.previous)
+    },
+
+    // Reconcile: replace the optimistic line (temporary ID, approximate
+    // totals) with the real server response.
+    onSuccess: (cart) => {
+      qc.setQueryData(CART_QUERY_KEY, cart)
+    },
+
+    onSettled: () => settleWhenIdle(qc),
+  })
+}
+
+export function useUpdateCartLine() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: (input: { lineId: string; quantity: number }) =>
+      updateCartLine({ data: input }),
+
+    onMutate: async (input) => {
+      trackMutationStart()
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+      const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
+      if (previous) {
+        const nextLines = previous.lines.nodes.map((line) =>
+          line.id === input.lineId
+            ? { ...line, quantity: input.quantity }
+            : line,
+        )
+        const nextQty = nextLines.reduce((sum, line) => sum + line.quantity, 0)
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          totalQuantity: nextQty,
+          lines: { ...previous.lines, nodes: nextLines },
+        })
+      }
+      return { previous }
+    },
+
+    onError: (_err, _input, ctx) => {
+      if (ctx?.previous !== undefined)
+        qc.setQueryData(CART_QUERY_KEY, ctx.previous)
+    },
+
+    onSettled: () => settleWhenIdle(qc),
+  })
+}
+
+export function useRemoveCartLine() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: (input: { lineId: string }) => removeCartLine({ data: input }),
+
+    onMutate: async (input) => {
+      trackMutationStart()
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+      const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
+      if (previous) {
+        const nextLines = previous.lines.nodes.filter(
+          (line) => line.id !== input.lineId,
+        )
+        const nextQty = nextLines.reduce((sum, line) => sum + line.quantity, 0)
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          totalQuantity: nextQty,
+          lines: { ...previous.lines, nodes: nextLines },
+        })
+      }
+      return { previous }
+    },
+
+    onError: (_err, _input, ctx) => {
+      if (ctx?.previous !== undefined)
+        qc.setQueryData(CART_QUERY_KEY, ctx.previous)
+    },
+
+    onSettled: () => settleWhenIdle(qc),
+  })
+}
+
+export function useApplyDiscountCode() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: (input: { code: string }) =>
+      applyDiscountCode({ data: { code: input.code } }),
+    onMutate: async () => {
+      trackMutationStart()
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+    },
+    onSuccess: (cart) => {
+      qc.setQueryData(CART_QUERY_KEY, cart)
+    },
+    onSettled: () => settleWhenIdle(qc),
+  })
+}
+
+export function useRemoveDiscountCode() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationKey: CART_MUTATION_KEY,
+    mutationFn: () => removeDiscountCode(),
+    onMutate: async () => {
+      trackMutationStart()
+      await qc.cancelQueries({ queryKey: CART_QUERY_KEY })
+      const previous = qc.getQueryData<CartDetail | null>(CART_QUERY_KEY)
+      if (previous) {
+        qc.setQueryData<CartDetail | null>(CART_QUERY_KEY, {
+          ...previous,
+          discountCodes: [],
+        })
+      }
+      return { previous }
+    },
+    onError: (_err, _input, ctx) => {
+      if (ctx?.previous !== undefined)
+        qc.setQueryData(CART_QUERY_KEY, ctx.previous)
+    },
+    onSettled: () => settleWhenIdle(qc),
+  })
+}
diff --git a/src/hooks/useCurrentUser.ts b/src/hooks/useCurrentUser.ts
index 0f2719a18..6c7b0abfc 100644
--- a/src/hooks/useCurrentUser.ts
+++ b/src/hooks/useCurrentUser.ts
@@ -1,6 +1,14 @@
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, queryOptions } from '@tanstack/react-query'
 import { useRouteContext } from '@tanstack/react-router'
-import { getCurrentUser } from '~/utils/auth.server'
+import { getCurrentUser } from '~/utils/auth.functions'
+
+export const currentUserQueryOptions = queryOptions({
+  queryKey: ['currentUser'],
+  queryFn: async () => {
+    return getCurrentUser()
+  },
+  staleTime: 5 * 1000,
+})
 
 export function useCurrentUserQuery() {
   // Get user from route context (set in beforeLoad)
@@ -8,12 +16,8 @@ export function useCurrentUserQuery() {
   const contextUser = routeContext?.user
 
   return useQuery({
-    queryKey: ['currentUser'],
-    queryFn: async () => {
-      return getCurrentUser()
-    },
+    ...currentUserQueryOptions,
     initialData: contextUser,
-    staleTime: 5 * 1000,
   })
 }
 
diff --git a/src/hooks/useFeedInfiniteQuery.ts b/src/hooks/useFeedInfiniteQuery.ts
deleted file mode 100644
index ba29f6fb7..000000000
--- a/src/hooks/useFeedInfiniteQuery.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useInfiniteQuery } from '@tanstack/react-query'
-import { type FeedFilters } from '~/queries/feed'
-import { listFeedEntries } from '~/utils/feed.functions'
-
-export interface UseFeedInfiniteQueryOptions {
-  pageSize?: number
-  filters: FeedFilters
-}
-
-export function useFeedInfiniteQuery({
-  pageSize = 20,
-  filters,
-}: UseFeedInfiniteQueryOptions) {
-  return useInfiniteQuery({
-    queryKey: [
-      'feed',
-      'infinite',
-      {
-        pageSize,
-        filters: {
-          entryTypes: filters.entryTypes,
-          libraries: filters.libraries,
-          partners: filters.partners,
-          tags: filters.tags,
-          releaseLevels: filters.releaseLevels as any,
-          includePrerelease: filters.includePrerelease,
-          featured: filters.featured,
-          search: filters.search,
-          includeHidden: filters.includeHidden,
-        },
-      },
-    ],
-    queryFn: ({ pageParam = 0 }) => {
-      return listFeedEntries({
-        data: {
-          pagination: {
-            limit: pageSize,
-            page: pageParam,
-          },
-          filters: {
-            entryTypes: filters.entryTypes,
-            libraries: filters.libraries,
-            partners: filters.partners,
-            tags: filters.tags,
-            releaseLevels: filters.releaseLevels as any,
-            includePrerelease: filters.includePrerelease,
-            featured: filters.featured,
-            search: filters.search,
-            includeHidden: filters.includeHidden,
-          },
-        },
-      })
-    },
-    getNextPageParam: (lastPage, allPages) => {
-      if (lastPage.isDone) {
-        return undefined
-      }
-      return allPages.length
-    },
-    initialPageParam: 0,
-  })
-}
diff --git a/src/hooks/useFeedQuery.ts b/src/hooks/useFeedQuery.ts
deleted file mode 100644
index 1700c1af6..000000000
--- a/src/hooks/useFeedQuery.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useQuery, keepPreviousData } from '@tanstack/react-query'
-import { listFeedEntriesQueryOptions, type FeedFilters } from '~/queries/feed'
-
-export interface UseFeedQueryOptions {
-  page: number
-  pageSize?: number
-  filters: FeedFilters
-}
-
-export function useFeedQuery({
-  page,
-  pageSize = 20,
-  filters,
-}: UseFeedQueryOptions) {
-  return useQuery({
-    ...listFeedEntriesQueryOptions({
-      pagination: {
-        limit: pageSize,
-        page: page - 1,
-      },
-      filters: {
-        entryTypes: filters.entryTypes,
-        libraries: filters.libraries,
-        partners: filters.partners,
-        tags: filters.tags,
-        releaseLevels: filters.releaseLevels as any,
-        includePrerelease: filters.includePrerelease,
-        featured: filters.featured,
-        search: filters.search,
-        includeHidden: filters.includeHidden,
-      },
-    }),
-    placeholderData: keepPreviousData,
-  })
-}
diff --git a/src/hooks/useHubSpotChat.ts b/src/hooks/useHubSpotChat.ts
deleted file mode 100644
index e26c5d172..000000000
--- a/src/hooks/useHubSpotChat.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from 'react'
-import { useLocation } from '@tanstack/react-router'
-import { useScript } from './useScript'
-
-/**
- * Configuration for HubSpot chat widget
- */
-export interface HubSpotChatConfig {
-  /**
-   * Array of path patterns where HubSpot should load.
-   * Can be exact paths or path prefixes (e.g., '/paid-support' or '/workshops')
-   * @default ['/paid-support', '/workshops']
-   */
-  enabledPaths?: string[]
-  /**
-   * HubSpot script source URL
-   * @default '//js-na1.hs-scripts.com/45982155.js'
-   */
-  scriptSrc?: string
-  /**
-   * HubSpot script ID
-   * @default 'hs-script-loader'
-   */
-  scriptId?: string
-}
-
-const defaultConfig = {
-  enabledPaths: ['/paid-support', '/workshops'],
-  scriptSrc: '//js-na1.hs-scripts.com/45982155.js',
-  scriptId: 'hs-script-loader',
-}
-
-/**
- * Hook to conditionally load HubSpot chat widget based on current route
- * @param config Optional configuration object to override defaults
- */
-export function useHubSpotChat(config?: HubSpotChatConfig) {
-  const location = useLocation()
-  const { enabledPaths, scriptSrc, scriptId } = {
-    ...defaultConfig,
-    ...config,
-  }
-
-  const shouldLoad = React.useMemo(() => {
-    return enabledPaths.some((path) => {
-      // Exact match
-      if (location.pathname === path) {
-        return true
-      }
-      // Prefix match (e.g., '/paid-support' matches '/paid-support/anything')
-      if (location.pathname.startsWith(path + '/')) {
-        return true
-      }
-      return false
-    })
-  }, [location.pathname, enabledPaths])
-
-  // Only load the script if we should load the chat widget
-  useScript(
-    shouldLoad
-      ? {
-          id: scriptId,
-          async: true,
-          defer: true,
-          src: scriptSrc,
-        }
-      : {
-          id: scriptId,
-          async: true,
-          defer: true,
-          src: '', // Empty src prevents loading
-        },
-  )
-}
diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts
deleted file mode 100644
index 295741ca0..000000000
--- a/src/hooks/useIntersectionObserver.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-export interface UseIntersectionObserverOptions {
-  root?: Element | null
-  rootMargin?: string
-  threshold?: number | number[]
-  triggerOnce?: boolean
-}
-
-export function useIntersectionObserver(
-  options: UseIntersectionObserverOptions = {},
-) {
-  const {
-    root = null,
-    rootMargin = '50%', // Half viewport height - triggers when about half a page away
-    threshold = 0,
-    triggerOnce = true,
-  } = options
-
-  const [isIntersecting, setIsIntersecting] = useState(false)
-  const [hasTriggered, setHasTriggered] = useState(false)
-  const targetRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const target = targetRef.current
-    if (!target) return
-
-    // If already triggered and triggerOnce is true, don't create observer
-    if (triggerOnce && hasTriggered) return
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        const isCurrentlyIntersecting = entry.isIntersecting
-        setIsIntersecting(isCurrentlyIntersecting)
-
-        if (isCurrentlyIntersecting && triggerOnce) {
-          setHasTriggered(true)
-        }
-      },
-      {
-        root,
-        rootMargin,
-        threshold,
-      },
-    )
-
-    observer.observe(target)
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [root, rootMargin, threshold, triggerOnce, hasTriggered])
-
-  return {
-    ref: targetRef,
-    isIntersecting: triggerOnce
-      ? hasTriggered || isIntersecting
-      : isIntersecting,
-    hasTriggered,
-  }
-}
diff --git a/src/hooks/useNpmDownloadCounter.ts b/src/hooks/useNpmDownloadCounter.ts
index 9932c9284..0c054b5dc 100644
--- a/src/hooks/useNpmDownloadCounter.ts
+++ b/src/hooks/useNpmDownloadCounter.ts
@@ -1,71 +1,158 @@
 import { useEffect, useRef, useCallback } from 'react'
 import type { NpmStats } from '~/utils/stats.server'
 
+type CounterData = {
+  baseCount: number
+  ratePerDay: number
+  updatedAt?: number
+}
+
 /**
  * Hook to animate NPM download count using direct DOM updates.
- * Uses setInterval to minimize overhead - updates only when count changes.
+ * Uses requestAnimationFrame for smooth visible-page updates without React renders.
  */
 export function useNpmDownloadCounter(
   npmData: NpmStats,
 ): React.RefCallback<HTMLElement> {
   const baseCount = npmData.totalDownloads ?? 0
   const ratePerDay = npmData.ratePerDay ?? 0
-  // eslint-disable-next-line react-hooks/purity
-  const updatedAt = npmData.updatedAt ?? Date.now()
+  const updatedAt = npmData.updatedAt
 
-  const intervalRef = useRef<ReturnType<typeof setInterval> | undefined>(
-    undefined,
-  )
+  const dataRef = useRef<CounterData>({
+    baseCount,
+    ratePerDay,
+    updatedAt,
+  })
+  const frameRef = useRef<number | undefined>(undefined)
   const elementRef = useRef<HTMLElement | null>(null)
   const lastCountRef = useRef<number | null>(null)
+  const mountedAtRef = useRef<number | undefined>(undefined)
 
-  useEffect(() => {
-    if (!ratePerDay || ratePerDay === 0 || !elementRef.current) {
-      return
-    }
+  dataRef.current = {
+    baseCount,
+    ratePerDay,
+    updatedAt,
+  }
 
+  const getCount = useCallback(() => {
+    const data = dataRef.current
     const msPerDay = 24 * 60 * 60 * 1000
-    const ratePerMs = ratePerDay / msPerDay
+    const ratePerMs = data.ratePerDay / msPerDay
+    const startedAt = data.updatedAt ?? mountedAtRef.current ?? Date.now()
+    const elapsedMs = Date.now() - startedAt
+
+    return Math.round(data.baseCount + ratePerMs * elapsedMs)
+  }, [])
 
-    // Calculate how often we need to update based on rate
-    // At minimum, update when count would change by 1
-    const msPerIncrement = 1 / ratePerMs
-    // Clamp between 16ms (60fps) and 1000ms
-    const intervalMs = Math.max(16, Math.min(1000, msPerIncrement))
+  const canAnimate = useCallback(() => {
+    const data = dataRef.current
 
-    const tick = () => {
-      if (!elementRef.current) return
-      const elapsedMs = Date.now() - updatedAt
-      const count = Math.round(baseCount + ratePerMs * elapsedMs)
+    return (
+      data.ratePerDay > 0 &&
+      Number.isFinite(data.ratePerDay) &&
+      !!elementRef.current
+    )
+  }, [])
+
+  const updateCount = useCallback(() => {
+    if (elementRef.current) {
+      const count = getCount()
 
       if (count !== lastCountRef.current) {
         lastCountRef.current = count
         elementRef.current.textContent = count.toLocaleString()
       }
     }
+  }, [getCount])
 
-    intervalRef.current = setInterval(tick, intervalMs)
+  const stopFrame = useCallback(() => {
+    if (frameRef.current !== undefined) {
+      window.cancelAnimationFrame(frameRef.current)
+      frameRef.current = undefined
+    }
+  }, [])
 
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current)
+  const tick = useCallback(() => {
+    frameRef.current = undefined
+
+    if (document.visibilityState === 'hidden' || !canAnimate()) {
+      return
+    }
+
+    updateCount()
+    frameRef.current = window.requestAnimationFrame(tick)
+  }, [canAnimate, updateCount])
+
+  const startFrame = useCallback(() => {
+    if (
+      !canAnimate() ||
+      frameRef.current !== undefined ||
+      document.visibilityState === 'hidden'
+    ) {
+      return
+    }
+
+    frameRef.current = window.requestAnimationFrame(tick)
+  }, [canAnimate, tick])
+
+  useEffect(() => {
+    updateCount()
+
+    if (!canAnimate()) {
+      stopFrame()
+      return
+    }
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'hidden') {
+        stopFrame()
+        return
       }
+
+      updateCount()
+      startFrame()
     }
-  }, [baseCount, ratePerDay, updatedAt])
+
+    const handleResume = () => {
+      updateCount()
+      startFrame()
+    }
+
+    updateCount()
+    startFrame()
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    window.addEventListener('focus', handleResume)
+    window.addEventListener('pageshow', handleResume)
+
+    return () => {
+      stopFrame()
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+      window.removeEventListener('focus', handleResume)
+      window.removeEventListener('pageshow', handleResume)
+    }
+  }, [
+    baseCount,
+    canAnimate,
+    ratePerDay,
+    startFrame,
+    stopFrame,
+    updatedAt,
+    updateCount,
+  ])
 
   const refCallback = useCallback(
     (node: HTMLElement | null) => {
       elementRef.current = node
       if (node) {
-        const msPerDay = 24 * 60 * 60 * 1000
-        const ratePerMs = ratePerDay / msPerDay
-        const elapsedMs = Date.now() - updatedAt
-        const count = Math.round(baseCount + ratePerMs * elapsedMs)
-        lastCountRef.current = count
-        node.textContent = count.toLocaleString()
+        mountedAtRef.current = Date.now()
+        updateCount()
+        startFrame()
+        return
       }
+
+      stopFrame()
     },
-    [baseCount, ratePerDay, updatedAt],
+    [startFrame, stopFrame, updateCount],
   )
 
   return refCallback
diff --git a/src/hooks/useScript.ts b/src/hooks/useScript.ts
deleted file mode 100644
index dc6da771d..000000000
--- a/src/hooks/useScript.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react'
-
-export function useScript(
-  attrs: React.HTMLProps<HTMLScriptElement>,
-  opts?: {
-    delay?: number
-  },
-) {
-  const attrsStringified = JSON.stringify(attrs)
-
-  React.useEffect(() => {
-    const addScript = () => {
-      const script = document.createElement('script')
-      Object.assign(script, attrs)
-      document.body.appendChild(script)
-
-      return () => {
-        document.body.removeChild(script)
-      }
-    }
-
-    if (opts?.delay) {
-      let remove: ReturnType<typeof addScript> | undefined
-
-      const timeout = setTimeout(() => {
-        remove = addScript()
-      }, opts.delay)
-
-      return () => {
-        clearTimeout(timeout)
-        remove?.()
-      }
-    }
-
-    return addScript()
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [attrsStringified])
-}
diff --git a/src/images/ag-ui-dark.svg b/src/images/ag-ui-dark.svg
new file mode 100644
index 000000000..f42df842e
--- /dev/null
+++ b/src/images/ag-ui-dark.svg
@@ -0,0 +1,5 @@
+<svg width="53" height="62" viewBox="-2 -2 57 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 25.9336L16.5449 0C40.8483 5.37332 53 8.05998 53 8.05998L43.123 62L0 25.9336Z" stroke="#fff" stroke-width="3.3125" stroke-linejoin="round"/>
+  <path d="M16.5828 0L43.2454 62" stroke="#fff" stroke-width="3.3125"/>
+  <path d="M0 25.9336L53 8.48421" stroke="#fff" stroke-width="3.3125"/>
+</svg>
diff --git a/src/images/ag-ui-light.svg b/src/images/ag-ui-light.svg
new file mode 100644
index 000000000..26dcf3b51
--- /dev/null
+++ b/src/images/ag-ui-light.svg
@@ -0,0 +1,5 @@
+<svg width="53" height="62" viewBox="-2 -2 57 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 25.9336L16.5449 0C40.8483 5.37332 53 8.05998 53 8.05998L43.123 62L0 25.9336Z" stroke="#000" stroke-width="3.3125" stroke-linejoin="round"/>
+  <path d="M16.5828 0L43.2454 62" stroke="#000" stroke-width="3.3125"/>
+  <path d="M0 25.9336L53 8.48421" stroke="#000" stroke-width="3.3125"/>
+</svg>
diff --git a/src/images/alpine-logo.svg b/src/images/alpine-logo.svg
new file mode 100644
index 000000000..932c1bdaa
--- /dev/null
+++ b/src/images/alpine-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#77c1d2" fill-rule="evenodd" d="M98.444 35.562 126 62.997 98.444 90.432 70.889 62.997z" clip-rule="evenodd"/><path fill="#2d3441" fill-rule="evenodd" d="m29.556 35.562 57.126 56.876H31.571L2 62.997z" clip-rule="evenodd"/></svg>
diff --git a/src/images/author-fallback.svg b/src/images/author-fallback.svg
new file mode 100644
index 000000000..68e26a8e0
--- /dev/null
+++ b/src/images/author-fallback.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <rect width="24" height="24" fill="#e5e7eb" />
+  <circle cx="12" cy="9.5" r="3.5" fill="#9ca3af" />
+  <path d="M4.5 21a7.5 7.5 0 0 1 15 0Z" fill="#9ca3af" />
+</svg>
diff --git a/src/images/elevenlabs-dark.svg b/src/images/elevenlabs-dark.svg
new file mode 100644
index 000000000..ee1bc55fa
--- /dev/null
+++ b/src/images/elevenlabs-dark.svg
@@ -0,0 +1,4 @@
+<svg width="876" height="876" viewBox="0 0 876 876" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M468 292H528V584H468V292Z" fill="#fff"/>
+  <path d="M348 292H408V584H348V292Z" fill="#fff"/>
+</svg>
diff --git a/src/images/elevenlabs-light.svg b/src/images/elevenlabs-light.svg
new file mode 100644
index 000000000..6d7567e29
--- /dev/null
+++ b/src/images/elevenlabs-light.svg
@@ -0,0 +1,4 @@
+<svg width="876" height="876" viewBox="0 0 876 876" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M468 292H528V584H468V292Z" fill="#000"/>
+  <path d="M348 292H408V584H348V292Z" fill="#000"/>
+</svg>
diff --git a/src/images/ember-logo.svg b/src/images/ember-logo.svg
new file mode 100644
index 000000000..e0a795691
--- /dev/null
+++ b/src/images/ember-logo.svg
@@ -0,0 +1,6 @@
+<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M0 0h128v128H0z" fill="#E05C43" fill-rule="nonzero"/>
+    <path d="M65.265 24.128c8.246-.163 14.073 2.073 19.087 9.19 10.934 27.109-28.147 41.1-29.714 41.65l-.049.016s-1.18 7.363 10.028 7.08c13.793 0 28.294-10.691 33.81-15.21a3.293 3.293 0 0 1 4.468.265l4.13 4.29a3.291 3.291 0 0 1 .085 4.491c-3.59 3.997-12.014 12.203-24.696 17.504 0 0-21.16 9.798-35.42.52-8.503-5.53-10.842-12.151-11.793-19.038.005 0-10.324-.524-16.957-3.114-6.635-2.592.049-10.411.049-10.411s2.04-3.233 5.92 0c3.883 3.228 11.13 1.772 11.13 1.772.646-5.099 1.72-11.828 4.884-18.93 6.632-14.885 16.789-19.915 25.038-20.075zm4.853 14.915c-4.369-4.21-16.984 4.202-17.471 23.45 0 0 3.724 1.134 11.97-4.53 8.25-5.661 9.87-14.718 5.501-18.92z" fill="#FFFFFF"/>
+  </g>
+</svg>
diff --git a/src/images/fal-ai-dark.svg b/src/images/fal-ai-dark.svg
new file mode 100644
index 000000000..2b275de7f
--- /dev/null
+++ b/src/images/fal-ai-dark.svg
@@ -0,0 +1,3 @@
+<svg width="170" height="171" viewBox="0 0 170 171" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M109.571 0.690002C112.515 0.690002 114.874 3.08348 115.155 6.01352C117.665 32.149 138.466 52.948 164.603 55.458C167.534 55.7394 169.927 58.0985 169.927 61.042V110.255C169.927 113.198 167.534 115.557 164.603 115.839C138.466 118.349 117.665 139.148 115.155 165.283C114.874 168.213 112.515 170.607 109.571 170.607H60.3553C57.4116 170.607 55.0524 168.213 54.7709 165.283C52.2608 139.148 31.4601 118.349 5.32289 115.839C2.39266 115.557 -0.000976562 113.198 -0.000976562 110.255V61.042C-0.000976562 58.0985 2.39267 55.7394 5.3229 55.458C31.4601 52.948 52.2608 32.149 54.7709 6.01351C55.0524 3.08348 57.4116 0.690002 60.3553 0.690002H109.571ZM34.1182 85.5045C34.1182 113.776 57.0124 136.694 85.2539 136.694C113.495 136.694 136.39 113.776 136.39 85.5045C136.39 57.2332 113.495 34.3147 85.2539 34.3147C57.0124 34.3147 34.1182 57.2332 34.1182 85.5045Z" fill="#fff"/>
+</svg>
diff --git a/src/images/fal-ai-light.svg b/src/images/fal-ai-light.svg
new file mode 100644
index 000000000..501523a46
--- /dev/null
+++ b/src/images/fal-ai-light.svg
@@ -0,0 +1,3 @@
+<svg width="170" height="171" viewBox="0 0 170 171" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M109.571 0.690002C112.515 0.690002 114.874 3.08348 115.155 6.01352C117.665 32.149 138.466 52.948 164.603 55.458C167.534 55.7394 169.927 58.0985 169.927 61.042V110.255C169.927 113.198 167.534 115.557 164.603 115.839C138.466 118.349 117.665 139.148 115.155 165.283C114.874 168.213 112.515 170.607 109.571 170.607H60.3553C57.4116 170.607 55.0524 168.213 54.7709 165.283C52.2608 139.148 31.4601 118.349 5.32289 115.839C2.39266 115.557 -0.000976562 113.198 -0.000976562 110.255V61.042C-0.000976562 58.0985 2.39267 55.7394 5.3229 55.458C31.4601 52.948 52.2608 32.149 54.7709 6.01351C55.0524 3.08348 57.4116 0.690002 60.3553 0.690002H109.571ZM34.1182 85.5045C34.1182 113.776 57.0124 136.694 85.2539 136.694C113.495 136.694 136.39 113.776 136.39 85.5045C136.39 57.2332 113.495 34.3147 85.2539 34.3147C57.0124 34.3147 34.1182 57.2332 34.1182 85.5045Z" fill="#000"/>
+</svg>
diff --git a/src/images/file-icons/marko.svg b/src/images/file-icons/marko.svg
new file mode 100644
index 000000000..9af592b8d
--- /dev/null
+++ b/src/images/file-icons/marko.svg
@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -583 2560 2560">
+  <style>stop:not([stop-color]){stop-color:inherit}</style>
+  <path fill="#8dc220" d="M1281 0h361l-427 697H854z"/>
+  <path fill="url(#a)" d="M427 0h361L361 697l427 697H427L0 698z"/>
+  <linearGradient id="a" x2="0" y2="1">
+    <stop offset=".685" stop-color="#44bfef"/>
+    <stop offset="1" stop-color="#2073ba"/>
+  </linearGradient>
+  <path fill="#00ac71" d="M854 697h361L788 0H427z"/>
+  <path fill="url(#b)" d="M1642 0h-361l428 697-428 697h361l428-697z"/>
+  <linearGradient id="b" x2="0" y2="1" stop-color="#f9bc00">
+    <stop offset=".5"/>
+    <stop offset=".5" stop-color="#e95506"/>
+    <stop offset=".833"/>
+  </linearGradient>
+  <path fill="url(#c)" d="M1493 246h-361L855 698h361z"/>
+  <linearGradient id="c" x2="0" y2="1" stop-color="#8ac23e">
+    <stop offset="0" stop-opacity="0"/>
+    <stop offset="1"/>
+  </linearGradient>
+  <path fill="url(#d)" d="M1005 452h361L1642 0h-361z"/>
+  <linearGradient id="d" x2="0" y2="1" stop-color="#698932">
+    <stop offset="0"/>
+    <stop offset="1" stop-opacity="0"/>
+  </linearGradient>
+  <path fill="url(#e)" d="M1919 452h-361L1281 0h361z"/>
+  <linearGradient id="e" x2="0" y2="1" stop-color="#ffed01">
+    <stop offset="0"/>
+    <stop offset="1" stop-opacity="0"/>
+  </linearGradient>
+  <path fill="url(#f)" d="M150 452h361L788 0H427z"/>
+  <linearGradient id="f" x2="0" y2="1" stop-color="#00828b">
+    <stop offset="0"/>
+    <stop offset=".833" stop-opacity="0"/>
+  </linearGradient>
+  <path fill="url(#g)" d="M638 246H277L0 698h361z"/>
+  <linearGradient id="g" x2="0" y2="1" stop-color="#88d0f1">
+    <stop offset="0" stop-opacity="0"/>
+    <stop offset="1"/>
+  </linearGradient>
+  <path fill="url(#h)" d="M1065 452H704L427 0h361z"/>
+  <linearGradient id="h" x2="0" y2="1" stop-color="#8ed0e1">
+    <stop offset="0"/>
+    <stop offset="1" stop-opacity="0"/>
+  </linearGradient>
+  <path fill="url(#i)" d="M2132 0h-361l427 697-428 697h361l428-697z"/>
+  <linearGradient id="i" x2="0" y2="1" stop-color="#df1b1c">
+    <stop offset="0" stop-color="#e02a89"/>
+    <stop offset=".31"/>
+    <stop offset=".5"/>
+    <stop offset=".5" stop-color="#7f1e4f"/>
+    <stop offset=".833"/>
+  </linearGradient>
+</svg>
diff --git a/src/images/groq-dark.svg b/src/images/groq-dark.svg
new file mode 100644
index 000000000..9d7d5972f
--- /dev/null
+++ b/src/images/groq-dark.svg
@@ -0,0 +1,3 @@
+<svg width="370" height="562" viewBox="0 0 369.6 562.32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M165.98 342.21H0L272.4 1.5L203.65 221.61H369.6L97.23 562.32L165.98 342.21Z" fill="#fff"/>
+</svg>
diff --git a/src/images/groq-light.svg b/src/images/groq-light.svg
new file mode 100644
index 000000000..dc013d75e
--- /dev/null
+++ b/src/images/groq-light.svg
@@ -0,0 +1,3 @@
+<svg width="370" height="562" viewBox="0 0 369.6 562.32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M165.98 342.21H0L272.4 1.5L203.65 221.61H369.6L97.23 562.32L165.98 342.21Z" fill="#000"/>
+</svg>
diff --git a/src/images/lovable-black.svg b/src/images/lovable-black.svg
new file mode 100644
index 000000000..c4fe475a5
--- /dev/null
+++ b/src/images/lovable-black.svg
@@ -0,0 +1,53 @@
+<svg width="911" height="155" viewBox="0 0 911 155" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M857.05 154.384C845.795 154.384 836.016 152.238 827.715 147.947C819.414 143.585 812.942 137.043 808.299 128.32C803.727 119.597 801.44 108.798 801.44 95.9247C801.44 83.6841 803.832 73.1319 808.616 64.2681C813.4 55.3339 820.012 48.5453 828.454 43.9024C836.896 39.2594 846.498 36.9379 857.262 36.9379C867.603 36.9379 876.783 39.1891 884.803 43.6913C892.822 48.1936 899.048 54.7359 903.48 63.3184C907.982 71.9008 910.233 82.1716 910.233 94.1308C910.233 98.422 910.198 101.834 910.128 104.366H826.027V82.2068H889.762L877.733 86.3222C877.733 80.5536 876.889 75.7348 875.2 71.8657C873.582 67.9262 871.19 64.9716 868.025 63.0018C864.859 61.0321 861.025 60.0472 856.523 60.0472C851.81 60.0472 847.659 61.208 844.071 63.5294C840.554 65.7806 837.81 69.1573 835.841 73.6595C833.941 78.1618 832.991 83.5786 832.991 89.9099V100.779C832.991 107.251 833.976 112.738 835.946 117.24C837.916 121.742 840.73 125.154 844.388 127.476C848.046 129.727 852.372 130.852 857.367 130.852C862.854 130.852 867.392 129.445 870.979 126.632C874.567 123.747 876.818 119.702 877.733 114.496H909.706C908.721 122.657 905.942 129.727 901.37 135.706C896.867 141.686 890.853 146.294 883.325 149.53C875.798 152.766 867.04 154.384 857.05 154.384Z" fill="black"/>
+<path d="M759.904 0.00286865H791.877V151.321H759.904V0.00286865Z" fill="black"/>
+<path d="M705.496 154.381C699.446 154.381 694.029 153.326 689.246 151.216C684.532 149.105 680.523 145.94 677.216 141.719C673.91 137.428 671.448 132.151 669.83 125.89L673.206 126.84V151.321H641.55V39.9957H673.523V64.8988L669.935 65.532C671.553 59.5524 674.015 54.4522 677.322 50.2313C680.698 45.9401 684.814 42.6689 689.668 40.4177C694.522 38.0963 699.974 36.9355 706.024 36.9355C715.099 36.9355 722.977 39.2922 729.661 44.0055C736.344 48.7188 741.479 55.5074 745.067 64.3712C748.654 73.1647 750.448 83.6114 750.448 95.7112C750.448 107.741 748.619 118.187 744.961 127.051C741.303 135.845 736.062 142.598 729.238 147.311C722.485 152.025 714.571 154.381 705.496 154.381ZM695.577 130.006C700.361 130.006 704.37 128.599 707.606 125.785C710.913 122.971 713.375 118.996 714.993 113.861C716.681 108.726 717.526 102.676 717.526 95.7112C717.526 88.7468 716.681 82.6968 714.993 77.5614C713.375 72.426 710.913 68.4514 707.606 65.6375C704.37 62.7532 700.361 61.3111 695.577 61.3111C690.864 61.3111 686.819 62.7532 683.442 65.6375C680.136 68.4514 677.638 72.4612 675.95 77.667C674.262 82.8024 673.417 88.8171 673.417 95.7112C673.417 102.676 674.262 108.726 675.95 113.861C677.638 118.996 680.136 122.971 683.442 125.785C686.819 128.599 690.864 130.006 695.577 130.006ZM641.55 0.00286865H673.523V39.9957H641.55V0.00286865Z" fill="black"/>
+<path d="M561.296 154.384C554.331 154.384 548.07 153.012 542.513 150.268C537.026 147.525 532.699 143.621 529.534 138.555C526.438 133.42 524.891 127.441 524.891 120.617C524.891 110.205 527.951 102.256 534.071 96.7688C540.191 91.2113 549.02 87.5884 560.557 85.9001L579.868 83.1565C583.737 82.5937 586.797 81.8902 589.048 81.0461C591.299 80.2019 592.952 79.0763 594.007 77.6694C595.063 76.1921 595.59 74.3278 595.59 72.0767C595.59 69.7552 594.957 67.6448 593.691 65.7454C592.495 63.7757 590.666 62.228 588.204 61.1024C585.812 59.9065 582.892 59.3086 579.445 59.3086C573.958 59.3086 569.562 60.7507 566.255 63.635C562.949 66.4489 561.155 70.318 560.874 75.2424H527.845C528.127 67.7855 530.378 61.1728 534.599 55.4043C538.89 49.5654 544.834 45.0279 552.432 41.7919C560.029 38.5559 568.823 36.9379 578.812 36.9379C589.294 36.9379 598.158 38.6615 605.404 42.1085C612.65 45.4852 618.102 50.3392 621.76 56.6705C625.488 63.0018 627.352 70.5642 627.352 79.3577V125.787C627.352 130.782 627.704 135.425 628.408 139.716C629.181 143.937 630.272 146.61 631.679 147.736V151.324H598.439C597.666 148.299 597.068 144.887 596.646 141.088C596.223 137.289 595.977 133.279 595.907 129.059L601.077 126.843C599.741 131.837 597.279 136.445 593.691 140.666C590.173 144.816 585.636 148.158 580.079 150.69C574.591 153.153 568.33 154.384 561.296 154.384ZM573.114 130.958C577.616 130.958 581.591 129.973 585.038 128.003C588.485 125.963 591.123 123.149 592.952 119.562C594.852 115.974 595.801 111.894 595.801 107.321V92.759L598.439 94.2363C596.751 96.4874 594.641 98.211 592.108 99.4069C589.646 100.603 586.304 101.623 582.083 102.467L573.958 104.05C568.542 105.105 564.461 106.723 561.718 108.904C559.045 111.085 557.708 114.145 557.708 118.084C557.708 122.024 559.15 125.154 562.034 127.476C564.919 129.797 568.612 130.958 573.114 130.958Z" fill="black"/>
+<path d="M416.143 39.9976H450.121L479.35 135.495H469.115L497.183 39.9976H530.212L491.696 151.323H456.135L416.143 39.9976Z" fill="black"/>
+<path d="M366.162 154.384C355.117 154.384 345.409 151.992 337.038 147.208C328.736 142.425 322.3 135.601 317.727 126.737C313.225 117.873 310.974 107.497 310.974 95.6081C310.974 83.7193 313.225 73.3781 317.727 64.5847C322.3 55.7208 328.736 48.8971 337.038 44.1134C345.409 39.3298 355.117 36.9379 366.162 36.9379C377.206 36.9379 386.879 39.3298 395.18 44.1134C403.481 48.8971 409.883 55.7208 414.385 64.5847C418.958 73.3781 421.244 83.7193 421.244 95.6081C421.244 107.497 418.958 117.873 414.385 126.737C409.883 135.601 403.481 142.425 395.18 147.208C386.879 151.992 377.206 154.384 366.162 154.384ZM366.162 129.903C370.805 129.903 374.779 128.636 378.086 126.104C381.392 123.501 383.924 119.667 385.683 114.602C387.442 109.467 388.321 103.135 388.321 95.6081C388.321 84.4228 386.387 75.9458 382.517 70.1773C378.648 64.3384 373.196 61.419 366.162 61.419C361.519 61.419 357.509 62.7204 354.132 65.3233C350.826 67.8558 348.293 71.6898 346.535 76.8252C344.776 81.8902 343.896 88.1512 343.896 95.6081C343.896 103.065 344.776 109.361 346.535 114.496C348.293 119.632 350.826 123.501 354.132 126.104C357.509 128.636 361.519 129.903 366.162 129.903Z" fill="black"/>
+<path d="M217.513 0.00192261H250.647V127.741L244.737 120.882C244.737 120.882 261.148 120.882 289.379 120.882C317.609 120.882 313.749 151.32 313.749 151.32H217.513V0.00192261Z" fill="black"/>
+<mask id="mask0_313_127" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="149" height="152">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44.6502 0C69.3099 0 89.3004 20.0433 89.3004 44.7679V61.7825H104.16C128.82 61.7825 148.81 81.8258 148.81 106.55C148.81 131.275 128.82 151.318 104.16 151.318H0V44.7679C0 20.0433 19.9906 0 44.6502 0Z" fill="url(#paint0_linear_313_127)"/>
+</mask>
+<g mask="url(#mask0_313_127)">
+<g filter="url(#filter0_f_313_127)">
+<circle cx="65.2812" cy="80.7667" r="100.733" fill="#4B73FF"/>
+</g>
+<g filter="url(#filter1_f_313_127)">
+<ellipse cx="76.3487" cy="25.4884" rx="129.012" ry="100.733" fill="#FF66F4"/>
+</g>
+<g filter="url(#filter2_f_313_127)">
+<ellipse cx="97.3926" cy="6.53951" rx="100.733" ry="88.4654" fill="#FF0105"/>
+</g>
+<g filter="url(#filter3_f_313_127)">
+<circle cx="78.1432" cy="25.4679" r="60.5807" fill="#FE7B02"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_313_127" x="-80.5968" y="-65.1113" width="291.756" height="291.756" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="22.5723" result="effect1_foregroundBlur_313_127"/>
+</filter>
+<filter id="filter1_f_313_127" x="-97.8078" y="-120.39" width="348.313" height="291.756" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="22.5723" result="effect1_foregroundBlur_313_127"/>
+</filter>
+<filter id="filter2_f_313_127" x="-48.4855" y="-127.071" width="291.756" height="267.22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="22.5723" result="effect1_foregroundBlur_313_127"/>
+</filter>
+<filter id="filter3_f_313_127" x="-27.5822" y="-80.2574" width="211.451" height="211.451" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="22.5723" result="effect1_foregroundBlur_313_127"/>
+</filter>
+<linearGradient id="paint0_linear_313_127" x1="50.0774" y1="26.5915" x2="95.4144" y2="151.261" gradientUnits="userSpaceOnUse">
+<stop offset="0.025" stop-color="#FF8E63"/>
+<stop offset="0.56" stop-color="#FF7EB0"/>
+<stop offset="0.95" stop-color="#4B73FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/lovable-white.svg b/src/images/lovable-white.svg
new file mode 100644
index 000000000..e3fc1ce27
--- /dev/null
+++ b/src/images/lovable-white.svg
@@ -0,0 +1,53 @@
+<svg width="911" height="155" viewBox="0 0 911 155" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M857.05 154.384C845.795 154.384 836.016 152.238 827.715 147.947C819.414 143.585 812.942 137.043 808.299 128.32C803.727 119.597 801.44 108.798 801.44 95.9247C801.44 83.6841 803.832 73.132 808.616 64.2681C813.4 55.3339 820.012 48.5454 828.454 43.9024C836.896 39.2594 846.498 36.938 857.262 36.938C867.603 36.938 876.783 39.1891 884.803 43.6914C892.822 48.1936 899.048 54.736 903.48 63.3184C907.982 71.9009 910.233 82.1717 910.233 94.1308C910.233 98.422 910.198 101.834 910.128 104.366H826.027V82.2068H889.762L877.733 86.3222C877.733 80.5537 876.889 75.7348 875.2 71.8657C873.582 67.9262 871.19 64.9716 868.025 63.0019C864.859 61.0321 861.025 60.0472 856.523 60.0472C851.81 60.0472 847.659 61.208 844.071 63.5295C840.554 65.7806 837.81 69.1573 835.841 73.6596C833.941 78.1618 832.991 83.5786 832.991 89.9099V100.779C832.991 107.251 833.976 112.738 835.946 117.24C837.916 121.742 840.73 125.154 844.388 127.476C848.046 129.727 852.372 130.852 857.367 130.852C862.854 130.852 867.392 129.445 870.979 126.632C874.567 123.747 876.818 119.702 877.733 114.497H909.706C908.721 122.657 905.942 129.727 901.37 135.706C896.867 141.686 890.853 146.294 883.325 149.53C875.798 152.766 867.04 154.384 857.05 154.384Z" fill="white"/>
+<path d="M759.904 0.00288391H791.877V151.321H759.904V0.00288391Z" fill="white"/>
+<path d="M705.496 154.381C699.446 154.381 694.029 153.326 689.246 151.216C684.532 149.105 680.523 145.94 677.216 141.719C673.91 137.428 671.448 132.151 669.83 125.89L673.206 126.84V151.321H641.55V39.9957H673.523V64.8988L669.935 65.532C671.553 59.5524 674.015 54.4522 677.322 50.2313C680.698 45.9401 684.814 42.6689 689.668 40.4178C694.522 38.0963 699.974 36.9355 706.024 36.9355C715.099 36.9355 722.977 39.2922 729.661 44.0055C736.344 48.7188 741.479 55.5074 745.067 64.3712C748.654 73.1647 750.448 83.6114 750.448 95.7112C750.448 107.741 748.619 118.187 744.961 127.051C741.303 135.845 736.062 142.598 729.238 147.311C722.485 152.025 714.571 154.381 705.496 154.381ZM695.577 130.006C700.361 130.006 704.37 128.599 707.606 125.785C710.913 122.971 713.375 118.996 714.993 113.861C716.681 108.726 717.526 102.676 717.526 95.7112C717.526 88.7468 716.681 82.6969 714.993 77.5615C713.375 72.4261 710.913 68.4514 707.606 65.6375C704.37 62.7532 700.361 61.3111 695.577 61.3111C690.864 61.3111 686.819 62.7532 683.442 65.6375C680.136 68.4514 677.638 72.4612 675.95 77.667C674.262 82.8024 673.417 88.8171 673.417 95.7112C673.417 102.676 674.262 108.726 675.95 113.861C677.638 118.996 680.136 122.971 683.442 125.785C686.819 128.599 690.864 130.006 695.577 130.006ZM641.55 0.00288391H673.523V39.9957H641.55V0.00288391Z" fill="white"/>
+<path d="M561.296 154.384C554.331 154.384 548.07 153.012 542.513 150.268C537.026 147.525 532.699 143.621 529.534 138.556C526.438 133.42 524.891 127.441 524.891 120.617C524.891 110.205 527.951 102.256 534.071 96.7689C540.191 91.2114 549.02 87.5885 560.557 85.9001L579.868 83.1565C583.737 82.5938 586.797 81.8903 589.048 81.0461C591.299 80.2019 592.952 79.0764 594.007 77.6694C595.063 76.1921 595.59 74.3279 595.59 72.0767C595.59 69.7553 594.957 67.6448 593.691 65.7454C592.495 63.7757 590.666 62.228 588.204 61.1025C585.812 59.9066 582.892 59.3086 579.445 59.3086C573.958 59.3086 569.562 60.7507 566.255 63.635C562.949 66.4489 561.155 70.318 560.874 75.2424H527.845C528.127 67.7855 530.378 61.1728 534.599 55.4043C538.89 49.5654 544.834 45.028 552.432 41.792C560.029 38.556 568.823 36.938 578.812 36.938C589.294 36.938 598.158 38.6615 605.404 42.1085C612.65 45.4852 618.102 50.3392 621.76 56.6705C625.488 63.0019 627.352 70.5643 627.352 79.3577V125.787C627.352 130.782 627.704 135.425 628.408 139.716C629.181 143.937 630.272 146.61 631.679 147.736V151.324H598.439C597.666 148.299 597.068 144.887 596.646 141.088C596.223 137.289 595.977 133.279 595.907 129.059L601.077 126.843C599.741 131.837 597.279 136.445 593.691 140.666C590.173 144.816 585.636 148.158 580.079 150.691C574.591 153.153 568.33 154.384 561.296 154.384ZM573.114 130.958C577.616 130.958 581.591 129.973 585.038 128.003C588.485 125.963 591.123 123.149 592.952 119.562C594.852 115.974 595.801 111.894 595.801 107.321V92.759L598.439 94.2363C596.751 96.4875 594.641 98.211 592.108 99.4069C589.646 100.603 586.304 101.623 582.083 102.467L573.958 104.05C568.542 105.105 564.461 106.723 561.718 108.904C559.045 111.085 557.708 114.145 557.708 118.084C557.708 122.024 559.15 125.154 562.034 127.476C564.919 129.797 568.612 130.958 573.114 130.958Z" fill="white"/>
+<path d="M416.143 39.9976H450.121L479.35 135.495H469.115L497.183 39.9976H530.212L491.696 151.323H456.135L416.143 39.9976Z" fill="white"/>
+<path d="M366.162 154.384C355.117 154.384 345.409 151.992 337.038 147.208C328.736 142.425 322.3 135.601 317.727 126.737C313.225 117.873 310.974 107.497 310.974 95.6081C310.974 83.7193 313.225 73.3782 317.727 64.5847C322.3 55.7208 328.736 48.8971 337.038 44.1134C345.409 39.3298 355.117 36.938 366.162 36.938C377.206 36.938 386.879 39.3298 395.18 44.1134C403.481 48.8971 409.883 55.7208 414.385 64.5847C418.958 73.3782 421.244 83.7193 421.244 95.6081C421.244 107.497 418.958 117.873 414.385 126.737C409.883 135.601 403.481 142.425 395.18 147.208C386.879 151.992 377.206 154.384 366.162 154.384ZM366.162 129.903C370.805 129.903 374.779 128.636 378.086 126.104C381.392 123.501 383.924 119.667 385.683 114.602C387.442 109.467 388.321 103.135 388.321 95.6081C388.321 84.4228 386.387 75.9459 382.517 70.1773C378.648 64.3385 373.196 61.419 366.162 61.419C361.519 61.419 357.509 62.7205 354.132 65.3233C350.826 67.8559 348.293 71.6898 346.535 76.8252C344.776 81.8903 343.896 88.1512 343.896 95.6081C343.896 103.065 344.776 109.361 346.535 114.497C348.293 119.632 350.826 123.501 354.132 126.104C357.509 128.636 361.519 129.903 366.162 129.903Z" fill="white"/>
+<path d="M217.513 0.00192261H250.647V127.741L244.737 120.882C244.737 120.882 261.148 120.882 289.379 120.882C317.609 120.882 313.749 151.32 313.749 151.32H217.513V0.00192261Z" fill="white"/>
+<mask id="mask0_313_106" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="149" height="152">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44.6502 0C69.3099 0 89.3004 20.0433 89.3004 44.7679V61.7825H104.16C128.82 61.7825 148.81 81.8258 148.81 106.55C148.81 131.275 128.82 151.318 104.16 151.318H0V44.7679C0 20.0433 19.9906 0 44.6502 0Z" fill="url(#paint0_linear_313_106)"/>
+</mask>
+<g mask="url(#mask0_313_106)">
+<g filter="url(#filter0_f_313_106)">
+<circle cx="65.2812" cy="80.7667" r="100.733" fill="#4B73FF"/>
+</g>
+<g filter="url(#filter1_f_313_106)">
+<ellipse cx="76.3487" cy="25.4884" rx="129.012" ry="100.733" fill="#FF66F4"/>
+</g>
+<g filter="url(#filter2_f_313_106)">
+<ellipse cx="97.3926" cy="6.53952" rx="100.733" ry="88.4654" fill="#FF0105"/>
+</g>
+<g filter="url(#filter3_f_313_106)">
+<circle cx="78.1432" cy="25.4679" r="60.5807" fill="#FE7B02"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_313_106" x="-80.5968" y="-65.1113" width="291.756" height="291.756" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="22.5723" result="effect1_foregroundBlur_313_106"/>
+</filter>
+<filter id="filter1_f_313_106" x="-97.8078" y="-120.39" width="348.313" height="291.756" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="22.5723" result="effect1_foregroundBlur_313_106"/>
+</filter>
+<filter id="filter2_f_313_106" x="-48.4855" y="-127.071" width="291.756" height="267.22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="22.5723" result="effect1_foregroundBlur_313_106"/>
+</filter>
+<filter id="filter3_f_313_106" x="-27.5822" y="-80.2574" width="211.451" height="211.451" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="22.5723" result="effect1_foregroundBlur_313_106"/>
+</filter>
+<linearGradient id="paint0_linear_313_106" x1="50.0774" y1="26.5915" x2="95.4144" y2="151.261" gradientUnits="userSpaceOnUse">
+<stop offset="0.025" stop-color="#FF8E63"/>
+<stop offset="0.56" stop-color="#FF7EB0"/>
+<stop offset="0.95" stop-color="#4B73FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/marko-logo.svg b/src/images/marko-logo.svg
new file mode 100644
index 000000000..6da554b72
--- /dev/null
+++ b/src/images/marko-logo.svg
@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1394">
+  <style>stop:not([stop-color]){stop-color:inherit}</style>
+  <path fill="#8dc220" d="M1281 0h361l-427 697H854z"/>
+  <path fill="url(#a)" d="M427 0h361L361 697l427 697H427L0 698z"/>
+  <linearGradient id="a" x2="0" y2="1">
+    <stop offset=".685" stop-color="#44bfef"/>
+    <stop offset="1" stop-color="#2073ba"/>
+  </linearGradient>
+  <path fill="#00ac71" d="M854 697h361L788 0H427z"/>
+  <path fill="url(#b)" d="M1642 0h-361l428 697-428 697h361l428-697z"/>
+  <linearGradient id="b" x2="0" y2="1" stop-color="#f9bc00">
+    <stop offset=".5"/>
+    <stop offset=".5" stop-color="#e95506"/>
+    <stop offset=".833"/>
+  </linearGradient>
+  <path fill="url(#c)" d="M1493 246h-361L855 698h361z"/>
+  <linearGradient id="c" x2="0" y2="1" stop-color="#8ac23e">
+    <stop offset="0" stop-opacity="0"/>
+    <stop offset="1"/>
+  </linearGradient>
+  <path fill="url(#d)" d="M1005 452h361L1642 0h-361z"/>
+  <linearGradient id="d" x2="0" y2="1" stop-color="#698932">
+    <stop offset="0"/>
+    <stop offset="1" stop-opacity="0"/>
+  </linearGradient>
+  <path fill="url(#e)" d="M1919 452h-361L1281 0h361z"/>
+  <linearGradient id="e" x2="0" y2="1" stop-color="#ffed01">
+    <stop offset="0"/>
+    <stop offset="1" stop-opacity="0"/>
+  </linearGradient>
+  <path fill="url(#f)" d="M150 452h361L788 0H427z"/>
+  <linearGradient id="f" x2="0" y2="1" stop-color="#00828b">
+    <stop offset="0"/>
+    <stop offset=".833" stop-opacity="0"/>
+  </linearGradient>
+  <path fill="url(#g)" d="M638 246H277L0 698h361z"/>
+  <linearGradient id="g" x2="0" y2="1" stop-color="#88d0f1">
+    <stop offset="0" stop-opacity="0"/>
+    <stop offset="1"/>
+  </linearGradient>
+  <path fill="url(#h)" d="M1065 452H704L427 0h361z"/>
+  <linearGradient id="h" x2="0" y2="1" stop-color="#8ed0e1">
+    <stop offset="0"/>
+    <stop offset="1" stop-opacity="0"/>
+  </linearGradient>
+  <path fill="url(#i)" d="M2132 0h-361l427 697-428 697h361l428-697z"/>
+  <linearGradient id="i" x2="0" y2="1" stop-color="#df1b1c">
+    <stop offset="0" stop-color="#e02a89"/>
+    <stop offset=".31"/>
+    <stop offset=".5"/>
+    <stop offset=".5" stop-color="#7f1e4f"/>
+    <stop offset=".833"/>
+  </linearGradient>
+</svg>
diff --git a/src/images/openrouter-black.svg b/src/images/openrouter-black.svg
new file mode 100644
index 000000000..f398d4764
--- /dev/null
+++ b/src/images/openrouter-black.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1257px" height="178px" viewBox="0 0 1257 178" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>openrouter-black</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="openrouter-black" transform="translate(0.9731, 0.7)" fill="#000000" fill-rule="nonzero">
+            <path d="M369.717696,77.1672792 C369.717696,90.8773828 367.144065,102.6289 362.119359,112.421831 C357.491727,121.741029 350.316201,129.561909 341.423696,134.9774 C332.532417,140.392891 322.285692,143.183876 311.872294,143.024741 C301.452769,143.213255 291.195015,140.434511 282.296382,135.015348 C273.398975,129.596184 266.229577,121.760615 261.62523,112.421831 C256.47797,102.6289 254.026893,90.7549712 254.026893,77.1672792 C254.026893,63.4571756 256.47797,51.7056583 261.502676,41.9127271 C266.127857,32.5641503 273.319315,24.7236848 282.237556,19.3045215 C291.157023,13.8865824 301.434386,11.1127346 311.872294,11.3098174 C322.285692,11.1506822 332.532417,13.9416676 341.423696,19.3571585 C350.316201,24.7726494 357.491727,32.5935291 362.119359,41.9127271 C367.144065,51.7056583 369.717696,63.4571756 369.717696,77.1672792 Z M350.476746,77.1672792 C350.476746,66.7622899 348.760993,57.9486519 345.45204,50.7263652 C342.515651,44.0720685 337.704188,38.4142025 331.603459,34.4456172 C325.843429,30.773268 319.225523,28.9370934 311.872294,28.9370934 C304.863442,28.8452847 297.975917,30.7573545 292.018576,34.4456172 C286.258547,38.1179663 281.724056,43.6264901 278.292549,50.7263652 C274.983596,57.9486519 273.267842,66.6398782 273.267842,77.1672792 C273.267842,87.5722685 274.983596,96.3859066 278.292549,103.485782 C281.201976,110.120492 285.968094,115.774686 292.018576,119.76653 C297.901159,123.438879 304.519065,125.397465 311.872294,125.397465 C319.225523,125.397465 325.843429,123.56129 331.603459,119.76653 C337.486042,116.09418 342.020533,110.708068 345.45204,103.485782 C348.760993,96.3859066 350.476746,87.5722685 350.476746,77.1672792 Z M392.145044,177.3 L392.145044,45.0954298 L410.528116,45.0954298 L410.528116,60.6417079 L412.121316,60.6417079 C413.2243,58.6831217 414.694946,56.3573006 416.778361,53.7866561 C419.514988,50.4105431 423.02738,47.7456418 427.018958,46.0184135 C431.00931,44.2924094 435.358745,43.5554913 439.695925,43.8713134 C447.161903,43.7378847 454.497974,45.833572 460.764151,49.8890696 C467.030328,53.9457913 471.942285,59.7787059 474.86887,66.6398782 C478.42293,73.9845766 480.138684,82.9206263 480.138684,93.3256156 C480.138684,103.730605 478.42293,112.666655 474.991424,120.011353 C471.918999,126.955765 466.949442,132.896402 460.652627,137.148982 C454.469787,141.194687 447.208473,143.285478 439.818478,143.147153 C434.058449,143.147153 429.27885,142.16786 425.602236,140.209273 C422.257742,138.550596 419.294391,136.216206 416.900915,133.354222 C414.8175,130.661166 413.2243,128.335344 411.998762,126.254346 L411.018332,126.254346 L411.018332,177.3 L392.267598,177.3 M410.65067,93.2032039 C410.65067,99.9358441 411.508547,105.811603 413.469408,110.952892 C415.430269,116.09418 418.371561,120.011353 422.048175,122.826821 C425.724789,125.7647 430.259281,127.111228 435.651649,127.111228 C441.289124,127.111228 445.946169,125.642288 449.745337,122.704409 C453.421952,119.644118 456.363243,115.604534 458.324105,110.463245 C460.284966,105.321956 461.265396,99.5686092 461.265396,93.2032039 C461.265396,86.8377987 460.284966,81.0844517 458.324105,76.0655745 C456.635313,71.3833293 453.662157,67.2690741 449.745337,64.1916455 C445.693708,61.1484921 440.716798,59.5926402 435.651649,59.7848265 C430.259281,59.7848265 425.724789,61.1313545 421.925621,63.9468222 C418.249007,66.7622899 415.430269,70.6794623 413.346854,75.6983395 C411.349227,81.3133614 410.393307,87.2454295 410.528116,93.2032039 L410.65067,93.2032039 Z M542.518576,143.024741 C532.959379,143.024741 524.870827,141.066155 518.007813,136.904159 C511.144799,132.864575 505.874985,127.111228 502.198371,119.76653 C498.521756,112.421831 496.683449,103.608193 496.683449,93.6928505 C496.683449,83.8999194 498.521756,75.208693 502.198371,67.6191714 C505.639682,60.4091258 511.030824,54.3032333 517.762705,49.9918953 C523.648965,46.5937482 530.200692,44.5066298 536.969339,43.8725375 C543.737987,43.2384452 550.564234,44.0732926 556.979926,46.3195462 C562.372294,48.2524259 567.262192,51.3653539 571.291761,55.4330927 C575.321331,59.4996073 578.387627,64.4168829 580.265152,69.8225809 C582.716228,75.9431628 583.819212,83.2878612 583.819212,92.1014992 L583.819212,98.7117277 L507.223077,98.7117277 L507.223077,84.6343892 L565.43614,84.6343892 C565.43614,79.7379236 564.455709,75.3311046 562.372294,71.5363438 C560.379569,67.7122042 557.340235,64.5307257 553.608471,62.3640397 C549.877933,60.1973537 545.606932,59.1323724 541.293038,59.2951799 C536.023224,59.2951799 531.488733,60.5192963 527.567011,62.9675291 C523.69431,65.5234841 520.537324,69.0220087 518.392632,73.1338157 C516.24794,77.2456227 515.18785,81.8360591 515.311629,86.4705638 L515.311629,97.4876113 C515.311629,103.853017 516.537167,109.239129 518.743136,113.768359 C521.071658,118.29759 524.258058,121.725116 528.302334,124.050937 C532.681181,126.486929 537.63113,127.712269 542.64113,127.600875 C546.317744,127.600875 549.504144,127.111228 552.445435,126.009523 C555.318097,125.042471 557.935846,123.440103 560.100147,121.319933 C562.264447,119.199764 563.921375,116.618102 564.945925,113.768359 L582.593674,117.073474 C581.245582,122.337174 578.671952,126.866405 574.995337,130.783577 C571.318723,134.70075 566.784232,137.638629 561.26931,139.842038 C555.273977,142.065034 548.913434,143.144704 542.518576,143.024741 Z M623.404095,84.022331 L623.404095,141.188566 L604.653361,141.188566 L604.653361,45.0954298 L622.91388,45.0954298 L622.91388,60.7641196 L624.139418,60.7641196 C626.345386,55.6228307 629.776893,51.5832466 634.556492,48.5229557 C639.213537,45.340253 645.218674,43.8713134 652.449349,43.8713134 C659.067255,43.8713134 664.704731,45.2178414 669.606883,47.9108975 C674.63159,50.7263652 678.430758,54.7659493 681.126942,60.1520614 C684.058429,66.3864862 685.484956,73.220728 685.293772,80.1051586 L685.293772,141.310978 L666.543038,141.310978 L666.543038,82.3085681 C666.853099,76.3777241 664.879983,70.5521542 661.028116,66.0278201 C657.351502,61.988236 652.449349,60.0296497 646.076551,60.0296497 C642.058011,59.958651 638.088493,60.9293753 634.556492,62.8451174 C631.144594,64.7828937 628.374878,67.6767048 626.590494,71.1691089 C624.529139,75.176866 623.516844,79.6412184 623.649202,84.1447426 L623.404095,84.022331 Z M711.642842,141.188566 L711.642842,13.0235803 L757.355416,13.0235803 C767.159721,13.0235803 775.49338,14.7373433 782.111287,18.1648692 C788.729193,21.5923951 793.631345,26.366449 796.817744,32.3646193 C800.185523,38.776541 801.873089,45.9351736 801.719897,53.1745979 C801.719897,61.1313545 800.126698,67.9864063 796.817744,73.9845766 C793.45977,79.9986604 788.323539,84.8302478 782.111287,87.8170918 C775.49338,91.1222061 767.159721,92.7135574 757.232862,92.7135574 L722.672686,92.7135574 L722.672686,76.0655745 L755.517108,76.0655745 C761.767353,76.0655745 766.914613,75.208693 770.836335,73.3725184 C774.758058,71.6587555 777.699349,68.9656994 779.415103,65.5381735 C781.353904,61.7532056 782.322079,57.5471417 782.23384,53.2970096 C782.23384,48.400544 781.375964,44.2385483 779.537656,40.6886108 C777.618464,37.0737951 774.560746,34.191001 770.836335,32.4870309 C765.921927,30.404809 760.605543,29.4426535 755.272001,29.6715632 L730.883791,29.6715632 L730.883791,141.310978 L711.642842,141.310978 M775.003165,83.4102728 L806.62205,141.310978 L784.562363,141.310978 L753.556247,83.4102728 L775.003165,83.4102728 Z M864.467451,143.147153 C856.350712,143.460526 848.31976,141.404011 841.353801,137.229774 C834.389068,133.055537 828.793261,126.944748 825.25023,119.644118 C821.351793,111.513537 819.42157,102.582384 819.612754,93.5704389 C819.612754,83.6550961 821.451061,74.9638697 825.127676,67.4967597 C828.652324,60.1728714 834.242003,54.0376 841.207962,49.8401049 C848.173921,45.6438339 856.214677,43.5689566 864.344897,43.8713134 C872.475117,43.5689566 880.515873,45.6438339 887.481832,49.8401049 C894.447791,54.0376 900.03747,60.1728714 903.562118,67.4967597 C907.594139,75.5844967 909.572157,84.5389081 909.322148,93.5704389 C909.514557,102.582384 907.583109,111.513537 903.684672,119.644118 C900.141641,126.944748 894.545834,133.055537 887.581101,137.229774 C880.615142,141.404011 872.58419,143.460526 864.467451,143.147153 Z M864.467451,127.478463 C870.350034,127.478463 875.252187,125.887112 879.051355,122.826821 C882.850523,119.76653 885.669261,115.604534 887.630122,110.585657 C889.494166,105.06734 890.405966,99.272373 890.326306,93.4480272 C890.326306,87.3274453 889.468429,81.8189215 887.630122,76.555221 C885.957263,71.727306 882.990235,67.4514674 879.051355,64.1916455 C874.891879,60.9709952 869.726235,59.3233346 864.467451,59.5400032 C858.584868,59.5400032 853.682715,61.0089429 849.760993,64.1916455 C846.084379,67.3743481 843.143087,71.5363438 841.182226,76.6776327 C839.310829,82.1102612 838.397803,87.8256606 838.486042,93.5704389 C838.486042,99.6910208 839.466472,105.321956 841.30478,110.463245 C843.143087,115.604534 845.961825,119.76653 849.883547,122.826821 C853.682715,125.887112 858.584868,127.478463 864.590005,127.478463 L864.467451,127.478463 Z M991.310651,101.404784 L991.310651,45.0954298 L1010.06138,45.0954298 L1010.06138,141.310978 L991.678312,141.310978 L991.678312,124.540584 L990.697881,124.540584 C988.29215,130.104193 984.247874,134.804799 979.10429,138.019329 C973.960707,141.233859 967.959246,142.808072 961.897735,142.535094 C956.14751,142.653834 950.473268,141.215497 945.475523,138.373099 C940.659158,135.481736 936.818322,131.219363 934.44568,126.131935 C931.546057,119.930561 930.120756,113.14406 930.27885,106.301249 L930.27885,45.0954298 L949.029584,45.0954298 L949.029584,103.975428 C948.718297,109.700621 950.652197,115.320539 954.421952,119.644118 C958.098566,123.56129 962.878165,125.519877 968.638195,125.519877 C972.475355,125.466016 976.240208,124.465912 979.596957,122.607704 C982.953706,120.749495 985.799405,118.091938 987.879144,114.870064 C990.207666,111.320127 991.310651,106.790896 991.310651,101.404784 Z M1080.16217,45.0954298 L1080.16217,60.1520614 L1027.46403,60.1520614 L1027.46403,45.0954298 L1080.16217,45.0954298 Z M1041.68027,22.0820416 L1060.431,22.0820416 L1060.431,113.033889 C1060.431,116.706239 1060.92122,119.399295 1062.0242,121.235469 C1063.12719,122.949232 1064.47528,124.29576 1066.31359,124.907818 C1068.02934,125.519877 1069.9902,125.887112 1071.95106,125.887112 C1074.15703,125.634944 1076.363,125.349724 1078.56897,125.03023 L1081.87792,140.454097 C1077.9562,141.909571 1073.80162,142.614662 1069.62254,142.535094 C1064.72039,142.535094 1060.1859,141.678213 1055.89651,139.842038 C1051.70517,138.036467 1048.13886,135.06064 1045.60199,131.273224 C1043.02836,127.600875 1041.68027,122.704409 1041.68027,116.951062 L1041.68027,22.0820416 Z M1142.29695,143.269564 C1132.86031,143.269564 1124.6492,141.188566 1117.78619,137.148982 C1111.04573,132.986987 1105.77591,127.356051 1102.0993,119.888941 C1098.42269,112.544243 1096.46182,103.730605 1096.46182,93.8152621 C1096.26574,84.8033173 1098.20209,75.8721641 1102.0993,67.741583 C1105.77591,60.274473 1110.92317,54.2763027 1117.54108,50.114307 C1123.42366,46.7161599 1129.98029,44.6290414 1136.74526,43.9949491 C1143.52249,43.3608568 1150.33648,44.1957042 1156.7583,46.4419578 C1162.15067,48.3748376 1167.04057,51.4877656 1171.07259,55.5555043 C1175.10461,59.622019 1178.16845,64.5392945 1180.04353,69.9449925 C1182.4946,76.0655745 1183.72014,83.4102728 1183.72014,92.2239108 L1183.72014,98.8341393 L1107.00145,98.8341393 L1107.00145,84.7568008 L1165.09196,84.7568008 C1165.09196,79.8603353 1164.11153,75.4535163 1162.15067,71.6587555 C1160.14079,67.8248229 1157.07694,64.6396721 1153.3268,62.4717619 C1149.57665,60.3050759 1145.27501,59.2462152 1140.94886,59.4175915 C1135.67905,59.4175915 1131.14455,60.6417079 1127.22283,63.0899407 C1123.42366,65.7083257 1120.32305,69.2227638 1118.20287,73.3223296 C1116.09495,77.4231195 1115.01647,81.9805049 1115.09,86.5929754 L1115.09,97.6100229 C1115.09,103.975428 1116.19299,109.36154 1118.52151,113.890771 C1120.72748,118.420002 1123.91388,121.847527 1128.08071,124.173349 C1132.45588,126.60934 1137.40705,127.834681 1142.41951,127.723286 C1145.7162,127.737976 1148.98839,127.200588 1152.10126,126.131935 C1154.94451,125.15509 1157.54265,123.562515 1159.71185,121.466827 C1161.8688,119.372364 1163.53553,116.827426 1164.60175,114.013183 L1182.2495,117.195885 C1180.9014,122.327381 1178.29101,127.040229 1174.65116,130.905989 C1170.81522,134.922315 1166.12141,138.019329 1160.92513,139.96445 C1154.93225,142.191118 1148.57171,143.270788 1142.1744,143.147153 L1142.29695,143.269564 Z M1204.43174,141.310978 L1204.43174,45.0954298 L1222.5697,45.0954298 L1222.5697,60.3968847 L1223.55013,60.3968847 C1225.38844,55.2555958 1228.45228,51.0936001 1232.86422,48.1557207 C1237.39871,45.0954298 1242.42342,43.6264901 1248.0609,43.6264901 C1250.72031,43.6619895 1253.37973,43.8260211 1256.02689,44.1161367 L1256.02689,61.988236 C1252.82824,61.168078 1249.53154,60.7567749 1246.22259,60.7641196 C1242.11704,60.7433096 1238.07276,61.7532056 1234.45742,63.7019989 C1231.02591,65.5038982 1228.15816,68.2177643 1226.16053,71.5436885 C1224.17516,74.8696127 1223.1457,78.679063 1223.18247,82.5533913 L1223.18247,141.310978 L1204.43174,141.310978 Z" id="Shape"></path>
+            <path d="M67.4298932,34.693 C104.197893,8.669 134.677893,16.95 165.826893,16.95 L165.826893,52.25 C125.575893,52.25 112.655893,45.931 87.8238932,63.507 C63.5078932,80.818 62.8358932,81.305 50.1428932,88.404 C42.3098932,92.855 32.0358932,96.244 23.7748932,98.46 C15.8488932,100.586 6.7176932,102.45 1.2268932,102.45 L1.2268932,67.15 C0.968993199,67.15 2.1375932,67.103 5.1467932,66.545 C7.7922932,66.054 11.0968932,65.313 14.6288932,64.365 C22.0628932,62.371 28.9068932,59.888 32.7558932,57.683 L32.8328932,57.639 L32.9118932,57.596 C43.8108932,51.499 43.1448932,51.982 67.3898932,34.721 L67.4108932,34.708 L67.4298932,34.693 Z" id="Path"></path>
+            <polygon id="Path" points="200.326893 34.8 140.026893 69.6 140.026893 0"></polygon>
+            <path d="M0.0268931992,67.15 C5.4758932,67.15 14.5718932,68.969 22.5298932,71.075 C30.6028932,73.212 40.5948932,76.456 48.3938932,80.735 L49.1418932,81.152 L49.1698932,81.167 L49.1978932,81.184 C61.7098932,88.349 62.3158932,88.787 86.6638932,106.121 C111.468893,123.663 124.396893,117.35 164.626893,117.35 L164.626893,152.65 C133.477893,152.65 102.997893,160.93 66.2298932,134.906 L66.2108932,134.893 L66.1898932,134.878 C41.9798932,117.642 42.5408932,118.05 31.7128932,111.849 L30.9468932,111.431 C26.9508932,109.328 20.4758932,107.047 13.4988932,105.2 C9.9604932,104.264 6.6516932,103.533 4.0004932,103.049 C0.994293199,102.5 -0.199606801,102.45 0.0268931992,102.45 L0.0268931992,67.15 Z" id="Path"></path>
+            <polygon id="Path" points="199.126893 134.7 138.826893 100 138.826893 169.5"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/openrouter-white.svg b/src/images/openrouter-white.svg
new file mode 100644
index 000000000..139a6ebcd
--- /dev/null
+++ b/src/images/openrouter-white.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1257px" height="178px" viewBox="0 0 1257 178" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>openrouter-white</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="openrouter-white" transform="translate(0.9731, 0.7)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M369.717696,77.1672792 C369.717696,90.8773828 367.144065,102.6289 362.119359,112.421831 C357.491727,121.741029 350.316201,129.561909 341.423696,134.9774 C332.532417,140.392891 322.285692,143.183876 311.872294,143.024741 C301.452769,143.213255 291.195015,140.434511 282.296382,135.015348 C273.398975,129.596184 266.229577,121.760615 261.62523,112.421831 C256.47797,102.6289 254.026893,90.7549712 254.026893,77.1672792 C254.026893,63.4571756 256.47797,51.7056583 261.502676,41.9127271 C266.127857,32.5641503 273.319315,24.7236848 282.237556,19.3045215 C291.157023,13.8865824 301.434386,11.1127346 311.872294,11.3098174 C322.285692,11.1506822 332.532417,13.9416676 341.423696,19.3571585 C350.316201,24.7726494 357.491727,32.5935291 362.119359,41.9127271 C367.144065,51.7056583 369.717696,63.4571756 369.717696,77.1672792 Z M350.476746,77.1672792 C350.476746,66.7622899 348.760993,57.9486519 345.45204,50.7263652 C342.515651,44.0720685 337.704188,38.4142025 331.603459,34.4456172 C325.843429,30.773268 319.225523,28.9370934 311.872294,28.9370934 C304.863442,28.8452847 297.975917,30.7573545 292.018576,34.4456172 C286.258547,38.1179663 281.724056,43.6264901 278.292549,50.7263652 C274.983596,57.9486519 273.267842,66.6398782 273.267842,77.1672792 C273.267842,87.5722685 274.983596,96.3859066 278.292549,103.485782 C281.201976,110.120492 285.968094,115.774686 292.018576,119.76653 C297.901159,123.438879 304.519065,125.397465 311.872294,125.397465 C319.225523,125.397465 325.843429,123.56129 331.603459,119.76653 C337.486042,116.09418 342.020533,110.708068 345.45204,103.485782 C348.760993,96.3859066 350.476746,87.5722685 350.476746,77.1672792 Z M392.145044,177.3 L392.145044,45.0954298 L410.528116,45.0954298 L410.528116,60.6417079 L412.121316,60.6417079 C413.2243,58.6831217 414.694946,56.3573006 416.778361,53.7866561 C419.514988,50.4105431 423.02738,47.7456418 427.018958,46.0184135 C431.00931,44.2924094 435.358745,43.5554913 439.695925,43.8713134 C447.161903,43.7378847 454.497974,45.833572 460.764151,49.8890696 C467.030328,53.9457913 471.942285,59.7787059 474.86887,66.6398782 C478.42293,73.9845766 480.138684,82.9206263 480.138684,93.3256156 C480.138684,103.730605 478.42293,112.666655 474.991424,120.011353 C471.918999,126.955765 466.949442,132.896402 460.652627,137.148982 C454.469787,141.194687 447.208473,143.285478 439.818478,143.147153 C434.058449,143.147153 429.27885,142.16786 425.602236,140.209273 C422.257742,138.550596 419.294391,136.216206 416.900915,133.354222 C414.8175,130.661166 413.2243,128.335344 411.998762,126.254346 L411.018332,126.254346 L411.018332,177.3 L392.267598,177.3 M410.65067,93.2032039 C410.65067,99.9358441 411.508547,105.811603 413.469408,110.952892 C415.430269,116.09418 418.371561,120.011353 422.048175,122.826821 C425.724789,125.7647 430.259281,127.111228 435.651649,127.111228 C441.289124,127.111228 445.946169,125.642288 449.745337,122.704409 C453.421952,119.644118 456.363243,115.604534 458.324105,110.463245 C460.284966,105.321956 461.265396,99.5686092 461.265396,93.2032039 C461.265396,86.8377987 460.284966,81.0844517 458.324105,76.0655745 C456.635313,71.3833293 453.662157,67.2690741 449.745337,64.1916455 C445.693708,61.1484921 440.716798,59.5926402 435.651649,59.7848265 C430.259281,59.7848265 425.724789,61.1313545 421.925621,63.9468222 C418.249007,66.7622899 415.430269,70.6794623 413.346854,75.6983395 C411.349227,81.3133614 410.393307,87.2454295 410.528116,93.2032039 L410.65067,93.2032039 Z M542.518576,143.024741 C532.959379,143.024741 524.870827,141.066155 518.007813,136.904159 C511.144799,132.864575 505.874985,127.111228 502.198371,119.76653 C498.521756,112.421831 496.683449,103.608193 496.683449,93.6928505 C496.683449,83.8999194 498.521756,75.208693 502.198371,67.6191714 C505.639682,60.4091258 511.030824,54.3032333 517.762705,49.9918953 C523.648965,46.5937482 530.200692,44.5066298 536.969339,43.8725375 C543.737987,43.2384452 550.564234,44.0732926 556.979926,46.3195462 C562.372294,48.2524259 567.262192,51.3653539 571.291761,55.4330927 C575.321331,59.4996073 578.387627,64.4168829 580.265152,69.8225809 C582.716228,75.9431628 583.819212,83.2878612 583.819212,92.1014992 L583.819212,98.7117277 L507.223077,98.7117277 L507.223077,84.6343892 L565.43614,84.6343892 C565.43614,79.7379236 564.455709,75.3311046 562.372294,71.5363438 C560.379569,67.7122042 557.340235,64.5307257 553.608471,62.3640397 C549.877933,60.1973537 545.606932,59.1323724 541.293038,59.2951799 C536.023224,59.2951799 531.488733,60.5192963 527.567011,62.9675291 C523.69431,65.5234841 520.537324,69.0220087 518.392632,73.1338157 C516.24794,77.2456227 515.18785,81.8360591 515.311629,86.4705638 L515.311629,97.4876113 C515.311629,103.853017 516.537167,109.239129 518.743136,113.768359 C521.071658,118.29759 524.258058,121.725116 528.302334,124.050937 C532.681181,126.486929 537.63113,127.712269 542.64113,127.600875 C546.317744,127.600875 549.504144,127.111228 552.445435,126.009523 C555.318097,125.042471 557.935846,123.440103 560.100147,121.319933 C562.264447,119.199764 563.921375,116.618102 564.945925,113.768359 L582.593674,117.073474 C581.245582,122.337174 578.671952,126.866405 574.995337,130.783577 C571.318723,134.70075 566.784232,137.638629 561.26931,139.842038 C555.273977,142.065034 548.913434,143.144704 542.518576,143.024741 Z M623.404095,84.022331 L623.404095,141.188566 L604.653361,141.188566 L604.653361,45.0954298 L622.91388,45.0954298 L622.91388,60.7641196 L624.139418,60.7641196 C626.345386,55.6228307 629.776893,51.5832466 634.556492,48.5229557 C639.213537,45.340253 645.218674,43.8713134 652.449349,43.8713134 C659.067255,43.8713134 664.704731,45.2178414 669.606883,47.9108975 C674.63159,50.7263652 678.430758,54.7659493 681.126942,60.1520614 C684.058429,66.3864862 685.484956,73.220728 685.293772,80.1051586 L685.293772,141.310978 L666.543038,141.310978 L666.543038,82.3085681 C666.853099,76.3777241 664.879983,70.5521542 661.028116,66.0278201 C657.351502,61.988236 652.449349,60.0296497 646.076551,60.0296497 C642.058011,59.958651 638.088493,60.9293753 634.556492,62.8451174 C631.144594,64.7828937 628.374878,67.6767048 626.590494,71.1691089 C624.529139,75.176866 623.516844,79.6412184 623.649202,84.1447426 L623.404095,84.022331 Z M711.642842,141.188566 L711.642842,13.0235803 L757.355416,13.0235803 C767.159721,13.0235803 775.49338,14.7373433 782.111287,18.1648692 C788.729193,21.5923951 793.631345,26.366449 796.817744,32.3646193 C800.185523,38.776541 801.873089,45.9351736 801.719897,53.1745979 C801.719897,61.1313545 800.126698,67.9864063 796.817744,73.9845766 C793.45977,79.9986604 788.323539,84.8302478 782.111287,87.8170918 C775.49338,91.1222061 767.159721,92.7135574 757.232862,92.7135574 L722.672686,92.7135574 L722.672686,76.0655745 L755.517108,76.0655745 C761.767353,76.0655745 766.914613,75.208693 770.836335,73.3725184 C774.758058,71.6587555 777.699349,68.9656994 779.415103,65.5381735 C781.353904,61.7532056 782.322079,57.5471417 782.23384,53.2970096 C782.23384,48.400544 781.375964,44.2385483 779.537656,40.6886108 C777.618464,37.0737951 774.560746,34.191001 770.836335,32.4870309 C765.921927,30.404809 760.605543,29.4426535 755.272001,29.6715632 L730.883791,29.6715632 L730.883791,141.310978 L711.642842,141.310978 M775.003165,83.4102728 L806.62205,141.310978 L784.562363,141.310978 L753.556247,83.4102728 L775.003165,83.4102728 Z M864.467451,143.147153 C856.350712,143.460526 848.31976,141.404011 841.353801,137.229774 C834.389068,133.055537 828.793261,126.944748 825.25023,119.644118 C821.351793,111.513537 819.42157,102.582384 819.612754,93.5704389 C819.612754,83.6550961 821.451061,74.9638697 825.127676,67.4967597 C828.652324,60.1728714 834.242003,54.0376 841.207962,49.8401049 C848.173921,45.6438339 856.214677,43.5689566 864.344897,43.8713134 C872.475117,43.5689566 880.515873,45.6438339 887.481832,49.8401049 C894.447791,54.0376 900.03747,60.1728714 903.562118,67.4967597 C907.594139,75.5844967 909.572157,84.5389081 909.322148,93.5704389 C909.514557,102.582384 907.583109,111.513537 903.684672,119.644118 C900.141641,126.944748 894.545834,133.055537 887.581101,137.229774 C880.615142,141.404011 872.58419,143.460526 864.467451,143.147153 Z M864.467451,127.478463 C870.350034,127.478463 875.252187,125.887112 879.051355,122.826821 C882.850523,119.76653 885.669261,115.604534 887.630122,110.585657 C889.494166,105.06734 890.405966,99.272373 890.326306,93.4480272 C890.326306,87.3274453 889.468429,81.8189215 887.630122,76.555221 C885.957263,71.727306 882.990235,67.4514674 879.051355,64.1916455 C874.891879,60.9709952 869.726235,59.3233346 864.467451,59.5400032 C858.584868,59.5400032 853.682715,61.0089429 849.760993,64.1916455 C846.084379,67.3743481 843.143087,71.5363438 841.182226,76.6776327 C839.310829,82.1102612 838.397803,87.8256606 838.486042,93.5704389 C838.486042,99.6910208 839.466472,105.321956 841.30478,110.463245 C843.143087,115.604534 845.961825,119.76653 849.883547,122.826821 C853.682715,125.887112 858.584868,127.478463 864.590005,127.478463 L864.467451,127.478463 Z M991.310651,101.404784 L991.310651,45.0954298 L1010.06138,45.0954298 L1010.06138,141.310978 L991.678312,141.310978 L991.678312,124.540584 L990.697881,124.540584 C988.29215,130.104193 984.247874,134.804799 979.10429,138.019329 C973.960707,141.233859 967.959246,142.808072 961.897735,142.535094 C956.14751,142.653834 950.473268,141.215497 945.475523,138.373099 C940.659158,135.481736 936.818322,131.219363 934.44568,126.131935 C931.546057,119.930561 930.120756,113.14406 930.27885,106.301249 L930.27885,45.0954298 L949.029584,45.0954298 L949.029584,103.975428 C948.718297,109.700621 950.652197,115.320539 954.421952,119.644118 C958.098566,123.56129 962.878165,125.519877 968.638195,125.519877 C972.475355,125.466016 976.240208,124.465912 979.596957,122.607704 C982.953706,120.749495 985.799405,118.091938 987.879144,114.870064 C990.207666,111.320127 991.310651,106.790896 991.310651,101.404784 Z M1080.16217,45.0954298 L1080.16217,60.1520614 L1027.46403,60.1520614 L1027.46403,45.0954298 L1080.16217,45.0954298 Z M1041.68027,22.0820416 L1060.431,22.0820416 L1060.431,113.033889 C1060.431,116.706239 1060.92122,119.399295 1062.0242,121.235469 C1063.12719,122.949232 1064.47528,124.29576 1066.31359,124.907818 C1068.02934,125.519877 1069.9902,125.887112 1071.95106,125.887112 C1074.15703,125.634944 1076.363,125.349724 1078.56897,125.03023 L1081.87792,140.454097 C1077.9562,141.909571 1073.80162,142.614662 1069.62254,142.535094 C1064.72039,142.535094 1060.1859,141.678213 1055.89651,139.842038 C1051.70517,138.036467 1048.13886,135.06064 1045.60199,131.273224 C1043.02836,127.600875 1041.68027,122.704409 1041.68027,116.951062 L1041.68027,22.0820416 Z M1142.29695,143.269564 C1132.86031,143.269564 1124.6492,141.188566 1117.78619,137.148982 C1111.04573,132.986987 1105.77591,127.356051 1102.0993,119.888941 C1098.42269,112.544243 1096.46182,103.730605 1096.46182,93.8152621 C1096.26574,84.8033173 1098.20209,75.8721641 1102.0993,67.741583 C1105.77591,60.274473 1110.92317,54.2763027 1117.54108,50.114307 C1123.42366,46.7161599 1129.98029,44.6290414 1136.74526,43.9949491 C1143.52249,43.3608568 1150.33648,44.1957042 1156.7583,46.4419578 C1162.15067,48.3748376 1167.04057,51.4877656 1171.07259,55.5555043 C1175.10461,59.622019 1178.16845,64.5392945 1180.04353,69.9449925 C1182.4946,76.0655745 1183.72014,83.4102728 1183.72014,92.2239108 L1183.72014,98.8341393 L1107.00145,98.8341393 L1107.00145,84.7568008 L1165.09196,84.7568008 C1165.09196,79.8603353 1164.11153,75.4535163 1162.15067,71.6587555 C1160.14079,67.8248229 1157.07694,64.6396721 1153.3268,62.4717619 C1149.57665,60.3050759 1145.27501,59.2462152 1140.94886,59.4175915 C1135.67905,59.4175915 1131.14455,60.6417079 1127.22283,63.0899407 C1123.42366,65.7083257 1120.32305,69.2227638 1118.20287,73.3223296 C1116.09495,77.4231195 1115.01647,81.9805049 1115.09,86.5929754 L1115.09,97.6100229 C1115.09,103.975428 1116.19299,109.36154 1118.52151,113.890771 C1120.72748,118.420002 1123.91388,121.847527 1128.08071,124.173349 C1132.45588,126.60934 1137.40705,127.834681 1142.41951,127.723286 C1145.7162,127.737976 1148.98839,127.200588 1152.10126,126.131935 C1154.94451,125.15509 1157.54265,123.562515 1159.71185,121.466827 C1161.8688,119.372364 1163.53553,116.827426 1164.60175,114.013183 L1182.2495,117.195885 C1180.9014,122.327381 1178.29101,127.040229 1174.65116,130.905989 C1170.81522,134.922315 1166.12141,138.019329 1160.92513,139.96445 C1154.93225,142.191118 1148.57171,143.270788 1142.1744,143.147153 L1142.29695,143.269564 Z M1204.43174,141.310978 L1204.43174,45.0954298 L1222.5697,45.0954298 L1222.5697,60.3968847 L1223.55013,60.3968847 C1225.38844,55.2555958 1228.45228,51.0936001 1232.86422,48.1557207 C1237.39871,45.0954298 1242.42342,43.6264901 1248.0609,43.6264901 C1250.72031,43.6619895 1253.37973,43.8260211 1256.02689,44.1161367 L1256.02689,61.988236 C1252.82824,61.168078 1249.53154,60.7567749 1246.22259,60.7641196 C1242.11704,60.7433096 1238.07276,61.7532056 1234.45742,63.7019989 C1231.02591,65.5038982 1228.15816,68.2177643 1226.16053,71.5436885 C1224.17516,74.8696127 1223.1457,78.679063 1223.18247,82.5533913 L1223.18247,141.310978 L1204.43174,141.310978 Z" id="Shape"></path>
+            <path d="M67.4298932,34.693 C104.197893,8.669 134.677893,16.95 165.826893,16.95 L165.826893,52.25 C125.575893,52.25 112.655893,45.931 87.8238932,63.507 C63.5078932,80.818 62.8358932,81.305 50.1428932,88.404 C42.3098932,92.855 32.0358932,96.244 23.7748932,98.46 C15.8488932,100.586 6.7176932,102.45 1.2268932,102.45 L1.2268932,67.15 C0.968993199,67.15 2.1375932,67.103 5.1467932,66.545 C7.7922932,66.054 11.0968932,65.313 14.6288932,64.365 C22.0628932,62.371 28.9068932,59.888 32.7558932,57.683 L32.8328932,57.639 L32.9118932,57.596 C43.8108932,51.499 43.1448932,51.982 67.3898932,34.721 L67.4108932,34.708 L67.4298932,34.693 Z" id="Path"></path>
+            <polygon id="Path" points="200.326893 34.8 140.026893 69.6 140.026893 0"></polygon>
+            <path d="M0.0268931992,67.15 C5.4758932,67.15 14.5718932,68.969 22.5298932,71.075 C30.6028932,73.212 40.5948932,76.456 48.3938932,80.735 L49.1418932,81.152 L49.1698932,81.167 L49.1978932,81.184 C61.7098932,88.349 62.3158932,88.787 86.6638932,106.121 C111.468893,123.663 124.396893,117.35 164.626893,117.35 L164.626893,152.65 C133.477893,152.65 102.997893,160.93 66.2298932,134.906 L66.2108932,134.893 L66.1898932,134.878 C41.9798932,117.642 42.5408932,118.05 31.7128932,111.849 L30.9468932,111.431 C26.9508932,109.328 20.4758932,107.047 13.4988932,105.2 C9.9604932,104.264 6.6516932,103.533 4.0004932,103.049 C0.994293199,102.5 -0.199606801,102.45 0.0268931992,102.45 L0.0268931992,67.15 Z" id="Path"></path>
+            <polygon id="Path" points="199.126893 134.7 138.826893 100 138.826893 169.5"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/powersync-black.svg b/src/images/powersync-black.svg
index 03e4ce86a..1d3d216c8 100644
--- a/src/images/powersync-black.svg
+++ b/src/images/powersync-black.svg
@@ -1 +1,117 @@
-<svg viewBox="0 0 1920 296" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="93.53" x2="350.81" y1="61.81" y2="210.36"><stop offset="0" stop-color="#05f"/><stop offset="1" stop-color="#00d5ff"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="284.87" x2="27.58" y1="203.46" y2="54.92"><stop offset="0" stop-color="#05f"/><stop offset="1" stop-color="#a0f"/></linearGradient><g fill="none"><path d="m718.2 125.37c-9.5 0-17.69 3.63-24.56 10.9-6.88 7.27-10.32 16.23-10.32 26.89s3.44 19.62 10.32 26.89 15.07 10.9 24.56 10.9 17.68-3.63 24.56-10.9 10.32-16.23 10.32-26.89-3.44-19.62-10.32-26.89-15.07-10.9-24.56-10.9z"/><path d="m1118.84 129.87c-5.72-4.94-12.74-7.41-21.07-7.41s-15.41 2.42-21.22 7.27-9.88 11.15-12.21 18.9h65.4c-1.55-7.56-5.19-13.81-10.9-18.75z"/><path d="m555.8 70.14h-40.69v58.14h40.69c8.72 0 15.99-2.81 21.8-8.43s8.72-12.5 8.72-20.64-2.91-15.01-8.72-20.64c-5.81-5.62-13.08-8.43-21.8-8.43z"/></g><path d="m609.28 50.52c-13.76-13.08-31.1-19.62-52.03-19.62h-85.75v203.48h43.6v-66.86h42.15c20.93 0 38.27-6.54 52.03-19.62s20.64-29.31 20.64-48.69-6.88-35.61-20.64-48.69zm-31.68 69.33c-5.81 5.62-13.08 8.43-21.8 8.43h-40.69v-58.14h40.69c8.72 0 15.99 2.81 21.8 8.43s8.72 12.5 8.72 20.64-2.91 15.02-8.72 20.64z"/><path d="m718.2 89.03c-20.35 0-38.03 7.41-53.05 22.24s-22.53 32.12-22.53 51.89 7.51 37.06 22.53 51.89 32.7 22.24 53.05 22.24 38.03-7.41 53.05-22.24 22.53-32.12 22.53-51.89-7.51-37.06-22.53-51.89c-15.02-14.82-32.7-22.24-53.05-22.24zm24.56 101.02c-6.88 7.27-15.07 10.9-24.56 10.9s-17.69-3.63-24.56-10.9c-6.88-7.27-10.32-16.23-10.32-26.89s3.44-19.62 10.32-26.89 15.07-10.9 24.56-10.9 17.68 3.63 24.56 10.9 10.32 16.23 10.32 26.89-3.44 19.62-10.32 26.89z"/><path d="m950.77 177.69-27.61-85.75h-29.07l-27.62 85.75-27.61-85.75h-40.7l48.55 142.44h34.3l27.61-81.4 27.62 81.4h34.3l48.54-142.44h-40.69z"/><path d="m1097.77 89.03c-20.35 0-37.79 7.27-52.32 21.8s-21.8 31.98-21.8 52.32 7.36 37.79 22.09 52.32 32.56 21.8 53.49 21.8c7.36 0 14.53-.87 21.51-2.62 6.98-1.74 12.64-3.73 17.01-5.96 4.36-2.23 8.47-4.75 12.35-7.56 3.87-2.81 6.4-4.8 7.56-5.96s2.03-2.03 2.62-2.62l-20.35-26.16-4.07 4.36c-2.52 2.91-6.93 5.81-13.23 8.72s-13.13 4.36-20.49 4.36c-10.28 0-18.75-2.66-25.44-7.99s-10.81-11.87-12.36-19.62h103.19l1.45-15.99c0-20.35-6.79-37.3-20.35-50.87-13.57-13.56-30.52-20.35-50.87-20.35zm-33.43 59.6c2.33-7.75 6.4-14.05 12.21-18.9 5.81-4.84 12.89-7.27 21.22-7.27s15.36 2.47 21.07 7.41 9.35 11.19 10.9 18.75h-65.4z"/><path d="m1281.04 90.49h-5.81c-7.75 0-15.17 1.74-22.24 5.23-7.08 3.49-11.63 6.3-13.66 8.43s-3.63 3.88-4.8 5.23v-17.44h-39.24v142.43h39.24v-68.31c0-12.21 3-21.56 9.01-28.05s14.14-9.74 24.42-9.74c5.81 0 10.17.49 13.08 1.45v-39.24z"/><path d="m1422.31 122.9c-9.88-3.78-19.72-7.07-29.5-9.88-9.79-2.81-18.12-6.3-25-10.47-6.88-4.16-10.32-9.64-10.32-16.42 0-6.01 2.52-11.14 7.56-15.41 5.04-4.26 11.72-6.4 20.06-6.4 6.98 0 13.71 1.6 20.2 4.8s10.75 5.77 12.79 7.7c2.01 1.91 3.59 3.55 4.75 4.89l13.87-24.03 5.89-10.2c-1.19-1-2.57-2.07-4.16-3.21-3.78-2.71-8.14-5.38-13.08-7.99-4.94-2.62-11.29-4.89-19.04-6.83-7.75-1.93-15.8-2.91-24.13-2.91-21.12 0-38.27 5.81-51.45 17.44s-19.77 25.68-19.77 42.15c0 13.37 3.44 24.42 10.32 33.14s15.21 14.97 25 18.75c9.78 3.78 19.62 7.08 29.51 9.88 9.88 2.81 18.26 6.3 25.14 10.47s10.32 9.64 10.32 16.42c0 7.56-2.96 13.81-8.87 18.75s-14.1 7.41-24.56 7.41c-9.11 0-17.83-2.03-26.16-6.1s-13.71-7.31-16.13-9.74c-2.41-2.41-4.29-4.38-5.64-5.93l-13.83 23.96-5.44 9.43c1.59 1.43 3.5 2.98 5.72 4.66 4.36 3.3 9.4 6.54 15.12 9.74 5.71 3.2 12.98 5.96 21.8 8.28 8.82 2.33 17.97 3.49 27.47 3.49 24.03 0 42.88-5.96 56.54-17.88s20.49-27.28 20.49-46.07c0-13.37-3.44-24.42-10.32-33.14s-15.26-14.97-25.14-18.75z"/><path d="m1537.68 186.41-33.43-94.47h-40.69l55.23 140.98-4.36 10.17c-4.65 10.66-12.89 15.99-24.71 15.99-5.81 0-10.66-.97-14.53-2.91v34.88l2.91.87c1.93.77 4.99 1.55 9.16 2.33 4.17.77 8.38 1.16 12.64 1.16 23.84 0 42.24-17.44 55.23-52.32l56.68-151.16h-40.69l-33.43 94.47z"/><path d="m1708.74 89.03c-7.75 0-15.17 1.89-22.24 5.67-7.08 3.78-11.63 6.78-13.66 9.01s-3.63 4.12-4.8 5.67v-17.44h-39.24v142.43h39.24v-74.12c0-10.66 2.62-18.89 7.85-24.71 5.23-5.81 12.3-8.72 21.22-8.72 8.14 0 14.78 2.67 19.91 7.99 5.13 5.33 7.7 12.35 7.7 21.07v78.48h39.24v-82.84c0-19.18-5.14-34.4-15.41-45.64s-23.54-16.86-39.82-16.86z"/><path d="m1901.01 183.52-3.77 4.93c-2.72 3.1-6.98 6.2-12.79 9.3s-11.92 4.65-18.31 4.65c-10.27 0-19.14-3.82-26.6-11.48-7.46-7.65-11.19-16.91-11.19-27.76s3.73-20.1 11.19-27.76c7.46-7.65 16.32-11.48 26.6-11.48 6.4 0 12.5 1.74 18.31 5.23s9.59 6.3 11.34 8.43c1.74 2.13 2.99 3.86 3.77 5.21l16.42-28.45 2.14-3.71c-.95-.91-1.97-1.85-3.14-2.85-3.3-2.81-7.08-5.62-11.34-8.43s-9.74-5.23-16.42-7.27c-6.69-2.03-13.71-3.05-21.08-3.05-20.93 0-39 7.41-54.21 22.24s-22.82 32.12-22.82 51.89 7.6 37.06 22.82 51.89c15.21 14.83 33.28 22.24 54.21 22.24 7.36 0 14.39-1.07 21.08-3.2 6.68-2.13 12.11-4.46 16.28-6.98 4.16-2.52 8.04-5.42 11.63-8.72 1.54-1.41 2.82-2.64 3.88-3.7l-14.31-24.8-3.67-6.37z"/><path d="m373.25 140.55-44.88-77.73c-5.53-9.57-15.74-15.47-26.8-15.47h-46.24c-3.97 0-6.45 4.3-4.47 7.74l10.04 17.39c1.84 3.19 5.25 5.16 8.93 5.16h20.21c7.37 0 14.18 3.93 17.86 10.32l33.35 57.76c3.69 6.38 3.69 14.25 0 20.63l-33.35 57.76c-3.68 6.38-10.49 10.32-17.87 10.32h-66.7c-7.37 0-14.18-3.93-17.87-10.32l-72.13-124.94c-1.99-3.44.5-7.74 4.47-7.74h20.21c3.97 0 6.45-4.3 4.47-7.74l-10.04-17.39c-1.84-3.19-5.25-5.16-8.93-5.16h-43.64c-3.69 0-7.09 1.97-8.93 5.16l-21.82 37.8c-1.84 3.19-1.84 7.12 0 10.31l10.04 17.39c1.99 3.44 6.95 3.44 8.93 0l10.1-17.5c1.98-3.44 6.95-3.44 8.93 0l77.9 134.93c5.53 9.57 15.74 15.47 26.8 15.47h89.75c11.06 0 21.27-5.9 26.8-15.47l44.88-77.73c5.53-9.57 5.53-21.37 0-30.94z" fill="url(#a)"/><path d="m117.49 192.8c-1.84-3.19-5.25-5.16-8.93-5.16h-20.21c-7.37 0-14.18-3.93-17.86-10.32l-33.35-57.76c-3.69-6.38-3.69-14.25 0-20.63l33.35-57.76c3.69-6.38 10.5-10.32 17.87-10.31h66.7c7.37 0 14.18 3.93 17.86 10.32l72.13 124.94c1.99 3.44-.5 7.74-4.47 7.74h-20.21c-3.97 0-6.45 4.3-4.47 7.74l10.04 17.39c1.84 3.19 5.25 5.16 8.93 5.16h43.64c3.69 0 7.09-1.97 8.93-5.16l21.82-37.8c1.84-3.19 1.84-7.12 0-10.31l-10.04-17.39c-1.98-3.44-6.95-3.44-8.93 0l-10.1 17.5c-1.99 3.44-6.95 3.44-8.93 0l-77.89-134.94c-5.53-9.57-15.74-15.47-26.8-15.47h-89.75c-11.06 0-21.27 5.9-26.8 15.47l-44.87 77.73c-5.53 9.57-5.53 21.37 0 30.94l44.88 77.73c5.53 9.57 15.74 15.47 26.8 15.47h46.24c3.97 0 6.45-4.3 4.47-7.74l-10.04-17.39z" fill="url(#b)"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="Layer_1"
+   data-name="Layer 1"
+   viewBox="0 0 1020 493.84454"
+   version="1.1"
+   width="1020"
+   height="493.84454"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs4">
+    <style
+       id="style1">
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: url(#linear-gradient-2);
+      }
+
+      .cls-3 {
+        fill: url(#linear-gradient);
+      }
+    </style>
+    <linearGradient
+       id="linear-gradient"
+       x1="377.17001"
+       y1="88.110001"
+       x2="739.77002"
+       y2="297.45999"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         offset="0"
+         stop-color="#05f"
+         id="stop1" />
+      <stop
+         offset="1"
+         stop-color="#00d5ff"
+         id="stop2" />
+    </linearGradient>
+    <linearGradient
+       id="linear-gradient-2"
+       x1="646.83002"
+       y1="287.73999"
+       x2="284.23001"
+       y2="78.400002"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         offset="0"
+         stop-color="#05f"
+         id="stop3" />
+      <stop
+         offset="1"
+         stop-color="#a0f"
+         id="stop4" />
+    </linearGradient>
+  </defs>
+  <g
+     id="g14"
+     transform="translate(-2,-112.33546)">
+    <path
+       class="cls-1"
+       d="m 175.84,486.36 c -6.69,0 -12.46,2.56 -17.31,7.68 -4.85,5.12 -7.27,11.44 -7.27,18.95 0,7.51 2.42,13.83 7.27,18.95 4.84,5.12 10.62,7.68 17.31,7.68 6.69,0 12.46,-2.56 17.31,-7.68 4.85,-5.12 7.27,-11.44 7.27,-18.95 0,-7.51 -2.43,-13.83 -7.27,-18.95 -4.85,-5.12 -10.62,-7.68 -17.31,-7.68 z"
+       id="path4" />
+    <path
+       class="cls-1"
+       d="m 458.16,489.53 c -4.03,-3.48 -8.98,-5.22 -14.85,-5.22 -5.87,0 -10.86,1.71 -14.95,5.12 -4.1,3.42 -6.96,7.85 -8.6,13.32 h 46.09 c -1.1,-5.33 -3.66,-9.73 -7.68,-13.21 z"
+       id="path5" />
+    <path
+       class="cls-1"
+       d="M 61.4,447.44 H 32.72 v 40.97 H 61.4 c 6.15,0 11.27,-1.98 15.36,-5.94 4.1,-3.96 6.15,-8.81 6.15,-14.54 0,-5.73 -2.05,-10.58 -6.15,-14.54 -4.1,-3.96 -9.22,-5.94 -15.36,-5.94 z"
+       id="path6" />
+    <path
+       d="M 99.09,433.61 C 89.39,424.39 77.17,419.78 62.42,419.78 H 2 v 143.38 h 30.73 v -47.11 h 29.7 c 14.75,0 26.97,-4.61 36.67,-13.83 9.69,-9.22 14.54,-20.65 14.54,-34.31 0,-13.66 -4.85,-25.09 -14.54,-34.31 z m -22.33,48.85 c -4.1,3.96 -9.22,5.94 -15.36,5.94 H 32.72 V 447.43 H 61.4 c 6.15,0 11.27,1.98 15.36,5.94 4.1,3.96 6.15,8.81 6.15,14.54 0,5.73 -2.05,10.58 -6.15,14.54 z"
+       id="path7" />
+    <path
+       d="m 175.84,460.75 c -14.34,0 -26.8,5.22 -37.38,15.67 -10.58,10.45 -15.87,22.63 -15.87,36.56 0,13.93 5.29,26.12 15.87,36.56 10.58,10.45 23.04,15.67 37.38,15.67 14.34,0 26.8,-5.22 37.38,-15.67 10.58,-10.45 15.88,-22.63 15.88,-36.56 0,-13.93 -5.29,-26.12 -15.88,-36.56 -10.58,-10.45 -23.04,-15.67 -37.38,-15.67 z m 17.31,71.18 c -4.85,5.12 -10.62,7.68 -17.31,7.68 -6.69,0 -12.46,-2.56 -17.31,-7.68 -4.85,-5.12 -7.27,-11.44 -7.27,-18.95 0,-7.51 2.42,-13.83 7.27,-18.95 4.84,-5.12 10.62,-7.68 17.31,-7.68 6.69,0 12.46,2.56 17.31,7.68 4.85,5.12 7.27,11.44 7.27,18.95 0,7.51 -2.43,13.83 -7.27,18.95 z"
+       id="path8" />
+    <polygon
+       points="299.78,462.8 280.33,523.23 260.87,462.8 232.19,462.8 266.4,563.17 290.57,563.17 310.03,505.81 329.48,563.17 353.65,563.17 387.86,462.8 359.19,462.8 339.73,523.23 320.27,462.8 "
+       id="polygon8" />
+    <path
+       d="m 443.31,460.75 c -14.34,0 -26.63,5.12 -36.87,15.36 -10.24,10.24 -15.36,22.53 -15.36,36.87 0,14.34 5.19,26.63 15.57,36.87 10.38,10.24 22.94,15.36 37.69,15.36 5.19,0 10.24,-0.61 15.16,-1.84 4.92,-1.23 8.91,-2.63 11.98,-4.2 3.07,-1.57 5.97,-3.34 8.7,-5.32 2.73,-1.98 4.51,-3.38 5.33,-4.2 0.82,-0.82 1.43,-1.43 1.84,-1.84 l -14.34,-18.44 -2.87,3.07 c -1.78,2.05 -4.88,4.1 -9.32,6.15 -4.44,2.05 -9.25,3.07 -14.44,3.07 -7.24,0 -13.21,-1.88 -17.92,-5.63 -4.71,-3.75 -7.61,-8.36 -8.71,-13.83 h 72.72 l 1.02,-11.27 c 0,-14.34 -4.78,-26.29 -14.34,-35.85 -9.56,-9.56 -21.51,-14.34 -35.85,-14.34 z m -23.56,41.99 c 1.64,-5.46 4.51,-9.9 8.6,-13.32 4.1,-3.41 9.08,-5.12 14.95,-5.12 5.87,0 10.82,1.74 14.85,5.22 4.03,3.48 6.59,7.89 7.68,13.21 h -46.09 z"
+       id="path9" />
+    <path
+       d="m 572.45,461.78 h -4.1 c -5.46,0 -10.69,1.23 -15.67,3.69 -4.99,2.46 -8.19,4.44 -9.63,5.94 -1.43,1.5 -2.56,2.73 -3.38,3.69 v -12.29 h -27.65 v 100.37 h 27.65 v -48.14 c 0,-8.6 2.12,-15.19 6.35,-19.77 4.23,-4.57 9.97,-6.86 17.21,-6.86 4.1,0 7.17,0.34 9.22,1.02 z"
+       id="path10" />
+    <path
+       d="m 672,484.62 c -6.96,-2.66 -13.9,-4.98 -20.79,-6.96 -6.9,-1.98 -12.77,-4.44 -17.62,-7.37 -4.85,-2.93 -7.27,-6.79 -7.27,-11.57 0,-4.23 1.77,-7.85 5.33,-10.86 3.55,-3 8.26,-4.51 14.13,-4.51 4.92,0 9.66,1.13 14.24,3.38 4.57,2.25 7.58,4.06 9.01,5.43 1.42,1.35 2.53,2.5 3.35,3.45 l 9.77,-16.93 4.15,-7.19 c -0.84,-0.71 -1.81,-1.46 -2.93,-2.26 -2.66,-1.91 -5.74,-3.79 -9.22,-5.63 -3.48,-1.84 -7.96,-3.45 -13.42,-4.81 -5.46,-1.36 -11.13,-2.05 -17,-2.05 -14.88,0 -26.97,4.1 -36.25,12.29 -9.29,8.19 -13.93,18.1 -13.93,29.7 0,9.42 2.42,17.21 7.27,23.35 4.84,6.15 10.72,10.55 17.61,13.21 6.89,2.66 13.83,4.99 20.79,6.96 6.96,1.98 12.87,4.44 17.72,7.37 4.84,2.94 7.27,6.79 7.27,11.57 0,5.33 -2.08,9.73 -6.25,13.21 -4.17,3.48 -9.93,5.22 -17.31,5.22 -6.42,0 -12.57,-1.43 -18.44,-4.3 -5.87,-2.87 -9.66,-5.15 -11.37,-6.86 -1.7,-1.7 -3.02,-3.09 -3.97,-4.18 l -9.74,16.88 -3.83,6.65 c 1.12,1.01 2.47,2.1 4.03,3.28 3.07,2.32 6.62,4.61 10.65,6.86 4.03,2.25 9.15,4.2 15.36,5.84 6.21,1.64 12.67,2.46 19.36,2.46 16.93,0 30.21,-4.2 39.84,-12.6 9.63,-8.4 14.44,-19.22 14.44,-32.47 0,-9.42 -2.43,-17.21 -7.27,-23.35 -4.85,-6.15 -10.75,-10.55 -17.72,-13.21 z"
+       id="path11" />
+    <path
+       d="M 753.3,529.37 729.74,462.8 h -28.68 l 38.92,99.34 -3.07,7.17 c -3.28,7.51 -9.08,11.27 -17.41,11.27 -4.1,0 -7.51,-0.69 -10.24,-2.05 v 24.58 l 2.05,0.61 c 1.36,0.54 3.51,1.09 6.45,1.64 2.93,0.54 5.9,0.82 8.91,0.82 16.8,0 29.77,-12.29 38.92,-36.87 L 805.53,462.8 h -28.68 l -23.56,66.57 z"
+       id="path12" />
+    <path
+       d="m 873.84,460.75 c -5.46,0 -10.69,1.33 -15.67,3.99 -4.99,2.66 -8.19,4.78 -9.63,6.35 -1.43,1.57 -2.56,2.9 -3.38,3.99 v -12.29 h -27.65 v 100.37 h 27.65 v -52.23 c 0,-7.51 1.84,-13.31 5.53,-17.41 3.69,-4.1 8.67,-6.15 14.95,-6.15 5.74,0 10.41,1.88 14.03,5.63 3.62,3.76 5.43,8.7 5.43,14.85 v 55.31 h 27.65 v -58.38 c 0,-13.52 -3.62,-24.24 -10.86,-32.16 -7.24,-7.92 -16.59,-11.88 -28.06,-11.88 z"
+       id="path13" />
+    <path
+       d="m 1009.32,527.33 -2.65,3.47 c -1.91,2.19 -4.92,4.37 -9.01,6.55 -4.1,2.19 -8.4,3.28 -12.9,3.28 -7.24,0 -13.49,-2.69 -18.74,-8.09 -5.26,-5.39 -7.89,-11.91 -7.89,-19.56 0,-7.65 2.63,-14.17 7.89,-19.56 5.25,-5.39 11.5,-8.09 18.74,-8.09 4.51,0 8.81,1.23 12.9,3.69 4.1,2.46 6.76,4.44 7.99,5.94 1.22,1.5 2.1,2.72 2.65,3.67 l 11.57,-20.04 1.51,-2.61 c -0.67,-0.64 -1.39,-1.3 -2.21,-2.01 -2.32,-1.98 -4.99,-3.96 -7.99,-5.94 -3.01,-1.98 -6.86,-3.69 -11.57,-5.12 -4.71,-1.43 -9.66,-2.15 -14.85,-2.15 -14.75,0 -27.48,5.22 -38.2,15.67 -10.72,10.45 -16.08,22.63 -16.08,36.56 0,13.93 5.36,26.12 16.08,36.56 10.72,10.45 23.45,15.67 38.2,15.67 5.19,0 10.14,-0.75 14.85,-2.25 4.71,-1.5 8.53,-3.14 11.47,-4.92 2.93,-1.77 5.66,-3.82 8.19,-6.15 1.08,-1 1.99,-1.86 2.73,-2.6 l -10.09,-17.48 z"
+       id="path14" />
+  </g>
+  <g
+     id="g16"
+     transform="matrix(0.73897449,0,0,0.74055279,134.55546,-1.3255895)">
+    <path
+       class="cls-3"
+       d="M 771.39,199.08 708.14,89.53 C 700.35,76.04 685.95,67.72 670.37,67.72 H 605.2 c -5.6,0 -9.09,6.06 -6.29,10.9 l 14.15,24.5 c 2.6,4.5 7.4,7.27 12.59,7.27 h 28.48 c 10.39,0 19.98,5.54 25.18,14.54 l 47,81.41 c 5.19,8.99 5.19,20.08 0,29.07 l -47,81.41 c -5.19,9 -14.79,14.54 -25.18,14.54 h -94 c -10.39,0 -19.98,-5.54 -25.18,-14.54 L 433.29,140.74 c -2.8,-4.85 0.7,-10.9 6.29,-10.9 h 28.48 c 5.6,0 9.09,-6.06 6.3,-10.9 l -14.15,-24.5 c -2.6,-4.5 -7.4,-7.27 -12.59,-7.27 h -61.51 c -5.19,0 -9.99,2.77 -12.59,7.27 l -30.75,53.27 c -2.6,4.5 -2.6,10.04 0,14.54 l 14.15,24.5 c 2.8,4.85 9.79,4.85 12.59,0 l 14.24,-24.66 c 2.8,-4.85 9.79,-4.85 12.59,0 l 109.79,190.15 c 7.79,13.49 22.19,21.81 37.77,21.81 h 126.49 c 15.58,0 29.98,-8.31 37.77,-21.81 L 771.41,242.7 c 7.79,-13.49 7.79,-30.12 0,-43.61 z"
+       id="path15"
+       style="fill:url(#linear-gradient)" />
+    <path
+       class="cls-2"
+       d="m 410.94,272.72 c -2.6,-4.5 -7.39,-7.27 -12.59,-7.27 h -28.48 c -10.39,0 -19.98,-5.54 -25.18,-14.54 l -47,-81.41 c -5.19,-9 -5.19,-20.08 0,-29.07 l 47,-81.41 c 5.19,-9 14.79,-14.54 25.18,-14.54 h 94 c 10.39,0 19.98,5.54 25.18,14.54 L 590.71,235.1 c 2.8,4.85 -0.7,10.9 -6.29,10.9 h -28.48 c -5.6,0 -9.09,6.06 -6.29,10.9 l 14.15,24.5 c 2.6,4.5 7.4,7.27 12.59,7.27 h 61.51 c 5.19,0 9.99,-2.77 12.59,-7.27 l 30.75,-53.27 c 2.6,-4.5 2.6,-10.04 0,-14.54 l -14.15,-24.5 c -2.8,-4.85 -9.79,-4.85 -12.59,0 l -14.24,24.66 c -2.8,4.85 -9.79,4.85 -12.59,0 L 517.88,23.6 C 510.09,10.11 495.69,1.79 480.11,1.79 H 353.62 c -15.58,0 -29.98,8.31 -37.77,21.81 L 252.6,133.14 c -7.79,13.49 -7.79,30.12 0,43.61 l 63.25,109.55 c 7.79,13.49 22.19,21.81 37.77,21.81 h 65.17 c 5.6,0 9.09,-6.06 6.29,-10.9 l -14.15,-24.5 z"
+       id="path16"
+       style="fill:url(#linear-gradient-2)" />
+  </g>
+</svg>
diff --git a/src/images/powersync-white.svg b/src/images/powersync-white.svg
index 978f314e4..aa2d31bc5 100644
--- a/src/images/powersync-white.svg
+++ b/src/images/powersync-white.svg
@@ -1 +1,114 @@
-<svg viewBox="0 0 1920 296" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m609.28 50.52c-13.76-13.08-31.1-19.62-52.03-19.62h-85.75v203.48h43.6v-66.86h42.15c20.93 0 38.27-6.54 52.03-19.62s20.64-29.31 20.64-48.69-6.88-35.61-20.64-48.69zm-31.68 69.33c-5.81 5.62-13.08 8.43-21.8 8.43h-40.69v-58.14h40.69c8.72 0 15.99 2.81 21.8 8.43s8.72 12.5 8.72 20.64-2.91 15.02-8.72 20.64z"/><path d="m718.2 89.03c-20.35 0-38.03 7.41-53.05 22.24s-22.53 32.12-22.53 51.89 7.51 37.06 22.53 51.89 32.7 22.24 53.05 22.24 38.03-7.41 53.05-22.24 22.53-32.12 22.53-51.89-7.51-37.06-22.53-51.89c-15.02-14.82-32.7-22.24-53.05-22.24zm24.56 101.02c-6.88 7.27-15.07 10.9-24.56 10.9s-17.69-3.63-24.56-10.9c-6.88-7.27-10.32-16.23-10.32-26.89s3.44-19.62 10.32-26.89 15.07-10.9 24.56-10.9 17.68 3.63 24.56 10.9 10.32 16.23 10.32 26.89-3.44 19.62-10.32 26.89z"/><path d="m950.77 177.69-27.61-85.75h-29.07l-27.62 85.75-27.61-85.75h-40.7l48.55 142.44h34.3l27.61-81.4 27.62 81.4h34.3l48.54-142.44h-40.69z"/><path d="m1097.77 89.03c-20.35 0-37.79 7.27-52.32 21.8s-21.8 31.98-21.8 52.32 7.36 37.79 22.09 52.32 32.56 21.8 53.49 21.8c7.36 0 14.53-.87 21.51-2.62 6.98-1.74 12.64-3.73 17.01-5.96 4.36-2.23 8.47-4.75 12.35-7.56 3.87-2.81 6.4-4.8 7.56-5.96s2.03-2.03 2.62-2.62l-20.35-26.16-4.07 4.36c-2.52 2.91-6.93 5.81-13.23 8.72s-13.13 4.36-20.49 4.36c-10.28 0-18.75-2.66-25.44-7.99s-10.81-11.87-12.36-19.62h103.19l1.45-15.99c0-20.35-6.79-37.3-20.35-50.87-13.57-13.56-30.52-20.35-50.87-20.35zm-33.43 59.6c2.33-7.75 6.4-14.05 12.21-18.9 5.81-4.84 12.89-7.27 21.22-7.27s15.36 2.47 21.07 7.41 9.35 11.19 10.9 18.75h-65.4z"/><path d="m1281.04 90.49h-5.81c-7.75 0-15.17 1.74-22.24 5.23-7.08 3.49-11.63 6.3-13.66 8.43s-3.63 3.88-4.8 5.23v-17.44h-39.24v142.43h39.24v-68.31c0-12.21 3-21.56 9.01-28.05s14.14-9.74 24.42-9.74c5.81 0 10.17.49 13.08 1.45v-39.24z"/><path d="m1422.31 122.9c-9.88-3.78-19.72-7.07-29.5-9.88-9.79-2.81-18.12-6.3-25-10.47-6.88-4.16-10.32-9.64-10.32-16.42 0-6.01 2.52-11.14 7.56-15.41 5.04-4.26 11.72-6.4 20.06-6.4 6.98 0 13.71 1.6 20.2 4.8s10.75 5.77 12.79 7.7c2.01 1.91 3.59 3.55 4.75 4.89l13.87-24.03 5.89-10.2c-1.19-1-2.57-2.07-4.16-3.21-3.78-2.71-8.14-5.38-13.08-7.99-4.94-2.62-11.29-4.89-19.04-6.83-7.75-1.93-15.8-2.91-24.13-2.91-21.12 0-38.27 5.81-51.45 17.44s-19.77 25.68-19.77 42.15c0 13.37 3.44 24.42 10.32 33.14s15.21 14.97 25 18.75c9.78 3.78 19.62 7.08 29.51 9.88 9.88 2.81 18.26 6.3 25.14 10.47s10.32 9.64 10.32 16.42c0 7.56-2.96 13.81-8.87 18.75s-14.1 7.41-24.56 7.41c-9.11 0-17.83-2.03-26.16-6.1s-13.71-7.31-16.13-9.74c-2.41-2.41-4.29-4.38-5.64-5.93l-13.83 23.96-5.44 9.43c1.59 1.43 3.5 2.98 5.72 4.66 4.36 3.3 9.4 6.54 15.12 9.74 5.71 3.2 12.98 5.96 21.8 8.28 8.82 2.33 17.97 3.49 27.47 3.49 24.03 0 42.88-5.96 56.54-17.88s20.49-27.28 20.49-46.07c0-13.37-3.44-24.42-10.32-33.14s-15.26-14.97-25.14-18.75z"/><path d="m1537.68 186.41-33.43-94.47h-40.69l55.23 140.98-4.36 10.17c-4.65 10.66-12.89 15.99-24.71 15.99-5.81 0-10.66-.97-14.53-2.91v34.88l2.91.87c1.93.77 4.99 1.55 9.16 2.33 4.17.77 8.38 1.16 12.64 1.16 23.84 0 42.24-17.44 55.23-52.32l56.68-151.16h-40.69l-33.43 94.47z"/><path d="m1708.74 89.03c-7.75 0-15.17 1.89-22.24 5.67-7.08 3.78-11.63 6.78-13.66 9.01s-3.63 4.12-4.8 5.67v-17.44h-39.24v142.43h39.24v-74.12c0-10.66 2.62-18.89 7.85-24.71 5.23-5.81 12.3-8.72 21.22-8.72 8.14 0 14.78 2.67 19.91 7.99 5.13 5.33 7.7 12.35 7.7 21.07v78.48h39.24v-82.84c0-19.18-5.14-34.4-15.41-45.64s-23.54-16.86-39.82-16.86z"/><path d="m1901.01 183.52-3.77 4.93c-2.72 3.1-6.98 6.2-12.79 9.3s-11.92 4.65-18.31 4.65c-10.27 0-19.14-3.82-26.6-11.48-7.46-7.65-11.19-16.91-11.19-27.76s3.73-20.1 11.19-27.76c7.46-7.65 16.32-11.48 26.6-11.48 6.4 0 12.5 1.74 18.31 5.23s9.59 6.3 11.34 8.43c1.74 2.13 2.99 3.86 3.77 5.21l16.42-28.45 2.14-3.71c-.95-.91-1.97-1.85-3.14-2.85-3.3-2.81-7.08-5.62-11.34-8.43s-9.74-5.23-16.42-7.27c-6.69-2.03-13.71-3.05-21.08-3.05-20.93 0-39 7.41-54.21 22.24s-22.82 32.12-22.82 51.89 7.6 37.06 22.82 51.89c15.21 14.83 33.28 22.24 54.21 22.24 7.36 0 14.39-1.07 21.08-3.2 6.68-2.13 12.11-4.46 16.28-6.98 4.16-2.52 8.04-5.42 11.63-8.72 1.54-1.41 2.82-2.64 3.88-3.7l-14.31-24.8-3.67-6.37z"/><path d="m373.25 140.55-44.88-77.73c-5.53-9.57-15.74-15.47-26.8-15.47h-46.24c-3.97 0-6.45 4.3-4.47 7.74l10.04 17.39c1.84 3.19 5.25 5.16 8.93 5.16h20.21c7.37 0 14.18 3.93 17.86 10.32l33.35 57.76c3.69 6.38 3.69 14.25 0 20.63l-33.35 57.76c-3.68 6.38-10.49 10.32-17.87 10.32h-66.7c-7.37 0-14.18-3.93-17.87-10.32l-72.13-124.94c-1.99-3.44.5-7.74 4.47-7.74h20.21c3.97 0 6.45-4.3 4.47-7.74l-10.04-17.39c-1.84-3.19-5.25-5.16-8.93-5.16h-43.64c-3.69 0-7.09 1.97-8.93 5.16l-21.82 37.8c-1.84 3.19-1.84 7.12 0 10.31l10.04 17.39c1.99 3.44 6.95 3.44 8.93 0l10.1-17.5c1.98-3.44 6.95-3.44 8.93 0l77.9 134.93c5.53 9.57 15.74 15.47 26.8 15.47h89.75c11.06 0 21.27-5.9 26.8-15.47l44.88-77.73c5.53-9.57 5.53-21.37 0-30.94z"/><path d="m117.49 192.8c-1.84-3.19-5.25-5.16-8.93-5.16h-20.21c-7.37 0-14.18-3.93-17.86-10.32l-33.35-57.76c-3.69-6.38-3.69-14.25 0-20.63l33.35-57.76c3.69-6.38 10.5-10.32 17.87-10.31h66.7c7.37 0 14.18 3.93 17.86 10.32l72.13 124.94c1.99 3.44-.5 7.74-4.47 7.74h-20.21c-3.97 0-6.45 4.3-4.47 7.74l10.04 17.39c1.84 3.19 5.25 5.16 8.93 5.16h43.64c3.69 0 7.09-1.97 8.93-5.16l21.82-37.8c1.84-3.19 1.84-7.12 0-10.31l-10.04-17.39c-1.98-3.44-6.95-3.44-8.93 0l-10.1 17.5c-1.99 3.44-6.95 3.44-8.93 0l-77.89-134.94c-5.53-9.57-15.74-15.47-26.8-15.47h-89.75c-11.06 0-21.27 5.9-26.8 15.47l-44.87 77.73c-5.53 9.57-5.53 21.37 0 30.94l44.88 77.73c5.53 9.57 15.74 15.47 26.8 15.47h46.24c3.97 0 6.45-4.3 4.47-7.74l-10.04-17.39z"/></g></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="Layer_1"
+   data-name="Layer 1"
+   viewBox="0 0 1020 478.71728"
+   version="1.1"
+   width="1020"
+   height="478.71729"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs4">
+    <style
+       id="style1">
+      .cls-1 {
+        fill: url(#linear-gradient-2);
+      }
+
+      .cls-2 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+    </style>
+    <linearGradient
+       id="linear-gradient"
+       x1="377.17001"
+       y1="88.110001"
+       x2="739.77002"
+       y2="297.45999"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         offset="0"
+         stop-color="#05f"
+         id="stop1" />
+      <stop
+         offset="1"
+         stop-color="#00d5ff"
+         id="stop2" />
+    </linearGradient>
+    <linearGradient
+       id="linear-gradient-2"
+       x1="646.83002"
+       y1="287.73999"
+       x2="284.23001"
+       y2="78.400002"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         offset="0"
+         stop-color="#05f"
+         id="stop3" />
+      <stop
+         offset="1"
+         stop-color="#a0f"
+         id="stop4" />
+    </linearGradient>
+  </defs>
+  <g
+     id="g11"
+     transform="translate(-2,-127.46273)">
+    <path
+       class="cls-3"
+       d="M 99.09,433.61 C 89.39,424.39 77.17,419.78 62.42,419.78 H 2 v 143.38 h 30.73 v -47.11 h 29.7 c 14.75,0 26.97,-4.61 36.67,-13.83 9.69,-9.22 14.54,-20.65 14.54,-34.31 0,-13.66 -4.85,-25.09 -14.54,-34.31 z m -22.33,48.85 c -4.1,3.96 -9.22,5.94 -15.36,5.94 H 32.72 V 447.43 H 61.4 c 6.15,0 11.27,1.98 15.36,5.94 4.1,3.96 6.15,8.81 6.15,14.54 0,5.73 -2.05,10.58 -6.15,14.54 z"
+       id="path4" />
+    <path
+       class="cls-3"
+       d="m 175.84,460.75 c -14.34,0 -26.8,5.22 -37.38,15.67 -10.58,10.45 -15.87,22.63 -15.87,36.56 0,13.93 5.29,26.12 15.87,36.56 10.58,10.45 23.04,15.67 37.38,15.67 14.34,0 26.8,-5.22 37.38,-15.67 10.58,-10.45 15.88,-22.63 15.88,-36.56 0,-13.93 -5.29,-26.12 -15.88,-36.56 -10.58,-10.45 -23.04,-15.67 -37.38,-15.67 z m 17.31,71.18 c -4.85,5.12 -10.62,7.68 -17.31,7.68 -6.69,0 -12.46,-2.56 -17.31,-7.68 -4.85,-5.12 -7.27,-11.44 -7.27,-18.95 0,-7.51 2.42,-13.83 7.27,-18.95 4.84,-5.12 10.62,-7.68 17.31,-7.68 6.69,0 12.46,2.56 17.31,7.68 4.85,5.12 7.27,11.44 7.27,18.95 0,7.51 -2.43,13.83 -7.27,18.95 z"
+       id="path5" />
+    <polygon
+       class="cls-3"
+       points="260.87,462.8 232.19,462.8 266.4,563.17 290.57,563.17 310.03,505.81 329.48,563.17 353.65,563.17 387.86,462.8 359.19,462.8 339.73,523.23 320.27,462.8 299.78,462.8 280.33,523.23 "
+       id="polygon5" />
+    <path
+       class="cls-3"
+       d="m 443.31,460.75 c -14.34,0 -26.63,5.12 -36.87,15.36 -10.24,10.24 -15.36,22.53 -15.36,36.87 0,14.34 5.19,26.63 15.57,36.87 10.38,10.24 22.94,15.36 37.69,15.36 5.19,0 10.24,-0.61 15.16,-1.84 4.92,-1.23 8.91,-2.63 11.98,-4.2 3.07,-1.57 5.97,-3.34 8.7,-5.32 2.73,-1.98 4.51,-3.38 5.33,-4.2 0.82,-0.82 1.43,-1.43 1.84,-1.84 l -14.34,-18.44 -2.87,3.07 c -1.78,2.05 -4.88,4.1 -9.32,6.15 -4.44,2.05 -9.25,3.07 -14.44,3.07 -7.24,0 -13.21,-1.88 -17.92,-5.63 -4.71,-3.75 -7.61,-8.36 -8.71,-13.83 h 72.72 l 1.02,-11.27 c 0,-14.34 -4.78,-26.29 -14.34,-35.85 -9.56,-9.56 -21.51,-14.34 -35.85,-14.34 z m -23.56,41.99 c 1.64,-5.46 4.51,-9.9 8.6,-13.32 4.1,-3.41 9.08,-5.12 14.95,-5.12 5.87,0 10.82,1.74 14.85,5.22 4.03,3.48 6.59,7.89 7.68,13.21 h -46.09 z"
+       id="path6" />
+    <path
+       class="cls-3"
+       d="m 572.45,461.78 h -4.1 c -5.46,0 -10.69,1.23 -15.67,3.69 -4.99,2.46 -8.19,4.44 -9.63,5.94 -1.43,1.5 -2.56,2.73 -3.38,3.69 v -12.29 h -27.65 v 100.37 h 27.65 v -48.14 c 0,-8.6 2.12,-15.19 6.35,-19.77 4.23,-4.57 9.97,-6.86 17.21,-6.86 4.1,0 7.17,0.34 9.22,1.02 z"
+       id="path7" />
+    <path
+       class="cls-3"
+       d="m 672,484.62 c -6.96,-2.66 -13.9,-4.98 -20.79,-6.96 -6.9,-1.98 -12.77,-4.44 -17.62,-7.37 -4.85,-2.93 -7.27,-6.79 -7.27,-11.57 0,-4.23 1.77,-7.85 5.33,-10.86 3.55,-3 8.26,-4.51 14.13,-4.51 4.92,0 9.66,1.13 14.24,3.38 4.57,2.25 7.58,4.06 9.01,5.43 1.42,1.35 2.53,2.5 3.35,3.45 l 9.77,-16.93 4.15,-7.19 c -0.84,-0.71 -1.81,-1.46 -2.93,-2.26 -2.66,-1.91 -5.74,-3.79 -9.22,-5.63 -3.48,-1.84 -7.96,-3.45 -13.42,-4.81 -5.46,-1.36 -11.13,-2.05 -17,-2.05 -14.88,0 -26.97,4.1 -36.25,12.29 -9.29,8.19 -13.93,18.1 -13.93,29.7 0,9.42 2.42,17.21 7.27,23.35 4.84,6.15 10.72,10.55 17.61,13.21 6.89,2.66 13.83,4.99 20.79,6.96 6.96,1.98 12.87,4.44 17.72,7.37 4.84,2.94 7.27,6.79 7.27,11.57 0,5.33 -2.08,9.73 -6.25,13.21 -4.17,3.48 -9.93,5.22 -17.31,5.22 -6.42,0 -12.57,-1.43 -18.44,-4.3 -5.87,-2.87 -9.66,-5.15 -11.37,-6.86 -1.7,-1.7 -3.02,-3.09 -3.97,-4.18 l -9.74,16.88 -3.83,6.65 c 1.12,1.01 2.47,2.1 4.03,3.28 3.07,2.32 6.62,4.61 10.65,6.86 4.03,2.25 9.15,4.2 15.36,5.84 6.21,1.64 12.67,2.46 19.36,2.46 16.93,0 30.21,-4.2 39.84,-12.6 9.63,-8.4 14.44,-19.22 14.44,-32.47 0,-9.42 -2.43,-17.21 -7.27,-23.35 -4.85,-6.15 -10.75,-10.55 -17.72,-13.21 z"
+       id="path8" />
+    <path
+       class="cls-3"
+       d="M 753.3,529.37 729.74,462.8 h -28.68 l 38.92,99.34 -3.07,7.17 c -3.28,7.51 -9.08,11.27 -17.41,11.27 -4.1,0 -7.51,-0.69 -10.24,-2.05 v 24.58 l 2.05,0.61 c 1.36,0.54 3.51,1.09 6.45,1.64 2.93,0.54 5.9,0.82 8.91,0.82 16.8,0 29.77,-12.29 38.92,-36.87 L 805.53,462.8 h -28.68 l -23.56,66.57 z"
+       id="path9" />
+    <path
+       class="cls-3"
+       d="m 873.84,460.75 c -5.46,0 -10.69,1.33 -15.67,3.99 -4.99,2.66 -8.19,4.78 -9.63,6.35 -1.43,1.57 -2.56,2.9 -3.38,3.99 v -12.29 h -27.65 v 100.37 h 27.65 v -52.23 c 0,-7.51 1.84,-13.31 5.53,-17.41 3.69,-4.1 8.67,-6.15 14.95,-6.15 5.74,0 10.41,1.88 14.03,5.63 3.62,3.76 5.43,8.7 5.43,14.85 v 55.31 h 27.65 v -58.38 c 0,-13.52 -3.62,-24.24 -10.86,-32.16 -7.24,-7.92 -16.59,-11.88 -28.06,-11.88 z"
+       id="path10" />
+    <path
+       class="cls-3"
+       d="m 1009.32,527.33 -2.65,3.47 c -1.91,2.19 -4.92,4.37 -9.01,6.55 -4.1,2.19 -8.4,3.28 -12.9,3.28 -7.24,0 -13.49,-2.69 -18.74,-8.09 -5.26,-5.39 -7.89,-11.91 -7.89,-19.56 0,-7.65 2.63,-14.17 7.89,-19.56 5.25,-5.39 11.5,-8.09 18.74,-8.09 4.51,0 8.81,1.23 12.9,3.69 4.1,2.46 6.76,4.44 7.99,5.94 1.22,1.5 2.1,2.72 2.65,3.67 l 11.57,-20.04 1.51,-2.61 c -0.67,-0.64 -1.39,-1.3 -2.21,-2.01 -2.32,-1.98 -4.99,-3.96 -7.99,-5.94 -3.01,-1.98 -6.86,-3.69 -11.57,-5.12 -4.71,-1.43 -9.66,-2.15 -14.85,-2.15 -14.75,0 -27.48,5.22 -38.2,15.67 -10.72,10.45 -16.08,22.63 -16.08,36.56 0,13.93 5.36,26.12 16.08,36.56 10.72,10.45 23.45,15.67 38.2,15.67 5.19,0 10.14,-0.75 14.85,-2.25 4.71,-1.5 8.53,-3.14 11.47,-4.92 2.93,-1.77 5.66,-3.82 8.19,-6.15 1.08,-1 1.99,-1.86 2.73,-2.6 l -10.09,-17.48 z"
+       id="path11" />
+  </g>
+  <g
+     id="g13"
+     transform="matrix(0.70826561,0,0,0.70304235,142.13311,-1.2584458)">
+    <path
+       class="cls-2"
+       d="M 771.39,199.08 708.14,89.53 C 700.35,76.04 685.95,67.72 670.37,67.72 H 605.2 c -5.6,0 -9.09,6.06 -6.29,10.9 l 14.15,24.5 c 2.6,4.5 7.4,7.27 12.59,7.27 h 28.48 c 10.39,0 19.98,5.54 25.18,14.54 l 47,81.41 c 5.19,8.99 5.19,20.08 0,29.07 l -47,81.41 c -5.19,9 -14.79,14.54 -25.18,14.54 h -94 c -10.39,0 -19.98,-5.54 -25.18,-14.54 L 433.29,140.74 c -2.8,-4.85 0.7,-10.9 6.29,-10.9 h 28.48 c 5.6,0 9.09,-6.06 6.3,-10.9 l -14.15,-24.5 c -2.6,-4.5 -7.4,-7.27 -12.59,-7.27 h -61.51 c -5.19,0 -9.99,2.77 -12.59,7.27 l -30.75,53.27 c -2.6,4.5 -2.6,10.04 0,14.54 l 14.15,24.5 c 2.8,4.85 9.79,4.85 12.59,0 l 14.24,-24.66 c 2.8,-4.85 9.79,-4.85 12.59,0 l 109.79,190.15 c 7.79,13.49 22.19,21.81 37.77,21.81 h 126.49 c 15.58,0 29.98,-8.31 37.77,-21.81 L 771.41,242.7 c 7.79,-13.49 7.79,-30.12 0,-43.61 z"
+       id="path12"
+       style="fill:url(#linear-gradient)" />
+    <path
+       class="cls-1"
+       d="m 410.94,272.72 c -2.6,-4.5 -7.39,-7.27 -12.59,-7.27 h -28.48 c -10.39,0 -19.98,-5.54 -25.18,-14.54 l -47,-81.41 c -5.19,-9 -5.19,-20.08 0,-29.07 l 47,-81.41 c 5.19,-9 14.79,-14.54 25.18,-14.54 h 94 c 10.39,0 19.98,5.54 25.18,14.54 L 590.71,235.1 c 2.8,4.85 -0.7,10.9 -6.29,10.9 h -28.48 c -5.6,0 -9.09,6.06 -6.29,10.9 l 14.15,24.5 c 2.6,4.5 7.4,7.27 12.59,7.27 h 61.51 c 5.19,0 9.99,-2.77 12.59,-7.27 l 30.75,-53.27 c 2.6,-4.5 2.6,-10.04 0,-14.54 l -14.15,-24.5 c -2.8,-4.85 -9.79,-4.85 -12.59,0 l -14.24,24.66 c -2.8,4.85 -9.79,4.85 -12.59,0 L 517.88,23.6 C 510.09,10.11 495.69,1.79 480.11,1.79 H 353.62 c -15.58,0 -29.98,8.31 -37.77,21.81 L 252.6,133.14 c -7.79,13.49 -7.79,30.12 0,43.61 l 63.25,109.55 c 7.79,13.49 22.19,21.81 37.77,21.81 h 65.17 c 5.6,0 9.09,-6.06 6.29,-10.9 l -14.15,-24.5 z"
+       id="path13"
+       style="fill:url(#linear-gradient-2)" />
+  </g>
+</svg>
diff --git a/src/images/railway-black.svg b/src/images/railway-black.svg
new file mode 100644
index 000000000..c566f7bef
--- /dev/null
+++ b/src/images/railway-black.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="3056px" height="704px" viewBox="0 0 3056 704" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>railway-black</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="railway-black" transform="translate(-320, -160)" fill="#000000" fill-rule="nonzero">
+            <path d="M323.27,461.245 C321.592697,472.999446 320.501347,484.830075 320,496.693 L854.737,496.693 C852.869,493.045 850.361,489.756 847.831,486.537 C756.414,368.431 707.238,378.671 636.893,375.671 C613.44,374.706 597.534,374.319 504.18,374.319 C454.215,374.319 399.894,374.446 346.998,374.586 C340.151,393.069 333.547,410.985 330.331,425.558 L604.349,425.558 L604.349,461.245 L323.27,461.245 Z M858.951,532.416 L320.275,532.416 C320.839,541.938 321.727,551.334 323.009,560.603 L820.339,560.603 C842.51,560.603 854.92,548.024 858.951,532.416 Z M350.949,657.96 C350.949,657.96 433.397,860.402 671.629,864 C814.018,864 936.365,779.433 991.939,657.96 L350.949,657.96 Z" id="Shape"></path>
+            <path d="M671.624,160 C539.968,160 425.401,232.298 364.901,339.17 C412.18,339.072 504.26,339.015 504.26,339.015 L504.281,339.015 L504.281,338.98 C613.118,338.98 617.163,339.466 638.425,340.354 L651.589,340.84 C697.446,342.368 753.809,347.291 798.157,380.845 C822.231,399.044 856.988,439.211 877.707,467.827 C896.861,494.296 902.372,524.722 889.349,553.874 C877.361,580.666 851.569,596.647 820.335,596.647 L331.474,596.647 C331.474,596.647 334.384,608.983 338.748,622.6 L1006.06,622.6 C1017.90644,586.979212 1023.96336,549.689012 1024,512.15 C1024.01,317.682 866.241,160 671.624,160 L671.624,160 Z M1378.13,659 L1461.17,659 L1461.17,519.781 L1521.76,519.781 L1596.17,659 L1687.83,659 L1604.41,506.358 C1649.09,487.182 1673.83,448.254 1673.83,394.561 C1673.83,316.514 1622.25,266.273 1533.08,266.273 L1378.13,266.273 L1378.13,659 Z M1461.17,453.048 L1461.17,334.156 L1517.16,334.156 C1565.1,334.156 1588.3,355.442 1588.3,394.561 C1588.3,433.489 1565.1,453.048 1517.54,453.048 L1461.17,453.048 Z M1814.97,664.561 C1858.5,664.561 1886.68,645.577 1901.07,618.155 L1903.37,618.155 L1903.37,659 L1980.84,659 L1980.84,460.335 C1980.84,390.151 1921.39,360.619 1855.81,360.619 C1785.24,360.619 1738.84,394.369 1727.52,448.062 L1803.08,454.199 C1808.64,434.639 1826.09,420.257 1855.43,420.257 C1883.23,420.257 1899.15,434.256 1899.15,458.418 L1899.15,459.568 C1899.15,478.553 1879.01,481.045 1827.81,486.031 C1769.52,491.401 1717.17,510.96 1717.17,576.734 C1717.17,635.03 1758.78,664.561 1814.97,664.561 L1814.97,664.561 Z M1838.36,608.183 C1813.24,608.183 1795.21,596.486 1795.21,574.05 C1795.21,551.038 1814.2,539.724 1842.96,535.697 C1860.8,533.205 1889.94,528.986 1899.72,522.466 L1899.72,553.723 C1899.72,584.597 1874.22,608.183 1838.36,608.183 Z M2044.22,659 L2125.91,659 L2125.91,364.455 L2044.22,364.455 L2044.22,659 Z M2085.25,326.486 C2109.61,326.486 2129.55,307.885 2129.55,285.065 C2129.55,262.438 2109.61,243.837 2085.25,243.837 C2061.09,243.837 2041.15,262.438 2041.15,285.065 C2041.15,307.885 2061.09,326.486 2085.25,326.486 Z M2273.04,266.273 L2191.35,266.273 L2191.35,659 L2273.04,659 L2273.04,266.273 Z M2396.58,659 L2482.87,659 L2533.5,473.759 L2537.14,473.759 L2587.76,659 L2674.25,659 L2754.21,364.455 L2671.76,364.455 L2626.88,561.202 L2624.39,561.202 L2576.07,364.455 L2494.95,364.455 L2447.39,562.352 L2444.71,562.352 L2399.07,364.455 L2316.42,364.455 L2396.58,659 Z M2881.78,664.561 C2925.31,664.561 2953.5,645.577 2967.88,618.155 L2970.18,618.155 L2970.18,659 L3047.66,659 L3047.66,460.335 C3047.66,390.151 2988.21,360.619 2922.63,360.619 C2852.06,360.619 2805.65,394.369 2794.34,448.062 L2869.89,454.199 C2875.45,434.639 2892.9,420.257 2922.24,420.257 C2950.05,420.257 2965.97,434.256 2965.97,458.418 L2965.97,459.568 C2965.97,478.553 2945.83,481.045 2894.63,486.031 C2836.33,491.401 2783.98,510.96 2783.98,576.734 C2783.98,635.03 2825.6,664.561 2881.78,664.561 L2881.78,664.561 Z M2905.18,608.183 C2880.06,608.183 2862.03,596.486 2862.03,574.05 C2862.03,551.038 2881.02,539.724 2909.78,535.697 C2927.61,533.205 2956.76,528.986 2966.54,522.466 L2966.54,553.723 C2966.54,584.597 2941.04,608.183 2905.18,608.183 Z M3150.92,769.455 C3211.71,769.455 3243.92,738.389 3260.61,690.832 L3375.09,364.838 L3288.6,364.455 L3227.05,580.761 L3223.98,580.761 L3163,364.455 L3077.09,364.455 L3182.75,667.438 L3177.96,679.902 C3167.22,707.516 3146.7,708.858 3117.94,700.037 L3099.53,761.017 C3111.22,766.003 3130.21,769.455 3150.92,769.455 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/railway-white.svg b/src/images/railway-white.svg
new file mode 100644
index 000000000..96b2466d8
--- /dev/null
+++ b/src/images/railway-white.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="3056px" height="704px" viewBox="0 0 3056 704" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>railway-white</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="railway-white" transform="translate(-320, -160)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M323.27,461.245 C321.592697,472.999446 320.501347,484.830075 320,496.693 L854.737,496.693 C852.869,493.045 850.361,489.756 847.831,486.537 C756.414,368.431 707.238,378.671 636.893,375.671 C613.44,374.706 597.534,374.319 504.18,374.319 C454.215,374.319 399.894,374.446 346.998,374.586 C340.151,393.069 333.547,410.985 330.331,425.558 L604.349,425.558 L604.349,461.245 L323.27,461.245 Z M858.951,532.416 L320.275,532.416 C320.839,541.938 321.727,551.334 323.009,560.603 L820.339,560.603 C842.51,560.603 854.92,548.024 858.951,532.416 Z M350.949,657.96 C350.949,657.96 433.397,860.402 671.629,864 C814.018,864 936.365,779.433 991.939,657.96 L350.949,657.96 Z" id="Shape"></path>
+            <path d="M671.624,160 C539.968,160 425.401,232.298 364.901,339.17 C412.18,339.072 504.26,339.015 504.26,339.015 L504.281,339.015 L504.281,338.98 C613.118,338.98 617.163,339.466 638.425,340.354 L651.589,340.84 C697.446,342.368 753.809,347.291 798.157,380.845 C822.231,399.044 856.988,439.211 877.707,467.827 C896.861,494.296 902.372,524.722 889.349,553.874 C877.361,580.666 851.569,596.647 820.335,596.647 L331.474,596.647 C331.474,596.647 334.384,608.983 338.748,622.6 L1006.06,622.6 C1017.90644,586.979212 1023.96336,549.689012 1024,512.15 C1024.01,317.682 866.241,160 671.624,160 L671.624,160 Z M1378.13,659 L1461.17,659 L1461.17,519.781 L1521.76,519.781 L1596.17,659 L1687.83,659 L1604.41,506.358 C1649.09,487.182 1673.83,448.254 1673.83,394.561 C1673.83,316.514 1622.25,266.273 1533.08,266.273 L1378.13,266.273 L1378.13,659 Z M1461.17,453.048 L1461.17,334.156 L1517.16,334.156 C1565.1,334.156 1588.3,355.442 1588.3,394.561 C1588.3,433.489 1565.1,453.048 1517.54,453.048 L1461.17,453.048 Z M1814.97,664.561 C1858.5,664.561 1886.68,645.577 1901.07,618.155 L1903.37,618.155 L1903.37,659 L1980.84,659 L1980.84,460.335 C1980.84,390.151 1921.39,360.619 1855.81,360.619 C1785.24,360.619 1738.84,394.369 1727.52,448.062 L1803.08,454.199 C1808.64,434.639 1826.09,420.257 1855.43,420.257 C1883.23,420.257 1899.15,434.256 1899.15,458.418 L1899.15,459.568 C1899.15,478.553 1879.01,481.045 1827.81,486.031 C1769.52,491.401 1717.17,510.96 1717.17,576.734 C1717.17,635.03 1758.78,664.561 1814.97,664.561 L1814.97,664.561 Z M1838.36,608.183 C1813.24,608.183 1795.21,596.486 1795.21,574.05 C1795.21,551.038 1814.2,539.724 1842.96,535.697 C1860.8,533.205 1889.94,528.986 1899.72,522.466 L1899.72,553.723 C1899.72,584.597 1874.22,608.183 1838.36,608.183 Z M2044.22,659 L2125.91,659 L2125.91,364.455 L2044.22,364.455 L2044.22,659 Z M2085.25,326.486 C2109.61,326.486 2129.55,307.885 2129.55,285.065 C2129.55,262.438 2109.61,243.837 2085.25,243.837 C2061.09,243.837 2041.15,262.438 2041.15,285.065 C2041.15,307.885 2061.09,326.486 2085.25,326.486 Z M2273.04,266.273 L2191.35,266.273 L2191.35,659 L2273.04,659 L2273.04,266.273 Z M2396.58,659 L2482.87,659 L2533.5,473.759 L2537.14,473.759 L2587.76,659 L2674.25,659 L2754.21,364.455 L2671.76,364.455 L2626.88,561.202 L2624.39,561.202 L2576.07,364.455 L2494.95,364.455 L2447.39,562.352 L2444.71,562.352 L2399.07,364.455 L2316.42,364.455 L2396.58,659 Z M2881.78,664.561 C2925.31,664.561 2953.5,645.577 2967.88,618.155 L2970.18,618.155 L2970.18,659 L3047.66,659 L3047.66,460.335 C3047.66,390.151 2988.21,360.619 2922.63,360.619 C2852.06,360.619 2805.65,394.369 2794.34,448.062 L2869.89,454.199 C2875.45,434.639 2892.9,420.257 2922.24,420.257 C2950.05,420.257 2965.97,434.256 2965.97,458.418 L2965.97,459.568 C2965.97,478.553 2945.83,481.045 2894.63,486.031 C2836.33,491.401 2783.98,510.96 2783.98,576.734 C2783.98,635.03 2825.6,664.561 2881.78,664.561 L2881.78,664.561 Z M2905.18,608.183 C2880.06,608.183 2862.03,596.486 2862.03,574.05 C2862.03,551.038 2881.02,539.724 2909.78,535.697 C2927.61,533.205 2956.76,528.986 2966.54,522.466 L2966.54,553.723 C2966.54,584.597 2941.04,608.183 2905.18,608.183 Z M3150.92,769.455 C3211.71,769.455 3243.92,738.389 3260.61,690.832 L3375.09,364.838 L3288.6,364.455 L3227.05,580.761 L3223.98,580.761 L3163,364.455 L3077.09,364.455 L3182.75,667.438 L3177.96,679.902 C3167.22,707.516 3146.7,708.858 3117.94,700.037 L3099.53,761.017 C3111.22,766.003 3130.21,769.455 3150.92,769.455 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/serpapi-black.svg b/src/images/serpapi-black.svg
new file mode 100644
index 000000000..fa803e8cb
--- /dev/null
+++ b/src/images/serpapi-black.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1746px" height="472px" viewBox="0 0 1746 472" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Slice</title>
+    <defs>
+        <linearGradient x1="10.125%" y1="99%" x2="90%" y2="8.75%" id="linearGradient-1">
+            <stop stop-color="#377FEA" offset="0%"></stop>
+            <stop stop-color="#8C45EF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M1281.98,111.1791 C1283.31,111.1791 1284.63,111.1791 1286,111.1917 L1290.53,111.1917 C1292.15,111.1917 1293.79,111.2044 1295.46,111.2044 C1296.3,111.2044 1296.3,111.2044 1300.49,111.217 C1304.9,111.217 1309.32,111.2297 1313.73,111.2423 C1318.23,111.255 1322.73,111.2676 1327.24,111.2676 C1336.07,111.2803 1344.92,111.3056 1353.75,111.3309 C1358.87,127.9899 1363.99,144.636 1369.1,161.295 C1369.31,161.915 1369.31,161.915 1370.27,165.078 C1378.87,193.058 1387.48,221.038 1396.03,249.031 C1396.35,250.055 1396.66,251.08 1396.99,252.13 C1399.95,261.781 1402.89,271.432 1405.84,281.084 C1406.9,284.588 1407.98,288.079 1409.04,291.583 C1409.56,293.265 1410.07,294.947 1410.59,296.617 C1413.4,305.851 1416.25,315.072 1419.14,324.268 C1419.69,325.989 1420.22,327.696 1420.76,329.417 C1421.78,332.655 1422.79,335.88 1423.82,339.106 C1424.27,340.535 1424.72,341.965 1425.19,343.445 C1425.58,344.697 1425.98,345.962 1426.39,347.252 C1427.24,350.402 1427.24,350.402 1427.24,354.197 C1408,354.197 1388.77,354.197 1368.95,354.197 C1367.57,349.529 1366.18,344.861 1364.76,340.042 C1364.33,338.613 1363.9,337.171 1363.45,335.691 C1363.11,334.502 1362.76,333.313 1362.39,332.086 C1362.05,330.897 1361.69,329.72 1361.33,328.493 C1359.46,321.511 1357.92,314.44 1356.28,307.394 C1329.94,307.812 1303.6,308.229 1276.46,308.659 C1272.27,323.687 1268.09,338.714 1263.78,354.197 C1244.13,354.197 1224.48,354.197 1204.23,354.197 C1214.38,320.259 1224.69,286.371 1235.07,252.497 C1236.59,247.551 1238.11,242.605 1239.62,237.659 C1239.94,236.66 1240.24,235.66 1240.56,234.623 C1245.31,219.09 1250.04,203.557 1254.76,188.011 C1255.83,184.494 1256.89,180.99 1257.96,177.474 C1258.65,175.172 1259.35,172.857 1260.06,170.555 C1260.4,169.416 1260.74,168.29 1261.1,167.127 C1263.14,160.372 1265.19,153.63 1267.23,146.875 C1268.5,142.688 1269.76,138.514 1271.03,134.3272 C1271.63,132.3792 1272.21,130.4186 1272.81,128.458 C1273.6,125.8016 1274.42,123.1326 1275.23,120.4636 C1275.68,118.971 1276.14,117.4784 1276.61,115.9352 C1278.13,111.3688 1278.13,111.3688 1281.98,111.1791 L1281.98,111.1791 Z M1315.73,164.458 C1311.93,173.894 1309.27,183.621 1306.57,193.412 C1306.07,195.233 1305.56,197.055 1305.05,198.876 C1304,202.671 1302.95,206.466 1301.9,210.261 C1300.56,215.131 1299.2,219.988 1297.86,224.845 C1296.8,228.602 1295.77,232.346 1294.73,236.103 C1294.23,237.887 1293.74,239.683 1293.23,241.479 C1292.53,243.984 1291.85,246.476 1291.15,248.98 C1290.76,250.397 1290.37,251.826 1289.96,253.293 C1289.13,256.797 1289.13,256.797 1289.13,260.592 L1342.34,260.592 C1340.86,253.167 1339.42,246.096 1337.43,238.848 C1337.31,238.431 1337.31,238.431 1336.76,236.369 C1336.03,233.725 1335.3,231.081 1334.58,228.45 C1334.07,226.591 1333.56,224.744 1333.04,222.885 C1331.73,218.053 1330.4,213.208 1329.06,208.376 C1327.7,203.417 1326.34,198.472 1324.98,193.513 C1322.32,183.824 1319.66,174.147 1317,164.458 C1316.58,164.458 1316.17,164.458 1315.73,164.458 L1315.73,164.458 Z M1593.52,183.764 C1608.71,197.59 1612.46,215.387 1613.5,235.145 C1613.73,243.797 1613.74,252.462 1613.74,261.114 C1613.74,265.162 1613.76,269.197 1613.79,273.232 C1613.93,324.639 1613.93,324.639 1598.2,342.791 C1586.42,354.352 1571.25,358.463 1555.01,358.476 C1553.55,358.45 1552.11,358.425 1550.62,358.387 C1549.21,358.4 1547.79,358.412 1546.33,358.425 C1533.14,358.324 1521.73,356.161 1508.33,354.048 L1508.33,426.149 C1498.05,428.198 1487.89,429.893 1477.53,431.361 C1476.74,431.474 1476.74,431.474 1472.74,432.056 C1471.98,432.17 1471.98,432.17 1468.12,432.714 C1466.74,432.916 1465.37,433.106 1463.96,433.309 C1460.18,433.739 1460.18,433.739 1453.84,433.739 C1453.84,348.584 1453.84,263.429 1453.84,175.694 L1496.93,175.694 C1498.6,179.868 1500.27,184.042 1501.99,188.343 C1503.2,187.761 1504.39,187.179 1505.62,186.585 C1532.75,173.569 1567.38,162.349 1593.52,183.764 L1593.52,183.764 Z M1510.05,230.377 C1507.59,233.577 1507.87,235.892 1507.9,239.889 L1507.9,244.417 C1507.92,246.036 1507.94,247.643 1507.96,249.313 C1507.96,250.957 1507.97,252.614 1507.97,254.309 C1507.99,258.698 1508.02,263.088 1508.08,267.464 C1508.11,271.942 1508.13,276.42 1508.15,280.898 C1508.19,289.676 1508.25,298.468 1508.33,307.246 C1517.98,310.054 1526.99,311.281 1537,311.357 C1537.94,311.382 1538.87,311.408 1539.83,311.433 C1545.66,311.471 1549.32,310.813 1553.94,307.246 C1558.21,302.376 1559.18,298.316 1559.24,291.941 C1559.25,290.625 1559.28,289.322 1559.29,287.969 C1559.3,286.539 1559.3,285.123 1559.32,283.668 C1559.33,282.201 1559.34,280.746 1559.35,279.228 C1559.37,276.142 1559.38,273.043 1559.39,269.943 C1559.42,265.225 1559.47,260.494 1559.52,255.776 C1559.53,252.766 1559.54,249.755 1559.56,246.745 C1559.58,245.341 1559.6,243.924 1559.62,242.469 C1559.6,234.273 1558.92,229.124 1553.94,222.496 C1551.09,220.801 1551.09,220.801 1548.17,220.042 C1547.2,219.764 1546.23,219.498 1545.23,219.22 C1533.28,216.905 1519.43,223.331 1510.05,230.377 L1510.05,230.377 Z M1169.04,183.764 C1184.23,197.59 1187.98,215.387 1189.02,235.145 C1189.25,243.797 1189.26,252.462 1189.26,261.114 C1189.26,265.162 1189.29,269.197 1189.31,273.232 C1189.45,324.639 1189.45,324.639 1173.73,342.791 C1161.94,354.352 1146.78,358.463 1130.53,358.476 C1129.08,358.45 1127.63,358.425 1126.15,358.387 C1124.73,358.4 1123.31,358.412 1121.85,358.425 C1108.66,358.324 1097.26,356.161 1083.85,354.048 L1083.85,426.149 C1073.58,428.198 1063.41,429.893 1053.05,431.361 C1052.26,431.474 1052.26,431.474 1048.26,432.056 C1047.5,432.17 1047.5,432.17 1043.65,432.714 C1042.266,432.916 1040.898,433.106 1039.479,433.309 C1035.703,433.739 1035.703,433.739 1029.367,433.739 C1029.367,348.584 1029.367,263.429 1029.367,175.694 L1072.45,175.694 C1074.12,179.868 1075.79,184.042 1077.52,188.343 C1078.72,187.761 1079.91,187.179 1081.14,186.585 C1108.27,173.569 1142.9,162.349 1169.04,183.764 Z M1085.58,230.377 C1083.12,233.577 1083.4,235.892 1083.42,239.889 L1083.42,244.417 C1083.45,246.036 1083.46,247.643 1083.49,249.313 C1083.49,250.957 1083.5,252.614 1083.5,254.309 C1083.51,258.698 1083.55,263.088 1083.6,267.464 C1083.64,271.942 1083.65,276.42 1083.68,280.898 C1083.71,289.676 1083.78,298.468 1083.85,307.246 C1093.51,310.054 1102.52,311.281 1112.53,311.357 C1113.46,311.382 1114.39,311.408 1115.35,311.433 C1121.18,311.471 1124.84,310.813 1129.47,307.246 C1133.74,302.376 1134.7,298.316 1134.76,291.941 C1134.78,290.625 1134.8,289.322 1134.81,287.969 C1134.83,286.539 1134.83,285.123 1134.84,283.668 C1134.85,282.201 1134.87,280.746 1134.88,279.228 C1134.89,276.142 1134.9,273.043 1134.92,269.943 C1134.94,265.225 1134.99,260.494 1135.04,255.776 C1135.06,252.766 1135.07,249.755 1135.08,246.745 C1135.11,245.341 1135.12,243.924 1135.14,242.469 C1135.12,234.273 1134.45,229.124 1129.47,222.496 C1126.62,220.801 1126.62,220.801 1123.69,220.042 C1122.73,219.764 1121.75,219.498 1120.75,219.22 C1108.8,216.905 1094.95,223.331 1085.58,230.377 L1085.58,230.377 Z M607.825,107.0681 L610.778,107.0681 C635.22,107.0681 659.726,108.8011 683.458,114.9739 C682.812,130.7602 680.81,146.18 678.39,161.776 C668.975,161.144 659.65,160.271 650.298,159.044 C637.666,157.412 625.159,156.324 612.412,156.248 C611.196,156.223 609.967,156.21 608.7,156.185 C600.286,156.248 590.948,156.843 584.625,162.965 C580.406,171.63 580.279,184.507 583.358,193.564 C588.794,201.368 598.816,203.304 607.673,205.479 C609.903,206.061 612.146,206.63 614.389,207.212 C617.861,208.098 621.333,208.97 624.805,209.831 C636.601,212.791 648.144,215.852 659.32,220.696 C660.118,221.038 660.929,221.392 661.753,221.746 C671.902,226.376 680.772,233.624 685.144,244.06 C693.62,268.764 693.126,304.953 682.191,328.746 C673.74,343.128 660.232,350.44 644.482,354.652 C630.418,357.903 616.568,358.295 602.2,358.232 C601.161,358.232 600.122,358.232 599.057,358.232 C583.827,358.168 569.065,357.7 554.215,354.045 C553.226,353.804 552.238,353.564 551.224,353.324 C540.239,350.629 530.431,347.29 520.003,342.66 C522.93,328.468 525.857,314.276 528.873,299.653 C540.213,301.07 540.213,301.07 545.206,302.335 C570.332,308.507 599.982,314.782 625.273,306.357 C629.024,303.815 629.962,301.373 631.507,297.123 C632.027,292.873 632.04,288.673 631.976,284.398 C631.989,283.272 632.014,282.159 632.027,281.008 C631.976,269.94 631.976,269.94 627.706,265.5 C617.354,258.328 604.518,256.266 592.468,253.483 C543.52,242.124 543.52,242.124 532.674,225.022 C525.034,210.729 524.59,194.247 524.679,178.385 C524.679,176.829 524.691,175.273 524.691,173.679 C524.932,155.92 526.592,139.007 538.731,125.0301 C556.888,107.7132 584.219,107.0934 607.825,107.0681 L607.825,107.0681 Z M849.722,190.899 C867.055,210.101 866.295,235.981 866.08,260.204 C866.029,268.211 865.966,276.218 865.915,284.478 C834.136,284.478 802.358,284.478 769.616,284.478 C773.417,303.452 773.417,303.452 779.753,309.777 C786.912,313.394 794.958,312.737 802.801,312.699 C804.258,312.699 805.715,312.686 807.223,312.686 C823.886,312.484 839.598,309.65 855.778,305.982 C858.198,312.585 859.63,319.251 861.011,326.132 C861.239,327.233 861.468,328.333 861.708,329.459 C862.95,335.682 863.647,341.387 863.381,347.725 C841.929,355.58 819.451,358.287 796.706,358.388 C795.161,358.4 793.615,358.413 792.018,358.426 C771.124,358.236 749.672,353.632 734.137,338.87 C719.376,323.691 716.005,303.022 716.018,282.644 C716.018,281.303 716.005,279.962 716.005,278.596 C715.992,275.788 715.992,272.967 716.005,270.159 C716.005,265.922 715.98,261.697 715.942,257.459 C715.866,233.375 716.601,209.038 734.277,190.532 C763.014,164.108 821.44,164.627 849.722,190.899 Z M774.215,221.384 C770.059,228.708 769.616,235.652 769.616,244.001 L815.231,244.001 C815.231,227.746 815.231,227.746 811.43,221.232 C806.058,215.856 801.42,214.73 794.007,214.591 C786.202,214.692 780.107,216.122 774.215,221.384 L774.215,221.384 Z M997.694,171.896 C1001.242,175.437 1000.938,179.08 1001.306,183.862 C1001.344,184.33 1001.344,184.33 1001.546,186.695 C1001.812,189.693 1002.053,192.691 1002.281,195.689 C1002.459,197.7 1002.636,199.711 1002.801,201.71 C1002.966,203.645 1003.13,205.568 1003.282,207.491 C1003.32,207.946 1003.32,207.946 1003.51,210.223 C1003.878,214.751 1004.119,219.216 1004.03,223.757 C1003.586,223.947 1003.586,223.947 1001.318,224.909 C997.2,226.679 993.095,228.463 988.977,230.234 C987.583,230.841 986.177,231.436 984.732,232.055 C976.813,235.496 969.388,239.215 962.114,243.857 C959.682,245.261 959.682,245.261 957.147,245.261 L957.147,354.045 C939.167,354.045 921.187,354.045 902.662,354.045 C902.662,295.188 902.662,236.331 902.662,175.69 L948.278,175.69 C950.812,187.075 950.812,187.075 950.812,192.134 C952.13,191.401 953.447,190.667 954.816,189.908 C967.081,183.191 979.334,177.562 992.626,173.16 C993.602,172.832 994.565,172.503 995.566,172.174 C996.275,172.085 996.972,171.984 997.694,171.896 L997.694,171.896 Z M1648.98,175.69 L1703.47,175.69 L1703.47,354.045 C1685.49,354.045 1667.51,354.045 1648.98,354.045 C1648.98,295.188 1648.98,236.331 1648.98,175.69 Z M1648.98,98.5298 L1703.47,98.5298 L1703.47,155.451 C1685.49,155.451 1667.51,155.451 1648.98,155.451 C1648.98,136.667 1648.98,117.8832 1648.98,98.5298 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
+        <path d="M443,170 L443,321 C443,384.512746 391.512746,436 328,436 L326,436 L326.000697,363.573906 C348.960399,358.232902 366,338.511599 366,315 C366,291.488401 348.960399,271.767098 326.000697,266.426094 L326.000697,205.573906 C344.56904,201.254442 359.265315,187.529483 364.207781,170.000687 L443,170 Z M159,36 L159.000301,108.425862 C136.040095,113.766527 119,133.48806 119,157 C119,184.614237 142.505051,207 171.5,207 C200.494949,207 224,184.614237 224,157 C224,133.488401 206.960399,113.767098 184.000697,108.426094 L184,36 L328,36 C389.500214,36 439.724965,84.2759904 442.846165,144.999881 L364.47834,145.000376 C358.835046,123.181602 338.151716,107 313.5,107 C284.505051,107 261,129.385763 261,157 C261,180.51194 278.040095,200.233473 301.000301,205.574138 L301.000301,266.425862 C278.040095,271.766527 261,291.48806 261,315 C261,338.51194 278.040095,358.233473 301.000301,363.574138 L301,436 L184,436 L184.000697,363.573906 C206.960399,358.232902 224,338.511599 224,315 C224,287.385763 200.494949,265 171.5,265 C146.848284,265 126.164954,281.181602 120.52166,303.000376 L43,303 L43,151 C43,87.4872538 94.4872538,36 158,36 L159,36 Z M159.000301,363.574138 L159,436 L158,436 C96.838138,436 46.8280121,388.253742 43.2096212,328.001224 L120.792219,328.000687 C125.734773,345.529797 140.431487,359.254934 159.000301,363.574138 Z" id="Combined-Shape" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/serpapi-white.svg b/src/images/serpapi-white.svg
new file mode 100644
index 000000000..d3ec97205
--- /dev/null
+++ b/src/images/serpapi-white.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1746px" height="472px" viewBox="0 0 1746 472" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Slice</title>
+    <defs>
+        <linearGradient x1="10.125%" y1="99%" x2="90%" y2="8.75%" id="linearGradient-1">
+            <stop stop-color="#377FEA" offset="0%"></stop>
+            <stop stop-color="#8C45EF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M1281.98,111.1791 C1283.31,111.1791 1284.63,111.1791 1286,111.1917 L1290.53,111.1917 C1292.15,111.1917 1293.79,111.2044 1295.46,111.2044 C1296.3,111.2044 1296.3,111.2044 1300.49,111.217 C1304.9,111.217 1309.32,111.2297 1313.73,111.2423 C1318.23,111.255 1322.73,111.2676 1327.24,111.2676 C1336.07,111.2803 1344.92,111.3056 1353.75,111.3309 C1358.87,127.9899 1363.99,144.636 1369.1,161.295 C1369.31,161.915 1369.31,161.915 1370.27,165.078 C1378.87,193.058 1387.48,221.038 1396.03,249.031 C1396.35,250.055 1396.66,251.08 1396.99,252.13 C1399.95,261.781 1402.89,271.432 1405.84,281.084 C1406.9,284.588 1407.98,288.079 1409.04,291.583 C1409.56,293.265 1410.07,294.947 1410.59,296.617 C1413.4,305.851 1416.25,315.072 1419.14,324.268 C1419.69,325.989 1420.22,327.696 1420.76,329.417 C1421.78,332.655 1422.79,335.88 1423.82,339.106 C1424.27,340.535 1424.72,341.965 1425.19,343.445 C1425.58,344.697 1425.98,345.962 1426.39,347.252 C1427.24,350.402 1427.24,350.402 1427.24,354.197 C1408,354.197 1388.77,354.197 1368.95,354.197 C1367.57,349.529 1366.18,344.861 1364.76,340.042 C1364.33,338.613 1363.9,337.171 1363.45,335.691 C1363.11,334.502 1362.76,333.313 1362.39,332.086 C1362.05,330.897 1361.69,329.72 1361.33,328.493 C1359.46,321.511 1357.92,314.44 1356.28,307.394 C1329.94,307.812 1303.6,308.229 1276.46,308.659 C1272.27,323.687 1268.09,338.714 1263.78,354.197 C1244.13,354.197 1224.48,354.197 1204.23,354.197 C1214.38,320.259 1224.69,286.371 1235.07,252.497 C1236.59,247.551 1238.11,242.605 1239.62,237.659 C1239.94,236.66 1240.24,235.66 1240.56,234.623 C1245.31,219.09 1250.04,203.557 1254.76,188.011 C1255.83,184.494 1256.89,180.99 1257.96,177.474 C1258.65,175.172 1259.35,172.857 1260.06,170.555 C1260.4,169.416 1260.74,168.29 1261.1,167.127 C1263.14,160.372 1265.19,153.63 1267.23,146.875 C1268.5,142.688 1269.76,138.514 1271.03,134.3272 C1271.63,132.3792 1272.21,130.4186 1272.81,128.458 C1273.6,125.8016 1274.42,123.1326 1275.23,120.4636 C1275.68,118.971 1276.14,117.4784 1276.61,115.9352 C1278.13,111.3688 1278.13,111.3688 1281.98,111.1791 L1281.98,111.1791 Z M1315.73,164.458 C1311.93,173.894 1309.27,183.621 1306.57,193.412 C1306.07,195.233 1305.56,197.055 1305.05,198.876 C1304,202.671 1302.95,206.466 1301.9,210.261 C1300.56,215.131 1299.2,219.988 1297.86,224.845 C1296.8,228.602 1295.77,232.346 1294.73,236.103 C1294.23,237.887 1293.74,239.683 1293.23,241.479 C1292.53,243.984 1291.85,246.476 1291.15,248.98 C1290.76,250.397 1290.37,251.826 1289.96,253.293 C1289.13,256.797 1289.13,256.797 1289.13,260.592 L1342.34,260.592 C1340.86,253.167 1339.42,246.096 1337.43,238.848 C1337.31,238.431 1337.31,238.431 1336.76,236.369 C1336.03,233.725 1335.3,231.081 1334.58,228.45 C1334.07,226.591 1333.56,224.744 1333.04,222.885 C1331.73,218.053 1330.4,213.208 1329.06,208.376 C1327.7,203.417 1326.34,198.472 1324.98,193.513 C1322.32,183.824 1319.66,174.147 1317,164.458 C1316.58,164.458 1316.17,164.458 1315.73,164.458 L1315.73,164.458 Z M1593.52,183.764 C1608.71,197.59 1612.46,215.387 1613.5,235.145 C1613.73,243.797 1613.74,252.462 1613.74,261.114 C1613.74,265.162 1613.76,269.197 1613.79,273.232 C1613.93,324.639 1613.93,324.639 1598.2,342.791 C1586.42,354.352 1571.25,358.463 1555.01,358.476 C1553.55,358.45 1552.11,358.425 1550.62,358.387 C1549.21,358.4 1547.79,358.412 1546.33,358.425 C1533.14,358.324 1521.73,356.161 1508.33,354.048 L1508.33,426.149 C1498.05,428.198 1487.89,429.893 1477.53,431.361 C1476.74,431.474 1476.74,431.474 1472.74,432.056 C1471.98,432.17 1471.98,432.17 1468.12,432.714 C1466.74,432.916 1465.37,433.106 1463.96,433.309 C1460.18,433.739 1460.18,433.739 1453.84,433.739 C1453.84,348.584 1453.84,263.429 1453.84,175.694 L1496.93,175.694 C1498.6,179.868 1500.27,184.042 1501.99,188.343 C1503.2,187.761 1504.39,187.179 1505.62,186.585 C1532.75,173.569 1567.38,162.349 1593.52,183.764 L1593.52,183.764 Z M1510.05,230.377 C1507.59,233.577 1507.87,235.892 1507.9,239.889 L1507.9,244.417 C1507.92,246.036 1507.94,247.643 1507.96,249.313 C1507.96,250.957 1507.97,252.614 1507.97,254.309 C1507.99,258.698 1508.02,263.088 1508.08,267.464 C1508.11,271.942 1508.13,276.42 1508.15,280.898 C1508.19,289.676 1508.25,298.468 1508.33,307.246 C1517.98,310.054 1526.99,311.281 1537,311.357 C1537.94,311.382 1538.87,311.408 1539.83,311.433 C1545.66,311.471 1549.32,310.813 1553.94,307.246 C1558.21,302.376 1559.18,298.316 1559.24,291.941 C1559.25,290.625 1559.28,289.322 1559.29,287.969 C1559.3,286.539 1559.3,285.123 1559.32,283.668 C1559.33,282.201 1559.34,280.746 1559.35,279.228 C1559.37,276.142 1559.38,273.043 1559.39,269.943 C1559.42,265.225 1559.47,260.494 1559.52,255.776 C1559.53,252.766 1559.54,249.755 1559.56,246.745 C1559.58,245.341 1559.6,243.924 1559.62,242.469 C1559.6,234.273 1558.92,229.124 1553.94,222.496 C1551.09,220.801 1551.09,220.801 1548.17,220.042 C1547.2,219.764 1546.23,219.498 1545.23,219.22 C1533.28,216.905 1519.43,223.331 1510.05,230.377 L1510.05,230.377 Z M1169.04,183.764 C1184.23,197.59 1187.98,215.387 1189.02,235.145 C1189.25,243.797 1189.26,252.462 1189.26,261.114 C1189.26,265.162 1189.29,269.197 1189.31,273.232 C1189.45,324.639 1189.45,324.639 1173.73,342.791 C1161.94,354.352 1146.78,358.463 1130.53,358.476 C1129.08,358.45 1127.63,358.425 1126.15,358.387 C1124.73,358.4 1123.31,358.412 1121.85,358.425 C1108.66,358.324 1097.26,356.161 1083.85,354.048 L1083.85,426.149 C1073.58,428.198 1063.41,429.893 1053.05,431.361 C1052.26,431.474 1052.26,431.474 1048.26,432.056 C1047.5,432.17 1047.5,432.17 1043.65,432.714 C1042.266,432.916 1040.898,433.106 1039.479,433.309 C1035.703,433.739 1035.703,433.739 1029.367,433.739 C1029.367,348.584 1029.367,263.429 1029.367,175.694 L1072.45,175.694 C1074.12,179.868 1075.79,184.042 1077.52,188.343 C1078.72,187.761 1079.91,187.179 1081.14,186.585 C1108.27,173.569 1142.9,162.349 1169.04,183.764 Z M1085.58,230.377 C1083.12,233.577 1083.4,235.892 1083.42,239.889 L1083.42,244.417 C1083.45,246.036 1083.46,247.643 1083.49,249.313 C1083.49,250.957 1083.5,252.614 1083.5,254.309 C1083.51,258.698 1083.55,263.088 1083.6,267.464 C1083.64,271.942 1083.65,276.42 1083.68,280.898 C1083.71,289.676 1083.78,298.468 1083.85,307.246 C1093.51,310.054 1102.52,311.281 1112.53,311.357 C1113.46,311.382 1114.39,311.408 1115.35,311.433 C1121.18,311.471 1124.84,310.813 1129.47,307.246 C1133.74,302.376 1134.7,298.316 1134.76,291.941 C1134.78,290.625 1134.8,289.322 1134.81,287.969 C1134.83,286.539 1134.83,285.123 1134.84,283.668 C1134.85,282.201 1134.87,280.746 1134.88,279.228 C1134.89,276.142 1134.9,273.043 1134.92,269.943 C1134.94,265.225 1134.99,260.494 1135.04,255.776 C1135.06,252.766 1135.07,249.755 1135.08,246.745 C1135.11,245.341 1135.12,243.924 1135.14,242.469 C1135.12,234.273 1134.45,229.124 1129.47,222.496 C1126.62,220.801 1126.62,220.801 1123.69,220.042 C1122.73,219.764 1121.75,219.498 1120.75,219.22 C1108.8,216.905 1094.95,223.331 1085.58,230.377 L1085.58,230.377 Z M607.825,107.0681 L610.778,107.0681 C635.22,107.0681 659.726,108.8011 683.458,114.9739 C682.812,130.7602 680.81,146.18 678.39,161.776 C668.975,161.144 659.65,160.271 650.298,159.044 C637.666,157.412 625.159,156.324 612.412,156.248 C611.196,156.223 609.967,156.21 608.7,156.185 C600.286,156.248 590.948,156.843 584.625,162.965 C580.406,171.63 580.279,184.507 583.358,193.564 C588.794,201.368 598.816,203.304 607.673,205.479 C609.903,206.061 612.146,206.63 614.389,207.212 C617.861,208.098 621.333,208.97 624.805,209.831 C636.601,212.791 648.144,215.852 659.32,220.696 C660.118,221.038 660.929,221.392 661.753,221.746 C671.902,226.376 680.772,233.624 685.144,244.06 C693.62,268.764 693.126,304.953 682.191,328.746 C673.74,343.128 660.232,350.44 644.482,354.652 C630.418,357.903 616.568,358.295 602.2,358.232 C601.161,358.232 600.122,358.232 599.057,358.232 C583.827,358.168 569.065,357.7 554.215,354.045 C553.226,353.804 552.238,353.564 551.224,353.324 C540.239,350.629 530.431,347.29 520.003,342.66 C522.93,328.468 525.857,314.276 528.873,299.653 C540.213,301.07 540.213,301.07 545.206,302.335 C570.332,308.507 599.982,314.782 625.273,306.357 C629.024,303.815 629.962,301.373 631.507,297.123 C632.027,292.873 632.04,288.673 631.976,284.398 C631.989,283.272 632.014,282.159 632.027,281.008 C631.976,269.94 631.976,269.94 627.706,265.5 C617.354,258.328 604.518,256.266 592.468,253.483 C543.52,242.124 543.52,242.124 532.674,225.022 C525.034,210.729 524.59,194.247 524.679,178.385 C524.679,176.829 524.691,175.273 524.691,173.679 C524.932,155.92 526.592,139.007 538.731,125.0301 C556.888,107.7132 584.219,107.0934 607.825,107.0681 L607.825,107.0681 Z M849.722,190.899 C867.055,210.101 866.295,235.981 866.08,260.204 C866.029,268.211 865.966,276.218 865.915,284.478 C834.136,284.478 802.358,284.478 769.616,284.478 C773.417,303.452 773.417,303.452 779.753,309.777 C786.912,313.394 794.958,312.737 802.801,312.699 C804.258,312.699 805.715,312.686 807.223,312.686 C823.886,312.484 839.598,309.65 855.778,305.982 C858.198,312.585 859.63,319.251 861.011,326.132 C861.239,327.233 861.468,328.333 861.708,329.459 C862.95,335.682 863.647,341.387 863.381,347.725 C841.929,355.58 819.451,358.287 796.706,358.388 C795.161,358.4 793.615,358.413 792.018,358.426 C771.124,358.236 749.672,353.632 734.137,338.87 C719.376,323.691 716.005,303.022 716.018,282.644 C716.018,281.303 716.005,279.962 716.005,278.596 C715.992,275.788 715.992,272.967 716.005,270.159 C716.005,265.922 715.98,261.697 715.942,257.459 C715.866,233.375 716.601,209.038 734.277,190.532 C763.014,164.108 821.44,164.627 849.722,190.899 Z M774.215,221.384 C770.059,228.708 769.616,235.652 769.616,244.001 L815.231,244.001 C815.231,227.746 815.231,227.746 811.43,221.232 C806.058,215.856 801.42,214.73 794.007,214.591 C786.202,214.692 780.107,216.122 774.215,221.384 L774.215,221.384 Z M997.694,171.896 C1001.242,175.437 1000.938,179.08 1001.306,183.862 C1001.344,184.33 1001.344,184.33 1001.546,186.695 C1001.812,189.693 1002.053,192.691 1002.281,195.689 C1002.459,197.7 1002.636,199.711 1002.801,201.71 C1002.966,203.645 1003.13,205.568 1003.282,207.491 C1003.32,207.946 1003.32,207.946 1003.51,210.223 C1003.878,214.751 1004.119,219.216 1004.03,223.757 C1003.586,223.947 1003.586,223.947 1001.318,224.909 C997.2,226.679 993.095,228.463 988.977,230.234 C987.583,230.841 986.177,231.436 984.732,232.055 C976.813,235.496 969.388,239.215 962.114,243.857 C959.682,245.261 959.682,245.261 957.147,245.261 L957.147,354.045 C939.167,354.045 921.187,354.045 902.662,354.045 C902.662,295.188 902.662,236.331 902.662,175.69 L948.278,175.69 C950.812,187.075 950.812,187.075 950.812,192.134 C952.13,191.401 953.447,190.667 954.816,189.908 C967.081,183.191 979.334,177.562 992.626,173.16 C993.602,172.832 994.565,172.503 995.566,172.174 C996.275,172.085 996.972,171.984 997.694,171.896 L997.694,171.896 Z M1648.98,175.69 L1703.47,175.69 L1703.47,354.045 C1685.49,354.045 1667.51,354.045 1648.98,354.045 C1648.98,295.188 1648.98,236.331 1648.98,175.69 Z M1648.98,98.5298 L1703.47,98.5298 L1703.47,155.451 C1685.49,155.451 1667.51,155.451 1648.98,155.451 C1648.98,136.667 1648.98,117.8832 1648.98,98.5298 Z" id="Combined-Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
+        <path d="M443,170 L443,321 C443,384.512746 391.512746,436 328,436 L326,436 L326.000697,363.573906 C348.960399,358.232902 366,338.511599 366,315 C366,291.488401 348.960399,271.767098 326.000697,266.426094 L326.000697,205.573906 C344.56904,201.254442 359.265315,187.529483 364.207781,170.000687 L443,170 Z M159,36 L159.000301,108.425862 C136.040095,113.766527 119,133.48806 119,157 C119,184.614237 142.505051,207 171.5,207 C200.494949,207 224,184.614237 224,157 C224,133.488401 206.960399,113.767098 184.000697,108.426094 L184,36 L328,36 C389.500214,36 439.724965,84.2759904 442.846165,144.999881 L364.47834,145.000376 C358.835046,123.181602 338.151716,107 313.5,107 C284.505051,107 261,129.385763 261,157 C261,180.51194 278.040095,200.233473 301.000301,205.574138 L301.000301,266.425862 C278.040095,271.766527 261,291.48806 261,315 C261,338.51194 278.040095,358.233473 301.000301,363.574138 L301,436 L184,436 L184.000697,363.573906 C206.960399,358.232902 224,338.511599 224,315 C224,287.385763 200.494949,265 171.5,265 C146.848284,265 126.164954,281.181602 120.52166,303.000376 L43,303 L43,151 C43,87.4872538 94.4872538,36 158,36 L159,36 Z M159.000301,363.574138 L159,436 L158,436 C96.838138,436 46.8280121,388.253742 43.2096212,328.001224 L120.792219,328.000687 C125.734773,345.529797 140.431487,359.254934 159.000301,363.574138 Z" id="Combined-Shape" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/xai-dark.svg b/src/images/xai-dark.svg
new file mode 100644
index 000000000..6e0f201a8
--- /dev/null
+++ b/src/images/xai-dark.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2.30047 8.77631L12.0474 23H16.3799L6.63183 8.77631H2.30047ZM6.6285 16.6762L2.29492 23H6.63072L8.79584 19.8387L6.6285 16.6762ZM17.3709 1L9.88007 11.9308L12.0474 15.0944L21.7067 1H17.3709ZM18.1555 7.76374V23H21.7067V2.5818L18.1555 7.76374Z" fill="#fff"/>
+</svg>
diff --git a/src/images/xai-light.svg b/src/images/xai-light.svg
new file mode 100644
index 000000000..f52def290
--- /dev/null
+++ b/src/images/xai-light.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2.30047 8.77631L12.0474 23H16.3799L6.63183 8.77631H2.30047ZM6.6285 16.6762L2.29492 23H6.63072L8.79584 19.8387L6.6285 16.6762ZM17.3709 1L9.88007 11.9308L12.0474 15.0944L21.7067 1H17.3709ZM18.1555 7.76374V23H21.7067V2.5818L18.1555 7.76374Z" fill="#000"/>
+</svg>
diff --git a/src/libraries/ai.tsx b/src/libraries/ai.tsx
index 99f456bf8..8b38314a9 100644
--- a/src/libraries/ai.tsx
+++ b/src/libraries/ai.tsx
@@ -9,42 +9,40 @@ const textStyles = `text-pink-600 dark:text-pink-500`
 export const aiProject = {
   ...ai,
   description: `A powerful, open-source AI SDK with a unified interface across multiple providers. No vendor lock-in, no proprietary formats, just clean TypeScript and honest open source.`,
-  ogImage: 'https://github.com/tanstack/ai/raw/main/media/repo-header.png',
   latestBranch: 'main',
   bgRadial: 'from-pink-500 via-pink-700/50 to-transparent',
   textColor: `text-pink-700`,
   defaultDocs: 'getting-started/overview',
   featureHighlights: [
     {
-      title: 'Multi-Provider Support',
+      title: 'Provider Agnostic',
       icon: <Plug className={twMerge(textStyles)} />,
       description: (
         <div>
-          Support for OpenAI, Anthropic, Ollama, and Google Gemini. Switch
-          providers at runtime without code changes. No vendor lock-in, just
-          clean TypeScript.
+          Official adapters for OpenRouter, OpenAI, Anthropic, Gemini, Ollama,
+          Groq, Grok/xAI, ElevenLabs, and fal.ai. Import only the adapters your
+          app needs.
         </div>
       ),
     },
     {
-      title: 'Unified API',
+      title: 'AG-UI Native Clients',
       icon: <Zap className={twMerge(textStyles)} />,
       description: (
         <div>
-          Same interface across all providers. Standalone functions with
-          automatic type inference from adapters. Framework-agnostic client for
-          any JavaScript environment.
+          A headless client plus React, Vue, Solid, Svelte, and Preact bindings
+          all speak the same AG-UI request and event protocol.
         </div>
       ),
     },
     {
-      title: 'Tool/Function Calling',
+      title: 'Typed Tools & Media',
       icon: <CogsIcon className={twMerge(textStyles)} />,
       description: (
         <div>
-          Automatic execution loop with no manual tool management needed.
-          Type-safe tool definitions with structured outputs and streaming
-          support.
+          Type-safe client/server tools, provider-native tools, structured
+          output, reasoning streams, image, speech, transcription, realtime
+          voice, and video generation.
         </div>
       ),
     },
diff --git a/src/libraries/cli.tsx b/src/libraries/cli.tsx
new file mode 100644
index 000000000..b007dd837
--- /dev/null
+++ b/src/libraries/cli.tsx
@@ -0,0 +1,79 @@
+import { Bot, Layers, Puzzle, Rocket, Terminal } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { cli } from './libraries'
+
+const textStyles = 'text-indigo-600 dark:text-indigo-400'
+
+export const cliProject = {
+  ...cli,
+  featureHighlights: [
+    {
+      title: 'MCP Server',
+      icon: <Bot className={textStyles} />,
+      description: (
+        <div>
+          Connect your AI assistant to TanStack via the{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            built-in MCP server
+          </span>
+          . Search docs, get integration file changes, and let AI agents help
+          scaffold and configure your projects.
+        </div>
+      ),
+    },
+    {
+      title: 'Modular Integrations',
+      icon: <Puzzle className={textStyles} />,
+      description: (
+        <div>
+          Choose from a growing ecosystem of{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            pre-built integrations
+          </span>{' '}
+          for authentication, databases, styling, deployment, and more.
+        </div>
+      ),
+    },
+    {
+      title: 'Interactive Builder',
+      icon: <Layers className={textStyles} />,
+      description: (
+        <div>
+          Use the{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            web-based Builder UI
+          </span>{' '}
+          to visually select your stack, preview generated files, and export
+          your configuration.
+        </div>
+      ),
+    },
+    {
+      title: 'Zero to Production',
+      icon: <Terminal className={textStyles} />,
+      description: (
+        <div>
+          Go from{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            zero to a fully configured project
+          </span>{' '}
+          in seconds with all the boilerplate, configuration, and best practices
+          built in.
+        </div>
+      ),
+    },
+    {
+      title: 'Deploy Anywhere',
+      icon: <Rocket className={textStyles} />,
+      description: (
+        <div>
+          Built-in deployment integrations for{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            Cloudflare, Netlify, AWS, and more
+          </span>
+          . Pre-configured with optimal settings for TanStack Start.
+        </div>
+      ),
+    },
+  ],
+}
diff --git a/src/libraries/config.tsx b/src/libraries/config.tsx
index ff300d146..a70663b77 100644
--- a/src/libraries/config.tsx
+++ b/src/libraries/config.tsx
@@ -8,7 +8,6 @@ const textStyles = 'text-black dark:text-gray-100'
 export const configProject = {
   ...config,
   description: `Opinionated tooling to lint, build, test, version, and publish JS/TS packages — minimal config, consistent results.`,
-  ogImage: 'https://github.com/tanstack/config/raw/main/media/repo-header.png',
   latestBranch: 'main',
   featureHighlights: [
     {
diff --git a/src/libraries/db.tsx b/src/libraries/db.tsx
index e7180a76a..38b21db9b 100644
--- a/src/libraries/db.tsx
+++ b/src/libraries/db.tsx
@@ -8,7 +8,6 @@ const textStyles = `text-orange-600 dark:text-orange-500`
 export const dbProject = {
   ...db,
   description: `TanStack DB gives you a reactive, client-first store for your API data with collections, live queries and optimistic mutations that keep your UI reactive, consistent and blazing fast 🔥`,
-  ogImage: 'https://github.com/tanstack/db/raw/main/media/repo-header.png',
   latestBranch: 'main',
   bgRadial: 'from-orange-500 via-orange-700/50 to-transparent',
   textColor: `text-orange-700`,
diff --git a/src/libraries/devtools.tsx b/src/libraries/devtools.tsx
index 417253ba2..0a215277c 100644
--- a/src/libraries/devtools.tsx
+++ b/src/libraries/devtools.tsx
@@ -8,8 +8,6 @@ const textStyles = 'text-black dark:text-gray-100'
 export const devtoolsProject = {
   ...devtools,
   description: `A unified devtools panel that houses all TanStack devtools and allows you to create and integrate your own custom devtools.`,
-  ogImage:
-    'https://github.com/tanstack/devtools/raw/main/media/repo-header.png',
   latestBranch: 'main',
   featureHighlights: [
     {
diff --git a/src/libraries/form.tsx b/src/libraries/form.tsx
index 610aae95a..b96b18c46 100644
--- a/src/libraries/form.tsx
+++ b/src/libraries/form.tsx
@@ -8,7 +8,6 @@ const textStyles = 'text-yellow-600 dark:text-yellow-300'
 export const formProject = {
   ...form,
   description: `Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, Lit and Svelte.`,
-  ogImage: 'https://github.com/tanstack/form/raw/main/media/repo-header.png',
   latestBranch: 'main',
   bgRadial: 'from-yellow-500 via-yellow-600/50 to-transparent',
   textColor: 'text-yellow-600',
diff --git a/src/libraries/frameworkSupport.ts b/src/libraries/frameworkSupport.ts
new file mode 100644
index 000000000..f6edacfbe
--- /dev/null
+++ b/src/libraries/frameworkSupport.ts
@@ -0,0 +1,55 @@
+import type { Framework, LibraryId, LibrarySlim } from './types'
+
+export function getFrameworkPackageName(
+  framework: Framework,
+  libraryId: LibraryId,
+  library: LibrarySlim,
+) {
+  const packageName = library.frameworkPackageNames?.[framework]
+
+  if (packageName) {
+    return packageName
+  }
+
+  if (framework === 'vanilla') {
+    return library.corePackageName ?? `@tanstack/${libraryId}`
+  }
+
+  if (framework === 'angular' && libraryId === 'query') {
+    return '@tanstack/angular-query-experimental'
+  }
+
+  return `@tanstack/${framework}-${libraryId}`
+}
+
+export function getFrameworkDocsPath(
+  framework: Framework,
+  library: LibrarySlim,
+) {
+  const docsPath = library.frameworkDocs?.[framework]
+
+  if (docsPath) {
+    return docsPath
+  }
+
+  if (library.installPath) {
+    return library.installPath
+      .replace('$framework', framework)
+      .replace('$libraryId', library.id)
+  }
+
+  return 'installation'
+}
+
+export function getFrameworkDocsHash(
+  framework: Framework,
+  library: LibrarySlim,
+) {
+  const hasCustomDocsPath = Boolean(library.frameworkDocs?.[framework])
+
+  if (hasCustomDocsPath || library.installPath) {
+    return undefined
+  }
+
+  return framework
+}
diff --git a/src/libraries/frameworks.tsx b/src/libraries/frameworks.tsx
index f54b22962..c4214b9a8 100644
--- a/src/libraries/frameworks.tsx
+++ b/src/libraries/frameworks.tsx
@@ -1,6 +1,9 @@
+import alpineLogo from '../images/alpine-logo.svg'
 import angularLogo from '../images/angular-logo.svg'
+import emberLogo from '../images/ember-logo.svg'
 import jsLogo from '../images/js-logo.svg'
 import litLogo from '../images/lit-logo.svg'
+import markoLogo from '../images/marko-logo.svg'
 import qwikLogo from '../images/qwik-logo.svg'
 import preactLogo from '../images/preact-logo.svg'
 import reactLogo from '../images/react-logo.svg'
@@ -38,6 +41,13 @@ export const frameworkOptions = [
     color: 'bg-red-500',
     fontColor: 'text-fuchsia-500',
   },
+  {
+    label: 'Ember',
+    value: 'ember',
+    logo: emberLogo,
+    color: 'bg-orange-600',
+    fontColor: 'text-orange-600',
+  },
   {
     label: 'Solid',
     value: 'solid',
@@ -45,13 +55,6 @@ export const frameworkOptions = [
     color: 'bg-blue-600',
     fontColor: 'text-blue-600',
   },
-  {
-    label: 'Lit',
-    value: 'lit',
-    logo: litLogo,
-    color: 'bg-emerald-500',
-    fontColor: 'text-emerald-500',
-  },
   {
     label: 'Svelte',
     value: 'svelte',
@@ -59,6 +62,13 @@ export const frameworkOptions = [
     color: 'bg-orange-600',
     fontColor: 'text-orange-600',
   },
+  {
+    label: 'Marko',
+    value: 'marko',
+    logo: markoLogo,
+    color: 'bg-cyan-500',
+    fontColor: 'text-cyan-500',
+  },
   {
     label: 'Qwik',
     value: 'qwik',
@@ -66,6 +76,20 @@ export const frameworkOptions = [
     color: 'bg-indigo-500',
     fontColor: 'text-indigo-500',
   },
+  {
+    label: 'Lit',
+    value: 'lit',
+    logo: litLogo,
+    color: 'bg-emerald-500',
+    fontColor: 'text-emerald-500',
+  },
+  {
+    label: 'Alpine',
+    value: 'alpine',
+    logo: alpineLogo,
+    color: 'bg-slate-500',
+    fontColor: 'text-slate-500',
+  },
   {
     label: 'Vanilla',
     value: 'vanilla',
diff --git a/src/libraries/hotkeys.tsx b/src/libraries/hotkeys.tsx
new file mode 100644
index 000000000..b1382e40c
--- /dev/null
+++ b/src/libraries/hotkeys.tsx
@@ -0,0 +1,64 @@
+import { Keyboard, ListOrdered, WandSparkles } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { hotkeys } from './libraries'
+
+const textStyles = 'text-rose-600 dark:text-rose-500'
+
+export const hotkeysProject = {
+  ...hotkeys,
+  description: `A type-safe, cross-platform hotkey library with sequence detection, key state tracking, hotkey recording, and framework adapters for React and more.`,
+  latestBranch: 'main',
+  bgRadial: 'from-rose-500 via-rose-700/50 to-transparent',
+  textColor: 'text-rose-700',
+  defaultDocs: 'overview',
+  featureHighlights: [
+    {
+      title: 'Type-Safe & Cross-Platform',
+      icon: <Keyboard className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Define keyboard shortcuts with a{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            fully type-safe Hotkey string type
+          </span>{' '}
+          that validates key combinations at the type level. Cross-platform{' '}
+          <code>Mod</code> modifier automatically maps to Cmd on macOS and Ctrl
+          elsewhere, so your shortcuts work everywhere without platform checks.
+        </div>
+      ),
+    },
+    {
+      title: 'Better Defaults',
+      icon: <WandSparkles className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Ships with{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            sensible and safe defaults
+          </span>
+          , including automatic <code>preventDefault</code> and{' '}
+          <code>stopPropagation</code>, smartly ignoring shortcuts when input
+          fields are focused, and automatic cleanup on unmount. Scoping hotkeys
+          to refs or elements is easy, making it straightforward to define
+          context-aware keyboard shortcuts without unexpected side-effects.
+        </div>
+      ),
+    },
+    {
+      title: 'Sequences & Recording',
+      icon: <ListOrdered className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Build{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            multi-step keyboard sequences
+          </span>{' '}
+          like Vim-style commands or cheat codes with configurable timeouts. Let
+          users record and customize their own shortcuts with the built-in
+          hotkey recorder that captures modifier and key combinations in real
+          time.
+        </div>
+      ),
+    },
+  ],
+}
diff --git a/src/libraries/ids.ts b/src/libraries/ids.ts
new file mode 100644
index 000000000..32da3560e
--- /dev/null
+++ b/src/libraries/ids.ts
@@ -0,0 +1,41 @@
+export const libraryIds = [
+  'start',
+  'router',
+  'query',
+  'table',
+  'form',
+  'virtual',
+  'ranger',
+  'store',
+  'pacer',
+  'hotkeys',
+  'db',
+  'ai',
+  'intent',
+  'workflow',
+  'config',
+  'devtools',
+  'mcp',
+  'cli',
+  'react-charts',
+  'create-tsrouter-app',
+] as const
+
+export type LibraryId = (typeof libraryIds)[number]
+
+export const SIDEBAR_LIBRARY_IDS = [
+  'start',
+  'router',
+  'query',
+  'table',
+  'db',
+  'ai',
+  'form',
+  'virtual',
+  'pacer',
+  'hotkeys',
+  'store',
+  'devtools',
+  'cli',
+  'intent',
+] as const satisfies readonly LibraryId[]
diff --git a/src/libraries/index.tsx b/src/libraries/index.tsx
index 2d1069a42..a1a222990 100644
--- a/src/libraries/index.tsx
+++ b/src/libraries/index.tsx
@@ -4,10 +4,12 @@ export {
   libraries,
   librariesByGroup,
   librariesGroupNamesMap,
+  publicLibraries,
   libraryIds,
   SIDEBAR_LIBRARY_IDS,
   findLibrary,
   getLibrary,
+  isPublicLibrary,
   // Individual library exports
   query,
   router,
@@ -18,13 +20,18 @@ export {
   ranger,
   store,
   pacer,
+  hotkeys,
   db,
   ai,
+  intent,
   config,
   devtools,
+  workflow,
+  cli,
 } from './libraries'
 
 // Re-export types
+export type { PublicLibrarySlim } from './libraries'
 export type { Framework, Library, LibraryId, LibrarySlim } from './types'
 
 // NOTE: Extended library projects (queryProject, routerProject, etc.) with
diff --git a/src/libraries/intent.tsx b/src/libraries/intent.tsx
new file mode 100644
index 000000000..7323fc082
--- /dev/null
+++ b/src/libraries/intent.tsx
@@ -0,0 +1,55 @@
+import { Library } from '.'
+import { BookOpen, Package, RefreshCw } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { intent } from './libraries'
+
+const textStyles = `text-sky-600 dark:text-sky-500`
+
+export const intentProject = {
+  ...intent,
+  featureHighlights: [
+    {
+      title: 'Agent Skills in npm',
+      icon: <Package className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Ship{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            Agent Skills
+          </span>{' '}
+          — procedural knowledge agents load on demand — as part of your npm
+          package. Skills travel with your library via npm update, not the
+          model's training cutoff or copy-pasted rules files.
+        </div>
+      ),
+    },
+    {
+      title: 'Automatic Discovery',
+      icon: <BookOpen className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Agents discover skills automatically from{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            node_modules
+          </span>
+          . No manual setup per-library. Install the package and agents can find
+          and use the skills — compatible with the open Agent Skills format.
+        </div>
+      ),
+    },
+    {
+      title: 'Staleness Detection',
+      icon: <RefreshCw className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Each skill declares its source docs. When those docs change,{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            @tanstack/intent stale
+          </span>{' '}
+          flags the skill for review. Run it in CI and you get a failing check
+          when sources drift — skills become part of your release checklist.
+        </div>
+      ),
+    },
+  ],
+} satisfies Library
diff --git a/src/libraries/libraries.ts b/src/libraries/libraries.ts
index cfa6bb966..7f4db2689 100644
--- a/src/libraries/libraries.ts
+++ b/src/libraries/libraries.ts
@@ -1,7 +1,10 @@
 // Base library data - lightweight, stays in main bundle
 // Extended library data (with React nodes, testimonials, etc.) is in individual library files
 
+import { redirect } from '@tanstack/react-router'
 import type { LibrarySlim, LibraryId } from './types'
+import { handleRedirects } from '~/utils/handleRedirects'
+export { libraryIds, SIDEBAR_LIBRARY_IDS } from './ids'
 
 export const query: LibrarySlim = {
   id: 'query',
@@ -11,7 +14,7 @@ export const query: LibrarySlim = {
   tagline:
     'Powerful asynchronous state management, server-state utilities and data fetching',
   description:
-    'Powerful asynchronous state management, server-state utilities and data fetching. Fetch, cache, update, and wrangle all forms of async data in your TS/JS, React, Vue, Solid, Svelte & Angular applications all without touching any "global state"',
+    'Powerful asynchronous state management, server-state utilities and data fetching. Fetch, cache, update, and wrangle all forms of async data in your TS/JS, React, Vue, Solid, Svelte, Angular & Lit applications all without touching any "global state"',
   bgStyle: 'bg-red-500',
   borderStyle: 'border-red-500/50',
   textStyle: 'text-red-500',
@@ -21,20 +24,184 @@ export const query: LibrarySlim = {
   bgRadial: 'from-red-500 via-red-500/60 to-transparent',
   badge: undefined,
   repo: 'tanstack/query',
-  frameworks: ['react', 'solid', 'vue', 'svelte', 'angular'],
+  frameworks: ['react', 'preact', 'solid', 'vue', 'svelte', 'angular', 'lit'],
   latestVersion: 'v5',
   latestBranch: 'main',
+  corePackageName: '@tanstack/query-core',
+  npmPackageNames: ['@tanstack/query-core', 'react-query'],
   availableVersions: ['v5', 'v4', 'v3'],
   scarfId: '53afb586-3934-4624-a37a-e680c1528e17',
-  ogImage: 'https://github.com/tanstack/query/raw/main/media/repo-header.png',
   defaultDocs: 'framework/react/overview',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
   installPath: 'framework/$framework/installation',
   legacyPackages: ['react-query'],
+  handleRedirects: (href) => {
+    handleRedirects(
+      reactQueryV3List,
+      href,
+      '/query/v3',
+      '/query/latest',
+      'from=reactQueryV3',
+    )
+
+    handleRedirects(
+      reactQueryV3RemovedInV5List,
+      href,
+      '/query/v3',
+      '/query/v5',
+      'from=reactQueryV3',
+    )
+
+    handleRedirects(
+      queryCommunityLinks,
+      href,
+      '/query/latest',
+      '/query/latest',
+      'from=communityLinks',
+    )
+  },
 }
 
+// Redirect old query v3 docs
+// prettier-ignore
+const reactQueryV3List = [
+    {from: "overview", to: "docs/framework/react/overview"},
+    {from: "installation", to: "docs/framework/react/installation"},
+    {from: "quick-start", to: "docs/framework/react/quick-start"},
+    {from: "devtools", to: "docs/framework/react/devtools"},
+    {from: "videos", to: "docs/framework/react/videos"},
+    {from: "comparison", to: "docs/framework/react/comparison"},
+    {from: "typescript", to: "docs/framework/react/typescript"},
+    {from: "graphql", to: "docs/framework/react/graphql"},
+    {from: "react-native", to: "docs/framework/react/react-native"},
+    {from: "guides/important-defaults", to: "docs/framework/react/guides/important-defaults"},
+    {from: "guides/queries", to: "docs/framework/react/guides/queries"},
+    {from: "guides/query-keys", to: "docs/framework/react/guides/query-keys"},
+    {from: "guides/query-functions", to: "docs/framework/react/guides/query-functions"},
+    {from: "guides/network-mode", to: "docs/framework/react/guides/network-mode"},
+    {from: "guides/parallel-queries", to: "docs/framework/react/guides/parallel-queries"},
+    {from: "guides/dependent-queries", to: "docs/framework/react/guides/dependent-queries"},
+    {from: "guides/background-fetching-indicators", to: "docs/framework/react/guides/background-fetching-indicators"},
+    {from: "guides/window-focus-refetching", to: "docs/framework/react/guides/window-focus-refetching"},
+    {from: "guides/disabling-queries", to: "docs/framework/react/guides/disabling-queries"},
+    {from: "guides/query-retries", to: "docs/framework/react/guides/query-retries"},
+    {from: "guides/paginated-queries", to: "docs/framework/react/guides/paginated-queries"},
+    {from: "guides/infinite-queries", to: "docs/framework/react/guides/infinite-queries"},
+    {from: "guides/placeholder-query-data", to: "docs/framework/react/guides/placeholder-query-data"},
+    {from: "guides/initial-query-data", to: "docs/framework/react/guides/initial-query-data"},
+    {from: "guides/prefetching", to: "docs/framework/react/guides/prefetching"},
+    {from: "guides/mutations", to: "docs/framework/react/guides/mutations"},
+    {from: "guides/query-invalidation", to: "docs/framework/react/guides/query-invalidation"},
+    {from: "guides/invalidations-from-mutations", to: "docs/framework/react/guides/invalidations-from-mutations"},
+    {from: "guides/updates-from-mutation-responses", to: "docs/framework/react/guides/updates-from-mutation-responses"},
+    {from: "guides/optimistic-updates", to: "docs/framework/react/guides/optimistic-updates"},
+    {from: "guides/query-cancellation", to: "docs/framework/react/guides/query-cancellation"},
+    {from: "guides/scroll-restoration", to: "docs/framework/react/guides/scroll-restoration"},
+    {from: "guides/filters", to: "docs/framework/react/guides/filters"},
+    {from: "guides/ssr", to: "docs/framework/react/guides/ssr"},
+    {from: "guides/caching", to: "docs/framework/react/guides/caching"},
+    {from: "guides/default-query-function", to: "docs/framework/react/guides/default-query-function"},
+    {from: "guides/suspense", to: "docs/framework/react/guides/suspense"},
+    {from: "guides/testing", to: "docs/framework/react/guides/testing"},
+    {from: "guides/does-this-replace-client-state", to: "docs/framework/react/guides/does-this-replace-client-state"},
+    {from: "guides/migrating-to-react-query-3", to: "docs/framework/react/guides/migrating-to-react-query-3"},
+    {from: "guides/migrating-to-react-query-4", to: "docs/framework/react/guides/migrating-to-react-query-4"},
+    {from: "community/tkdodos-blog", to: "docs/framework/react/community/tkdodos-blog"},
+    {from: "examples/simple", to: "docs/framework/react/examples/simple"},
+    {from: "examples/basic-graphql-request", to: "docs/framework/react/examples/basic-graphql-request"},
+    {from: "examples/custom-hooks", to: "docs/framework/react/examples/custom-hooks"},
+    {from: "examples/auto-refetching", to: "docs/framework/react/examples/auto-refetching"},
+    {from: "examples/focus-refetching", to: "docs/framework/react/examples/focus-refetching"},
+    {from: "examples/optimistic-updates", to: "docs/framework/react/examples/optimistic-updates-typescript"},
+    {from: "examples/optimistic-updates-typescript", to: "docs/framework/react/examples/optimistic-updates-typescript"},
+    {from: "examples/pagination", to: "docs/framework/react/examples/pagination"},
+    {from: "examples/load-more-infinite-scroll", to: "docs/framework/react/examples/load-more-infinite-scroll"},
+    {from: "examples/suspense", to: "docs/framework/react/examples/suspense"},
+    {from: "examples/default-query-function", to: "docs/framework/react/examples/default-query-function"},
+    {from: "examples/playground", to: "docs/framework/react/examples/playground"},
+    {from: "examples/prefetching", to: "docs/framework/react/examples/prefetching"},
+    {from: "examples/star-wars", to: "docs/framework/react/examples/star-wars"},
+    {from: "examples/rick-morty", to: "docs/framework/react/examples/rick-morty"},
+    {from: "examples/nextjs", to: "docs/framework/react/examples/nextjs"},
+    {from: "examples/react-native", to: "docs/framework/react/examples/react-native"},
+    {from: "examples/offline", to: "docs/framework/react/examples/offline"},
+    {from: "plugins/persistQueryClient", to: "docs/framework/react/plugins/persistQueryClient"},
+    {from: "plugins/broadcastQueryClient", to: "docs/framework/react/plugins/broadcastQueryClient"},
+    {from: "reference/useQueries", to: "docs/framework/react/reference/useQueries"},
+    {from: "reference/useInfiniteQuery", to: "docs/framework/react/reference/useInfiniteQuery"},
+    {from: "reference/useMutation", to: "docs/framework/react/reference/useMutation"},
+    {from: "reference/useIsFetching", to: "docs/framework/react/reference/useIsFetching"},
+    {from: "reference/useIsMutating", to: "docs/framework/react/reference/useIsMutating"},
+    {from: "reference/QueryClientProvider", to: "docs/framework/react/reference/QueryClientProvider"},
+    {from: "reference/useQueryClient", to: "docs/framework/react/reference/useQueryClient"},
+    {from: "reference/QueryCache", to: "docs/reference/QueryCache"},
+    {from: "reference/MutationCache", to: "docs/reference/MutationCache"},
+    {from: "reference/QueryObserver", to: "docs/reference/QueryObserver"},
+    {from: "reference/InfiniteQueryObserver", to: "docs/reference/InfiniteQueryObserver"},
+    {from: "reference/QueriesObserver", to: "docs/reference/QueriesObserver"},
+    {from: "reference/QueryErrorResetBoundary", to: "docs/framework/react/reference/QueryErrorResetBoundary"},
+    {from: "reference/useQueryErrorResetBoundary", to: "docs/framework/react/reference/useQueryErrorResetBoundary"},
+    {from: "reference/focusManager", to: "docs/reference/focusManager"},
+    {from: "reference/onlineManager", to: "docs/reference/onlineManager"},
+    {from: "reference/hydration", to: "docs/framework/react/reference/hydration"},
+    {from: "reference/useQuery", to: "docs/framework/react/reference/useQuery"},
+    {from: "reference/QueryClient", to: "docs/reference/QueryClient"},
+    {from: "examples/basic", to: "docs/framework/react/examples/basic"},
+    // {from: '',to: ''},
+  ]
+
+/**
+  Features that have been removed in v5
+*/
+// prettier-ignore
+const reactQueryV3RemovedInV5List = [
+    {from: "guides/custom-logger", to: "docs/framework/react/guides/migrating-to-v5#the-deprecated-custom-logger-has-been-removed"},
+    {from: "plugins/createWebStoragePersister", to: "docs/framework/react/guides/migrating-to-react-query-4#persistqueryclient-and-the-corresponding-persister-plugins-are-no-longer-experimental-and-have-been-renamed"},
+    {from: "plugins/createAsyncStoragePersister", to: "docs/framework/react/guides/migrating-to-react-query-4#persistqueryclient-and-the-corresponding-persister-plugins-are-no-longer-experimental-and-have-been-renamed"},
+]
+
+/*
+Community resources section to new location
+*/
+// prettier-ignore
+const queryCommunityLinks = [
+  {
+    from: 'docs/framework/react/community/tkdodos-blog',
+    to: 'docs/community-resources',
+  },
+  {
+    from: 'docs/framework/react/community/community-projects',
+    to: 'docs/community-resources',
+  },
+  {
+    from: 'docs/framework/solid/community/tkdodos-blog',
+    to: 'docs/community-resources',
+  },
+  {
+    from: 'docs/framework/solid/community/community-projects',
+    to: 'docs/community-resources',
+  },
+  {
+    from: 'docs/framework/vue/community/tkdodos-blog',
+    to: 'docs/community-resources',
+  },
+  {
+    from: 'docs/framework/vue/community/community-projects',
+    to: 'docs/community-resources',
+  },
+  {
+    from: 'docs/framework/react/videos',
+    to: 'docs/community-resources',
+  },
+]
+
 export const router: LibrarySlim = {
   id: 'router',
   name: 'TanStack Router',
+  installPath: 'framework/$framework/quick-start',
   cardStyles: 'text-emerald-500 dark:text-emerald-400 hover:border-current',
   to: '/router',
   tagline: 'Type-safe Routing for React and Solid applications',
@@ -51,18 +218,54 @@ export const router: LibrarySlim = {
   repo: 'tanstack/router',
   frameworks: ['react', 'solid'],
   corePackageName: '@tanstack/router-core',
+  npmPackageNames: ['@tanstack/router-core', 'react-location'],
   latestVersion: 'v1',
   latestBranch: 'main',
   availableVersions: ['v1'],
   scarfId: '3d14fff2-f326-4929-b5e1-6ecf953d24f4',
-  ogImage: 'https://github.com/tanstack/router/raw/main/media/header.png',
   docsRoot: 'docs/router',
-  defaultDocs: 'framework/react/overview',
-  installPath: 'framework/$framework/quick-start',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
   legacyPackages: ['react-location'],
   hideCodesandboxUrl: true,
-  showNetlifyUrl: true,
-  showCloudflareUrl: true,
+  handleRedirects: (href) => {
+    if (href.includes('router/latest/docs/framework/react/start')) {
+      throw redirect({
+        href: href.replace(
+          'router/latest/docs/framework/react/start',
+          'start/latest/docs/framework/react',
+        ),
+      })
+    }
+
+    if (href.includes('/router/latest/docs/framework/react/examples/start')) {
+      throw redirect({
+        href: href.replace(
+          'router/latest/docs/framework/react/examples/start',
+          'start/latest/docs/framework/react/examples/start',
+        ),
+      })
+    }
+
+    // Rewrite framework-specific guides to generic guides
+    // e.g. /router/latest/docs/framework/react/overview -> /router/latest/docs/overview
+    // e.g. /router/latest/docs/framework/react/xyz -> /router/latest/docs/xyz
+    // e.g. /router/latest/docs/framework/react/xyz/ssr -> /router/latest/docs/xyz/ssr
+    // However, examples should still point to the framework-specific examples
+    // e.g. /router/latest/docs/framework/react/examples/ssr -> /router/latest/docs/framework/react/examples/ssr
+    // e.g. /router/latest/docs/framework/react/examples/xyz -> /router/latest/docs/framework/react/examples/xyz
+    const frameworkMatch = href.match(
+      /\/router\/([^/]+)\/docs\/framework\/[^/]+\/(.+)/,
+    )
+    if (frameworkMatch && !href.includes('/examples/')) {
+      const [, version, restPath] = frameworkMatch
+      throw redirect({
+        href: `/router/${version}/docs/${restPath}`,
+      })
+    }
+  },
 }
 
 export const start: LibrarySlim = {
@@ -87,13 +290,20 @@ export const start: LibrarySlim = {
   latestVersion: 'v0',
   latestBranch: 'main',
   availableVersions: ['v0'],
+  corePackageName: '@tanstack/start-client-core',
+  npmPackageNames: ['@tanstack/start-client-core'],
   scarfId: 'b6e2134f-e805-401d-95c3-2a7765d49a3d',
   docsRoot: 'docs/start',
   defaultDocs: 'framework/react/overview',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
   installPath: 'framework/$framework/build-from-scratch',
   embedEditor: 'codesandbox',
   showNetlifyUrl: true,
   showCloudflareUrl: true,
+  showRailwayUrl: true,
   hideStackblitzUrl: true,
 }
 
@@ -104,7 +314,7 @@ export const table: LibrarySlim = {
   to: '/table',
   tagline: 'Headless UI for building powerful tables & datagrids',
   description:
-    'Supercharge your tables or build a datagrid from scratch for TS/JS, React, Vue, Solid, Svelte, Qwik, Angular, and Lit while retaining 100% control over markup and styles.',
+    'Supercharge your tables or build a datagrid from scratch in any framework while retaining 100% control over markup and styles.',
   bgStyle: 'bg-blue-500',
   borderStyle: 'border-blue-500/50',
   textStyle: 'text-blue-500',
@@ -116,24 +326,72 @@ export const table: LibrarySlim = {
   repo: 'tanstack/table',
   frameworks: [
     'angular',
-    'lit',
-    'qwik',
+    'ember',
     'react',
+    'preact',
     'solid',
     'svelte',
     'vue',
+    'qwik',
+    'lit',
+    'alpine',
     'vanilla',
   ],
   latestVersion: 'v8',
   latestBranch: 'main',
-  availableVersions: ['v8'],
+  availableVersions: ['v8', 'beta'],
   scarfId: 'dc8b39e1-3fe9-4f3a-8e56-d4e2cf420a9e',
-  ogImage: 'https://github.com/tanstack/table/raw/main/media/repo-header.png',
-  defaultDocs: 'introduction',
+  defaultDocs: 'overview',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
   corePackageName: '@tanstack/table-core',
+  npmPackageNames: ['@tanstack/table-core', 'react-table'],
   legacyPackages: ['react-table'],
+  handleRedirects: (href) => {
+    handleRedirects(
+      reactTableV7List,
+      href,
+      '/table/v7',
+      '/table/v8',
+      'from=reactTableV7',
+    )
+  },
 }
 
+// prettier-ignore
+const reactTableV7List = [
+    {from: 'docs/api/overview',to: 'docs/overview',},
+    {from: 'docs/api/useColumnOrder',to: 'docs/api/features/column-ordering',},
+    {from: 'docs/api/useExpanded',to: 'docs/api/features/expanding',},
+    {from: 'docs/api/useFilters',to: 'docs/api/features/filters',},
+    {from: 'docs/api/useGlobalFilter',to: 'docs/api/features/filters',},
+    {from: 'docs/api/useGroupBy',to: 'docs/api/features/grouping',},
+    {from: 'docs/api/usePagination',to: 'docs/api/features/pagination',},
+    {from: 'docs/api/useResizeColumns',to: 'docs/api/features/column-sizing',},
+    {from: 'docs/api/useRowSelect',to: 'docs/api/features/row-selection',},
+    {from: 'docs/api/useSortBy',to: 'docs/api/features/sorting',},
+    {from: 'docs/api/useTable',to: 'docs/guide/tables',},
+    {from: 'docs/examples/basic',to: 'docs/framework/react/examples/basic',},
+    {from: 'docs/examples/filtering',to: 'docs/framework/react/examples/filters',},
+    {from: 'docs/examples/footers',to: 'docs/framework/react/examples/basic',},
+    {from: 'docs/examples/grouping',to: 'docs/framework/react/examples/grouping',},
+    {from: 'docs/examples/pagination-controlled',to: 'docs/framework/react/examples/pagination-controlled',},
+    {from: 'docs/examples/pagination',to: 'docs/framework/react/examples/pagination',},
+    {from: 'docs/examples/sorting',to: 'docs/framework/react/examples/sorting',},
+    {from: 'docs/examples/row-selection',to: 'docs/framework/react/examples/row-selection',},
+    {from: 'docs/examples/row-selection-with-pagination',to: 'docs/framework/react/examples/row-selection',},
+    {from: 'docs/examples/expanding',to: 'docs/framework/react/examples/expanding',},
+    {from: 'docs/examples/editable-data',to: 'docs/framework/react/examples/editable-data',},
+    {from: 'docs/examples/column-ordering',to: 'docs/framework/react/examples/column-ordering',},
+    {from: 'docs/examples/column-hiding',to: 'docs/framework/react/examples/column-visibility',},
+    {from: 'docs/examples/column-resizing',to: 'docs/framework/react/examples/column-sizing',},
+    {from: 'docs/installation',to: 'docs/installation',},
+    {from: 'docs/overview',to: 'docs/introduction',},
+    {from: 'docs/quick-start',to: 'docs/overview',},
+]
+
 export const form: LibrarySlim = {
   id: 'form',
   name: 'TanStack Form',
@@ -141,7 +399,7 @@ export const form: LibrarySlim = {
   to: '/form',
   tagline: 'Headless UI for building performant and type-safe forms',
   description:
-    'Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, Lit and Svelte.',
+    'Headless, performant, and type-safe form state management for TS/JS, React, Preact, Vue, Angular, Solid, Lit and Svelte.',
   bgStyle: 'bg-yellow-500',
   borderStyle: 'border-yellow-500/50',
   textStyle: 'text-yellow-500',
@@ -152,12 +410,16 @@ export const form: LibrarySlim = {
   badge: 'new',
   repo: 'tanstack/form',
   corePackageName: '@tanstack/form-core',
-  frameworks: ['react', 'vue', 'angular', 'solid', 'lit', 'svelte'],
+  npmPackageNames: ['@tanstack/form-core'],
+  frameworks: ['react', 'preact', 'vue', 'angular', 'solid', 'lit', 'svelte'],
   latestVersion: 'v1',
   latestBranch: 'main',
   availableVersions: ['v1'],
   scarfId: '72ec4452-5d77-427c-b44a-57515d2d83aa',
-  ogImage: 'https://github.com/tanstack/form/raw/main/media/repo-header.png',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
 }
 
 export const virtual: LibrarySlim = {
@@ -167,7 +429,7 @@ export const virtual: LibrarySlim = {
   to: '/virtual',
   tagline: 'Headless UI for Virtualizing Large Element Lists',
   description:
-    'Virtualize only the visible content for massive scrollable DOM nodes at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit & Angular while retaining 100% control over markup and styles.',
+    'Virtualize only the visible content for massive scrollable DOM nodes at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit, Angular & Marko while retaining 100% control over markup and styles.',
   bgStyle: 'bg-purple-500',
   borderStyle: 'border-purple-500/50',
   textStyle: 'text-purple-500',
@@ -177,15 +439,19 @@ export const virtual: LibrarySlim = {
   bgRadial: 'from-purple-500 via-violet-600/50 to-transparent',
   badge: undefined,
   repo: 'tanstack/virtual',
-  frameworks: ['react', 'solid', 'vue', 'svelte', 'lit', 'angular'],
+  frameworks: ['react', 'solid', 'vue', 'svelte', 'lit', 'angular', 'marko'],
   corePackageName: '@tanstack/virtual-core',
+  npmPackageNames: ['@tanstack/virtual-core', 'react-virtual'],
   latestVersion: 'v3',
   latestBranch: 'main',
   availableVersions: ['v3'],
   scarfId: '32372eb1-91e0-48e7-8df1-4808a7be6b94',
-  ogImage: 'https://github.com/tanstack/query/raw/main/media/header.png',
   defaultDocs: 'introduction',
   legacyPackages: ['react-virtual'],
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
 }
 
 export const ranger: LibrarySlim = {
@@ -200,6 +466,7 @@ export const ranger: LibrarySlim = {
   borderStyle: 'border-black/50 dark:border-gray-100/50',
   textStyle: 'text-black dark:text-gray-100',
   textColor: 'text-black dark:text-gray-100',
+  badgeTextStyle: 'text-white dark:text-gray-900',
   colorFrom: 'from-black dark:from-gray-100',
   colorTo: 'to-gray-600 dark:to-gray-400',
   accentColorFrom: 'from-blue-500',
@@ -210,11 +477,17 @@ export const ranger: LibrarySlim = {
   badge: undefined,
   repo: 'tanstack/ranger',
   frameworks: ['react'],
+  corePackageName: '@tanstack/ranger',
+  npmPackageNames: ['@tanstack/ranger', 'react-ranger'],
+  legacyPackages: ['react-ranger'],
   latestVersion: 'v0',
   latestBranch: 'main',
   availableVersions: ['v0'],
   scarfId: 'dd278e06-bb3f-420c-85c6-6e42d14d8f61',
-  ogImage: 'https://github.com/tanstack/ranger/raw/main/media/headerv1.png',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
 }
 
 export const store: LibrarySlim = {
@@ -234,13 +507,18 @@ export const store: LibrarySlim = {
   bgRadial: 'from-twine-500 via-twine-700/50 to-transparent',
   badge: 'alpha',
   repo: 'tanstack/store',
-  frameworks: ['react', 'preact', 'solid', 'svelte', 'vue', 'angular'],
+  frameworks: ['react', 'preact', 'solid', 'svelte', 'vue', 'angular', 'lit'],
+  corePackageName: '@tanstack/store',
+  npmPackageNames: ['@tanstack/store'],
   latestVersion: 'v0',
   latestBranch: 'main',
   availableVersions: ['v0'],
   scarfId: '302d0fef-cb3f-43c6-b45c-f055b9745edb',
-  ogImage: 'https://github.com/tanstack/store/raw/main/media/repo-header.png',
   defaultDocs: 'overview',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
 }
 
 export const pacer: LibrarySlim = {
@@ -261,14 +539,73 @@ export const pacer: LibrarySlim = {
   bgRadial: 'from-lime-500 via-lime-700/50 to-transparent',
   badge: 'beta',
   repo: 'tanstack/pacer',
-  frameworks: ['react', 'preact', 'solid'],
+  frameworks: ['react', 'preact', 'solid', 'angular', 'vanilla'],
+  corePackageName: '@tanstack/pacer',
+  npmPackageNames: ['@tanstack/pacer', '@tanstack/pacer-lite'],
   legacyPackages: ['@tanstack/pacer-lite'],
   latestVersion: 'v0',
   latestBranch: 'main',
   availableVersions: ['v0'],
   scarfId: '302d0fef-cb3f-43c6-b45c-f055b9745edb',
-  ogImage: 'https://github.com/tanstack/pacer/raw/main/media/repo-header.png',
   defaultDocs: 'overview',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
+  handleRedirects: (href) => {
+    if (
+      /\/pacer\/[^/]+\/docs\/framework\/angular\/examples\/injectAsyncRateLimitedCallback/.test(
+        href,
+      )
+    ) {
+      throw redirect({
+        href: href.replace(
+          'injectAsyncRateLimitedCallback',
+          'injectAsyncRateLimiter',
+        ),
+      })
+    }
+  },
+}
+
+export const hotkeys: LibrarySlim = {
+  id: 'hotkeys',
+  name: 'TanStack Hotkeys',
+  cardStyles: 'text-rose-500 dark:text-rose-400 hover:border-current',
+  to: '/hotkeys',
+  tagline:
+    'Type-safe keyboard shortcuts, sequences, and key state tracking for your apps',
+  description:
+    'A type-safe, cross-platform hotkey library with sequence detection, key state tracking, hotkey recording, and framework adapters for React and more.',
+  badge: 'alpha',
+  bgStyle: 'bg-rose-500',
+  borderStyle: 'border-rose-500/50',
+  textStyle: 'text-rose-500 dark:text-rose-400',
+  textColor: 'text-rose-600 dark:text-rose-400',
+  colorFrom: 'from-rose-500',
+  colorTo: 'to-rose-700',
+  bgRadial: 'from-rose-500 via-rose-700/50 to-transparent',
+  repo: 'tanstack/hotkeys',
+  frameworks: [
+    'vanilla',
+    'react',
+    'preact',
+    'solid',
+    'svelte',
+    'vue',
+    'angular',
+    'lit',
+  ],
+  corePackageName: '@tanstack/hotkeys',
+  npmPackageNames: ['@tanstack/hotkeys'],
+  latestVersion: 'v0',
+  latestBranch: 'main',
+  availableVersions: ['v0'],
+  defaultDocs: 'overview',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
 }
 
 export const db: LibrarySlim = {
@@ -289,12 +626,17 @@ export const db: LibrarySlim = {
   bgRadial: 'from-orange-500 via-orange-700/50 to-transparent',
   repo: 'tanstack/db',
   frameworks: ['react', 'vue', 'solid', 'svelte', 'vanilla'],
+  corePackageName: '@tanstack/db',
+  npmPackageNames: ['@tanstack/db', '@tanstack/react-db'],
   latestVersion: 'v0',
   latestBranch: 'main',
   availableVersions: ['v0'],
   scarfId: '302d0fef-cb3f-43c6-b45c-f055b9745edb',
-  ogImage: 'https://github.com/tanstack/db/raw/main/media/repo-header.png',
   defaultDocs: 'overview',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
 }
 
 export const ai: LibrarySlim = {
@@ -306,7 +648,7 @@ export const ai: LibrarySlim = {
     'A powerful, open-source AI SDK with a unified interface across multiple providers',
   description:
     'A powerful, open-source AI SDK with a unified interface across multiple providers. No vendor lock-in, no proprietary formats, just clean TypeScript and honest open source.',
-  badge: 'alpha',
+  badge: 'beta',
   bgStyle: 'bg-pink-500',
   borderStyle: 'border-pink-700/50',
   textStyle: 'text-pink-500',
@@ -315,12 +657,63 @@ export const ai: LibrarySlim = {
   colorTo: 'to-pink-700',
   bgRadial: 'from-pink-500 via-pink-700/50 to-transparent',
   repo: 'tanstack/ai',
-  frameworks: ['react', 'solid', 'vanilla'],
+  frameworks: ['react', 'vue', 'solid', 'svelte', 'preact', 'vanilla'],
+  corePackageName: '@tanstack/ai-client',
+  npmPackageNames: ['@tanstack/ai-client'],
   latestVersion: 'v0',
   latestBranch: 'main',
   availableVersions: ['v0'],
-  ogImage: 'https://github.com/tanstack/ai/raw/main/media/repo-header.png',
   defaultDocs: 'getting-started/overview',
+  frameworkPackageNames: {
+    react: '@tanstack/ai-react',
+    vue: '@tanstack/ai-vue',
+    solid: '@tanstack/ai-solid',
+    svelte: '@tanstack/ai-svelte',
+    preact: '@tanstack/ai-preact',
+    vanilla: '@tanstack/ai-client',
+  },
+  frameworkDocs: {
+    react: 'getting-started/quick-start',
+    vue: 'getting-started/quick-start-vue',
+    solid: 'api/ai-solid',
+    svelte: 'getting-started/quick-start-svelte',
+    preact: 'api/ai-preact',
+    vanilla: 'api/ai-client',
+  },
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
+}
+
+export const intent: LibrarySlim = {
+  id: 'intent',
+  name: 'TanStack Intent',
+  cardStyles: 'text-sky-500 dark:text-sky-400 hover:border-current',
+  to: '/intent',
+  tagline: 'Ship Agent Skills with your npm Packages',
+  description:
+    "Generate, validate, and ship Agent Skills alongside your library — versioned knowledge that agents discover automatically from node_modules. Skills live in each library's repo and update when the package updates.",
+  badge: 'alpha',
+  bgStyle: 'bg-sky-500',
+  borderStyle: 'border-sky-500/50',
+  textStyle: 'text-sky-500 dark:text-sky-400',
+  textColor: 'text-sky-600 dark:text-sky-400',
+  colorFrom: 'from-sky-500',
+  colorTo: 'to-sky-700',
+  bgRadial: 'from-sky-500 via-sky-700/50 to-transparent',
+  repo: 'tanstack/intent',
+  frameworks: [],
+  corePackageName: '@tanstack/intent',
+  npmPackageNames: ['@tanstack/intent'],
+  latestVersion: 'v0',
+  latestBranch: 'main',
+  availableVersions: ['v0'],
+  defaultDocs: 'overview',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
 }
 
 export const config: LibrarySlim = {
@@ -336,6 +729,7 @@ export const config: LibrarySlim = {
   borderStyle: 'border-black/50 dark:border-gray-100/50',
   textStyle: 'text-black dark:text-gray-100',
   textColor: 'text-black dark:text-gray-100',
+  badgeTextStyle: 'text-white dark:text-gray-900',
   colorFrom: 'from-black dark:from-gray-100',
   colorTo: 'to-gray-600 dark:to-gray-400',
   accentColorFrom: 'from-blue-500',
@@ -346,10 +740,15 @@ export const config: LibrarySlim = {
   badge: undefined,
   repo: 'tanstack/config',
   frameworks: [],
+  corePackageName: '@tanstack/config',
+  npmPackageNames: ['@tanstack/config'],
   latestVersion: 'v0',
   latestBranch: 'main',
   availableVersions: ['v0'],
-  ogImage: 'https://github.com/tanstack/config/raw/main/media/repo-header.png',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
 }
 
 export const devtools: LibrarySlim = {
@@ -375,12 +774,34 @@ export const devtools: LibrarySlim = {
   bgRadial:
     'from-black via-gray-600/50 to-transparent dark:from-gray-100 dark:via-gray-400/50',
   repo: 'tanstack/devtools',
-  frameworks: ['react', 'preact', 'solid', 'vanilla'],
+  frameworks: [
+    'react',
+    'preact',
+    'solid',
+    'vue',
+    'svelte',
+    'angular',
+    'vanilla',
+  ],
+  corePackageName: '@tanstack/devtools',
+  npmPackageNames: ['@tanstack/devtools', '@tanstack/react-devtools'],
   latestVersion: 'v0',
   latestBranch: 'main',
   availableVersions: ['v0'],
-  ogImage:
-    'https://github.com/tanstack/devtools/raw/main/media/repo-header.png',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
+  handleRedirects: (href) => {
+    if (/\/devtools\/[^/]+\/docs\/framework\/solif\//.test(href)) {
+      throw redirect({
+        href: href.replace(
+          /\/devtools\/([^/]+)\/docs\/framework\/solif\//,
+          '/devtools/$1/docs/framework/solid/',
+        ),
+      })
+    }
+  },
 }
 
 export const mcp: LibrarySlim = {
@@ -409,7 +830,68 @@ export const mcp: LibrarySlim = {
   latestVersion: 'v1',
   latestBranch: 'main',
   availableVersions: ['v1'],
-  docsRoot: 'docs/mcp',
+  visible: false,
+  handleRedirects: (href: string) => {
+    // All /mcp routes redirect to the CLI MCP migration guide
+    if (/\/mcp(\/|$)/.test(href)) {
+      throw redirect({ href: '/cli/latest/docs/mcp-migration' })
+    }
+  },
+}
+
+export const cli: LibrarySlim = {
+  id: 'cli',
+  name: 'TanStack CLI',
+  cardStyles: 'text-indigo-500 dark:text-indigo-400 hover:border-current',
+  to: '/cli',
+  tagline: 'CLI and project scaffolding toolkit for TanStack',
+  description:
+    'A CLI toolkit for TanStack. Create and customize TanStack Start apps, search docs, inspect add-ons, and generate project changes with current TanStack context.',
+  badge: 'alpha',
+  bgStyle: 'bg-indigo-500',
+  borderStyle: 'border-indigo-500/50',
+  textStyle: 'text-indigo-500 dark:text-indigo-400',
+  textColor: 'text-indigo-600 dark:text-indigo-400',
+  colorFrom: 'from-indigo-500',
+  colorTo: 'to-violet-600',
+  bgRadial: 'from-indigo-500 via-violet-600/50 to-transparent',
+  repo: 'tanstack/cli',
+  frameworks: [],
+  corePackageName: '@tanstack/cli',
+  npmPackageNames: ['@tanstack/cli'],
+  latestVersion: 'v0',
+  latestBranch: 'main',
+  availableVersions: ['v0'],
+  defaultDocs: 'overview',
+  sitemap: {
+    includeLandingPage: true,
+    includeDocsPages: true,
+  },
+}
+
+export const workflow: LibrarySlim = {
+  id: 'workflow',
+  name: 'TanStack Workflow',
+  cardStyles: 'text-blue-800 dark:text-blue-400 hover:border-current',
+  to: '/workflow',
+  tagline: 'Durable, type-safe workflow orchestration for TypeScript',
+  description:
+    'Build resilient multi-step workflows with typed inputs, durable execution, retries, and observable state for long-running application processes.',
+  badge: 'alpha',
+  bgStyle: 'bg-blue-900',
+  borderStyle: 'border-blue-900/50',
+  textStyle: 'text-blue-800 dark:text-blue-400',
+  textColor: 'text-blue-900 dark:text-blue-400',
+  colorFrom: 'from-blue-800',
+  colorTo: 'to-blue-600',
+  bgRadial: 'from-blue-800 via-blue-700/50 to-transparent',
+  repo: 'tanstack/workflow',
+  frameworks: [],
+  corePackageName: '@tanstack/workflow',
+  npmPackageNames: ['@tanstack/workflow'],
+  latestVersion: 'v0',
+  latestBranch: 'main',
+  availableVersions: ['v0'],
   defaultDocs: 'overview',
   visible: false,
 }
@@ -422,13 +904,17 @@ export const libraries: LibrarySlim[] = [
   form,
   db,
   ai,
+  intent,
   virtual,
   pacer,
+  hotkeys,
   store,
   ranger,
   config,
   devtools,
   mcp,
+  cli,
+  workflow,
   {
     id: 'react-charts',
     name: 'React Charts',
@@ -465,16 +951,34 @@ export const libraries: LibrarySlim[] = [
   },
 ]
 
+export type PublicLibrarySlim = LibrarySlim & {
+  to: string
+}
+
+export function isPublicLibrary(
+  library: LibrarySlim,
+): library is PublicLibrarySlim {
+  return (
+    typeof library.to === 'string' &&
+    library.to.startsWith('/') &&
+    library.visible !== false
+  )
+}
+
+export const publicLibraries = libraries.filter(isPublicLibrary)
+
 export const librariesByGroup = {
-  state: [start, router, query, db, store, ai],
-  headlessUI: [table, form],
+  framework: [start, router],
+  state: [query, db, store, ai],
+  headlessUI: [table, form, hotkeys],
   performance: [virtual, pacer],
-  tooling: [devtools, config, mcp],
+  tooling: [devtools, config, cli, intent],
 }
 
 export const librariesGroupNamesMap = {
-  state: 'Data and State Management',
-  headlessUI: 'Headless UI',
+  framework: 'Framework',
+  state: 'Data & State Management',
+  headlessUI: 'UI & UX',
   performance: 'Performance',
   tooling: 'Tooling',
 }
@@ -490,22 +994,3 @@ export function getLibrary(id: LibraryId): LibrarySlim {
   }
   return library
 }
-
-// Library IDs for schema validation
-export const libraryIds = libraries.map((lib) => lib.id) as readonly LibraryId[]
-
-// Library IDs shown in the sidebar navigation
-export const SIDEBAR_LIBRARY_IDS = [
-  'start',
-  'router',
-  'query',
-  'table',
-  'db',
-  'ai',
-  'form',
-  'virtual',
-  'pacer',
-  'store',
-  'devtools',
-  'mcp',
-] as const satisfies readonly LibraryId[]
diff --git a/src/libraries/maintainers.ts b/src/libraries/maintainers.ts
index 9d1bc66c8..70f95c92c 100644
--- a/src/libraries/maintainers.ts
+++ b/src/libraries/maintainers.ts
@@ -21,6 +21,31 @@ export interface Maintainer {
   workshopsAvailable?: boolean
 }
 
+const libraryMaintainerSortOrder = {
+  start: [
+    'tannerlinsley',
+    'schiller-manuel',
+    'sheraff',
+    'brenelz',
+    'seancassiere',
+    'birkskyum',
+    'chorobin',
+    'brhx',
+  ],
+  router: [
+    'tannerlinsley',
+    'schiller-manuel',
+    'sheraff',
+    'brenelz',
+    'beaussan',
+    'seancassiere',
+    'birkskyum',
+    'chorobin',
+    'brhx',
+    'nlynzaad',
+  ],
+} satisfies Partial<Record<Library['id'], Array<Maintainer['github']>>>
+
 // order matters
 export const allMaintainers: Maintainer[] = [
   {
@@ -38,9 +63,11 @@ export const allMaintainers: Maintainer[] = [
       'ranger',
       'store',
       'pacer',
+      'cli',
       'mcp',
       'react-charts',
     ],
+    maintainerOf: ['intent'],
     frameworkExpertise: ['react', 'solid'],
     specialties: ['Architecture', 'Core API', 'Documentation'],
     social: {
@@ -64,6 +91,20 @@ export const allMaintainers: Maintainer[] = [
       website: 'https://tkdodo.eu',
     },
   },
+  {
+    name: 'Nicolas Beaussart',
+    avatar: 'https://github.com/beaussan.png',
+    github: 'beaussan',
+    maintainerOf: ['router'],
+    frameworkExpertise: ['react'],
+    specialties: ['Monorepo', 'Architecture', 'Typescript'],
+    social: {
+      twitter: 'https://x.com/beaussan',
+      bluesky: 'https://bsky.app/profile/beaussan.io',
+      website: 'https://beaussan.io/',
+    },
+    workshopsAvailable: true,
+  },
   {
     name: 'Corbin Crutchley',
     isCoreMaintainer: true,
@@ -71,7 +112,7 @@ export const allMaintainers: Maintainer[] = [
     github: 'crutchcorn',
     creatorOf: ['form'],
     maintainerOf: ['store', 'config'],
-    frameworkExpertise: ['react', 'solid', 'vue', 'angular'],
+    frameworkExpertise: ['react', 'solid', 'vue', 'angular', 'lit'],
     specialties: ['Forms', 'Validation', 'State Management'],
     social: {
       twitter: 'https://x.com/crutchcorn',
@@ -97,15 +138,16 @@ export const allMaintainers: Maintainer[] = [
     isCoreMaintainer: true,
     avatar: 'https://github.com/kevinvandy.png',
     github: 'kevinvandy',
-    creatorOf: ['pacer'],
-    maintainerOf: ['table'],
+    creatorOf: ['pacer', 'hotkeys'],
+    maintainerOf: ['table', 'store'],
     contributorOf: ['virtual'],
     consultantOf: ['query'],
-    frameworkExpertise: ['react', 'solid', 'svelte'],
-    specialties: ['Tables', 'Data Grids', 'Dashboards'],
+    frameworkExpertise: ['react', 'preact', 'solid'],
+    specialties: ['Data Grids', 'Performance', 'Dashboards'],
     social: {
       twitter: 'https://x.com/kevinvancott',
       bluesky: 'https://bsky.app/profile/kevinvancott.dev',
+      linkedIn: 'https://www.linkedin.com/in/kevinthomasvancott',
       website: 'https://kevinvancott.dev',
     },
     workshopsAvailable: true,
@@ -135,7 +177,33 @@ export const allMaintainers: Maintainer[] = [
     },
   },
   {
-    name: 'Chris Horobin',
+    name: 'Birk Skyum',
+    avatar: 'https://github.com/birkskyum.png',
+    github: 'birkskyum',
+    maintainerOf: ['router', 'start'],
+    contributorOf: ['pacer'],
+    frameworkExpertise: ['solid'],
+    specialties: [],
+    social: {
+      twitter: 'https://x.com/birkskyum',
+      bluesky: 'https://bsky.app/profile/bskyum.bsky.social',
+    },
+  },
+  {
+    name: 'Florian Pellet',
+    avatar: 'https://github.com/sheraff.png',
+    github: 'sheraff',
+    maintainerOf: ['start', 'router'],
+    frameworkExpertise: ['react'],
+    specialties: ['Performance'],
+    social: {
+      twitter: 'https://x.com/chaponflo',
+      bluesky: 'https://bsky.app/profile/sheraff.bsky.social',
+      website: 'https://florianpellet.com',
+    },
+  },
+  {
+    name: 'Christopher Horobin',
     isCoreMaintainer: true,
     avatar: 'https://github.com/chorobin.png',
     github: 'chorobin',
@@ -161,12 +229,13 @@ export const allMaintainers: Maintainer[] = [
     isCoreMaintainer: true,
     avatar: 'https://github.com/KyleAMathews.png',
     github: 'KyleAMathews',
-    creatorOf: ['db'],
+    creatorOf: ['db', 'intent'],
     frameworkExpertise: ['react'],
     specialties: ['Sync Engines'],
   },
   {
     name: 'Alem Tuzlak',
+    isCoreMaintainer: true,
     avatar: 'https://github.com/AlemTuzlak.png',
     github: 'AlemTuzlak',
     creatorOf: ['ai', 'devtools'],
@@ -180,24 +249,6 @@ export const allMaintainers: Maintainer[] = [
     },
     workshopsAvailable: true,
   },
-  {
-    name: 'Lachlan Collins',
-    isCoreMaintainer: true,
-    avatar: 'https://github.com/lachlancollins.png',
-    github: 'lachlancollins',
-    maintainerOf: ['config', 'query'],
-    contributorOf: [
-      'start',
-      'router',
-      'virtual',
-      'table',
-      'form',
-      'db',
-      'pacer',
-    ],
-    frameworkExpertise: ['react', 'svelte'],
-    specialties: ['Architecture'],
-  },
   {
     name: 'Sam Willis',
     isCoreMaintainer: true,
@@ -207,6 +258,19 @@ export const allMaintainers: Maintainer[] = [
     frameworkExpertise: ['react'],
     specialties: ['Sync Engines', 'Incremental View Maintenance'],
   },
+  {
+    name: 'Vedanta Somnathe',
+    avatar: 'https://github.com/theVedanta.png',
+    github: 'theVedanta',
+    maintainerOf: ['query', 'pacer'],
+    frameworkExpertise: ['preact', 'angular'],
+    social: {
+      website: 'https://vedantas.xyz/',
+      twitter: 'https://x.com/thvdnta',
+      bluesky: 'https://bsky.app/profile/thvdnta.bsky.social',
+      linkedIn: 'https://linkedin.com/in/thvdnta',
+    },
+  },
   {
     name: 'Leonardo Montini',
     avatar: 'https://github.com/Balastrong.png',
@@ -251,7 +315,7 @@ export const allMaintainers: Maintainer[] = [
     frameworkExpertise: ['react'],
     social: {
       linkedIn: 'https://www.linkedin.com/in/harry-whorlow/',
-      website: 'harry-whorlow.dev',
+      website: 'https://harry-whorlow.dev',
     },
   },
   {
@@ -271,13 +335,27 @@ export const allMaintainers: Maintainer[] = [
     social: {
       twitter: 'https://x.com/manudeli_',
       bluesky: 'https://bsky.app/profile/manudeli.bsky.social',
-      website: 'https://www.linkedin.com/in/jonghyeonko',
+      linkedIn: 'https://www.linkedin.com/in/jonghyeonko',
+    },
+  },
+  {
+    name: 'Wonsuk Choi',
+    avatar: 'https://github.com/sukvvon.png',
+    github: 'sukvvon',
+    maintainerOf: ['query'],
+    frameworkExpertise: ['react'],
+    specialties: ['TypeScript', 'Test'],
+    social: {
+      linkedIn: 'https://www.linkedin.com/in/sukvvon',
+      twitter: 'https://x.com/sukvvon',
+      bluesky: 'https://bsky.app/profile/sukvvon.bsky.social',
     },
   },
   {
     name: 'Sarah Gerrard',
     avatar: 'https://github.com/ladybluenotes.png',
     github: 'ladybluenotes',
+    creatorOf: ['intent'],
     contributorOf: [
       'ai',
       'config',
@@ -288,6 +366,7 @@ export const allMaintainers: Maintainer[] = [
       'query',
       'ranger',
       'router',
+      'hotkeys',
       'start',
       'store',
       'table',
@@ -301,12 +380,31 @@ export const allMaintainers: Maintainer[] = [
       website: 'https://sarahgerrard.me',
     },
   },
+  {
+    name: 'Lachlan Collins',
+    isCoreMaintainer: true,
+    avatar: 'https://github.com/lachlancollins.png',
+    github: 'lachlancollins',
+    maintainerOf: ['config', 'query'],
+    contributorOf: [
+      'start',
+      'router',
+      'virtual',
+      'table',
+      'form',
+      'db',
+      'pacer',
+    ],
+    frameworkExpertise: ['react', 'svelte'],
+    specialties: ['Architecture'],
+  },
   {
     name: 'Riccardo Perra',
     avatar:
       'https://cdn.bsky.app/img/avatar/plain/did:plc:gtnigsmgu7jyrc4tnkvn62qw/bafkreiceysbj4o6jrbbniudtwj3tcsns6rvwcxyjsqiaumeojurwbkki5a@jpeg',
     github: 'riccardoperra',
     maintainerOf: ['table'],
+    contributorOf: ['devtools', 'hotkeys', 'pacer'],
     frameworkExpertise: ['angular', 'solid'],
     specialties: [],
     social: {
@@ -316,16 +414,26 @@ export const allMaintainers: Maintainer[] = [
     },
   },
   {
-    name: 'Birk Skyum',
-    avatar: 'https://github.com/birkskyum.png',
-    github: 'birkskyum',
-    maintainerOf: ['start'],
-    contributorOf: ['pacer'],
-    frameworkExpertise: ['solid'],
+    name: 'Tom Beckenham',
+    github: 'tombeckenham',
+    avatar: 'https://github.com/tombeckenham.png',
+    maintainerOf: ['ai'],
+    frameworkExpertise: [],
+    social: {
+      twitter: 'https://x.com/tombeckenham',
+    },
+  },
+  {
+    name: 'Brenley Dueck',
+    avatar: 'https://github.com/brenelz.png',
+    github: 'brenelz',
+    maintainerOf: ['start', 'router'],
+    frameworkExpertise: ['react', 'solid'],
     specialties: [],
     social: {
-      twitter: 'https://x.com/birkskyum',
-      bluesky: 'https://bsky.app/profile/bskyum.bsky.social',
+      twitter: 'https://x.com/brenelz',
+      bluesky: 'https://bsky.app/profile/brenelz.com',
+      website: 'https://brenelz.com',
     },
   },
   {
@@ -356,7 +464,7 @@ export const allMaintainers: Maintainer[] = [
     social: {
       twitter: 'https://x.com/Arnoud_dv',
       bluesky: 'https://bsky.app/profile/arnoud.dev',
-      website: 'https://www.linkedin.com/in/arnouddv/',
+      linkedIn: 'https://www.linkedin.com/in/arnouddv/',
     },
     workshopsAvailable: true,
   },
@@ -452,18 +560,16 @@ export const allMaintainers: Maintainer[] = [
     workshopsAvailable: true,
   },
   {
-    name: 'Nicolas Beaussart',
-    avatar: 'https://github.com/beaussan.png',
-    github: 'beaussan',
+    name: 'Nico Lynzaad',
+    avatar: 'https://github.com/nlynzaad.png',
+    github: 'nlynzaad',
     maintainerOf: ['router'],
     frameworkExpertise: ['react'],
-    specialties: ['Monorepo', 'Architecture', 'Typescript'],
+    specialties: [],
     social: {
-      twitter: 'https://x.com/beaussan',
-      bluesky: 'https://bsky.app/profile/beaussan.io',
-      website: 'https://beaussan.io/',
+      twitter: 'https://twitter.com/NLynzaad',
     },
-    workshopsAvailable: true,
+    workshopsAvailable: false,
   },
 ]
 
@@ -487,9 +593,47 @@ export function getLibraryMaintainers(
   )
 
   // Use Set to dedupe while preserving order
-  return includeCreators
+  const libraryMaintainers = includeCreators
     ? [...new Set([...creators, ...maintainers])]
     : maintainers
+
+  return sortLibraryMaintainers(libraryId, libraryMaintainers)
+}
+
+function sortLibraryMaintainers(
+  libraryId: string,
+  maintainers: Maintainer[],
+): Maintainer[] {
+  const order = Object.entries(libraryMaintainerSortOrder).find(
+    ([orderedLibraryId]) => orderedLibraryId === libraryId,
+  )?.[1]
+
+  if (!order) {
+    return maintainers
+  }
+
+  const orderIndexByGithub = new Map(
+    order.map((github, index) => [github, index]),
+  )
+
+  return [...maintainers].sort((left, right) => {
+    const leftIndex = orderIndexByGithub.get(left.github)
+    const rightIndex = orderIndexByGithub.get(right.github)
+
+    if (leftIndex === undefined && rightIndex === undefined) {
+      return 0
+    }
+
+    if (leftIndex === undefined) {
+      return 1
+    }
+
+    if (rightIndex === undefined) {
+      return -1
+    }
+
+    return leftIndex - rightIndex
+  })
 }
 
 export function getLibraryContributors(
diff --git a/src/libraries/mcp.tsx b/src/libraries/mcp.tsx
deleted file mode 100644
index 53bbb574d..000000000
--- a/src/libraries/mcp.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Bot, FileSearch, Library } from 'lucide-react'
-import { twMerge } from 'tailwind-merge'
-import { mcp } from './libraries'
-
-const textStyles = 'text-black dark:text-gray-100'
-
-export const mcpProject = {
-  ...mcp,
-  featureHighlights: [
-    {
-      title: 'Search Documentation',
-      icon: <FileSearch className={twMerge('scale-125', textStyles)} />,
-      description: (
-        <div>
-          Instantly search across all TanStack documentation using Algolia.{' '}
-          <span className={twMerge('font-semibold', textStyles)}>
-            Filter by library or framework
-          </span>{' '}
-          to find exactly what you need.
-        </div>
-      ),
-    },
-    {
-      title: 'Fetch Doc Pages',
-      icon: <Bot className={twMerge('scale-125', textStyles)} />,
-      description: (
-        <div>
-          Retrieve full documentation pages with markdown content.{' '}
-          <span className={twMerge('font-semibold', textStyles)}>
-            Perfect for AI assistants
-          </span>{' '}
-          that need deep context about TanStack libraries.
-        </div>
-      ),
-    },
-    {
-      title: 'Explore Libraries',
-      icon: <Library className={twMerge('scale-125', textStyles)} />,
-      description: (
-        <div>
-          List all TanStack libraries with metadata including{' '}
-          <span className={twMerge('font-semibold', textStyles)}>
-            supported frameworks, versions, and documentation links
-          </span>
-          .
-        </div>
-      ),
-    },
-  ],
-}
diff --git a/src/libraries/pacer.tsx b/src/libraries/pacer.tsx
index d347dc4a9..645f6f6bd 100644
--- a/src/libraries/pacer.tsx
+++ b/src/libraries/pacer.tsx
@@ -7,7 +7,6 @@ const textStyles = `text-lime-600 dark:text-lime-500`
 export const pacerProject = {
   ...pacer,
   description: `Optimize your application's performance with TanStack Pacer's core primitives: Debouncing, Throttling, Rate Limiting, Queuing, and Batching.`,
-  ogImage: 'https://github.com/tanstack/pacer/raw/main/media/repo-header.png',
   latestBranch: 'main',
   bgRadial: 'from-lime-500 via-lime-700/50 to-transparent',
   textColor: `text-lime-700`,
diff --git a/src/libraries/query.tsx b/src/libraries/query.tsx
index 198e5e6fc..2253a63b0 100644
--- a/src/libraries/query.tsx
+++ b/src/libraries/query.tsx
@@ -1,4 +1,3 @@
-import { handleRedirects } from '~/utils/handleRedirects.server'
 import { WandSparkles, Zap } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { CogsIcon } from '~/components/icons/CogsIcon'
@@ -9,39 +8,13 @@ const textStyles = 'text-red-500 dark:text-red-400'
 export const queryProject = {
   ...query,
   description:
-    'Powerful asynchronous state management, server-state utilities and data fetching. Fetch, cache, update, and wrangle all forms of async data in your TS/JS, React, Vue, Solid, Svelte & Angular applications all without touching any "global state"',
-  ogImage: 'https://github.com/tanstack/query/raw/main/media/repo-header.png',
+    'Powerful asynchronous state management, server-state utilities and data fetching. Fetch, cache, update, and wrangle all forms of async data in your TS/JS, React, Vue, Solid, Svelte, Angular & Lit applications all without touching any "global state"',
   latestBranch: 'main',
   bgRadial: 'from-red-500 via-red-500/60 to-transparent',
   textColor: 'text-amber-500',
   defaultDocs: 'framework/react/overview',
   installPath: 'framework/$framework/installation',
   legacyPackages: ['react-query'],
-  handleRedirects: (href: string) => {
-    handleRedirects(
-      reactQueryV3List,
-      href,
-      '/query/v3',
-      '/query/latest',
-      'from=reactQueryV3',
-    )
-
-    handleRedirects(
-      reactQueryV3RemovedInV5List,
-      href,
-      '/query/v3',
-      '/query/v5',
-      'from=reactQueryV3',
-    )
-
-    handleRedirects(
-      queryCommunityLinks,
-      href,
-      '/query/latest',
-      '/query/latest',
-      'from=communityLinks',
-    )
-  },
   testimonials: [
     {
       quote:
@@ -160,136 +133,3 @@ export const queryProject = {
     },
   ],
 }
-
-// Redirect old query v3 docs
-// prettier-ignore
-const reactQueryV3List = [
-    {from: "overview", to: "docs/framework/react/overview"},
-    {from: "installation", to: "docs/framework/react/installation"},
-    {from: "quick-start", to: "docs/framework/react/quick-start"},
-    {from: "devtools", to: "docs/framework/react/devtools"},
-    {from: "videos", to: "docs/framework/react/videos"},
-    {from: "comparison", to: "docs/framework/react/comparison"},
-    {from: "typescript", to: "docs/framework/react/typescript"},
-    {from: "graphql", to: "docs/framework/react/graphql"},
-    {from: "react-native", to: "docs/framework/react/react-native"},
-    {from: "guides/important-defaults", to: "docs/framework/react/guides/important-defaults"},
-    {from: "guides/queries", to: "docs/framework/react/guides/queries"},
-    {from: "guides/query-keys", to: "docs/framework/react/guides/query-keys"},
-    {from: "guides/query-functions", to: "docs/framework/react/guides/query-functions"},
-    {from: "guides/network-mode", to: "docs/framework/react/guides/network-mode"},
-    {from: "guides/parallel-queries", to: "docs/framework/react/guides/parallel-queries"},
-    {from: "guides/dependent-queries", to: "docs/framework/react/guides/dependent-queries"},
-    {from: "guides/background-fetching-indicators", to: "docs/framework/react/guides/background-fetching-indicators"},
-    {from: "guides/window-focus-refetching", to: "docs/framework/react/guides/window-focus-refetching"},
-    {from: "guides/disabling-queries", to: "docs/framework/react/guides/disabling-queries"},
-    {from: "guides/query-retries", to: "docs/framework/react/guides/query-retries"},
-    {from: "guides/paginated-queries", to: "docs/framework/react/guides/paginated-queries"},
-    {from: "guides/infinite-queries", to: "docs/framework/react/guides/infinite-queries"},
-    {from: "guides/placeholder-query-data", to: "docs/framework/react/guides/placeholder-query-data"},
-    {from: "guides/initial-query-data", to: "docs/framework/react/guides/initial-query-data"},
-    {from: "guides/prefetching", to: "docs/framework/react/guides/prefetching"},
-    {from: "guides/mutations", to: "docs/framework/react/guides/mutations"},
-    {from: "guides/query-invalidation", to: "docs/framework/react/guides/query-invalidation"},
-    {from: "guides/invalidations-from-mutations", to: "docs/framework/react/guides/invalidations-from-mutations"},
-    {from: "guides/updates-from-mutation-responses", to: "docs/framework/react/guides/updates-from-mutation-responses"},
-    {from: "guides/optimistic-updates", to: "docs/framework/react/guides/optimistic-updates"},
-    {from: "guides/query-cancellation", to: "docs/framework/react/guides/query-cancellation"},
-    {from: "guides/scroll-restoration", to: "docs/framework/react/guides/scroll-restoration"},
-    {from: "guides/filters", to: "docs/framework/react/guides/filters"},
-    {from: "guides/ssr", to: "docs/framework/react/guides/ssr"},
-    {from: "guides/caching", to: "docs/framework/react/guides/caching"},
-    {from: "guides/default-query-function", to: "docs/framework/react/guides/default-query-function"},
-    {from: "guides/suspense", to: "docs/framework/react/guides/suspense"},
-    {from: "guides/testing", to: "docs/framework/react/guides/testing"},
-    {from: "guides/does-this-replace-client-state", to: "docs/framework/react/guides/does-this-replace-client-state"},
-    {from: "guides/migrating-to-react-query-3", to: "docs/framework/react/guides/migrating-to-react-query-3"},
-    {from: "guides/migrating-to-react-query-4", to: "docs/framework/react/guides/migrating-to-react-query-4"},
-    {from: "community/tkdodos-blog", to: "docs/framework/react/community/tkdodos-blog"},
-    {from: "examples/simple", to: "docs/framework/react/examples/simple"},
-    {from: "examples/basic-graphql-request", to: "docs/framework/react/examples/basic-graphql-request"},
-    {from: "examples/custom-hooks", to: "docs/framework/react/examples/custom-hooks"},
-    {from: "examples/auto-refetching", to: "docs/framework/react/examples/auto-refetching"},
-    {from: "examples/focus-refetching", to: "docs/framework/react/examples/focus-refetching"},
-    {from: "examples/optimistic-updates", to: "docs/framework/react/examples/optimistic-updates-typescript"},
-    {from: "examples/optimistic-updates-typescript", to: "docs/framework/react/examples/optimistic-updates-typescript"},
-    {from: "examples/pagination", to: "docs/framework/react/examples/pagination"},
-    {from: "examples/load-more-infinite-scroll", to: "docs/framework/react/examples/load-more-infinite-scroll"},
-    {from: "examples/suspense", to: "docs/framework/react/examples/suspense"},
-    {from: "examples/default-query-function", to: "docs/framework/react/examples/default-query-function"},
-    {from: "examples/playground", to: "docs/framework/react/examples/playground"},
-    {from: "examples/prefetching", to: "docs/framework/react/examples/prefetching"},
-    {from: "examples/star-wars", to: "docs/framework/react/examples/star-wars"},
-    {from: "examples/rick-morty", to: "docs/framework/react/examples/rick-morty"},
-    {from: "examples/nextjs", to: "docs/framework/react/examples/nextjs"},
-    {from: "examples/react-native", to: "docs/framework/react/examples/react-native"},
-    {from: "examples/offline", to: "docs/framework/react/examples/offline"},
-    {from: "plugins/persistQueryClient", to: "docs/framework/react/plugins/persistQueryClient"},
-    {from: "plugins/broadcastQueryClient", to: "docs/framework/react/plugins/broadcastQueryClient"},
-    {from: "reference/useQueries", to: "docs/framework/react/reference/useQueries"},
-    {from: "reference/useInfiniteQuery", to: "docs/framework/react/reference/useInfiniteQuery"},
-    {from: "reference/useMutation", to: "docs/framework/react/reference/useMutation"},
-    {from: "reference/useIsFetching", to: "docs/framework/react/reference/useIsFetching"},
-    {from: "reference/useIsMutating", to: "docs/framework/react/reference/useIsMutating"},
-    {from: "reference/QueryClientProvider", to: "docs/framework/react/reference/QueryClientProvider"},
-    {from: "reference/useQueryClient", to: "docs/framework/react/reference/useQueryClient"},
-    {from: "reference/QueryCache", to: "docs/reference/QueryCache"},
-    {from: "reference/MutationCache", to: "docs/reference/MutationCache"},
-    {from: "reference/QueryObserver", to: "docs/reference/QueryObserver"},
-    {from: "reference/InfiniteQueryObserver", to: "docs/reference/InfiniteQueryObserver"},
-    {from: "reference/QueriesObserver", to: "docs/reference/QueriesObserver"},
-    {from: "reference/QueryErrorResetBoundary", to: "docs/framework/react/reference/QueryErrorResetBoundary"},
-    {from: "reference/useQueryErrorResetBoundary", to: "docs/framework/react/reference/useQueryErrorResetBoundary"},
-    {from: "reference/focusManager", to: "docs/reference/focusManager"},
-    {from: "reference/onlineManager", to: "docs/reference/onlineManager"},
-    {from: "reference/hydration", to: "docs/framework/react/reference/hydration"},
-    {from: "reference/useQuery", to: "docs/framework/react/reference/useQuery"},
-    {from: "reference/QueryClient", to: "docs/reference/QueryClient"},
-    {from: "examples/basic", to: "docs/framework/react/examples/basic"},
-    // {from: '',to: ''},
-  ]
-
-/**
-  Features that have been removed in v5
-*/
-// prettier-ignore
-const reactQueryV3RemovedInV5List = [
-    {from: "guides/custom-logger", to: "docs/framework/react/guides/migrating-to-v5#the-deprecated-custom-logger-has-been-removed"},
-    {from: "plugins/createWebStoragePersister", to: "docs/framework/react/guides/migrating-to-react-query-4#persistqueryclient-and-the-corresponding-persister-plugins-are-no-longer-experimental-and-have-been-renamed"},
-    {from: "plugins/createAsyncStoragePersister", to: "docs/framework/react/guides/migrating-to-react-query-4#persistqueryclient-and-the-corresponding-persister-plugins-are-no-longer-experimental-and-have-been-renamed"},
-]
-
-/*
-Community resources section to new location
-*/
-// prettier-ignore
-const queryCommunityLinks = [
-  {
-    from: 'docs/framework/react/community/tkdodos-blog',
-    to: 'docs/community-resources',
-  },
-  {
-    from: 'docs/framework/react/community/community-projects',
-    to: 'docs/community-resources',
-  },
-  {
-    from: 'docs/framework/solid/community/tkdodos-blog',
-    to: 'docs/community-resources',
-  },
-  {
-    from: 'docs/framework/solid/community/community-projects',
-    to: 'docs/community-resources',
-  },
-  {
-    from: 'docs/framework/vue/community/tkdodos-blog',
-    to: 'docs/community-resources',
-  },
-  {
-    from: 'docs/framework/vue/community/community-projects',
-    to: 'docs/community-resources',
-  },
-  {
-    from: 'docs/framework/react/videos',
-    to: 'docs/community-resources',
-  },
-]
diff --git a/src/libraries/ranger.tsx b/src/libraries/ranger.tsx
index 9a938e48d..df971a090 100644
--- a/src/libraries/ranger.tsx
+++ b/src/libraries/ranger.tsx
@@ -7,7 +7,6 @@ const textStyles = 'text-black dark:text-gray-100'
 export const rangerProject = {
   ...ranger,
   description: `Headless, lightweight, and extensible primitives for building range and multi-range sliders.`,
-  ogImage: 'https://github.com/tanstack/ranger/raw/main/media/headerv1.png',
   latestBranch: 'main',
   featureHighlights: [
     {
diff --git a/src/libraries/router.tsx b/src/libraries/router.tsx
index 3235e4d92..702fd7d62 100644
--- a/src/libraries/router.tsx
+++ b/src/libraries/router.tsx
@@ -1,6 +1,5 @@
 import { DatabaseZap, MessageCircleQuestionMark, PlugZap } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
-import { redirect } from '@tanstack/react-router'
 import { router } from './libraries'
 
 const textStyles = 'text-emerald-500 dark:text-emerald-400'
@@ -8,7 +7,6 @@ const textStyles = 'text-emerald-500 dark:text-emerald-400'
 export const routerProject = {
   ...router,
   description: `A powerful React router for client-side and full-stack react applications. Fully type-safe APIs, first-class search-params for managing state in the URL and seamless integration with the existing React ecosystem.`,
-  ogImage: 'https://github.com/tanstack/router/raw/main/media/header.png',
   latestBranch: 'main',
   docsRoot: 'docs/router',
   bgRadial: 'from-emerald-500 via-lime-600/50 to-transparent',
@@ -18,8 +16,9 @@ export const routerProject = {
   legacyPackages: ['react-location'],
   hideCodesandboxUrl: true as const,
   showVercelUrl: false,
-  showNetlifyUrl: true,
-  showCloudflareUrl: true,
+  showNetlifyUrl: false,
+  showCloudflareUrl: false,
+  showRailwayUrl: false,
   testimonials: [
     {
       quote:
@@ -118,23 +117,4 @@ export const routerProject = {
       ),
     },
   ],
-  handleRedirects(href: string) {
-    if (href.includes('router/latest/docs/framework/react/start')) {
-      throw redirect({
-        href: href.replace(
-          'router/latest/docs/framework/react/start',
-          'start/latest/docs/framework/react',
-        ),
-      })
-    }
-
-    if (href.includes('/router/latest/docs/framework/react/examples/start')) {
-      throw redirect({
-        href: href.replace(
-          'router/latest/docs/framework/react/examples/start',
-          'start/latest/docs/framework/react/examples/start',
-        ),
-      })
-    }
-  },
 }
diff --git a/src/libraries/start.tsx b/src/libraries/start.tsx
index ed2dbc0b9..1771b7014 100644
--- a/src/libraries/start.tsx
+++ b/src/libraries/start.tsx
@@ -18,6 +18,7 @@ export const startProject = {
   installPath: 'framework/$framework/build-from-scratch',
   showNetlifyUrl: true,
   showCloudflareUrl: true,
+  showRailwayUrl: true,
   // hide stackblitz until they support Async Local Storage
   hideStackblitzUrl: true as const,
   testimonials: [
diff --git a/src/libraries/store.tsx b/src/libraries/store.tsx
index 64cd9918d..424f33072 100644
--- a/src/libraries/store.tsx
+++ b/src/libraries/store.tsx
@@ -7,7 +7,6 @@ const textStyles = 'text-twine-600 dark:text-twine-500'
 export const storeProject = {
   ...store,
   description: `The immutable-reactive data store that powers the core of TanStack libraries and their framework adapters.`,
-  ogImage: 'https://github.com/tanstack/store/raw/main/media/repo-header.png',
   latestBranch: 'main',
   bgRadial: 'from-twine-500 via-twine-700/50 to-transparent',
   textColor: 'text-twine-700',
diff --git a/src/libraries/table.tsx b/src/libraries/table.tsx
index 80db856b0..238a8907f 100644
--- a/src/libraries/table.tsx
+++ b/src/libraries/table.tsx
@@ -1,4 +1,3 @@
-import { handleRedirects } from '~/utils/handleRedirects.server'
 import { PersonStanding, Zap } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { CogsIcon } from '~/components/icons/CogsIcon'
@@ -9,21 +8,11 @@ const textStyles = 'text-blue-500 dark:text-blue-400'
 export const tableProject = {
   ...table,
   description: `Supercharge your tables or build a datagrid from scratch for TS/JS, React, Vue, Solid, Svelte, Qwik, Angular, and Lit while retaining 100% control over markup and styles.`,
-  ogImage: 'https://github.com/tanstack/table/raw/main/media/repo-header.png',
   latestBranch: 'main',
   bgRadial: 'from-cyan-500 via-blue-600/50 to-transparent',
   textColor: 'text-blue-600',
   defaultDocs: 'introduction',
   legacyPackages: ['react-table'],
-  handleRedirects: (href: string) => {
-    handleRedirects(
-      reactTableV7List,
-      href,
-      '/table/v7',
-      '/table/v8',
-      'from=reactTableV7',
-    )
-  },
   testimonials: [
     {
       quote:
@@ -107,35 +96,3 @@ export const tableProject = {
     },
   ],
 }
-
-// prettier-ignore
-export const reactTableV7List = [
-    {from: 'docs/api/overview',to: 'docs/overview',},
-    {from: 'docs/api/useColumnOrder',to: 'docs/api/features/column-ordering',},
-    {from: 'docs/api/useExpanded',to: 'docs/api/features/expanding',},
-    {from: 'docs/api/useFilters',to: 'docs/api/features/filters',},
-    {from: 'docs/api/useGlobalFilter',to: 'docs/api/features/filters',},
-    {from: 'docs/api/useGroupBy',to: 'docs/api/features/grouping',},
-    {from: 'docs/api/usePagination',to: 'docs/api/features/pagination',},
-    {from: 'docs/api/useResizeColumns',to: 'docs/api/features/column-sizing',},
-    {from: 'docs/api/useRowSelect',to: 'docs/api/features/row-selection',},
-    {from: 'docs/api/useSortBy',to: 'docs/api/features/sorting',},
-    {from: 'docs/api/useTable',to: 'docs/guide/tables',},
-    {from: 'docs/examples/basic',to: 'docs/framework/react/examples/basic',},
-    {from: 'docs/examples/filtering',to: 'docs/framework/react/examples/filters',},
-    {from: 'docs/examples/footers',to: 'docs/framework/react/examples/basic',},
-    {from: 'docs/examples/grouping',to: 'docs/framework/react/examples/grouping',},
-    {from: 'docs/examples/pagination-controlled',to: 'docs/framework/react/examples/pagination-controlled',},
-    {from: 'docs/examples/pagination',to: 'docs/framework/react/examples/pagination',},
-    {from: 'docs/examples/sorting',to: 'docs/framework/react/examples/sorting',},
-    {from: 'docs/examples/row-selection',to: 'docs/framework/react/examples/row-selection',},
-    {from: 'docs/examples/row-selection-with-pagination',to: 'docs/framework/react/examples/row-selection',},
-    {from: 'docs/examples/expanding',to: 'docs/framework/react/examples/expanding',},
-    {from: 'docs/examples/editable-data',to: 'docs/framework/react/examples/editable-data',},
-    {from: 'docs/examples/column-ordering',to: 'docs/framework/react/examples/column-ordering',},
-    {from: 'docs/examples/column-hiding',to: 'docs/framework/react/examples/column-visibility',},
-    {from: 'docs/examples/column-resizing',to: 'docs/framework/react/examples/column-sizing',},
-    {from: 'docs/installation',to: 'docs/installation',},
-    {from: 'docs/overview',to: 'docs/introduction',},
-    {from: 'docs/quick-start',to: 'docs/overview',},
-]
diff --git a/src/libraries/types.ts b/src/libraries/types.ts
index ba3f28a09..5cec2be84 100644
--- a/src/libraries/types.ts
+++ b/src/libraries/types.ts
@@ -1,8 +1,14 @@
-import * as React from 'react'
+import type { ReactNode } from 'react'
+import type { LibraryId } from './ids'
+
+export type { LibraryId } from './ids'
 
 export type Framework =
   | 'angular'
+  | 'alpine'
+  | 'ember'
   | 'lit'
+  | 'marko'
   | 'preact'
   | 'qwik'
   | 'react'
@@ -11,24 +17,6 @@ export type Framework =
   | 'vanilla'
   | 'vue'
 
-export type LibraryId =
-  | 'start'
-  | 'router'
-  | 'query'
-  | 'table'
-  | 'form'
-  | 'virtual'
-  | 'ranger'
-  | 'store'
-  | 'pacer'
-  | 'db'
-  | 'ai'
-  | 'config'
-  | 'devtools'
-  | 'mcp'
-  | 'react-charts'
-  | 'create-tsrouter-app'
-
 // Base library type - used for navigation, docs, and most UI
 export type LibrarySlim = {
   id: LibraryId
@@ -58,16 +46,19 @@ export type LibrarySlim = {
   scarfId?: string
   defaultDocs?: string
   docsRoot?: string
-  ogImage?: string
   hideCodesandboxUrl?: true
   hideStackblitzUrl?: true
   showVercelUrl?: boolean
   showNetlifyUrl?: boolean
   showCloudflareUrl?: boolean
+  showRailwayUrl?: boolean
   embedEditor?: 'codesandbox' | 'stackblitz'
   legacyPackages?: string[]
+  npmPackageNames?: string[]
   installPath?: string
   corePackageName?: string
+  frameworkPackageNames?: Partial<Record<Framework, string>>
+  frameworkDocs?: Partial<Record<Framework, string>>
   handleRedirects?: (href: string) => void
   /**
    * If false, the library is hidden from sidebar navigation and pages have noindex meta tag.
@@ -75,6 +66,10 @@ export type LibrarySlim = {
    * Defaults to true.
    */
   visible?: boolean
+  sitemap?: {
+    includeLandingPage?: boolean
+    includeDocsPages?: boolean
+  }
 }
 
 // Extended library type - adds React node content for landing pages
@@ -82,8 +77,8 @@ export type LibrarySlim = {
 export type Library = LibrarySlim & {
   featureHighlights?: {
     title: string
-    icon: React.ReactNode
-    description: React.ReactNode
+    icon: ReactNode
+    description: ReactNode
   }[]
   testimonials?: Testimonial[]
 }
diff --git a/src/libraries/virtual.tsx b/src/libraries/virtual.tsx
index 87391aef7..b99b27b28 100644
--- a/src/libraries/virtual.tsx
+++ b/src/libraries/virtual.tsx
@@ -7,8 +7,7 @@ const textStyles = 'text-violet-700 dark:text-violet-400'
 
 export const virtualProject = {
   ...virtual,
-  description: `Virtualize only the visible content for massive scrollable DOM nodes at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit & Angular while retaining 100% control over markup and styles.`,
-  ogImage: 'https://github.com/tanstack/query/raw/main/media/header.png',
+  description: `Virtualize only the visible content for massive scrollable DOM nodes at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit, Angular & Marko while retaining 100% control over markup and styles.`,
   latestBranch: 'main',
   bgRadial: 'from-purple-500 via-violet-600/50 to-transparent',
   textColor: 'text-purple-600',
diff --git a/src/libraries/workflow.tsx b/src/libraries/workflow.tsx
new file mode 100644
index 000000000..72e611b2a
--- /dev/null
+++ b/src/libraries/workflow.tsx
@@ -0,0 +1,55 @@
+import { GitBranch, RotateCcw, ShieldCheck } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { workflow } from './libraries'
+
+const textStyles = 'text-blue-900 dark:text-blue-400'
+
+export const workflowProject = {
+  ...workflow,
+  description:
+    'Define durable, type-safe workflows for the messy parts of real applications: approvals, retries, fan-out, long-running jobs, and state you need to trust.',
+  featureHighlights: [
+    {
+      title: 'Typed Workflows',
+      icon: <GitBranch className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Model each step with TypeScript-first inputs, outputs, and shared
+          context.{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            Your workflow graph stays understandable as it grows
+          </span>
+          , with types carrying intent across every transition.
+        </div>
+      ),
+    },
+    {
+      title: 'Durable Execution',
+      icon: <ShieldCheck className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Keep critical business processes moving through deploys, restarts, and
+          slow external systems.{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            Workflow state is designed to be resumed, inspected, and trusted
+          </span>{' '}
+          instead of hidden inside one-off background jobs.
+        </div>
+      ),
+    },
+    {
+      title: 'Retries & Recovery',
+      icon: <RotateCcw className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Configure retries, backoff, and recovery behavior close to the work
+          being performed.{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            Handle failure as part of the workflow model
+          </span>
+          , not as scattered glue code around it.
+        </div>
+      ),
+    },
+  ],
+}
diff --git a/src/mcp/auth.server.ts b/src/mcp/auth.server.ts
index c3764078c..24f457707 100644
--- a/src/mcp/auth.server.ts
+++ b/src/mcp/auth.server.ts
@@ -5,6 +5,11 @@ import {
   validateOAuthToken,
   isOAuthClientToken,
 } from '~/auth/oauthClient.server'
+import { sha256Hex } from '~/utils/hash'
+import { getClientIp as getClientIpBase } from '~/utils/request.server'
+
+const LAST_USED_WRITE_INTERVAL_MS = 5 * 60 * 1000
+const RATE_LIMIT_CLEANUP_MAX_AGE_MS = 48 * 60 * 60 * 1000
 
 export type AuthResult =
   | { success: true; keyId: string; userId: string; rateLimitPerMinute: number }
@@ -13,13 +18,7 @@ export type AuthResult =
 /**
  * Hash an API key using SHA-256
  */
-export async function hashApiKey(key: string): Promise<string> {
-  const encoder = new TextEncoder()
-  const data = encoder.encode(key)
-  const hashBuffer = await crypto.subtle.digest('SHA-256', data)
-  const hashArray = Array.from(new Uint8Array(hashBuffer))
-  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
-}
+export const hashApiKey = sha256Hex
 
 /**
  * Generate a new API key
@@ -97,6 +96,7 @@ async function validateApiKey(rawKey: string): Promise<AuthResult> {
       id: mcpApiKeys.id,
       isActive: mcpApiKeys.isActive,
       expiresAt: mcpApiKeys.expiresAt,
+      lastUsedAt: mcpApiKeys.lastUsedAt,
       rateLimitPerMinute: mcpApiKeys.rateLimitPerMinute,
       userId: mcpApiKeys.userId,
     })
@@ -138,11 +138,15 @@ async function validateApiKey(rawKey: string): Promise<AuthResult> {
     }
   }
 
-  // Update last used timestamp (fire and forget)
-  db.update(mcpApiKeys)
-    .set({ lastUsedAt: new Date() })
-    .where(eq(mcpApiKeys.id, apiKey.id))
-    .catch(() => {})
+  if (
+    !apiKey.lastUsedAt ||
+    Date.now() - apiKey.lastUsedAt.getTime() > LAST_USED_WRITE_INTERVAL_MS
+  ) {
+    db.update(mcpApiKeys)
+      .set({ lastUsedAt: new Date() })
+      .where(eq(mcpApiKeys.id, apiKey.id))
+      .catch(() => {})
+  }
 
   return {
     success: true,
@@ -161,6 +165,7 @@ export async function checkRateLimit(
   identifierType: 'api_key' | 'ip',
   limitPerMinute: number,
 ): Promise<{ allowed: boolean; remaining: number; resetAt: Date }> {
+  const scopedIdentifier = `${identifierType}:${identifier}`
   const now = new Date()
   // Round down to the current minute
   const windowStart = new Date(
@@ -178,7 +183,7 @@ export async function checkRateLimit(
   const result = await db
     .insert(mcpRateLimits)
     .values({
-      identifier,
+      identifier: scopedIdentifier,
       identifierType,
       windowStart,
       requestCount: 1,
@@ -199,27 +204,10 @@ export async function checkRateLimit(
 }
 
 /**
- * Get client IP from request headers
+ * Get client IP from request headers (with 'unknown' fallback for rate limiting)
  */
 export function getClientIp(request: Request): string {
-  // Check common proxy headers
-  const forwarded = request.headers.get('x-forwarded-for')
-  if (forwarded) {
-    return forwarded.split(',')[0].trim()
-  }
-
-  const realIp = request.headers.get('x-real-ip')
-  if (realIp) {
-    return realIp
-  }
-
-  // Cloudflare
-  const cfIp = request.headers.get('cf-connecting-ip')
-  if (cfIp) {
-    return cfIp
-  }
-
-  return 'unknown'
+  return getClientIpBase(request, 'unknown')
 }
 
 /**
@@ -247,7 +235,7 @@ export async function checkWriteRateLimit(
   const result = await db
     .insert(mcpRateLimits)
     .values({
-      identifier: userId,
+      identifier: `user_write:${userId}`,
       identifierType: 'user_write',
       windowStart,
       requestCount: 1,
@@ -272,8 +260,8 @@ export async function checkWriteRateLimit(
  * Call periodically to prevent table bloat
  */
 export async function cleanupRateLimits(): Promise<void> {
-  const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000)
+  const cutoff = new Date(Date.now() - RATE_LIMIT_CLEANUP_MAX_AGE_MS)
   await db
     .delete(mcpRateLimits)
-    .where(sql`${mcpRateLimits.windowStart} < ${twoHoursAgo}`)
+    .where(sql`${mcpRateLimits.windowStart} < ${cutoff}`)
 }
diff --git a/src/mcp/server.ts b/src/mcp/server.ts
index 1068f83f7..fc44aaba8 100644
--- a/src/mcp/server.ts
+++ b/src/mcp/server.ts
@@ -1,11 +1,6 @@
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
-import { captureEvent } from '~/utils/posthog.server'
 import { withSentrySpan, captureException } from '~/utils/sentry.server'
-import { listLibraries, listLibrariesSchema } from './tools/list-libraries'
-import { doc, docSchema } from './tools/doc'
-import { searchDocs, searchDocsSchema } from './tools/search-docs'
 import { npmStats, npmStatsSchema } from './tools/npm-stats'
-import { ecosystem, ecosystemSchema } from './tools/ecosystem'
 import { env } from '~/utils/env'
 
 export type McpAuthContext = {
@@ -20,12 +15,8 @@ type ToolResult = {
 
 type ToolHandler<TArgs> = (args: TArgs) => Promise<ToolResult>
 
-function textResult(text: string): ToolResult {
-  return { content: [{ type: 'text', text }] }
-}
-
 function jsonResult(data: unknown): ToolResult {
-  return textResult(JSON.stringify(data))
+  return { content: [{ type: 'text', text: JSON.stringify(data) }] }
 }
 
 function errorResult(error: unknown): ToolResult {
@@ -36,48 +27,29 @@ function errorResult(error: unknown): ToolResult {
   }
 }
 
-function withAnalytics<TArgs>(
+function withToolMonitoring<TArgs>(
   toolName: string,
   handler: ToolHandler<TArgs>,
   authContext?: McpAuthContext,
 ): ToolHandler<TArgs> {
   return async (args: TArgs) => {
-    const startTime = performance.now()
-    let success = false
-    let caughtError: Error | null = null
-
     try {
-      const result = await withSentrySpan(`mcp.${toolName}`, 'mcp.tool', () =>
+      return await withSentrySpan(`mcp.${toolName}`, 'mcp.tool', () =>
         handler(args),
       )
-      success = !result.isError
-      return result
     } catch (error) {
-      caughtError = error instanceof Error ? error : new Error(String(error))
+      const caughtError =
+        error instanceof Error ? error : new Error(String(error))
+
       captureException(caughtError, { toolName, userId: authContext?.userId })
       throw error
-    } finally {
-      captureEvent(authContext?.userId ?? 'anonymous', 'mcp_tool_called', {
-        tool: toolName,
-        success,
-        response_time_ms: Math.round(performance.now() - startTime),
-        has_error: caughtError !== null,
-        error_type: caughtError?.name,
-        error_message: caughtError?.message,
-        key_id: authContext?.keyId,
-        environment: process.env.NODE_ENV ?? 'development',
-      })
     }
   }
 }
 
-export const ALL_TOOL_NAMES = [
-  'list_libraries',
-  'doc',
-  'search_docs',
-  'npm_stats',
-  'ecosystem',
-] as const
+// Tools that require authentication live here on tanstack.com
+// Documentation tools have moved to @tanstack/cli - run `npx @tanstack/cli mcp` or `tanstack mcp`
+export const ALL_TOOL_NAMES = ['npm_stats'] as const
 
 export type ToolName = (typeof ALL_TOOL_NAMES)[number]
 
@@ -108,79 +80,42 @@ function getEnabledTools(): Set<ToolName> | undefined {
   return validTools
 }
 
-export function createMcpServer(authContext?: McpAuthContext) {
-  const server = new McpServer({ name: 'tanstack', version: '1.0.0' })
-  const enabledTools = getEnabledTools()
+const SERVER_INSTRUCTIONS = `TanStack MCP Server (tanstack.com)
 
-  const isEnabled = (name: ToolName) => !enabledTools || enabledTools.has(name)
+IMPORTANT: Most TanStack MCP tools have moved to @tanstack/cli for better local development experience.
 
-  if (isEnabled('list_libraries')) {
-    server.tool(
-      'list_libraries',
-      'List TanStack libraries with metadata, frameworks, and docs URLs.',
-      listLibrariesSchema.shape,
-      withAnalytics(
-        'list_libraries',
-        async (args) =>
-          jsonResult(await listLibraries(listLibrariesSchema.parse(args))),
-        authContext,
-      ),
-    )
-  }
+To use the full TanStack MCP toolkit, run:
+  npx @tanstack/cli mcp
 
-  if (isEnabled('doc')) {
-    server.tool(
-      'doc',
-      'Fetch a TanStack documentation page by library and path.',
-      docSchema.shape,
-      withAnalytics(
-        'doc',
-        async (args) => {
-          try {
-            const result = await doc(docSchema.parse(args))
-            return {
-              content: [
-                {
-                  type: 'text',
-                  text: JSON.stringify({
-                    title: result.title,
-                    url: result.url,
-                    library: result.library,
-                    version: result.version,
-                  }),
-                },
-                { type: 'text', text: `\n---\n\n${result.content}` },
-              ],
-            }
-          } catch (error) {
-            return errorResult(error)
-          }
-        },
-        authContext,
-      ),
-    )
-  }
+Or if installed globally:
+  tanstack mcp
 
-  if (isEnabled('search_docs')) {
-    server.tool(
-      'search_docs',
-      'Search TanStack documentation. Returns matching pages with snippets.',
-      searchDocsSchema.shape,
-      withAnalytics(
-        'search_docs',
-        async (args) =>
-          jsonResult(await searchDocs(searchDocsSchema.parse(args))),
-        authContext,
-      ),
-    )
-  }
+The CLI provides these tools:
+- tanstack_list_libraries: List TanStack libraries with metadata
+- tanstack_doc: Fetch documentation pages
+- tanstack_search_docs: Search documentation via Algolia
+- tanstack_ecosystem: Browse ecosystem partners
+- listTanStackIntegrations: List available project integrations
+- createTanStackApplication: Create new TanStack Start projects
+
+This server (tanstack.com) provides authenticated tools:
+- npm_stats: NPM download statistics (requires API key)`
+
+export function createMcpServer(authContext?: McpAuthContext) {
+  const server = new McpServer(
+    { name: 'tanstack', version: '1.0.0' },
+    { instructions: SERVER_INSTRUCTIONS },
+  )
+  const enabledTools = getEnabledTools()
+
+  const isEnabled = (name: ToolName) => !enabledTools || enabledTools.has(name)
 
   if (isEnabled('npm_stats')) {
     server.tool(
       'npm_stats',
       'NPM download statistics. Org summary (default), library breakdown, or package comparison.',
       npmStatsSchema.shape,
-      withAnalytics(
+      withToolMonitoring(
         'npm_stats',
         async (args) => {
           try {
@@ -194,24 +129,5 @@ export function createMcpServer(authContext?: McpAuthContext) {
     )
   }
 
-  if (isEnabled('ecosystem')) {
-    server.tool(
-      'ecosystem',
-      'Ecosystem partner recommendations. Filter by category (database, auth, deployment, monitoring, cms, api, data-grid) or library.',
-      ecosystemSchema.shape,
-      withAnalytics(
-        'ecosystem',
-        async (args) => {
-          try {
-            return jsonResult(await ecosystem(ecosystemSchema.parse(args)))
-          } catch (error) {
-            return errorResult(error)
-          }
-        },
-        authContext,
-      ),
-    )
-  }
-
   return server
 }
diff --git a/src/mcp/tools/doc.ts b/src/mcp/tools/doc.ts
deleted file mode 100644
index 9aa1697f5..000000000
--- a/src/mcp/tools/doc.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { z } from 'zod'
-import { findLibrary, getBranch } from '~/libraries'
-import { fetchRepoFile, extractFrontMatter } from '~/utils/documents.server'
-
-export const docSchema = z.object({
-  library: z.string().describe('Library ID (e.g., query, router, table, form)'),
-  path: z
-    .string()
-    .describe('Documentation path (e.g., framework/react/overview)'),
-  version: z
-    .string()
-    .optional()
-    .describe('Version (e.g., v5, v1). Defaults to latest'),
-})
-
-export type DocInput = z.infer<typeof docSchema>
-
-export async function doc(input: DocInput) {
-  const { library: libraryId, path, version = 'latest' } = input
-
-  const library = findLibrary(libraryId)
-  if (!library) {
-    throw new Error(
-      `Library "${libraryId}" not found. Use list_libraries to see available libraries.`,
-    )
-  }
-
-  if (version !== 'latest' && !library.availableVersions.includes(version)) {
-    throw new Error(
-      `Version "${version}" not found for ${library.name}. Available: ${library.availableVersions.join(', ')}`,
-    )
-  }
-
-  const branch = getBranch(library, version)
-  const filePath = `${library.docsRoot || 'docs'}/${path}.md`
-  const file = await fetchRepoFile(library.repo, branch, filePath)
-
-  if (!file) {
-    throw new Error(
-      `Document not found: ${library.name} / ${path} (version: ${version})`,
-    )
-  }
-
-  const frontMatter = extractFrontMatter(file)
-
-  return {
-    title: frontMatter.data?.title || path.split('/').pop() || 'Untitled',
-    content: frontMatter.content,
-    url: `https://tanstack.com/${libraryId}/${version}/docs/${path}`,
-    library: library.name,
-    version: version === 'latest' ? library.latestVersion : version,
-  }
-}
diff --git a/src/mcp/tools/ecosystem.ts b/src/mcp/tools/ecosystem.ts
deleted file mode 100644
index 5e08c5ea5..000000000
--- a/src/mcp/tools/ecosystem.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { z } from 'zod'
-import {
-  partners,
-  partnerCategories,
-  partnerCategoryLabels,
-} from '~/utils/partners'
-
-export const ecosystemSchema = z.object({
-  category: z
-    .string()
-    .optional()
-    .describe(
-      'Filter by category: database, auth, deployment, monitoring, cms, api, data-grid, code-review, learning',
-    ),
-  library: z
-    .string()
-    .optional()
-    .describe('Filter by TanStack library (e.g., start, router, query, table)'),
-})
-
-export type EcosystemInput = z.infer<typeof ecosystemSchema>
-
-const categoryAliases: Record<string, string> = {
-  db: 'database',
-  postgres: 'database',
-  sql: 'database',
-  login: 'auth',
-  authentication: 'auth',
-  hosting: 'deployment',
-  deploy: 'deployment',
-  serverless: 'deployment',
-  errors: 'monitoring',
-  logging: 'monitoring',
-  content: 'cms',
-  'api-keys': 'api',
-  grid: 'data-grid',
-  review: 'code-review',
-  courses: 'learning',
-}
-
-type Category = (typeof partnerCategories)[number]
-
-function resolveCategory(input: string): Category | undefined {
-  const normalized = input.toLowerCase().trim()
-  const resolved = categoryAliases[normalized] || normalized
-  return partnerCategories.includes(resolved as Category)
-    ? (resolved as Category)
-    : undefined
-}
-
-export async function ecosystem(input: EcosystemInput) {
-  const resolvedCategory = input.category
-    ? resolveCategory(input.category)
-    : undefined
-  const lib = input.library?.toLowerCase().trim()
-
-  const results = partners
-    .filter((p) => p.status === 'active')
-    .filter((p) => !resolvedCategory || p.category === resolvedCategory)
-    .filter((p) => !lib || p.libraries?.some((l) => l === lib))
-    .sort((a, b) => b.score - a.score)
-    .map((p) => ({
-      id: p.id,
-      name: p.name,
-      tagline: p.tagline,
-      description: p.llmDescription,
-      category: p.category,
-      categoryLabel: partnerCategoryLabels[p.category],
-      url: p.href,
-      libraries: p.libraries || [],
-    }))
-
-  return {
-    query: {
-      category: input.category,
-      categoryResolved: resolvedCategory,
-      library: input.library,
-    },
-    count: results.length,
-    partners: results,
-  }
-}
diff --git a/src/mcp/tools/list-libraries.ts b/src/mcp/tools/list-libraries.ts
deleted file mode 100644
index c22f50baf..000000000
--- a/src/mcp/tools/list-libraries.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { z } from 'zod'
-import {
-  libraries,
-  librariesByGroup,
-  librariesGroupNamesMap,
-} from '~/libraries/libraries'
-
-const groupKeys = ['state', 'headlessUI', 'performance', 'tooling'] as const
-type GroupKey = (typeof groupKeys)[number]
-
-export const listLibrariesSchema = z.object({
-  group: z
-    .enum(groupKeys)
-    .optional()
-    .describe(
-      'Filter libraries by group. Options: state, headlessUI, performance, tooling',
-    ),
-})
-
-export type ListLibrariesInput = z.infer<typeof listLibrariesSchema>
-
-export async function listLibraries(input: ListLibrariesInput) {
-  let librariesToReturn = libraries
-
-  if (input.group) {
-    const groupLibraries = librariesByGroup[input.group as GroupKey]
-    if (groupLibraries) {
-      librariesToReturn = groupLibraries
-    }
-  }
-
-  // Filter out libraries without landing pages (react-charts, create-tsrouter-app)
-  // and the MCP library itself (meta/circular)
-  const filteredLibraries = librariesToReturn.filter(
-    (lib) => lib.to && lib.id !== 'mcp',
-  )
-
-  const result = filteredLibraries.map((lib) => ({
-    id: lib.id,
-    name: lib.name,
-    tagline: lib.tagline,
-    description: lib.description,
-    frameworks: lib.frameworks,
-    latestVersion: lib.latestVersion,
-    docsUrl: lib.defaultDocs
-      ? `https://tanstack.com/${lib.id}/latest/docs/${lib.defaultDocs}`
-      : `https://tanstack.com/${lib.id}`,
-    githubUrl: lib.repo ? `https://github.com/${lib.repo}` : undefined,
-  }))
-
-  const groupName = input.group
-    ? librariesGroupNamesMap[input.group as GroupKey]
-    : 'All Libraries'
-
-  return {
-    group: groupName,
-    count: result.length,
-    libraries: result,
-  }
-}
diff --git a/src/mcp/tools/npm-stats.ts b/src/mcp/tools/npm-stats.ts
index 326fe721d..c1244d25c 100644
--- a/src/mcp/tools/npm-stats.ts
+++ b/src/mcp/tools/npm-stats.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod'
+import { libraries } from '~/libraries'
 import { getPopularComparisons } from '~/routes/stats/npm/-comparisons'
 import { fetchNpmDownloadsBulk } from '~/utils/stats.server'
 
@@ -94,27 +95,21 @@ function extractPackageNames(
 }
 
 async function getOrgStats() {
-  const {
-    getCachedNpmOrgStats,
-    getExpiredNpmOrgStats,
-    getAllCachedLibraryStats,
-  } = await import('~/utils/stats-db.server')
-
-  const orgStats =
-    (await getCachedNpmOrgStats('tanstack')) ??
-    (await getExpiredNpmOrgStats('tanstack'))
-  if (!orgStats) {
+  const { getHomepageNpmStatsSummary } =
+    await import('~/utils/homepage-npm-stats.server')
+  const summary = await getHomepageNpmStatsSummary()
+
+  if (!summary) {
     throw new Error(
       'NPM stats not available. Stats are refreshed every 6 hours.',
     )
   }
 
-  const libraryStats = await getAllCachedLibraryStats()
   return {
     org: 'tanstack',
-    totalDownloads: orgStats.totalDownloads,
-    ratePerDay: orgStats.ratePerDay ?? 0,
-    libraries: libraryStats
+    totalDownloads: summary.totalDownloads,
+    ratePerDay: summary.weeklyRatePerDay,
+    libraries: summary.librarySummaries
       .map((lib) => ({
         id: lib.libraryId,
         downloads: lib.totalDownloads,
@@ -125,36 +120,31 @@ async function getOrgStats() {
 }
 
 async function getLibraryStats(libraryId: string) {
-  const {
-    getCachedLibraryStats,
-    getRegisteredPackages,
-    getBatchCachedNpmPackageStats,
-  } = await import('~/utils/stats-db.server')
-
-  const libraryStats = await getCachedLibraryStats(libraryId)
-  if (!libraryStats) {
+  const library = libraries.find((item) => item.id === libraryId)
+  if (!library) {
     throw new Error(
       `Library "${libraryId}" not found. Use list_libraries to see available libraries.`,
     )
   }
 
-  const packageNames = await getRegisteredPackages(libraryId)
-  const packageStats = await getBatchCachedNpmPackageStats(packageNames)
+  const packageNames =
+    library.npmPackageNames ??
+    (library.corePackageName ? [library.corePackageName] : [])
 
-  const packages = packageNames
-    .map((name) => {
-      const stats = packageStats.get(name)
-      return {
-        name,
-        downloads: stats?.downloads ?? 0,
-        ratePerDay: stats?.ratePerDay ?? 0,
-      }
-    })
-    .sort((a, b) => b.downloads - a.downloads)
+  if (packageNames.length === 0) {
+    throw new Error(`Library "${libraryId}" does not declare NPM packages.`)
+  }
+
+  const comparison = await comparePackages(packageNames, 'all', 'monthly')
+  const packages = comparison.packages.map((pkg) => ({
+    name: pkg.name,
+    downloads: pkg.total,
+    ratePerDay: pkg.avgPerDay,
+  }))
 
   return {
     library: libraryId,
-    totalDownloads: libraryStats.totalDownloads,
+    totalDownloads: packages.reduce((sum, p) => sum + p.downloads, 0),
     ratePerDay: packages.reduce((sum, p) => sum + p.ratePerDay, 0),
     packages,
   }
@@ -176,7 +166,7 @@ async function comparePackages(
   })
 
   const packages = results
-    .map((group, i) => {
+    .map((group: any, i: number) => {
       const downloads = group.packages[0].downloads as Array<{
         day: string
         downloads: number
@@ -189,7 +179,7 @@ async function comparePackages(
         data: aggregateByBin(downloads, bin),
       }
     })
-    .sort((a, b) => b.total - a.total)
+    .sort((a: { total: number }, b: { total: number }) => b.total - a.total)
 
   return { range: { start: startDate, end: endDate }, bin, packages }
 }
diff --git a/src/mcp/tools/search-docs.ts b/src/mcp/tools/search-docs.ts
deleted file mode 100644
index 58db25423..000000000
--- a/src/mcp/tools/search-docs.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { z } from 'zod'
-import { liteClient } from 'algoliasearch/lite'
-
-const ALGOLIA_APP_ID = 'FQ0DQ6MA3C'
-const ALGOLIA_API_KEY = '10c34d6a5c89f6048cf644d601e65172'
-const ALGOLIA_INDEX = 'tanstack-test'
-
-export const searchDocsSchema = z.object({
-  query: z.string().describe('Search query'),
-  library: z
-    .string()
-    .optional()
-    .describe('Filter to specific library (e.g., query, router)'),
-  framework: z
-    .string()
-    .optional()
-    .describe('Filter to specific framework (e.g., react, vue, solid)'),
-  limit: z
-    .number()
-    .min(1)
-    .max(50)
-    .optional()
-    .describe('Maximum number of results (default: 10, max: 50)'),
-})
-
-export type SearchDocsInput = z.infer<typeof searchDocsSchema>
-
-interface AlgoliaHierarchy {
-  lvl0?: string
-  lvl1?: string
-  lvl2?: string
-  lvl3?: string
-  lvl4?: string
-  lvl5?: string
-  lvl6?: string
-}
-
-interface AlgoliaHit {
-  objectID: string
-  url: string
-  library?: string
-  hierarchy: AlgoliaHierarchy
-  content?: string
-  _snippetResult?: {
-    content?: {
-      value?: string
-    }
-  }
-}
-
-export async function searchDocs(input: SearchDocsInput) {
-  const { query, library, framework, limit = 10 } = input
-
-  const client = liteClient(ALGOLIA_APP_ID, ALGOLIA_API_KEY)
-
-  // Build filters
-  // When library/framework specified, we filter to:
-  // 1. Pages matching that library/framework
-  // 2. Pages without that attribute (core docs, integrations, landing pages)
-  //
-  // Algolia doesn't support "NOT attr:*" well, so we build an exclusion list
-  // of OTHER libraries/frameworks to filter out
-  const ALL_LIBRARIES = [
-    'config',
-    'form',
-    'optimistic',
-    'pacer',
-    'query',
-    'ranger',
-    'react-charts',
-    'router',
-    'start',
-    'store',
-    'table',
-    'virtual',
-    'db',
-    'devtools',
-  ]
-
-  const ALL_FRAMEWORKS = ['react', 'vue', 'solid', 'svelte', 'angular']
-
-  const filterParts: string[] = ['version:latest']
-
-  if (library) {
-    // Exclude other libraries, but allow pages with no library attribute
-    const otherLibraries = ALL_LIBRARIES.filter((l) => l !== library)
-    const exclusions = otherLibraries
-      .map((l) => `NOT library:${l}`)
-      .join(' AND ')
-    if (exclusions) {
-      filterParts.push(`(${exclusions})`)
-    }
-  }
-
-  if (framework) {
-    // Exclude other frameworks, but allow pages with no framework attribute
-    const otherFrameworks = ALL_FRAMEWORKS.filter((f) => f !== framework)
-    const exclusions = otherFrameworks
-      .map((f) => `NOT framework:${f}`)
-      .join(' AND ')
-    if (exclusions) {
-      filterParts.push(`(${exclusions})`)
-    }
-  }
-
-  const response = await client.search<AlgoliaHit>({
-    requests: [
-      {
-        indexName: ALGOLIA_INDEX,
-        query,
-        hitsPerPage: Math.min(limit, 50),
-        filters: filterParts.join(' AND '),
-        attributesToRetrieve: ['hierarchy', 'url', 'content', 'library'],
-        attributesToSnippet: ['content:80'],
-      },
-    ],
-  })
-
-  const searchResult = response.results[0]
-  if (!searchResult || !('hits' in searchResult)) {
-    return { query, totalHits: 0, results: [] }
-  }
-
-  const formattedResults = searchResult.hits.map((hit) => {
-    // Build breadcrumb from hierarchy
-    const breadcrumb = Object.values(hit.hierarchy).filter((v): v is string =>
-      Boolean(v),
-    )
-
-    return {
-      title: hit.hierarchy?.lvl1 || hit.hierarchy?.lvl0 || 'Untitled',
-      url: hit.url,
-      snippet: hit._snippetResult?.content?.value || hit.content || '',
-      library: hit.library || 'unknown',
-      breadcrumb,
-    }
-  })
-
-  return {
-    query,
-    totalHits:
-      'nbHits' in searchResult ? searchResult.nbHits : formattedResults.length,
-    results: formattedResults,
-  }
-}
diff --git a/src/mcp/transport.ts b/src/mcp/transport.ts
index 80f03d42a..f63b85cca 100644
--- a/src/mcp/transport.ts
+++ b/src/mcp/transport.ts
@@ -5,8 +5,10 @@ import {
   checkRateLimit,
   cleanupRateLimits,
 } from './auth.server'
-import { flushPostHog } from '~/utils/posthog.server'
 import { initSentryServer } from '~/utils/sentry.server'
+import { validateContentLength } from '~/utils/api-boundary.server'
+
+const MAX_MCP_REQUEST_BYTES = 128 * 1024
 
 /**
  * Create a JSON-RPC error response
@@ -37,6 +39,18 @@ export async function handleMcpRequest(request: Request): Promise<Response> {
   // Initialize Sentry once per request
   initSentryServer()
 
+  const contentLengthError = validateContentLength(
+    request,
+    MAX_MCP_REQUEST_BYTES,
+  )
+  if (contentLengthError) {
+    return jsonRpcError(
+      -32600,
+      contentLengthError.message,
+      contentLengthError.status,
+    )
+  }
+
   // Validate auth
   const authHeader = request.headers.get('Authorization')
 
@@ -59,6 +73,25 @@ export async function handleMcpRequest(request: Request): Promise<Response> {
     keyId: authResult.keyId,
   }
 
+  if (request.method === 'GET') {
+    return jsonRpcError(
+      -32000,
+      'SSE streams are not supported by this stateless MCP endpoint. Send JSON-RPC requests with POST.',
+      405,
+      {
+        Allow: 'POST, DELETE',
+        'Cache-Control': 'no-store',
+      },
+    )
+  }
+
+  if (request.method !== 'DELETE') {
+    const contentType = request.headers.get('content-type') || ''
+    if (!contentType.toLowerCase().includes('application/json')) {
+      return jsonRpcError(-32600, 'Expected application/json request body', 415)
+    }
+  }
+
   // Check rate limit
   const rateLimit = await checkRateLimit(
     authResult.keyId,
@@ -108,14 +141,8 @@ export async function handleMcpRequest(request: Request): Promise<Response> {
       headers,
     })
   } catch (error) {
+    console.error('[MCP] Request failed:', error)
     // Return error response for unhandled errors
-    return jsonRpcError(
-      -32603,
-      error instanceof Error ? error.message : 'Internal error',
-      500,
-    )
-  } finally {
-    // Flush PostHog events before serverless function terminates
-    await flushPostHog()
+    return jsonRpcError(-32603, 'Internal error', 500)
   }
 }
diff --git a/src/queries/auth.ts b/src/queries/auth.ts
index 461baa014..8cd01488a 100644
--- a/src/queries/auth.ts
+++ b/src/queries/auth.ts
@@ -1,5 +1,5 @@
 import { queryOptions } from '@tanstack/react-query'
-import { getCurrentUser } from '~/utils/auth.server'
+import { getCurrentUser } from '~/utils/auth.functions'
 
 export const currentUserQueryOptions = () =>
   queryOptions({
diff --git a/src/queries/docsConfig.ts b/src/queries/docsConfig.ts
new file mode 100644
index 000000000..3d75cf630
--- /dev/null
+++ b/src/queries/docsConfig.ts
@@ -0,0 +1,25 @@
+import { queryOptions } from '@tanstack/react-query'
+import { getBranch, getLibrary, type LibraryId } from '~/libraries'
+import { getTanstackDocsConfig } from '~/utils/config'
+
+function getDocsConfigRequest(libraryId: LibraryId, version: string) {
+  const library = getLibrary(libraryId)
+  const branch = getBranch(library, version)
+  const docsRoot = library.docsRoot || 'docs'
+
+  return {
+    branch,
+    docsRoot,
+    repo: library.repo,
+  }
+}
+
+export function docsConfigQueryOptions(libraryId: LibraryId, version: string) {
+  const request = getDocsConfigRequest(libraryId, version)
+
+  return queryOptions({
+    queryKey: ['docs-config', request.repo, request.branch, request.docsRoot],
+    queryFn: () => getTanstackDocsConfig({ data: request }),
+    staleTime: 1000 * 60 * 5,
+  })
+}
diff --git a/src/queries/feed.ts b/src/queries/feed.ts
deleted file mode 100644
index aba1f72e5..000000000
--- a/src/queries/feed.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { queryOptions } from '@tanstack/react-query'
-import {
-  listFeedEntries,
-  getFeedEntry,
-  getFeedEntryById,
-  getFeedStats,
-  getFeedFacetCounts,
-} from '~/utils/feed.functions'
-import type { EntryType, ReleaseLevel } from '~/db/types'
-
-export interface FeedFilters {
-  entryTypes?: EntryType[]
-  libraries?: string[]
-  partners?: string[]
-  tags?: string[]
-  releaseLevels?: ReleaseLevel[]
-  includePrerelease?: boolean
-  featured?: boolean
-  search?: string
-  includeHidden?: boolean
-}
-
-export interface ListFeedEntriesParams {
-  pagination: {
-    limit: number
-    page?: number
-  }
-  filters?: FeedFilters
-}
-
-export const listFeedEntriesQueryOptions = (params: ListFeedEntriesParams) =>
-  queryOptions({
-    queryKey: ['feed', 'list', params],
-    queryFn: () => listFeedEntries({ data: params }),
-  })
-
-export const getFeedEntryQueryOptions = (id: string) =>
-  queryOptions({
-    queryKey: ['feed', 'entry', id],
-    queryFn: () => getFeedEntry({ data: { id } }),
-  })
-
-export const getFeedEntryByIdQueryOptions = (id: string) =>
-  queryOptions({
-    queryKey: ['feed', 'entryById', id],
-    queryFn: () => getFeedEntryById({ data: { id } }),
-  })
-
-export const getFeedStatsQueryOptions = () =>
-  queryOptions({
-    queryKey: ['feed', 'stats'],
-    queryFn: () => getFeedStats(),
-  })
-
-export const getFeedFacetCountsQueryOptions = (filters?: FeedFilters) =>
-  queryOptions({
-    queryKey: ['feed', 'facetCounts', filters],
-    queryFn: () => getFeedFacetCounts({ data: { filters } }),
-  })
diff --git a/src/queries/intent.ts b/src/queries/intent.ts
new file mode 100644
index 000000000..026e51a2c
--- /dev/null
+++ b/src/queries/intent.ts
@@ -0,0 +1,106 @@
+import { queryOptions } from '@tanstack/react-query'
+import {
+  getIntentStats,
+  getIntentDirectory,
+  getIntentPackageDetail,
+  getIntentVersionSkills,
+  diffIntentVersions,
+  searchIntentSkills,
+  getIntentSkillHistory,
+  getIntentPackageChangelog,
+  getIntentSingleSkillHistory,
+  getIntentSkillContentDiff,
+} from '~/utils/intent.functions'
+
+export const intentStatsQueryOptions = () =>
+  queryOptions({
+    queryKey: ['intent', 'stats'],
+    queryFn: () => getIntentStats(),
+    staleTime: 5 * 60 * 1000,
+  })
+
+export const intentDirectoryQueryOptions = (params: {
+  search?: string
+  framework?: string
+  sort?: 'downloads' | 'name' | 'skills' | 'newest'
+  page?: number
+  pageSize?: number
+}) =>
+  queryOptions({
+    queryKey: ['intent', 'directory', params],
+    queryFn: () => getIntentDirectory({ data: params }),
+    staleTime: 5 * 60 * 1000,
+  })
+
+export const intentPackageDetailQueryOptions = (name: string) =>
+  queryOptions({
+    queryKey: ['intent', 'package', name],
+    queryFn: () => getIntentPackageDetail({ data: { name } }),
+    staleTime: 10 * 60 * 1000,
+  })
+
+export const intentVersionSkillsQueryOptions = (params: {
+  packageName: string
+  version: string
+}) =>
+  queryOptions({
+    queryKey: ['intent', 'skills', params.packageName, params.version],
+    queryFn: () => getIntentVersionSkills({ data: params }),
+    staleTime: 30 * 60 * 1000,
+  })
+
+export const intentSkillSearchQueryOptions = (query: string) =>
+  queryOptions({
+    queryKey: ['intent', 'skill-search', query],
+    queryFn: () => searchIntentSkills({ data: { query } }),
+    staleTime: 2 * 60 * 1000,
+    enabled: query.trim().length > 0,
+  })
+
+export const intentVersionDiffQueryOptions = (params: {
+  packageName: string
+  fromVersion: string
+  toVersion: string
+}) =>
+  queryOptions({
+    queryKey: ['intent', 'diff', params],
+    queryFn: () => diffIntentVersions({ data: params }),
+    staleTime: 30 * 60 * 1000,
+  })
+
+export const intentSkillHistoryQueryOptions = (packageNames: Array<string>) =>
+  queryOptions({
+    queryKey: ['intent', 'skill-history', packageNames],
+    queryFn: () => getIntentSkillHistory({ data: { packageNames } }),
+    staleTime: 10 * 60 * 1000,
+    enabled: packageNames.length > 0,
+  })
+
+export const intentPackageChangelogQueryOptions = (packageName: string) =>
+  queryOptions({
+    queryKey: ['intent', 'changelog', packageName],
+    queryFn: () => getIntentPackageChangelog({ data: { packageName } }),
+    staleTime: 10 * 60 * 1000,
+  })
+
+export const intentSingleSkillHistoryQueryOptions = (params: {
+  packageName: string
+  skillName: string
+}) =>
+  queryOptions({
+    queryKey: ['intent', 'single-skill-history', params],
+    queryFn: () => getIntentSingleSkillHistory({ data: params }),
+    staleTime: 10 * 60 * 1000,
+  })
+
+export const intentSkillContentDiffQueryOptions = (params: {
+  packageName: string
+  skillName: string
+  fromVersion: string
+  toVersion: string
+}) =>
+  queryOptions({
+    queryKey: ['intent', 'skill-content-diff', params],
+    queryFn: () => getIntentSkillContentDiff({ data: params }),
+    staleTime: 30 * 60 * 1000,
+  })
diff --git a/src/queries/stats.ts b/src/queries/stats.ts
index c626b57b3..f0261a81a 100644
--- a/src/queries/stats.ts
+++ b/src/queries/stats.ts
@@ -1,12 +1,16 @@
 import { queryOptions } from '@tanstack/react-query'
-import { getOSSStats } from '~/utils/stats.server'
-import type { StatsQueryParams } from '~/utils/stats.server'
-import type { LibrarySlim } from '~/libraries'
+import {
+  fetchRecentDownloadStats,
+  getHomepageNpmStatsSummary,
+  getOSSStats,
+} from '~/utils/stats-queries.functions'
+import type { StatsQueryParams } from '~/utils/stats-queries.functions'
+import type { RecentDownloadStats } from '~/utils/stats.types'
 
-export type {
-  Library as StatsLibrary,
-  StatsQueryParams,
-} from '~/utils/stats.server'
+export type { StatsQueryParams } from '~/utils/stats-queries.functions'
+
+type StatsQueryLibrary = NonNullable<StatsQueryParams['library']>
+type RecentDownloadsLibrary = StatsQueryLibrary
 
 export const ossStatsQueryOptions = (params?: StatsQueryParams) =>
   queryOptions({
@@ -15,14 +19,44 @@ export const ossStatsQueryOptions = (params?: StatsQueryParams) =>
     staleTime: 1000 * 60 * 15, // Cache for 15 minutes
   })
 
-export function ossStatsQuery({ library }: { library?: LibrarySlim } = {}) {
+export const homepageNpmStatsSummaryQuery = () =>
+  queryOptions({
+    queryKey: ['stats', 'homepage-npm-summary'],
+    queryFn: () => getHomepageNpmStatsSummary(),
+    staleTime: 1000 * 60 * 15,
+  })
+
+export function ossStatsQuery({
+  library,
+}: { library?: StatsQueryLibrary } = {}) {
   return ossStatsQueryOptions({
     library: library
       ? {
           id: library.id,
+          npmPackageNames: library.npmPackageNames,
           repo: library.repo,
           frameworks: library.frameworks,
         }
       : undefined,
   })
 }
+
+export function recentDownloadsQuery({
+  library,
+}: {
+  library: RecentDownloadsLibrary
+}) {
+  const queryLibrary = {
+    id: library.id,
+    npmPackageNames: library.npmPackageNames,
+    repo: library.repo,
+    frameworks: library.frameworks,
+  }
+
+  return queryOptions({
+    queryKey: ['npm-recent-downloads', queryLibrary],
+    queryFn: (): Promise<RecentDownloadStats> =>
+      fetchRecentDownloadStats({ data: { library: queryLibrary } }),
+    staleTime: 5 * 60 * 1000,
+  })
+}
diff --git a/src/queries/users.ts b/src/queries/users.ts
index 6b1b6b165..9eaa44867 100644
--- a/src/queries/users.ts
+++ b/src/queries/users.ts
@@ -1,5 +1,5 @@
 import { queryOptions } from '@tanstack/react-query'
-import { listUsers } from '~/utils/users.server'
+import { listUsers } from '~/utils/users.functions'
 import type { Capability } from '~/db/types'
 
 export interface ListUsersFilters {
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index c8388f403..fc3a7200d 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -14,7 +14,11 @@ 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'
@@ -23,6 +27,7 @@ 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'
@@ -34,77 +39,129 @@ import { Route as BrandGuideRouteImport } from './routes/brand-guide'
 import { Route as BlogRouteImport } from './routes/blog'
 import { Route as AdsRouteImport } from './routes/ads'
 import { Route as AccountRouteImport } from './routes/account'
+import { Route as LibraryRouteImport } from './routes/_library'
 import { Route as AdminRouteRouteImport } from './routes/admin/route'
-import { Route as LibraryIdRouteRouteImport } from './routes/$libraryId/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 FeedIndexRouteImport } from './routes/feed.index'
+import { Route as ShopIndexRouteImport } from './routes/shop.index'
+import { Route as PartnersIndexRouteImport } from './routes/partners.index'
+import { Route as BuilderIndexRouteImport } from './routes/builder.index'
 import { Route as BlogIndexRouteImport } from './routes/blog.index'
 import { Route as AdminIndexRouteImport } from './routes/admin/index'
 import { Route as AccountIndexRouteImport } from './routes/account/index'
-import { Route as LibraryIdIndexRouteImport } from './routes/$libraryId/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 PartnersRailwayRouteImport } from './routes/partners.railway'
+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 FeedIdRouteImport } from './routes/feed.$id'
+import { Route as LibrariesFrameworkRouteImport } from './routes/libraries_.$framework'
+import { Route as BuilderDocsRouteImport } from './routes/builder.docs'
 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 ApiUploadthingRouteImport } from './routes/api/uploadthing'
-import { Route as ApiLoadStarterRouteImport } from './routes/api/load-starter'
-import { Route as ApiLoadRemoteAddOnRouteImport } from './routes/api/load-remote-add-on'
-import { Route as ApiInitialPayloadRouteImport } from './routes/api/initial-payload'
-import { Route as ApiDryRunCreateAppRouteImport } from './routes/api/dry-run-create-app'
-import { Route as ApiDryRunAddToAppRouteImport } from './routes/api/dry-run-add-to-app'
 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 DotwellKnownOauthAuthorizationServerRouteImport } from './routes/[.]well-known/oauth-authorization-server'
-import { Route as LibraryIdVersionRouteImport } from './routes/$libraryId/$version'
+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 AdminFeedIndexRouteImport } from './routes/admin/feed.index'
-import { Route as AdminBannersIndexRouteImport } from './routes/admin/banners.index'
-import { Route as LibraryIdVersionIndexRouteImport } from './routes/$libraryId/$version.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 AuthProviderStartRouteImport } from './routes/auth/$provider/start'
+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 ApiAdminSyncRouteImport } from './routes/api/admin/sync'
+import { Route as ApiDataPartnersRouteImport } from './routes/api/data/partners'
+import { Route as ApiDataLibrariesRouteImport } from './routes/api/data/libraries'
+import { Route as ApiBuilderValidateRouteImport } from './routes/api/builder/validate'
+import { Route as ApiBuilderSuggestRouteImport } from './routes/api/builder/suggest'
+import { Route as ApiBuilderLoadTemplateRouteImport } from './routes/api/builder/load-template'
+import { Route as ApiBuilderLoadRemoteTemplateRouteImport } from './routes/api/builder/load-remote-template'
+import { Route as ApiBuilderLoadRemoteAddonRouteImport } from './routes/api/builder/load-remote-addon'
+import { Route as ApiBuilderFeaturesRouteImport } from './routes/api/builder/features'
+import { Route as ApiBuilderFeatureArtifactsRouteImport } from './routes/api/builder/feature-artifacts'
+import { Route as ApiBuilderDownloadRouteImport } from './routes/api/builder/download'
+import { Route as ApiBuilderCompileAttributedRouteImport } from './routes/api/builder/compile-attributed'
+import { Route as ApiBuilderCompileRouteImport } from './routes/api/builder/compile'
+import { Route as ApiApplicationStarterResolveRouteImport } from './routes/api/application-starter/resolve'
 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 AdminFeedIdRouteImport } from './routes/admin/feed.$id'
-import { Route as AdminBannersIdRouteImport } from './routes/admin/banners.$id'
-import { Route as LibraryIdVersionDocsRouteImport } from './routes/$libraryId/$version.docs'
-import { Route as LibraryIdVersionDocsIndexRouteImport } from './routes/$libraryId/$version.docs.index'
+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 LibraryIntentVersionIndexRouteImport } from './routes/_library/intent.$version.index'
+import { Route as LibraryHotkeysVersionIndexRouteImport } from './routes/_library/hotkeys.$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 LibraryAiVersionIndexRouteImport } from './routes/_library/ai.$version.index'
+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 ApiBuilderDeployGithubRouteImport } from './routes/api/builder/deploy/github'
+import { Route as ApiBuilderDeployCheckNameRouteImport } from './routes/api/builder/deploy/check-name'
+import { Route as ApiAuthCliCreateTicketRouteImport } from './routes/api/auth/cli/create-ticket'
 import { Route as ApiAuthCallbackProviderRouteImport } from './routes/api/auth/callback/$provider'
-import { Route as LibraryIdVersionDocsChar123Char125DotmdRouteImport } from './routes/$libraryId/$version.docs.{$}[.]md'
-import { Route as LibraryIdVersionDocsNpmStatsRouteImport } from './routes/$libraryId/$version.docs.npm-stats'
-import { Route as LibraryIdVersionDocsContributorsRouteImport } from './routes/$libraryId/$version.docs.contributors'
-import { Route as LibraryIdVersionDocsCommunityResourcesRouteImport } from './routes/$libraryId/$version.docs.community-resources'
-import { Route as LibraryIdVersionDocsSplatRouteImport } from './routes/$libraryId/$version.docs.$'
-import { Route as LibraryIdVersionDocsFrameworkIndexRouteImport } from './routes/$libraryId/$version.docs.framework.index'
-import { Route as LibraryIdVersionDocsFrameworkFrameworkIndexRouteImport } from './routes/$libraryId/$version.docs.framework.$framework.index'
-import { Route as LibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRouteImport } from './routes/$libraryId/$version.docs.framework.$framework.{$}[.]md'
-import { Route as LibraryIdVersionDocsFrameworkFrameworkSplatRouteImport } from './routes/$libraryId/$version.docs.framework.$framework.$'
-import { Route as LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRouteImport } from './routes/$libraryId/$version.docs.framework.$framework.examples.$'
+import { Route as LibraryLibraryIdVersionLlmsDottxtRouteImport } from './routes/_library/$libraryId/$version.llms[.]txt'
+import { Route as LibraryLibraryIdVersionDocsRouteImport } from './routes/_library/$libraryId/$version.docs'
+import { Route as LibraryLibraryIdVersionDocsIndexRouteImport } from './routes/_library/$libraryId/$version.docs.index'
+import { Route as ApiAuthCliStatusTicketIdRouteImport } from './routes/api/auth/cli/status.$ticketId'
+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 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 LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRouteImport } from './routes/_library/$libraryId/$version.docs.framework.$framework.examples.$'
 
 const WorkshopsRoute = WorkshopsRouteImport.update({
   id: '/workshops',
@@ -131,11 +188,31 @@ const SponsorsEmbedRoute = SponsorsEmbedRouteImport.update({
   path: '/sponsors-embed',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SitemapDotxmlRoute = SitemapDotxmlRouteImport.update({
+  id: '/sitemap.xml',
+  path: '/sitemap.xml',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ShowcasesRoute = ShowcasesRouteImport.update({
+  id: '/showcases',
+  path: '/showcases',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ShopRoute = ShopRouteImport.update({
+  id: '/shop',
+  path: '/shop',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const RssDotxmlRoute = RssDotxmlRouteImport.update({
   id: '/rss.xml',
   path: '/rss.xml',
   getParentRoute: () => rootRouteImport,
 } as any)
+const RobotsDottxtRoute = RobotsDottxtRouteImport.update({
+  id: '/robots.txt',
+  path: '/robots.txt',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const PrivacyRoute = PrivacyRouteImport.update({
   id: '/privacy',
   path: '/privacy',
@@ -176,6 +253,11 @@ const LlmsDottxtRoute = LlmsDottxtRouteImport.update({
   path: '/llms.txt',
   getParentRoute: () => rootRouteImport,
 } as any)
+const LlmsFullDottxtRoute = LlmsFullDottxtRouteImport.update({
+  id: '/llms-full.txt',
+  path: '/llms-full.txt',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LibrariesRoute = LibrariesRouteImport.update({
   id: '/libraries',
   path: '/libraries',
@@ -231,16 +313,15 @@ const AccountRoute = AccountRouteImport.update({
   path: '/account',
   getParentRoute: () => rootRouteImport,
 } as any)
+const LibraryRoute = LibraryRouteImport.update({
+  id: '/_library',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AdminRouteRoute = AdminRouteRouteImport.update({
   id: '/admin',
   path: '/admin',
   getParentRoute: () => rootRouteImport,
 } as any)
-const LibraryIdRouteRoute = LibraryIdRouteRouteImport.update({
-  id: '/$libraryId',
-  path: '/$libraryId',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -256,10 +337,20 @@ const ShowcaseIndexRoute = ShowcaseIndexRouteImport.update({
   path: '/showcase/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const FeedIndexRoute = FeedIndexRouteImport.update({
-  id: '/feed/',
-  path: '/feed/',
-  getParentRoute: () => rootRouteImport,
+const ShopIndexRoute = ShopIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => ShopRoute,
+} as any)
+const PartnersIndexRoute = PartnersIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => PartnersRoute,
+} as any)
+const BuilderIndexRoute = BuilderIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => BuilderRoute,
 } as any)
 const BlogIndexRoute = BlogIndexRouteImport.update({
   id: '/',
@@ -276,10 +367,10 @@ const AccountIndexRoute = AccountIndexRouteImport.update({
   path: '/',
   getParentRoute: () => AccountRoute,
 } as any)
-const LibraryIdIndexRoute = LibraryIdIndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => LibraryIdRouteRoute,
+const StackCategoryRoute = StackCategoryRouteImport.update({
+  id: '/stack/$category',
+  path: '/stack/$category',
+  getParentRoute: () => rootRouteImport,
 } as any)
 const ShowcaseSubmitRoute = ShowcaseSubmitRouteImport.update({
   id: '/showcase/submit',
@@ -291,6 +382,31 @@ const ShowcaseIdRoute = ShowcaseIdRouteImport.update({
   path: '/showcase/$id',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ShopSearchRoute = ShopSearchRouteImport.update({
+  id: '/search',
+  path: '/search',
+  getParentRoute: () => ShopRoute,
+} as any)
+const ShopCartRoute = ShopCartRouteImport.update({
+  id: '/cart',
+  path: '/cart',
+  getParentRoute: () => ShopRoute,
+} as any)
+const ShopHandleRoute = ShopHandleRouteImport.update({
+  id: '/$handle',
+  path: '/$handle',
+  getParentRoute: () => ShopRoute,
+} as any)
+const PartnersRailwayRoute = PartnersRailwayRouteImport.update({
+  id: '/railway',
+  path: '/railway',
+  getParentRoute: () => PartnersRoute,
+} as any)
+const PartnersPartnerRoute = PartnersPartnerRouteImport.update({
+  id: '/$partner',
+  path: '/$partner',
+  getParentRoute: () => PartnersRoute,
+} as any)
 const OauthTokenRoute = OauthTokenRouteImport.update({
   id: '/oauth/token',
   path: '/oauth/token',
@@ -306,11 +422,16 @@ const OauthAuthorizeRoute = OauthAuthorizeRouteImport.update({
   path: '/oauth/authorize',
   getParentRoute: () => rootRouteImport,
 } as any)
-const FeedIdRoute = FeedIdRouteImport.update({
-  id: '/feed/$id',
-  path: '/feed/$id',
+const LibrariesFrameworkRoute = LibrariesFrameworkRouteImport.update({
+  id: '/libraries_/$framework',
+  path: '/libraries/$framework',
   getParentRoute: () => rootRouteImport,
 } as any)
+const BuilderDocsRoute = BuilderDocsRouteImport.update({
+  id: '/docs',
+  path: '/docs',
+  getParentRoute: () => BuilderRoute,
+} as any)
 const BlogSplatRoute = BlogSplatRouteImport.update({
   id: '/$',
   path: '/$',
@@ -326,36 +447,16 @@ const AuthPopupSuccessRoute = AuthPopupSuccessRouteImport.update({
   path: '/auth/popup-success',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AuthCliRoute = AuthCliRouteImport.update({
+  id: '/auth/cli',
+  path: '/auth/cli',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiUploadthingRoute = ApiUploadthingRouteImport.update({
   id: '/api/uploadthing',
   path: '/api/uploadthing',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ApiLoadStarterRoute = ApiLoadStarterRouteImport.update({
-  id: '/api/load-starter',
-  path: '/api/load-starter',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const ApiLoadRemoteAddOnRoute = ApiLoadRemoteAddOnRouteImport.update({
-  id: '/api/load-remote-add-on',
-  path: '/api/load-remote-add-on',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const ApiInitialPayloadRoute = ApiInitialPayloadRouteImport.update({
-  id: '/api/initial-payload',
-  path: '/api/initial-payload',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const ApiDryRunCreateAppRoute = ApiDryRunCreateAppRouteImport.update({
-  id: '/api/dry-run-create-app',
-  path: '/api/dry-run-create-app',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const ApiDryRunAddToAppRoute = ApiDryRunAddToAppRouteImport.update({
-  id: '/api/dry-run-add-to-app',
-  path: '/api/dry-run-add-to-app',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const AdminUsersRoute = AdminUsersRouteImport.update({
   id: '/users',
   path: '/users',
@@ -371,11 +472,21 @@ const AdminLoginsRoute = AdminLoginsRouteImport.update({
   path: '/logins',
   getParentRoute: () => AdminRouteRoute,
 } as any)
+const AdminIntentRoute = AdminIntentRouteImport.update({
+  id: '/intent',
+  path: '/intent',
+  getParentRoute: () => AdminRouteRoute,
+} as any)
 const AdminGithubStatsRoute = AdminGithubStatsRouteImport.update({
   id: '/github-stats',
   path: '/github-stats',
   getParentRoute: () => AdminRouteRoute,
 } as any)
+const AdminDocsRoute = AdminDocsRouteImport.update({
+  id: '/docs',
+  path: '/docs',
+  getParentRoute: () => AdminRouteRoute,
+} as any)
 const AdminAuditRoute = AdminAuditRouteImport.update({
   id: '/audit',
   path: '/audit',
@@ -407,16 +518,21 @@ const DotwellKnownOauthAuthorizationServerRoute =
     path: '/.well-known/oauth-authorization-server',
     getParentRoute: () => rootRouteImport,
   } as any)
-const LibraryIdVersionRoute = LibraryIdVersionRouteImport.update({
-  id: '/$version',
-  path: '/$version',
-  getParentRoute: () => LibraryIdRouteRoute,
+const LibraryLibraryIdRouteRoute = LibraryLibraryIdRouteRouteImport.update({
+  id: '/$libraryId',
+  path: '/$libraryId',
+  getParentRoute: () => LibraryRoute,
 } as any)
 const StatsNpmIndexRoute = StatsNpmIndexRouteImport.update({
   id: '/stats/npm/',
   path: '/stats/npm/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const IntentRegistryIndexRoute = IntentRegistryIndexRouteImport.update({
+  id: '/intent/registry/',
+  path: '/intent/registry/',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiMcpIndexRoute = ApiMcpIndexRouteImport.update({
   id: '/api/mcp/',
   path: '/api/mcp/',
@@ -442,20 +558,15 @@ const AdminFeedbackIndexRoute = AdminFeedbackIndexRouteImport.update({
   path: '/feedback/',
   getParentRoute: () => AdminRouteRoute,
 } as any)
-const AdminFeedIndexRoute = AdminFeedIndexRouteImport.update({
-  id: '/feed/',
-  path: '/feed/',
-  getParentRoute: () => AdminRouteRoute,
-} as any)
-const AdminBannersIndexRoute = AdminBannersIndexRouteImport.update({
-  id: '/banners/',
-  path: '/banners/',
-  getParentRoute: () => AdminRouteRoute,
-} as any)
-const LibraryIdVersionIndexRoute = LibraryIdVersionIndexRouteImport.update({
+const LibraryLibraryIdIndexRoute = LibraryLibraryIdIndexRouteImport.update({
   id: '/',
   path: '/',
-  getParentRoute: () => LibraryIdVersionRoute,
+  getParentRoute: () => LibraryLibraryIdRouteRoute,
+} as any)
+const StatsNpmEmbedRoute = StatsNpmEmbedRouteImport.update({
+  id: '/stats/npm/embed',
+  path: '/stats/npm/embed',
+  getParentRoute: () => rootRouteImport,
 } as any)
 const StatsNpmPackagesRoute = StatsNpmPackagesRouteImport.update({
   id: '/stats/npm/$packages',
@@ -467,11 +578,43 @@ const ShowcaseEditIdRoute = ShowcaseEditIdRouteImport.update({
   path: '/showcase/edit/$id',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ShopProductsHandleRoute = ShopProductsHandleRouteImport.update({
+  id: '/products/$handle',
+  path: '/products/$handle',
+  getParentRoute: () => ShopRoute,
+} as any)
+const ShopPoliciesHandleRoute = ShopPoliciesHandleRouteImport.update({
+  id: '/policies/$handle',
+  path: '/policies/$handle',
+  getParentRoute: () => ShopRoute,
+} as any)
+const ShopPagesHandleRoute = ShopPagesHandleRouteImport.update({
+  id: '/pages/$handle',
+  path: '/pages/$handle',
+  getParentRoute: () => ShopRoute,
+} as any)
+const ShopCollectionsHandleRoute = ShopCollectionsHandleRouteImport.update({
+  id: '/collections/$handle',
+  path: '/collections/$handle',
+  getParentRoute: () => ShopRoute,
+} as any)
+const IntentRegistryPackageNameRoute =
+  IntentRegistryPackageNameRouteImport.update({
+    id: '/intent/registry/$packageName',
+    path: '/intent/registry/$packageName',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const AuthProviderStartRoute = AuthProviderStartRouteImport.update({
   id: '/auth/$provider/start',
   path: '/auth/$provider/start',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiOgChar123Char125DotpngRoute =
+  ApiOgChar123Char125DotpngRouteImport.update({
+    id: '/api/og/{$}.png',
+    path: '/api/og/{$}.png',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const ApiMcpSplatRoute = ApiMcpSplatRouteImport.update({
   id: '/api/mcp/$',
   path: '/api/mcp/$',
@@ -482,16 +625,86 @@ const ApiGithubWebhookRoute = ApiGithubWebhookRouteImport.update({
   path: '/api/github/webhook',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiExampleDeployRoute = ApiExampleDeployRouteImport.update({
+  id: '/api/example/deploy',
+  path: '/api/example/deploy',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiDiscordInteractionsRoute = ApiDiscordInteractionsRouteImport.update({
   id: '/api/discord/interactions',
   path: '/api/discord/interactions',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ApiAdminSyncRoute = ApiAdminSyncRouteImport.update({
-  id: '/api/admin/sync',
-  path: '/api/admin/sync',
+const ApiDataPartnersRoute = ApiDataPartnersRouteImport.update({
+  id: '/api/data/partners',
+  path: '/api/data/partners',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiDataLibrariesRoute = ApiDataLibrariesRouteImport.update({
+  id: '/api/data/libraries',
+  path: '/api/data/libraries',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiBuilderValidateRoute = ApiBuilderValidateRouteImport.update({
+  id: '/api/builder/validate',
+  path: '/api/builder/validate',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiBuilderSuggestRoute = ApiBuilderSuggestRouteImport.update({
+  id: '/api/builder/suggest',
+  path: '/api/builder/suggest',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiBuilderLoadTemplateRoute = ApiBuilderLoadTemplateRouteImport.update({
+  id: '/api/builder/load-template',
+  path: '/api/builder/load-template',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiBuilderLoadRemoteTemplateRoute =
+  ApiBuilderLoadRemoteTemplateRouteImport.update({
+    id: '/api/builder/load-remote-template',
+    path: '/api/builder/load-remote-template',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiBuilderLoadRemoteAddonRoute =
+  ApiBuilderLoadRemoteAddonRouteImport.update({
+    id: '/api/builder/load-remote-addon',
+    path: '/api/builder/load-remote-addon',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiBuilderFeaturesRoute = ApiBuilderFeaturesRouteImport.update({
+  id: '/api/builder/features',
+  path: '/api/builder/features',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiBuilderFeatureArtifactsRoute =
+  ApiBuilderFeatureArtifactsRouteImport.update({
+    id: '/api/builder/feature-artifacts',
+    path: '/api/builder/feature-artifacts',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiBuilderDownloadRoute = ApiBuilderDownloadRouteImport.update({
+  id: '/api/builder/download',
+  path: '/api/builder/download',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiBuilderCompileAttributedRoute =
+  ApiBuilderCompileAttributedRouteImport.update({
+    id: '/api/builder/compile-attributed',
+    path: '/api/builder/compile-attributed',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const ApiBuilderCompileRoute = ApiBuilderCompileRouteImport.update({
+  id: '/api/builder/compile',
+  path: '/api/builder/compile',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiApplicationStarterResolveRoute =
+  ApiApplicationStarterResolveRouteImport.update({
+    id: '/api/application-starter/resolve',
+    path: '/api/application-starter/resolve',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const AdminUsersUserIdRoute = AdminUsersUserIdRouteImport.update({
   id: '/$userId',
   path: '/$userId',
@@ -512,211 +725,429 @@ const AdminFeedbackIdRoute = AdminFeedbackIdRouteImport.update({
   path: '/feedback/$id',
   getParentRoute: () => AdminRouteRoute,
 } as any)
-const AdminFeedIdRoute = AdminFeedIdRouteImport.update({
-  id: '/feed/$id',
-  path: '/feed/$id',
-  getParentRoute: () => AdminRouteRoute,
-} as any)
-const AdminBannersIdRoute = AdminBannersIdRouteImport.update({
-  id: '/banners/$id',
-  path: '/banners/$id',
-  getParentRoute: () => AdminRouteRoute,
-} as any)
-const LibraryIdVersionDocsRoute = LibraryIdVersionDocsRouteImport.update({
-  id: '/docs',
-  path: '/docs',
-  getParentRoute: () => LibraryIdVersionRoute,
+const LibraryLibraryIdVersionRoute = LibraryLibraryIdVersionRouteImport.update({
+  id: '/$version',
+  path: '/$version',
+  getParentRoute: () => LibraryLibraryIdRouteRoute,
 } as any)
-const LibraryIdVersionDocsIndexRoute =
-  LibraryIdVersionDocsIndexRouteImport.update({
+const IntentRegistryPackageNameIndexRoute =
+  IntentRegistryPackageNameIndexRouteImport.update({
     id: '/',
     path: '/',
-    getParentRoute: () => LibraryIdVersionDocsRoute,
+    getParentRoute: () => IntentRegistryPackageNameRoute,
+  } as any)
+const LibraryWorkflowVersionIndexRoute =
+  LibraryWorkflowVersionIndexRouteImport.update({
+    id: '/workflow/$version/',
+    path: '/workflow/$version/',
+    getParentRoute: () => LibraryRoute,
+  } as any)
+const LibraryVirtualVersionIndexRoute =
+  LibraryVirtualVersionIndexRouteImport.update({
+    id: '/virtual/$version/',
+    path: '/virtual/$version/',
+    getParentRoute: () => LibraryRoute,
+  } as any)
+const LibraryTableVersionIndexRoute =
+  LibraryTableVersionIndexRouteImport.update({
+    id: '/table/$version/',
+    path: '/table/$version/',
+    getParentRoute: () => LibraryRoute,
+  } as any)
+const LibraryStoreVersionIndexRoute =
+  LibraryStoreVersionIndexRouteImport.update({
+    id: '/store/$version/',
+    path: '/store/$version/',
+    getParentRoute: () => LibraryRoute,
+  } as any)
+const LibraryStartVersionIndexRoute =
+  LibraryStartVersionIndexRouteImport.update({
+    id: '/start/$version/',
+    path: '/start/$version/',
+    getParentRoute: () => LibraryRoute,
+  } as any)
+const LibraryRouterVersionIndexRoute =
+  LibraryRouterVersionIndexRouteImport.update({
+    id: '/router/$version/',
+    path: '/router/$version/',
+    getParentRoute: () => LibraryRoute,
   } as any)
+const LibraryRangerVersionIndexRoute =
+  LibraryRangerVersionIndexRouteImport.update({
+    id: '/ranger/$version/',
+    path: '/ranger/$version/',
+    getParentRoute: () => LibraryRoute,
+  } as any)
+const LibraryQueryVersionIndexRoute =
+  LibraryQueryVersionIndexRouteImport.update({
+    id: '/query/$version/',
+    path: '/query/$version/',
+    getParentRoute: () => LibraryRoute,
+  } as any)
+const LibraryPacerVersionIndexRoute =
+  LibraryPacerVersionIndexRouteImport.update({
+    id: '/pacer/$version/',
+    path: '/pacer/$version/',
+    getParentRoute: () => LibraryRoute,
+  } as any)
+const LibraryIntentVersionIndexRoute =
+  LibraryIntentVersionIndexRouteImport.update({
+    id: '/intent/$version/',
+    path: '/intent/$version/',
+    getParentRoute: () => LibraryRoute,
+  } as any)
+const LibraryHotkeysVersionIndexRoute =
+  LibraryHotkeysVersionIndexRouteImport.update({
+    id: '/hotkeys/$version/',
+    path: '/hotkeys/$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/',
+    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/',
+    getParentRoute: () => LibraryRoute,
+  } as any)
+const LibraryCliVersionIndexRoute = LibraryCliVersionIndexRouteImport.update({
+  id: '/cli/$version/',
+  path: '/cli/$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,
+  } as any)
+const IntentRegistryPackageNameChar123Char125DotmdRoute =
+  IntentRegistryPackageNameChar123Char125DotmdRouteImport.update({
+    id: '/{$}.md',
+    path: '/{$}.md',
+    getParentRoute: () => IntentRegistryPackageNameRoute,
+  } as any)
+const IntentRegistryPackageNameSkillNameRoute =
+  IntentRegistryPackageNameSkillNameRouteImport.update({
+    id: '/$skillName',
+    path: '/$skillName',
+    getParentRoute: () => IntentRegistryPackageNameRoute,
+  } as any)
+const ApiBuilderDeployGithubRoute = ApiBuilderDeployGithubRouteImport.update({
+  id: '/api/builder/deploy/github',
+  path: '/api/builder/deploy/github',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiBuilderDeployCheckNameRoute =
+  ApiBuilderDeployCheckNameRouteImport.update({
+    id: '/api/builder/deploy/check-name',
+    path: '/api/builder/deploy/check-name',
+    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 LibraryIdVersionDocsChar123Char125DotmdRoute =
-  LibraryIdVersionDocsChar123Char125DotmdRouteImport.update({
+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({
+    id: '/',
+    path: '/',
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
+  } as any)
+const ApiAuthCliStatusTicketIdRoute =
+  ApiAuthCliStatusTicketIdRouteImport.update({
+    id: '/api/auth/cli/status/$ticketId',
+    path: '/api/auth/cli/status/$ticketId',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const LibraryLibraryIdVersionDocsChar123Char125DotmdRoute =
+  LibraryLibraryIdVersionDocsChar123Char125DotmdRouteImport.update({
     id: '/{$}.md',
     path: '/{$}.md',
-    getParentRoute: () => LibraryIdVersionDocsRoute,
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
-const LibraryIdVersionDocsNpmStatsRoute =
-  LibraryIdVersionDocsNpmStatsRouteImport.update({
+const LibraryLibraryIdVersionDocsNpmStatsRoute =
+  LibraryLibraryIdVersionDocsNpmStatsRouteImport.update({
     id: '/npm-stats',
     path: '/npm-stats',
-    getParentRoute: () => LibraryIdVersionDocsRoute,
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
-const LibraryIdVersionDocsContributorsRoute =
-  LibraryIdVersionDocsContributorsRouteImport.update({
+const LibraryLibraryIdVersionDocsIndexDotmdRoute =
+  LibraryLibraryIdVersionDocsIndexDotmdRouteImport.update({
+    id: '/index.md',
+    path: '/index.md',
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
+  } as any)
+const LibraryLibraryIdVersionDocsContributorsRoute =
+  LibraryLibraryIdVersionDocsContributorsRouteImport.update({
     id: '/contributors',
     path: '/contributors',
-    getParentRoute: () => LibraryIdVersionDocsRoute,
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
-const LibraryIdVersionDocsCommunityResourcesRoute =
-  LibraryIdVersionDocsCommunityResourcesRouteImport.update({
+const LibraryLibraryIdVersionDocsCommunityResourcesRoute =
+  LibraryLibraryIdVersionDocsCommunityResourcesRouteImport.update({
     id: '/community-resources',
     path: '/community-resources',
-    getParentRoute: () => LibraryIdVersionDocsRoute,
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
+  } as any)
+const LibraryLibraryIdVersionDocsBlogRoute =
+  LibraryLibraryIdVersionDocsBlogRouteImport.update({
+    id: '/blog',
+    path: '/blog',
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
-const LibraryIdVersionDocsSplatRoute =
-  LibraryIdVersionDocsSplatRouteImport.update({
+const LibraryLibraryIdVersionDocsSplatRoute =
+  LibraryLibraryIdVersionDocsSplatRouteImport.update({
     id: '/$',
     path: '/$',
-    getParentRoute: () => LibraryIdVersionDocsRoute,
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
-const LibraryIdVersionDocsFrameworkIndexRoute =
-  LibraryIdVersionDocsFrameworkIndexRouteImport.update({
+const LibraryLibraryIdVersionDocsFrameworkIndexRoute =
+  LibraryLibraryIdVersionDocsFrameworkIndexRouteImport.update({
     id: '/framework/',
     path: '/framework/',
-    getParentRoute: () => LibraryIdVersionDocsRoute,
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
-const LibraryIdVersionDocsFrameworkFrameworkIndexRoute =
-  LibraryIdVersionDocsFrameworkFrameworkIndexRouteImport.update({
+const LibraryLibraryIdVersionDocsFrameworkFrameworkIndexRoute =
+  LibraryLibraryIdVersionDocsFrameworkFrameworkIndexRouteImport.update({
     id: '/framework/$framework/',
     path: '/framework/$framework/',
-    getParentRoute: () => LibraryIdVersionDocsRoute,
-  } as any)
-const LibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute =
-  LibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRouteImport.update({
-    id: '/framework/$framework/{$}.md',
-    path: '/framework/$framework/{$}.md',
-    getParentRoute: () => LibraryIdVersionDocsRoute,
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
-const LibraryIdVersionDocsFrameworkFrameworkSplatRoute =
-  LibraryIdVersionDocsFrameworkFrameworkSplatRouteImport.update({
+const LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute =
+  LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRouteImport.update(
+    {
+      id: '/framework/$framework/{$}.md',
+      path: '/framework/$framework/{$}.md',
+      getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
+    } as any,
+  )
+const LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRoute =
+  LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRouteImport.update({
     id: '/framework/$framework/$',
     path: '/framework/$framework/$',
-    getParentRoute: () => LibraryIdVersionDocsRoute,
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
-const LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute =
-  LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRouteImport.update({
+const LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute =
+  LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRouteImport.update({
     id: '/framework/$framework/examples/$',
     path: '/framework/$framework/examples/$',
-    getParentRoute: () => LibraryIdVersionDocsRoute,
+    getParentRoute: () => LibraryLibraryIdVersionDocsRoute,
   } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/$libraryId': typeof LibraryIdRouteRouteWithChildren
   '/admin': typeof AdminRouteRouteWithChildren
   '/account': typeof AccountRouteWithChildren
   '/ads': typeof AdsRoute
   '/blog': typeof BlogRouteWithChildren
   '/brand-guide': typeof BrandGuideRoute
-  '/builder': typeof BuilderRoute
+  '/builder': typeof BuilderRouteWithChildren
   '/dashboard': typeof DashboardRoute
   '/ethos': typeof EthosRoute
   '/explore': typeof ExploreRoute
   '/feedback-leaderboard': typeof FeedbackLeaderboardRoute
   '/learn': typeof LearnRoute
   '/libraries': typeof LibrariesRoute
+  '/llms-full.txt': typeof LlmsFullDottxtRoute
   '/llms.txt': typeof LlmsDottxtRoute
   '/login': typeof LoginRoute
   '/maintainers': typeof MaintainersRoute
   '/merch': typeof MerchRoute
   '/paid-support': typeof PaidSupportRoute
-  '/partners': typeof PartnersRoute
+  '/partners': typeof PartnersRouteWithChildren
   '/partners-embed': typeof PartnersEmbedRoute
   '/privacy': typeof PrivacyRoute
+  '/robots.txt': typeof RobotsDottxtRoute
   '/rss.xml': typeof RssDotxmlRoute
+  '/shop': typeof ShopRouteWithChildren
+  '/showcases': typeof ShowcasesRoute
+  '/sitemap.xml': typeof SitemapDotxmlRoute
   '/sponsors-embed': typeof SponsorsEmbedRoute
   '/support': typeof SupportRoute
   '/tenets': typeof TenetsRoute
   '/terms': typeof TermsRoute
   '/workshops': typeof WorkshopsRoute
-  '/$libraryId/$version': typeof LibraryIdVersionRouteWithChildren
+  '/$libraryId': typeof LibraryLibraryIdRouteRouteWithChildren
   '/.well-known/oauth-authorization-server': typeof DotwellKnownOauthAuthorizationServerRoute
   '/account/feedback': typeof AccountFeedbackRoute
   '/account/integrations': typeof AccountIntegrationsRoute
   '/account/notes': typeof AccountNotesRoute
   '/account/submissions': typeof AccountSubmissionsRoute
   '/admin/audit': typeof AdminAuditRoute
+  '/admin/docs': typeof AdminDocsRoute
   '/admin/github-stats': typeof AdminGithubStatsRoute
+  '/admin/intent': typeof AdminIntentRoute
   '/admin/logins': typeof AdminLoginsRoute
   '/admin/npm-stats': typeof AdminNpmStatsRoute
   '/admin/users': typeof AdminUsersRouteWithChildren
-  '/api/dry-run-add-to-app': typeof ApiDryRunAddToAppRoute
-  '/api/dry-run-create-app': typeof ApiDryRunCreateAppRoute
-  '/api/initial-payload': typeof ApiInitialPayloadRoute
-  '/api/load-remote-add-on': typeof ApiLoadRemoteAddOnRoute
-  '/api/load-starter': typeof ApiLoadStarterRoute
   '/api/uploadthing': typeof ApiUploadthingRoute
+  '/auth/cli': typeof AuthCliRoute
   '/auth/popup-success': typeof AuthPopupSuccessRoute
   '/auth/signout': typeof AuthSignoutRoute
   '/blog/$': typeof BlogSplatRoute
-  '/feed/$id': typeof FeedIdRoute
+  '/builder/docs': typeof BuilderDocsRoute
+  '/libraries/$framework': typeof LibrariesFrameworkRoute
   '/oauth/authorize': typeof OauthAuthorizeRoute
   '/oauth/register': typeof OauthRegisterRoute
   '/oauth/token': typeof OauthTokenRoute
+  '/partners/$partner': typeof PartnersPartnerRoute
+  '/partners/railway': typeof PartnersRailwayRoute
+  '/shop/$handle': typeof ShopHandleRoute
+  '/shop/cart': typeof ShopCartRoute
+  '/shop/search': typeof ShopSearchRoute
   '/showcase/$id': typeof ShowcaseIdRoute
   '/showcase/submit': typeof ShowcaseSubmitRoute
-  '/$libraryId/': typeof LibraryIdIndexRoute
+  '/stack/$category': typeof StackCategoryRoute
   '/account/': typeof AccountIndexRoute
   '/admin/': typeof AdminIndexRoute
   '/blog/': typeof BlogIndexRoute
-  '/feed': typeof FeedIndexRoute
-  '/showcase': typeof ShowcaseIndexRoute
-  '/stats': typeof StatsIndexRoute
-  '/$libraryId/$version/docs': typeof LibraryIdVersionDocsRouteWithChildren
-  '/admin/banners/$id': typeof AdminBannersIdRoute
-  '/admin/feed/$id': typeof AdminFeedIdRoute
+  '/builder/': typeof BuilderIndexRoute
+  '/partners/': typeof PartnersIndexRoute
+  '/shop/': typeof ShopIndexRoute
+  '/showcase/': typeof ShowcaseIndexRoute
+  '/stats/': typeof StatsIndexRoute
+  '/$libraryId/$version': typeof LibraryLibraryIdVersionRouteWithChildren
   '/admin/feedback/$id': typeof AdminFeedbackIdRoute
   '/admin/roles/$roleId': typeof AdminRolesRoleIdRoute
   '/admin/showcases/$id': typeof AdminShowcasesIdRoute
   '/admin/users/$userId': typeof AdminUsersUserIdRoute
-  '/api/admin/sync': typeof ApiAdminSyncRoute
+  '/api/application-starter/resolve': typeof ApiApplicationStarterResolveRoute
+  '/api/builder/compile': typeof ApiBuilderCompileRoute
+  '/api/builder/compile-attributed': typeof ApiBuilderCompileAttributedRoute
+  '/api/builder/download': typeof ApiBuilderDownloadRoute
+  '/api/builder/feature-artifacts': typeof ApiBuilderFeatureArtifactsRoute
+  '/api/builder/features': typeof ApiBuilderFeaturesRoute
+  '/api/builder/load-remote-addon': typeof ApiBuilderLoadRemoteAddonRoute
+  '/api/builder/load-remote-template': typeof ApiBuilderLoadRemoteTemplateRoute
+  '/api/builder/load-template': typeof ApiBuilderLoadTemplateRoute
+  '/api/builder/suggest': typeof ApiBuilderSuggestRoute
+  '/api/builder/validate': typeof ApiBuilderValidateRoute
+  '/api/data/libraries': typeof ApiDataLibrariesRoute
+  '/api/data/partners': typeof ApiDataPartnersRoute
   '/api/discord/interactions': typeof ApiDiscordInteractionsRoute
+  '/api/example/deploy': typeof ApiExampleDeployRoute
   '/api/github/webhook': typeof ApiGithubWebhookRoute
   '/api/mcp/$': typeof ApiMcpSplatRoute
+  '/api/og/{$}.png': typeof ApiOgChar123Char125DotpngRoute
   '/auth/$provider/start': typeof AuthProviderStartRoute
+  '/intent/registry/$packageName': typeof IntentRegistryPackageNameRouteWithChildren
+  '/shop/collections/$handle': typeof ShopCollectionsHandleRoute
+  '/shop/pages/$handle': typeof ShopPagesHandleRoute
+  '/shop/policies/$handle': typeof ShopPoliciesHandleRoute
+  '/shop/products/$handle': typeof ShopProductsHandleRoute
   '/showcase/edit/$id': typeof ShowcaseEditIdRoute
   '/stats/npm/$packages': typeof StatsNpmPackagesRoute
-  '/$libraryId/$version/': typeof LibraryIdVersionIndexRoute
-  '/admin/banners': typeof AdminBannersIndexRoute
-  '/admin/feed': typeof AdminFeedIndexRoute
-  '/admin/feedback': typeof AdminFeedbackIndexRoute
-  '/admin/notes': typeof AdminNotesIndexRoute
-  '/admin/roles': typeof AdminRolesIndexRoute
-  '/admin/showcases': typeof AdminShowcasesIndexRoute
-  '/api/mcp': typeof ApiMcpIndexRoute
-  '/stats/npm': typeof StatsNpmIndexRoute
-  '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute
-  '/$libraryId/$version/docs/community-resources': typeof LibraryIdVersionDocsCommunityResourcesRoute
-  '/$libraryId/$version/docs/contributors': typeof LibraryIdVersionDocsContributorsRoute
-  '/$libraryId/$version/docs/npm-stats': typeof LibraryIdVersionDocsNpmStatsRoute
-  '/$libraryId/$version/docs/{$}.md': typeof LibraryIdVersionDocsChar123Char125DotmdRoute
+  '/stats/npm/embed': typeof StatsNpmEmbedRoute
+  '/$libraryId/': typeof LibraryLibraryIdIndexRoute
+  '/admin/feedback/': typeof AdminFeedbackIndexRoute
+  '/admin/notes/': typeof AdminNotesIndexRoute
+  '/admin/roles/': typeof AdminRolesIndexRoute
+  '/admin/showcases/': typeof AdminShowcasesIndexRoute
+  '/api/mcp/': typeof ApiMcpIndexRoute
+  '/intent/registry/': typeof IntentRegistryIndexRoute
+  '/stats/npm/': typeof StatsNpmIndexRoute
+  '/$libraryId/$version/docs': typeof LibraryLibraryIdVersionDocsRouteWithChildren
+  '/$libraryId/$version/llms.txt': typeof LibraryLibraryIdVersionLlmsDottxtRoute
   '/api/auth/callback/$provider': typeof ApiAuthCallbackProviderRoute
-  '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
-  '/$libraryId/$version/docs/framework': typeof LibraryIdVersionDocsFrameworkIndexRoute
-  '/$libraryId/$version/docs/framework/$framework/$': typeof LibraryIdVersionDocsFrameworkFrameworkSplatRoute
-  '/$libraryId/$version/docs/framework/$framework/{$}.md': typeof LibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute
-  '/$libraryId/$version/docs/framework/$framework': typeof LibraryIdVersionDocsFrameworkFrameworkIndexRoute
-  '/$libraryId/$version/docs/framework/$framework/examples/$': typeof LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute
+  '/api/auth/cli/create-ticket': typeof ApiAuthCliCreateTicketRoute
+  '/api/builder/deploy/check-name': typeof ApiBuilderDeployCheckNameRoute
+  '/api/builder/deploy/github': typeof ApiBuilderDeployGithubRoute
+  '/intent/registry/$packageName/$skillName': typeof IntentRegistryPackageNameSkillNameRoute
+  '/intent/registry/$packageName/{$}.md': typeof IntentRegistryPackageNameChar123Char125DotmdRoute
+  '/$libraryId/$version/': typeof LibraryLibraryIdVersionIndexRoute
+  '/ai/$version/': typeof LibraryAiVersionIndexRoute
+  '/cli/$version/': typeof LibraryCliVersionIndexRoute
+  '/config/$version/': typeof LibraryConfigVersionIndexRoute
+  '/db/$version/': typeof LibraryDbVersionIndexRoute
+  '/devtools/$version/': typeof LibraryDevtoolsVersionIndexRoute
+  '/form/$version/': typeof LibraryFormVersionIndexRoute
+  '/hotkeys/$version/': typeof LibraryHotkeysVersionIndexRoute
+  '/intent/$version/': typeof LibraryIntentVersionIndexRoute
+  '/pacer/$version/': typeof LibraryPacerVersionIndexRoute
+  '/query/$version/': typeof LibraryQueryVersionIndexRoute
+  '/ranger/$version/': typeof LibraryRangerVersionIndexRoute
+  '/router/$version/': typeof LibraryRouterVersionIndexRoute
+  '/start/$version/': typeof LibraryStartVersionIndexRoute
+  '/store/$version/': typeof LibraryStoreVersionIndexRoute
+  '/table/$version/': typeof LibraryTableVersionIndexRoute
+  '/virtual/$version/': typeof LibraryVirtualVersionIndexRoute
+  '/workflow/$version/': typeof LibraryWorkflowVersionIndexRoute
+  '/intent/registry/$packageName/': typeof IntentRegistryPackageNameIndexRoute
+  '/$libraryId/$version/docs/$': typeof LibraryLibraryIdVersionDocsSplatRoute
+  '/$libraryId/$version/docs/blog': typeof LibraryLibraryIdVersionDocsBlogRoute
+  '/$libraryId/$version/docs/community-resources': typeof LibraryLibraryIdVersionDocsCommunityResourcesRoute
+  '/$libraryId/$version/docs/contributors': typeof LibraryLibraryIdVersionDocsContributorsRoute
+  '/$libraryId/$version/docs/index.md': typeof LibraryLibraryIdVersionDocsIndexDotmdRoute
+  '/$libraryId/$version/docs/npm-stats': typeof LibraryLibraryIdVersionDocsNpmStatsRoute
+  '/$libraryId/$version/docs/{$}.md': typeof LibraryLibraryIdVersionDocsChar123Char125DotmdRoute
+  '/api/auth/cli/status/$ticketId': typeof ApiAuthCliStatusTicketIdRoute
+  '/$libraryId/$version/docs/': typeof LibraryLibraryIdVersionDocsIndexRoute
+  '/$libraryId/$version/docs/framework/': typeof LibraryLibraryIdVersionDocsFrameworkIndexRoute
+  '/$libraryId/$version/docs/framework/$framework/$': typeof LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRoute
+  '/$libraryId/$version/docs/framework/$framework/{$}.md': typeof LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute
+  '/$libraryId/$version/docs/framework/$framework/': typeof LibraryLibraryIdVersionDocsFrameworkFrameworkIndexRoute
+  '/$libraryId/$version/docs/framework/$framework/examples/$': typeof LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/ads': typeof AdsRoute
   '/brand-guide': typeof BrandGuideRoute
-  '/builder': typeof BuilderRoute
   '/dashboard': typeof DashboardRoute
   '/ethos': typeof EthosRoute
   '/explore': typeof ExploreRoute
   '/feedback-leaderboard': typeof FeedbackLeaderboardRoute
   '/learn': typeof LearnRoute
   '/libraries': typeof LibrariesRoute
+  '/llms-full.txt': typeof LlmsFullDottxtRoute
   '/llms.txt': typeof LlmsDottxtRoute
   '/login': typeof LoginRoute
   '/maintainers': typeof MaintainersRoute
   '/merch': typeof MerchRoute
   '/paid-support': typeof PaidSupportRoute
-  '/partners': typeof PartnersRoute
   '/partners-embed': typeof PartnersEmbedRoute
   '/privacy': typeof PrivacyRoute
+  '/robots.txt': typeof RobotsDottxtRoute
   '/rss.xml': typeof RssDotxmlRoute
+  '/showcases': typeof ShowcasesRoute
+  '/sitemap.xml': typeof SitemapDotxmlRoute
   '/sponsors-embed': typeof SponsorsEmbedRoute
   '/support': typeof SupportRoute
   '/tenets': typeof TenetsRoute
@@ -728,171 +1159,277 @@ export interface FileRoutesByTo {
   '/account/notes': typeof AccountNotesRoute
   '/account/submissions': typeof AccountSubmissionsRoute
   '/admin/audit': typeof AdminAuditRoute
+  '/admin/docs': typeof AdminDocsRoute
   '/admin/github-stats': typeof AdminGithubStatsRoute
+  '/admin/intent': typeof AdminIntentRoute
   '/admin/logins': typeof AdminLoginsRoute
   '/admin/npm-stats': typeof AdminNpmStatsRoute
   '/admin/users': typeof AdminUsersRouteWithChildren
-  '/api/dry-run-add-to-app': typeof ApiDryRunAddToAppRoute
-  '/api/dry-run-create-app': typeof ApiDryRunCreateAppRoute
-  '/api/initial-payload': typeof ApiInitialPayloadRoute
-  '/api/load-remote-add-on': typeof ApiLoadRemoteAddOnRoute
-  '/api/load-starter': typeof ApiLoadStarterRoute
   '/api/uploadthing': typeof ApiUploadthingRoute
+  '/auth/cli': typeof AuthCliRoute
   '/auth/popup-success': typeof AuthPopupSuccessRoute
   '/auth/signout': typeof AuthSignoutRoute
   '/blog/$': typeof BlogSplatRoute
-  '/feed/$id': typeof FeedIdRoute
+  '/builder/docs': typeof BuilderDocsRoute
+  '/libraries/$framework': typeof LibrariesFrameworkRoute
   '/oauth/authorize': typeof OauthAuthorizeRoute
   '/oauth/register': typeof OauthRegisterRoute
   '/oauth/token': typeof OauthTokenRoute
+  '/partners/$partner': typeof PartnersPartnerRoute
+  '/partners/railway': typeof PartnersRailwayRoute
+  '/shop/$handle': typeof ShopHandleRoute
+  '/shop/cart': typeof ShopCartRoute
+  '/shop/search': typeof ShopSearchRoute
   '/showcase/$id': typeof ShowcaseIdRoute
   '/showcase/submit': typeof ShowcaseSubmitRoute
-  '/$libraryId': typeof LibraryIdIndexRoute
+  '/stack/$category': typeof StackCategoryRoute
   '/account': typeof AccountIndexRoute
   '/admin': typeof AdminIndexRoute
   '/blog': typeof BlogIndexRoute
-  '/feed': typeof FeedIndexRoute
+  '/builder': typeof BuilderIndexRoute
+  '/partners': typeof PartnersIndexRoute
+  '/shop': typeof ShopIndexRoute
   '/showcase': typeof ShowcaseIndexRoute
   '/stats': typeof StatsIndexRoute
-  '/admin/banners/$id': typeof AdminBannersIdRoute
-  '/admin/feed/$id': typeof AdminFeedIdRoute
   '/admin/feedback/$id': typeof AdminFeedbackIdRoute
   '/admin/roles/$roleId': typeof AdminRolesRoleIdRoute
   '/admin/showcases/$id': typeof AdminShowcasesIdRoute
   '/admin/users/$userId': typeof AdminUsersUserIdRoute
-  '/api/admin/sync': typeof ApiAdminSyncRoute
+  '/api/application-starter/resolve': typeof ApiApplicationStarterResolveRoute
+  '/api/builder/compile': typeof ApiBuilderCompileRoute
+  '/api/builder/compile-attributed': typeof ApiBuilderCompileAttributedRoute
+  '/api/builder/download': typeof ApiBuilderDownloadRoute
+  '/api/builder/feature-artifacts': typeof ApiBuilderFeatureArtifactsRoute
+  '/api/builder/features': typeof ApiBuilderFeaturesRoute
+  '/api/builder/load-remote-addon': typeof ApiBuilderLoadRemoteAddonRoute
+  '/api/builder/load-remote-template': typeof ApiBuilderLoadRemoteTemplateRoute
+  '/api/builder/load-template': typeof ApiBuilderLoadTemplateRoute
+  '/api/builder/suggest': typeof ApiBuilderSuggestRoute
+  '/api/builder/validate': typeof ApiBuilderValidateRoute
+  '/api/data/libraries': typeof ApiDataLibrariesRoute
+  '/api/data/partners': typeof ApiDataPartnersRoute
   '/api/discord/interactions': typeof ApiDiscordInteractionsRoute
+  '/api/example/deploy': typeof ApiExampleDeployRoute
   '/api/github/webhook': typeof ApiGithubWebhookRoute
   '/api/mcp/$': typeof ApiMcpSplatRoute
+  '/api/og/{$}.png': typeof ApiOgChar123Char125DotpngRoute
   '/auth/$provider/start': typeof AuthProviderStartRoute
+  '/shop/collections/$handle': typeof ShopCollectionsHandleRoute
+  '/shop/pages/$handle': typeof ShopPagesHandleRoute
+  '/shop/policies/$handle': typeof ShopPoliciesHandleRoute
+  '/shop/products/$handle': typeof ShopProductsHandleRoute
   '/showcase/edit/$id': typeof ShowcaseEditIdRoute
   '/stats/npm/$packages': typeof StatsNpmPackagesRoute
-  '/$libraryId/$version': typeof LibraryIdVersionIndexRoute
-  '/admin/banners': typeof AdminBannersIndexRoute
-  '/admin/feed': typeof AdminFeedIndexRoute
+  '/stats/npm/embed': typeof StatsNpmEmbedRoute
+  '/$libraryId': typeof LibraryLibraryIdIndexRoute
   '/admin/feedback': typeof AdminFeedbackIndexRoute
   '/admin/notes': typeof AdminNotesIndexRoute
   '/admin/roles': typeof AdminRolesIndexRoute
   '/admin/showcases': typeof AdminShowcasesIndexRoute
   '/api/mcp': typeof ApiMcpIndexRoute
+  '/intent/registry': typeof IntentRegistryIndexRoute
   '/stats/npm': typeof StatsNpmIndexRoute
-  '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute
-  '/$libraryId/$version/docs/community-resources': typeof LibraryIdVersionDocsCommunityResourcesRoute
-  '/$libraryId/$version/docs/contributors': typeof LibraryIdVersionDocsContributorsRoute
-  '/$libraryId/$version/docs/npm-stats': typeof LibraryIdVersionDocsNpmStatsRoute
-  '/$libraryId/$version/docs/{$}.md': typeof LibraryIdVersionDocsChar123Char125DotmdRoute
+  '/$libraryId/$version/llms.txt': typeof LibraryLibraryIdVersionLlmsDottxtRoute
   '/api/auth/callback/$provider': typeof ApiAuthCallbackProviderRoute
-  '/$libraryId/$version/docs': typeof LibraryIdVersionDocsIndexRoute
-  '/$libraryId/$version/docs/framework': typeof LibraryIdVersionDocsFrameworkIndexRoute
-  '/$libraryId/$version/docs/framework/$framework/$': typeof LibraryIdVersionDocsFrameworkFrameworkSplatRoute
-  '/$libraryId/$version/docs/framework/$framework/{$}.md': typeof LibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute
-  '/$libraryId/$version/docs/framework/$framework': typeof LibraryIdVersionDocsFrameworkFrameworkIndexRoute
-  '/$libraryId/$version/docs/framework/$framework/examples/$': typeof LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute
+  '/api/auth/cli/create-ticket': typeof ApiAuthCliCreateTicketRoute
+  '/api/builder/deploy/check-name': typeof ApiBuilderDeployCheckNameRoute
+  '/api/builder/deploy/github': typeof ApiBuilderDeployGithubRoute
+  '/intent/registry/$packageName/$skillName': typeof IntentRegistryPackageNameSkillNameRoute
+  '/intent/registry/$packageName/{$}.md': typeof IntentRegistryPackageNameChar123Char125DotmdRoute
+  '/$libraryId/$version': typeof LibraryLibraryIdVersionIndexRoute
+  '/ai/$version': typeof LibraryAiVersionIndexRoute
+  '/cli/$version': typeof LibraryCliVersionIndexRoute
+  '/config/$version': typeof LibraryConfigVersionIndexRoute
+  '/db/$version': typeof LibraryDbVersionIndexRoute
+  '/devtools/$version': typeof LibraryDevtoolsVersionIndexRoute
+  '/form/$version': typeof LibraryFormVersionIndexRoute
+  '/hotkeys/$version': typeof LibraryHotkeysVersionIndexRoute
+  '/intent/$version': typeof LibraryIntentVersionIndexRoute
+  '/pacer/$version': typeof LibraryPacerVersionIndexRoute
+  '/query/$version': typeof LibraryQueryVersionIndexRoute
+  '/ranger/$version': typeof LibraryRangerVersionIndexRoute
+  '/router/$version': typeof LibraryRouterVersionIndexRoute
+  '/start/$version': typeof LibraryStartVersionIndexRoute
+  '/store/$version': typeof LibraryStoreVersionIndexRoute
+  '/table/$version': typeof LibraryTableVersionIndexRoute
+  '/virtual/$version': typeof LibraryVirtualVersionIndexRoute
+  '/workflow/$version': typeof LibraryWorkflowVersionIndexRoute
+  '/intent/registry/$packageName': typeof IntentRegistryPackageNameIndexRoute
+  '/$libraryId/$version/docs/$': typeof LibraryLibraryIdVersionDocsSplatRoute
+  '/$libraryId/$version/docs/blog': typeof LibraryLibraryIdVersionDocsBlogRoute
+  '/$libraryId/$version/docs/community-resources': typeof LibraryLibraryIdVersionDocsCommunityResourcesRoute
+  '/$libraryId/$version/docs/contributors': typeof LibraryLibraryIdVersionDocsContributorsRoute
+  '/$libraryId/$version/docs/index.md': typeof LibraryLibraryIdVersionDocsIndexDotmdRoute
+  '/$libraryId/$version/docs/npm-stats': typeof LibraryLibraryIdVersionDocsNpmStatsRoute
+  '/$libraryId/$version/docs/{$}.md': typeof LibraryLibraryIdVersionDocsChar123Char125DotmdRoute
+  '/api/auth/cli/status/$ticketId': typeof ApiAuthCliStatusTicketIdRoute
+  '/$libraryId/$version/docs': typeof LibraryLibraryIdVersionDocsIndexRoute
+  '/$libraryId/$version/docs/framework': typeof LibraryLibraryIdVersionDocsFrameworkIndexRoute
+  '/$libraryId/$version/docs/framework/$framework/$': typeof LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRoute
+  '/$libraryId/$version/docs/framework/$framework/{$}.md': typeof LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute
+  '/$libraryId/$version/docs/framework/$framework': typeof LibraryLibraryIdVersionDocsFrameworkFrameworkIndexRoute
+  '/$libraryId/$version/docs/framework/$framework/examples/$': typeof LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
-  '/$libraryId': typeof LibraryIdRouteRouteWithChildren
   '/admin': typeof AdminRouteRouteWithChildren
+  '/_library': typeof LibraryRouteWithChildren
   '/account': typeof AccountRouteWithChildren
   '/ads': typeof AdsRoute
   '/blog': typeof BlogRouteWithChildren
   '/brand-guide': typeof BrandGuideRoute
-  '/builder': typeof BuilderRoute
+  '/builder': typeof BuilderRouteWithChildren
   '/dashboard': typeof DashboardRoute
   '/ethos': typeof EthosRoute
   '/explore': typeof ExploreRoute
   '/feedback-leaderboard': typeof FeedbackLeaderboardRoute
   '/learn': typeof LearnRoute
   '/libraries': typeof LibrariesRoute
+  '/llms-full.txt': typeof LlmsFullDottxtRoute
   '/llms.txt': typeof LlmsDottxtRoute
   '/login': typeof LoginRoute
   '/maintainers': typeof MaintainersRoute
   '/merch': typeof MerchRoute
   '/paid-support': typeof PaidSupportRoute
-  '/partners': typeof PartnersRoute
+  '/partners': typeof PartnersRouteWithChildren
   '/partners-embed': typeof PartnersEmbedRoute
   '/privacy': typeof PrivacyRoute
+  '/robots.txt': typeof RobotsDottxtRoute
   '/rss.xml': typeof RssDotxmlRoute
+  '/shop': typeof ShopRouteWithChildren
+  '/showcases': typeof ShowcasesRoute
+  '/sitemap.xml': typeof SitemapDotxmlRoute
   '/sponsors-embed': typeof SponsorsEmbedRoute
   '/support': typeof SupportRoute
   '/tenets': typeof TenetsRoute
   '/terms': typeof TermsRoute
   '/workshops': typeof WorkshopsRoute
-  '/$libraryId/$version': typeof LibraryIdVersionRouteWithChildren
+  '/_library/$libraryId': typeof LibraryLibraryIdRouteRouteWithChildren
   '/.well-known/oauth-authorization-server': typeof DotwellKnownOauthAuthorizationServerRoute
   '/account/feedback': typeof AccountFeedbackRoute
   '/account/integrations': typeof AccountIntegrationsRoute
   '/account/notes': typeof AccountNotesRoute
   '/account/submissions': typeof AccountSubmissionsRoute
   '/admin/audit': typeof AdminAuditRoute
+  '/admin/docs': typeof AdminDocsRoute
   '/admin/github-stats': typeof AdminGithubStatsRoute
+  '/admin/intent': typeof AdminIntentRoute
   '/admin/logins': typeof AdminLoginsRoute
   '/admin/npm-stats': typeof AdminNpmStatsRoute
   '/admin/users': typeof AdminUsersRouteWithChildren
-  '/api/dry-run-add-to-app': typeof ApiDryRunAddToAppRoute
-  '/api/dry-run-create-app': typeof ApiDryRunCreateAppRoute
-  '/api/initial-payload': typeof ApiInitialPayloadRoute
-  '/api/load-remote-add-on': typeof ApiLoadRemoteAddOnRoute
-  '/api/load-starter': typeof ApiLoadStarterRoute
   '/api/uploadthing': typeof ApiUploadthingRoute
+  '/auth/cli': typeof AuthCliRoute
   '/auth/popup-success': typeof AuthPopupSuccessRoute
   '/auth/signout': typeof AuthSignoutRoute
   '/blog/$': typeof BlogSplatRoute
-  '/feed/$id': typeof FeedIdRoute
+  '/builder/docs': typeof BuilderDocsRoute
+  '/libraries_/$framework': typeof LibrariesFrameworkRoute
   '/oauth/authorize': typeof OauthAuthorizeRoute
   '/oauth/register': typeof OauthRegisterRoute
   '/oauth/token': typeof OauthTokenRoute
+  '/partners/$partner': typeof PartnersPartnerRoute
+  '/partners/railway': typeof PartnersRailwayRoute
+  '/shop/$handle': typeof ShopHandleRoute
+  '/shop/cart': typeof ShopCartRoute
+  '/shop/search': typeof ShopSearchRoute
   '/showcase/$id': typeof ShowcaseIdRoute
   '/showcase/submit': typeof ShowcaseSubmitRoute
-  '/$libraryId/': typeof LibraryIdIndexRoute
+  '/stack/$category': typeof StackCategoryRoute
   '/account/': typeof AccountIndexRoute
   '/admin/': typeof AdminIndexRoute
   '/blog/': typeof BlogIndexRoute
-  '/feed/': typeof FeedIndexRoute
+  '/builder/': typeof BuilderIndexRoute
+  '/partners/': typeof PartnersIndexRoute
+  '/shop/': typeof ShopIndexRoute
   '/showcase/': typeof ShowcaseIndexRoute
   '/stats/': typeof StatsIndexRoute
-  '/$libraryId/$version/docs': typeof LibraryIdVersionDocsRouteWithChildren
-  '/admin/banners/$id': typeof AdminBannersIdRoute
-  '/admin/feed/$id': typeof AdminFeedIdRoute
+  '/_library/$libraryId/$version': typeof LibraryLibraryIdVersionRouteWithChildren
   '/admin/feedback_/$id': typeof AdminFeedbackIdRoute
   '/admin/roles/$roleId': typeof AdminRolesRoleIdRoute
   '/admin/showcases_/$id': typeof AdminShowcasesIdRoute
   '/admin/users/$userId': typeof AdminUsersUserIdRoute
-  '/api/admin/sync': typeof ApiAdminSyncRoute
+  '/api/application-starter/resolve': typeof ApiApplicationStarterResolveRoute
+  '/api/builder/compile': typeof ApiBuilderCompileRoute
+  '/api/builder/compile-attributed': typeof ApiBuilderCompileAttributedRoute
+  '/api/builder/download': typeof ApiBuilderDownloadRoute
+  '/api/builder/feature-artifacts': typeof ApiBuilderFeatureArtifactsRoute
+  '/api/builder/features': typeof ApiBuilderFeaturesRoute
+  '/api/builder/load-remote-addon': typeof ApiBuilderLoadRemoteAddonRoute
+  '/api/builder/load-remote-template': typeof ApiBuilderLoadRemoteTemplateRoute
+  '/api/builder/load-template': typeof ApiBuilderLoadTemplateRoute
+  '/api/builder/suggest': typeof ApiBuilderSuggestRoute
+  '/api/builder/validate': typeof ApiBuilderValidateRoute
+  '/api/data/libraries': typeof ApiDataLibrariesRoute
+  '/api/data/partners': typeof ApiDataPartnersRoute
   '/api/discord/interactions': typeof ApiDiscordInteractionsRoute
+  '/api/example/deploy': typeof ApiExampleDeployRoute
   '/api/github/webhook': typeof ApiGithubWebhookRoute
   '/api/mcp/$': typeof ApiMcpSplatRoute
+  '/api/og/{$}.png': typeof ApiOgChar123Char125DotpngRoute
   '/auth/$provider/start': typeof AuthProviderStartRoute
+  '/intent/registry/$packageName': typeof IntentRegistryPackageNameRouteWithChildren
+  '/shop/collections/$handle': typeof ShopCollectionsHandleRoute
+  '/shop/pages/$handle': typeof ShopPagesHandleRoute
+  '/shop/policies/$handle': typeof ShopPoliciesHandleRoute
+  '/shop/products/$handle': typeof ShopProductsHandleRoute
   '/showcase/edit/$id': typeof ShowcaseEditIdRoute
   '/stats/npm/$packages': typeof StatsNpmPackagesRoute
-  '/$libraryId/$version/': typeof LibraryIdVersionIndexRoute
-  '/admin/banners/': typeof AdminBannersIndexRoute
-  '/admin/feed/': typeof AdminFeedIndexRoute
+  '/stats/npm/embed': typeof StatsNpmEmbedRoute
+  '/_library/$libraryId/': typeof LibraryLibraryIdIndexRoute
   '/admin/feedback/': typeof AdminFeedbackIndexRoute
   '/admin/notes/': typeof AdminNotesIndexRoute
   '/admin/roles/': typeof AdminRolesIndexRoute
   '/admin/showcases/': typeof AdminShowcasesIndexRoute
   '/api/mcp/': typeof ApiMcpIndexRoute
+  '/intent/registry/': typeof IntentRegistryIndexRoute
   '/stats/npm/': typeof StatsNpmIndexRoute
-  '/$libraryId/$version/docs/$': typeof LibraryIdVersionDocsSplatRoute
-  '/$libraryId/$version/docs/community-resources': typeof LibraryIdVersionDocsCommunityResourcesRoute
-  '/$libraryId/$version/docs/contributors': typeof LibraryIdVersionDocsContributorsRoute
-  '/$libraryId/$version/docs/npm-stats': typeof LibraryIdVersionDocsNpmStatsRoute
-  '/$libraryId/$version/docs/{$}.md': typeof LibraryIdVersionDocsChar123Char125DotmdRoute
+  '/_library/$libraryId/$version/docs': typeof LibraryLibraryIdVersionDocsRouteWithChildren
+  '/_library/$libraryId/$version/llms.txt': typeof LibraryLibraryIdVersionLlmsDottxtRoute
   '/api/auth/callback/$provider': typeof ApiAuthCallbackProviderRoute
-  '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
-  '/$libraryId/$version/docs/framework/': typeof LibraryIdVersionDocsFrameworkIndexRoute
-  '/$libraryId/$version/docs/framework/$framework/$': typeof LibraryIdVersionDocsFrameworkFrameworkSplatRoute
-  '/$libraryId/$version/docs/framework/$framework/{$}.md': typeof LibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute
-  '/$libraryId/$version/docs/framework/$framework/': typeof LibraryIdVersionDocsFrameworkFrameworkIndexRoute
-  '/$libraryId/$version/docs/framework/$framework/examples/$': typeof LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute
+  '/api/auth/cli/create-ticket': typeof ApiAuthCliCreateTicketRoute
+  '/api/builder/deploy/check-name': typeof ApiBuilderDeployCheckNameRoute
+  '/api/builder/deploy/github': typeof ApiBuilderDeployGithubRoute
+  '/intent/registry/$packageName/$skillName': typeof IntentRegistryPackageNameSkillNameRoute
+  '/intent/registry/$packageName/{$}.md': typeof IntentRegistryPackageNameChar123Char125DotmdRoute
+  '/_library/$libraryId/$version/': typeof LibraryLibraryIdVersionIndexRoute
+  '/_library/ai/$version/': typeof LibraryAiVersionIndexRoute
+  '/_library/cli/$version/': typeof LibraryCliVersionIndexRoute
+  '/_library/config/$version/': typeof LibraryConfigVersionIndexRoute
+  '/_library/db/$version/': typeof LibraryDbVersionIndexRoute
+  '/_library/devtools/$version/': typeof LibraryDevtoolsVersionIndexRoute
+  '/_library/form/$version/': typeof LibraryFormVersionIndexRoute
+  '/_library/hotkeys/$version/': typeof LibraryHotkeysVersionIndexRoute
+  '/_library/intent/$version/': typeof LibraryIntentVersionIndexRoute
+  '/_library/pacer/$version/': typeof LibraryPacerVersionIndexRoute
+  '/_library/query/$version/': typeof LibraryQueryVersionIndexRoute
+  '/_library/ranger/$version/': typeof LibraryRangerVersionIndexRoute
+  '/_library/router/$version/': typeof LibraryRouterVersionIndexRoute
+  '/_library/start/$version/': typeof LibraryStartVersionIndexRoute
+  '/_library/store/$version/': typeof LibraryStoreVersionIndexRoute
+  '/_library/table/$version/': typeof LibraryTableVersionIndexRoute
+  '/_library/virtual/$version/': typeof LibraryVirtualVersionIndexRoute
+  '/_library/workflow/$version/': typeof LibraryWorkflowVersionIndexRoute
+  '/intent/registry/$packageName/': typeof IntentRegistryPackageNameIndexRoute
+  '/_library/$libraryId/$version/docs/$': typeof LibraryLibraryIdVersionDocsSplatRoute
+  '/_library/$libraryId/$version/docs/blog': typeof LibraryLibraryIdVersionDocsBlogRoute
+  '/_library/$libraryId/$version/docs/community-resources': typeof LibraryLibraryIdVersionDocsCommunityResourcesRoute
+  '/_library/$libraryId/$version/docs/contributors': typeof LibraryLibraryIdVersionDocsContributorsRoute
+  '/_library/$libraryId/$version/docs/index.md': typeof LibraryLibraryIdVersionDocsIndexDotmdRoute
+  '/_library/$libraryId/$version/docs/npm-stats': typeof LibraryLibraryIdVersionDocsNpmStatsRoute
+  '/_library/$libraryId/$version/docs/{$}.md': typeof LibraryLibraryIdVersionDocsChar123Char125DotmdRoute
+  '/api/auth/cli/status/$ticketId': typeof ApiAuthCliStatusTicketIdRoute
+  '/_library/$libraryId/$version/docs/': typeof LibraryLibraryIdVersionDocsIndexRoute
+  '/_library/$libraryId/$version/docs/framework/': typeof LibraryLibraryIdVersionDocsFrameworkIndexRoute
+  '/_library/$libraryId/$version/docs/framework/$framework/$': typeof LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRoute
+  '/_library/$libraryId/$version/docs/framework/$framework/{$}.md': typeof LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute
+  '/_library/$libraryId/$version/docs/framework/$framework/': typeof LibraryLibraryIdVersionDocsFrameworkFrameworkIndexRoute
+  '/_library/$libraryId/$version/docs/framework/$framework/examples/$': typeof LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
-    | '/$libraryId'
     | '/admin'
     | '/account'
     | '/ads'
@@ -905,6 +1442,7 @@ export interface FileRouteTypes {
     | '/feedback-leaderboard'
     | '/learn'
     | '/libraries'
+    | '/llms-full.txt'
     | '/llms.txt'
     | '/login'
     | '/maintainers'
@@ -913,101 +1451,159 @@ export interface FileRouteTypes {
     | '/partners'
     | '/partners-embed'
     | '/privacy'
+    | '/robots.txt'
     | '/rss.xml'
+    | '/shop'
+    | '/showcases'
+    | '/sitemap.xml'
     | '/sponsors-embed'
     | '/support'
     | '/tenets'
     | '/terms'
     | '/workshops'
-    | '/$libraryId/$version'
+    | '/$libraryId'
     | '/.well-known/oauth-authorization-server'
     | '/account/feedback'
     | '/account/integrations'
     | '/account/notes'
     | '/account/submissions'
     | '/admin/audit'
+    | '/admin/docs'
     | '/admin/github-stats'
+    | '/admin/intent'
     | '/admin/logins'
     | '/admin/npm-stats'
     | '/admin/users'
-    | '/api/dry-run-add-to-app'
-    | '/api/dry-run-create-app'
-    | '/api/initial-payload'
-    | '/api/load-remote-add-on'
-    | '/api/load-starter'
     | '/api/uploadthing'
+    | '/auth/cli'
     | '/auth/popup-success'
     | '/auth/signout'
     | '/blog/$'
-    | '/feed/$id'
+    | '/builder/docs'
+    | '/libraries/$framework'
     | '/oauth/authorize'
     | '/oauth/register'
     | '/oauth/token'
+    | '/partners/$partner'
+    | '/partners/railway'
+    | '/shop/$handle'
+    | '/shop/cart'
+    | '/shop/search'
     | '/showcase/$id'
     | '/showcase/submit'
-    | '/$libraryId/'
+    | '/stack/$category'
     | '/account/'
     | '/admin/'
     | '/blog/'
-    | '/feed'
-    | '/showcase'
-    | '/stats'
-    | '/$libraryId/$version/docs'
-    | '/admin/banners/$id'
-    | '/admin/feed/$id'
+    | '/builder/'
+    | '/partners/'
+    | '/shop/'
+    | '/showcase/'
+    | '/stats/'
+    | '/$libraryId/$version'
     | '/admin/feedback/$id'
     | '/admin/roles/$roleId'
     | '/admin/showcases/$id'
     | '/admin/users/$userId'
-    | '/api/admin/sync'
+    | '/api/application-starter/resolve'
+    | '/api/builder/compile'
+    | '/api/builder/compile-attributed'
+    | '/api/builder/download'
+    | '/api/builder/feature-artifacts'
+    | '/api/builder/features'
+    | '/api/builder/load-remote-addon'
+    | '/api/builder/load-remote-template'
+    | '/api/builder/load-template'
+    | '/api/builder/suggest'
+    | '/api/builder/validate'
+    | '/api/data/libraries'
+    | '/api/data/partners'
     | '/api/discord/interactions'
+    | '/api/example/deploy'
     | '/api/github/webhook'
     | '/api/mcp/$'
+    | '/api/og/{$}.png'
     | '/auth/$provider/start'
+    | '/intent/registry/$packageName'
+    | '/shop/collections/$handle'
+    | '/shop/pages/$handle'
+    | '/shop/policies/$handle'
+    | '/shop/products/$handle'
     | '/showcase/edit/$id'
     | '/stats/npm/$packages'
+    | '/stats/npm/embed'
+    | '/$libraryId/'
+    | '/admin/feedback/'
+    | '/admin/notes/'
+    | '/admin/roles/'
+    | '/admin/showcases/'
+    | '/api/mcp/'
+    | '/intent/registry/'
+    | '/stats/npm/'
+    | '/$libraryId/$version/docs'
+    | '/$libraryId/$version/llms.txt'
+    | '/api/auth/callback/$provider'
+    | '/api/auth/cli/create-ticket'
+    | '/api/builder/deploy/check-name'
+    | '/api/builder/deploy/github'
+    | '/intent/registry/$packageName/$skillName'
+    | '/intent/registry/$packageName/{$}.md'
     | '/$libraryId/$version/'
-    | '/admin/banners'
-    | '/admin/feed'
-    | '/admin/feedback'
-    | '/admin/notes'
-    | '/admin/roles'
-    | '/admin/showcases'
-    | '/api/mcp'
-    | '/stats/npm'
+    | '/ai/$version/'
+    | '/cli/$version/'
+    | '/config/$version/'
+    | '/db/$version/'
+    | '/devtools/$version/'
+    | '/form/$version/'
+    | '/hotkeys/$version/'
+    | '/intent/$version/'
+    | '/pacer/$version/'
+    | '/query/$version/'
+    | '/ranger/$version/'
+    | '/router/$version/'
+    | '/start/$version/'
+    | '/store/$version/'
+    | '/table/$version/'
+    | '/virtual/$version/'
+    | '/workflow/$version/'
+    | '/intent/registry/$packageName/'
     | '/$libraryId/$version/docs/$'
+    | '/$libraryId/$version/docs/blog'
     | '/$libraryId/$version/docs/community-resources'
     | '/$libraryId/$version/docs/contributors'
+    | '/$libraryId/$version/docs/index.md'
     | '/$libraryId/$version/docs/npm-stats'
     | '/$libraryId/$version/docs/{$}.md'
-    | '/api/auth/callback/$provider'
+    | '/api/auth/cli/status/$ticketId'
     | '/$libraryId/$version/docs/'
-    | '/$libraryId/$version/docs/framework'
+    | '/$libraryId/$version/docs/framework/'
     | '/$libraryId/$version/docs/framework/$framework/$'
     | '/$libraryId/$version/docs/framework/$framework/{$}.md'
-    | '/$libraryId/$version/docs/framework/$framework'
+    | '/$libraryId/$version/docs/framework/$framework/'
     | '/$libraryId/$version/docs/framework/$framework/examples/$'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
     | '/ads'
     | '/brand-guide'
-    | '/builder'
     | '/dashboard'
     | '/ethos'
     | '/explore'
     | '/feedback-leaderboard'
     | '/learn'
     | '/libraries'
+    | '/llms-full.txt'
     | '/llms.txt'
     | '/login'
     | '/maintainers'
     | '/merch'
     | '/paid-support'
-    | '/partners'
     | '/partners-embed'
     | '/privacy'
+    | '/robots.txt'
     | '/rss.xml'
+    | '/showcases'
+    | '/sitemap.xml'
     | '/sponsors-embed'
     | '/support'
     | '/tenets'
@@ -1019,60 +1615,110 @@ export interface FileRouteTypes {
     | '/account/notes'
     | '/account/submissions'
     | '/admin/audit'
+    | '/admin/docs'
     | '/admin/github-stats'
+    | '/admin/intent'
     | '/admin/logins'
     | '/admin/npm-stats'
     | '/admin/users'
-    | '/api/dry-run-add-to-app'
-    | '/api/dry-run-create-app'
-    | '/api/initial-payload'
-    | '/api/load-remote-add-on'
-    | '/api/load-starter'
     | '/api/uploadthing'
+    | '/auth/cli'
     | '/auth/popup-success'
     | '/auth/signout'
     | '/blog/$'
-    | '/feed/$id'
+    | '/builder/docs'
+    | '/libraries/$framework'
     | '/oauth/authorize'
     | '/oauth/register'
     | '/oauth/token'
+    | '/partners/$partner'
+    | '/partners/railway'
+    | '/shop/$handle'
+    | '/shop/cart'
+    | '/shop/search'
     | '/showcase/$id'
     | '/showcase/submit'
-    | '/$libraryId'
+    | '/stack/$category'
     | '/account'
     | '/admin'
     | '/blog'
-    | '/feed'
+    | '/builder'
+    | '/partners'
+    | '/shop'
     | '/showcase'
     | '/stats'
-    | '/admin/banners/$id'
-    | '/admin/feed/$id'
     | '/admin/feedback/$id'
     | '/admin/roles/$roleId'
     | '/admin/showcases/$id'
     | '/admin/users/$userId'
-    | '/api/admin/sync'
+    | '/api/application-starter/resolve'
+    | '/api/builder/compile'
+    | '/api/builder/compile-attributed'
+    | '/api/builder/download'
+    | '/api/builder/feature-artifacts'
+    | '/api/builder/features'
+    | '/api/builder/load-remote-addon'
+    | '/api/builder/load-remote-template'
+    | '/api/builder/load-template'
+    | '/api/builder/suggest'
+    | '/api/builder/validate'
+    | '/api/data/libraries'
+    | '/api/data/partners'
     | '/api/discord/interactions'
+    | '/api/example/deploy'
     | '/api/github/webhook'
     | '/api/mcp/$'
+    | '/api/og/{$}.png'
     | '/auth/$provider/start'
+    | '/shop/collections/$handle'
+    | '/shop/pages/$handle'
+    | '/shop/policies/$handle'
+    | '/shop/products/$handle'
     | '/showcase/edit/$id'
     | '/stats/npm/$packages'
-    | '/$libraryId/$version'
-    | '/admin/banners'
-    | '/admin/feed'
+    | '/stats/npm/embed'
+    | '/$libraryId'
     | '/admin/feedback'
     | '/admin/notes'
     | '/admin/roles'
     | '/admin/showcases'
     | '/api/mcp'
+    | '/intent/registry'
     | '/stats/npm'
+    | '/$libraryId/$version/llms.txt'
+    | '/api/auth/callback/$provider'
+    | '/api/auth/cli/create-ticket'
+    | '/api/builder/deploy/check-name'
+    | '/api/builder/deploy/github'
+    | '/intent/registry/$packageName/$skillName'
+    | '/intent/registry/$packageName/{$}.md'
+    | '/$libraryId/$version'
+    | '/ai/$version'
+    | '/cli/$version'
+    | '/config/$version'
+    | '/db/$version'
+    | '/devtools/$version'
+    | '/form/$version'
+    | '/hotkeys/$version'
+    | '/intent/$version'
+    | '/pacer/$version'
+    | '/query/$version'
+    | '/ranger/$version'
+    | '/router/$version'
+    | '/start/$version'
+    | '/store/$version'
+    | '/table/$version'
+    | '/virtual/$version'
+    | '/workflow/$version'
+    | '/intent/registry/$packageName'
     | '/$libraryId/$version/docs/$'
+    | '/$libraryId/$version/docs/blog'
     | '/$libraryId/$version/docs/community-resources'
     | '/$libraryId/$version/docs/contributors'
+    | '/$libraryId/$version/docs/index.md'
     | '/$libraryId/$version/docs/npm-stats'
     | '/$libraryId/$version/docs/{$}.md'
-    | '/api/auth/callback/$provider'
+    | '/api/auth/cli/status/$ticketId'
     | '/$libraryId/$version/docs'
     | '/$libraryId/$version/docs/framework'
     | '/$libraryId/$version/docs/framework/$framework/$'
@@ -1082,8 +1728,8 @@ export interface FileRouteTypes {
   id:
     | '__root__'
     | '/'
-    | '/$libraryId'
     | '/admin'
+    | '/_library'
     | '/account'
     | '/ads'
     | '/blog'
@@ -1095,6 +1741,7 @@ export interface FileRouteTypes {
     | '/feedback-leaderboard'
     | '/learn'
     | '/libraries'
+    | '/llms-full.txt'
     | '/llms.txt'
     | '/login'
     | '/maintainers'
@@ -1103,139 +1750,217 @@ export interface FileRouteTypes {
     | '/partners'
     | '/partners-embed'
     | '/privacy'
+    | '/robots.txt'
     | '/rss.xml'
+    | '/shop'
+    | '/showcases'
+    | '/sitemap.xml'
     | '/sponsors-embed'
     | '/support'
     | '/tenets'
     | '/terms'
     | '/workshops'
-    | '/$libraryId/$version'
+    | '/_library/$libraryId'
     | '/.well-known/oauth-authorization-server'
     | '/account/feedback'
     | '/account/integrations'
     | '/account/notes'
     | '/account/submissions'
     | '/admin/audit'
+    | '/admin/docs'
     | '/admin/github-stats'
+    | '/admin/intent'
     | '/admin/logins'
     | '/admin/npm-stats'
     | '/admin/users'
-    | '/api/dry-run-add-to-app'
-    | '/api/dry-run-create-app'
-    | '/api/initial-payload'
-    | '/api/load-remote-add-on'
-    | '/api/load-starter'
     | '/api/uploadthing'
+    | '/auth/cli'
     | '/auth/popup-success'
     | '/auth/signout'
     | '/blog/$'
-    | '/feed/$id'
+    | '/builder/docs'
+    | '/libraries_/$framework'
     | '/oauth/authorize'
     | '/oauth/register'
     | '/oauth/token'
+    | '/partners/$partner'
+    | '/partners/railway'
+    | '/shop/$handle'
+    | '/shop/cart'
+    | '/shop/search'
     | '/showcase/$id'
     | '/showcase/submit'
-    | '/$libraryId/'
+    | '/stack/$category'
     | '/account/'
     | '/admin/'
     | '/blog/'
-    | '/feed/'
+    | '/builder/'
+    | '/partners/'
+    | '/shop/'
     | '/showcase/'
     | '/stats/'
-    | '/$libraryId/$version/docs'
-    | '/admin/banners/$id'
-    | '/admin/feed/$id'
+    | '/_library/$libraryId/$version'
     | '/admin/feedback_/$id'
     | '/admin/roles/$roleId'
     | '/admin/showcases_/$id'
     | '/admin/users/$userId'
-    | '/api/admin/sync'
+    | '/api/application-starter/resolve'
+    | '/api/builder/compile'
+    | '/api/builder/compile-attributed'
+    | '/api/builder/download'
+    | '/api/builder/feature-artifacts'
+    | '/api/builder/features'
+    | '/api/builder/load-remote-addon'
+    | '/api/builder/load-remote-template'
+    | '/api/builder/load-template'
+    | '/api/builder/suggest'
+    | '/api/builder/validate'
+    | '/api/data/libraries'
+    | '/api/data/partners'
     | '/api/discord/interactions'
+    | '/api/example/deploy'
     | '/api/github/webhook'
     | '/api/mcp/$'
+    | '/api/og/{$}.png'
     | '/auth/$provider/start'
+    | '/intent/registry/$packageName'
+    | '/shop/collections/$handle'
+    | '/shop/pages/$handle'
+    | '/shop/policies/$handle'
+    | '/shop/products/$handle'
     | '/showcase/edit/$id'
     | '/stats/npm/$packages'
-    | '/$libraryId/$version/'
-    | '/admin/banners/'
-    | '/admin/feed/'
+    | '/stats/npm/embed'
+    | '/_library/$libraryId/'
     | '/admin/feedback/'
     | '/admin/notes/'
     | '/admin/roles/'
     | '/admin/showcases/'
     | '/api/mcp/'
+    | '/intent/registry/'
     | '/stats/npm/'
-    | '/$libraryId/$version/docs/$'
-    | '/$libraryId/$version/docs/community-resources'
-    | '/$libraryId/$version/docs/contributors'
-    | '/$libraryId/$version/docs/npm-stats'
-    | '/$libraryId/$version/docs/{$}.md'
+    | '/_library/$libraryId/$version/docs'
+    | '/_library/$libraryId/$version/llms.txt'
     | '/api/auth/callback/$provider'
-    | '/$libraryId/$version/docs/'
-    | '/$libraryId/$version/docs/framework/'
-    | '/$libraryId/$version/docs/framework/$framework/$'
-    | '/$libraryId/$version/docs/framework/$framework/{$}.md'
-    | '/$libraryId/$version/docs/framework/$framework/'
-    | '/$libraryId/$version/docs/framework/$framework/examples/$'
+    | '/api/auth/cli/create-ticket'
+    | '/api/builder/deploy/check-name'
+    | '/api/builder/deploy/github'
+    | '/intent/registry/$packageName/$skillName'
+    | '/intent/registry/$packageName/{$}.md'
+    | '/_library/$libraryId/$version/'
+    | '/_library/ai/$version/'
+    | '/_library/cli/$version/'
+    | '/_library/config/$version/'
+    | '/_library/db/$version/'
+    | '/_library/devtools/$version/'
+    | '/_library/form/$version/'
+    | '/_library/hotkeys/$version/'
+    | '/_library/intent/$version/'
+    | '/_library/pacer/$version/'
+    | '/_library/query/$version/'
+    | '/_library/ranger/$version/'
+    | '/_library/router/$version/'
+    | '/_library/start/$version/'
+    | '/_library/store/$version/'
+    | '/_library/table/$version/'
+    | '/_library/virtual/$version/'
+    | '/_library/workflow/$version/'
+    | '/intent/registry/$packageName/'
+    | '/_library/$libraryId/$version/docs/$'
+    | '/_library/$libraryId/$version/docs/blog'
+    | '/_library/$libraryId/$version/docs/community-resources'
+    | '/_library/$libraryId/$version/docs/contributors'
+    | '/_library/$libraryId/$version/docs/index.md'
+    | '/_library/$libraryId/$version/docs/npm-stats'
+    | '/_library/$libraryId/$version/docs/{$}.md'
+    | '/api/auth/cli/status/$ticketId'
+    | '/_library/$libraryId/$version/docs/'
+    | '/_library/$libraryId/$version/docs/framework/'
+    | '/_library/$libraryId/$version/docs/framework/$framework/$'
+    | '/_library/$libraryId/$version/docs/framework/$framework/{$}.md'
+    | '/_library/$libraryId/$version/docs/framework/$framework/'
+    | '/_library/$libraryId/$version/docs/framework/$framework/examples/$'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  LibraryIdRouteRoute: typeof LibraryIdRouteRouteWithChildren
   AdminRouteRoute: typeof AdminRouteRouteWithChildren
+  LibraryRoute: typeof LibraryRouteWithChildren
   AccountRoute: typeof AccountRouteWithChildren
   AdsRoute: typeof AdsRoute
   BlogRoute: typeof BlogRouteWithChildren
   BrandGuideRoute: typeof BrandGuideRoute
-  BuilderRoute: typeof BuilderRoute
+  BuilderRoute: typeof BuilderRouteWithChildren
   DashboardRoute: typeof DashboardRoute
   EthosRoute: typeof EthosRoute
   ExploreRoute: typeof ExploreRoute
   FeedbackLeaderboardRoute: typeof FeedbackLeaderboardRoute
   LearnRoute: typeof LearnRoute
   LibrariesRoute: typeof LibrariesRoute
+  LlmsFullDottxtRoute: typeof LlmsFullDottxtRoute
   LlmsDottxtRoute: typeof LlmsDottxtRoute
   LoginRoute: typeof LoginRoute
   MaintainersRoute: typeof MaintainersRoute
   MerchRoute: typeof MerchRoute
   PaidSupportRoute: typeof PaidSupportRoute
-  PartnersRoute: typeof PartnersRoute
+  PartnersRoute: typeof PartnersRouteWithChildren
   PartnersEmbedRoute: typeof PartnersEmbedRoute
   PrivacyRoute: typeof PrivacyRoute
+  RobotsDottxtRoute: typeof RobotsDottxtRoute
   RssDotxmlRoute: typeof RssDotxmlRoute
+  ShopRoute: typeof ShopRouteWithChildren
+  ShowcasesRoute: typeof ShowcasesRoute
+  SitemapDotxmlRoute: typeof SitemapDotxmlRoute
   SponsorsEmbedRoute: typeof SponsorsEmbedRoute
   SupportRoute: typeof SupportRoute
   TenetsRoute: typeof TenetsRoute
   TermsRoute: typeof TermsRoute
   WorkshopsRoute: typeof WorkshopsRoute
   DotwellKnownOauthAuthorizationServerRoute: typeof DotwellKnownOauthAuthorizationServerRoute
-  ApiDryRunAddToAppRoute: typeof ApiDryRunAddToAppRoute
-  ApiDryRunCreateAppRoute: typeof ApiDryRunCreateAppRoute
-  ApiInitialPayloadRoute: typeof ApiInitialPayloadRoute
-  ApiLoadRemoteAddOnRoute: typeof ApiLoadRemoteAddOnRoute
-  ApiLoadStarterRoute: typeof ApiLoadStarterRoute
   ApiUploadthingRoute: typeof ApiUploadthingRoute
+  AuthCliRoute: typeof AuthCliRoute
   AuthPopupSuccessRoute: typeof AuthPopupSuccessRoute
   AuthSignoutRoute: typeof AuthSignoutRoute
-  FeedIdRoute: typeof FeedIdRoute
+  LibrariesFrameworkRoute: typeof LibrariesFrameworkRoute
   OauthAuthorizeRoute: typeof OauthAuthorizeRoute
   OauthRegisterRoute: typeof OauthRegisterRoute
   OauthTokenRoute: typeof OauthTokenRoute
   ShowcaseIdRoute: typeof ShowcaseIdRoute
   ShowcaseSubmitRoute: typeof ShowcaseSubmitRoute
-  FeedIndexRoute: typeof FeedIndexRoute
+  StackCategoryRoute: typeof StackCategoryRoute
   ShowcaseIndexRoute: typeof ShowcaseIndexRoute
   StatsIndexRoute: typeof StatsIndexRoute
-  ApiAdminSyncRoute: typeof ApiAdminSyncRoute
+  ApiApplicationStarterResolveRoute: typeof ApiApplicationStarterResolveRoute
+  ApiBuilderCompileRoute: typeof ApiBuilderCompileRoute
+  ApiBuilderCompileAttributedRoute: typeof ApiBuilderCompileAttributedRoute
+  ApiBuilderDownloadRoute: typeof ApiBuilderDownloadRoute
+  ApiBuilderFeatureArtifactsRoute: typeof ApiBuilderFeatureArtifactsRoute
+  ApiBuilderFeaturesRoute: typeof ApiBuilderFeaturesRoute
+  ApiBuilderLoadRemoteAddonRoute: typeof ApiBuilderLoadRemoteAddonRoute
+  ApiBuilderLoadRemoteTemplateRoute: typeof ApiBuilderLoadRemoteTemplateRoute
+  ApiBuilderLoadTemplateRoute: typeof ApiBuilderLoadTemplateRoute
+  ApiBuilderSuggestRoute: typeof ApiBuilderSuggestRoute
+  ApiBuilderValidateRoute: typeof ApiBuilderValidateRoute
+  ApiDataLibrariesRoute: typeof ApiDataLibrariesRoute
+  ApiDataPartnersRoute: typeof ApiDataPartnersRoute
   ApiDiscordInteractionsRoute: typeof ApiDiscordInteractionsRoute
+  ApiExampleDeployRoute: typeof ApiExampleDeployRoute
   ApiGithubWebhookRoute: typeof ApiGithubWebhookRoute
   ApiMcpSplatRoute: typeof ApiMcpSplatRoute
+  ApiOgChar123Char125DotpngRoute: typeof ApiOgChar123Char125DotpngRoute
   AuthProviderStartRoute: typeof AuthProviderStartRoute
+  IntentRegistryPackageNameRoute: typeof IntentRegistryPackageNameRouteWithChildren
   ShowcaseEditIdRoute: typeof ShowcaseEditIdRoute
   StatsNpmPackagesRoute: typeof StatsNpmPackagesRoute
+  StatsNpmEmbedRoute: typeof StatsNpmEmbedRoute
   ApiMcpIndexRoute: typeof ApiMcpIndexRoute
+  IntentRegistryIndexRoute: typeof IntentRegistryIndexRoute
   StatsNpmIndexRoute: typeof StatsNpmIndexRoute
   ApiAuthCallbackProviderRoute: typeof ApiAuthCallbackProviderRoute
+  ApiAuthCliCreateTicketRoute: typeof ApiAuthCliCreateTicketRoute
+  ApiBuilderDeployCheckNameRoute: typeof ApiBuilderDeployCheckNameRoute
+  ApiBuilderDeployGithubRoute: typeof ApiBuilderDeployGithubRoute
+  ApiAuthCliStatusTicketIdRoute: typeof ApiAuthCliStatusTicketIdRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -1275,6 +2000,27 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SponsorsEmbedRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/sitemap.xml': {
+      id: '/sitemap.xml'
+      path: '/sitemap.xml'
+      fullPath: '/sitemap.xml'
+      preLoaderRoute: typeof SitemapDotxmlRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/showcases': {
+      id: '/showcases'
+      path: '/showcases'
+      fullPath: '/showcases'
+      preLoaderRoute: typeof ShowcasesRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/shop': {
+      id: '/shop'
+      path: '/shop'
+      fullPath: '/shop'
+      preLoaderRoute: typeof ShopRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/rss.xml': {
       id: '/rss.xml'
       path: '/rss.xml'
@@ -1282,6 +2028,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof RssDotxmlRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/robots.txt': {
+      id: '/robots.txt'
+      path: '/robots.txt'
+      fullPath: '/robots.txt'
+      preLoaderRoute: typeof RobotsDottxtRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/privacy': {
       id: '/privacy'
       path: '/privacy'
@@ -1338,6 +2091,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LlmsDottxtRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/llms-full.txt': {
+      id: '/llms-full.txt'
+      path: '/llms-full.txt'
+      fullPath: '/llms-full.txt'
+      preLoaderRoute: typeof LlmsFullDottxtRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/libraries': {
       id: '/libraries'
       path: '/libraries'
@@ -1415,6 +2175,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AccountRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/_library': {
+      id: '/_library'
+      path: ''
+      fullPath: '/'
+      preLoaderRoute: typeof LibraryRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/admin': {
       id: '/admin'
       path: '/admin'
@@ -1422,13 +2189,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/$libraryId': {
-      id: '/$libraryId'
-      path: '/$libraryId'
-      fullPath: '/$libraryId'
-      preLoaderRoute: typeof LibraryIdRouteRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/': {
       id: '/'
       path: '/'
@@ -1439,23 +2199,37 @@ declare module '@tanstack/react-router' {
     '/stats/': {
       id: '/stats/'
       path: '/stats'
-      fullPath: '/stats'
+      fullPath: '/stats/'
       preLoaderRoute: typeof StatsIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/showcase/': {
       id: '/showcase/'
       path: '/showcase'
-      fullPath: '/showcase'
+      fullPath: '/showcase/'
       preLoaderRoute: typeof ShowcaseIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/feed/': {
-      id: '/feed/'
-      path: '/feed'
-      fullPath: '/feed'
-      preLoaderRoute: typeof FeedIndexRouteImport
-      parentRoute: typeof rootRouteImport
+    '/shop/': {
+      id: '/shop/'
+      path: '/'
+      fullPath: '/shop/'
+      preLoaderRoute: typeof ShopIndexRouteImport
+      parentRoute: typeof ShopRoute
+    }
+    '/partners/': {
+      id: '/partners/'
+      path: '/'
+      fullPath: '/partners/'
+      preLoaderRoute: typeof PartnersIndexRouteImport
+      parentRoute: typeof PartnersRoute
+    }
+    '/builder/': {
+      id: '/builder/'
+      path: '/'
+      fullPath: '/builder/'
+      preLoaderRoute: typeof BuilderIndexRouteImport
+      parentRoute: typeof BuilderRoute
     }
     '/blog/': {
       id: '/blog/'
@@ -1478,12 +2252,12 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AccountIndexRouteImport
       parentRoute: typeof AccountRoute
     }
-    '/$libraryId/': {
-      id: '/$libraryId/'
-      path: '/'
-      fullPath: '/$libraryId/'
-      preLoaderRoute: typeof LibraryIdIndexRouteImport
-      parentRoute: typeof LibraryIdRouteRoute
+    '/stack/$category': {
+      id: '/stack/$category'
+      path: '/stack/$category'
+      fullPath: '/stack/$category'
+      preLoaderRoute: typeof StackCategoryRouteImport
+      parentRoute: typeof rootRouteImport
     }
     '/showcase/submit': {
       id: '/showcase/submit'
@@ -1499,6 +2273,41 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ShowcaseIdRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/shop/search': {
+      id: '/shop/search'
+      path: '/search'
+      fullPath: '/shop/search'
+      preLoaderRoute: typeof ShopSearchRouteImport
+      parentRoute: typeof ShopRoute
+    }
+    '/shop/cart': {
+      id: '/shop/cart'
+      path: '/cart'
+      fullPath: '/shop/cart'
+      preLoaderRoute: typeof ShopCartRouteImport
+      parentRoute: typeof ShopRoute
+    }
+    '/shop/$handle': {
+      id: '/shop/$handle'
+      path: '/$handle'
+      fullPath: '/shop/$handle'
+      preLoaderRoute: typeof ShopHandleRouteImport
+      parentRoute: typeof ShopRoute
+    }
+    '/partners/railway': {
+      id: '/partners/railway'
+      path: '/railway'
+      fullPath: '/partners/railway'
+      preLoaderRoute: typeof PartnersRailwayRouteImport
+      parentRoute: typeof PartnersRoute
+    }
+    '/partners/$partner': {
+      id: '/partners/$partner'
+      path: '/$partner'
+      fullPath: '/partners/$partner'
+      preLoaderRoute: typeof PartnersPartnerRouteImport
+      parentRoute: typeof PartnersRoute
+    }
     '/oauth/token': {
       id: '/oauth/token'
       path: '/oauth/token'
@@ -1520,13 +2329,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof OauthAuthorizeRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/feed/$id': {
-      id: '/feed/$id'
-      path: '/feed/$id'
-      fullPath: '/feed/$id'
-      preLoaderRoute: typeof FeedIdRouteImport
+    '/libraries_/$framework': {
+      id: '/libraries_/$framework'
+      path: '/libraries/$framework'
+      fullPath: '/libraries/$framework'
+      preLoaderRoute: typeof LibrariesFrameworkRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/builder/docs': {
+      id: '/builder/docs'
+      path: '/docs'
+      fullPath: '/builder/docs'
+      preLoaderRoute: typeof BuilderDocsRouteImport
+      parentRoute: typeof BuilderRoute
+    }
     '/blog/$': {
       id: '/blog/$'
       path: '/$'
@@ -1548,6 +2364,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthPopupSuccessRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/auth/cli': {
+      id: '/auth/cli'
+      path: '/auth/cli'
+      fullPath: '/auth/cli'
+      preLoaderRoute: typeof AuthCliRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api/uploadthing': {
       id: '/api/uploadthing'
       path: '/api/uploadthing'
@@ -1555,41 +2378,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ApiUploadthingRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/load-starter': {
-      id: '/api/load-starter'
-      path: '/api/load-starter'
-      fullPath: '/api/load-starter'
-      preLoaderRoute: typeof ApiLoadStarterRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/api/load-remote-add-on': {
-      id: '/api/load-remote-add-on'
-      path: '/api/load-remote-add-on'
-      fullPath: '/api/load-remote-add-on'
-      preLoaderRoute: typeof ApiLoadRemoteAddOnRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/api/initial-payload': {
-      id: '/api/initial-payload'
-      path: '/api/initial-payload'
-      fullPath: '/api/initial-payload'
-      preLoaderRoute: typeof ApiInitialPayloadRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/api/dry-run-create-app': {
-      id: '/api/dry-run-create-app'
-      path: '/api/dry-run-create-app'
-      fullPath: '/api/dry-run-create-app'
-      preLoaderRoute: typeof ApiDryRunCreateAppRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/api/dry-run-add-to-app': {
-      id: '/api/dry-run-add-to-app'
-      path: '/api/dry-run-add-to-app'
-      fullPath: '/api/dry-run-add-to-app'
-      preLoaderRoute: typeof ApiDryRunAddToAppRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/admin/users': {
       id: '/admin/users'
       path: '/users'
@@ -1611,6 +2399,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminLoginsRouteImport
       parentRoute: typeof AdminRouteRoute
     }
+    '/admin/intent': {
+      id: '/admin/intent'
+      path: '/intent'
+      fullPath: '/admin/intent'
+      preLoaderRoute: typeof AdminIntentRouteImport
+      parentRoute: typeof AdminRouteRoute
+    }
     '/admin/github-stats': {
       id: '/admin/github-stats'
       path: '/github-stats'
@@ -1618,6 +2413,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminGithubStatsRouteImport
       parentRoute: typeof AdminRouteRoute
     }
+    '/admin/docs': {
+      id: '/admin/docs'
+      path: '/docs'
+      fullPath: '/admin/docs'
+      preLoaderRoute: typeof AdminDocsRouteImport
+      parentRoute: typeof AdminRouteRoute
+    }
     '/admin/audit': {
       id: '/admin/audit'
       path: '/audit'
@@ -1660,75 +2462,75 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DotwellKnownOauthAuthorizationServerRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/$libraryId/$version': {
-      id: '/$libraryId/$version'
-      path: '/$version'
-      fullPath: '/$libraryId/$version'
-      preLoaderRoute: typeof LibraryIdVersionRouteImport
-      parentRoute: typeof LibraryIdRouteRoute
+    '/_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'
+      fullPath: '/stats/npm/'
       preLoaderRoute: typeof StatsNpmIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/intent/registry/': {
+      id: '/intent/registry/'
+      path: '/intent/registry'
+      fullPath: '/intent/registry/'
+      preLoaderRoute: typeof IntentRegistryIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api/mcp/': {
       id: '/api/mcp/'
       path: '/api/mcp'
-      fullPath: '/api/mcp'
+      fullPath: '/api/mcp/'
       preLoaderRoute: typeof ApiMcpIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/admin/showcases/': {
       id: '/admin/showcases/'
       path: '/showcases'
-      fullPath: '/admin/showcases'
+      fullPath: '/admin/showcases/'
       preLoaderRoute: typeof AdminShowcasesIndexRouteImport
       parentRoute: typeof AdminRouteRoute
     }
     '/admin/roles/': {
       id: '/admin/roles/'
       path: '/roles'
-      fullPath: '/admin/roles'
+      fullPath: '/admin/roles/'
       preLoaderRoute: typeof AdminRolesIndexRouteImport
       parentRoute: typeof AdminRouteRoute
     }
     '/admin/notes/': {
       id: '/admin/notes/'
       path: '/notes'
-      fullPath: '/admin/notes'
+      fullPath: '/admin/notes/'
       preLoaderRoute: typeof AdminNotesIndexRouteImport
       parentRoute: typeof AdminRouteRoute
     }
     '/admin/feedback/': {
       id: '/admin/feedback/'
       path: '/feedback'
-      fullPath: '/admin/feedback'
+      fullPath: '/admin/feedback/'
       preLoaderRoute: typeof AdminFeedbackIndexRouteImport
       parentRoute: typeof AdminRouteRoute
     }
-    '/admin/feed/': {
-      id: '/admin/feed/'
-      path: '/feed'
-      fullPath: '/admin/feed'
-      preLoaderRoute: typeof AdminFeedIndexRouteImport
-      parentRoute: typeof AdminRouteRoute
-    }
-    '/admin/banners/': {
-      id: '/admin/banners/'
-      path: '/banners'
-      fullPath: '/admin/banners'
-      preLoaderRoute: typeof AdminBannersIndexRouteImport
-      parentRoute: typeof AdminRouteRoute
-    }
-    '/$libraryId/$version/': {
-      id: '/$libraryId/$version/'
+    '/_library/$libraryId/': {
+      id: '/_library/$libraryId/'
       path: '/'
-      fullPath: '/$libraryId/$version/'
-      preLoaderRoute: typeof LibraryIdVersionIndexRouteImport
-      parentRoute: typeof LibraryIdVersionRoute
+      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'
@@ -1744,6 +2546,41 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ShowcaseEditIdRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/shop/products/$handle': {
+      id: '/shop/products/$handle'
+      path: '/products/$handle'
+      fullPath: '/shop/products/$handle'
+      preLoaderRoute: typeof ShopProductsHandleRouteImport
+      parentRoute: typeof ShopRoute
+    }
+    '/shop/policies/$handle': {
+      id: '/shop/policies/$handle'
+      path: '/policies/$handle'
+      fullPath: '/shop/policies/$handle'
+      preLoaderRoute: typeof ShopPoliciesHandleRouteImport
+      parentRoute: typeof ShopRoute
+    }
+    '/shop/pages/$handle': {
+      id: '/shop/pages/$handle'
+      path: '/pages/$handle'
+      fullPath: '/shop/pages/$handle'
+      preLoaderRoute: typeof ShopPagesHandleRouteImport
+      parentRoute: typeof ShopRoute
+    }
+    '/shop/collections/$handle': {
+      id: '/shop/collections/$handle'
+      path: '/collections/$handle'
+      fullPath: '/shop/collections/$handle'
+      preLoaderRoute: typeof ShopCollectionsHandleRouteImport
+      parentRoute: typeof ShopRoute
+    }
+    '/intent/registry/$packageName': {
+      id: '/intent/registry/$packageName'
+      path: '/intent/registry/$packageName'
+      fullPath: '/intent/registry/$packageName'
+      preLoaderRoute: typeof IntentRegistryPackageNameRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/auth/$provider/start': {
       id: '/auth/$provider/start'
       path: '/auth/$provider/start'
@@ -1751,6 +2588,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthProviderStartRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/api/og/{$}.png': {
+      id: '/api/og/{$}.png'
+      path: '/api/og/{$}.png'
+      fullPath: '/api/og/{$}.png'
+      preLoaderRoute: typeof ApiOgChar123Char125DotpngRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api/mcp/$': {
       id: '/api/mcp/$'
       path: '/api/mcp/$'
@@ -1765,6 +2609,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ApiGithubWebhookRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/api/example/deploy': {
+      id: '/api/example/deploy'
+      path: '/api/example/deploy'
+      fullPath: '/api/example/deploy'
+      preLoaderRoute: typeof ApiExampleDeployRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api/discord/interactions': {
       id: '/api/discord/interactions'
       path: '/api/discord/interactions'
@@ -1772,11 +2623,95 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ApiDiscordInteractionsRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/api/admin/sync': {
-      id: '/api/admin/sync'
-      path: '/api/admin/sync'
-      fullPath: '/api/admin/sync'
-      preLoaderRoute: typeof ApiAdminSyncRouteImport
+    '/api/data/partners': {
+      id: '/api/data/partners'
+      path: '/api/data/partners'
+      fullPath: '/api/data/partners'
+      preLoaderRoute: typeof ApiDataPartnersRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/data/libraries': {
+      id: '/api/data/libraries'
+      path: '/api/data/libraries'
+      fullPath: '/api/data/libraries'
+      preLoaderRoute: typeof ApiDataLibrariesRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/builder/validate': {
+      id: '/api/builder/validate'
+      path: '/api/builder/validate'
+      fullPath: '/api/builder/validate'
+      preLoaderRoute: typeof ApiBuilderValidateRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/builder/suggest': {
+      id: '/api/builder/suggest'
+      path: '/api/builder/suggest'
+      fullPath: '/api/builder/suggest'
+      preLoaderRoute: typeof ApiBuilderSuggestRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/builder/load-template': {
+      id: '/api/builder/load-template'
+      path: '/api/builder/load-template'
+      fullPath: '/api/builder/load-template'
+      preLoaderRoute: typeof ApiBuilderLoadTemplateRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/builder/load-remote-template': {
+      id: '/api/builder/load-remote-template'
+      path: '/api/builder/load-remote-template'
+      fullPath: '/api/builder/load-remote-template'
+      preLoaderRoute: typeof ApiBuilderLoadRemoteTemplateRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/builder/load-remote-addon': {
+      id: '/api/builder/load-remote-addon'
+      path: '/api/builder/load-remote-addon'
+      fullPath: '/api/builder/load-remote-addon'
+      preLoaderRoute: typeof ApiBuilderLoadRemoteAddonRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/builder/features': {
+      id: '/api/builder/features'
+      path: '/api/builder/features'
+      fullPath: '/api/builder/features'
+      preLoaderRoute: typeof ApiBuilderFeaturesRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/builder/feature-artifacts': {
+      id: '/api/builder/feature-artifacts'
+      path: '/api/builder/feature-artifacts'
+      fullPath: '/api/builder/feature-artifacts'
+      preLoaderRoute: typeof ApiBuilderFeatureArtifactsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/builder/download': {
+      id: '/api/builder/download'
+      path: '/api/builder/download'
+      fullPath: '/api/builder/download'
+      preLoaderRoute: typeof ApiBuilderDownloadRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/builder/compile-attributed': {
+      id: '/api/builder/compile-attributed'
+      path: '/api/builder/compile-attributed'
+      fullPath: '/api/builder/compile-attributed'
+      preLoaderRoute: typeof ApiBuilderCompileAttributedRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/builder/compile': {
+      id: '/api/builder/compile'
+      path: '/api/builder/compile'
+      fullPath: '/api/builder/compile'
+      preLoaderRoute: typeof ApiBuilderCompileRouteImport
+      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
       parentRoute: typeof rootRouteImport
     }
     '/admin/users/$userId': {
@@ -1807,33 +2742,180 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminFeedbackIdRouteImport
       parentRoute: typeof AdminRouteRoute
     }
-    '/admin/feed/$id': {
-      id: '/admin/feed/$id'
-      path: '/feed/$id'
-      fullPath: '/admin/feed/$id'
-      preLoaderRoute: typeof AdminFeedIdRouteImport
-      parentRoute: typeof AdminRouteRoute
+    '/_library/$libraryId/$version': {
+      id: '/_library/$libraryId/$version'
+      path: '/$version'
+      fullPath: '/$libraryId/$version'
+      preLoaderRoute: typeof LibraryLibraryIdVersionRouteImport
+      parentRoute: typeof LibraryLibraryIdRouteRoute
     }
-    '/admin/banners/$id': {
-      id: '/admin/banners/$id'
-      path: '/banners/$id'
-      fullPath: '/admin/banners/$id'
-      preLoaderRoute: typeof AdminBannersIdRouteImport
-      parentRoute: typeof AdminRouteRoute
+    '/intent/registry/$packageName/': {
+      id: '/intent/registry/$packageName/'
+      path: '/'
+      fullPath: '/intent/registry/$packageName/'
+      preLoaderRoute: typeof IntentRegistryPackageNameIndexRouteImport
+      parentRoute: typeof IntentRegistryPackageNameRoute
+    }
+    '/_library/workflow/$version/': {
+      id: '/_library/workflow/$version/'
+      path: '/workflow/$version'
+      fullPath: '/workflow/$version/'
+      preLoaderRoute: typeof LibraryWorkflowVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/virtual/$version/': {
+      id: '/_library/virtual/$version/'
+      path: '/virtual/$version'
+      fullPath: '/virtual/$version/'
+      preLoaderRoute: typeof LibraryVirtualVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/table/$version/': {
+      id: '/_library/table/$version/'
+      path: '/table/$version'
+      fullPath: '/table/$version/'
+      preLoaderRoute: typeof LibraryTableVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/store/$version/': {
+      id: '/_library/store/$version/'
+      path: '/store/$version'
+      fullPath: '/store/$version/'
+      preLoaderRoute: typeof LibraryStoreVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/start/$version/': {
+      id: '/_library/start/$version/'
+      path: '/start/$version'
+      fullPath: '/start/$version/'
+      preLoaderRoute: typeof LibraryStartVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/router/$version/': {
+      id: '/_library/router/$version/'
+      path: '/router/$version'
+      fullPath: '/router/$version/'
+      preLoaderRoute: typeof LibraryRouterVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/ranger/$version/': {
+      id: '/_library/ranger/$version/'
+      path: '/ranger/$version'
+      fullPath: '/ranger/$version/'
+      preLoaderRoute: typeof LibraryRangerVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/query/$version/': {
+      id: '/_library/query/$version/'
+      path: '/query/$version'
+      fullPath: '/query/$version/'
+      preLoaderRoute: typeof LibraryQueryVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/pacer/$version/': {
+      id: '/_library/pacer/$version/'
+      path: '/pacer/$version'
+      fullPath: '/pacer/$version/'
+      preLoaderRoute: typeof LibraryPacerVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/intent/$version/': {
+      id: '/_library/intent/$version/'
+      path: '/intent/$version'
+      fullPath: '/intent/$version/'
+      preLoaderRoute: typeof LibraryIntentVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/hotkeys/$version/': {
+      id: '/_library/hotkeys/$version/'
+      path: '/hotkeys/$version'
+      fullPath: '/hotkeys/$version/'
+      preLoaderRoute: typeof LibraryHotkeysVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/form/$version/': {
+      id: '/_library/form/$version/'
+      path: '/form/$version'
+      fullPath: '/form/$version/'
+      preLoaderRoute: typeof LibraryFormVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/devtools/$version/': {
+      id: '/_library/devtools/$version/'
+      path: '/devtools/$version'
+      fullPath: '/devtools/$version/'
+      preLoaderRoute: typeof LibraryDevtoolsVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/db/$version/': {
+      id: '/_library/db/$version/'
+      path: '/db/$version'
+      fullPath: '/db/$version/'
+      preLoaderRoute: typeof LibraryDbVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/config/$version/': {
+      id: '/_library/config/$version/'
+      path: '/config/$version'
+      fullPath: '/config/$version/'
+      preLoaderRoute: typeof LibraryConfigVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/cli/$version/': {
+      id: '/_library/cli/$version/'
+      path: '/cli/$version'
+      fullPath: '/cli/$version/'
+      preLoaderRoute: typeof LibraryCliVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/ai/$version/': {
+      id: '/_library/ai/$version/'
+      path: '/ai/$version'
+      fullPath: '/ai/$version/'
+      preLoaderRoute: typeof LibraryAiVersionIndexRouteImport
+      parentRoute: typeof LibraryRoute
+    }
+    '/_library/$libraryId/$version/': {
+      id: '/_library/$libraryId/$version/'
+      path: '/'
+      fullPath: '/$libraryId/$version/'
+      preLoaderRoute: typeof LibraryLibraryIdVersionIndexRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionRoute
     }
-    '/$libraryId/$version/docs': {
-      id: '/$libraryId/$version/docs'
-      path: '/docs'
-      fullPath: '/$libraryId/$version/docs'
-      preLoaderRoute: typeof LibraryIdVersionDocsRouteImport
-      parentRoute: typeof LibraryIdVersionRoute
+    '/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/deploy/github': {
+      id: '/api/builder/deploy/github'
+      path: '/api/builder/deploy/github'
+      fullPath: '/api/builder/deploy/github'
+      preLoaderRoute: typeof ApiBuilderDeployGithubRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/$libraryId/$version/docs/': {
-      id: '/$libraryId/$version/docs/'
-      path: '/'
-      fullPath: '/$libraryId/$version/docs/'
-      preLoaderRoute: typeof LibraryIdVersionDocsIndexRouteImport
-      parentRoute: typeof LibraryIdVersionDocsRoute
+    '/api/builder/deploy/check-name': {
+      id: '/api/builder/deploy/check-name'
+      path: '/api/builder/deploy/check-name'
+      fullPath: '/api/builder/deploy/check-name'
+      preLoaderRoute: typeof ApiBuilderDeployCheckNameRouteImport
+      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
+      parentRoute: typeof rootRouteImport
     }
     '/api/auth/callback/$provider': {
       id: '/api/auth/callback/$provider'
@@ -1842,144 +2924,121 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ApiAuthCallbackProviderRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/$libraryId/$version/docs/{$}.md': {
-      id: '/$libraryId/$version/docs/{$}.md'
+    '/_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/$libraryId/$version/docs': {
+      id: '/_library/$libraryId/$version/docs'
+      path: '/docs'
+      fullPath: '/$libraryId/$version/docs'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionRoute
+    }
+    '/_library/$libraryId/$version/docs/': {
+      id: '/_library/$libraryId/$version/docs/'
+      path: '/'
+      fullPath: '/$libraryId/$version/docs/'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsIndexRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
+    }
+    '/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/$libraryId/$version/docs/{$}.md': {
+      id: '/_library/$libraryId/$version/docs/{$}.md'
       path: '/{$}.md'
       fullPath: '/$libraryId/$version/docs/{$}.md'
-      preLoaderRoute: typeof LibraryIdVersionDocsChar123Char125DotmdRouteImport
-      parentRoute: typeof LibraryIdVersionDocsRoute
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsChar123Char125DotmdRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/$libraryId/$version/docs/npm-stats': {
-      id: '/$libraryId/$version/docs/npm-stats'
+    '/_library/$libraryId/$version/docs/npm-stats': {
+      id: '/_library/$libraryId/$version/docs/npm-stats'
       path: '/npm-stats'
       fullPath: '/$libraryId/$version/docs/npm-stats'
-      preLoaderRoute: typeof LibraryIdVersionDocsNpmStatsRouteImport
-      parentRoute: typeof LibraryIdVersionDocsRoute
-    }
-    '/$libraryId/$version/docs/contributors': {
-      id: '/$libraryId/$version/docs/contributors'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsNpmStatsRouteImport
+      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
+      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
+    }
+    '/_library/$libraryId/$version/docs/contributors': {
+      id: '/_library/$libraryId/$version/docs/contributors'
       path: '/contributors'
       fullPath: '/$libraryId/$version/docs/contributors'
-      preLoaderRoute: typeof LibraryIdVersionDocsContributorsRouteImport
-      parentRoute: typeof LibraryIdVersionDocsRoute
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsContributorsRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/$libraryId/$version/docs/community-resources': {
-      id: '/$libraryId/$version/docs/community-resources'
+    '/_library/$libraryId/$version/docs/community-resources': {
+      id: '/_library/$libraryId/$version/docs/community-resources'
       path: '/community-resources'
       fullPath: '/$libraryId/$version/docs/community-resources'
-      preLoaderRoute: typeof LibraryIdVersionDocsCommunityResourcesRouteImport
-      parentRoute: typeof LibraryIdVersionDocsRoute
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsCommunityResourcesRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
+    }
+    '/_library/$libraryId/$version/docs/blog': {
+      id: '/_library/$libraryId/$version/docs/blog'
+      path: '/blog'
+      fullPath: '/$libraryId/$version/docs/blog'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsBlogRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/$libraryId/$version/docs/$': {
-      id: '/$libraryId/$version/docs/$'
+    '/_library/$libraryId/$version/docs/$': {
+      id: '/_library/$libraryId/$version/docs/$'
       path: '/$'
       fullPath: '/$libraryId/$version/docs/$'
-      preLoaderRoute: typeof LibraryIdVersionDocsSplatRouteImport
-      parentRoute: typeof LibraryIdVersionDocsRoute
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsSplatRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/$libraryId/$version/docs/framework/': {
-      id: '/$libraryId/$version/docs/framework/'
+    '/_library/$libraryId/$version/docs/framework/': {
+      id: '/_library/$libraryId/$version/docs/framework/'
       path: '/framework'
-      fullPath: '/$libraryId/$version/docs/framework'
-      preLoaderRoute: typeof LibraryIdVersionDocsFrameworkIndexRouteImport
-      parentRoute: typeof LibraryIdVersionDocsRoute
+      fullPath: '/$libraryId/$version/docs/framework/'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsFrameworkIndexRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/$libraryId/$version/docs/framework/$framework/': {
-      id: '/$libraryId/$version/docs/framework/$framework/'
+    '/_library/$libraryId/$version/docs/framework/$framework/': {
+      id: '/_library/$libraryId/$version/docs/framework/$framework/'
       path: '/framework/$framework'
-      fullPath: '/$libraryId/$version/docs/framework/$framework'
-      preLoaderRoute: typeof LibraryIdVersionDocsFrameworkFrameworkIndexRouteImport
-      parentRoute: typeof LibraryIdVersionDocsRoute
+      fullPath: '/$libraryId/$version/docs/framework/$framework/'
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsFrameworkFrameworkIndexRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/$libraryId/$version/docs/framework/$framework/{$}.md': {
-      id: '/$libraryId/$version/docs/framework/$framework/{$}.md'
+    '/_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 LibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRouteImport
-      parentRoute: typeof LibraryIdVersionDocsRoute
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/$libraryId/$version/docs/framework/$framework/$': {
-      id: '/$libraryId/$version/docs/framework/$framework/$'
+    '/_library/$libraryId/$version/docs/framework/$framework/$': {
+      id: '/_library/$libraryId/$version/docs/framework/$framework/$'
       path: '/framework/$framework/$'
       fullPath: '/$libraryId/$version/docs/framework/$framework/$'
-      preLoaderRoute: typeof LibraryIdVersionDocsFrameworkFrameworkSplatRouteImport
-      parentRoute: typeof LibraryIdVersionDocsRoute
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
-    '/$libraryId/$version/docs/framework/$framework/examples/$': {
-      id: '/$libraryId/$version/docs/framework/$framework/examples/$'
+    '/_library/$libraryId/$version/docs/framework/$framework/examples/$': {
+      id: '/_library/$libraryId/$version/docs/framework/$framework/examples/$'
       path: '/framework/$framework/examples/$'
       fullPath: '/$libraryId/$version/docs/framework/$framework/examples/$'
-      preLoaderRoute: typeof LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRouteImport
-      parentRoute: typeof LibraryIdVersionDocsRoute
+      preLoaderRoute: typeof LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRouteImport
+      parentRoute: typeof LibraryLibraryIdVersionDocsRoute
     }
   }
 }
 
-interface LibraryIdVersionDocsRouteChildren {
-  LibraryIdVersionDocsSplatRoute: typeof LibraryIdVersionDocsSplatRoute
-  LibraryIdVersionDocsCommunityResourcesRoute: typeof LibraryIdVersionDocsCommunityResourcesRoute
-  LibraryIdVersionDocsContributorsRoute: typeof LibraryIdVersionDocsContributorsRoute
-  LibraryIdVersionDocsNpmStatsRoute: typeof LibraryIdVersionDocsNpmStatsRoute
-  LibraryIdVersionDocsChar123Char125DotmdRoute: typeof LibraryIdVersionDocsChar123Char125DotmdRoute
-  LibraryIdVersionDocsIndexRoute: typeof LibraryIdVersionDocsIndexRoute
-  LibraryIdVersionDocsFrameworkIndexRoute: typeof LibraryIdVersionDocsFrameworkIndexRoute
-  LibraryIdVersionDocsFrameworkFrameworkSplatRoute: typeof LibraryIdVersionDocsFrameworkFrameworkSplatRoute
-  LibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute: typeof LibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute
-  LibraryIdVersionDocsFrameworkFrameworkIndexRoute: typeof LibraryIdVersionDocsFrameworkFrameworkIndexRoute
-  LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute: typeof LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute
-}
-
-const LibraryIdVersionDocsRouteChildren: LibraryIdVersionDocsRouteChildren = {
-  LibraryIdVersionDocsSplatRoute: LibraryIdVersionDocsSplatRoute,
-  LibraryIdVersionDocsCommunityResourcesRoute:
-    LibraryIdVersionDocsCommunityResourcesRoute,
-  LibraryIdVersionDocsContributorsRoute: LibraryIdVersionDocsContributorsRoute,
-  LibraryIdVersionDocsNpmStatsRoute: LibraryIdVersionDocsNpmStatsRoute,
-  LibraryIdVersionDocsChar123Char125DotmdRoute:
-    LibraryIdVersionDocsChar123Char125DotmdRoute,
-  LibraryIdVersionDocsIndexRoute: LibraryIdVersionDocsIndexRoute,
-  LibraryIdVersionDocsFrameworkIndexRoute:
-    LibraryIdVersionDocsFrameworkIndexRoute,
-  LibraryIdVersionDocsFrameworkFrameworkSplatRoute:
-    LibraryIdVersionDocsFrameworkFrameworkSplatRoute,
-  LibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute:
-    LibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute,
-  LibraryIdVersionDocsFrameworkFrameworkIndexRoute:
-    LibraryIdVersionDocsFrameworkFrameworkIndexRoute,
-  LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute:
-    LibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute,
-}
-
-const LibraryIdVersionDocsRouteWithChildren =
-  LibraryIdVersionDocsRoute._addFileChildren(LibraryIdVersionDocsRouteChildren)
-
-interface LibraryIdVersionRouteChildren {
-  LibraryIdVersionDocsRoute: typeof LibraryIdVersionDocsRouteWithChildren
-  LibraryIdVersionIndexRoute: typeof LibraryIdVersionIndexRoute
-}
-
-const LibraryIdVersionRouteChildren: LibraryIdVersionRouteChildren = {
-  LibraryIdVersionDocsRoute: LibraryIdVersionDocsRouteWithChildren,
-  LibraryIdVersionIndexRoute: LibraryIdVersionIndexRoute,
-}
-
-const LibraryIdVersionRouteWithChildren =
-  LibraryIdVersionRoute._addFileChildren(LibraryIdVersionRouteChildren)
-
-interface LibraryIdRouteRouteChildren {
-  LibraryIdVersionRoute: typeof LibraryIdVersionRouteWithChildren
-  LibraryIdIndexRoute: typeof LibraryIdIndexRoute
-}
-
-const LibraryIdRouteRouteChildren: LibraryIdRouteRouteChildren = {
-  LibraryIdVersionRoute: LibraryIdVersionRouteWithChildren,
-  LibraryIdIndexRoute: LibraryIdIndexRoute,
-}
-
-const LibraryIdRouteRouteWithChildren = LibraryIdRouteRoute._addFileChildren(
-  LibraryIdRouteRouteChildren,
-)
-
 interface AdminUsersRouteChildren {
   AdminUsersUserIdRoute: typeof AdminUsersUserIdRoute
 }
@@ -1994,18 +3053,16 @@ const AdminUsersRouteWithChildren = AdminUsersRoute._addFileChildren(
 
 interface AdminRouteRouteChildren {
   AdminAuditRoute: typeof AdminAuditRoute
+  AdminDocsRoute: typeof AdminDocsRoute
   AdminGithubStatsRoute: typeof AdminGithubStatsRoute
+  AdminIntentRoute: typeof AdminIntentRoute
   AdminLoginsRoute: typeof AdminLoginsRoute
   AdminNpmStatsRoute: typeof AdminNpmStatsRoute
   AdminUsersRoute: typeof AdminUsersRouteWithChildren
   AdminIndexRoute: typeof AdminIndexRoute
-  AdminBannersIdRoute: typeof AdminBannersIdRoute
-  AdminFeedIdRoute: typeof AdminFeedIdRoute
   AdminFeedbackIdRoute: typeof AdminFeedbackIdRoute
   AdminRolesRoleIdRoute: typeof AdminRolesRoleIdRoute
   AdminShowcasesIdRoute: typeof AdminShowcasesIdRoute
-  AdminBannersIndexRoute: typeof AdminBannersIndexRoute
-  AdminFeedIndexRoute: typeof AdminFeedIndexRoute
   AdminFeedbackIndexRoute: typeof AdminFeedbackIndexRoute
   AdminNotesIndexRoute: typeof AdminNotesIndexRoute
   AdminRolesIndexRoute: typeof AdminRolesIndexRoute
@@ -2014,18 +3071,16 @@ interface AdminRouteRouteChildren {
 
 const AdminRouteRouteChildren: AdminRouteRouteChildren = {
   AdminAuditRoute: AdminAuditRoute,
+  AdminDocsRoute: AdminDocsRoute,
   AdminGithubStatsRoute: AdminGithubStatsRoute,
+  AdminIntentRoute: AdminIntentRoute,
   AdminLoginsRoute: AdminLoginsRoute,
   AdminNpmStatsRoute: AdminNpmStatsRoute,
   AdminUsersRoute: AdminUsersRouteWithChildren,
   AdminIndexRoute: AdminIndexRoute,
-  AdminBannersIdRoute: AdminBannersIdRoute,
-  AdminFeedIdRoute: AdminFeedIdRoute,
   AdminFeedbackIdRoute: AdminFeedbackIdRoute,
   AdminRolesRoleIdRoute: AdminRolesRoleIdRoute,
   AdminShowcasesIdRoute: AdminShowcasesIdRoute,
-  AdminBannersIndexRoute: AdminBannersIndexRoute,
-  AdminFeedIndexRoute: AdminFeedIndexRoute,
   AdminFeedbackIndexRoute: AdminFeedbackIndexRoute,
   AdminNotesIndexRoute: AdminNotesIndexRoute,
   AdminRolesIndexRoute: AdminRolesIndexRoute,
@@ -2036,6 +3091,136 @@ const AdminRouteRouteWithChildren = AdminRouteRoute._addFileChildren(
   AdminRouteRouteChildren,
 )
 
+interface LibraryLibraryIdVersionDocsRouteChildren {
+  LibraryLibraryIdVersionDocsSplatRoute: typeof LibraryLibraryIdVersionDocsSplatRoute
+  LibraryLibraryIdVersionDocsBlogRoute: typeof LibraryLibraryIdVersionDocsBlogRoute
+  LibraryLibraryIdVersionDocsCommunityResourcesRoute: typeof LibraryLibraryIdVersionDocsCommunityResourcesRoute
+  LibraryLibraryIdVersionDocsContributorsRoute: typeof LibraryLibraryIdVersionDocsContributorsRoute
+  LibraryLibraryIdVersionDocsIndexDotmdRoute: typeof LibraryLibraryIdVersionDocsIndexDotmdRoute
+  LibraryLibraryIdVersionDocsNpmStatsRoute: typeof LibraryLibraryIdVersionDocsNpmStatsRoute
+  LibraryLibraryIdVersionDocsChar123Char125DotmdRoute: typeof LibraryLibraryIdVersionDocsChar123Char125DotmdRoute
+  LibraryLibraryIdVersionDocsIndexRoute: typeof LibraryLibraryIdVersionDocsIndexRoute
+  LibraryLibraryIdVersionDocsFrameworkIndexRoute: typeof LibraryLibraryIdVersionDocsFrameworkIndexRoute
+  LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRoute: typeof LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRoute
+  LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute: typeof LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute
+  LibraryLibraryIdVersionDocsFrameworkFrameworkIndexRoute: typeof LibraryLibraryIdVersionDocsFrameworkFrameworkIndexRoute
+  LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute: typeof LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute
+}
+
+const LibraryLibraryIdVersionDocsRouteChildren: LibraryLibraryIdVersionDocsRouteChildren =
+  {
+    LibraryLibraryIdVersionDocsSplatRoute:
+      LibraryLibraryIdVersionDocsSplatRoute,
+    LibraryLibraryIdVersionDocsBlogRoute: LibraryLibraryIdVersionDocsBlogRoute,
+    LibraryLibraryIdVersionDocsCommunityResourcesRoute:
+      LibraryLibraryIdVersionDocsCommunityResourcesRoute,
+    LibraryLibraryIdVersionDocsContributorsRoute:
+      LibraryLibraryIdVersionDocsContributorsRoute,
+    LibraryLibraryIdVersionDocsIndexDotmdRoute:
+      LibraryLibraryIdVersionDocsIndexDotmdRoute,
+    LibraryLibraryIdVersionDocsNpmStatsRoute:
+      LibraryLibraryIdVersionDocsNpmStatsRoute,
+    LibraryLibraryIdVersionDocsChar123Char125DotmdRoute:
+      LibraryLibraryIdVersionDocsChar123Char125DotmdRoute,
+    LibraryLibraryIdVersionDocsIndexRoute:
+      LibraryLibraryIdVersionDocsIndexRoute,
+    LibraryLibraryIdVersionDocsFrameworkIndexRoute:
+      LibraryLibraryIdVersionDocsFrameworkIndexRoute,
+    LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRoute:
+      LibraryLibraryIdVersionDocsFrameworkFrameworkSplatRoute,
+    LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute:
+      LibraryLibraryIdVersionDocsFrameworkFrameworkChar123Char125DotmdRoute,
+    LibraryLibraryIdVersionDocsFrameworkFrameworkIndexRoute:
+      LibraryLibraryIdVersionDocsFrameworkFrameworkIndexRoute,
+    LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute:
+      LibraryLibraryIdVersionDocsFrameworkFrameworkExamplesSplatRoute,
+  }
+
+const LibraryLibraryIdVersionDocsRouteWithChildren =
+  LibraryLibraryIdVersionDocsRoute._addFileChildren(
+    LibraryLibraryIdVersionDocsRouteChildren,
+  )
+
+interface LibraryLibraryIdVersionRouteChildren {
+  LibraryLibraryIdVersionDocsRoute: typeof LibraryLibraryIdVersionDocsRouteWithChildren
+  LibraryLibraryIdVersionLlmsDottxtRoute: typeof LibraryLibraryIdVersionLlmsDottxtRoute
+  LibraryLibraryIdVersionIndexRoute: typeof LibraryLibraryIdVersionIndexRoute
+}
+
+const LibraryLibraryIdVersionRouteChildren: LibraryLibraryIdVersionRouteChildren =
+  {
+    LibraryLibraryIdVersionDocsRoute:
+      LibraryLibraryIdVersionDocsRouteWithChildren,
+    LibraryLibraryIdVersionLlmsDottxtRoute:
+      LibraryLibraryIdVersionLlmsDottxtRoute,
+    LibraryLibraryIdVersionIndexRoute: LibraryLibraryIdVersionIndexRoute,
+  }
+
+const LibraryLibraryIdVersionRouteWithChildren =
+  LibraryLibraryIdVersionRoute._addFileChildren(
+    LibraryLibraryIdVersionRouteChildren,
+  )
+
+interface LibraryLibraryIdRouteRouteChildren {
+  LibraryLibraryIdVersionRoute: typeof LibraryLibraryIdVersionRouteWithChildren
+  LibraryLibraryIdIndexRoute: typeof LibraryLibraryIdIndexRoute
+}
+
+const LibraryLibraryIdRouteRouteChildren: LibraryLibraryIdRouteRouteChildren = {
+  LibraryLibraryIdVersionRoute: LibraryLibraryIdVersionRouteWithChildren,
+  LibraryLibraryIdIndexRoute: LibraryLibraryIdIndexRoute,
+}
+
+const LibraryLibraryIdRouteRouteWithChildren =
+  LibraryLibraryIdRouteRoute._addFileChildren(
+    LibraryLibraryIdRouteRouteChildren,
+  )
+
+interface LibraryRouteChildren {
+  LibraryLibraryIdRouteRoute: typeof LibraryLibraryIdRouteRouteWithChildren
+  LibraryAiVersionIndexRoute: typeof LibraryAiVersionIndexRoute
+  LibraryCliVersionIndexRoute: typeof LibraryCliVersionIndexRoute
+  LibraryConfigVersionIndexRoute: typeof LibraryConfigVersionIndexRoute
+  LibraryDbVersionIndexRoute: typeof LibraryDbVersionIndexRoute
+  LibraryDevtoolsVersionIndexRoute: typeof LibraryDevtoolsVersionIndexRoute
+  LibraryFormVersionIndexRoute: typeof LibraryFormVersionIndexRoute
+  LibraryHotkeysVersionIndexRoute: typeof LibraryHotkeysVersionIndexRoute
+  LibraryIntentVersionIndexRoute: typeof LibraryIntentVersionIndexRoute
+  LibraryPacerVersionIndexRoute: typeof LibraryPacerVersionIndexRoute
+  LibraryQueryVersionIndexRoute: typeof LibraryQueryVersionIndexRoute
+  LibraryRangerVersionIndexRoute: typeof LibraryRangerVersionIndexRoute
+  LibraryRouterVersionIndexRoute: typeof LibraryRouterVersionIndexRoute
+  LibraryStartVersionIndexRoute: typeof LibraryStartVersionIndexRoute
+  LibraryStoreVersionIndexRoute: typeof LibraryStoreVersionIndexRoute
+  LibraryTableVersionIndexRoute: typeof LibraryTableVersionIndexRoute
+  LibraryVirtualVersionIndexRoute: typeof LibraryVirtualVersionIndexRoute
+  LibraryWorkflowVersionIndexRoute: typeof LibraryWorkflowVersionIndexRoute
+}
+
+const LibraryRouteChildren: LibraryRouteChildren = {
+  LibraryLibraryIdRouteRoute: LibraryLibraryIdRouteRouteWithChildren,
+  LibraryAiVersionIndexRoute: LibraryAiVersionIndexRoute,
+  LibraryCliVersionIndexRoute: LibraryCliVersionIndexRoute,
+  LibraryConfigVersionIndexRoute: LibraryConfigVersionIndexRoute,
+  LibraryDbVersionIndexRoute: LibraryDbVersionIndexRoute,
+  LibraryDevtoolsVersionIndexRoute: LibraryDevtoolsVersionIndexRoute,
+  LibraryFormVersionIndexRoute: LibraryFormVersionIndexRoute,
+  LibraryHotkeysVersionIndexRoute: LibraryHotkeysVersionIndexRoute,
+  LibraryIntentVersionIndexRoute: LibraryIntentVersionIndexRoute,
+  LibraryPacerVersionIndexRoute: LibraryPacerVersionIndexRoute,
+  LibraryQueryVersionIndexRoute: LibraryQueryVersionIndexRoute,
+  LibraryRangerVersionIndexRoute: LibraryRangerVersionIndexRoute,
+  LibraryRouterVersionIndexRoute: LibraryRouterVersionIndexRoute,
+  LibraryStartVersionIndexRoute: LibraryStartVersionIndexRoute,
+  LibraryStoreVersionIndexRoute: LibraryStoreVersionIndexRoute,
+  LibraryTableVersionIndexRoute: LibraryTableVersionIndexRoute,
+  LibraryVirtualVersionIndexRoute: LibraryVirtualVersionIndexRoute,
+  LibraryWorkflowVersionIndexRoute: LibraryWorkflowVersionIndexRoute,
+}
+
+const LibraryRouteWithChildren =
+  LibraryRoute._addFileChildren(LibraryRouteChildren)
+
 interface AccountRouteChildren {
   AccountFeedbackRoute: typeof AccountFeedbackRoute
   AccountIntegrationsRoute: typeof AccountIntegrationsRoute
@@ -2067,30 +3252,108 @@ const BlogRouteChildren: BlogRouteChildren = {
 
 const BlogRouteWithChildren = BlogRoute._addFileChildren(BlogRouteChildren)
 
+interface BuilderRouteChildren {
+  BuilderDocsRoute: typeof BuilderDocsRoute
+  BuilderIndexRoute: typeof BuilderIndexRoute
+}
+
+const BuilderRouteChildren: BuilderRouteChildren = {
+  BuilderDocsRoute: BuilderDocsRoute,
+  BuilderIndexRoute: BuilderIndexRoute,
+}
+
+const BuilderRouteWithChildren =
+  BuilderRoute._addFileChildren(BuilderRouteChildren)
+
+interface PartnersRouteChildren {
+  PartnersPartnerRoute: typeof PartnersPartnerRoute
+  PartnersRailwayRoute: typeof PartnersRailwayRoute
+  PartnersIndexRoute: typeof PartnersIndexRoute
+}
+
+const PartnersRouteChildren: PartnersRouteChildren = {
+  PartnersPartnerRoute: PartnersPartnerRoute,
+  PartnersRailwayRoute: PartnersRailwayRoute,
+  PartnersIndexRoute: PartnersIndexRoute,
+}
+
+const PartnersRouteWithChildren = PartnersRoute._addFileChildren(
+  PartnersRouteChildren,
+)
+
+interface ShopRouteChildren {
+  ShopHandleRoute: typeof ShopHandleRoute
+  ShopCartRoute: typeof ShopCartRoute
+  ShopSearchRoute: typeof ShopSearchRoute
+  ShopIndexRoute: typeof ShopIndexRoute
+  ShopCollectionsHandleRoute: typeof ShopCollectionsHandleRoute
+  ShopPagesHandleRoute: typeof ShopPagesHandleRoute
+  ShopPoliciesHandleRoute: typeof ShopPoliciesHandleRoute
+  ShopProductsHandleRoute: typeof ShopProductsHandleRoute
+}
+
+const ShopRouteChildren: ShopRouteChildren = {
+  ShopHandleRoute: ShopHandleRoute,
+  ShopCartRoute: ShopCartRoute,
+  ShopSearchRoute: ShopSearchRoute,
+  ShopIndexRoute: ShopIndexRoute,
+  ShopCollectionsHandleRoute: ShopCollectionsHandleRoute,
+  ShopPagesHandleRoute: ShopPagesHandleRoute,
+  ShopPoliciesHandleRoute: ShopPoliciesHandleRoute,
+  ShopProductsHandleRoute: ShopProductsHandleRoute,
+}
+
+const ShopRouteWithChildren = ShopRoute._addFileChildren(ShopRouteChildren)
+
+interface IntentRegistryPackageNameRouteChildren {
+  IntentRegistryPackageNameSkillNameRoute: typeof IntentRegistryPackageNameSkillNameRoute
+  IntentRegistryPackageNameChar123Char125DotmdRoute: typeof IntentRegistryPackageNameChar123Char125DotmdRoute
+  IntentRegistryPackageNameIndexRoute: typeof IntentRegistryPackageNameIndexRoute
+}
+
+const IntentRegistryPackageNameRouteChildren: IntentRegistryPackageNameRouteChildren =
+  {
+    IntentRegistryPackageNameSkillNameRoute:
+      IntentRegistryPackageNameSkillNameRoute,
+    IntentRegistryPackageNameChar123Char125DotmdRoute:
+      IntentRegistryPackageNameChar123Char125DotmdRoute,
+    IntentRegistryPackageNameIndexRoute: IntentRegistryPackageNameIndexRoute,
+  }
+
+const IntentRegistryPackageNameRouteWithChildren =
+  IntentRegistryPackageNameRoute._addFileChildren(
+    IntentRegistryPackageNameRouteChildren,
+  )
+
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  LibraryIdRouteRoute: LibraryIdRouteRouteWithChildren,
   AdminRouteRoute: AdminRouteRouteWithChildren,
+  LibraryRoute: LibraryRouteWithChildren,
   AccountRoute: AccountRouteWithChildren,
   AdsRoute: AdsRoute,
   BlogRoute: BlogRouteWithChildren,
   BrandGuideRoute: BrandGuideRoute,
-  BuilderRoute: BuilderRoute,
+  BuilderRoute: BuilderRouteWithChildren,
   DashboardRoute: DashboardRoute,
   EthosRoute: EthosRoute,
   ExploreRoute: ExploreRoute,
   FeedbackLeaderboardRoute: FeedbackLeaderboardRoute,
   LearnRoute: LearnRoute,
   LibrariesRoute: LibrariesRoute,
+  LlmsFullDottxtRoute: LlmsFullDottxtRoute,
   LlmsDottxtRoute: LlmsDottxtRoute,
   LoginRoute: LoginRoute,
   MaintainersRoute: MaintainersRoute,
   MerchRoute: MerchRoute,
   PaidSupportRoute: PaidSupportRoute,
-  PartnersRoute: PartnersRoute,
+  PartnersRoute: PartnersRouteWithChildren,
   PartnersEmbedRoute: PartnersEmbedRoute,
   PrivacyRoute: PrivacyRoute,
+  RobotsDottxtRoute: RobotsDottxtRoute,
   RssDotxmlRoute: RssDotxmlRoute,
+  ShopRoute: ShopRouteWithChildren,
+  ShowcasesRoute: ShowcasesRoute,
+  SitemapDotxmlRoute: SitemapDotxmlRoute,
   SponsorsEmbedRoute: SponsorsEmbedRoute,
   SupportRoute: SupportRoute,
   TenetsRoute: TenetsRoute,
@@ -2098,43 +3361,61 @@ const rootRouteChildren: RootRouteChildren = {
   WorkshopsRoute: WorkshopsRoute,
   DotwellKnownOauthAuthorizationServerRoute:
     DotwellKnownOauthAuthorizationServerRoute,
-  ApiDryRunAddToAppRoute: ApiDryRunAddToAppRoute,
-  ApiDryRunCreateAppRoute: ApiDryRunCreateAppRoute,
-  ApiInitialPayloadRoute: ApiInitialPayloadRoute,
-  ApiLoadRemoteAddOnRoute: ApiLoadRemoteAddOnRoute,
-  ApiLoadStarterRoute: ApiLoadStarterRoute,
   ApiUploadthingRoute: ApiUploadthingRoute,
+  AuthCliRoute: AuthCliRoute,
   AuthPopupSuccessRoute: AuthPopupSuccessRoute,
   AuthSignoutRoute: AuthSignoutRoute,
-  FeedIdRoute: FeedIdRoute,
+  LibrariesFrameworkRoute: LibrariesFrameworkRoute,
   OauthAuthorizeRoute: OauthAuthorizeRoute,
   OauthRegisterRoute: OauthRegisterRoute,
   OauthTokenRoute: OauthTokenRoute,
   ShowcaseIdRoute: ShowcaseIdRoute,
   ShowcaseSubmitRoute: ShowcaseSubmitRoute,
-  FeedIndexRoute: FeedIndexRoute,
+  StackCategoryRoute: StackCategoryRoute,
   ShowcaseIndexRoute: ShowcaseIndexRoute,
   StatsIndexRoute: StatsIndexRoute,
-  ApiAdminSyncRoute: ApiAdminSyncRoute,
+  ApiApplicationStarterResolveRoute: ApiApplicationStarterResolveRoute,
+  ApiBuilderCompileRoute: ApiBuilderCompileRoute,
+  ApiBuilderCompileAttributedRoute: ApiBuilderCompileAttributedRoute,
+  ApiBuilderDownloadRoute: ApiBuilderDownloadRoute,
+  ApiBuilderFeatureArtifactsRoute: ApiBuilderFeatureArtifactsRoute,
+  ApiBuilderFeaturesRoute: ApiBuilderFeaturesRoute,
+  ApiBuilderLoadRemoteAddonRoute: ApiBuilderLoadRemoteAddonRoute,
+  ApiBuilderLoadRemoteTemplateRoute: ApiBuilderLoadRemoteTemplateRoute,
+  ApiBuilderLoadTemplateRoute: ApiBuilderLoadTemplateRoute,
+  ApiBuilderSuggestRoute: ApiBuilderSuggestRoute,
+  ApiBuilderValidateRoute: ApiBuilderValidateRoute,
+  ApiDataLibrariesRoute: ApiDataLibrariesRoute,
+  ApiDataPartnersRoute: ApiDataPartnersRoute,
   ApiDiscordInteractionsRoute: ApiDiscordInteractionsRoute,
+  ApiExampleDeployRoute: ApiExampleDeployRoute,
   ApiGithubWebhookRoute: ApiGithubWebhookRoute,
   ApiMcpSplatRoute: ApiMcpSplatRoute,
+  ApiOgChar123Char125DotpngRoute: ApiOgChar123Char125DotpngRoute,
   AuthProviderStartRoute: AuthProviderStartRoute,
+  IntentRegistryPackageNameRoute: IntentRegistryPackageNameRouteWithChildren,
   ShowcaseEditIdRoute: ShowcaseEditIdRoute,
   StatsNpmPackagesRoute: StatsNpmPackagesRoute,
+  StatsNpmEmbedRoute: StatsNpmEmbedRoute,
   ApiMcpIndexRoute: ApiMcpIndexRoute,
+  IntentRegistryIndexRoute: IntentRegistryIndexRoute,
   StatsNpmIndexRoute: StatsNpmIndexRoute,
   ApiAuthCallbackProviderRoute: ApiAuthCallbackProviderRoute,
+  ApiAuthCliCreateTicketRoute: ApiAuthCliCreateTicketRoute,
+  ApiBuilderDeployCheckNameRoute: ApiBuilderDeployCheckNameRoute,
+  ApiBuilderDeployGithubRoute: ApiBuilderDeployGithubRoute,
+  ApiAuthCliStatusTicketIdRoute: ApiAuthCliStatusTicketIdRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
 
 import type { getRouter } from './router.tsx'
-import type { createStart } from '@tanstack/react-start'
+import type { startInstance } from './start.ts'
 declare module '@tanstack/react-start' {
   interface Register {
     ssr: true
     router: Awaited<ReturnType<typeof getRouter>>
+    config: Awaited<ReturnType<typeof startInstance.getOptions>>
   }
 }
diff --git a/src/router.tsx b/src/router.tsx
index 56988a9ca..dffd53eb0 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -4,8 +4,42 @@ import { routeTree } from './routeTree.gen'
 import { DefaultCatchBoundary } from './components/DefaultCatchBoundary'
 import { NotFound } from './components/NotFound'
 import { QueryClient } from '@tanstack/react-query'
-import { GamOnPageChange } from './components/Gam'
 import * as Sentry from '@sentry/tanstackstart-react'
+import { installStaleAppReloadHandlers } from './utils/stale-app-reload'
+
+if (typeof document !== 'undefined') {
+  installStaleAppReloadHandlers()
+
+  Sentry.init({
+    dsn: 'https://ac4bfc43ff4a892f8dc7053c4a50d92f@o4507236158537728.ingest.us.sentry.io/4507236163649536',
+    sendDefaultPii: true,
+    // Performance Monitoring
+    tracesSampleRate: 1.0, //  Capture 100% of the transactions
+    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+    tracePropagationTargets: ['localhost', /^https:\/\/tanstack\.com\//],
+    beforeSend(event) {
+      // Filter out errors from third-party ad tech scripts (e.g. Publift's
+      // Fuse Platform ftUtils.js) that are not actionable by us.
+      const frames = event.exception?.values?.flatMap(
+        (v) => v.stacktrace?.frames ?? [],
+      )
+      if (
+        frames &&
+        frames.length > 0 &&
+        frames.every((frame) => {
+          const filename = frame.filename ?? ''
+          return (
+            filename.includes('ftUtils.js') ||
+            filename.includes('fuseplatform.net')
+          )
+        })
+      ) {
+        return null
+      }
+      return event
+    },
+  })
+}
 
 export function getRouter() {
   const queryClient: QueryClient = new QueryClient({
@@ -30,37 +64,15 @@ export function getRouter() {
     },
     scrollToTopSelectors: ['.scroll-to-top'],
   })
-  setupRouterSsrQueryIntegration({ router, queryClient })
-
-  let firstRender = true
-
-  router.subscribe('onResolved', () => {
-    if (firstRender) {
-      firstRender = false
-      return
-    }
-
-    GamOnPageChange()
-  })
 
   if (!router.isServer) {
-    Sentry.init({
-      dsn: 'https://ac4bfc43ff4a892f8dc7053c4a50d92f@o4507236158537728.ingest.us.sentry.io/4507236163649536',
-      integrations: [
-        Sentry.browserTracingIntegration(),
-        Sentry.replayIntegration(),
-      ],
-      sendDefaultPii: true,
-      // Performance Monitoring
-      tracesSampleRate: 1.0, //  Capture 100% of the transactions
-      // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-      tracePropagationTargets: ['localhost', /^https:\/\/tanstack\.com\//],
-      // Session Replay
-      replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-      replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-    })
+    Sentry.addIntegration(
+      Sentry.tanstackRouterBrowserTracingIntegration(router),
+    )
   }
 
+  setupRouterSsrQueryIntegration({ router, queryClient })
+
   return router
 }
 
@@ -69,6 +81,7 @@ declare module '@tanstack/react-router' {
     baseParent?: boolean
     Title?: () => any
     showNavbar?: boolean
+    includeSearchInCanonical?: boolean
   }
 }
 
diff --git a/src/routes/$libraryId/$version.docs.$.tsx b/src/routes/$libraryId/$version.docs.$.tsx
deleted file mode 100644
index 1ca775157..000000000
--- a/src/routes/$libraryId/$version.docs.$.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { seo } from '~/utils/seo'
-import { Doc } from '~/components/Doc'
-import { loadDocs } from '~/utils/docs'
-import { findLibrary, getBranch, getLibrary } from '~/libraries'
-import { DocContainer } from '~/components/DocContainer'
-import {
-  notFound,
-  useLocation,
-  useMatch,
-  isNotFound,
-  createFileRoute,
-} from '@tanstack/react-router'
-
-export const Route = createFileRoute('/$libraryId/$version/docs/$')({
-  staleTime: 1000 * 60 * 5,
-  loader: async (ctx) => {
-    const { _splat: docsPath, version, libraryId } = ctx.params
-    const library = findLibrary(libraryId)
-
-    if (!library) {
-      throw notFound()
-    }
-
-    try {
-      return await loadDocs({
-        repo: library.repo,
-        branch: getBranch(library, version),
-        docsPath: `${library.docsRoot || 'docs'}/${docsPath}`,
-      })
-    } catch (error) {
-      const isNotFoundError =
-        isNotFound(error) ||
-        (error && typeof error === 'object' && 'isNotFound' in error)
-      if (isNotFoundError) {
-        throw notFound()
-      }
-      throw error
-    }
-  },
-  head: ({ loaderData, params }) => {
-    const { libraryId } = params
-    const library = findLibrary(libraryId)
-
-    if (!library) {
-      throw notFound()
-    }
-
-    return {
-      meta: seo({
-        title: `${loaderData?.title} | ${library.name} Docs`,
-        description: loaderData?.description,
-        noindex: library.visible === false,
-      }),
-    }
-  },
-  component: Docs,
-  headers: ({ params }) => {
-    const { version, libraryId } = params
-    const library = findLibrary(libraryId)
-
-    const isLatestVersion =
-      library &&
-      (version === 'latest' ||
-        version === library.latestVersion ||
-        version === library.latestBranch)
-
-    if (isLatestVersion) {
-      return {
-        'cache-control': 'public, max-age=60, must-revalidate',
-        'cdn-cache-control':
-          'max-age=600, stale-while-revalidate=3600, durable',
-        vary: 'Accept-Encoding',
-      }
-    } else {
-      return {
-        'cache-control': 'public, max-age=3600, must-revalidate',
-        'cdn-cache-control':
-          'max-age=86400, stale-while-revalidate=604800, durable',
-        vary: 'Accept-Encoding',
-      }
-    }
-  },
-})
-
-function Docs() {
-  const { version, libraryId, _splat } = Route.useParams()
-  const { title, content, filePath } = Route.useLoaderData()
-  const versionMatch = useMatch({ from: '/$libraryId/$version' })
-  const { config } = versionMatch.loaderData
-  const library = getLibrary(libraryId)
-  const branch = getBranch(library, version)
-  const location = useLocation()
-
-  return (
-    <DocContainer>
-      <Doc
-        title={title}
-        content={content}
-        repo={library.repo}
-        branch={branch}
-        filePath={filePath}
-        colorFrom={library.colorFrom}
-        colorTo={library.colorTo}
-        textColor={library.textColor}
-        shouldRenderToc
-        libraryId={libraryId}
-        libraryVersion={version === 'latest' ? library.latestVersion : version}
-        pagePath={location.pathname}
-        config={config}
-      />
-    </DocContainer>
-  )
-}
diff --git a/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx b/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx
deleted file mode 100644
index e2d791178..000000000
--- a/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { findLibrary, getBranch } from '~/libraries'
-import { loadDocs } from '~/utils/docs'
-import { notFound, createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute(
-  '/$libraryId/$version/docs/framework/$framework/{$}.md',
-)({
-  // @ts-expect-error server property not in route types yet
-  server: {
-    handlers: {
-      GET: async ({
-        request,
-        params,
-      }: {
-        request: Request
-        params: {
-          libraryId: string
-          version: string
-          framework: string
-          _splat: string
-        }
-      }) => {
-        const _url = new URL(request.url)
-
-        const { libraryId, version, framework, _splat: docsPath } = params
-        const library = findLibrary(libraryId)
-
-        if (!library) {
-          throw notFound()
-        }
-
-        const root = library.docsRoot || 'docs'
-
-        const doc = await loadDocs({
-          repo: library.repo,
-          branch: getBranch(library, version),
-          docsPath: `${root}/framework/${framework}/${docsPath}`,
-        })
-
-        const markdownContent = `# ${doc.title}\n${doc.content}`
-        const filename = (docsPath || 'file').split('/').join('-')
-
-        return new Response(markdownContent, {
-          headers: {
-            'Content-Type': 'text/markdown',
-            'Content-Disposition': `inline; filename="${filename}.md"`,
-            'Cache-Control': 'public, max-age=0, must-revalidate',
-            'Cdn-Cache-Control':
-              'max-age=300, stale-while-revalidate=300, durable',
-          },
-        })
-      },
-    },
-  },
-})
diff --git a/src/routes/$libraryId/$version.docs.npm-stats.tsx b/src/routes/$libraryId/$version.docs.npm-stats.tsx
deleted file mode 100644
index be494ff68..000000000
--- a/src/routes/$libraryId/$version.docs.npm-stats.tsx
+++ /dev/null
@@ -1,474 +0,0 @@
-import * as React from 'react'
-import { createFileRoute, Link } from '@tanstack/react-router'
-import * as v from 'valibot'
-import { useThrottledCallback } from '@tanstack/react-pacer'
-import { Plus } from 'lucide-react'
-import { useQuery } from '@tanstack/react-query'
-import { twMerge } from 'tailwind-merge'
-
-import { getLibrary } from '~/libraries'
-import { DocContainer } from '~/components/DocContainer'
-import { Tooltip } from '~/components/Tooltip'
-import { Spinner } from '~/components/Spinner'
-import {
-  NPMStatsChart,
-  Resizable,
-  ColorPickerPopover,
-  StatsTable,
-  PackageSearch,
-  NPMSummary,
-  ChartControls,
-  PackagePills,
-  npmQueryOptions,
-  type PackageGroup,
-  type TimeRange,
-  type BinType,
-  type TransformMode,
-  type ShowDataMode,
-  binningOptionsByType,
-  defaultRangeBinTypes,
-  getPackageColor,
-} from '~/components/npm-stats'
-import {
-  getLibraryNpmPackages,
-  getAvailableFrameworkAdapters,
-  getAvailableCompetitors,
-  frameworkMeta,
-  defaultColors,
-} from '~/utils/npm-packages'
-import { packageGroupSchema } from '~/routes/stats/npm/-comparisons'
-
-const transformModeSchema = v.picklist(['none', 'normalize-y'])
-const binTypeSchema = v.picklist(['yearly', 'monthly', 'weekly', 'daily'])
-const showDataModeSchema = v.picklist(['all', 'complete'])
-
-export const Route = createFileRoute('/$libraryId/$version/docs/npm-stats')({
-  validateSearch: v.object({
-    packageGroups: v.fallback(
-      v.optional(v.array(packageGroupSchema)),
-      undefined,
-    ),
-    range: v.fallback(
-      v.optional(
-        v.picklist([
-          '7-days',
-          '30-days',
-          '90-days',
-          '180-days',
-          '365-days',
-          '730-days',
-          '1825-days',
-          'all-time',
-        ]),
-        '365-days',
-      ),
-      '365-days',
-    ),
-    transform: v.fallback(v.optional(transformModeSchema, 'none'), 'none'),
-    binType: v.fallback(v.optional(binTypeSchema, 'weekly'), 'weekly'),
-    showDataMode: v.fallback(v.optional(showDataModeSchema, 'all'), 'all'),
-    height: v.fallback(v.optional(v.number(), 400), 400),
-  }),
-  component: RouteComponent,
-})
-
-type NpmStatsSearch = {
-  packageGroups?: PackageGroup[]
-  range?: TimeRange
-  transform?: TransformMode
-  binType?: BinType
-  showDataMode?: ShowDataMode
-  height?: number
-}
-
-function RouteComponent() {
-  const { libraryId } = Route.useParams()
-  const library = getLibrary(libraryId)
-  const search = Route.useSearch()
-  const navigate = Route.useNavigate()
-
-  // Get library-specific packages (without competitors - they're shown as suggestions)
-  const libraryPackages = getLibraryNpmPackages(library)
-
-  // Use search params or default to library packages
-  const packageGroups: PackageGroup[] = search.packageGroups ?? libraryPackages
-  const range: TimeRange = search.range ?? '365-days'
-  const transform: TransformMode = search.transform ?? 'none'
-  const binTypeParam: BinType | undefined = search.binType
-  const showDataModeParam: ShowDataMode = search.showDataMode ?? 'all'
-  const height: number = search.height ?? 400
-
-  const binType: BinType = binTypeParam ?? defaultRangeBinTypes[range]
-  const binOption = binningOptionsByType[binType]
-
-  const [colorPickerPackage, setColorPickerPackage] = React.useState<
-    string | null
-  >(null)
-  const [colorPickerPosition, setColorPickerPosition] = React.useState<{
-    x: number
-    y: number
-  } | null>(null)
-  const [openMenuPackage, setOpenMenuPackage] = React.useState<string | null>(
-    null,
-  )
-
-  const npmQuery = useQuery(
-    npmQueryOptions({
-      packageGroups,
-      range,
-    }),
-  )
-
-  const handleRangeChange = (newRange: TimeRange) => {
-    navigate({
-      to: '.',
-      search: (prev: NpmStatsSearch) => ({
-        ...prev,
-        range: newRange,
-        binType: defaultRangeBinTypes[newRange],
-      }),
-    })
-  }
-
-  const handleBinnedChange = (value: BinType) => {
-    navigate({
-      to: '.',
-      search: (prev: NpmStatsSearch) => ({
-        ...prev,
-        binType: value,
-      }),
-      resetScroll: false,
-    })
-  }
-
-  const handleTransformChange = (mode: TransformMode) => {
-    navigate({
-      to: '.',
-      search: (prev: NpmStatsSearch) => ({
-        ...prev,
-        transform: mode,
-      }),
-      resetScroll: false,
-    })
-  }
-
-  const handleShowDataModeChange = (mode: ShowDataMode) => {
-    navigate({
-      to: '.',
-      search: (prev: NpmStatsSearch) => ({
-        ...prev,
-        showDataMode: mode,
-      }),
-      resetScroll: false,
-    })
-  }
-
-  const togglePackageVisibility = (index: number, packageName: string) => {
-    navigate({
-      to: '.',
-      search: (prev: NpmStatsSearch) => ({
-        ...prev,
-        packageGroups: prev.packageGroups?.map((pkg, i) =>
-          i === index
-            ? {
-                ...pkg,
-                packages: pkg.packages.map((p) =>
-                  p.name === packageName ? { ...p, hidden: !p.hidden } : p,
-                ),
-              }
-            : pkg,
-        ),
-      }),
-      replace: true,
-      resetScroll: false,
-    })
-  }
-
-  const handleRemovePackageName = (packageGroupIndex: number) => {
-    navigate({
-      to: '.',
-      search: (prev: NpmStatsSearch) => ({
-        ...prev,
-        packageGroups: prev.packageGroups?.filter(
-          (_, i: number) => i !== packageGroupIndex,
-        ),
-      }),
-      resetScroll: false,
-    })
-  }
-
-  const handleAddPackage = (packageName: string, color?: string) => {
-    navigate({
-      to: '.',
-      search: (prev: NpmStatsSearch) => {
-        // Get the next default color based on existing package count
-        const existingCount = (prev.packageGroups ?? packageGroups).length
-        const nextColor =
-          color ?? defaultColors[existingCount % defaultColors.length]
-
-        return {
-          ...prev,
-          packageGroups: [
-            ...(prev.packageGroups ?? packageGroups),
-            { packages: [{ name: packageName }], color: nextColor },
-          ],
-        }
-      },
-      resetScroll: false,
-    })
-  }
-
-  // Get available framework adapters that aren't already in the chart
-  const availableAdapters = getAvailableFrameworkAdapters(
-    library,
-    packageGroups,
-  )
-
-  // Get available competitor packages that aren't already in the chart
-  const availableCompetitors = getAvailableCompetitors(library, packageGroups)
-
-  const handleBaselineChange = (packageName: string) => {
-    navigate({
-      to: '.',
-      search: (prev: NpmStatsSearch) => {
-        return {
-          ...prev,
-          packageGroups: prev.packageGroups?.map((pkg) => {
-            const baseline =
-              pkg.packages[0]?.name === packageName ? !pkg.baseline : false
-
-            return {
-              ...pkg,
-              baseline,
-            }
-          }),
-        }
-      },
-      resetScroll: false,
-    })
-  }
-
-  const handleColorClick = (packageName: string, event: React.MouseEvent) => {
-    const rect = event.currentTarget.getBoundingClientRect()
-    setColorPickerPosition({ x: rect.left, y: rect.bottom + 5 })
-    setColorPickerPackage(packageName)
-  }
-
-  const handleColorChange = useThrottledCallback(
-    (packageName: string, color: string | null) => {
-      navigate({
-        to: '.',
-        search: (prev: NpmStatsSearch) => {
-          const packageGroup = packageGroups.find((pkg) =>
-            pkg.packages.some((p) => p.name === packageName),
-          )
-          if (!packageGroup) return prev
-
-          const newPackages = packageGroups.map((pkg) =>
-            pkg === packageGroup
-              ? color === null
-                ? { packages: pkg.packages }
-                : { ...pkg, color }
-              : pkg,
-          )
-
-          return {
-            ...prev,
-            packageGroups: newPackages,
-          }
-        },
-        replace: true,
-        resetScroll: false,
-      })
-    },
-    {
-      wait: 100,
-    },
-  )
-
-  const onHeightChange = useThrottledCallback(
-    (height: number) => {
-      navigate({
-        to: '.',
-        search: (prev: NpmStatsSearch) => ({ ...prev, height }),
-        resetScroll: false,
-      })
-    },
-    {
-      wait: 16,
-    },
-  )
-
-  const handleMenuOpenChange = (packageName: string, open: boolean) => {
-    if (!open) {
-      setOpenMenuPackage(null)
-    } else {
-      setOpenMenuPackage(packageName)
-    }
-  }
-
-  return (
-    <DocContainer>
-      <div
-        className={twMerge(
-          'w-full flex bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[1500px]',
-        )}
-      >
-        <div
-          className={twMerge('flex overflow-auto flex-col w-full p-4 lg:p-6')}
-        >
-          <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2">
-            NPM Stats for {library.name}
-          </h2>
-          <NPMSummary library={library} />
-
-          <div className="flex gap-2 flex-wrap items-center mb-4">
-            <PackageSearch onSelect={handleAddPackage} />
-            <ChartControls
-              range={range}
-              binType={binType}
-              transform={transform}
-              showDataMode={showDataModeParam}
-              onRangeChange={handleRangeChange}
-              onBinTypeChange={handleBinnedChange}
-              onTransformChange={handleTransformChange}
-              onShowDataModeChange={handleShowDataModeChange}
-            />
-          </div>
-
-          {/* Package Pills */}
-          <div className="mb-4">
-            <PackagePills
-              packageGroups={packageGroups}
-              queryData={npmQuery.data}
-              onColorClick={handleColorClick}
-              onToggleVisibility={togglePackageVisibility}
-              onRemove={handleRemovePackageName}
-              onBaselineChange={handleBaselineChange}
-            />
-          </div>
-
-          {/* Suggested Framework Adapters */}
-          {availableAdapters.length > 0 && (
-            <div className="flex flex-wrap items-center gap-2 mb-4">
-              <span className="text-xs text-gray-500 dark:text-gray-400">
-                Add adapter:
-              </span>
-              {availableAdapters.map(({ framework, packageName, color }) => (
-                <Tooltip key={framework} content={`Add ${packageName}`}>
-                  <button
-                    onClick={() => handleAddPackage(packageName, color)}
-                    className="flex items-center gap-1.5 px-2 py-1 text-xs rounded-md bg-gray-500/10 hover:bg-gray-500/20 transition-colors"
-                  >
-                    <Plus className="w-3 h-3" />
-                    <span className="font-medium" style={{ color }}>
-                      🌴 {frameworkMeta[framework]?.name ?? framework}-
-                      {library.id.charAt(0).toUpperCase() + library.id.slice(1)}
-                    </span>
-                  </button>
-                </Tooltip>
-              ))}
-            </div>
-          )}
-
-          {/* Suggested Competitor Packages */}
-          {availableCompetitors.length > 0 && (
-            <div className="flex flex-wrap items-center gap-2 mb-4">
-              <span className="text-xs text-gray-500 dark:text-gray-400">
-                Compare with:
-              </span>
-              {availableCompetitors.map((competitor) => {
-                const mainPackage = competitor.packages[0]?.name
-                if (!mainPackage) return null
-                const color = competitor.color ?? defaultColors[0]
-                return (
-                  <Tooltip key={mainPackage} content={`Add ${mainPackage}`}>
-                    <button
-                      onClick={() => handleAddPackage(mainPackage, color)}
-                      className="flex items-center gap-1.5 px-2 py-1 text-xs rounded-md bg-gray-500/10 hover:bg-gray-500/20 transition-colors"
-                    >
-                      <Plus className="w-3 h-3" />
-                      <span className="font-medium" style={{ color }}>
-                        {mainPackage}
-                      </span>
-                    </button>
-                  </Tooltip>
-                )
-              })}
-            </div>
-          )}
-
-          {/* Color Picker Popover */}
-          {colorPickerPackage && colorPickerPosition && (
-            <ColorPickerPopover
-              packageName={colorPickerPackage}
-              position={colorPickerPosition}
-              currentColor={getPackageColor(colorPickerPackage, packageGroups)}
-              onColorChange={handleColorChange}
-              onReset={(pkgName) => handleColorChange(pkgName, null)}
-              onClose={() => {
-                setColorPickerPackage(null)
-                setColorPickerPosition(null)
-              }}
-            />
-          )}
-
-          {/* Chart */}
-          {packageGroups.length > 0 && (
-            <div className="space-y-2 sm:space-y-4">
-              <div className="relative">
-                {npmQuery.isFetching && npmQuery.data ? (
-                  <div className="absolute inset-0 flex items-center justify-center bg-white/30 dark:bg-black/30 z-10 rounded-lg">
-                    <div className="flex flex-col items-center gap-4">
-                      <Spinner />
-                      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                        Updating...
-                      </div>
-                    </div>
-                  </div>
-                ) : null}
-                <Resizable height={height} onHeightChange={onHeightChange}>
-                  {npmQuery.isLoading ? (
-                    <div
-                      className="flex items-center justify-center"
-                      style={{ height }}
-                    >
-                      <div className="flex flex-col items-center gap-4">
-                        <Spinner />
-                        <div className="text-sm text-gray-600 dark:text-gray-400">
-                          Loading download statistics...
-                        </div>
-                      </div>
-                    </div>
-                  ) : (
-                    <NPMStatsChart
-                      range={range}
-                      queryData={npmQuery.data}
-                      transform={transform}
-                      binType={binType}
-                      packages={packageGroups}
-                      showDataMode={showDataModeParam}
-                    />
-                  )}
-                </Resizable>
-              </div>
-
-              {/* Stats Table */}
-              <StatsTable
-                queryData={npmQuery.data}
-                packageGroups={packageGroups}
-                binOption={binOption}
-                transform={transform}
-                onColorClick={handleColorClick}
-                onToggleVisibility={togglePackageVisibility}
-                onRemove={handleRemovePackageName}
-              />
-            </div>
-          )}
-
-          <div className="h-24" />
-        </div>
-      </div>
-    </DocContainer>
-  )
-}
diff --git a/src/routes/$libraryId/$version.docs.tsx b/src/routes/$libraryId/$version.docs.tsx
deleted file mode 100644
index 57e7a2096..000000000
--- a/src/routes/$libraryId/$version.docs.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Outlet, useMatch, createFileRoute } from '@tanstack/react-router'
-import { DocsLayout } from '~/components/DocsLayout'
-import { getLibrary } from '~/libraries'
-import { seo } from '~/utils/seo'
-
-export const Route = createFileRoute('/$libraryId/$version/docs')({
-  head: (ctx) => {
-    const { libraryId } = ctx.params
-    const library = getLibrary(libraryId)
-
-    return {
-      meta: seo({
-        title: `${library.name} Docs`,
-        noindex: library.visible === false,
-      }),
-    }
-  },
-  component: DocsRoute,
-  headers: () => {
-    return {
-      'cache-control': 'public, max-age=0, must-revalidate',
-      'cdn-cache-control': 'max-age=300, stale-while-revalidate=300, durable',
-    }
-  },
-})
-
-function DocsRoute() {
-  const { libraryId, version } = Route.useParams()
-  const library = getLibrary(libraryId)
-  const versionMatch = useMatch({ from: '/$libraryId/$version' })
-  const { config } = versionMatch.loaderData
-
-  return (
-    <DocsLayout
-      name={library.name.replace('TanStack ', '')}
-      version={version === 'latest' ? library.latestVersion : version!}
-      colorFrom={library.accentColorFrom ?? library.colorFrom}
-      colorTo={library.accentColorTo ?? library.colorTo}
-      textColor={library.accentTextColor ?? library.textColor ?? ''}
-      config={config}
-      frameworks={library.frameworks}
-      versions={library.availableVersions}
-      repo={library.repo}
-    >
-      <Outlet />
-    </DocsLayout>
-  )
-}
diff --git a/src/routes/$libraryId/$version.docs.{$}[.]md.tsx b/src/routes/$libraryId/$version.docs.{$}[.]md.tsx
deleted file mode 100644
index b5d30cf01..000000000
--- a/src/routes/$libraryId/$version.docs.{$}[.]md.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { getBranch, getLibrary, type LibraryId } from '~/libraries'
-import { loadDocs } from '~/utils/docs'
-
-export const Route = createFileRoute('/$libraryId/$version/docs/{$}.md')({
-  // @ts-expect-error server property not in route types yet
-  server: {
-    handlers: {
-      GET: async ({
-        request,
-        params,
-      }: {
-        request: Request
-        params: { libraryId: string; version: string; _splat: string }
-      }) => {
-        const _url = new URL(request.url)
-
-        const { libraryId, version, _splat: docsPath } = params
-        const library = getLibrary(libraryId as LibraryId)
-        const root = library.docsRoot || 'docs'
-
-        const doc = await loadDocs({
-          repo: library.repo,
-          branch: getBranch(library, version),
-          docsPath: `${root}/${docsPath}`,
-        })
-
-        const markdownContent = `# ${doc.title}\n${doc.content}`
-        const filename = (docsPath || 'file').split('/').join('-')
-
-        return new Response(markdownContent, {
-          headers: {
-            'Content-Type': 'text/markdown',
-            'Content-Disposition': `inline; filename="${filename}.md"`,
-            'Cache-Control': 'public, max-age=0, must-revalidate',
-            'Cdn-Cache-Control':
-              'max-age=300, stale-while-revalidate=300, durable',
-          },
-        })
-      },
-    },
-  },
-})
diff --git a/src/routes/$libraryId/$version.index.tsx b/src/routes/$libraryId/$version.index.tsx
deleted file mode 100644
index 40d003ec3..000000000
--- a/src/routes/$libraryId/$version.index.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as React from 'react'
-import {
-  useMatch,
-  redirect,
-  Link,
-  createFileRoute,
-} from '@tanstack/react-router'
-import { DocsLayout } from '~/components/DocsLayout'
-import { getLibrary } from '~/libraries'
-import type { LibraryId } from '~/libraries'
-import { seo } from '~/utils/seo'
-import { ossStatsQuery } from '~/queries/stats'
-import { Button } from '~/ui'
-
-// Lazy-loaded landing components for each library
-const landingComponents: Partial<
-  Record<LibraryId, React.LazyExoticComponent<React.ComponentType>>
-> = {
-  query: React.lazy(() => import('~/components/landing/QueryLanding')),
-  router: React.lazy(() => import('~/components/landing/RouterLanding')),
-  table: React.lazy(() => import('~/components/landing/TableLanding')),
-  form: React.lazy(() => import('~/components/landing/FormLanding')),
-  start: React.lazy(() => import('~/components/landing/StartLanding')),
-  store: React.lazy(() => import('~/components/landing/StoreLanding')),
-  virtual: React.lazy(() => import('~/components/landing/VirtualLanding')),
-  ranger: React.lazy(() => import('~/components/landing/RangerLanding')),
-  pacer: React.lazy(() => import('~/components/landing/PacerLanding')),
-  config: React.lazy(() => import('~/components/landing/ConfigLanding')),
-  db: React.lazy(() => import('~/components/landing/DbLanding')),
-  ai: React.lazy(() => import('~/components/landing/AiLanding')),
-  mcp: React.lazy(() => import('~/components/landing/McpLanding')),
-  devtools: React.lazy(() => import('~/components/landing/DevtoolsLanding')),
-}
-
-export const Route = createFileRoute('/$libraryId/$version/')({
-  head: (ctx) => {
-    const { libraryId } = ctx.params
-    const library = getLibrary(libraryId)
-
-    return {
-      meta: seo({
-        title: library.name,
-        description: library.description,
-        noindex: library.visible === false,
-      }),
-    }
-  },
-  beforeLoad: ({ params }) => {
-    const { libraryId, version } = params
-    // Libraries without landing pages redirect directly to docs
-    if (!landingComponents[libraryId as LibraryId]) {
-      throw redirect({
-        to: '/$libraryId/$version/docs',
-        params: { libraryId, version } as never,
-      })
-    }
-  },
-  loader: async ({ params, context: { queryClient } }) => {
-    const { libraryId } = params
-    const library = getLibrary(libraryId)
-    await queryClient.ensureQueryData(ossStatsQuery({ library }))
-  },
-  component: LibraryVersionIndex,
-})
-
-function LibraryVersionIndex() {
-  const { libraryId, version } = Route.useParams()
-  const library = getLibrary(libraryId)
-  const versionMatch = useMatch({ from: '/$libraryId/$version' })
-  const { config } = versionMatch.loaderData
-
-  const LandingComponent = landingComponents[libraryId as LibraryId]
-
-  // Fallback for libraries without landing components (shouldn't happen due to redirect)
-  if (!LandingComponent) {
-    return (
-      <DocsLayout
-        name={library.name.replace('TanStack ', '')}
-        version={version === 'latest' ? library.latestVersion : version!}
-        colorFrom={library.accentColorFrom ?? library.colorFrom}
-        colorTo={library.accentColorTo ?? library.colorTo}
-        textColor={library.accentTextColor ?? library.textColor ?? ''}
-        config={config}
-        frameworks={library.frameworks}
-        versions={library.availableVersions}
-        repo={library.repo}
-        isLandingPage
-      >
-        <div className="flex flex-col items-center justify-center min-h-[50vh] gap-4">
-          <h1 className="text-2xl font-bold">{library.name}</h1>
-          <p className="text-gray-600">{library.description}</p>
-          <Button
-            as={Link}
-            to="/$libraryId/$version/docs"
-            params={{ libraryId, version } as never}
-          >
-            View Documentation
-          </Button>
-        </div>
-      </DocsLayout>
-    )
-  }
-
-  return (
-    <DocsLayout
-      name={library.name.replace('TanStack ', '')}
-      version={version === 'latest' ? library.latestVersion : version!}
-      colorFrom={library.accentColorFrom ?? library.colorFrom}
-      colorTo={library.accentColorTo ?? library.colorTo}
-      textColor={library.accentTextColor ?? library.textColor ?? ''}
-      config={config}
-      frameworks={library.frameworks}
-      versions={library.availableVersions}
-      repo={library.repo}
-      isLandingPage
-    >
-      <React.Suspense
-        fallback={
-          <div className="flex items-center justify-center min-h-[50vh]">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-500" />
-          </div>
-        }
-      >
-        <LandingComponent />
-      </React.Suspense>
-    </DocsLayout>
-  )
-}
diff --git a/src/routes/$libraryId/$version.tsx b/src/routes/$libraryId/$version.tsx
deleted file mode 100644
index 82f9feb9f..000000000
--- a/src/routes/$libraryId/$version.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Outlet, redirect, createFileRoute } from '@tanstack/react-router'
-import { RedirectVersionBanner } from '~/components/RedirectVersionBanner'
-import { getBranch, getLibrary } from '~/libraries'
-import { getTanstackDocsConfig } from '~/utils/config'
-
-export const Route = createFileRoute('/$libraryId/$version')({
-  staleTime: 1000 * 60 * 5,
-  beforeLoad: (ctx) => {
-    const { libraryId, version } = ctx.params
-    const library = getLibrary(libraryId)
-
-    library.handleRedirects?.(ctx.location.href)
-
-    if (!library.availableVersions.concat('latest').includes(version!)) {
-      throw redirect({
-        params: { libraryId, version: 'latest' } as never,
-      })
-    }
-  },
-  loader: async (ctx) => {
-    const { libraryId, version } = ctx.params
-    const library = getLibrary(libraryId)
-    const branch = getBranch(library, version)
-    const config = await getTanstackDocsConfig({
-      data: {
-        repo: library.repo,
-        branch,
-        docsRoot: library.docsRoot || 'docs',
-      },
-    })
-
-    return { config }
-  },
-  component: RouteForm,
-})
-
-function RouteForm() {
-  const { libraryId, version } = Route.useParams()
-  const library = getLibrary(libraryId)
-
-  return (
-    <>
-      <Outlet />
-      <RedirectVersionBanner
-        version={version!}
-        latestVersion={library.latestVersion}
-      />
-    </>
-  )
-}
diff --git a/src/routes/-libraries-utils.ts b/src/routes/-libraries-utils.ts
new file mode 100644
index 000000000..ef6848c89
--- /dev/null
+++ b/src/routes/-libraries-utils.ts
@@ -0,0 +1,57 @@
+import { publicLibraries, type Framework, type LibrarySlim } from '~/libraries'
+
+export function getVisibleLibraries() {
+  return publicLibraries
+}
+
+export function orderLibrariesForBrowse<TLibrary extends LibrarySlim>(
+  allLibraries: Array<TLibrary>,
+) {
+  const others = allLibraries.filter(
+    (library) =>
+      library.id !== 'ranger' &&
+      library.id !== 'config' &&
+      library.id !== 'react-charts',
+  )
+  const ranger = allLibraries.filter((library) => library.id === 'ranger')
+  const config = allLibraries.filter((library) => library.id === 'config')
+
+  const devtoolsIndex = others.findIndex((library) => library.id === 'devtools')
+
+  if (devtoolsIndex === -1) {
+    return [...others, ...config, ...ranger]
+  }
+
+  return [
+    ...others.slice(0, devtoolsIndex + 1),
+    ...config,
+    ...others.slice(devtoolsIndex + 1),
+    ...ranger,
+  ]
+}
+
+export function getFrameworkLibraryCounts(allLibraries: Array<LibrarySlim>) {
+  const counts = {} as Partial<Record<Framework, number>>
+
+  for (const library of allLibraries) {
+    for (const framework of library.frameworks) {
+      counts[framework] = (counts[framework] ?? 0) + 1
+    }
+  }
+
+  return counts
+}
+
+export function orderFrameworksForBrowse<
+  TFramework extends { value: Framework },
+>(
+  frameworks: ReadonlyArray<TFramework>,
+  counts: Partial<Record<Framework, number>>,
+) {
+  return [...frameworks].sort((a, b) => {
+    if (a.value === 'vanilla') return 1
+    if (b.value === 'vanilla') return -1
+
+    return (counts[b.value] ?? 0) - (counts[a.value] ?? 0)
+  })
+}
diff --git a/src/routes/-library-landing-route.tsx b/src/routes/-library-landing-route.tsx
new file mode 100644
index 000000000..e35b5019d
--- /dev/null
+++ b/src/routes/-library-landing-route.tsx
@@ -0,0 +1,93 @@
+import { Link, redirect } from '@tanstack/react-router'
+import type { QueryClient } from '@tanstack/react-query'
+import { getLibrary } from '~/libraries'
+import type { LibraryId } from '~/libraries'
+import { docsConfigQueryOptions } from '~/queries/docsConfig'
+import { ossStatsQuery, recentDownloadsQuery } from '~/queries/stats'
+import { ogImageUrl } from '~/utils/og'
+import { seo } from '~/utils/seo'
+import { stackBlitzEmbedHeaders } from '~/utils/stackblitz-embed'
+import { validateLibraryVersion } from './-library-landing'
+import type { LandingLibraryId } from './-library-landing'
+import type { ConfigSchema } from '~/utils/config'
+
+const stackBlitzLandingLibraryIds = new Set<LibraryId>([
+  'form',
+  'query',
+  'ranger',
+  'router',
+  'table',
+  'virtual',
+])
+
+export const libraryLandingStaleTime = 1000 * 60 * 5
+
+export function beforeLoadLibraryLanding(
+  libraryId: LandingLibraryId,
+  version: string | undefined,
+  href: string,
+) {
+  const library = validateLibraryVersion(libraryId, version, () => {
+    throw redirect({ href: `/${libraryId}/latest` })
+  })
+
+  library.handleRedirects?.(href)
+}
+
+export async function loadLibraryLandingRouteData(
+  libraryId: LandingLibraryId,
+  version: string,
+  queryClient: QueryClient,
+): Promise<{
+  config: ConfigSchema
+}> {
+  const library = getLibrary(libraryId)
+  const [config] = await Promise.all([
+    queryClient.ensureQueryData(docsConfigQueryOptions(libraryId, version)),
+    queryClient.ensureQueryData(ossStatsQuery({ library })),
+    queryClient.ensureQueryData(recentDownloadsQuery({ library })),
+  ])
+
+  return {
+    config,
+  }
+}
+
+export function getLibraryLandingHead(libraryId: LandingLibraryId) {
+  const library = getLibrary(libraryId)
+
+  return {
+    meta: seo({
+      title: library.name,
+      description: library.description,
+      image: ogImageUrl(library.id),
+      noindex: library.visible === false,
+    }),
+  }
+}
+
+export function getLibraryLandingHeaders(libraryId: LandingLibraryId) {
+  return stackBlitzLandingLibraryIds.has(libraryId)
+    ? stackBlitzEmbedHeaders
+    : {}
+}
+
+export function LibraryNavbarTitle({
+  libraryId,
+}: {
+  libraryId: LandingLibraryId
+}) {
+  const library = getLibrary(libraryId)
+  const libraryName = library.name.replace('TanStack ', '')
+  const gradientText = `inline-block text-transparent bg-clip-text bg-linear-to-r ${library.colorFrom} ${library.colorTo}`
+
+  return (
+    <Link
+      to="/$libraryId"
+      params={{ libraryId: library.id }}
+      className="whitespace-nowrap"
+    >
+      <span className={gradientText}>{libraryName}</span>
+    </Link>
+  )
+}
diff --git a/src/routes/-library-landing.tsx b/src/routes/-library-landing.tsx
new file mode 100644
index 000000000..dc1eb9dc7
--- /dev/null
+++ b/src/routes/-library-landing.tsx
@@ -0,0 +1,45 @@
+import { notFound } from '@tanstack/react-router'
+import { findLibrary } from '~/libraries'
+
+export type LandingLibraryId =
+  | 'ai'
+  | 'cli'
+  | 'config'
+  | 'db'
+  | 'devtools'
+  | 'form'
+  | 'hotkeys'
+  | 'intent'
+  | 'pacer'
+  | 'query'
+  | 'ranger'
+  | 'router'
+  | 'start'
+  | 'store'
+  | 'table'
+  | 'virtual'
+  | 'workflow'
+
+function getLibraryOrThrow(libraryId: string) {
+  const library = findLibrary(libraryId)
+
+  if (!library) {
+    throw notFound()
+  }
+
+  return library
+}
+
+export function validateLibraryVersion(
+  libraryId: string,
+  version: string | undefined,
+  onInvalidVersion: () => never,
+) {
+  const library = getLibraryOrThrow(libraryId)
+
+  if (!library.availableVersions.concat('latest').includes(version!)) {
+    onInvalidVersion()
+  }
+
+  return library
+}
diff --git a/src/routes/-shop-browse.tsx b/src/routes/-shop-browse.tsx
new file mode 100644
index 000000000..13b287190
--- /dev/null
+++ b/src/routes/-shop-browse.tsx
@@ -0,0 +1,237 @@
+import * as React from 'react'
+import { useMutation } from '@tanstack/react-query'
+import * as v from 'valibot'
+import { ProductCard } from '~/components/shop/ProductCard'
+import { ProductDrawer } from '~/components/shop/ProductDrawer'
+import { ShopHero } from '~/components/shop/ShopHero'
+import { ShopButton, ShopSelect, ShopTab } from '~/components/shop/ui'
+import { getProducts } from '~/utils/shop.functions'
+import {
+  SORT_OPTIONS,
+  resolveSortOption,
+  sortOptionId,
+  type ProductDetail,
+  type ProductListItem,
+  type ProductListPage,
+  type SortOptionId,
+} from '~/utils/shopify-queries'
+
+const shopSortSearchSchema = v.picklist([
+  'BEST_SELLING',
+  'CREATED_AT:rev',
+  'PRICE',
+  'PRICE:rev',
+  'TITLE',
+])
+
+export const shopBrowseSearchSchema = v.object({
+  sort: v.optional(shopSortSearchSchema),
+  type: v.optional(v.string()),
+  product: v.optional(v.string()),
+})
+
+type ShopBrowseSearch = v.InferOutput<typeof shopBrowseSearchSchema>
+type ValidSortId = NonNullable<ShopBrowseSearch['sort']>
+
+const PAGE_SIZE = 24
+
+export async function loadShopBrowsePage(sort: ShopBrowseSearch['sort']) {
+  const sortOption = resolveSortOption(sort)
+  const page = await getProducts({
+    data: {
+      first: PAGE_SIZE,
+      sortKey: sortOption.key,
+      reverse: sortOption.reverse,
+    },
+  })
+  return { page, sortId: sortOptionId(sortOption) }
+}
+
+type ShopBrowsePageProps = {
+  page: ProductListPage
+  sortId: SortOptionId
+  activeType: string | undefined
+  productHandle: string | null
+  initialProduct?: ProductDetail | null
+  onTypeChange: (type: string | undefined) => void
+  onSortChange: (sort: ValidSortId | undefined) => void
+  onProductSelect: (handle: string) => void
+  onProductClose: () => void
+  onProductChange: (handle: string) => void
+}
+
+export function ShopBrowsePage({
+  page,
+  sortId,
+  activeType,
+  productHandle,
+  initialProduct,
+  onTypeChange,
+  onSortChange,
+  onProductSelect,
+  onProductClose,
+  onProductChange,
+}: ShopBrowsePageProps) {
+  const normalizedActiveType = activeType?.toLowerCase() ?? 'all'
+
+  const [accumulated, setAccumulated] = React.useState<Array<ProductListItem>>(
+    [],
+  )
+  const [endCursor, setEndCursor] = React.useState<string | null>(
+    page.pageInfo.endCursor,
+  )
+  const [hasNextPage, setHasNextPage] = React.useState(
+    page.pageInfo.hasNextPage,
+  )
+
+  React.useEffect(() => {
+    setAccumulated([])
+    setEndCursor(page.pageInfo.endCursor)
+    setHasNextPage(page.pageInfo.hasNextPage)
+  }, [page])
+
+  const loadMore = useMutation({
+    mutationFn: async () => {
+      if (!endCursor) return null
+      const sortOption = resolveSortOption(sortId)
+      return getProducts({
+        data: {
+          first: PAGE_SIZE,
+          after: endCursor,
+          sortKey: sortOption.key,
+          reverse: sortOption.reverse,
+        },
+      })
+    },
+    onSuccess: (next) => {
+      if (!next) return
+      setAccumulated((prev) => [...prev, ...next.nodes])
+      setEndCursor(next.pageInfo.endCursor)
+      setHasNextPage(next.pageInfo.hasNextPage)
+    },
+  })
+
+  const allProducts = React.useMemo(
+    () => [...page.nodes, ...accumulated],
+    [page.nodes, accumulated],
+  )
+
+  const typeOptions = React.useMemo(() => {
+    const counts = new Map<string, { display: string; count: number }>()
+    for (const product of allProducts) {
+      const productType = product.productType?.trim()
+      if (!productType) continue
+      const key = productType.toLowerCase()
+      const existing = counts.get(key)
+      if (existing) existing.count += 1
+      else counts.set(key, { display: productType, count: 1 })
+    }
+    return Array.from(counts.entries())
+      .map(([key, { display, count }]) => ({ key, display, count }))
+      .sort((a, b) => b.count - a.count)
+  }, [allProducts])
+
+  const products =
+    normalizedActiveType === 'all'
+      ? allProducts
+      : allProducts.filter(
+          (product) =>
+            product.productType?.toLowerCase() === normalizedActiveType,
+        )
+
+  return (
+    <div className="pb-24">
+      <div className="px-6 md:px-11 pt-6 md:pt-11 max-w-[1280px] mx-auto">
+        <div className="pb-5.5 border-b border-shop-line-2 mb-7">
+          <ShopHero
+            title={
+              <>
+                Built in <em>public</em>,<br />
+                worn in <em>production</em>.
+              </>
+            }
+            lede="Official TanStack apparel, accessories, and stickers. Limited runs, ethically produced, shipped worldwide. Rep the libraries that ship your code every day."
+          />
+        </div>
+      </div>
+
+      <div className="sticky top-[var(--navbar-height,56px)] z-10 border-b border-shop-line bg-shop-bg/95 backdrop-blur-sm">
+        <div className="max-w-[1280px] mx-auto px-6 md:px-11 flex flex-wrap items-center gap-1.5 py-2">
+          <ShopTab
+            isActive={normalizedActiveType === 'all'}
+            count={allProducts.length}
+            className="px-3 py-1.5 text-shop-sm rounded-lg"
+            onClick={() => onTypeChange(undefined)}
+          >
+            All
+          </ShopTab>
+          {typeOptions.map((opt) => (
+            <ShopTab
+              key={opt.key}
+              isActive={normalizedActiveType === opt.key}
+              count={opt.count}
+              className="px-3 py-1.5 text-shop-sm rounded-lg"
+              onClick={() => onTypeChange(opt.key)}
+            >
+              {opt.display}
+            </ShopTab>
+          ))}
+          <ShopSelect
+            className="ml-auto"
+            triggerClassName="py-1.5 pl-3 pr-2.5 text-shop-sm rounded-lg"
+            value={sortId}
+            onChange={(e) => {
+              const nextId = v.parse(shopSortSearchSchema, e.target.value)
+              onSortChange(nextId === 'BEST_SELLING' ? undefined : nextId)
+            }}
+          >
+            {SORT_OPTIONS.map((opt) => (
+              <option key={sortOptionId(opt)} value={sortOptionId(opt)}>
+                {opt.label}
+              </option>
+            ))}
+          </ShopSelect>
+        </div>
+      </div>
+
+      <div className="px-6 md:px-11 max-w-[1280px] mx-auto mt-7">
+        {products.length === 0 ? (
+          <div className="text-center py-24 text-shop-muted">
+            No products yet. Check back soon!
+          </div>
+        ) : (
+          <>
+            <section className="grid gap-x-4 gap-y-5.5 grid-cols-[repeat(auto-fill,minmax(340px,1fr))]">
+              {products.map((product, i) => (
+                <ProductCard
+                  key={product.id}
+                  product={product}
+                  loading={i < 8 ? 'eager' : 'lazy'}
+                  onQuickView={onProductSelect}
+                />
+              ))}
+            </section>
+            {hasNextPage ? (
+              <div className="flex justify-center py-8">
+                <ShopButton
+                  onClick={() => loadMore.mutate()}
+                  disabled={loadMore.isPending}
+                >
+                  {loadMore.isPending ? 'Loading...' : 'Load more'}
+                </ShopButton>
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
+
+      <ProductDrawer
+        productHandle={productHandle}
+        initialProduct={initialProduct}
+        allHandles={products.map((product) => product.handle)}
+        onClose={onProductClose}
+        onChange={onProductChange}
+      />
+    </div>
+  )
+}
diff --git a/src/routes/[.]well-known/oauth-authorization-server.ts b/src/routes/[.]well-known/oauth-authorization-server.ts
index e007200cd..422df323a 100644
--- a/src/routes/[.]well-known/oauth-authorization-server.ts
+++ b/src/routes/[.]well-known/oauth-authorization-server.ts
@@ -1,20 +1,17 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { setResponseHeader } from '@tanstack/react-start/server'
-import { env } from '~/utils/env'
+import { SITE_URL } from '~/utils/site'
 
 export const Route = createFileRoute('/.well-known/oauth-authorization-server')(
   {
-    // @ts-expect-error server property not in route types yet
     server: {
       handlers: {
-        GET: async ({ request }: { request: Request }) => {
-          const origin = env.SITE_URL || new URL(request.url).origin
-
+        GET: async () => {
           const metadata = {
-            issuer: origin,
-            authorization_endpoint: `${origin}/oauth/authorize`,
-            token_endpoint: `${origin}/oauth/token`,
-            registration_endpoint: `${origin}/oauth/register`,
+            issuer: SITE_URL,
+            authorization_endpoint: `${SITE_URL}/oauth/authorize`,
+            token_endpoint: `${SITE_URL}/oauth/token`,
+            registration_endpoint: `${SITE_URL}/oauth/register`,
             response_types_supported: ['code'],
             grant_types_supported: ['authorization_code', 'refresh_token'],
             code_challenge_methods_supported: ['S256'],
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index ecb1605c3..936d3bf33 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,176 +1,250 @@
 import * as React from 'react'
 import {
-  Outlet,
   createRootRouteWithContext,
-  redirect,
   useMatches,
   useRouterState,
   HeadContent,
   Scripts,
+  defaultStringifySearch,
 } from '@tanstack/react-router'
 import { QueryClient } from '@tanstack/react-query'
-import appCss from '~/styles/app.css?url'
-import { seo } from '~/utils/seo'
+import { createThemeCss, type HighlightTheme } from '@tanstack/highlight/theme'
+import { auroraXTheme } from '@tanstack/highlight/themes/aurora-x'
+import { githubLightTheme } from '@tanstack/highlight/themes/github-light'
+import '~/styles/app.css'
+import {
+  canonicalUrl,
+  getCanonicalPath,
+  seo,
+  shouldIndexPath,
+} from '~/utils/seo'
 import ogImage from '~/images/og.png'
-const LazyRouterDevtools = React.lazy(() =>
-  import('@tanstack/react-router-devtools').then((m) => ({
-    default: m.TanStackRouterDevtoolsInProd,
-  })),
-)
+const LazyAppDevtools = import.meta.env.DEV
+  ? React.lazy(() =>
+      import('~/components/AppDevtools').then((m) => ({
+        default: m.AppDevtools,
+      })),
+    )
+  : null
 import { NotFound } from '~/components/NotFound'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
-import { GamScripts } from '~/components/Gam'
-
 import { SearchProvider } from '~/contexts/SearchContext'
 import { ToastProvider } from '~/components/ToastProvider'
 import { LoginModalProvider } from '~/contexts/LoginModalContext'
 
-const LazySearchModal = React.lazy(() =>
-  import('~/components/SearchModal').then((m) => ({ default: m.SearchModal })),
-)
 import { Spinner } from '~/components/Spinner'
-import { ThemeProvider } from '~/components/ThemeProvider'
+import { ThemeProvider, useHtmlClass } from '~/components/ThemeProvider'
 import { Navbar } from '~/components/Navbar'
 import { THEME_COLORS } from '~/utils/utils'
-import { useHubSpotChat } from '~/hooks/useHubSpotChat'
+import { trackPageView } from '~/utils/analytics'
+import { createPartnerPlacementSessionSeed } from '~/utils/partner-placement'
+import { twMerge } from 'tailwind-merge'
+
+const GOOGLE_ANALYTICS_ID = 'G-JMT1Z50SPS'
+const GOOGLE_ANALYTICS_PROXY_PREFIX = '/_a'
+const GOOGLE_ANALYTICS_SCRIPT_SRC = `${GOOGLE_ANALYTICS_PROXY_PREFIX}/gtag.js`
+const THEME_BOOTSTRAP = `(function(){try{var t=localStorage.getItem('theme')||'auto';var v=['light','dark','auto'].includes(t)?t:'auto';var r=v==='auto'?(matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):v;document.documentElement.classList.add(r);if(v==='auto')document.documentElement.classList.add('auto');document.documentElement.style.colorScheme=r}catch(e){var r=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';document.documentElement.classList.add(r,'auto');document.documentElement.style.colorScheme=r}})()`
+const GOOGLE_ANALYTICS_BOOTSTRAP = `(function(){var id='${GOOGLE_ANALYTICS_ID}';var src='${GOOGLE_ANALYTICS_SCRIPT_SRC}';window.dataLayer=window.dataLayer||[];window.gtag=window.gtag||function(){window.dataLayer.push(arguments)};window.gtag('js',new Date());window.gtag('config',id,{transport_url:window.location.origin+'${GOOGLE_ANALYTICS_PROXY_PREFIX}'});var loaded=false;var load=function(){if(loaded)return;loaded=true;var script=document.createElement('script');script.async=true;script.src=src;script.setAttribute('data-ga-loader','true');document.head.appendChild(script)};if(typeof window.requestIdleCallback==='function'){window.requestIdleCallback(load,{timeout:3000});return}if(document.readyState==='complete'){window.setTimeout(load,1500);return}window.addEventListener('load',function(){window.setTimeout(load,1500)},{once:true})})();`
+const DOCUMENT_CACHE_HEADERS = {
+  'Cache-Control': 'public, max-age=0, must-revalidate',
+  'Cloudflare-CDN-Cache-Control': 'no-store',
+}
+const tanstackNeutralDarkTheme = {
+  ...auroraXTheme,
+  background: '#111111',
+  foreground: '#d4d4d4',
+  name: 'tanstack-neutral-dark',
+  tokens: {
+    ...auroraXTheme.tokens,
+    comment: '#a3a3a3',
+    meta: '#737373',
+    token: '#d4d4d4',
+  },
+} satisfies HighlightTheme
+const HIGHLIGHT_THEME_CSS = createThemeCss({
+  light: githubLightTheme,
+  dark: tanstackNeutralDarkTheme,
+  darkSelector: '.dark',
+})
+
+type CanonicalHeadMatch = {
+  pathname: string
+  search: Record<string, unknown>
+  staticData?: {
+    includeSearchInCanonical?: boolean
+  }
+}
+
+function getCanonicalHeadTags(matches: ReadonlyArray<CanonicalHeadMatch>): {
+  links: Array<React.JSX.IntrinsicElements['link']>
+  meta: Array<React.JSX.IntrinsicElements['meta']>
+} {
+  const lastMatch = matches[matches.length - 1]
+  const canonicalPath = lastMatch?.pathname ?? '/'
+  const includeSearchInCanonical = matches.some(
+    (match) => match.staticData?.includeSearchInCanonical === true,
+  )
+  const canonicalSearch =
+    includeSearchInCanonical && lastMatch
+      ? defaultStringifySearch(lastMatch.search)
+      : ''
+  const preferredCanonicalPath = getCanonicalPath(canonicalPath)
+  const pageUrl = canonicalUrl(
+    preferredCanonicalPath ?? canonicalPath,
+    canonicalSearch,
+  )
+
+  return {
+    links: preferredCanonicalPath
+      ? [
+          {
+            rel: 'canonical',
+            href: canonicalUrl(preferredCanonicalPath, canonicalSearch),
+          },
+        ]
+      : [],
+    meta: [
+      { property: 'og:url', content: pageUrl },
+      { name: 'twitter:url', content: pageUrl },
+      ...(!shouldIndexPath(canonicalPath)
+        ? [{ name: 'robots', content: 'noindex, nofollow' }]
+        : []),
+    ],
+  }
+}
+
+class OptionalDevtoolsBoundary extends React.Component<
+  { children: React.ReactNode },
+  { hasError: boolean }
+> {
+  state = { hasError: false }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error) {
+    if (import.meta.env.DEV) {
+      console.warn('TanStack Devtools failed to load', error)
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null
+    }
+
+    return this.props.children
+  }
+}
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient
 }>()({
-  head: () => ({
-    meta: [
-      {
-        charSet: 'utf-8',
-      },
-      {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1',
-      },
-      {
-        name: 'theme-color',
-        content: THEME_COLORS.light,
-        media: '(prefers-color-scheme: light)',
-      },
-      {
-        name: 'theme-color',
-        content: THEME_COLORS.dark,
-        media: '(prefers-color-scheme: dark)',
-      },
-      ...seo({
-        title:
-          'TanStack | High Quality Open-Source Software for Web Developers',
-        description: `Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.`,
-        image: `https://tanstack.com${ogImage}`,
-        keywords:
-          'tanstack,react,reactjs,react query,react table,open source,open source software,oss,software',
-      }),
-    ],
-    links: [
-      { rel: 'stylesheet', href: appCss },
-      {
-        rel: 'apple-touch-icon',
-        sizes: '180x180',
-        href: '/apple-touch-icon.png',
-      },
-      {
-        rel: 'icon',
-        type: 'image/png',
-        sizes: '32x32',
-        href: '/favicon-32x32.png',
-      },
-      {
-        rel: 'icon',
-        type: 'image/png',
-        sizes: '16x16',
-        href: '/favicon-16x16.png',
-      },
-      { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },
-      { rel: 'icon', href: '/favicon.ico' },
-      {
-        rel: 'preload',
-        href: '/fonts/Inter.woff2',
-        as: 'font',
-        type: 'font/woff2',
-        crossOrigin: '',
-      },
-    ],
-    scripts: [
-      // Google Tag Manager script
-      {
-        children: `
-          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-          })(window,document,'script','dataLayer','GTM-5N57KQT4');
-        `,
-      },
-    ],
-  }),
-  beforeLoad: async (ctx) => {
-    if (
-      ctx.location.href.match(/\/docs\/(react|vue|angular|svelte|solid)\//gm)
-    ) {
-      throw redirect({
-        href: ctx.location.href.replace(
-          /\/docs\/(react|vue|angular|svelte|solid)\//gm,
-          '/docs/framework/$1/',
-        ),
-      })
+  loader: () => {
+    return {
+      partnerPlacementSessionSeed: createPartnerPlacementSessionSeed(),
     }
+  },
+  head: ({ matches }) => {
+    const canonicalHeadTags = getCanonicalHeadTags(matches)
 
-    // Initialize user as undefined - routes can opt-in to load auth if needed
-    // Use undefined instead of null to distinguish between "not loaded" and "no user"
+    return {
+      meta: [
+        {
+          charSet: 'utf-8',
+        },
+        {
+          name: 'viewport',
+          content: 'width=device-width, initial-scale=1',
+        },
+        {
+          name: 'theme-color',
+          content: THEME_COLORS.light,
+          media: '(prefers-color-scheme: light)',
+        },
+        {
+          name: 'theme-color',
+          content: THEME_COLORS.dark,
+          media: '(prefers-color-scheme: dark)',
+        },
+        ...seo({
+          title:
+            'TanStack | High Quality Open-Source Software for Web Developers',
+          description: `Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.`,
+          image: `https://tanstack.com${ogImage}`,
+          keywords:
+            'tanstack,react,reactjs,react query,react table,open source,open source software,oss,software',
+        }),
+        ...canonicalHeadTags.meta,
+      ],
+      links: [
+        ...canonicalHeadTags.links,
+        {
+          rel: 'preload',
+          href: '/fonts/Inter-latin.woff2',
+          as: 'font',
+          type: 'font/woff2',
+          crossOrigin: 'anonymous',
+        },
+        {
+          rel: 'apple-touch-icon',
+          sizes: '180x180',
+          href: '/apple-touch-icon.png',
+        },
+        {
+          rel: 'icon',
+          type: 'image/png',
+          sizes: '32x32',
+          href: '/favicon-32x32.png',
+        },
+        {
+          rel: 'icon',
+          type: 'image/png',
+          sizes: '16x16',
+          href: '/favicon-16x16.png',
+        },
+        { rel: 'manifest', href: '/site.webmanifest', color: '#fffff' },
+        { rel: 'icon', href: '/favicon.ico' },
+      ],
+      scripts: [{ children: GOOGLE_ANALYTICS_BOOTSTRAP }],
+    }
   },
+  headers: () => DOCUMENT_CACHE_HEADERS,
   staleTime: Infinity,
-  errorComponent: (props) => {
-    return (
-      <HtmlWrapper>
-        <DefaultCatchBoundary {...props} />
-      </HtmlWrapper>
-    )
-  },
-  notFoundComponent: () => {
-    return (
-      <DocumentWrapper>
-        <NotFound />
-      </DocumentWrapper>
-    )
-  },
-  component: () => {
-    return (
-      <DocumentWrapper>
-        <Outlet />
-      </DocumentWrapper>
-    )
+  shellComponent: ({ children }) => {
+    return <RootShell>{children}</RootShell>
   },
+  errorComponent: DefaultCatchBoundary,
+  notFoundComponent: () => <NotFound />,
 })
 
-function DocumentWrapper({ children }: { children: React.ReactNode }) {
+function RootShell({ children }: { children: React.ReactNode }) {
   return (
     <ThemeProvider>
       <SearchProvider>
-        <HtmlWrapper>{children}</HtmlWrapper>
+        <ShellComponent>{children}</ShellComponent>
       </SearchProvider>
     </ThemeProvider>
   )
 }
 
-function HtmlWrapper({ children }: { children: React.ReactNode }) {
-  const matches = useMatches()
-
-  // HubSpot chat loads on configured pages (see useHubSpotChat hook)
-  useHubSpotChat()
+function ShellComponent({ children }: { children: React.ReactNode }) {
+  const hasBaseParent = useMatches({
+    select: (matches) => matches.find((d) => d.staticData?.baseParent),
+  })
 
-  const isLoading = useRouterState({
-    select: (s) => s.status === 'pending',
+  const isNavigating = useRouterState({
+    select: (s) => s.isLoading || s.isTransitioning,
   })
 
-  const [canShowLoading, setShowLoading] = React.useState(false)
+  const [canShowDevtools, setCanShowDevtools] = React.useState(false)
+  const [showNavigationSpinner, setShowNavigationSpinner] =
+    React.useState(false)
 
   React.useEffect(() => {
     const timeout = setTimeout(() => {
-      setShowLoading(true)
+      setCanShowDevtools(true)
     }, 2000)
 
     return () => {
@@ -178,69 +252,107 @@ function HtmlWrapper({ children }: { children: React.ReactNode }) {
     }
   }, [])
 
-  const isRouterPage = useRouterState({
-    select: (s) => s.resolvedLocation?.pathname.startsWith('/router'),
-  })
+  React.useEffect(() => {
+    if (!isNavigating) {
+      setShowNavigationSpinner(false)
+      return
+    }
+
+    const timeout = window.setTimeout(() => {
+      setShowNavigationSpinner(true)
+    }, 1000)
+
+    return () => {
+      window.clearTimeout(timeout)
+    }
+  }, [isNavigating])
 
-  const showDevtools = canShowLoading && isRouterPage
+  const showDevtools = import.meta.env.DEV && canShowDevtools
 
   const hideNavbar = useMatches({
     select: (s) => s.some((d) => d.staticData?.showNavbar === false),
   })
 
+  const htmlClass = useHtmlClass()
+
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" className={htmlClass} suppressHydrationWarning>
       <head>
+        <script
+          dangerouslySetInnerHTML={{ __html: THEME_BOOTSTRAP }}
+          suppressHydrationWarning
+        />
         <HeadContent />
-        {matches.find((d) => d.staticData?.baseParent) ? (
-          <base target="_parent" />
-        ) : null}
-        <GamScripts />
+        <style
+          id="tanstack-highlight-theme"
+          dangerouslySetInnerHTML={{ __html: HIGHLIGHT_THEME_CSS }}
+        />
+        {hasBaseParent ? <base target="_parent" /> : null}
       </head>
       <body className="overflow-x-hidden">
         <LoginModalProvider>
           <ToastProvider>
-            <React.Suspense fallback={null}>
-              {hideNavbar ? children : <Navbar>{children}</Navbar>}
-            </React.Suspense>
-            {showDevtools ? (
-              <LazyRouterDevtools position="bottom-right" />
+            <PageViewTracker />
+            {hideNavbar ? children : <Navbar>{children}</Navbar>}
+            {showDevtools && LazyAppDevtools ? (
+              <OptionalDevtoolsBoundary>
+                <React.Suspense fallback={null}>
+                  <LazyAppDevtools />
+                </React.Suspense>
+              </OptionalDevtoolsBoundary>
             ) : null}
-            {canShowLoading ? (
+            <div
+              aria-hidden="true"
+              className={twMerge(
+                'pointer-events-none fixed top-0 left-0 z-99999999 h-[320px] w-full select-none',
+              )}
+            >
+              <div
+                className={twMerge(
+                  'absolute top-0 w-full h-80 rounded-[100%] bg-amber-500/30 blur-3xl transition-all duration-500 dark:bg-sky-400/25',
+                  showNavigationSpinner
+                    ? '-translate-y-1/2 opacity-100'
+                    : '-translate-y-full opacity-0',
+                )}
+              />
               <div
-                className={`fixed top-0 left-0 h-[300px] w-full
-        transition-all duration-300 pointer-events-none
-        z-30 dark:h-[200px] dark:bg-white/10! dark:rounded-[100%] ${
-          isLoading
-            ? 'delay-500 opacity-1 -translate-y-1/2'
-            : 'delay-0 opacity-0 -translate-y-full'
-        }`}
-                style={{
-                  background: `radial-gradient(closest-side, rgba(0,10,40,0.2) 0%, rgba(0,0,0,0) 100%)`,
-                }}
+                className={twMerge(
+                  'absolute top-6 left-1/2 -translate-x-1/2 rounded-full bg-white/75 p-2 shadow-lg backdrop-blur-lg transition-all duration-300 dark:bg-slate-900/40',
+                  showNavigationSpinner
+                    ? 'translate-y-0 opacity-100'
+                    : '-translate-y-6 opacity-0',
+                )}
               >
-                <div
-                  className={`absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-[30px] p-2 bg-white/80 dark:bg-gray-800
-        rounded-lg shadow-lg`}
-                >
-                  <Spinner className="text-5xl" />
-                </div>
+                <Spinner className="text-4xl" />
               </div>
-            ) : null}
-            <LazySearchModal />
+            </div>
           </ToastProvider>
         </LoginModalProvider>
-        <noscript>
-          <iframe
-            src="https://www.googletagmanager.com/ns.html?id=GTM-5N57KQT4"
-            height="0"
-            width="0"
-            style={{ display: 'none', visibility: 'hidden' }}
-            title="gtm"
-          ></iframe>
-        </noscript>
         <Scripts />
       </body>
     </html>
   )
 }
+
+function PageViewTracker() {
+  const pagePath = useRouterState({
+    select: (s) => {
+      const pathname = s.resolvedLocation?.pathname || '/'
+      const search = s.resolvedLocation?.searchStr || ''
+
+      return `${pathname}${search}`
+    },
+  })
+  const hasTrackedInitialPage = React.useRef(false)
+
+  React.useEffect(() => {
+    if (!hasTrackedInitialPage.current) {
+      hasTrackedInitialPage.current = true
+      return
+    }
+
+    trackPageView(pagePath)
+  }, [pagePath])
+
+  return null
+}
diff --git a/src/routes/_library.tsx b/src/routes/_library.tsx
new file mode 100644
index 000000000..90464e3e7
--- /dev/null
+++ b/src/routes/_library.tsx
@@ -0,0 +1,135 @@
+import {
+  Outlet,
+  createFileRoute,
+  notFound,
+  useMatches,
+} from '@tanstack/react-router'
+import { LibraryLayout } from '~/components/LibraryLayout'
+import { findLibrary } from '~/libraries'
+import type { LibraryId } from '~/libraries'
+import type { ConfigSchema } from '~/utils/config'
+
+const emptyConfig: ConfigSchema = { sections: [] }
+
+export const Route = createFileRoute('/_library')({
+  component: LibraryRoute,
+})
+
+function LibraryRoute() {
+  const layoutData = useMatches({
+    select: (matches) => {
+      const config = matches
+        .map((match) => getConfigFromLoaderData(match.loaderData))
+        .find(isDefined)
+      const version = matches
+        .map((match) => getVersionFromParams(match.params))
+        .find(isDefined)
+      const libraryId =
+        matches
+          .map((match) => getLibraryIdFromParams(match.params))
+          .find(isDefined) ??
+        getLibraryIdFromPathname(matches[matches.length - 1]?.pathname)
+
+      return {
+        config,
+        isLandingPage: !matches.some((match) =>
+          match.pathname.includes('/docs'),
+        ),
+        libraryId,
+        version,
+      }
+    },
+  })
+
+  const library = layoutData.libraryId
+    ? findLibrary(layoutData.libraryId)
+    : undefined
+
+  if (!library || !layoutData.version) {
+    throw notFound()
+  }
+
+  const config = layoutData.config ?? emptyConfig
+
+  return (
+    <LibraryLayout
+      libraryId={library.id}
+      name={library.name.replace('TanStack ', '')}
+      version={
+        layoutData.version === 'latest'
+          ? library.latestVersion
+          : layoutData.version
+      }
+      colorFrom={library.accentColorFrom ?? library.colorFrom}
+      colorTo={library.accentColorTo ?? library.colorTo}
+      textColor={library.accentTextColor ?? library.textColor ?? ''}
+      config={config}
+      frameworks={library.frameworks}
+      versions={library.availableVersions}
+      repo={library.repo}
+      isLandingPage={layoutData.isLandingPage}
+    >
+      <Outlet />
+    </LibraryLayout>
+  )
+}
+
+function getLibraryIdFromParams(params: unknown): LibraryId | undefined {
+  if (
+    typeof params !== 'object' ||
+    params === null ||
+    !('libraryId' in params)
+  ) {
+    return undefined
+  }
+
+  const libraryId = params.libraryId
+
+  if (typeof libraryId !== 'string') {
+    return undefined
+  }
+
+  return findLibrary(libraryId)?.id
+}
+
+function getLibraryIdFromPathname(
+  pathname: string | undefined,
+): LibraryId | undefined {
+  const firstSegment = pathname?.split('/').filter(Boolean)[0]
+  const library = firstSegment ? findLibrary(firstSegment) : undefined
+
+  return library?.id
+}
+
+function getConfigFromLoaderData(
+  loaderData: unknown,
+): ConfigSchema | undefined {
+  return typeof loaderData === 'object' &&
+    loaderData !== null &&
+    'config' in loaderData &&
+    isConfigSchema(loaderData.config)
+    ? loaderData.config
+    : undefined
+}
+
+function getVersionFromParams(params: unknown): string | undefined {
+  return typeof params === 'object' &&
+    params !== null &&
+    'version' in params &&
+    typeof params.version === 'string'
+    ? params.version
+    : undefined
+}
+
+function isConfigSchema(config: unknown): config is ConfigSchema {
+  return (
+    typeof config === 'object' &&
+    config !== null &&
+    'sections' in config &&
+    Array.isArray(config.sections)
+  )
+}
+
+function isDefined<T>(value: T | undefined): value is T {
+  return value !== undefined
+}
diff --git a/src/routes/_library/$libraryId/$version.docs.$.tsx b/src/routes/_library/$libraryId/$version.docs.$.tsx
new file mode 100644
index 000000000..8432bd81b
--- /dev/null
+++ b/src/routes/_library/$libraryId/$version.docs.$.tsx
@@ -0,0 +1,123 @@
+import { seo } from '~/utils/seo'
+import { ogImageUrl } from '~/utils/og'
+import { Doc } from '~/components/Doc'
+import { buildDocsRedirectHref, loadDocsRoute } from '~/utils/docs'
+import { findLibrary, getBranch, getLibrary } from '~/libraries'
+import { DocContainer } from '~/components/DocContainer'
+import { getDocsCacheHeaders } from '~/utils/docs-cache-headers'
+import {
+  notFound,
+  redirect,
+  useLocation,
+  useMatch,
+  createFileRoute,
+} from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_library/$libraryId/$version/docs/$')({
+  staleTime: 1000 * 60 * 5,
+  loader: async (ctx) => {
+    const { _splat: docsPath, version, libraryId } = ctx.params
+    const library = findLibrary(libraryId)
+
+    if (!library) {
+      throw notFound()
+    }
+
+    const branch = getBranch(library, version)
+    const docsRoot = library.docsRoot || 'docs'
+    const requestedDocsPath = docsPath ?? ''
+    const result = await loadDocsRoute({
+      repo: library.repo,
+      branch,
+      docsRoot,
+      docsPath: requestedDocsPath,
+      defaultDocs: library.defaultDocs ?? 'overview',
+      frameworks: library.frameworks,
+      redirectFromPaths: requestedDocsPath ? [requestedDocsPath] : [],
+    })
+
+    if (result.type === 'redirect') {
+      throw redirect({
+        href: buildDocsRedirectHref({
+          baseHref: ctx.location.href,
+          docsPath: result.docsPath,
+          libraryId,
+          version,
+        }),
+        statusCode: 308,
+      })
+    }
+
+    if (result.type === 'not-found') {
+      throw notFound()
+    }
+
+    return result.doc
+  },
+  head: ({ loaderData, params }) => {
+    const { libraryId, version, _splat: docsPath } = params
+    const library = findLibrary(libraryId)
+
+    if (!library) {
+      throw notFound()
+    }
+
+    const frameworkVariantLinks = (loaderData?.frameworks ?? []).map(
+      (framework) => ({
+        rel: 'alternate',
+        type: 'text/markdown',
+        href: `/${libraryId}/${version}/docs/${docsPath}.md?framework=${framework}`,
+      }),
+    )
+
+    return {
+      meta: seo({
+        title: `${loaderData?.title} | ${library.name} Docs`,
+        description: loaderData?.description,
+        keywords: loaderData?.keywords,
+        image: ogImageUrl(library.id, {
+          title: loaderData?.title,
+          description: loaderData?.description,
+        }),
+        noindex: library.visible === false,
+      }),
+      links: frameworkVariantLinks,
+    }
+  },
+  component: Docs,
+  headers: ({ params }) => {
+    const { version, libraryId } = params
+
+    return getDocsCacheHeaders({ libraryId, version })
+  },
+})
+
+function Docs() {
+  const { version, libraryId, _splat } = Route.useParams()
+  const { content, filePath, title } = Route.useLoaderData()
+  const versionMatch = useMatch({ from: '/_library/$libraryId/$version' })
+  const config = versionMatch.loaderData?.config
+  const library = getLibrary(libraryId)
+  const branch = getBranch(library, version)
+  const location = useLocation()
+
+  return (
+    <DocContainer>
+      <Doc
+        title={title}
+        content={content}
+        repo={library.repo}
+        branch={branch}
+        filePath={filePath}
+        colorFrom={library.colorFrom}
+        colorTo={library.colorTo}
+        textColor={library.textColor}
+        shouldRenderToc
+        libraryId={libraryId}
+        libraryVersion={version === 'latest' ? library.latestVersion : version}
+        pagePath={location.pathname}
+        config={config}
+      />
+    </DocContainer>
+  )
+}
diff --git a/src/routes/_library/$libraryId/$version.docs.blog.tsx b/src/routes/_library/$libraryId/$version.docs.blog.tsx
new file mode 100644
index 000000000..36a1c0fa9
--- /dev/null
+++ b/src/routes/_library/$libraryId/$version.docs.blog.tsx
@@ -0,0 +1,116 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import * as v from 'valibot'
+import { ArrowLeft } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { DocContainer } from '~/components/DocContainer'
+import { DocTitle } from '~/components/DocTitle'
+import { BlogCard } from '~/components/BlogCard'
+import { BlogAuthorFilter } from '~/components/BlogAuthorFilter'
+import { getLibrary, type LibraryId } from '~/libraries'
+import { fetchPostsForLibrary } from '~/utils/blog.functions'
+import { getDistinctAuthors } from '~/utils/blog-format'
+
+const searchSchema = v.object({
+  author: v.fallback(v.optional(v.string()), undefined),
+})
+
+export const Route = createFileRoute('/_library/$libraryId/$version/docs/blog')(
+  {
+    staleTime: Infinity,
+    validateSearch: searchSchema,
+    loader: ({ params }) => fetchPostsForLibrary({ data: params.libraryId }),
+    component: RouteComponent,
+  },
+)
+
+function RouteComponent() {
+  const { libraryId } = Route.useParams()
+  const { author } = Route.useSearch()
+  const navigate = Route.useNavigate()
+  const library = getLibrary(libraryId as LibraryId)
+
+  const posts = Route.useLoaderData()
+  const authors = getDistinctAuthors(posts)
+
+  const filteredPosts = author
+    ? posts.filter((post) => post.authors.includes(author))
+    : posts
+
+  return (
+    <DocContainer>
+      <div
+        className={twMerge(
+          'w-full flex bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[1200px]',
+        )}
+      >
+        <div
+          className={twMerge('flex overflow-auto flex-col w-full p-4 lg:p-6')}
+        >
+          <Link
+            to="/blog"
+            className="inline-flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors mb-4"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to all posts
+          </Link>
+
+          <DocTitle>{library.name} Blog</DocTitle>
+          <p className="text-gray-600 dark:text-gray-400 mt-2">
+            Posts about {library.name}.
+          </p>
+
+          {authors.length > 0 ? (
+            <div className="flex flex-wrap items-center gap-3 mt-6">
+              <label
+                htmlFor="docs-blog-author-filter"
+                className="text-sm font-medium text-gray-600 dark:text-gray-400"
+              >
+                Author
+              </label>
+              <div id="docs-blog-author-filter" className="w-64 max-w-full">
+                <BlogAuthorFilter
+                  authors={authors}
+                  selected={author}
+                  onSelect={(nextAuthor) =>
+                    navigate({
+                      search: () => ({ author: nextAuthor }),
+                      replace: true,
+                    })
+                  }
+                />
+              </div>
+            </div>
+          ) : null}
+
+          <section className="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-8">
+            {filteredPosts.map((post) => (
+              <BlogCard
+                key={post.slug}
+                post={{
+                  slug: post.slug,
+                  title: post.title,
+                  published: post.published,
+                  excerpt: post.excerpt,
+                  headerImage: post.headerImage,
+                  authors: post.authors,
+                  library: post.library,
+                }}
+                showLibraryBadges={false}
+              />
+            ))}
+          </section>
+
+          {filteredPosts.length === 0 ? (
+            <div className="text-center text-gray-600 dark:text-gray-400 py-12">
+              {posts.length === 0
+                ? `No blog posts yet for ${library.name}.`
+                : `No posts found${author ? ` by ${author}` : ''}.`}
+            </div>
+          ) : null}
+
+          <div className="h-12" />
+        </div>
+      </div>
+    </DocContainer>
+  )
+}
diff --git a/src/routes/$libraryId/$version.docs.community-resources.tsx b/src/routes/_library/$libraryId/$version.docs.community-resources.tsx
similarity index 62%
rename from src/routes/$libraryId/$version.docs.community-resources.tsx
rename to src/routes/_library/$libraryId/$version.docs.community-resources.tsx
index e63aff0ba..f02529eb6 100644
--- a/src/routes/$libraryId/$version.docs.community-resources.tsx
+++ b/src/routes/_library/$libraryId/$version.docs.community-resources.tsx
@@ -1,20 +1,24 @@
 import { createFileRoute } from '@tanstack/react-router'
+import * as v from 'valibot'
 import { twMerge } from 'tailwind-merge'
 import { DocContainer } from '~/components/DocContainer'
 import { DocTitle } from '~/components/DocTitle'
 import { findLibrary, getBranch, getLibrary } from '~/libraries'
 import { seo } from '~/utils/seo'
+import { ogImageUrl } from '~/utils/og'
 import { loadDocs } from '~/utils/docs'
+import { getDocsCacheHeaders } from '~/utils/docs-cache-headers'
+import { isSafeHttpUrl } from '~/utils/url-boundary'
 
 export const Route = createFileRoute(
-  '/$libraryId/$version/docs/community-resources',
+  '/_library/$libraryId/$version/docs/community-resources',
 )({
   staleTime: 1000 * 60 * 5,
   loader: async (ctx) => {
     const { libraryId, version } = ctx.params
     const library = findLibrary(libraryId)
 
-    if (!library) return { doc: null as null | any }
+    if (!library) return { doc: null }
 
     const root = library.docsRoot || 'docs'
 
@@ -22,12 +26,13 @@ export const Route = createFileRoute(
       const doc = await loadDocs({
         repo: library.repo,
         branch: getBranch(library, version),
-        docsPath: `${root}/community-resources`,
+        docsRoot: root,
+        docsPath: 'community-resources',
       })
 
       return { doc }
     } catch {
-      return { doc: null as null | any }
+      return { doc: null }
     }
   },
   head: ({ params }) => {
@@ -36,19 +41,38 @@ export const Route = createFileRoute(
       meta: seo({
         title: `${library.name} Community Resources`,
         description: `A collection of community resources for ${library.name}.`,
+        image: ogImageUrl(library.id, {
+          title: `${library.name} · Community Resources`,
+        }),
         noindex: library.visible === false,
       }),
     }
   },
+  headers: ({ params }) => {
+    const { libraryId, version } = params
+
+    return getDocsCacheHeaders({ libraryId, version })
+  },
   component: RouteComponent,
 })
 
 type ResourceType = 'article' | 'media' | 'utility' | 'other'
 
-type Resource = {
-  title: string
-  description: string
-  url: string
+const resourceSchema = v.object({
+  title: v.pipe(v.string(), v.minLength(1), v.maxLength(120)),
+  description: v.pipe(v.string(), v.maxLength(500)),
+  url: v.pipe(
+    v.string(),
+    v.maxLength(2048),
+    v.check((url) => isSafeHttpUrl(url), 'invalid resource URL'),
+  ),
+})
+
+type Resource = v.InferOutput<typeof resourceSchema>
+
+function readResources(value: unknown): Array<Resource> {
+  const result = v.safeParse(v.array(resourceSchema), value)
+  return result.success ? result.output.slice(0, 50) : []
 }
 
 function RouteComponent() {
@@ -56,6 +80,10 @@ function RouteComponent() {
   const library = getLibrary(libraryId)
   const data = Route.useLoaderData()
   const frontmatter = data.doc?.frontmatter
+  const articles = readResources(frontmatter?.articles)
+  const media = readResources(frontmatter?.media)
+  const utilities = readResources(frontmatter?.utilities)
+  const others = readResources(frontmatter?.others)
 
   return (
     <DocContainer>
@@ -74,7 +102,7 @@ function RouteComponent() {
             Discover resources created by the <strong>{library.name}</strong>{' '}
             community. Have something to share?{' '}
             <a
-              href={`https://github.com/${libraryId}/edit/main/docs/community-resources.md`}
+              href={`https://github.com/${library.repo}/edit/main/docs/community-resources.md`}
               target="_blank"
               rel="noopener noreferrer"
               className="underline"
@@ -83,23 +111,17 @@ function RouteComponent() {
             </a>{' '}
             to contribute to this list.
           </span>
-          {frontmatter?.articles && (
-            <CommunitySection
-              type="article"
-              resources={frontmatter?.articles}
-            />
+          {articles.length > 0 && (
+            <CommunitySection type="article" resources={articles} />
           )}
-          {frontmatter?.media && (
-            <CommunitySection type="media" resources={frontmatter?.media} />
+          {media.length > 0 && (
+            <CommunitySection type="media" resources={media} />
           )}
-          {frontmatter?.utilities && (
-            <CommunitySection
-              type="utility"
-              resources={frontmatter?.utilities}
-            />
+          {utilities.length > 0 && (
+            <CommunitySection type="utility" resources={utilities} />
           )}
-          {frontmatter?.others && (
-            <CommunitySection type="other" resources={frontmatter?.others} />
+          {others.length > 0 && (
+            <CommunitySection type="other" resources={others} />
           )}
         </div>
       </div>
@@ -122,6 +144,8 @@ function CommunitySection({
           <a
             key={res.url}
             href={res.url}
+            target="_blank"
+            rel="noopener noreferrer"
             className="flex flex-wrap items-center space-y-2 dark:text-gray-500 p-3 cursor-pointer bg-white dark:bg-white/5 rounded-lg overflow-hidden shadow-lg hover:bg-gray-100 dark:hover:bg-white/10 transition-colors border border-1 border-gray-200 dark:border-gray-700"
           >
             <span className="text-base font-bold text-gray-800 dark:text-white truncate">
@@ -129,7 +153,7 @@ function CommunitySection({
             </span>
             <div className="h-2" />
             <div className="h-px bg-gray-500 opacity-20 w-full" />
-            <p className="text-sm dark:text-gray-400 text-gray-50 line-clamp-3 w-full h-14">
+            <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-3 w-full h-14">
               {res.description}
             </p>
           </a>
diff --git a/src/routes/$libraryId/$version.docs.contributors.tsx b/src/routes/_library/$libraryId/$version.docs.contributors.tsx
similarity index 98%
rename from src/routes/$libraryId/$version.docs.contributors.tsx
rename to src/routes/_library/$libraryId/$version.docs.contributors.tsx
index 0d9b4b035..7cf90e77a 100644
--- a/src/routes/$libraryId/$version.docs.contributors.tsx
+++ b/src/routes/_library/$libraryId/$version.docs.contributors.tsx
@@ -13,7 +13,9 @@ import {
 import { useState } from 'react'
 import { Grid2X2, Grid3X3, LayoutList } from 'lucide-react'
 
-export const Route = createFileRoute('/$libraryId/$version/docs/contributors')({
+export const Route = createFileRoute(
+  '/_library/$libraryId/$version/docs/contributors',
+)({
   component: RouteComponent,
 })
 
diff --git a/src/routes/$libraryId/$version.docs.framework.$framework.$.tsx b/src/routes/_library/$libraryId/$version.docs.framework.$framework.$.tsx
similarity index 50%
rename from src/routes/$libraryId/$version.docs.framework.$framework.$.tsx
rename to src/routes/_library/$libraryId/$version.docs.framework.$framework.$.tsx
index f7e21d45b..8ddb1b8ac 100644
--- a/src/routes/$libraryId/$version.docs.framework.$framework.$.tsx
+++ b/src/routes/_library/$libraryId/$version.docs.framework.$framework.$.tsx
@@ -1,51 +1,68 @@
 import {
-  isNotFound,
   redirect,
   useLocation,
   useMatch,
   createFileRoute,
 } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
+import { ogImageUrl } from '~/utils/og'
 import { Doc } from '~/components/Doc'
-import { loadDocs } from '~/utils/docs'
+import { buildDocsRedirectHref, loadDocsRoute } from '~/utils/docs'
 import { getBranch, getLibrary } from '~/libraries'
 import { capitalize } from '~/utils/utils'
 import { DocContainer } from '~/components/DocContainer'
+import { getDocsCacheHeaders } from '~/utils/docs-cache-headers'
 
 export const Route = createFileRoute(
-  '/$libraryId/$version/docs/framework/$framework/$',
+  '/_library/$libraryId/$version/docs/framework/$framework/$',
 )({
   staleTime: 1000 * 60 * 5,
   loader: async (ctx) => {
     const { _splat: docsPath, framework, version, libraryId } = ctx.params
 
     const library = getLibrary(libraryId)
+    const branch = getBranch(library, version)
+    const docsRoot = library.docsRoot || 'docs'
+    const requestedDocsPath = `framework/${framework}/${docsPath ?? ''}`
+    const result = await loadDocsRoute({
+      repo: library.repo,
+      branch,
+      docsRoot,
+      docsPath: requestedDocsPath,
+      defaultDocs: library.defaultDocs ?? 'overview',
+      frameworks: library.frameworks,
+      redirectFromPaths: docsPath
+        ? [requestedDocsPath, `${framework}/${docsPath}`]
+        : [requestedDocsPath],
+    })
 
-    try {
-      return await loadDocs({
-        repo: library.repo,
-        branch: getBranch(library, version),
-        docsPath: `${
-          library.docsRoot || 'docs'
-        }/framework/${framework}/${docsPath}`,
+    if (result.type === 'redirect') {
+      throw redirect({
+        href: buildDocsRedirectHref({
+          baseHref: ctx.location.href,
+          docsPath: result.docsPath,
+          libraryId,
+          version,
+        }),
+        statusCode: 308,
       })
-    } catch (error) {
-      // If doc not found, redirect to framework docs root instead of showing 404
-      // This handles cases like switching frameworks where the same doc path doesn't exist
-      // Check both isNotFound() and the serialized form from server functions
-      const isNotFoundError =
-        isNotFound(error) ||
-        (error && typeof error === 'object' && 'isNotFound' in error)
-      if (isNotFoundError) {
-        throw redirect({
-          to: '/$libraryId/$version/docs/framework/$framework',
-          params: { libraryId, version, framework },
-        })
-      }
-      throw error
     }
+
+    if (result.type === 'not-found') {
+      throw redirect({
+        to: '/$libraryId/$version/docs/framework/$framework',
+        params: { libraryId, version, framework },
+      })
+    }
+
+    return result.doc
   },
   component: Docs,
+  headers: ({ params }) => {
+    const { libraryId, version } = params
+
+    return getDocsCacheHeaders({ libraryId, version })
+  },
   head: (ctx) => {
     const library = getLibrary(ctx.params.libraryId)
     const tail = `${library.name} ${capitalize(ctx.params.framework)} Docs`
@@ -56,6 +73,11 @@ export const Route = createFileRoute(
           ? `${ctx.loaderData.title} | ${tail}`
           : tail,
         description: ctx.loaderData?.description,
+        keywords: ctx.loaderData?.keywords,
+        image: ogImageUrl(library.id, {
+          title: ctx.loaderData?.title,
+          description: ctx.loaderData?.description,
+        }),
         noindex: library.visible === false,
       }),
     }
@@ -63,9 +85,9 @@ export const Route = createFileRoute(
 })
 
 function Docs() {
-  const { title, content, filePath } = Route.useLoaderData()
-  const versionMatch = useMatch({ from: '/$libraryId/$version' })
-  const { config } = versionMatch.loaderData
+  const { content, filePath, title } = Route.useLoaderData()
+  const versionMatch = useMatch({ from: '/_library/$libraryId/$version' })
+  const config = versionMatch.loaderData?.config
   const { version, libraryId, framework } = Route.useParams()
   const library = getLibrary(libraryId)
   const branch = getBranch(library, version)
diff --git a/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx b/src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx
similarity index 52%
rename from src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx
rename to src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx
index 64e3a6d0c..e22311461 100644
--- a/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx
+++ b/src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx
@@ -1,7 +1,6 @@
 import { isNotFound, notFound, createFileRoute } from '@tanstack/react-router'
 import {
   queryOptions,
-  useQuery,
   useQueryClient,
   useSuspenseQuery,
 } from '@tanstack/react-query'
@@ -14,11 +13,35 @@ import {
   getExampleStartingPath,
 } from '~/utils/sandbox'
 import { seo } from '~/utils/seo'
+import { ogImageUrl } from '~/utils/og'
 import { capitalize, slugToTitle } from '~/utils/utils'
 import * as v from 'valibot'
 import { CodeExplorer } from '~/components/CodeExplorer'
 import type { GitHubFileNode } from '~/utils/documents.server'
 import { ExternalLink } from 'lucide-react'
+import {
+  ExampleDeployDialog,
+  type DeployProvider,
+} from '~/components/ExampleDeployDialog'
+import { getDocsCacheHeaders } from '~/utils/docs-cache-headers'
+import { stackBlitzEmbedHeaders } from '~/utils/stackblitz-embed'
+import {
+  type DeploymentProviderId,
+  useDeploymentProviderPlacement,
+} from '~/utils/useDeploymentProviderPlacement'
+import { joinRepoPath } from '~/utils/repo-path'
+import {
+  getLocalStorageItem,
+  setLocalStorageItem,
+} from '~/utils/browser-storage'
+
+type ExamplePanel = 'code' | 'sandbox'
+
+const examplePanelValues: ReadonlyArray<ExamplePanel> = ['code', 'sandbox']
+
+function getExamplePanel(value: string | undefined) {
+  return examplePanelValues.find((candidate) => candidate === value)
+}
 
 const fileQueryOptions = (repo: string, branch: string, filePath: string) => {
   return queryOptions({
@@ -46,7 +69,7 @@ const repoDirApiContentsQueryOptions = (
   })
 
 export const Route = createFileRoute(
-  '/$libraryId/$version/docs/framework/$framework/examples/$',
+  '/_library/$libraryId/$version/docs/framework/$framework/examples/$',
 )({
   component: RouteComponent,
   validateSearch: v.object({
@@ -57,7 +80,19 @@ export const Route = createFileRoute(
   loader: async ({ params, context: { queryClient }, deps: { path } }) => {
     const library = getLibrary(params.libraryId)
     const branch = getBranch(library, params.version)
-    const examplePath = [params.framework, params._splat].join('/')
+    const framework = library.frameworks.find(
+      (candidate) => candidate === params.framework,
+    )
+
+    if (!framework) {
+      throw notFound()
+    }
+
+    const examplePath = [framework, params._splat].join('/')
+    const defaultStartingPath = getExampleStartingPath(
+      framework,
+      params.libraryId,
+    )
 
     // Used to tell the github contents api where to start looking for files in the target repository
     const repoStartingDirPath = `examples/${examplePath}`
@@ -71,36 +106,60 @@ export const Route = createFileRoute(
           repoStartingDirPath,
         ),
       )
+      const repoDirectoryContents = githubContents ?? null
 
       // Used to determine the starting file name for the explorer
       // It's either the selected path in the search params or a default we can derive
       // i.e. app.tsx, main.tsx, src/routes/__root.tsx, etc.
       // This value is not absolutely guaranteed to be available, so further resolution may be necessary
-      const explorerCandidateStartingFileName =
-        path ||
-        getExampleStartingPath(params.framework as Framework, params.libraryId)
+      const explorerCandidateStartingFileName = path || defaultStartingPath
 
       // Using the fetched contents, get the actual starting file-path for the explorer
       // The `explorerCandidateStartingFileName` is used for matching, but the actual file-path may differ
-      const currentPath = determineStartingFilePath(
-        githubContents,
-        explorerCandidateStartingFileName,
-        params.framework as Framework,
-        params.libraryId,
+      let currentPath = joinRepoPath(
+        repoStartingDirPath,
+        determineStartingFilePath(
+          repoDirectoryContents,
+          explorerCandidateStartingFileName,
+          framework,
+          params.libraryId,
+        ),
       )
 
-      // Now that we've resolved the starting file path, we can
-      // fetching and caching the file content for the starting file path
-      await queryClient.ensureQueryData(
-        fileQueryOptions(library.repo, branch, currentPath),
-      )
+      let currentCode: string
+
+      try {
+        currentCode = await queryClient.ensureQueryData(
+          fileQueryOptions(library.repo, branch, currentPath),
+        )
+      } catch (error) {
+        if (!path || !isRouteNotFoundError(error)) {
+          throw error
+        }
+
+        const fallbackPath = joinRepoPath(
+          repoStartingDirPath,
+          determineStartingFilePath(
+            repoDirectoryContents,
+            defaultStartingPath,
+            framework,
+            params.libraryId,
+          ),
+        )
+
+        if (fallbackPath === currentPath) {
+          throw error
+        }
+
+        currentPath = fallbackPath
+        currentCode = await queryClient.ensureQueryData(
+          fileQueryOptions(library.repo, branch, currentPath),
+        )
+      }
 
-      return { repoStartingDirPath, currentPath }
+      return { currentCode, repoStartingDirPath, currentPath }
     } catch (error) {
-      const isNotFoundError =
-        isNotFound(error) ||
-        (error && typeof error === 'object' && 'isNotFound' in error)
-      if (isNotFoundError) {
+      if (isRouteNotFoundError(error)) {
         throw notFound()
       }
       throw error
@@ -108,19 +167,31 @@ export const Route = createFileRoute(
   },
   head: ({ params }) => {
     const library = getLibrary(params.libraryId)
+    const exampleName = slugToTitle(params._splat || '')
+    const frameworkName = capitalize(params.framework)
+    const ogTitle = `${frameworkName} ${library.name} ${exampleName} Example`
+    const ogDescription = `An example showing how to implement ${exampleName} in ${frameworkName} using ${library.name}.`
 
     return {
       meta: seo({
-        title: `${capitalize(params.framework)} ${library.name} ${slugToTitle(
-          params._splat || '',
-        )} Example | ${library.name} Docs`,
-        description: `An example showing how to implement ${slugToTitle(
-          params._splat || '',
-        )} in ${capitalize(params.framework)} using ${library.name}.`,
+        title: `${ogTitle} | ${library.name} Docs`,
+        description: ogDescription,
+        image: ogImageUrl(library.id, {
+          title: ogTitle,
+          description: ogDescription,
+        }),
         noindex: library.visible === false,
       }),
     }
   },
+  headers: ({ params }) => {
+    const { libraryId, version } = params
+
+    return {
+      ...getDocsCacheHeaders({ libraryId, version }),
+      ...stackBlitzEmbedHeaders,
+    }
+  },
   staleTime: 1000 * 60 * 5, // 5 minutes
 })
 
@@ -130,41 +201,81 @@ function RouteComponent() {
 }
 
 function PageComponent() {
-  const { repoStartingDirPath, currentPath } = Route.useLoaderData()
+  const { currentCode, repoStartingDirPath, currentPath } =
+    Route.useLoaderData()
 
   const navigate = Route.useNavigate()
   const queryClient = useQueryClient()
   const { version, framework, _splat, libraryId } = Route.useParams()
   const library = getLibrary(libraryId)
   const branch = getBranch(library, version)
+  const frameworkId = library.frameworks.find(
+    (candidate) => candidate === framework,
+  )
 
-  const examplePath = [framework, _splat].join('/')
+  if (!frameworkId) {
+    throw notFound()
+  }
 
-  const mainExampleFile = getExampleStartingPath(
-    framework as Framework,
-    libraryId,
-  )
+  const examplePath = [frameworkId, _splat].join('/')
+
+  const mainExampleFile = getExampleStartingPath(frameworkId, libraryId)
 
   const { data: githubContents } = useSuspenseQuery(
     repoDirApiContentsQueryOptions(library.repo, branch, repoStartingDirPath),
   )
 
   const [isDark, setIsDark] = React.useState(true)
+  const [deployDialogOpen, setDeployDialogOpen] = React.useState(false)
+  const [deployProvider, setDeployProvider] =
+    React.useState<DeployProvider | null>(null)
+
+  const openDeployDialog = (provider: DeployProvider) => {
+    setDeployProvider(provider)
+    setDeployDialogOpen(true)
+  }
+
+  const closeDeployDialog = () => {
+    setDeployDialogOpen(false)
+    setDeployProvider(null)
+  }
+  const availableExampleDeployProviders = React.useMemo(() => {
+    const providers: Array<DeploymentProviderId> = []
+
+    if (library.showCloudflareUrl) {
+      providers.push('cloudflare')
+    }
+
+    if (library.showNetlifyUrl) {
+      providers.push('netlify')
+    }
+
+    if (library.showRailwayUrl) {
+      providers.push('railway')
+    }
+
+    return providers
+  }, [
+    library.showCloudflareUrl,
+    library.showNetlifyUrl,
+    library.showRailwayUrl,
+  ])
+  const orderedExampleDeployProviders = useDeploymentProviderPlacement({
+    availableProviders: availableExampleDeployProviders,
+    surface: `example_deploy_buttons:${library.id}:${framework}`,
+  })
 
   const activeTab = Route.useSearch({
     select: (s) => {
-      if (typeof window === 'undefined') return s.panel || 'code'
-      const localValue = localStorage.getItem('exampleViewPreference') as
-        | 'code'
-        | 'sandbox'
-        | null
-      return s.panel || localValue || 'code'
+      const panel = getExamplePanel(s.panel)
+      if (typeof window === 'undefined') return panel || 'code'
+      const localValue = getExamplePanel(
+        getLocalStorageItem('exampleViewPreference') ?? undefined,
+      )
+      return panel || localValue || 'code'
     },
   })
-  const setActiveTab = (tab: string) => {
-    if (typeof window === 'undefined') {
-      localStorage.setItem('exampleViewPreference', tab)
-    }
+  const setActiveTab = (tab: ExamplePanel) => {
     navigate({
       search: { path: undefined, panel: tab },
       replace: true,
@@ -180,29 +291,45 @@ function PageComponent() {
     })
   }
 
-  const { data: currentCode } = useQuery(
-    fileQueryOptions(library.repo, branch, currentPath),
-  )
-
   const prefetchFileContent = React.useCallback(
     (path: string) => {
-      queryClient.prefetchQuery(fileQueryOptions(library.repo, branch, path))
+      const repoFilePath = joinRepoPath(repoStartingDirPath, path)
+
+      if (repoFilePath === currentPath) {
+        return
+      }
+
+      const queryState = queryClient.getQueryState([
+        'currentCode',
+        library.repo,
+        branch,
+        repoFilePath,
+      ])
+
+      if (
+        queryState?.status === 'success' ||
+        queryState?.fetchStatus === 'fetching'
+      ) {
+        return
+      }
+
+      queryClient.prefetchQuery(
+        fileQueryOptions(library.repo, branch, repoFilePath),
+      )
     },
-    [queryClient, library.repo, branch],
+    [queryClient, library.repo, branch, repoStartingDirPath, currentPath],
   )
 
   // Update local storage when tab changes
   React.useEffect(() => {
-    localStorage.setItem('exampleViewPreference', activeTab)
+    setLocalStorageItem('exampleViewPreference', activeTab)
   }, [activeTab])
 
   React.useEffect(() => {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
-  const repoUrl = `https://github.com/${library.repo}`
   const githubUrl = `https://github.com/${library.repo}/tree/${branch}/examples/${examplePath}`
-  const githubExamplePath = `examples/${examplePath}`
 
   // preset=node can be removed once Stackblitz runs Angular as webcontainer by default
   // See https://github.com/stackblitz/core/issues/2957
@@ -218,54 +345,74 @@ function PageComponent() {
     isDark ? 'dark' : 'light'
   }&file=${mainExampleFile}`
 
+  const renderExampleDeployButton = (provider: DeploymentProviderId) => {
+    switch (provider) {
+      case 'cloudflare':
+        return (
+          <button
+            key={provider}
+            type="button"
+            onClick={() => openDeployDialog('cloudflare')}
+            className="hover:opacity-80 transition-opacity"
+          >
+            <img
+              src="https://deploy.workers.cloudflare.com/button"
+              loading="lazy"
+              alt="Deploy to Cloudflare"
+            />
+          </button>
+        )
+      case 'netlify':
+        return (
+          <button
+            key={provider}
+            type="button"
+            onClick={() => openDeployDialog('netlify')}
+            className="hover:opacity-80 transition-opacity"
+          >
+            <img
+              src="https://www.netlify.com/img/deploy/button.svg"
+              loading="lazy"
+              alt="Deploy with Netlify"
+            />
+          </button>
+        )
+      case 'railway':
+        return (
+          <button
+            key={provider}
+            type="button"
+            onClick={() => openDeployDialog('railway')}
+            className="hover:opacity-80 transition-opacity"
+          >
+            <img
+              src="https://railway.com/button.svg?utm_medium=sponsor&utm_source=oss&utm_campaign=tanstack"
+              loading="lazy"
+              alt="Deploy on Railway"
+            />
+          </button>
+        )
+    }
+  }
+
   return (
-    <div className="flex-1 flex flex-col min-h-0 overflow-auto h-[95dvh]">
+    <div className="flex-1 flex flex-col min-h-0 overflow-auto">
       <div className="p-4 lg:p-6">
         <DocTitle>
           <span>
             {capitalize(framework)} Example: {slugToTitle(_splat!)}
           </span>
           <div className="flex items-center gap-4 flex-wrap font-normal text-xs">
-            {library.showCloudflareUrl ? (
-              <a
-                href={`https://deploy.workers.cloudflare.com/?url=${githubUrl}`}
-              >
-                <img
-                  src="https://deploy.workers.cloudflare.com/button"
-                  loading="lazy"
-                  alt="Deploy to Cloudflare"
-                />
-              </a>
-            ) : null}
-            {library.showNetlifyUrl ? (
-              <a
-                href={`https://app.netlify.com/start/deploy?repository=${repoUrl}&create_from_path=${githubExamplePath}`}
-              >
-                <img
-                  src="https://www.netlify.com/img/deploy/button.svg"
-                  loading="lazy"
-                  alt="Deploy with Netlify"
-                />
-              </a>
-            ) : null}
-            {library.showVercelUrl ? (
-              <a
-                href={`https://vercel.com/new/clone?repository-url=${githubUrl}`}
-              >
-                <img
-                  src="https://vercel.com/button"
-                  loading="lazy"
-                  alt="Deploy with Vercel"
-                />
-              </a>
-            ) : null}
+            {orderedExampleDeployProviders.map((provider) =>
+              renderExampleDeployButton(provider),
+            )}
             <a
               href={githubUrl}
               target="_blank"
               className="flex gap-1 items-center"
               rel="noreferrer"
             >
-              <ExternalLink /> Github
+              <ExternalLink /> GitHub
             </a>
             {!library.hideStackblitzUrl ? (
               <a
@@ -292,9 +439,9 @@ function PageComponent() {
       </div>
       <div className="flex-1 lg:px-6 flex flex-col min-h-0">
         <CodeExplorer
-          activeTab={activeTab as 'code' | 'sandbox'}
+          activeTab={activeTab}
           codeSandboxUrl={codeSandboxUrl}
-          currentCode={currentCode || ''}
+          currentCode={currentCode}
           currentPath={currentPath}
           examplePath={examplePath}
           githubContents={githubContents || undefined}
@@ -305,6 +452,18 @@ function PageComponent() {
           stackBlitzUrl={stackBlitzUrl}
         />
       </div>
+      {deployProvider && (
+        <ExampleDeployDialog
+          isOpen={deployDialogOpen}
+          onClose={closeDeployDialog}
+          provider={deployProvider}
+          repo={library.repo}
+          branch={branch}
+          examplePath={examplePath}
+          exampleName={slugToTitle(_splat!)}
+          libraryName={library.name}
+        />
+      )}
     </div>
   )
 }
@@ -363,6 +522,13 @@ function determineStartingFilePath(
   return candidate
 }
 
+function isRouteNotFoundError(error: unknown) {
+  return (
+    isNotFound(error) ||
+    (error !== null && typeof error === 'object' && 'isNotFound' in error)
+  )
+}
+
 function recursiveFlattenGithubContents(
   nodes: Array<GitHubFileNode>,
   bannedDirs: Set<string> = new Set(),
diff --git a/src/routes/$libraryId/$version.docs.framework.$framework.index.tsx b/src/routes/_library/$libraryId/$version.docs.framework.$framework.index.tsx
similarity index 97%
rename from src/routes/$libraryId/$version.docs.framework.$framework.index.tsx
rename to src/routes/_library/$libraryId/$version.docs.framework.$framework.index.tsx
index 2293b4fe5..c3eead8ae 100644
--- a/src/routes/$libraryId/$version.docs.framework.$framework.index.tsx
+++ b/src/routes/_library/$libraryId/$version.docs.framework.$framework.index.tsx
@@ -8,7 +8,7 @@ import { DocTitle } from '~/components/DocTitle'
 import { twMerge } from 'tailwind-merge'
 
 export const Route = createFileRoute(
-  '/$libraryId/$version/docs/framework/$framework/',
+  '/_library/$libraryId/$version/docs/framework/$framework/',
 )({
   staleTime: 1000 * 60 * 5,
   loader: (ctx) => {
diff --git a/src/routes/_library/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx b/src/routes/_library/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx
new file mode 100644
index 000000000..7d28abad4
--- /dev/null
+++ b/src/routes/_library/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx
@@ -0,0 +1,95 @@
+import { findLibrary, getBranch } from '~/libraries'
+import { buildDocsMarkdownRedirectHref, loadDocsRoute } from '~/utils/docs'
+import { notFound, createFileRoute } from '@tanstack/react-router'
+import { getDocsCacheHeaders } from '~/utils/docs-cache-headers'
+import { getContentDispositionHeader } from '~/utils/http-response'
+import { filterFrameworkContent } from '~/utils/markdown/filterFrameworkContent'
+import { getPackageManager } from '~/utils/markdown/installCommand'
+
+export const Route = createFileRoute(
+  '/_library/$libraryId/$version/docs/framework/$framework/{$}.md',
+)({
+  server: {
+    handlers: {
+      GET: async ({
+        request,
+        params,
+      }: {
+        request: Request
+        params: {
+          libraryId: string
+          version: string
+          framework: string
+          _splat: string
+        }
+      }) => {
+        const url = new URL(request.url)
+        const pm = getPackageManager(url.searchParams.get('pm'))
+        const keepMarkers = url.searchParams.get('keep_markers') === 'true'
+
+        const { libraryId, version, framework, _splat: docsPath } = params
+        const library = findLibrary(libraryId)
+
+        if (!library) {
+          throw notFound()
+        }
+
+        const root = library.docsRoot || 'docs'
+        const cacheHeaders = getDocsCacheHeaders({ libraryId, version })
+        const branch = getBranch(library, version)
+        const requestedDocsPath = `framework/${framework}/${docsPath}`
+        const result = await loadDocsRoute({
+          repo: library.repo,
+          branch,
+          docsRoot: root,
+          docsPath: requestedDocsPath,
+          defaultDocs: library.defaultDocs ?? 'overview',
+          frameworks: library.frameworks,
+          redirectFromPaths: docsPath
+            ? [requestedDocsPath, `${framework}/${docsPath}`]
+            : [requestedDocsPath],
+        })
+
+        if (result.type === 'redirect') {
+          return Response.redirect(
+            buildDocsMarkdownRedirectHref({
+              requestUrl: request.url,
+              docsPath: result.docsPath,
+              libraryId,
+              version,
+            }),
+            308,
+          )
+        }
+
+        if (result.type === 'not-found') {
+          throw notFound()
+        }
+
+        const doc = result.doc
+
+        // Filter framework-specific content using framework from URL path
+        const filteredContent = filterFrameworkContent(doc.content, {
+          framework,
+          packageManager: pm,
+          keepMarkers,
+        })
+
+        const markdownContent = `# ${doc.title}\n${filteredContent}`
+        const filename = `${result.docsPath || 'file'}.md`
+
+        return new Response(markdownContent, {
+          headers: {
+            ...cacheHeaders,
+            'Content-Type': 'text/markdown',
+            'Content-Disposition': getContentDispositionHeader(
+              'inline',
+              filename,
+              'file.md',
+            ),
+          },
+        })
+      },
+    },
+  },
+})
diff --git a/src/routes/$libraryId/$version.docs.framework.index.tsx b/src/routes/_library/$libraryId/$version.docs.framework.index.tsx
similarity index 81%
rename from src/routes/$libraryId/$version.docs.framework.index.tsx
rename to src/routes/_library/$libraryId/$version.docs.framework.index.tsx
index c80825d0a..7a15e98e7 100644
--- a/src/routes/$libraryId/$version.docs.framework.index.tsx
+++ b/src/routes/_library/$libraryId/$version.docs.framework.index.tsx
@@ -8,30 +8,16 @@ import { FrameworkCard } from '~/components/FrameworkCard'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { DiscordIcon } from '~/components/icons/DiscordIcon'
 import { Card } from '~/components/Card'
+import { getFrameworkPackageName } from '~/libraries/frameworkSupport'
 
-export const Route = createFileRoute('/$libraryId/$version/docs/framework/')({
+export const Route = createFileRoute(
+  '/_library/$libraryId/$version/docs/framework/',
+)({
   component: RouteComponent,
 })
 
-function getPackageName(
-  frameworkValue: string,
-  libraryId: string,
-  library: ReturnType<typeof getLibrary>,
-): string {
-  if (frameworkValue === 'vanilla') {
-    // For vanilla, use corePackageName if provided, otherwise just libraryId
-    return library.corePackageName ?? `@tanstack/${libraryId}`
-  }
-  // Special case: Angular Query uses experimental package
-  if (frameworkValue === 'angular' && libraryId === 'query') {
-    return `@tanstack/angular-query-experimental`
-  }
-  // For other frameworks, use {framework}-{libraryId} pattern (e.g., @tanstack/react-table)
-  return `@tanstack/${frameworkValue}-${libraryId}`
-}
-
 function RouteComponent() {
-  const { libraryId } = Route.useParams()
+  const { libraryId, version } = Route.useParams()
   const library = getLibrary(libraryId)
 
   const frameworks = getFrameworkOptions(library.frameworks)
@@ -58,7 +44,7 @@ function RouteComponent() {
             )}
           >
             {frameworks.map((framework, i) => {
-              const packageName = getPackageName(
+              const packageName = getFrameworkPackageName(
                 framework.value,
                 libraryId,
                 library,
@@ -68,6 +54,7 @@ function RouteComponent() {
                   key={framework.value}
                   framework={framework}
                   libraryId={libraryId}
+                  version={version}
                   packageName={packageName}
                   index={i}
                   library={library}
diff --git a/src/routes/$libraryId/$version.docs.index.tsx b/src/routes/_library/$libraryId/$version.docs.index.tsx
similarity index 84%
rename from src/routes/$libraryId/$version.docs.index.tsx
rename to src/routes/_library/$libraryId/$version.docs.index.tsx
index e9e56fb24..58e5970d2 100644
--- a/src/routes/$libraryId/$version.docs.index.tsx
+++ b/src/routes/_library/$libraryId/$version.docs.index.tsx
@@ -1,7 +1,7 @@
 import { redirect, createFileRoute } from '@tanstack/react-router'
 import { getLibrary } from '~/libraries'
 
-export const Route = createFileRoute('/$libraryId/$version/docs/')({
+export const Route = createFileRoute('/_library/$libraryId/$version/docs/')({
   beforeLoad: (ctx) => {
     const { libraryId } = ctx.params
     const library = getLibrary(libraryId)
diff --git a/src/routes/_library/$libraryId/$version.docs.index[.]md.ts b/src/routes/_library/$libraryId/$version.docs.index[.]md.ts
new file mode 100644
index 000000000..399d4b4ae
--- /dev/null
+++ b/src/routes/_library/$libraryId/$version.docs.index[.]md.ts
@@ -0,0 +1,54 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+import { findLibrary, getBranch } from '~/libraries'
+import { getTanstackDocsConfig } from '~/utils/config'
+import { getDocsCacheHeaders } from '~/utils/docs-cache-headers'
+import { getContentDispositionHeader } from '~/utils/http-response'
+import { generateLibraryDocsIndexMarkdown } from '~/utils/llms'
+
+export const Route = createFileRoute(
+  '/_library/$libraryId/$version/docs/index.md',
+)({
+  server: {
+    handlers: {
+      GET: async ({
+        params,
+      }: {
+        params: { libraryId: string; version: string }
+      }) => {
+        const { libraryId, version } = params
+        const library = findLibrary(libraryId)
+
+        if (!library) {
+          throw notFound()
+        }
+
+        const docsRoot = library.docsRoot || 'docs'
+        const config = await getTanstackDocsConfig({
+          data: {
+            repo: library.repo,
+            branch: getBranch(library, version),
+            docsRoot,
+          },
+        })
+
+        return new Response(
+          generateLibraryDocsIndexMarkdown({
+            config,
+            library,
+            version,
+          }),
+          {
+            headers: {
+              ...getDocsCacheHeaders({ libraryId, version }),
+              'Content-Type': 'text/markdown; charset=utf-8',
+              'Content-Disposition': getContentDispositionHeader(
+                'inline',
+                'index.md',
+              ),
+            },
+          },
+        )
+      },
+    },
+  },
+})
diff --git a/src/routes/_library/$libraryId/$version.docs.npm-stats.tsx b/src/routes/_library/$libraryId/$version.docs.npm-stats.tsx
new file mode 100644
index 000000000..e3255194e
--- /dev/null
+++ b/src/routes/_library/$libraryId/$version.docs.npm-stats.tsx
@@ -0,0 +1,961 @@
+import * as React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import * as v from 'valibot'
+import { useThrottledCallback, useThrottler } from '@tanstack/react-pacer'
+import { Plus } from 'lucide-react'
+import { useQuery } from '@tanstack/react-query'
+import { twMerge } from 'tailwind-merge'
+
+import { getLibrary } from '~/libraries'
+import { DocContainer } from '~/components/DocContainer'
+import { Tooltip } from '~/components/Tooltip'
+import { Spinner } from '~/components/Spinner'
+import { BaselineSection } from '~/components/npm-stats/BaselineSection'
+import { ChartControls } from '~/components/npm-stats/ChartControls'
+import { ColorPickerPopover } from '~/components/npm-stats/ColorPickerPopover'
+import { DisabledChartActions } from '~/components/npm-stats/DisabledChartActions'
+import { NPMSummary } from '~/components/npm-stats/NPMSummary'
+import { PackagePills } from '~/components/npm-stats/PackagePills'
+import { PackageSearch } from '~/components/npm-stats/PackageSearch'
+import {
+  Resizable,
+  type ResizableSizeChange,
+  type ResizeChangeOptions,
+} from '~/components/npm-stats/Resizable'
+import { StatsTable } from '~/components/npm-stats/StatsTable'
+import { LatestBucketNavigator } from '~/components/npm-stats/LatestBucketNavigator'
+import {
+  npmQueryOptions,
+  selectLatestBucketQueryData,
+} from '~/components/npm-stats/npmQueryOptions'
+import { getLatestBucketOffsetBounds } from '~/components/npm-stats/binning'
+import {
+  barOrientationSchema,
+  chartTypeSchema,
+  defaultRangeBinTypes,
+  defaultPlaybackIntervalMs,
+  getDefaultChartTypeForViewMode,
+  getPackageColor,
+  isChartTypeValidForViewMode,
+  latestBarSortSchema,
+  playbackIntervalMsSchema,
+  viewModeSchema,
+  type BarOrientation,
+  type BinType,
+  type ChartType,
+  type LatestBarSort,
+  type PackageGroup,
+  type ShowDataMode,
+  type TimeRange,
+  type TransformMode,
+  type ViewMode,
+} from '~/components/npm-stats/shared'
+import {
+  getLibraryNpmPackages,
+  getAvailableFrameworkAdapters,
+  getAvailableCompetitors,
+  frameworkMeta,
+  defaultColors,
+} from '~/utils/npm-packages'
+import {
+  getBaselinePresets,
+  packageGroupsSchema,
+  type BaselinePreset,
+} from '~/routes/stats/npm/-comparisons'
+import { chartHeightSchema, chartWidthSchema } from '~/utils/schemas'
+
+const LazyNPMStatsChart = React.lazy(() =>
+  import('~/components/npm-stats/NPMStatsChart').then((m) => ({
+    default: m.NPMStatsChart,
+  })),
+)
+
+function ChartFallback({ height }: { height: number }) {
+  return (
+    <div
+      className="animate-pulse rounded bg-gray-100 dark:bg-gray-800/40"
+      style={{ height }}
+    />
+  )
+}
+
+const transformModeSchema = v.picklist(['none', 'normalize-y'])
+const binTypeSchema = v.picklist(['yearly', 'monthly', 'weekly', 'daily'])
+const showDataModeSchema = v.picklist(['all', 'complete'])
+const bucketOffsetSchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(-5000),
+  v.maxValue(0),
+)
+const timelineZoomTimeSchema = v.pipe(v.number(), v.integer(), v.minValue(0))
+
+export const Route = createFileRoute(
+  '/_library/$libraryId/$version/docs/npm-stats',
+)({
+  validateSearch: v.object({
+    packageGroups: v.fallback(v.optional(packageGroupsSchema), undefined),
+    range: v.fallback(
+      v.optional(
+        v.picklist([
+          '7-days',
+          '30-days',
+          '90-days',
+          '180-days',
+          '365-days',
+          '730-days',
+          '1825-days',
+          'all-time',
+        ]),
+        '365-days',
+      ),
+      '365-days',
+    ),
+    transform: v.fallback(v.optional(transformModeSchema, 'none'), 'none'),
+    binType: v.fallback(v.optional(binTypeSchema, 'weekly'), 'weekly'),
+    viewMode: v.fallback(v.optional(viewModeSchema, 'history'), 'history'),
+    chartType: v.fallback(v.optional(chartTypeSchema, 'line'), 'line'),
+    barOrientation: v.fallback(v.optional(barOrientationSchema), undefined),
+    barSort: v.fallback(v.optional(latestBarSortSchema, 'value'), 'value'),
+    bucketOffset: v.fallback(v.optional(bucketOffsetSchema, 0), 0),
+    playbackIntervalMs: v.fallback(
+      v.optional(playbackIntervalMsSchema, defaultPlaybackIntervalMs),
+      defaultPlaybackIntervalMs,
+    ),
+    playbackLoop: v.fallback(v.optional(v.boolean(), false), false),
+    playbackPlaying: v.fallback(v.optional(v.boolean(), false), false),
+    showDataMode: v.fallback(v.optional(showDataModeSchema, 'all'), 'all'),
+    normalizeBaseline: v.fallback(v.optional(v.boolean(), true), true),
+    showBaseline: v.fallback(v.optional(v.boolean(), false), false),
+    height: v.fallback(v.optional(chartHeightSchema, 400), 400),
+    width: v.fallback(v.optional(chartWidthSchema), undefined),
+    timelineStart: v.fallback(v.optional(timelineZoomTimeSchema), undefined),
+    timelineEnd: v.fallback(v.optional(timelineZoomTimeSchema), undefined),
+  }),
+  component: RouteComponent,
+  staticData: {
+    includeSearchInCanonical: true,
+  },
+})
+
+type NpmStatsSearch = {
+  packageGroups?: PackageGroup[]
+  range?: TimeRange
+  transform?: TransformMode
+  binType?: BinType
+  viewMode?: ViewMode
+  chartType?: ChartType
+  barOrientation?: BarOrientation
+  barSort?: LatestBarSort
+  bucketOffset?: number
+  playbackIntervalMs?: number
+  playbackLoop?: boolean
+  playbackPlaying?: boolean
+  showDataMode?: ShowDataMode
+  normalizeBaseline?: boolean
+  showBaseline?: boolean
+  height?: number
+  width?: number
+  timelineStart?: number
+  timelineEnd?: number
+}
+
+function RouteComponent() {
+  const { libraryId } = Route.useParams()
+  const library = getLibrary(libraryId)
+  const search = Route.useSearch()
+  const navigate = Route.useNavigate()
+
+  // Get library-specific packages (without competitors - they're shown as suggestions)
+  const libraryPackages = getLibraryNpmPackages(library)
+
+  // Use search params or default to library packages
+  const packageGroups: PackageGroup[] = search.packageGroups ?? libraryPackages
+  const range: TimeRange = search.range ?? '365-days'
+  const transform: TransformMode = search.transform ?? 'none'
+  const binTypeParam: BinType | undefined = search.binType
+  const viewMode: ViewMode = search.viewMode ?? 'history'
+  const chartTypeParam: ChartType = search.chartType ?? 'line'
+  const barOrientationParam: BarOrientation =
+    search.barOrientation ??
+    (chartTypeParam === 'horizontal-bar' ? 'horizontal' : 'vertical')
+  const barSort: LatestBarSort = search.barSort ?? 'value'
+  const showDataModeParam: ShowDataMode = search.showDataMode ?? 'all'
+  const normalizeBaseline: boolean = search.normalizeBaseline ?? true
+  const showBaseline: boolean = search.showBaseline ?? false
+  const bucketOffsetParam: number = search.bucketOffset ?? 0
+  const playbackIntervalMs: number =
+    search.playbackIntervalMs ?? defaultPlaybackIntervalMs
+  const playbackLoop: boolean = search.playbackLoop ?? false
+  const playbackPlaying: boolean = search.playbackPlaying ?? false
+  const height: number = search.height ?? 400
+  const width: number | undefined = search.width
+  const timelineStart: number | undefined = search.timelineStart
+  const timelineEnd: number | undefined = search.timelineEnd
+
+  const binType: BinType = binTypeParam ?? defaultRangeBinTypes[range]
+  const chartType = isChartTypeValidForViewMode(viewMode, chartTypeParam)
+    ? chartTypeParam
+    : getDefaultChartTypeForViewMode(viewMode)
+  const barOrientation: BarOrientation =
+    viewMode === 'latest' &&
+    (chartType === 'bar' || chartType === 'stacked-bar')
+      ? barOrientationParam
+      : 'vertical'
+  const latestBucketBounds = getLatestBucketOffsetBounds({ binType, range })
+  const bucketOffset = Math.max(
+    latestBucketBounds.minOffset,
+    Math.min(bucketOffsetParam, latestBucketBounds.maxOffset),
+  )
+  const queryPackageGroupEntries = packageGroups
+    .map((packageGroup, index) => ({ packageGroup, index }))
+    .filter(
+      ({ packageGroup }) => viewMode === 'history' || !packageGroup.baseline,
+    )
+  const queryPackageGroups = queryPackageGroupEntries.map(
+    ({ packageGroup }) => packageGroup,
+  )
+  const queryPackageGroupIndexes = queryPackageGroupEntries.map(
+    ({ index }) => index,
+  )
+  const tableTransform: TransformMode =
+    viewMode === 'history' && chartType === 'line' ? transform : 'none'
+  const canToggleShowBaseline = viewMode === 'history' && chartType === 'line'
+
+  const [colorPickerPackage, setColorPickerPackage] = React.useState<
+    string | null
+  >(null)
+  const [colorPickerPosition, setColorPickerPosition] = React.useState<{
+    x: number
+    y: number
+  } | null>(null)
+  const [openMenuPackage, setOpenMenuPackage] = React.useState<string | null>(
+    null,
+  )
+  const [chartActionsContainer, setChartActionsContainer] =
+    React.useState<HTMLDivElement | null>(null)
+  const [chartActionsMounted, setChartActionsMounted] = React.useState(false)
+
+  const npmQuery = useQuery(
+    npmQueryOptions({
+      packageGroups: queryPackageGroups,
+      range,
+      viewMode,
+      binType,
+      bucketOffset,
+    }),
+  )
+  const displayQueryData = React.useMemo(
+    () =>
+      viewMode === 'latest'
+        ? selectLatestBucketQueryData({
+            queryData: npmQuery.data,
+            binType,
+            bucketOffset,
+          })
+        : npmQuery.data,
+    [binType, bucketOffset, npmQuery.data, viewMode],
+  )
+  const packagePillQueryData = (() => {
+    if (viewMode === 'history') return npmQuery.data
+
+    let queryIndex = 0
+    return packageGroups.map((packageGroup) => {
+      if (packageGroup.baseline) return undefined
+
+      const queryData = npmQuery.data?.[queryIndex]
+      queryIndex++
+      return queryData
+    })
+  })()
+
+  const handleRangeChange = (newRange: TimeRange) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        range: newRange,
+        binType: defaultRangeBinTypes[newRange],
+        bucketOffset: 0,
+        playbackPlaying: false,
+        timelineStart: undefined,
+        timelineEnd: undefined,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleBinnedChange = (value: BinType) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        binType: value,
+        bucketOffset: 0,
+        playbackPlaying: false,
+        timelineStart: undefined,
+        timelineEnd: undefined,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleViewModeChange = (mode: ViewMode) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        viewMode: mode,
+        chartType: isChartTypeValidForViewMode(mode, chartType)
+          ? chartType
+          : getDefaultChartTypeForViewMode(mode),
+        transform: mode === 'latest' ? 'none' : prev.transform,
+        barOrientation,
+        showBaseline: mode === 'latest' ? false : prev.showBaseline,
+        playbackPlaying: mode === 'latest' ? prev.playbackPlaying : false,
+        bucketOffset: 0,
+        timelineStart: undefined,
+        timelineEnd: undefined,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleChartTypeChange = (nextChartType: ChartType) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        chartType: nextChartType,
+        barOrientation,
+        transform: nextChartType === 'line' ? prev.transform : 'none',
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleBarSortChange = (nextBarSort: LatestBarSort) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        barSort: nextBarSort,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleBarOrientationChange = (nextBarOrientation: BarOrientation) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        barOrientation: nextBarOrientation,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleBucketOffsetChange = (nextBucketOffset: number) => {
+    const nextOffset = Math.max(
+      latestBucketBounds.minOffset,
+      Math.min(nextBucketOffset, latestBucketBounds.maxOffset),
+    )
+
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        bucketOffset: nextOffset,
+      }),
+      replace: true,
+      resetScroll: false,
+    })
+  }
+
+  const handlePlaybackIntervalChange = (nextPlaybackIntervalMs: number) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        playbackIntervalMs: nextPlaybackIntervalMs,
+      }),
+      replace: true,
+      resetScroll: false,
+    })
+  }
+
+  const handlePlaybackLoopChange = (nextPlaybackLoop: boolean) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        playbackLoop: nextPlaybackLoop,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handlePlaybackPlayingChange = (nextPlaybackPlaying: boolean) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        playbackPlaying: nextPlaybackPlaying,
+      }),
+      replace: true,
+      resetScroll: false,
+    })
+  }
+
+  const handleTransformChange = (mode: TransformMode) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        transform: mode,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleShowDataModeChange = (mode: ShowDataMode) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        showDataMode: mode,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleTimelineRangeChange = React.useCallback(
+    (nextRange: { end: number | undefined; start: number | undefined }) => {
+      navigate({
+        to: '.',
+        search: (prev: NpmStatsSearch) => ({
+          ...prev,
+          timelineStart: nextRange.start,
+          timelineEnd: nextRange.end,
+        }),
+        replace: true,
+        resetScroll: false,
+      })
+    },
+    [navigate],
+  )
+
+  const togglePackageVisibility = (index: number, packageName: string) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        packageGroups: prev.packageGroups?.map((pkg, i) =>
+          i === index
+            ? pkg.label === packageName
+              ? { ...pkg, hidden: !pkg.hidden }
+              : {
+                  ...pkg,
+                  packages: pkg.packages.map((p) =>
+                    p.name === packageName ? { ...p, hidden: !p.hidden } : p,
+                  ),
+                }
+            : pkg,
+        ),
+      }),
+      replace: true,
+      resetScroll: false,
+    })
+  }
+
+  const handleRemovePackageName = (packageGroupIndex: number) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        packageGroups: prev.packageGroups?.filter(
+          (_, i: number) => i !== packageGroupIndex,
+        ),
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleLabelChange = (packageGroupIndex: number, label: string) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => {
+        const nextLabel = label.slice(0, 80)
+        const hasNextLabel = nextLabel.trim().length > 0
+        const groups = prev.packageGroups ?? packageGroups
+
+        return {
+          ...prev,
+          packageGroups: groups.map((pkg, i) => {
+            if (i !== packageGroupIndex) return pkg
+
+            const nextPackageGroup = { ...pkg }
+            if (hasNextLabel) {
+              nextPackageGroup.label = nextLabel
+            } else {
+              delete nextPackageGroup.label
+              delete nextPackageGroup.hidden
+            }
+
+            return nextPackageGroup
+          }),
+        }
+      },
+      replace: true,
+      resetScroll: false,
+    })
+  }
+
+  const handleAddPackage = (packageName: string, color?: string) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => {
+        // Get the next default color based on existing package count
+        const existingCount = (prev.packageGroups ?? packageGroups).length
+        const nextColor =
+          color ?? defaultColors[existingCount % defaultColors.length]
+
+        return {
+          ...prev,
+          packageGroups: [
+            ...(prev.packageGroups ?? packageGroups),
+            { packages: [{ name: packageName }], color: nextColor },
+          ],
+        }
+      },
+      resetScroll: false,
+    })
+  }
+
+  // Get available framework adapters that aren't already in the chart
+  const availableAdapters = getAvailableFrameworkAdapters(
+    library,
+    packageGroups,
+  )
+
+  // Get available competitor packages that aren't already in the chart
+  const availableCompetitors = getAvailableCompetitors(library, packageGroups)
+
+  const handleAddBaseline = (packageName: string, color?: string) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => {
+        const groups = prev.packageGroups ?? packageGroups
+        const alreadyBaseline = groups.some(
+          (pg) =>
+            pg.baseline && pg.packages.some((p) => p.name === packageName),
+        )
+        if (alreadyBaseline) return prev
+        return {
+          ...prev,
+          packageGroups: [
+            ...groups,
+            {
+              packages: [{ name: packageName, hidden: true }],
+              color,
+              baseline: true,
+            },
+          ],
+        }
+      },
+      resetScroll: false,
+    })
+  }
+
+  const handleApplyBaselinePreset = (preset: BaselinePreset) => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => {
+        const nonBaseline = (prev.packageGroups ?? packageGroups).filter(
+          (pg) => !pg.baseline,
+        )
+        return {
+          ...prev,
+          bucketOffset: 0,
+          playbackPlaying: false,
+          packageGroups: [
+            ...nonBaseline,
+            ...preset.packages.map((p) => ({
+              packages: [{ name: p.name, hidden: true }],
+              color: p.color,
+              baseline: true,
+              baselineLabel: preset.title,
+            })),
+          ],
+        }
+      },
+      resetScroll: false,
+    })
+  }
+
+  const handleClearBaselines = () => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        packageGroups: (prev.packageGroups ?? packageGroups).filter(
+          (pg) => !pg.baseline,
+        ),
+        showBaseline: false,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleToggleShowBaseline = () => {
+    if (!canToggleShowBaseline) return
+
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        showBaseline: !prev.showBaseline,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleToggleNormalizeBaseline = () => {
+    navigate({
+      to: '.',
+      search: (prev: NpmStatsSearch) => ({
+        ...prev,
+        normalizeBaseline: !(prev.normalizeBaseline ?? true),
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleColorClick = (packageName: string, event: React.MouseEvent) => {
+    const rect = event.currentTarget.getBoundingClientRect()
+    setColorPickerPosition({ x: rect.left, y: rect.bottom + 5 })
+    setColorPickerPackage(packageName)
+  }
+
+  const handleColorChange = useThrottledCallback(
+    (packageName: string, color: string | null) => {
+      navigate({
+        to: '.',
+        search: (prev: NpmStatsSearch) => {
+          const packageGroup = packageGroups.find(
+            (pkg) =>
+              pkg.label === packageName ||
+              pkg.packages.some((p) => p.name === packageName),
+          )
+          if (!packageGroup) return prev
+
+          const newPackages = packageGroups.map((pkg) =>
+            pkg === packageGroup
+              ? color === null
+                ? { packages: pkg.packages }
+                : { ...pkg, color }
+              : pkg,
+          )
+
+          return {
+            ...prev,
+            packageGroups: newPackages,
+          }
+        },
+        replace: true,
+        resetScroll: false,
+      })
+    },
+    {
+      wait: 100,
+    },
+  )
+
+  const navigateChartSize = React.useCallback(
+    (size: ResizableSizeChange, replace: boolean) => {
+      navigate({
+        to: '.',
+        search: (prev: NpmStatsSearch) => ({
+          ...prev,
+          ...('height' in size ? { height: size.height } : {}),
+          ...('width' in size ? { width: size.width } : {}),
+        }),
+        replace,
+        resetScroll: false,
+      })
+    },
+    [navigate],
+  )
+
+  const chartSizeThrottler = useThrottler(
+    (size: ResizableSizeChange) => navigateChartSize(size, true),
+    {
+      wait: 16,
+    },
+  )
+
+  const onSizeChange = React.useCallback(
+    (size: ResizableSizeChange, options: ResizeChangeOptions) => {
+      if (options.replace) {
+        chartSizeThrottler.maybeExecute(size)
+        return
+      }
+
+      chartSizeThrottler.cancel()
+      if (!('height' in size) && !('width' in size)) return
+
+      navigateChartSize(size, false)
+    },
+    [chartSizeThrottler, navigateChartSize],
+  )
+
+  const handleMenuOpenChange = (packageName: string, open: boolean) => {
+    if (!open) {
+      setOpenMenuPackage(null)
+    } else {
+      setOpenMenuPackage(packageName)
+    }
+  }
+
+  return (
+    <DocContainer>
+      <div
+        className={twMerge(
+          'w-full flex bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[1500px]',
+        )}
+      >
+        <div
+          className={twMerge('flex overflow-auto flex-col w-full p-4 lg:p-6')}
+        >
+          <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2">
+            NPM Stats for {library.name}
+          </h2>
+          <NPMSummary library={library} />
+
+          <div className="mb-4 flex flex-wrap items-center gap-1">
+            <PackageSearch onSelect={handleAddPackage} />
+            <ChartControls
+              viewMode={viewMode}
+              chartType={chartType}
+              range={range}
+              binType={binType}
+              transform={transform}
+              showDataMode={showDataModeParam}
+              barSort={barSort}
+              barOrientation={barOrientation}
+              onViewModeChange={handleViewModeChange}
+              onChartTypeChange={handleChartTypeChange}
+              onRangeChange={handleRangeChange}
+              onBinTypeChange={handleBinnedChange}
+              onTransformChange={handleTransformChange}
+              onShowDataModeChange={handleShowDataModeChange}
+              onBarSortChange={handleBarSortChange}
+              onBarOrientationChange={handleBarOrientationChange}
+            />
+          </div>
+
+          {/* Package Pills */}
+          <div className="mb-4">
+            <PackagePills
+              packageGroups={packageGroups}
+              queryData={packagePillQueryData}
+              onColorClick={handleColorClick}
+              onToggleVisibility={togglePackageVisibility}
+              onRemove={handleRemovePackageName}
+              onLabelChange={handleLabelChange}
+              openMenuPackage={openMenuPackage}
+              onMenuOpenChange={handleMenuOpenChange}
+            />
+          </div>
+
+          {/* Baseline Section */}
+          <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
+            <div className="min-w-0 flex-1">
+              {viewMode === 'history' ? (
+                <BaselineSection
+                  packageGroups={packageGroups}
+                  presets={getBaselinePresets()}
+                  canToggleShowBaseline={canToggleShowBaseline}
+                  normalizeBaseline={normalizeBaseline}
+                  showBaseline={showBaseline}
+                  onToggleNormalizeBaseline={handleToggleNormalizeBaseline}
+                  onToggleShowBaseline={handleToggleShowBaseline}
+                  onAddBaseline={handleAddBaseline}
+                  onApplyPreset={handleApplyBaselinePreset}
+                  onClearBaselines={handleClearBaselines}
+                />
+              ) : (
+                <LatestBucketNavigator
+                  binType={binType}
+                  range={range}
+                  bucketOffset={bucketOffset}
+                  isLooping={playbackLoop}
+                  isPlaying={playbackPlaying}
+                  playbackIntervalMs={playbackIntervalMs}
+                  onBucketOffsetChange={handleBucketOffsetChange}
+                  onLoopingChange={handlePlaybackLoopChange}
+                  onPlaybackIntervalChange={handlePlaybackIntervalChange}
+                  onPlayingChange={handlePlaybackPlayingChange}
+                />
+              )}
+            </div>
+            <div
+              className="ml-auto flex min-h-6 items-center justify-end"
+              ref={setChartActionsContainer}
+            >
+              {chartActionsMounted ? null : <DisabledChartActions />}
+            </div>
+          </div>
+
+          {/* Suggested Framework Adapters */}
+          {availableAdapters.length > 0 && (
+            <div className="flex flex-wrap items-center gap-2 mb-4">
+              <span className="text-xs text-gray-500 dark:text-gray-400">
+                Add adapter:
+              </span>
+              {availableAdapters.map(({ framework, packageName, color }) => (
+                <Tooltip key={framework} content={`Add ${packageName}`}>
+                  <button
+                    onClick={() => handleAddPackage(packageName, color)}
+                    className="flex items-center gap-1.5 px-2 py-1 text-xs rounded-md bg-gray-500/10 hover:bg-gray-500/20 transition-colors"
+                  >
+                    <Plus className="w-3 h-3" />
+                    <span className="font-medium" style={{ color }}>
+                      🌴 {frameworkMeta[framework]?.name ?? framework}-
+                      {library.id.charAt(0).toUpperCase() + library.id.slice(1)}
+                    </span>
+                  </button>
+                </Tooltip>
+              ))}
+            </div>
+          )}
+
+          {/* Suggested Competitor Packages */}
+          {availableCompetitors.length > 0 && (
+            <div className="flex flex-wrap items-center gap-2 mb-4">
+              <span className="text-xs text-gray-500 dark:text-gray-400">
+                Compare with:
+              </span>
+              {availableCompetitors.map((competitor) => {
+                const mainPackage = competitor.packages[0]?.name
+                if (!mainPackage) return null
+                const color = competitor.color ?? defaultColors[0]
+                return (
+                  <Tooltip key={mainPackage} content={`Add ${mainPackage}`}>
+                    <button
+                      onClick={() => handleAddPackage(mainPackage, color)}
+                      className="flex items-center gap-1.5 px-2 py-1 text-xs rounded-md bg-gray-500/10 hover:bg-gray-500/20 transition-colors"
+                    >
+                      <Plus className="w-3 h-3" />
+                      <span className="font-medium" style={{ color }}>
+                        {mainPackage}
+                      </span>
+                    </button>
+                  </Tooltip>
+                )
+              })}
+            </div>
+          )}
+
+          {/* Color Picker Popover */}
+          {colorPickerPackage && colorPickerPosition && (
+            <ColorPickerPopover
+              packageName={colorPickerPackage}
+              position={colorPickerPosition}
+              currentColor={getPackageColor(colorPickerPackage, packageGroups)}
+              onColorChange={handleColorChange}
+              onReset={(pkgName) => handleColorChange(pkgName, null)}
+              onClose={() => {
+                setColorPickerPackage(null)
+                setColorPickerPosition(null)
+              }}
+            />
+          )}
+
+          {/* Chart */}
+          {queryPackageGroups.length > 0 && (
+            <div className="space-y-2 sm:space-y-4">
+              <div className="relative">
+                {npmQuery.isFetching && npmQuery.data ? (
+                  <div className="absolute inset-0 flex items-center justify-center bg-white/30 dark:bg-black/30 z-10 rounded-lg">
+                    <div className="flex flex-col items-center gap-4">
+                      <Spinner />
+                      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                        Updating...
+                      </div>
+                    </div>
+                  </div>
+                ) : null}
+                <Resizable
+                  height={height}
+                  width={width}
+                  onSizeChange={onSizeChange}
+                >
+                  {npmQuery.isLoading ? (
+                    <div
+                      className="flex items-center justify-center"
+                      style={{ height }}
+                    >
+                      <div className="flex flex-col items-center gap-4">
+                        <Spinner />
+                        <div className="text-sm text-gray-600 dark:text-gray-400">
+                          Loading download statistics...
+                        </div>
+                      </div>
+                    </div>
+                  ) : (
+                    <React.Suspense
+                      fallback={<ChartFallback height={height} />}
+                    >
+                      <LazyNPMStatsChart
+                        actionsContainer={chartActionsContainer}
+                        onActionsMountedChange={setChartActionsMounted}
+                        range={range}
+                        queryData={displayQueryData}
+                        height={height}
+                        viewMode={viewMode}
+                        chartType={chartType}
+                        barSort={barSort}
+                        barOrientation={barOrientation}
+                        transform={transform}
+                        binType={binType}
+                        packages={queryPackageGroups}
+                        showDataMode={showDataModeParam}
+                        normalizeBaseline={
+                          viewMode === 'history' && normalizeBaseline
+                        }
+                        showBaseline={viewMode === 'history' && showBaseline}
+                        timelineStart={timelineStart}
+                        timelineEnd={timelineEnd}
+                        animationQueryData={npmQuery.data}
+                        animationBucketOffsetBounds={latestBucketBounds}
+                        animationFrameIntervalMs={playbackIntervalMs}
+                        onTimelineRangeChange={handleTimelineRangeChange}
+                      />
+                    </React.Suspense>
+                  )}
+                </Resizable>
+              </div>
+
+              {/* Stats Table */}
+              <StatsTable
+                queryData={displayQueryData}
+                packageGroups={queryPackageGroups}
+                packageGroupIndexes={queryPackageGroupIndexes}
+                binType={binType}
+                transform={tableTransform}
+                viewMode={viewMode}
+                onColorClick={handleColorClick}
+                onToggleVisibility={togglePackageVisibility}
+                onRemove={handleRemovePackageName}
+              />
+            </div>
+          )}
+
+          <div className="h-24" />
+        </div>
+      </div>
+    </DocContainer>
+  )
+}
diff --git a/src/routes/_library/$libraryId/$version.docs.tsx b/src/routes/_library/$libraryId/$version.docs.tsx
new file mode 100644
index 000000000..4686a90ac
--- /dev/null
+++ b/src/routes/_library/$libraryId/$version.docs.tsx
@@ -0,0 +1,32 @@
+import { Outlet, notFound, createFileRoute } from '@tanstack/react-router'
+import { findLibrary } from '~/libraries'
+import { seo } from '~/utils/seo'
+import { getDocsCacheHeaders } from '~/utils/docs-cache-headers'
+
+export const Route = createFileRoute('/_library/$libraryId/$version/docs')({
+  head: (ctx) => {
+    const { libraryId } = ctx.params
+    const library = findLibrary(libraryId)
+
+    if (!library) {
+      throw notFound()
+    }
+
+    return {
+      meta: seo({
+        title: `${library.name} Docs`,
+        noindex: library.visible === false,
+      }),
+    }
+  },
+  component: DocsRoute,
+  headers: ({ params }) => {
+    const { libraryId, version } = params
+
+    return getDocsCacheHeaders({ libraryId, version })
+  },
+})
+
+function DocsRoute() {
+  return <Outlet />
+}
diff --git a/src/routes/_library/$libraryId/$version.docs.{$}[.]md.tsx b/src/routes/_library/$libraryId/$version.docs.{$}[.]md.tsx
new file mode 100644
index 000000000..309a89967
--- /dev/null
+++ b/src/routes/_library/$libraryId/$version.docs.{$}[.]md.tsx
@@ -0,0 +1,90 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+import { findLibrary, getBranch } from '~/libraries'
+import { buildDocsMarkdownRedirectHref, loadDocsRoute } from '~/utils/docs'
+import { getDocsCacheHeaders } from '~/utils/docs-cache-headers'
+import { getContentDispositionHeader } from '~/utils/http-response'
+import { filterFrameworkContent } from '~/utils/markdown/filterFrameworkContent'
+import { getPackageManager } from '~/utils/markdown/installCommand'
+
+export const Route = createFileRoute(
+  '/_library/$libraryId/$version/docs/{$}.md',
+)({
+  server: {
+    handlers: {
+      GET: async ({
+        request,
+        params,
+      }: {
+        request: Request
+        params: { libraryId: string; version: string; _splat: string }
+      }) => {
+        const url = new URL(request.url)
+        const framework = url.searchParams.get('framework')
+        const pm = getPackageManager(url.searchParams.get('pm'))
+        const keepMarkers = url.searchParams.get('keep_markers') === 'true'
+
+        const { libraryId, version, _splat: docsPath } = params
+        const library = findLibrary(libraryId)
+
+        if (!library) {
+          throw notFound()
+        }
+
+        const root = library.docsRoot || 'docs'
+        const cacheHeaders = getDocsCacheHeaders({ libraryId, version })
+        const branch = getBranch(library, version)
+        const result = await loadDocsRoute({
+          repo: library.repo,
+          branch,
+          docsRoot: root,
+          docsPath,
+          defaultDocs: library.defaultDocs ?? 'overview',
+          frameworks: library.frameworks,
+          redirectFromPaths: docsPath ? [docsPath] : [],
+        })
+
+        if (result.type === 'redirect') {
+          return Response.redirect(
+            buildDocsMarkdownRedirectHref({
+              requestUrl: request.url,
+              docsPath: result.docsPath,
+              libraryId,
+              version,
+            }),
+            308,
+          )
+        }
+
+        if (result.type === 'not-found') {
+          throw notFound()
+        }
+
+        const doc = result.doc
+
+        // Filter framework-specific content only if framework is explicitly specified
+        const filteredContent = framework
+          ? filterFrameworkContent(doc.content, {
+              framework,
+              packageManager: pm,
+              keepMarkers,
+            })
+          : doc.content
+
+        const markdownContent = `# ${doc.title}\n${filteredContent}`
+        const filename = `${result.docsPath || 'file'}.md`
+
+        return new Response(markdownContent, {
+          headers: {
+            ...cacheHeaders,
+            'Content-Type': 'text/markdown',
+            'Content-Disposition': getContentDispositionHeader(
+              'inline',
+              filename,
+              'file.md',
+            ),
+          },
+        })
+      },
+    },
+  },
+})
diff --git a/src/routes/_library/$libraryId/$version.index.tsx b/src/routes/_library/$libraryId/$version.index.tsx
new file mode 100644
index 000000000..794d7a92d
--- /dev/null
+++ b/src/routes/_library/$libraryId/$version.index.tsx
@@ -0,0 +1,62 @@
+import { createFileRoute, notFound, redirect } from '@tanstack/react-router'
+import { findLibrary } from '~/libraries'
+import { validateLibraryVersion } from '../../-library-landing'
+
+export const Route = createFileRoute('/_library/$libraryId/$version/')({
+  beforeLoad: ({ params, location }) => {
+    const library = findLibrary(params.libraryId)
+
+    if (!library) {
+      throw notFound()
+    }
+
+    library.handleRedirects?.(location.href)
+
+    validateLibraryVersion(library.id, params.version, () => {
+      throw redirect({ href: `/${library.id}/latest` })
+    })
+
+    redirectToStaticLanding(library.id, params.version)
+  },
+})
+
+function redirectToStaticLanding(libraryId: string, version: string) {
+  switch (libraryId) {
+    case 'ai':
+      throw redirect({ to: '/ai/$version', params: { version } })
+    case 'cli':
+      throw redirect({ to: '/cli/$version', params: { version } })
+    case 'config':
+      throw redirect({ to: '/config/$version', params: { version } })
+    case 'db':
+      throw redirect({ to: '/db/$version', params: { version } })
+    case 'devtools':
+      throw redirect({ to: '/devtools/$version', params: { version } })
+    case 'form':
+      throw redirect({ to: '/form/$version', params: { version } })
+    case 'hotkeys':
+      throw redirect({ to: '/hotkeys/$version', params: { version } })
+    case 'intent':
+      throw redirect({ to: '/intent/$version', params: { version } })
+    case 'pacer':
+      throw redirect({ to: '/pacer/$version', params: { version } })
+    case 'query':
+      throw redirect({ to: '/query/$version', params: { version } })
+    case 'ranger':
+      throw redirect({ to: '/ranger/$version', params: { version } })
+    case 'router':
+      throw redirect({ to: '/router/$version', params: { version } })
+    case 'start':
+      throw redirect({ to: '/start/$version', params: { version } })
+    case 'store':
+      throw redirect({ to: '/store/$version', params: { version } })
+    case 'table':
+      throw redirect({ to: '/table/$version', params: { version } })
+    case 'virtual':
+      throw redirect({ to: '/virtual/$version', params: { version } })
+    case 'workflow':
+      throw redirect({ to: '/workflow/$version', params: { version } })
+    default:
+      throw notFound()
+  }
+}
diff --git a/src/routes/_library/$libraryId/$version.llms[.]txt.ts b/src/routes/_library/$libraryId/$version.llms[.]txt.ts
new file mode 100644
index 000000000..8ed0f008e
--- /dev/null
+++ b/src/routes/_library/$libraryId/$version.llms[.]txt.ts
@@ -0,0 +1,47 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+import { findLibrary, getBranch } from '~/libraries'
+import { getTanstackDocsConfig } from '~/utils/config'
+import { getDocsCacheHeaders } from '~/utils/docs-cache-headers'
+import { generateLibraryDocsIndexMarkdown } from '~/utils/llms'
+
+export const Route = createFileRoute('/_library/$libraryId/$version/llms.txt')({
+  server: {
+    handlers: {
+      GET: async ({
+        params,
+      }: {
+        params: { libraryId: string; version: string }
+      }) => {
+        const { libraryId, version } = params
+        const library = findLibrary(libraryId)
+
+        if (!library) {
+          throw notFound()
+        }
+
+        const docsRoot = library.docsRoot || 'docs'
+        const config = await getTanstackDocsConfig({
+          data: {
+            repo: library.repo,
+            branch: getBranch(library, version),
+            docsRoot,
+          },
+        })
+
+        return new Response(
+          generateLibraryDocsIndexMarkdown({
+            config,
+            library,
+            version,
+          }),
+          {
+            headers: {
+              ...getDocsCacheHeaders({ libraryId, version }),
+              'Content-Type': 'text/plain; charset=utf-8',
+            },
+          },
+        )
+      },
+    },
+  },
+})
diff --git a/src/routes/_library/$libraryId/$version.tsx b/src/routes/_library/$libraryId/$version.tsx
new file mode 100644
index 000000000..76342a975
--- /dev/null
+++ b/src/routes/_library/$libraryId/$version.tsx
@@ -0,0 +1,58 @@
+import {
+  Outlet,
+  redirect,
+  notFound,
+  createFileRoute,
+} from '@tanstack/react-router'
+import { RedirectVersionBanner } from '~/components/RedirectVersionBanner'
+import { findLibrary } from '~/libraries'
+import { docsConfigQueryOptions } from '~/queries/docsConfig'
+import { validateLibraryVersion } from '../../-library-landing'
+
+export const Route = createFileRoute('/_library/$libraryId/$version')({
+  staleTime: 1000 * 60 * 5,
+  beforeLoad: async (ctx) => {
+    const { libraryId, version } = ctx.params
+    const library = validateLibraryVersion(libraryId, version, () => {
+      throw redirect({
+        params: { libraryId, version: 'latest' } as never,
+      })
+    })
+
+    library.handleRedirects?.(ctx.location.href)
+  },
+  loader: async (ctx) => {
+    const { libraryId, version } = ctx.params
+    const library = findLibrary(libraryId)
+
+    if (!library) {
+      throw notFound()
+    }
+
+    return {
+      config: await ctx.context.queryClient.ensureQueryData(
+        docsConfigQueryOptions(library.id, version!),
+      ),
+    }
+  },
+  component: RouteForm,
+})
+
+function RouteForm() {
+  const { libraryId, version } = Route.useParams()
+  const library = findLibrary(libraryId)
+
+  if (!library) {
+    throw notFound()
+  }
+
+  return (
+    <>
+      <Outlet />
+      <RedirectVersionBanner
+        version={version!}
+        latestVersion={library.latestVersion}
+      />
+    </>
+  )
+}
diff --git a/src/routes/$libraryId/index.tsx b/src/routes/_library/$libraryId/index.tsx
similarity index 79%
rename from src/routes/$libraryId/index.tsx
rename to src/routes/_library/$libraryId/index.tsx
index 43a4a1e92..370d1f72f 100644
--- a/src/routes/$libraryId/index.tsx
+++ b/src/routes/_library/$libraryId/index.tsx
@@ -1,6 +1,6 @@
 import { redirect, createFileRoute } from '@tanstack/react-router'
 
-export const Route = createFileRoute('/$libraryId/')({
+export const Route = createFileRoute('/_library/$libraryId/')({
   beforeLoad: ({ params }) => {
     throw redirect({
       to: '/$libraryId/$version',
diff --git a/src/routes/$libraryId/route.tsx b/src/routes/_library/$libraryId/route.tsx
similarity index 94%
rename from src/routes/$libraryId/route.tsx
rename to src/routes/_library/$libraryId/route.tsx
index d61be60e0..85d27bb28 100644
--- a/src/routes/$libraryId/route.tsx
+++ b/src/routes/_library/$libraryId/route.tsx
@@ -3,8 +3,9 @@ import { notFound, Outlet, useParams } from '@tanstack/react-router'
 import { Scarf } from '~/components/Scarf'
 import { findLibrary, LibraryId } from '~/libraries'
 import { seo } from '~/utils/seo'
+import { ogImageUrl } from '~/utils/og'
 
-export const Route = createFileRoute('/$libraryId')({
+export const Route = createFileRoute('/_library/$libraryId')({
   params: {
     parse: (params) => {
       return params as { libraryId: LibraryId }
@@ -48,7 +49,7 @@ export const Route = createFileRoute('/$libraryId')({
               .join(', ')}`
           : '',
         description: library.description,
-        image: library.ogImage,
+        image: ogImageUrl(library.id),
         noindex: library.visible === false,
       }),
     }
diff --git a/src/routes/_library/ai.$version.index.tsx b/src/routes/_library/ai.$version.index.tsx
new file mode 100644
index 000000000..f66d315e9
--- /dev/null
+++ b/src/routes/_library/ai.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import AiLanding from '~/components/landing/AiLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/ai/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('ai', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('ai', params.version, queryClient),
+  head: () => getLibraryLandingHead('ai'),
+  headers: () => getLibraryLandingHeaders('ai'),
+  staticData: {
+    Title: AiNavbarTitle,
+  },
+  component: AiLandingRoute,
+})
+
+function AiNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="ai" />
+}
+
+function AiLandingRoute() {
+  return <AiLanding />
+}
diff --git a/src/routes/_library/cli.$version.index.tsx b/src/routes/_library/cli.$version.index.tsx
new file mode 100644
index 000000000..df050261e
--- /dev/null
+++ b/src/routes/_library/cli.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import CliLanding from '~/components/landing/CliLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/cli/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('cli', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('cli', params.version, queryClient),
+  head: () => getLibraryLandingHead('cli'),
+  headers: () => getLibraryLandingHeaders('cli'),
+  staticData: {
+    Title: CliNavbarTitle,
+  },
+  component: CliLandingRoute,
+})
+
+function CliNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="cli" />
+}
+
+function CliLandingRoute() {
+  return <CliLanding />
+}
diff --git a/src/routes/_library/config.$version.index.tsx b/src/routes/_library/config.$version.index.tsx
new file mode 100644
index 000000000..fe5ecfd91
--- /dev/null
+++ b/src/routes/_library/config.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import ConfigLanding from '~/components/landing/ConfigLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/config/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('config', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('config', params.version, queryClient),
+  head: () => getLibraryLandingHead('config'),
+  headers: () => getLibraryLandingHeaders('config'),
+  staticData: {
+    Title: ConfigNavbarTitle,
+  },
+  component: ConfigLandingRoute,
+})
+
+function ConfigNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="config" />
+}
+
+function ConfigLandingRoute() {
+  return <ConfigLanding />
+}
diff --git a/src/routes/_library/db.$version.index.tsx b/src/routes/_library/db.$version.index.tsx
new file mode 100644
index 000000000..816567e38
--- /dev/null
+++ b/src/routes/_library/db.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import DbLanding from '~/components/landing/DbLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/db/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('db', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('db', params.version, queryClient),
+  head: () => getLibraryLandingHead('db'),
+  headers: () => getLibraryLandingHeaders('db'),
+  staticData: {
+    Title: DbNavbarTitle,
+  },
+  component: DbLandingRoute,
+})
+
+function DbNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="db" />
+}
+
+function DbLandingRoute() {
+  return <DbLanding />
+}
diff --git a/src/routes/_library/devtools.$version.index.tsx b/src/routes/_library/devtools.$version.index.tsx
new file mode 100644
index 000000000..5baf7bbbf
--- /dev/null
+++ b/src/routes/_library/devtools.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import DevtoolsLanding from '~/components/landing/DevtoolsLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/devtools/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('devtools', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('devtools', params.version, queryClient),
+  head: () => getLibraryLandingHead('devtools'),
+  headers: () => getLibraryLandingHeaders('devtools'),
+  staticData: {
+    Title: DevtoolsNavbarTitle,
+  },
+  component: DevtoolsLandingRoute,
+})
+
+function DevtoolsNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="devtools" />
+}
+
+function DevtoolsLandingRoute() {
+  return <DevtoolsLanding />
+}
diff --git a/src/routes/_library/form.$version.index.tsx b/src/routes/_library/form.$version.index.tsx
new file mode 100644
index 000000000..847d4b828
--- /dev/null
+++ b/src/routes/_library/form.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import FormLanding from '~/components/landing/FormLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/form/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('form', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('form', params.version, queryClient),
+  head: () => getLibraryLandingHead('form'),
+  headers: () => getLibraryLandingHeaders('form'),
+  staticData: {
+    Title: FormNavbarTitle,
+  },
+  component: FormLandingRoute,
+})
+
+function FormNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="form" />
+}
+
+function FormLandingRoute() {
+  return <FormLanding />
+}
diff --git a/src/routes/_library/hotkeys.$version.index.tsx b/src/routes/_library/hotkeys.$version.index.tsx
new file mode 100644
index 000000000..efd3bb880
--- /dev/null
+++ b/src/routes/_library/hotkeys.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import HotkeysLanding from '~/components/landing/HotkeysLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/hotkeys/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('hotkeys', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('hotkeys', params.version, queryClient),
+  head: () => getLibraryLandingHead('hotkeys'),
+  headers: () => getLibraryLandingHeaders('hotkeys'),
+  staticData: {
+    Title: HotkeysNavbarTitle,
+  },
+  component: HotkeysLandingRoute,
+})
+
+function HotkeysNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="hotkeys" />
+}
+
+function HotkeysLandingRoute() {
+  return <HotkeysLanding />
+}
diff --git a/src/routes/_library/intent.$version.index.tsx b/src/routes/_library/intent.$version.index.tsx
new file mode 100644
index 000000000..03d1b50d4
--- /dev/null
+++ b/src/routes/_library/intent.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import IntentLanding from '~/components/landing/IntentLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/intent/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('intent', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('intent', params.version, queryClient),
+  head: () => getLibraryLandingHead('intent'),
+  headers: () => getLibraryLandingHeaders('intent'),
+  staticData: {
+    Title: IntentNavbarTitle,
+  },
+  component: IntentLandingRoute,
+})
+
+function IntentNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="intent" />
+}
+
+function IntentLandingRoute() {
+  return <IntentLanding />
+}
diff --git a/src/routes/_library/pacer.$version.index.tsx b/src/routes/_library/pacer.$version.index.tsx
new file mode 100644
index 000000000..716d75b78
--- /dev/null
+++ b/src/routes/_library/pacer.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import PacerLanding from '~/components/landing/PacerLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/pacer/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('pacer', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('pacer', params.version, queryClient),
+  head: () => getLibraryLandingHead('pacer'),
+  headers: () => getLibraryLandingHeaders('pacer'),
+  staticData: {
+    Title: PacerNavbarTitle,
+  },
+  component: PacerLandingRoute,
+})
+
+function PacerNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="pacer" />
+}
+
+function PacerLandingRoute() {
+  return <PacerLanding />
+}
diff --git a/src/routes/_library/query.$version.index.tsx b/src/routes/_library/query.$version.index.tsx
new file mode 100644
index 000000000..4940b440f
--- /dev/null
+++ b/src/routes/_library/query.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import QueryLanding from '~/components/landing/QueryLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/query/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('query', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('query', params.version, queryClient),
+  head: () => getLibraryLandingHead('query'),
+  headers: () => getLibraryLandingHeaders('query'),
+  staticData: {
+    Title: QueryNavbarTitle,
+  },
+  component: QueryLandingRoute,
+})
+
+function QueryNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="query" />
+}
+
+function QueryLandingRoute() {
+  return <QueryLanding />
+}
diff --git a/src/routes/_library/ranger.$version.index.tsx b/src/routes/_library/ranger.$version.index.tsx
new file mode 100644
index 000000000..758b6c86a
--- /dev/null
+++ b/src/routes/_library/ranger.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import RangerLanding from '~/components/landing/RangerLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/ranger/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('ranger', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('ranger', params.version, queryClient),
+  head: () => getLibraryLandingHead('ranger'),
+  headers: () => getLibraryLandingHeaders('ranger'),
+  staticData: {
+    Title: RangerNavbarTitle,
+  },
+  component: RangerLandingRoute,
+})
+
+function RangerNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="ranger" />
+}
+
+function RangerLandingRoute() {
+  return <RangerLanding />
+}
diff --git a/src/routes/_library/router.$version.index.tsx b/src/routes/_library/router.$version.index.tsx
new file mode 100644
index 000000000..6bceab0cc
--- /dev/null
+++ b/src/routes/_library/router.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import RouterLanding from '~/components/landing/RouterLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/router/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('router', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('router', params.version, queryClient),
+  head: () => getLibraryLandingHead('router'),
+  headers: () => getLibraryLandingHeaders('router'),
+  staticData: {
+    Title: RouterNavbarTitle,
+  },
+  component: RouterLandingRoute,
+})
+
+function RouterNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="router" />
+}
+
+function RouterLandingRoute() {
+  return <RouterLanding />
+}
diff --git a/src/routes/_library/start.$version.index.tsx b/src/routes/_library/start.$version.index.tsx
new file mode 100644
index 000000000..59a0fddaf
--- /dev/null
+++ b/src/routes/_library/start.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import StartLanding from '~/components/landing/StartLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/start/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('start', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('start', params.version, queryClient),
+  head: () => getLibraryLandingHead('start'),
+  headers: () => getLibraryLandingHeaders('start'),
+  staticData: {
+    Title: StartNavbarTitle,
+  },
+  component: StartLandingRoute,
+})
+
+function StartNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="start" />
+}
+
+function StartLandingRoute() {
+  return <StartLanding />
+}
diff --git a/src/routes/_library/store.$version.index.tsx b/src/routes/_library/store.$version.index.tsx
new file mode 100644
index 000000000..59b72fd26
--- /dev/null
+++ b/src/routes/_library/store.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import StoreLanding from '~/components/landing/StoreLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/store/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('store', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('store', params.version, queryClient),
+  head: () => getLibraryLandingHead('store'),
+  headers: () => getLibraryLandingHeaders('store'),
+  staticData: {
+    Title: StoreNavbarTitle,
+  },
+  component: StoreLandingRoute,
+})
+
+function StoreNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="store" />
+}
+
+function StoreLandingRoute() {
+  return <StoreLanding />
+}
diff --git a/src/routes/_library/table.$version.index.tsx b/src/routes/_library/table.$version.index.tsx
new file mode 100644
index 000000000..580c77a8d
--- /dev/null
+++ b/src/routes/_library/table.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import TableLanding from '~/components/landing/TableLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/table/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('table', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('table', params.version, queryClient),
+  head: () => getLibraryLandingHead('table'),
+  headers: () => getLibraryLandingHeaders('table'),
+  staticData: {
+    Title: TableNavbarTitle,
+  },
+  component: TableLandingRoute,
+})
+
+function TableNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="table" />
+}
+
+function TableLandingRoute() {
+  return <TableLanding />
+}
diff --git a/src/routes/_library/virtual.$version.index.tsx b/src/routes/_library/virtual.$version.index.tsx
new file mode 100644
index 000000000..b8c4ef763
--- /dev/null
+++ b/src/routes/_library/virtual.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import VirtualLanding from '~/components/landing/VirtualLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/virtual/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('virtual', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('virtual', params.version, queryClient),
+  head: () => getLibraryLandingHead('virtual'),
+  headers: () => getLibraryLandingHeaders('virtual'),
+  staticData: {
+    Title: VirtualNavbarTitle,
+  },
+  component: VirtualLandingRoute,
+})
+
+function VirtualNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="virtual" />
+}
+
+function VirtualLandingRoute() {
+  return <VirtualLanding />
+}
diff --git a/src/routes/_library/workflow.$version.index.tsx b/src/routes/_library/workflow.$version.index.tsx
new file mode 100644
index 000000000..7c34ca0a6
--- /dev/null
+++ b/src/routes/_library/workflow.$version.index.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import WorkflowLanding from '~/components/landing/WorkflowLanding'
+import {
+  LibraryNavbarTitle,
+  beforeLoadLibraryLanding,
+  getLibraryLandingHead,
+  getLibraryLandingHeaders,
+  libraryLandingStaleTime,
+  loadLibraryLandingRouteData,
+} from '../-library-landing-route'
+
+export const Route = createFileRoute('/_library/workflow/$version/')({
+  staleTime: libraryLandingStaleTime,
+  beforeLoad: ({ params, location }) => {
+    beforeLoadLibraryLanding('workflow', params.version, location.href)
+  },
+  loader: ({ params, context: { queryClient } }) =>
+    loadLibraryLandingRouteData('workflow', params.version, queryClient),
+  head: () => getLibraryLandingHead('workflow'),
+  headers: () => getLibraryLandingHeaders('workflow'),
+  staticData: {
+    Title: WorkflowNavbarTitle,
+  },
+  component: WorkflowLandingRoute,
+})
+
+function WorkflowNavbarTitle() {
+  return <LibraryNavbarTitle libraryId="workflow" />
+}
+
+function WorkflowLandingRoute() {
+  return <WorkflowLanding />
+}
diff --git a/src/routes/account.tsx b/src/routes/account.tsx
index bd39021a9..6eb0f2e6c 100644
--- a/src/routes/account.tsx
+++ b/src/routes/account.tsx
@@ -1,5 +1,5 @@
 import { Outlet, Link, redirect, createFileRoute } from '@tanstack/react-router'
-import { requireAuth } from '~/utils/auth.server'
+import { requireAuth } from '~/utils/auth.functions'
 
 export const Route = createFileRoute('/account')({
   component: AccountLayout,
diff --git a/src/routes/account/feedback.tsx b/src/routes/account/feedback.tsx
index c8b4957d9..ac55414c8 100644
--- a/src/routes/account/feedback.tsx
+++ b/src/routes/account/feedback.tsx
@@ -50,7 +50,7 @@ function AccountFeedbackPage() {
   return (
     <div className="space-y-6">
       {/* Points Summary Box */}
-      <div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
+      <div className="bg-linear-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-6 border border-blue-200 dark:border-blue-800">
         <div className="flex items-start justify-between">
           <div>
             <div className="flex items-center gap-2 mb-2">
diff --git a/src/routes/account/index.tsx b/src/routes/account/index.tsx
index 161dcc66a..d3948183b 100644
--- a/src/routes/account/index.tsx
+++ b/src/routes/account/index.tsx
@@ -1,31 +1,26 @@
 import * as React from 'react'
-import { useNavigate, createFileRoute } from '@tanstack/react-router'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { authClient } from '~/utils/auth.client'
+import {
+  ClientOnly,
+  useNavigate,
+  createFileRoute,
+} from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { authClient } from '~/auth/client'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { useCapabilities } from '~/hooks/useCapabilities'
 import { hasCapability } from '~/db/types'
 import { useToast } from '~/components/ToastProvider'
-import {
-  updateAdPreference,
-  revertProfileImage,
-  removeProfileImage,
-} from '~/utils/users.server'
+import { updateAdPreference } from '~/utils/users.functions'
 import { getMyStreak } from '~/utils/activity.functions'
-import {
-  LogOut,
-  Flame,
-  Trophy,
-  Calendar,
-  Camera,
-  RotateCcw,
-  Trash2,
-} from 'lucide-react'
+import { LogOut, Flame, Trophy, Calendar } from 'lucide-react'
 import { Card } from '~/components/Card'
 import { Button } from '~/ui'
-import { Avatar } from '~/components/Avatar'
-import { AvatarCropModal } from '~/components/AvatarCropModal'
-import { useUploadThing } from '~/utils/uploadthing'
+
+const LazyAccountProfilePictureSection = React.lazy(() =>
+  import('~/components/account/AccountProfilePictureSection.client').then(
+    (m) => ({ default: m.AccountProfilePictureSection }),
+  ),
+)
 
 export const Route = createFileRoute('/account/')({
   component: AccountSettingsPage,
@@ -33,45 +28,10 @@ export const Route = createFileRoute('/account/')({
 
 function AccountSettingsPage() {
   const userQuery = useCurrentUserQuery()
-  const queryClient = useQueryClient()
   const capabilities = useCapabilities()
   const { notify } = useToast()
   const navigate = useNavigate()
 
-  // Avatar upload state
-  const [cropModalOpen, setCropModalOpen] = React.useState(false)
-  const [selectedImage, setSelectedImage] = React.useState<string | null>(null)
-  const [isUploading, setIsUploading] = React.useState(false)
-  const [isReverting, setIsReverting] = React.useState(false)
-  const [isRemoving, setIsRemoving] = React.useState(false)
-  const fileInputRef = React.useRef<HTMLInputElement>(null)
-
-  const { startUpload } = useUploadThing('avatarUploader', {
-    onClientUploadComplete: () => {
-      setIsUploading(false)
-      queryClient.invalidateQueries({ queryKey: ['currentUser'] })
-      notify(
-        <div>
-          <div className="font-medium">Profile picture updated</div>
-          <div className="text-gray-500 dark:text-gray-400 text-xs">
-            Your new avatar is now live
-          </div>
-        </div>,
-      )
-    },
-    onUploadError: (error) => {
-      setIsUploading(false)
-      notify(
-        <div>
-          <div className="font-medium">Upload failed</div>
-          <div className="text-gray-500 dark:text-gray-400 text-xs">
-            {error.message}
-          </div>
-        </div>,
-      )
-    },
-  })
-
   const streakQuery = useQuery({
     queryKey: ['my-streak'],
     queryFn: () => getMyStreak(),
@@ -86,86 +46,6 @@ function AccountSettingsPage() {
       : false
   const canDisableAds = hasCapability(capabilities, 'disableAds')
 
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) {
-      const reader = new FileReader()
-      reader.onload = () => {
-        setSelectedImage(reader.result as string)
-        setCropModalOpen(true)
-      }
-      reader.readAsDataURL(file)
-    }
-    // Reset input so same file can be selected again
-    e.target.value = ''
-  }
-
-  const handleCropComplete = async (croppedBlob: Blob) => {
-    setIsUploading(true)
-    const file = new File([croppedBlob], 'avatar.jpg', { type: 'image/jpeg' })
-    await startUpload([file])
-  }
-
-  const handleRevertToOAuth = async () => {
-    if (!user?.oauthImage) return
-
-    setIsReverting(true)
-    try {
-      await revertProfileImage()
-      queryClient.invalidateQueries({ queryKey: ['currentUser'] })
-      notify(
-        <div>
-          <div className="font-medium">Profile picture reverted</div>
-          <div className="text-gray-500 dark:text-gray-400 text-xs">
-            Using your OAuth provider image
-          </div>
-        </div>,
-      )
-    } catch {
-      notify(
-        <div>
-          <div className="font-medium">Error</div>
-          <div className="text-gray-500 dark:text-gray-400 text-xs">
-            Failed to revert profile picture
-          </div>
-        </div>,
-      )
-    } finally {
-      setIsReverting(false)
-    }
-  }
-
-  const handleRemovePhoto = async () => {
-    setIsRemoving(true)
-    try {
-      await removeProfileImage()
-      queryClient.invalidateQueries({ queryKey: ['currentUser'] })
-      notify(
-        <div>
-          <div className="font-medium">Profile picture removed</div>
-          <div className="text-gray-500 dark:text-gray-400 text-xs">
-            Using default avatar
-          </div>
-        </div>,
-      )
-    } catch {
-      notify(
-        <div>
-          <div className="font-medium">Error</div>
-          <div className="text-gray-500 dark:text-gray-400 text-xs">
-            Failed to remove profile picture
-          </div>
-        </div>,
-      )
-    } finally {
-      setIsRemoving(false)
-    }
-  }
-
-  const hasCustomImage = user?.image && user.image !== user.oauthImage
-  const canRevert = hasCustomImage && user?.oauthImage
-  const hasAnyImage = user?.image || user?.oauthImage
-
   const handleToggleAds = async (e: React.ChangeEvent<HTMLInputElement>) => {
     try {
       await updateAdPreference({ data: { adsDisabled: e.target.checked } })
@@ -208,65 +88,11 @@ function AccountSettingsPage() {
         <h3 className="font-bold mb-2 text-lg text-gray-900 dark:text-white">
           Profile Picture
         </h3>
-        <div className="flex items-center gap-4">
-          <div className="relative group">
-            <Avatar
-              image={user?.image}
-              oauthImage={user?.oauthImage}
-              name={user?.name}
-              email={user?.email}
-              size="xl"
-            />
-            <button
-              type="button"
-              onClick={() => fileInputRef.current?.click()}
-              disabled={isUploading}
-              className="absolute inset-0 flex items-center justify-center bg-black/50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer disabled:cursor-not-allowed"
-            >
-              <Camera className="w-6 h-6 text-white" />
-            </button>
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept="image/*"
-              onChange={handleFileSelect}
-              className="hidden"
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <Button
-              variant="ghost"
-              size="xs"
-              onClick={() => fileInputRef.current?.click()}
-              disabled={isUploading}
-            >
-              <Camera className="w-3.5 h-3.5" />
-              {isUploading ? 'Uploading...' : 'Change photo'}
-            </Button>
-            {canRevert && (
-              <Button
-                variant="ghost"
-                size="xs"
-                onClick={handleRevertToOAuth}
-                disabled={isReverting}
-              >
-                <RotateCcw className="w-3.5 h-3.5" />
-                {isReverting ? 'Reverting...' : 'Revert to original'}
-              </Button>
-            )}
-            {hasAnyImage && (
-              <Button
-                variant="ghost"
-                size="xs"
-                onClick={handleRemovePhoto}
-                disabled={isRemoving}
-              >
-                <Trash2 className="w-3.5 h-3.5" />
-                {isRemoving ? 'Removing...' : 'Remove photo'}
-              </Button>
-            )}
-          </div>
-        </div>
+        <ClientOnly>
+          <React.Suspense fallback={null}>
+            <LazyAccountProfilePictureSection user={user ?? undefined} />
+          </React.Suspense>
+        </ClientOnly>
       </div>
       <div>
         <h3 className="font-bold mb-2 text-lg text-gray-900 dark:text-white">
@@ -290,19 +116,6 @@ function AccountSettingsPage() {
           </div>
         </div>
       </div>
-
-      {/* Avatar crop modal */}
-      {selectedImage && (
-        <AvatarCropModal
-          open={cropModalOpen}
-          onOpenChange={(open) => {
-            setCropModalOpen(open)
-            if (!open) setSelectedImage(null)
-          }}
-          imageSrc={selectedImage}
-          onCropComplete={handleCropComplete}
-        />
-      )}
       {canDisableAds && (
         <div>
           <h3 className="font-bold mb-2 text-lg text-gray-900 dark:text-white">
diff --git a/src/routes/account/integrations.tsx b/src/routes/account/integrations.tsx
index 9a56412c6..875824d9f 100644
--- a/src/routes/account/integrations.tsx
+++ b/src/routes/account/integrations.tsx
@@ -11,6 +11,7 @@ import {
   listConnectedApps,
   revokeConnectedApp,
 } from '~/utils/oauthClient.functions'
+import { copyTextToClipboard, useTemporaryFlag } from '~/utils/browser-effects'
 import { useToast } from '~/components/ToastProvider'
 import { Card } from '~/components/Card'
 import { Button, FormInput } from '~/ui'
@@ -40,7 +41,7 @@ function IntegrationsPage() {
   const [newlyCreatedKey, setNewlyCreatedKey] = React.useState<string | null>(
     null,
   )
-  const [copied, setCopied] = React.useState(false)
+  const copied = useTemporaryFlag()
 
   const keysQuery = useQuery({
     queryKey: ['api-keys'],
@@ -129,9 +130,8 @@ function IntegrationsPage() {
 
   const handleCopy = async () => {
     if (!newlyCreatedKey) return
-    await navigator.clipboard.writeText(newlyCreatedKey)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
+    await copyTextToClipboard(newlyCreatedKey)
+    copied.trigger()
   }
 
   const formatDate = (dateStr: string | null) => {
@@ -178,7 +178,7 @@ function IntegrationsPage() {
       {newlyCreatedKey && (
         <Card className="p-4 border-green-500 dark:border-green-600 bg-green-50 dark:bg-green-950/30">
           <div className="flex items-start gap-3">
-            <Key className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
+            <Key className="w-5 h-5 text-green-600 dark:text-green-400 shrink-0 mt-0.5" />
             <div className="flex-1 min-w-0">
               <p className="font-medium text-green-800 dark:text-green-200 text-sm">
                 Your new API key
@@ -190,13 +190,13 @@ function IntegrationsPage() {
                 <code className="flex-1 bg-white dark:bg-gray-900 border border-green-200 dark:border-green-800 rounded px-3 py-2 text-sm font-mono text-gray-900 dark:text-gray-100 overflow-x-auto">
                   {newlyCreatedKey}
                 </code>
-                <Button onClick={handleCopy} className="flex-shrink-0">
-                  {copied ? (
+                <Button onClick={handleCopy} className="shrink-0">
+                  {copied.active ? (
                     <Check className="w-3.5 h-3.5 text-green-600" />
                   ) : (
                     <Copy className="w-3.5 h-3.5" />
                   )}
-                  {copied ? 'Copied' : 'Copy'}
+                  {copied.active ? 'Copied' : 'Copy'}
                 </Button>
               </div>
               <button
@@ -345,7 +345,7 @@ function IntegrationsPage() {
                   </div>
                 </div>
               </div>
-              <div className="flex items-center gap-2 flex-shrink-0">
+              <div className="flex items-center gap-2 shrink-0">
                 {key.isActive && (
                   <Button
                     onClick={() =>
@@ -426,7 +426,7 @@ function IntegrationsPage() {
                   </div>
                 </div>
               </div>
-              <div className="flex items-center gap-2 flex-shrink-0">
+              <div className="flex items-center gap-2 shrink-0">
                 <Button
                   onClick={() =>
                     revokeAppMutation.mutate({
diff --git a/src/routes/account/submissions.tsx b/src/routes/account/submissions.tsx
index 35a398b6a..3772cb894 100644
--- a/src/routes/account/submissions.tsx
+++ b/src/routes/account/submissions.tsx
@@ -137,14 +137,17 @@ function AccountSubmissionsPage() {
               key={showcase.id}
               className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden"
             >
-              <div className="flex">
+              <div className="flex flex-col sm:flex-row">
                 {/* Screenshot */}
-                <div className="w-48 h-32 flex-shrink-0 bg-gray-100 dark:bg-gray-900">
+                <div className="relative w-full h-48 sm:w-48 sm:h-32 shrink-0 bg-gray-100 dark:bg-gray-900">
                   <img
                     src={showcase.screenshotUrl}
                     alt={showcase.name}
                     className="w-full h-full object-cover"
                   />
+                  <div className="absolute top-2 right-2 sm:hidden">
+                    {getStatusBadge(showcase.status)}
+                  </div>
                 </div>
 
                 {/* Content */}
@@ -158,7 +161,9 @@ function AccountSubmissionsPage() {
                         {showcase.tagline}
                       </p>
                     </div>
-                    {getStatusBadge(showcase.status)}
+                    <div className="hidden sm:block">
+                      {getStatusBadge(showcase.status)}
+                    </div>
                   </div>
 
                   {/* Libraries */}
diff --git a/src/routes/admin/audit.tsx b/src/routes/admin/audit.tsx
index f20d9a082..605f318eb 100644
--- a/src/routes/admin/audit.tsx
+++ b/src/routes/admin/audit.tsx
@@ -30,7 +30,8 @@ import {
   StatsCard,
 } from '~/components/admin'
 import { useAdminGuard } from '~/hooks/useAdminGuard'
-import { requireCapability } from '~/utils/auth.server'
+import { requireCapability } from '~/utils/auth.functions'
+import { pageIndexSchema, pageSizeSchema } from '~/utils/schemas'
 
 type AuditLogEntry = {
   id: string
@@ -59,12 +60,6 @@ const ACTION_LABELS: Record<string, string> = {
   'role.delete': 'Deleted Role',
   'role.assignment.create': 'Assigned Role',
   'role.assignment.delete': 'Removed Role',
-  'banner.create': 'Created Banner',
-  'banner.update': 'Updated Banner',
-  'banner.delete': 'Deleted Banner',
-  'feed.entry.create': 'Created Feed Entry',
-  'feed.entry.update': 'Updated Feed Entry',
-  'feed.entry.delete': 'Deleted Feed Entry',
   'feedback.moderate': 'Moderated Feedback',
 }
 
@@ -102,8 +97,8 @@ export const Route = createFileRoute('/admin/audit')({
         actorId: v.optional(v.string()),
         action: v.optional(v.string()),
         targetType: v.optional(v.string()),
-        page: v.optional(v.pipe(v.number(), v.integer(), v.minValue(0))),
-        pageSize: v.optional(v.pipe(v.number(), v.integer(), v.minValue(1))),
+        page: v.optional(pageIndexSchema),
+        pageSize: v.optional(pageSizeSchema),
       }),
       search,
     ),
@@ -266,13 +261,6 @@ function AuditPage() {
                   to: '/admin/roles/$roleId',
                   params: { roleId: entry.targetId },
                 }
-              case 'banner':
-                return {
-                  to: '/admin/banners/$id',
-                  params: { id: entry.targetId },
-                }
-              case 'feed_entry':
-                return { to: '/admin/feed/$id', params: { id: entry.targetId } }
               case 'showcase':
                 return {
                   to: '/admin/showcases_/$id',
@@ -367,6 +355,7 @@ function AuditPage() {
     [],
   )
 
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     data: (auditQuery?.data?.page || []) as AuditLogEntry[],
     columns,
diff --git a/src/routes/admin/banners.$id.tsx b/src/routes/admin/banners.$id.tsx
deleted file mode 100644
index 520023a19..000000000
--- a/src/routes/admin/banners.$id.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useNavigate, createFileRoute } from '@tanstack/react-router'
-import { useQuery } from '@tanstack/react-query'
-import { BannerEditor } from '~/components/admin/BannerEditor'
-import { getBanner, type BannerWithMeta } from '~/utils/banner.functions'
-import { useCapabilities } from '~/hooks/useCapabilities'
-import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
-import { hasCapability } from '~/db/types'
-import { Button } from '~/ui'
-import * as v from 'valibot'
-
-export const Route = createFileRoute('/admin/banners/$id')({
-  component: BannerEditorPage,
-  validateSearch: (search) => v.parse(v.object({}), search),
-})
-
-function BannerEditorPage() {
-  const { id } = Route.useParams()
-  const navigate = useNavigate()
-  const isNew = id === 'new'
-
-  const userQuery = useCurrentUserQuery()
-  const user = userQuery.data
-  const capabilities = useCapabilities()
-
-  const bannerQuery = useQuery({
-    queryKey: ['banner', id],
-    queryFn: () => getBanner({ data: { id } }),
-    enabled: !isNew,
-  })
-
-  if (user === undefined) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div>Loading...</div>
-      </div>
-    )
-  }
-
-  const canAdmin = hasCapability(capabilities, 'admin')
-  if (user && !canAdmin) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
-          <p className="text-gray-600 dark:text-gray-400 mb-4">
-            You don't have permission to access the admin area.
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  if (!isNew && bannerQuery.isLoading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div>Loading...</div>
-      </div>
-    )
-  }
-
-  if (!isNew && !bannerQuery.data) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold mb-2">Banner Not Found</h1>
-          <Button
-            className="mt-4"
-            onClick={() => navigate({ to: '/admin/banners' })}
-          >
-            Back to Banners
-          </Button>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="min-h-screen p-8">
-      <div className="max-w-6xl mx-auto">
-        <BannerEditor
-          banner={isNew ? null : (bannerQuery.data as BannerWithMeta)}
-          onSave={() => navigate({ to: '/admin/banners' })}
-          onCancel={() => navigate({ to: '/admin/banners' })}
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/src/routes/admin/banners.index.tsx b/src/routes/admin/banners.index.tsx
deleted file mode 100644
index 23265fbe4..000000000
--- a/src/routes/admin/banners.index.tsx
+++ /dev/null
@@ -1,344 +0,0 @@
-import { Link, createFileRoute } from '@tanstack/react-router'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import {
-  listBanners,
-  toggleBannerActive,
-  deleteBanner,
-  type BannerWithMeta,
-} from '~/utils/banner.functions'
-import {
-  Plus,
-  Pencil,
-  Trash2,
-  Globe,
-  BookOpen,
-  Info,
-  AlertTriangle,
-  CheckCircle,
-  Gift,
-  ToggleRight,
-  ToggleLeft,
-  ExternalLink,
-  Flag,
-} from 'lucide-react'
-import { Button } from '~/ui'
-import * as v from 'valibot'
-import { formatDistanceToNow } from '~/utils/dates'
-import {
-  AdminAccessDenied,
-  AdminLoading,
-  AdminPageHeader,
-  AdminEmptyState,
-} from '~/components/admin'
-import { useAdminGuard } from '~/hooks/useAdminGuard'
-import { useDeleteWithConfirmation } from '~/hooks/useDeleteWithConfirmation'
-
-export const Route = createFileRoute('/admin/banners/')({
-  component: BannersAdminPage,
-  validateSearch: (search) =>
-    v.parse(
-      v.object({
-        includeInactive: v.optional(v.boolean(), true),
-      }),
-      search,
-    ),
-})
-
-const STYLE_CONFIG = {
-  info: {
-    icon: Info,
-    bgClass: 'bg-blue-100 dark:bg-blue-950',
-    textClass: 'text-blue-700 dark:text-blue-300',
-  },
-  warning: {
-    icon: AlertTriangle,
-    bgClass: 'bg-amber-100 dark:bg-amber-950',
-    textClass: 'text-amber-700 dark:text-amber-300',
-  },
-  success: {
-    icon: CheckCircle,
-    bgClass: 'bg-green-100 dark:bg-green-950',
-    textClass: 'text-green-700 dark:text-green-300',
-  },
-  promo: {
-    icon: Gift,
-    bgClass: 'bg-purple-100 dark:bg-purple-950',
-    textClass: 'text-purple-700 dark:text-purple-300',
-  },
-}
-
-function BannersAdminPage() {
-  const guard = useAdminGuard()
-  const navigate = Route.useNavigate()
-  const search = Route.useSearch()
-  const queryClient = useQueryClient()
-
-  const bannersQuery = useQuery({
-    queryKey: ['banners', { includeInactive: search.includeInactive }],
-    queryFn: () =>
-      listBanners({ data: { includeInactive: search.includeInactive } }),
-  })
-
-  const toggleActiveMutation = useMutation({
-    mutationFn: (params: { id: string; isActive: boolean }) =>
-      toggleBannerActive({ data: params }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['banners'] })
-    },
-  })
-
-  const deleteMutation = useMutation({
-    mutationFn: (params: { id: string }) => deleteBanner({ data: params }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['banners'] })
-    },
-  })
-
-  const handleToggleActive = async (banner: BannerWithMeta) => {
-    await toggleActiveMutation.mutateAsync({
-      id: banner.id,
-      isActive: !banner.isActive,
-    })
-  }
-
-  const { handleDelete } = useDeleteWithConfirmation({
-    getItemName: (banner: BannerWithMeta) => banner.title,
-    deleteFn: async (banner) => {
-      await deleteMutation.mutateAsync({ id: banner.id })
-    },
-    itemLabel: 'banner',
-  })
-
-  if (guard.status === 'loading') {
-    return <AdminLoading />
-  }
-  if (guard.status === 'denied') {
-    return <AdminAccessDenied />
-  }
-
-  const banners = bannersQuery.data ?? []
-
-  return (
-    <div className="flex-1 min-w-0 flex flex-col gap-4 pt-4 pb-4">
-      <div className="px-4">
-        <AdminPageHeader
-          icon={<Flag />}
-          title="Banner Management"
-          isLoading={bannersQuery.isLoading}
-          actions={
-            <Link to="/admin/banners/$id" params={{ id: 'new' }}>
-              <Button size="sm">
-                <Plus className="w-4 h-4" />
-                Create Banner
-              </Button>
-            </Link>
-          }
-        />
-      </div>
-
-      {/* Filters */}
-      <div className="px-4">
-        <label className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
-          <input
-            type="checkbox"
-            checked={search.includeInactive}
-            onChange={(e) =>
-              navigate({
-                search: (s: { includeInactive?: boolean }) => ({
-                  ...s,
-                  includeInactive: e.target.checked,
-                }),
-                replace: true,
-              })
-            }
-            className="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
-          />
-          Show inactive banners
-        </label>
-      </div>
-
-      {/* Banners List */}
-      <div className="px-4 flex-1">
-        {bannersQuery.isLoading ? (
-          <div className="text-center py-12 text-gray-500">
-            Loading banners...
-          </div>
-        ) : banners.length === 0 ? (
-          <AdminEmptyState
-            icon={<Flag className="w-12 h-12" />}
-            title="No banners found"
-            description="Create your first banner to get started."
-            action={{ label: 'Create Banner', to: '/admin/banners/new' }}
-          />
-        ) : (
-          <div className="space-y-4">
-            {banners.map((banner) => {
-              const styleConfig = STYLE_CONFIG[banner.style]
-              const Icon = styleConfig.icon
-              const isExpired =
-                // eslint-disable-next-line react-hooks/purity
-                banner.expiresAt && banner.expiresAt < Date.now()
-              const hasntStarted =
-                // eslint-disable-next-line react-hooks/purity
-                banner.startsAt && banner.startsAt > Date.now()
-
-              return (
-                <div
-                  key={banner.id}
-                  className={`bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden ${
-                    !banner.isActive ? 'opacity-60' : ''
-                  }`}
-                >
-                  <div className="p-4">
-                    <div className="flex items-start gap-4">
-                      {/* Style Icon */}
-                      <div
-                        className={`p-3 rounded-lg ${styleConfig.bgClass} ${styleConfig.textClass}`}
-                      >
-                        <Icon className="w-5 h-5" />
-                      </div>
-
-                      {/* Content */}
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-1">
-                          <h3 className="font-semibold text-gray-900 dark:text-white truncate">
-                            {banner.title}
-                          </h3>
-                          {/* Status badges */}
-                          {!banner.isActive && (
-                            <span className="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-full">
-                              Inactive
-                            </span>
-                          )}
-                          {isExpired && (
-                            <span className="px-2 py-0.5 text-xs bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 rounded-full">
-                              Expired
-                            </span>
-                          )}
-                          {hasntStarted && (
-                            <span className="px-2 py-0.5 text-xs bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 rounded-full">
-                              Scheduled
-                            </span>
-                          )}
-                        </div>
-
-                        {banner.content && (
-                          <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-1 mb-2">
-                            {banner.content}
-                          </p>
-                        )}
-
-                        <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
-                          {/* Scope */}
-                          <span className="flex items-center gap-1">
-                            {banner.scope === 'global' ? (
-                              <>
-                                <Globe className="w-3 h-3 text-gray-400" />
-                                Global
-                              </>
-                            ) : (
-                              <>
-                                <BookOpen className="w-3 h-3 text-gray-400" />
-                                {banner.pathPrefixes.length} path
-                                {banner.pathPrefixes.length !== 1 ? 's' : ''}
-                              </>
-                            )}
-                          </span>
-
-                          {/* Link */}
-                          {banner.linkUrl && (
-                            <a
-                              href={banner.linkUrl}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="flex items-center gap-1 text-blue-500 hover:text-blue-600"
-                            >
-                              <ExternalLink className="w-3 h-3" />
-                              {banner.linkText || 'Link'}
-                            </a>
-                          )}
-
-                          {/* Schedule */}
-                          {banner.startsAt && (
-                            <span>
-                              Starts:{' '}
-                              {formatDistanceToNow(new Date(banner.startsAt), {
-                                addSuffix: true,
-                              })}
-                            </span>
-                          )}
-                          {banner.expiresAt && (
-                            <span>
-                              Expires:{' '}
-                              {formatDistanceToNow(new Date(banner.expiresAt), {
-                                addSuffix: true,
-                              })}
-                            </span>
-                          )}
-
-                          {/* Priority */}
-                          <span>Priority: {banner.priority}</span>
-                        </div>
-                      </div>
-
-                      {/* Actions */}
-                      <div className="flex items-center gap-2">
-                        <button
-                          onClick={() => handleToggleActive(banner)}
-                          className={`p-2 rounded-lg transition-colors ${
-                            banner.isActive
-                              ? 'text-green-600 hover:bg-green-100 dark:hover:bg-green-900/30'
-                              : 'text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
-                          }`}
-                          title={banner.isActive ? 'Deactivate' : 'Activate'}
-                        >
-                          {banner.isActive ? (
-                            <ToggleRight className="w-5 h-5" />
-                          ) : (
-                            <ToggleLeft className="w-5 h-5" />
-                          )}
-                        </button>
-                        <Link
-                          to="/admin/banners/$id"
-                          params={{ id: banner.id }}
-                          className="p-2 text-blue-600 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-lg transition-colors"
-                          title="Edit"
-                        >
-                          <Pencil className="w-4 h-4" />
-                        </Link>
-                        <button
-                          onClick={() => handleDelete(banner)}
-                          className="p-2 text-red-600 hover:bg-red-100 dark:hover:bg-red-900/30 rounded-lg transition-colors"
-                          title="Delete"
-                        >
-                          <Trash2 className="w-4 h-4" />
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Preview Mini Banner */}
-                  <div
-                    className={`px-4 py-2 text-xs ${styleConfig.bgClass} ${styleConfig.textClass} border-t border-gray-200 dark:border-gray-700`}
-                  >
-                    <div className="flex items-center gap-2">
-                      <Icon className="w-4 h-4 flex-shrink-0" />
-                      <span className="truncate font-medium">
-                        {banner.title}
-                      </span>
-                      {banner.linkUrl && (
-                        <span className="text-current/70 underline">
-                          {banner.linkText || 'Learn More'}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/src/routes/admin/docs.tsx b/src/routes/admin/docs.tsx
new file mode 100644
index 000000000..d356afff0
--- /dev/null
+++ b/src/routes/admin/docs.tsx
@@ -0,0 +1,16 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { DocsCacheTab } from '~/components/admin/DocsCacheTab'
+
+export const Route = createFileRoute('/admin/docs')({
+  component: DocsAdminPage,
+})
+
+function DocsAdminPage() {
+  return (
+    <div className="w-full p-4">
+      <div className="mx-auto max-w-7xl">
+        <DocsCacheTab />
+      </div>
+    </div>
+  )
+}
diff --git a/src/routes/admin/feed.$id.tsx b/src/routes/admin/feed.$id.tsx
deleted file mode 100644
index 9d0f686c4..000000000
--- a/src/routes/admin/feed.$id.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useNavigate, createFileRoute } from '@tanstack/react-router'
-import { useQuery } from '@tanstack/react-query'
-import { FeedEntryEditor } from '~/components/admin/FeedEntryEditor'
-import type { FeedEntry } from '~/components/FeedEntry'
-import { useCapabilities } from '~/hooks/useCapabilities'
-import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
-import { hasCapability } from '~/db/types'
-import { getFeedEntryQueryOptions } from '~/queries/feed'
-import { Button } from '~/ui'
-import * as v from 'valibot'
-export const Route = createFileRoute('/admin/feed/$id')({
-  component: FeedEditorPage,
-  validateSearch: (search) => v.parse(v.object({}), search),
-})
-
-function FeedEditorPage() {
-  const { id } = Route.useParams()
-  const navigate = useNavigate()
-  const isNew = id === 'new'
-
-  const userQuery = useCurrentUserQuery()
-  const user = userQuery.data
-  const capabilities = useCapabilities()
-  const entryQuery = useQuery({
-    ...getFeedEntryQueryOptions(id),
-    enabled: !isNew,
-  })
-
-  if (user === undefined) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div>Loading...</div>
-      </div>
-    )
-  }
-
-  const canAdmin = hasCapability(capabilities, 'admin')
-  if (user && !canAdmin) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
-          <p className="text-gray-600 dark:text-gray-400 mb-4">
-            You don't have permission to access the admin area.
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  if (!isNew && entryQuery.isLoading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div>Loading...</div>
-      </div>
-    )
-  }
-
-  if (!isNew && !entryQuery.data) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold mb-2">Entry Not Found</h1>
-          <Button
-            className="mt-4"
-            onClick={() => navigate({ to: '/admin/feed' })}
-          >
-            Back to Feed Admin
-          </Button>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="min-h-screen p-8">
-      <div className="max-w-4xl mx-auto">
-        <FeedEntryEditor
-          entry={
-            isNew ? null : ((entryQuery.data as FeedEntry | undefined) ?? null)
-          }
-          onSave={() => navigate({ to: '/admin/feed' })}
-          onCancel={() => navigate({ to: '/admin/feed' })}
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/src/routes/admin/feed.index.tsx b/src/routes/admin/feed.index.tsx
deleted file mode 100644
index 37b4639f9..000000000
--- a/src/routes/admin/feed.index.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { Link, createFileRoute } from '@tanstack/react-router'
-import {
-  useToggleFeedEntryVisibility,
-  useSetFeedEntryFeatured,
-  useDeleteFeedEntry,
-} from '~/utils/mutations'
-import * as v from 'valibot'
-import { Plus } from 'lucide-react'
-import { Button } from '~/ui'
-import { FeedEntry } from '~/components/FeedEntry'
-import { FeedSyncStatus } from '~/components/admin/FeedSyncStatus'
-import { FeedPage as FeedPageComponent } from '~/components/FeedPage'
-import { useFeedQuery } from '~/hooks/useFeedQuery'
-import {
-  libraryIdSchema,
-  entryTypeSchema,
-  releaseLevelSchema,
-} from '~/utils/schemas'
-import { AdminAccessDenied, AdminLoading } from '~/components/admin'
-import { useAdminGuard } from '~/hooks/useAdminGuard'
-import { useDeleteWithConfirmation } from '~/hooks/useDeleteWithConfirmation'
-
-export const Route = createFileRoute('/admin/feed/')({
-  component: FeedAdminPage,
-  validateSearch: (search: Record<string, unknown>) => {
-    const hasReleaseLevels = 'releaseLevels' in search
-    const releaseLevelsValue = search.releaseLevels
-
-    return v.parse(
-      v.object({
-        entryTypes: v.optional(v.array(entryTypeSchema)),
-        libraries: v.optional(v.array(libraryIdSchema)),
-        partners: v.optional(v.array(v.string())),
-        tags: v.optional(v.array(v.string())),
-        releaseLevels: hasReleaseLevels
-          ? v.fallback(
-              v.array(releaseLevelSchema),
-              Array.isArray(releaseLevelsValue) ? releaseLevelsValue : [],
-            )
-          : v.optional(v.array(releaseLevelSchema)),
-        includePrerelease: v.optional(v.boolean()),
-        featured: v.optional(v.boolean()),
-        search: v.optional(v.string()),
-        page: v.optional(v.number(), 1),
-        pageSize: v.optional(
-          v.pipe(v.number(), v.integer(), v.minValue(1)),
-          50,
-        ),
-        viewMode: v.optional(
-          v.fallback(v.picklist(['table', 'timeline']), 'table'),
-          'table',
-        ),
-        expanded: v.optional(v.array(v.string())),
-      }),
-      search,
-    )
-  },
-})
-
-function FeedAdminPage() {
-  const guard = useAdminGuard()
-  const navigate = Route.useNavigate()
-  const search = Route.useSearch()
-
-  const feedQuery = useFeedQuery({
-    page: search.page ?? 1,
-    pageSize: search.pageSize ?? 50,
-    filters: {
-      entryTypes: search.entryTypes,
-      libraries: search.libraries,
-      partners: search.partners,
-      tags: search.tags,
-      releaseLevels: search.releaseLevels,
-      includePrerelease: search.includePrerelease,
-      featured: search.featured,
-      search: search.search,
-      includeHidden: true,
-    },
-  })
-
-  const toggleVisibility = useToggleFeedEntryVisibility()
-  const setFeatured = useSetFeedEntryFeatured()
-  const deleteEntry = useDeleteFeedEntry()
-
-  const handleToggleVisibility = async (
-    entry: FeedEntry,
-    isVisible: boolean,
-  ) => {
-    await toggleVisibility.mutateAsync({ id: entry.id, showInFeed: isVisible })
-    feedQuery.refetch()
-  }
-
-  const handleToggleFeatured = async (entry: FeedEntry, featured: boolean) => {
-    await setFeatured.mutateAsync({ id: entry.id, featured })
-    feedQuery.refetch()
-  }
-
-  const { handleDelete } = useDeleteWithConfirmation({
-    getItemName: (entry: FeedEntry) => entry.title,
-    deleteFn: async (entry) => {
-      await deleteEntry.mutateAsync({ id: entry.id })
-      feedQuery.refetch()
-    },
-    itemLabel: 'entry',
-  })
-
-  const handleEdit = (entry: FeedEntry) => {
-    navigate({
-      to: '/admin/feed/$id',
-      params: { id: entry.id },
-    })
-  }
-
-  if (guard.status === 'loading') {
-    return <AdminLoading />
-  }
-  if (guard.status === 'denied') {
-    return <AdminAccessDenied />
-  }
-
-  return (
-    <div className="flex-1 min-w-0 flex flex-col gap-4 pt-4 pb-0 min-h-0">
-      <div className="px-2 sm:px-4 flex items-center justify-between">
-        <h1 className="text-3xl font-black">Feed Admin</h1>
-        <Link to="/admin/feed/$id" params={{ id: 'new' }}>
-          <Button size="sm">
-            <Plus />
-            Create Entry
-          </Button>
-        </Link>
-      </div>
-      <div className="px-2 sm:px-4">
-        <FeedSyncStatus
-          onSyncComplete={() => {
-            feedQuery.refetch()
-          }}
-        />
-      </div>
-      <div className="flex-1 min-h-0 relative">
-        <FeedPageComponent
-          search={search}
-          onNavigate={(updates) => {
-            navigate({
-              search: (s: typeof search) => ({ ...s, ...updates.search }),
-              replace: updates.replace ?? true,
-              resetScroll: updates.resetScroll ?? false,
-            })
-          }}
-          includeHidden={true}
-          adminActions={{
-            onEdit: handleEdit,
-            onToggleVisibility: handleToggleVisibility,
-            onToggleFeatured: handleToggleFeatured,
-            onDelete: handleDelete,
-          }}
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/src/routes/admin/feedback.index.tsx b/src/routes/admin/feedback.index.tsx
index 642a16030..f14256b3f 100644
--- a/src/routes/admin/feedback.index.tsx
+++ b/src/routes/admin/feedback.index.tsx
@@ -3,8 +3,24 @@ import * as v from 'valibot'
 import { seo } from '~/utils/seo'
 import { FeedbackModerationPage } from '~/components/FeedbackModerationPage'
 import { listDocFeedbackForModerationQueryOptions } from '~/queries/docFeedback'
-import { requireCapability } from '~/utils/auth.server'
-import { libraryIdSchema, docFeedbackStatusSchema } from '~/utils/schemas'
+import { requireCapability } from '~/utils/auth.functions'
+import {
+  libraryIdSchema,
+  docFeedbackStatusSchema,
+  isoDateSchema,
+  pageNumberSchema,
+  pageSizeSchema,
+} from '~/utils/schemas'
+
+const searchSchema = v.object({
+  page: v.optional(pageNumberSchema, 1),
+  pageSize: v.optional(pageSizeSchema, 50),
+  status: v.optional(v.pipe(v.array(docFeedbackStatusSchema), v.maxLength(4))),
+  libraryId: v.optional(libraryIdSchema),
+  isDetached: v.optional(v.boolean()),
+  dateFrom: v.optional(isoDateSchema),
+  dateTo: v.optional(isoDateSchema),
+})
 
 export const Route = createFileRoute('/admin/feedback/')({
   staleTime: 1000 * 60 * 5, // 5 minutes
@@ -18,25 +34,7 @@ export const Route = createFileRoute('/admin/feedback/')({
       throw redirect({ to: '/login' })
     }
   },
-  validateSearch: (search) => {
-    const parsed = v.parse(
-      v.object({
-        page: v.optional(v.number(), 1),
-        pageSize: v.optional(
-          v.pipe(v.number(), v.integer(), v.minValue(1)),
-          50,
-        ),
-        status: v.optional(v.array(docFeedbackStatusSchema)),
-        libraryId: v.optional(libraryIdSchema),
-        isDetached: v.optional(v.boolean()),
-        dateFrom: v.optional(v.string()),
-        dateTo: v.optional(v.string()),
-      }),
-      search,
-    )
-
-    return parsed
-  },
+  validateSearch: searchSchema,
   loaderDeps: ({ search }) => ({
     page: search.page,
     pageSize: search.pageSize,
diff --git a/src/routes/admin/github-stats.tsx b/src/routes/admin/github-stats.tsx
index cead57142..925fa55ff 100644
--- a/src/routes/admin/github-stats.tsx
+++ b/src/routes/admin/github-stats.tsx
@@ -20,7 +20,7 @@ import {
   listGitHubStatsCache,
   refreshGitHubStats,
   refreshAllGitHubStats,
-} from '~/utils/stats-admin.server'
+} from '~/utils/stats-admin.functions'
 import { formatDistanceToNow } from '~/utils/dates'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { Box, RefreshCw, Star, Users } from 'lucide-react'
@@ -302,6 +302,7 @@ function GitHubStatsAdmin() {
     [refreshingKey, refreshAllMutation, refreshMutation],
   )
 
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     data: cacheEntries ?? [],
     columns,
diff --git a/src/routes/admin/index.tsx b/src/routes/admin/index.tsx
index 89bbb035c..ab19f191c 100644
--- a/src/routes/admin/index.tsx
+++ b/src/routes/admin/index.tsx
@@ -3,13 +3,13 @@ import { useQuery } from '@tanstack/react-query'
 import { useCapabilities } from '~/hooks/useCapabilities'
 import { hasCapability } from '~/db/types'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
-import { getUserStats, getSignupsChartData } from '~/utils/user-stats.server'
+import { getUserStats, getSignupsChartData } from '~/utils/user-stats.functions'
 import { getActivityStats, getLoginsChartData } from '~/utils/audit.functions'
 import {
   getActivityStatsAdmin,
   getDauChartData,
 } from '~/utils/activity.functions'
-import { useState } from 'react'
+import { Suspense, lazy, useState } from 'react'
 import {
   ArrowDown,
   ArrowUp,
@@ -28,7 +28,6 @@ import {
 import { Card } from '~/components/Card'
 import { Badge, Button } from '~/ui'
 import * as v from 'valibot'
-import { TimeSeriesChart } from '~/components/charts/TimeSeriesChart'
 import { ChartControls } from '~/components/charts/ChartControls'
 import {
   type TimeRange,
@@ -37,17 +36,30 @@ import {
   defaultBinForRange,
 } from '~/utils/chart'
 
+const LazyTimeSeriesChart = lazy(() =>
+  import('~/components/charts/TimeSeriesChart').then((m) => ({
+    default: m.TimeSeriesChart,
+  })),
+)
+
+function ChartFallback({ height }: { height: number }) {
+  return (
+    <div
+      className="animate-pulse rounded bg-gray-100 dark:bg-gray-800/40"
+      style={{ height }}
+    />
+  )
+}
+
+const searchSchema = v.object({
+  tab: v.fallback(
+    v.optional(v.picklist(['overview', 'users', 'activity', 'ads'])),
+    'overview',
+  ),
+})
+
 export const Route = createFileRoute('/admin/')({
-  validateSearch: (search) =>
-    v.parse(
-      v.object({
-        tab: v.optional(
-          v.picklist(['overview', 'users', 'activity', 'ads']),
-          'overview',
-        ),
-      }),
-      search,
-    ),
+  validateSearch: searchSchema,
   component: AdminPage,
 })
 
@@ -56,7 +68,20 @@ function AdminPage() {
   const user = userQuery.data
   const capabilities = useCapabilities()
 
-  if (user === undefined) {
+  if (userQuery.isError && user === undefined) {
+    return (
+      <ErrorState
+        title="Failed to load admin session"
+        description={
+          userQuery.error instanceof Error
+            ? userQuery.error.message
+            : 'Unable to load the current user.'
+        }
+      />
+    )
+  }
+
+  if (userQuery.isPending && user === undefined) {
     return (
       <div className="min-h-screen flex items-center justify-center">
         <div>Loading...</div>
@@ -88,24 +113,44 @@ function AdminPage() {
 function AdminDashboard() {
   const { tab } = useSearch({ from: '/admin/' })
 
-  const { data: stats, isLoading: statsLoading } = useQuery({
+  const statsQuery = useQuery({
     queryKey: ['admin', 'user-stats'],
     queryFn: () => getUserStats(),
     staleTime: 0,
   })
 
-  const { data: activityStats, isLoading: activityLoading } = useQuery({
+  const activityStatsQuery = useQuery({
     queryKey: ['admin', 'activity-stats'],
     queryFn: () => getActivityStats(),
     staleTime: 0,
   })
 
-  const { data: dauStats, isLoading: dauLoading } = useQuery({
+  const dauStatsQuery = useQuery({
     queryKey: ['admin', 'dau-stats'],
     queryFn: () => getActivityStatsAdmin(),
     staleTime: 0,
   })
 
+  const stats = statsQuery.data
+  const activityStats = activityStatsQuery.data
+  const dauStats = dauStatsQuery.data
+
+  const dashboardError =
+    statsQuery.error ?? activityStatsQuery.error ?? dauStatsQuery.error
+
+  if (dashboardError) {
+    return (
+      <ErrorState
+        title="Failed to load admin dashboard"
+        description={
+          dashboardError instanceof Error
+            ? dashboardError.message
+            : 'One or more admin queries failed.'
+        }
+      />
+    )
+  }
+
   const tabs = [
     { id: 'overview', label: 'Overview', icon: <LayoutDashboard /> },
     { id: 'users', label: 'Users', icon: <Users /> },
@@ -155,18 +200,26 @@ function AdminDashboard() {
             stats={stats}
             activityStats={activityStats}
             dauStats={dauStats}
-            isLoading={statsLoading || activityLoading || dauLoading}
+            isLoading={
+              statsQuery.isLoading ||
+              activityStatsQuery.isLoading ||
+              dauStatsQuery.isLoading
+            }
           />
         )}
-        {tab === 'users' && <UsersTab stats={stats} isLoading={statsLoading} />}
+        {tab === 'users' && (
+          <UsersTab stats={stats} isLoading={statsQuery.isLoading} />
+        )}
         {tab === 'activity' && (
           <ActivityTab
             activityStats={activityStats}
             dauStats={dauStats}
-            isLoading={activityLoading || dauLoading}
+            isLoading={activityStatsQuery.isLoading || dauStatsQuery.isLoading}
           />
         )}
-        {tab === 'ads' && <AdsTab stats={stats} isLoading={statsLoading} />}
+        {tab === 'ads' && (
+          <AdsTab stats={stats} isLoading={statsQuery.isLoading} />
+        )}
       </div>
     </div>
   )
@@ -204,7 +257,7 @@ function OverviewTab({
     <div className="space-y-6">
       {/* Key Metrics Row */}
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-blue-200 dark:border-blue-800 p-4">
+        <Card className="bg-linear-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-blue-200 dark:border-blue-800 p-4">
           <div className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
             Total Users
           </div>
@@ -228,7 +281,7 @@ function OverviewTab({
         </Card>
 
         {dauStats && (
-          <Card className="bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 border-emerald-200 dark:border-emerald-800 p-4">
+          <Card className="bg-linear-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 border-emerald-200 dark:border-emerald-800 p-4">
             <div className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
               DAU
             </div>
@@ -312,7 +365,7 @@ function OverviewTab({
 
         {/* Streak Leaderboard Preview */}
         {dauStats && dauStats.streakLeaderboard.length > 0 && (
-          <Card className="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800 p-6">
+          <Card className="bg-linear-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800 p-6">
             <div className="flex items-center justify-between mb-4">
               <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                 <Trophy className="text-amber-500" />
@@ -394,7 +447,7 @@ function UsersTab({
     <div className="space-y-6">
       {/* Overview Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-blue-200 dark:border-blue-800 p-6">
+        <Card className="bg-linear-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-blue-200 dark:border-blue-800 p-6">
           <div className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
             Total Users
           </div>
@@ -508,7 +561,7 @@ function ActivityTab({
       {/* DAU/WAU/MAU Cards */}
       {dauStats && (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          <Card className="bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 border-emerald-200 dark:border-emerald-800 p-6">
+          <Card className="bg-linear-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 border-emerald-200 dark:border-emerald-800 p-6">
             <div className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
               DAU (Today)
             </div>
@@ -597,7 +650,7 @@ function ActivityTab({
       {/* Login Stats */}
       {activityStats && (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          <Card className="bg-gradient-to-br from-cyan-50 to-blue-50 dark:from-cyan-900/20 dark:to-blue-900/20 border-cyan-200 dark:border-cyan-800 p-6">
+          <Card className="bg-linear-to-br from-cyan-50 to-blue-50 dark:from-cyan-900/20 dark:to-blue-900/20 border-cyan-200 dark:border-cyan-800 p-6">
             <div className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
               Today's Logins
             </div>
@@ -765,7 +818,7 @@ function ActivityTab({
                         <span className="text-sm font-medium text-gray-500 dark:text-gray-400 w-6">
                           #{index + 1}
                         </span>
-                        <div className="flex-shrink-0 h-8 w-8">
+                        <div className="shrink-0 h-8 w-8">
                           {user.userImage ? (
                             <img
                               className="h-8 w-8 rounded-full"
@@ -797,7 +850,7 @@ function ActivityTab({
 
       {/* Streak Leaderboard */}
       {dauStats && dauStats.streakLeaderboard.length > 0 && (
-        <Card className="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800 p-6">
+        <Card className="bg-linear-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-amber-200 dark:border-amber-800 p-6">
           <div className="flex items-center gap-3 mb-4">
             <Trophy className="text-2xl text-amber-500" />
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
@@ -824,7 +877,7 @@ function ActivityTab({
                   >
                     #{index + 1}
                   </span>
-                  <div className="flex-shrink-0 h-8 w-8">
+                  <div className="shrink-0 h-8 w-8">
                     {user.userImage ? (
                       <img
                         className="h-8 w-8 rounded-full"
@@ -863,7 +916,7 @@ function ActivityTab({
 
       {/* Admin Activity */}
       {activityStats && (
-        <Card className="bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20 border-orange-200 dark:border-orange-800 p-6">
+        <Card className="bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20 border-orange-200 dark:border-orange-800 p-6">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
               <Shield className="text-2xl text-orange-500" />
@@ -944,7 +997,7 @@ function AdsTab({
   return (
     <div className="space-y-6">
       {/* Waitlist Demand - Primary Focus */}
-      <Card className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 border-purple-200 dark:border-purple-800 p-6">
+      <Card className="bg-linear-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 border-purple-200 dark:border-purple-800 p-6">
         <div className="flex items-center gap-3 mb-4">
           <List className="text-2xl text-purple-500" />
           <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
@@ -1062,6 +1115,25 @@ function LoadingState() {
   )
 }
 
+function ErrorState({
+  title,
+  description,
+}: {
+  title: string
+  description: string
+}) {
+  return (
+    <div className="text-center py-12">
+      <div className="text-lg font-semibold text-gray-900 dark:text-white">
+        {title}
+      </div>
+      <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+        {description}
+      </div>
+    </div>
+  )
+}
+
 function ChangeIndicator({ value }: { value: number }) {
   const isPositive = value > 0
   const isNegative = value < 0
@@ -1145,14 +1217,16 @@ function SignupsChartCard({
           Loading...
         </div>
       ) : (
-        <TimeSeriesChart
-          data={data ?? []}
-          binType={binType}
-          variant={variant}
-          color={color}
-          height={height}
-          yLabel={variant === 'cumulative' ? 'Total Users' : 'Signups'}
-        />
+        <Suspense fallback={<ChartFallback height={height} />}>
+          <LazyTimeSeriesChart
+            data={data ?? []}
+            binType={binType}
+            variant={variant}
+            color={color}
+            height={height}
+            yLabel={variant === 'cumulative' ? 'Total Users' : 'Signups'}
+          />
+        </Suspense>
       )}
     </Card>
   )
@@ -1209,14 +1283,16 @@ function DauChartCard({
           Loading...
         </div>
       ) : (
-        <TimeSeriesChart
-          data={data ?? []}
-          binType={binType}
-          variant="area"
-          color="#10b981"
-          height={height}
-          yLabel="Active Users"
-        />
+        <Suspense fallback={<ChartFallback height={height} />}>
+          <LazyTimeSeriesChart
+            data={data ?? []}
+            binType={binType}
+            variant="area"
+            color="#10b981"
+            height={height}
+            yLabel="Active Users"
+          />
+        </Suspense>
       )}
     </Card>
   )
@@ -1261,14 +1337,16 @@ function LoginsChartCard({
           Loading...
         </div>
       ) : (
-        <TimeSeriesChart
-          data={data ?? []}
-          binType={binType}
-          variant="bar"
-          color="#06b6d4"
-          height={height}
-          yLabel="Logins"
-        />
+        <Suspense fallback={<ChartFallback height={height} />}>
+          <LazyTimeSeriesChart
+            data={data ?? []}
+            binType={binType}
+            variant="bar"
+            color="#06b6d4"
+            height={height}
+            yLabel="Logins"
+          />
+        </Suspense>
       )}
     </Card>
   )
diff --git a/src/routes/admin/intent.tsx b/src/routes/admin/intent.tsx
new file mode 100644
index 000000000..5533cc4e7
--- /dev/null
+++ b/src/routes/admin/intent.tsx
@@ -0,0 +1,1020 @@
+import * as React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  RefreshCw,
+  Play,
+  RotateCcw,
+  Trash2,
+  BookOpen,
+  ChevronDown,
+  ChevronRight,
+  AlertTriangle,
+  CheckCircle2,
+  Clock,
+  Wrench,
+} from 'lucide-react'
+import { Button } from '~/ui'
+import { Card } from '~/components/Card'
+import { formatDistanceToNow } from '~/utils/dates'
+import {
+  getIntentAdminStats,
+  getIntentWorkflowHealth,
+  listIntentPackages,
+  listFailedVersions,
+  listIntentWorkflowRuns,
+  repairIntentWorkflowStore,
+  triggerIntentDiscover,
+  triggerIntentProcess,
+  retryIntentVersion,
+  deleteIntentPackage,
+  resetFailedVersions,
+  seedIntentPackage,
+  discoverViaGitHub,
+} from '~/utils/intent-admin.functions'
+
+export const Route = createFileRoute('/admin/intent')({
+  component: IntentAdminPage,
+})
+
+// ---------------------------------------------------------------------------
+// Query keys
+// ---------------------------------------------------------------------------
+const QK = {
+  stats: ['admin', 'intent', 'stats'] as const,
+  packages: ['admin', 'intent', 'packages'] as const,
+  failed: ['admin', 'intent', 'failed'] as const,
+  workflows: ['admin', 'intent', 'workflows'] as const,
+  health: ['admin', 'intent', 'workflow-health'] as const,
+}
+
+// ---------------------------------------------------------------------------
+// Page
+// ---------------------------------------------------------------------------
+function IntentAdminPage() {
+  const queryClient = useQueryClient()
+  const [seedInput, setSeedInput] = React.useState('')
+
+  const invalidateAll = () => {
+    queryClient.invalidateQueries({ queryKey: ['admin', 'intent'] })
+  }
+
+  const statsQuery = useQuery({
+    queryKey: QK.stats,
+    queryFn: () => getIntentAdminStats(),
+    refetchInterval: 10_000,
+  })
+
+  const packagesQuery = useQuery({
+    queryKey: QK.packages,
+    queryFn: () => listIntentPackages(),
+  })
+
+  const failedQuery = useQuery({
+    queryKey: QK.failed,
+    queryFn: () => listFailedVersions(),
+  })
+
+  const workflowsQuery = useQuery({
+    queryKey: QK.workflows,
+    queryFn: () => listIntentWorkflowRuns(),
+    refetchInterval: 10_000,
+  })
+
+  const healthQuery = useQuery({
+    queryKey: QK.health,
+    queryFn: () => getIntentWorkflowHealth(),
+    refetchInterval: 10_000,
+  })
+
+  const discoverMutation = useMutation({
+    mutationFn: () => triggerIntentDiscover(),
+    onSuccess: invalidateAll,
+  })
+
+  const processMutation = useMutation({
+    mutationFn: () => triggerIntentProcess(),
+    onSuccess: invalidateAll,
+  })
+
+  const resetFailedMutation = useMutation({
+    mutationFn: () => resetFailedVersions(),
+    onSuccess: invalidateAll,
+  })
+
+  const repairWorkflowMutation = useMutation({
+    mutationFn: () => repairIntentWorkflowStore(),
+    onSuccess: invalidateAll,
+  })
+
+  const seedMutation = useMutation({
+    mutationFn: (name: string) => seedIntentPackage({ data: { name } }),
+    onSuccess: () => {
+      setSeedInput('')
+      invalidateAll()
+    },
+  })
+
+  const githubDiscoverMutation = useMutation({
+    mutationFn: () => discoverViaGitHub(),
+    onSuccess: invalidateAll,
+  })
+
+  const stats = statsQuery.data
+
+  return (
+    <div className="w-full p-4 max-w-5xl mx-auto">
+      {/* Header */}
+      <div className="mb-6 flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <BookOpen className="w-5 h-5 text-sky-500" />
+            <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+              Intent Skills Registry
+            </h1>
+          </div>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Manage discovery and processing of npm packages that ship Agent
+            Skills via{' '}
+            <code className="font-mono text-xs">tanstack-intent</code>.
+          </p>
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex flex-wrap gap-2">
+          <Button
+            size="sm"
+            onClick={() => discoverMutation.mutate()}
+            disabled={discoverMutation.isPending}
+            title="Search NPM for tanstack-intent keyword, verify packages, and enqueue"
+          >
+            <RefreshCw
+              className={
+                discoverMutation.isPending ? 'animate-spin w-4 h-4' : 'w-4 h-4'
+              }
+            />
+            {discoverMutation.isPending ? 'Discovering...' : 'NPM Discovery'}
+          </Button>
+          <Button
+            size="sm"
+            onClick={() => githubDiscoverMutation.mutate()}
+            disabled={githubDiscoverMutation.isPending}
+            title="Search GitHub for repos with @tanstack/intent dependency and skills"
+          >
+            <RefreshCw
+              className={
+                githubDiscoverMutation.isPending
+                  ? 'animate-spin w-4 h-4'
+                  : 'w-4 h-4'
+              }
+            />
+            {githubDiscoverMutation.isPending
+              ? 'Searching GitHub...'
+              : 'GitHub Discovery'}
+          </Button>
+          <Button
+            size="sm"
+            color="green"
+            onClick={() => processMutation.mutate()}
+            disabled={
+              processMutation.isPending ||
+              (stats?.pendingVersions ?? 0) + (stats?.failedVersions ?? 0) === 0
+            }
+            title="Download tarballs and extract skills for pending versions"
+          >
+            <Play
+              className={
+                processMutation.isPending ? 'animate-pulse w-4 h-4' : 'w-4 h-4'
+              }
+            />
+            {processMutation.isPending ? 'Processing...' : 'Process Queue'}
+          </Button>
+          {(stats?.failedVersions ?? 0) > 0 && (
+            <Button
+              size="sm"
+              color="red"
+              variant="secondary"
+              onClick={() => resetFailedMutation.mutate()}
+              disabled={resetFailedMutation.isPending}
+              title="Reset all failed versions back to pending so they'll be retried"
+            >
+              <RotateCcw className="w-4 h-4" />
+              Reset {stats?.failedVersions} Failed
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Manual seed form */}
+      <form
+        className="mb-4 flex gap-2"
+        onSubmit={(e) => {
+          e.preventDefault()
+          const name = seedInput.trim()
+          if (name) seedMutation.mutate(name)
+        }}
+      >
+        <input
+          type="text"
+          value={seedInput}
+          onChange={(e) => setSeedInput(e.target.value)}
+          placeholder="npm package name, e.g. @tanstack/db"
+          className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-sky-500"
+        />
+        <Button
+          size="sm"
+          type="submit"
+          disabled={seedMutation.isPending || !seedInput.trim()}
+          title="Manually seed a package by name, bypassing keyword discovery"
+        >
+          {seedMutation.isPending ? 'Seeding...' : 'Seed Package'}
+        </Button>
+      </form>
+
+      {/* Mutation result banners */}
+      {discoverMutation.data && (
+        <ResultBanner
+          title="Discovery complete"
+          items={[
+            `${discoverMutation.data.packagesDiscovered} found on NPM`,
+            `${discoverMutation.data.packagesVerified} verified`,
+            `${discoverMutation.data.versionsEnqueued} versions enqueued`,
+            ...(discoverMutation.data.errors.length > 0
+              ? [`${discoverMutation.data.errors.length} errors`]
+              : []),
+          ]}
+          errors={discoverMutation.data.errors}
+          onDismiss={() => discoverMutation.reset()}
+        />
+      )}
+      {processMutation.data && (
+        <ResultBanner
+          title={
+            processMutation.data.kind === 'completed'
+              ? `Processed ${processMutation.data.summary.processed} version(s)`
+              : 'Queue processing started'
+          }
+          items={
+            processMutation.data.kind === 'completed'
+              ? processMutation.data.summary.results.map(
+                  (result) =>
+                    `${result.packageName}@${result.version}: ${result.status === 'synced' ? `${result.skillCount} skills` : `FAILED — ${result.error}`}`,
+                )
+              : ['Remaining work will continue during scheduled processing.']
+          }
+          errors={
+            processMutation.data.kind === 'completed'
+              ? processMutation.data.summary.results
+                  .filter((result) => result.status === 'failed')
+                  .map(
+                    (result) =>
+                      `${result.packageName}@${result.version}: ${result.error}`,
+                  )
+              : []
+          }
+          onDismiss={() => processMutation.reset()}
+        />
+      )}
+      {resetFailedMutation.data && (
+        <ResultBanner
+          title={`Reset ${resetFailedMutation.data.resetCount} failed version(s) to pending`}
+          items={[]}
+          errors={[]}
+          onDismiss={() => resetFailedMutation.reset()}
+        />
+      )}
+      {repairWorkflowMutation.data && (
+        <ResultBanner
+          title="Workflow store repaired"
+          items={[
+            `${repairWorkflowMutation.data.staleRunsMarkedErrored} stale run(s) marked errored`,
+            `${repairWorkflowMutation.data.unregisteredSchedulesDeleted} obsolete schedule(s) deleted`,
+          ]}
+          errors={[]}
+          onDismiss={() => repairWorkflowMutation.reset()}
+        />
+      )}
+      {githubDiscoverMutation.data && (
+        <ResultBanner
+          title="GitHub discovery complete"
+          items={[
+            `${githubDiscoverMutation.data.searched} repos searched`,
+            `${githubDiscoverMutation.data.checkedOnNpm} checked on NPM`,
+            `${githubDiscoverMutation.data.hadSkills} had skills`,
+            `${githubDiscoverMutation.data.enqueued} versions enqueued`,
+            `${githubDiscoverMutation.data.skipped} skipped (no skills)`,
+            ...(githubDiscoverMutation.data.errors.length > 0
+              ? [`${githubDiscoverMutation.data.errors.length} errors`]
+              : []),
+          ]}
+          errors={githubDiscoverMutation.data.errors}
+          onDismiss={() => githubDiscoverMutation.reset()}
+        />
+      )}
+      {seedMutation.data && (
+        <ResultBanner
+          title="Package seeded"
+          items={[
+            `${seedMutation.data.versionsEnqueued} version(s) enqueued for processing`,
+          ]}
+          errors={[]}
+          onDismiss={() => seedMutation.reset()}
+        />
+      )}
+      {seedMutation.isError && (
+        <ResultBanner
+          title="Seed failed"
+          items={[]}
+          errors={[
+            seedMutation.error instanceof Error
+              ? seedMutation.error.message
+              : String(seedMutation.error),
+          ]}
+          onDismiss={() => seedMutation.reset()}
+        />
+      )}
+
+      {/* Stats cards */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-6">
+        <StatCard
+          label="Total packages"
+          value={stats?.totalPackages}
+          loading={statsQuery.isLoading}
+        />
+        <StatCard
+          label="Verified"
+          value={stats?.verifiedPackages}
+          loading={statsQuery.isLoading}
+          color="green"
+        />
+        <StatCard
+          label="Synced versions"
+          value={stats?.syncedVersions}
+          loading={statsQuery.isLoading}
+          color="green"
+        />
+        <StatCard
+          label="Pending"
+          value={stats?.pendingVersions}
+          loading={statsQuery.isLoading}
+          color="yellow"
+        />
+        <StatCard
+          label="Failed"
+          value={stats?.failedVersions}
+          loading={statsQuery.isLoading}
+          color="red"
+        />
+        <StatCard
+          label="Total skills"
+          value={stats?.totalSkills}
+          loading={statsQuery.isLoading}
+          color="sky"
+        />
+      </div>
+
+      <WorkflowHealthSection
+        health={healthQuery.data}
+        loading={healthQuery.isLoading}
+        repairing={repairWorkflowMutation.isPending}
+        onRepair={() => repairWorkflowMutation.mutate()}
+      />
+
+      <WorkflowRunsSection
+        runs={workflowsQuery.data ?? []}
+        loading={workflowsQuery.isLoading}
+      />
+
+      {/* Failed versions (shown prominently when non-zero) */}
+      {(failedQuery.data?.length ?? 0) > 0 && (
+        <FailedVersionsSection
+          versions={failedQuery.data ?? []}
+          onRetry={invalidateAll}
+        />
+      )}
+
+      {/* Package list */}
+      <PackagesSection
+        packages={packagesQuery.data ?? []}
+        loading={packagesQuery.isLoading}
+        onDelete={invalidateAll}
+      />
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Stats card
+// ---------------------------------------------------------------------------
+function StatCard({
+  label,
+  value,
+  loading,
+  color = 'default',
+}: {
+  readonly label: string
+  readonly value: number | undefined
+  readonly loading: boolean
+  readonly color?: 'default' | 'green' | 'yellow' | 'red' | 'sky'
+}) {
+  const valueClass = {
+    default: 'text-gray-900 dark:text-white',
+    green: 'text-emerald-600 dark:text-emerald-400',
+    yellow: 'text-amber-600 dark:text-amber-400',
+    red: 'text-red-600 dark:text-red-400',
+    sky: 'text-sky-600 dark:text-sky-400',
+  }[color]
+
+  return (
+    <Card className="p-3">
+      <div className="text-xs text-gray-500 dark:text-gray-400 mb-1 leading-tight">
+        {label}
+      </div>
+      {loading ? (
+        <div className="h-7 bg-gray-100 dark:bg-gray-800 rounded animate-pulse" />
+      ) : (
+        <div className={`text-2xl font-bold tabular-nums ${valueClass}`}>
+          {(value ?? 0).toLocaleString()}
+        </div>
+      )}
+    </Card>
+  )
+}
+
+function WorkflowHealthSection({
+  health,
+  loading,
+  repairing,
+  onRepair,
+}: {
+  readonly health:
+    | {
+        checkedAt: Date
+        staleRunMs: number
+        staleRuns: Array<{
+          runId: string
+          workflowId: string
+          status: string
+          updatedAt: Date
+          leaseExpiresAt: Date | null
+        }>
+        unregisteredSchedules: Array<{
+          scheduleId: string
+          workflowId: string
+          enabled: boolean
+          nextFireAt: Date | null
+          updatedAt: Date
+        }>
+        schedules: Array<{
+          scheduleId: string
+          workflowId: string
+          enabled: boolean
+          nextFireAt: Date | null
+          updatedAt: Date
+        }>
+        latestRuns: Array<{
+          runId: string
+          workflowId: string
+          status: string
+          updatedAt: Date
+        }>
+        statusCounts: Array<{ status: string; count: number }>
+      }
+    | undefined
+  readonly loading: boolean
+  readonly repairing: boolean
+  readonly onRepair: () => void
+}) {
+  const staleRunCount = health?.staleRuns.length ?? 0
+  const obsoleteScheduleCount = health?.unregisteredSchedules.length ?? 0
+  const needsRepair = staleRunCount > 0 || obsoleteScheduleCount > 0
+
+  return (
+    <div className="mb-6">
+      <div className="mb-2 flex items-center justify-between gap-3">
+        <h2 className="text-sm font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-1.5">
+          <CheckCircle2 className="w-4 h-4" />
+          Workflow Health
+        </h2>
+        <Button
+          size="xs"
+          variant="secondary"
+          onClick={onRepair}
+          disabled={repairing || loading || !needsRepair}
+          title="Mark stale runs as errored and delete schedules for workflows that are no longer registered"
+        >
+          <Wrench
+            className={repairing ? 'w-3.5 h-3.5 animate-pulse' : 'w-3.5 h-3.5'}
+          />
+          {repairing ? 'Repairing...' : 'Repair Store'}
+        </Button>
+      </div>
+      {loading ? (
+        <div className="h-28 rounded-xl bg-gray-100 dark:bg-gray-800 animate-pulse" />
+      ) : (
+        <div className="rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
+          <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-y md:divide-y-0 divide-gray-100 dark:divide-gray-800">
+            <HealthMetric
+              label="Stale runs"
+              value={staleRunCount}
+              tone={staleRunCount > 0 ? 'red' : 'green'}
+            />
+            <HealthMetric
+              label="Obsolete schedules"
+              value={obsoleteScheduleCount}
+              tone={obsoleteScheduleCount > 0 ? 'amber' : 'green'}
+            />
+            <HealthMetric
+              label="Registered schedules"
+              value={health?.schedules.length ?? 0}
+              tone="default"
+            />
+            <HealthMetric
+              label="Tracked runs"
+              value={
+                health?.statusCounts.reduce(
+                  (total, row) => total + row.count,
+                  0,
+                ) ?? 0
+              }
+              tone="default"
+            />
+          </div>
+          {health && needsRepair && (
+            <div className="border-t border-gray-100 dark:border-gray-800 bg-amber-50/60 dark:bg-amber-950/20 px-3 py-2 text-xs text-amber-800 dark:text-amber-200">
+              {[...health.staleRuns, ...health.unregisteredSchedules]
+                .slice(0, 4)
+                .map((item) =>
+                  'runId' in item
+                    ? `${item.workflowId}: ${item.status} since ${formatDistanceToNow(
+                        item.updatedAt,
+                        { addSuffix: true },
+                      )}`
+                    : `${item.workflowId}: obsolete schedule ${item.scheduleId}`,
+                )
+                .join(' | ')}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function HealthMetric({
+  label,
+  value,
+  tone,
+}: {
+  readonly label: string
+  readonly value: number
+  readonly tone: 'default' | 'green' | 'amber' | 'red'
+}) {
+  const valueClass = {
+    default: 'text-gray-900 dark:text-white',
+    green: 'text-emerald-600 dark:text-emerald-400',
+    amber: 'text-amber-600 dark:text-amber-400',
+    red: 'text-red-600 dark:text-red-400',
+  }[tone]
+
+  return (
+    <div className="bg-white dark:bg-gray-900 px-3 py-2">
+      <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+        {label}
+      </div>
+      <div className={`text-xl font-semibold tabular-nums ${valueClass}`}>
+        {value.toLocaleString()}
+      </div>
+    </div>
+  )
+}
+
+function WorkflowRunsSection({
+  runs,
+  loading,
+}: {
+  readonly runs: Array<{
+    runId: string
+    workflowId: string
+    workflowVersion?: string
+    status: string
+    waitingFor?: string
+    wakeAt: Date | null
+    createdAt: Date
+    updatedAt: Date
+  }>
+  readonly loading: boolean
+}) {
+  return (
+    <div className="mb-6">
+      <h2 className="text-sm font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-1.5 mb-2">
+        <Clock className="w-4 h-4" />
+        Workflow Runs
+      </h2>
+      {loading ? (
+        <div className="h-24 rounded-xl bg-gray-100 dark:bg-gray-800 animate-pulse" />
+      ) : runs.length === 0 ? (
+        <Card className="p-4 text-sm text-gray-500 dark:text-gray-400">
+          No workflow runs recorded yet.
+        </Card>
+      ) : (
+        <div className="rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
+          <table className="w-full text-sm">
+            <thead className="bg-gray-50 dark:bg-gray-900/50">
+              <tr>
+                <th className="text-left px-3 py-2 text-xs font-medium text-gray-500">
+                  Workflow
+                </th>
+                <th className="text-left px-3 py-2 text-xs font-medium text-gray-500">
+                  Status
+                </th>
+                <th className="text-left px-3 py-2 text-xs font-medium text-gray-500 hidden md:table-cell">
+                  Run
+                </th>
+                <th className="text-left px-3 py-2 text-xs font-medium text-gray-500">
+                  Updated
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+              {runs.map((run) => (
+                <tr key={run.runId} className="bg-white dark:bg-gray-900">
+                  <td className="px-3 py-2 font-mono text-xs text-gray-900 dark:text-gray-100">
+                    {run.workflowId}
+                  </td>
+                  <td className="px-3 py-2">
+                    <span
+                      className={`inline-flex items-center rounded px-1.5 py-0.5 text-xs font-medium ${getWorkflowStatusClass(run.status)}`}
+                    >
+                      {run.waitingFor
+                        ? `${run.status}:${run.waitingFor}`
+                        : run.status}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2 font-mono text-xs text-gray-500 dark:text-gray-400 hidden md:table-cell">
+                    {run.runId}
+                  </td>
+                  <td className="px-3 py-2 text-xs text-gray-500 dark:text-gray-400">
+                    {formatDistanceToNow(run.updatedAt, { addSuffix: true })}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function getWorkflowStatusClass(status: string): string {
+  switch (status) {
+    case 'finished':
+      return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300'
+    case 'errored':
+    case 'aborted':
+      return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
+    case 'paused':
+      return 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300'
+    case 'running':
+    case 'queued':
+      return 'bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300'
+    default:
+      return 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Result banner
+// ---------------------------------------------------------------------------
+function ResultBanner({
+  title,
+  items,
+  errors,
+  onDismiss,
+}: {
+  readonly title: string
+  readonly items: Array<string>
+  readonly errors: Array<string>
+  readonly onDismiss: () => void
+}) {
+  const hasErrors = errors.length > 0
+  return (
+    <div
+      className={`mb-4 rounded-lg border p-3 text-sm ${
+        hasErrors
+          ? 'bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800'
+          : 'bg-emerald-50 dark:bg-emerald-950/30 border-emerald-200 dark:border-emerald-800'
+      }`}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex items-center gap-2 font-medium text-gray-900 dark:text-white">
+          {hasErrors ? (
+            <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0" />
+          ) : (
+            <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0" />
+          )}
+          {title}
+        </div>
+        <button
+          onClick={onDismiss}
+          className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 shrink-0 text-xs"
+        >
+          dismiss
+        </button>
+      </div>
+      {items.length > 0 && (
+        <ul className="mt-2 ml-6 space-y-0.5 text-gray-600 dark:text-gray-400">
+          {items.map((item, i) => (
+            <li
+              key={i}
+              className={
+                errors.some(
+                  (e) => item.includes('FAILED') || item.includes('error'),
+                )
+                  ? 'text-red-600 dark:text-red-400'
+                  : ''
+              }
+            >
+              {item}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Failed versions section
+// ---------------------------------------------------------------------------
+function FailedVersionsSection({
+  versions,
+  onRetry,
+}: {
+  readonly versions: Array<{
+    id: number
+    packageName: string
+    version: string
+    failureReason: string | null
+    createdAt: Date
+  }>
+  readonly onRetry: () => void
+}) {
+  const queryClient = useQueryClient()
+  const retryMutation = useMutation({
+    mutationFn: (versionId: number) =>
+      retryIntentVersion({ data: { versionId } }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin', 'intent'] })
+      onRetry()
+    },
+  })
+
+  return (
+    <div className="mb-6">
+      <h2 className="text-sm font-semibold text-red-600 dark:text-red-400 flex items-center gap-1.5 mb-2">
+        <AlertTriangle className="w-4 h-4" />
+        Failed Versions
+        <span className="ml-1 px-1.5 py-0.5 rounded bg-red-100 dark:bg-red-900/40 text-xs tabular-nums">
+          {versions.length}
+        </span>
+      </h2>
+      <div className="rounded-xl border border-red-200 dark:border-red-900 overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-red-50 dark:bg-red-950/30">
+            <tr>
+              <th className="text-left px-3 py-2 text-xs font-medium text-red-700 dark:text-red-300">
+                Package
+              </th>
+              <th className="text-left px-3 py-2 text-xs font-medium text-red-700 dark:text-red-300">
+                Version
+              </th>
+              <th className="text-left px-3 py-2 text-xs font-medium text-red-700 dark:text-red-300 hidden sm:table-cell">
+                Reason
+              </th>
+              <th className="text-left px-3 py-2 text-xs font-medium text-red-700 dark:text-red-300 hidden md:table-cell">
+                Age
+              </th>
+              <th className="px-3 py-2" />
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-red-100 dark:divide-red-900/50">
+            {versions.map((v) => (
+              <tr key={v.id} className="bg-white dark:bg-gray-900">
+                <td className="px-3 py-2 font-mono text-xs text-gray-900 dark:text-gray-100">
+                  {v.packageName}
+                </td>
+                <td className="px-3 py-2 font-mono text-xs text-gray-600 dark:text-gray-400">
+                  {v.version}
+                </td>
+                <td className="px-3 py-2 text-xs text-red-600 dark:text-red-400 max-w-xs truncate hidden sm:table-cell">
+                  {v.failureReason ?? '—'}
+                </td>
+                <td className="px-3 py-2 text-xs text-gray-400 hidden md:table-cell">
+                  {formatDistanceToNow(v.createdAt, { addSuffix: true })}
+                </td>
+                <td className="px-3 py-2 text-right">
+                  <Button
+                    size="sm"
+                    variant="secondary"
+                    onClick={() => retryMutation.mutate(v.id)}
+                    disabled={retryMutation.isPending}
+                  >
+                    <RotateCcw className="w-3 h-3" />
+                    Retry
+                  </Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Package list section
+// ---------------------------------------------------------------------------
+function PackagesSection({
+  packages,
+  loading,
+  onDelete,
+}: {
+  readonly packages: Array<{
+    name: string
+    verified: boolean
+    firstSeenAt: Date
+    lastSyncedAt: Date
+    versions: { pending: number; synced: number; failed: number }
+  }>
+  readonly loading: boolean
+  readonly onDelete: () => void
+}) {
+  const [expandedPkg, setExpandedPkg] = React.useState<string | null>(null)
+
+  return (
+    <div>
+      <h2 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+        All Packages
+        <span className="ml-2 text-gray-400 font-normal">
+          {packages.length}
+        </span>
+      </h2>
+
+      {loading ? (
+        <div className="space-y-2">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div
+              key={i}
+              className="h-12 rounded-xl bg-gray-100 dark:bg-gray-800 animate-pulse"
+            />
+          ))}
+        </div>
+      ) : packages.length === 0 ? (
+        <Card className="p-8 text-center text-sm text-gray-500 dark:text-gray-400">
+          No packages discovered yet. Run Discovery to search NPM.
+        </Card>
+      ) : (
+        <div className="rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
+          <table className="w-full text-sm">
+            <thead className="bg-gray-50 dark:bg-gray-900/50">
+              <tr>
+                <th className="text-left px-3 py-2 text-xs font-medium text-gray-500">
+                  Package
+                </th>
+                <th className="text-left px-3 py-2 text-xs font-medium text-gray-500 hidden sm:table-cell">
+                  Status
+                </th>
+                <th className="text-left px-3 py-2 text-xs font-medium text-gray-500">
+                  Versions
+                </th>
+                <th className="text-left px-3 py-2 text-xs font-medium text-gray-500 hidden md:table-cell">
+                  Last synced
+                </th>
+                <th className="px-3 py-2" />
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+              {packages.map((pkg) => (
+                <PackageRow
+                  key={pkg.name}
+                  pkg={pkg}
+                  isExpanded={expandedPkg === pkg.name}
+                  onToggle={() =>
+                    setExpandedPkg(expandedPkg === pkg.name ? null : pkg.name)
+                  }
+                  onDelete={onDelete}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function PackageRow({
+  pkg,
+  isExpanded,
+  onToggle,
+  onDelete,
+}: {
+  readonly pkg: {
+    name: string
+    verified: boolean
+    firstSeenAt: Date
+    lastSyncedAt: Date
+    versions: { pending: number; synced: number; failed: number }
+  }
+  readonly isExpanded: boolean
+  readonly onToggle: () => void
+  readonly onDelete: () => void
+}) {
+  const queryClient = useQueryClient()
+  const deleteMutation = useMutation({
+    mutationFn: (name: string) => deleteIntentPackage({ data: { name } }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin', 'intent'] })
+      onDelete()
+    },
+  })
+
+  const { pending, synced, failed } = pkg.versions
+  const totalVersions = pending + synced + failed
+
+  return (
+    <tr
+      className={`bg-white dark:bg-gray-950 hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors cursor-pointer`}
+      onClick={onToggle}
+    >
+      <td className="px-3 py-2.5">
+        <div className="flex items-center gap-1.5">
+          {isExpanded ? (
+            <ChevronDown className="w-3.5 h-3.5 text-gray-400 shrink-0" />
+          ) : (
+            <ChevronRight className="w-3.5 h-3.5 text-gray-400 shrink-0" />
+          )}
+          <span className="font-mono text-xs text-gray-900 dark:text-gray-100">
+            {pkg.name}
+          </span>
+        </div>
+      </td>
+      <td className="px-3 py-2.5 hidden sm:table-cell">
+        {pkg.verified ? (
+          <span className="inline-flex items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
+            <CheckCircle2 className="w-3.5 h-3.5" /> Verified
+          </span>
+        ) : (
+          <span className="inline-flex items-center gap-1 text-xs text-gray-400">
+            <Clock className="w-3.5 h-3.5" /> Unverified
+          </span>
+        )}
+      </td>
+      <td className="px-3 py-2.5">
+        <div className="flex items-center gap-1 text-xs tabular-nums">
+          {synced > 0 && (
+            <span className="px-1.5 py-0.5 rounded bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300">
+              {synced} synced
+            </span>
+          )}
+          {pending > 0 && (
+            <span className="px-1.5 py-0.5 rounded bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300">
+              {pending} pending
+            </span>
+          )}
+          {failed > 0 && (
+            <span className="px-1.5 py-0.5 rounded bg-red-50 dark:bg-red-950/40 text-red-700 dark:text-red-300">
+              {failed} failed
+            </span>
+          )}
+          {totalVersions === 0 && <span className="text-gray-400">—</span>}
+        </div>
+      </td>
+      <td className="px-3 py-2.5 text-xs text-gray-400 dark:text-gray-500 hidden md:table-cell">
+        {formatDistanceToNow(pkg.lastSyncedAt, { addSuffix: true })}
+      </td>
+      <td
+        className="px-3 py-2.5 text-right"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Button
+          size="sm"
+          variant="secondary"
+          color="red"
+          onClick={() => {
+            if (confirm(`Delete ${pkg.name} and all its versions?`)) {
+              deleteMutation.mutate(pkg.name)
+            }
+          }}
+          disabled={deleteMutation.isPending}
+          title="Remove this package and all versions from the registry"
+        >
+          <Trash2 className="w-3 h-3" />
+        </Button>
+      </td>
+    </tr>
+  )
+}
diff --git a/src/routes/admin/logins.tsx b/src/routes/admin/logins.tsx
index dd676d807..e60759437 100644
--- a/src/routes/admin/logins.tsx
+++ b/src/routes/admin/logins.tsx
@@ -32,7 +32,8 @@ import {
   StatsCard,
 } from '~/components/admin'
 import { useAdminGuard } from '~/hooks/useAdminGuard'
-import { requireCapability } from '~/utils/auth.server'
+import { requireCapability } from '~/utils/auth.functions'
+import { pageIndexSchema, pageSizeSchema } from '~/utils/schemas'
 
 type LoginHistoryEntry = {
   id: string
@@ -71,8 +72,8 @@ export const Route = createFileRoute('/admin/logins')({
       v.object({
         userId: v.optional(v.string()),
         provider: v.optional(v.picklist(['github', 'google'])),
-        page: v.optional(v.pipe(v.number(), v.integer(), v.minValue(0))),
-        pageSize: v.optional(v.pipe(v.number(), v.integer(), v.minValue(1))),
+        page: v.optional(pageIndexSchema),
+        pageSize: v.optional(pageSizeSchema),
         sortBy: v.optional(v.string()),
         sortDir: v.optional(v.picklist(['asc', 'desc'])),
       }),
@@ -250,6 +251,7 @@ function LoginsPage() {
     [],
   )
 
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     data: (loginsQuery?.data?.page || []) as LoginHistoryEntry[],
     columns,
diff --git a/src/routes/admin/notes.index.tsx b/src/routes/admin/notes.index.tsx
index 92167f2fa..d5681537c 100644
--- a/src/routes/admin/notes.index.tsx
+++ b/src/routes/admin/notes.index.tsx
@@ -3,8 +3,13 @@ import * as v from 'valibot'
 import { seo } from '~/utils/seo'
 import { NotesModerationPage } from '~/components/NotesModerationPage'
 import { listDocFeedbackForModerationQueryOptions } from '~/queries/docFeedback'
-import { requireCapability } from '~/utils/auth.server'
-import { libraryIdSchema } from '~/utils/schemas'
+import { requireCapability } from '~/utils/auth.functions'
+import {
+  isoDateSchema,
+  libraryIdSchema,
+  pageNumberSchema,
+  pageSizeSchema,
+} from '~/utils/schemas'
 
 export const Route = createFileRoute('/admin/notes/')({
   staleTime: 1000 * 60 * 5, // 5 minutes
@@ -21,15 +26,12 @@ export const Route = createFileRoute('/admin/notes/')({
   validateSearch: (search) => {
     const parsed = v.parse(
       v.object({
-        page: v.optional(v.number(), 1),
-        pageSize: v.optional(
-          v.pipe(v.number(), v.integer(), v.minValue(1)),
-          50,
-        ),
+        page: v.optional(pageNumberSchema, 1),
+        pageSize: v.optional(pageSizeSchema, 50),
         libraryId: v.optional(libraryIdSchema),
         isDetached: v.optional(v.boolean()),
-        dateFrom: v.optional(v.string()),
-        dateTo: v.optional(v.string()),
+        dateFrom: v.optional(isoDateSchema),
+        dateTo: v.optional(isoDateSchema),
       }),
       search,
     )
diff --git a/src/routes/admin/npm-stats.tsx b/src/routes/admin/npm-stats.tsx
index 2f417b2d0..fe23abd80 100644
--- a/src/routes/admin/npm-stats.tsx
+++ b/src/routes/admin/npm-stats.tsx
@@ -1,56 +1,12 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { useMemo } from 'react'
-import {
-  Table,
-  TableHeader,
-  TableHeaderRow,
-  TableHeaderCell,
-  TableBody,
-  TableRow,
-  TableCell,
-} from '~/components/TableComponents'
-import {
-  useReactTable,
-  getCoreRowModel,
-  flexRender,
-  type ColumnDef,
-} from '@tanstack/react-table'
-import {
-  listNpmPackages,
-  refreshNpmPackageStats,
-  listNpmOrgStatsCache,
-  getLibraryNpmStats,
-  refreshAllNpmStats,
-} from '~/utils/stats-admin.server'
-import { formatDistanceToNow } from '~/utils/dates'
 import { Download, RefreshCw } from 'lucide-react'
-import { NpmIcon } from '~/components/icons/NpmIcon'
 import { Card } from '~/components/Card'
+import { NpmIcon } from '~/components/icons/NpmIcon'
+import { homepageNpmStatsSummaryQuery } from '~/queries/stats'
 import { Button } from '~/ui'
-
-type NpmPackage = {
-  id: string
-  packageName: string
-  githubRepo: string | null
-  libraryId: string | null
-  isLegacy: boolean | null
-  downloads: number | null
-  ratePerDay: number | null
-  statsExpiresAt: Date | null
-  metadataCheckedAt: Date | null
-  createdAt: Date
-  updatedAt: Date
-}
-
-type LibraryStats = {
-  libraryId: string
-  libraryName: string
-  packageCount: number
-  totalDownloads: number
-  previousTotalDownloads: number | null
-  ratePerDay: number | null
-}
+import { refreshAllNpmStats } from '~/utils/stats-admin.functions'
+import { formatDistanceToNow } from '~/utils/dates'
 
 export const Route = createFileRoute('/admin/npm-stats')({
   component: NpmStatsAdmin,
@@ -58,492 +14,191 @@ export const Route = createFileRoute('/admin/npm-stats')({
 
 function NpmStatsAdmin() {
   const queryClient = useQueryClient()
+  const { data: homepageSummary, isLoading: homepageSummaryLoading } = useQuery(
+    homepageNpmStatsSummaryQuery(),
+  )
 
-  const { data: orgCacheEntries, isLoading: orgLoading } = useQuery({
-    queryKey: ['admin', 'npm-org-stats-cache'],
-    queryFn: () => listNpmOrgStatsCache(),
-  })
-
-  const { data: libraryStats, isLoading: libraryStatsLoading } = useQuery({
-    queryKey: ['admin', 'library-npm-stats'],
-    queryFn: () => getLibraryNpmStats(),
-  })
-
-  const { data: packagesData, isLoading: packagesLoading } = useQuery({
-    queryKey: ['admin', 'npm-packages'],
-    queryFn: () => listNpmPackages({ data: {} }),
-  })
-
-  const refreshPackageMutation = useMutation({
-    mutationFn: (packageName: string) =>
-      refreshNpmPackageStats({ data: { packageName } }),
+  const refreshSummaryMutation = useMutation({
+    mutationFn: () => refreshAllNpmStats({ data: { org: 'tanstack' } }),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin', 'npm-packages'] })
-      queryClient.invalidateQueries({
-        queryKey: ['admin', 'library-npm-stats'],
-      })
       queryClient.invalidateQueries({
-        queryKey: ['admin', 'npm-org-stats-cache'],
+        queryKey: ['stats', 'homepage-npm-summary'],
       })
+      queryClient.invalidateQueries({ queryKey: ['stats', 'oss'] })
     },
   })
 
-  const refreshAllMutation = useMutation({
-    mutationFn: (org: string) => {
-      console.log('[Admin UI] Starting refresh for org:', org)
-      return refreshAllNpmStats({ data: { org } })
-    },
-    onSuccess: (data) => {
-      console.log('[Admin UI] Refresh succeeded:', data)
-      queryClient.invalidateQueries({ queryKey: ['admin'] })
-    },
-    onError: (error) => {
-      console.error('[Admin UI] Refresh failed:', error)
-    },
-  })
-
-  const orgStats = orgCacheEntries?.[0]
-
-  const libraryColumns = useMemo<ColumnDef<LibraryStats>[]>(
-    () => [
-      {
-        accessorKey: 'libraryName',
-        header: 'Library',
-        cell: ({ row }) => (
-          <div className="font-medium text-gray-900 dark:text-white">
-            {row.original.libraryName}
-          </div>
-        ),
-      },
-      {
-        accessorKey: 'packageCount',
-        header: 'Packages',
-        cell: ({ row }) => (
-          <div className="text-sm text-gray-600 dark:text-gray-400">
-            {row.original.packageCount}
-          </div>
-        ),
-      },
-      {
-        accessorKey: 'totalDownloads',
-        header: 'Total Downloads',
-        cell: ({ row }) => (
-          <div>
-            <div className="flex items-center gap-2">
-              <Download className="text-emerald-500" />
-              <span className="font-semibold text-gray-900 dark:text-white">
-                {row.original.totalDownloads.toLocaleString()}
-              </span>
-            </div>
-            {row.original.ratePerDay !== null &&
-              row.original.ratePerDay > 0 && (
-                <div className="text-xs text-emerald-600 dark:text-emerald-400">
-                  {Math.round(row.original.ratePerDay).toLocaleString()}/day
-                </div>
-              )}
-          </div>
-        ),
-      },
-    ],
-    [],
-  )
-
-  const packageColumns = useMemo<ColumnDef<NpmPackage>[]>(
-    () => [
-      {
-        accessorKey: 'packageName',
-        header: 'Package',
-        cell: ({ row }) => (
-          <div>
-            <div className="font-medium text-gray-900 dark:text-white">
-              {row.original.packageName}
-            </div>
-            {row.original.isLegacy && (
-              <span className="text-xs px-2 py-0.5 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-400 rounded">
-                Legacy
-              </span>
-            )}
-          </div>
-        ),
-      },
-      {
-        accessorKey: 'githubRepo',
-        header: 'GitHub Repo',
-        cell: ({ row }) => (
-          <div className="text-sm text-gray-600 dark:text-gray-400">
-            {row.original.githubRepo || '-'}
-          </div>
-        ),
-      },
-      {
-        accessorKey: 'libraryId',
-        header: 'Library',
-        cell: ({ row }) => (
-          <div className="text-sm text-gray-600 dark:text-gray-400">
-            {row.original.libraryId || '-'}
-          </div>
-        ),
-      },
-      {
-        accessorKey: 'downloads',
-        header: 'Downloads',
-        cell: ({ row }) => {
-          const pkg = row.original
-          return (
-            <div>
-              <div className="flex items-center gap-2">
-                <Download className="text-emerald-500" />
-                <span className="font-semibold text-gray-900 dark:text-white">
-                  {pkg.downloads?.toLocaleString() ?? 'N/A'}
-                </span>
-              </div>
-              {pkg.ratePerDay !== null && pkg.ratePerDay > 0 && (
-                <div className="text-xs text-emerald-600 dark:text-emerald-400">
-                  {Math.round(pkg.ratePerDay).toLocaleString()}/day
-                </div>
-              )}
-            </div>
-          )
-        },
-      },
-      {
-        accessorKey: 'statsExpiresAt',
-        header: 'Status',
-        cell: ({ row }) => {
-          const pkg = row.original
-          if (!pkg.statsExpiresAt)
-            return <span className="text-gray-500">-</span>
-          const isExpired = pkg.statsExpiresAt < new Date()
-          return (
-            <div className="text-sm">
-              <div
-                className={
-                  isExpired
-                    ? 'text-red-600 dark:text-red-400 font-medium'
-                    : 'text-green-600 dark:text-green-400 font-medium'
-                }
-              >
-                {isExpired ? 'Expired' : 'Valid'}
-              </div>
-              <div className="text-gray-500 dark:text-gray-400 text-xs">
-                {isExpired ? (
-                  <>
-                    Expired{' '}
-                    {formatDistanceToNow(new Date(pkg.statsExpiresAt), {
-                      addSuffix: true,
-                    })}
-                  </>
-                ) : (
-                  <>
-                    expires{' '}
-                    {formatDistanceToNow(new Date(pkg.statsExpiresAt), {
-                      addSuffix: true,
-                    })}
-                  </>
-                )}
-              </div>
-            </div>
-          )
-        },
-      },
-      {
-        id: 'actions',
-        header: 'Actions',
-        cell: ({ row }) => (
-          <Button
-            size="sm"
-            onClick={() =>
-              refreshPackageMutation.mutate(row.original.packageName)
-            }
-            disabled={refreshPackageMutation.isPending}
-          >
-            <RefreshCw
-              className={refreshPackageMutation.isPending ? 'animate-spin' : ''}
-            />
-            Refresh
-          </Button>
-        ),
-      },
-    ],
-    [refreshPackageMutation],
-  )
-
-  const libraryTable = useReactTable({
-    data: libraryStats ?? [],
-    columns: libraryColumns,
-    getCoreRowModel: getCoreRowModel(),
-  })
-
-  const packages = useMemo(
-    () =>
-      [...(packagesData?.packages ?? [])].sort(
-        (a, b) => (b.downloads ?? 0) - (a.downloads ?? 0),
-      ),
-    [packagesData?.packages],
-  )
-
-  const packagesTable = useReactTable({
-    data: packages,
-    columns: packageColumns,
-    getCoreRowModel: getCoreRowModel(),
-  })
-
   return (
     <div className="w-full p-4">
-      <div className="max-w-7xl mx-auto">
-        <div className="mb-6 flex items-center justify-between">
+      <div className="mx-auto max-w-7xl">
+        <div className="mb-6 flex items-center justify-between gap-4">
           <div>
-            <div className="flex items-center gap-3 mb-2">
+            <div className="mb-2 flex items-center gap-3">
               <NpmIcon className="text-2xl text-red-500" />
               <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
                 NPM Stats Management
               </h1>
             </div>
             <p className="text-sm text-gray-600 dark:text-gray-400">
-              View cached NPM statistics. Click "Refresh All Stats" to discover
-              packages, fetch fresh download counts with growth rates, and
-              rebuild all caches.
+              Refresh and inspect the cached NPM summary used by homepage and
+              library counters.
             </p>
           </div>
           <Button
             color="green"
-            onClick={() => {
-              console.log('[Admin UI] Refresh button clicked')
-              refreshAllMutation.mutate('tanstack')
-            }}
-            disabled={refreshAllMutation.isPending}
-            title="Complete refresh: discover packages, fetch fresh stats with growth rates, and rebuild all caches"
+            disabled={refreshSummaryMutation.isPending}
+            onClick={() => refreshSummaryMutation.mutate()}
+            title="Refresh the NPM summary cache from NPM stats chunks"
           >
             <RefreshCw
-              className={refreshAllMutation.isPending ? 'animate-spin' : ''}
+              className={refreshSummaryMutation.isPending ? 'animate-spin' : ''}
             />
-            {refreshAllMutation.isPending
+            {refreshSummaryMutation.isPending
               ? 'Refreshing...'
-              : 'Refresh All Stats'}
+              : 'Refresh Summary'}
           </Button>
         </div>
 
-        {/* Org Stats Section - Top of Page */}
-        {orgLoading ? (
-          <div className="text-center py-8 mb-8">
-            <div className="text-gray-600 dark:text-gray-400">
-              Loading org stats...
-            </div>
+        {homepageSummaryLoading ? (
+          <div className="py-8 text-center text-gray-600 dark:text-gray-400">
+            Loading NPM summary...
           </div>
-        ) : orgStats ? (
-          <Card className="mb-8 p-6 bg-gradient-to-br from-emerald-50 to-blue-50 dark:from-emerald-900/20 dark:to-blue-900/20 rounded-xl border-emerald-200 dark:border-emerald-800">
-            <div className="flex items-center justify-between mb-6">
-              <div>
-                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-1">
-                  @{orgStats.orgName} Organization
-                </h2>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Total statistics across all packages
-                </p>
-              </div>
-              <div className="text-right">
-                <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
-                  Last Updated
-                </div>
-                <div className="text-sm font-medium text-gray-600 dark:text-gray-400">
-                  {formatDistanceToNow(new Date(orgStats.updatedAt), {
-                    addSuffix: true,
-                  })}
-                </div>
-              </div>
-            </div>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-              <div className="bg-white/60 dark:bg-gray-800/60 p-4 rounded-lg">
-                <div className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
-                  Total Downloads
+        ) : homepageSummary ? (
+          <>
+            <Card className="mb-8 rounded-xl border-cyan-200 bg-linear-to-br from-cyan-50 to-emerald-50 p-6 dark:border-cyan-800 dark:from-cyan-900/20 dark:to-emerald-900/20">
+              <div className="mb-6 flex items-center justify-between gap-4">
+                <div>
+                  <h2 className="mb-1 text-2xl font-bold text-gray-900 dark:text-white">
+                    Cached NPM Summary
+                  </h2>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Total uses all known TanStack packages. Weekly uses the
+                    TanStack Total preset packages.
+                  </p>
                 </div>
-                <div className="flex items-center gap-3">
-                  <Download className="text-2xl text-emerald-500" />
-                  <div className="text-3xl font-bold text-gray-900 dark:text-white">
-                    {orgStats.totalDownloads.toLocaleString()}
+                <div className="text-right">
+                  <div className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                    Last Updated
                   </div>
-                </div>
-              </div>
-              <div className="bg-white/60 dark:bg-gray-800/60 p-4 rounded-lg">
-                <div className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
-                  Downloads Per Day
-                </div>
-                <div className="flex items-center gap-3">
-                  <Download className="text-2xl text-emerald-500" />
-                  <div>
-                    <div className="text-3xl font-bold text-emerald-600 dark:text-emerald-400">
-                      {orgStats.ratePerDay !== undefined &&
-                      orgStats.ratePerDay > 0
-                        ? Math.round(orgStats.ratePerDay).toLocaleString()
-                        : '0'}
-                    </div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      Average daily rate
-                    </div>
+                  <div className="text-sm font-medium text-gray-600 dark:text-gray-400">
+                    {formatDistanceToNow(new Date(homepageSummary.updatedAt), {
+                      addSuffix: true,
+                    })}
                   </div>
                 </div>
               </div>
-              <div className="bg-white/60 dark:bg-gray-800/60 p-4 rounded-lg">
-                <div className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
-                  Total Packages
-                </div>
-                <div className="text-3xl font-bold text-gray-900 dark:text-white">
-                  {orgStats.packageStats &&
-                  typeof orgStats.packageStats === 'object'
-                    ? Object.keys(orgStats.packageStats).length.toLocaleString()
-                    : '0'}
-                </div>
-                <div className="text-xs text-gray-500 dark:text-gray-400 mt-2">
-                  Across all libraries
-                </div>
-              </div>
-              <div className="bg-white/60 dark:bg-gray-800/60 p-4 rounded-lg">
-                <div className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
-                  Cache Status
-                </div>
-                <div
-                  className={`text-2xl font-bold mb-1 ${
-                    orgStats.expiresAt < new Date()
+              <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+                <SummaryMetric
+                  iconClassName="text-emerald-500"
+                  label="Total Downloads"
+                  value={homepageSummary.totalDownloads.toLocaleString()}
+                  detail={`${homepageSummary.totalPackageCount.toLocaleString()} packages`}
+                />
+                <SummaryMetric
+                  iconClassName="text-cyan-500"
+                  label="Weekly Downloads"
+                  value={homepageSummary.weeklyDownloads.toLocaleString()}
+                  valueClassName="text-cyan-600 dark:text-cyan-400"
+                  detail={`${homepageSummary.weeklyPackageCount.toLocaleString()} preset packages`}
+                />
+                <SummaryMetric
+                  label="Weekly Window"
+                  value={homepageSummary.weeklyStartDate}
+                  detail={`through ${homepageSummary.weeklyEndDate}`}
+                />
+                <SummaryMetric
+                  label="Cache Status"
+                  value={
+                    homepageSummary.expiresAt < Date.now() ? 'Stale' : 'Fresh'
+                  }
+                  valueClassName={
+                    homepageSummary.expiresAt < Date.now()
                       ? 'text-red-600 dark:text-red-400'
                       : 'text-green-600 dark:text-green-400'
-                  }`}
-                >
-                  {orgStats.expiresAt < new Date() ? 'Expired' : 'Valid'}
-                </div>
-                <div className="text-xs text-gray-500 dark:text-gray-400">
-                  {orgStats.expiresAt < new Date() ? (
-                    <>
-                      Expired{' '}
-                      {formatDistanceToNow(new Date(orgStats.expiresAt), {
-                        addSuffix: true,
-                      })}
-                    </>
-                  ) : (
-                    <>
-                      expires{' '}
-                      {formatDistanceToNow(new Date(orgStats.expiresAt), {
-                        addSuffix: true,
-                      })}
-                    </>
-                  )}
-                </div>
+                  }
+                  detail={`expires ${formatDistanceToNow(
+                    new Date(homepageSummary.expiresAt),
+                    { addSuffix: true },
+                  )}`}
+                />
               </div>
+            </Card>
+
+            <div>
+              <h2 className="mb-4 text-xl font-bold text-gray-900 dark:text-white">
+                Library Totals
+              </h2>
+              {homepageSummary.librarySummaries.length > 0 ? (
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+                  {[...homepageSummary.librarySummaries]
+                    .sort((a, b) => b.totalDownloads - a.totalDownloads)
+                    .map((summary) => (
+                      <Card key={summary.libraryId} className="p-4">
+                        <div className="mb-3 flex items-center justify-between gap-3">
+                          <h3 className="font-semibold text-gray-900 dark:text-white">
+                            {summary.libraryId}
+                          </h3>
+                          <div className="text-xs text-gray-500 dark:text-gray-400">
+                            {summary.packageCount.toLocaleString()} packages
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                          <Download className="size-5 text-emerald-500" />
+                          <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                            {summary.totalDownloads.toLocaleString()}
+                          </div>
+                        </div>
+                      </Card>
+                    ))}
+                </div>
+              ) : (
+                <Card className="p-6 text-center text-gray-600 dark:text-gray-400">
+                  Refresh the summary to populate library totals.
+                </Card>
+              )}
             </div>
-          </Card>
+          </>
         ) : (
-          <Card className="mb-8 p-6 bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800">
-            <div className="text-center">
-              <p className="text-yellow-800 dark:text-yellow-400 font-medium">
-                No org stats available. Click "Refresh All Stats" to populate.
-              </p>
-            </div>
+          <Card className="p-6 text-center">
+            <p className="text-yellow-800 dark:text-yellow-400">
+              No NPM summary is cached yet.
+            </p>
           </Card>
         )}
+      </div>
+    </div>
+  )
+}
 
-        {/* Library Stats Section */}
-        <div className="mb-8">
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
-            Library Stats
-          </h2>
-          {libraryStatsLoading ? (
-            <div className="text-center py-8">
-              <div className="text-gray-600 dark:text-gray-400">
-                Loading library stats...
-              </div>
-            </div>
-          ) : libraryStats && libraryStats.length > 0 ? (
-            <Table>
-              <TableHeader>
-                {libraryTable.getHeaderGroups().map((headerGroup) => (
-                  <TableHeaderRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => (
-                      <TableHeaderCell key={header.id}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
-                      </TableHeaderCell>
-                    ))}
-                  </TableHeaderRow>
-                ))}
-              </TableHeader>
-              <TableBody>
-                {libraryTable.getRowModel().rows.map((row) => (
-                  <TableRow key={row.id}>
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          ) : (
-            <Card className="text-center py-8">
-              <p className="text-gray-600 dark:text-gray-400">
-                No library stats available.
-              </p>
-            </Card>
-          )}
-        </div>
-
-        {/* Packages Section */}
-        <div>
-          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
-            All Packages
-          </h2>
-          {packagesLoading ? (
-            <div className="text-center py-12">
-              <div className="text-gray-600 dark:text-gray-400">Loading...</div>
-            </div>
-          ) : packages.length === 0 ? (
-            <Card className="text-center py-12">
-              <p className="text-gray-600 dark:text-gray-400">
-                No packages found.
-              </p>
-            </Card>
-          ) : (
-            <Table>
-              <TableHeader>
-                {packagesTable.getHeaderGroups().map((headerGroup) => (
-                  <TableHeaderRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => (
-                      <TableHeaderCell key={header.id}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
-                      </TableHeaderCell>
-                    ))}
-                  </TableHeaderRow>
-                ))}
-              </TableHeader>
-              <TableBody>
-                {packagesTable.getRowModel().rows.map((row) => (
-                  <TableRow key={row.id}>
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
+function SummaryMetric({
+  detail,
+  iconClassName,
+  label,
+  value,
+  valueClassName,
+}: {
+  detail: string
+  iconClassName?: string
+  label: string
+  value: string
+  valueClassName?: string
+}) {
+  return (
+    <div className="rounded-lg bg-white/60 p-4 dark:bg-gray-800/60">
+      <div className="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+        {label}
+      </div>
+      <div className="flex items-center gap-3">
+        {iconClassName ? <Download className={iconClassName} /> : null}
+        <div
+          className={`text-2xl font-bold text-gray-900 dark:text-white ${valueClassName ?? ''}`}
+        >
+          {value}
         </div>
       </div>
+      <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
+        {detail}
+      </div>
     </div>
   )
 }
diff --git a/src/routes/admin/roles.$roleId.tsx b/src/routes/admin/roles.$roleId.tsx
index 2a579c457..5a411c2c4 100644
--- a/src/routes/admin/roles.$roleId.tsx
+++ b/src/routes/admin/roles.$roleId.tsx
@@ -11,7 +11,7 @@ import {
   type ColumnDef,
 } from '@tanstack/react-table'
 import { ArrowLeft, Lock, Trash, User, Users } from 'lucide-react'
-import { requireCapability } from '~/utils/auth.server'
+import { requireCapability } from '~/utils/auth.functions'
 import { hasCapability } from '~/db/types'
 import { Badge, Button } from '~/ui'
 
@@ -131,7 +131,7 @@ function RoleDetailPage() {
           const displayName = user.name || user.displayUsername || ''
           return (
             <div className="flex items-center gap-3">
-              <div className="flex-shrink-0 h-10 w-10">
+              <div className="shrink-0 h-10 w-10">
                 {user.image ? (
                   <img
                     className="h-10 w-10 rounded-full"
@@ -207,6 +207,7 @@ function RoleDetailPage() {
     [selectedUserIds, usersWithRole, toggleAllSelection, toggleUserSelection],
   )
 
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     data: usersWithRole || [],
     columns,
@@ -316,7 +317,7 @@ function RoleDetailPage() {
         )}
 
         {confirmRemove && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
             <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md">
               <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                 Confirm Removal
diff --git a/src/routes/admin/roles.index.tsx b/src/routes/admin/roles.index.tsx
index eb3e8b2be..bdd2f0128 100644
--- a/src/routes/admin/roles.index.tsx
+++ b/src/routes/admin/roles.index.tsx
@@ -38,7 +38,7 @@ import {
   AdminEmptyState,
 } from '~/components/admin'
 import { useAdminGuard } from '~/hooks/useAdminGuard'
-import { requireCapability } from '~/utils/auth.server'
+import { requireCapability } from '~/utils/auth.functions'
 import { useToggleArray } from '~/hooks/useToggleArray'
 import { useDeleteWithConfirmation } from '~/hooks/useDeleteWithConfirmation'
 import { Badge, Button, FormInput } from '~/ui'
@@ -126,7 +126,9 @@ function RolesPage() {
         data: {
           nameFilter: nameFilter || undefined,
           capabilityFilter:
-            capabilityFilters.length > 0 ? capabilityFilters : undefined,
+            capabilityFilters.length > 0
+              ? (capabilityFilters as Capability[])
+              : undefined,
         },
       })
     },
diff --git a/src/routes/admin/route.tsx b/src/routes/admin/route.tsx
index 7b946de97..3d9a09f1c 100644
--- a/src/routes/admin/route.tsx
+++ b/src/routes/admin/route.tsx
@@ -12,17 +12,17 @@ import {
   LayoutDashboard,
   LogIn,
   MessagesSquare,
-  Rss,
   Shield,
   ShieldHalf,
   StickyNote,
   Users,
   User,
+  BookOpen,
 } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 // Using public asset URL
 import { ClientAdminAuth } from '~/components/ClientAuth'
-import { requireAnyAdminCapability } from '~/utils/auth.server'
+import { requireAnyAdminCapability } from '~/utils/auth.functions'
 import { useCapabilities } from '~/hooks/useCapabilities'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { NpmIcon } from '~/components/icons/NpmIcon'
@@ -118,11 +118,6 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
       to: '/admin/showcases',
       requiredCapability: 'moderate-showcases',
     },
-    {
-      label: 'Feed',
-      icon: <Rss />,
-      to: '/admin/feed',
-    },
     {
       label: 'GitHub Stats',
       icon: <GithubIcon />,
@@ -133,6 +128,16 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
       icon: <NpmIcon />,
       to: '/admin/npm-stats',
     },
+    {
+      label: 'Intent Skills',
+      icon: <BookOpen />,
+      to: '/admin/intent',
+    },
+    {
+      label: 'Docs Cache',
+      icon: <BookOpen />,
+      to: '/admin/docs',
+    },
     {
       label: 'My Account',
       icon: <User />,
diff --git a/src/routes/admin/showcases.index.tsx b/src/routes/admin/showcases.index.tsx
index 02ed49deb..7d6ef7321 100644
--- a/src/routes/admin/showcases.index.tsx
+++ b/src/routes/admin/showcases.index.tsx
@@ -3,8 +3,21 @@ import * as v from 'valibot'
 import { seo } from '~/utils/seo'
 import { ShowcaseModerationPage } from '~/components/ShowcaseModerationPage'
 import { listShowcasesForModerationQueryOptions } from '~/queries/showcases'
-import { requireCapability } from '~/utils/auth.server'
-import { libraryIdSchema, showcaseStatusSchema } from '~/utils/schemas'
+import { requireCapability } from '~/utils/auth.functions'
+import {
+  libraryIdSchema,
+  pageNumberSchema,
+  pageSizeSchema,
+  showcaseStatusSchema,
+} from '~/utils/schemas'
+
+const searchSchema = v.object({
+  page: v.optional(pageNumberSchema, 1),
+  pageSize: v.optional(pageSizeSchema, 50),
+  status: v.optional(v.pipe(v.array(showcaseStatusSchema), v.maxLength(3))),
+  libraryId: v.optional(v.pipe(v.array(libraryIdSchema), v.maxLength(16))),
+  isFeatured: v.optional(v.boolean()),
+})
 
 export const Route = createFileRoute('/admin/showcases/')({
   staleTime: 1000 * 60 * 5, // 5 minutes
@@ -18,23 +31,7 @@ export const Route = createFileRoute('/admin/showcases/')({
       throw redirect({ to: '/login' })
     }
   },
-  validateSearch: (search) => {
-    const parsed = v.parse(
-      v.object({
-        page: v.optional(v.number(), 1),
-        pageSize: v.optional(
-          v.pipe(v.number(), v.integer(), v.minValue(1)),
-          50,
-        ),
-        status: v.optional(v.array(showcaseStatusSchema)),
-        libraryId: v.optional(v.array(libraryIdSchema)),
-        isFeatured: v.optional(v.boolean()),
-      }),
-      search,
-    )
-
-    return parsed
-  },
+  validateSearch: searchSchema,
   loaderDeps: ({ search }) => ({
     page: search.page,
     pageSize: search.pageSize,
diff --git a/src/routes/admin/showcases_.$id.tsx b/src/routes/admin/showcases_.$id.tsx
index 259ac7de5..4c6ca7f01 100644
--- a/src/routes/admin/showcases_.$id.tsx
+++ b/src/routes/admin/showcases_.$id.tsx
@@ -9,7 +9,7 @@ import {
   voteShowcase,
 } from '~/utils/showcase.functions'
 import { libraries } from '~/libraries'
-import { USE_CASE_LABELS } from '~/utils/showcase.client'
+import { USE_CASE_LABELS } from '~/utils/showcase.shared'
 import {
   ArrowLeft,
   Sparkles,
diff --git a/src/routes/admin/users.$userId.tsx b/src/routes/admin/users.$userId.tsx
index 2c966a670..340cf5bca 100644
--- a/src/routes/admin/users.$userId.tsx
+++ b/src/routes/admin/users.$userId.tsx
@@ -1,10 +1,10 @@
 import { createFileRoute, Link, redirect } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { getUser } from '~/utils/users.server'
+import { getUser } from '~/utils/users.functions'
 import { getUserRoles } from '~/utils/roles.functions'
 import { getUserEffectiveCapabilities } from '~/utils/roles.functions'
 import { ArrowLeft, User, Shield, Calendar, Mail, AtSign } from 'lucide-react'
-import { requireCapability } from '~/utils/auth.server'
+import { requireCapability } from '~/utils/auth.functions'
 import { Card } from '~/components/Card'
 import { format } from '~/utils/dates'
 import { Badge } from '~/ui'
@@ -96,7 +96,7 @@ function UserDetailPage() {
           </Link>
 
           <div className="flex items-center gap-4">
-            <div className="flex-shrink-0 h-16 w-16">
+            <div className="shrink-0 h-16 w-16">
               {user.image || user.oauthImage ? (
                 <img
                   className="h-16 w-16 rounded-full"
@@ -307,6 +307,20 @@ function UserDetailPage() {
                   </dd>
                 </div>
               )}
+              {user.signupSources.length > 0 && (
+                <div>
+                  <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                    Signup Sources
+                  </dt>
+                  <dd className="mt-1 flex flex-wrap gap-1">
+                    {user.signupSources.map((source) => (
+                      <Badge key={source} variant="info">
+                        {source}
+                      </Badge>
+                    ))}
+                  </dd>
+                </div>
+              )}
             </dl>
           </Card>
         </div>
diff --git a/src/routes/admin/users.tsx b/src/routes/admin/users.tsx
index 03c715c8c..071daac99 100644
--- a/src/routes/admin/users.tsx
+++ b/src/routes/admin/users.tsx
@@ -26,7 +26,11 @@ import {
   useBulkAssignRolesToUsers,
   useBulkUpdateUserCapabilities,
 } from '~/utils/mutations'
-import { VALID_CAPABILITIES, type Capability } from '~/db/types'
+import {
+  VALID_CAPABILITIES,
+  type Capability,
+  type SignupSource,
+} from '~/db/types'
 import * as v from 'valibot'
 import { listUsersQueryOptions } from '~/queries/users'
 import {
@@ -46,7 +50,8 @@ import {
 import { useAdminGuard } from '~/hooks/useAdminGuard'
 import { useToggleArray } from '~/hooks/useToggleArray'
 import { handleAdminError } from '~/utils/adminErrors'
-import { requireCapability } from '~/utils/auth.server'
+import { requireCapability } from '~/utils/auth.functions'
+import { pageIndexSchema, pageSizeSchema } from '~/utils/schemas'
 import { Badge, Button } from '~/ui'
 
 // User type for table - matches the shape returned by listUsers
@@ -60,11 +65,12 @@ type User = {
   capabilities: Capability[]
   adsDisabled: boolean | null
   interestedInHidingAds: boolean | null
+  signupSources: SignupSource[]
   createdAt: number
   updatedAt: number
 }
 
-type UsersSearch = {
+type _UsersSearch = {
   email?: string
   name?: string
   cap?: string | string[]
@@ -172,6 +178,20 @@ function EffectiveCapabilitiesCell({
   )
 }
 
+const searchSchema = v.object({
+  email: v.optional(v.string()),
+  name: v.optional(v.string()),
+  cap: v.optional(v.union([v.string(), v.array(v.string())])),
+  noCapabilities: v.optional(v.boolean()),
+  ads: v.optional(v.picklist(['all', 'true', 'false'])),
+  waitlist: v.optional(v.picklist(['all', 'true', 'false'])),
+  page: v.optional(pageIndexSchema),
+  pageSize: v.optional(pageSizeSchema),
+  useEffectiveCapabilities: v.optional(v.boolean(), true),
+  sortBy: v.optional(v.string()),
+  sortDir: v.optional(v.picklist(['asc', 'desc'])),
+})
+
 export const Route = createFileRoute('/admin/users')({
   beforeLoad: async () => {
     try {
@@ -182,23 +202,7 @@ export const Route = createFileRoute('/admin/users')({
     }
   },
   component: UsersPage,
-  validateSearch: (search) =>
-    v.parse(
-      v.object({
-        email: v.optional(v.string()),
-        name: v.optional(v.string()),
-        cap: v.optional(v.union([v.string(), v.array(v.string())])),
-        noCapabilities: v.optional(v.boolean()),
-        ads: v.optional(v.picklist(['all', 'true', 'false'])),
-        waitlist: v.optional(v.picklist(['all', 'true', 'false'])),
-        page: v.optional(v.pipe(v.number(), v.integer(), v.minValue(0))),
-        pageSize: v.optional(v.pipe(v.number(), v.integer(), v.minValue(1))),
-        useEffectiveCapabilities: v.optional(v.boolean(), true),
-        sortBy: v.optional(v.string()),
-        sortDir: v.optional(v.picklist(['asc', 'desc'])),
-      }),
-      search,
-    ),
+  validateSearch: searchSchema,
 })
 
 function UsersPage() {
@@ -248,7 +252,7 @@ function UsersPage() {
     }) => {
       navigate({
         resetScroll: false,
-        search: (prev: UsersSearch) => ({
+        search: (prev) => ({
           ...prev,
           email: 'email' in newFilters ? newFilters.email : prev.email,
           name: 'name' in newFilters ? newFilters.name : prev.name,
@@ -263,7 +267,7 @@ function UsersPage() {
             'waitlist' in newFilters ? newFilters.waitlist : prev.waitlist,
           useEffectiveCapabilities:
             'useEffectiveCapabilities' in newFilters
-              ? newFilters.useEffectiveCapabilities
+              ? newFilters.useEffectiveCapabilities!
               : prev.useEffectiveCapabilities,
           page: 0,
         }),
@@ -283,6 +287,7 @@ function UsersPage() {
       },
       emailFilter: emailFilter || undefined,
       nameFilter: nameFilter || undefined,
+      // @ts-expect-error not sure how to type this
       capabilityFilter:
         capabilityFilters.length > 0 ? capabilityFilters : undefined,
       noCapabilitiesFilter: noCapabilitiesFilter || undefined,
@@ -477,7 +482,7 @@ function UsersPage() {
         // New column: apply default direction
         navigate({
           resetScroll: false,
-          search: (prev: UsersSearch) => ({
+          search: (prev) => ({
             ...prev,
             sortBy: columnId,
             sortDir: sortDescFirst ? 'desc' : 'asc',
@@ -488,7 +493,7 @@ function UsersPage() {
         // First click was default, flip to opposite
         navigate({
           resetScroll: false,
-          search: (prev: UsersSearch) => ({
+          search: (prev) => ({
             ...prev,
             sortDir: sortDescFirst ? 'asc' : 'desc',
             page: 0,
@@ -498,7 +503,7 @@ function UsersPage() {
         // Third click: clear sort
         navigate({
           resetScroll: false,
-          search: (prev: UsersSearch) => ({
+          search: (prev) => ({
             ...prev,
             sortBy: undefined,
             sortDir: undefined,
@@ -950,13 +955,13 @@ function UsersPage() {
               onPageChange={(page) => {
                 navigate({
                   resetScroll: false,
-                  search: (prev: UsersSearch) => ({ ...prev, page }),
+                  search: (prev) => ({ ...prev, page }),
                 })
               }}
               onPageSizeChange={(newPageSize) => {
                 navigate({
                   resetScroll: false,
-                  search: (prev: UsersSearch) => ({
+                  search: (prev) => ({
                     ...prev,
                     pageSize: newPageSize,
                     page: 0,
diff --git a/src/routes/ads.tsx b/src/routes/ads.tsx
index a670f6f56..e66836bc1 100644
--- a/src/routes/ads.tsx
+++ b/src/routes/ads.tsx
@@ -1,12 +1,12 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
 import { Footer } from '~/components/Footer'
 import { seo } from '~/utils/seo'
-import { authClient } from '~/utils/auth.client'
+import { authClient } from '~/auth/client'
 import { Authenticated, Unauthenticated } from '~/components/AuthComponents'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { useToast } from '~/components/ToastProvider'
 import { useEffect, useState } from 'react'
-import { setInterestedInHidingAds } from '~/utils/users.server'
+import { setInterestedInHidingAds } from '~/utils/users.functions'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { CheckCircleIcon } from '~/components/icons/CheckCircleIcon'
 import { GoogleIcon } from '~/components/icons/GoogleIcon'
@@ -15,9 +15,9 @@ export const Route = createFileRoute('/ads')({
   component: RouteComp,
   head: () => ({
     meta: seo({
-      title: 'Why Ads? | TanStack',
+      title: 'Ads & Partnerships | TanStack',
       description:
-        'How we believe ads can tastefully play a part in sustainability for Open Source Software.',
+        'How TanStack approaches ads and partnerships to sustain open source development.',
     }),
   }),
 })
@@ -26,8 +26,8 @@ function RouteComp() {
   return (
     <div className="flex flex-col max-w-full min-h-screen gap-12 p-4 md:p-8 pb-0">
       <div className="flex-1 space-y-12 w-full max-w-3xl mx-auto">
-        <header className="">
-          <h1 className="text-3xl font-black">Why Ads?</h1>
+        <header>
+          <h1 className="text-3xl font-black">Ads & Partnerships</h1>
         </header>
 
         <section
@@ -45,70 +45,78 @@ function RouteComp() {
               <em>forever free</em>
             </strong>{' '}
             for everyone, including companies, without any hidden cost, agenda,
-            paid upsells, or licencing shenanigans. The ads you see help us keep
-            it that way.
+            paid upsells, or licensing shenanigans. We've removed third-party
+            ads from the site to give you a faster, cleaner experience.
           </p>
         </section>
 
-        <section className="">
+        <section className="space-y-4">
           <p>
-            If you're seeing ads on TanStack's website, you might be wondering
-            why. After all, ads on open source projects can feel like a
-            throwback to the early web—or worse, a sign that something has gone
-            wrong.
+            TanStack is <strong>independently operated</strong> with no paid
+            products and no venture capital. We're a small, focused team
+            dedicated to creating open source software used by millions of
+            developers daily.
           </p>
-        </section>
-
-        <section className="space-y-4">
           <p>
-            But here's the reality: TanStack is{' '}
-            <strong>independently operated</strong> with no paid products and no
-            venture capital. We're a small, focused team dedicated to creating
-            open source software used by millions of developers daily. To keep
-            building and maintaining these tools for the long term, we need
-            sustainable funding—and that's where advertising comes in.
+            We previously used third-party programmatic ads to help fund
+            development. While they served us well, they came with trade-offs:
+            heavy scripts, slow page loads, and a cluttered experience. We've
+            decided to move in a different direction.
           </p>
         </section>
 
-        <section id="sustainable-open-source" className="space-y-4 scroll-mt-8">
+        <section id="whats-changed" className="space-y-4 scroll-mt-8">
           <h2 className="text-2xl font-semibold">
-            <Link
-              to="/ads"
-              hash="sustainable-open-source"
-              className="hover:underline"
-            >
-              Sustainable Open Source Through Advertising
+            <Link to="/ads" hash="whats-changed" className="hover:underline">
+              What's Changed
             </Link>
           </h2>
-          <p>
-            We believe advertising can support open source sustainability while
-            maintaining our core values. Our approach to ads is guided by a few
-            key principles:
-          </p>
           <ul className="list-disc pl-8 space-y-2">
             <li>
-              <strong>Thoughtful placement:</strong> We place ads where they're
-              least disruptive to the core developer experience and
-              documentation.
+              <strong>No more third-party ads.</strong> We've completely removed
+              all external ad networks and their associated scripts from the
+              site.
             </li>
             <li>
-              <strong>Quality over quantity:</strong> We work with partners who
-              share our values and respect the developer community.
+              <strong>Faster pages.</strong> Without heavy ad SDKs and chained
+              dependencies, every page loads significantly faster.
             </li>
             <li>
-              <strong>Transparency:</strong> We're upfront about our funding
-              model and why ads are necessary for sustainability.
+              <strong>Private partnerships only.</strong> Going forward, any ads
+              you see will be from carefully selected TanStack partners — served
+              directly, with no third-party tracking.
             </li>
             <li>
-              <strong>User control:</strong> We respect user preferences and
-              provide options to manage ad preferences.
+              <strong>Lightweight by design.</strong> Partner placements will be
+              static images or text — no heavy iframes, no auction waterfalls,
+              no surprise JavaScript.
             </li>
           </ul>
+        </section>
+
+        <section id="sustainability" className="space-y-4 scroll-mt-8">
+          <h2 className="text-2xl font-semibold">
+            <Link to="/ads" hash="sustainability" className="hover:underline">
+              How We Stay Sustainable
+            </Link>
+          </h2>
           <p>
-            Beyond direct revenue, ad performance also serves as a baseline for
-            our partnership and sponsorship pricing. This helps us stay
-            relevant, grounded, and competitive—ensuring our pricing reflects
-            the real value our platform delivers to partners.
+            TanStack is funded through a combination of{' '}
+            <Link to="/partners" className="underline font-semibold">
+              partnerships
+            </Link>
+            ,{' '}
+            <a
+              href="https://github.com/sponsors/tannerlinsley"
+              className="underline font-semibold"
+              target="_blank"
+              rel="noreferrer"
+            >
+              GitHub sponsors
+            </a>
+            , and direct collaboration with companies that depend on our tools.
+            This model lets us stay independent while keeping everything free
+            and open source.
           </p>
         </section>
 
@@ -124,39 +132,20 @@ function RouteComp() {
             agendas. Our independence means we can focus on what matters:
             building great tools for developers.
           </p>
-          <p>
-            The revenue from ads helps us maintain our libraries, support our
-            community, and continue building the open source tools that millions
-            of developers rely on daily.
-          </p>
-        </section>
-
-        <section id="looking-forward" className="space-y-4 scroll-mt-8">
-          <h2 className="text-2xl font-semibold">
-            <Link to="/ads" hash="looking-forward" className="hover:underline">
-              Looking Forward
-            </Link>
-          </h2>
           <p>
             <Link to="/ethos" className="underline font-semibold">
-              Check out our ethos
+              Read our ethos
             </Link>{' '}
             to learn more about how we plan on sticking around (and staying
-            relevant) for the long-haul.
-          </p>
-          <p>
-            We're committed to finding sustainable ways to fund open source
-            development that don't compromise our values or your experience. Ads
-            are just one part of that equation, and we're always exploring new
-            approaches that align with our mission.
+            relevant) for the long haul.
           </p>
         </section>
 
         <section id="hide-ads" className="space-y-12 scroll-mt-8">
-          <header className="">
+          <header>
             <h2 className="text-3xl font-black">
               <Link to="/ads" hash="hide-ads" className="hover:underline">
-                Want to hide our ads?
+                Want to hide partner ads?
               </Link>
             </h2>
           </header>
@@ -225,8 +214,6 @@ function OptInButton() {
   const [isInterested, setIsInterested] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
 
-  // Using server function wrapper to handle authentication via session cookie
-
   useEffect(() => {
     if (
       userQuery.data &&
@@ -253,7 +240,7 @@ function OptInButton() {
           </div>
         </div>,
       )
-    } catch (error) {
+    } catch {
       notify(
         <div>
           <div className="font-medium">Error</div>
diff --git a/src/routes/api/admin/sync.tsx b/src/routes/api/admin/sync.tsx
deleted file mode 100644
index 097599b88..000000000
--- a/src/routes/api/admin/sync.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { syncAllSources } from '~/server/feed/sync-all'
-import { getAuthenticatedUser } from '~/utils/auth.server-helpers'
-import { getEffectiveCapabilities } from '~/utils/capabilities.server'
-
-export const Route = createFileRoute('/api/admin/sync')({
-  // @ts-expect-error server property not in route types yet
-  server: {
-    handlers: {
-      POST: async () => {
-        try {
-          // Require admin capability
-          const user = await getAuthenticatedUser()
-          const capabilities = await getEffectiveCapabilities(user.userId)
-          
-          if (!capabilities.includes('admin')) {
-            return new Response(
-              JSON.stringify({ error: 'Admin capability required' }),
-              {
-                status: 403,
-                headers: { 'Content-Type': 'application/json' },
-              }
-            )
-          }
-
-          console.log('[admin/sync] Starting sync all sources...')
-          
-          const result = await syncAllSources()
-          
-          console.log('[admin/sync] Sync completed:', result)
-          
-          return new Response(JSON.stringify(result), {
-            status: 200,
-            headers: { 'Content-Type': 'application/json' },
-          })
-        } catch (error) {
-          console.error('[admin/sync] Error:', error)
-          
-          return new Response(
-            JSON.stringify({
-              success: false,
-              error: error instanceof Error ? error.message : 'Unknown error',
-            }),
-            {
-              status: 500,
-              headers: { 'Content-Type': 'application/json' },
-            }
-          )
-        }
-      },
-    },
-  },
-})
-
diff --git a/src/routes/api/application-starter/resolve.ts b/src/routes/api/application-starter/resolve.ts
new file mode 100644
index 000000000..5e8975635
--- /dev/null
+++ b/src/routes/api/application-starter/resolve.ts
@@ -0,0 +1,206 @@
+import { createFileRoute } from '@tanstack/react-router'
+import {
+  checkIpWindowRateLimit,
+  checkIpRateLimit,
+  getIpWindowRateLimitStatus,
+  RATE_LIMITS,
+  rateLimitedResponse,
+} from '~/utils/rateLimit.server'
+import { envFunctions } from '~/utils/env.functions'
+import {
+  isRecord,
+  readJsonBody,
+  validateJsonRequest,
+} from '~/utils/api-boundary.server'
+
+const MAX_APPLICATION_STARTER_BODY_BYTES = 16 * 1024
+
+export const Route = createFileRoute('/api/application-starter/resolve')({
+  server: {
+    handlers: {
+      GET: async ({ request }: { request: Request }) => {
+        try {
+          if (!envFunctions.DATABASE_URL) {
+            return new Response(
+              JSON.stringify({
+                authenticated: false,
+                anonymousGenerationQuota: {
+                  limit: RATE_LIMITS.applicationStarterAnonymousDaily.limit,
+                  remaining: RATE_LIMITS.applicationStarterAnonymousDaily.limit,
+                  resetAt: new Date(
+                    Date.now() +
+                      RATE_LIMITS.applicationStarterAnonymousDaily.windowMs,
+                  ).toISOString(),
+                },
+              }),
+              {
+                headers: {
+                  'Cache-Control': 'no-store',
+                  'Content-Type': 'application/json',
+                },
+              },
+            )
+          }
+
+          const [{ getAuthService }, anonymousQuota] = await Promise.all([
+            import('~/auth/index.server'),
+            getIpWindowRateLimitStatus(
+              request,
+              RATE_LIMITS.applicationStarterAnonymousDaily,
+            ),
+          ])
+
+          const authService = getAuthService()
+          const user = await authService.getCurrentUser(request)
+
+          return new Response(
+            JSON.stringify({
+              authenticated: !!user,
+              anonymousGenerationQuota: user
+                ? null
+                : {
+                    limit: anonymousQuota.limit,
+                    remaining: anonymousQuota.remaining,
+                    resetAt: anonymousQuota.resetAt.toISOString(),
+                  },
+            }),
+            {
+              headers: {
+                'Cache-Control': 'no-store',
+                'Content-Type': 'application/json',
+              },
+            },
+          )
+        } catch (error) {
+          console.error('Error loading application starter status:', error)
+
+          return new Response(
+            JSON.stringify({
+              error: 'Failed to load application starter status',
+            }),
+            {
+              status: 500,
+              headers: {
+                'Cache-Control': 'no-store',
+                'Content-Type': 'application/json',
+              },
+            },
+          )
+        }
+      },
+      POST: async ({ request }: { request: Request }) => {
+        try {
+          const [{ getAuthService }, starterServer] = await Promise.all([
+            import('~/auth/index.server'),
+            import('~/utils/application-starter.server'),
+          ])
+
+          const rateLimit = await checkIpRateLimit(
+            request,
+            RATE_LIMITS.applicationStarter,
+          )
+
+          if (!rateLimit.allowed) {
+            return rateLimitedResponse(rateLimit)
+          }
+
+          const requestGuardError = validateJsonRequest(request, {
+            maxContentLength: MAX_APPLICATION_STARTER_BODY_BYTES,
+          })
+          if (requestGuardError) {
+            return new Response(
+              JSON.stringify({ error: requestGuardError.message }),
+              {
+                status: requestGuardError.status,
+                headers: {
+                  'Content-Type': 'application/json',
+                  ...Object.fromEntries(rateLimit.headers.entries()),
+                },
+              },
+            )
+          }
+
+          const bodyResult = await readJsonBody(request, {
+            maxContentLength: MAX_APPLICATION_STARTER_BODY_BYTES,
+          })
+          if (!bodyResult.success) {
+            return new Response(
+              JSON.stringify({ error: bodyResult.error.message }),
+              {
+                status: bodyResult.error.status,
+                headers: {
+                  'Content-Type': 'application/json',
+                  ...Object.fromEntries(rateLimit.headers.entries()),
+                },
+              },
+            )
+          }
+
+          const rawBody = bodyResult.body
+          const isAnalyzeRequest =
+            isRecord(rawBody) && rawBody.mode === 'analyze'
+          const body = starterServer.applicationStarterRequestSchema.parse(rawBody)
+
+          const authService = getAuthService()
+          const user = await authService.getCurrentUser(request)
+
+          if (!user && !isAnalyzeRequest) {
+            const anonymousQuota = await checkIpWindowRateLimit(
+              request,
+              RATE_LIMITS.applicationStarterAnonymousDaily,
+            )
+
+            if (!anonymousQuota.allowed) {
+              return new Response(
+                JSON.stringify({
+                  code: 'LOGIN_REQUIRED_FOR_MORE_GENERATIONS',
+                  error: 'Anonymous generation limit reached',
+                  limit: RATE_LIMITS.applicationStarterAnonymousDaily.limit,
+                  loginRequired: true,
+                  retryAfter: Math.ceil(
+                    (anonymousQuota.resetAt.getTime() - Date.now()) / 1000,
+                  ),
+                }),
+                {
+                  status: 429,
+                  headers: {
+                    'Content-Type': 'application/json',
+                    ...Object.fromEntries(rateLimit.headers.entries()),
+                    ...Object.fromEntries(anonymousQuota.headers.entries()),
+                  },
+                },
+              )
+            }
+          }
+
+          const response = isAnalyzeRequest
+            ? await starterServer.analyzeApplicationStarterServer({
+                data: body,
+              })
+            : await starterServer.resolveApplicationStarterServer({
+                data: body,
+              })
+
+          return new Response(JSON.stringify(response), {
+            headers: {
+              'Cache-Control': 'no-store',
+              'Content-Type': 'application/json',
+              ...Object.fromEntries(rateLimit.headers.entries()),
+            },
+          })
+        } catch (error) {
+          console.error('Error resolving application starter:', error)
+          return new Response(
+            JSON.stringify({
+              error: 'Failed to resolve application starter',
+            }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+      },
+    },
+  },
+})
diff --git a/src/routes/api/auth/callback/$provider.tsx b/src/routes/api/auth/callback/$provider.tsx
index e85de83fc..48b4ff200 100644
--- a/src/routes/api/auth/callback/$provider.tsx
+++ b/src/routes/api/auth/callback/$provider.tsx
@@ -1,114 +1,135 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { env } from '~/utils/env'
-import {
-  getOAuthStateCookie,
-  clearOAuthStateCookie,
-  isOAuthPopupMode,
-  clearOAuthPopupCookie,
-  getSessionService,
-  getOAuthService,
-  getUserRepository,
-  exchangeGitHubCode,
-  exchangeGoogleCode,
-  fetchGitHubProfile,
-  fetchGoogleProfile,
-  SESSION_DURATION_MS,
-  SESSION_MAX_AGE_SECONDS,
-} from '~/auth/index.server'
-import { recordLogin } from '~/utils/audit.server'
-import { recordDailyActivity } from '~/utils/activity.server'
-
-export const Route = createFileRoute('/api/auth/callback/$provider')({
-  // @ts-expect-error server property not in route types yet
+import { createFileRoute } from "@tanstack/react-router";
+import { env } from "~/utils/env";
+import { normalizeSameOriginPath } from "~/utils/url-boundary";
+
+export const Route = createFileRoute("/api/auth/callback/$provider")({
   server: {
     handlers: {
-      GET: async ({ request, params }: { request: Request; params: { provider: string } }) => {
-        const isProduction = process.env.NODE_ENV === 'production'
+      GET: async ({
+        request,
+        params,
+      }: {
+        request: Request;
+        params: { provider: string };
+      }) => {
+        const [authIndex, audit, activity] = await Promise.all([
+          import("~/auth/index.server"),
+          import("~/utils/audit.server"),
+          import("~/utils/activity.server"),
+        ]);
+        const {
+          getOAuthStateCookie,
+          clearOAuthStateCookie,
+          isOAuthPopupMode,
+          clearOAuthPopupCookie,
+          getOAuthReturnTo,
+          clearOAuthReturnToCookie,
+          getSessionService,
+          getOAuthService,
+          getUserRepository,
+          exchangeGitHubCode,
+          exchangeGoogleCode,
+          fetchGitHubProfile,
+          fetchGoogleProfile,
+          SESSION_DURATION_MS,
+          SESSION_MAX_AGE_SECONDS,
+        } = authIndex;
+        const { recordLogin } = audit;
+        const { recordDailyActivity } = activity;
+        const isProduction = process.env.NODE_ENV === "production";
 
         try {
-          const provider = params.provider as 'github' | 'google'
-          const url = new URL(request.url)
-          const code = url.searchParams.get('code')
-          const state = url.searchParams.get('state')
-          const error = url.searchParams.get('error')
+          const provider = params.provider;
+          if (provider !== "github" && provider !== "google") {
+            return Response.redirect(
+              new URL("/login?error=oauth_failed", request.url),
+              302,
+            );
+          }
+
+          const url = new URL(request.url);
+          const code = url.searchParams.get("code");
+          const state = url.searchParams.get("state");
+          const error = url.searchParams.get("error");
 
           if (error) {
             console.error(
               `[AUTH:ERROR] OAuth error received from provider: ${error}`,
-            )
+            );
             return Response.redirect(
-              new URL('/login?error=oauth_failed', request.url),
+              new URL("/login?error=oauth_failed", request.url),
               302,
-            )
+            );
           }
 
           if (!code || !state) {
             console.error(
-              '[AUTH:ERROR] Missing code or state in OAuth callback',
-            )
+              "[AUTH:ERROR] Missing code or state in OAuth callback",
+            );
             return Response.redirect(
-              new URL('/login?error=oauth_failed', request.url),
+              new URL("/login?error=oauth_failed", request.url),
               302,
-            )
+            );
           }
 
           // Validate state from HTTPS-only cookie (CSRF protection)
-          const cookieState = getOAuthStateCookie(request)
+          const cookieState = getOAuthStateCookie(request);
 
           if (!cookieState) {
             console.error(
-              '[AUTH:ERROR] No state cookie found - possible CSRF or cookie issue',
-            )
+              "[AUTH:ERROR] No state cookie found - possible CSRF or cookie issue",
+            );
             return Response.redirect(
-              new URL('/login?error=oauth_failed', request.url),
+              new URL("/login?error=oauth_failed", request.url),
               302,
-            )
+            );
           }
 
           if (cookieState !== state) {
             console.error(
               `[AUTH:ERROR] State mismatch - expected: ${cookieState.substring(0, 10)}..., received: ${state.substring(0, 10)}...`,
-            )
+            );
             return Response.redirect(
-              new URL('/login?error=oauth_failed', request.url),
+              new URL("/login?error=oauth_failed", request.url),
               302,
-            )
+            );
           }
 
           // Clear state cookie (one-time use)
-          const clearStateCookieHeader = clearOAuthStateCookie(isProduction)
+          const clearStateCookieHeader = clearOAuthStateCookie(isProduction);
 
           // Exchange code for access token
-          const origin = env.SITE_URL || new URL(request.url).origin
-          const redirectUri = `${origin}/api/auth/callback/${provider}`
+          const origin = new URL(request.url).origin;
+          const redirectUri = `${origin}/api/auth/callback/${provider}`;
 
           let userProfile: {
-            id: string
-            email: string
-            name?: string
-            image?: string
-          }
-
-          if (provider === 'github') {
-            const clientId = env.GITHUB_OAUTH_CLIENT_ID
-            const clientSecret = env.GITHUB_OAUTH_CLIENT_SECRET
+            id: string;
+            email: string;
+            name?: string;
+            image?: string;
+          };
+          let tokenInfo: { accessToken: string; scope: string } | undefined;
+
+          if (provider === "github") {
+            const clientId = env.GITHUB_OAUTH_CLIENT_ID;
+            const clientSecret = env.GITHUB_OAUTH_CLIENT_SECRET;
             if (!clientId || !clientSecret) {
-              throw new Error('GitHub OAuth credentials not configured')
+              throw new Error("GitHub OAuth credentials not configured");
             }
 
-            const accessToken = await exchangeGitHubCode(
+            const githubToken = await exchangeGitHubCode(
               code,
               clientId,
               clientSecret,
-              redirectUri,
-            )
-            userProfile = await fetchGitHubProfile(accessToken)
+            );
+            tokenInfo = githubToken;
+            userProfile = await fetchGitHubProfile(githubToken.accessToken);
           } else {
             // Google
-            const clientId = env.GOOGLE_OAUTH_CLIENT_ID
-            const clientSecret = env.GOOGLE_OAUTH_CLIENT_SECRET
+            const clientId = env.GOOGLE_OAUTH_CLIENT_ID;
+            const clientSecret = env.GOOGLE_OAUTH_CLIENT_SECRET;
             if (!clientId || !clientSecret) {
-              throw new Error('Google OAuth credentials not configured')
+              throw new Error("Google OAuth credentials not configured");
             }
 
             const accessToken = await exchangeGoogleCode(
@@ -116,26 +137,27 @@ export const Route = createFileRoute('/api/auth/callback/$provider')({
               clientId,
               clientSecret,
               redirectUri,
-            )
-            userProfile = await fetchGoogleProfile(accessToken)
+            );
+            userProfile = await fetchGoogleProfile(accessToken);
           }
 
           // Upsert user and OAuth account
-          const oauthService = getOAuthService()
+          const oauthService = getOAuthService();
           const result = await oauthService.upsertOAuthAccount(
             provider,
             userProfile,
-          )
+            tokenInfo,
+          );
 
           // Get user to access sessionVersion
-          const userRepository = getUserRepository()
-          const user = await userRepository.findById(result.userId)
+          const userRepository = getUserRepository();
+          const user = await userRepository.findById(result.userId);
 
           if (!user) {
             console.error(
               `[AUTH:ERROR] User ${result.userId} not found after OAuth account creation for ${provider}:${userProfile.id} (${userProfile.email})`,
-            )
-            throw new Error('User not found after OAuth account creation')
+            );
+            throw new Error("User not found after OAuth account creation");
           }
 
           // Record login event and daily activity (fire and forget, don't block auth flow)
@@ -148,54 +170,76 @@ export const Route = createFileRoute('/api/auth/callback/$provider')({
             }),
             recordDailyActivity(user.id),
           ]).catch((err) => {
-            console.error('[AUTH:WARN] Failed to record login/activity event:', err)
-          })
+            console.error(
+              "[AUTH:WARN] Failed to record login/activity event:",
+              err,
+            );
+          });
 
           // Create signed session cookie
-          const sessionService = getSessionService()
-          const expiresAt = Date.now() + SESSION_DURATION_MS
+          const sessionService = getSessionService();
+          const expiresAt = Date.now() + SESSION_DURATION_MS;
           const signedCookie = await sessionService.signCookie({
             userId: user.id,
             expiresAt,
             version: user.sessionVersion,
-          })
+          });
 
           const sessionCookie = sessionService.createSessionCookieHeader(
             signedCookie,
             SESSION_MAX_AGE_SECONDS,
-          )
+          );
 
           // Check if this was a popup OAuth flow
-          const isPopup = isOAuthPopupMode(request)
-          const redirectUrl = isPopup
-            ? new URL('/auth/popup-success', request.url).toString()
-            : new URL('/account', request.url).toString()
+          const isPopup = isOAuthPopupMode(request);
+
+          // Check for custom returnTo URL
+          const rawReturnTo = getOAuthReturnTo(request);
+          const returnTo = normalizeSameOriginPath(rawReturnTo, request.url);
+
+          let redirectUrl: string;
+          if (isPopup) {
+            redirectUrl = new URL(
+              "/auth/popup-success",
+              request.url,
+            ).toString();
+          } else if (returnTo) {
+            redirectUrl = new URL(returnTo, request.url).toString();
+          } else {
+            redirectUrl = new URL("/account", request.url).toString();
+          }
 
           // Return Response with Set-Cookie headers and redirect
-          const headers = new Headers()
-          headers.set('Location', redirectUrl)
-          headers.append('Set-Cookie', clearStateCookieHeader)
-          headers.append('Set-Cookie', sessionCookie)
+          const headers = new Headers();
+          headers.set("Location", redirectUrl);
+          headers.append("Set-Cookie", clearStateCookieHeader);
+          headers.append("Set-Cookie", sessionCookie);
           if (isPopup) {
-            headers.append('Set-Cookie', clearOAuthPopupCookie(isProduction))
+            headers.append("Set-Cookie", clearOAuthPopupCookie(isProduction));
+          }
+          if (rawReturnTo) {
+            headers.append(
+              "Set-Cookie",
+              clearOAuthReturnToCookie(isProduction),
+            );
           }
 
           return new Response(null, {
             status: 302,
             headers,
-          })
+          });
         } catch (err) {
-          console.error('[AUTH:ERROR] OAuth callback failed:', {
-            error: err instanceof Error ? err.message : 'Unknown error',
+          console.error("[AUTH:ERROR] OAuth callback failed:", {
+            error: err instanceof Error ? err.message : "Unknown error",
             stack: err instanceof Error ? err.stack : undefined,
             provider: params.provider,
-          })
+          });
           return Response.redirect(
-            new URL('/login?error=oauth_failed', request.url),
+            new URL("/login?error=oauth_failed", request.url),
             302,
-          )
+          );
         }
       },
     },
   },
-})
+});
diff --git a/src/routes/api/auth/cli/create-ticket.ts b/src/routes/api/auth/cli/create-ticket.ts
new file mode 100644
index 000000000..e859ec67f
--- /dev/null
+++ b/src/routes/api/auth/cli/create-ticket.ts
@@ -0,0 +1,27 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { jsonResponse } from "~/utils/api-boundary.server";
+import {
+  checkIpRateLimit,
+  RATE_LIMITS,
+  rateLimitedResponse,
+} from "~/utils/rateLimit.server";
+
+export const Route = createFileRoute("/api/auth/cli/create-ticket")({
+  server: {
+    handlers: {
+      POST: async ({ request }: { request: Request }) => {
+        const rateLimit = await checkIpRateLimit(
+          request,
+          RATE_LIMITS.cliAuthTicket,
+        );
+        if (!rateLimit.allowed) {
+          return rateLimitedResponse(rateLimit);
+        }
+
+        const { createCliTicket } = await import("~/auth/cli-tickets.server");
+        const ticketId = createCliTicket();
+        return jsonResponse({ ticketId }, { headers: rateLimit.headers });
+      },
+    },
+  },
+});
diff --git a/src/routes/api/auth/cli/status.$ticketId.ts b/src/routes/api/auth/cli/status.$ticketId.ts
new file mode 100644
index 000000000..c0a307d59
--- /dev/null
+++ b/src/routes/api/auth/cli/status.$ticketId.ts
@@ -0,0 +1,43 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { jsonError, jsonResponse } from "~/utils/api-boundary.server";
+
+const CLI_TICKET_ID_PATTERN =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+export const Route = createFileRoute("/api/auth/cli/status/$ticketId")({
+  server: {
+    handlers: {
+      GET: async ({
+        params,
+      }: {
+        request: Request;
+        params: { ticketId: string };
+      }) => {
+        if (!CLI_TICKET_ID_PATTERN.test(params.ticketId)) {
+          return jsonError("Invalid ticket id", 400);
+        }
+
+        const { getCliTicket, consumeCliTicket } = await import(
+          "~/auth/cli-tickets.server"
+        );
+        const ticket = getCliTicket(params.ticketId);
+
+        if (!ticket) {
+          return jsonError("Ticket not found or expired", 404);
+        }
+
+        if (!ticket.authorized) {
+          return jsonResponse({ authorized: false });
+        }
+
+        // Consume the ticket and return the session token
+        const sessionToken = consumeCliTicket(params.ticketId);
+        if (!sessionToken) {
+          return jsonError("Ticket not found or expired", 404);
+        }
+
+        return jsonResponse({ authorized: true, sessionToken });
+      },
+    },
+  },
+});
diff --git a/src/routes/api/builder/compile-attributed.ts b/src/routes/api/builder/compile-attributed.ts
new file mode 100644
index 000000000..e3c9fb5f3
--- /dev/null
+++ b/src/routes/api/builder/compile-attributed.ts
@@ -0,0 +1,50 @@
+import { createFileRoute } from '@tanstack/react-router'
+import {
+  builderErrorResponse,
+  builderInternalErrorResponse,
+  builderJsonResponse,
+  readBuilderJsonRequest,
+} from '~/builder/api/request-boundary.server'
+import {
+  builderValidateBodySchema,
+  parseBuilderRequest,
+} from '~/builder/api/request-schema.server'
+
+export const Route = createFileRoute('/api/builder/compile-attributed')({
+  server: {
+    handlers: {
+      POST: async ({ request }: { request: Request }) => {
+        try {
+          const requestBody = await readBuilderJsonRequest(request)
+          if ('response' in requestBody) {
+            return requestBody.response
+          }
+
+          let body
+          try {
+            body = parseBuilderRequest(
+              builderValidateBodySchema,
+              requestBody.body,
+            )
+          } catch {
+            return builderErrorResponse(
+              'Invalid request body',
+              400,
+              requestBody.rateLimit,
+            )
+          }
+
+          const { compileWithAttributionHandler } = await import(
+            '~/builder/api/compile'
+          )
+          const response = await compileWithAttributionHandler(body.definition)
+
+          return builderJsonResponse(response, requestBody.rateLimit)
+        } catch (error) {
+          console.error('Error compiling project with attribution:', error)
+          return builderInternalErrorResponse('Failed to compile project')
+        }
+      },
+    },
+  },
+})
diff --git a/src/routes/api/builder/compile.ts b/src/routes/api/builder/compile.ts
new file mode 100644
index 000000000..a11edba8a
--- /dev/null
+++ b/src/routes/api/builder/compile.ts
@@ -0,0 +1,49 @@
+import { createFileRoute } from '@tanstack/react-router'
+import {
+  builderErrorResponse,
+  builderInternalErrorResponse,
+  builderJsonResponse,
+  readBuilderJsonRequest,
+} from '~/builder/api/request-boundary.server'
+import {
+  builderCompileBodySchema,
+  parseBuilderRequest,
+} from '~/builder/api/request-schema.server'
+
+export const Route = createFileRoute('/api/builder/compile')({
+  server: {
+    handlers: {
+      POST: async ({ request }: { request: Request }) => {
+        try {
+          const requestBody = await readBuilderJsonRequest(request)
+          if ('response' in requestBody) {
+            return requestBody.response
+          }
+
+          let body
+          try {
+            body = parseBuilderRequest(
+              builderCompileBodySchema,
+              requestBody.body,
+            )
+          } catch {
+            return builderErrorResponse(
+              'Invalid request body',
+              400,
+              requestBody.rateLimit,
+            )
+          }
+
+          const { compileHandler } = await import('~/builder/api/compile')
+          const response = await compileHandler(body.definition, {
+            format: body.format,
+          })
+          return builderJsonResponse(response, requestBody.rateLimit)
+        } catch (error) {
+          console.error('Error compiling project:', error)
+          return builderInternalErrorResponse('Failed to compile project')
+        }
+      },
+    },
+  },
+})
diff --git a/src/routes/api/builder/deploy/check-name.ts b/src/routes/api/builder/deploy/check-name.ts
new file mode 100644
index 000000000..b9bb31d96
--- /dev/null
+++ b/src/routes/api/builder/deploy/check-name.ts
@@ -0,0 +1,84 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { validateBuilderGetRequest } from "~/builder/api/request-boundary.server";
+import { jsonResponse } from "~/utils/api-boundary.server";
+import { RATE_LIMITS } from "~/utils/rateLimit.server";
+
+export const Route = createFileRoute("/api/builder/deploy/check-name")({
+  server: {
+    handlers: {
+      GET: async ({ request }: { request: Request }) => {
+        const requestGuard = await validateBuilderGetRequest(request, {
+          rateLimit: RATE_LIMITS.deploy,
+        });
+        if ("response" in requestGuard) {
+          return requestGuard.response;
+        }
+
+        const [
+          { getAuthService },
+          { getGitHubAuthState },
+          { checkRepoNameAvailable, validateRepoName },
+        ] = await Promise.all([
+          import("~/auth/index.server"),
+          import("~/auth/github.server"),
+          import("~/utils/github-repo.server"),
+        ]);
+        const url = new URL(request.url);
+        const name = url.searchParams.get("name");
+
+        if (!name) {
+          return jsonResponse(
+            { available: false, error: "Name required" },
+            { status: 400, headers: requestGuard.rateLimit.headers },
+          );
+        }
+
+        const validation = validateRepoName(name);
+        if (!validation.valid) {
+          return jsonResponse(
+            {
+              available: false,
+              error: validation.error ?? "Invalid repository name",
+            },
+            { status: 400, headers: requestGuard.rateLimit.headers },
+          );
+        }
+
+        const authService = getAuthService();
+        const user = await authService.getCurrentUser(request);
+
+        if (!user) {
+          return jsonResponse(
+            { available: false, error: "Not authenticated" },
+            { status: 401, headers: requestGuard.rateLimit.headers },
+          );
+        }
+
+        const authState = await getGitHubAuthState(user.userId);
+
+        if (!authState.hasRepoScope || !authState.accessToken) {
+          return jsonResponse(
+            { available: false, error: "Missing scope" },
+            { status: 403, headers: requestGuard.rateLimit.headers },
+          );
+        }
+
+        try {
+          const available = await checkRepoNameAvailable(
+            authState.accessToken,
+            name,
+          );
+          return jsonResponse(
+            { available },
+            { headers: requestGuard.rateLimit.headers },
+          );
+        } catch {
+          return jsonResponse(
+            { available: false, error: "Could not check repository name" },
+            { status: 502, headers: requestGuard.rateLimit.headers },
+          );
+        }
+      },
+    },
+  },
+});
diff --git a/src/routes/api/builder/deploy/github.ts b/src/routes/api/builder/deploy/github.ts
new file mode 100644
index 000000000..eb9978219
--- /dev/null
+++ b/src/routes/api/builder/deploy/github.ts
@@ -0,0 +1,331 @@
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  jsonResponse,
+  readJsonBody,
+  validateJsonRequest,
+} from "~/utils/api-boundary.server";
+import {
+  builderDeployBodySchema,
+  parseBuilderRequest,
+} from "~/builder/api/request-schema.server";
+
+interface DeployResponse {
+  success: true;
+  repoUrl: string;
+  owner: string;
+  repoName: string;
+}
+
+interface DeployError {
+  success: false;
+  error: string;
+  code:
+    | "NOT_AUTHENTICATED"
+    | "NO_GITHUB_ACCOUNT"
+    | "MISSING_REPO_SCOPE"
+    | "INVALID_REPO_NAME"
+    | "REPO_NAME_TAKEN"
+    | "REPO_CREATION_FAILED"
+    | "PUSH_FAILED"
+    | "COMPILE_FAILED"
+    | "INVALID_REQUEST";
+}
+
+function deployErrorResponse(error: DeployError, status: number, headers?: Headers) {
+  return jsonResponse(error, { status, headers });
+}
+
+export const Route = createFileRoute("/api/builder/deploy/github")({
+  server: {
+    handlers: {
+      /**
+       * GET: Check GitHub auth state for current user
+       */
+      GET: async ({ request }: { request: Request }) => {
+        const [{ getAuthService }, { getGitHubAuthState }] = await Promise.all([
+          import("~/auth/index.server"),
+          import("~/auth/github.server"),
+        ]);
+        const authService = getAuthService();
+        const user = await authService.getCurrentUser(request);
+
+        if (!user) {
+          return jsonResponse({
+            authenticated: false,
+            hasGitHubAccount: false,
+            hasRepoScope: false,
+          });
+        }
+
+        const authState = await getGitHubAuthState(user.userId);
+
+        return jsonResponse({
+          authenticated: true,
+          ...authState,
+        });
+      },
+
+      /**
+       * POST: Create GitHub repo and push project files
+       */
+      POST: async ({ request }: { request: Request }) => {
+        const [authIndex, authGithub, githubRepo, rateLimitModule] =
+          await Promise.all([
+            import("~/auth/index.server"),
+            import("~/auth/github.server"),
+            import("~/utils/github-repo.server"),
+            import("~/utils/rateLimit.server"),
+          ]);
+        const { getAuthService } = authIndex;
+        const { getGitHubAuthState } = authGithub;
+        const {
+          createRepository,
+          pushFiles,
+          validateRepoName,
+          validateGitHubFiles,
+          generateRepoDescription,
+        } = githubRepo;
+        const { checkIpRateLimit, rateLimitedResponse, RATE_LIMITS } =
+          rateLimitModule;
+        // Rate limiting (10 requests/minute per IP)
+        const rateLimit = await checkIpRateLimit(request, RATE_LIMITS.deploy);
+        if (!rateLimit.allowed) {
+          return rateLimitedResponse(rateLimit);
+        }
+
+        const guardError = validateJsonRequest(request, {
+          maxContentLength: 1024 * 1024,
+        });
+        if (guardError) {
+          return deployErrorResponse(
+            {
+              success: false,
+              error: guardError.message,
+              code: "INVALID_REQUEST",
+            },
+            guardError.status,
+            rateLimit.headers,
+          );
+        }
+
+        const authService = getAuthService();
+        const user = await authService.getCurrentUser(request);
+
+        if (!user) {
+          return deployErrorResponse(
+            {
+              success: false,
+              error: "You must be logged in to deploy",
+              code: "NOT_AUTHENTICATED",
+            },
+            401,
+            rateLimit.headers,
+          );
+        }
+
+        const authState = await getGitHubAuthState(user.userId);
+
+        if (!authState.hasGitHubAccount) {
+          return deployErrorResponse(
+            {
+              success: false,
+              error: "No GitHub account linked",
+              code: "NO_GITHUB_ACCOUNT",
+            },
+            403,
+            rateLimit.headers,
+          );
+        }
+
+        if (!authState.hasRepoScope || !authState.accessToken) {
+          console.log("[Deploy] Auth state check failed:", {
+            hasRepoScope: authState.hasRepoScope,
+            hasToken: !!authState.accessToken,
+          });
+          return deployErrorResponse(
+            {
+              success: false,
+              error:
+                "Missing public_repo scope. Please re-authenticate with GitHub.",
+              code: "MISSING_REPO_SCOPE",
+            },
+            403,
+            rateLimit.headers,
+          );
+        }
+        console.log(
+          "[Deploy] Auth state OK, hasRepoScope:",
+          authState.hasRepoScope,
+        );
+
+        let body;
+        try {
+          const bodyResult = await readJsonBody(request, {
+            maxContentLength: 1024 * 1024,
+          });
+          if (!bodyResult.success) {
+            throw new Error(bodyResult.error.message);
+          }
+          body = parseBuilderRequest(builderDeployBodySchema, bodyResult.body);
+        } catch {
+          return deployErrorResponse(
+            {
+              success: false,
+              error: "Invalid request body",
+              code: "INVALID_REQUEST",
+            },
+            400,
+            rateLimit.headers,
+          );
+        }
+
+        const {
+          repoName,
+          isPrivate,
+          projectName,
+          framework,
+          packageManager,
+          features,
+          featureOptions,
+          tailwind,
+          files,
+        } = body;
+        const safeFeatureOptions = featureOptions ?? {};
+
+        // Validate repo name
+        const validation = validateRepoName(repoName);
+        if (!validation.valid) {
+          return deployErrorResponse(
+            {
+              success: false,
+              error: validation.error ?? "Invalid repository name",
+              code: "INVALID_REPO_NAME",
+            },
+            400,
+            rateLimit.headers,
+          );
+        }
+
+        // Compile the project, or use files generated by the client-only builder.
+        let compiledFiles: Record<string, string>;
+        if (files) {
+          const fileValidation = validateGitHubFiles(files);
+          if (!fileValidation.valid) {
+            return deployErrorResponse(
+              {
+                success: false,
+                error: fileValidation.error,
+                code: "INVALID_REQUEST",
+              },
+              400,
+              rateLimit.headers,
+            );
+          }
+          compiledFiles = files;
+        } else {
+          try {
+            const { compileHandler } = await import("~/builder/api/compile");
+            const result = await compileHandler({
+              name: projectName,
+              framework,
+              packageManager,
+              tailwind,
+              features,
+              featureOptions: safeFeatureOptions,
+            });
+            compiledFiles = result.files;
+          } catch (error) {
+            console.error("[Deploy] Compile failed:", error);
+            return deployErrorResponse(
+              {
+                success: false,
+                error: "Failed to compile project",
+                code: "COMPILE_FAILED",
+              },
+              500,
+              rateLimit.headers,
+            );
+          }
+        }
+
+        const compiledFileValidation = validateGitHubFiles(compiledFiles);
+        if (!compiledFileValidation.valid) {
+          return deployErrorResponse(
+            {
+              success: false,
+              error: compiledFileValidation.error,
+              code: "INVALID_REQUEST",
+            },
+            400,
+            rateLimit.headers,
+          );
+        }
+
+        // Create the repository
+        const description = generateRepoDescription(features);
+        console.log("[Deploy] Creating repository:", {
+          repoName,
+          isPrivate,
+          description,
+        });
+        const createResult = await createRepository(authState.accessToken, {
+          name: repoName,
+          description,
+          isPrivate,
+        });
+
+        if (!createResult.success) {
+          console.error("[Deploy] Repository creation failed:", {
+            error: createResult.error,
+            code: createResult.code,
+          });
+          const code =
+            createResult.code === "NAME_TAKEN"
+              ? "REPO_NAME_TAKEN"
+              : "REPO_CREATION_FAILED";
+          return deployErrorResponse(
+            {
+              success: false,
+              error: createResult.error,
+              code,
+            },
+            code === "REPO_NAME_TAKEN" ? 409 : 500,
+            rateLimit.headers,
+          );
+        }
+        console.log("[Deploy] Repository created:", createResult.repoUrl);
+
+        // Push files to the repository
+        const pushResult = await pushFiles(authState.accessToken, {
+          owner: createResult.owner,
+          repo: createResult.name,
+          files: compiledFiles,
+          message: "Initial commit from TanStack Builder",
+        });
+
+        if (!pushResult.success) {
+          console.error("[Deploy] Push failed:", pushResult.error);
+          return deployErrorResponse(
+            {
+              success: false,
+              error: `Repository created but failed to push files: ${pushResult.error}`,
+              code: "PUSH_FAILED",
+            },
+            500,
+            rateLimit.headers,
+          );
+        }
+
+        return jsonResponse(
+          {
+            success: true,
+            repoUrl: createResult.repoUrl,
+            owner: createResult.owner,
+            repoName: createResult.name,
+          } satisfies DeployResponse,
+          { headers: rateLimit.headers },
+        );
+      },
+    },
+  },
+});
diff --git a/src/routes/api/builder/download.ts b/src/routes/api/builder/download.ts
new file mode 100644
index 000000000..122d02dec
--- /dev/null
+++ b/src/routes/api/builder/download.ts
@@ -0,0 +1,148 @@
+import { createFileRoute } from "@tanstack/react-router";
+import JSZip from "jszip";
+import {
+  getContentDispositionHeader,
+  sanitizeResponseFilename,
+} from "~/utils/http-response";
+import {
+  builderErrorResponse,
+  builderInternalErrorResponse,
+  validateBuilderGetRequest,
+} from "~/builder/api/request-boundary.server";
+
+const BASE64_PREFIX = "base64::";
+const MAX_BUILDER_DOWNLOAD_FEATURES = 80;
+const MAX_BUILDER_DOWNLOAD_OPTIONS = 200;
+const BUILDER_ID_PATTERN = /^[a-z0-9._-]{1,120}$/i;
+const BUILDER_PROJECT_NAME_PATTERN = /^[a-z0-9][a-z0-9_-]{0,119}$/;
+
+function decodeBase64File(content: string): Uint8Array | null {
+  if (content.startsWith(BASE64_PREFIX)) {
+    const decoded = atob(content.slice(BASE64_PREFIX.length));
+
+    return Uint8Array.from(decoded, (char) => char.charCodeAt(0));
+  }
+
+  return null;
+}
+
+export const Route = createFileRoute("/api/builder/download")({
+  server: {
+    handlers: {
+      GET: async ({ request }: { request: Request }) => {
+        try {
+          const requestGuard = await validateBuilderGetRequest(request);
+          if ("response" in requestGuard) {
+            return requestGuard.response;
+          }
+
+          const url = new URL(request.url);
+          const name = url.searchParams.get("name") || "my-tanstack-app";
+          const featuresParam = url.searchParams.get("features") || "";
+          const framework = url.searchParams.get("framework") || "react";
+          const packageManager = url.searchParams.get("pm") || "pnpm";
+          const tailwind = url.searchParams.get("tailwind") !== "false";
+
+          const features = featuresParam
+            .split(",")
+            .map((f) => f.trim())
+            .filter(Boolean);
+
+          if (
+            !BUILDER_PROJECT_NAME_PATTERN.test(name) ||
+            features.length > MAX_BUILDER_DOWNLOAD_FEATURES ||
+            features.some((feature) => !BUILDER_ID_PATTERN.test(feature))
+          ) {
+            return builderErrorResponse(
+              "Invalid builder download request",
+              400,
+              requestGuard.rateLimit,
+            );
+          }
+
+          // Parse feature options (keys like "drizzle.database=postgres")
+          const featureOptions: Record<string, Record<string, unknown>> = {};
+          let optionCount = 0;
+          for (const [key, value] of url.searchParams.entries()) {
+            if (key.includes(".") && value) {
+              const [featureId, optionKey] = key.split(".");
+              optionCount++;
+              if (
+                optionCount > MAX_BUILDER_DOWNLOAD_OPTIONS ||
+                !BUILDER_ID_PATTERN.test(featureId) ||
+                !BUILDER_ID_PATTERN.test(optionKey) ||
+                value.length > 500
+              ) {
+                return builderErrorResponse(
+                  "Invalid builder download options",
+                  400,
+                  requestGuard.rateLimit,
+                );
+              }
+              if (!featureOptions[featureId]) {
+                featureOptions[featureId] = {};
+              }
+              featureOptions[featureId][optionKey] = value;
+            }
+          }
+
+          const { compileHandler } = await import("~/builder/api/compile");
+          const result = await compileHandler({
+            name,
+            framework: framework === "solid" ? "solid" : "react",
+            packageManager:
+              packageManager === "bun" ||
+              packageManager === "npm" ||
+              packageManager === "yarn"
+                ? packageManager
+                : "pnpm",
+            tailwind,
+            features,
+            featureOptions,
+          });
+
+          const zip = new JSZip();
+          const zipFilename = sanitizeResponseFilename(`${name}.zip`, "app.zip");
+          const rootFolderName = sanitizeResponseFilename(name, "app");
+          const rootFolder = zip.folder(rootFolderName);
+          if (!rootFolder) {
+            throw new Error("Failed to create ZIP folder");
+          }
+
+          for (const [filePath, content] of Object.entries(result.files)) {
+            // Handle base64-encoded binary files (SVGs, images, etc.)
+            const binaryContent = decodeBase64File(content);
+            if (binaryContent) {
+              rootFolder.file(filePath, binaryContent, { binary: true });
+            } else {
+              rootFolder.file(filePath, content);
+            }
+          }
+
+          const blob = await zip.generateAsync({ type: "arraybuffer" });
+
+          // Cache for 1 hour on CDN, allow stale for 1 day while revalidating
+          const cacheControl =
+            process.env.NODE_ENV === "production"
+              ? "public, max-age=3600, stale-while-revalidate=86400"
+              : "no-cache";
+
+          return new Response(blob, {
+            headers: {
+              "Content-Type": "application/zip",
+              "Content-Disposition": getContentDispositionHeader(
+                "attachment",
+                zipFilename,
+                "app.zip",
+              ),
+              "Cache-Control": cacheControl,
+            },
+          });
+        } catch (error) {
+          console.error("Error generating ZIP:", error);
+          return builderInternalErrorResponse("Failed to generate ZIP");
+        }
+      },
+    },
+  },
+});
diff --git a/src/routes/api/builder/feature-artifacts.ts b/src/routes/api/builder/feature-artifacts.ts
new file mode 100644
index 000000000..8ebcff3f5
--- /dev/null
+++ b/src/routes/api/builder/feature-artifacts.ts
@@ -0,0 +1,59 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { normalizeFrameworkId } from '~/builder/frameworks'
+import {
+  builderErrorResponse,
+  builderInternalErrorResponse,
+  builderJsonResponse,
+  readBuilderJsonRequest,
+} from '~/builder/api/request-boundary.server'
+import {
+  builderFeatureArtifactsBodySchema,
+  parseBuilderRequest,
+} from '~/builder/api/request-schema.server'
+
+export const Route = createFileRoute('/api/builder/feature-artifacts')({
+  server: {
+    handlers: {
+      POST: async ({ request }: { request: Request }) => {
+        try {
+          const requestBody = await readBuilderJsonRequest(request)
+          if ('response' in requestBody) {
+            return requestBody.response
+          }
+
+          let body
+          try {
+            body = parseBuilderRequest(
+              builderFeatureArtifactsBodySchema,
+              requestBody.body,
+            )
+          } catch {
+            return builderErrorResponse(
+              'Invalid request body',
+              400,
+              requestBody.rateLimit,
+            )
+          }
+
+          const { featureArtifactsHandler } = await import(
+            '~/builder/api/feature-artifacts'
+          )
+          const response = await featureArtifactsHandler({
+            features: body.features,
+            projectName: body.projectName,
+            framework: normalizeFrameworkId(body.framework),
+            featureOptions: body.featureOptions,
+            tailwind: body.tailwind,
+          })
+
+          return builderJsonResponse(response, requestBody.rateLimit)
+        } catch (error) {
+          console.error('Error fetching feature artifacts:', error)
+          return builderInternalErrorResponse(
+            'Failed to fetch feature artifacts',
+          )
+        }
+      },
+    },
+  },
+})
diff --git a/src/routes/api/builder/features.ts b/src/routes/api/builder/features.ts
new file mode 100644
index 000000000..456bf8ed7
--- /dev/null
+++ b/src/routes/api/builder/features.ts
@@ -0,0 +1,31 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { normalizeFrameworkId } from '~/builder/frameworks'
+
+export const Route = createFileRoute('/api/builder/features')({
+  server: {
+    handlers: {
+      GET: async ({ request }: { request: Request }) => {
+        try {
+          const url = new URL(request.url)
+          const framework = normalizeFrameworkId(
+            url.searchParams.get('framework') ?? 'react',
+          )
+          const { getFeaturesHandler } = await import('~/builder/api/features')
+          const response = await getFeaturesHandler(framework)
+          return new Response(JSON.stringify(response), {
+            headers: { 'Content-Type': 'application/json' },
+          })
+        } catch (error) {
+          console.error('Error fetching features:', error)
+          return new Response(
+            JSON.stringify({ error: 'Failed to fetch features' }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+      },
+    },
+  },
+})
diff --git a/src/routes/api/builder/load-remote-addon.ts b/src/routes/api/builder/load-remote-addon.ts
new file mode 100644
index 000000000..55fa18b39
--- /dev/null
+++ b/src/routes/api/builder/load-remote-addon.ts
@@ -0,0 +1,35 @@
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  builderErrorResponse,
+  builderJsonResponse,
+  validateBuilderGetRequest,
+} from "~/builder/api/request-boundary.server";
+import { RATE_LIMITS } from "~/utils/rateLimit.server";
+
+export const Route = createFileRoute("/api/builder/load-remote-addon")({
+  server: {
+    handlers: {
+      GET: async ({ request }: { request: Request }) => {
+        const requestGuard = await validateBuilderGetRequest(request, {
+          rateLimit: RATE_LIMITS.builderRemote,
+        });
+        if ("response" in requestGuard) {
+          return requestGuard.response;
+        }
+
+        const url = new URL(request.url);
+        const integrationUrl = url.searchParams.get("url");
+
+        if (!integrationUrl) {
+          return builderErrorResponse("URL is required", 400, requestGuard.rateLimit);
+        }
+
+        const { loadRemoteIntegrationHandler } = await import(
+          "~/builder/api/remote",
+        );
+        const response = await loadRemoteIntegrationHandler(integrationUrl);
+        return builderJsonResponse(response, requestGuard.rateLimit);
+      },
+    },
+  },
+});
diff --git a/src/routes/api/builder/load-remote-template.ts b/src/routes/api/builder/load-remote-template.ts
new file mode 100644
index 000000000..23ffd18f6
--- /dev/null
+++ b/src/routes/api/builder/load-remote-template.ts
@@ -0,0 +1,33 @@
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  builderErrorResponse,
+  builderJsonResponse,
+  validateBuilderGetRequest,
+} from "~/builder/api/request-boundary.server";
+import { RATE_LIMITS } from "~/utils/rateLimit.server";
+
+export const Route = createFileRoute("/api/builder/load-remote-template")({
+  server: {
+    handlers: {
+      GET: async ({ request }: { request: Request }) => {
+        const requestGuard = await validateBuilderGetRequest(request, {
+          rateLimit: RATE_LIMITS.builderRemote,
+        });
+        if ("response" in requestGuard) {
+          return requestGuard.response;
+        }
+
+        const url = new URL(request.url);
+        const templateUrl = url.searchParams.get("url");
+
+        if (!templateUrl) {
+          return builderErrorResponse("URL is required", 400, requestGuard.rateLimit);
+        }
+
+        const { loadRemoteTemplateHandler } = await import("~/builder/api/remote");
+        const response = await loadRemoteTemplateHandler(templateUrl);
+        return builderJsonResponse(response, requestGuard.rateLimit);
+      },
+    },
+  },
+});
diff --git a/src/routes/api/builder/load-template.ts b/src/routes/api/builder/load-template.ts
new file mode 100644
index 000000000..0d5a51532
--- /dev/null
+++ b/src/routes/api/builder/load-template.ts
@@ -0,0 +1,51 @@
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  builderErrorResponse,
+  builderJsonResponse,
+  readBuilderJsonRequest,
+} from "~/builder/api/request-boundary.server";
+import {
+  builderRemoteLoadBodySchema,
+  parseBuilderRequest,
+} from "~/builder/api/request-schema.server";
+import { RATE_LIMITS } from "~/utils/rateLimit.server";
+
+export const Route = createFileRoute("/api/builder/load-template")({
+  server: {
+    handlers: {
+      POST: async ({ request }: { request: Request }) => {
+        try {
+          const requestBody = await readBuilderJsonRequest(request, {
+            rateLimit: RATE_LIMITS.builderRemote,
+          });
+          if ("response" in requestBody) {
+            return requestBody.response;
+          }
+
+          let body;
+          try {
+            body = parseBuilderRequest(
+              builderRemoteLoadBodySchema,
+              requestBody.body,
+            );
+          } catch {
+            return builderErrorResponse(
+              "Invalid request body",
+              400,
+              requestBody.rateLimit,
+            );
+          }
+
+          const { loadRemoteTemplateHandler } = await import(
+            "~/builder/api/remote",
+          );
+          const response = await loadRemoteTemplateHandler(body.url);
+          return builderJsonResponse(response, requestBody.rateLimit);
+        } catch (error) {
+          console.error("Error loading remote template:", error);
+          return builderErrorResponse("Failed to load remote template", 500);
+        }
+      },
+    },
+  },
+});
diff --git a/src/routes/api/builder/suggest.ts b/src/routes/api/builder/suggest.ts
new file mode 100644
index 000000000..db8e68b42
--- /dev/null
+++ b/src/routes/api/builder/suggest.ts
@@ -0,0 +1,44 @@
+import { createFileRoute } from '@tanstack/react-router'
+import {
+  builderErrorResponse,
+  builderInternalErrorResponse,
+  builderJsonResponse,
+  readBuilderJsonRequest,
+} from '~/builder/api/request-boundary.server'
+import {
+  builderSuggestBodySchema,
+  parseBuilderRequest,
+} from '~/builder/api/request-schema.server'
+
+export const Route = createFileRoute('/api/builder/suggest')({
+  server: {
+    handlers: {
+      POST: async ({ request }: { request: Request }) => {
+        try {
+          const requestBody = await readBuilderJsonRequest(request)
+          if ('response' in requestBody) {
+            return requestBody.response
+          }
+
+          let body
+          try {
+            body = parseBuilderRequest(builderSuggestBodySchema, requestBody.body)
+          } catch {
+            return builderErrorResponse(
+              'Invalid request body',
+              400,
+              requestBody.rateLimit,
+            )
+          }
+
+          const { suggestHandler } = await import('~/builder/api/suggest')
+          const response = await suggestHandler(body)
+          return builderJsonResponse(response, requestBody.rateLimit)
+        } catch (error) {
+          console.error('Error suggesting features:', error)
+          return builderInternalErrorResponse('Failed to generate suggestions')
+        }
+      },
+    },
+  },
+})
diff --git a/src/routes/api/builder/validate.ts b/src/routes/api/builder/validate.ts
new file mode 100644
index 000000000..5f8cde676
--- /dev/null
+++ b/src/routes/api/builder/validate.ts
@@ -0,0 +1,47 @@
+import { createFileRoute } from '@tanstack/react-router'
+import {
+  builderErrorResponse,
+  builderInternalErrorResponse,
+  builderJsonResponse,
+  readBuilderJsonRequest,
+} from '~/builder/api/request-boundary.server'
+import {
+  builderValidateBodySchema,
+  parseBuilderRequest,
+} from '~/builder/api/request-schema.server'
+
+export const Route = createFileRoute('/api/builder/validate')({
+  server: {
+    handlers: {
+      POST: async ({ request }: { request: Request }) => {
+        try {
+          const requestBody = await readBuilderJsonRequest(request)
+          if ('response' in requestBody) {
+            return requestBody.response
+          }
+
+          let body
+          try {
+            body = parseBuilderRequest(
+              builderValidateBodySchema,
+              requestBody.body,
+            )
+          } catch {
+            return builderErrorResponse(
+              'Invalid request body',
+              400,
+              requestBody.rateLimit,
+            )
+          }
+
+          const { validateHandler } = await import('~/builder/api/validate')
+          const response = await validateHandler(body.definition)
+          return builderJsonResponse(response, requestBody.rateLimit)
+        } catch (error) {
+          console.error('Error validating project:', error)
+          return builderInternalErrorResponse('Failed to validate project')
+        }
+      },
+    },
+  },
+})
diff --git a/src/routes/api/data/libraries.ts b/src/routes/api/data/libraries.ts
new file mode 100644
index 000000000..4fb9a9afb
--- /dev/null
+++ b/src/routes/api/data/libraries.ts
@@ -0,0 +1,58 @@
+import { createFileRoute } from '@tanstack/react-router'
+import {
+  librariesByGroup,
+  librariesGroupNamesMap,
+  isPublicLibrary,
+  publicLibraries,
+} from '~/libraries/libraries'
+
+export const Route = createFileRoute('/api/data/libraries')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const filteredLibraries = publicLibraries
+          .filter((lib) => lib.id !== 'mcp')
+          .map((lib) => ({
+            id: lib.id,
+            name: lib.name,
+            tagline: lib.tagline,
+            description: lib.description,
+            frameworks: lib.frameworks,
+            latestVersion: lib.latestVersion,
+            latestBranch: lib.latestBranch,
+            availableVersions: lib.availableVersions,
+            repo: lib.repo,
+            docsRoot: lib.docsRoot,
+            defaultDocs: lib.defaultDocs,
+            docsUrl: lib.defaultDocs
+              ? `https://tanstack.com/${lib.id}/latest/docs/${lib.defaultDocs}`
+              : `https://tanstack.com/${lib.id}`,
+            githubUrl: lib.repo ? `https://github.com/${lib.repo}` : undefined,
+          }))
+
+        const groups = Object.fromEntries(
+          Object.entries(librariesByGroup).map(([key, libs]) => [
+            key,
+            libs
+              .filter((lib) => isPublicLibrary(lib) && lib.id !== 'mcp')
+              .map((lib) => lib.id),
+          ]),
+        )
+
+        return new Response(
+          JSON.stringify({
+            libraries: filteredLibraries,
+            groups,
+            groupNames: librariesGroupNamesMap,
+          }),
+          {
+            headers: {
+              'Content-Type': 'application/json',
+              'Cache-Control': 'public, max-age=3600',
+            },
+          },
+        )
+      },
+    },
+  },
+})
diff --git a/src/routes/api/data/partners.ts b/src/routes/api/data/partners.ts
new file mode 100644
index 000000000..998318f15
--- /dev/null
+++ b/src/routes/api/data/partners.ts
@@ -0,0 +1,47 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { partners, partnerCategories, partnerCategoryLabels } from '~/utils/partners'
+import {
+  getPartnerPlacementContext,
+  getPartnersForPlacement,
+} from '~/utils/partner-placement'
+
+export const Route = createFileRoute('/api/data/partners')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const placementContext = getPartnerPlacementContext({
+          orderStrategy: 'machine-readable',
+          surface: 'api_data_partners',
+        })
+        const filteredPartners = getPartnersForPlacement(
+          partners.filter((p) => p.status === 'active'),
+          placementContext,
+        )
+          .map((p) => ({
+            id: p.id,
+            name: p.name,
+            tagline: p.tagline,
+            description: p.llmDescription,
+            category: p.category,
+            categoryLabel: partnerCategoryLabels[p.category],
+            libraries: p.libraries || [],
+            url: p.href,
+          }))
+
+        return new Response(
+          JSON.stringify({
+            partners: filteredPartners,
+            categories: partnerCategories,
+            categoryLabels: partnerCategoryLabels,
+          }),
+          {
+            headers: {
+              'Content-Type': 'application/json',
+              'Cache-Control': 'public, max-age=3600',
+            },
+          },
+        )
+      },
+    },
+  },
+})
diff --git a/src/routes/api/discord/interactions.tsx b/src/routes/api/discord/interactions.tsx
index 877ccbffb..a6aa2b630 100644
--- a/src/routes/api/discord/interactions.tsx
+++ b/src/routes/api/discord/interactions.tsx
@@ -1,9 +1,25 @@
 import { createFileRoute } from '@tanstack/react-router'
 import {
-  verifyKey,
-  InteractionType,
-  InteractionResponseType,
-} from 'discord-interactions'
+  isRecord,
+  jsonError,
+  jsonResponse,
+  readTextBody,
+} from '~/utils/api-boundary.server'
+
+const MAX_DISCORD_INTERACTION_BYTES = 64 * 1024
+const DISCORD_SIGNATURE_PATTERN = /^[a-f0-9]{128}$/i
+const DISCORD_TIMESTAMP_PATTERN = /^\d{1,20}$/
+const DISCORD_PUBLIC_KEY_PATTERN = /^[a-f0-9]{64}$/i
+
+const InteractionType = {
+  APPLICATION_COMMAND: 2,
+  PING: 1,
+} as const
+
+const InteractionResponseType = {
+  CHANNEL_MESSAGE_WITH_SOURCE: 4,
+  PONG: 1,
+} as const
 
 const DISCORD_PUBLIC_KEY = process.env.DISCORD_PUBLIC_KEY
 
@@ -13,10 +29,60 @@ type InteractionData = {
 }
 
 type Interaction = {
-  type: InteractionType
+  type: number
   data?: InteractionData
 }
 
+function valueToUint8Array(value: string, format?: 'hex') {
+  if (format === 'hex') {
+    if (!/^[a-f0-9]+$/i.test(value) || value.length % 2 !== 0) {
+      throw new Error('Value is not a valid hex string')
+    }
+
+    const matches = value.match(/.{1,2}/g)
+
+    if (!matches) {
+      throw new Error('Value is not a valid hex string')
+    }
+
+    return new Uint8Array(
+      matches.map((byte) => Number.parseInt(byte, 16)),
+    )
+  }
+
+  return new TextEncoder().encode(value)
+}
+
+async function verifyDiscordKey(
+  rawBody: string,
+  signature: string,
+  timestamp: string,
+  clientPublicKey: string,
+) {
+  const timestampBytes = valueToUint8Array(timestamp)
+  const bodyBytes = valueToUint8Array(rawBody)
+  const message = new Uint8Array(timestampBytes.length + bodyBytes.length)
+  message.set(timestampBytes)
+  message.set(bodyBytes, timestampBytes.length)
+
+  const publicKey = await crypto.subtle.importKey(
+    'raw',
+    valueToUint8Array(clientPublicKey, 'hex'),
+    {
+      name: 'Ed25519',
+    },
+    false,
+    ['verify'],
+  )
+
+  return crypto.subtle.verify(
+    { name: 'Ed25519' },
+    publicKey,
+    valueToUint8Array(signature, 'hex'),
+    message,
+  )
+}
+
 function handleStatusCommand() {
   return {
     type: InteractionResponseType.CHANNEL_MESSAGE_WITH_SOURCE,
@@ -37,34 +103,86 @@ function handleUnknownCommand(commandName: string) {
   }
 }
 
+function parseInteraction(value: unknown): Interaction | null {
+  if (!isRecord(value) || typeof value.type !== 'number') {
+    return null
+  }
+
+  const data = value.data
+  if (data === undefined) {
+    return { type: value.type }
+  }
+
+  if (!isRecord(data) || typeof data.name !== 'string') {
+    return null
+  }
+
+  const options = data.options
+  const parsedOptions: InteractionData['options'] = []
+  if (Array.isArray(options)) {
+    for (const option of options) {
+      if (
+        !isRecord(option) ||
+        typeof option.name !== 'string' ||
+        typeof option.value !== 'string'
+      ) {
+        return null
+      }
+
+      parsedOptions.push({
+        name: option.name,
+        value: option.value,
+      })
+    }
+  }
+
+  return {
+    type: value.type,
+    data: {
+      name: data.name,
+      options: parsedOptions.length > 0 ? parsedOptions : undefined,
+    },
+  }
+}
+
 export const Route = createFileRoute('/api/discord/interactions')({
-  // @ts-expect-error server property not in route types yet
   server: {
     handlers: {
       POST: async ({ request }: { request: Request }) => {
         try {
           if (!DISCORD_PUBLIC_KEY) {
             console.error('[Discord] DISCORD_PUBLIC_KEY not configured')
-            return new Response(
-              JSON.stringify({ error: 'Discord public key not configured' }),
-              { status: 500, headers: { 'Content-Type': 'application/json' } },
-            )
+            return jsonError('Discord public key not configured', 500)
+          }
+
+          if (!DISCORD_PUBLIC_KEY_PATTERN.test(DISCORD_PUBLIC_KEY)) {
+            console.error('[Discord] DISCORD_PUBLIC_KEY is malformed')
+            return jsonError('Discord public key is malformed', 500)
           }
 
           const signature = request.headers.get('X-Signature-Ed25519')
           const timestamp = request.headers.get('X-Signature-Timestamp')
 
-          if (!signature || !timestamp) {
+          if (
+            !signature ||
+            !timestamp ||
+            !DISCORD_SIGNATURE_PATTERN.test(signature) ||
+            !DISCORD_TIMESTAMP_PATTERN.test(timestamp)
+          ) {
             console.error('[Discord] Missing signature headers')
-            return new Response(
-              JSON.stringify({ error: 'Missing signature headers' }),
-              { status: 401, headers: { 'Content-Type': 'application/json' } },
-            )
+            return jsonError('Missing signature headers', 401)
           }
 
-          const body = await request.text()
+          const bodyResult = await readTextBody(
+            request,
+            MAX_DISCORD_INTERACTION_BYTES,
+          )
+          if (!bodyResult.success) {
+            return jsonError(bodyResult.error.message, bodyResult.error.status)
+          }
+          const body = bodyResult.text
 
-          const isValid = await verifyKey(
+          const isValid = await verifyDiscordKey(
             body,
             signature,
             timestamp,
@@ -73,22 +191,20 @@ export const Route = createFileRoute('/api/discord/interactions')({
 
           if (!isValid) {
             console.error('[Discord] Invalid signature')
-            return new Response(
-              JSON.stringify({ error: 'Invalid signature' }),
-              { status: 401, headers: { 'Content-Type': 'application/json' } },
-            )
+            return jsonError('Invalid signature', 401)
+          }
+
+          const interaction = parseInteraction(JSON.parse(body))
+          if (!interaction) {
+            return jsonError('Invalid interaction payload', 400)
           }
 
-          const interaction: Interaction = JSON.parse(body)
           console.log('[Discord] Interaction type:', interaction.type)
 
           // Handle PING (Discord uses this to verify endpoint)
           if (interaction.type === InteractionType.PING) {
             console.log('[Discord] Responding to PING')
-            return new Response(
-              JSON.stringify({ type: InteractionResponseType.PONG }),
-              { status: 200, headers: { 'Content-Type': 'application/json' } },
-            )
+            return jsonResponse({ type: InteractionResponseType.PONG })
           }
 
           // Handle slash commands
@@ -105,23 +221,14 @@ export const Route = createFileRoute('/api/discord/interactions')({
                 response = handleUnknownCommand(commandName || 'unknown')
             }
 
-            return new Response(JSON.stringify(response), {
-              status: 200,
-              headers: { 'Content-Type': 'application/json' },
-            })
+            return jsonResponse(response)
           }
 
           console.error('[Discord] Unknown interaction type:', interaction.type)
-          return new Response(
-            JSON.stringify({ error: 'Unknown interaction type' }),
-            { status: 400, headers: { 'Content-Type': 'application/json' } },
-          )
+          return jsonError('Unknown interaction type', 400)
         } catch (error) {
           console.error('[Discord] Handler error:', error)
-          return new Response(
-            JSON.stringify({ error: 'Internal server error' }),
-            { status: 500, headers: { 'Content-Type': 'application/json' } },
-          )
+          return jsonError('Internal server error', 500)
         }
       },
     },
diff --git a/src/routes/api/dry-run-add-to-app.ts b/src/routes/api/dry-run-add-to-app.ts
deleted file mode 100644
index e60cafc41..000000000
--- a/src/routes/api/dry-run-add-to-app.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { registerFramework } from '@tanstack/cta-engine'
-import { createFrameworkDefinition } from '@tanstack/cta-framework-react-cra'
-import { addToAppWrapper } from '@tanstack/cta-ui/lib/engine-handling/add-to-app-wrapper'
-
-// Ensure framework is registered
-registerFramework(createFrameworkDefinition())
-
-export const Route = createFileRoute('/api/dry-run-add-to-app')({
-  // @ts-expect-error server property not in route types yet
-  server: {
-    handlers: {
-      POST: async ({ request }: { request: Request }) => {
-        const body = await request.json()
-
-        try {
-          const output = await addToAppWrapper(body.addOns, {
-            dryRun: true,
-          })
-
-          return new Response(JSON.stringify(output), {
-            headers: { 'Content-Type': 'application/json' },
-          })
-        } catch {
-          return new Response(
-            JSON.stringify({
-              files: {},
-              commands: [],
-              deletedFiles: [],
-            }),
-            {
-              headers: { 'Content-Type': 'application/json' },
-            },
-          )
-        }
-      },
-    },
-  },
-})
diff --git a/src/routes/api/dry-run-create-app.ts b/src/routes/api/dry-run-create-app.ts
deleted file mode 100644
index c618968cc..000000000
--- a/src/routes/api/dry-run-create-app.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { registerFramework } from '@tanstack/cta-engine'
-import { createFrameworkDefinition } from '@tanstack/cta-framework-react-cra'
-import { createAppWrapper } from '@tanstack/cta-ui/lib/engine-handling/create-app-wrapper'
-
-// Ensure framework is registered
-registerFramework(createFrameworkDefinition())
-
-// Patch vite.config.ts for WebContainer compatibility
-// WebContainer can't run workerd, so we need to use node-ws preset
-function patchFilesForWebContainer(
-  files: Record<string, string>,
-): Record<string, string> {
-  const patched = { ...files }
-
-  // Find and patch vite.config.ts
-  for (const [path, content] of Object.entries(patched)) {
-    if (path.endsWith('vite.config.ts')) {
-      let patchedContent = content
-
-      // Use node-ws preset instead of workerd
-      if (patchedContent.includes('tanstackStart()')) {
-        patchedContent = patchedContent.replace(
-          /tanstackStart\(\)/g,
-          "tanstackStart({ preset: 'node-ws' })",
-        )
-      }
-
-      // Fix duplicate resolve key issue by removing the second one
-      // This happens when both base and start vite configs are merged incorrectly
-      const resolveMatches = patchedContent.match(/resolve:\s*\{/g)
-      if (resolveMatches && resolveMatches.length > 1) {
-        // Remove the second resolve block (keep the first one)
-        let firstResolveFound = false
-        patchedContent = patchedContent.replace(
-          /,?\s*resolve:\s*\{[^}]*\}/g,
-          (match) => {
-            if (!firstResolveFound) {
-              firstResolveFound = true
-              return match
-            }
-            return '' // Remove subsequent resolve blocks
-          },
-        )
-      }
-
-      patched[path] = patchedContent
-    }
-  }
-
-  return patched
-}
-
-export const Route = createFileRoute('/api/dry-run-create-app')({
-  // @ts-expect-error server property not in route types yet
-  server: {
-    handlers: {
-      POST: async ({ request }: { request: Request }) => {
-        const body = await request.json()
-
-        try {
-          const output = await createAppWrapper(body.options, {
-            dryRun: true,
-          })
-
-          if (!output) {
-            throw new Error('No output from createAppWrapper')
-          }
-
-          // Patch files for WebContainer compatibility
-          const patchedFiles = patchFilesForWebContainer(output.files)
-
-          return new Response(
-            JSON.stringify({ ...output, files: patchedFiles }),
-            {
-              headers: { 'Content-Type': 'application/json' },
-            },
-          )
-        } catch (error) {
-          return new Response(
-            JSON.stringify({
-              files: {},
-              commands: [],
-              deletedFiles: [],
-            }),
-            {
-              headers: { 'Content-Type': 'application/json' },
-            },
-          )
-        }
-      },
-    },
-  },
-})
diff --git a/src/routes/api/example/deploy.ts b/src/routes/api/example/deploy.ts
new file mode 100644
index 000000000..62f8f186f
--- /dev/null
+++ b/src/routes/api/example/deploy.ts
@@ -0,0 +1,362 @@
+import { createFileRoute } from "@tanstack/react-router";
+import * as v from "valibot";
+import type { DeployProvider } from "~/utils/provider-config.server";
+import {
+  jsonResponse,
+  readJsonBody,
+  validateJsonRequest,
+} from "~/utils/api-boundary.server";
+import { parseBuilderRequest } from "~/builder/api/request-schema.server";
+
+interface DeployRequest {
+  repoName: string;
+  isPrivate: boolean;
+  sourceRepo: string;
+  branch: string;
+  examplePath: string;
+  provider: DeployProvider;
+  libraryName: string;
+  exampleName: string;
+}
+
+interface DeployResponse {
+  success: true;
+  repoUrl: string;
+  owner: string;
+  repoName: string;
+}
+
+interface DeployError {
+  success: false;
+  error: string;
+  code:
+    | "NOT_AUTHENTICATED"
+    | "NO_GITHUB_ACCOUNT"
+    | "MISSING_REPO_SCOPE"
+    | "INVALID_REPO_NAME"
+    | "REPO_NAME_TAKEN"
+    | "REPO_CREATION_FAILED"
+    | "PUSH_FAILED"
+    | "FETCH_FAILED"
+    | "INVALID_REQUEST";
+}
+
+const exampleDeployBodySchema = v.object({
+  repoName: v.pipe(v.string(), v.minLength(1), v.maxLength(100)),
+  isPrivate: v.boolean(),
+  sourceRepo: v.pipe(v.string(), v.minLength(3), v.maxLength(200)),
+  branch: v.pipe(v.string(), v.minLength(1), v.maxLength(200)),
+  examplePath: v.pipe(v.string(), v.minLength(1), v.maxLength(260)),
+  provider: v.picklist(["cloudflare", "netlify", "railway"]),
+  libraryName: v.pipe(v.string(), v.minLength(1), v.maxLength(120)),
+  exampleName: v.pipe(v.string(), v.minLength(1), v.maxLength(120)),
+});
+
+function deployErrorResponse(error: DeployError, status: number, headers?: Headers) {
+  return jsonResponse(error, { status, headers });
+}
+
+function isSafeSourceRepo(repo: string) {
+  return /^[a-zA-Z0-9_.-]+\/[a-zA-Z0-9_.-]+$/.test(repo);
+}
+
+function isSafeGitRef(ref: string) {
+  return !ref.startsWith("/") && !ref.includes("..") && !ref.includes("\\");
+}
+
+function isSafeExamplePath(path: string) {
+  return (
+    !path.startsWith("/") &&
+    !path.includes("..") &&
+    !path.includes("\\") &&
+    !path.split("/").some((segment) => !segment || segment === ".")
+  );
+}
+
+export const Route = createFileRoute("/api/example/deploy")({
+  server: {
+    handlers: {
+      /**
+       * POST: Create GitHub repo from example files and push with provider config
+       */
+      POST: async ({ request }: { request: Request }) => {
+        const [
+          authIndex,
+          authGithub,
+          githubRepo,
+          githubExample,
+          providerConfig,
+          rateLimitModule,
+        ] = await Promise.all([
+          import("~/auth/index.server"),
+          import("~/auth/github.server"),
+          import("~/utils/github-repo.server"),
+          import("~/utils/github-example.server"),
+          import("~/utils/provider-config.server"),
+          import("~/utils/rateLimit.server"),
+        ]);
+        const { getAuthService } = authIndex;
+        const { getGitHubAuthState } = authGithub;
+        const {
+          createRepository,
+          pushFiles,
+          validateGitHubFiles,
+          validateRepoName,
+        } = githubRepo;
+        const { fetchExampleFiles, filterExcludedFiles } = githubExample;
+        const {
+          applyProviderConfig,
+          generateExampleDescription,
+          isStartApp: _isStartApp,
+        } = providerConfig;
+        const { checkIpRateLimit, rateLimitedResponse, RATE_LIMITS } =
+          rateLimitModule;
+        // Rate limiting (10 requests/minute per IP)
+        const rateLimit = await checkIpRateLimit(request, RATE_LIMITS.deploy);
+        if (!rateLimit.allowed) {
+          return rateLimitedResponse(rateLimit);
+        }
+
+        const guardError = validateJsonRequest(request, {
+          maxContentLength: 64 * 1024,
+        });
+        if (guardError) {
+          return deployErrorResponse(
+            {
+              success: false,
+              error: guardError.message,
+              code: "INVALID_REQUEST",
+            },
+            guardError.status,
+            rateLimit.headers,
+          );
+        }
+
+        const authService = getAuthService();
+        const user = await authService.getCurrentUser(request);
+
+        if (!user) {
+          return deployErrorResponse(
+            {
+              success: false,
+              error: "You must be logged in to deploy",
+              code: "NOT_AUTHENTICATED",
+            },
+            401,
+            rateLimit.headers,
+          );
+        }
+
+        const authState = await getGitHubAuthState(user.userId);
+
+        if (!authState.hasGitHubAccount) {
+          return deployErrorResponse(
+            {
+              success: false,
+              error: "No GitHub account linked",
+              code: "NO_GITHUB_ACCOUNT",
+            },
+            403,
+            rateLimit.headers,
+          );
+        }
+
+        if (!authState.hasRepoScope || !authState.accessToken) {
+          return deployErrorResponse(
+            {
+              success: false,
+              error:
+                "Missing public_repo scope. Please re-authenticate with GitHub.",
+              code: "MISSING_REPO_SCOPE",
+            },
+            403,
+            rateLimit.headers,
+          );
+        }
+
+        let body: DeployRequest;
+        try {
+          const bodyResult = await readJsonBody(request, {
+            maxContentLength: 64 * 1024,
+          });
+          if (!bodyResult.success) {
+            throw new Error(bodyResult.error.message);
+          }
+          body = parseBuilderRequest(exampleDeployBodySchema, bodyResult.body);
+        } catch {
+          return deployErrorResponse(
+            {
+              success: false,
+              error: "Invalid request body",
+              code: "INVALID_REQUEST",
+            },
+            400,
+            rateLimit.headers,
+          );
+        }
+
+        const {
+          repoName,
+          isPrivate,
+          sourceRepo,
+          branch,
+          examplePath,
+          provider,
+          libraryName,
+          exampleName,
+        } = body;
+
+        if (
+          !isSafeSourceRepo(sourceRepo) ||
+          !isSafeGitRef(branch) ||
+          !isSafeExamplePath(examplePath)
+        ) {
+          return deployErrorResponse(
+            {
+              success: false,
+              error: "Invalid source repository, branch, or example path",
+              code: "INVALID_REQUEST",
+            },
+            400,
+            rateLimit.headers,
+          );
+        }
+
+        // Validate repo name
+        const validation = validateRepoName(repoName);
+        if (!validation.valid) {
+          return deployErrorResponse(
+            {
+              success: false,
+              error: validation.error ?? "Invalid repository name",
+              code: "INVALID_REPO_NAME",
+            },
+            400,
+            rateLimit.headers,
+          );
+        }
+
+        // Fetch example files from source repo
+        console.log("[ExampleDeploy] Fetching example files:", {
+          sourceRepo,
+          branch,
+          examplePath,
+        });
+
+        const fetchResult = await fetchExampleFiles(
+          sourceRepo,
+          branch,
+          `examples/${examplePath}`,
+        );
+
+        if (!fetchResult.success) {
+          console.error("[ExampleDeploy] Fetch failed:", fetchResult.error);
+          return deployErrorResponse(
+            {
+              success: false,
+              error: `Failed to fetch example files: ${fetchResult.error}`,
+              code: "FETCH_FAILED",
+            },
+            500,
+            rateLimit.headers,
+          );
+        }
+
+        // Filter out excluded files (node_modules, dist, etc.)
+        let files = filterExcludedFiles(fetchResult.files);
+
+        // Apply provider-specific configuration (only modifies Start apps)
+        console.log("[ExampleDeploy] Applying provider config:", provider);
+        files = applyProviderConfig(files, provider, repoName);
+
+        const fileValidation = validateGitHubFiles(files);
+        if (!fileValidation.valid) {
+          return deployErrorResponse(
+            {
+              success: false,
+              error: fileValidation.error,
+              code: "INVALID_REQUEST",
+            },
+            400,
+            rateLimit.headers,
+          );
+        }
+
+        // Create the repository
+        const description = generateExampleDescription(
+          libraryName,
+          exampleName,
+          provider,
+        );
+        console.log("[ExampleDeploy] Creating repository:", {
+          repoName,
+          isPrivate,
+          description,
+        });
+
+        const createResult = await createRepository(authState.accessToken, {
+          name: repoName,
+          description,
+          isPrivate,
+        });
+
+        if (!createResult.success) {
+          console.error("[ExampleDeploy] Repository creation failed:", {
+            error: createResult.error,
+            code: createResult.code,
+          });
+          const code =
+            createResult.code === "NAME_TAKEN"
+              ? "REPO_NAME_TAKEN"
+              : "REPO_CREATION_FAILED";
+          return deployErrorResponse(
+            {
+              success: false,
+              error: createResult.error,
+              code,
+            },
+            code === "REPO_NAME_TAKEN" ? 409 : 500,
+            rateLimit.headers,
+          );
+        }
+        console.log(
+          "[ExampleDeploy] Repository created:",
+          createResult.repoUrl,
+        );
+
+        // Push files to the repository
+        const pushResult = await pushFiles(authState.accessToken, {
+          owner: createResult.owner,
+          repo: createResult.name,
+          files,
+          message: `Initial commit from TanStack ${libraryName} example`,
+        });
+
+        if (!pushResult.success) {
+          console.error("[ExampleDeploy] Push failed:", pushResult.error);
+          return deployErrorResponse(
+            {
+              success: false,
+              error: `Repository created but failed to push files: ${pushResult.error}`,
+              code: "PUSH_FAILED",
+            },
+            500,
+            rateLimit.headers,
+          );
+        }
+
+        console.log("[ExampleDeploy] Success!");
+
+        return jsonResponse(
+          {
+            success: true,
+            repoUrl: createResult.repoUrl,
+            owner: createResult.owner,
+            repoName: createResult.name,
+          } satisfies DeployResponse,
+          { headers: rateLimit.headers },
+        );
+      },
+    },
+  },
+});
diff --git a/src/routes/api/github/webhook.ts b/src/routes/api/github/webhook.ts
new file mode 100644
index 000000000..0c70b4020
--- /dev/null
+++ b/src/routes/api/github/webhook.ts
@@ -0,0 +1,185 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { isWatchedDocsWebhookSource } from "~/utils/docs-webhook-sources";
+import {
+  isRecord,
+  jsonError,
+  jsonResponse,
+  readTextBody,
+} from "~/utils/api-boundary.server";
+
+const MAX_GITHUB_WEBHOOK_BYTES = 256 * 1024;
+const GITHUB_SIGNATURE_PATTERN = /^sha256=[a-f0-9]{64}$/i;
+
+type PushEventPayload = {
+  ref: string;
+  repository: {
+    full_name: string;
+  };
+  commits: Array<{
+    added?: Array<string>;
+    modified?: Array<string>;
+    removed?: Array<string>;
+  }>;
+};
+
+function hasOptionalStringArray(record: Record<string, unknown>, key: string) {
+  const value = record[key]
+  return (
+    value === undefined ||
+    (Array.isArray(value) && value.every((item) => typeof item === "string"))
+  )
+}
+
+function isPushEventPayload(value: unknown): value is PushEventPayload {
+  if (!isRecord(value)) {
+    return false;
+  }
+
+  const repository = value.repository
+
+  return (
+    typeof value.ref === "string" &&
+    isRecord(repository) &&
+    typeof repository.full_name === "string" &&
+    Array.isArray(value.commits) &&
+    value.commits.every(
+      (commit) =>
+        isRecord(commit) &&
+        hasOptionalStringArray(commit, "added") &&
+        hasOptionalStringArray(commit, "modified") &&
+        hasOptionalStringArray(commit, "removed"),
+    )
+  );
+}
+
+async function verifyGitHubSignature(
+  rawBody: string,
+  signature: string,
+  secret: string,
+) {
+  const { createHmac, timingSafeEqual } = await import("node:crypto");
+  const expectedSignature = `sha256=${createHmac("sha256", secret)
+    .update(rawBody)
+    .digest("hex")}`;
+  const encoder = new TextEncoder();
+  const received = encoder.encode(signature);
+  const expected = encoder.encode(expectedSignature);
+
+  return (
+    received.length === expected.length && timingSafeEqual(received, expected)
+  );
+}
+
+export const Route = createFileRoute("/api/github/webhook")({
+  server: {
+    handlers: {
+      POST: async ({ request }: { request: Request }) => {
+        const [
+          { markDocsArtifactsStale, markGitHubContentStale },
+          { env },
+          { libraries },
+          { purgeHostingCacheTags },
+        ] = await Promise.all([
+          import("~/utils/github-content-cache.server"),
+          import("~/utils/env"),
+          import("~/libraries"),
+          import("~/utils/hosting-cache.server"),
+        ]);
+        const bodyResult = await readTextBody(request, MAX_GITHUB_WEBHOOK_BYTES);
+        if (!bodyResult.success) {
+          return jsonError(bodyResult.error.message, bodyResult.error.status);
+        }
+        const rawBody = bodyResult.text;
+
+        const event = request.headers.get("x-github-event");
+        const signature = request.headers.get("x-hub-signature-256");
+
+        if (!env.GITHUB_WEBHOOK_SECRET) {
+          console.error("[GitHub webhook] GITHUB_WEBHOOK_SECRET is not configured");
+          return jsonError("Webhook secret is not configured", 500);
+        }
+
+        if (
+          !signature ||
+          !GITHUB_SIGNATURE_PATTERN.test(signature) ||
+          !(await verifyGitHubSignature(
+            rawBody,
+            signature,
+            env.GITHUB_WEBHOOK_SECRET,
+          ))
+        ) {
+          return jsonError("Invalid webhook signature", 401);
+        }
+
+        if (event === "ping") {
+          return jsonResponse({ ok: true });
+        }
+
+        if (event !== "push") {
+          return jsonResponse({ ok: true, ignored: true, event });
+        }
+
+        let payload: unknown;
+
+        try {
+          payload = JSON.parse(rawBody);
+        } catch {
+          return jsonError("Invalid JSON payload", 400);
+        }
+
+        if (!isPushEventPayload(payload)) {
+          return jsonError("Invalid push payload", 400);
+        }
+
+        const gitRef = payload.ref.replace(/^refs\/heads\//, "");
+        const repo = payload.repository.full_name.toLowerCase();
+
+        if (!isWatchedDocsWebhookSource(repo, gitRef)) {
+          return jsonResponse({
+            ok: true,
+            ignored: true,
+            reason: "unwatched repo/ref",
+            repo,
+            gitRef,
+          });
+        }
+
+        const changedPaths = Array.from(
+          new Set(
+            payload.commits.flatMap((commit) => [
+              ...(commit.added ?? []),
+              ...(commit.modified ?? []),
+              ...(commit.removed ?? []),
+            ]),
+          ),
+        );
+
+        const [staleContentCount, staleArtifactCount] = await Promise.all([
+          markGitHubContentStale({ repo, gitRef }),
+          markDocsArtifactsStale({ repo, gitRef }),
+        ]);
+
+        const tags = [
+          `docs-config:${repo}:${gitRef}`,
+          ...libraries
+            .filter(
+              (library) =>
+                library.repo === repo && library.latestBranch === gitRef,
+            )
+            .map((library) => `docs:${library.id}:branch:${gitRef}`),
+        ];
+
+        const purge = await purgeHostingCacheTags(tags);
+
+        return jsonResponse({
+          ok: true,
+          gitRef,
+          changedPathCount: changedPaths.length,
+          staleArtifactCount,
+          staleContentCount,
+          purge,
+        });
+      },
+    },
+  },
+});
diff --git a/src/routes/api/github/webhook.tsx b/src/routes/api/github/webhook.tsx
deleted file mode 100644
index d1acf8d1b..000000000
--- a/src/routes/api/github/webhook.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { normalizeGitHubRelease } from '~/server/feed/github'
-import { getFeedEntry, createFeedEntry, updateFeedEntry } from '~/utils/feed.functions'
-import { env } from '~/utils/env'
-import crypto from 'crypto'
-
-/**
- * Verify GitHub webhook signature
- */
-function verifyGitHubSignature(
-  payload: string,
-  signature: string,
-  secret: string
-): boolean {
-  const hmac = crypto.createHmac('sha256', secret)
-  const digest = 'sha256=' + hmac.update(payload).digest('hex')
-  return crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(digest))
-}
-
-export const Route = createFileRoute('/api/github/webhook')({
-  // @ts-expect-error server property not in route types yet
-  server: {
-    handlers: {
-      POST: async ({ request }: { request: Request }) => {
-        const webhookSecret = env.GITHUB_WEBHOOK_SECRET
-        if (!webhookSecret) {
-          return new Response(
-            JSON.stringify({ error: 'Webhook secret not configured' }),
-            {
-              status: 500,
-              headers: { 'Content-Type': 'application/json' },
-            }
-          )
-        }
-
-        // Get signature from headers
-        const signature = request.headers.get('X-Hub-Signature-256')
-        if (!signature) {
-          return new Response(JSON.stringify({ error: 'Missing signature' }), {
-            status: 401,
-            headers: { 'Content-Type': 'application/json' },
-          })
-        }
-
-        // Read request body
-        const payload = await request.text()
-
-        // Verify signature
-        const isValid = verifyGitHubSignature(payload, signature, webhookSecret)
-        if (!isValid) {
-          return new Response(JSON.stringify({ error: 'Invalid signature' }), {
-            status: 401,
-            headers: { 'Content-Type': 'application/json' },
-          })
-        }
-
-        // Parse payload
-        const event = JSON.parse(payload)
-        const eventType = request.headers.get('X-GitHub-Event')
-
-        // Only process release events
-        if (eventType !== 'release' || event.action !== 'published') {
-          return new Response(
-            JSON.stringify({
-              message: 'Event ignored',
-              eventType,
-              action: event.action,
-            }),
-            {
-              status: 200,
-              headers: { 'Content-Type': 'application/json' },
-            }
-          )
-        }
-
-        // Extract repo from event
-        const repo = event.repository.full_name
-
-        // Normalize release
-        const normalized = await normalizeGitHubRelease({
-          id: event.release.id,
-          tag_name: event.release.tag_name,
-          name: event.release.name,
-          body: event.release.body || '',
-          published_at: event.release.published_at,
-          html_url: event.release.html_url,
-          author: event.release.author,
-          repo,
-        })
-
-        const now = Date.now()
-
-        // Check if entry already exists
-        const existing = await getFeedEntry({ data: { id: normalized.id } })
-
-        if (existing) {
-          // Update existing entry
-          await updateFeedEntry({
-            data: {
-              id: normalized.id,
-              title: normalized.title,
-              content: normalized.content,
-              excerpt: normalized.excerpt,
-              publishedAt: normalized.publishedAt,
-              metadata: normalized.metadata,
-              libraryIds: normalized.libraryIds,
-              tags: normalized.tags,
-              lastSyncedAt: now,
-            },
-          })
-        } else {
-          // Create new entry
-          await createFeedEntry({
-            data: normalized,
-          })
-        }
-
-        return new Response(
-          JSON.stringify({
-            message: 'Webhook processed',
-            releaseId: normalized.id,
-          }),
-          {
-            status: 200,
-            headers: { 'Content-Type': 'application/json' },
-          }
-        )
-      },
-    },
-  },
-})
-
diff --git a/src/routes/api/initial-payload.ts b/src/routes/api/initial-payload.ts
deleted file mode 100644
index a999884af..000000000
--- a/src/routes/api/initial-payload.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { registerFramework } from '@tanstack/cta-engine'
-import { createFrameworkDefinition } from '@tanstack/cta-framework-react-cra'
-import { generateInitialPayload } from '@tanstack/cta-ui/lib/engine-handling/generate-initial-payload'
-import { setServerEnvironment } from '@tanstack/cta-ui/lib/engine-handling/server-environment'
-
-// Register the React CRA framework before using CTA engine
-registerFramework(createFrameworkDefinition())
-
-// Configure server environment for TanStack Start builder mode
-setServerEnvironment({
-  projectPath: process.cwd(),
-  options: {
-    targetDir: './',
-    projectName: 'my-app',
-    mode: 'file-router',
-    typescript: true,
-    tailwind: true,
-    git: false,
-    packageManager: 'pnpm',
-    chosenAddOns: [],
-    framework: 'react-cra',
-    addOnOptions: {},
-  },
-  mode: 'setup',
-  forcedRouterMode: 'file-router',
-  forcedAddOns: ['start'],
-  showDeploymentOptions: true,
-})
-
-export const Route = createFileRoute('/api/initial-payload')({
-  // @ts-expect-error server property not in route types yet
-  server: {
-    handlers: {
-      GET: async () => {
-        try {
-          const payload = await generateInitialPayload()
-
-          // Ensure chosenAddOns is always an array to avoid client-side iteration bug
-          if (payload.options && !Array.isArray(payload.options.chosenAddOns)) {
-            payload.options.chosenAddOns = []
-          }
-
-          return new Response(JSON.stringify(payload), {
-            headers: { 'Content-Type': 'application/json' },
-          })
-        } catch (error) {
-          console.error('Error generating initial payload:', error)
-          return new Response(
-            JSON.stringify({ error: 'Failed to generate initial payload' }),
-            {
-              status: 500,
-              headers: { 'Content-Type': 'application/json' },
-            },
-          )
-        }
-      },
-    },
-  },
-})
diff --git a/src/routes/api/load-remote-add-on.ts b/src/routes/api/load-remote-add-on.ts
deleted file mode 100644
index cd0546a0f..000000000
--- a/src/routes/api/load-remote-add-on.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { AddOnCompiledSchema, handleSpecialURL } from '@tanstack/cta-engine'
-
-export const Route = createFileRoute('/api/load-remote-add-on')({
-  // @ts-expect-error server property not in route types yet
-  server: {
-    handlers: {
-      GET: async ({ request }: { request: Request }) => {
-        const url = new URL(request.url)
-        const addOnUrl = url.searchParams.get('url')
-
-        if (!addOnUrl) {
-          return new Response(JSON.stringify({ error: 'URL is required' }), {
-            status: 400,
-            headers: { 'Content-Type': 'application/json' },
-          })
-        }
-
-        try {
-          const fixedUrl = handleSpecialURL(addOnUrl)
-          const response = await fetch(fixedUrl)
-          const data = await response.json()
-          const parsed = AddOnCompiledSchema.safeParse(data)
-
-          if (!parsed.success) {
-            return new Response(JSON.stringify({ error: 'Invalid add-on data' }), {
-              status: 400,
-              headers: { 'Content-Type': 'application/json' },
-            })
-          }
-
-          return new Response(
-            JSON.stringify({
-              id: fixedUrl,
-              name: parsed.data.name,
-              description: parsed.data.description,
-              version: parsed.data.version,
-              author: parsed.data.author,
-              license: parsed.data.license,
-              link: parsed.data.link,
-              smallLogo: parsed.data.smallLogo,
-              logo: parsed.data.logo,
-              type: parsed.data.type,
-              modes: parsed.data.modes,
-            }),
-            {
-              headers: { 'Content-Type': 'application/json' },
-            },
-          )
-        } catch {
-          return new Response(JSON.stringify({ error: 'Failed to load add-on' }), {
-            status: 500,
-            headers: { 'Content-Type': 'application/json' },
-          })
-        }
-      },
-    },
-  },
-})
diff --git a/src/routes/api/load-starter.ts b/src/routes/api/load-starter.ts
deleted file mode 100644
index 91d9ec8b7..000000000
--- a/src/routes/api/load-starter.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { StarterCompiledSchema, handleSpecialURL } from '@tanstack/cta-engine'
-
-export const Route = createFileRoute('/api/load-starter')({
-  // @ts-expect-error server property not in route types yet
-  server: {
-    handlers: {
-      GET: async ({ request }: { request: Request }) => {
-        const url = new URL(request.url)
-        const starterUrl = url.searchParams.get('url')
-
-        if (!starterUrl) {
-          return new Response(JSON.stringify({ error: 'URL is required' }), {
-            status: 400,
-            headers: { 'Content-Type': 'application/json' },
-          })
-        }
-
-        try {
-          const fixedUrl = handleSpecialURL(starterUrl)
-          const response = await fetch(fixedUrl)
-          const data = await response.json()
-          const parsed = StarterCompiledSchema.safeParse(data)
-
-          if (!parsed.success) {
-            return new Response(JSON.stringify({ error: 'Invalid starter data' }), {
-              status: 400,
-              headers: { 'Content-Type': 'application/json' },
-            })
-          }
-
-          return new Response(
-            JSON.stringify({
-              url: fixedUrl,
-              id: parsed.data.id,
-              name: parsed.data.name,
-              description: parsed.data.description,
-              version: parsed.data.version,
-              author: parsed.data.author,
-              license: parsed.data.license,
-              dependsOn: parsed.data.dependsOn,
-              mode: parsed.data.mode,
-              typescript: parsed.data.typescript,
-              tailwind: parsed.data.tailwind,
-              banner: parsed.data.banner
-                ? fixedUrl.replace('starter.json', parsed.data.banner)
-                : undefined,
-            }),
-            {
-              headers: { 'Content-Type': 'application/json' },
-            },
-          )
-        } catch {
-          return new Response(JSON.stringify({ error: 'Failed to load starter' }), {
-            status: 500,
-            headers: { 'Content-Type': 'application/json' },
-          })
-        }
-      },
-    },
-  },
-})
diff --git a/src/routes/api/mcp/$.ts b/src/routes/api/mcp/$.ts
index 9fe31aa81..eab782941 100644
--- a/src/routes/api/mcp/$.ts
+++ b/src/routes/api/mcp/$.ts
@@ -1,13 +1,18 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { handleMcpRequest } from '~/mcp/transport'
+import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute('/api/mcp/$')({
-  // @ts-expect-error server property not in route types yet
+async function handleRequest(request: Request) {
+  const { handleMcpRequest } = await import("~/mcp/transport");
+
+  return handleMcpRequest(request);
+}
+
+export const Route = createFileRoute("/api/mcp/$")({
   server: {
     handlers: {
-      GET: async ({ request }: { request: Request }) => handleMcpRequest(request),
-      POST: async ({ request }: { request: Request }) => handleMcpRequest(request),
-      DELETE: async ({ request }: { request: Request }) => handleMcpRequest(request),
+      GET: async ({ request }: { request: Request }) => handleRequest(request),
+      POST: async ({ request }: { request: Request }) => handleRequest(request),
+      DELETE: async ({ request }: { request: Request }) =>
+        handleRequest(request),
     },
   },
-})
+});
diff --git a/src/routes/api/mcp/index.ts b/src/routes/api/mcp/index.ts
index 177ec6e31..384b7be66 100644
--- a/src/routes/api/mcp/index.ts
+++ b/src/routes/api/mcp/index.ts
@@ -1,16 +1,18 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { handleMcpRequest } from '~/mcp/transport'
+import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute('/api/mcp/')({
-  // @ts-expect-error server property not in route types yet
+async function handleRequest(request: Request) {
+  const { handleMcpRequest } = await import("~/mcp/transport");
+
+  return handleMcpRequest(request);
+}
+
+export const Route = createFileRoute("/api/mcp/")({
   server: {
     handlers: {
-      GET: async ({ request }: { request: Request }) =>
-        handleMcpRequest(request),
-      POST: async ({ request }: { request: Request }) =>
-        handleMcpRequest(request),
+      GET: async ({ request }: { request: Request }) => handleRequest(request),
+      POST: async ({ request }: { request: Request }) => handleRequest(request),
       DELETE: async ({ request }: { request: Request }) =>
-        handleMcpRequest(request),
+        handleRequest(request),
     },
   },
-})
+});
diff --git a/src/routes/api/og/{$}[.]png.ts b/src/routes/api/og/{$}[.]png.ts
new file mode 100644
index 000000000..f399f2d0b
--- /dev/null
+++ b/src/routes/api/og/{$}[.]png.ts
@@ -0,0 +1,64 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+type GenerateOgImageResponse = typeof import(
+  '~/server/og/generate.server'
+)['generateOgImageResponse']
+
+const CACHE_HEADERS = {
+  'Cache-Control': 'public, max-age=3600',
+  'Cloudflare-CDN-Cache-Control':
+    'public, max-age=86400, stale-while-revalidate=604800',
+} as const
+
+export const Route = createFileRoute('/api/og/{$}.png')({
+  server: {
+    handlers: {
+      GET: async ({
+        request,
+        params,
+      }: {
+        request: Request
+        params: { _splat: string }
+      }) => {
+        const rawParam = params._splat
+        const libraryId = rawParam.replace(/\.png$/, '')
+
+        const url = new URL(request.url)
+        let result: Awaited<ReturnType<GenerateOgImageResponse>>
+        try {
+          const { generateOgImageResponse } = await import(
+            '~/server/og/generate.server'
+          )
+          result = await generateOgImageResponse(
+            {
+              libraryId,
+              requestUrl: request.url,
+              title: url.searchParams.get('title') ?? undefined,
+              description: url.searchParams.get('description') ?? undefined,
+            },
+            { headers: CACHE_HEADERS },
+          )
+        } catch (error) {
+          console.error('Failed to construct OG response', error)
+          return new Response('Failed to generate OG image', { status: 500 })
+        }
+
+        if ('kind' in result) {
+          return new Response(`Unknown library: ${libraryId}`, { status: 404 })
+        }
+
+        // ImageResponse builds the Response synchronously and renders inside
+        // a ReadableStream. Await the ready promise so render errors surface
+        // as 500s instead of an empty 200 cached at the edge.
+        try {
+          await result.ready
+        } catch (error) {
+          console.error('Failed to generate OG image', error)
+          return new Response('Failed to generate OG image', { status: 500 })
+        }
+
+        return result
+      },
+    },
+  },
+})
diff --git a/src/routes/api/uploadthing.ts b/src/routes/api/uploadthing.ts
index c265f4f41..c2791937c 100644
--- a/src/routes/api/uploadthing.ts
+++ b/src/routes/api/uploadthing.ts
@@ -1,15 +1,25 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { createRouteHandler } from 'uploadthing/server'
-import { uploadRouter } from '~/server/uploadthing'
+import { createFileRoute } from "@tanstack/react-router";
 
-const handlers = createRouteHandler({ router: uploadRouter })
+async function handleUploadthingRequest(
+  request: Request,
+): Promise<Response> {
+  const [uploadthing, uploadthingServer] = await Promise.all([
+    import("uploadthing/server"),
+    import("~/server/uploadthing"),
+  ]);
+  const handlers = uploadthing.createRouteHandler({
+    router: uploadthingServer.uploadRouter,
+  });
+  return handlers(request);
+}
 
-export const Route = createFileRoute('/api/uploadthing')({
-  // @ts-expect-error server property not in route types yet
+export const Route = createFileRoute("/api/uploadthing")({
   server: {
     handlers: {
-      GET: async ({ request }: { request: Request }) => handlers(request),
-      POST: async ({ request }: { request: Request }) => handlers(request),
+      GET: async ({ request }: { request: Request }) =>
+        handleUploadthingRequest(request),
+      POST: async ({ request }: { request: Request }) =>
+        handleUploadthingRequest(request),
     },
   },
-})
+});
diff --git a/src/routes/auth/$provider/start.tsx b/src/routes/auth/$provider/start.tsx
index db641573e..6ac3ce366 100644
--- a/src/routes/auth/$provider/start.tsx
+++ b/src/routes/auth/$provider/start.tsx
@@ -4,12 +4,25 @@ import {
   generateOAuthState,
   createOAuthStateCookie,
   createOAuthPopupCookie,
+  createOAuthReturnToCookie,
   buildGitHubAuthUrl,
   buildGoogleAuthUrl,
 } from '~/auth/index.server'
+import { normalizeSameOriginPath } from '~/utils/url-boundary'
+
+function readOAuthScopes(value: string | null) {
+  if (!value) {
+    return []
+  }
+
+  return value
+    .split(',')
+    .map((scope) => scope.trim())
+    .filter((scope) => /^[a-zA-Z0-9:_-]{1,64}$/.test(scope))
+    .slice(0, 8)
+}
 
 export const Route = createFileRoute('/auth/$provider/start')({
-  // @ts-expect-error server property not in route types yet
   server: {
     handlers: {
       GET: async ({
@@ -19,7 +32,7 @@ export const Route = createFileRoute('/auth/$provider/start')({
         request: Request
         params: { provider: string }
       }) => {
-        const provider = params.provider as 'github' | 'google'
+        const provider = params.provider
 
         if (provider !== 'github' && provider !== 'google') {
           return Response.redirect(new URL('/login', request.url), 302)
@@ -39,10 +52,26 @@ export const Route = createFileRoute('/auth/$provider/start')({
           ? createOAuthPopupCookie(isProduction)
           : null
 
+        // Check for returnTo URL (for redirect after auth)
+        const returnTo = normalizeSameOriginPath(
+          url.searchParams.get('returnTo') ?? url.searchParams.get('redirect'),
+          request.url,
+        )
+        const returnToCookie = returnTo
+          ? createOAuthReturnToCookie(returnTo, isProduction)
+          : null
+
+        if (returnTo) {
+          console.log(`[AUTH:INFO] Setting returnTo cookie for: ${returnTo}`)
+        }
+
         // Build OAuth URL based on provider
-        const origin = env.SITE_URL || new URL(request.url).origin
+        const origin = new URL(request.url).origin
         const redirectUri = `${origin}/api/auth/callback/${provider}`
 
+        // Check for additional scopes (e.g., public_repo for deploy flow)
+        const additionalScopes = readOAuthScopes(url.searchParams.get('scope'))
+
         let authUrl: string
 
         if (provider === 'github') {
@@ -50,7 +79,12 @@ export const Route = createFileRoute('/auth/$provider/start')({
           if (!clientId) {
             throw new Error('GITHUB_OAUTH_CLIENT_ID is not configured')
           }
-          authUrl = buildGitHubAuthUrl(clientId, redirectUri, state)
+          authUrl = buildGitHubAuthUrl(
+            clientId,
+            undefined,
+            state,
+            additionalScopes,
+          )
         } else {
           // Google
           const clientId = env.GOOGLE_OAUTH_CLIENT_ID
@@ -67,6 +101,9 @@ export const Route = createFileRoute('/auth/$provider/start')({
         if (popupCookie) {
           headers.append('Set-Cookie', popupCookie)
         }
+        if (returnToCookie) {
+          headers.append('Set-Cookie', returnToCookie)
+        }
 
         return new Response(null, {
           status: 302,
diff --git a/src/routes/auth/cli.tsx b/src/routes/auth/cli.tsx
new file mode 100644
index 000000000..3c7bc3d35
--- /dev/null
+++ b/src/routes/auth/cli.tsx
@@ -0,0 +1,132 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import * as v from 'valibot'
+import { getCurrentUser } from '~/utils/auth.functions'
+import { SignInForm } from '~/routes/login'
+
+const searchSchema = v.object({
+  ticket: v.string(),
+})
+
+const authorizeCliSession = createServerFn({ method: 'POST' })
+  .validator((data: { ticketId: string }) => data)
+  .handler(async ({ data: { ticketId } }) => {
+    const [{ getRequest }, authIndex, cliTickets] = await Promise.all([
+      import('@tanstack/react-start/server'),
+      import('~/auth/index.server'),
+      import('~/auth/cli-tickets.server'),
+    ])
+    const {
+      getAuthService,
+      getSessionService,
+      getUserRepository,
+      SESSION_DURATION_MS,
+    } = authIndex
+    const { authorizeCliTicket, getCliTicket } = cliTickets
+    const request = getRequest()
+
+    const ticket = getCliTicket(ticketId)
+    if (!ticket) {
+      return { status: 'invalid' as const }
+    }
+
+    const authService = getAuthService()
+    const user = await authService.getCurrentUser(request)
+    if (!user) {
+      return { status: 'unauthenticated' as const }
+    }
+
+    const userRepository = getUserRepository()
+    const dbUser = await userRepository.findById(user.userId)
+    if (!dbUser) {
+      return { status: 'invalid' as const }
+    }
+
+    const sessionService = getSessionService()
+    const expiresAt = Date.now() + SESSION_DURATION_MS
+    const sessionToken = await sessionService.signCookie({
+      userId: dbUser.id,
+      expiresAt,
+      version: dbUser.sessionVersion,
+    })
+
+    const authorized = authorizeCliTicket(ticketId, dbUser.id, sessionToken)
+    if (!authorized) {
+      return { status: 'invalid' as const }
+    }
+
+    return { status: 'authorized' as const, name: user.name ?? user.email }
+  })
+
+export const Route = createFileRoute('/auth/cli')({
+  validateSearch: searchSchema,
+  loader: async ({ location }) => {
+    const { ticket: ticketId } = location.search as { ticket: string }
+
+    // Check if user is already logged in
+    const user = await getCurrentUser()
+    if (!user) {
+      return { status: 'unauthenticated' as const, ticketId }
+    }
+
+    // User is logged in — authorize the ticket
+    return authorizeCliSession({ data: { ticketId } })
+  },
+  component: CliAuthPage,
+})
+
+function CliAuthPage() {
+  const data = Route.useLoaderData()
+  const { ticket: ticketId } = Route.useSearch()
+
+  if (data.status === 'invalid') {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="max-w-sm mx-auto text-center p-8">
+          <h1 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+            Invalid or Expired Request
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
+            This CLI auth link has expired or is invalid. Run{' '}
+            <code className="bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-xs">
+              pnpm auth:login
+            </code>{' '}
+            to start a new session.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  if (data.status === 'authorized') {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="max-w-sm mx-auto text-center p-8">
+          <h1 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+            CLI Authorized
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 text-sm">
+            Signed in as <strong>{data.name}</strong>. You can close this tab —
+            your terminal is now authenticated.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  // unauthenticated — show sign-in form, return here after OAuth
+  const returnTo = `/auth/cli?ticket=${ticketId}`
+
+  return (
+    <div className="min-h-screen">
+      <div className="container mx-auto px-4 py-16">
+        <div className="max-w-2xl mx-auto text-center w-fit">
+          <p className="text-gray-600 dark:text-gray-400 text-sm mb-6">
+            Sign in to authorize your CLI session.
+          </p>
+          <SignInForm returnTo={returnTo} />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/routes/auth/signout.tsx b/src/routes/auth/signout.tsx
index d1a8b356a..2a488b17a 100644
--- a/src/routes/auth/signout.tsx
+++ b/src/routes/auth/signout.tsx
@@ -1,26 +1,24 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { getSessionService, getUserRepository } from '~/auth/index.server'
 
 export const Route = createFileRoute('/auth/signout')({
-  // @ts-expect-error server property not in route types yet
   server: {
     handlers: {
       GET: async ({ request }: { request: Request }) => {
+        const [{ getSessionService, getUserRepository }] = await Promise.all([
+          import('~/auth/index.server'),
+        ])
         const sessionService = getSessionService()
         const userRepository = getUserRepository()
 
-        // Read and verify signed cookie
         const signedCookie = sessionService.getSessionCookie(request)
 
         if (signedCookie) {
           const cookieData = await sessionService.verifyCookie(signedCookie)
 
-          // Revoke all sessions for this user (increment sessionVersion)
           if (cookieData) {
             try {
               await userRepository.incrementSessionVersion(cookieData.userId)
             } catch (error) {
-              // Log but don't fail if revocation fails
               console.error(
                 'Failed to revoke sessions:',
                 error instanceof Error ? error.message : 'Unknown error',
@@ -29,11 +27,9 @@ export const Route = createFileRoute('/auth/signout')({
           }
         }
 
-        // Clear session cookie
         const clearCookie = sessionService.createClearSessionCookieHeader()
-
-        // Return Response with Set-Cookie header and redirect
         const loginUrl = new URL('/login', request.url).toString()
+
         return new Response(null, {
           status: 302,
           headers: {
diff --git a/src/routes/blog.$.tsx b/src/routes/blog.$.tsx
index a65696e79..a969d214e 100644
--- a/src/routes/blog.$.tsx
+++ b/src/routes/blog.$.tsx
@@ -1,82 +1,49 @@
-import { notFound, redirect, createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
 import { PostNotFound } from './blog'
-import { createServerFn } from '@tanstack/react-start'
-import { formatAuthors } from '~/utils/blog'
-import { format } from '~/utils/dates'
-import * as v from 'valibot'
-import { setResponseHeaders } from '@tanstack/react-start/server'
-import { allPosts } from 'content-collections'
+import { formatAuthors } from '~/utils/blog-format'
 import * as React from 'react'
 import { MarkdownContent } from '~/components/markdown'
-import { GamHeader } from '~/components/Gam'
-import { AdGate } from '~/contexts/AdsContext'
+import { Card } from '~/components/Card'
+import { LibrariesWidget } from '~/components/LibrariesWidget'
+import { partners } from '~/utils/partners'
+import { PartnersRail, RightRail } from '~/components/RightRail'
+import { RecentPostsWidget } from '~/components/RecentPostsWidget'
+import { useMediaQuery } from '~/utils/useMediaQuery'
+
 import { Toc } from '~/components/Toc'
 import { Breadcrumbs } from '~/components/Breadcrumbs'
-import { renderMarkdown } from '~/utils/markdown'
-
-function handleRedirects(docsPath: string) {
-  if (docsPath.includes('directives-the-new-framework-lock-in')) {
-    throw redirect({
-      href: '/blog/directives-and-the-platform-boundary',
-    })
-  }
-}
-
-const fetchBlogPost = createServerFn({ method: 'GET' })
-  .inputValidator(v.optional(v.string()))
-  .handler(async ({ data: docsPath }) => {
-    if (!docsPath) {
-      throw new Error('Invalid docs path')
-    }
-
-    handleRedirects(docsPath)
-
-    const filePath = `src/blog/${docsPath}.md`
-
-    const post = allPosts.find((post) => post.slug === docsPath)
+import { CoverFallback } from '~/components/CoverFallback'
+import { fetchBlogPost } from '~/utils/blog.functions'
+import { parseSiteMarkdown } from '~/utils/markdown'
+import { getAbsoluteOptimizedImageUrl } from '~/utils/optimizedImage'
 
-    if (!post) {
-      throw notFound()
-    }
-
-    setResponseHeaders(
-      new Headers({
-        'Cache-Control': 'public, max-age=0, must-revalidate',
-        'Netlify-CDN-Cache-Control':
-          'public, max-age=300, durable, stale-while-revalidate=300',
-      }),
-    )
-
-    const now = new Date()
-    const publishDate = new Date(post.published)
-    const isUnpublished = post.draft || publishDate > now
+export const Route = createFileRoute('/blog/$')({
+  staleTime: Infinity,
+  loader: async ({ params }) => {
+    const blogPath = params._splat
 
-    return {
-      title: post.title,
-      description: post.description,
-      published: post.published,
-      content: post.content,
-      authors: post.authors,
-      headerImage: post.headerImage,
-      filePath,
-      isUnpublished,
+    if (!blogPath) {
+      throw new Error('Invalid blog path')
     }
-  })
 
-export const Route = createFileRoute('/blog/$')({
-  staleTime: Infinity,
-  loader: ({ params }) => fetchBlogPost({ data: params._splat }),
+    return fetchBlogPost({ data: blogPath })
+  },
   head: ({ loaderData }) => {
-    // Generate optimized social media image URL using Netlify Image CDN
     const getSocialImageUrl = (headerImage?: string) => {
       if (!headerImage) return undefined
 
-      // Use Netlify Image CDN to optimize for social media (1200x630 is the standard for og:image)
+      if (headerImage.startsWith('http')) {
+        return headerImage
+      }
 
-      return `https://tanstack.com/.netlify/images?url=${encodeURIComponent(
-        headerImage,
-      )}&w=1200&h=630&fit=cover&fm=jpg&q=80`
+      return getAbsoluteOptimizedImageUrl(headerImage, {
+        fit: 'cover',
+        format: 'auto',
+        height: 630,
+        quality: 80,
+        width: 1200,
+      })
     }
 
     return {
@@ -103,21 +70,14 @@ export const Route = createFileRoute('/blog/$')({
 })
 
 function BlogPost() {
-  const { title, content, filePath, authors, published } = Route.useLoaderData()
-
-  const blogContent = `<small>_by ${formatAuthors(authors)} on ${format(
-    new Date(published || 0),
-    'MMMM d, yyyy',
-  )}._</small>
-
-${content}`
-
-  const { headings, markup } = React.useMemo(
-    () => renderMarkdown(blogContent),
-    [blogContent],
-  )
+  const { content, filePath, title, headerImage, library } =
+    Route.useLoaderData()
+  const { _splat: slug } = Route.useParams()
+  const markdown = React.useMemo(() => parseSiteMarkdown(content), [content])
+  const headings = markdown.headings
 
   const isTocVisible = headings.length > 1
+  const isDesktopViewport = useMediaQuery('(min-width: 768px)')
 
   const markdownContainerRef = React.useRef<HTMLDivElement>(null)
   const [activeHeadings, setActiveHeadings] = React.useState<Array<string>>([])
@@ -166,6 +126,10 @@ ${content}`
 
   const repo = 'tanstack/tanstack.com'
   const branch = 'main'
+  const activePartners = React.useMemo(
+    () => partners.filter((d) => d.status === 'active'),
+    [],
+  )
 
   return (
     <div
@@ -176,42 +140,55 @@ ${content}`
     >
       <div className="flex flex-col max-w-full min-w-0 w-full min-h-0 relative mb-8">
         <div className="min-w-0 flex justify-center w-full min-h-[88dvh] lg:min-h-0 mx-auto">
-          <div className="flex-1 flex flex-col w-full">
-            <AdGate>
-              <div
-                className="mt-4 mb-4 bg-white/50 dark:bg-white/5
-              shadow-xl shadow-black/2 flex justify-center w-fit max-w-full mx-auto h-[90px]"
-              >
-                <GamHeader />
-              </div>
-            </AdGate>
-            <div className="px-4">
+          <div className="flex-1 flex flex-col w-full min-w-0">
+            <div className="px-4 pt-4 lg:pt-6">
               <div className="w-full max-w-[1100px] mx-auto">
                 <div className="flex-1 min-h-0 flex flex-col">
                   <div className="w-full flex justify-center">
-                    <div className="w-full max-w-[700px] p-2 lg:p-4 xl:p-6">
+                    <div
+                      className={[
+                        'w-full p-2 lg:p-4 xl:p-6',
+                        isTocVisible ? 'max-w-full' : 'max-w-[768px]',
+                      ].join(' ')}
+                    >
                       <Breadcrumbs
                         section="Blog"
                         sectionTo="/blog"
                         headings={isTocVisible ? headings : undefined}
-                        tocHiddenBreakpoint="md"
+                        tocHiddenBreakpoint="xl"
                       />
                     </div>
-                    <div className="max-w-32 md:max-w-36 xl:max-w-44 2xl:max-w-56 w-full hidden md:block" />
+                    {isTocVisible && (
+                      <div className="pl-4 w-32 lg:w-36 xl:w-44 2xl:w-56 3xl:w-64 shrink-0 hidden xl:block" />
+                    )}
                   </div>
-                  <div className="w-full flex justify-center">
-                    <div className="flex overflow-auto flex-col w-full max-w-[700px] p-2 lg:p-4 xl:p-6 pt-0">
+                  <div
+                    className={[
+                      'w-full flex justify-center mx-auto',
+                      isTocVisible ? 'max-w-full' : 'max-w-[768px]',
+                    ].join(' ')}
+                  >
+                    <div className="flex overflow-auto flex-col w-full p-2 lg:p-4 xl:p-6 pt-0">
+                      {!headerImage && slug ? (
+                        <CoverFallback
+                          slug={slug}
+                          library={library}
+                          className="aspect-[5/2] w-full rounded-2xl mb-6"
+                        />
+                      ) : null}
                       <MarkdownContent
                         title={title}
-                        htmlMarkup={markup}
+                        markdown={markdown}
+                        preserveTabPanels
                         repo={repo}
                         branch={branch}
                         filePath={filePath}
                         containerRef={markdownContainerRef}
+                        eagerFirstImage
                       />
                     </div>
                     {isTocVisible && (
-                      <div className="pl-4 max-w-32 md:max-w-36 xl:max-w-44 2xl:max-w-56 w-full hidden md:block py-4">
+                      <div className="pl-4 w-32 lg:w-36 xl:w-44 2xl:w-56 3xl:w-64 shrink-0 hidden xl:block py-4 transition-all">
                         <Toc
                           headings={headings}
                           activeHeadings={activeHeadings}
@@ -223,12 +200,19 @@ ${content}`
               </div>
             </div>
           </div>
+          <RightRail breakpoint="md">
+            <PartnersRail
+              analyticsPlacement="blog_rail"
+              partners={activePartners}
+            />
+            <div className="hidden md:block border border-gray-500/20 rounded-l-lg overflow-hidden w-full">
+              <RecentPostsWidget enabled={isDesktopViewport} />
+            </div>
+            <Card>
+              <LibrariesWidget />
+            </Card>
+          </RightRail>
         </div>
-        <AdGate>
-          <div className="py-2 pb-4 lg:py-4 lg:pb-6 xl:py-6 xl:pb-8 max-w-full">
-            <GamHeader />
-          </div>
-        </AdGate>
       </div>
     </div>
   )
diff --git a/src/routes/blog.index.tsx b/src/routes/blog.index.tsx
index 8db677b06..3922beff1 100644
--- a/src/routes/blog.index.tsx
+++ b/src/routes/blog.index.tsx
@@ -1,29 +1,33 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
-import { Card } from '~/components/Card'
-import { formatAuthors, getPublishedPosts } from '~/utils/blog'
-import { SimpleMarkdown } from '~/components/SimpleMarkdown'
-import { format } from '~/utils/dates'
+import * as v from 'valibot'
+import { BlogCard, type BlogCardPost } from '~/components/BlogCard'
+import { BlogAuthorFilter } from '~/components/BlogAuthorFilter'
+import { getPublishedPosts } from '~/utils/blog'
+import { getDistinctAuthors } from '~/utils/blog-format'
+
 import { Footer } from '~/components/Footer'
 import { PostNotFound } from './blog'
 import { createServerFn } from '@tanstack/react-start'
 import { setResponseHeaders } from '@tanstack/react-start/server'
 import { RssIcon } from 'lucide-react'
+import { libraries, type LibrarySlim } from '~/libraries'
+import { LibrariesWidget } from '~/components/LibrariesWidget'
+import { Card } from '~/components/Card'
+import { partners } from '~/utils/partners'
+import { PartnersRail, RightRail } from '~/components/RightRail'
+import { RecentPostsWidget } from '~/components/RecentPostsWidget'
 
-type BlogFrontMatter = {
-  slug: string
-  title: string
-  published: string
-  excerpt: string | undefined
-  authors: string[]
-}
+const searchSchema = v.object({
+  author: v.fallback(v.optional(v.string()), undefined),
+})
 
 const fetchFrontMatters = createServerFn({ method: 'GET' }).handler(
   async () => {
     setResponseHeaders(
       new Headers({
         'Cache-Control': 'public, max-age=0, must-revalidate',
-        'Netlify-CDN-Cache-Control':
-          'public, max-age=300, durable, stale-while-revalidate=300',
+        'Cloudflare-CDN-Cache-Control':
+          'public, max-age=300, stale-while-revalidate=300',
       }),
     )
 
@@ -33,20 +37,17 @@ const fetchFrontMatters = createServerFn({ method: 'GET' }).handler(
         title: post.title,
         published: post.published,
         excerpt: post.excerpt,
+        headerImage: post.headerImage,
         authors: post.authors,
+        library: post.library,
       }
     })
-
-    // return json(frontMatters, {
-    //   headers: {
-    //     'Cache-Control': 'public, max-age=300, s-maxage=3600',
-    //   },
-    // })
   },
 )
 
 export const Route = createFileRoute('/blog/')({
   staleTime: Infinity,
+  validateSearch: searchSchema,
   loader: () => fetchFrontMatters(),
   notFoundComponent: () => <PostNotFound />,
   component: BlogIndex,
@@ -59,71 +60,132 @@ export const Route = createFileRoute('/blog/')({
   }),
 })
 
+function getLibrariesWithPosts(posts: BlogCardPost[]): LibrarySlim[] {
+  const ids = new Set<string>()
+  for (const post of posts) {
+    if (!post.library) continue
+    for (const id of post.library.split(',')) {
+      ids.add(id.trim())
+    }
+  }
+  return libraries.filter((lib) => ids.has(lib.id))
+}
+
 function BlogIndex() {
-  const frontMatters = Route.useLoaderData() as BlogFrontMatter[]
+  const frontMatters = Route.useLoaderData() as BlogCardPost[]
+  const { author } = Route.useSearch()
+  const navigate = Route.useNavigate()
+  const activePartners = partners.filter((d) => d.status === 'active')
+
+  const authors = getDistinctAuthors(frontMatters)
+  const librariesWithPosts = getLibrariesWithPosts(frontMatters)
+
+  const filteredPosts = author
+    ? frontMatters.filter((post) => post.authors.includes(author))
+    : frontMatters
 
   return (
-    <div className="flex flex-col max-w-full min-h-screen gap-12 p-4 md:p-8 pb-0">
-      <div className="flex-1 space-y-12 w-full max-w-4xl mx-auto">
-        <header className="">
-          <div className="flex gap-3 items-baseline">
-            <h1 className="text-3xl font-black">Blog</h1>
-            <a
-              href="/rss.xml"
-              target="_blank"
-              rel="noreferrer"
-              className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors text-xl"
-              title="RSS Feed"
-            >
-              <RssIcon />
-            </a>
-          </div>
+    <div className="flex flex-col max-w-full min-h-screen">
+      <div className="flex-1 flex w-full mb-16">
+        <div className="flex-1 p-4 md:p-8 min-w-0 flex justify-center">
+          <div className="w-full max-w-[1100px] space-y-12">
+            <header className="">
+              <div className="flex gap-3 items-baseline">
+                <h1 className="text-3xl font-black">Blog</h1>
+                <a
+                  href="/rss.xml"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors text-xl"
+                  title="RSS Feed"
+                >
+                  <RssIcon />
+                </a>
+              </div>
 
-          <p className="text-lg mt-4 text-gray-600 dark:text-gray-400">
-            The latest news and blog posts from TanStack
-          </p>
-        </header>
-        <section className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4">
-          {frontMatters.map(({ slug, title, published, excerpt, authors }) => {
-            return (
-              <Card
-                key={slug}
-                as={Link}
-                to="/blog/$"
-                params={{ _splat: slug } as never}
-                className="relative flex flex-col gap-4 justify-between p-4 md:p-8 transition-all hover:shadow-sm hover:border-blue-500"
-              >
-                <div>
-                  <div className={`text-lg font-extrabold`}>{title}</div>
-                  <div className={`text-xs italic font-light mt-1`}>
-                    <p>
-                      by {formatAuthors(authors)}
-                      {published ? (
-                        <time
-                          dateTime={published}
-                          title={format(new Date(published), 'MMM d, yyyy')}
-                        >
-                          {' '}
-                          on {format(new Date(published), 'MMM d, yyyy')}
-                        </time>
-                      ) : null}
-                    </p>
-                  </div>
-                  <div
-                    className={`text-sm mt-4 text-black dark:text-white leading-7`}
-                  >
-                    <SimpleMarkdown rawContent={excerpt || ''} />
-                  </div>
+              <p className="text-lg mt-4 text-gray-600 dark:text-gray-400">
+                The latest news and blog posts from TanStack
+              </p>
+            </header>
+
+            <section className="space-y-6">
+              <div className="flex flex-wrap items-center gap-3">
+                <label
+                  htmlFor="blog-author-filter"
+                  className="text-sm font-medium text-gray-600 dark:text-gray-400"
+                >
+                  Author
+                </label>
+                <div id="blog-author-filter" className="w-64 max-w-full">
+                  <BlogAuthorFilter
+                    authors={authors}
+                    selected={author}
+                    onSelect={(nextAuthor) =>
+                      navigate({
+                        search: () => ({ author: nextAuthor }),
+                        replace: true,
+                      })
+                    }
+                  />
                 </div>
+              </div>
+
+              {librariesWithPosts.length ? (
                 <div>
-                  <div className="text-blue-500 uppercase font-black text-sm">
-                    Read More
+                  <div className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
+                    Browse by library
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {librariesWithPosts.map((library) => (
+                      <Link
+                        key={library.id}
+                        to="/$libraryId/$version/docs/blog"
+                        params={{
+                          libraryId: library.id,
+                          version: 'latest',
+                        }}
+                        className={`inline-flex items-center rounded-md px-3 py-1.5 text-xs font-black uppercase shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md ${library.bgStyle} ${library.badgeTextStyle ?? 'text-white'}`}
+                      >
+                        {library.name.replace('TanStack ', '')}
+                      </Link>
+                    ))}
                   </div>
                 </div>
-              </Card>
-            )
-          })}
-        </section>
+              ) : null}
+            </section>
+
+            <section className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
+              {filteredPosts.map((post) => (
+                <BlogCard key={post.slug} post={post} />
+              ))}
+            </section>
+
+            {filteredPosts.length === 0 ? (
+              <div className="text-center text-gray-600 dark:text-gray-400 py-8">
+                No posts found
+                {author ? (
+                  <>
+                    {' '}
+                    by <span className="font-medium">{author}</span>
+                  </>
+                ) : null}
+                .
+              </div>
+            ) : null}
+          </div>
+        </div>
+        <RightRail breakpoint="md">
+          <PartnersRail
+            analyticsPlacement="blog_rail"
+            partners={activePartners}
+          />
+          <div className="hidden md:block border border-gray-500/20 rounded-l-lg overflow-hidden w-full">
+            <RecentPostsWidget posts={frontMatters.slice(0, 3)} />
+          </div>
+          <Card>
+            <LibrariesWidget />
+          </Card>
+        </RightRail>
       </div>
       <Footer />
     </div>
diff --git a/src/routes/blog.tsx b/src/routes/blog.tsx
index 6f4bf25dd..91ba39b33 100644
--- a/src/routes/blog.tsx
+++ b/src/routes/blog.tsx
@@ -1,6 +1,6 @@
-import { Link, createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
-import { Button } from '~/ui'
+import { NotFound } from '~/components/NotFound'
 
 export const Route = createFileRoute('/blog')({
   head: () => ({
@@ -12,20 +12,5 @@ export const Route = createFileRoute('/blog')({
 })
 
 export function PostNotFound() {
-  return (
-    <div className="flex-1 p-4 flex flex-col items-center justify-center gap-6">
-      <h1 className="opacity-10 flex flex-col text-center font-black">
-        <div className="text-7xl leading-none">404</div>
-        <div className="text-3xl leading-none">Not Found</div>
-      </h1>
-      <div className="text-lg">Post not found.</div>
-      <Button
-        as={Link}
-        to="/blog"
-        className="bg-gray-600 border-gray-600 hover:bg-gray-700 text-white"
-      >
-        Blog Home
-      </Button>
-    </div>
-  )
+  return <NotFound />
 }
diff --git a/src/routes/brand-guide.tsx b/src/routes/brand-guide.tsx
index 0aa6cc3d5..97d770efb 100644
--- a/src/routes/brand-guide.tsx
+++ b/src/routes/brand-guide.tsx
@@ -5,6 +5,7 @@ import { useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { useToast } from '~/components/ToastProvider'
 import { Copy, Download } from 'lucide-react'
+import { copyTextToClipboard } from '~/utils/browser-effects'
 
 export const Route = createFileRoute('/brand-guide')({
   component: RouteComponent,
@@ -77,6 +78,7 @@ function AssetCard({ title, description, asset, url, bg }: AssetCardProps) {
         {url ? (
           <div className="flex items-center justify-end gap-2">
             <button
+              type="button"
               onClick={handleDirectDownload}
               className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-700"
               aria-label="Download asset"
@@ -85,13 +87,14 @@ function AssetCard({ title, description, asset, url, bg }: AssetCardProps) {
               Download
             </button>
             <button
+              type="button"
               onClick={async () => {
                 try {
                   if (!url) return
                   const absoluteUrl = url.startsWith('http')
                     ? url
                     : new URL(url, window.location.origin).toString()
-                  await navigator.clipboard.writeText(absoluteUrl)
+                  await copyTextToClipboard(absoluteUrl)
                   notify(
                     <div>
                       <div className="font-medium">Copied to clipboard</div>
@@ -119,12 +122,13 @@ function AssetCard({ title, description, asset, url, bg }: AssetCardProps) {
             </button>
             {isSvg ? (
               <button
+                type="button"
                 onClick={async () => {
                   try {
                     if (!url) return
                     const res = await fetch(url)
                     const text = await res.text()
-                    await navigator.clipboard.writeText(text)
+                    await copyTextToClipboard(text)
                     notify(
                       <div>
                         <div className="font-medium">Copied to clipboard</div>
diff --git a/src/routes/builder.docs.tsx b/src/routes/builder.docs.tsx
new file mode 100644
index 000000000..6a388eff3
--- /dev/null
+++ b/src/routes/builder.docs.tsx
@@ -0,0 +1,158 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { seo } from '~/utils/seo'
+
+export const Route = createFileRoute('/builder/docs')({
+  component: RouteComponent,
+  staticData: {
+    Title: () => (
+      <div className="flex items-center gap-2 text-gray-500">
+        <Link
+          to="/builder"
+          className="hover:text-blue-500 flex items-center gap-2"
+        >
+          Builder
+          <span className="px-1.5 py-0.5 text-[.6rem] font-black border border-amber-500 text-amber-500 rounded-md uppercase">
+            Alpha
+          </span>
+        </Link>
+        <span>/</span>
+        <span>Docs</span>
+      </div>
+    ),
+  },
+  head: () => ({
+    meta: seo({
+      title: 'TanStack Builder Docs',
+      description:
+        'Learn how to use TanStack Builder to create and customize TanStack Start projects',
+    }),
+  }),
+})
+
+function RouteComponent() {
+  return (
+    <div className="min-h-screen bg-white dark:bg-gray-950">
+      <div className="max-w-4xl mx-auto px-4 py-12">
+        {/* Header */}
+        <div className="mb-12">
+          <Link
+            to="/builder"
+            className="text-sm text-blue-600 dark:text-cyan-400 hover:underline mb-4 inline-block"
+          >
+            Back to Builder
+          </Link>
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
+            TanStack Builder
+          </h1>
+          <p className="text-lg text-gray-600 dark:text-gray-400">
+            A visual tool for scaffolding TanStack Start projects with your
+            preferred integrations.
+          </p>
+        </div>
+
+        {/* Content */}
+        <div className="prose prose-gray dark:prose-invert max-w-none space-y-12">
+          {/* How It Works */}
+          <section>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+              How It Works
+            </h2>
+            <ol className="list-decimal pl-6 text-gray-600 dark:text-gray-400 space-y-3">
+              <li>
+                <strong>Choose a template</strong> or begin with a blank project
+              </li>
+              <li>
+                <strong>Add integrations</strong> for auth, database,
+                deployment, and more
+              </li>
+              <li>
+                <strong>Preview the generated code</strong> in the file explorer
+              </li>
+              <li>
+                <strong>Copy the CLI command</strong> or download your project
+              </li>
+            </ol>
+          </section>
+
+          {/* Templates */}
+          <section>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+              Templates
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              Templates are pre-configured integration combinations for common
+              use cases. Select one to instantly configure your project, then
+              customize by adding or removing integrations.
+            </p>
+          </section>
+
+          {/* Integrations */}
+          <section>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+              Integrations
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              Integrations add functionality to your project: files,
+              dependencies, configuration, and code injections. The builder
+              automatically handles dependencies and conflicts between
+              integrations.
+            </p>
+          </section>
+
+          {/* Custom Templates & Integrations */}
+          <section>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+              Custom Templates & Integrations
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              You can import custom templates and integrations by URL. Use "Save
+              as Template" in the Build Project dropdown to export your current
+              configuration as a shareable JSON file.
+            </p>
+          </section>
+
+          {/* CLI */}
+          <section>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+              Using the CLI
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              The builder generates commands for the TanStack CLI. You can also
+              use the CLI directly:
+            </p>
+            <pre className="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto text-sm">
+              {`npx @tanstack/cli create my-app`}
+            </pre>
+            <p className="text-gray-600 dark:text-gray-400 mt-4">
+              For full CLI documentation, see the{' '}
+              <Link
+                to="/$libraryId/$version/docs"
+                params={{ libraryId: 'cli', version: 'latest' }}
+                className="text-blue-600 dark:text-cyan-400 hover:underline"
+              >
+                TanStack CLI docs
+              </Link>
+              .
+            </p>
+          </section>
+        </div>
+
+        {/* Footer CTA */}
+        <div className="mt-16 p-8 bg-linear-to-r from-blue-500/10 to-cyan-500/10 dark:from-blue-500/20 dark:to-cyan-500/20 rounded-2xl border border-blue-200 dark:border-cyan-800 text-center">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+            Ready to Build?
+          </h2>
+          <p className="text-gray-600 dark:text-gray-400 mb-6">
+            Start creating your TanStack Start project with the visual builder.
+          </p>
+          <Link
+            to="/builder"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 dark:bg-cyan-600 text-white font-semibold rounded-lg hover:bg-blue-700 dark:hover:bg-cyan-700 transition-colors"
+          >
+            Open Builder
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/routes/builder.index.tsx b/src/routes/builder.index.tsx
new file mode 100644
index 000000000..19b941e6a
--- /dev/null
+++ b/src/routes/builder.index.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react'
+import { ClientOnly, createFileRoute, Link } from '@tanstack/react-router'
+import { z } from 'zod'
+import { seo } from '~/utils/seo'
+
+const LazyBuilderPage = React.lazy(() =>
+  import('~/components/builder/BuilderPage.client').then((m) => ({
+    default: m.BuilderPage,
+  })),
+)
+
+// Search params schema for shareable URLs
+const builderSearchSchema = z
+  .object({
+    name: z.string().optional(),
+    framework: z.string().optional(),
+    features: z.string().optional(), // comma-separated feature IDs
+    pm: z.enum(['pnpm', 'npm', 'yarn', 'bun']).optional(),
+    tailwind: z.enum(['false']).optional(),
+    tab: z.enum(['summary', 'code', 'preview']).optional(),
+    file: z.string().optional(), // selected file in files tab
+    addon: z.string().optional(), // selected addon in addons tab
+    addonFile: z.string().optional(), // selected file in addon view
+    template: z.string().optional(),
+    // Feature options as key.value params handled dynamically
+  })
+  .passthrough()
+
+export const Route = createFileRoute('/builder/')({
+  ssr: false,
+  validateSearch: builderSearchSchema,
+  component: RouteComponent,
+  staticData: {
+    includeSearchInCanonical: true,
+    Title: () => (
+      <Link
+        to="/builder"
+        className="hover:text-blue-500 flex items-center gap-2 text-gray-500"
+      >
+        Builder
+        <span className="px-1.5 py-0.5 text-[.6rem] font-black border border-amber-500 text-amber-500 rounded-md uppercase">
+          Alpha
+        </span>
+      </Link>
+    ),
+  },
+  head: () => ({
+    meta: seo({
+      title: 'TanStack Builder',
+      description: 'Build amazing applications with TanStack',
+    }),
+  }),
+})
+
+function RouteComponent() {
+  return (
+    <div className="h-[calc(100dvh-var(--navbar-height))] w-full overflow-hidden">
+      <ClientOnly>
+        <React.Suspense fallback={null}>
+          <LazyBuilderPage />
+        </React.Suspense>
+      </ClientOnly>
+    </div>
+  )
+}
diff --git a/src/routes/builder.tsx b/src/routes/builder.tsx
index 93e347a2c..e99ad4c48 100644
--- a/src/routes/builder.tsx
+++ b/src/routes/builder.tsx
@@ -1,57 +1,12 @@
-import { createFileRoute, Link } from '@tanstack/react-router'
-import { z } from 'zod'
+import { createFileRoute, Outlet } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
-import styles from '~/styles/builder.css?url'
-import { BuilderProvider, BuilderLayout } from '~/components/builder'
-
-// Search params schema for shareable URLs
-const builderSearchSchema = z.object({
-  name: z.string().optional(),
-  mode: z.enum(['file-router', 'code-router']).optional(),
-  ts: z.boolean().optional(),
-  tw: z.boolean().optional(),
-  starter: z.string().optional(),
-  addons: z.string().optional(),
-  // UI state
-  tab: z.enum(['files', 'preview']).optional(),
-  file: z.string().optional(),
-  terminal: z.boolean().optional(),
-})
 
 export const Route = createFileRoute('/builder')({
-  ssr: false,
-  validateSearch: builderSearchSchema,
-  component: RouteComponent,
-  staticData: {
-    Title: () => (
-      <Link
-        to="/builder"
-        className="hover:text-blue-500 flex items-center gap-2 text-gray-500"
-      >
-        Builder
-      </Link>
-    ),
-  },
   head: () => ({
-    links: [
-      {
-        rel: 'stylesheet',
-        href: styles,
-      },
-    ],
     meta: seo({
       title: 'TanStack Builder',
       description: 'Build amazing applications with TanStack',
     }),
   }),
+  component: () => <Outlet />,
 })
-
-function RouteComponent() {
-  return (
-    <div className="builder-root h-[calc(100dvh-var(--navbar-height))] w-full overflow-hidden">
-      <BuilderProvider>
-        <BuilderLayout />
-      </BuilderProvider>
-    </div>
-  )
-}
diff --git a/src/routes/dashboard.tsx b/src/routes/dashboard.tsx
index d1ed0cf1b..4e77b855d 100644
--- a/src/routes/dashboard.tsx
+++ b/src/routes/dashboard.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/set-state-in-effect -- animation trigger on mount */
-import { createFileRoute } from '@tanstack/react-router'
+import { Link, createFileRoute } from '@tanstack/react-router'
 import { useState, useEffect } from 'react'
 import { ArrowRight, Hand } from 'lucide-react'
 import { Card } from '~/components/Card'
@@ -46,13 +46,13 @@ function Dashboard() {
               There's not much to see here yet. <br /> We're working on it!
             </p>
             <div className="flex flex-col sm:flex-row gap-3 justify-center items-center mt-16">
-              <a
-                href="/account"
+              <Link
+                to="/account"
                 className="inline-block bg-black/80 hover:bg-black text-white dark:text-black dark:bg-white/90 dark:hover:bg-white font-semibold py-2 px-6 rounded-md transition-colors text-center"
               >
                 Account Settings
                 <ArrowRight className="inline-block ml-2" />
-              </a>
+              </Link>
             </div>
           </Card>
         </div>
diff --git a/src/routes/ethos.tsx b/src/routes/ethos.tsx
index 240a59397..b908be232 100644
--- a/src/routes/ethos.tsx
+++ b/src/routes/ethos.tsx
@@ -134,7 +134,7 @@ function RouteComp() {
                 {/* Header */}
                 <div className="flex items-start gap-4 mb-4">
                   <div
-                    className={`shrink-0 w-12 h-12 rounded-lg bg-gradient-to-br ${section.gradient} flex items-center justify-center`}
+                    className={`shrink-0 w-12 h-12 rounded-lg bg-linear-to-br ${section.gradient} flex items-center justify-center`}
                   >
                     <Icon className="w-6 h-6 text-white" />
                   </div>
@@ -154,7 +154,7 @@ function RouteComp() {
                     {section.bullets.map((bullet) => (
                       <div key={bullet} className="flex gap-3 items-start">
                         <div
-                          className={`shrink-0 w-1.5 h-1.5 rounded-full bg-gradient-to-br ${section.gradient} mt-2`}
+                          className={`shrink-0 w-1.5 h-1.5 rounded-full bg-linear-to-br ${section.gradient} mt-2`}
                         />
                         <span className="text-gray-600 dark:text-gray-400">
                           {bullet}
@@ -193,7 +193,7 @@ function RouteComp() {
           className="p-6 md:p-8 hover:border-violet-500/50 transition-colors"
         >
           <div className="flex items-start gap-4">
-            <div className="shrink-0 w-12 h-12 rounded-lg bg-gradient-to-br from-violet-500 to-purple-500 flex items-center justify-center">
+            <div className="shrink-0 w-12 h-12 rounded-lg bg-linear-to-br from-violet-500 to-purple-500 flex items-center justify-center">
               <FileText className="w-6 h-6 text-white" />
             </div>
             <div>
diff --git a/src/routes/explore.tsx b/src/routes/explore.tsx
index 7d31154e5..6ee17c34e 100644
--- a/src/routes/explore.tsx
+++ b/src/routes/explore.tsx
@@ -1,10 +1,13 @@
-import { Link, createFileRoute } from '@tanstack/react-router'
+import { ClientOnly, Link, createFileRoute } from '@tanstack/react-router'
 import { lazy, Suspense } from 'react'
 
 // Lazy load the entire game to keep it out of main bundle
-const IslandExplorer = lazy(() => import('~/components/game/IslandExplorer'))
+const IslandExplorer = lazy(
+  () => import('~/components/game/IslandExplorer.client'),
+)
 
 export const Route = createFileRoute('/explore')({
+  ssr: false,
   component: ExplorePage,
   head: () => ({
     meta: [
@@ -35,7 +38,7 @@ export const Route = createFileRoute('/explore')({
 // Loading screen while game JS bundle loads
 function LoadingScreen() {
   return (
-    <div className="w-full h-[calc(100dvh-var(--navbar-height))] bg-gradient-to-b from-sky-400 to-cyan-600 flex items-center justify-center">
+    <div className="w-full h-[calc(100dvh-var(--navbar-height))] bg-linear-to-b from-sky-400 to-cyan-600 flex items-center justify-center">
       <div className="text-center">
         <div className="w-16 h-16 mx-auto mb-4 border-4 border-white/30 border-t-white rounded-full animate-spin" />
         <p className="text-white text-lg font-medium">
@@ -49,8 +52,10 @@ function LoadingScreen() {
 
 function ExplorePage() {
   return (
-    <Suspense fallback={<LoadingScreen />}>
-      <IslandExplorer />
-    </Suspense>
+    <ClientOnly>
+      <Suspense fallback={<LoadingScreen />}>
+        <IslandExplorer />
+      </Suspense>
+    </ClientOnly>
   )
 }
diff --git a/src/routes/feed.$id.tsx b/src/routes/feed.$id.tsx
deleted file mode 100644
index 3c72c1aa7..000000000
--- a/src/routes/feed.$id.tsx
+++ /dev/null
@@ -1,405 +0,0 @@
-import { Link, notFound, createFileRoute } from '@tanstack/react-router'
-import { Footer } from '~/components/Footer'
-import { seo } from '~/utils/seo'
-import { useCapabilities } from '~/hooks/useCapabilities'
-import { isAdmin } from '~/db/types'
-import * as v from 'valibot'
-import { format, formatDistanceToNow } from '~/utils/dates'
-import { Markdown } from '~/components/markdown'
-import { libraries } from '~/libraries'
-import { partners } from '~/utils/partners'
-import { twMerge } from 'tailwind-merge'
-import type { FeedEntry } from '~/components/FeedEntry'
-import { getFeedEntryByIdQueryOptions } from '~/queries/feed'
-import { ArrowLeft } from 'lucide-react'
-
-const searchSchema = v.object({})
-
-export const Route = createFileRoute('/feed/$id')({
-  staleTime: 1000 * 60 * 5, // 5 minutes
-  loader: async ({ params, context: { queryClient } }) => {
-    const entryId = params.id
-
-    // Fetch the feed entry by id
-    const entry = await queryClient.ensureQueryData(
-      getFeedEntryByIdQueryOptions(entryId),
-    )
-
-    if (!entry) {
-      throw notFound()
-    }
-
-    // Check if entry is visible (unless admin)
-    // Note: We'll check capabilities client-side since they depend on auth
-    // For SSR, we'll allow the entry to load and handle visibility client-side
-
-    return {
-      entry,
-    }
-  },
-  headers: () => ({
-    'cache-control': 'public, max-age=0, must-revalidate',
-    'cdn-cache-control': 'max-age=300, stale-while-revalidate=300, durable',
-    'Netlify-Vary': 'query=payload',
-  }),
-  component: FeedItemPage,
-  validateSearch: searchSchema,
-  head: ({ loaderData }) => {
-    const entry = loaderData?.entry
-
-    if (!entry) {
-      return {
-        meta: seo({
-          title: 'Feed Entry Not Found',
-        }),
-      }
-    }
-
-    return {
-      meta: seo({
-        title: `${entry.title} | TanStack Feed`,
-        description: entry.excerpt || entry.content.slice(0, 160),
-      }),
-    }
-  },
-  notFoundComponent: () => (
-    <div className="min-h-screen flex items-center justify-center">
-      <div className="text-center">
-        <h1 className="text-2xl font-bold mb-2">Feed Entry Not Found</h1>
-        <p className="text-gray-600 dark:text-gray-400 mb-4">
-          The feed entry you're looking for doesn't exist or isn't available.
-        </p>
-        <Link
-          to="/feed"
-          search={{
-            releaseLevels: ['major', 'minor'] as const,
-            includePrerelease: true,
-            page: 1,
-            pageSize: 20,
-            viewMode: 'table' as const,
-          }}
-          className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg inline-block"
-        >
-          Back to Feed
-        </Link>
-      </div>
-    </div>
-  ),
-})
-
-function FeedItemPage() {
-  const { entry } = Route.useLoaderData()
-  const capabilities = useCapabilities()
-
-  // Show not found if entry isn't visible (unless admin)
-  if (!entry.showInFeed && !isAdmin(capabilities)) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold mb-2">Feed Entry Not Found</h1>
-          <p className="text-gray-600 dark:text-gray-400 mb-4">
-            The feed entry you're looking for doesn't exist or isn't available.
-          </p>
-          <Link
-            to="/feed"
-            search={{
-              releaseLevels: ['major', 'minor'] as const,
-              includePrerelease: true,
-              page: 1,
-              pageSize: 20,
-              viewMode: 'table' as const,
-            }}
-            className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg inline-block"
-          >
-            Back to Feed
-          </Link>
-        </div>
-      </div>
-    )
-  }
-
-  return <FeedEntryView entry={entry as FeedEntry} />
-}
-
-function FeedEntryView({ entry }: { entry: FeedEntry }) {
-  // Get library info
-  const entryLibraries = entry.libraryIds
-    .map((id) => libraries.find((lib) => lib.id === id))
-    .filter(Boolean)
-
-  // Get partner info
-  const entryPartners = entry.partnerIds
-    ? entry.partnerIds
-        .map((id) => partners.find((p) => p.id === id))
-        .filter(Boolean)
-    : []
-
-  // Determine entry type badge
-  const getTypeBadge = () => {
-    const isPrerelease = entry.tags.includes('release:prerelease')
-
-    const badgeConfigs: Record<string, { label: string; className: string }> = {
-      release: {
-        label: 'Release',
-        className:
-          'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200',
-      },
-      prerelease: {
-        label: 'Prerelease',
-        className:
-          'bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200',
-      },
-      blog: {
-        label: 'Blog',
-        className:
-          'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200',
-      },
-      announcement: {
-        label: 'Announcement',
-        className:
-          'bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200',
-      },
-      partner: {
-        label: 'Partner',
-        className:
-          'bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200',
-      },
-      update: {
-        label: 'Update',
-        className:
-          'bg-teal-100 dark:bg-teal-900 text-teal-800 dark:text-teal-200',
-      },
-    }
-
-    const key =
-      entry.entryType === 'release' && isPrerelease
-        ? 'prerelease'
-        : entry.entryType
-
-    return (
-      badgeConfigs[key] || {
-        label: entry.entryType,
-        className:
-          'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200',
-      }
-    )
-  }
-
-  const badge = getTypeBadge()
-
-  // Get release level badge if present
-  const getReleaseLevelBadge = () => {
-    const releaseLevelTag = entry.tags.find(
-      (tag) =>
-        tag.startsWith('release:') &&
-        tag !== 'release:prerelease' &&
-        (tag === 'release:major' ||
-          tag === 'release:minor' ||
-          tag === 'release:patch'),
-    )
-    if (!releaseLevelTag) return null
-
-    const level = releaseLevelTag.replace('release:', '')
-    const badgeConfigs: Record<string, { label: string; className: string }> = {
-      major: {
-        label: 'Major',
-        className:
-          'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200',
-      },
-      minor: {
-        label: 'Minor',
-        className:
-          'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200',
-      },
-      patch: {
-        label: 'Patch',
-        className:
-          'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200',
-      },
-    }
-
-    return badgeConfigs[level] || null
-  }
-
-  const releaseLevelBadge = getReleaseLevelBadge()
-
-  // Determine external link if available
-  const getExternalLink = () => {
-    if (entry.metadata) {
-      if (entry.entryType === 'release' && entry.metadata.url) {
-        return entry.metadata.url
-      }
-      if (entry.entryType === 'blog' && entry.metadata.url) {
-        return entry.metadata.url
-      }
-    }
-    return null
-  }
-
-  const externalLink = getExternalLink()
-
-  return (
-    <div className="min-h-screen flex flex-col">
-      <div className="flex-1 max-w-4xl mx-auto w-full px-4 py-6">
-        {/* Back Link */}
-        <Link
-          to="/feed"
-          search={{
-            releaseLevels: ['major', 'minor'] as const,
-            includePrerelease: true,
-            page: 1,
-            pageSize: 20,
-            viewMode: 'table' as const,
-          }}
-          className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 mb-4 font-medium"
-        >
-          <ArrowLeft />
-          Back to Feed
-        </Link>
-
-        {/* Feed Entry */}
-        <article
-          className={twMerge(
-            'bg-white dark:bg-black border border-gray-200 dark:border-gray-800 rounded-lg p-4 lg:p-6',
-            entry.featured &&
-              'bg-yellow-50 dark:bg-yellow-900/10 border-yellow-200 dark:border-yellow-800',
-          )}
-        >
-          {/* Header */}
-          <div className="mb-4">
-            {/* Badges */}
-            <div className="flex items-center gap-2 flex-wrap mb-3">
-              <span
-                className={twMerge(
-                  'px-2 py-1 rounded-md text-xs font-medium uppercase',
-                  badge.className,
-                )}
-              >
-                {badge.label}
-              </span>
-              {releaseLevelBadge && (
-                <span
-                  className={twMerge(
-                    'px-2 py-1 rounded-md text-xs font-medium uppercase',
-                    releaseLevelBadge.className,
-                  )}
-                >
-                  {releaseLevelBadge.label}
-                </span>
-              )}
-              {entry.featured && (
-                <span className="px-2 py-1 rounded-md text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
-                  ⭐ Featured
-                </span>
-              )}
-            </div>
-
-            {/* Title */}
-            <h1 className="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-3">
-              {entry.title}
-            </h1>
-
-            {/* Metadata */}
-            <div className="flex items-center gap-4 text-xs text-gray-600 dark:text-gray-400 flex-wrap">
-              <time
-                dateTime={new Date(entry.publishedAt).toISOString()}
-                title={format(new Date(entry.publishedAt), 'PPpp')}
-                className="cursor-help"
-              >
-                {formatDistanceToNow(new Date(entry.publishedAt), {
-                  addSuffix: true,
-                })}
-              </time>
-              {entry.autoSynced && (
-                <span className="capitalize">
-                  {entry.entryType === 'release' ? 'GitHub' : entry.entryType}
-                </span>
-              )}
-              {entryLibraries.length > 0 && (
-                <div className="flex items-center gap-2">
-                  <span>Libraries:</span>
-                  <div className="flex gap-1 flex-wrap">
-                    {entryLibraries.map((lib) => (
-                      <span
-                        key={lib!.id}
-                        className="px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs"
-                      >
-                        {lib!.name}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              )}
-              {entryPartners.length > 0 && (
-                <div className="flex items-center gap-2">
-                  <span>Partners:</span>
-                  <div className="flex gap-1 flex-wrap">
-                    {entryPartners.map((partner) => (
-                      <span
-                        key={partner!.id}
-                        className="px-1.5 py-0.5 rounded bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 text-xs"
-                      >
-                        {partner!.name}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Tags */}
-          {entry.tags.length > 0 && (
-            <div className="flex items-center gap-2 mb-4 flex-wrap pb-4 border-b border-gray-200 dark:border-gray-700">
-              <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
-                Tags:
-              </span>
-              {entry.tags.map((tag) => (
-                <span
-                  key={tag}
-                  className="px-1.5 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs"
-                >
-                  {tag}
-                </span>
-              ))}
-            </div>
-          )}
-
-          {/* Content */}
-          <div className="prose prose-sm dark:prose-invert max-w-none mb-4 prose-headings:mt-4 prose-headings:mb-2 prose-p:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-0">
-            <Markdown rawContent={entry.content} />
-          </div>
-
-          {/* External Link */}
-          {externalLink && (
-            <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
-              <a
-                href={externalLink}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium inline-flex items-center gap-2"
-              >
-                View on {entry.entryType === 'release' ? 'GitHub' : 'Blog'}
-                <svg
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                  />
-                </svg>
-              </a>
-            </div>
-          )}
-        </article>
-      </div>
-
-      <Footer />
-    </div>
-  )
-}
diff --git a/src/routes/feed.index.tsx b/src/routes/feed.index.tsx
deleted file mode 100644
index 36c1c6626..000000000
--- a/src/routes/feed.index.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import * as v from 'valibot'
-import { seo } from '~/utils/seo'
-import { FeedPage as FeedPageComponent } from '~/components/FeedPage'
-import { listFeedEntriesQueryOptions } from '~/queries/feed'
-import { FEED_DEFAULTS } from '~/utils/feedDefaults'
-import {
-  libraryIdSchema,
-  entryTypeSchema,
-  releaseLevelSchema,
-  feedViewModeSchema,
-} from '~/utils/schemas'
-
-const searchSchema = v.object({
-  entryTypes: v.fallback(v.optional(v.array(entryTypeSchema)), undefined),
-  libraries: v.fallback(v.optional(v.array(libraryIdSchema)), undefined),
-  partners: v.fallback(v.optional(v.array(v.string())), undefined),
-  tags: v.fallback(v.optional(v.array(v.string())), undefined),
-  releaseLevels: v.fallback(v.optional(v.array(releaseLevelSchema)), undefined),
-  includePrerelease: v.fallback(v.optional(v.boolean()), undefined),
-  featured: v.fallback(v.optional(v.boolean()), undefined),
-  search: v.fallback(v.optional(v.string()), undefined),
-  page: v.fallback(
-    v.optional(v.number(), FEED_DEFAULTS.page),
-    FEED_DEFAULTS.page,
-  ),
-  pageSize: v.fallback(
-    v.optional(
-      v.pipe(v.number(), v.integer(), v.minValue(1)),
-      FEED_DEFAULTS.pageSize,
-    ),
-    FEED_DEFAULTS.pageSize,
-  ),
-  viewMode: v.fallback(v.optional(feedViewModeSchema, 'table'), 'table'),
-  expanded: v.fallback(v.optional(v.array(v.string())), undefined),
-})
-
-export const Route = createFileRoute('/feed/')({
-  staleTime: 1000 * 60 * 5, // 5 minutes
-  validateSearch: searchSchema,
-  loaderDeps: ({ search }) => ({
-    page: search.page,
-    pageSize: search.pageSize,
-    entryTypes: search.entryTypes,
-    libraries: search.libraries,
-    partners: search.partners,
-    tags: search.tags,
-    releaseLevels: search.releaseLevels,
-    includePrerelease: search.includePrerelease,
-    featured: search.featured,
-    search: search.search,
-  }),
-  loader: async ({ deps, context: { queryClient } }) => {
-    // Prefetch feed data based on URL search params
-    // Note: localStorage preferences are merged client-side, but this prefetches
-    // the data based on URL params which helps with initial load
-    await queryClient.ensureQueryData(
-      listFeedEntriesQueryOptions({
-        pagination: {
-          limit: deps.pageSize ?? 50,
-          page: (deps.page ?? 1) - 1,
-        },
-        filters: {
-          entryTypes: deps.entryTypes,
-          libraries: deps.libraries,
-          partners: deps.partners,
-          tags: deps.tags,
-          releaseLevels: deps.releaseLevels as any,
-          includePrerelease: deps.includePrerelease,
-          featured: deps.featured,
-          search: deps.search,
-        },
-      }),
-    )
-  },
-  headers: () => ({
-    'cache-control': 'public, max-age=0, must-revalidate',
-    'cdn-cache-control': 'max-age=300, stale-while-revalidate=300, durable',
-    'Netlify-Vary': 'query=payload',
-  }),
-  component: FeedPage,
-  head: () => ({
-    meta: seo({
-      title: 'Feed | TanStack',
-      description:
-        'Stay up to date with all TanStack updates, releases, announcements, and blog posts',
-    }),
-  }),
-})
-
-function FeedPage() {
-  const search = Route.useSearch()
-  const navigate = Route.useNavigate()
-
-  return (
-    <FeedPageComponent
-      search={search}
-      onNavigate={(updates) => {
-        navigate({
-          search: (s: typeof search) => ({ ...s, ...updates.search }),
-          replace: updates.replace ?? true,
-          resetScroll: updates.resetScroll ?? false,
-        })
-      }}
-    />
-  )
-}
diff --git a/src/routes/feedback-leaderboard.tsx b/src/routes/feedback-leaderboard.tsx
index d1def22b3..767ca12b9 100644
--- a/src/routes/feedback-leaderboard.tsx
+++ b/src/routes/feedback-leaderboard.tsx
@@ -31,8 +31,8 @@ export const Route = createFileRoute('/feedback-leaderboard')({
   },
   headers: () => ({
     'cache-control': 'public, max-age=0, must-revalidate',
-    'cdn-cache-control': 'max-age=300, stale-while-revalidate=300, durable',
-    'Netlify-Vary': 'query=payload',
+    'cloudflare-cdn-cache-control':
+      'public, max-age=300, stale-while-revalidate=300',
   }),
   component: FeedbackLeaderboard,
   head: () => ({
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 4503370ee..6d7cbb6f3 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,142 +1,97 @@
+import * as React from 'react'
 import { ClientOnly, Link, createFileRoute } from '@tanstack/react-router'
 
-import { Footer } from '~/components/Footer'
-import { LazySponsorSection } from '~/components/LazySponsorSection'
 import discordImage from '~/images/discord-logo-white.svg'
-import { useMutation } from '~/hooks/useMutation'
 import { librariesByGroup, librariesGroupNamesMap, Library } from '~/libraries'
-import bytesImage from '~/images/bytes.svg'
-import { PartnersGrid } from '~/components/PartnersGrid'
-import OpenSourceStats from '~/components/OpenSourceStats'
-import { ossStatsQuery } from '~/queries/stats'
-// Using public asset URLs for splash images
 import { BrandContextMenu } from '~/components/BrandContextMenu'
-import LandingPageGad from '~/components/LandingPageGad'
-import { MaintainerCard } from '~/components/MaintainerCard'
-import { coreMaintainers } from '~/libraries/maintainers'
-import { useToast } from '~/components/ToastProvider'
-import { formatAuthors, getPublishedPosts } from '~/utils/blog'
-import { format } from '~/utils/dates'
-import { SimpleMarkdown } from '~/components/SimpleMarkdown'
-import { NetlifyImage } from '~/components/NetlifyImage'
-import { createServerFn } from '@tanstack/react-start'
-import { setResponseHeaders } from '@tanstack/react-start/server'
-import { AdGate } from '~/contexts/AdsContext'
-import { GamHeader } from '~/components/Gam'
-import { TrustedByMarquee } from '~/components/TrustedByMarquee'
-import { ArrowRight, Code2, Layers, Shield, Zap } from 'lucide-react'
-import { Card } from '~/components/Card'
-import LibraryCard from '~/components/LibraryCard'
-import { FeaturedShowcases } from '~/components/ShowcaseSection'
-import { Button } from '~/ui'
-
-export const textColors = [
-  `text-rose-500`,
-  `text-yellow-500`,
-  `text-teal-500`,
-  `text-blue-500`,
-]
-
-export const gradients = [
-  `from-rose-500 to-yellow-500`,
-  `from-yellow-500 to-teal-500`,
-  `from-teal-500 to-violet-500`,
-  `from-blue-500 to-pink-500`,
-]
-
-const courses = [
-  {
-    name: 'The Official TanStack React Query Course',
-    cardStyles: ``,
-    href: 'https://query.gg/?s=tanstack',
-    description: `Learn how to build enterprise quality apps with TanStack's React Query the easy way with our brand new course.`,
-  },
-]
-
-type BlogFrontMatter = {
-  slug: string
-  title: string
-  published: string
-  excerpt: string | undefined
-  authors: string[]
-}
+import { OptimizedImage } from '~/components/OptimizedImage'
+import { groupToSlug } from '~/components/stack/stack-categories'
+import { twMerge } from 'tailwind-merge'
 
-const fetchRecentPosts = createServerFn({ method: 'GET' }).handler(
-  async (): Promise<BlogFrontMatter[]> => {
-    setResponseHeaders(
-      new Headers({
-        'Cache-Control': 'public, max-age=0, must-revalidate',
-        'Netlify-CDN-Cache-Control':
-          'public, max-age=300, durable, stale-while-revalidate=300',
-      }),
-    )
-
-    return getPublishedPosts()
-      .slice(0, 3)
-      .map((post) => {
-        return {
-          slug: post.slug,
-          title: post.title,
-          published: post.published,
-          excerpt: post.excerpt,
-          authors: post.authors,
-        }
-      })
-  },
-)
+import {
+  ArrowRight,
+  Code2,
+  Layers,
+  Shield,
+  Zap,
+  Play,
+  type LucideIcon,
+} from 'lucide-react'
+import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
+import { HomeApplicationStarter } from '~/components/home/HomeApplicationStarter'
+import { HomeCommunitySection } from '~/components/home/HomeCommunitySection'
+import { HomeNewsletterSection } from '~/components/home/HomeNewsletterSection'
+import { HomeSocialProofSection } from '~/components/home/HomeSocialProofSection'
+import { HomeStatsSection } from '~/components/home/HomeStatsSection'
+import { homepageNpmStatsSummaryQuery, ossStatsQuery } from '~/queries/stats'
+import { Button } from '~/ui'
+import { fetchRecentPosts } from '~/utils/blog.functions'
+import { seo } from '~/utils/seo'
 
 export const Route = createFileRoute('/')({
   loader: async ({ context: { queryClient } }) => {
-    await queryClient.ensureQueryData(ossStatsQuery())
-    const recentPosts = await fetchRecentPosts()
+    const [, , recentPosts] = await Promise.all([
+      queryClient.ensureQueryData(ossStatsQuery()),
+      queryClient.ensureQueryData(homepageNpmStatsSummaryQuery()),
+      fetchRecentPosts(),
+    ])
 
-    return {
-      recentPosts,
-    }
+    return { recentPosts }
   },
+  head: () => ({
+    meta: seo({
+      title: 'TanStack | The open-source application stack for the web.',
+      description:
+        'Headless, type-safe, composable tools for building modern web applications that work naturally for developers and reliably for agents.',
+    }),
+  }),
   component: Index,
 })
 
-async function bytesSignupServerFn({ email }: { email: string }) {
-  'use server'
-
-  return fetch(`https://bytes.dev/api/bytes-optin-cors`, {
-    method: 'POST',
-    body: JSON.stringify({
-      email,
-      influencer: 'tanstack',
-    }),
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
-  })
+function HomeSplashLogo() {
+  return (
+    <>
+      <OptimizedImage
+        src="/images/logos/splash-light.png"
+        width={500}
+        height={500}
+        quality={85}
+        className="absolute inset-0 block h-full w-full object-contain dark:hidden"
+        alt="TanStack Logo"
+        loading="eager"
+        fetchPriority="high"
+      />
+      <OptimizedImage
+        src="/images/logos/splash-dark.png"
+        width={500}
+        height={500}
+        quality={85}
+        className="absolute inset-0 hidden h-full w-full object-contain dark:block"
+        alt="TanStack Logo"
+        loading="eager"
+        fetchPriority="high"
+      />
+    </>
+  )
 }
 
 function Index() {
-  const bytesSignupMutation = useMutation({
-    fn: bytesSignupServerFn,
-  })
-  const { notify } = useToast()
-  const { recentPosts } = Route.useLoaderData() as {
-    recentPosts: BlogFrontMatter[]
-  }
+  const { recentPosts } = Route.useLoaderData()
 
   return (
     <>
       <div className="max-w-full z-10 space-y-24">
         <div className="space-y-8">
-          <div className="flex flex-col xl:flex-row items-center gap-4 xl:pt-24 xl:justify-center">
+          <div className="flex flex-col items-center gap-4 xl:grid xl:grid-cols-[400px_minmax(0,44rem)] 2xl:grid-cols-[500px_minmax(0,48rem)] xl:items-center xl:justify-center xl:gap-8 xl:pt-24">
             <div
-              className="relative [--ship-x:50px] [--ship-y:1.5rem] 
+              className="relative w-[300px] pt-8 xl:w-[400px] xl:pt-0 2xl:w-[500px] [--ship-x:50px] [--ship-y:1.5rem] 
             lg:[--ship-x:50px] lg:[--ship-y:1.5rem]
             xl:[--ship-x:80px] xl:[--ship-y:2.5rem]
             2xl:[--ship-x:90px] 2xl:[--ship-y:3rem]"
             >
               <ClientOnly>
-                {/* Ship behind splash */}
                 <div className="absolute left-1/3 bottom-[25%] z-0 animate-ship-peek">
-                  <NetlifyImage
+                  <OptimizedImage
                     src="/images/ship.png"
                     alt=""
                     width={240}
@@ -144,13 +99,12 @@ function Index() {
                     className="w-16 xl:w-20"
                   />
                 </div>
-                {/* Invisible clickable ship in front */}
                 <Link
                   to="/explore"
                   className="absolute left-1/3 bottom-[25%] z-20 animate-ship-peek-clickable"
                   title="Explore TanStack"
                 >
-                  <NetlifyImage
+                  <OptimizedImage
                     src="/images/ship.png"
                     alt="Explore TanStack"
                     width={240}
@@ -159,30 +113,13 @@ function Index() {
                   />
                 </Link>
               </ClientOnly>
-              <BrandContextMenu className="cursor-pointer relative z-10">
-                <NetlifyImage
-                  src="/images/logos/splash-light.png"
-                  width={500}
-                  height={500}
-                  quality={85}
-                  className="w-[300px] pt-8 xl:pt-0 xl:w-[400px] 2xl:w-[500px] dark:hidden"
-                  alt="TanStack Logo"
-                  loading="eager"
-                  fetchPriority="high"
-                />
-                <NetlifyImage
-                  src="/images/logos/splash-dark.png"
-                  width={500}
-                  height={500}
-                  quality={85}
-                  className="w-[300px] pt-8 xl:pt-0 xl:w-[400px] 2xl:w-[500px] hidden dark:block"
-                  alt="TanStack Logo"
-                  loading="eager"
-                  fetchPriority="high"
-                />
-              </BrandContextMenu>
+              <div className="relative z-10 aspect-square">
+                <BrandContextMenu className="cursor-pointer relative h-full w-full">
+                  <HomeSplashLogo />
+                </BrandContextMenu>
+              </div>
             </div>
-            <div className="flex flex-col items-center gap-6 text-center px-4 xl:text-left xl:items-start">
+            <div className="flex w-full max-w-md flex-col items-center gap-6 px-4 text-center md:max-w-2xl xl:max-w-[44rem] xl:items-start xl:px-0 xl:text-left 2xl:max-w-[48rem]">
               <div className="flex gap-2 lg:gap-4 items-center">
                 <h1
                   className={`inline-block
@@ -204,342 +141,71 @@ function Index() {
                 className="font-bold text-2xl max-w-md
             md:text-4xl md:max-w-2xl
             2xl:text-5xl lg:max-w-2xl text-balance"
+                style={{
+                  fontFamily:
+                    'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+                }}
               >
-                High-quality open-source software for{' '}
-                <span className="underline decoration-dashed decoration-yellow-500 decoration-3 underline-offset-2">
-                  web developers.
-                </span>
+                The <OpenSourceGradientText /> application stack for the web.
               </h2>
               <p
                 className="text opacity-90 max-w-sm
-            lg:text-xl lg:max-w-2xl text-balance"
+             lg:text-xl lg:max-w-2xl text-balance"
               >
-                Headless, type-safe, & powerful utilities for Web Applications,
-                Routing, State Management, Data Visualization, Datagrids/Tables,
-                and more.
+                Headless, type-safe, composable tools for building modern web
+                applications that work naturally for <strong>developers</strong>{' '}
+                and reliably for <strong>agents</strong>.
               </p>
             </div>
           </div>
-          <div className="w-fit mx-auto px-4">
-            <OpenSourceStats />
+          <div className="mx-auto mt-8 w-full max-w-[1021px] px-4 sm:px-6 md:mt-10">
+            <HomeStatsSection />
+          </div>
+          <div className="mx-auto mt-16 w-full max-w-[1021px] px-4 sm:px-6 md:mt-20 lg:mt-14 xl:mt-12">
+            <HomeApplicationStarter />
           </div>
-        </div>
-
-        <AdGate>
-          <GamHeader />
-        </AdGate>
-
-        <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
-          <TrustedByMarquee
-            brands={[
-              'Google',
-              'Amazon',
-              'Apple',
-              'Microsoft',
-              'Walmart',
-              'Uber',
-              'Salesforce',
-              'Cisco',
-              'Intuit',
-              'HP',
-              'Docusign',
-              'TicketMaster',
-              'Nordstrom',
-              'Yahoo!',
-            ]}
-          />
         </div>
 
         <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
           <h3
             id="libraries"
-            className={`text-4xl font-light mb-6 scroll-mt-24`}
+            className={`text-4xl font-light mb-2 scroll-mt-24`}
           >
             <a
               href="#libraries"
               className="hover:underline decoration-gray-400 dark:decoration-gray-600"
             >
-              Open Source Libraries
+              Browse the stack
             </a>
           </h3>
+          <p className="text-gray-600 dark:text-gray-400 mb-6">
+            Every TanStack library, organized by what it does.
+          </p>
 
-          {Object.entries(librariesByGroup).map(
-            ([groupName, groupLibraries]) => (
-              <div key={groupName} className="mt-8">
-                <h4 className={`text-2xl font-medium capitalize mb-6`}>
-                  {
-                    librariesGroupNamesMap[
-                      groupName as keyof typeof librariesGroupNamesMap
-                    ]
-                  }
-                </h4>
-                {/* Library Cards */}
-                <div
-                  className={`grid grid-cols-1 gap-6 gap-y-8 justify-center
-                sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3`}
-                >
-                  {groupLibraries.map((library, i: number) => {
-                    return (
-                      <LibraryCard
-                        key={library.name}
-                        index={i}
-                        library={library as Library}
-                      />
-                    )
-                  })}
-                </div>
-              </div>
-            ),
-          )}
+          <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
+            {Object.entries(librariesByGroup).map(
+              ([groupName, groupLibraries]) => (
+                <StackCategoryCard
+                  key={groupName}
+                  groupId={groupName as keyof typeof librariesByGroup}
+                  libraries={groupLibraries as Library[]}
+                />
+              ),
+            )}
+          </div>
         </div>
 
         <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto mt-8 flex justify-center">
           <Button as={Link} to="/libraries">
-            More Libraries
+            See all libraries
           </Button>
         </div>
 
-        {/* Why TanStack Section */}
-        <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
-          <div className="mb-8">
-            <h3 className="text-3xl font-bold">Why TanStack?</h3>
-            <p className="text-gray-600 dark:text-gray-400 mt-2">
-              Our libraries are built on principles that put developers first
-            </p>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            <Card className="p-6 rounded-xl">
-              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center mb-4">
-                <Layers className="w-5 h-5 text-white" />
-              </div>
-              <h4 className="font-bold text-lg mb-2">Framework Agnostic</h4>
-              <p className="text-sm text-gray-600 dark:text-gray-400">
-                Every library starts with a provider-agnostic core. Use React,
-                Vue, Solid, Angular, or vanilla JS—your choice.
-              </p>
-            </Card>
-            <Card className="p-6 rounded-xl">
-              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center mb-4">
-                <Code2 className="w-5 h-5 text-white" />
-              </div>
-              <h4 className="font-bold text-lg mb-2">Type-Safe by Design</h4>
-              <p className="text-sm text-gray-600 dark:text-gray-400">
-                First-class TypeScript support that catches bugs at compile time
-                and makes refactoring fearless.
-              </p>
-            </Card>
-            <Card className="p-6 rounded-xl">
-              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center mb-4">
-                <Zap className="w-5 h-5 text-white" />
-              </div>
-              <h4 className="font-bold text-lg mb-2">Production-Grade</h4>
-              <p className="text-sm text-gray-600 dark:text-gray-400">
-                Battle-tested in the world's largest apps. Built for real
-                workloads, not just happy-path demos.
-              </p>
-            </Card>
-            <Card className="p-6 rounded-xl">
-              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center mb-4">
-                <Shield className="w-5 h-5 text-white" />
-              </div>
-              <h4 className="font-bold text-lg mb-2">No Vendor Lock-in</h4>
-              <p className="text-sm text-gray-600 dark:text-gray-400">
-                Open source and independent. No hidden agendas, no platform
-                bias—just great tools for developers.
-              </p>
-            </Card>
-          </div>
-          <div className="flex justify-center mt-8">
-            <Button as={Link} to="/tenets">
-              Read our product tenets
-              <ArrowRight className="w-4 h-4" />
-            </Button>
-          </div>
-        </div>
-
-        <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
-          <h3 id="partners" className="text-3xl font-bold mb-6 scroll-mt-24">
-            <a
-              href="#partners"
-              className="hover:underline decoration-gray-400 dark:decoration-gray-600"
-            >
-              Partners
-            </a>
-          </h3>
-          <PartnersGrid />
-          <div className="flex justify-center mt-6">
-            <Link to="/partners" search={{ status: 'inactive' }}>
-              <Button as="span">
-                View Previous Partners
-                <ArrowRight className="w-4 h-4" />
-              </Button>
-            </Link>
-          </div>
-        </div>
-
-        <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
-          <FeaturedShowcases />
-        </div>
-
-        {recentPosts && recentPosts.length > 0 && (
-          <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
-            <h3 id="blog" className="text-3xl font-bold mb-6 scroll-mt-24">
-              <a
-                href="#blog"
-                className="hover:underline decoration-gray-400 dark:decoration-gray-600"
-              >
-                Latest Blog Posts
-              </a>
-            </h3>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {recentPosts.map(
-                ({ slug, title, published, excerpt, authors }) => {
-                  return (
-                    <Card
-                      as={Link}
-                      key={slug}
-                      to="/blog/$"
-                      params={{ _splat: slug } as never}
-                      className={`flex flex-col gap-3 justify-between p-4
-                      transition-all hover:shadow-md hover:border-blue-500
-                    `}
-                    >
-                      <div>
-                        <div className={`text-base font-bold`}>{title}</div>
-                        <div
-                          className={`text-xs italic font-light mt-1 text-gray-600 dark:text-gray-400`}
-                        >
-                          <p>
-                            by {formatAuthors(authors)}
-                            {published ? (
-                              <time
-                                dateTime={published}
-                                title={format(
-                                  new Date(published),
-                                  'MMM dd, yyyy',
-                                )}
-                              >
-                                {' '}
-                                on {format(new Date(published), 'MMM dd, yyyy')}
-                              </time>
-                            ) : null}
-                          </p>
-                        </div>
-                        {excerpt && (
-                          <div
-                            className={`text-xs mt-3 text-gray-600 dark:text-gray-400 line-clamp-2 leading-relaxed`}
-                          >
-                            <SimpleMarkdown rawContent={excerpt} />
-                          </div>
-                        )}
-                      </div>
-                      <div>
-                        <div className="text-blue-500 uppercase font-bold text-xs">
-                          Read More →
-                        </div>
-                      </div>
-                    </Card>
-                  )
-                },
-              )}
-            </div>
-            <div className="flex justify-center mt-6">
-              <Button as={Link} to="/blog">
-                View All Posts
-                <ArrowRight className="w-4 h-4" />
-              </Button>
-            </div>
-          </div>
-        )}
-
-        <div className={`lg:max-w-(--breakpoint-lg) px-4 mx-auto`}>
-          <h3 id="courses" className="text-3xl font-bold mb-6 scroll-mt-24">
-            <a
-              href="#courses"
-              className="hover:underline decoration-gray-400 dark:decoration-gray-600"
-            >
-              Courses
-            </a>
-          </h3>
-          <div className={`mt-4 grid grid-cols-1 gap-4`}>
-            {courses.map((course) => (
-              <Card
-                as="a"
-                key={course.name}
-                href={course.href}
-                className={`flex gap-2 justify-between p-4 md:p-8
-              transition-all hover:shadow-md hover:border-green-500
-              `}
-                target="_blank"
-                rel="noreferrer"
-              >
-                <div
-                  className={`col-span-2
-                    md:col-span-5`}
-                >
-                  <div className={`text-2xl font-bold text-green-600`}>
-                    {course.name}
-                  </div>
-                  <div className={`text-sm mt-2`}>{course.description}</div>
-                  <div
-                    className={`inline-block mt-4 px-4 py-2 bg-green-700 text-white rounded shadow font-black text-sm`}
-                  >
-                    Check it out →
-                  </div>
-                </div>
-              </Card>
-            ))}
-          </div>
-        </div>
-
-        <div className={`lg:max-w-(--breakpoint-lg) px-4 mx-auto`}>
-          <div id="sponsors" className="scroll-mt-24">
-            <LazySponsorSection
-              title={
-                <a
-                  href="#sponsors"
-                  className="hover:underline decoration-gray-400 dark:decoration-gray-600"
-                >
-                  OSS Sponsors
-                </a>
-              }
-            />
-          </div>
-          <div className={`h-4`} />
-          <p
-            className={`italic mx-auto max-w-(--breakpoint-sm) text-gray-500 dark:text-gray-400 text-center`}
-          >
-            Sponsors get special perks like{' '}
-            <strong>
-              private discord channels, priority issue requests, direct support
-              and even course vouchers
-            </strong>
-            !
-          </p>
-        </div>
+        <WhyTanStackSection />
 
-        <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
-          <h3 id="maintainers" className="text-3xl font-bold mb-6 scroll-mt-24">
-            <a
-              href="#maintainers"
-              className="hover:underline decoration-gray-400 dark:decoration-gray-600"
-            >
-              Core Maintainers
-            </a>
-          </h3>
-          <div className="grid gap-6 grid-cols-2 lg:grid-cols-3">
-            {coreMaintainers.map((maintainer) => (
-              <MaintainerCard key={maintainer.github} maintainer={maintainer} />
-            ))}
-          </div>
-          <div className="flex justify-center mt-6">
-            <Button as={Link} to="/maintainers">
-              View All Maintainers
-            </Button>
-          </div>
-        </div>
+        <HomeSocialProofSection recentPosts={recentPosts} />
 
-        <LandingPageGad />
+        <HomeCommunitySection />
 
         <div className="px-4 mx-auto max-w-(--breakpoint-lg)">
           <div
@@ -590,103 +256,645 @@ function Index() {
             </div>
           </div>
         </div>
-        <div className="h-4" />
-        <div className="px-4 mx-auto max-w-(--breakpoint-lg) relative">
-          <Card className="rounded-md p-8 md:p-14">
-            {!bytesSignupMutation.submittedAt ? (
-              <form
-                onSubmit={async (e) => {
-                  e.preventDefault()
-                  const formData = new FormData(e.currentTarget)
-                  const email = formData.get('email_address')?.toString() || ''
-
-                  const result = await bytesSignupMutation.mutate({ email })
-                  if (result?.ok) {
-                    notify(
-                      <div>
-                        <div className="font-medium">
-                          Thanks for subscribing
-                        </div>
-                        <div className="text-gray-500 dark:text-gray-400 text-xs">
-                          Check your email to confirm your subscription
-                        </div>
-                      </div>,
-                    )
-                  } else if (bytesSignupMutation.status === 'error') {
-                    notify(
-                      <div>
-                        <div className="font-medium">Subscription failed</div>
-                        <div className="text-gray-500 dark:text-gray-400 text-xs">
-                          Please try again in a moment
-                        </div>
-                      </div>,
-                    )
-                  }
-                }}
+
+        <div className="px-4 mx-auto max-w-(--breakpoint-lg)">
+          <div
+            className={`
+          rounded-md p-4 grid gap-6
+          bg-linear-to-br from-red-500 to-red-700 text-white overflow-hidden relative
+          shadow-xl shadow-red-700/30
+          sm:p-8 sm:grid-cols-3 items-center`}
+          >
+            <div
+              className={`absolute transform opacity-10 z-0
+            right-0 top-0 -translate-y-1/3 translate-x-1/3
+            sm:opacity-20`}
+            >
+              <YouTubeIcon width={300} height={300} />
+            </div>
+            <div className={`sm:col-span-2`}>
+              <h3 id="youtube" className="text-3xl font-bold scroll-mt-24">
+                <a
+                  href="#youtube"
+                  className="hover:underline decoration-white/50"
+                >
+                  TanStack on YouTube
+                </a>
+              </h3>
+              <p className={`mt-4`}>
+                The official TanStack YouTube channel. Tutorials, deep dives,
+                release walkthroughs, and more — free for everyone!
+              </p>
+            </div>
+            <div className={`flex items-center justify-center`}>
+              <Button
+                as="a"
+                href="https://youtube.com/@tan_stack"
+                target="_blank"
+                rel="noreferrer"
+                className="w-full mt-4 bg-white border-white hover:bg-gray-100 text-red-600 justify-center shadow-lg text-sm"
               >
+                <Play className="w-4 h-4" />
+                Subscribe on YouTube
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="h-4" />
+        <HomeNewsletterSection />
+      </div>
+    </>
+  )
+}
+
+type PrincipleProof = 'adapters' | 'types' | 'adoption' | 'portable'
+
+type WhyTanStackPrinciple = {
+  label: string
+  title: string
+  body: string
+  Icon: LucideIcon
+  accentClassName: string
+  iconClassName: string
+  proof: PrincipleProof
+}
+
+type AdapterGraphNode = {
+  height: number
+  label: string
+  width: number
+  x: number
+  y: number
+}
+
+type AdapterGraphPoint = {
+  x: number
+  y: number
+}
+
+type AdapterGraphCurve = {
+  control1: AdapterGraphPoint
+  control2: AdapterGraphPoint
+  path: string
+}
+
+const whyTanStackPrinciples = [
+  {
+    label: 'Portable core',
+    title: 'Framework Agnostic',
+    body: 'Every library starts with a provider-agnostic core. Use React, Vue, Solid, Angular, or vanilla JS—your choice.',
+    Icon: Layers,
+    accentClassName: 'from-blue-500 to-cyan-500',
+    iconClassName:
+      'border-cyan-200 bg-cyan-50 text-cyan-700 dark:border-cyan-900 dark:bg-cyan-950/40 dark:text-cyan-300',
+    proof: 'adapters',
+  },
+  {
+    label: 'Compile-time contracts',
+    title: 'Type-Safe by Design',
+    body: 'First-class TypeScript support that catches bugs at compile time and makes refactoring fearless.',
+    Icon: Code2,
+    accentClassName: 'from-emerald-500 to-teal-500',
+    iconClassName:
+      'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-300',
+    proof: 'types',
+  },
+  {
+    label: 'Real workloads',
+    title: 'Production-Grade',
+    body: "Battle-tested in the world's largest apps. Built for real workloads, not just happy-path demos.",
+    Icon: Zap,
+    accentClassName: 'from-orange-500 to-red-500',
+    iconClassName:
+      'border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-900 dark:bg-orange-950/40 dark:text-orange-300',
+    proof: 'adoption',
+  },
+  {
+    label: 'Independent tools',
+    title: 'No Vendor Lock-in',
+    body: 'Open source and independent. No hidden agendas, no platform bias—just great tools for developers.',
+    Icon: Shield,
+    accentClassName: 'from-purple-500 to-pink-500',
+    iconClassName:
+      'border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-900 dark:bg-purple-950/40 dark:text-purple-300',
+    proof: 'portable',
+  },
+] satisfies ReadonlyArray<WhyTanStackPrinciple>
+
+const adapterGraphWidth = 320
+const adapterGraphHeight = 128
+
+const frameworkAdapterCore = {
+  label: 'core',
+  x: 132,
+  y: 58,
+  width: 56,
+  height: 32,
+} satisfies AdapterGraphNode
+
+const frameworkAdapterNodes = [
+  { label: 'React', x: 18, y: 28, width: 60, height: 26 },
+  { label: 'Vue', x: 132, y: 7, width: 56, height: 26 },
+  { label: 'Solid', x: 242, y: 28, width: 60, height: 26 },
+  { label: 'Angular', x: 26, y: 98, width: 78, height: 26 },
+  { label: 'Vanilla', x: 216, y: 98, width: 78, height: 26 },
+] satisfies ReadonlyArray<AdapterGraphNode>
+
+const frameworkAdapterConnections = frameworkAdapterNodes.map((node) => {
+  const start = edgeAnchor(frameworkAdapterCore, node)
+  const end = edgeAnchor(node, frameworkAdapterCore)
+  const curve = curveBetween(start, end, 0.5)
+
+  return {
+    control1: curve.control1,
+    control2: curve.control2,
+    end,
+    label: node.label,
+    path: curve.path,
+    start,
+  }
+})
+
+function centerPoint(node: AdapterGraphNode): AdapterGraphPoint {
+  return {
+    x: node.x + node.width / 2,
+    y: node.y + node.height / 2,
+  }
+}
+
+function edgeAnchor(
+  node: AdapterGraphNode,
+  toward: AdapterGraphNode,
+): AdapterGraphPoint {
+  const center = centerPoint(node)
+  const targetCenter = centerPoint(toward)
+  const deltaX = targetCenter.x - center.x
+  const deltaY = targetCenter.y - center.y
+
+  if (deltaX === 0 && deltaY === 0) {
+    return center
+  }
+
+  const scaleX =
+    deltaX === 0 ? Number.POSITIVE_INFINITY : node.width / 2 / Math.abs(deltaX)
+  const scaleY =
+    deltaY === 0 ? Number.POSITIVE_INFINITY : node.height / 2 / Math.abs(deltaY)
+  const scale = Math.min(scaleX, scaleY)
+
+  return {
+    x: center.x + deltaX * scale,
+    y: center.y + deltaY * scale,
+  }
+}
+
+function curveBetween(
+  start: AdapterGraphPoint,
+  end: AdapterGraphPoint,
+  bend = 0.5,
+): AdapterGraphCurve {
+  if (Math.abs(end.y - start.y) > Math.abs(end.x - start.x)) {
+    const controlY = start.y + (end.y - start.y) * bend
+    const control1 = { x: start.x, y: controlY }
+    const control2 = { x: end.x, y: controlY }
+
+    return {
+      control1,
+      control2,
+      path: `M ${start.x} ${start.y} C ${control1.x} ${control1.y}, ${control2.x} ${control2.y}, ${end.x} ${end.y}`,
+    }
+  }
+
+  const controlX = start.x + (end.x - start.x) * bend
+  const control1 = { x: controlX, y: start.y }
+  const control2 = { x: controlX, y: end.y }
+
+  return {
+    control1,
+    control2,
+    path: `M ${start.x} ${start.y} C ${control1.x} ${control1.y}, ${control2.x} ${control2.y}, ${end.x} ${end.y}`,
+  }
+}
+
+function adapterGraphStyle(node: AdapterGraphNode): React.CSSProperties {
+  return {
+    height: `${(node.height / adapterGraphHeight) * 100}%`,
+    left: `${(node.x / adapterGraphWidth) * 100}%`,
+    top: `${(node.y / adapterGraphHeight) * 100}%`,
+    width: `${(node.width / adapterGraphWidth) * 100}%`,
+  }
+}
+
+function adapterGraphPointStyle(point: AdapterGraphPoint): React.CSSProperties {
+  return {
+    left: `${(point.x / adapterGraphWidth) * 100}%`,
+    top: `${(point.y / adapterGraphHeight) * 100}%`,
+  }
+}
+
+function cubicPoint(
+  start: AdapterGraphPoint,
+  control1: AdapterGraphPoint,
+  control2: AdapterGraphPoint,
+  end: AdapterGraphPoint,
+  progress: number,
+): AdapterGraphPoint {
+  const inverse = 1 - progress
+
+  return {
+    x:
+      inverse ** 3 * start.x +
+      3 * inverse ** 2 * progress * control1.x +
+      3 * inverse * progress ** 2 * control2.x +
+      progress ** 3 * end.x,
+    y:
+      inverse ** 3 * start.y +
+      3 * inverse ** 2 * progress * control1.y +
+      3 * inverse * progress ** 2 * control2.y +
+      progress ** 3 * end.y,
+  }
+}
+
+function cubicAngle(
+  start: AdapterGraphPoint,
+  control1: AdapterGraphPoint,
+  control2: AdapterGraphPoint,
+  end: AdapterGraphPoint,
+  progress: number,
+): number {
+  const inverse = 1 - progress
+  const deltaX =
+    3 * inverse ** 2 * (control1.x - start.x) +
+    6 * inverse * progress * (control2.x - control1.x) +
+    3 * progress ** 2 * (end.x - control2.x)
+  const deltaY =
+    3 * inverse ** 2 * (control1.y - start.y) +
+    6 * inverse * progress * (control2.y - control1.y) +
+    3 * progress ** 2 * (end.y - control2.y)
+
+  return (Math.atan2(deltaY, deltaX) * 180) / Math.PI
+}
+
+function WhyTanStackSection() {
+  return (
+    <section className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto">
+      <div className="grid gap-8 border-y border-gray-200 py-10 dark:border-gray-800 lg:grid-cols-[minmax(0,0.72fr)_minmax(0,1.28fr)] lg:gap-12 lg:py-12">
+        <div className="max-w-xl lg:max-w-sm">
+          <div className="inline-flex items-center gap-2 text-xs font-black uppercase text-gray-500 dark:text-gray-400">
+            <span className="h-2 w-2 rounded-full bg-cyan-500 shadow-[0_0_0_4px_rgba(6,182,212,0.12)]" />
+            Product principles
+          </div>
+          <h3 className="mt-4 text-3xl font-black leading-tight sm:text-4xl">
+            Why TanStack?
+          </h3>
+          <p className="mt-4 text-base leading-7 text-gray-600 dark:text-gray-400">
+            Our libraries are built around real products and the developers
+            shipping them
+          </p>
+          <div
+            aria-hidden="true"
+            className="mt-7 hidden h-px bg-linear-to-r from-gray-300 via-gray-200 to-transparent dark:from-gray-700 dark:via-gray-800 lg:block"
+          />
+          <Button
+            as={Link}
+            to="/tenets"
+            variant="ghost"
+            color="gray"
+            className="mt-7 border-gray-300 bg-white/70 text-gray-950 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-950/70 dark:text-white dark:hover:bg-gray-900"
+          >
+            Read our product tenets
+            <ArrowRight className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <ol className="grid gap-3 sm:grid-cols-2">
+          {whyTanStackPrinciples.map((principle, index) => (
+            <li
+              key={principle.title}
+              className="group relative flex min-h-[19rem] flex-col overflow-hidden border border-gray-200 bg-white/70 p-5 shadow-sm transition-colors hover:bg-white dark:border-gray-800 dark:bg-gray-950/50 dark:hover:bg-gray-950 sm:p-6"
+            >
+              <div
+                aria-hidden="true"
+                className={twMerge(
+                  'absolute inset-x-0 top-0 h-1 bg-linear-to-r',
+                  principle.accentClassName,
+                )}
+              />
+              <div className="relative flex items-start justify-between gap-4">
                 <div>
-                  <div className={`relative inline-block`}>
-                    <h3 id="bytes" className="text-3xl font-bold scroll-mt-24">
-                      <a
-                        href="#bytes"
-                        className="hover:underline decoration-gray-400 dark:decoration-gray-600"
-                      >
-                        Subscribe to Bytes
-                      </a>
-                    </h3>
-                    <figure className={`absolute top-0 right-[-48px]`}>
-                      <img
-                        src={bytesImage}
-                        alt="Bytes Logo"
-                        loading="lazy"
-                        width={40}
-                        height={40}
-                      />
-                    </figure>
-                  </div>
-
-                  <h3 className={`text-lg mt-1`}>
-                    The Best JavaScript Newsletter
-                  </h3>
-                </div>
-                <div className={`grid grid-cols-3 mt-4 gap-2`}>
-                  <input
-                    disabled={bytesSignupMutation.status === 'pending'}
-                    className={`col-span-2 p-3 placeholder-gray-400 text-black bg-gray-200 rounded text-sm outline-none focus:outline-none w-full dark:(text-white bg-gray-700)`}
-                    name="email_address"
-                    placeholder="Your email address"
-                    type="text"
-                    required
-                  />
-                  <Button
-                    type="submit"
-                    className="bg-[#ED203D] border-[#ED203D] hover:bg-[#d41c35] text-white justify-center"
-                  >
-                    {bytesSignupMutation.status === 'pending'
-                      ? 'Loading ...'
-                      : 'Subscribe'}
-                  </Button>
-                </div>
-                {bytesSignupMutation.error ? (
-                  <p
-                    className={`text-sm text-red-500 font-semibold italic mt-2`}
-                  >
-                    Looks like something went wrong. Please try again.
-                  </p>
-                ) : (
-                  <p className={`text-sm opacity-30 font-semibold italic mt-2`}>
-                    Join over 100,000 devs
+                  <p className="font-mono text-[11px] font-bold uppercase text-gray-500 dark:text-gray-500">
+                    {principle.label}
                   </p>
+                  <h4 className="mt-4 max-w-64 text-xl font-black leading-tight text-gray-950 dark:text-white">
+                    {principle.title}
+                  </h4>
+                </div>
+                <span
+                  className={twMerge(
+                    'flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border',
+                    principle.iconClassName,
+                  )}
+                >
+                  <principle.Icon className="h-5 w-5" />
+                </span>
+              </div>
+              <p className="relative mt-4 max-w-[25rem] text-sm leading-6 text-gray-600 dark:text-gray-400">
+                {principle.body}
+              </p>
+              <PrincipleProof
+                proof={principle.proof}
+                accentClassName={principle.accentClassName}
+              />
+              <span
+                aria-hidden="true"
+                className="absolute bottom-3 right-5 font-mono text-5xl font-black leading-none text-gray-100 transition-colors group-hover:text-gray-200 dark:text-white/[0.04] dark:group-hover:text-white/[0.07]"
+              >
+                {String(index + 1).padStart(2, '0')}
+              </span>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  )
+}
+
+function FrameworkAdapterGraph({
+  accentClassName,
+}: {
+  accentClassName: string
+}) {
+  const [activeAdapterIndex, setActiveAdapterIndex] = React.useState(0)
+  const [flowProgress, setFlowProgress] = React.useState(0)
+
+  React.useEffect(() => {
+    const intervalId = window.setInterval(() => {
+      setActiveAdapterIndex(
+        (currentIndex) => (currentIndex + 1) % frameworkAdapterNodes.length,
+      )
+    }, 1150)
+
+    return () => window.clearInterval(intervalId)
+  }, [])
+
+  React.useEffect(() => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      return
+    }
+
+    let frameId = 0
+    let lastUpdate = 0
+    const duration = 1500
+
+    const update = (timestamp: number) => {
+      if (timestamp - lastUpdate > 33) {
+        setFlowProgress((timestamp % duration) / duration)
+        lastUpdate = timestamp
+      }
+
+      frameId = window.requestAnimationFrame(update)
+    }
+
+    frameId = window.requestAnimationFrame(update)
+
+    return () => window.cancelAnimationFrame(frameId)
+  }, [])
+
+  return (
+    <div
+      aria-hidden="true"
+      className="relative mt-auto h-32 pt-5 font-mono text-[10px] font-bold"
+    >
+      <div className="home-adapter-graph absolute inset-x-0 top-1 h-[7.5rem] overflow-visible">
+        {frameworkAdapterNodes.map((adapter, adapterIndex) => {
+          const isActive = activeAdapterIndex === adapterIndex
+
+          return (
+            <span
+              key={adapter.label}
+              data-adapter-label={adapter.label}
+              style={adapterGraphStyle(adapter)}
+              className={twMerge(
+                'absolute z-20 flex items-center justify-center rounded-md border px-2 text-center text-gray-600 shadow-sm backdrop-blur transition-colors duration-500 dark:text-gray-400',
+                isActive
+                  ? 'border-cyan-300 bg-cyan-50 text-cyan-800 shadow-cyan-500/15 dark:border-cyan-700 dark:bg-cyan-950/40 dark:text-cyan-200'
+                  : 'border-gray-200 bg-white/85 dark:border-gray-800 dark:bg-black/55',
+              )}
+            >
+              {adapter.label}
+            </span>
+          )
+        })}
+
+        <span
+          data-adapter-label={frameworkAdapterCore.label}
+          style={adapterGraphStyle(frameworkAdapterCore)}
+          className={twMerge(
+            'absolute z-30 flex items-center justify-center rounded-lg bg-linear-to-r text-center text-[11px] text-white shadow-lg shadow-cyan-500/15',
+            accentClassName,
+          )}
+        >
+          core
+        </span>
+
+        {frameworkAdapterConnections.map((connection, connectionIndex) => {
+          const progress = (flowProgress - connectionIndex * 0.13 + 1) % 1
+          const point = cubicPoint(
+            connection.start,
+            connection.control1,
+            connection.control2,
+            connection.end,
+            progress,
+          )
+          const angle = cubicAngle(
+            connection.start,
+            connection.control1,
+            connection.control2,
+            connection.end,
+            progress,
+          )
+
+          return (
+            <span
+              key={`flow-${connection.label}`}
+              data-connection-flow={connection.label}
+              style={{
+                ...adapterGraphPointStyle(point),
+                transform: `translate(-50%, -50%) rotate(${angle}deg)`,
+              }}
+              className={twMerge(
+                'home-adapter-graph-flow absolute z-50',
+                progress < 0.08 || progress > 0.92
+                  ? 'opacity-0'
+                  : 'opacity-100',
+              )}
+            />
+          )
+        })}
+
+        {frameworkAdapterConnections.map((connection, connectionIndex) => {
+          const isActive = activeAdapterIndex === connectionIndex
+
+          return (
+            <React.Fragment key={`ports-${connection.label}`}>
+              <span
+                data-connection-port={`${connection.label}-core`}
+                style={adapterGraphPointStyle(connection.start)}
+                className={twMerge(
+                  'absolute z-40 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-cyan-200 bg-cyan-400 shadow-[0_0_8px_rgba(34,211,238,0.55)] transition-opacity duration-500 dark:border-cyan-900',
+                  isActive ? 'opacity-100' : 'opacity-55',
+                )}
+              />
+              <span
+                data-connection-port={`${connection.label}-adapter`}
+                style={adapterGraphPointStyle(connection.end)}
+                className={twMerge(
+                  'absolute z-40 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-cyan-200 bg-cyan-400 shadow-[0_0_8px_rgba(34,211,238,0.55)] transition-opacity duration-500 dark:border-cyan-900',
+                  isActive ? 'opacity-100' : 'opacity-55',
                 )}
-              </form>
-            ) : (
-              <p>🎉 Thank you! Please confirm your email</p>
+              />
+            </React.Fragment>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function PrincipleProof({
+  proof,
+  accentClassName,
+}: {
+  proof: PrincipleProof
+  accentClassName: string
+}) {
+  if (proof === 'adapters') {
+    return <FrameworkAdapterGraph accentClassName={accentClassName} />
+  }
+
+  if (proof === 'types') {
+    return (
+      <div className="mt-auto pt-7 font-mono text-[11px] leading-5">
+        <div className="rounded-lg border border-gray-200 bg-white/70 p-3 text-gray-600 dark:border-gray-800 dark:bg-black/30 dark:text-gray-400">
+          {[
+            ['params.postId', 'string'],
+            ['query.data', 'Project[]'],
+            ['form.email', 'Field<string>'],
+          ].map(([name, value]) => (
+            <div key={name} className="flex items-center justify-between gap-3">
+              <span>{name}</span>
+              <span
+                className={twMerge(
+                  'bg-linear-to-r bg-clip-text font-black text-transparent',
+                  accentClassName,
+                )}
+              >
+                {value}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  if (proof === 'adoption') {
+    return (
+      <div className="mt-auto pt-7">
+        <div className="mb-2 flex items-center justify-between gap-3 font-mono text-[11px] font-bold uppercase text-gray-500 dark:text-gray-500">
+          <span>critical paths</span>
+          <span
+            className={twMerge(
+              'bg-linear-to-r bg-clip-text text-transparent',
+              accentClassName,
             )}
-          </Card>
+          >
+            used daily
+          </span>
+        </div>
+        <div className="grid grid-cols-2 gap-1.5 font-mono text-[11px] font-bold text-gray-600 dark:text-gray-400">
+          {['websites', 'AI tools', 'apps', 'services'].map((useCase) => (
+            <span
+              key={useCase}
+              className="flex items-center gap-1.5 rounded-md border border-gray-200 bg-white/70 px-2 py-1.5 dark:border-gray-800 dark:bg-black/30"
+            >
+              <span
+                className={twMerge(
+                  'h-1.5 w-1.5 rounded-full bg-linear-to-r',
+                  accentClassName,
+                )}
+              />
+              {useCase}
+            </span>
+          ))}
         </div>
-        <div className={`h-20`} />
-        <Footer />
       </div>
-    </>
+    )
+  }
+
+  return (
+    <div className="mt-auto pt-7">
+      <div className="flex flex-wrap gap-1.5 font-mono text-[11px] font-bold text-gray-600 dark:text-gray-400">
+        {['MIT', 'self-host', 'any host', 'no paid products'].map((item) => (
+          <span
+            key={item}
+            className="rounded-md border border-gray-200 bg-white/70 px-2 py-1.5 dark:border-gray-800 dark:bg-black/30"
+          >
+            {item}
+          </span>
+        ))}
+      </div>
+      <div
+        aria-hidden="true"
+        className={twMerge('mt-3 h-px bg-linear-to-r', accentClassName)}
+      />
+    </div>
   )
 }
+
+function StackCategoryCard({
+  groupId,
+  libraries,
+}: {
+  groupId: keyof typeof librariesByGroup
+  libraries: Library[]
+}) {
+  const groupName = librariesGroupNamesMap[groupId]
+  const categorySlug = groupToSlug[groupId]
+
+  return (
+    <Link
+      to="/stack/$category"
+      params={{ category: categorySlug }}
+      className="group flex flex-col rounded-xl border border-gray-200 bg-white/60 p-5 transition-all hover:-translate-y-0.5 hover:border-gray-300 hover:shadow-md dark:border-gray-800 dark:bg-gray-900/40 dark:hover:border-gray-700"
+    >
+      <h4 className="text-base font-bold group-hover:underline">{groupName}</h4>
+      <ol className="mt-4 space-y-2.5">
+        {libraries.map((lib, i) => (
+          <li key={lib.id} className="flex items-start gap-2.5">
+            <span
+              className={twMerge(
+                'flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-linear-to-br text-[10px] font-black text-white',
+                lib.colorFrom,
+                lib.colorTo,
+              )}
+            >
+              {i + 1}
+            </span>
+            <span className="min-w-0 flex-1 text-sm font-semibold leading-snug">
+              {lib.name.replace('TanStack ', '')}
+            </span>
+          </li>
+        ))}
+      </ol>
+      <span className="mt-4 inline-flex items-center gap-1 text-xs font-semibold text-gray-600 dark:text-gray-400">
+        Browse {groupName.toLowerCase()}
+        <ArrowRight className="w-3 h-3 transition-transform group-hover:translate-x-0.5" />
+      </span>
+    </Link>
+  )
+}
+
+function OpenSourceGradientText() {
+  return <span className="home-open-source-gradient">open-source</span>
+}
diff --git a/src/routes/intent/registry/$packageName.$skillName.tsx b/src/routes/intent/registry/$packageName.$skillName.tsx
new file mode 100644
index 000000000..cf72adc92
--- /dev/null
+++ b/src/routes/intent/registry/$packageName.$skillName.tsx
@@ -0,0 +1,427 @@
+import * as React from 'react'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { useSuspenseQuery, useQuery } from '@tanstack/react-query'
+import { seo } from '~/utils/seo'
+import {
+  intentPackageDetailQueryOptions,
+  intentVersionSkillsQueryOptions,
+  intentSingleSkillHistoryQueryOptions,
+} from '~/queries/intent'
+import {
+  getIntentSkillPage,
+  type SkillVersionEntry,
+} from '~/utils/intent.functions'
+import { Markdown } from '~/components/markdown/Markdown'
+import { CopyPageDropdown } from '~/components/CopyPageDropdown'
+import { SkillSparklineFallback } from '~/components/intent/SkillSparklineFallback'
+import {
+  SkillTypeBadge,
+  decodePkgName,
+  usePackageVersion,
+} from './$packageName'
+import { Route as PackageRoute } from './$packageName'
+
+const LazySkillSparkline = React.lazy(() =>
+  import('~/components/intent/SkillSparkline').then((m) => ({
+    default: m.SkillSparkline,
+  })),
+)
+
+function encodePathSegments(value: string) {
+  return value.split('/').map(encodeURIComponent).join('/')
+}
+
+function getSkillSourceUrl({
+  packageName,
+  skillPath,
+  version,
+}: {
+  packageName: string
+  skillPath: string
+  version: string
+}) {
+  return `https://app.unpkg.com/${encodePathSegments(
+    packageName,
+  )}@${encodeURIComponent(version)}/files/skills/${encodePathSegments(
+    skillPath,
+  )}/SKILL.md`
+}
+
+export const Route = createFileRoute(
+  '/intent/registry/$packageName/$skillName',
+)({
+  loaderDeps: ({ search }) => ({ version: search.version }),
+  loader: async ({ params, deps, context: { queryClient } }) => {
+    const name = decodePkgName(params.packageName)
+    const detail = queryClient.getQueryData(
+      intentPackageDetailQueryOptions(name).queryKey,
+    )
+    const latestVersion = detail?.versions[0]?.version ?? ''
+    const activeVersion = deps.version ?? latestVersion
+    if (activeVersion) {
+      await queryClient.ensureQueryData(
+        intentVersionSkillsQueryOptions({
+          packageName: name,
+          version: activeVersion,
+        }),
+      )
+
+      return getIntentSkillPage({
+        data: {
+          packageName: name,
+          skillName: params.skillName,
+          version: activeVersion,
+        },
+      })
+    }
+
+    return null
+  },
+  head: ({ params }) => {
+    const pkgName = decodePkgName(params.packageName)
+    return {
+      meta: seo({
+        title: `${params.skillName} | ${pkgName} | Agent Skills Registry | TanStack Intent`,
+        description: `Agent Skill "${params.skillName}" from ${pkgName}.`,
+      }),
+    }
+  },
+  component: SkillDetailPage,
+})
+
+function SkillDetailPage() {
+  const { packageName, skillName } = Route.useParams()
+  const skillPage = Route.useLoaderData()
+  const pkgName = decodePkgName(packageName)
+  const { activeVersion } = usePackageVersion()
+  const { tab: urlTab } = PackageRoute.useSearch()
+  const navigate = useNavigate({ from: Route.fullPath })
+
+  const tab = urlTab === 'history' ? 'history' : 'skill'
+  const setTab = React.useCallback(
+    (t: 'skill' | 'history') => {
+      void navigate({
+        search: (prev) => ({
+          ...prev,
+          tab: t === 'skill' ? undefined : t,
+        }),
+        replace: true,
+      })
+    },
+    [navigate],
+  )
+
+  const skillsQuery = useSuspenseQuery(
+    intentVersionSkillsQueryOptions({
+      packageName: pkgName,
+      version: activeVersion,
+    }),
+  )
+  const skills = skillsQuery.data?.skills ?? []
+  const skill = skills.find((s) => s.name === skillName)
+  if (!skill) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full min-h-48 text-center px-4">
+        <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
+          Skill not found
+        </h2>
+        <p className="mt-2 text-gray-500 dark:text-gray-400">
+          This skill doesn't exist for the selected version.
+        </p>
+        <Link
+          to="/intent/registry/$packageName"
+          params={{ packageName }}
+          className="mt-4 inline-block text-sky-600 dark:text-sky-400 hover:underline text-sm"
+        >
+          Back to {pkgName}
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {/* Skill meta */}
+      <div className="mb-4">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex items-center gap-2.5 flex-wrap min-w-0">
+            <h2 className="text-xl font-bold font-mono text-gray-900 dark:text-gray-50">
+              {skillName}
+            </h2>
+            {skill.type && <SkillTypeBadge type={skill.type} />}
+            {skill.framework && (
+              <span className="inline-block px-2 py-0.5 rounded-md text-xs bg-sky-50 dark:bg-sky-950/50 text-sky-700 dark:text-sky-300 border border-sky-100 dark:border-sky-900">
+                {skill.framework}
+              </span>
+            )}
+          </div>
+
+          <div className="flex items-center gap-3 shrink-0">
+            <span className="text-xs text-gray-400 dark:text-gray-500 tabular-nums">
+              {skill.lineCount} lines
+            </span>
+            {skill.skillPath && (
+              <a
+                href={getSkillSourceUrl({
+                  packageName: pkgName,
+                  skillPath: skill.skillPath,
+                  version: activeVersion,
+                })}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+              >
+                <svg
+                  className="w-3.5 h-3.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={1.75}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="16 18 22 12 16 6" />
+                  <polyline points="8 6 2 12 8 18" />
+                </svg>
+                Source
+              </a>
+            )}
+            <CopyPageDropdown label="Copy skill" />
+          </div>
+        </div>
+
+        {skill.description && (
+          <p className="mt-2 text-gray-600 dark:text-gray-400 max-w-2xl">
+            {skill.description}
+          </p>
+        )}
+      </div>
+
+      {/* Tabs */}
+      <div className="flex items-center gap-1 mb-5 border-b border-gray-200 dark:border-gray-800">
+        <button
+          onClick={() => setTab('skill')}
+          className={`px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
+            tab === 'skill'
+              ? 'border-sky-500 text-sky-600 dark:text-sky-400'
+              : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+          }`}
+        >
+          Skill
+        </button>
+        <button
+          onClick={() => setTab('history')}
+          className={`px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
+            tab === 'history'
+              ? 'border-sky-500 text-sky-600 dark:text-sky-400'
+              : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+          }`}
+        >
+          History
+        </button>
+      </div>
+
+      {tab === 'skill' ? (
+        <>
+          {/* Requires */}
+          {skill.requires && skill.requires.length > 0 && (
+            <div className="mb-4 flex items-center gap-2 flex-wrap">
+              <span className="text-xs text-gray-400 dark:text-gray-500 uppercase tracking-wider font-medium">
+                Requires
+              </span>
+              {skill.requires.map((req) => (
+                <Link
+                  key={req}
+                  to="/intent/registry/$packageName/$skillName"
+                  params={{ packageName, skillName: req }}
+                  className="inline-block px-2 py-0.5 rounded-md text-xs font-mono bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
+                >
+                  {req}
+                </Link>
+              ))}
+            </div>
+          )}
+
+          {/* Skill content */}
+          <div className="rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden p-6">
+            <div className="prose prose-gray dark:prose-invert max-w-none [font-size:16px] styled-markdown-content">
+              {skillPage?.content ? (
+                <Markdown content={skillPage.content} />
+              ) : null}
+            </div>
+          </div>
+        </>
+      ) : (
+        <SkillVersionHistory
+          packageName={pkgName}
+          skillName={skillName}
+          activeVersion={activeVersion}
+        />
+      )}
+    </>
+  )
+}
+
+function SkillVersionHistory({
+  packageName,
+  skillName,
+  activeVersion,
+}: {
+  readonly packageName: string
+  readonly skillName: string
+  readonly activeVersion: string
+}) {
+  const historyQuery = useQuery(
+    intentSingleSkillHistoryQueryOptions({ packageName, skillName }),
+  )
+  const entries = historyQuery.data
+
+  const significantEntries = React.useMemo(
+    () => entries?.filter((e) => e.status !== 'unchanged'),
+    [entries],
+  )
+
+  const sparklineHistory = React.useMemo(() => {
+    if (!entries || entries.length < 2) return null
+    return entries
+      .slice()
+      .reverse()
+      .map((e) => ({
+        version: e.version,
+        total: e.skill?.lineCount ?? 0,
+        added: e.status === 'added' ? 1 : 0,
+        removed: e.status === 'removed' ? 1 : 0,
+        modified: e.status === 'modified' ? 1 : 0,
+      }))
+  }, [entries])
+
+  if (historyQuery.isLoading) {
+    return (
+      <div className="space-y-3">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div
+            key={i}
+            className="h-10 rounded-xl bg-gray-50 dark:bg-gray-900/30 animate-pulse"
+          />
+        ))}
+      </div>
+    )
+  }
+
+  if (!significantEntries || significantEntries.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-48 text-center px-4">
+        <p className="text-gray-400 dark:text-gray-500 text-sm">
+          No changes recorded for this skill.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      {sparklineHistory && (
+        <div className="mb-5 rounded-xl border border-gray-200 dark:border-gray-800 p-3">
+          <React.Suspense fallback={<SkillSparklineFallback height={48} />}>
+            <LazySkillSparkline history={sparklineHistory} height={48} />
+          </React.Suspense>
+        </div>
+      )}
+
+      <div className="relative">
+        <div className="absolute left-[11px] top-2 bottom-2 w-px bg-gray-200 dark:bg-gray-800" />
+        <div className="space-y-0">
+          {significantEntries.map((entry) => (
+            <SkillVersionRow
+              key={entry.version}
+              entry={entry}
+              isActive={entry.version === activeVersion}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SkillVersionRow({
+  entry,
+  isActive,
+}: {
+  readonly entry: SkillVersionEntry
+  readonly isActive: boolean
+}) {
+  const statusConfig = {
+    added: {
+      label: 'Added',
+      color: 'text-emerald-600 dark:text-emerald-400',
+      dot: 'border-emerald-500 bg-emerald-500',
+    },
+    modified: {
+      label: 'Modified',
+      color: 'text-amber-600 dark:text-amber-400',
+      dot: 'border-amber-500 bg-amber-500',
+    },
+    removed: {
+      label: 'Removed',
+      color: 'text-red-500 dark:text-red-400',
+      dot: 'border-red-500 bg-red-500',
+    },
+    unchanged: {
+      label: '',
+      color: 'text-gray-400',
+      dot: 'border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950',
+    },
+  }[entry.status]
+
+  return (
+    <div className="relative pl-8 pb-3">
+      <div
+        className={`absolute left-[7px] top-[5px] w-[9px] h-[9px] rounded-full border-2 ${
+          isActive ? 'border-sky-500 bg-sky-500' : statusConfig.dot
+        }`}
+      />
+
+      <div className="flex items-center gap-3">
+        <span
+          className={`font-mono text-sm font-semibold ${
+            isActive
+              ? 'text-sky-600 dark:text-sky-400'
+              : 'text-gray-900 dark:text-gray-100'
+          }`}
+        >
+          v{entry.version}
+        </span>
+        <span className={`text-xs font-medium ${statusConfig.color}`}>
+          {statusConfig.label}
+        </span>
+        {entry.skill && (
+          <span className="text-xs text-gray-400 dark:text-gray-500 tabular-nums">
+            {entry.skill.lineCount}L
+          </span>
+        )}
+        {entry.lineCountDelta != null && entry.lineCountDelta !== 0 && (
+          <span
+            className={`text-xs tabular-nums ${
+              entry.lineCountDelta > 0
+                ? 'text-emerald-600 dark:text-emerald-400'
+                : 'text-red-500 dark:text-red-400'
+            }`}
+          >
+            ({entry.lineCountDelta > 0 ? '+' : ''}
+            {entry.lineCountDelta})
+          </span>
+        )}
+        {entry.publishedAt && (
+          <span className="text-xs text-gray-400 dark:text-gray-500 ml-auto">
+            {new Date(entry.publishedAt).toLocaleDateString('en-US', {
+              month: 'short',
+              day: 'numeric',
+              year: 'numeric',
+            })}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/routes/intent/registry/$packageName.index.tsx b/src/routes/intent/registry/$packageName.index.tsx
new file mode 100644
index 000000000..bf82bdd65
--- /dev/null
+++ b/src/routes/intent/registry/$packageName.index.tsx
@@ -0,0 +1,669 @@
+import * as React from 'react'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { useSuspenseQuery, useQuery } from '@tanstack/react-query'
+import {
+  intentPackageDetailQueryOptions,
+  intentVersionSkillsQueryOptions,
+  intentPackageChangelogQueryOptions,
+} from '~/queries/intent'
+import type { ChangelogEntry } from '~/utils/intent.functions'
+import { Collapsible, CollapsibleContent } from '~/components/Collapsible'
+const LazySkillDiffViewer = React.lazy(() =>
+  import('~/components/intent/SkillDiffViewer').then((m) => ({
+    default: m.SkillDiffViewer,
+  })),
+)
+import { SkillDependencyGraph } from '~/components/intent/SkillDependencyGraph'
+import {
+  decodePkgName,
+  usePackageVersion,
+  SkillTypeBadge,
+} from './$packageName'
+import { Route as PackageRoute } from './$packageName'
+
+export const Route = createFileRoute('/intent/registry/$packageName/')({
+  loaderDeps: ({ search }) => ({ version: search.version }),
+  loader: async ({ params, deps, context: { queryClient } }) => {
+    const name = decodePkgName(params.packageName)
+    const detail = queryClient.getQueryData(
+      intentPackageDetailQueryOptions(name).queryKey,
+    )
+    const latestVersion = detail?.versions[0]?.version ?? ''
+    const activeVersion = deps.version ?? latestVersion
+    if (activeVersion) {
+      await queryClient.ensureQueryData(
+        intentVersionSkillsQueryOptions({
+          packageName: name,
+          version: activeVersion,
+        }),
+      )
+    }
+  },
+  component: PackageIndexPage,
+})
+
+function PackageIndexPage() {
+  const { packageName } = Route.useParams()
+  const pkgName = decodePkgName(packageName)
+  const { activeVersion } = usePackageVersion()
+  const {
+    tab: urlTab,
+    expanded: urlExpanded,
+    expandedSkills: urlExpandedSkills,
+  } = PackageRoute.useSearch()
+  const navigate = useNavigate({ from: PackageRoute.fullPath })
+
+  const tab = urlTab === 'history' ? 'history' : 'skills'
+  const setTab = React.useCallback(
+    (t: 'skills' | 'history') => {
+      void navigate({
+        search: (prev) => ({
+          ...prev,
+          tab: t === 'skills' ? undefined : t,
+        }),
+        replace: true,
+      })
+    },
+    [navigate],
+  )
+
+  const skillsQuery = useSuspenseQuery(
+    intentVersionSkillsQueryOptions({
+      packageName: pkgName,
+      version: activeVersion,
+    }),
+  )
+  const skills = skillsQuery.data?.skills ?? []
+
+  const changelogQuery = useQuery(intentPackageChangelogQueryOptions(pkgName))
+
+  const expandedSkillSet = React.useMemo(
+    () => new Set(urlExpandedSkills ?? []),
+    [urlExpandedSkills],
+  )
+  const toggleSkillExpanded = React.useCallback(
+    (name: string) => {
+      const next = new Set(expandedSkillSet)
+      if (next.has(name)) {
+        next.delete(name)
+      } else {
+        next.add(name)
+      }
+      const arr = Array.from(next)
+      void navigate({
+        search: (prev) => ({
+          ...prev,
+          expandedSkills: arr.length > 0 ? arr : undefined,
+        }),
+        replace: true,
+      })
+    },
+    [expandedSkillSet, navigate],
+  )
+
+  // Build a map of skill name -> 'added' | 'modified' from the changelog entry for the active version
+  const skillChangeMap = React.useMemo(() => {
+    const map = new Map<string, 'added' | 'modified'>()
+    const entry = changelogQuery.data?.find((e) => e.version === activeVersion)
+    if (!entry?.diff) return map
+    for (const s of entry.diff.added) map.set(s.name, 'added')
+    for (const s of entry.diff.modified) map.set(s.to.name, 'modified')
+    return map
+  }, [changelogQuery.data, activeVersion])
+
+  return (
+    <div>
+      <div className="flex items-center gap-1 mb-5 border-b border-gray-200 dark:border-gray-800">
+        <button
+          onClick={() => setTab('skills')}
+          className={`px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
+            tab === 'skills'
+              ? 'border-sky-500 text-sky-600 dark:text-sky-400'
+              : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+          }`}
+        >
+          Skills
+          <span className="ml-1.5 text-xs tabular-nums text-gray-400 dark:text-gray-500">
+            {skills.length}
+          </span>
+        </button>
+        <button
+          onClick={() => setTab('history')}
+          className={`px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
+            tab === 'history'
+              ? 'border-sky-500 text-sky-600 dark:text-sky-400'
+              : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+          }`}
+        >
+          History
+          {changelogQuery.data && (
+            <span className="ml-1.5 text-xs tabular-nums text-gray-400 dark:text-gray-500">
+              {changelogQuery.data.length}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {tab === 'skills' ? (
+        <>
+          {skills.some((s) => s.requires && s.requires.length > 0) && (
+            <div className="mb-5">
+              <SkillDependencyGraph skills={skills} packageName={packageName} />
+            </div>
+          )}
+          <SkillsList
+            skills={skills}
+            packageName={packageName}
+            expandedSkills={expandedSkillSet}
+            toggleSkillExpanded={toggleSkillExpanded}
+            skillChangeMap={skillChangeMap}
+          />
+        </>
+      ) : (
+        <ChangelogView
+          entries={changelogQuery.data}
+          isLoading={changelogQuery.isLoading}
+          packageName={packageName}
+          activeVersion={activeVersion}
+          expandedVersions={urlExpanded}
+          onExpandedChange={(versions) => {
+            void navigate({
+              search: (prev) => ({
+                ...prev,
+                expanded: versions.length > 0 ? versions : undefined,
+              }),
+              replace: true,
+            })
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+function SkillsList({
+  skills,
+  packageName,
+  expandedSkills,
+  toggleSkillExpanded,
+  skillChangeMap,
+}: {
+  readonly skills: Array<{
+    id: number
+    name: string
+    description: string | null
+    type: string | null
+    framework: string | null
+    lineCount: number
+  }>
+  readonly packageName: string
+  readonly expandedSkills: Set<string>
+  readonly toggleSkillExpanded: (name: string) => void
+  readonly skillChangeMap: Map<string, 'added' | 'modified'>
+}) {
+  if (skills.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full min-h-48 text-center px-4">
+        <p className="text-gray-400 dark:text-gray-500 text-sm">
+          No skills found for this version.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      {skills.map((skill) => {
+        const isExpanded = expandedSkills.has(skill.name)
+        const changeStatus = skillChangeMap.get(skill.name)
+        return (
+          <div
+            key={skill.id}
+            className="rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden"
+          >
+            <div className="flex items-start gap-3 px-4 py-3">
+              <button
+                onClick={() => toggleSkillExpanded(skill.name)}
+                className="mt-0.5 shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+              >
+                <svg
+                  className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="m9 18 6-6-6-6"
+                  />
+                </svg>
+              </button>
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <Link
+                    to="/intent/registry/$packageName/$skillName"
+                    params={{ packageName, skillName: skill.name }}
+                    className="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100 hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
+                  >
+                    {skill.name}
+                  </Link>
+                  {skill.type && <SkillTypeBadge type={skill.type} />}
+                  {skill.framework && (
+                    <span className="inline-block px-2 py-0.5 rounded-md text-xs bg-sky-50 dark:bg-sky-950/50 text-sky-700 dark:text-sky-300 border border-sky-100 dark:border-sky-900">
+                      {skill.framework}
+                    </span>
+                  )}
+                  {changeStatus === 'added' && (
+                    <span className="inline-block px-1.5 py-0.5 rounded text-[10px] leading-tight font-medium bg-emerald-50 dark:bg-emerald-950/30 text-emerald-700 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-900">
+                      added
+                    </span>
+                  )}
+                  {changeStatus === 'modified' && (
+                    <span className="inline-block px-1.5 py-0.5 rounded text-[10px] leading-tight font-medium bg-amber-50 dark:bg-amber-950/30 text-amber-700 dark:text-amber-400 border border-amber-100 dark:border-amber-900">
+                      modified
+                    </span>
+                  )}
+                </div>
+                {skill.description && (
+                  <button
+                    onClick={() => toggleSkillExpanded(skill.name)}
+                    className={`mt-1 text-sm text-gray-500 dark:text-gray-400 text-left w-full ${isExpanded ? '' : 'line-clamp-1'}`}
+                  >
+                    {skill.description}
+                  </button>
+                )}
+              </div>
+
+              <span className="shrink-0 text-xs text-gray-400 dark:text-gray-500 tabular-nums mt-0.5">
+                {skill.lineCount} lines
+              </span>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function ChangelogView({
+  entries,
+  isLoading,
+  packageName,
+  activeVersion,
+  expandedVersions: urlExpanded,
+  onExpandedChange,
+}: {
+  readonly entries: Array<ChangelogEntry> | undefined
+  readonly isLoading: boolean
+  readonly packageName: string
+  readonly activeVersion: string
+  readonly expandedVersions: Array<string> | undefined
+  readonly onExpandedChange: (versions: Array<string>) => void
+}) {
+  // Default: expand the latest version (first entry) if nothing in URL
+  const expandedSet = React.useMemo(() => {
+    if (urlExpanded) return new Set(urlExpanded)
+    if (entries && entries.length > 0) return new Set([entries[0].version])
+    return new Set<string>()
+  }, [urlExpanded, entries])
+
+  const toggleVersion = React.useCallback(
+    (version: string) => {
+      const next = new Set(expandedSet)
+      if (next.has(version)) {
+        next.delete(version)
+      } else {
+        next.add(version)
+      }
+      onExpandedChange(Array.from(next))
+    },
+    [expandedSet, onExpandedChange],
+  )
+
+  // Map each version to its predecessor (for diff viewer)
+  const prevVersionMap = React.useMemo(() => {
+    const map = new Map<string, string>()
+    if (!entries) return map
+    for (let i = 0; i < entries.length - 1; i++) {
+      map.set(entries[i].version, entries[i + 1].version)
+    }
+    return map
+  }, [entries])
+
+  // Group entries: consecutive unchanged versions collapse into a single "gap" row
+  type ChangelogGroup =
+    | { kind: 'entry'; entry: ChangelogEntry }
+    | { kind: 'gap'; count: number; fromVersion: string; toVersion: string }
+
+  const groups = React.useMemo((): Array<ChangelogGroup> => {
+    if (!entries || entries.length === 0) return []
+    const result: Array<ChangelogGroup> = []
+    let unchangedRun: Array<ChangelogEntry> = []
+
+    const flushRun = () => {
+      if (unchangedRun.length === 0) return
+      result.push({
+        kind: 'gap',
+        count: unchangedRun.length,
+        fromVersion: unchangedRun[unchangedRun.length - 1].version,
+        toVersion: unchangedRun[0].version,
+      })
+      unchangedRun = []
+    }
+
+    for (const entry of entries) {
+      const hasChanges =
+        entry.diff &&
+        (entry.diff.added.length > 0 ||
+          entry.diff.removed.length > 0 ||
+          entry.diff.modified.length > 0)
+      if (!hasChanges) {
+        unchangedRun.push(entry)
+      } else {
+        flushRun()
+        result.push({ kind: 'entry', entry })
+      }
+    }
+    flushRun()
+    return result
+  }, [entries])
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div
+            key={i}
+            className="h-14 rounded-xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/30 animate-pulse"
+          />
+        ))}
+      </div>
+    )
+  }
+
+  if (!entries || entries.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-48 text-center px-4">
+        <p className="text-gray-400 dark:text-gray-500 text-sm">
+          No history available.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative">
+      {/* Timeline line */}
+      <div className="absolute left-[11px] top-2 bottom-2 w-px bg-gray-200 dark:bg-gray-800" />
+
+      <div className="space-y-0">
+        {groups.map((group) => {
+          if (group.kind === 'gap') {
+            return (
+              <div
+                key={`gap-${group.fromVersion}`}
+                className="relative pl-8 pb-4"
+              >
+                <div className="absolute left-[9px] top-[7px] w-[5px] h-[5px] rounded-full bg-gray-300 dark:bg-gray-700" />
+                <span className="text-xs text-gray-400 dark:text-gray-500 italic">
+                  {group.count} versions (no changes)
+                </span>
+              </div>
+            )
+          }
+
+          const entry = group.entry
+          const hasChanges =
+            entry.diff &&
+            (entry.diff.added.length > 0 ||
+              entry.diff.removed.length > 0 ||
+              entry.diff.modified.length > 0)
+          const isActive = entry.version === activeVersion
+          const isExpanded = expandedSet.has(entry.version)
+
+          return (
+            <div key={entry.version} className="relative pl-8 pb-4">
+              {/* Timeline dot */}
+              <div
+                className={`absolute left-[7px] top-[7px] w-[9px] h-[9px] rounded-full border-2 ${
+                  isActive
+                    ? 'border-sky-500 bg-sky-500'
+                    : hasChanges
+                      ? 'border-sky-400 dark:border-sky-600 bg-white dark:bg-gray-950'
+                      : 'border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950'
+                }`}
+              />
+
+              <button
+                onClick={() => toggleVersion(entry.version)}
+                className="w-full text-left group"
+              >
+                <div className="flex items-center gap-3">
+                  <span
+                    className={`font-mono text-sm font-semibold ${
+                      isActive
+                        ? 'text-sky-600 dark:text-sky-400'
+                        : 'text-gray-900 dark:text-gray-100'
+                    }`}
+                  >
+                    v{entry.version}
+                  </span>
+                  <span className="text-xs text-gray-400 dark:text-gray-500 tabular-nums">
+                    {entry.total} {entry.total === 1 ? 'skill' : 'skills'}
+                  </span>
+                  {entry.publishedAt && (
+                    <span className="text-xs text-gray-400 dark:text-gray-500">
+                      {new Date(entry.publishedAt).toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric',
+                      })}
+                    </span>
+                  )}
+                  {hasChanges && (
+                    <div className="flex items-center gap-1.5 text-xs tabular-nums">
+                      {entry.diff!.added.length > 0 && (
+                        <span className="text-emerald-600 dark:text-emerald-400">
+                          +{entry.diff!.added.length}
+                        </span>
+                      )}
+                      {entry.diff!.removed.length > 0 && (
+                        <span className="text-red-500 dark:text-red-400">
+                          -{entry.diff!.removed.length}
+                        </span>
+                      )}
+                      {entry.diff!.modified.length > 0 && (
+                        <span className="text-amber-600 dark:text-amber-400">
+                          ~{entry.diff!.modified.length}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                  {hasChanges && (
+                    <svg
+                      className={`w-3.5 h-3.5 text-gray-400 transition-transform ml-auto ${isExpanded ? 'rotate-90' : ''}`}
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="m9 18 6-6-6-6"
+                      />
+                    </svg>
+                  )}
+                </div>
+              </button>
+
+              {entry.diff && hasChanges && (
+                <Collapsible open={isExpanded}>
+                  <CollapsibleContent>
+                    <div className="mt-2 ml-1 space-y-1">
+                      {entry.diff.added.map((skill) => (
+                        <ChangelogSkillRow
+                          key={skill.name}
+                          status="added"
+                          name={skill.name}
+                          type={skill.type}
+                          framework={skill.framework}
+                          lineCount={skill.lineCount}
+                          packageName={packageName}
+                        />
+                      ))}
+                      {entry.diff.modified.map(({ from, to }) => (
+                        <ChangelogSkillRow
+                          key={to.name}
+                          status="modified"
+                          name={to.name}
+                          type={to.type}
+                          framework={to.framework}
+                          lineCount={to.lineCount}
+                          lineCountDelta={to.lineCount - from.lineCount}
+                          packageName={packageName}
+                          diffVersions={{
+                            packageName: decodePkgName(packageName),
+                            fromVersion: prevVersionMap.get(entry.version)!,
+                            toVersion: entry.version,
+                          }}
+                        />
+                      ))}
+                      {entry.diff.removed.map((skill) => (
+                        <ChangelogSkillRow
+                          key={skill.name}
+                          status="removed"
+                          name={skill.name}
+                          type={skill.type}
+                          framework={skill.framework}
+                          lineCount={skill.lineCount}
+                          packageName={packageName}
+                        />
+                      ))}
+                    </div>
+                  </CollapsibleContent>
+                </Collapsible>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function ChangelogSkillRow({
+  status,
+  name,
+  type,
+  framework,
+  lineCount,
+  lineCountDelta,
+  packageName,
+  diffVersions,
+}: {
+  readonly status: 'added' | 'modified' | 'removed'
+  readonly name: string
+  readonly type: string | null
+  readonly framework: string | null
+  readonly lineCount: number
+  readonly lineCountDelta?: number
+  readonly packageName: string
+  readonly diffVersions?: {
+    packageName: string
+    fromVersion: string
+    toVersion: string
+  }
+}) {
+  const [showDiff, setShowDiff] = React.useState(false)
+
+  const statusConfig = {
+    added: {
+      prefix: '+',
+      color: 'text-emerald-600 dark:text-emerald-400',
+      bg: 'bg-emerald-50 dark:bg-emerald-950/20',
+    },
+    modified: {
+      prefix: '~',
+      color: 'text-amber-600 dark:text-amber-400',
+      bg: 'bg-amber-50 dark:bg-amber-950/20',
+    },
+    removed: {
+      prefix: '-',
+      color: 'text-red-500 dark:text-red-400',
+      bg: 'bg-red-50 dark:bg-red-950/20',
+    },
+  }[status]
+
+  return (
+    <div className={`rounded-lg ${statusConfig.bg}`}>
+      <div className="flex items-center gap-2 px-3 py-1.5">
+        <span
+          className={`font-mono text-xs font-bold w-3 ${statusConfig.color}`}
+        >
+          {statusConfig.prefix}
+        </span>
+        <Link
+          to="/intent/registry/$packageName/$skillName"
+          params={{ packageName, skillName: name }}
+          className="font-mono text-sm text-gray-900 dark:text-gray-100 hover:text-sky-600 dark:hover:text-sky-400 transition-colors truncate"
+        >
+          {name}
+        </Link>
+        {type && <SkillTypeBadge type={type} />}
+        {framework && (
+          <span className="inline-block px-1.5 py-0.5 rounded text-[10px] bg-sky-50 dark:bg-sky-950/50 text-sky-700 dark:text-sky-300 border border-sky-100 dark:border-sky-900">
+            {framework}
+          </span>
+        )}
+        {diffVersions && (
+          <button
+            onClick={() => setShowDiff((d) => !d)}
+            className="text-[10px] font-medium text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300 transition-colors"
+          >
+            {showDiff ? 'hide diff' : 'diff'}
+          </button>
+        )}
+        <span className="ml-auto shrink-0 text-xs text-gray-400 dark:text-gray-500 tabular-nums">
+          {lineCount}L
+          {lineCountDelta != null && lineCountDelta !== 0 && (
+            <span
+              className={
+                lineCountDelta > 0
+                  ? 'text-emerald-600 dark:text-emerald-400'
+                  : 'text-red-500 dark:text-red-400'
+              }
+            >
+              {' '}
+              ({lineCountDelta > 0 ? '+' : ''}
+              {lineCountDelta})
+            </span>
+          )}
+        </span>
+      </div>
+      {diffVersions && (
+        <Collapsible open={showDiff}>
+          <CollapsibleContent>
+            <div className="px-3 pb-2">
+              <React.Suspense
+                fallback={
+                  <div className="h-24 rounded-lg bg-gray-50 dark:bg-gray-900/30 animate-pulse" />
+                }
+              >
+                <LazySkillDiffViewer
+                  packageName={diffVersions.packageName}
+                  skillName={name}
+                  fromVersion={diffVersions.fromVersion}
+                  toVersion={diffVersions.toVersion}
+                />
+              </React.Suspense>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+    </div>
+  )
+}
diff --git a/src/routes/intent/registry/$packageName.tsx b/src/routes/intent/registry/$packageName.tsx
new file mode 100644
index 000000000..dcf24c7c7
--- /dev/null
+++ b/src/routes/intent/registry/$packageName.tsx
@@ -0,0 +1,627 @@
+import * as React from 'react'
+import {
+  createFileRoute,
+  Link,
+  Outlet,
+  useNavigate,
+  useParams,
+} from '@tanstack/react-router'
+import { useSuspenseQuery, useQuery } from '@tanstack/react-query'
+import * as v from 'valibot'
+import { Copy, Check } from 'lucide-react'
+import { Collapsible, CollapsibleContent } from '~/components/Collapsible'
+import { seo } from '~/utils/seo'
+import {
+  intentPackageDetailQueryOptions,
+  intentVersionSkillsQueryOptions,
+  intentSkillHistoryQueryOptions,
+} from '~/queries/intent'
+import type { IntentPackageDetail } from '~/utils/intent.functions'
+import { useToast } from '~/components/ToastProvider'
+import { SkillSparklineFallback } from '~/components/intent/SkillSparklineFallback'
+import {
+  decodePackageNameSlug,
+  encodePackageNameSlug,
+} from '~/utils/route-encoding'
+import { copyTextToClipboard, useTemporaryFlag } from '~/utils/browser-effects'
+
+const LazySkillSparkline = React.lazy(() =>
+  import('~/components/intent/SkillSparkline').then((m) => ({
+    default: m.SkillSparkline,
+  })),
+)
+
+export function decodePkgName(slug: string): string {
+  return decodePackageNameSlug(slug)
+}
+
+export function encodePkgName(packageName: string): string {
+  return encodePackageNameSlug(packageName)
+}
+
+// Context for sharing version + package metadata between layout and child routes
+type PackageLayoutContextValue = {
+  activeVersion: string
+  latestVersion: string
+  setVersion: (v: string) => void
+  repositoryUrl: string | undefined
+}
+
+export const PackageLayoutContext =
+  React.createContext<PackageLayoutContextValue | null>(null)
+
+export function usePackageVersion() {
+  const ctx = React.useContext(PackageLayoutContext)
+  if (!ctx)
+    throw new Error('usePackageVersion must be used within PackageLayout')
+  return ctx
+}
+
+const searchSchema = v.object({
+  version: v.fallback(v.optional(v.string()), undefined),
+  tab: v.fallback(v.optional(v.picklist(['skills', 'history'])), undefined),
+  expanded: v.fallback(v.optional(v.array(v.string())), undefined),
+  expandedSkills: v.fallback(v.optional(v.array(v.string())), undefined),
+})
+
+export const Route = createFileRoute('/intent/registry/$packageName')({
+  validateSearch: (search) => v.parse(searchSchema, search),
+  loader: async ({ params, context: { queryClient } }) => {
+    const name = decodePkgName(params.packageName)
+    await queryClient.ensureQueryData(intentPackageDetailQueryOptions(name))
+  },
+  head: ({ params }) => {
+    const name = decodePkgName(params.packageName)
+    return {
+      meta: seo({
+        title: `${name} | Agent Skills Registry | TanStack Intent`,
+        description: `Browse Agent Skills shipped with ${name}.`,
+      }),
+    }
+  },
+  component: PackageLayout,
+})
+
+function PackageLayout() {
+  const { packageName } = Route.useParams()
+  const name = decodePkgName(packageName)
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-gray-950">
+      <React.Suspense fallback={<PackageDetailSkeleton name={name} />}>
+        <PackageLayoutContent name={name} />
+      </React.Suspense>
+    </div>
+  )
+}
+
+function PackageLayoutContent({ name }: { readonly name: string }) {
+  const { version: searchVersion } = Route.useSearch()
+  const navigate = useNavigate({ from: Route.fullPath })
+  const detailQuery = useSuspenseQuery(intentPackageDetailQueryOptions(name))
+  const detail = detailQuery.data
+
+  const latestVersion = detail?.versions[0]?.version ?? ''
+  const activeVersion = searchVersion ?? latestVersion
+
+  const setVersion = React.useCallback(
+    (v: string) => {
+      void navigate({
+        search: (prev) => ({
+          ...prev,
+          version: v === latestVersion ? undefined : v,
+        }),
+        replace: true,
+      })
+    },
+    [navigate, latestVersion],
+  )
+
+  if (!detail) return <PackageNotFound />
+
+  return (
+    <PackageLayoutContext.Provider
+      value={{
+        activeVersion,
+        latestVersion,
+        setVersion,
+        repositoryUrl: detail.repositoryUrl ?? undefined,
+      }}
+    >
+      <PackageLayoutInner
+        name={name}
+        detail={detail}
+        activeVersion={activeVersion}
+        setVersion={setVersion}
+      />
+    </PackageLayoutContext.Provider>
+  )
+}
+
+function PackageLayoutInner({
+  name,
+  detail,
+  activeVersion,
+  setVersion,
+}: {
+  readonly name: string
+  readonly detail: IntentPackageDetail
+  readonly activeVersion: string
+  readonly setVersion: (v: string) => void
+}) {
+  const { packageName, skillName } = useParams({ strict: false }) as {
+    packageName: string
+    skillName?: string
+  }
+
+  const skillsQuery = useSuspenseQuery(
+    intentVersionSkillsQueryOptions({
+      packageName: name,
+      version: activeVersion,
+    }),
+  )
+  const skills = skillsQuery.data?.skills ?? []
+
+  const packageNames = React.useMemo(() => [name], [name])
+  const skillHistoryQuery = useQuery(
+    intentSkillHistoryQueryOptions(packageNames),
+  )
+  const skillHistory = skillHistoryQuery.data?.[name]
+
+  return (
+    <>
+      {/* Breadcrumb + header */}
+      <div className="border-b border-gray-200 dark:border-gray-800">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-6">
+          <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
+            <Link
+              to="/$libraryId/$version"
+              params={{ libraryId: 'intent', version: 'latest' }}
+              className="hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
+            >
+              TanStack Intent
+            </Link>
+            <span>/</span>
+            <Link
+              to="/intent/registry"
+              className="hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
+            >
+              Registry
+            </Link>
+            <span>/</span>
+            <Link
+              to="/intent/registry/$packageName"
+              params={{ packageName: encodePkgName(name) }}
+              className="font-mono text-gray-900 dark:text-gray-100 hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
+            >
+              {name}
+            </Link>
+          </div>
+
+          {/* Top row: name + sparkline + version + copy */}
+          <div className="flex items-center gap-3 flex-wrap">
+            <h1 className="text-2xl font-bold font-mono text-gray-900 dark:text-gray-50 mr-auto">
+              {name}
+            </h1>
+
+            <div className="w-24 shrink-0">
+              {skillHistory && skillHistory.length > 0 ? (
+                <React.Suspense
+                  fallback={<SkillSparklineFallback height={24} />}
+                >
+                  <LazySkillSparkline history={skillHistory} height={24} />
+                </React.Suspense>
+              ) : skillHistoryQuery.isLoading ? (
+                <SkillSparklineFallback height={24} />
+              ) : null}
+            </div>
+
+            {detail.versions.length > 0 && (
+              <select
+                id="pkg-version-select"
+                value={activeVersion}
+                onChange={(e) => setVersion(e.target.value)}
+                className="px-2.5 py-1 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-sky-500 max-w-[12rem]"
+              >
+                {detail.versions.map((v, i) => (
+                  <option key={v.version} value={v.version}>
+                    {v.version}
+                    {i === 0 ? ' (latest)' : ''} — {v.skillCount}{' '}
+                    {v.skillCount === 1 ? 'skill' : 'skills'}
+                  </option>
+                ))}
+              </select>
+            )}
+
+            <CopyInstallPromptButton name={name} />
+          </div>
+
+          {/* Bottom row: description + demoted external links */}
+          <div className="flex items-end justify-between gap-4 mt-1.5">
+            {detail.description ? (
+              <p className="text-gray-600 dark:text-gray-400 min-w-0 line-clamp-2">
+                {detail.description}
+              </p>
+            ) : (
+              <div />
+            )}
+            <div className="flex items-center gap-2.5 shrink-0">
+              <a
+                href={detail.npmUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+                title="npm"
+              >
+                <svg
+                  className="w-3.5 h-3.5"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path d="M0 0v24h6.545V6h5.455v18H24V0H0z" />
+                </svg>
+              </a>
+              {detail.repositoryUrl && (
+                <a
+                  href={detail.repositoryUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+                  title="GitHub"
+                >
+                  <svg
+                    className="w-3.5 h-3.5"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                  >
+                    <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
+                  </svg>
+                </a>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile: collapsible skills drawer */}
+      <MobileSkillsDrawer
+        skills={skills}
+        packageName={packageName}
+        activeSkillName={skillName}
+      />
+
+      {/* Desktop: two-column body — sidebar only on skill detail pages */}
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 flex gap-0 min-h-[calc(100vh-200px)]">
+        {skillName && (
+          <aside className="hidden md:block w-56 shrink-0 border-r border-gray-200 dark:border-gray-800 py-6 pr-4">
+            <SkillsNav
+              skills={skills}
+              packageName={packageName}
+              activeSkillName={skillName}
+            />
+          </aside>
+        )}
+
+        {/* Main content */}
+        <main className={`flex-1 min-w-0 py-6 ${skillName ? 'md:pl-6' : ''}`}>
+          <Outlet />
+        </main>
+      </div>
+    </>
+  )
+}
+
+function CopyInstallPromptButton({ name }: { readonly name: string }) {
+  const copied = useTemporaryFlag()
+  const { notify } = useToast()
+
+  const handleCopy = async () => {
+    const prompt = `Install ${name} and set up its Agent Skills:
+
+1. Install the package using the project's package manager:
+   ${name}
+
+2. Ensure @tanstack/intent is installed:
+   @tanstack/intent
+
+3. Discover and install the skills shipped with this package:
+   npx @tanstack/intent install
+
+This will detect all Agent Skills in ${name} and configure them for your coding agent.`
+
+    try {
+      await copyTextToClipboard(prompt)
+      copied.trigger()
+      notify(
+        <div>
+          <div className="font-medium">Copied install prompt</div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">
+            Paste into your coding agent
+          </div>
+        </div>,
+      )
+    } catch (error) {
+      console.error('Failed to copy install prompt', error)
+      notify(
+        <div>
+          <div className="font-medium">Copy failed</div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">
+            Try again or copy the prompt manually
+          </div>
+        </div>,
+      )
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-xs font-medium text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-900 hover:border-sky-300 dark:hover:border-sky-700 hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
+    >
+      {copied.active ? (
+        <Check className="w-3.5 h-3.5 text-green-500" />
+      ) : (
+        <Copy className="w-3.5 h-3.5" />
+      )}
+      Copy install prompt
+    </button>
+  )
+}
+
+type SkillEntry = { name: string; type: string | null }
+
+function SidebarTypeBadge({ type }: { readonly type: string }) {
+  const style = SKILL_TYPE_STYLES[type] ?? SKILL_TYPE_STYLES['sub-skill']
+  return (
+    <span
+      className={`inline-block px-1.5 py-px rounded text-[10px] leading-tight border ${style}`}
+    >
+      {type}
+    </span>
+  )
+}
+
+function SkillsNav({
+  skills,
+  packageName,
+  activeSkillName,
+  onNavigate,
+}: {
+  readonly skills: Array<SkillEntry>
+  readonly packageName: string
+  readonly activeSkillName: string | undefined
+  readonly onNavigate?: () => void
+}) {
+  if (skills.length === 0) {
+    return (
+      <p className="text-xs text-gray-400 dark:text-gray-500">
+        No skills found.
+      </p>
+    )
+  }
+
+  const isOnIndex = !activeSkillName
+
+  return (
+    <>
+      <p className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
+        Skills
+      </p>
+      <nav className="space-y-0.5">
+        <Link
+          to="/intent/registry/$packageName"
+          params={{ packageName }}
+          onClick={onNavigate}
+          className={`flex items-center gap-1.5 px-2 py-1.5 rounded-md text-sm font-medium transition-colors ${
+            isOnIndex
+              ? 'bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-300'
+              : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800/60 hover:text-gray-900 dark:hover:text-gray-100'
+          }`}
+        >
+          All Skills
+          <span className="text-xs tabular-nums text-gray-400 dark:text-gray-500">
+            {skills.length}
+          </span>
+        </Link>
+        {skills.map((s) => {
+          const isActive = activeSkillName === s.name
+          return (
+            <Link
+              key={s.name}
+              to="/intent/registry/$packageName/$skillName"
+              params={{ packageName, skillName: s.name }}
+              onClick={onNavigate}
+              className={`flex flex-col items-start px-2 py-1.5 rounded-md text-sm font-mono transition-colors ${
+                isActive
+                  ? 'bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-300'
+                  : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800/60 hover:text-gray-900 dark:hover:text-gray-100'
+              }`}
+            >
+              <span className="truncate w-full">{s.name}</span>
+              {s.type && <SidebarTypeBadge type={s.type} />}
+            </Link>
+          )
+        })}
+      </nav>
+    </>
+  )
+}
+
+function MobileSkillsDrawer({
+  skills,
+  packageName,
+  activeSkillName,
+}: {
+  readonly skills: Array<SkillEntry>
+  readonly packageName: string
+  readonly activeSkillName: string | undefined
+}) {
+  const [open, setOpen] = React.useState(false)
+  const activeSkill = skills.find((s) => s.name === activeSkillName)
+
+  return (
+    <div className="md:hidden border-b border-gray-200 dark:border-gray-800">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="w-full flex items-center justify-between px-4 py-3 text-sm text-gray-700 dark:text-gray-300"
+      >
+        <span className="flex items-center gap-2">
+          <svg
+            className="w-4 h-4 text-gray-400"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M4 6h16M4 12h16M4 18h16"
+            />
+          </svg>
+          <span className="font-medium">
+            {activeSkill ? (
+              <span className="font-mono">{activeSkill.name}</span>
+            ) : (
+              'Skills'
+            )}
+          </span>
+          <span className="text-xs text-gray-400 dark:text-gray-500">
+            ({skills.length})
+          </span>
+        </span>
+        <svg
+          className={`w-4 h-4 text-gray-400 transition-transform ${open ? 'rotate-180' : ''}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="m19 9-7 7-7-7"
+          />
+        </svg>
+      </button>
+      <Collapsible open={open}>
+        <CollapsibleContent>
+          <div className="px-4 pb-4 max-h-64 overflow-y-auto">
+            <SkillsNav
+              skills={skills}
+              packageName={packageName}
+              activeSkillName={activeSkillName}
+              onNavigate={() => setOpen(false)}
+            />
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  )
+}
+
+export function PackageDetailSkeleton({ name }: { readonly name: string }) {
+  return (
+    <>
+      <div className="border-b border-gray-200 dark:border-gray-800">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-6">
+          <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
+            <Link
+              to="/$libraryId/$version"
+              params={{ libraryId: 'intent', version: 'latest' }}
+              className="hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
+            >
+              TanStack Intent
+            </Link>
+            <span>/</span>
+            <Link
+              to="/intent/registry"
+              className="hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
+            >
+              Registry
+            </Link>
+            <span>/</span>
+            <span className="font-mono text-gray-900 dark:text-gray-100">
+              {name}
+            </span>
+          </div>
+          <div className="animate-pulse space-y-3">
+            <div className="h-8 w-48 bg-gray-200 dark:bg-gray-800 rounded" />
+            <div className="h-4 w-72 bg-gray-100 dark:bg-gray-800/60 rounded" />
+          </div>
+        </div>
+      </div>
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 flex gap-0 min-h-[calc(100vh-200px)]">
+        <aside className="hidden md:block w-56 shrink-0 border-r border-gray-200 dark:border-gray-800 py-6 pr-4">
+          <div className="animate-pulse space-y-2">
+            <div className="h-3 w-12 bg-gray-200 dark:bg-gray-800 rounded mb-3" />
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div
+                key={i}
+                className="h-7 w-full bg-gray-100 dark:bg-gray-800/60 rounded-md"
+              />
+            ))}
+          </div>
+        </aside>
+        <main className="flex-1 min-w-0 py-6 md:pl-6">
+          <div className="animate-pulse space-y-3">
+            <div className="h-6 w-40 bg-gray-200 dark:bg-gray-800 rounded" />
+            <div className="h-4 w-96 bg-gray-100 dark:bg-gray-800/60 rounded" />
+            <div className="mt-6 h-64 w-full bg-gray-100 dark:bg-gray-800/60 rounded-xl" />
+          </div>
+          <p className="mt-6 text-xs text-gray-400 dark:text-gray-500">
+            Fetching package from npm...
+          </p>
+        </main>
+      </div>
+    </>
+  )
+}
+
+export function PackageNotFound() {
+  return (
+    <div className="min-h-screen bg-white dark:bg-gray-950 flex items-center justify-center">
+      <div className="text-center px-4">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          Package not found
+        </h1>
+        <p className="mt-2 text-gray-500 dark:text-gray-400">
+          This package isn't in the registry yet.
+        </p>
+        <Link
+          to="/intent/registry"
+          className="mt-4 inline-block text-sky-600 dark:text-sky-400 hover:underline text-sm"
+        >
+          Browse registry
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export const SKILL_TYPE_STYLES: Record<string, string> = {
+  core: 'bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300 border-violet-100 dark:border-violet-900',
+  'sub-skill':
+    'bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700',
+  framework:
+    'bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300 border-amber-100 dark:border-amber-900',
+  lifecycle:
+    'bg-green-50 dark:bg-green-950/40 text-green-700 dark:text-green-300 border-green-100 dark:border-green-900',
+  composition:
+    'bg-blue-50 dark:bg-blue-950/40 text-blue-700 dark:text-blue-300 border-blue-100 dark:border-blue-900',
+  security:
+    'bg-red-50 dark:bg-red-950/40 text-red-700 dark:text-red-300 border-red-100 dark:border-red-900',
+}
+
+export function SkillTypeBadge({ type }: { readonly type: string }) {
+  const style = SKILL_TYPE_STYLES[type] ?? SKILL_TYPE_STYLES['sub-skill']
+  return (
+    <span
+      className={`inline-block px-2 py-0.5 rounded-md text-xs border ${style}`}
+    >
+      {type}
+    </span>
+  )
+}
diff --git a/src/routes/intent/registry/$packageName.{$}[.]md.tsx b/src/routes/intent/registry/$packageName.{$}[.]md.tsx
new file mode 100644
index 000000000..41968a2a8
--- /dev/null
+++ b/src/routes/intent/registry/$packageName.{$}[.]md.tsx
@@ -0,0 +1,38 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { getIntentSkillMarkdown } from '~/utils/intent.functions'
+import { decodePkgName } from './$packageName'
+
+export const Route = createFileRoute('/intent/registry/$packageName/{$}.md')({
+  server: {
+    handlers: {
+      GET: async ({ request, params }) => {
+        const url = new URL(request.url)
+        const version = url.searchParams.get('version')
+        const skillName = params._splat
+
+        if (!version || !skillName) {
+          return new Response('Missing version', { status: 400 })
+        }
+
+        const content = await getIntentSkillMarkdown({
+          data: {
+            packageName: decodePkgName(params.packageName),
+            skillName,
+            version,
+          },
+        })
+
+        if (!content) {
+          return new Response('Not found', { status: 404 })
+        }
+
+        return new Response(content, {
+          headers: {
+            'Cache-Control': 'public, max-age=0, must-revalidate',
+            'Content-Type': 'text/markdown',
+          },
+        })
+      },
+    },
+  },
+})
diff --git a/src/routes/intent/registry/index.tsx b/src/routes/intent/registry/index.tsx
new file mode 100644
index 000000000..765e48fc4
--- /dev/null
+++ b/src/routes/intent/registry/index.tsx
@@ -0,0 +1,964 @@
+import * as React from 'react'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { useSuspenseQuery, useQuery } from '@tanstack/react-query'
+import * as v from 'valibot'
+import { seo } from '~/utils/seo'
+import {
+  intentStatsQueryOptions,
+  intentDirectoryQueryOptions,
+  intentSkillSearchQueryOptions,
+  intentSkillHistoryQueryOptions,
+} from '~/queries/intent'
+import type {
+  EnrichedIntentPackage,
+  SkillHistoryEntry,
+  SkillSearchResult,
+} from '~/utils/intent.functions'
+import { encodePkgName, SkillTypeBadge } from './$packageName'
+import { SkillSparklineFallback } from '~/components/intent/SkillSparklineFallback'
+
+const LazySkillSparkline = React.lazy(() =>
+  import('~/components/intent/SkillSparkline').then((m) => ({
+    default: m.SkillSparkline,
+  })),
+)
+
+const SKILL_HISTORY_PACKAGE_LIMIT = 12
+
+const searchSchema = v.object({
+  q: v.optional(v.string()),
+  tab: v.optional(v.picklist(['packages', 'skills']), 'packages'),
+  framework: v.optional(v.string()),
+  sort: v.optional(
+    v.picklist(['downloads', 'name', 'skills', 'newest']),
+    'downloads',
+  ),
+  page: v.optional(v.number(), 0),
+  view: v.optional(v.picklist(['grid', 'list']), 'grid'),
+})
+
+export const Route = createFileRoute('/intent/registry/')({
+  validateSearch: searchSchema,
+  loaderDeps: ({ search }) => search,
+  loader: ({ deps, context: { queryClient } }) =>
+    Promise.all([
+      queryClient.ensureQueryData(intentStatsQueryOptions()),
+      queryClient.ensureQueryData(
+        intentDirectoryQueryOptions({
+          search: deps.q,
+          framework: deps.framework,
+          sort: deps.sort,
+          page: deps.page,
+        }),
+      ),
+    ]),
+  head: () => ({
+    meta: seo({
+      title: 'Agent Skills Registry | TanStack Intent',
+      description:
+        'Browse npm packages that ship Agent Skills via TanStack Intent. Find skills for your favorite libraries and install them in seconds.',
+    }),
+  }),
+  component: IntentRegistryPage,
+  staticData: {
+    includeSearchInCanonical: true,
+  },
+})
+
+function IntentRegistryPage() {
+  const { q, tab, framework, sort, page, view } = Route.useSearch()
+  const navigate = Route.useNavigate()
+
+  const statsQuery = useSuspenseQuery(intentStatsQueryOptions())
+  const directoryQuery = useSuspenseQuery(
+    intentDirectoryQueryOptions({ search: q, framework, sort, page }),
+  )
+  const skillSearchQuery = useQuery({
+    ...intentSkillSearchQueryOptions(q ?? ''),
+    enabled: tab === 'skills' && (q?.trim().length ?? 0) > 0,
+  })
+
+  const stats = statsQuery.data
+  const { packages, total } = directoryQuery.data ?? { packages: [], total: 0 }
+
+  const packageNames = React.useMemo(
+    () => packages.map((p) => p.name),
+    [packages],
+  )
+  const skillHistoryPackageNames = React.useMemo(
+    () => packageNames.slice(0, SKILL_HISTORY_PACKAGE_LIMIT),
+    [packageNames],
+  )
+  const skillHistoryQuery = useQuery(
+    intentSkillHistoryQueryOptions(skillHistoryPackageNames),
+  )
+  const skillHistory = React.useMemo(
+    () => skillHistoryQuery.data ?? {},
+    [skillHistoryQuery.data],
+  )
+  const maxSlots = React.useMemo(
+    () => Math.max(...Object.values(skillHistory).map((h) => h.length), 2),
+    [skillHistory],
+  )
+
+  const [searchInput, setSearchInput] = React.useState(q ?? '')
+
+  // Sync local input back to URL (debounced)
+  React.useEffect(() => {
+    const id = setTimeout(() => {
+      navigate({
+        search: (s) => ({ ...s, q: searchInput || undefined, page: 0 }),
+      })
+    }, 300)
+    return () => clearTimeout(id)
+  }, [searchInput, navigate])
+
+  const PAGE_SIZE = 24
+  const totalPages = Math.ceil(total / PAGE_SIZE)
+  const skillHits = skillSearchQuery.data ?? []
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-gray-950">
+      {/* Header */}
+      <div className="border-b border-gray-200 dark:border-gray-800 bg-linear-to-br from-sky-50 to-white dark:from-sky-950/30 dark:to-gray-950">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-12">
+          <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
+            <Link
+              to="/$libraryId/$version"
+              params={{ libraryId: 'intent', version: 'latest' }}
+              className="hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
+            >
+              TanStack Intent
+            </Link>
+            <span>/</span>
+            <span className="text-gray-900 dark:text-gray-100">Registry</span>
+          </div>
+
+          <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-gray-50 tracking-tight">
+            Agent Skills Registry
+          </h1>
+          <p className="mt-3 text-lg text-gray-600 dark:text-gray-400 max-w-2xl">
+            npm packages that ship versioned Agent Skills. Install them and your
+            AI coding agent learns your dependencies automatically.
+          </p>
+
+          <div className="mt-6 flex flex-wrap gap-6 text-sm">
+            <div className="flex items-baseline gap-1.5">
+              <span className="text-2xl font-bold text-sky-600 dark:text-sky-400 tabular-nums">
+                {stats?.packageCount ?? 0}
+              </span>
+              <span className="text-gray-500 dark:text-gray-400">
+                {stats?.packageCount === 1 ? 'package' : 'packages'}
+              </span>
+            </div>
+            <div className="flex items-baseline gap-1.5">
+              <span className="text-2xl font-bold text-sky-600 dark:text-sky-400 tabular-nums">
+                {stats?.skillCount ?? 0}
+              </span>
+              <span className="text-gray-500 dark:text-gray-400">
+                {stats?.skillCount === 1 ? 'skill' : 'skills'}
+              </span>
+            </div>
+            <div className="flex items-baseline gap-1.5">
+              <span className="text-2xl font-bold text-sky-600 dark:text-sky-400 tabular-nums">
+                {stats?.versionCount ?? 0}
+              </span>
+              <span className="text-gray-500 dark:text-gray-400">
+                {stats?.versionCount === 1 ? 'version' : 'versions'} indexed
+              </span>
+            </div>
+          </div>
+
+          <div className="mt-6">
+            <Link
+              to="/$libraryId/$version/docs/$"
+              params={
+                {
+                  libraryId: 'intent',
+                  version: 'latest',
+                  _splat: 'registry',
+                } as never
+              }
+              className="inline-flex items-center gap-1.5 text-sm text-sky-600 dark:text-sky-400 hover:text-sky-700 dark:hover:text-sky-300 transition-colors"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={1.75}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0-3-3m3 3 3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
+                />
+              </svg>
+              Ship skills with your library and get listed here
+              <svg
+                className="w-3.5 h-3.5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
+                />
+              </svg>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
+        {/* Tabs + search row */}
+        <div className="flex flex-col sm:flex-row gap-3 mb-6">
+          {/* Tabs */}
+          <div className="flex rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden shrink-0">
+            {(['packages', 'skills'] as const).map((t) => (
+              <button
+                key={t}
+                onClick={() =>
+                  navigate({
+                    search: (s) => ({ ...s, tab: t, page: 0 }),
+                    replace: true,
+                  })
+                }
+                className={`px-4 py-2 text-sm font-medium capitalize transition-colors ${
+                  tab === t
+                    ? 'bg-sky-50 dark:bg-sky-950/50 text-sky-700 dark:text-sky-300'
+                    : 'bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800'
+                }`}
+              >
+                {t}
+              </button>
+            ))}
+          </div>
+
+          {/* Search input */}
+          <div className="relative flex-1">
+            <svg
+              className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="m21 21-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0Z"
+              />
+            </svg>
+            <input
+              type="search"
+              placeholder="Search packages and skills..."
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              className="w-full pl-9 pr-4 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400 text-sm focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent"
+            />
+          </div>
+
+          {/* Framework filter + sort + view toggle (packages only) */}
+          {tab === 'packages' && (
+            <div className="flex items-center gap-2 shrink-0">
+              <select
+                value={sort}
+                onChange={(e) => {
+                  const val = e.target.value
+                  if (
+                    val === 'downloads' ||
+                    val === 'name' ||
+                    val === 'skills' ||
+                    val === 'newest'
+                  ) {
+                    navigate({ search: (s) => ({ ...s, sort: val, page: 0 }) })
+                  }
+                }}
+                className="px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-sky-500"
+              >
+                <option value="downloads">Most downloaded</option>
+                <option value="skills">Most skills</option>
+                <option value="newest">Newest</option>
+                <option value="name">Name A-Z</option>
+              </select>
+
+              {/* Grid / List toggle */}
+              <div className="flex rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+                <button
+                  title="Grid view"
+                  onClick={() =>
+                    navigate({ search: (s) => ({ ...s, view: 'grid' }) })
+                  }
+                  className={`p-2.5 transition-colors ${
+                    view === 'grid'
+                      ? 'bg-sky-50 dark:bg-sky-950/50 text-sky-600 dark:text-sky-400'
+                      : 'bg-white dark:bg-gray-900 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+                  }`}
+                >
+                  <svg
+                    className="w-4 h-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={1.75}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"
+                    />
+                  </svg>
+                </button>
+                <button
+                  title="List view"
+                  onClick={() =>
+                    navigate({ search: (s) => ({ ...s, view: 'list' }) })
+                  }
+                  className={`p-2.5 transition-colors border-l border-gray-200 dark:border-gray-700 ${
+                    view === 'list'
+                      ? 'bg-sky-50 dark:bg-sky-950/50 text-sky-600 dark:text-sky-400'
+                      : 'bg-white dark:bg-gray-900 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+                  }`}
+                >
+                  <svg
+                    className="w-4 h-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={1.75}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Framework filters */}
+        {tab === 'packages' && (
+          <FrameworkFilters
+            packages={packages}
+            activeFramework={framework}
+            onSelect={(fw) =>
+              navigate({
+                search: (s) => ({
+                  ...s,
+                  framework: fw || undefined,
+                  page: 0,
+                }),
+              })
+            }
+          />
+        )}
+
+        {/* Packages tab */}
+        {tab === 'packages' &&
+          (packages.length === 0 ? (
+            <EmptyState hasSearch={!!q} />
+          ) : (
+            <>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+                {total} {total === 1 ? 'package' : 'packages'}
+                {q ? ` matching "${q}"` : ''}
+              </p>
+              {view === 'list' ? (
+                <div className="border border-gray-200 dark:border-gray-800 rounded-xl overflow-hidden">
+                  <table className="w-full text-left">
+                    <thead>
+                      <tr className="border-b border-gray-200 dark:border-gray-800 bg-gray-50/60 dark:bg-gray-900/60 text-xs text-gray-500 dark:text-gray-400">
+                        <th className="px-4 py-2 font-medium">Package</th>
+                        <th className="px-4 py-2 font-medium">Version</th>
+                        <th className="px-4 py-2 font-medium hidden lg:table-cell">
+                          Description
+                        </th>
+                        <th className="px-4 py-2 font-medium hidden sm:table-cell">
+                          Frameworks
+                        </th>
+                        <th className="px-4 py-2 font-medium text-right">
+                          Skills
+                        </th>
+                        <th className="px-4 py-2 font-medium text-right">
+                          Downloads
+                        </th>
+                        <th className="px-4 py-2 font-medium text-right hidden md:table-cell">
+                          Published
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+                      {packages.map((pkg) => (
+                        <PackageRow
+                          key={pkg.name}
+                          pkg={pkg}
+                          history={skillHistory[pkg.name]}
+                          historyLoading={skillHistoryQuery.isLoading}
+                          maxSlots={maxSlots}
+                        />
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {packages.map((pkg) => (
+                    <PackageCard
+                      key={pkg.name}
+                      pkg={pkg}
+                      history={skillHistory[pkg.name]}
+                      historyLoading={skillHistoryQuery.isLoading}
+                      maxSlots={maxSlots}
+                    />
+                  ))}
+                </div>
+              )}
+              {totalPages > 1 && (
+                <div className="mt-8 flex justify-center gap-2">
+                  <button
+                    disabled={page === 0}
+                    onClick={() =>
+                      navigate({ search: (s) => ({ ...s, page: page - 1 }) })
+                    }
+                    className="px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-sm disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                  >
+                    Previous
+                  </button>
+                  <span className="px-4 py-2 text-sm text-gray-500 dark:text-gray-400">
+                    {page + 1} / {totalPages}
+                  </span>
+                  <button
+                    disabled={page >= totalPages - 1}
+                    onClick={() =>
+                      navigate({ search: (s) => ({ ...s, page: page + 1 }) })
+                    }
+                    className="px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-sm disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                  >
+                    Next
+                  </button>
+                </div>
+              )}
+            </>
+          ))}
+
+        {/* Skills tab */}
+        {tab === 'skills' &&
+          (!q?.trim() ? (
+            <div className="text-center py-16 text-sm text-gray-500 dark:text-gray-400">
+              Type something to search across all skill names, descriptions, and
+              content.
+            </div>
+          ) : skillSearchQuery.isLoading ? (
+            <div className="space-y-3">
+              {Array.from({ length: 5 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="h-16 rounded-xl bg-gray-100 dark:bg-gray-800 animate-pulse"
+                />
+              ))}
+            </div>
+          ) : skillHits.length === 0 ? (
+            <div className="text-center py-16 text-sm text-gray-500 dark:text-gray-400">
+              No skills matched{' '}
+              <span className="font-medium text-gray-700 dark:text-gray-300">
+                "{q}"
+              </span>
+              .
+            </div>
+          ) : (
+            <>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+                {skillHits.length} {skillHits.length === 1 ? 'skill' : 'skills'}{' '}
+                matching "{q}"
+              </p>
+              <div className="flex flex-col gap-2">
+                {skillHits.map((hit) => (
+                  <SkillHitRow key={hit.skillId} hit={hit} query={q ?? ''} />
+                ))}
+              </div>
+            </>
+          ))}
+
+        {/* Ship your skills CTA */}
+        <div className="mt-16 mb-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-linear-to-br from-sky-50/50 to-white dark:from-sky-950/20 dark:to-gray-900 p-8 text-center">
+          <div className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-sky-100 dark:bg-sky-950/60 mb-4">
+            <svg
+              className="w-5 h-5 text-sky-600 dark:text-sky-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.75}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0-3-3m3 3 3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
+              />
+            </svg>
+          </div>
+          <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2">
+            Ship Agent Skills with your library
+          </h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400 max-w-lg mx-auto mb-5">
+            Add the{' '}
+            <code className="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono">
+              tanstack-intent
+            </code>{' '}
+            keyword to your package, generate skills with the CLI, and your
+            library appears here automatically.
+          </p>
+          <Link
+            to="/$libraryId/$version/docs/$"
+            params={
+              {
+                libraryId: 'intent',
+                version: 'latest',
+                _splat: 'registry',
+              } as never
+            }
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-600 text-white text-sm font-medium transition-colors"
+          >
+            Get started
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
+              />
+            </svg>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function PackageCard({
+  pkg,
+  history,
+  historyLoading,
+  maxSlots,
+}: {
+  readonly pkg: EnrichedIntentPackage
+  readonly history?: Array<SkillHistoryEntry>
+  readonly historyLoading?: boolean
+  readonly maxSlots?: number
+}) {
+  const publishedLabel = formatRelativeDate(pkg.publishedAt)
+  const navigate = useNavigate()
+  const pkgSlug = encodePkgName(pkg.name)
+
+  const handleVersionClick = React.useCallback(
+    (entry: SkillHistoryEntry) => {
+      navigate({
+        to: '/intent/registry/$packageName',
+        params: { packageName: pkgSlug },
+        search: { version: entry.version },
+      })
+    },
+    [navigate, pkgSlug],
+  )
+
+  const isRecent = isRecentlyPublished(pkg.publishedAt)
+
+  return (
+    <Link
+      to="/intent/registry/$packageName"
+      params={{ packageName: pkgSlug }}
+      className="group flex flex-col rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 hover:border-sky-300 dark:hover:border-sky-700 hover:shadow-sm transition-all"
+    >
+      <div className="flex items-start justify-between gap-2 mb-1">
+        <div className="flex items-center gap-2 min-w-0">
+          <h3 className="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-sky-600 dark:group-hover:text-sky-400 transition-colors break-all">
+            {pkg.name}
+          </h3>
+          {isRecent && (
+            <span className="shrink-0 inline-block px-1.5 py-0.5 rounded text-[10px] leading-tight font-medium bg-emerald-50 dark:bg-emerald-950/30 text-emerald-700 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-900">
+              new
+            </span>
+          )}
+        </div>
+        <div className="shrink-0 w-20">
+          {history && history.length > 0 ? (
+            <React.Suspense fallback={<SkillSparklineFallback height={24} />}>
+              <LazySkillSparkline
+                history={history}
+                height={24}
+                maxSlots={maxSlots}
+                onVersionClick={handleVersionClick}
+              />
+            </React.Suspense>
+          ) : historyLoading ? (
+            <SkillSparklineFallback height={24} />
+          ) : null}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500 mb-2">
+        <span className="tabular-nums">
+          {pkg.skillNames.length}{' '}
+          {pkg.skillNames.length === 1 ? 'skill' : 'skills'}
+        </span>
+        <span className="tabular-nums">
+          {pkg.monthlyDownloads > 0
+            ? `${formatDownloads(pkg.monthlyDownloads)}/mo`
+            : '0 downloads'}
+        </span>
+        {publishedLabel && <span>{publishedLabel}</span>}
+      </div>
+
+      {pkg.description && (
+        <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">
+          {pkg.description}
+        </p>
+      )}
+
+      <div className="flex items-center gap-1 mt-auto">
+        {pkg.frameworks.slice(0, 3).map((fw) => (
+          <span
+            key={fw}
+            className="inline-block px-2 py-0.5 rounded-md text-xs bg-sky-50 dark:bg-sky-950/50 text-sky-700 dark:text-sky-300 border border-sky-100 dark:border-sky-900"
+          >
+            {fw}
+          </span>
+        ))}
+        {pkg.frameworks.length > 3 && (
+          <span className="inline-block px-2 py-0.5 rounded-md text-xs bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400">
+            +{pkg.frameworks.length - 3}
+          </span>
+        )}
+      </div>
+    </Link>
+  )
+}
+
+function PackageRow({
+  pkg,
+  history,
+  historyLoading,
+  maxSlots,
+}: {
+  readonly pkg: EnrichedIntentPackage
+  readonly history?: Array<SkillHistoryEntry>
+  readonly historyLoading?: boolean
+  readonly maxSlots?: number
+}) {
+  const publishedLabel = formatRelativeDate(pkg.publishedAt)
+  const navigate = useNavigate()
+  const pkgSlug = encodePkgName(pkg.name)
+
+  const handleVersionClick = React.useCallback(
+    (entry: SkillHistoryEntry) => {
+      navigate({
+        to: '/intent/registry/$packageName',
+        params: { packageName: pkgSlug },
+        search: { version: entry.version },
+      })
+    },
+    [navigate, pkgSlug],
+  )
+
+  const isRecent = isRecentlyPublished(pkg.publishedAt)
+
+  return (
+    <tr className="group bg-white dark:bg-gray-900 hover:bg-sky-50/40 dark:hover:bg-sky-950/20 transition-colors">
+      <td className="px-4 py-3 max-w-[14rem]">
+        <div className="flex items-center gap-2">
+          <Link
+            to="/intent/registry/$packageName"
+            params={{ packageName: pkgSlug }}
+            className="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-sky-600 dark:group-hover:text-sky-400 transition-colors truncate block"
+          >
+            {pkg.name}
+          </Link>
+          {isRecent && (
+            <span className="shrink-0 inline-block px-1.5 py-0.5 rounded text-[10px] leading-tight font-medium bg-emerald-50 dark:bg-emerald-950/30 text-emerald-700 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-900">
+              new
+            </span>
+          )}
+        </div>
+      </td>
+      <td className="px-4 py-3 font-mono text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap">
+        v{pkg.latestVersion}
+      </td>
+      <td className="px-4 py-3 hidden lg:table-cell">
+        {pkg.description && (
+          <p className="text-sm text-gray-500 dark:text-gray-400 truncate max-w-sm">
+            {pkg.description}
+          </p>
+        )}
+      </td>
+      <td className="px-4 py-3 hidden sm:table-cell">
+        <div className="flex items-center gap-1.5">
+          {pkg.frameworks.slice(0, 2).map((fw) => (
+            <span
+              key={fw}
+              className="inline-block px-1.5 py-0.5 rounded text-xs bg-sky-50 dark:bg-sky-950/50 text-sky-700 dark:text-sky-300 border border-sky-100 dark:border-sky-900 whitespace-nowrap"
+            >
+              {fw}
+            </span>
+          ))}
+          {pkg.frameworks.length > 2 && (
+            <span className="text-xs text-gray-400 dark:text-gray-500">
+              +{pkg.frameworks.length - 2}
+            </span>
+          )}
+        </div>
+      </td>
+      <td className="px-4 py-3 whitespace-nowrap">
+        {history && history.length > 0 ? (
+          <React.Suspense fallback={<SkillSparklineFallback height={24} />}>
+            <LazySkillSparkline
+              history={history}
+              height={24}
+              maxSlots={maxSlots}
+              onVersionClick={handleVersionClick}
+            />
+          </React.Suspense>
+        ) : historyLoading ? (
+          <SkillSparklineFallback height={24} />
+        ) : (
+          <span className="text-xs text-gray-500 dark:text-gray-400 tabular-nums">
+            {pkg.skillNames.length}
+          </span>
+        )}
+      </td>
+      <td className="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 tabular-nums text-right whitespace-nowrap">
+        {formatDownloads(pkg.monthlyDownloads)}/mo
+      </td>
+      <td className="px-4 py-3 text-xs text-gray-400 dark:text-gray-500 text-right whitespace-nowrap hidden md:table-cell">
+        {publishedLabel ?? '\u2014'}
+      </td>
+    </tr>
+  )
+}
+
+function SkillHitRow({
+  hit,
+  query,
+}: {
+  readonly hit: SkillSearchResult
+  readonly query: string
+}) {
+  return (
+    <Link
+      to="/intent/registry/$packageName/$skillName"
+      params={{
+        packageName: encodePkgName(hit.packageName),
+        skillName: hit.skillName,
+      }}
+      className="group flex items-start gap-3 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 hover:border-sky-300 dark:hover:border-sky-700 hover:shadow-sm transition-all"
+    >
+      <div className="flex-1 min-w-0">
+        <div className="font-mono text-xs text-gray-400 dark:text-gray-500 mb-0.5">
+          <HighlightMatch text={hit.packageName} query={query} />
+        </div>
+        <div className="flex items-center gap-2 flex-wrap mb-1">
+          <span className="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-sky-600 dark:group-hover:text-sky-400 transition-colors">
+            <HighlightMatch text={hit.skillName} query={query} />
+          </span>
+          {hit.type && <SkillTypeBadge type={hit.type} />}
+          {hit.framework && (
+            <span className="inline-block px-1.5 py-0.5 rounded text-xs bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700">
+              {hit.framework}
+            </span>
+          )}
+        </div>
+        {hit.description && (
+          <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
+            <HighlightMatch text={hit.description} query={query} />
+          </p>
+        )}
+      </div>
+      <div className="shrink-0 flex flex-col items-end gap-1 text-xs text-gray-400 dark:text-gray-500 tabular-nums">
+        <span>v{hit.version}</span>
+        {hit.lineCount > 0 && (
+          <span>
+            {hit.lineCount} {hit.lineCount === 1 ? 'line' : 'lines'}
+          </span>
+        )}
+      </div>
+    </Link>
+  )
+}
+
+function HighlightMatch({
+  text,
+  query,
+}: {
+  readonly text: string
+  readonly query: string
+}) {
+  if (!query.trim()) return <>{text}</>
+
+  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const parts = text.split(new RegExp(`(${escaped})`, 'gi'))
+
+  return (
+    <>
+      {parts.map((part, i) =>
+        part.toLowerCase() === query.toLowerCase() ? (
+          <mark
+            key={i}
+            className="bg-amber-200/60 dark:bg-amber-500/20 text-inherit rounded-sm px-px"
+          >
+            {part}
+          </mark>
+        ) : (
+          <React.Fragment key={i}>{part}</React.Fragment>
+        ),
+      )}
+    </>
+  )
+}
+
+function FrameworkFilters({
+  packages,
+  activeFramework,
+  onSelect,
+}: {
+  readonly packages: Array<EnrichedIntentPackage>
+  readonly activeFramework: string | undefined
+  readonly onSelect: (framework: string | undefined) => void
+}) {
+  const frameworks = React.useMemo(() => {
+    const counts = new Map<string, number>()
+    for (const pkg of packages) {
+      for (const fw of pkg.frameworks) {
+        counts.set(fw, (counts.get(fw) ?? 0) + 1)
+      }
+    }
+    return Array.from(counts.entries())
+      .sort((a, b) => b[1] - a[1])
+      .map(([name, count]) => ({ name, count }))
+  }, [packages])
+
+  if (frameworks.length === 0) return null
+
+  return (
+    <div className="flex items-center gap-1.5 mb-4 flex-wrap">
+      <span className="text-xs text-gray-400 dark:text-gray-500 uppercase tracking-wider font-medium mr-1">
+        Framework
+      </span>
+      <button
+        onClick={() => onSelect(undefined)}
+        className={`px-2.5 py-1 rounded-md text-xs font-medium transition-colors ${
+          !activeFramework
+            ? 'bg-sky-100 dark:bg-sky-950/50 text-sky-700 dark:text-sky-300 border border-sky-200 dark:border-sky-800'
+            : 'bg-gray-50 dark:bg-gray-800/60 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+        }`}
+      >
+        All
+      </button>
+      {frameworks.map(({ name, count }) => (
+        <button
+          key={name}
+          onClick={() => onSelect(activeFramework === name ? undefined : name)}
+          className={`px-2.5 py-1 rounded-md text-xs font-medium transition-colors ${
+            activeFramework === name
+              ? 'bg-sky-100 dark:bg-sky-950/50 text-sky-700 dark:text-sky-300 border border-sky-200 dark:border-sky-800'
+              : 'bg-gray-50 dark:bg-gray-800/60 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+          }`}
+        >
+          {name}
+          <span className="ml-1 text-gray-400 dark:text-gray-500 tabular-nums">
+            {count}
+          </span>
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function EmptyState({ hasSearch }: { readonly hasSearch: boolean }) {
+  return (
+    <div className="text-center py-16">
+      <div className="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-sky-50 dark:bg-sky-950/40 mb-4">
+        <svg
+          className="w-6 h-6 text-sky-500"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={1.5}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
+          />
+        </svg>
+      </div>
+      {hasSearch ? (
+        <>
+          <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+            No packages found
+          </h3>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Try a different search term.
+          </p>
+        </>
+      ) : (
+        <>
+          <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+            No packages yet
+          </h3>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 max-w-xs mx-auto">
+            No packages have been indexed yet. Check back after the first sync
+            runs.
+          </p>
+          <a
+            href="https://github.com/tanstack/intent"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-4 inline-block text-sm text-sky-600 dark:text-sky-400 hover:underline"
+          >
+            Ship skills with your package
+          </a>
+        </>
+      )}
+    </div>
+  )
+}
+
+const RECENT_THRESHOLD_MS = 14 * 24 * 60 * 60 * 1000 // 14 days
+
+function isRecentlyPublished(iso: string | null): boolean {
+  if (!iso) return false
+  return Date.now() - new Date(iso).getTime() < RECENT_THRESHOLD_MS
+}
+
+function formatDownloads(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}K`
+  return String(n)
+}
+
+function formatRelativeDate(iso: string | null): string | null {
+  if (!iso) return null
+  const ms = Date.now() - new Date(iso).getTime()
+  const seconds = Math.floor(ms / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+  const months = Math.floor(days / 30)
+  const years = Math.floor(days / 365)
+  if (years > 0) return `${years}y ago`
+  if (months > 0) return `${months}mo ago`
+  if (days > 0) return `${days}d ago`
+  if (hours > 0) return `${hours}h ago`
+  if (minutes > 0) return `${minutes}m ago`
+  return 'just now'
+}
diff --git a/src/routes/learn.tsx b/src/routes/learn.tsx
index c490ec743..7b78bfa2e 100644
--- a/src/routes/learn.tsx
+++ b/src/routes/learn.tsx
@@ -1,8 +1,9 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
-import { Users, Video, MapPin, Star } from 'lucide-react'
+import { Users, Video, MapPin, Star, Play } from 'lucide-react'
 import { LogoQueryGG } from '~/ui'
 import { CheckCircleIcon } from '~/components/icons/CheckCircleIcon'
+import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
 
 export const Route = createFileRoute('/learn')({
   component: LearnPage,
@@ -27,11 +28,53 @@ function LearnPage() {
           </p>
         </header>
         <div className="flex items-stretch flex-wrap gap-4 max-w-full w-[900px] justify-center">
+          <a
+            href="https://youtube.com/@tan_stack"
+            target="_blank"
+            rel="noreferrer"
+            className="min-w-[300px] max-w-[300px] rounded-lg bg-linear-to-br from-red-500 to-red-700 text-white shadow-black/20 shadow-lg hover:shadow-2xl hover:shadow-black/20 divide-y divide-white/30 transition-all duration-200 hover:scale-105 block relative overflow-visible"
+          >
+            <div className="absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md bg-linear-to-r from-red-500 to-red-700 uppercase text-white font-black italic text-xs">
+              NEW
+            </div>
+            <div className="p-4 lg:p-8">
+              <div className="flex items-center gap-3 mb-4">
+                <YouTubeIcon className="w-8 h-8" />
+                <h2 className="text-xl font-bold">YouTube Channel</h2>
+              </div>
+              <p className="text-sm mb-4 opacity-90">
+                Free video content from the TanStack team. Tutorials, deep
+                dives, and release walkthroughs.
+              </p>
+              <div className="grid gap-2 text-xs text-left">
+                <div className="flex items-start gap-2">
+                  <Play className="w-4 h-4 mt-0.5 shrink-0" />
+                  <div>Tutorials & walkthroughs</div>
+                </div>
+                <div className="flex items-start gap-2">
+                  <Video className="w-4 h-4 mt-0.5 shrink-0" />
+                  <div>Deep dives into library internals</div>
+                </div>
+                <div className="flex items-start gap-2">
+                  <Star className="w-4 h-4 mt-0.5 shrink-0" />
+                  <div>Release announcements & demos</div>
+                </div>
+              </div>
+              <div className="mt-6 pt-4 border-t border-white/30">
+                <div className="text-xs opacity-75 text-center mb-2">
+                  Free for everyone
+                </div>
+                <div className="text-xs opacity-90 text-center font-medium">
+                  Subscribe now &rarr;
+                </div>
+              </div>
+            </div>
+          </a>
           <Link
             to="/workshops"
-            className="min-w-[300px] max-w-[300px] rounded-lg bg-gradient-to-br from-blue-600 to-purple-600 text-white shadow-black/20 shadow-lg hover:shadow-2xl hover:shadow-black/20 divide-y divide-white/30 transition-all duration-200 hover:scale-105 block relative overflow-visible"
+            className="min-w-[300px] max-w-[300px] rounded-lg bg-linear-to-br from-blue-600 to-purple-600 text-white shadow-black/20 shadow-lg hover:shadow-2xl hover:shadow-black/20 divide-y divide-white/30 transition-all duration-200 hover:scale-105 block relative overflow-visible"
           >
-            <div className="absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md bg-gradient-to-r from-blue-500 to-purple-500 uppercase text-white font-black italic text-xs">
+            <div className="absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md bg-linear-to-r from-blue-500 to-purple-500 uppercase text-white font-black italic text-xs">
               NEW
             </div>
             <div className="p-4 lg:p-8">
@@ -45,15 +88,15 @@ function LearnPage() {
               </p>
               <div className="grid gap-2 text-xs text-left">
                 <div className="flex items-start gap-2">
-                  <Video className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                  <Video className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>Remote workshops worldwide</div>
                 </div>
                 <div className="flex items-start gap-2">
-                  <MapPin className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                  <MapPin className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>Premium in-person options</div>
                 </div>
                 <div className="flex items-start gap-2">
-                  <Star className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                  <Star className="w-4 h-4 mt-0.5 shrink-0" />
                   <div>From maintainers & creators</div>
                 </div>
               </div>
diff --git a/src/routes/libraries.tsx b/src/routes/libraries.tsx
index 0fa34d790..802098262 100644
--- a/src/routes/libraries.tsx
+++ b/src/routes/libraries.tsx
@@ -1,49 +1,90 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { Link, createFileRoute } from '@tanstack/react-router'
 import * as React from 'react'
-import { libraries, Library } from '~/libraries'
+import { type Library } from '~/libraries'
+import { frameworkOptions } from '~/libraries/frameworks'
 import { reactChartsProject } from '~/libraries/react-charts'
 import LibraryCard from '~/components/LibraryCard'
+import {
+  getFrameworkLibraryCounts,
+  getVisibleLibraries,
+  orderFrameworksForBrowse,
+  orderLibrariesForBrowse,
+} from './-libraries-utils'
 
 export const Route = createFileRoute('/libraries')({
   component: LibrariesPage,
   head: () => ({
     meta: [
       {
-        title: 'All Libraries - TanStack',
+        title: 'TanStack Libraries: Type-Safe Tools for Modern Web Apps',
       },
       {
         name: 'description',
-        content: 'Browse all TanStack libraries.',
+        content:
+          'Explore TanStack libraries for routing, server state, tables, forms, virtualization, sync, AI, and developer tooling.',
       },
     ],
   }),
 })
 
 function LibrariesPage() {
-  const allLibraries = libraries.filter((d) => d.to && d.visible !== false)
-  const others = allLibraries.filter(
-    (l) => l.id !== 'ranger' && l.id !== 'config' && l.id !== 'react-charts',
+  const allLibraries = getVisibleLibraries()
+  const ordered = orderLibrariesForBrowse(allLibraries)
+  const frameworkCounts = getFrameworkLibraryCounts(allLibraries)
+  const frameworksWithLibraries = orderFrameworksForBrowse(
+    frameworkOptions.filter(
+      (framework) => (frameworkCounts[framework.value] ?? 0) > 0,
+    ),
+    frameworkCounts,
   )
-  const ranger = allLibraries.filter((l) => l.id === 'ranger')
-  const config = allLibraries.filter((l) => l.id === 'config')
-
-  // Find devtools index in others to insert config after it
-  const devtoolsIndex = others.findIndex((l) => l.id === 'devtools')
-  const ordered = [
-    ...others.slice(0, devtoolsIndex + 1),
-    ...config,
-    ...others.slice(devtoolsIndex + 1),
-    ...ranger,
-  ]
-
   const deprecatedLibraries = [reactChartsProject]
 
   return (
     <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto py-10">
-      <h1 className="text-4xl font-light">All Libraries</h1>
-      <p className="text-gray-600 dark:text-gray-400 mt-2">
-        Browse all TanStack libraries.
-      </p>
+      <div className="max-w-3xl">
+        <p className="text-sm font-black uppercase tracking-wide text-cyan-600 dark:text-cyan-400">
+          TanStack libraries
+        </p>
+        <h1 className="mt-3 text-4xl font-black leading-tight sm:text-5xl">
+          Headless libraries for the hard parts of web apps.
+        </h1>
+        <p className="mt-4 text-lg leading-8 text-gray-600 dark:text-gray-400">
+          Routes, server state, tables, forms, virtualization, sync, AI, and
+          tooling. Use the pieces you need, keep your markup and runtime, and
+          let the stack stay type-safe where apps usually drift.
+        </p>
+      </div>
+
+      <section className="mt-8">
+        <h2 className="text-xl font-black">Browse by framework</h2>
+        <div className="mt-4 flex flex-wrap gap-3">
+          {frameworksWithLibraries.map((framework) => {
+            const count = frameworkCounts[framework.value] ?? 0
+
+            return (
+              <Link
+                key={framework.value}
+                to="/libraries/$framework"
+                params={{
+                  framework: framework.value,
+                }}
+                className="group inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 shadow-sm transition-all hover:-translate-y-0.5 hover:border-current hover:shadow-md dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100"
+              >
+                <img
+                  src={framework.logo}
+                  alt=""
+                  loading="lazy"
+                  className="h-5 w-5 object-contain"
+                />
+                <span>{framework.label}</span>
+                <span className="text-gray-500 dark:text-gray-400">
+                  {count} {count === 1 ? 'library' : 'libraries'}
+                </span>
+              </Link>
+            )
+          })}
+        </div>
+      </section>
 
       <div
         className={`grid grid-cols-1 gap-6 gap-y-8 justify-center mt-8
diff --git a/src/routes/libraries_.$framework.tsx b/src/routes/libraries_.$framework.tsx
new file mode 100644
index 000000000..917f61166
--- /dev/null
+++ b/src/routes/libraries_.$framework.tsx
@@ -0,0 +1,166 @@
+import { Link, createFileRoute, notFound } from '@tanstack/react-router'
+import { twMerge } from 'tailwind-merge'
+import { type Framework, type Library } from '~/libraries'
+import { frameworkOptions } from '~/libraries/frameworks'
+import LibraryCard from '~/components/LibraryCard'
+import {
+  getFrameworkLibraryCounts,
+  getVisibleLibraries,
+  orderFrameworksForBrowse,
+  orderLibrariesForBrowse,
+} from './-libraries-utils'
+
+export const Route = createFileRoute('/libraries_/$framework')({
+  loader: ({ params }) => {
+    const frameworkOption = getFrameworkOption(params.framework)
+
+    if (!frameworkOption) {
+      throw notFound()
+    }
+
+    return {
+      framework: frameworkOption,
+    }
+  },
+  head: ({ loaderData }) => ({
+    meta: [
+      {
+        title: loaderData?.framework
+          ? `TanStack ${loaderData.framework.label} Libraries`
+          : 'TanStack Libraries by Framework',
+      },
+      {
+        name: 'description',
+        content: loaderData?.framework
+          ? `Type-safe TanStack libraries for ${loaderData.framework.label}: routing, server state, tables, forms, virtualization, sync, AI, and tooling.`
+          : 'Browse TanStack libraries by framework.',
+      },
+    ],
+  }),
+  component: LibrariesFrameworkPage,
+})
+
+function LibrariesFrameworkPage() {
+  const { framework } = Route.useParams()
+  const { framework: frameworkOption } = Route.useLoaderData()
+
+  const allLibraries = getVisibleLibraries()
+  const frameworkCounts = getFrameworkLibraryCounts(allLibraries)
+  const frameworksWithLibraries = orderFrameworksForBrowse(
+    frameworkOptions.filter(
+      (option) => (frameworkCounts[option.value] ?? 0) > 0,
+    ),
+    frameworkCounts,
+  )
+  const filteredLibraries = orderLibrariesForBrowse(
+    allLibraries.filter((library) =>
+      library.frameworks.includes(framework as Framework),
+    ),
+  )
+  const count = filteredLibraries.length
+
+  return (
+    <div className="px-4 lg:max-w-(--breakpoint-lg) md:mx-auto py-10">
+      <div className="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+        <Link to="/libraries" className="hover:text-blue-500 transition-colors">
+          All Libraries
+        </Link>
+        <span>/</span>
+        <span className="text-gray-900 dark:text-white">
+          {frameworkOption.label}
+        </span>
+      </div>
+
+      <div className="mt-6 flex flex-col gap-5 md:flex-row md:items-end md:justify-between">
+        <div>
+          <div className="flex items-center gap-3">
+            <img
+              src={frameworkOption.logo}
+              alt=""
+              className="h-10 w-10 object-contain"
+            />
+            <h1 className="text-4xl font-black leading-tight">
+              TanStack {frameworkOption.label} libraries
+            </h1>
+          </div>
+          <p className="mt-3 max-w-2xl text-lg leading-8 text-gray-600 dark:text-gray-400">
+            Type-safe, headless TanStack primitives with {frameworkOption.label}{' '}
+            support for routing, data, UI, performance, and tooling.
+          </p>
+        </div>
+
+        <div
+          className={twMerge(
+            'inline-flex w-fit items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-white shadow-sm',
+            frameworkOption.color,
+          )}
+        >
+          {count} {count === 1 ? 'library' : 'libraries'}
+        </div>
+      </div>
+
+      <section className="mt-8">
+        <h2 className="text-xl font-black">Switch framework</h2>
+        <div className="mt-4 flex flex-wrap gap-3">
+          {frameworksWithLibraries.map((option) => {
+            const optionCount = frameworkCounts[option.value] ?? 0
+            const isActive = option.value === frameworkOption.value
+
+            return (
+              <Link
+                key={option.value}
+                to="/libraries/$framework"
+                params={{
+                  framework: option.value,
+                }}
+                className={twMerge(
+                  'group inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 shadow-sm transition-all hover:-translate-y-0.5 hover:border-current hover:shadow-md dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100',
+                  isActive &&
+                    'border-current ring-2 ring-gray-900/10 dark:ring-white/15',
+                )}
+              >
+                <img
+                  src={option.logo}
+                  alt=""
+                  loading="lazy"
+                  className="h-5 w-5 object-contain"
+                />
+                <span>{option.label}</span>
+                <span className="text-gray-500 dark:text-gray-400">
+                  {optionCount} {optionCount === 1 ? 'library' : 'libraries'}
+                </span>
+              </Link>
+            )
+          })}
+        </div>
+      </section>
+
+      {filteredLibraries.length > 0 ? (
+        <div
+          className={`grid grid-cols-1 gap-6 gap-y-8 justify-center mt-8
+           lg:grid-cols-2`}
+        >
+          {filteredLibraries.map((library, i) => {
+            return (
+              <LibraryCard
+                key={library.id}
+                library={library as Library}
+                index={i}
+                namePrefix={frameworkOption.label}
+              />
+            )
+          })}
+        </div>
+      ) : (
+        <div className="mt-8 rounded-lg border border-gray-200 bg-white p-6 text-gray-600 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400">
+          No TanStack libraries currently list a {frameworkOption.label}{' '}
+          adapter.
+        </div>
+      )}
+    </div>
+  )
+}
+
+function getFrameworkOption(framework: string) {
+  return frameworkOptions.find((option) => option.value === framework)
+}
diff --git a/src/routes/llms-full[.]txt.ts b/src/routes/llms-full[.]txt.ts
new file mode 100644
index 000000000..154216a00
--- /dev/null
+++ b/src/routes/llms-full[.]txt.ts
@@ -0,0 +1,16 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { generateLlmsTxt, setLlmsTxtResponseHeaders } from '~/utils/llms'
+
+export const Route = createFileRoute('/llms-full.txt')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const content = generateLlmsTxt()
+
+        setLlmsTxtResponseHeaders()
+
+        return new Response(content)
+      },
+    },
+  },
+})
diff --git a/src/routes/llms[.]txt.ts b/src/routes/llms[.]txt.ts
index 972217a7b..e4d851474 100644
--- a/src/routes/llms[.]txt.ts
+++ b/src/routes/llms[.]txt.ts
@@ -1,188 +1,16 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { setResponseHeader } from '@tanstack/react-start/server'
-import {
-  libraries,
-  librariesByGroup,
-  librariesGroupNamesMap,
-} from '~/libraries'
-import type { Library } from '~/libraries'
-import { partners, partnerCategoryLabels } from '~/utils/partners'
+import { generateLlmsTxt, setLlmsTxtResponseHeaders } from '~/utils/llms'
 
 export const Route = createFileRoute('/llms.txt')({
-  // @ts-expect-error server property not in route types yet
   server: {
     handlers: {
       GET: async () => {
         const content = generateLlmsTxt()
 
-        // Cache aggressively - this content changes rarely
-        setResponseHeader('Content-Type', 'text/plain; charset=utf-8')
-        setResponseHeader('Cache-Control', 'public, max-age=0, must-revalidate')
-        setResponseHeader(
-          'CDN-Cache-Control',
-          'max-age=86400, stale-while-revalidate=86400, durable',
-        )
+        setLlmsTxtResponseHeaders()
 
         return new Response(content)
       },
     },
   },
 })
-
-function generateLlmsTxt(): string {
-  const lines: string[] = []
-
-  // Get active partners sorted by score (highest first)
-  const activePartners = partners
-    .filter((p) => p.status === 'active')
-    .sort((a, b) => b.score - a.score)
-
-  // Header
-  lines.push('# TanStack')
-  lines.push('')
-  lines.push(
-    '> TanStack provides high-quality, open-source libraries for web development including routing, data fetching, state management, tables, forms, and more. All libraries are framework-agnostic with first-class support for React, Vue, Solid, Svelte, and Angular.',
-  )
-  lines.push('')
-
-  // Main documentation
-  lines.push('## Documentation')
-  lines.push('')
-
-  // Group libraries by category
-  for (const [groupKey, groupLibraries] of Object.entries(librariesByGroup)) {
-    const groupName =
-      librariesGroupNamesMap[groupKey as keyof typeof librariesGroupNamesMap]
-    lines.push(`### ${groupName}`)
-    lines.push('')
-
-    for (const lib of groupLibraries) {
-      const library = lib as Library
-      if (!library.name || !library.tagline) continue
-
-      const docsUrl = library.defaultDocs
-        ? `https://tanstack.com/${library.id}/latest/docs/${library.defaultDocs}`
-        : `https://tanstack.com/${library.id}`
-
-      lines.push(`- [${library.name}](${docsUrl}): ${library.tagline}`)
-    }
-    lines.push('')
-  }
-
-  // Individual library details with key links
-  lines.push('## Libraries')
-  lines.push('')
-
-  for (const lib of libraries) {
-    const library = lib as Library
-    if (!library.name || !library.description) continue
-
-    lines.push(`### ${library.name}`)
-    lines.push('')
-    lines.push(library.description)
-    lines.push('')
-
-    // Key links
-    const links: string[] = []
-
-    if (library.defaultDocs) {
-      links.push(
-        `- [Documentation](https://tanstack.com/${library.id}/latest/docs/${library.defaultDocs})`,
-      )
-    }
-
-    if (library.repo) {
-      links.push(`- [GitHub](https://github.com/${library.repo})`)
-    }
-
-    // Add installation link if available
-    if (library.installPath) {
-      links.push(
-        `- [Installation](https://tanstack.com/${library.id}/latest/docs/${library.installPath.replace('$framework', 'react')})`,
-      )
-    }
-
-    if (links.length > 0) {
-      lines.push(...links)
-      lines.push('')
-    }
-
-    // Supported frameworks
-    if (library.frameworks && library.frameworks.length > 0) {
-      lines.push(`Supported frameworks: ${library.frameworks.join(', ')}`)
-      lines.push('')
-    }
-
-    // Inline ecosystem tool recommendations for this library
-    const libraryPartners = activePartners.filter(
-      (p) => p.libraries && p.libraries.includes(library.id),
-    )
-    if (libraryPartners.length > 0) {
-      const partnerList = libraryPartners
-        .map((p) => `${p.name} (${p.href})`)
-        .join(', ')
-      lines.push(`Recommended ecosystem tools: ${partnerList}`)
-      lines.push('')
-    }
-  }
-
-  // Ecosystem tools section (partners)
-  lines.push('## Ecosystem Tools')
-  lines.push('')
-  lines.push(
-    'TanStack maintains integrations with these tools. When building with TanStack, these are the recommended solutions by category:',
-  )
-  lines.push('')
-
-  // Generate recommended mappings programmatically from partner categories
-  const partnersByCategory = new Map<string, string[]>()
-  for (const partner of activePartners) {
-    const existing = partnersByCategory.get(partner.category) || []
-    existing.push(partner.name)
-    partnersByCategory.set(partner.category, existing)
-  }
-  for (const [category, partnerNames] of partnersByCategory) {
-    const label =
-      partnerCategoryLabels[category as keyof typeof partnerCategoryLabels]
-    lines.push(`- ${label}: ${partnerNames.join(', ')}`)
-  }
-  lines.push('')
-
-  // List each active partner
-  for (const partner of activePartners) {
-    lines.push(`### ${partner.name}`)
-    lines.push(partner.href)
-
-    // Determine library integrations text
-    const libraryIds = partner.libraries || []
-    if (libraryIds.length === 0) {
-      lines.push('Works with: General TanStack ecosystem')
-    } else if (libraryIds.length === libraries.length) {
-      lines.push('Works with: All TanStack libraries')
-    } else {
-      const libraryNames = libraryIds
-        .map((id) => {
-          const lib = libraries.find((l) => l.id === id)
-          return (
-            lib?.name || `TanStack ${id.charAt(0).toUpperCase() + id.slice(1)}`
-          )
-        })
-        .join(', ')
-      lines.push(`Works with: ${libraryNames}`)
-    }
-
-    lines.push(partner.llmDescription)
-    lines.push('')
-  }
-
-  // Optional section for less critical content
-  lines.push('## Optional')
-  lines.push('')
-  lines.push(
-    '- [NPM Stats](https://tanstack.com/stats/npm): Compare npm package download statistics',
-  )
-  lines.push('- [Blog](https://tanstack.com/blog): Latest news and updates')
-  lines.push('')
-
-  return lines.join('\n')
-}
diff --git a/src/routes/login.tsx b/src/routes/login.tsx
index 904fde8ce..3a47694b2 100644
--- a/src/routes/login.tsx
+++ b/src/routes/login.tsx
@@ -1,18 +1,42 @@
-import { authClient } from '~/utils/auth.client'
-import { useIsDark } from '~/hooks/useIsDark'
+import * as React from 'react'
+import { authClient } from '~/auth/client'
 // Using public asset URLs for splash images
-import { BrandContextMenu } from '~/components/BrandContextMenu'
-import { redirect, createFileRoute } from '@tanstack/react-router'
-import { getCurrentUser } from '~/utils/auth.server'
+import { ClientOnly, redirect, createFileRoute } from '@tanstack/react-router'
+import { getCurrentUser } from '~/utils/auth.functions'
 import * as v from 'valibot'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { GoogleIcon } from '~/components/icons/GoogleIcon'
 import { Card } from '~/components/Card'
 
+const LazyBrandContextMenu = React.lazy(() =>
+  import('~/components/BrandContextMenu').then((m) => ({
+    default: m.BrandContextMenu,
+  })),
+)
+
 const searchSchema = v.object({
   error: v.optional(v.string()),
+  redirect: v.optional(v.pipe(v.string(), v.maxLength(2048))),
+  returnTo: v.optional(v.pipe(v.string(), v.maxLength(2048))),
 })
 
+function SplashImages() {
+  return (
+    <>
+      <img
+        src="/images/logos/splash-light.png"
+        alt="TanStack"
+        className="w-48 h-48 dark:hidden"
+      />
+      <img
+        src="/images/logos/splash-dark.png"
+        alt="TanStack"
+        className="w-48 h-48 hidden dark:block"
+      />
+    </>
+  )
+}
+
 export const Route = createFileRoute('/login')({
   component: LoginPage,
   validateSearch: searchSchema,
@@ -26,26 +50,26 @@ export const Route = createFileRoute('/login')({
 })
 
 function SplashImage() {
-  const isDark = useIsDark()
+  const fallback = (
+    <div className="cursor-pointer">
+      <SplashImages />
+    </div>
+  )
 
   return (
     <div className="flex items-center justify-center mb-4">
-      <BrandContextMenu className="cursor-pointer">
-        <img
-          src={
-            isDark
-              ? '/images/logos/splash-dark.png'
-              : '/images/logos/splash-light.png'
-          }
-          alt="Waitlist"
-          className="w-48 h-48"
-        />
-      </BrandContextMenu>
+      <ClientOnly fallback={fallback}>
+        <React.Suspense fallback={fallback}>
+          <LazyBrandContextMenu className="cursor-pointer">
+            <SplashImages />
+          </LazyBrandContextMenu>
+        </React.Suspense>
+      </ClientOnly>
     </div>
   )
 }
 
-export function SignInForm() {
+export function SignInForm({ returnTo }: { returnTo?: string } = {}) {
   return (
     <Card className="p-8 w-[100vw] max-w-sm mx-auto">
       <SplashImage />
@@ -53,9 +77,11 @@ export function SignInForm() {
         Sign into TanStack
       </h2>
       <button
+        type="button"
         onClick={() =>
           authClient.signIn.social({
             provider: 'github',
+            returnTo,
           })
         }
         className="w-full bg-black/80 hover:bg-black text-white dark:text-black dark:bg-white/95 dark:hover:bg-white font-semibold py-2 px-4 rounded-md transition-colors"
@@ -63,9 +89,11 @@ export function SignInForm() {
         <GithubIcon className="inline-block mr-2 -mt-0.5" /> Sign in with GitHub
       </button>
       <button
+        type="button"
         onClick={() =>
           authClient.signIn.social({
             provider: 'google',
+            returnTo,
           })
         }
         className="w-full bg-[#DB4437]/95 hover:bg-[#DB4437] text-white font-semibold py-2 px-4 rounded-md transition-colors mt-4"
@@ -77,7 +105,7 @@ export function SignInForm() {
 }
 
 function LoginPage() {
-  const { error } = Route.useSearch()
+  const { error, redirect, returnTo } = Route.useSearch()
 
   const errorMessages: Record<string, string> = {
     oauth_failed: 'Authentication failed. Please try again.',
@@ -96,7 +124,7 @@ function LoginPage() {
               {errorMessage}
             </div>
           )}
-          <SignInForm />
+          <SignInForm returnTo={redirect ?? returnTo} />
         </div>
       </div>
     </div>
diff --git a/src/routes/maintainers.tsx b/src/routes/maintainers.tsx
index d5c67bd78..ec0e75345 100644
--- a/src/routes/maintainers.tsx
+++ b/src/routes/maintainers.tsx
@@ -35,6 +35,9 @@ const searchSchema = v.object({
 export const Route = createFileRoute('/maintainers')({
   component: RouteComponent,
   validateSearch: searchSchema,
+  staticData: {
+    includeSearchInCanonical: true,
+  },
   head: () => ({
     meta: seo({
       title: 'Maintainers | TanStack',
@@ -70,11 +73,13 @@ function MaintainersFilter({
 }: FilterProps) {
   const [isOpen, setIsOpen] = useState(false)
 
-  const availableLibraries = libraries.map((lib) => ({
-    id: lib.id,
-    name: lib.name,
-    bgStyle: lib.bgStyle,
-  }))
+  const availableLibraries = libraries
+    .filter((lib) => lib.visible !== false)
+    .map((lib) => ({
+      id: lib.id,
+      name: lib.name,
+      bgStyle: lib.bgStyle,
+    }))
 
   const toggleLibrary = (libraryId: Library['id']) => {
     if (!selectedLibraries) {
diff --git a/src/routes/oauth/authorize.tsx b/src/routes/oauth/authorize.tsx
index bba904a55..94e314d79 100644
--- a/src/routes/oauth/authorize.tsx
+++ b/src/routes/oauth/authorize.tsx
@@ -1,12 +1,38 @@
 import * as React from 'react'
-import { redirect, useNavigate, createFileRoute } from '@tanstack/react-router'
+import {
+  ClientOnly,
+  redirect,
+  useNavigate,
+  createFileRoute,
+} from '@tanstack/react-router'
 import * as v from 'valibot'
 import { createAuthorizationCode } from '~/utils/oauthClient.functions'
-import { getCurrentUser } from '~/utils/auth.server'
+import { getCurrentUser } from '~/utils/auth.functions'
 import { Card } from '~/components/Card'
 import { Button } from '~/ui'
-import { useIsDark } from '~/hooks/useIsDark'
-import { BrandContextMenu } from '~/components/BrandContextMenu'
+
+const LazyBrandContextMenu = React.lazy(() =>
+  import('~/components/BrandContextMenu').then((m) => ({
+    default: m.BrandContextMenu,
+  })),
+)
+
+function SplashImages() {
+  return (
+    <>
+      <img
+        src="/images/logos/splash-light.png"
+        alt="TanStack"
+        className="w-24 h-24 dark:hidden"
+      />
+      <img
+        src="/images/logos/splash-dark.png"
+        alt="TanStack"
+        className="w-24 h-24 hidden dark:block"
+      />
+    </>
+  )
+}
 
 /**
  * Validate redirect URI - must be localhost or HTTPS
@@ -15,12 +41,16 @@ import { BrandContextMenu } from '~/components/BrandContextMenu'
 function validateRedirectUri(uri: string): boolean {
   try {
     const url = new URL(uri)
+    if (url.username || url.password) {
+      return false
+    }
+
     if (
       url.hostname === 'localhost' ||
       url.hostname === '127.0.0.1' ||
       url.hostname === '[::1]'
     ) {
-      return true
+      return url.protocol === 'http:' || url.protocol === 'https:'
     }
     if (url.protocol === 'https:') {
       return true
@@ -32,13 +62,13 @@ function validateRedirectUri(uri: string): boolean {
 }
 
 const searchSchema = v.object({
-  client_id: v.string(),
-  redirect_uri: v.string(),
-  code_challenge: v.string(),
-  code_challenge_method: v.optional(v.string()),
-  state: v.optional(v.string()),
-  scope: v.optional(v.string()),
-  response_type: v.optional(v.string()),
+  client_id: v.optional(v.pipe(v.string(), v.maxLength(8192))),
+  redirect_uri: v.optional(v.pipe(v.string(), v.maxLength(2048))),
+  code_challenge: v.optional(v.pipe(v.string(), v.maxLength(256))),
+  code_challenge_method: v.optional(v.pipe(v.string(), v.maxLength(32))),
+  state: v.optional(v.pipe(v.string(), v.maxLength(2048))),
+  scope: v.optional(v.pipe(v.string(), v.maxLength(512))),
+  response_type: v.optional(v.pipe(v.string(), v.maxLength(64))),
 })
 
 export const Route = createFileRoute('/oauth/authorize')({
@@ -135,21 +165,21 @@ export const Route = createFileRoute('/oauth/authorize')({
 })
 
 function SplashImage() {
-  const isDark = useIsDark()
+  const fallback = (
+    <div className="cursor-pointer">
+      <SplashImages />
+    </div>
+  )
 
   return (
     <div className="flex items-center justify-center mb-4">
-      <BrandContextMenu className="cursor-pointer">
-        <img
-          src={
-            isDark
-              ? '/images/logos/splash-dark.png'
-              : '/images/logos/splash-light.png'
-          }
-          alt="TanStack"
-          className="w-24 h-24"
-        />
-      </BrandContextMenu>
+      <ClientOnly fallback={fallback}>
+        <React.Suspense fallback={fallback}>
+          <LazyBrandContextMenu className="cursor-pointer">
+            <SplashImages />
+          </LazyBrandContextMenu>
+        </React.Suspense>
+      </ClientOnly>
     </div>
   )
 }
diff --git a/src/routes/oauth/register.ts b/src/routes/oauth/register.ts
index b67eeb7d6..3c778a1e5 100644
--- a/src/routes/oauth/register.ts
+++ b/src/routes/oauth/register.ts
@@ -1,5 +1,53 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { setResponseHeader } from '@tanstack/react-start/server'
+import {
+  isRecord,
+  jsonResponse,
+  readJsonBody,
+  validateJsonRequest,
+} from '~/utils/api-boundary.server'
+import {
+  createRegisteredClientId,
+  validateRedirectUri,
+} from '~/auth/oauthClient.server'
+
+const MAX_OAUTH_REGISTRATION_BYTES = 16 * 1024
+const MAX_OAUTH_REDIRECT_URIS = 10
+const MAX_OAUTH_REDIRECT_URI_TOTAL_LENGTH = 4096
+
+function oauthRegistrationError(
+  error: string,
+  errorDescription: string,
+  status: number,
+) {
+  return jsonResponse(
+    {
+      error,
+      error_description: errorDescription,
+    },
+    { status },
+  )
+}
+
+function readClientName(body: Record<string, unknown>) {
+  const clientName = body.client_name
+  if (typeof clientName !== 'string') {
+    return 'OAuth Client'
+  }
+
+  return clientName.trim().slice(0, 100) || 'OAuth Client'
+}
+
+function readRedirectUris(body: Record<string, unknown>) {
+  const redirectUris = body.redirect_uris
+  if (!Array.isArray(redirectUris)) {
+    return []
+  }
+
+  return redirectUris
+    .filter((uri) => typeof uri === 'string' && uri.length <= 2_048)
+    .map((uri) => uri.trim())
+}
 
 /**
  * OAuth 2.0 Dynamic Client Registration (RFC 7591)
@@ -8,7 +56,6 @@ import { setResponseHeader } from '@tanstack/react-start/server'
  * Since we use PKCE and public clients, we don't need client secrets.
  */
 export const Route = createFileRoute('/oauth/register')({
-  // @ts-expect-error server property not in route types yet
   server: {
     handlers: {
       POST: async ({ request }: { request: Request }) => {
@@ -27,67 +74,78 @@ export const Route = createFileRoute('/oauth/register')({
         )
 
         try {
-          const body = await request.json()
+          const guardError = validateJsonRequest(request, {
+            maxContentLength: MAX_OAUTH_REGISTRATION_BYTES,
+            requireSameOrigin: false,
+          })
+          if (guardError) {
+            return oauthRegistrationError(
+              'invalid_client_metadata',
+              guardError.message,
+              guardError.status,
+            )
+          }
+
+          const bodyResult = await readJsonBody(request, {
+            maxContentLength: MAX_OAUTH_REGISTRATION_BYTES,
+          })
+          if (!bodyResult.success || !isRecord(bodyResult.body)) {
+            return oauthRegistrationError(
+              'invalid_client_metadata',
+              'Could not parse client metadata',
+              400,
+            )
+          }
 
           // Extract client metadata from request
-          const clientName = body.client_name || 'OAuth Client'
-          const redirectUris = body.redirect_uris || []
+          const clientName = readClientName(bodyResult.body)
+          const redirectUris = readRedirectUris(bodyResult.body)
+
+          if (
+            redirectUris.length === 0 ||
+            redirectUris.length > MAX_OAUTH_REDIRECT_URIS ||
+            redirectUris.join('').length > MAX_OAUTH_REDIRECT_URI_TOTAL_LENGTH
+          ) {
+            return oauthRegistrationError(
+              'invalid_redirect_uri',
+              `Provide 1-${MAX_OAUTH_REDIRECT_URIS} redirect URIs`,
+              400,
+            )
+          }
 
           // Validate redirect URIs
           for (const uri of redirectUris) {
-            try {
-              const url = new URL(uri)
-              const isLocalhost =
-                url.hostname === 'localhost' ||
-                url.hostname === '127.0.0.1' ||
-                url.hostname === '[::1]'
-              const isHttps = url.protocol === 'https:'
-
-              if (!isLocalhost && !isHttps) {
-                return new Response(
-                  JSON.stringify({
-                    error: 'invalid_redirect_uri',
-                    error_description:
-                      'Redirect URIs must be localhost or HTTPS',
-                  }),
-                  { status: 400 },
-                )
-              }
-            } catch {
-              return new Response(
-                JSON.stringify({
-                  error: 'invalid_redirect_uri',
-                  error_description: 'Invalid redirect URI format',
-                }),
-                { status: 400 },
+            if (!validateRedirectUri(uri)) {
+              return oauthRegistrationError(
+                'invalid_redirect_uri',
+                'Redirect URIs must be localhost HTTP(S) or HTTPS',
+                400,
               )
             }
           }
 
-          // Generate a client ID based on the client name
-          // For public clients with PKCE, we don't need to store these
-          // The client_id is deterministic based on client_name for consistency
-          const clientId = generateClientId(clientName)
+          const clientId = await createRegisteredClientId({
+            clientName,
+            redirectUris,
+          })
 
           // Return the client registration response per RFC 7591
-          return new Response(
-            JSON.stringify({
+          return jsonResponse(
+            {
               client_id: clientId,
               client_name: clientName,
               redirect_uris: redirectUris,
               token_endpoint_auth_method: 'none',
               grant_types: ['authorization_code', 'refresh_token'],
               response_types: ['code'],
-            }),
+            },
             { status: 201 },
           )
         } catch {
-          return new Response(
-            JSON.stringify({
-              error: 'invalid_client_metadata',
-              error_description: 'Could not parse client metadata',
-            }),
-            { status: 400 },
+          return oauthRegistrationError(
+            'invalid_client_metadata',
+            'Could not parse client metadata',
+            400,
           )
         }
       },
@@ -105,24 +163,3 @@ export const Route = createFileRoute('/oauth/register')({
     },
   },
 })
-
-/**
- * Generate a deterministic client ID from the client name.
- * Since we use PKCE for all clients, we don't need to store client registrations.
- * The client_id just needs to be consistent for the same client_name.
- */
-function generateClientId(clientName: string): string {
-  // Create a simple hash-based ID from the client name
-  // This ensures the same client always gets the same ID
-  let hash = 0
-  for (let i = 0; i < clientName.length; i++) {
-    const char = clientName.charCodeAt(i)
-    hash = (hash << 5) - hash + char
-    hash = hash & hash // Convert to 32bit integer
-  }
-  const hashStr = Math.abs(hash).toString(16).padStart(8, '0')
-  return `ts-${hashStr}-${clientName
-    .toLowerCase()
-    .replace(/[^a-z0-9]/g, '-')
-    .slice(0, 20)}`
-}
diff --git a/src/routes/oauth/token.ts b/src/routes/oauth/token.ts
index 71c98c8b0..1f2da6730 100644
--- a/src/routes/oauth/token.ts
+++ b/src/routes/oauth/token.ts
@@ -4,9 +4,68 @@ import {
   exchangeAuthorizationCode,
   refreshAccessToken,
 } from '~/auth/oauthClient.server'
+import {
+  isRecord,
+  readJsonBody,
+  readTextBody,
+} from '~/utils/api-boundary.server'
+
+const MAX_OAUTH_TOKEN_BODY_BYTES = 16 * 1024
+
+function oauthTokenError(
+  error: string,
+  errorDescription: string,
+  status: number,
+) {
+  return new Response(
+    JSON.stringify({
+      error,
+      error_description: errorDescription,
+    }),
+    { status },
+  )
+}
+
+async function readLimitedFormBody(request: Request) {
+  const result = await readTextBody(request, MAX_OAUTH_TOKEN_BODY_BYTES)
+  if (!result.success) {
+    return {
+      error: oauthTokenError(
+        'invalid_request',
+        result.error.message,
+        result.error.status,
+      ),
+    }
+  }
+
+  return { params: new URLSearchParams(result.text) }
+}
+
+async function readLimitedJsonBody(request: Request) {
+  const result = await readJsonBody(request, {
+    maxContentLength: MAX_OAUTH_TOKEN_BODY_BYTES,
+  })
+  if (!result.success || !isRecord(result.body)) {
+    return {
+      error: oauthTokenError(
+        'invalid_request',
+        'Could not parse token request body',
+        400,
+      ),
+    }
+  }
+
+  const params = new URLSearchParams()
+  for (const [key, value] of Object.entries(result.body)) {
+    if (typeof value === 'string') {
+      params.set(key, value)
+    }
+  }
+
+  return { params }
+}
 
 export const Route = createFileRoute('/oauth/token')({
-  // @ts-expect-error server property not in route types yet
   server: {
     handlers: {
       POST: async ({ request }: { request: Request }) => {
@@ -31,19 +90,18 @@ export const Route = createFileRoute('/oauth/token')({
         let params: URLSearchParams
 
         if (contentType.includes('application/x-www-form-urlencoded')) {
-          const body = await request.text()
-          params = new URLSearchParams(body)
+          const result = await readLimitedFormBody(request)
+          if ('error' in result) return result.error
+          params = result.params
         } else if (contentType.includes('application/json')) {
-          const body = await request.json()
-          params = new URLSearchParams(body)
+          const result = await readLimitedJsonBody(request)
+          if ('error' in result) return result.error
+          params = result.params
         } else {
-          return new Response(
-            JSON.stringify({
-              error: 'invalid_request',
-              error_description:
-                'Content-Type must be application/x-www-form-urlencoded or application/json',
-            }),
-            { status: 400 },
+          return oauthTokenError(
+            'invalid_request',
+            'Content-Type must be application/x-www-form-urlencoded or application/json',
+            400,
           )
         }
 
@@ -55,13 +113,10 @@ export const Route = createFileRoute('/oauth/token')({
           const redirectUri = params.get('redirect_uri')
 
           if (!code || !codeVerifier || !redirectUri) {
-            return new Response(
-              JSON.stringify({
-                error: 'invalid_request',
-                error_description:
-                  'Missing required parameters: code, code_verifier, redirect_uri',
-              }),
-              { status: 400 },
+            return oauthTokenError(
+              'invalid_request',
+              'Missing required parameters: code, code_verifier, redirect_uri',
+              400,
             )
           }
 
@@ -72,13 +127,10 @@ export const Route = createFileRoute('/oauth/token')({
           })
 
           if (!result.success) {
-            return new Response(
-              JSON.stringify({
-                error: result.error,
-                error_description:
-                  'The authorization code is invalid or has expired',
-              }),
-              { status: 400 },
+            return oauthTokenError(
+              result.error,
+              'The authorization code is invalid or has expired',
+              400,
             )
           }
 
@@ -98,25 +150,20 @@ export const Route = createFileRoute('/oauth/token')({
           const refreshToken = params.get('refresh_token')
 
           if (!refreshToken) {
-            return new Response(
-              JSON.stringify({
-                error: 'invalid_request',
-                error_description: 'Missing required parameter: refresh_token',
-              }),
-              { status: 400 },
+            return oauthTokenError(
+              'invalid_request',
+              'Missing required parameter: refresh_token',
+              400,
             )
           }
 
           const result = await refreshAccessToken(refreshToken)
 
           if (!result.success) {
-            return new Response(
-              JSON.stringify({
-                error: result.error,
-                error_description:
-                  'The refresh token is invalid or has expired',
-              }),
-              { status: 400 },
+            return oauthTokenError(
+              result.error,
+              'The refresh token is invalid or has expired',
+              400,
             )
           }
 
@@ -131,13 +178,10 @@ export const Route = createFileRoute('/oauth/token')({
           )
         }
 
-        return new Response(
-          JSON.stringify({
-            error: 'unsupported_grant_type',
-            error_description:
-              'Only authorization_code and refresh_token grant types are supported',
-          }),
-          { status: 400 },
+        return oauthTokenError(
+          'unsupported_grant_type',
+          'Only authorization_code and refresh_token grant types are supported',
+          400,
         )
       },
       OPTIONS: async ({ request }: { request: Request }) => {
diff --git a/src/routes/partners-embed.tsx b/src/routes/partners-embed.tsx
index 1774b9ecc..954965c33 100644
--- a/src/routes/partners-embed.tsx
+++ b/src/routes/partners-embed.tsx
@@ -3,7 +3,9 @@ import { partners } from '~/utils/partners'
 import { PartnersGrid } from '~/components/PartnersGrid'
 
 const cacheHeaders = {
-  'Cache-Control': 'max-age=300, s-maxage=3600, stale-while-revalidate',
+  'Cache-Control': 'public, max-age=300',
+  'Cloudflare-CDN-Cache-Control':
+    'public, max-age=3600, stale-while-revalidate=300',
 }
 
 export const Route = createFileRoute('/partners-embed')({
@@ -39,7 +41,10 @@ function PartnersEmbed() {
           }}
         />
         <div className="px-4 w-full">
-          <PartnersGrid partnersList={activePartners} />
+          <PartnersGrid
+            analyticsPlacement="embed_grid"
+            partnersList={activePartners}
+          />
         </div>
       </div>
     </>
diff --git a/src/routes/partners.$partner.tsx b/src/routes/partners.$partner.tsx
new file mode 100644
index 000000000..2dfbfd228
--- /dev/null
+++ b/src/routes/partners.$partner.tsx
@@ -0,0 +1,242 @@
+import * as React from 'react'
+import { Link, createFileRoute, notFound } from '@tanstack/react-router'
+import { ArrowUpRight, CheckCircle2, CircleDashed } from 'lucide-react'
+import { Footer } from '~/components/Footer'
+import { Card } from '~/components/Card'
+import { Button } from '~/ui'
+import { seo } from '~/utils/seo'
+import { PartnerImage, partnerCategoryLabels } from '~/utils/partners'
+import { trackEvent } from '~/utils/analytics'
+import {
+  findPartnerForPage,
+  getPartnerJsonLd,
+  getPartnerLibraryLabels,
+  getPartnerPageCopy,
+  getPartnerPageDescription,
+  getPartnerPageTitle,
+} from '~/utils/partner-pages'
+
+export const Route = createFileRoute('/partners/$partner')({
+  loader: ({ params }) => {
+    if (!findPartnerForPage(params.partner)) {
+      throw notFound()
+    }
+  },
+  head: ({ params }) => {
+    const partner = findPartnerForPage(params.partner)
+
+    if (!partner) {
+      return {
+        meta: seo({
+          title: 'Partner Not Found | TanStack',
+          description:
+            'The requested TanStack partner page could not be found.',
+        }),
+      }
+    }
+
+    return {
+      meta: seo({
+        title: getPartnerPageTitle(partner),
+        description: getPartnerPageDescription(partner),
+      }),
+      scripts: [
+        {
+          type: 'application/ld+json',
+          children: JSON.stringify(getPartnerJsonLd(partner)),
+        },
+      ],
+    }
+  },
+  component: PartnerDetailPage,
+})
+
+function PartnerDetailPage() {
+  const { partner: partnerId } = Route.useParams()
+  const partner = findPartnerForPage(partnerId)
+
+  if (!partner) {
+    throw notFound()
+  }
+
+  const copy = getPartnerPageCopy(partner)
+  const libraries = getPartnerLibraryLabels(partner)
+  const isActive = partner.status === 'active'
+
+  React.useEffect(() => {
+    trackEvent('partner_viewed', {
+      partner_id: partner.id,
+      placement: 'detail',
+    })
+  }, [partner])
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <div className="flex-1 px-4 py-8 md:px-8">
+        <div className="mx-auto flex w-full max-w-5xl flex-col gap-8">
+          <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            <Link
+              to="/partners"
+              className="hover:text-blue-500 transition-colors"
+            >
+              Partners
+            </Link>
+            <span>/</span>
+            <span className="text-gray-900 dark:text-white">
+              {partner.name}
+            </span>
+          </div>
+
+          <Card className="overflow-hidden">
+            <div className="grid gap-8 p-6 md:grid-cols-[1.3fr_0.7fr] md:p-8 lg:p-10">
+              <div className="flex flex-col gap-5">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span
+                    className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide ${
+                      isActive
+                        ? 'bg-green-100 text-green-800 dark:bg-green-950/50 dark:text-green-300'
+                        : 'bg-orange-100 text-orange-800 dark:bg-orange-950/50 dark:text-orange-300'
+                    }`}
+                  >
+                    {isActive ? (
+                      <CheckCircle2 className="h-3.5 w-3.5" />
+                    ) : (
+                      <CircleDashed className="h-3.5 w-3.5" />
+                    )}
+                    {isActive ? 'Current Partner' : 'Previous Partner'}
+                  </span>
+                  <span className="inline-flex rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-blue-700 dark:bg-blue-950/40 dark:text-blue-300">
+                    {partnerCategoryLabels[partner.category]}
+                  </span>
+                </div>
+
+                <div>
+                  <h1 className="text-3xl font-black tracking-tight text-gray-950 dark:text-white md:text-5xl">
+                    {partner.name}
+                  </h1>
+                  {partner.tagline ? (
+                    <p className="mt-3 text-lg text-gray-600 dark:text-gray-300 md:text-xl">
+                      {partner.tagline}
+                    </p>
+                  ) : null}
+                </div>
+
+                <p className="max-w-3xl text-base leading-7 text-gray-700 dark:text-gray-300 md:text-lg">
+                  {copy.description}
+                </p>
+
+                <p className="max-w-3xl text-sm leading-6 text-gray-600 dark:text-gray-400">
+                  {copy.status}
+                </p>
+
+                <div className="flex flex-wrap gap-3">
+                  <Button
+                    as="a"
+                    href={partner.href}
+                    target="_blank"
+                    rel="noreferrer"
+                    onClick={() => {
+                      let destinationHost: string | undefined
+                      try {
+                        destinationHost = new URL(partner.href).host
+                      } catch {
+                        // Bad/relative href — track without host rather than
+                        // throwing and dropping the event entirely.
+                      }
+                      trackEvent('partner_clicked', {
+                        partner_id: partner.id,
+                        placement: 'detail',
+                        destination: 'external',
+                        destination_host: destinationHost,
+                      })
+                    }}
+                  >
+                    Visit {partner.name}
+                    <ArrowUpRight className="h-4 w-4" />
+                  </Button>
+                  <Button as={Link} to="/partners" variant="ghost">
+                    Browse All Partners
+                  </Button>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-center">
+                <div className="flex w-full max-w-xs items-center justify-center rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-950/40">
+                  <PartnerImage config={partner.image} alt={partner.name} />
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          <div className="grid gap-6 md:grid-cols-2">
+            <Card>
+              <div className="p-6 md:p-8">
+                <h2 className="text-2xl font-black text-gray-950 dark:text-white">
+                  Why We Like {partner.name}
+                </h2>
+                <p className="mt-4 text-base leading-7 text-gray-700 dark:text-gray-300">
+                  {copy.whyGreat}
+                </p>
+              </div>
+            </Card>
+
+            <Card>
+              <div className="p-6 md:p-8">
+                <h2 className="text-2xl font-black text-gray-950 dark:text-white">
+                  Why It Works Well With TanStack
+                </h2>
+                <p className="mt-4 text-base leading-7 text-gray-700 dark:text-gray-300">
+                  {copy.whyTanStack}
+                </p>
+              </div>
+            </Card>
+          </div>
+
+          {(libraries.length > 0 || partner.startDate) && (
+            <Card>
+              <div className="p-6 md:p-8">
+                <h2 className="text-2xl font-black text-gray-950 dark:text-white">
+                  Quick Fit
+                </h2>
+                <div className="mt-5 grid gap-6 md:grid-cols-2">
+                  {libraries.length > 0 ? (
+                    <div>
+                      <h3 className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                        Relevant Libraries
+                      </h3>
+                      <div className="mt-3 flex flex-wrap gap-2">
+                        {libraries.map((library) => (
+                          <span
+                            key={library}
+                            className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300"
+                          >
+                            {library}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  ) : null}
+
+                  {partner.startDate ? (
+                    <div>
+                      <h3 className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                        Partner Window
+                      </h3>
+                      <p className="mt-3 text-base leading-7 text-gray-700 dark:text-gray-300">
+                        {partner.endDate
+                          ? `${partner.startDate} - ${partner.endDate}`
+                          : `${partner.startDate} - Present`}
+                      </p>
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+            </Card>
+          )}
+        </div>
+      </div>
+
+      <Footer />
+    </div>
+  )
+}
diff --git a/src/routes/partners.index.tsx b/src/routes/partners.index.tsx
new file mode 100644
index 000000000..9e9c40dca
--- /dev/null
+++ b/src/routes/partners.index.tsx
@@ -0,0 +1,699 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { Footer } from '~/components/Footer'
+import { Card } from '~/components/Card'
+import {
+  partners,
+  PartnerImage,
+  partnerTierFlares,
+  partnerTierLabels,
+  type PartnerTier,
+} from '~/utils/partners'
+import {
+  getPartnerPlacementAnalyticsMetadata,
+  getPartnersForPlacement,
+  getPartnerTierGroupsForPlacement,
+  type PartnerPlacementContext,
+} from '~/utils/partner-placement'
+import { usePartnerPlacementContext } from '~/utils/usePartnerPlacementContext'
+import { seo } from '~/utils/seo'
+import { Library } from '~/libraries'
+import { useState } from 'react'
+import * as React from 'react'
+import { ListFilter, X } from 'lucide-react'
+import { Button } from '~/ui'
+import { startProject } from '~/libraries/start'
+import { routerProject } from '~/libraries/router'
+import { queryProject } from '~/libraries/query'
+import { tableProject } from '~/libraries/table'
+import { configProject } from '~/libraries/config'
+import { dbProject } from '~/libraries/db'
+import { aiProject } from '~/libraries/ai'
+import { formProject } from '~/libraries/form'
+import { pacerProject } from '~/libraries/pacer'
+import { rangerProject } from '~/libraries/ranger'
+import { storeProject } from '~/libraries/store'
+import { virtualProject } from '~/libraries/virtual'
+import { libraryIdSchema } from '~/utils/schemas'
+import { trackEvent, useTrackedImpression } from '~/utils/analytics'
+import * as v from 'valibot'
+
+const availableLibraries = [
+  startProject,
+  routerProject,
+  queryProject,
+  tableProject,
+  formProject,
+  virtualProject,
+  rangerProject,
+  storeProject,
+  pacerProject,
+  dbProject,
+  aiProject,
+  configProject,
+]
+
+const statusSchema = v.picklist(['active', 'inactive'])
+
+const searchSchema = v.object({
+  libraries: v.fallback(v.optional(v.array(libraryIdSchema)), undefined),
+  status: v.fallback(v.optional(statusSchema, 'active'), 'active'),
+})
+
+type PartnersSearch = v.InferOutput<typeof searchSchema>
+type PartnersSearchUpdates = {
+  libraries?: Library['id'][] | undefined
+  status?: 'active' | 'inactive' | undefined
+}
+
+const defaultPartnersSearch = {
+  status: 'active',
+} satisfies PartnersSearch
+
+function normalizePartnersSearch(
+  search: Partial<PartnersSearch>,
+): PartnersSearch {
+  return {
+    libraries: search.libraries?.length ? search.libraries : undefined,
+    status: search.status ?? defaultPartnersSearch.status,
+  }
+}
+
+export const Route = createFileRoute('/partners/')({
+  component: PartnersIndexPage,
+  validateSearch: searchSchema,
+  staticData: {
+    includeSearchInCanonical: true,
+  },
+  head: () => ({
+    meta: seo({
+      title: 'Partners',
+      description:
+        'Companies and organizations supporting TanStack and our open source mission',
+    }),
+  }),
+})
+
+interface FilterProps {
+  selectedLibraries: Library['id'][] | undefined
+  selectedStatus: 'active' | 'inactive' | undefined
+  onLibrariesChange: (libraries: Library['id'][] | undefined) => void
+  onStatusChange: (status: 'active' | 'inactive' | undefined) => void
+  onClearAll: () => void
+}
+
+function PartnersFilter({
+  selectedLibraries,
+  selectedStatus,
+  onLibrariesChange,
+  onStatusChange,
+  onClearAll,
+}: FilterProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const toggleLibrary = (libraryId: Library['id']) => {
+    if (!selectedLibraries) {
+      onLibrariesChange([libraryId])
+      return
+    }
+
+    if (selectedLibraries.includes(libraryId)) {
+      const newLibraries = selectedLibraries.filter((id) => id !== libraryId)
+      onLibrariesChange(newLibraries.length > 0 ? newLibraries : undefined)
+    } else {
+      onLibrariesChange([...selectedLibraries, libraryId])
+    }
+  }
+
+  const clearFilters = () => {
+    onClearAll()
+    setIsOpen(false)
+  }
+
+  React.useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Element
+      if (!target.closest('[data-filter-dropdown]')) {
+        setIsOpen(false)
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('click', handleClickOutside)
+      return () => document.removeEventListener('click', handleClickOutside)
+    }
+  }, [isOpen])
+
+  const hasFilters =
+    (selectedLibraries && selectedLibraries.length > 0) || selectedStatus
+  const filterCount =
+    (selectedLibraries?.length || 0) + (selectedStatus ? 1 : 0)
+
+  return (
+    <div className="mb-6">
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="relative" data-filter-dropdown>
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="inline-flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+          >
+            <ListFilter className="w-4 h-4" />
+            Filter Partners
+            {hasFilters && (
+              <span className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-0.5 rounded-full text-xs">
+                {filterCount}
+              </span>
+            )}
+          </button>
+
+          {isOpen && (
+            <div className="absolute top-full left-0 mt-2 w-80 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50">
+              <div className="p-4">
+                <div className="flex items-center justify-between mb-4">
+                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                    Filter Options
+                  </span>
+                  {hasFilters && (
+                    <button
+                      onClick={clearFilters}
+                      className="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+                    >
+                      Clear All
+                    </button>
+                  )}
+                </div>
+
+                <div className="mb-4">
+                  <label
+                    htmlFor="partner-status"
+                    className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2"
+                  >
+                    Partner Status
+                  </label>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => {
+                        onStatusChange(
+                          selectedStatus === 'active' ? undefined : 'active',
+                        )
+                      }}
+                      className={`px-3 py-2 rounded-md text-sm transition-colors ${
+                        selectedStatus === 'active'
+                          ? 'bg-green-500 text-white'
+                          : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
+                      }`}
+                    >
+                      Current Partners
+                    </button>
+                    <button
+                      onClick={() => {
+                        onStatusChange(
+                          selectedStatus === 'inactive'
+                            ? undefined
+                            : 'inactive',
+                        )
+                      }}
+                      className={`px-3 py-2 rounded-md text-sm transition-colors ${
+                        selectedStatus === 'inactive'
+                          ? 'bg-orange-500 text-white'
+                          : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
+                      }`}
+                    >
+                      Previous Partners
+                    </button>
+                  </div>
+                </div>
+
+                <div>
+                  <label
+                    htmlFor="library-filter"
+                    className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2"
+                  >
+                    Filter by Libraries
+                  </label>
+                  <div className="grid grid-cols-2 gap-2">
+                    {availableLibraries.map((library) => {
+                      const isSelected =
+                        selectedLibraries?.includes(library.id) || false
+
+                      const bgStyle = library.bgStyle ?? 'bg-gray-500'
+
+                      return (
+                        <button
+                          key={library.id}
+                          onClick={() => toggleLibrary(library.id)}
+                          className={`text-left px-3 py-2 rounded-md text-sm transition-colors ${
+                            isSelected
+                              ? `${bgStyle} text-white`
+                              : `${bgStyle}/30 text-gray-600 dark:text-gray-400 hover:${bgStyle}/40`
+                          }`}
+                        >
+                          {library.name}
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {hasFilters && (
+          <div className="flex flex-wrap gap-2">
+            {selectedLibraries?.map((libraryId) => {
+              const library = availableLibraries.find(
+                (lib) => lib.id === libraryId,
+              )
+              return (
+                <span
+                  key={libraryId}
+                  className="inline-flex items-center gap-1 px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-md text-xs"
+                >
+                  {library?.name || libraryId}
+                  <button
+                    onClick={() => toggleLibrary(libraryId)}
+                    className="hover:bg-blue-200 dark:hover:bg-blue-800 rounded p-0.5 transition-colors"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                </span>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function getFilteredPartners(search: PartnersSearch) {
+  const normalizedSearch = normalizePartnersSearch(search)
+
+  return partners.filter((partner) => {
+    if (normalizedSearch.status && partner.status !== normalizedSearch.status) {
+      return false
+    }
+
+    if (normalizedSearch.libraries && normalizedSearch.libraries.length > 0) {
+      return partner.libraries?.some((library) =>
+        normalizedSearch.libraries?.includes(library as Library['id']),
+      )
+    }
+
+    return true
+  })
+}
+
+type CardSize = 'gold' | 'silver' | 'bronze' | 'flat'
+
+const cardSizeLayout: Record<
+  CardSize,
+  {
+    padding: string
+    logoFrame: string
+    logoMaxHeight: string
+    titleSize: string
+    showDescription: boolean
+  }
+> = {
+  gold: {
+    padding: 'p-8',
+    logoFrame: 'h-32',
+    logoMaxHeight: 'max-h-24',
+    titleSize: 'text-2xl',
+    showDescription: true,
+  },
+  silver: {
+    padding: 'p-6',
+    logoFrame: 'h-24',
+    logoMaxHeight: 'max-h-16',
+    titleSize: 'text-lg',
+    showDescription: true,
+  },
+  bronze: {
+    padding: 'p-4',
+    logoFrame: 'h-16',
+    logoMaxHeight: 'max-h-10',
+    titleSize: 'text-sm',
+    showDescription: false,
+  },
+  flat: {
+    padding: 'p-6',
+    logoFrame: 'h-24',
+    logoMaxHeight: 'max-h-16',
+    titleSize: 'text-xl',
+    showDescription: true,
+  },
+}
+
+function PartnerDirectoryCard({
+  isShowingPrevious,
+  placementContext,
+  partner,
+  slotIndex,
+  size = 'flat',
+}: {
+  isShowingPrevious: boolean
+  placementContext: PartnerPlacementContext
+  partner: (typeof partners)[number]
+  slotIndex: number
+  size?: CardSize
+}) {
+  const analyticsMetadata = getPartnerPlacementAnalyticsMetadata(
+    partner,
+    placementContext,
+  )
+  const ref = useTrackedImpression<'partner_viewed', HTMLAnchorElement>({
+    event: 'partner_viewed',
+    props: {
+      partner_id: partner.id,
+      placement: 'directory',
+      ...analyticsMetadata,
+      slot_index: slotIndex,
+    },
+  })
+
+  const duration =
+    isShowingPrevious && partner.startDate && partner.endDate
+      ? `${partner.startDate} - ${partner.endDate}`
+      : null
+
+  const layout = cardSizeLayout[size]
+
+  return (
+    <Link
+      ref={ref}
+      to="/partners/$partner"
+      params={{ partner: partner.id }}
+      className="block"
+      onClick={() => {
+        trackEvent('partner_clicked', {
+          partner_id: partner.id,
+          placement: 'directory',
+          destination: 'internal_detail',
+          ...analyticsMetadata,
+          slot_index: slotIndex,
+        })
+      }}
+    >
+      <Card className="overflow-hidden hover:border-blue-500/40 hover:shadow-lg transition-all h-full">
+        <div className={`${layout.padding} h-full flex flex-col`}>
+          <div
+            className={`mb-4 ${layout.logoFrame} flex items-center justify-center`}
+          >
+            <PartnerImage
+              className={`w-full object-contain ${layout.logoMaxHeight}`}
+              config={partner.image}
+              alt={partner.name}
+            />
+          </div>
+          <h3 className={`text-center ${layout.titleSize} font-semibold mb-2`}>
+            {partner.name}
+          </h3>
+          {partner.tagline && (
+            <p className="text-center text-xs text-gray-600 dark:text-gray-400 mb-4">
+              {partner.tagline}
+            </p>
+          )}
+          {layout.showDescription && (
+            <div className="text-sm flex-1">
+              {isShowingPrevious ? (
+                <>
+                  {duration && (
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-3 text-center">
+                      {duration}
+                    </p>
+                  )}
+                  {partner.libraries && partner.libraries.length > 0 && (
+                    <div className="flex flex-wrap gap-1 justify-center">
+                      {partner.libraries.map((library) => (
+                        <span
+                          key={library}
+                          className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 rounded-md"
+                        >
+                          {library}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </>
+              ) : (
+                <p className="text-gray-700 dark:text-gray-300">
+                  {partner.llmDescription}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+      </Card>
+    </Link>
+  )
+}
+
+const tierGridCols: Record<PartnerTier, string> = {
+  gold: 'grid grid-cols-1 lg:grid-cols-2 gap-6',
+  silver: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6',
+  bronze: 'grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4',
+}
+
+function TierSectionHeader({ tier }: { tier: PartnerTier }) {
+  const flare = partnerTierFlares[tier]
+  return (
+    <div className="flex items-center gap-4 mb-8">
+      <div
+        className={`h-px flex-1 bg-linear-to-r from-transparent ${flare.gradientStops}`}
+      />
+      <div
+        className={`flex items-center gap-2 px-3 py-1 rounded-full ${flare.labelColor}`}
+      >
+        <span className={flare.iconColor}>{flare.icon}</span>
+        <span className="text-xs uppercase tracking-[0.2em] font-bold">
+          {partnerTierLabels[tier]}
+        </span>
+      </div>
+      <div
+        className={`h-px flex-1 bg-linear-to-l from-transparent ${flare.gradientStops}`}
+      />
+    </div>
+  )
+}
+
+function TieredPartnerSections({
+  partners: allPartners,
+  placementContext,
+}: {
+  partners: Array<(typeof partners)[number]>
+  placementContext: PartnerPlacementContext
+}) {
+  const sections = getPartnerTierGroupsForPlacement(
+    allPartners,
+    placementContext,
+  )
+
+  let slotIndex = 0
+
+  return (
+    <div className="space-y-16">
+      {sections.map((section) => (
+        <section key={section.tier}>
+          <TierSectionHeader tier={section.tier} />
+          <div className={tierGridCols[section.tier]}>
+            {section.partners.map((partner) => {
+              const index = slotIndex++
+              return (
+                <PartnerDirectoryCard
+                  key={partner.id}
+                  isShowingPrevious={false}
+                  placementContext={placementContext}
+                  partner={partner}
+                  slotIndex={index}
+                  size={section.tier}
+                />
+              )
+            })}
+          </div>
+        </section>
+      ))}
+    </div>
+  )
+}
+
+function PartnersIndexPage() {
+  const search = normalizePartnersSearch(Route.useSearch())
+  const navigate = Route.useNavigate()
+
+  const trackFiltersChanged = React.useCallback(
+    (
+      nextSearch: PartnersSearch,
+      change: 'libraries_changed' | 'status_changed' | 'cleared_all',
+    ) => {
+      trackEvent('partner_filter_applied', {
+        change,
+        library_filters: nextSearch.libraries?.join(',') ?? '',
+        // Status defaults to 'active' even when the user hasn't touched it,
+        // so we can't distinguish "explicitly chose active" from "untouched".
+        // Pass the value as-is; doc explains this is a known limitation.
+        status_filter: nextSearch.status ?? null,
+        result_count: getFilteredPartners(nextSearch).length,
+      })
+    },
+    [],
+  )
+
+  const updateFilters = (
+    updates: PartnersSearchUpdates,
+    change: 'libraries_changed' | 'status_changed',
+  ) => {
+    const nextSearch = normalizePartnersSearch({
+      ...search,
+      ...updates,
+    })
+
+    navigate({
+      search: () => nextSearch,
+      replace: true,
+    })
+
+    trackFiltersChanged(nextSearch, change)
+  }
+
+  const filteredPartners = getFilteredPartners(search)
+
+  const hasStatusFilter = search.status
+  const hasLibraryFilter = search.libraries && search.libraries.length > 0
+  const hasResults = filteredPartners.length > 0
+  const isShowingPrevious = search.status === 'inactive'
+  const isShowingActive = search.status === 'active'
+  const placementContext = usePartnerPlacementContext({
+    orderStrategy: isShowingActive ? 'tier-rotated' : 'static-curated',
+    surface: 'directory',
+  })
+  const displayPartners = getPartnersForPlacement(
+    filteredPartners,
+    placementContext,
+  )
+
+  return (
+    <div className="flex flex-col max-w-full min-h-screen gap-12 p-4 md:p-8 pb-0">
+      <div className="flex-1 space-y-16 w-full max-w-4xl mx-auto">
+        <header>
+          <h1 className="text-3xl font-black">
+            {isShowingPrevious
+              ? 'Previous Partners'
+              : isShowingActive
+                ? 'Current Partners'
+                : 'Partners'}
+          </h1>
+          <p className="text-lg mt-4 text-gray-600 dark:text-gray-400">
+            {isShowingPrevious
+              ? 'Companies and organizations that have supported TanStack in the past'
+              : isShowingActive
+                ? 'Companies and organizations currently supporting TanStack and our open source mission'
+                : 'Companies and organizations supporting TanStack and our open source mission'}
+          </p>
+        </header>
+
+        <PartnersFilter
+          selectedLibraries={search.libraries}
+          selectedStatus={search.status}
+          onLibrariesChange={(libraries) =>
+            updateFilters({ libraries }, 'libraries_changed')
+          }
+          onStatusChange={(status) =>
+            updateFilters({ status }, 'status_changed')
+          }
+          onClearAll={() => {
+            navigate({ search: () => defaultPartnersSearch, replace: true })
+            trackFiltersChanged(defaultPartnersSearch, 'cleared_all')
+          }}
+        />
+
+        {hasResults ? (
+          <div>
+            {(hasStatusFilter || hasLibraryFilter) && (
+              <p className="text-sm text-gray-600 dark:text-gray-400 mb-6 text-center">
+                Showing {filteredPartners.length} partner
+                {filteredPartners.length === 1 ? '' : 's'}
+                {hasStatusFilter && (
+                  <span>
+                    {' '}
+                    ({search.status === 'inactive' ? 'previous' : 'current'})
+                  </span>
+                )}
+                {hasLibraryFilter && search.libraries && (
+                  <span>
+                    {' '}
+                    for{' '}
+                    {search.libraries.length === 1 ? 'library' : 'libraries'}:{' '}
+                    <span className="font-medium">
+                      {search.libraries.join(', ')}
+                    </span>
+                  </span>
+                )}
+              </p>
+            )}
+
+            {isShowingActive && !hasLibraryFilter ? (
+              <TieredPartnerSections
+                partners={filteredPartners}
+                placementContext={placementContext}
+              />
+            ) : (
+              <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+                {displayPartners.map((partner, slotIndex) => (
+                  <PartnerDirectoryCard
+                    key={partner.id}
+                    isShowingPrevious={isShowingPrevious}
+                    placementContext={placementContext}
+                    partner={partner}
+                    slotIndex={slotIndex}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="text-center text-gray-600 dark:text-gray-400">
+            {hasStatusFilter || hasLibraryFilter ? (
+              <div>
+                <p className="text-lg mb-4">
+                  No partners found for the selected filters.
+                </p>
+                <Button
+                  size="sm"
+                  onClick={() => navigate({ search: {}, replace: true })}
+                >
+                  View All Partners
+                </Button>
+              </div>
+            ) : (
+              <p>No partners to display.</p>
+            )}
+          </div>
+        )}
+
+        <div className="text-center py-8 border-t border-gray-200 dark:border-gray-700">
+          <h2 className="text-2xl font-semibold mb-4">
+            Interested in Partnership?
+          </h2>
+          <p className="text-gray-600 dark:text-gray-400 mb-6 max-w-xl mx-auto">
+            We're always looking for organizations that share our values and
+            want to support open source development.
+          </p>
+          <a
+            href="mailto:partners@tanstack.com?subject=TanStack Partnership Inquiry"
+            className="inline-block px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+            onClick={() => {
+              trackEvent('partner_inquiry_started', {
+                placement: 'partners_index_cta',
+              })
+            }}
+          >
+            Get in Touch
+          </a>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  )
+}
diff --git a/src/routes/partners.railway.tsx b/src/routes/partners.railway.tsx
new file mode 100644
index 000000000..bbc0b0a23
--- /dev/null
+++ b/src/routes/partners.railway.tsx
@@ -0,0 +1,813 @@
+import * as React from 'react'
+import { Link, createFileRoute } from '@tanstack/react-router'
+import {
+  ArrowUpRight,
+  Check,
+  DollarSign,
+  GitPullRequest,
+  Globe,
+  Infinity as InfinityIcon,
+  LineChart,
+  Network,
+  Plus,
+  Rocket,
+  ShieldCheck,
+  Undo2,
+} from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { Footer } from '~/components/Footer'
+import { Card } from '~/components/Card'
+import { Button } from '~/ui'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '~/components/Collapsible'
+import { CodeBlock } from '~/components/markdown/CodeBlock'
+import { seo } from '~/utils/seo'
+import { getPartnerById, PartnerImage } from '~/utils/partners'
+import { getPartnerJsonLd } from '~/utils/partner-pages'
+import { trackEvent } from '~/utils/analytics'
+
+const RAILWAY_HREF =
+  'https://railway.com/new?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page'
+const RAILWAY_DOCS_HREF =
+  'https://docs.railway.com/guides/tanstack-start?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page'
+const RAILWAY_HOME_HREF =
+  'https://railway.com/?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page'
+const RAILWAY_PRICING_HREF =
+  'https://railway.com/pricing?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page'
+
+const CONFIG_SNIPPET = `import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import { nitro } from 'nitro/vite'
+import viteReact from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [tanstackStart(), nitro(), viteReact()],
+})
+`
+
+const DEPLOY_SNIPPET = `# From your TanStack Start app directory
+railway init
+railway up
+`
+
+type FeatureIcon = React.ComponentType<{ className?: string }>
+
+const features: Array<{ Icon: FeatureIcon; title: string; desc: string }> = [
+  {
+    Icon: Rocket,
+    title: 'Node service deploys',
+    desc: 'TanStack Start builds a Node server for SSR, server functions, and static assets. Railway deploys it as a standard Node service.',
+  },
+  {
+    Icon: GitPullRequest,
+    title: 'Live PR previews',
+    desc: 'Every pull request spins up its own environment. Test routing, data, and server logic before merging.',
+  },
+  {
+    Icon: LineChart,
+    title: 'Logs, metrics, and alerts',
+    desc: 'Observability is built in. Pipe custom alerts to Slack, Discord, or email without a third-party agent.',
+  },
+  {
+    Icon: Network,
+    title: '100 Gbps private networking',
+    desc: 'Services in a project talk over private IPs at 100 Gbps. HTTP, TCP, gRPC, and WebSockets handled for you.',
+  },
+  {
+    Icon: Undo2,
+    title: 'One-click rollbacks',
+    desc: 'Every deploy is versioned. Roll back to a previous deployment instantly when something breaks.',
+  },
+  {
+    Icon: ShieldCheck,
+    title: 'Hard spending limits',
+    desc: 'Set a hard cap on what a project can spend. Billing is per-second, so you only pay for actual compute.',
+  },
+  {
+    Icon: Globe,
+    title: 'Global regions',
+    desc: 'Run your app close to your users. Pro and above can deploy to multiple regions concurrently.',
+  },
+  {
+    Icon: InfinityIcon,
+    title: 'Unlimited environments',
+    desc: 'Spin up as many staging, preview, or branch environments as your team needs. No per-env fees.',
+  },
+]
+
+const steps: Array<{ num: string; title: string; code: string }> = [
+  {
+    num: '01',
+    title: 'Create your TanStack app',
+    code: 'npx @tanstack/cli@latest create',
+  },
+  { num: '02', title: 'Install Nitro', code: 'npm install nitro' },
+  { num: '03', title: 'Add Nitro to Vite', code: 'nitro()' },
+  { num: '04', title: 'Deploy', code: 'railway init && railway up' },
+]
+
+const pricing: Array<{
+  plan: string
+  price: string
+  note: string
+  features: Array<string>
+  highlight?: boolean
+}> = [
+  {
+    plan: 'Free',
+    price: '$0',
+    note: '30-day trial with $5 credits',
+    features: [
+      'Up to 1 vCPU / 0.5 GB RAM',
+      '0.5 GB volume storage',
+      'Community support',
+      'No credit card required',
+    ],
+  },
+  {
+    plan: 'Hobby',
+    price: '$5',
+    note: 'min/month · includes $5 credits',
+    features: [
+      'Up to 48 vCPU / 48 GB RAM',
+      'Up to 5 GB storage',
+      '7-day log history',
+      'Global regions',
+    ],
+  },
+  {
+    plan: 'Pro',
+    price: '$20',
+    note: 'min/month · includes $20 credits',
+    features: [
+      'Up to 1,000 vCPU / 1 TB RAM',
+      'Up to 1 TB storage',
+      '30-day log history',
+      'Unlimited workspace seats',
+      'Concurrent global regions',
+    ],
+    highlight: true,
+  },
+  {
+    plan: 'Enterprise',
+    price: 'Custom',
+    note: 'for teams at scale',
+    features: [
+      'Up to 2,400 vCPU / 2.4 TB RAM',
+      '90-day log history',
+      'SSO + RBAC + HIPAA BAA',
+      'Dedicated VMs',
+      'Bring your own cloud',
+    ],
+  },
+]
+
+const meteredPricing: Array<[string, string]> = [
+  ['Memory', '$0.000004 / GB·sec'],
+  ['CPU', '$0.000008 / vCPU·sec'],
+  ['Egress', '$0.05 / GB'],
+]
+
+const testimonials: Array<{ quote: string; author: string; role: string }> = [
+  {
+    quote: 'We cut our hosting costs by 75% migrating from Heroku to Railway.',
+    author: 'Dillon Chen',
+    role: 'Founder at Common',
+  },
+  {
+    quote:
+      "I've moved $4.5k/month from AWS and $1k/month from Heroku. My Railway bill is about $300/month.",
+    author: 'John Nunemaker',
+    role: 'Founder at BoxOutSports',
+  },
+  {
+    quote: 'We went from a $1,600 Heroku bill to a $300 Railway bill.',
+    author: 'Brandon Gell',
+    role: 'Head of Consulting at Every',
+  },
+]
+
+const libraries = [
+  'Start',
+  'Router',
+  'Query',
+  'Table',
+  'Form',
+  'DB',
+  'AI',
+  'Virtual',
+  'Pacer',
+  'Store',
+  'Devtools',
+  'CLI',
+]
+
+const libDetails: Array<{ label: string; desc: string }> = [
+  {
+    label: 'TanStack Start',
+    desc: 'Full SSR, streaming, and server functions run on Railway as a standard Node service built through Nitro.',
+  },
+  {
+    label: 'TanStack Router',
+    desc: 'File-based routing apps deploy in SSR and SPA modes. PR previews mean every route change gets a live test environment.',
+  },
+  {
+    label: 'TanStack Query',
+    desc: "Pair with Railway-managed Postgres or Redis. Private networking keeps your server queries inside Railway's infrastructure.",
+  },
+  {
+    label: 'TanStack DB',
+    desc: "Railway's managed databases integrate with TanStack DB's sync engine via 100 Gbps private networking.",
+  },
+]
+
+const faqs: Array<{ q: string; a: string }> = [
+  {
+    q: 'Does Railway support TanStack Start SSR and streaming?',
+    a: 'Yes. TanStack Start builds a Node server for SSR, streaming, server functions, and static assets. Follow the Nitro setup in the Start hosting docs, then deploy that Node service to Railway.',
+  },
+  {
+    q: 'Can I run a database alongside my TanStack app?',
+    a: "Absolutely. Railway lets you provision Postgres, MySQL, Redis, or MongoDB in the same project as your app. They communicate over Railway's 100 Gbps private network — no VPC setup needed.",
+  },
+  {
+    q: 'How does Railway pricing actually work?',
+    a: 'Railway charges by the second based on actual CPU and memory usage — not provisioned box sizes. The Hobby plan starts at $5/month (which includes $5 of credits). Most hobby TanStack projects run for free or under $5/month.',
+  },
+  {
+    q: 'What makes Railway different from Vercel or Render?',
+    a: 'Railway is a full-stack cloud — not just a frontend host. You can run your TanStack app server, managed databases, background workers, cron jobs, and private networking all in one project. Railway also has hard spending limits, which no other major cloud provider offers.',
+  },
+  {
+    q: 'Does Railway have PR preview environments?',
+    a: 'Yes — every pull request automatically gets its own live preview environment. For TanStack teams, this means you can test routing changes, data fetching behavior, and server logic before merging.',
+  },
+  {
+    q: 'Can I migrate an existing TanStack app to Railway?',
+    a: 'Yes. If your app already builds to a Node server or has a Dockerfile, Railway can deploy it from GitHub. For TanStack Start, make sure the Nitro Vite setup and Node start script are in place.',
+  },
+]
+
+const PAGE_TITLE = 'Deploy TanStack to Railway — Official Gold Partner'
+const PAGE_DESCRIPTION =
+  'Railway gives TanStack teams a single place to run app services, databases, and supporting infrastructure. Nitro-powered TanStack Start deploys, live PR previews, 100 Gbps private networking, and hard spending limits. Pay per second for the compute you actually use.'
+
+function getFaqJsonLd() {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faqs.map((faq) => ({
+      '@type': 'Question',
+      name: faq.q,
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: faq.a,
+      },
+    })),
+  }
+}
+
+export const Route = createFileRoute('/partners/railway')({
+  head: () => {
+    const partner = getPartnerById('railway')
+
+    return {
+      meta: seo({
+        title: PAGE_TITLE,
+        description: PAGE_DESCRIPTION,
+        keywords:
+          'deploy tanstack to railway, tanstack start railway, tanstack router railway, railway hosting, tanstack deployment, railway gold sponsor',
+        image: 'https://tanstack.com/og.png',
+      }),
+      scripts: [
+        ...(partner
+          ? [
+              {
+                type: 'application/ld+json',
+                children: JSON.stringify(getPartnerJsonLd(partner)),
+              },
+            ]
+          : []),
+        {
+          type: 'application/ld+json',
+          children: JSON.stringify(getFaqJsonLd()),
+        },
+      ],
+    }
+  },
+  component: RailwayPartnerPage,
+})
+
+function CheckBadge() {
+  return (
+    <span className="mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white">
+      <Check className="h-2.5 w-2.5" strokeWidth={3} />
+    </span>
+  )
+}
+
+function trackRailwayClick() {
+  trackEvent('partner_clicked', {
+    partner_id: 'railway',
+    placement: 'detail',
+    destination: 'external',
+    destination_host: 'railway.com',
+  })
+}
+
+function RailwayCodeExample({
+  code,
+  lang,
+  title,
+}: {
+  code: string
+  lang: string
+  title: string
+}) {
+  return (
+    <CodeBlock dataCodeTitle={title}>
+      <code className={`language-${lang}`}>{code}</code>
+    </CodeBlock>
+  )
+}
+
+function RailwayPartnerPage() {
+  const [openFaq, setOpenFaq] = React.useState<number | null>(null)
+
+  React.useEffect(() => {
+    trackEvent('partner_viewed', {
+      partner_id: 'railway',
+      placement: 'detail',
+    })
+  }, [])
+
+  const partner = getPartnerById('railway')
+
+  return (
+    <div className="flex min-h-screen flex-col bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100">
+      <div className="mx-auto w-full max-w-4xl flex-1 px-4 pb-16 pt-6 md:px-8">
+        <nav className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+          <Link
+            to="/partners"
+            className="transition-colors hover:text-blue-500"
+          >
+            Partners
+          </Link>
+          <span>/</span>
+          <span className="text-gray-900 dark:text-white">Railway</span>
+        </nav>
+
+        {/* Hero */}
+        <section className="border-b border-gray-200 pb-10 pt-10 dark:border-gray-800">
+          <div className="mb-5 flex items-center gap-4">
+            {partner ? (
+              <div className="flex h-12 w-44 items-center justify-start">
+                <PartnerImage
+                  config={partner.image}
+                  alt="Railway"
+                  className="max-h-10 w-auto"
+                />
+              </div>
+            ) : null}
+            <div>
+              <span className="text-[11px] font-medium uppercase tracking-[0.08em] text-gray-500 dark:text-gray-400">
+                Gold Sponsor · Deployment & Hosting
+              </span>
+              <div className="mt-1 flex items-center gap-2">
+                <span className="inline-block h-2 w-2 rounded-full bg-emerald-500" />
+                <span className="text-xs text-gray-500 dark:text-gray-400">
+                  Railway V3 — faster and cheaper
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <h1 className="text-4xl font-black leading-[1.1] tracking-tight text-gray-950 dark:text-white md:text-5xl">
+            Ship TanStack apps
+            <br />
+            peacefully with Railway
+          </h1>
+
+          <p className="mt-5 max-w-xl text-base leading-relaxed text-gray-600 dark:text-gray-300 md:text-lg">
+            Railway gives TanStack teams a single place to run app services,
+            databases, and supporting infrastructure. Deploy a TanStack Start
+            app from GitHub or the CLI — and only pay per-second for the compute
+            you actually use.
+          </p>
+
+          <p className="mt-3 max-w-xl text-sm italic leading-relaxed text-gray-500 dark:text-gray-400">
+            "Services that took 1 week to configure elsewhere take 1 day to spin
+            up in Railway." — Daniel Lobaton, CTO at G2X
+          </p>
+
+          <div className="mt-7 flex flex-wrap gap-3">
+            <Button
+              as="a"
+              href={RAILWAY_HREF}
+              target="_blank"
+              rel="noreferrer"
+              onClick={trackRailwayClick}
+              size="lg"
+              className="bg-gray-950 text-white border-gray-950 hover:bg-gray-800 dark:bg-white dark:text-gray-950 dark:border-white dark:hover:bg-gray-200"
+            >
+              Deploy free in 2 minutes
+              <ArrowUpRight className="h-4 w-4" />
+            </Button>
+            <Button as="a" href="#how-it-works" variant="ghost" size="lg">
+              See how it works
+            </Button>
+          </div>
+          <p className="mt-3 text-xs text-gray-500 dark:text-gray-400">
+            No credit card required. $5 in trial credits on signup.
+          </p>
+        </section>
+
+        {/* Stats */}
+        <section className="grid grid-cols-2 gap-x-8 gap-y-5 border-b border-gray-200 py-7 sm:flex sm:flex-wrap sm:gap-10 dark:border-gray-800">
+          {[
+            ['2M+', 'Developers on Railway'],
+            ['< 2 min', 'Time to first deploy'],
+            ['100 Gbps', 'Private networking'],
+            ['$0', 'To get started'],
+          ].map(([value, label]) => (
+            <div key={label}>
+              <div className="text-2xl font-bold tracking-tight">{value}</div>
+              <div className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+                {label}
+              </div>
+            </div>
+          ))}
+        </section>
+
+        {/* Features */}
+        <section className="py-10">
+          <h2 className="text-2xl font-black tracking-tight md:text-3xl">
+            Why TanStack teams choose Railway
+          </h2>
+          <p className="mt-2 max-w-xl text-sm leading-relaxed text-gray-600 dark:text-gray-300 md:text-base">
+            Railway eliminates infrastructure complexity so your team ships
+            faster. Here's what makes it the right fit for TanStack developers.
+          </p>
+          <div className="mt-6 grid gap-3 sm:grid-cols-2">
+            {features.map(({ Icon, title, desc }) => (
+              <Card key={title} className="p-5 shadow-none">
+                <Icon className="mb-3 h-5 w-5 text-gray-500 dark:text-gray-400" />
+                <div className="text-sm font-semibold">{title}</div>
+                <p className="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
+                  {desc}
+                </p>
+              </Card>
+            ))}
+          </div>
+        </section>
+
+        {/* How it works */}
+        <section
+          id="how-it-works"
+          className="border-t border-gray-200 py-10 dark:border-gray-800"
+        >
+          <h2 className="text-2xl font-black tracking-tight md:text-3xl">
+            From zero to deployed in 4 steps
+          </h2>
+          <p className="mt-2 max-w-xl text-sm leading-relaxed text-gray-600 dark:text-gray-300 md:text-base">
+            Railway runs TanStack Start as a standard Node service. Add Nitro to
+            your Vite config, then deploy from GitHub or the Railway CLI.
+          </p>
+
+          <div className="mt-6 flex flex-col gap-3">
+            {steps.map(({ num, title, code }) => (
+              <Card
+                key={num}
+                className="flex items-start gap-5 p-4 shadow-none md:p-5"
+              >
+                <div className="min-w-[28px] pt-0.5 font-mono text-xs font-bold text-gray-400 dark:text-gray-500">
+                  {num}
+                </div>
+                <div>
+                  <div className="text-sm font-semibold">{title}</div>
+                  <code className="mt-2 inline-block rounded-md bg-gray-100 px-2.5 py-1 font-mono text-xs dark:bg-gray-800">
+                    {code}
+                  </code>
+                </div>
+              </Card>
+            ))}
+          </div>
+
+          <div className="mt-6 grid gap-4 md:grid-cols-2">
+            <RailwayCodeExample
+              code={CONFIG_SNIPPET}
+              lang="ts"
+              title="vite.config.ts"
+            />
+            <RailwayCodeExample
+              code={DEPLOY_SNIPPET}
+              lang="bash"
+              title="terminal"
+            />
+          </div>
+
+          <div className="mt-6 flex flex-wrap items-center gap-3">
+            <Button
+              as="a"
+              href={RAILWAY_HREF}
+              target="_blank"
+              rel="noreferrer"
+              onClick={trackRailwayClick}
+              className="bg-gray-950 text-white border-gray-950 hover:bg-gray-800 dark:bg-white dark:text-gray-950 dark:border-white dark:hover:bg-gray-200"
+            >
+              Deploy on Railway
+              <ArrowUpRight className="h-4 w-4" />
+            </Button>
+            <Button
+              as="a"
+              href={RAILWAY_DOCS_HREF}
+              target="_blank"
+              rel="noreferrer"
+              onClick={trackRailwayClick}
+              variant="ghost"
+            >
+              Read the deployment guide
+            </Button>
+          </div>
+        </section>
+
+        {/* Library fit */}
+        <section className="border-t border-gray-200 py-10 dark:border-gray-800">
+          <h2 className="text-2xl font-black tracking-tight md:text-3xl">
+            Works with every TanStack library
+          </h2>
+          <p className="mt-2 max-w-xl text-sm leading-relaxed text-gray-600 dark:text-gray-300 md:text-base">
+            From full-stack apps with TanStack Start to lightweight React apps
+            using Router and Query — Railway deploys them all.
+          </p>
+
+          <div className="mt-5 flex flex-wrap gap-2">
+            {libraries.map((lib) => (
+              <span
+                key={lib}
+                className="rounded-md border border-gray-200 bg-gray-50 px-3 py-1 text-xs font-medium dark:border-gray-800 dark:bg-gray-900"
+              >
+                {lib}
+              </span>
+            ))}
+          </div>
+
+          <div className="mt-6 grid gap-3 sm:grid-cols-2">
+            {libDetails.map(({ label, desc }) => (
+              <Card key={label} className="p-4 shadow-none">
+                <div className="flex items-start gap-2">
+                  <CheckBadge />
+                  <span className="text-sm font-semibold">{label}</span>
+                </div>
+                <p className="mt-2 text-xs leading-relaxed text-gray-600 dark:text-gray-400">
+                  {desc}
+                </p>
+              </Card>
+            ))}
+          </div>
+        </section>
+
+        {/* Pricing */}
+        <section className="border-t border-gray-200 py-10 dark:border-gray-800">
+          <h2 className="text-2xl font-black tracking-tight md:text-3xl">
+            Pricing that scales with you
+          </h2>
+          <p className="mt-2 max-w-xl text-sm leading-relaxed text-gray-600 dark:text-gray-300 md:text-base">
+            Railway charges by the second based on actual usage — not
+            provisioned box sizes. Most TanStack hobby projects run free or
+            under $5/month.
+          </p>
+
+          <div className="mt-7 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+            {pricing.map(({ plan, price, note, features: pf, highlight }) => (
+              <Card
+                key={plan}
+                className={twMerge(
+                  'relative p-5 shadow-none',
+                  highlight && 'border-2 border-blue-500 dark:border-blue-400',
+                )}
+              >
+                {highlight ? (
+                  <span className="absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-blue-50 px-2.5 py-1 text-[11px] font-semibold text-blue-700 dark:bg-blue-950/60 dark:text-blue-300">
+                    Most popular
+                  </span>
+                ) : null}
+                <div className="text-sm font-bold">{plan}</div>
+                <div className="mt-1 text-2xl font-bold tracking-tight">
+                  {price}
+                </div>
+                <div className="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+                  {note}
+                </div>
+                <ul className="mt-4 flex flex-col gap-2">
+                  {pf.map((feat) => (
+                    <li
+                      key={feat}
+                      className="flex items-start gap-2 text-xs text-gray-600 dark:text-gray-400"
+                    >
+                      <CheckBadge />
+                      <span>{feat}</span>
+                    </li>
+                  ))}
+                </ul>
+              </Card>
+            ))}
+          </div>
+
+          <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-3">
+            {meteredPricing.map(([key, value]) => (
+              <div
+                key={key}
+                className="rounded-lg bg-gray-50 px-4 py-3 dark:bg-gray-900"
+              >
+                <div className="text-xs text-gray-500 dark:text-gray-400">
+                  {key}
+                </div>
+                <div className="mt-1 font-mono text-sm font-semibold">
+                  {value}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-6 flex flex-wrap items-center gap-3">
+            <Button
+              as="a"
+              href={RAILWAY_HREF}
+              target="_blank"
+              rel="noreferrer"
+              onClick={trackRailwayClick}
+              className="bg-gray-950 text-white border-gray-950 hover:bg-gray-800 dark:bg-white dark:text-gray-950 dark:border-white dark:hover:bg-gray-200"
+            >
+              Start with $5 in credits
+              <ArrowUpRight className="h-4 w-4" />
+            </Button>
+            <Button
+              as="a"
+              href={RAILWAY_PRICING_HREF}
+              target="_blank"
+              rel="noreferrer"
+              onClick={trackRailwayClick}
+              variant="ghost"
+            >
+              Estimate your costs
+            </Button>
+          </div>
+        </section>
+
+        {/* Testimonials */}
+        <section className="border-t border-gray-200 py-10 dark:border-gray-800">
+          <h2 className="text-2xl font-black tracking-tight md:text-3xl">
+            What teams say after switching
+          </h2>
+          <p className="mt-2 max-w-xl text-sm leading-relaxed text-gray-600 dark:text-gray-300 md:text-base">
+            Real teams, real bills. These are quotes from founders and engineers
+            who moved their production workloads onto Railway.
+          </p>
+          <div className="mt-6 grid gap-3 sm:grid-cols-3">
+            {testimonials.map(({ quote, author, role }) => (
+              <Card key={author} as="figure" className="p-5 shadow-none">
+                <blockquote className="text-sm leading-relaxed">
+                  "{quote}"
+                </blockquote>
+                <figcaption className="mt-3">
+                  <div className="text-xs font-semibold">{author}</div>
+                  <div className="text-[11px] text-gray-500 dark:text-gray-400">
+                    {role}
+                  </div>
+                </figcaption>
+              </Card>
+            ))}
+          </div>
+
+          <div className="mt-6 flex flex-wrap items-center gap-3">
+            <Button
+              as="a"
+              href={RAILWAY_HREF}
+              target="_blank"
+              rel="noreferrer"
+              onClick={trackRailwayClick}
+              className="bg-gray-950 text-white border-gray-950 hover:bg-gray-800 dark:bg-white dark:text-gray-950 dark:border-white dark:hover:bg-gray-200"
+            >
+              Move your app to Railway
+              <ArrowUpRight className="h-4 w-4" />
+            </Button>
+            <span className="inline-flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
+              <DollarSign className="h-3.5 w-3.5" />
+              Per-second billing · no credit card required
+            </span>
+          </div>
+        </section>
+
+        {/* FAQ */}
+        <section className="border-t border-gray-200 py-10 dark:border-gray-800">
+          <h2 className="text-2xl font-black tracking-tight md:text-3xl">
+            Frequently asked questions
+          </h2>
+          <p className="mt-2 max-w-xl text-sm leading-relaxed text-gray-600 dark:text-gray-300 md:text-base">
+            Common questions from TanStack developers evaluating Railway.
+          </p>
+
+          <div className="mt-5 flex flex-col">
+            {faqs.map(({ q, a }, i) => {
+              const isOpen = openFaq === i
+              return (
+                <Collapsible
+                  key={q}
+                  open={isOpen}
+                  onOpenChange={(next) => setOpenFaq(next ? i : null)}
+                  className="border-b border-gray-200 dark:border-gray-800"
+                >
+                  <CollapsibleTrigger className="flex w-full items-center justify-between gap-4 py-4 text-left">
+                    <span className="text-sm font-medium md:text-[15px]">
+                      {q}
+                    </span>
+                    <Plus
+                      className={twMerge(
+                        'h-4 w-4 shrink-0 text-gray-500 transition-transform duration-200 dark:text-gray-400',
+                        isOpen && 'rotate-45',
+                      )}
+                    />
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <p className="max-w-2xl pb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
+                      {a}
+                    </p>
+                  </CollapsibleContent>
+                </Collapsible>
+              )
+            })}
+          </div>
+        </section>
+
+        {/* CTA */}
+        <section className="mt-6 rounded-2xl bg-gray-950 px-6 py-10 text-center md:px-10 md:py-12 dark:bg-gray-900">
+          <div className="inline-block rounded-full bg-white/5 px-3 py-1 text-[11px] text-gray-400">
+            Railway V3 — now faster and cheaper
+          </div>
+          <h2 className="mt-4 text-2xl font-black tracking-tight text-white md:text-3xl">
+            Ready to ship TanStack peacefully?
+          </h2>
+          <p className="mx-auto mt-3 max-w-md text-sm leading-relaxed text-gray-400">
+            No credit card required. No surprise bills. Pay only for what you
+            use.
+          </p>
+          <p className="mt-1 text-xs text-gray-500">
+            Most customers save ~40% by switching to Railway.
+          </p>
+
+          <div className="mt-6 flex flex-wrap justify-center gap-3">
+            <Button
+              as="a"
+              href={RAILWAY_HREF}
+              target="_blank"
+              rel="noreferrer"
+              onClick={trackRailwayClick}
+              size="lg"
+              className="bg-white text-gray-950 border-white hover:bg-gray-100"
+            >
+              Deploy your TanStack app
+              <ArrowUpRight className="h-4 w-4" />
+            </Button>
+            <Button
+              as="a"
+              href={RAILWAY_DOCS_HREF}
+              target="_blank"
+              rel="noreferrer"
+              onClick={trackRailwayClick}
+              size="lg"
+              className="bg-transparent text-white border-gray-700 hover:bg-white/5"
+            >
+              Open the docs
+            </Button>
+          </div>
+        </section>
+
+        <p className="mt-6 text-center text-xs text-gray-500 dark:text-gray-400">
+          Railway is a Gold-tier TanStack sponsor.{' '}
+          <Link
+            to="/partners"
+            className="underline decoration-dotted underline-offset-2 hover:text-gray-700 dark:hover:text-gray-300"
+          >
+            Browse all TanStack partners
+          </Link>
+          .{' '}
+          <a
+            href={RAILWAY_HOME_HREF}
+            target="_blank"
+            rel="noreferrer"
+            onClick={trackRailwayClick}
+            className="underline decoration-dotted underline-offset-2 hover:text-gray-700 dark:hover:text-gray-300"
+          >
+            railway.com
+          </a>
+        </p>
+      </div>
+
+      <Footer />
+    </div>
+  )
+}
diff --git a/src/routes/partners.tsx b/src/routes/partners.tsx
index 99b80d594..185262525 100644
--- a/src/routes/partners.tsx
+++ b/src/routes/partners.tsx
@@ -1,547 +1,9 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { Footer } from '~/components/Footer'
-import { Card } from '~/components/Card'
-import { partners, PartnerImage } from '~/utils/partners'
-import { seo } from '~/utils/seo'
-import { Library } from '~/libraries'
-import { useState } from 'react'
-import * as React from 'react'
-import { ListFilter, X } from 'lucide-react'
-import { Button } from '~/ui'
-import { NetlifyImage } from '~/components/NetlifyImage'
-import { startProject } from '~/libraries/start'
-import { routerProject } from '~/libraries/router'
-import { queryProject } from '~/libraries/query'
-import { tableProject } from '~/libraries/table'
-import { configProject } from '~/libraries/config'
-import { dbProject } from '~/libraries/db'
-import { aiProject } from '~/libraries/ai'
-import { formProject } from '~/libraries/form'
-import { pacerProject } from '~/libraries/pacer'
-import { rangerProject } from '~/libraries/ranger'
-import { storeProject } from '~/libraries/store'
-import { virtualProject } from '~/libraries/virtual'
-import { libraryIdSchema } from '~/utils/schemas'
-
-const availableLibraries = [
-  startProject,
-  routerProject,
-  queryProject,
-  tableProject,
-  formProject,
-  virtualProject,
-  rangerProject,
-  storeProject,
-  pacerProject,
-  dbProject,
-  aiProject,
-  configProject,
-]
-
-import * as v from 'valibot'
-
-const statusSchema = v.picklist(['active', 'inactive'])
-
-const searchSchema = v.object({
-  libraries: v.fallback(v.optional(v.array(libraryIdSchema)), undefined),
-  status: v.fallback(v.optional(statusSchema, 'active'), 'active'),
-})
+import { Outlet, createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/partners')({
-  component: RouteComp,
-  validateSearch: searchSchema,
-  head: () => ({
-    meta: seo({
-      title: 'Partners',
-      description:
-        'Companies and organizations supporting TanStack and our open source mission',
-    }),
-  }),
+  component: PartnersLayout,
 })
 
-function ContributionDonut({
-  score,
-  totalScore,
-}: {
-  score: number
-  totalScore: number
-}) {
-  const normalizedScore = totalScore > 0 ? score / totalScore : 0
-  const percentage = normalizedScore * 100
-  const radius = 16
-  const circumference = 2 * Math.PI * radius
-  const strokeDashoffset = circumference - normalizedScore * circumference
-
-  return (
-    <div className="flex items-center gap-2">
-      <svg width="40" height="40" viewBox="0 0 40 40" className="shrink-0">
-        <circle
-          cx="20"
-          cy="20"
-          r={radius}
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="5"
-          className="text-gray-200 dark:text-gray-700"
-        />
-        <circle
-          cx="20"
-          cy="20"
-          r={radius}
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="5"
-          strokeDasharray={circumference}
-          strokeDashoffset={strokeDashoffset}
-          strokeLinecap="round"
-          className="text-blue-500"
-          transform="rotate(-90 20 20)"
-        />
-      </svg>
-      <div className="flex flex-col">
-        <span className="text-sm font-semibold">{percentage.toFixed(1)}%</span>
-        <span className="text-[10px] text-gray-500 dark:text-gray-400">
-          current support
-        </span>
-      </div>
-    </div>
-  )
-}
-
-interface FilterProps {
-  selectedLibraries: Library['id'][] | undefined
-  selectedStatus: 'active' | 'inactive' | undefined
-  onLibrariesChange: (libraries: Library['id'][] | undefined) => void
-  onStatusChange: (status: 'active' | 'inactive' | undefined) => void
-  onClearAll: () => void
-}
-function PartnersFilter({
-  selectedLibraries,
-  selectedStatus,
-  onLibrariesChange,
-  onStatusChange,
-  onClearAll,
-}: FilterProps) {
-  const [isOpen, setIsOpen] = useState(false)
-
-  const toggleLibrary = (libraryId: Library['id']) => {
-    if (!selectedLibraries) {
-      onLibrariesChange([libraryId])
-      return
-    }
-
-    if (selectedLibraries.includes(libraryId)) {
-      const newLibraries = selectedLibraries.filter((id) => id !== libraryId)
-      onLibrariesChange(newLibraries.length > 0 ? newLibraries : undefined)
-    } else {
-      onLibrariesChange([...selectedLibraries, libraryId])
-    }
-  }
-
-  const clearFilters = () => {
-    onClearAll()
-    setIsOpen(false)
-  }
-
-  // Close dropdown when clicking outside
-  React.useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as Element
-      if (!target.closest('[data-filter-dropdown]')) {
-        setIsOpen(false)
-      }
-    }
-
-    if (isOpen) {
-      document.addEventListener('click', handleClickOutside)
-      return () => document.removeEventListener('click', handleClickOutside)
-    }
-  }, [isOpen])
-
-  const hasFilters =
-    (selectedLibraries && selectedLibraries.length > 0) || selectedStatus
-  const filterCount =
-    (selectedLibraries?.length || 0) + (selectedStatus ? 1 : 0)
-
-  return (
-    <div className="mb-6">
-      <div className="flex items-center gap-3 flex-wrap">
-        {/* Filter dropdown trigger */}
-        <div className="relative" data-filter-dropdown>
-          <button
-            onClick={() => setIsOpen(!isOpen)}
-            className="inline-flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
-          >
-            <ListFilter className="w-4 h-4" />
-            Filter Partners
-            {hasFilters && (
-              <span className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-0.5 rounded-full text-xs">
-                {filterCount}
-              </span>
-            )}
-          </button>
-
-          {/* Dropdown menu */}
-          {isOpen && (
-            <div className="absolute top-full left-0 mt-2 w-80 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50">
-              <div className="p-4">
-                <div className="flex items-center justify-between mb-4">
-                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                    Filter Options
-                  </span>
-                  {hasFilters && (
-                    <button
-                      onClick={clearFilters}
-                      className="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
-                    >
-                      Clear All
-                    </button>
-                  )}
-                </div>
-
-                {/* Status filter */}
-                <div className="mb-4">
-                  <label
-                    htmlFor="partner-status"
-                    className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2"
-                  >
-                    Partner Status
-                  </label>
-                  <div className="flex gap-2">
-                    <button
-                      onClick={() => {
-                        // Toggle: if currently inactive, turn off filter, otherwise set to inactive
-                        onStatusChange(
-                          selectedStatus === 'active' ? undefined : 'active',
-                        )
-                      }}
-                      className={`px-3 py-2 rounded-md text-sm transition-colors ${
-                        selectedStatus === 'active'
-                          ? 'bg-green-500 text-white'
-                          : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
-                      }`}
-                    >
-                      Current Partners
-                    </button>
-                    <button
-                      onClick={() => {
-                        // Toggle: if currently inactive, turn off filter, otherwise set to inactive
-                        onStatusChange(
-                          selectedStatus === 'inactive'
-                            ? undefined
-                            : 'inactive',
-                        )
-                      }}
-                      className={`px-3 py-2 rounded-md text-sm transition-colors ${
-                        selectedStatus === 'inactive'
-                          ? 'bg-orange-500 text-white'
-                          : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
-                      }`}
-                    >
-                      Previous Partners
-                    </button>
-                  </div>
-                </div>
-
-                {/* Library filter */}
-                <div>
-                  <label
-                    htmlFor="library-filter"
-                    className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-2"
-                  >
-                    Filter by Libraries
-                  </label>
-                  <div className="grid grid-cols-2 gap-2">
-                    {availableLibraries.map((library) => {
-                      const isSelected =
-                        selectedLibraries?.includes(library.id) || false
-
-                      const bgStyle = library.bgStyle ?? 'bg-gray-500'
-
-                      return (
-                        <button
-                          key={library.id}
-                          onClick={() => toggleLibrary(library.id)}
-                          className={`text-left px-3 py-2 rounded-md text-sm transition-colors ${
-                            isSelected
-                              ? `${bgStyle} text-white`
-                              : `${bgStyle}/30 text-gray-600 dark:text-gray-400 hover:${bgStyle}/40`
-                          }`}
-                        >
-                          {library.name}
-                        </button>
-                      )
-                    })}
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Current filter chips */}
-        {hasFilters && (
-          <div className="flex flex-wrap gap-2">
-            {/* Library chips */}
-            {selectedLibraries?.map((libraryId) => {
-              const library = availableLibraries.find(
-                (lib) => lib.id === libraryId,
-              )
-              return (
-                <span
-                  key={libraryId}
-                  className="inline-flex items-center gap-1 px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-md text-xs"
-                >
-                  {library?.name || libraryId}
-                  <button
-                    onClick={() => toggleLibrary(libraryId)}
-                    className="hover:bg-blue-200 dark:hover:bg-blue-800 rounded p-0.5 transition-colors"
-                  >
-                    <X className="w-3 h-3" />
-                  </button>
-                </span>
-              )
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-function RouteComp() {
-  const search = Route.useSearch()
-  const navigate = Route.useNavigate()
-
-  const updateFilters = (updates: {
-    libraries?: Library['id'][] | undefined
-    status?: 'active' | 'inactive' | undefined
-  }) => {
-    navigate({
-      search: (s: typeof search) => ({
-        ...s,
-        ...updates,
-      }),
-      replace: true,
-    })
-  }
-
-  // Filter partners based on selected criteria
-  const filteredPartners = partners.filter((partner) => {
-    // Status filter - if no status specified, show all partners
-    if (search.status && partner.status !== search.status) {
-      return false
-    }
-
-    // Library filter
-    if (search.libraries && search.libraries.length > 0) {
-      const selectedLibraries = search.libraries
-      // Include partners that match any of the selected libraries
-      return partner.libraries?.some((lib) =>
-        selectedLibraries.includes(lib as Library['id']),
-      )
-    }
-
-    return true
-  })
-
-  const totalScore = filteredPartners.reduce(
-    (sum, partner) => sum + (partner.score ?? 0),
-    0,
-  )
-
-  const hasStatusFilter = search.status
-  const hasLibraryFilter = search.libraries && search.libraries.length > 0
-  const hasResults = filteredPartners.length > 0
-  const isShowingPrevious = search.status === 'inactive'
-  const isShowingActive = search.status === 'active'
-
-  return (
-    <div className="flex flex-col max-w-full min-h-screen gap-12 p-4 md:p-8 pb-0">
-      <div className="flex-1 space-y-16 w-full max-w-4xl mx-auto">
-        <header className="">
-          <h1 className="text-3xl font-black">
-            {isShowingPrevious
-              ? 'Previous Partners'
-              : isShowingActive
-                ? 'Current Partners'
-                : 'Partners'}
-          </h1>
-          <p className="text-lg mt-4 text-gray-600 dark:text-gray-400">
-            {isShowingPrevious
-              ? 'Companies and organizations that have supported TanStack in the past'
-              : isShowingActive
-                ? 'Companies and organizations currently supporting TanStack and our open source mission'
-                : 'Companies and organizations supporting TanStack and our open source mission'}
-          </p>
-        </header>
-
-        <PartnersFilter
-          selectedLibraries={search.libraries}
-          selectedStatus={search.status}
-          onLibrariesChange={(libraries) => updateFilters({ libraries })}
-          onStatusChange={(status) => updateFilters({ status })}
-          onClearAll={() => navigate({ search: {}, replace: true })}
-        />
-
-        {hasResults ? (
-          <div>
-            {(hasStatusFilter || hasLibraryFilter) && (
-              <p className="text-sm text-gray-600 dark:text-gray-400 mb-6 text-center">
-                Showing {filteredPartners.length} partner
-                {filteredPartners.length === 1 ? '' : 's'}
-                {hasStatusFilter && (
-                  <span>
-                    {' '}
-                    ({search.status === 'inactive' ? 'previous' : 'current'})
-                  </span>
-                )}
-                {hasLibraryFilter && search.libraries && (
-                  <span>
-                    {' '}
-                    for{' '}
-                    {search.libraries.length === 1
-                      ? 'library'
-                      : 'libraries'}:{' '}
-                    <span className="font-medium">
-                      {search.libraries.join(', ')}
-                    </span>
-                  </span>
-                )}
-              </p>
-            )}
-
-            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
-              {filteredPartners.map((partner) => {
-                const duration =
-                  isShowingPrevious && partner.startDate && partner.endDate
-                    ? `${partner.startDate} - ${partner.endDate}`
-                    : null
-
-                return (
-                  <Card
-                    key={partner.id}
-                    as="a"
-                    href={partner.href}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="overflow-hidden"
-                  >
-                    <div className="p-6">
-                      <div className="mb-4 h-24 flex items-center justify-center">
-                        <PartnerImage
-                          config={partner.image}
-                          alt={partner.name}
-                        />
-                      </div>
-                      <h3 className="text-center text-xl font-semibold mb-4">
-                        {partner.name}
-                      </h3>
-                      {partner.score != null && !isShowingPrevious && (
-                        <div className="flex justify-center mb-4">
-                          <ContributionDonut
-                            score={partner.score}
-                            totalScore={totalScore}
-                          />
-                        </div>
-                      )}
-                      <div className="text-sm">
-                        {isShowingPrevious ? (
-                          <>
-                            {duration && (
-                              <p className="text-sm text-gray-600 dark:text-gray-400 mb-2 text-center">
-                                {duration}
-                              </p>
-                            )}
-                            {partner.libraries &&
-                              partner.libraries.length > 0 && (
-                                <div className="flex flex-wrap gap-1 justify-center">
-                                  {partner.libraries.map((library) => (
-                                    <span
-                                      key={library}
-                                      className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 rounded-md"
-                                    >
-                                      {library}
-                                    </span>
-                                  ))}
-                                </div>
-                              )}
-                          </>
-                        ) : (
-                          partner.content
-                        )}
-                      </div>
-                    </div>
-                  </Card>
-                )
-              })}
-            </div>
-          </div>
-        ) : (
-          <div className="text-center text-gray-600 dark:text-gray-400">
-            {hasStatusFilter || hasLibraryFilter ? (
-              <div>
-                <p className="text-lg mb-4">
-                  No partners found for the selected filters.
-                </p>
-                <Button
-                  size="sm"
-                  onClick={() => navigate({ search: {}, replace: true })}
-                >
-                  View All Partners
-                </Button>
-              </div>
-            ) : (
-              <p>No partners to display.</p>
-            )}
-          </div>
-        )}
-
-        <div className="text-center py-8 border-t border-gray-200 dark:border-gray-700">
-          <h2 className="text-2xl font-semibold mb-4">
-            Interested in Partnership?
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 mb-6 max-w-xl mx-auto">
-            We're always looking for organizations that share our values and
-            want to support open source development.
-          </p>
-          <a
-            href="mailto:partners@tanstack.com?subject=TanStack Partnership Inquiry"
-            className="inline-block px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
-          >
-            Get in Touch
-          </a>
-        </div>
-
-        <div className="text-center py-8 border-t border-gray-200 dark:border-gray-700">
-          <a
-            href="#lifetime-support-share"
-            className="anchor-heading *:scroll-my-20 *:lg:scroll-my-4"
-          >
-            <h2
-              id="lifetime-support-share"
-              className="text-2xl font-semibold mb-4"
-            >
-              Lifetime Support Share
-            </h2>
-          </a>
-          <p className="text-gray-600 dark:text-gray-400 mb-6 max-w-xl mx-auto">
-            This chart is a percentage-based visualization of the lifetime
-            support each partner has rendered to TanStack. It is updated every 6
-            months.
-          </p>
-          <div className="flex justify-center">
-            <NetlifyImage
-              src="/images/total-support-share.png"
-              alt="Lifetime Support Share chart showing percentage-based contribution of partners to TanStack"
-              className="rounded-lg shadow-lg"
-              width={600}
-              height={706}
-            />
-          </div>
-        </div>
-      </div>
-      <Footer />
-    </div>
-  )
+function PartnersLayout() {
+  return <Outlet />
 }
diff --git a/src/routes/robots[.]txt.ts b/src/routes/robots[.]txt.ts
new file mode 100644
index 000000000..38be841b1
--- /dev/null
+++ b/src/routes/robots[.]txt.ts
@@ -0,0 +1,25 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { setResponseHeader } from '@tanstack/react-start/server'
+import { generateRobotsTxt, getSiteOrigin } from '~/utils/sitemap'
+
+export const Route = createFileRoute('/robots.txt')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const content = generateRobotsTxt(getSiteOrigin())
+
+        setResponseHeader('Content-Type', 'text/plain; charset=utf-8')
+        setResponseHeader(
+          'Cache-Control',
+          'public, max-age=300, must-revalidate',
+        )
+        setResponseHeader(
+          'Cloudflare-CDN-Cache-Control',
+          'public, max-age=3600, stale-while-revalidate=3600',
+        )
+
+        return new Response(content)
+      },
+    },
+  },
+})
diff --git a/src/routes/rss[.]xml.ts b/src/routes/rss[.]xml.ts
index fda597515..732b7474c 100644
--- a/src/routes/rss[.]xml.ts
+++ b/src/routes/rss[.]xml.ts
@@ -1,6 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { setResponseHeader } from '@tanstack/react-start/server'
-import { getPublishedPosts, formatAuthors } from '~/utils/blog'
+import { getPublishedPosts } from '~/utils/blog'
+import { formatAuthors, publishedDateToUTCString } from '~/utils/blog-format'
 
 function escapeXml(unsafe: string): string {
   return unsafe
@@ -19,7 +20,7 @@ function generateRSSFeed() {
   const rssItems = posts
     .map((post) => {
       const postUrl = `${siteUrl}/blog/${post.slug}`
-      const pubDate = new Date(post.published).toUTCString()
+      const pubDate = publishedDateToUTCString(post.published)
       const author = formatAuthors(post.authors)
 
       // Use excerpt if available, otherwise try to get first paragraph from content
@@ -61,7 +62,6 @@ function generateRSSFeed() {
 }
 
 export const Route = createFileRoute('/rss.xml')({
-  // @ts-expect-error server property not in route types yet
   server: {
     handlers: {
       GET: async () => {
@@ -73,8 +73,8 @@ export const Route = createFileRoute('/rss.xml')({
           'public, max-age=300, must-revalidate',
         )
         setResponseHeader(
-          'CDN-Cache-Control',
-          'max-age=3600, stale-while-revalidate=3600',
+          'Cloudflare-CDN-Cache-Control',
+          'public, max-age=3600, stale-while-revalidate=3600',
         )
 
         return new Response(content)
diff --git a/src/routes/shop.$handle.tsx b/src/routes/shop.$handle.tsx
new file mode 100644
index 000000000..a54f31370
--- /dev/null
+++ b/src/routes/shop.$handle.tsx
@@ -0,0 +1,40 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+import { ProductPage } from './shop.products.$handle'
+import { getProduct } from '~/utils/shop.functions'
+import { shopifyImageUrl } from '~/utils/shopify-format'
+import { seo } from '~/utils/seo'
+
+export const Route = createFileRoute('/shop/$handle')({
+  loader: async ({ params }) => {
+    const product = await getProduct({ data: { handle: params.handle } })
+    if (!product) throw notFound()
+    return { product }
+  },
+  head: ({ loaderData }) => {
+    const product = loaderData?.product
+    if (!product) return { meta: [] }
+    const ogImage = product.images.nodes[0]
+    return {
+      meta: seo({
+        title: `${product.seo.title ?? product.title} | TanStack Shop`,
+        description: product.seo.description ?? undefined,
+        image: ogImage
+          ? shopifyImageUrl(ogImage.url, {
+              width: 1200,
+              height: 630,
+              format: 'jpg',
+              crop: 'center',
+            })
+          : undefined,
+      }),
+    }
+  },
+  component: ShopProductPageRoute,
+})
+
+function ShopProductPageRoute() {
+  const { product } = Route.useLoaderData()
+  return (
+    <ProductPage product={product} canonicalPath={`/shop/${product.handle}`} />
+  )
+}
diff --git a/src/routes/shop.cart.tsx b/src/routes/shop.cart.tsx
new file mode 100644
index 000000000..9b2fad77f
--- /dev/null
+++ b/src/routes/shop.cart.tsx
@@ -0,0 +1,290 @@
+import * as React from 'react'
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { ShoppingCart, Trash2, X } from 'lucide-react'
+import {
+  ShopButton,
+  ShopCrumbs,
+  ShopInput,
+  ShopLabel,
+  ShopMono,
+  ShopPanel,
+  ShopQty,
+} from '~/components/shop/ui'
+import {
+  useApplyDiscountCode,
+  useCart,
+  useRemoveCartLine,
+  useRemoveDiscountCode,
+  useUpdateCartLine,
+} from '~/hooks/useCart'
+import { formatMoney, shopifyImageUrl } from '~/utils/shopify-format'
+import type { CartDetail, CartLineDetail } from '~/utils/shopify-queries'
+
+export const Route = createFileRoute('/shop/cart')({
+  component: CartPage,
+})
+
+function CartPage() {
+  const { cart } = useCart()
+  if (!cart || cart.lines.nodes.length === 0) return <EmptyCart />
+
+  const { checkoutUrl, cost, lines, totalQuantity } = cart
+  const subtotal = cost.subtotalAmount
+  const total = cost.totalAmount
+
+  return (
+    <div className="p-6 md:p-11 pb-24 max-w-[1100px] mx-auto flex flex-col gap-6">
+      <ShopCrumbs
+        crumbs={[{ label: 'Shop', href: '/shop' }, { label: 'Cart' }]}
+      />
+      <header>
+        <h1 className="font-shop-display font-bold text-[36px] leading-[1.05] tracking-[-0.02em] text-shop-text">
+          Cart
+        </h1>
+        <ShopLabel className="mt-2">
+          {totalQuantity} {totalQuantity === 1 ? 'item' : 'items'}
+        </ShopLabel>
+      </header>
+
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-8">
+        <ul className="flex flex-col">
+          {lines.nodes.map((line) => (
+            <CartLineRow key={line.id} line={line} />
+          ))}
+        </ul>
+
+        <ShopPanel className="p-5 h-fit flex flex-col gap-3.5">
+          <ShopLabel>Summary</ShopLabel>
+
+          <DiscountCodeSection cart={cart} />
+
+          <dl className="flex flex-col gap-2 text-sm">
+            <div className="flex justify-between text-shop-text-2">
+              <dt>Subtotal</dt>
+              <dd>
+                <ShopMono>
+                  {formatMoney(subtotal.amount, subtotal.currencyCode)}
+                </ShopMono>
+              </dd>
+            </div>
+            <div className="flex justify-between font-semibold pt-2 border-t border-shop-line text-shop-text">
+              <dt>Total</dt>
+              <dd>
+                <ShopMono>
+                  {formatMoney(total.amount, total.currencyCode)}
+                </ShopMono>
+              </dd>
+            </div>
+            <p className="font-shop-mono text-[11px] text-shop-muted tracking-[0.06em] mt-1">
+              Shipping and taxes calculated at checkout.
+            </p>
+          </dl>
+
+          <a
+            href={checkoutUrl}
+            className="
+              w-full h-11 rounded-md bg-shop-accent text-shop-accent-ink
+              font-semibold text-[13px] flex items-center justify-center gap-2
+              transition-[filter] hover:brightness-110 group
+            "
+          >
+            Checkout
+            <span className="transition-transform group-hover:translate-x-[3px]">
+              →
+            </span>
+          </a>
+          <Link
+            to="/shop"
+            className="text-center text-sm text-shop-text-2 hover:underline"
+          >
+            Continue shopping
+          </Link>
+        </ShopPanel>
+      </div>
+    </div>
+  )
+}
+
+function DiscountCodeSection({ cart }: { cart: CartDetail }) {
+  const apply = useApplyDiscountCode()
+  const remove = useRemoveDiscountCode()
+  const [input, setInput] = React.useState('')
+
+  const applied = cart.discountCodes.filter((c) => c.applicable)
+
+  React.useEffect(() => {
+    if (apply.isSuccess) {
+      setInput('')
+      apply.reset()
+    }
+  }, [apply.isSuccess, apply])
+
+  return (
+    <div className="flex flex-col gap-2 pt-3 border-t border-shop-line">
+      {applied.length > 0 ? (
+        <ul className="flex flex-col gap-1">
+          {applied.map((d) => (
+            <li
+              key={d.code}
+              className="flex items-center justify-between text-sm"
+            >
+              <span className="inline-flex items-center gap-1.5">
+                <ShopMono className="px-2 py-0.5 rounded bg-shop-panel-2 text-shop-text text-xs">
+                  {d.code}
+                </ShopMono>
+                <span className="text-xs text-shop-muted">applied</span>
+              </span>
+              <button
+                type="button"
+                onClick={() => remove.mutate()}
+                disabled={remove.isPending}
+                aria-label={`Remove discount ${d.code}`}
+                className="p-1 rounded-md text-shop-muted hover:text-shop-text disabled:opacity-50"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            const code = input.trim()
+            if (code) apply.mutate({ code })
+          }}
+          className="flex items-center gap-2"
+        >
+          <ShopInput
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Discount code"
+            className="flex-1"
+          />
+          <ShopButton
+            type="submit"
+            disabled={apply.isPending || input.trim().length === 0}
+          >
+            {apply.isPending ? 'Applying…' : 'Apply'}
+          </ShopButton>
+        </form>
+      )}
+      {apply.isError ? (
+        <p className="text-xs text-shop-orange">
+          {apply.error instanceof Error
+            ? apply.error.message
+            : 'Could not apply discount.'}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+function EmptyCart() {
+  return (
+    <div className="p-6 md:p-11 pb-24 max-w-[1100px] mx-auto flex flex-col gap-8">
+      <header>
+        <h1 className="font-shop-display font-bold text-[36px] leading-[1.05] tracking-[-0.02em] text-shop-text">
+          Cart
+        </h1>
+      </header>
+      <div className="flex flex-col items-center gap-4 py-16 text-center text-shop-text-2">
+        <ShoppingCart className="w-10 h-10 text-shop-muted" />
+        <p>Your cart is empty.</p>
+        <Link
+          to="/shop"
+          className="
+            inline-flex items-center gap-2 px-4 py-2.5 rounded-md
+            bg-shop-accent text-shop-accent-ink
+            font-semibold text-[13px]
+            transition-[filter] hover:brightness-110 group
+          "
+        >
+          Shop all products
+          <span className="transition-transform group-hover:translate-x-[3px]">
+            →
+          </span>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+function CartLineRow({ line }: { line: CartLineDetail }) {
+  const update = useUpdateCartLine()
+  const remove = useRemoveCartLine()
+  const { merchandise } = line
+  const options = merchandise.selectedOptions
+    .filter((o) => o.name.toLowerCase() !== 'title')
+    .map((o) => `${o.name}: ${o.value}`)
+    .join(' · ')
+
+  const isBusy = update.isPending || remove.isPending
+
+  return (
+    <li className="flex gap-4 py-5 border-b border-shop-line items-start">
+      <Link
+        to="/shop/$handle"
+        params={{ handle: merchandise.product.handle }}
+        className="shrink-0 w-24 h-24 rounded-lg border border-shop-line bg-shop-panel overflow-hidden"
+      >
+        {merchandise.image ? (
+          <img
+            src={shopifyImageUrl(merchandise.image.url, {
+              width: 200,
+              format: 'webp',
+            })}
+            alt={merchandise.image.altText ?? merchandise.product.title}
+            className="w-full h-full object-cover"
+          />
+        ) : null}
+      </Link>
+
+      <div className="flex-1 min-w-0 flex flex-col gap-2">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0">
+            <Link
+              to="/shop/$handle"
+              params={{ handle: merchandise.product.handle }}
+              className="font-semibold text-shop-text hover:underline"
+            >
+              {merchandise.product.title}
+            </Link>
+            {options ? (
+              <ShopMono className="block text-xs text-shop-muted mt-1">
+                {options}
+              </ShopMono>
+            ) : null}
+          </div>
+          <ShopMono className="shrink-0 font-medium text-shop-text">
+            {formatMoney(
+              line.cost.totalAmount.amount,
+              line.cost.totalAmount.currencyCode,
+            )}
+          </ShopMono>
+        </div>
+
+        <div className="flex items-center justify-between mt-1">
+          <ShopQty
+            quantity={line.quantity}
+            onChange={(next) => {
+              if (next <= 0) remove.mutate({ lineId: line.id })
+              else update.mutate({ lineId: line.id, quantity: next })
+            }}
+            disabled={isBusy}
+          />
+          <button
+            type="button"
+            onClick={() => remove.mutate({ lineId: line.id })}
+            disabled={isBusy}
+            aria-label="Remove from cart"
+            className="p-2 rounded-md text-shop-muted hover:text-shop-text disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <Trash2 className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </li>
+  )
+}
diff --git a/src/routes/shop.collections.$handle.tsx b/src/routes/shop.collections.$handle.tsx
new file mode 100644
index 000000000..b70fb1947
--- /dev/null
+++ b/src/routes/shop.collections.$handle.tsx
@@ -0,0 +1,177 @@
+import * as React from 'react'
+import { createFileRoute, notFound, useNavigate } from '@tanstack/react-router'
+import { useMutation } from '@tanstack/react-query'
+import * as v from 'valibot'
+import { ProductCard } from '~/components/shop/ProductCard'
+import { ShopHero } from '~/components/shop/ShopHero'
+import { ShopButton, ShopCrumbs, ShopSelect } from '~/components/shop/ui'
+import { getCollection } from '~/utils/shop.functions'
+import {
+  COLLECTION_SORT_OPTIONS,
+  collectionSortOptionId,
+  resolveCollectionSortOption,
+  type ProductListItem,
+} from '~/utils/shopify-queries'
+import { seo } from '~/utils/seo'
+
+const searchSchema = v.object({
+  sort: v.optional(
+    v.picklist([
+      'COLLECTION_DEFAULT',
+      'BEST_SELLING',
+      'CREATED:rev',
+      'PRICE',
+      'PRICE:rev',
+      'TITLE',
+    ]),
+  ),
+})
+
+type ValidCollectionSortId = NonNullable<
+  v.InferOutput<typeof searchSchema>['sort']
+>
+
+const PAGE_SIZE = 24
+
+export const Route = createFileRoute('/shop/collections/$handle')({
+  validateSearch: searchSchema,
+  loaderDeps: ({ search }) => ({ sort: search.sort }),
+  loader: async ({ params, deps }) => {
+    const sortOption = resolveCollectionSortOption(deps.sort)
+    const collection = await getCollection({
+      data: {
+        handle: params.handle,
+        first: PAGE_SIZE,
+        sortKey: sortOption.key,
+        reverse: sortOption.reverse,
+      },
+    })
+    if (!collection) throw notFound()
+    return {
+      collection,
+      sortId: collectionSortOptionId(sortOption),
+    }
+  },
+  head: ({ loaderData }) => {
+    const c = loaderData?.collection
+    if (!c) return { meta: [] }
+    return {
+      meta: seo({
+        title: `${c.seo.title ?? c.title} | TanStack Shop`,
+        description: c.seo.description ?? c.description ?? undefined,
+      }),
+    }
+  },
+  component: CollectionPage,
+  staticData: {
+    includeSearchInCanonical: true,
+  },
+})
+
+function CollectionPage() {
+  const { collection, sortId } = Route.useLoaderData()
+  const navigate = useNavigate({ from: '/shop/collections/$handle' })
+
+  const [accumulated, setAccumulated] = React.useState<Array<ProductListItem>>(
+    [],
+  )
+  const [endCursor, setEndCursor] = React.useState<string | null>(
+    collection.products.pageInfo.endCursor,
+  )
+  const [hasNextPage, setHasNextPage] = React.useState(
+    collection.products.pageInfo.hasNextPage,
+  )
+
+  React.useEffect(() => {
+    setAccumulated([])
+    setEndCursor(collection.products.pageInfo.endCursor)
+    setHasNextPage(collection.products.pageInfo.hasNextPage)
+  }, [collection])
+
+  const loadMore = useMutation({
+    mutationFn: async () => {
+      if (!endCursor) return null
+      const sortOption = resolveCollectionSortOption(sortId)
+      return getCollection({
+        data: {
+          handle: collection.handle,
+          first: PAGE_SIZE,
+          after: endCursor,
+          sortKey: sortOption.key,
+          reverse: sortOption.reverse,
+        },
+      })
+    },
+    onSuccess: (next) => {
+      if (!next) return
+      setAccumulated((prev) => [...prev, ...next.products.nodes])
+      setEndCursor(next.products.pageInfo.endCursor)
+      setHasNextPage(next.products.pageInfo.hasNextPage)
+    },
+  })
+
+  const products = [...collection.products.nodes, ...accumulated]
+
+  return (
+    <div className="p-6 md:p-11 pb-24 max-w-[1280px] mx-auto">
+      <ShopCrumbs
+        crumbs={[{ label: 'Shop', href: '/shop' }, { label: collection.title }]}
+      />
+
+      <div className="flex flex-wrap justify-between items-end gap-4 pb-5.5 border-b border-shop-line mt-6 mb-7">
+        <ShopHero title={collection.title} lede={collection.description} />
+        <label className="flex items-center gap-2 text-[12px] text-shop-muted">
+          <span>Sort</span>
+          <ShopSelect
+            value={sortId}
+            onChange={(e) => {
+              const nextId = e.target.value as ValidCollectionSortId
+              navigate({
+                to: '/shop/collections/$handle',
+                params: { handle: collection.handle },
+                search: nextId === 'COLLECTION_DEFAULT' ? {} : { sort: nextId },
+              })
+            }}
+          >
+            {COLLECTION_SORT_OPTIONS.map((opt) => (
+              <option
+                key={collectionSortOptionId(opt)}
+                value={collectionSortOptionId(opt)}
+              >
+                {opt.label}
+              </option>
+            ))}
+          </ShopSelect>
+        </label>
+      </div>
+
+      {products.length === 0 ? (
+        <div className="text-center py-24 text-shop-muted">
+          No products in this collection yet.
+        </div>
+      ) : (
+        <>
+          <section className="grid gap-x-4 gap-y-5.5 grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {products.map((product, i) => (
+              <ProductCard
+                key={product.id}
+                product={product}
+                loading={i < 8 ? 'eager' : 'lazy'}
+              />
+            ))}
+          </section>
+          {hasNextPage ? (
+            <div className="flex justify-center py-8">
+              <ShopButton
+                onClick={() => loadMore.mutate()}
+                disabled={loadMore.isPending}
+              >
+                {loadMore.isPending ? 'Loading…' : 'Load more'}
+              </ShopButton>
+            </div>
+          ) : null}
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/src/routes/shop.index.tsx b/src/routes/shop.index.tsx
new file mode 100644
index 000000000..d68fd963f
--- /dev/null
+++ b/src/routes/shop.index.tsx
@@ -0,0 +1,104 @@
+import * as React from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import {
+  ShopBrowsePage,
+  loadShopBrowsePage,
+  shopBrowseSearchSchema,
+} from './-shop-browse'
+import { seo } from '~/utils/seo'
+
+const PRODUCT_DRAWER_EXIT_MS = 420
+
+function getClosedActiveHandle(): string | null {
+  return null
+}
+
+export const Route = createFileRoute('/shop/')({
+  validateSearch: shopBrowseSearchSchema,
+  loaderDeps: ({ search }) => ({ sort: search.sort }),
+  loader: ({ deps }) => loadShopBrowsePage(deps.sort),
+  head: () => ({
+    meta: seo({
+      title: 'TanStack Shop',
+      description:
+        'Official TanStack apparel, accessories, and stickers. Show your support and rep your favorite open-source toolkit.',
+    }),
+  }),
+  component: ShopIndex,
+  staticData: {
+    includeSearchInCanonical: true,
+  },
+})
+
+function ShopIndex() {
+  const { page, sortId } = Route.useLoaderData()
+  const navigate = useNavigate({ from: '/shop' })
+  const search = Route.useSearch()
+  const [activeHandle, setActiveHandle] = React.useState(getClosedActiveHandle)
+  const [shouldNavigateAfterClose, setShouldNavigateAfterClose] =
+    React.useState(false)
+
+  React.useEffect(() => {
+    const productHandle = search.product
+    if (!productHandle) {
+      setActiveHandle(null)
+      setShouldNavigateAfterClose(false)
+      return
+    }
+    const frame = requestAnimationFrame(() => setActiveHandle(productHandle))
+    setShouldNavigateAfterClose(false)
+    return () => cancelAnimationFrame(frame)
+  }, [search.product])
+
+  React.useEffect(() => {
+    if (!shouldNavigateAfterClose || activeHandle) return
+    const timeout = setTimeout(() => {
+      navigate({
+        to: '/shop',
+        search: (prev) => ({ ...prev, product: undefined }),
+        resetScroll: false,
+      })
+    }, PRODUCT_DRAWER_EXIT_MS)
+    return () => clearTimeout(timeout)
+  }, [activeHandle, navigate, shouldNavigateAfterClose])
+
+  const openProduct = (handle: string) => {
+    navigate({
+      to: '/shop',
+      search: (prev) => ({ ...prev, product: handle }),
+      mask: {
+        to: '/shop/$handle',
+        params: { handle },
+        unmaskOnReload: true,
+      },
+      resetScroll: false,
+    })
+  }
+
+  return (
+    <ShopBrowsePage
+      page={page}
+      sortId={sortId}
+      activeType={search.type}
+      productHandle={activeHandle}
+      onTypeChange={(type) =>
+        navigate({
+          to: '/shop',
+          search: (prev) => ({ ...prev, type }),
+        })
+      }
+      onSortChange={(sort) =>
+        navigate({
+          to: '/shop',
+          search: (prev) => ({ ...prev, sort }),
+        })
+      }
+      onProductSelect={openProduct}
+      onProductClose={() => {
+        setActiveHandle(null)
+        setShouldNavigateAfterClose(true)
+      }}
+      onProductChange={openProduct}
+    />
+  )
+}
diff --git a/src/routes/shop.pages.$handle.tsx b/src/routes/shop.pages.$handle.tsx
new file mode 100644
index 000000000..0ebc7dae9
--- /dev/null
+++ b/src/routes/shop.pages.$handle.tsx
@@ -0,0 +1,55 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+import { ShopCrumbs } from '~/components/shop/ui'
+import { getPage } from '~/utils/shop.functions'
+import { seo } from '~/utils/seo'
+
+export const Route = createFileRoute('/shop/pages/$handle')({
+  loader: async ({ params }) => {
+    const page = await getPage({ data: { handle: params.handle } })
+    if (!page) throw notFound()
+    return { page }
+  },
+  head: ({ loaderData }) => {
+    const p = loaderData?.page
+    if (!p) return { meta: [] }
+    return {
+      meta: seo({
+        title: `${p.seo.title ?? p.title} | TanStack Shop`,
+        description: p.seo.description ?? p.bodySummary ?? undefined,
+      }),
+    }
+  },
+  component: ShopPage,
+})
+
+function ShopPage() {
+  const { page } = Route.useLoaderData()
+  return (
+    <article className="p-6 md:p-11 pb-24 max-w-3xl mx-auto flex flex-col gap-6">
+      <ShopCrumbs
+        crumbs={[{ label: 'Shop', href: '/shop' }, { label: page.title }]}
+      />
+      <header>
+        <h1 className="font-shop-display font-bold text-[42px] leading-[1.05] tracking-[-0.02em] text-shop-text">
+          {page.title}
+        </h1>
+      </header>
+      {page.body ? (
+        <div
+          className="
+            text-shop-text-2 text-[14px] leading-[1.6]
+            [&_a]:text-shop-accent [&_a]:underline
+            [&_strong]:text-shop-text [&_strong]:font-semibold
+            [&_h1]:text-shop-text [&_h1]:font-shop-display [&_h1]:mt-6 [&_h1]:mb-2
+            [&_h2]:text-shop-text [&_h2]:font-shop-display [&_h2]:mt-6 [&_h2]:mb-2
+            [&_h3]:text-shop-text [&_h3]:font-shop-display [&_h3]:mt-5 [&_h3]:mb-2
+          "
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: page.body }}
+        />
+      ) : (
+        <p className="text-shop-text-2">This page has no content yet.</p>
+      )}
+    </article>
+  )
+}
diff --git a/src/routes/shop.policies.$handle.tsx b/src/routes/shop.policies.$handle.tsx
new file mode 100644
index 000000000..fd426d75f
--- /dev/null
+++ b/src/routes/shop.policies.$handle.tsx
@@ -0,0 +1,54 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+import { ShopCrumbs } from '~/components/shop/ui'
+import { getShopPolicy } from '~/utils/shop.functions'
+import { seo } from '~/utils/seo'
+
+export const Route = createFileRoute('/shop/policies/$handle')({
+  loader: async ({ params }) => {
+    const policy = await getShopPolicy({ data: { handle: params.handle } })
+    if (!policy) throw notFound()
+    return { policy }
+  },
+  head: ({ loaderData }) => {
+    const p = loaderData?.policy
+    if (!p) return { meta: [] }
+    return {
+      meta: seo({
+        title: `${p.title} | TanStack Shop`,
+      }),
+    }
+  },
+  component: PolicyPage,
+})
+
+function PolicyPage() {
+  const { policy } = Route.useLoaderData()
+  return (
+    <article className="p-6 md:p-11 pb-24 max-w-3xl mx-auto flex flex-col gap-6">
+      <ShopCrumbs
+        crumbs={[{ label: 'Shop', href: '/shop' }, { label: policy.title }]}
+      />
+      <header>
+        <h1 className="font-shop-display font-bold text-[42px] leading-[1.05] tracking-[-0.02em] text-shop-text">
+          {policy.title}
+        </h1>
+      </header>
+      {policy.body ? (
+        <div
+          className="
+            text-shop-text-2 text-[14px] leading-[1.6]
+            [&_a]:text-shop-accent [&_a]:underline
+            [&_strong]:text-shop-text [&_strong]:font-semibold
+            [&_h1]:text-shop-text [&_h1]:font-shop-display [&_h1]:mt-6 [&_h1]:mb-2
+            [&_h2]:text-shop-text [&_h2]:font-shop-display [&_h2]:mt-6 [&_h2]:mb-2
+            [&_h3]:text-shop-text [&_h3]:font-shop-display [&_h3]:mt-5 [&_h3]:mb-2
+          "
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: policy.body }}
+        />
+      ) : (
+        <p className="text-shop-text-2">This policy has no content yet.</p>
+      )}
+    </article>
+  )
+}
diff --git a/src/routes/shop.products.$handle.tsx b/src/routes/shop.products.$handle.tsx
new file mode 100644
index 000000000..9314286b3
--- /dev/null
+++ b/src/routes/shop.products.$handle.tsx
@@ -0,0 +1,530 @@
+import * as React from 'react'
+import { Link, createFileRoute, notFound } from '@tanstack/react-router'
+import { twMerge } from 'tailwind-merge'
+import { ProductImage } from '~/components/shop/ProductImage'
+import { useCartDrawerStore } from '~/components/shop/cartDrawerStore'
+import { ShopNote } from '~/components/shop/ShopNote'
+import { ShopSpecs } from '~/components/shop/ShopSpecs'
+import {
+  ShopChip,
+  ShopCrumbs,
+  ShopLabel,
+  ShopMono,
+  ShopPanel,
+  ShopPulse,
+  ShopQty,
+  ShopSelect,
+  ShopSize,
+} from '~/components/shop/ui'
+import { useAddToCart } from '~/hooks/useCart'
+import { getProduct } from '~/utils/shop.functions'
+import {
+  type ProductDetail,
+  type ProductDetailVariant,
+} from '~/utils/shopify-queries'
+import { formatMoney, shopifyImageUrl } from '~/utils/shopify-format'
+import { seo } from '~/utils/seo'
+
+const MAX_INLINE_OPTION_VALUES = 8
+
+export const Route = createFileRoute('/shop/products/$handle')({
+  loader: async ({ params }) => {
+    const product = await getProduct({ data: { handle: params.handle } })
+    if (!product) throw notFound()
+    return { product }
+  },
+  head: ({ loaderData }) => {
+    const product = loaderData?.product
+    if (!product) return { meta: [] }
+    const ogImage = product.images.nodes[0]
+    return {
+      meta: seo({
+        title: `${product.seo.title ?? product.title} | TanStack Shop`,
+        description: product.seo.description ?? undefined,
+        image: ogImage
+          ? shopifyImageUrl(ogImage.url, {
+              width: 1200,
+              height: 630,
+              format: 'jpg',
+              crop: 'center',
+            })
+          : undefined,
+      }),
+    }
+  },
+  component: ShopProductsHandleRoute,
+})
+
+function ShopProductsHandleRoute() {
+  const { product } = Route.useLoaderData()
+  return (
+    <ProductPage
+      product={product}
+      canonicalPath={`/shop/products/${product.handle}`}
+    />
+  )
+}
+
+export function ProductPage({
+  product,
+  canonicalPath,
+}: {
+  product: ProductDetail
+  canonicalPath: string
+}) {
+  const variants = product.variants.nodes
+
+  const [selected, setSelected] = React.useState<Record<string, string>>(() =>
+    Object.fromEntries(product.options.map((o) => [o.name, o.values[0]!])),
+  )
+  const [quantity, setQuantity] = React.useState(1)
+
+  const selectedVariant = findMatchingVariant(variants, selected)
+  const variantImage = selectedVariant?.image ?? null
+  const initialImageIndex = React.useMemo(() => {
+    if (!variantImage) return 0
+    const i = product.images.nodes.findIndex(
+      (img) => img.url === variantImage.url,
+    )
+    return i >= 0 ? i : 0
+  }, [variantImage, product.images.nodes])
+  const [activeImageIndex, setActiveImageIndex] =
+    React.useState(initialImageIndex)
+
+  React.useEffect(() => {
+    setActiveImageIndex(initialImageIndex)
+  }, [initialImageIndex])
+
+  const heroImage =
+    product.images.nodes[activeImageIndex] ?? variantImage ?? null
+
+  const displayPrice = selectedVariant?.price ?? null
+  const inStock = !!selectedVariant?.availableForSale
+
+  return (
+    <div className="p-6 md:p-11 pb-24 max-w-[1200px] mx-auto">
+      <ShopCrumbs
+        crumbs={[{ label: 'Shop', href: '/shop' }, { label: product.title }]}
+      />
+
+      <div className="grid grid-cols-1 md:grid-cols-[1fr_minmax(320px,440px)] gap-8 md:gap-10 mt-6">
+        <ProductGallery
+          images={product.images.nodes}
+          activeIndex={activeImageIndex}
+          onChange={setActiveImageIndex}
+          title={product.title}
+          hero={heroImage}
+        />
+
+        <div className="flex flex-col">
+          <ShopLabel>TanStack shop</ShopLabel>
+          <h1 className="font-shop-display font-bold text-[32px] leading-[1.05] tracking-[-0.02em] text-shop-text mt-1.5">
+            {product.title}
+          </h1>
+
+          <ShopPanel className="mt-3 p-3 flex flex-wrap items-center gap-2.5">
+            {displayPrice ? (
+              <ShopMono className="text-[20px] font-medium text-shop-text">
+                {formatMoney(displayPrice.amount, displayPrice.currencyCode)}
+              </ShopMono>
+            ) : null}
+            <ShopMono
+              className={twMerge(
+                'ml-auto flex items-center gap-1.5 text-[12px]',
+                inStock ? 'text-shop-green' : 'text-shop-orange',
+              )}
+            >
+              {inStock ? (
+                <>
+                  <ShopPulse />
+                  In stock
+                </>
+              ) : (
+                'Sold out'
+              )}
+            </ShopMono>
+          </ShopPanel>
+
+          <VariantSelector
+            options={product.options}
+            variants={variants}
+            selected={selected}
+            onChange={setSelected}
+          />
+
+          <QuantityAdd
+            quantity={quantity}
+            onChange={(n) => setQuantity(Math.max(1, n))}
+            variant={selectedVariant}
+            product={product}
+          />
+
+          {product.descriptionHtml ? (
+            <ProductDescription html={product.descriptionHtml} />
+          ) : null}
+
+          <ShopSpecs
+            specs={[
+              { label: 'Ships', value: 'Worldwide, 7–10 days' },
+              { label: 'From', value: 'TanStack' },
+              { label: 'Condition', value: 'New' },
+              {
+                label: 'Variants',
+                value: `${product.variants.nodes.length} in stock set`,
+              },
+            ]}
+          />
+
+          <ShopNote pill="TanStack">
+            Official TanStack merch. Proceeds help fund maintainer time and keep
+            all libraries free and open source.
+          </ShopNote>
+
+          <div className="mt-4.5 flex items-center justify-between">
+            <ShopLabel>Keep browsing</ShopLabel>
+            <Link
+              to="/shop"
+              className="text-shop-accent text-[11.5px] hover:underline"
+            >
+              All products →
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <ProductJsonLd
+        product={product}
+        selectedVariant={selectedVariant}
+        canonicalPath={canonicalPath}
+      />
+    </div>
+  )
+}
+
+type ProductGalleryImage = ProductDetail['images']['nodes'][number]
+
+function ProductGallery({
+  images,
+  activeIndex,
+  onChange,
+  title,
+  hero,
+}: {
+  images: Array<ProductGalleryImage>
+  activeIndex: number
+  onChange: (i: number) => void
+  title: string
+  hero: ProductGalleryImage | null
+}) {
+  if (!hero) {
+    return (
+      <div className="aspect-square rounded-xl border border-shop-line bg-shop-panel" />
+    )
+  }
+  const hasMultiple = images.length > 1
+  return (
+    <div>
+      <div className="aspect-square rounded-xl border border-shop-line bg-shop-panel overflow-hidden">
+        <ProductImage
+          image={hero}
+          alt={title}
+          width={1200}
+          sizes="(min-width: 768px) 60vw, 100vw"
+          loading="eager"
+        />
+      </div>
+      {hasMultiple ? (
+        <div className="grid grid-cols-5 gap-1.5 mt-2.5">
+          {images.slice(0, 5).map((img, i) => (
+            <button
+              key={`${img.url}-${i}`}
+              type="button"
+              onClick={() => onChange(i)}
+              aria-label={`View image ${i + 1} of ${images.length}`}
+              aria-current={i === activeIndex}
+              className={twMerge(
+                'aspect-square rounded-md border bg-shop-panel overflow-hidden cursor-pointer transition-all',
+                i === activeIndex
+                  ? 'border-shop-accent shadow-[0_0_0_1px_var(--shop-accent)]'
+                  : 'border-shop-line hover:border-shop-line-2',
+              )}
+            >
+              <ProductImage
+                image={img}
+                alt={`${title} thumbnail ${i + 1}`}
+                width={160}
+                sizes="20vw"
+              />
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function VariantSelector({
+  options,
+  variants,
+  selected,
+  onChange,
+}: {
+  options: ProductDetail['options']
+  variants: Array<ProductDetailVariant>
+  selected: Record<string, string>
+  onChange: (next: Record<string, string>) => void
+}) {
+  return (
+    <>
+      {options.map((option) => {
+        if (option.values.length <= 1) return null
+        const isSizeOption = /size/i.test(option.name)
+        const shouldUseSelect = option.values.length > MAX_INLINE_OPTION_VALUES
+        return (
+          <fieldset key={option.id} className="mt-4.5">
+            <legend className="flex items-center justify-between w-full mb-2.5">
+              <ShopLabel as="span">
+                {option.name}
+                <span className="ml-2 font-sans normal-case tracking-normal text-[11.5px] text-shop-text">
+                  {selected[option.name]}
+                </span>
+              </ShopLabel>
+            </legend>
+            {shouldUseSelect ? (
+              <ShopSelect
+                value={selected[option.name]}
+                className="w-full"
+                triggerClassName="w-full justify-between rounded-md px-3.5 py-2.5 text-shop-sm"
+                onChange={(e) =>
+                  onChange({ ...selected, [option.name]: e.target.value })
+                }
+              >
+                {option.values.map((value) => {
+                  const candidate = { ...selected, [option.name]: value }
+                  const match = findMatchingVariant(variants, candidate)
+                  return (
+                    <option
+                      key={value}
+                      value={value}
+                      disabled={!match?.availableForSale}
+                    >
+                      {value}
+                    </option>
+                  )
+                })}
+              </ShopSelect>
+            ) : (
+              <div
+                className={
+                  isSizeOption
+                    ? 'grid grid-cols-[repeat(auto-fill,minmax(54px,1fr))] gap-1.5'
+                    : 'flex flex-wrap gap-2'
+                }
+              >
+                {option.values.map((value) => {
+                  const isSelected = selected[option.name] === value
+                  const candidate = { ...selected, [option.name]: value }
+                  const match = findMatchingVariant(variants, candidate)
+                  const isUnavailable = !match?.availableForSale
+                  const handleClick = () =>
+                    onChange({ ...selected, [option.name]: value })
+                  if (isSizeOption) {
+                    return (
+                      <ShopSize
+                        key={value}
+                        onClick={handleClick}
+                        isSelected={isSelected}
+                        isUnavailable={isUnavailable}
+                      >
+                        {value}
+                      </ShopSize>
+                    )
+                  }
+                  return (
+                    <ShopChip
+                      key={value}
+                      onClick={handleClick}
+                      isSelected={isSelected}
+                      isUnavailable={isUnavailable}
+                    >
+                      {value}
+                    </ShopChip>
+                  )
+                })}
+              </div>
+            )}
+          </fieldset>
+        )
+      })}
+    </>
+  )
+}
+
+function QuantityAdd({
+  quantity,
+  onChange,
+  variant,
+  product,
+}: {
+  quantity: number
+  onChange: (next: number) => void
+  variant: ProductDetailVariant | undefined
+  product: ProductDetail
+}) {
+  const addToCart = useAddToCart()
+  const openDrawer = useCartDrawerStore((s) => s.openDrawer)
+  const [showAdded, setShowAdded] = React.useState(false)
+
+  const disabled =
+    !variant || !variant.availableForSale || (addToCart.isPending && !showAdded)
+  const price = variant?.price
+
+  const label = showAdded
+    ? '✓ Added'
+    : !variant
+      ? 'Unavailable'
+      : !variant.availableForSale
+        ? 'Sold out'
+        : price
+          ? `Add to cart — ${formatMoney(
+              (Number(price.amount) * quantity).toFixed(2),
+              price.currencyCode,
+            )}`
+          : 'Add to cart'
+
+  React.useEffect(() => {
+    if (!showAdded) return
+    const id = window.setTimeout(() => setShowAdded(false), 1500)
+    return () => window.clearTimeout(id)
+  }, [showAdded])
+
+  return (
+    <div className="grid grid-cols-[100px_1fr] gap-2 mt-4.5">
+      <ShopQty
+        quantity={quantity}
+        onChange={(n) => onChange(Math.max(1, n))}
+        min={1}
+      />
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => {
+          if (!variant) return
+          setShowAdded(true)
+          openDrawer()
+          addToCart.mutate({
+            variantId: variant.id,
+            quantity,
+            line: {
+              productTitle: product.title,
+              productHandle: product.handle,
+              variantTitle: variant.title,
+              price: variant.price,
+              image: variant.image,
+              selectedOptions: variant.selectedOptions,
+            },
+          })
+        }}
+        className="
+          h-10 flex items-center justify-center gap-2 rounded-md
+          bg-shop-accent text-shop-accent-ink
+          font-semibold text-[13px] tracking-[0.01em]
+          transition-[filter] hover:enabled:brightness-110
+          disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-shop-panel-2 disabled:text-shop-muted
+          group
+        "
+      >
+        {label}
+        {!showAdded && variant?.availableForSale ? (
+          <span className="transition-transform group-hover:translate-x-[3px]">
+            →
+          </span>
+        ) : null}
+      </button>
+    </div>
+  )
+}
+
+function ProductDescription({ html }: { html: string }) {
+  return (
+    <div
+      className="
+        mt-4 text-shop-text-2 text-[13.5px] leading-[1.6]
+        [&_p]:my-0 [&_p]:mb-[0.9em] [&_a]:text-shop-accent [&_a]:underline
+        [&_strong]:text-shop-text [&_strong]:font-semibold
+        [&_ul]:pl-5 [&_ul]:my-2 [&_ol]:pl-5 [&_ol]:my-2 [&_li]:my-1
+        [&_h1]:text-shop-text [&_h1]:font-shop-display [&_h1]:tracking-[-0.01em] [&_h1]:mt-5 [&_h1]:mb-1.5
+        [&_h2]:text-shop-text [&_h2]:font-shop-display [&_h2]:tracking-[-0.01em] [&_h2]:mt-5 [&_h2]:mb-1.5
+        [&_h3]:text-shop-text [&_h3]:font-shop-display [&_h3]:tracking-[-0.01em] [&_h3]:mt-5 [&_h3]:mb-1.5
+      "
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}
+
+function findMatchingVariant(
+  variants: Array<ProductDetailVariant>,
+  selected: Record<string, string>,
+): ProductDetailVariant | undefined {
+  return variants.find((v) =>
+    v.selectedOptions.every((opt) => selected[opt.name] === opt.value),
+  )
+}
+
+function ProductJsonLd({
+  product,
+  selectedVariant,
+  canonicalPath,
+}: {
+  product: ProductDetail
+  selectedVariant: ProductDetailVariant | undefined
+  canonicalPath: string
+}) {
+  const offers = product.variants.nodes.map((v) => ({
+    '@type': 'Offer',
+    sku: v.id,
+    price: v.price.amount,
+    priceCurrency: v.price.currencyCode,
+    availability: v.availableForSale
+      ? 'https://schema.org/InStock'
+      : 'https://schema.org/OutOfStock',
+    itemCondition: 'https://schema.org/NewCondition',
+    url: `https://tanstack.com${canonicalPath}`,
+  }))
+
+  const jsonLd = {
+    '@context': 'https://schema.org/',
+    '@type': 'Product',
+    name: product.title,
+    description: product.seo.description ?? undefined,
+    image: product.images.nodes.map((img) => img.url),
+    sku: selectedVariant?.id,
+    offers:
+      offers.length === 1
+        ? offers[0]
+        : {
+            '@type': 'AggregateOffer',
+            offerCount: offers.length,
+            lowPrice: Math.min(
+              ...product.variants.nodes.map((v) => Number(v.price.amount)),
+            ),
+            highPrice: Math.max(
+              ...product.variants.nodes.map((v) => Number(v.price.amount)),
+            ),
+            priceCurrency:
+              product.variants.nodes[0]?.price.currencyCode ?? 'USD',
+            offers,
+          },
+  }
+
+  return (
+    <script
+      type="application/ld+json"
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+    />
+  )
+}
+
+export type { ProductDetail }
diff --git a/src/routes/shop.search.tsx b/src/routes/shop.search.tsx
new file mode 100644
index 000000000..4aa44a9e6
--- /dev/null
+++ b/src/routes/shop.search.tsx
@@ -0,0 +1,151 @@
+import * as React from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useMutation } from '@tanstack/react-query'
+import * as v from 'valibot'
+import { Search as SearchIcon } from 'lucide-react'
+import { ProductCard } from '~/components/shop/ProductCard'
+import { ShopHero } from '~/components/shop/ShopHero'
+import { ShopButton, ShopInput, ShopLabel } from '~/components/shop/ui'
+import { searchProducts } from '~/utils/shop.functions'
+import type { ProductListItem } from '~/utils/shopify-queries'
+
+const searchSchema = v.object({
+  q: v.optional(v.string()),
+})
+
+const PAGE_SIZE = 24
+
+export const Route = createFileRoute('/shop/search')({
+  validateSearch: searchSchema,
+  loaderDeps: ({ search }) => ({ q: search.q }),
+  loader: async ({ deps }) => {
+    const q = deps.q?.trim()
+    if (!q)
+      return {
+        query: '',
+        totalCount: 0,
+        page: null as null | Awaited<ReturnType<typeof searchProducts>>,
+      }
+    const page = await searchProducts({ data: { query: q, first: PAGE_SIZE } })
+    return { query: q, totalCount: page.totalCount, page }
+  },
+  component: SearchPage,
+  staticData: {
+    includeSearchInCanonical: true,
+  },
+})
+
+function SearchPage() {
+  const { query, page } = Route.useLoaderData()
+  const navigate = useNavigate({ from: '/shop/search' })
+  const [inputValue, setInputValue] = React.useState(query)
+
+  React.useEffect(() => {
+    setInputValue(query)
+  }, [query])
+
+  const [accumulated, setAccumulated] = React.useState<Array<ProductListItem>>(
+    [],
+  )
+  const [endCursor, setEndCursor] = React.useState<string | null>(
+    page?.pageInfo.endCursor ?? null,
+  )
+  const [hasNextPage, setHasNextPage] = React.useState(
+    page?.pageInfo.hasNextPage ?? false,
+  )
+
+  React.useEffect(() => {
+    setAccumulated([])
+    setEndCursor(page?.pageInfo.endCursor ?? null)
+    setHasNextPage(page?.pageInfo.hasNextPage ?? false)
+  }, [page])
+
+  const loadMore = useMutation({
+    mutationFn: async () => {
+      if (!endCursor || !query) return null
+      return searchProducts({
+        data: { query, first: PAGE_SIZE, after: endCursor },
+      })
+    },
+    onSuccess: (next) => {
+      if (!next) return
+      setAccumulated((prev) => [...prev, ...next.products])
+      setEndCursor(next.pageInfo.endCursor)
+      setHasNextPage(next.pageInfo.hasNextPage)
+    },
+  })
+
+  const products = [...(page?.products ?? []), ...accumulated]
+
+  return (
+    <div className="p-6 md:p-11 pb-24 max-w-[1280px] mx-auto flex flex-col gap-8">
+      <ShopHero title="Search" />
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          const trimmed = inputValue.trim()
+          navigate({
+            to: '/shop/search',
+            search: trimmed ? { q: trimmed } : {},
+          })
+        }}
+        className="flex items-center gap-2 max-w-xl"
+      >
+        <div className="relative flex-1">
+          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-shop-muted" />
+          <ShopInput
+            type="search"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            placeholder="Search products…"
+            className="pl-9"
+          />
+        </div>
+        <ShopButton type="submit" variant="primary">
+          Search
+        </ShopButton>
+      </form>
+
+      {!query ? (
+        <p className="text-shop-text-2">Type a query above to find products.</p>
+      ) : products.length === 0 ? (
+        <p className="text-shop-text-2">
+          No products match{' '}
+          <span className="text-shop-text font-semibold">
+            &ldquo;{query}&rdquo;
+          </span>
+          .
+        </p>
+      ) : (
+        <>
+          <ShopLabel>
+            {products.length}
+            {hasNextPage ? '+' : ''}{' '}
+            {products.length === 1 ? 'result' : 'results'} for &ldquo;{query}
+            &rdquo;
+          </ShopLabel>
+          <section className="grid gap-x-4 gap-y-5.5 grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {products.map((product, i) => (
+              <ProductCard
+                key={product.id}
+                product={product}
+                loading={i < 8 ? 'eager' : 'lazy'}
+              />
+            ))}
+          </section>
+          {hasNextPage ? (
+            <div className="flex justify-center py-6">
+              <ShopButton
+                onClick={() => loadMore.mutate()}
+                disabled={loadMore.isPending}
+              >
+                {loadMore.isPending ? 'Loading…' : 'Load more'}
+              </ShopButton>
+            </div>
+          ) : null}
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/src/routes/shop.tsx b/src/routes/shop.tsx
new file mode 100644
index 000000000..27ea90590
--- /dev/null
+++ b/src/routes/shop.tsx
@@ -0,0 +1,43 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+import shopCss from '~/styles/shop.css?url'
+import { ShopLayout } from '~/components/shop/ShopLayout'
+import { CART_QUERY_KEY } from '~/hooks/useCart'
+import { getCart } from '~/utils/shop.functions'
+
+const SHOP_FONTS_HREF =
+  'https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=JetBrains+Mono:wght@400;500&display=swap'
+
+export const Route = createFileRoute('/shop')({
+  loader: async ({ context }) => {
+    await context.queryClient.prefetchQuery({
+      queryKey: CART_QUERY_KEY,
+      queryFn: () => getCart(),
+    })
+  },
+  head: () => ({
+    links: [
+      { rel: 'stylesheet', href: shopCss },
+      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossOrigin: 'anonymous',
+      },
+      { rel: 'stylesheet', href: SHOP_FONTS_HREF },
+    ],
+  }),
+  staticData: {
+    Title: () => (
+      <Link to="/shop" className="relative whitespace-nowrap">
+        <span className="inline-block text-transparent bg-clip-text bg-linear-to-r from-blue-500 to-cyan-400">
+          Shop
+        </span>
+      </Link>
+    ),
+  },
+  component: () => (
+    <ShopLayout>
+      <Outlet />
+    </ShopLayout>
+  ),
+})
diff --git a/src/routes/showcase/edit.$id.tsx b/src/routes/showcase/edit.$id.tsx
index b4326e8d6..6b2e56ef3 100644
--- a/src/routes/showcase/edit.$id.tsx
+++ b/src/routes/showcase/edit.$id.tsx
@@ -1,7 +1,7 @@
 import { redirect, createFileRoute } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
 import { ShowcaseSubmitForm } from '~/components/ShowcaseSubmitForm'
-import { requireAuth } from '~/utils/auth.server'
+import { requireAuth } from '~/utils/auth.functions'
 import { getShowcase } from '~/utils/showcase.functions'
 
 export const Route = createFileRoute('/showcase/edit/$id')({
diff --git a/src/routes/showcase/index.tsx b/src/routes/showcase/index.tsx
index bf738498e..0ba895212 100644
--- a/src/routes/showcase/index.tsx
+++ b/src/routes/showcase/index.tsx
@@ -5,23 +5,33 @@ import { ShowcaseGallery } from '~/components/ShowcaseGallery'
 import { getApprovedShowcasesQueryOptions } from '~/queries/showcases'
 import { libraryIdSchema, showcaseUseCaseSchema } from '~/utils/schemas'
 
-export const Route = createFileRoute('/showcase/')({
-  validateSearch: (search) => {
-    const parsed = v.parse(
-      v.object({
-        page: v.optional(v.number(), 1),
-        libraryIds: v.optional(v.array(libraryIdSchema)),
-        useCases: v.optional(v.array(showcaseUseCaseSchema)),
-        hasSourceCode: v.optional(v.boolean()),
-        q: v.optional(v.string()),
-      }),
-      search,
-    )
+const searchSchema = v.object({
+  page: v.optional(v.number(), 1),
+  pageSize: v.optional(v.number(), 24),
+  libraryIds: v.optional(v.array(libraryIdSchema)),
+  useCases: v.optional(v.array(showcaseUseCaseSchema)),
+  hasSourceCode: v.optional(v.boolean()),
+  q: v.optional(v.string()),
+})
 
-    return parsed
-  },
+export const PAGE_SIZE_OPTIONS = [24, 48, 96, 192] as const
+
+function hasNonCanonicalSearch(search: v.InferOutput<typeof searchSchema>) {
+  return Boolean(
+    search.page > 1 ||
+    search.pageSize !== PAGE_SIZE_OPTIONS[0] ||
+    search.libraryIds?.length ||
+    search.useCases?.length ||
+    search.hasSourceCode ||
+    search.q,
+  )
+}
+
+export const Route = createFileRoute('/showcase/')({
+  validateSearch: searchSchema,
   loaderDeps: ({ search }) => ({
     page: search.page,
+    pageSize: search.pageSize,
     libraryIds: search.libraryIds,
     useCases: search.useCases,
     hasSourceCode: search.hasSourceCode,
@@ -32,7 +42,7 @@ export const Route = createFileRoute('/showcase/')({
       getApprovedShowcasesQueryOptions({
         pagination: {
           page: deps.page,
-          pageSize: 24,
+          pageSize: deps.pageSize,
         },
         filters: {
           libraryIds: deps.libraryIds,
@@ -42,13 +52,18 @@ export const Route = createFileRoute('/showcase/')({
         },
       }),
     )
+
+    return {
+      hasNonCanonicalSearch: hasNonCanonicalSearch(deps),
+    }
   },
   component: ShowcaseGallery,
-  head: () => ({
+  head: ({ loaderData }) => ({
     meta: seo({
       title: 'Showcase | TanStack',
       description:
         'Discover projects built with TanStack libraries. See how developers are using TanStack Query, Router, Table, Form, and more in production.',
+      noindex: loaderData?.hasNonCanonicalSearch,
     }),
   }),
 })
diff --git a/src/routes/showcase/submit.tsx b/src/routes/showcase/submit.tsx
index 0a68bcac8..1c517ead9 100644
--- a/src/routes/showcase/submit.tsx
+++ b/src/routes/showcase/submit.tsx
@@ -1,7 +1,7 @@
 import { redirect, createFileRoute } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
 import { ShowcaseSubmitForm } from '~/components/ShowcaseSubmitForm'
-import { requireAuth } from '~/utils/auth.server'
+import { requireAuth } from '~/utils/auth.functions'
 
 export const Route = createFileRoute('/showcase/submit')({
   beforeLoad: async () => {
@@ -9,7 +9,10 @@ export const Route = createFileRoute('/showcase/submit')({
       const user = await requireAuth()
       return { user }
     } catch {
-      throw redirect({ to: '/login', search: { redirect: '/showcase/submit' } })
+      throw redirect({
+        to: '/login',
+        search: { redirect: '/showcase/submit' },
+      })
     }
   },
   component: ShowcaseSubmitForm,
diff --git a/src/routes/showcases.tsx b/src/routes/showcases.tsx
new file mode 100644
index 000000000..0926a1673
--- /dev/null
+++ b/src/routes/showcases.tsx
@@ -0,0 +1,9 @@
+import { redirect, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/showcases')({
+  beforeLoad: ({ location }) => {
+    throw redirect({
+      href: location.href.replace(/^\/showcases/, '/showcase'),
+    })
+  },
+})
diff --git a/src/routes/sitemap[.]xml.ts b/src/routes/sitemap[.]xml.ts
new file mode 100644
index 000000000..9ef9c336e
--- /dev/null
+++ b/src/routes/sitemap[.]xml.ts
@@ -0,0 +1,25 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { setResponseHeader } from '@tanstack/react-start/server'
+import { generateSitemapXml, getSiteOrigin } from '~/utils/sitemap'
+
+export const Route = createFileRoute('/sitemap.xml')({
+  server: {
+    handlers: {
+      GET: async () => {
+        const content = await generateSitemapXml(getSiteOrigin())
+
+        setResponseHeader('Content-Type', 'application/xml; charset=utf-8')
+        setResponseHeader(
+          'Cache-Control',
+          'public, max-age=300, must-revalidate',
+        )
+        setResponseHeader(
+          'Cloudflare-CDN-Cache-Control',
+          'public, max-age=3600, stale-while-revalidate=3600',
+        )
+
+        return new Response(content)
+      },
+    },
+  },
+})
diff --git a/src/routes/sponsors-embed.tsx b/src/routes/sponsors-embed.tsx
index d7954a01d..5ae89632e 100644
--- a/src/routes/sponsors-embed.tsx
+++ b/src/routes/sponsors-embed.tsx
@@ -1,9 +1,11 @@
 import { createFileRoute } from '@tanstack/react-router'
 import SponsorPack from '~/components/SponsorPack'
-import { getSponsorsForSponsorPack } from '~/server/sponsors'
+import { getSponsorsForSponsorPack } from '~/utils/sponsors.functions'
 
 const cacheHeaders = {
-  'Cache-Control': 'max-age=300, s-maxage=3600, stale-while-revalidate',
+  'Cache-Control': 'public, max-age=300',
+  'Cloudflare-CDN-Cache-Control':
+    'public, max-age=3600, stale-while-revalidate=300',
 }
 
 export const Route = createFileRoute('/sponsors-embed')({
diff --git a/src/routes/stack.$category.tsx b/src/routes/stack.$category.tsx
new file mode 100644
index 000000000..7c089ed8c
--- /dev/null
+++ b/src/routes/stack.$category.tsx
@@ -0,0 +1,49 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+
+import { CategoryArticle } from '~/components/stack/CategoryArticle'
+import {
+  categoryMeta,
+  categorySlugs,
+  getCategoryLibraries,
+  type CategorySlug,
+} from '~/components/stack/stack-categories'
+import { fetchRelatedPostsForLibraries } from '~/utils/blog.functions'
+import { seo } from '~/utils/seo'
+
+function isCategorySlug(value: string): value is CategorySlug {
+  return (categorySlugs as readonly string[]).includes(value)
+}
+
+export const Route = createFileRoute('/stack/$category')({
+  staleTime: Infinity,
+  loader: async ({ params }) => {
+    if (!isCategorySlug(params.category)) {
+      throw notFound()
+    }
+
+    const libraries = getCategoryLibraries(params.category)
+    const relatedPosts = await fetchRelatedPostsForLibraries({
+      data: libraries.map((lib) => lib.id),
+    })
+
+    return {
+      category: params.category,
+      meta: categoryMeta[params.category],
+      relatedPosts,
+    }
+  },
+  head: ({ loaderData }) => ({
+    meta: seo({
+      title: loaderData
+        ? `${loaderData.meta.shortName} — TanStack libraries`
+        : 'TanStack libraries',
+      description: loaderData?.meta.intro,
+    }),
+  }),
+  component: StackCategoryPage,
+})
+
+function StackCategoryPage() {
+  const { category, relatedPosts } = Route.useLoaderData()
+  return <CategoryArticle slug={category} relatedPosts={relatedPosts} />
+}
diff --git a/src/routes/stats/npm/$packages.tsx b/src/routes/stats/npm/$packages.tsx
index b9abc6af7..6f98b9f39 100644
--- a/src/routes/stats/npm/$packages.tsx
+++ b/src/routes/stats/npm/$packages.tsx
@@ -1,25 +1,53 @@
 import * as React from 'react'
-import { useNavigate, createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import * as v from 'valibot'
 import { seo } from '~/utils/seo'
 import {
   parsePackagesFromUrl,
   transformModeSchema,
   binTypeSchema,
+  chartTypeSchema,
+  barOrientationSchema,
+  latestBarSortSchema,
+  defaultPlaybackIntervalMs,
+  playbackIntervalMsSchema,
   showDataModeSchema,
   timeRangeSchema,
+  viewModeSchema,
 } from './-utils'
 import { Spinner } from '~/components/Spinner'
+import { chartHeightSchema, chartWidthSchema } from '~/utils/schemas'
+
+const timelineZoomTimeSchema = v.pipe(v.number(), v.integer(), v.minValue(0))
 
 export const Route = createFileRoute('/stats/npm/$packages')({
   validateSearch: v.object({
     range: v.fallback(v.optional(timeRangeSchema, '365-days'), '365-days'),
     transform: v.fallback(v.optional(transformModeSchema, 'none'), 'none'),
-    facetX: v.fallback(v.optional(v.picklist(['name'])), undefined),
-    facetY: v.fallback(v.optional(v.picklist(['name'])), undefined),
     binType: v.fallback(v.optional(binTypeSchema, 'weekly'), 'weekly'),
+    viewMode: v.fallback(v.optional(viewModeSchema, 'history'), 'history'),
+    chartType: v.fallback(v.optional(chartTypeSchema, 'line'), 'line'),
+    barOrientation: v.fallback(v.optional(barOrientationSchema), undefined),
+    barSort: v.fallback(v.optional(latestBarSortSchema, 'value'), 'value'),
+    bucketOffset: v.fallback(
+      v.optional(
+        v.pipe(v.number(), v.integer(), v.minValue(-5000), v.maxValue(0)),
+        0,
+      ),
+      0,
+    ),
+    playbackIntervalMs: v.fallback(
+      v.optional(playbackIntervalMsSchema, defaultPlaybackIntervalMs),
+      defaultPlaybackIntervalMs,
+    ),
+    playbackLoop: v.fallback(v.optional(v.boolean(), false), false),
+    playbackPlaying: v.fallback(v.optional(v.boolean(), false), false),
     showDataMode: v.fallback(v.optional(showDataModeSchema, 'all'), 'all'),
-    height: v.fallback(v.optional(v.number(), 400), 400),
+    showLegend: v.fallback(v.optional(v.boolean(), false), false),
+    height: v.fallback(v.optional(chartHeightSchema, 400), 400),
+    width: v.fallback(v.optional(chartWidthSchema), undefined),
+    timelineStart: v.fallback(v.optional(timelineZoomTimeSchema), undefined),
+    timelineEnd: v.fallback(v.optional(timelineZoomTimeSchema), undefined),
   }),
   loader: ({ params }) => {
     const packages = parsePackagesFromUrl(params.packages)
@@ -76,12 +104,15 @@ export const Route = createFileRoute('/stats/npm/$packages')({
     }
   },
   component: RouteComponent,
+  staticData: {
+    includeSearchInCanonical: true,
+  },
 })
 
 function RouteComponent() {
   const { packages } = Route.useLoaderData()
   const search = Route.useSearch()
-  const navigate = useNavigate()
+  const navigate = useNavigate({ from: Route.fullPath })
 
   // Navigate to the main page with packages as search params
   // This happens client-side after SSR renders the meta tags
@@ -89,10 +120,10 @@ function RouteComponent() {
     navigate({
       to: '/stats/npm',
       search: {
+        ...search,
         packageGroups: packages.map((name: string) => ({
           packages: [{ name }],
         })),
-        ...search,
       },
       replace: true,
     })
diff --git a/src/routes/stats/npm/-comparisons.ts b/src/routes/stats/npm/-comparisons.ts
index d8606256f..fdf157d5c 100644
--- a/src/routes/stats/npm/-comparisons.ts
+++ b/src/routes/stats/npm/-comparisons.ts
@@ -1,25 +1,142 @@
 import * as v from 'valibot'
+import { npmPackageNameSchema } from '~/utils/schemas'
+import {
+  MAX_NPM_STATS_GROUPS,
+  MAX_NPM_STATS_PACKAGES_PER_GROUP,
+  MAX_NPM_STATS_TOTAL_PACKAGES,
+} from '~/utils/npm-stats-limits'
+import { tanStackTotalNpmStatsPackageGroup } from '~/utils/tanstack-npm-stats'
 
 export const packageGroupSchema = v.object({
-  packages: v.array(
-    v.object({
-      name: v.string(),
-      hidden: v.optional(v.boolean()),
-    }),
+  label: v.optional(v.pipe(v.string(), v.maxLength(80))),
+  hidden: v.optional(v.boolean()),
+  packages: v.pipe(
+    v.array(
+      v.object({
+        name: npmPackageNameSchema,
+        hidden: v.optional(v.boolean()),
+      }),
+    ),
+    v.maxLength(MAX_NPM_STATS_PACKAGES_PER_GROUP),
   ),
-  color: v.optional(v.nullable(v.string())),
+  color: v.optional(v.nullable(v.pipe(v.string(), v.maxLength(32)))),
   baseline: v.optional(v.boolean()),
+  baselineLabel: v.optional(v.pipe(v.string(), v.maxLength(80))),
 })
 
+export const packageGroupsSchema = v.pipe(
+  v.array(packageGroupSchema),
+  v.maxLength(MAX_NPM_STATS_GROUPS),
+  v.check(
+    (groups) =>
+      groups.reduce((count, group) => count + group.packages.length, 0) <=
+      MAX_NPM_STATS_TOTAL_PACKAGES,
+    `NPM stats comparisons support up to ${MAX_NPM_STATS_TOTAL_PACKAGES} total packages.`,
+  ),
+)
+
 export const packageComparisonSchema = v.object({
-  title: v.string(),
-  packageGroups: v.array(packageGroupSchema),
+  title: v.pipe(v.string(), v.maxLength(120)),
+  packageGroups: packageGroupsSchema,
   baseline: v.optional(v.string()),
 })
 
-// Default comparison for route validation - extracted to avoid bundling all comparisons
-// This is used in validateSearch defaults and must be kept in sync with the first comparison
-export const defaultPackageGroups: v.InferInput<typeof packageGroupSchema>[] = [
+type PackageGroupInput = v.InferInput<typeof packageGroupSchema>
+
+export type BaselinePreset = {
+  id: string
+  title: string
+  description: string
+  category: 'single' | 'index'
+  packages: Array<{ name: string; color?: string }>
+}
+
+export function getBaselinePresets(): BaselinePreset[] {
+  return [
+    // Single-package presets — direct comparison against a familiar reference.
+    {
+      id: 'react',
+      title: 'React',
+      description: 'Compare against React downloads.',
+      category: 'single',
+      packages: [{ name: 'react', color: '#61DAFB' }],
+    },
+    {
+      id: 'vue',
+      title: 'Vue',
+      description: 'Compare against Vue downloads.',
+      category: 'single',
+      packages: [{ name: 'vue', color: '#41B883' }],
+    },
+    {
+      id: 'angular',
+      title: 'Angular',
+      description: 'Compare against Angular core downloads.',
+      category: 'single',
+      packages: [{ name: '@angular/core', color: '#DD0031' }],
+    },
+    {
+      id: 'svelte',
+      title: 'Svelte',
+      description: 'Compare against Svelte downloads.',
+      category: 'single',
+      packages: [{ name: 'svelte', color: '#FF3E00' }],
+    },
+    {
+      id: 'typescript',
+      title: 'TypeScript',
+      description: 'Compare against TypeScript downloads.',
+      category: 'single',
+      packages: [{ name: 'typescript', color: '#3178C6' }],
+    },
+    {
+      id: 'lodash',
+      title: 'Lodash',
+      description: 'Compare against Lodash downloads.',
+      category: 'single',
+      packages: [{ name: 'lodash', color: '#3492FF' }],
+    },
+    {
+      id: 'express',
+      title: 'Express',
+      description: 'Compare against Express downloads.',
+      category: 'single',
+      packages: [{ name: 'express', color: '#000000' }],
+    },
+    // Multi-package indexes — equal-weighted (each member contributes its
+    // growth rate equally regardless of size) so the largest member can't
+    // dominate the line shape.
+    {
+      id: 'npm-ecosystem',
+      title: 'NPM Ecosystem (index)',
+      description:
+        'Equal-weighted growth index across foundational packages: lodash, typescript, express, axios. Each contributes its growth rate equally.',
+      category: 'index',
+      packages: [
+        { name: 'lodash', color: '#3492FF' },
+        { name: 'typescript', color: '#3178C6' },
+        { name: 'express', color: '#000000' },
+        { name: 'axios', color: '#5A29E4' },
+      ],
+    },
+    {
+      id: 'frontend-frameworks',
+      title: 'Frontend Frameworks (index)',
+      description:
+        'Equal-weighted growth index across the major UI frameworks: react, vue, angular, svelte, solid-js.',
+      category: 'index',
+      packages: [
+        { name: 'react', color: '#61DAFB' },
+        { name: 'vue', color: '#41B883' },
+        { name: '@angular/core', color: '#DD0031' },
+        { name: 'svelte', color: '#FF3E00' },
+        { name: 'solid-js', color: '#2C4F7C' },
+      ],
+    },
+  ]
+}
+
+const dataFetchingPackageGroups = [
   {
     packages: [{ name: '@tanstack/react-query' }, { name: 'react-query' }],
     color: '#FF4500',
@@ -36,15 +153,317 @@ export const defaultPackageGroups: v.InferInput<typeof packageGroupSchema>[] = [
     packages: [{ name: '@trpc/client' }],
     color: '#2596BE',
   },
-]
+] satisfies PackageGroupInput[]
+
+const tanstackLibraryPackageGroups = [
+  {
+    label: 'TanStack Query',
+    packages: [{ name: '@tanstack/query-core' }, { name: 'react-query' }],
+    color: '#FF4500',
+  },
+  {
+    label: 'TanStack Table',
+    packages: [{ name: '@tanstack/table-core' }, { name: 'react-table' }],
+    color: '#FF7043',
+  },
+  {
+    label: 'TanStack Router',
+    packages: [{ name: '@tanstack/router-core' }, { name: 'react-location' }],
+    color: '#32CD32',
+  },
+  {
+    label: 'TanStack Start',
+    packages: [{ name: '@tanstack/start-client-core' }],
+    color: '#00CED1',
+  },
+  {
+    label: 'TanStack Form',
+    packages: [{ name: '@tanstack/form-core' }],
+    color: '#FFD700',
+  },
+  {
+    label: 'TanStack Virtual',
+    packages: [{ name: '@tanstack/virtual-core' }, { name: 'react-virtual' }],
+    color: '#8B5CF6',
+  },
+  {
+    label: 'TanStack DB',
+    packages: [{ name: '@tanstack/db' }],
+    color: '#F97316',
+  },
+  {
+    label: 'TanStack Pacer',
+    packages: [{ name: '@tanstack/pacer' }, { name: '@tanstack/pacer-lite' }],
+    color: '#84CC16',
+  },
+  {
+    label: 'TanStack AI',
+    packages: [{ name: '@tanstack/ai' }],
+    color: '#EC4899',
+  },
+  {
+    label: 'TanStack Intent',
+    packages: [{ name: '@tanstack/intent' }],
+    color: '#0EA5E9',
+  },
+  {
+    label: 'TanStack Store',
+    packages: [{ name: '@tanstack/store' }],
+    color: '#B89A56',
+  },
+  {
+    label: 'TanStack Hotkeys',
+    packages: [{ name: '@tanstack/hotkeys' }],
+    color: '#F43F5E',
+  },
+  {
+    label: 'TanStack Ranger',
+    packages: [{ name: '@tanstack/ranger' }, { name: 'react-ranger' }],
+    color: '#1F2937',
+  },
+  {
+    label: 'TanStack Config',
+    packages: [{ name: '@tanstack/config' }],
+    color: '#1F2937',
+  },
+  {
+    label: 'TanStack Devtools',
+    packages: [{ name: '@tanstack/devtools' }],
+    color: '#1F2937',
+  },
+  {
+    label: 'TanStack CLI',
+    packages: [{ name: '@tanstack/cli' }],
+    color: '#6366F1',
+  },
+] satisfies PackageGroupInput[]
+
+const tanstackAggregatePackageGroup =
+  tanStackTotalNpmStatsPackageGroup satisfies PackageGroupInput
+
+const ecosystemTanStackPackageGroups = [
+  {
+    label: 'TanStack Query',
+    packages: [{ name: '@tanstack/query-core' }, { name: 'react-query' }],
+    color: '#FF4500',
+  },
+  {
+    label: 'TanStack Table',
+    packages: [{ name: '@tanstack/table-core' }, { name: 'react-table' }],
+    color: '#FF7043',
+  },
+  {
+    label: 'TanStack Router',
+    packages: [{ name: '@tanstack/router-core' }],
+    color: '#32CD32',
+  },
+  {
+    label: 'TanStack Start',
+    packages: [{ name: '@tanstack/start-client-core' }],
+    color: '#00CED1',
+  },
+  {
+    label: 'TanStack Form',
+    packages: [{ name: '@tanstack/form-core' }],
+    color: '#FFD700',
+  },
+  {
+    label: 'TanStack Virtual',
+    packages: [{ name: '@tanstack/virtual-core' }, { name: 'react-virtual' }],
+    color: '#8B5CF6',
+  },
+  {
+    label: 'TanStack DB',
+    packages: [{ name: '@tanstack/db' }],
+    color: '#F97316',
+  },
+  {
+    label: 'TanStack Pacer',
+    packages: [{ name: '@tanstack/pacer' }],
+    color: '#84CC16',
+  },
+  {
+    label: 'TanStack AI',
+    packages: [{ name: '@tanstack/ai' }],
+    color: '#EC4899',
+  },
+  {
+    label: 'TanStack Intent',
+    packages: [{ name: '@tanstack/intent' }],
+    color: '#0EA5E9',
+  },
+  {
+    label: 'TanStack Store',
+    packages: [{ name: '@tanstack/store' }],
+    color: '#B89A56',
+  },
+] satisfies PackageGroupInput[]
+
+const ecosystemComparisonPackageGroups = [
+  {
+    label: 'TanStack',
+    packages: [
+      { name: '@tanstack/query-core' },
+      { name: 'react-query' },
+      { name: '@tanstack/table-core' },
+      { name: 'react-table' },
+      { name: '@tanstack/router-core' },
+      { name: '@tanstack/start-client-core' },
+      { name: '@tanstack/form-core' },
+      { name: '@tanstack/virtual-core' },
+      { name: 'react-virtual' },
+      { name: '@tanstack/db' },
+      { name: '@tanstack/pacer' },
+      { name: '@tanstack/ai' },
+      { name: '@tanstack/intent' },
+      { name: '@tanstack/store', hidden: true },
+    ],
+    color: '#01a7b9',
+  },
+  {
+    label: 'Next.js',
+    packages: [{ name: 'next' }, { name: 'ai' }, { name: 'workflow' }],
+    color: '#6d6a6a',
+  },
+  {
+    label: 'React Router',
+    packages: [
+      { name: 'react-router' },
+      { name: '@remix-run/react' },
+      { name: 'remix' },
+    ],
+    color: '#ff7580',
+  },
+  {
+    label: 'Astro',
+    packages: [{ name: 'astro' }],
+    color: '#BC52EE',
+  },
+  {
+    label: 'Vue',
+    packages: [{ name: 'vue' }],
+    color: '#6aaf04',
+  },
+  {
+    label: 'Angular',
+    packages: [{ name: '@angular/core' }, { name: 'angular' }],
+    color: '#DD0031',
+  },
+  {
+    label: 'Expo',
+    packages: [{ name: 'expo' }],
+    color: '#F59E0B',
+  },
+  {
+    packages: [{ name: 'svelte' }],
+  },
+  {
+    packages: [{ name: 'vite' }],
+  },
+  {
+    label: 'React',
+    packages: [{ name: 'react', hidden: true }],
+    color: '#61DAFB',
+    baseline: true,
+    baselineLabel: 'React',
+  },
+] satisfies PackageGroupInput[]
+
+// Default comparison for route validation.
+export const defaultPackageGroups = ecosystemComparisonPackageGroups
+
+const ecosystemFlattenedPackageGroups = [
+  ...ecosystemTanStackPackageGroups,
+  {
+    label: 'Next.js',
+    packages: [{ name: 'next' }],
+    color: '#6d6a6a',
+  },
+  {
+    label: 'AI SDK',
+    packages: [{ name: 'ai' }],
+    color: '#111827',
+  },
+  {
+    label: 'Workflow',
+    packages: [{ name: 'workflow' }],
+    color: '#9CA3AF',
+  },
+  {
+    label: 'React Router',
+    packages: [{ name: 'react-router' }],
+    color: '#ff7580',
+  },
+  {
+    label: 'Remix React',
+    packages: [{ name: '@remix-run/react' }],
+    color: '#EC4899',
+  },
+  {
+    label: 'Remix',
+    packages: [{ name: 'remix' }],
+    color: '#F97316',
+  },
+  {
+    label: 'Astro',
+    packages: [{ name: 'astro' }],
+    color: '#BC52EE',
+  },
+  {
+    label: 'Vue',
+    packages: [{ name: 'vue' }],
+    color: '#6aaf04',
+  },
+  {
+    label: 'Angular',
+    packages: [{ name: '@angular/core' }, { name: 'angular' }],
+    color: '#DD0031',
+  },
+  {
+    label: 'Expo',
+    packages: [{ name: 'expo' }],
+    color: '#F59E0B',
+  },
+  {
+    label: 'Svelte',
+    packages: [{ name: 'svelte' }],
+  },
+  {
+    label: 'Vite',
+    packages: [{ name: 'vite' }],
+  },
+  {
+    label: 'React',
+    packages: [{ name: 'react', hidden: true }],
+    color: '#61DAFB',
+    baseline: true,
+    baselineLabel: 'React',
+  },
+] satisfies PackageGroupInput[]
 
 export function getPopularComparisons(): v.InferInput<
   typeof packageComparisonSchema
 >[] {
   return [
+    {
+      title: 'JavaScript Ecosystem',
+      packageGroups: ecosystemComparisonPackageGroups,
+    },
+    {
+      title: 'JavaScript Ecosystem (flat)',
+      packageGroups: ecosystemFlattenedPackageGroups,
+    },
+    {
+      title: 'TanStack Total',
+      packageGroups: [tanstackAggregatePackageGroup],
+    },
+    {
+      title: 'TanStack Libraries',
+      packageGroups: tanstackLibraryPackageGroups,
+    },
     {
       title: 'Data Fetching',
-      packageGroups: defaultPackageGroups,
+      packageGroups: dataFetchingPackageGroups,
     },
     {
       title: 'State Management',
@@ -69,6 +488,10 @@ export function getPopularComparisons(): v.InferInput<
           packages: [{ name: 'valtio' }],
           color: '#FF6B6B',
         },
+        {
+          packages: [{ name: '@tanstack/store' }],
+          color: '#FF69B4',
+        },
         {
           packages: [
             { name: '@tanstack/react-query' },
@@ -101,14 +524,55 @@ export function getPopularComparisons(): v.InferInput<
           packages: [{ name: 'expo' }],
           color: '#f59e0b',
         },
+      ],
+    },
+    {
+      title: 'AI & Agent Harnesses',
+      packageGroups: [
+        {
+          label: 'TanStack AI',
+          packages: [{ name: '@tanstack/ai' }],
+          color: '#EC4899',
+        },
         {
-          packages: [
-            {
-              name: 'react',
-              hidden: true,
-            },
-          ],
-          baseline: true,
+          label: 'AI SDK',
+          packages: [{ name: 'ai' }],
+          color: '#111827',
+        },
+        {
+          label: 'LangChain',
+          packages: [{ name: 'langchain' }],
+          color: '#1C3C3C',
+        },
+        {
+          label: 'LangGraph',
+          packages: [{ name: '@langchain/langgraph' }],
+          color: '#2E8B57',
+        },
+        {
+          label: 'Mastra',
+          packages: [{ name: '@mastra/core' }],
+          color: '#7C3AED',
+        },
+        {
+          label: 'OpenAI Agents',
+          packages: [{ name: '@openai/agents' }],
+          color: '#10A37F',
+        },
+        {
+          label: 'Genkit',
+          packages: [{ name: 'genkit' }],
+          color: '#4285F4',
+        },
+        {
+          label: 'CopilotKit',
+          packages: [{ name: '@copilotkit/react-core' }],
+          color: '#F97316',
+        },
+        {
+          label: 'Promptfoo',
+          packages: [{ name: 'promptfoo' }],
+          color: '#FACC15',
         },
       ],
     },
@@ -310,6 +774,17 @@ export function getPopularComparisons(): v.InferInput<
           packages: [{ name: '@conform-to/dom' }],
           color: '#FF5733',
         },
+        {
+          packages: [
+            { name: '@formisch/react' },
+            { name: '@formisch/svelte' },
+            { name: '@formisch/solid' },
+            { name: '@formisch/vue' },
+            { name: '@formisch/preact' },
+            { name: '@formisch/qwik' },
+          ],
+          color: '#8B5CF6',
+        },
       ],
     },
     {
@@ -454,56 +929,56 @@ export function getPopularComparisons(): v.InferInput<
       ],
     },
     {
-      title: 'All TanStack Packages',
+      title: 'Drag & Drop',
       packageGroups: [
         {
-          packages: [
-            { name: '@tanstack/react-query' },
-            { name: 'react-query' },
-          ],
-          color: '#FF4500',
+          label: 'dnd-kit',
+          packages: [{ name: '@dnd-kit/core' }],
+          color: '#eb2f06',
         },
         {
-          packages: [
-            { name: '@tanstack/react-table' },
-            { name: 'react-table' },
-          ],
-          color: '#FF7043',
+          label: 'Pragmatic DnD',
+          packages: [{ name: '@atlaskit/pragmatic-drag-and-drop' }],
+          color: '#0652dd',
         },
         {
-          packages: [{ name: '@tanstack/react-router' }],
-          color: '#32CD32',
+          label: 'React DnD',
+          packages: [{ name: 'react-dnd' }],
+          color: '#10ac84',
         },
         {
+          label: 'SortableJS',
           packages: [
-            { name: '@tanstack/react-virtual' },
-            { name: 'react-virtual' },
+            { name: 'sortablejs' },
+            { name: 'react-sortablejs' },
+            { name: 'vuedraggable' },
+            { name: 'vue-draggable-next' },
+            { name: 'vue-draggable-plus' },
           ],
-          color: '#8B5CF6',
-        },
-        {
-          packages: [{ name: '@tanstack/react-form' }],
-          color: '#FFD700',
-        },
-        {
-          packages: [{ name: '@tanstack/start' }],
-          color: '#00CED1',
+          color: '#f39c12',
         },
         {
-          packages: [{ name: '@tanstack/store' }],
-          color: '#FF69B4',
+          label: 'Hello Pangea DnD',
+          packages: [
+            { name: '@hello-pangea/dnd' },
+            { name: 'react-beautiful-dnd' },
+          ],
+          color: '#8854d0',
         },
         {
-          packages: [{ name: '@tanstack/ranger' }],
-          color: '#98D8C8',
+          label: 'React Draggable',
+          packages: [{ name: 'react-draggable' }],
+          color: '#20bf6b',
         },
         {
-          packages: [{ name: '@tanstack/config' }],
-          color: '#FFA500',
+          label: 'React Grid Layout',
+          packages: [{ name: 'react-grid-layout' }],
+          color: '#d81b60',
         },
         {
-          packages: [{ name: '@tanstack/react-charts' }],
-          color: '#4169E1',
+          label: 'React Rnd',
+          packages: [{ name: 'react-rnd' }],
+          color: '#a55d35',
         },
       ],
     },
diff --git a/src/routes/stats/npm/-utils.ts b/src/routes/stats/npm/-utils.ts
index 5aa8a4607..1f31d27e0 100644
--- a/src/routes/stats/npm/-utils.ts
+++ b/src/routes/stats/npm/-utils.ts
@@ -1,4 +1,5 @@
 import * as v from 'valibot'
+import { MAX_NPM_STATS_GROUPS } from '~/utils/npm-stats-limits'
 
 // Re-export shared types from chart utils
 export {
@@ -7,6 +8,18 @@ export {
   binningOptions,
   getBinFunction,
 } from '~/utils/chart'
+export {
+  chartTypeSchema,
+  type ChartType,
+  barOrientationSchema,
+  type BarOrientation,
+  latestBarSortSchema,
+  type LatestBarSort,
+  defaultPlaybackIntervalMs,
+  playbackIntervalMsSchema,
+  viewModeSchema,
+  type ViewMode,
+} from '~/components/npm-stats/shared'
 
 // NPM-specific schemas (extends shared with additional time ranges)
 export const transformModeSchema = v.picklist(['none', 'normalize-y'])
@@ -30,20 +43,36 @@ export const timeRangeSchema = v.picklist([
 export type TimeRange = v.InferOutput<typeof timeRangeSchema>
 
 // URL encoding/decoding for package names
-// @tanstack/react-query -> @tanstack__react-query
+// @tanstack/react-query -> @tanstack~1react-query
 export function encodePackageName(packageName: string): string {
-  return packageName.replace(/\//g, '__')
+  return packageName.replace(/~/g, '~0').replace(/\//g, '~1')
 }
 
-// @tanstack__react-query -> @tanstack/react-query
+// @tanstack~1react-query -> @tanstack/react-query
 export function decodePackageName(urlName: string): string {
-  return urlName.replace(/__/g, '/')
+  try {
+    const decoded = decodeURIComponent(urlName)
+    if (
+      decoded.startsWith('@') &&
+      decoded.includes('__') &&
+      !decoded.includes('/')
+    ) {
+      return decoded.replace('__', '/')
+    }
+    return decoded.replace(/~1/g, '/').replace(/~0/g, '~')
+  } catch {
+    return ''
+  }
 }
 
 // Parse packages from URL like "react-vs-vue" or "@tanstack__react-query-vs-swr"
 export function parsePackagesFromUrl(packagesParam: string): string[] {
-  const parts = packagesParam.split('-vs-')
-  return parts.map(decodePackageName)
+  const parts = packagesParam.split('-vs-').slice(0, MAX_NPM_STATS_GROUPS)
+  return parts
+    .map(decodePackageName)
+    .filter((packageName) =>
+      /^(?:@[a-z0-9][a-z0-9._-]*\/)?[a-z0-9][a-z0-9._-]*$/.test(packageName),
+    )
 }
 
 // Generate a comparison URL from package names
diff --git a/src/routes/stats/npm/embed.tsx b/src/routes/stats/npm/embed.tsx
new file mode 100644
index 000000000..a68e9403e
--- /dev/null
+++ b/src/routes/stats/npm/embed.tsx
@@ -0,0 +1,347 @@
+import * as React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import * as v from 'valibot'
+
+import { Spinner } from '~/components/Spinner'
+import {
+  npmQueryOptions,
+  selectLatestBucketQueryData,
+} from '~/components/npm-stats/npmQueryOptions'
+import { getLatestBucketOffsetBounds } from '~/components/npm-stats/binning'
+import {
+  barOrientationSchema,
+  chartTypeSchema,
+  defaultPlaybackIntervalMs,
+  defaultRangeBinTypes,
+  getDefaultChartTypeForViewMode,
+  isChartTypeValidForViewMode,
+  latestBarSortSchema,
+  playbackIntervalMsSchema,
+  type BarOrientation,
+  type BinType,
+  type ChartType,
+  type LatestBarSort,
+  type PackageGroup,
+  type ShowDataMode,
+  type TimeRange,
+  type TransformMode,
+  type ViewMode,
+  viewModeSchema,
+} from '~/components/npm-stats/shared'
+import { chartWidthSchema } from '~/utils/schemas'
+import { seo } from '~/utils/seo'
+import { defaultPackageGroups, packageGroupsSchema } from './-comparisons'
+
+const LazyNPMStatsChart = React.lazy(() =>
+  import('~/components/npm-stats/NPMStatsChart').then((m) => ({
+    default: m.NPMStatsChart,
+  })),
+)
+
+const transformModeSchema = v.picklist(['none', 'normalize-y'])
+const binTypeSchema = v.picklist(['yearly', 'monthly', 'weekly', 'daily'])
+const showDataModeSchema = v.picklist(['all', 'complete'])
+const bucketOffsetSchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(-5000),
+  v.maxValue(0),
+)
+const timelineZoomTimeSchema = v.pipe(v.number(), v.integer(), v.minValue(0))
+
+export const Route = createFileRoute('/stats/npm/embed')({
+  validateSearch: v.object({
+    packageGroups: v.fallback(
+      v.optional(packageGroupsSchema, defaultPackageGroups),
+      defaultPackageGroups,
+    ),
+    range: v.fallback(
+      v.optional(
+        v.picklist([
+          '7-days',
+          '30-days',
+          '90-days',
+          '180-days',
+          '365-days',
+          '730-days',
+          '1825-days',
+          'all-time',
+        ]),
+        '1825-days',
+      ),
+      '1825-days',
+    ),
+    transform: v.fallback(v.optional(transformModeSchema, 'none'), 'none'),
+    binType: v.fallback(v.optional(binTypeSchema, 'weekly'), 'weekly'),
+    viewMode: v.fallback(v.optional(viewModeSchema, 'history'), 'history'),
+    chartType: v.fallback(v.optional(chartTypeSchema, 'line'), 'line'),
+    barOrientation: v.fallback(v.optional(barOrientationSchema), undefined),
+    barSort: v.fallback(v.optional(latestBarSortSchema, 'value'), 'value'),
+    bucketOffset: v.fallback(v.optional(bucketOffsetSchema, 0), 0),
+    playbackIntervalMs: v.fallback(
+      v.optional(playbackIntervalMsSchema, defaultPlaybackIntervalMs),
+      defaultPlaybackIntervalMs,
+    ),
+    showDataMode: v.fallback(v.optional(showDataModeSchema, 'all'), 'all'),
+    normalizeBaseline: v.fallback(v.optional(v.boolean(), true), true),
+    showBaseline: v.fallback(v.optional(v.boolean(), true), true),
+    showLegend: v.fallback(v.optional(v.boolean(), false), false),
+    width: v.fallback(v.optional(chartWidthSchema), undefined),
+    timelineStart: v.fallback(v.optional(timelineZoomTimeSchema), undefined),
+    timelineEnd: v.fallback(v.optional(timelineZoomTimeSchema), undefined),
+  }),
+  head: () => ({
+    meta: seo({
+      title: 'TanStack NPM Stats Chart Embed',
+      description: 'Embeddable npm download statistics chart from TanStack.',
+      noindex: true,
+    }),
+  }),
+  component: NpmStatsEmbed,
+  staticData: {
+    baseParent: true,
+    includeSearchInCanonical: true,
+    showNavbar: false,
+  },
+})
+
+type NpmStatsEmbedSearch = {
+  packageGroups?: PackageGroup[]
+  range?: TimeRange
+  transform?: TransformMode
+  binType?: BinType
+  viewMode?: ViewMode
+  chartType?: ChartType
+  barOrientation?: BarOrientation
+  barSort?: LatestBarSort
+  bucketOffset?: number
+  playbackIntervalMs?: number
+  showDataMode?: ShowDataMode
+  normalizeBaseline?: boolean
+  showBaseline?: boolean
+  showLegend?: boolean
+  width?: number
+  timelineStart?: number
+  timelineEnd?: number
+}
+
+function useElementHeight() {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [height, setHeight] = React.useState(0)
+
+  React.useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const setMeasuredHeight = (nextHeight: number) => {
+      setHeight((previousHeight) =>
+        previousHeight === nextHeight ? previousHeight : nextHeight,
+      )
+    }
+
+    const updateHeight = () => {
+      setMeasuredHeight(Math.round(container.getBoundingClientRect().height))
+    }
+
+    updateHeight()
+
+    const ownerWindow = container.ownerDocument.defaultView
+    if (!ownerWindow?.ResizeObserver) {
+      ownerWindow?.addEventListener('resize', updateHeight)
+      return () => {
+        ownerWindow?.removeEventListener('resize', updateHeight)
+      }
+    }
+
+    const resizeObserver = new ownerWindow.ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+
+      setMeasuredHeight(Math.round(entry.contentRect.height))
+    })
+
+    resizeObserver.observe(container)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+
+  return { containerRef, height }
+}
+
+function ChartFallback({ height }: { height: number }) {
+  return (
+    <div
+      className="animate-pulse rounded bg-gray-100 dark:bg-gray-900"
+      style={{ height }}
+    />
+  )
+}
+
+function NpmStatsEmbed() {
+  const search = Route.useSearch()
+  const navigate = Route.useNavigate()
+  const { containerRef, height: measuredHeight } = useElementHeight()
+
+  const packageGroups: PackageGroup[] = search.packageGroups ?? []
+  const range: TimeRange = search.range ?? '1825-days'
+  const transform: TransformMode = search.transform ?? 'none'
+  const binTypeParam: BinType | undefined = search.binType
+  const viewMode: ViewMode = search.viewMode ?? 'history'
+  const chartTypeParam: ChartType = search.chartType ?? 'line'
+  const barOrientationParam: BarOrientation =
+    search.barOrientation ??
+    (chartTypeParam === 'horizontal-bar' ? 'horizontal' : 'vertical')
+  const barSort: LatestBarSort = search.barSort ?? 'value'
+  const showDataMode: ShowDataMode = search.showDataMode ?? 'all'
+  const normalizeBaseline: boolean = search.normalizeBaseline ?? true
+  const showBaseline: boolean = search.showBaseline ?? true
+  const showLegend: boolean = search.showLegend ?? false
+  const bucketOffsetParam: number = search.bucketOffset ?? 0
+  const playbackIntervalMs: number =
+    search.playbackIntervalMs ?? defaultPlaybackIntervalMs
+  const timelineStart: number | undefined = search.timelineStart
+  const timelineEnd: number | undefined = search.timelineEnd
+  const width: number | undefined = search.width
+
+  const binType: BinType = binTypeParam ?? defaultRangeBinTypes[range]
+  const chartType = isChartTypeValidForViewMode(viewMode, chartTypeParam)
+    ? chartTypeParam
+    : getDefaultChartTypeForViewMode(viewMode)
+  const barOrientation: BarOrientation =
+    viewMode === 'latest' &&
+    (chartType === 'bar' || chartType === 'stacked-bar')
+      ? barOrientationParam
+      : 'vertical'
+  const latestBucketBounds = getLatestBucketOffsetBounds({ binType, range })
+  const bucketOffset = Math.max(
+    latestBucketBounds.minOffset,
+    Math.min(bucketOffsetParam, latestBucketBounds.maxOffset),
+  )
+  const queryPackageGroups = packageGroups.filter(
+    (packageGroup) => viewMode === 'history' || !packageGroup.baseline,
+  )
+
+  const npmQuery = useQuery(
+    npmQueryOptions({
+      packageGroups: queryPackageGroups,
+      range,
+      viewMode,
+      binType,
+      bucketOffset,
+    }),
+  )
+  const displayQueryData = React.useMemo(
+    () =>
+      viewMode === 'latest'
+        ? selectLatestBucketQueryData({
+            queryData: npmQuery.data,
+            binType,
+            bucketOffset,
+          })
+        : npmQuery.data,
+    [binType, bucketOffset, npmQuery.data, viewMode],
+  )
+
+  const handleTimelineRangeChange = React.useCallback(
+    (nextRange: { end: number | undefined; start: number | undefined }) => {
+      navigate({
+        to: '.',
+        search: (prev: NpmStatsEmbedSearch) => ({
+          ...prev,
+          timelineStart: nextRange.start,
+          timelineEnd: nextRange.end,
+        }),
+        replace: true,
+        resetScroll: false,
+      })
+    },
+    [navigate],
+  )
+
+  const chartHeight = measuredHeight || 400
+  const chartWidthStyle = width
+    ? {
+        maxWidth: '100%',
+        width,
+      }
+    : undefined
+
+  return (
+    <div className="relative flex h-dvh w-screen overflow-hidden bg-white text-gray-950 dark:bg-gray-950 dark:text-gray-50">
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+html, body {
+  background: transparent !important;
+  height: 100%;
+  margin: 0 !important;
+  overflow: hidden;
+  width: 100%;
+}
+`,
+        }}
+      />
+      <div
+        className={
+          width
+            ? 'min-h-0 min-w-0 flex-1'
+            : 'min-h-0 min-w-0 flex-1 self-stretch'
+        }
+        ref={containerRef}
+        style={chartWidthStyle}
+      >
+        {queryPackageGroups.length ? (
+          npmQuery.isLoading ? (
+            <div
+              className="flex items-center justify-center"
+              style={{ height: chartHeight }}
+            >
+              <div className="flex flex-col items-center gap-3">
+                <Spinner />
+                <div className="text-xs text-gray-600 dark:text-gray-400">
+                  Loading download statistics...
+                </div>
+              </div>
+            </div>
+          ) : (
+            <React.Suspense fallback={<ChartFallback height={chartHeight} />}>
+              <LazyNPMStatsChart
+                range={range}
+                queryData={displayQueryData}
+                height={chartHeight}
+                viewMode={viewMode}
+                chartType={chartType}
+                barSort={barSort}
+                barOrientation={barOrientation}
+                transform={transform}
+                binType={binType}
+                packages={queryPackageGroups}
+                showDataMode={showDataMode}
+                normalizeBaseline={viewMode === 'history' && normalizeBaseline}
+                showBaseline={viewMode === 'history' && showBaseline}
+                showLegend={showLegend}
+                timelineStart={timelineStart}
+                timelineEnd={timelineEnd}
+                animationQueryData={npmQuery.data}
+                animationBucketOffsetBounds={latestBucketBounds}
+                animationFrameIntervalMs={playbackIntervalMs}
+                onTimelineRangeChange={handleTimelineRangeChange}
+              />
+            </React.Suspense>
+          )
+        ) : null}
+      </div>
+      <a
+        className="absolute top-1 right-1 z-10 rounded bg-white/75 px-1.5 py-0.5 text-[9px] leading-none font-medium text-gray-500 ring-1 ring-gray-200/80 backdrop-blur hover:text-gray-950 dark:bg-gray-950/75 dark:text-gray-500 dark:ring-gray-800/80 dark:hover:text-gray-50"
+        href="/stats/npm"
+        rel="noreferrer"
+        target="_blank"
+      >
+        Powered by TanStack NPM Stats
+      </a>
+    </div>
+  )
+}
diff --git a/src/routes/stats/npm/index.tsx b/src/routes/stats/npm/index.tsx
index 3480856f7..b6d6b319d 100644
--- a/src/routes/stats/npm/index.tsx
+++ b/src/routes/stats/npm/index.tsx
@@ -1,47 +1,94 @@
 import * as React from 'react'
 import { Link, createFileRoute } from '@tanstack/react-router'
 import * as v from 'valibot'
-import { useThrottledCallback } from '@tanstack/react-pacer'
-import { X } from 'lucide-react'
+import { useThrottledCallback, useThrottler } from '@tanstack/react-pacer'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { HelpCircle, X } from 'lucide-react'
 import { useQuery } from '@tanstack/react-query'
 import { Card } from '~/components/Card'
+import { Tooltip } from '~/components/Tooltip'
 import { seo } from '~/utils/seo'
+import { chartHeightSchema, chartWidthSchema } from '~/utils/schemas'
 import {
   getPopularComparisons,
-  packageGroupSchema,
+  getBaselinePresets,
+  packageGroupsSchema,
   defaultPackageGroups,
+  type BaselinePreset,
 } from './-comparisons'
-import { GamHeader, GamVrec1 } from '~/components/Gam'
-import { AdGate } from '~/contexts/AdsContext'
 import { Spinner } from '~/components/Spinner'
+import { BaselineSection } from '~/components/npm-stats/BaselineSection'
+import { ChartControls } from '~/components/npm-stats/ChartControls'
+import { ColorPickerPopover } from '~/components/npm-stats/ColorPickerPopover'
+import { DisabledChartActions } from '~/components/npm-stats/DisabledChartActions'
+import type { NpmStatsChartEmbedOptions } from '~/components/npm-stats/NPMStatsChart'
+import { PackagePills } from '~/components/npm-stats/PackagePills'
+import { PackageSearch } from '~/components/npm-stats/PackageSearch'
+import { PopularComparisons } from '~/components/npm-stats/PopularComparisons'
 import {
-  NPMStatsChart,
-  PackageSearch,
   Resizable,
-  ColorPickerPopover,
-  StatsTable,
-  PopularComparisons,
-  ChartControls,
-  PackagePills,
+  type ResizableSizeChange,
+  type ResizeChangeOptions,
+} from '~/components/npm-stats/Resizable'
+import { StatsTable } from '~/components/npm-stats/StatsTable'
+import { LatestBucketNavigator } from '~/components/npm-stats/LatestBucketNavigator'
+import {
   npmQueryOptions,
+  selectLatestBucketQueryData,
+} from '~/components/npm-stats/npmQueryOptions'
+import { getLatestBucketOffsetBounds } from '~/components/npm-stats/binning'
+import {
+  defaultRangeBinTypes,
+  getPackageGroupLabel,
+  getPackageColor,
+  getDefaultChartTypeForViewMode,
+  isChartTypeValidForViewMode,
+  defaultPlaybackIntervalMs,
+  playbackIntervalMsSchema,
+  chartTypeSchema,
+  barOrientationSchema,
+  latestBarSortSchema,
+  viewModeSchema,
+  type BarOrientation,
+  type BinType,
+  type ChartType,
+  type LatestBarSort,
   type PackageGroup,
+  type ShowDataMode,
   type TimeRange,
-  type BinType,
   type TransformMode,
-  type ShowDataMode,
-  type FacetValue,
-  binningOptionsByType,
-  defaultRangeBinTypes,
-  getPackageColor,
-} from '~/components/npm-stats'
+  type ViewMode,
+} from '~/components/npm-stats/shared'
+
+const LazyNPMStatsChart = React.lazy(() =>
+  import('~/components/npm-stats/NPMStatsChart').then((m) => ({
+    default: m.NPMStatsChart,
+  })),
+)
+
+function ChartFallback({ height }: { height: number }) {
+  return (
+    <div
+      className="animate-pulse rounded bg-gray-100 dark:bg-gray-800/40"
+      style={{ height }}
+    />
+  )
+}
 
 const transformModeSchema = v.picklist(['none', 'normalize-y'])
 const binTypeSchema = v.picklist(['yearly', 'monthly', 'weekly', 'daily'])
 const showDataModeSchema = v.picklist(['all', 'complete'])
+const bucketOffsetSchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(-5000),
+  v.maxValue(0),
+)
+const timelineZoomTimeSchema = v.pipe(v.number(), v.integer(), v.minValue(0))
 export const Route = createFileRoute('/stats/npm/')({
   validateSearch: v.object({
     packageGroups: v.fallback(
-      v.optional(v.array(packageGroupSchema), defaultPackageGroups),
+      v.optional(packageGroupsSchema, defaultPackageGroups),
       defaultPackageGroups,
     ),
     range: v.fallback(
@@ -56,22 +103,35 @@ export const Route = createFileRoute('/stats/npm/')({
           '1825-days',
           'all-time',
         ]),
-        '365-days',
+        '1825-days',
       ),
-      '365-days',
+      '1825-days',
     ),
     transform: v.fallback(v.optional(transformModeSchema, 'none'), 'none'),
-    facetX: v.fallback(v.optional(v.picklist(['name'])), undefined),
-    facetY: v.fallback(v.optional(v.picklist(['name'])), undefined),
     binType: v.fallback(v.optional(binTypeSchema, 'weekly'), 'weekly'),
+    viewMode: v.fallback(v.optional(viewModeSchema, 'history'), 'history'),
+    chartType: v.fallback(v.optional(chartTypeSchema, 'line'), 'line'),
+    barOrientation: v.fallback(v.optional(barOrientationSchema), undefined),
+    barSort: v.fallback(v.optional(latestBarSortSchema, 'value'), 'value'),
+    bucketOffset: v.fallback(v.optional(bucketOffsetSchema, 0), 0),
+    playbackIntervalMs: v.fallback(
+      v.optional(playbackIntervalMsSchema, defaultPlaybackIntervalMs),
+      defaultPlaybackIntervalMs,
+    ),
+    playbackLoop: v.fallback(v.optional(v.boolean(), false), false),
+    playbackPlaying: v.fallback(v.optional(v.boolean(), false), false),
     showDataMode: v.fallback(v.optional(showDataModeSchema, 'all'), 'all'),
-    height: v.fallback(v.optional(v.number(), 400), 400),
+    normalizeBaseline: v.fallback(v.optional(v.boolean(), true), true),
+    showBaseline: v.fallback(v.optional(v.boolean(), false), false),
+    showLegend: v.fallback(v.optional(v.boolean(), false), false),
+    height: v.fallback(v.optional(chartHeightSchema, 400), 400),
+    width: v.fallback(v.optional(chartWidthSchema), undefined),
+    timelineStart: v.fallback(v.optional(timelineZoomTimeSchema), undefined),
+    timelineEnd: v.fallback(v.optional(timelineZoomTimeSchema), undefined),
   }),
   loaderDeps: ({ search }) => ({
-    packageList: search.packageGroups
-      ?.map((p) => p.packages[0].name)
-      .join(' vs '),
-    packageNames: search.packageGroups?.map((p) => p.packages[0].name) ?? [],
+    packageList: search.packageGroups?.map(getPackageGroupLabel).join(' vs '),
+    packageNames: search.packageGroups?.map(getPackageGroupLabel) ?? [],
   }),
   loader: async ({ deps }) => {
     return deps
@@ -178,6 +238,7 @@ export const Route = createFileRoute('/stats/npm/')({
   },
   component: RouteComponent,
   staticData: {
+    includeSearchInCanonical: true,
     Title: () => {
       return (
         <Link
@@ -191,32 +252,61 @@ export const Route = createFileRoute('/stats/npm/')({
   },
 })
 
-type NpmStatsSearch = {
+type _NpmStatsSearch = {
   packageGroups?: Array<{
     name?: string
+    label?: string
+    hidden?: boolean
     color?: string
     baseline?: boolean
+    baselineLabel?: string
     packages: Array<{ name?: string; hidden?: boolean }>
   }>
   range?: TimeRange
   transform?: 'none' | 'normalize-y'
-  facetX?: 'name'
-  facetY?: 'name'
   binType?: BinType
+  viewMode?: ViewMode
+  chartType?: ChartType
+  barOrientation?: BarOrientation
+  barSort?: LatestBarSort
+  bucketOffset?: number
+  playbackIntervalMs?: number
+  playbackLoop?: boolean
+  playbackPlaying?: boolean
   showDataMode?: 'all' | 'complete'
+  showLegend?: boolean
   height?: number
+  width?: number
+  timelineStart?: number
+  timelineEnd?: number
 }
 
 function RouteComponent() {
   const search = Route.useSearch()
-  const packageGroups: PackageGroup[] = search.packageGroups ?? []
-  const range: TimeRange = search.range ?? '7-days'
+  const packageGroups: PackageGroup[] =
+    search.packageGroups ?? defaultPackageGroups
+  const range: TimeRange = search.range ?? '1825-days'
   const transform: TransformMode = search.transform ?? 'none'
-  const facetX: FacetValue | undefined = search.facetX
-  const facetY: FacetValue | undefined = search.facetY
   const binTypeParam: BinType | undefined = search.binType
+  const viewMode: ViewMode = search.viewMode ?? 'history'
+  const chartTypeParam: ChartType = search.chartType ?? 'line'
+  const barOrientationParam: BarOrientation =
+    search.barOrientation ??
+    (chartTypeParam === 'horizontal-bar' ? 'horizontal' : 'vertical')
+  const barSort: LatestBarSort = search.barSort ?? 'value'
   const showDataModeParam: ShowDataMode = search.showDataMode ?? 'all'
+  const normalizeBaseline: boolean = search.normalizeBaseline ?? true
+  const showBaseline: boolean = search.showBaseline ?? false
+  const showLegend: boolean = search.showLegend ?? false
+  const bucketOffsetParam: number = search.bucketOffset ?? 0
+  const playbackIntervalMs: number =
+    search.playbackIntervalMs ?? defaultPlaybackIntervalMs
+  const playbackLoop: boolean = search.playbackLoop ?? false
+  const playbackPlaying: boolean = search.playbackPlaying ?? false
   const height: number = search.height ?? 400
+  const width: number | undefined = search.width
+  const timelineStart: number | undefined = search.timelineStart
+  const timelineEnd: number | undefined = search.timelineEnd
   const [combiningPackage, setCombiningPackage] = React.useState<string | null>(
     null,
   )
@@ -231,46 +321,266 @@ function RouteComponent() {
   const [openMenuPackage, setOpenMenuPackage] = React.useState<string | null>(
     null,
   )
+  const [chartActionsContainer, setChartActionsContainer] =
+    React.useState<HTMLDivElement | null>(null)
+  const [chartActionsMounted, setChartActionsMounted] = React.useState(false)
 
   const binType: BinType = binTypeParam ?? defaultRangeBinTypes[range]
-  const binOption = binningOptionsByType[binType]
+  const chartType = isChartTypeValidForViewMode(viewMode, chartTypeParam)
+    ? chartTypeParam
+    : getDefaultChartTypeForViewMode(viewMode)
+  const barOrientation: BarOrientation =
+    viewMode === 'latest' &&
+    (chartType === 'bar' || chartType === 'stacked-bar')
+      ? barOrientationParam
+      : 'vertical'
+  const latestBucketBounds = getLatestBucketOffsetBounds({ binType, range })
+  const bucketOffset = Math.max(
+    latestBucketBounds.minOffset,
+    Math.min(bucketOffsetParam, latestBucketBounds.maxOffset),
+  )
+  const queryPackageGroupEntries = packageGroups
+    .map((packageGroup, index) => ({ packageGroup, index }))
+    .filter(
+      ({ packageGroup }) => viewMode === 'history' || !packageGroup.baseline,
+    )
+  const queryPackageGroups = queryPackageGroupEntries.map(
+    ({ packageGroup }) => packageGroup,
+  )
+  const queryPackageGroupIndexes = queryPackageGroupEntries.map(
+    ({ index }) => index,
+  )
+  const tableTransform: TransformMode =
+    viewMode === 'history' && chartType === 'line' ? transform : 'none'
+  const canToggleShowBaseline = viewMode === 'history' && chartType === 'line'
 
   const handleBinnedChange = (value: BinType) => {
     navigate({
       to: '.',
-      search: (prev: NpmStatsSearch) => ({
+      search: (prev) => ({
         ...prev,
         binType: value,
+        bucketOffset: 0,
+        playbackPlaying: false,
+        timelineStart: undefined,
+        timelineEnd: undefined,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleViewModeChange = (mode: ViewMode) => {
+    navigate({
+      to: '.',
+      search: (prev) => ({
+        ...prev,
+        viewMode: mode,
+        chartType: isChartTypeValidForViewMode(mode, chartType)
+          ? chartType
+          : getDefaultChartTypeForViewMode(mode),
+        transform: mode === 'latest' ? 'none' : prev.transform,
+        barOrientation,
+        showBaseline: mode === 'latest' ? false : prev.showBaseline,
+        playbackPlaying: mode === 'latest' ? prev.playbackPlaying : false,
+        bucketOffset: 0,
+        timelineStart: undefined,
+        timelineEnd: undefined,
       }),
       resetScroll: false,
     })
   }
 
-  const handleBaselineChange = (packageName: string) => {
+  const handleChartTypeChange = (nextChartType: ChartType) => {
     navigate({
       to: '.',
-      search: (prev: NpmStatsSearch) => {
+      search: (prev) => ({
+        ...prev,
+        chartType: nextChartType,
+        barOrientation,
+        transform: nextChartType === 'line' ? prev.transform : 'none',
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleBarSortChange = (nextBarSort: LatestBarSort) => {
+    navigate({
+      to: '.',
+      search: (prev) => ({
+        ...prev,
+        barSort: nextBarSort,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleBarOrientationChange = (nextBarOrientation: BarOrientation) => {
+    navigate({
+      to: '.',
+      search: (prev) => ({
+        ...prev,
+        barOrientation: nextBarOrientation,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleBucketOffsetChange = (nextBucketOffset: number) => {
+    const nextOffset = Math.max(
+      latestBucketBounds.minOffset,
+      Math.min(nextBucketOffset, latestBucketBounds.maxOffset),
+    )
+
+    navigate({
+      to: '.',
+      search: (prev) => ({
+        ...prev,
+        bucketOffset: nextOffset,
+      }),
+      replace: true,
+      resetScroll: false,
+    })
+  }
+
+  const handlePlaybackIntervalChange = (nextPlaybackIntervalMs: number) => {
+    navigate({
+      to: '.',
+      search: (prev) => ({
+        ...prev,
+        playbackIntervalMs: nextPlaybackIntervalMs,
+      }),
+      replace: true,
+      resetScroll: false,
+    })
+  }
+
+  const handlePlaybackLoopChange = (nextPlaybackLoop: boolean) => {
+    navigate({
+      to: '.',
+      search: (prev) => ({
+        ...prev,
+        playbackLoop: nextPlaybackLoop,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handlePlaybackPlayingChange = (nextPlaybackPlaying: boolean) => {
+    navigate({
+      to: '.',
+      search: (prev) => ({
+        ...prev,
+        playbackPlaying: nextPlaybackPlaying,
+      }),
+      replace: true,
+      resetScroll: false,
+    })
+  }
+
+  const handleAddBaseline = (packageName: string, color?: string) => {
+    navigate({
+      to: '.',
+      search: (prev) => {
+        const groups = prev.packageGroups ?? []
+        const alreadyBaseline = groups.some(
+          (pg) =>
+            pg.baseline && pg.packages.some((p) => p.name === packageName),
+        )
+        if (alreadyBaseline) return prev
         return {
           ...prev,
-          packageGroups: prev.packageGroups?.map((pkg) => {
-            const baseline =
-              pkg.packages[0].name === packageName ? !pkg.baseline : false
+          packageGroups: [
+            ...groups,
+            {
+              packages: [{ name: packageName, hidden: true }],
+              color,
+              baseline: true,
+            },
+          ],
+        }
+      },
+      resetScroll: false,
+    })
+  }
 
-            return {
-              ...pkg,
-              baseline,
-            }
-          }),
+  const handleApplyBaselinePreset = (preset: BaselinePreset) => {
+    navigate({
+      to: '.',
+      search: (prev) => {
+        const nonBaseline = (prev.packageGroups ?? []).filter(
+          (pg) => !pg.baseline,
+        )
+        return {
+          ...prev,
+          bucketOffset: 0,
+          playbackPlaying: false,
+          packageGroups: [
+            ...nonBaseline,
+            ...preset.packages.map((p) => ({
+              packages: [{ name: p.name, hidden: true }],
+              color: p.color,
+              baseline: true,
+              baselineLabel: preset.title,
+            })),
+          ],
         }
       },
       resetScroll: false,
     })
   }
 
+  const handleClearBaselines = () => {
+    navigate({
+      to: '.',
+      search: (prev) => ({
+        ...prev,
+        packageGroups: prev.packageGroups?.filter((pg) => !pg.baseline),
+        showBaseline: false,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleToggleShowBaseline = () => {
+    if (!canToggleShowBaseline) return
+
+    navigate({
+      to: '.',
+      search: (prev) => ({
+        ...prev,
+        showBaseline: !prev.showBaseline,
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleToggleNormalizeBaseline = () => {
+    navigate({
+      to: '.',
+      search: (prev) => ({
+        ...prev,
+        normalizeBaseline: !(prev.normalizeBaseline ?? true),
+      }),
+      resetScroll: false,
+    })
+  }
+
+  const handleShowLegendChange = (nextShowLegend: boolean) => {
+    navigate({
+      to: '.',
+      search: (prev) => ({
+        ...prev,
+        showLegend: nextShowLegend,
+      }),
+      replace: true,
+      resetScroll: false,
+    })
+  }
+
   const handleShowDataModeChange = (mode: ShowDataMode) => {
     navigate({
       to: '.',
-      search: (prev: NpmStatsSearch) => ({
+      search: (prev) => ({
         ...prev,
         showDataMode: mode,
       }),
@@ -281,16 +591,18 @@ function RouteComponent() {
   const togglePackageVisibility = (index: number, packageName: string) => {
     navigate({
       to: '.',
-      search: (prev: NpmStatsSearch) => ({
+      search: (prev) => ({
         ...prev,
         packageGroups: prev.packageGroups?.map((pkg, i) =>
           i === index
-            ? {
-                ...pkg,
-                packages: pkg.packages.map((p) =>
-                  p.name === packageName ? { ...p, hidden: !p.hidden } : p,
-                ),
-              }
+            ? pkg.label === packageName
+              ? { ...pkg, hidden: !pkg.hidden }
+              : {
+                  ...pkg,
+                  packages: pkg.packages.map((p) =>
+                    p.name === packageName ? { ...p, hidden: !p.hidden } : p,
+                  ),
+                }
             : pkg,
         ),
       }),
@@ -301,10 +613,36 @@ function RouteComponent() {
 
   const npmQuery = useQuery(
     npmQueryOptions({
-      packageGroups: packageGroups,
+      packageGroups: queryPackageGroups,
       range,
+      viewMode,
+      binType,
+      bucketOffset,
     }),
   )
+  const displayQueryData = React.useMemo(
+    () =>
+      viewMode === 'latest'
+        ? selectLatestBucketQueryData({
+            queryData: npmQuery.data,
+            binType,
+            bucketOffset,
+          })
+        : npmQuery.data,
+    [binType, bucketOffset, npmQuery.data, viewMode],
+  )
+  const packagePillQueryData = (() => {
+    if (viewMode === 'history') return npmQuery.data
+
+    let queryIndex = 0
+    return packageGroups.map((packageGroup) => {
+      if (packageGroup.baseline) return undefined
+
+      const queryData = npmQuery.data?.[queryIndex]
+      queryIndex++
+      return queryData
+    })
+  })()
 
   const handleRemoveFromGroup = (mainPackage: string, subPackage: string) => {
     // Find the package group
@@ -327,7 +665,7 @@ function RouteComponent() {
 
     navigate({
       to: '.',
-      search: (prev: NpmStatsSearch) => ({
+      search: (prev) => ({
         ...prev,
         packageGroups: newPackages,
       }),
@@ -338,7 +676,7 @@ function RouteComponent() {
   const handleRemovePackageName = (packageGroupIndex: number) => {
     navigate({
       to: '.',
-      search: (prev: NpmStatsSearch) => ({
+      search: (prev) => ({
         ...prev,
         packageGroups: prev.packageGroups?.filter(
           (_: unknown, i: number) => i !== packageGroupIndex,
@@ -348,34 +686,56 @@ function RouteComponent() {
     })
   }
 
-  const setBinningOption = (newBinningOption: BinType) => {
+  const handleLabelChange = (packageGroupIndex: number, label: string) => {
     navigate({
       to: '.',
-      search: (prev: NpmStatsSearch) => ({
-        ...prev,
-        binType: newBinningOption,
-      }),
+      search: (prev) => {
+        const nextLabel = label.slice(0, 80)
+        const hasNextLabel = nextLabel.trim().length > 0
+        const groups = prev.packageGroups ?? packageGroups
+
+        return {
+          ...prev,
+          packageGroups: groups.map((pkg, i) => {
+            if (i !== packageGroupIndex) return pkg
+
+            const nextPackageGroup = { ...pkg }
+            if (hasNextLabel) {
+              nextPackageGroup.label = nextLabel
+            } else {
+              delete nextPackageGroup.label
+              delete nextPackageGroup.hidden
+            }
+
+            return nextPackageGroup
+          }),
+        }
+      },
+      replace: true,
       resetScroll: false,
     })
   }
 
   const handleRangeChange = (newRange: TimeRange) => {
-    // Set default binning option based on the new range
-    setBinningOption(defaultRangeBinTypes[newRange])
-
     navigate({
       to: '.',
-      search: (prev: NpmStatsSearch) => ({
+      search: (prev) => ({
         ...prev,
         range: newRange,
+        binType: defaultRangeBinTypes[newRange],
+        bucketOffset: 0,
+        playbackPlaying: false,
+        timelineStart: undefined,
+        timelineEnd: undefined,
       }),
+      resetScroll: false,
     })
   }
 
   const handleTransformChange = (mode: TransformMode) => {
     navigate({
       to: '.',
-      search: (prev: NpmStatsSearch) => ({
+      search: (prev) => ({
         ...prev,
         transform: mode,
       }),
@@ -397,9 +757,11 @@ function RouteComponent() {
     (packageName: string, color: string | null) => {
       navigate({
         to: '.',
-        search: (prev: NpmStatsSearch) => {
-          const packageGroup = packageGroups.find((pkg) =>
-            pkg.packages.some((p) => p.name === packageName),
+        search: (prev) => {
+          const packageGroup = packageGroups.find(
+            (pkg) =>
+              pkg.label === packageName ||
+              pkg.packages.some((p) => p.name === packageName),
           )
           if (!packageGroup) return prev
 
@@ -425,19 +787,123 @@ function RouteComponent() {
     },
   )
 
-  const onHeightChange = useThrottledCallback(
-    (height: number) => {
+  const navigateChartSize = React.useCallback(
+    (size: ResizableSizeChange, replace: boolean) => {
       navigate({
         to: '.',
-        search: (prev: NpmStatsSearch) => ({ ...prev, height }),
+        search: (prev) => ({
+          ...prev,
+          ...('height' in size ? { height: size.height } : {}),
+          ...('width' in size ? { width: size.width } : {}),
+        }),
+        replace,
         resetScroll: false,
       })
     },
+    [navigate],
+  )
+
+  const chartSizeThrottler = useThrottler(
+    (size: ResizableSizeChange) => navigateChartSize(size, true),
     {
       wait: 16,
     },
   )
 
+  const onSizeChange = React.useCallback(
+    (size: ResizableSizeChange, options: ResizeChangeOptions) => {
+      if (options.replace) {
+        chartSizeThrottler.maybeExecute(size)
+        return
+      }
+
+      chartSizeThrottler.cancel()
+      if (!('height' in size) && !('width' in size)) return
+
+      navigateChartSize(size, false)
+    },
+    [chartSizeThrottler, navigateChartSize],
+  )
+
+  const handleTimelineRangeChange = React.useCallback(
+    (nextRange: { end: number | undefined; start: number | undefined }) => {
+      navigate({
+        to: '.',
+        search: (prev) => ({
+          ...prev,
+          timelineStart: nextRange.start,
+          timelineEnd: nextRange.end,
+        }),
+        replace: true,
+        resetScroll: false,
+      })
+    },
+    [navigate],
+  )
+
+  const buildEmbedUrl = React.useCallback(
+    (options: NpmStatsChartEmbedOptions) => {
+      const params = new URLSearchParams()
+
+      params.set('packageGroups', JSON.stringify(packageGroups))
+      params.set('range', range)
+      params.set('transform', transform)
+      params.set('binType', binType)
+      params.set('viewMode', viewMode)
+      params.set('chartType', chartType)
+      params.set('barOrientation', barOrientation)
+      params.set('barSort', barSort)
+      params.set('bucketOffset', `${bucketOffset}`)
+      params.set('playbackIntervalMs', `${playbackIntervalMs}`)
+      params.set('showDataMode', showDataModeParam)
+      params.set('normalizeBaseline', `${normalizeBaseline}`)
+      params.set('showBaseline', `${viewMode === 'history'}`)
+      params.set('showLegend', `${options.showLegend}`)
+
+      if (
+        options.includeTimelineRange &&
+        timelineStart !== undefined &&
+        timelineEnd !== undefined
+      ) {
+        params.set('timelineStart', `${timelineStart}`)
+        params.set('timelineEnd', `${timelineEnd}`)
+      }
+
+      if (options.lockWidth && width !== undefined) {
+        params.set('width', `${width}`)
+      }
+
+      return `/stats/npm/embed?${params}`
+    },
+    [
+      barOrientation,
+      barSort,
+      binType,
+      bucketOffset,
+      chartType,
+      normalizeBaseline,
+      packageGroups,
+      playbackIntervalMs,
+      range,
+      showDataModeParam,
+      timelineEnd,
+      timelineStart,
+      transform,
+      viewMode,
+      width,
+    ],
+  )
+
+  const embedConfig = React.useMemo(
+    () => ({
+      buildUrl: buildEmbedUrl,
+      hasTimelineRange:
+        timelineStart !== undefined && timelineEnd !== undefined,
+      hasWidth: width !== undefined,
+    }),
+    [buildEmbedUrl, timelineEnd, timelineStart, width],
+  )
+
   const handleMenuOpenChange = (packageName: string, open: boolean) => {
     if (!open) {
       setOpenMenuPackage(null)
@@ -446,32 +912,10 @@ function RouteComponent() {
     }
   }
 
-  const handleFacetXChange = (value: FacetValue | undefined) => {
-    navigate({
-      to: '.',
-      search: (prev: NpmStatsSearch) => ({
-        ...prev,
-        facetX: value,
-      }),
-      resetScroll: false,
-    })
-  }
-
-  const handleFacetYChange = (value: FacetValue | undefined) => {
-    navigate({
-      to: '.',
-      search: (prev: NpmStatsSearch) => ({
-        ...prev,
-        facetY: value,
-      }),
-      resetScroll: false,
-    })
-  }
-
   const handleAddPackage = (packageName: string) => {
     navigate({
       to: '.',
-      search: (prev: NpmStatsSearch) => ({
+      search: (prev) => ({
         ...prev,
         packageGroups: [
           ...(prev.packageGroups ?? []),
@@ -505,7 +949,7 @@ function RouteComponent() {
 
       navigate({
         to: '.',
-        search: (prev: NpmStatsSearch) => ({
+        search: (prev) => ({
           ...prev,
           packageGroups: newPackages,
         }),
@@ -515,7 +959,7 @@ function RouteComponent() {
       // Create new package group
       navigate({
         to: '.',
-        search: (prev: NpmStatsSearch) => ({
+        search: (prev) => ({
           ...prev,
           packageGroups: [
             ...packageGroups,
@@ -532,25 +976,16 @@ function RouteComponent() {
   }
 
   // Generate dynamic H1 based on packages being compared
-  const packageListForH1 = packageGroups
-    .map((p) => p.packages[0].name)
-    .join(' vs ')
+  const packageListForH1 = packageGroups.map(getPackageGroupLabel).join(' vs ')
 
   return (
     <div className="min-h-dvh p-2 sm:p-4 space-y-2 sm:space-y-4">
-      {/* SEO Header Section */}
-      <header className="max-w-4xl">
+      <header className="sr-only">
         <h1>
-          <span className="block text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">
-            NPM Download Comparison
-          </span>
-          {packageGroups.length > 0 && (
-            <span className="block text-base sm:text-lg font-normal text-gray-600 dark:text-gray-400 mt-0.5">
-              {packageListForH1}
-            </span>
-          )}
+          NPM Download Comparison
+          {packageGroups.length > 0 ? `: ${packageListForH1}` : ''}
         </h1>
-        <p className="text-gray-500 dark:text-gray-500 text-xs sm:text-sm mt-2">
+        <p>
           Compare npm package downloads with interactive charts. Track trends
           and make data-driven decisions.
         </p>
@@ -558,60 +993,129 @@ function RouteComponent() {
 
       <div className="flex gap-4">
         <Card className="flex-1 space-y-4 p-4 max-w-full">
-          <div className="flex gap-2 flex-wrap items-center">
+          <div className="flex flex-wrap items-center gap-1">
             <PackageSearch onSelect={handleAddPackage} />
             <ChartControls
+              viewMode={viewMode}
+              chartType={chartType}
               range={range}
               binType={binType}
               transform={transform}
               showDataMode={showDataModeParam}
+              barSort={barSort}
+              barOrientation={barOrientation}
+              onViewModeChange={handleViewModeChange}
+              onChartTypeChange={handleChartTypeChange}
               onRangeChange={handleRangeChange}
               onBinTypeChange={handleBinnedChange}
               onTransformChange={handleTransformChange}
               onShowDataModeChange={handleShowDataModeChange}
-              facetX={facetX}
-              facetY={facetY}
-              onFacetXChange={handleFacetXChange}
-              onFacetYChange={handleFacetYChange}
+              onBarSortChange={handleBarSortChange}
+              onBarOrientationChange={handleBarOrientationChange}
             />
+            <Tooltip
+              content="Compare npm package downloads with interactive charts. Track trends and make data-driven decisions."
+              placement="bottom"
+            >
+              <button
+                aria-label="About NPM download comparison"
+                className="flex size-6 items-center justify-center rounded bg-gray-500/10 text-gray-500 hover:bg-gray-500/20 hover:text-blue-500"
+                type="button"
+              >
+                <HelpCircle className="size-3" />
+              </button>
+            </Tooltip>
           </div>
           <PackagePills
             packageGroups={packageGroups}
-            queryData={npmQuery.data}
+            queryData={packagePillQueryData}
             onColorClick={handleColorClick}
             onToggleVisibility={togglePackageVisibility}
             onRemove={handleRemovePackageName}
-            onBaselineChange={handleBaselineChange}
             onCombinePackage={handleCombinePackage}
+            onLabelChange={handleLabelChange}
             onRemoveFromGroup={handleRemoveFromGroup}
             openMenuPackage={openMenuPackage}
             onMenuOpenChange={handleMenuOpenChange}
           />
 
+          <div
+            className={
+              viewMode === 'history'
+                ? 'flex flex-wrap items-center justify-between gap-2'
+                : 'flex flex-wrap items-center gap-2'
+            }
+          >
+            {viewMode === 'history' ? (
+              <div className="min-w-0 flex-1">
+                <BaselineSection
+                  packageGroups={packageGroups}
+                  presets={getBaselinePresets()}
+                  canToggleShowBaseline={canToggleShowBaseline}
+                  normalizeBaseline={normalizeBaseline}
+                  showBaseline={showBaseline}
+                  onToggleNormalizeBaseline={handleToggleNormalizeBaseline}
+                  onToggleShowBaseline={handleToggleShowBaseline}
+                  onAddBaseline={handleAddBaseline}
+                  onApplyPreset={handleApplyBaselinePreset}
+                  onClearBaselines={handleClearBaselines}
+                />
+              </div>
+            ) : (
+              <LatestBucketNavigator
+                binType={binType}
+                range={range}
+                bucketOffset={bucketOffset}
+                isLooping={playbackLoop}
+                isPlaying={playbackPlaying}
+                playbackIntervalMs={playbackIntervalMs}
+                onBucketOffsetChange={handleBucketOffsetChange}
+                onLoopingChange={handlePlaybackLoopChange}
+                onPlaybackIntervalChange={handlePlaybackIntervalChange}
+                onPlayingChange={handlePlaybackPlayingChange}
+              />
+            )}
+            <div
+              className="ml-auto flex min-h-6 items-center justify-end"
+              ref={setChartActionsContainer}
+            >
+              {chartActionsMounted ? null : <DisabledChartActions />}
+            </div>
+          </div>
+
           {/* Combine Package Dialog */}
-          {combiningPackage && (
-            <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-2 sm:p-4">
-              <div className="bg-white dark:bg-gray-800 rounded-lg p-2 sm:p-4 w-full max-w-md">
-                <div className="flex justify-between items-center mb-2 sm:mb-4">
-                  <h3 className="text-base sm:text-lg font-medium">
+          <DialogPrimitive.Root
+            open={combiningPackage !== null}
+            onOpenChange={(open) => {
+              if (!open) setCombiningPackage(null)
+            }}
+          >
+            <DialogPrimitive.Portal>
+              <DialogPrimitive.Overlay className="fixed inset-0 z-[999] bg-black/60 backdrop-blur-sm" />
+              <DialogPrimitive.Content className="fixed left-1/2 top-1/2 z-[1000] w-[calc(100%-1rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl bg-white dark:bg-gray-900 p-4 shadow-xl outline-none">
+                <div className="flex justify-between items-center mb-4">
+                  <DialogPrimitive.Title className="text-base sm:text-lg font-medium text-gray-900 dark:text-gray-100">
                     Add packages to {combiningPackage}
-                  </h3>
-                  <button
-                    onClick={() => setCombiningPackage(null)}
-                    className="p-0.5 sm:p-1 hover:text-red-500"
-                  >
+                  </DialogPrimitive.Title>
+                  <DialogPrimitive.Close className="rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500">
                     <X className="w-4 h-4 sm:w-5 sm:h-5" />
-                  </button>
+                  </DialogPrimitive.Close>
                 </div>
-                <PackageSearch
-                  onSelect={handleAddToGroup}
-                  placeholder="Search for packages to add..."
-                  // eslint-disable-next-line jsx-a11y/no-autofocus
-                  autoFocus={true}
-                />
-              </div>
-            </div>
-          )}
+                <DialogPrimitive.Description className="sr-only">
+                  Search for additional npm packages to combine with{' '}
+                  {combiningPackage}.
+                </DialogPrimitive.Description>
+                {combiningPackage && (
+                  <PackageSearch
+                    onSelect={handleAddToGroup}
+                    placeholder="Search for packages to add..."
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus={true}
+                  />
+                )}
+              </DialogPrimitive.Content>
+            </DialogPrimitive.Portal>
+          </DialogPrimitive.Root>
 
           {/* Color Picker Popover */}
           {colorPickerPackage && colorPickerPosition && (
@@ -628,7 +1132,7 @@ function RouteComponent() {
             />
           )}
 
-          {Object.keys(packageGroups).length ? (
+          {queryPackageGroups.length ? (
             <div className="">
               <div className="space-y-2 sm:space-y-4">
                 <div className="relative">
@@ -642,7 +1146,11 @@ function RouteComponent() {
                       </div>
                     </div>
                   ) : null}
-                  <Resizable height={height} onHeightChange={onHeightChange}>
+                  <Resizable
+                    height={height}
+                    width={width}
+                    onSizeChange={onSizeChange}
+                  >
                     {npmQuery.isLoading ? (
                       <div
                         className="flex items-center justify-center"
@@ -656,24 +1164,48 @@ function RouteComponent() {
                         </div>
                       </div>
                     ) : (
-                      <NPMStatsChart
-                        range={range}
-                        queryData={npmQuery.data}
-                        transform={transform}
-                        binType={binType}
-                        packages={packageGroups}
-                        facetX={facetX}
-                        facetY={facetY}
-                        showDataMode={showDataModeParam}
-                      />
+                      <React.Suspense
+                        fallback={<ChartFallback height={height} />}
+                      >
+                        <LazyNPMStatsChart
+                          actionsContainer={chartActionsContainer}
+                          embedConfig={embedConfig}
+                          onActionsMountedChange={setChartActionsMounted}
+                          range={range}
+                          queryData={displayQueryData}
+                          height={height}
+                          viewMode={viewMode}
+                          chartType={chartType}
+                          barSort={barSort}
+                          barOrientation={barOrientation}
+                          transform={transform}
+                          binType={binType}
+                          packages={queryPackageGroups}
+                          showDataMode={showDataModeParam}
+                          normalizeBaseline={
+                            viewMode === 'history' && normalizeBaseline
+                          }
+                          showBaseline={viewMode === 'history' && showBaseline}
+                          showLegend={showLegend}
+                          timelineStart={timelineStart}
+                          timelineEnd={timelineEnd}
+                          animationQueryData={npmQuery.data}
+                          animationBucketOffsetBounds={latestBucketBounds}
+                          animationFrameIntervalMs={playbackIntervalMs}
+                          onShowLegendChange={handleShowLegendChange}
+                          onTimelineRangeChange={handleTimelineRangeChange}
+                        />
+                      </React.Suspense>
                     )}
                   </Resizable>
                 </div>
                 <StatsTable
-                  queryData={npmQuery.data}
-                  packageGroups={packageGroups}
-                  binOption={binOption}
-                  transform={transform}
+                  queryData={displayQueryData}
+                  packageGroups={queryPackageGroups}
+                  packageGroupIndexes={queryPackageGroupIndexes}
+                  binType={binType}
+                  transform={tableTransform}
+                  viewMode={viewMode}
                   onColorClick={handleColorClick}
                   onToggleVisibility={togglePackageVisibility}
                   onRemove={handleRemovePackageName}
@@ -685,20 +1217,7 @@ function RouteComponent() {
           {/* Popular Comparisons Section */}
           <PopularComparisons comparisons={getPopularComparisons()} />
         </Card>
-        <div className="hidden lg:block w-[290px] xl:w-[332px] shrink-0">
-          <div className="sticky top-4 space-y-4">
-            <AdGate>
-              <GamVrec1
-                className="flex justify-center rounded-xl overflow-hidden shadow-xs shadow-black/5 max-w-full"
-                adClassName="rounded-xl overflow-hidden"
-              />
-            </AdGate>
-          </div>
-        </div>
       </div>
-      <AdGate>
-        <GamHeader />
-      </AdGate>
 
       {/* FAQ Section for SEO */}
       <section className="max-w-4xl mt-8 space-y-6">
diff --git a/src/routes/support.tsx b/src/routes/support.tsx
index 460314c3a..c2651818b 100644
--- a/src/routes/support.tsx
+++ b/src/routes/support.tsx
@@ -37,6 +37,15 @@ const supportOptions = [
     badges: ['Remote', 'In-Person', 'Custom Training'],
     isNew: true,
   },
+  {
+    to: 'https://youtube.com/@tan_stack' as string,
+    external: true,
+    gradient: 'from-red-500 to-red-700',
+    title: 'YouTube',
+    description: 'Tutorials, walkthroughs, and deep dives',
+    badges: ['Tutorials', 'Deep Dives', 'Release Videos'],
+    isNew: true,
+  },
   {
     to: '/paid-support',
     gradient: 'from-green-600 to-cyan-600',
@@ -70,7 +79,7 @@ function SupportComp() {
               className={`${cardClass} ${option.isNew ? 'overflow-visible' : 'overflow-hidden'}`}
             >
               {option.isNew && (
-                <div className="absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md bg-gradient-to-r from-blue-500 to-purple-500 uppercase text-white font-black italic text-xs">
+                <div className="absolute -top-2 -right-2 z-40 px-2 py-1 rounded-md bg-linear-to-r from-blue-500 to-purple-500 uppercase text-white font-black italic text-xs">
                   NEW
                 </div>
               )}
diff --git a/src/routes/tenets.tsx b/src/routes/tenets.tsx
index 3a94f956c..66b38766b 100644
--- a/src/routes/tenets.tsx
+++ b/src/routes/tenets.tsx
@@ -248,7 +248,7 @@ function RouteComp() {
                 {/* Header */}
                 <div className="flex items-start gap-4 mb-6">
                   <div
-                    className={`shrink-0 w-12 h-12 rounded-lg bg-gradient-to-br ${tenet.gradient} flex items-center justify-center`}
+                    className={`shrink-0 w-12 h-12 rounded-lg bg-linear-to-br ${tenet.gradient} flex items-center justify-center`}
                   >
                     <Icon className="w-6 h-6 text-white" />
                   </div>
@@ -270,7 +270,7 @@ function RouteComp() {
                       className="flex gap-3 items-start"
                     >
                       <div
-                        className={`shrink-0 w-1.5 h-1.5 rounded-full bg-gradient-to-br ${tenet.gradient} mt-2`}
+                        className={`shrink-0 w-1.5 h-1.5 rounded-full bg-linear-to-br ${tenet.gradient} mt-2`}
                       />
                       <div>
                         <span className="font-semibold">
@@ -323,7 +323,7 @@ function RouteComp() {
               return (
                 <Card key={audience.title} className="p-5">
                   <div
-                    className={`w-10 h-10 rounded-lg bg-gradient-to-br ${audience.gradient} flex items-center justify-center mb-3`}
+                    className={`w-10 h-10 rounded-lg bg-linear-to-br ${audience.gradient} flex items-center justify-center mb-3`}
                   >
                     <Icon className="w-5 h-5 text-white" />
                   </div>
diff --git a/src/routes/workshops.tsx b/src/routes/workshops.tsx
index 82e17a39d..98fa0248e 100644
--- a/src/routes/workshops.tsx
+++ b/src/routes/workshops.tsx
@@ -100,14 +100,14 @@ function WorkshopsPage() {
                   'Access to maintainers and creators',
                 ].map((item) => (
                   <li key={item} className="flex items-start gap-2">
-                    <CheckCircleIcon className="w-5 h-5 text-green-500 flex-shrink-0" />
+                    <CheckCircleIcon className="w-5 h-5 text-green-500 shrink-0" />
                     <span>{item}</span>
                   </li>
                 ))}
               </ul>
             </Card>
 
-            <div className="rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 p-6 shadow-lg text-white">
+            <div className="rounded-lg bg-linear-to-br from-purple-500 to-pink-500 p-6 shadow-lg text-white">
               <div className="flex items-center gap-3 mb-4">
                 <MapPin className="w-8 h-8" />
                 <h2 className="text-2xl font-black">In-Person Workshops</h2>
@@ -125,7 +125,7 @@ function WorkshopsPage() {
                   'Extended Q&A and networking sessions',
                 ].map((item) => (
                   <li key={item} className="flex items-start gap-2">
-                    <Star className="w-5 h-5 flex-shrink-0" />
+                    <Star className="w-5 h-5 shrink-0" />
                     <span>{item}</span>
                   </li>
                 ))}
@@ -135,7 +135,7 @@ function WorkshopsPage() {
 
           {/* Why Choose TanStack Workshops */}
           <div
-            className="relative bg-gray-50 dark:bg-gray-900 py-32 w-screen -mx-[calc(50vw-50%)] md:w-[calc(100vw-250px)] md:mx-[calc(-50vw+50%+125px)]"
+            className="relative bg-gray-50 dark:bg-gray-900 py-32 w-screen -mx-[calc(50vw-50%)]"
             style={{
               boxShadow: '0 0 80px rgba(0, 0, 0, 0.04)',
             }}
@@ -242,7 +242,7 @@ function WorkshopsPage() {
 
           {/* Instructors Section */}
           <div
-            className="relative bg-gray-50 dark:bg-gray-900 py-20 w-screen -mx-[calc(50vw-50%)] md:w-[calc(100vw-250px)] md:mx-[calc(-50vw+50%+125px)]"
+            className="relative bg-gray-50 dark:bg-gray-900 py-20 w-screen -mx-[calc(50vw-50%)]"
             style={{
               boxShadow: '0 0 80px rgba(0, 0, 0, 0.04)',
             }}
@@ -323,7 +323,7 @@ function WorkshopsPage() {
 
           {/* Topics Covered */}
           <div
-            className="relative bg-gray-50 dark:bg-gray-900 py-20 w-screen -mx-[calc(50vw-50%)] md:w-[calc(100vw-250px)] md:mx-[calc(-50vw+50%+125px)]"
+            className="relative bg-gray-50 dark:bg-gray-900 py-20 w-screen -mx-[calc(50vw-50%)]"
             style={{
               boxShadow: '0 0 80px rgba(0, 0, 0, 0.04)',
             }}
@@ -347,7 +347,7 @@ function WorkshopsPage() {
                     key={topic}
                     className="flex items-center gap-3 rounded-lg bg-white dark:bg-gray-800 px-4 py-3 shadow-sm border border-gray-200 dark:border-gray-700"
                   >
-                    <CheckCircleIcon className="w-5 h-5 text-green-500 flex-shrink-0" />
+                    <CheckCircleIcon className="w-5 h-5 text-green-500 shrink-0" />
                     <span className="text-gray-600 dark:text-gray-400 font-medium">
                       {topic}
                     </span>
@@ -364,7 +364,7 @@ function WorkshopsPage() {
           {/* Premium Appearance Section - Deal Sweetener */}
           <div className="relative py-20 px-4 md:px-8">
             <div className="max-w-4xl mx-auto text-center">
-              <div className="inline-block p-1 rounded-full bg-gradient-to-br from-amber-300 to-amber-600 mb-6 shadow-lg">
+              <div className="inline-block p-1 rounded-full bg-linear-to-br from-amber-300 to-amber-600 mb-6 shadow-lg">
                 <img
                   src="https://github.com/tannerlinsley.png"
                   alt="Tanner Linsley"
@@ -401,7 +401,7 @@ function WorkshopsPage() {
 
           {/* Testimonials Section */}
           <div
-            className="relative bg-gray-50 dark:bg-gray-900 py-20 w-screen -mx-[calc(50vw-50%)] md:w-[calc(100vw-250px)] md:mx-[calc(-50vw+50%+125px)]"
+            className="relative bg-gray-50 dark:bg-gray-900 py-20 w-screen -mx-[calc(50vw-50%)]"
             style={{
               boxShadow: '0 0 80px rgba(0, 0, 0, 0.04)',
             }}
@@ -494,9 +494,9 @@ function TestimonialsMarquee() {
       </div>
       <div className="relative w-full">
         {/* Left fade overlay */}
-        <div className="absolute left-0 top-0 bottom-0 w-48 z-10 bg-gradient-to-r from-gray-50 dark:from-gray-900 via-gray-50/80 dark:via-gray-900/80 to-transparent pointer-events-none" />
+        <div className="absolute left-0 top-0 bottom-0 w-48 z-10 bg-linear-to-r from-gray-50 dark:from-gray-900 via-gray-50/80 dark:via-gray-900/80 to-transparent pointer-events-none" />
         {/* Right fade overlay */}
-        <div className="absolute right-0 top-0 bottom-0 w-48 z-10 bg-gradient-to-l from-gray-50 dark:from-gray-900 via-gray-50/80 dark:via-gray-900/80 to-transparent pointer-events-none" />
+        <div className="absolute right-0 top-0 bottom-0 w-48 z-10 bg-linear-to-l from-gray-50 dark:from-gray-900 via-gray-50/80 dark:via-gray-900/80 to-transparent pointer-events-none" />
         <div
           className="flex gap-8 items-stretch will-change-transform animate-[testimonials_linear_infinite]"
           style={{
@@ -505,7 +505,7 @@ function TestimonialsMarquee() {
         >
           {[...testimonials, ...testimonials, ...testimonials].map(
             (testimonial, i) => (
-              <Card key={i} className="flex-shrink-0 w-80 p-6">
+              <Card key={i} className="shrink-0 w-80 p-6">
                 <div className="flex items-start gap-2 mb-4">
                   {[...Array(5)].map((_, j) => (
                     <Star
diff --git a/src/server.ts b/src/server.ts
index 9accf04de..5de3f0f15 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -1,41 +1,215 @@
 import './instrument.server.mjs'
 
+import { wrapFetchWithSentry } from '@sentry/tanstackstart-react'
 import handler, { createServerEntry } from '@tanstack/react-start/server-entry'
+import { runWithDatabaseContext } from '~/db/client'
+import { runScheduledTasks } from '~/server/scheduled.server'
+import {
+  runWithHostRuntimeContext,
+  runWithHostRuntimeEnv,
+} from '~/server/runtime/host.server'
+import {
+  installProductionFetchProbe,
+  installProductionProcessProbe,
+  logRequestEnd,
+  logRequestError,
+  logRequestStart,
+  runWithRequestDiagnostics,
+} from '~/utils/prod-diagnostics.server'
+import { docsContentNegotiationVaryHeader } from '~/utils/http'
 
-export default createServerEntry({
-  async fetch(request) {
-    const url = new URL(request.url)
-
-    // Redirect to markdown version if AI/LLM requests text/markdown for doc pages
-    const acceptHeader = request.headers.get('Accept') || ''
-    if (
-      acceptHeader.includes('text/markdown') &&
-      url.pathname.includes('/docs/') &&
-      !url.pathname.endsWith('.md')
-    ) {
-      return new Response(null, {
-        status: 303,
-        headers: {
-          Location: `${url.pathname}.md`,
-        },
-      })
+const SECURITY_HEADERS = {
+  'X-Frame-Options': 'DENY',
+  'X-Content-Type-Options': 'nosniff',
+  'X-XSS-Protection': '1; mode=block',
+  'Referrer-Policy': 'strict-origin-when-cross-origin',
+  'Permissions-Policy': 'camera=(), microphone=(), geolocation=()',
+  'Strict-Transport-Security': 'max-age=31536000; includeSubDomains',
+} as const
+
+const GOOGLE_ANALYTICS_SCRIPT_URL =
+  'https://www.googletagmanager.com/gtag/js?id=G-JMT1Z50SPS'
+const GOOGLE_ANALYTICS_COLLECT_URL =
+  'https://www.google-analytics.com/g/collect'
+
+const STATIC_RESPONSE_LINK_HEADERS = {
+  filter: ({ phase }: { phase: 'static' | 'dynamic' }) => phase === 'static',
+}
+
+type ScheduledController = {
+  cron: string
+  scheduledTime: number
+}
+
+type WorkerExecutionContext = {
+  waitUntil(promise: Promise<unknown>): void
+}
+
+installProductionFetchProbe()
+installProductionProcessProbe()
+
+function isBrowserDocumentRequest(request: Request) {
+  return (
+    request.headers.get('Sec-Fetch-Dest') === 'document' ||
+    request.headers.get('Sec-Fetch-Mode') === 'navigate'
+  )
+}
+
+function shouldRewriteDocsRequestToMarkdown(request: Request, url: URL) {
+  const acceptHeader = request.headers.get('Accept') || ''
+
+  return (
+    acceptHeader.includes('text/markdown') &&
+    url.pathname.includes('/docs/') &&
+    !url.pathname.endsWith('.md') &&
+    !isBrowserDocumentRequest(request)
+  )
+}
+
+function applyHostingHeaders(response: Response, url: URL) {
+  const headers = new Headers(response.headers)
+
+  for (const [key, value] of Object.entries(SECURITY_HEADERS)) {
+    headers.set(key, value)
+  }
+
+  if (url.pathname === '/stats/npm/embed') {
+    headers.delete('X-Frame-Options')
+  }
+
+  if (url.pathname === '/builder' || url.pathname.startsWith('/builder/')) {
+    headers.set('Cross-Origin-Opener-Policy', 'same-origin')
+    headers.set('Cross-Origin-Embedder-Policy', 'require-corp')
+  }
+
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers,
+  })
+}
+
+function getAnalyticsProxyHeaders(request: Request) {
+  const headers = new Headers()
+
+  for (const headerName of ['accept', 'accept-language', 'user-agent']) {
+    const value = request.headers.get(headerName)
+    if (value) {
+      headers.set(headerName, value)
     }
+  }
+
+  const contentType = request.headers.get('content-type')
+  if (contentType) {
+    headers.set('content-type', contentType)
+  }
+
+  return headers
+}
+
+async function proxyAnalyticsRequest(request: Request, url: URL) {
+  const upstreamUrl =
+    url.pathname === '/_a/gtag.js'
+      ? new URL(GOOGLE_ANALYTICS_SCRIPT_URL)
+      : url.pathname === '/_a/g/collect'
+        ? new URL(GOOGLE_ANALYTICS_COLLECT_URL)
+        : null
+
+  if (!upstreamUrl) {
+    return null
+  }
+
+  if (url.pathname === '/_a/g/collect') {
+    upstreamUrl.search = url.search
+  }
+
+  const init: RequestInit = {
+    method: request.method,
+    headers: getAnalyticsProxyHeaders(request),
+    redirect: 'follow',
+  }
+
+  if (request.method !== 'GET' && request.method !== 'HEAD') {
+    init.body = request.body
+  }
 
-    const response = await handler.fetch(request)
+  const response = await fetch(upstreamUrl, init)
+  return applyHostingHeaders(response, url)
+}
 
-    // Add COOP/COEP headers for /builder route (required for WebContainer)
-    if (url.pathname === '/builder' || url.pathname.startsWith('/builder/')) {
-      const newHeaders = new Headers(response.headers)
-      newHeaders.set('Cross-Origin-Opener-Policy', 'same-origin')
-      newHeaders.set('Cross-Origin-Embedder-Policy', 'require-corp')
+const server = createServerEntry(
+  wrapFetchWithSentry({
+    async fetch(request) {
+      return runWithRequestDiagnostics(request, async (context) => {
+        return runWithDatabaseContext(async () => {
+          const url = new URL(request.url)
+          logRequestStart(context)
 
-      return new Response(response.body, {
-        status: response.status,
-        statusText: response.statusText,
-        headers: newHeaders,
+          try {
+            const analyticsResponse = await proxyAnalyticsRequest(request, url)
+            if (analyticsResponse) {
+              logRequestEnd(context, analyticsResponse.status, {
+                analyticsProxy: true,
+              })
+              return analyticsResponse
+            }
+
+            if (shouldRewriteDocsRequestToMarkdown(request, url)) {
+              const mdUrl = new URL(request.url)
+              mdUrl.pathname = `${url.pathname}.md`
+              const mdRequest = new Request(mdUrl, request)
+              const mdResponse = await handler.fetch(mdRequest)
+              const markdownHeaders = new Headers(mdResponse.headers)
+              markdownHeaders.set('Vary', docsContentNegotiationVaryHeader)
+
+              const markdownResponse = new Response(mdResponse.body, {
+                status: mdResponse.status,
+                statusText: mdResponse.statusText,
+                headers: markdownHeaders,
+              })
+
+              logRequestEnd(context, mdResponse.status, {
+                rewrittenToMarkdown: true,
+              })
+              return applyHostingHeaders(markdownResponse, url)
+            }
+
+            const response = await handler.fetch(request, {
+              responseLinkHeader: STATIC_RESPONSE_LINK_HEADERS,
+            })
+            const hostedResponse = applyHostingHeaders(response, url)
+
+            logRequestEnd(context, response.status)
+            return hostedResponse
+          } catch (error) {
+            logRequestError(context, error)
+            throw error
+          }
+        })
       })
-    }
+    },
+  }),
+)
 
-    return response
+export default {
+  fetch(request: Request, env: unknown, context: unknown) {
+    return runWithHostRuntimeEnv(env, () =>
+      runWithHostRuntimeContext(context, () => server.fetch(request)),
+    )
+  },
+  scheduled(
+    controller: ScheduledController,
+    env: unknown,
+    context: WorkerExecutionContext,
+  ) {
+    context.waitUntil(
+      runWithHostRuntimeEnv(env, () =>
+        runWithHostRuntimeContext(context, () =>
+          runWithDatabaseContext(() =>
+            runScheduledTasks(controller.cron, controller.scheduledTime),
+          ),
+        ),
+      ),
+    )
   },
-})
+}
diff --git a/src/server/blog.ts b/src/server/blog.ts
new file mode 100644
index 000000000..d303944a8
--- /dev/null
+++ b/src/server/blog.ts
@@ -0,0 +1,35 @@
+import { createServerFn } from '@tanstack/react-start'
+import { setResponseHeaders } from '@tanstack/react-start/server'
+import { getPublishedPosts } from '~/utils/blog'
+
+export type RecentPost = {
+  slug: string
+  title: string
+  published: string
+  excerpt: string
+  headerImage: string | undefined
+  authors: Array<string>
+}
+
+export const fetchRecentPosts = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<Array<RecentPost>> => {
+    setResponseHeaders(
+      new Headers({
+        'Cache-Control': 'public, max-age=0, must-revalidate',
+        'Cloudflare-CDN-Cache-Control':
+          'public, max-age=300, stale-while-revalidate=300',
+      }),
+    )
+
+    return getPublishedPosts()
+      .slice(0, 3)
+      .map((post) => ({
+        slug: post.slug,
+        title: post.title,
+        published: post.published,
+        excerpt: post.excerpt,
+        headerImage: post.headerImage,
+        authors: post.authors,
+      }))
+  },
+)
diff --git a/src/server/feed/blog.ts b/src/server/feed/blog.ts
deleted file mode 100644
index 6ce96d0cd..000000000
--- a/src/server/feed/blog.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * Pure blog sync functions that can be used by both TanStack Start server functions
- * and Netlify functions. No TanStack Start dependencies.
- */
-
-import { db } from '~/db/client'
-import { feedEntries } from '~/db/schema'
-import { eq } from 'drizzle-orm'
-
-export type BlogSyncResult = {
-  success: boolean
-  syncedCount: number
-  created: number
-  updated: number
-  errors: string[]
-}
-
-/**
- * Syncs all blog posts from content collections into the feed database.
- * This should be called from the deployed server environment where content-collections
- * are available.
- */
-export async function syncBlogPosts(): Promise<BlogSyncResult> {
-  // Dynamic import to ensure content-collections are available in server environment
-  const { getPublishedPosts } = await import('~/utils/blog')
-
-  const results: BlogSyncResult = {
-    success: true,
-    syncedCount: 0,
-    created: 0,
-    updated: 0,
-    errors: [],
-  }
-
-  for (const post of getPublishedPosts()) {
-    try {
-      const entryId = `blog:${post.slug}`
-      const publishedAt = new Date(post.published)
-
-      // Check if entry already exists
-      const existing = await db.query.feedEntries.findFirst({
-        where: eq(feedEntries.entryId, entryId),
-      })
-
-      // Build content with excerpt and link to full post
-      const excerpt = post.excerpt || post.description || ''
-      const blogUrl = `/blog/${post.slug}`
-      const content = excerpt
-        ? `${excerpt}\n\n[Read more →](${blogUrl})`
-        : `[Read more →](${blogUrl})`
-
-      const entryData = {
-        entryId,
-        entryType: 'blog' as const,
-        title: post.title,
-        content,
-        excerpt: post.excerpt || post.description || null,
-        publishedAt,
-        showInFeed: true,
-        autoSynced: true,
-        lastSyncedAt: new Date(),
-        updatedAt: new Date(),
-        libraryIds: [],
-        partnerIds: [],
-        tags: [],
-        metadata: {
-          slug: post.slug,
-          authors: post.authors,
-          headerImage: post.headerImage,
-          url: blogUrl,
-        },
-      }
-
-      if (existing) {
-        // Update existing entry
-        await db
-          .update(feedEntries)
-          .set(entryData)
-          .where(eq(feedEntries.entryId, entryId))
-        results.updated++
-      } else {
-        // Create new entry
-        await db.insert(feedEntries).values({
-          ...entryData,
-          createdAt: new Date(),
-        })
-        results.created++
-      }
-    } catch (error) {
-      const errorMessage = `Failed to sync blog post "${post.slug}": ${
-        error instanceof Error ? error.message : String(error)
-      }`
-      results.errors.push(errorMessage)
-      console.error(errorMessage)
-      results.success = false
-    }
-  }
-
-  results.syncedCount = results.created + results.updated
-
-  return results
-}
diff --git a/src/server/feed/github.functions.ts b/src/server/feed/github.functions.ts
deleted file mode 100644
index 9d4b92239..000000000
--- a/src/server/feed/github.functions.ts
+++ /dev/null
@@ -1,362 +0,0 @@
-/**
- * Pure GitHub sync functions that can be used by both TanStack Start server functions
- * and Netlify functions. No TanStack Start dependencies.
- */
-
-import { envFunctions } from '~/utils/env.functions'
-import { db } from '~/db/client'
-import { feedEntries, feedConfig } from '~/db/schema'
-import { eq } from 'drizzle-orm'
-
-/**
- * Dynamically build repo to library ID mapping from libraries list
- * This ensures we always sync all libraries without maintaining a duplicate list
- */
-async function getRepoToLibraryIdMap(): Promise<Record<string, string>> {
-  const { libraries } = await import('~/libraries')
-  const mapping: Record<string, string> = {}
-
-  for (const library of libraries) {
-    if (library.repo && library.id) {
-      mapping[library.repo] = library.id
-    }
-  }
-
-  return mapping
-}
-
-/**
- * Parse semantic version to determine release type
- */
-function parseVersion(version: string): {
-  releaseType: 'major' | 'minor' | 'patch'
-  isPrerelease: boolean
-} {
-  // Remove 'v' prefix if present
-  const cleanVersion = version.replace(/^v/i, '')
-
-  // Check for prerelease markers
-  const isPrerelease =
-    cleanVersion.includes('-') ||
-    cleanVersion.includes('alpha') ||
-    cleanVersion.includes('beta') ||
-    cleanVersion.includes('rc')
-
-  // Extract base version (before prerelease markers)
-  const baseVersion = cleanVersion.split('-')[0].split('+')[0]
-  const parts = baseVersion.split('.').map(Number)
-
-  if (parts.length < 2) {
-    return { releaseType: 'patch', isPrerelease }
-  }
-
-  const [major, minor, patch] = parts
-
-  if (major > 0 && minor === 0 && (!patch || patch === 0)) {
-    return { releaseType: 'major', isPrerelease }
-  }
-
-  if (minor > 0 && (!patch || patch === 0)) {
-    return { releaseType: 'minor', isPrerelease }
-  }
-
-  return { releaseType: 'patch', isPrerelease }
-}
-
-/**
- * Normalize GitHub release to feed entry format
- */
-export async function normalizeGitHubRelease(release: {
-  id: number
-  tag_name: string
-  name: string
-  body: string
-  published_at: string
-  html_url: string
-  author?: { login: string }
-  repo: string
-}): Promise<{
-  id: string
-  entryType: 'release' | 'blog' | 'announcement'
-  title: string
-  content: string
-  excerpt?: string
-  publishedAt: number
-  metadata: any
-  libraryIds: string[]
-  partnerIds?: string[]
-  tags: string[]
-  showInFeed: boolean
-  featured?: boolean
-  autoSynced: boolean
-}> {
-  const { releaseType, isPrerelease } = parseVersion(release.tag_name)
-  const repoToLibraryId = await getRepoToLibraryIdMap()
-  const libraryId = repoToLibraryId[release.repo]
-
-  // Generate unique ID
-  const id = `github:${release.repo}:${release.tag_name}`
-
-  // Extract excerpt from body (first paragraph or first 200 chars)
-  const excerpt = release.body
-    .split('\n\n')[0]
-    .substring(0, 200)
-    .trim()
-    .replace(/\n/g, ' ')
-
-  // Build tags
-  const tags = [
-    `release:${releaseType}`,
-    ...(isPrerelease ? ['release:prerelease'] : []),
-    `source:github`,
-    ...(libraryId ? [`library:${libraryId}`] : []),
-  ]
-
-  return {
-    id,
-    entryType: 'release',
-    title: release.name || `${release.repo} ${release.tag_name}`,
-    content: release.body || '',
-    excerpt,
-    publishedAt: new Date(release.published_at).getTime(),
-    metadata: {
-      repo: release.repo,
-      releaseId: release.id.toString(),
-      version: release.tag_name,
-      releaseType,
-      isPrerelease,
-      url: release.html_url,
-      author: release.author?.login,
-    },
-    libraryIds: libraryId ? [libraryId] : [],
-    tags,
-    showInFeed: true,
-    autoSynced: true,
-  }
-}
-
-/**
- * Get the last sync timestamp for a repo from feedConfig
- */
-async function getLastSyncTime(repo: string): Promise<number | null> {
-  const configKey = `github:sync:${repo}`
-  const config = await db.query.feedConfig.findFirst({
-    where: eq(feedConfig.key, configKey),
-  })
-
-  if (!config) {
-    return null
-  }
-
-  const configValue = config.value as { lastSyncedAt?: number } | null
-  return configValue?.lastSyncedAt ?? null
-}
-
-/**
- * Update the last sync timestamp for a repo in feedConfig
- */
-async function updateLastSyncTime(
-  repo: string,
-  timestamp: number,
-): Promise<void> {
-  const configKey = `github:sync:${repo}`
-  const existing = await db.query.feedConfig.findFirst({
-    where: eq(feedConfig.key, configKey),
-  })
-
-  if (existing) {
-    await db
-      .update(feedConfig)
-      .set({ value: { lastSyncedAt: timestamp }, updatedAt: new Date() })
-      .where(eq(feedConfig.key, configKey))
-  } else {
-    await db.insert(feedConfig).values({
-      key: configKey,
-      value: { lastSyncedAt: timestamp },
-    })
-  }
-}
-
-/**
- * Fetch releases from GitHub API for a specific repo
- */
-async function fetchRepoReleases(
-  repo: string,
-  token: string,
-  since?: number,
-): Promise<any[]> {
-  const url = `https://api.github.com/repos/${repo}/releases?per_page=100&page=1`
-
-  const response = await fetch(url, {
-    headers: {
-      Authorization: `Bearer ${token}`,
-      Accept: 'application/vnd.github.v3+json',
-      'User-Agent': 'TanStack-Feed',
-    },
-  })
-
-  if (!response.ok) {
-    if (response.status === 404) {
-      return []
-    }
-    let errorMessage = `GitHub API error: ${response.status} ${response.statusText}`
-    try {
-      const errorBody = await response.text()
-      if (errorBody) {
-        const errorJson = JSON.parse(errorBody)
-        if (errorJson.message) {
-          errorMessage += ` - ${errorJson.message}`
-        }
-      }
-    } catch {
-      // Ignore parse errors
-    }
-    throw new Error(errorMessage)
-  }
-
-  const releases = await response.json()
-
-  // Filter by since timestamp if provided
-  if (since && since > 0) {
-    return releases.filter(
-      (release: any) => new Date(release.published_at).getTime() > since,
-    )
-  }
-
-  return releases
-}
-
-/**
- * Sync GitHub releases for all TanStack repos
- */
-export async function syncGitHubReleases(options?: { daysBack?: number }) {
-  const token = envFunctions.GITHUB_AUTH_TOKEN
-  if (!token || token === 'USE_A_REAL_KEY_IN_PRODUCTION') {
-    throw new Error(
-      'GITHUB_AUTH_TOKEN not configured. Please set it in environment variables.',
-    )
-  }
-
-  const repoToLibraryId = await getRepoToLibraryIdMap()
-  const repos = Object.keys(repoToLibraryId)
-  const now = Date.now()
-  let syncedCount = 0
-  let errorCount = 0
-  const skippedCount = 0
-
-  for (const repo of repos) {
-    try {
-      // Get last sync time for this repo
-      const lastSyncTime = await getLastSyncTime(repo)
-
-      // Determine cutoff date
-      let cutoffDate: number
-      if (options?.daysBack !== undefined) {
-        if (options.daysBack === 0) {
-          cutoffDate = 0 // Sync all releases
-        } else {
-          cutoffDate = now - options.daysBack * 24 * 60 * 60 * 1000
-        }
-      } else if (lastSyncTime) {
-        cutoffDate = lastSyncTime
-      } else {
-        // Default to 2 days for initial sync
-        cutoffDate = now - 2 * 24 * 60 * 60 * 1000
-      }
-
-      // Fetch releases
-      const releases = await fetchRepoReleases(repo, token, cutoffDate)
-
-      let repoSyncedCount = 0
-      let repoLatestReleaseTime = cutoffDate
-
-      for (const release of releases) {
-        const publishedAt = new Date(release.published_at).getTime()
-
-        // Track the latest release time for this repo
-        if (publishedAt > repoLatestReleaseTime) {
-          repoLatestReleaseTime = publishedAt
-        }
-
-        try {
-          const normalized = await normalizeGitHubRelease({
-            ...release,
-            repo,
-          })
-
-          // Check if entry already exists
-          const existing = await db.query.feedEntries.findFirst({
-            where: eq(feedEntries.entryId, normalized.id),
-          })
-
-          if (existing) {
-            // Update existing entry (preserve publishedAt for auto-synced entries)
-            const isAutoSynced = existing.autoSynced ?? false
-            await db
-              .update(feedEntries)
-              .set({
-                title: normalized.title,
-                content: normalized.content,
-                excerpt: normalized.excerpt,
-                publishedAt: isAutoSynced
-                  ? existing.publishedAt
-                  : new Date(normalized.publishedAt),
-                metadata: normalized.metadata,
-                libraryIds: normalized.libraryIds,
-                tags: normalized.tags,
-                lastSyncedAt: new Date(now),
-                updatedAt: new Date(),
-              })
-              .where(eq(feedEntries.entryId, normalized.id))
-          } else {
-            // Create new entry
-            await db.insert(feedEntries).values({
-              entryId: normalized.id,
-              entryType: normalized.entryType,
-              title: normalized.title,
-              content: normalized.content,
-              excerpt: normalized.excerpt,
-              publishedAt: new Date(normalized.publishedAt),
-              metadata: normalized.metadata,
-              libraryIds: normalized.libraryIds,
-              partnerIds: normalized.partnerIds ?? [],
-              tags: normalized.tags,
-              showInFeed: normalized.showInFeed,
-              featured: normalized.featured ?? false,
-              autoSynced: normalized.autoSynced,
-              lastSyncedAt: new Date(now),
-            })
-          }
-
-          repoSyncedCount++
-          syncedCount++
-        } catch (error) {
-          console.error(
-            `Error processing release ${release.id} from ${repo}:`,
-            error,
-          )
-          errorCount++
-        }
-      }
-
-      // Update last sync time for this repo if we processed any releases
-      if (repoSyncedCount > 0 && repoLatestReleaseTime > cutoffDate) {
-        await updateLastSyncTime(repo, repoLatestReleaseTime)
-      } else if (!lastSyncTime && repoSyncedCount === 0) {
-        // If this is the first sync and no releases found, set sync time to now
-        await updateLastSyncTime(repo, now)
-      }
-    } catch (error) {
-      console.error(`Error fetching releases from ${repo}:`, error)
-      errorCount++
-    }
-  }
-
-  return {
-    success: true,
-    syncedCount,
-    errorCount,
-    skippedCount,
-    reposProcessed: repos.length,
-  }
-}
diff --git a/src/server/feed/github.ts b/src/server/feed/github.ts
deleted file mode 100644
index d79ee5fa1..000000000
--- a/src/server/feed/github.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export the pure function for use in server functions
-export { syncGitHubReleases, normalizeGitHubRelease } from './github.functions'
diff --git a/src/server/feed/sync-all.ts b/src/server/feed/sync-all.ts
deleted file mode 100644
index b81af1ab9..000000000
--- a/src/server/feed/sync-all.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { syncGitHubReleases } from './github'
-import { syncBlogPosts } from './blog'
-
-type SyncResult = {
-  success: boolean
-  results: {
-    github: { success: boolean; error: string | null; syncedCount?: number }
-    blog: { success: boolean; error: string | null }
-  }
-}
-
-/**
- * Master sync function that syncs all sources
- * Can be called manually from admin UI or via scheduled function
- */
-export async function syncAllSources(): Promise<SyncResult> {
-  const results: {
-    github: { success: boolean; error: string | null; syncedCount?: number }
-    blog: { success: boolean; error: string | null }
-  } = {
-    github: { success: false, error: null },
-    blog: { success: false, error: null },
-  }
-
-  // Sync GitHub releases (last 48 hours / 2 days)
-  try {
-    const githubResult = await syncGitHubReleases({ daysBack: 2 })
-    results.github.success = githubResult.success
-    results.github.syncedCount = githubResult.syncedCount
-  } catch (error) {
-    results.github.error =
-      error instanceof Error ? error.message : 'Unknown error'
-  }
-
-  // Sync blog posts from content collections
-  try {
-    const blogResult = await syncBlogPosts()
-    results.blog.success = blogResult.success
-  } catch (error) {
-    results.blog.error =
-      error instanceof Error ? error.message : 'Unknown error'
-  }
-
-  return {
-    success: results.github.success && results.blog.success,
-    results,
-  }
-}
diff --git a/src/server/og/assets.server.ts b/src/server/og/assets.server.ts
new file mode 100644
index 000000000..5edaf4b16
--- /dev/null
+++ b/src/server/og/assets.server.ts
@@ -0,0 +1,67 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+import { fetchStaticAsset } from '~/server/runtime/host.server'
+
+const interRegularUrl = '/fonts/Inter-Regular.ttf'
+const interExtraBoldUrl = '/fonts/Inter-ExtraBold.ttf'
+const interBlackUrl = '/fonts/Inter-Black.ttf'
+const islandPngUrl = '/images/logos/splash-dark.png'
+
+function tryReadBinary(relPath: string): Buffer | null {
+  // Resolve from the project root for local dev and tests. Workers normally
+  // load these through the static assets binding below.
+  try {
+    return readFileSync(resolve(process.cwd(), relPath))
+  } catch {
+    return null
+  }
+}
+
+async function readAssetUrl(assetUrl: string, requestUrl: string) {
+  const url = new URL(assetUrl, requestUrl)
+  const response = await fetchStaticAsset(url)
+
+  if (!response.ok) {
+    throw new Error(`Failed to load OG asset ${assetUrl}: ${response.status}`)
+  }
+  return Buffer.from(await response.arrayBuffer())
+}
+
+let cached: {
+  interRegular: Buffer
+  interExtraBold: Buffer
+  interBlack: Buffer
+  islandPng: Buffer
+} | null = null
+
+export async function loadOgAssets(requestUrl?: string) {
+  if (cached) return cached
+
+  const interRegular = tryReadBinary('public/fonts/Inter-Regular.ttf')
+  const interExtraBold = tryReadBinary('public/fonts/Inter-ExtraBold.ttf')
+  const interBlack = tryReadBinary('public/fonts/Inter-Black.ttf')
+  const islandPng = tryReadBinary('public/images/logos/splash-dark.png')
+
+  if (interRegular && interExtraBold && interBlack && islandPng) {
+    cached = {
+      interRegular,
+      interExtraBold,
+      interBlack,
+      islandPng,
+    }
+    return cached
+  }
+
+  if (!requestUrl) {
+    throw new Error('OG asset URL fallback requires a request URL')
+  }
+
+  cached = {
+    interRegular: await readAssetUrl(interRegularUrl, requestUrl),
+    interExtraBold: await readAssetUrl(interExtraBoldUrl, requestUrl),
+    interBlack: await readAssetUrl(interBlackUrl, requestUrl),
+    islandPng: await readAssetUrl(islandPngUrl, requestUrl),
+  }
+  return cached
+}
diff --git a/src/server/og/colors.ts b/src/server/og/colors.ts
new file mode 100644
index 000000000..c039fa051
--- /dev/null
+++ b/src/server/og/colors.ts
@@ -0,0 +1,30 @@
+import type { LibraryId } from '~/libraries'
+
+// Each entry matches the textStyle in `src/libraries/libraries.ts`.
+// Values are Tailwind v4 default palette (500 shades) with an override
+// for black/gray-100 libraries so they stay legible on the dark canvas.
+const LIBRARY_ACCENT_COLORS: Partial<Record<LibraryId, string>> = {
+  query: '#fb2c36', // red-500
+  router: '#00bc7d', // emerald-500
+  start: '#00b8db', // cyan-500
+  table: '#2b7fff', // blue-500
+  form: '#f0b100', // yellow-500
+  db: '#ff6900', // orange-500
+  ai: '#f6339a', // pink-500
+  intent: '#00a6f4', // sky-500
+  virtual: '#ad46ff', // purple-500
+  pacer: '#7ccf00', // lime-500
+  hotkeys: '#ff2056', // rose-500
+  store: '#ae7d44', // twine-500 (custom token in app.css)
+  ranger: '#f5f5f5', // gray-100 (black/gray-100 library)
+  config: '#f5f5f5', // gray-100
+  devtools: '#f5f5f5', // gray-100
+  cli: '#615fff', // indigo-500
+  mcp: '#f5f5f5', // gray-100 (hidden library, fallback)
+}
+
+const DEFAULT_ACCENT = '#f5f5f5'
+
+export function getAccentColor(libraryId: LibraryId): string {
+  return LIBRARY_ACCENT_COLORS[libraryId] ?? DEFAULT_ACCENT
+}
diff --git a/src/server/og/generate.server.ts b/src/server/og/generate.server.ts
new file mode 100644
index 000000000..f8ea122ba
--- /dev/null
+++ b/src/server/og/generate.server.ts
@@ -0,0 +1,84 @@
+import {
+  ImageResponse,
+  type ImageResponseOptions,
+} from '@takumi-rs/image-response'
+import takumiWasmModule from '@takumi-rs/wasm/auto'
+import { findLibrary } from '~/libraries'
+import type { LibraryId } from '~/libraries'
+import { loadOgAssets as loadNodeOgAssets } from './assets.server'
+import { getAccentColor } from './colors'
+import { buildOgTree } from './template'
+import {
+  MAX_OG_DESCRIPTION_LENGTH,
+  MAX_OG_TITLE_LENGTH,
+  clampOgText,
+} from '~/utils/og-limits'
+
+const ISLAND_KEY = 'island'
+
+type GenerateInput = {
+  libraryId: LibraryId | string
+  requestUrl?: string
+  title?: string
+  description?: string
+}
+
+export type OgLibraryNotFoundError = {
+  kind: 'library-not-found'
+  libraryId: string
+}
+
+export async function generateOgImageResponse(
+  input: GenerateInput,
+  init?: ResponseInit,
+): Promise<ImageResponse | OgLibraryNotFoundError> {
+  const library = findLibrary(input.libraryId)
+  if (!library) {
+    return { kind: 'library-not-found', libraryId: input.libraryId }
+  }
+
+  const assets = await loadNodeOgAssets(input.requestUrl)
+  const tree = buildOgTree({
+    libraryName: library.name,
+    accentColor: getAccentColor(library.id),
+    islandSrc: ISLAND_KEY,
+    pitch: clampOgText(library.tagline ?? '', MAX_OG_DESCRIPTION_LENGTH),
+    docTitle: input.title?.trim()
+      ? clampOgText(input.title, MAX_OG_TITLE_LENGTH)
+      : undefined,
+    description: input.description?.trim()
+      ? clampOgText(input.description, MAX_OG_DESCRIPTION_LENGTH)
+      : undefined,
+  })
+
+  const options: ImageResponseOptions = {
+    width: 1200,
+    height: 630,
+    format: 'png',
+    fonts: [
+      {
+        name: 'Inter',
+        data: assets.interRegular,
+        weight: 400,
+        style: 'normal',
+      },
+      {
+        name: 'Inter',
+        data: assets.interExtraBold,
+        weight: 800,
+        style: 'normal',
+      },
+      {
+        name: 'Inter',
+        data: assets.interBlack,
+        weight: 900,
+        style: 'normal',
+      },
+    ],
+    images: [{ src: ISLAND_KEY, data: assets.islandPng }],
+    module: takumiWasmModule,
+    ...init,
+  }
+
+  return new ImageResponse(tree, options)
+}
diff --git a/src/server/og/template.tsx b/src/server/og/template.tsx
new file mode 100644
index 000000000..cd1a666aa
--- /dev/null
+++ b/src/server/og/template.tsx
@@ -0,0 +1,141 @@
+import type { ReactElement } from 'react'
+
+type TemplateProps = {
+  libraryName: string
+  accentColor: string
+  islandSrc: string
+  pitch: string
+  docTitle?: string
+  description?: string
+}
+
+const WIDTH = 1200
+const HEIGHT = 630
+const ISLAND_SIZE = Math.round(HEIGHT * 0.72)
+
+// "TanStack AI" → ["TanStack", "AI"]
+// "TanStack Router" → ["TanStack", "Router"]
+// "Create TS Router App" → ["Create TS Router", "App"] (fallback: last word)
+function splitName(name: string): [string, string] {
+  const parts = name.split(' ')
+  if (parts.length < 2) return [name, '']
+  const last = parts[parts.length - 1]
+  const first = parts.slice(0, -1).join(' ')
+  return [first, last]
+}
+
+export function buildOgTree(props: TemplateProps): ReactElement {
+  const [titleLine1, titleLine2] = splitName(props.libraryName)
+
+  return (
+    <div
+      style={{
+        width: WIDTH,
+        height: HEIGHT,
+        display: 'flex',
+        position: 'relative',
+        color: '#ffffff',
+        fontFamily: 'Inter',
+        // Layered background: base gradient + green anchor + accent glow.
+        backgroundImage: [
+          `radial-gradient(circle at 100% 100%, ${hexToRgba(props.accentColor, 0.32)} 0%, transparent 55%)`,
+          `radial-gradient(circle at 8% 50%, rgba(0, 188, 125, 0.28) 0%, transparent 50%)`,
+          `linear-gradient(135deg, #0c1410 0%, #070a0a 55%, #0c070f 100%)`,
+        ].join(', '),
+      }}
+    >
+      {/* Island */}
+      <img
+        src={props.islandSrc}
+        alt=""
+        width={ISLAND_SIZE}
+        height={ISLAND_SIZE}
+        style={{
+          position: 'absolute',
+          left: Math.round(WIDTH * 0.03),
+          top: Math.round((HEIGHT - ISLAND_SIZE) / 2),
+        }}
+      />
+
+      {/* Text column */}
+      <div
+        style={{
+          position: 'absolute',
+          left: Math.round(WIDTH * 0.46),
+          right: Math.round(WIDTH * 0.05),
+          top: 0,
+          bottom: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            marginBottom: 22,
+            lineHeight: 0.95,
+            fontWeight: 900,
+            letterSpacing: '-3px',
+            textTransform: 'uppercase',
+          }}
+        >
+          <span style={{ fontSize: 72, color: '#ffffff' }}>{titleLine1}</span>
+          {titleLine2 ? (
+            <span style={{ fontSize: 96, color: props.accentColor }}>
+              {titleLine2}
+            </span>
+          ) : null}
+        </div>
+        {!props.docTitle && !props.description && props.pitch ? (
+          <div
+            style={{
+              fontSize: 28,
+              fontWeight: 500,
+              lineHeight: 1.3,
+              color: '#ffffff',
+              marginBottom: 0,
+            }}
+          >
+            {props.pitch}
+          </div>
+        ) : null}
+        {props.docTitle ? (
+          <div
+            style={{
+              fontSize: 44,
+              fontWeight: 800,
+              lineHeight: 1.05,
+              letterSpacing: '-0.015em',
+              marginBottom: 14,
+              color: '#ffffff',
+            }}
+          >
+            {props.docTitle}
+          </div>
+        ) : null}
+        {props.description ? (
+          <div
+            style={{
+              fontSize: 22,
+              lineHeight: 1.3,
+              fontWeight: 500,
+              color: '#ffffff',
+            }}
+          >
+            {props.description}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+function hexToRgba(hex: string, alpha: number): string {
+  const clean = hex.replace('#', '')
+  const r = parseInt(clean.slice(0, 2), 16)
+  const g = parseInt(clean.slice(2, 4), 16)
+  const b = parseInt(clean.slice(4, 6), 16)
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
diff --git a/src/server/runtime/blob-storage.server.ts b/src/server/runtime/blob-storage.server.ts
new file mode 100644
index 000000000..8f9cf69e2
--- /dev/null
+++ b/src/server/runtime/blob-storage.server.ts
@@ -0,0 +1,286 @@
+import { getHostRuntimeEnv, isIsolateRuntime } from './host.server'
+
+export type BlobStorageName = 'githubContentCache' | 'npmDownloadCache'
+
+export type BlobStorageObject = {
+  key: string
+  metadata?: Record<string, string>
+  text: () => Promise<string>
+  uploaded?: Date
+}
+
+export type BlobStorageListedObject = {
+  key: string
+  metadata?: Record<string, string>
+  uploaded?: Date
+}
+
+export type BlobStorageListOptions = {
+  cursor?: string
+  limit?: number
+  prefix?: string
+}
+
+export type BlobStorageListResult = {
+  cursor?: string
+  objects: Array<BlobStorageListedObject>
+  truncated: boolean
+}
+
+export type BlobStorage = {
+  delete: (keys: string | Array<string>) => Promise<void>
+  get: (key: string) => Promise<BlobStorageObject | null>
+  list: (options?: BlobStorageListOptions) => Promise<BlobStorageListResult>
+  put: (
+    key: string,
+    value: string,
+    options?: {
+      contentType?: string
+      metadata?: Record<string, string>
+    },
+  ) => Promise<void>
+}
+
+export type BlobStorageCacheEntry = {
+  metadata: Record<string, string>
+  text: string
+}
+
+export type BlobStorageCache = {
+  delete: (key: string) => Promise<void>
+  get: (key: string) => Promise<BlobStorageCacheEntry | undefined>
+  put: (key: string, entry: BlobStorageCacheEntry) => Promise<void>
+}
+
+type RuntimeBlobObject = {
+  customMetadata?: Record<string, string>
+  key: string
+  uploaded?: Date
+}
+
+type RuntimeBlobObjectBody = RuntimeBlobObject & {
+  text: () => Promise<string>
+}
+
+type RuntimeBlobListOptions = {
+  cursor?: string
+  include?: Array<'customMetadata'>
+  limit?: number
+  prefix?: string
+}
+
+type RuntimeBlobListResult = {
+  cursor?: string
+  objects: Array<RuntimeBlobObject>
+  truncated: boolean
+}
+
+type RuntimeBlobBucket = {
+  delete: (keys: string | Array<string>) => Promise<unknown>
+  get: (key: string) => Promise<RuntimeBlobObjectBody | null>
+  list: (options?: RuntimeBlobListOptions) => Promise<RuntimeBlobListResult>
+  put: (
+    key: string,
+    value: string,
+    options?: {
+      customMetadata?: Record<string, string>
+      httpMetadata?: {
+        contentType?: string
+      }
+    },
+  ) => Promise<unknown>
+}
+
+const CACHE_METADATA_HEADER = 'x-blob-storage-metadata'
+const CACHE_ORIGIN = 'https://blob-storage-cache.tanstack.internal'
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function isRuntimeBlobBucket(value: unknown): value is RuntimeBlobBucket {
+  return (
+    isObject(value) &&
+    'delete' in value &&
+    typeof value.delete === 'function' &&
+    'get' in value &&
+    typeof value.get === 'function' &&
+    'list' in value &&
+    typeof value.list === 'function' &&
+    'put' in value &&
+    typeof value.put === 'function'
+  )
+}
+
+function isCacheLike(value: unknown): value is Cache {
+  return (
+    isObject(value) &&
+    'delete' in value &&
+    typeof value.delete === 'function' &&
+    'match' in value &&
+    typeof value.match === 'function' &&
+    'put' in value &&
+    typeof value.put === 'function'
+  )
+}
+
+function readMetadataHeader(value: string | null) {
+  if (!value) {
+    return undefined
+  }
+
+  let parsed: unknown
+
+  try {
+    parsed = JSON.parse(value)
+  } catch {
+    return undefined
+  }
+
+  if (!isObject(parsed)) {
+    return undefined
+  }
+
+  const metadata: Record<string, string> = {}
+
+  for (const [key, metadataValue] of Object.entries(parsed)) {
+    if (typeof metadataValue !== 'string') {
+      return undefined
+    }
+
+    metadata[key] = metadataValue
+  }
+
+  return metadata
+}
+
+function getRuntimeBindingName(name: BlobStorageName) {
+  switch (name) {
+    case 'githubContentCache':
+      return 'GITHUB_CONTENT_CACHE'
+    case 'npmDownloadCache':
+      return 'NPM_DOWNLOAD_CACHE'
+  }
+}
+
+function getCacheRequest(name: BlobStorageName, key: string) {
+  const url = new URL(CACHE_ORIGIN)
+  url.pathname = `/${name}/${encodeURIComponent(key)}`
+  return new Request(url)
+}
+
+function getDefaultRuntimeCache() {
+  if (!isIsolateRuntime() || typeof caches === 'undefined') {
+    return undefined
+  }
+
+  if (!('default' in caches)) {
+    return undefined
+  }
+
+  const cache = caches.default
+  return isCacheLike(cache) ? cache : undefined
+}
+
+function createBlobStorage(bucket: RuntimeBlobBucket): BlobStorage {
+  return {
+    async delete(keys) {
+      await bucket.delete(keys)
+    },
+    async get(key) {
+      const object = await bucket.get(key)
+
+      if (!object) {
+        return null
+      }
+
+      return {
+        key: object.key,
+        metadata: object.customMetadata,
+        text: () => object.text(),
+        uploaded: object.uploaded,
+      }
+    },
+    async list(options) {
+      const result = await bucket.list({
+        cursor: options?.cursor,
+        include: ['customMetadata'],
+        limit: options?.limit,
+        prefix: options?.prefix,
+      })
+
+      return {
+        cursor: result.cursor,
+        objects: result.objects.map((object) => ({
+          key: object.key,
+          metadata: object.customMetadata,
+          uploaded: object.uploaded,
+        })),
+        truncated: result.truncated,
+      }
+    },
+    async put(key, value, options) {
+      await bucket.put(key, value, {
+        customMetadata: options?.metadata,
+        httpMetadata: {
+          contentType: options?.contentType,
+        },
+      })
+    },
+  }
+}
+
+export async function getBlobStorage(name: BlobStorageName) {
+  const hostEnv = await getHostRuntimeEnv()
+  const binding = hostEnv?.[getRuntimeBindingName(name)]
+
+  return isRuntimeBlobBucket(binding) ? createBlobStorage(binding) : undefined
+}
+
+export function getBlobStorageCache(
+  name: BlobStorageName,
+): BlobStorageCache | undefined {
+  const cache = getDefaultRuntimeCache()
+
+  if (!cache) {
+    return undefined
+  }
+
+  return {
+    async delete(key) {
+      await cache.delete(getCacheRequest(name, key))
+    },
+    async get(key) {
+      const response = await cache.match(getCacheRequest(name, key))
+
+      if (!response) {
+        return undefined
+      }
+
+      const metadata = readMetadataHeader(
+        response.headers.get(CACHE_METADATA_HEADER),
+      )
+
+      if (!metadata) {
+        return undefined
+      }
+
+      return {
+        metadata,
+        text: await response.text(),
+      }
+    },
+    async put(key, entry) {
+      await cache.put(
+        getCacheRequest(name, key),
+        new Response(entry.text, {
+          headers: {
+            'Cache-Control': 'public, max-age=31536000',
+            [CACHE_METADATA_HEADER]: JSON.stringify(entry.metadata),
+            'Content-Type': 'application/json; charset=utf-8',
+          },
+        }),
+      )
+    },
+  }
+}
diff --git a/src/server/runtime/ejs-compat.server.ts b/src/server/runtime/ejs-compat.server.ts
new file mode 100644
index 000000000..7792d87e3
--- /dev/null
+++ b/src/server/runtime/ejs-compat.server.ts
@@ -0,0 +1,7 @@
+export function render() {
+  throw new Error(
+    'EJS template rendering is not supported in this deployment runtime.',
+  )
+}
+
+export default { render }
diff --git a/src/server/runtime/host.server.ts b/src/server/runtime/host.server.ts
new file mode 100644
index 000000000..67593989e
--- /dev/null
+++ b/src/server/runtime/host.server.ts
@@ -0,0 +1,198 @@
+import { AsyncLocalStorage } from 'node:async_hooks'
+
+type StaticAssetService = {
+  fetch: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>
+}
+
+type HostRuntimeEnv = Record<string, unknown> & {
+  CLOUDFLARE_CACHE_PURGE_TOKEN?: string
+  CLOUDFLARE_ZONE_ID?: string
+  GITHUB_AUTH_TOKEN?: string
+  GITHUB_CONTENT_CACHE?: unknown
+  HYPERDRIVE?: {
+    connectionString: string
+  }
+  NPM_DOWNLOAD_CACHE?: unknown
+}
+
+type HostRuntimeModule = {
+  env: HostRuntimeEnv
+}
+
+type HostRuntimeContext = {
+  waitUntil(promise: Promise<unknown>): void
+}
+
+const hostRuntimeEnvStorage = new AsyncLocalStorage<HostRuntimeEnv>()
+const hostRuntimeContextStorage = new AsyncLocalStorage<HostRuntimeContext>()
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function isHostRuntimeEnv(value: unknown): value is HostRuntimeEnv {
+  return isObject(value)
+}
+
+function isHostRuntimeContext(value: unknown): value is HostRuntimeContext {
+  return (
+    isObject(value) &&
+    'waitUntil' in value &&
+    typeof value.waitUntil === 'function'
+  )
+}
+
+function isStaticAssetService(value: unknown): value is StaticAssetService {
+  return (
+    isObject(value) && 'fetch' in value && typeof value.fetch === 'function'
+  )
+}
+
+function isHyperdriveBinding(
+  value: unknown,
+): value is { connectionString: string } {
+  return (
+    isObject(value) &&
+    'connectionString' in value &&
+    typeof value.connectionString === 'string'
+  )
+}
+
+export function isIsolateRuntime(): boolean {
+  if ('WebSocketPair' in globalThis) return true
+
+  return (
+    typeof navigator !== 'undefined' &&
+    navigator.userAgent === 'Cloudflare-Workers'
+  )
+}
+
+export function runWithHostRuntimeEnv<T>(env: unknown, fn: () => T): T {
+  if (!isHostRuntimeEnv(env)) {
+    return fn()
+  }
+
+  return hostRuntimeEnvStorage.run(env, fn)
+}
+
+export function runWithHostRuntimeContext<T>(context: unknown, fn: () => T): T {
+  if (!isHostRuntimeContext(context)) {
+    return fn()
+  }
+
+  return hostRuntimeContextStorage.run(context, fn)
+}
+
+export function getCurrentHostRuntimeEnv() {
+  return hostRuntimeEnvStorage.getStore()
+}
+
+export function scheduleHostRuntimeTask(createTask: () => Promise<unknown>) {
+  const context = hostRuntimeContextStorage.getStore()
+
+  if (!context) {
+    return false
+  }
+
+  context.waitUntil(createTask())
+  return true
+}
+
+async function getStaticAssetService() {
+  if (!isIsolateRuntime()) return
+
+  const hostRuntimeSpecifier = 'cloudflare' + ':workers'
+  try {
+    const { env }: HostRuntimeModule = await import(
+      /* @vite-ignore */
+      hostRuntimeSpecifier
+    )
+
+    return isStaticAssetService(env.ASSETS) ? env.ASSETS : undefined
+  } catch {
+    return undefined
+  }
+}
+
+export async function getHostRuntimeEnv() {
+  const scopedEnv = getCurrentHostRuntimeEnv()
+  if (scopedEnv) return scopedEnv
+
+  if (!isIsolateRuntime()) return
+
+  const hostRuntimeSpecifier = 'cloudflare' + ':workers'
+  try {
+    const { env }: HostRuntimeModule = await import(
+      /* @vite-ignore */
+      hostRuntimeSpecifier
+    )
+
+    return env
+  } catch {
+    return undefined
+  }
+}
+
+export async function fetchStaticAsset(
+  input: RequestInfo | URL,
+  init?: RequestInit,
+) {
+  const staticAssets = await getStaticAssetService()
+  return staticAssets ? staticAssets.fetch(input, init) : fetch(input, init)
+}
+
+export async function getDatabaseConnectionString() {
+  const hostEnv = await getHostRuntimeEnv()
+
+  if (isHyperdriveBinding(hostEnv?.HYPERDRIVE)) {
+    return hostEnv.HYPERDRIVE.connectionString
+  }
+
+  const hostDatabaseUrl = hostEnv?.DATABASE_URL
+  if (typeof hostDatabaseUrl === 'string') {
+    return hostDatabaseUrl
+  }
+
+  return process.env.DATABASE_URL
+}
+
+function getStringEnvValue(
+  hostEnv: Record<string, unknown> | undefined,
+  key: string,
+) {
+  const hostValue = hostEnv?.[key]
+  if (typeof hostValue === 'string' && hostValue.length > 0) {
+    return hostValue
+  }
+
+  const processValue = process.env[key]
+  return typeof processValue === 'string' && processValue.length > 0
+    ? processValue
+    : undefined
+}
+
+export async function purgeHostCacheTags(tags: Array<string>) {
+  const hostEnv = await getHostRuntimeEnv()
+  const zoneId = getStringEnvValue(hostEnv, 'CLOUDFLARE_ZONE_ID')
+  const token = getStringEnvValue(hostEnv, 'CLOUDFLARE_CACHE_PURGE_TOKEN')
+
+  if (!zoneId || !token) {
+    return undefined
+  }
+
+  return fetch(
+    `https://api.cloudflare.com/client/v4/zones/${zoneId}/purge_cache`,
+    {
+      body: JSON.stringify({ tags }),
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    },
+  )
+}
+
+export function supportsProcessDiagnostics() {
+  return !isIsolateRuntime()
+}
diff --git a/src/server/scheduled.server.ts b/src/server/scheduled.server.ts
new file mode 100644
index 000000000..90f07aa99
--- /dev/null
+++ b/src/server/scheduled.server.ts
@@ -0,0 +1,146 @@
+import { materializeWorkflowSchedules } from '@tanstack/workflow-runtime'
+import { pruneStaleCacheRows } from '~/utils/github-content-cache.server'
+import { refreshHomepageNpmStatsSummary } from '~/utils/homepage-npm-stats.server'
+import { refreshGitHubOrgStats } from '~/utils/stats.functions'
+import {
+  reconcileWorkflowRuntimeStore,
+  WORKFLOW_RUNTIME_MAX_DURATION_MS,
+  WORKFLOW_RUNTIME_MIN_REMAINING_MS,
+  workflowRuntime,
+} from '~/utils/workflow-runtime.server'
+
+const CONTENT_CACHE_PRUNE_CRON = '0 9 * * *'
+const STATS_REFRESH_CRON = '0 */6 * * *'
+const WORKFLOW_SWEEP_CRON = '* * * * *'
+
+export async function runScheduledTasks(cron: string, scheduledTime: number) {
+  switch (cron) {
+    case CONTENT_CACHE_PRUNE_CRON:
+      await runContentCachePrune(scheduledTime)
+      return
+    case STATS_REFRESH_CRON:
+      await Promise.all([
+        runGitHubStatsRefresh(scheduledTime),
+        runHomepageNpmStatsSummaryRefresh(scheduledTime),
+      ])
+      return
+    case WORKFLOW_SWEEP_CRON:
+      await runWorkflowSweep(cron, scheduledTime)
+      return
+    default:
+      console.warn(`[scheduled] No task registered for cron: ${cron}`)
+  }
+}
+
+async function runWorkflowSweep(cron: string, scheduledTime: number) {
+  const startTime = Date.now()
+  console.log('[workflow-sweep] Starting workflow sweep...')
+
+  try {
+    const reconciliation = await reconcileWorkflowRuntimeStore()
+    const materialized = await materializeWorkflowSchedules(workflowRuntime, {
+      now: scheduledTime,
+    })
+    const sweep = await workflowRuntime.sweep({
+      now: scheduledTime,
+      leaseOwner: `cloudflare:${cron}:${scheduledTime}`,
+      maxDurationMs: WORKFLOW_RUNTIME_MAX_DURATION_MS,
+      minYieldRemainingMs: WORKFLOW_RUNTIME_MIN_REMAINING_MS,
+      maxScheduledRuns: 10,
+      maxTimers: 10,
+      includeEvents: false,
+    })
+    const duration = Date.now() - startTime
+
+    console.log(
+      `[workflow-sweep] Completed in ${duration}ms - staleRuns: ${reconciliation.staleRunsMarkedErrored}, prunedSchedules: ${reconciliation.unregisteredSchedulesDeleted}, materialized: ${materialized.length}, scheduled: ${JSON.stringify(sweep.summary.scheduled)}, timers: ${JSON.stringify(sweep.summary.timers)}, remaining: ${sweep.remainingMayExist}`,
+    )
+    console.log(
+      '[workflow-sweep] Scheduled time:',
+      new Date(scheduledTime).toISOString(),
+    )
+  } catch (error) {
+    logScheduledError('workflow-sweep', startTime, error)
+  }
+}
+
+async function runContentCachePrune(scheduledTime: number) {
+  const startTime = Date.now()
+  console.log('[prune-content-cache] Starting prune...')
+
+  try {
+    const result = await pruneStaleCacheRows()
+    const duration = Date.now() - startTime
+
+    console.log(
+      `[prune-content-cache] Completed in ${duration}ms - deleted ${result.githubContentDeleted} content entries (${result.githubContentNegativesDeleted} negatives), ${result.docsArtifactDeleted} artifact entries (cutoff: ${result.cutoff.toISOString()}, negativeCutoff: ${result.negativeCutoff.toISOString()})`,
+    )
+    console.log(
+      '[prune-content-cache] Scheduled time:',
+      new Date(scheduledTime).toISOString(),
+    )
+  } catch (error) {
+    logScheduledError('prune-content-cache', startTime, error)
+  }
+}
+
+async function runGitHubStatsRefresh(scheduledTime: number) {
+  const startTime = Date.now()
+  console.log('[refresh-github-stats] Starting GitHub stats refresh...')
+
+  try {
+    const org = 'tanstack'
+    const { orgStats, libraryResults, libraryErrors } =
+      await refreshGitHubOrgStats(org)
+    const duration = Date.now() - startTime
+
+    console.log(
+      `[refresh-github-stats] Completed in ${duration}ms - GitHub Org: ${orgStats.starCount.toLocaleString()} stars, Libraries: ${
+        libraryResults.length
+      } refreshed, ${libraryErrors.length} failed`,
+    )
+    console.log(
+      '[refresh-github-stats] Scheduled time:',
+      new Date(scheduledTime).toISOString(),
+    )
+  } catch (error) {
+    logScheduledError('refresh-github-stats', startTime, error)
+  }
+}
+
+async function runHomepageNpmStatsSummaryRefresh(scheduledTime: number) {
+  const startTime = Date.now()
+  console.log(
+    '[refresh-homepage-npm-stats] Starting NPM stats summary refresh...',
+  )
+
+  try {
+    const summary = await refreshHomepageNpmStatsSummary()
+    const duration = Date.now() - startTime
+
+    console.log(
+      `[refresh-homepage-npm-stats] Completed in ${duration}ms - total: ${summary.totalDownloads.toLocaleString()} across ${summary.totalPackageCount} packages, weekly: ${summary.weeklyDownloads.toLocaleString()} across ${summary.weeklyPackageCount} packages`,
+    )
+    console.log(
+      '[refresh-homepage-npm-stats] Scheduled time:',
+      new Date(scheduledTime).toISOString(),
+    )
+  } catch (error) {
+    logScheduledError('refresh-homepage-npm-stats', startTime, error)
+  }
+}
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : String(error)
+}
+
+function logScheduledError(task: string, startTime: number, error: unknown) {
+  const duration = Date.now() - startTime
+  const errorMessage = getErrorMessage(error)
+  const errorStack = error instanceof Error ? error.stack : undefined
+
+  console.error(`[${task}] Failed after ${duration}ms:`, errorMessage)
+  if (errorStack) {
+    console.error(`[${task}] Stack:`, errorStack)
+  }
+}
diff --git a/src/server/shopify/fetch.ts b/src/server/shopify/fetch.ts
new file mode 100644
index 000000000..4463d2cb2
--- /dev/null
+++ b/src/server/shopify/fetch.ts
@@ -0,0 +1,93 @@
+import { env } from '~/utils/env'
+
+/**
+ * Shopify store identity. Hard-coded intentionally — these are public-by-
+ * design values (they appear in every Shopify-hosted checkout URL, order
+ * email, and receipt) and baking them into source keeps them out of the
+ * environment-variable scanner's watchlist without losing any security.
+ *
+ * Only the tokens are real secrets and remain in env vars.
+ */
+const SHOPIFY_STORE_DOMAIN = 'tanstack-2.myshopify.com'
+const SHOPIFY_API_VERSION = '2026-01'
+
+type ShopifyFetchInput<TVariables> = {
+  query: string
+  variables?: TVariables
+  /**
+   * Optional buyer IP, forwarded to Shopify's bot-protection headers.
+   * Only meaningful with the private token.
+   */
+  buyerIp?: string
+}
+
+type ShopifyResponse<TData> = {
+  data?: TData
+  errors?: Array<{ message: string; locations?: unknown; path?: unknown }>
+}
+
+class ShopifyError extends Error {
+  constructor(
+    message: string,
+    public readonly errors?: ShopifyResponse<unknown>['errors'],
+  ) {
+    super(message)
+    this.name = 'ShopifyError'
+  }
+}
+
+/**
+ * Server-side Storefront API client. Uses the private access token, which has
+ * higher rate limits and supports buyer-IP forwarding for bot protection.
+ *
+ * Use this in route loaders and server functions only — never in browser code.
+ */
+export async function shopifyServerFetch<
+  TData,
+  TVariables = Record<string, unknown>,
+>(input: ShopifyFetchInput<TVariables>): Promise<TData> {
+  const token = env.SHOPIFY_PRIVATE_STOREFRONT_TOKEN
+
+  if (!token) {
+    throw new ShopifyError(
+      'Shopify server client is not configured. Set SHOPIFY_PRIVATE_STOREFRONT_TOKEN in the environment.',
+    )
+  }
+
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+    'Shopify-Storefront-Private-Token': token,
+  }
+  if (input.buyerIp) headers['Shopify-Storefront-Buyer-IP'] = input.buyerIp
+
+  const response = await fetch(
+    `https://${SHOPIFY_STORE_DOMAIN}/api/${SHOPIFY_API_VERSION}/graphql.json`,
+    {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({ query: input.query, variables: input.variables }),
+    },
+  )
+
+  if (!response.ok) {
+    throw new ShopifyError(
+      `Shopify API error: ${response.status} ${response.statusText}`,
+    )
+  }
+
+  const json = (await response.json()) as ShopifyResponse<TData>
+
+  if (json.errors?.length) {
+    throw new ShopifyError(
+      json.errors.map((e) => e.message).join('\n'),
+      json.errors,
+    )
+  }
+
+  if (!json.data) {
+    throw new ShopifyError('Shopify API returned no data and no errors.')
+  }
+
+  return json.data
+}
diff --git a/src/server/sponsors.ts b/src/server/sponsors.ts
index b311b86e0..e599925cb 100644
--- a/src/server/sponsors.ts
+++ b/src/server/sponsors.ts
@@ -24,6 +24,8 @@ export type Sponsor = {
   createdAt: string
 }
 
+const sponsorMaintainerLogin = 'tannerlinsley'
+
 export const getSponsorsForSponsorPack = createServerFn({
   method: 'GET',
 }).handler(async () => {
@@ -39,8 +41,8 @@ export const getSponsorsForSponsorPack = createServerFn({
   setResponseHeaders(
     new Headers({
       'Cache-Control': 'public, max-age=0, must-revalidate',
-      'Netlify-CDN-Cache-Control':
-        'public, max-age=300, durable, stale-while-revalidate=300',
+      'Cloudflare-CDN-Cache-Control':
+        'public, max-age=300, stale-while-revalidate=300',
     }),
   )
 
@@ -89,7 +91,7 @@ export async function getSponsors() {
 
   sponsors.sort(
     (a, b) =>
-      (b.amount || 0) - (a.amount || 0) || (b.createdAt > a.createdAt ? -1 : 1),
+      (b.amount || 0) - (a.amount || 0) || a.login.localeCompare(b.login),
   )
 
   return sponsors
@@ -99,32 +101,56 @@ async function getGithubSponsors() {
   let sponsors: Sponsor[] = []
   try {
     const fetchPage = async (cursor = '') => {
-      const res = await graphqlWithAuth(
+      type SponsorshipEdge = {
+        node: {
+          sponsorEntity: {
+            avatarUrl: string
+            login: string
+            name?: string | null
+            url: string
+          } | null
+          tier: {
+            monthlyPriceInDollars: number
+          } | null
+        }
+      }
+
+      type GraphQLResponse = {
+        user: {
+          sponsorshipsAsMaintainer: {
+            pageInfo: {
+              hasNextPage: boolean
+              endCursor: string
+            }
+            edges: Array<SponsorshipEdge>
+          }
+        } | null
+      }
+
+      const res = await graphqlWithAuth<GraphQLResponse>(
         `
-      query ($cursor: String) {
-        viewer {
-          sponsorshipsAsMaintainer(first: 100, after: $cursor, includePrivate: true) {
+      query ($cursor: String, $login: String!) {
+        user(login: $login) {
+          sponsorshipsAsMaintainer(first: 100, after: $cursor, includePrivate: false) {
             pageInfo {
               hasNextPage
               endCursor
             }
             edges {
               node {
-                createdAt
                 sponsorEntity {
-                  ... on User {
-                    name
+                  ... on Actor {
+                    avatarUrl
                     login
+                    url
                   }
-                  ... on Organization {
+                  ... on User {
                     name
-                    login
                   }
                 }
                 tier {
                   monthlyPriceInDollars
                 }
-                privacyLevel
               }
             }
           }
@@ -133,64 +159,41 @@ async function getGithubSponsors() {
       `,
         {
           cursor,
+          login: sponsorMaintainerLogin,
         },
       )
 
-      type SponsorshipEdge = {
-        node: {
-          createdAt: string
-          sponsorEntity: {
-            name: string
-            login: string
-          } | null
-          tier: {
-            monthlyPriceInDollars: number
-          } | null
-          privacyLevel: string
-        }
-      }
+      const sponsorships = res.user?.sponsorshipsAsMaintainer
 
-      type GraphQLResponse = {
-        viewer: {
-          sponsorshipsAsMaintainer: {
-            pageInfo: {
-              hasNextPage: boolean
-              endCursor: string
-            }
-            edges: Array<SponsorshipEdge>
-          }
-        }
+      if (!sponsorships) {
+        return
       }
 
       const {
-        viewer: {
-          sponsorshipsAsMaintainer: {
-            pageInfo: { hasNextPage, endCursor },
-            edges,
-          },
-        },
-      } = res as GraphQLResponse
+        pageInfo: { hasNextPage, endCursor },
+        edges,
+      } = sponsorships
 
       const mapped = edges
         .map((edge) => {
           const {
-            node: { createdAt, sponsorEntity, tier, privacyLevel },
+            node: { sponsorEntity, tier },
           } = edge
 
           if (!sponsorEntity) {
             return null
           }
 
-          const { name, login } = sponsorEntity
+          const { avatarUrl, name, login } = sponsorEntity
 
           return {
-            name,
+            name: name || login,
             login,
             amount: tier?.monthlyPriceInDollars || 0,
-            createdAt,
-            private: privacyLevel === 'PRIVATE',
-            imageUrl: '',
-            linkUrl: '',
+            createdAt: '',
+            private: false,
+            imageUrl: avatarUrl,
+            linkUrl: sponsorEntity.url,
           }
         })
         .filter((d): d is Sponsor => d !== null)
@@ -208,7 +211,9 @@ async function getGithubSponsors() {
   } catch (err) {
     const error = err as { status?: number }
     if (error.status === 401) {
-      console.error('Missing github credentials, returning mock data.')
+      console.error(
+        'Invalid or missing GitHub credentials, returning mock data.',
+      )
       return [
         'tannerlinsley',
         'tkdodo',
@@ -233,8 +238,10 @@ async function getGithubSponsors() {
       console.error('GitHub rate limit exceeded, returning empty sponsors.')
       return []
     }
-    throw err
+    console.error('Failed to fetch GitHub sponsors', err)
   }
+
+  return sponsors
 }
 
 async function getSponsorsMeta(): Promise<SponsorMeta[]> {
diff --git a/src/server/uploadthing.ts b/src/server/uploadthing.ts
index e2b78e6a3..d0cba328d 100644
--- a/src/server/uploadthing.ts
+++ b/src/server/uploadthing.ts
@@ -32,12 +32,15 @@ export const uploadRouter = {
       return { url: file.ufsUrl }
     }),
 
-  showcaseUploader: f({
-    image: {
-      maxFileSize: '4MB',
-      maxFileCount: 1,
+  showcaseUploader: f(
+    {
+      image: {
+        maxFileSize: '4MB',
+        maxFileCount: 1,
+      },
     },
-  })
+    { awaitServerData: false },
+  )
     .middleware(async ({ req }) => {
       const authService = getAuthService()
       const user = await authService.getCurrentUser(req)
@@ -48,8 +51,8 @@ export const uploadRouter = {
 
       return { userId: user.userId }
     })
-    .onUploadComplete(async ({ metadata, file }) => {
-      return { url: file.ufsUrl, uploadedBy: metadata.userId }
+    .onUploadComplete(async ({ metadata }) => {
+      return { uploadedBy: metadata.userId }
     }),
 } satisfies FileRouter
 
diff --git a/src/start.ts b/src/start.ts
new file mode 100644
index 000000000..fc76b2513
--- /dev/null
+++ b/src/start.ts
@@ -0,0 +1,16 @@
+import {
+  sentryGlobalFunctionMiddleware,
+  sentryGlobalRequestMiddleware,
+} from '@sentry/tanstackstart-react'
+import { createCsrfMiddleware, createStart } from '@tanstack/react-start'
+
+const csrfMiddleware = createCsrfMiddleware({
+  filter: (ctx) => ctx.handlerType === 'serverFn',
+})
+
+export const startInstance = createStart(() => {
+  return {
+    requestMiddleware: [csrfMiddleware, sentryGlobalRequestMiddleware],
+    functionMiddleware: [sentryGlobalFunctionMiddleware],
+  }
+})
diff --git a/src/stores/aiLibraryHeroAnimation.ts b/src/stores/aiLibraryHeroAnimation.ts
deleted file mode 100644
index 0971c69d2..000000000
--- a/src/stores/aiLibraryHeroAnimation.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import { create } from 'zustand'
-
-export enum AnimationPhase {
-  STARTING = 'STARTING',
-  DESELECTING = 'DESELECTING',
-  SELECTING_FRAMEWORK = 'SELECTING_FRAMEWORK',
-  SELECTING_SERVICE = 'SELECTING_SERVICE',
-  SELECTING_SERVER = 'SELECTING_SERVER',
-  SHOWING_CHAT = 'SHOWING_CHAT',
-  PULSING_CONNECTIONS = 'PULSING_CONNECTIONS',
-  STREAMING_RESPONSE = 'STREAMING_RESPONSE',
-  HOLDING = 'HOLDING',
-}
-
-export const SVG_WIDTH = 632
-export const SVG_HEIGHT = 432
-export const BOX_FONT_SIZE = 18
-export const BOX_FONT_WEIGHT = 700
-export const SERVICE_WIDTH = 160
-export const SERVICE_GUTTER = 20
-export const SERVICE_LOCATIONS = [0, 1, 2, 3].map(
-  (index) =>
-    SERVICE_WIDTH * 2 +
-    index * (SERVICE_WIDTH + SERVICE_GUTTER) +
-    SERVICE_GUTTER / 2,
-)
-export const SERVICE_Y_OFFSET = 265
-export const SERVICE_HEIGHT = 40
-export const SERVICE_Y_CENTER = SERVICE_Y_OFFSET + SERVICE_HEIGHT / 2
-
-export const LIBRARY_CARD_WIDTH = 140
-export const LIBRARY_CARD_HEIGHT = 60
-export const LIBRARY_CARD_GUTTER = 20
-const LIBRARY_CARD_START_X = -20
-export const LIBRARY_CARD_LOCATIONS = [0, 1, 2, 3].map(
-  (index) =>
-    LIBRARY_CARD_START_X +
-    index * (LIBRARY_CARD_WIDTH + LIBRARY_CARD_GUTTER) +
-    LIBRARY_CARD_GUTTER / 2,
-)
-
-export const SERVER_CARD_WIDTH = 140
-export const SERVER_CARD_HEIGHT = 60
-export const SERVER_CARD_GUTTER = 20
-const SERVER_CARD_START_X = -20
-export const SERVER_CARD_LOCATIONS = [0, 1, 2, 3].map(
-  (index) =>
-    SERVER_CARD_START_X +
-    index * (SERVER_CARD_WIDTH + SERVER_CARD_GUTTER) +
-    SERVER_CARD_GUTTER / 2,
-)
-export const SERVER_CARD_Y_OFFSET = 370
-
-export type ChatMessage = {
-  id: string
-  user: string
-  assistant: string | null
-  isStreaming: boolean
-}
-
-type AILibraryHeroAnimationState = {
-  phase: AnimationPhase
-  selectedFramework: number | null
-  selectedService: number | null
-  selectedServer: number | null
-  rotatingFramework: number | null
-  rotatingServer: number | null
-  rotatingService: number | null
-  serviceOffset: number
-  messages: ChatMessage[]
-  currentMessageIndex: number
-  typingUserMessage: string
-  connectionPulseDirection: 'down' | 'up'
-  timeoutRefs: NodeJS.Timeout[]
-}
-
-type AILibraryHeroAnimationActions = {
-  setPhase: (phase: AnimationPhase) => void
-  setSelectedFramework: (framework: number | null) => void
-  setSelectedService: (service: number | null) => void
-  setSelectedServer: (server: number | null) => void
-  setRotatingFramework: (framework: number | null) => void
-  setRotatingServer: (server: number | null) => void
-  setRotatingService: (service: number | null) => void
-  setServiceOffset: (offset: number) => void
-  addMessage: (user: string) => string
-  updateCurrentAssistantMessage: (text: string) => void
-  setCurrentMessageStreaming: (streaming: boolean) => void
-  setCurrentMessageIndex: (index: number) => void
-  clearMessages: () => void
-  setTypingUserMessage: (message: string) => void
-  clearTypingUserMessage: () => void
-  setConnectionPulseDirection: (direction: 'down' | 'up') => void
-  addTimeout: (timeout: NodeJS.Timeout) => void
-  clearTimeouts: () => void
-  reset: () => void
-}
-
-export const useAILibraryHeroAnimationStore = create<
-  AILibraryHeroAnimationState & AILibraryHeroAnimationActions
->()((set, get) => ({
-  // State
-  phase: AnimationPhase.STARTING,
-  selectedFramework: null,
-  selectedService: null,
-  selectedServer: null,
-  rotatingFramework: null,
-  rotatingServer: null,
-  rotatingService: null,
-  serviceOffset: 0 - SERVICE_WIDTH / 2 - SERVICE_GUTTER / 2,
-  messages: [],
-  currentMessageIndex: -1,
-  typingUserMessage: '',
-  connectionPulseDirection: 'down',
-  timeoutRefs: [],
-
-  // Actions
-  setPhase: (phase) => set({ phase }),
-  setSelectedFramework: (framework) => set({ selectedFramework: framework }),
-  setSelectedService: (service) => set({ selectedService: service }),
-  setSelectedServer: (server) => set({ selectedServer: server }),
-  setRotatingFramework: (framework) => set({ rotatingFramework: framework }),
-  setRotatingServer: (server) => set({ rotatingServer: server }),
-  setRotatingService: (service) => set({ rotatingService: service }),
-  setServiceOffset: (offset) => set({ serviceOffset: offset }),
-  addMessage: (user) => {
-    const id = `${Date.now()}-${Math.random()}`
-    set((state) => ({
-      messages: [
-        ...state.messages,
-        { id, user, assistant: null, isStreaming: false },
-      ],
-      currentMessageIndex: state.messages.length,
-    }))
-    return id
-  },
-  updateCurrentAssistantMessage: (text) =>
-    set((state) => {
-      if (
-        state.currentMessageIndex >= 0 &&
-        state.currentMessageIndex < state.messages.length
-      ) {
-        const messages = [...state.messages]
-        messages[state.currentMessageIndex] = {
-          ...messages[state.currentMessageIndex],
-          assistant: text,
-        }
-        return { messages }
-      }
-      return {}
-    }),
-  setCurrentMessageStreaming: (streaming) =>
-    set((state) => {
-      if (
-        state.currentMessageIndex >= 0 &&
-        state.currentMessageIndex < state.messages.length
-      ) {
-        const messages = [...state.messages]
-        messages[state.currentMessageIndex] = {
-          ...messages[state.currentMessageIndex],
-          isStreaming: streaming,
-        }
-        return { messages }
-      }
-      return {}
-    }),
-  setCurrentMessageIndex: (index) => set({ currentMessageIndex: index }),
-  clearMessages: () =>
-    set({ messages: [], currentMessageIndex: -1, typingUserMessage: '' }),
-  setTypingUserMessage: (message) => set({ typingUserMessage: message }),
-  clearTypingUserMessage: () => set({ typingUserMessage: '' }),
-  setConnectionPulseDirection: (direction) =>
-    set({ connectionPulseDirection: direction }),
-  addTimeout: (timeout) =>
-    set((state) => ({ timeoutRefs: [...state.timeoutRefs, timeout] })),
-  clearTimeouts: () => {
-    const { timeoutRefs } = get()
-    timeoutRefs.forEach(clearTimeout)
-    set({ timeoutRefs: [] })
-  },
-  reset: () =>
-    set({
-      phase: AnimationPhase.STARTING,
-      selectedFramework: null,
-      selectedService: null,
-      selectedServer: null,
-      rotatingFramework: null,
-      rotatingServer: null,
-      rotatingService: null,
-      connectionPulseDirection: 'down',
-      // Don't reset serviceOffset - keep service in place until new selection
-      // Don't reset messages - they'll be cleared separately when all are shown
-    }),
-}))
diff --git a/src/styles/app.css b/src/styles/app.css
index 5d87f124d..0b7c57b69 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -7,6 +7,15 @@
 @custom-variant auto (&:is(.auto, .auto *));
 @custom-variant aria-current (&[aria-current="location"]);
 
+html.theme-switching,
+html.theme-switching *,
+html.theme-switching *::before,
+html.theme-switching *::after {
+  transition: none !important;
+  animation-duration: 0s !important;
+  animation-delay: 0s !important;
+}
+
 @theme {
   /* Breakpoints */
   --breakpoint-xs: 480px;
@@ -15,6 +24,19 @@
   --font-sans:
     'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
+  --font-shop-display: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+  --font-shop-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* Shop type scale */
+  --text-shop-display: clamp(36px, 5vw, 52px);
+  --text-shop-heading: 22px;
+  --text-shop-title: 18px;
+  --text-shop-price: 20px;
+  --text-shop-body: 13.5px;
+  --text-shop-ui: 13px;
+  --text-shop-sm: 12px;
+  --text-shop-xs: 10.5px;
+  --text-shop-2xs: 9.5px;
 
   /* Shadows */
   --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
@@ -58,6 +80,41 @@
   --color-gray-950: #0a0a0a;
 }
 
+/* Keep neutral grays stable before client CSS injection reorders Tailwind layers. */
+:root,
+:host {
+  --color-gray-50: #fafafa;
+  --color-gray-100: #f5f5f5;
+  --color-gray-200: #e5e5e5;
+  --color-gray-300: #d4d4d4;
+  --color-gray-400: #a3a3a3;
+  --color-gray-500: #737373;
+  --color-gray-600: #525252;
+  --color-gray-700: #404040;
+  --color-gray-800: #262626;
+  --color-gray-900: #171717;
+  --color-gray-950: #0a0a0a;
+}
+
+/* Shop color tokens — inline so they resolve via var() at runtime (scoped to .shop-scope / html.dark .shop-scope) */
+@theme inline {
+  --color-shop-bg: var(--shop-bg);
+  --color-shop-bg-2: var(--shop-bg-2);
+  --color-shop-panel: var(--shop-panel);
+  --color-shop-panel-2: var(--shop-panel-2);
+  --color-shop-surface: var(--shop-surface);
+  --color-shop-surface-hover: var(--shop-surface-hover);
+  --color-shop-line: var(--shop-line);
+  --color-shop-line-2: var(--shop-line-2);
+  --color-shop-text: var(--shop-text);
+  --color-shop-text-2: var(--shop-text-2);
+  --color-shop-muted: var(--shop-muted);
+  --color-shop-accent: var(--shop-accent);
+  --color-shop-accent-ink: var(--shop-accent-ink);
+  --color-shop-green: #22c993;
+  --color-shop-orange: #ff7a3a;
+}
+
 /* Safelist for dynamic colors */
 @source inline('{bg-blue-{4,5,6}00,bg-emerald-500,bg-purple-500,bg-pink-500,bg-cyan-500,bg-slate-{4,5}00,bg-twine-700,bg-orange-{5,6,7}00,bg-yellow-500,bg-lime-700,bg-red-500,bg-green-500}/{20,30,40,80}');
 @source inline('{hover:{bg-blue-{4,5,6}00,bg-emerald-500,bg-purple-500,bg-pink-500,bg-cyan-500,bg-slate-{4,5}00,bg-twine-700,bg-orange-{5,6,7}00,bg-yellow-500,bg-lime-700,bg-red-500,bg-green-500}/40}');
@@ -76,15 +133,310 @@
   }
 
   :root {
-    --navbar-height: 50px;
-    scroll-padding-top: var(--navbar-height);
+    --navbar-height: 52px;
+    --docs-tabs-height: 0px;
+    --anchor-scroll-padding-top: calc(
+      var(--navbar-height) + var(--docs-tabs-height)
+    );
+    scroll-padding-top: var(--anchor-scroll-padding-top);
+  }
+
+  :root:has([data-docs-layout]) {
+    --docs-tabs-height: 41px;
   }
+
+  @media (min-width: 1120px) {
+    :root:has([data-docs-layout]) {
+      --docs-tabs-height: 42px;
+    }
+  }
+}
+
+.tanstack-observable-plot {
+  --plot-background: var(--color-white);
+  overflow: visible;
+}
+
+html.dark .tanstack-observable-plot {
+  --plot-background: var(--color-gray-800);
 }
 
 button {
   @apply cursor-pointer;
 }
 
+.ts-mega-trigger {
+  position: relative;
+  isolation: isolate;
+}
+
+.ts-mega-trigger-wrap {
+  display: inline-flex;
+  align-self: stretch;
+  align-items: center;
+}
+
+.ts-mega-trigger::after {
+  content: '';
+  position: absolute;
+  right: 0.625rem;
+  bottom: 0.3rem;
+  left: 0.625rem;
+  height: 1px;
+  background: currentcolor;
+  opacity: 0.35;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition:
+    opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.ts-mega-trigger:hover::after,
+.ts-mega-trigger-wrap:focus-within > .ts-mega-trigger::after {
+  opacity: 0.55;
+  transform: scaleX(1);
+}
+
+.ts-mega-dropdown {
+  --ts-mega-dropdown-x: 0;
+  position: absolute;
+  left: -1rem;
+  top: 100%;
+  z-index: 90;
+  width: max-content;
+  min-width: var(--ts-primary-nav-target-width, 0px);
+  max-width: min(calc(100vw - 2rem), 70rem);
+  padding-top: 1rem;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translate3d(var(--ts-mega-dropdown-x), -8px, 0) scale(0.985);
+  transform-origin: 50% 0;
+  transition:
+    opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    visibility 0s linear 160ms;
+}
+
+.ts-mega-trigger-wrap:not([data-menu-dismissed='true']):hover
+  > .ts-mega-dropdown,
+.ts-mega-trigger-wrap:not([data-menu-dismissed='true']):focus-within
+  > .ts-mega-dropdown {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translate3d(var(--ts-mega-dropdown-x), 0, 0) scale(1);
+  transition-delay: 0s;
+}
+
+.ts-mega-dropdown-panel {
+  position: relative;
+  isolation: isolate;
+  background-color: rgb(255 255 255 / 0.94);
+  backdrop-filter: blur(100px) saturate(1.9);
+  -webkit-backdrop-filter: blur(100px) saturate(1.9);
+}
+
+.dark .ts-mega-dropdown-panel {
+  background-color: rgb(0 0 0 / 0.88);
+}
+
+.ts-glass-menu {
+  position: relative;
+  isolation: isolate;
+}
+
+.ts-glass-menu > * {
+  position: relative;
+  z-index: 1;
+}
+
+.ts-glass-menu::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background: linear-gradient(
+    135deg,
+    rgb(255 255 255 / 0.36),
+    rgb(255 255 255 / 0.12) 38%,
+    rgb(255 255 255 / 0) 72%
+  );
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.5),
+    inset 0 -1px 0 rgb(0 0 0 / 0.04);
+}
+
+.dark .ts-glass-menu::after {
+  background: linear-gradient(
+    135deg,
+    rgb(255 255 255 / 0.12),
+    rgb(255 255 255 / 0.05) 38%,
+    rgb(255 255 255 / 0) 72%
+  );
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.14),
+    inset 0 -1px 0 rgb(255 255 255 / 0.04);
+}
+
+@media (min-width: 900px) and (max-width: 1119.98px) {
+  .ts-mega-dropdown {
+    --ts-mega-dropdown-x: -50%;
+    position: fixed;
+    right: auto;
+    left: 50%;
+    top: calc(var(--navbar-height) - 0.625rem);
+    width: max-content;
+    min-width: var(--ts-primary-nav-target-width, 0px);
+    max-width: calc(100vw - 2rem);
+    padding-top: calc(1rem + 0.625rem);
+  }
+
+  .ts-mega-dropdown-panel {
+    width: max-content;
+    min-width: var(--ts-primary-nav-target-width, 0px);
+    max-width: calc(100vw - 2rem);
+    overflow-x: auto;
+  }
+}
+
+[data-docs-mobile-backdrop],
+[data-docs-mobile-menu],
+[data-docs-mobile-open-icon] {
+  display: none;
+}
+
+.docs-partner-slot {
+  perspective: 18rem;
+}
+
+.docs-partner-slot-link {
+  backface-visibility: hidden;
+  transform-origin: 50% 50%;
+  transform-style: preserve-3d;
+}
+
+.docs-partner-slot-link[data-flip-state='out'] {
+  animation: docs-partner-flip-out 120ms cubic-bezier(0.36, 0, 0.66, -0.56) both;
+}
+
+.docs-partner-slot-link[data-flip-state='in'] {
+  animation: docs-partner-flip-in 160ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes docs-partner-flip-out {
+  from {
+    opacity: 0.8;
+    transform: rotateX(0deg);
+  }
+
+  to {
+    opacity: 0;
+    transform: rotateX(-90deg);
+  }
+}
+
+@keyframes docs-partner-flip-in {
+  from {
+    opacity: 0;
+    transform: rotateX(90deg);
+  }
+
+  to {
+    opacity: 0.8;
+    transform: rotateX(0deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .docs-partner-slot-link[data-flip-state='out'],
+  .docs-partner-slot-link[data-flip-state='in'] {
+    animation: none;
+  }
+}
+
+@media (max-width: 639.98px) {
+  .docs-partner-slot-link {
+    max-width: 30vw;
+  }
+}
+
+@media (max-width: 899.98px) {
+  [data-docs-layout]:has([data-docs-mobile-menu-toggle]:checked)
+    [data-docs-mobile-backdrop],
+  [data-docs-layout]:has([data-docs-mobile-menu-toggle]:checked)
+    [data-docs-mobile-menu] {
+    display: block;
+  }
+
+  [data-docs-layout]:has([data-docs-mobile-menu-toggle]:checked)
+    [data-docs-mobile-closed-icon] {
+    display: none;
+  }
+
+  [data-docs-layout]:has([data-docs-mobile-menu-toggle]:checked)
+    [data-docs-mobile-open-icon] {
+    display: block;
+  }
+}
+
+@media (min-width: 900px) {
+  [data-docs-mobile-backdrop],
+  [data-docs-mobile-menu] {
+    display: none !important;
+  }
+}
+
+@media (min-width: 900px) and (max-width: 1279.98px) {
+  [data-docs-layout]:has([data-docs-menu-trigger]:is(:hover, :focus, :active))
+    [data-docs-desktop-menu],
+  [data-docs-layout]:has([data-docs-desktop-menu]:hover)
+    [data-docs-desktop-menu],
+  [data-docs-layout][data-docs-menu-open='true'] [data-docs-desktop-menu] {
+    --tw-translate-x: 0 !important;
+    translate: 0 0 !important;
+    transform: translateX(0) !important;
+  }
+}
+
+@media (min-width: 900px) {
+  body:has(
+      .ts-mega-trigger-wrap:not([data-menu-dismissed='true']):hover
+        > .ts-mega-dropdown
+    )
+    [data-site-menu-tint],
+  body:has(
+      .ts-mega-trigger-wrap:not([data-menu-dismissed='true']):focus-within
+        > .ts-mega-dropdown
+    )
+    [data-site-menu-tint] {
+    opacity: 1;
+  }
+
+  body:has(
+      .ts-mega-trigger-wrap:not([data-menu-dismissed='true']):hover
+        > .ts-mega-dropdown
+    )
+    [data-site-content],
+  body:has(
+      .ts-mega-trigger-wrap:not([data-menu-dismissed='true']):focus-within
+        > .ts-mega-dropdown
+    )
+    [data-site-content] {
+    filter: blur(4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ts-mega-trigger::after,
+  .ts-mega-dropdown {
+    transition: none;
+  }
+}
+
 @layer base {
   html,
   body {
@@ -195,6 +547,19 @@ button {
     @apply opacity-50;
   }
 
+  .anchor-heading-link {
+    text-decoration: none !important;
+    @apply ml-2 inline-block opacity-0 transition duration-100;
+  }
+
+  :hover > .anchor-heading-link {
+    @apply opacity-50;
+  }
+
+  .anchor-heading-link:focus {
+    @apply opacity-75;
+  }
+
   :has(+ .anchor-heading) {
     margin-bottom: 0 !important;
   }
@@ -338,44 +703,9 @@ button {
 
 /* ============================================================================ */
 
-/* https://github.com/shikijs/twoslash/tree/main/packages/remark-shiki-twoslash#plugin-setup */
 pre {
-  /* All code samples get a grey border, twoslash ones get a different color */
   @apply text-black overflow-x-auto relative leading-tight;
 }
-pre.shiki {
-  overflow-x: auto;
-  padding: 1rem;
-
-  @apply bg-white;
-
-  &.vitesse-dark {
-    @apply text-gray-400 bg-gray-950;
-  }
-}
-pre.shiki:hover .dim {
-  opacity: 1;
-}
-pre.shiki div.dim {
-  opacity: 0.5;
-}
-pre.shiki div.dim,
-pre.shiki div.highlight {
-  margin: 0;
-  padding: 0;
-}
-pre.shiki div.highlight {
-  opacity: 1;
-  background-color: #f1f8ff;
-}
-pre.shiki div.line {
-  min-height: auto;
-}
-
-/** Don't show the language identifiers */
-pre.shiki .language-id {
-  display: none;
-}
 
 span.line {
   display: inline-block;
@@ -669,23 +999,6 @@ pre .logger.log-log svg {
   margin-right: 9px;
 }
 
-html:not(.dark) .shiki.vitesse-dark {
-  display: none;
-}
-
-html.dark .shiki.github-light {
-  display: none;
-}
-
-/* Improve comment contrast in dark mode */
-html.dark .shiki.vitesse-dark .token.comment,
-html.dark .shiki.vitesse-dark span[style*='color:#565F89'],
-html.dark .shiki.vitesse-dark span[style*='color: #565F89'],
-html.dark .shiki.vitesse-dark span[style*='color:#51597D'],
-html.dark .shiki.vitesse-dark span[style*='color: #51597D'] {
-  color: #9099c0 !important;
-}
-
 /* TanStack Router Devtools */
 
 .TanStackRouterDevtools > button {
@@ -693,13 +1006,6 @@ html.dark .shiki.vitesse-dark span[style*='color: #51597D'] {
   @apply border-t-0 border-gray-500/10 shadow-md text-gray-800;
 }
 
-/* Hubspot */
-
-#hubspot-messages-iframe-container {
-  @apply translate-x-[10px] translate-y-[10px];
-  @apply dark:scheme-dark;
-}
-
 /* Markdown Alerts */
 
 .not-prose .markdown-alert {
@@ -796,8 +1102,38 @@ mark {
 @font-face {
   font-display: swap;
   font-family: 'Inter';
+  font-style: normal;
   font-weight: 100 900;
-  src: url('/fonts/Inter.woff2') format('woff2');
+  src: url('/fonts/Inter-latin-ext.woff2') format('woff2');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
+    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('/fonts/Inter-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    filter: blur(4px);
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: scale(1);
+  }
 }
 
 @keyframes pulseScale {
@@ -868,6 +1204,70 @@ mark {
   pointer-events: none;
 }
 
+.home-adapter-graph-flow {
+  display: block;
+  width: 1.25rem;
+  height: 3px;
+  pointer-events: none;
+  border-radius: 9999px;
+  background: linear-gradient(
+    90deg,
+    rgb(34 211 238 / 0),
+    rgb(165 243 252 / 0.98),
+    rgb(34 211 238 / 0.98),
+    rgb(59 130 246 / 0)
+  );
+  box-shadow: 0 0 10px rgb(34 211 238 / 0.7);
+  transition: opacity 120ms linear;
+}
+
+@keyframes home-open-source-gradient-shift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+.home-open-source-gradient {
+  --home-open-source-gradient: linear-gradient(
+    90deg,
+    rgb(20 184 166),
+    rgb(59 130 246),
+    rgb(168 85 247),
+    rgb(244 63 94),
+    rgb(234 179 8),
+    rgb(20 184 166)
+  );
+
+  position: relative;
+  display: inline-block;
+  white-space: nowrap;
+  font-weight: 400;
+  font-style: oblique 8deg;
+  color: rgb(20 184 166);
+  background-image: var(--home-open-source-gradient);
+  background-size: 720% 100%;
+  background-position: 0% 50%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: home-open-source-gradient-shift 34s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .home-open-source-gradient {
+    animation: none;
+  }
+
+  .home-adapter-graph-flow {
+    display: none;
+  }
+}
+
 /* Dropdown animations */
 @keyframes dropdown-in {
   from {
@@ -899,6 +1299,131 @@ mark {
   animation: dropdown-out 100ms ease-in;
 }
 
+/* Search modal animations */
+@keyframes search-modal-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes search-modal-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes search-modal-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes search-modal-panel-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-2px) scale(0.99);
+  }
+}
+
+.search-modal-overlay[data-state='open'] {
+  animation: search-modal-overlay-in 140ms ease-out both;
+}
+
+.search-modal-overlay[data-state='closed'] {
+  animation: search-modal-overlay-out 120ms ease-in both;
+}
+
+.search-modal-panel-transition {
+  transform-origin: top center;
+}
+
+.search-modal-content[data-state='open'] .search-modal-panel-transition {
+  animation: search-modal-panel-in 140ms ease-out both;
+}
+
+.search-modal-content[data-state='closed'] .search-modal-panel-transition {
+  animation: search-modal-panel-out 120ms ease-in both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .search-modal-overlay,
+  .search-modal-panel-transition {
+    animation: none !important;
+  }
+}
+
+/* Cart panel slide-in from right */
+@keyframes cart-panel-in {
+  from {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes cart-panel-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
+@keyframes cart-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes cart-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.cart-panel[data-state='open'] {
+  animation: cart-panel-in 200ms ease-out;
+}
+
+.cart-panel[data-state='closed'] {
+  animation: cart-panel-out 150ms ease-in;
+}
+
+.cart-overlay[data-state='open'] {
+  animation: cart-overlay-in 200ms ease-out;
+}
+
+.cart-overlay[data-state='closed'] {
+  animation: cart-overlay-out 150ms ease-in;
+}
+
 /* Doc Feedback Styles */
 .doc-feedback-block {
   transition:
@@ -927,7 +1452,6 @@ mark {
   height: 1em;
 }
 
-/* Consecutive code blocks - no gap when under headings */
 [data-tab] .codeblock + .codeblock {
   @apply mt-0 border-t-0 rounded-t-none;
 }
@@ -935,58 +1459,50 @@ mark {
 [data-tab] .codeblock:has(+ .codeblock) {
   @apply rounded-b-none;
 }
-/* File tabs variant - minimal code blocks with floating copy button */
-.file-tabs-panel .codeblock {
-  @apply rounded-t-none border-t-0 my-0;
-}
 
-/* Hide the title bar but keep copy button accessible */
-.file-tabs-panel .codeblock > div:first-child {
-  @apply absolute right-2 top-2 bg-transparent border-none p-0 z-10;
+[data-tab] {
+  @apply px-4 py-4;
 }
 
-/* Hide the title text, keep only the button */
-.file-tabs-panel .codeblock > div:first-child > div:first-child {
-  @apply hidden;
+[data-tab][data-content='code-only'] {
+  @apply p-0;
 }
 
-/* Package manager tabs - minimal code blocks with floating copy button */
-.package-manager-tabs [data-tab] .codeblock {
-  @apply rounded-t-none border-t-0 my-0;
+[data-tab][data-content='code-only'] .codeblock {
+  @apply rounded-none border-none my-0;
 }
 
-.package-manager-tabs [data-tab] .codeblock > div:first-child {
-  @apply absolute right-2 top-2 bg-transparent border-none p-0 z-10;
+[data-tab][data-content='code-only'] .codeblock pre {
+  border-radius: 0;
 }
 
-.package-manager-tabs .codeblock {
-  border: none;
+[data-tab][data-content='code-only'] .codeblock > div:first-child {
+  @apply absolute right-2 top-2 bg-transparent border-none p-0 z-10;
 }
 
-.package-manager-tabs
-  [data-tab]
+[data-tab][data-content='code-only']
   .codeblock
   > div:first-child
   > div:first-child {
   @apply hidden;
 }
 
-/* Remove padding from tab content wrapper for package manager */
-.package-manager-tabs .not-prose > div:last-child {
-  @apply p-0 border-none rounded-b-none bg-transparent;
+[data-tab][data-content='mixed'] > p,
+[data-tab][data-content='mixed'] > ul,
+[data-tab][data-content='mixed'] > ol {
+  @apply text-sm leading-relaxed text-gray-700 dark:text-gray-300;
 }
 
-/* Restore bottom border radius on the code block itself */
-.package-manager-tabs [data-tab] .codeblock {
-  @apply rounded-b-md;
-}
-
-/* Framework code blocks - single blocks look like regular code blocks */
 .framework-code-block > .codeblock {
   @apply my-4;
 }
 
-/* Tab content - add padding when it's not just a code block */
-[data-tab]:not(:has(> .codeblock:only-child)) {
-  @apply px-4;
+/* Kapa injects invisible reCAPTCHA; keep it from occupying the UI corner. */
+.grecaptcha-badge {
+  display: none !important;
+  pointer-events: none !important;
+}
+
+button[aria-label='Open TanStack Devtools'] {
+  display: none !important;
 }
diff --git a/src/styles/builder.css b/src/styles/builder.css
deleted file mode 100644
index f4164f7f1..000000000
--- a/src/styles/builder.css
+++ /dev/null
@@ -1,134 +0,0 @@
-/*
- * Builder-specific styles for CTA UI components
- * These CSS variables are required by @tanstack/cta-ui-base shadcn components
- * Only loaded on the /builder route via head()
- */
-
-/* Light theme - applied to :root so CTA components can find them */
-:root {
-  --background: oklch(0.985 0.002 247.839);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.871 0.006 286.286);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.871 0.006 286.286);
-}
-
-/* Dark theme */
-.dark {
-  --background: rgb(3, 7, 18);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.141 0.005 285.823);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.141 0.005 285.823);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.274 0.006 286.033);
-  --input: oklch(0.274 0.006 286.033);
-  --ring: oklch(0.442 0.017 285.786);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.13 0.005 285.823);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.274 0.006 286.033);
-  --sidebar-ring: oklch(0.442 0.017 285.786);
-}
-
-/* Builder-specific element styles */
-.builder-root code,
-.builder-root .cm-theme,
-.builder-root .cm-merge-theme {
-  font-size: 16px;
-  font-family:
-    'JetBrains Mono',
-    Menlo,
-    Monaco,
-    Consolas,
-    monospace,
-    Courier New;
-  white-space: pre;
-  -webkit-overflow-scrolling: touch;
-}
-
-.builder-root .cm-changedLine {
-  background-color: oklch(0.27 0.005 285.823) !important;
-}
-
-.builder-root .file-filters {
-  background-color: oklch(0.2 0.005 285.823);
-}
-
-/* Code viewer in builder - ensure proper overflow and sizing */
-.builder-code-viewer {
-  /* Enable proper scrolling in flex container */
-  & .codeblock {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    max-width: 100%;
-  }
-
-  /* The div wrapper around the highlighted code needs to scroll */
-  & .codeblock > div:last-child {
-    flex: 1;
-    overflow: auto;
-    min-height: 0;
-  }
-
-  /* Shiki generates two pre elements (light/dark), both need proper width */
-  & pre.shiki {
-    min-width: fit-content;
-    margin: 0;
-    width: max-content;
-  }
-
-  /* Smaller text size to match docs */
-  & .codeblock code,
-  & .codeblock pre {
-    font-size: 13px;
-    line-height: 1.5;
-  }
-}
diff --git a/src/styles/shop.css b/src/styles/shop.css
new file mode 100644
index 000000000..028b6d473
--- /dev/null
+++ b/src/styles/shop.css
@@ -0,0 +1,169 @@
+/*
+ * Shop theme — scoped to /shop pages via `.shop-scope`.
+ *
+ * Only three things live here:
+ *   1. CSS variable declarations for the light/dark token swap
+ *   2. A `@theme inline` block that exposes those vars to Tailwind so you can
+ *      write `bg-shop-panel`, `text-shop-muted`, `font-shop-display`, etc.
+ *   3. Keyframes used by the live-stock indicator and CTA button.
+ *
+ * Everything else is Tailwind utilities on components — no bespoke class
+ * selectors, no global leakage.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
+
+@theme inline {
+  --color-shop-bg: var(--shop-bg);
+  --color-shop-bg-2: var(--shop-bg-2);
+  --color-shop-panel: var(--shop-panel);
+  --color-shop-panel-2: var(--shop-panel-2);
+  --color-shop-surface: var(--shop-surface);
+  --color-shop-surface-hover: var(--shop-surface-hover);
+  --color-shop-line: var(--shop-line);
+  --color-shop-line-2: var(--shop-line-2);
+  --color-shop-text: var(--shop-text);
+  --color-shop-text-2: var(--shop-text-2);
+  --color-shop-muted: var(--shop-muted);
+  --color-shop-accent: var(--shop-accent);
+  --color-shop-accent-ink: var(--shop-accent-ink);
+  --color-shop-green: #22c993;
+  --color-shop-orange: #ff7a3a;
+
+  --font-shop-display: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+  --font-shop-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* Light mode (default) */
+.shop-scope {
+  --shop-bg: #f6f6ec;
+  --shop-bg-2: #ffffff;
+  --shop-panel: #ffffff;
+  --shop-panel-2: #edecea;
+  --shop-surface: #dcdccb;
+  --shop-surface-hover: #d0cfbe;
+  --shop-line: #e6e3db;
+  --shop-line-2: #d4d1c4;
+  --shop-text: #111111;
+  --shop-text-2: #4d4d49;
+  --shop-muted: #8a8471;
+  --shop-accent: #0891b2;
+  --shop-accent-ink: #ffffff;
+
+  background: var(--shop-bg);
+  color: var(--shop-text);
+  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+}
+
+html.dark .shop-scope {
+  --shop-bg: #0a0a0a;
+  --shop-bg-2: #121212;
+  --shop-panel: #17171b;
+  --shop-panel-2: #1d1d22;
+  --shop-surface: #1c1c1c;
+  --shop-surface-hover: #252525;
+  --shop-line: #26262c;
+  --shop-line-2: #26262c;
+  --shop-text: #e7e7ea;
+  --shop-text-2: #a8a8b0;
+  --shop-muted: #6f6f79;
+  --shop-accent: #36d3f3;
+  --shop-accent-ink: #001217;
+}
+
+@keyframes shop-cta-gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes shop-cta-rotate {
+  from {
+    filter: hue-rotate(0deg) brightness(1);
+  }
+  to {
+    filter: hue-rotate(360deg) brightness(1);
+  }
+}
+
+@keyframes shop-pulse {
+  0% {
+    box-shadow: 0 0 0 0
+      color-mix(in srgb, var(--color-shop-green) 60%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 10px
+      color-mix(in srgb, var(--color-shop-green) 0%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 0
+      color-mix(in srgb, var(--color-shop-green) 0%, transparent);
+  }
+}
+
+.shop-product-drawer-shell {
+  container: shop-product-drawer / inline-size;
+}
+
+.shop-product-drawer-layout {
+  min-height: 100%;
+}
+
+.shop-product-option {
+  width: 100%;
+}
+
+@container shop-product-drawer (min-width: 860px) {
+  .shop-product-drawer-layout {
+    display: grid;
+    grid-template-columns: minmax(360px, 1fr) minmax(420px, 640px);
+    align-items: start;
+  }
+
+  .shop-product-drawer-media {
+    position: sticky;
+    top: 0;
+    min-width: 0;
+    min-height: calc(100svh - 48px);
+    background-color: color-mix(in oklab, var(--shop-bg) 40%, transparent);
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    border-right: 1px solid var(--shop-line);
+  }
+
+  .shop-product-drawer-main-image,
+  .shop-product-drawer-thumbs {
+    background-color: transparent;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  .shop-product-drawer-details {
+    min-width: 0;
+    width: 100%;
+    max-width: 640px;
+    min-height: calc(100svh - 48px);
+  }
+}
+
+@container shop-product-drawer (min-width: 1120px) {
+  .shop-product-drawer-layout {
+    grid-template-columns: minmax(520px, 1fr) minmax(480px, 640px);
+  }
+
+  .shop-product-option {
+    width: auto;
+    min-width: 240px;
+    flex: 1 1 calc(50% - 1.5rem);
+  }
+
+  .shop-product-quantity {
+    flex: 0 0 auto;
+  }
+}
diff --git a/src/tanstack-start.d.ts b/src/tanstack-start.d.ts
index 44ec99b55..226e31c7d 100644
--- a/src/tanstack-start.d.ts
+++ b/src/tanstack-start.d.ts
@@ -7,3 +7,9 @@
 
 // Import generated route tree types if available
 import '../.tanstack-start/server-routes/routeTree.gen'
+
+declare global {
+  const __TANSTACK_ENABLE_IMAGE_TRANSFORMATIONS__: boolean
+  const __TANSTACK_ENABLE_SERVER_BUILDER_GENERATION__: boolean
+  const __TANSTACK_SITE_URL__: string
+}
diff --git a/src/types/gifenc.d.ts b/src/types/gifenc.d.ts
new file mode 100644
index 000000000..fbea577fe
--- /dev/null
+++ b/src/types/gifenc.d.ts
@@ -0,0 +1,27 @@
+declare module 'gifenc' {
+  export type GifPalette = Array<[number, number, number]>
+
+  export type GifEncoder = {
+    bytes: () => Uint8Array
+    finish: () => void
+    writeFrame: (
+      index: Uint8Array,
+      width: number,
+      height: number,
+      options: {
+        delay?: number
+        palette: GifPalette
+      },
+    ) => void
+  }
+
+  export function GIFEncoder(): GifEncoder
+  export function applyPalette(
+    rgba: Uint8Array | Uint8ClampedArray,
+    palette: GifPalette,
+  ): Uint8Array
+  export function quantize(
+    rgba: Uint8Array | Uint8ClampedArray,
+    maxColors: number,
+  ): GifPalette
+}
diff --git a/src/types/host-runtime.d.ts b/src/types/host-runtime.d.ts
new file mode 100644
index 000000000..92a887b09
--- /dev/null
+++ b/src/types/host-runtime.d.ts
@@ -0,0 +1,10 @@
+declare module 'cloudflare:workers' {
+  export const env: Record<string, unknown> & {
+    GITHUB_AUTH_TOKEN?: string
+    GITHUB_CONTENT_CACHE?: unknown
+    HYPERDRIVE?: {
+      connectionString: string
+    }
+    NPM_DOWNLOAD_CACHE?: unknown
+  }
+}
diff --git a/src/types/media-recorder.d.ts b/src/types/media-recorder.d.ts
new file mode 100644
index 000000000..0a69c6c73
--- /dev/null
+++ b/src/types/media-recorder.d.ts
@@ -0,0 +1,27 @@
+type MediaRecorderState = 'inactive' | 'paused' | 'recording'
+
+type MediaRecorderOptions = {
+  mimeType?: string
+}
+
+type MediaRecorderDataAvailableEvent = Event & {
+  data: Blob
+}
+
+type MediaRecorderConstructor = {
+  new (stream: MediaStream, options?: MediaRecorderOptions): MediaRecorder
+  isTypeSupported: (mimeType: string) => boolean
+}
+
+interface MediaRecorder extends EventTarget {
+  ondataavailable: ((event: MediaRecorderDataAvailableEvent) => void) | null
+  onerror: ((event: Event) => void) | null
+  onstop: ((event: Event) => void) | null
+  readonly state: MediaRecorderState
+  start: () => void
+  stop: () => void
+}
+
+interface Window {
+  MediaRecorder?: MediaRecorderConstructor
+}
diff --git a/src/ui/Button.tsx b/src/ui/Button.tsx
index 968ca934a..412ac0688 100644
--- a/src/ui/Button.tsx
+++ b/src/ui/Button.tsx
@@ -30,10 +30,7 @@ type ButtonOwnProps<TElement extends React.ElementType = 'button'> = {
 
 type ButtonProps<TElement extends React.ElementType = 'button'> =
   ButtonOwnProps<TElement> &
-    Omit<
-      React.ComponentPropsWithoutRef<TElement>,
-      keyof ButtonOwnProps<TElement>
-    >
+    Omit<React.ComponentPropsWithRef<TElement>, keyof ButtonOwnProps<TElement>>
 
 type ButtonComponent = <TElement extends React.ElementType = 'button'>(
   props: ButtonProps<TElement>,
@@ -89,7 +86,7 @@ const roundedStyles: Record<ButtonRounded, string> = {
 }
 
 const baseStyles =
-  'inline-flex items-center justify-center gap-2 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed'
+  'inline-flex items-center justify-center gap-2 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900'
 
 function getDefaultSize(variant: ButtonVariant): ButtonSize {
   if (variant === 'icon') return 'icon-md'
@@ -102,16 +99,22 @@ function getDefaultRounded(size: ButtonSize): ButtonRounded {
   return 'lg'
 }
 
-export const Button: ButtonComponent = ({
-  as,
-  children,
-  variant = 'primary',
-  color = 'blue',
-  size,
-  rounded,
-  className,
-  ...props
-}) => {
+type ButtonInnerProps = ButtonOwnProps & Record<string, unknown>
+
+export const Button: ButtonComponent = React.forwardRef<
+  HTMLElement,
+  ButtonInnerProps
+>(function Button(props, ref) {
+  const {
+    as,
+    children,
+    variant = 'primary',
+    color = 'blue',
+    size,
+    rounded,
+    className,
+    ...rest
+  } = props as ButtonOwnProps & Record<string, unknown>
   const Component = as || 'button'
   const resolvedSize = size ?? getDefaultSize(variant)
   const resolvedRounded = rounded ?? getDefaultRounded(resolvedSize)
@@ -126,6 +129,7 @@ export const Button: ButtonComponent = ({
   return React.createElement(
     Component,
     {
+      ref,
       className: twMerge(
         baseStyles,
         variantStyles[variant],
@@ -134,8 +138,8 @@ export const Button: ButtonComponent = ({
         colorStyles,
         className,
       ),
-      ...props,
+      ...rest,
     },
     children,
   )
-}
+}) as unknown as ButtonComponent
diff --git a/src/ui/Icons.tsx b/src/ui/Icons.tsx
new file mode 100644
index 000000000..b03b9f18c
--- /dev/null
+++ b/src/ui/Icons.tsx
@@ -0,0 +1,24 @@
+interface IconProps {
+  className?: string
+}
+
+export const GitHub = ({ className }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 98 96"
+    fill="none"
+    className={className}
+  >
+    <g clipPath="url(#clip0_730_27136)">
+      <path
+        d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 6.69539e-07 48.9043 4.309e-07C21.8203 1.92261e-07 -1.9479e-07 22.1074 -4.3343e-07 49.1914C-6.20631e-07 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_730_27136">
+        <rect width="98" height="96" fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/src/ui/LogoQueryGG.tsx b/src/ui/LogoQueryGG.tsx
index af86c606e..ca7010b7d 100644
--- a/src/ui/LogoQueryGG.tsx
+++ b/src/ui/LogoQueryGG.tsx
@@ -65,7 +65,7 @@ export function LogoQueryGG({ size = 'default', ...props }: LogoQueryGGProps) {
             d="M247.62 22.85l1.45 2.94 3.23.47-2.34 2.28.55 3.23-2.89-1.52-2.9 1.52.55-3.23-2.34-2.28 3.24-.47 1.45-2.94zM220.24 9.19l1.45 2.93 3.24.47-2.35 2.29.56 3.22-2.9-1.52-2.9 1.52.56-3.22-2.35-2.29 3.24-.47 1.45-2.93zm-5.67 9.1l.67 1.36 1.5.21-1.09 1.06.26 1.49-1.34-.7-1.34.7.26-1.49-1.09-1.06 1.5-.21.67-1.36zm4.69 5.47l.74 1.5 1.67.25-1.21 1.17.29 1.66-1.49-.78-1.49.78.29-1.66-1.21-1.17 1.67-.25.74-1.5zm25.5-7.34l.67 1.36 1.5.22-1.08 1.05.25 1.5-1.34-.71-1.33.71.25-1.5L242.6 18l1.5-.22.66-1.36z"
           />
           <path
-            d="M69.17 109.78c.55-.38.94-.88 1.19-1.49.56 0 .99.34 1.28 1.03.09.2.14.49.14.88s-.13.83-.39 1.31c-.26.49-.6.91-1.03 1.28-.93.75-1.99 1.12-3.17 1.12s-2.09-.16-2.9-.48c-1.29-.5-2.74-1.24-4.34-2.2-1.6-.97-2.81-1.64-3.64-2.03s-1.61-.7-2.34-.92c-1.26-.4-2.59-.59-3.97-.59-2.73 0-4.31 1.71-4.75 5.14-.84 0-1.58-.31-2.24-.94-.59-.58-.89-1.25-.89-2.01 0-2 1.11-3.33 3.33-4.02-3.76-1.63-6.37-4.67-7.84-9.11-.49-1.45-.81-2.85-.96-4.2s-.42-2.35-.79-2.98-.9-1.12-1.59-1.45c1.33-.62 2.11-1.91 2.34-3.85.24-1.94.77-3.76 1.61-5.45.84-1.69 1.9-3.14 3.2-4.34 2.73-2.53 6.01-3.79 9.85-3.79s7.21 1.17 9.8 3.52c2.7 2.44 4.28 5.85 4.75 10.23.2 1.83.97 3.05 2.33 3.68-1.32.66-2.09 1.92-2.31 3.8-.21 1.88-.56 3.58-1.05 5.09-.49 1.51-1.13 2.88-1.92 4.1-1.6 2.48-3.77 4.19-6.51 5.12.44.12.91.27 1.39.43l1.46.53c.72.27 1.39.51 2.01.71 1.29 0 2.24-.43 2.83-1.3.35.11.66.29.94.55s.41.52.41.78-.02.48-.07.66c.56-.11 1.02-.34 1.38-.71.36-.37.59-.78.7-1.23.46.09.83.28 1.12.57.49.52.73.98.73 1.39 0 .53-.03.93-.09 1.19z"
+            d="M69.17 109.78c.55-.38.94-.88 1.19-1.49.56 0 .99.34 1.28 1.03.09.2.14.49.14.88s-.13.83-.39 1.31c-.26.49-.6.91-1.03 1.28-.93.75-1.99 1.12-3.17 1.12s-2.09-.16-2.9-.48c-1.29-.5-2.74-1.24-4.34-2.2-1.6-.97-2.81-1.64-3.64-2.03s-1.61-.7-2.34-.92c-1.26-.4-2.59-.59-3.97-.59-2.73 0-4.31 1.71-4.75 5.14-.84 0-1.58-.31-2.24-.94-.59-.58-.89-1.25-.89-2.01 0-2 1.11-3.33 3.33-4.02-3.76-1.63-6.37-4.67-7.84-9.11-.49-1.45-.81-2.85-.96-4.2s-.42-2.35-.79-2.98-.9-1.12-1.59-1.45c1.33-.62 2.11-1.91 2.34-3.85.24-1.94.77-3.76 1.61-5.45.84-1.69 1.9-3.14 3.2-4.34 2.73-2.53 6.01-3.79 9.85-3.79s7.21 1.17 9.8 3.52c2.7 2.44 4.28 5.85 4.75 10.23.2 1.83.97 3.05 2.33 3.68-1.32.66-2.09 1.92-2.31 3.8-.21 1.88-.56 3.58-1.05 5.09-.49 1.51-1.13 2.88-1.92 4.1-1.6 2.48-3.77 4.19-6.51 5.12.44.12.91.27 1.39.43l1.46.53c.72.27 1.39.51 2.01.71 1.29 0 2.24-.43 2.83-1.3.35.11.66.29.94.55s.41.52.41.78-.02.48-.07.66c.56-.11 1.02-.34 1.38-.71.36-.37.59-.78.7-1.23.46.09.83.28 1.12.57.49.52.73.98.73 1.39 0 .53-.03.93-.09 1.19zm-27.39-9.53c.23-.09.34-.25.34-.48 0-.33-.16-.86-.48-1.58-.81-1.84-1.21-5.21-1.21-10.1 0-3.56.43-6.59 1.28-9.09.11-.38.16-.67.16-.87s-.1-.33-.3-.39c-.72.9-1.23 1.79-1.53 2.67-.56 1.61-1.01 3.8-1.35 6.56-.05.4-.5.77-1.35 1.12.85.38 1.3.77 1.35 1.17.55 4.72 1.25 7.87 2.1 9.46.29.56.62 1.07.98 1.53zm6.9-12.15c-1.68.81-2.51 2.12-2.51 3.95v6.79c0 2.48 1.03 4.07 3.08 4.77.61.21 1.27.32 1.99.32s1.37-.11 1.98-.32c.6-.21 1.12-.53 1.57-.96.91-.88 1.37-2.15 1.37-3.81v-6.79c0-1.83-.82-3.14-2.47-3.95 1.64-.76 2.47-1.99 2.47-3.68v-5.46c0-1.69-.5-3.01-1.48-3.95-.93-.87-2.08-1.3-3.45-1.3-2.33 0-3.88.97-4.66 2.92-.26.66-.39 1.43-.39 2.33v5.46c0 1.72.84 2.95 2.51 3.68zm9.57-10.35c.43 1.28.64 3.48.64 6.6 0 1.77-.08 2.73-.23 2.9-.15.17-.3.3-.46.41-.27.18-.57.33-.89.43.91.41 1.39.81 1.44 1.19.15 1.49.23 2.78.23 3.87s-.02 1.96-.05 2.63c-.03.66-.08 1.28-.14 1.84-.12 1.2-.27 2.08-.46 2.63 1.19-.37 1.85-2.12 1.99-5.28.08-1.77.11-3.73.11-5.91s-.02-3.8-.07-4.89-.11-1.98-.21-2.68c-.18-1.61-.56-2.73-1.14-3.36-.17-.18-.43-.31-.78-.39zm41.17 21.13c.27.67.83 1.31 1.67 1.92-.53.21-1.2.72-2 1.51s-1.69 1.5-2.68 2.12c-.99.62-1.97 1.13-2.95 1.51-1.77.7-3.67 1.05-5.72 1.05s-3.91-.24-5.57-.73c-1.67-.49-3.05-1.15-4.15-1.99-2.15-1.66-3.22-3.87-3.22-6.62v-6.33c0-.7-.14-1.22-.43-1.55-.46-.56-1.24-1.12-2.35-1.67 1.04-.47 1.71-.89 2.01-1.26.52-.59.78-1.26.78-2.01v-9.64c-.52-1.17-1.45-1.76-2.81-1.76-.52 0-.94.13-1.28.39-.17-.23-.25-.49-.25-.79s.09-.58.26-.83c.17-.26.41-.48.72-.66.7-.43 1.5-.64 2.41-.64s1.74.25 2.5.75c.79-.5 1.67-.75 2.65-.75s1.86.25 2.65.75c.76-.5 1.48-.75 2.15-.75s1.22.06 1.64.17.8.27 1.12.47c.66.4.98.89.98 1.49 0 .3-.08.57-.25.8-.33-.26-.76-.39-1.28-.39-1.36 0-2.29.59-2.81 1.76v9.64c0 .75.16 1.3.48 1.67.5.59 1.27 1.13 2.31 1.6-1.11.55-1.82 1-2.12 1.35-.44.55-.66 1.17-.66 1.87v6.37c0 1.84.69 3.36 2.08 4.55 1.28 1.08 2.73 1.62 4.36 1.62s3.22-.53 4.55-1.58c1.36-1.07 2.03-2.36 2.03-3.88v-7.29c0-.67-.14-1.17-.43-1.49-.44-.47-1.23-.98-2.35-1.53 1.05-.52 1.73-.94 2.03-1.26.5-.53.75-1.13.75-1.78V74.89c-.65-.97-1.45-1.46-2.4-1.46s-1.64.13-2.08.39c-.17-.27-.25-.65-.25-1.13s.24-.9.71-1.26 1.09-.54 1.85-.54 1.44.2 2.03.59c.53-.4 1.15-.59 1.84-.59s1.31.21 1.84.62c.59-.41 1.25-.62 1.96-.62s1.29.19 1.72.56c.43.37.65.8.65 1.29s-.08.85-.23 1.07c-.44-.26-1.15-.39-2.11-.39s-1.75.49-2.34 1.46v10.17c0 .67.14 1.16.43 1.46.46.47 1.32 1 2.58 1.58-1.34.66-2.14 1.11-2.4 1.37-.41.41-.62.96-.62 1.64v7.77zm-21.25 1.37c.14-.82.21-3.46.21-7.92s0-7.18-.01-8.18-.02-1.8-.03-2.41c-.05-1.8-.22-2.88-.51-3.25s-.58-.62-.83-.74c0 5.3-.09 8.32-.27 9.05-.21.61-.73 1.04-1.55 1.3.91.32 1.43.71 1.55 1.17.18.73.27 2.31.27 4.73s.03 3.85.1 4.29c.07.44.16.8.29 1.07.2.49.46.78.8.89zm36.67 6.52c-1.01 0-1.9-.24-2.67-.73-.78.49-1.5.73-2.16.73s-1.21-.06-1.63-.17c-.43-.11-.8-.27-1.12-.47-.65-.4-.98-.89-.98-1.49 0-.3.08-.57.25-.8.33.26.76.39 1.28.39 1.36 0 2.29-.58 2.81-1.74V91.32c0-.7-.14-1.22-.43-1.55-.46-.56-1.24-1.12-2.35-1.67 1.04-.47 1.71-.89 2.01-1.26.52-.59.78-1.26.78-2.01v-9.64c-.52-1.17-1.45-1.76-2.81-1.76-.52 0-.94.13-1.28.39-.17-.23-.25-.49-.25-.79s.09-.58.26-.83c.18-.26.42-.48.72-.66.7-.43 1.5-.64 2.41-.64s1.74.25 2.5.75c.79-.5 1.7-.75 2.72-.75s1.95.3 2.79.89c1.61-.59 3.48-.89 5.6-.89 1.57 0 2.91.15 4.02.46l2.03.55c.24.06.48.09.71.09.43 0 .64-.3.64-.91 0-.15-.05-.41-.16-.78.43-.08.97-.11 1.62-.11s1.21.22 1.67.65c.46.43.68 1.06.68 1.87s-.14 1.41-.43 1.79c.41.61.62 1.35.62 2.23s-.3 1.61-.89 2.21c.18.46.27.9.27 1.34s-.07.83-.22 1.19-.32.66-.54.9c-.43.44-.86.66-1.3.66-.64 0-1.22-.14-1.74-.41.18-.37.27-.91.27-1.62 0-1.67-.42-3.14-1.26-4.41-1.14-1.74-2.86-2.6-5.14-2.6-1.16 0-2.2.28-3.14.85s-1.6 1.37-1.98 2.42v8.84c.53.33 1.03.5 1.5.5s.81 0 1.05-.02.48-.05.72-.09c.62-.09 1.1-.21 1.44-.37.64-.3.96-1.05.96-2.24 0-.67-.16-1.19-.48-1.55.3-.21.68-.32 1.14-.32 1.02 0 1.76.41 2.22 1.23.17.29.25.61.25.96s-.09.78-.27 1.3c.62.72.94 1.57.94 2.55s-.31 1.83-.94 2.55c.18.52.27.99.27 1.41s-.08.82-.25 1.2c-.17.38-.37.68-.62.91-.47.43-1.01.64-1.6.64-.43 0-.81-.12-1.14-.37.32-.53.48-1.16.48-1.87 0-1.42-.39-2.29-1.17-2.63-.69-.27-1.47-.41-2.35-.41s-1.6.16-2.15.48v11.42c.88 1.55 2.59 2.33 5.12 2.33 2.86 0 4.81-.88 5.85-2.65 1.2-2.03 1.8-4.2 1.8-6.51 0-.67-.06-1.19-.18-1.55.38-.38.78-.57 1.19-.57s.72.06.94.17c.21.11.4.25.57.42.37.41.55.83.55 1.26l-.14 1.12c0 .29.08.53.23.71.3.32.46.62.46.9s-.09.62-.27 1.02c.35.2.67.49.95.88.28.39.42.79.42 1.2 0 .87-.37 1.64-1.1 2.33.32.46.48 1.12.48 1.98s-.25 1.59-.74 2.19c-.5.6-1.14.9-1.93.9-.43 0-.87-.04-1.32-.14.06-.33.09-.67.09-1 0-.7-.32-1.05-.96-1.05-.72 0-1.43.14-2.15.43-1.69.69-3.61 1.03-5.77 1.03s-3.99-.28-5.49-.85c-.79.56-1.71.85-2.76.85zm-2.03-6.51c.76-.29 1.18-1.29 1.26-2.99.09-1.71.14-4.07.14-7.08s0-5.02-.01-6.02-.02-1.8-.03-2.41c-.05-1.8-.22-2.88-.51-3.25-.3-.37-.58-.62-.83-.74 0 5.3-.09 8.32-.27 9.05-.21.61-.73 1.04-1.55 1.3.91.32 1.43.71 1.55 1.17.18.73.27 3.4.27 8.02v2.97zm5.76-.23s0 .08.02.11l-.02-.11zm31.81 6.01c-.78.49-1.66.73-2.65.73s-1.87-.24-2.65-.73c-.78.49-1.5.73-2.16.73s-1.21-.06-1.63-.17c-.43-.11-.8-.27-1.12-.47-.65-.4-.98-.89-.98-1.49 0-.3.08-.57.25-.8.33.26.76.39 1.28.39 1.36 0 2.29-.58 2.81-1.74V91.32c0-.7-.14-1.22-.43-1.55-.46-.56-1.24-1.12-2.35-1.67 1.04-.47 1.71-.89 2.01-1.26.52-.59.78-1.26.78-2.01v-9.64c-.52-1.17-1.45-1.76-2.81-1.76-.52 0-.94.13-1.28.39-.17-.23-.25-.49-.25-.79s.09-.58.26-.83c.18-.26.42-.48.72-.66.7-.43 1.5-.64 2.41-.64s1.74.25 2.5.75c.79-.5 1.67-.75 2.65-.75s1.86.25 2.65.75c1.72-.65 3.63-.98 5.72-.98s3.85.19 5.27.57c1.42.38 2.63.92 3.65 1.62 2.06 1.42 3.34 3.39 3.84 5.92.2 1.13.92 1.98 2.17 2.56-1.19.67-1.96 1.74-2.33 3.2-.75 3.02-2.61 4.9-5.6 5.64 1.54.41 2.79 1.26 3.77 2.54 1.01 1.33 1.51 2.89 1.51 4.68v2.28c0 2.19.71 3.61 2.12 4.25.43.2.89.3 1.39.3s.92-.13 1.26-.39c.17.23.25.49.25.79s-.08.57-.23.83c-.15.26-.36.48-.62.66-.55.43-1.19.64-1.92.64s-1.45-.2-2.15-.59c-1.28.7-2.47.77-3.59.21-.43.26-.88.39-1.35.39s-.92-.11-1.36-.32c-.43-.21-.82-.56-1.15-1.05-.72-1.05-1.07-2.67-1.07-4.84v-1.69c0-3.52-1.01-5.8-3.02-6.85-.67-.35-1.46-.53-2.35-.53h-2.67v11.12c.41 1.08 1.2 1.62 2.35 1.62.52 0 .94-.13 1.28-.39.17.23.25.56.25 1s-.24.87-.72 1.29c-.48.42-1.2.63-2.16.63s-1.81-.24-2.56-.73zm-4.66-5.78c.76-.29 1.18-1.29 1.26-2.99.09-1.71.14-4.07.14-7.08s0-5.02-.01-6.02-.02-1.8-.03-2.41c-.05-1.8-.22-2.88-.51-3.25-.3-.37-.58-.62-.83-.74 0 5.3-.09 8.32-.27 9.05-.21.61-.73 1.04-1.55 1.3.91.32 1.43.71 1.55 1.17.18.73.27 3.4.27 8.02v2.97zm10.6-26.54c-2.92 0-4.39 1.13-4.39 3.4v9.34c0 .79.31 1.33.94 1.6s1.47.39 2.64.39 1.98-.06 2.44-.19c.46-.13.86-.35 1.2-.67.68-.65 1.03-1.75 1.03-3.29v-6.67c0-1.9-.79-3.12-2.38-3.66-.47-.17-.97-.25-1.48-.25zm5.16 20.29c.61.69.91 1.52.91 2.51v3.01c0 2.53.5 3.88 1.51 4.04.27.05.54.04.8-.02-.55-.85-.82-1.75-.82-2.7v-3.2c0-1.2-.17-2.06-.5-2.56-.58-.85-1.21-1.22-1.9-1.1zm.23-18.82c.47 1.07.71 2.77.71 5.12 0 4.04-.19 6.45-.57 7.24.84-.17 1.44-1.29 1.8-3.36l.18-.94c.17-.99.65-1.62 1.46-1.9-.59-.2-.97-.43-1.14-.71-.18-.32-.35-.86-.49-1.63-.15-.77-.29-1.39-.45-1.86-.15-.47-.31-.85-.48-1.12-.29-.49-.63-.77-1.03-.84zm29.98 30.85c-.78.49-1.66.73-2.65.73s-1.87-.24-2.65-.73c-.78.49-1.5.73-2.16.73s-1.22-.06-1.67-.17a4.62 4.62 0 01-1.2-.47c-.73-.4-1.1-.89-1.1-1.49 0-.3.08-.57.25-.8.33.26.78.39 1.34.39s1.12-.14 1.69-.43c.57-.29 1-.74 1.29-1.35v-4.5c0-.7-.14-1.22-.41-1.55-.49-.59-1.28-1.16-2.38-1.69 1.02-.47 1.69-.88 2.01-1.23.52-.59.78-1.26.78-2.01v-.82l-9.18-15.9c-.88-.79-1.67-1.19-2.35-1.19s-1.23.13-1.62.39c-.17-.12-.25-.35-.25-.69s.05-.64.16-.92.27-.53.5-.74c.49-.46 1.2-.69 2.12-.69s1.75.27 2.47.8c.76-.53 1.66-.8 2.71-.8s1.9.26 2.57.78c.81-.52 1.56-.78 2.26-.78s1.26.05 1.69.15c.43.1.8.25 1.12.45.69.4 1.04.94 1.07 1.64 0 .43-.08.69-.25.8-.41-.26-.82-.39-1.23-.39-.88 0-1.6.16-2.15.48l6.83 13.11 6.49-13.14c-.62-.38-1.34-.57-2.16-.57s-1.44.13-1.88.39c-.15-.23-.23-.59-.23-1.07s.21-.92.62-1.29 1-.56 1.76-.56 1.42.2 1.96.59c.49-.4 1.08-.59 1.78-.59s1.29.17 1.76.5c.67-.33 1.34-.5 2.01-.5s1.21.22 1.61.65c.4.43.6.99.6 1.68 0 .35-.08.59-.25.71-.4-.26-.88-.39-1.46-.39-1 0-1.9.27-2.67.82l-8 15.83v1.26c0 .75.16 1.3.48 1.67.52.58 1.29 1.1 2.31 1.58-1.1.53-1.8.98-2.1 1.35-.46.56-.68 1.2-.68 1.9v4.5c.27.61.7 1.06 1.27 1.35s1.14.43 1.7.43 1.01-.13 1.35-.39c.17.23.25.49.25.79s-.1.57-.3.83c-.2.26-.46.48-.8.66-.76.43-1.6.64-2.5.64s-1.75-.24-2.52-.73zm-4.66-5.78c.81-.3 1.25-1.5 1.33-3.59.01-.64.02-1.29.02-1.96v-3.82c0-.73-.14-1.33-.41-1.8l-4.68-8.48c-.65-1.14-1.13-1.85-1.42-2.12-.46-.43-1-.67-1.64-.73l6.85 12.7v1.12c0 .9-.06 1.52-.18 1.85-.18.58-.75 1.01-1.69 1.3 1.02.38 1.6.84 1.74 1.39.11.43.16.92.16 1.5s-.01 1.07-.03 1.5c-.02.43-.03.81-.03 1.14z"
             fill="#231f20"
             className="fill-gray-800 dark:fill-gray-100"
           />
@@ -83,10 +83,11 @@ export function LogoQueryGG({ size = 'default', ...props }: LogoQueryGGProps) {
             ry={3.84}
           />
           <g fill="#231f20" className="fill-gray-800 dark:fill-gray-100">
-            <path d="M211.14 91.87c.15-.09.25-.17.29-.23.04-.06.07-.11.09-.16.07-.12.16-.22.29-.29.12-.07.26-.1.41-.1.3 0 .52.13.66.38.11.2.24.33.38.39-.04.02-.08.05-.11.07-.04.02-.07.04-.1.06-.06.05-.12.13-.19.24s-.15.2-.27.28c-.11.08-.24.12-.38.12s-.27-.04-.4-.12a.757.757 0 01-.29-.3c-.08-.13-.15-.22-.21-.26a.947.947 0 00-.17-.09zm.9.25s-.03-.06-.04-.1-.01-.11-.01-.22.05-.24.15-.39c-.06 0-.11.01-.16.03-.05.02-.09.06-.12.1s-.06.08-.08.11-.03.05-.05.08c-.05.08-.09.12-.13.14.04.02.08.06.12.12.04.05.08.11.13.17.07.09.17.13.29.13-.02-.03-.03-.06-.05-.08-.02-.03-.03-.05-.05-.08z" />
+            <path d="M211.14 91.87c.15-.09.25-.17.29-.23.04-.06.07-.11.09-.16.07-.12.16-.22.29-.29.12-.07.26-.1.41-.1.3 0 .52.13.66.38.11.2.24.33.38.39-.04.02-.08.05-.11.07-.04.02-.07.04-.1.06-.06.05-.12.13-.19.24s-.15.2-.27.28c-.11.08-.24.12-.38.12s-.27-.04-.4-.12a.757.757 0 01-.29-.3c-.08-.13-.15-.22-.21-.26a.947.947 0 00-.17-.09zm.9.25s-.03-.06-.04-.1-.01-.11-.01-.22.05-.24.15-.39c-.06 0-.11.01-.16.03-.05.02-.09.06-.12.1s-.06.08-.08.11-.03.05-.05.08c-.05.08-.09.12-.13.14.04.02.08.06.12.12.04.05.08.11.13.17.07.09.17.13.29.13-.02-.03-.03-.06-.05-.08-.02-.03-.03-.05-.05-.08zm2.41.57c-.2-.18-.29-.4-.29-.67 0-.39.23-.72.7-.97-.31-.21-.53-.55-.67-1.01-.05-.14-.09-.24-.14-.29a1.05 1.05 0 00-.35-.24.76.76 0 00.31-.24c.07-.1.13-.22.19-.38.05-.16.13-.31.22-.45.1-.14.22-.27.37-.38.33-.23.76-.35 1.29-.35.17 0 .34.02.52.05.04-.29.17-.54.39-.75.22-.21.48-.31.78-.31.35 0 .64.09.88.27.13.1.26.13.39.11.01.22-.07.36-.25.42-.03.36-.19.55-.47.55-.11 0-.18 0-.21-.02.04-.04.06-.08.06-.14s-.02-.1-.07-.14c-.06.11-.18.16-.38.16-.11 0-.19-.05-.25-.15.1-.03.18-.08.24-.15.06-.07.09-.13.09-.18 0-.15-.08-.22-.24-.22-.3 0-.48.24-.53.71.49.21.81.54.94.99.09.3.25.51.49.62-.21.11-.35.22-.42.35-.03.05-.05.11-.07.18-.15.46-.38.8-.69 1.02s-.71.33-1.2.33c-.31 0-.58-.04-.81-.11-.09.06-.13.12-.13.19s.01.13.04.17c.03.05.08.09.15.13.14.07.4.14.79.19.18.04.36-.08.54-.34a.6.6 0 00.09.31c.05.07.11.11.17.12.75.11 1.23.35 1.45.73.08.13.11.29.11.49s-.06.39-.19.58c-.13.19-.3.35-.52.48-.45.27-1 .41-1.65.41-.77 0-1.35-.13-1.76-.38-.35-.22-.52-.5-.52-.84 0-.23.12-.44.34-.64.08-.06.16-.12.26-.17zm.39-2.08c.05-.04.08-.09.08-.14 0-.07 0-.14-.03-.2a2.738 2.738 0 010-1.53c.02-.06.03-.12.03-.15v-.1s-.01-.04-.03-.06c-.11.14-.19.29-.24.46s-.09.33-.12.46c-.01.04-.09.09-.23.15.14.07.22.12.23.16l.08.34c.07.29.15.49.23.61zm.01 2.34c-.19.08-.29.24-.29.47 0 .18.14.35.42.5.31.17.71.25 1.2.25.61 0 1-.1 1.18-.31.05-.06.08-.12.08-.18s-.03-.12-.09-.17a.674.674 0 00-.24-.12c-.14-.05-.37-.09-.68-.13-.15-.02-.33.09-.55.33 0-.15-.03-.26-.08-.33s-.1-.1-.15-.11c-.31-.04-.58-.11-.81-.21zm-.22-.89s-.04.06-.04.11c.01.29.43.51 1.25.66.09.02.16.12.2.31.01-.06.07-.11.16-.15.09-.04.16-.06.19-.05.41.05.68.09.83.14.25.08.44.19.55.35.03-.04.05-.09.05-.15s-.03-.12-.09-.18-.16-.11-.29-.16c-.23-.08-.55-.15-.94-.19-.4-.05-.68-.09-.84-.12-.16-.04-.31-.08-.44-.13-.29-.12-.49-.26-.59-.43zm1.06-1.42c.06.08.12.14.18.16.06.02.13.04.21.04s.15-.01.21-.04a.29.29 0 00.15-.12c.08-.11.12-.3.12-.56V89c0-.26-.03-.44-.09-.52-.06-.08-.12-.14-.18-.16-.06-.02-.13-.03-.21-.03s-.15.01-.21.03a.29.29 0 00-.15.12c-.08.11-.12.3-.12.56v1.12c0 .26.03.44.09.52zm1.26-.03c.12-.04.2-.18.21-.4.02-.21.03-.45.03-.71 0-.41-.01-.67-.03-.78-.03-.15-.1-.25-.21-.3v2.19z" />
+            <path d="M219.42 92.69c-.2-.18-.29-.4-.29-.67 0-.39.23-.72.7-.97-.31-.21-.53-.55-.67-1.01-.05-.14-.09-.24-.14-.29a1.05 1.05 0 00-.35-.24.76.76 0 00.31-.24c.07-.1.13-.22.19-.38.05-.16.13-.31.22-.45.1-.14.22-.27.37-.38.33-.23.76-.35 1.29-.35.17 0 .34.02.52.05.04-.29.17-.54.39-.75.22-.21.48-.31.78-.31.35 0 .64.09.88.27.13.1.26.13.39.11.01.22-.07.36-.25.42-.03.36-.19.55-.47.55-.11 0-.18 0-.21-.02.04-.04.06-.08.06-.14s-.02-.1-.07-.14c-.06.11-.18.16-.38.16-.11 0-.19-.05-.25-.15.1-.03.18-.08.24-.15.06-.07.09-.13.09-.18 0-.15-.08-.22-.24-.22-.3 0-.48.24-.53.71.49.21.81.54.94.99.09.3.25.51.49.62-.21.11-.35.22-.42.35-.03.05-.05.11-.07.18-.15.46-.38.8-.69 1.02s-.71.33-1.2.33c-.31 0-.58-.04-.81-.11-.09.06-.13.12-.13.19s.01.13.04.17c.03.05.08.09.15.13.14.07.4.14.79.19.18.04.36-.08.54-.34a.6.6 0 00.09.31c.05.07.11.11.17.12.75.11 1.23.35 1.45.73.08.13.11.29.11.49s-.06.39-.19.58c-.13.19-.3.35-.52.48-.45.27-1 .41-1.65.41-.77 0-1.35-.13-1.76-.38-.35-.22-.52-.5-.52-.84 0-.23.12-.44.34-.64.08-.06.16-.12.26-.17zm.39-2.08c.05-.04.08-.09.08-.14 0-.07 0-.14-.03-.2a2.738 2.738 0 010-1.53c.02-.06.03-.12.03-.15v-.1s-.01-.04-.03-.06c-.11.14-.19.29-.24.46s-.09.33-.12.46c-.01.04-.09.09-.23.15.14.07.22.12.23.16l.08.34c.07.29.15.49.23.61zm.01 2.34c-.19.08-.29.24-.29.47 0 .18.14.35.42.5.31.17.71.25 1.2.25.61 0 1-.1 1.18-.31.05-.06.08-.12.08-.18s-.03-.12-.09-.17a.674.674 0 00-.24-.12c-.14-.05-.37-.09-.68-.13-.15-.02-.33.09-.55.33 0-.15-.03-.26-.08-.33s-.1-.1-.15-.11c-.31-.04-.58-.11-.81-.21zm-.22-.89s-.04.06-.04.11c.01.29.43.51 1.25.66.09.02.16.12.2.31.01-.06.07-.11.16-.15.09-.04.16-.06.19-.05.41.05.68.09.83.14.25.08.44.19.55.35.03-.04.05-.09.05-.15s-.03-.12-.09-.18-.16-.11-.29-.16c-.23-.08-.55-.15-.94-.19-.4-.05-.68-.09-.84-.12-.16-.04-.31-.08-.44-.13-.29-.12-.49-.26-.59-.43zm1.06-1.42c.06.08.12.14.18.16.06.02.13.04.21.04s.15-.01.21-.04a.29.29 0 00.15-.12c.08-.11.12-.3.12-.56V89c0-.26-.03-.44-.09-.52-.06-.08-.12-.14-.18-.16-.06-.02-.13-.03-.21-.03s-.15.01-.21.03a.29.29 0 00-.15.12c-.08.11-.12.3-.12.56v1.12c0 .26.03.44.09.52zm1.26-.03c.12-.04.2-.18.21-.4.02-.21.03-.45.03-.71 0-.41-.01-.67-.03-.78-.03-.15-.1-.25-.21-.3v2.19z" />
           </g>
           <path
-            d="M88.92 33.04V32h6.83v1.04h-6.83zm2.84 7.36v-8.15h1.15v8.15h-1.15zm5.35-.01v-8.4h1.14v8.4h-1.14zm.77-3.82v-1.04h4.91v1.04h-4.91zm4.64 3.82v-8.4h1.14v8.4h-1.14zm3.14 0v-8.4h1.14v8.4h-1.14zm.77-7.36v-1.04h4.75v1.04h-4.75zm0 3.57v-1h4.42v1h-4.42zm0 3.79v-1.04h4.81v1.04h-4.81z"
+            d="M88.92 33.04V32h6.83v1.04h-6.83zm2.84 7.36v-8.15h1.15v8.15h-1.15zm5.35-.01v-8.4h1.14v8.4h-1.14zm.77-3.82v-1.04h4.91v1.04h-4.91zm4.64 3.82v-8.4h1.14v8.4h-1.14zm3.14 0v-8.4h1.14v8.4h-1.14zm.77-7.36v-1.04h4.75v1.04h-4.75zm0 3.57v-1h4.42v1h-4.42zm0 3.79v-1.04h4.81v1.04h-4.81zm12.69.12c-.6 0-1.15-.11-1.67-.33-.52-.22-.97-.53-1.36-.93-.39-.4-.69-.86-.91-1.38s-.33-1.08-.33-1.68.11-1.17.33-1.69.52-.98.9-1.37c.38-.39.83-.7 1.34-.92a4.17 4.17 0 011.66-.33 4.17 4.17 0 013.01 1.25c.39.4.69.86.91 1.38.22.52.33 1.09.33 1.69s-.11 1.16-.33 1.68c-.22.52-.52.98-.9 1.38a4.12 4.12 0 01-2.99 1.25zm-.02-1.09c.6 0 1.13-.14 1.58-.42.46-.28.82-.66 1.08-1.15.26-.49.39-1.05.39-1.68 0-.47-.08-.9-.22-1.29-.15-.39-.36-.73-.63-1.02s-.6-.51-.97-.67-.78-.24-1.23-.24c-.6 0-1.12.14-1.58.41-.46.27-.81.65-1.08 1.14-.26.48-.39 1.04-.39 1.67 0 .47.07.9.22 1.3s.36.74.63 1.03.59.51.97.67c.38.16.78.24 1.23.24zm5.8.97v-8.4h1.14v8.4h-1.14zm.77-7.36v-1.04h4.58v1.04h-4.58zm0 3.67v-1.04h4.38v1.04h-4.38zm6.08 3.69v-8.4h1.14v8.4h-1.14zm.77-7.36v-1.04h4.58v1.04h-4.58zm0 3.67v-1.04h4.38v1.04h-4.38zm6.08 3.69v-8.4h1.14v8.4h-1.14zm6.93.12c-.61 0-1.17-.11-1.68-.33-.52-.22-.97-.53-1.35-.92-.38-.4-.68-.86-.89-1.38-.21-.52-.31-1.08-.31-1.68s.1-1.17.31-1.69.5-.98.88-1.37c.38-.39.83-.7 1.34-.92.52-.22 1.07-.33 1.67-.33.67 0 1.25.11 1.75.34s.94.53 1.33.92l-.79.79c-.27-.3-.59-.53-.98-.7-.39-.17-.83-.25-1.32-.25a2.96 2.96 0 00-2.18.91c-.28.29-.49.63-.63 1.03s-.22.83-.22 1.29.07.9.22 1.29.36.74.63 1.03.6.51.97.67.78.24 1.22.24c.52 0 .98-.09 1.37-.26.39-.17.71-.41.98-.71l.79.79c-.39.4-.84.71-1.36.93-.52.23-1.11.34-1.76.34zm4.51-.12v-8.4h1.14v8.4h-1.14zm2.49 0l3.45-8.4h.82l3.42 8.4h-1.23l-2.83-7.1h.44l-2.84 7.1h-1.22zm1.64-1.9v-.99h4.42v.99h-4.42zm7.31 1.9v-8.4h1.14v8.4h-1.14zm.77 0v-1.04h4.5v1.04h-4.5zM63.96 54.91v-8.4h1.14v8.4h-1.14zm.76-3.65v-.96h2.27c.49 0 .87-.12 1.13-.38.26-.25.39-.59.39-1.02 0-.4-.13-.74-.39-1-.26-.27-.63-.4-1.12-.4h-2.29v-.99h2.32c.53 0 1 .1 1.39.31.4.21.7.49.91.84.21.35.32.76.32 1.22s-.11.89-.32 1.25c-.21.35-.52.63-.91.83-.4.2-.86.3-1.39.3h-2.32zm4.08 3.65l-3.05-3.76 1.08-.38 3.41 4.14H68.8zm2.61 0v-8.4h1.14v8.4h-1.14zm.77-7.36v-1.04h4.75v1.04h-4.75zm0 3.57v-1h4.42v1h-4.42zm0 3.79v-1.04h4.81v1.04h-4.81zm5.74 0l3.45-8.4h.82l3.42 8.4h-1.23l-2.83-7.1h.44l-2.84 7.1h-1.22zm1.64-1.9v-.99h4.42v.99h-4.42zm10.59 2.02c-.61 0-1.17-.11-1.68-.33-.52-.22-.97-.53-1.35-.92-.38-.4-.68-.86-.89-1.38-.21-.52-.31-1.08-.31-1.68s.1-1.17.31-1.69.5-.98.88-1.37c.38-.39.83-.7 1.34-.92.52-.22 1.07-.33 1.67-.33.67 0 1.25.11 1.75.34s.94.53 1.33.92l-.79.79c-.27-.3-.59-.53-.98-.7-.39-.17-.83-.25-1.32-.25a2.96 2.96 0 00-2.18.91c-.28.29-.49.63-.63 1.03s-.22.83-.22 1.29.07.9.22 1.29.36.74.63 1.03.6.51.97.67.78.24 1.22.24c.52 0 .98-.09 1.37-.26.39-.17.71-.41.98-.71l.79.79c-.39.4-.84.71-1.36.93-.52.23-1.11.34-1.76.34zm3.69-7.48v-1.04h6.83v1.04h-6.83zm2.84 7.36v-8.15h1.15v8.15h-1.15zm11.49.12c-.6 0-1.15-.11-1.67-.33-.52-.22-.97-.53-1.35-.93-.39-.4-.69-.86-.91-1.38s-.33-1.08-.33-1.68.11-1.17.33-1.69.52-.98.9-1.37c.38-.39.83-.7 1.34-.92a4.17 4.17 0 011.66-.33 4.17 4.17 0 013.91 2.63c.21.52.32 1.09.32 1.69s-.11 1.16-.32 1.68c-.21.52-.51.98-.89 1.38a4.12 4.12 0 01-2.99 1.25zm-.02-1.09c.6 0 1.12-.14 1.58-.42.46-.28.82-.66 1.08-1.15.26-.49.39-1.05.39-1.68 0-.47-.08-.9-.22-1.29a2.99 2.99 0 00-.64-1.02c-.27-.29-.6-.51-.97-.67s-.78-.24-1.23-.24c-.6 0-1.12.14-1.58.41-.46.27-.82.65-1.08 1.14-.26.48-.39 1.04-.39 1.67 0 .47.08.9.23 1.3s.37.74.64 1.03c.27.29.59.51.97.67.38.16.78.24 1.23.24zm4.04 1.56l-3.93-3.93.74-.74 3.92 3.93-.73.74zm5.19-.47c-.62 0-1.18-.14-1.67-.42a3.175 3.175 0 01-1.6-2.81v-5.29h1.15v5.26c0 .44.09.83.28 1.15.19.32.44.57.76.75.32.18.68.27 1.08.27s.76-.09 1.07-.27c.31-.18.56-.43.74-.75.18-.32.27-.7.27-1.14v-5.27h1.15v5.3c0 .61-.14 1.16-.42 1.64-.28.48-.67.87-1.15 1.15-.48.28-1.04.42-1.66.42zm5.1-.12v-8.4h1.14v8.4h-1.14zm.77-7.36v-1.04H128v1.04h-4.75zm0 3.57v-1h4.42v1h-4.42zm0 3.79v-1.04h4.81v1.04h-4.81zm6.37 0v-8.4h1.14v8.4h-1.14zm.76-3.65v-.96h2.27c.49 0 .87-.12 1.13-.38.26-.25.39-.59.39-1.02 0-.4-.13-.74-.39-1-.26-.27-.63-.4-1.12-.4h-2.29v-.99h2.32c.53 0 1 .1 1.39.31.4.21.7.49.91.84.21.35.32.76.32 1.22s-.11.89-.32 1.25c-.21.35-.52.63-.91.83-.4.2-.86.3-1.39.3h-2.32zm4.08 3.65l-3.05-3.76 1.08-.38 3.41 4.14h-1.44zm4.74-3.41l-3.3-4.98h1.33l2.66 4.08h-.59l2.67-4.08h1.29l-3.33 4.98h-.74zm-.18 3.41v-4.16h1.14v4.16h-1.14zm11.55.12c-.61 0-1.17-.11-1.68-.33-.52-.22-.97-.53-1.35-.92-.38-.4-.68-.86-.89-1.38-.21-.52-.31-1.08-.31-1.68s.1-1.17.31-1.69.5-.98.88-1.37c.38-.39.83-.7 1.34-.92.52-.22 1.07-.33 1.67-.33.67 0 1.25.11 1.75.34s.94.53 1.33.92l-.79.79c-.27-.3-.59-.53-.98-.7-.39-.17-.83-.25-1.32-.25a2.96 2.96 0 00-2.18.91c-.28.29-.49.63-.63 1.03s-.22.83-.22 1.29.07.9.22 1.29.36.74.63 1.03.6.51.97.67.78.24 1.22.24c.52 0 .98-.09 1.37-.26.39-.17.71-.41.98-.71l.79.79c-.39.4-.84.71-1.36.93-.52.23-1.11.34-1.76.34zm8 0c-.6 0-1.15-.11-1.67-.33-.52-.22-.97-.53-1.36-.93-.39-.4-.69-.86-.91-1.38s-.33-1.08-.33-1.68.11-1.17.33-1.69.52-.98.9-1.37c.38-.39.83-.7 1.34-.92a4.17 4.17 0 011.66-.33 4.17 4.17 0 013.01 1.25c.39.4.69.86.91 1.38.22.52.33 1.09.33 1.69s-.11 1.16-.33 1.68c-.22.52-.52.98-.9 1.38a4.12 4.12 0 01-2.99 1.25zm-.02-1.09c.6 0 1.13-.14 1.58-.42.46-.28.82-.66 1.08-1.15.26-.49.39-1.05.39-1.68 0-.47-.08-.9-.22-1.29-.15-.39-.36-.73-.63-1.02s-.6-.51-.97-.67-.78-.24-1.23-.24c-.6 0-1.12.14-1.58.41-.46.27-.81.65-1.08 1.14-.26.48-.39 1.04-.39 1.67 0 .47.07.9.22 1.3s.36.74.63 1.03.59.51.97.67c.38.16.78.24 1.23.24zm8.96 1.09c-.62 0-1.18-.14-1.67-.42a3.175 3.175 0 01-1.6-2.81v-5.29h1.15v5.26c0 .44.09.83.28 1.15.19.32.44.57.76.75.32.18.68.27 1.08.27s.76-.09 1.07-.27c.31-.18.56-.43.74-.75.18-.32.27-.7.27-1.14v-5.27h1.15v5.3c0 .61-.14 1.16-.42 1.64-.28.48-.67.87-1.15 1.15-.48.28-1.04.42-1.66.42zm5.1-.12v-8.4h1.14v8.4h-1.14zm.76-3.65v-.96h2.27c.49 0 .87-.12 1.13-.38.26-.25.39-.59.39-1.02 0-.4-.13-.74-.39-1-.26-.27-.63-.4-1.12-.4h-2.29v-.99h2.32c.53 0 1 .1 1.39.31.4.21.7.49.91.84.21.35.32.76.32 1.22s-.11.89-.32 1.25c-.21.35-.52.63-.91.83-.4.2-.86.3-1.39.3h-2.32zm4.08 3.65l-3.05-3.76 1.08-.38 3.41 4.14h-1.44zm4.68.12c-.65 0-1.21-.12-1.68-.36s-.88-.59-1.25-1.05l.77-.77c.27.37.57.65.92.84.35.19.77.28 1.28.28s.9-.11 1.2-.33c.3-.22.45-.52.45-.89 0-.31-.08-.57-.22-.76-.15-.19-.34-.35-.59-.48s-.51-.24-.8-.33c-.29-.1-.58-.2-.87-.32-.29-.12-.56-.26-.8-.44-.25-.18-.44-.41-.59-.68-.15-.28-.22-.63-.22-1.07 0-.48.12-.88.34-1.22.23-.33.54-.59.94-.77s.85-.27 1.35-.27c.55 0 1.04.11 1.48.32.44.21.79.49 1.06.84l-.77.77c-.25-.29-.52-.51-.8-.65-.29-.14-.62-.22-.99-.22-.45 0-.81.1-1.08.3-.27.2-.4.47-.4.83 0 .28.08.51.22.68.15.17.34.32.59.44s.51.23.8.33c.29.1.59.21.88.33s.56.27.8.46.44.43.59.72c.15.29.22.66.22 1.11 0 .74-.26 1.32-.77 1.74-.51.42-1.21.63-2.09.63zm4.39-.12v-8.4h1.14v8.4h-1.14zm.77-7.36v-1.04h4.75v1.04h-4.75zm0 3.57v-1h4.42v1h-4.42zm0 3.79v-1.04h4.81v1.04h-4.81z"
             fill="#231f20"
             className="fill-gray-800 dark:fill-gray-100"
           />
@@ -225,7 +226,7 @@ export function LogoQueryGG({ size = 'default', ...props }: LogoQueryGGProps) {
           <path
             fill="#231f20"
             className="fill-gray-800 dark:fill-gray-100"
-            d="M128 .35h-21.97L128 22.32 149.97.35H128zm3.78 4.7c.45 0 .85.36.86.8 0 .45-.41.81-.86.81-.48 0-.87-.36-.86-.81 0-.44.38-.8.86-.8zm-1.91 3.27c0 1.6-1.28 2.47-3.25 2.47s-3.25-.86-3.25-2.47V3.68h2.04v4.55c0 .52.46.88 1.21.88s1.22-.36 1.22-.88V3.68h2.03v4.63zm2.76-.12c-.07.94-.44 1.83-.67 2.34l-.1.24h-1.4l.16-.51c.16-.54.35-1.32.35-2.07v-.43h1.67v.43z"
+            d="M128,.35h-21.97l21.97,21.97L149.97.35h-21.97ZM129.68,13.27c.04-.21.11-.41.12-.62.01-.2-.02-.4-.04-.66-.27.3-.45.57-.7.79-.26.23-.65.29-1.07.33.05-.17.1-.3.14-.43.07-.27,0-.53-.25-.74-.25-.21-.49-.42-.76-.6-.59-.4-.78-.91-.75-1.48,0-.06,0-.13-.04-.2-.49.52-.82,1.1-.92,1.74-.11.68.21,1.25.83,1.81-.15-.04-.22-.04-.28-.07-1.83-.65-2.58-2.13-1.74-3.59.34-.59.8-1.14,1.26-1.68.83-.97,1.26-2.04,1.37-3.18,0-.05.01-.1.02-.15,0-.02.02-.04.04-.06.03,0,.06,0,.08.02,1.24,1.04,2.27,2.17,2.8,3.52.4,1.01.39,2.01-.31,2.96-.03.04-.04.09-.06.14.65-.08,1.4-.67,1.54-1.2.15-.53.08-1.05-.15-1.56-.04-.08-.07-.16-.11-.25.67.13,1.46,1.5,1.42,2.43-.05,1.28-1.17,2.52-2.44,2.72Z"
           />
         </svg>
       </div>
@@ -250,6 +251,11 @@ export function LogoQueryGG({ size = 'default', ...props }: LogoQueryGGProps) {
           className="fill-gray-800 dark:fill-gray-100"
           d="M0 0v361h1100V0H0zm1064.53 60.07c.81 0 1.47.66 1.47 1.47s-.66 1.47-1.47 1.47-1.47-.66-1.47-1.47.66-1.47 1.47-1.47zm-8.89 88.13c.81 0 1.47.66 1.47 1.47s-.66 1.47-1.47 1.47-1.47-.66-1.47-1.47.66-1.47 1.47-1.47zm-4.05-18.21c.81 0 1.47.66 1.47 1.47s-.66 1.47-1.47 1.47-1.47-.66-1.47-1.47.66-1.47 1.47-1.47zm-4.21-65.16c.81 0 1.47.66 1.47 1.47s-.66 1.47-1.47 1.47-1.47-.66-1.47-1.47.66-1.47 1.47-1.47zm-14.73 72.64c0 .81-.66 1.47-1.47 1.47s-1.47-.66-1.47-1.47.66-1.47 1.47-1.47 1.47.66 1.47 1.47zm-2.93-102.81c.81 0 1.47.66 1.47 1.47s-.66 1.47-1.47 1.47-1.47-.66-1.47-1.47.66-1.47 1.47-1.47zm-52.43 5.87c.81 0 1.47.66 1.47 1.47s-.66 1.47-1.47 1.47-1.47-.66-1.47-1.47.66-1.47 1.47-1.47zm0 105.43c.81 0 1.47.66 1.47 1.47s-.66 1.47-1.47 1.47-1.47-.66-1.47-1.47.66-1.47 1.47-1.47zm-40.2-36.88c.81 0 1.47.66 1.47 1.47s-.66 1.47-1.47 1.47-1.47-.66-1.47-1.47.66-1.47 1.47-1.47zm-4.46-70.01c.81 0 1.47.66 1.47 1.47s-.66 1.47-1.47 1.47-1.47-.66-1.47-1.47.66-1.47 1.47-1.47zM1074.6 338.1H22.2V195.63c10.49-1.06 19.12-8.4 22.06-18.21 6.27 3.7 13.57 5.83 21.37 5.83 14.34 0 27-7.17 34.6-18.12 7.39 6.41 17.02 10.3 27.57 10.3 23.26 0 42.12-18.86 42.12-42.12 0-2.82-.28-5.58-.81-8.24 9.73-4.64 16.45-14.56 16.45-26.06 0-8.04-3.3-15.32-8.61-20.55 5.31-5.23 8.61-12.51 8.61-20.55 0-2.14-.24-4.23-.68-6.24 1.92.51 3.94.79 6.03.79 12.92 0 23.4-10.48 23.4-23.4 0-1.89-.23-3.72-.65-5.48h666.89c-.41 1.74-.64 3.56-.64 5.42 0 12.92 10.48 23.4 23.4 23.4 2.09 0 4.11-.28 6.03-.79-.44 2.01-.68 4.1-.68 6.24 0 8.04 3.3 15.32 8.61 20.55-5.31 5.23-8.61 12.51-8.61 20.55 0 11.49 6.72 21.42 16.45 26.05a42.25 42.25 0 00-.81 8.24c0 23.26 18.86 42.12 42.12 42.12 10.55 0 20.18-3.89 27.57-10.3 7.61 10.95 20.26 18.12 34.6 18.12 7.8 0 15.11-2.13 21.37-5.83 3.18 10.6 12.99 18.33 24.62 18.35v142.36z"
         />
+        <path
+          d="M380.66 277.18a9.743 9.743 0 003.57-4.46c1.69 0 2.97 1.03 3.84 3.09.27.59.41 1.47.41 2.64s-.39 2.48-1.17 3.94c-.78 1.46-1.81 2.74-3.09 3.84-2.79 2.24-5.97 3.36-9.54 3.36-3.38 0-6.29-.48-8.71-1.44-3.89-1.51-8.23-3.72-13.03-6.62-4.8-2.9-8.45-4.94-10.94-6.11s-4.84-2.09-7.03-2.78c-3.8-1.19-7.77-1.78-11.94-1.78-8.19 0-12.94 5.14-14.27 15.43-2.51 0-4.76-.94-6.72-2.81-1.78-1.74-2.67-3.75-2.67-6.04 0-5.99 3.34-10.01 10.01-12.07-11.3-4.89-19.14-14.02-23.53-27.37-1.46-4.34-2.42-8.55-2.88-12.62-.46-4.07-1.25-7.05-2.37-8.95-1.12-1.9-2.71-3.35-4.77-4.36 3.98-1.87 6.32-5.73 7.03-11.56s2.32-11.28 4.84-16.36c2.51-5.08 5.72-9.42 9.6-13.03 8.19-7.59 18.04-11.39 29.56-11.39s21.65 3.52 29.43 10.56c8.09 7.32 12.85 17.56 14.27 30.73.59 5.49 2.93 9.17 7 11.04-3.98 1.97-6.29 5.77-6.93 11.42-.64 5.65-1.69 10.75-3.16 15.3-1.46 4.55-3.38 8.65-5.76 12.31-4.8 7.45-11.32 12.58-19.55 15.37 1.33.37 2.72.8 4.18 1.3l4.39 1.58c2.15.82 4.16 1.53 6.04 2.13 3.89 0 6.72-1.3 8.5-3.91 1.05.32 1.99.87 2.81 1.65.82.78 1.24 1.55 1.24 2.33s-.07 1.44-.21 1.99c1.69-.32 3.08-1.03 4.15-2.13 1.07-1.1 1.77-2.33 2.09-3.7 1.37.27 2.49.85 3.36 1.71 1.46 1.55 2.19 2.95 2.19 4.18 0 1.6-.09 2.79-.27 3.57zm-82.24-28.6c.69-.27 1.03-.75 1.03-1.44 0-1-.48-2.58-1.44-4.73-2.42-5.53-3.64-15.64-3.64-30.32 0-10.7 1.28-19.8 3.84-27.3.32-1.14.48-2.01.48-2.61s-.3-.98-.89-1.17c-2.15 2.7-3.68 5.37-4.6 8.03-1.69 4.85-3.04 11.41-4.05 19.69-.14 1.19-1.49 2.31-4.05 3.36 2.56 1.14 3.91 2.31 4.05 3.5 1.65 14.18 3.75 23.64 6.31 28.4.87 1.69 1.85 3.22 2.95 4.6zm20.72-36.49c-5.03 2.42-7.55 6.38-7.55 11.87v20.37c0 7.46 3.09 12.23 9.26 14.34 1.83.64 3.82.96 5.97.96s4.13-.32 5.93-.96 3.37-1.6 4.7-2.88c2.74-2.65 4.12-6.47 4.12-11.46v-20.37c0-5.49-2.47-9.44-7.41-11.87 4.94-2.29 7.41-5.97 7.41-11.04v-16.39c0-5.08-1.49-9.03-4.46-11.87-2.79-2.61-6.24-3.91-10.36-3.91-7 0-11.66 2.93-13.99 8.78-.78 1.97-1.17 4.3-1.17 7v16.39c0 5.17 2.51 8.85 7.55 11.04zm28.74-31.07c1.28 3.84 1.92 10.45 1.92 19.82 0 5.31-.23 8.21-.69 8.71-.46.5-.92.92-1.37 1.23-.82.55-1.71.98-2.67 1.3 2.74 1.24 4.18 2.42 4.32 3.57.46 4.48.69 8.36.69 11.63s-.05 5.9-.14 7.89c-.09 1.99-.23 3.83-.41 5.52-.37 3.61-.82 6.24-1.37 7.89 3.57-1.1 5.56-6.38 5.97-15.84.23-5.3.34-11.22.34-17.73s-.07-11.41-.21-14.68c-.14-3.27-.34-5.96-.62-8.06-.55-4.85-1.69-8.21-3.43-10.08-.5-.55-1.28-.94-2.33-1.17zm123.6 63.44c.82 2.01 2.49 3.93 5.01 5.76-1.6.64-3.6 2.15-6 4.53-2.4 2.38-5.09 4.5-8.06 6.38-2.97 1.88-5.92 3.38-8.85 4.53-5.3 2.1-11.03 3.16-17.18 3.16s-11.73-.73-16.74-2.19c-5.01-1.46-9.16-3.45-12.45-5.97-6.45-4.98-9.67-11.62-9.67-19.89v-19c0-2.1-.44-3.66-1.3-4.66-1.37-1.69-3.73-3.36-7.06-5.01 3.11-1.42 5.12-2.67 6.04-3.77 1.55-1.78 2.33-3.79 2.33-6.04v-28.95c-1.56-3.52-4.37-5.28-8.44-5.28-1.55 0-2.84.39-3.84 1.17-.5-.69-.75-1.47-.75-2.37s.26-1.73.79-2.5c.53-.78 1.25-1.44 2.16-1.99 2.1-1.28 4.51-1.92 7.24-1.92s5.22.75 7.51 2.26c2.38-1.51 5.03-2.26 7.96-2.26s5.58.75 7.96 2.26c2.29-1.51 4.43-2.26 6.45-2.26s3.66.17 4.94.51c1.28.34 2.4.81 3.36 1.41 1.97 1.19 2.95 2.68 2.95 4.46 0 .92-.25 1.71-.75 2.4-1.01-.78-2.29-1.17-3.84-1.17-4.07 0-6.88 1.76-8.44 5.28v28.95c0 2.24.48 3.91 1.44 5.01 1.51 1.78 3.82 3.38 6.93 4.8-3.34 1.65-5.47 3-6.38 4.05-1.33 1.65-1.99 3.52-1.99 5.62v19.14c0 5.53 2.08 10.08 6.24 13.65 3.84 3.25 8.21 4.87 13.1 4.87s9.67-1.58 13.65-4.73c4.07-3.2 6.1-7.09 6.1-11.66v-21.88c0-2.01-.43-3.5-1.3-4.46-1.33-1.42-3.68-2.95-7.07-4.6 3.16-1.55 5.19-2.81 6.1-3.77 1.51-1.6 2.26-3.38 2.26-5.35v-30.52c-1.97-2.93-4.37-4.39-7.2-4.39s-4.92.39-6.24 1.17c-.5-.82-.75-1.96-.75-3.4s.71-2.7 2.13-3.77c1.42-1.07 3.27-1.61 5.56-1.61s4.32.6 6.1 1.78c1.6-1.19 3.44-1.78 5.52-1.78s3.92.62 5.52 1.85c1.78-1.23 3.75-1.85 5.9-1.85s3.88.56 5.18 1.68c1.3 1.12 1.96 2.41 1.96 3.88s-.23 2.54-.69 3.22c-1.33-.78-3.44-1.17-6.34-1.17s-5.25 1.46-7.03 4.39v30.52c0 2.01.43 3.48 1.3 4.39 1.37 1.42 3.95 3 7.75 4.73-4.02 1.97-6.43 3.34-7.2 4.12-1.23 1.23-1.85 2.88-1.85 4.94v23.32zm-63.79 4.12c.41-2.47.62-10.39.62-23.77s-.01-21.56-.03-24.56c-.02-2.99-.06-5.41-.1-7.24-.14-5.4-.65-8.65-1.54-9.78-.89-1.12-1.73-1.86-2.5-2.23 0 15.91-.27 24.97-.82 27.16-.64 1.83-2.2 3.13-4.66 3.91 2.74.96 4.3 2.13 4.66 3.5.55 2.19.82 6.93.82 14.2s.1 11.57.31 12.9.49 2.4.86 3.22c.59 1.46 1.39 2.36 2.4 2.67zm110.09 19.55c-3.02 0-5.69-.73-8.03-2.2-2.33 1.46-4.49 2.2-6.48 2.2s-3.62-.17-4.9-.51-2.4-.81-3.36-1.41c-1.97-1.19-2.95-2.67-2.95-4.46 0-.91.25-1.71.75-2.4 1 .78 2.29 1.17 3.84 1.17 4.07 0 6.88-1.74 8.44-5.21v-33.54c0-2.1-.44-3.66-1.3-4.66-1.37-1.69-3.73-3.36-7.07-5.01 3.11-1.42 5.12-2.67 6.04-3.77 1.55-1.78 2.33-3.79 2.33-6.04v-28.95c-1.56-3.52-4.37-5.28-8.44-5.28-1.55 0-2.84.39-3.84 1.17-.5-.69-.75-1.47-.75-2.37s.26-1.73.79-2.5c.53-.78 1.25-1.44 2.16-1.99 2.1-1.28 4.52-1.92 7.24-1.92s5.22.75 7.51 2.26c2.38-1.51 5.1-2.26 8.16-2.26s5.85.89 8.37 2.68c4.85-1.78 10.45-2.68 16.81-2.68 4.71 0 8.73.46 12.07 1.37l6.11 1.65c.73.18 1.44.27 2.13.27 1.28 0 1.92-.91 1.92-2.74 0-.46-.16-1.23-.48-2.33 1.28-.23 2.9-.34 4.87-.34s3.64.65 5.01 1.96c1.37 1.3 2.06 3.18 2.06 5.62s-.44 4.24-1.3 5.38c1.24 1.83 1.85 4.06 1.85 6.69s-.89 4.84-2.68 6.62c.55 1.37.82 2.71.82 4.01s-.22 2.49-.65 3.57c-.44 1.07-.97 1.98-1.61 2.71-1.28 1.33-2.58 1.99-3.91 1.99-1.92 0-3.66-.41-5.21-1.23.55-1.1.82-2.72.82-4.87 0-5.03-1.26-9.44-3.77-13.24-3.43-5.21-8.57-7.82-15.43-7.82-3.48 0-6.62.85-9.43 2.54-2.81 1.69-4.79 4.12-5.93 7.27v26.55c1.6 1.01 3.1 1.51 4.49 1.51s2.45-.02 3.16-.07c.71-.04 1.43-.14 2.16-.27 1.87-.27 3.31-.64 4.32-1.1 1.92-.92 2.88-3.16 2.88-6.72 0-2.01-.48-3.57-1.44-4.66.91-.64 2.06-.96 3.43-.96 3.06 0 5.28 1.24 6.65 3.7.5.87.75 1.83.75 2.88s-.27 2.36-.82 3.91c1.87 2.15 2.81 4.7 2.81 7.65s-.94 5.5-2.81 7.65c.55 1.55.82 2.96.82 4.22s-.25 2.46-.75 3.6c-.5 1.14-1.12 2.06-1.85 2.74-1.42 1.28-3.02 1.92-4.8 1.92-1.28 0-2.42-.37-3.43-1.1.96-1.6 1.44-3.48 1.44-5.62 0-4.25-1.17-6.88-3.5-7.89-2.06-.82-4.41-1.23-7.07-1.23s-4.8.48-6.45 1.44v34.3c2.65 4.66 7.77 7 15.37 7 8.6 0 14.45-2.65 17.56-7.96 3.61-6.08 5.42-12.6 5.42-19.55 0-2.01-.18-3.57-.55-4.66 1.14-1.14 2.33-1.71 3.57-1.71s2.17.17 2.81.51c.64.34 1.21.77 1.71 1.27 1.1 1.23 1.65 2.49 1.65 3.77l-.41 3.36c0 .87.23 1.58.69 2.13.91.96 1.37 1.86 1.37 2.71s-.27 1.86-.82 3.05c1.05.59 2 1.47 2.85 2.64.85 1.17 1.27 2.37 1.27 3.6 0 2.61-1.1 4.94-3.29 7 .96 1.37 1.44 3.35 1.44 5.93s-.74 4.78-2.23 6.58c-1.49 1.81-3.42 2.71-5.8 2.71-1.28 0-2.61-.14-3.98-.41.18-1.01.27-2.01.27-3.02 0-2.1-.96-3.16-2.88-3.16-2.15 0-4.3.44-6.45 1.3-5.08 2.06-10.85 3.09-17.32 3.09s-11.97-.85-16.5-2.54c-2.38 1.69-5.14 2.54-8.3 2.54zm-6.1-19.55c2.29-.87 3.54-3.86 3.77-8.99.27-5.12.41-12.21.41-21.26s-.01-15.08-.03-18.07c-.02-2.99-.06-5.41-.1-7.24-.14-5.4-.65-8.65-1.54-9.78-.89-1.12-1.73-1.86-2.5-2.23 0 15.91-.27 24.97-.82 27.16-.64 1.83-2.2 3.13-4.66 3.91 2.74.96 4.3 2.13 4.66 3.5.55 2.19.82 10.22.82 24.08v8.92zm17.29-.69c0 .14.02.25.07.34l-.07-.34zm95.54 18.04c-2.33 1.46-4.99 2.2-7.96 2.2s-5.62-.73-7.96-2.2c-2.33 1.46-4.49 2.2-6.48 2.2s-3.62-.17-4.9-.51-2.4-.81-3.36-1.41c-1.97-1.19-2.95-2.67-2.95-4.46 0-.91.25-1.71.75-2.4 1 .78 2.29 1.17 3.84 1.17 4.07 0 6.88-1.74 8.44-5.21v-33.54c0-2.1-.44-3.66-1.3-4.66-1.37-1.69-3.73-3.36-7.07-5.01 3.11-1.42 5.12-2.67 6.04-3.77 1.55-1.78 2.33-3.79 2.33-6.04v-28.95c-1.56-3.52-4.37-5.28-8.44-5.28-1.55 0-2.84.39-3.84 1.17-.5-.69-.75-1.47-.75-2.37s.26-1.73.79-2.5c.53-.78 1.25-1.44 2.16-1.99 2.1-1.28 4.52-1.92 7.24-1.92s5.22.75 7.51 2.26c2.38-1.51 5.03-2.26 7.96-2.26s5.58.75 7.96 2.26c5.17-1.96 10.89-2.95 17.18-2.95s11.56.57 15.81 1.71c4.25 1.14 7.91 2.77 10.98 4.87 6.17 4.25 10.01 10.18 11.52 17.77.59 3.38 2.77 5.95 6.52 7.68-3.57 2.01-5.9 5.21-7 9.6-2.24 9.05-7.84 14.7-16.81 16.94 4.62 1.24 8.39 3.77 11.32 7.61 3.02 3.98 4.53 8.67 4.53 14.06v6.86c0 6.58 2.13 10.84 6.38 12.76 1.28.59 2.67.89 4.18.89s2.77-.39 3.77-1.17c.5.69.75 1.47.75 2.37s-.23 1.73-.69 2.5c-.46.78-1.08 1.44-1.85 1.99-1.65 1.28-3.57 1.92-5.76 1.92s-4.34-.59-6.45-1.78c-3.84 2.1-7.43 2.31-10.77.62-1.28.78-2.63 1.17-4.05 1.17s-2.78-.32-4.08-.96c-1.3-.64-2.46-1.69-3.46-3.16-2.15-3.16-3.22-8-3.22-14.54v-5.08c0-10.56-3.02-17.42-9.05-20.58-2.01-1.05-4.37-1.58-7.07-1.58h-8.03v33.41c1.23 3.25 3.59 4.87 7.07 4.87 1.55 0 2.83-.39 3.84-1.17.5.69.75 1.69.75 3.02s-.72 2.62-2.16 3.88c-1.44 1.26-3.6 1.89-6.48 1.89s-5.44-.73-7.68-2.2zm-13.99-17.35c2.29-.87 3.54-3.86 3.77-8.99.27-5.12.41-12.21.41-21.26s-.01-15.08-.03-18.07c-.02-2.99-.06-5.41-.1-7.24-.14-5.4-.65-8.65-1.54-9.78-.89-1.12-1.73-1.86-2.5-2.23 0 15.91-.27 24.97-.82 27.16-.64 1.83-2.2 3.13-4.66 3.91 2.74.96 4.3 2.13 4.66 3.5.55 2.19.82 10.22.82 24.08v8.92zm31.83-79.71c-8.78 0-13.17 3.41-13.17 10.22v28.05c0 2.38.94 3.98 2.81 4.8 1.78.78 4.42 1.17 7.92 1.17s5.94-.19 7.34-.58c1.39-.39 2.6-1.06 3.6-2.02 2.06-1.97 3.09-5.26 3.09-9.88V180.6c0-5.72-2.38-9.37-7.13-10.97-1.42-.5-2.9-.75-4.46-.75zm15.5 60.91c1.83 2.06 2.74 4.57 2.74 7.55v9.05c0 7.59 1.51 11.64 4.53 12.14.82.14 1.62.12 2.4-.07-1.65-2.56-2.47-5.26-2.47-8.09v-9.6c0-3.61-.5-6.17-1.51-7.68-1.74-2.56-3.64-3.66-5.69-3.29zm.69-56.52c1.42 3.2 2.13 8.32 2.13 15.37 0 12.12-.57 19.37-1.71 21.74 2.51-.5 4.32-3.86 5.42-10.08l.55-2.81c.5-2.97 1.97-4.87 4.39-5.69-1.78-.59-2.93-1.3-3.43-2.13-.55-.96-1.04-2.59-1.47-4.9-.44-2.31-.88-4.17-1.34-5.59-.46-1.42-.94-2.54-1.44-3.36-.87-1.46-1.9-2.31-3.09-2.54zm89.99 92.67c-2.33 1.46-4.98 2.2-7.96 2.2s-5.62-.73-7.96-2.2c-2.33 1.46-4.49 2.2-6.48 2.2s-3.66-.17-5.01-.51c-1.35-.34-2.55-.81-3.6-1.41-2.19-1.19-3.29-2.67-3.29-4.46 0-.91.25-1.71.75-2.4 1 .78 2.34 1.17 4.01 1.17s3.36-.43 5.08-1.3c1.71-.87 3.01-2.22 3.88-4.05v-13.51c0-2.1-.41-3.66-1.23-4.66-1.46-1.78-3.84-3.47-7.13-5.08 3.06-1.42 5.08-2.65 6.04-3.7 1.55-1.78 2.33-3.79 2.33-6.04v-2.47l-27.58-47.74c-2.65-2.38-5.01-3.57-7.06-3.57s-3.68.39-4.87 1.17c-.5-.37-.75-1.05-.75-2.06s.16-1.93.48-2.78c.32-.84.82-1.59 1.51-2.23 1.46-1.37 3.59-2.06 6.38-2.06s5.26.8 7.41 2.4c2.29-1.6 5-2.4 8.13-2.4s5.7.78 7.72 2.33c2.42-1.55 4.69-2.33 6.79-2.33s3.79.15 5.08.45c1.28.3 2.4.74 3.36 1.34 2.06 1.19 3.13 2.84 3.22 4.94 0 1.28-.25 2.08-.75 2.4-1.24-.78-2.47-1.17-3.7-1.17-2.65 0-4.8.48-6.45 1.44l20.51 39.37 19.48-39.44c-1.88-1.14-4.04-1.71-6.48-1.71s-4.33.39-5.66 1.17c-.46-.69-.69-1.76-.69-3.22s.62-2.75 1.85-3.88c1.23-1.12 2.99-1.68 5.28-1.68s4.25.6 5.9 1.78c1.46-1.19 3.25-1.78 5.35-1.78s3.86.5 5.28 1.51c2.01-1.01 4.02-1.51 6.04-1.51s3.62.65 4.84 1.96c1.21 1.3 1.82 2.98 1.82 5.04 0 1.05-.25 1.76-.75 2.13-1.19-.78-2.65-1.17-4.39-1.17-3.02 0-5.69.82-8.03 2.47l-24.01 47.54v3.77c0 2.24.48 3.91 1.44 5.01 1.55 1.74 3.86 3.32 6.93 4.73-3.29 1.6-5.4 2.95-6.31 4.05-1.37 1.69-2.06 3.59-2.06 5.69v13.51c.82 1.83 2.09 3.18 3.81 4.05 1.71.87 3.42 1.3 5.11 1.3s3.04-.39 4.05-1.17c.5.69.75 1.47.75 2.37s-.3 1.73-.89 2.5c-.59.78-1.4 1.44-2.4 1.99-2.29 1.28-4.79 1.92-7.51 1.92s-5.25-.73-7.58-2.2zm-13.99-17.35c2.42-.91 3.75-4.5 3.98-10.77.04-1.92.07-3.89.07-5.9v-11.46c0-2.2-.41-4-1.23-5.42l-14.06-25.45c-1.97-3.43-3.38-5.56-4.25-6.38-1.37-1.28-3.02-2.01-4.94-2.19l20.58 38.14v3.36c0 2.7-.18 4.55-.55 5.56-.55 1.74-2.24 3.04-5.08 3.91 3.06 1.14 4.8 2.54 5.21 4.18.32 1.28.48 2.78.48 4.49s-.03 3.21-.1 4.49c-.07 1.28-.1 2.42-.1 3.43z"
+          fill="#231f20"
+          className="fill-gray-800 dark:fill-gray-100"
+        />
         <rect
           width={66.38}
           height={45.44}
@@ -263,6 +269,32 @@ export function LogoQueryGG({ size = 'default', ...props }: LogoQueryGGProps) {
           rx={11.53}
           ry={11.53}
         />
+        <g fill="#231f20" className="fill-gray-800 dark:fill-gray-100">
+          <path d="M806.94 223.39c.46-.28.74-.51.86-.69.12-.17.21-.33.29-.47.2-.37.48-.65.86-.86.38-.21.79-.31 1.22-.31.91 0 1.57.38 1.97 1.14.33.6.71.99 1.16 1.18-.12.07-.24.14-.34.19s-.2.12-.29.19c-.19.15-.37.39-.56.71s-.45.6-.8.84c-.35.24-.72.36-1.14.36s-.81-.12-1.2-.36-.68-.54-.88-.91c-.24-.41-.45-.66-.64-.77-.19-.11-.36-.2-.51-.26zm2.7.75c-.05-.08-.09-.19-.12-.3-.03-.12-.04-.34-.04-.66s.15-.71.46-1.17c-.18 0-.34.04-.48.1-.14.07-.26.17-.37.31-.11.14-.18.25-.22.32-.04.08-.1.16-.17.24-.15.23-.28.37-.38.41.13.07.25.19.36.35s.24.33.38.5c.22.26.51.39.87.39-.05-.09-.1-.17-.15-.25l-.15-.24zm7.23 1.72c-.58-.54-.88-1.2-.88-2 0-1.19.7-2.16 2.11-2.92-.92-.64-1.59-1.66-2.01-3.04-.14-.43-.28-.72-.41-.88-.2-.24-.55-.49-1.05-.73.41-.19.72-.43.93-.72.21-.29.4-.67.56-1.14.16-.47.38-.92.67-1.35.29-.43.66-.81 1.11-1.13 1-.7 2.29-1.05 3.86-1.05.5 0 1.03.05 1.57.16.11-.88.51-1.63 1.18-2.25.67-.62 1.45-.94 2.34-.94 1.05 0 1.93.27 2.64.82.39.29.78.4 1.17.33.03.65-.22 1.07-.75 1.25-.09 1.1-.56 1.64-1.42 1.64-.34 0-.55-.02-.62-.07.12-.11.18-.24.18-.41s-.07-.31-.21-.43c-.17.32-.55.47-1.14.47-.33 0-.58-.15-.77-.46.31-.1.55-.25.73-.44.18-.2.27-.38.27-.55 0-.45-.24-.67-.71-.67-.91 0-1.44.71-1.59 2.12 1.48.63 2.42 1.63 2.82 2.98.27.92.76 1.53 1.49 1.85-.63.32-1.05.67-1.25 1.06-.08.15-.15.34-.22.55-.44 1.38-1.12 2.4-2.06 3.05-.93.65-2.13.98-3.6.98-.93 0-1.75-.11-2.44-.34-.27.17-.4.36-.4.57s.04.38.12.52c.08.14.23.27.44.38.41.22 1.2.41 2.36.58.53.11 1.07-.24 1.63-1.02.03.41.13.72.28.93s.32.32.51.35c2.24.33 3.69 1.06 4.35 2.19.23.38.34.87.34 1.47s-.19 1.18-.57 1.74c-.38.56-.9 1.04-1.55 1.44-1.35.81-3 1.22-4.97 1.22-2.31 0-4.07-.38-5.28-1.13-1.05-.66-1.57-1.5-1.57-2.52 0-.68.34-1.33 1.04-1.94.23-.2.49-.37.78-.51zm1.18-6.23c.16-.12.24-.26.24-.43 0-.21-.03-.41-.08-.61-.22-.75-.33-1.51-.33-2.3s.11-1.54.33-2.29c.06-.19.08-.35.08-.46v-.29c0-.07-.03-.13-.1-.18-.33.41-.58.87-.72 1.39-.15.52-.27.98-.36 1.38-.03.12-.26.28-.68.46.43.21.66.37.68.47l.24 1.02c.21.86.44 1.47.69 1.84zm.04 7.01c-.58.25-.86.72-.86 1.41 0 .55.42 1.05 1.25 1.5.93.5 2.14.75 3.62.75 1.82 0 3-.31 3.54-.94.15-.17.23-.35.23-.54s-.09-.36-.27-.51c-.18-.15-.42-.26-.71-.35-.43-.15-1.11-.27-2.03-.38-.45-.05-1 .28-1.66.99 0-.45-.08-.78-.22-.99-.15-.2-.3-.31-.44-.33-.94-.12-1.75-.33-2.44-.62zm-.66-2.68c-.07.07-.11.18-.11.32.03.88 1.28 1.54 3.75 1.98.28.06.49.37.61.92.04-.18.2-.33.48-.44.28-.12.47-.17.57-.16 1.23.15 2.05.28 2.48.41.76.23 1.32.58 1.67 1.05.1-.11.15-.26.15-.44s-.09-.36-.27-.54-.47-.34-.88-.48c-.7-.25-1.64-.45-2.84-.58-1.19-.14-2.03-.26-2.51-.37-.48-.11-.93-.24-1.33-.39-.88-.35-1.47-.77-1.77-1.28zm3.19-4.25c.18.25.36.41.54.48.18.07.39.1.63.1s.45-.03.63-.1a.98.98 0 00.45-.36c.24-.33.35-.89.35-1.68v-3.37c0-.79-.09-1.31-.27-1.56-.18-.25-.36-.41-.54-.48s-.39-.1-.63-.1-.45.03-.63.1-.33.18-.44.35c-.24.34-.37.91-.37 1.69v3.37c0 .79.09 1.31.27 1.56zm3.77-.09c.37-.13.59-.53.65-1.21.06-.63.08-1.34.08-2.13 0-1.22-.03-2-.1-2.34-.1-.45-.31-.75-.63-.89v6.56z" />
+          <path d="M831.8 225.86c-.58-.54-.88-1.2-.88-2 0-1.19.7-2.16 2.11-2.92-.92-.64-1.59-1.66-2.01-3.04-.14-.43-.28-.72-.41-.88-.2-.24-.55-.49-1.05-.73.41-.19.72-.43.93-.72.21-.29.4-.67.56-1.14.16-.47.38-.92.67-1.35.29-.43.66-.81 1.11-1.13 1-.7 2.29-1.05 3.86-1.05.5 0 1.03.05 1.57.16.11-.88.51-1.63 1.18-2.25.67-.62 1.45-.94 2.34-.94 1.05 0 1.93.27 2.64.82.39.29.78.4 1.17.33.03.65-.22 1.07-.75 1.25-.09 1.1-.56 1.64-1.42 1.64-.34 0-.55-.02-.62-.07.12-.11.18-.24.18-.41s-.07-.31-.21-.43c-.17.32-.55.47-1.14.47-.33 0-.58-.15-.77-.46.31-.1.55-.25.73-.44.18-.2.27-.38.27-.55 0-.45-.24-.67-.71-.67-.91 0-1.44.71-1.59 2.12 1.48.63 2.42 1.63 2.82 2.98.27.92.76 1.53 1.49 1.85-.63.32-1.05.67-1.25 1.06-.08.15-.15.34-.22.55-.44 1.38-1.12 2.4-2.06 3.05-.93.65-2.13.98-3.6.98-.93 0-1.75-.11-2.44-.34-.27.17-.4.36-.4.57s.04.38.12.52c.08.14.23.27.44.38.41.22 1.2.41 2.36.58.53.11 1.07-.24 1.63-1.02.03.41.13.72.28.93s.32.32.51.35c2.24.33 3.69 1.06 4.35 2.19.23.38.34.87.34 1.47s-.19 1.18-.57 1.74c-.38.56-.9 1.04-1.55 1.44-1.35.81-3 1.22-4.97 1.22-2.31 0-4.07-.38-5.28-1.13-1.05-.66-1.57-1.5-1.57-2.52 0-.68.34-1.33 1.04-1.94.23-.2.49-.37.78-.51zm1.18-6.23c.16-.12.24-.26.24-.43 0-.21-.03-.41-.08-.61-.22-.75-.33-1.51-.33-2.3s.11-1.54.33-2.29c.06-.19.08-.35.08-.46v-.29c0-.07-.03-.13-.1-.18-.33.41-.58.87-.72 1.39-.15.52-.27.98-.36 1.38-.03.12-.26.28-.68.46.43.21.66.37.68.47l.24 1.02c.21.86.44 1.47.69 1.84zm.04 7.01c-.58.25-.86.72-.86 1.41 0 .55.42 1.05 1.25 1.5.93.5 2.14.75 3.62.75 1.82 0 3-.31 3.54-.94.15-.17.23-.35.23-.54s-.09-.36-.27-.51c-.18-.15-.42-.26-.71-.35-.43-.15-1.11-.27-2.03-.38-.45-.05-1 .28-1.66.99 0-.45-.08-.78-.22-.99-.15-.2-.3-.31-.44-.33-.94-.12-1.75-.33-2.44-.62zm-.66-2.68c-.07.07-.11.18-.11.32.03.88 1.28 1.54 3.75 1.98.28.06.49.37.61.92.04-.18.2-.33.48-.44.28-.12.47-.17.57-.16 1.23.15 2.05.28 2.48.41.76.23 1.32.58 1.67 1.05.1-.11.15-.26.15-.44s-.09-.36-.27-.54-.47-.34-.88-.48c-.7-.25-1.64-.45-2.84-.58-1.19-.14-2.03-.26-2.51-.37-.48-.11-.93-.24-1.33-.39-.88-.35-1.47-.77-1.77-1.28zm3.19-4.25c.18.25.36.41.54.48.18.07.39.1.63.1s.45-.03.63-.1a.98.98 0 00.45-.36c.24-.33.35-.89.35-1.68v-3.37c0-.79-.09-1.31-.27-1.56-.18-.25-.36-.41-.54-.48s-.39-.1-.63-.1-.45.03-.63.1-.33.18-.44.35c-.24.34-.37.91-.37 1.69v3.37c0 .79.09 1.31.27 1.56zm3.77-.09c.37-.13.59-.53.65-1.21.06-.63.08-1.34.08-2.13 0-1.22-.03-2-.1-2.34-.1-.45-.31-.75-.63-.89v6.56z" />
+        </g>
+        <path
+          d="M310.62 110.61v-2.38h15.64v2.38h-15.64zm6.5 16.83v-18.65h2.63v18.65h-2.63zm12.24 0v-19.21h2.6v19.21h-2.6zm1.77-8.75v-2.38h11.24v2.38h-11.24zm10.63 8.75v-19.21h2.6v19.21h-2.6zm7.14 0v-19.21h2.6v19.21h-2.6zm1.77-16.83v-2.38h10.88v2.38h-10.88zm0 8.16v-2.3h10.1v2.3h-10.1zm0 8.66v-2.38h11.01v2.38h-11.01zm29.03.29c-1.37 0-2.64-.25-3.82-.76-1.18-.51-2.21-1.22-3.1-2.13s-1.58-1.97-2.08-3.17-.75-2.48-.75-3.85.25-2.67.75-3.86 1.19-2.24 2.06-3.14c.88-.9 1.9-1.6 3.07-2.1s2.44-.75 3.81-.75 2.63.25 3.81.75c1.17.5 2.2 1.2 3.09 2.1.88.9 1.58 1.96 2.08 3.16.5 1.2.75 2.49.75 3.88s-.25 2.65-.75 3.85c-.5 1.2-1.19 2.25-2.06 3.16-.88.9-1.9 1.61-3.07 2.12s-2.43.76-3.78.76zm-.05-2.49c1.37 0 2.57-.32 3.62-.96s1.88-1.51 2.48-2.63.9-2.39.9-3.83c0-1.07-.17-2.05-.51-2.95-.34-.89-.83-1.67-1.45-2.34a6.53 6.53 0 00-2.21-1.54c-.85-.36-1.79-.54-2.82-.54-1.37 0-2.57.31-3.61.94a6.696 6.696 0 00-2.46 2.6c-.6 1.11-.9 2.38-.9 3.82 0 1.07.17 2.06.51 2.97s.82 1.7 1.44 2.35c.62.66 1.36 1.17 2.21 1.54.86.37 1.79.55 2.81.55zm13.28 2.21v-19.21h2.6v19.21h-2.6zm1.77-16.83v-2.38h10.49v2.38H394.7zm0 8.39v-2.38h10.02V119H394.7zm13.89 8.44v-19.21h2.6v19.21h-2.6zm1.77-16.83v-2.38h10.49v2.38h-10.49zm0 8.39v-2.38h10.02V119h-10.02zm13.9 8.44v-19.21h2.6v19.21h-2.6zm15.86.28c-1.38 0-2.67-.25-3.85-.76a9.464 9.464 0 01-5.12-5.28c-.48-1.2-.72-2.48-.72-3.85s.24-2.67.72-3.88c.48-1.2 1.15-2.25 2.02-3.14.87-.9 1.89-1.6 3.07-2.1s2.45-.76 3.82-.76c1.53 0 2.87.26 4.01.78 1.14.52 2.16 1.22 3.04 2.1l-1.8 1.8a6.526 6.526 0 00-2.24-1.61c-.89-.39-1.89-.58-3.02-.58-1 0-1.92.18-2.77.54-.85.36-1.59.87-2.21 1.54-.63.66-1.11 1.45-1.45 2.35-.34.9-.51 1.89-.51 2.96s.17 2.06.51 2.96c.34.9.83 1.69 1.45 2.35s1.37 1.18 2.21 1.54c.85.36 1.78.54 2.8.54 1.2 0 2.24-.2 3.13-.6.89-.4 1.63-.94 2.24-1.62l1.8 1.8c-.89.9-1.92 1.61-3.11 2.13-1.19.52-2.53.77-4.03.77zm10.32-.28v-19.21h2.6v19.21h-2.6zm5.7 0l7.89-19.21h1.88l7.83 19.21h-2.82l-6.48-16.25h1l-6.5 16.25h-2.8zm3.76-4.34v-2.27H470v2.27h-10.1zm16.72 4.34v-19.21h2.6v19.21h-2.6zm1.77 0v-2.38h10.29v2.38h-10.29zm19.02 0v-19.21h2.6v19.21h-2.6zm1.74-8.36v-2.19h5.2c1.13 0 1.99-.29 2.59-.86s.9-1.35.9-2.33c0-.92-.3-1.69-.9-2.3-.6-.61-1.45-.91-2.56-.91h-5.23v-2.27h5.31c1.22 0 2.28.24 3.18.71.9.47 1.6 1.11 2.09 1.92.49.81.73 1.74.73 2.79s-.25 2.04-.73 2.85c-.49.81-1.19 1.44-2.09 1.9-.9.45-1.96.68-3.18.68h-5.31zm9.33 8.36l-6.97-8.61 2.46-.86 7.8 9.46h-3.29zm5.98 0v-19.21h2.6v19.21h-2.6zm1.77-16.83v-2.38h10.88v2.38h-10.88zm0 8.16v-2.3h10.1v2.3h-10.1zm0 8.66v-2.38h11.01v2.38h-11.01zm13.11.01l7.89-19.21h1.88l7.83 19.21h-2.82l-6.48-16.25h1l-6.5 16.25h-2.8zm3.76-4.34v-2.27h10.1v2.27h-10.1zm24.23 4.62c-1.38 0-2.67-.25-3.85-.76a9.464 9.464 0 01-5.12-5.28c-.48-1.2-.72-2.48-.72-3.85s.24-2.67.72-3.88c.48-1.2 1.15-2.25 2.02-3.14.87-.9 1.89-1.6 3.07-2.1s2.45-.76 3.82-.76c1.53 0 2.87.26 4.01.78 1.14.52 2.16 1.22 3.04 2.1l-1.8 1.8a6.526 6.526 0 00-2.24-1.61c-.89-.39-1.89-.58-3.02-.58-1 0-1.92.18-2.77.54-.85.36-1.59.87-2.21 1.54-.63.66-1.11 1.45-1.45 2.35-.34.9-.51 1.89-.51 2.96s.17 2.06.51 2.96c.34.9.83 1.69 1.45 2.35s1.37 1.18 2.21 1.54c.85.36 1.78.54 2.8.54 1.2 0 2.24-.2 3.13-.6.89-.4 1.63-.94 2.24-1.62l1.8 1.8c-.89.9-1.92 1.61-3.11 2.13-1.19.52-2.53.77-4.03.77zm8.44-17.11v-2.38h15.64v2.38h-15.64zm6.5 16.83v-18.65h2.63v18.65h-2.63zm26.29.28c-1.37 0-2.64-.25-3.82-.76s-2.21-1.22-3.1-2.13-1.58-1.97-2.08-3.17-.75-2.48-.75-3.85.25-2.67.75-3.86 1.19-2.24 2.06-3.14c.88-.9 1.9-1.6 3.07-2.1s2.44-.75 3.81-.75 2.63.25 3.81.75c1.17.5 2.2 1.2 3.09 2.1.89.9 1.57 1.96 2.06 3.16.49 1.2.73 2.49.73 3.88s-.24 2.65-.73 3.85a9.842 9.842 0 01-2.05 3.16c-.88.9-1.9 1.61-3.07 2.12s-2.43.76-3.78.76zm-.06-2.49c1.37 0 2.57-.32 3.63-.96s1.88-1.51 2.48-2.63.9-2.39.9-3.83c0-1.07-.17-2.05-.51-2.95-.34-.89-.83-1.67-1.45-2.34a6.418 6.418 0 00-2.23-1.54c-.86-.36-1.79-.54-2.81-.54-1.37 0-2.57.31-3.62.94a6.674 6.674 0 00-2.48 2.6c-.6 1.11-.9 2.38-.9 3.82 0 1.07.17 2.06.53 2.97s.83 1.7 1.45 2.35c.62.66 1.36 1.17 2.21 1.54.86.37 1.79.55 2.81.55zm9.24 3.57l-9-9 1.69-1.69 8.97 9-1.66 1.69zm11.88-1.08c-1.42 0-2.69-.32-3.82-.97a7.196 7.196 0 01-2.67-2.64c-.66-1.12-.98-2.38-.98-3.78v-12.09h2.63v12.04c0 1.01.21 1.89.64 2.63.42.74 1 1.31 1.73 1.72.73.41 1.55.61 2.48.61s1.74-.2 2.45-.61c.71-.41 1.27-.98 1.69-1.72.42-.74.62-1.61.62-2.6v-12.07h2.63v12.12c0 1.4-.32 2.66-.97 3.76a7.21 7.21 0 01-2.63 2.63c-1.11.65-2.37.97-3.79.97zm11.68-.28v-19.21h2.6v19.21h-2.6zm1.77-16.83v-2.38h10.88v2.38h-10.88zm0 8.16v-2.3h10.1v2.3h-10.1zm0 8.66v-2.38h11.01v2.38h-11.01zm14.56.01v-19.21h2.6v19.21h-2.6zm1.74-8.36v-2.19h5.2c1.13 0 1.99-.29 2.59-.86s.9-1.35.9-2.33c0-.92-.3-1.69-.9-2.3-.6-.61-1.45-.91-2.56-.91h-5.23v-2.27h5.31c1.22 0 2.28.24 3.18.71.9.47 1.6 1.11 2.09 1.92.49.81.73 1.74.73 2.79s-.25 2.04-.73 2.85c-.49.81-1.19 1.44-2.09 1.9-.9.45-1.96.68-3.18.68h-5.31zm9.33 8.36l-6.97-8.61 2.46-.86 7.8 9.46h-3.29zm10.85-7.81l-7.55-11.4h3.04l6.09 9.33h-1.36l6.12-9.33h2.96l-7.61 11.4h-1.69zm-.42 7.8v-9.52h2.6v9.52h-2.6zm26.44.29c-1.38 0-2.67-.25-3.85-.76a9.464 9.464 0 01-5.12-5.28c-.48-1.2-.72-2.48-.72-3.85s.24-2.67.72-3.88c.48-1.2 1.15-2.25 2.02-3.14.87-.9 1.89-1.6 3.07-2.1s2.45-.76 3.82-.76c1.53 0 2.87.26 4.01.78 1.14.52 2.16 1.22 3.04 2.1l-1.8 1.8a6.526 6.526 0 00-2.24-1.61c-.89-.39-1.89-.58-3.02-.58-1 0-1.92.18-2.77.54-.85.36-1.59.87-2.21 1.54-.63.66-1.11 1.45-1.45 2.35-.34.9-.51 1.89-.51 2.96s.17 2.06.51 2.96c.34.9.83 1.69 1.45 2.35s1.37 1.18 2.21 1.54c.85.36 1.78.54 2.8.54 1.2 0 2.24-.2 3.13-.6.89-.4 1.63-.94 2.24-1.62l1.8 1.8c-.89.9-1.92 1.61-3.11 2.13-1.19.52-2.53.77-4.03.77zm18.29 0c-1.37 0-2.64-.25-3.82-.76-1.18-.51-2.21-1.22-3.1-2.13s-1.58-1.97-2.08-3.17-.75-2.48-.75-3.85.25-2.67.75-3.86 1.19-2.24 2.06-3.14c.88-.9 1.9-1.6 3.07-2.1s2.44-.75 3.81-.75 2.63.25 3.81.75c1.17.5 2.2 1.2 3.09 2.1.88.9 1.58 1.96 2.08 3.16.5 1.2.75 2.49.75 3.88s-.25 2.65-.75 3.85c-.5 1.2-1.19 2.25-2.06 3.16-.88.9-1.9 1.61-3.07 2.12s-2.43.76-3.78.76zm-.05-2.49c1.37 0 2.57-.32 3.62-.96s1.88-1.51 2.48-2.63.9-2.39.9-3.83c0-1.07-.17-2.05-.51-2.95-.34-.89-.83-1.67-1.45-2.34a6.53 6.53 0 00-2.21-1.54c-.85-.36-1.79-.54-2.82-.54-1.37 0-2.57.31-3.61.94a6.696 6.696 0 00-2.46 2.6c-.6 1.11-.9 2.38-.9 3.82 0 1.07.17 2.06.51 2.97s.82 1.7 1.44 2.35c.62.66 1.36 1.17 2.21 1.54.86.37 1.79.55 2.81.55zm20.5 2.49c-1.42 0-2.69-.32-3.82-.97a7.196 7.196 0 01-2.67-2.64c-.66-1.12-.98-2.38-.98-3.78v-12.09h2.63v12.04c0 1.01.21 1.89.64 2.63.42.74 1 1.31 1.73 1.72.73.41 1.55.61 2.48.61s1.74-.2 2.45-.61c.71-.41 1.27-.98 1.69-1.72.42-.74.62-1.61.62-2.6v-12.07h2.63v12.12c0 1.4-.32 2.66-.97 3.76a7.21 7.21 0 01-2.63 2.63c-1.11.65-2.37.97-3.79.97zm11.68-.28v-19.21h2.6v19.21h-2.6zm1.74-8.36v-2.19h5.2c1.13 0 1.99-.29 2.59-.86s.9-1.35.9-2.33c0-.92-.3-1.69-.9-2.3-.6-.61-1.45-.91-2.56-.91h-5.23v-2.27h5.31c1.22 0 2.28.24 3.18.71.9.47 1.6 1.11 2.09 1.92.49.81.73 1.74.73 2.79s-.25 2.04-.73 2.85c-.49.81-1.19 1.44-2.09 1.9-.9.45-1.96.68-3.18.68h-5.31zm9.33 8.36l-6.97-8.61 2.46-.86 7.8 9.46h-3.29zm10.71.28c-1.49 0-2.78-.28-3.85-.83-1.07-.55-2.02-1.36-2.85-2.41l1.77-1.77c.61.85 1.31 1.49 2.1 1.92.79.43 1.77.65 2.93.65s2.06-.25 2.75-.75 1.04-1.18 1.04-2.05c0-.72-.17-1.3-.51-1.74a3.92 3.92 0 00-1.34-1.09c-.55-.29-1.16-.54-1.83-.76s-1.33-.47-1.99-.73c-.66-.27-1.28-.6-1.84-1.01-.56-.41-1.01-.93-1.34-1.56s-.5-1.45-.5-2.45c0-1.09.26-2.02.79-2.78.53-.77 1.25-1.36 2.16-1.77.91-.42 1.94-.62 3.09-.62 1.25 0 2.38.25 3.38.73 1 .49 1.81 1.13 2.44 1.92l-1.77 1.77c-.57-.66-1.19-1.16-1.84-1.5-.65-.33-1.41-.5-2.25-.5-1.03 0-1.85.23-2.46.68-.61.45-.91 1.08-.91 1.9 0 .65.17 1.17.51 1.56.34.4.79.73 1.34 1.01s1.17.53 1.84.76c.67.23 1.34.48 2.01.76.67.28 1.27.63 1.83 1.05.55.42 1 .97 1.34 1.65.34.67.51 1.52.51 2.53 0 1.7-.59 3.03-1.76 3.99s-2.76 1.44-4.77 1.44zm10.05-.28v-19.21h2.6v19.21h-2.6zm1.77-16.83v-2.38h10.88v2.38h-10.88zm0 8.16v-2.3h10.1v2.3h-10.1zm0 8.66v-2.38h11.01v2.38h-11.01z"
+          fill="#231f20"
+          className="fill-gray-800 dark:fill-gray-100"
+        />
+        <path
+          fill="#fff"
+          stroke="#111827"
+          strokeLinejoin="round"
+          strokeWidth={1.12}
+          d="M201.81 55.58c-7.43 0-13.47-10.04-13.47-22.39 0-.38-.31-.69-.69-.69s-.69.31-.69.69c0 12.35-6.04 22.39-13.47 22.39-.38 0-.69.31-.69.69s.31.69.69.69c7.43 0 13.47 10.04 13.47 22.39 0 .38.31.69.69.69s.69-.31.69-.69c0-12.35 6.04-22.39 13.47-22.39.38 0 .69-.31.69-.69s-.31-.69-.69-.69zM47.79 151.1c-4.82 0-8.73-6.51-8.73-14.51 0-.25-.2-.44-.44-.44s-.44.2-.44.44c0 8-3.92 14.51-8.73 14.51-.25 0-.44.2-.44.44s.2.44.44.44c4.82 0 8.73 6.51 8.73 14.51 0 .25.2.44.44.44s.44-.2.44-.44c0-8 3.92-14.51 8.73-14.51.25 0 .44-.2.44-.44s-.2-.44-.44-.44zM165.87 48.16c-4.03 0-7.3-5.44-7.3-12.13a.37.37 0 10-.74 0c0 6.69-3.27 12.13-7.3 12.13a.37.37 0 100 .74c4.03 0 7.3 5.44 7.3 12.13a.37.37 0 10.74 0c0-6.69 3.27-12.13 7.3-12.13a.37.37 0 100-.74z"
+        />
+        <g
+          fill="#fff"
+          stroke="#111827"
+          strokeLinejoin="round"
+          strokeWidth={1.12}
+        >
+          <path d="M117.47 128.67l-15.37 6.3L118.46 153l-.99-24.33zM70.93 58.89l15.38-6.3-16.37-18.03.99 24.33zm15.43 76.09l-15.38-6.27-.96 24.32 16.34-18.05zm15.68-82.4l15.39 6.28.95-24.33-16.34 18.05zm-42.51 64.79l-6.44-15.31-17.88 16.52 24.32-1.21zm69.35-47.17l6.44 15.31 17.88-16.53-24.32 1.22zM53 85.94l6.28-15.38-24.33-.96L53 85.94zm82.4 15.68l-6.27 15.39 24.32.95-18.05-16.34z" />
+          <path d="M85.9 52.67h16.61L94.2 29.79l-8.3 22.88zm16.61 82.22H85.9l8.3 22.89 8.31-22.89zm32.8-49.41v16.61l22.89-8.31-22.89-8.3zm-82.22 16.61V85.48l-22.88 8.3 22.88 8.31zm76.05 14.89l-11.74 11.74 22.05 10.31-10.31-22.05zM59.26 70.59l11.75-11.75-22.06-10.31 10.31 22.06zm58.14-11.75l11.74 11.75 10.31-22.06-22.05 10.31zm-46.39 69.88l-11.75-11.74-10.31 22.05 22.06-10.31z" />
+          <path d="M64.38 64.29l13.79-9.26-14.27-6.35.48 15.61zm59.64 58.98l-13.79 9.27 14.27 6.34-.48-15.61zM93.97 51.84l16.3 3.2-5.6-14.57-10.7 11.37zm.46 83.88l-16.3-3.2 5.61 14.58 10.69-11.38zm29.26-71.76l9.27 13.79 6.34-14.27-15.61.48zM64.71 123.6l-9.26-13.79-6.35 14.27 15.61-.48zm71.43-30.05l-3.2 16.3 14.58-5.6-11.38-10.7zm-83.88.46l3.2-16.3-14.57 5.61 11.37 10.69z" />
+        </g>
         <circle
           cx={94.2}
           cy={94.03}
@@ -378,10 +410,45 @@ export function LogoQueryGG({ size = 'default', ...props }: LogoQueryGGProps) {
           d="M90.33 102.7c0-.98.79-1.77 1.77-1.77s1.77.79 1.77 1.77m.67 0c0-.98.79-1.77 1.77-1.77s1.77.79 1.77 1.77"
           fill="#111827"
         />
+        <g stroke="#111827" strokeLinejoin="round" strokeWidth={1.12}>
+          <path
+            fill="#fff"
+            d="M944.33 150.56c-6.15 0-11.16-8.32-11.16-18.54 0-.31-.25-.57-.57-.57s-.57.25-.57.57c0 10.22-5 18.54-11.16 18.54-.31 0-.57.25-.57.57s.25.57.57.57c6.15 0 11.16 8.32 11.16 18.54 0 .31.25.57.57.57s.57-.25.57-.57c0-10.22 5-18.54 11.16-18.54.31 0 .57-.25.57-.57s-.25-.57-.57-.57zm16.19-7.31c-3.25 0-5.9-4.4-5.9-9.81 0-.17-.13-.3-.3-.3s-.3.13-.3.3c0 5.41-2.65 9.81-5.9 9.81-.17 0-.3.13-.3.3s.13.3.3.3c3.25 0 5.9 4.4 5.9 9.81 0 .17.13.3.3.3s.3-.13.3-.3c0-5.41 2.65-9.81 5.9-9.81.17 0 .3-.13.3-.3s-.13-.3-.3-.3zM1066.56 40.8c-3.84 0-6.96-5.19-6.96-11.56 0-.2-.16-.35-.35-.35s-.35.16-.35.35c0 6.37-3.12 11.56-6.96 11.56-.2 0-.35.16-.35.35s.16.35.35.35c3.84 0 6.96 5.19 6.96 11.56 0 .2.16.35.35.35s.35-.16.35-.35c0-6.37 3.12-11.56 6.96-11.56.2 0 .35-.16.35-.35s-.16-.35-.35-.35z"
+          />
+          <circle cx={998.48} cy={94.03} r={43.44} fill="#fff" />
+          <path
+            fill="none"
+            strokeLinecap="round"
+            d="M975.01 111.59c3.46 5.44 10.57 12.93 23.47 12.93s19.74-7.21 23.27-12.62"
+          />
+          <path
+            fill="none"
+            strokeLinecap="round"
+            d="M1008.01 122.97s-4.99 5.24-9.53 5.24-9.64-5.28-9.64-5.28m-20.12-60.54c1.8-.55 3.71-.85 5.69-.85 10.7 0 19.37 8.67 19.37 19.37v14.2"
+          />
+          <path
+            fill="none"
+            strokeLinecap="round"
+            d="M983 53.43c6.39 3.17 10.78 9.75 10.78 17.36v14.2m20.17-31.56c-6.39 3.17-10.78 9.75-10.78 17.36v14.2"
+          />
+          <path
+            fill="none"
+            strokeLinecap="round"
+            d="M1028.24 62.39c-1.8-.55-3.71-.85-5.69-.85-10.7 0-19.37 8.67-19.37 19.37v14.2m4.83 27.86c-3.25-8.45-9.53-1.4-9.53-1.4h-.13s-6.27-7.09-9.51 1.36M972.55 91.33s1.9 5.4 8.81 5.4 8.81-5.4 8.81-5.4m16.35 0s1.9 5.4 8.81 5.4 8.81-5.4 8.81-5.4"
+          />
+          <g fill="none" strokeLinecap="round">
+            <path d="M991.06 78.71c1.73 2.9 2.73 6.29 2.73 9.91v14.2a4.7 4.7 0 009.4 0v-14.2c0-3.65 1.01-7.07 2.77-9.99m-14.9.08c-3.38-5.67-9.57-9.46-16.65-9.46s-13.4 3.87-16.75 9.64" />
+            <path d="M1039.04 78.46c-3.41-5.53-9.52-9.21-16.5-9.21s-13.21 3.76-16.6 9.39" />
+          </g>
+          <path
+            fill="#fff"
+            d="M1049.56 94.49l4.62 9.37 10.35 1.51-7.49 7.29 1.77 10.31-9.25-4.87-9.26 4.87 1.77-10.31-7.48-7.29 10.34-1.51 4.63-9.37zm-87.45-43.65l4.62 9.37 10.35 1.51-7.49 7.29 1.77 10.31-9.25-4.87-9.26 4.87 1.77-10.31-7.49-7.29 10.35-1.51 4.63-9.37zm-18.12 29.07l2.14 4.33 4.79.69-3.47 3.38.82 4.76-4.28-2.25-4.27 2.25.81-4.76-3.46-3.38 4.78-.69 2.14-4.33zm14.99 17.46l2.38 4.82 5.31.77-3.84 3.75.9 5.3-4.75-2.5-4.76 2.5.91-5.3-3.84-3.75 5.31-.77 2.38-4.82zm82.93-20.27l2.14 4.33 4.79.7-3.46 3.37.81 4.76-4.28-2.24-4.27 2.24.81-4.76-3.46-3.37 4.79-.7 2.13-4.33z"
+          />
+        </g>
         <path
           fill="#231f20"
           className="fill-gray-800 dark:fill-gray-100"
-          d="M549.98 19.75h-61.25L549.98 81l61.25-61.25h-61.25zm10.55 13.09c1.26 0 2.38 1 2.39 2.23-.02 1.26-1.14 2.26-2.39 2.26-1.33 0-2.41-1-2.39-2.26-.02-1.23 1.07-2.23 2.39-2.23zm-5.33 9.11c0 4.47-3.57 6.88-9.06 6.88s-9.06-2.41-9.06-6.88V29.04h5.7v12.68c0 1.45 1.27 2.44 3.36 2.44s3.4-.99 3.4-2.44V29.04h5.66v12.91zm7.69-.33c-.2 2.63-1.23 5.1-1.88 6.52l-.28.67h-.82l-1.51.01h-1.6l.45-1.43c.44-1.5.98-3.68.98-5.78l-.02-1.21h4.67v1.21z"
+          d="M550,18.47h-62.53l62.53,62.53,62.53-62.53h-62.53ZM554.77,55.22c.12-.59.3-1.17.35-1.76.04-.57-.06-1.14-.12-1.87-.75.87-1.28,1.61-1.98,2.24-.74.66-1.84.82-3.03.94.15-.47.3-.84.39-1.22.2-.78,0-1.5-.72-2.1-.7-.59-1.39-1.18-2.17-1.71-1.67-1.14-2.22-2.59-2.15-4.22,0-.18,0-.36-.1-.57-1.41,1.49-2.33,3.13-2.63,4.96-.31,1.92.6,3.55,2.37,5.15-.43-.1-.62-.13-.79-.19-5.22-1.85-7.34-6.07-4.95-10.21.96-1.67,2.27-3.24,3.58-4.77,2.36-2.77,3.57-5.79,3.9-9.05.01-.15.04-.29.07-.43.01-.06.07-.11.11-.17.08.02.18.02.23.05,3.52,2.95,6.45,6.17,7.97,10.03,1.14,2.89,1.12,5.71-.89,8.41-.09.12-.11.26-.18.41,1.86-.21,3.97-1.9,4.39-3.41.42-1.52.22-2.98-.43-4.43-.11-.23-.2-.47-.31-.72,1.89.38,4.15,4.26,4.05,6.91-.14,3.63-3.33,7.18-6.95,7.73Z"
         />
       </svg>
     </div>
diff --git a/src/ui/MarkdownImg.tsx b/src/ui/MarkdownImg.tsx
index 141dac6bf..3ea4c93d2 100644
--- a/src/ui/MarkdownImg.tsx
+++ b/src/ui/MarkdownImg.tsx
@@ -1,22 +1,91 @@
 import * as React from 'react'
 import type { HTMLProps } from 'react'
-import { getNetlifyImageUrl } from '~/utils/netlifyImage'
+import { getOptimizedImageUrl } from '~/utils/optimizedImage'
+import { getPublicImageDimensions } from '~/utils/publicImageDimensions'
+
+const DEFAULT_TRANSFORM_WIDTH = 1200
+
+export type MarkdownImgProps = HTMLProps<HTMLImageElement> & {
+  priority?: boolean
+}
 
 export const MarkdownImg = React.memo(function MarkdownImg({
   alt,
   src,
   className,
+  width,
+  height,
+  style,
+  priority,
   children: _,
   ...props
-}: HTMLProps<HTMLImageElement>) {
+}: MarkdownImgProps) {
+  const sourceDimensions = src ? getPublicImageDimensions(src) : undefined
+  const providedWidth = parseDimension(width)
+  const providedHeight = parseDimension(height)
+  const inferredWidth =
+    sourceDimensions && width === undefined
+      ? Math.min(sourceDimensions.width, 800)
+      : providedWidth
+  const inferredHeight =
+    sourceDimensions && height === undefined && inferredWidth
+      ? Math.round(
+          inferredWidth * (sourceDimensions.height / sourceDimensions.width),
+        )
+      : providedHeight
+  const resolvedWidth = width ?? inferredWidth
+  const resolvedHeight = height ?? inferredHeight
+  const numericWidth =
+    typeof resolvedWidth === 'number'
+      ? resolvedWidth
+      : (parseDimension(width) ?? DEFAULT_TRANSFORM_WIDTH)
+  const numericHeight =
+    typeof resolvedHeight === 'number' ? resolvedHeight : parseDimension(height)
+  const aspectRatio =
+    numericWidth && numericHeight
+      ? `auto ${numericWidth} / ${numericHeight}`
+      : src?.toLowerCase().endsWith('.svg')
+        ? 'auto 3 / 1'
+        : 'auto 16 / 9'
+
   return (
     <img
       {...props}
-      src={src ? getNetlifyImageUrl(src) : undefined}
+      src={
+        src
+          ? getOptimizedImageUrl(src, {
+              format: 'auto',
+              height: numericHeight,
+              quality: 80,
+              width: numericWidth,
+            })
+          : undefined
+      }
       alt={alt ?? ''}
-      className={`max-w-full h-auto rounded-lg shadow-md ${className ?? ''}`}
-      loading="lazy"
+      width={resolvedWidth}
+      height={resolvedHeight}
+      style={{
+        aspectRatio,
+        ...style,
+      }}
+      className={`block max-w-full h-auto rounded-lg shadow-md ${className ?? ''}`}
+      loading={priority ? 'eager' : 'lazy'}
+      fetchPriority={priority ? 'high' : undefined}
       decoding="async"
     />
   )
 })
+
+function parseDimension(value: HTMLProps<HTMLImageElement>['width']) {
+  if (typeof value === 'number') {
+    return value
+  }
+
+  if (typeof value !== 'string') {
+    return undefined
+  }
+
+  const parsed = Number(value)
+
+  return Number.isFinite(parsed) ? parsed : undefined
+}
diff --git a/src/ui/Tooltip.tsx b/src/ui/Tooltip.tsx
new file mode 100644
index 000000000..f64905a27
--- /dev/null
+++ b/src/ui/Tooltip.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { twMerge } from 'tailwind-merge'
+
+interface TooltipProps {
+  children: React.ReactNode
+  content: React.ReactNode
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  delayDuration?: number
+  className?: string
+}
+
+export function Tooltip({
+  children,
+  content,
+  side = 'top',
+  align = 'center',
+  delayDuration = 200,
+  className,
+}: TooltipProps) {
+  if (!content) {
+    return <>{children}</>
+  }
+
+  return (
+    <TooltipPrimitive.Provider delayDuration={delayDuration}>
+      <TooltipPrimitive.Root>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            side={side}
+            align={align}
+            sideOffset={5}
+            className={twMerge(
+              'z-50 rounded-lg px-3 py-2 text-xs',
+              'bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900',
+              'shadow-lg',
+              'animate-in fade-in-0 zoom-in-95',
+              'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+              className,
+            )}
+          >
+            {content}
+            <TooltipPrimitive.Arrow className="fill-gray-900 dark:fill-gray-100" />
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  )
+}
diff --git a/src/ui/index.ts b/src/ui/index.ts
index f341db8fc..ddf58e65e 100644
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -4,3 +4,5 @@ export { FormInput } from './FormInput'
 export { InlineCode } from './InlineCode'
 export { MarkdownImg } from './MarkdownImg'
 export { LogoQueryGG } from './LogoQueryGG'
+export { Tooltip } from './Tooltip'
+export { GitHub } from './Icons'
diff --git a/src/utils/activity.functions.ts b/src/utils/activity.functions.ts
index 95638262a..d10998404 100644
--- a/src/utils/activity.functions.ts
+++ b/src/utils/activity.functions.ts
@@ -52,7 +52,7 @@ export const getActivityStatsAdmin = createServerFn({ method: 'POST' }).handler(
  * Get daily active user data for charts with configurable time range
  */
 export const getDauChartData = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       days: v.optional(v.nullable(v.number())), // null = all time
     }),
diff --git a/src/utils/admin.ts b/src/utils/admin.ts
deleted file mode 100644
index 895e7629b..000000000
--- a/src/utils/admin.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { createServerFn } from '@tanstack/react-start'
-import { requireCapability } from './auth.server'
-import { syncAllSources } from '~/server/feed/sync-all'
-import { syncGitHubReleases } from '~/server/feed/github'
-import { syncBlogPosts } from '~/server/feed/blog'
-
-// Server function to sync all feed sources (admin only)
-export const syncAllFeedSources = createServerFn({ method: 'POST' }).handler(
-  async () => {
-    await requireCapability({ data: { capability: 'admin' } })
-    return await syncAllSources()
-  },
-)
-
-// Server function to sync GitHub releases only (admin only)
-export const syncGitHubSource = createServerFn({ method: 'POST' }).handler(
-  async () => {
-    await requireCapability({ data: { capability: 'admin' } })
-    const result = await syncGitHubReleases()
-    return {
-      success: result.success,
-      syncedCount: result.syncedCount,
-      errorCount: result.errorCount,
-      skippedCount: result.skippedCount,
-    }
-  },
-)
-
-// Server function to sync blog posts only (admin only)
-export const syncBlogSource = createServerFn({ method: 'POST' }).handler(
-  async () => {
-    await requireCapability({ data: { capability: 'admin' } })
-    return await syncBlogPosts()
-  },
-)
diff --git a/src/utils/analytics.ts b/src/utils/analytics.ts
new file mode 100644
index 000000000..862fcc067
--- /dev/null
+++ b/src/utils/analytics.ts
@@ -0,0 +1,235 @@
+import * as React from 'react'
+import { googleAnalyticsProvider } from './analytics/providers/google'
+import type {
+  AnalyticsEventName,
+  AnalyticsEventProps,
+} from './analytics/events'
+import type { AnalyticsPropertyValue, EventPayload } from './analytics/types'
+
+export type {
+  AnalyticsEvent,
+  AnalyticsEventName,
+  AnalyticsEventProps,
+  BuilderAction,
+  BuilderFailureStage,
+  BuilderMode,
+  BuilderSessionContext,
+  BuilderSurface,
+  PartnerClickDestination,
+  PartnerFilterChange,
+  PartnerPlacement,
+} from './analytics/events'
+export { defaultBuilderSessionContext } from './analytics/events'
+
+interface ImpressionOptions<TName extends AnalyticsEventName> {
+  enabled?: boolean
+  event: TName
+  props: AnalyticsEventProps<TName>
+  threshold?: number
+}
+
+function getPageType(pathname: string) {
+  if (pathname === '/') {
+    return 'home'
+  }
+
+  if (pathname.startsWith('/partners/')) {
+    return pathname === '/partners/' || pathname === '/partners'
+      ? 'partners_index'
+      : 'partner_detail'
+  }
+
+  if (pathname.startsWith('/blog/')) {
+    return pathname === '/blog/' || pathname === '/blog'
+      ? 'blog_index'
+      : 'blog_post'
+  }
+
+  if (pathname.startsWith('/docs/') || pathname.includes('/docs/')) {
+    return 'docs'
+  }
+
+  if (pathname.startsWith('/partners-embed')) {
+    return 'partners_embed'
+  }
+
+  if (
+    pathname === '/builder' ||
+    pathname === '/builder/' ||
+    pathname.startsWith('/builder/')
+  ) {
+    return 'application_builder'
+  }
+
+  return 'page'
+}
+
+function normalizeAnalyticsValue(
+  value: unknown,
+): AnalyticsPropertyValue | undefined {
+  if (
+    typeof value === 'boolean' ||
+    typeof value === 'number' ||
+    typeof value === 'string'
+  ) {
+    return value
+  }
+
+  if (value === null || value === undefined) {
+    return undefined
+  }
+
+  if (Array.isArray(value)) {
+    const normalizedEntries = value
+      .map((entry) => normalizeAnalyticsValue(entry))
+      .filter((entry) => entry !== undefined)
+
+    return normalizedEntries.join(',')
+  }
+
+  try {
+    return JSON.stringify(value)
+  } catch {
+    return String(value)
+  }
+}
+
+// Accepts any object — call sites pass typed event props which carry
+// specific keys. We just iterate string-keyed values, so an exact shape
+// isn't needed.
+function buildEventPayload(props: object): EventPayload {
+  const payload: EventPayload = {}
+
+  if (typeof window !== 'undefined') {
+    payload.page_location = window.location.href
+    payload.page_path = window.location.pathname
+    payload.page_title = document.title
+    payload.page_type = getPageType(window.location.pathname)
+  }
+
+  for (const [key, value] of Object.entries(props)) {
+    const normalized = normalizeAnalyticsValue(value)
+
+    if (normalized === undefined) {
+      continue
+    }
+
+    payload[key] = normalized
+  }
+
+  return payload
+}
+
+const analyticsProviders = [googleAnalyticsProvider]
+
+/**
+ * Track an analytics event. Type-safe — the event name determines which
+ * properties are required. See `.agents/analytics.md` for what each event
+ * means in the user flow.
+ *
+ * @example
+ *   trackEvent('partner_clicked', {
+ *     partner_id: 'vercel',
+ *     placement: 'directory',
+ *     destination: 'internal_detail',
+ *   })
+ */
+export function trackEvent<TName extends AnalyticsEventName>(
+  name: TName,
+  props: AnalyticsEventProps<TName>,
+): void {
+  const payload = buildEventPayload(props)
+
+  for (const provider of analyticsProviders) {
+    try {
+      provider.trackEvent(name, payload)
+    } catch {
+      // Analytics failures should never affect user flows.
+    }
+  }
+}
+
+/**
+ * Track an SPA page view. Called from the root route on navigation.
+ */
+export function trackPageView(pagePath: string) {
+  trackEvent('page_view', {
+    page_location: window.location.href,
+    page_path: pagePath,
+    page_title: document.title,
+  })
+}
+
+/**
+ * Fire a typed event when an element scrolls into view. Fires once per
+ * element-mount per session (the IntersectionObserver disconnects after
+ * the first crossing of the threshold).
+ *
+ * Note on behavior: when the host element unmounts and remounts (e.g.
+ * because of a parent's filter change), the impression re-fires. Dedup
+ * in BigQuery if you need session-unique impression counts.
+ */
+export function useTrackedImpression<
+  TName extends AnalyticsEventName,
+  TElement extends Element = Element,
+>({ enabled = true, event, props, threshold = 0.5 }: ImpressionOptions<TName>) {
+  const ref = React.useRef<TElement | null>(null)
+  const hasTrackedRef = React.useRef(false)
+  const propsRef = React.useRef(props)
+
+  React.useEffect(() => {
+    propsRef.current = props
+  }, [props])
+
+  React.useEffect(() => {
+    if (!enabled || hasTrackedRef.current) {
+      return
+    }
+
+    const element = ref.current
+    if (!element) {
+      return
+    }
+
+    const track = () => {
+      if (hasTrackedRef.current) {
+        return
+      }
+
+      hasTrackedRef.current = true
+      trackEvent(event, propsRef.current)
+    }
+
+    if (typeof IntersectionObserver === 'undefined') {
+      track()
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) {
+            continue
+          }
+
+          if (entry.intersectionRatio < threshold) {
+            continue
+          }
+
+          track()
+          observer.disconnect()
+          return
+        }
+      },
+      { threshold: [threshold] },
+    )
+
+    observer.observe(element)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [enabled, event, threshold])
+
+  return ref
+}
diff --git a/src/utils/analytics/events.ts b/src/utils/analytics/events.ts
new file mode 100644
index 000000000..b5914abbc
--- /dev/null
+++ b/src/utils/analytics/events.ts
@@ -0,0 +1,178 @@
+/**
+ * Typed event registry for GA4 analytics.
+ *
+ * Source of truth for every event the site emits. The discriminated union
+ * means wrong/missing props for a given event name produce a TypeScript
+ * error at the call site rather than silent bad data downstream.
+ *
+ * See `.agents/analytics.md` for the human-readable reference (event
+ * meanings, funnel definition, custom dimensions, BigQuery setup).
+ */
+
+import type { PartnerPlacementOrderStrategy } from '../partner-placement'
+
+// ---------- Enums ----------
+
+export type PartnerPlacement =
+  | 'directory'
+  | 'detail'
+  | 'docs_rail'
+  | 'blog_rail'
+  | 'grid'
+  | 'home_grid'
+  | 'library_grid'
+  | 'embed_grid'
+  | 'docs_strip'
+  | 'ecosystem_game'
+  | 'partners_index_cta'
+  | 'library_callout'
+
+export type PartnerClickDestination = 'external' | 'internal_detail'
+
+export type PartnerTierValue = 'gold' | 'silver' | 'bronze'
+
+export type PartnerFilterChange =
+  | 'libraries_changed'
+  | 'status_changed'
+  | 'cleared_all'
+
+export type BuilderMode = 'lucky' | 'confident' | 'none'
+
+export type BuilderAction =
+  | 'copy_prompt'
+  | 'deploy'
+  | 'clone_repo'
+  | 'open_codex'
+  | 'open_claude'
+  | 'open_cursor'
+  | 'download'
+  | 'open_advanced'
+  | 'netlify_start'
+  | 'provider_redirect_manual'
+  | 'provider_redirect_auto'
+  | 'open_repo'
+
+export type BuilderSurface = 'result_panel' | 'deploy_dialog'
+
+export type BuilderFailureStage = 'analysis' | 'generation' | 'login_blocked'
+
+// ---------- Session context ----------
+
+/**
+ * Slow-changing context stamped on every builder event so any breakdown
+ * works in GA4 without joining sessions in BigQuery.
+ */
+export interface BuilderSessionContext {
+  mode_used: BuilderMode
+  idea_used: string
+}
+
+// ---------- Event union ----------
+
+export type AnalyticsEvent =
+  | {
+      name: 'page_view'
+      props: {
+        page_location: string
+        page_path: string
+        page_title: string
+      }
+    }
+  | {
+      name: 'partner_viewed'
+      props: {
+        partner_id: string
+        order_strategy?: PartnerPlacementOrderStrategy
+        placement: PartnerPlacement
+        partner_tier?: PartnerTierValue
+        rotation_seed?: string
+        slot_index?: number
+      }
+    }
+  | {
+      name: 'partner_clicked'
+      props: {
+        partner_id: string
+        placement: PartnerPlacement
+        destination: PartnerClickDestination
+        destination_host?: string
+        order_strategy?: PartnerPlacementOrderStrategy
+        partner_tier?: PartnerTierValue
+        rotation_seed?: string
+        slot_index?: number
+      }
+    }
+  | {
+      name: 'partner_filter_applied'
+      props: {
+        change: PartnerFilterChange
+        library_filters: string
+        status_filter: string | null
+        result_count: number
+      }
+    }
+  | {
+      name: 'partner_inquiry_started'
+      props: {
+        placement: PartnerPlacement
+      }
+    }
+  | {
+      name: 'builder_analyzed'
+      props: BuilderSessionContext & {
+        analysis_deployment?: string
+        inferred_library_count: number
+        inferred_partner_count: number
+        feature_count: number
+      }
+    }
+  | {
+      name: 'builder_generated'
+      props: BuilderSessionContext & {
+        final_deployment?: string
+        final_package_manager?: string
+        final_library_count: number
+        final_partner_count: number
+        final_addon_count: number
+        library_ids: string
+        partner_ids: string
+        addon_ids: string
+      }
+    }
+  | {
+      name: 'builder_failed'
+      props: BuilderSessionContext & {
+        stage: BuilderFailureStage
+        error_message?: string
+        retry_after?: number
+        anonymous_generations_remaining?: number
+      }
+    }
+  | {
+      name: 'builder_activated'
+      props: BuilderSessionContext & {
+        action: BuilderAction
+        surface: BuilderSurface
+        provider?: string
+        automatic: boolean
+      }
+    }
+
+// ---------- Helper types ----------
+
+export type AnalyticsEventName = AnalyticsEvent['name']
+
+export type AnalyticsEventProps<TName extends AnalyticsEventName> = Extract<
+  AnalyticsEvent,
+  { name: TName }
+>['props']
+
+/**
+ * Default session context for new builder sessions. `mode_used = 'none'`
+ * means the user hasn't picked Lucky or Confident yet; `idea_used = 'none'`
+ * means they haven't selected a suggested idea.
+ */
+export const defaultBuilderSessionContext: BuilderSessionContext = {
+  mode_used: 'none',
+  idea_used: 'none',
+}
diff --git a/src/utils/analytics/providers/google.ts b/src/utils/analytics/providers/google.ts
new file mode 100644
index 000000000..d9bf78ff9
--- /dev/null
+++ b/src/utils/analytics/providers/google.ts
@@ -0,0 +1,18 @@
+import type { AnalyticsProvider } from '../types'
+
+declare global {
+  interface Window {
+    dataLayer: unknown[] | undefined
+    gtag: ((...args: unknown[]) => void) | undefined
+  }
+}
+
+export const googleAnalyticsProvider: AnalyticsProvider = {
+  trackEvent(event, properties) {
+    if (typeof window === 'undefined' || !window.gtag) {
+      return
+    }
+
+    window.gtag('event', event, properties)
+  },
+}
diff --git a/src/utils/analytics/types.ts b/src/utils/analytics/types.ts
new file mode 100644
index 000000000..6ddf56bcc
--- /dev/null
+++ b/src/utils/analytics/types.ts
@@ -0,0 +1,7 @@
+export type AnalyticsPropertyValue = boolean | number | string
+export type EventProperties = Record<string, unknown>
+export type EventPayload = Record<string, AnalyticsPropertyValue>
+
+export type AnalyticsProvider = {
+  trackEvent: (event: string, properties: EventPayload) => void
+}
diff --git a/src/utils/api-boundary.server.ts b/src/utils/api-boundary.server.ts
new file mode 100644
index 000000000..f99e0987a
--- /dev/null
+++ b/src/utils/api-boundary.server.ts
@@ -0,0 +1,229 @@
+export type ApiBoundaryError = {
+  message: string
+  status: number
+}
+
+export type JsonBodyResult =
+  | { success: true; body: unknown }
+  | { success: false; error: ApiBoundaryError }
+
+export type TextBodyResult =
+  | { success: true; text: string }
+  | { success: false; error: ApiBoundaryError }
+
+export type JsonRequestGuardOptions = {
+  maxContentLength?: number
+  requireSameOrigin?: boolean
+}
+
+const DEFAULT_JSON_MAX_CONTENT_LENGTH = 64 * 1024
+
+export function jsonResponse(
+  body: unknown,
+  init?: ResponseInit & { headers?: HeadersInit },
+) {
+  const headers = new Headers(init?.headers)
+  headers.set('Content-Type', 'application/json')
+
+  if (!headers.has('Cache-Control')) {
+    headers.set('Cache-Control', 'no-store')
+  }
+
+  return new Response(JSON.stringify(body), {
+    ...init,
+    headers,
+  })
+}
+
+export function jsonError(
+  message: string,
+  status: number,
+  headers?: HeadersInit,
+) {
+  return jsonResponse({ error: message }, { status, headers })
+}
+
+export function validateContentLength(
+  request: Request,
+  maxContentLength: number,
+): ApiBoundaryError | null {
+  const header = request.headers.get('content-length')
+
+  if (!header) {
+    return null
+  }
+
+  const contentLength = Number(header)
+  if (!Number.isFinite(contentLength) || contentLength < 0) {
+    return { message: 'Invalid content-length header', status: 400 }
+  }
+
+  if (contentLength > maxContentLength) {
+    return { message: 'Request body too large', status: 413 }
+  }
+
+  return null
+}
+
+export function validateJsonRequest(
+  request: Request,
+  options: JsonRequestGuardOptions = {},
+): ApiBoundaryError | null {
+  const contentLengthError = validateContentLength(
+    request,
+    options.maxContentLength ?? DEFAULT_JSON_MAX_CONTENT_LENGTH,
+  )
+
+  if (contentLengthError) {
+    return contentLengthError
+  }
+
+  const contentType = request.headers.get('content-type') || ''
+  if (!contentType.toLowerCase().includes('application/json')) {
+    return {
+      message: 'Expected application/json request body',
+      status: 415,
+    }
+  }
+
+  if (options.requireSameOrigin ?? true) {
+    return validateSameOriginRequest(request)
+  }
+
+  return null
+}
+
+export function validateSameOriginRequest(request: Request) {
+  const requestUrl = new URL(request.url)
+  const origin = request.headers.get('origin')
+  const referer = request.headers.get('referer')
+  const secFetchSite = request.headers.get('sec-fetch-site')
+
+  if (origin && origin !== requestUrl.origin) {
+    return {
+      message: 'Cross-origin requests are not allowed',
+      status: 403,
+    }
+  }
+
+  if (referer) {
+    try {
+      const refererUrl = new URL(referer)
+      if (refererUrl.origin !== requestUrl.origin) {
+        return {
+          message: 'Cross-origin requests are not allowed',
+          status: 403,
+        }
+      }
+    } catch {
+      return {
+        message: 'Invalid referer header',
+        status: 400,
+      }
+    }
+  }
+
+  if (
+    secFetchSite &&
+    !['none', 'same-origin', 'same-site'].includes(secFetchSite)
+  ) {
+    return {
+      message: 'Cross-site requests are not allowed',
+      status: 403,
+    }
+  }
+
+  return null
+}
+
+export async function readTextBody(
+  request: Request,
+  maxContentLength = DEFAULT_JSON_MAX_CONTENT_LENGTH,
+): Promise<TextBodyResult> {
+  const contentLengthError = validateContentLength(request, maxContentLength)
+  if (contentLengthError) {
+    return { success: false, error: contentLengthError }
+  }
+
+  if (!request.body) {
+    try {
+      const text = await request.text()
+      if (new TextEncoder().encode(text).byteLength > maxContentLength) {
+        return {
+          success: false,
+          error: { message: 'Request body too large', status: 413 },
+        }
+      }
+      return { success: true, text }
+    } catch {
+      return {
+        success: false,
+        error: { message: 'Could not read request body', status: 400 },
+      }
+    }
+  }
+
+  const reader = request.body.getReader()
+  const chunks: Array<Uint8Array> = []
+  let totalBytes = 0
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      if (!value) continue
+
+      totalBytes += value.byteLength
+      if (totalBytes > maxContentLength) {
+        return {
+          success: false,
+          error: { message: 'Request body too large', status: 413 },
+        }
+      }
+      chunks.push(value)
+    }
+  } catch {
+    return {
+      success: false,
+      error: { message: 'Could not read request body', status: 400 },
+    }
+  } finally {
+    reader.releaseLock()
+  }
+
+  const body = new Uint8Array(totalBytes)
+  let offset = 0
+  for (const chunk of chunks) {
+    body.set(chunk, offset)
+    offset += chunk.byteLength
+  }
+
+  return { success: true, text: new TextDecoder().decode(body) }
+}
+
+export async function readJsonBody(
+  request: Request,
+  options: { maxContentLength?: number } = {},
+): Promise<JsonBodyResult> {
+  const textResult = await readTextBody(
+    request,
+    options.maxContentLength ?? DEFAULT_JSON_MAX_CONTENT_LENGTH,
+  )
+  if (!textResult.success) {
+    return { success: false, error: textResult.error }
+  }
+
+  try {
+    const body: unknown = JSON.parse(textResult.text)
+    return { success: true, body }
+  } catch {
+    return {
+      success: false,
+      error: { message: 'Invalid JSON request body', status: 400 },
+    }
+  }
+}
+
+export function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
diff --git a/src/utils/application-starter.server.ts b/src/utils/application-starter.server.ts
new file mode 100644
index 000000000..7c688ad2a
--- /dev/null
+++ b/src/utils/application-starter.server.ts
@@ -0,0 +1,59 @@
+import { z } from 'zod'
+import {
+  getInferredApplicationStarterLibraryIds,
+  resolveApplicationStarterDeterministically,
+  type ApplicationStarterAnalysis,
+  type ApplicationStarterRequest,
+  type ApplicationStarterResult,
+} from '~/utils/application-starter'
+import {
+  getApplicationStarterCompatiblePartnerIds,
+  getInferredApplicationStarterPartnerIdsFromUserInput,
+} from '~/utils/partners'
+
+export const applicationStarterRequestSchema = z.object({
+  context: z.enum(['builder', 'home', 'router', 'start']),
+  input: z.string().trim().min(1).max(4000),
+})
+
+export async function resolveApplicationStarterServer({
+  data,
+}: {
+  data: ApplicationStarterRequest
+}) {
+  const request = applicationStarterRequestSchema.parse(data)
+  return resolveApplicationStarterDeterministically(request)
+}
+
+export async function analyzeApplicationStarterServer({
+  data,
+}: {
+  data: ApplicationStarterRequest
+}) {
+  const request = applicationStarterRequestSchema.parse(data)
+  const deterministicResult =
+    await resolveApplicationStarterDeterministically(request)
+
+  return buildDeterministicApplicationStarterAnalysis({
+    deterministicResult,
+    request,
+  })
+}
+
+function buildDeterministicApplicationStarterAnalysis({
+  deterministicResult,
+  request,
+}: {
+  deterministicResult: ApplicationStarterResult
+  request: ApplicationStarterRequest
+}): ApplicationStarterAnalysis {
+  return {
+    inferredLibraryIds: getInferredApplicationStarterLibraryIds(request.input),
+    inferredPartnerIds: getApplicationStarterCompatiblePartnerIds(
+      getInferredApplicationStarterPartnerIdsFromUserInput(request.input, []),
+    ),
+    rationale: deterministicResult.rationale,
+    recipe: deterministicResult.recipe,
+    summary: deterministicResult.summary,
+  }
+}
diff --git a/src/utils/application-starter.ts b/src/utils/application-starter.ts
new file mode 100644
index 000000000..115d95e0e
--- /dev/null
+++ b/src/utils/application-starter.ts
@@ -0,0 +1,1315 @@
+import type { FrameworkId } from '~/builder/frameworks'
+import type { LibraryId } from '~/libraries'
+import {
+  getApplicationStarterForceRouterOnly,
+  getApplicationStarterCompatiblePartnerIds,
+  getApplicationStarterGuidanceLines,
+  getApplicationStarterInferredPartnerIds,
+  getApplicationStarterSelectedPartnerIds,
+  getApplicationStarterUserBrief,
+  hasApplicationStarterPartnerConflictWithAny,
+} from '~/utils/partners'
+
+export type ApplicationStarterContext = 'builder' | 'home' | 'router' | 'start'
+export type ApplicationStarterResultType =
+  | 'fallback'
+  | 'migration'
+  | 'scaffoldable'
+
+export interface ApplicationStarterRecipe {
+  deployment?: 'cloudflare' | 'netlify' | 'nitro' | 'railway'
+  featureOptions: Record<string, Record<string, unknown>>
+  features: Array<string>
+  framework: FrameworkId
+  packageManager: 'bun' | 'npm' | 'pnpm' | 'yarn'
+  projectName?: string
+  routerOnly: boolean
+  tailwind: boolean
+  target: 'router' | 'start'
+  template?: string
+  toolchain?: 'biome' | 'eslint'
+}
+
+export interface ApplicationStarterRequest {
+  context: ApplicationStarterContext
+  input: string
+}
+
+export interface ApplicationStarterResult {
+  advancedBuilderUrl?: string
+  cliCommand: string
+  downloadUrl?: string
+  headline: string
+  prompt: string
+  rationale: Array<string>
+  recipe: ApplicationStarterRecipe
+  resultType: ApplicationStarterResultType
+  summary: string
+}
+
+export interface ApplicationStarterAnalysis {
+  inferredLibraryIds: Array<LibraryId>
+  inferredPartnerIds: Array<string>
+  rationale: Array<string>
+  recipe: ApplicationStarterRecipe
+  summary: string
+}
+
+export const STARTER_INTENT_INSTALL_COMMAND =
+  'npx @tanstack/intent@latest install'
+export const STARTER_INTENT_LIST_COMMAND = 'npx @tanstack/intent@latest list'
+export const STARTER_INTENT_USAGE_INSTRUCTION =
+  'Use the installed TanStack Intent skills and package-shipped guidance before making architectural or library-specific changes. Do not guess when a shipped skill can tell you the current pattern.'
+export const STARTER_AGENTS_CONTEXT_INSTRUCTION =
+  'Update the repo agent config files that TanStack Intent targets (for example CLAUDE.md, .cursorrules, or equivalent) if needed. In AGENTS.md or the project equivalent, keep durable project context, the exact CLI command used, chosen stack and integrations, environment variable requirements, deployment notes, key architectural decisions, known gotchas, and next steps.'
+
+export function getStarterPersistenceLine() {
+  return 'Keep durable project context in AGENTS.md (or equivalent), including the exact TanStack CLI command used, any follow-up TanStack Intent commands, the chosen stack and integrations, environment variable requirements, deployment notes, key architectural decisions, known gotchas, and next steps.'
+}
+
+export function getStarterIntentInstructionLines() {
+  return [
+    'After scaffolding, install dependencies and then wire TanStack Intent into the repo with:',
+    STARTER_INTENT_INSTALL_COMMAND,
+    'Then inspect the installed package skills with:',
+    STARTER_INTENT_LIST_COMMAND,
+    STARTER_INTENT_USAGE_INSTRUCTION,
+    STARTER_AGENTS_CONTEXT_INSTRUCTION,
+  ]
+}
+
+export function getStarterTemplateInteropInstructionLines() {
+  return [
+    'If the execution environment starts from an existing platform template or custom starter instead of the TanStack CLI output, still run the TanStack CLI command in a separate scratch directory.',
+    'Then merge the generated integrations, dependencies, config, scripts, and relevant file structure into the actual project instead of skipping the TanStack CLI result.',
+    'Do not drop requested partner integrations or stack choices just because the host platform bootstraps its own template. Represent them in the final project somehow, or explicitly call out what could not be represented and why.',
+  ]
+}
+
+const starterConstraintPatterns = [
+  /(?:^|[\s,;])((?:do not|don't|avoid|without|never)\s+[^.;\n]+)/gi,
+  /(?:^|[\s,;])((?<!do not )(?<!don't )(?<!avoid )(?<!without )(?<!never )(?:make it|keep it|must)\s+[^.;\n]+)/gi,
+]
+
+function normalizeStarterConstraint(constraint: string) {
+  return constraint
+    .trim()
+    .replace(/\s+/g, ' ')
+    .replace(/[.\s]+$/, '')
+}
+
+export function extractStarterConstraints(input: string) {
+  const userBrief = getApplicationStarterUserBrief(input)
+  const seen = new Set<string>()
+  const constraints = Array<string>()
+
+  for (const pattern of starterConstraintPatterns) {
+    for (const match of userBrief.matchAll(pattern)) {
+      const value = normalizeStarterConstraint(match[1] ?? '')
+
+      if (!value) {
+        continue
+      }
+
+      const key = value.toLowerCase()
+
+      if (seen.has(key)) {
+        continue
+      }
+
+      seen.add(key)
+      constraints.push(value)
+    }
+  }
+
+  return constraints
+}
+
+export function getStarterConstraintInstructionLines(input: string) {
+  const constraints = extractStarterConstraints(input)
+
+  if (constraints.length === 0) {
+    return []
+  }
+
+  return [
+    'Honor these user constraints unless they directly conflict with the scaffolded stack or requested integrations:',
+    ...constraints.map((constraint) => `- ${constraint}`),
+  ]
+}
+
+const migrationRepositoryUrlPattern =
+  /(?:^|\n)Legacy repository URL:\s*(https?:\/\/\S+|git@\S+|ssh:\/\/\S+)/i
+
+export function extractMigrationRepositoryUrl(input: string) {
+  return input.match(migrationRepositoryUrlPattern)?.[1]?.trim()
+}
+
+export function getMigrationRepositoryInstructionLines(input: string) {
+  const repositoryUrl = extractMigrationRepositoryUrl(input)
+
+  if (!repositoryUrl) {
+    return []
+  }
+
+  return [
+    `Legacy repository URL: ${repositoryUrl}`,
+    'After scaffolding, clone the legacy project into ./legacy-source and treat it as reference material only.',
+    'Do not copy the legacy .git directory into the new app or overwrite the fresh scaffold with the old repo.',
+    'Migrate the existing app incrementally from ./legacy-source into the new TanStack app, route by route and feature by feature.',
+  ]
+}
+
+export function getRequiredStarterPromptSections({
+  cliCommand,
+  input,
+  resultType,
+}: {
+  cliCommand: string
+  input: string
+  resultType: ApplicationStarterResultType
+}) {
+  return [
+    resultType === 'migration'
+      ? 'Do not incrementally mutate the old app in place.'
+      : null,
+    'Start by scaffolding the project with the TanStack CLI.',
+    `Use this command: ${cliCommand}`,
+    ...getStarterTemplateInteropInstructionLines(),
+    `After scaffolding, run ${STARTER_INTENT_INSTALL_COMMAND} and ${STARTER_INTENT_LIST_COMMAND}.`,
+    STARTER_INTENT_USAGE_INSTRUCTION,
+    getStarterPersistenceLine(),
+    ...getStarterConstraintInstructionLines(input),
+    ...getMigrationRepositoryInstructionLines(input),
+    `Original user brief: ${input.trim()}`,
+  ].filter((section): section is string => !!section)
+}
+
+export function sanitizeStarterPrompt(prompt: string) {
+  return prompt
+    .replace(/<system-reminder>[\s\S]*?<\/system-reminder>/gi, '')
+    .replace(/<[^>]+>[\s\S]*?<\/[^>]+>/g, '')
+    .replace(
+      /^\s*(Context|User request|Resolved starter plan|Resolved CLI command|Resolved summary):.*$/gim,
+      '',
+    )
+    .replace(
+      /^\s*[-*]\s*(target|framework|template|package manager|add-ons|deployment|toolchain):.*$/gim,
+      '',
+    )
+    .replace(/\n{3,}/g, '\n\n')
+    .trim()
+}
+
+type IntentId =
+  | 'ai'
+  | 'api'
+  | 'content'
+  | 'dashboard'
+  | 'ecommerce'
+  | 'fallback'
+  | 'migration'
+  | 'realtime'
+  | 'saas'
+
+type ContextSuggestion = {
+  input: string
+  label: string
+}
+
+const DEFAULT_PROJECT_NAME = 'my-tanstack-app'
+
+const sharedHomeAndBuilderPrompts: Array<ContextSuggestion> = [
+  {
+    label: 'Blank starter',
+    input:
+      'Create a blank TanStack Start app with no extra integrations or feature scaffolding.',
+  },
+  {
+    label: 'Migrate from Next.js',
+    input:
+      'Migrate an existing Next.js app to TanStack Start. Preserve the current UX, auth integration, routing structure, and data fetching behavior. Start by scaffolding a fresh TanStack Start app, then migrate the existing app incrementally route by route and feature by feature.',
+  },
+  {
+    label: 'Build a blog',
+    input:
+      'Build a blog or content site with a CMS, great routing, and a clean editorial reading experience.',
+  },
+  {
+    label: 'SaaS dashboard',
+    input:
+      'Build a SaaS dashboard app with auth, billing-ready structure, Postgres, nested routes, data tables, filters, forms, monitoring, and charts-ready data fetching.',
+  },
+  {
+    label: 'Build a shop',
+    input:
+      'Build a Shopify-backed storefront with product catalog, shopping cart, customer accounts, and checkout.',
+  },
+]
+
+export function getRecipeBuilderFeatures(recipe: ApplicationStarterRecipe) {
+  const seen = new Set<string>()
+
+  return [...recipe.features, recipe.deployment, recipe.toolchain].filter(
+    (feature): feature is string => {
+      if (!feature || seen.has(feature)) {
+        return false
+      }
+
+      seen.add(feature)
+      return true
+    },
+  )
+}
+
+const quickPrompts: Record<
+  ApplicationStarterContext,
+  Array<ContextSuggestion>
+> = {
+  home: sharedHomeAndBuilderPrompts,
+  start: [
+    {
+      label: 'Blank starter',
+      input:
+        'Create a blank TanStack Start app with no extra integrations or feature scaffolding.',
+    },
+    {
+      label: 'Full-stack app',
+      input:
+        'Build a full-stack TanStack Start app with auth, database access, forms, and monitoring.',
+    },
+    {
+      label: 'Auth + database',
+      input:
+        'Build a product app with authentication, Postgres, forms, and Sentry. Use pnpm.',
+    },
+    {
+      label: 'Migrate from Next.js',
+      input:
+        'Migrate an existing Next.js app to TanStack Start. Preserve the current UX, auth integration, routing structure, and data fetching behavior. Start by scaffolding a fresh TanStack Start app, then migrate the existing app incrementally route by route and feature by feature.',
+    },
+    {
+      label: 'Build a blog',
+      input:
+        'Build a content-driven TanStack Start app for a blog or CMS-backed publishing workflow.',
+    },
+  ],
+  router: [
+    {
+      label: 'Blank starter',
+      input:
+        'Create a blank TanStack Router app with no extra integrations or feature scaffolding.',
+    },
+    {
+      label: 'Route-heavy app',
+      input:
+        'Build a route-heavy application with nested layouts, search params, data loaders, and protected routes.',
+    },
+    {
+      label: 'Dashboard routes',
+      input:
+        'Build a dashboard with nested routes, auth, tables, query-driven loaders, and forms.',
+    },
+    {
+      label: 'Router-only mode',
+      input:
+        'Build a router-only React SPA with file-based routing, search params, and TanStack Query, no TanStack Start SSR.',
+    },
+    {
+      label: 'Build a blog',
+      input:
+        'Build a content-focused app with strong routing, nested layouts, and a clean blog-style reading flow.',
+    },
+  ],
+  builder: sharedHomeAndBuilderPrompts,
+}
+
+const starterLibraryInferenceRules: Array<{
+  libraryId: LibraryId
+  patterns: Array<RegExp>
+}> = [
+  {
+    libraryId: 'query',
+    patterns: [
+      /\btanstack query\b/i,
+      /\bdata fetching\b/i,
+      /\bserver state\b/i,
+      /\bquery\b/i,
+      /\bqueries\b/i,
+    ],
+  },
+  {
+    libraryId: 'table',
+    patterns: [
+      /\btanstack table\b/i,
+      /\bdata table\b/i,
+      /\bdata tables\b/i,
+      /\bdatagrid\b/i,
+      /\bgrid\b/i,
+    ],
+  },
+  {
+    libraryId: 'form',
+    patterns: [
+      /\btanstack form\b/i,
+      /\bform\b/i,
+      /\bforms\b/i,
+      /\bvalidation\b/i,
+    ],
+  },
+  {
+    libraryId: 'store',
+    patterns: [
+      /\btanstack store\b/i,
+      /\bstate management\b/i,
+      /\bshared state\b/i,
+      /\bclient state\b/i,
+      /\bstore\b/i,
+    ],
+  },
+  {
+    libraryId: 'db',
+    patterns: [/\btanstack db\b/i],
+  },
+  {
+    libraryId: 'ai',
+    patterns: [
+      /\btanstack ai\b/i,
+      /\bai\b/i,
+      /\bllm\b/i,
+      /\bchat\b/i,
+      /\bagent\b/i,
+    ],
+  },
+  {
+    libraryId: 'hotkeys',
+    patterns: [
+      /\btanstack hotkeys\b/i,
+      /\bkeyboard shortcuts?\b/i,
+      /\bhotkeys?\b/i,
+    ],
+  },
+  {
+    libraryId: 'pacer',
+    patterns: [
+      /\btanstack pacer\b/i,
+      /\bdebounc(?:e|ing)\b/i,
+      /\bthrottl(?:e|ing)\b/i,
+      /\bqueue(?:ing)?\b/i,
+      /\brate limit(?:ing)?\b/i,
+    ],
+  },
+  {
+    libraryId: 'virtual',
+    patterns: [
+      /\btanstack virtual\b/i,
+      /\bvirtual(?:ized|ization)?\b/i,
+      /\blong lists?\b/i,
+      /\binfinite list\b/i,
+    ],
+  },
+]
+
+const scorerGroups: Record<Exclude<IntentId, 'fallback'>, Array<RegExp>> = {
+  migration: [
+    /\bmigrat(?:e|ing|ion)\b/i,
+    /\bport\b/i,
+    /\bconvert\b/i,
+    /\bexisting app\b/i,
+    /\bmove (?:it|this|everything|things) over\b/i,
+    /\bfrom next(?:\.js)?\b/i,
+    /\bfrom remix\b/i,
+    /\bfrom react router\b/i,
+    /\bfrom vite\b/i,
+    /\bfrom cra\b/i,
+  ],
+  saas: [
+    /\bsaas\b/i,
+    /\bb2b\b/i,
+    /\bmulti[- ]tenant\b/i,
+    /\bteam accounts?\b/i,
+    /\bbilling\b/i,
+    /\bsubscriptions?\b/i,
+  ],
+  dashboard: [
+    /\bdashboard\b/i,
+    /\badmin\b/i,
+    /\bbackoffice\b/i,
+    /\bpanel\b/i,
+    /\bmetrics\b/i,
+    /\banalytics\b/i,
+  ],
+  content: [
+    /\bblog\b/i,
+    /\bcms\b/i,
+    /\bcontent\b/i,
+    /\bmarketing site\b/i,
+    /\bdocs?\b/i,
+    /\bknowledge base\b/i,
+  ],
+  api: [
+    /\bapi\b/i,
+    /\bapi keys?\b/i,
+    /\bbackend\b/i,
+    /\bdeveloper platform\b/i,
+    /\btrpc\b/i,
+    /\borpc\b/i,
+    /\bgraphql\b/i,
+    /\brate limit(?:ing)?\b/i,
+    /\brpc\b/i,
+  ],
+  ai: [
+    /\bai\b/i,
+    /\bllm\b/i,
+    /\bchat\b/i,
+    /\bagent\b/i,
+    /\brag\b/i,
+    /\bprompt\b/i,
+  ],
+  realtime: [
+    /\brealtime\b/i,
+    /\bcollaborat(?:e|ive|ion)\b/i,
+    /\blive updates?\b/i,
+    /\bsync\b/i,
+    /\bmultiplayer\b/i,
+    /\bpresence\b/i,
+  ],
+  ecommerce: [
+    /\bshopify\b/i,
+    /\bstorefront\b/i,
+    /\be[- ]?commerce\b/i,
+    /\bonline store\b/i,
+    /\bproduct catalog\b/i,
+    /\bsell(?:ing)? products?\b/i,
+    /\bcheckout\b/i,
+    /\bshopping cart\b/i,
+    /\bmerch(?:andise)?\b/i,
+  ],
+}
+
+const ecommerceCustomerAccountPatterns = [
+  /\bcustomer accounts?\b/i,
+  /\bcustomer login\b/i,
+  /\border history\b/i,
+  /\bsign[- ]?in\b/i,
+  /\blogin\b/i,
+  /\baddresses\b/i,
+]
+
+const migrationSources = [
+  'astro',
+  'cra',
+  'next.js',
+  'next',
+  'react router',
+  'remix',
+  'vite',
+] as const
+
+export function getApplicationStarterSuggestions(
+  context: ApplicationStarterContext,
+) {
+  return quickPrompts[context]
+}
+
+export function getInferredApplicationStarterLibraryIds(input: string) {
+  const userBrief = getApplicationStarterUserBrief(input)
+
+  return starterLibraryInferenceRules.flatMap((rule) =>
+    rule.patterns.some((pattern) => pattern.test(userBrief))
+      ? [rule.libraryId]
+      : [],
+  )
+}
+
+export async function resolveApplicationStarterDeterministically({
+  context,
+  input,
+}: ApplicationStarterRequest) {
+  const normalizedInput = normalizeText(getApplicationStarterUserBrief(input))
+  const selectedPartnerIds = getApplicationStarterSelectedPartnerIds(input)
+  const inferredPartnerIds = getApplicationStarterInferredPartnerIds(input)
+  const intent = detectIntent(normalizedInput)
+  const recipe = buildRecipe(normalizedInput, intent, context, {
+    inferredPartnerIds,
+    selectedPartnerIds,
+  })
+  const resultType = getResultType(intent)
+
+  return composeApplicationStarterResult({
+    input,
+    rationale: buildRationale(normalizedInput, intent, recipe),
+    recipe,
+    resultType,
+  })
+}
+
+export function composeApplicationStarterResult({
+  input,
+  prompt,
+  rationale,
+  recipe,
+  resultType,
+}: {
+  input: string
+  prompt?: string
+  rationale: Array<string>
+  recipe: ApplicationStarterRecipe
+  resultType: ApplicationStarterResultType
+}): ApplicationStarterResult {
+  return {
+    advancedBuilderUrl:
+      recipe.target === 'start' ? buildAdvancedBuilderUrl(recipe) : undefined,
+    cliCommand: buildCliCommand(recipe),
+    downloadUrl:
+      recipe.target === 'start' ? buildDownloadUrl(recipe) : undefined,
+    headline:
+      resultType === 'migration'
+        ? 'Your migration prompt is ready'
+        : 'Your prompt is ready',
+    prompt: sanitizeStarterPrompt(
+      prompt || buildPrompt({ input, resultType, recipe }),
+    ),
+    rationale,
+    recipe,
+    resultType,
+    summary: buildSummary(resultType, recipe),
+  }
+}
+
+function normalizeText(input: string) {
+  return input.replace(/\s+/g, ' ').trim()
+}
+
+function detectIntent(input: string) {
+  const intentScores = new Map<IntentId, number>()
+
+  for (const [intent, patterns] of Object.entries(scorerGroups)) {
+    let score = 0
+    for (const pattern of patterns) {
+      if (pattern.test(input)) {
+        score += 1
+      }
+    }
+    intentScores.set(intent as IntentId, score)
+  }
+
+  if ((intentScores.get('migration') ?? 0) > 0) {
+    return 'migration' as const
+  }
+
+  const ranked = Array.from(intentScores.entries())
+    .filter(([intent]) => intent !== 'migration')
+    .sort((left, right) => right[1] - left[1])
+
+  if (!ranked[0] || ranked[0][1] === 0) {
+    return 'fallback' as const
+  }
+
+  return ranked[0][0]
+}
+
+function buildRecipe(
+  input: string,
+  intent: IntentId,
+  context: ApplicationStarterContext,
+  partnerConfig: {
+    inferredPartnerIds: Array<string>
+    selectedPartnerIds: Array<string>
+  },
+): ApplicationStarterRecipe {
+  const minimalRequest = isMinimalRequest(input)
+  const packageManager = detectPackageManager(input)
+  const framework = detectFramework(input)
+  const deployment = detectDeployment(input)
+  const toolchain = detectToolchain(input)
+  const tailwind =
+    !/(?:\bwithout tailwind\b|\bno tailwind\b|\btailwind-heavy styling\b)/i.test(
+      input,
+    )
+  const routerOnly =
+    context !== 'builder' &&
+    detectRouterOnly(input) &&
+    !/\bssr\b/i.test(input) &&
+    !/\bserver functions?\b/i.test(input)
+
+  const recipe: ApplicationStarterRecipe = {
+    deployment,
+    featureOptions: {},
+    features: [],
+    framework,
+    packageManager,
+    projectName: parseProjectName(input),
+    routerOnly,
+    tailwind,
+    target: routerOnly ? 'router' : 'start',
+    toolchain,
+  }
+
+  switch (intent) {
+    case 'migration': {
+      recipe.target = routerOnly ? 'router' : 'start'
+      recipe.template = 'saas'
+      addStarterFeatures(recipe, 'better-auth', 'neon', 'drizzle', 'sentry')
+      break
+    }
+    case 'saas': {
+      recipe.template = 'saas'
+      addStarterFeatures(
+        recipe,
+        'better-auth',
+        'neon',
+        'drizzle',
+        'form',
+        'sentry',
+        'shadcn',
+        'tanstack-query',
+      )
+      break
+    }
+    case 'dashboard': {
+      recipe.template = 'dashboard'
+      addStarterFeatures(recipe, 'form', 'shadcn', 'table', 'tanstack-query')
+      break
+    }
+    case 'content': {
+      recipe.template = 'blog'
+      addStarterFeatures(recipe, 'strapi', 'tanstack-query')
+      break
+    }
+    case 'api': {
+      recipe.template = 'api-first'
+      addStarterFeatures(recipe, 'tanstack-query', 'tRPC')
+      break
+    }
+    case 'ai': {
+      recipe.template = 'ai-chat'
+      addStarterFeatures(recipe, 'ai', 'shadcn', 'store')
+      break
+    }
+    case 'realtime': {
+      recipe.template = 'realtime'
+      addStarterFeatures(recipe, 'convex', 'tanstack-query')
+      break
+    }
+    case 'ecommerce': {
+      recipe.template = 'shopify-storefront'
+      if (
+        ecommerceCustomerAccountPatterns.some((pattern) => pattern.test(input))
+      ) {
+        recipe.featureOptions.shopify = { customerAccount: 'enabled' }
+      }
+      break
+    }
+    case 'fallback': {
+      recipe.template = minimalRequest
+        ? 'blank'
+        : context === 'router'
+          ? 'dashboard'
+          : 'blank'
+      if (!minimalRequest) {
+        addStarterFeatures(recipe, 'tanstack-query')
+      }
+      break
+    }
+  }
+
+  const selectedPartnerIds = getApplicationStarterCompatiblePartnerIds(
+    partnerConfig.selectedPartnerIds,
+  )
+  const inferredPartnerIds = getApplicationStarterCompatiblePartnerIds(
+    partnerConfig.inferredPartnerIds.filter(
+      (partnerId) =>
+        !hasApplicationStarterPartnerConflictWithAny(
+          partnerId,
+          selectedPartnerIds,
+        ),
+    ),
+  )
+
+  applyPartnerOverrides(recipe, {
+    partnerIds: [...selectedPartnerIds, ...inferredPartnerIds],
+  })
+  applyInputOverrides(input, recipe)
+  normalizeRecipe(recipe)
+
+  return recipe
+}
+
+function addStarterFeatures(
+  recipe: ApplicationStarterRecipe,
+  ...features: Array<string>
+) {
+  recipe.features.push(...features)
+}
+
+function applyPartnerOverrides(
+  recipe: ApplicationStarterRecipe,
+  options: { partnerIds: Array<string> },
+) {
+  const partnerIds = new Set(options.partnerIds)
+
+  if (partnerIds.has('cloudflare')) {
+    recipe.deployment = 'cloudflare'
+  } else if (partnerIds.has('netlify')) {
+    recipe.deployment = 'netlify'
+  } else if (partnerIds.has('railway')) {
+    recipe.deployment = 'railway'
+  }
+
+  if (partnerIds.has('workos')) {
+    replaceExclusive(recipe, ['better-auth', 'clerk', 'workos'], 'workos')
+  } else if (partnerIds.has('clerk')) {
+    replaceExclusive(recipe, ['better-auth', 'clerk', 'workos'], 'clerk')
+  }
+
+  if (partnerIds.has('strapi')) {
+    addStarterFeatures(recipe, 'strapi')
+  }
+
+  if (partnerIds.has('sentry')) {
+    addStarterFeatures(recipe, 'sentry')
+  }
+
+  if (partnerIds.has('neon')) {
+    replaceExclusive(recipe, ['convex'], 'neon')
+    if (!partnerIds.has('prisma')) {
+      replaceExclusive(recipe, ['drizzle', 'prisma'], 'drizzle')
+    }
+  }
+
+  if (partnerIds.has('prisma')) {
+    replaceExclusive(recipe, ['convex', 'drizzle', 'prisma'], 'prisma')
+    addStarterFeatures(recipe, 'neon')
+  }
+}
+
+function hasHostedDatabaseConstraint(input: string) {
+  return /\b(do not use|don't use|avoid|without)\s+(?:a\s+)?hosted database\b/i.test(
+    input,
+  )
+}
+
+function hasAuthOverlapConstraint(input: string) {
+  return /\bavoid\s+adding\s+auth\s+and\s+api\s+key\s+providers?\s+that\s+overlap\s+in\s+purpose\b/i.test(
+    input,
+  )
+}
+
+function hasNegativeFeatureConstraint(input: string, feature: string) {
+  return new RegExp(
+    `\\b(?:do not use|don't use|avoid|without|no)\\s+(?:the\\s+)?${feature}\\b`,
+    'i',
+  ).test(input)
+}
+
+function applyInputOverrides(input: string, recipe: ApplicationStarterRecipe) {
+  if (hasNegativeFeatureConstraint(input, 'clerk')) {
+    recipe.features = recipe.features.filter((feature) => feature !== 'clerk')
+  } else if (/\bclerk\b/i.test(input)) {
+    replaceExclusive(recipe, ['better-auth', 'clerk', 'workos'], 'clerk')
+  } else if (
+    /\b(sso|saml|scim|directory sync|enterprise auth|enterprise identity|b2b auth)\b/i.test(
+      input,
+    )
+  ) {
+    replaceExclusive(recipe, ['better-auth', 'clerk', 'workos'], 'workos')
+  } else if (/\bworkos\b/i.test(input)) {
+    replaceExclusive(recipe, ['better-auth', 'clerk', 'workos'], 'workos')
+  } else if (
+    !hasAuthOverlapConstraint(input) &&
+    /\b(authentication|auth|login|sign ?in|sign ?up|oauth|sessions?)\b/i.test(
+      input,
+    )
+  ) {
+    replaceExclusive(recipe, ['better-auth', 'clerk', 'workos'], 'better-auth')
+  }
+
+  if (hasHostedDatabaseConstraint(input)) {
+    recipe.features = recipe.features.filter(
+      (feature) => feature !== 'convex' && feature !== 'neon',
+    )
+  } else if (/\bconvex\b/i.test(input)) {
+    replaceExclusive(recipe, ['convex', 'drizzle', 'neon', 'prisma'], 'convex')
+  } else if (/\bprisma\b/i.test(input)) {
+    replaceExclusive(recipe, ['convex', 'drizzle', 'prisma'], 'prisma')
+    addStarterFeatures(recipe, 'neon')
+  } else if (/\bdrizzle\b/i.test(input)) {
+    replaceExclusive(recipe, ['convex', 'drizzle', 'prisma'], 'drizzle')
+    addStarterFeatures(recipe, 'neon')
+  } else if (
+    /\bpostgres\b|\bpostgre?s\b|\bdatabase\b|\bdb\b|\bneon\b/i.test(input)
+  ) {
+    replaceExclusive(recipe, ['convex'], 'neon')
+    replaceExclusive(recipe, ['drizzle', 'prisma'], 'drizzle')
+  }
+
+  if (/\bquery\b|\bloaders?\b|\bdata fetching\b/i.test(input)) {
+    addStarterFeatures(recipe, 'tanstack-query')
+  }
+
+  if (/\btable\b|\bdatagrid\b|\bgrid\b/i.test(input)) {
+    addStarterFeatures(recipe, 'table')
+  }
+
+  if (/\bform\b|\bforms\b/i.test(input)) {
+    addStarterFeatures(recipe, 'form')
+  }
+
+  if (/\bposthog\b|\banalytics\b/i.test(input)) {
+    addStarterFeatures(recipe, 'posthog')
+  }
+
+  if (/\bsentry\b|\bmonitoring\b|\berrors?\b/i.test(input)) {
+    addStarterFeatures(recipe, 'sentry')
+  }
+
+  if (/\bi18n\b|\binternational\b|\blocali[sz]ation\b/i.test(input)) {
+    addStarterFeatures(recipe, 'paraglide')
+  }
+
+  if (hasNegativeFeatureConstraint(input, 'shadcn')) {
+    recipe.features = recipe.features.filter((feature) => feature !== 'shadcn')
+  } else if (/\bshadcn\b|\bui\b|\bdesign system\b/i.test(input)) {
+    addStarterFeatures(recipe, 'shadcn')
+  }
+
+  if (/\btrpc\b/i.test(input)) {
+    addStarterFeatures(recipe, 'tRPC', 'tanstack-query')
+  }
+
+  if (/\borpc\b/i.test(input)) {
+    recipe.features = recipe.features.filter((feature) => feature !== 'tRPC')
+    addStarterFeatures(recipe, 'oRPC', 'tanstack-query')
+  }
+
+  if (/\bapollo\b|\bgraphql\b/i.test(input)) {
+    recipe.features = recipe.features.filter(
+      (feature) => feature !== 'tRPC' && feature !== 'oRPC',
+    )
+    addStarterFeatures(recipe, 'apollo-client')
+  }
+
+  if (/\bai\b|\bllm\b|\bchat\b|\bagent\b/i.test(input)) {
+    addStarterFeatures(recipe, 'ai', 'store')
+  }
+
+  if (/\brealtime\b|\bcollaborat(?:e|ive|ion)\b|\blive\b/i.test(input)) {
+    recipe.features = recipe.features.filter(
+      (feature) =>
+        feature !== 'neon' && feature !== 'drizzle' && feature !== 'prisma',
+    )
+    addStarterFeatures(recipe, 'convex', 'tanstack-query')
+  }
+}
+
+function replaceExclusive(
+  recipe: ApplicationStarterRecipe,
+  featureIds: Array<string>,
+  nextFeature: string,
+) {
+  recipe.features = recipe.features.filter(
+    (feature) => !featureIds.includes(feature),
+  )
+  recipe.features.push(nextFeature)
+}
+
+function normalizeRecipe(recipe: ApplicationStarterRecipe) {
+  const seen = new Set<string>()
+  const normalizedFeatures = Array<string>()
+
+  for (const feature of recipe.features) {
+    if (feature === recipe.deployment || feature === recipe.toolchain) {
+      continue
+    }
+    if (!seen.has(feature)) {
+      seen.add(feature)
+      normalizedFeatures.push(feature)
+    }
+  }
+
+  recipe.features = normalizedFeatures
+
+  if (recipe.routerOnly) {
+    recipe.template = undefined
+  }
+}
+
+function detectDeployment(input: string) {
+  if (/\bcloudflare\b|\bworkers\b/i.test(input)) {
+    return 'cloudflare' as const
+  }
+  if (/\bnetlify\b/i.test(input)) {
+    return 'netlify' as const
+  }
+  if (/\brailway\b/i.test(input)) {
+    return 'railway' as const
+  }
+  if (/\bnitro\b/i.test(input)) {
+    return 'nitro' as const
+  }
+  return undefined
+}
+
+function detectFramework(input: string): FrameworkId {
+  if (/\bsolid\b/i.test(input)) {
+    return 'solid'
+  }
+  return 'react'
+}
+
+function detectPackageManager(input: string) {
+  if (/\bbun\b/i.test(input)) {
+    return 'bun' as const
+  }
+  if (/\byarn\b/i.test(input)) {
+    return 'yarn' as const
+  }
+  if (/\bnpm\b/i.test(input)) {
+    return 'npm' as const
+  }
+  return 'pnpm' as const
+}
+
+function detectRouterOnly(input: string) {
+  return (
+    getApplicationStarterForceRouterOnly(input) ||
+    /\brouter-only\b|\brouter only\b|\bspa\b|\bsingle page app\b|\bclient-side only\b|\bjust tanstack router\b/i.test(
+      input,
+    )
+  )
+}
+
+function detectToolchain(input: string) {
+  if (/\bbiome\b/i.test(input)) {
+    return 'biome' as const
+  }
+  if (/\beslint\b/i.test(input)) {
+    return 'eslint' as const
+  }
+  return undefined
+}
+
+function parseProjectName(input: string) {
+  const match = input.match(
+    /(?:called|named|name it|project name is)\s+["']?([a-z0-9-]{2,})["']?/i,
+  )
+  if (!match?.[1]) {
+    return undefined
+  }
+  return match[1].toLowerCase()
+}
+
+function getResultType(intent: IntentId): ApplicationStarterResultType {
+  if (intent === 'migration') {
+    return 'migration'
+  }
+  if (intent === 'fallback') {
+    return 'fallback'
+  }
+  return 'scaffoldable'
+}
+
+function buildSummary(
+  resultType: ApplicationStarterResultType | IntentId,
+  recipe: ApplicationStarterRecipe,
+) {
+  const parts = Array<string>()
+
+  parts.push(
+    recipe.target === 'router'
+      ? 'Router-only starter'
+      : 'TanStack Start starter',
+  )
+
+  if (resultType === 'migration') {
+    parts.push('migration-first prompt')
+  }
+
+  parts.push(recipe.framework === 'solid' ? 'Solid' : 'React')
+
+  if (recipe.features.length > 0) {
+    parts.push(recipe.features.slice(0, 4).join(', '))
+  }
+
+  if (recipe.deployment) {
+    parts.push(`deploy to ${recipe.deployment}`)
+  }
+
+  return parts.join(' • ')
+}
+
+function buildRationale(
+  input: string,
+  intent: IntentId,
+  recipe: ApplicationStarterRecipe,
+) {
+  const rationale = Array<string>()
+
+  switch (intent) {
+    case 'migration': {
+      const source = detectMigrationSource(input)
+      rationale.push(
+        source
+          ? `Detected migration from ${source}`
+          : 'Detected migration workflow',
+      )
+      rationale.push(
+        'Scaffold a fresh target app first, then move behavior over',
+      )
+      break
+    }
+    case 'saas':
+      rationale.push(
+        'Detected a product app with auth, data, and production concerns',
+      )
+      break
+    case 'dashboard':
+      rationale.push(
+        'Detected a route-heavy UI with tables, loaders, and forms',
+      )
+      break
+    case 'content':
+      rationale.push('Detected a content-oriented app or CMS-backed site')
+      break
+    case 'api':
+      rationale.push('Detected an API-first or RPC-heavy application')
+      break
+    case 'ai':
+      rationale.push('Detected an AI-assisted or chat-driven application')
+      break
+    case 'realtime':
+      rationale.push(
+        'Detected live updates or collaborative product requirements',
+      )
+      break
+    case 'fallback':
+      rationale.push(
+        'Kept the result deliberately conservative because the request was broad',
+      )
+      break
+  }
+
+  if (recipe.routerOnly) {
+    rationale.push(
+      'Using router-only mode because the request explicitly avoided TanStack Start SSR',
+    )
+  } else {
+    rationale.push(
+      'Defaulting to TanStack Start as the application-level starting point',
+    )
+  }
+
+  if (recipe.deployment) {
+    rationale.push(`Matched deployment target: ${recipe.deployment}`)
+  }
+
+  return rationale
+}
+
+function buildPrompt({
+  input,
+  resultType,
+  recipe,
+}: {
+  input: string
+  resultType: ApplicationStarterResultType | IntentId
+  recipe: ApplicationStarterRecipe
+}) {
+  const userBrief = getApplicationStarterUserBrief(input)
+  const starterGuidanceLines = getApplicationStarterGuidanceLines(input)
+  const cliCommand = buildCliCommand(recipe)
+  const featureSummary = recipe.features.length
+    ? recipe.features.join(', ')
+    : 'no extra add-ons'
+  const targetLabel = recipe.routerOnly
+    ? 'TanStack Router router-only application'
+    : 'TanStack Start application'
+  const frameworkLabel = recipe.framework === 'solid' ? 'Solid' : 'React'
+  const stackDetails = [
+    `Use ${frameworkLabel}`,
+    recipe.template ? `the ${recipe.template} starter` : null,
+    recipe.features.length > 0 ? `with ${featureSummary}` : null,
+    recipe.deployment ? `targeting ${recipe.deployment}` : null,
+  ]
+    .filter(Boolean)
+    .join(', ')
+
+  if (resultType === 'migration') {
+    const source = detectMigrationSource(userBrief) ?? 'the existing app'
+    const migrationRepositoryInstructions =
+      getMigrationRepositoryInstructionLines(input)
+
+    return [
+      `Migrate ${source} into a fresh ${targetLabel}.`,
+      '',
+      'Do not incrementally mutate the old app in place.',
+      'Start by scaffolding a fresh project with the TanStack CLI.',
+      `Use this command: ${cliCommand}`,
+      ...getStarterTemplateInteropInstructionLines(),
+      '',
+      `After scaffolding, run ${STARTER_INTENT_INSTALL_COMMAND} and ${STARTER_INTENT_LIST_COMMAND}.`,
+      STARTER_INTENT_USAGE_INSTRUCTION,
+      getStarterPersistenceLine(),
+      ...starterGuidanceLines,
+      ...getStarterConstraintInstructionLines(input),
+      ...migrationRepositoryInstructions,
+      '',
+      'Migration strategy:',
+      '1. Inventory routes, layouts, auth, data loading, forms, and environment variables in the existing app.',
+      '2. Recreate the destination structure in the fresh TanStack project first.',
+      '3. Port one vertical slice at a time.',
+      '4. Preserve behavior and UX, not framework-specific implementation details.',
+      '5. Stop and call out anything that cannot be migrated 1:1 before forcing a rewrite.',
+      '',
+      `Stack: ${stackDetails || `Use ${frameworkLabel}`}.`,
+      `Original user brief: ${userBrief}`,
+    ].join('\n')
+  }
+
+  return [
+    userBrief,
+    '',
+    ...starterGuidanceLines,
+    '',
+    'Start by scaffolding the project with the TanStack CLI.',
+    `Use this command: ${cliCommand}`,
+    ...getStarterTemplateInteropInstructionLines(),
+    '',
+    `After scaffolding, run ${STARTER_INTENT_INSTALL_COMMAND} and ${STARTER_INTENT_LIST_COMMAND}.`,
+    STARTER_INTENT_USAGE_INSTRUCTION,
+    getStarterPersistenceLine(),
+    ...getStarterConstraintInstructionLines(input),
+    '',
+    `Stack: ${stackDetails || `Use ${frameworkLabel}`}.`,
+    recipe.toolchain
+      ? `Toolchain: ${recipe.toolchain}.`
+      : 'Toolchain: keep the default CLI toolchain.',
+    'Preserve the generated project structure unless there is a clear reason to change it.',
+    'Explain any environment variables and follow-up setup steps after scaffolding.',
+  ].join('\n')
+}
+
+function detectMigrationSource(input: string) {
+  for (const source of migrationSources) {
+    if (input.toLowerCase().includes(source)) {
+      return source
+    }
+  }
+  return undefined
+}
+
+function isMinimalRequest(input: string) {
+  return /\bblank\b|\bminimal\b|\bminimum\b|\bbarebones\b|\bfrom scratch\b|\bempty\b/i.test(
+    input,
+  )
+}
+
+export function buildAdvancedBuilderUrl(recipe: ApplicationStarterRecipe) {
+  const params = new URLSearchParams()
+  const featureIds = getRecipeBuilderFeatures(recipe)
+
+  params.set('name', recipe.projectName || DEFAULT_PROJECT_NAME)
+
+  if (recipe.framework !== 'react') {
+    params.set('framework', recipe.framework)
+  }
+
+  if (!recipe.tailwind) {
+    params.set('tailwind', 'false')
+  }
+
+  if (recipe.packageManager !== 'pnpm') {
+    params.set('pm', recipe.packageManager)
+  }
+
+  if (recipe.template) {
+    params.set('template', recipe.template)
+  }
+
+  if (featureIds.length > 0) {
+    params.set('features', featureIds.join(','))
+  }
+
+  return `/builder?${params.toString()}`
+}
+
+const CLI_TEMPLATE_IDS = new Set<string>(['shopify-storefront'])
+
+export function isCliTemplateId(value: string | undefined): boolean {
+  return value !== undefined && CLI_TEMPLATE_IDS.has(value)
+}
+
+function shellQuoteSingle(value: string): string {
+  return `'${value.replace(/'/g, `'\\''`)}'`
+}
+
+function buildAddOnConfigArg(
+  featureOptions: ApplicationStarterRecipe['featureOptions'],
+): string | null {
+  const entries = Object.entries(featureOptions).filter(
+    ([, options]) => options && Object.keys(options).length > 0,
+  )
+  if (entries.length === 0) return null
+  return shellQuoteSingle(JSON.stringify(Object.fromEntries(entries)))
+}
+
+export function buildCliCommand(recipe: ApplicationStarterRecipe) {
+  const commandParts = ['npx', '@tanstack/cli@latest', 'create']
+  commandParts.push(recipe.projectName || DEFAULT_PROJECT_NAME)
+  commandParts.push('--agent')
+
+  if (recipe.framework === 'solid') {
+    commandParts.push('--framework', 'Solid')
+  }
+
+  if (recipe.routerOnly) {
+    commandParts.push('--router-only')
+  }
+
+  commandParts.push('--package-manager', recipe.packageManager)
+
+  commandParts.push(recipe.tailwind ? '--tailwind' : '--no-tailwind')
+
+  if (recipe.deployment) {
+    commandParts.push('--deployment', recipe.deployment)
+  }
+
+  if (recipe.toolchain) {
+    commandParts.push('--toolchain', recipe.toolchain)
+  }
+
+  if (isCliTemplateId(recipe.template)) {
+    commandParts.push('--template', recipe.template!)
+  }
+
+  if (recipe.features.length > 0) {
+    commandParts.push('--add-ons', recipe.features.join(','))
+  }
+
+  const addOnConfig = buildAddOnConfigArg(recipe.featureOptions)
+  if (addOnConfig) {
+    commandParts.push('--add-on-config', addOnConfig)
+  }
+
+  return commandParts.join(' ')
+}
+
+export function buildDownloadUrl(recipe: ApplicationStarterRecipe) {
+  const params = new URLSearchParams()
+  const featureIds = getRecipeBuilderFeatures(recipe)
+
+  params.set('name', recipe.projectName || DEFAULT_PROJECT_NAME)
+  params.set('framework', recipe.framework)
+  params.set('pm', recipe.packageManager)
+
+  if (!recipe.tailwind) {
+    params.set('tailwind', 'false')
+  }
+
+  if (featureIds.length > 0) {
+    params.set('features', featureIds.join(','))
+  }
+
+  return `/api/builder/download?${params.toString()}`
+}
diff --git a/src/utils/audit.functions.ts b/src/utils/audit.functions.ts
index 4758dfaf3..d3875dceb 100644
--- a/src/utils/audit.functions.ts
+++ b/src/utils/audit.functions.ts
@@ -6,19 +6,22 @@ import { loginHistory, auditLogs, users, type AuditAction } from '~/db/schema'
 import { desc, asc, eq, sql, and, gte, lte } from 'drizzle-orm'
 import { alias } from 'drizzle-orm/pg-core'
 import { ALL_TIME_FLOOR_DATE } from './chart'
+import { isoDateSchema, pageIndexSchema, pageSizeSchema } from './schemas'
+
+const adminPaginationSchema = v.object({
+  limit: pageSizeSchema,
+  page: v.optional(pageIndexSchema),
+})
 
 // Query login history (admin only)
 export const listLoginHistory = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
-      pagination: v.object({
-        limit: v.number(),
-        page: v.optional(v.number()),
-      }),
+      pagination: adminPaginationSchema,
       userId: v.optional(v.pipe(v.string(), v.uuid())),
       provider: v.optional(v.picklist(['github', 'google'])),
-      dateFrom: v.optional(v.string()),
-      dateTo: v.optional(v.string()),
+      dateFrom: v.optional(isoDateSchema),
+      dateTo: v.optional(isoDateSchema),
       sortBy: v.optional(v.string()),
       sortDir: v.optional(v.picklist(['asc', 'desc'])),
     }),
@@ -107,18 +110,15 @@ export const listLoginHistory = createServerFn({ method: 'POST' })
 
 // Query audit logs (admin only)
 export const listAuditLogs = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
-      pagination: v.object({
-        limit: v.number(),
-        page: v.optional(v.number()),
-      }),
+      pagination: adminPaginationSchema,
       actorId: v.optional(v.pipe(v.string(), v.uuid())),
       action: v.optional(v.string()),
       targetType: v.optional(v.string()),
       targetId: v.optional(v.string()),
-      dateFrom: v.optional(v.string()),
-      dateTo: v.optional(v.string()),
+      dateFrom: v.optional(isoDateSchema),
+      dateTo: v.optional(isoDateSchema),
     }),
   )
   .handler(async ({ data }) => {
@@ -428,9 +428,13 @@ export const getActivityStats = createServerFn({ method: 'POST' }).handler(
  * Get daily login data for charts with configurable time range
  */
 export const getLoginsChartData = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
-      days: v.optional(v.nullable(v.number())), // null = all time
+      days: v.optional(
+        v.nullable(
+          v.pipe(v.number(), v.integer(), v.minValue(1), v.maxValue(3650)),
+        ),
+      ), // null = all time
     }),
   )
   .handler(async ({ data: { days } }) => {
diff --git a/src/utils/audit.server.ts b/src/utils/audit.server.ts
index 2d7c9de96..2ccd41e49 100644
--- a/src/utils/audit.server.ts
+++ b/src/utils/audit.server.ts
@@ -5,29 +5,10 @@ import {
   type AuditAction,
   type OAuthProvider,
 } from '~/db/schema'
+import { getClientIp } from './request.server'
 
-// Extract IP address from request headers
-export function getClientIp(request: Request): string | undefined {
-  // Check common proxy headers first
-  const forwardedFor = request.headers.get('x-forwarded-for')
-  if (forwardedFor) {
-    // x-forwarded-for can contain multiple IPs, take the first one
-    return forwardedFor.split(',')[0].trim()
-  }
-
-  const realIp = request.headers.get('x-real-ip')
-  if (realIp) {
-    return realIp
-  }
-
-  // Cloudflare
-  const cfConnectingIp = request.headers.get('cf-connecting-ip')
-  if (cfConnectingIp) {
-    return cfConnectingIp
-  }
-
-  return undefined
-}
+// Re-export for backwards compatibility
+export { getClientIp }
 
 // Record a login event
 export async function recordLogin(opts: {
diff --git a/src/utils/auth.functions.ts b/src/utils/auth.functions.ts
new file mode 100644
index 000000000..6581f3709
--- /dev/null
+++ b/src/utils/auth.functions.ts
@@ -0,0 +1,85 @@
+import { createServerFn } from '@tanstack/react-start'
+import { getRequest } from '@tanstack/react-start/server'
+import {
+  getAuthGuards,
+  getAuthService,
+  type Capability,
+} from '~/auth/index.server'
+import { ADMIN_ACCESS_CAPABILITIES } from '~/db/types'
+
+export const getCurrentUser = createServerFn({ method: 'POST' }).handler(
+  async () => {
+    const request = getRequest()
+    const authService = getAuthService()
+
+    return authService.getCurrentUser(request)
+  },
+)
+
+export const requireAuth = createServerFn({ method: 'POST' }).handler(
+  async () => {
+    const request = getRequest()
+    const guards = getAuthGuards()
+
+    return guards.requireAuth(request)
+  },
+)
+
+export const requireCapability = createServerFn({ method: 'POST' })
+  .validator((data: { capability: string }) => ({
+    capability: data.capability as Capability,
+  }))
+  .handler(async ({ data: { capability } }) => {
+    const request = getRequest()
+    const guards = getAuthGuards()
+
+    return guards.requireCapability(request, capability)
+  })
+
+export async function loadUser() {
+  try {
+    return await getCurrentUser()
+  } catch {
+    return null
+  }
+}
+
+export async function requireAuthUser() {
+  try {
+    return await requireAuth()
+  } catch {
+    throw new Error('Not authenticated')
+  }
+}
+
+export async function requireCapabilityUser(capability: string) {
+  try {
+    return await requireCapability({ data: { capability } })
+  } catch {
+    throw new Error(`Missing required capability: ${capability}`)
+  }
+}
+
+export { ADMIN_ACCESS_CAPABILITIES as ADMIN_CAPABILITIES } from '~/db/types'
+
+export const requireAnyAdminCapability = createServerFn({
+  method: 'POST',
+}).handler(async () => {
+  const request = getRequest()
+  const authService = getAuthService()
+  const user = await authService.getCurrentUser(request)
+
+  if (!user) {
+    throw new Error('Not authenticated')
+  }
+
+  const hasAdminCapability = user.capabilities.some((cap) =>
+    (ADMIN_ACCESS_CAPABILITIES as readonly string[]).includes(cap),
+  )
+
+  if (!hasAdminCapability) {
+    throw new Error('Admin access required')
+  }
+
+  return user
+})
diff --git a/src/utils/auth.server.ts b/src/utils/auth.server.ts
index 2c2d69a17..d003659a2 100644
--- a/src/utils/auth.server.ts
+++ b/src/utils/auth.server.ts
@@ -7,46 +7,55 @@
  * For new code, import directly from '~/auth/index.server'.
  */
 
-import { createServerFn } from '@tanstack/react-start'
 import { getRequest } from '@tanstack/react-start/server'
-import { getAuthService, getAuthGuards } from '~/auth/index.server'
 import type { Capability } from '~/auth/index.server'
 import { ADMIN_ACCESS_CAPABILITIES } from '~/db/types'
 
+async function loadAuthServer() {
+  return import('~/auth/index.server')
+}
+
 /**
- * Server function to get the current user
+ * Get the current user. Plain async function: callable from anywhere
+ * server-side (route handlers, server-fn handlers, other helpers).
+ *
+ * NOTE: Keep this as a plain server-side function. Nesting `createServerFn`
+ * inside this `.server.ts` helper can leave callers with a stale `createSsrRpc`
+ * stub that is not in the runtime registry, so server-fn -> server-fn chains
+ * fail with "Server function info not found for <id>". The client-facing RPC
+ * wrappers live in `auth.functions.ts`.
  */
-export const getCurrentUser = createServerFn({ method: 'POST' }).handler(
-  async () => {
-    const request = getRequest()
-    const authService = getAuthService()
-    return authService.getCurrentUser(request)
-  },
-)
+export async function getCurrentUser() {
+  const request = getRequest()
+  const { getAuthService } = await loadAuthServer()
+  return getAuthService().getCurrentUser(request)
+}
 
 /**
- * Server function to require authentication
+ * Require authentication. Throws if no user.
  */
-export const requireAuth = createServerFn({ method: 'POST' }).handler(
-  async () => {
-    const request = getRequest()
-    const guards = getAuthGuards()
-    return guards.requireAuth(request)
-  },
-)
+export async function requireAuth() {
+  const request = getRequest()
+  const { getAuthGuards } = await loadAuthServer()
+  return getAuthGuards().requireAuth(request)
+}
 
 /**
- * Server function to require a specific capability
+ * Require a specific capability. Throws if not authorized.
+ *
+ * Signature accepts `{ data: { capability } }` for compatibility with the
+ * historical `createServerFn` shape -- callers that already pass that wrapper
+ * keep working without churn.
  */
-export const requireCapability = createServerFn({ method: 'POST' })
-  .inputValidator((data: { capability: string }) => ({
-    capability: data.capability as Capability,
-  }))
-  .handler(async ({ data: { capability } }) => {
-    const request = getRequest()
-    const guards = getAuthGuards()
-    return guards.requireCapability(request, capability)
-  })
+export async function requireCapability({
+  data: { capability },
+}: {
+  data: { capability: Capability | string }
+}) {
+  const request = getRequest()
+  const { getAuthGuards } = await loadAuthServer()
+  return getAuthGuards().requireCapability(request, capability as Capability)
+}
 
 /**
  * Load user from session (non-blocking, returns null if not authenticated)
@@ -88,21 +97,12 @@ export async function requireCapabilityUser(capability: string) {
 export { ADMIN_ACCESS_CAPABILITIES as ADMIN_CAPABILITIES } from '~/db/types'
 
 /**
- * Server function to require any admin-like capability
- * Used for accessing the /admin area (each sub-route checks specific capabilities)
+ * Require any admin-like capability. Used by /admin area guards.
  */
-export const requireAnyAdminCapability = createServerFn({
-  method: 'POST',
-}).handler(async () => {
-  console.log('[requireAnyAdminCapability] Starting...')
+export async function requireAnyAdminCapability() {
   const request = getRequest()
-  console.log('[requireAnyAdminCapability] Got request')
-  const authService = getAuthService()
-  console.log(
-    '[requireAnyAdminCapability] Got authService, calling getCurrentUser...',
-  )
-  const user = await authService.getCurrentUser(request)
-  console.log('[requireAnyAdminCapability] Got user:', user?.email)
+  const { getAuthService } = await loadAuthServer()
+  const user = await getAuthService().getCurrentUser(request)
 
   if (!user) {
     throw new Error('Not authenticated')
@@ -117,4 +117,4 @@ export const requireAnyAdminCapability = createServerFn({
   }
 
   return user
-})
+}
diff --git a/src/utils/authors.ts b/src/utils/authors.ts
new file mode 100644
index 000000000..9ce5630ab
--- /dev/null
+++ b/src/utils/authors.ts
@@ -0,0 +1,7 @@
+import { allMaintainers, type Maintainer } from '~/libraries/maintainers'
+
+export function findMaintainerByAuthorName(
+  name: string,
+): Maintainer | undefined {
+  return allMaintainers.find((maintainer) => maintainer.name === name)
+}
diff --git a/src/utils/banner.functions.ts b/src/utils/banner.functions.ts
deleted file mode 100644
index 608787320..000000000
--- a/src/utils/banner.functions.ts
+++ /dev/null
@@ -1,374 +0,0 @@
-import { createServerFn } from '@tanstack/react-start'
-import { db } from '~/db/client'
-import { banners, bannerDismissals } from '~/db/schema'
-import { eq, and, gte, lte, or, sql } from 'drizzle-orm'
-import * as v from 'valibot'
-import { loadUser } from './auth.server'
-import { requireAdmin } from './feed.server'
-import type { BannerScope, BannerStyle } from '~/db/schema'
-
-export type ActiveBanner = {
-  id: string
-  title: string
-  content: string | null
-  linkUrl: string | null
-  linkText: string | null
-  style: BannerStyle
-  scope: BannerScope
-  pathPrefixes: string[]
-  priority: number
-  startsAt: number | null
-  expiresAt: number | null
-}
-
-export type BannerWithMeta = ActiveBanner & {
-  isActive: boolean
-  createdAt: number
-  updatedAt: number
-}
-
-// Server function to get active banners for a given path
-export const getActiveBanners = createServerFn({ method: 'GET' })
-  .inputValidator(
-    v.object({
-      pathname: v.string(),
-    }),
-  )
-  .handler(async ({ data }): Promise<ActiveBanner[]> => {
-    const now = new Date()
-
-    // Get all active banners that are within their schedule
-    const activeBanners = await db.query.banners.findMany({
-      where: and(
-        eq(banners.isActive, true),
-        // Either no start date or starts_at <= now
-        or(sql`${banners.startsAt} IS NULL`, lte(banners.startsAt, now)),
-        // Either no end date or expires_at >= now
-        or(sql`${banners.expiresAt} IS NULL`, gte(banners.expiresAt, now)),
-      ),
-      orderBy: (b, { desc }) => [desc(b.priority), desc(b.createdAt)],
-    })
-
-    // Filter banners based on scope and current path
-    const filteredBanners = activeBanners.filter((banner) => {
-      if (banner.scope === 'global') {
-        return true
-      }
-
-      // For targeted banners, check if pathname matches any path prefix
-      if (banner.scope === 'targeted') {
-        return banner.pathPrefixes.some((prefix) =>
-          data.pathname.startsWith(prefix),
-        )
-      }
-
-      return false
-    })
-
-    return filteredBanners.map((banner) => ({
-      id: banner.id,
-      title: banner.title,
-      content: banner.content,
-      linkUrl: banner.linkUrl,
-      linkText: banner.linkText,
-      style: banner.style,
-      scope: banner.scope,
-      pathPrefixes: banner.pathPrefixes,
-      priority: banner.priority,
-      startsAt: banner.startsAt?.getTime() ?? null,
-      expiresAt: banner.expiresAt?.getTime() ?? null,
-    }))
-  })
-
-// Server function to get dismissed banner IDs for the current user
-export const getDismissedBannerIds = createServerFn({ method: 'GET' }).handler(
-  async (): Promise<string[]> => {
-    const user = await loadUser()
-
-    if (!user) {
-      return []
-    }
-
-    const dismissals = await db.query.bannerDismissals.findMany({
-      where: eq(bannerDismissals.userId, user.userId),
-      columns: {
-        bannerId: true,
-      },
-    })
-
-    return dismissals.map((d) => d.bannerId)
-  },
-)
-
-// Server function to dismiss a banner for the current user
-export const dismissBanner = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      bannerId: v.pipe(v.string(), v.uuid()),
-    }),
-  )
-  .handler(async ({ data }): Promise<{ success: boolean }> => {
-    const user = await loadUser()
-
-    if (!user) {
-      // For anonymous users, we can't store in DB - client will use localStorage
-      return { success: false }
-    }
-
-    // Check if already dismissed
-    const existing = await db.query.bannerDismissals.findFirst({
-      where: and(
-        eq(bannerDismissals.userId, user.userId),
-        eq(bannerDismissals.bannerId, data.bannerId),
-      ),
-    })
-
-    if (existing) {
-      return { success: true }
-    }
-
-    // Create dismissal record
-    await db.insert(bannerDismissals).values({
-      userId: user.userId,
-      bannerId: data.bannerId,
-    })
-
-    return { success: true }
-  })
-
-// ============================================
-// Admin CRUD Operations
-// ============================================
-
-// List all banners (admin)
-export const listBanners = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      includeInactive: v.optional(v.boolean()),
-    }),
-  )
-  .handler(async ({ data }): Promise<BannerWithMeta[]> => {
-    await requireAdmin()
-
-    const whereClause = data.includeInactive
-      ? undefined
-      : eq(banners.isActive, true)
-
-    const allBanners = await db.query.banners.findMany({
-      where: whereClause,
-      orderBy: (b, { desc }) => [desc(b.priority), desc(b.createdAt)],
-    })
-
-    return allBanners.map((banner) => ({
-      id: banner.id,
-      title: banner.title,
-      content: banner.content,
-      linkUrl: banner.linkUrl,
-      linkText: banner.linkText,
-      style: banner.style,
-      scope: banner.scope,
-      pathPrefixes: banner.pathPrefixes,
-      priority: banner.priority,
-      isActive: banner.isActive,
-      startsAt: banner.startsAt?.getTime() ?? null,
-      expiresAt: banner.expiresAt?.getTime() ?? null,
-      createdAt: banner.createdAt.getTime(),
-      updatedAt: banner.updatedAt.getTime(),
-    }))
-  })
-
-// Get single banner by ID (admin)
-export const getBanner = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ id: v.pipe(v.string(), v.uuid()) }))
-  .handler(async ({ data }): Promise<BannerWithMeta | null> => {
-    await requireAdmin()
-
-    const banner = await db.query.banners.findFirst({
-      where: eq(banners.id, data.id),
-    })
-
-    if (!banner) {
-      return null
-    }
-
-    return {
-      id: banner.id,
-      title: banner.title,
-      content: banner.content,
-      linkUrl: banner.linkUrl,
-      linkText: banner.linkText,
-      style: banner.style,
-      scope: banner.scope,
-      pathPrefixes: banner.pathPrefixes,
-      priority: banner.priority,
-      isActive: banner.isActive,
-      startsAt: banner.startsAt?.getTime() ?? null,
-      expiresAt: banner.expiresAt?.getTime() ?? null,
-      createdAt: banner.createdAt.getTime(),
-      updatedAt: banner.updatedAt.getTime(),
-    }
-  })
-
-// Create new banner (admin)
-export const createBanner = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      title: v.pipe(v.string(), v.minLength(1, 'Title is required')),
-      content: v.optional(v.string()),
-      linkUrl: v.union([
-        v.optional(v.pipe(v.string(), v.url())),
-        v.literal(''),
-      ]),
-      linkText: v.optional(v.string()),
-      style: v.optional(
-        v.picklist(['info', 'warning', 'success', 'promo']),
-        'info',
-      ),
-      scope: v.optional(v.picklist(['global', 'targeted']), 'global'),
-      pathPrefixes: v.optional(v.array(v.string()), []),
-      isActive: v.optional(v.boolean(), true),
-      startsAt: v.optional(v.number()),
-      expiresAt: v.optional(v.number()),
-      priority: v.optional(v.number(), 0),
-    }),
-  )
-  .handler(async ({ data }): Promise<{ id: string }> => {
-    await requireAdmin()
-
-    const [newBanner] = await db
-      .insert(banners)
-      .values({
-        title: data.title,
-        content: data.content || null,
-        linkUrl: data.linkUrl || null,
-        linkText: data.linkText || null,
-        style: data.style,
-        scope: data.scope,
-        pathPrefixes: data.pathPrefixes,
-        isActive: data.isActive,
-        startsAt: data.startsAt ? new Date(data.startsAt) : null,
-        expiresAt: data.expiresAt ? new Date(data.expiresAt) : null,
-        priority: data.priority,
-      })
-      .returning()
-
-    return { id: newBanner.id }
-  })
-
-// Update banner (admin)
-export const updateBanner = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      id: v.pipe(v.string(), v.uuid()),
-      title: v.optional(v.pipe(v.string(), v.minLength(1))),
-      content: v.optional(v.string()),
-      linkUrl: v.union([
-        v.optional(v.pipe(v.string(), v.url())),
-        v.literal(''),
-      ]),
-      linkText: v.optional(v.string()),
-      style: v.optional(v.picklist(['info', 'warning', 'success', 'promo'])),
-      scope: v.optional(v.picklist(['global', 'targeted'])),
-      pathPrefixes: v.optional(v.array(v.string())),
-      isActive: v.optional(v.boolean()),
-      startsAt: v.optional(v.nullable(v.number())),
-      expiresAt: v.optional(v.nullable(v.number())),
-      priority: v.optional(v.number()),
-    }),
-  )
-  .handler(async ({ data }): Promise<{ success: boolean }> => {
-    await requireAdmin()
-
-    const existing = await db.query.banners.findFirst({
-      where: eq(banners.id, data.id),
-    })
-
-    if (!existing) {
-      throw new Error('Banner not found')
-    }
-
-    const updates: {
-      title?: string
-      content?: string | null
-      linkUrl?: string | null
-      linkText?: string | null
-      style?: BannerStyle
-      scope?: BannerScope
-      pathPrefixes?: string[]
-      isActive?: boolean
-      startsAt?: Date | null
-      expiresAt?: Date | null
-      priority?: number
-      updatedAt: Date
-    } = {
-      updatedAt: new Date(),
-    }
-
-    if (data.title !== undefined) updates.title = data.title
-    if (data.content !== undefined) updates.content = data.content || null
-    if (data.linkUrl !== undefined) updates.linkUrl = data.linkUrl || null
-    if (data.linkText !== undefined) updates.linkText = data.linkText || null
-    if (data.style !== undefined) updates.style = data.style
-    if (data.scope !== undefined) updates.scope = data.scope
-    if (data.pathPrefixes !== undefined)
-      updates.pathPrefixes = data.pathPrefixes
-    if (data.isActive !== undefined) updates.isActive = data.isActive
-    if (data.startsAt !== undefined) {
-      updates.startsAt = data.startsAt ? new Date(data.startsAt) : null
-    }
-    if (data.expiresAt !== undefined) {
-      updates.expiresAt = data.expiresAt ? new Date(data.expiresAt) : null
-    }
-    if (data.priority !== undefined) updates.priority = data.priority
-
-    await db.update(banners).set(updates).where(eq(banners.id, data.id))
-
-    return { success: true }
-  })
-
-// Delete banner (admin)
-export const deleteBanner = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ id: v.pipe(v.string(), v.uuid()) }))
-  .handler(async ({ data }): Promise<{ success: boolean }> => {
-    await requireAdmin()
-
-    const existing = await db.query.banners.findFirst({
-      where: eq(banners.id, data.id),
-    })
-
-    if (!existing) {
-      throw new Error('Banner not found')
-    }
-
-    // Delete banner (cascades to dismissals)
-    await db.delete(banners).where(eq(banners.id, data.id))
-
-    return { success: true }
-  })
-
-// Toggle banner active state (admin)
-export const toggleBannerActive = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      id: v.pipe(v.string(), v.uuid()),
-      isActive: v.boolean(),
-    }),
-  )
-  .handler(async ({ data }): Promise<{ success: boolean }> => {
-    await requireAdmin()
-
-    const existing = await db.query.banners.findFirst({
-      where: eq(banners.id, data.id),
-    })
-
-    if (!existing) {
-      throw new Error('Banner not found')
-    }
-
-    await db
-      .update(banners)
-      .set({ isActive: data.isActive, updatedAt: new Date() })
-      .where(eq(banners.id, data.id))
-
-    return { success: true }
-  })
diff --git a/src/utils/blog-format.ts b/src/utils/blog-format.ts
new file mode 100644
index 000000000..72987c098
--- /dev/null
+++ b/src/utils/blog-format.ts
@@ -0,0 +1,70 @@
+import { findLibrary, type LibrarySlim } from '~/libraries'
+
+const listJoiner = new Intl.ListFormat('en-US', {
+  style: 'long',
+  type: 'conjunction',
+})
+
+export function formatAuthors(authors: Array<string>) {
+  if (!authors.length) {
+    return 'TanStack'
+  }
+
+  return listJoiner.format(authors)
+}
+
+function getUtcDateString(date = new Date()) {
+  return date.toISOString().slice(0, 10)
+}
+
+function parsePublishedDate(published: string) {
+  const [year, month, day] = published.split('-').map(Number)
+
+  return new Date(Date.UTC(year, month - 1, day, 12))
+}
+
+export function formatPublishedDate(published: string) {
+  return parsePublishedDate(published).toLocaleDateString('en-US', {
+    timeZone: 'UTC',
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+export function isPublishedDateReleased(published: string, now = new Date()) {
+  return published <= getUtcDateString(now)
+}
+
+export function publishedDateToUTCString(published: string) {
+  return parsePublishedDate(published).toUTCString()
+}
+
+function isLibrarySlim(
+  library: LibrarySlim | undefined,
+): library is LibrarySlim {
+  return library !== undefined
+}
+
+export function getBlogLibraries(library: string | undefined): LibrarySlim[] {
+  if (!library) {
+    return []
+  }
+
+  return library
+    .split(',')
+    .map((libraryId) => findLibrary(libraryId.trim()))
+    .filter(isLibrarySlim)
+}
+
+export function getDistinctAuthors(
+  posts: ReadonlyArray<{ authors: string[] }>,
+): string[] {
+  const authors = new Set<string>()
+  for (const post of posts) {
+    for (const author of post.authors) {
+      authors.add(author)
+    }
+  }
+  return [...authors].sort((a, b) => a.localeCompare(b))
+}
diff --git a/src/utils/blog.functions.ts b/src/utils/blog.functions.ts
new file mode 100644
index 000000000..3f36165a6
--- /dev/null
+++ b/src/utils/blog.functions.ts
@@ -0,0 +1,193 @@
+import { createServerFn } from '@tanstack/react-start'
+import { setResponseHeaders } from '@tanstack/react-start/server'
+import { notFound, redirect } from '@tanstack/react-router'
+import { allPosts } from 'content-collections'
+import * as v from 'valibot'
+import type { LibraryId } from '~/libraries'
+import { getPostsForLibrary, getPublishedPosts } from '~/utils/blog'
+import {
+  formatAuthors,
+  formatPublishedDate,
+  isPublishedDateReleased,
+} from '~/utils/blog-format'
+import { buildRedirectManifest } from './redirects'
+
+export type RecentPost = {
+  slug: string
+  title: string
+  published: string
+  excerpt: string
+  headerImage: string | undefined
+  authors: Array<string>
+}
+
+const blogRedirectManifest = buildRedirectManifest(
+  allPosts.flatMap((post) =>
+    (post.redirectFrom ?? []).map((redirectFrom: string) => ({
+      from: normalizeBlogRedirectPath(redirectFrom),
+      to: post.slug,
+      source: post._meta.filePath,
+    })),
+  ),
+  {
+    label: 'blog posts',
+    formatTarget: (target) => `/blog/${target}`,
+  },
+)
+
+function normalizeBlogRedirectPath(path: string) {
+  return path.replace(/^\/+|\/+$/g, '')
+}
+
+function handleRedirects(blogPath: string) {
+  const normalizedPaths = new Set([
+    normalizeBlogRedirectPath(blogPath),
+    normalizeBlogRedirectPath(`/blog/${blogPath}`),
+  ])
+
+  for (const path of normalizedPaths) {
+    const redirectedPostSlug = blogRedirectManifest[path]
+
+    if (redirectedPostSlug) {
+      throw redirect({
+        href: `/blog/${redirectedPostSlug}`,
+        statusCode: 308,
+      })
+    }
+  }
+
+  if (blogPath.includes('directives-the-new-framework-lock-in')) {
+    throw redirect({
+      href: '/blog/directives-and-the-platform-boundary',
+    })
+  }
+}
+
+export const fetchBlogPost = createServerFn({ method: 'GET' })
+  .validator(v.optional(v.string()))
+  .handler(async ({ data }: { data: string | undefined }) => {
+    if (!data) {
+      throw new Error('Invalid blog path')
+    }
+
+    handleRedirects(data)
+
+    const post = allPosts.find((candidate) => candidate.slug === data)
+
+    if (!post) {
+      throw notFound()
+    }
+
+    setResponseHeaders(
+      new Headers({
+        'Cache-Control': 'public, max-age=0, must-revalidate',
+        'Cloudflare-CDN-Cache-Control':
+          'public, max-age=300, stale-while-revalidate=300',
+      }),
+    )
+
+    const blogContent = `<small><em>by ${formatAuthors(post.authors)} on ${formatPublishedDate(
+      post.published || '1970-01-01',
+    )}.</em></small>
+
+${post.content}`
+
+    const isUnpublished = post.draft || !isPublishedDateReleased(post.published)
+
+    return {
+      authors: post.authors,
+      content: blogContent,
+      description: post.excerpt,
+      filePath: `src/blog/${data}.md`,
+      headerImage: post.headerImage,
+      isUnpublished,
+      library: post.library,
+      published: post.published,
+      title: post.title,
+    }
+  })
+
+export const fetchRecentPosts = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<Array<RecentPost>> => {
+    setResponseHeaders(
+      new Headers({
+        'Cache-Control': 'public, max-age=0, must-revalidate',
+        'Cloudflare-CDN-Cache-Control':
+          'public, max-age=300, stale-while-revalidate=300',
+      }),
+    )
+
+    return getPublishedPosts()
+      .slice(0, 3)
+      .map((post) => ({
+        slug: post.slug,
+        title: post.title,
+        published: post.published,
+        excerpt: post.excerpt,
+        headerImage: post.headerImage,
+        authors: post.authors,
+      }))
+  },
+)
+
+export type RelatedPost = {
+  libraryId: LibraryId
+  post: {
+    slug: string
+    title: string
+    published: string
+    excerpt: string
+  }
+}
+
+/**
+ * Mirrors CategoryArticle's original client-side
+ * `libraries.flatMap((lib) => getPostsForLibrary(lib.id)...).slice(0, 4)`
+ * so the display order/cutoff of related posts is unchanged.
+ */
+export const fetchRelatedPostsForLibraries = createServerFn({ method: 'GET' })
+  .validator(v.array(v.string()))
+  .handler(({ data }): Array<RelatedPost> => {
+    return (data as Array<LibraryId>)
+      .flatMap((libraryId) =>
+        getPostsForLibrary(libraryId).map((post) => ({
+          libraryId,
+          post: {
+            slug: post.slug,
+            title: post.title,
+            published: post.published,
+            excerpt: post.excerpt,
+          },
+        })),
+      )
+      .slice(0, 4)
+  })
+
+export type LibraryBlogPost = {
+  slug: string
+  title: string
+  published: string
+  excerpt: string
+  headerImage: string | undefined
+  authors: Array<string>
+  library: string | undefined
+}
+
+/**
+ * Wider 7-field shape (matches blog.index.tsx's fetchFrontMatters) since
+ * /docs/blog needs authors (author filter), headerImage (cover), and
+ * library (badge suppression) in addition to slug/title/published/excerpt.
+ */
+export const fetchPostsForLibrary = createServerFn({ method: 'GET' })
+  .validator(v.string())
+  .handler(({ data }): Array<LibraryBlogPost> => {
+    return getPostsForLibrary(data as LibraryId).map((post) => ({
+      slug: post.slug,
+      title: post.title,
+      published: post.published,
+      excerpt: post.excerpt,
+      headerImage: post.headerImage,
+      authors: post.authors,
+      library: post.library,
+    }))
+  })
diff --git a/src/utils/blog.ts b/src/utils/blog.ts
index 1fd37675f..6ed7b92d8 100644
--- a/src/utils/blog.ts
+++ b/src/utils/blog.ts
@@ -1,29 +1,19 @@
 import { allPosts, type Post } from 'content-collections'
-
-const listJoiner = new Intl.ListFormat('en-US', {
-  style: 'long',
-  type: 'conjunction',
-})
-
-export function formatAuthors(authors: Array<string>) {
-  if (!authors.length) {
-    return 'TanStack'
-  }
-
-  return listJoiner.format(authors)
-}
+import type { LibraryId } from '~/libraries'
+import { getBlogLibraries, isPublishedDateReleased } from './blog-format'
 
 /**
  * Returns published blog posts (not drafts, not future-dated),
  * sorted by publish date descending (newest first).
  */
 export function getPublishedPosts(): Post[] {
-  const now = new Date()
-
   return allPosts
-    .filter((post) => !post.draft && new Date(post.published) <= now)
-    .sort(
-      (a, b) =>
-        new Date(b.published).getTime() - new Date(a.published).getTime(),
-    )
+    .filter((post) => !post.draft && isPublishedDateReleased(post.published))
+    .sort((a, b) => b.published.localeCompare(a.published))
+}
+
+export function getPostsForLibrary(libraryId: LibraryId): Post[] {
+  return getPublishedPosts().filter((post) =>
+    getBlogLibraries(post.library).some((lib) => lib.id === libraryId),
+  )
 }
diff --git a/src/utils/browser-effects.ts b/src/utils/browser-effects.ts
new file mode 100644
index 000000000..33887a9ba
--- /dev/null
+++ b/src/utils/browser-effects.ts
@@ -0,0 +1,110 @@
+import * as React from 'react'
+
+export async function copyTextToClipboard(value: string) {
+  if (typeof navigator !== 'undefined' && navigator.clipboard) {
+    try {
+      await navigator.clipboard.writeText(value)
+      return
+    } catch {
+      // Fall back for restricted contexts where the Clipboard API exists but rejects.
+    }
+  }
+
+  if (typeof document === 'undefined') {
+    throw new Error('Clipboard unavailable')
+  }
+
+  const textarea = document.createElement('textarea')
+  textarea.value = value
+  textarea.setAttribute('readonly', '')
+  textarea.style.position = 'fixed'
+  textarea.style.left = '-9999px'
+  textarea.style.top = '0'
+
+  document.body.appendChild(textarea)
+  textarea.focus()
+  textarea.select()
+
+  let didCopy = false
+
+  try {
+    didCopy = document.execCommand('copy')
+  } finally {
+    document.body.removeChild(textarea)
+  }
+
+  if (!didCopy) {
+    throw new Error('Copy failed')
+  }
+}
+
+export function openPopupWindow(
+  url: string,
+  target = '_blank',
+  features?: string,
+) {
+  if (typeof window === 'undefined') {
+    return null
+  }
+
+  return window.open(url, target, features)
+}
+
+export function openCenteredPopupWindow({
+  features,
+  height,
+  target,
+  url,
+  width,
+}: {
+  features?: Array<string>
+  height: number
+  target: string
+  url: string
+  width: number
+}) {
+  if (typeof window === 'undefined') {
+    return null
+  }
+
+  const left = window.screenX + (window.outerWidth - width) / 2
+  const top = window.screenY + (window.outerHeight - height) / 2
+  const featureList = [
+    `width=${width}`,
+    `height=${height}`,
+    `left=${left}`,
+    `top=${top}`,
+    ...(features ?? []),
+  ].join(',')
+
+  return openPopupWindow(url, target, featureList)
+}
+
+export function useTemporaryFlag(defaultDurationMs = 2000) {
+  const [active, setActive] = React.useState(false)
+  const timeoutRef = React.useRef<number | null>(null)
+
+  const clearTimer = React.useCallback(() => {
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+  }, [])
+
+  const trigger = React.useCallback(
+    (durationMs = defaultDurationMs) => {
+      clearTimer()
+
+      setActive(true)
+      timeoutRef.current = window.setTimeout(() => {
+        setActive(false)
+        timeoutRef.current = null
+      }, durationMs)
+    },
+    [clearTimer, defaultDurationMs],
+  )
+
+  React.useEffect(() => clearTimer, [clearTimer])
+
+  return { active, trigger }
+}
diff --git a/src/utils/browser-storage.ts b/src/utils/browser-storage.ts
new file mode 100644
index 000000000..0387902d5
--- /dev/null
+++ b/src/utils/browser-storage.ts
@@ -0,0 +1,57 @@
+type StorageKind = 'local' | 'session'
+
+function getStorage(kind: StorageKind) {
+  if (typeof window === 'undefined') {
+    return null
+  }
+
+  try {
+    return kind === 'local' ? window.localStorage : window.sessionStorage
+  } catch {
+    return null
+  }
+}
+
+function getStorageItem(kind: StorageKind, key: string) {
+  try {
+    return getStorage(kind)?.getItem(key) ?? null
+  } catch {
+    return null
+  }
+}
+
+function setStorageItem(kind: StorageKind, key: string, value: string) {
+  try {
+    getStorage(kind)?.setItem(key, value)
+  } catch {
+    // Storage can be unavailable in private or restricted browser modes.
+  }
+}
+
+function removeStorageItem(kind: StorageKind, key: string) {
+  try {
+    getStorage(kind)?.removeItem(key)
+  } catch {
+    // Storage can be unavailable in private or restricted browser modes.
+  }
+}
+
+export function getLocalStorageItem(key: string) {
+  return getStorageItem('local', key)
+}
+
+export function setLocalStorageItem(key: string, value: string) {
+  return setStorageItem('local', key, value)
+}
+
+export function removeLocalStorageItem(key: string) {
+  return removeStorageItem('local', key)
+}
+
+export function getSessionStorageItem(key: string) {
+  return getStorageItem('session', key)
+}
+
+export function setSessionStorageItem(key: string, value: string) {
+  return setStorageItem('session', key, value)
+}
diff --git a/src/utils/cache.server.ts b/src/utils/cache.server.ts
index 7bd2a7593..14692c4ee 100644
--- a/src/utils/cache.server.ts
+++ b/src/utils/cache.server.ts
@@ -1,31 +1,61 @@
-import LRUCache from 'lru-cache'
+import { LRUCache } from 'lru-cache'
 
 declare global {
-  var docCache: LRUCache<string, unknown>
+  var docCache: LRUCache<string, any>
+  var pendingDocCache: Map<string, Promise<any>>
 }
 
 const docCache =
   globalThis.docCache ||
-  (globalThis.docCache = new LRUCache<string, unknown>({
+  (globalThis.docCache = new LRUCache<string, any>({
     max: 300,
-    // ttl: 1,
     ttl: process.env.NODE_ENV === 'production' ? 1 : 1000000,
+    noDeleteOnStaleGet: true,
   }))
 
+const pendingDocCache =
+  globalThis.pendingDocCache || (globalThis.pendingDocCache = new Map())
+
+function getCached<T>(key: string): T | undefined {
+  const value = docCache.get(key)
+
+  return value === undefined ? undefined : (value as T)
+}
+
+async function withPendingCache<T>(key: string, fn: () => Promise<T>) {
+  const pending = pendingDocCache.get(key)
+
+  if (pending) {
+    return pending as Promise<T>
+  }
+
+  const promise = fn().finally(() => {
+    pendingDocCache.delete(key)
+  })
+
+  pendingDocCache.set(key, promise)
+
+  return promise
+}
+
 export async function fetchCached<T>(opts: {
   fn: () => Promise<T>
   key: string
   ttl: number
 }): Promise<T> {
-  if (docCache.has(opts.key)) {
-    return docCache.get(opts.key) as T
+  const cached = getCached<T>(opts.key)
+
+  if (cached !== undefined) {
+    return cached
   }
 
-  const result = await opts.fn()
+  return withPendingCache(opts.key, async () => {
+    const result = await opts.fn()
 
-  docCache.set(opts.key, result, {
-    ttl: opts.ttl,
-  })
+    docCache.set(opts.key, result, {
+      ttl: opts.ttl,
+    })
 
-  return result
+    return result
+  })
 }
diff --git a/src/utils/chart.ts b/src/utils/chart.ts
index 187dbb551..1a977a3fd 100644
--- a/src/utils/chart.ts
+++ b/src/utils/chart.ts
@@ -74,14 +74,22 @@ export function getBinFunction(binType: BinType) {
   return option?.bin ?? d3.utcDay
 }
 
+// Get the start of the current (incomplete) bin period
+export function getCurrentBinStart(binType: BinType): Date {
+  const binFn = getBinFunction(binType)
+  return binFn.floor(new Date())
+}
+
 // Bin time series data using d3 rollup
 export function binTimeSeriesData(
   data: Array<{ date: string; count: number }>,
   binType: BinType,
+  options?: { includeIncomplete?: boolean },
 ): Array<{ date: Date; count: number }> {
   if (data.length === 0) return []
 
   const binFn = getBinFunction(binType)
+  const includeIncomplete = options?.includeIncomplete ?? true
 
   const parsed = data.map((d) => ({
     date: new Date(d.date),
@@ -94,9 +102,17 @@ export function binTimeSeriesData(
     (d) => binFn.floor(d.date),
   )
 
-  return Array.from(binned, ([date, count]) => ({ date, count })).sort(
+  const sorted = Array.from(binned, ([date, count]) => ({ date, count })).sort(
     (a, b) => a.date.getTime() - b.date.getTime(),
   )
+
+  // Filter out the current incomplete bin if explicitly requested
+  if (!includeIncomplete) {
+    const currentBinStart = getCurrentBinStart(binType)
+    return sorted.filter((d) => d.date.getTime() < currentBinStart.getTime())
+  }
+
+  return sorted
 }
 
 // Format date for display based on bin type
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 52877b602..7aa353981 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -1,28 +1,44 @@
 import * as v from 'valibot'
-import { fetchRepoFile } from './documents.server'
+import {
+  fetchRepoFile,
+  isRecoverableGitHubContentError,
+} from './documents.server'
+import { docsNavTabIds, type DocsNavTabId } from './docsNavTabs'
 import { createServerFn } from '@tanstack/react-start'
 import { setResponseHeaders } from '@tanstack/react-start/server'
 
 export type MenuItem = {
   label: string | React.ReactNode
+  tab?: DocsNavTabId
   children: {
     label: string | React.ReactNode
     to: string
     badge?: string
+    /** ISO date string marking when the page was added. Drives the "New" sidebar pill. */
+    addedAt?: string
+    /** ISO date string marking when the page was last meaningfully updated. Drives the "Updated" sidebar pill. */
+    updatedAt?: string
+    tab?: DocsNavTabId
   }[]
   collapsible?: boolean
   defaultCollapsed?: boolean
 }
 
+const tabSchema = v.optional(v.picklist(docsNavTabIds))
+
 const configSchema = v.object({
   sections: v.array(
     v.object({
       label: v.string(),
+      tab: tabSchema,
       children: v.array(
         v.object({
           label: v.string(),
           to: v.string(),
           badge: v.optional(v.string()),
+          addedAt: v.optional(v.string()),
+          updatedAt: v.optional(v.string()),
+          tab: tabSchema,
         }),
       ),
       frameworks: v.optional(
@@ -34,6 +50,9 @@ const configSchema = v.object({
                 label: v.string(),
                 to: v.string(),
                 badge: v.optional(v.string()),
+                addedAt: v.optional(v.string()),
+                updatedAt: v.optional(v.string()),
+                tab: tabSchema,
               }),
             ),
           }),
@@ -48,44 +67,73 @@ const configSchema = v.object({
 
 export type ConfigSchema = v.InferOutput<typeof configSchema>
 
+function getEmptyConfig(): ConfigSchema {
+  return { sections: [] }
+}
+
+function parseDocsConfig(config: string) {
+  const tanstackDocsConfigFromJson = JSON.parse(config)
+  const validationResult = v.safeParse(configSchema, tanstackDocsConfigFromJson)
+
+  if (!validationResult.success) {
+    console.error(JSON.stringify(validationResult.issues, null, 2))
+    throw new Error('Valibot validation failed')
+  }
+
+  return validationResult.output
+}
+
 /**
   Fetch the config file for the project and validate it.
   */
 export const getTanstackDocsConfig = createServerFn({ method: 'GET' })
-  .inputValidator(
+  .validator(
     v.object({ repo: v.string(), branch: v.string(), docsRoot: v.string() }),
   )
-  .handler(async ({ data: { repo, branch, docsRoot } }) => {
-    const config = await fetchRepoFile(repo, branch, `${docsRoot}/config.json`)
-
-    if (!config) {
-      throw new Error(`Repo's ${docsRoot}/config.json was not found!`)
-    }
-
-    try {
-      const tanstackDocsConfigFromJson = JSON.parse(config)
-      const validationResult = v.safeParse(
-        configSchema,
-        tanstackDocsConfigFromJson,
-      )
-
-      if (!validationResult.success) {
-        // Log the issues that come up during validation
-        console.error(JSON.stringify(validationResult.issues, null, 2))
-        throw new Error('Valibot validation failed')
+  .handler(
+    async ({
+      data,
+    }: {
+      data: { repo: string; branch: string; docsRoot: string }
+    }) => {
+      const { repo, branch, docsRoot } = data
+
+      let config: string | null
+
+      try {
+        config = await fetchRepoFile(repo, branch, `${docsRoot}/config.json`)
+      } catch (error) {
+        if (!isRecoverableGitHubContentError(error)) {
+          throw error
+        }
+
+        return getEmptyConfig()
       }
 
-      setResponseHeaders(
-        new Headers({
-          'Cache-Control': 'public, max-age=0, must-revalidate',
-          'Netlify-CDN-Cache-Control':
-            'public, max-age=300, durable, stale-while-revalidate=300',
-        }),
-      )
-
-      return validationResult.output
-    } catch (e) {
-      console.error(e)
-      throw new Error('Invalid docs/config.json file', { cause: e })
-    }
-  })
+      if (!config) {
+        return getEmptyConfig()
+      }
+
+      try {
+        const parsedConfig = parseDocsConfig(config)
+
+        setResponseHeaders(
+          new Headers({
+            'Cache-Control': 'public, max-age=0, must-revalidate',
+            'Cloudflare-CDN-Cache-Control':
+              'public, max-age=300, stale-while-revalidate=300',
+            'Cache-Tag': [
+              'docs-config:all',
+              `docs-config:${repo}`,
+              `docs-config:${repo}:${branch}`,
+            ].join(','),
+          }),
+        )
+
+        return parsedConfig
+      } catch (e) {
+        console.error(e)
+        throw new Error('Invalid docs/config.json file', { cause: e })
+      }
+    },
+  )
diff --git a/src/utils/crypto.server.ts b/src/utils/crypto.server.ts
new file mode 100644
index 000000000..617a254a1
--- /dev/null
+++ b/src/utils/crypto.server.ts
@@ -0,0 +1,120 @@
+/**
+ * Server-side encryption utilities for sensitive data at rest.
+ * Uses AES-256-GCM for authenticated encryption.
+ */
+
+import {
+  createCipheriv,
+  createDecipheriv,
+  randomBytes,
+  createHmac,
+} from 'crypto'
+import { env } from './env'
+
+const ALGORITHM = 'aes-256-gcm'
+const IV_LENGTH = 12 // 96 bits for GCM
+const AUTH_TAG_LENGTH = 16 // 128 bits
+const KEY_VERSION = 1 // Increment when rotating keys
+
+function getEncryptionKey(): Buffer {
+  const secret = env.SESSION_SECRET
+  if (!secret) {
+    throw new Error('SESSION_SECRET is required for encryption')
+  }
+  // Derive a 256-bit key from SESSION_SECRET using HMAC
+  return createHmac('sha256', secret).update('token-encryption-v1').digest()
+}
+
+/**
+ * Encrypt a plaintext string.
+ * Returns: base64(version:iv:authTag:ciphertext)
+ */
+export function encryptToken(plaintext: string): string {
+  const key = getEncryptionKey()
+  const iv = randomBytes(IV_LENGTH)
+  const cipher = createCipheriv(ALGORITHM, key, iv)
+
+  const encrypted = Buffer.concat([
+    cipher.update(plaintext, 'utf8'),
+    cipher.final(),
+  ])
+  const authTag = cipher.getAuthTag()
+
+  // Format: version(1 byte) + iv(12 bytes) + authTag(16 bytes) + ciphertext
+  const result = Buffer.concat([
+    Buffer.from([KEY_VERSION]),
+    iv,
+    authTag,
+    encrypted,
+  ])
+
+  return result.toString('base64')
+}
+
+/**
+ * Decrypt an encrypted token.
+ * Returns the original plaintext or null if decryption fails.
+ */
+export function decryptToken(encryptedBase64: string): string | null {
+  try {
+    const data = Buffer.from(encryptedBase64, 'base64')
+
+    // Extract components
+    const version = data[0]
+    if (version !== KEY_VERSION) {
+      // Future: handle key rotation by supporting old versions
+      console.error(`[CRYPTO] Unsupported key version: ${version}`)
+      return null
+    }
+
+    const iv = data.subarray(1, 1 + IV_LENGTH)
+    const authTag = data.subarray(
+      1 + IV_LENGTH,
+      1 + IV_LENGTH + AUTH_TAG_LENGTH,
+    )
+    const ciphertext = data.subarray(1 + IV_LENGTH + AUTH_TAG_LENGTH)
+
+    const key = getEncryptionKey()
+    const decipher = createDecipheriv(ALGORITHM, key, iv)
+    decipher.setAuthTag(authTag)
+
+    const decrypted = Buffer.concat([
+      decipher.update(ciphertext),
+      decipher.final(),
+    ])
+
+    return decrypted.toString('utf8')
+  } catch (err) {
+    console.error(
+      '[CRYPTO] Decryption failed:',
+      err instanceof Error ? err.message : 'Unknown error',
+    )
+    return null
+  }
+}
+
+/**
+ * Check if a string looks like an encrypted token (vs plaintext legacy token).
+ * Encrypted tokens are base64 and start with version byte.
+ */
+export function isEncryptedToken(token: string): boolean {
+  try {
+    const data = Buffer.from(token, 'base64')
+    // Must be at least: version(1) + iv(12) + authTag(16) + 1 byte ciphertext
+    if (data.length < 30) return false
+    // Check version byte is valid
+    return data[0] === KEY_VERSION
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Decrypt a stored token, handling both encrypted and legacy plaintext tokens.
+ * Use this when reading tokens from the database.
+ */
+export function decryptStoredToken(storedToken: string | null): string | null {
+  if (!storedToken) return null
+  if (!isEncryptedToken(storedToken)) return storedToken
+  return decryptToken(storedToken)
+}
diff --git a/src/utils/docFeedback.client.ts b/src/utils/docFeedback.client.ts
index 1cbf5754a..1150371c1 100644
--- a/src/utils/docFeedback.client.ts
+++ b/src/utils/docFeedback.client.ts
@@ -3,6 +3,11 @@
  * These functions run in the browser to identify and track document blocks
  */
 
+import { sha256Hex } from './hash'
+
+// Re-export shared utilities
+export { calculatePoints } from './docFeedback.shared'
+
 export interface BlockIdentifier {
   selector: string
   contentHash: string
@@ -66,12 +71,7 @@ export async function generateContentHash(
   element: HTMLElement,
 ): Promise<string> {
   const content = element.textContent?.trim() || ''
-  const encoder = new TextEncoder()
-  const data = encoder.encode(content)
-  const hashBuffer = await crypto.subtle.digest('SHA-256', data)
-  const hashArray = Array.from(new Uint8Array(hashBuffer))
-  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
-  return hashHex
+  return sha256Hex(content)
 }
 
 /**
@@ -249,31 +249,3 @@ export function highlightBlock(
     }, 300)
   }, duration)
 }
-
-/**
- * Calculate points from character count and feedback type (client-side version)
- * Personal notes earn 0 points
- * Improvements: 0.1 points per character, min 1 point (10 chars), soft cap 100 points (1000 chars)
- */
-export function calculatePoints(
-  characterCount: number,
-  type: 'note' | 'improvement',
-): number {
-  // Personal notes don't earn points
-  if (type === 'note') {
-    return 0
-  }
-
-  // Minimum 10 characters = 1 point
-  if (characterCount < 10) {
-    return Math.max(0, characterCount * 0.1)
-  }
-
-  // Soft cap at 1000 characters = 100 points
-  if (characterCount >= 1000) {
-    return 100
-  }
-
-  // Linear scaling between 10 and 1000 characters
-  return characterCount * 0.1
-}
diff --git a/src/utils/docFeedback.functions.ts b/src/utils/docFeedback.functions.ts
index f6b758e97..714fce036 100644
--- a/src/utils/docFeedback.functions.ts
+++ b/src/utils/docFeedback.functions.ts
@@ -18,39 +18,85 @@ import {
   checkRateLimit,
 } from './docFeedback.server'
 import { notifyModerators, formatFeedbackSubmittedEmail } from './email.server'
-import { docFeedbackStatusSchema, docFeedbackTypeSchema } from './schemas'
+import {
+  docFeedbackStatusSchema,
+  docFeedbackTypeSchema,
+  isoDateSchema,
+  pageNumberSchema,
+  pageSizeSchema,
+} from './schemas'
+
+const feedbackPagePathSchema = v.pipe(
+  v.string(),
+  v.minLength(1),
+  v.maxLength(512),
+)
+const feedbackLibraryIdSchema = v.pipe(
+  v.string(),
+  v.minLength(1),
+  v.maxLength(80),
+)
+const feedbackLibraryVersionSchema = v.pipe(
+  v.string(),
+  v.minLength(1),
+  v.maxLength(40),
+)
+const feedbackBlockSelectorSchema = v.pipe(
+  v.string(),
+  v.minLength(1),
+  v.maxLength(500),
+)
+const feedbackContentHashSchema = v.pipe(
+  v.string(),
+  v.length(64),
+  v.regex(/^[a-f0-9]{64}$/i),
+)
+const feedbackBlockMarkdownSchema = v.pipe(v.string(), v.maxLength(20_000))
+const feedbackNoteContentSchema = v.pipe(
+  v.string(),
+  v.minLength(1, 'Note cannot be empty'),
+  v.maxLength(4_000, 'Note must be 4,000 characters or less'),
+)
+const feedbackImprovementContentSchema = v.pipe(
+  v.string(),
+  v.minLength(10, 'Improvement feedback must be at least 10 characters'),
+  v.maxLength(8_000, 'Improvement feedback must be 8,000 characters or less'),
+)
+const feedbackPaginationSchema = v.object({
+  page: v.optional(pageNumberSchema, 1),
+  pageSize: v.optional(pageSizeSchema, 20),
+})
+const moderationPaginationSchema = v.object({
+  page: v.optional(pageNumberSchema, 1),
+  pageSize: v.optional(pageSizeSchema, 50),
+})
+const feedbackModerationNoteSchema = v.pipe(v.string(), v.maxLength(1_000))
 
 /**
  * Create new doc feedback
  */
 export const createDocFeedback = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.variant('type', [
       v.object({
         type: v.literal('note'),
-        content: v.pipe(v.string(), v.minLength(1, 'Note cannot be empty')),
-        pagePath: v.string(),
-        libraryId: v.string(),
-        libraryVersion: v.string(),
-        blockSelector: v.string(),
-        blockContentHash: v.optional(v.string()),
-        blockMarkdown: v.optional(v.string()),
+        content: feedbackNoteContentSchema,
+        pagePath: feedbackPagePathSchema,
+        libraryId: feedbackLibraryIdSchema,
+        libraryVersion: feedbackLibraryVersionSchema,
+        blockSelector: feedbackBlockSelectorSchema,
+        blockContentHash: v.optional(feedbackContentHashSchema),
+        blockMarkdown: v.optional(feedbackBlockMarkdownSchema),
       }),
       v.object({
         type: v.literal('improvement'),
-        content: v.pipe(
-          v.string(),
-          v.minLength(
-            10,
-            'Improvement feedback must be at least 10 characters',
-          ),
-        ),
-        pagePath: v.string(),
-        libraryId: v.string(),
-        libraryVersion: v.string(),
-        blockSelector: v.string(),
-        blockContentHash: v.optional(v.string()),
-        blockMarkdown: v.optional(v.string()),
+        content: feedbackImprovementContentSchema,
+        pagePath: feedbackPagePathSchema,
+        libraryId: feedbackLibraryIdSchema,
+        libraryVersion: feedbackLibraryVersionSchema,
+        blockSelector: feedbackBlockSelectorSchema,
+        blockContentHash: v.optional(feedbackContentHashSchema),
+        blockMarkdown: v.optional(feedbackBlockMarkdownSchema),
       }),
     ]),
   )
@@ -120,10 +166,14 @@ export const createDocFeedback = createServerFn({ method: 'POST' })
  * Update existing doc feedback (user can edit their own)
  */
 export const updateDocFeedback = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       feedbackId: v.pipe(v.string(), v.uuid()),
-      content: v.pipe(v.string(), v.minLength(1, 'Content cannot be empty')),
+      content: v.pipe(
+        v.string(),
+        v.minLength(1, 'Content cannot be empty'),
+        v.maxLength(8_000, 'Content must be 8,000 characters or less'),
+      ),
     }),
   )
   .handler(async ({ data }) => {
@@ -173,7 +223,7 @@ export const updateDocFeedback = createServerFn({ method: 'POST' })
  * Delete doc feedback (user can delete their own)
  */
 export const deleteDocFeedback = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ feedbackId: v.pipe(v.string(), v.uuid()) }))
+  .validator(v.object({ feedbackId: v.pipe(v.string(), v.uuid()) }))
   .handler(async ({ data }) => {
     const user = await getAuthenticatedUser()
 
@@ -194,7 +244,7 @@ export const deleteDocFeedback = createServerFn({ method: 'POST' })
  * Update doc feedback collapsed state
  */
 export const updateDocFeedbackCollapsed = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       feedbackId: v.pipe(v.string(), v.uuid()),
       isCollapsed: v.boolean(),
@@ -226,16 +276,13 @@ export const updateDocFeedbackCollapsed = createServerFn({ method: 'POST' })
  * Get user's own feedback with status and points
  */
 export const getUserDocFeedback = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
-      pagination: v.object({
-        page: v.optional(v.number(), 1),
-        pageSize: v.optional(v.number(), 20),
-      }),
+      pagination: feedbackPaginationSchema,
       filters: v.optional(
         v.object({
           status: v.optional(v.array(docFeedbackStatusSchema)),
-          libraryId: v.optional(v.string()),
+          libraryId: v.optional(feedbackLibraryIdSchema),
           type: v.optional(v.array(docFeedbackTypeSchema)),
         }),
       ),
@@ -309,21 +356,18 @@ export const getUserDocFeedback = createServerFn({ method: 'POST' })
  * List all feedback for moderation (moderate-feedback capability required)
  */
 export const listDocFeedbackForModeration = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
-      pagination: v.object({
-        page: v.optional(v.number(), 1),
-        pageSize: v.optional(v.number(), 50),
-      }),
+      pagination: moderationPaginationSchema,
       filters: v.optional(
         v.object({
           status: v.optional(v.array(docFeedbackStatusSchema)),
           type: v.optional(v.array(docFeedbackTypeSchema)),
-          libraryId: v.optional(v.string()),
+          libraryId: v.optional(feedbackLibraryIdSchema),
           isDetached: v.optional(v.boolean()),
           userId: v.optional(v.pipe(v.string(), v.uuid())),
-          dateFrom: v.optional(v.string()), // ISO date string
-          dateTo: v.optional(v.string()),
+          dateFrom: v.optional(isoDateSchema),
+          dateTo: v.optional(isoDateSchema),
         }),
       ),
     }),
@@ -415,11 +459,11 @@ export const listDocFeedbackForModeration = createServerFn({ method: 'POST' })
  * Moderate feedback (approve or deny)
  */
 export const moderateDocFeedback = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       feedbackId: v.pipe(v.string(), v.uuid()),
       action: v.picklist(['approve', 'deny']),
-      moderationNote: v.optional(v.string()),
+      moderationNote: v.optional(feedbackModerationNoteSchema),
     }),
   )
   .handler(async ({ data }) => {
@@ -446,12 +490,9 @@ export const moderateDocFeedback = createServerFn({ method: 'POST' })
  * Get feedback leaderboard (public) - all-time
  */
 export const getDocFeedbackLeaderboard = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
-      pagination: v.object({
-        page: v.optional(v.number(), 1),
-        pageSize: v.optional(v.number(), 50),
-      }),
+      pagination: moderationPaginationSchema,
     }),
   )
   .handler(async ({ data }) => {
@@ -529,10 +570,10 @@ export const getDocFeedbackLeaderboard = createServerFn({ method: 'POST' })
  * Get feedback for a specific doc page (for displaying on the page)
  */
 export const getDocFeedbackForPage = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
-      pagePath: v.string(),
-      libraryVersion: v.string(),
+      pagePath: feedbackPagePathSchema,
+      libraryVersion: feedbackLibraryVersionSchema,
     }),
   )
   .handler(async ({ data }) => {
@@ -590,7 +631,7 @@ export const getDocFeedbackForPage = createServerFn({ method: 'POST' })
  * Get single feedback for admin detail view
  */
 export const adminGetDocFeedback = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ feedbackId: v.pipe(v.string(), v.uuid()) }))
+  .validator(v.object({ feedbackId: v.pipe(v.string(), v.uuid()) }))
   .handler(async ({ data }) => {
     await requireModerateFeedback()
 
@@ -620,7 +661,7 @@ export const adminGetDocFeedback = createServerFn({ method: 'POST' })
  * Mark feedback as detached (when block no longer exists)
  */
 export const markFeedbackDetached = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       feedbackIds: v.array(v.pipe(v.string(), v.uuid())),
     }),
diff --git a/src/utils/docFeedback.server.ts b/src/utils/docFeedback.server.ts
index 61ccdd0b4..f6c0622d0 100644
--- a/src/utils/docFeedback.server.ts
+++ b/src/utils/docFeedback.server.ts
@@ -3,6 +3,11 @@ import { docFeedback, type DocFeedbackStatus } from '~/db/schema'
 import { and, eq, gte, sql } from 'drizzle-orm'
 import { requireCapability } from './auth.server'
 import { getEffectiveCapabilities } from './capabilities.server'
+import { sha256Hex } from './hash'
+import { calculatePoints } from './docFeedback.shared'
+
+// Re-export shared utilities
+export { calculatePoints }
 
 /**
  * Require the user to have the moderate-feedback capability
@@ -13,34 +18,6 @@ export async function requireModerateFeedback() {
   })
 }
 
-/**
- * Calculate points from character count and feedback type
- * Personal notes earn 0 points
- * Improvements: 0.1 points per character, min 1 point (10 chars), soft cap 100 points (1000 chars)
- */
-export function calculatePoints(
-  characterCount: number,
-  type: 'note' | 'improvement',
-): number {
-  // Personal notes don't earn points
-  if (type === 'note') {
-    return 0
-  }
-
-  // Minimum 10 characters = 1 point
-  if (characterCount < 10) {
-    return Math.max(0, characterCount * 0.1)
-  }
-
-  // Soft cap at 1000 characters = 100 points
-  if (characterCount >= 1000) {
-    return 100
-  }
-
-  // Linear scaling between 10 and 1000 characters
-  return characterCount * 0.1
-}
-
 /**
  * Generate a hierarchical selector for a block element
  * Returns a selector like: "section[1] > h2[0] > p[2]"
@@ -54,15 +31,7 @@ export function generateBlockSelector(
 /**
  * Generate SHA-256 hash of block content for drift detection
  */
-export async function generateContentHash(content: string): Promise<string> {
-  // Use Web Crypto API (available in Node.js 15+)
-  const encoder = new TextEncoder()
-  const data = encoder.encode(content)
-  const hashBuffer = await crypto.subtle.digest('SHA-256', data)
-  const hashArray = Array.from(new Uint8Array(hashBuffer))
-
-  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
-}
+export const generateContentHash = sha256Hex
 
 /**
  * Check if the user can moderate feedback (has moderate-feedback or admin capability)
diff --git a/src/utils/docFeedback.shared.ts b/src/utils/docFeedback.shared.ts
new file mode 100644
index 000000000..3a3635723
--- /dev/null
+++ b/src/utils/docFeedback.shared.ts
@@ -0,0 +1,30 @@
+/**
+ * Shared utilities for doc feedback that work in both client and server.
+ * No dependencies on browser APIs or server-only modules.
+ */
+
+export type DocFeedbackType = 'note' | 'improvement'
+
+/**
+ * Calculate points from character count and feedback type.
+ * Personal notes earn 0 points.
+ * Improvements: 0.1 points per character, min 1 point (10 chars), soft cap 100 points (1000 chars).
+ */
+export function calculatePoints(
+  characterCount: number,
+  type: DocFeedbackType,
+): number {
+  if (type === 'note') {
+    return 0
+  }
+
+  if (characterCount < 10) {
+    return Math.max(0, characterCount * 0.1)
+  }
+
+  if (characterCount >= 1000) {
+    return 100
+  }
+
+  return characterCount * 0.1
+}
diff --git a/src/utils/docFeedback.ts b/src/utils/docFeedback.ts
new file mode 100644
index 000000000..32d0f0eb4
--- /dev/null
+++ b/src/utils/docFeedback.ts
@@ -0,0 +1,173 @@
+import { sha256Hex } from './hash'
+
+export { calculatePoints } from './docFeedback.shared'
+
+export interface BlockIdentifier {
+  selector: string
+  contentHash: string
+  elementPath: Array<{ tag: string; index: number }>
+}
+
+export function generateBlockSelector(element: HTMLElement) {
+  const path: Array<{ tag: string; index: number }> = []
+  let current: HTMLElement | null = element
+  let depth = 0
+
+  while (current && depth < 5) {
+    const tag = current.tagName.toLowerCase()
+    const parent: HTMLElement | null = current.parentElement
+
+    if (current.hasAttribute('data-feedback-wrapper')) {
+      current = parent
+      continue
+    }
+
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (child: Element) =>
+          child.tagName.toLowerCase() === tag &&
+          !child.hasAttribute('data-feedback-wrapper'),
+      )
+      const index = siblings.indexOf(current)
+
+      path.unshift({ tag, index })
+    } else {
+      path.unshift({ tag, index: 0 })
+    }
+
+    if (
+      tag === 'article' ||
+      tag === 'main' ||
+      current.hasAttribute('data-doc-content')
+    ) {
+      break
+    }
+
+    current = parent
+    depth++
+  }
+
+  return path.map((el) => `${el.tag}[${el.index}]`).join(' > ')
+}
+
+export async function generateContentHash(element: HTMLElement) {
+  const content = element.textContent?.trim() || ''
+  return sha256Hex(content)
+}
+
+export async function getBlockIdentifier(
+  element: HTMLElement,
+): Promise<BlockIdentifier> {
+  const selector = generateBlockSelector(element)
+  const contentHash = await generateContentHash(element)
+  const elementPath = selector.split(' > ').map((part) => {
+    const match = part.match(/^(\w+)\[(\d+)\]$/)
+    if (!match) return { tag: 'div', index: 0 }
+    return { tag: match[1], index: parseInt(match[2], 10) }
+  })
+
+  return {
+    selector,
+    contentHash,
+    elementPath,
+  }
+}
+
+export function findReferenceableBlocks(container?: HTMLElement) {
+  const root = container || document
+  const selectors = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'p',
+    'ul',
+    'ol',
+    'pre',
+    'blockquote',
+    'table',
+    'div.prose > div',
+    'section',
+  ]
+
+  const elements: Array<HTMLElement> = []
+
+  selectors.forEach((selector) => {
+    root.querySelectorAll(selector).forEach((el) => {
+      if (el instanceof HTMLElement) {
+        const isNested = elements.some((existing) => existing.contains(el))
+        if (!isNested) {
+          const isInsidePortal =
+            el.closest('[data-editor-portal], [data-note-portal]') !== null
+          if (!isInsidePortal) {
+            const text = el.textContent?.trim() || ''
+            if (text.length > 10) {
+              elements.push(el)
+            }
+          }
+        }
+      }
+    })
+  })
+
+  return elements
+}
+
+export async function findBlockBySelector(
+  selector: string,
+  expectedHash?: string,
+) {
+  try {
+    const parts = selector.split(' > ')
+    let current: Element | null = document.documentElement
+
+    for (const part of parts) {
+      const match = part.match(/^(\w+)\[(\d+)\]$/)
+      if (!match) return null
+
+      const [, tag, indexStr] = match
+      const index = parseInt(indexStr, 10)
+
+      if (!current) return null
+
+      const children: Array<Element> = Array.from(current.children).filter(
+        (child: Element) => child.tagName.toLowerCase() === tag,
+      )
+
+      if (index >= children.length) {
+        return null
+      }
+
+      current = children[index]
+    }
+
+    if (!(current instanceof HTMLElement)) return null
+
+    if (expectedHash) {
+      const actualHash = await generateContentHash(current)
+      const isDetached = actualHash !== expectedHash
+      return { element: current, isDetached }
+    }
+
+    return { element: current, isDetached: false }
+  } catch (error) {
+    console.error('Error finding block by selector:', error)
+    return null
+  }
+}
+
+export function getElementScrollPosition(element: HTMLElement) {
+  const rect = element.getBoundingClientRect()
+  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+  return rect.top + scrollTop - 100
+}
+
+export function scrollToElement(
+  element: HTMLElement,
+  behavior: ScrollBehavior = 'smooth',
+) {
+  const top = getElementScrollPosition(element)
+  window.scrollTo({ top, behavior })
+}
diff --git a/src/utils/docs-admin.functions.ts b/src/utils/docs-admin.functions.ts
new file mode 100644
index 000000000..974e1b975
--- /dev/null
+++ b/src/utils/docs-admin.functions.ts
@@ -0,0 +1,18 @@
+import { createServerFn } from '@tanstack/react-start'
+import * as v from 'valibot'
+import {
+  invalidateDocsCacheAdmin,
+  listDocsCacheReposAdmin,
+} from './docs-admin.server'
+
+export const listDocsCacheRepos = createServerFn({ method: 'GET' }).handler(
+  async () => listDocsCacheReposAdmin(),
+)
+
+export const invalidateDocsCache = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      repo: v.optional(v.string()),
+    }),
+  )
+  .handler(async ({ data }) => invalidateDocsCacheAdmin({ data }))
diff --git a/src/utils/docs-admin.server.ts b/src/utils/docs-admin.server.ts
new file mode 100644
index 000000000..a549b55f5
--- /dev/null
+++ b/src/utils/docs-admin.server.ts
@@ -0,0 +1,105 @@
+import { libraries } from '~/libraries'
+import { docsWebhookSources } from '~/utils/docs-webhook-sources'
+import { requireCapability } from './auth.server'
+import {
+  listDocsCacheRepoStats,
+  markDocsArtifactsStale,
+  markGitHubContentStale,
+} from './github-content-cache.server'
+import { purgeHostingCacheTags } from './hosting-cache.server'
+
+export async function listDocsCacheReposAdmin() {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  const cacheRows = await listDocsCacheRepoStats()
+  const watchedRefsByRepo = new Map(
+    docsWebhookSources.map((source) => [source.repo, source.refs]),
+  )
+  const cacheByRepo = new Map(cacheRows.map((row) => [row.repo, row]))
+  const repoNames = new Set<string>()
+
+  for (const repo of watchedRefsByRepo.keys()) {
+    repoNames.add(repo)
+  }
+
+  for (const repo of cacheByRepo.keys()) {
+    repoNames.add(repo)
+  }
+
+  const repos = Array.from(repoNames)
+    .map((repo) => {
+      const cache = cacheByRepo.get(repo)
+      const refs = watchedRefsByRepo.get(repo) ?? []
+      const contentEntries = cache?.contentEntries ?? 0
+      const artifactEntries = cache?.artifactEntries ?? 0
+      const staleContentEntries = cache?.staleContentEntries ?? 0
+      const staleArtifactEntries = cache?.staleArtifactEntries ?? 0
+
+      return {
+        repo,
+        refs,
+        isWatched: watchedRefsByRepo.has(repo),
+        contentEntries,
+        artifactEntries,
+        staleContentEntries,
+        staleArtifactEntries,
+        totalEntries: contentEntries + artifactEntries,
+        staleEntries: staleContentEntries + staleArtifactEntries,
+        cachedRefCount: cache?.cachedRefCount ?? 0,
+        lastUpdatedAt: cache?.lastUpdatedAt ?? null,
+      }
+    })
+    .sort(
+      (a, b) => b.totalEntries - a.totalEntries || a.repo.localeCompare(b.repo),
+    )
+
+  return {
+    repos,
+    summary: {
+      watchedRepoCount: docsWebhookSources.length,
+      cachedRepoCount: repos.filter((repo) => repo.totalEntries > 0).length,
+      contentEntries: repos.reduce(
+        (total, repo) => total + repo.contentEntries,
+        0,
+      ),
+      artifactEntries: repos.reduce(
+        (total, repo) => total + repo.artifactEntries,
+        0,
+      ),
+      staleEntries: repos.reduce((total, repo) => total + repo.staleEntries, 0),
+      totalEntries: repos.reduce((total, repo) => total + repo.totalEntries, 0),
+    },
+  }
+}
+
+export async function invalidateDocsCacheAdmin(opts: {
+  data: {
+    repo?: string
+  }
+}) {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  const [staleContentCount, staleArtifactCount] = await Promise.all([
+    markGitHubContentStale({ repo: opts.data.repo }),
+    markDocsArtifactsStale({ repo: opts.data.repo }),
+  ])
+
+  const tags = opts.data.repo
+    ? [
+        `docs-config:${opts.data.repo}`,
+        ...libraries
+          .filter((library) => library.repo === opts.data.repo)
+          .map((library) => `docs:${library.id}`),
+      ]
+    : ['docs:all', 'docs-config:all']
+
+  const purge = await purgeHostingCacheTags(tags)
+
+  return {
+    repo: opts.data.repo ?? null,
+    staleContentCount,
+    staleArtifactCount,
+    totalInvalidated: staleContentCount + staleArtifactCount,
+    purge,
+  }
+}
diff --git a/src/utils/docs-cache-headers.ts b/src/utils/docs-cache-headers.ts
new file mode 100644
index 000000000..e095f4147
--- /dev/null
+++ b/src/utils/docs-cache-headers.ts
@@ -0,0 +1,37 @@
+import { findLibrary, getBranch } from '~/libraries'
+import { docsContentNegotiationVaryHeader } from './http'
+
+const latestDocsCdnCacheControl =
+  'public, max-age=60, stale-while-revalidate=60'
+const versionedDocsCdnCacheControl =
+  'public, max-age=300, stale-while-revalidate=300'
+
+export function getDocsCacheHeaders({
+  libraryId,
+  version,
+}: {
+  libraryId: string
+  version: string
+}) {
+  const library = findLibrary(libraryId)
+  const branch = library ? getBranch(library, version) : null
+  const isLatestVersion =
+    library &&
+    (version === 'latest' ||
+      version === library.latestVersion ||
+      version === library.latestBranch)
+  const cacheTags = library
+    ? ['docs:all', `docs:${library.id}`, `docs:${library.id}:branch:${branch}`]
+    : ['docs:all']
+
+  return {
+    'Cache-Control': isLatestVersion
+      ? 'public, max-age=60, must-revalidate'
+      : 'public, max-age=300, must-revalidate',
+    'Cloudflare-CDN-Cache-Control': isLatestVersion
+      ? latestDocsCdnCacheControl
+      : versionedDocsCdnCacheControl,
+    'Cache-Tag': cacheTags.join(','),
+    Vary: docsContentNegotiationVaryHeader,
+  }
+}
diff --git a/src/utils/docs-redirects.ts b/src/utils/docs-redirects.ts
new file mode 100644
index 000000000..7f6fa871c
--- /dev/null
+++ b/src/utils/docs-redirects.ts
@@ -0,0 +1,226 @@
+import { isValidRepoPath } from './repo-path'
+import { removeLeadingSlash } from './utils'
+
+export type DocsRedirectManifest = {
+  paths: Array<string>
+  redirects: Record<string, string>
+}
+
+export type DocsPathResolution =
+  | {
+      type: 'render'
+      docsPath: string
+    }
+  | {
+      type: 'redirect'
+      docsPath: string
+    }
+  | {
+      type: 'not-found'
+    }
+
+type ResolveDocsPathRedirectOptions = {
+  defaultDocs: string
+  docsPath: string
+  frameworks: Array<string>
+  manifest: DocsRedirectManifest
+}
+
+export function resolveDocsPathRedirect({
+  defaultDocs,
+  docsPath,
+  frameworks,
+  manifest,
+}: ResolveDocsPathRedirectOptions): DocsPathResolution {
+  const requestedPath = normalizeDocsPath(docsPath)
+
+  if (requestedPath === null) {
+    return { type: 'not-found' }
+  }
+
+  const knownPaths = new Set(manifest.paths.map(normalizeManifestPath))
+
+  if (knownPaths.has(requestedPath)) {
+    return { type: 'render', docsPath: requestedPath }
+  }
+
+  const redirectFromTarget = getRedirectTarget({
+    knownPaths,
+    manifest,
+    requestedPath,
+  })
+
+  if (redirectFromTarget !== null) {
+    return { type: 'redirect', docsPath: redirectFromTarget }
+  }
+
+  const frameworkRedirectTarget = getFrameworkRedirectTarget({
+    defaultDocs,
+    frameworks,
+    knownPaths,
+    requestedPath,
+  })
+
+  if (frameworkRedirectTarget !== null) {
+    return { type: 'redirect', docsPath: frameworkRedirectTarget }
+  }
+
+  const sectionIndexRedirectTarget = getSectionIndexRedirectTarget({
+    knownPaths,
+    requestedPath,
+  })
+
+  if (sectionIndexRedirectTarget !== null) {
+    return { type: 'redirect', docsPath: sectionIndexRedirectTarget }
+  }
+
+  return { type: 'not-found' }
+}
+
+export function appendPathToDocsHref(opts: {
+  docsPath: string
+  libraryId: string
+  version: string
+}) {
+  const pathSuffix = opts.docsPath ? `/${opts.docsPath}` : ''
+  return `/${opts.libraryId}/${opts.version}/docs${pathSuffix}`
+}
+
+export function buildDocsRedirectHref(opts: {
+  baseHref: string
+  docsPath: string
+  libraryId: string
+  version: string
+}) {
+  const targetPathname = appendPathToDocsHref(opts)
+  const url = new URL(opts.baseHref, 'https://tanstack.com')
+  url.pathname = targetPathname
+  return `${url.pathname}${url.search}${url.hash}`
+}
+
+export function buildDocsMarkdownRedirectHref(opts: {
+  docsPath: string
+  libraryId: string
+  requestUrl: string
+  version: string
+}) {
+  const targetPathname = `${appendPathToDocsHref(opts)}.md`
+  const url = new URL(opts.requestUrl)
+  url.pathname = targetPathname
+  return url.href
+}
+
+function getRedirectTarget(opts: {
+  knownPaths: Set<string>
+  manifest: DocsRedirectManifest
+  requestedPath: string
+}) {
+  const targetPath = normalizeDocsPath(
+    opts.manifest.redirects[opts.requestedPath],
+  )
+
+  if (
+    targetPath === null ||
+    targetPath === opts.requestedPath ||
+    !opts.knownPaths.has(targetPath)
+  ) {
+    return null
+  }
+
+  return targetPath
+}
+
+function getFrameworkRedirectTarget(opts: {
+  defaultDocs: string
+  frameworks: Array<string>
+  knownPaths: Set<string>
+  requestedPath: string
+}) {
+  const parts = opts.requestedPath.split('/')
+  const [firstSegment, secondSegment, ...remainingSegments] = parts
+  const supportedFrameworks = new Set(opts.frameworks)
+
+  if (firstSegment === 'framework' && secondSegment) {
+    if (!supportedFrameworks.has(secondSegment)) {
+      return null
+    }
+
+    const restPath = remainingSegments.join('/')
+    return getExistingCandidate(opts.knownPaths, [
+      restPath,
+      restPath === 'overview' ? opts.defaultDocs : null,
+    ])
+  }
+
+  if (!firstSegment || !supportedFrameworks.has(firstSegment)) {
+    return null
+  }
+
+  const restPath = [secondSegment, ...remainingSegments]
+    .filter(Boolean)
+    .join('/')
+  const frameworkPath = restPath
+    ? `framework/${firstSegment}/${restPath}`
+    : null
+
+  return getExistingCandidate(opts.knownPaths, [
+    frameworkPath,
+    restPath,
+    restPath === 'overview' ? opts.defaultDocs : null,
+  ])
+}
+
+function getExistingCandidate(
+  knownPaths: Set<string>,
+  candidates: Array<string | null>,
+) {
+  for (const candidate of candidates) {
+    const normalizedCandidate = normalizeDocsPath(candidate)
+
+    if (normalizedCandidate && knownPaths.has(normalizedCandidate)) {
+      return normalizedCandidate
+    }
+  }
+
+  return null
+}
+
+function getSectionIndexRedirectTarget(opts: {
+  knownPaths: Set<string>
+  requestedPath: string
+}) {
+  const [firstSegment] = opts.requestedPath.split('/')
+  const indexableSections = new Set(['api', 'reference'])
+
+  if (
+    !firstSegment ||
+    !indexableSections.has(firstSegment) ||
+    firstSegment === opts.requestedPath ||
+    !opts.knownPaths.has(firstSegment)
+  ) {
+    return null
+  }
+
+  return firstSegment
+}
+
+function normalizeManifestPath(path: string) {
+  return removeLeadingSlash(path.trim())
+    .replace(/\.md$/, '')
+    .replace(/\/index$/, '')
+    .replace(/\/+$/g, '')
+}
+
+function normalizeDocsPath(path: string | null | undefined) {
+  if (typeof path !== 'string') {
+    return null
+  }
+
+  const normalizedPath = normalizeManifestPath(path)
+
+  if (!normalizedPath || !isValidRepoPath(normalizedPath)) {
+    return null
+  }
+
+  return normalizedPath
+}
diff --git a/src/utils/docs-webhook-sources.ts b/src/utils/docs-webhook-sources.ts
new file mode 100644
index 000000000..3b97c3c5c
--- /dev/null
+++ b/src/utils/docs-webhook-sources.ts
@@ -0,0 +1,31 @@
+import { libraries } from '~/libraries'
+
+export type DocsWebhookSource = {
+  refs: Array<string>
+  repo: string
+}
+
+const docsWebhookSourceMap = libraries.reduce((map, library) => {
+  if (!library.latestBranch) {
+    return map
+  }
+
+  const refs = map.get(library.repo) ?? new Set<string>()
+  refs.add(library.latestBranch)
+  map.set(library.repo, refs)
+
+  return map
+}, new Map<string, Set<string>>())
+
+export const docsWebhookSources = Array.from(docsWebhookSourceMap.entries())
+  .map(([repo, refs]) => ({
+    repo,
+    refs: Array.from(refs).sort(),
+  }))
+  .sort((a, b) => a.repo.localeCompare(b.repo))
+
+export function isWatchedDocsWebhookSource(repo: string, gitRef: string) {
+  return docsWebhookSources.some(
+    (source) => source.repo === repo && source.refs.includes(gitRef),
+  )
+}
diff --git a/src/utils/docs.functions.ts b/src/utils/docs.functions.ts
new file mode 100644
index 000000000..fb17fb3e1
--- /dev/null
+++ b/src/utils/docs.functions.ts
@@ -0,0 +1,539 @@
+import { notFound } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { setResponseHeader } from '@tanstack/react-start/server'
+import removeMarkdown from 'remove-markdown'
+import * as v from 'valibot'
+import { extractFrameworksFromMarkdown } from './markdown/filterFrameworkContent'
+import { buildRedirectManifest, type RedirectManifestEntry } from './redirects'
+import { isValidRepoPath, MAX_REPO_PATH_LENGTH } from './repo-path'
+import { removeLeadingSlash } from './utils'
+import type { DocsRedirectManifest } from './docs-redirects'
+import type { GitHubFileNode } from './documents.server'
+
+export type DocsTreeNode = {
+  path: string
+  children?: Array<DocsTreeNode>
+}
+
+type DocsManifest = DocsRedirectManifest
+
+type RepoFileRequest = {
+  repo: string
+  branch: string
+  filePath: string
+}
+
+type RepoDirectoryRequest = {
+  repo: string
+  branch: string
+  startingPath: string
+}
+
+// Inputs feed into a database cache key + a GitHub API URL. They must be
+// shaped like real repo/ref/path values — anything else is a broken backlink,
+// a scraper, or a probe and shouldn't get the privilege of becoming a row.
+// See assertValidCacheKey in github-content-cache.server.ts for the matching
+// defense at the cache boundary.
+const repoSchema = v.pipe(
+  v.string(),
+  v.maxLength(100),
+  v.regex(/^[a-zA-Z0-9._-]+\/[a-zA-Z0-9._-]+$/),
+)
+
+const branchSchema = v.pipe(
+  v.string(),
+  v.maxLength(100),
+  v.regex(/^[a-zA-Z0-9._/-]+$/),
+  v.check(
+    (s) =>
+      !s.includes('..') &&
+      !s.startsWith('/') &&
+      !s.endsWith('/') &&
+      !s.includes('//'),
+    'invalid branch',
+  ),
+)
+
+const repoPathSchema = v.pipe(
+  v.string(),
+  v.maxLength(MAX_REPO_PATH_LENGTH),
+  v.check(isValidRepoPath, 'invalid path'),
+)
+
+const repoFileInput = v.object({
+  repo: repoSchema,
+  branch: branchSchema,
+  filePath: repoPathSchema,
+})
+
+const repoDirectoryInput = v.object({
+  repo: repoSchema,
+  branch: branchSchema,
+  startingPath: repoPathSchema,
+})
+
+const docsManifestInput = v.object({
+  repo: repoSchema,
+  branch: branchSchema,
+  docsRoot: repoPathSchema,
+})
+
+const docsRedirectInput = v.object({
+  repo: repoSchema,
+  branch: branchSchema,
+  docsRoot: repoPathSchema,
+  docsPaths: v.array(v.pipe(v.string(), v.maxLength(512))),
+})
+
+// Matches RAW_FETCH_CONCURRENCY in github-example.server.ts.
+const DOCS_MANIFEST_FETCH_CONCURRENCY = 6
+
+export async function mapWithConcurrency<T, TResult>(
+  values: Array<T>,
+  concurrency: number,
+  fn: (value: T) => Promise<TResult>,
+) {
+  const results = new Array<TResult>(values.length)
+  let index = 0
+
+  const workers = Array.from(
+    { length: Math.min(concurrency, values.length) },
+    async () => {
+      while (index < values.length) {
+        const currentIndex = index
+        index += 1
+        results[currentIndex] = await fn(values[currentIndex])
+      }
+    },
+  )
+
+  await Promise.all(workers)
+
+  return results
+}
+
+const temporarilyUnavailableMarkdown = `# Content temporarily unavailable
+
+We are having trouble fetching this document from GitHub right now. Please try again in a minute.`
+
+async function loadDocumentsServerModule() {
+  return import('./documents.server')
+}
+
+async function loadGitHubContentCacheServerModule() {
+  return import('./github-content-cache.server')
+}
+
+function buildUnavailableFile(filePath: string) {
+  if (filePath.toLowerCase().endsWith('.md')) {
+    return temporarilyUnavailableMarkdown
+  }
+
+  return 'Content temporarily unavailable. Please try again in a minute.'
+}
+
+async function readRepoFileOrFallback(
+  repo: string,
+  branch: string,
+  filePath: string,
+) {
+  const { fetchRepoFile, isRecoverableGitHubContentError } =
+    await loadDocumentsServerModule()
+
+  try {
+    return await fetchRepoFile(repo, branch, filePath)
+  } catch (error) {
+    if (!isRecoverableGitHubContentError(error)) {
+      throw error
+    }
+
+    return buildUnavailableFile(filePath)
+  }
+}
+
+function setDocsCacheHeaders(cdnCacheControl: string) {
+  setResponseHeader('Cache-Control', 'public, max-age=0, must-revalidate')
+  setResponseHeader('Cloudflare-CDN-Cache-Control', cdnCacheControl)
+}
+
+function isDocsManifest(value: unknown): value is DocsManifest {
+  if (typeof value !== 'object' || value === null) {
+    return false
+  }
+
+  const candidate = value as {
+    paths?: unknown
+    redirects?: unknown
+  }
+
+  return (
+    Array.isArray(candidate.paths) &&
+    candidate.paths.every((path) => typeof path === 'string') &&
+    typeof candidate.redirects === 'object' &&
+    candidate.redirects !== null &&
+    Object.entries(candidate.redirects).every(
+      ([key, target]) => typeof key === 'string' && typeof target === 'string',
+    )
+  )
+}
+
+// Extracted so tests can inject a fake fetchFile without hitting real
+// GitHub network/cache.
+export async function collectRedirectEntriesForFile(
+  node: DocsTreeNode,
+  opts: {
+    docsRoot: string
+    fetchFile: (filePath: string) => Promise<string | null>
+    onCanonicalPath: (canonicalPath: string) => void
+  },
+): Promise<Array<RedirectManifestEntry>> {
+  const { extractFrontMatter, isRecoverableGitHubContentError } =
+    await loadDocumentsServerModule()
+  const canonicalPath = getCanonicalDocsPath(node.path, opts.docsRoot)
+
+  if (canonicalPath === null) {
+    return []
+  }
+
+  opts.onCanonicalPath(canonicalPath)
+
+  let file: string | null
+  try {
+    file = await opts.fetchFile(node.path)
+  } catch (error) {
+    if (!isRecoverableGitHubContentError(error)) {
+      throw error
+    }
+
+    return []
+  }
+
+  if (!file) {
+    return []
+  }
+
+  const frontMatter = extractFrontMatter(file)
+  const entries: Array<RedirectManifestEntry> = []
+
+  for (const redirectFrom of frontMatter.data.redirectFrom ?? []) {
+    const normalizedRedirect = normalizeDocsRedirectPath(
+      redirectFrom,
+      opts.docsRoot,
+    )
+
+    if (!normalizedRedirect || normalizedRedirect === canonicalPath) {
+      continue
+    }
+
+    entries.push({
+      from: normalizedRedirect,
+      to: canonicalPath,
+      source: node.path,
+    })
+  }
+
+  return entries
+}
+
+async function buildDocsManifest({
+  repo,
+  branch,
+  docsRoot,
+}: {
+  repo: string
+  branch: string
+  docsRoot: string
+}): Promise<DocsManifest> {
+  const { fetchApiContents, fetchRepoFile } = await loadDocumentsServerModule()
+  const nodes = await fetchApiContents(repo, branch, docsRoot)
+
+  if (!nodes) {
+    return { paths: [], redirects: {} }
+  }
+
+  const markdownFiles = flattenDocsNodes(nodes).filter((node) =>
+    node.path.endsWith('.md'),
+  )
+  const paths = new Set<string>()
+
+  // A recoverable error on one file must not fail the whole manifest build
+  // (see collectRedirectEntriesForFile).
+  const redirectsByFile = await mapWithConcurrency(
+    markdownFiles,
+    DOCS_MANIFEST_FETCH_CONCURRENCY,
+    (node) =>
+      collectRedirectEntriesForFile(node, {
+        docsRoot,
+        fetchFile: (filePath) => fetchRepoFile(repo, branch, filePath),
+        onCanonicalPath: (canonicalPath) => paths.add(canonicalPath),
+      }),
+  )
+
+  return {
+    paths: Array.from(paths),
+    redirects: buildRedirectManifest(redirectsByFile.flat(), {
+      label: `docs redirects for ${repo}@${branch}:${docsRoot}`,
+    }),
+  }
+}
+
+async function buildDocsPathManifest({
+  repo,
+  branch,
+  docsRoot,
+}: {
+  repo: string
+  branch: string
+  docsRoot: string
+}): Promise<DocsManifest> {
+  const { fetchApiContents } = await loadDocumentsServerModule()
+  const nodes = await fetchApiContents(repo, branch, docsRoot)
+
+  if (!nodes) {
+    return { paths: [], redirects: {} }
+  }
+
+  const paths = flattenDocsNodes(nodes)
+    .filter((node) => node.path.endsWith('.md'))
+    .flatMap((node) => {
+      const canonicalPath = getCanonicalDocsPath(node.path, docsRoot)
+      return canonicalPath === null ? [] : [canonicalPath]
+    })
+
+  return {
+    paths,
+    redirects: {},
+  }
+}
+
+export const fetchDocsManifest = createServerFn({ method: 'GET' })
+  .validator(docsManifestInput)
+  .handler(async ({ data }) => {
+    const { repo, branch, docsRoot } = data
+    const [{ shouldUseLocalDocsFiles }, { getCachedDocsArtifact }] =
+      await Promise.all([
+        loadDocumentsServerModule(),
+        loadGitHubContentCacheServerModule(),
+      ])
+
+    if (shouldUseLocalDocsFiles()) {
+      return buildDocsManifest({ repo, branch, docsRoot })
+    }
+
+    return getCachedDocsArtifact({
+      repo,
+      gitRef: branch,
+      docsRoot,
+      artifactType: 'docs-manifest',
+      artifactKey: 'default',
+      isValue: isDocsManifest,
+      build: () => buildDocsManifest({ repo, branch, docsRoot }),
+    })
+  })
+
+export const fetchDocsPathManifest = createServerFn({ method: 'GET' })
+  .validator(docsManifestInput)
+  .handler(async ({ data }) => {
+    const { repo, branch, docsRoot } = data
+    const [{ shouldUseLocalDocsFiles }, { getCachedDocsArtifact }] =
+      await Promise.all([
+        loadDocumentsServerModule(),
+        loadGitHubContentCacheServerModule(),
+      ])
+
+    if (shouldUseLocalDocsFiles()) {
+      return buildDocsPathManifest({ repo, branch, docsRoot })
+    }
+
+    return getCachedDocsArtifact({
+      repo,
+      gitRef: branch,
+      docsRoot,
+      artifactType: 'docs-path-manifest',
+      artifactKey: 'default',
+      isValue: isDocsManifest,
+      build: () => buildDocsPathManifest({ repo, branch, docsRoot }),
+    })
+  })
+
+export const fetchDocsRedirect = createServerFn({ method: 'GET' })
+  .validator(docsRedirectInput)
+  .handler(async ({ data }) => {
+    const { isRecoverableGitHubContentError } =
+      await loadDocumentsServerModule()
+    let manifest: DocsManifest
+
+    try {
+      manifest = await fetchDocsManifest({
+        data: {
+          repo: data.repo,
+          branch: data.branch,
+          docsRoot: data.docsRoot,
+        },
+      })
+    } catch (error) {
+      if (isRecoverableGitHubContentError(error)) {
+        return null
+      }
+
+      throw error
+    }
+
+    for (const docsPath of data.docsPaths) {
+      const normalizedDocsPath = normalizeDocsRedirectPath(
+        docsPath,
+        data.docsRoot,
+      )
+
+      if (!normalizedDocsPath) {
+        continue
+      }
+
+      const redirectedPath = manifest.redirects[normalizedDocsPath]
+
+      if (redirectedPath !== undefined) {
+        return redirectedPath
+      }
+    }
+
+    return null
+  })
+
+export const fetchDocs = createServerFn({ method: 'GET' })
+  .validator(repoFileInput)
+  .handler(async ({ data }: { data: RepoFileRequest }) => {
+    const { repo, branch, filePath } = data
+    const file = await readRepoFileOrFallback(repo, branch, filePath)
+
+    if (!file) {
+      throw notFound()
+    }
+
+    const { extractFrontMatter } = await loadDocumentsServerModule()
+    const frontMatter = extractFrontMatter(file)
+    const description =
+      frontMatter.userDescription ?? removeMarkdown(frontMatter.excerpt ?? '')
+    const keywords = extractFrontMatterKeywords(frontMatter.data.keywords)
+
+    setDocsCacheHeaders('public, max-age=60, stale-while-revalidate=60')
+
+    return {
+      content: frontMatter.content,
+      title: frontMatter.data?.title ?? 'Content temporarily unavailable',
+      description,
+      keywords,
+      frameworks: extractFrameworksFromMarkdown(frontMatter.content),
+      filePath,
+      frontmatter: frontMatter.data,
+    }
+  })
+
+function extractFrontMatterKeywords(value: unknown): string | undefined {
+  if (Array.isArray(value)) {
+    const normalized = value
+      .filter((item): item is string => typeof item === 'string')
+      .map((item) => item.trim())
+      .filter((item) => item.length > 0)
+
+    return normalized.length > 0 ? normalized.join(', ') : undefined
+  }
+
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    return trimmed.length > 0 ? trimmed : undefined
+  }
+
+  return undefined
+}
+
+export const fetchFile = createServerFn({ method: 'GET' })
+  .validator(repoFileInput)
+  .handler(async ({ data }: { data: RepoFileRequest }) => {
+    const { repo, branch, filePath } = data
+    const file = await readRepoFileOrFallback(repo, branch, filePath)
+
+    if (!file) {
+      throw notFound()
+    }
+
+    setDocsCacheHeaders('public, max-age=300, stale-while-revalidate=300')
+
+    return file
+  })
+
+export const fetchRepoDirectoryContents = createServerFn({
+  method: 'GET',
+})
+  .validator(repoDirectoryInput)
+  .handler(async ({ data }: { data: RepoDirectoryRequest }) => {
+    const { repo, branch, startingPath } = data
+    const { fetchApiContents, isRecoverableGitHubContentError } =
+      await loadDocumentsServerModule()
+    let githubContents: Array<GitHubFileNode> | null
+
+    try {
+      githubContents = await fetchApiContents(repo, branch, startingPath)
+    } catch (error) {
+      if (!isRecoverableGitHubContentError(error)) {
+        throw error
+      }
+
+      return null
+    }
+
+    setDocsCacheHeaders('public, max-age=300, stale-while-revalidate=300')
+
+    return githubContents
+  })
+
+function flattenDocsNodes(nodes: Array<DocsTreeNode>): Array<DocsTreeNode> {
+  return nodes.flatMap((node) => [
+    node,
+    ...flattenDocsNodes(node.children ?? []),
+  ])
+}
+
+function getCanonicalDocsPath(filePath: string, docsRoot: string) {
+  const normalizedFilePath = removeLeadingSlash(filePath)
+  const normalizedDocsRoot = removeLeadingSlash(docsRoot)
+  const docsRootPrefix = `${normalizedDocsRoot}/`
+
+  if (!normalizedFilePath.startsWith(docsRootPrefix)) {
+    return null
+  }
+
+  return normalizedFilePath
+    .slice(docsRootPrefix.length)
+    .replace(/\.md$/, '')
+    .replace(/\/index$/, '')
+}
+
+function normalizeDocsRedirectPath(path: string, docsRoot?: string) {
+  const normalizedPath = removeLeadingSlash(path.trim()).replace(/\/+$/g, '')
+
+  if (!normalizedPath || !isValidRepoPath(normalizedPath)) {
+    return null
+  }
+
+  const docsRootPrefix = getDocsRootPrefix(docsRoot)
+
+  if (docsRootPrefix && normalizedPath.startsWith(`${docsRootPrefix}/`)) {
+    return normalizedPath.slice(docsRootPrefix.length + 1) || ''
+  }
+
+  return normalizedPath
+}
+
+function getDocsRootPrefix(docsRoot?: string) {
+  if (!docsRoot) {
+    return null
+  }
+
+  const normalizedDocsRoot = removeLeadingSlash(docsRoot).replace(/\/+$/g, '')
+
+  if (!normalizedDocsRoot.startsWith('docs/')) {
+    return null
+  }
+
+  return normalizedDocsRoot.slice('docs/'.length) || null
+}
diff --git a/src/utils/docs.ts b/src/utils/docs.ts
index 7a7b177a4..45f82cbd7 100644
--- a/src/utils/docs.ts
+++ b/src/utils/docs.ts
@@ -1,24 +1,32 @@
+import { isNotFound, notFound } from '@tanstack/react-router'
 import {
-  extractFrontMatter,
-  fetchApiContents,
-  fetchRepoFile,
-} from '~/utils/documents.server'
-import removeMarkdown from 'remove-markdown'
-import { notFound } from '@tanstack/react-router'
-import { createServerFn } from '@tanstack/react-start'
-import * as v from 'valibot'
-import { setResponseHeader } from '@tanstack/react-start/server'
+  fetchDocs,
+  fetchDocsManifest,
+  fetchDocsPathManifest,
+  fetchDocsRedirect,
+  fetchFile,
+  fetchRepoDirectoryContents,
+} from './docs.functions'
+import {
+  buildDocsMarkdownRedirectHref,
+  buildDocsRedirectHref,
+  resolveDocsPathRedirect,
+  type DocsPathResolution,
+} from './docs-redirects'
+import { removeLeadingSlash } from './utils'
 
 export const loadDocs = async ({
   repo,
   branch,
+  docsRoot,
   docsPath,
 }: {
   repo: string
   branch: string
+  docsRoot: string
   docsPath: string
 }) => {
-  if (!branch || !docsPath) {
+  if (!branch || !docsRoot || !docsPath) {
     throw notFound({
       data: {
         message: 'No doc was found here!',
@@ -26,94 +34,235 @@ export const loadDocs = async ({
     })
   }
 
-  const filePath = `${docsPath}.md`
-
-  return await fetchDocs({
+  const doc = await fetchDocs({
     data: {
       repo,
       branch,
-      filePath,
+      filePath: `${removeLeadingSlash(docsRoot)}/${docsPath}.md`,
     },
   })
+
+  if (!doc) {
+    throw notFound({
+      data: {
+        message: 'No doc was found here!',
+      },
+    })
+  }
+
+  return doc
 }
 
-export const fetchDocs = createServerFn({ method: 'GET' })
-  .inputValidator(
-    v.object({ repo: v.string(), branch: v.string(), filePath: v.string() }),
-  )
-  .handler(async ({ data: { repo, branch, filePath } }) => {
-    const file = await fetchRepoFile(repo, branch, filePath)
+export async function getDocsManifest(opts: {
+  repo: string
+  branch: string
+  docsRoot: string
+}) {
+  return fetchDocsManifest({ data: opts })
+}
+
+export async function resolveDocsRoutePath(opts: {
+  branch: string
+  defaultDocs: string
+  docsPath: string
+  docsRoot: string
+  frameworks: Array<string>
+  repo: string
+}): Promise<DocsPathResolution> {
+  const defaultDocsResolution = getDefaultDocsResolution(opts)
+
+  if (defaultDocsResolution) {
+    return defaultDocsResolution
+  }
+
+  const manifest = await fetchDocsPathManifest({
+    data: {
+      repo: opts.repo,
+      branch: opts.branch,
+      docsRoot: opts.docsRoot,
+    },
+  })
+
+  if (manifest.paths.length === 0) {
+    return { type: 'render', docsPath: opts.docsPath }
+  }
+
+  return resolveDocsPathRedirect({
+    defaultDocs: opts.defaultDocs,
+    docsPath: opts.docsPath,
+    frameworks: opts.frameworks,
+    manifest,
+  })
+}
+
+function getDefaultDocsResolution(opts: {
+  defaultDocs: string
+  docsPath: string
+  frameworks: Array<string>
+}): DocsPathResolution | null {
+  const docsPath = normalizeRouteDocsPath(opts.docsPath)
+  const defaultDocs = normalizeRouteDocsPath(opts.defaultDocs)
+
+  if (!docsPath || !defaultDocs) {
+    return null
+  }
+
+  if (docsPath === defaultDocs) {
+    return {
+      type: 'render',
+      docsPath,
+    }
+  }
+
+  const [framework, ...restParts] = docsPath.split('/')
+  const restPath = restParts.join('/')
+
+  if (
+    framework &&
+    opts.frameworks.includes(framework) &&
+    restPath === 'overview' &&
+    defaultDocs === `framework/${framework}/overview`
+  ) {
+    return {
+      type: 'redirect',
+      docsPath: defaultDocs,
+    }
+  }
+
+  return null
+}
 
-    if (!file) {
-      throw notFound()
+function normalizeRouteDocsPath(path: string) {
+  return removeLeadingSlash(path.trim())
+    .replace(/\.md$/, '')
+    .replace(/\/index$/, '')
+    .replace(/\/+$/g, '')
+}
+
+export type LoadDocsRouteResult =
+  | {
+      type: 'loaded'
+      docsPath: string
+      doc: Awaited<ReturnType<typeof loadDocs>>
+    }
+  | {
+      type: 'redirect'
+      docsPath: string
+    }
+  | {
+      type: 'not-found'
     }
 
-    const frontMatter = extractFrontMatter(file)
-    const description = removeMarkdown(frontMatter.excerpt ?? '')
+export async function loadDocsRoute(opts: {
+  branch: string
+  defaultDocs: string
+  docsPath: string
+  docsRoot: string
+  frameworks: Array<string>
+  redirectFromPaths: Array<string>
+  repo: string
+}): Promise<LoadDocsRouteResult> {
+  const resolution = await resolveDocsRoutePathWithRedirects(opts)
 
-    // Cache for 5 minutes on shared cache
-    // Revalidate in the background
-    setResponseHeader('Cache-Control', 'public, max-age=0, must-revalidate')
-    setResponseHeader(
-      'CDN-Cache-Control',
-      'max-age=300, stale-while-revalidate=300, durable',
-    )
+  if (resolution.type !== 'render') {
+    return resolution
+  }
 
+  try {
     return {
-      title: frontMatter.data?.title,
-      description,
-      filePath,
-      content: frontMatter.content,
-      frontmatter: frontMatter.data,
+      type: 'loaded',
+      docsPath: resolution.docsPath,
+      doc: await loadDocs({
+        repo: opts.repo,
+        branch: opts.branch,
+        docsRoot: opts.docsRoot,
+        docsPath: resolution.docsPath,
+      }),
+    }
+  } catch (error) {
+    if (!isDocsNotFoundError(error)) {
+      throw error
     }
-  })
 
-export const fetchFile = createServerFn({ method: 'GET' })
-  .inputValidator(
-    v.object({ repo: v.string(), branch: v.string(), filePath: v.string() }),
-  )
-  .handler(async ({ data: { repo, branch, filePath } }) => {
-    const file = await fetchRepoFile(repo, branch, filePath)
+    const redirectPath = await resolveDocsRedirectFromPaths(opts)
 
-    if (!file) {
-      throw notFound()
+    if (redirectPath !== null) {
+      return {
+        type: 'redirect',
+        docsPath: redirectPath,
+      }
     }
 
-    // Cache for 60 minutes on shared cache
-    // Revalidate in the background
-    setResponseHeader('Cache-Control', 'public, max-age=0, must-revalidate')
-    setResponseHeader(
-      'CDN-Cache-Control',
-      'max-age=3600, stale-while-revalidate=3600, durable',
-    )
+    return { type: 'not-found' }
+  }
+}
 
-    return file
-  })
+async function resolveDocsRoutePathWithRedirects(opts: {
+  branch: string
+  defaultDocs: string
+  docsPath: string
+  docsRoot: string
+  frameworks: Array<string>
+  redirectFromPaths: Array<string>
+  repo: string
+}): Promise<DocsPathResolution> {
+  const resolution = await resolveDocsRoutePath(opts)
 
-export const fetchRepoDirectoryContents = createServerFn({
-  method: 'GET',
-})
-  .inputValidator(
-    v.object({
-      repo: v.string(),
-      branch: v.string(),
-      startingPath: v.string(),
-    }),
-  )
-  .handler(async ({ data: { repo, branch, startingPath } }) => {
-    const githubContents = await fetchApiContents(repo, branch, startingPath)
+  if (resolution.type !== 'not-found') {
+    return resolution
+  }
+
+  const redirectPath = await resolveDocsRedirectFromPaths(opts)
 
-    if (!githubContents) {
-      throw notFound()
+  if (redirectPath !== null) {
+    return {
+      type: 'redirect',
+      docsPath: redirectPath,
     }
+  }
+
+  return resolution
+}
 
-    // Cache for 60 minutes on shared cache
-    // Revalidate in the background
-    setResponseHeader('Cache-Control', 'public, max-age=0, must-revalidate')
-    setResponseHeader(
-      'CDN-Cache-Control',
-      'max-age=3600, stale-while-revalidate=3600, durable',
-    )
+async function resolveDocsRedirectFromPaths(opts: {
+  branch: string
+  docsRoot: string
+  redirectFromPaths: Array<string>
+  repo: string
+}) {
+  const docsPaths = opts.redirectFromPaths.filter(Boolean)
+
+  if (docsPaths.length === 0) {
+    return null
+  }
 
-    return githubContents
+  return resolveDocsRedirect({
+    repo: opts.repo,
+    branch: opts.branch,
+    docsRoot: opts.docsRoot,
+    docsPaths,
   })
+}
+
+function isDocsNotFoundError(error: unknown) {
+  return (
+    isNotFound(error) ||
+    (error && typeof error === 'object' && 'isNotFound' in error)
+  )
+}
+
+export async function resolveDocsRedirect(opts: {
+  repo: string
+  branch: string
+  docsRoot: string
+  docsPaths: Array<string>
+}) {
+  return fetchDocsRedirect({ data: opts })
+}
+
+export {
+  buildDocsMarkdownRedirectHref,
+  buildDocsRedirectHref,
+  fetchFile,
+  fetchRepoDirectoryContents,
+}
diff --git a/src/utils/docsNavTabs.ts b/src/utils/docsNavTabs.ts
new file mode 100644
index 000000000..600f549db
--- /dev/null
+++ b/src/utils/docsNavTabs.ts
@@ -0,0 +1,232 @@
+import type { ReactNode } from 'react'
+import type { MenuItem } from './config'
+
+export const docsNavTabIds = [
+  'home',
+  'get-started',
+  'tutorial',
+  'guides',
+  'api',
+  'examples',
+] as const
+
+export type DocsNavTabId = (typeof docsNavTabIds)[number]
+
+export const docsNavTabs: Array<{ id: DocsNavTabId; label: string }> = [
+  { id: 'home', label: 'Home' },
+  { id: 'get-started', label: 'Get Started' },
+  { id: 'tutorial', label: 'Tutorial' },
+  { id: 'guides', label: 'Guides' },
+  { id: 'api', label: 'API' },
+  { id: 'examples', label: 'Examples' },
+]
+
+function getLabelText(label: ReactNode) {
+  return typeof label === 'string' ? label : ''
+}
+
+function getFallbackDocsNavTabId(
+  group: MenuItem,
+  child: MenuItem['children'][number],
+): DocsNavTabId {
+  const groupLabel = getLabelText(group.label).toLowerCase()
+  const childLabel = getLabelText(child.label).toLowerCase()
+  const to = child.to.toLowerCase()
+  const searchText = `${groupLabel} ${childLabel} ${to}`
+
+  if (
+    child.to === '..' ||
+    child.to === './framework' ||
+    childLabel === 'home' ||
+    childLabel === 'frameworks'
+  ) {
+    return 'home'
+  }
+
+  // Community resources now live under the Home tab.
+  if (
+    child.to.startsWith('http') ||
+    searchText.includes('community') ||
+    searchText.includes('contributors') ||
+    searchText.includes('npm-stats') ||
+    searchText.includes('npm stats') ||
+    searchText.includes('blog') ||
+    searchText.includes('github') ||
+    searchText.includes('discord') ||
+    searchText.includes('youtube')
+  ) {
+    return 'home'
+  }
+
+  if (searchText.includes('example')) {
+    return 'examples'
+  }
+
+  if (
+    to.includes('/api/') ||
+    to.startsWith('api/') ||
+    to.includes('/reference/') ||
+    to.startsWith('reference/') ||
+    groupLabel.includes('api') ||
+    groupLabel.includes('reference')
+  ) {
+    return 'api'
+  }
+
+  if (searchText.includes('tutorial')) {
+    return 'tutorial'
+  }
+
+  if (
+    groupLabel.includes('get started') ||
+    groupLabel.includes('getting started') ||
+    groupLabel.includes('overview') ||
+    childLabel === 'overview' ||
+    searchText.includes('installation') ||
+    searchText.includes('quick-start') ||
+    searchText.includes('quick start') ||
+    searchText.includes('introduction')
+  ) {
+    return 'get-started'
+  }
+
+  return 'guides'
+}
+
+export function getDocsNavTabId(
+  group: MenuItem,
+  child: MenuItem['children'][number],
+) {
+  return child.tab ?? group.tab ?? getFallbackDocsNavTabId(group, child)
+}
+
+// A tab's `firstItem` is the destination clicked when the user activates the
+// tab. It must point at real docs content, never a utility/special target like
+// `..` (library home), `./framework` (framework picker), or external links.
+function isDocsTabTarget(to: string) {
+  if (to.startsWith('http')) return false
+  if (to === '..' || to === './framework') return false
+  if (to.startsWith('/')) return to.includes('/docs/')
+  return true
+}
+
+export function getTabbedMenuConfig(menuConfig: MenuItem[]) {
+  return docsNavTabs
+    .map((tab) => {
+      const groups = menuConfig
+        .map((group) => {
+          const children = group.children.filter((child) => {
+            return getDocsNavTabId(group, child) === tab.id
+          })
+
+          return children.length
+            ? {
+                ...group,
+                children,
+              }
+            : undefined
+        })
+        .filter((group): group is MenuItem => group !== undefined)
+
+      const children = groups.flatMap((group) => group.children)
+
+      return {
+        ...tab,
+        groups,
+        firstItem:
+          // The Home tab points at the library landing page (`..`), even though
+          // it now also contains community docs (Blog, Contributors, etc.).
+          (tab.id === 'home'
+            ? children.find((child) => child.to === '..')
+            : undefined) ??
+          children.find((child) => isDocsTabTarget(child.to)) ??
+          children.find((child) => !child.to.startsWith('http')),
+      }
+    })
+    .filter((tab) => tab.groups.length)
+}
+
+// Matches a menu child's `to` against the current pathname, handling the
+// special/absolute internal paths used by the Menu group (e.g. `..`,
+// `./framework`, `/$libraryId/$version/docs/...`) in addition to plain
+// relative doc paths.
+function isChildPathMatch({
+  childTo,
+  pathname,
+  relativePathname,
+}: {
+  childTo: string
+  pathname: string
+  relativePathname: string
+}) {
+  if (childTo === relativePathname) return true
+
+  if (childTo === '..') {
+    return /^\/[^/]+\/[^/]+\/?$/.test(pathname)
+  }
+
+  if (childTo === './framework') {
+    return (
+      pathname.includes('/docs/framework') &&
+      !/\/docs\/framework\/[^/]+/.test(pathname)
+    )
+  }
+
+  if (childTo.includes('/$libraryId/$version/docs/')) {
+    const suffix = childTo.split('/docs/')[1]
+    return Boolean(suffix) && pathname.includes(`/docs/${suffix}`)
+  }
+
+  return false
+}
+
+export function getActiveDocsNavTabId({
+  isExample,
+  menuConfig,
+  pathname,
+  relativePathname,
+}: {
+  isExample: boolean
+  menuConfig: MenuItem[]
+  pathname: string
+  relativePathname: string
+}) {
+  if (isExample) {
+    return 'examples'
+  }
+
+  const activeGroup = menuConfig.find((group) =>
+    group.children.some((child) =>
+      isChildPathMatch({ childTo: child.to, pathname, relativePathname }),
+    ),
+  )
+  const activeChild = activeGroup?.children.find((child) =>
+    isChildPathMatch({ childTo: child.to, pathname, relativePathname }),
+  )
+
+  if (activeGroup && activeChild) {
+    return getDocsNavTabId(activeGroup, activeChild)
+  }
+
+  if (
+    pathname.includes('/docs/api/') ||
+    pathname.includes('/docs/reference/')
+  ) {
+    return 'api'
+  }
+
+  if (pathname.includes('/docs/tutorial')) {
+    return 'tutorial'
+  }
+
+  if (
+    pathname.includes('/docs/community') ||
+    pathname.includes('/docs/contributors') ||
+    pathname.includes('/docs/npm-stats') ||
+    pathname.includes('/docs/blog')
+  ) {
+    return 'home'
+  }
+
+  return 'get-started'
+}
diff --git a/src/utils/documents.server.ts b/src/utils/documents.server.ts
index 2ff50b8db..c305bed5e 100644
--- a/src/utils/documents.server.ts
+++ b/src/utils/documents.server.ts
@@ -1,19 +1,102 @@
 import fs from 'node:fs'
 import fsp from 'node:fs/promises'
+import os from 'node:os'
 import path from 'node:path'
-import * as graymatter from 'gray-matter'
+import { fileURLToPath } from 'node:url'
+import { parse as parseYaml } from 'yaml'
+import {
+  getCurrentHostRuntimeEnv,
+  getHostRuntimeEnv,
+} from '~/server/runtime/host.server'
 import { fetchCached } from '~/utils/cache.server'
+import {
+  getCachedGitHubJsonContent,
+  getCachedGitHubTextFile,
+  InvalidCacheKeyError,
+} from './github-content-cache.server'
+import { normalizeRedirectFrom } from './redirects'
 import { multiSortBy, removeLeadingSlash } from './utils'
 import { env } from './env'
+import { fetchWithTimeout } from './outbound-fetch.server'
+
+type FrontMatterValue =
+  | string
+  | number
+  | boolean
+  | null
+  | Array<FrontMatterValue>
+  | { [key: string]: FrontMatterValue }
+
+type FrontMatterData = Record<string, FrontMatterValue | undefined> & {
+  description: string
+  title?: string
+  ref?: string
+  replace?: Record<string, string>
+  redirect_from?: Array<string>
+  redirectFrom?: Array<string>
+}
+
+type FrontMatterFile = {
+  content: string
+  data: FrontMatterData
+  excerpt: string
+  userDescription: string | undefined
+}
+
+export type GitHubContentErrorKind =
+  | 'forbidden'
+  | 'invalid-response'
+  | 'network'
+  | 'rate-limit'
+  | 'server'
+
+export class GitHubContentError extends Error {
+  kind: GitHubContentErrorKind
+  status?: number
+
+  constructor(
+    kind: GitHubContentErrorKind,
+    message: string,
+    opts?: { cause?: unknown; status?: number },
+  ) {
+    super(message, { cause: opts?.cause })
+    this.name = 'GitHubContentError'
+    this.kind = kind
+    this.status = opts?.status
+  }
+}
+
+export function isRecoverableGitHubContentError(
+  error: unknown,
+): error is GitHubContentError {
+  return (
+    error instanceof GitHubContentError &&
+    ['forbidden', 'network', 'rate-limit', 'server'].includes(error.kind)
+  )
+}
+
+const DEFAULT_GITHUB_API_USER_AGENT = 'TanStack-Docs'
+
+export async function cancelUnusedResponseBody(
+  response: Response,
+): Promise<void> {
+  if (!response.body) return
 
-export type Doc = {
-  filepath: string
+  try {
+    await response.body.cancel()
+  } catch {
+    // Best effort cleanup for responses we intentionally do not read.
+  }
 }
 
-export type DocFrontMatter = {
-  title: string
-  published?: string
-  exerpt?: string
+export function shouldUseLocalDocsFiles() {
+  if (process.env.NODE_ENV !== 'development') {
+    return false
+  }
+
+  return !['1', 'true', 'yes'].includes(
+    process.env.TANSTACK_DOCS_USE_REMOTE?.toLowerCase() ?? '',
+  )
 }
 
 /**
@@ -30,12 +113,62 @@ async function fetchRemote(
     'https://raw.githubusercontent.com/',
   ).href
 
-  const response = await fetch(href, {
-    headers: { 'User-Agent': `docs:${owner}/${repo}` },
-  })
+  let response: Response
+
+  try {
+    response = await fetchWithTimeout(href, {
+      ...(await getGitHubContentFetchOptionsAsync({
+        includeApiVersion: false,
+        userAgent: `docs:${owner}/${repo}`,
+      })),
+    })
+
+    if (isGitHubAuthFailureStatus(response.status)) {
+      await cancelUnusedResponseBody(response)
+      response = await fetchWithTimeout(href, {
+        ...(await getGitHubContentFetchOptionsAsync({
+          includeApiVersion: false,
+          includeAuthorization: false,
+          userAgent: `docs:${owner}/${repo}`,
+        })),
+      })
+    }
+  } catch (error) {
+    throw new GitHubContentError(
+      'network',
+      `Failed to fetch ${repo}@${ref}:${filepath}`,
+      { cause: error },
+    )
+  }
 
   if (!response.ok) {
-    return null
+    await cancelUnusedResponseBody(response)
+
+    if (response.status === 404) {
+      return null
+    }
+
+    if (response.status === 403 || response.status === 429) {
+      throw new GitHubContentError(
+        'rate-limit',
+        `GitHub rate limited ${repo}@${ref}:${filepath}`,
+        { status: response.status },
+      )
+    }
+
+    if (response.status >= 500) {
+      throw new GitHubContentError(
+        'server',
+        `GitHub failed to serve ${repo}@${ref}:${filepath}`,
+        { status: response.status },
+      )
+    }
+
+    throw new GitHubContentError(
+      'forbidden',
+      `GitHub rejected ${repo}@${ref}:${filepath}`,
+      { status: response.status },
+    )
   }
 
   return await response.text()
@@ -53,6 +186,70 @@ function isValidFilepath(filepath: string): boolean {
   )
 }
 
+function readGitFilePath(filepath: string) {
+  try {
+    return fs.readFileSync(filepath, 'utf8').trim()
+  } catch {
+    return undefined
+  }
+}
+
+function getGitCommonDir(repoRoot: string) {
+  const gitPath = path.join(repoRoot, '.git')
+
+  if (fs.existsSync(gitPath) && fs.statSync(gitPath).isDirectory()) {
+    return gitPath
+  }
+
+  const gitFile = readGitFilePath(gitPath)
+  const gitDirValue = gitFile?.match(/^gitdir:\s*(.+)$/)?.[1]
+  if (!gitDirValue) {
+    return undefined
+  }
+
+  const gitDir = path.isAbsolute(gitDirValue)
+    ? gitDirValue
+    : path.resolve(repoRoot, gitDirValue)
+
+  const commonDirValue = readGitFilePath(path.join(gitDir, 'commondir'))
+  if (!commonDirValue) {
+    return gitDir
+  }
+
+  return path.isAbsolute(commonDirValue)
+    ? commonDirValue
+    : path.resolve(gitDir, commonDirValue)
+}
+
+function getLocalRepoBaseDirs(repo: string) {
+  const configuredReposDir = env.TANSTACK_LOCAL_REPOS_DIR
+    ? path.resolve(env.TANSTACK_LOCAL_REPOS_DIR, repo)
+    : undefined
+
+  const homeGitHubRepoDir = path.resolve(os.homedir(), 'GitHub', repo)
+  const gitCommonDir = getGitCommonDir(process.cwd())
+  const gitSiblingRepoDir = gitCommonDir
+    ? path.resolve(path.dirname(path.dirname(gitCommonDir)), repo)
+    : undefined
+
+  const siblingRepoDir = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '../../..',
+    repo,
+  )
+
+  return Array.from(
+    new Set(
+      [
+        configuredReposDir,
+        gitSiblingRepoDir,
+        homeGitHubRepoDir,
+        siblingRepoDir,
+      ].filter((dir): dir is string => dir !== undefined),
+    ),
+  )
+}
+
 /**
  * Return text content of file from local file system
  */
@@ -62,37 +259,41 @@ async function fetchFs(repo: string, filepath: string) {
     return ''
   }
 
-  const dirname = import.meta.url.split('://').at(-1)!
-  const baseDir = path.resolve(dirname, `../../../../${repo}`)
-  const localFilePath = path.resolve(baseDir, filepath)
+  const attemptedPaths = Array<string>()
 
-  if (!localFilePath.startsWith(baseDir)) {
-    console.warn(
-      `[fetchFs] Path traversal attempt blocked: ${filepath} resolved to ${localFilePath}\n`,
-    )
-    return ''
-  }
+  for (const baseDir of getLocalRepoBaseDirs(repo)) {
+    const localFilePath = path.resolve(baseDir, filepath)
+    attemptedPaths.push(localFilePath)
+    const relativePath = path.relative(baseDir, localFilePath)
 
-  const exists = fs.existsSync(localFilePath)
-  if (!exists) {
-    console.warn(
-      `[fetchFs] Tried to read file that does not exist: ${localFilePath}\n`,
-    )
-    return ''
+    if (relativePath.startsWith('..') || path.isAbsolute(relativePath)) {
+      console.warn(
+        `[fetchFs] Path traversal attempt blocked: ${filepath} resolved to ${localFilePath}\n`,
+      )
+      return ''
+    }
+
+    const exists = fs.existsSync(localFilePath)
+    if (!exists) {
+      continue
+    }
+
+    const file = await fsp.readFile(localFilePath)
+    return file.toString()
   }
-  const file = await fsp.readFile(localFilePath)
-  return file.toString()
+
+  console.warn(
+    `[fetchFs] Tried to read file that does not exist: ${attemptedPaths.join(', ')}\n`,
+  )
+  return ''
 }
 
 /**
  * Perform global string replace in text for given key-value map
  */
-function replaceContent(
-  text: string,
-  frontmatter: graymatter.GrayMatterFile<string>,
-) {
+function replaceContent(text: string, frontmatter: FrontMatterFile) {
   let result = text
-  const replace = frontmatter.data.replace as Record<string, string> | undefined
+  const replace = frontmatter.data.replace
   if (replace) {
     Object.entries(replace).forEach(([key, value]) => {
       result = result.replace(new RegExp(key, 'g'), value)
@@ -111,10 +312,7 @@ function replaceContent(
  * @param frontmatter Referencing file front-matter
  * @returns File content with replaced sections
  */
-function replaceSections(
-  text: string,
-  frontmatter: graymatter.GrayMatterFile<string>,
-) {
+function replaceSections(text: string, frontmatter: FrontMatterFile) {
   let result = text
   // RegExp defining token pair to dicover sections in the document
   // [//]: # (<Section Token>)
@@ -230,7 +428,7 @@ function replaceProjectImageBranch(
   }
 
   // find all instances of markdown inline images
-  const markdownInlineImageRegex = /\!(\[([^\]]+)\]\(([^)]+)\))/g
+  const markdownInlineImageRegex = /!(\[([^\]]+)]\(([^)]+)\))/g
   const inlineMarkdownImageMatches = text.matchAll(markdownInlineImageRegex)
   for (const match of inlineMarkdownImageMatches) {
     const [fullMatch, _, __, src] = match
@@ -275,80 +473,189 @@ function replaceProjectImageBranch(
   return text
 }
 
-export async function fetchRepoFile(
+async function fetchRepoFileFromOrigin(
   repoPair: string,
   ref: string,
   filepath: string,
 ) {
-  const key = `${repoPair}:${ref}:${filepath}`
   const [owner, repo] = repoPair.split('/')
+  const maxDepth = 4
+  let currentDepth = 1
+  let originFrontmatter: FrontMatterFile | undefined
 
-  const ttl = process.env.NODE_ENV === 'development' ? 1 : 10 * 60 * 1000 // 10 minutes
-  const file = await fetchCached({
-    key,
-    ttl,
-    fn: async () => {
-      const maxDepth = 4
-      let currentDepth = 1
-      let originFrontmatter: graymatter.GrayMatterFile<string> | undefined
-      while (maxDepth > currentDepth) {
-        let text: string | null
-        // Read file contents
-        try {
-          if (process.env.NODE_ENV === 'development') {
-            text = await fetchFs(repo, filepath)
-          } else {
-            text = await fetchRemote(owner, repo, ref, filepath)
-          }
-        } catch (err) {
-          console.error(err)
-          return null
-        }
+  while (maxDepth > currentDepth) {
+    let text: string | null
 
-        if (text === null) {
-          return null
-        }
-        try {
-          const frontmatter = extractFrontMatter(text)
-          // If file does not have a ref in front-matter, replace necessary content
-          if (!frontmatter.data.ref) {
-            if (originFrontmatter) {
-              text = replaceContent(text, originFrontmatter)
-              text = replaceSections(text, originFrontmatter)
-            }
-            text = replaceProjectImageBranch(text, repoPair, ref)
-            return Promise.resolve(text)
-          }
-          // If file has a ref to another file, cache current front-matter and load referenced file
-          filepath = frontmatter.data.ref
-          originFrontmatter = frontmatter
-        } catch (error) {
-          return Promise.resolve(text)
+    if (shouldUseLocalDocsFiles()) {
+      text = await fetchFs(repo, filepath)
+    } else {
+      text = await fetchRemote(owner, repo, ref, filepath)
+    }
+
+    if (text === null) {
+      return null
+    }
+
+    try {
+      const frontmatter = extractFrontMatter(text)
+
+      if (!frontmatter.data.ref) {
+        if (originFrontmatter) {
+          text = replaceContent(text, originFrontmatter)
+          text = replaceSections(text, originFrontmatter)
         }
-        currentDepth++
+
+        return replaceProjectImageBranch(text, repoPair, ref)
       }
 
-      return null
-    },
-  })
+      filepath = frontmatter.data.ref
+      originFrontmatter = frontmatter
+    } catch {
+      return text
+    }
+
+    currentDepth++
+  }
+
+  return null
+}
+
+export async function fetchRepoFile(
+  repoPair: string,
+  ref: string,
+  filepath: string,
+) {
+  const key = `${repoPair}:${ref}:${filepath}`
 
-  return file
+  if (shouldUseLocalDocsFiles()) {
+    return fetchCached({
+      key,
+      ttl: 1,
+      fn: () => fetchRepoFileFromOrigin(repoPair, ref, filepath),
+    })
+  }
+
+  try {
+    return await getCachedGitHubTextFile({
+      repo: repoPair,
+      gitRef: ref,
+      path: filepath,
+      origin: () => fetchRepoFileFromOrigin(repoPair, ref, filepath),
+    })
+  } catch (error) {
+    if (error instanceof InvalidCacheKeyError) {
+      // Caller asked for an unrepresentable path (URL fragment leaked in,
+      // probe attempt, malformed link). Treat as missing without polluting
+      // the cache or the GitHub API budget.
+      return null
+    }
+    throw error
+  }
 }
 
 export function extractFrontMatter(content: string) {
-  const result = graymatter.default(content, {
-    excerpt: (file: any) => (file.excerpt = createRichExcerpt(file.content)),
-  })
+  const parsed = parseFrontMatter(content)
+  const redirectFrom = normalizeRedirectFrom(parsed.data.redirect_from)
+  const userDescription =
+    typeof parsed.data.description === 'string' &&
+    parsed.data.description.trim().length > 0
+      ? parsed.data.description
+      : undefined
+  const title =
+    typeof parsed.data.title === 'string' ? parsed.data.title : undefined
+  const ref = typeof parsed.data.ref === 'string' ? parsed.data.ref : undefined
+  const data: FrontMatterData = {
+    ...parsed.data,
+    description: userDescription ?? createExcerpt(parsed.content),
+    title,
+    ref,
+    redirect_from: redirectFrom,
+    redirectFrom,
+  }
 
   return {
-    ...result,
-    data: {
-      ...result.data,
-      description: createExcerpt(result.content),
-    } as { [key: string]: any } & { description: string },
+    content: parsed.content,
+    data,
+    excerpt: createRichExcerpt(parsed.content),
+    userDescription,
   }
 }
 
+function parseFrontMatter(content: string) {
+  const normalizedContent = content.replace(/^\uFEFF/, '')
+
+  if (!normalizedContent.startsWith('---')) {
+    return { content, data: {} }
+  }
+
+  const lines = normalizedContent.split(/\r?\n/)
+  const closingLineIndex = lines.findIndex(
+    (line, index) => index > 0 && line.trim() === '---',
+  )
+
+  if (closingLineIndex === -1) {
+    return { content, data: {} }
+  }
+
+  const frontMatterSource = lines.slice(1, closingLineIndex).join('\n')
+  const body = lines.slice(closingLineIndex + 1).join('\n')
+  const parsed = parseYaml(frontMatterSource)
+
+  return {
+    content: body,
+    data: isRecord(parsed) ? normalizeFrontMatterData(parsed) : {},
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function normalizeFrontMatterData(data: Record<string, unknown>) {
+  const normalized: Record<string, FrontMatterValue | undefined> = {}
+
+  for (const [key, value] of Object.entries(data)) {
+    normalized[key] = toFrontMatterValue(value)
+  }
+
+  return normalized
+}
+
+function toFrontMatterValue(value: unknown): FrontMatterValue | undefined {
+  if (
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean' ||
+    value === null
+  ) {
+    return value
+  }
+
+  if (Array.isArray(value)) {
+    const normalized: Array<FrontMatterValue> = []
+    for (const item of value) {
+      const normalizedItem = toFrontMatterValue(item)
+      if (normalizedItem !== undefined) {
+        normalized.push(normalizedItem)
+      }
+    }
+    return normalized
+  }
+
+  if (isRecord(value)) {
+    const normalized: Record<string, FrontMatterValue> = {}
+    for (const [key, item] of Object.entries(value)) {
+      const normalizedItem = toFrontMatterValue(item)
+      if (normalizedItem !== undefined) {
+        normalized[key] = normalizedItem
+      }
+    }
+    return normalized
+  }
+
+  return undefined
+}
+
 function createExcerpt(text: string, maxLength = 200) {
   // Remove Markdown formatting using a basic regex
 
@@ -412,22 +719,381 @@ export interface GitHubFileNode extends GitHubFile {
   parentPath?: string
 }
 
+interface GitHubTreeEntry {
+  path: string
+  sha: string
+  size?: number
+  type: 'blob' | 'tree'
+  url: string
+}
+
+interface GitHubRecursiveTreeResponse {
+  tree: Array<GitHubTreeEntry>
+  truncated?: boolean
+}
+
+function isGitHubFileNode(value: unknown): value is GitHubFileNode {
+  const candidate = value as {
+    _links?: { self?: unknown }
+    children?: unknown
+    depth?: unknown
+    name?: unknown
+    path?: unknown
+    type?: unknown
+  } | null
+
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    typeof candidate?.name === 'string' &&
+    typeof candidate.path === 'string' &&
+    typeof candidate.type === 'string' &&
+    typeof candidate.depth === 'number' &&
+    typeof candidate._links === 'object' &&
+    candidate._links !== null &&
+    typeof candidate._links.self === 'string' &&
+    (!('children' in value) ||
+      candidate.children === undefined ||
+      (Array.isArray(candidate.children) &&
+        candidate.children.every((child) => isGitHubFileNode(child))))
+  )
+}
+
+function isGitHubFileNodeArray(value: unknown): value is Array<GitHubFileNode> {
+  return Array.isArray(value) && value.every((item) => isGitHubFileNode(item))
+}
+
+function isGitHubFile(value: unknown): value is GitHubFile {
+  if (!isRecord(value)) {
+    return false
+  }
+
+  const links = value._links
+
+  return (
+    typeof value.name === 'string' &&
+    typeof value.path === 'string' &&
+    typeof value.type === 'string' &&
+    isRecord(links) &&
+    typeof links.self === 'string'
+  )
+}
+
+function isGitHubFileArray(value: unknown): value is Array<GitHubFile> {
+  return Array.isArray(value) && value.every((item) => isGitHubFile(item))
+}
+
+function isGitHubTreeEntry(value: unknown): value is GitHubTreeEntry {
+  if (typeof value !== 'object' || value === null) {
+    return false
+  }
+
+  const candidate = value as {
+    path?: unknown
+    sha?: unknown
+    size?: unknown
+    type?: unknown
+    url?: unknown
+  }
+
+  return (
+    typeof candidate.path === 'string' &&
+    typeof candidate.sha === 'string' &&
+    (candidate.size === undefined || typeof candidate.size === 'number') &&
+    (candidate.type === 'blob' || candidate.type === 'tree') &&
+    typeof candidate.url === 'string'
+  )
+}
+
+function isGitHubRecursiveTreeResponse(
+  value: unknown,
+): value is GitHubRecursiveTreeResponse {
+  if (typeof value !== 'object' || value === null) {
+    return false
+  }
+
+  const candidate = value as {
+    tree?: unknown
+    truncated?: unknown
+  }
+
+  return (
+    Array.isArray(candidate.tree) &&
+    candidate.tree.every((entry) => isGitHubTreeEntry(entry)) &&
+    (candidate.truncated === undefined ||
+      typeof candidate.truncated === 'boolean')
+  )
+}
+
+function getValidGitHubToken(token: string | undefined) {
+  const trimmedToken = token?.trim()
+
+  if (!trimmedToken || trimmedToken === 'USE_A_REAL_KEY_IN_PRODUCTION') {
+    return undefined
+  }
+
+  return trimmedToken
+}
+
+function getGitHubAuthToken() {
+  const hostToken = getCurrentHostRuntimeEnv()?.GITHUB_AUTH_TOKEN
+  return getValidGitHubToken(hostToken ?? env.GITHUB_AUTH_TOKEN)
+}
+
+async function getGitHubAuthTokenAsync() {
+  const hostToken = (await getHostRuntimeEnv())?.GITHUB_AUTH_TOKEN
+  return getValidGitHubToken(hostToken ?? env.GITHUB_AUTH_TOKEN)
+}
+
+export function isGitHubAuthFailureStatus(status: number) {
+  // GitHub can mask token-scoping failures as 404, especially for raw
+  // content URLs. Retry unauthenticated before treating the content as missing.
+  return status === 401 || status === 403 || status === 404
+}
+
+export function getGitHubContentFetchOptions(opts?: {
+  includeApiVersion?: boolean
+  includeAuthorization?: boolean
+  userAgent?: string
+}): RequestInit {
+  return getGitHubContentFetchOptionsWithToken(getGitHubAuthToken(), opts)
+}
+
+async function getGitHubContentFetchOptionsAsync(opts?: {
+  includeApiVersion?: boolean
+  includeAuthorization?: boolean
+  userAgent?: string
+}): Promise<RequestInit> {
+  return getGitHubContentFetchOptionsWithToken(
+    await getGitHubAuthTokenAsync(),
+    opts,
+  )
+}
+
+function getGitHubContentFetchOptionsWithToken(
+  token: string | undefined,
+  opts?: {
+    includeApiVersion?: boolean
+    includeAuthorization?: boolean
+    userAgent?: string
+  },
+): RequestInit {
+  const headers: Record<string, string> = {}
+
+  if (opts?.includeApiVersion !== false) {
+    headers['X-GitHub-Api-Version'] = '2022-11-28'
+  }
+
+  headers['User-Agent'] = opts?.userAgent ?? DEFAULT_GITHUB_API_USER_AGENT
+
+  if (token && opts?.includeAuthorization !== false) {
+    headers.Authorization = `Bearer ${token}`
+  }
+
+  return {
+    headers,
+  }
+}
+
+async function fetchGitHubApiJson(url: string) {
+  let response: Response
+
+  try {
+    response = await fetchWithTimeout(
+      url,
+      await getGitHubContentFetchOptionsAsync(),
+    )
+
+    if (isGitHubAuthFailureStatus(response.status)) {
+      await cancelUnusedResponseBody(response)
+      response = await fetchWithTimeout(
+        url,
+        await getGitHubContentFetchOptionsAsync({
+          includeAuthorization: false,
+        }),
+      )
+    }
+  } catch (error) {
+    throw new GitHubContentError(
+      'network',
+      `Failed to fetch GitHub API: ${url}`,
+      {
+        cause: error,
+      },
+    )
+  }
+
+  if (!response.ok) {
+    await cancelUnusedResponseBody(response)
+
+    if (response.status === 404) {
+      return null
+    }
+
+    if (response.status === 403 || response.status === 429) {
+      throw new GitHubContentError('rate-limit', `GitHub rate limited ${url}`, {
+        status: response.status,
+      })
+    }
+
+    if (response.status >= 500) {
+      throw new GitHubContentError('server', `GitHub failed to serve ${url}`, {
+        status: response.status,
+      })
+    }
+
+    throw new GitHubContentError('forbidden', `GitHub rejected ${url}`, {
+      status: response.status,
+    })
+  }
+
+  try {
+    return (await response.json()) as unknown
+  } catch (error) {
+    throw new GitHubContentError(
+      'invalid-response',
+      `Invalid GitHub JSON for ${url}`,
+      {
+        cause: error,
+      },
+    )
+  }
+}
+
+export async function fetchGitHubRecursiveTree(repo: string, branch: string) {
+  const data = await getCachedGitHubJsonContent({
+    repo,
+    gitRef: branch,
+    path: '__github_recursive_tree__',
+    isValue: isGitHubRecursiveTreeResponse,
+    origin: async () => {
+      const url = `https://api.github.com/repos/${repo}/git/trees/${encodeURIComponent(branch)}?recursive=1`
+      const response = await fetchGitHubApiJson(url)
+
+      if (response === null) {
+        return null
+      }
+
+      if (!isGitHubRecursiveTreeResponse(response)) {
+        throw new GitHubContentError(
+          'invalid-response',
+          `Unexpected recursive tree response for ${repo}@${branch}`,
+        )
+      }
+
+      return response
+    },
+  })
+
+  return data?.tree ?? null
+}
+
+function buildFileTreeFromRecursiveTree(
+  tree: Array<GitHubTreeEntry>,
+  startingPath: string,
+): Array<GitHubFileNode> | null {
+  const normalizedStart = removeLeadingSlash(startingPath).replace(/\/+$/g, '')
+  const prefix = normalizedStart ? `${normalizedStart}/` : ''
+  const scopedEntries = tree.filter(
+    (entry) =>
+      entry.path === normalizedStart ||
+      (prefix !== '' && entry.path.startsWith(prefix)) ||
+      (prefix === '' && entry.path.length > 0),
+  )
+
+  const hasStartingPath =
+    normalizedStart === '' ||
+    scopedEntries.some(
+      (entry) =>
+        entry.path === normalizedStart || entry.path.startsWith(prefix),
+    )
+
+  if (!hasStartingPath) {
+    return null
+  }
+
+  const childrenByParent = new Map<string, Array<GitHubTreeEntry>>()
+
+  for (const entry of scopedEntries) {
+    if (entry.path === normalizedStart) {
+      continue
+    }
+
+    const parentPath = entry.path.split('/').slice(0, -1).join('/')
+    const siblings = childrenByParent.get(parentPath) ?? []
+    siblings.push(entry)
+    childrenByParent.set(parentPath, siblings)
+  }
+
+  const buildChildren = (
+    parentPath: string,
+    depth: number,
+    parentPrefix: string,
+  ) => {
+    return sortApiContents(
+      (childrenByParent.get(parentPath) ?? []).map((entry) => ({
+        name: entry.path.split('/').at(-1) ?? entry.path,
+        path: entry.path,
+        type: entry.type === 'tree' ? 'dir' : 'file',
+        _links: { self: entry.path },
+      })),
+    ).map((entry) => {
+      const node: GitHubFileNode = {
+        ...entry,
+        depth,
+        parentPath: parentPrefix,
+      }
+
+      if (entry.type === 'dir') {
+        node.children = buildChildren(
+          entry.path,
+          depth + 1,
+          `${parentPrefix}${entry.path}/`,
+        )
+      }
+
+      return node
+    })
+  }
+
+  return buildChildren(normalizedStart, 0, '')
+}
+
 const API_CONTENTS_MAX_DEPTH = 3
 
+function encodeGitHubContentsPath(path: string) {
+  return removeLeadingSlash(path)
+    .replace(/\/+$/g, '')
+    .split('/')
+    .filter(Boolean)
+    .map((segment) => encodeURIComponent(segment))
+    .join('/')
+}
+
 export function fetchApiContents(
   repoPair: string,
   branch: string,
   startingPath: string,
 ) {
-  const isDev = process.env.NODE_ENV === 'development'
-  return fetchCached({
-    key: `${repoPair}:${branch}:${startingPath}`,
-    ttl: isDev ? 1 : 10 * 60 * 1000, // 10 minute
-    fn: () => {
-      return isDev
-        ? fetchApiContentsFs(repoPair, startingPath)
-        : fetchApiContentsRemote(repoPair, branch, startingPath)
-    },
+  if (shouldUseLocalDocsFiles()) {
+    return fetchCached({
+      key: `${repoPair}:${branch}:${startingPath}`,
+      ttl: 1,
+      fn: () => fetchApiContentsFs(repoPair, startingPath),
+    })
+  }
+
+  return getCachedGitHubJsonContent({
+    repo: repoPair,
+    gitRef: branch,
+    path: startingPath,
+    isValue: isGitHubFileNodeArray,
+    origin: () => fetchApiContentsRemote(repoPair, branch, startingPath),
+  }).catch((error) => {
+    if (error instanceof InvalidCacheKeyError) {
+      return null
+    }
+    throw error
   })
 }
 
@@ -444,10 +1110,17 @@ async function fetchApiContentsFs(
   startingPath: string,
 ): Promise<Array<GitHubFileNode> | null> {
   const [_, repo] = repoPair.split('/')
-  const dirname = import.meta.url.split('://').at(-1)!
 
-  const base = path.resolve(dirname, `../../../../${repo}`)
-  const fsStartPath = path.join(base, removeLeadingSlash(startingPath))
+  const base = getLocalRepoBaseDirs(repo).find((candidate) =>
+    fs.existsSync(path.join(candidate, removeLeadingSlash(startingPath))),
+  )
+
+  if (!base) {
+    return null
+  }
+
+  const resolvedBase = base
+  const fsStartPath = path.join(resolvedBase, removeLeadingSlash(startingPath))
 
   const dirsAndFilesToIgnore = [
     'node_modules',
@@ -459,7 +1132,6 @@ async function fetchApiContentsFs(
     '.vercel',
     '.DS_Store',
     '.nitro',
-    '.vinxi',
     '.tanstack-start/build',
   ]
 
@@ -524,8 +1196,10 @@ async function fetchApiContentsFs(
       }
 
       // This replacement is only being done to more accurately mock the GitHub API response
-      file.path = removeLeadingSlash(file.path.replace(base, ''))
-      file._links.self = removeLeadingSlash(file._links.self.replace(base, ''))
+      file.path = removeLeadingSlash(file.path.replace(resolvedBase, ''))
+      file._links.self = removeLeadingSlash(
+        file._links.self.replace(resolvedBase, ''),
+      )
 
       result.push(file)
     }
@@ -542,44 +1216,70 @@ async function fetchApiContentsRemote(
   branch: string,
   startingPath: string,
 ): Promise<Array<GitHubFileNode> | null> {
-  const fetchOptions: RequestInit = {
-    headers: {
-      'X-GitHub-Api-Version': '2022-11-28',
-      Authorization: `Bearer ${env.GITHUB_AUTH_TOKEN}`,
-    },
+  try {
+    const tree = await fetchGitHubRecursiveTree(repo, branch)
+
+    if (tree) {
+      const fileTree = buildFileTreeFromRecursiveTree(tree, startingPath)
+
+      if (fileTree) {
+        return fileTree
+      }
+    }
+  } catch (error) {
+    if (!isRecoverableGitHubContentError(error)) {
+      throw error
+    }
   }
-  const res = await fetch(
-    `https://api.github.com/repos/${repo}/contents/${startingPath}?ref=${branch}`,
-    fetchOptions,
+
+  return fetchApiContentsRemoteFromContentsApi(repo, branch, startingPath)
+}
+
+async function fetchGitHubDirectoryContents(
+  repo: string,
+  branch: string,
+  directoryPath: string,
+) {
+  const encodedPath = encodeGitHubContentsPath(directoryPath)
+  const url = new URL(
+    `https://api.github.com/repos/${repo}/contents/${encodedPath}`,
   )
+  url.searchParams.set('ref', branch)
 
-  if (!res.ok) {
-    if (res.status === 404) {
-      return null
-    }
-    throw new Error(
-      `Failed to fetch repo contents for ${repo}/${branch}/${startingPath}: Status is ${res.statusText} - ${res.status}`,
+  const response = await fetchGitHubApiJson(url.href)
+
+  if (response === null) {
+    return null
+  }
+
+  if (!isGitHubFileArray(response)) {
+    throw new GitHubContentError(
+      'invalid-response',
+      `Unexpected directory contents response for ${repo}@${branch}:${directoryPath}`,
     )
   }
 
-  const data = (await res.json()) as Array<GitHubFile> | null
+  return response.filter((file) => file.type === 'dir' || file.type === 'file')
+}
 
-  if (!Array.isArray(data)) {
-    console.warn(
-      'Expected an array of files from GitHub API, but received:\n',
-      JSON.stringify(data),
-    )
+async function fetchApiContentsRemoteFromContentsApi(
+  repo: string,
+  branch: string,
+  startingPath: string,
+): Promise<Array<GitHubFileNode> | null> {
+  const data = await fetchGitHubDirectoryContents(repo, branch, startingPath)
+
+  if (!data || data.length === 0) {
     return null
   }
 
   async function buildFileTree(
-    nodes: Array<GitHubFile> | undefined,
+    nodes: Array<GitHubFile>,
     depth: number,
     parentPath: string,
-  ) {
+  ): Promise<Array<GitHubFileNode>> {
     const result: Array<GitHubFileNode> = []
-
-    const sortedNodes = sortApiContents(nodes ?? [])
+    const sortedNodes = sortApiContents(nodes)
 
     for (const node of sortedNodes) {
       const file: GitHubFileNode = {
@@ -589,18 +1289,18 @@ async function fetchApiContentsRemote(
       }
 
       if (file.type === 'dir' && depth <= API_CONTENTS_MAX_DEPTH) {
-        const directoryFilesResponse = await fetch(
-          file._links.self,
-          fetchOptions,
-        )
-        const directoryFiles =
-          (await directoryFilesResponse.json()) as Array<GitHubFile>
-
-        file.children = await buildFileTree(
-          directoryFiles,
-          depth + 1,
-          `${parentPath}${file.path}/`,
+        const directoryFiles = await fetchGitHubDirectoryContents(
+          repo,
+          branch,
+          file.path,
         )
+        file.children = directoryFiles
+          ? await buildFileTree(
+              directoryFiles,
+              depth + 1,
+              `${parentPath}${file.path}/`,
+            )
+          : []
       }
 
       result.push(file)
@@ -609,6 +1309,5 @@ async function fetchApiContentsRemote(
     return result
   }
 
-  const fileTree = await buildFileTree(data, 0, '')
-  return fileTree
+  return buildFileTree(data, 0, '')
 }
diff --git a/src/utils/env.functions.ts b/src/utils/env.functions.ts
index f10d9d807..a3910e393 100644
--- a/src/utils/env.functions.ts
+++ b/src/utils/env.functions.ts
@@ -1,10 +1,4 @@
-/**
- * Environment variable utility that works in both TanStack Start and Netlify functions
- * Uses process.env when import.meta is not available (Netlify functions)
- */
-
 function getEnvVar(key: string): string | undefined {
-  // In Netlify functions, import.meta is not available, so use process.env
   try {
     if (typeof import.meta === 'undefined' || !import.meta.env) {
       return process.env[key]
@@ -17,7 +11,6 @@ function getEnvVar(key: string): string | undefined {
 
     return import.meta.env[key]
   } catch {
-    // import.meta not available (e.g., in Netlify functions CJS build)
     return process.env[key]
   }
 }
@@ -30,8 +23,6 @@ export const envFunctions = {
   GITHUB_OAUTH_CLIENT_SECRET: getEnvVar('GITHUB_OAUTH_CLIENT_SECRET'),
   GOOGLE_OAUTH_CLIENT_ID: getEnvVar('GOOGLE_OAUTH_CLIENT_ID'),
   GOOGLE_OAUTH_CLIENT_SECRET: getEnvVar('GOOGLE_OAUTH_CLIENT_SECRET'),
-  SITE_URL: getEnvVar('SITE_URL'),
   DATABASE_URL: getEnvVar('DATABASE_URL'),
   SESSION_SECRET: getEnvVar('SESSION_SECRET'),
-  URL: getEnvVar('URL'),
 } as const
diff --git a/src/utils/env.ts b/src/utils/env.ts
index 9a0e92141..d17919b43 100644
--- a/src/utils/env.ts
+++ b/src/utils/env.ts
@@ -8,28 +8,31 @@ const serverEnvSchema = v.object({
   GITHUB_OAUTH_CLIENT_SECRET: v.optional(v.string()),
   GOOGLE_OAUTH_CLIENT_ID: v.optional(v.string()),
   GOOGLE_OAUTH_CLIENT_SECRET: v.optional(v.string()),
-  SITE_URL: v.optional(v.string()), // Base URL for OAuth redirects (e.g., https://tanstack.com or http://localhost:3000)
   DATABASE_URL: v.optional(v.string()),
   SESSION_SECRET: v.optional(v.string()), // Secret key for signing session cookies (required in production)
   DISCORD_WEBHOOK_URL: v.optional(v.string()),
   RESEND_API_KEY: v.optional(v.string()),
-  POSTHOG_API_KEY: v.optional(v.string()),
   SENTRY_DSN: v.optional(v.string()),
   TANSTACK_MCP_ENABLED_TOOLS: v.optional(v.string()),
+  TANSTACK_LOCAL_REPOS_DIR: v.optional(v.string()),
+  // Shopify Storefront API token — server-only. Cart reads and mutations
+  // run through createServerFn (src/utils/shop.functions.ts), so this
+  // token never reaches the browser. Store domain + API version are
+  // public-by-design and hard-coded in src/server/shopify/fetch.ts.
+  SHOPIFY_PRIVATE_STOREFRONT_TOKEN: v.optional(v.string()),
 })
 
 const clientEnvSchema = v.object({
-  URL: v.optional(v.string()),
+  VITE_KAPA_INTEGRATION_ID: v.optional(v.string()),
+  VITE_KAPA_SOURCE_GROUP_IDS: v.optional(v.string()),
 })
 
 // Validate and parse environment variables
-const parsedServerEnv = import.meta.env.SSR
-  ? v.parse(serverEnvSchema, process.env)
-  : {}
+const viteEnv = import.meta.env ?? {}
 
-const parsedClientEnv = import.meta.env
-  ? v.parse(clientEnvSchema, import.meta.env)
-  : {}
+const parsedServerEnv = viteEnv.SSR ? v.parse(serverEnvSchema, process.env) : {}
+
+const parsedClientEnv = v.parse(clientEnvSchema, viteEnv)
 
 type ParsedServerEnv = v.InferOutput<typeof serverEnvSchema>
 type ParsedClientEnv = v.InferOutput<typeof clientEnvSchema>
@@ -37,9 +40,7 @@ type ParsedEnv = ParsedServerEnv & ParsedClientEnv
 
 // Merge parsed environments, with server env hidden from client
 export const env = new Proxy(
-  import.meta.env.SSR
-    ? { ...parsedClientEnv, ...parsedServerEnv }
-    : parsedClientEnv,
+  viteEnv.SSR ? { ...parsedClientEnv, ...parsedServerEnv } : parsedClientEnv,
   {
     get(target, prop) {
       if (prop in parsedServerEnv && typeof window !== 'undefined') {
diff --git a/src/utils/feed-manual.ts b/src/utils/feed-manual.ts
deleted file mode 100644
index 825905d55..000000000
--- a/src/utils/feed-manual.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Generate a unique ID for a manual feed entry
- */
-export function generateManualEntryId(): string {
-  return `announcement:${Date.now()}-${Math.random()
-    .toString(36)
-    .substring(2, 9)}`
-}
diff --git a/src/utils/feed.functions.ts b/src/utils/feed.functions.ts
deleted file mode 100644
index e69e30465..000000000
--- a/src/utils/feed.functions.ts
+++ /dev/null
@@ -1,589 +0,0 @@
-import { createServerFn } from '@tanstack/react-start'
-import { db } from '~/db/client'
-import { feedEntries, feedConfig } from '~/db/schema'
-import { eq, and, sql } from 'drizzle-orm'
-import * as v from 'valibot'
-import type { EntryType } from '~/db/schema'
-import {
-  requireAdmin,
-  getEffectivePublishedAt,
-  validatePublishedAt,
-  buildFeedQueryConditions,
-  filterByReleaseLevel,
-} from './feed.server'
-import { entryTypeSchema } from './schemas'
-
-// Transform database entry to API response format
-function transformFeedEntry(entry: typeof feedEntries.$inferSelect) {
-  return {
-    _id: entry.entryId,
-    id: entry.entryId,
-    entryType: entry.entryType,
-    title: entry.title,
-    content: entry.content,
-    excerpt: entry.excerpt,
-    publishedAt: entry.publishedAt.getTime(),
-    createdAt: entry.createdAt.getTime(),
-    updatedAt: entry.updatedAt.getTime(),
-    metadata: entry.metadata ?? {},
-    libraryIds: entry.libraryIds,
-    partnerIds: entry.partnerIds,
-    tags: entry.tags,
-    showInFeed: entry.showInFeed,
-    featured: entry.featured ?? false,
-    autoSynced: entry.autoSynced,
-    lastSyncedAt: entry.lastSyncedAt?.getTime(),
-  }
-}
-
-export const listFeedEntries = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      pagination: v.object({
-        limit: v.number(),
-        page: v.optional(v.number()),
-      }),
-      filters: v.optional(
-        v.object({
-          entryTypes: v.optional(v.array(entryTypeSchema)),
-          libraries: v.optional(v.array(v.string())),
-          partners: v.optional(v.array(v.string())),
-          tags: v.optional(v.array(v.string())),
-          releaseLevels: v.optional(
-            v.array(v.picklist(['major', 'minor', 'patch'])),
-          ),
-          includePrerelease: v.optional(v.boolean()),
-          featured: v.optional(v.boolean()),
-          search: v.optional(v.string()),
-          includeHidden: v.optional(v.boolean()),
-        }),
-      ),
-    }),
-  )
-  .handler(async ({ data }) => {
-    // Check if admin (for includeHidden)
-    try {
-      await requireAdmin()
-    } catch {
-      // Not admin, continue
-    }
-
-    const limit = data.pagination.limit
-    const pageIndex = data.pagination.page ?? 0
-    const filters = data.filters ?? {}
-
-    // Build query conditions
-    const whereClause = buildFeedQueryConditions(filters)
-
-    // Get all matching entries
-    let allEntries = await db
-      .select()
-      .from(feedEntries)
-      .where(whereClause)
-      .orderBy(sql`${feedEntries.publishedAt} DESC`)
-
-    // Apply release level filter (complex logic, done in-memory)
-    allEntries = filterByReleaseLevel(
-      allEntries,
-      filters.releaseLevels,
-      filters.includePrerelease,
-    )
-
-    // Sort: latest first (by publishedAt), with featured as tiebreaker
-    allEntries.sort((a, b) => {
-      const publishedA = getEffectivePublishedAt(a)
-      const publishedB = getEffectivePublishedAt(b)
-      const timeDiff = publishedB - publishedA
-      if (timeDiff !== 0) return timeDiff
-
-      // Tiebreaker: featured items first
-      if (a.featured && !b.featured) return -1
-      if (!a.featured && b.featured) return 1
-
-      return 0
-    })
-
-    // Pagination
-    const start = Math.max(0, pageIndex * limit)
-    const end = start + limit
-    const page = allEntries.slice(start, end)
-    const hasMore = end < allEntries.length
-
-    const transformedPage = page.map(transformFeedEntry)
-
-    return {
-      page: transformedPage,
-      isDone: !hasMore,
-      counts: {
-        total: allEntries.length,
-        pages: Math.max(1, Math.ceil(allEntries.length / limit)),
-      },
-    }
-  })
-
-// Server function wrapper for getFeedEntry
-export const getFeedEntry = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ id: v.string() }))
-  .handler(async ({ data }) => {
-    const entry = await db.query.feedEntries.findFirst({
-      where: eq(feedEntries.entryId, data.id),
-    })
-
-    if (!entry) {
-      return null
-    }
-
-    return transformFeedEntry(entry)
-  })
-
-// Server function wrapper for getFeedEntryById
-export const getFeedEntryById = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ id: v.string() }))
-  .handler(async ({ data }) => {
-    const entry = await db.query.feedEntries.findFirst({
-      where: eq(feedEntries.entryId, data.id),
-    })
-
-    if (!entry) {
-      return null
-    }
-
-    return transformFeedEntry(entry)
-  })
-
-// Server function wrapper for getFeedStats
-export const getFeedStats = createServerFn({ method: 'POST' }).handler(
-  async () => {
-    const allEntries = await db.select().from(feedEntries)
-
-    const stats = {
-      total: allEntries.length,
-      byEntryType: {} as Record<string, number>,
-      byLibrary: {} as Record<string, number>,
-      visible: 0,
-      featured: 0,
-    }
-
-    for (const entry of allEntries) {
-      stats.byEntryType[entry.entryType] =
-        (stats.byEntryType[entry.entryType] ?? 0) + 1
-
-      for (const libId of entry.libraryIds) {
-        stats.byLibrary[libId] = (stats.byLibrary[libId] ?? 0) + 1
-      }
-
-      if (entry.showInFeed) stats.visible++
-      if (entry.featured) stats.featured++
-    }
-
-    return stats
-  },
-)
-
-// Server function wrapper for getFeedFacetCounts
-export const getFeedFacetCounts = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      filters: v.optional(
-        v.object({
-          entryTypes: v.optional(v.array(entryTypeSchema)),
-          libraries: v.optional(v.array(v.string())),
-          partners: v.optional(v.array(v.string())),
-          tags: v.optional(v.array(v.string())),
-          releaseLevels: v.optional(
-            v.array(v.picklist(['major', 'minor', 'patch'])),
-          ),
-          includePrerelease: v.optional(v.boolean()),
-          featured: v.optional(v.boolean()),
-          search: v.optional(v.string()),
-          includeHidden: v.optional(v.boolean()),
-        }),
-      ),
-    }),
-  )
-  .handler(async ({ data }) => {
-    const filters = data.filters ?? {}
-
-    // Helper function to apply filters except for a specific facet
-    const applyFiltersExcept = (
-      excludeFacet?:
-        | 'entryTypes'
-        | 'libraries'
-        | 'partners'
-        | 'tags'
-        | 'releaseLevels'
-        | 'includePrerelease'
-        | 'featured'
-        | 'search',
-    ) => {
-      const whereClause = buildFeedQueryConditions(filters, excludeFacet)
-      return db.select().from(feedEntries).where(whereClause)
-    }
-
-    // Count by entry type
-    const entryTypeEntries = await applyFiltersExcept('entryTypes')
-    const entryTypeCounts: Record<string, number> = {}
-    for (const entry of entryTypeEntries) {
-      entryTypeCounts[entry.entryType] =
-        (entryTypeCounts[entry.entryType] ?? 0) + 1
-    }
-
-    // Count by library
-    const libraryEntries = await applyFiltersExcept('libraries')
-    const libraryCounts: Record<string, number> = {}
-    for (const entry of libraryEntries) {
-      for (const libId of entry.libraryIds) {
-        libraryCounts[libId] = (libraryCounts[libId] ?? 0) + 1
-      }
-    }
-
-    // Count by partner
-    const partnerEntries = await applyFiltersExcept('partners')
-    const partnerCounts: Record<string, number> = {}
-    for (const entry of partnerEntries) {
-      for (const partnerId of entry.partnerIds) {
-        partnerCounts[partnerId] = (partnerCounts[partnerId] ?? 0) + 1
-      }
-    }
-
-    // Count by release level (in-memory filtering)
-    const releaseEntries = await applyFiltersExcept('releaseLevels')
-    const releaseLevelCounts: Record<string, number> = {}
-    for (const entry of releaseEntries) {
-      const releaseLevelTags = entry.tags.filter((tag) =>
-        tag.startsWith('release:'),
-      )
-      if (releaseLevelTags.length > 0) {
-        const baseReleaseTag = releaseLevelTags.find(
-          (tag) =>
-            tag === 'release:major' ||
-            tag === 'release:minor' ||
-            tag === 'release:patch',
-        )
-        if (baseReleaseTag) {
-          const level = baseReleaseTag.replace('release:', '')
-          releaseLevelCounts[level] = (releaseLevelCounts[level] ?? 0) + 1
-        }
-      }
-    }
-
-    // Count prerelease
-    const prereleaseEntries = await applyFiltersExcept('includePrerelease')
-    const prereleaseCount = prereleaseEntries.filter((entry) =>
-      entry.tags.includes('release:prerelease'),
-    ).length
-
-    // Count featured
-    const featuredEntries = await applyFiltersExcept('featured')
-    const featuredCount = featuredEntries.filter(
-      (entry) => entry.featured,
-    ).length
-
-    return {
-      entryTypes: entryTypeCounts,
-      libraries: libraryCounts,
-      partners: partnerCounts,
-      releaseLevels: releaseLevelCounts,
-      prerelease: prereleaseCount,
-      featured: featuredCount,
-    }
-  })
-
-// Server function wrapper for searchFeedEntries
-export const searchFeedEntries = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      search: v.string(),
-      limit: v.optional(v.number()),
-    }),
-  )
-  .handler(async ({ data }) => {
-    const limit = data.limit ?? 20
-
-    // Use PostgreSQL full-text search with plainto_tsquery for safe input handling
-    // plainto_tsquery automatically handles special characters and escaping
-    const searchInput = data.search.trim()
-
-    const entries = await db
-      .select()
-      .from(feedEntries)
-      .where(
-        and(
-          eq(feedEntries.showInFeed, true),
-          sql`to_tsvector('english', ${feedEntries.title} || ' ' || ${feedEntries.content} || ' ' || COALESCE(${feedEntries.excerpt}, '')) @@ plainto_tsquery('english', ${searchInput})`,
-        ),
-      )
-      .limit(limit)
-
-    return entries.map(transformFeedEntry)
-  })
-
-// Server function wrapper for getFeedConfig
-export const getFeedConfig = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ key: v.string() }))
-  .handler(async ({ data }) => {
-    const config = await db.query.feedConfig.findFirst({
-      where: eq(feedConfig.key, data.key),
-    })
-
-    return config
-      ? {
-          _id: config.id,
-          key: config.key,
-          value: config.value ?? {},
-          updatedAt: config.updatedAt.getTime(),
-        }
-      : null
-  })
-
-// Server function wrapper for createFeedEntry
-export const createFeedEntry = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      id: v.string(),
-      entryType: entryTypeSchema,
-      title: v.string(),
-      content: v.string(),
-      excerpt: v.optional(v.string()),
-      publishedAt: v.number(),
-      metadata: v.optional(v.any()),
-      libraryIds: v.array(v.string()),
-      partnerIds: v.optional(v.array(v.string())),
-      tags: v.array(v.string()),
-      showInFeed: v.boolean(),
-      featured: v.optional(v.boolean()),
-      autoSynced: v.boolean(),
-    }),
-  )
-  .handler(async ({ data }) => {
-    await requireAdmin()
-
-    // Validate publishedAt
-    const publishedAtValidation = validatePublishedAt(data.publishedAt)
-    if (!publishedAtValidation.valid) {
-      throw new Error(
-        `Invalid publishedAt: ${publishedAtValidation.error}. publishedAt should represent when the content was actually published, not when it was added to the feed.`,
-      )
-    }
-
-    // Check if entry with this ID already exists
-    const existing = await db.query.feedEntries.findFirst({
-      where: eq(feedEntries.entryId, data.id),
-    })
-
-    if (existing) {
-      throw new Error(
-        `Feed entry with ID "${data.id}" already exists. Please try again or edit the existing entry.`,
-      )
-    }
-
-    const [newEntry] = await db
-      .insert(feedEntries)
-      .values({
-        entryId: data.id,
-        entryType: data.entryType,
-        title: data.title,
-        content: data.content,
-        excerpt: data.excerpt,
-        publishedAt: new Date(data.publishedAt),
-        metadata: data.metadata ?? {},
-        libraryIds: data.libraryIds,
-        partnerIds: data.partnerIds ?? [],
-        tags: data.tags,
-        showInFeed: data.showInFeed,
-        featured: data.featured ?? false,
-        autoSynced: data.autoSynced,
-        lastSyncedAt: data.autoSynced ? new Date() : undefined,
-      })
-      .returning()
-
-    return newEntry.entryId
-  })
-
-// Server function wrapper for updateFeedEntry
-export const updateFeedEntry = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      id: v.string(),
-      entryType: v.optional(entryTypeSchema),
-      title: v.optional(v.string()),
-      content: v.optional(v.string()),
-      excerpt: v.optional(v.string()),
-      publishedAt: v.optional(v.number()),
-      metadata: v.optional(v.any()),
-      libraryIds: v.optional(v.array(v.string())),
-      partnerIds: v.optional(v.array(v.string())),
-      tags: v.optional(v.array(v.string())),
-      showInFeed: v.optional(v.boolean()),
-      featured: v.optional(v.boolean()),
-      lastSyncedAt: v.optional(v.number()),
-    }),
-  )
-  .handler(async ({ data }) => {
-    await requireAdmin()
-
-    const entry = await db.query.feedEntries.findFirst({
-      where: eq(feedEntries.entryId, data.id),
-    })
-
-    if (!entry) {
-      throw new Error('Feed entry not found')
-    }
-
-    const updates: {
-      entryType?: EntryType
-      title?: string
-      content?: string
-      excerpt?: string | null
-      publishedAt?: Date
-      metadata?: any
-      libraryIds?: string[]
-      partnerIds?: string[]
-      tags?: string[]
-      showInFeed?: boolean
-      featured?: boolean
-      lastSyncedAt?: Date | null
-      updatedAt: Date
-    } = {
-      updatedAt: new Date(),
-    }
-
-    if (data.entryType !== undefined) updates.entryType = data.entryType
-    if (data.title !== undefined) updates.title = data.title
-    if (data.content !== undefined) updates.content = data.content
-    if (data.excerpt !== undefined) updates.excerpt = data.excerpt || null
-    if (data.publishedAt !== undefined) {
-      const publishedAtValidation = validatePublishedAt(data.publishedAt)
-      if (!publishedAtValidation.valid) {
-        throw new Error(
-          `Invalid publishedAt: ${publishedAtValidation.error}. publishedAt should represent when the content was actually published.`,
-        )
-      }
-      updates.publishedAt = new Date(data.publishedAt)
-    }
-    if (data.metadata !== undefined) updates.metadata = data.metadata
-    if (data.libraryIds !== undefined) updates.libraryIds = data.libraryIds
-    if (data.partnerIds !== undefined) updates.partnerIds = data.partnerIds
-    if (data.tags !== undefined) updates.tags = data.tags
-    if (data.showInFeed !== undefined) updates.showInFeed = data.showInFeed
-    if (data.featured !== undefined) updates.featured = data.featured
-    if (data.lastSyncedAt !== undefined)
-      updates.lastSyncedAt = data.lastSyncedAt
-        ? new Date(data.lastSyncedAt)
-        : null
-
-    await db
-      .update(feedEntries)
-      .set(updates)
-      .where(eq(feedEntries.entryId, data.id))
-
-    return { success: true }
-  })
-
-// Server function wrapper for deleteFeedEntry
-export const deleteFeedEntry = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ id: v.string() }))
-  .handler(async ({ data }) => {
-    await requireAdmin()
-
-    const entry = await db.query.feedEntries.findFirst({
-      where: eq(feedEntries.entryId, data.id),
-    })
-
-    if (!entry) {
-      throw new Error('Feed entry not found')
-    }
-
-    // Soft delete by setting showInFeed to false
-    await db
-      .update(feedEntries)
-      .set({ showInFeed: false, updatedAt: new Date() })
-      .where(eq(feedEntries.entryId, data.id))
-
-    return { success: true }
-  })
-
-// Server function wrapper for toggleFeedEntryVisibility
-export const toggleFeedEntryVisibility = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      id: v.string(),
-      showInFeed: v.boolean(),
-    }),
-  )
-  .handler(async ({ data }) => {
-    await requireAdmin()
-
-    const entry = await db.query.feedEntries.findFirst({
-      where: eq(feedEntries.entryId, data.id),
-    })
-
-    if (!entry) {
-      throw new Error('Feed entry not found')
-    }
-
-    await db
-      .update(feedEntries)
-      .set({ showInFeed: data.showInFeed, updatedAt: new Date() })
-      .where(eq(feedEntries.entryId, data.id))
-
-    return { success: true }
-  })
-
-// Server function wrapper for setFeedEntryFeatured
-export const setFeedEntryFeatured = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      id: v.string(),
-      featured: v.boolean(),
-    }),
-  )
-  .handler(async ({ data }) => {
-    await requireAdmin()
-
-    const entry = await db.query.feedEntries.findFirst({
-      where: eq(feedEntries.entryId, data.id),
-    })
-
-    if (!entry) {
-      throw new Error('Feed entry not found')
-    }
-
-    await db
-      .update(feedEntries)
-      .set({ featured: data.featured, updatedAt: new Date() })
-      .where(eq(feedEntries.entryId, data.id))
-
-    return { success: true }
-  })
-
-// Server function wrapper for setFeedConfig
-export const setFeedConfig = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      key: v.string(),
-      value: v.any(),
-    }),
-  )
-  .handler(async ({ data }) => {
-    // Require admin capability for modifying feed configuration
-    await requireAdmin()
-
-    const existing = await db.query.feedConfig.findFirst({
-      where: eq(feedConfig.key, data.key),
-    })
-
-    if (existing) {
-      await db
-        .update(feedConfig)
-        .set({ value: data.value, updatedAt: new Date() })
-        .where(eq(feedConfig.key, data.key))
-    } else {
-      await db.insert(feedConfig).values({
-        key: data.key,
-        value: data.value,
-      })
-    }
-
-    return { success: true }
-  })
diff --git a/src/utils/feed.server.ts b/src/utils/feed.server.ts
deleted file mode 100644
index c1aca284c..000000000
--- a/src/utils/feed.server.ts
+++ /dev/null
@@ -1,219 +0,0 @@
-import { feedEntries } from '~/db/schema'
-import { eq, and, sql, inArray, gte, lte } from 'drizzle-orm'
-import { getAuthenticatedUser } from './auth.server-helpers'
-import { getEffectiveCapabilities } from './capabilities.server'
-import type { EntryType, ReleaseLevel } from '~/db/schema'
-
-// Helper function to validate admin capability
-export async function requireAdmin() {
-  const user = await getAuthenticatedUser()
-  const effectiveCapabilities = await getEffectiveCapabilities(user.userId)
-  if (!effectiveCapabilities.includes('admin')) {
-    throw new Error('admin capability required')
-  }
-}
-
-// Helper function to get effective publishedAt (for sorting)
-export function getEffectivePublishedAt(entry: {
-  publishedAt: Date
-  createdAt: Date
-}): number {
-  const now = Date.now()
-  const minDate = 0
-  const maxDate = now + 24 * 60 * 60 * 1000
-
-  const publishedAtMs = entry.publishedAt.getTime()
-
-  if (
-    publishedAtMs >= minDate &&
-    publishedAtMs <= maxDate &&
-    !isNaN(publishedAtMs)
-  ) {
-    return publishedAtMs
-  }
-
-  return entry.createdAt.getTime()
-}
-
-// Helper function to validate publishedAt
-export function validatePublishedAt(publishedAt: number): {
-  valid: boolean
-  error?: string
-} {
-  const now = Date.now()
-  const minDate = 0
-  const maxDate = now + 24 * 60 * 60 * 1000
-
-  if (isNaN(publishedAt)) {
-    return { valid: false, error: 'publishedAt must be a valid number' }
-  }
-
-  if (publishedAt < minDate) {
-    return { valid: false, error: 'publishedAt cannot be before Unix epoch' }
-  }
-
-  if (publishedAt > maxDate) {
-    return {
-      valid: false,
-      error: 'publishedAt cannot be more than 24 hours in the future',
-    }
-  }
-
-  return { valid: true }
-}
-
-// Helper function to apply filters to feed entries query
-export function buildFeedQueryConditions(
-  filters: {
-    entryTypes?: EntryType[]
-    libraries?: string[]
-    partners?: string[]
-    tags?: string[]
-    releaseLevels?: ReleaseLevel[]
-    includePrerelease?: boolean
-    featured?: boolean
-    search?: string
-    includeHidden?: boolean
-  },
-  excludeFacet?:
-    | 'entryTypes'
-    | 'libraries'
-    | 'partners'
-    | 'tags'
-    | 'releaseLevels'
-    | 'includePrerelease'
-    | 'featured'
-    | 'search',
-) {
-  const conditions = []
-
-  // Visibility filter
-  if (!filters.includeHidden) {
-    conditions.push(eq(feedEntries.showInFeed, true))
-    conditions.push(gte(feedEntries.publishedAt, new Date(0)))
-    // Exclude future entries (unless admin viewing hidden)
-    conditions.push(lte(feedEntries.publishedAt, new Date()))
-  }
-
-  // Entry type filter
-  if (
-    excludeFacet !== 'entryTypes' &&
-    filters.entryTypes &&
-    filters.entryTypes.length > 0
-  ) {
-    conditions.push(inArray(feedEntries.entryType, filters.entryTypes))
-  }
-
-  // Library filter (array overlap) - use parameterized array
-  if (
-    excludeFacet !== 'libraries' &&
-    filters.libraries &&
-    filters.libraries.length > 0
-  ) {
-    conditions.push(
-      sql`${feedEntries.libraryIds} && ARRAY[${sql.join(
-        filters.libraries.map((l) => sql`${l}`),
-        sql`, `,
-      )}]::text[]`,
-    )
-  }
-
-  // Partner filter (array overlap) - use parameterized array
-  if (
-    excludeFacet !== 'partners' &&
-    filters.partners &&
-    filters.partners.length > 0
-  ) {
-    conditions.push(
-      sql`${feedEntries.partnerIds} && ARRAY[${sql.join(
-        filters.partners.map((p) => sql`${p}`),
-        sql`, `,
-      )}]::text[]`,
-    )
-  }
-
-  // Tag filter (array overlap) - use parameterized array
-  if (excludeFacet !== 'tags' && filters.tags && filters.tags.length > 0) {
-    conditions.push(
-      sql`${feedEntries.tags} && ARRAY[${sql.join(
-        filters.tags.map((t) => sql`${t}`),
-        sql`, `,
-      )}]::text[]`,
-    )
-  }
-
-  // Featured filter
-  if (excludeFacet !== 'featured' && filters.featured !== undefined) {
-    conditions.push(eq(feedEntries.featured, filters.featured))
-  }
-
-  // Search filter (full-text search)
-  if (
-    excludeFacet !== 'search' &&
-    filters.search &&
-    filters.search.length > 0
-  ) {
-    // Use PostgreSQL full-text search with plainto_tsquery for safe input handling
-    // plainto_tsquery automatically handles special characters and escaping
-    const searchInput = filters.search.trim()
-    conditions.push(
-      sql`to_tsvector('english', ${feedEntries.title} || ' ' || ${feedEntries.content} || ' ' || COALESCE(${feedEntries.excerpt}, '')) @@ plainto_tsquery('english', ${searchInput})`,
-    )
-  }
-
-  return conditions.length > 0 ? and(...conditions) : undefined
-}
-
-// Helper function to filter entries by release level (in-memory, complex logic)
-export function filterByReleaseLevel(
-  entries: (typeof feedEntries.$inferSelect)[],
-  releaseLevels?: ReleaseLevel[],
-  includePrerelease?: boolean,
-) {
-  if (releaseLevels === undefined) {
-    // If releaseLevels not specified but includePrerelease is explicitly false, exclude prerelease
-    if (includePrerelease === false) {
-      return entries.filter(
-        (entry) => !entry.tags.includes('release:prerelease'),
-      )
-    }
-    return entries
-  }
-
-  return entries.filter((entry) => {
-    const releaseLevelTags = entry.tags.filter((tag) =>
-      tag.startsWith('release:'),
-    )
-    if (releaseLevelTags.length === 0) {
-      // Not a release entry, include it (unless explicitly filtering releases only)
-      return true
-    }
-    // If releaseLevels is empty array, exclude all releases
-    if (releaseLevels.length === 0) {
-      return false
-    }
-
-    // Check if this is a prerelease
-    const isPrerelease = releaseLevelTags.some(
-      (tag) => tag === 'release:prerelease',
-    )
-
-    // If it's a prerelease, check includePrerelease flag
-    if (isPrerelease && includePrerelease !== true) {
-      return false
-    }
-
-    // Check if the base release level (major/minor/patch) is included
-    const baseReleaseTag = releaseLevelTags.find(
-      (tag) =>
-        tag === 'release:major' ||
-        tag === 'release:minor' ||
-        tag === 'release:patch',
-    )
-    if (!baseReleaseTag) {
-      return false
-    }
-    const level = baseReleaseTag.replace('release:', '') as ReleaseLevel
-    return releaseLevels.includes(level)
-  })
-}
diff --git a/src/utils/feedDefaults.ts b/src/utils/feedDefaults.ts
deleted file mode 100644
index b1da002fe..000000000
--- a/src/utils/feedDefaults.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Shared feed defaults configuration
- * This ensures public and admin feeds stay in sync
- */
-
-export const FEED_DEFAULTS = {
-  // Default to major and minor releases only (exclude patches)
-  releaseLevels: ['major', 'minor'] as const,
-  includePrerelease: undefined as undefined,
-  sources: undefined as undefined,
-  libraries: undefined as undefined,
-  categories: undefined as undefined,
-  partners: undefined as undefined,
-  tags: undefined as undefined,
-  featured: undefined as undefined,
-  search: undefined as undefined,
-  // Pagination defaults
-  page: 1,
-  pageSize: 50,
-  viewMode: 'table' as const,
-} as const
diff --git a/src/utils/gh-sponsor-meta.json b/src/utils/gh-sponsor-meta.json
index aa98dc874..7c8ae3d67 100644
--- a/src/utils/gh-sponsor-meta.json
+++ b/src/utils/gh-sponsor-meta.json
@@ -1,22 +1,46 @@
-[
+[
+  {
+    "login": "netroutingcom",
+    "name": "Netrouting.com",
+    "imageUrl": "https://netrouting.com/wp-content/uploads/2026/04/netrouting-color.png",
+    "linkUrl": "https://netrouting.com/"
+  },
   {
     "login": "wildfee",
     "name": "AI-Text-Humanizer.com",
     "imageUrl": "https://ai-text-humanizer.com/gfx/ai-text-humanizer-com-icon-2025-small.png",
     "linkUrl": "https://ai-text-humanizer.com/?utm_source=tanstack"
   },
+  {
+    "login": "aihumanizer-io",
+    "name": "AI Humanizer",
+    "imageUrl": "https://aihumanizer.io/favicon.ico",
+    "linkUrl": "https://aihumanizer.io"
+  },
   {
     "login": "rewriterprojs",
     "name": "humanizer",
     "imageUrl": "https://superhumanizer.ai/images/logo.png",
     "linkUrl": "https://superhumanizer.ai/"
   },
+  {
+    "login": "humanizerfree",
+    "name": "humanizerfree",
+    "imageUrl": "https://humanizerfree.com/logo-512.png",
+    "linkUrl": "https://humanizerfree.com?utm_source=tanstack"
+  },
   {
     "login": "shtefcs",
     "name": "Automatio AI",
     "imageUrl": "https://i.imgur.com/42qFfkw.png",
     "linkUrl": "https://automatio.ai"
   },
+  {
+    "login": "homeworkaid",
+    "name": "Math Solver",
+    "imageUrl": "https://homeworkaid.ai/favicon.ico",
+    "linkUrl": "https://homeworkaid.ai/ai-math-solver"
+  },
   {
     "login": "sanity-io",
     "linkUrl": "https://www.sanity.io/?utm_source=tanstack"
@@ -24,8 +48,14 @@
   {
     "login": "humanizerpro",
     "name": "AI humanizer",
-    "imageUrl": "https://humanizerpro.ai/favicon.ico",
-    "linkUrl": "https://humanizerpro.ai"
+    "imageUrl": "https://humanizetext.io/logo.svg",
+    "linkUrl": "https://humanizetext.io"
+  },
+  {
+    "login": "GoHumanize-ai",
+    "name": "GO Humanize ai",
+    "imageUrl": "https://gohumanize.ai/favicon.ico",
+    "linkUrl": "https://gohumanize.ai/"
   },
   {
     "login": "codedamn",
@@ -285,7 +315,7 @@
   },
   {
     "login": "__github",
-    "name": "Github",
+    "name": "GitHub",
     "imageUrl": "https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png",
     "linkUrl": "https://github.com?utm_source=tanstack"
   },
@@ -297,9 +327,9 @@
   },
   {
     "login": "yogesharc",
-    "name": "Promptmonitor",
-    "imageUrl": "https://bvatwanklwlvzlcxrcxn.supabase.co/storage/v1/object/public/assets/promptmonitor-icon-brandfill.png",
-    "linkUrl": "https://www.promptmonitor.io/?utm_source=tanstack"
+    "name": "Supalytics",
+    "imageUrl": "https://www.supalytics.co/supalytics-icon-filled.png",
+    "linkUrl": "https://www.supalytics.co/?utm_source=tanstack"
   },
   {
     "login": "TextToHuman",
@@ -312,5 +342,28 @@
     "name": "Detecting-AI",
     "imageUrl": "https://detecting-ai.com/images/favicon.png",
     "linkUrl": "https://detecting-ai.com/"
+  },
+  {
+    "login": "fingerprintjs",
+    "name": "Fingerprint",
+    "imageUrl": "https://fingerprint.com/img/uploads/fingerprint_white_on_orange.png",
+    "linkUrl": "https://fingerprint.com?utm_source=tanstack"
+  },
+  {
+    "login": "aeriusventilation",
+    "name": "Aerius Ventilation",
+    "linkUrl": "https://aerius.se/?utm_source=tanstack"
+  },
+  {
+    "login": "forminit",
+    "name": "Forminit",
+    "imageUrl": "https://avatars.githubusercontent.com/u/41009912?v=4",
+    "linkUrl": "https://forminit.com/?utm_source=tanstack"
+  },
+  {
+    "login": "humanizeaitext-io",
+    "name": "Humanize AI Text",
+    "imageUrl": "https://humanizeaitext.io/icon.svg",
+    "linkUrl": "https://humanizeaitext.io/"
   }
 ]
diff --git a/src/utils/github-content-cache.server.ts b/src/utils/github-content-cache.server.ts
new file mode 100644
index 000000000..03129f5ba
--- /dev/null
+++ b/src/utils/github-content-cache.server.ts
@@ -0,0 +1,1529 @@
+import {
+  getBlobStorage,
+  getBlobStorageCache,
+  type BlobStorage,
+  type BlobStorageCache,
+  type BlobStorageListedObject,
+} from '~/server/runtime/blob-storage.server'
+import { scheduleHostRuntimeTask } from '~/server/runtime/host.server'
+import { isValidRepoPath, MAX_REPO_PATH_LENGTH } from './repo-path'
+
+const POSITIVE_STALE_MS = 5 * 60 * 1000
+const NEGATIVE_STALE_MS = 15 * 60 * 1000
+
+const DEFAULT_PRUNE_MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000
+const DEFAULT_NEGATIVE_PRUNE_MAX_AGE_MS = 24 * 60 * 60 * 1000
+
+const GITHUB_CONTENT_BLOB_STORAGE = 'githubContentCache'
+const STORED_CONTENT_TYPE = 'application/json; charset=utf-8'
+const EPOCH_ISO = new Date(0).toISOString()
+const MAX_MEMORY_CACHE_ENTRIES = 300
+
+// Internal sentinel path used for recursive repository tree metadata. Allowed
+// alongside normal repo paths.
+const SENTINEL_PATHS = new Set(['__github_recursive_tree__'])
+
+const REPO_PATTERN = /^[a-zA-Z0-9._-]+\/[a-zA-Z0-9._-]+$/
+// Git refs allow a fairly wide character set, but we restrict to the subset
+// we actually publish from (branch names + tags). No spaces, no shell
+// metacharacters, no path traversal.
+const GIT_REF_PATTERN = /^[a-zA-Z0-9._/-]+$/
+const ARTIFACT_ID_PATTERN = /^[a-zA-Z0-9._:-]+$/
+
+const MAX_REPO_LEN = 100
+const MAX_GIT_REF_LEN = 100
+const MAX_ARTIFACT_TYPE_LEN = 50
+const MAX_ARTIFACT_KEY_LEN = 255
+
+type ContentKind = 'dir' | 'file'
+type CachedValue<T> = T | null | undefined
+
+type GithubContentKey = {
+  contentKind: ContentKind
+  gitRef: string
+  path: string
+  repo: string
+}
+
+type GithubContentRecord = GithubContentKey & {
+  isPresent: boolean
+  jsonContent?: unknown
+  staleAt: Date
+  textContent?: string
+  updatedAt: Date
+}
+
+type DocsArtifactKey = {
+  artifactKey: string
+  artifactType: string
+  docsRoot: string
+  gitRef: string
+  repo: string
+}
+
+type DocsArtifactRecord = DocsArtifactKey & {
+  payload: unknown
+  staleAt: Date
+  updatedAt: Date
+}
+
+type StoredBlob = {
+  metadata: Record<string, string>
+  text: string
+  value: unknown
+}
+
+type PruneResult = {
+  cutoff: Date
+  docsArtifactDeleted: number
+  githubContentDeleted: number
+  githubContentNegativesDeleted: number
+  negativeCutoff: Date
+}
+
+export type DocsCacheRepoStats = {
+  artifactEntries: number
+  cachedRefCount: number
+  contentEntries: number
+  lastUpdatedAt: string | null
+  repo: string
+  staleArtifactEntries: number
+  staleContentEntries: number
+  staleEntries: number
+  totalEntries: number
+}
+
+type RepoStatsAccumulator = {
+  artifactEntries: number
+  contentEntries: number
+  lastUpdatedAt: Date | null
+  refs: Set<string>
+  repo: string
+  staleArtifactEntries: number
+  staleContentEntries: number
+}
+
+type MemoryCacheEntry = {
+  cache: 'artifact' | 'content'
+  key: string
+  updatedAt: Date
+}
+
+type CacheBackend = {
+  getDocsArtifact: (
+    key: DocsArtifactKey,
+  ) => Promise<DocsArtifactRecord | undefined>
+  getGitHubContent: (
+    key: GithubContentKey,
+  ) => Promise<GithubContentRecord | undefined>
+  listRepoStats: () => Promise<Array<DocsCacheRepoStats>>
+  markDocsArtifactsStale: (opts: {
+    gitRef?: string
+    repo?: string
+  }) => Promise<number>
+  markGitHubContentStale: (opts: {
+    gitRef?: string
+    repo?: string
+  }) => Promise<number>
+  pruneStaleCacheRows: (opts: {
+    maxAgeMs?: number
+    negativeMaxAgeMs?: number
+  }) => Promise<PruneResult>
+  putDocsArtifact: (record: DocsArtifactRecord) => Promise<void>
+  putGitHubContent: (record: GithubContentRecord) => Promise<void>
+}
+
+export class InvalidCacheKeyError extends Error {
+  constructor(field: string, value: string) {
+    super(
+      `Refusing to cache: invalid ${field}=${JSON.stringify(value).slice(0, 80)}`,
+    )
+    this.name = 'InvalidCacheKeyError'
+  }
+}
+
+const pendingRefreshes = new Map<string, Promise<void>>()
+const memoryGitHubContent = new Map<string, GithubContentRecord>()
+const memoryDocsArtifacts = new Map<string, DocsArtifactRecord>()
+let blobBackend: CacheBackend | undefined
+
+function assertValidRepo(repo: string) {
+  if (
+    repo.length === 0 ||
+    repo.length > MAX_REPO_LEN ||
+    !REPO_PATTERN.test(repo)
+  ) {
+    throw new InvalidCacheKeyError('repo', repo)
+  }
+}
+
+function assertValidGitRef(gitRef: string) {
+  if (
+    gitRef.length === 0 ||
+    gitRef.length > MAX_GIT_REF_LEN ||
+    !GIT_REF_PATTERN.test(gitRef) ||
+    gitRef.includes('..') ||
+    gitRef.startsWith('/') ||
+    gitRef.endsWith('/') ||
+    gitRef.includes('//')
+  ) {
+    throw new InvalidCacheKeyError('gitRef', gitRef)
+  }
+}
+
+function assertValidContentPath(path: string) {
+  if (path === '' || SENTINEL_PATHS.has(path)) {
+    return
+  }
+
+  if (path.length > MAX_REPO_PATH_LENGTH) {
+    throw new InvalidCacheKeyError('path', path)
+  }
+
+  if (!isValidRepoPath(path)) {
+    throw new InvalidCacheKeyError('path', path)
+  }
+}
+
+function assertValidArtifactId(
+  field: string,
+  value: string,
+  maxLength: number,
+) {
+  if (
+    value.length === 0 ||
+    value.length > maxLength ||
+    !ARTIFACT_ID_PATTERN.test(value)
+  ) {
+    throw new InvalidCacheKeyError(field, value)
+  }
+}
+
+function assertValidGithubContentKey(opts: GithubContentKey) {
+  assertValidRepo(opts.repo)
+  assertValidGitRef(opts.gitRef)
+  assertValidContentPath(opts.path)
+}
+
+function assertValidDocsArtifactKey(opts: DocsArtifactKey) {
+  assertValidRepo(opts.repo)
+  assertValidGitRef(opts.gitRef)
+  assertValidContentPath(opts.docsRoot)
+  assertValidArtifactId(
+    'artifactType',
+    opts.artifactType,
+    MAX_ARTIFACT_TYPE_LEN,
+  )
+  assertValidArtifactId('artifactKey', opts.artifactKey, MAX_ARTIFACT_KEY_LEN)
+}
+
+async function withPendingRefresh<T>(key: string, fn: () => Promise<T>) {
+  const pending = pendingRefreshes.get(key)
+
+  if (pending) {
+    await pending
+    return fn()
+  }
+
+  const promise = fn()
+
+  pendingRefreshes.set(
+    key,
+    promise.then(
+      () => undefined,
+      () => undefined,
+    ),
+  )
+
+  try {
+    return await promise
+  } finally {
+    pendingRefreshes.delete(key)
+  }
+}
+
+function createFreshnessWindow(isPresent: boolean) {
+  const now = Date.now()
+  const staleFor = isPresent ? POSITIVE_STALE_MS : NEGATIVE_STALE_MS
+
+  return {
+    staleAt: new Date(now + staleFor),
+  }
+}
+
+function isFresh(staleAt: Date) {
+  return staleAt.getTime() > Date.now()
+}
+
+// markGitHubContentStale / markDocsArtifactsStale set staleAt to the epoch
+// (new Date(0)) as a sentinel for "forcibly invalidated": an admin clicked
+// the purge button or a push webhook fired. The object stays around so refresh
+// paths can still fall back to it if GitHub is unreachable, and docs artifacts
+// can serve it while scheduling a background rebuild when the runtime supports
+// waitUntil.
+function isForciblyStale(staleAt: Date) {
+  return staleAt.getTime() <= 0
+}
+
+function encodeKeySegment(value: string) {
+  return encodeURIComponent(value)
+}
+
+function getGitHubContentBlobKey(opts: GithubContentKey) {
+  const prefix = opts.contentKind === 'file' ? 'github:file' : 'github:dir'
+  return `${prefix}/${opts.repo}/${encodeKeySegment(opts.gitRef)}/${opts.path}`
+}
+
+function getDocsArtifactBlobKey(opts: DocsArtifactKey) {
+  return `docs-artifact/${opts.repo}/${encodeKeySegment(opts.gitRef)}/${opts.docsRoot}/${encodeKeySegment(opts.artifactType)}/${encodeKeySegment(opts.artifactKey)}`
+}
+
+function getGitHubContentPrefixes(opts: { gitRef?: string; repo?: string }) {
+  const kinds: Array<ContentKind> = ['file', 'dir']
+  const prefixes = kinds.map((contentKind) =>
+    contentKind === 'file' ? 'github:file' : 'github:dir',
+  )
+  const repo = opts.repo
+  const gitRef = opts.gitRef
+
+  if (repo && gitRef) {
+    return prefixes.map(
+      (prefix) => `${prefix}/${repo}/${encodeKeySegment(gitRef)}/`,
+    )
+  }
+
+  if (repo) {
+    return prefixes.map((prefix) => `${prefix}/${repo}/`)
+  }
+
+  return prefixes.map((prefix) => `${prefix}/`)
+}
+
+function getDocsArtifactPrefixes(opts: { gitRef?: string; repo?: string }) {
+  if (opts.repo && opts.gitRef) {
+    return [`docs-artifact/${opts.repo}/${encodeKeySegment(opts.gitRef)}/`]
+  }
+
+  if (opts.repo) {
+    return [`docs-artifact/${opts.repo}/`]
+  }
+
+  return ['docs-artifact/']
+}
+
+function createStoredText(value: unknown) {
+  if (value === undefined) {
+    throw new Error('Cannot cache undefined GitHub content')
+  }
+
+  return JSON.stringify({
+    value,
+  })
+}
+
+function readStoredValue(text: string) {
+  let parsed: unknown
+
+  try {
+    parsed = JSON.parse(text)
+  } catch {
+    return undefined
+  }
+
+  if (typeof parsed !== 'object' || parsed === null || !('value' in parsed)) {
+    return undefined
+  }
+
+  return parsed.value
+}
+
+function readMetadataString(
+  metadata: Record<string, string> | undefined,
+  key: string,
+) {
+  const value = metadata?.[key]
+  return typeof value === 'string' ? value : undefined
+}
+
+function readMetadataBoolean(
+  metadata: Record<string, string> | undefined,
+  key: string,
+) {
+  const value = readMetadataString(metadata, key)
+
+  if (value === 'true') {
+    return true
+  }
+
+  if (value === 'false') {
+    return false
+  }
+
+  return undefined
+}
+
+function readMetadataDate(
+  metadata: Record<string, string> | undefined,
+  key: string,
+) {
+  const value = readMetadataString(metadata, key)
+
+  if (!value) {
+    return undefined
+  }
+
+  const date = new Date(value)
+
+  return Number.isNaN(date.getTime()) ? undefined : date
+}
+
+function readMetadataContentKind(
+  metadata: Record<string, string> | undefined,
+): ContentKind | undefined {
+  const value = readMetadataString(metadata, 'contentKind')
+
+  if (value === 'dir') {
+    return 'dir'
+  }
+
+  if (value === 'file') {
+    return 'file'
+  }
+
+  return undefined
+}
+
+function getRequiredFileContent(value: unknown) {
+  if (typeof value === 'string') {
+    return value
+  }
+
+  throw new Error('Cannot cache non-string GitHub file content')
+}
+
+function getGithubContentMetadata(record: GithubContentRecord) {
+  return {
+    contentKind: record.contentKind,
+    gitRef: record.gitRef,
+    isPresent: record.isPresent ? 'true' : 'false',
+    path: record.path,
+    repo: record.repo,
+    staleAt: record.staleAt.toISOString(),
+    updatedAt: record.updatedAt.toISOString(),
+  }
+}
+
+function getDocsArtifactMetadata(record: DocsArtifactRecord) {
+  return {
+    artifactKey: record.artifactKey,
+    artifactType: record.artifactType,
+    docsRoot: record.docsRoot,
+    gitRef: record.gitRef,
+    repo: record.repo,
+    staleAt: record.staleAt.toISOString(),
+    updatedAt: record.updatedAt.toISOString(),
+  }
+}
+
+function inferGithubContentMetadataFromBlobKey(key: string, uploaded?: Date) {
+  const segments = key.split('/')
+  const prefix = segments[0]
+  const contentKind =
+    prefix === 'github:file' ? 'file' : prefix === 'github:dir' ? 'dir' : null
+
+  if (!contentKind || segments.length < 5) {
+    return undefined
+  }
+
+  const repo = `${segments[1]}/${segments[2]}`
+  const gitRef = decodeURIComponent(segments[3])
+  const path = segments.slice(4).join('/')
+  const updatedAt = uploaded ?? new Date()
+  const staleAt = new Date(updatedAt.getTime() + POSITIVE_STALE_MS)
+
+  return {
+    contentKind,
+    gitRef,
+    isPresent: 'true',
+    path,
+    repo,
+    staleAt: staleAt.toISOString(),
+    updatedAt: updatedAt.toISOString(),
+  }
+}
+
+function getStoredBlob(opts: {
+  key?: string
+  metadata: Record<string, string> | undefined
+  text: string
+  uploaded?: Date
+}) {
+  const value = readStoredValue(opts.text)
+  const storedMetadata =
+    opts.metadata && Object.keys(opts.metadata).length > 0
+      ? opts.metadata
+      : undefined
+  const metadata =
+    storedMetadata ??
+    (opts.key
+      ? inferGithubContentMetadataFromBlobKey(opts.key, opts.uploaded)
+      : undefined)
+
+  if (value === undefined || !metadata) {
+    return undefined
+  }
+
+  return {
+    metadata,
+    text: opts.text,
+    value,
+  }
+}
+
+function readGithubContentRecord(stored: StoredBlob) {
+  const repo = readMetadataString(stored.metadata, 'repo')
+  const gitRef = readMetadataString(stored.metadata, 'gitRef')
+  const path = readMetadataString(stored.metadata, 'path')
+  const contentKind = readMetadataContentKind(stored.metadata)
+  const isPresent = readMetadataBoolean(stored.metadata, 'isPresent')
+  const staleAt = readMetadataDate(stored.metadata, 'staleAt')
+  const updatedAt = readMetadataDate(stored.metadata, 'updatedAt')
+
+  if (
+    !repo ||
+    !gitRef ||
+    path === undefined ||
+    !contentKind ||
+    isPresent === undefined ||
+    !staleAt ||
+    !updatedAt
+  ) {
+    return undefined
+  }
+
+  return {
+    contentKind,
+    gitRef,
+    isPresent,
+    jsonContent: contentKind === 'dir' && isPresent ? stored.value : undefined,
+    path,
+    repo,
+    staleAt,
+    textContent:
+      contentKind === 'file' && isPresent && typeof stored.value === 'string'
+        ? stored.value
+        : undefined,
+    updatedAt,
+  }
+}
+
+function isNegativeGithubDirectoryBlob(stored: StoredBlob) {
+  return (
+    readMetadataContentKind(stored.metadata) === 'dir' &&
+    readMetadataBoolean(stored.metadata, 'isPresent') === false
+  )
+}
+
+function readDocsArtifactRecord(stored: StoredBlob) {
+  const repo = readMetadataString(stored.metadata, 'repo')
+  const gitRef = readMetadataString(stored.metadata, 'gitRef')
+  const docsRoot = readMetadataString(stored.metadata, 'docsRoot')
+  const artifactType = readMetadataString(stored.metadata, 'artifactType')
+  const artifactKey = readMetadataString(stored.metadata, 'artifactKey')
+  const staleAt = readMetadataDate(stored.metadata, 'staleAt')
+  const updatedAt = readMetadataDate(stored.metadata, 'updatedAt')
+
+  if (
+    !repo ||
+    !gitRef ||
+    docsRoot === undefined ||
+    !artifactType ||
+    !artifactKey ||
+    !staleAt ||
+    !updatedAt
+  ) {
+    return undefined
+  }
+
+  return {
+    artifactKey,
+    artifactType,
+    docsRoot,
+    gitRef,
+    payload: stored.value,
+    repo,
+    staleAt,
+    updatedAt,
+  }
+}
+
+async function readBlob(
+  storage: BlobStorage,
+  cache: BlobStorageCache | undefined,
+  key: string,
+) {
+  const cached = await cache?.get(key)
+  const cachedBlob = cached
+    ? getStoredBlob({ key, metadata: cached.metadata, text: cached.text })
+    : undefined
+
+  if (cachedBlob && !isNegativeGithubDirectoryBlob(cachedBlob)) {
+    return cachedBlob
+  }
+
+  const object = await storage.get(key)
+
+  if (!object) {
+    return undefined
+  }
+
+  const text = await object.text()
+  const stored = getStoredBlob({
+    key,
+    metadata: object.metadata,
+    text,
+    uploaded: object.uploaded,
+  })
+
+  if (!stored) {
+    return undefined
+  }
+
+  await writeBlobCache(cache, key, {
+    metadata: stored.metadata,
+    text: stored.text,
+  })
+
+  return stored
+}
+
+async function writeBlobCache(
+  cache: BlobStorageCache | undefined,
+  key: string,
+  entry: {
+    metadata: Record<string, string>
+    text: string
+  },
+) {
+  try {
+    await cache?.put(key, entry)
+  } catch {
+    // The runtime front cache is opportunistic.
+  }
+}
+
+async function deleteBlobCache(
+  cache: BlobStorageCache | undefined,
+  key: string,
+) {
+  try {
+    await cache?.delete(key)
+  } catch {
+    // The durable blob store remains authoritative.
+  }
+}
+
+function pruneMemoryCache() {
+  const totalEntries = memoryGitHubContent.size + memoryDocsArtifacts.size
+
+  if (totalEntries <= MAX_MEMORY_CACHE_ENTRIES) {
+    return
+  }
+
+  const entries: Array<MemoryCacheEntry> = [
+    ...Array.from(memoryGitHubContent.entries()).map(
+      ([key, record]): MemoryCacheEntry => ({
+        cache: 'content',
+        key,
+        updatedAt: record.updatedAt,
+      }),
+    ),
+    ...Array.from(memoryDocsArtifacts.entries()).map(
+      ([key, record]): MemoryCacheEntry => ({
+        cache: 'artifact',
+        key,
+        updatedAt: record.updatedAt,
+      }),
+    ),
+  ].sort((a, b) => a.updatedAt.getTime() - b.updatedAt.getTime())
+
+  for (const entry of entries.slice(
+    0,
+    totalEntries - MAX_MEMORY_CACHE_ENTRIES,
+  )) {
+    if (entry.cache === 'content') {
+      memoryGitHubContent.delete(entry.key)
+    } else {
+      memoryDocsArtifacts.delete(entry.key)
+    }
+  }
+}
+
+function readStoredTextValue(row: GithubContentRecord | undefined) {
+  if (!row) {
+    return undefined
+  }
+
+  if (!row.isPresent) {
+    return null
+  }
+
+  return typeof row.textContent === 'string' ? row.textContent : undefined
+}
+
+function readStoredJsonValue<T>(
+  row: GithubContentRecord | undefined,
+  isValue: (value: unknown) => value is T,
+) {
+  if (!row) {
+    return undefined
+  }
+
+  if (!row.isPresent) {
+    return null
+  }
+
+  return isValue(row.jsonContent) ? row.jsonContent : undefined
+}
+
+function canUseStoredGithubContentValue<T>(
+  contentKind: ContentKind,
+  value: CachedValue<T>,
+): value is T | null {
+  if (value === undefined) {
+    return false
+  }
+
+  // Directory metadata is derived from the GitHub API. A transient API failure
+  // used to poison examples with fresh null entries, hiding the file explorer.
+  // Revalidate those negative JSON entries on the next read-through.
+  return !(contentKind === 'dir' && value === null)
+}
+
+function metadataMatches(
+  metadata: Record<string, string> | undefined,
+  opts: {
+    gitRef?: string
+    repo?: string
+  },
+) {
+  if (!metadata) {
+    return false
+  }
+
+  if (opts.repo && readMetadataString(metadata, 'repo') !== opts.repo) {
+    return false
+  }
+
+  if (opts.gitRef && readMetadataString(metadata, 'gitRef') !== opts.gitRef) {
+    return false
+  }
+
+  return true
+}
+
+async function listBlobObjects(storage: BlobStorage, prefix: string) {
+  const objects: Array<BlobStorageListedObject> = []
+  let cursor: string | undefined
+
+  do {
+    const result = await storage.list({
+      cursor,
+      limit: 1000,
+      prefix,
+    })
+
+    objects.push(...result.objects)
+    cursor = result.truncated ? result.cursor : undefined
+  } while (cursor)
+
+  return objects
+}
+
+async function getListedObjectMetadata(
+  storage: BlobStorage,
+  object: BlobStorageListedObject,
+) {
+  if (object.metadata && Object.keys(object.metadata).length > 0) {
+    return object.metadata
+  }
+
+  const stored = await readBlob(storage, undefined, object.key)
+  return stored?.metadata
+}
+
+async function deleteBlobKeys(
+  storage: BlobStorage,
+  cache: BlobStorageCache | undefined,
+  keys: Array<string>,
+) {
+  const chunkSize = 1000
+
+  for (let index = 0; index < keys.length; index += chunkSize) {
+    const chunk = keys.slice(index, index + chunkSize)
+    await storage.delete(chunk)
+
+    await Promise.all(chunk.map((key) => deleteBlobCache(cache, key)))
+  }
+}
+
+function getStatsAccumulator(
+  statsByRepo: Map<string, RepoStatsAccumulator>,
+  repo: string,
+) {
+  const existing = statsByRepo.get(repo)
+
+  if (existing) {
+    return existing
+  }
+
+  const created = {
+    artifactEntries: 0,
+    contentEntries: 0,
+    lastUpdatedAt: null,
+    refs: new Set<string>(),
+    repo,
+    staleArtifactEntries: 0,
+    staleContentEntries: 0,
+  }
+
+  statsByRepo.set(repo, created)
+  return created
+}
+
+function updateLastUpdatedAt(
+  accumulator: RepoStatsAccumulator,
+  updatedAt: Date,
+) {
+  if (
+    !accumulator.lastUpdatedAt ||
+    updatedAt.getTime() > accumulator.lastUpdatedAt.getTime()
+  ) {
+    accumulator.lastUpdatedAt = updatedAt
+  }
+}
+
+function addGithubContentStats(
+  statsByRepo: Map<string, RepoStatsAccumulator>,
+  record: Pick<
+    GithubContentRecord,
+    'gitRef' | 'repo' | 'staleAt' | 'updatedAt'
+  >,
+) {
+  const accumulator = getStatsAccumulator(statsByRepo, record.repo)
+  accumulator.contentEntries += 1
+  accumulator.refs.add(record.gitRef)
+
+  if (!isFresh(record.staleAt)) {
+    accumulator.staleContentEntries += 1
+  }
+
+  updateLastUpdatedAt(accumulator, record.updatedAt)
+}
+
+function addDocsArtifactStats(
+  statsByRepo: Map<string, RepoStatsAccumulator>,
+  record: Pick<DocsArtifactRecord, 'gitRef' | 'repo' | 'staleAt' | 'updatedAt'>,
+) {
+  const accumulator = getStatsAccumulator(statsByRepo, record.repo)
+  accumulator.artifactEntries += 1
+  accumulator.refs.add(record.gitRef)
+
+  if (!isFresh(record.staleAt)) {
+    accumulator.staleArtifactEntries += 1
+  }
+
+  updateLastUpdatedAt(accumulator, record.updatedAt)
+}
+
+function finalizeRepoStats(
+  statsByRepo: Map<string, RepoStatsAccumulator>,
+): Array<DocsCacheRepoStats> {
+  return Array.from(statsByRepo.values())
+    .map((repo) => {
+      const totalEntries = repo.contentEntries + repo.artifactEntries
+      const staleEntries = repo.staleContentEntries + repo.staleArtifactEntries
+
+      return {
+        artifactEntries: repo.artifactEntries,
+        cachedRefCount: repo.refs.size,
+        contentEntries: repo.contentEntries,
+        lastUpdatedAt: repo.lastUpdatedAt?.toISOString() ?? null,
+        repo: repo.repo,
+        staleArtifactEntries: repo.staleArtifactEntries,
+        staleContentEntries: repo.staleContentEntries,
+        staleEntries,
+        totalEntries,
+      }
+    })
+    .sort(
+      (a, b) => b.totalEntries - a.totalEntries || a.repo.localeCompare(b.repo),
+    )
+}
+
+function readGithubContentStatsFromMetadata(
+  metadata: Record<string, string> | undefined,
+) {
+  const repo = readMetadataString(metadata, 'repo')
+  const gitRef = readMetadataString(metadata, 'gitRef')
+  const staleAt = readMetadataDate(metadata, 'staleAt')
+  const updatedAt = readMetadataDate(metadata, 'updatedAt')
+  const isPresent = readMetadataBoolean(metadata, 'isPresent')
+
+  if (!repo || !gitRef || !staleAt || !updatedAt || isPresent === undefined) {
+    return undefined
+  }
+
+  return {
+    gitRef,
+    isPresent,
+    repo,
+    staleAt,
+    updatedAt,
+  }
+}
+
+function readDocsArtifactStatsFromMetadata(
+  metadata: Record<string, string> | undefined,
+) {
+  const repo = readMetadataString(metadata, 'repo')
+  const gitRef = readMetadataString(metadata, 'gitRef')
+  const staleAt = readMetadataDate(metadata, 'staleAt')
+  const updatedAt = readMetadataDate(metadata, 'updatedAt')
+
+  if (!repo || !gitRef || !staleAt || !updatedAt) {
+    return undefined
+  }
+
+  return {
+    gitRef,
+    repo,
+    staleAt,
+    updatedAt,
+  }
+}
+
+function createMemoryBackend(): CacheBackend {
+  return {
+    async getDocsArtifact(key) {
+      return memoryDocsArtifacts.get(getDocsArtifactBlobKey(key))
+    },
+    async getGitHubContent(key) {
+      return memoryGitHubContent.get(getGitHubContentBlobKey(key))
+    },
+    async listRepoStats() {
+      const statsByRepo = new Map<string, RepoStatsAccumulator>()
+
+      for (const record of memoryGitHubContent.values()) {
+        addGithubContentStats(statsByRepo, record)
+      }
+
+      for (const record of memoryDocsArtifacts.values()) {
+        addDocsArtifactStats(statsByRepo, record)
+      }
+
+      return finalizeRepoStats(statsByRepo)
+    },
+    async markDocsArtifactsStale(opts) {
+      let count = 0
+
+      for (const [key, record] of memoryDocsArtifacts.entries()) {
+        if (!metadataMatches(getDocsArtifactMetadata(record), opts)) {
+          continue
+        }
+
+        memoryDocsArtifacts.set(key, {
+          ...record,
+          staleAt: new Date(0),
+        })
+        count += 1
+      }
+
+      return count
+    },
+    async markGitHubContentStale(opts) {
+      let count = 0
+
+      for (const [key, record] of memoryGitHubContent.entries()) {
+        if (!metadataMatches(getGithubContentMetadata(record), opts)) {
+          continue
+        }
+
+        memoryGitHubContent.set(key, {
+          ...record,
+          staleAt: new Date(0),
+        })
+        count += 1
+      }
+
+      return count
+    },
+    async pruneStaleCacheRows(opts) {
+      const maxAgeMs = opts.maxAgeMs ?? DEFAULT_PRUNE_MAX_AGE_MS
+      const negativeMaxAgeMs =
+        opts.negativeMaxAgeMs ?? DEFAULT_NEGATIVE_PRUNE_MAX_AGE_MS
+      const cutoff = new Date(Date.now() - maxAgeMs)
+      const negativeCutoff = new Date(Date.now() - negativeMaxAgeMs)
+      let githubContentDeleted = 0
+      let githubContentNegativesDeleted = 0
+      let docsArtifactDeleted = 0
+
+      for (const [key, record] of memoryGitHubContent.entries()) {
+        const shouldDeleteByAge = record.updatedAt < cutoff
+        const shouldDeleteNegative =
+          !record.isPresent && record.updatedAt < negativeCutoff
+
+        if (!shouldDeleteByAge && !shouldDeleteNegative) {
+          continue
+        }
+
+        memoryGitHubContent.delete(key)
+        githubContentDeleted += 1
+
+        if (shouldDeleteNegative) {
+          githubContentNegativesDeleted += 1
+        }
+      }
+
+      for (const [key, record] of memoryDocsArtifacts.entries()) {
+        if (record.updatedAt >= cutoff) {
+          continue
+        }
+
+        memoryDocsArtifacts.delete(key)
+        docsArtifactDeleted += 1
+      }
+
+      return {
+        cutoff,
+        docsArtifactDeleted,
+        githubContentDeleted,
+        githubContentNegativesDeleted,
+        negativeCutoff,
+      }
+    },
+    async putDocsArtifact(record) {
+      memoryDocsArtifacts.set(getDocsArtifactBlobKey(record), record)
+      pruneMemoryCache()
+    },
+    async putGitHubContent(record) {
+      memoryGitHubContent.set(getGitHubContentBlobKey(record), record)
+      pruneMemoryCache()
+    },
+  }
+}
+
+function createBlobBackend(
+  storage: BlobStorage,
+  cache: BlobStorageCache | undefined,
+): CacheBackend {
+  return {
+    async getDocsArtifact(key) {
+      const stored = await readBlob(storage, cache, getDocsArtifactBlobKey(key))
+      return stored ? readDocsArtifactRecord(stored) : undefined
+    },
+    async getGitHubContent(key) {
+      const stored = await readBlob(
+        storage,
+        cache,
+        getGitHubContentBlobKey(key),
+      )
+      return stored ? readGithubContentRecord(stored) : undefined
+    },
+    async listRepoStats() {
+      const statsByRepo = new Map<string, RepoStatsAccumulator>()
+
+      for (const prefix of getGitHubContentPrefixes({})) {
+        const objects = await listBlobObjects(storage, prefix)
+
+        for (const object of objects) {
+          const metadata = await getListedObjectMetadata(storage, object)
+          const stats = readGithubContentStatsFromMetadata(metadata)
+
+          if (stats) {
+            addGithubContentStats(statsByRepo, stats)
+          }
+        }
+      }
+
+      for (const object of await listBlobObjects(storage, 'docs-artifact/')) {
+        const metadata = await getListedObjectMetadata(storage, object)
+        const stats = readDocsArtifactStatsFromMetadata(metadata)
+
+        if (stats) {
+          addDocsArtifactStats(statsByRepo, stats)
+        }
+      }
+
+      return finalizeRepoStats(statsByRepo)
+    },
+    async markDocsArtifactsStale(opts) {
+      return markBlobObjectsStale({
+        cache,
+        matches: (metadata) => metadataMatches(metadata, opts),
+        prefixes: getDocsArtifactPrefixes(opts),
+        storage,
+      })
+    },
+    async markGitHubContentStale(opts) {
+      return markBlobObjectsStale({
+        cache,
+        matches: (metadata) => metadataMatches(metadata, opts),
+        prefixes: getGitHubContentPrefixes(opts),
+        storage,
+      })
+    },
+    async pruneStaleCacheRows(opts) {
+      const maxAgeMs = opts.maxAgeMs ?? DEFAULT_PRUNE_MAX_AGE_MS
+      const negativeMaxAgeMs =
+        opts.negativeMaxAgeMs ?? DEFAULT_NEGATIVE_PRUNE_MAX_AGE_MS
+      const cutoff = new Date(Date.now() - maxAgeMs)
+      const negativeCutoff = new Date(Date.now() - negativeMaxAgeMs)
+      const githubContentDeleteKeys = new Set<string>()
+      const githubContentNegativeDeleteKeys = new Set<string>()
+      const docsArtifactDeleteKeys = new Set<string>()
+
+      for (const prefix of getGitHubContentPrefixes({})) {
+        const objects = await listBlobObjects(storage, prefix)
+
+        for (const object of objects) {
+          const metadata = await getListedObjectMetadata(storage, object)
+          const stats = readGithubContentStatsFromMetadata(metadata)
+
+          if (!stats) {
+            continue
+          }
+
+          if (stats.updatedAt < cutoff) {
+            githubContentDeleteKeys.add(object.key)
+          }
+
+          if (!stats.isPresent && stats.updatedAt < negativeCutoff) {
+            githubContentDeleteKeys.add(object.key)
+            githubContentNegativeDeleteKeys.add(object.key)
+          }
+        }
+      }
+
+      for (const object of await listBlobObjects(storage, 'docs-artifact/')) {
+        const metadata = await getListedObjectMetadata(storage, object)
+        const stats = readDocsArtifactStatsFromMetadata(metadata)
+
+        if (stats && stats.updatedAt < cutoff) {
+          docsArtifactDeleteKeys.add(object.key)
+        }
+      }
+
+      await Promise.all([
+        deleteBlobKeys(storage, cache, Array.from(githubContentDeleteKeys)),
+        deleteBlobKeys(storage, cache, Array.from(docsArtifactDeleteKeys)),
+      ])
+
+      return {
+        cutoff,
+        docsArtifactDeleted: docsArtifactDeleteKeys.size,
+        githubContentDeleted: githubContentDeleteKeys.size,
+        githubContentNegativesDeleted: githubContentNegativeDeleteKeys.size,
+        negativeCutoff,
+      }
+    },
+    async putDocsArtifact(record) {
+      const key = getDocsArtifactBlobKey(record)
+      const metadata = getDocsArtifactMetadata(record)
+      const text = createStoredText(record.payload)
+
+      await storage.put(key, text, {
+        contentType: STORED_CONTENT_TYPE,
+        metadata,
+      })
+      await writeBlobCache(cache, key, { metadata, text })
+    },
+    async putGitHubContent(record) {
+      const key = getGitHubContentBlobKey(record)
+      const metadata = getGithubContentMetadata(record)
+      const text = createStoredText(
+        record.isPresent
+          ? record.contentKind === 'file'
+            ? record.textContent
+            : record.jsonContent
+          : null,
+      )
+
+      await storage.put(key, text, {
+        contentType: STORED_CONTENT_TYPE,
+        metadata,
+      })
+      await writeBlobCache(cache, key, { metadata, text })
+    },
+  }
+}
+
+async function markBlobObjectsStale(opts: {
+  cache: BlobStorageCache | undefined
+  matches: (metadata: Record<string, string> | undefined) => boolean
+  prefixes: Array<string>
+  storage: BlobStorage
+}) {
+  const seenKeys = new Set<string>()
+  let count = 0
+
+  for (const prefix of opts.prefixes) {
+    const objects = await listBlobObjects(opts.storage, prefix)
+
+    for (const object of objects) {
+      if (seenKeys.has(object.key)) {
+        continue
+      }
+
+      seenKeys.add(object.key)
+
+      const stored = await readBlob(opts.storage, undefined, object.key)
+
+      if (!stored || !opts.matches(stored.metadata)) {
+        continue
+      }
+
+      const metadata = {
+        ...stored.metadata,
+        staleAt: EPOCH_ISO,
+      }
+
+      await opts.storage.put(object.key, stored.text, {
+        contentType: STORED_CONTENT_TYPE,
+        metadata,
+      })
+      await writeBlobCache(opts.cache, object.key, {
+        metadata,
+        text: stored.text,
+      })
+      count += 1
+    }
+  }
+
+  return count
+}
+
+async function getCacheBackend() {
+  const storage = await getBlobStorage(GITHUB_CONTENT_BLOB_STORAGE)
+
+  if (storage) {
+    if (!blobBackend) {
+      blobBackend = createBlobBackend(
+        storage,
+        getBlobStorageCache(GITHUB_CONTENT_BLOB_STORAGE),
+      )
+    }
+
+    return blobBackend
+  }
+
+  return memoryBackend
+}
+
+const memoryBackend = createMemoryBackend()
+
+async function upsertGithubContent(opts: {
+  contentKind: ContentKind
+  gitRef: string
+  path: string
+  repo: string
+  value: unknown
+}) {
+  const now = new Date()
+  const isPresent = opts.value !== null
+  const freshness = createFreshnessWindow(isPresent)
+  const backend = await getCacheBackend()
+
+  await backend.putGitHubContent({
+    repo: opts.repo,
+    gitRef: opts.gitRef,
+    contentKind: opts.contentKind,
+    path: opts.path,
+    isPresent,
+    textContent:
+      opts.contentKind === 'file' && isPresent
+        ? getRequiredFileContent(opts.value)
+        : undefined,
+    jsonContent:
+      opts.contentKind === 'dir' && isPresent ? opts.value : undefined,
+    staleAt: freshness.staleAt,
+    updatedAt: now,
+  })
+}
+
+async function getCachedGitHubContent<T>(opts: {
+  cacheKey: string
+  contentKind: ContentKind
+  gitRef: string
+  origin: () => Promise<T | null>
+  path: string
+  readStoredValue: (row: GithubContentRecord | undefined) => CachedValue<T>
+  repo: string
+}) {
+  assertValidGithubContentKey(opts)
+
+  const backend = await getCacheBackend()
+  const readRow = () =>
+    backend.getGitHubContent({
+      repo: opts.repo,
+      gitRef: opts.gitRef,
+      contentKind: opts.contentKind,
+      path: opts.path,
+    })
+  const persist = (value: T | null) =>
+    upsertGithubContent({
+      repo: opts.repo,
+      gitRef: opts.gitRef,
+      contentKind: opts.contentKind,
+      path: opts.path,
+      value,
+    })
+
+  const cachedRow = await readRow()
+  const storedValue = opts.readStoredValue(cachedRow)
+  const forciblyStale = !!cachedRow && isForciblyStale(cachedRow.staleAt)
+
+  if (
+    canUseStoredGithubContentValue(opts.contentKind, storedValue) &&
+    !forciblyStale
+  ) {
+    if (cachedRow && isFresh(cachedRow.staleAt)) {
+      return storedValue
+    }
+  }
+
+  return withPendingRefresh(opts.cacheKey, async () => {
+    const latestRow = await readRow()
+    const latestValue = opts.readStoredValue(latestRow)
+    const latestForciblyStale =
+      !!latestRow && isForciblyStale(latestRow.staleAt)
+
+    if (
+      canUseStoredGithubContentValue(opts.contentKind, latestValue) &&
+      latestRow &&
+      !latestForciblyStale &&
+      isFresh(latestRow.staleAt)
+    ) {
+      return latestValue
+    }
+
+    try {
+      const value = await opts.origin()
+      await persist(value)
+      return value
+    } catch (error) {
+      if (latestValue !== undefined && latestValue !== null) {
+        console.warn(`[GitHub Cache] Serving stale value ${opts.cacheKey}`)
+        return latestValue
+      }
+
+      throw error
+    }
+  })
+}
+
+async function upsertDocsArtifact(opts: {
+  artifactKey: string
+  artifactType: string
+  docsRoot: string
+  gitRef: string
+  payload: unknown
+  repo: string
+}) {
+  const now = new Date()
+  const freshness = createFreshnessWindow(true)
+  const backend = await getCacheBackend()
+
+  await backend.putDocsArtifact({
+    repo: opts.repo,
+    gitRef: opts.gitRef,
+    docsRoot: opts.docsRoot,
+    artifactType: opts.artifactType,
+    artifactKey: opts.artifactKey,
+    payload: opts.payload,
+    staleAt: freshness.staleAt,
+    updatedAt: now,
+  })
+}
+
+export async function getCachedGitHubTextFile(opts: {
+  gitRef: string
+  origin: () => Promise<string | null>
+  path: string
+  repo: string
+}) {
+  return getCachedGitHubContent({
+    ...opts,
+    cacheKey: getGitHubContentBlobKey({
+      ...opts,
+      contentKind: 'file',
+    }),
+    contentKind: 'file',
+    readStoredValue: readStoredTextValue,
+  })
+}
+
+export async function getCachedGitHubJsonContent<T>(opts: {
+  gitRef: string
+  isValue: (value: unknown) => value is T
+  origin: () => Promise<T | null>
+  path: string
+  repo: string
+}) {
+  return getCachedGitHubContent({
+    ...opts,
+    cacheKey: getGitHubContentBlobKey({
+      ...opts,
+      contentKind: 'dir',
+    }),
+    contentKind: 'dir',
+    readStoredValue: (row) => readStoredJsonValue(row, opts.isValue),
+  })
+}
+
+export async function getCachedDocsArtifact<T>(opts: {
+  artifactKey: string
+  artifactType: string
+  build: () => Promise<T>
+  docsRoot: string
+  gitRef: string
+  isValue: (value: unknown) => value is T
+  repo: string
+}) {
+  assertValidDocsArtifactKey(opts)
+
+  const backend = await getCacheBackend()
+  const cacheKey = getDocsArtifactBlobKey(opts)
+
+  const readRow = () =>
+    backend.getDocsArtifact({
+      repo: opts.repo,
+      gitRef: opts.gitRef,
+      docsRoot: opts.docsRoot,
+      artifactType: opts.artifactType,
+      artifactKey: opts.artifactKey,
+    })
+
+  const cachedRow = await readRow()
+  const storedValue =
+    cachedRow && opts.isValue(cachedRow.payload) ? cachedRow.payload : undefined
+  const forciblyStale = !!cachedRow && isForciblyStale(cachedRow.staleAt)
+
+  const refreshArtifact = () =>
+    withPendingRefresh(cacheKey, async () => {
+      const latestRow = await readRow()
+      const latestValue =
+        latestRow && opts.isValue(latestRow.payload)
+          ? latestRow.payload
+          : undefined
+      const latestForciblyStale =
+        !!latestRow && isForciblyStale(latestRow.staleAt)
+
+      if (
+        latestValue !== undefined &&
+        latestRow &&
+        !latestForciblyStale &&
+        isFresh(latestRow.staleAt)
+      ) {
+        return latestValue
+      }
+
+      try {
+        const payload = await opts.build()
+        await upsertDocsArtifact({ ...opts, payload })
+        return payload
+      } catch (error) {
+        if (latestValue !== undefined) {
+          console.warn(`[GitHub Cache] Serving stale artifact ${cacheKey}`)
+          return latestValue
+        }
+
+        throw error
+      }
+    })
+
+  if (storedValue !== undefined) {
+    if (!forciblyStale && cachedRow && isFresh(cachedRow.staleAt)) {
+      return storedValue
+    }
+
+    if (
+      scheduleHostRuntimeTask(() =>
+        refreshArtifact().then(
+          () => undefined,
+          (error) => {
+            console.warn(
+              `[GitHub Cache] Background artifact refresh failed ${cacheKey}`,
+              error,
+            )
+          },
+        ),
+      )
+    ) {
+      console.warn(
+        `[GitHub Cache] Serving stale artifact ${cacheKey}; refreshing in background`,
+      )
+      return storedValue
+    }
+  }
+
+  return refreshArtifact()
+}
+
+export async function listDocsCacheRepoStats() {
+  const backend = await getCacheBackend()
+  return backend.listRepoStats()
+}
+
+export async function pruneStaleCacheRows(
+  opts: {
+    maxAgeMs?: number
+    negativeMaxAgeMs?: number
+  } = {},
+) {
+  const backend = await getCacheBackend()
+  return backend.pruneStaleCacheRows(opts)
+}
+
+export async function markGitHubContentStale(
+  opts: {
+    gitRef?: string
+    repo?: string
+  } = {},
+) {
+  if (opts.repo) {
+    assertValidRepo(opts.repo)
+  }
+
+  if (opts.gitRef) {
+    assertValidGitRef(opts.gitRef)
+  }
+
+  const backend = await getCacheBackend()
+  return backend.markGitHubContentStale(opts)
+}
+
+export async function markDocsArtifactsStale(
+  opts: {
+    gitRef?: string
+    repo?: string
+  } = {},
+) {
+  if (opts.repo) {
+    assertValidRepo(opts.repo)
+  }
+
+  if (opts.gitRef) {
+    assertValidGitRef(opts.gitRef)
+  }
+
+  const backend = await getCacheBackend()
+  return backend.markDocsArtifactsStale(opts)
+}
+
+export function resetGitHubContentCacheForTest() {
+  pendingRefreshes.clear()
+  memoryGitHubContent.clear()
+  memoryDocsArtifacts.clear()
+  blobBackend = undefined
+}
diff --git a/src/utils/github-example.server.ts b/src/utils/github-example.server.ts
new file mode 100644
index 000000000..91e2cd4f9
--- /dev/null
+++ b/src/utils/github-example.server.ts
@@ -0,0 +1,248 @@
+/**
+ * GitHub Example Fetching Utilities
+ *
+ * Functions for fetching example files from GitHub repositories.
+ */
+
+import {
+  cancelUnusedResponseBody,
+  fetchGitHubRecursiveTree,
+  getGitHubContentFetchOptions,
+  GitHubContentError,
+  isGitHubAuthFailureStatus,
+} from './documents.server'
+import { getCachedGitHubTextFile } from './github-content-cache.server'
+import {
+  fetchWithTimeout,
+  readResponseTextWithLimit,
+} from './outbound-fetch.server'
+
+const RAW_FETCH_CONCURRENCY = 6
+const MAX_EXAMPLE_FILES = 500
+const MAX_EXAMPLE_FILE_BYTES = 1 * 1024 * 1024
+const EXAMPLE_FETCH_TIMEOUT_MS = 10_000
+
+export interface FetchExampleFilesResult {
+  success: true
+  files: Record<string, string>
+}
+
+export interface FetchExampleFilesError {
+  success: false
+  error: string
+}
+
+/**
+ * Fetch all files from a GitHub example directory.
+ */
+export async function fetchExampleFiles(
+  repo: string,
+  branch: string,
+  examplePath: string,
+): Promise<FetchExampleFilesResult | FetchExampleFilesError> {
+  console.log('[fetchExampleFiles] Fetching:', { repo, branch, examplePath })
+
+  const tree = await fetchGitHubRecursiveTree(repo, branch)
+
+  if (!tree) {
+    return {
+      success: false,
+      error: `Failed to fetch example directory: ${examplePath}`,
+    }
+  }
+
+  const normalizedExamplePath = examplePath.replace(/^\/+|\/+$/g, '')
+  const fileEntries = tree.filter(
+    (entry) =>
+      entry.type === 'blob' &&
+      entry.path.startsWith(`${normalizedExamplePath}/`) &&
+      !shouldExcludeFile(entry.path.slice(normalizedExamplePath.length + 1)),
+  )
+
+  if (fileEntries.length > MAX_EXAMPLE_FILES) {
+    return {
+      success: false,
+      error: `Example has too many files; maximum is ${MAX_EXAMPLE_FILES}`,
+    }
+  }
+
+  if (fileEntries.length === 0) {
+    return {
+      success: false,
+      error: `No files found in example path: ${examplePath}`,
+    }
+  }
+
+  try {
+    const files = Object.fromEntries(
+      await mapWithConcurrency(
+        fileEntries,
+        RAW_FETCH_CONCURRENCY,
+        async (entry) => {
+          const relativePath = entry.path.slice(
+            normalizedExamplePath.length + 1,
+          )
+          const content = await fetchRawGitHubFile(repo, branch, entry.path)
+
+          if (content === null) {
+            throw new Error(`Missing file content for ${entry.path}`)
+          }
+
+          return [relativePath, content] as const
+        },
+      ),
+    )
+
+    console.log(
+      '[fetchExampleFiles] Fetched',
+      Object.keys(files).length,
+      'files',
+    )
+
+    return { success: true, files }
+  } catch (error) {
+    console.error('[fetchExampleFiles] Failed:', error)
+
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : 'Failed to fetch example files',
+    }
+  }
+}
+
+async function fetchRawGitHubFile(
+  repo: string,
+  branch: string,
+  filePath: string,
+) {
+  return getCachedGitHubTextFile({
+    repo,
+    gitRef: branch,
+    path: filePath,
+    origin: async () => {
+      const href = new URL(
+        `${repo}/${branch}/${filePath}`,
+        'https://raw.githubusercontent.com/',
+      ).href
+
+      let response: Response
+
+      try {
+        response = await fetchWithTimeout(href, {
+          ...getGitHubContentFetchOptions({
+            includeApiVersion: false,
+            userAgent: `examples:${repo}`,
+          }),
+          timeoutMs: EXAMPLE_FETCH_TIMEOUT_MS,
+        })
+
+        if (isGitHubAuthFailureStatus(response.status)) {
+          await cancelUnusedResponseBody(response)
+          response = await fetchWithTimeout(href, {
+            ...getGitHubContentFetchOptions({
+              includeApiVersion: false,
+              includeAuthorization: false,
+              userAgent: `examples:${repo}`,
+            }),
+            timeoutMs: EXAMPLE_FETCH_TIMEOUT_MS,
+          })
+        }
+      } catch (error) {
+        throw new GitHubContentError(
+          'network',
+          `Failed to fetch ${repo}@${branch}:${filePath}`,
+          { cause: error },
+        )
+      }
+
+      if (!response.ok) {
+        await cancelUnusedResponseBody(response)
+
+        if (response.status === 404) {
+          return null
+        }
+
+        throw new GitHubContentError(
+          response.status === 403 || response.status === 429
+            ? 'rate-limit'
+            : response.status >= 500
+              ? 'server'
+              : 'forbidden',
+          `GitHub failed to serve ${repo}@${branch}:${filePath}`,
+          { status: response.status },
+        )
+      }
+
+      return readResponseTextWithLimit(response, MAX_EXAMPLE_FILE_BYTES)
+    },
+  })
+}
+
+async function mapWithConcurrency<T, TResult>(
+  values: Array<T>,
+  concurrency: number,
+  fn: (value: T) => Promise<TResult>,
+) {
+  const results = new Array<TResult>(values.length)
+  let index = 0
+
+  const workers = Array.from(
+    { length: Math.min(concurrency, values.length) },
+    async () => {
+      while (index < values.length) {
+        const currentIndex = index
+        index += 1
+        results[currentIndex] = await fn(values[currentIndex])
+      }
+    },
+  )
+
+  await Promise.all(workers)
+
+  return results
+}
+
+/**
+ * Files/directories to exclude when copying examples
+ */
+const EXCLUDED_PATTERNS = [
+  'node_modules',
+  '.git',
+  'dist',
+  '.output',
+  '.netlify',
+  '.vercel',
+  '.DS_Store',
+  '.nitro',
+  'test-results',
+  'playwright-report',
+]
+
+/**
+ * Check if a file should be excluded
+ */
+export function shouldExcludeFile(path: string): boolean {
+  return EXCLUDED_PATTERNS.some(
+    (pattern) => path === pattern || path.startsWith(`${pattern}/`),
+  )
+}
+
+/**
+ * Filter out excluded files from a files record
+ */
+export function filterExcludedFiles(
+  files: Record<string, string>,
+): Record<string, string> {
+  const filtered: Record<string, string> = {}
+
+  for (const [path, content] of Object.entries(files)) {
+    if (!shouldExcludeFile(path)) {
+      filtered[path] = content
+    }
+  }
+
+  return filtered
+}
diff --git a/src/utils/github-repo.server.ts b/src/utils/github-repo.server.ts
new file mode 100644
index 000000000..1cd5c0355
--- /dev/null
+++ b/src/utils/github-repo.server.ts
@@ -0,0 +1,599 @@
+/**
+ * GitHub Repository Utilities
+ *
+ * Functions for creating and managing GitHub repositories via the API.
+ */
+import { fetchWithTimeout } from '~/utils/outbound-fetch.server'
+
+export interface CreateRepoOptions {
+  name: string
+  description?: string
+  isPrivate?: boolean
+  autoInit?: boolean
+}
+
+export interface CreateRepoResult {
+  success: true
+  repoUrl: string
+  owner: string
+  name: string
+}
+
+export interface CreateRepoError {
+  success: false
+  error: string
+  code:
+    | 'NAME_TAKEN'
+    | 'INVALID_NAME'
+    | 'RATE_LIMITED'
+    | 'UNAUTHORIZED'
+    | 'UNKNOWN'
+}
+
+export interface GitHubFileBudgetOptions {
+  maxFiles?: number
+  maxFileBytes?: number
+  maxTotalBytes?: number
+}
+
+const GITHUB_API_TIMEOUT_MS = 10_000
+const DEFAULT_GITHUB_FILE_BUDGET = {
+  maxFiles: 500,
+  maxFileBytes: 1 * 1024 * 1024,
+  maxTotalBytes: 8 * 1024 * 1024,
+} satisfies Required<GitHubFileBudgetOptions>
+
+const BLOCKED_GITHUB_PATH_SEGMENTS = new Set([
+  '.git',
+  '.hg',
+  '.svn',
+  'node_modules',
+])
+
+async function fetchGitHub(
+  input: string | URL | Request,
+  init: RequestInit = {},
+) {
+  return fetchWithTimeout(input, {
+    ...init,
+    timeoutMs: GITHUB_API_TIMEOUT_MS,
+  })
+}
+
+function isSafeGitHubPath(path: string) {
+  if (!path || path.length > 260) return false
+  if (path.startsWith('/') || path.includes('\\')) return false
+
+  const segments = path.split('/')
+  return segments.every(
+    (segment) =>
+      segment &&
+      segment !== '.' &&
+      segment !== '..' &&
+      !BLOCKED_GITHUB_PATH_SEGMENTS.has(segment),
+  )
+}
+
+export function validateGitHubFiles(
+  files: Record<string, string>,
+  options: GitHubFileBudgetOptions = {},
+): { valid: true } | { valid: false; error: string } {
+  const budget = {
+    ...DEFAULT_GITHUB_FILE_BUDGET,
+    ...options,
+  }
+  const entries = Object.entries(files)
+
+  if (entries.length === 0) {
+    return { valid: false, error: 'No files to push' }
+  }
+
+  if (entries.length > budget.maxFiles) {
+    return {
+      valid: false,
+      error: `Too many files to push; maximum is ${budget.maxFiles}`,
+    }
+  }
+
+  let totalBytes = 0
+  const encoder = new TextEncoder()
+
+  for (const [path, content] of entries) {
+    if (!isSafeGitHubPath(path)) {
+      return { valid: false, error: `Invalid file path: ${path}` }
+    }
+
+    const fileBytes = encoder.encode(content).byteLength
+    if (fileBytes > budget.maxFileBytes) {
+      return {
+        valid: false,
+        error: `File is too large: ${path}`,
+      }
+    }
+
+    totalBytes += fileBytes
+    if (totalBytes > budget.maxTotalBytes) {
+      return {
+        valid: false,
+        error: `Total file size exceeds ${budget.maxTotalBytes} bytes`,
+      }
+    }
+  }
+
+  return { valid: true }
+}
+
+/**
+ * Create a new GitHub repository
+ */
+export async function createRepository(
+  accessToken: string,
+  options: CreateRepoOptions,
+): Promise<CreateRepoResult | CreateRepoError> {
+  const response = await fetchGitHub('https://api.github.com/user/repos', {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      Accept: 'application/vnd.github.v3+json',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      name: options.name,
+      description: options.description,
+      private: options.isPrivate ?? false,
+      auto_init: options.autoInit ?? false,
+    }),
+  })
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({}))
+    const message = error.message ?? 'Unknown error'
+    const errors = error.errors ?? []
+    console.error('[GitHub] Create repo failed:', {
+      status: response.status,
+      message,
+      errors,
+    })
+
+    if (response.status === 401) {
+      return { success: false, error: message, code: 'UNAUTHORIZED' }
+    }
+    if (response.status === 403) {
+      return { success: false, error: message, code: 'RATE_LIMITED' }
+    }
+    if (response.status === 422) {
+      // Check for name already exists in message or errors array
+      const nameExists =
+        message.includes('name already exists') ||
+        errors.some((e: { message?: string }) =>
+          e.message?.includes('name already exists'),
+        )
+      if (nameExists) {
+        return {
+          success: false,
+          error: 'Repository name already exists',
+          code: 'NAME_TAKEN',
+        }
+      }
+      // Return more detailed error message
+      const detailedError =
+        errors.length > 0
+          ? errors.map((e: { message?: string }) => e.message).join(', ')
+          : message
+      return { success: false, error: detailedError, code: 'INVALID_NAME' }
+    }
+    return { success: false, error: message, code: 'UNKNOWN' }
+  }
+
+  const repo = await response.json()
+  return {
+    success: true,
+    repoUrl: repo.html_url,
+    owner: repo.owner.login,
+    name: repo.name,
+  }
+}
+
+/**
+ * Check if a repository name is available
+ */
+export async function checkRepoNameAvailable(
+  accessToken: string,
+  name: string,
+): Promise<boolean> {
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), 5000)
+
+  try {
+    // Get the authenticated user's username
+    const userResponse = await fetchGitHub('https://api.github.com/user', {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        Accept: 'application/vnd.github.v3+json',
+      },
+      signal: controller.signal,
+    })
+
+    if (!userResponse.ok) return true // Assume available on error
+
+    const user = await userResponse.json()
+    const username = user.login
+
+    // Check if repo exists
+    const repoResponse = await fetchGitHub(
+      `https://api.github.com/repos/${username}/${name}`,
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          Accept: 'application/vnd.github.v3+json',
+        },
+        signal: controller.signal,
+      },
+    )
+
+    // 404 means repo doesn't exist, so name is available
+    return repoResponse.status === 404
+  } catch {
+    // On timeout or network error, assume available (don't block the user)
+    return true
+  } finally {
+    clearTimeout(timeout)
+  }
+}
+
+/**
+ * Validate a repository name
+ */
+export function validateRepoName(name: string): {
+  valid: boolean
+  error?: string
+} {
+  if (!name) {
+    return { valid: false, error: 'Repository name is required' }
+  }
+
+  if (name.length > 100) {
+    return {
+      valid: false,
+      error: 'Repository name must be 100 characters or less',
+    }
+  }
+
+  // GitHub repo name rules: alphanumeric, hyphens, underscores, periods
+  // Cannot start with a period or hyphen
+  const validPattern = /^[a-zA-Z0-9][a-zA-Z0-9._-]*$/
+  if (!validPattern.test(name)) {
+    return {
+      valid: false,
+      error:
+        'Repository name can only contain letters, numbers, hyphens, underscores, and periods',
+    }
+  }
+
+  // Reserved names
+  const reserved = ['CON', 'PRN', 'AUX', 'NUL', 'COM1', 'LPT1']
+  if (reserved.includes(name.toUpperCase())) {
+    return { valid: false, error: 'This name is reserved' }
+  }
+
+  return { valid: true }
+}
+
+/**
+ * Generate a repository description from selected integrations
+ */
+export function generateRepoDescription(integrations: Array<string>): string {
+  if (integrations.length === 0) {
+    return 'A TanStack Start project'
+  }
+
+  const formatted = integrations.map((id) => {
+    // Convert kebab-case to Title Case
+    return id
+      .split('-')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ')
+  })
+
+  if (formatted.length === 1) {
+    return `A TanStack Start project with ${formatted[0]}`
+  }
+
+  if (formatted.length === 2) {
+    return `A TanStack Start project with ${formatted[0]} and ${formatted[1]}`
+  }
+
+  const last = formatted.pop()
+  return `A TanStack Start project with ${formatted.join(', ')}, and ${last}`
+}
+
+export interface PushFilesOptions {
+  owner: string
+  repo: string
+  files: Record<string, string>
+  message?: string
+  branch?: string
+}
+
+/**
+ * Encode string to base64 (handles unicode)
+ */
+function toBase64(str: string): string {
+  // Handle unicode by encoding to UTF-8 first
+  const utf8Bytes = new TextEncoder().encode(str)
+  let binary = ''
+  for (let i = 0; i < utf8Bytes.length; i++) {
+    binary += String.fromCharCode(utf8Bytes[i])
+  }
+  return btoa(binary)
+}
+
+/**
+ * Push files to a GitHub repository
+ * For empty repos, bootstraps with Contents API then uses Git Data API
+ */
+export async function pushFiles(
+  accessToken: string,
+  options: PushFilesOptions,
+): Promise<
+  { success: true; commitSha: string } | { success: false; error: string }
+> {
+  const {
+    owner,
+    repo,
+    files,
+    message = 'Initial commit from TanStack Builder',
+    branch = 'main',
+  } = options
+
+  const fileValidation = validateGitHubFiles(files)
+  if (!fileValidation.valid) {
+    return { success: false, error: fileValidation.error }
+  }
+
+  // Log file paths for debugging
+  const paths = Object.keys(files)
+  console.log(
+    `[Deploy] Pushing ${paths.length} files:`,
+    paths.slice(0, 10),
+    paths.length > 10 ? `... and ${paths.length - 10} more` : '',
+  )
+
+  const baseUrl = `https://api.github.com/repos/${owner}/${repo}`
+  const headers = {
+    Authorization: `Bearer ${accessToken}`,
+    Accept: 'application/vnd.github.v3+json',
+    'Content-Type': 'application/json',
+  }
+
+  // Check if the repo is empty by trying to get the branch
+  const refResponse = await fetchGitHub(`${baseUrl}/git/ref/heads/${branch}`, {
+    headers,
+  })
+  if (!refResponse.ok && refResponse.status !== 404) {
+    return { success: false, error: 'Failed to inspect repository branch' }
+  }
+  const isEmptyRepo = refResponse.status === 404
+
+  if (isEmptyRepo) {
+    // For empty repos, bootstrap with Contents API (creates first commit)
+    // Then add remaining files with Git Data API
+    const fileEntries = Object.entries(files)
+
+    if (fileEntries.length === 0) {
+      return { success: false, error: 'No files to push' }
+    }
+
+    // Pick a small file to bootstrap (README or package.json preferred)
+    const bootstrapEntry =
+      fileEntries.find(([p]) => p === 'README.md') ??
+      fileEntries.find(([p]) => p === 'package.json') ??
+      fileEntries[0]
+
+    const [bootstrapPath, bootstrapContent] = bootstrapEntry
+
+    // Create first file using Contents API
+    const createFileResponse = await fetchGitHub(
+      `${baseUrl}/contents/${bootstrapPath}`,
+      {
+        method: 'PUT',
+        headers,
+        body: JSON.stringify({
+          message,
+          content: toBase64(bootstrapContent),
+          branch,
+        }),
+      },
+    )
+
+    if (!createFileResponse.ok) {
+      const error = await createFileResponse.json().catch(() => ({}))
+      return {
+        success: false,
+        error: `Failed to create initial file: ${error.message ?? 'Unknown error'}`,
+      }
+    }
+
+    const createResult = await createFileResponse.json()
+    const baseSha = createResult.commit.sha
+
+    // If only one file, we're done
+    if (fileEntries.length === 1) {
+      return { success: true, commitSha: baseSha }
+    }
+
+    // Get remaining files
+    const remainingFiles = Object.fromEntries(
+      fileEntries.filter(([p]) => p !== bootstrapPath),
+    )
+
+    // Now use Git Data API to add remaining files in one commit
+    // Get base commit's tree using the SHA from the bootstrap commit
+    const baseCommitResponse = await fetchGitHub(
+      `${baseUrl}/git/commits/${baseSha}`,
+      { headers },
+    )
+    if (!baseCommitResponse.ok) {
+      const error = await baseCommitResponse.json().catch(() => ({}))
+      return {
+        success: false,
+        error: `Failed to get base commit: ${error.message ?? 'Unknown error'}`,
+      }
+    }
+    const baseCommit = await baseCommitResponse.json()
+
+    // Create tree with remaining files
+    const treeEntries = Object.entries(remainingFiles).map(
+      ([path, content]) => ({
+        path,
+        mode: '100644' as const,
+        type: 'blob' as const,
+        content,
+      }),
+    )
+
+    const treeResponse = await fetchGitHub(`${baseUrl}/git/trees`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({
+        base_tree: baseCommit.tree.sha,
+        tree: treeEntries,
+      }),
+    })
+
+    if (!treeResponse.ok) {
+      const error = await treeResponse.json().catch(() => ({}))
+      return {
+        success: false,
+        error: `Failed to create tree: ${error.message ?? 'Unknown error'}`,
+      }
+    }
+
+    const tree = await treeResponse.json()
+
+    // Create commit
+    const commitResponse = await fetchGitHub(`${baseUrl}/git/commits`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({
+        message: 'Add project files',
+        tree: tree.sha,
+        parents: [baseSha],
+      }),
+    })
+
+    if (!commitResponse.ok) {
+      const error = await commitResponse.json().catch(() => ({}))
+      return {
+        success: false,
+        error: `Failed to create commit: ${error.message ?? 'Unknown error'}`,
+      }
+    }
+
+    const commit = await commitResponse.json()
+
+    // Update branch ref
+    const updateRefResponse = await fetchGitHub(
+      `${baseUrl}/git/refs/heads/${branch}`,
+      {
+        method: 'PATCH',
+        headers,
+        body: JSON.stringify({ sha: commit.sha }),
+      },
+    )
+
+    if (!updateRefResponse.ok) {
+      const error = await updateRefResponse.json().catch(() => ({}))
+      return {
+        success: false,
+        error: `Failed to update ref: ${error.message ?? 'Unknown error'}`,
+      }
+    }
+
+    return { success: true, commitSha: commit.sha }
+  }
+
+  // For non-empty repos, use the standard Git Data API flow
+  const ref = await refResponse.json()
+  const baseSha = ref.object.sha
+
+  // Get the base tree
+  const baseCommitResponse = await fetchGitHub(
+    `${baseUrl}/git/commits/${baseSha}`,
+    {
+      headers,
+    },
+  )
+  if (!baseCommitResponse.ok) {
+    return { success: false, error: 'Failed to get base commit' }
+  }
+  const baseCommit = await baseCommitResponse.json()
+
+  // Create tree with base_tree
+  const treeEntries = Object.entries(files).map(([path, content]) => ({
+    path,
+    mode: '100644' as const,
+    type: 'blob' as const,
+    content,
+  }))
+
+  const treeResponse = await fetchGitHub(`${baseUrl}/git/trees`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      base_tree: baseCommit.tree.sha,
+      tree: treeEntries,
+    }),
+  })
+
+  if (!treeResponse.ok) {
+    const error = await treeResponse.json().catch(() => ({}))
+    return {
+      success: false,
+      error: `Failed to create tree: ${error.message ?? 'Unknown error'}`,
+    }
+  }
+
+  const tree = await treeResponse.json()
+
+  // Create commit with parent
+  const commitResponse = await fetchGitHub(`${baseUrl}/git/commits`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      message,
+      tree: tree.sha,
+      parents: [baseSha],
+    }),
+  })
+
+  if (!commitResponse.ok) {
+    const error = await commitResponse.json().catch(() => ({}))
+    return {
+      success: false,
+      error: `Failed to create commit: ${error.message ?? 'Unknown error'}`,
+    }
+  }
+
+  const commit = await commitResponse.json()
+
+  // Update the branch reference
+  const updateRefResponse = await fetchGitHub(
+    `${baseUrl}/git/refs/heads/${branch}`,
+    {
+      method: 'PATCH',
+      headers,
+      body: JSON.stringify({ sha: commit.sha }),
+    },
+  )
+
+  if (!updateRefResponse.ok) {
+    const error = await updateRefResponse.json().catch(() => ({}))
+    return {
+      success: false,
+      error: `Failed to update ref: ${error.message ?? 'Unknown error'}`,
+    }
+  }
+
+  return { success: true, commitSha: commit.sha }
+}
diff --git a/src/utils/handleRedirects.server.ts b/src/utils/handleRedirects.ts
similarity index 54%
rename from src/utils/handleRedirects.server.ts
rename to src/utils/handleRedirects.ts
index 40926c77c..0cb6de38b 100644
--- a/src/utils/handleRedirects.server.ts
+++ b/src/utils/handleRedirects.ts
@@ -3,21 +3,25 @@ import { redirect } from '@tanstack/react-router'
 type RedirectItem = { from: string; to: string }
 
 export function handleRedirects(
-  redirectItems: RedirectItem[],
+  redirectItems: Array<RedirectItem>,
   urlFromRequest: string,
   urlFromPathStart: string,
   urlToPathStart: string,
   urlToQueryParams: string,
 ) {
-  const url = new URL(urlFromRequest, 'https://tanstack.com')
+  const origin =
+    typeof window !== 'undefined'
+      ? window.location.origin
+      : 'https://tanstack.com'
+
+  const url = new URL(urlFromRequest, origin)
 
   redirectItems.forEach((item) => {
-    if (url.pathname.startsWith(`${urlFromPathStart}/${item.from}`)) {
-      /*
-        We create a URL object from the destination route before
-        adding the query params to make sure that the URL hash
-        (#this-part) is preserved.
-      */
+    const fromPath = `${urlFromPathStart}/${item.from}`.replace(/\/+/g, '/')
+    const matchesPath =
+      url.pathname === fromPath || url.pathname.startsWith(`${fromPath}/`)
+
+    if (matchesPath) {
       const urlTo = new URL(`${url.origin}${urlToPathStart}/${item.to}`)
       urlTo.search = urlToQueryParams
 
diff --git a/src/utils/hash.ts b/src/utils/hash.ts
new file mode 100644
index 000000000..4708cce97
--- /dev/null
+++ b/src/utils/hash.ts
@@ -0,0 +1,16 @@
+/**
+ * Isomorphic SHA-256 hashing utilities.
+ * Works in both browser and Node.js environments using Web Crypto API.
+ */
+
+/**
+ * Compute SHA-256 hash of a string, returning hex-encoded result.
+ */
+export async function sha256Hex(input: string): Promise<string> {
+  const encoder = new TextEncoder()
+  const data = encoder.encode(input)
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data)
+  return Array.from(new Uint8Array(hashBuffer))
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('')
+}
diff --git a/src/utils/homepage-npm-stats.server.ts b/src/utils/homepage-npm-stats.server.ts
new file mode 100644
index 000000000..7eed8bf20
--- /dev/null
+++ b/src/utils/homepage-npm-stats.server.ts
@@ -0,0 +1,471 @@
+import {
+  getBlobStorage,
+  getBlobStorageCache,
+  type BlobStorage,
+  type BlobStorageCache,
+} from '~/server/runtime/blob-storage.server'
+import {
+  addUtcDays,
+  NPM_STATS_START_DATE,
+  toIsoDayUtc,
+} from './npm-download-ranges'
+import { fetchNpmDownloadsBulkData } from './stats.server'
+import { getNpmOrgPackageNames } from './stats.functions'
+import { tanStackTotalVisibleNpmPackageNames } from './tanstack-npm-stats'
+import { libraries } from '~/libraries'
+
+export type NpmStatsLibrarySummary = {
+  libraryId: string
+  packageCount: number
+  totalDownloads: number
+  updatedAt: number
+}
+
+export type HomepageNpmStatsSummary = {
+  expiresAt: number
+  librarySummaries: Array<NpmStatsLibrarySummary>
+  totalDownloads: number
+  totalEndDate: string
+  totalPackageCount: number
+  totalStartDate: string
+  updatedAt: number
+  weeklyDownloads: number
+  weeklyEndDate: string
+  weeklyPackageCount: number
+  weeklyRatePerDay: number
+  weeklyStartDate: string
+}
+
+type FetchPackageDownloadsOptions = {
+  endDate: string
+  packageNames: Array<string>
+  startDate: string
+}
+
+const HOME_NPM_STATS_STORAGE = 'npmDownloadCache'
+const HOME_NPM_STATS_KEY = 'homepage-npm-stats/v1/tanstack.json'
+const HOME_NPM_STATS_CONTENT_TYPE = 'application/json; charset=utf-8'
+const HOME_NPM_STATS_TTL_MS = 12 * 60 * 60 * 1000
+const PACKAGE_BATCH_SIZE = 32
+const PACKAGE_BATCH_CONCURRENCY = 2
+
+let blobStoragePromise: Promise<BlobStorage | undefined> | undefined
+let memorySummary: HomepageNpmStatsSummary | undefined
+
+function getHomepageNpmStatsBlobStorage() {
+  blobStoragePromise ??= getBlobStorage(HOME_NPM_STATS_STORAGE)
+  return blobStoragePromise
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function readNumber(value: Record<string, unknown>, key: string) {
+  const rawValue = Reflect.get(value, key)
+  return typeof rawValue === 'number' && Number.isFinite(rawValue)
+    ? rawValue
+    : undefined
+}
+
+function readString(value: Record<string, unknown>, key: string) {
+  const rawValue = Reflect.get(value, key)
+  return typeof rawValue === 'string' && rawValue.length > 0
+    ? rawValue
+    : undefined
+}
+
+function parseLibrarySummaries(value: unknown): Array<NpmStatsLibrarySummary> {
+  if (!Array.isArray(value)) {
+    return []
+  }
+
+  const summaries: Array<NpmStatsLibrarySummary> = []
+
+  for (const item of value) {
+    if (!isRecord(item)) {
+      continue
+    }
+
+    const libraryId = readString(item, 'libraryId')
+    const packageCount = readNumber(item, 'packageCount')
+    const totalDownloads = readNumber(item, 'totalDownloads')
+    const updatedAt = readNumber(item, 'updatedAt')
+
+    if (
+      libraryId === undefined ||
+      packageCount === undefined ||
+      totalDownloads === undefined ||
+      updatedAt === undefined
+    ) {
+      continue
+    }
+
+    summaries.push({
+      libraryId,
+      packageCount,
+      totalDownloads,
+      updatedAt,
+    })
+  }
+
+  return summaries
+}
+
+function parseHomepageNpmStatsSummary(
+  value: unknown,
+): HomepageNpmStatsSummary | undefined {
+  if (!isRecord(value)) {
+    return undefined
+  }
+
+  const expiresAt = readNumber(value, 'expiresAt')
+  const totalDownloads = readNumber(value, 'totalDownloads')
+  const totalEndDate = readString(value, 'totalEndDate')
+  const totalPackageCount = readNumber(value, 'totalPackageCount')
+  const totalStartDate = readString(value, 'totalStartDate')
+  const updatedAt = readNumber(value, 'updatedAt')
+  const weeklyDownloads = readNumber(value, 'weeklyDownloads')
+  const weeklyEndDate = readString(value, 'weeklyEndDate')
+  const weeklyPackageCount = readNumber(value, 'weeklyPackageCount')
+  const weeklyRatePerDay = readNumber(value, 'weeklyRatePerDay')
+  const weeklyStartDate = readString(value, 'weeklyStartDate')
+
+  if (
+    expiresAt === undefined ||
+    totalDownloads === undefined ||
+    totalEndDate === undefined ||
+    totalPackageCount === undefined ||
+    totalStartDate === undefined ||
+    updatedAt === undefined ||
+    weeklyDownloads === undefined ||
+    weeklyEndDate === undefined ||
+    weeklyPackageCount === undefined ||
+    weeklyRatePerDay === undefined ||
+    weeklyStartDate === undefined
+  ) {
+    return undefined
+  }
+
+  return {
+    expiresAt,
+    librarySummaries: parseLibrarySummaries(
+      Reflect.get(value, 'librarySummaries'),
+    ),
+    totalDownloads,
+    totalEndDate,
+    totalPackageCount,
+    totalStartDate,
+    updatedAt,
+    weeklyDownloads,
+    weeklyEndDate,
+    weeklyPackageCount,
+    weeklyRatePerDay,
+    weeklyStartDate,
+  }
+}
+
+function readStoredHomepageNpmStatsSummary(text: string) {
+  let parsed: unknown
+
+  try {
+    parsed = JSON.parse(text)
+  } catch {
+    return undefined
+  }
+
+  return parseHomepageNpmStatsSummary(parsed)
+}
+
+function getSummaryMetadata(
+  summary: HomepageNpmStatsSummary,
+): Record<string, string> {
+  return {
+    expiresAt: String(summary.expiresAt),
+    totalDownloads: String(summary.totalDownloads),
+    totalPackageCount: String(summary.totalPackageCount),
+    updatedAt: String(summary.updatedAt),
+    weeklyDownloads: String(summary.weeklyDownloads),
+    weeklyPackageCount: String(summary.weeklyPackageCount),
+  }
+}
+
+function isFreshSummary(summary: HomepageNpmStatsSummary) {
+  return summary.expiresAt > Date.now()
+}
+
+async function putCacheEntry({
+  cache,
+  summary,
+  text,
+}: {
+  cache: BlobStorageCache | undefined
+  summary: HomepageNpmStatsSummary
+  text: string
+}) {
+  try {
+    await cache?.put(HOME_NPM_STATS_KEY, {
+      metadata: getSummaryMetadata(summary),
+      text,
+    })
+  } catch (error) {
+    console.warn('[Homepage NPM Stats] Cache API write failed:', error)
+  }
+}
+
+async function writeHomepageNpmStatsSummary(summary: HomepageNpmStatsSummary) {
+  const text = JSON.stringify(summary)
+  const cache = getBlobStorageCache(HOME_NPM_STATS_STORAGE)
+  const storage = await getHomepageNpmStatsBlobStorage()
+
+  memorySummary = summary
+
+  if (storage) {
+    await storage.put(HOME_NPM_STATS_KEY, text, {
+      contentType: HOME_NPM_STATS_CONTENT_TYPE,
+      metadata: getSummaryMetadata(summary),
+    })
+  }
+
+  await putCacheEntry({ cache, summary, text })
+}
+
+async function readHomepageNpmStatsSummary({
+  allowStale,
+}: {
+  allowStale: boolean
+}) {
+  if (memorySummary && (allowStale || isFreshSummary(memorySummary))) {
+    return memorySummary
+  }
+
+  const cache = getBlobStorageCache(HOME_NPM_STATS_STORAGE)
+  const cached = await cache?.get(HOME_NPM_STATS_KEY)
+  if (cached) {
+    const summary = readStoredHomepageNpmStatsSummary(cached.text)
+
+    if (summary && (allowStale || isFreshSummary(summary))) {
+      memorySummary = summary
+      return summary
+    }
+  }
+
+  const storage = await getHomepageNpmStatsBlobStorage()
+  const object = await storage?.get(HOME_NPM_STATS_KEY)
+  if (!object) {
+    return undefined
+  }
+
+  const text = await object.text()
+  const summary = readStoredHomepageNpmStatsSummary(text)
+
+  if (!summary || (!allowStale && !isFreshSummary(summary))) {
+    return undefined
+  }
+
+  memorySummary = summary
+  await putCacheEntry({ cache, summary, text })
+
+  return summary
+}
+
+function chunkPackageNames(packageNames: Array<string>) {
+  const chunks: Array<Array<string>> = []
+
+  for (
+    let index = 0;
+    index < packageNames.length;
+    index += PACKAGE_BATCH_SIZE
+  ) {
+    chunks.push(packageNames.slice(index, index + PACKAGE_BATCH_SIZE))
+  }
+
+  return chunks
+}
+
+async function mapWithConcurrency<T, TResult>(
+  values: Array<T>,
+  concurrency: number,
+  fn: (value: T) => Promise<TResult>,
+) {
+  const results = new Array<TResult>(values.length)
+  let index = 0
+
+  const workers = Array.from(
+    { length: Math.min(concurrency, values.length) },
+    async () => {
+      while (index < values.length) {
+        const currentIndex = index
+        index += 1
+        results[currentIndex] = await fn(values[currentIndex])
+      }
+    },
+  )
+
+  await Promise.all(workers)
+  return results
+}
+
+async function fetchPackageDownloads({
+  endDate,
+  packageNames,
+  startDate,
+}: FetchPackageDownloadsOptions) {
+  const uniquePackageNames = [...new Set(packageNames)].sort()
+
+  if (uniquePackageNames.length === 0) {
+    return new Map<string, number>()
+  }
+
+  const results = await mapWithConcurrency(
+    chunkPackageNames(uniquePackageNames),
+    PACKAGE_BATCH_CONCURRENCY,
+    async (packageBatch) =>
+      fetchNpmDownloadsBulkData({
+        data: {
+          packageGroups: [
+            {
+              packages: packageBatch.map((name) => ({ name })),
+            },
+          ],
+          startDate,
+          endDate,
+        },
+      }),
+  )
+
+  const packageDownloads = new Map<string, number>()
+
+  for (const group of results.flat()) {
+    for (const pkg of group.packages) {
+      const downloads = pkg.downloads.reduce(
+        (downloadTotal, point) => downloadTotal + point.downloads,
+        0,
+      )
+      packageDownloads.set(
+        pkg.name,
+        (packageDownloads.get(pkg.name) ?? 0) + downloads,
+      )
+    }
+  }
+
+  return packageDownloads
+}
+
+function getLibraryNpmPackageNames(library: {
+  corePackageName?: string
+  npmPackageNames?: Array<string>
+}) {
+  if (library.npmPackageNames?.length) {
+    return library.npmPackageNames
+  }
+
+  return library.corePackageName ? [library.corePackageName] : []
+}
+
+function sumPackageDownloads(
+  packageDownloads: Map<string, number>,
+  packageNames: Array<string>,
+) {
+  return packageNames.reduce(
+    (total, packageName) => total + (packageDownloads.get(packageName) ?? 0),
+    0,
+  )
+}
+
+function getLastCompletedNpmStatsDay() {
+  const today = new Date()
+  const lastCompletedDay = new Date(
+    Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate()),
+  )
+  lastCompletedDay.setUTCDate(lastCompletedDay.getUTCDate() - 1)
+  return toIsoDayUtc(lastCompletedDay)
+}
+
+export async function refreshHomepageNpmStatsSummary({
+  org = 'tanstack',
+}: {
+  org?: string
+} = {}) {
+  const orgPackageNames = await getNpmOrgPackageNames(org)
+  const libraryPackageEntries = libraries
+    .map((library) => ({
+      libraryId: library.id,
+      packageNames: getLibraryNpmPackageNames(library),
+    }))
+    .filter((entry) => entry.packageNames.length > 0)
+  const totalPackageNames = [
+    ...new Set([
+      ...orgPackageNames,
+      ...libraryPackageEntries.flatMap((entry) => entry.packageNames),
+    ]),
+  ].sort()
+  const weeklyPackageNames = [...tanStackTotalVisibleNpmPackageNames].sort()
+  const totalEndDate = getLastCompletedNpmStatsDay()
+  const weeklyEndDate = totalEndDate
+  const weeklyStartDate = addUtcDays(weeklyEndDate, -6)
+  const updatedAt = Date.now()
+
+  const [totalPackageDownloads, weeklyPackageDownloads] = await Promise.all([
+    fetchPackageDownloads({
+      packageNames: totalPackageNames,
+      startDate: NPM_STATS_START_DATE,
+      endDate: totalEndDate,
+    }),
+    fetchPackageDownloads({
+      packageNames: weeklyPackageNames,
+      startDate: weeklyStartDate,
+      endDate: weeklyEndDate,
+    }),
+  ])
+  const totalDownloads = sumPackageDownloads(
+    totalPackageDownloads,
+    totalPackageNames,
+  )
+  const weeklyDownloads = sumPackageDownloads(
+    weeklyPackageDownloads,
+    weeklyPackageNames,
+  )
+  const librarySummaries = libraryPackageEntries.map((entry) => ({
+    libraryId: entry.libraryId,
+    packageCount: entry.packageNames.length,
+    totalDownloads: sumPackageDownloads(
+      totalPackageDownloads,
+      entry.packageNames,
+    ),
+    updatedAt,
+  }))
+
+  const summary: HomepageNpmStatsSummary = {
+    expiresAt: updatedAt + HOME_NPM_STATS_TTL_MS,
+    librarySummaries,
+    totalDownloads,
+    totalEndDate,
+    totalPackageCount: totalPackageNames.length,
+    totalStartDate: NPM_STATS_START_DATE,
+    updatedAt,
+    weeklyDownloads,
+    weeklyEndDate,
+    weeklyPackageCount: weeklyPackageNames.length,
+    weeklyRatePerDay: weeklyDownloads > 0 ? weeklyDownloads / 7 : 0,
+    weeklyStartDate,
+  }
+
+  await writeHomepageNpmStatsSummary(summary)
+
+  return summary
+}
+
+export async function getHomepageNpmStatsSummary() {
+  return (await readHomepageNpmStatsSummary({ allowStale: true })) ?? null
+}
+
+export async function getCachedLibraryNpmStatsSummary(libraryId: string) {
+  const summary = await readHomepageNpmStatsSummary({ allowStale: true })
+
+  return (
+    summary?.librarySummaries.find(
+      (librarySummary) => librarySummary.libraryId === libraryId,
+    ) ?? null
+  )
+}
diff --git a/src/utils/hosting-cache.server.ts b/src/utils/hosting-cache.server.ts
new file mode 100644
index 000000000..7caa5fe80
--- /dev/null
+++ b/src/utils/hosting-cache.server.ts
@@ -0,0 +1,82 @@
+import * as Sentry from '@sentry/node'
+import { purgeHostCacheTags } from '~/server/runtime/host.server'
+
+export type PurgeResult =
+  | { purged: true; tags: Array<string> }
+  | {
+      error?: string
+      purged: false
+      reason: 'no-tags' | 'no-credentials' | 'error'
+    }
+
+type CachePurgeApiResponse = {
+  errors?: Array<{ message?: string }>
+  success?: boolean
+}
+
+export async function purgeHostingCacheTags(
+  tags: Array<string>,
+): Promise<PurgeResult> {
+  const uniqueTags = Array.from(new Set(tags)).filter((tag) => tag.length > 0)
+
+  if (uniqueTags.length === 0) {
+    return { purged: false, reason: 'no-tags' }
+  }
+
+  try {
+    const response = await purgeHostCacheTags(uniqueTags)
+
+    if (!response) {
+      return { purged: false, reason: 'no-credentials' }
+    }
+
+    const payload: unknown = await response.json()
+    if (!isCachePurgeApiResponse(payload)) {
+      throw new Error('Invalid cache purge API response')
+    }
+
+    if (!response.ok || payload.success === false) {
+      const message =
+        payload.errors
+          ?.map((error) => error.message)
+          .filter((message) => typeof message === 'string')
+          .join('; ') || `Cache purge failed with status ${response.status}`
+      throw new Error(message)
+    }
+
+    return { purged: true, tags: uniqueTags }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    console.error('[hosting-cache] cache purge failed', {
+      message,
+      tags: uniqueTags,
+    })
+    Sentry.captureException(error, {
+      extra: { tags: uniqueTags },
+      tags: { context: 'hosting-cache', runtime: 'server' },
+    })
+    return { error: message, purged: false, reason: 'error' }
+  }
+}
+
+function isCachePurgeApiResponse(
+  value: unknown,
+): value is CachePurgeApiResponse {
+  if (typeof value !== 'object' || value === null) return false
+
+  const errors = 'errors' in value ? value.errors : undefined
+  const success = 'success' in value ? value.success : undefined
+
+  const isSuccessValid = success === undefined || typeof success === 'boolean'
+  const isErrorsValid =
+    errors === undefined ||
+    (Array.isArray(errors) &&
+      errors.every(
+        (error) =>
+          typeof error === 'object' &&
+          error !== null &&
+          (!('message' in error) || typeof error.message === 'string'),
+      ))
+
+  return isSuccessValid && isErrorsValid
+}
diff --git a/src/utils/http-response.ts b/src/utils/http-response.ts
new file mode 100644
index 000000000..702b115f3
--- /dev/null
+++ b/src/utils/http-response.ts
@@ -0,0 +1,59 @@
+type ContentDispositionType = 'attachment' | 'inline'
+
+const FILENAME_SEPARATOR_PATTERN = /[\\/]+/g
+const QUOTE_PATTERN = /["]+/g
+const UNSAFE_FILENAME_CHAR_PATTERN = /[*:<>?|]+/g
+const MULTIPLE_DASH_PATTERN = /-+/g
+const MAX_RESPONSE_FILENAME_LENGTH = 180
+
+export function sanitizeResponseFilename(
+  value: string | null | undefined,
+  fallback = 'download',
+) {
+  const fallbackName = sanitizeFilenameText(fallback) || 'download'
+  const filename = sanitizeFilenameText(value)
+
+  return filename || fallbackName
+}
+
+export function getContentDispositionHeader(
+  type: ContentDispositionType,
+  filename: string | null | undefined,
+  fallback?: string,
+) {
+  const safeFilename = sanitizeResponseFilename(filename, fallback)
+  const quotedFilename = safeFilename
+    .replace(/\\/g, '\\\\')
+    .replace(/"/g, '\\"')
+  const encodedFilename = encodeRFC5987Value(safeFilename)
+
+  return `${type}; filename="${quotedFilename}"; filename*=UTF-8''${encodedFilename}`
+}
+
+function sanitizeFilenameText(value: string | null | undefined) {
+  const cleaned = String(value ?? '')
+    .normalize('NFKC')
+    .split('')
+    .filter((char) => {
+      const code = char.charCodeAt(0)
+      return code > 31 && code !== 127
+    })
+    .join('')
+    .replace(FILENAME_SEPARATOR_PATTERN, '-')
+    .replace(QUOTE_PATTERN, '')
+    .replace(UNSAFE_FILENAME_CHAR_PATTERN, '-')
+    .replace(/\s+/g, '-')
+    .replace(MULTIPLE_DASH_PATTERN, '-')
+    .replace(/^[.-]+|[.-]+$/g, '')
+    .slice(0, MAX_RESPONSE_FILENAME_LENGTH)
+    .trim()
+
+  return cleaned.replace(/^[.-]+|[.-]+$/g, '')
+}
+
+function encodeRFC5987Value(value: string) {
+  return encodeURIComponent(value).replace(
+    /['()*]/g,
+    (char) => `%${char.charCodeAt(0).toString(16).toUpperCase()}`,
+  )
+}
diff --git a/src/utils/http.ts b/src/utils/http.ts
new file mode 100644
index 000000000..1ce4d2f12
--- /dev/null
+++ b/src/utils/http.ts
@@ -0,0 +1,2 @@
+export const docsContentNegotiationVaryHeader =
+  'Accept, Accept-Encoding, Sec-Fetch-Dest, Sec-Fetch-Mode'
diff --git a/src/utils/intent-admin.functions.ts b/src/utils/intent-admin.functions.ts
new file mode 100644
index 000000000..c052871a8
--- /dev/null
+++ b/src/utils/intent-admin.functions.ts
@@ -0,0 +1,81 @@
+import { createServerFn } from '@tanstack/react-start'
+import * as v from 'valibot'
+import {
+  deleteIntentPackage as deleteIntentPackageServer,
+  discoverViaGitHub as discoverViaGitHubServer,
+  getIntentAdminStats as getIntentAdminStatsServer,
+  getIntentWorkflowHealth as getIntentWorkflowHealthServer,
+  listFailedVersions as listFailedVersionsServer,
+  listIntentPackages as listIntentPackagesServer,
+  listIntentWorkflowRuns as listIntentWorkflowRunsServer,
+  repairIntentWorkflowStore as repairIntentWorkflowStoreServer,
+  resetFailedVersions as resetFailedVersionsServer,
+  retryIntentVersion as retryIntentVersionServer,
+  seedIntentPackage as seedIntentPackageServer,
+  triggerIntentDiscover as triggerIntentDiscoverServer,
+  triggerIntentProcess as triggerIntentProcessServer,
+} from '~/utils/intent-admin.server'
+
+export const getIntentAdminStats = createServerFn({ method: 'GET' }).handler(
+  async () => getIntentAdminStatsServer(),
+)
+
+export const listIntentPackages = createServerFn({ method: 'GET' }).handler(
+  async () => listIntentPackagesServer(),
+)
+
+export const listFailedVersions = createServerFn({ method: 'GET' }).handler(
+  async () => listFailedVersionsServer(),
+)
+
+export const listIntentWorkflowRuns = createServerFn({ method: 'GET' }).handler(
+  async () => listIntentWorkflowRunsServer(),
+)
+
+export const getIntentWorkflowHealth = createServerFn({
+  method: 'GET',
+}).handler(async () => getIntentWorkflowHealthServer())
+
+export const repairIntentWorkflowStore = createServerFn({
+  method: 'POST',
+}).handler(async () => repairIntentWorkflowStoreServer())
+
+export const triggerIntentDiscover = createServerFn({ method: 'POST' }).handler(
+  async () => triggerIntentDiscoverServer(),
+)
+
+export const triggerIntentProcess = createServerFn({ method: 'POST' }).handler(
+  async () => triggerIntentProcessServer(),
+)
+
+export const retryIntentVersion = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      versionId: v.number(),
+    }),
+  )
+  .handler(async ({ data }) => retryIntentVersionServer({ data }))
+
+export const deleteIntentPackage = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      name: v.string(),
+    }),
+  )
+  .handler(async ({ data }) => deleteIntentPackageServer({ data }))
+
+export const resetFailedVersions = createServerFn({ method: 'POST' }).handler(
+  async () => resetFailedVersionsServer(),
+)
+
+export const seedIntentPackage = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      name: v.string(),
+    }),
+  )
+  .handler(async ({ data }) => seedIntentPackageServer({ data }))
+
+export const discoverViaGitHub = createServerFn({ method: 'POST' }).handler(
+  async () => discoverViaGitHubServer(),
+)
diff --git a/src/utils/intent-admin.server.ts b/src/utils/intent-admin.server.ts
new file mode 100644
index 000000000..20a92268d
--- /dev/null
+++ b/src/utils/intent-admin.server.ts
@@ -0,0 +1,465 @@
+/**
+ * Admin server functions for managing the Intent skills registry.
+ * All functions require the 'admin' capability.
+ */
+
+import { randomUUID } from 'node:crypto'
+import { db } from '~/db/client'
+import {
+  intentPackages,
+  intentPackageVersions,
+  intentSkills,
+} from '~/db/schema'
+import { eq, desc, sql } from 'drizzle-orm'
+import { requireCapability } from './auth.server'
+import {
+  fetchPackument,
+  selectVersionsToSync,
+  extractSkillsFromTarball,
+} from './intent.server'
+import {
+  upsertIntentPackage,
+  getKnownVersions,
+  enqueuePackageVersion,
+  replaceSkillsForVersion,
+  markVersionSynced,
+} from './intent-db.server'
+import {
+  INTENT_DISCOVER_WORKFLOW_ID,
+  INTENT_PROCESS_WORKFLOW_ID,
+  intentWorkflowRegistrations,
+} from '~/utils/intent-workflows.server'
+import {
+  intentDiscoveryResultSchema,
+  intentProcessResultSchema,
+} from '~/utils/intent-sync.server'
+import {
+  getWorkflowRuntimeHealth,
+  reconcileWorkflowRuntimeStore,
+  WORKFLOW_RUNTIME_MAX_DURATION_MS,
+  WORKFLOW_RUNTIME_MIN_REMAINING_MS,
+  workflowExecutionStore,
+  workflowRuntime,
+} from '~/utils/workflow-runtime.server'
+import type { WorkflowRuntimeRunResult } from '@tanstack/workflow-runtime'
+
+// ---------------------------------------------------------------------------
+// Stats / overview
+// ---------------------------------------------------------------------------
+
+export async function getIntentAdminStats() {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  const [
+    totalPackages,
+    verifiedPackages,
+    pendingVersions,
+    failedVersions,
+    syncedVersions,
+    totalSkills,
+  ] = await Promise.all([
+    db.select({ count: sql<number>`count(*)::int` }).from(intentPackages),
+    db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(intentPackages)
+      .where(eq(intentPackages.verified, true)),
+    db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(intentPackageVersions)
+      .where(eq(intentPackageVersions.syncStatus, 'pending')),
+    db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(intentPackageVersions)
+      .where(eq(intentPackageVersions.syncStatus, 'failed')),
+    db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(intentPackageVersions)
+      .where(eq(intentPackageVersions.syncStatus, 'synced')),
+    db.select({ count: sql<number>`count(*)::int` }).from(intentSkills),
+  ])
+
+  return {
+    totalPackages: totalPackages[0]?.count ?? 0,
+    verifiedPackages: verifiedPackages[0]?.count ?? 0,
+    pendingVersions: pendingVersions[0]?.count ?? 0,
+    failedVersions: failedVersions[0]?.count ?? 0,
+    syncedVersions: syncedVersions[0]?.count ?? 0,
+    totalSkills: totalSkills[0]?.count ?? 0,
+  }
+}
+
+export async function listIntentWorkflowRuns() {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  const runs = await Promise.all(
+    Object.keys(intentWorkflowRegistrations).map((workflowId) =>
+      workflowExecutionStore.listRuns({
+        workflowId,
+        limit: 5,
+      }),
+    ),
+  )
+
+  return runs
+    .flat()
+    .sort((a, b) => b.updatedAt - a.updatedAt)
+    .slice(0, 10)
+    .map((run) => ({
+      runId: run.runId,
+      workflowId: run.workflowId,
+      workflowVersion: run.workflowVersion,
+      status: run.status,
+      waitingFor: run.waitingFor?.signalName,
+      wakeAt: run.wakeAt ? new Date(run.wakeAt) : null,
+      createdAt: new Date(run.createdAt),
+      updatedAt: new Date(run.updatedAt),
+    }))
+}
+
+export async function getIntentWorkflowHealth() {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  return getWorkflowRuntimeHealth()
+}
+
+export async function repairIntentWorkflowStore() {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  return reconcileWorkflowRuntimeStore()
+}
+
+// ---------------------------------------------------------------------------
+// Package list (all known packages with status)
+// ---------------------------------------------------------------------------
+
+export async function listIntentPackages() {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  const packages = await db.query.intentPackages.findMany({
+    orderBy: [desc(intentPackages.lastSyncedAt)],
+  })
+
+  // Attach per-package version counts by status
+  const versionCounts = await db
+    .select({
+      packageName: intentPackageVersions.packageName,
+      syncStatus: intentPackageVersions.syncStatus,
+      count: sql<number>`count(*)::int`,
+    })
+    .from(intentPackageVersions)
+    .groupBy(
+      intentPackageVersions.packageName,
+      intentPackageVersions.syncStatus,
+    )
+
+  const countsByPkg = new Map<
+    string,
+    { pending: number; synced: number; failed: number }
+  >()
+  for (const row of versionCounts) {
+    const existing = countsByPkg.get(row.packageName) ?? {
+      pending: 0,
+      synced: 0,
+      failed: 0,
+    }
+    if (row.syncStatus === 'pending') existing.pending = row.count
+    else if (row.syncStatus === 'synced') existing.synced = row.count
+    else if (row.syncStatus === 'failed') existing.failed = row.count
+    countsByPkg.set(row.packageName, existing)
+  }
+
+  return packages.map((pkg) => ({
+    ...pkg,
+    versions: countsByPkg.get(pkg.name) ?? {
+      pending: 0,
+      synced: 0,
+      failed: 0,
+    },
+  }))
+}
+
+// ---------------------------------------------------------------------------
+// Failed versions (for targeted retry)
+// ---------------------------------------------------------------------------
+
+export async function listFailedVersions() {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  return db.query.intentPackageVersions.findMany({
+    where: eq(intentPackageVersions.syncStatus, 'failed'),
+    orderBy: [desc(intentPackageVersions.createdAt)],
+  })
+}
+
+// ---------------------------------------------------------------------------
+// Trigger: run discovery phase (same logic as the scheduled function)
+// ---------------------------------------------------------------------------
+
+export async function triggerIntentDiscover() {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  const result = await workflowRuntime.startRun({
+    workflowId: INTENT_DISCOVER_WORKFLOW_ID,
+    runId: createAdminRunId(INTENT_DISCOVER_WORKFLOW_ID),
+    input: { source: 'admin' },
+    includeEvents: false,
+  })
+
+  return intentDiscoveryResultSchema.parse(getCompletedWorkflowOutput(result))
+}
+
+// ---------------------------------------------------------------------------
+// Trigger: process pending versions using the same time budget as scheduled runs
+// ---------------------------------------------------------------------------
+
+export async function triggerIntentProcess() {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  const result = await workflowRuntime.startRun({
+    workflowId: INTENT_PROCESS_WORKFLOW_ID,
+    runId: createAdminRunId(INTENT_PROCESS_WORKFLOW_ID),
+    input: {
+      source: 'admin',
+    },
+    maxDurationMs: WORKFLOW_RUNTIME_MAX_DURATION_MS,
+    minYieldRemainingMs: WORKFLOW_RUNTIME_MIN_REMAINING_MS,
+    includeEvents: false,
+  })
+
+  if (result.kind === 'paused') {
+    return {
+      kind: 'continuing' as const,
+      runId: result.runId,
+    }
+  }
+
+  return {
+    kind: 'completed' as const,
+    runId: result.runId,
+    summary: intentProcessResultSchema.parse(
+      getCompletedWorkflowOutput(result),
+    ),
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Trigger: retry a specific failed version by id
+// ---------------------------------------------------------------------------
+
+export async function retryIntentVersion({ data }: { data: any }) {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  const version = await db.query.intentPackageVersions.findFirst({
+    where: eq(intentPackageVersions.id, data.versionId),
+  })
+
+  if (!version) throw new Error(`Version ${data.versionId} not found`)
+  if (!version.tarballUrl)
+    throw new Error('No tarball URL recorded for this version')
+
+  // Reset to pending so the process trigger picks it up, or process inline
+  const skills = await extractSkillsFromTarball(version.tarballUrl)
+  await replaceSkillsForVersion(version.id, skills)
+  await markVersionSynced(version.id, skills.length)
+
+  return { skillCount: skills.length }
+}
+
+// ---------------------------------------------------------------------------
+// Discover intent-compatible packages via GitHub code search.
+// Finds repos with @tanstack/intent in package.json, resolves npm package
+// names, and enqueues any that have SKILL.md files in their published tarball.
+// ---------------------------------------------------------------------------
+
+export async function discoverViaGitHub() {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  const token = process.env.GITHUB_AUTH_TOKEN
+  if (!token) throw new Error('GITHUB_AUTH_TOKEN not set')
+
+  const ghHeaders = {
+    Authorization: `Bearer ${token}`,
+    Accept: 'application/vnd.github.v3+json',
+  }
+
+  // Search GitHub for package.json files referencing @tanstack/intent
+  const searchRes = await fetch(
+    'https://api.github.com/search/code?q=%22%40tanstack%2Fintent%22+filename%3Apackage.json&per_page=100',
+    { headers: ghHeaders },
+  )
+  if (!searchRes.ok)
+    throw new Error(`GitHub search failed: ${searchRes.status}`)
+  const searchData = (await searchRes.json()) as {
+    total_count: number
+    items: Array<{
+      path: string
+      repository: { full_name: string }
+      url: string
+    }>
+  }
+
+  // Deduplicate: one package.json per repo+path
+  const seen = new Set<string>()
+  const candidates: Array<{ repo: string; path: string }> = []
+  for (const item of searchData.items) {
+    const key = `${item.repository.full_name}|${item.path}`
+    if (!seen.has(key)) {
+      seen.add(key)
+      candidates.push({ repo: item.repository.full_name, path: item.path })
+    }
+  }
+
+  const results = {
+    searched: candidates.length,
+    checkedOnNpm: 0,
+    hadSkills: 0,
+    enqueued: 0,
+    skipped: 0,
+    errors: [] as Array<string>,
+  }
+
+  for (const { repo, path } of candidates) {
+    try {
+      // Fetch the package.json content from GitHub
+      const contentRes = await fetch(
+        `https://api.github.com/repos/${repo}/contents/${path}`,
+        { headers: ghHeaders },
+      )
+      if (!contentRes.ok) continue
+      const contentData = (await contentRes.json()) as {
+        content?: string
+        encoding?: string
+      }
+      if (!contentData.content) continue
+
+      const pkgJson = JSON.parse(
+        Buffer.from(contentData.content, 'base64').toString('utf-8'),
+      ) as { name?: string; private?: boolean }
+
+      const pkgName = pkgJson.name
+      if (!pkgName || pkgJson.private) continue
+
+      results.checkedOnNpm++
+
+      // Check NPM for the package and its latest tarball
+      const npmRes = await fetch(
+        `https://registry.npmjs.org/${encodeURIComponent(pkgName)}/latest`,
+      )
+      if (!npmRes.ok) continue // not published
+
+      const npmMeta = (await npmRes.json()) as {
+        version?: string
+        dist?: { tarball?: string }
+      }
+      const version = npmMeta.version
+      const tarballUrl = npmMeta.dist?.tarball
+      if (!version || !tarballUrl) continue
+
+      // Peek at tarball for SKILL.md files (stream headers only)
+      const skills = await extractSkillsFromTarball(tarballUrl)
+      if (skills.length === 0) {
+        results.skipped++
+        continue
+      }
+
+      results.hadSkills++
+
+      // Seed into DB
+      await upsertIntentPackage({ name: pkgName, verified: true })
+
+      const knownVersions = await getKnownVersions(pkgName)
+      const packument = await fetchPackument(pkgName)
+      const versionsToEnqueue = selectVersionsToSync(packument, knownVersions)
+
+      for (const v of versionsToEnqueue) {
+        await enqueuePackageVersion({
+          packageName: pkgName,
+          version: v.version,
+          tarballUrl: v.tarball,
+          publishedAt: v.publishedAt,
+        })
+        results.enqueued++
+      }
+    } catch (err) {
+      results.errors.push(
+        `${repo}/${path}: ${err instanceof Error ? err.message : String(err)}`,
+      )
+    }
+  }
+
+  return results
+}
+
+// ---------------------------------------------------------------------------
+// Manually seed a specific package by name, bypassing keyword discovery.
+// Useful for packages that ship skills but haven't yet published the keyword.
+// ---------------------------------------------------------------------------
+
+export async function seedIntentPackage({ data }: { data: any }) {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  const packument = await fetchPackument(data.name)
+  const latestVersion = packument['dist-tags'].latest
+  if (!latestVersion)
+    throw new Error(`No latest version found for ${data.name}`)
+
+  await upsertIntentPackage({ name: data.name, verified: true })
+
+  const knownVersions = await getKnownVersions(data.name)
+  const versionsToEnqueue = selectVersionsToSync(packument, knownVersions)
+
+  let versionsEnqueued = 0
+  for (const { version, tarball, publishedAt } of versionsToEnqueue) {
+    await enqueuePackageVersion({
+      packageName: data.name,
+      version,
+      tarballUrl: tarball,
+      publishedAt,
+    })
+    versionsEnqueued++
+  }
+
+  return { versionsEnqueued }
+}
+
+// ---------------------------------------------------------------------------
+// Delete a package and all its versions/skills
+// ---------------------------------------------------------------------------
+
+export async function deleteIntentPackage({ data }: { data: any }) {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  await db.delete(intentPackages).where(eq(intentPackages.name, data.name))
+
+  return { deleted: true }
+}
+
+// ---------------------------------------------------------------------------
+// Reset failed versions back to pending (bulk retry)
+// ---------------------------------------------------------------------------
+
+export async function resetFailedVersions() {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  const result = await db
+    .update(intentPackageVersions)
+    .set({ syncStatus: 'pending', failureReason: null })
+    .where(eq(intentPackageVersions.syncStatus, 'failed'))
+    .returning({ id: intentPackageVersions.id })
+
+  return { resetCount: result.length }
+}
+
+function createAdminRunId(workflowId: string) {
+  return `${workflowId}:admin:${Date.now()}:${randomUUID()}`
+}
+
+function getCompletedWorkflowOutput(result: WorkflowRuntimeRunResult): unknown {
+  if (result.kind !== 'completed' || !result.run) {
+    throw new Error(
+      `Workflow ${result.workflowId ?? 'unknown'} did not complete: ${result.kind}`,
+    )
+  }
+
+  return result.run.output
+}
diff --git a/src/utils/intent-db.server.ts b/src/utils/intent-db.server.ts
new file mode 100644
index 000000000..b109e7cf6
--- /dev/null
+++ b/src/utils/intent-db.server.ts
@@ -0,0 +1,511 @@
+/**
+ * Database operations for the Intent registry.
+ * Server-only. Import only inside server function handlers or scheduled functions.
+ */
+
+import { db } from '~/db/client'
+import {
+  intentPackages,
+  intentPackageVersions,
+  intentSkills,
+  intentSkillContent,
+} from '~/db/schema'
+import { eq, desc, sql, and, inArray, or, ilike, notInArray } from 'drizzle-orm'
+import type {
+  IntentPackage,
+  IntentPackageVersion,
+  IntentSkill,
+  IntentSkillContent,
+  NewIntentPackage,
+  NewIntentSkill,
+  NewIntentSkillContent,
+} from '~/db/schema'
+import type { ParsedSkill } from './intent.server'
+
+export type {
+  IntentPackage,
+  IntentPackageVersion,
+  IntentSkill,
+  IntentSkillContent,
+}
+
+export interface IntentLatestVersionSkillSummary {
+  packageName: string
+  latestVersion: string
+  publishedAt: Date | null
+  skillNames: Array<string>
+  frameworks: Array<string>
+}
+
+// ---------------------------------------------------------------------------
+// Reads
+// ---------------------------------------------------------------------------
+
+export async function getAllVerifiedPackages(): Promise<Array<IntentPackage>> {
+  return db.query.intentPackages.findMany({
+    where: eq(intentPackages.verified, true),
+    orderBy: [desc(intentPackages.lastSyncedAt)],
+  })
+}
+
+export async function getPackageByName(
+  name: string,
+): Promise<IntentPackage | undefined> {
+  return db.query.intentPackages.findFirst({
+    where: eq(intentPackages.name, name),
+  })
+}
+
+// Returns all versions for a package that have been fully synced, newest-first
+export async function getPackageVersions(
+  packageName: string,
+): Promise<Array<IntentPackageVersion>> {
+  return db.query.intentPackageVersions.findMany({
+    where: and(
+      eq(intentPackageVersions.packageName, packageName),
+      eq(intentPackageVersions.syncStatus, 'synced'),
+    ),
+    orderBy: [desc(intentPackageVersions.publishedAt)],
+  })
+}
+
+// Set of ALL known version strings for a package regardless of sync status.
+// Used during discovery to avoid inserting duplicate pending entries.
+export async function getKnownVersions(
+  packageName: string,
+): Promise<Set<string>> {
+  const rows = await db
+    .select({ version: intentPackageVersions.version })
+    .from(intentPackageVersions)
+    .where(eq(intentPackageVersions.packageName, packageName))
+  return new Set(rows.map((r) => r.version))
+}
+
+// Pull up to `limit` pending versions ordered by createdAt (FIFO queue).
+// Also includes 'failed' rows so they get retried each cycle.
+export interface PendingIntentVersion {
+  id: number
+  packageName: string
+  version: string
+  tarballUrl: string | null
+}
+
+export async function getPendingVersions(
+  limit: number,
+  options?: { excludeIds?: Array<number> },
+): Promise<Array<PendingIntentVersion>> {
+  const where = and(
+    inArray(intentPackageVersions.syncStatus, ['pending', 'failed']),
+    options?.excludeIds?.length
+      ? notInArray(intentPackageVersions.id, options.excludeIds)
+      : undefined,
+  )
+
+  return db
+    .select({
+      id: intentPackageVersions.id,
+      packageName: intentPackageVersions.packageName,
+      version: intentPackageVersions.version,
+      tarballUrl: intentPackageVersions.tarballUrl,
+    })
+    .from(intentPackageVersions)
+    .where(where)
+    .orderBy(intentPackageVersions.createdAt)
+    .limit(limit)
+}
+
+export interface IntentVersionForProcessing extends PendingIntentVersion {
+  syncStatus: string
+  skillCount: number
+}
+
+export async function getVersionForProcessing(
+  id: number,
+): Promise<IntentVersionForProcessing | undefined> {
+  const rows = await db
+    .select({
+      id: intentPackageVersions.id,
+      packageName: intentPackageVersions.packageName,
+      version: intentPackageVersions.version,
+      tarballUrl: intentPackageVersions.tarballUrl,
+      syncStatus: intentPackageVersions.syncStatus,
+      skillCount: intentPackageVersions.skillCount,
+    })
+    .from(intentPackageVersions)
+    .where(eq(intentPackageVersions.id, id))
+    .limit(1)
+
+  return rows[0]
+}
+
+export async function getSkillsForVersion(
+  packageVersionId: number,
+): Promise<Array<IntentSkill & { content: string }>> {
+  const rows = await db
+    .select({
+      id: intentSkills.id,
+      packageVersionId: intentSkills.packageVersionId,
+      name: intentSkills.name,
+      description: intentSkills.description,
+      type: intentSkills.type,
+      framework: intentSkills.framework,
+      requires: intentSkills.requires,
+      skillPath: intentSkills.skillPath,
+      contentHash: intentSkills.contentHash,
+      lineCount: intentSkills.lineCount,
+      content: intentSkillContent.content,
+    })
+    .from(intentSkills)
+    .innerJoin(
+      intentSkillContent,
+      eq(intentSkills.contentHash, intentSkillContent.contentHash),
+    )
+    .where(eq(intentSkills.packageVersionId, packageVersionId))
+  return rows
+}
+
+export async function getLatestIntentVersionSkillSummaries(): Promise<
+  Array<IntentLatestVersionSkillSummary>
+> {
+  const latestVersions = db
+    .selectDistinctOn([intentPackageVersions.packageName], {
+      id: intentPackageVersions.id,
+      packageName: intentPackageVersions.packageName,
+      latestVersion: intentPackageVersions.version,
+      publishedAt: intentPackageVersions.publishedAt,
+    })
+    .from(intentPackageVersions)
+    .innerJoin(
+      intentPackages,
+      eq(intentPackageVersions.packageName, intentPackages.name),
+    )
+    .where(
+      and(
+        eq(intentPackages.verified, true),
+        eq(intentPackageVersions.syncStatus, 'synced'),
+      ),
+    )
+    .orderBy(
+      intentPackageVersions.packageName,
+      sql`${intentPackageVersions.publishedAt} desc nulls last`,
+      desc(intentPackageVersions.id),
+    )
+    .as('latest_versions')
+
+  return db
+    .select({
+      packageName: latestVersions.packageName,
+      latestVersion: latestVersions.latestVersion,
+      publishedAt: latestVersions.publishedAt,
+      skillNames: sql<Array<string>>`
+        coalesce(
+          jsonb_agg(${intentSkills.name} order by ${intentSkills.name})
+            filter (where ${intentSkills.name} is not null),
+          '[]'::jsonb
+        )
+      `,
+      frameworks: sql<Array<string>>`
+        coalesce(
+          jsonb_agg(distinct ${intentSkills.framework} order by ${intentSkills.framework})
+            filter (where ${intentSkills.framework} is not null),
+          '[]'::jsonb
+        )
+      `,
+    })
+    .from(latestVersions)
+    .leftJoin(
+      intentSkills,
+      eq(intentSkills.packageVersionId, latestVersions.id),
+    )
+    .groupBy(
+      latestVersions.packageName,
+      latestVersions.latestVersion,
+      latestVersions.publishedAt,
+    )
+}
+
+// Lightweight query for diffing: only name + contentHash, no content body join
+export async function getSkillFingerprintsForVersion(
+  packageVersionId: number,
+): Promise<Array<{ name: string; contentHash: string }>> {
+  return db
+    .select({
+      name: intentSkills.name,
+      contentHash: intentSkills.contentHash,
+    })
+    .from(intentSkills)
+    .where(eq(intentSkills.packageVersionId, packageVersionId))
+}
+
+// Aggregate stats for the registry hero banner
+export async function getIntentRegistryStats(): Promise<{
+  packageCount: number
+  skillCount: number
+  versionCount: number
+}> {
+  const [pkgCount, skillCount, versionCount] = await Promise.all([
+    db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(intentPackages)
+      .where(eq(intentPackages.verified, true)),
+    // Count skills only for the latest published synced version per verified package.
+    // Uses DISTINCT ON (package_name) ordered by published_at desc to get the true
+    // latest version rather than max(id) which picks by insertion order.
+    db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(intentSkills)
+      .where(
+        inArray(
+          intentSkills.packageVersionId,
+          db
+            .selectDistinctOn([intentPackageVersions.packageName], {
+              id: intentPackageVersions.id,
+            })
+            .from(intentPackageVersions)
+            .innerJoin(
+              intentPackages,
+              eq(intentPackageVersions.packageName, intentPackages.name),
+            )
+            .where(
+              and(
+                eq(intentPackages.verified, true),
+                eq(intentPackageVersions.syncStatus, 'synced'),
+              ),
+            )
+            .orderBy(
+              intentPackageVersions.packageName,
+              desc(intentPackageVersions.publishedAt),
+            ),
+        ),
+      ),
+    db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(intentPackageVersions)
+      .innerJoin(
+        intentPackages,
+        eq(intentPackageVersions.packageName, intentPackages.name),
+      )
+      .where(
+        and(
+          eq(intentPackages.verified, true),
+          eq(intentPackageVersions.syncStatus, 'synced'),
+        ),
+      ),
+  ])
+  return {
+    packageCount: pkgCount[0]?.count ?? 0,
+    skillCount: skillCount[0]?.count ?? 0,
+    versionCount: versionCount[0]?.count ?? 0,
+  }
+}
+
+// Search verified packages by name
+export async function searchPackagesByName(
+  query: string,
+): Promise<Array<IntentPackage>> {
+  return db.query.intentPackages.findMany({
+    where: and(
+      eq(intentPackages.verified, true),
+      ilike(intentPackages.name, `%${query}%`),
+    ),
+    orderBy: [desc(intentPackages.lastSyncedAt)],
+  })
+}
+
+export interface SkillSearchResult {
+  skillId: number
+  skillName: string
+  description: string | null
+  type: string | null
+  framework: string | null
+  packageName: string
+  version: string
+  versionId: number
+  contentHash: string
+  lineCount: number
+}
+
+// Search skills across all verified+synced packages by name, description, or content
+export async function searchSkills(
+  query: string,
+  limit = 50,
+): Promise<Array<SkillSearchResult>> {
+  const pattern = `%${query}%`
+  const rows = await db
+    .select({
+      skillId: intentSkills.id,
+      skillName: intentSkills.name,
+      description: intentSkills.description,
+      type: intentSkills.type,
+      framework: intentSkills.framework,
+      packageName: intentPackageVersions.packageName,
+      version: intentPackageVersions.version,
+      versionId: intentPackageVersions.id,
+      contentHash: intentSkills.contentHash,
+      lineCount: intentSkills.lineCount,
+    })
+    .from(intentSkills)
+    .innerJoin(
+      intentPackageVersions,
+      eq(intentSkills.packageVersionId, intentPackageVersions.id),
+    )
+    .innerJoin(
+      intentPackages,
+      eq(intentPackageVersions.packageName, intentPackages.name),
+    )
+    .innerJoin(
+      intentSkillContent,
+      eq(intentSkills.contentHash, intentSkillContent.contentHash),
+    )
+    .where(
+      and(
+        eq(intentPackages.verified, true),
+        eq(intentPackageVersions.syncStatus, 'synced'),
+        or(
+          ilike(intentSkills.name, pattern),
+          ilike(intentSkills.description, pattern),
+          ilike(intentSkillContent.content, pattern),
+        ),
+      ),
+    )
+    .orderBy(intentPackageVersions.packageName, intentSkills.name)
+    .limit(limit)
+  return rows
+}
+
+// ---------------------------------------------------------------------------
+// Writes
+// ---------------------------------------------------------------------------
+
+export async function upsertIntentPackage(
+  pkg: NewIntentPackage,
+): Promise<void> {
+  await db
+    .insert(intentPackages)
+    .values(pkg)
+    .onConflictDoUpdate({
+      target: intentPackages.name,
+      set: {
+        verified: pkg.verified,
+        lastSyncedAt: new Date(),
+      },
+    })
+}
+
+// Queue a version for tarball processing. Noop if it's already known
+// (whether pending, synced, or failed) -- we never downgrade a synced version.
+export async function enqueuePackageVersion(record: {
+  packageName: string
+  version: string
+  tarballUrl: string
+  publishedAt: Date | null
+}): Promise<void> {
+  await db
+    .insert(intentPackageVersions)
+    .values({
+      packageName: record.packageName,
+      version: record.version,
+      tarballUrl: record.tarballUrl,
+      publishedAt: record.publishedAt,
+      syncStatus: 'pending',
+      skillCount: 0,
+    })
+    .onConflictDoNothing({
+      target: [
+        intentPackageVersions.packageName,
+        intentPackageVersions.version,
+      ],
+    })
+}
+
+// Mark a version as successfully synced with its skill count
+export async function markVersionSynced(
+  id: number,
+  skillCount: number,
+): Promise<void> {
+  await db
+    .update(intentPackageVersions)
+    .set({
+      syncStatus: 'synced',
+      skillCount,
+      syncedAt: new Date(),
+      failureReason: null,
+    })
+    .where(eq(intentPackageVersions.id, id))
+}
+
+// Mark a version as failed with a reason (will be retried next cycle)
+export async function markVersionFailed(
+  id: number,
+  reason: string,
+): Promise<void> {
+  await db
+    .update(intentPackageVersions)
+    .set({ syncStatus: 'failed', failureReason: reason })
+    .where(eq(intentPackageVersions.id, id))
+}
+
+// Insert deduplicated skill content (noop if hash already exists)
+async function insertSkillContent(
+  record: NewIntentSkillContent,
+): Promise<void> {
+  await db
+    .insert(intentSkillContent)
+    .values(record)
+    .onConflictDoNothing({ target: intentSkillContent.contentHash })
+}
+
+// Replace all skills for a version: delete existing rows then bulk insert.
+// Versions are processed once (pending -> synced) so re-processing is rare
+// (only on retries or manual re-seeds). Delete-then-insert is simpler than upsert.
+export async function replaceSkillsForVersion(
+  packageVersionId: number,
+  skills: Array<ParsedSkill>,
+): Promise<void> {
+  // Content rows are content-addressed and shared across versions — always insert, never delete
+  for (const skill of skills) {
+    await insertSkillContent({
+      contentHash: skill.contentHash,
+      content: skill.content,
+    })
+  }
+
+  // Replace skill metadata rows for this version
+  await db
+    .delete(intentSkills)
+    .where(eq(intentSkills.packageVersionId, packageVersionId))
+
+  if (skills.length === 0) return
+
+  await db.insert(intentSkills).values(
+    skills.map(
+      (s): NewIntentSkill => ({
+        packageVersionId,
+        name: s.name,
+        description: s.description,
+        type: s.type ?? null,
+        framework: s.framework ?? null,
+        requires: s.requires ?? null,
+        skillPath: s.skillPath || null,
+        contentHash: s.contentHash,
+        lineCount: s.lineCount,
+      }),
+    ),
+  )
+}
+
+// Mark a package as verified and update lastSyncedAt
+export async function markPackageVerified(name: string): Promise<void> {
+  await db
+    .update(intentPackages)
+    .set({ verified: true, lastSyncedAt: new Date() })
+    .where(eq(intentPackages.name, name))
+}
+
+// Bump lastSyncedAt to now for a given package (used to throttle background refreshes)
+export async function touchPackageSyncTime(name: string): Promise<void> {
+  await db
+    .update(intentPackages)
+    .set({ lastSyncedAt: new Date() })
+    .where(eq(intentPackages.name, name))
+}
diff --git a/src/utils/intent-sync.server.ts b/src/utils/intent-sync.server.ts
new file mode 100644
index 000000000..e4319dea0
--- /dev/null
+++ b/src/utils/intent-sync.server.ts
@@ -0,0 +1,364 @@
+import { z } from 'zod'
+import { getCurrentHostRuntimeEnv } from '~/server/runtime/host.server'
+import {
+  extractSkillsFromTarball,
+  fetchPackument,
+  isIntentCompatible,
+  searchIntentPackages,
+  selectVersionsToSync,
+} from '~/utils/intent.server'
+import {
+  enqueuePackageVersion,
+  getKnownVersions,
+  getPendingVersions,
+  getVersionForProcessing,
+  markPackageVerified,
+  markVersionFailed,
+  markVersionSynced,
+  replaceSkillsForVersion,
+  upsertIntentPackage,
+} from '~/utils/intent-db.server'
+
+const githubSearchResponseSchema = z.object({
+  items: z.array(
+    z.object({
+      path: z.string(),
+      repository: z.object({ full_name: z.string() }),
+    }),
+  ),
+})
+
+const githubContentResponseSchema = z.object({
+  content: z.string().optional(),
+})
+
+const packageJsonSchema = z.object({
+  name: z.string().optional(),
+  private: z.boolean().optional(),
+})
+
+const npmLatestSchema = z.object({
+  version: z.string().optional(),
+  dist: z.object({ tarball: z.string().optional() }).optional(),
+})
+
+export const intentDiscoveryResultSchema = z.object({
+  packagesDiscovered: z.number().int().nonnegative(),
+  githubCandidates: z.number().int().nonnegative(),
+  packagesVerified: z.number().int().nonnegative(),
+  versionsEnqueued: z.number().int().nonnegative(),
+  errors: z.array(z.string()),
+})
+
+export const intentVersionProcessResultSchema = z.object({
+  packageName: z.string(),
+  version: z.string(),
+  status: z.enum(['synced', 'failed']),
+  skillCount: z.number().int().nonnegative().optional(),
+  error: z.string().optional(),
+})
+
+export const intentProcessResultSchema = z.object({
+  processed: z.number().int().nonnegative(),
+  failed: z.number().int().nonnegative(),
+  deferred: z.number().int().nonnegative(),
+  results: z.array(intentVersionProcessResultSchema),
+})
+
+export type IntentDiscoveryResult = z.infer<typeof intentDiscoveryResultSchema>
+export type IntentVersionProcessResult = z.infer<
+  typeof intentVersionProcessResultSchema
+>
+export type IntentProcessResult = z.infer<typeof intentProcessResultSchema>
+
+export interface IntentVersionToProcess {
+  id: number
+  packageName: string
+  version: string
+}
+
+export interface IntentSyncOperations {
+  discoverIntentPackages: () => Promise<IntentDiscoveryResult>
+  selectPendingIntentVersions: (options: {
+    limit: number
+    excludeIds?: Array<number>
+  }) => Promise<Array<IntentVersionToProcess>>
+  processIntentVersion: (
+    versionId: number,
+  ) => Promise<IntentVersionProcessResult>
+}
+
+export const defaultIntentSyncOperations: IntentSyncOperations = {
+  discoverIntentPackages,
+  selectPendingIntentVersions,
+  processIntentVersion,
+}
+
+export async function discoverIntentPackages(): Promise<IntentDiscoveryResult> {
+  const errors: Array<string> = []
+  let packagesDiscovered = 0
+  let githubCandidates = 0
+  let packagesVerified = 0
+  let versionsEnqueued = 0
+
+  try {
+    const searchResults = await searchIntentPackages()
+    const packageNames = dedupe(
+      searchResults.objects.map((item) => item.package.name),
+    )
+    packagesDiscovered = packageNames.length
+
+    for (const packageName of packageNames) {
+      try {
+        const enqueued = await discoverNpmPackage(packageName)
+        if (enqueued !== null) {
+          packagesVerified++
+          versionsEnqueued += enqueued
+        }
+      } catch (error) {
+        errors.push(`npm/${packageName}: ${getErrorMessage(error)}`)
+      }
+    }
+  } catch (error) {
+    errors.push(`npm-search: ${getErrorMessage(error)}`)
+  }
+
+  const githubToken =
+    getCurrentHostRuntimeEnv()?.GITHUB_AUTH_TOKEN ??
+    process.env.GITHUB_AUTH_TOKEN
+  if (githubToken) {
+    try {
+      const githubResult = await discoverGitHubPackages(githubToken)
+      githubCandidates = githubResult.githubCandidates
+      packagesVerified += githubResult.packagesVerified
+      versionsEnqueued += githubResult.versionsEnqueued
+      errors.push(...githubResult.errors)
+    } catch (error) {
+      errors.push(`github-search: ${getErrorMessage(error)}`)
+    }
+  }
+
+  return {
+    packagesDiscovered,
+    githubCandidates,
+    packagesVerified,
+    versionsEnqueued,
+    errors,
+  }
+}
+
+export async function selectPendingIntentVersions(options: {
+  limit: number
+  excludeIds?: Array<number>
+}): Promise<Array<IntentVersionToProcess>> {
+  const versions = await getPendingVersions(options.limit, {
+    excludeIds: options.excludeIds,
+  })
+
+  return versions.map((version) => ({
+    id: version.id,
+    packageName: version.packageName,
+    version: version.version,
+  }))
+}
+
+export function summarizeIntentProcessResults(
+  results: Array<IntentVersionProcessResult>,
+  options?: { deferred?: number },
+): IntentProcessResult {
+  return {
+    processed: results.filter((result) => result.status === 'synced').length,
+    failed: results.filter((result) => result.status === 'failed').length,
+    deferred: options?.deferred ?? 0,
+    results,
+  }
+}
+
+async function discoverNpmPackage(packageName: string): Promise<number | null> {
+  await upsertIntentPackage({ name: packageName, verified: false })
+
+  const packument = await fetchPackument(packageName)
+  const latestVersion = packument['dist-tags'].latest
+  const latestMeta = latestVersion ? packument.versions[latestVersion] : null
+  if (!latestVersion || !latestMeta || !isIntentCompatible(latestMeta)) {
+    return null
+  }
+
+  await markPackageVerified(packageName)
+  return enqueueVersionsFromPackument(packageName, packument)
+}
+
+async function discoverGitHubPackages(githubToken: string): Promise<{
+  githubCandidates: number
+  packagesVerified: number
+  versionsEnqueued: number
+  errors: Array<string>
+}> {
+  const ghHeaders = {
+    Authorization: `Bearer ${githubToken}`,
+    Accept: 'application/vnd.github.v3+json',
+  }
+  const searchRes = await fetch(
+    'https://api.github.com/search/code?q=%22%40tanstack%2Fintent%22+filename%3Apackage.json&per_page=100',
+    { headers: ghHeaders },
+  )
+  if (!searchRes.ok) throw new Error(`GitHub search ${searchRes.status}`)
+
+  const searchData = githubSearchResponseSchema.parse(await searchRes.json())
+  const candidates = dedupeBy(
+    searchData.items.map((item) => ({
+      repo: item.repository.full_name,
+      path: item.path,
+    })),
+    (item) => `${item.repo}|${item.path}`,
+  )
+  let packagesVerified = 0
+  let versionsEnqueued = 0
+  const errors: Array<string> = []
+
+  for (const candidate of candidates) {
+    try {
+      const enqueued = await discoverGitHubPackage(candidate, ghHeaders)
+      if (enqueued !== null) {
+        packagesVerified++
+        versionsEnqueued += enqueued
+      }
+    } catch (error) {
+      errors.push(
+        `github/${candidate.repo}/${candidate.path}: ${getErrorMessage(error)}`,
+      )
+    }
+  }
+
+  return {
+    githubCandidates: candidates.length,
+    packagesVerified,
+    versionsEnqueued,
+    errors,
+  }
+}
+
+async function discoverGitHubPackage(
+  candidate: { repo: string; path: string },
+  headers: HeadersInit,
+): Promise<number | null> {
+  const contentRes = await fetch(
+    `https://api.github.com/repos/${candidate.repo}/contents/${candidate.path}`,
+    { headers },
+  )
+  if (!contentRes.ok) return null
+
+  const contentData = githubContentResponseSchema.parse(await contentRes.json())
+  if (!contentData.content) return null
+
+  const packageJson = packageJsonSchema.parse(
+    JSON.parse(Buffer.from(contentData.content, 'base64').toString('utf-8')),
+  )
+  if (!packageJson.name || packageJson.private) return null
+
+  const npmRes = await fetch(
+    `https://registry.npmjs.org/${encodeURIComponent(packageJson.name)}/latest`,
+  )
+  if (!npmRes.ok) return null
+
+  const npmMeta = npmLatestSchema.parse(await npmRes.json())
+  if (!npmMeta.dist?.tarball) return null
+
+  const skills = await extractSkillsFromTarball(npmMeta.dist.tarball)
+  if (skills.length === 0) return null
+
+  await upsertIntentPackage({ name: packageJson.name, verified: true })
+  await markPackageVerified(packageJson.name)
+
+  const packument = await fetchPackument(packageJson.name)
+  return enqueueVersionsFromPackument(packageJson.name, packument)
+}
+
+async function enqueueVersionsFromPackument(
+  packageName: string,
+  packument: Awaited<ReturnType<typeof fetchPackument>>,
+): Promise<number> {
+  const knownVersions = await getKnownVersions(packageName)
+  const versionsToEnqueue = selectVersionsToSync(packument, knownVersions)
+
+  for (const version of versionsToEnqueue) {
+    await enqueuePackageVersion({
+      packageName,
+      version: version.version,
+      tarballUrl: version.tarball,
+      publishedAt: version.publishedAt,
+    })
+  }
+
+  return versionsToEnqueue.length
+}
+
+export async function processIntentVersion(
+  versionId: number,
+): Promise<IntentVersionProcessResult> {
+  const version = await getVersionForProcessing(versionId)
+  if (!version) {
+    throw new Error(`Intent package version ${versionId} not found`)
+  }
+
+  if (version.syncStatus === 'synced') {
+    return {
+      packageName: version.packageName,
+      version: version.version,
+      status: 'synced',
+      skillCount: version.skillCount,
+    }
+  }
+
+  if (!version.tarballUrl) {
+    const reason = 'No tarball URL recorded'
+    await markVersionFailed(version.id, reason)
+    return {
+      packageName: version.packageName,
+      version: version.version,
+      status: 'failed',
+      error: reason,
+    }
+  }
+
+  try {
+    const skills = await extractSkillsFromTarball(version.tarballUrl)
+    await replaceSkillsForVersion(version.id, skills)
+    await markVersionSynced(version.id, skills.length)
+    return {
+      packageName: version.packageName,
+      version: version.version,
+      status: 'synced',
+      skillCount: skills.length,
+    }
+  } catch (error) {
+    const reason = getErrorMessage(error)
+    await markVersionFailed(version.id, reason)
+    return {
+      packageName: version.packageName,
+      version: version.version,
+      status: 'failed',
+      error: reason,
+    }
+  }
+}
+
+function dedupe(values: Array<string>): Array<string> {
+  return dedupeBy(values, (value) => value)
+}
+
+function dedupeBy<T>(values: Array<T>, getKey: (value: T) => string): Array<T> {
+  const seen = new Set<string>()
+  const result: Array<T> = []
+  for (const value of values) {
+    const key = getKey(value)
+    if (seen.has(key)) continue
+    seen.add(key)
+    result.push(value)
+  }
+  return result
+}
+
+function getErrorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error)
+}
diff --git a/src/utils/intent-workflows.server.ts b/src/utils/intent-workflows.server.ts
new file mode 100644
index 000000000..3cb2ee436
--- /dev/null
+++ b/src/utils/intent-workflows.server.ts
@@ -0,0 +1,148 @@
+import { createWorkflow } from '@tanstack/workflow-core'
+import type { StepOptions } from '@tanstack/workflow-core'
+import { every } from '@tanstack/workflow-runtime'
+import type { WorkflowRegistrationMap } from '@tanstack/workflow-runtime'
+import { z } from 'zod'
+import {
+  defaultIntentSyncOperations,
+  summarizeIntentProcessResults,
+} from '~/utils/intent-sync.server'
+import type {
+  IntentSyncOperations,
+  IntentVersionProcessResult,
+} from '~/utils/intent-sync.server'
+
+const intentDiscoverInputSchema = z.object({
+  source: z.enum(['schedule', 'admin']).default('schedule'),
+})
+
+const PROCESS_WORKFLOW_SELECT_LIMIT = 50
+
+const intentProcessInputSchema = z.object({
+  source: z.enum(['schedule', 'admin']).default('schedule'),
+})
+
+const discoverStepOptions = {
+  retry: { maxAttempts: 2, backoff: 'exponential', baseMs: 1_000 },
+  timeout: 10 * 60 * 1000,
+} satisfies StepOptions
+
+const selectPendingVersionsStepOptions = {
+  timeout: 30_000,
+} satisfies StepOptions
+
+const processVersionStepOptions = {
+  timeout: 2 * 60 * 1000,
+} satisfies StepOptions
+
+export const INTENT_DISCOVER_WORKFLOW_ID = 'intent-discover-workflow'
+export const INTENT_PROCESS_WORKFLOW_ID = 'intent-process-workflow'
+export const INTENT_DISCOVER_SCHEDULE_ID = 'intent-discover-every-6h'
+export const INTENT_PROCESS_SCHEDULE_ID = 'intent-process-every-15m'
+
+function createIntentDiscoverWorkflow(
+  operations: IntentSyncOperations = defaultIntentSyncOperations,
+) {
+  return createWorkflow({
+    id: INTENT_DISCOVER_WORKFLOW_ID,
+    input: intentDiscoverInputSchema,
+  }).handler((ctx) =>
+    ctx.step(
+      'discover-intent-packages',
+      () => operations.discoverIntentPackages(),
+      discoverStepOptions,
+    ),
+  )
+}
+
+export function createIntentProcessWorkflow(
+  operations: IntentSyncOperations = defaultIntentSyncOperations,
+) {
+  return createWorkflow({
+    id: INTENT_PROCESS_WORKFLOW_ID,
+    input: intentProcessInputSchema,
+  }).handler(async (ctx) => {
+    const attemptedIds = new Set<number>()
+    const results: Array<IntentVersionProcessResult> = []
+    let selectIteration = 0
+
+    while (true) {
+      const versions = await ctx.step(
+        `select-pending-versions:${selectIteration}`,
+        () =>
+          operations.selectPendingIntentVersions({
+            limit: PROCESS_WORKFLOW_SELECT_LIMIT,
+            excludeIds: [...attemptedIds],
+          }),
+        selectPendingVersionsStepOptions,
+      )
+      selectIteration++
+
+      if (versions.length === 0) break
+
+      const unattemptedVersions = versions.filter(
+        (version) => !attemptedIds.has(version.id),
+      )
+      if (unattemptedVersions.length === 0) break
+
+      for (const version of unattemptedVersions) {
+        attemptedIds.add(version.id)
+
+        try {
+          results.push(
+            await ctx.step(
+              `process-version:${version.id}`,
+              () => operations.processIntentVersion(version.id),
+              processVersionStepOptions,
+            ),
+          )
+        } catch (error) {
+          results.push({
+            packageName: version.packageName,
+            version: version.version,
+            status: 'failed',
+            error: getErrorMessage(error),
+          })
+        }
+      }
+
+      if (versions.length < PROCESS_WORKFLOW_SELECT_LIMIT) break
+    }
+
+    return summarizeIntentProcessResults(results)
+  })
+}
+
+const intentDiscoverWorkflow = createIntentDiscoverWorkflow()
+const intentProcessWorkflow = createIntentProcessWorkflow()
+
+export const intentWorkflowRegistrations = {
+  [intentDiscoverWorkflow.id]: {
+    load: async () => intentDiscoverWorkflow,
+    schedules: [
+      {
+        id: INTENT_DISCOVER_SCHEDULE_ID,
+        schedule: every.hours(6),
+        overlapPolicy: 'skip',
+        input: { source: 'schedule' },
+      },
+    ],
+  },
+  [intentProcessWorkflow.id]: {
+    load: async () => intentProcessWorkflow,
+    schedules: [
+      {
+        id: INTENT_PROCESS_SCHEDULE_ID,
+        schedule: every.minutes(15),
+        overlapPolicy: 'skip',
+        input: {
+          source: 'schedule',
+        },
+      },
+    ],
+  },
+} satisfies WorkflowRegistrationMap
+
+function getErrorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error)
+}
diff --git a/src/utils/intent.functions.ts b/src/utils/intent.functions.ts
new file mode 100644
index 000000000..dc5fb6444
--- /dev/null
+++ b/src/utils/intent.functions.ts
@@ -0,0 +1,1116 @@
+import { createServerFn } from '@tanstack/react-start'
+import * as v from 'valibot'
+import {
+  getAllVerifiedPackages,
+  getPackageByName,
+  getPackageVersions,
+  getSkillsForVersion,
+  getSkillFingerprintsForVersion,
+  getIntentRegistryStats,
+  getLatestIntentVersionSkillSummaries,
+  searchPackagesByName,
+  searchSkills,
+  touchPackageSyncTime,
+  upsertIntentPackage,
+  getKnownVersions,
+  enqueuePackageVersion,
+  markVersionSynced,
+  markVersionFailed,
+  replaceSkillsForVersion,
+} from './intent-db.server'
+import {
+  searchIntentPackages,
+  fetchPackument,
+  selectVersionsToSync,
+  extractSkillsFromTarball,
+  fetchBulkDownloads,
+  searchIntentPackagesByText,
+} from './intent.server'
+import { fetchCached } from './cache.server'
+import type {
+  IntentPackage,
+  IntentPackageVersion,
+  SkillSearchResult,
+} from './intent-db.server'
+import type { NpmSearchResult } from './intent.server'
+import { npmPackageNameSchema } from './schemas'
+import { normalizePublicHttpUrl } from './url-boundary'
+
+// Re-export types used by routes
+export type { IntentPackage, IntentPackageVersion, SkillSearchResult }
+
+const emptyNpmSearchResult: NpmSearchResult = {
+  objects: [],
+  total: 0,
+  time: '',
+}
+
+const intentVersionSchema = v.pipe(
+  v.string(),
+  v.minLength(1),
+  v.maxLength(120),
+  v.regex(/^[a-z0-9.+_-]+$/i),
+)
+const intentSkillNameSchema = v.pipe(
+  v.string(),
+  v.minLength(1),
+  v.maxLength(160),
+)
+const intentSearchSchema = v.pipe(v.string(), v.maxLength(120))
+const intentFrameworkSchema = v.pipe(v.string(), v.maxLength(80))
+const intentPageSchema = v.pipe(v.number(), v.integer(), v.minValue(0))
+const intentPageSizeSchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(1),
+  v.maxValue(48),
+)
+const intentLimitSchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(1),
+  v.maxValue(50),
+)
+
+function normalizeRepositoryUrl(value: string | undefined | null) {
+  if (!value) return null
+
+  const withoutGitPrefix = value.replace(/^git\+/, '').replace(/\.git$/, '')
+  return normalizePublicHttpUrl(withoutGitPrefix)
+}
+
+function normalizeOptionalPublicHttpUrl(value: string | undefined | null) {
+  return normalizePublicHttpUrl(value) ?? undefined
+}
+
+function normalizeOptionalRepositoryUrl(value: string | undefined | null) {
+  return normalizeRepositoryUrl(value) ?? undefined
+}
+
+// ---------------------------------------------------------------------------
+// Enriched types (DB rows + live NPM metadata merged)
+// ---------------------------------------------------------------------------
+
+export interface EnrichedIntentPackage {
+  name: string
+  description: string
+  homepage?: string
+  repositoryUrl?: string
+  npmUrl: string
+  latestVersion: string
+  publishedAt: string | null
+  monthlyDownloads: number
+  weeklyDownloads: number
+  npmScore: number
+  skillNames: Array<string>
+  frameworks: Array<string>
+  firstSeenAt: Date
+  lastSyncedAt: Date
+}
+
+export interface IntentSkillSummary {
+  id: number
+  name: string
+  description: string | null
+  type: string | null
+  framework: string | null
+  requires: Array<string> | null
+  skillPath: string | null
+  contentHash: string
+  lineCount: number
+}
+
+export interface PackageVersionSummary {
+  id: number
+  version: string
+  skillCount: number
+  publishedAt: Date | null
+}
+
+export interface SkillHistoryEntry {
+  version: string
+  total: number
+  added: number
+  removed: number
+  modified: number
+}
+
+// ---------------------------------------------------------------------------
+// Registry stats (for hero banner)
+// ---------------------------------------------------------------------------
+
+export const getIntentStats = createServerFn({ method: 'GET' }).handler(
+  async () => {
+    return fetchCached({
+      key: 'intent:registry:stats',
+      ttl: 5 * 60 * 1000, // 5 minutes
+      fn: () => getIntentRegistryStats(),
+    })
+  },
+)
+
+// ---------------------------------------------------------------------------
+// Directory listing
+// ---------------------------------------------------------------------------
+
+export const getIntentDirectory = createServerFn({ method: 'GET' })
+  .validator(
+    v.object({
+      search: v.optional(intentSearchSchema),
+      framework: v.optional(intentFrameworkSchema),
+      sort: v.optional(v.picklist(['downloads', 'name', 'skills', 'newest'])),
+      page: v.optional(intentPageSchema),
+      pageSize: v.optional(intentPageSizeSchema),
+    }),
+  )
+  .handler(async ({ data }) => {
+    const {
+      search,
+      framework,
+      sort = 'downloads',
+      page = 0,
+      pageSize = 24,
+    } = data
+
+    const npmSearchPromise = fetchCached<NpmSearchResult>({
+      key: `intent:npm-search:${search ?? ''}`,
+      ttl: 5 * 60 * 1000,
+      fn: () =>
+        search ? searchIntentPackagesByText(search) : searchIntentPackages(),
+    }).catch(() => emptyNpmSearchResult)
+
+    const [
+      npmData,
+      verifiedPackages,
+      dbSearchMatches,
+      latestVersionSkillSummaries,
+    ] = await Promise.all([
+      npmSearchPromise,
+      getAllVerifiedPackages(),
+      search ? searchPackagesByName(search) : Promise.resolve([]),
+      fetchCached({
+        key: 'intent:latest-version-skill-summaries:v2',
+        ttl: 10 * 60 * 1000,
+        fn: () => getLatestIntentVersionSkillSummaries(),
+      }),
+    ])
+
+    // Fetch real download counts from the npm downloads API (cached 5 min)
+    const downloadCounts = await fetchCached({
+      key: 'intent:download-counts',
+      ttl: 5 * 60 * 1000,
+      fn: () => fetchBulkDownloads(verifiedPackages.map((p) => p.name)),
+    })
+
+    // Build the set of packages to show: union of NPM results + DB name matches
+    const npmByName = new Map(
+      npmData.objects.map((obj) => [obj.package.name, obj]),
+    )
+    const dbMatchNames = new Set(dbSearchMatches.map((p) => p.name))
+    const summaryByPackageName = new Map(
+      latestVersionSkillSummaries.map((summary) => [
+        summary.packageName,
+        summary,
+      ]),
+    )
+
+    // Merge: DB record + NPM metadata. Only show verified packages.
+    const packages: Array<EnrichedIntentPackage> = []
+    for (const pkg of verifiedPackages) {
+      const npmObj = npmByName.get(pkg.name)
+      // Include if: matches NPM search, matches DB name search, or no search (show all)
+      if (search && !npmObj && !dbMatchNames.has(pkg.name)) continue
+
+      const npmPkg = npmObj?.package
+      const summary = summaryByPackageName.get(pkg.name)
+      const skillNames = summary?.skillNames ?? []
+      const frameworks = summary?.frameworks ?? []
+
+      // Filter by framework if requested
+      if (framework && !frameworks.includes(framework)) continue
+
+      packages.push({
+        name: pkg.name,
+        description: npmPkg?.description ?? '',
+        homepage: normalizeOptionalPublicHttpUrl(npmPkg?.links.homepage),
+        repositoryUrl: normalizeOptionalRepositoryUrl(npmPkg?.links.repository),
+        npmUrl:
+          normalizePublicHttpUrl(npmPkg?.links.npm) ??
+          `https://www.npmjs.com/package/${pkg.name}`,
+        latestVersion: summary?.latestVersion ?? 'unknown',
+        publishedAt: summary?.publishedAt?.toISOString() ?? null,
+        monthlyDownloads: downloadCounts.get(pkg.name) ?? 0,
+        weeklyDownloads: 0,
+        npmScore: npmObj?.score.final ?? 0,
+        skillNames,
+        frameworks,
+        firstSeenAt: pkg.firstSeenAt,
+        lastSyncedAt: pkg.lastSyncedAt,
+      })
+    }
+
+    // Sort
+    switch (sort) {
+      case 'downloads':
+        packages.sort((a, b) => b.monthlyDownloads - a.monthlyDownloads)
+        break
+      case 'name':
+        packages.sort((a, b) => a.name.localeCompare(b.name))
+        break
+      case 'skills':
+        packages.sort((a, b) => b.skillNames.length - a.skillNames.length)
+        break
+      case 'newest':
+        packages.sort((a, b) => {
+          const aDate = a.publishedAt ? new Date(a.publishedAt).getTime() : 0
+          const bDate = b.publishedAt ? new Date(b.publishedAt).getTime() : 0
+          return bDate - aDate
+        })
+        break
+    }
+
+    const total = packages.length
+    const paginated = packages.slice(page * pageSize, (page + 1) * pageSize)
+
+    return { packages: paginated, total, page, pageSize }
+  })
+
+// ---------------------------------------------------------------------------
+// Single package detail
+// ---------------------------------------------------------------------------
+
+// In-memory cache of package names that have no skills on NPM.
+// Prevents hammering the NPM registry for packages that will never have skills.
+// Maps name -> expiry timestamp (10 min TTL).
+const rejectedPackages = new Map<string, number>()
+const REJECTION_TTL = 10 * 60 * 1000
+
+function isRejected(name: string): boolean {
+  const expiry = rejectedPackages.get(name)
+  if (expiry === undefined) return false
+  if (Date.now() > expiry) {
+    rejectedPackages.delete(name)
+    return false
+  }
+  return true
+}
+
+// Build the standard return shape from a packument + DB versions
+async function buildPackageDetail(
+  name: string,
+  packument: Awaited<ReturnType<typeof fetchPackument>>,
+  versions: Awaited<ReturnType<typeof getPackageVersions>>,
+  pkg: IntentPackage,
+) {
+  const latestVersion = packument['dist-tags'].latest ?? ''
+  const latestMeta = latestVersion ? packument.versions[latestVersion] : null
+
+  const repoUrl = latestMeta?.repository
+    ? typeof latestMeta.repository === 'string'
+      ? normalizeRepositoryUrl(latestMeta.repository)
+      : normalizeRepositoryUrl(latestMeta.repository.url)
+    : undefined
+
+  return {
+    name,
+    description: latestMeta?.description ?? '',
+    homepage: normalizePublicHttpUrl(latestMeta?.homepage) ?? null,
+    repositoryUrl: repoUrl ?? null,
+    npmUrl: `https://www.npmjs.com/package/${name}`,
+    latestVersion,
+    versions: versions.map(
+      (ver): PackageVersionSummary => ({
+        id: ver.id,
+        version: ver.version,
+        skillCount: ver.skillCount,
+        publishedAt: ver.publishedAt,
+      }),
+    ),
+    firstSeenAt: pkg.firstSeenAt,
+    lastSyncedAt: pkg.lastSyncedAt,
+  }
+}
+
+export type IntentPackageDetail = Awaited<ReturnType<typeof buildPackageDetail>>
+
+// Inline-seed a package that's not yet in the DB.
+// Fetches packument, downloads latest tarball, extracts skills, seeds DB.
+// Returns the package detail shape or null if the package has no skills / doesn't exist.
+async function inlineSeedPackage(name: string) {
+  // Fetch packument to verify the package exists on NPM
+  let packument: Awaited<ReturnType<typeof fetchPackument>>
+  try {
+    packument = await fetchPackument(name)
+  } catch {
+    // Package doesn't exist on NPM
+    return null
+  }
+
+  const latestVersion = packument['dist-tags'].latest
+  if (!latestVersion) return null
+
+  const latestMeta = packument.versions[latestVersion]
+  if (!latestMeta) return null
+
+  const tarballUrl = latestMeta.dist.tarball
+
+  // Extract skills from the tarball inline
+  let skills: Awaited<ReturnType<typeof extractSkillsFromTarball>>
+  try {
+    skills = await extractSkillsFromTarball(tarballUrl)
+  } catch {
+    return null
+  }
+
+  if (skills.length === 0) {
+    // Remember that this package has no skills so we don't re-check it
+    rejectedPackages.set(name, Date.now() + REJECTION_TTL)
+    return null
+  }
+
+  // Seed DB: upsert package as verified, enqueue and immediately process the latest version
+  await upsertIntentPackage({ name, verified: true })
+
+  const publishedAt = packument.time[latestVersion]
+    ? new Date(packument.time[latestVersion])
+    : null
+
+  await enqueuePackageVersion({
+    packageName: name,
+    version: latestVersion,
+    tarballUrl,
+    publishedAt,
+  })
+
+  // Version row might still be pending (we just inserted), so fetch it directly
+  // instead of using getPackageVersions which only returns synced rows
+  const { db } = await import('~/db/client')
+  const { intentPackageVersions } = await import('~/db/schema')
+  const { eq, and } = await import('drizzle-orm')
+  const versionRow = await db.query.intentPackageVersions.findFirst({
+    where: and(
+      eq(intentPackageVersions.packageName, name),
+      eq(intentPackageVersions.version, latestVersion),
+    ),
+  })
+
+  if (versionRow) {
+    try {
+      await replaceSkillsForVersion(versionRow.id, skills)
+      await markVersionSynced(versionRow.id, skills.length)
+    } catch (err) {
+      await markVersionFailed(
+        versionRow.id,
+        err instanceof Error ? err.message : String(err),
+      )
+    }
+  }
+
+  // Enqueue additional older versions in the background (don't block)
+  void (async () => {
+    try {
+      const knownVersions = await getKnownVersions(name)
+      const toEnqueue = selectVersionsToSync(packument, knownVersions)
+      for (const { version, tarball, publishedAt: pAt } of toEnqueue) {
+        await enqueuePackageVersion({
+          packageName: name,
+          version,
+          tarballUrl: tarball,
+          publishedAt: pAt,
+        })
+      }
+    } catch {
+      // best-effort
+    }
+  })()
+
+  const pkg = await getPackageByName(name)
+  if (!pkg) return null
+
+  const syncedVersions = await getPackageVersions(name)
+  return buildPackageDetail(name, packument, syncedVersions, pkg)
+}
+
+// Fire-and-forget background refresh: fetches the latest packument and enqueues
+// any new versions, then touches lastSyncedAt to reset the staleness clock.
+function refreshPackageInBackground(name: string): void {
+  void (async () => {
+    try {
+      await touchPackageSyncTime(name)
+      const packument = await fetchPackument(name)
+      const knownVersions = await getKnownVersions(name)
+      const toEnqueue = selectVersionsToSync(packument, knownVersions)
+      for (const { version, tarball, publishedAt } of toEnqueue) {
+        await enqueuePackageVersion({
+          packageName: name,
+          version,
+          tarballUrl: tarball,
+          publishedAt,
+        })
+      }
+    } catch {
+      // best-effort
+    }
+  })()
+}
+
+export const getIntentPackageDetail = createServerFn({ method: 'GET' })
+  .validator(v.object({ name: npmPackageNameSchema }))
+  .handler(async ({ data }) => {
+    const { name } = data
+
+    // Quick rejection cache check (packages confirmed to have no skills)
+    if (isRejected(name)) return null
+
+    const pkg = await getPackageByName(name)
+
+    if (!pkg) {
+      // Cold path: package not in DB at all — inline seed from NPM
+      return inlineSeedPackage(name)
+    }
+
+    // Package is in DB. Fetch packument + versions in parallel.
+    const [packument, versions] = await Promise.all([
+      fetchCached({
+        key: `intent:packument:${name}`,
+        ttl: 10 * 60 * 1000,
+        fn: () => fetchPackument(name),
+      }),
+      getPackageVersions(name),
+    ])
+
+    const FRESH_TTL = 5 * 60 * 1000
+    const fresh = Date.now() - pkg.lastSyncedAt.getTime() < FRESH_TTL
+    if (!fresh) {
+      // Stale path: return data immediately, refresh in background
+      refreshPackageInBackground(name)
+    }
+    // Fast path: return data immediately (no background work needed)
+
+    return buildPackageDetail(name, packument, versions, pkg)
+  })
+
+// ---------------------------------------------------------------------------
+// Skills for a specific synced version
+// ---------------------------------------------------------------------------
+
+export const getIntentVersionSkills = createServerFn({ method: 'GET' })
+  .validator(
+    v.object({
+      packageName: npmPackageNameSchema,
+      version: intentVersionSchema,
+    }),
+  )
+  .handler(async ({ data }) => {
+    const versions = await getPackageVersions(data.packageName)
+    const versionRecord = versions.find((v) => v.version === data.version)
+    if (!versionRecord) return null
+
+    const skills = await fetchCached({
+      key: `intent:skills:${versionRecord.id}`,
+      ttl: 30 * 60 * 1000,
+      fn: () => getSkillsForVersion(versionRecord.id),
+    })
+
+    return {
+      packageName: data.packageName,
+      version: data.version,
+      versionId: versionRecord.id,
+      skills: skills.map(
+        (s): IntentSkillSummary => ({
+          id: s.id,
+          name: s.name,
+          description: s.description,
+          type: s.type,
+          framework: s.framework,
+          requires: s.requires,
+          skillPath: s.skillPath,
+          contentHash: s.contentHash,
+          lineCount: s.lineCount,
+        }),
+      ),
+    }
+  })
+
+function stripFrontmatter(content: string) {
+  const lines = content.split('\n')
+
+  if (lines[0]?.trim() !== '---') {
+    return content
+  }
+
+  const closing = lines.findIndex(
+    (line, index) => index > 0 && line.trim() === '---',
+  )
+
+  if (closing === -1) {
+    return content
+  }
+
+  return lines
+    .slice(closing + 1)
+    .join('\n')
+    .trimStart()
+}
+
+export const getIntentSkillPage = createServerFn({ method: 'GET' })
+  .validator(
+    v.object({
+      packageName: npmPackageNameSchema,
+      skillName: intentSkillNameSchema,
+      version: intentVersionSchema,
+    }),
+  )
+  .handler(async ({ data }) => {
+    const versions = await getPackageVersions(data.packageName)
+    const versionRecord = versions.find(
+      (version) => version.version === data.version,
+    )
+
+    if (!versionRecord) {
+      return null
+    }
+
+    const skills = await fetchCached({
+      key: `intent:skills:${versionRecord.id}`,
+      ttl: 30 * 60 * 1000,
+      fn: () => getSkillsForVersion(versionRecord.id),
+    })
+    const skill = skills.find((candidate) => candidate.name === data.skillName)
+
+    if (!skill) {
+      return null
+    }
+
+    return {
+      content: stripFrontmatter(skill.content),
+    }
+  })
+
+export const getIntentSkillMarkdown = createServerFn({ method: 'GET' })
+  .validator(
+    v.object({
+      packageName: npmPackageNameSchema,
+      skillName: intentSkillNameSchema,
+      version: intentVersionSchema,
+    }),
+  )
+  .handler(async ({ data }) => {
+    const versions = await getPackageVersions(data.packageName)
+    const versionRecord = versions.find(
+      (version) => version.version === data.version,
+    )
+
+    if (!versionRecord) {
+      return null
+    }
+
+    const skills = await fetchCached({
+      key: `intent:skills:${versionRecord.id}`,
+      ttl: 30 * 60 * 1000,
+      fn: () => getSkillsForVersion(versionRecord.id),
+    })
+    const skill = skills.find((candidate) => candidate.name === data.skillName)
+
+    if (!skill) {
+      return null
+    }
+
+    return stripFrontmatter(skill.content)
+  })
+
+// ---------------------------------------------------------------------------
+// Diff: compare skills between two versions
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Skill search across all packages
+// ---------------------------------------------------------------------------
+
+export const searchIntentSkills = createServerFn({ method: 'GET' })
+  .validator(
+    v.object({
+      query: intentSearchSchema,
+      limit: v.optional(intentLimitSchema),
+    }),
+  )
+  .handler(async ({ data }) => {
+    const { query, limit = 50 } = data
+    if (!query.trim()) {
+      const empty: Array<SkillSearchResult> = []
+      return empty
+    }
+    return searchSkills(query.trim(), limit)
+  })
+
+// ---------------------------------------------------------------------------
+// Diff
+// ---------------------------------------------------------------------------
+
+export interface SkillDiff {
+  added: Array<IntentSkillSummary>
+  removed: Array<IntentSkillSummary>
+  modified: Array<{ from: IntentSkillSummary; to: IntentSkillSummary }>
+  unchanged: Array<IntentSkillSummary>
+}
+
+export const diffIntentVersions = createServerFn({ method: 'GET' })
+  .validator(
+    v.object({
+      packageName: npmPackageNameSchema,
+      fromVersion: intentVersionSchema,
+      toVersion: intentVersionSchema,
+    }),
+  )
+  .handler(async ({ data }) => {
+    const versions = await getPackageVersions(data.packageName)
+
+    const fromRecord = versions.find((v) => v.version === data.fromVersion)
+    const toRecord = versions.find((v) => v.version === data.toVersion)
+
+    if (!fromRecord || !toRecord) return null
+
+    const [fromSkills, toSkills] = await Promise.all([
+      fetchCached({
+        key: `intent:skills:${fromRecord.id}`,
+        ttl: 30 * 60 * 1000,
+        fn: () => getSkillsForVersion(fromRecord.id),
+      }),
+      fetchCached({
+        key: `intent:skills:${toRecord.id}`,
+        ttl: 30 * 60 * 1000,
+        fn: () => getSkillsForVersion(toRecord.id),
+      }),
+    ])
+
+    const fromMap = new Map(fromSkills.map((s) => [s.name, s]))
+    const toMap = new Map(toSkills.map((s) => [s.name, s]))
+
+    const toSummary = (s: (typeof fromSkills)[number]): IntentSkillSummary => ({
+      id: s.id,
+      name: s.name,
+      description: s.description,
+      type: s.type,
+      framework: s.framework,
+      requires: s.requires,
+      skillPath: s.skillPath,
+      contentHash: s.contentHash,
+      lineCount: s.lineCount,
+    })
+
+    const diff: SkillDiff = {
+      added: [],
+      removed: [],
+      modified: [],
+      unchanged: [],
+    }
+
+    for (const [name, toSkill] of toMap) {
+      const fromSkill = fromMap.get(name)
+      if (!fromSkill) {
+        diff.added.push(toSummary(toSkill))
+      } else if (fromSkill.contentHash !== toSkill.contentHash) {
+        diff.modified.push({
+          from: toSummary(fromSkill),
+          to: toSummary(toSkill),
+        })
+      } else {
+        diff.unchanged.push(toSummary(toSkill))
+      }
+    }
+
+    for (const [name, fromSkill] of fromMap) {
+      if (!toMap.has(name)) {
+        diff.removed.push(toSummary(fromSkill))
+      }
+    }
+
+    return {
+      packageName: data.packageName,
+      fromVersion: data.fromVersion,
+      toVersion: data.toVersion,
+      diff,
+    }
+  })
+
+// ---------------------------------------------------------------------------
+// Skill history sparkline data (last N versions per package, batch)
+// ---------------------------------------------------------------------------
+
+export const getIntentSkillHistory = createServerFn({ method: 'GET' })
+  .validator(
+    v.object({
+      packageNames: v.pipe(v.array(npmPackageNameSchema), v.maxLength(12)),
+      limit: v.optional(intentLimitSchema),
+    }),
+  )
+  .handler(
+    async ({ data }): Promise<Record<string, Array<SkillHistoryEntry>>> => {
+      const { packageNames, limit = 10 } = data
+      const result: Record<string, Array<SkillHistoryEntry>> = {}
+
+      await Promise.all(
+        packageNames.map(async (name) => {
+          const allVersions = await fetchCached({
+            key: `intent:versions:${name}`,
+            ttl: 10 * 60 * 1000,
+            fn: () => getPackageVersions(name),
+          })
+
+          // getPackageVersions returns newest-first; reverse to chronological,
+          // then take the last N
+          const versions = allVersions.slice().reverse().slice(-limit)
+          if (versions.length === 0) {
+            result[name] = []
+            return
+          }
+
+          // Fetch fingerprints for all versions in parallel
+          const fingerprints = await Promise.all(
+            versions.map((ver) =>
+              fetchCached({
+                key: `intent:fingerprints:${ver.id}`,
+                ttl: 30 * 60 * 1000,
+                fn: () => getSkillFingerprintsForVersion(ver.id),
+              }),
+            ),
+          )
+
+          const entries: Array<SkillHistoryEntry> = []
+
+          for (let i = 0; i < versions.length; i++) {
+            const ver = versions[i]
+            const current = fingerprints[i]
+            const currentMap = new Map(
+              current.map((s) => [s.name, s.contentHash]),
+            )
+
+            if (i === 0) {
+              entries.push({
+                version: ver.version,
+                total: current.length,
+                added: current.length,
+                removed: 0,
+                modified: 0,
+              })
+            } else {
+              const prev = fingerprints[i - 1]
+              const prevMap = new Map(prev.map((s) => [s.name, s.contentHash]))
+
+              let added = 0
+              let modified = 0
+              for (const [name, hash] of currentMap) {
+                const prevHash = prevMap.get(name)
+                if (prevHash === undefined) added++
+                else if (prevHash !== hash) modified++
+              }
+
+              let removed = 0
+              for (const name of prevMap.keys()) {
+                if (!currentMap.has(name)) removed++
+              }
+
+              entries.push({
+                version: ver.version,
+                total: current.length,
+                added,
+                removed,
+                modified,
+              })
+            }
+          }
+
+          result[name] = entries
+        }),
+      )
+
+      return result
+    },
+  )
+
+// ---------------------------------------------------------------------------
+// Package changelog (named skill diffs per consecutive version pair)
+// ---------------------------------------------------------------------------
+
+export interface ChangelogEntry {
+  version: string
+  publishedAt: Date | null
+  total: number
+  diff: SkillDiff | null
+}
+
+export const getIntentPackageChangelog = createServerFn({ method: 'GET' })
+  .validator(
+    v.object({
+      packageName: npmPackageNameSchema,
+      limit: v.optional(intentLimitSchema),
+    }),
+  )
+  .handler(async ({ data }): Promise<Array<ChangelogEntry>> => {
+    const { packageName, limit = 20 } = data
+
+    const allVersions = await fetchCached({
+      key: `intent:versions:${packageName}`,
+      ttl: 10 * 60 * 1000,
+      fn: () => getPackageVersions(packageName),
+    })
+
+    // Newest-first from DB; reverse to chronological, take last N
+    const versions = allVersions.slice().reverse().slice(-limit)
+    if (versions.length === 0) return []
+
+    // Fetch all skills for each version (uses content-addressed caching)
+    const allSkills = await Promise.all(
+      versions.map((ver) =>
+        fetchCached({
+          key: `intent:skills:${ver.id}`,
+          ttl: 30 * 60 * 1000,
+          fn: () => getSkillsForVersion(ver.id),
+        }),
+      ),
+    )
+
+    const toSummary = (
+      s: (typeof allSkills)[number][number],
+    ): IntentSkillSummary => ({
+      id: s.id,
+      name: s.name,
+      description: s.description,
+      type: s.type,
+      framework: s.framework,
+      requires: s.requires,
+      skillPath: s.skillPath,
+      contentHash: s.contentHash,
+      lineCount: s.lineCount,
+    })
+
+    const entries: Array<ChangelogEntry> = []
+
+    for (let i = 0; i < versions.length; i++) {
+      const ver = versions[i]
+      const currentSkills = allSkills[i]
+
+      if (i === 0) {
+        // First version in window — all skills are "added", no prior to diff against
+        entries.push({
+          version: ver.version,
+          publishedAt: ver.publishedAt,
+          total: currentSkills.length,
+          diff: {
+            added: currentSkills.map(toSummary),
+            removed: [],
+            modified: [],
+            unchanged: [],
+          },
+        })
+        continue
+      }
+
+      const prevSkills = allSkills[i - 1]
+      const prevMap = new Map(prevSkills.map((s) => [s.name, s]))
+      const currMap = new Map(currentSkills.map((s) => [s.name, s]))
+
+      const diff: SkillDiff = {
+        added: [],
+        removed: [],
+        modified: [],
+        unchanged: [],
+      }
+
+      for (const [name, curr] of currMap) {
+        const prev = prevMap.get(name)
+        if (!prev) {
+          diff.added.push(toSummary(curr))
+        } else if (prev.contentHash !== curr.contentHash) {
+          diff.modified.push({
+            from: toSummary(prev),
+            to: toSummary(curr),
+          })
+        } else {
+          diff.unchanged.push(toSummary(curr))
+        }
+      }
+
+      for (const [name, prev] of prevMap) {
+        if (!currMap.has(name)) {
+          diff.removed.push(toSummary(prev))
+        }
+      }
+
+      entries.push({
+        version: ver.version,
+        publishedAt: ver.publishedAt,
+        total: currentSkills.length,
+        diff,
+      })
+    }
+
+    // Return newest-first for display
+    return entries.reverse()
+  })
+
+// ---------------------------------------------------------------------------
+// Skill content diff between two versions (for inline diff viewer)
+// ---------------------------------------------------------------------------
+
+export const getIntentSkillContentDiff = createServerFn({ method: 'GET' })
+  .validator(
+    v.object({
+      packageName: npmPackageNameSchema,
+      skillName: intentSkillNameSchema,
+      fromVersion: intentVersionSchema,
+      toVersion: intentVersionSchema,
+    }),
+  )
+  .handler(async ({ data }) => {
+    const versions = await getPackageVersions(data.packageName)
+
+    const fromRecord = versions.find((ver) => ver.version === data.fromVersion)
+    const toRecord = versions.find((ver) => ver.version === data.toVersion)
+
+    if (!fromRecord || !toRecord) return null
+
+    const [fromSkills, toSkills] = await Promise.all([
+      fetchCached({
+        key: `intent:skills:${fromRecord.id}`,
+        ttl: 30 * 60 * 1000,
+        fn: () => getSkillsForVersion(fromRecord.id),
+      }),
+      fetchCached({
+        key: `intent:skills:${toRecord.id}`,
+        ttl: 30 * 60 * 1000,
+        fn: () => getSkillsForVersion(toRecord.id),
+      }),
+    ])
+
+    const fromSkill = fromSkills.find((s) => s.name === data.skillName)
+    const toSkill = toSkills.find((s) => s.name === data.skillName)
+
+    return {
+      fromContent: fromSkill?.content ?? null,
+      toContent: toSkill?.content ?? null,
+      fromVersion: data.fromVersion,
+      toVersion: data.toVersion,
+    }
+  })
+
+// ---------------------------------------------------------------------------
+// Single-skill version history (how one skill evolved across versions)
+// ---------------------------------------------------------------------------
+
+export interface SkillVersionEntry {
+  version: string
+  publishedAt: Date | null
+  status: 'added' | 'modified' | 'unchanged' | 'removed'
+  skill: IntentSkillSummary | null
+  lineCountDelta: number | null
+}
+
+export const getIntentSingleSkillHistory = createServerFn({ method: 'GET' })
+  .validator(
+    v.object({
+      packageName: npmPackageNameSchema,
+      skillName: intentSkillNameSchema,
+    }),
+  )
+  .handler(async ({ data }): Promise<Array<SkillVersionEntry>> => {
+    const allVersions = await fetchCached({
+      key: `intent:versions:${data.packageName}`,
+      ttl: 10 * 60 * 1000,
+      fn: () => getPackageVersions(data.packageName),
+    })
+
+    // Newest-first from DB; reverse to chronological
+    const versions = allVersions.slice().reverse()
+    if (versions.length === 0) return []
+
+    // Fetch fingerprints for each version (lightweight)
+    const allFingerprints = await Promise.all(
+      versions.map((ver) =>
+        fetchCached({
+          key: `intent:fingerprints:${ver.id}`,
+          ttl: 30 * 60 * 1000,
+          fn: () => getSkillFingerprintsForVersion(ver.id),
+        }),
+      ),
+    )
+
+    // For versions where the skill exists, fetch full skill data
+    const skillDataByVersion = await Promise.all(
+      versions.map(async (ver, i) => {
+        const fp = allFingerprints[i].find((s) => s.name === data.skillName)
+        if (!fp) return null
+        // Fetch full skills and find the one we want
+        const skills = await fetchCached({
+          key: `intent:skills:${ver.id}`,
+          ttl: 30 * 60 * 1000,
+          fn: () => getSkillsForVersion(ver.id),
+        })
+        return skills.find((s) => s.name === data.skillName) ?? null
+      }),
+    )
+
+    const toSummary = (
+      s: NonNullable<(typeof skillDataByVersion)[number]>,
+    ): IntentSkillSummary => ({
+      id: s.id,
+      name: s.name,
+      description: s.description,
+      type: s.type,
+      framework: s.framework,
+      requires: s.requires,
+      skillPath: s.skillPath,
+      contentHash: s.contentHash,
+      lineCount: s.lineCount,
+    })
+
+    const entries: Array<SkillVersionEntry> = []
+
+    for (let i = 0; i < versions.length; i++) {
+      const ver = versions[i]
+      const current = skillDataByVersion[i]
+      const prev = i > 0 ? skillDataByVersion[i - 1] : null
+
+      if (!current) {
+        if (prev) {
+          entries.push({
+            version: ver.version,
+            publishedAt: ver.publishedAt,
+            status: 'removed',
+            skill: null,
+            lineCountDelta: prev ? -prev.lineCount : null,
+          })
+        }
+        continue
+      }
+
+      if (!prev) {
+        entries.push({
+          version: ver.version,
+          publishedAt: ver.publishedAt,
+          status: 'added',
+          skill: toSummary(current),
+          lineCountDelta: current.lineCount,
+        })
+      } else if (prev.contentHash !== current.contentHash) {
+        entries.push({
+          version: ver.version,
+          publishedAt: ver.publishedAt,
+          status: 'modified',
+          skill: toSummary(current),
+          lineCountDelta: current.lineCount - prev.lineCount,
+        })
+      } else {
+        entries.push({
+          version: ver.version,
+          publishedAt: ver.publishedAt,
+          status: 'unchanged',
+          skill: toSummary(current),
+          lineCountDelta: 0,
+        })
+      }
+    }
+
+    // Return newest-first for display
+    return entries.reverse()
+  })
diff --git a/src/utils/intent.server.ts b/src/utils/intent.server.ts
new file mode 100644
index 000000000..494718880
--- /dev/null
+++ b/src/utils/intent.server.ts
@@ -0,0 +1,606 @@
+import { createGunzip } from 'node:zlib'
+import { createHash } from 'node:crypto'
+import { Readable, Transform } from 'node:stream'
+import extract from 'tar-stream'
+import { fetchWithTimeout } from './outbound-fetch.server'
+
+// ---------------------------------------------------------------------------
+// NPM Registry API types
+// ---------------------------------------------------------------------------
+
+export interface NpmSearchResult {
+  objects: Array<{
+    package: {
+      name: string
+      version: string
+      description: string
+      keywords?: Array<string>
+      date: string
+      links: {
+        npm?: string
+        homepage?: string
+        repository?: string
+        bugs?: string
+      }
+      publisher?: { username: string; email: string }
+      maintainers: Array<{ username: string; email: string }>
+    }
+    score: {
+      final: number
+      detail: { quality: number; popularity: number; maintenance: number }
+    }
+    downloads?: { monthly: number; weekly: number }
+  }>
+  total: number
+  time: string
+}
+
+export interface NpmPackument {
+  name: string
+  description?: string
+  'dist-tags': Record<string, string>
+  versions: Record<
+    string,
+    {
+      name: string
+      version: string
+      description?: string
+      keywords?: Array<string>
+      homepage?: string
+      repository?: { type: string; url: string } | string
+      bin?: Record<string, string>
+      dist: {
+        tarball: string
+        shasum: string
+        integrity?: string
+        fileCount?: number
+        unpackedSize?: number
+      }
+      time?: string
+    }
+  >
+  time: Record<string, string>
+}
+
+export interface ParsedSkill {
+  name: string
+  description: string
+  type?: string
+  framework?: string
+  requires?: Array<string>
+  contentHash: string
+  content: string
+  lineCount: number
+  skillPath: string
+}
+
+// ---------------------------------------------------------------------------
+// NPM Registry fetch helpers
+// ---------------------------------------------------------------------------
+
+const NPM_REGISTRY = 'https://registry.npmjs.org'
+const NPM_FETCH_TIMEOUT_MS = 10_000
+const MAX_TARBALL_BYTES = 20 * 1024 * 1024
+const MAX_SKILL_FILE_BYTES = 256 * 1024
+const MAX_SKILLS_PER_TARBALL = 100
+const MAX_INTENT_SEARCH_RESULTS = 1_000
+const ALLOWED_TARBALL_HOSTS = new Set([
+  'registry.npmjs.org',
+  'registry.npmjs.com',
+])
+
+async function cancelUnusedResponseBody(response: Response): Promise<void> {
+  if (!response.body) return
+
+  try {
+    await response.body.cancel()
+  } catch {
+    // Best effort cleanup for responses we intentionally do not read.
+  }
+}
+
+async function parseJsonIfOk<T>(response: Response): Promise<T | null> {
+  if (!response.ok) {
+    await cancelUnusedResponseBody(response)
+    return null
+  }
+
+  return response.json()
+}
+
+async function fetchNpmSearch(url: string): Promise<NpmSearchResult> {
+  const res = await fetchWithTimeout(url, {
+    headers: { Accept: 'application/json' },
+    timeoutMs: NPM_FETCH_TIMEOUT_MS,
+  })
+
+  if (!res.ok) {
+    await cancelUnusedResponseBody(res)
+    throw new Error(`NPM search failed: ${res.status} ${res.statusText}`)
+  }
+
+  const data: NpmSearchResult = await res.json()
+  return data
+}
+
+function validateNpmTarballUrl(tarballUrl: string) {
+  try {
+    const url = new URL(tarballUrl)
+    return (
+      url.protocol === 'https:' &&
+      ALLOWED_TARBALL_HOSTS.has(url.hostname.toLowerCase()) &&
+      !url.pathname.includes('..')
+    )
+  } catch {
+    return false
+  }
+}
+
+function createByteLimitStream(maxBytes: number, label: string) {
+  let totalBytes = 0
+
+  return new Transform({
+    transform(chunk: Buffer, _encoding, callback) {
+      totalBytes += chunk.byteLength
+      if (totalBytes > maxBytes) {
+        callback(new Error(`${label} exceeds ${maxBytes} bytes`))
+        return
+      }
+
+      callback(null, chunk)
+    },
+  })
+}
+
+function isSafeSkillPath(skillPath: string) {
+  return (
+    skillPath.length > 0 &&
+    skillPath.length <= 240 &&
+    !skillPath.includes('\\') &&
+    skillPath
+      .split('/')
+      .every(
+        (segment) =>
+          segment &&
+          segment !== '.' &&
+          segment !== '..' &&
+          /^[a-z0-9._-]+$/i.test(segment),
+      )
+  )
+}
+
+export async function searchIntentPackages(): Promise<NpmSearchResult> {
+  const results: NpmSearchResult = { objects: [], total: 0, time: '' }
+  let from = 0
+  const size = 250
+
+  while (true) {
+    const url = `${NPM_REGISTRY}/-/v1/search?text=keywords:tanstack-intent&size=${size}&from=${from}`
+    const page = await fetchNpmSearch(url)
+
+    results.objects.push(...page.objects)
+    results.total = page.total
+    results.time = page.time
+
+    from += size
+    if (
+      from >= page.total ||
+      page.objects.length === 0 ||
+      results.objects.length >= MAX_INTENT_SEARCH_RESULTS
+    ) {
+      results.objects = results.objects.slice(0, MAX_INTENT_SEARCH_RESULTS)
+      results.total = Math.min(results.total, MAX_INTENT_SEARCH_RESULTS)
+      break
+    }
+  }
+
+  return results
+}
+
+export async function searchIntentPackagesByText(
+  search: string,
+): Promise<NpmSearchResult> {
+  return fetchNpmSearch(
+    `${NPM_REGISTRY}/-/v1/search?text=${encodeURIComponent(search)}+keywords:tanstack-intent&size=250`,
+  )
+}
+
+// ---------------------------------------------------------------------------
+// NPM download counts (separate API from the registry)
+// ---------------------------------------------------------------------------
+
+const NPM_DOWNLOADS_API = 'https://api.npmjs.org'
+
+export interface NpmDownloadCounts {
+  [packageName: string]: { downloads: number; start: string; end: string }
+}
+
+// Fetch last-month download counts for a list of package names.
+// Scoped packages (@org/pkg) must be fetched individually; unscoped can be
+// bulk-fetched in a single comma-separated request.
+export async function fetchBulkDownloads(
+  names: Array<string>,
+): Promise<Map<string, number>> {
+  const result = new Map<string, number>()
+  if (names.length === 0) return result
+
+  const scoped = names.filter((n) => n.startsWith('@'))
+  const unscoped = names.filter((n) => !n.startsWith('@'))
+
+  // Bulk fetch unscoped (npm supports comma-separated bulk endpoint)
+  // Chunk into batches of 128 to stay under URL length limits
+  const CHUNK = 128
+  const unscopedFetches: Array<Promise<void>> = []
+  for (let i = 0; i < unscoped.length; i += CHUNK) {
+    const batch = unscoped.slice(i, i + CHUNK)
+    unscopedFetches.push(
+      fetchWithTimeout(
+        `${NPM_DOWNLOADS_API}/downloads/point/last-month/${batch.join(',')}`,
+        { timeoutMs: NPM_FETCH_TIMEOUT_MS },
+      )
+        .then((r) => parseJsonIfOk<NpmDownloadCounts>(r))
+        .then((data) => {
+          if (!data) return
+          for (const [name, info] of Object.entries(data)) {
+            if (info?.downloads != null) {
+              result.set(name, info.downloads)
+            }
+          }
+        })
+        .catch(() => {}),
+    )
+  }
+
+  // Scoped packages: individual fetches in parallel
+  const SCOPED_CONCURRENCY = 8
+  await Promise.all(unscopedFetches)
+
+  for (let i = 0; i < scoped.length; i += SCOPED_CONCURRENCY) {
+    await Promise.all(
+      scoped.slice(i, i + SCOPED_CONCURRENCY).map((name) =>
+        fetchWithTimeout(
+          `${NPM_DOWNLOADS_API}/downloads/point/last-month/${name}`,
+          { timeoutMs: NPM_FETCH_TIMEOUT_MS },
+        )
+          .then((r) => parseJsonIfOk<{ downloads: number; package: string }>(r))
+          .then((data) => {
+            if (data?.downloads != null) {
+              result.set(name, data.downloads)
+            }
+          })
+          .catch(() => {}),
+      ),
+    )
+  }
+
+  return result
+}
+
+export async function fetchPackument(name: string): Promise<NpmPackument> {
+  const encoded = name.startsWith('@')
+    ? `@${encodeURIComponent(name.slice(1))}`
+    : encodeURIComponent(name)
+  const url = `${NPM_REGISTRY}/${encoded}`
+  const res = await fetchWithTimeout(url, {
+    headers: { Accept: 'application/json' },
+    timeoutMs: NPM_FETCH_TIMEOUT_MS,
+  })
+  if (!res.ok) {
+    await cancelUnusedResponseBody(res)
+    throw new Error(
+      `Failed to fetch packument for ${name}: ${res.status} ${res.statusText}`,
+    )
+  }
+  return (await res.json()) as NpmPackument
+}
+
+// ---------------------------------------------------------------------------
+// Intent compatibility check
+// ---------------------------------------------------------------------------
+
+export function isIntentCompatible(
+  versionMeta: NpmPackument['versions'][string],
+): boolean {
+  return versionMeta.keywords?.includes('tanstack-intent') ?? false
+}
+
+// ---------------------------------------------------------------------------
+// Version selection: latest + up to 4 others published today (total max 5)
+// ---------------------------------------------------------------------------
+
+// Returns versions to enqueue: latest + up to 4 others published today (UTC),
+// excluding any already known to the DB (regardless of their sync status --
+// don't re-enqueue what's already pending, failed, or synced).
+// Versions published before today are skipped to avoid exhausting resources
+// crawling thousands of historical versions that predate skills support.
+export function selectVersionsToSync(
+  packument: NpmPackument,
+  knownVersions: Set<string>,
+): Array<{ version: string; tarball: string; publishedAt: Date | null }> {
+  const latestVersion = packument['dist-tags'].latest
+  if (!latestVersion) return []
+
+  // Collect all versions sorted newest-first by publish time
+  const allVersions = Object.entries(packument.versions)
+    .map(([version, meta]) => ({
+      version,
+      tarball: meta.dist.tarball,
+      publishedAt: packument.time[version]
+        ? new Date(packument.time[version])
+        : null,
+    }))
+    .sort((a, b) => {
+      if (!a.publishedAt || !b.publishedAt) return 0
+      return b.publishedAt.getTime() - a.publishedAt.getTime()
+    })
+
+  const toEnqueue: Array<{
+    version: string
+    tarball: string
+    publishedAt: Date | null
+  }> = []
+
+  // Latest first
+  const latestMeta = packument.versions[latestVersion]
+  if (!knownVersions.has(latestVersion) && latestMeta) {
+    toEnqueue.push({
+      version: latestVersion,
+      tarball: latestMeta.dist.tarball,
+      publishedAt: packument.time[latestVersion]
+        ? new Date(packument.time[latestVersion])
+        : null,
+    })
+  }
+
+  // Only consider versions published today (UTC) or later.
+  const startOfToday = new Date()
+  startOfToday.setUTCHours(0, 0, 0, 0)
+
+  // Fill remaining slots (max 4 more) newest-to-oldest, skipping old versions
+  for (const v of allVersions) {
+    if (toEnqueue.length >= 5) break
+    if (v.version === latestVersion) continue
+    if (knownVersions.has(v.version)) continue
+    if (!v.publishedAt || v.publishedAt < startOfToday) continue
+    toEnqueue.push(v)
+  }
+
+  return toEnqueue
+}
+
+// ---------------------------------------------------------------------------
+// Tarball extraction + skill parsing
+// ---------------------------------------------------------------------------
+
+// Extract and parse all SKILL.md files from an npm tarball URL.
+// Only files matching `package/skills/**/SKILL.md` are read; the rest
+// of the tarball is streamed past without buffering.
+export async function extractSkillsFromTarball(
+  tarballUrl: string,
+): Promise<Array<ParsedSkill>> {
+  if (!validateNpmTarballUrl(tarballUrl)) {
+    throw new Error(`Invalid tarball URL: ${tarballUrl}`)
+  }
+
+  const res = await fetchWithTimeout(tarballUrl, {
+    headers: { Accept: 'application/octet-stream' },
+    timeoutMs: NPM_FETCH_TIMEOUT_MS,
+  })
+  if (!res.ok) {
+    await cancelUnusedResponseBody(res)
+    throw new Error(
+      `Failed to download tarball ${tarballUrl}: ${res.status} ${res.statusText}`,
+    )
+  }
+  if (!res.body) {
+    throw new Error(`Tarball response body is null: ${tarballUrl}`)
+  }
+
+  const contentLength = res.headers.get('content-length')
+  if (contentLength) {
+    const parsedLength = Number(contentLength)
+    if (!Number.isFinite(parsedLength) || parsedLength < 0) {
+      throw new Error(`Invalid tarball content-length: ${tarballUrl}`)
+    }
+    if (parsedLength > MAX_TARBALL_BYTES) {
+      throw new Error(`Tarball is too large: ${tarballUrl}`)
+    }
+  }
+
+  const skills: Array<ParsedSkill> = []
+
+  await new Promise<void>((resolve, reject) => {
+    const extractor = extract.extract()
+
+    extractor.on(
+      'entry',
+      (
+        header: { name: string },
+        stream: NodeJS.ReadableStream,
+        next: () => void,
+      ) => {
+        // npm tarballs have paths like `package/skills/core/SKILL.md`
+        const isSkillFile = /^package\/skills\/.+\/SKILL\.md$/i.test(
+          header.name,
+        )
+
+        if (!isSkillFile) {
+          // Drain the stream without buffering
+          stream.resume()
+          stream.on('end', next)
+          return
+        }
+
+        if (skills.length >= MAX_SKILLS_PER_TARBALL) {
+          stream.resume()
+          stream.on('end', () => {
+            reject(new Error('Tarball contains too many skills'))
+          })
+          stream.on('error', reject)
+          return
+        }
+
+        // Extract the skill directory path: `package/skills/foo/bar/SKILL.md` -> `foo/bar`
+        const skillPath = header.name
+          .replace(/^package\/skills\//i, '')
+          .replace(/\/SKILL\.md$/i, '')
+
+        if (!isSafeSkillPath(skillPath)) {
+          stream.resume()
+          stream.on('end', next)
+          stream.on('error', reject)
+          return
+        }
+
+        const chunks: Array<Buffer> = []
+        let skillBytes = 0
+        let skillTooLarge = false
+        stream.on('data', (chunk: Buffer) => {
+          if (skillTooLarge) return
+          skillBytes += chunk.byteLength
+          if (skillBytes > MAX_SKILL_FILE_BYTES) {
+            skillTooLarge = true
+            chunks.length = 0
+            reject(new Error(`Skill file is too large: ${skillPath}`))
+            stream.resume()
+            return
+          }
+          chunks.push(chunk)
+        })
+        stream.on('end', () => {
+          if (skillTooLarge) return
+          const content = Buffer.concat(chunks).toString('utf8')
+          const parsed = parseSkillFile(content, skillPath)
+          if (parsed) skills.push(parsed)
+          next()
+        })
+        stream.on('error', reject)
+      },
+    )
+
+    extractor.on('finish', resolve)
+    extractor.on('error', reject)
+
+    // Web ReadableStream -> Node Readable -> gunzip -> tar extractor
+    const nodeReadable = Readable.fromWeb(
+      res.body as import('stream/web').ReadableStream,
+    )
+    nodeReadable
+      .pipe(createByteLimitStream(MAX_TARBALL_BYTES, 'Tarball'))
+      .pipe(createGunzip())
+      .pipe(extractor)
+  })
+
+  return skills
+}
+
+// ---------------------------------------------------------------------------
+// SKILL.md frontmatter parser
+// ---------------------------------------------------------------------------
+
+export function parseSkillFile(
+  content: string,
+  skillPath = '',
+): ParsedSkill | null {
+  const lines = content.split('\n')
+  const lineCount = lines.length
+
+  // Frontmatter must start with `---` on line 1
+  if (lines[0]?.trim() !== '---') return null
+
+  const closingIdx = lines.findIndex((l, i) => i > 0 && l.trim() === '---')
+  if (closingIdx === -1) return null
+
+  const frontmatterLines = lines.slice(1, closingIdx)
+  const frontmatter = parseFrontmatter(frontmatterLines)
+
+  const name = frontmatter.name
+  const description = frontmatter.description ?? ''
+
+  if (!name || !description) return null
+
+  const contentHash = createHash('sha256').update(content).digest('hex')
+
+  return {
+    name: String(name),
+    description: String(description),
+    type: frontmatter.type ? String(frontmatter.type) : undefined,
+    framework: frontmatter.framework
+      ? String(frontmatter.framework)
+      : undefined,
+    requires: Array.isArray(frontmatter.requires)
+      ? frontmatter.requires.map(String)
+      : undefined,
+    contentHash,
+    content,
+    lineCount,
+    skillPath,
+  }
+}
+
+// Minimal YAML frontmatter parser covering the subset used in SKILL.md files.
+// Handles: plain scalars, quoted strings, and simple sequence lists (- item).
+function parseFrontmatter(lines: Array<string>): Record<string, unknown> {
+  const result: Record<string, unknown> = {}
+  let currentKey: string | null = null
+  let inList = false
+  let inFolded = false // collecting a `>` or `|` multi-line value
+
+  for (const raw of lines) {
+    const line = raw.trimEnd()
+
+    // Skip comments
+    if (line.trimStart().startsWith('#')) continue
+
+    // Continuation line for folded/literal block scalar
+    if (inFolded && currentKey !== null && line.match(/^\s+/)) {
+      const existing = result[currentKey]
+      const chunk = line.trim()
+      result[currentKey] = existing ? `${existing} ${chunk}` : chunk
+      continue
+    } else {
+      inFolded = false
+    }
+
+    // List item
+    if (line.match(/^\s+-\s+/)) {
+      if (currentKey && inList) {
+        const existing = result[currentKey]
+        const item = line
+          .replace(/^\s+-\s+/, '')
+          .trim()
+          .replace(/^["']|["']$/g, '')
+        if (Array.isArray(existing)) {
+          existing.push(item)
+        } else {
+          result[currentKey] = [item]
+        }
+      }
+      continue
+    }
+
+    // Key: value
+    const kvMatch = line.match(/^(\w[\w_-]*):\s*(.*)$/)
+    if (kvMatch) {
+      inList = false
+      currentKey = kvMatch[1]
+      const rawVal = kvMatch[2].trim()
+
+      if (rawVal === '|' || rawVal === '>') {
+        // Multi-line block scalar -- collect indented continuation lines
+        result[currentKey] = ''
+        inFolded = true
+      } else if (rawVal === '') {
+        result[currentKey] = ''
+      } else if (rawVal === '[]') {
+        result[currentKey] = []
+        inList = true
+      } else {
+        result[currentKey] = rawVal.replace(/^["']|["']$/g, '')
+      }
+      continue
+    }
+  }
+
+  return result
+}
diff --git a/src/utils/llms.ts b/src/utils/llms.ts
new file mode 100644
index 000000000..066389521
--- /dev/null
+++ b/src/utils/llms.ts
@@ -0,0 +1,403 @@
+import { setResponseHeader } from '@tanstack/react-start/server'
+import {
+  libraries,
+  librariesByGroup,
+  librariesGroupNamesMap,
+} from '~/libraries/libraries'
+import type { Framework, LibrarySlim } from '~/libraries/types'
+import type { ConfigSchema } from '~/utils/config'
+import { partners, partnerCategoryLabels, type Partner } from '~/utils/partners'
+import {
+  getPartnerPlacementContext,
+  getPartnersForPlacement,
+} from '~/utils/partner-placement'
+import { docsNavTabs, getDocsNavTabId } from './docsNavTabs'
+
+const siteOrigin = 'https://tanstack.com'
+
+const librarySections = [
+  {
+    label: `${librariesGroupNamesMap.framework} docs`,
+    libraries: librariesByGroup.framework,
+  },
+  {
+    label: `${librariesGroupNamesMap.state} docs`,
+    libraries: librariesByGroup.state,
+  },
+  {
+    label: `${librariesGroupNamesMap.headlessUI} docs`,
+    libraries: librariesByGroup.headlessUI,
+  },
+  {
+    label: `${librariesGroupNamesMap.performance} docs`,
+    libraries: librariesByGroup.performance,
+  },
+  {
+    label: `${librariesGroupNamesMap.tooling} docs`,
+    libraries: librariesByGroup.tooling,
+  },
+]
+
+const frameworkLabels: Record<Framework, string> = {
+  angular: 'Angular',
+  alpine: 'Alpine',
+  ember: 'Ember',
+  lit: 'Lit',
+  marko: 'Marko',
+  preact: 'Preact',
+  qwik: 'Qwik',
+  react: 'React',
+  solid: 'Solid',
+  svelte: 'Svelte',
+  vanilla: 'Vanilla',
+  vue: 'Vue',
+}
+
+export function setLlmsTxtResponseHeaders() {
+  setResponseHeader('Content-Type', 'text/plain; charset=utf-8')
+  setResponseHeader('Cache-Control', 'public, max-age=0, must-revalidate')
+  setResponseHeader(
+    'Cloudflare-CDN-Cache-Control',
+    'public, max-age=86400, stale-while-revalidate=86400',
+  )
+}
+
+export function generateLlmsTxt(): string {
+  const lines: Array<string> = []
+  const llmsPlacementContext = getPartnerPlacementContext({
+    orderStrategy: 'machine-readable',
+    surface: 'llms_txt',
+  })
+  const activePartners = getPartnersForPlacement(
+    partners.filter((partner) => partner.status === 'active'),
+    llmsPlacementContext,
+  )
+
+  lines.push('# TanStack')
+  lines.push('')
+  lines.push(
+    '> TanStack is a set of open-source TypeScript libraries for routing, async state, server state, tables, forms, virtualization, data stores, full-stack apps, AI SDKs, and developer tooling.',
+  )
+  lines.push('')
+  lines.push(
+    'This file routes agents to the smallest useful TanStack docs source. Fetch the linked product docs index first, then follow links from that page when you need deeper context. Root `/llms-full.txt` intentionally returns this same index because the complete TanStack docs corpus is too large for a useful root-level context file.',
+  )
+  lines.push('')
+
+  for (const section of librarySections) {
+    lines.push(`## ${section.label}`)
+    lines.push('')
+
+    for (const library of section.libraries) {
+      if (!library.to || library.visible === false) continue
+
+      lines.push(formatLibraryIndexLink(library))
+    }
+
+    lines.push('')
+  }
+
+  lines.push('## Machine-readable data')
+  lines.push('')
+  lines.push(
+    '- [Libraries JSON](https://tanstack.com/api/data/libraries): Current library metadata including ids, docs URLs, GitHub repositories, framework support, versions, and package names.',
+  )
+  lines.push(
+    '- [NPM Stats](https://tanstack.com/stats/npm): Compare npm package download statistics across TanStack packages and related ecosystem packages.',
+  )
+  lines.push('')
+
+  lines.push('## Optional')
+  lines.push('')
+  lines.push(
+    '- [Blog](https://tanstack.com/blog): Release notes, postmortems, performance work, and technical writing from the TanStack team.',
+  )
+
+  for (const partner of activePartners) {
+    lines.push(formatPartnerLink(partner))
+  }
+
+  lines.push('')
+
+  return lines.join('\n')
+}
+
+function formatLibraryIndexLink(library: LibrarySlim) {
+  const details = [
+    library.tagline,
+    formatFrameworks(library),
+    formatPackages(library),
+    library.repo ? `GitHub: https://github.com/${library.repo}` : undefined,
+  ]
+    .filter(isPresent)
+    .map(stripSentenceEnd)
+
+  return `- [${library.name}](${getLibraryDocsMarkdownUrl(library)}): ${details.join('. ')}.`
+}
+
+function getLibraryDocsMarkdownUrl(library: LibrarySlim) {
+  return `${siteOrigin}/${library.id}/latest/llms.txt`
+}
+
+function formatFrameworks(library: LibrarySlim) {
+  if (library.frameworks.length === 0) {
+    return undefined
+  }
+
+  return `Frameworks: ${library.frameworks
+    .map((framework) => frameworkLabels[framework])
+    .join(', ')}`
+}
+
+function formatPackages(library: LibrarySlim) {
+  const packageNames = Array.from(
+    new Set([
+      ...(library.corePackageName ? [library.corePackageName] : []),
+      ...(library.npmPackageNames ?? []),
+    ]),
+  )
+
+  if (packageNames.length === 0) {
+    return undefined
+  }
+
+  return `Packages: ${packageNames.join(', ')}`
+}
+
+function formatPartnerLink(partner: Partner) {
+  return `- [${partner.name}](${partner.href}): ${partnerCategoryLabels[partner.category]}. Works with ${formatPartnerLibraries(partner)}. ${partner.llmDescription}`
+}
+
+function formatPartnerLibraries(partner: Partner) {
+  const libraryIds = partner.libraries ?? []
+
+  if (libraryIds.length === 0) {
+    return 'the general TanStack ecosystem'
+  }
+
+  const libraryNames = libraryIds
+    .map((libraryId) => libraries.find((library) => library.id === libraryId))
+    .map((library) => library?.name)
+    .filter(isPresent)
+
+  if (libraryNames.length === 0) {
+    return 'the general TanStack ecosystem'
+  }
+
+  return libraryNames.join(', ')
+}
+
+function isPresent<T>(value: T | undefined): value is T {
+  return value !== undefined
+}
+
+function stripSentenceEnd(value: string) {
+  return value.trim().replace(/[.!?]+$/g, '')
+}
+
+type ConfigSection = ConfigSchema['sections'][number]
+type ConfigChild = ConfigSection['children'][number]
+type ConfigFramework = NonNullable<ConfigSection['frameworks']>[number]
+
+type DocsIndexEntry = {
+  child: ConfigChild
+  framework?: string
+  section: ConfigSection
+}
+
+export function generateLibraryDocsIndexMarkdown({
+  config,
+  library,
+  version,
+}: {
+  config: ConfigSchema
+  library: LibrarySlim
+  version: string
+}) {
+  const lines: Array<string> = []
+  const libraryPath = `${siteOrigin}/${library.id}/${version}`
+  const llmsTxtUrl = `${libraryPath}/llms.txt`
+  const docsIndexUrl = `${libraryPath}/docs/index.md`
+  const entries = getDocsIndexEntries(config)
+
+  lines.push(`# ${library.name} docs`)
+  lines.push('')
+  lines.push(`> ${stripSentenceEnd(library.description ?? library.tagline)}.`)
+  lines.push('')
+  lines.push(`- [Docs index](${docsIndexUrl}): This same Markdown index.`)
+  lines.push(`- [LLMs index](${llmsTxtUrl}): This same Markdown index.`)
+  lines.push(`- [Library home](${libraryPath})`)
+
+  if (library.repo) {
+    lines.push(`- [GitHub](https://github.com/${library.repo})`)
+  }
+
+  const packages = formatPackages(library)
+
+  if (packages) {
+    lines.push(`- ${packages}.`)
+  }
+
+  const frameworks = formatFrameworks(library)
+
+  if (frameworks) {
+    lines.push(`- ${frameworks}.`)
+  }
+
+  lines.push('')
+  lines.push(
+    'Use this index as the routing layer for the docs. Fetch one linked Markdown page at a time, and prefer framework-specific pages when the user names a framework.',
+  )
+  lines.push('')
+
+  for (const tab of docsNavTabs) {
+    const tabEntries = entries.filter((entry) => {
+      return getDocsNavTabId(entry.section, entry.child) === tab.id
+    })
+
+    if (tabEntries.length === 0) {
+      continue
+    }
+
+    lines.push(`## ${tab.label}`)
+    lines.push('')
+
+    let currentSectionLabel: string | undefined
+
+    for (const entry of tabEntries) {
+      if (entry.section.label !== currentSectionLabel) {
+        currentSectionLabel = entry.section.label
+        lines.push(`### ${currentSectionLabel}`)
+        lines.push('')
+      }
+
+      lines.push(formatDocsIndexEntry({ entry, library, version }))
+    }
+
+    lines.push('')
+  }
+
+  return lines.join('\n')
+}
+
+function getDocsIndexEntries(config: ConfigSchema) {
+  return config.sections.flatMap((section) => [
+    ...section.children.map(
+      (child): DocsIndexEntry => ({
+        child,
+        section,
+      }),
+    ),
+    ...(section.frameworks ?? []).flatMap((framework) =>
+      getFrameworkDocsIndexEntries({ framework, section }),
+    ),
+  ])
+}
+
+function getFrameworkDocsIndexEntries({
+  framework,
+  section,
+}: {
+  framework: ConfigFramework
+  section: ConfigSection
+}) {
+  return framework.children.map(
+    (child): DocsIndexEntry => ({
+      child,
+      framework: framework.label,
+      section,
+    }),
+  )
+}
+
+function formatDocsIndexEntry({
+  entry,
+  library,
+  version,
+}: {
+  entry: DocsIndexEntry
+  library: LibrarySlim
+  version: string
+}) {
+  const label = entry.framework
+    ? `${formatFrameworkLabel(entry.framework)}: ${entry.child.label}`
+    : entry.child.label
+  const href = getDocsIndexEntryHref({
+    library,
+    target: entry.child.to,
+    version,
+  })
+  const metadata = [
+    entry.child.badge,
+    entry.child.addedAt ? `added ${entry.child.addedAt}` : undefined,
+    entry.child.updatedAt ? `updated ${entry.child.updatedAt}` : undefined,
+  ].filter(isPresent)
+  const suffix = metadata.length ? ` (${metadata.join(', ')})` : ''
+
+  return `- [${label}](${href})${suffix}`
+}
+
+function getDocsIndexEntryHref({
+  library,
+  target,
+  version,
+}: {
+  library: LibrarySlim
+  target: string
+  version: string
+}) {
+  if (target.startsWith('http')) {
+    return target
+  }
+
+  if (target === '..') {
+    return `${siteOrigin}/${library.id}/${version}`
+  }
+
+  if (target === './framework') {
+    return `${siteOrigin}/${library.id}/${version}/docs/framework`
+  }
+
+  const resolvedTarget = target
+    .replaceAll('$libraryId', library.id)
+    .replaceAll('$version', version)
+
+  if (resolvedTarget.startsWith('/')) {
+    return appendMarkdownExtension(`${siteOrigin}${resolvedTarget}`)
+  }
+
+  const relativeTarget = resolvedTarget.replace(/^\.\//, '')
+
+  return appendMarkdownExtension(
+    `${siteOrigin}/${library.id}/${version}/docs/${relativeTarget}`,
+  )
+}
+
+function appendMarkdownExtension(href: string) {
+  const hashIndex = href.indexOf('#')
+  const beforeHash = hashIndex === -1 ? href : href.slice(0, hashIndex)
+  const hash = hashIndex === -1 ? '' : href.slice(hashIndex)
+  const queryIndex = beforeHash.indexOf('?')
+  const path = queryIndex === -1 ? beforeHash : beforeHash.slice(0, queryIndex)
+  const query = queryIndex === -1 ? '' : beforeHash.slice(queryIndex)
+
+  if (!path.includes('/docs/') || path.endsWith('.md') || path.endsWith('/')) {
+    return href
+  }
+
+  return `${path}.md${query}${hash}`
+}
+
+function formatFrameworkLabel(framework: string) {
+  const normalizedFramework = framework.toLowerCase()
+
+  if (isFramework(normalizedFramework)) {
+    return frameworkLabels[normalizedFramework]
+  }
+
+  return normalizedFramework
+}
+
+function isFramework(value: string): value is Framework {
+  return Object.hasOwn(frameworkLabels, value)
+}
diff --git a/src/utils/markdown/bundler.ts b/src/utils/markdown/bundler.ts
new file mode 100644
index 000000000..d22e6f9fc
--- /dev/null
+++ b/src/utils/markdown/bundler.ts
@@ -0,0 +1,19 @@
+/**
+ * Shared types and constants for bundler tabs.
+ * Used by both the rehype tabs transform and the BundlerTabs component.
+ */
+
+export const BUNDLERS = ['vite', 'rsbuild'] as const
+
+export type Bundler = (typeof BUNDLERS)[number]
+
+export const DEFAULT_BUNDLER: Bundler = 'vite'
+
+export const BUNDLER_LABELS: Record<Bundler, string> = {
+  vite: 'Vite',
+  rsbuild: 'Rsbuild',
+}
+
+export function isBundler(value: string): value is Bundler {
+  return (BUNDLERS as ReadonlyArray<string>).includes(value)
+}
diff --git a/src/utils/markdown/filterFrameworkContent.ts b/src/utils/markdown/filterFrameworkContent.ts
new file mode 100644
index 000000000..ba423b6f9
--- /dev/null
+++ b/src/utils/markdown/filterFrameworkContent.ts
@@ -0,0 +1,280 @@
+/**
+ * Filters framework-specific content blocks from raw markdown.
+ *
+ * Handles two types of blocks:
+ *
+ * 1. Framework blocks:
+ *   <!-- ::start:framework -->
+ *   # React
+ *   React-specific content...
+ *   # Vue
+ *   Vue-specific content...
+ *   <!-- ::end:framework -->
+ *
+ * 2. Package manager tabs (variant="package-manager"):
+ *   <!-- ::start:tabs variant="package-manager" mode="local-install" -->
+ *   react: create-tsrouter-app@latest my-app
+ *   solid: create-tsrouter-app@latest my-app --framework solid
+ *   <!-- ::end:tabs -->
+ */
+
+import {
+  getInstallCommand,
+  type PackageManager,
+  type InstallMode,
+} from './installCommand'
+
+type FilterOptions = {
+  framework?: string
+  packageManager?: PackageManager
+  /** Whether to keep the surrounding comment markers when filtering. Defaults to false. */
+  keepMarkers?: boolean
+}
+
+export function extractFrameworksFromMarkdown(markdown: string): Array<string> {
+  const frameworks: Array<string> = []
+  const seen = new Set<string>()
+
+  const addFramework = (framework: string) => {
+    const normalizedFramework = framework.trim().toLowerCase()
+    if (!normalizedFramework || seen.has(normalizedFramework)) {
+      return
+    }
+
+    seen.add(normalizedFramework)
+    frameworks.push(normalizedFramework)
+  }
+
+  const frameworkBlockRegex =
+    /<!--\s*::start:framework\s*-->([\s\S]*?)<!--\s*::end:framework\s*-->/gi
+  let frameworkBlockMatch: RegExpExecArray | null
+
+  while ((frameworkBlockMatch = frameworkBlockRegex.exec(markdown)) !== null) {
+    for (const section of splitByFrameworkHeadings(
+      frameworkBlockMatch[1] ?? '',
+    )) {
+      addFramework(section.framework)
+    }
+  }
+
+  const tabsBlockRegex =
+    /<!--\s*::start:tabs\s+([^>]*?)-->([\s\S]*?)<!--\s*::end:tabs\s*-->/gi
+  let tabsBlockMatch: RegExpExecArray | null
+
+  while ((tabsBlockMatch = tabsBlockRegex.exec(markdown)) !== null) {
+    const attrs = tabsBlockMatch[1] ?? ''
+    const variant = parseAttribute(attrs, 'variant')
+    if (variant !== 'package-manager' && variant !== 'package-managers') {
+      continue
+    }
+
+    for (const framework of Object.keys(
+      parseFrameworkLines(tabsBlockMatch[2] ?? ''),
+    )) {
+      addFramework(framework)
+    }
+  }
+
+  return frameworks
+}
+
+/**
+ * Filters framework-specific content and package-manager tabs from raw markdown.
+ * If no framework is specified, returns markdown unchanged.
+ */
+export function filterFrameworkContent(
+  markdown: string,
+  options: FilterOptions,
+): string {
+  const { framework, packageManager, keepMarkers = false } = options
+
+  if (!framework) {
+    return markdown
+  }
+
+  const normalizedFramework = framework.toLowerCase()
+
+  // First pass: filter framework blocks
+  let result = filterFrameworkBlocks(markdown, normalizedFramework, keepMarkers)
+
+  // Second pass: filter package-manager tabs
+  result = filterPackageManagerTabs(
+    result,
+    normalizedFramework,
+    packageManager,
+    keepMarkers,
+  )
+
+  return result
+}
+
+/**
+ * Filters <!-- ::start:framework --> blocks.
+ */
+function filterFrameworkBlocks(
+  markdown: string,
+  framework: string,
+  keepMarkers: boolean,
+): string {
+  const blockRegex =
+    /(<!--\s*::start:framework\s*-->)([\s\S]*?)(<!--\s*::end:framework\s*-->)/gi
+
+  return markdown.replace(
+    blockRegex,
+    (
+      _match,
+      startComment: string,
+      blockContent: string,
+      endComment: string,
+    ) => {
+      const sections = splitByFrameworkHeadings(blockContent)
+      const frameworkSection = sections.find((s) => s.framework === framework)
+
+      if (!frameworkSection) {
+        return ''
+      }
+
+      const content = frameworkSection.content.trim()
+      if (keepMarkers) {
+        return `${startComment}\n${content}\n${endComment}`
+      }
+      return content
+    },
+  )
+}
+
+/**
+ * Filters <!-- ::start:tabs variant="package-manager" --> blocks.
+ * If framework matches and packageManager is provided, outputs the command.
+ * Otherwise returns block as-is.
+ */
+function filterPackageManagerTabs(
+  markdown: string,
+  framework: string,
+  packageManager: PackageManager | undefined,
+  keepMarkers: boolean,
+): string {
+  // Match tabs blocks with attributes
+  const blockRegex =
+    /(<!--\s*::start:tabs\s+([^>]*?)-->)([\s\S]*?)(<!--\s*::end:tabs\s*-->)/gi
+
+  return markdown.replace(
+    blockRegex,
+    (
+      fullMatch,
+      startComment: string,
+      attrs: string,
+      blockContent: string,
+      endComment: string,
+    ) => {
+      // Parse attributes to check variant
+      const variant = parseAttribute(attrs, 'variant')
+      if (variant !== 'package-manager' && variant !== 'package-managers') {
+        return fullMatch
+      }
+
+      // Parse framework lines
+      const frameworkPackages = parseFrameworkLines(blockContent)
+      const packages = frameworkPackages[framework]
+
+      // If no match for framework, return as-is
+      if (!packages || packages.length === 0) {
+        return fullMatch
+      }
+
+      // If no package manager specified, return as-is
+      if (!packageManager) {
+        return fullMatch
+      }
+
+      // Generate command based on mode
+      const mode = (parseAttribute(attrs, 'mode') as InstallMode) || 'install'
+      const commands = getInstallCommand(packageManager, packages, mode)
+      const commandText = `\`\`\`sh\n${commands.join('\n')}\n\`\`\``
+
+      // Return with or without comment markers based on keepMarkers option
+      if (keepMarkers) {
+        return `${startComment}\n${commandText}\n${endComment}`
+      }
+      return commandText
+    },
+  )
+}
+
+/**
+ * Parse a single attribute from an attribute string.
+ * e.g., parseAttribute('variant="package-manager" mode="install"', 'variant') => 'package-manager'
+ */
+function parseAttribute(attrs: string, name: string): string | undefined {
+  const regex = new RegExp(`${name}=["']([^"']+)["']`, 'i')
+  const match = attrs.match(regex)
+  return match?.[1]
+}
+
+/**
+ * Parse framework lines like "react: @tanstack/react-query" from block content.
+ * Returns { framework: [[packages]] } structure.
+ */
+function parseFrameworkLines(content: string): Record<string, string[][]> {
+  const result: Record<string, string[][]> = {}
+  const lines = content.split('\n')
+
+  for (const line of lines) {
+    const trimmed = line.trim()
+    if (!trimmed) continue
+
+    const colonIndex = trimmed.indexOf(':')
+    if (colonIndex === -1) continue
+
+    const framework = trimmed.slice(0, colonIndex).trim().toLowerCase()
+    const packagesStr = trimmed.slice(colonIndex + 1).trim()
+    const packages = packagesStr.split(/\s+/).filter(Boolean)
+
+    if (!framework || packages.length === 0) continue
+
+    if (result[framework]) {
+      result[framework].push(packages)
+    } else {
+      result[framework] = [packages]
+    }
+  }
+
+  return result
+}
+
+type FrameworkSection = {
+  framework: string
+  content: string
+}
+
+/**
+ * Splits block content by H1 framework headers.
+ */
+function splitByFrameworkHeadings(blockContent: string): FrameworkSection[] {
+  const sections: FrameworkSection[] = []
+  const headerRegex = /^#\s+(\w+)\s*$/gm
+  let lastIndex = 0
+  let lastFramework: string | null = null
+  let match: RegExpExecArray | null
+
+  while ((match = headerRegex.exec(blockContent)) !== null) {
+    if (lastFramework !== null) {
+      sections.push({
+        framework: lastFramework,
+        content: blockContent.slice(lastIndex, match.index),
+      })
+    }
+
+    lastFramework = match[1].toLowerCase()
+    lastIndex = match.index + match[0].length
+  }
+
+  if (lastFramework !== null) {
+    sections.push({
+      framework: lastFramework,
+      content: blockContent.slice(lastIndex),
+    })
+  }
+
+  return sections
+}
diff --git a/src/utils/markdown/findFirstImageSrc.ts b/src/utils/markdown/findFirstImageSrc.ts
new file mode 100644
index 000000000..f25ae1e64
--- /dev/null
+++ b/src/utils/markdown/findFirstImageSrc.ts
@@ -0,0 +1,30 @@
+import type { InlineNode } from '@tanstack/markdown'
+import type { MarkdownDocument } from './processor'
+
+export function findFirstImageSrc(
+  document: MarkdownDocument,
+): string | undefined {
+  for (const block of document.children) {
+    if (block.type === 'paragraph' || block.type === 'heading') {
+      const found = findFirstImageSrcInInline(block.children)
+      if (found) return found
+    } else if (block.type !== 'thematicBreak' && block.type !== 'html') {
+      // Every current blog post's hero image is a bare top-level paragraph;
+      // stop rather than reach into lists/tables/blockquotes/tab panels,
+      // where a "first" image may not even be visible on initial paint.
+      return undefined
+    }
+  }
+  return undefined
+}
+
+function findFirstImageSrcInInline(nodes: InlineNode[]): string | undefined {
+  for (const node of nodes) {
+    if (node.type === 'image') return node.src
+    if ('children' in node) {
+      const found = findFirstImageSrcInInline(node.children)
+      if (found) return found
+    }
+  }
+  return undefined
+}
diff --git a/src/utils/markdown/index.ts b/src/utils/markdown/index.ts
index 0aaf957fc..92103fafd 100644
--- a/src/utils/markdown/index.ts
+++ b/src/utils/markdown/index.ts
@@ -1 +1,7 @@
-export { renderMarkdown } from './processor'
+export { findFirstImageSrc } from './findFirstImageSrc'
+export {
+  parseSiteMarkdown,
+  type MarkdownDocument,
+  type MarkdownHeading,
+  type SiteMarkdownDocument,
+} from './processor'
diff --git a/src/utils/markdown/installCommand.ts b/src/utils/markdown/installCommand.ts
new file mode 100644
index 000000000..5d78f60c5
--- /dev/null
+++ b/src/utils/markdown/installCommand.ts
@@ -0,0 +1,147 @@
+/**
+ * Shared types and utility for generating package manager install commands.
+ * Used by both server-side markdown filtering and client-side PackageManagerTabs.
+ */
+
+export const PACKAGE_MANAGERS = ['npm', 'pnpm', 'yarn', 'bun'] as const
+
+export type PackageManager = (typeof PACKAGE_MANAGERS)[number]
+
+export function isPackageManager(value: string): value is PackageManager {
+  return (PACKAGE_MANAGERS as ReadonlyArray<string>).includes(value)
+}
+
+export type InstallMode =
+  | 'install'
+  | 'dev-install'
+  | 'local-install'
+  | 'create'
+  | 'custom'
+
+/**
+ * Get package manager from query parameter, defaulting to 'npm' if not specified or invalid.
+ */
+export function getPackageManager(
+  pm: string | null | undefined,
+): PackageManager {
+  if (pm && (PACKAGE_MANAGERS as ReadonlyArray<string>).includes(pm)) {
+    return pm as PackageManager
+  }
+  return 'npm' // default
+}
+
+/**
+ * Generate install command(s) for a package manager.
+ * Each group of packages becomes one command line.
+ */
+export function getInstallCommand(
+  packageManager: PackageManager,
+  packageGroups: string[][],
+  mode: InstallMode,
+): string[] {
+  const commands: string[] = []
+
+  if (mode === 'custom') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npm ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpm ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bun ${pkgStr}`)
+          break
+      }
+    }
+    return commands
+  }
+
+  if (mode === 'create') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npm create ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpm create ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn create ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bun create ${pkgStr}`)
+          break
+      }
+    }
+    return commands
+  }
+
+  if (mode === 'local-install') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npx ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpx ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn dlx ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bunx ${pkgStr}`)
+          break
+      }
+    }
+    return commands
+  }
+
+  if (mode === 'dev-install') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npm i -D ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpm add -D ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn add -D ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bun add -d ${pkgStr}`)
+          break
+      }
+    }
+    return commands
+  }
+
+  // install mode (default)
+  for (const packages of packageGroups) {
+    const pkgStr = packages.join(' ')
+    switch (packageManager) {
+      case 'npm':
+        commands.push(`npm i ${pkgStr}`)
+        break
+      case 'pnpm':
+        commands.push(`pnpm add ${pkgStr}`)
+        break
+      case 'yarn':
+        commands.push(`yarn add ${pkgStr}`)
+        break
+      case 'bun':
+        commands.push(`bun add ${pkgStr}`)
+        break
+    }
+  }
+  return commands
+}
diff --git a/src/utils/markdown/plugins/collectHeadings.ts b/src/utils/markdown/plugins/collectHeadings.ts
deleted file mode 100644
index 19fe023e1..000000000
--- a/src/utils/markdown/plugins/collectHeadings.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { visit } from 'unist-util-visit'
-import { toString } from 'hast-util-to-string'
-
-import { isHeading } from './helpers'
-
-export type MarkdownHeading = {
-  id: string
-  text: string
-  level: number
-  framework?: string
-}
-
-type HastElement = {
-  type: string
-  tagName: string
-  properties?: Record<string, unknown>
-  children?: unknown[]
-}
-
-type HastRoot = {
-  type: 'root'
-  children: unknown[]
-}
-
-type VFileData = {
-  data: Record<string, unknown>
-}
-
-const isTabsAncestor = (ancestor: HastElement) => {
-  if (ancestor.type !== 'element') {
-    return false
-  }
-
-  if (ancestor.tagName !== 'md-comment-component') {
-    return false
-  }
-
-  const component = ancestor.properties?.['data-component']
-  return typeof component === 'string' && component.toLowerCase() === 'tabs'
-}
-
-const isFrameworkPanelAncestor = (ancestor: HastElement) => {
-  if (ancestor.type !== 'element') {
-    return false
-  }
-
-  return ancestor.tagName === 'md-framework-panel'
-}
-
-export function rehypeCollectHeadings(initialHeadings?: MarkdownHeading[]) {
-  const headings = initialHeadings ?? []
-
-  return function collectHeadings(tree: HastRoot, file?: VFileData) {
-    visit(tree as any, 'element', (node: HastElement, _index, ancestors) => {
-      if (!isHeading(node)) {
-        return
-      }
-
-      if (Array.isArray(ancestors)) {
-        const insideTabs = ancestors.some((ancestor) =>
-          isTabsAncestor(ancestor as HastElement),
-        )
-        if (insideTabs) {
-          return
-        }
-      }
-
-      const id =
-        typeof node.properties?.id === 'string' ? node.properties.id : ''
-      if (!id) {
-        return
-      }
-
-      let currentFramework: string | undefined
-
-      const headingDataFramework = node.properties?.['data-framework']
-      if (typeof headingDataFramework === 'string') {
-        currentFramework = headingDataFramework
-      } else if (Array.isArray(ancestors)) {
-        const frameworkPanel = ancestors.find((ancestor) =>
-          isFrameworkPanelAncestor(ancestor as HastElement),
-        ) as HastElement | undefined
-
-        if (frameworkPanel) {
-          const dataFramework = frameworkPanel.properties?.['data-framework']
-          if (typeof dataFramework === 'string') {
-            currentFramework = dataFramework
-          }
-        }
-      }
-
-      headings.push({
-        id,
-        level: Number(node.tagName.substring(1)),
-        text: toString(node as any).trim(),
-        framework: currentFramework,
-      })
-    })
-
-    if (file) {
-      file.data.headings = headings
-    }
-  }
-}
diff --git a/src/utils/markdown/plugins/extractCodeMeta.ts b/src/utils/markdown/plugins/extractCodeMeta.ts
deleted file mode 100644
index 33819ab3f..000000000
--- a/src/utils/markdown/plugins/extractCodeMeta.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { Root } from 'hast'
-import { visit } from 'unist-util-visit'
-
-export function extractCodeMeta() {
-  return (tree: Root) => {
-    visit(tree, 'element', (node: any) => {
-      if (node && node.tagName === 'pre') {
-        const codeChild = Array.isArray(node.children)
-          ? node.children[0]
-          : undefined
-
-        const metaString =
-          (codeChild &&
-            ((codeChild.data && codeChild.data.meta) ||
-              (codeChild.properties && codeChild.properties.metastring))) ||
-          undefined
-
-        let filename: string | undefined = undefined
-        let framework: string | undefined = undefined
-
-        if (metaString && typeof metaString === 'string') {
-          const marker = 'title="'
-          const idx = metaString.indexOf(marker)
-
-          if (idx !== -1) {
-            const rest = metaString.slice(idx + marker.length)
-            const end = rest.indexOf('"')
-
-            if (end !== -1) {
-              filename = rest.slice(0, end)
-            }
-          }
-
-          // Extract framework attribute
-          const frameworkMarker = 'framework="'
-          const frameworkIdx = metaString.indexOf(frameworkMarker)
-
-          if (frameworkIdx !== -1) {
-            const rest = metaString.slice(frameworkIdx + frameworkMarker.length)
-            const end = rest.indexOf('"')
-
-            if (end !== -1) {
-              framework = rest.slice(0, end).toLowerCase()
-            }
-          }
-        }
-
-        node.properties = {
-          ...(node.properties || {}),
-          'data-filename': filename,
-          ...(filename ? { 'data-code-title': filename } : {}),
-          ...(framework ? { 'data-framework': framework } : {}),
-        }
-      }
-    })
-  }
-}
diff --git a/src/utils/markdown/plugins/helpers.ts b/src/utils/markdown/plugins/helpers.ts
deleted file mode 100644
index a0b4b1aad..000000000
--- a/src/utils/markdown/plugins/helpers.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { isElement } from 'hast-util-is-element'
-
-type HastElement = {
-  type: string
-  tagName: string
-  properties?: Record<string, unknown>
-  children?: unknown[]
-}
-
-export const normalizeComponentName = (name: string) => name.toLowerCase()
-
-export const slugify = (value: string, fallback: string) => {
-  if (!value) {
-    return fallback
-  }
-
-  return (
-    value
-      .trim()
-      .toLowerCase()
-      .replace(/[^a-z0-9\s-]/g, '')
-      .replace(/\s+/g, '-')
-      .replace(/-+/g, '-')
-      .replace(/^-|-$/g, '')
-      .slice(0, 64) || fallback
-  )
-}
-
-export const isHeading = (node: unknown): node is HastElement =>
-  isElement(node as any) && /^h[1-6]$/.test((node as HastElement).tagName)
-
-export const headingLevel = (node: HastElement) =>
-  Number(node.tagName.substring(1))
diff --git a/src/utils/markdown/plugins/index.ts b/src/utils/markdown/plugins/index.ts
deleted file mode 100644
index de6969411..000000000
--- a/src/utils/markdown/plugins/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export { rehypeParseCommentComponents } from './parseCommentComponents'
-export { rehypeTransformCommentComponents } from './transformCommentComponents'
-export {
-  rehypeTransformFrameworkComponents,
-  transformFrameworkComponent,
-} from './transformFrameworkComponent'
-export { transformTabsComponent } from './transformTabsComponent'
-export { type MarkdownHeading, rehypeCollectHeadings } from './collectHeadings'
diff --git a/src/utils/markdown/plugins/parseCommentComponents.ts b/src/utils/markdown/plugins/parseCommentComponents.ts
deleted file mode 100644
index ee036d010..000000000
--- a/src/utils/markdown/plugins/parseCommentComponents.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { unified } from 'unified'
-import rehypeParse from 'rehype-parse'
-import { SKIP, visit } from 'unist-util-visit'
-
-const COMPONENT_PREFIX = '::'
-const START_PREFIX = '::start:'
-const END_PREFIX = '::end:'
-
-const componentParser = unified().use(rehypeParse, { fragment: true })
-
-const normalizeComponentName = (name: string) => name.toLowerCase()
-
-function parseDescriptor(descriptor: string) {
-  const tree = componentParser.parse(`<${descriptor} />`)
-  const node = tree.children[0]
-  if (!node || node.type !== 'element') {
-    return null
-  }
-
-  const component = node.tagName
-  const attributes: Record<string, string> = {}
-  const properties = node.properties ?? {}
-  for (const [key, value] of Object.entries(properties)) {
-    if (Array.isArray(value)) {
-      attributes[key] = value.join(' ')
-    } else if (value != null) {
-      attributes[key] = String(value)
-    }
-  }
-
-  return { component, attributes }
-}
-
-const isCommentNode = (value: unknown) =>
-  Boolean(
-    value &&
-    typeof value === 'object' &&
-    'type' in value &&
-    value.type === 'comment',
-  )
-
-export const rehypeParseCommentComponents = () => {
-  return (tree: any) => {
-    visit(tree, 'comment', (node, index, parent) => {
-      if (!isCommentNode(node) || parent == null || typeof index !== 'number') {
-        return
-      }
-
-      const trimmed = node.value.trim()
-      if (!trimmed.startsWith(COMPONENT_PREFIX)) {
-        return
-      }
-
-      const isBlock = trimmed.startsWith(START_PREFIX)
-      const descriptor = isBlock
-        ? trimmed.slice(START_PREFIX.length)
-        : trimmed.slice(COMPONENT_PREFIX.length)
-
-      const parsed = parseDescriptor(descriptor)
-      if (!parsed) {
-        return
-      }
-
-      const componentName = parsed.component
-      const element = {
-        type: 'element',
-        tagName: 'md-comment-component',
-        properties: {
-          'data-component': componentName,
-          'data-attributes': JSON.stringify(parsed.attributes ?? {}),
-        },
-        children: [],
-      }
-
-      if (!isBlock) {
-        parent.children.splice(index, 1, element)
-        return [SKIP, index]
-      }
-
-      let endIndex = -1
-      for (let cursor = index + 1; cursor < parent.children.length; cursor++) {
-        const candidate = parent.children[cursor]
-        if (
-          isCommentNode(candidate) &&
-          candidate.value.trim().toLowerCase() ===
-            `${END_PREFIX}${normalizeComponentName(componentName)}`
-        ) {
-          endIndex = cursor
-          break
-        }
-      }
-
-      if (endIndex === -1) {
-        parent.children.splice(index, 1, element)
-        return [SKIP, index]
-      }
-
-      element.children = parent.children.slice(index + 1, endIndex)
-      parent.children.splice(index, endIndex - index + 1, element)
-      return [SKIP, index]
-    })
-  }
-}
diff --git a/src/utils/markdown/plugins/transformCommentComponents.ts b/src/utils/markdown/plugins/transformCommentComponents.ts
deleted file mode 100644
index 669558e87..000000000
--- a/src/utils/markdown/plugins/transformCommentComponents.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { visit } from 'unist-util-visit'
-
-import { normalizeComponentName } from './helpers'
-import { transformTabsComponent } from './transformTabsComponent'
-
-export const rehypeTransformCommentComponents = () => {
-  return (tree: any) => {
-    visit(tree, 'element', (node) => {
-      if (node.tagName !== 'md-comment-component') {
-        return
-      }
-
-      const component = String(node.properties?.['data-component'] ?? '')
-      switch (normalizeComponentName(component)) {
-        case 'tabs':
-          transformTabsComponent(node)
-          break
-        default:
-          break
-      }
-    })
-  }
-}
diff --git a/src/utils/markdown/plugins/transformFrameworkComponent.ts b/src/utils/markdown/plugins/transformFrameworkComponent.ts
deleted file mode 100644
index 38fdc7f35..000000000
--- a/src/utils/markdown/plugins/transformFrameworkComponent.ts
+++ /dev/null
@@ -1,217 +0,0 @@
-import { toString } from 'hast-util-to-string'
-import { visit } from 'unist-util-visit'
-
-import { normalizeComponentName } from './helpers'
-
-type HastNode = {
-  type: string
-  tagName?: string
-  properties?: Record<string, unknown>
-  children?: HastNode[]
-  value?: string
-}
-
-type FrameworkCodeBlock = {
-  title: string
-  code: string
-  language: string
-}
-
-type FrameworkExtraction = {
-  codeBlocksByFramework: Record<string, FrameworkCodeBlock[]>
-  contentByFramework: Record<string, HastNode[]>
-}
-
-/**
- * Extract code block data (language, title, code) from a <pre> element.
- */
-function extractCodeBlockData(preNode: HastNode): {
-  language: string
-  title: string
-  code: string
-} | null {
-  const codeNode = preNode.children?.find(
-    (c: HastNode) => c.type === 'element' && c.tagName === 'code',
-  )
-
-  if (!codeNode) return null
-
-  // Extract language from className
-  let language = 'plaintext'
-  const className = codeNode.properties?.className
-  if (Array.isArray(className)) {
-    const langClass = className.find((c) => String(c).startsWith('language-'))
-    if (langClass) {
-      language = String(langClass).replace('language-', '')
-    }
-  }
-
-  // Extract title from data attributes
-  let title = ''
-  const props = preNode.properties || {}
-  if (typeof props['dataCodeTitle'] === 'string') {
-    title = props['dataCodeTitle'] as string
-  } else if (typeof props['data-code-title'] === 'string') {
-    title = props['data-code-title']
-  } else if (typeof props['dataFilename'] === 'string') {
-    title = props['dataFilename'] as string
-  } else if (typeof props['data-filename'] === 'string') {
-    title = props['data-filename']
-  }
-
-  // Extract code text
-  const extractText = (nodes: HastNode[]): string => {
-    let text = ''
-    for (const node of nodes) {
-      if (node.type === 'text' && node.value) {
-        text += node.value
-      } else if (node.type === 'element' && node.children) {
-        text += extractText(node.children)
-      }
-    }
-    return text
-  }
-  const code = extractText(codeNode.children || [])
-
-  return { language, title, code }
-}
-
-function extractFrameworkData(node: HastNode): FrameworkExtraction | null {
-  const children = node.children ?? []
-  const codeBlocksByFramework: Record<string, FrameworkCodeBlock[]> = {}
-  const contentByFramework: Record<string, HastNode[]> = {}
-
-  // First pass: find the first H1 to determine the first framework
-  let firstFramework: string | null = null
-  for (const child of children) {
-    if (child.type === 'element' && child.tagName === 'h1') {
-      firstFramework = toString(child as any)
-        .trim()
-        .toLowerCase()
-      break
-    }
-  }
-
-  // If no H1 found at all, return null
-  if (!firstFramework) {
-    return null
-  }
-
-  // Second pass: collect content
-  let currentFramework: string | null = firstFramework // Start with first framework for content before first H1
-
-  // Initialize the first framework
-  contentByFramework[firstFramework] = []
-  codeBlocksByFramework[firstFramework] = []
-
-  for (const child of children) {
-    // Check if this is an H1 heading (framework divider)
-    if (child.type === 'element' && child.tagName === 'h1') {
-      // Extract framework name from H1 text
-      currentFramework = toString(child as any)
-        .trim()
-        .toLowerCase()
-
-      // Initialize arrays for this framework
-      if (currentFramework && !contentByFramework[currentFramework]) {
-        contentByFramework[currentFramework] = []
-        codeBlocksByFramework[currentFramework] = []
-      }
-      // Don't include the H1 itself in content - it's just a divider
-      continue
-    }
-
-    if (!currentFramework) continue
-
-    // Create a shallow copy of the node
-    const contentNode = Object.assign({}, child) as HastNode
-
-    // Mark all headings (h2-h6) with framework attribute so they appear in TOC only for this framework
-    if (
-      contentNode.type === 'element' &&
-      contentNode.tagName &&
-      /^h[2-6]$/.test(contentNode.tagName)
-    ) {
-      contentNode.properties = (contentNode.properties || {}) as Record<
-        string,
-        unknown
-      >
-      contentNode.properties['data-framework'] = currentFramework
-    }
-
-    contentByFramework[currentFramework].push(contentNode)
-
-    // Extract code blocks for this framework
-    if (contentNode.type === 'element' && contentNode.tagName === 'pre') {
-      const codeBlockData = extractCodeBlockData(contentNode)
-      if (codeBlockData) {
-        codeBlocksByFramework[currentFramework].push(codeBlockData)
-      }
-    }
-  }
-
-  // Return null if no frameworks found
-  if (Object.keys(contentByFramework).length === 0) {
-    return null
-  }
-
-  return { codeBlocksByFramework, contentByFramework }
-}
-
-export function transformFrameworkComponent(node: HastNode) {
-  const result = extractFrameworkData(node)
-
-  if (!result) {
-    return
-  }
-
-  node.properties = node.properties || {}
-  node.properties['data-framework-meta'] = JSON.stringify({
-    codeBlocksByFramework: Object.fromEntries(
-      Object.entries(result.codeBlocksByFramework).map(([fw, blocks]) => [
-        fw,
-        blocks.map((b) => ({
-          title: b.title,
-          code: b.code,
-          language: b.language,
-        })),
-      ]),
-    ),
-  })
-
-  // Store available frameworks for the component
-  const availableFrameworks = Object.keys(result.contentByFramework)
-  node.properties['data-available-frameworks'] =
-    JSON.stringify(availableFrameworks)
-
-  node.children = availableFrameworks.map((fw) => {
-    const content = result.contentByFramework[fw] || []
-    return {
-      type: 'element',
-      tagName: 'md-framework-panel',
-      properties: {
-        'data-framework': fw,
-      },
-      children: content,
-    }
-  })
-}
-
-/**
- * Rehype plugin to transform framework components in the AST.
- * Visits the tree and calls transformFrameworkComponent for each framework component found.
- */
-export const rehypeTransformFrameworkComponents = () => {
-  return (tree: any) => {
-    visit(tree, 'element', (node) => {
-      if (node.tagName !== 'md-comment-component') {
-        return
-      }
-
-      const component = String(node.properties?.['data-component'] ?? '')
-      if (normalizeComponentName(component) === 'framework') {
-        transformFrameworkComponent(node)
-      }
-    })
-  }
-}
diff --git a/src/utils/markdown/plugins/transformTabsComponent.ts b/src/utils/markdown/plugins/transformTabsComponent.ts
deleted file mode 100644
index 58181780f..000000000
--- a/src/utils/markdown/plugins/transformTabsComponent.ts
+++ /dev/null
@@ -1,359 +0,0 @@
-import { toString } from 'hast-util-to-string'
-
-import { headingLevel, isHeading, slugify } from './helpers'
-
-export type VariantHandler = (
-  node: HastNode,
-  attributes: Record<string, string>,
-) => boolean
-
-type InstallMode = 'install' | 'dev-install' | 'local-install'
-
-type HastNode = {
-  type: string
-  tagName: string
-  properties?: Record<string, unknown>
-  children?: HastNode[]
-}
-
-type TabDescriptor = {
-  slug: string
-  name: string
-}
-
-type TabExtraction = {
-  tabs: TabDescriptor[]
-  panels: HastNode[][]
-}
-
-type PackageManagerExtraction = {
-  packagesByFramework: Record<string, string[][]>
-  mode: InstallMode
-}
-
-type FilesExtraction = {
-  files: Array<{
-    title: string
-    code: string
-    language: string
-    preNode: HastNode
-  }>
-}
-
-function parseAttributes(node: HastNode): Record<string, string> {
-  const rawAttributes = node.properties?.['data-attributes']
-  if (typeof rawAttributes === 'string') {
-    try {
-      return JSON.parse(rawAttributes)
-    } catch {
-      return {}
-    }
-  }
-  return {}
-}
-
-function resolveMode(attributes: Record<string, string>): InstallMode {
-  const mode = attributes.mode?.toLowerCase()
-  if (mode === 'dev-install') return 'dev-install'
-  if (mode === 'local-install') return 'local-install'
-  return 'install'
-}
-
-function normalizeFrameworkKey(key: string): string {
-  return key.trim().toLowerCase()
-}
-
-// Helper to extract text from nodes (used for code content)
-function extractText(nodes: any[]): string {
-  let text = ''
-  for (const node of nodes) {
-    if (node.type === 'text') {
-      text += node.value
-    } else if (node.type === 'element' && node.children) {
-      text += extractText(node.children)
-    }
-  }
-  return text
-}
-
-/**
- * Parse a line like "react: @tanstack/react-query @tanstack/react-query-devtools"
- * Returns { framework: 'react', packages: '@tanstack/react-query @tanstack/react-query-devtools' }
- */
-function parseFrameworkLine(text: string): {
-  framework: string
-  packages: string[]
-} | null {
-  const colonIndex = text.indexOf(':')
-  if (colonIndex === -1) {
-    return null
-  }
-
-  const framework = normalizeFrameworkKey(text.slice(0, colonIndex))
-  const packagesStr = text.slice(colonIndex + 1).trim()
-  const packages = packagesStr.split(/\s+/).filter(Boolean)
-
-  if (!framework || packages.length === 0) {
-    return null
-  }
-
-  return { framework, packages }
-}
-
-function extractPackageManagerData(
-  node: HastNode,
-  mode: InstallMode,
-): PackageManagerExtraction | null {
-  const children = node.children ?? []
-  const packagesByFramework: Record<string, string[][]> = {}
-
-  const allText = extractText(children)
-  const lines = allText.split('\n')
-
-  for (const line of lines) {
-    const trimmed = line.trim()
-    if (!trimmed) continue
-
-    const parsed = parseFrameworkLine(trimmed)
-    if (parsed) {
-      // Each line becomes a separate entry (array of packages)
-      // Multiple packages on same line = install together
-      // Multiple lines = install separately
-      if (packagesByFramework[parsed.framework]) {
-        packagesByFramework[parsed.framework].push(parsed.packages)
-      } else {
-        packagesByFramework[parsed.framework] = [parsed.packages]
-      }
-    }
-  }
-
-  if (Object.keys(packagesByFramework).length === 0) {
-    return null
-  }
-
-  return { packagesByFramework, mode }
-}
-
-/**
- * Extract code block data (language, title, code) from a <pre> element.
- * Extracts title from data-code-title (set by rehypeCodeMeta).
- */
-function extractCodeBlockData(preNode: HastNode): {
-  language: string
-  title: string
-  code: string
-} | null {
-  // Find the <code> child
-  const codeNode = preNode.children?.find(
-    (c: HastNode) => c.type === 'element' && c.tagName === 'code',
-  )
-
-  if (!codeNode) return null
-
-  // Extract language from className
-  let language = 'plaintext'
-  const className = codeNode.properties?.className
-  if (Array.isArray(className)) {
-    const langClass = className.find((c) => String(c).startsWith('language-'))
-    if (langClass) {
-      language = String(langClass).replace('language-', '')
-    }
-  }
-
-  let title = ''
-  const props = preNode.properties || {}
-  if (typeof props['dataCodeTitle'] === 'string') {
-    title = props['dataCodeTitle'] as string
-  } else if (typeof props['data-code-title'] === 'string') {
-    title = props['data-code-title']
-  } else if (typeof props['dataFilename'] === 'string') {
-    title = props['dataFilename'] as string
-  } else if (typeof props['data-filename'] === 'string') {
-    title = props['data-filename']
-  }
-
-  // Extract code content
-  const code = extractText(codeNode.children || [])
-
-  return { language, title, code }
-}
-
-/**
- * Extract files data for variant="files" tabs.
- * Parses consecutive code blocks and creates file tabs.
- */
-function extractFilesData(node: HastNode): FilesExtraction | null {
-  const children = node.children ?? []
-  const files: FilesExtraction['files'] = []
-
-  for (const child of children) {
-    if (child.type === 'element' && child.tagName === 'pre') {
-      const codeBlockData = extractCodeBlockData(child)
-      if (!codeBlockData) continue
-
-      files.push({
-        title: codeBlockData.title || 'Untitled',
-        code: codeBlockData.code,
-        language: codeBlockData.language,
-        preNode: child,
-      })
-    }
-  }
-
-  if (files.length === 0) {
-    return null
-  }
-
-  return { files }
-}
-
-function extractTabPanels(node: HastNode): TabExtraction | null {
-  const children = node.children ?? []
-  const headings = children.filter(isHeading)
-
-  let sectionStarted = false
-  let largestHeadingLevel = Infinity
-  headings.forEach((heading: HastNode) => {
-    largestHeadingLevel = Math.min(largestHeadingLevel, headingLevel(heading))
-  })
-
-  const tabs: TabDescriptor[] = []
-  const panels: HastNode[][] = []
-  let currentPanel: HastNode[] | null = null
-
-  children.forEach((child: any) => {
-    if (isHeading(child)) {
-      const level = headingLevel(child)
-      if (!sectionStarted) {
-        if (level !== largestHeadingLevel) {
-          return
-        }
-        sectionStarted = true
-      }
-
-      if (level === largestHeadingLevel) {
-        if (currentPanel) {
-          panels.push(currentPanel)
-        }
-
-        const headingId =
-          typeof child.properties?.id === 'string'
-            ? child.properties.id
-            : slugify(toString(child as any), `tab-${tabs.length + 1}`)
-
-        tabs.push({
-          slug: headingId,
-          name: toString(child as any),
-        })
-
-        currentPanel = []
-        return
-      }
-    }
-
-    if (sectionStarted) {
-      if (!currentPanel) {
-        currentPanel = []
-      }
-      currentPanel.push(child)
-    }
-  })
-
-  if (currentPanel) {
-    panels.push(currentPanel)
-  }
-
-  if (!tabs.length) {
-    return null
-  }
-
-  return { tabs, panels }
-}
-
-export function transformTabsComponent(node: HastNode) {
-  const attributes = parseAttributes(node)
-  const variant = attributes.variant?.toLowerCase()
-
-  // Handle package-manager variant
-  if (variant === 'package-manager' || variant === 'package-managers') {
-    const mode = resolveMode(attributes)
-    const result = extractPackageManagerData(node, mode)
-
-    if (!result) {
-      return
-    }
-
-    // Remove children so package managers don't show up in TOC
-    node.children = []
-
-    // Store metadata for the React component
-    node.properties = node.properties || {}
-    node.properties['data-package-manager-meta'] = JSON.stringify({
-      packagesByFramework: result.packagesByFramework,
-      mode: result.mode,
-    })
-    return
-  }
-
-  // Handle files variant
-  if (variant === 'files') {
-    const result = extractFilesData(node)
-
-    if (!result) {
-      return
-    }
-
-    // Store metadata for the React component (without preNodes to avoid circular refs)
-    node.properties = node.properties || {}
-    node.properties['data-files-meta'] = JSON.stringify({
-      files: result.files.map((f) => ({
-        title: f.title,
-        code: f.code,
-        language: f.language,
-      })),
-    })
-
-    // Create tab headings from file titles
-    const tabs = result.files.map((file, index) => ({
-      slug: `file-${index}`,
-      name: file.title,
-    }))
-
-    node.properties['data-attributes'] = JSON.stringify({ tabs })
-
-    // Create panel elements with original preNodes
-    node.children = result.files.map((file, index) => ({
-      type: 'element',
-      tagName: 'md-tab-panel',
-      properties: {
-        'data-tab-slug': `file-${index}`,
-        'data-tab-index': String(index),
-      },
-      // Use the original preNode which already has data-code-title from rehypeCodeMeta
-      children: [file.preNode],
-    }))
-    return
-  }
-
-  // Handle default tabs variant
-  const result = extractTabPanels(node)
-  if (!result) {
-    return
-  }
-
-  const panelElements = result.panels.map((panelChildren, index) => ({
-    type: 'element',
-    tagName: 'md-tab-panel',
-    properties: {
-      'data-tab-slug': result.tabs[index]?.slug ?? `tab-${index + 1}`,
-      'data-tab-index': String(index),
-    },
-    children: panelChildren,
-  }))
-
-  node.properties = {
-    ...node.properties,
-    'data-attributes': JSON.stringify({ tabs: result.tabs }),
-  }
-  node.children = panelElements
-}
diff --git a/src/utils/markdown/processor.ts b/src/utils/markdown/processor.ts
index 9ea90c858..22aca0700 100644
--- a/src/utils/markdown/processor.ts
+++ b/src/utils/markdown/processor.ts
@@ -1,75 +1,333 @@
-import { unified } from 'unified'
-import remarkParse from 'remark-parse'
-import remarkGfm from 'remark-gfm'
-import remarkRehype from 'remark-rehype'
-import rehypeCallouts from 'rehype-callouts'
-import rehypeRaw from 'rehype-raw'
-import rehypeSlug from 'rehype-slug'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
-import rehypeStringify from 'rehype-stringify'
-
-import {
-  rehypeCollectHeadings,
-  rehypeParseCommentComponents,
-  rehypeTransformCommentComponents,
-  rehypeTransformFrameworkComponents,
-  type MarkdownHeading,
-} from '~/utils/markdown/plugins'
-import { extractCodeMeta } from '~/utils/markdown/plugins/extractCodeMeta'
-
-export type { MarkdownHeading } from '~/utils/markdown/plugins'
-
-export type MarkdownRenderResult = {
-  markup: string
-  headings: MarkdownHeading[]
+import { docsMarkdownExtensions } from '@tanstack/markdown/extensions/docs'
+import { parseMarkdown } from '@tanstack/markdown/parser'
+import type {
+  BlockNode,
+  InlineNode,
+  MarkdownDocument,
+  MarkdownHeading,
+} from '@tanstack/markdown'
+
+export type { MarkdownDocument, MarkdownHeading } from '@tanstack/markdown'
+
+export type SiteMarkdownDocument = MarkdownDocument & {
+  headings: Array<MarkdownHeading>
 }
 
-export function renderMarkdown(content: string): MarkdownRenderResult {
-  const headings: MarkdownHeading[] = []
-
-  const processor = unified()
-    .use(remarkParse)
-    .use(remarkGfm)
-    .use(remarkRehype, { allowDangerousHtml: true })
-    .use(extractCodeMeta)
-    .use(rehypeRaw)
-    .use(rehypeParseCommentComponents)
-    .use(rehypeCallouts, {
-      theme: 'github',
-      props: {
-        containerProps: (_node: any, type: string) => ({
-          className: `markdown-alert markdown-alert-${type}`,
-        }),
-        titleIconProps: () => ({
-          className: 'octicon octicon-info mr-2',
-        }),
-        titleProps: () => ({
-          className: 'markdown-alert-title',
-        }),
-        titleTextProps: () => ({
-          className: 'markdown-alert-title',
-        }),
-        contentProps: () => ({
-          className: 'markdown-alert-content',
-        }),
-      },
-    } as any)
-    .use(rehypeSlug)
-    .use(rehypeTransformFrameworkComponents)
-    .use(rehypeTransformCommentComponents)
-    .use(rehypeAutolinkHeadings, {
-      behavior: 'wrap',
-      properties: {
-        className: ['anchor-heading'],
-      },
-    })
-    .use(() => rehypeCollectHeadings(headings))
-    .use(rehypeStringify)
-
-  const file = processor.processSync(content)
+const escapedLessThanToken = '\uE000'
+const escapedGreaterThanToken = '\uE001'
+
+export function parseSiteMarkdown(content: string): SiteMarkdownDocument {
+  const headingSlugger = createHeadingSlugger()
+  const document = parseMarkdown(protectEscapedAngleBrackets(content), {
+    allowHtml: true,
+    extensions: docsMarkdownExtensions(),
+    headingIds: (text) =>
+      headingSlugger(restoreEscapedAngleBracketText(text).replace(/[<>]/g, '')),
+  })
+
+  restoreEscapedAngleBrackets(document)
 
   return {
-    markup: String(file),
-    headings,
+    ...document,
+    headings: collectHeadings(document),
+  }
+}
+
+function protectEscapedAngleBrackets(content: string) {
+  const lines = content.split('\n')
+  const protectedLines: Array<string> = []
+  let fence: { marker: '`' | '~'; size: number } | undefined
+
+  for (const line of lines) {
+    const fenceMatch = line.match(/^ {0,3}(`{3,}|~{3,})/)
+
+    if (fence) {
+      protectedLines.push(line)
+
+      if (
+        fenceMatch &&
+        fenceMatch[1]?.startsWith(fence.marker.repeat(fence.size))
+      ) {
+        fence = undefined
+      }
+
+      continue
+    }
+
+    if (fenceMatch) {
+      const marker = fenceMatch[1]?.[0]
+
+      if (marker === '`' || marker === '~') {
+        fence = {
+          marker,
+          size: fenceMatch[1]?.length ?? 3,
+        }
+      }
+
+      protectedLines.push(line)
+      continue
+    }
+
+    protectedLines.push(protectEscapedAngleBracketsInLine(line))
+  }
+
+  return protectedLines.join('\n')
+}
+
+function protectEscapedAngleBracketsInLine(line: string) {
+  let result = ''
+  let index = 0
+  let inlineCodeFenceSize = 0
+
+  while (index < line.length) {
+    const character = line[index]
+
+    if (character === '`') {
+      const fenceSize = countRun(line, index, '`')
+      const fence = '`'.repeat(fenceSize)
+      result += fence
+      index += fenceSize
+
+      if (inlineCodeFenceSize === 0) {
+        inlineCodeFenceSize = fenceSize
+      } else if (inlineCodeFenceSize === fenceSize) {
+        inlineCodeFenceSize = 0
+      }
+
+      continue
+    }
+
+    if (inlineCodeFenceSize === 0 && character === '\\') {
+      const nextCharacter = line[index + 1]
+
+      if (nextCharacter === '<') {
+        result += escapedLessThanToken
+        index += 2
+        continue
+      }
+
+      if (nextCharacter === '>') {
+        result += escapedGreaterThanToken
+        index += 2
+        continue
+      }
+    }
+
+    result += character
+    index++
+  }
+
+  return result
+}
+
+function countRun(value: string, start: number, character: string) {
+  let index = start
+
+  while (value[index] === character) {
+    index++
+  }
+
+  return index - start
+}
+
+function restoreEscapedAngleBrackets(document: MarkdownDocument) {
+  for (const child of document.children) {
+    restoreEscapedAngleBracketsInBlock(child)
+  }
+}
+
+function restoreEscapedAngleBracketsInBlock(block: BlockNode) {
+  switch (block.type) {
+    case 'heading':
+    case 'paragraph':
+      restoreEscapedAngleBracketsInInlineNodes(block.children)
+      return
+    case 'blockquote':
+    case 'callout':
+    case 'component':
+      for (const child of block.children) {
+        restoreEscapedAngleBracketsInBlock(child)
+      }
+      return
+    case 'list':
+      for (const item of block.items) {
+        for (const child of item.children) {
+          restoreEscapedAngleBracketsInBlock(child)
+        }
+      }
+      return
+    case 'table':
+      for (const cell of [...block.header, ...block.rows.flat()]) {
+        restoreEscapedAngleBracketsInInlineNodes(cell.children)
+      }
+      return
+    case 'footnotes':
+      for (const item of block.items) {
+        for (const child of item.children) {
+          restoreEscapedAngleBracketsInBlock(child)
+        }
+      }
+      return
+    case 'code':
+    case 'html':
+    case 'thematicBreak':
+      return
+  }
+}
+
+function restoreEscapedAngleBracketsInInlineNodes(nodes: Array<InlineNode>) {
+  for (const node of nodes) {
+    switch (node.type) {
+      case 'text':
+        node.value = restoreEscapedAngleBracketText(node.value)
+        break
+      case 'strong':
+      case 'emphasis':
+      case 'strike':
+      case 'link':
+        restoreEscapedAngleBracketsInInlineNodes(node.children)
+        break
+      case 'inlineCode':
+      case 'image':
+      case 'break':
+      case 'inlineHtml':
+      case 'footnoteReference':
+        break
+    }
+  }
+}
+
+function restoreEscapedAngleBracketText(value: string) {
+  return value
+    .replaceAll(escapedLessThanToken, '<')
+    .replaceAll(escapedGreaterThanToken, '>')
+}
+
+function collectHeadings(document: MarkdownDocument): Array<MarkdownHeading> {
+  const headings: Array<MarkdownHeading> = []
+
+  collectHeadingsFromBlocks(document.children, headings, undefined, false)
+
+  return headings
+}
+
+function collectHeadingsFromBlocks(
+  blocks: Array<BlockNode>,
+  headings: Array<MarkdownHeading>,
+  framework: string | undefined,
+  insideSkippedComponent: boolean,
+) {
+  for (const block of blocks) {
+    switch (block.type) {
+      case 'heading': {
+        if (!insideSkippedComponent && block.id) {
+          const heading: MarkdownHeading = {
+            id: block.id,
+            text: inlineText(block.children),
+            level: block.depth,
+          }
+          const headingFramework = block.framework ?? framework
+
+          if (headingFramework) {
+            heading.framework = headingFramework
+          }
+
+          headings.push(heading)
+        }
+
+        break
+      }
+      case 'list':
+        for (const item of block.items) {
+          collectHeadingsFromBlocks(
+            item.children,
+            headings,
+            framework,
+            insideSkippedComponent,
+          )
+        }
+        break
+      case 'blockquote':
+      case 'callout':
+        collectHeadingsFromBlocks(
+          block.children,
+          headings,
+          framework,
+          insideSkippedComponent,
+        )
+        break
+      case 'component': {
+        const componentName = block.name.toLowerCase()
+        const nextInsideSkippedComponent =
+          insideSkippedComponent || componentName === 'tabs'
+        const nextFramework =
+          block.tagName === 'md-framework-panel'
+            ? (block.properties?.['data-framework'] ?? framework)
+            : framework
+
+        collectHeadingsFromBlocks(
+          block.children,
+          headings,
+          nextFramework,
+          nextInsideSkippedComponent,
+        )
+        break
+      }
+      case 'paragraph':
+      case 'code':
+      case 'table':
+      case 'footnotes':
+      case 'html':
+      case 'thematicBreak':
+        break
+    }
+  }
+}
+
+function inlineText(nodes: Array<InlineNode>): string {
+  let text = ''
+
+  for (const node of nodes) {
+    switch (node.type) {
+      case 'text':
+      case 'inlineCode':
+        text += node.value
+        break
+      case 'strong':
+      case 'emphasis':
+      case 'strike':
+      case 'link':
+        text += inlineText(node.children)
+        break
+      case 'image':
+        text += node.alt
+        break
+      case 'break':
+      case 'inlineHtml':
+      case 'footnoteReference':
+        break
+    }
+  }
+
+  return text
+}
+
+function createHeadingSlugger() {
+  const seen = new Map<string, number>()
+
+  return (value: string) => {
+    const base =
+      value
+        .toLowerCase()
+        .normalize('NFKD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/&[a-z0-9#]+;/gi, '')
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '') || 'section'
+    const count = seen.get(base) ?? 0
+
+    seen.set(base, count + 1)
+
+    return count === 0 ? base : `${base}-${count + 1}`
   }
 }
diff --git a/src/utils/mcpApiKeys.functions.ts b/src/utils/mcpApiKeys.functions.ts
index 959da3067..195a1ab91 100644
--- a/src/utils/mcpApiKeys.functions.ts
+++ b/src/utils/mcpApiKeys.functions.ts
@@ -3,7 +3,7 @@ import * as v from 'valibot'
 import { db } from '~/db/client'
 import { mcpApiKeys } from '~/db/schema'
 import { eq, and, desc } from 'drizzle-orm'
-import { requireAuth } from './auth.server'
+import { requireAuth } from './auth.functions'
 import { generateApiKey } from '~/mcp/auth.server'
 
 /**
@@ -49,7 +49,7 @@ export const listMcpApiKeys = createServerFn({ method: 'POST' }).handler(
  * Returns the raw key (only shown once)
  */
 export const createMcpApiKey = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       name: v.pipe(
         v.string(),
@@ -109,7 +109,7 @@ export const createMcpApiKey = createServerFn({ method: 'POST' })
  * Revoke (deactivate) an MCP API key
  */
 export const revokeMcpApiKey = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ keyId: v.pipe(v.string(), v.uuid()) }))
+  .validator(v.object({ keyId: v.pipe(v.string(), v.uuid()) }))
   .handler(async ({ data }) => {
     const user = await requireApiKeysAccess()
 
@@ -138,7 +138,7 @@ export const revokeMcpApiKey = createServerFn({ method: 'POST' })
  * Delete an MCP API key permanently
  */
 export const deleteMcpApiKey = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ keyId: v.pipe(v.string(), v.uuid()) }))
+  .validator(v.object({ keyId: v.pipe(v.string(), v.uuid()) }))
   .handler(async ({ data }) => {
     const user = await requireApiKeysAccess()
 
@@ -166,7 +166,7 @@ export const deleteMcpApiKey = createServerFn({ method: 'POST' })
  * Update an MCP API key's name
  */
 export const updateMcpApiKey = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       keyId: v.pipe(v.string(), v.uuid()),
       name: v.pipe(
diff --git a/src/utils/mutations.ts b/src/utils/mutations.ts
index 94b5205ce..6410c2fde 100644
--- a/src/utils/mutations.ts
+++ b/src/utils/mutations.ts
@@ -3,7 +3,7 @@ import {
   updateUserCapabilities,
   adminSetAdsDisabled,
   bulkUpdateUserCapabilities,
-} from './users.server'
+} from './users.functions'
 import {
   createRole,
   updateRole,
@@ -12,13 +12,6 @@ import {
   bulkAssignRolesToUsers,
   removeUsersFromRole,
 } from './roles.functions'
-import {
-  toggleFeedEntryVisibility,
-  setFeedEntryFeatured,
-  deleteFeedEntry,
-  createFeedEntry,
-  updateFeedEntry,
-} from './feed.functions'
 import type { Capability } from '~/db/types'
 
 // User mutations
@@ -137,84 +130,3 @@ export function useRemoveUsersFromRole() {
     },
   })
 }
-
-// Feed mutations
-export function useToggleFeedEntryVisibility() {
-  const queryClient = useQueryClient()
-  return useMutation({
-    mutationFn: (data: { id: string; showInFeed: boolean }) =>
-      toggleFeedEntryVisibility({ data }),
-    onSuccess: () => {
-      queryClient.invalidateQueries()
-    },
-  })
-}
-
-export function useSetFeedEntryFeatured() {
-  const queryClient = useQueryClient()
-  return useMutation({
-    mutationFn: (data: { id: string; featured: boolean }) =>
-      setFeedEntryFeatured({ data }),
-    onSuccess: () => {
-      queryClient.invalidateQueries()
-    },
-  })
-}
-
-export function useDeleteFeedEntry() {
-  const queryClient = useQueryClient()
-  return useMutation({
-    mutationFn: (data: { id: string }) => deleteFeedEntry({ data }),
-    onSuccess: () => {
-      queryClient.invalidateQueries()
-    },
-  })
-}
-
-export function useCreateFeedEntry() {
-  const queryClient = useQueryClient()
-  return useMutation({
-    mutationFn: (data: {
-      id: string
-      entryType: 'release' | 'blog' | 'announcement'
-      title: string
-      content: string
-      excerpt?: string
-      publishedAt: number
-      metadata?: any
-      libraryIds: string[]
-      partnerIds?: string[]
-      tags: string[]
-      showInFeed: boolean
-      featured?: boolean
-      autoSynced: boolean
-    }) => createFeedEntry({ data }),
-    onSuccess: () => {
-      queryClient.invalidateQueries()
-    },
-  })
-}
-
-export function useUpdateFeedEntry() {
-  const queryClient = useQueryClient()
-  return useMutation({
-    mutationFn: (data: {
-      id: string
-      entryType?: 'release' | 'blog' | 'announcement'
-      title?: string
-      content?: string
-      excerpt?: string
-      publishedAt?: number
-      metadata?: any
-      libraryIds?: string[]
-      partnerIds?: string[]
-      tags?: string[]
-      showInFeed?: boolean
-      featured?: boolean
-      lastSyncedAt?: number
-    }) => updateFeedEntry({ data }),
-    onSuccess: () => {
-      queryClient.invalidateQueries()
-    },
-  })
-}
diff --git a/src/utils/netlifyImage.ts b/src/utils/netlifyImage.ts
deleted file mode 100644
index 72e58026b..000000000
--- a/src/utils/netlifyImage.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Build a Netlify Image CDN URL for optimized image delivery.
- * Returns the original src in development or for external URLs, data URIs, and SVGs.
- *
- * @see https://docs.netlify.com/build/image-cdn/overview/
- */
-export function getNetlifyImageUrl(
-  src: string,
-  options: { width?: number; height?: number; quality?: number } = {},
-): string {
-  // Skip in development - Netlify Image CDN only works in production
-  if (import.meta.env.DEV) {
-    return src
-  }
-
-  if (
-    src.startsWith('http') ||
-    src.startsWith('data:') ||
-    src.endsWith('.svg')
-  ) {
-    return src
-  }
-
-  const { width = 800, quality = 80 } = options
-  return `/.netlify/images?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`
-}
diff --git a/src/utils/npm-download-cache.server.ts b/src/utils/npm-download-cache.server.ts
new file mode 100644
index 000000000..6a6fe13ed
--- /dev/null
+++ b/src/utils/npm-download-cache.server.ts
@@ -0,0 +1,738 @@
+import {
+  getBlobStorage,
+  getBlobStorageCache,
+  type BlobStorage,
+  type BlobStorageCache,
+  type BlobStorageListedObject,
+} from '~/server/runtime/blob-storage.server'
+import { getNpmDailyDownloadData } from './npm-download-ranges'
+
+export interface NpmDownloadChunkData {
+  packageName: string
+  dateFrom: string
+  dateTo: string
+  binSize: string
+  totalDownloads: number
+  dailyData: Array<{ day: string; downloads: number }>
+  isImmutable: boolean
+}
+
+type NpmDownloadChunkWithMetadata = NpmDownloadChunkData & {
+  createdAt?: string
+  expiresAt?: string
+  updatedAt?: string
+}
+
+type NpmDownloadChunkRequest = {
+  packageName: string
+  dateFrom: string
+  dateTo: string
+  binSize: string
+}
+
+type StoredNpmDownloadChunk = {
+  dailyData: Array<{ day: string; downloads: number }>
+}
+
+type ParsedNpmDownloadChunkKey = {
+  binSize: string
+  dateFrom: string
+  dateTo: string
+  packageName: string
+}
+
+const NPM_DOWNLOAD_BLOB_STORAGE = 'npmDownloadCache'
+const NPM_DOWNLOAD_CACHE_PREFIX = 'npm-downloads/v1'
+const STORED_CONTENT_TYPE = 'application/json; charset=utf-8'
+const MUTABLE_CACHE_TTL_MS = 6 * 60 * 60 * 1000
+
+let blobStoragePromise: Promise<BlobStorage | undefined> | undefined
+
+function getNpmDownloadBlobStorage() {
+  blobStoragePromise ??= getBlobStorage(NPM_DOWNLOAD_BLOB_STORAGE)
+  return blobStoragePromise
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function isStoredNpmDownloadChunk(
+  value: unknown,
+): value is StoredNpmDownloadChunk {
+  if (!isObject(value)) {
+    return false
+  }
+
+  const dailyData = Reflect.get(value, 'dailyData')
+  return (
+    Array.isArray(dailyData) &&
+    getNpmDailyDownloadData(dailyData).length === dailyData.length
+  )
+}
+
+function readStoredNpmDownloadChunk(text: string) {
+  let parsed: unknown
+
+  try {
+    parsed = JSON.parse(text)
+  } catch {
+    return undefined
+  }
+
+  return isStoredNpmDownloadChunk(parsed) ? parsed : undefined
+}
+
+function readMetadataString(
+  metadata: Record<string, string> | undefined,
+  key: string,
+) {
+  const value = metadata?.[key]
+  return typeof value === 'string' && value.length > 0 ? value : undefined
+}
+
+function readMetadataBoolean(
+  metadata: Record<string, string> | undefined,
+  key: string,
+) {
+  const value = readMetadataString(metadata, key)
+
+  if (value === 'true') return true
+  if (value === 'false') return false
+
+  return undefined
+}
+
+function readMetadataNumber(
+  metadata: Record<string, string> | undefined,
+  key: string,
+) {
+  const value = readMetadataString(metadata, key)
+  if (!value) return undefined
+
+  const number = Number(value)
+  return Number.isFinite(number) ? number : undefined
+}
+
+function encodeKeySegment(value: string) {
+  return encodeURIComponent(value)
+}
+
+function decodeKeySegment(value: string) {
+  try {
+    return decodeURIComponent(value)
+  } catch {
+    return undefined
+  }
+}
+
+function getNpmDownloadChunkKey(req: NpmDownloadChunkRequest) {
+  return `${NPM_DOWNLOAD_CACHE_PREFIX}/${encodeKeySegment(
+    req.binSize,
+  )}/${encodeKeySegment(req.packageName)}/${req.dateFrom}/${req.dateTo}.json`
+}
+
+function getNpmDownloadPackagePrefix({
+  binSize,
+  packageName,
+}: Pick<NpmDownloadChunkRequest, 'binSize' | 'packageName'>) {
+  return `${NPM_DOWNLOAD_CACHE_PREFIX}/${encodeKeySegment(
+    binSize,
+  )}/${encodeKeySegment(packageName)}/`
+}
+
+function getNpmDownloadRangeStartPrefix(req: NpmDownloadChunkRequest) {
+  return `${getNpmDownloadPackagePrefix(req)}${req.dateFrom}/`
+}
+
+function parseNpmDownloadChunkKey(
+  key: string,
+): ParsedNpmDownloadChunkKey | undefined {
+  const parts = key.split('/')
+
+  if (
+    parts.length !== 6 ||
+    parts[0] !== 'npm-downloads' ||
+    parts[1] !== 'v1' ||
+    !parts[5].endsWith('.json')
+  ) {
+    return undefined
+  }
+
+  const binSize = decodeKeySegment(parts[2])
+  const packageName = decodeKeySegment(parts[3])
+  const dateFrom = parts[4]
+  const dateTo = parts[5].slice(0, -'.json'.length)
+
+  if (!binSize || !packageName || !dateFrom || !dateTo) {
+    return undefined
+  }
+
+  return {
+    binSize,
+    dateFrom,
+    dateTo,
+    packageName,
+  }
+}
+
+function toIsoDayUtc(date: Date) {
+  return date.toISOString().slice(0, 10)
+}
+
+function getIsImmutable(dateTo: string) {
+  return dateTo < toIsoDayUtc(new Date())
+}
+
+function getMutableExpiresAt(now: Date) {
+  return new Date(now.getTime() + MUTABLE_CACHE_TTL_MS).toISOString()
+}
+
+function isFreshChunk(chunk: NpmDownloadChunkWithMetadata) {
+  if (chunk.isImmutable) {
+    return true
+  }
+
+  if (!chunk.expiresAt) {
+    return false
+  }
+
+  return new Date(chunk.expiresAt).getTime() > Date.now()
+}
+
+function createChunkMetadata(
+  data: NpmDownloadChunkData,
+  now: Date,
+): Record<string, string> {
+  const isImmutable = getIsImmutable(data.dateTo)
+  const updatedAt = now.toISOString()
+  const metadata: Record<string, string> = {
+    binSize: data.binSize,
+    createdAt: updatedAt,
+    dateFrom: data.dateFrom,
+    dateTo: data.dateTo,
+    isImmutable: String(isImmutable),
+    packageName: data.packageName,
+    totalDownloads: String(data.totalDownloads),
+    updatedAt,
+  }
+
+  if (!isImmutable) {
+    metadata.expiresAt = getMutableExpiresAt(now)
+  }
+
+  return metadata
+}
+
+function parseStoredChunk({
+  key,
+  metadata,
+  text,
+  uploaded,
+}: {
+  key: string
+  metadata: Record<string, string> | undefined
+  text: string
+  uploaded?: Date
+}): NpmDownloadChunkWithMetadata | undefined {
+  const parsedKey = parseNpmDownloadChunkKey(key)
+  const stored = readStoredNpmDownloadChunk(text)
+
+  if (!parsedKey || !stored) {
+    return undefined
+  }
+
+  const packageName = readMetadataString(metadata, 'packageName')
+  const dateFrom = readMetadataString(metadata, 'dateFrom')
+  const dateTo = readMetadataString(metadata, 'dateTo')
+  const binSize = readMetadataString(metadata, 'binSize')
+  const totalDownloads = readMetadataNumber(metadata, 'totalDownloads')
+  const isImmutable =
+    readMetadataBoolean(metadata, 'isImmutable') ??
+    getIsImmutable(parsedKey.dateTo)
+  const updatedAt =
+    readMetadataString(metadata, 'updatedAt') ?? uploaded?.toISOString()
+  const createdAt =
+    readMetadataString(metadata, 'createdAt') ?? uploaded?.toISOString()
+
+  return {
+    packageName: packageName ?? parsedKey.packageName,
+    dateFrom: dateFrom ?? parsedKey.dateFrom,
+    dateTo: dateTo ?? parsedKey.dateTo,
+    binSize: binSize ?? parsedKey.binSize,
+    totalDownloads:
+      totalDownloads ??
+      stored.dailyData.reduce((sum, point) => sum + point.downloads, 0),
+    dailyData: stored.dailyData,
+    isImmutable,
+    createdAt,
+    expiresAt: readMetadataString(metadata, 'expiresAt'),
+    updatedAt,
+  }
+}
+
+async function putCacheEntry(
+  cache: BlobStorageCache | undefined,
+  key: string,
+  text: string,
+  metadata: Record<string, string>,
+) {
+  try {
+    await cache?.put(key, {
+      metadata,
+      text,
+    })
+  } catch (error) {
+    console.warn('[NPM Download R2] Cache API write failed:', error)
+  }
+}
+
+function createChunkCacheMetadata(
+  chunk: NpmDownloadChunkWithMetadata,
+): Record<string, string> {
+  const metadata: Record<string, string> = {
+    binSize: chunk.binSize,
+    dateFrom: chunk.dateFrom,
+    dateTo: chunk.dateTo,
+    isImmutable: String(chunk.isImmutable),
+    packageName: chunk.packageName,
+    totalDownloads: String(chunk.totalDownloads),
+  }
+
+  if (chunk.createdAt) {
+    metadata.createdAt = chunk.createdAt
+  }
+
+  if (chunk.expiresAt) {
+    metadata.expiresAt = chunk.expiresAt
+  }
+
+  if (chunk.updatedAt) {
+    metadata.updatedAt = chunk.updatedAt
+  }
+
+  return metadata
+}
+
+async function readBlobChunk({
+  allowStale,
+  cache,
+  key,
+  storage,
+}: {
+  allowStale?: boolean
+  cache: BlobStorageCache | undefined
+  key: string
+  storage: BlobStorage
+}) {
+  const cached = await cache?.get(key)
+
+  if (cached) {
+    const cachedChunk = parseStoredChunk({
+      key,
+      metadata: cached.metadata,
+      text: cached.text,
+    })
+
+    if (cachedChunk && (allowStale || isFreshChunk(cachedChunk))) {
+      return cachedChunk
+    }
+  }
+
+  const object = await storage.get(key)
+  if (!object) {
+    return undefined
+  }
+
+  const text = await object.text()
+  const chunk = parseStoredChunk({
+    key: object.key,
+    metadata: object.metadata,
+    text,
+    uploaded: object.uploaded,
+  })
+
+  if (!chunk) {
+    return undefined
+  }
+
+  if (!allowStale && !isFreshChunk(chunk)) {
+    return undefined
+  }
+
+  await putCacheEntry(cache, key, text, createChunkCacheMetadata(chunk))
+
+  return chunk
+}
+
+async function listBlobObjects(
+  storage: BlobStorage,
+  prefix: string,
+): Promise<Array<BlobStorageListedObject>> {
+  const objects: Array<BlobStorageListedObject> = []
+  let cursor: string | undefined
+
+  do {
+    const result = await storage.list({
+      cursor,
+      limit: 1000,
+      prefix,
+    })
+
+    objects.push(...result.objects)
+    cursor = result.cursor
+
+    if (!result.truncated) {
+      break
+    }
+  } while (cursor)
+
+  return objects
+}
+
+function getListedObjectChunkKey(object: BlobStorageListedObject) {
+  return parseNpmDownloadChunkKey(object.key)
+}
+
+function sortListedObjectsByNewestRangeEnd(
+  a: BlobStorageListedObject,
+  b: BlobStorageListedObject,
+) {
+  const aKey = getListedObjectChunkKey(a)
+  const bKey = getListedObjectChunkKey(b)
+
+  const dateCompare = (bKey?.dateTo ?? '').localeCompare(aKey?.dateTo ?? '')
+  if (dateCompare !== 0) {
+    return dateCompare
+  }
+
+  return (b.uploaded?.getTime() ?? 0) - (a.uploaded?.getTime() ?? 0)
+}
+
+async function getLegacyNpmDownloadCache() {
+  return import('./stats-db.server')
+}
+
+async function putBlobChunk(data: NpmDownloadChunkData) {
+  const storage = await getNpmDownloadBlobStorage()
+  if (!storage) {
+    return false
+  }
+
+  const now = new Date()
+  const key = getNpmDownloadChunkKey(data)
+  const metadata = createChunkMetadata(data, now)
+  const dailyData = getNpmDailyDownloadData(data.dailyData)
+  const text = JSON.stringify({
+    dailyData,
+  } satisfies StoredNpmDownloadChunk)
+  const cache = getBlobStorageCache(NPM_DOWNLOAD_BLOB_STORAGE)
+
+  await storage.put(key, text, {
+    contentType: STORED_CONTENT_TYPE,
+    metadata,
+  })
+  await putCacheEntry(cache, key, text, metadata)
+
+  return true
+}
+
+async function backfillBlobChunk(
+  data: NpmDownloadChunkData | undefined | null,
+) {
+  if (!data) {
+    return
+  }
+
+  try {
+    await putBlobChunk(data)
+  } catch (error) {
+    console.warn(
+      `[NPM Download R2] Backfill failed for ${data.packageName} ${data.dateFrom}:${data.dateTo}:`,
+      error,
+    )
+  }
+}
+
+function mapLegacyChunk(chunk: NpmDownloadChunkData): NpmDownloadChunkData {
+  return {
+    ...chunk,
+    dailyData: getNpmDailyDownloadData(chunk.dailyData),
+  }
+}
+
+function getChunkCacheKey(req: NpmDownloadChunkRequest) {
+  return `${req.packageName}|${req.dateFrom}|${req.dateTo}|${req.binSize}`
+}
+
+export async function getCachedNpmDownloadChunk(
+  packageName: string,
+  dateFrom: string,
+  dateTo: string,
+  binSize: string = 'daily',
+): Promise<NpmDownloadChunkData | null> {
+  const storage = await getNpmDownloadBlobStorage()
+
+  if (storage) {
+    const cache = getBlobStorageCache(NPM_DOWNLOAD_BLOB_STORAGE)
+    const chunk = await readBlobChunk({
+      cache,
+      key: getNpmDownloadChunkKey({ binSize, dateFrom, dateTo, packageName }),
+      storage,
+    })
+
+    if (chunk) {
+      return chunk
+    }
+  }
+
+  const legacy = await getLegacyNpmDownloadCache()
+  const legacyChunk = await legacy.getCachedNpmDownloadChunk(
+    packageName,
+    dateFrom,
+    dateTo,
+    binSize,
+  )
+
+  if (legacyChunk) {
+    const mapped = mapLegacyChunk(legacyChunk)
+    await backfillBlobChunk(mapped)
+    return mapped
+  }
+
+  return null
+}
+
+export async function getBatchNpmDownloadChunks(
+  requests: Array<NpmDownloadChunkRequest>,
+): Promise<Map<string, NpmDownloadChunkWithMetadata>> {
+  const results = new Map<string, NpmDownloadChunkWithMetadata>()
+
+  if (requests.length === 0) {
+    return results
+  }
+
+  const storage = await getNpmDownloadBlobStorage()
+
+  if (storage) {
+    const cache = getBlobStorageCache(NPM_DOWNLOAD_BLOB_STORAGE)
+    await Promise.all(
+      requests.map(async (req) => {
+        const chunk = await readBlobChunk({
+          cache,
+          key: getNpmDownloadChunkKey(req),
+          storage,
+        })
+
+        if (chunk) {
+          results.set(getChunkCacheKey(req), chunk)
+        }
+      }),
+    )
+  }
+
+  const missedRequests = requests.filter(
+    (req) => !results.has(getChunkCacheKey(req)),
+  )
+
+  if (missedRequests.length === 0) {
+    return results
+  }
+
+  const legacy = await getLegacyNpmDownloadCache()
+  const legacyChunks = await legacy.getBatchNpmDownloadChunks(missedRequests)
+
+  await Promise.all(
+    [...legacyChunks.entries()].map(async ([cacheKey, chunk]) => {
+      const mapped = mapLegacyChunk(chunk)
+      results.set(cacheKey, {
+        ...mapped,
+        createdAt: chunk.createdAt,
+        updatedAt: chunk.updatedAt,
+      })
+      await backfillBlobChunk(mapped)
+    }),
+  )
+
+  return results
+}
+
+export async function getLatestNpmDownloadChunksBeforeRangeEnd(
+  requests: Array<NpmDownloadChunkRequest>,
+): Promise<Map<string, NpmDownloadChunkWithMetadata>> {
+  const results = new Map<string, NpmDownloadChunkWithMetadata>()
+
+  if (requests.length === 0) {
+    return results
+  }
+
+  const storage = await getNpmDownloadBlobStorage()
+
+  if (storage) {
+    const cache = getBlobStorageCache(NPM_DOWNLOAD_BLOB_STORAGE)
+
+    await Promise.all(
+      requests.map(async (req) => {
+        const objects = await listBlobObjects(
+          storage,
+          getNpmDownloadRangeStartPrefix(req),
+        )
+        const candidates = objects
+          .filter((object) => {
+            const parsed = getListedObjectChunkKey(object)
+            return (
+              parsed?.packageName === req.packageName &&
+              parsed.binSize === req.binSize &&
+              parsed.dateFrom === req.dateFrom &&
+              parsed.dateTo <= req.dateTo
+            )
+          })
+          .sort(sortListedObjectsByNewestRangeEnd)
+
+        for (const candidate of candidates) {
+          const chunk = await readBlobChunk({
+            allowStale: true,
+            cache,
+            key: candidate.key,
+            storage,
+          })
+
+          if (chunk) {
+            results.set(getChunkCacheKey(req), chunk)
+            break
+          }
+        }
+      }),
+    )
+  }
+
+  const missedRequests = requests.filter(
+    (req) => !results.has(getChunkCacheKey(req)),
+  )
+
+  if (missedRequests.length === 0) {
+    return results
+  }
+
+  const legacy = await getLegacyNpmDownloadCache()
+  const legacyChunks =
+    await legacy.getLatestNpmDownloadChunksBeforeRangeEnd(missedRequests)
+
+  await Promise.all(
+    [...legacyChunks.entries()].map(async ([cacheKey, chunk]) => {
+      const mapped = mapLegacyChunk(chunk)
+      results.set(cacheKey, {
+        ...mapped,
+        createdAt: chunk.createdAt,
+        updatedAt: chunk.updatedAt,
+      })
+      await backfillBlobChunk(mapped)
+    }),
+  )
+
+  return results
+}
+
+export async function getLatestNpmDownloadChunksCoveringRange({
+  dateFrom,
+  dateTo,
+  packageNames,
+}: {
+  dateFrom: string
+  dateTo: string
+  packageNames: Array<string>
+}): Promise<Map<string, NpmDownloadChunkData>> {
+  const results = new Map<string, NpmDownloadChunkData>()
+
+  if (packageNames.length === 0) {
+    return results
+  }
+
+  const storage = await getNpmDownloadBlobStorage()
+
+  if (storage) {
+    const cache = getBlobStorageCache(NPM_DOWNLOAD_BLOB_STORAGE)
+
+    await Promise.all(
+      packageNames.map(async (packageName) => {
+        const objects = await listBlobObjects(
+          storage,
+          getNpmDownloadPackagePrefix({
+            binSize: 'daily',
+            packageName,
+          }),
+        )
+        const candidates = objects
+          .filter((object) => {
+            const parsed = getListedObjectChunkKey(object)
+            return (
+              parsed?.packageName === packageName &&
+              parsed.binSize === 'daily' &&
+              parsed.dateFrom <= dateFrom &&
+              parsed.dateTo >= dateTo
+            )
+          })
+          .sort(sortListedObjectsByNewestRangeEnd)
+
+        for (const candidate of candidates) {
+          const chunk = await readBlobChunk({
+            allowStale: true,
+            cache,
+            key: candidate.key,
+            storage,
+          })
+
+          if (chunk) {
+            results.set(packageName, chunk)
+            break
+          }
+        }
+      }),
+    )
+  }
+
+  const missedPackageNames = packageNames.filter(
+    (packageName) => !results.has(packageName),
+  )
+
+  if (missedPackageNames.length === 0) {
+    return results
+  }
+
+  const legacy = await getLegacyNpmDownloadCache()
+  const legacyChunks = await legacy.getLatestNpmDownloadChunksCoveringRange({
+    dateFrom,
+    dateTo,
+    packageNames: missedPackageNames,
+  })
+
+  await Promise.all(
+    [...legacyChunks.entries()].map(async ([packageName, chunk]) => {
+      const mapped = mapLegacyChunk(chunk)
+      results.set(packageName, mapped)
+      await backfillBlobChunk(mapped)
+    }),
+  )
+
+  return results
+}
+
+export async function setCachedNpmDownloadChunk(
+  data: NpmDownloadChunkData,
+): Promise<void> {
+  try {
+    const wroteBlob = await putBlobChunk(data)
+
+    if (wroteBlob) {
+      return
+    }
+  } catch (error) {
+    console.error(
+      `[NPM Download R2] Error caching ${data.packageName} ${data.dateFrom}:${data.dateTo}:`,
+      error,
+    )
+  }
+
+  const legacy = await getLegacyNpmDownloadCache()
+  await legacy.setCachedNpmDownloadChunk(data)
+}
diff --git a/src/utils/npm-download-outliers.ts b/src/utils/npm-download-outliers.ts
new file mode 100644
index 000000000..00b10c9b6
--- /dev/null
+++ b/src/utils/npm-download-outliers.ts
@@ -0,0 +1,369 @@
+export interface NpmDailyDownload {
+  day: string
+  downloads: number
+}
+
+interface LocalMedianReplacement {
+  kind: 'local-median'
+  side?: 'after' | 'before' | 'both'
+  windowDays?: number
+}
+
+interface SameWeekdayReplacement {
+  kind: 'same-weekday'
+  side?: 'after' | 'before' | 'both'
+  windowWeeks?: number
+}
+
+interface FixedReplacement {
+  downloads: number
+  kind: 'fixed'
+}
+
+type NpmDownloadOutlierReplacement =
+  | FixedReplacement
+  | LocalMedianReplacement
+  | SameWeekdayReplacement
+
+interface NpmDownloadOutlierOverride {
+  dateFrom: string
+  dateTo: string
+  note: string
+  packageName: string
+  replacement: NpmDownloadOutlierReplacement
+}
+
+const DEFAULT_LOCAL_MEDIAN_WINDOW_DAYS = 7
+
+// Manual registry for npm download spikes that survive in historical cache data
+// and squash the chart y-axis. Add new package/date spans here as we discover
+// them.
+export const npmDownloadOutlierOverrides: NpmDownloadOutlierOverride[] = [
+  {
+    dateFrom: '2022-11-16',
+    dateTo: '2022-11-29',
+    note: 'Historical svelte corruption burst in late 2022.',
+    packageName: 'svelte',
+    replacement: {
+      kind: 'local-median',
+      windowDays: 14,
+    },
+  },
+  {
+    dateFrom: '2023-06-20',
+    dateTo: '2023-06-21',
+    note: 'Historical svelte spike in June 2023.',
+    packageName: 'svelte',
+    replacement: {
+      kind: 'local-median',
+      windowDays: 14,
+    },
+  },
+  {
+    dateFrom: '2023-11-19',
+    dateTo: '2023-11-20',
+    note: 'Historical svelte spike around 2023-11-19 UTC.',
+    packageName: 'svelte',
+    replacement: {
+      kind: 'local-median',
+      windowDays: 14,
+    },
+  },
+  {
+    dateFrom: '2022-11-28',
+    dateTo: '2022-12-22',
+    note: 'Historical vue corruption burst in late 2022.',
+    packageName: 'vue',
+    replacement: {
+      kind: 'local-median',
+      side: 'before',
+      windowDays: 21,
+    },
+  },
+  {
+    dateFrom: '2025-08-10',
+    dateTo: '2025-08-29',
+    note: 'Historical vite corruption burst in August 2025.',
+    packageName: 'vite',
+    replacement: {
+      kind: 'same-weekday',
+      side: 'before',
+      windowWeeks: 6,
+    },
+  },
+]
+
+const outlierOverridesByPackage = new Map<
+  string,
+  NpmDownloadOutlierOverride[]
+>()
+
+for (const override of npmDownloadOutlierOverrides) {
+  let packageOverrides = outlierOverridesByPackage.get(override.packageName)
+
+  if (!packageOverrides) {
+    packageOverrides = []
+    outlierOverridesByPackage.set(override.packageName, packageOverrides)
+  }
+
+  packageOverrides.push(override)
+}
+
+function doesDayMatchOverride(
+  day: string,
+  override: NpmDownloadOutlierOverride,
+) {
+  return day >= override.dateFrom && day <= override.dateTo
+}
+
+function findMatchingOverride(
+  day: string,
+  packageOverrides: NpmDownloadOutlierOverride[],
+) {
+  for (const override of packageOverrides) {
+    if (doesDayMatchOverride(day, override)) {
+      return override
+    }
+  }
+
+  return undefined
+}
+
+function getDistanceFromOverride(
+  day: string,
+  override: NpmDownloadOutlierOverride,
+  side: 'after' | 'before' | 'both',
+) {
+  if (side === 'before') {
+    return getUtcDayDistance(day, override.dateFrom)
+  }
+
+  if (side === 'after') {
+    return getUtcDayDistance(day, override.dateTo)
+  }
+
+  if (day < override.dateFrom) {
+    return getUtcDayDistance(day, override.dateFrom)
+  }
+
+  return getUtcDayDistance(day, override.dateTo)
+}
+
+function isManualOutlierDay(
+  day: string,
+  packageOverrides: NpmDownloadOutlierOverride[],
+) {
+  return findMatchingOverride(day, packageOverrides) !== undefined
+}
+
+function getMedian(values: number[]) {
+  if (values.length === 0) {
+    return undefined
+  }
+
+  const sorted = [...values].sort((a, b) => a - b)
+  const middleIndex = Math.floor(sorted.length / 2)
+
+  if (sorted.length % 2 === 1) {
+    return sorted[middleIndex]
+  }
+
+  const left = sorted[middleIndex - 1]
+  const right = sorted[middleIndex]
+
+  if (left === undefined || right === undefined) {
+    return sorted[middleIndex]
+  }
+
+  return (left + right) / 2
+}
+
+function getUtcDayDistance(left: string, right: string) {
+  const leftTime = new Date(`${left}T00:00:00.000Z`).getTime()
+  const rightTime = new Date(`${right}T00:00:00.000Z`).getTime()
+  return Math.round(Math.abs(leftTime - rightTime) / 86_400_000)
+}
+
+function getUtcDayOfWeek(day: string) {
+  return new Date(`${day}T00:00:00.000Z`).getUTCDay()
+}
+
+function resolveLocalMedianReplacementDownloads(
+  override: NpmDownloadOutlierOverride,
+  dailyDownloads: NpmDailyDownload[],
+  packageOverrides: NpmDownloadOutlierOverride[],
+) {
+  if (override.replacement.kind !== 'local-median') return undefined
+  const windowDays =
+    override.replacement.windowDays ?? DEFAULT_LOCAL_MEDIAN_WINDOW_DAYS
+  const side = override.replacement.side ?? 'both'
+  const nearbyDownloads: number[] = []
+
+  for (const point of dailyDownloads) {
+    if (isManualOutlierDay(point.day, packageOverrides)) {
+      continue
+    }
+
+    if (point.downloads <= 0) {
+      continue
+    }
+
+    if (side === 'before' && point.day >= override.dateFrom) {
+      continue
+    }
+
+    if (side === 'after' && point.day <= override.dateTo) {
+      continue
+    }
+
+    if (getDistanceFromOverride(point.day, override, side) > windowDays) {
+      continue
+    }
+
+    nearbyDownloads.push(point.downloads)
+  }
+
+  const localMedian = getMedian(nearbyDownloads)
+
+  if (localMedian === undefined) {
+    const originalPoint = dailyDownloads.find((point) =>
+      doesDayMatchOverride(point.day, override),
+    )
+    return originalPoint?.downloads
+  }
+
+  return Math.round(localMedian)
+}
+
+function resolveSameWeekdayReplacementDownloads(
+  day: string,
+  override: NpmDownloadOutlierOverride,
+  dailyDownloads: NpmDailyDownload[],
+  packageOverrides: NpmDownloadOutlierOverride[],
+  side: 'after' | 'before' | 'both',
+) {
+  if (override.replacement.kind !== 'same-weekday') return undefined
+
+  const windowDays = (override.replacement.windowWeeks ?? 4) * 7
+  const targetDayOfWeek = getUtcDayOfWeek(day)
+  const nearbyDownloads: number[] = []
+
+  for (const point of dailyDownloads) {
+    if (point.day === day) {
+      continue
+    }
+
+    if (isManualOutlierDay(point.day, packageOverrides)) {
+      continue
+    }
+
+    if (point.downloads <= 0) {
+      continue
+    }
+
+    if (getUtcDayOfWeek(point.day) !== targetDayOfWeek) {
+      continue
+    }
+
+    if (side === 'before' && point.day >= day) {
+      continue
+    }
+
+    if (side === 'after' && point.day <= day) {
+      continue
+    }
+
+    if (getUtcDayDistance(point.day, day) > windowDays) {
+      continue
+    }
+
+    nearbyDownloads.push(point.downloads)
+  }
+
+  const localMedian = getMedian(nearbyDownloads)
+
+  if (localMedian === undefined) {
+    return undefined
+  }
+
+  return Math.round(localMedian)
+}
+
+function resolveReplacementDownloads(
+  day: string,
+  override: NpmDownloadOutlierOverride,
+  dailyDownloads: NpmDailyDownload[],
+  packageOverrides: NpmDownloadOutlierOverride[],
+) {
+  switch (override.replacement.kind) {
+    case 'fixed':
+      return override.replacement.downloads
+    case 'local-median':
+      return resolveLocalMedianReplacementDownloads(
+        override,
+        dailyDownloads,
+        packageOverrides,
+      )
+    case 'same-weekday': {
+      const side = override.replacement.side ?? 'both'
+      const replacement = resolveSameWeekdayReplacementDownloads(
+        day,
+        override,
+        dailyDownloads,
+        packageOverrides,
+        side,
+      )
+
+      if (replacement !== undefined || side === 'both') {
+        return replacement
+      }
+
+      return resolveSameWeekdayReplacementDownloads(
+        day,
+        override,
+        dailyDownloads,
+        packageOverrides,
+        'both',
+      )
+    }
+  }
+}
+
+export function applyManualNpmDownloadOutlierCorrections(
+  packageName: string,
+  dailyDownloads: NpmDailyDownload[],
+) {
+  const packageOverrides = outlierOverridesByPackage.get(packageName)
+
+  if (
+    !packageOverrides ||
+    packageOverrides.length === 0 ||
+    dailyDownloads.length === 0
+  ) {
+    return dailyDownloads
+  }
+
+  return dailyDownloads.map((point) => {
+    const override = findMatchingOverride(point.day, packageOverrides)
+
+    if (!override) {
+      return point
+    }
+
+    const downloads = resolveReplacementDownloads(
+      point.day,
+      override,
+      dailyDownloads,
+      packageOverrides,
+    )
+
+    if (downloads === undefined || downloads === point.downloads) {
+      return point
+    }
+
+    return {
+      ...point,
+      downloads,
+    }
+  })
+}
diff --git a/src/utils/npm-download-ranges.ts b/src/utils/npm-download-ranges.ts
new file mode 100644
index 000000000..09924272e
--- /dev/null
+++ b/src/utils/npm-download-ranges.ts
@@ -0,0 +1,113 @@
+import type { NpmDailyDownload } from './npm-download-outliers'
+
+export const NPM_STATS_START_DATE = '2015-01-10'
+
+type NpmDownloadRange = {
+  from: string
+  to: string
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+export function toIsoDayUtc(date: Date): string {
+  return date.toISOString().slice(0, 10)
+}
+
+export function addUtcDays(day: string, amount: number): string {
+  const date = new Date(`${day}T00:00:00.000Z`)
+  date.setUTCDate(date.getUTCDate() + amount)
+  return toIsoDayUtc(date)
+}
+
+export function getInclusiveUtcDayCount(startDay: string, endDay: string) {
+  const start = new Date(`${startDay}T00:00:00.000Z`).getTime()
+  const end = new Date(`${endDay}T00:00:00.000Z`).getTime()
+  const dayInMs = 24 * 60 * 60 * 1000
+
+  return Math.floor((end - start) / dayInMs) + 1
+}
+
+export function hasCompleteDailyCoverage(
+  downloads: Array<NpmDailyDownload>,
+  startDay: string,
+  endDay: string,
+) {
+  if (downloads.length !== getInclusiveUtcDayCount(startDay, endDay)) {
+    return false
+  }
+
+  return downloads[0]?.day === startDay && downloads.at(-1)?.day === endDay
+}
+
+export function isNpmDailyDownload(value: unknown): value is NpmDailyDownload {
+  return (
+    isObject(value) &&
+    typeof Reflect.get(value, 'day') === 'string' &&
+    typeof Reflect.get(value, 'downloads') === 'number'
+  )
+}
+
+export function getNpmDailyDownloadData(value: unknown) {
+  if (!Array.isArray(value)) {
+    return []
+  }
+
+  return value.filter(isNpmDailyDownload)
+}
+
+export function getNpmDailyDownloadsFromResponse(value: unknown) {
+  if (!isObject(value)) {
+    return []
+  }
+
+  return getNpmDailyDownloadData(Reflect.get(value, 'downloads'))
+}
+
+export function getNpmDownloadResponseError(value: unknown) {
+  if (!isObject(value)) {
+    return undefined
+  }
+
+  const error = Reflect.get(value, 'error')
+  return typeof error === 'string' ? error : undefined
+}
+
+export function getNormalizedNpmDownloadChunks({
+  endDate,
+  startDate,
+  today = toIsoDayUtc(new Date()),
+}: {
+  endDate: string
+  startDate: string
+  today?: string
+}): Array<NpmDownloadRange> {
+  const boundedStart =
+    startDate < NPM_STATS_START_DATE ? NPM_STATS_START_DATE : startDate
+  const boundedEnd = endDate > today ? today : endDate
+
+  if (boundedStart > boundedEnd) {
+    return []
+  }
+
+  const startYear = new Date(`${boundedStart}T00:00:00.000Z`).getUTCFullYear()
+  const endYear = new Date(`${boundedEnd}T00:00:00.000Z`).getUTCFullYear()
+  const chunks: Array<NpmDownloadRange> = []
+
+  for (let year = startYear; year <= endYear; year++) {
+    const yearStart = `${year}-01-01`
+    const yearEnd = `${year}-12-31`
+    const from =
+      yearStart < NPM_STATS_START_DATE ? NPM_STATS_START_DATE : yearStart
+    const to = yearEnd > today ? today : yearEnd
+
+    if (to < boundedStart || from > boundedEnd) {
+      continue
+    }
+
+    chunks.push({ from, to })
+  }
+
+  return chunks
+}
diff --git a/src/utils/npm-packages.ts b/src/utils/npm-packages.ts
index 53141a741..546d329a7 100644
--- a/src/utils/npm-packages.ts
+++ b/src/utils/npm-packages.ts
@@ -28,6 +28,9 @@ export const frameworkMeta: Record<Framework, { name: string; color: string }> =
     svelte: { name: 'Svelte', color: '#FF3E00' },
     angular: { name: 'Angular', color: '#DD0031' },
     lit: { name: 'Lit', color: '#325CFF' },
+    alpine: { name: 'Alpine', color: '#77C1D2' },
+    marko: { name: 'Marko', color: '#44bfef' },
+    ember: { name: 'Ember', color: '#E04E39' },
     qwik: { name: 'Qwik', color: '#18B6F6' },
     vanilla: { name: 'Vanilla', color: '#F7DF1E' },
   }
diff --git a/src/utils/npm-stats-limits.ts b/src/utils/npm-stats-limits.ts
new file mode 100644
index 000000000..dcab73838
--- /dev/null
+++ b/src/utils/npm-stats-limits.ts
@@ -0,0 +1,3 @@
+export const MAX_NPM_STATS_GROUPS = 32
+export const MAX_NPM_STATS_PACKAGES_PER_GROUP = 32
+export const MAX_NPM_STATS_TOTAL_PACKAGES = 32
diff --git a/src/utils/oauthClient.functions.ts b/src/utils/oauthClient.functions.ts
index 350050f70..a6ebf1670 100644
--- a/src/utils/oauthClient.functions.ts
+++ b/src/utils/oauthClient.functions.ts
@@ -1,6 +1,6 @@
 import { createServerFn } from '@tanstack/react-start'
 import * as v from 'valibot'
-import { requireAuth, getCurrentUser } from './auth.server'
+import { requireAuth, getCurrentUser } from './auth.functions'
 import {
   listConnectedApps as listConnectedAppsService,
   revokeTokensForClient,
@@ -29,7 +29,7 @@ export const listConnectedApps = createServerFn({ method: 'POST' }).handler(
  * Revoke access for a connected OAuth app
  */
 export const revokeConnectedApp = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       clientId: v.string(),
     }),
@@ -46,7 +46,7 @@ export const revokeConnectedApp = createServerFn({ method: 'POST' })
  * Create an OAuth authorization code
  */
 export const createAuthorizationCode = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       clientId: v.string(),
       redirectUri: v.string(),
diff --git a/src/utils/og-limits.ts b/src/utils/og-limits.ts
new file mode 100644
index 000000000..5ad8a5928
--- /dev/null
+++ b/src/utils/og-limits.ts
@@ -0,0 +1,12 @@
+// OG image text limits — shared between the server-side generator
+// (src/server/og/generate.server.ts) and the client-side URL helper
+// (src/utils/og.ts), so the meta og:image URL stays bounded at the
+// same length the renderer would clamp to anyway.
+export const MAX_OG_TITLE_LENGTH = 80
+export const MAX_OG_DESCRIPTION_LENGTH = 160
+
+export function clampOgText(text: string, max: number): string {
+  const trimmed = text.trim()
+  if (trimmed.length <= max) return trimmed
+  return trimmed.slice(0, max - 1).trimEnd() + '…'
+}
diff --git a/src/utils/og.ts b/src/utils/og.ts
new file mode 100644
index 000000000..fcb1c12f1
--- /dev/null
+++ b/src/utils/og.ts
@@ -0,0 +1,71 @@
+import { createIsomorphicFn } from '@tanstack/react-start'
+import { getRequest } from '@tanstack/react-start/server'
+import type { LibraryId } from '~/libraries'
+import {
+  MAX_OG_DESCRIPTION_LENGTH,
+  MAX_OG_TITLE_LENGTH,
+  clampOgText,
+} from './og-limits'
+import { SITE_URL } from './site'
+
+type OgImageOptions = {
+  title?: string | null
+  description?: string | null
+}
+
+/**
+ * Absolute origin to use for og:image URLs.
+ *
+ * Unlike canonical links (which always point to production), og:image
+ * URLs MUST be reachable on the same deploy that emitted them — social-
+ * card validators fetch the URL from the meta tag verbatim, so on a
+ * staging deploy the og:image must point at the preview origin, not at
+ * production.
+ *
+ * The incoming request URL is the source of truth. Read the origin from the
+ * live request via TanStack Start's `getRequest()`. The server import is
+ * referenced only inside
+ * `.server()`, which the start compiler treats as a client-safe boundary
+ * — the import is tree-shaken from the client bundle.
+ */
+const getOgOrigin = createIsomorphicFn()
+  .server((): string => {
+    try {
+      const request = getRequest()
+      if (request?.url) return new URL(request.url).origin
+    } catch {
+      // getRequest() throws if called outside an SSR request context.
+    }
+    return SITE_URL
+  })
+  .client((): string =>
+    typeof window !== 'undefined' ? window.location.origin : SITE_URL,
+  )
+
+/**
+ * Absolute URL for a package-themed OG image.
+ * Defaults to the library's name + tagline. Pass a title/description
+ * to override (used by docs pages).
+ */
+export function ogImageUrl(
+  libraryId: LibraryId,
+  options: OgImageOptions = {},
+): string {
+  // Clamp client-side to the same limits as the server-side generator so
+  // <meta og:image> URLs stay bounded and CDN cache keys stay stable.
+  const params = new URLSearchParams()
+  if (options.title) {
+    params.set('title', clampOgText(options.title, MAX_OG_TITLE_LENGTH))
+  }
+  if (options.description) {
+    params.set(
+      'description',
+      clampOgText(options.description, MAX_OG_DESCRIPTION_LENGTH),
+    )
+  }
+
+  const qs = params.toString()
+  const path = `/api/og/${libraryId}.png${qs ? `?${qs}` : ''}`
+
+  return `${getOgOrigin()}${path}`
+}
diff --git a/src/utils/ogGradient.ts b/src/utils/ogGradient.ts
new file mode 100644
index 000000000..65ce46027
--- /dev/null
+++ b/src/utils/ogGradient.ts
@@ -0,0 +1,226 @@
+// Slug-derived gradient used as a muted cover-image placeholder for blog
+// posts that ship without a header image. Same input slug always renders
+// the same gradient. When a library id is provided, the palette is built
+// around that library's primary hue so posts feel branded.
+
+type Blob = {
+  cx: number
+  cy: number
+  rx: number
+  ry: number
+  hue: number
+  sat: number
+  light: number
+  alpha: number
+  stop: number
+}
+
+// Base hues per library, chosen to match each library's primary brand color.
+// Libraries without a clear chromatic color (ranger, config, devtools, mcp)
+// are omitted and fall back to the slug-derived palette.
+const LIBRARY_HUES: Record<string, number> = {
+  query: 0, // red → amber
+  router: 150, // emerald → lime
+  start: 180, // teal → cyan
+  table: 200, // cyan → blue
+  form: 50, // yellow
+  virtual: 270, // purple → violet
+  store: 30, // twine
+  pacer: 80, // lime
+  hotkeys: 350, // rose
+  db: 25, // orange
+  ai: 330, // pink
+  intent: 200, // sky
+  cli: 250, // indigo → violet
+}
+
+// Palette mixes hue offsets with lightness/saturation variation so adjacent
+// blobs read as separate "regions" rather than blending into one wash.
+function paletteFromHue(hue: number): Array<[number, number, number]> {
+  return [
+    [(hue - 30 + 360) % 360, 38, 52],
+    [(hue - 12 + 360) % 360, 30, 70],
+    [(hue + 360) % 360, 42, 58],
+    [(hue + 18) % 360, 28, 72],
+    [(hue + 36) % 360, 40, 55],
+  ]
+}
+
+const PALETTES: Array<Array<[number, number, number]>> = [
+  // indigo / violet / rose
+  [
+    [250, 35, 60],
+    [280, 30, 58],
+    [320, 28, 62],
+    [220, 32, 55],
+    [260, 35, 65],
+  ],
+  // teal / cyan / blue
+  [
+    [180, 32, 55],
+    [200, 35, 60],
+    [220, 32, 58],
+    [170, 30, 60],
+    [205, 35, 62],
+  ],
+  // ember — amber / orange / rose
+  [
+    [25, 38, 60],
+    [10, 35, 60],
+    [340, 32, 60],
+    [40, 38, 62],
+    [355, 35, 60],
+  ],
+  // forest / emerald / lime
+  [
+    [140, 30, 55],
+    [160, 32, 55],
+    [100, 28, 58],
+    [180, 26, 55],
+    [120, 30, 58],
+  ],
+  // dusk — purple / pink / coral
+  [
+    [300, 30, 62],
+    [330, 32, 65],
+    [350, 32, 65],
+    [270, 28, 60],
+    [315, 30, 62],
+  ],
+  // ocean — deep blue / cyan / aqua
+  [
+    [210, 35, 58],
+    [195, 32, 60],
+    [240, 30, 60],
+    [180, 30, 58],
+    [225, 32, 60],
+  ],
+  // sunset — gold / coral / magenta
+  [
+    [35, 38, 62],
+    [10, 35, 62],
+    [330, 30, 62],
+    [50, 38, 65],
+    [355, 32, 60],
+  ],
+  // moss — olive / sage / teal
+  [
+    [85, 25, 55],
+    [120, 22, 55],
+    [160, 25, 55],
+    [60, 25, 58],
+    [140, 22, 55],
+  ],
+]
+
+function hash(s: string): number {
+  let h = 2166136261
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i)
+    h = Math.imul(h, 16777619)
+  }
+  return h >>> 0
+}
+
+function rng(seed: number): () => number {
+  let s = seed || 1
+  return () => {
+    s ^= s << 13
+    s ^= s >>> 17
+    s ^= s << 5
+    return ((s >>> 0) % 10000) / 10000
+  }
+}
+
+function paletteFor(
+  slug: string,
+  library?: string,
+): Array<[number, number, number]> {
+  if (library) {
+    const firstId = library.split(',')[0]?.trim()
+    const baseHue = firstId ? LIBRARY_HUES[firstId] : undefined
+    if (baseHue !== undefined) {
+      return paletteFromHue(baseHue)
+    }
+  }
+  const seed = hash(slug || 'fallback')
+  return PALETTES[seed % PALETTES.length]
+}
+
+// Two layers of blob anchors: large "wash" blobs cover the canvas with
+// soft color, and smaller "accent" blobs add organic punch on top. Both
+// layers get jittered + asymmetric ellipse radii so no two posts look the
+// same and shapes feel hand-placed rather than radially centered.
+type Anchor = { cx: number; cy: number; kind: 'wash' | 'accent' }
+
+const ANCHORS: Array<Anchor> = [
+  { cx: 18, cy: 22, kind: 'wash' },
+  { cx: 78, cy: 18, kind: 'wash' },
+  { cx: 25, cy: 78, kind: 'wash' },
+  { cx: 72, cy: 82, kind: 'wash' },
+  { cx: 50, cy: 12, kind: 'accent' },
+  { cx: 8, cy: 88, kind: 'accent' },
+  { cx: 88, cy: 92, kind: 'accent' },
+  { cx: 42, cy: 38, kind: 'accent' },
+  { cx: 60, cy: 65, kind: 'accent' },
+  { cx: 32, cy: 92, kind: 'accent' },
+]
+
+// Containers using this gradient are wide (5:2 or 16:9), so percentage-based
+// ellipse radii get visually squished horizontally. We bias ry > rx so blobs
+// read as roughly circular rather than as horizontal bands.
+function blobsFor(slug: string, library?: string): Array<Blob> {
+  const seed = hash(slug || 'fallback')
+  const rand = rng(seed)
+  const palette = paletteFor(slug, library)
+  return ANCHORS.map((anchor, i) => {
+    const [baseHue, baseSat, baseLight] = palette[i % palette.length]
+    const hueJitter = (rand() - 0.5) * 14
+    if (anchor.kind === 'wash') {
+      const rx = 60 + rand() * 25
+      return {
+        cx: anchor.cx + (rand() - 0.5) * 24,
+        cy: anchor.cy + (rand() - 0.5) * 24,
+        rx,
+        ry: rx * (1.5 + rand() * 0.6),
+        hue: (baseHue + hueJitter + 360) % 360,
+        sat: baseSat,
+        light: baseLight,
+        alpha: 0.6 + rand() * 0.2,
+        stop: 95 + rand() * 25,
+      }
+    }
+    const rx = 32 + rand() * 18
+    return {
+      cx: anchor.cx + (rand() - 0.5) * 18,
+      cy: anchor.cy + (rand() - 0.5) * 18,
+      rx,
+      ry: rx * (1.4 + rand() * 0.6),
+      hue: (baseHue + hueJitter + 360) % 360,
+      sat: baseSat,
+      light: baseLight,
+      alpha: 0.65 + rand() * 0.2,
+      stop: 85 + rand() * 20,
+    }
+  })
+}
+
+function baseTintCss(palette: Array<[number, number, number]>): string {
+  const [h1, s1, l1] = palette[0]
+  const [h2, s2, l2] = palette[Math.floor(palette.length / 2)]
+  return `linear-gradient(135deg, hsla(${h1}, ${s1}%, ${Math.max(35, l1 - 8)}%, 0.35) 0%, hsla(${h2}, ${s2}%, ${Math.max(35, l2 - 8)}%, 0.35) 100%)`
+}
+
+function blobsToCss(blobs: Array<Blob>, tint: string): string {
+  const layers = blobs.map(
+    (b) =>
+      `radial-gradient(ellipse ${b.rx.toFixed(1)}% ${b.ry.toFixed(1)}% at ${b.cx.toFixed(2)}% ${b.cy.toFixed(2)}%, hsla(${b.hue.toFixed(1)}, ${b.sat.toFixed(1)}%, ${b.light.toFixed(1)}%, ${b.alpha.toFixed(2)}) 0%, hsla(${b.hue.toFixed(1)}, ${b.sat.toFixed(1)}%, ${b.light.toFixed(1)}%, 0) ${b.stop.toFixed(1)}%)`,
+  )
+  // The base tint sits underneath so edges never wash out to the wrapper bg.
+  return [...layers, tint].join(', ')
+}
+
+export function gradientBackgroundCss(slug: string, library?: string): string {
+  const palette = paletteFor(slug, library)
+  return blobsToCss(blobsFor(slug, library), baseTintCss(palette))
+}
diff --git a/src/utils/optimizedImage.ts b/src/utils/optimizedImage.ts
new file mode 100644
index 000000000..cc31fa14d
--- /dev/null
+++ b/src/utils/optimizedImage.ts
@@ -0,0 +1,104 @@
+export type ImageOptimizationOptions = {
+  fit?: 'contain' | 'cover' | 'crop' | 'pad' | 'scale-down'
+  format?: 'auto' | 'avif' | 'webp' | 'json'
+  height?: number
+  quality?: number
+  width?: number
+}
+
+const MAX_TRANSFORM_DIMENSION = 3840
+
+function clampInteger(value: number | undefined, min: number, max: number) {
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    return undefined
+  }
+
+  return Math.min(max, Math.max(min, Math.round(value)))
+}
+
+export function getOptimizedImageUrl(
+  src: string,
+  options: ImageOptimizationOptions = {},
+) {
+  if (!src.trim() || /^(?:javascript|vbscript):/i.test(src.trim())) {
+    return ''
+  }
+
+  if (!shouldTransformImage(src)) {
+    return src
+  }
+
+  const transformOptions = createCloudflareTransformOptions(options)
+  if (!transformOptions) {
+    return src
+  }
+
+  const transformOrigin = getTransformOrigin()
+  const source = encodeURI(src).replace(/^\//, '')
+
+  return `${transformOrigin}/cdn-cgi/image/${transformOptions}/${source}`
+}
+
+export function getAbsoluteOptimizedImageUrl(
+  src: string,
+  options: ImageOptimizationOptions = {},
+) {
+  const optimizedSrc = getOptimizedImageUrl(src, options)
+  if (!optimizedSrc) {
+    return ''
+  }
+
+  if (optimizedSrc.startsWith('http')) {
+    return optimizedSrc
+  }
+
+  const origin = __TANSTACK_SITE_URL__.replace(/\/$/, '')
+  const path = optimizedSrc.startsWith('/') ? optimizedSrc : `/${optimizedSrc}`
+
+  return `${origin}${path}`
+}
+
+function shouldTransformImage(src: string) {
+  if (!__TANSTACK_ENABLE_IMAGE_TRANSFORMATIONS__) {
+    return false
+  }
+
+  const normalized = src.toLowerCase()
+
+  return (
+    src.startsWith('/') &&
+    !src.startsWith('/cdn-cgi/image/') &&
+    !normalized.startsWith('data:') &&
+    !normalized.endsWith('.svg')
+  )
+}
+
+function getTransformOrigin() {
+  return __TANSTACK_SITE_URL__.replace(/\/$/, '')
+}
+
+function createCloudflareTransformOptions(
+  options: ImageOptimizationOptions,
+): string | undefined {
+  const params: Array<string> = []
+  const width = clampInteger(options.width, 1, MAX_TRANSFORM_DIMENSION)
+  const height = clampInteger(options.height, 1, MAX_TRANSFORM_DIMENSION)
+  const quality = clampInteger(options.quality ?? 80, 1, 100) ?? 80
+
+  if (width) {
+    params.push(`width=${width}`)
+  }
+
+  if (height) {
+    params.push(`height=${height}`)
+  }
+
+  if (options.fit) {
+    params.push(`fit=${options.fit}`)
+  }
+
+  params.push(`quality=${quality}`)
+  params.push(`format=${options.format ?? 'auto'}`)
+
+  return params.length > 0 ? params.join(',') : undefined
+}
diff --git a/src/utils/outbound-fetch.server.ts b/src/utils/outbound-fetch.server.ts
new file mode 100644
index 000000000..f29245807
--- /dev/null
+++ b/src/utils/outbound-fetch.server.ts
@@ -0,0 +1,99 @@
+export type FetchWithTimeoutOptions = RequestInit & {
+  timeoutMs?: number
+}
+
+export class ResponseTooLargeError extends Error {
+  constructor(maxBytes: number) {
+    super(`Response body exceeds ${maxBytes} bytes`)
+    this.name = 'ResponseTooLargeError'
+  }
+}
+
+export async function fetchWithTimeout(
+  input: string | URL | Request,
+  options: FetchWithTimeoutOptions = {},
+) {
+  const { timeoutMs = 10_000, signal, ...init } = options
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), timeoutMs)
+
+  const abortFromSource = () => controller.abort(signal?.reason)
+  if (signal) {
+    if (signal.aborted) {
+      controller.abort(signal.reason)
+    } else {
+      signal.addEventListener('abort', abortFromSource, { once: true })
+    }
+  }
+
+  try {
+    return await fetch(input, {
+      ...init,
+      signal: controller.signal,
+    })
+  } finally {
+    clearTimeout(timeout)
+    signal?.removeEventListener('abort', abortFromSource)
+  }
+}
+
+export async function readResponseTextWithLimit(
+  response: Response,
+  maxBytes: number,
+) {
+  const contentLength = response.headers.get('content-length')
+  if (contentLength) {
+    const parsedLength = Number(contentLength)
+    if (!Number.isFinite(parsedLength) || parsedLength < 0) {
+      throw new Error('Invalid content-length header')
+    }
+    if (parsedLength > maxBytes) {
+      throw new ResponseTooLargeError(maxBytes)
+    }
+  }
+
+  if (!response.body) {
+    const text = await response.text()
+    if (new TextEncoder().encode(text).byteLength > maxBytes) {
+      throw new ResponseTooLargeError(maxBytes)
+    }
+    return text
+  }
+
+  const reader = response.body.getReader()
+  const chunks: Array<Uint8Array> = []
+  let totalBytes = 0
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      if (!value) continue
+
+      totalBytes += value.byteLength
+      if (totalBytes > maxBytes) {
+        throw new ResponseTooLargeError(maxBytes)
+      }
+      chunks.push(value)
+    }
+  } finally {
+    reader.releaseLock()
+  }
+
+  const body = new Uint8Array(totalBytes)
+  let offset = 0
+  for (const chunk of chunks) {
+    body.set(chunk, offset)
+    offset += chunk.byteLength
+  }
+
+  return new TextDecoder().decode(body)
+}
+
+export async function readResponseJsonWithLimit(
+  response: Response,
+  maxBytes: number,
+): Promise<unknown> {
+  const text = await readResponseTextWithLimit(response, maxBytes)
+  return JSON.parse(text)
+}
diff --git a/src/utils/partner-pages.ts b/src/utils/partner-pages.ts
new file mode 100644
index 000000000..d0f79855d
--- /dev/null
+++ b/src/utils/partner-pages.ts
@@ -0,0 +1,211 @@
+import { libraries } from '~/libraries'
+import {
+  getPartnerById,
+  partnerCategoryLabels,
+  type Partner,
+} from '~/utils/partners'
+
+const libraryLabelMap = new Map(
+  libraries
+    .filter((library) => library.name)
+    .map((library) => [library.id, library.name!.replace('TanStack ', '')]),
+)
+
+const partnerGuidance: Record<
+  string,
+  { whyGreat: string; whyTanStack: string }
+> = {
+  neon: {
+    whyGreat:
+      'Neon gives teams real Postgres with lightweight branching and autoscaling compute, which is unusually useful for preview environments, testing, and fast iteration.',
+    whyTanStack:
+      'That lines up well with TanStack Start because apps often want standard Postgres semantics without giving up fast deploy workflows or branch-based development.',
+  },
+  convex: {
+    whyGreat:
+      'Convex combines a reactive database with TypeScript backend functions and automatic client updates, which removes a lot of glue code from realtime apps.',
+    whyTanStack:
+      'That is a strong fit for TanStack apps when you want server and client state to stay synchronized without wiring subscriptions and cache invalidation by hand.',
+  },
+  clerk: {
+    whyGreat:
+      'Clerk packages the painful parts of auth, including sign-in, sign-up, sessions, organizations, and MFA, into a well-documented product with good UI primitives.',
+    whyTanStack:
+      'Their official TanStack React Start and React Router support makes it easier to add auth without fighting route protection, session handling, and user flows.',
+  },
+  workos: {
+    whyGreat:
+      'WorkOS is built around the enterprise identity features B2B teams usually end up needing later: SSO, directory sync, RBAC, audit logs, and admin onboarding.',
+    whyTanStack:
+      'That complements TanStack well for B2B apps where auth and org-level access rules shape both routing and data access.',
+  },
+  'ag-grid': {
+    whyGreat:
+      'AG Grid earns its place when basic table rendering is not enough and you need serious grid behavior like grouping, pivoting, or a server-side row model.',
+    whyTanStack:
+      'It pairs naturally with TanStack Table when you want TanStack flexibility for state and data modeling alongside a heavier-duty grid UI.',
+  },
+  netlify: {
+    whyGreat:
+      'Netlify makes deployment workflows simple, especially when preview environments and edge or server functions are part of the product workflow.',
+    whyTanStack:
+      'Their published TanStack Start support means the integration story is concrete, not hand-wavy.',
+  },
+  cloudflare: {
+    whyGreat:
+      'Cloudflare stands out when global distribution, edge compute, caching, and security need to be part of the platform rather than bolted on later.',
+    whyTanStack:
+      'That can be a strong fit for TanStack Start apps that want to run close to users on Workers and take advantage of bindings and prerendering support.',
+  },
+  lovable: {
+    whyGreat:
+      'Lovable is useful when the shortest path from idea to working app matters, especially because it combines AI-assisted building, visual editing, GitHub sync, and hosted deployment.',
+    whyTanStack:
+      'Its move to TanStack Start for new SSR projects makes the generated app foundation much closer to the stack TanStack teams already want to own.',
+  },
+  sentry: {
+    whyGreat:
+      'Sentry turns production issues into actionable debugging data instead of just error logs, especially once tracing and replay are in the mix.',
+    whyTanStack:
+      'That matters for TanStack apps with richer client behavior, and Sentry already documents TanStack Router support plus an alpha TanStack Start React SDK.',
+  },
+  fireship: {
+    whyGreat:
+      'Fireship and Bytes are useful because they help developers stay current quickly through short-form education, courses, and newsletter coverage.',
+    whyTanStack:
+      'That makes them a good ecosystem fit when you want more developers to discover and understand TanStack patterns.',
+  },
+  nozzle: {
+    whyGreat:
+      'Nozzle is a serious SEO product with enterprise rank tracking, share-of-voice reporting, and deep SERP data, not a generic marketing dashboard.',
+    whyTanStack:
+      'It is relevant here because it has long been part of the broader TanStack story and shows the kind of data-heavy product surfaces this ecosystem can support.',
+  },
+  speakeasy: {
+    whyGreat:
+      'Speakeasy is specific and useful: it generates SDKs, CLIs, Terraform providers, and hosted MCP servers from OpenAPI specs.',
+    whyTanStack:
+      'That lines up well with TanStack apps when your frontend depends on well-generated client libraries instead of hand-maintained API integrations.',
+  },
+  unkey: {
+    whyGreat:
+      'Unkey focuses on the practical API infrastructure teams need early: keys, rate limits, access policies, and usage tracking.',
+    whyTanStack:
+      'That is a good fit for TanStack-built products that expose APIs or need straightforward platform controls around API access.',
+  },
+  serpapi: {
+    whyGreat:
+      'SerpApi handles the ugly parts of search data access, including proxies, CAPTCHA solving, localization, and structured parsing.',
+    whyTanStack:
+      'That pairs well with TanStack when search intelligence, SEO tooling, or agent workflows are part of the product.',
+  },
+  electric: {
+    whyGreat:
+      'Electric is interesting because it focuses on sync and reactive data delivery rather than asking teams to rebuild their stack around a new database abstraction.',
+    whyTanStack:
+      'Its partnership around TanStack DB makes it especially relevant for apps that want local-first or sync-heavy behavior with a strong client-side data experience.',
+  },
+  vercel: {
+    whyGreat:
+      'Vercel is strongest when preview workflows, Git-based deployment, global delivery, and server-side compute are central to the team workflow.',
+    whyTanStack:
+      'That has been a natural fit for TanStack Start and Router teams building full-stack apps with modern deployment workflows.',
+  },
+  prisma: {
+    whyGreat:
+      'Prisma is useful because it combines type-safe database access, migrations, and a strong developer workflow instead of only being a query builder.',
+    whyTanStack:
+      'Its official TanStack Start guide and Prisma Postgres workflow make it a practical option for full-stack TanStack apps that want a polished DB layer.',
+  },
+  coderabbit: {
+    whyGreat:
+      'CodeRabbit adds automated review, scanner context, and one-click fixes directly into pull request and IDE workflows.',
+    whyTanStack:
+      'That is relevant for TanStack because these codebases benefit from fast feedback on correctness and usage patterns, not just formatting.',
+  },
+  strapi: {
+    whyGreat:
+      'Strapi is a pragmatic headless CMS choice for teams that want structured content, generated APIs, and strong customization without locking themselves into a closed stack.',
+    whyTanStack:
+      'That works well with TanStack Start when you want a real content system behind an app-shaped frontend.',
+  },
+  powersync: {
+    whyGreat:
+      'PowerSync is built for one of the harder app problems: keeping client-side SQLite in sync with backend data for offline-first and realtime behavior.',
+    whyTanStack:
+      'That makes it relevant for TanStack DB and Query users who care about local-first UX and reactive client state.',
+  },
+  railway: {
+    whyGreat:
+      'Railway reduces deployment friction and gives teams a single place to run app services, databases, networking, and observability.',
+    whyTanStack:
+      'That simplicity is a good match for TanStack teams that want to ship full-stack apps quickly without building a platform team first.',
+  },
+  openrouter: {
+    whyGreat:
+      'OpenRouter normalizes access to many model providers behind one API and gives teams routing and fallback controls they would otherwise build themselves.',
+    whyTanStack:
+      'That is a strong fit for TanStack apps experimenting with AI features where provider choice, latency, cost, and fallback behavior change over time.',
+  },
+}
+
+export function findPartnerForPage(partnerId: string) {
+  return getPartnerById(partnerId)
+}
+
+export function getPartnerLibraryLabels(partner: Partner) {
+  return (partner.libraries ?? []).map(
+    (libraryId) => libraryLabelMap.get(libraryId) ?? libraryId,
+  )
+}
+
+export function getPartnerPageTitle(partner: Partner) {
+  return `${partner.name} for TanStack`
+}
+
+export function getPartnerPageDescription(partner: Partner) {
+  const libraries = getPartnerLibraryLabels(partner)
+  const librariesSuffix = libraries.length
+    ? ` Best fit for ${libraries.join(', ')} teams.`
+    : ''
+
+  return `${partner.name} is a ${partnerCategoryLabels[partner.category].toLowerCase()} partner in the TanStack ecosystem. ${partner.llmDescription}${librariesSuffix}`
+}
+
+export function getPartnerPageCopy(partner: Partner) {
+  const libraryLabels = getPartnerLibraryLabels(partner)
+  const guidance = partnerGuidance[partner.id] ?? {
+    whyGreat: `${partner.name} offers a clearly defined product in the ${partnerCategoryLabels[partner.category].toLowerCase()} space.`,
+    whyTanStack:
+      'It can be a strong fit alongside TanStack depending on your stack and product needs.',
+  }
+  const libraryLine = libraryLabels.length
+    ? ` It is especially relevant for teams building with ${libraryLabels.join(', ')}.`
+    : ''
+  const statusLine =
+    partner.status === 'active'
+      ? `${partner.name} is a current TanStack partner, and we think they are a strong option for teams building in this part of the stack.`
+      : `${partner.name} has supported TanStack previously, and we still think they are worth knowing about if their strengths match your stack.`
+
+  return {
+    description: `${partner.llmDescription}${libraryLine}`,
+    status: statusLine,
+    whyGreat: guidance.whyGreat,
+    whyTanStack: guidance.whyTanStack,
+  }
+}
+
+export function getPartnerJsonLd(partner: Partner) {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    about: {
+      '@type': 'Organization',
+      name: partner.name,
+      sameAs: partner.href,
+    },
+    description: getPartnerPageDescription(partner),
+    name: getPartnerPageTitle(partner),
+    url: `https://tanstack.com/partners/${partner.id}`,
+  }
+}
diff --git a/src/utils/partner-placement.ts b/src/utils/partner-placement.ts
new file mode 100644
index 000000000..6f5931e01
--- /dev/null
+++ b/src/utils/partner-placement.ts
@@ -0,0 +1,340 @@
+import type { Partner, PartnerTier } from '~/utils/partners'
+
+export const partnerPlacementOrderStrategies = [
+  'static-curated',
+  'tier-rotated',
+  'contextual-recommendation',
+  'machine-readable',
+] as const
+
+export type PartnerPlacementOrderStrategy =
+  (typeof partnerPlacementOrderStrategies)[number]
+
+export type PartnerPlacementContext = {
+  category?: Partner['category']
+  orderStrategy: PartnerPlacementOrderStrategy
+  rotationSeed?: string
+}
+
+export type PartnerPlacementAnalyticsMetadata = {
+  order_strategy: PartnerPlacementOrderStrategy
+  partner_tier: PartnerTier
+  rotation_seed?: string
+}
+
+type PartnerForPlacement = Pick<
+  Partner,
+  'category' | 'id' | 'name' | 'score' | 'tier'
+> & {
+  placementWeight?: number
+}
+
+const partnerPlacementTiers = [
+  'gold',
+  'silver',
+  'bronze',
+] as const satisfies ReadonlyArray<PartnerTier>
+
+const partnerTierPlacementOrder = {
+  gold: 0,
+  silver: 1,
+  bronze: 2,
+} satisfies Record<PartnerTier, number>
+
+const reservedPartnerPlacementRules = [
+  {
+    category: 'deployment',
+    partnerId: 'cloudflare',
+    placementRank: 0,
+  },
+] satisfies ReadonlyArray<{
+  category: Partner['category']
+  partnerId: string
+  placementRank: number
+}>
+
+function getPartnerTier(partner: Pick<Partner, 'tier'>): PartnerTier {
+  return partner.tier ?? 'bronze'
+}
+
+export function createPartnerPlacementSessionSeed() {
+  const crypto = globalThis.crypto
+
+  if (crypto?.randomUUID) {
+    return crypto.randomUUID()
+  }
+
+  if (crypto?.getRandomValues) {
+    const values = new Uint32Array(4)
+    crypto.getRandomValues(values)
+    return Array.from(values, (value) => value.toString(36)).join('')
+  }
+
+  return `${Date.now().toString(36)}${Math.random().toString(36).slice(2)}`
+}
+
+export function getPartnerViewPlacementSeed(
+  surface: string,
+  sessionSeed: string,
+) {
+  return `${surface}:${sessionSeed}`
+}
+
+export function getPartnerPlacementContext({
+  category,
+  orderStrategy,
+  seed,
+  surface,
+}: {
+  category?: Partner['category']
+  orderStrategy: PartnerPlacementOrderStrategy
+  seed?: string
+  surface: string
+}): PartnerPlacementContext {
+  return {
+    category,
+    orderStrategy,
+    rotationSeed:
+      orderStrategy === 'tier-rotated' ? (seed ?? surface) : undefined,
+  }
+}
+
+function hashString(value: string) {
+  let hash = 2166136261
+
+  for (let index = 0; index < value.length; index++) {
+    hash ^= value.charCodeAt(index)
+    hash = Math.imul(hash, 16777619)
+  }
+
+  return hash >>> 0
+}
+
+function comparePartnerIdentity(
+  left: Pick<Partner, 'id' | 'name'>,
+  right: Pick<Partner, 'id' | 'name'>,
+) {
+  const nameComparison = left.name.localeCompare(right.name)
+
+  if (nameComparison !== 0) {
+    return nameComparison
+  }
+
+  return left.id.localeCompare(right.id)
+}
+
+function getReservedPartnerRank(
+  partner: PartnerForPlacement,
+  category: Partner['category'],
+) {
+  if (partner.category !== category) {
+    return undefined
+  }
+
+  const rule = reservedPartnerPlacementRules.find(
+    (candidate) =>
+      candidate.category === category && candidate.partnerId === partner.id,
+  )
+
+  return rule?.placementRank
+}
+
+function getReservedPlacementCategory<TPartner extends PartnerForPlacement>(
+  left: TPartner,
+  right: TPartner,
+  context: PartnerPlacementContext,
+) {
+  if (context.category) {
+    return context.category
+  }
+
+  return left.category === right.category ? left.category : undefined
+}
+
+function compareReservedPartnerPlacement<TPartner extends PartnerForPlacement>(
+  left: TPartner,
+  right: TPartner,
+  context: PartnerPlacementContext,
+) {
+  const category = getReservedPlacementCategory(left, right, context)
+
+  if (!category) {
+    return 0
+  }
+
+  const leftRank = getReservedPartnerRank(left, category)
+  const rightRank = getReservedPartnerRank(right, category)
+
+  if (leftRank !== undefined && rightRank !== undefined) {
+    return leftRank - rightRank
+  }
+
+  if (leftRank !== undefined) {
+    return -1
+  }
+
+  if (rightRank !== undefined) {
+    return 1
+  }
+
+  return 0
+}
+
+function applyReservedPartnerPlacementRules<
+  TPartner extends PartnerForPlacement,
+>(partners: Array<TPartner>, context: PartnerPlacementContext) {
+  let nextPartners = partners
+
+  for (const rule of reservedPartnerPlacementRules) {
+    const shouldApplyRule =
+      context.category === rule.category ||
+      nextPartners.some(
+        (partner) =>
+          partner.category === rule.category && partner.id !== rule.partnerId,
+      )
+
+    if (!shouldApplyRule) {
+      continue
+    }
+
+    const partnersBeforeReserved: Array<TPartner> = []
+    const categoryPartnersBeforeReserved: Array<TPartner> = []
+    const partnersAfterReserved: Array<TPartner> = []
+    let reservedPartner: TPartner | undefined
+
+    for (const partner of nextPartners) {
+      if (partner.category === rule.category && partner.id === rule.partnerId) {
+        reservedPartner = partner
+        continue
+      }
+
+      if (reservedPartner) {
+        partnersAfterReserved.push(partner)
+        continue
+      }
+
+      if (partner.category === rule.category) {
+        categoryPartnersBeforeReserved.push(partner)
+        continue
+      }
+
+      partnersBeforeReserved.push(partner)
+    }
+
+    if (!reservedPartner || categoryPartnersBeforeReserved.length === 0) {
+      continue
+    }
+
+    nextPartners = [
+      ...partnersBeforeReserved,
+      reservedPartner,
+      ...categoryPartnersBeforeReserved,
+      ...partnersAfterReserved,
+    ]
+  }
+
+  return nextPartners
+}
+
+function compareLegacyPartnerPriority<TPartner extends PartnerForPlacement>(
+  left: TPartner,
+  right: TPartner,
+) {
+  const scoreComparison = right.score - left.score
+
+  if (scoreComparison !== 0) {
+    return scoreComparison
+  }
+
+  return comparePartnerIdentity(left, right)
+}
+
+function compareSeededPartnerOrder<TPartner extends PartnerForPlacement>(
+  left: TPartner,
+  right: TPartner,
+  seed: string,
+) {
+  const leftWeight =
+    typeof left.placementWeight === 'number' && left.placementWeight > 0
+      ? left.placementWeight
+      : 1
+  const rightWeight =
+    typeof right.placementWeight === 'number' && right.placementWeight > 0
+      ? right.placementWeight
+      : 1
+  const leftRandom = (hashString(`${seed}:${left.id}`) + 1) / 4294967297
+  const rightRandom = (hashString(`${seed}:${right.id}`) + 1) / 4294967297
+  const leftRank = -Math.log(leftRandom) / leftWeight
+  const rightRank = -Math.log(rightRandom) / rightWeight
+  const seededComparison = leftRank - rightRank
+
+  if (seededComparison !== 0) {
+    return seededComparison
+  }
+
+  return comparePartnerIdentity(left, right)
+}
+
+export function comparePartnersForPlacement<
+  TPartner extends PartnerForPlacement,
+>(left: TPartner, right: TPartner, context: PartnerPlacementContext) {
+  const tierComparison =
+    partnerTierPlacementOrder[getPartnerTier(left)] -
+    partnerTierPlacementOrder[getPartnerTier(right)]
+
+  if (tierComparison !== 0) {
+    return tierComparison
+  }
+
+  const reservedComparison = compareReservedPartnerPlacement(
+    left,
+    right,
+    context,
+  )
+
+  if (reservedComparison !== 0) {
+    return reservedComparison
+  }
+
+  if (context.orderStrategy === 'tier-rotated' && context.rotationSeed) {
+    return compareSeededPartnerOrder(left, right, context.rotationSeed)
+  }
+
+  return compareLegacyPartnerPriority(left, right)
+}
+
+export function getPartnersForPlacement<TPartner extends PartnerForPlacement>(
+  partners: Array<TPartner>,
+  context: PartnerPlacementContext,
+) {
+  const sortedPartners = [...partners].sort((left, right) =>
+    comparePartnersForPlacement(left, right, context),
+  )
+
+  return applyReservedPartnerPlacementRules(sortedPartners, context)
+}
+
+export function getPartnerTierGroupsForPlacement<
+  TPartner extends PartnerForPlacement,
+>(partners: Array<TPartner>, context: PartnerPlacementContext) {
+  return partnerPlacementTiers
+    .map((tier) => ({
+      tier,
+      partners: getPartnersForPlacement(
+        partners.filter((partner) => getPartnerTier(partner) === tier),
+        context,
+      ),
+    }))
+    .filter((group) => group.partners.length > 0)
+}
+
+export function getPartnerPlacementAnalyticsMetadata(
+  partner: PartnerForPlacement,
+  context: PartnerPlacementContext,
+): PartnerPlacementAnalyticsMetadata {
+  return {
+    order_strategy: context.orderStrategy,
+    partner_tier: getPartnerTier(partner),
+    rotation_seed: context.rotationSeed,
+  }
+}
diff --git a/src/utils/partners.tsx b/src/utils/partners.tsx
index 91362b7b1..fd040c144 100644
--- a/src/utils/partners.tsx
+++ b/src/utils/partners.tsx
@@ -6,6 +6,8 @@ import vercelLightSvg from '~/images/vercel-light.svg'
 import vercelDarkSvg from '~/images/vercel-dark.svg'
 import netlifyLightSvg from '~/images/netlify-light.svg'
 import netlifyDarkSvg from '~/images/netlify-dark.svg'
+import lovableBlackSvg from '~/images/lovable-black.svg'
+import lovableWhiteSvg from '~/images/lovable-white.svg'
 import convexWhiteSvg from '~/images/convex-white.svg'
 import convexColorSvg from '~/images/convex-color.svg'
 import clerkLightSvg from '~/images/clerk-logo-light.svg'
@@ -26,6 +28,8 @@ import codeRabbitLightSvg from '~/images/coderabbit-light.svg'
 import codeRabbitDarkSvg from '~/images/coderabbit-dark.svg'
 import strapiLightSvg from '~/images/strapi-light.svg'
 import strapiDarkSvg from '~/images/strapi-dark.svg'
+import serpapiWhiteSvg from '~/images/serpapi-white.svg'
+import serpapiBlackSvg from '~/images/serpapi-black.svg'
 import { libraries, type Library } from '~/libraries'
 import cloudflareWhiteSvg from '~/images/cloudflare-white.svg'
 import cloudflareBlackSvg from '~/images/cloudflare-black.svg'
@@ -33,6 +37,15 @@ import workosBlackSvg from '~/images/workos-black.svg'
 import workosWhiteSvg from '~/images/workos-white.svg'
 import powersyncBlackSvg from '~/images/powersync-black.svg'
 import powersyncWhiteSvg from '~/images/powersync-white.svg'
+import railwayBlackSvg from '~/images/railway-black.svg'
+import railwayWhiteSvg from '~/images/railway-white.svg'
+import openrouterBlackSvg from '~/images/openrouter-black.svg'
+import openrouterWhiteSvg from '~/images/openrouter-white.svg'
+import {
+  getPartnerPlacementContext,
+  getPartnersForPlacement,
+  type PartnerPlacementContext,
+} from '~/utils/partner-placement'
 
 function LearnMoreButton() {
   return (
@@ -46,10 +59,93 @@ type PartnerImageConfig =
   | { light: string; dark: string; scale?: number }
   | { src: string; scale?: number }
 
+type PartnerApplicationStarterIcon = {
+  mode: 'contain' | 'left-crop'
+  src: string
+}
+
+type ApplicationStarterPartnerTier = 1 | 2 | 3
+
+export const partnerUniqueConstraints = ['auth-provider', 'hosting'] as const
+export type PartnerUniqueConstraint = (typeof partnerUniqueConstraints)[number]
+
+export const partnerTiers = ['gold', 'silver', 'bronze'] as const
+export type PartnerTier = (typeof partnerTiers)[number]
+
+export const partnerTierLabels: Record<PartnerTier, string> = {
+  gold: 'Gold',
+  silver: 'Silver',
+  bronze: 'Bronze',
+}
+
+export const partnerTierOrder: Record<PartnerTier, number> = {
+  gold: 0,
+  silver: 1,
+  bronze: 2,
+}
+
+const partnerTierToBuilderTier: Record<
+  PartnerTier,
+  ApplicationStarterPartnerTier
+> = {
+  gold: 1,
+  silver: 2,
+  bronze: 3,
+}
+
+export const partnerTierFlares: Record<
+  PartnerTier,
+  {
+    gradientStops: string
+    iconColor: string
+    labelColor: string
+    icon: React.ReactNode
+  }
+> = {
+  gold: {
+    gradientStops:
+      'from-yellow-400 via-amber-500 to-orange-600 dark:from-yellow-300 dark:via-amber-400 dark:to-orange-400',
+    iconColor: 'text-amber-500 dark:text-amber-300',
+    labelColor: 'text-amber-600 dark:text-amber-300',
+    // 5-point star
+    icon: (
+      <svg viewBox="0 0 12 12" className="h-3 w-3 fill-current" aria-hidden>
+        <path d="M6 0.5 L7.5 4.2 L11.5 4.6 L8.5 7.2 L9.4 11.2 L6 9.2 L2.6 11.2 L3.5 7.2 L0.5 4.6 L4.5 4.2 Z" />
+      </svg>
+    ),
+  },
+  silver: {
+    gradientStops:
+      'from-slate-200 via-zinc-400 to-slate-300 dark:from-slate-300 dark:via-zinc-400 dark:to-slate-400',
+    iconColor: 'text-slate-400 dark:text-slate-300',
+    labelColor: 'text-slate-500 dark:text-slate-300',
+    // 4-point sparkle
+    icon: (
+      <svg viewBox="0 0 12 12" className="h-3 w-3 fill-current" aria-hidden>
+        <path d="M6 0 L7.2 4.8 L12 6 L7.2 7.2 L6 12 L4.8 7.2 L0 6 L4.8 4.8 Z" />
+      </svg>
+    ),
+  },
+  bronze: {
+    gradientStops:
+      'from-amber-700 via-amber-800 to-amber-950 dark:from-amber-600 dark:via-amber-800 dark:to-amber-950',
+    iconColor: 'text-amber-800 dark:text-amber-600',
+    labelColor: 'text-amber-800 dark:text-amber-600',
+    // diamond
+    icon: (
+      <svg viewBox="0 0 12 12" className="h-3 w-3 fill-current" aria-hidden>
+        <path d="M6 0.5 L11.5 6 L6 11.5 L0.5 6 Z" />
+      </svg>
+    ),
+  },
+}
+
 export function PartnerImage({
+  className,
   config,
   alt,
 }: {
+  className?: string
   config: PartnerImageConfig
   alt: string
 }) {
@@ -65,7 +161,9 @@ export function PartnerImage({
           src={config.light}
           alt={alt}
           loading="lazy"
-          className="w-full dark:hidden"
+          className={
+            className ? `${className} dark:hidden` : 'w-full dark:hidden'
+          }
           width={200}
           height={100}
           sizes="(max-width: 640px) 80px, (max-width: 1024px) 150px, 200px"
@@ -74,7 +172,11 @@ export function PartnerImage({
           src={config.dark}
           alt={alt}
           loading="lazy"
-          className="w-full hidden dark:block"
+          className={
+            className
+              ? `${className} hidden dark:block`
+              : 'w-full hidden dark:block'
+          }
           width={200}
           height={100}
           sizes="(max-width: 640px) 80px, (max-width: 1024px) 150px, 200px"
@@ -88,7 +190,7 @@ export function PartnerImage({
       <img
         src={config.src}
         alt={alt}
-        className="w-full"
+        className={className ?? 'w-full'}
         width={200}
         height={100}
         loading="lazy"
@@ -107,6 +209,7 @@ export const partnerCategories = [
   'monitoring',
   'cms',
   'api',
+  'ai',
   'learning',
 ] as const
 
@@ -121,14 +224,17 @@ export const partnerCategoryLabels: Record<PartnerCategory, string> = {
   monitoring: 'Error Monitoring',
   cms: 'CMS',
   api: 'API Management',
+  ai: 'AI/LLM',
   learning: 'Learning Resources',
 }
 
-type Partner = {
+export type Partner = {
+  applicationStarterPromptInstructions?: Array<string>
   name: string
   id: string
   libraries?: Library['id'][]
   href: string
+  applicationStarterIcon?: PartnerApplicationStarterIcon
   image: PartnerImageConfig
   content: JSX.Element
   llmDescription: string
@@ -137,10 +243,96 @@ type Partner = {
   startDate?: string
   endDate?: string
   score: number
+  uniqueConstraints?: Array<PartnerUniqueConstraint>
+  tier?: PartnerTier
   brandColor?: string // Primary brand color for game elements
   tagline?: string // Short tagline for game info cards
 }
 
+export type ApplicationStarterPartnerSuggestion = {
+  brandColor?: Partner['brandColor']
+  description: string
+  hint: string
+  iconMode?: 'contain' | 'left-crop'
+  id: string
+  iconSrc?: string
+  image: Partner['image']
+  label: string
+  tags: Array<string>
+  tier: ApplicationStarterPartnerTier
+  uniqueConstraints: Array<PartnerUniqueConstraint>
+}
+
+const APPLICATION_STARTER_GUIDANCE_MARKER = 'Starter guidance:'
+const APPLICATION_STARTER_SELECTED_PARTNERS_MARKER = 'Selected partner ids:'
+const APPLICATION_STARTER_INFERRED_PARTNERS_MARKER = 'Inferred partner ids:'
+const APPLICATION_STARTER_FORCE_ROUTER_ONLY_MARKER = 'Force router-only: true'
+
+export function getApplicationStarterUserBrief(input: string) {
+  const [brief] = input.split(`\n\n${APPLICATION_STARTER_GUIDANCE_MARKER}\n`)
+  return brief?.trim() ?? ''
+}
+
+export function getApplicationStarterGuidanceLines(input: string) {
+  const [, guidance] = input.split(
+    `\n\n${APPLICATION_STARTER_GUIDANCE_MARKER}\n`,
+  )
+
+  if (!guidance) {
+    return []
+  }
+
+  return guidance
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(
+      (line) =>
+        !line.startsWith(APPLICATION_STARTER_SELECTED_PARTNERS_MARKER) &&
+        !line.startsWith(APPLICATION_STARTER_INFERRED_PARTNERS_MARKER) &&
+        line !== APPLICATION_STARTER_FORCE_ROUTER_ONLY_MARKER,
+    )
+    .filter(Boolean)
+}
+
+export function getApplicationStarterForceRouterOnly(input: string) {
+  return input.includes(APPLICATION_STARTER_FORCE_ROUTER_ONLY_MARKER)
+}
+
+function extractApplicationStarterPartnerIdsFromMarker({
+  input,
+  marker,
+}: {
+  input: string
+  marker: string
+}) {
+  const escapedMarker = marker.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const pattern = new RegExp(`${escapedMarker}\\s*([^\\n]+)`, 'i')
+  const value = input.match(pattern)?.[1]?.trim()
+
+  if (!value) {
+    return []
+  }
+
+  return value
+    .split(',')
+    .map((part) => part.trim())
+    .filter(Boolean)
+}
+
+export function getApplicationStarterSelectedPartnerIds(input: string) {
+  return extractApplicationStarterPartnerIdsFromMarker({
+    input,
+    marker: APPLICATION_STARTER_SELECTED_PARTNERS_MARKER,
+  })
+}
+
+export function getApplicationStarterInferredPartnerIds(input: string) {
+  return extractApplicationStarterPartnerIdsFromMarker({
+    input,
+    marker: APPLICATION_STARTER_INFERRED_PARTNERS_MARKER,
+  })
+}
+
 const neon = (() => {
   const href = 'https://neon.tech?utm_source=tanstack'
 
@@ -148,7 +340,8 @@ const neon = (() => {
     name: 'Neon',
     id: 'neon',
     libraries: ['start', 'router'],
-    status: 'active' as const,
+    status: 'inactive' as const,
+    endDate: 'Apr 2026',
     score: 0.297,
     href,
     brandColor: '#00E599',
@@ -158,20 +351,15 @@ const neon = (() => {
       dark: neonDarkSvg,
     },
     llmDescription:
-      'Serverless PostgreSQL with instant branching, autoscaling, and storage/compute separation. Recommended database for TanStack Start applications.',
+      'Serverless Postgres platform with branching, autoscaling compute, and separate storage and compute. Neon also publishes a TanStack Start setup prompt and docs for getting TanStack apps running on Postgres quickly.',
     category: 'database',
     content: (
       <>
         <div className="text-xs">
-          Neon and TanStack are joining forces to bring{' '}
-          <strong>serverless PostgreSQL</strong> to the modern web stack. With
-          Neon's{' '}
-          <strong>
-            blazing-fast branching, autoscaling, and storage/compute separation
-          </strong>
-          , developers can instantly spin up production-grade databases for
-          every branch, test, or feature. TanStack's developer-first framework +
-          Neon's cutting-edge infra = next-gen DX.
+          Neon provides <strong>serverless Postgres</strong> with branching,
+          autoscaling compute, and separate storage and compute. That makes it
+          especially useful for preview environments, branch-based workflows,
+          and fast iteration with TanStack Start.
         </div>
         <LearnMoreButton />
       </>
@@ -186,7 +374,9 @@ const convex = (() => {
     name: 'Convex',
     id: 'convex',
     libraries: ['start', 'router'],
-    status: 'active' as const,
+    status: 'inactive' as const,
+    startDate: 'May 2024',
+    endDate: 'Mar 2026',
     score: 0.286,
     href,
     brandColor: '#F3A712',
@@ -196,19 +386,15 @@ const convex = (() => {
       dark: convexWhiteSvg,
     },
     llmDescription:
-      'Real-time, relational database with end-to-end type safety. Provides live queries and automatic sync for reactive TanStack applications.',
+      'Reactive backend platform with a document database, relational data model, TypeScript functions, and realtime query updates. Convex also has an official TanStack Start quickstart.',
     category: 'database',
     content: (
       <>
         <div className="text-xs">
-          Convex has teamed up with TanStack to not only deliver a{' '}
-          <strong>first-class end-to-end type-safe database experience</strong>{' '}
-          to TanStack developers, but to also ensure TanStack is ready for the
-          real-time database arena. Convex's all-in-one platform delivers
-          end-to-end type-safety via a{' '}
-          <strong>revolutionary relational, real-time database</strong> and
-          together, we're elevating what's possible with real-time React
-          applications.
+          Convex provides a <strong>reactive backend</strong> with TypeScript
+          queries, mutations, and realtime updates to clients. For TanStack
+          apps, it is a useful option when you want live data behavior without
+          wiring your own sync layer by hand.
         </div>
         <LearnMoreButton />
       </>
@@ -226,25 +412,28 @@ const clerk = (() => {
     libraries: ['start', 'router'],
     status: 'active' as const,
     score: 0.286,
+    tier: 'silver' as const,
+    uniqueConstraints: [
+      'auth-provider',
+    ] satisfies Array<PartnerUniqueConstraint>,
     brandColor: '#6C47FF',
     tagline: 'Authentication',
     image: {
       light: clerkLightSvg,
       dark: clerkDarkSvg,
-      scale: 0.85,
+      scale: 0.72,
     },
     llmDescription:
-      'Drop-in authentication and user management with pre-built UI components. Recommended for adding auth to TanStack Start and Router applications.',
+      'Authentication and user management platform with prebuilt UI, sessions, organizations, and MFA. Clerk has official SDKs and quickstarts for TanStack React Start and React Router.',
     category: 'auth',
     content: (
       <>
         <div className="text-xs">
-          Clerk and TanStack are partnering to elevate your application's{' '}
-          <strong>security and user experience</strong> with industry-leading{' '}
-          <strong>authentication and user management</strong>. Paired with
-          TanStack's no-nonsense routing and tooling, you'll be equipped to
-          effortlessly deliver top-notch experiences that your users can trust
-          and your developers can rely on.
+          Clerk provides <strong>authentication and user management</strong>
+          with prebuilt UI, sessions, organizations, and MFA. It also publishes
+          official guides for{' '}
+          <strong>TanStack React Start and React Router</strong>, which makes
+          integration straightforward.
         </div>
         <LearnMoreButton />
       </>
@@ -262,23 +451,30 @@ const workos = (() => {
     libraries: ['start', 'router'] as const,
     status: 'active' as const,
     score: 0.314,
+    tier: 'silver' as const,
+    uniqueConstraints: [
+      'auth-provider',
+    ] satisfies Array<PartnerUniqueConstraint>,
     brandColor: '#6363F1',
     tagline: 'Enterprise Auth',
+    applicationStarterIcon: {
+      mode: 'left-crop',
+      src: workosBlackSvg,
+    },
     image: {
       light: workosBlackSvg,
       dark: workosWhiteSvg,
     },
     llmDescription:
-      'Enterprise authentication including SSO (SAML/OIDC), Directory Sync, MFA, and Audit Logs. Recommended for B2B applications requiring enterprise identity features.',
+      'Enterprise identity platform with SSO, Directory Sync, MFA for AuthKit, RBAC, audit logs, and admin onboarding tools. It is a strong fit for B2B apps that need enterprise auth features.',
     category: 'auth',
     content: (
       <>
         <div className="text-xs">
-          WorkOS and TanStack are partnering to deliver
-          <strong> enterprise-ready authentication</strong>—including
-          <strong> SSO (SAML/OIDC)</strong>, <strong>Directory Sync</strong>,
-          <strong> MFA</strong>, and <strong>Audit Logs</strong>—paired with
-          TanStack's developer-first routing and app tooling.
+          WorkOS focuses on <strong>enterprise identity</strong> features like
+          SSO, Directory Sync, RBAC, audit logs, and admin onboarding, plus MFA
+          in AuthKit. That makes it a practical fit for B2B TanStack apps with
+          organization-level access requirements.
         </div>
         <LearnMoreButton />
       </>
@@ -296,25 +492,34 @@ const agGrid = (() => {
     libraries: ['table'] as const,
     status: 'active' as const,
     score: 0.497,
+    tier: 'silver' as const,
     href,
     brandColor: '#FF8C00',
     tagline: 'Enterprise Data Grid',
+    applicationStarterIcon: {
+      mode: 'contain',
+      src: 'https://www.ag-grid.com/_astro/favicon-32.WDuB-104.png',
+    },
+    applicationStarterPromptInstructions: [
+      'Install ag-grid-react and ag-grid-community and use AG Grid Community by default for a real working demo.',
+      'Only add ag-grid-enterprise if a license key is explicitly provided or explicitly requested.',
+      'Render a real grid with explicit columns, row data, and a container height so the integration is visibly demonstrated in the app.',
+    ],
     image: {
       light: agGridDarkSvg,
       dark: agGridLightSvg,
       scale: 1.1,
     },
     llmDescription:
-      'Enterprise-grade data grid with advanced features like grouping, pivoting, and aggregation. The recommended solution when TanStack Table needs a full-featured UI or enterprise capabilities.',
+      'Data grid library with Community and Enterprise editions. Enterprise features include row grouping, pivoting, aggregation, Excel export, integrated charts, and the server-side row model.',
     category: 'data-grid',
     content: (
       <>
         <div className="text-xs">
-          TanStack Table and AG Grid are respectfully the{' '}
-          <strong>best table/datagrid libraries around</strong> and together are
-          working hard to ensure the highest quality table/datagrid experience
-          for the entire JS/TS ecosystem. Whether it's a lightweight table or a
-          complex datagrid, we've we've got you covered.
+          AG Grid covers the heavier end of the grid spectrum. Its
+          <strong> Enterprise</strong> offering adds row grouping, pivoting,
+          aggregation, Excel export, integrated charts, and a server-side row
+          model when a basic table UI is not enough.
         </div>
         {/* Has to be button for separate link than parent anchor to be valid HTML */}
         <button
@@ -340,30 +545,30 @@ const netlify = (() => {
     libraries: ['start', 'router'],
     status: 'active' as const,
     score: 0.343,
+    tier: 'gold' as const,
+    uniqueConstraints: ['hosting'] satisfies Array<PartnerUniqueConstraint>,
     href,
     brandColor: '#00C7B7',
     tagline: 'Web Deployment',
+    applicationStarterIcon: {
+      mode: 'contain',
+      src: 'https://www.netlify.com/favicon/icon.svg',
+    },
     image: {
       light: netlifyLightSvg,
       dark: netlifyDarkSvg,
+      scale: 1.25,
     },
     llmDescription:
-      'Modern deployment and hosting with edge functions, serverless capabilities, and seamless CI/CD workflows. First-class support for TanStack Start applications.',
+      'Deployment platform for web applications with Deploy Previews, Functions, Edge Functions, and an official TanStack Start integration guide.',
     category: 'deployment',
     content: (
       <>
         <div className="text-xs">
-          Netlify and TanStack have joined forces to provide developers with{' '}
-          <strong>world-class deployment and hosting capabilities</strong> for
-          modern web applications. Together we're focused on delivering an
-          exceptional developer experience through{' '}
-          <strong>
-            seamless deployment workflows, edge functions, and serverless
-            capabilities
-          </strong>{' '}
-          that help teams build and ship faster. Our partnership ensures
-          TanStack applications can take full advantage of Netlify's powerful
-          platform features.
+          Netlify provides <strong>Deploy Previews</strong>, Functions, Edge
+          Functions, and a concrete TanStack Start integration path. That makes
+          it useful when the deployment workflow is part of the product
+          workflow, not an afterthought.
         </div>
         <LearnMoreButton />
       </>
@@ -382,6 +587,8 @@ const cloudflare = (() => {
     libraries: libraries.map((l) => l.id),
     status: 'active' as const,
     score: 0.857,
+    tier: 'gold' as const,
+    uniqueConstraints: ['hosting'] satisfies Array<PartnerUniqueConstraint>,
     startDate: 'Sep 2025',
     brandColor: '#F6821F',
     tagline: 'Edge Deployment',
@@ -390,17 +597,56 @@ const cloudflare = (() => {
       dark: cloudflareWhiteSvg,
     },
     llmDescription:
-      'Global edge performance, serverless compute (Workers), KV storage, CDN, and security. Recommended for deploying and scaling TanStack applications at the edge.',
+      'Global network and developer platform with Workers, KV, CDN, and security services. Cloudflare also documents deploying TanStack Start apps on Workers.',
     category: 'deployment',
     content: (
       <>
         <div className="text-xs">
-          Cloudflare and TanStack are partnering to bring
-          <strong> global edge performance</strong>,
-          <strong> serverless compute</strong>, and
-          <strong> robust security</strong> to modern apps built with TanStack.
-          From Workers and KV to CDN and security, Cloudflare helps TanStack
-          developers ship faster and scale effortlessly.
+          Cloudflare combines <strong>Workers</strong>, KV, CDN, and security
+          services on a global network. It also documents deploying TanStack
+          Start apps on Workers, including bindings and prerendering support.
+        </div>
+        <LearnMoreButton />
+      </>
+    ),
+  }
+})()
+
+const lovable = (() => {
+  const href = 'https://lovable.dev?utm_source=tanstack'
+
+  return {
+    name: 'Lovable',
+    id: 'lovable',
+    href,
+    libraries: ['start', 'router'] as const,
+    status: 'active' as const,
+    score: 0.714,
+    tier: 'gold' as const,
+    uniqueConstraints: ['hosting'] satisfies Array<PartnerUniqueConstraint>,
+    brandColor: '#FF7EB0',
+    tagline: 'AI App Builder',
+    applicationStarterPromptInstructions: [
+      'Treat Lovable as the AI app-building and hosting path, not as a TanStack CLI deployment flag or npm package.',
+      'Keep the generated app portable: start with the TanStack CLI output, preserve GitHub/project ownership notes, and call out any Lovable Cloud setup that cannot be automated from code.',
+      'When Lovable is selected, do not add a separate Cloudflare, Netlify, or Railway deployment target unless the user explicitly asks for a handoff path.',
+    ],
+    image: {
+      light: lovableBlackSvg,
+      dark: lovableWhiteSvg,
+    },
+    llmDescription:
+      'AI app-building platform for generating, editing, and shipping web apps from prompts, with GitHub sync, visual editing, Lovable Cloud hosting, and new TanStack Start-powered SSR projects.',
+    category: 'ai',
+    content: (
+      <>
+        <div className="text-xs">
+          Lovable helps teams move from prompt to working app with{' '}
+          <strong>AI-assisted building</strong>, visual editing, GitHub sync,
+          and Lovable Cloud hosting. New Lovable projects are powered by
+          TanStack Start, which makes it especially relevant for teams that want
+          generated apps to keep strong routing, SSR, and type-safety
+          foundations.
         </div>
         <LearnMoreButton />
       </>
@@ -417,6 +663,7 @@ const sentry = (() => {
     libraries: ['start', 'router'],
     status: 'active' as const,
     score: 0.229,
+    tier: 'bronze' as const,
     href,
     brandColor: '#362D59',
     tagline: 'Error Monitoring',
@@ -425,17 +672,15 @@ const sentry = (() => {
       dark: sentryWordMarkLightSvg,
     },
     llmDescription:
-      'Error monitoring and performance insights. Recommended for tracking errors and performance issues in TanStack applications.',
+      'Application monitoring platform for error tracking, tracing, replay, profiling, and logs. It also offers TanStack Router integration and an alpha TanStack Start React SDK.',
     category: 'monitoring',
     content: (
       <>
         <div className="text-xs">
-          Sentry and TanStack are on a mission to make sure your apps are
-          <strong> error-free and high-performers</strong>. Sentry's
-          best-in-class error monitoring and performance insights combined with
-          TanStack's cutting-edge libraries ensure that you can deliver the best
-          possible experience to your users. Together, we're committed to making
-          sure that you can build with confidence.
+          Sentry goes beyond basic error collection with{' '}
+          <strong>tracing</strong>, replay, profiling, and logs. For TanStack
+          apps, that makes it easier to debug issues across client behavior,
+          routing, and performance.
         </div>
         <LearnMoreButton />
       </>
@@ -450,7 +695,7 @@ const fireship = (() => {
     name: 'Fireship',
     id: 'fireship',
     libraries: [],
-    status: 'active' as const,
+    status: 'inactive' as const,
     score: 0.014,
     href,
     tagline: 'Dev Education',
@@ -458,14 +703,15 @@ const fireship = (() => {
       src: bytesFireshipImage,
     },
     llmDescription:
-      'Educational platform and Bytes.dev newsletter. Official learning resources and news partner for the TanStack ecosystem.',
+      'Developer education brand behind Fireship courses and content, plus the Bytes JavaScript newsletter. Useful for staying current on web development and ecosystem trends.',
     category: 'learning',
     content: (
       <>
         <div className="text-xs">
-          TanStack's priority is to make its users productive, efficient and
-          knowledgeable about web dev. To help us on this quest, we've partnered
-          with{' '}
+          Fireship produces developer education and Bytes publishes a JavaScript
+          newsletter. Together they are useful for helping more developers stay
+          current on web tooling, patterns, and ecosystem changes. Learn more
+          about{' '}
           {/* Has to be button for separate link than parent anchor to be valid HTML */}
           <button
             type="button"
@@ -481,9 +727,7 @@ const fireship = (() => {
           >
             Fireship
           </button>{' '}
-          to <strong>provide best-in-class education</strong> about TanStack
-          products. It doesn't stop at TanStack though, with their sister
-          product{' '}
+          and{' '}
           <button
             type="button"
             className="text-blue-500 underline cursor-pointer p-0 m-0 bg-transparent border-none inline"
@@ -491,10 +735,8 @@ const fireship = (() => {
             tabIndex={0}
           >
             Bytes.dev
-          </button>{' '}
-          as our official newsletter partner, you'll be able to{' '}
-          <strong>stay up to date with the latest and greatest</strong> in the
-          web dev world regardless.
+          </button>
+          .
         </div>
         <LearnMoreButton />
       </>
@@ -509,27 +751,22 @@ const nozzle = (() => {
     name: 'Nozzle.io',
     id: 'nozzle',
     href,
-    status: 'active' as const,
+    status: 'inactive' as const,
     score: 0.014,
     tagline: 'Enterprise SEO',
     image: {
       src: nozzleImage,
     },
     llmDescription:
-      'Enterprise SEO platform built entirely with TanStack libraries. Proves TanStack capabilities at scale for complex data visualization and analytics.',
+      'Enterprise keyword rank tracking and SERP monitoring platform with large-scale SEO reporting, share-of-voice analysis, historical data, and export capabilities.',
     category: 'learning',
     content: (
       <>
         <div className="text-xs">
-          Since its founding, Nozzle's SEO platform was the original home for
-          almost all TanStack libraries. They were used to build the{' '}
-          <strong>
-            most technically advanced search engine monitoring platform
-          </strong>{' '}
-          of its kind. Its enterprise rank tracking and keyword research tools
-          continue to set a new bar for quality and scale. Nozzle continues to
-          prove the value of the full gamut of TanStack tools on the front-end
-          with unmatched UI/UX.
+          Nozzle is an <strong>enterprise SEO</strong> product focused on rank
+          tracking, share-of-voice reporting, historical SERP data, and large-
+          scale exports. It remains relevant here because it represents a
+          demanding, data-heavy product category with serious analytics needs.
         </div>
         <LearnMoreButton />
       </>
@@ -553,18 +790,18 @@ const speakeasy = (() => {
       light: speakeasyLightSvg,
       dark: speakeasyDarkSvg,
     },
-    llmDescription: '',
+    llmDescription:
+      'API tooling focused on generating idiomatic SDKs, CLIs, Terraform providers, and hosted MCP servers from OpenAPI specs.',
     category: 'api',
     content: (
       <>
         <div className="text-xs">
-          Speakeasy and TanStack are working together to make{' '}
-          <strong>API management effortless</strong>. With Speakeasy's{' '}
-          <strong>automated SDK generation</strong> and TanStack's robust
-          front-end tooling, developers can move faster than ever. Whether
-          you're integrating APIs or streamlining your developer experience,
-          this partnership ensures you're covered from server to client with{' '}
-          <strong>powerful, type-safe, and optimized solutions</strong>.
+          Speakeasy focuses on generating{' '}
+          <strong>
+            SDKs, CLIs, Terraform providers, and hosted MCP servers
+          </strong>{' '}
+          from OpenAPI specs. That is useful when TanStack frontends depend on
+          well-generated client libraries instead of hand-maintained API code.
         </div>
         <LearnMoreButton />
       </>
@@ -581,27 +818,70 @@ const unkey = (() => {
     libraries: ['pacer'] as const,
     status: 'active' as const,
     score: 0.051,
+    tier: 'bronze' as const,
     href,
     brandColor: '#222222',
     tagline: 'API Key Management',
+    applicationStarterPromptInstructions: [
+      'Use Unkey server-side only and never expose root keys or management credentials in client code.',
+      'Choose one concrete integration path based on the app: API key verification with @unkey/api or endpoint rate limiting with @unkey/ratelimit.',
+      'If the product need is unclear, prefer a minimal server-side TODO or example wrapper instead of inventing both paths at once.',
+    ],
     image: {
       light: unkeyBlackSvg,
       dark: unkeyWhiteSvg,
       scale: 0.7,
     },
     llmDescription:
-      'API key management, rate limiting, and usage analytics. Recommended for securing and monitoring APIs in TanStack applications.',
+      'API infrastructure for API key management, rate limiting, usage tracking, audit logs, and access controls.',
+    category: 'api',
+    content: (
+      <>
+        <div className="text-xs">
+          Unkey provides <strong>API key management</strong>, rate limiting,
+          usage tracking, audit logs, and access controls. That makes it a
+          practical fit for TanStack-built products that expose APIs and need
+          straightforward platform controls.
+        </div>
+        <LearnMoreButton />
+      </>
+    ),
+  }
+})()
+
+const serpApi = (() => {
+  const href = 'https://serpapi.com?utm_source=tanstack'
+
+  return {
+    name: 'SerpApi',
+    id: 'serpapi',
+    libraries: libraries.map((l) => l.id),
+    status: 'active' as const,
+    score: 0.41,
+    tier: 'silver' as const,
+    href,
+    brandColor: '#6361EC',
+    tagline: 'Real-time SERP API',
+    applicationStarterPromptInstructions: [
+      'Install the official serpapi package and keep all SerpApi usage server-side behind an app-owned endpoint or server function.',
+      'Read SERPAPI_API_KEY from environment variables and choose one explicit search engine instead of pretending to support every engine at once.',
+      'Normalize the response into app-owned data types before sending it to the UI.',
+    ],
+    image: {
+      light: serpapiBlackSvg,
+      dark: serpapiWhiteSvg,
+      scale: 0.92,
+    },
+    llmDescription:
+      'Search engine results API with structured JSON output, geo-targeting controls, CAPTCHA solving, and support for Google, Maps, Shopping, News, and other engines.',
     category: 'api',
     content: (
       <>
         <div className="text-xs">
-          Unkey and TanStack are teaming up to streamline API management for
-          developers. With Unkey's powerful features like{' '}
-          <strong>API key management</strong>, <strong>rate limiting</strong>,
-          and <strong>usage analytics</strong>, integrating with TanStack's
-          developer-first tools becomes seamless. Together, we're enhancing the
-          developer experience by providing secure and scalable solutions for
-          modern web applications.
+          SerpApi handles search-engine access and returns structured results
+          for Google and other engines, with <strong>geo-targeting</strong>,
+          proxies, and CAPTCHA solving handled for you. That is useful for SEO
+          products, search intelligence, and AI workflows built with TanStack.
         </div>
         <LearnMoreButton />
       </>
@@ -618,28 +898,30 @@ const electric = (() => {
     libraries: ['db'] as const,
     status: 'active' as const,
     score: 0.283,
+    tier: 'bronze' as const,
     href,
     brandColor: '#7e78db',
     tagline: 'Sync Engine',
+    applicationStarterPromptInstructions: [
+      'Treat Electric as a platform-level integration, not a small drop-in add-on.',
+      'Do not hand-roll full sync plumbing unless the prompt explicitly asks for that; prefer clear setup notes or TODOs that point to the official Electric starter path.',
+      'If you demonstrate Electric at all, keep it to thin scaffolding and make missing local tooling or service setup explicit.',
+    ],
     image: {
       light: electricLightSvg,
       dark: electricDarkSvg,
     },
     llmDescription:
-      'Real-time sync engine with offline-first data, conflict resolution, and low-latency replication backed by Postgres. Powers TanStack DB sync capabilities.',
+      'Sync-focused data platform for Postgres-backed apps, including Postgres Sync and the partnered TanStack DB project. It is built for reactive and collaborative applications that need live data sync.',
     category: 'database',
     content: (
       <>
         <div className="text-xs">
-          Electric and TanStack are teaming up on TanStack DB to bring
-          <strong>robust real-time sync</strong> to mainstream apps. ElectricSQL
-          delivers <strong>offline-first</strong> data,{' '}
-          <strong>conflict resolution</strong>, and{' '}
-          <strong>low-latency replication</strong>
-          backed by Postgres—no bespoke plumbing required. Paired with TanStack
-          DB's <strong>type-safe APIs</strong> and developer experience, teams
-          can ship collaborative features faster and keep UIs consistent across
-          clients and the edge.
+          Electric is focused on{' '}
+          <strong>sync and reactive data delivery</strong>
+          for Postgres-backed apps, including Postgres Sync and its work with
+          TanStack DB. It is especially relevant for collaborative or local-
+          first apps where live data movement is part of the core product.
         </div>
         <LearnMoreButton />
       </>
@@ -658,21 +940,21 @@ const vercel = (() => {
     status: 'inactive' as const,
     startDate: 'May 2024',
     endDate: 'Oct 2024',
+    uniqueConstraints: ['hosting'] satisfies Array<PartnerUniqueConstraint>,
     image: {
       light: vercelLightSvg,
       dark: vercelDarkSvg,
     },
-    llmDescription: '',
+    llmDescription:
+      'Cloud platform for deploying and scaling web applications with Git-based workflows, preview environments, global delivery, and Vercel Functions.',
     category: 'deployment',
     content: (
       <>
         <div className="text-xs">
-          TanStack Router/Start and Vercel are a match made in heaven. Vercel's{' '}
-          <strong>cutting-edge deployment and serverless capabilities</strong>{' '}
-          continue to deliver on the TanStack promise for apps to be{' '}
-          <strong>high-performant and scalable</strong>. We're working closely
-          with Vercel to not only ensure a flawless deployment experience, but
-          also push the boundaries of what's possible with TanStack on the web.
+          Vercel provides <strong>Git-based deployments</strong>, preview
+          environments, global delivery, and server-side compute through Vercel
+          Functions. That makes it a familiar deployment option for TanStack
+          Start and Router teams building full-stack apps.
         </div>
         <LearnMoreButton />
       </>
@@ -691,6 +973,7 @@ const prisma = (() => {
     libraries: ['db', 'start'] as const,
     startDate: 'Aug 2025',
     score: 0.143,
+    tier: 'bronze' as const,
     brandColor: '#2D3748',
     tagline: 'Database ORM',
     image: {
@@ -698,17 +981,15 @@ const prisma = (() => {
       dark: prismaDarkSvg,
     },
     llmDescription:
-      'Type-safe ORM with instant Postgres provisioning via Prisma Postgres. Recommended for database access in TanStack Start applications.',
+      'Open-source TypeScript ORM with Prisma Client, migrations, Prisma Studio, and Prisma Postgres for managed PostgreSQL.',
     category: 'database',
     content: (
       <>
         <div className="text-xs">
-          TanStack and Prisma Postgres: Skip the database setup, get to
-          building. Prisma Postgres provisions production-ready Postgres
-          databases in seconds—no resource config, no infrastructure planning,
-          no late-night "why is my connection pool maxed out?" debugging
-          sessions. Just connect your TanStack app and start building features
-          that matter.
+          Prisma combines <strong>type-safe database access</strong>,
+          migrations, Prisma Studio, and Prisma Postgres into one workflow. It
+          also publishes a TanStack Start guide, which makes it a practical
+          option for full-stack apps that want a polished database layer.
         </div>
         <LearnMoreButton />
       </>
@@ -728,23 +1009,28 @@ const codeRabbit = (() => {
     libraries: libraries.map((l) => l.id),
     startDate: 'Aug 2025',
     score: 1,
+    tier: 'gold' as const,
     brandColor: '#FF6B2B',
     tagline: 'AI Code Review',
+    applicationStarterPromptInstructions: [
+      'Do not add runtime app code for CodeRabbit.',
+      'Treat CodeRabbit as external repository tooling configured through the GitHub App, with optional .coderabbit.yaml guidance if useful.',
+      'Mention the GitHub App install/setup path briefly instead of pretending CodeRabbit is an in-app SDK integration.',
+    ],
     image: {
       light: codeRabbitLightSvg,
       dark: codeRabbitDarkSvg,
     },
     llmDescription:
-      'AI-powered code review that flags readability, correctness, and security issues on pull requests. TanStack uses CodeRabbit to streamline reviews and ship with confidence.',
+      'AI code review platform for pull requests, IDEs, and CLI workflows, with automated review comments, one-click fixes, and configurable review rules.',
     category: 'code-review',
     content: (
       <>
         <div className="text-xs">
-          TanStack uses CodeRabbit to streamline reviews and elevate code
-          quality. Its AI flags readability, correctness, and security issues on
-          pull requests, reducing back-and-forth and review time. That lets us
-          focus on architectural decisions and ship with confidence—fewer
-          regressions, faster cycles.
+          CodeRabbit adds automated review, scanner context, and one-click fixes
+          across <strong>pull requests, IDEs, and CLI workflows</strong>. That
+          is useful in TanStack codebases where fast feedback on correctness and
+          API usage helps keep review cycles tight.
         </div>
         <LearnMoreButton />
       </>
@@ -759,8 +1045,9 @@ const strapi = (() => {
     name: 'Strapi',
     id: 'strapi',
     libraries: ['start', 'router'] as const,
-    status: 'active' as const,
+    status: 'inactive' as const,
     score: 0.069,
+    tier: 'bronze' as const,
     href,
     brandColor: '#4945FF',
     tagline: 'Headless CMS',
@@ -770,19 +1057,15 @@ const strapi = (() => {
       scale: 0.8,
     },
     llmDescription:
-      'Open-source headless CMS with full TypeScript support, customizable APIs, and rich plugin ecosystem. Recommended for content management in TanStack Start apps.',
+      'Open-source headless CMS with content modeling, generated REST and GraphQL APIs, TypeScript tooling, and self-hosted or cloud deployment options.',
     category: 'cms',
     content: (
       <>
         <div className="text-xs">
-          Build modern websites with the{' '}
-          <strong>most customizable Headless CMS</strong>. Strapi is the{' '}
-          <strong>open-source Headless CMS</strong> that makes API creation
-          easy, and with <strong>Strapi 5</strong> you get{' '}
-          <strong>100% TypeScript support</strong>, a
-          <strong> fully customizable API</strong>, Draft/Publish, i18n, RBAC,
-          and a rich plugin ecosystem—perfect for TanStack Start apps in the
-          cloud or on your own servers.
+          Strapi gives teams a <strong>headless CMS</strong> with content
+          modeling, generated REST and GraphQL APIs, TypeScript tooling, and
+          self-hosted or cloud deployment options. That works well when a
+          TanStack Start app needs a real content system behind it.
         </div>
         <LearnMoreButton />
       </>
@@ -791,35 +1074,76 @@ const strapi = (() => {
 })()
 
 const powerSync = (() => {
-  const href = 'https://powersync.com?utm_source=tanstack'
+  const href =
+    'https://powersync.com?utm_source=tanstack&utm_campaign=tanstack_partner'
 
   return {
     name: 'PowerSync',
     id: 'powersync',
-    libraries: ['db'] as const,
-    status: 'active' as const,
+    libraries: ['db', 'query'] as const,
+    status: 'inactive' as const,
     startDate: 'Jan 2026',
     score: 0.143,
+    tier: 'bronze' as const,
     href,
     tagline: 'Offline-first Sync',
+    applicationStarterPromptInstructions: [
+      'Install the official PowerSync web client packages such as @powersync/web and @journeyapps/wa-sqlite when PowerSync is explicitly requested.',
+      'If TanStack collections or query integration fits, wire the official TanStack PowerSync packages rather than inventing a custom bridge.',
+      'Leave backend connector, auth token, and sync infrastructure setup explicit instead of pretending PowerSync can be fully demoed without backend prerequisites.',
+    ],
     image: {
       light: powersyncBlackSvg,
       dark: powersyncWhiteSvg,
+      scale: 1.2,
     },
     llmDescription:
-      'Sync engine that connects backend databases (Postgres, MongoDB, MySQL) with in-app SQLite for offline-first, real-time reactive applications.',
+      'Sync engine that keeps backend databases in sync with embedded client-side SQLite for offline-first and realtime applications. Postgres and MongoDB are supported, with MySQL and SQL Server in beta.',
     category: 'database',
     content: (
       <>
         <div className="text-xs">
-          PowerSync and TanStack are teaming up to bring{' '}
-          <strong>offline-first sync</strong> to modern applications. PowerSync
-          automatically syncs your backend database with in-app SQLite,
-          delivering <strong>instant reactivity</strong>,{' '}
-          <strong>real-time updates</strong>, and{' '}
-          <strong>seamless offline support</strong>. Paired with TanStack DB,
-          developers can build collaborative, always-available apps without
-          wrestling with complex sync logic.
+          PowerSync syncs backend data into{' '}
+          <strong>embedded client-side SQLite</strong> for offline-first and
+          realtime apps. That makes it relevant for TanStack users who care
+          about local-first UX, live updates, and resilient client state.
+        </div>
+        <LearnMoreButton />
+      </>
+    ),
+  }
+})()
+
+const railway = (() => {
+  const href =
+    'https://railway.com/?utm_medium=sponsor&utm_source=oss&utm_campaign=tanstack'
+
+  return {
+    name: 'Railway',
+    id: 'railway',
+    libraries: libraries.map((l) => l.id),
+    status: 'active' as const,
+    score: 0.145,
+    tier: 'gold' as const,
+    uniqueConstraints: ['hosting'] satisfies Array<PartnerUniqueConstraint>,
+    href,
+    brandColor: '#0B0D0E',
+    tagline: 'Instant Deployment',
+    image: {
+      light: railwayBlackSvg,
+      dark: railwayWhiteSvg,
+    },
+    llmDescription:
+      'Application deployment platform for shipping from GitHub, the CLI, Docker images, or templates, with managed networking, observability, and configurable scaling.',
+    category: 'deployment',
+    content: (
+      <>
+        <div className="text-xs">
+          Railway gives teams a simple way to deploy app services, databases,
+          and supporting infrastructure from{' '}
+          <strong>GitHub, the CLI, Docker, or templates</strong>. That is
+          appealing for TanStack teams that want to move quickly without
+          building deployment plumbing first.
         </div>
         <LearnMoreButton />
       </>
@@ -827,11 +1151,63 @@ const powerSync = (() => {
   }
 })()
 
+const openRouter = (() => {
+  const href = 'https://openrouter.ai?utm_source=tanstack'
+
+  return {
+    name: 'OpenRouter',
+    id: 'openrouter',
+    href,
+    libraries: libraries.map((l) => l.id),
+    status: 'active' as const,
+    startDate: 'Mar 2026',
+    score: 0.344,
+    tier: 'silver' as const,
+    brandColor: '#7C3AED',
+    tagline: 'Unified LLM API',
+    applicationStarterPromptInstructions: [
+      'Use the official @openrouter/sdk on the server and read OPENROUTER_API_KEY from environment variables.',
+      'Keep model selection explicit and easy to swap, and do not expose provider keys in client code.',
+      'If AI functionality is demoed, route requests through app-owned server functions instead of calling OpenRouter directly from the browser.',
+    ],
+    image: {
+      light: openrouterBlackSvg,
+      dark: openrouterWhiteSvg,
+      scale: 1.25,
+    },
+    llmDescription:
+      'Unified API for accessing hundreds of AI models from dozens of providers through a single OpenAI-compatible endpoint, with routing, fallbacks, and privacy controls.',
+    category: 'ai' as const,
+    content: (
+      <>
+        <div className="text-xs">
+          OpenRouter provides a <strong>unified API</strong> for many model
+          providers, with routing, fallbacks, and privacy controls behind a
+          single endpoint. That is useful for TanStack apps experimenting with
+          AI features where provider choice may change over time.
+        </div>
+        <button
+          type="button"
+          onClick={() => {
+            window.location.href = '/blog/openrouter-partnership'
+          }}
+          className="text-blue-500 uppercase font-black text-sm"
+        >
+          Learn More
+        </button>
+      </>
+    ),
+  }
+})()
+
 export const partners: Partner[] = [
   codeRabbit,
   cloudflare,
+  lovable,
   agGrid,
+  serpApi,
   netlify,
+  openRouter,
   neon,
   workos,
   clerk,
@@ -839,6 +1215,7 @@ export const partners: Partner[] = [
   electric,
   powerSync,
   sentry,
+  railway,
   prisma,
   strapi,
   unkey,
@@ -847,3 +1224,543 @@ export const partners: Partner[] = [
   vercel,
   speakeasy,
 ] as Partner[]
+
+const applicationStarterBrandColorOverrides = new Map<string, string>([
+  ['powersync', '#00D5FF'],
+  ['prisma', '#10B981'],
+  ['railway', '#9B4DCA'],
+  ['sentry', '#7C6BFF'],
+  ['unkey', '#7C3AED'],
+])
+
+const applicationStarterPlacementContext = getPartnerPlacementContext({
+  orderStrategy: 'contextual-recommendation',
+  surface: 'application_starter_suggestions',
+})
+
+function getPartnerUniqueConstraints(
+  partner: Pick<Partner, 'uniqueConstraints'>,
+) {
+  return partner.uniqueConstraints ?? []
+}
+
+function hasSharedUniqueConstraint(
+  left: Pick<ApplicationStarterPartnerSuggestion, 'uniqueConstraints'>,
+  right: Pick<ApplicationStarterPartnerSuggestion, 'uniqueConstraints'>,
+) {
+  return left.uniqueConstraints.some((constraint) =>
+    right.uniqueConstraints.includes(constraint),
+  )
+}
+
+function findApplicationStarterPartnerSuggestion(
+  partnerId: string,
+  partnerSuggestions: Array<ApplicationStarterPartnerSuggestion>,
+) {
+  return partnerSuggestions.find((partner) => partner.id === partnerId)
+}
+
+export function hasApplicationStarterPartnerConflictWithAny(
+  partnerId: string,
+  partnerIds: Array<string>,
+  partnerSuggestions: Array<ApplicationStarterPartnerSuggestion> = applicationStarterPartnerSuggestions,
+) {
+  const partner = findApplicationStarterPartnerSuggestion(
+    partnerId,
+    partnerSuggestions,
+  )
+
+  if (!partner) {
+    return false
+  }
+
+  return partnerIds.some((candidateId) => {
+    if (candidateId === partner.id) {
+      return false
+    }
+
+    const candidate = findApplicationStarterPartnerSuggestion(
+      candidateId,
+      partnerSuggestions,
+    )
+
+    return candidate ? hasSharedUniqueConstraint(partner, candidate) : false
+  })
+}
+
+export function getApplicationStarterConflictingPartnerIds(
+  partner: ApplicationStarterPartnerSuggestion,
+  partnerSuggestions: Array<ApplicationStarterPartnerSuggestion>,
+) {
+  return partnerSuggestions.flatMap((candidate) => {
+    if (
+      candidate.id === partner.id ||
+      !hasSharedUniqueConstraint(partner, candidate)
+    ) {
+      return []
+    }
+
+    return [candidate.id]
+  })
+}
+
+export function getApplicationStarterCompatiblePartnerIds(
+  partnerIds: Array<string>,
+  partnerSuggestions: Array<ApplicationStarterPartnerSuggestion> = applicationStarterPartnerSuggestions,
+) {
+  const normalized = Array<string>()
+
+  for (const partnerId of partnerIds) {
+    if (normalized.includes(partnerId)) {
+      continue
+    }
+
+    const partner = findApplicationStarterPartnerSuggestion(
+      partnerId,
+      partnerSuggestions,
+    )
+
+    if (!partner) {
+      continue
+    }
+
+    if (partner.uniqueConstraints.length === 0) {
+      normalized.push(partner.id)
+      continue
+    }
+
+    const conflictingPartnerIds = normalized.filter((candidateId) => {
+      const candidate = findApplicationStarterPartnerSuggestion(
+        candidateId,
+        partnerSuggestions,
+      )
+
+      return candidate ? hasSharedUniqueConstraint(partner, candidate) : false
+    })
+
+    const hasSameOrHigherTierConflict = conflictingPartnerIds.some(
+      (candidateId) => {
+        const candidate = findApplicationStarterPartnerSuggestion(
+          candidateId,
+          partnerSuggestions,
+        )
+
+        return candidate ? candidate.tier <= partner.tier : false
+      },
+    )
+
+    if (hasSameOrHigherTierConflict) {
+      continue
+    }
+
+    for (const conflictingPartnerId of conflictingPartnerIds) {
+      const candidate = findApplicationStarterPartnerSuggestion(
+        conflictingPartnerId,
+        partnerSuggestions,
+      )
+
+      if (!candidate || candidate.tier <= partner.tier) {
+        continue
+      }
+
+      const conflictingIndex = normalized.indexOf(conflictingPartnerId)
+
+      if (conflictingIndex >= 0) {
+        normalized.splice(conflictingIndex, 1)
+      }
+    }
+
+    normalized.push(partner.id)
+  }
+
+  return normalized
+}
+
+export function getApplicationStarterVisiblePartnerSuggestions(
+  partnerSuggestions: Array<ApplicationStarterPartnerSuggestion>,
+  _selectedPartnerIds: Array<string>,
+) {
+  return partnerSuggestions
+}
+
+export function hasApplicationStarterPartnerUniqueConstraint(
+  partnerId: string,
+  uniqueConstraint: PartnerUniqueConstraint,
+  partnerSuggestions: Array<ApplicationStarterPartnerSuggestion> = applicationStarterPartnerSuggestions,
+) {
+  const partner = findApplicationStarterPartnerSuggestion(
+    partnerId,
+    partnerSuggestions,
+  )
+
+  return partner?.uniqueConstraints.includes(uniqueConstraint) ?? false
+}
+
+const applicationStarterInferenceRules: Array<{
+  partnerId: string
+  patterns: Array<RegExp>
+}> = [
+  {
+    partnerId: 'workos',
+    patterns: [
+      /\b(sso|saml|scim|directory sync|enterprise auth|enterprise identity|b2b auth)\b/i,
+    ],
+  },
+  {
+    partnerId: 'clerk',
+    patterns: [
+      /\b(authentication|sign[ -]?in|sign[ -]?up|login|oauth|mfa|user management|sessions?)\b/i,
+    ],
+  },
+  {
+    partnerId: 'cloudflare',
+    patterns: [/\b(cloudflare|workers?|durable objects|r2|d1|kv)\b/i],
+  },
+  {
+    partnerId: 'lovable',
+    patterns: [
+      /\b(lovable|lovable cloud|vibe[- ]?coding|ai app builder|visual editor)\b/i,
+    ],
+  },
+  {
+    partnerId: 'netlify',
+    patterns: [
+      /\b(netlify|deploy previews?|netlify functions?|edge functions?)\b/i,
+    ],
+  },
+  {
+    partnerId: 'railway',
+    patterns: [/\brailway\b/i],
+  },
+  {
+    partnerId: 'sentry',
+    patterns: [
+      /\b(error tracking|exception monitoring|observability|tracing|trace(s|ing)?|session replay|profiling|application monitoring)\b/i,
+    ],
+  },
+  {
+    partnerId: 'strapi',
+    patterns: [
+      /\b(headless cms|content management system|cms|editorial workflow|content modeling|admin content)\b/i,
+    ],
+  },
+  {
+    partnerId: 'neon',
+    patterns: [
+      /\b(serverless postgres|postgresql|postgres|database branching|branch database)\b/i,
+    ],
+  },
+  {
+    partnerId: 'openrouter',
+    patterns: [
+      /\b(openrouter|openai-compatible|model routing|provider fallbacks?|multiple ai models?)\b/i,
+    ],
+  },
+  {
+    partnerId: 'serpapi',
+    patterns: [
+      /\b(serpapi|search engine results?|google shopping|google maps|serp)\b/i,
+    ],
+  },
+  {
+    partnerId: 'unkey',
+    patterns: [
+      /\b(unkey|api keys?|rate limit(ing)?|usage limits?|access controls?)\b/i,
+    ],
+  },
+  {
+    partnerId: 'ag-grid',
+    patterns: [
+      /\b(ag[ -]?grid|enterprise data grid|excel export|pivoting|spreadsheet-like grid)\b/i,
+    ],
+  },
+  {
+    partnerId: 'powersync',
+    patterns: [/\b(powersync|offline-first sync)\b/i],
+  },
+  {
+    partnerId: 'electric',
+    patterns: [/\b(electric|postgres sync|reactive postgres)\b/i],
+  },
+  {
+    partnerId: 'coderabbit',
+    patterns: [/\b(coderabbit|ai code review|pr review bot)\b/i],
+  },
+]
+
+function normalizeApplicationStarterPartnerKey(value: string) {
+  return value.toLowerCase().replace(/[^a-z0-9]/g, '')
+}
+
+function getApplicationStarterPartnerTier(
+  partner: Pick<Partner, 'tier'>,
+): ApplicationStarterPartnerTier {
+  return partner.tier ? partnerTierToBuilderTier[partner.tier] : 3
+}
+
+function getApplicationStarterPartnerFaviconUrl(href: string) {
+  return `${new URL(href).origin}/favicon.ico`
+}
+
+function getApplicationStarterPartnerDescription(
+  partner: Pick<Partner, 'llmDescription'>,
+) {
+  const [firstSentence] = partner.llmDescription.split(/(?<=[.!?])\s+/)
+  return firstSentence?.trim() || partner.llmDescription.trim()
+}
+
+function getApplicationStarterPartnerTags(
+  partner: Pick<Partner, 'category' | 'tagline'>,
+) {
+  if (partner.tagline?.trim()) {
+    return [partner.tagline.trim()]
+  }
+
+  return [partnerCategoryLabels[partner.category]]
+}
+
+function inferApplicationStarterPartnerIds(
+  input: string,
+  selectedPartnerIds: Array<string>,
+) {
+  const selectedSourcePartners = partners.filter(
+    (partner) =>
+      partner.status === 'active' && selectedPartnerIds.includes(partner.id),
+  )
+  const blockedCategories = new Set(
+    selectedSourcePartners
+      .filter((partner) => getPartnerUniqueConstraints(partner).length === 0)
+      .map((partner) => partner.category),
+  )
+  const blockedUniqueConstraints = new Set(
+    selectedSourcePartners.flatMap(getPartnerUniqueConstraints),
+  )
+  const inferredCategories = new Set<PartnerCategory>()
+  const inferredUniqueConstraints = new Set<PartnerUniqueConstraint>()
+  const inferredPartnerIds = Array<string>()
+
+  for (const rule of applicationStarterInferenceRules) {
+    const partner = partners.find(
+      (candidate) =>
+        candidate.status === 'active' && candidate.id === rule.partnerId,
+    )
+
+    if (!partner) {
+      continue
+    }
+
+    if (selectedPartnerIds.includes(partner.id)) {
+      continue
+    }
+
+    const partnerUniqueConstraints = getPartnerUniqueConstraints(partner)
+    const hasUniqueConstraint = partnerUniqueConstraints.length > 0
+    const isBlockedByUniqueConstraint = partnerUniqueConstraints.some(
+      (uniqueConstraint) =>
+        blockedUniqueConstraints.has(uniqueConstraint) ||
+        inferredUniqueConstraints.has(uniqueConstraint),
+    )
+
+    if (isBlockedByUniqueConstraint) {
+      continue
+    }
+
+    if (
+      partner.id === 'clerk' &&
+      /\bavoid\s+adding\s+auth\s+and\s+api\s+key\s+providers?\s+that\s+overlap\s+in\s+purpose\b/i.test(
+        input,
+      )
+    ) {
+      continue
+    }
+
+    if (
+      !hasUniqueConstraint &&
+      (blockedCategories.has(partner.category) ||
+        inferredCategories.has(partner.category))
+    ) {
+      continue
+    }
+
+    if (!rule.patterns.some((pattern) => pattern.test(input))) {
+      continue
+    }
+
+    inferredPartnerIds.push(partner.id)
+
+    if (hasUniqueConstraint) {
+      for (const uniqueConstraint of partnerUniqueConstraints) {
+        inferredUniqueConstraints.add(uniqueConstraint)
+      }
+    } else {
+      inferredCategories.add(partner.category)
+    }
+  }
+
+  return getApplicationStarterCompatiblePartnerIds(inferredPartnerIds)
+}
+
+export function getInferredApplicationStarterPartnerIdsFromUserInput(
+  input: string,
+  selectedPartnerIds: Array<string>,
+) {
+  return inferApplicationStarterPartnerIds(input, selectedPartnerIds)
+}
+
+function createApplicationStarterPartnerSuggestion(
+  partner: Partner,
+): ApplicationStarterPartnerSuggestion {
+  const tier = getApplicationStarterPartnerTier(partner)
+  const normalizedPartnerKey = normalizeApplicationStarterPartnerKey(partner.id)
+  const iconMode: ApplicationStarterPartnerSuggestion['iconMode'] =
+    tier === 2 ? (partner.applicationStarterIcon?.mode ?? 'contain') : undefined
+
+  return {
+    id: partner.id,
+    label: partner.name,
+    description: getApplicationStarterPartnerDescription(partner),
+    hint: `${partner.name} (${partnerCategoryLabels[partner.category]})`,
+    iconMode,
+    iconSrc:
+      tier === 2
+        ? (partner.applicationStarterIcon?.src ??
+          getApplicationStarterPartnerFaviconUrl(partner.href))
+        : undefined,
+    image: partner.image,
+    tags: getApplicationStarterPartnerTags(partner),
+    brandColor:
+      applicationStarterBrandColorOverrides.get(normalizedPartnerKey) ??
+      partner.brandColor,
+    tier,
+    uniqueConstraints: getPartnerUniqueConstraints(partner),
+  }
+}
+
+function createApplicationStarterPartnerSuggestions(
+  placementContext: PartnerPlacementContext,
+) {
+  return getPartnersForPlacement(
+    partners.filter((partner) => partner.status === 'active'),
+    placementContext,
+  ).map(createApplicationStarterPartnerSuggestion)
+}
+
+const applicationStarterPartnerSuggestions =
+  createApplicationStarterPartnerSuggestions(applicationStarterPlacementContext)
+
+export function getApplicationStarterPartnerSuggestions(
+  placementContext: PartnerPlacementContext = applicationStarterPlacementContext,
+) {
+  if (placementContext === applicationStarterPlacementContext) {
+    return applicationStarterPartnerSuggestions
+  }
+
+  return createApplicationStarterPartnerSuggestions(placementContext)
+}
+
+export function composeApplicationStarterInput(
+  input: string,
+  selectedPartnerIds: Array<string>,
+  inferredPartnerIds: Array<string>,
+  options?: { forceRouterOnly?: boolean },
+) {
+  const trimmedInput = input.trim()
+  const compatibleSelectedPartnerIds =
+    getApplicationStarterCompatiblePartnerIds(selectedPartnerIds)
+  const compatibleInferredPartnerIds =
+    getApplicationStarterCompatiblePartnerIds(
+      inferredPartnerIds.filter(
+        (partnerId) =>
+          !hasApplicationStarterPartnerConflictWithAny(
+            partnerId,
+            compatibleSelectedPartnerIds,
+          ),
+      ),
+    )
+  const selectedPartners = applicationStarterPartnerSuggestions.filter(
+    (partner) => compatibleSelectedPartnerIds.includes(partner.id),
+  )
+  const inferredPartners = applicationStarterPartnerSuggestions.filter(
+    (partner) => compatibleInferredPartnerIds.includes(partner.id),
+  )
+  const selectedSourcePartners = partners.filter(
+    (partner) =>
+      partner.status === 'active' &&
+      compatibleSelectedPartnerIds.includes(partner.id),
+  )
+  const inferredSourcePartners = partners.filter(
+    (partner) =>
+      partner.status === 'active' &&
+      compatibleInferredPartnerIds.includes(partner.id),
+  )
+
+  if (selectedPartners.length === 0 && inferredPartners.length === 0) {
+    return trimmedInput
+  }
+
+  const selectedPartnerLine = selectedPartners.length
+    ? `Prefer these integrations where they fit: ${selectedPartners
+        .map((partner) => partner.hint)
+        .join(', ')}.`
+    : null
+  const inferredPartnerLine = inferredPartners.length
+    ? `The request clearly calls for these integrations where they fit: ${inferredPartners
+        .map((partner) => partner.hint)
+        .join(', ')}.`
+    : null
+
+  const partnerInstructions = Array<string>()
+
+  if (selectedPartners.length > 0 || inferredPartners.length > 0) {
+    partnerInstructions.push(
+      'Make sure each requested or clearly implied partner integration is represented in the resulting project somehow. If one cannot be implemented cleanly, explain what was omitted and why instead of silently dropping it.',
+    )
+  }
+
+  const allPromptInstructionPartners = [
+    ...selectedSourcePartners,
+    ...inferredSourcePartners,
+  ]
+  const partnerPromptInstructions = allPromptInstructionPartners.flatMap(
+    (partner) => partner.applicationStarterPromptInstructions ?? [],
+  )
+
+  if (partnerPromptInstructions.length > 0) {
+    partnerInstructions.push(
+      "If a requested or inferred partner is not available as a real TanStack CLI add-on, do not invent one. Follow the partner's official install path, keep secrets server-side, and fall back to setup notes or TODOs when the integration depends on external infra, dashboards, licenses, or GitHub App installs.",
+      ...partnerPromptInstructions,
+    )
+  }
+
+  const allPartnerIds = [
+    ...compatibleSelectedPartnerIds,
+    ...compatibleInferredPartnerIds,
+  ]
+
+  if (allPartnerIds.includes('coderabbit')) {
+    partnerInstructions.push(
+      'Prefer the standard repository integration for pull request reviews first instead of inventing a custom workflow.',
+      'Only add CodeRabbit IDE or CLI workflows if they clearly support the requested developer workflow.',
+    )
+  }
+
+  return [
+    trimmedInput,
+    '',
+    APPLICATION_STARTER_GUIDANCE_MARKER,
+    `${APPLICATION_STARTER_SELECTED_PARTNERS_MARKER} ${compatibleSelectedPartnerIds.join(', ') || 'none'}`,
+    `${APPLICATION_STARTER_INFERRED_PARTNERS_MARKER} ${compatibleInferredPartnerIds.join(', ') || 'none'}`,
+    options?.forceRouterOnly
+      ? APPLICATION_STARTER_FORCE_ROUTER_ONLY_MARKER
+      : null,
+    selectedPartnerLine,
+    inferredPartnerLine,
+    ...partnerInstructions,
+  ]
+    .filter(Boolean)
+    .join('\n\n')
+}
+
+export function getPartnerById(partnerId: string) {
+  return partners.find((partner) => partner.id === partnerId)
+}
diff --git a/src/utils/posthog.server.ts b/src/utils/posthog.server.ts
deleted file mode 100644
index ef1b8a32b..000000000
--- a/src/utils/posthog.server.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { PostHog } from 'posthog-node'
-import { env } from '~/utils/env'
-
-let posthogClient: PostHog | null = null
-
-function getPostHogClient(): PostHog | null {
-  if (!posthogClient) {
-    const apiKey = env.POSTHOG_API_KEY
-    if (!apiKey) {
-      return null
-    }
-
-    posthogClient = new PostHog(apiKey, {
-      host: 'https://us.i.posthog.com',
-      // Serverless optimizations: flush immediately
-      flushAt: 1,
-      flushInterval: 0,
-    })
-  }
-  return posthogClient
-}
-
-export function captureEvent(
-  distinctId: string,
-  event: string,
-  properties?: Record<string, unknown>,
-): void {
-  try {
-    const client = getPostHogClient()
-    if (client) {
-      client.capture({ distinctId, event, properties })
-    }
-  } catch {
-    // PostHog errors should never break the app
-  }
-}
-
-export async function flushPostHog(): Promise<void> {
-  if (posthogClient) {
-    await posthogClient.flush()
-  }
-}
diff --git a/src/utils/prod-diagnostics.server.ts b/src/utils/prod-diagnostics.server.ts
new file mode 100644
index 000000000..a3dac98d7
--- /dev/null
+++ b/src/utils/prod-diagnostics.server.ts
@@ -0,0 +1,336 @@
+import { randomUUID } from 'node:crypto'
+import { readdirSync } from 'node:fs'
+import { AsyncLocalStorage } from 'node:async_hooks'
+import { supportsProcessDiagnostics } from '~/server/runtime/host.server'
+import { getClientIp } from '~/utils/request.server'
+
+const isProduction = process.env.NODE_ENV === 'production'
+const requestStorage = new AsyncLocalStorage<RequestDiagnostics>()
+
+let fetchProbeInstalled = false
+let processProbeInstalled = false
+let fdHighWatermark = 0
+
+type HostCounter = Map<string, number>
+
+type RequestDiagnostics = {
+  requestId: string
+  method: string
+  pathname: string
+  startedAt: number
+  clientIp: string
+  outboundHosts: HostCounter
+  outboundFetchCount: number
+  outboundFetchErrors: number
+}
+
+function incrementMapCount(map: HostCounter, key: string): void {
+  map.set(key, (map.get(key) ?? 0) + 1)
+}
+
+function getFdCount(): number {
+  try {
+    return readdirSync('/proc/self/fd').length
+  } catch {
+    return -1
+  }
+}
+
+function getResourceSummary(): Record<string, number> {
+  const summary: Record<string, number> = {}
+
+  const getActiveResourcesInfo = process.getActiveResourcesInfo
+  if (typeof getActiveResourcesInfo !== 'function') {
+    return summary
+  }
+
+  try {
+    for (const resource of getActiveResourcesInfo()) {
+      summary[resource] = (summary[resource] ?? 0) + 1
+    }
+  } catch {
+    return summary
+  }
+
+  return summary
+}
+
+function getTopHosts(
+  outboundHosts: HostCounter,
+  limit = 8,
+): Array<[string, number]> {
+  return [...outboundHosts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, limit)
+}
+
+function toUrl(input: RequestInfo | URL): URL | null {
+  if (typeof input === 'string') {
+    return new URL(input)
+  }
+
+  if (input instanceof URL) {
+    return input
+  }
+
+  return new URL(input.url)
+}
+
+function logDiagnostic(payload: Record<string, unknown>): void {
+  console.log(
+    JSON.stringify({
+      logType: 'prod_diagnostics',
+      pid: process.pid,
+      ...payload,
+    }),
+  )
+}
+
+function maybeLogFdHighWatermark(): void {
+  if (!supportsProcessDiagnostics()) {
+    return
+  }
+
+  const fdCount = getFdCount()
+  if (fdCount > fdHighWatermark) {
+    fdHighWatermark = fdCount
+    logDiagnostic({
+      event: 'fd_high_watermark',
+      fdCount,
+      resourceSummary: getResourceSummary(),
+    })
+  }
+}
+
+export function installProductionFetchProbe(): void {
+  if (!isProduction || fetchProbeInstalled) {
+    return
+  }
+
+  fetchProbeInstalled = true
+  const originalFetch = globalThis.fetch.bind(globalThis)
+
+  const wrappedFetch: typeof fetch = async (input, init) => {
+    const context = requestStorage.getStore()
+    if (!context) {
+      return originalFetch(input, init)
+    }
+
+    context.outboundFetchCount += 1
+
+    try {
+      const url = toUrl(input)
+      if (url) {
+        incrementMapCount(context.outboundHosts, url.host)
+      }
+    } catch {
+      incrementMapCount(context.outboundHosts, 'unknown')
+    }
+
+    try {
+      return await originalFetch(input, init)
+    } catch (error) {
+      context.outboundFetchErrors += 1
+      throw error
+    }
+  }
+
+  globalThis.fetch = wrappedFetch
+}
+
+export function installProductionProcessProbe(): void {
+  if (
+    !isProduction ||
+    processProbeInstalled ||
+    !supportsProcessDiagnostics() ||
+    typeof process.on !== 'function'
+  ) {
+    return
+  }
+
+  processProbeInstalled = true
+
+  const heartbeat = setInterval(() => {
+    maybeLogFdHighWatermark()
+    logDiagnostic({
+      event: 'process_heartbeat',
+      pid: process.pid,
+      fdCount: getFdCount(),
+      resourceSummary: getResourceSummary(),
+    })
+  }, 30_000)
+
+  if (
+    typeof heartbeat === 'object' &&
+    heartbeat &&
+    'unref' in heartbeat &&
+    typeof heartbeat.unref === 'function'
+  ) {
+    heartbeat.unref()
+  }
+
+  process.on('unhandledRejection', (reason) => {
+    const message =
+      reason instanceof Error ? reason.message : String(reason ?? 'unknown')
+    const stack = reason instanceof Error ? reason.stack : undefined
+    maybeLogFdHighWatermark()
+    logDiagnostic({
+      event: 'unhandled_rejection',
+      pid: process.pid,
+      fdCount: getFdCount(),
+      resourceSummary: getResourceSummary(),
+      errorMessage: message,
+      errorStack: stack,
+    })
+  })
+
+  process.on('uncaughtException', (error) => {
+    maybeLogFdHighWatermark()
+    logDiagnostic({
+      event: 'uncaught_exception',
+      pid: process.pid,
+      fdCount: getFdCount(),
+      resourceSummary: getResourceSummary(),
+      errorMessage: error.message,
+      errorStack: error.stack,
+    })
+  })
+}
+
+export function runWithRequestDiagnostics<T>(
+  request: Request,
+  fn: (context: RequestDiagnostics) => Promise<T>,
+): Promise<T> {
+  if (!isProduction) {
+    return fn({
+      requestId: randomUUID(),
+      method: request.method,
+      pathname: new URL(request.url).pathname,
+      startedAt: Date.now(),
+      clientIp: getClientIp(request, 'unknown'),
+      outboundHosts: new Map<string, number>(),
+      outboundFetchCount: 0,
+      outboundFetchErrors: 0,
+    })
+  }
+
+  const context: RequestDiagnostics = {
+    requestId: randomUUID(),
+    method: request.method,
+    pathname: new URL(request.url).pathname,
+    startedAt: Date.now(),
+    clientIp: getClientIp(request, 'unknown'),
+    outboundHosts: new Map<string, number>(),
+    outboundFetchCount: 0,
+    outboundFetchErrors: 0,
+  }
+
+  return requestStorage.run(context, () => fn(context))
+}
+
+export function logRequestStart(context: RequestDiagnostics): void {
+  if (!isProduction) {
+    return
+  }
+
+  const fdCount = getFdCount()
+  maybeLogFdHighWatermark()
+  logDiagnostic({
+    event: 'request_start',
+    requestId: context.requestId,
+    method: context.method,
+    pathname: context.pathname,
+    clientIp: context.clientIp,
+    fdCount,
+  })
+}
+
+export function logRequestEnd(
+  context: RequestDiagnostics,
+  status: number,
+  extra?: Record<string, unknown>,
+): void {
+  if (!isProduction) {
+    return
+  }
+
+  const durationMs = Date.now() - context.startedAt
+  const fdCount = getFdCount()
+  maybeLogFdHighWatermark()
+  logDiagnostic({
+    event: 'request_end',
+    requestId: context.requestId,
+    method: context.method,
+    pathname: context.pathname,
+    status,
+    durationMs,
+    fdCount,
+    outboundFetchCount: context.outboundFetchCount,
+    outboundFetchErrors: context.outboundFetchErrors,
+    topOutboundHosts: getTopHosts(context.outboundHosts),
+    resourceSummary: getResourceSummary(),
+    ...extra,
+  })
+}
+
+export function logRequestError(
+  context: RequestDiagnostics,
+  error: unknown,
+  extra?: Record<string, unknown>,
+): void {
+  if (!isProduction) {
+    return
+  }
+
+  const durationMs = Date.now() - context.startedAt
+  const fdCount = getFdCount()
+  maybeLogFdHighWatermark()
+
+  const errorDetails =
+    error instanceof Error
+      ? {
+          errorName: error.name,
+          errorMessage: error.message,
+          errorStack: error.stack,
+        }
+      : {
+          errorName: 'UnknownError',
+          errorMessage: String(error),
+          errorStack: undefined,
+        }
+
+  logDiagnostic({
+    event: 'request_error',
+    requestId: context.requestId,
+    method: context.method,
+    pathname: context.pathname,
+    durationMs,
+    fdCount,
+    outboundFetchCount: context.outboundFetchCount,
+    outboundFetchErrors: context.outboundFetchErrors,
+    topOutboundHosts: getTopHosts(context.outboundHosts),
+    resourceSummary: getResourceSummary(),
+    ...errorDetails,
+    ...extra,
+  })
+}
+
+export function logUploadthingProbe(
+  method: string,
+  phase: 'start' | 'end' | 'error',
+  details: Record<string, unknown>,
+): void {
+  if (!isProduction) {
+    return
+  }
+
+  maybeLogFdHighWatermark()
+  logDiagnostic({
+    event: 'uploadthing_probe',
+    method,
+    phase,
+    fdCount: getFdCount(),
+    resourceSummary: getResourceSummary(),
+    ...details,
+  })
+}
diff --git a/src/utils/provider-config.server.ts b/src/utils/provider-config.server.ts
new file mode 100644
index 000000000..f8a157ae6
--- /dev/null
+++ b/src/utils/provider-config.server.ts
@@ -0,0 +1,420 @@
+/**
+ * Provider Configuration Utilities
+ *
+ * Functions for injecting provider-specific configuration into example projects.
+ * This enables 1-click deploys to Cloudflare, Netlify, Railway, etc.
+ */
+
+export type DeployProvider = 'cloudflare' | 'netlify' | 'railway'
+
+interface ProviderConfigResult {
+  files: Record<string, string>
+  devDependencies: Record<string, string>
+}
+
+/**
+ * Check if an example is a TanStack Start app by looking at package.json
+ */
+export function isStartApp(files: Record<string, string>): boolean {
+  const packageJson = files['package.json']
+  if (!packageJson) return false
+
+  try {
+    const pkg = JSON.parse(packageJson)
+    const allDeps = {
+      ...pkg.dependencies,
+      ...pkg.devDependencies,
+    }
+    return (
+      '@tanstack/react-start' in allDeps || '@tanstack/solid-start' in allDeps
+    )
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Get provider-specific configuration files and dependencies
+ */
+export function getProviderConfig(
+  provider: DeployProvider,
+  projectName: string,
+): ProviderConfigResult {
+  switch (provider) {
+    case 'cloudflare':
+      return getCloudflareConfig(projectName)
+    case 'netlify':
+      return getNetlifyConfig()
+    case 'railway':
+      return getRailwayConfig()
+    default:
+      return { files: {}, devDependencies: {} }
+  }
+}
+
+/**
+ * Cloudflare Workers configuration
+ */
+function getCloudflareConfig(projectName: string): ProviderConfigResult {
+  const wranglerConfig = {
+    $schema: 'node_modules/wrangler/config-schema.json',
+    name: sanitizeProjectName(projectName),
+    compatibility_date: '2025-01-01',
+    compatibility_flags: ['nodejs_compat'],
+    main: '@tanstack/react-start/server-entry',
+  }
+
+  return {
+    files: {
+      'wrangler.jsonc': JSON.stringify(wranglerConfig, null, 2),
+    },
+    devDependencies: {
+      '@cloudflare/vite-plugin': '^1.0.0',
+      wrangler: '^4.0.0',
+    },
+  }
+}
+
+/**
+ * Netlify configuration
+ */
+function getNetlifyConfig(): ProviderConfigResult {
+  const netlifyToml = `[build]
+  command = "npm run build"
+  publish = "dist/client"
+
+[dev]
+  command = "npm run dev"
+  port = 3000
+`
+
+  return {
+    files: {
+      'netlify.toml': netlifyToml,
+    },
+    devDependencies: {
+      '@netlify/vite-plugin-tanstack-start': '^1.0.0',
+    },
+  }
+}
+
+/**
+ * Railway configuration (uses Nitro)
+ */
+function getRailwayConfig(): ProviderConfigResult {
+  // Railway uses Nitro for the Node server build, no additional config files needed
+  // Just need the nitro dependency
+  return {
+    files: {},
+    devDependencies: {
+      nitro: 'latest',
+    },
+  }
+}
+
+/**
+ * Sanitize project name for use in configs (lowercase, hyphens only)
+ */
+function sanitizeProjectName(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9-]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
+/**
+ * Apply provider configuration to a set of files
+ *
+ * This merges provider-specific config files and updates package.json
+ * with necessary dependencies and scripts.
+ *
+ * For Start apps: applies full server-side provider config
+ * For non-Start apps (SPAs): applies static site config
+ */
+export function applyProviderConfig(
+  files: Record<string, string>,
+  provider: DeployProvider,
+  projectName: string,
+): Record<string, string> {
+  const isStart = isStartApp(files)
+  const result = { ...files }
+
+  if (isStart) {
+    // Full server-side config for Start apps
+    console.log(
+      '[applyProviderConfig] Start app, applying full provider config',
+    )
+    const config = getProviderConfig(provider, projectName)
+
+    // Add provider-specific config files
+    for (const [path, content] of Object.entries(config.files)) {
+      result[path] = content
+    }
+
+    // Update package.json with dependencies and scripts
+    if (result['package.json']) {
+      result['package.json'] = updatePackageJson(
+        result['package.json'],
+        provider,
+        config.devDependencies,
+      )
+    }
+
+    // Update vite.config.ts with provider plugin
+    const viteConfigPath = findViteConfig(result)
+    if (viteConfigPath) {
+      result[viteConfigPath] = updateViteConfig(
+        result[viteConfigPath],
+        provider,
+      )
+    }
+  } else {
+    // Static site config for SPAs
+    console.log('[applyProviderConfig] SPA, applying static site config')
+    const config = getStaticSiteConfig(provider)
+
+    // Add static site config files
+    for (const [path, content] of Object.entries(config.files)) {
+      result[path] = content
+    }
+  }
+
+  return result
+}
+
+/**
+ * Get static site configuration for non-Start apps (SPAs)
+ */
+function getStaticSiteConfig(provider: DeployProvider): {
+  files: Record<string, string>
+} {
+  switch (provider) {
+    case 'cloudflare': {
+      // Cloudflare Pages config for static sites
+      // Uses _headers and _redirects files for SPA routing
+      const redirects = `/*    /index.html   200`
+      return {
+        files: {
+          'public/_redirects': redirects,
+        },
+      }
+    }
+
+    case 'netlify': {
+      // Netlify static site config
+      const netlifyToml = `[build]
+  command = "npm run build"
+  publish = "dist"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+`
+      return {
+        files: {
+          'netlify.toml': netlifyToml,
+        },
+      }
+    }
+
+    case 'railway': {
+      // Railway can serve static files, needs a simple config
+      // Uses nixpacks which auto-detects Vite projects
+      const nixpacksToml = `[phases.build]
+cmds = ["npm install", "npm run build"]
+
+[phases.setup]
+nixPkgs = ["nodejs_22"]
+
+[start]
+cmd = "npx serve dist -s -l 3000"
+`
+      return {
+        files: {
+          'nixpacks.toml': nixpacksToml,
+        },
+      }
+    }
+
+    default:
+      return { files: {} }
+  }
+}
+
+/**
+ * Find the vite config file in the project
+ */
+function findViteConfig(files: Record<string, string>): string | null {
+  const candidates = ['vite.config.ts', 'vite.config.js', 'vite.config.mts']
+  return candidates.find((path) => path in files) ?? null
+}
+
+/**
+ * Update package.json with provider-specific dependencies and scripts
+ */
+function updatePackageJson(
+  content: string,
+  provider: DeployProvider,
+  devDependencies: Record<string, string>,
+): string {
+  try {
+    const pkg = JSON.parse(content)
+
+    // Add dev dependencies
+    pkg.devDependencies = {
+      ...pkg.devDependencies,
+      ...devDependencies,
+    }
+
+    // Update scripts based on provider
+    pkg.scripts = pkg.scripts ?? {}
+
+    switch (provider) {
+      case 'cloudflare':
+        pkg.scripts.preview = 'vite preview'
+        pkg.scripts.deploy = 'npm run build && wrangler deploy'
+        // Remove node-based start script if present
+        if (pkg.scripts.start?.includes('node')) {
+          delete pkg.scripts.start
+        }
+        break
+
+      case 'netlify':
+        // Netlify handles deployment via their platform
+        // Just ensure build script exists
+        pkg.scripts.build = pkg.scripts.build ?? 'vite build'
+        break
+
+      case 'railway':
+        // Railway needs node-based start script for Nitro
+        pkg.scripts.build = 'vite build'
+        pkg.scripts.start = 'node .output/server/index.mjs'
+        break
+    }
+
+    return JSON.stringify(pkg, null, 2)
+  } catch {
+    return content
+  }
+}
+
+/**
+ * Update vite.config.ts with provider-specific plugin
+ */
+function updateViteConfig(content: string, provider: DeployProvider): string {
+  // This is a best-effort transformation
+  // It adds the necessary import and plugin to the vite config
+
+  let result = content
+
+  switch (provider) {
+    case 'cloudflare': {
+      // Add cloudflare import if not present
+      if (!result.includes('@cloudflare/vite-plugin')) {
+        // Find a good place to add the import (after other imports)
+        const lastImportIndex = findLastImportIndex(result)
+        const importStatement = `import { cloudflare } from '@cloudflare/vite-plugin'\n`
+        result =
+          result.slice(0, lastImportIndex) +
+          importStatement +
+          result.slice(lastImportIndex)
+      }
+
+      // Add cloudflare() to plugins array
+      result = addPluginToConfig(
+        result,
+        `cloudflare({ viteEnvironment: { name: 'ssr' } })`,
+      )
+      break
+    }
+
+    case 'netlify': {
+      // Add netlify import if not present
+      if (!result.includes('@netlify/vite-plugin-tanstack-start')) {
+        const lastImportIndex = findLastImportIndex(result)
+        const importStatement = `import netlify from '@netlify/vite-plugin-tanstack-start'\n`
+        result =
+          result.slice(0, lastImportIndex) +
+          importStatement +
+          result.slice(lastImportIndex)
+      }
+
+      // Add netlify() to plugins array
+      result = addPluginToConfig(result, 'netlify()')
+      break
+    }
+
+    case 'railway': {
+      // Add nitro import if not present
+      if (!result.includes('nitro/vite')) {
+        const lastImportIndex = findLastImportIndex(result)
+        const importStatement = `import { nitro } from 'nitro/vite'\n`
+        result =
+          result.slice(0, lastImportIndex) +
+          importStatement +
+          result.slice(lastImportIndex)
+      }
+
+      // Add nitro() to plugins array
+      result = addPluginToConfig(result, 'nitro()')
+      break
+    }
+  }
+
+  return result
+}
+
+/**
+ * Find the index after the last import statement
+ */
+function findLastImportIndex(content: string): number {
+  const importRegex = /^import\s.+$/gm
+  let lastIndex = 0
+  let match
+
+  while ((match = importRegex.exec(content)) !== null) {
+    lastIndex = match.index + match[0].length + 1
+  }
+
+  return lastIndex || 0
+}
+
+/**
+ * Add a plugin to the plugins array in vite config
+ */
+function addPluginToConfig(content: string, pluginCall: string): string {
+  // Look for plugins: [ pattern
+  const pluginsRegex = /plugins\s*:\s*\[/
+
+  const match = pluginsRegex.exec(content)
+  if (!match) {
+    return content
+  }
+
+  // Insert the plugin after the opening bracket
+  const insertIndex = match.index + match[0].length
+  return (
+    content.slice(0, insertIndex) +
+    `\n    ${pluginCall},` +
+    content.slice(insertIndex)
+  )
+}
+
+/**
+ * Generate a description for the deployed repo
+ */
+export function generateExampleDescription(
+  libraryName: string,
+  exampleName: string,
+  provider: DeployProvider,
+): string {
+  const providerNames: Record<DeployProvider, string> = {
+    cloudflare: 'Cloudflare',
+    netlify: 'Netlify',
+    railway: 'Railway',
+  }
+
+  return `${libraryName} example: ${exampleName} (configured for ${providerNames[provider]})`
+}
diff --git a/src/utils/publicImageDimensions.ts b/src/utils/publicImageDimensions.ts
new file mode 100644
index 000000000..1274143c9
--- /dev/null
+++ b/src/utils/publicImageDimensions.ts
@@ -0,0 +1,69 @@
+type ImageDimensions = {
+  height: number
+  width: number
+}
+
+const publicImageDimensions: Record<string, ImageDimensions> = {
+  '/blog-assets/react-server-components/header.jpg': {
+    height: 701,
+    width: 1200,
+  },
+  '/blog-assets/tanstack-router-signal-graph/bundle-size-history-react.png': {
+    height: 904,
+    width: 2116,
+  },
+  '/blog-assets/tanstack-router-signal-graph/bundle-size-history-solid.png': {
+    height: 904,
+    width: 2116,
+  },
+  '/blog-assets/tanstack-router-signal-graph/bundle-size-history-vue.png': {
+    height: 904,
+    width: 2116,
+  },
+  '/blog-assets/tanstack-router-signal-graph/client-side-nav-react.png': {
+    height: 1096,
+    width: 2688,
+  },
+  '/blog-assets/tanstack-router-signal-graph/client-side-nav-solid.png': {
+    height: 1096,
+    width: 2688,
+  },
+  '/blog-assets/tanstack-router-signal-graph/client-side-nav-vue.png': {
+    height: 1096,
+    width: 2688,
+  },
+  '/blog-assets/tanstack-router-signal-graph/header.jpg': {
+    height: 1024,
+    width: 1536,
+  },
+  '/blog-assets/tanstack-router-signal-graph/store-updates-history-react.png': {
+    height: 828,
+    width: 2122,
+  },
+  '/blog-assets/tanstack-router-signal-graph/store-updates-history-solid.png': {
+    height: 828,
+    width: 2122,
+  },
+  '/blog-assets/tanstack-router-signal-graph/store-updates-history-vue.png': {
+    height: 828,
+    width: 2122,
+  },
+  '/blog-assets/who-owns-the-tree/header.jpg': {
+    height: 801,
+    width: 1200,
+  },
+}
+
+export function getPublicImageDimensions(src: string) {
+  const pathname = getPathname(src)
+
+  return pathname ? publicImageDimensions[pathname] : undefined
+}
+
+function getPathname(src: string) {
+  try {
+    return new URL(src, 'https://tanstack.com').pathname
+  } catch {
+    return undefined
+  }
+}
diff --git a/src/utils/rateLimit.server.ts b/src/utils/rateLimit.server.ts
new file mode 100644
index 000000000..5654bdee4
--- /dev/null
+++ b/src/utils/rateLimit.server.ts
@@ -0,0 +1,196 @@
+/**
+ * Simple IP-based rate limiting for public API endpoints.
+ * Uses the existing MCP rate limit infrastructure.
+ */
+
+import { db } from '~/db/client'
+import { mcpRateLimits } from '~/db/schema'
+import { and, eq, sql } from 'drizzle-orm'
+import { checkRateLimit, getClientIp } from '~/mcp/auth.server'
+
+export interface RateLimitOptions {
+  limitPerMinute: number
+  keyPrefix?: string // Namespace to separate different endpoints
+}
+
+export interface RateLimitResult {
+  allowed: boolean
+  remaining: number
+  resetAt: Date
+  headers: Headers
+}
+
+/**
+ * Check rate limit for a request based on client IP.
+ * Returns result with pre-built headers for the response.
+ */
+export async function checkIpRateLimit(
+  request: Request,
+  options: RateLimitOptions,
+): Promise<RateLimitResult> {
+  const ip = getClientIp(request)
+  const identifier = options.keyPrefix ? `${options.keyPrefix}:${ip}` : ip
+
+  const result = await checkRateLimit(identifier, 'ip', options.limitPerMinute)
+
+  const headers = new Headers()
+  headers.set('X-RateLimit-Limit', options.limitPerMinute.toString())
+  headers.set('X-RateLimit-Remaining', result.remaining.toString())
+  headers.set(
+    'X-RateLimit-Reset',
+    Math.floor(result.resetAt.getTime() / 1000).toString(),
+  )
+
+  if (!result.allowed) {
+    headers.set(
+      'Retry-After',
+      Math.ceil((result.resetAt.getTime() - Date.now()) / 1000).toString(),
+    )
+  }
+
+  return {
+    allowed: result.allowed,
+    remaining: result.remaining,
+    resetAt: result.resetAt,
+    headers,
+  }
+}
+
+/**
+ * Create a rate-limited error response.
+ */
+export function rateLimitedResponse(result: RateLimitResult): Response {
+  return new Response(
+    JSON.stringify({
+      error: 'Rate limit exceeded',
+      retryAfter: Math.ceil((result.resetAt.getTime() - Date.now()) / 1000),
+    }),
+    {
+      status: 429,
+      headers: {
+        'Cache-Control': 'no-store',
+        'Content-Type': 'application/json',
+        ...Object.fromEntries(result.headers.entries()),
+      },
+    },
+  )
+}
+
+export interface WindowRateLimitOptions {
+  keyPrefix?: string
+  limit: number
+  windowMs: number
+}
+
+export interface WindowRateLimitStatus {
+  limit: number
+  remaining: number
+  resetAt: Date
+}
+
+export async function getIpWindowRateLimitStatus(
+  request: Request,
+  options: WindowRateLimitOptions,
+): Promise<WindowRateLimitStatus> {
+  const ip = getClientIp(request)
+  const identifier = options.keyPrefix ? `${options.keyPrefix}:${ip}` : ip
+  const now = Date.now()
+  const windowStart = new Date(
+    Math.floor(now / options.windowMs) * options.windowMs,
+  )
+  const resetAt = new Date(windowStart.getTime() + options.windowMs)
+
+  const [existingRecord] = await db
+    .select({ requestCount: mcpRateLimits.requestCount })
+    .from(mcpRateLimits)
+    .where(
+      and(
+        eq(mcpRateLimits.identifier, identifier),
+        eq(mcpRateLimits.windowStart, windowStart),
+      ),
+    )
+    .limit(1)
+
+  const currentCount = existingRecord?.requestCount ?? 0
+
+  return {
+    limit: options.limit,
+    remaining: Math.max(0, options.limit - currentCount),
+    resetAt,
+  }
+}
+
+export async function checkIpWindowRateLimit(
+  request: Request,
+  options: WindowRateLimitOptions,
+): Promise<RateLimitResult> {
+  const ip = getClientIp(request)
+  const identifier = options.keyPrefix ? `${options.keyPrefix}:${ip}` : ip
+  const now = Date.now()
+  const windowStart = new Date(
+    Math.floor(now / options.windowMs) * options.windowMs,
+  )
+  const resetAt = new Date(windowStart.getTime() + options.windowMs)
+
+  const result = await db
+    .insert(mcpRateLimits)
+    .values({
+      identifier,
+      identifierType: 'ip',
+      requestCount: 1,
+      windowStart,
+    })
+    .onConflictDoUpdate({
+      target: [mcpRateLimits.identifier, mcpRateLimits.windowStart],
+      set: {
+        requestCount: sql`${mcpRateLimits.requestCount} + 1`,
+      },
+    })
+    .returning({ requestCount: mcpRateLimits.requestCount })
+
+  const currentCount = result[0]?.requestCount ?? 1
+  const remaining = Math.max(0, options.limit - currentCount)
+  const allowed = currentCount <= options.limit
+
+  const headers = new Headers()
+  headers.set('X-RateLimit-Limit', options.limit.toString())
+  headers.set('X-RateLimit-Remaining', remaining.toString())
+  headers.set(
+    'X-RateLimit-Reset',
+    Math.floor(resetAt.getTime() / 1000).toString(),
+  )
+
+  if (!allowed) {
+    headers.set(
+      'Retry-After',
+      Math.ceil((resetAt.getTime() - Date.now()) / 1000).toString(),
+    )
+  }
+
+  return {
+    allowed,
+    headers,
+    remaining,
+    resetAt,
+  }
+}
+
+// Preset rate limits for different endpoint types
+export const RATE_LIMITS = {
+  // Application starter prompt generation: 12 requests/minute
+  applicationStarter: { limitPerMinute: 12, keyPrefix: 'application-starter' },
+  // Anonymous starter generations before login is required
+  applicationStarterAnonymousDaily: {
+    keyPrefix: 'application-starter-anon-day',
+    limit: 1_000_000,
+    windowMs: 24 * 60 * 60 * 1000,
+  },
+  // Builder remote loading: 30 requests/minute (generous for UX)
+  builderRemote: { limitPerMinute: 30, keyPrefix: 'builder-remote' },
+  // Builder compile: 60 requests/minute
+  builderCompile: { limitPerMinute: 60, keyPrefix: 'builder-compile' },
+  // Deploy endpoint: 10 requests/minute (more sensitive)
+  deploy: { limitPerMinute: 10, keyPrefix: 'deploy' },
+  // CLI auth ticket creation: public endpoint polled by local tools
+  cliAuthTicket: { limitPerMinute: 20, keyPrefix: 'cli-auth-ticket' },
+} as const
diff --git a/src/utils/redirects.ts b/src/utils/redirects.ts
new file mode 100644
index 000000000..af8a3ad82
--- /dev/null
+++ b/src/utils/redirects.ts
@@ -0,0 +1,65 @@
+export type RedirectManifestEntry = {
+  from: string
+  to: string
+  source: string
+}
+
+export function normalizeRedirectFrom(value: unknown) {
+  if (!Array.isArray(value)) {
+    return undefined
+  }
+
+  const normalizedPaths = Array.from(
+    new Set(
+      value.flatMap((item) => {
+        if (typeof item !== 'string') {
+          return []
+        }
+
+        const trimmedItem = item.trim()
+
+        if (!trimmedItem) {
+          return []
+        }
+
+        return [trimmedItem.startsWith('/') ? trimmedItem : `/${trimmedItem}`]
+      }),
+    ),
+  )
+
+  return normalizedPaths.length > 0 ? normalizedPaths : undefined
+}
+
+export function buildRedirectManifest(
+  entries: Array<RedirectManifestEntry>,
+  opts: {
+    label: string
+    formatTarget?: (target: string) => string
+  },
+) {
+  const manifest: Record<string, string> = {}
+  const owners = new Map<string, { to: string; source: string }>()
+  const formatTarget = opts.formatTarget ?? ((target: string) => `/${target}`)
+
+  for (const entry of entries) {
+    const existingOwner = owners.get(entry.from)
+
+    if (
+      existingOwner &&
+      (existingOwner.to !== entry.to || existingOwner.source !== entry.source)
+    ) {
+      throw new Error(
+        [
+          `Duplicate redirect_from entry in ${opts.label}: /${entry.from}`,
+          `- ${existingOwner.source} -> ${formatTarget(existingOwner.to)}`,
+          `- ${entry.source} -> ${formatTarget(entry.to)}`,
+        ].join('\n'),
+      )
+    }
+
+    owners.set(entry.from, { to: entry.to, source: entry.source })
+    manifest[entry.from] = entry.to
+  }
+
+  return manifest
+}
diff --git a/src/utils/repo-path.ts b/src/utils/repo-path.ts
new file mode 100644
index 000000000..22330d275
--- /dev/null
+++ b/src/utils/repo-path.ts
@@ -0,0 +1,52 @@
+export const MAX_REPO_PATH_LENGTH = 512
+
+const REPO_PATH_SEGMENT_PATTERN = /^[a-zA-Z0-9._$+-]+$/
+
+export function isValidRepoPath(path: string) {
+  if (path === '') {
+    return true
+  }
+
+  if (path.length > MAX_REPO_PATH_LENGTH) {
+    return false
+  }
+
+  if (
+    path.startsWith('/') ||
+    path.endsWith('/') ||
+    path.includes('//') ||
+    path.includes('..')
+  ) {
+    return false
+  }
+
+  return path.split('/').every((segment) => {
+    return REPO_PATH_SEGMENT_PATTERN.test(segment)
+  })
+}
+
+export function joinRepoPath(basePath: string, childPath: string) {
+  const normalizedBasePath = trimRepoPath(basePath)
+  const normalizedChildPath = trimRepoPath(childPath)
+
+  if (!normalizedBasePath) {
+    return normalizedChildPath
+  }
+
+  if (!normalizedChildPath) {
+    return normalizedBasePath
+  }
+
+  if (
+    normalizedChildPath === normalizedBasePath ||
+    normalizedChildPath.startsWith(`${normalizedBasePath}/`)
+  ) {
+    return normalizedChildPath
+  }
+
+  return `${normalizedBasePath}/${normalizedChildPath}`
+}
+
+function trimRepoPath(path: string) {
+  return path.replace(/^\/+|\/+$/g, '')
+}
diff --git a/src/utils/request.server.ts b/src/utils/request.server.ts
new file mode 100644
index 000000000..47be14524
--- /dev/null
+++ b/src/utils/request.server.ts
@@ -0,0 +1,83 @@
+/**
+ * Request utilities for extracting client information.
+ */
+
+/**
+ * Extract client IP address from request headers.
+ * Prefers Cloudflare's trusted header, then falls back to common proxy headers.
+ *
+ * @param request - The incoming request
+ * @param fallback - Value to return if no IP found (default: undefined)
+ */
+export function getClientIp(request: Request): string | undefined
+export function getClientIp<T extends string>(
+  request: Request,
+  fallback: T,
+): string
+export function getClientIp(
+  request: Request,
+  fallback?: string,
+): string | undefined {
+  const cfConnectingIp = normalizeIpHeader(
+    request.headers.get('cf-connecting-ip'),
+  )
+  if (cfConnectingIp) {
+    return cfConnectingIp
+  }
+
+  const realIp = normalizeIpHeader(request.headers.get('x-real-ip'))
+  if (realIp) {
+    return realIp
+  }
+
+  const forwardedFor = request.headers.get('x-forwarded-for')
+  if (forwardedFor) {
+    const forwardedIp = normalizeIpHeader(forwardedFor.split(',')[0])
+    if (forwardedIp) {
+      return forwardedIp
+    }
+  }
+
+  return fallback
+}
+
+/**
+ * Extract user agent from request headers.
+ */
+export function getUserAgent(request: Request): string | undefined {
+  return request.headers.get('user-agent') || undefined
+}
+
+function normalizeIpHeader(value: string | null | undefined) {
+  const ip = value?.trim()
+
+  if (!ip || ip.length > 45) {
+    return undefined
+  }
+
+  if (isValidIpv4(ip) || isLikelyIpv6(ip)) {
+    return ip
+  }
+
+  return undefined
+}
+
+function isValidIpv4(value: string) {
+  const parts = value.split('.')
+
+  return (
+    parts.length === 4 &&
+    parts.every((part) => {
+      if (!/^\d{1,3}$/.test(part)) {
+        return false
+      }
+
+      const number = Number(part)
+      return number >= 0 && number <= 255 && String(number) === part
+    })
+  )
+}
+
+function isLikelyIpv6(value: string) {
+  return /^[0-9a-f:]+$/i.test(value) && value.includes(':')
+}
diff --git a/src/utils/roles.functions.ts b/src/utils/roles.functions.ts
index 9f7f05411..dc7141ab4 100644
--- a/src/utils/roles.functions.ts
+++ b/src/utils/roles.functions.ts
@@ -14,7 +14,7 @@ const capabilityPicklist = v.picklist(
 )
 
 export const listRoles = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       nameFilter: v.optional(v.string()),
       capabilityFilter: v.optional(v.array(capabilityPicklist)),
@@ -59,7 +59,7 @@ export const listRoles = createServerFn({ method: 'POST' })
   })
 
 export const getRole = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ roleId: v.pipe(v.string(), v.uuid()) }))
+  .validator(v.object({ roleId: v.pipe(v.string(), v.uuid()) }))
   .handler(async ({ data }) => {
     await requireAdmin()
 
@@ -82,7 +82,7 @@ export const getRole = createServerFn({ method: 'POST' })
   })
 
 export const createRole = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       name: v.string(),
       description: v.optional(v.string()),
@@ -127,7 +127,7 @@ export const createRole = createServerFn({ method: 'POST' })
   })
 
 export const updateRole = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       roleId: v.pipe(v.string(), v.uuid()),
       name: v.optional(v.string()),
@@ -197,7 +197,7 @@ export const updateRole = createServerFn({ method: 'POST' })
   })
 
 export const deleteRole = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ roleId: v.pipe(v.string(), v.uuid()) }))
+  .validator(v.object({ roleId: v.pipe(v.string(), v.uuid()) }))
   .handler(async ({ data }) => {
     const { currentUser } = await requireAdmin()
 
@@ -234,9 +234,7 @@ export const deleteRole = createServerFn({ method: 'POST' })
   })
 
 export const getUserRoles = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({ userId: v.optional(v.pipe(v.string(), v.uuid())) }),
-  )
+  .validator(v.object({ userId: v.optional(v.pipe(v.string(), v.uuid())) }))
   .handler(async ({ data }) => {
     await requireAdmin()
 
@@ -281,7 +279,7 @@ export const getUserRoles = createServerFn({ method: 'POST' })
   })
 
 export const assignRolesToUser = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       userId: v.pipe(v.string(), v.uuid()),
       roleIds: v.array(v.pipe(v.string(), v.uuid())),
@@ -372,9 +370,7 @@ export const assignRolesToUser = createServerFn({ method: 'POST' })
   })
 
 export const getUserEffectiveCapabilities = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({ userId: v.optional(v.pipe(v.string(), v.uuid())) }),
-  )
+  .validator(v.object({ userId: v.optional(v.pipe(v.string(), v.uuid())) }))
   .handler(async ({ data }) => {
     await requireAdmin()
 
@@ -386,7 +382,7 @@ export const getUserEffectiveCapabilities = createServerFn({ method: 'POST' })
   })
 
 export const getBulkUserRoles = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ userIds: v.array(v.pipe(v.string(), v.uuid())) }))
+  .validator(v.object({ userIds: v.array(v.pipe(v.string(), v.uuid())) }))
   .handler(async ({ data }) => {
     await requireAdmin()
 
@@ -446,7 +442,7 @@ export const getBulkUserRoles = createServerFn({ method: 'POST' })
   })
 
 export const getBulkEffectiveCapabilities = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ userIds: v.array(v.pipe(v.string(), v.uuid())) }))
+  .validator(v.object({ userIds: v.array(v.pipe(v.string(), v.uuid())) }))
   .handler(async ({ data }) => {
     await requireAdmin()
 
@@ -462,7 +458,7 @@ export const getBulkEffectiveCapabilities = createServerFn({ method: 'POST' })
   })
 
 export const getUsersWithRole = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ roleId: v.pipe(v.string(), v.uuid()) }))
+  .validator(v.object({ roleId: v.pipe(v.string(), v.uuid()) }))
   .handler(async ({ data }) => {
     await requireAdmin()
 
@@ -491,7 +487,7 @@ export const getUsersWithRole = createServerFn({ method: 'POST' })
   })
 
 export const removeUsersFromRole = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       roleId: v.pipe(v.string(), v.uuid()),
       userIds: v.array(v.pipe(v.string(), v.uuid())),
@@ -536,7 +532,7 @@ export const removeUsersFromRole = createServerFn({ method: 'POST' })
   })
 
 export const bulkAssignRolesToUsers = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       userIds: v.array(v.pipe(v.string(), v.uuid())),
       roleIds: v.array(v.pipe(v.string(), v.uuid())),
@@ -607,7 +603,7 @@ export const bulkAssignRolesToUsers = createServerFn({ method: 'POST' })
   })
 
 export const sendTestModeratorEmail = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ capability: capabilityPicklist }))
+  .validator(v.object({ capability: capabilityPicklist }))
   .handler(async ({ data }) => {
     await requireAdmin()
     return sendTestEmail(data.capability)
diff --git a/src/utils/route-encoding.ts b/src/utils/route-encoding.ts
new file mode 100644
index 000000000..49365b8c1
--- /dev/null
+++ b/src/utils/route-encoding.ts
@@ -0,0 +1,36 @@
+const HTML_ID_SEGMENT_PATTERN = /[^a-zA-Z0-9_-]+/g
+
+export function encodePackageNameSlug(packageName: string) {
+  return encodeURIComponent(packageName)
+}
+
+export function decodePackageNameSlug(slug: string) {
+  let next = slug
+
+  for (let i = 0; i < 2; i++) {
+    try {
+      const decoded = decodeURIComponent(next)
+      if (decoded === next) {
+        return decoded
+      }
+      next = decoded
+    } catch {
+      return slug
+    }
+  }
+
+  return next
+}
+
+export function getRowFieldId(
+  scope: string,
+  rowId: string | number,
+  field: string,
+) {
+  return [scope, rowId, field].map(sanitizeHtmlIdSegment).join('-')
+}
+
+function sanitizeHtmlIdSegment(value: string | number) {
+  const segment = String(value).trim().replace(HTML_ID_SEGMENT_PATTERN, '-')
+  return segment.replace(/^-+|-+$/g, '') || 'item'
+}
diff --git a/src/utils/sandbox.ts b/src/utils/sandbox.ts
index c1c746575..8fd0d5b4f 100644
--- a/src/utils/sandbox.ts
+++ b/src/utils/sandbox.ts
@@ -4,7 +4,7 @@ export const getExampleStartingPath = (
   framework: Framework,
   libraryId?: string,
 ) => {
-  if (libraryId && ['start', 'router'].includes(libraryId)) {
+  if (libraryId === 'start') {
     return 'src/routes/__root.tsx'
   }
 
@@ -22,7 +22,7 @@ export function getExampleStartingFileName(
       ? 'app.component'
       : ['svelte', 'vue'].includes(framework)
         ? 'App'
-        : ['form', 'query', 'pacer'].includes(libraryId!)
+        : ['form', 'query', 'pacer', 'hotkeys'].includes(libraryId!)
           ? 'index'
           : 'main'
 
diff --git a/src/utils/schemas.ts b/src/utils/schemas.ts
index b9aeedc90..a88bb104f 100644
--- a/src/utils/schemas.ts
+++ b/src/utils/schemas.ts
@@ -8,30 +8,73 @@ import {
   OAUTH_PROVIDERS,
   DOC_FEEDBACK_TYPES,
   DOC_FEEDBACK_STATUSES,
-  BANNER_SCOPES,
-  BANNER_STYLES,
-  ENTRY_TYPES,
   SHOWCASE_STATUSES,
   SHOWCASE_USE_CASES,
   AUDIT_ACTIONS,
   RELEASE_LEVELS,
-  FEED_VIEW_MODES,
 } from '~/db/types'
-import { libraryIds } from '~/libraries'
+import { libraryIds } from '~/libraries/ids'
 
 // Valibot schemas derived from constants
 export const capabilitySchema = v.picklist([...CAPABILITIES])
 export const oauthProviderSchema = v.picklist([...OAUTH_PROVIDERS])
 export const docFeedbackTypeSchema = v.picklist([...DOC_FEEDBACK_TYPES])
 export const docFeedbackStatusSchema = v.picklist([...DOC_FEEDBACK_STATUSES])
-export const bannerScopeSchema = v.picklist([...BANNER_SCOPES])
-export const bannerStyleSchema = v.picklist([...BANNER_STYLES])
-export const entryTypeSchema = v.picklist([...ENTRY_TYPES])
 export const showcaseStatusSchema = v.picklist([...SHOWCASE_STATUSES])
 export const showcaseUseCaseSchema = v.picklist([...SHOWCASE_USE_CASES])
 export const auditActionSchema = v.picklist([...AUDIT_ACTIONS])
 export const releaseLevelSchema = v.picklist([...RELEASE_LEVELS])
-export const feedViewModeSchema = v.picklist([...FEED_VIEW_MODES])
 
 // Library ID schema - derived from libraries config
 export const libraryIdSchema = v.picklist([...libraryIds])
+
+const npmPackageNamePattern =
+  /^(?:@[a-z0-9][a-z0-9._-]*\/)?[a-z0-9][a-z0-9._-]*$/i
+
+export const npmPackageNameSchema = v.pipe(
+  v.string(),
+  v.minLength(1),
+  v.maxLength(214),
+  v.regex(npmPackageNamePattern, 'Invalid npm package name'),
+)
+
+export function isNpmPackageName(value: string) {
+  return value.length <= 214 && npmPackageNamePattern.test(value)
+}
+
+export const pageIndexSchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(0),
+  v.maxValue(10000),
+)
+
+export const pageNumberSchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(1),
+  v.maxValue(10000),
+)
+
+export const pageSizeSchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(1),
+  v.maxValue(100),
+)
+
+export const isoDateSchema = v.pipe(v.string(), v.isoDate())
+
+export const chartHeightSchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(240),
+  v.maxValue(1200),
+)
+
+export const chartWidthSchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(320),
+  v.maxValue(2400),
+)
diff --git a/src/utils/searchRecords.ts b/src/utils/searchRecords.ts
new file mode 100644
index 000000000..497da1487
--- /dev/null
+++ b/src/utils/searchRecords.ts
@@ -0,0 +1,43 @@
+export type SearchHitFrameworkContext = {
+  url: string
+  framework?: string | null
+  routeStyle?: string | null
+}
+
+function getPathname(url: string) {
+  try {
+    return new URL(url, 'https://tanstack.com').pathname
+  } catch {
+    return url.split('#')[0]?.split('?')[0] ?? url
+  }
+}
+
+export function hasFrameworkPath(url: string) {
+  const segments = getPathname(url).split('/').filter(Boolean)
+
+  for (let index = 0; index < segments.length - 2; index++) {
+    if (
+      segments[index] === 'docs' &&
+      segments[index + 1] === 'framework' &&
+      segments[index + 2]
+    ) {
+      return true
+    }
+  }
+
+  return false
+}
+
+export function shouldPersistFrameworkForHit(hit: SearchHitFrameworkContext) {
+  const framework = hit.framework?.trim().toLowerCase()
+
+  if (!framework || framework === 'all') {
+    return false
+  }
+
+  if (hit.routeStyle === 'framework-path') {
+    return false
+  }
+
+  return !hasFrameworkPath(hit.url)
+}
diff --git a/src/utils/seo.ts b/src/utils/seo.ts
index 394403535..87e8e28ba 100644
--- a/src/utils/seo.ts
+++ b/src/utils/seo.ts
@@ -1,16 +1,63 @@
+import { SITE_URL } from '~/utils/site'
+
+const NON_INDEXABLE_PATH_PREFIXES = ['/account', '/admin', '/login'] as const
+
+function trimTrailingSlash(value: string) {
+  return value.replace(/\/$/, '')
+}
+
+function normalizePath(path: string) {
+  if (!path || path === '/') {
+    return '/'
+  }
+
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`
+
+  return normalizedPath.replace(/\/$/, '')
+}
+
+export function getCanonicalPath(path: string) {
+  const normalizedPath = normalizePath(path)
+
+  if (
+    NON_INDEXABLE_PATH_PREFIXES.some(
+      (prefix) =>
+        normalizedPath === prefix || normalizedPath.startsWith(`${prefix}/`),
+    )
+  ) {
+    return null
+  }
+
+  return normalizedPath
+}
+
+export function shouldIndexPath(path: string) {
+  return getCanonicalPath(path) !== null
+}
+
+export function canonicalUrl(path: string, search?: string) {
+  const origin = trimTrailingSlash(SITE_URL)
+
+  const normalizedSearch = search && search !== '?' ? search : ''
+
+  return `${origin}${normalizePath(path)}${normalizedSearch}`
+}
+
+type SeoOptions = {
+  title: string
+  description?: string
+  image?: string
+  keywords?: string
+  noindex?: boolean
+}
+
 export const seo = ({
   title,
   description,
   keywords,
   image,
   noindex,
-}: {
-  title: string
-  description?: string
-  image?: string
-  keywords?: string
-  noindex?: boolean
-}) => {
+}: SeoOptions) => {
   const tags = [
     { title },
     { name: 'description', content: description },
diff --git a/src/utils/shop.functions.ts b/src/utils/shop.functions.ts
new file mode 100644
index 000000000..b9f637731
--- /dev/null
+++ b/src/utils/shop.functions.ts
@@ -0,0 +1,503 @@
+import { createServerFn } from '@tanstack/react-start'
+import {
+  deleteCookie,
+  getCookie,
+  setCookie,
+  setResponseHeaders,
+} from '@tanstack/react-start/server'
+import * as v from 'valibot'
+import { shopifyServerFetch } from '~/server/shopify/fetch'
+import {
+  shopifyCartLineIdSchema,
+  shopifyProductVariantIdSchema,
+} from '~/utils/shopify-id'
+import { shopifyHandleSchema } from '~/utils/shopify-handle'
+import {
+  CART_CREATE_MUTATION,
+  CART_DISCOUNT_CODES_UPDATE_MUTATION,
+  CART_LINES_ADD_MUTATION,
+  CART_LINES_REMOVE_MUTATION,
+  CART_LINES_UPDATE_MUTATION,
+  CART_QUERY,
+  COLLECTION_QUERY,
+  COLLECTIONS_QUERY,
+  PAGE_QUERY,
+  PRODUCTS_QUERY,
+  PRODUCT_QUERY,
+  SEARCH_QUERY,
+  SHOP_QUERY,
+  type CartCreateResult,
+  type CartDetail,
+  type CartDiscountCodesUpdateResult,
+  type CartLinesAddResult,
+  type CartLinesRemoveResult,
+  type CartLinesUpdateResult,
+  type CartQueryResult,
+  type CartUserError,
+  type CollectionDetail,
+  type CollectionListItem,
+  type CollectionQueryResult,
+  type CollectionsQueryResult,
+  type PageDetail,
+  type PageQueryResult,
+  type ProductDetail,
+  type ProductListPage,
+  type ProductQueryResult,
+  type ProductsQueryResult,
+  type ProductsQueryVariables,
+  type SearchQueryResult,
+  type ShopQueryResult,
+  SHOP_POLICIES_QUERY,
+  type ShopPoliciesQueryResult,
+  type ShopPolicy,
+  flattenPolicies,
+  type PolicySummary,
+} from '~/utils/shopify-queries'
+
+const CART_COOKIE_NAME = 'tanstack_cart_id'
+const CART_COOKIE_OPTIONS = {
+  path: '/',
+  maxAge: 60 * 60 * 24 * 365, // 1 year
+  sameSite: 'lax' as const,
+  httpOnly: true,
+  secure: process.env.NODE_ENV === 'production',
+}
+
+class CartUserErrorsError extends Error {
+  constructor(public readonly userErrors: Array<CartUserError>) {
+    super(userErrors.map((e) => e.message).join('\n'))
+    this.name = 'CartUserErrorsError'
+  }
+}
+
+function throwIfUserErrors(errs: Array<CartUserError>) {
+  if (errs.length > 0) throw new CartUserErrorsError(errs)
+}
+
+/**
+ * Edge-cache product browse responses for a few minutes. Catalog data
+ * doesn't change often and webhook-based revalidation can refine this later.
+ */
+function setBrowseCacheHeaders() {
+  setResponseHeaders(
+    new Headers({
+      'Cache-Control': 'public, max-age=0, must-revalidate',
+      'Cloudflare-CDN-Cache-Control':
+        'public, max-age=300, stale-while-revalidate=600',
+    }),
+  )
+}
+
+export const getShop = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<ShopQueryResult['shop']> => {
+    setBrowseCacheHeaders()
+    const data = await shopifyServerFetch<ShopQueryResult>({
+      query: SHOP_QUERY,
+    })
+    return data.shop
+  },
+)
+
+const productSortKeys = [
+  'BEST_SELLING',
+  'CREATED_AT',
+  'ID',
+  'PRICE',
+  'PRODUCT_TYPE',
+  'RELEVANCE',
+  'TITLE',
+  'UPDATED_AT',
+  'VENDOR',
+] as const
+const shopCursorSchema = v.pipe(v.string(), v.maxLength(512))
+const shopPageSizeSchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(1),
+  v.maxValue(48),
+)
+const shopSearchQuerySchema = v.pipe(
+  v.string(),
+  v.minLength(1),
+  v.maxLength(120),
+)
+const discountCodeSchema = v.pipe(v.string(), v.minLength(1), v.maxLength(100))
+const cartQuantitySchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(1),
+  v.maxValue(99),
+)
+const cartUpdateQuantitySchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(0),
+  v.maxValue(99),
+)
+
+export const getProducts = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      first: v.optional(shopPageSizeSchema, 24),
+      after: v.optional(v.nullable(shopCursorSchema)),
+      sortKey: v.optional(v.picklist(productSortKeys)),
+      reverse: v.optional(v.boolean()),
+    }),
+  )
+  .handler(async ({ data }): Promise<ProductListPage> => {
+    setBrowseCacheHeaders()
+    const result = await shopifyServerFetch<
+      ProductsQueryResult,
+      ProductsQueryVariables
+    >({
+      query: PRODUCTS_QUERY,
+      variables: {
+        first: data.first,
+        after: data.after ?? null,
+        sortKey: data.sortKey ?? null,
+        reverse: data.reverse ?? null,
+      },
+    })
+    return result.products
+  })
+
+export const getCollections = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<Array<CollectionListItem>> => {
+    setBrowseCacheHeaders()
+    const result = await shopifyServerFetch<
+      CollectionsQueryResult,
+      { first: number }
+    >({
+      query: COLLECTIONS_QUERY,
+      variables: { first: 50 },
+    })
+    return result.collections.nodes
+  },
+)
+
+export const getProduct = createServerFn({ method: 'POST' })
+  .validator(v.object({ handle: shopifyHandleSchema }))
+  .handler(async ({ data }): Promise<ProductDetail | null> => {
+    setBrowseCacheHeaders()
+    const result = await shopifyServerFetch<
+      ProductQueryResult,
+      { handle: string }
+    >({
+      query: PRODUCT_QUERY,
+      variables: { handle: data.handle },
+    })
+    return result.product
+  })
+
+const collectionSortKeys = [
+  'BEST_SELLING',
+  'COLLECTION_DEFAULT',
+  'CREATED',
+  'ID',
+  'MANUAL',
+  'PRICE',
+  'RELEVANCE',
+  'TITLE',
+] as const
+
+export const getCollection = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      handle: shopifyHandleSchema,
+      first: v.optional(shopPageSizeSchema, 24),
+      after: v.optional(v.nullable(shopCursorSchema)),
+      sortKey: v.optional(v.picklist(collectionSortKeys)),
+      reverse: v.optional(v.boolean()),
+    }),
+  )
+  .handler(async ({ data }): Promise<CollectionDetail | null> => {
+    setBrowseCacheHeaders()
+    const result = await shopifyServerFetch<
+      CollectionQueryResult,
+      {
+        handle: string
+        first: number
+        after: string | null
+        sortKey: (typeof collectionSortKeys)[number] | null
+        reverse: boolean | null
+      }
+    >({
+      query: COLLECTION_QUERY,
+      variables: {
+        handle: data.handle,
+        first: data.first,
+        after: data.after ?? null,
+        sortKey: data.sortKey ?? null,
+        reverse: data.reverse ?? null,
+      },
+    })
+    return result.collection
+  })
+
+export const getPage = createServerFn({ method: 'POST' })
+  .validator(v.object({ handle: shopifyHandleSchema }))
+  .handler(async ({ data }): Promise<PageDetail | null> => {
+    setBrowseCacheHeaders()
+    const result = await shopifyServerFetch<
+      PageQueryResult,
+      { handle: string }
+    >({
+      query: PAGE_QUERY,
+      variables: { handle: data.handle },
+    })
+    return result.page
+  })
+
+export const getShopPolicies = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<Array<PolicySummary>> => {
+    setBrowseCacheHeaders()
+    const result = await shopifyServerFetch<ShopPoliciesQueryResult>({
+      query: SHOP_POLICIES_QUERY,
+    })
+    return flattenPolicies(result.shop)
+  },
+)
+
+export const getShopPolicy = createServerFn({ method: 'POST' })
+  .validator(v.object({ handle: shopifyHandleSchema }))
+  .handler(
+    async ({
+      data,
+    }): Promise<{ title: string; body: string; handle: string } | null> => {
+      setBrowseCacheHeaders()
+      const result = await shopifyServerFetch<ShopPoliciesQueryResult>({
+        query: SHOP_POLICIES_QUERY,
+      })
+      const all = [
+        result.shop.privacyPolicy,
+        result.shop.refundPolicy,
+        result.shop.termsOfService,
+        result.shop.shippingPolicy,
+      ].filter((p): p is NonNullable<ShopPolicy> => p !== null)
+      return all.find((p) => p.handle === data.handle) ?? null
+    },
+  )
+
+export const searchProducts = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      query: shopSearchQuerySchema,
+      first: v.optional(shopPageSizeSchema, 24),
+      after: v.optional(v.nullable(shopCursorSchema)),
+    }),
+  )
+  .handler(
+    async ({
+      data,
+    }): Promise<{
+      totalCount: number
+      pageInfo: { hasNextPage: boolean; endCursor: string | null }
+      products: ProductListPage['nodes']
+    }> => {
+      setBrowseCacheHeaders()
+      const result = await shopifyServerFetch<
+        SearchQueryResult,
+        { query: string; first: number; after: string | null }
+      >({
+        query: SEARCH_QUERY,
+        variables: {
+          query: data.query,
+          first: data.first,
+          after: data.after ?? null,
+        },
+      })
+      return {
+        totalCount: result.search.totalCount,
+        pageInfo: result.search.pageInfo,
+        products: result.search.nodes,
+      }
+    },
+  )
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * Cart server functions
+ *
+ * Cart ID is stored in an httpOnly cookie. Reads + writes all go through the
+ * server (higher rate limits via the private token, no token on the client,
+ * and SSR can load the cart in route loaders). Optimistic updates happen in
+ * the React Query cache on top of these.
+ * ────────────────────────────────────────────────────────────────────────── */
+
+function setCartResponseHeaders() {
+  // Cart is per-user; do not edge-cache.
+  setResponseHeaders(
+    new Headers({ 'Cache-Control': 'private, no-store, must-revalidate' }),
+  )
+}
+
+async function fetchCartById(cartId: string): Promise<CartDetail | null> {
+  const result = await shopifyServerFetch<CartQueryResult, { cartId: string }>({
+    query: CART_QUERY,
+    variables: { cartId },
+  })
+  return result.cart
+}
+
+export const getCart = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<CartDetail | null> => {
+    setCartResponseHeaders()
+    const cartId = getCookie(CART_COOKIE_NAME)
+    if (!cartId) return null
+
+    const cart = await fetchCartById(cartId)
+    // If Shopify pruned the cart (expired/abandoned), clear the stale cookie.
+    if (!cart) deleteCookie(CART_COOKIE_NAME, { path: '/' })
+    return cart
+  },
+)
+
+export const addToCart = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      variantId: shopifyProductVariantIdSchema,
+      quantity: v.optional(cartQuantitySchema, 1),
+    }),
+  )
+  .handler(async ({ data }): Promise<CartDetail> => {
+    setCartResponseHeaders()
+    const existingCartId = getCookie(CART_COOKIE_NAME)
+
+    if (!existingCartId) {
+      const result = await shopifyServerFetch<CartCreateResult>({
+        query: CART_CREATE_MUTATION,
+        variables: {
+          input: {
+            lines: [
+              {
+                merchandiseId: data.variantId,
+                quantity: data.quantity,
+              },
+            ],
+          },
+        },
+      })
+      throwIfUserErrors(result.cartCreate.userErrors)
+      const cart = result.cartCreate.cart
+      if (!cart) throw new Error('Shopify returned no cart after create.')
+      setCookie(CART_COOKIE_NAME, cart.id, CART_COOKIE_OPTIONS)
+      return cart
+    }
+
+    const result = await shopifyServerFetch<CartLinesAddResult>({
+      query: CART_LINES_ADD_MUTATION,
+      variables: {
+        cartId: existingCartId,
+        lines: [{ merchandiseId: data.variantId, quantity: data.quantity }],
+      },
+    })
+    throwIfUserErrors(result.cartLinesAdd.userErrors)
+    const cart = result.cartLinesAdd.cart
+    // If the existing cart was pruned between requests, fall through and
+    // create a fresh cart with this line.
+    if (!cart) {
+      deleteCookie(CART_COOKIE_NAME, { path: '/' })
+      const createResult = await shopifyServerFetch<CartCreateResult>({
+        query: CART_CREATE_MUTATION,
+        variables: {
+          input: {
+            lines: [{ merchandiseId: data.variantId, quantity: data.quantity }],
+          },
+        },
+      })
+      throwIfUserErrors(createResult.cartCreate.userErrors)
+      const newCart = createResult.cartCreate.cart
+      if (!newCart)
+        throw new Error('Shopify returned no cart after recovery create.')
+      setCookie(CART_COOKIE_NAME, newCart.id, CART_COOKIE_OPTIONS)
+      return newCart
+    }
+    return cart
+  })
+
+export const updateCartLine = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      lineId: shopifyCartLineIdSchema,
+      quantity: cartUpdateQuantitySchema,
+    }),
+  )
+  .handler(async ({ data }): Promise<CartDetail> => {
+    setCartResponseHeaders()
+    const cartId = getCookie(CART_COOKIE_NAME)
+    if (!cartId) throw new Error('No cart exists to update.')
+
+    const result = await shopifyServerFetch<CartLinesUpdateResult>({
+      query: CART_LINES_UPDATE_MUTATION,
+      variables: {
+        cartId,
+        lines: [{ id: data.lineId, quantity: data.quantity }],
+      },
+    })
+    throwIfUserErrors(result.cartLinesUpdate.userErrors)
+    const cart = result.cartLinesUpdate.cart
+    if (!cart) throw new Error('Shopify returned no cart after update.')
+    return cart
+  })
+
+export const removeCartLine = createServerFn({ method: 'POST' })
+  .validator(v.object({ lineId: shopifyCartLineIdSchema }))
+  .handler(async ({ data }): Promise<CartDetail> => {
+    setCartResponseHeaders()
+    const cartId = getCookie(CART_COOKIE_NAME)
+    if (!cartId) throw new Error('No cart exists to remove from.')
+
+    const result = await shopifyServerFetch<CartLinesRemoveResult>({
+      query: CART_LINES_REMOVE_MUTATION,
+      variables: { cartId, lineIds: [data.lineId] },
+    })
+    throwIfUserErrors(result.cartLinesRemove.userErrors)
+    const cart = result.cartLinesRemove.cart
+    if (!cart) throw new Error('Shopify returned no cart after remove.')
+    return cart
+  })
+
+export const applyDiscountCode = createServerFn({ method: 'POST' })
+  .validator(v.object({ code: discountCodeSchema }))
+  .handler(async ({ data }): Promise<CartDetail> => {
+    setCartResponseHeaders()
+    const cartId = getCookie(CART_COOKIE_NAME)
+    if (!cartId) throw new Error('No cart exists to apply a discount to.')
+    const result = await shopifyServerFetch<CartDiscountCodesUpdateResult>({
+      query: CART_DISCOUNT_CODES_UPDATE_MUTATION,
+      variables: { cartId, discountCodes: [data.code] },
+    })
+    throwIfUserErrors(result.cartDiscountCodesUpdate.userErrors)
+    const cart = result.cartDiscountCodesUpdate.cart
+    if (!cart)
+      throw new Error('Shopify returned no cart after discount update.')
+    // Shopify silently drops invalid codes — surface that to the UI by
+    // checking whether the code we sent is present and applicable.
+    const applied = cart.discountCodes.find(
+      (c) => c.code.toLowerCase() === data.code.toLowerCase(),
+    )
+    if (!applied || !applied.applicable) {
+      throw new CartUserErrorsError([
+        {
+          field: null,
+          message: `Discount code "${data.code}" is not valid or not applicable to this cart.`,
+        },
+      ])
+    }
+    return cart
+  })
+
+export const removeDiscountCode = createServerFn({ method: 'POST' }).handler(
+  async (): Promise<CartDetail> => {
+    setCartResponseHeaders()
+    const cartId = getCookie(CART_COOKIE_NAME)
+    if (!cartId) throw new Error('No cart exists.')
+    const result = await shopifyServerFetch<CartDiscountCodesUpdateResult>({
+      query: CART_DISCOUNT_CODES_UPDATE_MUTATION,
+      variables: { cartId, discountCodes: [] },
+    })
+    throwIfUserErrors(result.cartDiscountCodesUpdate.userErrors)
+    const cart = result.cartDiscountCodesUpdate.cart
+    if (!cart) throw new Error('Shopify returned no cart after discount clear.')
+    return cart
+  },
+)
diff --git a/src/utils/shopify-format.ts b/src/utils/shopify-format.ts
new file mode 100644
index 000000000..9d04b7369
--- /dev/null
+++ b/src/utils/shopify-format.ts
@@ -0,0 +1,61 @@
+/**
+ * Browser-safe formatting helpers for Shopify Storefront API responses.
+ * Intentionally framework-free — no React, no provider context required.
+ */
+
+export function formatMoney(amount: string | number, currencyCode: string) {
+  return new Intl.NumberFormat(undefined, {
+    style: 'currency',
+    currency: currencyCode,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(typeof amount === 'string' ? Number(amount) : amount)
+}
+
+type ShopifyImageOptions = {
+  width?: number
+  height?: number
+  format?: 'webp' | 'jpg' | 'png'
+  crop?: 'center' | 'top' | 'bottom' | 'left' | 'right'
+}
+
+const MAX_SHOPIFY_IMAGE_DIMENSION = 4096
+
+function clampImageDimension(value: number | undefined) {
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    return undefined
+  }
+
+  return Math.min(MAX_SHOPIFY_IMAGE_DIMENSION, Math.max(1, Math.round(value)))
+}
+
+/**
+ * Append Shopify CDN transform parameters to a product image URL.
+ * Shopify's CDN serves resized/reformatted versions automatically without
+ * any sign-up; we just need to add the right query params.
+ */
+export function shopifyImageUrl(url: string, opts: ShopifyImageOptions = {}) {
+  let u: URL
+  try {
+    u = new URL(url)
+  } catch {
+    return ''
+  }
+
+  if (
+    (u.protocol !== 'https:' && u.protocol !== 'http:') ||
+    u.username ||
+    u.password
+  ) {
+    return ''
+  }
+
+  const width = clampImageDimension(opts.width)
+  const height = clampImageDimension(opts.height)
+
+  if (width) u.searchParams.set('width', String(width))
+  if (height) u.searchParams.set('height', String(height))
+  if (opts.format) u.searchParams.set('format', opts.format)
+  if (opts.crop) u.searchParams.set('crop', opts.crop)
+  return u.toString()
+}
diff --git a/src/utils/shopify-handle.ts b/src/utils/shopify-handle.ts
new file mode 100644
index 000000000..dd20c753c
--- /dev/null
+++ b/src/utils/shopify-handle.ts
@@ -0,0 +1,10 @@
+import * as v from 'valibot'
+
+const shopifyHandlePattern = /^[^\s/?#]+$/u
+
+export const shopifyHandleSchema = v.pipe(
+  v.string(),
+  v.minLength(1),
+  v.maxLength(255),
+  v.regex(shopifyHandlePattern),
+)
diff --git a/src/utils/shopify-id.ts b/src/utils/shopify-id.ts
new file mode 100644
index 000000000..ae7faddb4
--- /dev/null
+++ b/src/utils/shopify-id.ts
@@ -0,0 +1,18 @@
+import * as v from 'valibot'
+
+const shopifyProductVariantIdPattern = /^gid:\/\/shopify\/ProductVariant\/\S+$/
+const shopifyCartLineIdPattern = /^gid:\/\/shopify\/CartLine\/\S+$/
+
+export const shopifyProductVariantIdSchema = v.pipe(
+  v.string(),
+  v.minLength(1),
+  v.maxLength(512),
+  v.regex(shopifyProductVariantIdPattern),
+)
+
+export const shopifyCartLineIdSchema = v.pipe(
+  v.string(),
+  v.minLength(1),
+  v.maxLength(512),
+  v.regex(shopifyCartLineIdPattern),
+)
diff --git a/src/utils/shopify-queries.ts b/src/utils/shopify-queries.ts
new file mode 100644
index 000000000..579562b7d
--- /dev/null
+++ b/src/utils/shopify-queries.ts
@@ -0,0 +1,747 @@
+import type {
+  Cart,
+  CartLine,
+  Collection,
+  Image as StorefrontImage,
+  MoneyV2,
+  Page,
+  Product,
+  ProductOption,
+  ProductSortKeys,
+  ProductVariant,
+} from '@shopify/hydrogen-react/storefront-api-types'
+
+/**
+ * GraphQL queries for the Shopify Storefront API.
+ *
+ * Result types are hand-picked slices of the full `@shopify/hydrogen-react`
+ * Storefront API types. When the query count grows we can swap to
+ * `@shopify/hydrogen-codegen` and regenerate; the consuming code won't
+ * change because the type shapes match exactly.
+ */
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * Shop info — used by the smoke test and the shop landing header
+ * ────────────────────────────────────────────────────────────────────────── */
+
+export const SHOP_QUERY = /* GraphQL */ `
+  query Shop {
+    shop {
+      name
+      description
+      primaryDomain {
+        url
+      }
+    }
+  }
+`
+
+export type ShopQueryResult = {
+  shop: {
+    name: string
+    description: string | null
+    primaryDomain: { url: string }
+  }
+}
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * Product list — used by /shop landing
+ * ────────────────────────────────────────────────────────────────────────── */
+
+const PRODUCT_CARD_FRAGMENT = /* GraphQL */ `
+  fragment ProductCard on Product {
+    id
+    handle
+    title
+    productType
+    tags
+    publishedAt
+    options {
+      name
+      values
+    }
+    featuredImage {
+      url
+      altText
+      width
+      height
+    }
+    variants(first: 10) {
+      nodes {
+        selectedOptions {
+          name
+          value
+        }
+        image {
+          url
+          altText
+          width
+          height
+        }
+      }
+    }
+    priceRange {
+      minVariantPrice {
+        amount
+        currencyCode
+      }
+      maxVariantPrice {
+        amount
+        currencyCode
+      }
+    }
+    compareAtPriceRange {
+      minVariantPrice {
+        amount
+        currencyCode
+      }
+    }
+  }
+`
+
+export const PRODUCTS_QUERY = /* GraphQL */ `
+  ${PRODUCT_CARD_FRAGMENT}
+  query Products(
+    $first: Int!
+    $after: String
+    $sortKey: ProductSortKeys
+    $reverse: Boolean
+  ) {
+    products(
+      first: $first
+      after: $after
+      sortKey: $sortKey
+      reverse: $reverse
+    ) {
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+      nodes {
+        ...ProductCard
+      }
+    }
+  }
+`
+
+type CardVariantImage = Pick<
+  StorefrontImage,
+  'url' | 'altText' | 'width' | 'height'
+> | null
+
+export type ProductListItem = Pick<
+  Product,
+  'id' | 'handle' | 'title' | 'productType' | 'tags' | 'publishedAt'
+> & {
+  options: Array<Pick<ProductOption, 'name' | 'values'>>
+  featuredImage: CardVariantImage | null
+  variants: {
+    nodes: Array<{
+      selectedOptions: Array<{ name: string; value: string }>
+      image: CardVariantImage
+    }>
+  }
+  priceRange: {
+    minVariantPrice: Pick<MoneyV2, 'amount' | 'currencyCode'>
+    maxVariantPrice: Pick<MoneyV2, 'amount' | 'currencyCode'>
+  }
+  compareAtPriceRange: {
+    minVariantPrice: Pick<MoneyV2, 'amount' | 'currencyCode'>
+  }
+}
+
+export type ProductListPage = {
+  nodes: Array<ProductListItem>
+  pageInfo: { hasNextPage: boolean; endCursor: string | null }
+}
+
+export type ProductsQueryVariables = {
+  first: number
+  after?: string | null
+  sortKey?: ProductSortKeys | null
+  reverse?: boolean | null
+}
+
+export const SORT_OPTIONS = [
+  { key: 'BEST_SELLING', reverse: false, label: 'Best selling' },
+  { key: 'CREATED_AT', reverse: true, label: 'Newest' },
+  { key: 'PRICE', reverse: false, label: 'Price: low to high' },
+  { key: 'PRICE', reverse: true, label: 'Price: high to low' },
+  { key: 'TITLE', reverse: false, label: 'Title: A–Z' },
+] as const satisfies ReadonlyArray<{
+  key: ProductSortKeys
+  reverse: boolean
+  label: string
+}>
+
+export type SortOption = (typeof SORT_OPTIONS)[number]
+export type SortOptionId = `${SortOption['key']}${'' | ':rev'}`
+
+export function sortOptionId(opt: SortOption): SortOptionId {
+  return (opt.reverse ? `${opt.key}:rev` : opt.key) as SortOptionId
+}
+
+export function resolveSortOption(id: string | undefined): SortOption {
+  if (!id) return SORT_OPTIONS[0]
+  for (const opt of SORT_OPTIONS) {
+    if (sortOptionId(opt) === id) return opt
+  }
+  return SORT_OPTIONS[0]
+}
+
+export type ProductsQueryResult = {
+  products: ProductListPage
+}
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * Single product (PDP) — used by /shop/products/$handle
+ * ────────────────────────────────────────────────────────────────────────── */
+
+export const PRODUCT_QUERY = /* GraphQL */ `
+  query Product($handle: String!) {
+    product(handle: $handle) {
+      id
+      handle
+      title
+      descriptionHtml
+      options {
+        id
+        name
+        values
+      }
+      images(first: 10) {
+        nodes {
+          url
+          altText
+          width
+          height
+        }
+      }
+      variants(first: 100) {
+        nodes {
+          id
+          title
+          availableForSale
+          selectedOptions {
+            name
+            value
+          }
+          price {
+            amount
+            currencyCode
+          }
+          image {
+            url
+            altText
+            width
+            height
+          }
+        }
+      }
+      seo {
+        title
+        description
+      }
+    }
+  }
+`
+
+export type ProductDetailVariant = Pick<
+  ProductVariant,
+  'id' | 'title' | 'availableForSale'
+> & {
+  selectedOptions: Array<{ name: string; value: string }>
+  price: Pick<MoneyV2, 'amount' | 'currencyCode'>
+  image: Pick<StorefrontImage, 'url' | 'altText' | 'width' | 'height'> | null
+}
+
+export type ProductDetail = Pick<
+  Product,
+  'id' | 'handle' | 'title' | 'descriptionHtml'
+> & {
+  options: Array<Pick<ProductOption, 'id' | 'name' | 'values'>>
+  images: {
+    nodes: Array<Pick<StorefrontImage, 'url' | 'altText' | 'width' | 'height'>>
+  }
+  variants: { nodes: Array<ProductDetailVariant> }
+  seo: { title: string | null; description: string | null }
+}
+
+export type ProductQueryResult = {
+  product: ProductDetail | null
+}
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * Collections list — used to drive the /shop sidebar
+ * ────────────────────────────────────────────────────────────────────────── */
+
+export const COLLECTIONS_QUERY = /* GraphQL */ `
+  query Collections($first: Int!) {
+    collections(first: $first, sortKey: TITLE) {
+      nodes {
+        id
+        handle
+        title
+        description
+      }
+    }
+  }
+`
+
+export type CollectionListItem = Pick<
+  Collection,
+  'id' | 'handle' | 'title' | 'description'
+>
+
+export type CollectionsQueryResult = {
+  collections: { nodes: Array<CollectionListItem> }
+}
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * Cart — queries + mutations
+ *
+ * The cart lives in Shopify. We hit the Storefront API directly from the
+ * browser with the public token (no server hop needed), and manage the cart
+ * ID client-side via localStorage. Checkout redirects to `cart.checkoutUrl`
+ * which is Shopify-hosted.
+ * ────────────────────────────────────────────────────────────────────────── */
+
+const CART_FRAGMENT = /* GraphQL */ `
+  fragment CartFields on Cart {
+    id
+    checkoutUrl
+    totalQuantity
+    cost {
+      totalAmount {
+        amount
+        currencyCode
+      }
+      subtotalAmount {
+        amount
+        currencyCode
+      }
+      totalTaxAmount {
+        amount
+        currencyCode
+      }
+    }
+    lines(first: 100) {
+      nodes {
+        id
+        quantity
+        merchandise {
+          ... on ProductVariant {
+            id
+            title
+            availableForSale
+            selectedOptions {
+              name
+              value
+            }
+            price {
+              amount
+              currencyCode
+            }
+            image {
+              url
+              altText
+              width
+              height
+            }
+            product {
+              handle
+              title
+            }
+          }
+        }
+        cost {
+          totalAmount {
+            amount
+            currencyCode
+          }
+        }
+      }
+    }
+    discountCodes {
+      code
+      applicable
+    }
+  }
+`
+
+export const CART_QUERY = /* GraphQL */ `
+  ${CART_FRAGMENT}
+  query Cart($cartId: ID!) {
+    cart(id: $cartId) {
+      ...CartFields
+    }
+  }
+`
+
+export const CART_CREATE_MUTATION = /* GraphQL */ `
+  ${CART_FRAGMENT}
+  mutation CartCreate($input: CartInput!) {
+    cartCreate(input: $input) {
+      cart {
+        ...CartFields
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`
+
+export const CART_LINES_ADD_MUTATION = /* GraphQL */ `
+  ${CART_FRAGMENT}
+  mutation CartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
+    cartLinesAdd(cartId: $cartId, lines: $lines) {
+      cart {
+        ...CartFields
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`
+
+export const CART_LINES_UPDATE_MUTATION = /* GraphQL */ `
+  ${CART_FRAGMENT}
+  mutation CartLinesUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
+    cartLinesUpdate(cartId: $cartId, lines: $lines) {
+      cart {
+        ...CartFields
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`
+
+export const CART_LINES_REMOVE_MUTATION = /* GraphQL */ `
+  ${CART_FRAGMENT}
+  mutation CartLinesRemove($cartId: ID!, $lineIds: [ID!]!) {
+    cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {
+      cart {
+        ...CartFields
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`
+
+export type CartLineMerchandise = Pick<
+  ProductVariant,
+  'id' | 'title' | 'availableForSale'
+> & {
+  selectedOptions: Array<{ name: string; value: string }>
+  price: Pick<MoneyV2, 'amount' | 'currencyCode'>
+  image: Pick<StorefrontImage, 'url' | 'altText' | 'width' | 'height'> | null
+  product: Pick<Product, 'handle' | 'title'>
+}
+
+export type CartLineDetail = Pick<CartLine, 'id' | 'quantity'> & {
+  merchandise: CartLineMerchandise
+  cost: {
+    totalAmount: Pick<MoneyV2, 'amount' | 'currencyCode'>
+  }
+}
+
+export type CartDetail = Pick<Cart, 'id' | 'checkoutUrl' | 'totalQuantity'> & {
+  cost: {
+    totalAmount: Pick<MoneyV2, 'amount' | 'currencyCode'>
+    subtotalAmount: Pick<MoneyV2, 'amount' | 'currencyCode'>
+    totalTaxAmount: Pick<MoneyV2, 'amount' | 'currencyCode'> | null
+  }
+  lines: { nodes: Array<CartLineDetail> }
+  discountCodes: Array<{ code: string; applicable: boolean }>
+}
+
+export type CartQueryResult = {
+  cart: CartDetail | null
+}
+
+export type CartUserError = { field: string[] | null; message: string }
+
+export type CartCreateResult = {
+  cartCreate: { cart: CartDetail | null; userErrors: Array<CartUserError> }
+}
+
+export type CartLinesAddResult = {
+  cartLinesAdd: { cart: CartDetail | null; userErrors: Array<CartUserError> }
+}
+
+export type CartLinesUpdateResult = {
+  cartLinesUpdate: {
+    cart: CartDetail | null
+    userErrors: Array<CartUserError>
+  }
+}
+
+export type CartLinesRemoveResult = {
+  cartLinesRemove: {
+    cart: CartDetail | null
+    userErrors: Array<CartUserError>
+  }
+}
+
+export const CART_DISCOUNT_CODES_UPDATE_MUTATION = /* GraphQL */ `
+  ${CART_FRAGMENT}
+  mutation CartDiscountCodesUpdate($cartId: ID!, $discountCodes: [String!]) {
+    cartDiscountCodesUpdate(cartId: $cartId, discountCodes: $discountCodes) {
+      cart {
+        ...CartFields
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`
+
+export type CartDiscountCodesUpdateResult = {
+  cartDiscountCodesUpdate: {
+    cart: CartDetail | null
+    userErrors: Array<CartUserError>
+  }
+}
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * Collection (by handle) — backs /shop/collections/$handle
+ * ────────────────────────────────────────────────────────────────────────── */
+
+export const COLLECTION_QUERY = /* GraphQL */ `
+  ${PRODUCT_CARD_FRAGMENT}
+  query Collection(
+    $handle: String!
+    $first: Int!
+    $after: String
+    $sortKey: ProductCollectionSortKeys
+    $reverse: Boolean
+  ) {
+    collection(handle: $handle) {
+      id
+      handle
+      title
+      description
+      descriptionHtml
+      image {
+        url
+        altText
+        width
+        height
+      }
+      seo {
+        title
+        description
+      }
+      products(
+        first: $first
+        after: $after
+        sortKey: $sortKey
+        reverse: $reverse
+      ) {
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+        nodes {
+          ...ProductCard
+        }
+      }
+    }
+  }
+`
+
+export type CollectionDetail = Pick<
+  Collection,
+  'id' | 'handle' | 'title' | 'description' | 'descriptionHtml'
+> & {
+  image: Pick<StorefrontImage, 'url' | 'altText' | 'width' | 'height'> | null
+  seo: { title: string | null; description: string | null }
+  products: ProductListPage
+}
+
+export type CollectionQueryResult = {
+  collection: CollectionDetail | null
+}
+
+export const COLLECTION_SORT_OPTIONS = [
+  { key: 'COLLECTION_DEFAULT', reverse: false, label: 'Featured' },
+  { key: 'BEST_SELLING', reverse: false, label: 'Best selling' },
+  { key: 'CREATED', reverse: true, label: 'Newest' },
+  { key: 'PRICE', reverse: false, label: 'Price: low to high' },
+  { key: 'PRICE', reverse: true, label: 'Price: high to low' },
+  { key: 'TITLE', reverse: false, label: 'Title: A–Z' },
+] as const satisfies ReadonlyArray<{
+  key: string
+  reverse: boolean
+  label: string
+}>
+
+export type CollectionSortOption = (typeof COLLECTION_SORT_OPTIONS)[number]
+export type CollectionSortOptionId = `${CollectionSortOption['key']}${
+  | ''
+  | ':rev'}`
+
+export function collectionSortOptionId(
+  opt: CollectionSortOption,
+): CollectionSortOptionId {
+  return (opt.reverse ? `${opt.key}:rev` : opt.key) as CollectionSortOptionId
+}
+
+export function resolveCollectionSortOption(
+  id: string | undefined,
+): CollectionSortOption {
+  if (!id) return COLLECTION_SORT_OPTIONS[0]
+  for (const opt of COLLECTION_SORT_OPTIONS) {
+    if (collectionSortOptionId(opt) === id) return opt
+  }
+  return COLLECTION_SORT_OPTIONS[0]
+}
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * Shopify Pages (policies, about, etc) — backs /shop/pages/$handle
+ * ────────────────────────────────────────────────────────────────────────── */
+
+export const PAGE_QUERY = /* GraphQL */ `
+  query Page($handle: String!) {
+    page(handle: $handle) {
+      id
+      handle
+      title
+      body
+      bodySummary
+      seo {
+        title
+        description
+      }
+    }
+  }
+`
+
+export type PageDetail = Pick<
+  Page,
+  'id' | 'handle' | 'title' | 'body' | 'bodySummary'
+> & {
+  seo: { title: string | null; description: string | null }
+}
+
+export type PageQueryResult = {
+  page: PageDetail | null
+}
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * Shop policies — Privacy, Refund, Terms, Shipping
+ *
+ * Shopify stores policies separately from generic pages. They're accessed
+ * via top-level fields on `shop`, not the `page(handle:)` query.
+ * ────────────────────────────────────────────────────────────────────────── */
+
+export const SHOP_POLICIES_QUERY = /* GraphQL */ `
+  query ShopPolicies {
+    shop {
+      privacyPolicy {
+        handle
+        title
+        body
+      }
+      refundPolicy {
+        handle
+        title
+        body
+      }
+      termsOfService {
+        handle
+        title
+        body
+      }
+      shippingPolicy {
+        handle
+        title
+        body
+      }
+    }
+  }
+`
+
+export type ShopPolicy = {
+  handle: string
+  title: string
+  body: string
+} | null
+
+export type ShopPoliciesQueryResult = {
+  shop: {
+    privacyPolicy: ShopPolicy
+    refundPolicy: ShopPolicy
+    termsOfService: ShopPolicy
+    shippingPolicy: ShopPolicy
+  }
+}
+
+export type PolicySummary = { handle: string; title: string }
+
+/**
+ * Flatten the four policy fields into a list of non-null policies,
+ * suitable for rendering sidebar links.
+ */
+export function flattenPolicies(
+  shop: ShopPoliciesQueryResult['shop'],
+): Array<PolicySummary> {
+  const keys = [
+    'shippingPolicy',
+    'refundPolicy',
+    'privacyPolicy',
+    'termsOfService',
+  ] as const
+  return keys.flatMap((k) => {
+    const p = shop[k]
+    return p ? [{ handle: p.handle, title: p.title }] : []
+  })
+}
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * Search — backs /shop/search
+ * ────────────────────────────────────────────────────────────────────────── */
+
+export const SEARCH_QUERY = /* GraphQL */ `
+  ${PRODUCT_CARD_FRAGMENT}
+  query Search($query: String!, $first: Int!, $after: String) {
+    search(
+      query: $query
+      first: $first
+      after: $after
+      types: [PRODUCT]
+      productFilters: [{ available: true }]
+    ) {
+      totalCount
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+      nodes {
+        ... on Product {
+          ...ProductCard
+        }
+      }
+    }
+  }
+`
+
+export type SearchQueryResult = {
+  search: {
+    totalCount: number
+    pageInfo: { hasNextPage: boolean; endCursor: string | null }
+    nodes: Array<ProductListItem>
+  }
+}
diff --git a/src/utils/showcase.functions.ts b/src/utils/showcase.functions.ts
index f87ed93d2..ed55b3cad 100644
--- a/src/utils/showcase.functions.ts
+++ b/src/utils/showcase.functions.ts
@@ -24,37 +24,61 @@ import {
   getShowcaseCore,
 } from './showcase.server'
 import { getTrancoRank } from './tranco.server'
-import { showcaseUseCaseSchema, showcaseStatusSchema } from './schemas'
+import {
+  pageNumberSchema,
+  pageSizeSchema,
+  showcaseUseCaseSchema,
+  showcaseStatusSchema,
+} from './schemas'
+
+const showcaseLimitSchema = v.pipe(
+  v.number(),
+  v.integer(),
+  v.minValue(1),
+  v.maxValue(24),
+)
+const showcaseTextSchema = (maxLength: number) =>
+  v.pipe(v.string(), v.minLength(1), v.maxLength(maxLength))
+const optionalShowcaseTextSchema = (maxLength: number) =>
+  v.optional(v.pipe(v.string(), v.maxLength(maxLength)))
+const optionalNullableShowcaseTextSchema = (maxLength: number) =>
+  v.optional(v.nullable(v.pipe(v.string(), v.maxLength(maxLength))))
+const showcaseUrlSchema = v.pipe(v.string(), v.minLength(1), v.maxLength(2048))
+const optionalShowcaseUrlSchema = v.optional(
+  v.pipe(v.string(), v.maxLength(2048)),
+)
+const optionalNullableShowcaseUrlSchema = v.optional(
+  v.nullable(v.pipe(v.string(), v.maxLength(2048))),
+)
+const showcaseLibrariesSchema = v.pipe(
+  v.array(v.pipe(v.string(), v.maxLength(64))),
+  v.minLength(1, 'At least one library is required'),
+  v.maxLength(16),
+)
+const optionalShowcaseUseCasesSchema = v.optional(
+  v.pipe(v.array(showcaseUseCaseSchema), v.maxLength(12)),
+  [],
+)
+const showcaseUseCasesSchema = v.pipe(
+  v.array(showcaseUseCaseSchema),
+  v.maxLength(12),
+)
 
 /**
  * Submit a new showcase
  */
 export const submitShowcase = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
-      name: v.pipe(
-        v.string(),
-        v.minLength(1, 'Name is required'),
-        v.maxLength(255),
-      ),
-      tagline: v.pipe(
-        v.string(),
-        v.minLength(1, 'Tagline is required'),
-        v.maxLength(500),
-      ),
-      description: v.optional(v.string()),
-      url: v.pipe(v.string(), v.minLength(1, 'URL is required')),
-      logoUrl: v.optional(v.string()),
-      screenshotUrl: v.pipe(
-        v.string(),
-        v.minLength(1, 'Screenshot URL is required'),
-      ),
-      sourceUrl: v.optional(v.string()),
-      libraries: v.pipe(
-        v.array(v.string()),
-        v.minLength(1, 'At least one library is required'),
-      ),
-      useCases: v.optional(v.array(showcaseUseCaseSchema), []),
+      name: showcaseTextSchema(255),
+      tagline: showcaseTextSchema(500),
+      description: optionalShowcaseTextSchema(4000),
+      url: showcaseUrlSchema,
+      logoUrl: optionalShowcaseUrlSchema,
+      screenshotUrl: showcaseUrlSchema,
+      sourceUrl: optionalShowcaseUrlSchema,
+      libraries: showcaseLibrariesSchema,
+      useCases: optionalShowcaseUseCasesSchema,
     }),
   )
   .handler(async ({ data }) => {
@@ -89,32 +113,18 @@ export const submitShowcase = createServerFn({ method: 'POST' })
  * Update an existing showcase (resets to pending)
  */
 export const updateShowcase = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       showcaseId: v.pipe(v.string(), v.uuid()),
-      name: v.pipe(
-        v.string(),
-        v.minLength(1, 'Name is required'),
-        v.maxLength(255),
-      ),
-      tagline: v.pipe(
-        v.string(),
-        v.minLength(1, 'Tagline is required'),
-        v.maxLength(500),
-      ),
-      description: v.optional(v.string()),
-      url: v.pipe(v.string(), v.minLength(1, 'URL is required')),
-      logoUrl: v.optional(v.string()),
-      screenshotUrl: v.pipe(
-        v.string(),
-        v.minLength(1, 'Screenshot URL is required'),
-      ),
-      sourceUrl: v.optional(v.string()),
-      libraries: v.pipe(
-        v.array(v.string()),
-        v.minLength(1, 'At least one library is required'),
-      ),
-      useCases: v.optional(v.array(showcaseUseCaseSchema), []),
+      name: showcaseTextSchema(255),
+      tagline: showcaseTextSchema(500),
+      description: optionalShowcaseTextSchema(4000),
+      url: showcaseUrlSchema,
+      logoUrl: optionalShowcaseUrlSchema,
+      screenshotUrl: showcaseUrlSchema,
+      sourceUrl: optionalShowcaseUrlSchema,
+      libraries: showcaseLibrariesSchema,
+      useCases: optionalShowcaseUseCasesSchema,
     }),
   )
   .handler(async ({ data }) => {
@@ -145,7 +155,7 @@ export const updateShowcase = createServerFn({ method: 'POST' })
  * Delete a showcase
  */
 export const deleteShowcase = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ showcaseId: v.pipe(v.string(), v.uuid()) }))
+  .validator(v.object({ showcaseId: v.pipe(v.string(), v.uuid()) }))
   .handler(async ({ data }) => {
     const user = await getAuthenticatedUser()
 
@@ -163,11 +173,11 @@ export const deleteShowcase = createServerFn({ method: 'POST' })
  * Get user's own showcases
  */
 export const getMyShowcases = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       pagination: v.object({
-        page: v.optional(v.number(), 1),
-        pageSize: v.optional(v.number(), 20),
+        page: v.optional(pageNumberSchema, 1),
+        pageSize: v.optional(pageSizeSchema, 20),
       }),
     }),
   )
@@ -188,19 +198,26 @@ export const getMyShowcases = createServerFn({ method: 'POST' })
  * Get approved showcases (public)
  */
 export const getApprovedShowcases = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       pagination: v.object({
-        page: v.optional(v.number(), 1),
-        pageSize: v.optional(v.number(), 24),
+        page: v.optional(pageNumberSchema, 1),
+        pageSize: v.optional(pageSizeSchema, 24),
       }),
       filters: v.optional(
         v.object({
-          libraryIds: v.optional(v.array(v.string())),
-          useCases: v.optional(v.array(showcaseUseCaseSchema)),
+          libraryIds: v.optional(
+            v.pipe(
+              v.array(v.pipe(v.string(), v.maxLength(64))),
+              v.maxLength(16),
+            ),
+          ),
+          useCases: v.optional(
+            v.pipe(v.array(showcaseUseCaseSchema), v.maxLength(12)),
+          ),
           featured: v.optional(v.boolean()),
           hasSourceCode: v.optional(v.boolean()),
-          q: v.optional(v.string()),
+          q: v.optional(v.pipe(v.string(), v.maxLength(120))),
         }),
       ),
     }),
@@ -216,10 +233,10 @@ export const getApprovedShowcases = createServerFn({ method: 'POST' })
  * Get showcases by library (public)
  */
 export const getShowcasesByLibrary = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
-      libraryId: v.string(),
-      limit: v.optional(v.number(), 6),
+      libraryId: v.pipe(v.string(), v.maxLength(64)),
+      limit: v.optional(showcaseLimitSchema, 6),
     }),
   )
   .handler(async ({ data }) => {
@@ -235,9 +252,9 @@ export const getShowcasesByLibrary = createServerFn({ method: 'POST' })
  * Shows featured first, then by popularity (Tranco rank), then by date
  */
 export const getFeaturedShowcases = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
-      limit: v.optional(v.number(), 6),
+      limit: v.optional(showcaseLimitSchema, 6),
     }),
   )
   .handler(async ({ data }) => {
@@ -251,16 +268,23 @@ export const getFeaturedShowcases = createServerFn({ method: 'POST' })
  * List showcases for moderation (moderate-showcases capability required)
  */
 export const listShowcasesForModeration = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       pagination: v.object({
-        page: v.optional(v.number(), 1),
-        pageSize: v.optional(v.number(), 50),
+        page: v.optional(pageNumberSchema, 1),
+        pageSize: v.optional(pageSizeSchema, 50),
       }),
       filters: v.optional(
         v.object({
-          status: v.optional(v.array(showcaseStatusSchema)),
-          libraryId: v.optional(v.array(v.string())),
+          status: v.optional(
+            v.pipe(v.array(showcaseStatusSchema), v.maxLength(3)),
+          ),
+          libraryId: v.optional(
+            v.pipe(
+              v.array(v.pipe(v.string(), v.maxLength(64))),
+              v.maxLength(16),
+            ),
+          ),
           userId: v.optional(v.pipe(v.string(), v.uuid())),
           isFeatured: v.optional(v.boolean()),
         }),
@@ -348,11 +372,11 @@ export const listShowcasesForModeration = createServerFn({ method: 'POST' })
  * Moderate a showcase (approve or deny)
  */
 export const moderateShowcase = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       showcaseId: v.pipe(v.string(), v.uuid()),
       action: v.picklist(['approve', 'deny']),
-      moderationNote: v.optional(v.string()),
+      moderationNote: optionalShowcaseTextSchema(1000),
     }),
   )
   .handler(async ({ data }) => {
@@ -404,7 +428,7 @@ export const moderateShowcase = createServerFn({ method: 'POST' })
  * Set featured status for a showcase
  */
 export const setShowcaseFeatured = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       showcaseId: v.pipe(v.string(), v.uuid()),
       isFeatured: v.boolean(),
@@ -452,7 +476,7 @@ export const setShowcaseFeatured = createServerFn({ method: 'POST' })
  * Get a single showcase by ID (public for approved, owner for any status)
  */
 export const getShowcase = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ showcaseId: v.pipe(v.string(), v.uuid()) }))
+  .validator(v.object({ showcaseId: v.pipe(v.string(), v.uuid()) }))
   .handler(async ({ data }) => {
     let user
     try {
@@ -468,7 +492,7 @@ export const getShowcase = createServerFn({ method: 'POST' })
  * Get a single showcase by ID for admin (moderate-showcases capability required)
  */
 export const adminGetShowcase = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ showcaseId: v.pipe(v.string(), v.uuid()) }))
+  .validator(v.object({ showcaseId: v.pipe(v.string(), v.uuid()) }))
   .handler(async ({ data }) => {
     await requireModerateShowcases()
 
@@ -499,37 +523,23 @@ export const adminGetShowcase = createServerFn({ method: 'POST' })
  * Allows editing all fields without resetting status
  */
 export const adminUpdateShowcase = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       showcaseId: v.pipe(v.string(), v.uuid()),
-      name: v.pipe(
-        v.string(),
-        v.minLength(1, 'Name is required'),
-        v.maxLength(255),
-      ),
-      tagline: v.pipe(
-        v.string(),
-        v.minLength(1, 'Tagline is required'),
-        v.maxLength(500),
-      ),
-      description: v.optional(v.nullable(v.string())),
-      url: v.pipe(v.string(), v.minLength(1, 'URL is required')),
-      logoUrl: v.optional(v.nullable(v.string())),
-      screenshotUrl: v.pipe(
-        v.string(),
-        v.minLength(1, 'Screenshot URL is required'),
-      ),
-      sourceUrl: v.optional(v.nullable(v.string())),
-      libraries: v.pipe(
-        v.array(v.string()),
-        v.minLength(1, 'At least one library is required'),
-      ),
-      useCases: v.array(showcaseUseCaseSchema),
+      name: showcaseTextSchema(255),
+      tagline: showcaseTextSchema(500),
+      description: optionalNullableShowcaseTextSchema(4000),
+      url: showcaseUrlSchema,
+      logoUrl: optionalNullableShowcaseUrlSchema,
+      screenshotUrl: showcaseUrlSchema,
+      sourceUrl: optionalNullableShowcaseUrlSchema,
+      libraries: showcaseLibrariesSchema,
+      useCases: showcaseUseCasesSchema,
       status: showcaseStatusSchema,
       isFeatured: v.boolean(),
-      moderationNote: v.optional(v.nullable(v.string())),
-      trancoRank: v.optional(v.nullable(v.number())),
-      voteScore: v.number(),
+      moderationNote: optionalNullableShowcaseTextSchema(1000),
+      trancoRank: v.optional(v.nullable(v.pipe(v.number(), v.minValue(1)))),
+      voteScore: v.pipe(v.number(), v.integer()),
     }),
   )
   .handler(async ({ data }) => {
@@ -637,7 +647,7 @@ export const adminUpdateShowcase = createServerFn({ method: 'POST' })
  * Admin delete a showcase (moderate-showcases capability required)
  */
 export const adminDeleteShowcase = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ showcaseId: v.pipe(v.string(), v.uuid()) }))
+  .validator(v.object({ showcaseId: v.pipe(v.string(), v.uuid()) }))
   .handler(async ({ data }) => {
     const moderator = await requireModerateShowcases()
 
@@ -673,7 +683,7 @@ export const adminDeleteShowcase = createServerFn({ method: 'POST' })
  * If user voted with different value, updates to new value
  */
 export const voteShowcase = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       showcaseId: v.pipe(v.string(), v.uuid()),
       value: v.picklist([1, -1]),
@@ -755,9 +765,12 @@ export const voteShowcase = createServerFn({ method: 'POST' })
  * Get current user's votes for a batch of showcases
  */
 export const getMyShowcaseVotes = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
-      showcaseIds: v.array(v.pipe(v.string(), v.uuid())),
+      showcaseIds: v.pipe(
+        v.array(v.pipe(v.string(), v.uuid())),
+        v.maxLength(100),
+      ),
     }),
   )
   .handler(async ({ data }) => {
@@ -791,11 +804,14 @@ export const getMyShowcaseVotes = createServerFn({ method: 'POST' })
  * Get related showcases (same libraries, excluding current showcase)
  */
 export const getRelatedShowcases = createServerFn({ method: 'POST' })
-  .inputValidator(
+  .validator(
     v.object({
       showcaseId: v.pipe(v.string(), v.uuid()),
-      libraries: v.array(v.string()),
-      limit: v.optional(v.number(), 4),
+      libraries: v.pipe(
+        v.array(v.pipe(v.string(), v.maxLength(64))),
+        v.maxLength(16),
+      ),
+      limit: v.optional(showcaseLimitSchema, 4),
     }),
   )
   .handler(async ({ data }) => {
diff --git a/src/utils/showcase.server.ts b/src/utils/showcase.server.ts
index 3f6cceb2c..09f82ed1f 100644
--- a/src/utils/showcase.server.ts
+++ b/src/utils/showcase.server.ts
@@ -6,10 +6,19 @@ import {
   type ShowcaseStatus,
   type ShowcaseUseCase,
 } from '~/db/schema'
-import { and, eq, or, sql, desc, arrayContains, isNotNull } from 'drizzle-orm'
+import {
+  and,
+  eq,
+  or,
+  sql,
+  desc,
+  arrayContains,
+  isNotNull,
+  arrayOverlaps,
+} from 'drizzle-orm'
 import { requireCapability } from './auth.server'
 import { getEffectiveCapabilities } from './capabilities.server'
-import { libraryIds } from '~/libraries'
+import { libraryIds } from '~/libraries/ids'
 import { SHOWCASE_USE_CASES } from '~/db/types'
 import { getTrancoRank } from './tranco.server'
 import { notifyModerators, formatShowcaseSubmittedEmail } from './email.server'
@@ -525,10 +534,7 @@ export async function searchShowcasesCore(
 
   if (filters.useCases && filters.useCases.length > 0) {
     conditions.push(
-      sql`${showcases.useCases} && ARRAY[${sql.join(
-        filters.useCases.map((uc) => sql`${uc}`),
-        sql`, `,
-      )}]::showcase_use_case[]`,
+      arrayOverlaps(showcases.useCases, filters.useCases as ShowcaseUseCase[]),
     )
   }
 
diff --git a/src/utils/showcase.shared.ts b/src/utils/showcase.shared.ts
new file mode 100644
index 000000000..fea529517
--- /dev/null
+++ b/src/utils/showcase.shared.ts
@@ -0,0 +1,44 @@
+import type { ShowcaseUseCase } from '~/db/types'
+
+export function expandLibraryDependencies(libraries: Array<string>) {
+  const expanded = new Set(libraries)
+
+  if (expanded.has('start')) {
+    expanded.add('router')
+  }
+
+  return Array.from(expanded)
+}
+
+export function getAutoIncludedLibraries(selectedLibraries: Array<string>) {
+  const autoIncluded: Record<string, string> = {}
+
+  if (selectedLibraries.includes('start')) {
+    autoIncluded.router = 'Included via Start'
+  }
+
+  return autoIncluded
+}
+
+export function isValidUrl(urlString: string) {
+  try {
+    const url = new URL(urlString)
+    return url.protocol === 'http:' || url.protocol === 'https:'
+  } catch {
+    return false
+  }
+}
+
+export const USE_CASE_LABELS: Record<ShowcaseUseCase, string> = {
+  blog: 'Blog',
+  'developer-tool': 'Developer Tool',
+  dashboard: 'Dashboard',
+  documentation: 'Documentation',
+  'e-commerce': 'E-commerce',
+  marketing: 'Marketing',
+  media: 'Media',
+  'open-source': 'Open Source',
+  portfolio: 'Portfolio',
+  saas: 'SaaS',
+  social: 'Social',
+}
diff --git a/src/utils/site.ts b/src/utils/site.ts
new file mode 100644
index 000000000..dc199f15a
--- /dev/null
+++ b/src/utils/site.ts
@@ -0,0 +1 @@
+export const SITE_URL = 'https://tanstack.com'
diff --git a/src/utils/sitemap.ts b/src/utils/sitemap.ts
new file mode 100644
index 000000000..0a3302590
--- /dev/null
+++ b/src/utils/sitemap.ts
@@ -0,0 +1,162 @@
+import { getBranch, libraries } from '~/libraries'
+import type { LibrarySlim } from '~/libraries/types'
+import { getPublishedPosts } from '~/utils/blog'
+import { getDocsManifest } from '~/utils/docs'
+import { SITE_URL } from '~/utils/site'
+
+export type SitemapEntry = {
+  path: string
+  lastModified?: string
+}
+
+const HIGH_VALUE_NON_DOC_PAGES = [
+  '/',
+  '/blog',
+  '/libraries',
+  '/learn',
+  '/showcase',
+  '/support',
+  '/workshops',
+  '/paid-support',
+] as const satisfies ReadonlyArray<string>
+
+const LOW_VALUE_DOCS_SITEMAP_SEGMENTS = new Set(['examples', 'community'])
+
+const LOW_VALUE_DOCS_SITEMAP_SLUGS = new Set([
+  'community-resources',
+  'contributors',
+  'npm-stats',
+])
+
+function trimTrailingSlash(url: string) {
+  return url.replace(/\/$/, '')
+}
+
+function escapeXml(value: string) {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;')
+}
+
+function asLastModified(value: string) {
+  return new Date(`${value}T12:00:00.000Z`).toISOString()
+}
+
+function getLibraryEntries(): Array<SitemapEntry> {
+  return libraries.flatMap((library) => {
+    if (
+      library.visible === false ||
+      !library.latestVersion ||
+      library.sitemap?.includeLandingPage !== true
+    ) {
+      return []
+    }
+    const basePath = `/${library.id}/latest`
+    return [{ path: basePath }]
+  })
+}
+
+function isHighValueDocsSlug(slug: string) {
+  const segments = slug.split('/').filter(Boolean)
+
+  return (
+    segments.length > 0 &&
+    !segments.some((segment) => LOW_VALUE_DOCS_SITEMAP_SEGMENTS.has(segment)) &&
+    !LOW_VALUE_DOCS_SITEMAP_SLUGS.has(slug)
+  )
+}
+
+async function getLibraryDocsEntries(
+  library: LibrarySlim,
+): Promise<Array<SitemapEntry>> {
+  if (
+    library.visible === false ||
+    !library.latestVersion ||
+    library.sitemap?.includeDocsPages !== true
+  ) {
+    return []
+  }
+
+  const docsRoot = library.docsRoot || 'docs'
+  const branch = getBranch(library, 'latest')
+  const manifest = await getDocsManifest({
+    repo: library.repo,
+    branch,
+    docsRoot,
+  }).catch(() => ({ paths: [], redirects: {} }))
+
+  return manifest.paths
+    .filter(Boolean)
+    .filter(isHighValueDocsSlug)
+    .map((slug) => ({
+      path: `/${library.id}/latest/docs/${slug}`,
+    }))
+}
+
+function getBlogEntries(): Array<SitemapEntry> {
+  return getPublishedPosts().map((post) => ({
+    path: `/blog/${post.slug}`,
+    lastModified: asLastModified(post.published),
+  }))
+}
+
+export function getSiteOrigin() {
+  return trimTrailingSlash(SITE_URL)
+}
+
+export async function getSitemapEntries(): Promise<Array<SitemapEntry>> {
+  const docsEntries = await Promise.all(
+    libraries.map((library) => getLibraryDocsEntries(library)),
+  )
+
+  const entries = [
+    ...HIGH_VALUE_NON_DOC_PAGES.map((path) => ({ path })),
+    ...getLibraryEntries(),
+    ...docsEntries.flat(),
+    ...getBlogEntries(),
+  ].filter(
+    (entry) =>
+      entry.path !== '/intent/registry' &&
+      !entry.path.startsWith('/intent/registry/'),
+  )
+
+  return Array.from(
+    new Map(entries.map((entry) => [entry.path, entry])).values(),
+  )
+}
+
+export async function generateSitemapXml(origin: string) {
+  const urls = (await getSitemapEntries())
+    .map((entry) => {
+      const loc = `${origin}${entry.path}`
+
+      return [
+        '  <url>',
+        `    <loc>${escapeXml(loc)}</loc>`,
+        entry.lastModified
+          ? `    <lastmod>${entry.lastModified}</lastmod>`
+          : '',
+        '  </url>',
+      ]
+        .filter(Boolean)
+        .join('\n')
+    })
+    .join('\n')
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls}
+</urlset>`
+}
+
+export function generateRobotsTxt(origin: string) {
+  return [
+    'User-agent: *',
+    'Allow: /',
+    '',
+    `Sitemap: ${origin}/sitemap.xml`,
+  ].join('\n')
+}
diff --git a/src/utils/sponsors.functions.ts b/src/utils/sponsors.functions.ts
new file mode 100644
index 000000000..7b459977a
--- /dev/null
+++ b/src/utils/sponsors.functions.ts
@@ -0,0 +1,256 @@
+import { createServerFn } from '@tanstack/react-start'
+import { setResponseHeaders } from '@tanstack/react-start/server'
+import { extent, scaleLinear } from 'd3'
+import { graphqlWithAuth } from '~/server/github'
+import sponsorMetaData from '~/utils/gh-sponsor-meta.json'
+import { fetchCached } from '~/utils/cache.server'
+
+export type SponsorMeta = {
+  login: string
+  name?: string
+  imageUrl?: string
+  linkUrl?: string
+  private?: boolean
+  amount?: number
+}
+
+export type Sponsor = {
+  login: string
+  name: string
+  imageUrl: string
+  linkUrl: string
+  private: boolean
+  amount: number
+  createdAt: string
+}
+
+type DisplaySponsor = {
+  linkUrl: string
+  login: string
+  imageUrl: string
+  name: string
+  size: number
+}
+
+const sponsorMaintainerLogin = 'tannerlinsley'
+
+export const getSponsorsForSponsorPack = createServerFn({
+  method: 'GET',
+}).handler(async (): Promise<Array<DisplaySponsor>> => {
+  const sponsors = await fetchCached({
+    key: 'sponsors',
+    ttl: 60 * 1000,
+    fn: getSponsors,
+  })
+
+  setResponseHeaders(
+    new Headers({
+      'Cache-Control': 'public, max-age=0, must-revalidate',
+      'Cloudflare-CDN-Cache-Control':
+        'public, max-age=300, stale-while-revalidate=300',
+    }),
+  )
+
+  const amountExtent = extent(sponsors, (d) => d.amount) as [number, number]
+  const scale = scaleLinear().domain(amountExtent).range([0, 1])
+
+  return sponsors
+    .filter((d) => !d.private)
+    .map((d) => ({
+      linkUrl: d.linkUrl,
+      login: d.login,
+      imageUrl: d.imageUrl,
+      name: d.name,
+      size: scale(d.amount),
+    }))
+})
+
+async function getSponsors() {
+  const [sponsors, sponsorsMeta] = await Promise.all([
+    getGithubSponsors(),
+    getSponsorsMeta(),
+  ])
+
+  sponsorsMeta.forEach((sponsorMeta: SponsorMeta) => {
+    const matchingSponsor = sponsors.find((d) => d.login == sponsorMeta.login)
+
+    if (matchingSponsor) {
+      Object.assign(matchingSponsor, {
+        name: sponsorMeta.name ?? matchingSponsor.name,
+        imageUrl: sponsorMeta.imageUrl ?? matchingSponsor.imageUrl,
+        linkUrl: sponsorMeta.linkUrl ?? matchingSponsor.linkUrl,
+        private: sponsorMeta.private ?? matchingSponsor.private,
+      })
+    } else if (sponsorMeta.amount) {
+      sponsors.push({
+        login: sponsorMeta.login,
+        name: sponsorMeta.name || '',
+        imageUrl: sponsorMeta.imageUrl || '',
+        linkUrl: sponsorMeta.linkUrl || '',
+        private: sponsorMeta.private || false,
+        createdAt: new Date().toISOString(),
+        amount: sponsorMeta.amount || 0,
+      })
+    }
+  })
+
+  sponsors.sort(
+    (a, b) =>
+      (b.amount || 0) - (a.amount || 0) || a.login.localeCompare(b.login),
+  )
+
+  return sponsors
+}
+
+async function getGithubSponsors() {
+  let sponsors: Array<Sponsor> = []
+
+  try {
+    const fetchPage = async (cursor = '') => {
+      type SponsorshipEdge = {
+        node: {
+          sponsorEntity: {
+            avatarUrl: string
+            login: string
+            name?: string | null
+            url: string
+          } | null
+          tier: {
+            monthlyPriceInDollars: number
+          } | null
+        }
+      }
+
+      type GraphQLResponse = {
+        user: {
+          sponsorshipsAsMaintainer: {
+            pageInfo: {
+              hasNextPage: boolean
+              endCursor: string
+            }
+            edges: Array<SponsorshipEdge>
+          }
+        } | null
+      }
+
+      const res = await graphqlWithAuth<GraphQLResponse>(
+        `
+      query ($cursor: String, $login: String!) {
+        user(login: $login) {
+          sponsorshipsAsMaintainer(first: 100, after: $cursor, includePrivate: false) {
+            pageInfo {
+              hasNextPage
+              endCursor
+            }
+            edges {
+              node {
+                sponsorEntity {
+                  ... on Actor {
+                    avatarUrl
+                    login
+                    url
+                  }
+                  ... on User {
+                    name
+                  }
+                }
+                tier {
+                  monthlyPriceInDollars
+                }
+              }
+            }
+          }
+        }
+      }
+      `,
+        {
+          cursor,
+          login: sponsorMaintainerLogin,
+        },
+      )
+
+      const sponsorships = res.user?.sponsorshipsAsMaintainer
+
+      if (!sponsorships) {
+        return
+      }
+
+      const {
+        pageInfo: { hasNextPage, endCursor },
+        edges,
+      } = sponsorships
+
+      const mapped = edges
+        .map((edge) => {
+          const {
+            node: { sponsorEntity, tier },
+          } = edge
+
+          if (!sponsorEntity) {
+            return null
+          }
+
+          const { avatarUrl, name, login } = sponsorEntity
+
+          return {
+            name: name || login,
+            login,
+            amount: tier?.monthlyPriceInDollars || 0,
+            createdAt: '',
+            private: false,
+            imageUrl: avatarUrl,
+            linkUrl: sponsorEntity.url,
+          }
+        })
+        .filter((d): d is Sponsor => d !== null)
+
+      sponsors = [...sponsors, ...mapped]
+
+      if (hasNextPage) {
+        return fetchPage(endCursor)
+      }
+    }
+
+    await fetchPage()
+  } catch (err) {
+    const error = err as { status?: number }
+
+    if (error.status === 401) {
+      console.error(
+        'Invalid or missing GitHub credentials, returning mock data.',
+      )
+      return [
+        'tannerlinsley',
+        'tkdodo',
+        'crutchcorn',
+        'kevinvandy',
+        'jherr',
+        'seancassiere',
+        'schiller-manuel',
+      ].flatMap((d) =>
+        new Array(20).fill(d).map((_, i2) => ({
+          login: d,
+          name: d,
+          amount: (20 - i2) / 20 + Math.random(),
+          createdAt: new Date().toISOString(),
+          private: false,
+          linkUrl: `https://github.com/${d}`,
+          imageUrl: `https://github.com/${d}.png`,
+        })),
+      )
+    }
+
+    if (error.status === 403) {
+      console.error('GitHub rate limit exceeded, returning empty sponsors.')
+      return []
+    }
+
+    console.error('Failed to fetch GitHub sponsors', err)
+  }
+
+  return sponsors
+}
+
+async function getSponsorsMeta() {
+  return sponsorMetaData as Array<SponsorMeta>
+}
diff --git a/src/utils/stackblitz-embed.ts b/src/utils/stackblitz-embed.ts
new file mode 100644
index 000000000..3454fc7a8
--- /dev/null
+++ b/src/utils/stackblitz-embed.ts
@@ -0,0 +1,13 @@
+import type { IframeHTMLAttributes } from 'react'
+
+export const stackBlitzEmbedHeaders = {
+  'Cross-Origin-Opener-Policy': 'same-origin',
+  'Cross-Origin-Embedder-Policy': 'credentialless',
+} as const
+
+export const stackBlitzIframeProps = {
+  allow: 'cross-origin-isolated',
+  credentialless: '',
+} as IframeHTMLAttributes<HTMLIFrameElement> & {
+  credentialless: string
+}
diff --git a/src/utils/stale-app-reload.ts b/src/utils/stale-app-reload.ts
new file mode 100644
index 000000000..6dabf188b
--- /dev/null
+++ b/src/utils/stale-app-reload.ts
@@ -0,0 +1,186 @@
+import {
+  getSessionStorageItem,
+  setSessionStorageItem,
+} from '~/utils/browser-storage'
+
+const staleAppReloadKey = 'tanstack-stale-app-reload-at'
+const staleAppReloadWindowMs = 10_000
+
+const staleAppErrorPatterns = [
+  'ChunkLoadError',
+  'Failed to fetch dynamically imported module',
+  'Importing a module script failed',
+  'error loading dynamically imported module',
+  'Expected a JavaScript-or-Wasm module script',
+  'server responded with a MIME type',
+  'Unable to preload CSS',
+  'Seroval Error',
+]
+
+let handlersInstalled = false
+let lastReloadAt = 0
+
+export function installStaleAppReloadHandlers() {
+  if (typeof window === 'undefined' || handlersInstalled) return
+  handlersInstalled = true
+  installConsoleReloadHandler('error')
+  installConsoleReloadHandler('warn')
+
+  window.addEventListener('unhandledrejection', (event) => {
+    if (reloadOnStaleAppError(event.reason)) {
+      event.preventDefault()
+    }
+  })
+
+  window.addEventListener(
+    'error',
+    (event) => {
+      if (reloadOnStaleAppError([event.error, event.message, event])) {
+        event.preventDefault()
+      }
+    },
+    true,
+  )
+}
+
+export function reloadOnStaleAppError(error: unknown) {
+  if (typeof window === 'undefined' || !isStaleAppError(error)) {
+    return false
+  }
+
+  const lastReload = readLastReloadAt()
+  const now = Date.now()
+
+  if (
+    !Number.isFinite(lastReload) ||
+    now - lastReload > staleAppReloadWindowMs
+  ) {
+    writeLastReloadAt(now)
+    window.location.reload()
+    return true
+  }
+
+  return false
+}
+
+export function isStaleAppError(error: unknown) {
+  if (Array.isArray(error)) {
+    return error.some(isStaleAppError)
+  }
+
+  if (isFailedAppAssetEvent(error)) {
+    return true
+  }
+
+  const message = getErrorText(error)
+  return staleAppErrorPatterns.some((pattern) => message.includes(pattern))
+}
+
+function getErrorText(error: unknown): string {
+  if (Array.isArray(error)) {
+    return error.map(getErrorText).filter(Boolean).join('\n')
+  }
+
+  if (error instanceof Error) {
+    return [error.name, error.message, error.stack].filter(Boolean).join('\n')
+  }
+
+  if (typeof Event !== 'undefined' && error instanceof Event) {
+    return getEventText(error)
+  }
+
+  if (typeof error === 'string') {
+    return error
+  }
+
+  if (typeof error === 'object' && error !== null && 'message' in error) {
+    const message = error.message
+    if (typeof message === 'string') {
+      return message
+    }
+  }
+
+  return ''
+}
+
+function installConsoleReloadHandler(method: 'error' | 'warn') {
+  const original = console[method].bind(console)
+
+  console[method] = (...args) => {
+    if (!reloadOnStaleAppError(args)) {
+      original(...args)
+    }
+  }
+}
+
+function readLastReloadAt() {
+  const value = getSessionStorageItem(staleAppReloadKey)
+  if (value) {
+    return Number.parseInt(value, 10)
+  }
+
+  return lastReloadAt
+}
+
+function writeLastReloadAt(value: number) {
+  lastReloadAt = value
+  setSessionStorageItem(staleAppReloadKey, value.toString())
+}
+
+function isFailedAppAssetEvent(error: unknown) {
+  if (
+    typeof window === 'undefined' ||
+    typeof HTMLScriptElement === 'undefined' ||
+    typeof HTMLLinkElement === 'undefined' ||
+    !(error instanceof Event)
+  ) {
+    return false
+  }
+
+  const target = error.target
+  const assetUrl =
+    target instanceof HTMLScriptElement
+      ? target.src
+      : target instanceof HTMLLinkElement
+        ? target.href
+        : ''
+
+  return isAppChunkUrl(assetUrl)
+}
+
+function getEventText(event: Event) {
+  const target = event.target
+
+  if (
+    typeof HTMLScriptElement !== 'undefined' &&
+    target instanceof HTMLScriptElement
+  ) {
+    return [event.type, target.src].filter(Boolean).join('\n')
+  }
+
+  if (
+    typeof HTMLLinkElement !== 'undefined' &&
+    target instanceof HTMLLinkElement
+  ) {
+    return [event.type, target.href].filter(Boolean).join('\n')
+  }
+
+  return event.type
+}
+
+function isAppChunkUrl(url: string) {
+  if (!url) return false
+
+  try {
+    const parsed = new URL(url, window.location.href)
+    return (
+      parsed.origin === window.location.origin &&
+      parsed.pathname.startsWith('/assets/') &&
+      (parsed.pathname.endsWith('.js') || parsed.pathname.endsWith('.css'))
+    )
+  } catch {
+    return (
+      url.includes('/assets/') && (url.includes('.js') || url.includes('.css'))
+    )
+  }
+}
diff --git a/src/utils/stats-admin.functions.ts b/src/utils/stats-admin.functions.ts
new file mode 100644
index 000000000..a6dae788f
--- /dev/null
+++ b/src/utils/stats-admin.functions.ts
@@ -0,0 +1,32 @@
+import { createServerFn } from '@tanstack/react-start'
+import * as v from 'valibot'
+import {
+  listGitHubStatsCache as listGitHubStatsCacheServer,
+  refreshAllGitHubStats as refreshAllGitHubStatsServer,
+  refreshAllNpmStats as refreshAllNpmStatsServer,
+  refreshGitHubStats as refreshGitHubStatsServer,
+} from '~/utils/stats-admin.server'
+
+export const listGitHubStatsCache = createServerFn({ method: 'POST' }).handler(
+  async () => listGitHubStatsCacheServer(),
+)
+
+export const refreshGitHubStats = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      cacheKey: v.string(),
+    }),
+  )
+  .handler(async ({ data }) => refreshGitHubStatsServer({ data }))
+
+export const refreshAllGitHubStats = createServerFn({ method: 'POST' }).handler(
+  async () => refreshAllGitHubStatsServer(),
+)
+
+export const refreshAllNpmStats = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      org: v.string(),
+    }),
+  )
+  .handler(async ({ data }) => refreshAllNpmStatsServer({ data }))
diff --git a/src/utils/stats-admin.server.ts b/src/utils/stats-admin.server.ts
index a027c444b..7904a874d 100644
--- a/src/utils/stats-admin.server.ts
+++ b/src/utils/stats-admin.server.ts
@@ -2,416 +2,172 @@
  * Admin server functions for managing GitHub and NPM stats
  */
 
-import { createServerFn } from '@tanstack/react-start'
-import * as v from 'valibot'
 import { db } from '~/db/client'
-import { githubStatsCache, npmPackages, npmOrgStatsCache } from '~/db/schema'
-import { eq, desc, and, like } from 'drizzle-orm'
+import { githubStatsCache } from '~/db/schema'
+import { desc, like } from 'drizzle-orm'
 import { fetchGitHubOwnerStats, fetchGitHubRepoStats } from './stats.functions'
-import { refreshNpmOrgStats } from './stats.server'
-import { setCachedGitHubStats } from './stats-db.server'
-import { setCachedNpmPackageStats } from './stats-db.server'
+import { rebuildOssStatsCache, setCachedGitHubStats } from './stats-db.server'
 import { requireCapability } from './auth.server'
+import { refreshHomepageNpmStatsSummary } from './homepage-npm-stats.server'
 
 /**
  * List all GitHub stats cache entries
  */
-export const listGitHubStatsCache = createServerFn({ method: 'POST' }).handler(
-  async () => {
-    await requireCapability({ data: { capability: 'admin' } })
+export async function listGitHubStatsCache() {
+  await requireCapability({ data: { capability: 'admin' } })
 
-    const entries = await db.query.githubStatsCache.findMany({
-      orderBy: [desc(githubStatsCache.updatedAt)],
-    })
+  const entries = await db.query.githubStatsCache.findMany({
+    orderBy: [desc(githubStatsCache.updatedAt)],
+  })
 
-    return entries.map((entry) => ({
-      cacheKey: entry.cacheKey,
-      stats: entry.stats as any,
-      previousStats: entry.previousStats as any,
-      expiresAt: entry.expiresAt,
-      createdAt: entry.createdAt,
-      updatedAt: entry.updatedAt,
-    }))
-  },
-)
+  return entries.map((entry) => ({
+    cacheKey: entry.cacheKey,
+    stats: entry.stats as any,
+    previousStats: entry.previousStats as any,
+    expiresAt: entry.expiresAt,
+    createdAt: entry.createdAt,
+    updatedAt: entry.updatedAt,
+  }))
+}
 
 /**
  * Refresh GitHub stats for a specific repo or org
  */
-export const refreshGitHubStats = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      cacheKey: v.string(), // e.g., "tanstack/query" or "org:tanstack"
-    }),
-  )
-  .handler(async ({ data }) => {
-    await requireCapability({ data: { capability: 'admin' } })
+export async function refreshGitHubStats({ data }: { data: any }) {
+  await requireCapability({ data: { capability: 'admin' } })
 
-    const isOrg = data.cacheKey.startsWith('org:')
-    const identifier = isOrg ? data.cacheKey.replace('org:', '') : data.cacheKey
+  const isOrg = data.cacheKey.startsWith('org:')
+  const identifier = isOrg ? data.cacheKey.replace('org:', '') : data.cacheKey
 
-    let stats
-    if (isOrg) {
-      stats = await fetchGitHubOwnerStats(identifier)
-    } else {
-      stats = await fetchGitHubRepoStats(identifier)
-    }
+  let stats
+  if (isOrg) {
+    stats = await fetchGitHubOwnerStats(identifier)
+  } else {
+    stats = await fetchGitHubRepoStats(identifier)
+  }
 
-    await setCachedGitHubStats(data.cacheKey, stats, 1)
+  await setCachedGitHubStats(data.cacheKey, stats, 1)
+  await rebuildOssStatsCache('tanstack')
 
-    return {
-      success: true,
-      cacheKey: data.cacheKey,
-      stats,
-    }
-  })
+  return {
+    success: true,
+    cacheKey: data.cacheKey,
+    stats,
+  }
+}
 
 /**
  * Refresh all GitHub stats cache entries
  * Processes all libraries from the libraries array, plus any existing org cache entries
  */
-export const refreshAllGitHubStats = createServerFn({ method: 'POST' }).handler(
-  async () => {
-    await requireCapability({ data: { capability: 'admin' } })
-
-    const results = []
-    const errors = []
-
-    // First, refresh all libraries from the libraries array
-    const { libraries } = await import('~/libraries')
-    console.log(
-      `[GitHub Stats Refresh] Processing ${libraries.length} libraries from libraries array`,
-    )
-
-    for (let i = 0; i < libraries.length; i++) {
-      const library = libraries[i]
-      if (!library.repo) {
-        console.log(
-          `[GitHub Stats Refresh] Skipping library ${library.id} - no repo`,
-        )
-        continue
-      }
+export async function refreshAllGitHubStats() {
+  await requireCapability({ data: { capability: 'admin' } })
 
-      try {
-        const stats = await fetchGitHubRepoStats(library.repo)
-        await setCachedGitHubStats(library.repo, stats, 1)
+  const results = []
+  const errors = []
 
-        results.push({
-          cacheKey: library.repo,
-          success: true,
-          stats,
-        })
+  // First, refresh all libraries from the libraries array
+  const { libraries } = await import('~/libraries')
+  console.log(
+    `[GitHub Stats Refresh] Processing ${libraries.length} libraries from libraries array`,
+  )
 
-        // Add delay between requests to avoid rate limiting (except for last item)
-        if (i < libraries.length - 1) {
-          await new Promise((resolve) => setTimeout(resolve, 500))
-        }
-      } catch (error) {
-        const errorMessage =
-          error instanceof Error ? error.message : String(error)
-        console.error(
-          `[GitHub Stats Refresh] Failed to refresh ${library.repo}:`,
-          errorMessage,
-        )
-        errors.push({
-          cacheKey: library.repo,
-          success: false,
-          error: errorMessage,
-        })
-      }
+  for (let i = 0; i < libraries.length; i++) {
+    const library = libraries[i]
+    if (!library.repo) {
+      console.log(
+        `[GitHub Stats Refresh] Skipping library ${library.id} - no repo`,
+      )
+      continue
     }
 
-    // Also refresh any org-level cache entries (like "org:tanstack")
-    const orgEntries = await db.query.githubStatsCache.findMany({
-      where: like(githubStatsCache.cacheKey, 'org:%'),
-    })
-
-    for (let i = 0; i < orgEntries.length; i++) {
-      const entry = orgEntries[i]
-      try {
-        const identifier = entry.cacheKey.replace('org:', '')
-        const stats = await fetchGitHubOwnerStats(identifier)
-        await setCachedGitHubStats(entry.cacheKey, stats, 1)
+    try {
+      const stats = await fetchGitHubRepoStats(library.repo)
+      await setCachedGitHubStats(library.repo, stats, 1)
 
-        results.push({
-          cacheKey: entry.cacheKey,
-          success: true,
-          stats,
-        })
+      results.push({
+        cacheKey: library.repo,
+        success: true,
+        stats,
+      })
 
-        // Add delay between requests to avoid rate limiting (except for last item)
-        if (i < orgEntries.length - 1) {
-          await new Promise((resolve) => setTimeout(resolve, 500))
-        }
-      } catch (error) {
-        const errorMessage =
-          error instanceof Error ? error.message : String(error)
-        console.error(
-          `[GitHub Stats Refresh] Failed to refresh ${entry.cacheKey}:`,
-          errorMessage,
-        )
-        errors.push({
-          cacheKey: entry.cacheKey,
-          success: false,
-          error: errorMessage,
-        })
+      // Add delay between requests to avoid rate limiting (except for last item)
+      if (i < libraries.length - 1) {
+        await new Promise((resolve) => setTimeout(resolve, 500))
       }
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : String(error)
+      console.error(
+        `[GitHub Stats Refresh] Failed to refresh ${library.repo}:`,
+        errorMessage,
+      )
+      errors.push({
+        cacheKey: library.repo,
+        success: false,
+        error: errorMessage,
+      })
     }
+  }
 
-    return {
-      success: true,
-      refreshed: results.length,
-      failed: errors.length,
-      results,
-      errors,
-    }
-  },
-)
-
-/**
- * List all NPM packages with their stats
- */
-export const listNpmPackages = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      libraryId: v.optional(v.string()),
-      search: v.optional(v.string()),
-    }),
-  )
-  .handler(async ({ data }) => {
-    await requireCapability({ data: { capability: 'admin' } })
-
-    const whereConditions = []
-    if (data.libraryId) {
-      whereConditions.push(eq(npmPackages.libraryId, data.libraryId))
-    }
-    if (data.search) {
-      whereConditions.push(like(npmPackages.packageName, `%${data.search}%`))
-    }
-
-    const whereClause =
-      whereConditions.length > 0 ? and(...whereConditions) : undefined
-
-    const packages = await db.query.npmPackages.findMany({
-      where: whereClause,
-      orderBy: [desc(npmPackages.updatedAt)],
-    })
-
-    return {
-      packages: packages.map((pkg) => ({
-        id: pkg.id,
-        packageName: pkg.packageName,
-        githubRepo: pkg.githubRepo,
-        libraryId: pkg.libraryId,
-        isLegacy: pkg.isLegacy,
-        downloads: pkg.downloads,
-        ratePerDay: pkg.ratePerDay,
-        statsExpiresAt: pkg.statsExpiresAt,
-        metadataCheckedAt: pkg.metadataCheckedAt,
-        createdAt: pkg.createdAt,
-        updatedAt: pkg.updatedAt,
-      })),
-    }
+  // Also refresh any org-level cache entries (like "org:tanstack")
+  const orgEntries = await db.query.githubStatsCache.findMany({
+    where: like(githubStatsCache.cacheKey, 'org:%'),
   })
 
-/**
- * Refresh NPM stats for a specific package
- */
-export const refreshNpmPackageStats = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      packageName: v.string(),
-    }),
-  )
-  .handler(async ({ data }) => {
-    await requireCapability({ data: { capability: 'admin' } })
-
+  for (let i = 0; i < orgEntries.length; i++) {
+    const entry = orgEntries[i]
     try {
-      // Use wide date range to get all-time download counts
-      const response = await fetch(
-        `https://api.npmjs.org/downloads/point/2010-01-01:2030-12-31/${data.packageName}`,
-        {
-          headers: {
-            Accept: 'application/json',
-            'User-Agent': 'TanStack-Stats',
-          },
-        },
-      )
-
-      if (!response.ok) {
-        if (response.status === 404) {
-          await setCachedNpmPackageStats(data.packageName, 0, 1)
-          return {
-            success: true,
-            packageName: data.packageName,
-            downloads: 0,
-            message: 'Package not found, cached as 0',
-          }
-        }
-        throw new Error(`NPM API error: ${response.status}`)
-      }
-
-      const apiData = await response.json()
-      const downloads = apiData.downloads ?? 0
-
-      await setCachedNpmPackageStats(data.packageName, downloads, 24)
+      const identifier = entry.cacheKey.replace('org:', '')
+      const stats = await fetchGitHubOwnerStats(identifier)
+      await setCachedGitHubStats(entry.cacheKey, stats, 1)
 
-      return {
+      results.push({
+        cacheKey: entry.cacheKey,
         success: true,
-        packageName: data.packageName,
-        downloads,
+        stats,
+      })
+
+      // Add delay between requests to avoid rate limiting (except for last item)
+      if (i < orgEntries.length - 1) {
+        await new Promise((resolve) => setTimeout(resolve, 500))
       }
     } catch (error) {
-      return {
+      const errorMessage =
+        error instanceof Error ? error.message : String(error)
+      console.error(
+        `[GitHub Stats Refresh] Failed to refresh ${entry.cacheKey}:`,
+        errorMessage,
+      )
+      errors.push({
+        cacheKey: entry.cacheKey,
         success: false,
-        packageName: data.packageName,
-        error: error instanceof Error ? error.message : String(error),
-      }
+        error: errorMessage,
+      })
     }
-  })
-
-/**
- * List NPM org stats cache entries
- */
-export const listNpmOrgStatsCache = createServerFn({ method: 'POST' }).handler(
-  async () => {
-    await requireCapability({ data: { capability: 'admin' } })
-
-    const entries = await db.query.npmOrgStatsCache.findMany({
-      orderBy: [desc(npmOrgStatsCache.updatedAt)],
-    })
-
-    return Promise.all(
-      entries.map(async (entry) => {
-        // Calculate total ratePerDay from packages in the database
-        const { like, or } = await import('drizzle-orm')
-        const { libraries } = await import('~/libraries')
-
-        const legacyPackages: string[] = []
-        for (const library of libraries) {
-          if (
-            'legacyPackages' in library &&
-            Array.isArray(library.legacyPackages)
-          ) {
-            legacyPackages.push(...library.legacyPackages)
-          }
-        }
-
-        let packages = await db.query.npmPackages.findMany({
-          where: like(npmPackages.packageName, `@${entry.orgName}/%`),
-        })
-
-        if (legacyPackages.length > 0) {
-          const legacyResults = await db.query.npmPackages.findMany({
-            where: or(
-              ...legacyPackages.map((pkg) => eq(npmPackages.packageName, pkg)),
-            ),
-          })
-          packages = [...packages, ...legacyResults]
-        }
-
-        const totalRatePerDay = packages.reduce(
-          (sum, pkg) => sum + (pkg.ratePerDay ?? 0),
-          0,
-        )
-
-        return {
-          orgName: entry.orgName,
-          totalDownloads: entry.totalDownloads,
-          ratePerDay: totalRatePerDay > 0 ? totalRatePerDay : undefined,
-          packageStats: entry.packageStats as never,
-          expiresAt: entry.expiresAt,
-          createdAt: entry.createdAt,
-          updatedAt: entry.updatedAt,
-        }
-      }),
-    )
-  },
-)
-
-/**
- * Get library-level NPM stats (from cache only)
- */
-export const getLibraryNpmStats = createServerFn({ method: 'POST' }).handler(
-  async () => {
-    await requireCapability({ data: { capability: 'admin' } })
-
-    const { getAllCachedLibraryStats } = await import('./stats-db.server')
-    const { libraries } = await import('~/libraries')
-
-    const cachedStats = await getAllCachedLibraryStats()
-    const statsMap = new Map(cachedStats.map((s) => [s.libraryId, s]))
-
-    // Get all packages to calculate ratePerDay for each library
-    const allPackages = await db.query.npmPackages.findMany()
-
-    // Return stats for all libraries, using cached data when available
-    return libraries.map((library) => {
-      const cached = statsMap.get(library.id)
-
-      // Calculate ratePerDay by summing up all packages' ratePerDay for this library
-      const libraryPackages = allPackages.filter(
-        (pkg) => pkg.libraryId === library.id,
-      )
-      const ratePerDay = libraryPackages.reduce(
-        (sum, pkg) => sum + (pkg.ratePerDay ?? 0),
-        0,
-      )
+  }
 
-      if (!cached) {
-        return {
-          libraryId: library.id,
-          libraryName: library.name,
-          packageCount: 0,
-          totalDownloads: 0,
-          previousTotalDownloads: null,
-          ratePerDay: ratePerDay > 0 ? ratePerDay : null,
-        }
-      }
+  await rebuildOssStatsCache('tanstack')
 
-      return {
-        libraryId: library.id,
-        libraryName: library.name,
-        packageCount: cached.packageCount,
-        totalDownloads: cached.totalDownloads,
-        previousTotalDownloads: cached.previousTotalDownloads,
-        ratePerDay: ratePerDay > 0 ? ratePerDay : null,
-      }
-    })
-  },
-)
+  return {
+    success: true,
+    refreshed: results.length,
+    failed: errors.length,
+    results,
+    errors,
+  }
+}
 
-/**
- * Complete atomic refresh of all NPM stats
- * Wraps refreshNpmOrgStats which handles:
- * 1. Package discovery
- * 2. Fresh stats fetch with growth rates
- * 3. Library cache rebuild
- * 4. Org cache update
- */
-export const refreshAllNpmStats = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      org: v.optional(v.string(), 'tanstack'),
-    }),
-  )
-  .handler(async ({ data }) => {
-    console.log(
-      `[Admin] refreshAllNpmStats handler called with org: ${data.org}`,
-    )
+export async function refreshAllNpmStats({ data }: { data: any }) {
+  console.log(`[Admin] refreshAllNpmStats handler called with org: ${data.org}`)
 
-    await requireCapability({ data: { capability: 'admin' } })
+  await requireCapability({ data: { capability: 'admin' } })
 
-    console.log(`[Admin] Starting complete NPM stats refresh for ${data.org}`)
+  const summary = await refreshHomepageNpmStatsSummary({ org: data.org })
 
-    // refreshNpmOrgStats handles everything atomically (always bypasses cache)
-    const stats = await refreshNpmOrgStats(data.org)
-
-    console.log('[Admin] Complete NPM stats refresh finished')
-
-    return {
-      success: true,
-      org: data.org,
-      stats,
-    }
-  })
+  return {
+    success: true,
+    org: data.org,
+    summary,
+  }
+}
diff --git a/src/utils/stats-db.server.ts b/src/utils/stats-db.server.ts
index 8dc5d6ac4..0c64cbeb6 100644
--- a/src/utils/stats-db.server.ts
+++ b/src/utils/stats-db.server.ts
@@ -5,791 +5,309 @@
  */
 
 import { db } from '~/db/client'
-import {
-  githubStatsCache,
-  npmPackages,
-  npmOrgStatsCache,
-  npmLibraryStatsCache,
-  npmDownloadChunks,
-} from '~/db/schema'
-import { eq, inArray, and } from 'drizzle-orm'
-import type { GitHubStats, NpmPackageStats, NpmStats } from './stats.server'
-
-/**
- * Batch fetch cached NPM package stats for multiple packages
- * Much more efficient than calling getCachedNpmPackageStats individually
- * Returns a map of packageName -> NpmPackageStats
- */
-export async function getBatchCachedNpmPackageStats(
-  packageNames: string[],
-): Promise<Map<string, NpmPackageStats>> {
-  const results = new Map<string, NpmPackageStats>()
-
-  if (packageNames.length === 0) {
-    return results
-  }
-
-  try {
-    // Single query to fetch all packages at once
-    const cached = await db.query.npmPackages.findMany({
-      where: inArray(npmPackages.packageName, packageNames),
-    })
-
-    // Process all cached results
-    for (const pkg of cached) {
-      if (pkg.downloads !== null) {
-        results.set(pkg.packageName, {
-          downloads: pkg.downloads,
-          ratePerDay: pkg.ratePerDay ?? undefined,
-          updatedAt: pkg.updatedAt.getTime(),
-        })
-      }
-    }
-
-    return results
-  } catch (error) {
-    console.error('[NPM Stats Cache] Error reading batch cache:', error)
-    return results
-  }
+import { githubStatsCache, npmDownloadChunks, ossStatsCache } from '~/db/schema'
+import type { OssStatsCache } from '~/db/schema'
+import { desc, eq, gte, inArray, and, lte } from 'drizzle-orm'
+import type { GitHubStats, NpmStats, OSSStatsWithDelta } from './stats.types'
+import type { HomepageNpmStatsSummary } from './homepage-npm-stats.server'
+
+type OssStatsScopeType = 'org' | 'library'
+
+type OssStatsRowInput = {
+  github: GitHubStats
+  previousGithub?: GitHubStats | null
+  githubUpdatedAt?: Date
+  npm: NpmStats
+  npmPackageCount?: number
+  npmUpdatedAt?: Date
+  scopeKey: string
+  scopeType: OssStatsScopeType
+  timeDelta?: number
 }
 
-/**
- * Store NPM package stats in cache with calculated growth rate
- * Also incrementally updates library and org-level caches
- */
-export async function setCachedNpmPackageStats(
-  packageName: string,
-  downloads: number,
-  ttlHours: number = 24,
-  ratePerDay?: number,
-): Promise<void> {
-  try {
-    const expiresAt = new Date()
-    expiresAt.setHours(expiresAt.getHours() + ttlHours)
-    const now = new Date()
-
-    const existing = await db.query.npmPackages.findFirst({
-      where: eq(npmPackages.packageName, packageName),
-    })
-
-    const oldDownloads = existing?.downloads ?? 0
-    const downloadDelta = downloads - oldDownloads
-    // Get libraryId from existing record, or we'll need to look it up after update
-    const libraryId = existing?.libraryId
-
-    if (existing) {
-      // Update stats with new data
-      await db
-        .update(npmPackages)
-        .set({
-          downloads, // New download count
-          ratePerDay: ratePerDay ?? null, // Store calculated growth rate
-          statsExpiresAt: expiresAt,
-          updatedAt: now,
-        })
-        .where(eq(npmPackages.packageName, packageName))
-    } else {
-      try {
-        // First time inserting package
-        await db.insert(npmPackages).values({
-          packageName,
-          downloads,
-          ratePerDay: ratePerDay ?? null,
-          statsExpiresAt: expiresAt,
-        })
-      } catch (insertError: any) {
-        // Handle race condition: if another request inserted the same package concurrently,
-        // try updating instead
-        if (insertError?.code === '23505') {
-          // Unique constraint violation - fetch existing and update properly
-          const raceExisting = await db.query.npmPackages.findFirst({
-            where: eq(npmPackages.packageName, packageName),
-          })
-          if (raceExisting) {
-            await db
-              .update(npmPackages)
-              .set({
-                downloads,
-                ratePerDay: ratePerDay ?? null,
-                statsExpiresAt: expiresAt,
-                updatedAt: now,
-              })
-              .where(eq(npmPackages.packageName, packageName))
-          }
-        } else {
-          throw insertError
-        }
-      }
-    }
-
-    // Get libraryId after update (in case it was set during package discovery)
-    const updated = await db.query.npmPackages.findFirst({
-      where: eq(npmPackages.packageName, packageName),
-    })
-    const finalLibraryId = updated?.libraryId ?? libraryId
-
-    // Incrementally update library cache if libraryId exists
-    if (finalLibraryId && downloadDelta !== 0) {
-      await updateLibraryStatsCache(finalLibraryId, downloadDelta)
-    }
-
-    // Incrementally update org cache (always update for @tanstack packages)
-    if (packageName.startsWith('@tanstack/') && downloadDelta !== 0) {
-      await updateOrgStatsCache(
-        'tanstack',
-        packageName,
-        oldDownloads,
-        downloads,
-      )
-    }
-  } catch (error) {
-    console.error('[NPM Stats Cache] Error writing cache:', error)
-    // Don't throw - cache failures shouldn't break the request
-  }
+function isGitHubStats(value: unknown): value is GitHubStats {
+  return (
+    !!value &&
+    typeof value === 'object' &&
+    typeof Reflect.get(value, 'starCount') === 'number' &&
+    typeof Reflect.get(value, 'contributorCount') === 'number'
+  )
 }
 
-/**
- * Incrementally update library stats cache
- */
-async function updateLibraryStatsCache(
-  libraryId: string,
-  downloadDelta: number,
-): Promise<void> {
-  try {
-    const existing = await db.query.npmLibraryStatsCache.findFirst({
-      where: eq(npmLibraryStatsCache.libraryId, libraryId),
-    })
-
-    if (existing) {
-      await db
-        .update(npmLibraryStatsCache)
-        .set({
-          previousTotalDownloads: existing.totalDownloads,
-          totalDownloads: existing.totalDownloads + downloadDelta,
-          updatedAt: new Date(),
-        })
-        .where(eq(npmLibraryStatsCache.libraryId, libraryId))
-    } else {
-      // Get package count for this library
-      const packages = await db.query.npmPackages.findMany({
-        where: eq(npmPackages.libraryId, libraryId),
-      })
-      const totalDownloads = packages.reduce(
-        (sum, pkg) => sum + (pkg.downloads ?? 0),
-        0,
-      )
-
-      await db.insert(npmLibraryStatsCache).values({
-        libraryId,
-        totalDownloads,
-        packageCount: packages.length,
-        previousTotalDownloads: null,
-      })
-    }
-  } catch (error) {
-    console.error(
-      `[Library Stats Cache] Error updating cache for ${libraryId}:`,
-      error,
-    )
+function getGitHubStats(value: unknown): GitHubStats {
+  if (isGitHubStats(value)) {
+    return value
   }
-}
-
-/**
- * Incrementally update org stats cache
- */
-async function updateOrgStatsCache(
-  orgName: string,
-  packageName: string,
-  oldDownloads: number,
-  newDownloads: number,
-): Promise<void> {
-  try {
-    const existing = await db.query.npmOrgStatsCache.findFirst({
-      where: eq(npmOrgStatsCache.orgName, orgName),
-    })
-
-    if (existing) {
-      const packageStats = (existing.packageStats as Record<string, any>) || {}
-      const downloadDelta = newDownloads - oldDownloads
-
-      // Update package stats
-      packageStats[packageName] = {
-        downloads: newDownloads,
-        previousDownloads: oldDownloads,
-      }
 
-      await db
-        .update(npmOrgStatsCache)
-        .set({
-          totalDownloads: existing.totalDownloads + downloadDelta,
-          packageStats,
-          updatedAt: new Date(),
-        })
-        .where(eq(npmOrgStatsCache.orgName, orgName))
-    } else {
-      // If org cache doesn't exist, we'll need to compute it from all packages
-      // This should be rare - scheduled tasks should create it
-      console.warn(
-        `[Org Stats Cache] Cache doesn't exist for ${orgName}, skipping incremental update`,
-      )
-    }
-  } catch (error) {
-    console.error(
-      `[Org Stats Cache] Error updating cache for ${orgName}:`,
-      error,
-    )
+  return {
+    starCount: 0,
+    contributorCount: 0,
   }
 }
 
-/**
- * Get cached NPM org stats if available and not expired
- */
-export async function getCachedNpmOrgStats(
-  orgName: string,
-): Promise<NpmStats | null> {
-  try {
-    const cached = await db.query.npmOrgStatsCache.findFirst({
-      where: eq(npmOrgStatsCache.orgName, orgName),
-    })
-
-    if (cached && cached.expiresAt > new Date()) {
-      console.log(`[NPM Org Stats Cache] Cache hit for org ${orgName}`)
-
-      // Calculate org-level ratePerDay from packages in the database
-      const { like, or } = await import('drizzle-orm')
-      const { libraries } = await import('~/libraries')
-
-      const legacyPackages: string[] = []
-      for (const library of libraries) {
-        if (
-          'legacyPackages' in library &&
-          Array.isArray(library.legacyPackages)
-        ) {
-          legacyPackages.push(...library.legacyPackages)
-        }
-      }
-
-      let packages = await db.query.npmPackages.findMany({
-        where: like(npmPackages.packageName, `@${orgName}/%`),
-      })
-
-      if (legacyPackages.length > 0) {
-        const legacyResults = await db.query.npmPackages.findMany({
-          where: or(
-            ...legacyPackages.map((pkg) => eq(npmPackages.packageName, pkg)),
-          ),
-        })
-        packages = [...packages, ...legacyResults]
-      }
-
-      const totalRatePerDay = packages.reduce(
-        (sum, pkg) => sum + (pkg.ratePerDay ?? 0),
-        0,
-      )
-
-      return {
-        totalDownloads: cached.totalDownloads,
-        packageStats: cached.packageStats as Record<string, NpmPackageStats>,
-        ratePerDay: totalRatePerDay > 0 ? totalRatePerDay : undefined,
-        updatedAt: cached.updatedAt.getTime(),
-      }
-    }
-
-    return null
-  } catch (error) {
-    console.error('[NPM Org Stats Cache] Error reading cache:', error)
-    return null
+function calculateGithubDelta(
+  current: GitHubStats,
+  previous: GitHubStats | null,
+) {
+  if (!previous) {
+    return {}
   }
-}
-
-/**
- * Get expired NPM org stats cache if available (for fallback when cache is expired)
- */
-export async function getExpiredNpmOrgStats(
-  orgName: string,
-): Promise<NpmStats | null> {
-  try {
-    const cached = await db.query.npmOrgStatsCache.findFirst({
-      where: eq(npmOrgStatsCache.orgName, orgName),
-    })
-
-    if (cached) {
-      console.log(
-        `[NPM Org Stats Cache] Using expired cache for org ${orgName}`,
-      )
-
-      // Calculate org-level ratePerDay from packages in the database
-      const { like, or } = await import('drizzle-orm')
-      const { libraries } = await import('~/libraries')
-
-      const legacyPackages: string[] = []
-      for (const library of libraries) {
-        if (
-          'legacyPackages' in library &&
-          Array.isArray(library.legacyPackages)
-        ) {
-          legacyPackages.push(...library.legacyPackages)
-        }
-      }
-
-      let packages = await db.query.npmPackages.findMany({
-        where: like(npmPackages.packageName, `@${orgName}/%`),
-      })
-
-      if (legacyPackages.length > 0) {
-        const legacyResults = await db.query.npmPackages.findMany({
-          where: or(
-            ...legacyPackages.map((pkg) => eq(npmPackages.packageName, pkg)),
-          ),
-        })
-        packages = [...packages, ...legacyResults]
-      }
-
-      const totalRatePerDay = packages.reduce(
-        (sum, pkg) => sum + (pkg.ratePerDay ?? 0),
-        0,
-      )
-
-      return {
-        totalDownloads: cached.totalDownloads,
-        packageStats: cached.packageStats as Record<string, NpmPackageStats>,
-        ratePerDay: totalRatePerDay > 0 ? totalRatePerDay : undefined,
-        updatedAt: cached.updatedAt.getTime(),
-      }
-    }
 
-    return null
-  } catch (error) {
-    console.error('[NPM Org Stats Cache] Error reading expired cache:', error)
-    return null
+  return {
+    githubDeltaStarCount: current.starCount - previous.starCount,
+    githubDeltaContributorCount:
+      current.contributorCount - previous.contributorCount,
+    githubDeltaDependentCount:
+      current.dependentCount !== undefined &&
+      previous.dependentCount !== undefined
+        ? current.dependentCount - previous.dependentCount
+        : null,
+    githubDeltaForkCount:
+      current.forkCount !== undefined && previous.forkCount !== undefined
+        ? current.forkCount - previous.forkCount
+        : null,
   }
 }
 
-/**
- * Store NPM org stats in cache, preserving previous stats for rate calculation
- */
-export async function setCachedNpmOrgStats(
-  orgName: string,
-  stats: NpmStats,
-  ttlHours: number = 24,
-): Promise<void> {
-  try {
-    const expiresAt = new Date()
-    expiresAt.setHours(expiresAt.getHours() + ttlHours)
-    const now = new Date()
-
-    const existing = await db.query.npmOrgStatsCache.findFirst({
-      where: eq(npmOrgStatsCache.orgName, orgName),
-    })
-
-    if (existing) {
-      // Update stats
-      await db
-        .update(npmOrgStatsCache)
-        .set({
-          totalDownloads: stats.totalDownloads,
-          packageStats: stats.packageStats,
-          expiresAt,
-          updatedAt: now,
-        })
-        .where(eq(npmOrgStatsCache.orgName, orgName))
-      console.log(
-        `[NPM Org Stats Cache] Updated cache for org ${orgName} (expires at ${expiresAt.toISOString()})`,
-      )
-    } else {
-      // First time
-      await db.insert(npmOrgStatsCache).values({
-        orgName,
-        totalDownloads: stats.totalDownloads,
-        packageStats: stats.packageStats,
-        expiresAt,
-      })
-      console.log(
-        `[NPM Org Stats Cache] Created cache for org ${orgName} (expires at ${expiresAt.toISOString()})`,
-      )
-    }
-  } catch (error) {
-    console.error('[NPM Org Stats Cache] Error writing cache:', error)
-    // Don't throw - cache failures shouldn't break the request
+function mapOssStatsRow(row: OssStatsCache): OSSStatsWithDelta {
+  return {
+    github: {
+      contributorCount: row.githubContributorCount,
+      dependentCount: row.githubDependentCount ?? undefined,
+      forkCount: row.githubForkCount ?? undefined,
+      repositoryCount: row.githubRepositoryCount ?? undefined,
+      starCount: row.githubStarCount,
+    },
+    npm: {
+      ratePerDay: row.npmRatePerDay ?? undefined,
+      totalDownloads: row.npmTotalDownloads,
+      updatedAt: row.npmUpdatedAt?.getTime(),
+    },
+    delta:
+      row.githubDeltaStarCount !== null ||
+      row.githubDeltaContributorCount !== null ||
+      row.githubDeltaDependentCount !== null ||
+      row.githubDeltaForkCount !== null
+        ? {
+            github: {
+              contributorCount: row.githubDeltaContributorCount ?? undefined,
+              dependentCount: row.githubDeltaDependentCount ?? undefined,
+              forkCount: row.githubDeltaForkCount ?? undefined,
+              starCount: row.githubDeltaStarCount ?? undefined,
+            },
+          }
+        : undefined,
+    timeDelta: row.timeDeltaMs ?? undefined,
   }
 }
 
-/**
- * Get cached library stats
- */
-export async function getCachedLibraryStats(libraryId: string): Promise<{
-  libraryId: string
-  totalDownloads: number
-  packageCount: number
-  previousTotalDownloads: number | null
-} | null> {
+export async function getCachedOssStats(
+  scopeType: OssStatsScopeType,
+  scopeKey: string,
+): Promise<OSSStatsWithDelta | null> {
   try {
-    const cached = await db.query.npmLibraryStatsCache.findFirst({
-      where: eq(npmLibraryStatsCache.libraryId, libraryId),
+    const row = await db.query.ossStatsCache.findFirst({
+      where: and(
+        eq(ossStatsCache.scopeType, scopeType),
+        eq(ossStatsCache.scopeKey, scopeKey),
+      ),
     })
 
-    if (cached) {
-      return {
-        libraryId: cached.libraryId,
-        totalDownloads: cached.totalDownloads,
-        packageCount: cached.packageCount,
-        previousTotalDownloads: cached.previousTotalDownloads,
-      }
-    }
-
-    return null
+    return row ? mapOssStatsRow(row) : null
   } catch (error) {
     console.error(
-      `[Library Stats Cache] Error reading cache for ${libraryId}:`,
+      `[OSS Stats Cache] Error reading ${scopeType}:${scopeKey}:`,
       error,
     )
     return null
   }
 }
 
-/**
- * Get all cached library stats
- */
-export async function getAllCachedLibraryStats(): Promise<
-  Array<{
-    libraryId: string
-    totalDownloads: number
-    packageCount: number
-    previousTotalDownloads: number | null
-  }>
-> {
-  try {
-    const allCached = await db.query.npmLibraryStatsCache.findMany({
-      orderBy: [npmLibraryStatsCache.libraryId],
+export async function upsertOssStatsCacheRow({
+  github,
+  previousGithub,
+  githubUpdatedAt,
+  npm,
+  npmPackageCount,
+  npmUpdatedAt,
+  scopeKey,
+  scopeType,
+  timeDelta,
+}: OssStatsRowInput): Promise<void> {
+  const now = new Date()
+
+  await db
+    .insert(ossStatsCache)
+    .values({
+      scopeType,
+      scopeKey,
+      githubStarCount: github.starCount,
+      githubContributorCount: github.contributorCount,
+      githubDependentCount: github.dependentCount ?? null,
+      githubForkCount: github.forkCount ?? null,
+      githubRepositoryCount: github.repositoryCount ?? null,
+      ...calculateGithubDelta(github, previousGithub ?? null),
+      githubUpdatedAt: githubUpdatedAt ?? now,
+      npmTotalDownloads: npm.totalDownloads,
+      npmRatePerDay: npm.ratePerDay ?? null,
+      npmPackageCount: npmPackageCount ?? 0,
+      npmUpdatedAt: npmUpdatedAt ?? now,
+      timeDeltaMs: timeDelta ?? null,
+      updatedAt: now,
+    })
+    .onConflictDoUpdate({
+      target: [ossStatsCache.scopeType, ossStatsCache.scopeKey],
+      set: {
+        githubStarCount: github.starCount,
+        githubContributorCount: github.contributorCount,
+        githubDependentCount: github.dependentCount ?? null,
+        githubForkCount: github.forkCount ?? null,
+        githubRepositoryCount: github.repositoryCount ?? null,
+        ...calculateGithubDelta(github, previousGithub ?? null),
+        githubUpdatedAt: githubUpdatedAt ?? now,
+        npmTotalDownloads: npm.totalDownloads,
+        npmRatePerDay: npm.ratePerDay ?? null,
+        npmPackageCount: npmPackageCount ?? 0,
+        npmUpdatedAt: npmUpdatedAt ?? now,
+        timeDeltaMs: timeDelta ?? null,
+        updatedAt: now,
+      },
     })
-
-    return allCached.map((cached) => ({
-      libraryId: cached.libraryId,
-      totalDownloads: cached.totalDownloads,
-      packageCount: cached.packageCount,
-      previousTotalDownloads: cached.previousTotalDownloads,
-    }))
-  } catch (error) {
-    console.error('[Library Stats Cache] Error reading all cache:', error)
-    return []
-  }
 }
 
-/**
- * Get all registered packages for a specific library or all packages
- */
-export async function getRegisteredPackages(
-  libraryId?: string,
-): Promise<string[]> {
-  try {
-    const packages = libraryId
-      ? await db.query.npmPackages.findMany({
-          where: eq(npmPackages.libraryId, libraryId),
-        })
-      : await db.query.npmPackages.findMany()
-
-    return packages.map((p) => p.packageName)
-  } catch (error) {
-    console.error(
-      '[Package Registry] Error fetching packages:',
-      error instanceof Error ? error.message : String(error),
-    )
-    return []
+function getExistingOssNpmStats(row: OssStatsCache | undefined) {
+  return {
+    npm: {
+      totalDownloads: row?.npmTotalDownloads ?? 0,
+      ratePerDay: row?.npmRatePerDay ?? undefined,
+      updatedAt: row?.npmUpdatedAt?.getTime(),
+    } satisfies NpmStats,
+    packageCount: row?.npmPackageCount ?? 0,
+    updatedAt: row?.npmUpdatedAt,
   }
 }
 
-/**
- * Discover and register all packages for an org
- * This fetches all packages from npm registry and registers them in the database
- */
-export async function discoverAndRegisterPackages(org: string): Promise<void> {
-  try {
-    // Fetch all packages in the org
-    const response = await fetch(
-      `https://registry.npmjs.org/-/org/${org}/package`,
-      {
-        headers: {
-          Accept: 'application/json',
-          'User-Agent': 'TanStack-Stats',
-        },
-      },
-    )
-
-    if (!response.ok) {
-      throw new Error(
-        `NPM Registry API error: ${response.status} ${response.statusText}`,
-      )
-    }
-
-    const data = await response.json()
-    let packageNames = Object.keys(data)
-
-    // Import libraries to map packages to library IDs
-    const { libraries } = await import('~/libraries')
-
-    // Add legacy (non-scoped) packages from library definitions
-    // The org endpoint only returns @tanstack/* scoped packages
-    const legacyPackages: string[] = []
-    for (const library of libraries) {
-      if (
-        'legacyPackages' in library &&
-        Array.isArray(library.legacyPackages)
-      ) {
-        legacyPackages.push(...library.legacyPackages)
-      }
-    }
-
-    if (legacyPackages.length > 0) {
-      packageNames = [...packageNames, ...legacyPackages]
-    }
-
-    // For each package, check if it exists and register/update metadata
-    for (const packageName of packageNames) {
-      try {
-        // Check if package already exists
-        const existing = await db.query.npmPackages.findFirst({
-          where: eq(npmPackages.packageName, packageName),
-        })
-
-        // Try to determine libraryId from package name
-        let libraryId: string | null = null
-        let isLegacy = false
-
-        // Check for legacy packages first (exact match)
-        for (const library of libraries) {
-          if (
-            'legacyPackages' in library &&
-            Array.isArray(library.legacyPackages) &&
-            library.legacyPackages.includes(packageName)
-          ) {
-            libraryId = library.id
-            isLegacy = true
-            break
-          }
-        }
-
-        // If not a legacy package, try to map based on package name patterns
-        if (!libraryId) {
-          for (const library of libraries) {
-            const libraryName = library.id
-
-            // Special handling for "react-charts" library id
-            if (libraryName === 'react-charts') {
-              if (
-                packageName === `@${org}/react-charts` ||
-                packageName.includes('/react-charts')
-              ) {
-                libraryId = libraryName
-                break
-              }
-            }
-
-            // Special handling for "create-tsrouter-app" library id
-            if (libraryName === 'create-tsrouter-app') {
-              if (
-                packageName === `@${org}/create-router` ||
-                packageName === `@${org}/create-start` ||
-                packageName.includes('/create-router') ||
-                packageName.includes('/create-start')
-              ) {
-                libraryId = libraryName
-                break
-              }
-            }
-
-            // Check various patterns:
-            // 1. Exact match: @tanstack/query
-            // 2. Prefixed: @tanstack/react-query, @tanstack/vue-query
-            // 3. Suffixed: @tanstack/query-core, @tanstack/query-devtools
-            if (
-              packageName === `@${org}/${libraryName}` ||
-              packageName.includes(`/${libraryName}-`) ||
-              packageName.includes(`-${libraryName}-`) ||
-              packageName.includes(`-${libraryName}`) ||
-              new RegExp(`^@${org}/[a-z]+-${libraryName}$`, 'i').test(
-                packageName,
-              )
-            ) {
-              libraryId = libraryName
-              break
-            }
-          }
-        }
+function getOrgNpmStatsFromSummary(
+  summary: HomepageNpmStatsSummary | null,
+  existing: OssStatsCache | undefined,
+) {
+  if (!summary) {
+    return getExistingOssNpmStats(existing)
+  }
 
-        const now = new Date()
-
-        if (existing) {
-          // Update metadata if not checked recently (within last 7 days)
-          const shouldUpdate =
-            !existing.metadataCheckedAt ||
-            now.getTime() - existing.metadataCheckedAt.getTime() >
-              7 * 24 * 60 * 60 * 1000
-
-          if (shouldUpdate || existing.libraryId !== libraryId) {
-            await db
-              .update(npmPackages)
-              .set({
-                libraryId,
-                isLegacy,
-                metadataCheckedAt: now,
-                updatedAt: now,
-              })
-              .where(eq(npmPackages.packageName, packageName))
-          }
-        } else {
-          // Register new package
-          await db.insert(npmPackages).values({
-            packageName,
-            libraryId,
-            isLegacy,
-            metadataCheckedAt: now,
-            downloads: null,
-            statsExpiresAt: null,
-          })
-        }
-      } catch (error) {
-        console.error(
-          `[Package Discovery] Error processing ${packageName}:`,
-          error instanceof Error ? error.message : String(error),
-        )
-        // Continue with next package
-      }
-    }
-  } catch (error) {
-    console.error(
-      '[Package Discovery] Error discovering packages:',
-      error instanceof Error ? error.message : String(error),
-    )
-    throw error
+  return {
+    npm: {
+      totalDownloads: summary.totalDownloads,
+      ratePerDay: summary.weeklyRatePerDay,
+      updatedAt: summary.updatedAt,
+    },
+    packageCount: summary.totalPackageCount,
+    updatedAt: new Date(summary.updatedAt),
   }
 }
 
-/**
- * Compute org stats purely from cached package data in the database
- * This is a fast recalculation that doesn't fetch from NPM API
- */
-export async function computeOrgStatsFromCache(org: string): Promise<NpmStats> {
-  try {
-    const { like, or, eq } = await import('drizzle-orm')
-
-    // Get legacy package names
-    const { libraries } = await import('~/libraries')
-    const legacyPackages: string[] = []
-    for (const library of libraries) {
-      if (
-        'legacyPackages' in library &&
-        Array.isArray(library.legacyPackages)
-      ) {
-        legacyPackages.push(...library.legacyPackages)
-      }
-    }
-
-    // Get all packages for this org (e.g., all @tanstack/* packages + legacy packages)
-    let packages = await db.query.npmPackages.findMany({
-      where: like(npmPackages.packageName, `@${org}/%`),
-    })
-
-    // Add legacy packages if they exist in the database
-    if (legacyPackages.length > 0) {
-      const legacyResults = await db.query.npmPackages.findMany({
-        where: or(
-          ...legacyPackages.map((pkg) => eq(npmPackages.packageName, pkg)),
-        ),
-      })
-      packages = [...packages, ...legacyResults]
-    }
-
-    const packageStats: Record<string, NpmPackageStats> = {}
-    let totalDownloads = 0
-    let totalRatePerDay = 0
-
-    for (const pkg of packages) {
-      if (pkg.downloads !== null) {
-        const stats: NpmPackageStats = {
-          downloads: pkg.downloads,
-        }
-
-        if (pkg.ratePerDay !== null) {
-          stats.ratePerDay = pkg.ratePerDay
-          totalRatePerDay += pkg.ratePerDay
-        }
-
-        packageStats[pkg.packageName] = stats
-        totalDownloads += pkg.downloads
-      }
-    }
-
-    console.log(
-      `[Org Stats Recalc] Computed from ${
-        packages.length
-      } cached packages: ${totalDownloads.toLocaleString()} total downloads, ${Math.round(
-        totalRatePerDay,
-      ).toLocaleString()}/day`,
-    )
+function getLibraryNpmStatsFromSummary({
+  existing,
+  libraryId,
+  summary,
+}: {
+  existing: OssStatsCache | undefined
+  libraryId: string
+  summary: HomepageNpmStatsSummary | null
+}) {
+  const librarySummary = summary?.librarySummaries.find(
+    (item) => item.libraryId === libraryId,
+  )
+
+  if (!librarySummary) {
+    return getExistingOssNpmStats(existing)
+  }
 
-    return {
-      totalDownloads,
-      packageStats,
-      ratePerDay: totalRatePerDay > 0 ? totalRatePerDay : undefined,
-    }
-  } catch (error) {
-    console.error(
-      `[Org Stats Recalc] Error computing stats for org ${org}:`,
-      error instanceof Error ? error.message : String(error),
-    )
-    return {
-      totalDownloads: 0,
-      packageStats: {},
-    }
+  return {
+    npm: {
+      totalDownloads: librarySummary.totalDownloads,
+      updatedAt: librarySummary.updatedAt,
+    },
+    packageCount: librarySummary.packageCount,
+    updatedAt: new Date(librarySummary.updatedAt),
   }
 }
 
-/**
- * Rebuild all library caches from cached package data
- * This recalculates library stats from the current package data in the database
- */
-export async function rebuildLibraryCaches(): Promise<void> {
-  try {
-    const { libraries } = await import('~/libraries')
-
-    for (const library of libraries) {
-      const packages = await db.query.npmPackages.findMany({
-        where: eq(npmPackages.libraryId, library.id),
-      })
-
-      if (packages.length === 0) continue
-
-      const totalDownloads = packages.reduce(
-        (sum, pkg) => sum + (pkg.downloads ?? 0),
-        0,
-      )
+function getOssScopeCacheKey(scopeType: string, scopeKey: string) {
+  return `${scopeType}:${scopeKey}`
+}
 
-      const existing = await db.query.npmLibraryStatsCache.findFirst({
-        where: eq(npmLibraryStatsCache.libraryId, library.id),
-      })
+export async function rebuildOssStatsCache(org: string = 'tanstack') {
+  const now = new Date()
+  const { libraries } = await import('~/libraries')
+  const { getHomepageNpmStatsSummary } =
+    await import('./homepage-npm-stats.server')
+
+  const [githubCacheRows, ossCacheRows, npmSummary] = await Promise.all([
+    db.query.githubStatsCache.findMany(),
+    db.query.ossStatsCache.findMany(),
+    getHomepageNpmStatsSummary(),
+  ])
+
+  const githubCacheEntries: Array<[string, (typeof githubCacheRows)[number]]> =
+    githubCacheRows.map((row) => [row.cacheKey, row])
+  const ossCacheEntries: Array<[string, OssStatsCache]> = ossCacheRows.map(
+    (row) => [getOssScopeCacheKey(row.scopeType, row.scopeKey), row],
+  )
+  const githubCacheMap = new Map(githubCacheEntries)
+  const ossCacheMap = new Map(ossCacheEntries)
+
+  const orgGithubRow = githubCacheMap.get(`org:${org}`)
+  const orgGithubStats = getGitHubStats(orgGithubRow?.stats)
+  const orgPreviousGithubStats = orgGithubRow?.previousStats
+    ? getGitHubStats(orgGithubRow.previousStats)
+    : null
+  const orgTimeDelta = orgGithubRow?.updatedAt
+    ? orgGithubRow.updatedAt.getTime() - orgGithubRow.createdAt.getTime()
+    : undefined
+  const orgNpmStats = getOrgNpmStatsFromSummary(
+    npmSummary,
+    ossCacheMap.get(getOssScopeCacheKey('org', org)),
+  )
+
+  await upsertOssStatsCacheRow({
+    github: orgGithubStats,
+    previousGithub: orgPreviousGithubStats,
+    githubUpdatedAt: orgGithubRow?.updatedAt ?? now,
+    npm: orgNpmStats.npm,
+    npmPackageCount: orgNpmStats.packageCount,
+    npmUpdatedAt: orgNpmStats.updatedAt ?? now,
+    scopeKey: org,
+    scopeType: 'org',
+    timeDelta: orgTimeDelta,
+  })
+
+  for (const library of libraries) {
+    const githubRow = githubCacheMap.get(library.repo)
+    const githubStats = getGitHubStats(githubRow?.stats)
+    const previousGithubStats = githubRow?.previousStats
+      ? getGitHubStats(githubRow.previousStats)
+      : null
+    const timeDelta = githubRow?.updatedAt
+      ? githubRow.updatedAt.getTime() - githubRow.createdAt.getTime()
+      : undefined
+    const libraryNpmStats = getLibraryNpmStatsFromSummary({
+      existing: ossCacheMap.get(getOssScopeCacheKey('library', library.id)),
+      libraryId: library.id,
+      summary: npmSummary,
+    })
 
-      if (existing) {
-        await db
-          .update(npmLibraryStatsCache)
-          .set({
-            previousTotalDownloads: existing.totalDownloads,
-            totalDownloads,
-            packageCount: packages.length,
-            updatedAt: new Date(),
-          })
-          .where(eq(npmLibraryStatsCache.libraryId, library.id))
-      } else {
-        await db.insert(npmLibraryStatsCache).values({
-          libraryId: library.id,
-          totalDownloads,
-          packageCount: packages.length,
-          previousTotalDownloads: null,
-        })
-      }
-    }
-  } catch (error) {
-    console.error('[Library Stats Cache] Error rebuilding caches:', error)
-    throw error
+    await upsertOssStatsCacheRow({
+      github: githubStats,
+      previousGithub: previousGithubStats,
+      githubUpdatedAt: githubRow?.updatedAt ?? now,
+      npm: libraryNpmStats.npm,
+      npmPackageCount: libraryNpmStats.packageCount,
+      npmUpdatedAt: libraryNpmStats.updatedAt ?? now,
+      scopeKey: library.id,
+      scopeType: 'library',
+      timeDelta,
+    })
   }
 }
 
@@ -895,13 +413,29 @@ export async function setCachedGitHubStats(
       where: eq(githubStatsCache.cacheKey, cacheKey),
     })
 
+    const existingStats = getGitHubStats(existing?.stats)
+    const previousStats = existing?.previousStats
+      ? getGitHubStats(existing.previousStats)
+      : null
+    const mergedStats: GitHubStats = {
+      starCount: stats.starCount,
+      contributorCount: 0,
+      dependentCount: 0,
+      forkCount:
+        stats.forkCount ?? existingStats.forkCount ?? previousStats?.forkCount,
+      repositoryCount:
+        stats.repositoryCount ??
+        existingStats.repositoryCount ??
+        previousStats?.repositoryCount,
+    }
+
     if (existing) {
       // Move current stats to previous, store new stats as current
       await db
         .update(githubStatsCache)
         .set({
           previousStats: existing.stats,
-          stats,
+          stats: mergedStats,
           expiresAt,
           updatedAt: now,
         })
@@ -913,7 +447,7 @@ export async function setCachedGitHubStats(
       // First time - no previous stats yet
       await db.insert(githubStatsCache).values({
         cacheKey,
-        stats,
+        stats: mergedStats,
         previousStats: null,
         expiresAt,
       })
@@ -953,6 +487,87 @@ export interface NpmDownloadChunkData {
   isImmutable: boolean
 }
 
+function isNpmDailyDownloadPoint(
+  value: unknown,
+): value is { day: string; downloads: number } {
+  return (
+    !!value &&
+    typeof value === 'object' &&
+    typeof Reflect.get(value, 'day') === 'string' &&
+    typeof Reflect.get(value, 'downloads') === 'number'
+  )
+}
+
+function getNpmDailyDownloadData(value: unknown) {
+  if (!Array.isArray(value)) {
+    return []
+  }
+
+  return value.filter(isNpmDailyDownloadPoint)
+}
+
+/**
+ * Get the freshest cached daily chunks that cover a date window.
+ *
+ * Recent landing-page stats should be derived from cached daily data instead
+ * of requiring an exact rolling range row, since the cache may store broader
+ * windows like month-to-date or year-to-date.
+ */
+export async function getLatestNpmDownloadChunksCoveringRange({
+  dateFrom,
+  dateTo,
+  packageNames,
+}: {
+  dateFrom: string
+  dateTo: string
+  packageNames: Array<string>
+}): Promise<Map<string, NpmDownloadChunkData>> {
+  const results = new Map<string, NpmDownloadChunkData>()
+
+  if (packageNames.length === 0) {
+    return results
+  }
+
+  try {
+    const rows = await db
+      .select()
+      .from(npmDownloadChunks)
+      .where(
+        and(
+          inArray(npmDownloadChunks.packageName, packageNames),
+          eq(npmDownloadChunks.binSize, 'daily'),
+          lte(npmDownloadChunks.dateFrom, dateFrom),
+          gte(npmDownloadChunks.dateTo, dateTo),
+        ),
+      )
+      .orderBy(
+        desc(npmDownloadChunks.dateTo),
+        desc(npmDownloadChunks.updatedAt),
+      )
+
+    for (const row of rows) {
+      if (results.has(row.packageName)) {
+        continue
+      }
+
+      results.set(row.packageName, {
+        packageName: row.packageName,
+        dateFrom: row.dateFrom,
+        dateTo: row.dateTo,
+        binSize: row.binSize,
+        totalDownloads: row.totalDownloads,
+        dailyData: getNpmDailyDownloadData(row.dailyData),
+        isImmutable: row.isImmutable,
+      })
+    }
+
+    return results
+  } catch (error) {
+    console.error('[NPM Download Chunks] Error reading latest ranges:', error)
+    return results
+  }
+}
+
 /**
  * Batch fetch multiple npm download chunks in a single query
  * Much more efficient than calling getCachedNpmDownloadChunk individually
@@ -1010,10 +625,7 @@ export async function getBatchNpmDownloadChunks(
           dateTo: chunk.dateTo,
           binSize: chunk.binSize,
           totalDownloads: chunk.totalDownloads,
-          dailyData: chunk.dailyData as Array<{
-            day: string
-            downloads: number
-          }>,
+          dailyData: getNpmDailyDownloadData(chunk.dailyData),
           isImmutable: chunk.isImmutable,
           updatedAt: chunk.updatedAt?.toISOString(),
           createdAt: chunk.createdAt?.toISOString(),
@@ -1028,6 +640,91 @@ export async function getBatchNpmDownloadChunks(
   }
 }
 
+/**
+ * Get the newest cached chunks that start at the requested range start and end
+ * on or before the requested range end.
+ *
+ * This is only a fallback for transient upstream fetch failures. It lets the
+ * stats page keep using yesterday's current-year chunk instead of dropping a
+ * series to zero when today's exact cache key has not been written yet.
+ */
+export async function getLatestNpmDownloadChunksBeforeRangeEnd(
+  requests: Array<{
+    packageName: string
+    dateFrom: string
+    dateTo: string
+    binSize: string
+  }>,
+): Promise<
+  Map<string, NpmDownloadChunkData & { updatedAt?: string; createdAt?: string }>
+> {
+  const results = new Map<
+    string,
+    NpmDownloadChunkData & { updatedAt?: string; createdAt?: string }
+  >()
+
+  if (requests.length === 0) {
+    return results
+  }
+
+  try {
+    const { or } = await import('drizzle-orm')
+
+    const conditions = requests.map((req) =>
+      and(
+        eq(npmDownloadChunks.packageName, req.packageName),
+        eq(npmDownloadChunks.dateFrom, req.dateFrom),
+        lte(npmDownloadChunks.dateTo, req.dateTo),
+        eq(npmDownloadChunks.binSize, req.binSize),
+      ),
+    )
+
+    const cached = await db.query.npmDownloadChunks.findMany({
+      where: or(...conditions),
+      orderBy: [
+        desc(npmDownloadChunks.dateTo),
+        desc(npmDownloadChunks.updatedAt),
+      ],
+    })
+
+    for (const chunk of cached) {
+      for (const req of requests) {
+        const cacheKey = `${req.packageName}|${req.dateFrom}|${req.dateTo}|${req.binSize}`
+
+        if (results.has(cacheKey)) {
+          continue
+        }
+
+        if (
+          chunk.packageName !== req.packageName ||
+          chunk.dateFrom !== req.dateFrom ||
+          chunk.dateTo > req.dateTo ||
+          chunk.binSize !== req.binSize
+        ) {
+          continue
+        }
+
+        results.set(cacheKey, {
+          packageName: chunk.packageName,
+          dateFrom: chunk.dateFrom,
+          dateTo: chunk.dateTo,
+          binSize: chunk.binSize,
+          totalDownloads: chunk.totalDownloads,
+          dailyData: getNpmDailyDownloadData(chunk.dailyData),
+          isImmutable: chunk.isImmutable,
+          updatedAt: chunk.updatedAt?.toISOString(),
+          createdAt: chunk.createdAt?.toISOString(),
+        })
+      }
+    }
+
+    return results
+  } catch (error) {
+    console.error('[NPM Download Chunks] Error reading fallback ranges:', error)
+    return results
+  }
+}
+
 /**
  * Get a cached npm download chunk if available
  * Returns the chunk data if found and not expired (for mutable chunks)
@@ -1061,10 +758,7 @@ export async function getCachedNpmDownloadChunk(
         dateTo: cached.dateTo,
         binSize: cached.binSize,
         totalDownloads: cached.totalDownloads,
-        dailyData: cached.dailyData as Array<{
-          day: string
-          downloads: number
-        }>,
+        dailyData: getNpmDailyDownloadData(cached.dailyData),
         isImmutable: cached.isImmutable,
       }
     }
@@ -1077,10 +771,7 @@ export async function getCachedNpmDownloadChunk(
         dateTo: cached.dateTo,
         binSize: cached.binSize,
         totalDownloads: cached.totalDownloads,
-        dailyData: cached.dailyData as Array<{
-          day: string
-          downloads: number
-        }>,
+        dailyData: getNpmDailyDownloadData(cached.dailyData),
         isImmutable: cached.isImmutable,
       }
     }
diff --git a/src/utils/stats-queries.functions.ts b/src/utils/stats-queries.functions.ts
new file mode 100644
index 000000000..adb220f82
--- /dev/null
+++ b/src/utils/stats-queries.functions.ts
@@ -0,0 +1,38 @@
+import { createServerFn } from '@tanstack/react-start'
+import {
+  fetchNpmDownloadsBulk as fetchNpmDownloadsBulkServer,
+  fetchRecentDownloadStats as fetchRecentDownloadStatsServer,
+  getOSSStats as getOSSStatsServer,
+  type RecentDownloadStatsQueryParams,
+  type StatsQueryParams,
+} from './stats.server'
+import { getHomepageNpmStatsSummary as getHomepageNpmStatsSummaryServer } from './homepage-npm-stats.server'
+
+export type { StatsQueryParams } from './stats.server'
+
+export const getOSSStats = createServerFn({ method: 'POST' })
+  .validator((data: StatsQueryParams) => data)
+  .handler(async ({ data }) => getOSSStatsServer({ data }))
+
+export const getHomepageNpmStatsSummary = createServerFn({
+  method: 'GET',
+}).handler(async () => getHomepageNpmStatsSummaryServer())
+
+export const fetchNpmDownloadsBulk = createServerFn({ method: 'POST' })
+  .validator(
+    (data: {
+      packageGroups: Array<{
+        packages: Array<{
+          hidden?: boolean
+          name: string
+        }>
+      }>
+      startDate: string
+      endDate: string
+    }) => data,
+  )
+  .handler(async ({ data }) => fetchNpmDownloadsBulkServer({ data }))
+
+export const fetchRecentDownloadStats = createServerFn({ method: 'POST' })
+  .validator((data: RecentDownloadStatsQueryParams) => data)
+  .handler(async ({ data }) => fetchRecentDownloadStatsServer({ data }))
diff --git a/src/utils/stats.functions.ts b/src/utils/stats.functions.ts
index 5e36bbc94..dcf4a0c88 100644
--- a/src/utils/stats.functions.ts
+++ b/src/utils/stats.functions.ts
@@ -1,164 +1,54 @@
 /**
  * Pure stats functions that can be used by both TanStack Start server functions
- * and Netlify functions. No TanStack Start dependencies.
+ * and Worker cron tasks. No TanStack Start dependencies.
  */
 
-import * as cheerio from 'cheerio'
 import { envFunctions } from './env.functions'
-import type { GitHubStats, NpmPackageStats, NpmStats } from './stats.server'
+import type { GitHubStats } from './stats.types'
 
-/**
- * Parse number from string, removing commas
- */
-function parseNumber(value: string | undefined): number | undefined {
-  if (!value) return undefined
-  const parsed = parseInt(value.replace(/,/g, ''), 10)
-  return isNaN(parsed) ? undefined : parsed
-}
-
-/**
- * Scrape a count from a GitHub repository page
- * Uses retry logic as scraping can be unreliable
- */
-async function scrapeGitHubCount(
-  repo: string,
-  selector: string,
-  countType: string,
-  maxRetries: number = 3,
-): Promise<number | undefined> {
-  for (let attempt = 1; attempt <= maxRetries; attempt++) {
-    try {
-      const response = await fetch(`https://github.com/${repo}`, {
-        headers: {
-          'User-Agent': 'TanStack-Stats',
-          Accept: 'text/html',
-        },
-      })
-
-      if (!response.ok) {
-        console.warn(
-          `[GitHub Scraper] Failed to fetch ${repo} page (${response.status}), attempt ${attempt}/${maxRetries}`,
-        )
-        continue
-      }
-
-      const html = await response.text()
-      const $ = cheerio.load(html)
-
-      const count = $(`${selector} > span.Counter`)
-        .filter((_, el) => {
-          const title = $(el).attr('title')
-          return !!parseNumber(title)
-        })
-        .attr('title')
-
-      const parsedCount = parseNumber(count)
-
-      if (parsedCount !== undefined) {
-        return parsedCount
-      }
-
-      console.warn(
-        `[GitHub Scraper] No ${countType} count found for ${repo}, attempt ${attempt}/${maxRetries}`,
-      )
-    } catch (error) {
-      console.error(
-        `[GitHub Scraper] Error scraping ${repo}, attempt ${attempt}/${maxRetries}:`,
-        error instanceof Error ? error.message : String(error),
-      )
-    }
+function getGitHubHeaders() {
+  const token = envFunctions.GITHUB_AUTH_TOKEN
 
-    if (attempt < maxRetries) {
-      const waitTime = Math.pow(2, attempt) * 1000
-      await new Promise((resolve) => setTimeout(resolve, waitTime))
-    }
+  return {
+    ...(token && token !== 'USE_A_REAL_KEY_IN_PRODUCTION'
+      ? { Authorization: `Bearer ${token}` }
+      : {}),
+    Accept: 'application/vnd.github.v3+json',
+    'User-Agent': 'TanStack-Stats',
   }
-
-  console.warn(
-    `[GitHub Scraper] Failed to scrape ${countType} count for ${repo} after ${maxRetries} attempts`,
-  )
-  return undefined
-}
-
-function scrapeGitHubDependentCount(repo: string): Promise<number | undefined> {
-  return scrapeGitHubCount(repo, 'a[href$="/network/dependents"]', 'dependent')
-}
-
-function scrapeGitHubContributorCount(
-  repo: string,
-): Promise<number | undefined> {
-  return scrapeGitHubCount(
-    repo,
-    'a[href$="/graphs/contributors"]',
-    'contributor',
-  )
 }
 
 /**
  * Fetch GitHub repository statistics
  */
 export async function fetchGitHubRepoStats(repo: string): Promise<GitHubStats> {
-  const token = envFunctions.GITHUB_AUTH_TOKEN
-  if (!token || token === 'USE_A_REAL_KEY_IN_PRODUCTION') {
-    throw new Error('GITHUB_AUTH_TOKEN not configured')
-  }
-
-  const [repoData, contributorCount, dependentCount] = await Promise.all([
-    // Get repo basic stats
-    fetch(`https://api.github.com/repos/${repo}`, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-        Accept: 'application/vnd.github.v3+json',
-        'User-Agent': 'TanStack-Stats',
-      },
-    }).then(async (res) => {
-      if (!res.ok) {
-        // Check for rate limiting
-        if (res.status === 403) {
-          const rateLimitRemaining = res.headers.get('X-RateLimit-Remaining')
-          if (rateLimitRemaining === '0') {
-            const rateLimitReset = res.headers.get('X-RateLimit-Reset')
-            const resetTime = rateLimitReset
-              ? new Date(parseInt(rateLimitReset, 10) * 1000)
-              : new Date(Date.now() + 60 * 60 * 1000)
-            throw new Error(
-              `GitHub API rate limit exceeded. Resets at: ${resetTime.toISOString()}`,
-            )
-          }
+  const repoData = await fetch(`https://api.github.com/repos/${repo}`, {
+    headers: getGitHubHeaders(),
+  }).then(async (res) => {
+    if (!res.ok) {
+      // Check for rate limiting
+      if (res.status === 403) {
+        const rateLimitRemaining = res.headers.get('X-RateLimit-Remaining')
+        if (rateLimitRemaining === '0') {
+          const rateLimitReset = res.headers.get('X-RateLimit-Reset')
+          const resetTime = rateLimitReset
+            ? new Date(parseInt(rateLimitReset, 10) * 1000)
+            : new Date(Date.now() + 60 * 60 * 1000)
+          throw new Error(
+            `GitHub API rate limit exceeded. Resets at: ${resetTime.toISOString()}`,
+          )
         }
-        const errorText = await res.text().catch(() => 'Unknown error')
-        throw new Error(`GitHub API error: ${res.status} - ${errorText}`)
       }
-      return res.json()
-    }),
-
-    // Scrape contributor count from GitHub web UI
-    // Using scraping instead of API to get the full count without pagination limits
-    // Wrap in catch to ensure it never rejects - scraping failures shouldn't break the whole operation
-    scrapeGitHubContributorCount(repo).catch((error) => {
-      console.error(
-        `[GitHub Stats] Contributor count scraping failed for ${repo}:`,
-        error instanceof Error ? error.message : String(error),
-      )
-      return undefined
-    }),
-
-    // Scrape dependent count from GitHub web UI
-    // GitHub doesn't provide this via REST or GraphQL API
-    // Wrap in catch to ensure it never rejects - scraping failures shouldn't break the whole operation
-    scrapeGitHubDependentCount(repo).catch((error) => {
-      console.error(
-        `[GitHub Stats] Dependent count scraping failed for ${repo}:`,
-        error instanceof Error ? error.message : String(error),
-      )
-      return undefined
-    }),
-  ])
+      const errorText = await res.text().catch(() => 'Unknown error')
+      throw new Error(`GitHub API error: ${res.status} - ${errorText}`)
+    }
+    return res.json()
+  })
 
   return {
     starCount: repoData.stargazers_count ?? 0,
-    contributorCount: contributorCount ?? 0,
-    dependentCount: dependentCount,
+    contributorCount: 0,
+    dependentCount: 0,
     forkCount: repoData.forks_count ?? 0,
   }
 }
@@ -169,11 +59,6 @@ export async function fetchGitHubRepoStats(repo: string): Promise<GitHubStats> {
 export async function fetchGitHubOwnerStats(
   owner: string,
 ): Promise<GitHubStats> {
-  const token = envFunctions.GITHUB_AUTH_TOKEN
-  if (!token || token === 'USE_A_REAL_KEY_IN_PRODUCTION') {
-    throw new Error('GITHUB_AUTH_TOKEN not configured')
-  }
-
   // Fetch all repos for the organization
   const repos: any[] = []
   let page = 1
@@ -183,11 +68,7 @@ export async function fetchGitHubOwnerStats(
     const response = await fetch(
       `https://api.github.com/orgs/${owner}/repos?per_page=100&page=${page}&sort=stars`,
       {
-        headers: {
-          Authorization: `Bearer ${token}`,
-          Accept: 'application/vnd.github.v3+json',
-          'User-Agent': 'TanStack-Stats',
-        },
+        headers: getGitHubHeaders(),
       },
     )
 
@@ -247,611 +128,47 @@ export async function fetchGitHubOwnerStats(
     0,
   )
 
-  const repositoryCount = repos.length
-
-  // Scrape contributor and dependent counts from each repo's page
-  // Note: This sums counts across repos, which may count the same person multiple times
-  // if they contributed to multiple repos. This provides higher numbers than trying to deduplicate via API calls.
-  const repoStats = await Promise.all(
-    repos.map(async (repo) => {
-      try {
-        const [contributorCount, dependentCount] = await Promise.all([
-          // Wrap in catch to ensure scraping failures don't break the operation
-          scrapeGitHubContributorCount(repo.full_name).catch((error) => {
-            console.error(
-              `[GitHub Stats] Contributor count scraping failed for ${repo.full_name}:`,
-              error instanceof Error ? error.message : String(error),
-            )
-            return undefined
-          }),
-          scrapeGitHubDependentCount(repo.full_name).catch((error) => {
-            console.error(
-              `[GitHub Stats] Dependent count scraping failed for ${repo.full_name}:`,
-              error instanceof Error ? error.message : String(error),
-            )
-            return undefined
-          }),
-        ])
-        return {
-          contributorCount: contributorCount ?? 0,
-          dependentCount: dependentCount ?? 0,
-        }
-      } catch (error) {
-        console.error(
-          `[GitHub Stats] Failed to scrape stats for ${repo.full_name}:`,
-          error instanceof Error ? error.message : String(error),
-        )
-        return {
-          contributorCount: 0,
-          dependentCount: 0,
-        }
-      }
-    }),
-  )
-
-  const totalContributorCount = repoStats.reduce(
-    (sum, stats) => sum + stats.contributorCount,
-    0,
-  )
-
-  const totalDependentCount = repoStats.reduce(
-    (sum, stats) => sum + stats.dependentCount,
-    0,
-  )
-
   return {
     starCount,
-    contributorCount: totalContributorCount,
-    dependentCount: totalDependentCount,
+    contributorCount: 0,
+    dependentCount: 0,
     forkCount,
-    repositoryCount,
+    repositoryCount: repos.length,
   }
 }
 
-/**
- * Fetch package creation date from npm registry
- */
-async function fetchNpmPackageCreationDate(
-  packageName: string,
-): Promise<string> {
-  try {
-    const response = await fetch(`https://registry.npmjs.com/${packageName}`, {
+export async function getNpmOrgPackageNames(org: string): Promise<string[]> {
+  const response = await fetch(
+    `https://registry.npmjs.org/-/org/${org}/package`,
+    {
       headers: {
         Accept: 'application/json',
         'User-Agent': 'TanStack-Stats',
       },
-    })
-
-    if (!response.ok) {
-      console.warn(
-        `[NPM Stats] Could not fetch creation date for ${packageName}, using 2015-01-10`,
-      )
-      return '2015-01-10' // npm download data starts from this date
-    }
+    },
+  )
 
-    const data = await response.json()
-    return data.time?.created || '2015-01-10'
-  } catch (error) {
-    console.warn(
-      `[NPM Stats] Error fetching creation date for ${packageName}:`,
-      error instanceof Error ? error.message : String(error),
+  if (!response.ok) {
+    console.error(
+      `[NPM Stats] Org packages fetch failed: ${response.status} ${response.statusText}`,
     )
-    return '2015-01-10' // npm download data starts from this date
+    throw new Error(`NPM API error: ${response.status}`)
   }
-}
-
-/**
- * Normalize date ranges into consistent year-based chunk boundaries
- * Uses calendar years for stable cache keys that don't shift daily
- *
- * This ensures the same date ranges are used across all fetches, preventing
- * duplicate cache entries. Historical years are immutable (Jan 1 - Dec 31),
- * current year ends at today's date.
- */
-function generateNormalizedChunks(
-  startDate: string,
-  endDate: string,
-): Array<{ from: string; to: string }> {
-  const NPM_STATS_START_DATE = '2015-01-10'
-  const chunks: Array<{ from: string; to: string }> = []
 
-  const startYear = new Date(startDate).getFullYear()
-  const endYear = new Date(endDate).getFullYear()
-  const currentYear = new Date().getFullYear()
-  const today = new Date().toISOString().substring(0, 10)
+  const data = await response.json()
+  const packageNames = Object.keys(data)
 
-  for (let year = startYear; year <= endYear; year++) {
-    let from = `${year}-01-01`
-    let to = `${year}-12-31`
-
-    // Adjust start date if before npm stats started
-    if (from < NPM_STATS_START_DATE) {
-      from = NPM_STATS_START_DATE
-    }
-
-    // Current year ends at today
-    if (year === currentYear) {
-      to = today
-    }
-
-    // Skip if the entire chunk is before npm stats started
-    if (to < NPM_STATS_START_DATE) {
-      continue
-    }
-
-    // Skip future years
-    if (year > currentYear) {
-      continue
-    }
-
-    chunks.push({ from, to })
+  if (packageNames.length === 0) {
+    console.error(`[NPM Stats] No packages found for org ${org}`)
+    return []
   }
 
-  return chunks
-}
-
-/**
- * Fetch all-time download counts using chunked /range/ requests
- * This is the correct method as npm API limits /point/ to 18 months
- *
- * Uses normalized chunk boundaries for consistent caching across runs
- * Fetches chunks sequentially (concurrency controlled at package level)
- * Returns total downloads and daily rate (average from last full week)
- */
-async function fetchNpmPackageDownloadsChunked(
-  packageName: string,
-  createdDate: string,
-): Promise<{ totalDownloads: number; ratePerDay: number }> {
-  const today = new Date().toISOString().substring(0, 10)
-
-  // Generate normalized chunks for consistent cache keys
-  const chunks = generateNormalizedChunks(createdDate, today)
-
-  let totalDownloadCount = 0
-  let lastChunkData: { day: string; downloads: number }[] = []
-
-  // Load cache functions (dynamic import for Netlify compatibility)
-  const { getCachedNpmDownloadChunk, setCachedNpmDownloadChunk } =
-    await import('./stats-db.server')
-
-  // Fetch chunks sequentially to avoid nested AsyncQueuer complexity
-  // The outer queue (per-package) provides concurrency control
-  for (let i = 0; i < chunks.length; i++) {
-    const chunk = chunks[i]
-    let success = false
-
-    // Check cache first (gracefully handle if migration not run)
-    let cachedChunk = null
-    try {
-      cachedChunk = await getCachedNpmDownloadChunk(
-        packageName,
-        chunk.from,
-        chunk.to,
-        'daily',
-      )
-    } catch (error) {
-      // Cache table doesn't exist yet (migration not run) - gracefully continue
-      if (
-        error instanceof Error &&
-        (error.message.includes('relation') ||
-          error.message.includes('does not exist'))
-      ) {
-        // Silently skip cache on first error, then stop trying
-        if (i === 0) {
-          console.log(
-            `[NPM Stats] Cache table not available (migration not run), skipping cache`,
-          )
-        }
-      } else {
-        // Other errors - log but continue
-        console.warn(
-          `[NPM Stats] Cache lookup error for ${packageName}:`,
-          error,
-        )
-      }
-    }
-
-    if (cachedChunk) {
-      // For mutable chunks, always fetch fresh data from npm API
-      // Immutable chunks can use cache since they won't change
-      if (!cachedChunk.isImmutable) {
-        console.log(
-          `[NPM Stats] ${packageName} chunk ${chunk.from}:${chunk.to}: mutable chunk, fetching fresh data from npm API`,
-        )
-        // Fall through to fetch from API
-      } else {
-        // Use cached immutable data
-        console.log(
-          `[NPM Stats] ${packageName} chunk ${chunk.from}:${
-            chunk.to
-          }: using cache (${cachedChunk.totalDownloads.toLocaleString()} downloads, immutable)`,
-        )
-        totalDownloadCount += cachedChunk.totalDownloads
-        if (cachedChunk.dailyData.length > 0) {
-          lastChunkData = cachedChunk.dailyData
-        }
-        continue // Skip to next chunk
-      }
-    }
-
-    // Not in cache - fetch from NPM API
-    // Retry loop with indefinite retries for rate limiting
-    while (!success) {
-      try {
-        const response = await fetch(
-          `https://api.npmjs.org/downloads/range/${chunk.from}:${chunk.to}/${packageName}`,
-          {
-            headers: {
-              Accept: 'application/json',
-              'User-Agent': 'TanStack-Stats',
-            },
-          },
-        )
-
-        if (!response.ok) {
-          if (response.status === 404) {
-            console.log(
-              `[NPM Stats] ${packageName} chunk ${chunk.from}:${chunk.to}: not found`,
-            )
-            success = true // Exit retry loop
-            continue
-          }
-          if (response.status === 429) {
-            // Rate limited - wait and retry indefinitely
-            // Note: NPM's Retry-After header is unreliable (often returns "0")
-            // Use fixed 5 second wait time instead
-            const waitTime = 5000 // 5 seconds
-            console.warn(
-              `[NPM Stats] Rate limited on ${packageName} chunk ${chunk.from}:${chunk.to}, waiting ${waitTime}ms...`,
-            )
-            await new Promise((resolve) => setTimeout(resolve, waitTime))
-            continue // Retry this chunk
-          }
-          throw new Error(`NPM API error: ${response.status}`)
-        }
-
-        const pageData: {
-          end: string
-          downloads: { day: string; downloads: number }[]
-          error?: string
-        } = await response.json()
-
-        if (pageData.error === `package ${packageName} not found`) {
-          success = true // Exit retry loop
-          continue
-        }
-
-        const downloadCount = pageData.downloads.reduce(
-          (acc, cur) => acc + cur.downloads,
-          0,
-        )
-
-        totalDownloadCount += downloadCount
-        if (pageData.downloads.length > 0) {
-          lastChunkData = pageData.downloads
-        }
-
-        // Cache the fetched chunk for future use (best-effort)
-        try {
-          await setCachedNpmDownloadChunk({
-            packageName,
-            dateFrom: chunk.from,
-            dateTo: chunk.to,
-            binSize: 'daily',
-            totalDownloads: downloadCount,
-            dailyData: pageData.downloads,
-            isImmutable: false, // Will be calculated by setCachedNpmDownloadChunk
-          })
-        } catch (error) {
-          // Cache write failed - not critical, continue anyway
-          // This can happen if migration hasn't been run yet
-        }
-
-        success = true // Successfully processed this chunk
-      } catch (error) {
-        // For non-rate-limit errors, throw to fail the whole package
-        console.error(
-          `[NPM Stats] Error fetching chunk ${chunk.from}:${chunk.to} for ${packageName}:`,
-          error instanceof Error ? error.message : String(error),
-        )
-        throw error
-      }
-    }
-  }
-
-  // Calculate daily average from last full week of data
-  const lastWeek = lastChunkData.slice(-7)
-  let ratePerDay = 0
-
-  if (lastWeek.length === 7) {
-    const weekTotal = lastWeek.reduce((sum, day) => sum + day.downloads, 0)
-    ratePerDay = weekTotal / 7
-  }
-
-  return { totalDownloads: totalDownloadCount, ratePerDay }
-}
-
-/**
- * Fetch a single NPM package download statistic with retries (for scheduled tasks)
- * This version actually fetches from the API when cache is expired
- * Uses chunked /range/ requests to get accurate all-time download counts
- */
-export async function fetchSingleNpmPackageFresh(
-  packageName: string,
-  retries: number = 3,
-): Promise<NpmPackageStats> {
-  // Import db functions dynamically to avoid pulling server code into client bundle
-  const { setCachedNpmPackageStats } = await import('./stats-db.server')
-
-  // Cache miss or skip cache - fetch from API
-  let attempt = 0
-  let lastError: Error | null = null
-
-  while (attempt < retries) {
-    try {
-      // Get package creation date
-      const createdDate = await fetchNpmPackageCreationDate(packageName)
-
-      // Fetch all-time downloads using chunked range requests
-      // This is the correct method as /point/ is limited to 18 months
-      const result = await fetchNpmPackageDownloadsChunked(
-        packageName,
-        createdDate,
-      )
-
-      // Capture timestamp when data was fetched
-      const updatedAt = Date.now()
-
-      // Store in cache with calculated rate
-      await setCachedNpmPackageStats(
-        packageName,
-        result.totalDownloads,
-        24,
-        result.ratePerDay,
-      )
-
-      return {
-        downloads: result.totalDownloads,
-        ratePerDay: result.ratePerDay,
-        updatedAt,
-      }
-    } catch (error) {
-      lastError = error instanceof Error ? error : new Error(String(error))
-      attempt++
-
-      if (attempt < retries) {
-        const waitTime = Math.pow(2, attempt) * 1000
-        console.warn(
-          `[NPM Stats] Error fetching ${packageName}, retrying in ${waitTime}ms...`,
-          lastError.message,
-        )
-        await new Promise((resolve) => setTimeout(resolve, waitTime))
-      } else {
-        console.error(
-          `[NPM Stats] Error fetching ${packageName} after all retries:`,
-          lastError.message,
-        )
-        return { downloads: 0 }
-      }
-    }
-  }
-
-  return { downloads: 0 }
-}
-
-/**
- * Compute NPM organization statistics (expensive operation)
- * Fetches all packages and aggregates their stats
- * Always bypasses cache to ensure fresh data from NPM API
- */
-export async function computeNpmOrgStats(org: string): Promise<NpmStats> {
-  // Fetch all packages in the org
-  let retries = 3
-  let lastError: Error | null = null
-
-  while (retries > 0) {
-    try {
-      const response = await fetch(
-        `https://registry.npmjs.org/-/org/${org}/package`,
-        {
-          headers: {
-            Accept: 'application/json',
-            'User-Agent': 'TanStack-Stats',
-          },
-        },
-      )
-
-      if (!response.ok) {
-        console.error(
-          `[NPM Stats] Org packages fetch failed: ${response.status} ${response.statusText}`,
-        )
-        if (response.status === 429) {
-          // Note: NPM's Retry-After header is unreliable (often returns "0")
-          // Use fixed 5 second wait time instead
-          const waitTime = 5000 // 5 seconds
-
-          console.warn(
-            `[NPM Stats] Rate limited fetching org packages, waiting ${waitTime}ms before retry (attempt ${
-              4 - retries
-            }/3)...`,
-          )
-
-          if (retries > 1) {
-            await new Promise((resolve) => setTimeout(resolve, waitTime))
-            retries--
-            continue
-          } else {
-            throw new Error(`NPM API rate limited: ${response.status}`)
-          }
-        }
-
-        throw new Error(`NPM API error: ${response.status}`)
-      }
-
-      const data = await response.json()
-      let packageNames = Object.keys(data)
-
-      if (packageNames.length === 0) {
-        console.error(`[NPM Stats] No packages found for org ${org}`)
-        return { totalDownloads: 0, packageStats: {} }
-      }
-
-      // Add legacy (non-scoped) packages from library definitions
-      // The org endpoint only returns @tanstack/* scoped packages
-      const { libraries } = await import('~/libraries')
-      const legacyPackages: string[] = []
-      for (const library of libraries) {
-        if (library.legacyPackages) {
-          legacyPackages.push(...library.legacyPackages)
-        }
-      }
-
-      if (legacyPackages.length > 0) {
-        packageNames = [...packageNames, ...legacyPackages]
-      }
-
-      // Fetch fresh data for all packages (always bypassing cache)
-      const results = new Map<string, NpmPackageStats>()
-
-      // Fetch packages using single AsyncQueuer (chunks are sequential within each package)
-      const { AsyncQueuer } = await import('@tanstack/pacer')
-      let successCount = 0
-      let failCount = 0
-
-      await new Promise<void>((resolve) => {
-        const checkIdle = () => {
-          if (successCount + failCount >= packageNames.length) {
-            console.log(
-              `[NPM Stats] Completed: ${successCount} successful, ${failCount} failed`,
-            )
-            resolve()
-          }
-        }
-
-        const queue = new AsyncQueuer(
-          async (packageName: string) => {
-            return await fetchSingleNpmPackageFresh(packageName, 3)
-          },
-          {
-            concurrency: 8, // Process 8 packages concurrently (reduced from 15 to avoid rate limiting)
-            wait: 500, // Wait 500ms between starting new packages (increased from 50ms)
-            started: true,
-            onSuccess: (stats, packageName) => {
-              results.set(packageName, stats)
-              successCount++
-
-              // Progress update every 50 packages
-              if ((successCount + failCount) % 50 === 0) {
-                console.log(
-                  `[NPM Stats] Progress: ${successCount + failCount}/${
-                    packageNames.length
-                  } packages`,
-                )
-              }
-              checkIdle()
-            },
-            onError: (error, packageName) => {
-              failCount++
-              console.error(
-                `[NPM Stats] Failed ${packageName}: ${error.message}`,
-              )
-              // Store 0 for failed packages
-              const zeroStats = { downloads: 0 }
-              results.set(packageName, zeroStats)
-              checkIdle()
-            },
-          },
-        )
-
-        // Add all packages to the queue
-        packageNames.forEach((packageName) => queue.addItem(packageName))
-
-        // Handle edge case where no packages to process
-        if (packageNames.length === 0) {
-          resolve()
-        }
-      })
-
-      // Calculate total downloads, aggregate rate, and find most recent update
-      const packageStats: Record<string, NpmPackageStats> = {}
-      let totalDownloads = 0
-      let totalRatePerDay = 0
-      let mostRecentUpdate = 0
-
-      for (const [packageName, stats] of results.entries()) {
-        totalDownloads += stats.downloads
-        packageStats[packageName] = stats
-
-        // Sum up rates for aggregate animation
-        if (stats.ratePerDay) {
-          totalRatePerDay += stats.ratePerDay
-        }
-
-        // Track most recent update timestamp
-        if (stats.updatedAt && stats.updatedAt > mostRecentUpdate) {
-          mostRecentUpdate = stats.updatedAt
-        }
-      }
-
-      return {
-        totalDownloads,
-        packageStats,
-        ratePerDay: totalRatePerDay !== 0 ? totalRatePerDay : undefined,
-        updatedAt: mostRecentUpdate > 0 ? mostRecentUpdate : undefined,
-      }
-    } catch (error) {
-      lastError = error instanceof Error ? error : new Error(String(error))
-      retries--
-
-      if (retries > 0) {
-        const waitTime = Math.pow(2, 4 - retries) * 1000
-        console.warn(
-          `[NPM Stats] Error fetching org stats for ${org}, retrying in ${waitTime}ms...`,
-          lastError.message,
-        )
-        await new Promise((resolve) => setTimeout(resolve, waitTime))
-      } else {
-        console.error(
-          `[NPM Stats] Error fetching org stats for ${org} after all retries:`,
-          lastError.message,
-        )
-        return { totalDownloads: 0, packageStats: {} }
-      }
-    }
-  }
-
-  return { totalDownloads: 0, packageStats: {} }
-}
-
-/**
- * Refresh NPM organization statistics (force recompute and update cache)
- * Used by scheduled jobs or manual triggers
- * Also discovers and registers all packages before computing stats
- * Always bypasses cache to ensure fresh data
- */
-export async function refreshNpmOrgStats(org: string): Promise<NpmStats> {
-  // Import db functions dynamically to avoid pulling server code into client bundle
-  const { discoverAndRegisterPackages, setCachedNpmOrgStats } =
-    await import('./stats-db.server')
-
-  // First, discover and register all packages
-  try {
-    await discoverAndRegisterPackages(org)
-  } catch (error) {
-    console.error(
-      '[NPM Org Stats] Package discovery failed, continuing with stats refresh:',
-      error instanceof Error ? error.message : String(error),
-    )
-  }
-
-  const stats = await computeNpmOrgStats(org)
-  await setCachedNpmOrgStats(org, stats)
-
-  // Rebuild library caches after full refresh
-  const { rebuildLibraryCaches } = await import('./stats-db.server')
-  await rebuildLibraryCaches()
+  const { libraries } = await import('~/libraries')
+  const legacyPackages = libraries.flatMap(
+    (library) => library.legacyPackages ?? [],
+  )
 
-  return stats
+  return [...new Set([...packageNames, ...legacyPackages])]
 }
 
 /**
@@ -863,7 +180,8 @@ export async function refreshGitHubOrgStats(org: string): Promise<{
   libraryResults: Array<{ repo: string; stars: number }>
   libraryErrors: Array<{ repo: string; error: string }>
 }> {
-  const { setCachedGitHubStats } = await import('./stats-db.server')
+  const { setCachedGitHubStats, rebuildOssStatsCache } =
+    await import('./stats-db.server')
 
   // Refresh GitHub org stats
   console.log('[GitHub Stats] Refreshing GitHub org stats...')
@@ -896,11 +214,7 @@ export async function refreshGitHubOrgStats(org: string): Promise<{
     try {
       const repoStats = await fetchGitHubRepoStats(library.repo)
       console.log(
-        `[GitHub Stats] Fetched stats for ${library.repo}: ${
-          repoStats.starCount
-        } stars, ${repoStats.contributorCount} contributors, ${
-          repoStats.dependentCount ?? 'N/A'
-        } dependents`,
+        `[GitHub Stats] Fetched stats for ${library.repo}: ${repoStats.starCount} stars`,
       )
       await setCachedGitHubStats(library.repo, repoStats, 1)
       console.log(
@@ -929,6 +243,8 @@ export async function refreshGitHubOrgStats(org: string): Promise<{
     }
   }
 
+  await rebuildOssStatsCache(org)
+
   return {
     orgStats: githubStats,
     libraryResults,
diff --git a/src/utils/stats.server.ts b/src/utils/stats.server.ts
index cb244b63f..915d17bd4 100644
--- a/src/utils/stats.server.ts
+++ b/src/utils/stats.server.ts
@@ -1,414 +1,661 @@
-import { createServerFn } from '@tanstack/react-start'
 import { setResponseHeaders } from '@tanstack/react-start/server'
-import * as v from 'valibot'
 
 // Re-export pure functions for use in server functions
-export {
-  fetchGitHubOwnerStats,
-  fetchGitHubRepoStats,
-  refreshNpmOrgStats,
-  fetchSingleNpmPackageFresh,
-  computeNpmOrgStats,
-} from './stats.functions'
-
-export interface Library {
-  id: string
-  repo: string
-  frameworks?: string[]
+export { fetchGitHubOwnerStats, fetchGitHubRepoStats } from './stats.functions'
+
+// Re-export types from shared types file
+export type {
+  Library,
+  GitHubStats,
+  NpmPackageStats,
+  NpmStats,
+  OSSStats,
+  OSSStatsWithDelta,
+  RecentDownloadStats,
+  RecentDownloadStatsQueryParams,
+  StatsQueryParams,
+} from './stats.types'
+
+import type {
+  GitHubStats,
+  NpmStats,
+  RecentDownloadStats,
+  RecentDownloadStatsQueryParams,
+  OSSStatsWithDelta,
+  StatsQueryParams,
+} from './stats.types'
+import { libraries } from '~/libraries'
+import { fetchGitHubOwnerStats, fetchGitHubRepoStats } from './stats.functions'
+import {
+  applyManualNpmDownloadOutlierCorrections,
+  type NpmDailyDownload,
+} from './npm-download-outliers'
+import { envFunctions } from './env.functions'
+import {
+  NPM_STATS_START_DATE,
+  addUtcDays,
+  getNormalizedNpmDownloadChunks,
+  getNpmDailyDownloadsFromResponse,
+  hasCompleteDailyCoverage,
+  toIsoDayUtc,
+} from './npm-download-ranges'
+import { isNpmPackageName } from './schemas'
+import {
+  MAX_NPM_STATS_GROUPS,
+  MAX_NPM_STATS_PACKAGES_PER_GROUP,
+  MAX_NPM_STATS_TOTAL_PACKAGES,
+} from './npm-stats-limits'
+
+type NpmDownloadsBulkPackage = {
+  hidden?: boolean
+  name: string
 }
 
-export interface GitHubStats {
-  starCount: number
-  contributorCount: number
-  dependentCount?: number // Scraped from GitHub web UI
-  forkCount?: number
-  repositoryCount?: number // Only for org-level stats
+type NpmDownloadsBulkGroup = {
+  packages: Array<NpmDownloadsBulkPackage>
 }
 
-export interface NpmPackageStats {
-  downloads: number
-  ratePerDay?: number // Downloads per day (growth rate for interpolation)
-  updatedAt?: number // Timestamp when these stats were fetched (ms since epoch)
+type NpmDownloadsBulkRequest = {
+  packageGroups: Array<NpmDownloadsBulkGroup>
+  startDate: string
+  endDate: string
 }
 
-export interface NpmStats {
-  totalDownloads: number
-  packages?: string
-  // Per-package stats with rate information
-  packageStats?: Record<string, NpmPackageStats>
-  // Aggregate rate and timestamp for animating the total
-  ratePerDay?: number // Aggregate downloads per day across all packages (growth rate)
-  updatedAt?: number // Most recent update timestamp across all packages (ms since epoch)
+const MAX_NPM_STATS_CHUNK_FETCH_CONCURRENCY = 8
+const MAX_NPM_STATS_RANGE_DAYS = 12 * 366
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
 }
 
-export interface OSSStats {
-  github: GitHubStats
-  npm: NpmStats
+function parseIsoDay(value: string) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return null
+
+  const date = new Date(`${value}T00:00:00.000Z`)
+  if (Number.isNaN(date.getTime())) return null
+
+  return date.toISOString().substring(0, 10) === value ? date : null
 }
 
-export interface OSSStatsWithDelta extends OSSStats {
-  delta?: {
-    github?: {
-      starCount?: number
-      contributorCount?: number
-      dependentCount?: number
-      forkCount?: number
+function parseNpmDownloadsBulkRequest(data: unknown): NpmDownloadsBulkRequest {
+  if (!isRecord(data)) {
+    throw new Error('Invalid npm stats request')
+  }
+
+  const rawGroups = data.packageGroups
+  const startDate = data.startDate
+  const endDate = data.endDate
+
+  if (
+    !Array.isArray(rawGroups) ||
+    rawGroups.length === 0 ||
+    rawGroups.length > MAX_NPM_STATS_GROUPS ||
+    typeof startDate !== 'string' ||
+    typeof endDate !== 'string'
+  ) {
+    throw new Error('Invalid npm stats request')
+  }
+
+  const parsedStart = parseIsoDay(startDate)
+  const parsedEnd = parseIsoDay(endDate)
+  if (!parsedStart || !parsedEnd || parsedStart > parsedEnd) {
+    throw new Error('Invalid npm stats date range')
+  }
+
+  const rangeDays = Math.ceil(
+    (parsedEnd.getTime() - parsedStart.getTime()) / (24 * 60 * 60 * 1000),
+  )
+  if (rangeDays > MAX_NPM_STATS_RANGE_DAYS) {
+    throw new Error('NPM stats date range is too large')
+  }
+
+  let totalPackages = 0
+  const packageGroups = rawGroups.map((rawGroup) => {
+    if (!isRecord(rawGroup) || !Array.isArray(rawGroup.packages)) {
+      throw new Error('Invalid npm stats package group')
     }
-    npm?: {
-      totalDownloads?: number
+
+    if (
+      rawGroup.packages.length === 0 ||
+      rawGroup.packages.length > MAX_NPM_STATS_PACKAGES_PER_GROUP
+    ) {
+      throw new Error('Invalid npm stats package group size')
     }
+
+    const packages = rawGroup.packages.map((rawPackage) => {
+      if (!isRecord(rawPackage) || typeof rawPackage.name !== 'string') {
+        throw new Error('Invalid npm stats package')
+      }
+
+      const name = rawPackage.name.trim()
+      if (!isNpmPackageName(name)) {
+        throw new Error(`Invalid npm package name: ${name}`)
+      }
+
+      return {
+        name,
+        hidden:
+          typeof rawPackage.hidden === 'boolean'
+            ? rawPackage.hidden
+            : undefined,
+      }
+    })
+
+    totalPackages += packages.length
+    return { packages }
+  })
+
+  if (totalPackages > MAX_NPM_STATS_TOTAL_PACKAGES) {
+    throw new Error('Too many npm packages requested')
   }
-  // Time between previous and current stats (in milliseconds)
-  // Used to calculate rate of change for animation interpolation
-  timeDelta?: number
+
+  return { packageGroups, startDate, endDate }
 }
 
-export type StatsQueryParams = {
-  library?: {
-    id: string
-    repo: string
-    frameworks?: string[]
-  }
+async function mapWithConcurrency<T, TResult>(
+  values: Array<T>,
+  concurrency: number,
+  fn: (value: T) => Promise<TResult>,
+) {
+  const results = new Array<TResult>(values.length)
+  let index = 0
+
+  const workers = Array.from(
+    { length: Math.min(concurrency, values.length) },
+    async () => {
+      while (index < values.length) {
+        const currentIndex = index
+        index += 1
+        results[currentIndex] = await fn(values[currentIndex])
+      }
+    },
+  )
+
+  await Promise.all(workers)
+
+  return results
 }
 
 /**
- * Fetch NPM package statistics for multiple packages
- * Aggregates stats from individual package cache
- * Uses batched database query for better performance
+ * NPM sometimes reports ecosystem-wide zero days.
+ *
+ * For isolated zero days after a package has active traffic, backfill with the
+ * same weekday from the previous week (day - 7), with up to 4 weeks fallback
+ * when consecutive anomaly weeks occur.
  */
-export async function fetchNpmPackageStats(
-  packageNames: string[],
-): Promise<NpmStats> {
-  // Handle empty array case
-  if (packageNames.length === 0) {
-    return {
-      totalDownloads: 0,
-      packageStats: {},
-    }
+function backfillZeroAnomalyDays(
+  dailyDownloads: NpmDailyDownload[],
+  today: string,
+) {
+  if (dailyDownloads.length < 8) {
+    return dailyDownloads
   }
 
-  // Import db functions dynamically to avoid pulling server code into client bundle
-  const { getBatchCachedNpmPackageStats } = await import('./stats-db.server')
+  const sorted = [...dailyDownloads].sort((a, b) => a.day.localeCompare(b.day))
+  const originalByDay = new Map(
+    sorted.map((d) => [d.day, d.downloads] as const),
+  )
+  const result = sorted.map((d) => ({ ...d }))
+  const correctedByDay = new Map(
+    result.map((d) => [d.day, d.downloads] as const),
+  )
 
-  // Batch fetch all packages in a single database query
-  const results = await getBatchCachedNpmPackageStats(packageNames)
+  let seenNonZero = false
 
-  // Fill in zeros for any missing packages
-  for (const packageName of packageNames) {
-    if (!results.has(packageName)) {
-      results.set(packageName, { downloads: 0 })
+  for (const point of result) {
+    if (point.downloads > 0) {
+      seenNonZero = true
+      continue
     }
-  }
 
-  // Calculate total downloads, aggregate rate, and find most recent update
-  const packageStats: Record<string, NpmPackageStats> = {}
-  let totalDownloads = 0
-  let totalRatePerDay = 0
-  let mostRecentUpdate = 0
+    if (!seenNonZero || point.day === today) {
+      continue
+    }
 
-  for (const [packageName, stats] of results.entries()) {
-    totalDownloads += stats.downloads
-    packageStats[packageName] = stats
+    let previousWeekDownloads: number | undefined
+    for (let weeksBack = 1; weeksBack <= 4; weeksBack++) {
+      const previousWeekDay = addUtcDays(point.day, -7 * weeksBack)
+      const candidate = correctedByDay.get(previousWeekDay)
+      if (candidate !== undefined && candidate > 0) {
+        previousWeekDownloads = candidate
+        break
+      }
+    }
 
-    // Sum up rates for aggregate animation
-    if (stats.ratePerDay) {
-      totalRatePerDay += stats.ratePerDay
+    if (!previousWeekDownloads) {
+      continue
     }
 
-    // Track most recent update timestamp
-    if (stats.updatedAt && stats.updatedAt > mostRecentUpdate) {
-      mostRecentUpdate = stats.updatedAt
+    // Guard against filling true inactivity periods.
+    const hasNearbyNonZero = [-3, -2, -1, 1, 2, 3].some((offset) => {
+      const nearbyDownloads = originalByDay.get(addUtcDays(point.day, offset))
+      return nearbyDownloads !== undefined && nearbyDownloads > 0
+    })
+
+    if (!hasNearbyNonZero) {
+      continue
     }
-  }
 
-  return {
-    totalDownloads,
-    packageStats,
-    ratePerDay: totalRatePerDay !== 0 ? totalRatePerDay : undefined,
-    updatedAt: mostRecentUpdate > 0 ? mostRecentUpdate : undefined,
+    point.downloads = previousWeekDownloads
+    correctedByDay.set(point.day, previousWeekDownloads)
   }
+
+  return result
 }
 
-// Database functions moved to stats-db.server.ts
+function normalizeNpmDownloadSeries(
+  packageName: string,
+  dailyDownloads: NpmDailyDownload[],
+  today: string,
+) {
+  const zeroBackfilledDownloads = backfillZeroAnomalyDays(dailyDownloads, today)
+  return applyManualNpmDownloadOutlierCorrections(
+    packageName,
+    zeroBackfilledDownloads,
+  )
+}
 
 /**
- * Fetch NPM organization statistics with caching
- * Checks cache first, falls back to expired cache if available
- * Never computes fresh stats - scheduled tasks handle that
+ * Server function to get OSS statistics
+ * GitHub stats are cached separately. NPM stats prefer the small summary cache
+ * and fall back to the bulk NPM stats product cache when needed.
  */
-async function fetchNpmOrgStats(org: string): Promise<NpmStats> {
-  // Import db functions dynamically to avoid pulling server code into client bundle
-  const { getCachedNpmOrgStats, getExpiredNpmOrgStats } =
-    await import('./stats-db.server')
+function hasAnyOSSStats(
+  stats: OSSStatsWithDelta | null | undefined,
+): stats is OSSStatsWithDelta {
+  return !!stats && (stats.npm.totalDownloads > 0 || stats.github.starCount > 0)
+}
 
-  // Try cache first
-  const cached = await getCachedNpmOrgStats(org)
-  if (cached !== null) {
-    return cached
-  }
+function getLastCompletedStatsDay() {
+  const today = new Date()
+  const lastCompletedDay = new Date(
+    Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate()),
+  )
+  lastCompletedDay.setUTCDate(lastCompletedDay.getUTCDate() - 1)
+  return toIsoDayUtc(lastCompletedDay)
+}
+
+function getOSSStatsPackageNames(data: StatsQueryParams) {
+  if (!data.library) {
+    return [
+      ...new Set(
+        libraries.flatMap((library) => {
+          if (library.npmPackageNames?.length) {
+            return library.npmPackageNames
+          }
 
-  // Cache expired - try to use expired cache as fallback
-  const expiredCache = await getExpiredNpmOrgStats(org)
-  if (expiredCache !== null) {
-    return expiredCache
+          if (library.corePackageName) {
+            return [library.corePackageName]
+          }
+
+          return [`@tanstack/${library.id}`]
+        }),
+      ),
+    ]
   }
 
-  // No cache available - return zero stats
-  // Scheduled tasks will populate the cache
-  return {
-    totalDownloads: 0,
-    packageStats: {},
+  if (data.library.npmPackageNames?.length) {
+    return data.library.npmPackageNames
   }
+
+  return [`@tanstack/${data.library.id}`]
 }
 
-// GitHub cache functions moved to stats-db.server.ts
+function sumDailyDownloadsInRange({
+  downloads,
+  end,
+  start,
+}: {
+  downloads: Array<NpmDailyDownload>
+  end: string
+  start: string
+}) {
+  return downloads.reduce((total, point) => {
+    if (point.day < start || point.day > end) {
+      return total
+    }
 
-/**
- * Calculate delta between previous and current stats
- */
-function calculateDelta(
-  previousGitHub: GitHubStats | null,
-  currentGitHub: GitHubStats,
-  previousNpm: NpmStats | null,
-  currentNpm: NpmStats,
-  timeDeltaMs: number,
-): OSSStatsWithDelta {
-  return {
-    github: currentGitHub,
-    npm: currentNpm,
-    delta: {
-      github: previousGitHub
-        ? {
-            starCount: currentGitHub.starCount - previousGitHub.starCount,
-            contributorCount:
-              currentGitHub.contributorCount - previousGitHub.contributorCount,
-            dependentCount:
-              currentGitHub.dependentCount !== undefined &&
-              previousGitHub.dependentCount !== undefined
-                ? currentGitHub.dependentCount - previousGitHub.dependentCount
-                : undefined,
-            forkCount:
-              currentGitHub.forkCount !== undefined &&
-              previousGitHub.forkCount !== undefined
-                ? currentGitHub.forkCount - previousGitHub.forkCount
-                : undefined,
-          }
-        : undefined,
-      npm: previousNpm
-        ? {
-            totalDownloads:
-              currentNpm.totalDownloads - previousNpm.totalDownloads,
-          }
-        : undefined,
-    },
-    timeDelta: timeDeltaMs,
-  }
+    return total + point.downloads
+  }, 0)
 }
 
-/**
- * Server function to get OSS statistics
- * GitHub stats are cached separately, NPM stats are aggregated from individual package cache
- */
-export const getOSSStats = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      library: v.optional(
-        v.object({
-          id: v.string(),
-          repo: v.string(),
-          frameworks: v.optional(v.array(v.string())),
-        }),
-      ),
-    }),
-  )
-  .handler(async ({ data }): Promise<OSSStatsWithDelta> => {
-    // Add HTTP caching headers for better performance
-    // Cache for 5 minutes on CDN, allow stale content for up to 1 hour
-    setResponseHeaders(
-      new Headers({
-        'Cache-Control':
-          'public, max-age=300, stale-while-revalidate=3600, stale-if-error=3600',
-        'Netlify-CDN-Cache-Control':
-          'public, max-age=300, durable, stale-while-revalidate=3600',
-      }),
+async function getCachedSummaryNpmStats(
+  data: StatsQueryParams,
+): Promise<NpmStats | null> {
+  if (data.library) {
+    const { getCachedLibraryNpmStatsSummary } =
+      await import('./homepage-npm-stats.server')
+    const librarySummary = await getCachedLibraryNpmStatsSummary(
+      data.library.id,
     )
 
-    let githubCacheKey: string
-    let npmPackageNames: string[]
-
-    // Import db functions dynamically to avoid pulling server code into client bundle
-    const {
-      getRegisteredPackages,
-      getCachedGitHubStats,
-      getExpiredGitHubStats,
-    } = await import('./stats-db.server')
-
-    if (data.library) {
-      // Get stats for a specific library
-      githubCacheKey = data.library.repo
-
-      // Fetch registered packages for this library from the database
-      npmPackageNames = await getRegisteredPackages(data.library.id)
-
-      // If no packages are registered yet, fall back to basic package name
-      // This ensures the system works before the first package discovery run
-      if (npmPackageNames.length === 0) {
-        npmPackageNames = [`@tanstack/${data.library.id}`]
-        console.warn(
-          `[OSS Stats] No registered packages found for ${data.library.id}, using fallback:`,
-          npmPackageNames,
-        )
+    return librarySummary
+      ? {
+          totalDownloads: librarySummary.totalDownloads,
+          updatedAt: librarySummary.updatedAt,
+        }
+      : null
+  }
+
+  const { getHomepageNpmStatsSummary } =
+    await import('./homepage-npm-stats.server')
+  const summary = await getHomepageNpmStatsSummary()
+
+  return summary
+    ? {
+        totalDownloads: summary.totalDownloads,
+        ratePerDay: summary.weeklyRatePerDay,
+        updatedAt: summary.updatedAt,
       }
-    } else {
-      // Get aggregate stats for TanStack org
-      githubCacheKey = 'org:tanstack'
-      // For org stats, we'll fetch all packages via fetchNpmOrgStats
-      npmPackageNames = []
-    }
+    : null
+}
 
-    // Try to get GitHub stats from cache (prefer valid cache, fallback to expired)
-    const cachedGitHub = await getCachedGitHubStats(githubCacheKey)
-    let githubStats: GitHubStats
-    let previousGitHubStats: GitHubStats | null
-    let githubTimeDeltaMs: number = 60 * 60 * 1000 // Default 1 hour
+async function fetchLiveNpmStats(data: StatsQueryParams): Promise<NpmStats> {
+  const packageNames = getOSSStatsPackageNames(data)
 
-    if (cachedGitHub) {
-      githubStats = cachedGitHub.stats
-      previousGitHubStats = cachedGitHub.previousStats
-      githubTimeDeltaMs = cachedGitHub.timeDeltaMs
-    } else {
-      // Cache expired or missing - try to use expired cache as fallback
-      const expiredCache = await getExpiredGitHubStats(githubCacheKey)
-      if (expiredCache) {
-        githubStats = expiredCache.stats
-        previousGitHubStats = expiredCache.previousStats
-        githubTimeDeltaMs = expiredCache.timeDeltaMs
-      } else {
-        // No cache available - return zero stats
-        // Scheduled tasks will populate the cache
-        githubStats = {
-          starCount: 0,
-          contributorCount: 0,
-          // dependentCount not available via GitHub API
-        }
-        previousGitHubStats = null
-        githubTimeDeltaMs = 60 * 60 * 1000
+  if (packageNames.length === 0) {
+    return { totalDownloads: 0 }
+  }
+
+  const cachedSummaryStats = await getCachedSummaryNpmStats(data)
+
+  if (cachedSummaryStats && cachedSummaryStats.totalDownloads > 0) {
+    return cachedSummaryStats
+  }
+
+  const endDate = getLastCompletedStatsDay()
+  const statsResults = await fetchNpmDownloadsBulk({
+    data: {
+      packageGroups: [
+        {
+          packages: packageNames.map((name) => ({ name })),
+        },
+      ],
+      startDate: '2015-01-10',
+      endDate,
+    },
+  })
+
+  const downloads: Array<NpmDailyDownload> = statsResults.flatMap(
+    (result: { packages: Array<{ downloads: Array<NpmDailyDownload> }> }) =>
+      result.packages.flatMap((pkg) => pkg.downloads),
+  )
+
+  const totalDownloads = downloads.reduce(
+    (total, point) => total + point.downloads,
+    0,
+  )
+  const weekStart = addUtcDays(endDate, -6)
+  const weeklyDownloads = sumDailyDownloadsInRange({
+    downloads,
+    start: weekStart,
+    end: endDate,
+  })
+
+  return {
+    totalDownloads,
+    ratePerDay: weeklyDownloads > 0 ? weeklyDownloads / 7 : undefined,
+    updatedAt: Date.now(),
+  }
+}
+
+async function fetchLiveGitHubStats(
+  data: StatsQueryParams,
+): Promise<GitHubStats> {
+  if (!data.library) {
+    try {
+      return await fetchGitHubOwnerStats('tanstack')
+    } catch (error) {
+      console.warn(
+        '[OSS Stats] Live GitHub org fallback failed:',
+        error instanceof Error ? error.message : String(error),
+      )
+      return {
+        starCount: 0,
+        contributorCount: 0,
+        dependentCount: 0,
       }
     }
+  }
 
-    // Get NPM stats (aggregated from individual package cache)
-    let npmStats: NpmStats
-    if (data.library) {
-      npmStats = await fetchNpmPackageStats(npmPackageNames)
-    } else {
-      npmStats = await fetchNpmOrgStats('tanstack')
+  if (!data.library?.repo) {
+    return {
+      starCount: 0,
+      contributorCount: 0,
+      dependentCount: 0,
     }
+  }
 
-    // Ensure totalDownloads is set (should never be undefined, but defensive check)
-    if (npmStats.totalDownloads === undefined) {
-      npmStats.totalDownloads = 0
+  try {
+    return await fetchGitHubRepoStats(data.library.repo)
+  } catch (error) {
+    console.warn(
+      `[OSS Stats] Live GitHub fallback failed for ${data.library.repo}:`,
+      error instanceof Error ? error.message : String(error),
+    )
+    return {
+      starCount: 0,
+      contributorCount: 0,
+      dependentCount: 0,
     }
+  }
+}
 
-    // Calculate delta using GitHub previous stats
-    // For NPM, we'd need to track previous aggregated totals, but individual packages
-    // already have rate info, so we'll use that for interpolation
-    return calculateDelta(
-      previousGitHubStats,
-      githubStats,
-      null, // NPM delta calculated from individual package rates
-      npmStats,
-      githubTimeDeltaMs,
-    )
-  })
+async function fetchLiveOSSStats(
+  data: StatsQueryParams,
+): Promise<OSSStatsWithDelta> {
+  const [github, npm] = await Promise.all([
+    fetchLiveGitHubStats(data),
+    fetchLiveNpmStats(data).catch((error) => {
+      console.warn(
+        '[OSS Stats] Live NPM fallback failed:',
+        error instanceof Error ? error.message : String(error),
+      )
+      return { totalDownloads: 0 }
+    }),
+  ])
 
-/**
- * Fetch NPM download data for multiple packages in bulk
- * Optimized to handle all packages in a single request with batch cache lookup
- * and parallel NPM API fetching. Current year data is cached daily.
- */
-export const fetchNpmDownloadsBulk = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      packageGroups: v.array(
-        v.object({
-          packages: v.array(
-            v.object({
-              name: v.string(),
-              hidden: v.optional(v.boolean()),
-            }),
-          ),
-        }),
-      ),
-      startDate: v.string(), // YYYY-MM-DD
-      endDate: v.string(), // YYYY-MM-DD
+  return {
+    github,
+    npm,
+  }
+}
+
+async function mergeCachedSummaryNpmStats(
+  data: StatsQueryParams,
+  stats: OSSStatsWithDelta | null,
+) {
+  const npm = await getCachedSummaryNpmStats(data)
+
+  if (!npm) {
+    return stats
+  }
+
+  return {
+    github: stats?.github ?? {
+      starCount: 0,
+      contributorCount: 0,
+      dependentCount: 0,
+    },
+    npm,
+    delta: stats?.delta,
+    timeDelta: stats?.timeDelta,
+  } satisfies OSSStatsWithDelta
+}
+
+export async function getOSSStats({
+  data,
+}: {
+  data: StatsQueryParams
+}): Promise<OSSStatsWithDelta> {
+  const scopeType = data.library ? 'library' : 'org'
+  const scopeKey = data.library?.id ?? 'tanstack'
+
+  // Add HTTP caching headers for better performance
+  // Cache for 5 minutes on CDN, allow stale content for up to 1 hour
+  setResponseHeaders(
+    new Headers({
+      'Cache-Control':
+        'public, max-age=300, stale-while-revalidate=3600, stale-if-error=3600',
+      'Cloudflare-CDN-Cache-Control':
+        'public, max-age=300, stale-while-revalidate=3600',
     }),
   )
-  .handler(async ({ data }) => {
-    const { packageGroups, startDate, endDate } = data
-
-    // Import cache functions
-    const { getBatchNpmDownloadChunks, setCachedNpmDownloadChunk } =
-      await import('./stats-db.server')
-
-    const NPM_STATS_START_DATE = '2015-01-10'
-    const today = new Date().toISOString().substring(0, 10)
-    const currentYear = new Date().getFullYear().toString()
-
-    // Collect all unique package/year combinations needed
-    interface ChunkRequest {
-      packageName: string
-      year: string
-      startDate: string
-      endDate: string
-      isCurrentYear: boolean
-    }
 
-    const chunkRequests: ChunkRequest[] = []
-    const allPackageNames = new Set<string>()
+  let cachedStats: OSSStatsWithDelta | null = null
 
-    for (const group of packageGroups) {
-      for (const pkg of group.packages) {
-        allPackageNames.add(pkg.name)
+  if (envFunctions.DATABASE_URL) {
+    const { getCachedOssStats } = await import('./stats-db.server')
+    cachedStats = await getCachedOssStats(scopeType, scopeKey)
+  }
 
-        // Generate year-based chunks from startDate to endDate
-        const startYear = new Date(startDate).getFullYear()
-        const endYear = new Date(endDate).getFullYear()
+  const cachedStatsWithSummary = await mergeCachedSummaryNpmStats(
+    data,
+    cachedStats,
+  )
 
-        for (let year = startYear; year <= endYear; year++) {
-          const yearStr = year.toString()
-          const isCurrentYear = yearStr === currentYear
+  if (hasAnyOSSStats(cachedStatsWithSummary)) {
+    return cachedStatsWithSummary
+  }
 
-          let chunkStart = `${yearStr}-01-01`
-          let chunkEnd = `${yearStr}-12-31`
+  if (!data.library) {
+    return cachedStatsWithSummary ?? getEmptyOSSStats()
+  }
 
-          if (isCurrentYear) {
-            chunkEnd = today
-          }
+  const liveStats = await fetchLiveOSSStats(data)
 
-          // Adjust start date if before npm stats started
-          if (chunkStart < NPM_STATS_START_DATE) {
-            chunkStart = NPM_STATS_START_DATE
-          }
+  if (hasAnyOSSStats(liveStats)) {
+    return liveStats
+  }
 
-          // Skip future years
-          if (year > parseInt(currentYear)) {
-            continue
-          }
+  return cachedStatsWithSummary ?? getEmptyOSSStats()
+}
+
+function getEmptyOSSStats(): OSSStatsWithDelta {
+  return {
+    github: {
+      starCount: 0,
+      contributorCount: 0,
+      dependentCount: 0,
+    },
+    npm: {
+      totalDownloads: 0,
+    },
+  }
+}
+
+/**
+ * Fetch NPM download data for multiple packages in bulk
+ * Optimized to handle all packages in a single request with batch cache lookup
+ * and parallel NPM API fetching. Current year data is cached daily.
+ */
+export async function fetchNpmDownloadsBulkData({ data }: { data: unknown }) {
+  const { packageGroups, startDate, endDate } =
+    parseNpmDownloadsBulkRequest(data)
+
+  // Import cache functions
+  const {
+    getBatchNpmDownloadChunks,
+    getLatestNpmDownloadChunksBeforeRangeEnd,
+    setCachedNpmDownloadChunk,
+  } = await import('./npm-download-cache.server')
+
+  const today = new Date().toISOString().substring(0, 10)
+  const currentYear = new Date().getFullYear().toString()
+
+  // Collect all unique package/year combinations needed
+  interface ChunkRequest {
+    packageName: string
+    year: string
+    startDate: string
+    endDate: string
+    isCurrentYear: boolean
+  }
+
+  type DownloadChunk = {
+    packageName: string
+    dateFrom: string
+    dateTo: string
+    binSize: string
+    dailyData: Array<NpmDailyDownload>
+    totalDownloads: number
+    isImmutable: boolean
+    updatedAt?: string
+  }
+
+  function getChunkCacheKey(req: ChunkRequest) {
+    return `${req.packageName}|${req.startDate}|${req.endDate}|daily`
+  }
+
+  const chunkRequests: ChunkRequest[] = []
+
+  for (const group of packageGroups) {
+    for (const pkg of group.packages) {
+      for (const chunk of getNormalizedNpmDownloadChunks({
+        startDate,
+        endDate,
+        today,
+      })) {
+        const yearStr = new Date(`${chunk.from}T00:00:00.000Z`)
+          .getUTCFullYear()
+          .toString()
+        chunkRequests.push({
+          packageName: pkg.name,
+          year: yearStr,
+          startDate: chunk.from,
+          endDate: chunk.to,
+          isCurrentYear: yearStr === currentYear,
+        })
+      }
+    }
+  }
+
+  // Batch fetch all chunks from cache
+  const cachedChunks = await getBatchNpmDownloadChunks(
+    chunkRequests.map((req) => ({
+      packageName: req.packageName,
+      dateFrom: req.startDate,
+      dateTo: req.endDate,
+      binSize: 'daily',
+    })),
+  )
 
-          chunkRequests.push({
-            packageName: pkg.name,
-            year: yearStr,
-            startDate: chunkStart,
-            endDate: chunkEnd,
-            isCurrentYear,
-          })
+  // Identify chunks that need to be fetched from NPM API
+  const chunksToFetch: ChunkRequest[] = []
+  const resultChunks = new Map<string, DownloadChunk>()
+
+  for (const req of chunkRequests) {
+    const cacheKey = `${req.packageName}|${req.startDate}|${req.endDate}|daily`
+    const cached = cachedChunks.get(cacheKey)
+
+    if (cached) {
+      // For current year, check if cache is from today
+      if (req.isCurrentYear && !cached.isImmutable) {
+        // Check if the cache was updated today
+        const cacheDate = new Date(cached.updatedAt || 0)
+          .toISOString()
+          .substring(0, 10)
+        if (cacheDate === today) {
+          // Cache is from today, use it
+          resultChunks.set(cacheKey, cached)
+          continue
         }
+        // Cache is stale, need to refetch
+        chunksToFetch.push(req)
+      } else {
+        // Immutable historical data, always use cache
+        resultChunks.set(cacheKey, cached)
       }
+    } else {
+      // Not in cache, need to fetch
+      chunksToFetch.push(req)
     }
+  }
 
-    // Batch fetch all chunks from cache
-    const cachedChunks = await getBatchNpmDownloadChunks(
-      chunkRequests.map((req) => ({
+  // Fetch missing chunks from NPM API in parallel
+  if (chunksToFetch.length > 0) {
+    const fallbackChunks = await getLatestNpmDownloadChunksBeforeRangeEnd(
+      chunksToFetch.map((req) => ({
         packageName: req.packageName,
         dateFrom: req.startDate,
         dateTo: req.endDate,
@@ -416,44 +663,16 @@ export const fetchNpmDownloadsBulk = createServerFn({ method: 'POST' })
       })),
     )
 
-    // Identify chunks that need to be fetched from NPM API
-    const chunksToFetch: ChunkRequest[] = []
-    const resultChunks = new Map<string, any>()
-
-    for (const req of chunkRequests) {
-      const cacheKey = `${req.packageName}|${req.startDate}|${req.endDate}|daily`
-      const cached = cachedChunks.get(cacheKey)
-
-      if (cached) {
-        // For current year, check if cache is from today
-        if (req.isCurrentYear && !cached.isImmutable) {
-          // Check if the cache was updated today
-          const cacheDate = new Date(cached.updatedAt || 0)
-            .toISOString()
-            .substring(0, 10)
-          if (cacheDate === today) {
-            // Cache is from today, use it
-            resultChunks.set(cacheKey, cached)
-            continue
-          }
-          // Cache is stale, need to refetch
-          chunksToFetch.push(req)
-        } else {
-          // Immutable historical data, always use cache
-          resultChunks.set(cacheKey, cached)
-        }
-      } else {
-        // Not in cache, need to fetch
-        chunksToFetch.push(req)
-      }
-    }
+    const fetchedResults = await mapWithConcurrency(
+      chunksToFetch,
+      MAX_NPM_STATS_CHUNK_FETCH_CONCURRENCY,
+      async (req) => {
+        const cacheKey = getChunkCacheKey(req)
+        const fallbackChunk = fallbackChunks.get(cacheKey)
 
-    // Fetch missing chunks from NPM API in parallel
-    if (chunksToFetch.length > 0) {
-      const fetchPromises = chunksToFetch.map(async (req) => {
         try {
           const response = await fetch(
-            `https://api.npmjs.org/downloads/range/${req.startDate}:${req.endDate}/${req.packageName}`,
+            `https://api.npmjs.org/downloads/range/${req.startDate}:${req.endDate}/${encodeURIComponent(req.packageName)}`,
             {
               headers: {
                 Accept: 'application/json',
@@ -464,12 +683,20 @@ export const fetchNpmDownloadsBulk = createServerFn({ method: 'POST' })
 
           if (!response.ok) {
             if (response.status === 404) {
+              if (fallbackChunk) {
+                return {
+                  key: cacheKey,
+                  data: fallbackChunk,
+                }
+              }
+
               return {
-                key: `${req.packageName}|${req.startDate}|${req.endDate}|daily`,
+                key: cacheKey,
                 data: {
                   packageName: req.packageName,
                   dateFrom: req.startDate,
                   dateTo: req.endDate,
+                  binSize: 'daily',
                   dailyData: [],
                   totalDownloads: 0,
                   isImmutable: !req.isCurrentYear,
@@ -480,7 +707,15 @@ export const fetchNpmDownloadsBulk = createServerFn({ method: 'POST' })
           }
 
           const result = await response.json()
-          const downloads = result.downloads || []
+          const downloads = getNpmDailyDownloadsFromResponse(result)
+
+          if (
+            !hasCompleteDailyCoverage(downloads, req.startDate, req.endDate)
+          ) {
+            throw new Error(
+              `NPM API returned incomplete range ${downloads[0]?.day ?? 'empty'}:${downloads.at(-1)?.day ?? 'empty'} for ${req.startDate}:${req.endDate}`,
+            )
+          }
 
           const chunkData = {
             packageName: req.packageName,
@@ -488,20 +723,17 @@ export const fetchNpmDownloadsBulk = createServerFn({ method: 'POST' })
             dateTo: req.endDate,
             binSize: 'daily',
             totalDownloads: downloads.reduce(
-              (sum: number, d: any) => sum + d.downloads,
+              (sum, point) => sum + point.downloads,
               0,
             ),
             dailyData: downloads,
             isImmutable: !req.isCurrentYear,
           }
 
-          // Cache this chunk asynchronously (don't wait)
-          setCachedNpmDownloadChunk(chunkData).catch((err) =>
-            console.warn(`Failed to cache chunk for ${req.packageName}:`, err),
-          )
+          await setCachedNpmDownloadChunk(chunkData)
 
           return {
-            key: `${req.packageName}|${req.startDate}|${req.endDate}|daily`,
+            key: cacheKey,
             data: chunkData,
           }
         } catch (error) {
@@ -509,83 +741,101 @@ export const fetchNpmDownloadsBulk = createServerFn({ method: 'POST' })
             `Failed to fetch ${req.packageName} ${req.year}:`,
             error,
           )
+
+          if (fallbackChunk) {
+            console.warn(
+              `[NPM Download Chunks] Using fallback ${fallbackChunk.dateFrom}:${fallbackChunk.dateTo} for ${req.packageName} ${req.startDate}:${req.endDate}`,
+            )
+            return {
+              key: cacheKey,
+              data: fallbackChunk,
+            }
+          }
+
           // Return empty data on error
           return {
-            key: `${req.packageName}|${req.startDate}|${req.endDate}|daily`,
+            key: cacheKey,
             data: {
               packageName: req.packageName,
               dateFrom: req.startDate,
               dateTo: req.endDate,
+              binSize: 'daily',
               dailyData: [],
               totalDownloads: 0,
               isImmutable: !req.isCurrentYear,
             },
           }
         }
-      })
-
-      const fetchedResults = await Promise.all(fetchPromises)
-      for (const result of fetchedResults) {
-        resultChunks.set(result.key, result.data)
-      }
+      },
+    )
+    for (const result of fetchedResults) {
+      resultChunks.set(result.key, result.data)
     }
+  }
 
-    // Organize results by package group
-    const results = packageGroups.map((group) => {
-      const packages = group.packages.map((pkg) => {
-        // Collect all chunks for this package
-        const packageChunks: any[] = []
-
-        for (const req of chunkRequests) {
-          if (req.packageName === pkg.name) {
-            const cacheKey = `${req.packageName}|${req.startDate}|${req.endDate}|daily`
-            const chunk = resultChunks.get(cacheKey)
-            if (chunk) {
-              packageChunks.push(chunk)
-            }
+  // Organize results by package group
+  const results = packageGroups.map((group) => {
+    const packages = group.packages.map((pkg) => {
+      // Collect all chunks for this package
+      const packageChunks: Array<DownloadChunk> = []
+
+      for (const req of chunkRequests) {
+        if (req.packageName === pkg.name) {
+          const cacheKey = `${req.packageName}|${req.startDate}|${req.endDate}|daily`
+          const chunk = resultChunks.get(cacheKey)
+          if (chunk) {
+            packageChunks.push(chunk)
           }
         }
+      }
 
-        // Combine all chunks and filter to requested date range
-        const allDownloads = packageChunks
-          .flatMap((chunk) => chunk.dailyData || [])
-          .filter((d: any) => {
-            const date = new Date(d.day)
-            return date >= new Date(startDate) && date <= new Date(endDate)
-          })
-          .sort(
-            (a: any, b: any) =>
-              new Date(a.day).getTime() - new Date(b.day).getTime(),
-          )
+      // Combine all chunks and filter to requested date range
+      const allDownloads = packageChunks
+        .flatMap((chunk) => chunk.dailyData)
+        .filter((d) => {
+          const date = new Date(d.day)
+          return date >= new Date(startDate) && date <= new Date(endDate)
+        })
+        .sort((a, b) => new Date(a.day).getTime() - new Date(b.day).getTime())
 
-        return {
-          name: pkg.name,
-          hidden: pkg.hidden,
-          downloads: allDownloads,
-        }
-      })
+      const correctedDownloads = normalizeNpmDownloadSeries(
+        pkg.name,
+        allDownloads,
+        today,
+      )
 
       return {
-        packages,
-        start: startDate,
-        end: endDate,
-        error: null,
+        name: pkg.name,
+        hidden: pkg.hidden,
+        downloads: correctedDownloads,
       }
     })
 
-    // Set cache headers for CDN caching
-    // Cache for 1 hour since we're now handling daily caching internally
-    setResponseHeaders(
-      new Headers({
-        'Cache-Control': 'public, max-age=3600, stale-while-revalidate=7200',
-        'Netlify-CDN-Cache-Control':
-          'public, max-age=3600, durable, stale-while-revalidate=7200',
-      }),
-    )
-
-    return results
+    return {
+      packages,
+      start: startDate,
+      end: endDate,
+      error: null,
+    }
   })
 
+  return results
+}
+
+export async function fetchNpmDownloadsBulk({ data }: { data: unknown }) {
+  const results = await fetchNpmDownloadsBulkData({ data })
+
+  setResponseHeaders(
+    new Headers({
+      'Cache-Control': 'public, max-age=3600, stale-while-revalidate=7200',
+      'Cloudflare-CDN-Cache-Control':
+        'public, max-age=3600, stale-while-revalidate=7200',
+    }),
+  )
+
+  return results
+}
+
 /**
  * Fetch NPM download data for a package for a specific chunk
  * Uses standardized year-based chunks for maximum cache reuse
@@ -594,37 +844,113 @@ export const fetchNpmDownloadsBulk = createServerFn({ method: 'POST' })
  * Chunk format: YYYY (e.g., "2023" means Jan 1 - Dec 31, 2023)
  * Special chunk "current" means current year to date
  */
-export const fetchNpmDownloadChunk = createServerFn({ method: 'GET' })
-  .inputValidator(
-    v.object({
-      packageName: v.string(),
-      year: v.string(), // YYYY format or "current" for current year
+export async function fetchNpmDownloadChunk({ data }: { data: any }) {
+  const { packageName, year } = data
+
+  // NPM download statistics only go back to January 10, 2015
+  const today = new Date().toISOString().substring(0, 10)
+  const currentYear = new Date().getFullYear().toString()
+
+  // Determine date range for this chunk
+  let startDate: string
+  let endDate: string
+  const isCurrentYear = year === 'current' || year === currentYear
+
+  if (year === 'current') {
+    // Current year to date
+    startDate = `${currentYear}-01-01`
+    endDate = today
+  } else {
+    // Full year
+    startDate = `${year}-01-01`
+    endDate = `${year}-12-31`
+
+    // Don't fetch future years
+    if (parseInt(year) > parseInt(currentYear)) {
+      return {
+        start: startDate,
+        end: endDate,
+        package: packageName,
+        year,
+        downloads: [],
+      }
+    }
+  }
+
+  // Adjust start date if before npm stats started
+  if (startDate < NPM_STATS_START_DATE) {
+    startDate = NPM_STATS_START_DATE
+  }
+
+  // Set aggressive cache headers for immutable historical data
+  // Current year data changes daily, historical data is immutable
+  const cacheMaxAge = isCurrentYear ? 3600 : 31536000 // 1 hour / 1 year
+  const cdnMaxAge = isCurrentYear ? 3600 : 31536000 // 1 hour / 1 year
+
+  setResponseHeaders(
+    new Headers({
+      // Keep CDN and browser TTLs separate so historical data can stay hot at
+      // the edge without forcing longer browser freshness.
+      'Cloudflare-CDN-Cache-Control': `public, max-age=${cdnMaxAge}${isCurrentYear ? '' : ', stale-while-revalidate=86400'}`,
+      'Cache-Control': `public, max-age=${cacheMaxAge}`,
     }),
   )
-  .handler(async ({ data }) => {
-    const { packageName, year } = data
-
-    // NPM download statistics only go back to January 10, 2015
-    const NPM_STATS_START_DATE = '2015-01-10'
-    const today = new Date().toISOString().substring(0, 10)
-    const currentYear = new Date().getFullYear().toString()
-
-    // Determine date range for this chunk
-    let startDate: string
-    let endDate: string
-    const isCurrentYear = year === 'current' || year === currentYear
-
-    if (year === 'current') {
-      // Current year to date
-      startDate = `${currentYear}-01-01`
-      endDate = today
-    } else {
-      // Full year
-      startDate = `${year}-01-01`
-      endDate = `${year}-12-31`
 
-      // Don't fetch future years
-      if (parseInt(year) > parseInt(currentYear)) {
+  // Import cache functions
+  const { getCachedNpmDownloadChunk, setCachedNpmDownloadChunk } =
+    await import('./npm-download-cache.server')
+
+  // Check R2 cache first
+  let cachedChunk
+  try {
+    cachedChunk = await getCachedNpmDownloadChunk(
+      packageName,
+      startDate,
+      endDate,
+      'daily',
+    )
+  } catch (error) {
+    console.warn(
+      `[NPM Download Chunk] Cache lookup error for ${packageName} ${year}:`,
+      error,
+    )
+  }
+
+  // Use cache if available and immutable
+  if (cachedChunk) {
+    if (cachedChunk.isImmutable) {
+      return {
+        start: cachedChunk.dateFrom,
+        end: cachedChunk.dateTo,
+        package: packageName,
+        year,
+        downloads: normalizeNpmDownloadSeries(
+          packageName,
+          cachedChunk.dailyData,
+          new Date().toISOString().substring(0, 10),
+        ),
+      }
+    }
+    // For current year, check if cache is still fresh (within 1 hour)
+    // If expired, fall through to fetch fresh data
+  }
+
+  // Fetch from NPM API
+  try {
+    const response = await fetch(
+      `https://api.npmjs.org/downloads/range/${startDate}:${endDate}/${encodeURIComponent(packageName)}`,
+      {
+        headers: {
+          Accept: 'application/json',
+          'User-Agent': 'TanStack-Stats',
+        },
+      },
+    )
+
+    if (!response.ok) {
+      if (response.status === 404) {
+        // Package not found or no data for this range
+        console.warn(`[NPM Download Chunk] 404 for ${packageName} ${year}`)
         return {
           start: startDate,
           end: endDate,
@@ -633,381 +959,398 @@ export const fetchNpmDownloadChunk = createServerFn({ method: 'GET' })
           downloads: [],
         }
       }
+      if (response.status === 429) {
+        // Rate limited - use cached data if available
+        if (cachedChunk) {
+          console.warn(
+            `[NPM Download Chunk] Rate limited, using cached data for ${packageName} ${year}`,
+          )
+          return {
+            start: cachedChunk.dateFrom,
+            end: cachedChunk.dateTo,
+            package: packageName,
+            year,
+            downloads: cachedChunk.dailyData,
+          }
+        }
+        throw new Error(
+          'NPM API rate limit exceeded. Please try again in a moment.',
+        )
+      }
+      throw new Error(
+        `NPM API error for ${packageName} ${year}: ${response.status}`,
+      )
     }
 
-    // Adjust start date if before npm stats started
-    if (startDate < NPM_STATS_START_DATE) {
-      startDate = NPM_STATS_START_DATE
-    }
-
-    // Set aggressive cache headers for immutable historical data
-    // Current year data changes daily, historical data is immutable
-    const cacheMaxAge = isCurrentYear ? 3600 : 31536000 // 1 hour / 1 year
-    const cdnMaxAge = isCurrentYear ? 3600 : 31536000 // 1 hour / 1 year
-
-    setResponseHeaders(
-      new Headers({
-        // Use Netlify-specific header for best performance
-        // 'durable' shares cached responses across all edge nodes
-        'Netlify-CDN-Cache-Control': `public, max-age=${cdnMaxAge}, durable${isCurrentYear ? '' : ', stale-while-revalidate=86400'}`,
-        // Also set standard Cache-Control for browser caching
-        'Cache-Control': `public, max-age=${cacheMaxAge}`,
-      }),
-    )
+    const result = await response.json()
+    const downloads = getNpmDailyDownloadsFromResponse(result)
 
-    // Import cache functions
-    const { getCachedNpmDownloadChunk, setCachedNpmDownloadChunk } =
-      await import('./stats-db.server')
+    if (!hasCompleteDailyCoverage(downloads, startDate, endDate)) {
+      throw new Error(
+        `NPM API returned incomplete range ${downloads[0]?.day ?? 'empty'}:${downloads.at(-1)?.day ?? 'empty'} for ${startDate}:${endDate}`,
+      )
+    }
 
-    // Check database cache first
-    let cachedChunk
+    // Cache this chunk
     try {
-      cachedChunk = await getCachedNpmDownloadChunk(
+      const isImmutable = !isCurrentYear
+      await setCachedNpmDownloadChunk({
         packageName,
-        startDate,
-        endDate,
-        'daily',
-      )
+        dateFrom: startDate,
+        dateTo: endDate,
+        binSize: 'daily',
+        totalDownloads: downloads.reduce(
+          (sum: number, d: any) => sum + d.downloads,
+          0,
+        ),
+        dailyData: downloads,
+        isImmutable,
+      })
     } catch (error) {
       console.warn(
-        `[NPM Download Chunk] Cache lookup error for ${packageName} ${year}:`,
+        `[NPM Download Chunk] Cache write error for ${packageName} ${year}:`,
         error,
       )
     }
 
-    // Use cache if available and immutable
-    if (cachedChunk) {
-      if (cachedChunk.isImmutable) {
-        return {
-          start: cachedChunk.dateFrom,
-          end: cachedChunk.dateTo,
-          package: packageName,
-          year,
-          downloads: cachedChunk.dailyData,
-        }
-      }
-      // For current year, check if cache is still fresh (within 1 hour)
-      // If expired, fall through to fetch fresh data
+    return {
+      start: startDate,
+      end: endDate,
+      package: packageName,
+      year,
+      downloads: normalizeNpmDownloadSeries(
+        packageName,
+        downloads,
+        new Date().toISOString().substring(0, 10),
+      ),
     }
-
-    // Fetch from NPM API
-    try {
-      const response = await fetch(
-        `https://api.npmjs.org/downloads/range/${startDate}:${endDate}/${packageName}`,
-        {
-          headers: {
-            Accept: 'application/json',
-            'User-Agent': 'TanStack-Stats',
-          },
-        },
+  } catch (error) {
+    // If fetch fails and we have cached data, use that
+    if (cachedChunk) {
+      console.warn(
+        `[NPM Download Chunk] Fetch failed, using cached data for ${packageName} ${year}`,
       )
-
-      if (!response.ok) {
-        if (response.status === 404) {
-          // Package not found or no data for this range
-          console.warn(`[NPM Download Chunk] 404 for ${packageName} ${year}`)
-          return {
-            start: startDate,
-            end: endDate,
-            package: packageName,
-            year,
-            downloads: [],
-          }
-        }
-        if (response.status === 429) {
-          // Rate limited - use cached data if available
-          if (cachedChunk) {
-            console.warn(
-              `[NPM Download Chunk] Rate limited, using cached data for ${packageName} ${year}`,
-            )
-            return {
-              start: cachedChunk.dateFrom,
-              end: cachedChunk.dateTo,
-              package: packageName,
-              year,
-              downloads: cachedChunk.dailyData,
-            }
-          }
-          throw new Error(
-            'NPM API rate limit exceeded. Please try again in a moment.',
-          )
-        }
-        throw new Error(
-          `NPM API error for ${packageName} ${year}: ${response.status}`,
-        )
-      }
-
-      const result = await response.json()
-      const downloads = result.downloads || []
-
-      // Cache this chunk
-      try {
-        const isImmutable = !isCurrentYear
-        await setCachedNpmDownloadChunk({
-          packageName,
-          dateFrom: startDate,
-          dateTo: endDate,
-          binSize: 'daily',
-          totalDownloads: downloads.reduce(
-            (sum: number, d: any) => sum + d.downloads,
-            0,
-          ),
-          dailyData: downloads,
-          isImmutable,
-        })
-      } catch (error) {
-        console.warn(
-          `[NPM Download Chunk] Cache write error for ${packageName} ${year}:`,
-          error,
-        )
-      }
-
       return {
-        start: result.start || startDate,
-        end: result.end || endDate,
+        start: cachedChunk.dateFrom,
+        end: cachedChunk.dateTo,
         package: packageName,
         year,
-        downloads,
-      }
-    } catch (error) {
-      // If fetch fails and we have cached data, use that
-      if (cachedChunk) {
-        console.warn(
-          `[NPM Download Chunk] Fetch failed, using cached data for ${packageName} ${year}`,
-        )
-        return {
-          start: cachedChunk.dateFrom,
-          end: cachedChunk.dateTo,
-          package: packageName,
-          year,
-          downloads: cachedChunk.dailyData,
-        }
+        downloads: normalizeNpmDownloadSeries(
+          packageName,
+          cachedChunk.dailyData,
+          new Date().toISOString().substring(0, 10),
+        ),
       }
-      throw error
     }
-  })
+    throw error
+  }
+}
 
 /**
- * Fetch recent download statistics (daily, weekly, monthly) for a library
- * Uses getRegisteredPackages to include all framework adapters
+ * Fetch recent download statistics (daily, weekly, monthly) for a library.
  */
-export const fetchRecentDownloadStats = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      library: v.object({
-        id: v.string(),
-        repo: v.string(),
-        frameworks: v.optional(v.array(v.string())),
-      }),
+export async function fetchRecentDownloadStats({
+  data,
+}: {
+  data: RecentDownloadStatsQueryParams
+}): Promise<RecentDownloadStats> {
+  // Add HTTP caching headers - shorter cache for recent data
+  setResponseHeaders(
+    new Headers({
+      'Cache-Control': 'public, max-age=300, stale-while-revalidate=600',
+      'Cloudflare-CDN-Cache-Control':
+        'public, max-age=300, stale-while-revalidate=600',
     }),
   )
-  .handler(async ({ data }) => {
-    // Add HTTP caching headers - shorter cache for recent data
-    setResponseHeaders(
-      new Headers({
-        'Cache-Control': 'public, max-age=300, stale-while-revalidate=600',
-        'Netlify-CDN-Cache-Control':
-          'public, max-age=300, durable, stale-while-revalidate=600',
-      }),
-    )
 
-    // Import db functions dynamically
-    const {
-      getRegisteredPackages,
-      getBatchNpmDownloadChunks,
-      setCachedNpmDownloadChunk,
-    } = await import('./stats-db.server')
+  const {
+    getBatchNpmDownloadChunks,
+    getLatestNpmDownloadChunksCoveringRange,
+    setCachedNpmDownloadChunk,
+  } = await import('./npm-download-cache.server')
 
-    // Get all registered packages for this library (includes framework adapters)
-    let packageNames = await getRegisteredPackages(data.library.id)
+  let packageNames = data.library.npmPackageNames ?? []
 
-    // If no packages registered, fall back to basic package name
-    if (packageNames.length === 0) {
-      packageNames = [`@tanstack/${data.library.id}`]
-    }
+  if (packageNames.length === 0) {
+    packageNames = [`@tanstack/${data.library.id}`]
+  }
 
-    const today = new Date()
-    const todayStr = today.toISOString().substring(0, 10)
-
-    // Calculate date ranges
-    const dailyStart = new Date(today.getTime() - 24 * 60 * 60 * 1000)
-      .toISOString()
-      .substring(0, 10)
-    const weeklyStart = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
-      .toISOString()
-      .substring(0, 10)
-    const monthlyStart = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)
-      .toISOString()
-      .substring(0, 10)
-
-    // Create chunk requests for all packages and time periods
-    const chunkRequests = []
-    for (const packageName of packageNames) {
-      chunkRequests.push(
-        {
-          packageName,
-          dateFrom: dailyStart,
-          dateTo: todayStr,
-          binSize: 'daily' as const,
-          period: 'daily',
-        },
-        {
-          packageName,
-          dateFrom: weeklyStart,
-          dateTo: todayStr,
-          binSize: 'daily' as const,
-          period: 'weekly',
-        },
-        {
-          packageName,
-          dateFrom: monthlyStart,
-          dateTo: todayStr,
-          binSize: 'daily' as const,
-          period: 'monthly',
-        },
+  const today = new Date()
+  const dayInMs = 24 * 60 * 60 * 1000
+  const getDayAgo = (amount: number) =>
+    toIsoDayUtc(new Date(today.getTime() - amount * dayInMs))
+  const todayStr = toIsoDayUtc(today)
+  const lastCompletedDay = getDayAgo(1)
+
+  // Calculate date ranges
+  const dailyStart = lastCompletedDay
+  const weeklyStart = getDayAgo(7)
+  const previousWeeklyStart = getDayAgo(14)
+  const previousWeeklyEnd = getDayAgo(8)
+  const monthlyStart = getDayAgo(30)
+
+  const latestCachedChunks = await getLatestNpmDownloadChunksCoveringRange({
+    packageNames,
+    dateFrom: monthlyStart,
+    dateTo: lastCompletedDay,
+  })
+
+  if (latestCachedChunks.size > 0) {
+    let dailyTotal = 0
+    let previousWeeklyTotal = 0
+    let weeklyTotal = 0
+    let monthlyTotal = 0
+
+    for (const chunk of latestCachedChunks.values()) {
+      const normalizedDownloads = normalizeNpmDownloadSeries(
+        chunk.packageName,
+        chunk.dailyData,
+        todayStr,
       )
+
+      dailyTotal += sumDailyDownloadsInRange({
+        downloads: normalizedDownloads,
+        start: dailyStart,
+        end: lastCompletedDay,
+      })
+      previousWeeklyTotal += sumDailyDownloadsInRange({
+        downloads: normalizedDownloads,
+        start: previousWeeklyStart,
+        end: previousWeeklyEnd,
+      })
+      weeklyTotal += sumDailyDownloadsInRange({
+        downloads: normalizedDownloads,
+        start: weeklyStart,
+        end: lastCompletedDay,
+      })
+      monthlyTotal += sumDailyDownloadsInRange({
+        downloads: normalizedDownloads,
+        start: monthlyStart,
+        end: lastCompletedDay,
+      })
     }
 
-    // Try to get cached data first
-    const cachedChunks = await getBatchNpmDownloadChunks(chunkRequests)
-    const needsFetch: typeof chunkRequests = []
-    const results = new Map<string, any>()
+    return {
+      dailyDownloads: dailyTotal,
+      monthlyDownloads: monthlyTotal,
+      previousWeeklyDownloads: previousWeeklyTotal,
+      sparklineDownloads: [],
+      updatedAt: Date.now(),
+      weeklyDownloads: weeklyTotal,
+    }
+  }
 
-    // Check what we have in cache vs what needs fetching
-    for (const req of chunkRequests) {
-      const cacheKey = `${req.packageName}|${req.dateFrom}|${req.dateTo}|${req.binSize}`
-      const cached = cachedChunks.get(cacheKey)
+  type RecentDownloadPeriod = 'daily' | 'monthly' | 'previousWeekly' | 'weekly'
 
-      if (cached) {
-        // Check if cache is recent enough (within last hour for recent data)
-        const cacheAge = Date.now() - Number(cached.updatedAt ?? 0)
-        const isStale = cacheAge > 60 * 60 * 1000 // 1 hour
+  type RecentDownloadChunkRequest = {
+    binSize: 'daily'
+    dateFrom: string
+    dateTo: string
+    packageName: string
+    period: RecentDownloadPeriod
+  }
 
-        if (!isStale) {
-          results.set(cacheKey, cached)
-          continue
-        }
-      }
+  type RecentDownloadChunk = {
+    packageName: string
+    dateFrom: string
+    dateTo: string
+    binSize: string
+    dailyData: Array<NpmDailyDownload>
+    totalDownloads: number
+    isImmutable: boolean
+    updatedAt?: number | string
+  }
 
-      needsFetch.push(req)
+  // Create chunk requests for all packages and time periods
+  const chunkRequests: Array<RecentDownloadChunkRequest> = []
+  for (const packageName of packageNames) {
+    chunkRequests.push(
+      {
+        packageName,
+        dateFrom: dailyStart,
+        dateTo: lastCompletedDay,
+        binSize: 'daily',
+        period: 'daily',
+      },
+      {
+        packageName,
+        dateFrom: weeklyStart,
+        dateTo: lastCompletedDay,
+        binSize: 'daily',
+        period: 'weekly',
+      },
+      {
+        packageName,
+        dateFrom: previousWeeklyStart,
+        dateTo: previousWeeklyEnd,
+        binSize: 'daily',
+        period: 'previousWeekly',
+      },
+      {
+        packageName,
+        dateFrom: monthlyStart,
+        dateTo: lastCompletedDay,
+        binSize: 'daily',
+        period: 'monthly',
+      },
+    )
+  }
+
+  // Try to get cached data first
+  const cachedChunks = await getBatchNpmDownloadChunks(chunkRequests)
+  const needsFetch: typeof chunkRequests = []
+  const results = new Map<string, RecentDownloadChunk>()
+
+  // Check what we have in cache vs what needs fetching
+  for (const req of chunkRequests) {
+    const cacheKey = `${req.packageName}|${req.dateFrom}|${req.dateTo}|${req.binSize}`
+    const cached = cachedChunks.get(cacheKey)
+
+    if (cached) {
+      // Check if cache is recent enough (within last hour for recent data)
+      const updatedAt = cached.updatedAt ? Date.parse(cached.updatedAt) : 0
+      const isStale =
+        !Number.isFinite(updatedAt) || Date.now() - updatedAt > 60 * 60 * 1000
+
+      if (!isStale) {
+        results.set(cacheKey, cached)
+        continue
+      }
     }
 
-    // Fetch missing/stale data from NPM API
-    if (needsFetch.length > 0) {
-      const fetchPromises = needsFetch.map(async (req) => {
-        try {
-          const response = await fetch(
-            `https://api.npmjs.org/downloads/range/${req.dateFrom}:${req.dateTo}/${req.packageName}`,
-            {
-              headers: {
-                Accept: 'application/json',
-                'User-Agent': 'TanStack-Stats',
-              },
+    needsFetch.push(req)
+  }
+
+  // Fetch missing/stale data from NPM API
+  if (needsFetch.length > 0) {
+    const fetchPromises = needsFetch.map(async (req) => {
+      try {
+        const response = await fetch(
+          `https://api.npmjs.org/downloads/range/${req.dateFrom}:${req.dateTo}/${encodeURIComponent(req.packageName)}`,
+          {
+            headers: {
+              Accept: 'application/json',
+              'User-Agent': 'TanStack-Stats',
             },
-          )
+          },
+        )
 
-          if (!response.ok) {
-            if (response.status === 404) {
-              // Package not found, return zero data
-              return {
-                key: `${req.packageName}|${req.dateFrom}|${req.dateTo}|${req.binSize}`,
-                data: {
-                  packageName: req.packageName,
-                  dateFrom: req.dateFrom,
-                  dateTo: req.dateTo,
-                  binSize: req.binSize,
-                  dailyData: [],
-                  totalDownloads: 0,
-                  isImmutable: false,
-                  updatedAt: Date.now(),
-                },
-              }
+        if (!response.ok) {
+          if (response.status === 404) {
+            // Package not found, return zero data
+            return {
+              key: `${req.packageName}|${req.dateFrom}|${req.dateTo}|${req.binSize}`,
+              data: {
+                packageName: req.packageName,
+                dateFrom: req.dateFrom,
+                dateTo: req.dateTo,
+                binSize: req.binSize,
+                dailyData: [],
+                totalDownloads: 0,
+                isImmutable: false,
+                updatedAt: Date.now(),
+              },
             }
-            throw new Error(`NPM API error: ${response.status}`)
           }
+          throw new Error(`NPM API error: ${response.status}`)
+        }
 
-          const result = await response.json()
-          const downloads = result.downloads || []
+        const result = await response.json()
+        const downloads = getNpmDailyDownloadsFromResponse(result)
 
-          const chunkData = {
+        if (!hasCompleteDailyCoverage(downloads, req.dateFrom, req.dateTo)) {
+          throw new Error(
+            `NPM API returned incomplete recent range ${downloads[0]?.day ?? 'empty'}:${downloads.at(-1)?.day ?? 'empty'} for ${req.dateFrom}:${req.dateTo}`,
+          )
+        }
+
+        const chunkData = {
+          packageName: req.packageName,
+          dateFrom: req.dateFrom,
+          dateTo: req.dateTo,
+          binSize: req.binSize,
+          totalDownloads: downloads.reduce(
+            (sum, point) => sum + point.downloads,
+            0,
+          ),
+          dailyData: downloads,
+          isImmutable: false, // Recent data is mutable
+          updatedAt: Date.now(),
+        }
+
+        await setCachedNpmDownloadChunk(chunkData)
+
+        return {
+          key: `${req.packageName}|${req.dateFrom}|${req.dateTo}|${req.binSize}`,
+          data: chunkData,
+        }
+      } catch (error) {
+        console.error(
+          `Failed to fetch recent downloads for ${req.packageName}:`,
+          error,
+        )
+        // Return zero data on error
+        return {
+          key: `${req.packageName}|${req.dateFrom}|${req.dateTo}|${req.binSize}`,
+          data: {
             packageName: req.packageName,
             dateFrom: req.dateFrom,
             dateTo: req.dateTo,
             binSize: req.binSize,
-            totalDownloads: downloads.reduce(
-              (sum: number, d: any) => sum + d.downloads,
-              0,
-            ),
-            dailyData: downloads,
-            isImmutable: false, // Recent data is mutable
+            dailyData: [],
+            totalDownloads: 0,
+            isImmutable: false,
             updatedAt: Date.now(),
-          }
-
-          // Cache this chunk asynchronously
-          setCachedNpmDownloadChunk(chunkData).catch((err) =>
-            console.warn(
-              `Failed to cache recent downloads for ${req.packageName}:`,
-              err,
-            ),
-          )
-
-          return {
-            key: `${req.packageName}|${req.dateFrom}|${req.dateTo}|${req.binSize}`,
-            data: chunkData,
-          }
-        } catch (error) {
-          console.error(
-            `Failed to fetch recent downloads for ${req.packageName}:`,
-            error,
-          )
-          // Return zero data on error
-          return {
-            key: `${req.packageName}|${req.dateFrom}|${req.dateTo}|${req.binSize}`,
-            data: {
-              packageName: req.packageName,
-              dateFrom: req.dateFrom,
-              dateTo: req.dateTo,
-              binSize: req.binSize,
-              dailyData: [],
-              totalDownloads: 0,
-              isImmutable: false,
-              updatedAt: Date.now(),
-            },
-          }
+          },
         }
-      })
-
-      const fetchResults = await Promise.all(fetchPromises)
-      for (const result of fetchResults) {
-        results.set(result.key, result.data)
       }
-    }
-
-    // Aggregate results by time period
-    let dailyTotal = 0
-    let weeklyTotal = 0
-    let monthlyTotal = 0
+    })
 
-    for (const req of chunkRequests) {
-      const cacheKey = `${req.packageName}|${req.dateFrom}|${req.dateTo}|${req.binSize}`
-      const chunk = results.get(cacheKey)
+    const fetchResults = await Promise.all(fetchPromises)
+    for (const result of fetchResults) {
+      results.set(result.key, result.data)
+    }
+  }
 
-      if (chunk) {
-        const downloads = chunk.totalDownloads || 0
+  // Aggregate results by time period
+  let dailyTotal = 0
+  let previousWeeklyTotal = 0
+  let weeklyTotal = 0
+  let monthlyTotal = 0
+
+  for (const req of chunkRequests) {
+    const cacheKey = `${req.packageName}|${req.dateFrom}|${req.dateTo}|${req.binSize}`
+    const chunk = results.get(cacheKey)
+
+    if (chunk) {
+      const normalizedDownloads = normalizeNpmDownloadSeries(
+        req.packageName,
+        chunk.dailyData,
+        todayStr,
+      )
+      const downloads = normalizedDownloads.reduce(
+        (sum, point) => sum + point.downloads,
+        0,
+      )
 
-        if (req.period === 'daily') {
-          dailyTotal += downloads
-        } else if (req.period === 'weekly') {
-          weeklyTotal += downloads
-        } else if (req.period === 'monthly') {
-          monthlyTotal += downloads
-        }
+      if (req.period === 'daily') {
+        dailyTotal += downloads
+      } else if (req.period === 'previousWeekly') {
+        previousWeeklyTotal += downloads
+      } else if (req.period === 'weekly') {
+        weeklyTotal += downloads
+      } else if (req.period === 'monthly') {
+        monthlyTotal += downloads
       }
     }
+  }
 
-    return {
-      dailyDownloads: dailyTotal,
-      weeklyDownloads: weeklyTotal,
-      monthlyDownloads: monthlyTotal,
-    }
-  })
+  return {
+    dailyDownloads: dailyTotal,
+    monthlyDownloads: monthlyTotal,
+    previousWeeklyDownloads: previousWeeklyTotal,
+    sparklineDownloads: [],
+    updatedAt: Date.now(),
+    weeklyDownloads: weeklyTotal,
+  }
+}
diff --git a/src/utils/stats.types.ts b/src/utils/stats.types.ts
new file mode 100644
index 000000000..76be3eb57
--- /dev/null
+++ b/src/utils/stats.types.ts
@@ -0,0 +1,86 @@
+/**
+ * Shared types for stats utilities
+ * Extracted to break circular dependencies between stats modules
+ */
+
+export interface Library {
+  id: string
+  repo: string
+  frameworks?: string[]
+}
+
+export interface GitHubStats {
+  starCount: number
+  contributorCount: number
+  dependentCount?: number // Scraped from GitHub web UI
+  forkCount?: number
+  repositoryCount?: number // Only for org-level stats
+}
+
+export interface NpmPackageStats {
+  downloads: number
+  ratePerDay?: number // Downloads per day (growth rate for interpolation)
+  updatedAt?: number // Timestamp when these stats were fetched (ms since epoch)
+}
+
+export interface NpmStats {
+  totalDownloads: number
+  packages?: string
+  // Per-package stats with rate information
+  packageStats?: Record<string, NpmPackageStats>
+  // Aggregate rate and timestamp for animating the total
+  ratePerDay?: number // Aggregate downloads per day across all packages (growth rate)
+  updatedAt?: number // Most recent update timestamp across all packages (ms since epoch)
+}
+
+export interface OSSStats {
+  github: GitHubStats
+  npm: NpmStats
+}
+
+export interface OSSStatsWithDelta extends OSSStats {
+  delta?: {
+    github?: {
+      starCount?: number
+      contributorCount?: number
+      dependentCount?: number
+      forkCount?: number
+    }
+    npm?: {
+      totalDownloads?: number
+    }
+  }
+  // Time between previous and current stats (in milliseconds)
+  // Used to calculate rate of change for animation interpolation
+  timeDelta?: number
+}
+
+export type StatsQueryParams = {
+  library?: {
+    id: string
+    npmPackageNames?: string[]
+    repo: string
+    frameworks?: string[]
+  }
+}
+
+export type RecentDownloadStatsQueryParams = {
+  library: {
+    id: string
+    frameworks?: string[]
+    npmPackageNames?: string[]
+    repo?: string
+  }
+}
+
+export type RecentDownloadStats = {
+  dailyDownloads: number
+  monthlyDownloads: number
+  previousWeeklyDownloads: number
+  sparklineDownloads: Array<{
+    day: string
+    downloads: number
+  }>
+  updatedAt: number
+  weeklyDownloads: number
+}
diff --git a/src/utils/tanstack-npm-stats.ts b/src/utils/tanstack-npm-stats.ts
new file mode 100644
index 000000000..ad2477a72
--- /dev/null
+++ b/src/utils/tanstack-npm-stats.ts
@@ -0,0 +1,44 @@
+export const tanStackTotalNpmStatsPackageGroup = {
+  label: 'TanStack',
+  packages: [
+    { name: '@tanstack/query-core' },
+    { name: 'react-query' },
+    { name: '@tanstack/table-core' },
+    { name: 'react-table' },
+    { name: '@tanstack/router-core' },
+    { name: 'react-location' },
+    { name: '@tanstack/start-client-core' },
+    { name: '@tanstack/form-core' },
+    { name: '@tanstack/virtual-core' },
+    { name: 'react-virtual' },
+    { name: '@tanstack/db' },
+    { name: '@tanstack/pacer' },
+    { name: '@tanstack/pacer-lite' },
+    { name: '@tanstack/ai' },
+    { name: '@tanstack/intent' },
+    { name: '@tanstack/store', hidden: true },
+    { name: '@tanstack/hotkeys' },
+    { name: '@tanstack/ranger' },
+    { name: 'react-ranger' },
+    { name: '@tanstack/config' },
+    { name: '@tanstack/devtools' },
+    { name: '@tanstack/cli' },
+  ],
+  color: '#01a7b9',
+}
+
+export const tanStackTotalNpmStatsSearch = {
+  packageGroups: [tanStackTotalNpmStatsPackageGroup],
+  bucketOffset: 0,
+}
+
+export const tanStackTotalVisibleNpmPackageNames =
+  tanStackTotalNpmStatsPackageGroup.packages
+    .filter((pkg) => !pkg.hidden)
+    .map((pkg) => pkg.name)
+
+export const tanStackTotalNpmStatsLibrary = {
+  id: 'tanstack-total',
+  npmPackageNames: tanStackTotalVisibleNpmPackageNames,
+  repo: '',
+}
diff --git a/src/utils/upload-preflight.ts b/src/utils/upload-preflight.ts
new file mode 100644
index 000000000..52250c62e
--- /dev/null
+++ b/src/utils/upload-preflight.ts
@@ -0,0 +1,28 @@
+export const AVATAR_IMAGE_MAX_BYTES = 2 * 1024 * 1024
+export const SHOWCASE_IMAGE_MAX_BYTES = 4 * 1024 * 1024
+
+const allowedImageTypes = new Set([
+  'image/gif',
+  'image/jpeg',
+  'image/png',
+  'image/webp',
+])
+
+function formatBytes(bytes: number) {
+  return `${Math.round(bytes / 1024 / 1024)}MB`
+}
+
+export function validateImageUploadFile(
+  file: File,
+  maxBytes: number,
+): string | null {
+  if (!allowedImageTypes.has(file.type)) {
+    return 'Please select a PNG, JPG, WebP, or GIF image'
+  }
+
+  if (file.size > maxBytes) {
+    return `Please select an image up to ${formatBytes(maxBytes)}`
+  }
+
+  return null
+}
diff --git a/src/utils/uploadthing.ts b/src/utils/uploadthing.client.ts
similarity index 83%
rename from src/utils/uploadthing.ts
rename to src/utils/uploadthing.client.ts
index a0863d375..0f160f1ff 100644
--- a/src/utils/uploadthing.ts
+++ b/src/utils/uploadthing.client.ts
@@ -3,7 +3,7 @@ import {
   generateUploadButton,
   generateUploadDropzone,
 } from '@uploadthing/react'
-import type { UploadRouter } from '~/server/uploadthing'
+import type { UploadRouter } from '~/utils/uploadthing.types'
 
 export const UploadButton = generateUploadButton<UploadRouter>()
 export const UploadDropzone = generateUploadDropzone<UploadRouter>()
diff --git a/src/utils/uploadthing.types.ts b/src/utils/uploadthing.types.ts
new file mode 100644
index 000000000..b21ff62e6
--- /dev/null
+++ b/src/utils/uploadthing.types.ts
@@ -0,0 +1 @@
+export type UploadRouter = any
diff --git a/src/utils/url-boundary.ts b/src/utils/url-boundary.ts
new file mode 100644
index 000000000..5ccd24584
--- /dev/null
+++ b/src/utils/url-boundary.ts
@@ -0,0 +1,161 @@
+const DEFAULT_SITE_ORIGIN = 'https://tanstack.com'
+
+const SAFE_HREF_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:'])
+
+function getBaseOrigin(baseUrlOrOrigin?: string) {
+  if (!baseUrlOrOrigin) {
+    return DEFAULT_SITE_ORIGIN
+  }
+
+  try {
+    return new URL(baseUrlOrOrigin).origin
+  } catch {
+    return baseUrlOrOrigin.replace(/\/+$/g, '')
+  }
+}
+
+function hasCredentials(url: URL) {
+  return url.username.length > 0 || url.password.length > 0
+}
+
+export function isSafeHref(href: string | undefined | null) {
+  if (!href) {
+    return false
+  }
+
+  const trimmed = href.trim()
+
+  if (!trimmed) {
+    return false
+  }
+
+  if (trimmed.startsWith('#')) {
+    return true
+  }
+
+  if (trimmed.startsWith('/') && !trimmed.startsWith('//')) {
+    return true
+  }
+
+  if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed) || trimmed.startsWith('//')) {
+    try {
+      const url = new URL(trimmed, DEFAULT_SITE_ORIGIN)
+      return SAFE_HREF_PROTOCOLS.has(url.protocol) && !hasCredentials(url)
+    } catch {
+      return false
+    }
+  }
+
+  return true
+}
+
+export function isSafeHttpUrl(value: string | undefined | null) {
+  return normalizePublicHttpUrl(value) !== null
+}
+
+export function normalizePublicHttpUrl(value: string | undefined | null) {
+  if (!value) return null
+
+  try {
+    const url = new URL(value)
+    if (
+      (url.protocol !== 'http:' && url.protocol !== 'https:') ||
+      hasCredentials(url)
+    ) {
+      return null
+    }
+
+    return url.toString()
+  } catch {
+    return null
+  }
+}
+
+export function normalizeSameOriginPath(
+  value: string | undefined | null,
+  baseUrlOrOrigin: string,
+  maxLength = 2048,
+) {
+  if (!value) {
+    return null
+  }
+
+  const trimmed = value.trim()
+  if (!trimmed || trimmed.length > maxLength) {
+    return null
+  }
+
+  const baseOrigin = getBaseOrigin(baseUrlOrOrigin)
+
+  try {
+    const url = new URL(trimmed, baseOrigin)
+
+    if (
+      url.origin !== baseOrigin ||
+      (url.protocol !== 'https:' && url.protocol !== 'http:')
+    ) {
+      return null
+    }
+
+    return `${url.pathname}${url.search}${url.hash}`
+  } catch {
+    return null
+  }
+}
+
+function isStaticAssetPath(pathname: string) {
+  const [pathWithoutQuery] = pathname.split(/[?#]/)
+  return (
+    /\.[a-z0-9]+$/i.test(pathWithoutQuery) && !pathWithoutQuery.endsWith('.md')
+  )
+}
+
+export function getRoutableInternalLinkTarget(
+  href: string | undefined | null,
+  siteOrigin = DEFAULT_SITE_ORIGIN,
+) {
+  if (!href) {
+    return null
+  }
+
+  const trimmed = href.trim()
+  if (!trimmed || trimmed.startsWith('#')) {
+    return null
+  }
+
+  const isRootRelative = trimmed.startsWith('/') && !trimmed.startsWith('//')
+  const isAbsoluteOrProtocolRelative =
+    /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed) || trimmed.startsWith('//')
+
+  if (!isRootRelative && !isAbsoluteOrProtocolRelative) {
+    return null
+  }
+
+  const baseOrigin = getBaseOrigin(siteOrigin)
+
+  let url: URL
+  try {
+    url = new URL(trimmed, baseOrigin)
+  } catch {
+    return null
+  }
+
+  if (url.origin !== baseOrigin || hasCredentials(url)) {
+    return null
+  }
+
+  const path = `${url.pathname}${url.search}`
+  const isRoutableInternal =
+    url.pathname.startsWith('/') &&
+    !url.pathname.startsWith('//') &&
+    url.pathname !== '/api' &&
+    !url.pathname.startsWith('/api/') &&
+    !isStaticAssetPath(url.pathname)
+
+  if (!isRoutableInternal) {
+    return null
+  }
+
+  const hash = url.hash ? url.hash.slice(1) : undefined
+  return { path, hash }
+}
diff --git a/src/utils/url-validation.server.ts b/src/utils/url-validation.server.ts
new file mode 100644
index 000000000..b90cffeb8
--- /dev/null
+++ b/src/utils/url-validation.server.ts
@@ -0,0 +1,123 @@
+/**
+ * URL Validation for SSRF Protection
+ *
+ * Validates URLs to prevent Server-Side Request Forgery attacks.
+ * Only allows fetching from trusted hosts.
+ */
+
+// Allowlisted hosts for remote template/integration loading
+const ALLOWED_HOSTS = new Set([
+  // GitHub raw content
+  'raw.githubusercontent.com',
+  'github.com',
+  'gist.githubusercontent.com',
+  // GitLab raw content
+  'gitlab.com',
+  // Bitbucket raw content
+  'bitbucket.org',
+  // npm/unpkg CDN (for published packages)
+  'unpkg.com',
+  'cdn.jsdelivr.net',
+  // jsDelivr
+  'esm.sh',
+])
+
+// Blocked IP ranges (private, loopback, link-local)
+const BLOCKED_IP_PATTERNS = [
+  /^127\./, // Loopback
+  /^10\./, // Private Class A
+  /^172\.(1[6-9]|2[0-9]|3[01])\./, // Private Class B
+  /^192\.168\./, // Private Class C
+  /^169\.254\./, // Link-local
+  /^0\./, // Current network
+  /^::1$/, // IPv6 loopback
+  /^fe80:/i, // IPv6 link-local
+  /^fc00:/i, // IPv6 unique local
+  /^fd[0-9a-f]{2}:/i, // IPv6 unique local
+]
+
+export interface UrlValidationResult {
+  valid: boolean
+  error?: string
+  normalizedUrl?: string
+}
+
+/**
+ * Validate a URL for remote resource loading.
+ * Returns validation result with normalized URL if valid.
+ */
+export function validateRemoteUrl(urlString: string): UrlValidationResult {
+  if (!urlString || typeof urlString !== 'string') {
+    return { valid: false, error: 'URL is required' }
+  }
+
+  let url: URL
+  try {
+    url = new URL(urlString)
+  } catch {
+    return { valid: false, error: 'Invalid URL format' }
+  }
+
+  // Protocol check (only HTTPS allowed)
+  if (url.protocol !== 'https:') {
+    return { valid: false, error: 'Only HTTPS URLs are allowed' }
+  }
+
+  // Check for IP addresses (blocked to prevent SSRF via IP)
+  const hostname = url.hostname.toLowerCase()
+  for (const pattern of BLOCKED_IP_PATTERNS) {
+    if (pattern.test(hostname)) {
+      return { valid: false, error: 'IP addresses are not allowed' }
+    }
+  }
+
+  // Also block numeric IPs that might bypass the regex
+  if (/^\d+\.\d+\.\d+\.\d+$/.test(hostname)) {
+    return { valid: false, error: 'IP addresses are not allowed' }
+  }
+
+  // Host allowlist check
+  if (!ALLOWED_HOSTS.has(hostname)) {
+    return {
+      valid: false,
+      error: `Host '${hostname}' is not in the allowlist. Allowed hosts: ${Array.from(ALLOWED_HOSTS).join(', ')}`,
+    }
+  }
+
+  // Additional path validation for GitHub (prevent directory traversal)
+  if (hostname === 'raw.githubusercontent.com' || hostname === 'github.com') {
+    // Must have at least owner/repo in path
+    const pathParts = url.pathname.split('/').filter(Boolean)
+    if (pathParts.length < 2) {
+      return {
+        valid: false,
+        error: 'Invalid GitHub URL: must include owner and repo',
+      }
+    }
+  }
+
+  // Block suspicious path patterns
+  if (url.pathname.includes('..') || url.pathname.includes('//')) {
+    return { valid: false, error: 'Invalid URL path' }
+  }
+
+  return {
+    valid: true,
+    normalizedUrl: url.toString(),
+  }
+}
+
+/**
+ * Check if a host is allowed without full URL validation.
+ * Useful for quick checks before constructing URLs.
+ */
+export function isHostAllowed(hostname: string): boolean {
+  return ALLOWED_HOSTS.has(hostname.toLowerCase())
+}
+
+/**
+ * Get the list of allowed hosts for display in error messages.
+ */
+export function getAllowedHosts(): string[] {
+  return Array.from(ALLOWED_HOSTS)
+}
diff --git a/src/utils/useDeploymentProviderPlacement.ts b/src/utils/useDeploymentProviderPlacement.ts
new file mode 100644
index 000000000..847c938e2
--- /dev/null
+++ b/src/utils/useDeploymentProviderPlacement.ts
@@ -0,0 +1,78 @@
+import * as React from 'react'
+import { getPartnersForPlacement } from '~/utils/partner-placement'
+import { partners, type Partner } from '~/utils/partners'
+import { usePartnerPlacementContext } from '~/utils/usePartnerPlacementContext'
+
+export type DeploymentProviderId = 'cloudflare' | 'netlify' | 'railway'
+
+export const deploymentProviderIds: ReadonlyArray<DeploymentProviderId> = [
+  'cloudflare',
+  'netlify',
+  'railway',
+]
+
+type DeploymentProviderPlacementPartner = Pick<
+  Partner,
+  'category' | 'id' | 'name' | 'score' | 'tier'
+> & {
+  provider: DeploymentProviderId
+}
+
+function getDeploymentProviderPartner(provider: DeploymentProviderId) {
+  return partners.find(
+    (partner) =>
+      partner.id === provider &&
+      partner.category === 'deployment' &&
+      partner.status === 'active',
+  )
+}
+
+function getDeploymentProviderPlacementPartner(
+  provider: DeploymentProviderId,
+): DeploymentProviderPlacementPartner | undefined {
+  const partner = getDeploymentProviderPartner(provider)
+
+  if (!partner) {
+    return undefined
+  }
+
+  return {
+    category: partner.category,
+    id: partner.id,
+    name: partner.name,
+    provider,
+    score: partner.score,
+    tier: partner.tier,
+  }
+}
+
+export function useDeploymentProviderPlacement({
+  availableProviders,
+  surface,
+}: {
+  availableProviders: ReadonlyArray<DeploymentProviderId>
+  surface: string
+}) {
+  const placementContext = usePartnerPlacementContext({
+    category: 'deployment',
+    orderStrategy: 'tier-rotated',
+    surface,
+  })
+
+  return React.useMemo(() => {
+    const availableProviderSet = new Set(availableProviders)
+    const placementPartners = deploymentProviderIds.flatMap((provider) => {
+      if (!availableProviderSet.has(provider)) {
+        return []
+      }
+
+      const partner = getDeploymentProviderPlacementPartner(provider)
+
+      return partner ? [partner] : []
+    })
+
+    return getPartnersForPlacement(placementPartners, placementContext).map(
+      (partner) => partner.provider,
+    )
+  }, [availableProviders, placementContext])
+}
diff --git a/src/utils/useLocalStorage.ts b/src/utils/useLocalStorage.ts
index e0a9edf15..af0616bb1 100644
--- a/src/utils/useLocalStorage.ts
+++ b/src/utils/useLocalStorage.ts
@@ -1,11 +1,12 @@
 import { useState, useEffect } from 'react'
+import {
+  getLocalStorageItem,
+  removeLocalStorageItem,
+  setLocalStorageItem,
+} from '~/utils/browser-storage'
 
 function getWithExpiry<T>(key: string): T | undefined {
-  if (typeof window === 'undefined') {
-    return undefined
-  }
-
-  const itemStr = localStorage.getItem(key)
+  const itemStr = getLocalStorageItem(key)
   if (!itemStr) {
     return undefined
   }
@@ -20,14 +21,14 @@ function getWithExpiry<T>(key: string): T | undefined {
 
     // If the item is expired, delete the item from storage
     if (new Date().getTime() > item.ttl) {
-      localStorage.removeItem(key)
+      removeLocalStorageItem(key)
       return undefined
     }
 
     return item.value
   } catch {
     // If JSON parsing fails, remove the corrupted item and return undefined
-    localStorage.removeItem(key)
+    removeLocalStorageItem(key)
     return undefined
   }
 }
@@ -53,7 +54,7 @@ export function useLocalStorage<T>(
   }, [key])
 
   useEffect(() => {
-    localStorage.setItem(
+    setLocalStorageItem(
       key,
       JSON.stringify({
         value,
diff --git a/src/utils/useMediaQuery.ts b/src/utils/useMediaQuery.ts
new file mode 100644
index 000000000..2112184d0
--- /dev/null
+++ b/src/utils/useMediaQuery.ts
@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+export function useMediaQuery(query: string) {
+  const [matches, setMatches] = React.useState(false)
+
+  React.useEffect(() => {
+    const mediaQueryList = window.matchMedia(query)
+    const updateMatches = () => {
+      setMatches(mediaQueryList.matches)
+    }
+
+    updateMatches()
+    mediaQueryList.addEventListener('change', updateMatches)
+
+    return () => {
+      mediaQueryList.removeEventListener('change', updateMatches)
+    }
+  }, [query])
+
+  return matches
+}
diff --git a/src/utils/usePartnerPlacementContext.ts b/src/utils/usePartnerPlacementContext.ts
new file mode 100644
index 000000000..c06f205e4
--- /dev/null
+++ b/src/utils/usePartnerPlacementContext.ts
@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { useLoaderData } from '@tanstack/react-router'
+import type { Partner } from '~/utils/partners'
+import {
+  getPartnerPlacementContext,
+  getPartnerViewPlacementSeed,
+  type PartnerPlacementContext,
+  type PartnerPlacementOrderStrategy,
+} from '~/utils/partner-placement'
+
+export function usePartnerPlacementContext({
+  category,
+  orderStrategy,
+  surface,
+}: {
+  category?: Partner['category']
+  orderStrategy: PartnerPlacementOrderStrategy
+  surface: string
+}): PartnerPlacementContext {
+  const { partnerPlacementSessionSeed } = useLoaderData({ from: '__root__' })
+  const rotationSeed =
+    orderStrategy === 'tier-rotated'
+      ? getPartnerViewPlacementSeed(surface, partnerPlacementSessionSeed)
+      : undefined
+
+  return React.useMemo(
+    () =>
+      getPartnerPlacementContext({
+        category,
+        orderStrategy,
+        seed: rotationSeed,
+        surface,
+      }),
+    [category, orderStrategy, rotationSeed, surface],
+  )
+}
diff --git a/src/utils/user-stats.functions.ts b/src/utils/user-stats.functions.ts
new file mode 100644
index 000000000..7d84a3d98
--- /dev/null
+++ b/src/utils/user-stats.functions.ts
@@ -0,0 +1,15 @@
+import { createServerFn } from '@tanstack/react-start'
+import {
+  getSignupsChartData as getSignupsChartDataServer,
+  getUserStats as getUserStatsServer,
+} from '~/utils/user-stats.server'
+
+export const getUserStats = createServerFn({ method: 'POST' }).handler(
+  async () => getUserStatsServer(),
+)
+
+export const getSignupsChartData = createServerFn({ method: 'POST' })
+  .validator(
+    (data: { days: number | null; bin?: 'day' | 'week' | 'month' }) => data,
+  )
+  .handler(async ({ data }) => getSignupsChartDataServer({ data }))
diff --git a/src/utils/user-stats.server.ts b/src/utils/user-stats.server.ts
index d3a9355ed..862b9bbc6 100644
--- a/src/utils/user-stats.server.ts
+++ b/src/utils/user-stats.server.ts
@@ -2,10 +2,9 @@
  * Server functions for user statistics
  */
 
-import { createServerFn } from '@tanstack/react-start'
-import * as v from 'valibot'
 import { db } from '~/db/client'
 import { users } from '~/db/schema'
+import { hasCapability } from '~/db/types'
 import { requireCapability } from './auth.server'
 import { sql, gte, and, eq, lt } from 'drizzle-orm'
 import { ALL_TIME_FLOOR_DATE } from './chart'
@@ -20,208 +19,203 @@ import { ALL_TIME_FLOOR_DATE } from './chart'
  * - Ads waitlist statistics
  * - Ads disabled statistics
  */
-export const getUserStats = createServerFn({ method: 'POST' }).handler(
-  async () => {
-    await requireCapability({ data: { capability: 'admin' } })
-
-    // Get total user count
-    const totalUsersResult = await db
-      .select({ count: sql<number>`count(*)::int` })
-      .from(users)
-
-    const totalUsers = totalUsersResult[0]?.count ?? 0
-
-    // Get users created in last 7 days (for daily breakdown) - using UTC
-    const nowForSevenDays = new Date()
-    const sevenDaysAgo = new Date(
-      Date.UTC(
-        nowForSevenDays.getUTCFullYear(),
-        nowForSevenDays.getUTCMonth(),
-        nowForSevenDays.getUTCDate() - 7,
-      ),
-    )
+export async function getUserStats() {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  // Get total user count
+  const totalUsersResult = await db
+    .select({ count: sql<number>`count(*)::int` })
+    .from(users)
+
+  const totalUsers = totalUsersResult[0]?.count ?? 0
+
+  // Get users created in last 7 days (for daily breakdown) - using UTC
+  const nowForSevenDays = new Date()
+  const sevenDaysAgo = new Date(
+    Date.UTC(
+      nowForSevenDays.getUTCFullYear(),
+      nowForSevenDays.getUTCMonth(),
+      nowForSevenDays.getUTCDate() - 7,
+    ),
+  )
 
-    const recentUsers = await db.query.users.findMany({
-      where: gte(users.createdAt, sevenDaysAgo),
-      columns: {
-        createdAt: true,
-      },
-    })
+  const recentUsers = await db.query.users.findMany({
+    where: gte(users.createdAt, sevenDaysAgo),
+    columns: {
+      createdAt: true,
+    },
+  })
 
-    // Calculate daily signups for last 7 days
-    const dailySignups: Record<string, number> = {}
-    for (let i = 6; i >= 0; i--) {
-      const date = new Date()
-      date.setDate(date.getDate() - i)
-      const dateKey = date.toISOString().split('T')[0]
-      dailySignups[dateKey] = 0
+  // Calculate daily signups for last 7 days
+  const dailySignups: Record<string, number> = {}
+  for (let i = 6; i >= 0; i--) {
+    const date = new Date()
+    date.setDate(date.getDate() - i)
+    const dateKey = date.toISOString().split('T')[0]
+    dailySignups[dateKey] = 0
+  }
+
+  recentUsers.forEach((user) => {
+    const dateKey = user.createdAt.toISOString().split('T')[0]
+    if (dateKey in dailySignups) {
+      dailySignups[dateKey]++
     }
+  })
 
-    recentUsers.forEach((user) => {
-      const dateKey = user.createdAt.toISOString().split('T')[0]
-      if (dateKey in dailySignups) {
-        dailySignups[dateKey]++
-      }
+  // Get daily signup counts (aggregated by day) - using UTC for consistency
+  // This gives us efficient per-day data that can be used for both daily and cumulative charts
+  const dailySignupsData = await db
+    .select({
+      date: sql<string>`DATE(${users.createdAt} AT TIME ZONE 'UTC')`.as('date'),
+      count: sql<number>`COUNT(*)::int`.as('count'),
     })
+    .from(users)
+    .groupBy(sql`DATE(${users.createdAt} AT TIME ZONE 'UTC')`)
+    .orderBy(sql`DATE(${users.createdAt} AT TIME ZONE 'UTC')`)
+
+  // Convert to array of objects with proper date strings
+  const signupsPerDay = dailySignupsData.map((row) => ({
+    date: row.date,
+    count: row.count,
+  }))
+
+  // Get ads waitlist statistics
+  const adsWaitlistResult = await db
+    .select({ count: sql<number>`count(*)::int` })
+    .from(users)
+    .where(eq(users.interestedInHidingAds, true))
+
+  const adsWaitlistCount = adsWaitlistResult[0]?.count ?? 0
+
+  // Get ads disabled statistics
+  const adsDisabledResult = await db
+    .select({ count: sql<number>`count(*)::int` })
+    .from(users)
+    .where(eq(users.adsDisabled, true))
+
+  const adsDisabledCount = adsDisabledResult[0]?.count ?? 0
+
+  // Get users with disableAds capability
+  const userCapabilities = await db.query.users.findMany({
+    columns: {
+      capabilities: true,
+    },
+  })
 
-    // Get daily signup counts (aggregated by day) - using UTC for consistency
-    // This gives us efficient per-day data that can be used for both daily and cumulative charts
-    const dailySignupsData = await db
-      .select({
-        date: sql<string>`DATE(${users.createdAt} AT TIME ZONE 'UTC')`.as(
-          'date',
-        ),
-        count: sql<number>`COUNT(*)::int`.as('count'),
-      })
-      .from(users)
-      .groupBy(sql`DATE(${users.createdAt} AT TIME ZONE 'UTC')`)
-      .orderBy(sql`DATE(${users.createdAt} AT TIME ZONE 'UTC')`)
-
-    // Convert to array of objects with proper date strings
-    const signupsPerDay = dailySignupsData.map((row) => ({
-      date: row.date,
-      count: row.count,
-    }))
-
-    // Get ads waitlist statistics
-    const adsWaitlistResult = await db
-      .select({ count: sql<number>`count(*)::int` })
-      .from(users)
-      .where(eq(users.interestedInHidingAds, true))
-
-    const adsWaitlistCount = adsWaitlistResult[0]?.count ?? 0
-
-    // Get ads disabled statistics
-    const adsDisabledResult = await db
-      .select({ count: sql<number>`count(*)::int` })
-      .from(users)
-      .where(eq(users.adsDisabled, true))
-
-    const adsDisabledCount = adsDisabledResult[0]?.count ?? 0
-
-    // Get users with disableAds capability
-    const adsCapabilityResult = await db
-      .select({ count: sql<number>`count(*)::int` })
-      .from(users)
-      .where(sql`'disableAds' = ANY(${users.capabilities})`)
-
-    const adsCapabilityCount = adsCapabilityResult[0]?.count ?? 0
-
-    // Get users on waitlist who now have ads disabled
-    const waitlistWithAdsDisabledResult = await db
-      .select({ count: sql<number>`count(*)::int` })
-      .from(users)
-      .where(
-        and(eq(users.interestedInHidingAds, true), eq(users.adsDisabled, true)),
-      )
-
-    const waitlistWithAdsDisabledCount =
-      waitlistWithAdsDisabledResult[0]?.count ?? 0
-
-    // Calculate average signups per day (last 30 days) - using UTC
-    const nowForThirtyDays = new Date()
-    const thirtyDaysAgo = new Date(
-      Date.UTC(
-        nowForThirtyDays.getUTCFullYear(),
-        nowForThirtyDays.getUTCMonth(),
-        nowForThirtyDays.getUTCDate() - 30,
-      ),
+  const adsCapabilityCount = userCapabilities.reduce(
+    (count, user) =>
+      hasCapability(user.capabilities, 'disableAds') ? count + 1 : count,
+    0,
+  )
+
+  // Get users on waitlist who now have ads disabled
+  const waitlistWithAdsDisabledResult = await db
+    .select({ count: sql<number>`count(*)::int` })
+    .from(users)
+    .where(
+      and(eq(users.interestedInHidingAds, true), eq(users.adsDisabled, true)),
     )
 
-    const last30DaysResult = await db
-      .select({ count: sql<number>`count(*)::int` })
-      .from(users)
-      .where(gte(users.createdAt, thirtyDaysAgo))
+  const waitlistWithAdsDisabledCount =
+    waitlistWithAdsDisabledResult[0]?.count ?? 0
+
+  // Calculate average signups per day (last 30 days) - using UTC
+  const nowForThirtyDays = new Date()
+  const thirtyDaysAgo = new Date(
+    Date.UTC(
+      nowForThirtyDays.getUTCFullYear(),
+      nowForThirtyDays.getUTCMonth(),
+      nowForThirtyDays.getUTCDate() - 30,
+    ),
+  )
 
-    const last30DaysCount = last30DaysResult[0]?.count ?? 0
-    const avgSignupsPerDay = Math.round(last30DaysCount / 30)
+  const last30DaysResult = await db
+    .select({ count: sql<number>`count(*)::int` })
+    .from(users)
+    .where(gte(users.createdAt, thirtyDaysAgo))
 
-    // Calculate today's signups (using UTC for consistency with charts)
-    const now = new Date()
-    const todayStart = new Date(
-      Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()),
-    )
+  const last30DaysCount = last30DaysResult[0]?.count ?? 0
+  const avgSignupsPerDay = Math.round(last30DaysCount / 30)
+
+  // Calculate today's signups (using UTC for consistency with charts)
+  const now = new Date()
+  const todayStart = new Date(
+    Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()),
+  )
 
-    const todayResult = await db
-      .select({ count: sql<number>`count(*)::int` })
-      .from(users)
-      .where(gte(users.createdAt, todayStart))
+  const todayResult = await db
+    .select({ count: sql<number>`count(*)::int` })
+    .from(users)
+    .where(gte(users.createdAt, todayStart))
 
-    const todaySignups = todayResult[0]?.count ?? 0
+  const todaySignups = todayResult[0]?.count ?? 0
+
+  // Calculate yesterday's signups (using UTC)
+  const yesterdayStart = new Date(
+    Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - 1),
+  )
 
-    // Calculate yesterday's signups (using UTC)
-    const yesterdayStart = new Date(
-      Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - 1),
+  const yesterdayResult = await db
+    .select({ count: sql<number>`count(*)::int` })
+    .from(users)
+    .where(
+      and(
+        gte(users.createdAt, yesterdayStart),
+        lt(users.createdAt, todayStart),
+      ),
     )
 
-    const yesterdayResult = await db
-      .select({ count: sql<number>`count(*)::int` })
-      .from(users)
-      .where(
-        and(
-          gte(users.createdAt, yesterdayStart),
-          lt(users.createdAt, todayStart),
-        ),
-      )
-
-    const yesterdaySignups = yesterdayResult[0]?.count ?? 0
-
-    return {
-      totalUsers,
-      todaySignups,
-      yesterdaySignups,
-      avgSignupsPerDay,
-      dailySignups,
-      signupsPerDay, // Daily signup counts for charting
-      ads: {
-        waitlistCount: adsWaitlistCount,
-        disabledCount: adsDisabledCount,
-        capabilityCount: adsCapabilityCount,
-        waitlistWithAdsDisabledCount,
-        waitlistConversionRate:
-          adsWaitlistCount > 0
-            ? Math.round(
-                (waitlistWithAdsDisabledCount / adsWaitlistCount) * 100,
-              )
-            : 0,
-      },
-    }
-  },
-)
+  const yesterdaySignups = yesterdayResult[0]?.count ?? 0
+
+  return {
+    totalUsers,
+    todaySignups,
+    yesterdaySignups,
+    avgSignupsPerDay,
+    dailySignups,
+    signupsPerDay, // Daily signup counts for charting
+    ads: {
+      waitlistCount: adsWaitlistCount,
+      disabledCount: adsDisabledCount,
+      capabilityCount: adsCapabilityCount,
+      waitlistWithAdsDisabledCount,
+      waitlistConversionRate:
+        adsWaitlistCount > 0
+          ? Math.round((waitlistWithAdsDisabledCount / adsWaitlistCount) * 100)
+          : 0,
+    },
+  }
+}
 
 /**
  * Get daily signup data for charts with configurable time range
  */
-export const getSignupsChartData = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      days: v.optional(v.nullable(v.number())), // null = all time
-    }),
-  )
-  .handler(async ({ data: { days } }) => {
-    await requireCapability({ data: { capability: 'admin' } })
-
-    // Calculate start date based on days parameter
-    const startDate =
-      days === null || days === undefined
-        ? ALL_TIME_FLOOR_DATE
-        : new Date(Date.now() - days * 24 * 60 * 60 * 1000)
-
-    // Get daily signup counts from start date
-    const dailySignupsData = await db
-      .select({
-        date: sql<string>`DATE(${users.createdAt} AT TIME ZONE 'UTC')`.as(
-          'date',
-        ),
-        count: sql<number>`COUNT(*)::int`.as('count'),
-      })
-      .from(users)
-      .where(gte(users.createdAt, startDate))
-      .groupBy(sql`DATE(${users.createdAt} AT TIME ZONE 'UTC')`)
-      .orderBy(sql`DATE(${users.createdAt} AT TIME ZONE 'UTC')`)
-
-    return dailySignupsData.map((row) => ({
-      date: row.date,
-      count: row.count,
-    }))
-  })
+export async function getSignupsChartData({
+  data: { days },
+}: {
+  data: { days: number | null | undefined }
+}) {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  // Calculate start date based on days parameter
+  const startDate =
+    days === null || days === undefined
+      ? ALL_TIME_FLOOR_DATE
+      : new Date(Date.now() - days * 24 * 60 * 60 * 1000)
+
+  // Get daily signup counts from start date
+  const dailySignupsData = await db
+    .select({
+      date: sql<string>`DATE(${users.createdAt} AT TIME ZONE 'UTC')`.as('date'),
+      count: sql<number>`COUNT(*)::int`.as('count'),
+    })
+    .from(users)
+    .where(gte(users.createdAt, startDate))
+    .groupBy(sql`DATE(${users.createdAt} AT TIME ZONE 'UTC')`)
+    .orderBy(sql`DATE(${users.createdAt} AT TIME ZONE 'UTC')`)
+
+  return dailySignupsData.map((row) => ({
+    date: row.date,
+    count: row.count,
+  }))
+}
diff --git a/src/utils/users.functions.ts b/src/utils/users.functions.ts
new file mode 100644
index 000000000..aee5cc9c8
--- /dev/null
+++ b/src/utils/users.functions.ts
@@ -0,0 +1,116 @@
+import { createServerFn } from '@tanstack/react-start'
+import * as v from 'valibot'
+import { SIGNUP_SOURCES, type Capability } from '~/db/types'
+import {
+  addUserSignupSource as addUserSignupSourceServer,
+  adminSetAdsDisabled as adminSetAdsDisabledServer,
+  bulkUpdateUserCapabilities as bulkUpdateUserCapabilitiesServer,
+  getUser as getUserServer,
+  listUsers as listUsersServer,
+  removeProfileImage as removeProfileImageServer,
+  revertProfileImage as revertProfileImageServer,
+  setInterestedInHidingAds as setInterestedInHidingAdsServer,
+  updateAdPreference as updateAdPreferenceServer,
+  updateLastUsedFramework as updateLastUsedFrameworkServer,
+  updateUserCapabilities as updateUserCapabilitiesServer,
+} from '~/utils/users.server'
+import { pageIndexSchema, pageSizeSchema } from './schemas'
+
+const listUsersInput = v.pipe(
+  v.object({
+    pagination: v.object({
+      limit: pageSizeSchema,
+      page: v.optional(pageIndexSchema),
+    }),
+    emailFilter: v.optional(v.pipe(v.string(), v.maxLength(255))),
+    nameFilter: v.optional(v.pipe(v.string(), v.maxLength(255))),
+    capabilityFilter: v.optional(v.pipe(v.array(v.string()), v.maxLength(32))),
+    noCapabilitiesFilter: v.optional(v.boolean()),
+    adsDisabledFilter: v.optional(v.boolean()),
+    interestedInHidingAdsFilter: v.optional(v.boolean()),
+    useEffectiveCapabilities: v.optional(v.boolean(), true),
+    sortBy: v.optional(v.pipe(v.string(), v.maxLength(64))),
+    sortDir: v.optional(v.picklist(['asc', 'desc'])),
+  }),
+  v.transform((data) => ({
+    ...data,
+    capabilityFilter: data.capabilityFilter as Array<Capability> | undefined,
+  })),
+)
+
+export const listUsers = createServerFn({ method: 'POST' })
+  .validator(listUsersInput)
+  .handler(async ({ data }) => listUsersServer({ data }))
+
+export const getUser = createServerFn({ method: 'POST' })
+  .validator(v.object({ userId: v.pipe(v.string(), v.uuid()) }))
+  .handler(async ({ data }) => getUserServer({ data }))
+
+export const updateAdPreference = createServerFn({ method: 'POST' })
+  .validator(v.object({ adsDisabled: v.boolean() }))
+  .handler(async ({ data }) => updateAdPreferenceServer({ data }))
+
+export const updateLastUsedFramework = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      framework: v.pipe(v.string(), v.minLength(1), v.maxLength(50)),
+    }),
+  )
+  .handler(async ({ data }) => updateLastUsedFrameworkServer({ data }))
+
+export const updateUserCapabilities = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      userId: v.pipe(v.string(), v.uuid()),
+      capabilities: v.pipe(v.array(v.string()), v.maxLength(64)),
+    }),
+  )
+  .handler(async ({ data }) =>
+    updateUserCapabilitiesServer({
+      data: {
+        userId: data.userId,
+        capabilities: data.capabilities as Array<Capability>,
+      },
+    }),
+  )
+
+export const adminSetAdsDisabled = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      userId: v.pipe(v.string(), v.uuid()),
+      adsDisabled: v.boolean(),
+    }),
+  )
+  .handler(async ({ data }) => adminSetAdsDisabledServer({ data }))
+
+export const bulkUpdateUserCapabilities = createServerFn({ method: 'POST' })
+  .validator(
+    v.object({
+      userIds: v.pipe(v.array(v.pipe(v.string(), v.uuid())), v.maxLength(100)),
+      capabilities: v.pipe(v.array(v.string()), v.maxLength(64)),
+    }),
+  )
+  .handler(async ({ data }) =>
+    bulkUpdateUserCapabilitiesServer({
+      data: {
+        userIds: data.userIds,
+        capabilities: data.capabilities as Array<Capability>,
+      },
+    }),
+  )
+
+export const setInterestedInHidingAds = createServerFn({ method: 'POST' })
+  .validator(v.object({ interested: v.boolean() }))
+  .handler(async ({ data }) => setInterestedInHidingAdsServer({ data }))
+
+export const addUserSignupSource = createServerFn({ method: 'POST' })
+  .validator(v.object({ source: v.picklist(SIGNUP_SOURCES) }))
+  .handler(async ({ data }) => addUserSignupSourceServer({ data }))
+
+export const revertProfileImage = createServerFn({ method: 'POST' }).handler(
+  async () => revertProfileImageServer(),
+)
+
+export const removeProfileImage = createServerFn({ method: 'POST' }).handler(
+  async () => removeProfileImageServer(),
+)
diff --git a/src/utils/users.server.ts b/src/utils/users.server.ts
index 4a0371881..79bb6b5c9 100644
--- a/src/utils/users.server.ts
+++ b/src/utils/users.server.ts
@@ -1,285 +1,173 @@
-import { createServerFn } from '@tanstack/react-start'
 import { db } from '~/db/client'
 import { users } from '~/db/schema'
-import { eq, and, or, ilike, sql, asc, desc } from 'drizzle-orm'
+import { eq, and, or, ilike, sql, asc, desc, arrayOverlaps } from 'drizzle-orm'
 import type { InferSelectModel } from 'drizzle-orm'
 import { getAuthenticatedUser } from './auth.server-helpers'
 import { getBulkEffectiveCapabilities } from './capabilities.server'
 import { recordAuditLog } from './audit.server'
-import * as v from 'valibot'
-import { VALID_CAPABILITIES, type Capability } from '~/db/types'
+import { type Capability, type SignupSource } from '~/db/types'
 
 type UserRecord = InferSelectModel<typeof users>
 
-const capabilityPicklist = v.picklist(
-  VALID_CAPABILITIES as unknown as [Capability, ...Capability[]],
-)
-
 // Helper function to validate user capability
 // Optimized: getEffectiveCapabilities is already called in getAuthenticatedUser,
 // so we can reuse the capabilities from there
-const requireCapability = createServerFn({ method: 'POST' })
-  .inputValidator((data: { capability: string }) => ({
-    capability: data.capability as Capability,
-  }))
-  .handler(async ({ data: { capability } }) => {
-    const user = await getAuthenticatedUser()
-
-    // User already has capabilities from getAuthenticatedUser
-    // Validate that caller has the required capability (admin users have access to everything)
-    const hasAccess =
-      user.capabilities.includes('admin') ||
-      user.capabilities.includes(capability)
-    if (!hasAccess) {
-      throw new Error(`${capability} capability required`)
-    }
-
-    return { currentUser: user }
-  })
+async function requireCapability({
+  data: { capability },
+}: {
+  data: { capability: string }
+}) {
+  const user = await getAuthenticatedUser()
+  const hasAccess =
+    user.capabilities.includes('admin') ||
+    user.capabilities.includes(capability as Capability)
+  if (!hasAccess) {
+    throw new Error(`${capability} capability required`)
+  }
+  return { currentUser: user }
+}
 
 // Server function wrapper for listUsers
-export const listUsers = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.pipe(
-      v.object({
-        pagination: v.object({
-          limit: v.number(),
-          page: v.optional(v.number()),
-        }),
-        emailFilter: v.optional(v.string()),
-        nameFilter: v.optional(v.string()),
-        capabilityFilter: v.optional(v.array(v.string())),
-        noCapabilitiesFilter: v.optional(v.boolean()),
-        adsDisabledFilter: v.optional(v.boolean()),
-        interestedInHidingAdsFilter: v.optional(v.boolean()),
-        useEffectiveCapabilities: v.optional(v.boolean(), true),
-        sortBy: v.optional(v.string()),
-        sortDir: v.optional(v.picklist(['asc', 'desc'])),
-      }),
-      v.transform((data) => ({
-        ...data,
-        capabilityFilter: data.capabilityFilter as Capability[] | undefined,
-      })),
-    ),
-  )
-  .handler(async ({ data }) => {
-    if (!data || !data.pagination) {
-      throw new Error('Missing required')
-    }
-
-    const startTime = Date.now()
-
-    // Validate admin capability
-    await requireCapability({ data: { capability: 'admin' } })
-    const authTime = Date.now() - startTime
-
-    const limit = data.pagination.limit
-    const pageIndex = data.pagination.page ?? 0
-    const useEffectiveCapabilities = data.useEffectiveCapabilities ?? true
-
-    // Build query conditions (excluding capability filters if using effective capabilities)
-    const conditions = []
-
-    // Email filter (case-insensitive search)
-    if (data.emailFilter && data.emailFilter.length > 0) {
-      conditions.push(ilike(users.email, `%${data.emailFilter}%`))
-    }
-
-    // Name filter (search in name or displayUsername)
-    if (data.nameFilter && data.nameFilter.length > 0) {
-      const nameLower = data.nameFilter.toLowerCase()
-      conditions.push(
-        or(
-          sql`LOWER(${users.name}) LIKE ${`%${nameLower}%`}`,
-          sql`LOWER(${users.displayUsername}) LIKE ${`%${nameLower}%`}`,
-        ),
-      )
-    }
-
-    // No capabilities filter - only apply if using direct capabilities
-    if (data.noCapabilitiesFilter === true && !useEffectiveCapabilities) {
-      conditions.push(sql`array_length(${users.capabilities}, 1) IS NULL`)
-    }
-
-    // Capability filter - only apply SQL filter if using direct capabilities
-    if (
-      data.capabilityFilter &&
-      data.capabilityFilter.length > 0 &&
-      !useEffectiveCapabilities
-    ) {
-      // Use PostgreSQL array overlap operator (&&) with parameterized values
-      conditions.push(
-        sql`${users.capabilities} && ARRAY[${sql.join(
-          data.capabilityFilter.map((c) => sql`${c}`),
-          sql`, `,
-        )}]::capability[]`,
-      )
-    }
+export async function listUsers({ data }: { data: any }) {
+  if (!data || !data.pagination) {
+    throw new Error('Missing required')
+  }
+
+  const startTime = Date.now()
+
+  // Validate admin capability
+  await requireCapability({ data: { capability: 'admin' } })
+  const authTime = Date.now() - startTime
+
+  const limit = data.pagination.limit
+  const pageIndex = data.pagination.page ?? 0
+  const useEffectiveCapabilities = data.useEffectiveCapabilities ?? true
+
+  // Build query conditions (excluding capability filters if using effective capabilities)
+  const conditions = []
+
+  // Email filter (case-insensitive search)
+  if (data.emailFilter && data.emailFilter.length > 0) {
+    conditions.push(ilike(users.email, `%${data.emailFilter}%`))
+  }
+
+  // Name filter (search in name or displayUsername)
+  if (data.nameFilter && data.nameFilter.length > 0) {
+    const nameLower = data.nameFilter.toLowerCase()
+    conditions.push(
+      or(
+        sql`LOWER(${users.name}) LIKE ${`%${nameLower}%`}`,
+        sql`LOWER(${users.displayUsername}) LIKE ${`%${nameLower}%`}`,
+      ),
+    )
+  }
+
+  // No capabilities filter - only apply if using direct capabilities
+  if (data.noCapabilitiesFilter === true && !useEffectiveCapabilities) {
+    conditions.push(sql`array_length(${users.capabilities}, 1) IS NULL`)
+  }
+
+  // Capability filter - only apply SQL filter if using direct capabilities
+  if (
+    data.capabilityFilter &&
+    data.capabilityFilter.length > 0 &&
+    !useEffectiveCapabilities
+  ) {
+    // Use PostgreSQL array overlap operator (&&) with parameterized values
+    conditions.push(
+      arrayOverlaps(users.capabilities, data.capabilityFilter as Capability[]),
+    )
+  }
 
-    // Ads disabled filter
-    if (typeof data.adsDisabledFilter === 'boolean') {
-      conditions.push(eq(users.adsDisabled, data.adsDisabledFilter))
-    }
+  // Ads disabled filter
+  if (typeof data.adsDisabledFilter === 'boolean') {
+    conditions.push(eq(users.adsDisabled, data.adsDisabledFilter))
+  }
 
-    // Interested in hiding ads filter
-    if (typeof data.interestedInHidingAdsFilter === 'boolean') {
-      conditions.push(
-        eq(users.interestedInHidingAds, data.interestedInHidingAdsFilter),
-      )
+  // Interested in hiding ads filter
+  if (typeof data.interestedInHidingAdsFilter === 'boolean') {
+    conditions.push(
+      eq(users.interestedInHidingAds, data.interestedInHidingAdsFilter),
+    )
+  }
+
+  // Get filtered users with proper SQL pagination
+  const whereClause = conditions.length > 0 ? and(...conditions) : undefined
+
+  // Build order by clause
+  const getOrderByClause = () => {
+    const dir = data.sortDir === 'asc' ? asc : desc
+    switch (data.sortBy) {
+      case 'email':
+        return dir(users.email)
+      case 'user':
+        return dir(users.name)
+      case 'createdAt':
+        return dir(users.createdAt)
+      default:
+        return desc(users.createdAt)
     }
-
-    // Get filtered users with proper SQL pagination
-    const whereClause = conditions.length > 0 ? and(...conditions) : undefined
-
-    // Build order by clause
-    const getOrderByClause = () => {
-      const dir = data.sortDir === 'asc' ? asc : desc
-      switch (data.sortBy) {
-        case 'email':
-          return dir(users.email)
-        case 'user':
-          return dir(users.name)
-        case 'createdAt':
-          return dir(users.createdAt)
-        default:
-          return desc(users.createdAt)
+  }
+  const orderByClause = getOrderByClause()
+
+  const queryStartTime = Date.now()
+
+  // If filtering by effective capabilities, we need to fetch all matching users first,
+  // then filter by effective capabilities in memory, then paginate
+  let allMatchingUsers: UserRecord[] = []
+  let filteredUsers: UserRecord[] = []
+
+  if (
+    useEffectiveCapabilities &&
+    (data.capabilityFilter?.length || data.noCapabilitiesFilter)
+  ) {
+    // Fetch all users matching other filters (without pagination)
+    allMatchingUsers = await db
+      .select()
+      .from(users)
+      .where(whereClause)
+      .orderBy(orderByClause)
+
+    // Get effective capabilities for all matching users
+    const userIds = allMatchingUsers.map((u) => u.id)
+    const effectiveCapabilitiesMap =
+      userIds.length > 0 ? await getBulkEffectiveCapabilities(userIds) : {}
+
+    // Filter by effective capabilities
+    filteredUsers = allMatchingUsers.filter((user) => {
+      const effectiveCapabilities = effectiveCapabilitiesMap[user.id] || []
+
+      // No capabilities filter
+      if (data.noCapabilitiesFilter === true) {
+        return effectiveCapabilities.length === 0
       }
-    }
-    const orderByClause = getOrderByClause()
-
-    const queryStartTime = Date.now()
-
-    // If filtering by effective capabilities, we need to fetch all matching users first,
-    // then filter by effective capabilities in memory, then paginate
-    let allMatchingUsers: UserRecord[] = []
-    let filteredUsers: UserRecord[] = []
-
-    if (
-      useEffectiveCapabilities &&
-      (data.capabilityFilter?.length || data.noCapabilitiesFilter)
-    ) {
-      // Fetch all users matching other filters (without pagination)
-      allMatchingUsers = await db
-        .select()
-        .from(users)
-        .where(whereClause)
-        .orderBy(orderByClause)
-
-      // Get effective capabilities for all matching users
-      const userIds = allMatchingUsers.map((u) => u.id)
-      const effectiveCapabilitiesMap =
-        userIds.length > 0 ? await getBulkEffectiveCapabilities(userIds) : {}
-
-      // Filter by effective capabilities
-      filteredUsers = allMatchingUsers.filter((user) => {
-        const effectiveCapabilities = effectiveCapabilitiesMap[user.id] || []
-
-        // No capabilities filter
-        if (data.noCapabilitiesFilter === true) {
-          return effectiveCapabilities.length === 0
-        }
-
-        // Capability filter
-        if (data.capabilityFilter && data.capabilityFilter.length > 0) {
-          // Check if effective capabilities overlap with filter
-          return data.capabilityFilter.some((cap) =>
-            effectiveCapabilities.includes(cap),
-          )
-        }
-
-        return true
-      })
 
-      // Apply pagination to filtered results
-      const offset = Math.max(0, pageIndex * limit)
-      const page = filteredUsers.slice(offset, offset + limit)
-      const filteredCount = filteredUsers.length
-      const hasMore = offset + limit < filteredCount
-
-      const selectTime = Date.now() - queryStartTime
-      const totalTime = Date.now() - startTime
-
-      // Log performance metrics
-      if (totalTime > 1000) {
-        console.warn(
-          `[listUsers] Slow query detected (effective capabilities):`,
-          {
-            authTime: `${authTime}ms`,
-            selectTime: `${selectTime}ms`,
-            totalTime: `${totalTime}ms`,
-            filters: {
-              emailFilter: !!data.emailFilter,
-              nameFilter: !!data.nameFilter,
-              capabilityFilter: !!data.capabilityFilter,
-              noCapabilitiesFilter: data.noCapabilitiesFilter,
-              useEffectiveCapabilities: true,
-            },
-            pagination: { limit, pageIndex, offset },
-            resultCount: page.length,
-            totalMatching: allMatchingUsers.length,
-            filteredCount,
-          },
+      // Capability filter
+      if (data.capabilityFilter && data.capabilityFilter.length > 0) {
+        // Check if effective capabilities overlap with filter
+        return data.capabilityFilter.some((cap: Capability) =>
+          effectiveCapabilities.includes(cap),
         )
       }
 
-      // Transform to match expected format
-      const transformedPage = page.map((user) => ({
-        _id: user.id,
-        userId: user.id,
-        email: user.email,
-        name: user.name,
-        image: user.image,
-        displayUsername: user.displayUsername,
-        capabilities: user.capabilities,
-        adsDisabled: user.adsDisabled,
-        interestedInHidingAds: user.interestedInHidingAds,
-        createdAt: user.createdAt.getTime(),
-        updatedAt: user.updatedAt.getTime(),
-      }))
-
-      return {
-        page: transformedPage,
-        isDone: !hasMore,
-        counts: {
-          total: filteredCount,
-          filtered: filteredCount,
-          pages: Math.max(1, Math.ceil(filteredCount / limit)),
-        },
-      }
-    } else {
-      // Standard SQL-based filtering (direct capabilities or no capability filters)
-      // Get total count (with filters applied)
-      const [totalCount] = await db
-        .select({ count: sql<number>`count(*)` })
-        .from(users)
-        .where(whereClause)
-
-      const countTime = Date.now() - queryStartTime
-
-      // Get filtered count (same as total when filters are applied)
-      const filteredCount = Number(totalCount.count)
-
-      // Apply SQL-level pagination (LIMIT/OFFSET)
-      const offset = Math.max(0, pageIndex * limit)
-      const selectStartTime = Date.now()
-      const page = await db
-        .select()
-        .from(users)
-        .where(whereClause)
-        .orderBy(orderByClause)
-        .limit(limit)
-        .offset(offset)
-
-      const selectTime = Date.now() - selectStartTime
-      const totalTime = Date.now() - startTime
-
-      const hasMore = offset + limit < filteredCount
-
-      // Log performance metrics
-      if (totalTime > 1000) {
-        console.warn(`[listUsers] Slow query detected:`, {
+      return true
+    })
+
+    // Apply pagination to filtered results
+    const offset = Math.max(0, pageIndex * limit)
+    const page = filteredUsers.slice(offset, offset + limit)
+    const filteredCount = filteredUsers.length
+    const hasMore = offset + limit < filteredCount
+
+    const selectTime = Date.now() - queryStartTime
+    const totalTime = Date.now() - startTime
+
+    // Log performance metrics
+    if (totalTime > 1000) {
+      console.warn(
+        `[listUsers] Slow query detected (effective capabilities):`,
+        {
           authTime: `${authTime}ms`,
-          countTime: `${countTime}ms`,
           selectTime: `${selectTime}ms`,
           totalTime: `${totalTime}ms`,
           filters: {
@@ -287,382 +175,464 @@ export const listUsers = createServerFn({ method: 'POST' })
             nameFilter: !!data.nameFilter,
             capabilityFilter: !!data.capabilityFilter,
             noCapabilitiesFilter: data.noCapabilitiesFilter,
-            useEffectiveCapabilities: false,
+            useEffectiveCapabilities: true,
           },
           pagination: { limit, pageIndex, offset },
           resultCount: page.length,
-        })
-      }
-
-      // Transform to match expected format
-      const transformedPage = page.map((user) => ({
-        _id: user.id,
-        userId: user.id,
-        email: user.email,
-        name: user.name,
-        image: user.image,
-        displayUsername: user.displayUsername,
-        capabilities: user.capabilities,
-        adsDisabled: user.adsDisabled,
-        interestedInHidingAds: user.interestedInHidingAds,
-        createdAt: user.createdAt.getTime(),
-        updatedAt: user.updatedAt.getTime(),
-      }))
-
-      return {
-        page: transformedPage,
-        isDone: !hasMore,
-        counts: {
-          total: filteredCount,
-          filtered: filteredCount,
-          pages: Math.max(1, Math.ceil(filteredCount / limit)),
+          totalMatching: allMatchingUsers.length,
+          filteredCount,
         },
-      }
+      )
     }
-  })
 
-// Get a single user by ID (admin only)
-export const getUser = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ userId: v.pipe(v.string(), v.uuid()) }))
-  .handler(async ({ data }) => {
-    await requireCapability({ data: { capability: 'admin' } })
-
-    const user = await db.query.users.findFirst({
-      where: eq(users.id, data.userId),
-    })
+    // Transform to match expected format
+    const transformedPage = page.map((user) => ({
+      _id: user.id,
+      userId: user.id,
+      email: user.email,
+      name: user.name,
+      image: user.image,
+      displayUsername: user.displayUsername,
+      capabilities: user.capabilities,
+      adsDisabled: user.adsDisabled,
+      interestedInHidingAds: user.interestedInHidingAds,
+      signupSources: user.signupSources,
+      createdAt: user.createdAt.getTime(),
+      updatedAt: user.updatedAt.getTime(),
+    }))
 
-    if (!user) {
-      return null
+    return {
+      page: transformedPage,
+      isDone: !hasMore,
+      counts: {
+        total: filteredCount,
+        filtered: filteredCount,
+        pages: Math.max(1, Math.ceil(filteredCount / limit)),
+      },
+    }
+  } else {
+    // Standard SQL-based filtering (direct capabilities or no capability filters)
+    // Get total count (with filters applied)
+    const [totalCount] = await db
+      .select({ count: sql<number>`count(*)` })
+      .from(users)
+      .where(whereClause)
+
+    const countTime = Date.now() - queryStartTime
+
+    // Get filtered count (same as total when filters are applied)
+    const filteredCount = Number(totalCount.count)
+
+    // Apply SQL-level pagination (LIMIT/OFFSET)
+    const offset = Math.max(0, pageIndex * limit)
+    const selectStartTime = Date.now()
+    const page = await db
+      .select()
+      .from(users)
+      .where(whereClause)
+      .orderBy(orderByClause)
+      .limit(limit)
+      .offset(offset)
+
+    const selectTime = Date.now() - selectStartTime
+    const totalTime = Date.now() - startTime
+
+    const hasMore = offset + limit < filteredCount
+
+    // Log performance metrics
+    if (totalTime > 1000) {
+      console.warn(`[listUsers] Slow query detected:`, {
+        authTime: `${authTime}ms`,
+        countTime: `${countTime}ms`,
+        selectTime: `${selectTime}ms`,
+        totalTime: `${totalTime}ms`,
+        filters: {
+          emailFilter: !!data.emailFilter,
+          nameFilter: !!data.nameFilter,
+          capabilityFilter: !!data.capabilityFilter,
+          noCapabilitiesFilter: data.noCapabilitiesFilter,
+          useEffectiveCapabilities: false,
+        },
+        pagination: { limit, pageIndex, offset },
+        resultCount: page.length,
+      })
     }
 
-    return {
+    // Transform to match expected format
+    const transformedPage = page.map((user) => ({
       _id: user.id,
       userId: user.id,
       email: user.email,
       name: user.name,
       image: user.image,
-      oauthImage: user.oauthImage,
       displayUsername: user.displayUsername,
       capabilities: user.capabilities,
       adsDisabled: user.adsDisabled,
       interestedInHidingAds: user.interestedInHidingAds,
-      lastUsedFramework: user.lastUsedFramework,
-      sessionVersion: user.sessionVersion,
+      signupSources: user.signupSources,
       createdAt: user.createdAt.getTime(),
       updatedAt: user.updatedAt.getTime(),
+    }))
+
+    return {
+      page: transformedPage,
+      isDone: !hasMore,
+      counts: {
+        total: filteredCount,
+        filtered: filteredCount,
+        pages: Math.max(1, Math.ceil(filteredCount / limit)),
+      },
     }
+  }
+}
+
+// Get a single user by ID (admin only)
+export async function getUser({ data }: { data: any }) {
+  await requireCapability({ data: { capability: 'admin' } })
+
+  const user = await db.query.users.findFirst({
+    where: eq(users.id, data.userId),
   })
 
+  if (!user) {
+    return null
+  }
+
+  return {
+    _id: user.id,
+    userId: user.id,
+    email: user.email,
+    name: user.name,
+    image: user.image,
+    oauthImage: user.oauthImage,
+    displayUsername: user.displayUsername,
+    capabilities: user.capabilities,
+    adsDisabled: user.adsDisabled,
+    interestedInHidingAds: user.interestedInHidingAds,
+    lastUsedFramework: user.lastUsedFramework,
+    signupSources: user.signupSources,
+    sessionVersion: user.sessionVersion,
+    createdAt: user.createdAt.getTime(),
+    updatedAt: user.updatedAt.getTime(),
+  }
+}
+
 // Server function wrapper for updateAdPreference
-export const updateAdPreference = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ adsDisabled: v.boolean() }))
-  .handler(async ({ data }) => {
-    const user = await getAuthenticatedUser()
+export async function updateAdPreference({ data }: { data: any }) {
+  const user = await getAuthenticatedUser()
 
-    // Validate disableAds capability
-    await requireCapability({ data: { capability: 'disableAds' } })
+  // Validate disableAds capability
+  await requireCapability({ data: { capability: 'disableAds' } })
 
-    await db
-      .update(users)
-      .set({ adsDisabled: data.adsDisabled, updatedAt: new Date() })
-      .where(eq(users.id, user.userId))
+  await db
+    .update(users)
+    .set({ adsDisabled: data.adsDisabled, updatedAt: new Date() })
+    .where(eq(users.id, user.userId))
 
-    return { success: true }
-  })
+  return { success: true }
+}
 
 // Server function wrapper for setInterestedInHidingAds
-export const setInterestedInHidingAds = createServerFn({ method: 'POST' })
-  .inputValidator(v.object({ interested: v.boolean() }))
-  .handler(async ({ data }) => {
-    const user = await getAuthenticatedUser()
-
-    // Verify user exists
-    const existingUser = await db.query.users.findFirst({
-      where: eq(users.id, user.userId),
-    })
-
-    if (!existingUser) {
-      throw new Error('User not found')
-    }
+export async function setInterestedInHidingAds({ data }: { data: any }) {
+  const user = await getAuthenticatedUser()
 
-    await db
-      .update(users)
-      .set({
-        interestedInHidingAds: data.interested,
-        updatedAt: new Date(),
-      })
-      .where(eq(users.id, user.userId))
-
-    return { success: true }
+  // Verify user exists
+  const existingUser = await db.query.users.findFirst({
+    where: eq(users.id, user.userId),
   })
 
-// Server function to update user's last used framework preference
-export const updateLastUsedFramework = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      framework: v.pipe(v.string(), v.minLength(1), v.maxLength(50)),
-    }),
-  )
-  .handler(async ({ data }) => {
-    const user = await getAuthenticatedUser()
-
-    await db
-      .update(users)
-      .set({
-        lastUsedFramework: data.framework,
-        updatedAt: new Date(),
-      })
-      .where(eq(users.id, user.userId))
-
-    return { success: true }
-  })
+  if (!existingUser) {
+    throw new Error('User not found')
+  }
 
-// Server function wrapper for updateUserCapabilities (admin only)
-export const updateUserCapabilities = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      userId: v.pipe(v.string(), v.uuid()),
-      capabilities: v.array(capabilityPicklist),
-    }),
-  )
-  .handler(async ({ data }) => {
-    // Validate admin capability
-    const { currentUser } = await requireCapability({
-      data: { capability: 'admin' },
+  await db
+    .update(users)
+    .set({
+      interestedInHidingAds: data.interested,
+      updatedAt: new Date(),
     })
+    .where(eq(users.id, user.userId))
 
-    // Validate that target user exists
-    const targetUser = await db.query.users.findFirst({
-      where: eq(users.id, data.userId),
+  return { success: true }
+}
+
+// Server function to update user's last used framework preference
+export async function updateLastUsedFramework({ data }: { data: any }) {
+  const user = await getAuthenticatedUser()
+
+  await db
+    .update(users)
+    .set({
+      lastUsedFramework: data.framework,
+      updatedAt: new Date(),
     })
+    .where(eq(users.id, user.userId))
+
+  return { success: true }
+}
+
+export async function addUserSignupSource({
+  data,
+}: {
+  data: { source: SignupSource }
+}) {
+  const user = await getAuthenticatedUser()
+
+  const existingUser = await db.query.users.findFirst({
+    where: eq(users.id, user.userId),
+    columns: {
+      signupSources: true,
+    },
+  })
 
-    if (!targetUser) {
-      throw new Error('Target user not found')
+  if (!existingUser) {
+    throw new Error('User not found')
+  }
+
+  if (existingUser.signupSources.includes(data.source)) {
+    return {
+      success: true,
+      alreadyTagged: true,
+      signupSources: existingUser.signupSources,
     }
+  }
 
-    const capabilities = data.capabilities
-    const previousCapabilities = targetUser.capabilities
-
-    await db
-      .update(users)
-      .set({ capabilities, updatedAt: new Date() })
-      .where(eq(users.id, data.userId))
-
-    // Record audit log
-    await recordAuditLog({
-      actorId: currentUser.userId,
-      action: 'user.capabilities.update',
-      targetType: 'user',
-      targetId: data.userId,
-      details: {
-        before: previousCapabilities,
-        after: capabilities,
-      },
+  const signupSources = [...existingUser.signupSources, data.source]
+
+  await db
+    .update(users)
+    .set({
+      signupSources,
+      updatedAt: new Date(),
     })
+    .where(eq(users.id, user.userId))
 
-    return { success: true }
+  return {
+    success: true,
+    alreadyTagged: false,
+    signupSources,
+  }
+}
+
+// Server function wrapper for updateUserCapabilities (admin only)
+export async function updateUserCapabilities({ data }: { data: any }) {
+  // Validate admin capability
+  const { currentUser } = await requireCapability({
+    data: { capability: 'admin' },
   })
 
-// Server function wrapper for adminSetAdsDisabled (admin only)
-export const adminSetAdsDisabled = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      userId: v.pipe(v.string(), v.uuid()),
-      adsDisabled: v.boolean(),
-    }),
-  )
-  .handler(async ({ data }) => {
-    // Validate admin capability
-    const { currentUser } = await requireCapability({
-      data: { capability: 'admin' },
-    })
+  // Validate that target user exists
+  const targetUser = await db.query.users.findFirst({
+    where: eq(users.id, data.userId),
+  })
 
-    // Validate that target user exists
-    const targetUser = await db.query.users.findFirst({
-      where: eq(users.id, data.userId),
-    })
+  if (!targetUser) {
+    throw new Error('Target user not found')
+  }
+
+  const capabilities = data.capabilities
+  const previousCapabilities = targetUser.capabilities
+
+  await db
+    .update(users)
+    .set({ capabilities, updatedAt: new Date() })
+    .where(eq(users.id, data.userId))
+
+  // Record audit log
+  await recordAuditLog({
+    actorId: currentUser.userId,
+    action: 'user.capabilities.update',
+    targetType: 'user',
+    targetId: data.userId,
+    details: {
+      before: previousCapabilities,
+      after: capabilities,
+    },
+  })
 
-    if (!targetUser) {
-      throw new Error('Target user not found')
-    }
+  return { success: true }
+}
 
-    const previousAdsDisabled = targetUser.adsDisabled
-
-    await db
-      .update(users)
-      .set({ adsDisabled: data.adsDisabled, updatedAt: new Date() })
-      .where(eq(users.id, data.userId))
-
-    // Record audit log
-    await recordAuditLog({
-      actorId: currentUser.userId,
-      action: 'user.adsDisabled.update',
-      targetType: 'user',
-      targetId: data.userId,
-      details: {
-        before: previousAdsDisabled,
-        after: data.adsDisabled,
-      },
-    })
+// Server function wrapper for adminSetAdsDisabled (admin only)
+export async function adminSetAdsDisabled({ data }: { data: any }) {
+  // Validate admin capability
+  const { currentUser } = await requireCapability({
+    data: { capability: 'admin' },
+  })
+
+  // Validate that target user exists
+  const targetUser = await db.query.users.findFirst({
+    where: eq(users.id, data.userId),
+  })
 
-    return { success: true }
+  if (!targetUser) {
+    throw new Error('Target user not found')
+  }
+
+  const previousAdsDisabled = targetUser.adsDisabled
+
+  await db
+    .update(users)
+    .set({ adsDisabled: data.adsDisabled, updatedAt: new Date() })
+    .where(eq(users.id, data.userId))
+
+  // Record audit log
+  await recordAuditLog({
+    actorId: currentUser.userId,
+    action: 'user.adsDisabled.update',
+    targetType: 'user',
+    targetId: data.userId,
+    details: {
+      before: previousAdsDisabled,
+      after: data.adsDisabled,
+    },
   })
 
+  return { success: true }
+}
+
 // Server function wrapper for bulkUpdateUserCapabilities (admin only)
-export const bulkUpdateUserCapabilities = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      userIds: v.array(v.pipe(v.string(), v.uuid())),
-      capabilities: v.array(capabilityPicklist),
-    }),
-  )
-  .handler(async ({ data }) => {
-    // Validate admin capability
-    const { currentUser } = await requireCapability({
-      data: { capability: 'admin' },
-    })
+export async function bulkUpdateUserCapabilities({ data }: { data: any }) {
+  // Validate admin capability
+  const { currentUser } = await requireCapability({
+    data: { capability: 'admin' },
+  })
 
-    const validatedCapabilities = data.capabilities
-
-    // Update all users and collect audit data
-    const auditData: Array<{
-      userId: string
-      before: Capability[]
-      after: Capability[]
-    }> = []
-
-    await Promise.all(
-      data.userIds.map(async (userId) => {
-        const targetUser = await db.query.users.findFirst({
-          where: eq(users.id, userId),
-        })
-
-        if (!targetUser) {
-          throw new Error(`User ${userId} not found`)
-        }
-
-        auditData.push({
-          userId,
-          before: targetUser.capabilities,
-          after: validatedCapabilities,
-        })
-
-        await db
-          .update(users)
-          .set({ capabilities: validatedCapabilities, updatedAt: new Date() })
-          .where(eq(users.id, userId))
-      }),
-    )
+  const validatedCapabilities = data.capabilities
 
-    // Record audit logs for each user
-    await Promise.all(
-      auditData.map((audit) =>
-        recordAuditLog({
-          actorId: currentUser.userId,
-          action: 'user.capabilities.update',
-          targetType: 'user',
-          targetId: audit.userId,
-          details: {
-            before: audit.before,
-            after: audit.after,
-            bulkOperation: true,
-          },
-        }),
-      ),
-    )
+  // Update all users and collect audit data
+  const auditData: Array<{
+    userId: string
+    before: Capability[]
+    after: Capability[]
+  }> = []
 
-    return { success: true, updated: data.userIds.length }
-  })
+  await Promise.all(
+    data.userIds.map(async (userId: string) => {
+      const targetUser = await db.query.users.findFirst({
+        where: eq(users.id, userId),
+      })
 
-// Revoke all sessions for a user by incrementing sessionVersion
-// This invalidates all signed cookies for the user
-export const revokeUserSessions = createServerFn({ method: 'POST' })
-  .inputValidator(
-    v.object({
-      userId: v.pipe(v.string(), v.uuid()),
+      if (!targetUser) {
+        throw new Error(`User ${userId} not found`)
+      }
+
+      auditData.push({
+        userId,
+        before: targetUser.capabilities,
+        after: validatedCapabilities,
+      })
+
+      await db
+        .update(users)
+        .set({ capabilities: validatedCapabilities, updatedAt: new Date() })
+        .where(eq(users.id, userId))
     }),
   )
-  .handler(async ({ data: { userId } }) => {
-    // Get current user for audit log and authorization check
-    const currentUser = await getAuthenticatedUser()
-
-    // Authorization: users can only revoke their own sessions, unless they're admin
-    const isAdmin = currentUser.capabilities.includes('admin')
-    const isOwnSession = currentUser.userId === userId
-    if (!isAdmin && !isOwnSession) {
-      throw new Error(
-        'Unauthorized: You can only revoke your own sessions unless you are an admin',
-      )
-    }
 
-    const user = await db.query.users.findFirst({
-      where: eq(users.id, userId),
-      columns: {
-        sessionVersion: true,
-      },
-    })
+  // Record audit logs for each user
+  await Promise.all(
+    auditData.map((audit) =>
+      recordAuditLog({
+        actorId: currentUser.userId,
+        action: 'user.capabilities.update',
+        targetType: 'user',
+        targetId: audit.userId,
+        details: {
+          before: audit.before,
+          after: audit.after,
+          bulkOperation: true,
+        },
+      }),
+    ),
+  )
 
-    if (!user) {
-      throw new Error('User not found')
-    }
+  return { success: true, updated: data.userIds.length }
+}
 
-    await db
-      .update(users)
-      .set({ sessionVersion: user.sessionVersion + 1, updatedAt: new Date() })
-      .where(eq(users.id, userId))
-
-    // Record audit log
-    await recordAuditLog({
-      actorId: currentUser.userId,
-      action: 'user.sessions.revoke',
-      targetType: 'user',
-      targetId: userId,
-      details: {
-        previousVersion: user.sessionVersion,
-        newVersion: user.sessionVersion + 1,
-      },
-    })
+// Revoke all sessions for a user by incrementing sessionVersion
+// This invalidates all signed cookies for the user
+export async function revokeUserSessions({
+  data: { userId },
+}: {
+  data: { userId: string }
+}) {
+  // Get current user for audit log and authorization check
+  const currentUser = await getAuthenticatedUser()
+
+  // Authorization: users can only revoke their own sessions, unless they're admin
+  const isAdmin = currentUser.capabilities.includes('admin')
+  const isOwnSession = currentUser.userId === userId
+  if (!isAdmin && !isOwnSession) {
+    throw new Error(
+      'Unauthorized: You can only revoke your own sessions unless you are an admin',
+    )
+  }
 
-    return { success: true }
+  const user = await db.query.users.findFirst({
+    where: eq(users.id, userId),
+    columns: {
+      sessionVersion: true,
+    },
   })
 
+  if (!user) {
+    throw new Error('User not found')
+  }
+
+  await db
+    .update(users)
+    .set({ sessionVersion: user.sessionVersion + 1, updatedAt: new Date() })
+    .where(eq(users.id, userId))
+
+  // Record audit log
+  await recordAuditLog({
+    actorId: currentUser.userId,
+    action: 'user.sessions.revoke',
+    targetType: 'user',
+    targetId: userId,
+    details: {
+      previousVersion: user.sessionVersion,
+      newVersion: user.sessionVersion + 1,
+    },
+  })
+
+  return { success: true }
+}
+
 // Revert profile image to OAuth provider image
-export const revertProfileImage = createServerFn({ method: 'POST' }).handler(
-  async () => {
-    const currentUser = await getAuthenticatedUser()
-
-    // Get the user's oauthImage
-    const user = await db.query.users.findFirst({
-      where: eq(users.id, currentUser.userId),
-      columns: {
-        oauthImage: true,
-      },
-    })
+export async function revertProfileImage() {
+  const currentUser = await getAuthenticatedUser()
+
+  // Get the user's oauthImage
+  const user = await db.query.users.findFirst({
+    where: eq(users.id, currentUser.userId),
+    columns: {
+      oauthImage: true,
+    },
+  })
 
-    if (!user?.oauthImage) {
-      throw new Error('No OAuth image available to revert to')
-    }
+  if (!user?.oauthImage) {
+    throw new Error('No OAuth image available to revert to')
+  }
 
-    // Set image to null, display will fall back to oauthImage
-    await db
-      .update(users)
-      .set({ image: null, updatedAt: new Date() })
-      .where(eq(users.id, currentUser.userId))
+  // Set image to null, display will fall back to oauthImage
+  await db
+    .update(users)
+    .set({ image: null, updatedAt: new Date() })
+    .where(eq(users.id, currentUser.userId))
 
-    return { success: true, image: null, oauthImage: user.oauthImage }
-  },
-)
+  return { success: true, image: null, oauthImage: user.oauthImage }
+}
 
 // Remove profile image entirely (show initials/fallback)
-export const removeProfileImage = createServerFn({ method: 'POST' }).handler(
-  async () => {
-    const currentUser = await getAuthenticatedUser()
-
-    await db
-      .update(users)
-      .set({ image: null, updatedAt: new Date() })
-      .where(eq(users.id, currentUser.userId))
-
-    return { success: true }
-  },
-)
+export async function removeProfileImage() {
+  const currentUser = await getAuthenticatedUser()
+
+  await db
+    .update(users)
+    .set({ image: null, updatedAt: new Date() })
+    .where(eq(users.id, currentUser.userId))
+
+  return { success: true }
+}
diff --git a/src/utils/workflow-runtime.server.ts b/src/utils/workflow-runtime.server.ts
new file mode 100644
index 000000000..a5482e3ba
--- /dev/null
+++ b/src/utils/workflow-runtime.server.ts
@@ -0,0 +1,296 @@
+import { defineWorkflowRuntime } from '@tanstack/workflow-runtime'
+import { createDrizzlePostgresWorkflowStore } from '@tanstack/workflow-store-drizzle-postgres'
+import {
+  workflowRuns,
+  workflowSchedules,
+} from '@tanstack/workflow-store-drizzle-postgres'
+import { and, eq, inArray, isNull, lte, notInArray, or, sql } from 'drizzle-orm'
+import { db } from '~/db/client'
+import { intentWorkflowRegistrations } from '~/utils/intent-workflows.server'
+
+export const workflowExecutionStore = createDrizzlePostgresWorkflowStore({ db })
+
+export const WORKFLOW_RUNTIME_MAX_DURATION_MS = 25_000
+export const WORKFLOW_RUNTIME_MIN_REMAINING_MS = 5_000
+
+export const workflowRuntime = defineWorkflowRuntime({
+  store: workflowExecutionStore,
+  workflows: {
+    ...intentWorkflowRegistrations,
+  },
+})
+
+const DEFAULT_STALE_RUN_MS = 60 * 60 * 1000
+const STALE_RUN_ERROR_NAME = 'StaleWorkflowRunError'
+const STALE_RUN_ERROR_CODE = 'STALE_WORKFLOW_RUN'
+
+export interface WorkflowRuntimeRunHealth {
+  runId: string
+  workflowId: string
+  status: string
+  updatedAt: Date
+  leaseExpiresAt: Date | null
+}
+
+export interface WorkflowRuntimeScheduleHealth {
+  scheduleId: string
+  workflowId: string
+  enabled: boolean
+  nextFireAt: Date | null
+  updatedAt: Date
+}
+
+export interface WorkflowRuntimeHealth {
+  checkedAt: Date
+  staleRunMs: number
+  staleRuns: Array<WorkflowRuntimeRunHealth>
+  unregisteredSchedules: Array<WorkflowRuntimeScheduleHealth>
+  schedules: Array<WorkflowRuntimeScheduleHealth>
+  latestRuns: Array<{
+    runId: string
+    workflowId: string
+    status: string
+    updatedAt: Date
+  }>
+  statusCounts: Array<{
+    status: string
+    count: number
+  }>
+}
+
+export interface WorkflowRuntimeReconcileResult {
+  staleRunsMarkedErrored: number
+  unregisteredSchedulesDeleted: number
+  staleRuns: Array<WorkflowRuntimeRunHealth>
+  unregisteredSchedules: Array<WorkflowRuntimeScheduleHealth>
+}
+
+export async function getWorkflowRuntimeHealth(options?: {
+  now?: number
+  staleRunMs?: number
+}): Promise<WorkflowRuntimeHealth> {
+  const now = options?.now ?? Date.now()
+  const staleRunMs = options?.staleRunMs ?? DEFAULT_STALE_RUN_MS
+  const [
+    staleRuns,
+    unregisteredSchedules,
+    schedules,
+    latestRuns,
+    statusCounts,
+  ] = await Promise.all([
+    listStaleWorkflowRuns({ now, staleRunMs }),
+    listUnregisteredWorkflowSchedules(),
+    listRegisteredWorkflowSchedules(),
+    listLatestRegisteredWorkflowRuns(),
+    listRegisteredWorkflowRunStatusCounts(),
+  ])
+
+  return {
+    checkedAt: new Date(now),
+    staleRunMs,
+    staleRuns,
+    unregisteredSchedules,
+    schedules,
+    latestRuns,
+    statusCounts,
+  }
+}
+
+export async function reconcileWorkflowRuntimeStore(options?: {
+  now?: number
+  staleRunMs?: number
+}): Promise<WorkflowRuntimeReconcileResult> {
+  const now = options?.now ?? Date.now()
+  const staleRunMs = options?.staleRunMs ?? DEFAULT_STALE_RUN_MS
+  const [staleRuns, unregisteredSchedules] = await Promise.all([
+    listStaleWorkflowRuns({ now, staleRunMs }),
+    listUnregisteredWorkflowSchedules(),
+  ])
+
+  await Promise.all(
+    staleRuns.map((run) =>
+      workflowExecutionStore.markRunErrored({
+        runId: run.runId,
+        code: STALE_RUN_ERROR_CODE,
+        now,
+        error: {
+          name: STALE_RUN_ERROR_NAME,
+          message: `Workflow run was marked stale after ${Math.round(
+            staleRunMs / 60_000,
+          )} minutes without an active lease.`,
+        },
+      }),
+    ),
+  )
+
+  const deletedSchedules = await deleteUnregisteredWorkflowSchedules()
+
+  return {
+    staleRunsMarkedErrored: staleRuns.length,
+    unregisteredSchedulesDeleted: deletedSchedules.length,
+    staleRuns,
+    unregisteredSchedules,
+  }
+}
+
+async function listStaleWorkflowRuns(options: {
+  now: number
+  staleRunMs: number
+}) {
+  const rows = await db
+    .select({
+      runId: workflowRuns.runId,
+      workflowId: workflowRuns.workflowId,
+      status: workflowRuns.status,
+      updatedAt: workflowRuns.updatedAt,
+      leaseExpiresAt: workflowRuns.leaseExpiresAt,
+    })
+    .from(workflowRuns)
+    .where(getStaleRunWhere(options))
+    .orderBy(workflowRuns.updatedAt)
+
+  return rows.map((row) => ({
+    runId: row.runId,
+    workflowId: row.workflowId,
+    status: row.status,
+    updatedAt: new Date(row.updatedAt),
+    leaseExpiresAt: row.leaseExpiresAt ? new Date(row.leaseExpiresAt) : null,
+  }))
+}
+
+async function listUnregisteredWorkflowSchedules() {
+  const rows = await db
+    .select({
+      scheduleId: workflowSchedules.scheduleId,
+      workflowId: workflowSchedules.workflowId,
+      enabled: workflowSchedules.enabled,
+      nextFireAt: workflowSchedules.nextFireAt,
+      updatedAt: workflowSchedules.updatedAt,
+    })
+    .from(workflowSchedules)
+    .where(getUnregisteredScheduleWhere())
+    .orderBy(workflowSchedules.workflowId, workflowSchedules.scheduleId)
+
+  return rows.map(toScheduleHealth)
+}
+
+async function listRegisteredWorkflowSchedules() {
+  const scheduleIds = getRegisteredWorkflowScheduleIds()
+  if (scheduleIds.length === 0) return []
+
+  const rows = await db
+    .select({
+      scheduleId: workflowSchedules.scheduleId,
+      workflowId: workflowSchedules.workflowId,
+      enabled: workflowSchedules.enabled,
+      nextFireAt: workflowSchedules.nextFireAt,
+      updatedAt: workflowSchedules.updatedAt,
+    })
+    .from(workflowSchedules)
+    .where(inArray(workflowSchedules.scheduleId, scheduleIds))
+    .orderBy(workflowSchedules.workflowId, workflowSchedules.scheduleId)
+
+  return rows.map(toScheduleHealth)
+}
+
+async function listLatestRegisteredWorkflowRuns() {
+  const runs = await Promise.all(
+    getRegisteredWorkflowIds().map((workflowId) =>
+      workflowExecutionStore.listRuns({
+        workflowId,
+        limit: 1,
+      }),
+    ),
+  )
+
+  return runs.flat().map((run) => ({
+    runId: run.runId,
+    workflowId: run.workflowId,
+    status: run.status,
+    updatedAt: new Date(run.updatedAt),
+  }))
+}
+
+async function listRegisteredWorkflowRunStatusCounts() {
+  const workflowIds = getRegisteredWorkflowIds()
+  if (workflowIds.length === 0) return []
+
+  return db
+    .select({
+      status: workflowRuns.status,
+      count: sql<number>`count(*)::int`,
+    })
+    .from(workflowRuns)
+    .where(inArray(workflowRuns.workflowId, workflowIds))
+    .groupBy(workflowRuns.status)
+    .orderBy(workflowRuns.status)
+}
+
+async function deleteUnregisteredWorkflowSchedules() {
+  return db
+    .delete(workflowSchedules)
+    .where(getUnregisteredScheduleWhere())
+    .returning({
+      scheduleId: workflowSchedules.scheduleId,
+      workflowId: workflowSchedules.workflowId,
+    })
+}
+
+function getRegisteredWorkflowIds() {
+  return Object.keys(workflowRuntime.workflows)
+}
+
+function getRegisteredWorkflowScheduleIds() {
+  return Object.entries(workflowRuntime.workflows).flatMap(
+    ([workflowId, registration]) =>
+      (registration.schedules ?? []).map(
+        (schedule, index) => schedule.id ?? `${workflowId}:${index}`,
+      ),
+  )
+}
+
+function getStaleRunWhere(options: { now: number; staleRunMs: number }) {
+  const registeredWorkflowIds = getRegisteredWorkflowIds()
+  const staleBefore = options.now - options.staleRunMs
+
+  return and(
+    inArray(workflowRuns.status, ['running', 'queued']),
+    lte(workflowRuns.updatedAt, staleBefore),
+    or(
+      notInArray(workflowRuns.workflowId, registeredWorkflowIds),
+      and(
+        eq(workflowRuns.status, 'running'),
+        or(
+          isNull(workflowRuns.leaseExpiresAt),
+          lte(workflowRuns.leaseExpiresAt, options.now),
+        ),
+      ),
+    ),
+  )
+}
+
+function getUnregisteredScheduleWhere() {
+  const workflowIds = getRegisteredWorkflowIds()
+  const scheduleIds = getRegisteredWorkflowScheduleIds()
+
+  return or(
+    notInArray(workflowSchedules.workflowId, workflowIds),
+    notInArray(workflowSchedules.scheduleId, scheduleIds),
+  )
+}
+
+function toScheduleHealth(row: {
+  scheduleId: string
+  workflowId: string
+  enabled: boolean
+  nextFireAt: number | null
+  updatedAt: number
+}): WorkflowRuntimeScheduleHealth {
+  return {
+    scheduleId: row.scheduleId,
+    workflowId: row.workflowId,
+    enabled: row.enabled,
+    nextFireAt: row.nextFireAt ? new Date(row.nextFireAt) : null,
+    updatedAt: new Date(row.updatedAt),
+  }
+}
diff --git a/tanstack-docs-config.schema.json b/tanstack-docs-config.schema.json
index 18d02309a..9c3521d38 100644
--- a/tanstack-docs-config.schema.json
+++ b/tanstack-docs-config.schema.json
@@ -53,6 +53,16 @@
                 },
                 "badge": {
                   "type": "string"
+                },
+                "addedAt": {
+                  "type": "string",
+                  "format": "date",
+                  "description": "Date the page was added (e.g. \"2026-06-01\"). Shows a \"New\" pill in the sidebar for 7 days."
+                },
+                "updatedAt": {
+                  "type": "string",
+                  "format": "date",
+                  "description": "Date the page was last meaningfully updated (e.g. \"2026-06-01\"). Shows an \"Updated\" pill in the sidebar for 7 days."
                 }
               }
             }
@@ -79,6 +89,16 @@
                       },
                       "badge": {
                         "type": "string"
+                      },
+                      "addedAt": {
+                        "type": "string",
+                        "format": "date",
+                        "description": "Date the page was added (e.g. \"2026-06-01\"). Shows a \"New\" pill in the sidebar for 7 days."
+                      },
+                      "updatedAt": {
+                        "type": "string",
+                        "format": "date",
+                        "description": "Date the page was last meaningfully updated (e.g. \"2026-06-01\"). Shows an \"Updated\" pill in the sidebar for 7 days."
                       }
                     }
                   }
diff --git a/tests/ai-framework-doc-links.test.ts b/tests/ai-framework-doc-links.test.ts
new file mode 100644
index 000000000..846ea331f
--- /dev/null
+++ b/tests/ai-framework-doc-links.test.ts
@@ -0,0 +1,56 @@
+import assert from 'node:assert/strict'
+import { ai } from '../src/libraries/libraries'
+import type { Framework } from '../src/libraries/types'
+import {
+  getFrameworkDocsPath,
+  getFrameworkPackageName,
+} from '../src/libraries/frameworkSupport'
+
+const expectedFrameworks: Framework[] = [
+  'react',
+  'vue',
+  'solid',
+  'svelte',
+  'preact',
+  'vanilla',
+]
+
+const expectedPackages: Partial<Record<Framework, string>> = {
+  react: '@tanstack/ai-react',
+  vue: '@tanstack/ai-vue',
+  solid: '@tanstack/ai-solid',
+  svelte: '@tanstack/ai-svelte',
+  preact: '@tanstack/ai-preact',
+  vanilla: '@tanstack/ai-client',
+}
+
+const expectedDocsPaths: Partial<Record<Framework, string>> = {
+  react: 'getting-started/quick-start',
+  vue: 'getting-started/quick-start-vue',
+  solid: 'api/ai-solid',
+  svelte: 'getting-started/quick-start-svelte',
+  preact: 'api/ai-preact',
+  vanilla: 'api/ai-client',
+}
+
+assert.deepEqual(
+  ai.frameworks,
+  expectedFrameworks,
+  'AI framework list reflects shipped framework packages',
+)
+
+for (const framework of expectedFrameworks) {
+  assert.equal(
+    getFrameworkPackageName(framework, ai.id, ai),
+    expectedPackages[framework],
+    `${framework} package name points to the shipped AI package`,
+  )
+
+  assert.equal(
+    getFrameworkDocsPath(framework, ai),
+    expectedDocsPaths[framework],
+    `${framework} framework card links to an existing AI docs page`,
+  )
+}
+
+console.log('ai framework doc link tests passed')
diff --git a/tests/blog-hero-image.test.ts b/tests/blog-hero-image.test.ts
new file mode 100644
index 000000000..a188e3991
--- /dev/null
+++ b/tests/blog-hero-image.test.ts
@@ -0,0 +1,47 @@
+import assert from 'node:assert/strict'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { findFirstImageSrc, parseSiteMarkdown } from '../src/utils/markdown'
+
+// Guards the eagerFirstImage optimization (blog.$.tsx -> Markdown ->
+// findFirstImageSrc): if a future post's structure stops the walker before
+// its first image (e.g. a list/table/blockquote appears earlier in the
+// document), the post silently falls back to lazy-loading its hero image
+// instead of failing loudly. This test makes that regression visible.
+
+const blogDir = path.join(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '../src/blog',
+)
+
+function stripFrontmatter(content: string) {
+  const match = content.match(/^---\n[\s\S]*?\n---\n?/)
+  return match ? content.slice(match[0].length) : content
+}
+
+const postFiles = fs.readdirSync(blogDir).filter((file) => file.endsWith('.md'))
+
+assert.ok(postFiles.length > 0, 'expected to find blog posts in src/blog')
+
+for (const file of postFiles) {
+  const raw = fs.readFileSync(path.join(blogDir, file), 'utf-8')
+  const body = stripFrontmatter(raw)
+  const hasBodyImage = /!\[[^\]]*\]\([^)]+\)/.test(body)
+
+  if (!hasBodyImage) continue
+
+  const document = parseSiteMarkdown(body)
+  const firstImageSrc = findFirstImageSrc(document)
+
+  assert.notEqual(
+    firstImageSrc,
+    undefined,
+    `${file} contains a body image but findFirstImageSrc() returned ` +
+      `undefined - its first image is no longer reachable through plain ` +
+      `paragraphs/headings, so the blog hero eager-load optimization is ` +
+      `silently disabled for this post`,
+  )
+}
+
+console.log('blog-hero-image tests passed')
diff --git a/tests/docs-manifest-concurrency.test.ts b/tests/docs-manifest-concurrency.test.ts
new file mode 100644
index 000000000..40e7e83e1
--- /dev/null
+++ b/tests/docs-manifest-concurrency.test.ts
@@ -0,0 +1,132 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import {
+  collectRedirectEntriesForFile,
+  mapWithConcurrency,
+  type DocsTreeNode,
+} from '../src/utils/docs.functions'
+import { GitHubContentError } from '../src/utils/documents.server'
+
+test('mapWithConcurrency preserves result order regardless of completion order', async () => {
+  const delays = [30, 5, 20, 1, 15]
+
+  const results = await mapWithConcurrency(delays, 3, async (delay) => {
+    await new Promise((resolve) => setTimeout(resolve, delay))
+    return delay
+  })
+
+  assert.deepEqual(results, delays)
+})
+
+test('mapWithConcurrency bounds concurrency instead of running everything in parallel', async () => {
+  const items = Array.from({ length: 12 }, (_, index) => index)
+  let inFlight = 0
+  let maxInFlight = 0
+
+  await mapWithConcurrency(items, 4, async () => {
+    inFlight += 1
+    maxInFlight = Math.max(maxInFlight, inFlight)
+    await new Promise((resolve) => setTimeout(resolve, 10))
+    inFlight -= 1
+  })
+
+  assert.ok(
+    maxInFlight <= 4,
+    `expected at most 4 concurrent calls, saw ${maxInFlight}`,
+  )
+  assert.equal(maxInFlight, 4, 'expected concurrency to reach the cap')
+})
+
+test('mapWithConcurrency runs in a bounded number of batches, not one call per item', async () => {
+  const items = Array.from({ length: 18 }, (_, index) => index)
+  const perItemDelayMs = 20
+  const concurrency = 6
+
+  const start = Date.now()
+  await mapWithConcurrency(items, concurrency, async () => {
+    await new Promise((resolve) => setTimeout(resolve, perItemDelayMs))
+  })
+  const elapsed = Date.now() - start
+
+  const sequentialWorstCase = items.length * perItemDelayMs
+  assert.ok(
+    elapsed < sequentialWorstCase / 2,
+    `expected concurrent execution well under ${sequentialWorstCase}ms, took ${elapsed}ms`,
+  )
+})
+
+console.log('docs manifest concurrency tests passed')
+
+test('collectRedirectEntriesForFile returns no entries (not a rejection) when the file fetch throws a recoverable GitHub error', async () => {
+  const node: DocsTreeNode = { path: 'docs/guide/old-page.md' }
+  const paths: Array<string> = []
+
+  const entries = await collectRedirectEntriesForFile(node, {
+    docsRoot: 'docs',
+    fetchFile: async () => {
+      throw new GitHubContentError(
+        'rate-limit',
+        'GitHub rate limited this file',
+      )
+    },
+    onCanonicalPath: (path) => paths.push(path),
+  })
+
+  assert.deepEqual(entries, [])
+  assert.deepEqual(paths, ['guide/old-page'])
+})
+
+test('collectRedirectEntriesForFile rethrows non-recoverable errors instead of silently swallowing them', async () => {
+  const node: DocsTreeNode = { path: 'docs/guide/old-page.md' }
+
+  await assert.rejects(
+    () =>
+      collectRedirectEntriesForFile(node, {
+        docsRoot: 'docs',
+        fetchFile: async () => {
+          throw new TypeError('this is a real bug, not a flaky GitHub call')
+        },
+        onCanonicalPath: () => {},
+      }),
+    TypeError,
+  )
+})
+
+test('a mix of one failing file and several succeeding files still produces every succeeding redirect', async () => {
+  const nodes: Array<DocsTreeNode> = [
+    { path: 'docs/guide/a.md' },
+    { path: 'docs/guide/flaky.md' },
+    { path: 'docs/guide/b.md' },
+  ]
+
+  const fileContents: Record<string, string> = {
+    'docs/guide/a.md': '---\nredirect_from:\n  - guide/old-a\n---\n# A',
+    'docs/guide/b.md': '---\nredirect_from:\n  - guide/old-b\n---\n# B',
+  }
+
+  const paths: Array<string> = []
+
+  const results = await mapWithConcurrency(nodes, 3, (node) =>
+    collectRedirectEntriesForFile(node, {
+      docsRoot: 'docs',
+      fetchFile: async (filePath) => {
+        if (filePath === 'docs/guide/flaky.md') {
+          throw new GitHubContentError('server', 'GitHub 5xx for this file')
+        }
+
+        return fileContents[filePath] ?? null
+      },
+      onCanonicalPath: (path) => paths.push(path),
+    }),
+  )
+
+  // The whole build did not reject just because one file was flaky.
+  assert.deepEqual(
+    results.flat().map((entry) => entry.from),
+    ['guide/old-a', 'guide/old-b'],
+  )
+  // All three files' paths were still recorded, including the flaky one.
+  assert.deepEqual(paths.sort(), ['guide/a', 'guide/b', 'guide/flaky'])
+})
+
+console.log('buildDocsManifest per-file fault tolerance tests passed')
diff --git a/tests/docs-redirects.test.ts b/tests/docs-redirects.test.ts
new file mode 100644
index 000000000..59648c467
--- /dev/null
+++ b/tests/docs-redirects.test.ts
@@ -0,0 +1,208 @@
+import assert from 'node:assert/strict'
+import {
+  buildDocsMarkdownRedirectHref,
+  buildDocsRedirectHref,
+  resolveDocsPathRedirect,
+  type DocsRedirectManifest,
+} from '../src/utils/docs-redirects'
+import { publicLibraries } from '../src/libraries'
+
+const expectedLegacyOverviewTargets: Record<string, string | null> = {
+  ai: 'getting-started/overview',
+  cli: null,
+  config: null,
+  db: 'framework/react/overview',
+  devtools: 'overview',
+  form: 'overview',
+  hotkeys: 'overview',
+  intent: null,
+  pacer: 'overview',
+  query: 'framework/react/overview',
+  ranger: 'overview',
+  router: 'overview',
+  start: 'framework/react/overview',
+  store: 'overview',
+  table: 'overview',
+  virtual: 'introduction',
+}
+
+function manifestWithPaths(paths: Array<string>): DocsRedirectManifest {
+  return {
+    paths,
+    redirects: {},
+  }
+}
+
+function assertRedirectsTo(opts: {
+  defaultDocs: string
+  docsPath: string
+  expectedTarget: string
+  frameworks: Array<string>
+  manifest: DocsRedirectManifest
+}) {
+  assert.deepEqual(
+    resolveDocsPathRedirect({
+      defaultDocs: opts.defaultDocs,
+      docsPath: opts.docsPath,
+      frameworks: opts.frameworks,
+      manifest: opts.manifest,
+    }),
+    { type: 'redirect', docsPath: opts.expectedTarget },
+  )
+}
+
+function assertNotFound(opts: {
+  defaultDocs: string
+  docsPath: string
+  frameworks: Array<string>
+  manifest: DocsRedirectManifest
+}) {
+  assert.deepEqual(
+    resolveDocsPathRedirect({
+      defaultDocs: opts.defaultDocs,
+      docsPath: opts.docsPath,
+      frameworks: opts.frameworks,
+      manifest: opts.manifest,
+    }),
+    { type: 'not-found' },
+  )
+}
+
+for (const library of publicLibraries) {
+  assert.ok(
+    Object.hasOwn(expectedLegacyOverviewTargets, library.id),
+    `${library.id} must have a docs/react/overview redirect expectation`,
+  )
+
+  const expectedTarget = expectedLegacyOverviewTargets[library.id]
+  const defaultDocs = library.defaultDocs ?? 'overview'
+  const paths = expectedTarget ? [expectedTarget] : [defaultDocs]
+  const manifest = manifestWithPaths(paths)
+
+  if (expectedTarget) {
+    assertRedirectsTo({
+      defaultDocs,
+      docsPath: 'react/overview',
+      expectedTarget,
+      frameworks: library.frameworks,
+      manifest,
+    })
+  } else {
+    assertNotFound({
+      defaultDocs,
+      docsPath: 'react/overview',
+      frameworks: library.frameworks,
+      manifest,
+    })
+  }
+
+  assert.deepEqual(
+    resolveDocsPathRedirect({
+      defaultDocs,
+      docsPath: defaultDocs,
+      frameworks: library.frameworks,
+      manifest: manifestWithPaths([defaultDocs]),
+    }),
+    { type: 'render', docsPath: defaultDocs },
+    `${library.id} canonical default docs render without redirect`,
+  )
+}
+
+assertRedirectsTo({
+  defaultDocs: 'overview',
+  docsPath: 'framework/react/overview',
+  expectedTarget: 'overview',
+  frameworks: ['react', 'solid'],
+  manifest: manifestWithPaths(['overview']),
+})
+
+assertRedirectsTo({
+  defaultDocs: 'overview',
+  docsPath: 'framework/react/guide/search-params',
+  expectedTarget: 'guide/search-params',
+  frameworks: ['react', 'solid'],
+  manifest: manifestWithPaths(['guide/search-params']),
+})
+
+assertRedirectsTo({
+  defaultDocs: 'overview',
+  docsPath: 'react/guide/search-params',
+  expectedTarget: 'framework/react/guide/search-params',
+  frameworks: ['react', 'solid'],
+  manifest: manifestWithPaths([
+    'framework/react/guide/search-params',
+    'guide/search-params',
+  ]),
+})
+
+assertNotFound({
+  defaultDocs: 'overview',
+  docsPath: 'ember/overview',
+  frameworks: ['react', 'solid'],
+  manifest: manifestWithPaths(['overview', 'framework/react/overview']),
+})
+
+assertNotFound({
+  defaultDocs: 'overview',
+  docsPath: 'framework/ember/overview',
+  frameworks: ['react', 'solid'],
+  manifest: manifestWithPaths(['overview', 'framework/react/overview']),
+})
+
+assertNotFound({
+  defaultDocs: 'overview',
+  docsPath: 'react/guide/does-not-exist',
+  frameworks: ['react', 'solid'],
+  manifest: manifestWithPaths(['overview', 'framework/react/overview']),
+})
+
+assertRedirectsTo({
+  defaultDocs: 'overview',
+  docsPath: 'react/overview',
+  expectedTarget: 'overview',
+  frameworks: [],
+  manifest: {
+    paths: ['overview'],
+    redirects: {
+      'react/overview': 'overview',
+    },
+  },
+})
+
+assertNotFound({
+  defaultDocs: 'overview',
+  docsPath: 'react/overview',
+  frameworks: [],
+  manifest: manifestWithPaths(['overview']),
+})
+
+assertRedirectsTo({
+  defaultDocs: 'overview',
+  docsPath: 'reference/type-aliases/RemovedType',
+  expectedTarget: 'reference',
+  frameworks: ['react'],
+  manifest: manifestWithPaths(['overview', 'reference']),
+})
+
+assert.equal(
+  buildDocsRedirectHref({
+    baseHref: '/query/v5/docs/react/overview?pm=pnpm#motivation',
+    docsPath: 'framework/react/overview',
+    libraryId: 'query',
+    version: 'v5',
+  }),
+  '/query/v5/docs/framework/react/overview?pm=pnpm#motivation',
+)
+
+assert.equal(
+  buildDocsMarkdownRedirectHref({
+    requestUrl:
+      'https://tanstack.com/query/v5/docs/react/overview.md?pm=pnpm#motivation',
+    docsPath: 'framework/react/overview',
+    libraryId: 'query',
+    version: 'v5',
+  }),
+  'https://tanstack.com/query/v5/docs/framework/react/overview.md?pm=pnpm#motivation',
+)
+
+console.log('docs redirect tests passed')
diff --git a/tests/docs-route-smoke.test.ts b/tests/docs-route-smoke.test.ts
new file mode 100644
index 000000000..03807ab02
--- /dev/null
+++ b/tests/docs-route-smoke.test.ts
@@ -0,0 +1,119 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { publicLibraries } from '../src/libraries'
+
+type ExpectedOutcome = 'ok' | 'not-found'
+
+type SmokeCase = {
+  expected: ExpectedOutcome
+  path: string
+}
+
+const baseUrl = process.env.TANSTACK_DOCS_SMOKE_BASE_URL
+
+test(
+  'docs legacy and canonical routes complete for every public library',
+  {
+    skip: baseUrl
+      ? false
+      : 'Set TANSTACK_DOCS_SMOKE_BASE_URL to run docs route smoke tests',
+  },
+  async () => {
+    assert.ok(baseUrl)
+
+    const cases = publicLibraries.flatMap((library): Array<SmokeCase> => {
+      const defaultDocs = library.defaultDocs ?? 'overview'
+      const legacyExpected = library.frameworks.includes('react')
+        ? 'ok'
+        : 'not-found'
+      const paths: Array<SmokeCase> = [
+        {
+          path: `/${library.id}/latest/docs/react/overview`,
+          expected: legacyExpected,
+        },
+        {
+          path: `/${library.id}/${library.latestVersion}/docs/react/overview`,
+          expected: legacyExpected,
+        },
+        {
+          path: `/${library.id}/latest/docs/${defaultDocs}`,
+          expected: 'ok',
+        },
+        {
+          path: `/${library.id}/${library.latestVersion}/docs/${defaultDocs}`,
+          expected: 'ok',
+        },
+      ]
+
+      if (library.frameworks.includes('react')) {
+        paths.push({
+          path: `/${library.id}/latest/docs/framework/react/overview`,
+          expected: 'ok',
+        })
+        paths.push({
+          path: `/${library.id}/${library.latestVersion}/docs/framework/react/overview`,
+          expected: 'ok',
+        })
+      }
+
+      return paths
+    })
+
+    for (const smokeCase of cases) {
+      const result = await fetchWithRedirects(new URL(smokeCase.path, baseUrl))
+
+      assert.notEqual(result.status, 'timeout', `${smokeCase.path} timed out`)
+      assert.notEqual(result.status, 'error', `${smokeCase.path} failed`)
+      assert.notEqual(result.status, 500, `${smokeCase.path} returned 500`)
+
+      if (smokeCase.expected === 'ok') {
+        assert.equal(result.status, 200, `${smokeCase.path} should resolve`)
+      } else {
+        assert.equal(result.status, 404, `${smokeCase.path} should 404`)
+      }
+    }
+  },
+)
+
+async function fetchWithRedirects(startUrl: URL) {
+  let currentUrl = startUrl
+
+  for (let redirectCount = 0; redirectCount < 6; redirectCount++) {
+    try {
+      const response = await fetch(currentUrl, {
+        redirect: 'manual',
+        signal: AbortSignal.timeout(5_000),
+      })
+      await response.body?.cancel()
+
+      if (response.status >= 300 && response.status < 400) {
+        const location = response.headers.get('location')
+        assert.ok(location, `${currentUrl.href} redirected without location`)
+        currentUrl = new URL(location, currentUrl)
+        continue
+      }
+
+      return {
+        status: response.status,
+        url: currentUrl.href,
+      }
+    } catch (error) {
+      if (error instanceof DOMException && error.name === 'TimeoutError') {
+        return {
+          status: 'timeout',
+          url: currentUrl.href,
+        }
+      }
+
+      return {
+        status: 'error',
+        url: currentUrl.href,
+      }
+    }
+  }
+
+  return {
+    status: 'error',
+    url: currentUrl.href,
+  }
+}
diff --git a/tests/e2e.spec.ts b/tests/e2e.spec.ts
deleted file mode 100644
index 2cbfc107d..000000000
--- a/tests/e2e.spec.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test.describe('smoke tests', () => {
-  test('home page renders', async ({ page }) => {
-    await page.goto('/')
-    await expect(page.locator('body')).toBeVisible()
-    await expect(page).toHaveTitle(/TanStack/i)
-  })
-
-  test('docs page renders', async ({ page }) => {
-    await page.goto('/query/latest/docs/overview')
-    await expect(page.locator('body')).toBeVisible()
-    await expect(page.locator('h1')).toBeVisible()
-  })
-})
diff --git a/tests/filter-framework-content.test.ts b/tests/filter-framework-content.test.ts
new file mode 100644
index 000000000..e7af89d5d
--- /dev/null
+++ b/tests/filter-framework-content.test.ts
@@ -0,0 +1,71 @@
+import { extractFrameworksFromMarkdown } from '../src/utils/markdown/filterFrameworkContent'
+
+function assertEqual(actual: unknown, expected: unknown, message: string) {
+  const actualJson = JSON.stringify(actual)
+  const expectedJson = JSON.stringify(expected)
+  if (actualJson !== expectedJson) {
+    throw new Error(`${message}: expected ${expectedJson}, got ${actualJson}`)
+  }
+}
+
+const frameworkBlockMarkdown = `
+Shared content.
+
+<!-- ::start:framework -->
+
+# React
+
+React content.
+
+# Solid
+
+Solid content.
+
+# Vue
+
+Vue content.
+
+<!-- ::end:framework -->
+`
+
+assertEqual(
+  extractFrameworksFromMarkdown(frameworkBlockMarkdown),
+  ['react', 'solid', 'vue'],
+  'framework block frameworks extracted',
+)
+
+const packageManagerMarkdown = `
+<!-- ::start:tabs variant="package-manager" mode="install" -->
+react: @tanstack/react-query
+solid: @tanstack/solid-query
+react: @tanstack/react-query-devtools
+<!-- ::end:tabs -->
+`
+
+assertEqual(
+  extractFrameworksFromMarkdown(packageManagerMarkdown),
+  ['react', 'solid'],
+  'package manager frameworks extracted and deduped',
+)
+
+const mixedMarkdown = `
+<!-- ::start:framework -->
+# Svelte
+Svelte content.
+# React
+React content.
+<!-- ::end:framework -->
+
+<!-- ::start:tabs variant="package-managers" mode="install" -->
+vue: @tanstack/vue-form
+svelte: @tanstack/svelte-form
+<!-- ::end:tabs -->
+`
+
+assertEqual(
+  extractFrameworksFromMarkdown(mixedMarkdown),
+  ['svelte', 'react', 'vue'],
+  'mixed framework sources preserve first-seen order',
+)
+
+console.log('filter-framework-content tests passed')
diff --git a/tests/github-api-contents-cache.test.ts b/tests/github-api-contents-cache.test.ts
new file mode 100644
index 000000000..20ef39ea0
--- /dev/null
+++ b/tests/github-api-contents-cache.test.ts
@@ -0,0 +1,250 @@
+import assert from 'node:assert/strict'
+import { runWithHostRuntimeEnv } from '../src/server/runtime/host.server'
+import { fetchApiContents } from '../src/utils/documents.server'
+import { resetGitHubContentCacheForTest } from '../src/utils/github-content-cache.server'
+import { createMockR2Bucket } from './github-cache-test-utils'
+import type { GitHubFileNode } from '../src/utils/documents.server'
+
+const repo = 'tanstack/router'
+const gitRef = 'main'
+const startingPath = 'examples/react/kitchen-sink'
+
+async function testCachedRecursiveTreeBuildsDirectory() {
+  resetGitHubContentCacheForTest()
+
+  const mockR2 = createMockR2Bucket()
+  mockR2.objects.set(
+    'github:dir/tanstack/router/main/__github_recursive_tree__',
+    {
+      customMetadata: {},
+      uploaded: new Date(),
+      value: JSON.stringify({
+        value: {
+          sha: 'root-sha',
+          tree: [
+            {
+              path: startingPath,
+              sha: 'example-sha',
+              type: 'tree',
+              url: 'https://api.github.com/tree/example-sha',
+            },
+            {
+              path: `${startingPath}/package.json`,
+              sha: 'package-sha',
+              size: 100,
+              type: 'blob',
+              url: 'https://api.github.com/blob/package-sha',
+            },
+            {
+              path: `${startingPath}/src`,
+              sha: 'src-sha',
+              type: 'tree',
+              url: 'https://api.github.com/tree/src-sha',
+            },
+            {
+              path: `${startingPath}/src/main.tsx`,
+              sha: 'main-sha',
+              size: 200,
+              type: 'blob',
+              url: 'https://api.github.com/blob/main-sha',
+            },
+          ],
+          truncated: false,
+          url: 'https://api.github.com/tree/root-sha',
+        },
+      }),
+    },
+  )
+
+  const contents: Array<GitHubFileNode> | null = await runWithHostRuntimeEnv(
+    { GITHUB_CONTENT_CACHE: mockR2.bucket },
+    () => fetchApiContents(repo, gitRef, startingPath),
+  )
+
+  assert.ok(contents)
+  assert.deepEqual(
+    contents.map((node) => node.name),
+    ['src', 'package.json'],
+  )
+
+  const src = contents.find((node) => node.name === 'src')
+  assert.ok(src?.children)
+  assert.deepEqual(
+    src.children.map((node) => node.name),
+    ['main.tsx'],
+  )
+
+  const persistedDirectory = mockR2.objects.get(
+    'github:dir/tanstack/router/main/examples/react/kitchen-sink',
+  )
+  assert.ok(persistedDirectory)
+  assert.equal(persistedDirectory.customMetadata?.repo, repo)
+  assert.equal(persistedDirectory.customMetadata?.gitRef, gitRef)
+  assert.equal(persistedDirectory.customMetadata?.isPresent, 'true')
+}
+
+function createTableContentsApiFetchMock(requestedUrls: Array<string>) {
+  return async (input: string | URL | Request) => {
+    const url =
+      typeof input === 'string'
+        ? input
+        : input instanceof URL
+          ? input.href
+          : input.url
+
+    requestedUrls.push(url)
+
+    if (url.includes('/contents/examples/react/basic/src')) {
+      return Response.json([
+        {
+          name: 'main.tsx',
+          path: 'examples/react/basic/src/main.tsx',
+          type: 'file',
+          _links: {
+            self: 'https://api.github.com/repos/tanstack/table/contents/examples/react/basic/src/main.tsx',
+          },
+        },
+      ])
+    }
+
+    if (url.includes('/contents/examples/react/basic')) {
+      return Response.json([
+        {
+          name: 'src',
+          path: 'examples/react/basic/src',
+          type: 'dir',
+          _links: {
+            self: 'https://api.github.com/repos/tanstack/table/contents/examples/react/basic/src',
+          },
+        },
+        {
+          name: 'package.json',
+          path: 'examples/react/basic/package.json',
+          type: 'file',
+          _links: {
+            self: 'https://api.github.com/repos/tanstack/table/contents/examples/react/basic/package.json',
+          },
+        },
+      ])
+    }
+
+    return new Response('not found', { status: 404 })
+  }
+}
+
+async function assertTableFallbackContents(
+  tableMockR2: ReturnType<typeof createMockR2Bucket>,
+  requestedUrls: Array<string>,
+) {
+  const tableRepo = 'tanstack/table'
+  const tableStartingPath = 'examples/react/basic'
+
+  const fallbackContents: Array<GitHubFileNode> | null =
+    await runWithHostRuntimeEnv(
+      { GITHUB_CONTENT_CACHE: tableMockR2.bucket },
+      () => fetchApiContents(tableRepo, gitRef, tableStartingPath),
+    )
+
+  assert.ok(fallbackContents)
+  assert.deepEqual(
+    fallbackContents.map((node) => node.name),
+    ['src', 'package.json'],
+  )
+
+  const srcNode = fallbackContents.find((node) => node.name === 'src')
+  assert.ok(srcNode?.children)
+  assert.deepEqual(
+    srcNode.children.map((node) => node.path),
+    ['examples/react/basic/src/main.tsx'],
+  )
+
+  assert.ok(
+    requestedUrls.some((url) =>
+      url.includes('/contents/examples/react/basic?ref=main'),
+    ),
+  )
+
+  const persistedFallbackDirectory = tableMockR2.objects.get(
+    'github:dir/tanstack/table/main/examples/react/basic',
+  )
+  assert.ok(persistedFallbackDirectory)
+  assert.equal(persistedFallbackDirectory.customMetadata?.isPresent, 'true')
+}
+
+async function testContentsApiFallbackWhenRecursiveTreeMissesPath() {
+  resetGitHubContentCacheForTest()
+
+  const tableMockR2 = createMockR2Bucket()
+  const requestedUrls: Array<string> = []
+  tableMockR2.objects.set(
+    'github:dir/tanstack/table/main/__github_recursive_tree__',
+    {
+      customMetadata: {},
+      uploaded: new Date(),
+      value: JSON.stringify({
+        value: {
+          sha: 'root-sha',
+          tree: [
+            {
+              path: 'examples/react/other-example',
+              sha: 'other-example-sha',
+              type: 'tree',
+              url: 'https://api.github.com/tree/other-example-sha',
+            },
+          ],
+          truncated: false,
+          url: 'https://api.github.com/tree/root-sha',
+        },
+      }),
+    },
+  )
+
+  const originalFetch = globalThis.fetch
+  globalThis.fetch = createTableContentsApiFetchMock(requestedUrls)
+
+  try {
+    await assertTableFallbackContents(tableMockR2, requestedUrls)
+    assert.ok(!requestedUrls.some((url) => url.includes('/git/trees/')))
+  } finally {
+    globalThis.fetch = originalFetch
+  }
+}
+
+async function testContentsApiFallbackWhenRecursiveTreeFails() {
+  resetGitHubContentCacheForTest()
+
+  const tableMockR2 = createMockR2Bucket()
+  const originalFetch = globalThis.fetch
+  const requestedUrls: Array<string> = []
+  const contentsApiFetch = createTableContentsApiFetchMock(requestedUrls)
+
+  globalThis.fetch = async (input: string | URL | Request) => {
+    const url =
+      typeof input === 'string'
+        ? input
+        : input instanceof URL
+          ? input.href
+          : input.url
+
+    requestedUrls.push(url)
+
+    if (url.includes('/git/trees/')) {
+      return new Response('rate limited', { status: 403 })
+    }
+
+    return contentsApiFetch(input)
+  }
+
+  try {
+    await assertTableFallbackContents(tableMockR2, requestedUrls)
+    assert.ok(requestedUrls.some((url) => url.includes('/git/trees/')))
+  } finally {
+    globalThis.fetch = originalFetch
+  }
+}
+
+await testCachedRecursiveTreeBuildsDirectory()
+await testContentsApiFallbackWhenRecursiveTreeMissesPath()
+await testContentsApiFallbackWhenRecursiveTreeFails()
+
+console.log('github-api-contents-cache tests passed')
diff --git a/tests/github-cache-test-utils.ts b/tests/github-cache-test-utils.ts
new file mode 100644
index 000000000..d36e3699d
--- /dev/null
+++ b/tests/github-cache-test-utils.ts
@@ -0,0 +1,71 @@
+export function createMockR2Bucket() {
+  const objects = new Map<
+    string,
+    {
+      customMetadata?: Record<string, string>
+      uploaded: Date
+      value: string
+    }
+  >()
+
+  const bucket = {
+    async delete(keys: string | Array<string>) {
+      for (const key of Array.isArray(keys) ? keys : [keys]) {
+        objects.delete(key)
+      }
+    },
+    async get(key: string) {
+      const object = objects.get(key)
+
+      if (!object) {
+        return null
+      }
+
+      return {
+        key,
+        customMetadata: object.customMetadata,
+        text: async () => object.value,
+        uploaded: object.uploaded,
+      }
+    },
+    async list(options?: {
+      cursor?: string
+      include?: Array<'customMetadata'>
+      limit?: number
+      prefix?: string
+    }) {
+      const prefix = options?.prefix ?? ''
+      const limit = options?.limit ?? 1000
+      const entries = Array.from(objects.entries()).filter(([key]) =>
+        key.startsWith(prefix),
+      )
+
+      return {
+        objects: entries.slice(0, limit).map(([key, object]) => ({
+          key,
+          customMetadata: object.customMetadata,
+          uploaded: object.uploaded,
+        })),
+        truncated: entries.length > limit,
+      }
+    },
+    async put(
+      key: string,
+      value: string,
+      options?: {
+        customMetadata?: Record<string, string>
+        httpMetadata?: {
+          contentType?: string
+        }
+      },
+    ) {
+      objects.set(key, {
+        customMetadata: options?.customMetadata,
+        uploaded: new Date(),
+        value,
+      })
+    },
+  }
+
+  return { bucket, objects }
+}
diff --git a/tests/github-content-cache.test.ts b/tests/github-content-cache.test.ts
new file mode 100644
index 000000000..1d24a2ab6
--- /dev/null
+++ b/tests/github-content-cache.test.ts
@@ -0,0 +1,400 @@
+import assert from 'node:assert/strict'
+import {
+  runWithHostRuntimeContext,
+  runWithHostRuntimeEnv,
+} from '../src/server/runtime/host.server'
+import {
+  getCachedDocsArtifact,
+  getCachedGitHubJsonContent,
+  getCachedGitHubTextFile,
+  markDocsArtifactsStale,
+  markGitHubContentStale,
+  pruneStaleCacheRows,
+  resetGitHubContentCacheForTest,
+} from '../src/utils/github-content-cache.server'
+import { createMockR2Bucket } from './github-cache-test-utils'
+
+const repo = 'tanstack/router'
+const gitRef = 'main'
+
+function isStringArray(value: unknown): value is Array<string> {
+  return Array.isArray(value) && value.every((item) => typeof item === 'string')
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+async function withTimeout(promise: Promise<void>, message: string) {
+  await Promise.race([
+    promise,
+    new Promise<void>((_, reject) => {
+      setTimeout(() => reject(new Error(message)), 1000)
+    }),
+  ])
+}
+
+function isDocsManifest(value: unknown): value is { paths: Array<string> } {
+  if (!isObject(value)) {
+    return false
+  }
+
+  return isStringArray(value.paths)
+}
+
+async function testMissStoresContent() {
+  resetGitHubContentCacheForTest()
+
+  let originCalls = 0
+  const result = await getCachedGitHubTextFile({
+    repo,
+    gitRef,
+    path: 'docs/guide.md',
+    origin: async () => {
+      originCalls += 1
+      return 'guide'
+    },
+  })
+
+  assert.equal(result, 'guide')
+  assert.equal(originCalls, 1)
+}
+
+async function testFreshHitSkipsOrigin() {
+  resetGitHubContentCacheForTest()
+
+  let originCalls = 0
+  const opts = {
+    repo,
+    gitRef,
+    path: 'docs/fresh.md',
+    origin: async () => {
+      originCalls += 1
+      return 'fresh'
+    },
+  }
+
+  assert.equal(await getCachedGitHubTextFile(opts), 'fresh')
+  assert.equal(await getCachedGitHubTextFile(opts), 'fresh')
+  assert.equal(originCalls, 1)
+}
+
+async function testWorkerEnvUsesBlobStorage() {
+  resetGitHubContentCacheForTest()
+
+  const mockR2 = createMockR2Bucket()
+  let originCalls = 0
+  const opts = {
+    repo,
+    gitRef,
+    path: 'docs/blob.md',
+    origin: async () => {
+      originCalls += 1
+      return 'blob'
+    },
+  }
+
+  const firstResult = await runWithHostRuntimeEnv(
+    { GITHUB_CONTENT_CACHE: mockR2.bucket },
+    () => getCachedGitHubTextFile(opts),
+  )
+  const secondResult = await runWithHostRuntimeEnv(
+    { GITHUB_CONTENT_CACHE: mockR2.bucket },
+    () => getCachedGitHubTextFile(opts),
+  )
+
+  assert.equal(firstResult, 'blob')
+  assert.equal(secondResult, 'blob')
+  assert.equal(originCalls, 1)
+
+  const object = mockR2.objects.get(
+    'github:file/tanstack/router/main/docs/blob.md',
+  )
+  assert.ok(object)
+  assert.equal(object.customMetadata?.repo, repo)
+  assert.equal(object.customMetadata?.gitRef, gitRef)
+  assert.equal(object.customMetadata?.isPresent, 'true')
+  assert.deepEqual(JSON.parse(object.value), { value: 'blob' })
+}
+
+async function testBlobStorageInfersGithubContentMetadataFromKey() {
+  resetGitHubContentCacheForTest()
+
+  const mockR2 = createMockR2Bucket()
+  const key = 'github:dir/tanstack/router/main/docs/seeded-tree'
+  mockR2.objects.set(key, {
+    customMetadata: {},
+    uploaded: new Date(),
+    value: JSON.stringify({ value: ['docs/index.md'] }),
+  })
+
+  let originCalls = 0
+  const result = await runWithHostRuntimeEnv(
+    { GITHUB_CONTENT_CACHE: mockR2.bucket },
+    () =>
+      getCachedGitHubJsonContent({
+        repo,
+        gitRef,
+        path: 'docs/seeded-tree',
+        isValue: isStringArray,
+        origin: async () => {
+          originCalls += 1
+          return ['origin.md']
+        },
+      }),
+  )
+
+  assert.deepEqual(result, ['docs/index.md'])
+  assert.equal(originCalls, 0)
+}
+
+async function testForcedStaleRefreshes() {
+  resetGitHubContentCacheForTest()
+
+  await getCachedGitHubTextFile({
+    repo,
+    gitRef,
+    path: 'docs/stale.md',
+    origin: async () => 'old',
+  })
+
+  assert.equal(await markGitHubContentStale({ repo, gitRef }), 1)
+
+  let originCalls = 0
+  const result = await getCachedGitHubTextFile({
+    repo,
+    gitRef,
+    path: 'docs/stale.md',
+    origin: async () => {
+      originCalls += 1
+      return 'new'
+    },
+  })
+
+  assert.equal(result, 'new')
+  assert.equal(originCalls, 1)
+}
+
+async function testNegativeHitSkipsOrigin() {
+  resetGitHubContentCacheForTest()
+
+  let originCalls = 0
+  const opts = {
+    repo,
+    gitRef,
+    path: 'docs/missing.md',
+    origin: async () => {
+      originCalls += 1
+      return null
+    },
+  }
+
+  assert.equal(await getCachedGitHubTextFile(opts), null)
+  assert.equal(await getCachedGitHubTextFile(opts), null)
+  assert.equal(originCalls, 1)
+}
+
+async function testJsonNegativeEntryRefreshes() {
+  resetGitHubContentCacheForTest()
+
+  let originCalls = 0
+  const opts = {
+    repo,
+    gitRef,
+    path: 'examples/react/missing',
+    isValue: isStringArray,
+    origin: async () => {
+      originCalls += 1
+      return originCalls === 1 ? null : ['examples/react/basic/src/main.tsx']
+    },
+  }
+
+  assert.equal(await getCachedGitHubJsonContent(opts), null)
+  assert.deepEqual(await getCachedGitHubJsonContent(opts), [
+    'examples/react/basic/src/main.tsx',
+  ])
+  assert.equal(originCalls, 2)
+}
+
+async function testRefreshFailureFallsBackToStaleContent() {
+  resetGitHubContentCacheForTest()
+
+  await getCachedGitHubTextFile({
+    repo,
+    gitRef,
+    path: 'docs/outage.md',
+    origin: async () => 'cached',
+  })
+
+  await markGitHubContentStale({ repo, gitRef })
+
+  const result = await getCachedGitHubTextFile({
+    repo,
+    gitRef,
+    path: 'docs/outage.md',
+    origin: async () => {
+      throw new Error('GitHub unavailable')
+    },
+  })
+
+  assert.equal(result, 'cached')
+}
+
+async function testJsonContentUsesTypeGuard() {
+  resetGitHubContentCacheForTest()
+
+  let originCalls = 0
+  const opts = {
+    repo,
+    gitRef,
+    path: '__github_recursive_tree__',
+    isValue: isStringArray,
+    origin: async () => {
+      originCalls += 1
+      return ['docs/index.md']
+    },
+  }
+
+  assert.deepEqual(await getCachedGitHubJsonContent(opts), ['docs/index.md'])
+  assert.deepEqual(await getCachedGitHubJsonContent(opts), ['docs/index.md'])
+  assert.equal(originCalls, 1)
+}
+
+async function testArtifactInvalidationAndPruneDelete() {
+  resetGitHubContentCacheForTest()
+
+  await getCachedGitHubTextFile({
+    repo,
+    gitRef,
+    path: 'docs/delete.md',
+    origin: async () => 'before-delete',
+  })
+
+  await getCachedDocsArtifact({
+    repo,
+    gitRef,
+    docsRoot: 'docs',
+    artifactType: 'docs-manifest',
+    artifactKey: 'default',
+    isValue: isDocsManifest,
+    build: async () => ({ paths: ['docs/delete.md'] }),
+  })
+
+  assert.equal(await markGitHubContentStale({ repo, gitRef }), 1)
+  assert.equal(await markDocsArtifactsStale({ repo, gitRef }), 1)
+
+  const prune = await pruneStaleCacheRows({
+    maxAgeMs: -1,
+    negativeMaxAgeMs: -1,
+  })
+
+  assert.equal(prune.githubContentDeleted, 1)
+  assert.equal(prune.docsArtifactDeleted, 1)
+
+  let originCalls = 0
+  const result = await getCachedGitHubTextFile({
+    repo,
+    gitRef,
+    path: 'docs/delete.md',
+    origin: async () => {
+      originCalls += 1
+      return 'after-delete'
+    },
+  })
+
+  assert.equal(result, 'after-delete')
+  assert.equal(originCalls, 1)
+}
+
+async function testStaleArtifactRefreshesInWaitUntil() {
+  resetGitHubContentCacheForTest()
+
+  await getCachedDocsArtifact({
+    repo,
+    gitRef,
+    docsRoot: 'docs',
+    artifactType: 'docs-manifest',
+    artifactKey: 'default',
+    isValue: isDocsManifest,
+    build: async () => ({ paths: ['old'] }),
+  })
+
+  assert.equal(await markDocsArtifactsStale({ repo, gitRef }), 1)
+
+  const waitUntilPromises: Array<Promise<unknown>> = []
+  let buildCalls = 0
+  let resolveRefresh: ((value: { paths: Array<string> }) => void) | undefined
+  let markRefreshStarted: (() => void) | undefined
+  const refreshStarted = new Promise<void>((resolve) => {
+    markRefreshStarted = resolve
+  })
+  const refreshResult = new Promise<{ paths: Array<string> }>((resolve) => {
+    resolveRefresh = resolve
+  })
+
+  const staleResult = await runWithHostRuntimeContext(
+    {
+      waitUntil(promise: Promise<unknown>) {
+        waitUntilPromises.push(promise)
+      },
+    },
+    () =>
+      getCachedDocsArtifact({
+        repo,
+        gitRef,
+        docsRoot: 'docs',
+        artifactType: 'docs-manifest',
+        artifactKey: 'default',
+        isValue: isDocsManifest,
+        build: () => {
+          buildCalls += 1
+          markRefreshStarted?.()
+          return refreshResult
+        },
+      }),
+  )
+
+  assert.deepEqual(staleResult, { paths: ['old'] })
+  assert.equal(waitUntilPromises.length, 1)
+
+  await withTimeout(
+    refreshStarted,
+    'stale artifact refresh did not start in waitUntil',
+  )
+  assert.equal(buildCalls, 1)
+
+  if (!resolveRefresh) {
+    throw new Error('stale artifact refresh resolver was not created')
+  }
+
+  resolveRefresh({ paths: ['new'] })
+  await Promise.all(waitUntilPromises)
+
+  const freshResult = await getCachedDocsArtifact({
+    repo,
+    gitRef,
+    docsRoot: 'docs',
+    artifactType: 'docs-manifest',
+    artifactKey: 'default',
+    isValue: isDocsManifest,
+    build: async () => {
+      throw new Error('fresh artifact should not rebuild')
+    },
+  })
+
+  assert.deepEqual(freshResult, { paths: ['new'] })
+}
+
+await testMissStoresContent()
+await testFreshHitSkipsOrigin()
+await testWorkerEnvUsesBlobStorage()
+await testBlobStorageInfersGithubContentMetadataFromKey()
+await testForcedStaleRefreshes()
+await testNegativeHitSkipsOrigin()
+await testJsonNegativeEntryRefreshes()
+await testRefreshFailureFallsBackToStaleContent()
+await testJsonContentUsesTypeGuard()
+await testArtifactInvalidationAndPruneDelete()
+await testStaleArtifactRefreshesInWaitUntil()
+
+console.log('github-content-cache tests passed')
diff --git a/tests/github-content-fetch-options.test.ts b/tests/github-content-fetch-options.test.ts
new file mode 100644
index 000000000..e6565a707
--- /dev/null
+++ b/tests/github-content-fetch-options.test.ts
@@ -0,0 +1,44 @@
+import assert from 'node:assert/strict'
+import { runWithHostRuntimeEnv } from '../src/server/runtime/host.server'
+import { getGitHubContentFetchOptions } from '../src/utils/documents.server'
+
+function getHeaderValue(init: RequestInit, name: string) {
+  return new Headers(init.headers).get(name)
+}
+
+const authenticatedOptions = runWithHostRuntimeEnv(
+  { GITHUB_AUTH_TOKEN: 'host-token' },
+  () => getGitHubContentFetchOptions(),
+)
+
+assert.equal(
+  getHeaderValue(authenticatedOptions, 'Authorization'),
+  'Bearer host-token',
+  'GitHub API fetches use the Worker env token when present',
+)
+assert.equal(
+  getHeaderValue(authenticatedOptions, 'User-Agent'),
+  'TanStack-Docs',
+  'GitHub API fetches include the required default User-Agent',
+)
+
+const unauthenticatedOptions = runWithHostRuntimeEnv(
+  { GITHUB_AUTH_TOKEN: 'host-token' },
+  () => getGitHubContentFetchOptions({ includeAuthorization: false }),
+)
+
+assert.equal(
+  getHeaderValue(unauthenticatedOptions, 'Authorization'),
+  null,
+  'GitHub API fetches can still opt out of authorization',
+)
+assert.equal(
+  getHeaderValue(
+    getGitHubContentFetchOptions({ userAgent: 'docs:tanstack/table' }),
+    'User-Agent',
+  ),
+  'docs:tanstack/table',
+  'GitHub API fetches can override the default User-Agent',
+)
+
+console.log('github-content-fetch-options tests passed')
diff --git a/tests/http-response.test.ts b/tests/http-response.test.ts
new file mode 100644
index 000000000..77823a1fd
--- /dev/null
+++ b/tests/http-response.test.ts
@@ -0,0 +1,31 @@
+import assert from 'node:assert/strict'
+import {
+  getContentDispositionHeader,
+  sanitizeResponseFilename,
+} from '../src/utils/http-response'
+
+assert.equal(
+  sanitizeResponseFilename('../docs/quick start.md'),
+  'docs-quick-start.md',
+  'path separators and spaces are normalized for response filenames',
+)
+
+assert.equal(
+  sanitizeResponseFilename('\r\n"bad".zip', 'fallback.zip'),
+  'bad.zip',
+  'control characters and quotes are stripped from response filenames',
+)
+
+assert.equal(
+  sanitizeResponseFilename('../', 'fallback.zip'),
+  'fallback.zip',
+  'empty sanitized filenames fall back to the provided filename',
+)
+
+assert.equal(
+  getContentDispositionHeader('attachment', 'my app.zip'),
+  'attachment; filename="my-app.zip"; filename*=UTF-8\'\'my-app.zip',
+  'content disposition uses a sanitized quoted filename and RFC 5987 filename',
+)
+
+console.log('http-response tests passed')
diff --git a/tests/intent-workflow.test.ts b/tests/intent-workflow.test.ts
new file mode 100644
index 000000000..22089ad6f
--- /dev/null
+++ b/tests/intent-workflow.test.ts
@@ -0,0 +1,238 @@
+import assert from 'node:assert/strict'
+import { mock, test } from 'node:test'
+import {
+  defineWorkflowRuntime,
+  every,
+  inMemoryWorkflowExecutionStore,
+  materializeWorkflowSchedules,
+} from '@tanstack/workflow-runtime'
+import type { WorkflowExecutionStore } from '@tanstack/workflow-runtime'
+import { createIntentProcessWorkflow } from '../src/utils/intent-workflows.server'
+import type {
+  IntentProcessResult,
+  IntentSyncOperations,
+  IntentVersionProcessResult,
+} from '../src/utils/intent-sync.server'
+
+test('duplicate scheduled invocation with the same bucket is idempotent', async () => {
+  let selectCalls = 0
+  let processCalls = 0
+  const store = inMemoryWorkflowExecutionStore()
+  const { processSchedule, processWorkflow, runtime } = createTestIntentRuntime(
+    {
+      store,
+      operations: {
+        ...noopOperations,
+        selectPendingIntentVersions: async () => {
+          selectCalls++
+          return [{ id: 1, packageName: '@example/pkg', version: '1.0.0' }]
+        },
+        processIntentVersion: async () => {
+          processCalls++
+          return {
+            packageName: '@example/pkg',
+            version: '1.0.0',
+            status: 'synced',
+            skillCount: 1,
+          }
+        },
+      },
+    },
+  )
+  const now = Date.UTC(2026, 4, 26, 12, 0, 0)
+
+  await materializeWorkflowSchedules(runtime, { now })
+  const first = await runtime.sweep({ now, includeEvents: false })
+  await materializeWorkflowSchedules(runtime, { now })
+  const second = await runtime.sweep({ now, includeEvents: false })
+
+  const processRun = first.scheduled.find(
+    (run) => run.workflowId === processWorkflow.id,
+  )
+  assert.ok(processRun)
+  assert.equal(
+    processRun.runId,
+    `${processWorkflow.id}:${processSchedule.id}:${now}`,
+  )
+  assert.equal(second.scheduled.length, 0)
+  assert.equal(selectCalls, 1)
+  assert.equal(processCalls, 1)
+})
+
+test('failed package version step does not prevent other versions from processing', async () => {
+  const goodResult: IntentVersionProcessResult = {
+    packageName: '@example/good',
+    version: '1.0.0',
+    status: 'synced',
+    skillCount: 1,
+  }
+  const badResult: IntentVersionProcessResult = {
+    packageName: '@example/bad',
+    version: '1.0.0',
+    status: 'failed',
+    error: 'tarball failed',
+  }
+  const laterResult: IntentVersionProcessResult = {
+    packageName: '@example/later',
+    version: '1.0.0',
+    status: 'synced',
+    skillCount: 2,
+  }
+  const expected: IntentProcessResult = {
+    processed: 2,
+    failed: 1,
+    deferred: 0,
+    results: [goodResult, badResult, laterResult],
+  }
+  const { processWorkflow, runtime } = createTestIntentRuntime({
+    store: inMemoryWorkflowExecutionStore(),
+    operations: {
+      ...noopOperations,
+      selectPendingIntentVersions: async () => [
+        { id: 1, packageName: '@example/good', version: '1.0.0' },
+        { id: 2, packageName: '@example/bad', version: '1.0.0' },
+        { id: 3, packageName: '@example/later', version: '1.0.0' },
+      ],
+      processIntentVersion: async (versionId: number) => {
+        if (versionId === 1) return goodResult
+        if (versionId === 2) throw new Error('tarball failed')
+        return laterResult
+      },
+    },
+  })
+
+  const result = await runtime.startRun({
+    workflowId: processWorkflow.id,
+    runId: 'intent-process:test-partial-failure',
+    input: { source: 'admin' },
+    now: Date.UTC(2026, 4, 26, 12, 15, 0),
+    includeEvents: false,
+  })
+
+  assert.equal(result.kind, 'completed')
+  assert.ok(result.run)
+  assert.deepEqual(result.run.output, expected)
+})
+
+test('process workflow yields near its runtime deadline and resumes the same run', async () => {
+  let wallNow = 1_000
+  mock.method(Date, 'now', () => wallNow)
+
+  try {
+    const queue = [
+      { id: 1, packageName: '@example/one', version: '1.0.0' },
+      { id: 2, packageName: '@example/two', version: '1.0.0' },
+    ]
+    const processed: Array<string> = []
+    const store = inMemoryWorkflowExecutionStore()
+    const { processWorkflow, runtime } = createTestIntentRuntime({
+      store,
+      operations: {
+        ...noopOperations,
+        selectPendingIntentVersions: async ({ limit }) =>
+          queue.splice(0, limit),
+        processIntentVersion: async (versionId: number) => {
+          const packageName = versionId === 1 ? '@example/one' : '@example/two'
+          const version = '1.0.0'
+          processed.push(`${packageName}@${version}`)
+          wallNow += 600
+          return {
+            packageName,
+            version,
+            status: 'synced',
+            skillCount: 1,
+          }
+        },
+      },
+    })
+    const runId = 'intent-process:deadline-resume'
+
+    const first = await runtime.startRun({
+      workflowId: processWorkflow.id,
+      runId,
+      input: { source: 'schedule' },
+      now: 100,
+      deadline: 2_000,
+      minYieldRemainingMs: 500,
+      includeEvents: false,
+    })
+    const paused = await store.loadRun(runId)
+    const resumed = await runtime.sweep({
+      now: 101,
+      deadline: 10_000,
+      minYieldRemainingMs: 500,
+      includeEvents: false,
+    })
+
+    assert.equal(first.kind, 'paused')
+    assert.equal(paused?.status, 'paused')
+    assert.equal(paused?.lease, undefined)
+    assert.equal(resumed.timers[0]?.kind, 'completed')
+    assert.equal(resumed.timers[0]?.runId, runId)
+    assert.deepEqual(processed, ['@example/one@1.0.0', '@example/two@1.0.0'])
+    assert.deepEqual(resumed.timers[0]?.run?.output, {
+      processed: 2,
+      failed: 0,
+      deferred: 0,
+      results: [
+        {
+          packageName: '@example/one',
+          version: '1.0.0',
+          status: 'synced',
+          skillCount: 1,
+        },
+        {
+          packageName: '@example/two',
+          version: '1.0.0',
+          status: 'synced',
+          skillCount: 1,
+        },
+      ],
+    })
+  } finally {
+    mock.restoreAll()
+  }
+})
+
+const noopOperations: IntentSyncOperations = {
+  discoverIntentPackages: async () => ({
+    packagesDiscovered: 0,
+    githubCandidates: 0,
+    packagesVerified: 0,
+    versionsEnqueued: 0,
+    errors: [],
+  }),
+  selectPendingIntentVersions: async () => [],
+  processIntentVersion: async () => {
+    throw new Error('No test version configured')
+  },
+}
+
+function createTestIntentRuntime(options: {
+  operations: IntentSyncOperations
+  store?: WorkflowExecutionStore
+}) {
+  const processWorkflow = createIntentProcessWorkflow(options.operations)
+  const processSchedule = {
+    id: 'intent-process-every-15m',
+    schedule: every.minutes(15),
+    overlapPolicy: 'skip',
+    input: {
+      source: 'schedule',
+    },
+  } as const
+
+  return {
+    processSchedule,
+    processWorkflow,
+    runtime: defineWorkflowRuntime({
+      store: options.store ?? inMemoryWorkflowExecutionStore(),
+      workflows: {
+        [processWorkflow.id]: {
+          load: async () => processWorkflow,
+          schedules: [processSchedule],
+        },
+      },
+    }),
+  }
+}
diff --git a/tests/libraries-utils.test.ts b/tests/libraries-utils.test.ts
new file mode 100644
index 000000000..129c09266
--- /dev/null
+++ b/tests/libraries-utils.test.ts
@@ -0,0 +1,33 @@
+import assert from 'node:assert/strict'
+import { orderFrameworksForBrowse } from '../src/routes/-libraries-utils'
+import type { Framework } from '../src/libraries/types'
+
+const frameworks: Array<{ value: Framework }> = [
+  { value: 'react' },
+  { value: 'vue' },
+  { value: 'solid' },
+  { value: 'vanilla' },
+  { value: 'ember' },
+]
+
+const ordered = orderFrameworksForBrowse(frameworks, {
+  react: 8,
+  vue: 5,
+  solid: 5,
+  vanilla: 10,
+  ember: 1,
+})
+
+assert.deepEqual(
+  ordered.map((framework) => framework.value),
+  ['react', 'vue', 'solid', 'ember', 'vanilla'],
+  'frameworks sort by library count, preserve ties, and keep Vanilla last',
+)
+
+assert.deepEqual(
+  frameworks.map((framework) => framework.value),
+  ['react', 'vue', 'solid', 'vanilla', 'ember'],
+  'framework sorting does not mutate the shared framework options',
+)
+
+console.log('libraries utils tests passed')
diff --git a/tests/repo-path.test.ts b/tests/repo-path.test.ts
new file mode 100644
index 000000000..eaf8434d5
--- /dev/null
+++ b/tests/repo-path.test.ts
@@ -0,0 +1,64 @@
+import assert from 'node:assert/strict'
+import { isValidRepoPath, joinRepoPath } from '../src/utils/repo-path'
+import { getExampleStartingPath } from '../src/utils/sandbox'
+
+assert.equal(
+  isValidRepoPath(
+    'examples/react/start-clerk-basic/src/routes/_authed/posts.$postId.tsx',
+  ),
+  true,
+  'TanStack route params are valid repo path segments',
+)
+
+assert.equal(
+  isValidRepoPath('examples/react/start-clerk-basic/src/routes/__root.tsx'),
+  true,
+  'underscores remain valid repo path segments',
+)
+
+assert.equal(
+  isValidRepoPath('../src/routes/__root.tsx'),
+  false,
+  'traversal is rejected',
+)
+
+assert.equal(
+  isValidRepoPath('src/routes//__root.tsx'),
+  false,
+  'empty path segments are rejected',
+)
+
+assert.equal(
+  isValidRepoPath('src/routes/app?file.tsx'),
+  false,
+  'query delimiters are rejected',
+)
+
+assert.equal(
+  joinRepoPath('examples/react/start-basic', 'src/routes/__root.tsx'),
+  'examples/react/start-basic/src/routes/__root.tsx',
+  'relative example paths are resolved under the example directory',
+)
+
+assert.equal(
+  joinRepoPath(
+    'examples/react/start-basic',
+    'examples/react/start-basic/src/routes/__root.tsx',
+  ),
+  'examples/react/start-basic/src/routes/__root.tsx',
+  'repo-root example paths are not prefixed twice',
+)
+
+assert.equal(
+  getExampleStartingPath('react', 'start'),
+  'src/routes/__root.tsx',
+  'Start examples default to the root route file',
+)
+
+assert.equal(
+  getExampleStartingPath('react', 'router'),
+  'src/main.tsx',
+  'Router examples default to main.tsx when directory contents are unavailable',
+)
+
+console.log('repo-path tests passed')
diff --git a/tests/route-encoding.test.ts b/tests/route-encoding.test.ts
new file mode 100644
index 000000000..4ef53eea3
--- /dev/null
+++ b/tests/route-encoding.test.ts
@@ -0,0 +1,43 @@
+import assert from 'node:assert/strict'
+import {
+  decodePackageNameSlug,
+  encodePackageNameSlug,
+  getRowFieldId,
+} from '../src/utils/route-encoding'
+
+const packageNames = [
+  '@tanstack/react-query',
+  'tanstack__intent',
+  '@scope/name_with_underscores',
+  'plain-package',
+]
+
+for (const packageName of packageNames) {
+  assert.equal(
+    decodePackageNameSlug(encodePackageNameSlug(packageName)),
+    packageName,
+    `${packageName} package route slug round-trips`,
+  )
+}
+
+assert.equal(
+  decodePackageNameSlug(
+    encodeURIComponent(encodePackageNameSlug('@scope/pkg')),
+  ),
+  '@scope/pkg',
+  'double-encoded package route slugs decode for router/browser compatibility',
+)
+
+assert.equal(
+  getRowFieldId('moderation-note', '@scope/pkg', 'note'),
+  'moderation-note-scope-pkg-note',
+  'row-local ids normalize unsafe id characters',
+)
+
+assert.equal(
+  getRowFieldId('moderation-note', '', 'note'),
+  'moderation-note-item-note',
+  'row-local ids use stable fallback segments',
+)
+
+console.log('route-encoding tests passed')
diff --git a/tests/search-records.test.ts b/tests/search-records.test.ts
new file mode 100644
index 000000000..f25912306
--- /dev/null
+++ b/tests/search-records.test.ts
@@ -0,0 +1,72 @@
+import assert from 'node:assert/strict'
+import {
+  hasFrameworkPath,
+  shouldPersistFrameworkForHit,
+  type SearchHitFrameworkContext,
+} from '../src/utils/searchRecords'
+
+type ShouldPersistCase = {
+  name: string
+  hit: SearchHitFrameworkContext
+  expected: boolean
+}
+
+const shouldPersistCases: Array<ShouldPersistCase> = [
+  {
+    name: 'canonical framework hit persists framework before navigation',
+    hit: {
+      url: 'https://tanstack.com/form/latest/docs/overview#validation',
+      framework: 'solid',
+      routeStyle: 'canonical',
+    },
+    expected: true,
+  },
+  {
+    name: 'all-framework hit does not mutate preference',
+    hit: {
+      url: 'https://tanstack.com/form/latest/docs/overview#validation',
+      framework: 'all',
+      routeStyle: 'canonical',
+    },
+    expected: false,
+  },
+  {
+    name: 'framework path hit already carries framework in URL',
+    hit: {
+      url: 'https://tanstack.com/query/latest/docs/framework/solid/overview#validation',
+      framework: 'solid',
+    },
+    expected: false,
+  },
+  {
+    name: 'framework-path route style does not persist framework',
+    hit: {
+      url: 'https://tanstack.com/query/latest/docs/overview#validation',
+      framework: 'solid',
+      routeStyle: 'framework-path',
+    },
+    expected: false,
+  },
+]
+
+for (const testCase of shouldPersistCases) {
+  assert.equal(
+    shouldPersistFrameworkForHit(testCase.hit),
+    testCase.expected,
+    testCase.name,
+  )
+}
+
+assert.equal(
+  hasFrameworkPath('/query/latest/docs/framework/solid/overview#validation'),
+  true,
+  'relative framework path is detected',
+)
+
+assert.equal(
+  hasFrameworkPath('/form/latest/docs/overview#validation'),
+  false,
+  'canonical docs path is not treated as a framework path',
+)
+
+console.log('search-records tests passed')
diff --git a/tests/shopify-handle.test.ts b/tests/shopify-handle.test.ts
new file mode 100644
index 000000000..ca9427070
--- /dev/null
+++ b/tests/shopify-handle.test.ts
@@ -0,0 +1,30 @@
+import assert from 'node:assert/strict'
+import * as v from 'valibot'
+import { shopifyHandleSchema } from '../src/utils/shopify-handle'
+
+for (const handle of [
+  '3d-relax-snap-iphone®-case',
+  'clear-case-for-iphone®',
+  'tanstack-magsafe®-clear-case-for-iphone®',
+]) {
+  assert.equal(
+    v.safeParse(shopifyHandleSchema, handle).success,
+    true,
+    `Shopify handle ${handle} is accepted`,
+  )
+}
+
+for (const handle of [
+  'products/foo',
+  'foo?bar=baz',
+  'foo#details',
+  'foo bar',
+]) {
+  assert.equal(
+    v.safeParse(shopifyHandleSchema, handle).success,
+    false,
+    `invalid handle ${handle} is rejected`,
+  )
+}
+
+console.log('shopify-handle tests passed')
diff --git a/tests/shopify-id.test.ts b/tests/shopify-id.test.ts
new file mode 100644
index 000000000..eefd84125
--- /dev/null
+++ b/tests/shopify-id.test.ts
@@ -0,0 +1,40 @@
+import assert from 'node:assert/strict'
+import * as v from 'valibot'
+import {
+  shopifyCartLineIdSchema,
+  shopifyProductVariantIdSchema,
+} from '../src/utils/shopify-id'
+
+assert.equal(
+  v.safeParse(
+    shopifyCartLineIdSchema,
+    'gid://shopify/CartLine/cb211b52-6820-4519-831c-d87e1e7b7caf?cart=hWNDlJI3U21JDjTXJhpZBI01',
+  ).success,
+  true,
+  'cart line IDs with Shopify cart suffixes are accepted',
+)
+
+assert.equal(
+  v.safeParse(shopifyCartLineIdSchema, 'gid://shopify/ProductVariant/123')
+    .success,
+  false,
+  'cart line schema rejects other Shopify resource types',
+)
+
+assert.equal(
+  v.safeParse(shopifyProductVariantIdSchema, 'gid://shopify/ProductVariant/123')
+    .success,
+  true,
+  'product variant IDs are accepted',
+)
+
+assert.equal(
+  v.safeParse(
+    shopifyProductVariantIdSchema,
+    'gid://shopify/CartLine/1?cart=abc',
+  ).success,
+  false,
+  'product variant schema rejects cart line IDs',
+)
+
+console.log('shopify-id tests passed')
diff --git a/tests/smoke.ts b/tests/smoke.ts
deleted file mode 100644
index 702e4af26..000000000
--- a/tests/smoke.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * Lightweight smoke tests using fetch - no browser required
- * Verifies pages return 200 and contain expected content
- * Uses existing server on :3000 if available, otherwise starts one
- */
-
-import { spawn, type ChildProcess } from 'child_process'
-import { createServer } from 'net'
-
-const DEFAULT_URL = 'http://localhost:3000'
-
-type TestCase = {
-  name: string
-  path: string
-  expectedContent: string[]
-}
-
-const tests: TestCase[] = [
-  {
-    name: 'home page',
-    path: '/',
-    expectedContent: ['TanStack', '<html', '</html>'],
-  },
-  {
-    name: 'query docs',
-    path: '/query/latest/docs/framework/react/overview',
-    expectedContent: ['<html', '</html>', '<h1'],
-  },
-  {
-    name: 'router docs',
-    path: '/router/latest/docs/framework/react/overview',
-    expectedContent: ['<html', '</html>', '<h1'],
-  },
-  {
-    name: 'table docs',
-    path: '/table/latest/docs/introduction',
-    expectedContent: ['<html', '</html>', '<h1'],
-  },
-]
-
-async function getAvailablePort(): Promise<number> {
-  return new Promise((resolve, reject) => {
-    const server = createServer()
-    server.listen(0, () => {
-      const address = server.address()
-      if (address && typeof address === 'object') {
-        const port = address.port
-        server.close(() => resolve(port))
-      } else {
-        reject(new Error('Failed to get port'))
-      }
-    })
-    server.on('error', reject)
-  })
-}
-
-async function runTest(
-  baseUrl: string,
-  test: TestCase,
-): Promise<{ pass: boolean; error?: string }> {
-  try {
-    const url = `${baseUrl}${test.path}`
-    const response = await fetch(url, {
-      headers: { Accept: 'text/html' },
-    })
-
-    if (!response.ok) {
-      return { pass: false, error: `HTTP ${response.status}` }
-    }
-
-    const html = await response.text()
-
-    for (const content of test.expectedContent) {
-      if (!html.includes(content)) {
-        return { pass: false, error: `Missing expected content: "${content}"` }
-      }
-    }
-
-    return { pass: true }
-  } catch (err) {
-    return {
-      pass: false,
-      error: err instanceof Error ? err.message : String(err),
-    }
-  }
-}
-
-async function waitForServer(url: string, timeout = 60000): Promise<boolean> {
-  const start = Date.now()
-  while (Date.now() - start < timeout) {
-    try {
-      const res = await fetch(url, { method: 'HEAD' })
-      if (res.ok) return true
-    } catch {
-      // Server not ready yet
-    }
-    await new Promise((r) => setTimeout(r, 500))
-  }
-  return false
-}
-
-async function checkExistingServer(): Promise<boolean> {
-  try {
-    const res = await fetch(DEFAULT_URL)
-    if (!res.ok) return false
-    const html = await res.text()
-    return html.includes('TanStack')
-  } catch {
-    return false
-  }
-}
-
-async function main() {
-  let serverProcess: ChildProcess | null = null
-  let baseUrl = DEFAULT_URL
-
-  const existingServer = await checkExistingServer()
-  if (existingServer) {
-    console.log('Using existing server on :3000\n')
-  } else {
-    const port = await getAvailablePort()
-    baseUrl = `http://localhost:${port}`
-
-    console.log(`Starting dev server on port ${port}...`)
-    serverProcess = spawn('pnpm', ['dev'], {
-      stdio: 'ignore',
-      detached: true,
-      shell: true,
-      env: { ...process.env, PORT: String(port) },
-    })
-
-    const ready = await waitForServer(baseUrl)
-    if (!ready) {
-      console.error('Server failed to start within timeout')
-      serverProcess.kill()
-      process.exit(1)
-    }
-    console.log('Server ready\n')
-  }
-
-  console.log(`Running smoke tests against ${baseUrl}\n`)
-
-  let passed = 0
-  let failed = 0
-
-  for (const test of tests) {
-    const result = await runTest(baseUrl, test)
-    if (result.pass) {
-      console.log(`  ✓ ${test.name}`)
-      passed++
-    } else {
-      console.log(`  ✗ ${test.name}: ${result.error}`)
-      failed++
-    }
-  }
-
-  console.log(`\n${passed} passed, ${failed} failed\n`)
-
-  if (serverProcess) {
-    process.kill(-serverProcess.pid!, 'SIGTERM')
-  }
-
-  if (failed > 0) {
-    process.exit(1)
-  }
-}
-
-main()
diff --git a/tests/static-data-contracts.test.ts b/tests/static-data-contracts.test.ts
new file mode 100644
index 000000000..e04788853
--- /dev/null
+++ b/tests/static-data-contracts.test.ts
@@ -0,0 +1,55 @@
+import assert from 'node:assert/strict'
+import { allMaintainers } from '../src/libraries/maintainers'
+import {
+  isPublicLibrary,
+  libraries,
+  publicLibraries,
+} from '../src/libraries/libraries'
+
+const uuidPattern =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
+
+assert.deepEqual(
+  publicLibraries,
+  libraries.filter(isPublicLibrary),
+  'publicLibraries stays in sync with the public-library selector',
+)
+
+for (const library of publicLibraries) {
+  assert.equal(
+    library.to.startsWith('/'),
+    true,
+    `${library.id} public route must be an internal absolute path`,
+  )
+  assert.notEqual(
+    library.visible,
+    false,
+    `${library.id} hidden library should not be public`,
+  )
+}
+
+for (const library of libraries) {
+  if (!library.scarfId) {
+    continue
+  }
+
+  assert.match(
+    library.scarfId,
+    uuidPattern,
+    `${library.id} scarfId must be a UUID`,
+  )
+}
+
+for (const maintainer of allMaintainers) {
+  const socialEntries = Object.entries(maintainer.social ?? {})
+
+  for (const [field, value] of socialEntries) {
+    assert.match(
+      value,
+      /^https:\/\//,
+      `${maintainer.github} ${field} URL must use an explicit https:// URL`,
+    )
+  }
+}
+
+console.log('static data contract tests passed')
diff --git a/tsconfig.json b/tsconfig.json
index 61a4379e9..ebf57fa6b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,12 @@
 {
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", "tests", "scripts"],
+  "exclude": [
+    "node_modules",
+    "tests",
+    "scripts",
+    "packages",
+    "src/builder/features/*/files"
+  ],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
@@ -14,7 +20,6 @@
     "target": "ES2022",
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
     "paths": {
       "~/*": ["./src/*"],
       "content-collections": ["./.content-collections/generated"]
diff --git a/vite.config.ts b/vite.config.ts
index b0a7f0e5d..918ac94c3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,14 +1,144 @@
-import { sentryVitePlugin } from '@sentry/vite-plugin'
+import { sentryTanstackStart } from '@sentry/tanstackstart-react/vite'
 import { defineConfig } from 'vite'
+import type { PluginOption } from 'vite'
+import { redact } from '@tanstack/redact/vite'
 import contentCollections from '@content-collections/vite'
-import tsConfigPaths from 'vite-tsconfig-paths'
+import { devtools as tanstackDevtools } from '@tanstack/devtools-vite'
 import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import tailwindcss from '@tailwindcss/vite'
+import { cloudflare } from '@cloudflare/vite-plugin'
 import { analyzer } from 'vite-bundle-analyzer'
 import viteReact from '@vitejs/plugin-react'
-import netlify from '@netlify/vite-plugin-tanstack-start'
+import fs from 'node:fs'
+import { createRequire } from 'node:module'
+import os from 'node:os'
+import path from 'node:path'
+
+const nodeRequire = createRequire(import.meta.url)
+const isDev = process.env.NODE_ENV !== 'production'
+const takumiWasmRuntimePath = path.join(
+  path.dirname(path.dirname(nodeRequire.resolve('@takumi-rs/wasm/no-bundler'))),
+  'bundlers/workerd.js',
+)
+const shouldUseRedact = process.env.DISABLE_REDACT !== 'true'
+const localRedactPackageRoot = process.env.LOCAL_REDACT_PACKAGE_ROOT
+const shouldUseSentryPlugin =
+  process.env.NODE_ENV === 'production' &&
+  Boolean(process.env.SENTRY_AUTH_TOKEN)
+const shouldBuildSourcemaps =
+  shouldUseSentryPlugin || process.env.BUILD_SOURCEMAPS === 'true'
+const SITE_URL = 'https://tanstack.com'
+
+const localEnvPath = path.resolve(__dirname, '.env.local')
+const defaultCheckoutEnvDir = path.join(os.homedir(), 'GitHub/tanstack.com')
+const envDir =
+  !fs.existsSync(localEnvPath) &&
+  fs.existsSync(path.join(defaultCheckoutEnvDir, '.env.local'))
+    ? defaultCheckoutEnvDir
+    : __dirname
+
+function edgeTakumiWasmImport(): PluginOption {
+  return {
+    name: 'tanstack-edge-takumi-wasm-import',
+    enforce: 'pre',
+    transform(code, id) {
+      if (!id.includes('/node_modules/takumi-js/dist/render-')) return
+
+      return code.replace(
+        /import\(\s*\/\*\s*@vite-ignore\s*\*\/\s*['"]@takumi-rs\/wasm['"]\s*\)/g,
+        'import("@takumi-rs/wasm/no-bundler")',
+      )
+    },
+  }
+}
+
+// Runtime-specific `react-dom/server` variants aren't in @tanstack/redact/vite's
+// default alias map. Funnel them all to `@tanstack/redact/server` at the
+// top-level resolve so Workers get a single server implementation.
+const serverVariantAliases: Record<string, string> = {
+  'react-dom/server': '@tanstack/redact/server',
+  'react-dom/server.edge': '@tanstack/redact/server',
+  'react-dom/server.node': '@tanstack/redact/server',
+  'react-dom/server.bun': '@tanstack/redact/server',
+  'react-dom/server.browser': '@tanstack/redact/server',
+  'react-dom/static.edge': '@tanstack/redact/server',
+  'react-dom/static.node': '@tanstack/redact/server',
+  'react-dom/static': '@tanstack/redact/server',
+}
+
+const useSyncExternalStoreShimIndexAlias = {
+  find: /^use-sync-external-store\/shim\/index\.js$/,
+  replacement: '@tanstack/redact',
+}
+
+// These browser-facing packages are imported by SSR assets. Bundle them into
+// Worker server output so the runtime never loads their raw package entries.
+const serverBundledClientPackages = [
+  ...(shouldUseRedact ? ['@tanstack/redact'] : []),
+  /^@radix-ui\//,
+  '@kapaai/react-sdk',
+  '@tanstack/highlight',
+  '@tanstack/markdown',
+  '@tanstack/react-hotkeys',
+  '@tanstack/react-pacer',
+  '@tanstack/react-table',
+  'lucide-react',
+  'zustand',
+  /^@fingerprintjs\//,
+]
+
+const routerSsrPackages = [
+  '@tanstack/history',
+  '@tanstack/query-core',
+  '@tanstack/react-query',
+  '@tanstack/react-router',
+  '@tanstack/react-router-ssr-query',
+  '@tanstack/react-router/ssr',
+  '@tanstack/react-router/ssr/server',
+  '@tanstack/router-core',
+]
 
 export default defineConfig({
+  envDir,
+  define: {
+    __TANSTACK_ENABLE_SERVER_BUILDER_GENERATION__: JSON.stringify(true),
+    __TANSTACK_ENABLE_IMAGE_TRANSFORMATIONS__: JSON.stringify(true),
+    __TANSTACK_SITE_URL__: JSON.stringify(SITE_URL),
+  },
+  resolve: {
+    alias: [
+      {
+        find: '~',
+        replacement: path.resolve(__dirname, './src'),
+      },
+      {
+        find: 'ejs',
+        replacement: path.resolve(
+          __dirname,
+          './src/server/runtime/ejs-compat.server.ts',
+        ),
+      },
+      {
+        find: 'unicorn-magic',
+        replacement: 'unicorn-magic/node',
+      },
+      {
+        find: '@takumi-rs/wasm/auto',
+        replacement: takumiWasmRuntimePath,
+      },
+      ...(shouldUseRedact
+        ? [
+            useSyncExternalStoreShimIndexAlias,
+            ...Object.entries(serverVariantAliases).map(
+              ([find, replacement]) => ({
+                find,
+                replacement,
+              }),
+            ),
+          ]
+        : []),
+    ],
+  },
   server: {
     port: Number(process.env.PORT) || 3000,
     // WebContainer headers for /builder route (SharedArrayBuffer support)
@@ -16,72 +146,164 @@ export default defineConfig({
       'Cross-Origin-Opener-Policy': 'same-origin',
       'Cross-Origin-Embedder-Policy': 'require-corp',
     },
+    // Watch linked @tanstack/cli for hot reload during development
+    watch: isDev
+      ? {
+          ignored: ['!**/node_modules/@tanstack/cli/**'],
+        }
+      : undefined,
+  },
+  environments: {
+    ssr: {
+      optimizeDeps: {
+        exclude: ['@tanstack/create'],
+      },
+      resolve: {
+        noExternal: [...serverBundledClientPackages, ...routerSsrPackages],
+      },
+    },
   },
   ssr: {
-    external: [
-      'postgres',
-      // CTA packages use execa which has a broken unicorn-magic dependency
-      '@tanstack/cta-engine',
-      '@tanstack/cta-ui',
-      '@tanstack/cta-framework-react-cra',
+    external: [],
+    noExternal: [
+      '@uploadthing/react',
+      'file-selector',
+      'normalize-wheel',
+      '@tanstack/react-hotkeys',
+      '@webcontainer/api',
+      ...serverBundledClientPackages,
+      ...routerSsrPackages,
     ],
-    // Bundle cta-ui-base so Vite resolves its extensionless imports
-    noExternal: ['drizzle-orm', '@tanstack/cta-ui-base'],
   },
   optimizeDeps: {
     exclude: [
       'postgres',
       // CTA packages use execa which has a broken unicorn-magic dependency
-      '@tanstack/cta-engine',
-      '@tanstack/cta-ui',
-      '@tanstack/cta-framework-react-cra',
+      '@tanstack/create',
+      'discord-interactions',
+      // OG image generation: takumi ships a native .node binary
+      '@takumi-rs/core',
+      '@takumi-rs/image-response',
+      '@takumi-rs/helpers',
+      'takumi-js',
+      // Don't pre-bundle CLI so we always get fresh changes during dev
+      ...(isDev ? ['@tanstack/cli'] : []),
+      // Lucide can resolve differently across Vite environments when combined
+      // with our React shim. Excluding it keeps resolution deterministic.
+      'lucide-react',
     ],
   },
   build: {
-    sourcemap: process.env.NODE_ENV === 'production',
+    minify: 'esbuild',
+    sourcemap: shouldBuildSourcemaps,
+    reportCompressedSize: false,
     rollupOptions: {
-      external: (id) => {
-        // Externalize postgres from client bundle
-        return id.includes('postgres')
-      },
       output: {
         manualChunks: (id) => {
+          if (
+            id.includes('/node_modules/@tanstack/react-start') ||
+            id.includes('/node_modules/@tanstack/start-')
+          ) {
+            return 'tanstack-start'
+          }
+
+          if (
+            id.includes('/src/db/types.ts') ||
+            id.includes('/src/libraries/ids.ts')
+          ) {
+            return 'shared-constants'
+          }
+
+          if (
+            id.includes('/node_modules/@tanstack/react-router') ||
+            id.includes('/node_modules/@tanstack/router-core') ||
+            id.includes('/node_modules/@tanstack/history')
+          ) {
+            return 'tanstack-router'
+          }
+
+          if (
+            id.includes('/node_modules/@tanstack/react-query') ||
+            id.includes('/node_modules/@tanstack/query-core')
+          ) {
+            return 'tanstack-query'
+          }
+
           // Vendor chunk splitting for better caching
           if (id.includes('node_modules')) {
-            // Search-related deps (only loaded when search modal opens)
-            if (
-              id.includes('algoliasearch') ||
-              id.includes('instantsearch') ||
-              id.includes('react-instantsearch')
-            ) {
-              return 'search'
-            }
-            // Charting deps (only loaded on stats/admin pages)
-            if (
-              id.includes('@observablehq/plot') ||
-              (id.includes('d3') && !id.includes('d3-'))
-            ) {
-              return 'd3-charts'
-            }
-            // Visualization deps
-            if (id.includes('@visx/')) {
-              return 'visx'
-            }
             // Lucide icons (tree-shaken but still significant)
             if (id.includes('lucide-react')) {
               return 'icons'
             }
+
+            if (
+              id.includes('node_modules/react-dom/') ||
+              id.includes('node_modules/react/') ||
+              id.includes('node_modules/scheduler/')
+            ) {
+              return 'react'
+            }
           }
         },
       },
     },
   },
   plugins: [
-    tsConfigPaths({
-      projects: ['./tsconfig.json'],
+    edgeTakumiWasmImport(),
+    cloudflare({
+      viteEnvironment: { name: 'ssr' },
     }),
-
+    ...(shouldUseRedact
+      ? [
+          redact(
+            localRedactPackageRoot
+              ? {
+                  packageRoots: {
+                    '@tanstack/redact': localRedactPackageRoot,
+                  },
+                }
+              : undefined,
+          ),
+        ]
+      : []),
+    ...(isDev
+      ? [
+          tanstackDevtools({
+            // Console piping mirrors server logs into the browser and browser
+            // logs back into Vite. A streamed server error can recursively echo
+            // through that bridge and flood the dev server log.
+            consolePiping: {
+              enabled: false,
+            },
+            // react-instantsearch's <Configure> forwards all JSX props as
+            // Algolia search parameters. Injecting `data-tsd-source` as a
+            // JSX attr leaks it into the request and Algolia 400s with
+            // "Unknown parameter: data-tsd-source" — breaks site search in dev.
+            injectSource: {
+              enabled: true,
+              ignore: { components: ['Configure'] },
+            },
+          }),
+        ]
+      : []),
     tanstackStart({
+      server: {
+        build: {
+          inlineCss: false,
+        },
+      },
+      importProtection: {
+        behavior: 'error',
+        client: {
+          files: ['**/*.server.*', '**/server/**'],
+          specifiers: [
+            '@tanstack/react-start/server',
+            'uploadthing/server',
+            /^@modelcontextprotocol\/sdk\/server\//,
+            'discord-interactions',
+          ],
+        },
+      },
       router: {
         codeSplittingOptions: {
           defaultBehavior: [
@@ -96,17 +318,17 @@ export default defineConfig({
         },
       },
     }),
-    // Only enable Netlify plugin during build or when NETLIFY env is set
-    ...(process.env.NETLIFY || process.env.NODE_ENV === 'production'
-      ? [netlify()]
-      : []),
     viteReact(),
 
-    sentryVitePlugin({
-      authToken: process.env.SENTRY_AUTH_TOKEN,
-      org: 'tanstack',
-      project: 'tanstack-com',
-    }),
+    ...(shouldUseSentryPlugin
+      ? [
+          sentryTanstackStart({
+            authToken: process.env.SENTRY_AUTH_TOKEN,
+            org: 'tanstack',
+            project: 'tanstack-com',
+          }),
+        ]
+      : []),
     contentCollections(),
     tailwindcss(),
     ...(process.env.ANALYZE
diff --git a/wrangler.jsonc b/wrangler.jsonc
new file mode 100644
index 000000000..41d55dcdb
--- /dev/null
+++ b/wrangler.jsonc
@@ -0,0 +1,33 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "tanstack-com",
+  "account_id": "8da95258a9c70b54c3e2b374a0079106",
+  "main": "src/server.ts",
+  "compatibility_date": "2026-06-19",
+  "compatibility_flags": ["nodejs_compat"],
+  "observability": {
+    "enabled": true,
+  },
+  "cache": {
+    "enabled": false,
+  },
+  "limits": {
+    "cpu_ms": 300000,
+  },
+  "triggers": {
+    "crons": ["* * * * *", "0 9 * * *", "0 */6 * * *"],
+  },
+  "assets": {
+    "binding": "ASSETS",
+  },
+  "r2_buckets": [
+    {
+      "binding": "GITHUB_CONTENT_CACHE",
+      "bucket_name": "tanstack-github-content-cache",
+    },
+    {
+      "binding": "NPM_DOWNLOAD_CACHE",
+      "bucket_name": "tanstack-npm-download-cache",
+    },
+  ],
+}