brustjs 0.1.27-alpha → 0.1.29-alpha

package/example/pokedex/lib/loaders.ts

@@ -1,11 +1,9 @@
-// Route loaders. Each runs in a Bun worker (full JS), fetches from PokeAPI, and
-// returns a fully render-ready view-model. Templates now do conditionals (S11),
-// `style={{…}}` objects (S1), and dynamic head props (S8); the loader still
-// precomputes formatted strings, booleans for conditionals, and multi-property
-// style strings (no template-literals / arithmetic / helper calls in templates).
-// See ../FRAMEWORK-GAPS.md.
+// Route loaders. Each runs in a Bun worker (full JS), and returns a fully
+// render-ready view-model. SLICE 1: these are STUBS — they return the chrome
+// fields every page needs (title / crumb / mode / teamProps) plus the minimal
+// data each stub page interpolates. Real PokeAPI-backed data lands in later
+// slices.
 
-import { z } from 'zod'
 import { type BrustRequest, type NativeVerdict, notFound } from 'brustjs/routes'
 import {
   ALL_TYPES,
@@ -22,35 +20,67 @@ import {
   TYPE_COLOR,
 } from './pokeapi'
 import { teamStore } from './team-store'
-import type { DetailData, ListData, TypeBadgeVM, TypeChartCellVM, TypeChartData } from './types'
+import type {
+  BrowseData,
+  DetailData,
+  HomeData,
+  TypeBadgeVM,
+  TypeChartCellVM,
+  TypeChartData,
+  TypeChartRowVM,
+} from './types'
+
+/** A curated set of iconic Pokémon for the home featured strip. Hardcoded
+ *  {id,name} so the home page needs ZERO PokeAPI calls — artwork is derived from
+ *  id, names supply the display label and detail href. */
+const FEATURED: { id: number; name: string }[] = [
+  { 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' },
+]
 
-/** Loader context shape — `loader: ({ params, path, req }) => data`. */
 interface LoaderCtx {
   params: Record<string, string>
   path: string
   req: BrustRequest
 }
 
-const PAGE = 20
-const NATIONAL_MAX = 1302
-
-// GAP S1: query validation is not symmetric with actions. Actions bind a schema
-// in the descriptor and hand the handler a typed+validated `query`; loaders get
-// `req.search` as a raw Record<string,string> and must validate by hand here.
-const ListQuery = z.object({
-  offset: z.coerce.number().int().min(0).max(NATIONAL_MAX).catch(0),
+const chrome = (req: BrustRequest, title: string, crumb: string) => ({
+  title,
+  crumb,
+  mode: (req.cookies.mode === 'light' ? 'light' : 'dark') as 'light' | 'dark',
+  teamProps: { teamInitial: teamStore.list() },
 })
 
-const fmt = (n: number) => n.toLocaleString('en-US')
-const typeBadge = (t: string): TypeBadgeVM => ({
-  label: cap(t),
-  className: `dex-type dex-type--${t}`,
-})
-
-export async function listLoader({ req }: LoaderCtx): Promise<ListData> {
-  const offset = ListQuery.parse(req?.search ?? {}).offset
-  const { results, total } = await fetchList(offset, PAGE)
+export async function homeLoader({ req }: LoaderCtx): Promise<HomeData> {
+  const featured = FEATURED.map((p) => ({
+    id: p.id,
+    name: p.name,
+    displayName: cap(p.name),
+    num: pad(p.id),
+    artwork: artwork(p.id),
+    detailHref: `/pokemon/${p.name}`,
+  }))
+  const typeTiles = ALL_TYPES.map((t) => ({
+    name: t,
+    label: cap(t),
+    color: TYPE_COLOR[t] ?? '#888888',
+    href: '/pokedex',
+  }))
+  return {
+    ...chrome(req, 'PokéDex · built with brust', 'Home'),
+    featured,
+    typeTiles,
+  }
+}
 
+export async function browseLoader({ req }: LoaderCtx): Promise<BrowseData> {
+  const { results } = await fetchList(0, 151)
   const items = results.map((r) => ({
     id: r.id,
     name: r.name,
@@ -59,106 +89,78 @@ export async function listLoader({ req }: LoaderCtx): Promise<ListData> {
     artwork: artwork(r.id),
     detailHref: `/pokemon/${r.name}`,
   }))
-
-  const lastPage = Math.ceil(total / PAGE)
-  const pageNo = Math.floor(offset / PAGE) + 1
-  const hasPrev = offset > 0
-  const hasNext = offset + PAGE < total
-  const prevOffset = Math.max(0, offset - PAGE)
-
   return {
-    items,
-    total,
-    totalLabel: fmt(total),
-    offset,
-    offsetLabel: String(offset),
-    showingLabel: `${fmt(offset + 1)}–${fmt(Math.min(offset + PAGE, total))} of ${fmt(total)}`,
-    pageLabel: `${pageNo} / ${lastPage}`,
-    // Real conditionals now exist in native routes (GAPS S11 closed): the
-    // template branches on these booleans with `{flags.hasPrev ? <a/> : <span/>}`
-    // instead of always-rendering a loader-computed hide-class.
-    hasPrev,
-    hasNext,
-    prevHref: hasPrev ? (prevOffset > 0 ? `/?offset=${prevOffset}` : '/') : '#',
-    nextHref: hasNext ? `/?offset=${offset + PAGE}` : '#',
-    // Chrome fields (ChromeData) — merged into the flat jinja context and read by
-    // the router-level AppLayout (Approach a: native <Outlet/> nesting).
-    title: 'PokéDex · brust example',
-    active: 'list',
-    crumb: 'All Pokémon',
-    teamProps: { teamInitial: teamStore.list() },
-    mode: req.cookies.mode === 'light' ? 'light' : 'dark',
+    ...chrome(req, 'Pokédex · Browse', 'Pokédex'),
+    dexProps: JSON.stringify({ items }),
   }
 }
 
+/** Base-stat bucket → bar fill hex. Bucket order: hi / mid / low / min. */
+const BAR_COLOR: Record<string, string> = {
+  hi: '#16a34a', // green-600
+  mid: '#0ea5e9', // sky-500
+  low: '#f59e0b', // amber-500
+  min: '#ef4444', // red-500
+}
+
+const typeBadge = (t: string): TypeBadgeVM => ({
+  label: cap(t),
+  color: TYPE_COLOR[t] ?? '#888888',
+})
+
 export async function detailLoader({
   params,
   req,
 }: LoaderCtx): Promise<DetailData | NativeVerdict> {
   const name = params?.name ?? ''
-  const mode = req.cookies.mode === 'light' ? 'light' : 'dark'
-  const empty = emptyDetail(name, mode)
+  const empty = emptyDetail(req, name)
 
   const p = await fetchPokemon(name)
-  // GAP S9 (FIXED): native loaders can now `return notFound(data)` to render the
-  // route's OWN template with HTTP 404. The `notFound: true` flag on `empty`
-  // still drives the template's 404-block branch (S11); the sentinel sets the
-  // HTTP STATUS (404 instead of 200). They are complementary. See GAPS S9.
+  // Native loaders can `return notFound(data)` to render THIS route's own
+  // template with HTTP 404. The `notFound: true` flag on `empty` drives the
+  // template's 404-block branch; the sentinel sets the HTTP STATUS.
   if (!p) return notFound(empty)
 
   const species = await fetchSpecies(p.id)
-  // GAP (native↔streaming): a native route renders in Rust with NO React tree,
-  // so <Suspense> streaming is impossible. The evolution chain — the slow fetch
-  // the design wanted to stream — is therefore loaded BLOCKING here in the
-  // loader. See GAPS S3.
+  // A native route renders in Rust with no React tree, so <Suspense> streaming
+  // is impossible — the evolution chain (the slow fetch) is loaded BLOCKING here.
   const rawEvo = await fetchEvolution(species.evolutionUrl)
 
   const primary = p.types[0] ?? 'normal'
-  const tint = TYPE_COLOR[primary] ?? 'var(--primary-500)'
+  const tint = TYPE_COLOR[primary] ?? '#888888'
 
   const stats = p.stats.map((s) => {
     const pct = Math.min(100, Math.round((s.base / 200) * 100))
+    const bucket = statBucket(s.base)
     return {
       label: STAT_LABEL[s.name] ?? s.name,
       base: s.base,
-      // Bare percent — the template builds the declaration via the S1 style
-      // object: `style={{ width: st.barWidth }}` → `width:62%`.
       barWidth: `${pct}%`,
-      barClassName: `dex-statbar__fill dex-statbar__fill--${statBucket(s.base)}`,
+      barColor: BAR_COLOR[bucket] ?? '#0ea5e9',
     }
   })
 
   const abilities = p.abilities.map((a) => ({
     displayName: cap(a),
     initial: a.charAt(0).toUpperCase(),
-    // Bare color value — template does `style={{ background: a.iconColor }}`.
     iconColor: tint,
   }))
 
   const evolution = rawEvo.map((s, i) => ({
     id: s.id,
-    name: s.name,
     displayName: cap(s.name),
     num: pad(s.id),
     artwork: artwork(s.id),
     detailHref: `/pokemon/${s.name}`,
     levelLabel: s.minLevel != null ? `Lv ${s.minLevel}` : '',
-    // Real per-item conditionals now work in native routes (S11): the template
-    // tests these booleans instead of toggling a precomputed `dex-hide` class.
     isFirst: i === 0,
     showLevel: i > 0 && s.minLevel != null,
-    cardClassName: s.id === p.id ? 'dex-evo__card dex-evo__card--current' : 'dex-evo__card',
+    isCurrent: s.id === p.id,
   }))
 
-  const hasEvolution = evolution.length > 1
-
   return {
+    ...chrome(req, `${cap(p.name)} · PokéDex`, cap(p.name)),
     notFound: false,
-    // Chrome fields (ChromeData) read by AppLayout from the merged context.
-    title: `${cap(p.name)} · PokéDex`,
-    active: 'list',
-    crumb: cap(p.name),
-    mode,
     name: p.name,
     id: p.id,
     displayName: cap(p.name),
@@ -169,17 +171,18 @@ export async function detailLoader({
     heightLabel: `${(p.height / 10).toFixed(1)} m`,
     weightLabel: `${(p.weight / 10).toFixed(1)} kg`,
     abilityCount: p.abilities.length,
-    heroBg: `linear-gradient(160deg, color-mix(in srgb, ${tint} 22%, var(--surface-raised)), var(--surface-raised) 70%)`,
+    // Loaders are full JS — template literals are fine HERE (the constraint is
+    // on the native template body only). Brand-tinted hero gradient.
+    heroBg: `linear-gradient(160deg, ${tint}33, transparent 70%)`,
     types: p.types.map(typeBadge),
     stats,
     statTotal: p.stats.reduce((a, s) => a + s.base, 0),
     abilities,
     hasAbilities: abilities.length > 0,
     evolution,
-    hasEvolution,
+    hasEvolution: evolution.length > 1,
     // Native templates can't call JSON.stringify, so precompute the x-props JSON
-    // here. The compiler emits it as x-props="{{ (addProps) | e }}" (XSS-safe);
-    // the directive runtime JSON.parses it back into the behavior's `props`.
+    // here. AddToTeamButton's prop contract is unchanged.
     addProps: JSON.stringify({
       id: p.id,
       name: p.name,
@@ -188,18 +191,13 @@ export async function detailLoader({
       types: p.types,
       artwork: p.artwork,
     }),
-    teamProps: { teamInitial: teamStore.list() },
   }
 }
 
-function emptyDetail(name: string, mode: 'dark' | 'light'): DetailData {
+function emptyDetail(req: BrustRequest, name: string): DetailData {
   return {
+    ...chrome(req, `${cap(name)} · PokéDex`, cap(name)),
     notFound: true,
-    // Chrome fields (ChromeData) read by AppLayout from the merged context.
-    title: `${cap(name)} · PokéDex`,
-    active: 'list',
-    crumb: cap(name),
-    mode,
     name,
     id: 0,
     displayName: cap(name),
@@ -226,7 +224,6 @@ function emptyDetail(name: string, mode: 'dark' | 'light'): DetailData {
       types: [],
       artwork: '',
     }),
-    teamProps: { teamInitial: teamStore.list() },
   }
 }
 
@@ -251,45 +248,58 @@ const SHORT: Record<string, string> = {
   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.
+const CELL_BASE =
+  'flex items-center justify-center text-xs font-semibold tabular-nums aspect-square'
+const HEAD_BASE =
+  'flex items-center justify-center text-[10px] font-bold uppercase tracking-tight text-white aspect-square'
+const CELL_CLASS: Record<string, string> = {
+  super: `${CELL_BASE} bg-green-500/25 text-green-700 dark:text-green-300`,
+  weak: `${CELL_BASE} bg-red-500/20 text-red-700 dark:text-red-300`,
+  none: `${CELL_BASE} bg-slate-800/80 text-slate-200`,
+  normal: `${CELL_BASE} text-slate-300 dark:text-slate-600`,
+}
+
 export async function typeChartLoader({ req }: LoaderCtx): Promise<TypeChartData> {
-  // Fan out 18 distinct type fetches with Promise.all; each goes through
-  // cachedFetch (S2), so duplicate in-flight GETs within the request dedupe.
+  // Fan out 18 type fetches; each goes through cachedFetch so duplicate in-flight
+  // GETs within the request dedupe.
   const relations = await Promise.all(ALL_TYPES.map((t) => fetchTypeRelations(t)))
 
   // Build the 19×19 grid as nested rows (header row + one row per attacking
-  // type). The native template renders it with nested `.map()` — rows.map(r =>
-  // r.cells.map(c => …)) — into the CSS grid (`.dex-tc__row{display:contents}`
-  // keeps every cell a direct grid item, so the layout is unchanged).
-  const rows: TypeChartData['rows'] = []
+  // type). The native template renders it with nested `.map()`.
+  const rows: TypeChartRowVM[] = []
 
-  // Header row: corner + 18 defending-type column heads.
   const headerCells: TypeChartCellVM[] = [
     {
       id: '0-0',
-      className: 'dex-tc__corner',
-      content: 'ATK ＼ DEF',
-      title: 'Attacking ＼ Defending',
+      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: `dex-tc__colhead dex-tc__colhead--${def}`,
+      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 })
 
-  // One row per attacking type: row head + 18 effectiveness cells.
   ALL_TYPES.forEach((atk, i) => {
-    const rel = relations[i]!
+    const rel = relations[i] ?? {}
     const rowCells: TypeChartCellVM[] = [
       {
         id: `${i + 1}-0`,
-        className: `dex-tc__rowhead dex-tc__rowhead--${atk}`,
+        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) => {
@@ -298,42 +308,41 @@ export async function typeChartLoader({ req }: LoaderCtx): Promise<TypeChartData
       if (mult === 2)
         rowCells.push({
           id,
-          className: 'dex-tc__cell dex-tc__cell--super',
+          className: CELL_CLASS.super!,
           content: '2',
           title: `${cap(atk)} → ${cap(def)}: 2× (super effective)`,
+          bg: '',
         })
       else if (mult === 0.5)
         rowCells.push({
           id,
-          className: 'dex-tc__cell dex-tc__cell--weak',
+          className: CELL_CLASS.weak!,
           content: '½',
           title: `${cap(atk)} → ${cap(def)}: ½× (not very effective)`,
+          bg: '',
         })
       else if (mult === 0)
         rowCells.push({
           id,
-          className: 'dex-tc__cell dex-tc__cell--none',
+          className: CELL_CLASS.none!,
           content: '0',
           title: `${cap(atk)} → ${cap(def)}: 0× (no effect)`,
+          bg: '',
         })
       else
         rowCells.push({
           id,
-          className: 'dex-tc__cell',
+          className: CELL_CLASS.normal!,
           content: '',
           title: `${cap(atk)} → ${cap(def)}: 1×`,
+          bg: '',
         })
     })
     rows.push({ id: String(i + 1), cells: rowCells })
   })
 
   return {
+    ...chrome(req, 'PokéDex · type chart', 'Type chart'),
     rows,
-    // Chrome fields (ChromeData) read by AppLayout from the merged context.
-    title: 'PokéDex · type chart',
-    active: 'typechart',
-    crumb: 'Type chart',
-    teamProps: { teamInitial: teamStore.list() },
-    mode: req.cookies.mode === 'light' ? 'light' : 'dark',
   }
 }

package/example/pokedex/lib/pokeapi.ts

@@ -20,28 +20,28 @@ export const cap = (s: string): string =>
 
 export const pad = (n: number): string => `#${String(n).padStart(4, '0')}`
 
-/** Pokémon type → AssetsArt design-token CSS variable (stays inside brand —
- *  no canonical Pokémon colours). Mirrored by `.dex-type--<name>` rules in
- *  app.css. */
+/** Pokémon type → real hex color. Tailwind's scanner can't see runtime-built
+ *  class strings, so type tints are applied as inline `style` values from the
+ *  loader using these hexes. */
 export const TYPE_COLOR: Record<string, string> = {
-  normal: 'var(--ink-400)',
-  fire: 'var(--magenta-500)',
-  water: 'var(--blue-500)',
-  grass: 'var(--success-500)',
-  electric: 'var(--warning-500)',
-  ice: 'var(--viz-4)',
-  fighting: 'var(--viz-3)',
-  poison: 'var(--purple-600)',
-  ground: 'var(--viz-7)',
-  flying: 'var(--viz-5)',
-  psychic: 'var(--purple-500)',
-  bug: 'var(--viz-8)',
-  rock: 'var(--ink-500)',
-  ghost: 'var(--purple-700)',
-  dragon: 'var(--viz-2)',
-  dark: 'var(--ink-800)',
-  steel: 'var(--ink-400)',
-  fairy: 'var(--magenta-300)',
+  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> = {

package/example/pokedex/lib/team-store.ts

@@ -1,7 +1,7 @@
 // In-process team store — a module-scope Map that lives for the whole server
 // process. It is GLOBAL across every request and every visitor: brust ships no
 // per-session / request-context primitive, so for this dogfood the team is a
-// single shared roster. See ../FRAMEWORK-GAPS.md S6.
+// single shared roster.
 
 import type { TeamMember } from './types'