2749 lines
146 KiB
Plaintext
2749 lines
146 KiB
Plaintext
# WRNexusJS documentation 0.8.7
|
|
|
|
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.7 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.
|
|
|
|
# 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.7
|
|
- Documentation: https://wrnexusjs.dev/packages/ai
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/auth
|
|
|
|
- @wrnexus/auth 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/auth
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/authz
|
|
|
|
- @wrnexus/authz 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/authz
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/benchmark
|
|
|
|
- @wrnexus/benchmark 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/benchmark
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/cache
|
|
|
|
- @wrnexus/cache 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/cache
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/captcha
|
|
|
|
- @wrnexus/captcha 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/captcha
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/cli
|
|
|
|
- @wrnexus/cli 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/cli
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/compiler
|
|
|
|
- @wrnexus/compiler 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/compiler
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/content
|
|
|
|
- @wrnexus/content 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/content
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/core
|
|
|
|
- @wrnexus/core 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/core
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/csr
|
|
|
|
- @wrnexus/csr 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/csr
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/db
|
|
|
|
- @wrnexus/db 0.8.7
|
|
- 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.7
|
|
- 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.7
|
|
- 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.7
|
|
- Documentation: https://wrnexusjs.dev/packages/encryption
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/graphql
|
|
|
|
- @wrnexus/graphql 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/graphql
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/helpers
|
|
|
|
- @wrnexus/helpers 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/helpers
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/i18n
|
|
|
|
- @wrnexus/i18n 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/i18n
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/identity
|
|
|
|
- @wrnexus/identity 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/identity
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/image
|
|
|
|
- @wrnexus/image 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/image
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/jwt
|
|
|
|
- @wrnexus/jwt 0.8.7
|
|
- 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.7
|
|
- 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.7
|
|
- Documentation: https://wrnexusjs.dev/packages/mcp
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/mobile
|
|
|
|
- @wrnexus/mobile 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/mobile
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/native
|
|
|
|
- @wrnexus/native 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/native
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/oauth
|
|
|
|
- @wrnexus/oauth 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/oauth
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/observability
|
|
|
|
- @wrnexus/observability 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/observability
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/playground
|
|
|
|
- @wrnexus/playground 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/playground
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/plugin
|
|
|
|
- @wrnexus/plugin 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/plugin
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/pubsub
|
|
|
|
- @wrnexus/pubsub 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/pubsub
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/pwa
|
|
|
|
- @wrnexus/pwa 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/pwa
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/queue
|
|
|
|
- @wrnexus/queue 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/queue
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/reactive
|
|
|
|
- @wrnexus/reactive 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/reactive
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/realtime
|
|
|
|
- @wrnexus/realtime 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/realtime
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/router
|
|
|
|
- @wrnexus/router 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/router
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/rpc
|
|
|
|
- @wrnexus/rpc 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/rpc
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/security
|
|
|
|
- @wrnexus/security 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/security
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/ssr
|
|
|
|
- @wrnexus/ssr 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/ssr
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/store
|
|
|
|
- @wrnexus/store 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/store
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/styles
|
|
|
|
- @wrnexus/styles 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/styles
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/syntax
|
|
|
|
- @wrnexus/syntax 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/syntax
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/test
|
|
|
|
- @wrnexus/test 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/test
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/tracking
|
|
|
|
- @wrnexus/tracking 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/tracking
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/typecheck
|
|
|
|
- @wrnexus/typecheck 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/typecheck
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/ui
|
|
|
|
- @wrnexus/ui 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/ui
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/uploader
|
|
|
|
- @wrnexus/uploader 0.8.7
|
|
- Documentation: https://wrnexusjs.dev/packages/uploader
|
|
- README and complete exported TypeScript API: https://wrnexusjs.dev/llms-full.txt
|
|
|
|
## @wrnexus/validation
|
|
|
|
- @wrnexus/validation 0.8.7
|
|
- 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.7 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
|