create-top-secret-starter 0.8.3 → 0.11.0

package/backend-overlay/remove.json

@@ -1,15 +1,18 @@
 [
   "src/mocks",
+  "src/api/notes/schema.ts",
+  "src/api/notes/notes.test.ts",
+  "src/routes/_authenticated/notes",
   "src/api/auth/schema.ts",
   "src/api/auth/session-store.ts",
   "src/api/auth/session-store.test.ts",
   "src/api/auth/auth-router-sync.ts",
+  "src/api/auth/auth-router-sync.test.ts",
   "src/test/mock-backend.ts",
   "src/api/auth/auth.test.ts",
   "src/api/refresh.test.ts",
   "src/lib/single-flight.ts",
   "src/lib/single-flight.test.ts",
   "e2e",
-  "playwright.config.ts",
-  "tsconfig.e2e.json"
+  "playwright.config.ts"
 ]

package/backend-overlay/web/src/lib/{query-client.test.ts → query-client.test.tsx}

@@ -1,20 +1,21 @@
 import { EdenFetchError } from '@elysia/eden'
+import { act, render, screen } from '@testing-library/react'
 import { beforeEach, expect, it, vi } from 'vitest'
 
-import { queryClient } from '@/lib/query-client'
+import { Toaster } from '@/components/ui/toast'
 
-vi.mock('sonner', () => ({ toast: { error: vi.fn() } }))
-const { toast } = await import('sonner')
+import { queryClient } from '@/lib/query-client'
 
 const httpError = (status: number) => new EdenFetchError(status, { message: `HTTP ${status}` })
 
 beforeEach(() => {
-  vi.mocked(toast.error).mockClear()
   queryClient.clear()
+  render(<Toaster />)
 })
 
