# WRNexusJS documentation 0.8.8

Status: Private Developer Preview. This site documents 47 release-aligned packages.

# WrNexus

> WrNexus is an SSR-first, **Bun-native** full-stack web framework. UI is written in
> `.wrn` files (its own component language — NOT React/JSX/Vue). Routing is file-based.
> This document teaches an AI how to write correct WrNexus code. It is private and
> post-dates model training data, so rely on THIS document, not prior web-framework
> assumptions.

## Golden rules

- **Pages, components, and layouts are `.wrn` files.** Do NOT write `.tsx`/`.jsx`/React
  for UI. Do NOT use `useState`, hooks, JSX, or a client bundler.
- **Routing is file-based** under `app/`. The filename is the route. No router config.
- **Interactivity** lives in `state` + `{expr}` + `@event` inside `.wrn`. Components render
  on the server and hydrate automatically — you never write client-side JS islands.
- **Runtime is Bun only** (uses `Bun.serve`, `bun:sqlite`, `Bun.password`, …). Node is not supported.
- To add files, prefer the CLI: `wrnexus generate page <Name>` / `component <name>` / `api <path>` / `schema <name>`.

## Project layout

```
app/
  pages/       *.wrn  → routes: index.wrn = "/", about.wrn = "/about", blog/[slug].wrn = "/blog/:slug"
  components/  *.wrn  → reusable UI, mounted in a page/component via <div data-component="name" ...props>
  layouts/     *.wrn  → named layouts; a page opts in with  layout = "name"
  api/         *.ts   → HTTP handlers: export const GET/POST/PUT/PATCH/DELETE = async (ctx) => Response
  middleware/  *.ts   → export default async (ctx, next) => next()
  realtime/    *.ts   → export default defineRoom({ ... }) from "@wrnexus/core"  (ws://host/realtime/<name>)
  schemas/     *.ts   → validation schemas (the `v` builder), used by forms + parseBody
  locales/     *.json → i18n messages per language
  db/          schema.ts, queries/*.sql, migrations/*.sql
  styles/      global.css  → Tailwind (default) or plain CSS
wrnexus.config.ts    → app config (AppConfig from "@wrnexus/styles")
public/              → static assets served at /
```

## `.wrn` page

```wrn
page Home {
  layout = "public"          // optional: a component in app/layouts/<name>.wrn ("none" to skip)

  state count = 0            // optional: seeds client-reactive state (omit for pure SSR)

  seo {
    title = "Home"
    description = "..."
    canonical = "/"
  }

  view {
    <h1>Hello</h1>
    <p>Count is {count}, doubled is {count * 2}.</p>
    <button @click="count++">Increment</button>
    <div data-component="counter" start="5" label="Clicks"></div>
  }

  style {
    h1 { color: var(--wire-color-text); }
  }
}
```

## `.wrn` component

```wrn
component Counter {
  props {                    // props come from mount attributes; each is coerced to the
    start = 0                // TYPE of its default (so start="5" arrives as the number 5)
    label = "Count"
  }
  state count = start        // state may reference props
  view {
    <button @click="count++">{label}: {count}</button>
  }
}
```

Mount it from any page/component: `<div data-component="counter" start="0" label="Clicks"></div>`.
Components render on the server with their props, then hydrate — no per-component JS.

## The `view { }` block (plain HTML + a few directives)

- `{expr}` — interpolate a JS expression. Reactive if it references `state`: `{count}`, `{count * 2}`, `{user.name}`.
- `@event="expr"` — bind a DOM event; the expression runs in the reactive scope: `@click="count++"`, `@input="name = event.target.value"`.
- `<div data-component="name" prop="v">` — mount a component (attrs become string props, coerced).
- `<slot></slot>` / `<slot name="x"></slot>` — component/layout slots; fill with `<div data-slot="x">…</div>`.
- **Server loop (DB/list/table):** `{#each <list> as <item>[, <i>]} …rows… {:empty} …fallback… {/each}` — iterates SSR data on the server and renders markup per item. `{item.field}` interpolates (HTML-escaped, XSS-safe). `<list>` is a JS expression, usually an `ssr` data binding (see "Data-driven tables" below). This is how you render a database table in `.wrn`.
- **Server conditional:** `{#if <expr>} … {:else if <expr>} … {:else} … {/if}` — renders the first truthy branch on the server. `<expr>` can reference `ssr` data, or the `item`/`index` of an enclosing `{#each}`. Works at page level and inside loops (e.g. `{#if r.active}<span>●</span>{:else}<span>○</span>{/if}` per row). For client-side show/hide based on reactive `state`, use `data-show="expr"` instead.
- i18n: `{t:home.title}` in text, `t:placeholder="form.name"` on attributes — resolved per request from `app/locales/`.
- Theme: any element with `data-wire-theme-toggle` toggles light/dark; `data-wire-theme-set="dark"` sets it.
- Void/self-closing tags are fine: `<br />`, `<img src="..." />`.
- Only `{` and `}` are special (interpolation). Don't use a bare `}` in view text.

## Data-driven tables / lists (server-rendered `.wrn`)

Use an `ssr` data binding to fetch rows on the server, then `{#each}` to render them.
This renders on the **server** (SSR-first) and is HTML-escaped by default.

```wrn
page Admin {
  layout = "dashboard"

  // Fetch on the server. The api handler at /api/contacts returns { contacts: [...] };
  // this block's `return contacts` exposes that array (via `$data`) as the binding `rows`.
  ssr {
    api rows GET /api/contacts { return contacts }
  }

  view {
    <table>
      <tbody>
        {#each rows as r, i}
          <tr>
            <td>#{i}</td>
            <td>{r.name}</td>
            <td><a href="mailto:{r.email}">{r.email}</a></td>
          </tr>
        {:empty}
          <tr><td colspan="3">No submissions yet.</td></tr>
        {/each}
      </tbody>
    </table>
  }
}
```

The matching API returns the array under a key the `ssr` block reads:

```ts
// app/api/contacts.ts  → GET /api/contacts
import { getDb } from "@wrnexus/db";
export const GET = async () => {
  const contacts = await getDb().all("SELECT id, name, email FROM contacts ORDER BY id DESC");
  return Response.json({ contacts });   // ssr block does `return contacts`
};
```

**Prefer this `.wrn` + `{#each}` approach for DB-backed tables and lists.** (`.ts`/`.tsx`
pages returning an HTML string are also supported for fully-custom programmatic rendering,
but a `.wrn` page with `ssr` data + `{#each}` is the idiomatic, SSR-first way.)

## API routes (`app/api/*.ts`)

```ts
// app/api/users/list.ts  → GET /api/users/list
import { getDb } from "@wrnexus/db";

export const GET = async (ctx) => {
  return Response.json({ users: await ListUsers(getDb()) });
};

export const POST = async (ctx) => {
  const body = await ctx.req.json();
  return Response.json({ ok: true, body }, { status: 201 });
};
```

`ctx` (the `Context` from `@wrnexus/core`) has:
`req: Request`, `url: URL`, `params: Record<string,string>` (dynamic route params, e.g. `/users/[id]` → `ctx.params.id`),
`lang: string`, `t(key, params?)` (i18n), `cookies` (get/set), `session` (get/set). Auth: `getUser(ctx)` after `sessionAuth`/`logIn`.

When an SSO forward-auth verifier needs the URL that originally reached the gateway, use
`@wrnexus/helpers` instead of constructing it from untrusted headers:

```ts
import { redirectToLogin } from "@wrnexus/helpers";

return redirectToLogin(ctx, "/login", {
  allowedHosts: ["admin.localhost:3000", "reports.localhost:3000"],
});
```

The package also exports `getOriginalRequestUrl`, `getOriginalRequestOrigin`,
`getOriginalRequestPath`, and `getOriginalRequestMethod`. Always pass `allowedHosts` when
using forwarded gateway URLs; the helper rejects untrusted redirect destinations.

## Middleware & realtime

```ts
// app/middleware/logger.ts
export default async function logger(ctx, next) {
  console.log(ctx.req.method, ctx.url.pathname);
  return next();               // return a Response WITHOUT calling next() to short-circuit
}
```

```ts
// app/realtime/chat.ts  → ws://host/realtime/chat
import { defineRoom } from "@wrnexus/core";
export default defineRoom({
  onConnect(client) { client.send({ type: "system", text: "connected" }); },
  onMessage(client, msg) { client.room.broadcast({ type: "message", data: msg }); },
});
```
Client side: a page opts in with `data-room="chat"` (handled by the realtime runtime).

## Config (`wrnexus.config.ts`)

```ts
import type { AppConfig } from "@wrnexus/styles";
const config: AppConfig = {
  seo: { title: "App", titleTemplate: "%s | App", description: "..." },
  styles: { entry: "app/styles/global.css", process: async ({ entryPath, mode }) => /* Tailwind */ "" },
  fonts: { sans: '"Inter", system-ui, sans-serif', google: [{ family: "Inter", weights: [400, 600] }] },
  theme: { default: "dark", themes: { light: { "color-primary": "#2563eb" } } },
  i18n: { default: "en", locales: ["en", "es"] },
  db: { driver: "sqlite", url: "file:./dev.db" },
  security: { cors: { enabled: true, origin: ["http://localhost:5173"] } },
  // profiles: { production: { db: { driver: "postgres", url: process.env.DATABASE_URL } } },
};
export default config;
```

## Database (`@wrnexus/db`)

```ts
// app/db/schema.ts
import { v, table } from "@wrnexus/db";
export const users = table("users", {
  id: v.id(),
  name: v.string(),
  email: v.string().unique(),
  createdAt: v.timestamp(),
});
```
- Queries: write `app/db/queries/*.sql` with `-- name: ListUsers :many` blocks; `wrnexus db generate` emits typed functions.
- Access at runtime: `import { getDb } from "@wrnexus/db"; const rows = await ListUsers(getDb());`
- Migrations in `app/db/migrations/`; run `wrnexus db migrate` (dev auto-migrates sqlite).

## Validation (`@wrnexus/validation`)

```ts
// app/schemas/login.ts
import { v } from "@wrnexus/validation";
export default v.object({
  email: v.string().email(),
  password: v.string().min(8),
});
```
In an API route: `import s from "../schemas/login"; import { parseBody } from "@wrnexus/validation"; const r = await parseBody(s, ctx.req);` → `r.ok ? r.value : r.response`.
In a form: `<form data-schema="login" action="/api/login" method="post">` + `<span data-error="email"></span>` (client + server validation wired automatically).

## AI / LLM (`@wrnexus/ai`)

```ts
// app/api/ai.ts
import { createAI } from "@wrnexus/ai";
const ai = createAI();                     // reads ANTHROPIC_API_KEY; default model claude-opus-4-8
export const POST = async (ctx) => {
  const { prompt } = await ctx.req.json();
  return ai.streamResponse(prompt);        // or: return Response.json({ text: await ai.generate(prompt) })
};
```

## CLI

See the generated **Complete CLI command reference** below. It is sourced from the installed 0.8.8 executable so command names and options cannot drift.

## When asked to "create a page/component/feature"

1. Create the `.wrn` file under `app/pages/` (or `app/components/`) with a `page`/`component` block — or run `wrnexus generate page <Name>`.
2. Put markup in `view { }`, interactive bits in `state` + `{expr}` + `@event`, reusable UI as components mounted via `data-component`.
3. For data, add an `app/api/*.ts` route and `getDb()`; for forms, add an `app/schemas/*.ts` and `data-schema`.
4. Style with Tailwind utility classes in the view, or theme tokens (`var(--wire-*)`), or `style { }`.
5. Never emit React/JSX, a manual router, or client-side island JS — the framework handles hydration.

# Complete CLI command reference

This section is generated from the installed `@wrnexus/cli@0.8.7` executable. It is the canonical command inventory for this release.

```text
wrnexus — WrNexus CLI

Usage:
  wrnexus dev [app-dir] [--port=3000] [--host=::]
                                             Start the development server (live reload)
  wrnexus dev [app-dir] --services        Start local production-service simulators with the app
  wrnexus dev [app-dir] --production-runtime
  wrnexus dev [app-dir] --services [--services-port=3099] [--services-http]
                                             Rebuild and reload the exact production artifact
  wrnexus build [app-dir]               Build a production server bundle + assets
  wrnexus preview [app-dir]             Serve the existing exact production output
  wrnexus create <app-name>             Scaffold a new app
  wrnexus workspace <name>              Scaffold a monorepo (apps/* + shared packages/*)
  wrnexus workspace add <name> [--domain=name.localhost]
                                             Add an app to the current workspace
  wrnexus gateway [--port=3000]         Serve every workspace app behind one port, routed by domain
  wrnexus production [workspace-dir]    Build, migrate, and serve the complete production workspace
  wrnexus <environment> [workspace-dir] Run a configured workspace environment (development/staging/custom)
  wrnexus generate <type> <name>        Scaffold a page | component | api | schema
  wrnexus generate routes | docker | mobile
                                             Generate routes or scaffold deployment targets
  wrnexus generate types [app-dir]       Generate application-wide route/component/key types
  wrnexus routes [app-dir]               Generate typed named routes
  wrnexus typecheck [app-dir]            Generate types and check TypeScript plus every .wrn file
  wrnexus mobile add <package...>       Install Capacitor or Expo native packages
  wrnexus mobile compile                Compile .wrn pages into native Expo routes
  wrnexus native list                   List cross-platform native capabilities
  wrnexus native add <capability...>    Install capability packages for the configured mobile mode
  wrnexus eject <name...>               Copy a Wire UI component into app/components
  wrnexus update [dir] [--latest]       Upgrade deps, migrate project files, and verify the app
  wrnexus db <cmd>                      Migrations: migrate | rollback | status | seed | generate | new
  wrnexus authz <cmd>                    Authorization: list | generate | init [--dialect=sqlite|postgres|mysql]
  wrnexus test [level] [app-dir] [--watch]
                                             Run unit | component | api | browser | visual | accessibility | performance
  wrnexus profiles [app-dir]            List config profiles (dev/prod/uat/…) and their env files
  wrnexus doctor [app-dir] [--fix]      Check project health; optionally apply safe repairs
  wrnexus compatibility <check|explain|upgrade> [app-dir]
                                             Inspect or explicitly upgrade behavior defaults
  wrnexus contracts <check|snapshot> [app-dir]
                                             Detect breaking boundary contract changes
  wrnexus security <audit|headers|test> [app-dir]
                                             Audit ASVS controls, inspect headers, or run abuse tests
  wrnexus api <generate|docs> [app-dir] Generate OpenAPI, docs, Postman, examples and SDKs
  wrnexus sdk generate <language> [app-dir]
                                             Generate TypeScript, JavaScript, Java, Go, or Python SDK
  wrnexus deploy <target> [app-dir]       Generate docker | kubernetes | systemd | railway | render | fly
  wrnexus mcp [app-dir]                   Start the WRNexus MCP server over stdio
  wrnexus i18n <extract|validate> [app-dir]
                                             Extract and audit translation keys
  wrnexus report [app-dir] [--file=app/pages/page.wrn]
                                             Create a sanitized reproduction bundle
  wrnexus playground [--port=4173]         Start the shareable WRN compiler playground
  wrnexus config [app-dir] --explain    Print the fully resolved profile configuration
  wrnexus analyze [app-dir]             Inspect dist/build-report.json and performance budgets
  wrnexus explain <route|build|hydration|bundle> [subject] [app-dir]
                                             Explain compiler and production build decisions
  wrnexus explain <cache|permission> <subject> [app-dir]
                                             Explain route caching or permission enforcement
  wrnexus inspect <target> [app-dir]    Inspect packages | plugins | routes | assets | runtimes | styles | migrations | bundle
  wrnexus inspect component <name> [app-dir]
                                             Inspect a component's typed public contract
  wrnexus generate system <name>        Scaffold a complete framework-native package

Profiles: pass --profile=<name> to dev/build/db (or set WRNEXUS_PROFILE) to load
that profile's .env cascade and config overrides. e.g. wrnexus dev --profile=uat

Workspace environments: configure protocol, rootDomain, port, hostname, runtime
(development|production), hmr, build, migrate, and profile in wrnexus.workspace.ts.
CLI overrides: --port, --host, --build/--no-build, --migrate/--no-migrate,
--profile, and --prepare-only.

Update options: --dry-run previews changes; --no-verify skips post-update check/build.
```

## CLI workflows with expected output

Commands below are copy-ready. Paths, ports, counts, and timings vary by project; the shown output identifies the success condition to check.

### Create, check, build, and preview an application

```bash
bunx @wrnexus/cli@0.8.7 create my-app
cd my-app
bun install
bunx wrnexus typecheck .
bunx wrnexus build .
bunx wrnexus preview . --port=3000
```

Expected output:

```text
✓ Application types are valid
✓ Runtime: .../dist/reactive.js
✓ Styles:  .../dist/styles.css
✓ Server:  .../dist/server.js
Run it:  bun .../dist/server.js
```

### Generate framework files and committed application types

```bash
bunx wrnexus generate page Dashboard
bunx wrnexus generate component status-card
bunx wrnexus generate api health
bunx wrnexus generate schema account
bunx wrnexus generate routes
bunx wrnexus generate types .
```

Expected output includes created source paths followed by:

```text
✓ Generated app/routes.gen.ts (... routes)
✓ Generated .../app/types/wrnexus.generated.d.ts (... routes, ... components)
```

### Run development and production-runtime modes

```bash
bunx wrnexus dev . --port=3000
bunx wrnexus dev . --services --services-port=3099
bunx wrnexus dev . --production-runtime --port=3000
```

Expected output reports the active profile, discovered plugins/routes, generated cache path, and listening URL. Production-runtime mode rebuilds and reloads the exact production artifact.

### Database lifecycle

```bash
bunx wrnexus db status
bunx wrnexus db new create_accounts --from-models
bunx wrnexus db migrate
bunx wrnexus db generate
bunx wrnexus db seed
```

Expected output identifies the selected profile/dialect, migration state, applied migration names, and generated typed query files. Run `db rollback` only when intentionally reverting the latest migration.

### Diagnose, inspect, and enforce contracts

