brustjs 0.1.28-alpha → 0.1.29-alpha

package/example/pokedex/components/AddToTeamButton.tsx

@@ -1,36 +1,50 @@
 // NATIVE INTERACTIVE COMPONENT (Spec B dogfood) — the "Add to team / In your
-// team" toggle on the detail page. Formerly a React island; now a single-file
-// native directive component: a co-located `export const behavior` (client
-// logic, react-free) + a JSX `default` export (the native template the compiler
-// lowers to minijinja). The build bundles ONLY `behavior` into _directives.js;
-// the JSX default is tree-shaken out so react never leaks into the client bundle.
+// team" toggle on the detail page. A single-file native directive component: a
+// co-located `export const behavior` (client logic, react-free) + a JSX
+// `default` export (the native template the compiler lowers to minijinja). The
+// build bundles ONLY `behavior` into _directives.js; the JSX default is
+// tree-shaken out so react never leaks into the client bundle.
 //
 // The behavior is react-free: `signal`/`computed` from brustjs/store (the window
 // singleton on the client), `client` from brustjs/client (the treaty action
 // client — also react-free), and the shared teamStore. NO react imports.
+import { Plus } from 'lucide-react'
 import { client } from 'brustjs/client'
 import { computed, signal } from 'brustjs/store'
 import type { Actions } from '../actions'
-import type { AddToTeamProps } from '../lib/types'
+import type { TeamMember } from '../lib/types'
 import { teamStore } from '../stores/team'
 
 const api = client<Actions>()
 
