WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 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/captcha-showcase/app/pages/index.wrn
+49 -49
View File
@@ -6,7 +6,7 @@ page CaptchaShowcase {
view {
<main
class="min-h-screen bg-[var(--wire-color-bg)] px-4 py-10 text-[var(--wire-color-text)] sm:px-6 lg:px-8"
class="min-h-screen bg-[var(--wrn-color-bg)] px-4 py-10 text-[var(--wrn-color-text)] sm:px-6 lg:px-8"
>
<div
class="mx-auto flex max-w-7xl flex-col gap-10"
@@ -15,7 +15,7 @@ page CaptchaShowcase {
class="max-w-3xl"
>
<p
class="mb-2 text-sm font-semibold text-[var(--wire-color-primary)]"
class="mb-2 text-sm font-semibold text-[var(--wrn-color-primary)]"
>
@wrnexus/captcha
</p>
@@ -25,17 +25,17 @@ page CaptchaShowcase {
CAPTCHA system showcase
</h1>
<p
class="mt-4 text-base leading-7 text-[var(--wire-color-muted)]"
class="mt-4 text-base leading-7 text-[var(--wrn-color-muted)]"
>
Self-hosted number, alphabet, alphanumeric, calculation, image, audio, not-robot, honeypot, timing, validated form-submit, and page-gate protection.
</p>
<a
href="/styles"
class="mt-4 inline-flex h-10 items-center gap-2 rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] px-4 text-sm font-semibold text-[var(--wire-color-text)] hover:border-[var(--wire-color-primary)]"
class="mt-4 inline-flex h-10 items-center gap-2 rounded-[var(--wrn-radius-sm)] border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] px-4 text-sm font-semibold text-[var(--wrn-color-text)] hover:border-[var(--wrn-color-primary)]"
>
<span
aria-hidden="true"
class="icon-[lucide--images] size-4 text-[var(--wire-color-primary)]"
class="icon-[lucide--images] size-4 text-[var(--wrn-color-primary)]"
>
</span>
Open all 18 image styles
@@ -46,7 +46,7 @@ page CaptchaShowcase {
class="grid gap-6 lg:grid-cols-2"
>
<article
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5"
class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5"
>
<h2
class="mt-0 text-lg font-semibold"
@@ -64,7 +64,7 @@ page CaptchaShowcase {
</article>
<article
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5"
class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5"
>
<h2
class="mt-0 text-lg font-semibold"
@@ -82,7 +82,7 @@ page CaptchaShowcase {
</article>
<article
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5"
class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5"
>
<h2
class="mt-0 text-lg font-semibold"
@@ -101,7 +101,7 @@ page CaptchaShowcase {
</article>
<article
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5"
class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5"
>
<h2
class="mt-0 text-lg font-semibold"
@@ -120,7 +120,7 @@ page CaptchaShowcase {
</section>
<section
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5 sm:p-7"
class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5 sm:p-7"
>
<div
class="max-w-3xl"
@@ -131,7 +131,7 @@ page CaptchaShowcase {
Compact, normal, and big sizes
</h2>
<p
class="text-sm leading-6 text-[var(--wire-color-muted)]"
class="text-sm leading-6 text-[var(--wrn-color-muted)]"
>
Use the size prop to fit dense forms, standard pages, or large security flows.
</p>
@@ -141,7 +141,7 @@ page CaptchaShowcase {
class="mt-5 grid items-start gap-5 xl:grid-cols-3"
>
<article
class="rounded-xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] p-4"
class="rounded-xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-2)] p-4"
>
<h3
class="mt-0 text-base font-semibold"
@@ -160,7 +160,7 @@ page CaptchaShowcase {
</article>
<article
class="rounded-xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] p-4"
class="rounded-xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-2)] p-4"
>
<h3
class="mt-0 text-base font-semibold"
@@ -178,7 +178,7 @@ page CaptchaShowcase {
</article>
<article
class="rounded-xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] p-4"
class="rounded-xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-2)] p-4"
>
<h3
class="mt-0 text-base font-semibold"
@@ -201,7 +201,7 @@ page CaptchaShowcase {
class="grid gap-6 lg:grid-cols-2"
>
<article
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5"
class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5"
>
<h2
class="mt-0 text-lg font-semibold"
@@ -209,7 +209,7 @@ page CaptchaShowcase {
I'm not a robot
</h2>
<p
class="text-sm leading-6 text-[var(--wire-color-muted)]"
class="text-sm leading-6 text-[var(--wrn-color-muted)]"
>
A low-friction, one-time checkbox challenge backed by timing, honeypot, expiry, action, session, and server-side token checks.
</p>
@@ -225,7 +225,7 @@ page CaptchaShowcase {
</article>
<article
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5"
class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5"
>
<h2
class="mt-0 text-lg font-semibold"
@@ -233,7 +233,7 @@ page CaptchaShowcase {
Listen button hidden
</h2>
<p
class="text-sm leading-6 text-[var(--wire-color-muted)]"
class="text-sm leading-6 text-[var(--wrn-color-muted)]"
>
Set showListen to false when a separate accessible alternative is provided elsewhere.
</p>
@@ -249,7 +249,7 @@ page CaptchaShowcase {
</section>
<section
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5 sm:p-7"
class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5 sm:p-7"
>
<div
class="max-w-3xl"
@@ -260,7 +260,7 @@ page CaptchaShowcase {
Generated image disturbance
</h2>
<p
class="text-sm leading-6 text-[var(--wire-color-muted)]"
class="text-sm leading-6 text-[var(--wrn-color-muted)]"
>
Use the disturbance prop from 25 to 75. Lower values are easier to read; higher values add more dots and crossing lines.
</p>
@@ -270,7 +270,7 @@ page CaptchaShowcase {
class="mt-5 grid gap-5 xl:grid-cols-3"
>
<article
class="rounded-xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] p-4"
class="rounded-xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-2)] p-4"
>
<div
class="mb-3 flex items-center justify-between gap-3"
@@ -281,7 +281,7 @@ page CaptchaShowcase {
Easy image
</h3>
<code
class="rounded-md bg-[var(--wire-color-surface)] px-2 py-1 text-xs"
class="rounded-md bg-[var(--wrn-color-surface)] px-2 py-1 text-xs"
>
25%
</code>
@@ -297,7 +297,7 @@ page CaptchaShowcase {
</article>
<article
class="rounded-xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] p-4"
class="rounded-xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-2)] p-4"
>
<div
class="mb-3 flex items-center justify-between gap-3"
@@ -308,7 +308,7 @@ page CaptchaShowcase {
Normal image
</h3>
<code
class="rounded-md bg-[var(--wire-color-surface)] px-2 py-1 text-xs"
class="rounded-md bg-[var(--wrn-color-surface)] px-2 py-1 text-xs"
>
50%
</code>
@@ -324,7 +324,7 @@ page CaptchaShowcase {
</article>
<article
class="rounded-xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] p-4"
class="rounded-xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-2)] p-4"
>
<div
class="mb-3 flex items-center justify-between gap-3"
@@ -335,7 +335,7 @@ page CaptchaShowcase {
Hard image
</h3>
<code
class="rounded-md bg-[var(--wire-color-surface)] px-2 py-1 text-xs"
class="rounded-md bg-[var(--wrn-color-surface)] px-2 py-1 text-xs"
>
75%
</code>
@@ -357,7 +357,7 @@ page CaptchaShowcase {
class="grid gap-6 lg:grid-cols-2"
>
<article
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5"
class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5"
>
<h2
class="mt-0 text-lg font-semibold"
@@ -374,7 +374,7 @@ page CaptchaShowcase {
</article>
<article
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5"
class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5"
>
<h2
class="mt-0 text-lg font-semibold"
@@ -393,13 +393,13 @@ page CaptchaShowcase {
</section>
<section
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5 sm:p-7"
class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5 sm:p-7"
>
<div
class="max-w-3xl"
>
<p
class="mb-2 text-sm font-semibold text-[var(--wire-color-primary)]"
class="mb-2 text-sm font-semibold text-[var(--wrn-color-primary)]"
>
Complete integration
</p>
@@ -409,7 +409,7 @@ page CaptchaShowcase {
Validated contact form with CAPTCHA
</h2>
<p
class="text-sm leading-6 text-[var(--wire-color-muted)]"
class="text-sm leading-6 text-[var(--wrn-color-muted)]"
>
The same contact schema validates in the browser and API. CAPTCHA verification remains mandatory on the server before the form is accepted.
</p>
@@ -425,7 +425,7 @@ page CaptchaShowcase {
<div
data-success="Validated form submitted successfully."
hidden
class="rounded-xl border border-[var(--wire-color-success)] bg-[color-mix(in_srgb,var(--wire-color-success)_10%,transparent)] p-4 text-sm font-medium text-[var(--wire-color-success)]"
class="rounded-xl border border-[var(--wrn-color-success)] bg-[color-mix(in_srgb,var(--wrn-color-success)_10%,transparent)] p-4 text-sm font-medium text-[var(--wrn-color-success)]"
>
</div>
@@ -441,12 +441,12 @@ page CaptchaShowcase {
type="text"
autocomplete="name"
placeholder="Ajay Ghanwat"
class="h-11 rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] px-3 text-[var(--wire-color-text)] outline-none focus:border-[var(--wire-color-primary)] focus:ring-2 focus:ring-[var(--wire-color-primary)] aria-[invalid=true]:border-[var(--wire-color-danger)]"
class="h-11 rounded-[var(--wrn-radius-sm)] border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-2)] px-3 text-[var(--wrn-color-text)] outline-none focus:border-[var(--wrn-color-primary)] focus:ring-2 focus:ring-[var(--wrn-color-primary)] aria-[invalid=true]:border-[var(--wrn-color-danger)]"
/>
<span
data-error="name"
role="alert"
class="min-h-5 text-xs text-[var(--wire-color-danger)]"
class="min-h-5 text-xs text-[var(--wrn-color-danger)]"
>
</span>
</label>
@@ -460,12 +460,12 @@ page CaptchaShowcase {
type="email"
autocomplete="email"
placeholder="you@example.com"
class="h-11 rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] px-3 text-[var(--wire-color-text)] outline-none focus:border-[var(--wire-color-primary)] focus:ring-2 focus:ring-[var(--wire-color-primary)] aria-[invalid=true]:border-[var(--wire-color-danger)]"
class="h-11 rounded-[var(--wrn-radius-sm)] border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-2)] px-3 text-[var(--wrn-color-text)] outline-none focus:border-[var(--wrn-color-primary)] focus:ring-2 focus:ring-[var(--wrn-color-primary)] aria-[invalid=true]:border-[var(--wrn-color-danger)]"
/>
<span
data-error="email"
role="alert"
class="min-h-5 text-xs text-[var(--wire-color-danger)]"
class="min-h-5 text-xs text-[var(--wrn-color-danger)]"
>
</span>
</label>
@@ -477,7 +477,7 @@ page CaptchaShowcase {
Topic
<select
name="topic"
class="h-11 rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] px-3 text-[var(--wire-color-text)] outline-none focus:border-[var(--wire-color-primary)] focus:ring-2 focus:ring-[var(--wire-color-primary)] aria-[invalid=true]:border-[var(--wire-color-danger)]"
class="h-11 rounded-[var(--wrn-radius-sm)] border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-2)] px-3 text-[var(--wrn-color-text)] outline-none focus:border-[var(--wrn-color-primary)] focus:ring-2 focus:ring-[var(--wrn-color-primary)] aria-[invalid=true]:border-[var(--wrn-color-danger)]"
>
<option
value=""
@@ -508,7 +508,7 @@ page CaptchaShowcase {
<span
data-error="topic"
role="alert"
class="min-h-5 text-xs text-[var(--wire-color-danger)]"
class="min-h-5 text-xs text-[var(--wrn-color-danger)]"
>
</span>
</label>
@@ -521,24 +521,24 @@ page CaptchaShowcase {
name="message"
rows="5"
placeholder="Tell us how we can help..."
class="min-h-32 resize-y rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] px-3 py-3 text-[var(--wire-color-text)] outline-none focus:border-[var(--wire-color-primary)] focus:ring-2 focus:ring-[var(--wire-color-primary)] aria-[invalid=true]:border-[var(--wire-color-danger)]"
class="min-h-32 resize-y rounded-[var(--wrn-radius-sm)] border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-2)] px-3 py-3 text-[var(--wrn-color-text)] outline-none focus:border-[var(--wrn-color-primary)] focus:ring-2 focus:ring-[var(--wrn-color-primary)] aria-[invalid=true]:border-[var(--wrn-color-danger)]"
>
</textarea>
<span
data-error="message"
role="alert"
class="min-h-5 text-xs text-[var(--wire-color-danger)]"
class="min-h-5 text-xs text-[var(--wrn-color-danger)]"
>
</span>
</label>
<label
class="flex items-start gap-3 text-sm text-[var(--wire-color-muted)]"
class="flex items-start gap-3 text-sm text-[var(--wrn-color-muted)]"
>
<input
name="consent"
type="checkbox"
class="mt-0.5 size-4 rounded border-[var(--wire-color-border)] text-[var(--wire-color-primary)] focus:ring-[var(--wire-color-primary)]"
class="mt-0.5 size-4 rounded border-[var(--wrn-color-border)] text-[var(--wrn-color-primary)] focus:ring-[var(--wrn-color-primary)]"
/>
<span
>
@@ -548,7 +548,7 @@ page CaptchaShowcase {
<span
data-error="consent"
role="alert"
class="min-h-5 text-xs text-[var(--wire-color-danger)]"
class="min-h-5 text-xs text-[var(--wrn-color-danger)]"
>
</span>
@@ -563,7 +563,7 @@ page CaptchaShowcase {
<button
type="submit"
class="h-11 rounded-[var(--wire-radius-sm)] bg-[var(--wire-color-primary)] px-5 font-semibold text-[var(--wire-color-primary-contrast)] disabled:cursor-not-allowed disabled:opacity-60"
class="h-11 rounded-[var(--wrn-radius-sm)] bg-[var(--wrn-color-primary)] px-5 font-semibold text-[var(--wrn-color-primary-contrast)] disabled:cursor-not-allowed disabled:opacity-60"
>
Validate and submit form
</button>
@@ -571,7 +571,7 @@ page CaptchaShowcase {
</section>
<section
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5 sm:p-7"
class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5 sm:p-7"
>
<h2
class="mt-0 text-xl font-semibold"
@@ -579,20 +579,20 @@ page CaptchaShowcase {
Page-open protection
</h2>
<p
class="text-sm text-[var(--wire-color-muted)]"
class="text-sm text-[var(--wrn-color-muted)]"
>
This route uses a once-per-session page grant. After successful CAPTCHA verification, the form posts the response token and safely redirects to the requested protected route.
</p>
<a
href="/protected"
class="mt-3 inline-flex h-11 items-center rounded-[var(--wire-radius-sm)] bg-[var(--wire-color-primary)] px-5 font-semibold text-[var(--wire-color-primary-contrast)]"
class="mt-3 inline-flex h-11 items-center rounded-[var(--wrn-radius-sm)] bg-[var(--wrn-color-primary)] px-5 font-semibold text-[var(--wrn-color-primary-contrast)]"
>
Open protected page
</a>
</section>
<section
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5 sm:p-7"
class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5 sm:p-7"
>
<h2
class="mt-0 text-xl font-semibold"
@@ -600,7 +600,7 @@ page CaptchaShowcase {
External providers
</h2>
<p
class="text-sm text-[var(--wire-color-muted)]"
class="text-sm text-[var(--wrn-color-muted)]"
>
Add real public test keys before enabling these examples.
</p>