```bash
bunx wrnexus doctor .
bunx wrnexus typecheck .
bunx wrnexus compatibility check .
bunx wrnexus contracts check .
bunx wrnexus security audit .
bunx wrnexus inspect packages .
bunx wrnexus inspect routes .
bunx wrnexus inspect component Navbar .
bunx wrnexus analyze .
```

Successful checks exit with status 0. Inspect commands print the resolved package, route, component, asset, runtime, style, migration, or bundle contract without changing the application.

### Tests, API artifacts, SDKs, and deployment manifests

```bash
bunx wrnexus test unit .
bunx wrnexus test component .
bunx wrnexus test api .
bunx wrnexus test browser .
bunx wrnexus api generate .
bunx wrnexus api docs .
bunx wrnexus sdk generate typescript .
bunx wrnexus deploy docker .
```

Test commands return the underlying suite summary and a nonzero status on failure. API/SDK/deploy commands report each generated artifact; review and commit generated files after validation.

### Workspaces and environments

```bash
bunx wrnexus workspace company-platform
cd company-platform
bunx wrnexus workspace add reports --domain=reports.localhost
bunx wrnexus gateway --port=3000
bunx wrnexus production . --prepare-only
bunx wrnexus staging .
```

Expected output lists created apps, domain mappings, selected environment/profile, build and migration decisions, and the gateway address.

### Internationalization, native targets, MCP, and support bundles

```bash
bunx wrnexus i18n extract .
bunx wrnexus i18n validate .
bunx wrnexus generate mobile
bunx wrnexus mobile compile
bunx wrnexus native list
bunx wrnexus mcp .
bunx wrnexus report . --file=app/pages/index.wrn
```

Expected output identifies extracted/validated translation keys, generated native routes, available capabilities, MCP stdio startup, or the sanitized reproduction archive. MCP uses stdio, so protocol messages—not a web URL—are its normal runtime output.

### Safe upgrades

```bash
bunx wrnexus update . --latest --dry-run
bunx wrnexus update . --latest
```

The dry run previews dependency and migration changes. A real update prints the source and target versions, backup directory, each migration action, installation result, and verification result. Commit or back up the application before upgrading.

# Complete CLI command reference

This section is generated from the installed `@wrnexus/cli@0.8.7` executable. It is the canonical command inventory for this release.

```text
wrnexus — WrNexus CLI

Usage:
  wrnexus dev [app-dir] [--port=3000] [--host=::]
                                             Start the development server (live reload)
  wrnexus dev [app-dir] --services        Start local production-service simulators with the app
  wrnexus dev [app-dir] --production-runtime
  wrnexus dev [app-dir] --services [--services-port=3099] [--services-http]
                                             Rebuild and reload the exact production artifact
  wrnexus build [app-dir]               Build a production server bundle + assets
  wrnexus preview [app-dir]             Serve the existing exact production output
  wrnexus create <app-name>             Scaffold a new app
  wrnexus workspace <name>              Scaffold a monorepo (apps/* + shared packages/*)
  wrnexus workspace add <name> [--domain=name.localhost]
                                             Add an app to the current workspace
  wrnexus gateway [--port=3000]         Serve every workspace app behind one port, routed by domain
  wrnexus production [workspace-dir]    Build, migrate, and serve the complete production workspace
  wrnexus <environment> [workspace-dir] Run a configured workspace environment (development/staging/custom)
  wrnexus generate <type> <name>        Scaffold a page | component | api | schema
  wrnexus generate routes | docker | mobile
                                             Generate routes or scaffold deployment targets
  wrnexus generate types [app-dir]       Generate application-wide route/component/key types
  wrnexus routes [app-dir]               Generate typed named routes
  wrnexus typecheck [app-dir]            Generate types and check TypeScript plus every .wrn file
  wrnexus mobile add <package...>       Install Capacitor or Expo native packages
  wrnexus mobile compile                Compile .wrn pages into native Expo routes
  wrnexus native list                   List cross-platform native capabilities
  wrnexus native add <capability...>    Install capability packages for the configured mobile mode
  wrnexus eject <name...>               Copy a Wire UI component into app/components
  wrnexus update [dir] [--latest]       Upgrade deps, migrate project files, and verify the app
  wrnexus db <cmd>                      Migrations: migrate | rollback | status | seed | generate | new
  wrnexus authz <cmd>                    Authorization: list | generate | init [--dialect=sqlite|postgres|mysql]
  wrnexus test [level] [app-dir] [--watch]
                                             Run unit | component | api | browser | visual | accessibility | performance
  wrnexus profiles [app-dir]            List config profiles (dev/prod/uat/…) and their env files
  wrnexus doctor [app-dir] [--fix]      Check project health; optionally apply safe repairs
  wrnexus compatibility <check|explain|upgrade> [app-dir]
                                             Inspect or explicitly upgrade behavior defaults
  wrnexus contracts <check|snapshot> [app-dir]
                                             Detect breaking boundary contract changes
  wrnexus security <audit|headers|test> [app-dir]
                                             Audit ASVS controls, inspect headers, or run abuse tests
  wrnexus api <generate|docs> [app-dir] Generate OpenAPI, docs, Postman, examples and SDKs
  wrnexus sdk generate <language> [app-dir]
                                             Generate TypeScript, JavaScript, Java, Go, or Python SDK
  wrnexus deploy <target> [app-dir]       Generate docker | kubernetes | systemd | railway | render | fly
  wrnexus mcp [app-dir]                   Start the WRNexus MCP server over stdio
  wrnexus i18n <extract|validate> [app-dir]
                                             Extract and audit translation keys
  wrnexus report [app-dir] [--file=app/pages/page.wrn]
                                             Create a sanitized reproduction bundle
  wrnexus playground [--port=4173]         Start the shareable WRN compiler playground
  wrnexus config [app-dir] --explain    Print the fully resolved profile configuration
  wrnexus analyze [app-dir]             Inspect dist/build-report.json and performance budgets
  wrnexus explain <route|build|hydration|bundle> [subject] [app-dir]
                                             Explain compiler and production build decisions
  wrnexus explain <cache|permission> <subject> [app-dir]
                                             Explain route caching or permission enforcement
  wrnexus inspect <target> [app-dir]    Inspect packages | plugins | routes | assets | runtimes | styles | migrations | bundle
  wrnexus inspect component <name> [app-dir]
                                             Inspect a component's typed public contract
  wrnexus generate system <name>        Scaffold a complete framework-native package

Profiles: pass --profile=<name> to dev/build/db (or set WRNEXUS_PROFILE) to load
that profile's .env cascade and config overrides. e.g. wrnexus dev --profile=uat

Workspace environments: configure protocol, rootDomain, port, hostname, runtime
(development|production), hmr, build, migrate, and profile in wrnexus.workspace.ts.
CLI overrides: --port, --host, --build/--no-build, --migrate/--no-migrate,
--profile, and --prepare-only.

Update options: --dry-run previews changes; --no-verify skips post-update check/build.
```

## CLI workflows with expected output

Commands below are copy-ready. Paths, ports, counts, and timings vary by project; the shown output identifies the success condition to check.

### Create, check, build, and preview an application

```bash
bunx @wrnexus/cli@0.8.7 create my-app
cd my-app
bun install
bunx wrnexus typecheck .
bunx wrnexus build .
bunx wrnexus preview . --port=3000
```

Expected output:

```text
✓ Application types are valid
✓ Runtime: .../dist/reactive.js
✓ Styles:  .../dist/styles.css
✓ Server:  .../dist/server.js
Run it:  bun .../dist/server.js
```

### Generate framework files and committed application types

```bash
bunx wrnexus generate page Dashboard
bunx wrnexus generate component status-card
bunx wrnexus generate api health
bunx wrnexus generate schema account
bunx wrnexus generate routes
bunx wrnexus generate types .
```

Expected output includes created source paths followed by:

```text
✓ Generated app/routes.gen.ts (... routes)
✓ Generated .../app/types/wrnexus.generated.d.ts (... routes, ... components)
```

### Run development and production-runtime modes

```bash
bunx wrnexus dev . --port=3000
bunx wrnexus dev . --services --services-port=3099
bunx wrnexus dev . --production-runtime --port=3000
```

Expected output reports the active profile, discovered plugins/routes, generated cache path, and listening URL. Production-runtime mode rebuilds and reloads the exact production artifact.

### Database lifecycle

```bash
bunx wrnexus db status
bunx wrnexus db new create_accounts --from-models
bunx wrnexus db migrate
bunx wrnexus db generate
bunx wrnexus db seed
```

Expected output identifies the selected profile/dialect, migration state, applied migration names, and generated typed query files. Run `db rollback` only when intentionally reverting the latest migration.

### Diagnose, inspect, and enforce contracts

```bash
bunx wrnexus doctor .
bunx wrnexus typecheck .
bunx wrnexus compatibility check .
bunx wrnexus contracts check .
bunx wrnexus security audit .
bunx wrnexus inspect packages .
bunx wrnexus inspect routes .
bunx wrnexus inspect component Navbar .
bunx wrnexus analyze .
```

Successful checks exit with status 0. Inspect commands print the resolved package, route, component, asset, runtime, style, migration, or bundle contract without changing the application.

### Tests, API artifacts, SDKs, and deployment manifests

```bash
bunx wrnexus test unit .
bunx wrnexus test component .
bunx wrnexus test api .
bunx wrnexus test browser .
bunx wrnexus api generate .
bunx wrnexus api docs .
bunx wrnexus sdk generate typescript .
bunx wrnexus deploy docker .
```

Test commands return the underlying suite summary and a nonzero status on failure. API/SDK/deploy commands report each generated artifact; review and commit generated files after validation.

### Workspaces and environments

```bash
bunx wrnexus workspace company-platform
cd company-platform
bunx wrnexus workspace add reports --domain=reports.localhost
bunx wrnexus gateway --port=3000
bunx wrnexus production . --prepare-only
bunx wrnexus staging .
```

Expected output lists created apps, domain mappings, selected environment/profile, build and migration decisions, and the gateway address.

### Internationalization, native targets, MCP, and support bundles

```bash
bunx wrnexus i18n extract .
bunx wrnexus i18n validate .
bunx wrnexus generate mobile
bunx wrnexus mobile compile
bunx wrnexus native list
bunx wrnexus mcp .
bunx wrnexus report . --file=app/pages/index.wrn
```

Expected output identifies extracted/validated translation keys, generated native routes, available capabilities, MCP stdio startup, or the sanitized reproduction archive. MCP uses stdio, so protocol messages—not a web URL—are its normal runtime output.

### Safe upgrades

```bash
bunx wrnexus update . --latest --dry-run
bunx wrnexus update . --latest
```

The dry run previews dependency and migration changes. A real update prints the source and target versions, backup directory, each migration action, installation result, and verification result. Commit or back up the application before upgrading.

# Complete CLI command reference

This section is generated from the installed `@wrnexus/cli@0.8.7` executable. It is the canonical command inventory for this release.

```text
wrnexus — WrNexus CLI

Usage:
  wrnexus dev [app-dir] [--port=3000] [--host=::]
                                             Start the development server (live reload)
  wrnexus dev [app-dir] --services        Start local production-service simulators with the app
  wrnexus dev [app-dir] --production-runtime
  wrnexus dev [app-dir] --services [--services-port=3099] [--services-http]
                                             Rebuild and reload the exact production artifact
  wrnexus build [app-dir]               Build a production server bundle + assets
  wrnexus preview [app-dir]             Serve the existing exact production output
  wrnexus create <app-name>             Scaffold a new app
  wrnexus workspace <name>              Scaffold a monorepo (apps/* + shared packages/*)
  wrnexus workspace add <name> [--domain=name.localhost]
                                             Add an app to the current workspace
  wrnexus gateway [--port=3000]         Serve every workspace app behind one port, routed by domain
  wrnexus production [workspace-dir]    Build, migrate, and serve the complete production workspace
  wrnexus <environment> [workspace-dir] Run a configured workspace environment (development/staging/custom)
  wrnexus generate <type> <name>        Scaffold a page | component | api | schema
  wrnexus generate routes | docker | mobile
                                             Generate routes or scaffold deployment targets
  wrnexus generate types [app-dir]       Generate application-wide route/component/key types
  wrnexus routes [app-dir]               Generate typed named routes
  wrnexus typecheck [app-dir]            Generate types and check TypeScript plus every .wrn file
  wrnexus mobile add <package...>       Install Capacitor or Expo native packages
  wrnexus mobile compile                Compile .wrn pages into native Expo routes
  wrnexus native list                   List cross-platform native capabilities
  wrnexus native add <capability...>    Install capability packages for the configured mobile mode
  wrnexus eject <name...>               Copy a Wire UI component into app/components
  wrnexus update [dir] [--latest]       Upgrade deps, migrate project files, and verify the app
  wrnexus db <cmd>                      Migrations: migrate | rollback | status | seed | generate | new
  wrnexus authz <cmd>                    Authorization: list | generate | init [--dialect=sqlite|postgres|mysql]
  wrnexus test [level] [app-dir] [--watch]
                                             Run unit | component | api | browser | visual | accessibility | performance
  wrnexus profiles [app-dir]            List config profiles (dev/prod/uat/…) and their env files
  wrnexus doctor [app-dir] [--fix]      Check project health; optionally apply safe repairs
  wrnexus compatibility <check|explain|upgrade> [app-dir]
                                             Inspect or explicitly upgrade behavior defaults
  wrnexus contracts <check|snapshot> [app-dir]
                                             Detect breaking boundary contract changes
  wrnexus security <audit|headers|test> [app-dir]
                                             Audit ASVS controls, inspect headers, or run abuse tests
  wrnexus api <generate|docs> [app-dir] Generate OpenAPI, docs, Postman, examples and SDKs
  wrnexus sdk generate <language> [app-dir]
                                             Generate TypeScript, JavaScript, Java, Go, or Python SDK
  wrnexus deploy <target> [app-dir]       Generate docker | kubernetes | systemd | railway | render | fly
  wrnexus mcp [app-dir]                   Start the WRNexus MCP server over stdio
  wrnexus i18n <extract|validate> [app-dir]
                                             Extract and audit translation keys
  wrnexus report [app-dir] [--file=app/pages/page.wrn]
                                             Create a sanitized reproduction bundle
  wrnexus playground [--port=4173]         Start the shareable WRN compiler playground
  wrnexus config [app-dir] --explain    Print the fully resolved profile configuration
  wrnexus analyze [app-dir]             Inspect dist/build-report.json and performance budgets
  wrnexus explain <route|build|hydration|bundle> [subject] [app-dir]
                                             Explain compiler and production build decisions
  wrnexus explain <cache|permission> <subject> [app-dir]
                                             Explain route caching or permission enforcement
  wrnexus inspect <target> [app-dir]    Inspect packages | plugins | routes | assets | runtimes | styles | migrations | bundle
  wrnexus inspect component <name> [app-dir]
                                             Inspect a component's typed public contract
  wrnexus generate system <name>        Scaffold a complete framework-native package

Profiles: pass --profile=<name> to dev/build/db (or set WRNEXUS_PROFILE) to load
that profile's .env cascade and config overrides. e.g. wrnexus dev --profile=uat

Workspace environments: configure protocol, rootDomain, port, hostname, runtime
(development|production), hmr, build, migrate, and profile in wrnexus.workspace.ts.
CLI overrides: --port, --host, --build/--no-build, --migrate/--no-migrate,
--profile, and --prepare-only.

Update options: --dry-run previews changes; --no-verify skips post-update check/build.
```

## CLI workflows with expected output

Commands below are copy-ready. Paths, ports, counts, and timings vary by project; the shown output identifies the success condition to check.

### Create, check, build, and preview an application

```bash
bunx @wrnexus/cli@0.8.7 create my-app
cd my-app
bun install
bunx wrnexus typecheck .
bunx wrnexus build .
bunx wrnexus preview . --port=3000
```

Expected output:

```text
✓ Application types are valid
✓ Runtime: .../dist/reactive.js
✓ Styles:  .../dist/styles.css
✓ Server:  .../dist/server.js
Run it:  bun .../dist/server.js
```

### Generate framework files and committed application types

```bash
bunx wrnexus generate page Dashboard
bunx wrnexus generate component status-card
bunx wrnexus generate api health
bunx wrnexus generate schema account
bunx wrnexus generate routes
bunx wrnexus generate types .
```

Expected output includes created source paths followed by:

```text
✓ Generated app/routes.gen.ts (... routes)
✓ Generated .../app/types/wrnexus.generated.d.ts (... routes, ... components)
```

### Run development and production-runtime modes

```bash
bunx wrnexus dev . --port=3000
bunx wrnexus dev . --services --services-port=3099
bunx wrnexus dev . --production-runtime --port=3000
```

Expected output reports the active profile, discovered plugins/routes, generated cache path, and listening URL. Production-runtime mode rebuilds and reloads the exact production artifact.

### Database lifecycle

```bash
bunx wrnexus db status
bunx wrnexus db new create_accounts --from-models
bunx wrnexus db migrate
bunx wrnexus db generate
bunx wrnexus db seed
```

Expected output identifies the selected profile/dialect, migration state, applied migration names, and generated typed query files. Run `db rollback` only when intentionally reverting the latest migration.

### Diagnose, inspect, and enforce contracts

```bash
bunx wrnexus doctor .
bunx wrnexus typecheck .
bunx wrnexus compatibility check .
bunx wrnexus contracts check .
bunx wrnexus security audit .
bunx wrnexus inspect packages .
bunx wrnexus inspect routes .
bunx wrnexus inspect component Navbar .
bunx wrnexus analyze .
```

Successful checks exit with status 0. Inspect commands print the resolved package, route, component, asset, runtime, style, migration, or bundle contract without changing the application.

### Tests, API artifacts, SDKs, and deployment manifests

```bash
bunx wrnexus test unit .
bunx wrnexus test component .
bunx wrnexus test api .
bunx wrnexus test browser .
bunx wrnexus api generate .
bunx wrnexus api docs .
bunx wrnexus sdk generate typescript .
bunx wrnexus deploy docker .
```

Test commands return the underlying suite summary and a nonzero status on failure. API/SDK/deploy commands report each generated artifact; review and commit generated files after validation.

