create-top-secret-starter 0.14.0 → 0.15.0

package/features.json

@@ -27,7 +27,6 @@
         "src/components/orders",
         "src/mocks/orders.ts",
         "src/components/ui/table.tsx",
-        "src/components/ui/dialog.tsx",
         "src/components/ui/dropdown-menu.tsx",
         "src/components/ui/select.tsx",
         "e2e/orders.spec.ts"

package/index.js

@@ -248,11 +248,10 @@ const substitute = (file, pairs) =>
       return text.replaceAll(from, to)
     }, source)
   )
-// the project name lands in the document title/description and the demo home page
+// the project name lands in the document title/description and the sidebar brand
 const nameTargets = base => [
   path.join(base, 'index.html'),
   path.join(base, 'src', 'site.ts'),
-  path.join(base, 'src', 'routes', '_authenticated', 'index.tsx'),
   path.join(base, 'src', 'components', 'app-sidebar.tsx')
 ]
 const applyName = files => {

package/package.json

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

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

@@ -60,11 +60,11 @@
           "error",
           {
             "name": "fetch",
-            "message": "Use the ky instances from src/api/index.ts."
+            "message": "Use the `api` ky instance from src/api: it owns the bearer header and the single-flight token refresh."
           },
           {
             "name": "localStorage",
-            "message": "Use createStorageStore from src/lib/storage-store.ts."
+            "message": "Persisted state goes through createStorageStore (src/lib/storage-store.ts): it owns decoding and cross-tab sync."
           }
         ],
         "no-restricted-imports": [
@@ -73,12 +73,12 @@
             "paths": [
               {
                 "name": "zod",
-                "message": "Import from zod/mini. For forms use zodResolver; it works with mini."
+                "message": "Import from 'zod/mini'. Mixing the two ships both builds (+15.8 kB gzip). For forms use zodResolver (typed against zod/v4/core, works with mini)."
               },
               {
                 "name": "react",
                 "importNames": ["useMemo", "useCallback"],
-                "message": "React Compiler is enabled; avoid manual memoization."
+                "message": "React Compiler is on: manual memoization is noise."
               }
             ]
           }
@@ -92,7 +92,7 @@
           "error",
           {
             "name": "localStorage",
-            "message": "Use createStorageStore from src/lib/storage-store.ts."
+            "message": "Persisted state goes through createStorageStore (src/lib/storage-store.ts): it owns decoding and cross-tab sync."
           }
         ]
       }
@@ -104,13 +104,13 @@
           "error",
           {
             "name": "fetch",
-            "message": "Use the ky instances from src/api/index.ts."
+            "message": "Use the `api` ky instance from src/api: it owns the bearer header and the single-flight token refresh."
           }
         ]
       }
     },
     {
-      "files": ["src/api/auth/auth.test.ts", "src/api/refresh.test.ts"],
+      "files": ["src/api/**/*.test.ts"],
       "rules": {
         "no-restricted-globals": "off"
       }
@@ -118,17 +118,7 @@
     {
       "files": ["src/components/ui/**"],
       "rules": {
-        "no-restricted-imports": [
-          "error",
-          {
-            "paths": [
-              {
-                "name": "zod",
-                "message": "Import from zod/mini. For forms use zodResolver; it works with mini."
-              }
-            ]
-          }
-        ]
+        "no-restricted-imports": "off"
       }
     }
   ]

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

