page Packages {
  seo {
    title = "Packages"
    description = "Explore every WRNexusJS package, API, function, and copy-ready usage example."
  }
  state query = ""
  state category = "All"

  view {
    <div class="docs-shell">
      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
      <header class="topbar">
        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.3.2</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
      </header>
      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
      <main class="page"><section class="hero compact"><span class="eyebrow">26 focused packages</span><h1>Package reference</h1><p>Everything in the framework, organized by responsibility and documented from the published 0.3.2 APIs.</p><input class="search" type="search" placeholder="Search packages, features, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter packages by category"><div class="category-row"><button type="button" @click="category = 'All'">All<span>26</span></button><button type="button" @click="category = 'AI'">AI<span>1</span></button><button type="button" @click="category = 'Security'">Security<span>5</span></button><button type="button" @click="category = 'Tooling'">Tooling<span>3</span></button><button type="button" @click="category = 'Core'">Core<span>3</span></button><button type="button" @click="category = 'Frontend'">Frontend<span>5</span></button><button type="button" @click="category = 'Data'">Data<span>3</span></button><button type="button" @click="category = 'Runtime'">Runtime<span>3</span></button><button type="button" @click="category = 'Native'">Native<span>2</span></button><button type="button" @click="category = 'Realtime'">Realtime<span>1</span></button></div><p>Showing <strong>{category}</strong> packages</p></section><section class="package-grid"><a class="package-card" href="/packages/ai" data-show="(category === 'All' ? true : category === 'AI') ? (query === '' ? true : 'ai ai server-side anthropic client with generation and streaming. '.includes(query.toLowerCase())) : false">
          <span class="category">AI</span><h2>@wrnexus/ai</h2><p>Server-side Anthropic client with generation and streaming.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/authz" data-show="(category === 'All' ? true : category === 'Security') ? (query === '' ? true : 'authz security role, permission, policy, and authorization guards. '.includes(query.toLowerCase())) : false">
          <span class="category">Security</span><h2>@wrnexus/authz</h2><p>Role, permission, policy, and authorization guards.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/cli" data-show="(category === 'All' ? true : category === 'Tooling') ? (query === '' ? true : 'cli tooling create, develop, build, generate, test, and maintain wrnexus apps. '.includes(query.toLowerCase())) : false">
          <span class="category">Tooling</span><h2>@wrnexus/cli</h2><p>Create, develop, build, generate, test, and maintain WRNexusJS apps.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/compiler" data-show="(category === 'All' ? true : category === 'Core') ? (query === '' ? true : 'compiler core parser and code generators for the .wrn language. '.includes(query.toLowerCase())) : false">
          <span class="category">Core</span><h2>@wrnexus/compiler</h2><p>Parser and code generators for the .wrn language.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/core" data-show="(category === 'All' ? true : category === 'Core') ? (query === '' ? true : 'core core contexts, middleware, security, sessions, caching, jsx, and realtime. '.includes(query.toLowerCase())) : false">
          <span class="category">Core</span><h2>@wrnexus/core</h2><p>Contexts, middleware, security, sessions, caching, JSX, and realtime.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/csr" data-show="(category === 'All' ? true : category === 'Frontend') ? (query === '' ? true : 'csr frontend reactive, navigation, and realtime browser runtimes. '.includes(query.toLowerCase())) : false">
          <span class="category">Frontend</span><h2>@wrnexus/csr</h2><p>Reactive, navigation, and realtime browser runtimes.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/db" data-show="(category === 'All' ? true : category === 'Data') ? (query === '' ? true : 'db data database adapters, typed queries, models, migrations, and sessions. '.includes(query.toLowerCase())) : false">
          <span class="category">Data</span><h2>@wrnexus/db</h2><p>Database adapters, typed queries, models, migrations, and sessions.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/dev-server" data-show="(category === 'All' ? true : category === 'Runtime') ? (query === '' ? true : 'dev-server runtime development and production servers, hmr, assets, and gateways. '.includes(query.toLowerCase())) : false">
          <span class="category">Runtime</span><h2>@wrnexus/dev-server</h2><p>Development and production servers, HMR, assets, and gateways.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/encryption" data-show="(category === 'All' ? true : category === 'Security') ? (query === '' ? true : 'encryption security hashing, hmac, authenticated encryption, and key derivation. '.includes(query.toLowerCase())) : false">
          <span class="category">Security</span><h2>@wrnexus/encryption</h2><p>Hashing, HMAC, authenticated encryption, and key derivation.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/helpers" data-show="(category === 'All' ? true : category === 'Tooling') ? (query === '' ? true : 'helpers tooling safe context url helpers and forward-auth login redirects. '.includes(query.toLowerCase())) : false">
          <span class="category">Tooling</span><h2>@wrnexus/helpers</h2><p>Safe Context URL helpers and forward-auth login redirects.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/i18n" data-show="(category === 'All' ? true : category === 'Frontend') ? (query === '' ? true : 'i18n frontend translation loading, locale resolution, and intl formatting. '.includes(query.toLowerCase())) : false">
          <span class="category">Frontend</span><h2>@wrnexus/i18n</h2><p>Translation loading, locale resolution, and Intl formatting.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/jwt" data-show="(category === 'All' ? true : category === 'Security') ? (query === '' ? true : 'jwt security hs256 jwt signing, verification, and bearer authentication. '.includes(query.toLowerCase())) : false">
          <span class="category">Security</span><h2>@wrnexus/jwt</h2><p>HS256 JWT signing, verification, and bearer authentication.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/mobile" data-show="(category === 'All' ? true : category === 'Native') ? (query === '' ? true : 'mobile native ssr-safe compatibility access to capacitor plugins. '.includes(query.toLowerCase())) : false">
          <span class="category">Native</span><h2>@wrnexus/mobile</h2><p>SSR-safe compatibility access to Capacitor plugins.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/native" data-show="(category === 'All' ? true : category === 'Native') ? (query === '' ? true : 'native native cross-platform browser and capacitor capability registry. '.includes(query.toLowerCase())) : false">
          <span class="category">Native</span><h2>@wrnexus/native</h2><p>Cross-platform browser and Capacitor capability registry.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/oauth" data-show="(category === 'All' ? true : category === 'Security') ? (query === '' ? true : 'oauth security oauth 2.0, pkce, provider presets, and profile mapping. '.includes(query.toLowerCase())) : false">
          <span class="category">Security</span><h2>@wrnexus/oauth</h2><p>OAuth 2.0, PKCE, provider presets, and profile mapping.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/pubsub" data-show="(category === 'All' ? true : category === 'Realtime') ? (query === '' ? true : 'pubsub realtime in-process and redis-backed publish/subscribe. '.includes(query.toLowerCase())) : false">
          <span class="category">Realtime</span><h2>@wrnexus/pubsub</h2><p>In-process and Redis-backed publish/subscribe.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/queue" data-show="(category === 'All' ? true : category === 'Data') ? (query === '' ? true : 'queue data background jobs with delay, concurrency, retry, and repetition. '.includes(query.toLowerCase())) : false">
          <span class="category">Data</span><h2>@wrnexus/queue</h2><p>Background jobs with delay, concurrency, retry, and repetition.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/reactive" data-show="(category === 'All' ? true : category === 'Frontend') ? (query === '' ? true : 'reactive frontend small type-safe reactive signal primitives. '.includes(query.toLowerCase())) : false">
          <span class="category">Frontend</span><h2>@wrnexus/reactive</h2><p>Small type-safe reactive signal primitives.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/router" data-show="(category === 'All' ? true : category === 'Core') ? (query === '' ? true : 'router core filesystem discovery, route matching, and typed route generation. '.includes(query.toLowerCase())) : false">
          <span class="category">Core</span><h2>@wrnexus/router</h2><p>Filesystem discovery, route matching, and typed route generation.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/ssr" data-show="(category === 'All' ? true : category === 'Runtime') ? (query === '' ? true : 'ssr runtime secure html document rendering and seo metadata. '.includes(query.toLowerCase())) : false">
          <span class="category">Runtime</span><h2>@wrnexus/ssr</h2><p>Secure HTML document rendering and SEO metadata.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/styles" data-show="(category === 'All' ? true : category === 'Frontend') ? (query === '' ? true : 'styles frontend css pipeline, themes, fonts, profiles, and application config. '.includes(query.toLowerCase())) : false">
          <span class="category">Frontend</span><h2>@wrnexus/styles</h2><p>CSS pipeline, themes, fonts, profiles, and application config.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/test" data-show="(category === 'All' ? true : category === 'Tooling') ? (query === '' ? true : 'test tooling wrnexus-aware component, route, and browser testing utilities. '.includes(query.toLowerCase())) : false">
          <span class="category">Tooling</span><h2>@wrnexus/test</h2><p>WRNexusJS-aware component, route, and browser testing utilities.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/tracking" data-show="(category === 'All' ? true : category === 'Runtime') ? (query === '' ? true : 'tracking runtime error/event capture, middleware, filtering, and sinks. '.includes(query.toLowerCase())) : false">
          <span class="category">Runtime</span><h2>@wrnexus/tracking</h2><p>Error/event capture, middleware, filtering, and sinks.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/ui" data-show="(category === 'All' ? true : category === 'Frontend') ? (query === '' ? true : 'ui frontend themeable server-rendered ui components and css. '.includes(query.toLowerCase())) : false">
          <span class="category">Frontend</span><h2>@wrnexus/ui</h2><p>Themeable server-rendered UI components and CSS.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/uploader" data-show="(category === 'All' ? true : category === 'Data') ? (query === '' ? true : 'uploader data validated local/s3 uploads and secure file serving. '.includes(query.toLowerCase())) : false">
          <span class="category">Data</span><h2>@wrnexus/uploader</h2><p>Validated local/S3 uploads and secure file serving.</p><span class="card-link">Open documentation →</span>
        </a>
<a class="package-card" href="/packages/validation" data-show="(category === 'All' ? true : category === 'Security') ? (query === '' ? true : 'validation security typed schemas, coercion, validation, and browser descriptors. '.includes(query.toLowerCase())) : false">
          <span class="category">Security</span><h2>@wrnexus/validation</h2><p>Typed schemas, coercion, validation, and browser descriptors.</p><span class="card-link">Open documentation →</span>
        </a></section></main>
      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.3.2</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
      <BackToTop />
    </div>
  }
}
