@brust/create-app 0.0.0-stage → 2.0.0-alpha.1

package/templates/pokedex/lib/api.ts

@@ -0,0 +1,5 @@
+// examples/pokedex/lib/api.ts — browser-safe; the App import is type-only (the elysia lane's browser guard refuses a value import).
+import { client } from '@brust/core/client'
+import type { App } from '../actions'
+
+export const api = client<App>()

package/templates/pokedex/lib/filter.ts

@@ -0,0 +1,6 @@
+import type { DexCard } from './types'
+export function filterSort(items: DexCard[], q: string, az: boolean): DexCard[] {
+  const needle = q.trim().toLowerCase()
+  const out = needle ? items.filter((c) => c.name.includes(needle)) : items.slice()
+  return az ? out.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0)) : out
+}

package/templates/pokedex/lib/format.ts

@@ -0,0 +1,4 @@
+export const fmtHeight = (dm: number) => `${(dm / 10).toFixed(1)} m`
+export const fmtWeight = (hg: number) => `${(hg / 10).toFixed(1)} kg`
+export const tint = (type: string) => ({ normal: '#9099a1', fire: '#ef7444', water: '#4d90d5', grass: '#63bb5b', electric: '#f5c84b', ice: '#74cec0', fighting: '#ce4069', poison: '#ab6ac8', ground: '#d97746', flying: '#8fa8dd', psychic: '#f06fa0', bug: '#90c12c', rock: '#c7b78b', ghost: '#5269ac', dragon: '#0a6dc4', dark: '#5a5366', steel: '#5a8ea1', fairy: '#ec8fe6' } as Record<string, string>)[type] ?? '#888888'
+export const label = (type: string) => type.charAt(0).toUpperCase() + type.slice(1)

package/templates/pokedex/lib/loaders.ts