### Workspaces and environments

```bash
bunx wrnexus workspace company-platform
cd company-platform
bunx wrnexus workspace add reports --domain=reports.localhost
bunx wrnexus gateway --port=3000
bunx wrnexus production . --prepare-only
bunx wrnexus staging .
```

Expected output lists created apps, domain mappings, selected environment/profile, build and migration decisions, and the gateway address.

### Internationalization, native targets, MCP, and support bundles

```bash
bunx wrnexus i18n extract .
bunx wrnexus i18n validate .
bunx wrnexus generate mobile
bunx wrnexus mobile compile
bunx wrnexus native list
bunx wrnexus mcp .
bunx wrnexus report . --file=app/pages/index.wrn
```

Expected output identifies extracted/validated translation keys, generated native routes, available capabilities, MCP stdio startup, or the sanitized reproduction archive. MCP uses stdio, so protocol messages—not a web URL—are its normal runtime output.

### Safe upgrades

```bash
bunx wrnexus update . --latest --dry-run
bunx wrnexus update . --latest
```

The dry run previews dependency and migration changes. A real update prints the source and target versions, backup directory, each migration action, installation result, and verification result. Commit or back up the application before upgrading.

# Complete CLI command reference

This section is generated from the installed `@wrnexus/cli@0.8.7` executable. It is the canonical command inventory for this release.

```text
wrnexus — WrNexus CLI

Usage:
  wrnexus dev [app-dir] [--port=3000] [--host=::]
                                             Start the development server (live reload)
  wrnexus dev [app-dir] --services        Start local production-service simulators with the app
  wrnexus dev [app-dir] --production-runtime
  wrnexus dev [app-dir] --services [--services-port=3099] [--services-http]
                                             Rebuild and reload the exact production artifact
  wrnexus build [app-dir]               Build a production server bundle + assets
  wrnexus preview [app-dir]             Serve the existing exact production output
  wrnexus create <app-name>             Scaffold a new app
  wrnexus workspace <name>              Scaffold a monorepo (apps/* + shared packages/*)
  wrnexus workspace add <name> [--domain=name.localhost]
                                             Add an app to the current workspace
  wrnexus gateway [--port=3000]         Serve every workspace app behind one port, routed by domain
  wrnexus production [workspace-dir]    Build, migrate, and serve the complete production workspace
  wrnexus <environment> [workspace-dir] Run a configured workspace environment (development/staging/custom)
  wrnexus generate <type> <name>        Scaffold a page | component | api | schema
  wrnexus generate routes | docker | mobile
                                             Generate routes or scaffold deployment targets
  wrnexus generate types [app-dir]       Generate application-wide route/component/key types
  wrnexus routes [app-dir]               Generate typed named routes
  wrnexus typecheck [app-dir]            Generate types and check TypeScript plus every .wrn file
  wrnexus mobile add <package...>       Install Capacitor or Expo native packages
  wrnexus mobile compile                Compile .wrn pages into native Expo routes
  wrnexus native list                   List cross-platform native capabilities
  wrnexus native add <capability...>    Install capability packages for the configured mobile mode
  wrnexus eject <name...>               Copy a Wire UI component into app/components
  wrnexus update [dir] [--latest]       Upgrade deps, migrate project files, and verify the app
  wrnexus db <cmd>                      Migrations: migrate | rollback | status | seed | generate | new
  wrnexus authz <cmd>                    Authorization: list | generate | init [--dialect=sqlite|postgres|mysql]
  wrnexus test [level] [app-dir] [--watch]
                                             Run unit | component | api | browser | visual | accessibility | performance
  wrnexus profiles [app-dir]            List config profiles (dev/prod/uat/…) and their env files
  wrnexus doctor [app-dir] [--fix]      Check project health; optionally apply safe repairs
  wrnexus compatibility <check|explain|upgrade> [app-dir]
                                             Inspect or explicitly upgrade behavior defaults
  wrnexus contracts <check|snapshot> [app-dir]
                                             Detect breaking boundary contract changes
  wrnexus security <audit|headers|test> [app-dir]
                                             Audit ASVS controls, inspect headers, or run abuse tests
  wrnexus api <generate|docs> [app-dir] Generate OpenAPI, docs, Postman, examples and SDKs
  wrnexus sdk generate <language> [app-dir]
                                             Generate TypeScript, JavaScript, Java, Go, or Python SDK
  wrnexus deploy <target> [app-dir]       Generate docker | kubernetes | systemd | railway | render | fly
  wrnexus mcp [app-dir]                   Start the WRNexus MCP server over stdio
  wrnexus i18n <extract|validate> [app-dir]
                                             Extract and audit translation keys
  wrnexus report [app-dir] [--file=app/pages/page.wrn]
                                             Create a sanitized reproduction bundle
  wrnexus playground [--port=4173]         Start the shareable WRN compiler playground
  wrnexus config [app-dir] --explain    Print the fully resolved profile configuration
  wrnexus analyze [app-dir]             Inspect dist/build-report.json and performance budgets
  wrnexus explain <route|build|hydration|bundle> [subject] [app-dir]
                                             Explain compiler and production build decisions
  wrnexus explain <cache|permission> <subject> [app-dir]
                                             Explain route caching or permission enforcement
  wrnexus inspect <target> [app-dir]    Inspect packages | plugins | routes | assets | runtimes | styles | migrations | bundle
  wrnexus inspect component <name> [app-dir]
                                             Inspect a component's typed public contract
  wrnexus generate system <name>        Scaffold a complete framework-native package

Profiles: pass --profile=<name> to dev/build/db (or set WRNEXUS_PROFILE) to load
that profile's .env cascade and config overrides. e.g. wrnexus dev --profile=uat

Workspace environments: configure protocol, rootDomain, port, hostname, runtime
(development|production), hmr, build, migrate, and profile in wrnexus.workspace.ts.
CLI overrides: --port, --host, --build/--no-build, --migrate/--no-migrate,
--profile, and --prepare-only.

Update options: --dry-run previews changes; --no-verify skips post-update check/build.
```

## CLI workflows with expected output

Commands below are copy-ready. Paths, ports, counts, and timings vary by project; the shown output identifies the success condition to check.

### Create, check, build, and preview an application

```bash
bunx @wrnexus/cli@0.8.7 create my-app
cd my-app
bun install
bunx wrnexus typecheck .
bunx wrnexus build .
bunx wrnexus preview . --port=3000
```

Expected output:

```text
✓ Application types are valid
✓ Runtime: .../dist/reactive.js
✓ Styles:  .../dist/styles.css
✓ Server:  .../dist/server.js
Run it:  bun .../dist/server.js
```

### Generate framework files and committed application types

```bash
bunx wrnexus generate page Dashboard
bunx wrnexus generate component status-card
bunx wrnexus generate api health
bunx wrnexus generate schema account
bunx wrnexus generate routes
bunx wrnexus generate types .
```

Expected output includes created source paths followed by:

```text
✓ Generated app/routes.gen.ts (... routes)
✓ Generated .../app/types/wrnexus.generated.d.ts (... routes, ... components)
```

### Run development and production-runtime modes

```bash
bunx wrnexus dev . --port=3000
bunx wrnexus dev . --services --services-port=3099
bunx wrnexus dev . --production-runtime --port=3000
```

Expected output reports the active profile, discovered plugins/routes, generated cache path, and listening URL. Production-runtime mode rebuilds and reloads the exact production artifact.

### Database lifecycle

```bash
bunx wrnexus db status
bunx wrnexus db new create_accounts --from-models
bunx wrnexus db migrate
bunx wrnexus db generate
bunx wrnexus db seed
```

Expected output identifies the selected profile/dialect, migration state, applied migration names, and generated typed query files. Run `db rollback` only when intentionally reverting the latest migration.

### Diagnose, inspect, and enforce contracts

```bash
bunx wrnexus doctor .
bunx wrnexus typecheck .
bunx wrnexus compatibility check .
bunx wrnexus contracts check .
bunx wrnexus security audit .
bunx wrnexus inspect packages .
bunx wrnexus inspect routes .
bunx wrnexus inspect component Navbar .
bunx wrnexus analyze .
```

Successful checks exit with status 0. Inspect commands print the resolved package, route, component, asset, runtime, style, migration, or bundle contract without changing the application.

### Tests, API artifacts, SDKs, and deployment manifests

```bash
bunx wrnexus test unit .
bunx wrnexus test component .
bunx wrnexus test api .
bunx wrnexus test browser .
bunx wrnexus api generate .
bunx wrnexus api docs .
bunx wrnexus sdk generate typescript .
bunx wrnexus deploy docker .
```

Test commands return the underlying suite summary and a nonzero status on failure. API/SDK/deploy commands report each generated artifact; review and commit generated files after validation.

### Workspaces and environments

```bash
bunx wrnexus workspace company-platform
cd company-platform
bunx wrnexus workspace add reports --domain=reports.localhost
bunx wrnexus gateway --port=3000
bunx wrnexus production . --prepare-only
bunx wrnexus staging .
```

Expected output lists created apps, domain mappings, selected environment/profile, build and migration decisions, and the gateway address.

### Internationalization, native targets, MCP, and support bundles

```bash
bunx wrnexus i18n extract .
bunx wrnexus i18n validate .
bunx wrnexus generate mobile
bunx wrnexus mobile compile
bunx wrnexus native list
bunx wrnexus mcp .
bunx wrnexus report . --file=app/pages/index.wrn
```

Expected output identifies extracted/validated translation keys, generated native routes, available capabilities, MCP stdio startup, or the sanitized reproduction archive. MCP uses stdio, so protocol messages—not a web URL—are its normal runtime output.

### Safe upgrades

```bash
bunx wrnexus update . --latest --dry-run
bunx wrnexus update . --latest
```

The dry run previews dependency and migration changes. A real update prints the source and target versions, backup directory, each migration action, installation result, and verification result. Commit or back up the application before upgrading.

# Complete CLI command reference

This section is generated from the installed `@wrnexus/cli@0.8.7` executable. It is the canonical command inventory for this release.

```text
wrnexus — WrNexus CLI

Usage:
  wrnexus dev [app-dir] [--port=3000] [--host=::]
                                             Start the development server (live reload)
  wrnexus dev [app-dir] --services        Start local production-service simulators with the app
  wrnexus dev [app-dir] --production-runtime
  wrnexus dev [app-dir] --services [--services-port=3099] [--services-http]
                                             Rebuild and reload the exact production artifact
  wrnexus build [app-dir]               Build a production server bundle + assets
  wrnexus preview [app-dir]             Serve the existing exact production output
  wrnexus create <app-name>             Scaffold a new app
  wrnexus workspace <name>              Scaffold a monorepo (apps/* + shared packages/*)
  wrnexus workspace add <name> [--domain=name.localhost]
                                             Add an app to the current workspace
  wrnexus gateway [--port=3000]         Serve every workspace app behind one port, routed by domain
  wrnexus production [workspace-dir]    Build, migrate, and serve the complete production workspace
  wrnexus <environment> [workspace-dir] Run a configured workspace environment (development/staging/custom)
  wrnexus generate <type> <name>        Scaffold a page | component | api | schema
  wrnexus generate routes | docker | mobile
                                             Generate routes or scaffold deployment targets
  wrnexus generate types [app-dir]       Generate application-wide route/component/key types
  wrnexus routes [app-dir]               Generate typed named routes
  wrnexus typecheck [app-dir]            Generate types and check TypeScript plus every .wrn file
  wrnexus mobile add <package...>       Install Capacitor or Expo native packages
  wrnexus mobile compile                Compile .wrn pages into native Expo routes
  wrnexus native list                   List cross-platform native capabilities
  wrnexus native add <capability...>    Install capability packages for the configured mobile mode
  wrnexus eject <name...>               Copy a Wire UI component into app/components
  wrnexus update [dir] [--latest]       Upgrade deps, migrate project files, and verify the app
  wrnexus db <cmd>                      Migrations: migrate | rollback | status | seed | generate | new
  wrnexus authz <cmd>                    Authorization: list | generate | init [--dialect=sqlite|postgres|mysql]
  wrnexus test [level] [app-dir] [--watch]
                                             Run unit | component | api | browser | visual | accessibility | performance
  wrnexus profiles [app-dir]            List config profiles (dev/prod/uat/…) and their env files
  wrnexus doctor [app-dir] [--fix]      Check project health; optionally apply safe repairs
  wrnexus compatibility <check|explain|upgrade> [app-dir]
                                             Inspect or explicitly upgrade behavior defaults
  wrnexus contracts <check|snapshot> [app-dir]
                                             Detect breaking boundary contract changes
  wrnexus security <audit|headers|test> [app-dir]
                                             Audit ASVS controls, inspect headers, or run abuse tests
  wrnexus api <generate|docs> [app-dir] Generate OpenAPI, docs, Postman, examples and SDKs
  wrnexus sdk generate <language> [app-dir]
                                             Generate TypeScript, JavaScript, Java, Go, or Python SDK
  wrnexus deploy <target> [app-dir]       Generate docker | kubernetes | systemd | railway | render | fly
  wrnexus mcp [app-dir]                   Start the WRNexus MCP server over stdio
  wrnexus i18n <extract|validate> [app-dir]
                                             Extract and audit translation keys
  wrnexus report [app-dir] [--file=app/pages/page.wrn]
                                             Create a sanitized reproduction bundle
  wrnexus playground [--port=4173]         Start the shareable WRN compiler playground
  wrnexus config [app-dir] --explain    Print the fully resolved profile configuration
  wrnexus analyze [app-dir]             Inspect dist/build-report.json and performance budgets
  wrnexus explain <route|build|hydration|bundle> [subject] [app-dir]
                                             Explain compiler and production build decisions
  wrnexus explain <cache|permission> <subject> [app-dir]
                                             Explain route caching or permission enforcement
  wrnexus inspect <target> [app-dir]    Inspect packages | plugins | routes | assets | runtimes | styles | migrations | bundle
  wrnexus inspect component <name> [app-dir]
                                             Inspect a component's typed public contract
  wrnexus generate system <name>        Scaffold a complete framework-native package

Profiles: pass --profile=<name> to dev/build/db (or set WRNEXUS_PROFILE) to load
that profile's .env cascade and config overrides. e.g. wrnexus dev --profile=uat

Workspace environments: configure protocol, rootDomain, port, hostname, runtime
(development|production), hmr, build, migrate, and profile in wrnexus.workspace.ts.
CLI overrides: --port, --host, --build/--no-build, --migrate/--no-migrate,
--profile, and --prepare-only.

Update options: --dry-run previews changes; --no-verify skips post-update check/build.
```

## CLI workflows with expected output

Commands below are copy-ready. Paths, ports, counts, and timings vary by project; the shown output identifies the success condition to check.

### Create, check, build, and preview an application

```bash
bunx @wrnexus/cli@0.8.7 create my-app
cd my-app
bun install
bunx wrnexus typecheck .
bunx wrnexus build .
bunx wrnexus preview . --port=3000
```

Expected output:

```text
✓ Application types are valid
✓ Runtime: .../dist/reactive.js
✓ Styles:  .../dist/styles.css
✓ Server:  .../dist/server.js
Run it:  bun .../dist/server.js
```

### Generate framework files and committed application types

```bash
bunx wrnexus generate page Dashboard
bunx wrnexus generate component status-card
bunx wrnexus generate api health
bunx wrnexus generate schema account
bunx wrnexus generate routes
bunx wrnexus generate types .
```

Expected output includes created source paths followed by:

```text
✓ Generated app/routes.gen.ts (... routes)
✓ Generated .../app/types/wrnexus.generated.d.ts (... routes, ... components)
```

### Run development and production-runtime modes

```bash
bunx wrnexus dev . --port=3000
bunx wrnexus dev . --services --services-port=3099
bunx wrnexus dev . --production-runtime --port=3000
```

Expected output reports the active profile, discovered plugins/routes, generated cache path, and listening URL. Production-runtime mode rebuilds and reloads the exact production artifact.

### Database lifecycle

```bash
bunx wrnexus db status
bunx wrnexus db new create_accounts --from-models
bunx wrnexus db migrate
bunx wrnexus db generate
bunx wrnexus db seed
```

Expected output identifies the selected profile/dialect, migration state, applied migration names, and generated typed query files. Run `db rollback` only when intentionally reverting the latest migration.

### Diagnose, inspect, and enforce contracts

```bash
bunx wrnexus doctor .
bunx wrnexus typecheck .
bunx wrnexus compatibility check .
bunx wrnexus contracts check .
bunx wrnexus security audit .
bunx wrnexus inspect packages .
bunx wrnexus inspect routes .
bunx wrnexus inspect component Navbar .
bunx wrnexus analyze .
```

Successful checks exit with status 0. Inspect commands print the resolved package, route, component, asset, runtime, style, migration, or bundle contract without changing the application.

### Tests, API artifacts, SDKs, and deployment manifests

```bash
bunx wrnexus test unit .
bunx wrnexus test component .
bunx wrnexus test api .
bunx wrnexus test browser .
bunx wrnexus api generate .
bunx wrnexus api docs .
bunx wrnexus sdk generate typescript .
bunx wrnexus deploy docker .
```

Test commands return the underlying suite summary and a nonzero status on failure. API/SDK/deploy commands report each generated artifact; review and commit generated files after validation.

### Workspaces and environments

```bash
bunx wrnexus workspace company-platform
cd company-platform
bunx wrnexus workspace add reports --domain=reports.localhost
bunx wrnexus gateway --port=3000
bunx wrnexus production . --prepare-only
bunx wrnexus staging .
```

Expected output lists created apps, domain mappings, selected environment/profile, build and migration decisions, and the gateway address.

### Internationalization, native targets, MCP, and support bundles

```bash
bunx wrnexus i18n extract .
bunx wrnexus i18n validate .
bunx wrnexus generate mobile
bunx wrnexus mobile compile
bunx wrnexus native list
bunx wrnexus mcp .
bunx wrnexus report . --file=app/pages/index.wrn
```

Expected output identifies extracted/validated translation keys, generated native routes, available capabilities, MCP stdio startup, or the sanitized reproduction archive. MCP uses stdio, so protocol messages—not a web URL—are its normal runtime output.

