WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 29 Packages Projects Releases Wiki Activity

refactor: migrate legacy wire namespace to wrn
Quality / quality (ubuntu-latest) (push) Failing after 9m49s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-12 18:51:15 +05:30
parent ec23dd4c93
commit 2c960fc1dc
488 changed files with 27306 additions and 19063 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/basic-app/.env.example
+1 -1
View File
@@ -1,2 +1,2 @@
APP_LABEL=WireJS (base env)
APP_LABEL=WrNexus (base env)
DEMO_SHARED=from-base
examples/basic-app/.env.uat.example
+1 -1
View File
@@ -1,3 +1,3 @@
APP_LABEL=WireJS (UAT env)
APP_LABEL=WrNexus (UAT env)
DEMO_SHARED=from-uat
UAT_ONLY=yes
examples/basic-app/.prettierignore
+2 -2
View File
@@ -3,8 +3,8 @@ dist/
.wrnexus/
.wrnexus-*/
**/.wrnexus-*/
.wirefw/
**/.wirefw/
.wrnfw/
**/.wrnfw/
**/*.gen.ts
**/*.generated.d.ts
*.log
examples/basic-app/app/api/hello.ts
+1 -1
View File
@@ -1,5 +1,5 @@
// GET /api/hello -> { message: "<translated>", lang: "<active>" }
// Uses ctx.t / ctx.lang, resolved from the wire-lang cookie or Accept-Language.
// Uses ctx.t / ctx.lang, resolved from the wrn-lang cookie or Accept-Language.
import type { Context } from "@wrnexus/core";
export const GET = async (ctx: Context) => {
examples/basic-app/app/api/invite.ts
+1 -1
View File
@@ -2,7 +2,7 @@
// modal's invite form uses in the browser, so a request that bypasses the
// client (curl, a replayed fetch, a stale page) is held to identical rules.
//
// There is no mail provider wired up in the example, so a successful parse
// There is no mail provider connected up in the example, so a successful parse
// just echoes the invite back. The point being demonstrated is the shared
// schema and the client/server round trip, not delivery.
import { verifyCsrf, type Context } from "@wrnexus/core";
examples/basic-app/app/db/migrations/0002_seed_users.sql
+4 -4
View File
@@ -1,7 +1,7 @@
-- +up
INSERT INTO users (email, name, active) VALUES ('ada@wire.dev', 'Ada Lovelace', 1);
INSERT INTO users (email, name, active) VALUES ('grace@wire.dev', 'Grace Hopper', 1);
INSERT INTO users (email, name, active) VALUES ('linus@wire.dev', 'Linus Torvalds', 0);
INSERT INTO users (email, name, active) VALUES ('ada@wrn.dev', 'Ada Lovelace', 1);
INSERT INTO users (email, name, active) VALUES ('grace@wrn.dev', 'Grace Hopper', 1);
INSERT INTO users (email, name, active) VALUES ('linus@wrn.dev', 'Linus Torvalds', 0);
-- +down
DELETE FROM users WHERE email IN ('ada@wire.dev', 'grace@wire.dev', 'linus@wire.dev');
DELETE FROM users WHERE email IN ('ada@wrn.dev', 'grace@wrn.dev', 'linus@wrn.dev');
examples/basic-app/app/db/seed.ts
+4 -4
View File
@@ -7,10 +7,10 @@ export default async function seed(db: Db): Promise<void> {
const passwordHash = await hashPassword("password123");
await db.exec("DELETE FROM users");
const rows: [string, string, number][] = [
["ada@wire.dev", "Ada Lovelace", 1],
["grace@wire.dev", "Grace Hopper", 1],
["linus@wire.dev", "Linus Torvalds", 0],
["margaret@wire.dev", "Margaret Hamilton", 1],
["ada@wrn.dev", "Ada Lovelace", 1],
["grace@wrn.dev", "Grace Hopper", 1],
["linus@wrn.dev", "Linus Torvalds", 0],
["margaret@wrn.dev", "Margaret Hamilton", 1],
];
for (const [email, name, active] of rows) {
await db.exec("INSERT INTO users (email, name, active, passwordHash) VALUES (?, ?, ?, ?)", [
examples/basic-app/app/example.test.ts
+2 -2
View File
@@ -115,8 +115,8 @@ describe("full app", () => {
const fieldResponse = await app.fetch("/modal");
expect(fieldResponse.status).toBe(200);
const fieldHtml = await fieldResponse.text();
expect(fieldHtml).toContain('data-wrnexus-style-owner="FieldStyles"');
expect(fieldHtml).toContain('data-wrnexus-style-owner="ComponentBaseStyles"');
expect(fieldHtml).toContain('data-wrnexus-style-owner="Input"');
expect(fieldHtml).toContain('data-wrnexus-style-owner="Modal"');
const selectResponse = await app.fetch("/test");
expect(selectResponse.status).toBe(200);
expect(await selectResponse.text()).toContain('data-wrnexus-style-owner="SelectStyles"');
examples/basic-app/app/layouts/auth.wrn
+4 -4
View File
@@ -1,4 +1,4 @@
// Auth layout: centers a single card (login/signup). Uses the Wire UI card,
// Auth layout: centers a single card (login/signup). Uses the WrNexus UI card,
// passing an extra `class` so we can constrain its width.
component AuthLayout {
view {
@@ -20,9 +20,9 @@ component AuthLayout {
.auth-card {
width: min(100%, 28rem);
padding: 2rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-lg);
background: var(--wire-color-surface);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-lg);
background: var(--wrn-color-surface);
box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 0.18);
}
}
examples/basic-app/app/layouts/dashboard.wrn
+1 -1
View File
@@ -9,7 +9,7 @@ component DashboardLayout {
<a href="/ui">Components</a>
<a href="/">Home</a>
</nav>
<button type="button" data-wire-theme-toggle aria-label="Toggle color theme">Theme</button>
<button type="button" data-wrn-theme-toggle aria-label="Toggle color theme">Theme</button>
</aside>
<main class="dash-main">
examples/basic-app/app/layouts/public.wrn
+4 -4
View File
@@ -13,9 +13,9 @@ component PublicLayout {
<a href="/about">{t:nav.about}</a>
<a href="/navigation">{t:nav.navigation}</a>
<a href="/layout">{t:nav.layout}</a>
<button type="button" data-wire-theme-toggle aria-label="Toggle color theme">Theme</button>
<button class="wire-btn wire-btn--ghost wire-btn--sm" data-wire-lang-set="en">EN</button>
<button class="wire-btn wire-btn--ghost wire-btn--sm" data-wire-lang-set="es">ES</button>
<button type="button" data-wrn-theme-toggle aria-label="Toggle color theme">Theme</button>
<button class="wrn-btn wrn-btn--ghost wrn-btn--sm" data-wrn-lang-set="en">EN</button>
<button class="wrn-btn wrn-btn--ghost wrn-btn--sm" data-wrn-lang-set="es">ES</button>
</nav>
</header>
@@ -23,7 +23,7 @@ component PublicLayout {
<slot></slot>
</main>
<footer class="site-footer">Built with WrNexus · Wire UI + theming</footer>
<footer class="site-footer">Built with WrNexus · WrNexus UI + theming</footer>
</div>
}
}
examples/basic-app/app/pages/chat.wrn
+8 -8
View File
@@ -19,13 +19,13 @@ page Chat {
gap: 0.35rem;
font-size: 0.95rem;
}
.chat-row--system { color: var(--wire-color-muted); font-size: 0.85rem; }
.chat-row--system { color: var(--wrn-color-muted); font-size: 0.85rem; }
.chat-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chat-form .chat-name { max-width: 150px; }
.chat-form .chat-msg { flex: 1 1 12rem; }
[data-room-status].is-connected { background: var(--wire-color-success); color: #05210f; }
[data-room-status].is-connected { background: var(--wrn-color-success); color: #05210f; }
[data-room-status].is-disconnected,
[data-room-status].is-error { background: var(--wire-color-danger); color: #fff; }
[data-room-status].is-error { background: var(--wrn-color-danger); color: #fff; }
}
view {
@@ -39,16 +39,16 @@ page Chat {
<div data-room="chat">
<div data-component="stack" gap="4">
<span data-room-status data-room-status-class="wire-badge" class="wire-badge wire-badge--default">connecting…</span>
<div data-room-log class="chat-log wire-card"></div>
<span data-room-status data-room-status-class="wrn-badge" class="wrn-badge wrn-badge--default">connecting…</span>
<div data-room-log class="chat-log wrn-card"></div>
<template data-room-item="message"><div><strong>%user%</strong>: %text%</div></template>
<template data-room-item="system"><div class="chat-row--system"><em>%text%</em></div></template>
<form data-room-send class="chat-form">
<input name="user" class="wire-input chat-name" placeholder="Your name" autocomplete="off">
<input name="text" class="wire-input chat-msg" placeholder="Type a message…" data-room-reset autocomplete="off">
<button type="submit" class="wire-btn wire-btn--primary">Send</button>
<input name="user" class="wrn-input chat-name" placeholder="Your name" autocomplete="off">
<input name="text" class="wrn-input chat-msg" placeholder="Type a message…" data-room-reset autocomplete="off">
<button type="submit" class="wrn-btn wrn-btn--primary">Send</button>
</form>
</div>
</div>
examples/basic-app/app/pages/client-only.wrn
+3 -3
View File
@@ -6,10 +6,10 @@ page ClientOnly {
state count: number = 0
view {
<section class="wire-card stack">
<p class="wire-badge">Mounted in the browser</p>
<section class="wrn-card stack">
<p class="wrn-badge">Mounted in the browser</p>
<h1>Client-only page</h1>
<button type="button" class="wire-btn" @click="count++">Count: {count}</button>
<button type="button" class="wrn-btn" @click="count++">Count: {count}</button>
</section>
}
}
examples/basic-app/app/pages/index.wrn
+9 -9
View File
@@ -23,11 +23,11 @@ page Home {
<div data-component="counter" start="10" label="{t:nav.dashboard}"></div>
</div>
<!-- This box is styled entirely with theme tokens (var(--wire-*)), so it
<!-- This box is styled entirely with theme tokens (var(--wrn-*)), so it
restyles instantly when the theme changes. -->
<div class="themed-box">
This box uses theme tokens. Current theme controls its colors.
<button type="button" data-wire-theme-toggle class="theme-toggle">Toggle theme</button>
<button type="button" data-wrn-theme-toggle class="theme-toggle">Toggle theme</button>
</div>
<p><a class="text-red-600 hover:underline" href="/about">About</a></p>
@@ -36,10 +36,10 @@ page Home {
style {
.themed-box {
background: var(--wire-color-surface);
color: var(--wire-color-text);
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius);
background: var(--wrn-color-surface);
color: var(--wrn-color-text);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
padding: 1rem;
margin: 1rem 0;
display: flex;
@@ -48,10 +48,10 @@ page Home {
gap: 1rem;
}
.theme-toggle {
background: var(--wire-color-primary);
color: var(--wire-color-primary-contrast);
background: var(--wrn-color-primary);
color: var(--wrn-color-primary-contrast);
border: 0;
border-radius: var(--wire-radius-sm);
border-radius: var(--wrn-radius-sm);
padding: 0.5rem 0.9rem;
cursor: pointer;
}
examples/basic-app/app/pages/language-tools.wrn
+9 -9
View File
@@ -69,7 +69,7 @@ page LanguageTools {
}
.eyebrow {
color: var(--wire-color-primary);
color: var(--wrn-color-primary);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
@@ -77,9 +77,9 @@ page LanguageTools {
.demo-card {
padding: 1.25rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-lg);
background: var(--wire-color-surface);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-lg);
background: var(--wrn-color-surface);
}
.actions {
@@ -89,16 +89,16 @@ page LanguageTools {
.actions button {
padding: 0.65rem 1rem;
border: 1px solid var(--wire-color-primary);
border-radius: var(--wire-radius-md);
background: var(--wire-color-primary);
color: var(--wire-color-primary-contrast);
border: 1px solid var(--wrn-color-primary);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-primary);
color: var(--wrn-color-primary-contrast);
cursor: pointer;
}
.actions .secondary {
background: transparent;
color: var(--wire-color-primary);
color: var(--wrn-color-primary);
}
}
}
examples/basic-app/app/pages/layout.wrn
+8 -8
View File
@@ -157,9 +157,9 @@ page LayoutTour {
style {
.tour-card {
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-md);
background: var(--wire-color-surface);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
}
.tour-card h4,
@@ -173,7 +173,7 @@ page LayoutTour {
.tour-pane p,
.tour-scroll p {
margin: 0;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.86rem;
line-height: 1.6;
}
@@ -185,10 +185,10 @@ page LayoutTour {
.tour-status {
margin: 0 0 0.75rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-sm);
background: var(--wire-color-surface-soft);
color: var(--wire-color-text-muted);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface-soft);
color: var(--wrn-color-text-muted);
font-size: 0.82rem;
}
examples/basic-app/app/pages/login.wrn
+7 -7
View File
@@ -14,21 +14,21 @@ page Login {
<div class="auth-stack">
<h1>Sign in</h1>
<div class="wire-alert wire-alert--success" data-success="Signed in! The form posted JSON and was validated server-side." hidden></div>
<div class="wrn-alert wrn-alert--success" data-success="Signed in! The form posted JSON and was validated server-side." hidden></div>
<label class="auth-field">
<span>Email address</span>
<input type="email" name="email" autocomplete="email" placeholder="you@example.com" required />
<span class="wire-field-error" data-error="email"></span>
<span class="wrn-field-error" data-error="email"></span>
</label>
<label class="auth-field">
<span>Password</span>
<input type="password" name="password" autocomplete="current-password" placeholder="Password" required />
<span class="wire-field-error" data-error="password"></span>
<span class="wrn-field-error" data-error="password"></span>
</label>
<button type="submit" class="wire-btn wire-btn--primary wire-btn--lg">Sign in</button>
<button type="submit" class="wrn-btn wrn-btn--primary wrn-btn--lg">Sign in</button>
<p><a href="/">Back home</a></p>
</div>
</form>
@@ -50,9 +50,9 @@ page Login {
.auth-field input {
min-height: 2.75rem;
padding: 0.7rem 0.8rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-md);
background: var(--wire-color-surface);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
color: inherit;
}
}
examples/basic-app/app/pages/modal.wrn
+17 -17
View File
@@ -141,8 +141,8 @@ page ModalPage {
flex-direction: column;
gap: 0.6rem;
padding: 1.1rem;
background: var(--wire-color-surface-raised);
border: 1px solid var(--wire-color-border);
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: 1rem;
}
@@ -161,7 +161,7 @@ page ModalPage {
.modal-demo-card > p {
margin: 0;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.82rem;
line-height: 1.5;
}
@@ -173,7 +173,7 @@ page ModalPage {
.modal-demo-form-error {
margin: 0;
color: var(--wire-color-danger);
color: var(--wrn-color-danger);
font-size: 0.8rem;
}
@@ -185,8 +185,8 @@ page ModalPage {
appearance: none;
min-height: 2.55rem;
padding: 0.65rem 1rem;
color: var(--wire-color-secondary-contrast);
background: var(--wire-color-secondary);
color: var(--wrn-color-secondary-contrast);
background: var(--wrn-color-secondary);
border: 0;
border-radius: 0.78rem;
font: inherit;
@@ -201,25 +201,25 @@ page ModalPage {
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.75rem;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.82rem;
}
.modal-demo-note {
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
}
.modal-demo-note em {
color: var(--wire-color-text);
color: var(--wrn-color-text);
font-style: normal;
}
.modal-demo-toast-demos button {
appearance: none;
padding: 0.4rem 0.7rem;
color: var(--wire-color-text);
background: var(--wire-color-surface-raised);
border: 1px solid var(--wire-color-border);
color: var(--wrn-color-text);
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: 0.6rem;
font: inherit;
font-size: 0.78rem;
@@ -235,7 +235,7 @@ page ModalPage {
max-height: 12rem;
overflow-y: auto;
padding-right: 0.5rem;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.85rem;
line-height: 1.6;
}
@@ -318,8 +318,8 @@ page ModalPage {
<!-- 4. Form modal. The form owns its own submit button, so the Modal
footer is turned off: @wrnexus/validation binds to form[data-schema]
and drives the whole flow (validate on input/blur, block submit
while invalid, POST to /api/invite, emit wire:success or
wire:error). Nothing here re-implements a rule that
while invalid, POST to /api/invite, emit wrn:success or
wrn:error). Nothing here re-implements a rule that
app/schemas/invite.ts already states. -->
<div class="modal-demo-card">
<h2>Form modal</h2>
@@ -338,8 +338,8 @@ page ModalPage {
data-schema="invite"
method="post"
action="/api/invite"
@wire:success="onInviteSent(event)"
@wire:error="onInviteFailed(event)"
@wrn:success="onInviteSent(event)"
@wrn:error="onInviteFailed(event)"
>
<Input
name="email"
examples/basic-app/app/pages/navigation.wrn
+9 -9
View File
@@ -1,6 +1,6 @@
// Navigation tour. Route: /navigation
//
// One page that wires every navigation component together the way a real
// One page that connects every navigation component together the way a real
// console would, rather than showing each in isolation:
//
// Navbar the top bar, with a dropdown built from nested children
@@ -375,10 +375,10 @@ page NavigationTour {
.tour__status {
margin: 0 0 0.75rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-sm);
background: var(--wire-color-surface-soft);
color: var(--wire-color-text-muted);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface-soft);
color: var(--wrn-color-text-muted);
font-size: 0.82rem;
}
@@ -398,7 +398,7 @@ page NavigationTour {
.tour__section p {
margin: 0;
max-width: 46rem;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
line-height: 1.7;
}
@@ -413,14 +413,14 @@ page NavigationTour {
.tour__members li {
padding: 0.5rem 0.75rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-sm);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
font-size: 0.88rem;
}
.tour__footer {
padding-top: 1rem;
border-top: 1px solid var(--wire-color-border);
border-top: 1px solid var(--wrn-color-border);
}
/* The rails fold away first; the reading column is what matters. */
examples/basic-app/app/pages/partial-static.wrn
+4 -4
View File
@@ -9,16 +9,16 @@ page PartialStatic {
view {
<Static>
<section class="wire-card stack">
<p class="wire-badge">Built once</p>
<section class="wrn-card stack">
<p class="wrn-badge">Built once</p>
<h1>Build-time static shell</h1>
<p>This heading and page structure are emitted into dist/partial-shells.json.</p>
</section>
</Static>
<Dynamic>
<section class="wire-card stack" aria-live="polite">
<p class="wire-badge">Streamed per request</p>
<section class="wrn-card stack" aria-live="polite">
<p class="wrn-badge">Streamed per request</p>
<h2>Dynamic account region</h2>
<p>Personalized data belongs inside this boundary.</p>
</section>
examples/basic-app/app/pages/platform-showcase.wrn
+7 -7
View File
@@ -42,7 +42,7 @@ page PlatformShowcase {
}
.eyebrow {
color: var(--wire-color-primary);
color: var(--wrn-color-primary);
font-weight: 700;
text-transform: uppercase;
}
@@ -50,18 +50,18 @@ page PlatformShowcase {
.showcase-card,
.portal-target {
padding: 1.25rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-lg);
background: var(--wire-color-surface);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-lg);
background: var(--wrn-color-surface);
}
.showcase-card button {
width: fit-content;
padding: 0.7rem 1rem;
border: 0;
border-radius: var(--wire-radius-md);
background: var(--wire-color-primary);
color: var(--wire-color-primary-contrast);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-primary);
color: var(--wrn-color-primary-contrast);
cursor: pointer;
}
examples/basic-app/app/pages/table.wrn
+2 -2
View File
@@ -89,12 +89,12 @@ page TablePage {
.table-demo-note {
margin: 0;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.82rem;
}
.table-demo-note code {
color: var(--wire-color-text);
color: var(--wrn-color-text);
}
}
examples/basic-app/app/pages/test.wrn
+10 -10
View File
@@ -149,7 +149,7 @@ page Test {
.test-hero > span,
.test-card__type,
.event-monitor span {
color: var(--wire-color-primary);
color: var(--wrn-color-primary);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
@@ -165,7 +165,7 @@ page Test {
.test-hero p,
.test-card p {
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
line-height: 1.65;
}
@@ -182,14 +182,14 @@ page Test {
align-content: start;
gap: 1rem;
padding: clamp(1rem, 3vw, 1.5rem);
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-lg);
background: var(--wire-color-surface);
box-shadow: var(--wire-shadow-1);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-lg);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
}
.test-selection {
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font-size: 0.82rem;
}
@@ -198,7 +198,7 @@ page Test {
bottom: 1rem;
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
background: color-mix(in srgb, var(--wire-color-surface) 94%, var(--wire-color-primary));
background: color-mix(in srgb, var(--wrn-color-surface) 94%, var(--wrn-color-primary));
}
.event-monitor > div {
@@ -212,8 +212,8 @@ page Test {
overflow: auto;
margin: 0;
padding: 1rem;
border-radius: var(--wire-radius-md);
background: var(--wire-color-bg);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-bg);
font-size: 0.75rem;
line-height: 1.65;
white-space: pre-wrap;
examples/basic-app/app/pages/ui.wrn
+87 -87
View File
@@ -164,30 +164,30 @@ page UI {
>
<div
id="component-01"
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 shadow-sm sm:p-8"
class="rounded-3xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-raised)] p-6 shadow-sm sm:p-8"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
01. PublicPageShell
</p>
<h1
class="mt-3 text-3xl font-bold text-[var(--wire-color-text)] sm:text-4xl"
class="mt-3 text-3xl font-bold text-[var(--wrn-color-text)] sm:text-4xl"
>
PublicPageShell
</h1>
<p
class="mt-3 text-base leading-7 text-[var(--wire-color-text-muted)]"
class="mt-3 text-base leading-7 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:
</strong>
Provide the outer structure for a complete public page, including maximum width, page background, overflow handling, before/after slots, and minimum-height behavior.
</p>
<p
class="mt-4 rounded-2xl bg-[var(--wire-color-primary-soft)] px-4 py-3 text-sm text-[var(--wire-color-primary-text)]"
class="mt-4 rounded-2xl bg-[var(--wrn-color-primary-soft)] px-4 py-3 text-sm text-[var(--wrn-color-primary-text)]"
>
This complete page is rendered inside PublicPageShell.
</p>
@@ -202,20 +202,20 @@ page UI {
class="mb-4"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
02. AnnouncementBar
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
AnnouncementBar
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Display an important site-wide update, emergency alert, release notice, or time-sensitive action above the primary page content.
</p>
@@ -239,26 +239,26 @@ page UI {
<div
id="component-03"
class="border-y border-[var(--wire-color-border)]"
class="border-y border-[var(--wrn-color-border)]"
>
<div
class="mx-auto w-full max-w-7xl px-4 pt-10 sm:px-6 lg:px-8"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
03. PageHeader
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
PageHeader
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Introduce an internal or public page with an eyebrow, title, description, icon, breadcrumbs, and primary or secondary actions.
</p>
@@ -290,20 +290,20 @@ page UI {
class="mb-6"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
04. Hero
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
Hero
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Create the primary marketing or public-information introduction with headline emphasis, supporting content, trust items, actions, and an optional visual area.
</p>
@@ -333,23 +333,23 @@ page UI {
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
>
<div
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
class="rounded-3xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-raised)] p-6 sm:p-8"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
05. HeroActions
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
HeroActions
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Group hero buttons with consistent alignment, mobile stacking, orientation, sizing, variants, and responsive behavior.
</p>
@@ -377,20 +377,20 @@ page UI {
class="mb-6"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
06. StatsBar
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
StatsBar
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Present a compact row of key facts, service counts, performance indicators, trust signals, or public portal statistics.
</p>
@@ -415,20 +415,20 @@ page UI {
class="mx-auto w-full max-w-7xl px-4 pb-5 sm:px-6 lg:px-8"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
07. Section
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
Section
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Create predictable page sections with shared spacing, width constraints, surfaces, borders, and responsive vertical rhythm.
</p>
@@ -444,12 +444,12 @@ page UI {
class="p-6 text-center"
>
<p
class="font-semibold text-[var(--wire-color-text)]"
class="font-semibold text-[var(--wrn-color-text)]"
>
Content placed inside a Section component
</p>
<p
class="mt-2 text-sm text-[var(--wire-color-text-muted)]"
class="mt-2 text-sm text-[var(--wrn-color-text-muted)]"
>
The component owns spacing, surface, borders, and content width.
</p>
@@ -465,20 +465,20 @@ page UI {
class="mb-6"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
08. SectionHeader
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
SectionHeader
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Add a consistent heading block to content sections, including eyebrow text, description, icon slot, action slot, alignment, and heading level.
</p>
@@ -497,7 +497,7 @@ page UI {
data-slot="icon"
>
<span
class="inline-flex size-11 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]"
class="inline-flex size-11 items-center justify-center rounded-2xl bg-[var(--wrn-color-primary-soft)] text-[var(--wrn-color-primary)]"
>
<span
class="icon-[lucide--heading-2] size-5"
@@ -511,7 +511,7 @@ page UI {
>
<a
href="#component-09"
class="font-semibold text-[var(--wire-color-primary)]"
class="font-semibold text-[var(--wrn-color-primary)]"
>
Next component
</a>
@@ -527,20 +527,20 @@ page UI {
class="mb-6"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
09. MarketingSectionHeader
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
MarketingSectionHeader
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Introduce marketing, services, solutions, features, benefits, case studies, or product sections with a prominent optional action.
</p>
@@ -562,23 +562,23 @@ page UI {
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
>
<div
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
class="rounded-3xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-raised)] p-6 sm:p-8"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
10. TextLink
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
TextLink
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Provide a lightweight inline action for “view all,” “learn more,” “open documentation,” or related navigation without using a full button.
</p>
@@ -607,20 +607,20 @@ page UI {
class="mb-6"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
11. FeatureGrid
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
FeatureGrid
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Arrange services, features, solutions, benefits, or linked capabilities in a responsive equal-height grid.
</p>
@@ -659,20 +659,20 @@ page UI {
class="mb-6"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
12. FeatureCard
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
FeatureCard
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Present a linked feature or service with an icon, title, description, badge, visual variant, hover treatment, and action label.
</p>
@@ -703,20 +703,20 @@ page UI {
class="mb-6"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
13. FeatureIconCard
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
FeatureIconCard
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Highlight a capability where the icon treatment should carry stronger visual importance than a standard feature card.
</p>
@@ -747,20 +747,20 @@ page UI {
class="mb-6"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
14. MetricGrid
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
MetricGrid
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Arrange operational values, KPIs, public statistics, usage summaries, or service indicators in a responsive grid.
</p>
@@ -786,20 +786,20 @@ page UI {
class="mb-6"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
15. MetricCard
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
MetricCard
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Display one metric with a label, value, suffix, description, icon, trend, status direction, and optional action.
</p>
@@ -832,20 +832,20 @@ page UI {
class="mb-6"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
16. SplitHero
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
SplitHero
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Build a two-column introduction that balances descriptive content and a visual, screenshot, feature panel, image, map, or media block.
</p>
@@ -870,20 +870,20 @@ page UI {
data-slot="visual"
>
<div
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-8 shadow-lg"
class="rounded-3xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-raised)] p-8 shadow-lg"
>
<span
class="icon-[lucide--layout-dashboard] size-14 text-[var(--wire-color-primary)]"
class="icon-[lucide--layout-dashboard] size-14 text-[var(--wrn-color-primary)]"
aria-hidden="true"
>
</span>
<h3
class="mt-5 text-xl font-bold text-[var(--wire-color-text)]"
class="mt-5 text-xl font-bold text-[var(--wrn-color-text)]"
>
Visual content area
</h3>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
Add a product screenshot, service diagram, dashboard, image, or interactive preview.
</p>
@@ -900,20 +900,20 @@ page UI {
class="mx-auto w-full max-w-7xl px-4 pb-6 sm:px-6 lg:px-8"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
17. CTASection
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
CTASection
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Close a page or major section with a strong conversion action such as registration, sign-in, contact, application, service request, or documentation access.
</p>
@@ -942,28 +942,28 @@ page UI {
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
>
<div
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
class="rounded-3xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-raised)] p-6 sm:p-8"
>
<p
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
>
18. BackToTop
</p>
<h2
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
>
BackToTop
</h2>
<p
class="mt-2 text-[var(--wire-color-text-muted)]"
class="mt-2 text-[var(--wrn-color-text-muted)]"
>
<strong
class="text-[var(--wire-color-text)]"
class="text-[var(--wrn-color-text)]"
>
Use case:</strong> Provide a floating control on long pages that returns visitors to the top and can optionally show scroll progress.
</p>
<p
class="mt-4 text-sm text-[var(--wire-color-text-muted)]"
class="mt-4 text-sm text-[var(--wrn-color-text-muted)]"
>
Scroll down the page until the floating button becomes visible.
</p>
examples/basic-app/app/styles/global.css
+12 -12
View File
@@ -16,18 +16,18 @@
/*
* The app palette is derived from the theme tokens rather than fixed.
*
* These used to be hardcoded dark values. Wire UI surfaces follow the theme,
* These used to be hardcoded dark values. WrNexus UI surfaces follow the theme,
* so switching to light turned the cards light while this text stayed light
* too -- the sign-in form rendered at a contrast of about 1.1 and was
* unreadable. Anything an app hardcodes here has to be themed as well, or it
* only ever looks right in one mode.
*/
:root {
--bg: var(--wire-color-bg);
--surface: var(--wire-color-surface);
--text: var(--wire-color-text);
--muted: var(--wire-color-text-muted);
--brand: var(--wire-color-primary);
--bg: var(--wrn-color-bg);
--surface: var(--wrn-color-surface);
--text: var(--wrn-color-text);
--muted: var(--wrn-color-text-muted);
--brand: var(--wrn-color-primary);
--radius: 10px;
--maxw: 720px;
}
@@ -48,7 +48,7 @@ body {
/* Tinted from the primary token so the wash follows the theme too. */
background: radial-gradient(
1200px 600px at 50% -10%,
color-mix(in srgb, var(--wire-color-primary) 18%, var(--bg)) 0%,
color-mix(in srgb, var(--wrn-color-primary) 18%, var(--bg)) 0%,
var(--bg) 60%
);
background-color: var(--bg);
@@ -105,12 +105,12 @@ button:active {
align-items: center;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px solid var(--wire-color-border);
border-bottom: 1px solid var(--wrn-color-border);
margin-bottom: 1.5rem;
}
.site-brand {
font-size: 1.15rem;
color: var(--wire-color-text);
color: var(--wrn-color-text);
}
.site-nav {
display: flex;
@@ -120,8 +120,8 @@ button:active {
.site-footer {
margin-top: 2rem;
padding: 1.25rem 0;
border-top: 1px solid var(--wire-color-border);
color: var(--wire-color-muted);
border-top: 1px solid var(--wrn-color-border);
color: var(--wrn-color-muted);
font-size: 0.9rem;
}
@@ -137,7 +137,7 @@ button:active {
flex-direction: column;
gap: 1rem;
padding: 1rem 0;
border-right: 1px solid var(--wire-color-border);
border-right: 1px solid var(--wrn-color-border);
}
.dash-nav {
display: flex;
examples/basic-app/docker-compose.yml
+4 -4
View File
@@ -6,7 +6,7 @@ services:
environment:
NODE_ENV: production
PORT: "3000"
DATABASE_URL: postgres://wire:wire@db:5432/app
DATABASE_URL: postgres://wrn:wrn@db:5432/app
depends_on:
db:
condition: service_healthy
@@ -15,11 +15,11 @@ services:
db:
image: postgres:16-alpine
environment:
POSTGRES_USER: wire
POSTGRES_PASSWORD: wire
POSTGRES_USER: wrn
POSTGRES_PASSWORD: wrn
POSTGRES_DB: app
healthcheck:
test: ["CMD-SHELL", "pg_isready -U wire -d app"]
test: ["CMD-SHELL", "pg_isready -U wrn -d app"]
interval: 3s
timeout: 3s
retries: 20
examples/basic-app/public/site.webmanifest
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "WireJS Basic App",
"short_name": "WireJS",
"name": "WrNexus Basic App",
"short_name": "WrNexus",
"start_url": "/",
"display": "standalone"
}