@@ -0,0 +1,192 @@
+// examples/pokedex/lib/loaders.ts
+import { type LoaderCtx, type LoaderReq, notFound, type Verdict } from '@brust/core/routes'
+import { team } from '../stores/team'
+import { unified } from '../stores/unified'
+import { ALL_TYPES, artwork, cap, fetchEvolution, fetchList, fetchPokemon, fetchSpecies, fetchTypeRelations, pad, STAT_LABEL, statBucket, TYPE_COLOR } from './pokeapi'
+import { MAX_TEAM } from './team'
+import { teamDb } from './team-db'
+import type { BrowseData, DetailData, HomeData, TypeChartCellVM, TypeChartData, TypeChartRowVM } from './types'
+
+const FEATURED = [{ id: 1, name: 'bulbasaur' }, { id: 4, name: 'charmander' }, { id: 7, name: 'squirtle' }, { id: 25, name: 'pikachu' }, { id: 39, name: 'jigglypuff' }, { id: 94, name: 'gengar' }, { id: 143, name: 'snorlax' }, { id: 150, name: 'mewtwo' }]
+/** Layout loader: seeds the request's store scope, so every layout page paints the DB roster (D4/E7). */
+export function layoutLoader(): void {
+  team.members.set(teamDb().list())
+  team.max.set(MAX_TEAM)
+}
+const NAV = [{ href: '/', label: 'Home' }, { href: '/pokedex', label: 'Pokédex' }, { href: '/type-chart', label: 'Type chart' }, { href: '/unified', label: 'Unified' }]
+const card = (p: { id: number; name: string }) => ({ id: p.id, name: p.name, displayName: cap(p.name), num: pad(p.id), artwork: artwork(p.id), detailHref: `/pokemon/${p.name}` })
+
+/** Chrome every leaf returns: AppLayout reads it from the merged loader context (child keys win). */
+const chrome = (req: LoaderReq, path: string, title: string, crumb: string) => ({
+  title, crumb,
+  mode: (req.cookies.mode === 'light' ? 'light' : 'dark') as 'light' | 'dark',
+  nav: NAV.map((n) => ({ ...n, active: n.href === path })),
+})
+
+export async function homeLoader({ req, path }: LoaderCtx): Promise<HomeData> {
+  return { ...chrome(req, path, 'PokéDex · built with brust', 'Home'), featured: FEATURED.map(card), types: ALL_TYPES }
+}
+export async function browseLoader({ req, path }: LoaderCtx): Promise<BrowseData> {
+  const q = (req.search.q ?? '').trim().toLowerCase()
+  const { results } = await fetchList(0, 151)
+  return { ...chrome(req, path, 'Pokédex · Browse', 'Pokédex'), q, items: results.filter((r) => !q || r.name.includes(q)).map(card) }
+}
+const BAR_COLOR: Record<string, string> = { hi: '#16a34a', mid: '#0ea5e9', low: '#f59e0b', min: '#ef4444' }
+export async function detailLoader({ params, req, path }: LoaderCtx<{ name: string }>): Promise<DetailData | Verdict> {
+  const name = params.name ?? ''
+  const p = await fetchPokemon(name)
+  if (!p) return notFound(emptyDetail(req, path, name))
+  const species = await fetchSpecies(p.id)
+  const evo = await fetchEvolution(species.evolutionUrl)
+  const tint = TYPE_COLOR[p.types[0] ?? 'normal'] ?? '#888888'
+  return {
+    ...chrome(req, path, `${cap(p.name)} · PokéDex`, cap(p.name)),
+    notFound: false, name: p.name, id: p.id, displayName: cap(p.name), num: pad(p.id), artwork: p.artwork,
+    genus: species.genus, flavorText: species.flavorText,
+    height: p.height, weight: p.weight,                       // raw: DetailPage's job formats them (D4)
+    typeNames: p.types,                                       // TypeBadge per row (D4)
+    heroBg: `linear-gradient(160deg, ${tint}33, transparent 70%)`,
+    stats: p.stats.map((s) => ({ label: STAT_LABEL[s.name] ?? s.name, base: s.base, barWidth: `${Math.min(100, Math.round((s.base / 200) * 100))}%`, barColor: BAR_COLOR[statBucket(s.base)] ?? '#0ea5e9' })),
+    statTotal: p.stats.reduce((a, s) => a + s.base, 0),
+    abilities: p.abilities.map((a) => ({ displayName: cap(a), initial: a.charAt(0).toUpperCase(), iconColor: tint })),
+    hasAbilities: p.abilities.length > 0,
+    evolution: evo.map((s, i) => ({ id: s.id, displayName: cap(s.name), num: pad(s.id), artwork: artwork(s.id), detailHref: `/pokemon/${s.name}`, levelLabel: s.minLevel != null ? `Lv ${s.minLevel}` : '', isFirst: i === 0, showLevel: i > 0 && s.minLevel != null, isCurrent: s.id === p.id })),
+    hasEvolution: evo.length > 1,
+    abilityCount: p.abilities.length,
+  }
+}
+function emptyDetail(req: LoaderReq, path: string, name: string): DetailData {
+  return { ...chrome(req, path, `${cap(name)} · PokéDex`, cap(name)), notFound: true, name, id: 0, displayName: cap(name), num: '', artwork: '', genus: '', flavorText: '', height: 0, weight: 0, typeNames: [], heroBg: '', stats: [], statTotal: 0, abilities: [], hasAbilities: false, evolution: [], hasEvolution: false, abilityCount: 0 }
+}
+const SHORT: Record<string, string> = {
+  normal: 'NOR',
+  fire: 'FIR',
+  water: 'WAT',
+  electric: 'ELE',
+  grass: 'GRA',
+  ice: 'ICE',
+  fighting: 'FIG',
+  poison: 'POI',
+  ground: 'GRO',
+  flying: 'FLY',
+  psychic: 'PSY',
+  bug: 'BUG',
+  rock: 'ROC',
+  ghost: 'GHO',
+  dragon: 'DRA',
+  dark: 'DAR',
+  steel: 'STE',
+  fairy: 'FAI',
+}
+
+// Effectiveness → static Tailwind utility class string. These are literals in a
+// .ts file scanned by `@source`, so the scanner sees every class. The header /
+// row-head / corner / data cells share a base sizing class.
+// Effectiveness → static Tailwind utility class string. Every cell gets a solid
+// fill so the `gap-px` over a slate gridline background reads as a continuous
+// grid (the old design left 1× cells transparent → black voids you couldn't
+// trace). `hover:` lifts a cell with an inset brand ring to pinpoint a matchup.
+const CELL_BASE =
+  'flex items-center justify-center text-xs font-bold tabular-nums aspect-square transition-colors hover:relative hover:z-10 hover:ring-2 hover:ring-inset hover:ring-brand-500'
+const HEAD_BASE =
+  'flex items-center justify-center text-[10px] font-bold uppercase tracking-tight text-white aspect-square'
+// Fill hierarchy so the grid reads as FULL (every cell visibly distinct from
+// the slate gridline showing through `gap-px`):
+//   light: card white < gridline slate-200, normal slate-50, 0 slate-800
+//   dark:  card slate-900 < gridline slate-700, normal slate-800, 0 slate-950
+// (normal must NOT equal the card colour or cells vanish; 0 must differ from
+// normal or "no effect" looks like a blank.)
+const CELL_CLASS: Record<string, string> = {
+  super: `${CELL_BASE} bg-emerald-500 text-white`,
+  weak: `${CELL_BASE} bg-rose-400 text-white dark:bg-rose-500`,
+  none: `${CELL_BASE} bg-slate-800 text-slate-100 dark:bg-slate-950 dark:text-slate-400`,
+  normal: `${CELL_BASE} bg-slate-50 text-slate-300 dark:bg-slate-800 dark:text-slate-600`,
+}
+
+function buildRows(relations: Record<string, number>[]): TypeChartRowVM[] {
+  const rows: TypeChartRowVM[] = []
+
+  const headerCells: TypeChartCellVM[] = [
+    {
+      id: '0-0',
+      className: `${HEAD_BASE} sticky left-0 top-0 z-20 text-[9px]`,
+      content: 'ATK／DEF',
+      title: 'Attacking ／ Defending',
+      bg: '#334155', // slate-700
+    },
+  ]
+  ALL_TYPES.forEach((def, j) => {
+    headerCells.push({
+      id: `0-${j + 1}`,
+      className: `${HEAD_BASE} sticky top-0 z-10`,
+      content: SHORT[def] ?? def.slice(0, 3).toUpperCase(),
+      title: cap(def),
+      bg: TYPE_COLOR[def] ?? '#888888',
+    })
+  })
+  rows.push({ id: '0', cells: headerCells })
+
+  ALL_TYPES.forEach((atk, i) => {
+    const rel = relations[i] ?? {}
+    const rowCells: TypeChartCellVM[] = [
+      {
+        id: `${i + 1}-0`,
+        className: `${HEAD_BASE} sticky left-0 z-10`,
+        content: SHORT[atk] ?? atk.slice(0, 3).toUpperCase(),
+        title: cap(atk),
+        bg: TYPE_COLOR[atk] ?? '#888888',
+      },
+    ]
+    ALL_TYPES.forEach((def, j) => {
+      const mult = rel[def]
+      const id = `${i + 1}-${j + 1}`
+      if (mult === 2)
+        rowCells.push({
+          id,
+          className: CELL_CLASS.super!,
+          content: '2',
+          title: `${cap(atk)} → ${cap(def)}: 2× (super effective)`,
+          bg: '',
+        })
+      else if (mult === 0.5)
+        rowCells.push({
+          id,
+          className: CELL_CLASS.weak!,
+          content: '½',
+          title: `${cap(atk)} → ${cap(def)}: ½× (not very effective)`,
+          bg: '',
+        })
+      else if (mult === 0)
+        rowCells.push({
+          id,
+          className: CELL_CLASS.none!,
+          content: '0',
+          title: `${cap(atk)} → ${cap(def)}: 0× (no effect)`,
+          bg: '',
+        })
+      else
+        rowCells.push({
+          id,
+          className: CELL_CLASS.normal!,
+          content: '',
+          title: `${cap(atk)} → ${cap(def)}: 1×`,
+          bg: '',
+        })
+    })
+    rows.push({ id: String(i + 1), cells: rowCells })
+  })
+
+  return rows
+}
+
+export async function typeChartLoader({ req, path }: LoaderCtx): Promise<TypeChartData> {
+  const relations = await Promise.all(ALL_TYPES.map((t) => fetchTypeRelations(t)))
+  const rows: TypeChartRowVM[] = buildRows(relations)
+  return { ...chrome(req, path, 'PokéDex · type chart', 'Type chart'), rows }
+}
+
+export async function unifiedLoader({ req, path }: LoaderCtx) {
+  const start = Math.max(0, Math.min(1_000_000, Math.trunc(Number(req.search.start) || 0)))
+  unified.count.set(start)
+  return chrome(req, path, 'Unified store · PokéDex', 'Unified')
+}