### Safe upgrades

```bash
bunx wrnexus update . --latest --dry-run
bunx wrnexus update . --latest
```

The dry run previews dependency and migration changes. A real update prints the source and target versions, backup directory, each migration action, installation result, and verification result. Commit or back up the application before upgrading.

# Complete CLI command reference

This section is generated from the installed `@wrnexus/cli@0.8.7` executable. It is the canonical command inventory for this release.

```text
wrnexus — WrNexus CLI

Usage:
  wrnexus dev [app-dir] [--port=3000] [--host=::]
                                             Start the development server (live reload)
  wrnexus dev [app-dir] --services        Start local production-service simulators with the app
  wrnexus dev [app-dir] --production-runtime
  wrnexus dev [app-dir] --services [--services-port=3099] [--services-http]
                                             Rebuild and reload the exact production artifact
  wrnexus build [app-dir]               Build a production server bundle + assets
  wrnexus preview [app-dir]             Serve the existing exact production output
  wrnexus create <app-name>             Scaffold a new app
  wrnexus workspace <name>              Scaffold a monorepo (apps/* + shared packages/*)
  wrnexus workspace add <name> [--domain=name.localhost]
                                             Add an app to the current workspace
  wrnexus gateway [--port=3000]         Serve every workspace app behind one port, routed by domain
  wrnexus production [workspace-dir]    Build, migrate, and serve the complete production workspace
  wrnexus <environment> [workspace-dir] Run a configured workspace environment (development/staging/custom)
  wrnexus generate <type> <name>        Scaffold a page | component | api | schema
  wrnexus generate routes | docker | mobile
                                             Generate routes or scaffold deployment targets
  wrnexus generate types [app-dir]       Generate application-wide route/component/key types
  wrnexus routes [app-dir]               Generate typed named routes
  wrnexus typecheck [app-dir]            Generate types and check TypeScript plus every .wrn file
  wrnexus mobile add <package...>       Install Capacitor or Expo native packages
  wrnexus mobile compile                Compile .wrn pages into native Expo routes
  wrnexus native list                   List cross-platform native capabilities
  wrnexus native add <capability...>    Install capability packages for the configured mobile mode
  wrnexus eject <name...>               Copy a Wire UI component into app/components
  wrnexus update [dir] [--latest]       Upgrade deps, migrate project files, and verify the app
  wrnexus db <cmd>                      Migrations: migrate | rollback | status | seed | generate | new
  wrnexus authz <cmd>                    Authorization: list | generate | init [--dialect=sqlite|postgres|mysql]
  wrnexus test [level] [app-dir] [--watch]
                                             Run unit | component | api | browser | visual | accessibility | performance
  wrnexus profiles [app-dir]            List config profiles (dev/prod/uat/…) and their env files
  wrnexus doctor [app-dir] [--fix]      Check project health; optionally apply safe repairs
  wrnexus compatibility <check|explain|upgrade> [app-dir]
                                             Inspect or explicitly upgrade behavior defaults
  wrnexus contracts <check|snapshot> [app-dir]
                                             Detect breaking boundary contract changes
  wrnexus security <audit|headers|test> [app-dir]
                                             Audit ASVS controls, inspect headers, or run abuse tests
  wrnexus api <generate|docs> [app-dir] Generate OpenAPI, docs, Postman, examples and SDKs
  wrnexus sdk generate <language> [app-dir]
                                             Generate TypeScript, JavaScript, Java, Go, or Python SDK
  wrnexus deploy <target> [app-dir]       Generate docker | kubernetes | systemd | railway | render | fly
  wrnexus mcp [app-dir]                   Start the WRNexus MCP server over stdio
  wrnexus i18n <extract|validate> [app-dir]
                                             Extract and audit translation keys
  wrnexus report [app-dir] [--file=app/pages/page.wrn]
                                             Create a sanitized reproduction bundle
  wrnexus playground [--port=4173]         Start the shareable WRN compiler playground
  wrnexus config [app-dir] --explain    Print the fully resolved profile configuration
  wrnexus analyze [app-dir]             Inspect dist/build-report.json and performance budgets
  wrnexus explain <route|build|hydration|bundle> [subject] [app-dir]
                                             Explain compiler and production build decisions
  wrnexus explain <cache|permission> <subject> [app-dir]
                                             Explain route caching or permission enforcement
  wrnexus inspect <target> [app-dir]    Inspect packages | plugins | routes | assets | runtimes | styles | migrations | bundle
  wrnexus inspect component <name> [app-dir]
                                             Inspect a component's typed public contract
  wrnexus generate system <name>        Scaffold a complete framework-native package

Profiles: pass --profile=<name> to dev/build/db (or set WRNEXUS_PROFILE) to load
that profile's .env cascade and config overrides. e.g. wrnexus dev --profile=uat

Workspace environments: configure protocol, rootDomain, port, hostname, runtime
(development|production), hmr, build, migrate, and profile in wrnexus.workspace.ts.
CLI overrides: --port, --host, --build/--no-build, --migrate/--no-migrate,
--profile, and --prepare-only.

Update options: --dry-run previews changes; --no-verify skips post-update check/build.
```

## CLI workflows with expected output

Commands below are copy-ready. Paths, ports, counts, and timings vary by project; the shown output identifies the success condition to check.

### Create, check, build, and preview an application

```bash
bunx @wrnexus/cli@0.8.7 create my-app
cd my-app
bun install
bunx wrnexus typecheck .
bunx wrnexus build .
bunx wrnexus preview . --port=3000
```

Expected output:

```text
✓ Application types are valid
✓ Runtime: .../dist/reactive.js
✓ Styles:  .../dist/styles.css
✓ Server:  .../dist/server.js
Run it:  bun .../dist/server.js
```

### Generate framework files and committed application types

```bash
bunx wrnexus generate page Dashboard
bunx wrnexus generate component status-card
bunx wrnexus generate api health
bunx wrnexus generate schema account
bunx wrnexus generate routes
bunx wrnexus generate types .
```

Expected output includes created source paths followed by:

```text
✓ Generated app/routes.gen.ts (... routes)
✓ Generated .../app/types/wrnexus.generated.d.ts (... routes, ... components)
```

### Run development and production-runtime modes

```bash
bunx wrnexus dev . --port=3000
bunx wrnexus dev . --services --services-port=3099
bunx wrnexus dev . --production-runtime --port=3000
```

Expected output reports the active profile, discovered plugins/routes, generated cache path, and listening URL. Production-runtime mode rebuilds and reloads the exact production artifact.

### Database lifecycle

```bash
bunx wrnexus db status
bunx wrnexus db new create_accounts --from-models
bunx wrnexus db migrate
bunx wrnexus db generate
bunx wrnexus db seed
```

Expected output identifies the selected profile/dialect, migration state, applied migration names, and generated typed query files. Run `db rollback` only when intentionally reverting the latest migration.

### Diagnose, inspect, and enforce contracts

```bash
bunx wrnexus doctor .
bunx wrnexus typecheck .
bunx wrnexus compatibility check .
bunx wrnexus contracts check .
bunx wrnexus security audit .
bunx wrnexus inspect packages .
bunx wrnexus inspect routes .
bunx wrnexus inspect component Navbar .
bunx wrnexus analyze .
```

Successful checks exit with status 0. Inspect commands print the resolved package, route, component, asset, runtime, style, migration, or bundle contract without changing the application.

### Tests, API artifacts, SDKs, and deployment manifests

```bash
bunx wrnexus test unit .
bunx wrnexus test component .
bunx wrnexus test api .
bunx wrnexus test browser .
bunx wrnexus api generate .
bunx wrnexus api docs .
bunx wrnexus sdk generate typescript .
bunx wrnexus deploy docker .
```

Test commands return the underlying suite summary and a nonzero status on failure. API/SDK/deploy commands report each generated artifact; review and commit generated files after validation.

### Workspaces and environments

```bash
bunx wrnexus workspace company-platform
cd company-platform
bunx wrnexus workspace add reports --domain=reports.localhost
bunx wrnexus gateway --port=3000
bunx wrnexus production . --prepare-only
bunx wrnexus staging .
```

Expected output lists created apps, domain mappings, selected environment/profile, build and migration decisions, and the gateway address.

### Internationalization, native targets, MCP, and support bundles

```bash
bunx wrnexus i18n extract .
bunx wrnexus i18n validate .
bunx wrnexus generate mobile
bunx wrnexus mobile compile
bunx wrnexus native list
bunx wrnexus mcp .
bunx wrnexus report . --file=app/pages/index.wrn
```

Expected output identifies extracted/validated translation keys, generated native routes, available capabilities, MCP stdio startup, or the sanitized reproduction archive. MCP uses stdio, so protocol messages—not a web URL—are its normal runtime output.

### Safe upgrades

```bash
bunx wrnexus update . --latest --dry-run
bunx wrnexus update . --latest
```

The dry run previews dependency and migration changes. A real update prints the source and target versions, backup directory, each migration action, installation result, and verification result. Commit or back up the application before upgrading.

# Complete CLI command reference

This section is generated from the installed `@wrnexus/cli@0.8.8` executable. It is the canonical command inventory for this release.

```text
wrnexus — WrNexus CLI

Usage:
  wrnexus dev [app-dir] [--port=3000] [--host=::]
                                             Start the development server (live reload)
  wrnexus dev [app-dir] --services        Start local production-service simulators with the app
  wrnexus dev [app-dir] --production-runtime
  wrnexus dev [app-dir] --services [--services-port=3099] [--services-http]
                                             Rebuild and reload the exact production artifact
  wrnexus build [app-dir]               Build a production server bundle + assets
  wrnexus preview [app-dir]             Serve the existing exact production output
  wrnexus create <app-name>             Scaffold a new app
  wrnexus workspace <name>              Scaffold a monorepo (apps/* + shared packages/*)
  wrnexus workspace add <name> [--domain=name.localhost]
                                             Add an app to the current workspace
  wrnexus gateway [--port=3000]         Serve every workspace app behind one port, routed by domain
  wrnexus production [workspace-dir]    Build, migrate, and serve the complete production workspace
  wrnexus <environment> [workspace-dir] Run a configured workspace environment (development/staging/custom)
  wrnexus generate <type> <name>        Scaffold a page | component | api | schema
  wrnexus generate routes | docker | mobile
                                             Generate routes or scaffold deployment targets
  wrnexus generate types [app-dir]       Generate application-wide route/component/key types
  wrnexus routes [app-dir]               Generate typed named routes
  wrnexus typecheck [app-dir]            Generate types and check TypeScript plus every .wrn file
  wrnexus mobile add <package...>       Install Capacitor or Expo native packages
  wrnexus mobile compile                Compile .wrn pages into native Expo routes
  wrnexus native list                   List cross-platform native capabilities
  wrnexus native add <capability...>    Install capability packages for the configured mobile mode
  wrnexus eject <name...>               Copy a Wire UI component into app/components
  wrnexus update [dir] [--latest]       Upgrade deps, migrate project files, and verify the app
  wrnexus db <cmd>                      Migrations: migrate | rollback | status | seed | generate | new
  wrnexus authz <cmd>                    Authorization: list | generate | init [--dialect=sqlite|postgres|mysql]
  wrnexus test [level] [app-dir] [--watch]
                                             Run unit | component | api | browser | visual | accessibility | performance
  wrnexus profiles [app-dir]            List config profiles (dev/prod/uat/…) and their env files
  wrnexus doctor [app-dir] [--fix]      Check project health; optionally apply safe repairs
  wrnexus compatibility <check|explain|upgrade> [app-dir]
                                             Inspect or explicitly upgrade behavior defaults
  wrnexus contracts <check|snapshot> [app-dir]
                                             Detect breaking boundary contract changes
  wrnexus security <audit|headers|test> [app-dir]
                                             Audit ASVS controls, inspect headers, or run abuse tests
  wrnexus api <generate|docs> [app-dir] Generate OpenAPI, docs, Postman, examples and SDKs
  wrnexus sdk generate <language> [app-dir]
                                             Generate TypeScript, JavaScript, Java, Go, or Python SDK
  wrnexus deploy <target> [app-dir]       Generate docker | kubernetes | systemd | railway | render | fly
  wrnexus mcp [app-dir]                   Start the WRNexus MCP server over stdio
  wrnexus i18n <extract|validate> [app-dir]
                                             Extract and audit translation keys
  wrnexus report [app-dir] [--file=app/pages/page.wrn]
                                             Create a sanitized reproduction bundle
  wrnexus playground [--port=4173]         Start the shareable WRN compiler playground
  wrnexus config [app-dir] --explain    Print the fully resolved profile configuration
  wrnexus analyze [app-dir]             Inspect dist/build-report.json and performance budgets
  wrnexus explain <route|build|hydration|bundle> [subject] [app-dir]
                                             Explain compiler and production build decisions
  wrnexus explain <cache|permission> <subject> [app-dir]
                                             Explain route caching or permission enforcement
  wrnexus inspect <target> [app-dir]    Inspect packages | plugins | routes | assets | runtimes | styles | migrations | bundle
  wrnexus inspect component <name> [app-dir]
                                             Inspect a component's typed public contract
  wrnexus generate system <name>        Scaffold a complete framework-native package

Profiles: pass --profile=<name> to dev/build/db (or set WRNEXUS_PROFILE) to load
that profile's .env cascade and config overrides. e.g. wrnexus dev --profile=uat

Workspace environments: configure protocol, rootDomain, port, hostname, runtime
(development|production), hmr, build, migrate, and profile in wrnexus.workspace.ts.
CLI overrides: --port, --host, --build/--no-build, --migrate/--no-migrate,
--profile, and --prepare-only.

Update options: --dry-run previews changes; --no-verify skips post-update check/build.
```

## CLI workflows with expected output

Commands below are copy-ready. Paths, ports, counts, and timings vary by project; the shown output identifies the success condition to check.

### Create, check, build, and preview an application

```bash
bunx @wrnexus/cli@0.8.8 create my-app
cd my-app
bun install
bunx wrnexus typecheck .
bunx wrnexus build .
bunx wrnexus preview . --port=3000
```

Expected output:

```text
✓ Application types are valid
✓ Runtime: .../dist/reactive.js
✓ Styles:  .../dist/styles.css
✓ Server:  .../dist/server.js
Run it:  bun .../dist/server.js
```

### Generate framework files and committed application types

```bash
bunx wrnexus generate page Dashboard
bunx wrnexus generate component status-card
bunx wrnexus generate api health
bunx wrnexus generate schema account
bunx wrnexus generate routes
bunx wrnexus generate types .
```

Expected output includes created source paths followed by:

```text
✓ Generated app/routes.gen.ts (... routes)
✓ Generated .../app/types/wrnexus.generated.d.ts (... routes, ... components)
```

### Run development and production-runtime modes

```bash
bunx wrnexus dev . --port=3000
bunx wrnexus dev . --services --services-port=3099
bunx wrnexus dev . --production-runtime --port=3000
```

Expected output reports the active profile, discovered plugins/routes, generated cache path, and listening URL. Production-runtime mode rebuilds and reloads the exact production artifact.

### Database lifecycle

```bash
bunx wrnexus db status
bunx wrnexus db new create_accounts --from-models
bunx wrnexus db migrate
bunx wrnexus db generate
bunx wrnexus db seed
```

Expected output identifies the selected profile/dialect, migration state, applied migration names, and generated typed query files. Run `db rollback` only when intentionally reverting the latest migration.

### Diagnose, inspect, and enforce contracts

```bash
bunx wrnexus doctor .
bunx wrnexus typecheck .
bunx wrnexus compatibility check .
bunx wrnexus contracts check .
bunx wrnexus security audit .
bunx wrnexus inspect packages .
bunx wrnexus inspect routes .
bunx wrnexus inspect component Navbar .
bunx wrnexus analyze .
```

Successful checks exit with status 0. Inspect commands print the resolved package, route, component, asset, runtime, style, migration, or bundle contract without changing the application.

### Tests, API artifacts, SDKs, and deployment manifests

```bash
bunx wrnexus test unit .
bunx wrnexus test component .
bunx wrnexus test api .
bunx wrnexus test browser .
bunx wrnexus api generate .
bunx wrnexus api docs .
bunx wrnexus sdk generate typescript .
bunx wrnexus deploy docker .
```

Test commands return the underlying suite summary and a nonzero status on failure. API/SDK/deploy commands report each generated artifact; review and commit generated files after validation.

### Workspaces and environments

```bash
bunx wrnexus workspace company-platform
cd company-platform
bunx wrnexus workspace add reports --domain=reports.localhost
bunx wrnexus gateway --port=3000
bunx wrnexus production . --prepare-only
bunx wrnexus staging .
```

Expected output lists created apps, domain mappings, selected environment/profile, build and migration decisions, and the gateway address.

### Internationalization, native targets, MCP, and support bundles

```bash
bunx wrnexus i18n extract .
bunx wrnexus i18n validate .
bunx wrnexus generate mobile
bunx wrnexus mobile compile
bunx wrnexus native list
bunx wrnexus mcp .
bunx wrnexus report . --file=app/pages/index.wrn
```

Expected output identifies extracted/validated translation keys, generated native routes, available capabilities, MCP stdio startup, or the sanitized reproduction archive. MCP uses stdio, so protocol messages—not a web URL—are its normal runtime output.

### Safe upgrades

```bash
bunx wrnexus update . --latest --dry-run
bunx wrnexus update . --latest
```

The dry run previews dependency and migration changes. A real update prints the source and target versions, backup directory, each migration action, installation result, and verification result. Commit or back up the application before upgrading.

# Complete CLI command reference

This section is generated from the installed `@wrnexus/cli@0.8.8` executable. It is the canonical command inventory for this release.