@@ -55,7 +55,7 @@ test('signing out is reachable by keyboard from a signed-in shell', async ({ pag
       )
       .map(el => el.textContent.trim() || (el.getAttribute('aria-label') ?? ''))
   )
-  const order = ['Home', 'Notes', 'Theme', 'Sign out'].map(name =>
+  const order = ['Home', 'Notes', 'Switch to', 'Sign out'].map(name =>
     tabbables.findIndex(text => text.startsWith(name))
   )
   expect(order.every(index => index >= 0)).toBe(true)
@@ -73,12 +73,12 @@ test('signing out is reachable by keyboard from a signed-in shell', async ({ pag
 
 test('a button activates with Space', async ({ page }) => {
   await signIn(page)
-  const toggle = page.getByRole('button', { name: 'Theme: system' })
+  const toggle = page.getByRole('button', { name: 'Switch to light theme' })
 
   await toggle.focus()
   await page.keyboard.press('Space')
 
-  await expect(page.getByRole('button', { name: 'Theme: light' })).toBeFocused()
+  await expect(page.getByRole('button', { name: 'Switch to dark theme' })).toBeFocused()
 })
 
 test('the back-home link activates with Enter', async ({ page }) => {

package/templates/template-router/src/components/app-shell.plain.tsx

@@ -3,11 +3,13 @@ import type { PropsWithChildren } from 'react'
 
 import { HeaderActions } from '@/components/header-actions'
 import { NAV } from '@/components/nav'
+import { MAIN_CONTENT_ID, SkipLink } from '@/components/skip-link'
 
 // header-only shell: `create-cli` renames this over `app-shell.tsx` when the sidebar is off
 export const AppShell = ({ children }: PropsWithChildren) => {
   return (
     <>
+      <SkipLink />
       <header className='flex h-14 items-center gap-4 border-b px-6'>
         <nav aria-label='Main' className='flex items-center gap-4 text-sm'>
           {NAV.map(item => (
@@ -23,7 +25,9 @@ export const AppShell = ({ children }: PropsWithChildren) => {
         </nav>
         <HeaderActions />
       </header>
-      <div className='flex flex-1 flex-col p-4 sm:p-6'>{children}</div>
+      <div id={MAIN_CONTENT_ID} tabIndex={-1} className='flex flex-1 flex-col p-4 sm:p-6'>
+        {children}
+      </div>
     </>
   )
 }

package/templates/template-router/src/components/app-shell.tsx

@@ -2,6 +2,7 @@ import type { PropsWithChildren } from 'react'
 
 import { AppSidebar } from '@/components/app-sidebar'
 import { HeaderActions } from '@/components/header-actions'
+import { MAIN_CONTENT_ID, SkipLink } from '@/components/skip-link'
 import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 import { sidebarStore, useSidebarOpen } from '@/lib/sidebar-store'
 
@@ -11,13 +12,16 @@ export const AppShell = ({ children }: PropsWithChildren) => {
 
   return (
     <SidebarProvider open={open} onOpenChange={sidebarStore.set}>
+      <SkipLink />
       <AppSidebar />
       <SidebarInset className='min-w-0'>
         <header className='flex h-14 items-center gap-2 border-b px-4'>
           <SidebarTrigger />
           <HeaderActions />
         </header>
-        <div className='flex flex-1 flex-col p-4 sm:p-6'>{children}</div>
+        <div id={MAIN_CONTENT_ID} tabIndex={-1} className='flex flex-1 flex-col p-4 sm:p-6'>
+          {children}
+        </div>
       </SidebarInset>
     </SidebarProvider>
   )

package/templates/template-router/src/components/orders/orders-table.tsx

@@ -53,7 +53,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
-import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from '@/components/ui/empty'
 import {
   Table,
   TableBody,
@@ -111,7 +110,11 @@ const columns = helper.columns([
     header: 'Amount',
     size: 130,
     meta: { align: 'end' },
-    cell: ({ row }) => formatMoney(row.original.amountCents, row.original.currency)
+    cell: ({ row }) => (
+      <span className='tabular-nums'>
+        {formatMoney(row.original.amountCents, row.original.currency)}
+      </span>
+    )
   }),
   helper.accessor('createdAt', {
     header: 'Date',
@@ -181,10 +184,12 @@ type Props = {
   sorting: OrdersSorting
   onSortingChange: (next: OrdersSorting) => void
   toolbar?: React.ReactNode
+  /** shown in place of the rows; the caller knows which filters produced the emptiness */
+  empty: React.ReactNode
   busy?: boolean
 }
 
-export const OrdersTable = ({ orders, sorting, onSortingChange, toolbar, busy }: Props) => {
+export const OrdersTable = ({ orders, sorting, onSortingChange, toolbar, empty, busy }: Props) => {
   const layout = useOrdersTableLayout()
   const [dragging, setDragging] = useState<OrderColumn | null>(null)
   const [dropTarget, setDropTarget] = useState<string | null>(null)
@@ -280,11 +285,13 @@ export const OrdersTable = ({ orders, sorting, onSortingChange, toolbar, busy }:
         </DropdownMenu>
       </div>
 
-      <div
-        className='overflow-x-auto rounded-lg border transition-opacity aria-busy:opacity-60'
-        aria-busy={busy ? true : undefined}
-      >
-        <Table className='table-fixed' style={{ minWidth: table.getTotalSize() }}>
+      <div className='transition-opacity aria-busy:opacity-60' aria-busy={busy ? true : undefined}>
+        <Table
+          label='Orders'
+          containerClassName='rounded-lg border'
+          className='table-fixed'
+          style={{ minWidth: table.getTotalSize() }}
+        >
           <TableHeader>
             {table.getHeaderGroups().map(group => (
               <TableRow key={group.id}>
@@ -332,7 +339,7 @@ export const OrdersTable = ({ orders, sorting, onSortingChange, toolbar, busy }:
                         <span
                           draggable
                           aria-hidden='true'
-                          className='cursor-grab rounded-sm p-1 text-muted-foreground opacity-0 transition-opacity group-hover/head:opacity-100 active:cursor-grabbing'
+                          className='cursor-grab rounded-sm p-1 text-muted-foreground opacity-0 transition-opacity group-hover/head:opacity-100 active:cursor-grabbing pointer-coarse:hidden'
                           onDragStart={event => {
                             event.dataTransfer.setData(DRAG_TYPE, column.id)
                             event.dataTransfer.effectAllowed = 'move'
@@ -367,7 +374,7 @@ export const OrdersTable = ({ orders, sorting, onSortingChange, toolbar, busy }:
                                 variant='ghost'
                                 size='icon-xs'
                                 className={cn(
-                                  'opacity-0 transition-opacity group-hover/head:opacity-100 focus-visible:opacity-100 data-open:opacity-100',
+                                  'opacity-0 transition-opacity group-hover/head:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100 data-open:opacity-100',
                                   align === 'end' ? 'mr-auto' : 'ml-auto'
                                 )}
                                 aria-label={`${labelOf(column)} column options`}
@@ -445,12 +452,7 @@ export const OrdersTable = ({ orders, sorting, onSortingChange, toolbar, busy }:
             {table.getRowModel().rows.length === 0 ? (
               <TableRow>
                 <TableCell colSpan={table.getVisibleLeafColumns().length} className='p-0'>
-                  <Empty className='border-none'>
-                    <EmptyHeader>
-                      <EmptyTitle>No orders match</EmptyTitle>
-                      <EmptyDescription>Clear the search or pick another status.</EmptyDescription>
-                    </EmptyHeader>
-                  </Empty>
+                  {empty}
                 </TableCell>
               </TableRow>
             ) : (

package/templates/template-router/src/components/skip-link.tsx

@@ -0,0 +1,11 @@
+export const MAIN_CONTENT_ID = 'main-content'
+
+// the first focusable element on the page: the shell's nav sits between the top and the content
+export const SkipLink = () => (
+  <a
+    href={`#${MAIN_CONTENT_ID}`}
+    className='sr-only z-50 rounded-lg bg-background px-3 py-2 text-sm font-medium ring-1 ring-border focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:ring-3 focus:ring-ring/50'
+  >
+    Skip to content
+  </a>
+)

package/templates/template-router/src/components/theme-toggle.tsx

@@ -17,7 +17,7 @@ export const ThemeToggle = () => {
     <Button
       variant='ghost'
       size='icon'
-      aria-label={`Theme: ${theme}`}
+      aria-label={`Switch to ${next} theme`}
       onClick={() => setTheme(next)}
     >
       <Icon />

package/templates/template-router/src/components/ui/table.tsx

@@ -1,9 +1,24 @@
 import * as React from 'react'
 import { cn } from 'cn'
 
-function Table({ className, ...props }: React.ComponentProps<'table'>) {
+type TableProps = React.ComponentProps<'table'> & {
+  /** names the scroll region; a keyboard user lands on it before the columns it hides */
+  label: string
+  containerClassName?: string
+}
+
+function Table({ className, label, containerClassName, ...props }: TableProps) {
   return (
-    <div data-slot='table-container' className='relative w-full overflow-x-auto'>
+    <div
+      data-slot='table-container'
+      role='region'
+      aria-label={label}
+      tabIndex={0}
+      className={cn(
+        'relative w-full overflow-x-auto scroll-x-hint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+        containerClassName
+      )}
+    >
       <table
         data-slot='table'
         className={cn('w-full caption-bottom text-sm', className)}

package/templates/template-router/src/components/ui/toast.tsx

@@ -12,7 +12,29 @@ import {
   Loader2Icon
 } from 'lucide-react'
 
-const toast = ToastPrimitive.createToastManager()
+const manager = ToastPrimitive.createToastManager()
+
+// an error, or an action like Undo, is the way back: it must not expire before it is read
+const persist = <T,>(value: T) =>
+  typeof value === 'string' ? { title: value, timeout: 0 } : { ...value, timeout: 0 }
+
+const toast: typeof manager = {
+  ...manager,
+  add: options =>
+    manager.add({
+      timeout: options.type === 'error' || options.actionProps ? 0 : undefined,
+      ...options
+    }),
+  // `promise` builds its own toasts, so its error branch never reaches `add`
+  promise: (value, options) => {
+    const { error } = options
+    return manager.promise(value, {
+      ...options,
+      error:
+        typeof error === 'function' ? (reason: unknown) => persist(error(reason)) : persist(error)
+    })
+  }
+}
 
 function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
   return <ToastPrimitive.Provider {...props} />
@@ -152,7 +174,7 @@ function ToastIcon({ type }: { type: string | undefined }) {
   }
 
   if (type === 'loading') {
-    icon = <Loader2Icon className='animate-spin' aria-hidden='true' />
+    icon = <Loader2Icon className='motion-safe:animate-spin' aria-hidden='true' />
   }
 
   if (!icon) {

package/templates/template-router/src/index.css

@@ -66,7 +66,7 @@
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --ring: oklch(0.62 0 0);
   --chart-1: oklch(0.87 0 0);
   --chart-2: oklch(0.556 0 0);
   --chart-3: oklch(0.439 0 0);
@@ -80,7 +80,7 @@
   --sidebar-accent: oklch(0.97 0 0);
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-ring: oklch(0.62 0 0);
 }
 
 .dark {
@@ -131,7 +131,7 @@
     color-scheme: dark;
   }
   body {
-    @apply bg-background text-foreground tabular-nums antialiased;
+    @apply bg-background text-foreground antialiased;
   }
   h1,
   h2,
@@ -151,4 +151,28 @@
     appearance: none;
     margin: 0;
   }
+  /* covers the component library's enter/exit keyframes too, which no `motion-safe:` reaches */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+/* edge shadows that appear only on the side with more to scroll: `local` gradients cover them at the ends */
+@utility scroll-x-hint {
+  --shadow-edge: color-mix(in oklch, var(--foreground) 18%, transparent);
+  background:
+    linear-gradient(to right, var(--background), transparent) 0 0 / 24px 100% no-repeat local,
+    linear-gradient(to left, var(--background), transparent) 100% 0 / 24px 100% no-repeat local,
+    radial-gradient(farthest-side at 0 50%, var(--shadow-edge), transparent) 0 0 / 12px 100%
+      no-repeat scroll,
+    radial-gradient(farthest-side at 100% 50%, var(--shadow-edge), transparent) 100% 0 / 12px 100%
+      no-repeat scroll;
+  background-color: var(--background);
 }

package/templates/template-router/src/routes/_authenticated/index.tsx

@@ -26,7 +26,7 @@ function HomePage() {
   return (
     <main className='flex flex-1 flex-col gap-6'>
       <div className='flex flex-col gap-1'>
-        <h1 className='text-2xl font-semibold'>PLACEHOLDER</h1>
+        <h1 className='text-2xl font-semibold'>Home</h1>
         <p className='text-sm text-muted-foreground'>Signed in as {user.email}</p>
       </div>
       {/* realtime:start */}

package/templates/template-router/src/routes/_authenticated/notes/$noteId.tsx

@@ -4,6 +4,7 @@ import { ArrowLeft } from 'lucide-react'
 import { isNotFound } from '@/api'
 import { noteQuery, useNote } from '@/api/notes'
 import { buttonVariants } from '@/components/ui/button'
+import { formatDate } from '@/lib/format'
 
 export const Route = createFileRoute('/_authenticated/notes/$noteId')({
   loader: async ({ context, params }) => {
@@ -31,7 +32,7 @@ function NotePage() {
       <header className='space-y-1'>
         <h1 className='text-2xl font-semibold'>{note.title}</h1>
         <p className='text-xs text-muted-foreground'>
-          <time dateTime={note.createdAt}>{new Date(note.createdAt).toLocaleDateString()}</time>
+          <time dateTime={note.createdAt}>{formatDate(note.createdAt)}</time>
         </p>
       </header>
       {note.body ? (

package/templates/template-router/src/routes/_authenticated/notes/index.tsx

@@ -1,11 +1,20 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Link, createFileRoute } from '@tanstack/react-router'
 import { Trash2 } from 'lucide-react'
+import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 
 import { notesQuery, useCreateNote, useDeleteNote, useDeletingNoteIds, useNotes } from '@/api/notes'
-import { CreateNoteSchema } from '@/api/notes/schema'
+import { CreateNoteSchema, type Note } from '@/api/notes/schema'
 import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from '@/components/ui/empty'
 import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
@@ -22,6 +31,9 @@ function NotesPage() {
   const createNote = useCreateNote()
   const deleteNote = useDeleteNote()
   const deleting = new Set(useDeletingNoteIds())
+  // deleting a note is final, so it is confirmed rather than undone.
+  // the note outlives `open`: the dialog is still on screen while it animates out
+  const [confirm, setConfirm] = useState<{ note: Note; open: boolean } | null>(null)
   const {
     register,
     handleSubmit,
@@ -33,6 +45,7 @@ function NotesPage() {
   })
 
   const onSubmit = handleSubmit(values => createNote.mutate(values, { onSuccess: () => reset() }))
+  const close = () => setConfirm(current => current && { ...current, open: false })
 
   return (
     <main className='mx-auto w-full max-w-md space-y-6'>
@@ -90,11 +103,11 @@ function NotesPage() {
                 {note.title}
               </Link>
               <Button
-                variant='ghost'
+                variant='destructive'
                 size='icon-sm'
                 aria-label={`Delete ${note.title}`}
                 disabled={deleting.has(note.id)}
-                onClick={() => deleteNote.mutate(note.id)}
+                onClick={() => setConfirm({ note, open: true })}
               >
                 <Trash2 />
               </Button>
@@ -102,6 +115,31 @@ function NotesPage() {
           ))}
         </ul>
       )}
+
+      <Dialog open={confirm?.open === true} onOpenChange={next => !next && close()}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete this note?</DialogTitle>
+            <DialogDescription>
+              “{confirm?.note.title}” will be removed for good. This cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant='outline' onClick={close}>
+              Cancel
+            </Button>
+            <Button
+              variant='destructive'
+              onClick={() => {
+                if (confirm) deleteNote.mutate(confirm.note.id)
+                close()
+              }}
+            >
+              Delete note
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </main>
   )
 }

package/templates/template-router/src/routes/_authenticated/orders/index.tsx

@@ -18,7 +18,14 @@ import {
 import { CreateOrderDialog } from '@/components/orders/create-order-dialog'
 import { statusLabel } from '@/components/orders/order-status'
 import { OrdersTable, type OrdersSorting } from '@/components/orders/orders-table'
-import { buttonVariants } from '@/components/ui/button'
+import { Button, buttonVariants } from '@/components/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle
+} from '@/components/ui/empty'
 import { Input } from '@/components/ui/input'
 import {
   Select,
@@ -84,11 +91,36 @@ function OrdersPage() {
     })
   const onSorting = ({ sort, order }: OrdersSorting) =>
     void navigate({ search: prev => ({ ...prev, sort, order, page: 1 }) })
+  const onClearFilters = () =>
+    void navigate({ search: prev => ({ ...prev, q: undefined, status: undefined, page: 1 }) })
   const onPageSize = (value: string | null) =>
     void navigate({
       search: prev => ({ ...prev, pageSize: Number(value) as (typeof PAGE_SIZES)[number], page: 1 })
     })
 
+  const filtered = Boolean(search.q || search.status)
+  const empty = (
+    <Empty className='border-none'>
+      <EmptyHeader>
+        <EmptyTitle>
+          {search.q ? `No orders match \u201C${search.q}\u201D` : 'No orders to show'}
+        </EmptyTitle>
+        <EmptyDescription>
+          {filtered ? 'Try another search or status.' : 'Create the first one to see it here.'}
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        {filtered ? (
+          <Button variant='outline' onClick={onClearFilters}>
+            Clear filters
+          </Button>
+        ) : (
+          <CreateOrderDialog />
+        )}
+      </EmptyContent>
+    </Empty>
+  )
+
   return (
     <main className='flex flex-1 flex-col gap-4'>
       <div className='flex flex-wrap items-center justify-between gap-2'>
@@ -100,6 +132,7 @@ function OrdersPage() {
         orders={data.items}
         sorting={search}
         onSortingChange={onSorting}
+        empty={empty}
         busy={busy}
         toolbar={
           <>

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

@@ -60,11 +60,11 @@
           "error",
           {
             "name": "fetch",
-            "message": "Use the ky instances from src/api/index.ts."
+            "message": "Use the `api` ky instance from src/api: it owns the bearer header and the single-flight token refresh."
           },
           {
             "name": "localStorage",
-            "message": "Use createStorageStore from src/lib/storage-store.ts."
+            "message": "Persisted state goes through createStorageStore (src/lib/storage-store.ts): it owns decoding and cross-tab sync."
           }
         ],
         "no-restricted-imports": [
@@ -73,12 +73,12 @@
             "paths": [
               {
                 "name": "zod",
-                "message": "Import from zod/mini. For forms use zodResolver; it works with mini."
+                "message": "Import from 'zod/mini'. Mixing the two ships both builds (+15.8 kB gzip). For forms use zodResolver (typed against zod/v4/core, works with mini)."
               },
               {
                 "name": "react",
                 "importNames": ["useMemo", "useCallback"],
-                "message": "React Compiler is enabled; avoid manual memoization."
+                "message": "React Compiler is on: manual memoization is noise."
               }
             ]
           }
@@ -92,7 +92,7 @@
           "error",
           {
             "name": "localStorage",
-            "message": "Use createStorageStore from src/lib/storage-store.ts."
+            "message": "Persisted state goes through createStorageStore (src/lib/storage-store.ts): it owns decoding and cross-tab sync."
           }
         ]
       }
@@ -104,13 +104,13 @@
           "error",
           {
             "name": "fetch",
-            "message": "Use the ky instances from src/api/index.ts."
+            "message": "Use the `api` ky instance from src/api: it owns the bearer header and the single-flight token refresh."
           }
         ]
       }
     },
     {
-      "files": ["src/api/auth/auth.test.ts", "src/api/refresh.test.ts"],
+      "files": ["src/api/**/*.test.ts"],
       "rules": {
         "no-restricted-globals": "off"
       }
@@ -118,17 +118,7 @@
     {
       "files": ["src/components/ui/**"],
       "rules": {
-        "no-restricted-imports": [
-          "error",
-          {
-            "paths": [
-              {
-                "name": "zod",
-                "message": "Import from zod/mini. For forms use zodResolver; it works with mini."
-              }
-            ]
-          }
-        ]
+        "no-restricted-imports": "off"
       }
     }
   ]

package/templates/template-start/e2e/keyboard.spec.ts

@@ -55,7 +55,7 @@ test('signing out is reachable by keyboard from a signed-in shell', async ({ pag
       )
       .map(el => el.textContent.trim() || (el.getAttribute('aria-label') ?? ''))
   )
-  const order = ['Home', 'Notes', 'Theme', 'Sign out'].map(name =>
+  const order = ['Home', 'Notes', 'Switch to', 'Sign out'].map(name =>
     tabbables.findIndex(text => text.startsWith(name))
   )
   expect(order.every(index => index >= 0)).toBe(true)
@@ -73,12 +73,12 @@ test('signing out is reachable by keyboard from a signed-in shell', async ({ pag
 
 test('a button activates with Space', async ({ page }) => {
   await signIn(page)
-  const toggle = page.getByRole('button', { name: 'Theme: system' })
+  const toggle = page.getByRole('button', { name: 'Switch to light theme' })
 
   await toggle.focus()
   await page.keyboard.press('Space')
 
-  await expect(page.getByRole('button', { name: 'Theme: light' })).toBeFocused()
+  await expect(page.getByRole('button', { name: 'Switch to dark theme' })).toBeFocused()
 })
 
 test('the back-home link activates with Enter', async ({ page }) => {

package/templates/template-start/src/components/app-shell.plain.tsx

@@ -3,11 +3,13 @@ import type { PropsWithChildren } from 'react'
 
 import { HeaderActions } from '@/components/header-actions'
 import { NAV } from '@/components/nav'
+import { MAIN_CONTENT_ID, SkipLink } from '@/components/skip-link'
 
 // header-only shell: `create-cli` renames this over `app-shell.tsx` when the sidebar is off
 export const AppShell = ({ children }: PropsWithChildren) => {
   return (
     <>
+      <SkipLink />
       <header className='flex h-14 items-center gap-4 border-b px-6'>
         <nav aria-label='Main' className='flex items-center gap-4 text-sm'>
           {NAV.map(item => (
@@ -23,7 +25,9 @@ export const AppShell = ({ children }: PropsWithChildren) => {
         </nav>
         <HeaderActions />
       </header>
-      <div className='flex flex-1 flex-col p-4 sm:p-6'>{children}</div>
+      <div id={MAIN_CONTENT_ID} tabIndex={-1} className='flex flex-1 flex-col p-4 sm:p-6'>
+        {children}
+      </div>
     </>
   )
 }

package/templates/template-start/src/components/app-shell.tsx

@@ -2,6 +2,7 @@ import type { PropsWithChildren } from 'react'
 
 import { AppSidebar } from '@/components/app-sidebar'
 import { HeaderActions } from '@/components/header-actions'
+import { MAIN_CONTENT_ID, SkipLink } from '@/components/skip-link'
 import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 import { sidebarStore, useSidebarOpen } from '@/lib/sidebar-store'
 
@@ -11,13 +12,16 @@ export const AppShell = ({ children }: PropsWithChildren) => {
 
   return (
     <SidebarProvider open={open} onOpenChange={sidebarStore.set}>
+      <SkipLink />
       <AppSidebar />
       <SidebarInset className='min-w-0'>
         <header className='flex h-14 items-center gap-2 border-b px-4'>
           <SidebarTrigger />
           <HeaderActions />
         </header>
-        <div className='flex flex-1 flex-col p-4 sm:p-6'>{children}</div>
+        <div id={MAIN_CONTENT_ID} tabIndex={-1} className='flex flex-1 flex-col p-4 sm:p-6'>
+          {children}
+        </div>
       </SidebarInset>
     </SidebarProvider>
   )

package/templates/template-start/src/components/orders/orders-table.tsx

@@ -53,7 +53,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
-import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from '@/components/ui/empty'
 import {
   Table,
   TableBody,
@@ -111,7 +110,11 @@ const columns = helper.columns([
     header: 'Amount',
     size: 130,
     meta: { align: 'end' },
-    cell: ({ row }) => formatMoney(row.original.amountCents, row.original.currency)
+    cell: ({ row }) => (
+      <span className='tabular-nums'>
+        {formatMoney(row.original.amountCents, row.original.currency)}
+      </span>
+    )
   }),
   helper.accessor('createdAt', {
     header: 'Date',
@@ -181,10 +184,12 @@ type Props = {
   sorting: OrdersSorting
   onSortingChange: (next: OrdersSorting) => void
   toolbar?: React.ReactNode
+  /** shown in place of the rows; the caller knows which filters produced the emptiness */
+  empty: React.ReactNode
   busy?: boolean
 }
 
-export const OrdersTable = ({ orders, sorting, onSortingChange, toolbar, busy }: Props) => {
+export const OrdersTable = ({ orders, sorting, onSortingChange, toolbar, empty, busy }: Props) => {
   const layout = useOrdersTableLayout()
   const [dragging, setDragging] = useState<OrderColumn | null>(null)
   const [dropTarget, setDropTarget] = useState<string | null>(null)
@@ -280,11 +285,13 @@ export const OrdersTable = ({ orders, sorting, onSortingChange, toolbar, busy }:
         </DropdownMenu>
       </div>
 
-      <div
-        className='overflow-x-auto rounded-lg border transition-opacity aria-busy:opacity-60'
-        aria-busy={busy ? true : undefined}
-      >
-        <Table className='table-fixed' style={{ minWidth: table.getTotalSize() }}>
+      <div className='transition-opacity aria-busy:opacity-60' aria-busy={busy ? true : undefined}>
+        <Table
+          label='Orders'
+          containerClassName='rounded-lg border'
+          className='table-fixed'
+          style={{ minWidth: table.getTotalSize() }}
+        >
           <TableHeader>
             {table.getHeaderGroups().map(group => (
               <TableRow key={group.id}>
@@ -332,7 +339,7 @@ export const OrdersTable = ({ orders, sorting, onSortingChange, toolbar, busy }:
                         <span
                           draggable
                           aria-hidden='true'
-                          className='cursor-grab rounded-sm p-1 text-muted-foreground opacity-0 transition-opacity group-hover/head:opacity-100 active:cursor-grabbing'
+                          className='cursor-grab rounded-sm p-1 text-muted-foreground opacity-0 transition-opacity group-hover/head:opacity-100 active:cursor-grabbing pointer-coarse:hidden'
                           onDragStart={event => {
                             event.dataTransfer.setData(DRAG_TYPE, column.id)
                             event.dataTransfer.effectAllowed = 'move'
@@ -367,7 +374,7 @@ export const OrdersTable = ({ orders, sorting, onSortingChange, toolbar, busy }:
                                 variant='ghost'
                                 size='icon-xs'
                                 className={cn(
-                                  'opacity-0 transition-opacity group-hover/head:opacity-100 focus-visible:opacity-100 data-open:opacity-100',
+                                  'opacity-0 transition-opacity group-hover/head:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100 data-open:opacity-100',
                                   align === 'end' ? 'mr-auto' : 'ml-auto'
                                 )}
                                 aria-label={`${labelOf(column)} column options`}
@@ -445,12 +452,7 @@ export const OrdersTable = ({ orders, sorting, onSortingChange, toolbar, busy }:
             {table.getRowModel().rows.length === 0 ? (
               <TableRow>
                 <TableCell colSpan={table.getVisibleLeafColumns().length} className='p-0'>
-                  <Empty className='border-none'>
-                    <EmptyHeader>
-                      <EmptyTitle>No orders match</EmptyTitle>
-                      <EmptyDescription>Clear the search or pick another status.</EmptyDescription>
-                    </EmptyHeader>
-                  </Empty>
+                  {empty}
                 </TableCell>
               </TableRow>
             ) : (

package/templates/template-start/src/components/skip-link.tsx

@@ -0,0 +1,11 @@
+export const MAIN_CONTENT_ID = 'main-content'
+
+// the first focusable element on the page: the shell's nav sits between the top and the content
+export const SkipLink = () => (
+  <a
+    href={`#${MAIN_CONTENT_ID}`}
+    className='sr-only z-50 rounded-lg bg-background px-3 py-2 text-sm font-medium ring-1 ring-border focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:ring-3 focus:ring-ring/50'
+  >
+    Skip to content
+  </a>
+)

package/templates/template-start/src/components/theme-toggle.tsx

@@ -17,7 +17,7 @@ export const ThemeToggle = () => {
     <Button
       variant='ghost'
       size='icon'
-      aria-label={`Theme: ${theme}`}
+      aria-label={`Switch to ${next} theme`}
       onClick={() => setTheme(next)}
     >
       <Icon />

package/templates/template-start/src/components/ui/table.tsx

@@ -1,9 +1,24 @@
 import * as React from 'react'
 import { cn } from 'cn'
 
-function Table({ className, ...props }: React.ComponentProps<'table'>) {
+type TableProps = React.ComponentProps<'table'> & {
+  /** names the scroll region; a keyboard user lands on it before the columns it hides */
+  label: string
+  containerClassName?: string
+}
+
+function Table({ className, label, containerClassName, ...props }: TableProps) {
   return (
-    <div data-slot='table-container' className='relative w-full overflow-x-auto'>
+    <div
+      data-slot='table-container'
+      role='region'
+      aria-label={label}
+      tabIndex={0}
+      className={cn(
+        'relative w-full overflow-x-auto scroll-x-hint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+        containerClassName
+      )}
+    >
       <table
         data-slot='table'
         className={cn('w-full caption-bottom text-sm', className)}

package/templates/template-start/src/components/ui/toast.tsx

@@ -12,7 +12,29 @@ import {
   Loader2Icon
 } from 'lucide-react'
 
-const toast = ToastPrimitive.createToastManager()
+const manager = ToastPrimitive.createToastManager()
+
+// an error, or an action like Undo, is the way back: it must not expire before it is read
+const persist = <T,>(value: T) =>
+  typeof value === 'string' ? { title: value, timeout: 0 } : { ...value, timeout: 0 }
+
+const toast: typeof manager = {
+  ...manager,
+  add: options =>
+    manager.add({
+      timeout: options.type === 'error' || options.actionProps ? 0 : undefined,
+      ...options
+    }),
+  // `promise` builds its own toasts, so its error branch never reaches `add`
+  promise: (value, options) => {
+    const { error } = options
+    return manager.promise(value, {
+      ...options,
+      error:
+        typeof error === 'function' ? (reason: unknown) => persist(error(reason)) : persist(error)
+    })
+  }
+}
 
 function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
   return <ToastPrimitive.Provider {...props} />
@@ -152,7 +174,7 @@ function ToastIcon({ type }: { type: string | undefined }) {
   }
 
   if (type === 'loading') {
-    icon = <Loader2Icon className='animate-spin' aria-hidden='true' />
+    icon = <Loader2Icon className='motion-safe:animate-spin' aria-hidden='true' />
   }
 
   if (!icon) {

package/templates/template-start/src/index.css

@@ -66,7 +66,7 @@
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --ring: oklch(0.62 0 0);
   --chart-1: oklch(0.87 0 0);
   --chart-2: oklch(0.556 0 0);
   --chart-3: oklch(0.439 0 0);
@@ -80,7 +80,7 @@
   --sidebar-accent: oklch(0.97 0 0);
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-ring: oklch(0.62 0 0);
 }
 
 .dark {
@@ -131,7 +131,7 @@
     color-scheme: dark;
   }
   body {
-    @apply bg-background text-foreground tabular-nums antialiased;
+    @apply bg-background text-foreground antialiased;
   }
   h1,
   h2,
@@ -151,4 +151,28 @@
     appearance: none;
     margin: 0;
   }
+  /* covers the component library's enter/exit keyframes too, which no `motion-safe:` reaches */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+/* edge shadows that appear only on the side with more to scroll: `local` gradients cover them at the ends */
+@utility scroll-x-hint {
+  --shadow-edge: color-mix(in oklch, var(--foreground) 18%, transparent);
+  background:
+    linear-gradient(to right, var(--background), transparent) 0 0 / 24px 100% no-repeat local,
+    linear-gradient(to left, var(--background), transparent) 100% 0 / 24px 100% no-repeat local,
+    radial-gradient(farthest-side at 0 50%, var(--shadow-edge), transparent) 0 0 / 12px 100%
+      no-repeat scroll,
+    radial-gradient(farthest-side at 100% 50%, var(--shadow-edge), transparent) 100% 0 / 12px 100%
+      no-repeat scroll;
+  background-color: var(--background);
 }

package/templates/template-start/src/routes/_authenticated/index.tsx

@@ -26,7 +26,7 @@ function HomePage() {
   return (
     <main className='flex flex-1 flex-col gap-6'>
       <div className='flex flex-col gap-1'>
-        <h1 className='text-2xl font-semibold'>PLACEHOLDER</h1>
+        <h1 className='text-2xl font-semibold'>Home</h1>
         <p className='text-sm text-muted-foreground'>Signed in as {user.email}</p>
       </div>
       {/* realtime:start */}

package/templates/template-start/src/routes/_authenticated/notes/$noteId.tsx

@@ -4,6 +4,7 @@ import { ArrowLeft } from 'lucide-react'
 import { isNotFound } from '@/api'
 import { noteQuery, useNote } from '@/api/notes'
 import { buttonVariants } from '@/components/ui/button'
+import { formatDate } from '@/lib/format'
 
 export const Route = createFileRoute('/_authenticated/notes/$noteId')({
   loader: async ({ context, params }) => {
@@ -31,7 +32,7 @@ function NotePage() {
       <header className='space-y-1'>
         <h1 className='text-2xl font-semibold'>{note.title}</h1>
         <p className='text-xs text-muted-foreground'>
-          <time dateTime={note.createdAt}>{new Date(note.createdAt).toLocaleDateString()}</time>
+          <time dateTime={note.createdAt}>{formatDate(note.createdAt)}</time>
         </p>
       </header>
       {note.body ? (

package/templates/template-start/src/routes/_authenticated/notes/index.tsx

@@ -1,11 +1,20 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Link, createFileRoute } from '@tanstack/react-router'
 import { Trash2 } from 'lucide-react'
+import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 
 import { notesQuery, useCreateNote, useDeleteNote, useDeletingNoteIds, useNotes } from '@/api/notes'
-import { CreateNoteSchema } from '@/api/notes/schema'
+import { CreateNoteSchema, type Note } from '@/api/notes/schema'
 import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from '@/components/ui/empty'
 import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
@@ -22,6 +31,9 @@ function NotesPage() {
   const createNote = useCreateNote()
   const deleteNote = useDeleteNote()
   const deleting = new Set(useDeletingNoteIds())
+  // deleting a note is final, so it is confirmed rather than undone.
+  // the note outlives `open`: the dialog is still on screen while it animates out
+  const [confirm, setConfirm] = useState<{ note: Note; open: boolean } | null>(null)
   const {
     register,
     handleSubmit,
@@ -33,6 +45,7 @@ function NotesPage() {
   })
 
   const onSubmit = handleSubmit(values => createNote.mutate(values, { onSuccess: () => reset() }))
+  const close = () => setConfirm(current => current && { ...current, open: false })
 
   return (
     <main className='mx-auto w-full max-w-md space-y-6'>
@@ -90,11 +103,11 @@ function NotesPage() {
                 {note.title}
               </Link>
               <Button
-                variant='ghost'
+                variant='destructive'
                 size='icon-sm'
                 aria-label={`Delete ${note.title}`}
                 disabled={deleting.has(note.id)}
-                onClick={() => deleteNote.mutate(note.id)}
+                onClick={() => setConfirm({ note, open: true })}
               >
                 <Trash2 />
               </Button>
@@ -102,6 +115,31 @@ function NotesPage() {
           ))}
         </ul>
       )}
+
+      <Dialog open={confirm?.open === true} onOpenChange={next => !next && close()}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete this note?</DialogTitle>
+            <DialogDescription>
+              “{confirm?.note.title}” will be removed for good. This cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant='outline' onClick={close}>
+              Cancel
+            </Button>
+            <Button
+              variant='destructive'
+              onClick={() => {
+                if (confirm) deleteNote.mutate(confirm.note.id)
+                close()
+              }}
+            >
+              Delete note
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </main>
   )
 }

package/templates/template-start/src/routes/_authenticated/orders/index.tsx

@@ -18,7 +18,14 @@ import {
 import { CreateOrderDialog } from '@/components/orders/create-order-dialog'
 import { statusLabel } from '@/components/orders/order-status'
 import { OrdersTable, type OrdersSorting } from '@/components/orders/orders-table'
-import { buttonVariants } from '@/components/ui/button'
+import { Button, buttonVariants } from '@/components/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle
+} from '@/components/ui/empty'
 import { Input } from '@/components/ui/input'
 import {
   Select,
@@ -84,11 +91,36 @@ function OrdersPage() {
     })
   const onSorting = ({ sort, order }: OrdersSorting) =>
     void navigate({ search: prev => ({ ...prev, sort, order, page: 1 }) })
+  const onClearFilters = () =>
+    void navigate({ search: prev => ({ ...prev, q: undefined, status: undefined, page: 1 }) })
   const onPageSize = (value: string | null) =>
     void navigate({
       search: prev => ({ ...prev, pageSize: Number(value) as (typeof PAGE_SIZES)[number], page: 1 })
     })
 
+  const filtered = Boolean(search.q || search.status)
+  const empty = (
+    <Empty className='border-none'>
+      <EmptyHeader>
+        <EmptyTitle>
+          {search.q ? `No orders match \u201C${search.q}\u201D` : 'No orders to show'}
+        </EmptyTitle>
+        <EmptyDescription>
+          {filtered ? 'Try another search or status.' : 'Create the first one to see it here.'}
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        {filtered ? (
+          <Button variant='outline' onClick={onClearFilters}>
+            Clear filters
+          </Button>
+        ) : (
+          <CreateOrderDialog />
+        )}
+      </EmptyContent>
+    </Empty>
+  )
+
   return (
     <main className='flex flex-1 flex-col gap-4'>
       <div className='flex flex-wrap items-center justify-between gap-2'>
@@ -100,6 +132,7 @@ function OrdersPage() {
         orders={data.items}
         sorting={search}
         onSortingChange={onSorting}
+        empty={empty}
         busy={busy}
         toolbar={
           <>