brustjs 0.1.28-alpha → 0.1.30-alpha

package/example/pokedex/pages/HomePage.tsx

@@ -0,0 +1,229 @@
+// Native leaf route "/" — the landing page. Renders into AppLayout's <Outlet/>
+// slot (chrome lives in AppLayout). SINGLE return, NO local bindings — a local
+// `const` would soft-fall-back to an SSR component and lose the document shell.
+//
+// Everything dynamic is precomputed in homeLoader: `featured` cards, `typeTiles`
+// (each carrying its own hex `color` for an inline style, since Tailwind's
+// scanner can't see runtime-built type-color classes). The hero search box is
+// the HeroSearch native directive (imperative navigate() dogfood).
+import {
+  ArrowRight,
+  Box,
+  Component,
+  Cookie,
+  Database,
+  Layout,
+  List,
+  Navigation,
+  Server,
+  Table,
+  Zap,
+} from 'lucide-react'
+import HeroSearch from '../components/HeroSearch'
+import type { HomeData } from '../lib/types'
+
+export default function HomePage({ featured, typeTiles }: HomeData) {
+  return (
+    <div className="space-y-16 py-4">
+      <section className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-500 via-brand-600 to-indigo-700 px-6 py-16 text-center shadow-xl sm:px-12">
+        <span className="inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-white/90 ring-1 ring-white/20">
+          Built with brust
+        </span>
+        <h1 className="mx-auto mt-5 max-w-2xl text-4xl font-extrabold tracking-tight text-white sm:text-5xl">
+          Every Pokémon, one fast native-rendered Pokédex.
+        </h1>
+        <p className="mx-auto mt-4 max-w-xl text-base text-white/85 sm:text-lg">
+          Browse the National Dex, study the type chart, and build your dream team — server-rendered
+          in Rust, hydrated only where it counts.
+        </p>
+        <HeroSearch native />
+        <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
+          <a
+            href="/pokedex"
+            className="inline-flex items-center gap-2 rounded-xl bg-white px-5 py-2.5 text-sm font-semibold text-brand-700 no-underline shadow-sm transition-transform hover:-translate-y-0.5"
+          >
+            Browse Pokédex
+            <ArrowRight size={16} isr={{ key: 'LcIconArrowRight' }} />
+          </a>
+          <a
+            href="/type-chart"
+            className="inline-flex items-center gap-2 rounded-xl bg-white/15 px-5 py-2.5 text-sm font-semibold text-white no-underline ring-1 ring-white/30 transition-colors hover:bg-white/25"
+          >
+            <Table size={16} isr={{ key: 'LcIconTable' }} />
+            Type chart
+          </a>
+        </div>
+      </section>
+
+      <section>
+        <div className="mb-5 flex items-end justify-between">
+          <h2 className="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-white">
+            Featured
+          </h2>
+          <a
+            href="/pokedex"
+            className="inline-flex items-center gap-1 text-sm font-semibold text-brand-600 no-underline hover:underline dark:text-brand-50"
+          >
+            View all
+            <ArrowRight size={14} isr={{ key: 'LcIconArrowRight14' }} />
+          </a>
+        </div>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          {featured.map((p) => (
+            <a
+              key={p.id}
+              href={p.detailHref}
+              className="group flex flex-col items-center rounded-2xl border border-slate-200 bg-white p-4 no-underline shadow-sm transition-all hover:-translate-y-0.5 hover:border-brand-500/50 hover:shadow-md dark:border-slate-800 dark:bg-slate-900"
+            >
+              <span className="self-start text-[11px] font-semibold tabular-nums text-slate-400">
+                {p.num}
+              </span>
+              <img
+                src={p.artwork}
+                alt={p.displayName}
+                loading="lazy"
+                className="h-28 w-28 object-contain transition-transform group-hover:scale-110"
+              />
+              <div className="mt-1 text-sm font-semibold text-slate-800 dark:text-slate-100">
+                {p.displayName}
+              </div>
+            </a>
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <h2 className="mb-5 text-2xl font-extrabold tracking-tight text-slate-900 dark:text-white">
+          Browse by type
+        </h2>
+        <div className="grid grid-cols-3 gap-2.5 sm:grid-cols-6">
+          {typeTiles.map((t) => (
+            <a
+              key={t.name}
+              href={t.href}
+              style={{ background: t.color }}
+              className="flex items-center justify-center rounded-xl px-3 py-2.5 text-sm font-semibold text-white no-underline shadow-sm transition-transform hover:-translate-y-0.5"
+            >
+              {t.label}
+            </a>
+          ))}
+        </div>
+      </section>
+
+      <section className="overflow-hidden rounded-3xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <div className="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h2 className="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-white">
+              Build your team
+            </h2>
+            <p className="mt-2 max-w-md text-slate-500 dark:text-slate-400">
+              Add up to six Pokémon from any detail page. Your team lives in the floating dock and
+              follows you across the whole site.
+            </p>
+          </div>
+          <a
+            href="/pokedex"
+            className="inline-flex shrink-0 items-center gap-2 rounded-xl bg-brand-500 px-5 py-2.5 text-sm font-semibold text-white no-underline shadow-sm transition-colors hover:bg-brand-600"
+          >
+            Start picking
+            <ArrowRight size={16} isr={{ key: 'LcIconArrowRight' }} />
+          </a>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="mb-1 text-2xl font-extrabold tracking-tight text-slate-900 dark:text-white">
+          Built with brust
+        </h2>
+        <p className="mb-6 max-w-2xl text-slate-500 dark:text-slate-400">
+          This whole site is one brust app. Every box below is a real framework feature dogfooded
+          right here.
+        </p>
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
+              <Server size={16} className="text-brand-500" isr={{ key: 'LcIconServer' }} />
+              Native SSR routes
+            </div>
+            <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+              Every page is JSX compiled to minijinja and rendered in Rust.
+            </div>
+          </div>
+          <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
+              <Database size={16} className="text-brand-500" isr={{ key: 'LcIconDatabase' }} />
+              Loaders + ISR
+            </div>
+            <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+              Loaders fetch PokeAPI and precompute the view-model; cached responses stay fast.
+            </div>
+          </div>
+          <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
+              <Cookie size={16} className="text-brand-500" isr={{ key: 'LcIconCookie' }} />
+              Cookies / request-context
+            </div>
+            <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+              The theme toggle reads and writes the <code>mode</code> cookie per request.
+            </div>
+          </div>
+          <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
+              <Box size={16} className="text-brand-500" isr={{ key: 'LcIconBox' }} />
+              defineStore
+            </div>
+            <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+              The team dock is a window-singleton store shared across islands.
+            </div>
+          </div>
+          <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
+              <Navigation size={16} className="text-brand-500" isr={{ key: 'LcIconNavigation' }} />
+              Client navigation
+            </div>
+            <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+              NavLink active state, NavPreloader prefetch, and imperative navigate() in the hero
+              search.
+            </div>
+          </div>
+          <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
+              <Component size={16} className="text-brand-500" isr={{ key: 'LcIconComponent' }} />
+              React islands
+            </div>
+            <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+              The team dock hydrates as a React island while the page stays native.
+            </div>
+          </div>
+          <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
+              <List size={16} className="text-brand-500" isr={{ key: 'LcIconList' }} />
+              Keyed x-for
+            </div>
+            <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+              The browse grid filters and sorts live with a keyed, react-free reconcile.
+            </div>
+          </div>
+          <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
+              <Layout size={16} className="text-brand-500" isr={{ key: 'LcIconLayout' }} />
+              Nested Outlet layout
+            </div>
+            <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+              The navbar, breadcrumb, and footer are written once and nested over every route.
+            </div>
+          </div>
+          <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-white">
+              <Zap size={16} className="text-brand-500" isr={{ key: 'LcIconZap' }} />
+              Treaty actions
+            </div>
+            <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+              Add-to-team and theme persistence call type-safe server actions over treaty.
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

package/example/pokedex/pages/TypeChart.tsx

@@ -1,42 +1,61 @@
-// Route "/type-chart" — NATIVE leaf route, rendered into AppLayout's <Outlet/>
-// slot (chrome lives in AppLayout). Returns JUST its inner aa-content fragment.
-// A static 18×18 type-effectiveness matrix: pure read-only data, the ideal
-// native page (compiled to jinja, rendered in Rust, zero React on the server).
-// The 19×19 grid uses nested `.map()` on the native path: rows.map(r =>
-// r.cells.map(c => …)) into a CSS grid.
+// Native leaf route "/type-chart" — the 18×18 type-effectiveness matrix.
+// Renders into AppLayout's <Outlet/> slot (chrome lives in AppLayout). SINGLE
+// return, NO local bindings. Pure read-only data → the ideal native page
+// (compiled to jinja, rendered in Rust, zero React on the server).
+//
+// The 19×19 grid uses nested `.map()`: rows.map(r => r.cells.map(c => …)) into a
+// CSS grid. Each row wrapper is `display:contents` (Tailwind `contents`) so
+// every cell is a direct grid item — the row div leaves no box. Cell coloring
+// is a static Tailwind utility class string the loader picks per effectiveness
+// (literals in a .ts file, so `@source` scans them). The header row + row heads
+// are `sticky` (also set in the loader class strings).
 import type { TypeChartData } from '../lib/types'
 
 export default function TypeChart({ rows }: TypeChartData) {
   return (
-    <>
-      <div className="aa-page-header">
-        <div>
-          <h1 className="aa-page-header__title">Type chart</h1>
-          <div className="aa-page-header__desc">
-            Damage relations · row attacks column · rendered ฝั่ง Rust จาก jinja (native:true · ไม่มี
-            React runtime ใน payload)
-          </div>
-        </div>
+    <section className="py-2">
+      <div className="mb-5">
+        <h1 className="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">
+          Type chart
+        </h1>
+        <p className="mt-2 max-w-2xl text-slate-500 dark:text-slate-400">
+          Damage relations — rows attack, columns defend. Rendered server-side in Rust from jinja
+          (native:true · no React runtime in the payload).
+        </p>
       </div>
 
-      <div className="dex-tc-legend">
-        <span className="dex-tc-legend__item">
-          <span className="dex-tc__cell dex-tc__cell--super dex-tc__swatch">2</span> super effective
+      <div className="mb-4 flex flex-wrap items-center gap-4 text-sm text-slate-500 dark:text-slate-400">
+        <span className="inline-flex items-center gap-1.5">
+          <span className="flex h-5 w-5 items-center justify-center rounded bg-green-500/25 text-xs font-bold text-green-700 dark:text-green-300">
+            2
+          </span>
+          super effective
         </span>
-        <span className="dex-tc-legend__item">
-          <span className="dex-tc__cell dex-tc__cell--weak dex-tc__swatch">½</span> not very
+        <span className="inline-flex items-center gap-1.5">
+          <span className="flex h-5 w-5 items-center justify-center rounded bg-red-500/20 text-xs font-bold text-red-700 dark:text-red-300">
+            ½
+          </span>
+          not very effective
         </span>
-        <span className="dex-tc-legend__item">
-          <span className="dex-tc__cell dex-tc__cell--none dex-tc__swatch">0</span> no effect
+        <span className="inline-flex items-center gap-1.5">
+          <span className="flex h-5 w-5 items-center justify-center rounded bg-slate-800/80 text-xs font-bold text-slate-200">
+            0
+          </span>
+          no effect
         </span>
       </div>
 
-      <div className="dex-tc-scroll">
-        <div className="dex-tc">
+      <div className="overflow-x-auto rounded-2xl border border-slate-200 bg-white p-2 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <div className="grid w-max grid-cols-[2.75rem_repeat(18,2.25rem)] gap-px">
           {rows.map((r) => (
-            <div key={r.id} className="dex-tc__row">
+            <div key={r.id} className="contents">
               {r.cells.map((c) => (
-                <div key={c.id} className={c.className} title={c.title}>
+                <div
+                  key={c.id}
+                  className={c.className}
+                  title={c.title}
+                  style={{ background: c.bg }}
+                >
                   {c.content}
                 </div>
               ))}
@@ -44,6 +63,6 @@ export default function TypeChart({ rows }: TypeChartData) {
           ))}
         </div>
       </div>
-    </>
+    </section>
   )
 }

package/example/pokedex/routes.tsx

@@ -1,35 +1,24 @@
 import { defineRoutes } from 'brustjs/routes'
 import AppLayout from './components/AppLayout'
-import { detailLoader, listLoader, typeChartLoader } from './lib/loaders'
+import { browseLoader, detailLoader, homeLoader, typeChartLoader } from './lib/loaders'
+import HomePage from './pages/HomePage'
+import BrowsePage from './pages/BrowsePage'
 import DetailPage from './pages/DetailPage'
-import ListPage from './pages/ListPage'
 import TypeChart from './pages/TypeChart'
 
 // Every route is `native: true` — each page is compiled from JSX to a minijinja
-// template at build time and rendered in Rust (no per-request React). The loader
-// runs in a Bun worker and its return value becomes the template scope. The only
-// React that ever boots in the browser is the islands (TeamBuilder /
-// AddToTeamButton). See ./FRAMEWORK-GAPS.md for what this costs.
-//
-// ROUTER-LEVEL LAYOUT (Approach a): the chrome (sidebar / topbar / team-dock) is
-// written ONCE in AppLayout, nested as the parent of the three leaf routes. Each
-// leaf renders into AppLayout's <Outlet/> slot. The compiler builds the synth
-// wrapper `<AppLayout native><Leaf native/></AppLayout>` per leaf and runs the
-// chain loaders top-down, shallow-merging into one flat jinja context. The leaf
-// loaders therefore also return the chrome fields (title/active/crumb/teamProps)
-// that AppLayout reads — see lib/loaders.ts and components/AppLayout.tsx.
+// template at build time and rendered in Rust. The loader runs in a Bun worker
+// and its return value becomes the template scope. The chrome (navbar / footer /
+// team-dock) is written ONCE in AppLayout, nested as the parent of the four leaf
+// routes; each leaf renders into AppLayout's <Outlet/> slot.
 export const routes = defineRoutes([
   {
     Component: AppLayout,
     native: true,
     children: [
-      // List + pagination (query string via req.search, validated by hand in the loader).
-      { path: '/', Component: ListPage, native: true, loader: listLoader },
-
-      // Dynamic param {name} + a (non-streamed) evolution chain loaded in the loader.
+      { path: '/', Component: HomePage, native: true, loader: homeLoader },
+      { path: '/pokedex', Component: BrowsePage, native: true, loader: browseLoader },
       { path: '/pokemon/{name}', Component: DetailPage, native: true, loader: detailLoader },
-
-      // Static 18×18 effectiveness matrix — the ideal native page.
       { path: '/type-chart', Component: TypeChart, native: true, loader: typeChartLoader },
     ],
   },

package/example/pokedex/stores/team.ts

@@ -4,7 +4,7 @@
 // module-scope store imported by both would be duplicated into two instances
 // that never sync. `defineStore` resolves both bundles to ONE instance on
 // `window.__BRUST_STORES__['pokedex.team']`, so a write in one island is seen by
-// the other — no hand-rolled CustomEvent bus. (Replaces the old components/team-bus.ts.)
+// the other — no hand-rolled CustomEvent bus.
 import { defineStore, signal } from 'brustjs/store'
 import type { TeamMember } from '../lib/types'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brustjs",
-  "version": "0.1.28-alpha",
+  "version": "0.1.30-alpha",
   "description": "Bun + Rust SSR framework — React on the server, Rust everywhere else (napi cdylib + per-worker SharedArrayBuffer).",
   "license": "MIT",
   "repository": {
@@ -40,12 +40,12 @@
     "typescript": "^6.0.3"
   },
   "optionalDependencies": {
-    "brustjs-darwin-x64": "0.1.28-alpha",
-    "brustjs-darwin-arm64": "0.1.28-alpha",
-    "brustjs-linux-x64-gnu": "0.1.28-alpha",
-    "brustjs-linux-arm64-gnu": "0.1.28-alpha",
-    "brustjs-linux-x64-musl": "0.1.28-alpha",
-    "brustjs-linux-arm64-musl": "0.1.28-alpha"
+    "brustjs-darwin-x64": "0.1.30-alpha",
+    "brustjs-darwin-arm64": "0.1.30-alpha",
+    "brustjs-linux-x64-gnu": "0.1.30-alpha",
+    "brustjs-linux-arm64-gnu": "0.1.30-alpha",
+    "brustjs-linux-x64-musl": "0.1.30-alpha",
+    "brustjs-linux-arm64-musl": "0.1.30-alpha"
   },
   "peerDependencies": {
     "react": "^19.2.6",
@@ -57,6 +57,7 @@
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "happy-dom": "^20.9.0",
+    "lucide-react": "^1.17.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "zod": "^4.4.3"