```text
wrnexus — WrNexus CLI

Usage:
  wrnexus dev [app-dir] [--port=3000] [--host=::]
                                             Start the development server (live reload)
  wrnexus dev [app-dir] --services        Start local production-service simulators with the app
  wrnexus dev [app-dir] --production-runtime
  wrnexus dev [app-dir] --services [--services-port=3099] [--services-http]
                                             Rebuild and reload the exact production artifact
  wrnexus build [app-dir]               Build a production server bundle + assets
  wrnexus preview [app-dir]             Serve the existing exact production output
  wrnexus create <app-name>             Scaffold a new app
  wrnexus workspace <name>              Scaffold a monorepo (apps/* + shared packages/*)
  wrnexus workspace add <name> [--domain=name.localhost]
                                             Add an app to the current workspace
  wrnexus gateway [--port=3000]         Serve every workspace app behind one port, routed by domain
  wrnexus production [workspace-dir]    Build, migrate, and serve the complete production workspace
  wrnexus <environment> [workspace-dir] Run a configured workspace environment (development/staging/custom)
  wrnexus generate <type> <name>        Scaffold a page | component | api | schema
  wrnexus generate routes | docker | mobile
                                             Generate routes or scaffold deployment targets
  wrnexus generate types [app-dir]       Generate application-wide route/component/key types
  wrnexus routes [app-dir]               Generate typed named routes
  wrnexus typecheck [app-dir]            Generate types and check TypeScript plus every .wrn file
  wrnexus mobile add <package...>       Install Capacitor or Expo native packages
  wrnexus mobile compile                Compile .wrn pages into native Expo routes
  wrnexus native list                   List cross-platform native capabilities
  wrnexus native add <capability...>    Install capability packages for the configured mobile mode
  wrnexus eject <name...>               Copy a Wire UI component into app/components
  wrnexus update [dir] [--latest]       Upgrade deps, migrate project files, and verify the app
  wrnexus db <cmd>                      Migrations: migrate | rollback | status | seed | generate | new
  wrnexus authz <cmd>                    Authorization: list | generate | init [--dialect=sqlite|postgres|mysql]
  wrnexus test [level] [app-dir] [--watch]
                                             Run unit | component | api | browser | visual | accessibility | performance
  wrnexus profiles [app-dir]            List config profiles (dev/prod/uat/…) and their env files
  wrnexus doctor [app-dir] [--fix]      Check project health; optionally apply safe repairs
  wrnexus compatibility <check|explain|upgrade> [app-dir]
                                             Inspect or explicitly upgrade behavior defaults
  wrnexus contracts <check|snapshot> [app-dir]
                                             Detect breaking boundary contract changes
  wrnexus security <audit|headers|test> [app-dir]
                                             Audit ASVS controls, inspect headers, or run abuse tests
  wrnexus api <generate|docs> [app-dir] Generate OpenAPI, docs, Postman, examples and SDKs
  wrnexus sdk generate <language> [app-dir]
                                             Generate TypeScript, JavaScript, Java, Go, or Python SDK
  wrnexus deploy <target> [app-dir]       Generate docker | kubernetes | systemd | railway | render | fly
  wrnexus mcp [app-dir]                   Start the WRNexus MCP server over stdio
  wrnexus i18n <extract|validate> [app-dir]
                                             Extract and audit translation keys
  wrnexus report [app-dir] [--file=app/pages/page.wrn]
                                             Create a sanitized reproduction bundle
  wrnexus playground [--port=4173]         Start the shareable WRN compiler playground
  wrnexus config [app-dir] --explain    Print the fully resolved profile configuration
  wrnexus analyze [app-dir]             Inspect dist/build-report.json and performance budgets
  wrnexus explain <route|build|hydration|bundle> [subject] [app-dir]
                                             Explain compiler and production build decisions
  wrnexus explain <cache|permission> <subject> [app-dir]
                                             Explain route caching or permission enforcement
  wrnexus inspect <target> [app-dir]    Inspect packages | plugins | routes | assets | runtimes | styles | migrations | bundle
  wrnexus inspect component <name> [app-dir]
                                             Inspect a component's typed public contract
  wrnexus generate system <name>        Scaffold a complete framework-native package

Profiles: pass --profile=<name> to dev/build/db (or set WRNEXUS_PROFILE) to load
that profile's .env cascade and config overrides. e.g. wrnexus dev --profile=uat

Workspace environments: configure protocol, rootDomain, port, hostname, runtime
(development|production), hmr, build, migrate, and profile in wrnexus.workspace.ts.
CLI overrides: --port, --host, --build/--no-build, --migrate/--no-migrate,
--profile, and --prepare-only.

Update options: --dry-run previews changes; --no-verify skips post-update check/build.
```

## CLI workflows with expected output

Commands below are copy-ready. Paths, ports, counts, and timings vary by project; the shown output identifies the success condition to check.

### Create, check, build, and preview an application

```bash
bunx @wrnexus/cli@0.8.8 create my-app
cd my-app
bun install
bunx wrnexus typecheck .
bunx wrnexus build .
bunx wrnexus preview . --port=3000
```

Expected output:

```text
✓ Application types are valid
✓ Runtime: .../dist/reactive.js
✓ Styles:  .../dist/styles.css
✓ Server:  .../dist/server.js
Run it:  bun .../dist/server.js
```

### Generate framework files and committed application types

```bash
bunx wrnexus generate page Dashboard
bunx wrnexus generate component status-card
bunx wrnexus generate api health
bunx wrnexus generate schema account
bunx wrnexus generate routes
bunx wrnexus generate types .
```

Expected output includes created source paths followed by:

```text
✓ Generated app/routes.gen.ts (... routes)
✓ Generated .../app/types/wrnexus.generated.d.ts (... routes, ... components)
```

### Run development and production-runtime modes

```bash
bunx wrnexus dev . --port=3000
bunx wrnexus dev . --services --services-port=3099
bunx wrnexus dev . --production-runtime --port=3000
```

Expected output reports the active profile, discovered plugins/routes, generated cache path, and listening URL. Production-runtime mode rebuilds and reloads the exact production artifact.

### Database lifecycle

```bash
bunx wrnexus db status
bunx wrnexus db new create_accounts --from-models
bunx wrnexus db migrate
bunx wrnexus db generate
bunx wrnexus db seed
```

Expected output identifies the selected profile/dialect, migration state, applied migration names, and generated typed query files. Run `db rollback` only when intentionally reverting the latest migration.

### Diagnose, inspect, and enforce contracts

```bash
bunx wrnexus doctor .
bunx wrnexus typecheck .
bunx wrnexus compatibility check .
bunx wrnexus contracts check .
bunx wrnexus security audit .
bunx wrnexus inspect packages .
bunx wrnexus inspect routes .
bunx wrnexus inspect component Navbar .
bunx wrnexus analyze .
```

Successful checks exit with status 0. Inspect commands print the resolved package, route, component, asset, runtime, style, migration, or bundle contract without changing the application.

### Tests, API artifacts, SDKs, and deployment manifests

```bash
bunx wrnexus test unit .
bunx wrnexus test component .
bunx wrnexus test api .
bunx wrnexus test browser .
bunx wrnexus api generate .
bunx wrnexus api docs .
bunx wrnexus sdk generate typescript .
bunx wrnexus deploy docker .
```

Test commands return the underlying suite summary and a nonzero status on failure. API/SDK/deploy commands report each generated artifact; review and commit generated files after validation.

### Workspaces and environments

```bash
bunx wrnexus workspace company-platform
cd company-platform
bunx wrnexus workspace add reports --domain=reports.localhost
bunx wrnexus gateway --port=3000
bunx wrnexus production . --prepare-only
bunx wrnexus staging .
```

Expected output lists created apps, domain mappings, selected environment/profile, build and migration decisions, and the gateway address.

### Internationalization, native targets, MCP, and support bundles

```bash
bunx wrnexus i18n extract .
bunx wrnexus i18n validate .
bunx wrnexus generate mobile
bunx wrnexus mobile compile
bunx wrnexus native list
bunx wrnexus mcp .
bunx wrnexus report . --file=app/pages/index.wrn
```

Expected output identifies extracted/validated translation keys, generated native routes, available capabilities, MCP stdio startup, or the sanitized reproduction archive. MCP uses stdio, so protocol messages—not a web URL—are its normal runtime output.

### Safe upgrades

```bash
bunx wrnexus update . --latest --dry-run
bunx wrnexus update . --latest
```

The dry run previews dependency and migration changes. A real update prints the source and target versions, backup directory, each migration action, installation result, and verification result. Commit or back up the application before upgrading.

# Canonical documentation locations

- Framework and package documentation: https://wrnexusjs.dev/
- Interactive UI component showcase and examples: https://component.wrnexusjs.dev/
- Comprehensive AI reference: https://wrnexusjs.dev/llms-full.txt

# Installed package index

## @wrnexus/ai

- @wrnexus/ai 0.8.8
- Documentation: https://wrnexusjs.dev/packages/ai
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/auth

- @wrnexus/auth 0.8.8
- Documentation: https://wrnexusjs.dev/packages/auth
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/authz

- @wrnexus/authz 0.8.8
- Documentation: https://wrnexusjs.dev/packages/authz
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/benchmark

- @wrnexus/benchmark 0.8.8
- Documentation: https://wrnexusjs.dev/packages/benchmark
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/cache

- @wrnexus/cache 0.8.8
- Documentation: https://wrnexusjs.dev/packages/cache
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/captcha

- @wrnexus/captcha 0.8.8
- Documentation: https://wrnexusjs.dev/packages/captcha
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/cli

- @wrnexus/cli 0.8.8
- Documentation: https://wrnexusjs.dev/packages/cli
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/compiler

- @wrnexus/compiler 0.8.8
- Documentation: https://wrnexusjs.dev/packages/compiler
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/content

- @wrnexus/content 0.8.8
- Documentation: https://wrnexusjs.dev/packages/content
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/core

- @wrnexus/core 0.8.8
- Documentation: https://wrnexusjs.dev/packages/core
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/csr

- @wrnexus/csr 0.8.8
- Documentation: https://wrnexusjs.dev/packages/csr
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/db

- @wrnexus/db 0.8.8
- Documentation: https://wrnexusjs.dev/packages/db
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/dev-server

- @wrnexus/dev-server 0.8.8
- Documentation: https://wrnexusjs.dev/packages/dev-server
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/dev-toolbar

- @wrnexus/dev-toolbar 0.8.8
- Documentation: https://wrnexusjs.dev/packages/dev-toolbar
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/encryption

- @wrnexus/encryption 0.8.8
- Documentation: https://wrnexusjs.dev/packages/encryption
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/graphql

- @wrnexus/graphql 0.8.8
- Documentation: https://wrnexusjs.dev/packages/graphql
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/helpers

- @wrnexus/helpers 0.8.8
- Documentation: https://wrnexusjs.dev/packages/helpers
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/i18n

- @wrnexus/i18n 0.8.8
- Documentation: https://wrnexusjs.dev/packages/i18n
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/identity

- @wrnexus/identity 0.8.8
- Documentation: https://wrnexusjs.dev/packages/identity
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/image

- @wrnexus/image 0.8.8
- Documentation: https://wrnexusjs.dev/packages/image
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/jwt

- @wrnexus/jwt 0.8.8
- Documentation: https://wrnexusjs.dev/packages/jwt
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/language-server

- @wrnexus/language-server 0.8.8
- Documentation: https://wrnexusjs.dev/packages/language-server
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/mcp

- @wrnexus/mcp 0.8.8
- Documentation: https://wrnexusjs.dev/packages/mcp
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/mobile

- @wrnexus/mobile 0.8.8
- Documentation: https://wrnexusjs.dev/packages/mobile
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/native

- @wrnexus/native 0.8.8
- Documentation: https://wrnexusjs.dev/packages/native
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/oauth

- @wrnexus/oauth 0.8.8
- Documentation: https://wrnexusjs.dev/packages/oauth
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/observability

- @wrnexus/observability 0.8.8
- Documentation: https://wrnexusjs.dev/packages/observability
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/playground

- @wrnexus/playground 0.8.8
- Documentation: https://wrnexusjs.dev/packages/playground
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/plugin

- @wrnexus/plugin 0.8.8
- Documentation: https://wrnexusjs.dev/packages/plugin
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/pubsub

- @wrnexus/pubsub 0.8.8
- Documentation: https://wrnexusjs.dev/packages/pubsub
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/pwa

- @wrnexus/pwa 0.8.8
- Documentation: https://wrnexusjs.dev/packages/pwa
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/queue

- @wrnexus/queue 0.8.8
- Documentation: https://wrnexusjs.dev/packages/queue
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/reactive

- @wrnexus/reactive 0.8.8
- Documentation: https://wrnexusjs.dev/packages/reactive
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/realtime

- @wrnexus/realtime 0.8.8
- Documentation: https://wrnexusjs.dev/packages/realtime
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/router

- @wrnexus/router 0.8.8
- Documentation: https://wrnexusjs.dev/packages/router
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/rpc

- @wrnexus/rpc 0.8.8
- Documentation: https://wrnexusjs.dev/packages/rpc
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/security

- @wrnexus/security 0.8.8
- Documentation: https://wrnexusjs.dev/packages/security
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/ssr

- @wrnexus/ssr 0.8.8
- Documentation: https://wrnexusjs.dev/packages/ssr
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/store

- @wrnexus/store 0.8.8
- Documentation: https://wrnexusjs.dev/packages/store
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/styles

- @wrnexus/styles 0.8.8
- Documentation: https://wrnexusjs.dev/packages/styles
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/syntax

- @wrnexus/syntax 0.8.8
- Documentation: https://wrnexusjs.dev/packages/syntax
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/test

- @wrnexus/test 0.8.8
- Documentation: https://wrnexusjs.dev/packages/test
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/tracking

- @wrnexus/tracking 0.8.8
- Documentation: https://wrnexusjs.dev/packages/tracking
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/typecheck

- @wrnexus/typecheck 0.8.8
- Documentation: https://wrnexusjs.dev/packages/typecheck
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/ui

- @wrnexus/ui 0.8.8
- Documentation: https://wrnexusjs.dev/packages/ui
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/uploader

- @wrnexus/uploader 0.8.8
- Documentation: https://wrnexusjs.dev/packages/uploader
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

## @wrnexus/validation

- @wrnexus/validation 0.8.8
- Documentation: https://wrnexusjs.dev/packages/validation
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt

# UI component catalog

The installed @wrnexus/ui 0.8.8 release contains 102 documented components. The contracts below include every mount name, purpose, prop type, required/default status, slot, and event. Interactive examples live only on the dedicated component showcase.

### Accordion
Showcase: https://component.wrnexusjs.dev/
Mount: <Accordion /> (legacy: data-component="Accordion")
Category: base
Purpose: Theme-aware, responsive accordion component.
Props: size: string = "default", color: string = "primary", variant: string = "default", class: string = "", id: string = "accordion", items: unknown[] = [], defaultOpen: unknown[] = [], multiple: boolean = false, alwaysOpen: boolean = false, disabled: boolean = false, indicator: string = "plus", indicatorPosition: string = "start", showIndicator: boolean = true, bordered: boolean = false, separated: boolean = false, flush: boolean = false, contentItalic: boolean = false
Slots: none
Events: change, open, close

### AdvancedSelect
Showcase: https://component.wrnexusjs.dev/
Mount: <AdvancedSelect /> (legacy: data-component="AdvancedSelect")
Category: advanced-forms
Purpose: Theme-aware, responsive advanced select component.
Props: size: string = "default", color: string = "primary", label: string = "Advanced Select", name: string = "", value: string = "", values: unknown[] = [], options: unknown[] = [], groups: unknown[] = [], placeholder: string = "Select an option", placeholderIcon: string = "", searchPlaceholder: string = "Search options…", multiple: boolean = false, searchable: boolean = true, defaultOpen: boolean = false, clearable: boolean = true, allowEmpty: boolean = true, tags: boolean = false, disabled: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", helpText: string = "", loading: boolean = false, loadingLabel: string = "Loading options…", emptyLabel: string = "No options found", selectedOptionsLabel: string = "Selected options", clearLabel: string = "Clear selection", createLabel: string = "Create", loadMoreLabel: string = "Load more", searchMode: string = "contains", searchFields: string = "label,description", minSearchLength: number = 0, searchResultLimit: number = 0, maxSelections: number = 0, showCounter: boolean = false, counterTemplate: string = "{selected} selected", optionTemplate: string = "default", selectedTemplate: string = "default", closeOnSelect: boolean = true, scrollToSelected: boolean = true, fixed: boolean = false, placement: string = "bottom", remote: boolean = false, remoteUrl: string = "", remoteQueryParam: string = "q", remoteDebounce: number = 250, remoteAutoLoad: boolean = true, infinite: boolean = false, hasMore: boolean = false, page: number = 1, class: string = ""
Slots: none
Events: search, select, change, clear, open, close, load, error

### Alert
Showcase: https://component.wrnexusjs.dev/
Mount: <Alert /> (legacy: data-component="Alert")
Category: base
Purpose: Theme-aware, responsive alert component.
Props: size: string = "default", color: string = "info", variant: string = "soft", class: string = "", radius: string = "md", shadow: string = "sm", title: string = "Alert", description: string = "", items: unknown[] = [], actions: unknown[] = [], showIcon: boolean = false, icon: string = "", dismissible: boolean = false, dismissLabel: string = "Dismiss alert", role: string = "alert", live: string = "polite", linkLabel: string = "", linkHref: string = "", actionLabel: string = "", actionHref: string = "", compact: boolean = false
Slots: none
Events: dismiss, action

### AnnouncementBar
Showcase: https://component.wrnexusjs.dev/
Mount: <AnnouncementBar /> (legacy: data-component="AnnouncementBar")
Category: marketing
Purpose: Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.
Props: badge: string = "", badgeIcon: string = "", message: string = "Announcement", description: string = "", icon: string = "icon-[lucide--megaphone]", actionLabel: string = "", actionHref: string = "", actionIcon: string = "", dismissible: boolean = false, dismissLabel: string = "Dismiss announcement", sticky: boolean = false, compact: boolean = false, size: string = "default", width: string = "default", color: string = "primary", variant: string = "soft", role: string = "status", live: string = "polite", class: string = ""
Slots: none
Events: dismiss

