feat: add focused framework filter toggle

packages/docs/src/components/DependencyStats.astro

@@ -8,6 +8,7 @@ import {
 } from '../lib/utils'
 import '../styles/shared.css'
 import ComparisonBarChart from './ComparisonBarChart.astro'
+import FocusedToggle from './FocusedToggle.astro'
 
 const devtimeEntries = await getCollection('devtime')
 const runtimeEntries = await getCollection('runtime')
@@ -67,6 +68,8 @@ const buildSizeProdData = validForCharts.map((f) => ({
         our methodology and testing process.
       </p>
 
+      <FocusedToggle />
+
       <h2>Dev Time Performance</h2>
 
       <p class="methodology">
@@ -79,7 +82,7 @@ const buildSizeProdData = validForCharts.map((f) => ({
           <thead>
             <tr>
               <th scope="col">Framework</th>
-              <th scope="col">Prod Deps</th>
+              <th scope="col"></th>
               <th scope="col">Dev Deps</th>
               <th scope="col">Size</th>
               <th scope="col">Size (Prod Only)</th>
@@ -89,7 +92,7 @@ const buildSizeProdData = validForCharts.map((f) => ({
           <tbody>
             {
               starterStats.map((framework) => (
-                <tr>
+                <tr data-focused={framework.isFocused ? 'true' : 'false'}>
                   <td class="framework-name">
                     <a
                       href={`/framework/${getFrameworkSlug(framework.package)}`}
@@ -194,7 +197,7 @@ const buildSizeProdData = validForCharts.map((f) => ({
           <tbody>
             {
               starterStats.map((framework) => (
-                <tr>
+                <tr data-focused={framework.isFocused ? 'true' : 'false'}>
                   <td class="framework-name">
                     <a
                       href={`/framework/${getFrameworkSlug(framework.package)}`}
@@ -298,7 +301,7 @@ const buildSizeProdData = validForCharts.map((f) => ({
           <tbody>
             {
               ssrStats.map((framework) => (
-                <tr>
+                <tr data-focused={framework.isFocused ? 'true' : 'false'}>
                   <td class="framework-name">
                     {framework.package === 'app-baseline-html' ? (
                       <span>{framework.name}</span>

packages/docs/src/components/FocusedToggle.astro

@@ -0,0 +1,107 @@
+---
+
+---
+
+<div class="filter-container">
+  <label class="toggle-label" for="focused-toggle">
+    <div class="toggle-switch">
+      <input type="checkbox" id="focused-toggle" checked />
+      <span class="toggle-slider"></span>
+    </div>
+    <span class="toggle-text">Show focused frameworks only</span>
+  </label>
+</div>
+
+<style>
+  .filter-container {
+    margin-bottom: 2em;
+    display: flex;
+    align-items: center;
+  }
+
+  .toggle-label {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+  }
+
+  .toggle-switch {
+    position: relative;
+    width: 44px;
+    height: 24px;
+  }
+
+  .toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .toggle-slider {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--ft-border);
+    transition: 0.3s;
+    border-radius: 24px;
+  }
+
+  .toggle-slider:before {
+    position: absolute;
+    content: '';
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: var(--ft-text);
+    transition: 0.3s;
+    border-radius: 50%;
+  }
+
+  input:checked + .toggle-slider {
+    background-color: var(--ft-accent);
+  }
+
+  input:checked + .toggle-slider:before {
+    transform: translateX(20px);
+    background-color: var(--ft-bg);
+  }
+
+  input:focus-visible + .toggle-slider {
+    outline: 2px solid var(--ft-text);
+    outline-offset: 2px;
+  }
+
+  .toggle-text {
+    color: var(--ft-text);
+    font-size: 15px;
+    font-weight: 500;
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const toggle = document.getElementById(
+      'focused-toggle',
+    ) as HTMLInputElement | null
+    const unfocusedRows = document.querySelectorAll<HTMLElement>(
+      'tr[data-focused="false"]',
+    )
+    const updateVisibility = (isFocusedOnly: boolean) => {
+      unfocusedRows.forEach((row) => {
+        row.style.display = isFocusedOnly ? 'none' : ''
+      })
+    }
+
+    if (toggle) {
+      updateVisibility(toggle.checked)
+      toggle.addEventListener('change', (e) => {
+        const target = e.target as HTMLInputElement
+        updateVisibility(target.checked)
+      })
+    }
+  })
+</script>

packages/docs/src/content/config.ts

@@ -12,6 +12,7 @@ const devtimeCollection = defineCollection({
     name: z.string(),
     type: z.string(),
     package: z.string(),
+    isFocused: z.boolean(),
     order: z.number(),
     prodDependencies: z.number(),
     devDependencies: z.number(),
@@ -33,6 +34,7 @@ const runtimeCollection = defineCollection({
     name: z.string(),
     type: z.string(),
     package: z.string(),
+    isFocused: z.boolean(),
     order: z.number(),
     ssrOpsPerSec: z.number(),
     ssrAvgLatencyMs: z.number(),

packages/docs/src/content/devtime/starter-astro.json

@@ -1,6 +1,7 @@
 {
   "name": "Astro",
   "package": "starter-astro",
+  "isFocused": true,
   "type": "starter-kit",
   "prodDependencies": 1,
   "devDependencies": 2,

packages/docs/src/content/devtime/starter-mastro.json

@@ -1,6 +1,7 @@
 {
   "name": "Mastro",
   "package": "starter-mastro",
+  "isFocused": false,
   "type": "starter-kit",
   "prodDependencies": 2,
   "devDependencies": 2,

packages/docs/src/content/devtime/starter-next-js.json

@@ -4,6 +4,7 @@
   "prodDependencies": 3,
   "devDependencies": 6,
   "package": "starter-next-js",
+  "isFocused": true,
   "installTimeMs": 7166,
   "coldBuildTimeMs": 7159,
   "warmBuildTimeMs": 7159,

packages/docs/src/content/devtime/starter-nuxt.json

@@ -4,6 +4,7 @@
   "prodDependencies": 3,
   "devDependencies": 2,
   "package": "starter-nuxt",
+  "isFocused": true,
   "installTimeMs": 7579,
   "coldBuildTimeMs": 6962,
   "warmBuildTimeMs": 6545,

packages/docs/src/content/devtime/starter-react-router.json

@@ -4,6 +4,7 @@
   "prodDependencies": 6,
   "devDependencies": 8,
   "package": "starter-react-router",
+  "isFocused": true,
   "installTimeMs": 2687,
   "coldBuildTimeMs": 2747,
   "warmBuildTimeMs": 2746,

packages/docs/src/content/devtime/starter-solid-start.json

@@ -1,6 +1,7 @@
 {
   "name": "SolidStart",
   "package": "starter-solid-start",
+  "isFocused": true,
   "type": "starter-kit",
   "prodDependencies": 5,
   "devDependencies": 0,

packages/docs/src/content/devtime/starter-sveltekit.json

@@ -4,6 +4,7 @@
   "prodDependencies": 0,
   "devDependencies": 7,
   "package": "starter-sveltekit",
+  "isFocused": true,
   "installTimeMs": 2878,
   "coldBuildTimeMs": 4220,
   "warmBuildTimeMs": 3910,

packages/docs/src/content/devtime/starter-tanstack-start-react.json

@@ -4,6 +4,7 @@
   "prodDependencies": 13,
   "devDependencies": 11,
   "package": "starter-tanstack-start-react",
+  "isFocused": true,
   "installTimeMs": 4572,
   "coldBuildTimeMs": 9098,
   "warmBuildTimeMs": 8359,

packages/docs/src/content/runtime/app-astro.json

@@ -1,6 +1,7 @@
 {
   "name": "Astro",
   "package": "app-astro",
+  "isFocused": true,
   "type": "ssr-app",
   "ssrOpsPerSec": 371,
   "ssrAvgLatencyMs": 2.698,

packages/docs/src/content/runtime/app-baseline-html.json

@@ -2,6 +2,7 @@
   "name": "Baseline HTML",
   "package": "app-baseline-html",
   "type": "ssr-app",
+  "isFocused": false,
   "ssrOpsPerSec": 683,
   "ssrAvgLatencyMs": 1.465,
   "ssrSamples": 6826,

packages/docs/src/content/runtime/app-mastro.json

@@ -2,6 +2,7 @@
   "name": "Mastro",
   "package": "app-mastro",
   "type": "ssr-app",
+  "isFocused": false,
   "timingMeasuredAt": "2026-02-20T12:30:44.006Z",
   "runner": "ubuntu-latest",
   "ssrOpsPerSec": 336,

packages/docs/src/content/runtime/app-next-js.json

@@ -1,6 +1,7 @@
 {
   "name": "Next.js",
   "package": "app-next-js",
+  "isFocused": true,
   "type": "ssr-app",
   "timingMeasuredAt": "2026-02-20T12:30:44.006Z",
   "runner": "ubuntu-latest",

packages/docs/src/content/runtime/app-nuxt.json

@@ -1,6 +1,7 @@
 {
   "name": "Nuxt",
   "package": "app-nuxt",
+  "isFocused": true,
   "type": "ssr-app",
   "ssrOpsPerSec": 235,
   "ssrAvgLatencyMs": 4.263,

packages/docs/src/content/runtime/app-react-router.json

@@ -1,6 +1,7 @@
 {
   "name": "React Router",
   "package": "app-react-router",
+  "isFocused": true,
   "type": "ssr-app",
   "timingMeasuredAt": "2026-02-20T12:30:44.006Z",
   "runner": "ubuntu-latest",

packages/docs/src/content/runtime/app-solid-start.json

@@ -1,6 +1,7 @@
 {
   "name": "SolidStart",
   "package": "app-solid-start",
+  "isFocused": true,
   "type": "ssr-app",
   "timingMeasuredAt": "2026-02-20T12:30:44.006Z",
   "runner": "ubuntu-latest",

packages/docs/src/content/runtime/app-sveltekit.json

@@ -1,6 +1,7 @@
 {
   "name": "SvelteKit",
   "package": "app-sveltekit",
+  "isFocused": true,
   "type": "ssr-app",
   "timingMeasuredAt": "2026-02-20T12:30:44.006Z",
   "runner": "ubuntu-latest",

packages/docs/src/content/runtime/app-tanstack-start-react.json

@@ -1,6 +1,7 @@
 {
   "name": "TanStack Start",
   "package": "app-tanstack-start-react",
+  "isFocused": true,
   "type": "ssr-app",
   "timingMeasuredAt": "2026-02-20T12:30:44.006Z",
   "runner": "ubuntu-latest",

packages/stats-generator/src/collect-stats.ts

@@ -35,6 +35,7 @@ async function processStarter(framework: FrameworkConfig, order: number) {
     name: displayName,
     package: pkgDir,
     type: 'starter-kit',
+    isFocused: framework.focusedFramework,
     order,
     ...dependencyStats,
     ...ciStats,
@@ -57,6 +58,7 @@ async function processApp(framework: FrameworkConfig, order: number) {
     name: displayName,
     package: pkgDir,
     type: 'ssr-app',
+    isFocused: framework.focusedFramework,
     order,
     ...ciStats,
   }

packages/stats-generator/src/types.ts

@@ -21,6 +21,7 @@ export interface FrameworkConfig {
   name: string
   displayName: string
   frameworkPackage: string
+  focusedFramework?: boolean
   starter?: TestConfig
   app?: TestConfig
 }
@@ -77,6 +78,7 @@ export interface FrameworkStats extends CIStats {
   ssrSamples?: number
   ssrBodySizeKb?: number
   ssrDuplicationFactor?: number
+  isFocused?: boolean
 }
 
 export interface PackageJson {