+interface AddToTeamProps {
+  id: number
+  name: string
+  displayName: string
+  num: string
+  types: string[]
+  artwork: string
+}
+
+const BASE =
+  'inline-flex w-full items-center justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand-600 disabled:opacity-50'
+const IN_TEAM =
+  'inline-flex w-full items-center justify-center rounded-lg bg-slate-200 px-4 py-2.5 text-sm font-semibold text-slate-700 transition-colors disabled:opacity-50 dark:bg-slate-700 dark:text-slate-100'
+
 // behavior → client bundle, registered as "addToTeamButton" (camelCase filename).
 // `props` is the JSON parsed out of the element's x-props attribute (precomputed
 // by the loader as a JSON string — native templates can't call JSON.stringify).
 export const behavior = ({ props }: { props: AddToTeamProps }) => {
-  // Shared store (GAP S4): writing teamStore.members here is observed by the
-  // TeamBuilder island — they resolve the same window singleton. A native
-  // x-on-click mutation is therefore seen reactively by a React island.
   const busy = signal(false)
   const full = signal(false)
-  const inTeam = computed(() => (teamStore.members() ?? []).some((m) => m.id === props.id))
-  const label = computed(() =>
-    inTeam() ? '✓ In your team' : disabled() || full() ? 'Team Full' : '＋ Add to team',
+  const inTeam = computed(() =>
+    ((teamStore.members() ?? []) as TeamMember[]).some((m) => m.id === props.id),
   )
-  const btnClass = computed(() => `aa-btn aa-btn--full${inTeam() ? ' aa-btn--secondary' : ''}`)
   const disabled = computed(() => busy() || ((teamStore.members()?.length ?? 0) >= 6 && !inTeam()))
+  const label = computed(() =>
+    inTeam() ? 'In your team' : disabled() || full() ? 'Team Full' : 'Add to team',
+  )
+  const btnClass = computed(() => (inTeam() ? IN_TEAM : BASE))
 
   async function init() {
     const r = await api.team.get()
@@ -41,7 +55,6 @@ export const behavior = ({ props }: { props: AddToTeamProps }) => {
     busy.set(true)
     try {
       if (inTeam()) {
-        // Bodyless DELETE is OK now (GAPS S12 fixed) — no more `.delete({})`.
         const { data } = await api.team({ id: props.id }).delete()
         if (data) teamStore.members.set(data.team)
       } else {
@@ -57,7 +70,7 @@ export const behavior = ({ props }: { props: AddToTeamProps }) => {
           full.set(false)
           teamStore.members.set(data.team)
         } else if (error?.value.code === 'TEAM_FULL') {
-          full.set(true) // server rejected — team full; surface instead of silent no-op
+          full.set(true)
         }
       }
     } finally {
@@ -74,17 +87,21 @@ export const behavior = ({ props }: { props: AddToTeamProps }) => {
 // string, emitted by the compiler as x-props="{{ (data) | e }}" (XSS-safe).
 export default function AddToTeamButton({ data }: { data: string }) {
   return (
-    <div x-data="addToTeamButton" x-props={data} style={{ position: 'relative' }}>
+    <div x-data="addToTeamButton" x-props={data} className="relative">
+      <Plus
+        size={16}
+        className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-white"
+        isr={{ key: 'LcIconPlus' }}
+      />
       <button
         type="button"
         x-text="label"
         x-bind-class="btnClass"
         x-bind-disabled="disabled"
         x-on-click="toggle"
-        className="aa-btn aa-btn--full"
-        style={{ width: '100%' }}
+        className="inline-flex w-full items-center justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand-600 disabled:opacity-50"
       >
-        ＋ Add to team
+        Add to team
       </button>
     </div>
   )

package/example/pokedex/components/AppLayout.tsx

@@ -1,20 +1,15 @@
 // Router-level native layout (Approach a: nested routes + <Outlet/>). Written
 // ONCE and nested as the parent of every page route in routes.tsx. The synth
-// wrapper the compiler builds is `<AppLayout native><Leaf native/></AppLayout>`
-// — AppLayout receives NO props at the call site, so the chrome data it renders
-// (title / active / crumb / teamProps) comes from the MERGED LOADER CONTEXT
-// instead (F5 chrome-prop migration). Each leaf loader returns those fields and
-// the chain-loader merge folds them into one flat jinja context; the names
-// below are destructured so the native compiler resolves them as member-paths
-// ({{ title }}, active === 'list', <TeamBuilder props={teamProps}/>).
+// wrapper the compiler builds is `<AppLayout native><Leaf native/></AppLayout>`.
+// The chrome data it renders (title / crumb / teamProps / mode) comes from the
+// MERGED LOADER CONTEXT: each leaf loader returns those fields and the
+// chain-loader merge folds them into one flat jinja context; the names below are
+// destructured so the native compiler resolves them as member-paths.
 //
-// MUST stay single-return with no local bindings above it — a local `const`
+// MUST stay single-return with NO local bindings above it — a local `const`
 // would make the compiler soft-fall-back to an SSR component (no <html> shell).
-// Active-nav is now CLIENT-driven: each <NavLink> is a native directive component
-// whose behavior watches brustjs/navigation's `nav.path` and sets is-active itself
-// (no SSR `active` conditional, no data-brust-active-nav magic). AppLayout owns the
-// single <main> (leaves are fragments in the <Outlet/> slot) — a leaf adding its
-// own <main> breaks SPA-nav extraction. See ../FRAMEWORK-GAPS.md.
+// AppLayout owns the single <main> (leaves are fragments in the <Outlet/> slot).
+import { GitFork } from 'lucide-react'
 import { BrustPage, Island, Outlet } from 'brustjs'
 import type { TeamMember } from '../lib/types'
 import NavLink from './NavLink'
@@ -24,12 +19,10 @@ import ThemeToggle from './ThemeToggle'
 
 export default function AppLayout({
   title,
-  crumb,
   teamProps,
   mode,
 }: {
   title: string
-  crumb: string
   teamProps: { teamInitial: TeamMember[] }
   mode: 'dark' | 'light'
 }) {
@@ -40,48 +33,53 @@ export default function AppLayout({
       title={title}
       head={[{ tag: 'link', rel: 'icon', href: '/favicon.svg' }]}
     >
-      <div className="aa-app">
-        <aside className="aa-sidebar">
-          <div className="aa-sidebar__brand">
-            <div className="aa-sidebar__brand-mark">P</div>
-            <div className="grow truncate">
-              <div className="aa-sidebar__brand-name">PokéDex</div>
-              <div className="aa-sidebar__brand-sub">brust example app</div>
-            </div>
-            <span className="aa-sidebar__env">native</span>
-          </div>
-          <nav className="aa-sidebar__nav">
-            <div className="aa-sidebar__group-title">Pokédex</div>
-            <NavLink native href="/" label="All Pokémon" />
-            <NavLink native href="/type-chart" label="Type chart" count="native" />
-          </nav>
-          <div className="aa-sidebar__user">
-            <span className="aa-avatar aa-avatar--sm dex-brand-avatar">B</span>
-            <div className="grow truncate dex-user">
-              <div className="dex-user__name">brust dev</div>
-              <div className="dex-user__host">localhost</div>
-            </div>
-          </div>
-        </aside>
-
-        <main className="aa-main">
-          <header className="aa-topbar">
-            <div className="aa-topbar__crumb">
-              <a href="/" className="dex-crumb__root">
+      <div className="min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100">
+        <header className="sticky top-0 z-50 border-b border-slate-200 bg-white/80 backdrop-blur-md dark:border-slate-800 dark:bg-slate-950/80">
+          <nav className="mx-auto flex h-16 max-w-6xl items-center gap-2 px-4">
+            <a href="/" className="mr-2 flex items-center gap-2 no-underline">
+              <span className="grid h-8 w-8 place-items-center rounded-lg bg-brand-500 text-sm font-extrabold text-white">
+                P
+              </span>
+              <span className="text-base font-extrabold tracking-tight text-slate-900 dark:text-white">
                 PokéDex
-              </a>
-              <span className="dex-crumb__sep">›</span>
-              <b>{crumb}</b>
+              </span>
+            </a>
+            <NavLink native href="/" label="Home" />
+            <NavLink native href="/pokedex" label="Pokédex" />
+            <NavLink native href="/type-chart" label="Type chart" />
+            <div className="ml-auto flex items-center gap-2">
+              <ThemeToggle native />
+              {/* Team dock opens via the TeamBuilder island's own floating trigger
+                  (the island owns its open state). A navbar button here would be a
+                  dead affordance — cross-chunk toggle wiring is out of scope. */}
             </div>
-            <ThemeToggle native />
-          </header>
+          </nav>
+        </header>
 
-          <div className="aa-content">
+        <main className="mx-auto max-w-6xl px-4 py-8">
+          <div className="container">
             <Outlet />
           </div>
         </main>
 
-        <Island component={TeamBuilder} props={teamProps} ssr hydrate="load" />
+        <footer className="flex items-center justify-center gap-3 border-t border-slate-200 py-6 text-center text-xs text-slate-400 dark:border-slate-800">
+          <span>Built with brust · data from PokeAPI</span>
+          <a
+            href="https://github.com/AssetsArt/brust"
+            className="inline-flex items-center text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200"
+            aria-label="brust on GitHub"
+          >
+            <GitFork size={16} isr={{ key: 'LcIconGitFork' }} />
+          </a>
+        </footer>
+
+        <Island
+          component={TeamBuilder}
+          props={teamProps}
+          ssr
+          hydrate="load"
+          isr={{ key: 'TeamBuilderDock', tags: ['team'] }}
+        />
         <Island component={NavPreloader} hydrate="load" />
       </div>
     </BrustPage>

package/example/pokedex/components/Breadcrumb.tsx

@@ -0,0 +1,49 @@
+// NATIVE INTERACTIVE COMPONENT — the breadcrumb leaf. It lives in AppLayout's
+// persistent shell (OUTSIDE <main>), so the SSR-baked `crumb` would go stale on
+// SPA navigation (only <main>/<Outlet> swaps; the shell does not re-render). Like
+// NavLink, the fix is to WATCH the navigation store: a `computed` over `nav.path()`
+// re-derives the label on every SPA nav, so the breadcrumb updates without a reload.
+//
+// Single-file component: `export const behavior` → _directives.js (react-free);
+// the JSX default → the native template the compiler lowers to minijinja. The SSR
+// text is the loader's `crumb` (correct for the first paint); the behavior takes
+// over on hydration and on each navigation.
+import { nav } from 'brustjs/navigation'
+import { computed } from 'brustjs/store'
+
+const STATIC_LABELS: Record<string, string> = {
+  '/': 'Home',
+  '/pokedex': 'Pokédex',
+  '/type-chart': 'Type chart',
+}
+
+// Capitalize + de-dash a path segment (mirrors pokeapi `cap`, inlined to keep the
+// directive chunk free of the loader/fetch module).
+const cap = (s: string): string =>
+  s ? s.charAt(0).toUpperCase() + s.slice(1).replace(/-/g, ' ') : s
+
+/** Derive the crumb label from the current path — the detail route carries the
+ *  Pokémon name in the path itself (`/pokemon/ivysaur` → "Ivysaur"), so no loader
+ *  data is needed client-side. */
+function deriveCrumb(path: string): string {
+  if (STATIC_LABELS[path]) return STATIC_LABELS[path] as string
+  const seg = path.split('/').filter(Boolean)
+  if (seg[0] === 'pokemon' && seg[1]) return cap(seg[1])
+  return cap(seg[seg.length - 1] ?? '') || 'Home'
+}
+
+// behavior → registered as "breadcrumb". Watches nav.path; x-text binds `label`.
+export const behavior = () => {
+  const label = computed(() => deriveCrumb(nav.path()))
+  return { label }
+}
+
+// default → jinja. SSR renders the loader `crumb`; `x-text="label"` overrides it on
+// bind and on every SPA navigation.
+export default function Breadcrumb({ crumb }: { crumb: string }) {
+  return (
+    <b x-data="breadcrumb" x-text="label" className="text-slate-600 dark:text-slate-300">
+      {crumb}
+    </b>
+  )
+}

package/example/pokedex/components/DexFilter.tsx

@@ -0,0 +1,108 @@
+// NATIVE INTERACTIVE COMPONENT — the browse-page dex grid with live search +
+// sort. The LOAD-BEARING dogfood of keyed `x-for` (0.1.28-alpha): the grid
+// reconciles by `c.id` as the filtered/sorted list changes, no full re-render.
+//
+// Single-file native directive: `export const behavior` (react-free client
+// logic) bundled into _directives.js as "dexFilter"; the JSX default lowered to
+// minijinja. The full item list arrives as the loader-precomputed `x-props`
+// JSON string (native templates can't call JSON.stringify), parsed into the
+// behavior `props`. NO react imports — `signal`/`computed` from brustjs/store.
+import { ArrowDownAZ, Hash, Search } from 'lucide-react'
+import { computed, signal } from 'brustjs/store'
+
+interface Card {
+  id: number
+  name: string
+  displayName: string
+  num: string
+  artwork: string
+  detailHref: string
+}
+
+export const behavior = ({ props }: { el: HTMLElement; props: unknown }) => {
+  const all = ((props as { items?: Card[] })?.items ?? []) as Card[]
+  const q = signal('')
+  const sortAz = signal(false)
+  const filtered = computed(() => {
+    const needle = q().trim().toLowerCase()
+    let out = needle ? all.filter((c) => c.name.includes(needle)) : all.slice()
+    if (sortAz()) out = out.slice().sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
+    return out
+  })
+  const onInput = (e: Event) => q.set((e.target as HTMLInputElement).value)
+  const setDex = () => sortAz.set(false)
+  const setAz = () => sortAz.set(true)
+  const countLabel = computed(() => `${filtered().length} / ${all.length}`)
+  return { q, sortAz, filtered, onInput, setDex, setAz, countLabel }
+}
+
+export default function DexFilter({ data }: { data?: string }) {
+  return (
+    <section x-data="dexFilter" x-props={data}>
+      <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="relative w-full sm:max-w-xs">
+          <Search
+            size={16}
+            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
+            isr={{ key: 'LcIconSearchField' }}
+          />
+          <input
+            type="search"
+            x-on-input="onInput"
+            placeholder="Search Pokémon…"
+            className="w-full rounded-xl border border-slate-200 bg-white py-2.5 pl-9 pr-4 text-sm text-slate-900 shadow-sm transition-colors placeholder:text-slate-400 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/30 dark:border-slate-700 dark:bg-slate-900 dark:text-white"
+          />
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="inline-flex overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700">
+            <button
+              type="button"
+              x-on-click="setDex"
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
+            >
+              <Hash size={14} isr={{ key: 'LcIconHash14' }} />
+              Dex#
+            </button>
+            <button
+              type="button"
+              x-on-click="setAz"
+              className="inline-flex items-center gap-1.5 border-l border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
+            >
+              <ArrowDownAZ size={14} isr={{ key: 'LcIconArrowDownAZ14' }} />
+              A–Z
+            </button>
+          </div>
+          <span
+            x-text="countLabel"
+            className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold tabular-nums text-slate-500 dark:bg-slate-800 dark:text-slate-400"
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+        {/* biome-ignore lint/a11y/useValidAnchor: href is bound at hydration via x-bind-href (the template clone gets c.detailHref) */}
+        <a
+          x-for="c in filtered by c.id"
+          x-bind-href="c.detailHref"
+          className="group flex flex-col items-center rounded-2xl border border-slate-200 bg-white p-3 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
+            x-text="c.num"
+            className="self-start text-[11px] font-semibold tabular-nums text-slate-400"
+          />
+          {/* biome-ignore lint/a11y/useAltText: alt is bound at hydration via x-bind-alt (c.displayName) */}
+          <img
+            x-bind-src="c.artwork"
+            x-bind-alt="c.displayName"
+            loading="lazy"
+            className="h-24 w-24 object-contain transition-transform group-hover:scale-110"
+          />
+          <div
+            x-text="c.displayName"
+            className="mt-1 text-sm font-semibold text-slate-800 dark:text-slate-100"
+          />
+        </a>
+      </div>
+    </section>
+  )
+}

package/example/pokedex/components/HeroSearch.tsx

@@ -0,0 +1,51 @@
+// NATIVE INTERACTIVE COMPONENT — the hero search box. Single-file native
+// directive: a co-located `export const behavior` (client logic, react-free) +
+// a JSX `default` export (the native template the compiler lowers to
+// minijinja). The build bundles ONLY `behavior` into _directives.js, registered
+// as "heroSearch" (camelCase filename); the JSX default is tree-shaken out.
+//
+// react-free: `signal` from brustjs/store (the window singleton on the client),
+// `navigate` from brustjs/navigation (imperative SPA navigation). On submit the
+// behavior pushes /pokedex with the typed query — dogfooding imperative
+// navigate() + query-object serialization.
+import { Search } from 'lucide-react'
+import { navigate } from 'brustjs/navigation'
+import { signal } from 'brustjs/store'
+
+// behavior → registered as "heroSearch". Tracks the input value via x-on-input
+// and navigates to the browse page with `?q=` on submit/click.
+export const behavior = () => {
+  const value = signal('')
+  const onInput = (e: Event) => value.set((e.target as HTMLInputElement).value)
+  const go = (e?: Event) => {
+    e?.preventDefault()
+    navigate('/pokedex', { query: { q: value() } })
+  }
+  return { value, onInput, go }
+}
+
+// default → jinja. The <form> submit and the button click both call `go`; the
+// input feeds the `value` signal through `onInput`.
+export default function HeroSearch() {
+  return (
+    <form
+      x-data="heroSearch"
+      x-on-submit="go"
+      className="mx-auto mt-8 flex w-full max-w-md items-center gap-2 rounded-2xl bg-white/95 p-2 shadow-lg ring-1 ring-black/5 dark:bg-slate-900/90 dark:ring-white/10"
+    >
+      <input
+        type="search"
+        placeholder="Search the Pokédex…"
+        x-on-input="onInput"
+        className="min-w-0 flex-1 rounded-xl bg-transparent px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-white"
+      />
+      <button
+        type="submit"
+        className="inline-flex items-center gap-1.5 rounded-xl bg-brand-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand-600"
+      >
+        <Search size={16} isr={{ key: 'LcIconSearch' }} />
+        Search
+      </button>
+    </form>
+  )
+}

package/example/pokedex/components/NavLink.tsx

@@ -1,50 +1,43 @@
-// NATIVE INTERACTIVE COMPONENT — a sidebar nav link whose active state is driven
-// by the navigation store, WATCHED in the behavior and applied by the author (no
-// data-brust-active-nav magic attribute). This is the "consume the nav store
-// yourself" pattern: `nav` from brustjs/navigation is a plain reactive source
-// (signals shared cross-chunk via brustjs/store's Symbol.for tracker), so a
-// `computed` over `nav.path()` re-runs on every SPA navigation — the same store
-// the React island reads via useNav(). The bootstrap-owned navigator commits
-// nav.path; this behavior reacts.
+// NATIVE INTERACTIVE COMPONENT — a navbar link whose active state is driven by
+// the navigation store, WATCHED in the behavior and applied by the author. `nav`
+// from brustjs/navigation is a plain reactive source (signals shared cross-chunk
+// via brustjs/store's Symbol.for tracker), so a `computed` over `nav.path()`
+// re-runs on every SPA navigation — the same store the React island reads via
+// useNav(). The bootstrap-owned navigator commits nav.path; this behavior reacts.
 //
 // Single-file component: `export const behavior` → _directives.js (react-free);
 // the JSX default → the native template the compiler lowers to minijinja.
 import { nav } from 'brustjs/navigation'
 import { computed } from 'brustjs/store'
 
+const BASE =
+  'inline-flex items-center rounded-lg px-3 py-1.5 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white'
+const ACTIVE =
+  'inline-flex items-center rounded-lg px-3 py-1.5 text-sm font-semibold text-brand-600 bg-brand-50 transition-colors dark:text-brand-50 dark:bg-brand-600/20'
+
 // behavior → registered as "navLink". Reads the link's own href off the element
 // (no x-props needed), watches nav.path, and returns the active className +
 // aria-current. x-bind-class sets the full className; x-bind-aria-current with a
 // null value removes the attribute (see runtime setBound).
 export const behavior = ({ el }: { el: HTMLElement }) => {
   const linkPath = new URL((el as HTMLAnchorElement).href, location.href).pathname
-  const cls = computed(() => (nav.path() === linkPath ? 'aa-nav-item is-active' : 'aa-nav-item'))
+  const cls = computed(() => (nav.path() === linkPath ? ACTIVE : BASE))
   const current = computed(() => (nav.path() === linkPath ? 'page' : null))
   return { cls, current }
 }
 
-// default → jinja. The SSR className is the inactive base; the behavior sets
-// is-active on bind and on every SPA nav. `count` is an optional native inline
-// conditional (the "native" chip on the type-chart link).
-export default function NavLink({
-  href,
-  label,
-  count,
-}: {
-  href: string
-  label: string
-  count?: string
-}) {
+// default → jinja. The SSR className is the inactive base; the behavior sets the
+// active class on bind and on every SPA nav.
+export default function NavLink({ href, label }: { href: string; label: string }) {
   return (
     <a
       x-data="navLink"
       x-bind-class="cls"
       x-bind-aria-current="current"
-      className="aa-nav-item"
+      className="inline-flex items-center rounded-lg px-3 py-1.5 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white"
       href={href}
     >
       <span>{label}</span>
-      {count ? <span className="aa-nav-item__count">{count}</span> : null}
     </a>
   )
 }

package/example/pokedex/components/NavPreloader.tsx

@@ -5,7 +5,7 @@
 // `brustjs/navigation` through brustjs/store's cross-chunk signal tracker.
 //
 // Placed OUTSIDE <main> in AppLayout so the bootstrap navigator (which only
-// unmounts/​swaps islands inside <main>) never tears it down during the very
+// unmounts/swaps islands inside <main>) never tears it down during the very
 // navigation it is indicating. It renders nothing when idle, and an indeterminate
 // bar while `phase === 'loading'`.
 import { useNav } from 'brustjs/client'
@@ -14,8 +14,12 @@ export default function NavPreloader() {
   const { phase } = useNav()
   if (phase !== 'loading') return null
   return (
-    <div className="nav-preloader" role="progressbar" aria-label="กำลังโหลดหน้า">
-      <div className="nav-preloader__bar" />
+    <div
+      className="fixed inset-x-0 top-0 z-[300] h-0.5 overflow-hidden bg-brand-500/20"
+      role="progressbar"
+      aria-label="Loading page"
+    >
+      <div className="h-full w-1/3 animate-pulse bg-brand-500" />
     </div>
   )
 }