### AuthForm
Showcase: https://component.wrnexusjs.dev/
Mount: <AuthForm /> (legacy: data-component="AuthForm")
Category: core
Purpose: Reusable auth form component.
Props: size: string = "default", color: string = "primary", mode: string = "sign-in", action: string = "/api/auth/login", method: string = "post", title: string = "Sign in", description: string = "", returnTo: string = "", schema: string = "", showRemember: boolean = true, showName: boolean = true, submitLabel: string = "Continue", class: string = ""
Slots: default
Events: submit, change, input, focus, blur

### AuthSplitLayout
Showcase: https://component.wrnexusjs.dev/
Mount: <AuthSplitLayout /> (legacy: data-component="AuthSplitLayout")
Category: core
Purpose: Reusable auth split layout component.
Props: size: string = "default", color: string = "primary", eyebrow: string = "Secure identity", title: string = "Welcome back", description: string = "", brand: string = "Police Management System", features: unknown[] = [], class: string = ""
Slots: aside-extra, form
Events: none

### Avatar
Showcase: https://component.wrnexusjs.dev/
Mount: <Avatar /> (legacy: data-component="Avatar")
Category: base
Purpose: Theme-aware, responsive avatar component.
Props: src: string = "", alt: string = "", initials: string = "", size: string = "md", color: string = "primary", variant: string = "solid", shape: string = "circle", status: string = "", statusLabel: string = "", statusPosition: string = "bottom", badge: string = "", badgeIcon: string = "", badgeLabel: string = "", tooltip: string = "", name: string = "", description: string = "", loading: string = "lazy", class: string = ""
Slots: none
Events: load, error, click

### AvatarGroup
Showcase: https://component.wrnexusjs.dev/
Mount: <AvatarGroup /> (legacy: data-component="AvatarGroup")
Category: base
Purpose: Theme-aware, responsive avatar group component.
Props: items: unknown[] = [], size: string = "md", color: string = "primary", variant: string = "solid", shape: string = "circle", layout: string = "stack", maxVisible: number = 4, columns: number = 3, borderColor: string = "", showTooltips: boolean = true, overflowLabel: string = "Show remaining members", class: string = ""
Slots: none
Events: overflow

### BackToTop
Showcase: https://component.wrnexusjs.dev/
Mount: <BackToTop /> (legacy: data-component="BackToTop")
Category: navigation
Purpose: Provide a responsive floating control that returns long pages to the top and can show scroll progress.
Props: threshold: number = 500, label: string = "Back to top", ariaLabel: string = "Scroll back to top", icon: string = "icon-[lucide--arrow-up]", position: string = "right", offset: string = "md", behavior: string = "smooth", showProgress: boolean = false, showLabel: boolean = false, alwaysVisible: boolean = false, size: string = "default", color: string = "primary", variant: string = "solid", shape: string = "round", class: string = ""
Slots: none
Events: none

### Badge
Showcase: https://component.wrnexusjs.dev/
Mount: <Badge /> (legacy: data-component="Badge")
Category: base
Purpose: Theme-aware, responsive badge component.
Props: label: string = "Badge", size: string = "md", color: string = "primary", variant: string = "solid", shape: string = "pill", class: string = "", icon: string = "", iconPosition: string = "start", dot: boolean = false, dotOnly: boolean = false, dotLabel: string = "Status", animated: boolean = false, avatarSrc: string = "", avatarAlt: string = "", dismissible: boolean = false, dismissLabel: string = "Remove badge", truncate: boolean = false, maxWidth: string = "12rem", anchorLabel: string = "", anchorIcon: string = "", placement: string = "inline", anchorLabelText: string = "Badge anchor"
Slots: none
Events: dismiss

### Blockquote
Showcase: https://component.wrnexusjs.dev/
Mount: <Blockquote /> (legacy: data-component="Blockquote")
Category: base
Purpose: Theme-aware, responsive blockquote component.
Props: quote: string = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.", citation: string = "", citationTitle: string = "", citationUrl: string = "", avatarSrc: string = "", avatarAlt: string = "", size: string = "md", color: string = "primary", align: string = "left", variant: string = "default", quoteMark: boolean = true, italic: boolean = true, class: string = ""
Slots: default
Events: none

### Breadcrumb
Showcase: https://component.wrnexusjs.dev/
Mount: <Breadcrumb /> (legacy: data-component="Breadcrumb")
Category: navigation
Purpose: Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.
Props: label: string = "Breadcrumb", items: unknown[] = [], active: string = "", separator: string = "chevron", showHome: boolean = false, homeLabel: string = "Home", homeHref: string = "/", homeIcon: string = "icon-[lucide--house]", size: string = "default", color: string = "primary", variant: string = "minimal", class: string = ""
Slots: none
Events: select

### Button
Showcase: https://component.wrnexusjs.dev/
Mount: <Button /> (legacy: data-component="Button")
Category: base
Purpose: Theme-aware, responsive button component.
Props: label: string = "Button", loadingLabel: string = "Loading…", description: string = "", as: string = "", href: string = "", target: string = "", rel: string = "", type: string = "button", variant: string = "default", color: string = "primary", size: string = "default", disabled: boolean = false, loading: boolean = false, pill: boolean = false, fullWidth: boolean = false, icon: string = "", iconPosition: string = "start", ariaLabel: string = "", ariaPressed: string = "", ariaExpanded: string = "", ariaControls: string = "", title: string = "", autofocus: boolean = false, controlClass: string = "", class: string = ""
Slots: default
Events: click, focus, blur

### ButtonGroup
Showcase: https://component.wrnexusjs.dev/
Mount: <ButtonGroup /> (legacy: data-component="ButtonGroup")
Category: base
Purpose: Theme-aware, responsive button group component.
Props: items: unknown[] = [], value: string = "", size: string = "md", color: string = "primary", variant: string = "default", orientation: string = "horizontal", responsive: boolean = false, attached: boolean = true, selectable: boolean = false, toolbar: boolean = false, disabled: boolean = false, ariaLabel: string = "Button group", class: string = ""
Slots: default
Events: click, select, change

### CTASection
Showcase: https://component.wrnexusjs.dev/
Mount: <CTASection /> (legacy: data-component="CTASection")
Category: marketing
Purpose: Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.
Props: eyebrow: string = "", title: string = "Ready to get started?", description: string = "", icon: string = "", align: string = "center", size: string = "default", color: string = "primary", variant: string = "solid", primaryLabel: string = "Get started", primaryHref: string = "#", primaryIcon: string = "", secondaryLabel: string = "", secondaryHref: string = "", secondaryIcon: string = "", backgroundImage: string = "", visualImage: string = "", visualAlt: string = "", visualIcon: string = "", visualTitle: string = "", visualDescription: string = "", visualItems: unknown[] = [], visualPosition: string = "right", maxWidth: string = "xl", fullBleed: boolean = false, class: string = ""
Slots: default, actions, visual, footer
Events: none

### Card
Showcase: https://component.wrnexusjs.dev/
Mount: <Card /> (legacy: data-component="Card")
Category: base
Purpose: Group related content in a responsive themed surface with title, description, content, and supporting slots.
Props: title: string = "Card title", subtitle: string = "", description: string = "", header: string = "", footer: string = "", imageSrc: string = "", imageAlt: string = "", imagePosition: string = "top", actionLabel: string = "", actionHref: string = "", headerActions: unknown[] = [], navigation: unknown[] = [], activeNav: string = "", mobileNavigation: boolean = false, alertTitle: string = "", alertDescription: string = "", empty: boolean = false, emptyTitle: string = "No data to show", emptyIcon: string = "icon-[lucide--inbox]", items: unknown[] = [], size: string = "md", color: string = "primary", variant: string = "default", layout: string = "vertical", align: string = "left", hover: string = "none", scrollable: boolean = false, maxHeight: string = "18rem", dismissible: boolean = false, ariaLabel: string = "", class: string = ""
Slots: default
Events: click, action, navigate, dismiss, load, error

### Carousel
Showcase: https://component.wrnexusjs.dev/
Mount: <Carousel /> (legacy: data-component="Carousel")
Category: base
Purpose: Theme-aware, responsive carousel component.
Props: size: string = "default", color: string = "primary", title: string = "", description: string = "", items: unknown[] = [], activeIndex: number = 0, slidesPerView: number = 1, gap: string = "0.75rem", showPagination: boolean = false, isAutoPlay: boolean = false, autoplayInterval: number = 4000, isInfiniteLoop: boolean = false, isRTL: boolean = false, isCentered: boolean = false, isDraggable: boolean = false, isAutoHeight: boolean = false, isSnap: boolean = false, showCounter: boolean = false, thumbnails: string = "none", ariaLabel: string = "Content carousel", variant: string = "default", class: string = ""
Slots: default
Events: initialize, change, previous, next, play, pause, reachStart, reachEnd, dragStart, dragEnd

### Chart
Showcase: https://component.wrnexusjs.dev/
Mount: <Chart /> (legacy: data-component="Chart")
Category: integrations
Purpose: Theme-aware, responsive chart component.
Props: title: string = "Chart", description: string = "", items: unknown[] = [], valueKey: string = "value", labelKey: string = "label", height: number = 240, showLegend: boolean = true, showValues: boolean = true, size: string = "default", color: string = "primary", variant: string = "bar", class: string = ""
Slots: default
Events: select, dataPointClick, legendToggle

### ChatBubble
Showcase: https://component.wrnexusjs.dev/
Mount: <ChatBubble /> (legacy: data-component="ChatBubble")
Category: base
Purpose: Theme-aware, responsive chat bubble component.
Props: size: string = "default", color: string = "primary", title: string = "", description: string = "", items: unknown[] = [], oneSided: boolean = false, showAvatars: boolean = false, showMetadata: boolean = false, ariaLabel: string = "Conversation", variant: string = "default", class: string = ""
Slots: default
Events: action, messageClick, avatarClick, linkClick

### Checkbox
Showcase: https://component.wrnexusjs.dev/
Mount: <Checkbox /> (legacy: data-component="Checkbox")
Category: forms
Purpose: Theme-aware, responsive checkbox component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Checkbox", hiddenLabel: boolean = false, placeholder: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", value: string = "on", values: unknown[] = [], options: unknown[] = [], checked: boolean = false, indeterminate: boolean = false, orientation: string = "vertical", card: boolean = false, rightAligned: boolean = false, list: boolean = false, helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: default
Events: input, change, focus, blur, invalid

### Clipboard
Showcase: https://component.wrnexusjs.dev/
Mount: <Clipboard /> (legacy: data-component="Clipboard")
Category: integrations
Purpose: Theme-aware, responsive clipboard component.
Props: value: string = "", label: string = "Copy", copiedLabel: string = "Copied", errorLabel: string = "Copy failed", title: string = "Clipboard", description: string = "", code: boolean = true, size: string = "default", color: string = "primary", disabled: boolean = false, class: string = ""
Slots: default
Events: copy, success, error

### Collapse
Showcase: https://component.wrnexusjs.dev/
Mount: <Collapse /> (legacy: data-component="Collapse")
Category: base
Purpose: Theme-aware, responsive collapse component.
Props: size: string = "default", color: string = "primary", items: unknown[] = [], multiple: boolean = false, mode: string = "panel", initialOpenIndexes: unknown[] = [], ariaLabel: string = "Collapsible content", class: string = ""
Slots: default
Events: toggle, open, close

### ColorPicker
Showcase: https://component.wrnexusjs.dev/
Mount: <ColorPicker /> (legacy: data-component="ColorPicker")
Category: forms
Purpose: Theme-aware, responsive color picker component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Color", hiddenLabel: boolean = false, placeholder: string = "", value: string = "#2563eb", icon: string = "", iconPosition: string = "start", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, variant: string = "normal", readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur

### Columns
Showcase: https://component.wrnexusjs.dev/
Mount: <Columns /> (legacy: data-component="Columns")
Category: layout
Purpose: Create responsive balanced content columns with configurable count, gap, density, and maximum width.
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Events: none

### ComboBox
Showcase: https://component.wrnexusjs.dev/
Mount: <ComboBox /> (legacy: data-component="ComboBox")
Category: advanced-forms
Purpose: Editable autocomplete combobox with local and remote suggestions.
Props: size: string = "default", color: string = "primary", label: string = "ComboBox", name: string = "", value: string = "", options: unknown[] = [], groups: unknown[] = [], placeholder: string = "Search or select an option", searchPlaceholder: string = "Start typing…", clearable: boolean = true, allowCustomValue: boolean = false, disabled: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", helpText: string = "", loading: boolean = false, loadingLabel: string = "Loading suggestions…", emptyLabel: string = "No matching options", clearLabel: string = "Clear value", toggleLabel: string = "Toggle suggestions", searchMode: string = "contains", searchFields: string = "label,description", minSearchLength: number = 0, searchResultLimit: number = 0, optionTemplate: string = "default", defaultOpen: boolean = false, closeOnSelect: boolean = true, fixed: boolean = false, placement: string = "bottom", autocomplete: string = "off", remote: boolean = false, remoteUrl: string = "", remoteQueryParam: string = "q", remoteDebounce: number = 250, remoteAutoLoad: boolean = true, infinite: boolean = false, hasMore: boolean = false, page: number = 1, loadMoreLabel: string = "Load more", class: string = ""
Slots: none
Events: search, select, change, clear, open, close, load, error

### Confetti
Showcase: https://component.wrnexusjs.dev/
Mount: <Confetti /> (legacy: data-component="Confetti")
Category: integrations
Purpose: Theme-aware, responsive confetti component.
Props: label: string = "Celebrate", duration: number = 1200, count: number = 24, autoStart: boolean = false, disabled: boolean = false, size: string = "default", color: string = "primary", class: string = ""
Slots: default
Events: start, complete

### Container
Showcase: https://component.wrnexusjs.dev/
Mount: <Container /> (legacy: data-component="Container")
Category: layout
Purpose: Constrain and align page content with responsive gutters and compact, wide, or full width options.
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", centered: boolean = true, class: string = ""
Slots: default
Events: none

### ContextMenu
Showcase: https://component.wrnexusjs.dev/
Mount: <ContextMenu /> (legacy: data-component="ContextMenu")
Category: overlays
Purpose: Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.
Props: items: unknown[] = [], open: boolean = false, defaultOpen: boolean = false, trigger: string = "contextmenu", placement: string = "pointer", align: string = "start", size: string = "default", color: string = "primary", variant: string = "raised", title: string = "", description: string = "", label: string = "Context menu", closeOnSelect: boolean = true, closeOnOutside: boolean = true, disabled: boolean = false, minWidth: string = "14rem", maxWidth: string = "20rem", class: string = ""
Slots: trigger, header, default, footer
Events: open, close, select, action

### CustomScrollbar
Showcase: https://component.wrnexusjs.dev/
Mount: <CustomScrollbar /> (legacy: data-component="CustomScrollbar")
Category: layout
Purpose: Theme-aware, responsive custom scrollbar component.
Props: color: string = "primary", size: string = "default", axis: string = "vertical", thickness: number = 8, maxHeight: string = "20rem", radius: string = "999px", class: string = ""
Slots: default
Events: none

### DataMap
Showcase: https://component.wrnexusjs.dev/
Mount: <DataMap /> (legacy: data-component="DataMap")
Category: integrations
Purpose: Theme-aware, responsive data map component.
Props: size: string = "default", color: string = "primary", title: string = "Data Map", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Events: select, change

### DataTable
Showcase: https://component.wrnexusjs.dev/
Mount: <DataTable /> (legacy: data-component="DataTable")
Category: tables
Purpose: Sortable, filterable, paginated data table with row selection.
Props: color: string = "primary", size: string = "default", columns: unknown[] = [], rows: unknown[] = [], rowKey: string = "id", remote: boolean = false, loadingLabel: string = "Loading", errorLabel: string = "Could not load this data", retryLabel: string = "Try again", caption: string = "", description: string = "", searchable: boolean = true, searchPlaceholder: string = "Search", paginated: boolean = true, pageSize: number = 10, paginationStyle: string = "compact", pageSizes: number[] = [10, 25, 50], selectable: boolean = false, actions: unknown[] = [], striped: boolean = true, bordered: boolean = true, gridlines: string = "rows", density: string = "default", emptyLabel: string = "No records to show", noResultsLabel: string = "No records match your search", clearSearchLabel: string = "Clear search", stickyFirstColumn: boolean = false, layout: string = "rows", class: string = ""
Slots: default
Events: sort, search, pageChange, select, change, rowClick, action, request

### DatePicker
Showcase: https://component.wrnexusjs.dev/
Mount: <DatePicker /> (legacy: data-component="DatePicker")
Category: base
Purpose: Theme-aware, responsive date picker component.
Props: size: string = "default", color: string = "primary", label: string = "Date Picker", id: string = "", name: string = "", value: string = "", placeholder: string = "", type: string = "date", locale: string = "en-US", firstDayOfWeek: number = 0, months: string = [{ label: "Jan", value: "01" }, { label: "Feb", value: "02" }, { label: "Mar", value: "03" }, { label: "Apr", value: "04" }, { label: "May", value: "05" }, { label: "Jun", value: "06" }, { label: "Jul", value: "07" }, { label: "Aug", value: "08" }, { label: "Sep", value: "09" }, { label: "Oct", value: "10" }, { label: "Nov", value: "11" }, { label: "Dec", value: "12" }], days: string = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31], years: string = [2024, 2025, 2026, 2027, 2028, 2029, 2030], min: string = "", max: string = "", step: string = "", helperText: string = "", cornerHint: string = "", error: string = "", variant: string = "normal", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, open, close, focus, blur, invalid

### DeviceFrame
Showcase: https://component.wrnexusjs.dev/
Mount: <DeviceFrame /> (legacy: data-component="DeviceFrame")
Category: base
Purpose: Theme-aware, responsive device frame component.
Props: size: string = "default", color: string = "primary", title: string = "Device Frame", description: string = "", items: unknown[] = [], variant: string = "default", device: string = "phone", orientation: string = "portrait", src: string = "", srcdoc: string = "", frameTitle: string = "Device preview", showToolbar: boolean = true, allow: string = "", class: string = ""
Slots: default
Events: change, rotate

### Divider
Showcase: https://component.wrnexusjs.dev/
Mount: <Divider /> (legacy: data-component="Divider")
Category: layout
Purpose: Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.
Props: size: string = "default", color: string = "primary", label: string = "", orientation: string = "horizontal", variant: string = "solid", class: string = ""
Slots: none
Events: none