package/templates/pokedex/lib/pokeapi.ts

@@ -0,0 +1,43 @@
+// examples/pokedex/lib/pokeapi.ts — the 0.1.x helper surface, served from data/pokedex.json (no network).
+import snap from '../data/pokedex.json'
+import type { TeamMember } from './types'
+
+export interface RawPokemon { id: number; name: string; types: string[]; stats: { name: string; base: number }[]; height: number; weight: number; abilities: string[]; artwork: string }
+export interface RawSpecies { flavorText: string; genus: string; evolutionUrl: string }
+export interface RawEvolutionStage { id: number; name: string; minLevel: number | null }
+
+const byName = new Map(snap.pokemon.map((p) => [p.name, p]))
+const byId = new Map(snap.pokemon.map((p) => [p.id, p]))
+
+export const artwork = (id: number): string => byId.get(id)?.artwork ?? `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${id}.png`
+export const cap = (s: string): string => (s ? s.charAt(0).toUpperCase() + s.slice(1).replace(/-/g, ' ') : s)
+export const pad = (n: number): string => `#${String(n).padStart(4, '0')}`
+export const TYPE_COLOR: Record<string, string> = { normal: '#9099a1', fire: '#ef7444', water: '#4d90d5', grass: '#63bb5b', electric: '#f5c84b', ice: '#74cec0', fighting: '#ce4069', poison: '#ab6ac8', ground: '#d97746', flying: '#8fa8dd', psychic: '#f06fa0', bug: '#90c12c', rock: '#c7b78b', ghost: '#5269ac', dragon: '#0a6dc4', dark: '#5a5366', steel: '#5a8ea1', fairy: '#ec8fe6' }
+export const STAT_LABEL: Record<string, string> = { hp: 'HP', attack: 'Atk', defense: 'Def', 'special-attack': 'Sp.Atk', 'special-defense': 'Sp.Def', speed: 'Spd' }
+export const statBucket = (base: number): string => (base >= 100 ? 'hi' : base >= 60 ? 'mid' : base >= 35 ? 'low' : 'min')
+export const ALL_TYPES = ['normal','fire','water','electric','grass','ice','fighting','poison','ground','flying','psychic','bug','rock','ghost','dragon','dark','steel','fairy']
+
+export async function fetchList(offset: number, limit: number) {
+  return { results: snap.pokemon.slice(offset, offset + limit).map((p) => ({ id: p.id, name: p.name })), total: snap.pokemon.length }
+}
+export async function fetchPokemon(name: string): Promise<RawPokemon | null> {
+  const p = byName.get(name)
+  return p ? { id: p.id, name: p.name, types: p.types, stats: p.stats, height: p.height, weight: p.weight, abilities: p.abilities, artwork: p.artwork } : null
+}
+/** `evolutionUrl` is the Pokémon id as a string: the key `fetchEvolution` reads (0.1.x carried a URL). */
+export async function fetchSpecies(id: number): Promise<RawSpecies> {
+  const p = byId.get(id)
+  return p ? { flavorText: p.flavorText, genus: p.genus, evolutionUrl: String(id) } : { flavorText: '', genus: '', evolutionUrl: '' }
+}
+export async function fetchEvolution(key: string): Promise<RawEvolutionStage[]> {
+  return key ? (byId.get(Number(key))?.evolution ?? []) : []
+}
+export async function fetchTypeRelations(type: string): Promise<Record<string, number>> {
+  return (snap.types as Record<string, Record<string, number>>)[type] ?? {}
+}
+
+/** The roster member for a Pokémon id, built from the offline snapshot (so a client cannot forge display data). */
+export function pokemonById(id: number): TeamMember | null {
+  const p = byId.get(id)
+  return p ? { id: p.id, name: p.name, displayName: cap(p.name), num: pad(p.id), types: p.types, artwork: p.artwork } : null
+}