-// notifyError imports sonner dynamically, so the toast lands a tick later
-const flushToasts = () => vi.dynamicImportSettled()
+const flushToasts = () => act(() => new Promise(resolve => setTimeout(resolve)))
+
+const toasts = () => screen.queryAllByRole('dialog')
 
 it('stays silent when a query fails with no data on screen', async () => {
   await queryClient
@@ -27,7 +28,7 @@ it('stays silent when a query fails with no data on screen', async () => {
   await flushToasts()
 
   // the route's error component already tells the user; a toast would double up
-  expect(toast.error).not.toHaveBeenCalled()
+  expect(toasts()).toHaveLength(0)
 })
 
 it('toasts when a background refetch fails over data already shown', async () => {
@@ -43,8 +44,8 @@ it('toasts when a background refetch fails over data already shown', async () =>
     .catch(() => {})
   await flushToasts()
 
-  expect(toast.error).toHaveBeenCalledTimes(1)
-  expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('500'))
+  expect(toasts()).toHaveLength(1)
+  expect(toasts()[0]).toHaveTextContent('500')
 })
 
 it('always toasts a failed mutation', async () => {
@@ -55,8 +56,8 @@ it('always toasts a failed mutation', async () => {
     .catch(() => {})
   await flushToasts()
 
-  expect(toast.error).toHaveBeenCalledTimes(1)
-  expect(toast.error).toHaveBeenCalledWith('nope')
+  expect(toasts()).toHaveLength(1)
+  expect(toasts()[0]).toHaveTextContent('nope')
 })
 
 it('does not retry a 4xx query', async () => {

package/backend-overlay/web/src/lib/query-client.ts

@@ -1,6 +1,8 @@
 import { EdenFetchError } from '@elysia/eden'
 import { MutationCache, QueryCache, QueryClient } from '@tanstack/react-query'
 
+import { toast } from '@/components/ui/toast'
+
 const isClientError = (error: unknown) =>
   error instanceof EdenFetchError && error.status >= 400 && error.status < 500
 
@@ -13,10 +15,8 @@ const getErrorMessage = (error: unknown) => {
   return error instanceof Error ? error.message : 'Something went wrong'
 }
 
-// Load toast code only when an error needs notification.
 const notifyError = (error: unknown) => {
-  const message = getErrorMessage(error)
-  void import('sonner').then(({ toast }) => toast.error(message))
+  toast.add({ type: 'error', title: getErrorMessage(error) })
 }
 
 export const queryClient = new QueryClient({

package/backend-overlay/web/src/routes/_authenticated/index.tsx

@@ -26,7 +26,7 @@ function NotesPage() {
   }
 
   return (
-    <div className='w-full max-w-md space-y-4'>
+    <main className='w-full max-w-md space-y-4'>
       <h1 className='text-2xl font-semibold'>PLACEHOLDER</h1>
 
       <form onSubmit={onSubmit} className='flex gap-2'>
@@ -60,6 +60,6 @@ function NotesPage() {
           </li>
         ))}
       </ul>
-    </div>
+    </main>
   )
 }

package/backend-overlay/web/src/routes/_authenticated.tsx

@@ -3,6 +3,7 @@ import { LogOut } from 'lucide-react'
 
 import { useSession, useSignOut } from '@/api/auth'
 import { requireSession } from '@/api/auth/guards'
+import { ThemeToggle } from '@/components/theme-toggle'
 import { Button } from '@/components/ui/button'
 
 export const Route = createFileRoute('/_authenticated')({
@@ -21,17 +22,20 @@ function AuthenticatedLayout() {
   }
 
   return (
-    <div className='flex min-h-svh flex-col'>
+    <>
       <header className='flex h-14 items-center justify-between border-b px-6'>
-        <span className='text-muted-foreground text-sm'>{session?.user.email}</span>
-        <Button variant='outline' size='sm' onClick={onSignOut} disabled={signOut.isPending}>
-          <LogOut data-icon='inline-start' />
-          Sign out
-        </Button>
+        <div className='flex items-center gap-4'>
+          <span className='text-muted-foreground text-sm'>{session?.user.email}</span>
+          <ThemeToggle />
+          <Button variant='outline' size='sm' onClick={onSignOut} disabled={signOut.isPending}>
+            <LogOut data-icon='inline-start' />
+            Sign out
+          </Button>
+        </div>
       </header>
-      <main className='flex flex-1 items-center justify-center p-6'>
+      <div className='flex flex-1 items-center justify-center p-6'>
         <Outlet />
-      </main>
-    </div>
+      </div>
+    </>
   )
 }

package/backend-overlay/web-router/src/routes/sign-in.tsx

@@ -47,7 +47,7 @@ function SignInPage() {
   })
 
   return (
-    <main className='flex min-h-svh items-center justify-center p-6'>
+    <main className='flex flex-1 items-center justify-center p-6'>
       <form onSubmit={onSubmit} className='w-full max-w-sm'>
         <FieldGroup>
           <h1 className='text-center text-xl font-semibold'>Sign in</h1>

package/backend-overlay/web-router/src/routes/sign-up.tsx

@@ -50,7 +50,7 @@ function SignUpPage() {
   })
 
   return (
-    <main className='flex min-h-svh items-center justify-center p-6'>
+    <main className='flex flex-1 items-center justify-center p-6'>
       <form onSubmit={onSubmit} className='w-full max-w-sm'>
         <FieldGroup>
           <h1 className='text-center text-xl font-semibold'>Create an account</h1>

package/backend-overlay/web-start/src/routes/sign-in.tsx

@@ -51,7 +51,7 @@ function SignInPage() {
   })
 
   return (
-    <main className='flex min-h-svh items-center justify-center p-6'>
+    <main className='flex flex-1 items-center justify-center p-6'>
       <form onSubmit={onSubmit} className='w-full max-w-sm'>
         <FieldGroup>
           <h1 className='text-center text-xl font-semibold'>Sign in</h1>

package/backend-overlay/web-start/src/routes/sign-up.tsx

@@ -54,7 +54,7 @@ function SignUpPage() {
   })
 
   return (
-    <main className='flex min-h-svh items-center justify-center p-6'>
+    <main className='flex flex-1 items-center justify-center p-6'>
       <form onSubmit={onSubmit} className='w-full max-w-sm'>
         <FieldGroup>
           <h1 className='text-center text-xl font-semibold'>Create an account</h1>

package/github-config.js

@@ -73,8 +73,18 @@ ${
 ${setup}
       - name: Install dependencies
         run: ${install}
+      - name: Cache Playwright browsers
+        uses: actions/cache@v6
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-chromium-webkit-\${{ runner.os }}-\${{ hashFiles('${lockfile}') }}
       - name: Install browsers
         run: ${exec} playwright install --with-deps chromium webkit
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+      - name: Install browser system deps
+        run: ${exec} playwright install-deps chromium webkit
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
       - name: End-to-end tests
         run: ${pm} run test:e2e
 `

package/index.js

@@ -317,10 +317,14 @@ const applyBackendOverlay = () => {
     delete pkg.trustedDependencies
   })
 
-  // textual, not a JSON round-trip: JSON.stringify re-expands `paths` and fails format:check
-  substitute(path.join(webDir, 'tsconfig.json'), [
-    [',\n    {\n      "path": "./tsconfig.e2e.json"\n    }', '']
-  ])
+  // the e2e suite is gone with the mock backend
+  const tsconfigNode = path.join(webDir, 'tsconfig.node.json')
+  fs.writeFileSync(
+    tsconfigNode,
+    fs
+      .readFileSync(tsconfigNode, 'utf8')
+      .replace(/"include": \[[^\]]*\]/, '"include": ["vite.config.ts"]')
+  )
 
   const apiDir = path.join(targetDir, 'apps', 'api')
   fs.cpSync(path.join(cliRoot, 'templates', 'template-api'), apiDir, { recursive: true })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-top-secret-starter",
-  "version": "0.8.3",
+  "version": "0.11.0",
   "description": "Scaffold a Vite + React 19 + TypeScript + shadcn starter with TanStack Router",
   "keywords": [
     "create",

package/templates/template-router/.claude/skills/project-conventions/SKILL.md

@@ -5,16 +5,21 @@ description: How to add a feature to this codebase — API modules, forms, route
 
 # Project conventions
 
-Loaded on demand. Invariants here are **enforced** by `scripts/check-conventions.mjs`;
+Loaded on demand. Invariants here are **enforced** by oxlint `no-restricted-*` overrides;
 the rest is the shape to follow.
 
 ## New API module
 
-Colocate under `src/api/<feature>/`, mirroring `src/api/auth/`:
+Colocate under `src/api/<feature>/`. **`src/api/notes/` is the reference**: list,
+detail, create and delete over a plain REST resource, with the routes under
+`src/routes/_authenticated/notes/`. `src/api/auth/` is the special case (session, no cache).
 
 - `schema.ts` — zod schemas. **Required**: the conventions check fails without it.
 - data functions using the `api` instance from `src/api/index.ts`
 - `use<Thing>` hooks (Query/Mutation) in the same folder
+- `xQuery` as `queryOptions` (`notesQuery`, `noteQuery(id)`), detail keys nested under the
+  list key. Mutations invalidate the list in `onSuccess`; after a delete, `removeQueries` the
+  detail entry instead of invalidating it — a refetch would 404 into a toast.
 
 Validate at the boundary, always: `.then(data => Schema.parse(data))`. Never trust
 raw JSON, even from your own backend — a changed contract must fail loudly at the
@@ -22,7 +27,8 @@ edge, not produce `undefined` three components deep.
 
 Never call `fetch` directly. The two ky instances exist for a reason:
 
-- `api` — attaches the bearer token; on 401 refreshes once and retries
+- `api` — attaches the bearer token; refreshes ahead of a request when the session's
+  optional `expiresAt` is within 30 s, and on a 401 refreshes once and retries
 - `publicApi` — no auth header and no refresh hook: sign-in and the refresh call itself
 
 Refresh is wrapped in `singleFlight` (`src/lib/single-flight.ts`) so concurrent
@@ -59,8 +65,8 @@ on mount and therefore also listens for `storage`.
 ## Forms
 
 react-hook-form + `standardSchemaResolver` (zod/mini schemas), with shadcn `Field*`
-primitives. `routes/sign-in.tsx`
-is the reference implementation — read it before writing a new form.
+primitives. `routes/sign-in.tsx` is the reference implementation;
+`routes/_authenticated/notes/index.tsx` shows a form that feeds a mutation and resets.
 
 Reuse the request schema from the feature's `schema.ts` as the form schema where the
 shapes match; two schemas for one payload drift apart.
@@ -74,7 +80,9 @@ File-based under `src/routes/`.
 - `-`-prefixed files (`-error.tsx`, `-not-found.tsx`) are non-route modules
 - Router context carries `queryClient`; auto code-splitting is on
 - Data a route needs on first paint: `loader: ({ context }) => context.queryClient.query({ ...xQuery, staleTime: 'static' })`
-  plus `useSuspenseQuery(xQuery)` in the component. `_authenticated/index.tsx` is the reference.
+  plus `useSuspenseQuery(xQuery)` in the component. `_authenticated/notes/index.tsx` is the reference.
+- Detail routes (`$noteId.tsx`) turn a 404 from the loader into `throw notFound()` so the
+  not-found page renders instead of the error page.
 - Sign-in/out mutations touch neither the router nor the Query cache — `auth-router-sync` reacts to the session change
 
 ## UI primitives
@@ -107,37 +115,6 @@ Put error-handling changes there, not in individual hooks.
 
 On (`babel-plugin-react-compiler`). No manual `useMemo` / `useCallback` — enforced.
 
-## Backend variant (`apps/api`, `create-cli/backend-overlay`)
-
-The rules above describe the SPA-only variant. When the backend is on:
-
-- HTTP goes through Eden (`treaty<App>` in `src/api/index.ts`), types come from
-  `apps/api/src/app.ts` — no `schema.ts`, no ky.
-- Auth is Better Auth cookie sessions via `better-auth/react`. No `session-store`,
-  no refresh, no `auth-router-sync`; guards `await authClient.getSession()` in
-  `beforeLoad` and mutations call `router.invalidate()` on success.
-- New server resource: table in `apps/api/src/db/schema.ts` → `db:generate` → a
-  feature folder `apps/api/src/modules/<feature>/` → React Query hooks over
-  `api.<resource>` (`backend-overlay/web/src/api/notes`). `modules/notes/` is the
-  reference; it follows Elysia's feature-based layout:
-
-  | File         | Holds                                                                 |
-  | ------------ | --------------------------------------------------------------------- |
-  | `model.ts`   | `t` schemas (body, params, response) + types via `UnwrapSchema`       |
-  | `service.ts` | `abstract class` with static methods; takes `db`/ids, never `Context` |
-  | `index.ts`   | the Elysia controller — routing, `{ auth: true }`, `response` schemas |
-
-  One Elysia instance is one controller: don't pass `Context` into a class, and don't
-  type handlers against it. `modules/auth/service.ts` is the exception the docs allow —
-  a request-dependent service, so it is an Elysia instance with a `macro` and a `name`.
-
-- `scripts/check-conventions.mjs` scans this repo's `src/` and `e2e/` only, so neither
-  `apps/api/` nor the overlay is covered — including the rule that every
-  `src/api/<feature>/` has a `schema.ts`, which the Eden variant deliberately drops.
-  Generated projects don't ship the script at all. Review those by hand.
-
 ## Mock backend
 
-`src/mocks/server.ts` patches global `fetch` for `/api/*`, dev-only under
-`VITE_ENABLE_MOCKS`. Seed sign-in `demo@example.com` / `demo1234`. `bun run graduate <name>`
-removes it along with the demo account (see root `CLAUDE.md`, Starter state).
+`src/mocks/server.ts` patches global `fetch` for `/api/*` in dev builds only. Seed sign-in `demo@example.com` / `demo1234`. Drop it: delete `src/mocks/`, `src/test/mock-backend.ts` and the DEV branch that installs it.

package/templates/template-router/.claude/skills/shadcn/SKILL.md

@@ -64,7 +64,7 @@ These rules are **always enforced**. Each links to a file with Incorrect/Correct
 - **Use existing components before custom markup.** Check if a component exists before writing a styled `div`.
 - **Callouts use `Alert`.** Don't build custom styled divs.
 - **Empty states use `Empty`.** Don't build custom empty state markup.
-- **Toast via `sonner`.** Use `toast()` from `sonner`.
+- **Toast via `toast.add()`** from `@/components/ui/toast` (Base UI).
 - **Use `Separator`** instead of `<hr>` or `<div className="border-t">`.
 - **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs.
 - **Use `Badge`** instead of custom styled spans.
@@ -135,7 +135,7 @@ These are the most common patterns that differentiate correct shadcn/ui code. Fo
 | Data display               | `Table`, `Card`, `Badge`, `Avatar`                                                                  |
 | Navigation                 | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination`                                     |
 | Overlays                   | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation)       |
-| Feedback                   | `sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner`                                        |
+| Feedback                   | `Toast`, `Alert` , `Progress`, `Skeleton`, `Spinner`                                                |
 | Command palette            | `Command` inside `Dialog`                                                                           |
 | Charts                     | `Chart` (wraps Recharts)                                                                            |
 | Layout                     | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible`                          |

package/templates/template-router/.claude/skills/shadcn/rules/composition.md

@@ -5,7 +5,7 @@
 - Items always inside their Group component
 - Callouts use Alert
 - Empty states use Empty component
-- Toast notifications use sonner
+- Toast notifications use the Base UI toast manager
 - Choosing between overlay components
 - Dialog, Sheet, and Drawer always need a Title
 - Card structure
@@ -90,15 +90,16 @@ Chat components nest in a fixed order (`MessageScrollerProvider` → `MessageScr
 
 ---
 
-## Toast notifications use sonner
+## Toast notifications use the Base UI toast manager
 
 ```tsx
-import { toast } from 'sonner'
+import { toast } from '@/components/ui/toast'
 
-toast.success('Changes saved.')
-toast.error('Something went wrong.')
-toast('File deleted.', {
-  action: { label: 'Undo', onClick: () => undoDelete() }
+toast.add({ type: 'success', title: 'Changes saved.' })
+toast.add({ type: 'error', title: 'Something went wrong.' })
+toast.add({
+  title: 'File deleted.',
+  actionProps: { children: 'Undo', onClick: () => undoDelete() }
 })
 ```
 

package/templates/template-router/.env.example

@@ -1,3 +1 @@
 VITE_API_URL=/api/
-# set to false to hit a real API in dev; mocks never ship in a production build
-VITE_ENABLE_MOCKS=true

package/templates/template-router/.mcp.json

@@ -2,11 +2,11 @@
   "mcpServers": {
     "playwright": {
       "command": "bunx",
-      "args": ["@playwright/mcp@latest"]
+      "args": ["@playwright/mcp@0.0.80"]
     },
     "context7": {
       "command": "bunx",
-      "args": ["@upstash/context7-mcp"]
+      "args": ["@upstash/context7-mcp@4.0.7"]
     }
   }
 }

package/templates/template-router/.oxlintrc.json

@@ -51,5 +51,75 @@
     ],
     "vitest/require-mock-type-parameters": "off",
     "vitest/require-to-throw-message": "off"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["src/**/*.{ts,tsx}"],
+      "rules": {
+        "no-restricted-globals": [
+          "error",
+          {
+            "name": "fetch",
+            "message": "Use the `api` ky instance from src/api: it owns the bearer header and the single-flight token refresh."
+          },
+          {
+            "name": "localStorage",
+            "message": "Persisted state goes through createStorageStore (src/lib/storage-store.ts): it owns decoding and cross-tab sync."
+          }
+        ],
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "zod",
+                "message": "Import from 'zod/mini'. Mixing the two ships both builds (+15.8 kB gzip). For forms use standardSchemaResolver."
+              },
+              {
+                "name": "react",
+                "importNames": ["useMemo", "useCallback"],
+                "message": "React Compiler is on: manual memoization is noise."
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["src/mocks/**"],
+      "rules": {
+        "no-restricted-globals": [
+          "error",
+          {
+            "name": "localStorage",
+            "message": "Persisted state goes through createStorageStore (src/lib/storage-store.ts): it owns decoding and cross-tab sync."
+          }
+        ]
+      }
+    },
+    {
+      "files": ["src/lib/storage-store.ts", "src/**/*.test.{ts,tsx}"],
+      "rules": {
+        "no-restricted-globals": [
+          "error",
+          {
+            "name": "fetch",
+            "message": "Use the `api` ky instance from src/api: it owns the bearer header and the single-flight token refresh."
+          }
+        ]
+      }
+    },
+    {
+      "files": ["src/api/**/*.test.ts"],
+      "rules": {
+        "no-restricted-globals": "off"
+      }
+    },
+    {
+      "files": ["src/components/ui/**"],
+      "rules": {
+        "no-restricted-imports": "off"
+      }
+    }
+  ]
 }

package/templates/template-router/CLAUDE.md

@@ -21,7 +21,7 @@ Comments are a last resort, for genuinely non-obvious cases. Keep them to one sh
 
 Don't write tests that merely restate the implementation — zero confidence value.
 
-- Mock only at system boundaries (HTTP via the mock server or `fetch`, `sonner`, time, storage events). Never mock our own modules.
+- Mock only at system boundaries (HTTP via the mock server or `fetch`, time, storage events). Never mock our own modules.
 - Verify through the public interface, not a side channel: reload the store and call `get()`, don't read `localStorage` directly. A test that breaks on a behaviour-preserving refactor is wrong.
 - Call counts are not a result — unless the count _is_ the contract (one refresh per burst of 401s, retry limit).
 - Expected values are independent literals, never recomputed the way the code does it.
@@ -48,13 +48,13 @@ For how to add an API module, a form, a route or a UI primitive, use the **proje
 
 Persisted state goes through `createStorageStore` in `src/lib/storage-store.ts` — the only module allowed to touch `localStorage`. It owns decoding and cross-tab sync.
 
-Dev-only code must put `import.meta.env.DEV` **first** in the condition so Vite drops the branch at build time. `mocksEnabled` alone is a runtime value and would still ship the mock backend as a lazy chunk.
+Dev-only code must put `import.meta.env.DEV` **first** in the condition so Vite drops the branch at build time.
 
 <important if="you are adding, removing, or upgrading a dependency">
 
 ## Dependencies
 
-`dependencies` holds only what is imported from `src/`; CLIs and build plugins are dev deps so `bun audit --prod` stays readable. `trustedDependencies: []` — don't add entries without checking what the script does.
+`dependencies` holds only what's imported as JS from `src/` (runtime); CSS-only imports and other build inputs stay dev deps. CLIs and build plugins are dev deps so `bun audit --prod` stays readable. `trustedDependencies: []` — don't add entries without checking what the script does.
 
 `vite` is **pinned to 8.1.x** (8.1.5). Every 8.2.x and 8.3.0-beta.0 collapse router `autoCodeSplitting` from 13 chunks to 10 and grow the entry from 81 to 115 kB gzip (measured on 8.2.2). Re-test before unpinning.
 

package/templates/template-router/components.json

@@ -16,8 +16,7 @@
     "components": "@/components",
     "utils": "@/lib/utils",
     "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
+    "lib": "@/lib"
   },
   "menuColor": "default",
   "menuAccent": "subtle",

package/templates/template-router/doctor.config.json

@@ -7,6 +7,10 @@
         "files": ["src/routes/**"],
         "rules": ["react-doctor/only-export-components"]
       },
+      {
+        "files": ["src/api/auth/index.ts"],
+        "rules": ["react-doctor/query-mutation-missing-invalidation"]
+      },
       {
         "files": ["src/api/auth/session-store.ts"],
         "rules": ["react-doctor/client-localstorage-no-version"]

package/templates/template-router/e2e/a11y.spec.ts

@@ -3,8 +3,7 @@ import { expect, test, type Page } from '@playwright/test'
 
 import { ready, signIn } from './utils'
 
-// Automated rules catch roughly a third of WCAG failures — treat a pass as "no
-// known machine-detectable violations", not as "accessible".
+// axe catches roughly a third of WCAG failures; a pass is not "accessible"
 const scan = (page: Page) =>
   new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']).analyze()
 
@@ -25,3 +24,11 @@ test('the app shell has no detectable violations', async ({ page }) => {
   const { violations } = await scan(page)
   expect(violations).toEqual([])
 })
+
+test('the notes list has no detectable violations', async ({ page }) => {
+  await signIn(page)
+  await page.getByRole('link', { name: 'Notes' }).click()
+  await expect(page.getByRole('heading', { name: 'Notes' })).toBeVisible()
+  const { violations } = await scan(page)
+  expect(violations).toEqual([])
+})

package/templates/template-router/e2e/auth.spec.ts

@@ -2,10 +2,6 @@ import { expect, test } from '@playwright/test'
 
 import { ready, signIn } from './utils'
 
-// Playwright gives each test its own context, so localStorage does not leak
-// between them. That matters here: the session lives in localStorage, and a
-// shared context would make a signed-out test pass for the wrong reason.
-
 test('a guest is redirected away from a protected route', async ({ page }) => {
   await ready(page, '/')
   await expect(page).toHaveURL(/\/sign-in/)
@@ -71,13 +67,11 @@ test('a theme change in one tab reaches the other', async ({ context }) => {
 
 test('preloading a protected route on hover does not navigate a guest', async ({ page }) => {
   await ready(page, '/does-not-exist')
-  // A navigation control must expose the link role — axe cannot see this, because
-  // role="button" on an anchor is valid ARIA
+  // role query on purpose: axe accepts role="button" on an anchor
   const backHome = page.getByRole('link', { name: 'Back home' })
   await expect(backHome).toBeVisible()
 
-  // defaultPreload: 'intent' runs beforeLoad on hover; a thrown redirect must
-  // abort the preload, not move the user
+  // hover preloads beforeLoad; its redirect must abort the preload, not navigate
   await backHome.hover()
   await page.waitForTimeout(500)
 

package/templates/template-router/e2e/global-setup.ts

@@ -1,10 +1,6 @@
 import type { FullConfig } from '@playwright/test'
 
-// `reuseExistingServer` makes Playwright adopt whatever already listens on the
-// port, so a dev server from another project would silently serve the whole suite
-// (the failures then look like missing UI). Vite serves `/@fs` only for paths
-// inside its own root, so a 200 here proves the server was started from this
-// checkout — a foreign server answers 403.
+// Vite serves `/@fs` only under its own root: 200 proves the reused server is this checkout
 const identityProbe = async (baseURL: string) => {
   const url = `${baseURL}/@fs${process.cwd()}/package.json`
   try {