### DragAndDrop
Showcase: https://component.wrnexusjs.dev/
Mount: <DragAndDrop /> (legacy: data-component="DragAndDrop")
Category: integrations
Purpose: Theme-aware, responsive drag and drop component.
Props: size: string = "default", color: string = "primary", title: string = "Drag And Drop", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Events: dragStart, dragEnd, dragEnter, dragLeave, drop, change

### Drawer
Showcase: https://component.wrnexusjs.dev/
Mount: <Drawer /> (legacy: data-component="Drawer")
Category: overlays
Purpose: Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.
Props: open: boolean = false, defaultOpen: boolean = false, placement: string = "right", size: string = "md", color: string = "primary", variant: string = "default", title: string = "Drawer", description: string = "", icon: string = "", label: string = "Drawer", closeLabel: string = "Close drawer", showClose: boolean = true, closeOnBackdrop: boolean = true, closeOnEscape: boolean = true, duration: number = 260, overlay: boolean = true, scrollable: boolean = true, triggerLabel: string = "", triggerIcon: string = "", class: string = ""
Slots: trigger, header, default, footer
Events: open, close, cancel

### Dropdown
Showcase: https://component.wrnexusjs.dev/
Mount: <Dropdown /> (legacy: data-component="Dropdown")
Category: overlays
Purpose: Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.
Props: items: unknown[] = [], open: boolean = false, defaultOpen: boolean = false, label: string = "Open menu", icon: string = "", showChevron: boolean = true, menuLabel: string = "Dropdown menu", placement: string = "bottom-start", width: string = "md", size: string = "default", color: string = "primary", variant: string = "raised", closeOnSelect: boolean = true, closeOnOutside: boolean = true, disabled: boolean = false, emptyLabel: string = "No menu items", class: string = ""
Slots: trigger, header, default, footer
Events: toggle, open, close, select, action

### FeatureCard
Showcase: https://component.wrnexusjs.dev/
Mount: <FeatureCard /> (legacy: data-component="FeatureCard")
Category: marketing
Purpose: Present one linked feature or service with media, icon, badge, description, and action.
Props: icon: string = "", iconStyle: string = "soft", iconSize: string = "default", eyebrow: string = "", title: string = "Feature", description: string = "", image: string = "", imageAlt: string = "", imagePosition: string = "top", imageAspect: string = "wide", imageLoading: string = "lazy", href: string = "", target: string = "", rel: string = "", external: boolean = false, actionLabel: string = "Learn more", actionIcon: string = "", showArrow: boolean = true, stretchedLink: boolean = true, badge: string = "", badgeColor: string = "primary", size: string = "default", color: string = "primary", variant: string = "default", hover: string = "lift", align: string = "left", disabled: boolean = false, class: string = ""
Slots: media, icon, default, footer
Events: none

### FeatureGrid
Showcase: https://component.wrnexusjs.dev/
Mount: <FeatureGrid /> (legacy: data-component="FeatureGrid")
Category: layout
Purpose: Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.
Props: size: string = "default", color: string = "primary", items: unknown[] = [], columns: number = 3, tabletColumns: number = 2, mobileColumns: number = 1, gap: string = "md", minItemWidth: string = "", equalHeight: boolean = true, align: string = "stretch", maxWidth: string = "full", variant: string = "default", label: string = "Features", class: string = ""
Slots: default
Events: none

### FeatureIconCard
Showcase: https://component.wrnexusjs.dev/
Mount: <FeatureIconCard /> (legacy: data-component="FeatureIconCard")
Category: marketing
Purpose: Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.
Props: icon: string = "icon-[lucide--sparkles]", iconSize: string = "md", iconVariant: string = "soft", title: string = "Feature", description: string = "", href: string = "", actionLabel: string = "Explore", badge: string = "", size: string = "default", color: string = "primary", variant: string = "default", align: string = "left", hover: string = "lift", class: string = ""
Slots: default, footer
Events: none

### FileInput
Showcase: https://component.wrnexusjs.dev/
Mount: <FileInput /> (legacy: data-component="FileInput")
Category: forms
Purpose: Theme-aware, responsive file input component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "File", hiddenLabel: boolean = false, placeholder: string = "Choose a file", value: string = "", icon: string = "icon-[lucide--upload]", iconPosition: string = "start", accept: string = "", multiple: boolean = false, helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, variant: string = "normal", readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur, select, clear, invalid

### FileUploadProgress
Showcase: https://component.wrnexusjs.dev/
Mount: <FileUploadProgress /> (legacy: data-component="FileUploadProgress")
Category: base
Purpose: Theme-aware, responsive file upload progress component.
Props: size: string = "default", color: string = "primary", label: string = "Progress", value: number = 50, max: number = 100, showValue: boolean = true, fileName: string = "", fileSize: string = "", uploadedSize: string = "", status: string = "uploading", cancelLabel: string = "Cancel upload", retryLabel: string = "Retry upload", class: string = ""
Slots: none
Events: cancel, retry, complete

### Footer
Showcase: https://component.wrnexusjs.dev/
Mount: <Footer /> (legacy: data-component="Footer")
Category: layout
Purpose: Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.
Props: size: string = "default", color: string = "primary", label: string = "Footer navigation", items: unknown[] = [], columns: number = 3, maxWidth: string = "compact", copyright: string = "", class: string = ""
Slots: pre-footer, post-footer, copyright-left, copyright-right
Events: select, action

### Grid
Showcase: https://component.wrnexusjs.dev/
Mount: <Grid /> (legacy: data-component="Grid")
Category: layout
Purpose: Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", minItemWidth: string = "", class: string = ""
Slots: default
Events: none

### Hero
Showcase: https://component.wrnexusjs.dev/
Mount: <Hero /> (legacy: data-component="Hero")
Category: marketing
Purpose: Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.
Props: eyebrow: string = "", eyebrowIcon: string = "", icon: string = "", title: string = "Build something remarkable", highlight: string = "", description: string = "", align: string = "left", size: string = "default", color: string = "primary", variant: string = "default", layout: string = "split", visualPosition: string = "right", visualStyle: string = "plain", showDecorations: boolean = true, fullBleed: boolean = true, visualEyebrow: string = "", visualTitle: string = "", visualDescription: string = "", visualIcon: string = "", visualImage: string = "", visualAlt: string = "", visualItems: unknown[] = [], primaryLabel: string = "", primaryHref: string = "", primaryIcon: string = "", primaryTarget: string = "", secondaryLabel: string = "", secondaryHref: string = "", secondaryIcon: string = "", secondaryTarget: string = "", tertiaryLabel: string = "", tertiaryHref: string = "", tertiaryIcon: string = "", tertiaryTarget: string = "", badges: unknown[] = [], trustItems: unknown[] = [], maxWidth: string = "xl", class: string = ""
Slots: eyebrow, actions, trust, default, visual, footer
Events: none

### HeroActions
Showcase: https://component.wrnexusjs.dev/
Mount: <HeroActions /> (legacy: data-component="HeroActions")
Category: marketing
Purpose: Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.
Props: actions: unknown[] = [], align: string = "left", orientation: string = "horizontal", stackOnMobile: boolean = true, fullWidthMobile: boolean = true, size: string = "default", color: string = "primary", class: string = ""
Slots: default
Events: none

### Image
Showcase: https://component.wrnexusjs.dev/
Mount: <Image /> (legacy: data-component="Image")
Category: layout
Purpose: Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.
Props: size: string = "default", color: string = "primary", src: string = "", alt: string = "", width: string = "", height: string = "", loading: string = "lazy", fit: string = "cover", rounded: boolean = false, class: string = ""
Slots: default
Events: none

### Input
Showcase: https://component.wrnexusjs.dev/
Mount: <Input /> (legacy: data-component="Input")
Category: forms
Purpose: Theme-aware, responsive input component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Input", hiddenLabel: boolean = false, placeholder: string = "", value: string = "", type: string = "text", variant: string = "normal", icon: string = "", iconPosition: string = "start", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, autocomplete: string = "", inputmode: string = "", minlength: string = "", maxlength: string = "", pattern: string = "", min: string = "", max: string = "", step: string = "", class: string = ""
Slots: none
Events: input, change, focus, blur, invalid, keydown, keyup

### InputGroup
Showcase: https://component.wrnexusjs.dev/
Mount: <InputGroup /> (legacy: data-component="InputGroup")
Category: forms
Purpose: Theme-aware, responsive input group component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Input group", hiddenLabel: boolean = false, value: string = "", placeholder: string = "", type: string = "text", startText: string = "", endText: string = "", icon: string = "", iconPosition: string = "start", actionLabel: string = "", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, variant: string = "normal", readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur, submit, action

### InputNumber
Showcase: https://component.wrnexusjs.dev/
Mount: <InputNumber /> (legacy: data-component="InputNumber")
Category: advanced-forms
Purpose: Theme-aware, responsive input number component.
Props: size: string = "default", color: string = "primary", variant: string = "default", class: string = "", id: string = "", name: string = "quantity", value: number = 0, min: string = "", max: string = "", step: number = 1, precision: string = "auto", label: string = "", description: string = "", helpText: string = "", error: string = "", invalid: boolean = false, prefix: string = "", suffix: string = "", placeholder: string = "", autocomplete: string = "off", inputMode: string = "decimal", ariaLabel: string = "", required: boolean = false, disabled: boolean = false, inputDisabled: boolean = false, buttonsDisabled: boolean = false, readonly: boolean = false, allowInput: boolean = true, keyboard: boolean = true, wheel: boolean = false, clamp: boolean = true, fullWidth: boolean = false, showButtons: boolean = true, showValidationMessage: boolean = true, decrementLabel: string = "Decrease value", incrementLabel: string = "Increase value", controlsLabel: string = "Quantity controls", requiredMessage: string = "A value is required.", minMessage: string = "Value is below the minimum.", maxMessage: string = "Value is above the maximum."
Slots: none
Events: input, change, increment, decrement

### Kbd
Showcase: https://component.wrnexusjs.dev/
Mount: <Kbd /> (legacy: data-component="Kbd")
Category: layout
Purpose: Theme-aware, responsive kbd component.
Props: size: string = "default", color: string = "primary", label: string = "K", class: string = ""
Slots: default
Events: none

### LayoutSplitter
Showcase: https://component.wrnexusjs.dev/
Mount: <LayoutSplitter /> (legacy: data-component="LayoutSplitter")
Category: layout
Purpose: Theme-aware, responsive layout splitter component.
Props: color: string = "primary", size: number = 50, orientation: string = "horizontal", minSize: number = 15, step: number = 5, label: string = "Resize panels", class: string = ""
Slots: start, end, default
Events: sizeChange

### LegendIndicator
Showcase: https://component.wrnexusjs.dev/
Mount: <LegendIndicator /> (legacy: data-component="LegendIndicator")
Category: base
Purpose: Theme-aware, responsive legend indicator component.
Props: size: string = "default", color: string = "primary", title: string = "Legend Indicator", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Events: toggle, select

### Link
Showcase: https://component.wrnexusjs.dev/
Mount: <Link /> (legacy: data-component="Link")
Category: layout
Purpose: Render an accessible internal or external link with target, relation, size, color, and public focus or click events.
Props: size: string = "default", color: string = "primary", label: string = "Link", href: string = "#", target: string = "", rel: string = "", underline: string = "hover", external: boolean = false, class: string = ""
Slots: default
Events: none

### List
Showcase: https://component.wrnexusjs.dev/
Mount: <List /> (legacy: data-component="List")
Category: base
Purpose: Present structured responsive linked or status items with icons, descriptions, actions, and selection events.
Props: size: string = "default", color: string = "primary", title: string = "List", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Events: select

### ListGroup
Showcase: https://component.wrnexusjs.dev/
Mount: <ListGroup /> (legacy: data-component="ListGroup")
Category: base
Purpose: Theme-aware, responsive list group component.
Props: size: string = "default", color: string = "primary", title: string = "List Group", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Events: select, change

### Map
Showcase: https://component.wrnexusjs.dev/
Mount: <Map /> (legacy: data-component="Map")
Category: integrations
Purpose: Present responsive location information and markers with map-ready metadata and movement or marker events.
Props: size: string = "default", color: string = "primary", title: string = "Map", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Events: markerClick, select, zoom

### MarketingSectionHeader
Showcase: https://component.wrnexusjs.dev/
Mount: <MarketingSectionHeader /> (legacy: data-component="MarketingSectionHeader")
Category: marketing
Purpose: Introduce marketing content with an eyebrow, title, description, and optional linked action.
Props: id: string = "", eyebrow: string = "", title: string = "", description: string = "", align: string = "split", size: string = "default", color: string = "primary", actionLabel: string = "", actionHref: string = "", actionIcon: string = "", actionExternal: boolean = false, class: string = ""
Slots: icon, actions, default
Events: none

### Marquee
Showcase: https://component.wrnexusjs.dev/
Mount: <Marquee /> (legacy: data-component="Marquee")
Category: base
Purpose: Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.
Props: size: string = "default", color: string = "primary", title: string = "Marquee", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Events: pause, resume

### MegaMenu
Showcase: https://component.wrnexusjs.dev/
Mount: <MegaMenu /> (legacy: data-component="MegaMenu")
Category: navigation
Purpose: Theme-aware, responsive mega menu component.
Props: color: string = "primary", size: string = "default", label: string = "Menu", icon: string = "", columns: unknown[] = [], footer: string = "", defaultOpen: boolean = false, class: string = ""
Slots: default
Events: open, close, select

### MetricCard
Showcase: https://component.wrnexusjs.dev/
Mount: <MetricCard /> (legacy: data-component="MetricCard")
Category: data
Purpose: Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.
Props: label: string = "Metric", value: string = "0", description: string = "", icon: string = "", iconStyle: string = "soft", prefix: string = "", suffix: string = "", badge: string = "", trend: string = "", trendLabel: string = "", trendDirection: string = "neutral", progress: number = -1, progressLabel: string = "", href: string = "", target: string = "", rel: string = "", external: boolean = false, actionLabel: string = "", actionIcon: string = "", showArrow: boolean = true, selectable: boolean = false, disabled: boolean = false, size: string = "default", color: string = "primary", variant: string = "default", hover: string = "lift", align: string = "left", class: string = ""
Slots: default, footer
Events: select, action

### MetricGrid
Showcase: https://component.wrnexusjs.dev/
Mount: <MetricGrid /> (legacy: data-component="MetricGrid")
Category: data
Purpose: Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.
Props: items: unknown[] = [], columns: number = 4, tabletColumns: number = 2, mobileColumns: number = 1, gap: string = "md", equalHeight: boolean = true, dividers: boolean = false, size: string = "default", color: string = "primary", variant: string = "default", maxWidth: string = "full", minItemWidth: string = "", class: string = ""
Slots: default
Events: select, action

### Modal
Showcase: https://component.wrnexusjs.dev/
Mount: <Modal /> (legacy: data-component="Modal")
Category: overlays
Purpose: Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.
Props: open: boolean = false, defaultOpen: boolean = false, title: string = "Modal", description: string = "", icon: string = "", label: string = "Modal dialog", size: string = "md", placement: string = "center", color: string = "primary", variant: string = "default", showClose: boolean = true, closeLabel: string = "Close modal", closeOnBackdrop: boolean = true, closeOnEscape: boolean = true, closeOnCancel: boolean = true, closeOnConfirm: boolean = false, showFooter: boolean = true, cancelLabel: string = "Cancel", cancelIcon: string = "", confirmLabel: string = "Confirm", confirmIcon: string = "", confirmDisabled: boolean = false, confirmLoading: boolean = false, destructive: boolean = false, triggerLabel: string = "", triggerIcon: string = "", scrollable: boolean = true, scrollBehavior: string = "inside", class: string = ""
Slots: trigger, header, default, footer
Events: open, close, cancel, confirm

### Nav
Showcase: https://component.wrnexusjs.dev/
Mount: <Nav /> (legacy: data-component="Nav")
Category: navigation
Purpose: Theme-aware, responsive nav component.
Props: color: string = "primary", size: string = "default", items: unknown[] = [], active: string = "", orientation: string = "horizontal", label: string = "Main", collapsible: boolean = true, toggleLabel: string = "Menu", class: string = ""
Slots: default
Events: select

### Navbar
Showcase: https://component.wrnexusjs.dev/
Mount: <Navbar /> (legacy: data-component="Navbar")
Category: navigation
Purpose: Theme-aware, responsive navbar component.
Props: size: string = "default", color: string = "primary", label: string = "Primary navigation", topbarLabel: string = "Utility navigation", brand: Record<string, unknown> = {}, items: unknown[] = [], actions: unknown[] = [], active: string = "", sticky: boolean = false, openOnHover: boolean = false, maxWidth: string = "full", mobileLabel: string = "Toggle navigation", class: string = ""
Slots: topbar, actions
Events: toggle, open, close, select, action

### PageHeader
Showcase: https://component.wrnexusjs.dev/
Mount: <PageHeader /> (legacy: data-component="PageHeader")
Category: marketing
Purpose: Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.
Props: eyebrow: string = "", title: string = "", description: string = "", icon: string = "", id: string = "page-title", align: string = "left", centered: boolean = false, compact: boolean = false, size: string = "default", maxWidth: string = "xl", showBreadcrumbs: boolean = false, breadcrumbs: unknown[] = [], breadcrumbParent: string = "", breadcrumbParentHref: string = "", breadcrumbCurrent: string = "", primaryLabel: string = "", primaryHref: string = "", primaryIcon: string = "", secondaryLabel: string = "", secondaryHref: string = "", secondaryIcon: string = "", color: string = "primary", variant: string = "default", borderBottom: boolean = true, class: string = ""
Slots: meta, actions, default
Events: none

### Pagination
Showcase: https://component.wrnexusjs.dev/
Mount: <Pagination /> (legacy: data-component="Pagination")
Category: navigation
Purpose: Theme-aware, responsive pagination component.
Props: color: string = "primary", size: string = "default", page: number = 1, pageSize: number = 10, total: number = 0, variant: string = "compact", siblingCount: number = 1, showSummary: boolean = true, label: string = "Pagination", previousLabel: string = "Previous", nextLabel: string = "Next", class: string = ""
Slots: default
Events: change, previous, next