package/templates/pokedex/lib/team-client.ts

@@ -0,0 +1,26 @@
+// examples/pokedex/lib/team-client.ts — the one place UI code mutates the team; every reply is written to the store.
+import { team } from '../stores/team'
+import { api } from './api'
+import type { TeamMember } from './types'
+
+type Reply = { data: { team: TeamMember[]; max: number } | null; error: { status: unknown } | null }
+const apply = (r: Reply): void => {
+  if (r.data) {
+    team.members.set(r.data.team)
+    team.max.set(r.data.max)
+  }
+}
+export async function refreshTeam(): Promise<void> {
+  apply(await api.team.get())
+}
+export async function removeMember(id: number): Promise<void> {
+  apply(await api.team({ id }).delete())
+}
+export async function addMember(id: number): Promise<void> {
+  const r = await api.team.post({ id })
+  if (r.error?.status === 409) return refreshTeam() // someone else filled the team: show the truth
+  apply(r)
+}
+export async function toggleMember(id: number, inTeam: boolean): Promise<void> {
+  return inTeam ? removeMember(id) : addMember(id)
+}

package/templates/pokedex/lib/team-db.ts

@@ -0,0 +1,52 @@
+// examples/pokedex/lib/team-db.ts — server-only (brust.toml [build] server_only). The team is ONE shared roster, as in
+// 0.1.x, but persisted: every worker thread opens the same file (WAL), so workers never diverge (M3-F E7).
+import { Database } from 'bun:sqlite'
+import { mkdirSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { MAX_TEAM } from './team'
+import type { TeamMember } from './types'
+
+export type AddResult = 'added' | 'present' | 'full'
+export interface TeamDb {
+  list(): TeamMember[]
+  add(m: TeamMember): AddResult
+  remove(id: number): boolean
+  close(): void
+}
+
+interface Row { id: number; name: string; display_name: string; num: string; types: string; artwork: string }
+
+export function openTeamDb(file: string): TeamDb {
+  if (file !== ':memory:') mkdirSync(dirname(file), { recursive: true })
+  const db = new Database(file, { create: true })
+  db.exec('PRAGMA journal_mode = WAL; PRAGMA busy_timeout = 5000')
+  db.exec(
+    'CREATE TABLE IF NOT EXISTS team (id INTEGER PRIMARY KEY, name TEXT NOT NULL, display_name TEXT NOT NULL, num TEXT NOT NULL, types TEXT NOT NULL, artwork TEXT NOT NULL, added_at INTEGER NOT NULL)',
+  )
+  const listQ = db.query<Row, []>('SELECT id, name, display_name, num, types, artwork FROM team ORDER BY added_at, rowid')
+  const hasQ = db.query<{ one: number }, [number]>('SELECT 1 AS one FROM team WHERE id = ?')
+  const countQ = db.query<{ n: number }, []>('SELECT COUNT(*) AS n FROM team')
+  const insertQ = db.query('INSERT INTO team (id, name, display_name, num, types, artwork, added_at) VALUES (?, ?, ?, ?, ?, ?, MAX(?, (SELECT COALESCE(MAX(added_at), 0) + 1 FROM team)))')
+  const deleteQ = db.query('DELETE FROM team WHERE id = ?')
+  // added_at is a clock that never repeats (MAX(now, last + 1)): rowid IS the Pokémon id, so it cannot break same-ms ties.
+  // count check + insert under ONE write lock (.immediate): two workers adding at five members cannot both succeed.
+  const addTx = db.transaction((m: TeamMember): AddResult => {
+    if (hasQ.get(m.id)) return 'present'
+    if ((countQ.get()?.n ?? 0) >= MAX_TEAM) return 'full'
+    insertQ.run(m.id, m.name, m.displayName, m.num, JSON.stringify(m.types), m.artwork, Date.now())
+    return 'added'
+  })
+  return {
+    list: () => listQ.all().map((r) => ({ id: r.id, name: r.name, displayName: r.display_name, types: JSON.parse(r.types) as string[], artwork: r.artwork, num: r.num })),
+    add: (m) => addTx.immediate(m),
+    remove: (id) => deleteQ.run(id).changes > 0,
+    close: () => db.close(),
+  }
+}
+
+let shared: TeamDb | null = null
+export const teamDbPath = (): string => process.env.POKEDEX_TEAM_DB || join(process.cwd(), 'data/team.sqlite')
+/** Opened lazily on first use: `brust build` imports routes.tsx, and building must not create the file. */
+export function teamDb(): TeamDb {
+  return (shared ??= openTeamDb(teamDbPath()))
+}

package/templates/pokedex/lib/team.ts

@@ -0,0 +1,2 @@
+// examples/pokedex/lib/team.ts — isomorphic: stores, the client and the server all import it.
+export const MAX_TEAM = 6

package/templates/pokedex/lib/types.ts

@@ -0,0 +1,126 @@
+// Domain + view-model types for the PokéDex example.
+//
+// Loaders return plain data; components are ordinary React functions.
+
+/** Team roster member. */
+export interface TeamMember {
+  id: number
+  name: string
+  displayName: string
+  types: string[]
+  artwork: string
+  num: string
+}
+
+/** Chrome view-model the router-level AppLayout reads from the MERGED loader
+ *  context. Each leaf loader returns these fields; the chain-loader merge folds
+ *  them into the one flat jinja context AppLayout's template reads. */
+export interface NavItem {
+  href: string
+  label: string
+  active: boolean
+}
+
+export interface ChromeData {
+  title: string
+  crumb: string
+  mode: 'dark' | 'light'
+  nav: NavItem[]
+}
+
+/** A single dex grid cell — derived from the list endpoint alone (no detail
+ *  fetch). */
+export interface DexCard {
+  id: number
+  name: string
+  displayName: string // "Bulbasaur"
+  num: string // "#0001"
+  artwork: string // CDN URL derived from id
+  detailHref: string // "/pokemon/bulbasaur"
+}
+
+/** One base-stat bar row on the detail page. All formatting precomputed. */
+export interface StatBarVM {
+  label: string // "HP" / "Atk" …
+  base: number // raw base value
+  barWidth: string // "62%" — fed into style={{ width }}
+  barColor: string // hex per bucket — fed into style={{ background }}
+}
+
+/** One ability chip on the detail page. */
+export interface AbilityVM {
+  displayName: string // "Overgrow"
+  initial: string // "O"
+  iconColor: string // hex tint — style={{ background }}
+}
+
+/** One stage of the evolution chain. */
+export interface EvoStageVM {
+  id: number
+  displayName: string
+  num: string // "#0001"
+  artwork: string
+  detailHref: string // "/pokemon/ivysaur"
+  levelLabel: string // "Lv 16" or ""
+  isFirst: boolean
+  showLevel: boolean
+  isCurrent: boolean
+}
+
+/** Home landing page data — curated featured strip + type names + chrome. */
+export interface HomeData extends ChromeData {
+  featured: DexCard[]
+  types: string[]
+}
+
+/** Browse (dex grid) page data. `items` feeds BOTH the SSR `{% for %}` and the
+ *  DexFilter directive's `x-props` (json_attr-serialized) — one array, no separate
+ *  pre-stringified JSON. */
+export interface BrowseData extends ChromeData {
+  items: DexCard[]
+  q: string
+}
+
+/** Detail page data. Every formatted string / className / inline-style value /
+ *  x-props JSON is precomputed here so the native template only interpolates. */
+export interface DetailData extends ChromeData {
+  notFound: boolean
+  name: string
+  id: number
+  displayName: string
+  num: string // "#0001"
+  artwork: string
+  genus: string // "Seed Pokémon"
+  flavorText: string
+  abilityCount: number
+  heroBg: string // CSS gradient string built in the loader from the type tint
+  stats: StatBarVM[]
+  statTotal: number
+  abilities: AbilityVM[]
+  hasAbilities: boolean
+  evolution: EvoStageVM[]
+  hasEvolution: boolean
+  height: number
+  weight: number
+  typeNames: string[]
+}
+
+/** One cell of the type chart. */
+export interface TypeChartCellVM {
+  id: string // stable key "row-col"
+  className: string // static Tailwind utility string the loader picks per effectiveness
+  content: string // "2", "½", "0", a type short-code, or ""
+  title: string // tooltip
+  bg: string // inline background — type hex for header/row-head cells, '' for data cells
+}
+
+/** One row (header or attack) of the type chart — nested cells. */
+export interface TypeChartRowVM {
+  id: string
+  cells: TypeChartCellVM[]
+}
+
+/** Type chart page data — nested rows[].cells[] grid, rendered with nested .map(). */
+export interface TypeChartData extends ChromeData {
+  rows: TypeChartRowVM[]
+}

package/templates/pokedex/package.json.tmpl

@@ -0,0 +1,25 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "brust build routes.tsx && brust start",
+    "build": "brust build routes.tsx",
+    "start": "brust start",
+    "snapshot": "bun scripts/snapshot.ts",
+    "typecheck": "bun check"
+  },
+  "dependencies": {
+    "@brust/core": __BRUST_DEP__,
+    "@elysia/eden": "2.0.0-beta.6",
+    "elysia": "2.0.0-beta.30",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.4.0",
+    "@types/react": "^19.2.0",
+    "typescript": "^7.0.2"
+  }
+}

package/templates/pokedex/pages/BrowsePage.tsx

@@ -0,0 +1,15 @@
+import DexFilter from '../components/DexFilter'
+import type { BrowseData } from '../lib/types'
+
+export default function BrowsePage({ items, q }: BrowseData) {
+  return (
+    <section className="py-2">
+      <div className="mb-6">
+        <h1 className="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">Pokédex</h1>
+        <p className="mt-2 max-w-2xl text-slate-500 dark:text-slate-400">The original 151. Search by name and toggle the sort order.</p>
+        {q && <p className="mt-2 text-sm text-slate-500">Results for “{q}”</p>}
+      </div>
+      <DexFilter items={items} />
+    </section>
+  )
+}