### PinInput
Showcase: https://component.wrnexusjs.dev/
Mount: <PinInput /> (legacy: data-component="PinInput")
Category: advanced-forms
Purpose: Secure multi-cell PIN and verification-code input with regex and paste support.
Props: size: string = "default", color: string = "primary", label: string = "Verification code", name: string = "pin", value: string = "", length: number = 4, pattern: string = "[0-9]", type: string = "text", inputMode: string = "numeric", placeholder: string = "○", autocomplete: string = "one-time-code", masked: boolean = false, disabled: boolean = false, readonly: boolean = false, required: boolean = false, autoFocus: boolean = false, autoSubmit: boolean = false, allowPaste: boolean = true, clearable: boolean = true, clearLabel: string = "Clear code", separator: string = "", groupSize: number = 0, helpText: string = "", invalid: boolean = false, validationMessage: string = "", class: string = ""
Slots: none
Events: input, change, complete, paste, clear, error

### Popover
Showcase: https://component.wrnexusjs.dev/
Mount: <Popover /> (legacy: data-component="Popover")
Category: overlays
Purpose: Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.
Props: open: boolean = false, defaultOpen: boolean = false, triggerLabel: string = "Open popover", triggerIcon: string = "", title: string = "", description: string = "", icon: string = "", placement: string = "bottom-start", width: string = "md", size: string = "default", color: string = "primary", variant: string = "raised", showArrow: boolean = true, showClose: boolean = false, closeLabel: string = "Close popover", closeOnOutside: boolean = true, closeOnEscape: boolean = true, actionLabel: string = "", actionHref: string = "", actionIcon: string = "", closeOnAction: boolean = true, disabled: boolean = false, class: string = ""
Slots: trigger, header, default, footer
Events: toggle, open, close, action

### PortalDashboard
Showcase: https://component.wrnexusjs.dev/
Mount: <PortalDashboard /> (legacy: data-component="PortalDashboard")
Category: core
Purpose: Reusable portal dashboard component.
Props: size: string = "default", color: string = "primary", eyebrow: string = "Overview", eyebrowKey: string = "", title: string = "Dashboard", titleKey: string = "", description: string = "", descriptionKey: string = "", userName: string = "", metrics: unknown[] = [], actions: unknown[] = [], updates: unknown[] = [], tasks: unknown[] = [], class: string = ""
Slots: hero-action
Events: action, navigate

### PreferenceSwitcher
Showcase: https://component.wrnexusjs.dev/
Mount: <PreferenceSwitcher /> (legacy: data-component="PreferenceSwitcher")
Category: core
Purpose: Reusable preference switcher component.
Props: size: string = "default", color: string = "primary", themeLabel: string = "Theme", colorLabel: string = "Accent color", languageLabel: string = "Language", languages: string = [, colors: string = [, compact: boolean = true, class: string = ""
Slots: none
Events: theme, color, language

### Progress
Showcase: https://component.wrnexusjs.dev/
Mount: <Progress /> (legacy: data-component="Progress")
Category: base
Purpose: Theme-aware, responsive progress component.
Props: size: string = "default", color: string = "primary", label: string = "Progress", value: number = 50, max: number = 100, showValue: boolean = true, class: string = ""
Slots: none
Events: none

### PublicPageShell
Showcase: https://component.wrnexusjs.dev/
Mount: <PublicPageShell /> (legacy: data-component="PublicPageShell")
Category: layout
Purpose: Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.
Props: maxWidth: string = "full", fullWidth: boolean = true, headerOffset: string = "none", background: string = "default", overflow: string = "clip", minHeight: string = "screen", size: string = "default", color: string = "primary", variant: string = "default", class: string = ""
Slots: before, default, after
Events: none

### Radio
Showcase: https://component.wrnexusjs.dev/
Mount: <Radio /> (legacy: data-component="Radio")
Category: forms
Purpose: Theme-aware, responsive radio component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Radio", hiddenLabel: boolean = false, placeholder: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", value: string = "on", options: unknown[] = [], checked: boolean = false, orientation: string = "vertical", card: boolean = false, rightAligned: boolean = false, list: boolean = false, helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur, invalid

### RangeSlider
Showcase: https://component.wrnexusjs.dev/
Mount: <RangeSlider /> (legacy: data-component="RangeSlider")
Category: forms
Purpose: Theme-aware, responsive range slider component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Range", hiddenLabel: boolean = false, placeholder: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", value: number = 50, min: number = 0, max: number = 100, step: number = 1, showValue: boolean = true, showBounds: boolean = true, showSteps: boolean = false, marks: unknown[] = [], helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur

### Rating
Showcase: https://component.wrnexusjs.dev/
Mount: <Rating /> (legacy: data-component="Rating")
Category: base
Purpose: Theme-aware, responsive rating component.
Props: size: string = "default", color: string = "primary", title: string = "Rating", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Events: input, change

### Scrollspy
Showcase: https://component.wrnexusjs.dev/
Mount: <Scrollspy /> (legacy: data-component="Scrollspy")
Category: navigation
Purpose: Theme-aware, responsive scrollspy component.
Props: color: string = "primary", size: string = "default", items: unknown[] = [], active: string = "", label: string = "On this page", heading: string = "", class: string = ""
Slots: default
Events: change

### SearchBox
Showcase: https://component.wrnexusjs.dev/
Mount: <SearchBox /> (legacy: data-component="SearchBox")
Category: forms
Purpose: Provide an accessible responsive search field with labels, validation states, sizes, and input or change events.
Props: size: string = "default", color: string = "primary", label: string = "Search Box", name: string = "", value: string = "", placeholder: string = "", type: string = "search", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: search, clear

### Section
Showcase: https://component.wrnexusjs.dev/
Mount: <Section /> (legacy: data-component="Section")
Category: layout
Purpose: Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.
Props: id: string = "", size: string = "default", color: string = "primary", variant: string = "default", spacing: string = "lg", maxWidth: string = "xl", fullWidth: boolean = false, borderTop: boolean = false, borderBottom: boolean = false, class: string = ""
Slots: default
Events: none

### SectionHeader
Showcase: https://component.wrnexusjs.dev/
Mount: <SectionHeader /> (legacy: data-component="SectionHeader")
Category: layout
Purpose: Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.
Props: id: string = "", eyebrow: string = "", title: string = "", description: string = "", align: string = "left", size: string = "default", color: string = "primary", headingLevel: number = 2, maxWidth: string = "3xl", class: string = ""
Slots: icon, default, actions
Events: none

### Select
Showcase: https://component.wrnexusjs.dev/
Mount: <Select /> (legacy: data-component="Select")
Category: forms
Purpose: Theme-aware, responsive select component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Select", hiddenLabel: boolean = false, value: string = "", values: unknown[] = [], options: unknown[] = [], placeholder: string = "Select an option", variant: string = "normal", icon: string = "", iconPosition: string = "start", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, multiple: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur, open, close, invalid

### Sidebar
Showcase: https://component.wrnexusjs.dev/
Mount: <Sidebar /> (legacy: data-component="Sidebar")
Category: navigation
Purpose: Theme-aware, responsive sidebar component.
Props: color: string = "primary", size: string = "default", label: string = "Sidebar", items: unknown[] = [], active: string = "", mobileLabel: string = "Open navigation", drawerTitle: string = "Navigation", class: string = ""
Slots: default, drawer
Events: toggle, open, close, select

### Skeleton
Showcase: https://component.wrnexusjs.dev/
Mount: <Skeleton /> (legacy: data-component="Skeleton")
Category: base
Purpose: Theme-aware, responsive skeleton component.
Props: color: string = "primary", label: string = "Loading", size: string = "md", lines: number = 3, class: string = ""
Slots: none
Events: none

### Spinner
Showcase: https://component.wrnexusjs.dev/
Mount: <Spinner /> (legacy: data-component="Spinner")
Category: base
Purpose: Theme-aware, responsive spinner component.
Props: color: string = "primary", label: string = "Loading", size: string = "md", lines: number = 3, class: string = ""
Slots: none
Events: none

### SplitHero
Showcase: https://component.wrnexusjs.dev/
Mount: <SplitHero /> (legacy: data-component="SplitHero")
Category: marketing
Purpose: Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.
Props: eyebrow: string = "", eyebrowIcon: string = "icon-[lucide--sparkles]", title: string = "A better digital experience", highlight: string = "", description: string = "", primaryLabel: string = "", primaryHref: string = "", primaryIcon: string = "", secondaryLabel: string = "", secondaryHref: string = "", secondaryIcon: string = "", visualPosition: string = "right", reverse: boolean = false, ratio: string = "balanced", align: string = "left", size: string = "default", color: string = "primary", variant: string = "default", maxWidth: string = "xl", fullBleed: boolean = true, backgroundImage: string = "", visualImage: string = "", visualAlt: string = "", visualIcon: string = "", visualEyebrow: string = "", visualTitle: string = "", visualDescription: string = "", visualItems: unknown[] = [], visualStyle: string = "panel", trustItems: unknown[] = [], class: string = ""
Slots: default, actions, trust, visual
Events: none

### StatsBar
Showcase: https://component.wrnexusjs.dev/
Mount: <StatsBar /> (legacy: data-component="StatsBar")
Category: data
Purpose: Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.
Props: items: unknown[] = [], columns: number = 4, compact: boolean = true, dividers: boolean = true, icons: boolean = true, size: string = "default", color: string = "primary", variant: string = "raised", maxWidth: string = "xl", class: string = ""
Slots: none
Events: none

### Stepper
Showcase: https://component.wrnexusjs.dev/
Mount: <Stepper /> (legacy: data-component="Stepper")
Category: navigation
Purpose: Theme-aware, responsive stepper component.
Props: color: string = "primary", size: string = "default", steps: unknown[] = [], active: number = 0, orientation: string = "horizontal", clickable: boolean = false, label: string = "Progress", showPanel: boolean = false, controls: boolean = false, allowSkip: boolean = false, nextDisabled: boolean = false, backLabel: string = "Back", nextLabel: string = "Next", skipLabel: string = "Skip", finishLabel: string = "Finish", class: string = ""
Slots: step-{index}, panel-{index}, default
Events: change, back, next, skip, finish

### StrongPassword
Showcase: https://component.wrnexusjs.dev/
Mount: <StrongPassword /> (legacy: data-component="StrongPassword")
Category: advanced-forms
Purpose: Theme-aware, responsive strong password component.
Props: size: string = "default", color: string = "primary", label: string = "Password", name: string = "password", value: string = "", placeholder: string = "Create a strong password", autocomplete: string = "new-password", minLength: number = 8, specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?", requireLowercase: boolean = true, requireUppercase: boolean = true, requireNumber: boolean = true, requireSpecialCharacter: boolean = true, showRequirements: boolean = true, presentation: string = "inline", hintText: string = "Use a unique password you do not use elsewhere.", emptyLabel: string = "Enter a password", weakLabel: string = "Weak", fairLabel: string = "Fair", goodLabel: string = "Good", strongLabel: string = "Strong", disabled: boolean = false, readonly: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", class: string = ""
Slots: none
Events: input, change, strength

### StyledIcon
Showcase: https://component.wrnexusjs.dev/
Mount: <StyledIcon /> (legacy: data-component="StyledIcon")
Category: base
Purpose: Theme-aware, responsive styled icon component.
Props: size: string = "default", color: string = "primary", title: string = "Styled Icon", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Events: none

### Switch
Showcase: https://component.wrnexusjs.dev/
Mount: <Switch /> (legacy: data-component="Switch")
Category: forms
Purpose: Theme-aware, responsive switch component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Switch", hiddenLabel: boolean = false, placeholder: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", value: string = "on", checked: boolean = false, helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur

### Tabs
Showcase: https://component.wrnexusjs.dev/
Mount: <Tabs /> (legacy: data-component="Tabs")
Category: navigation
Purpose: Switch between related responsive content panels with horizontal or vertical orientation and selection events.
Props: color: string = "primary", size: string = "default", items: unknown[] = [], active: string = "", orientation: string = "horizontal", mode: string = "client", param: string = "tab", label: string = "Tabs", class: string = ""
Slots: panel-{valueOf(item, index)}, default
Events: change, select

### TextLink
Showcase: https://component.wrnexusjs.dev/
Mount: <TextLink /> (legacy: data-component="TextLink")
Category: marketing
Purpose: Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling.
Props: label: string = "Learn more", href: string = "#", target: string = "", rel: string = "", external: boolean = false, icon: string = "", iconPosition: string = "start", showArrow: boolean = true, underline: boolean = false, size: string = "default", color: string = "primary", variant: string = "default", disabled: boolean = false, class: string = ""
Slots: none
Events: click, focus, blur

### Textarea
Showcase: https://component.wrnexusjs.dev/
Mount: <Textarea /> (legacy: data-component="Textarea")
Category: forms
Purpose: Theme-aware, responsive textarea component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Textarea", hiddenLabel: boolean = false, placeholder: string = "", value: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, rows: number = 5, resize: string = "vertical", readonly: boolean = false, disabled: boolean = false, required: boolean = false, minlength: string = "", maxlength: string = "", class: string = ""
Slots: none
Events: input, change, focus, blur, invalid

### TimePicker
Showcase: https://component.wrnexusjs.dev/
Mount: <TimePicker /> (legacy: data-component="TimePicker")
Category: forms
Purpose: Theme-aware, responsive time picker component.
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Time", hiddenLabel: boolean = false, value: string = "", placeholder: string = "", variant: string = "normal", icon: string = "icon-[lucide--clock-3]", iconPosition: string = "end", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, min: string = "", max: string = "", step: string = "", format: string = "24", minuteStep: number = 5, hours: string = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"], minutes: string = ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"], readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: none
Events: input, change, focus, blur, open, close, invalid

### Timeline
Showcase: https://component.wrnexusjs.dev/
Mount: <Timeline /> (legacy: data-component="Timeline")
Category: base
Purpose: Present responsive chronological activity, milestones, or workflow status with rich item metadata.
Props: size: string = "default", color: string = "primary", title: string = "Timeline", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Events: select

### Toaster
Showcase: https://component.wrnexusjs.dev/
Mount: <Toaster /> (legacy: data-component="Toaster")
Category: core
Purpose: Reusable toaster component.
Props: color: string = "info", size: string = "default", position: string = "bottom-right", duration: number = 4500, max: number = 4, pauseOnHover: boolean = true, showIcon: boolean = true, successIcon: string = "", dangerIcon: string = "", warningIcon: string = "", infoIcon: string = "", closable: boolean = true, showProgress: boolean = true, closeLabel: string = "Dismiss notification", class: string = ""
Slots: none
Events: show, dismiss, action

### ToggleCount
Showcase: https://component.wrnexusjs.dev/
Mount: <ToggleCount /> (legacy: data-component="ToggleCount")
Category: advanced-forms
Purpose: Theme-aware, responsive toggle count component.
Props: size: string = "default", color: string = "primary", variant: string = "segmented", class: string = "", name: string = "billing-cycle", value: string = "monthly", firstValue: string = "monthly", firstLabel: string = "Monthly", secondValue: string = "annual", secondLabel: string = "Annual", ariaLabel: string = "Billing frequency", items: unknown[] = [], currency: string = "$", suffix: string = "", firstValueKey: string = "monthly", secondValueKey: string = "annual", emptyValue: string = "—", align: string = "end", fullWidth: boolean = true, disabled: boolean = false, animate: boolean = true, animationDuration: number = 450, animationSteps: number = 18
Slots: none
Events: change, toggle

### TogglePassword
Showcase: https://component.wrnexusjs.dev/
Mount: <TogglePassword /> (legacy: data-component="TogglePassword")
Category: advanced-forms
Purpose: Accessible password field with optional show and hide controls.
Props: size: string = "default", color: string = "primary", label: string = "Password", name: string = "password", value: string = "", placeholder: string = "Enter your password", autocomplete: string = "current-password", minlength: string = "", maxlength: string = "", pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}", fields: unknown[] = [], visible: boolean = false, toggleable: boolean = true, toggleMode: string = "button", checkboxLabel: string = "Show password", showLabel: string = "Show password", hideLabel: string = "Hide password", disabled: boolean = false, readonly: boolean = false, required: boolean = false, invalid: boolean = false, helpText: string = "", validationMessage: string = "", class: string = ""
Slots: none
Events: input, change, toggle

### Tooltip
Showcase: https://component.wrnexusjs.dev/
Mount: <Tooltip /> (legacy: data-component="Tooltip")
Category: overlays
Purpose: Show concise accessible contextual help on hover, focus, click, or controlled open state.
Props: id: string = "", open: boolean = false, defaultOpen: boolean = false, title: string = "", description: string = "", content: string = "Tooltip", trigger: string = "hover", placement: string = "top", size: string = "default", color: string = "primary", variant: string = "dark", maxWidth: string = "18rem", offset: number = 10, showArrow: boolean = true, interactive: boolean = false, disabled: boolean = false, class: string = ""
Slots: trigger, default
Events: toggle, open, close

### TreeView
Showcase: https://component.wrnexusjs.dev/
Mount: <TreeView /> (legacy: data-component="TreeView")
Category: base
Purpose: Theme-aware, responsive tree view component.
Props: title: string = "Tree View", description: string = "", items: unknown[] = [], valueKey: string = "value", labelKey: string = "label", defaultExpanded: unknown[] = [], selected: string = "", size: string = "default", color: string = "primary", class: string = ""
Slots: default
Events: select, toggle, expand, collapse

### Typography
Showcase: https://component.wrnexusjs.dev/
Mount: <Typography /> (legacy: data-component="Typography")
Category: layout
Purpose: Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Events: none

### WysiwygEditor
Showcase: https://component.wrnexusjs.dev/
Mount: <WysiwygEditor /> (legacy: data-component="WysiwygEditor")
Category: integrations
Purpose: Theme-aware, responsive wysiwyg editor component.
Props: size: string = "default", color: string = "primary", title: string = "Wysiwyg Editor", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Events: input, change, focus, blur