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/captcha.wrn
+5 -5
View File
@@ -7,17 +7,17 @@ page CaptchaGate {
}
view {
<main class="grid min-h-screen place-items-center bg-[var(--wire-color-bg)] px-4 py-10 text-[var(--wire-color-text)]">
<main class="grid min-h-screen place-items-center bg-[var(--wrn-color-bg)] px-4 py-10 text-[var(--wrn-color-text)]">
<form
method="post"
action="/api/page-grant"
class="w-full max-w-xl rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5 shadow-[var(--wire-shadow-1)] sm:p-7"
class="w-full max-w-xl rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5 shadow-[var(--wrn-shadow-1)] sm:p-7"
>
<input type="hidden" name="returnTo" value='{returnTo}' />
<p class="mb-2 text-sm font-semibold text-[var(--wire-color-primary)]">Protected page</p>
<p class="mb-2 text-sm font-semibold text-[var(--wrn-color-primary)]">Protected page</p>
<h1 class="m-0 text-2xl font-bold">Confirm you are human</h1>
<p class="mb-5 mt-2 text-sm leading-6 text-[var(--wire-color-muted)]">Complete this once to access protected showcase pages for 15 minutes.</p>
<p class="mb-5 mt-2 text-sm leading-6 text-[var(--wrn-color-muted)]">Complete this once to access protected showcase pages for 15 minutes.</p>
<Captcha
endpoint="/api/captcha/challenge"
@@ -28,7 +28,7 @@ page CaptchaGate {
required="true"
/>
<button type="submit" class="mt-4 h-11 w-full rounded-[var(--wire-radius-sm)] bg-[var(--wire-color-primary)] px-5 font-semibold text-[var(--wire-color-primary-contrast)]">
<button type="submit" class="mt-4 h-11 w-full rounded-[var(--wrn-radius-sm)] bg-[var(--wrn-color-primary)] px-5 font-semibold text-[var(--wrn-color-primary-contrast)]">
Continue to protected page
</button>
</form>
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>
examples/captcha-showcase/app/pages/protected.wrn
+5 -5
View File
@@ -5,12 +5,12 @@ page ProtectedCaptchaPage {
}
view {
<main class="grid min-h-screen place-items-center bg-[var(--wire-color-bg)] px-4 py-10 text-[var(--wire-color-text)]">
<section class="w-full max-w-2xl rounded-2xl border border-[var(--wire-color-success)] bg-[var(--wire-color-surface)] p-7 text-center shadow-[var(--wire-shadow-1)]">
<span aria-hidden="true" class="icon-[lucide--shield-check] mx-auto block size-12 text-[var(--wire-color-success)]"></span>
<main class="grid min-h-screen place-items-center bg-[var(--wrn-color-bg)] px-4 py-10 text-[var(--wrn-color-text)]">
<section class="w-full max-w-2xl rounded-2xl border border-[var(--wrn-color-success)] bg-[var(--wrn-color-surface)] p-7 text-center shadow-[var(--wrn-shadow-1)]">
<span aria-hidden="true" class="icon-[lucide--shield-check] mx-auto block size-12 text-[var(--wrn-color-success)]"></span>
<h1 class="mt-4 text-3xl font-bold">Protected page unlocked</h1>
<p class="text-[var(--wire-color-muted)]">The session grant is valid for 15 minutes.</p>
<a href="/" class="mt-5 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)]">Back to showcase</a>
<p class="text-[var(--wrn-color-muted)]">The session grant is valid for 15 minutes.</p>
<a href="/" class="mt-5 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)]">Back to showcase</a>
</section>
</main>
}
examples/captcha-showcase/app/pages/styles.wrn
+34 -34
View File
@@ -5,59 +5,59 @@ page CaptchaImageStyles {
}
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">
<main 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">
<header class="max-w-4xl">
<a href="/" class="mb-4 inline-flex items-center gap-2 text-sm font-semibold text-[var(--wire-color-primary)] hover:underline">
<a href="/" class="mb-4 inline-flex items-center gap-2 text-sm font-semibold text-[var(--wrn-color-primary)] hover:underline">
<span aria-hidden="true" class="icon-[lucide--arrow-left] size-4"></span>
Back to CAPTCHA showcase
</a>
<p class="mb-2 text-sm font-semibold text-[var(--wire-color-primary)]">Visual renderer catalog</p>
<p class="mb-2 text-sm font-semibold text-[var(--wrn-color-primary)]">Visual renderer catalog</p>
<h1 class="m-0 text-3xl font-bold tracking-tight sm:text-5xl">18 randomized CAPTCHA image styles</h1>
<p class="mt-4 text-base leading-7 text-[var(--wire-color-muted)]">
<p class="mt-4 text-base leading-7 text-[var(--wrn-color-muted)]">
Every renderer keeps the answer on the server, supports disturbance from 25 to 75, and generates a fresh cryptographically randomized image for each challenge.
</p>
</header>
<section class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5 sm:p-7">
<section class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5 sm:p-7">
<div class="max-w-3xl">
<h2 class="mt-0 text-xl font-semibold">Random style by difficulty</h2>
<p class="text-sm leading-6 text-[var(--wire-color-muted)]">
<p class="text-sm leading-6 text-[var(--wrn-color-muted)]">
Use <code>imageStyle="random"</code> for a different renderer whenever a challenge is refreshed. Difficulty controls length and default disturbance.
</p>
</div>
<div 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">
<article 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">Easy random</h3>
<Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-random-easy" imageStyle="random" difficulty="easy" disturbance="25" size="compact" showListen="false" />
</article>
<article class="rounded-xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] p-4">
<article 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">Normal random</h3>
<Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-random-normal" imageStyle="random" difficulty="normal" disturbance="50" size="compact" showListen="false" />
</article>
<article class="rounded-xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] p-4">
<article 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">Hard random</h3>
<Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-random-hard" imageStyle="random" difficulty="hard" disturbance="75" size="compact" showListen="false" />
</article>
</div>
</section>
<section class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-5 sm:p-7">
<section class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-5 sm:p-7">
<div class="max-w-3xl">
<h2 class="mt-0 text-xl font-semibold">Controlled random pools</h2>
<p class="text-sm leading-6 text-[var(--wire-color-muted)]">
<p class="text-sm leading-6 text-[var(--wrn-color-muted)]">
Limit random selection with <code>allowedStyles</code>, remove renderers with <code>excludedStyles</code>, or force random selection with <code>randomizeStyle="true"</code>.
</p>
</div>
<div class="mt-5 grid items-start gap-5 lg:grid-cols-2">
<article class="rounded-xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] p-4">
<article 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">Allowed pool</h3>
<p class="text-xs leading-5 text-[var(--wire-color-muted)]">classic, snow, distortion, wave</p>
<p class="text-xs leading-5 text-[var(--wrn-color-muted)]">classic, snow, distortion, wave</p>
<Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="number" action="style-allowed-pool" imageStyle="random" allowedStyles="classic,snow,distortion,wave" disturbance="50" size="compact" showListen="false" />
</article>
<article class="rounded-xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] p-4">
<article 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">Excluded styles</h3>
<p class="text-xs leading-5 text-[var(--wire-color-muted)]">Excludes collision, split, split2, and broken-lines</p>
<p class="text-xs leading-5 text-[var(--wrn-color-muted)]">Excludes collision, split, split2, and broken-lines</p>
<Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="number" action="style-excluded-pool" imageStyle="random" excludedStyles="collision,split,split2,broken-lines" disturbance="50" size="compact" showListen="false" />
</article>
</div>
@@ -66,28 +66,28 @@ page CaptchaImageStyles {
<section>
<div class="max-w-3xl">
<h2 class="mt-0 text-2xl font-semibold">All concrete renderers</h2>
<p class="text-sm leading-6 text-[var(--wire-color-muted)]">Refresh any card to see a new layout, noise pattern, color treatment, and character distortion while keeping the selected renderer.</p>
<p class="text-sm leading-6 text-[var(--wrn-color-muted)]">Refresh any card to see a new layout, noise pattern, color treatment, and character distortion while keeping the selected renderer.</p>
</div>
<div class="mt-6 grid items-start gap-6 lg:grid-cols-2 xl:grid-cols-3">
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Classic</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-classic" imageStyle="classic" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Collision</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-collision" imageStyle="collision" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Snow</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-snow" imageStyle="snow" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Corrosion</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-corrosion" imageStyle="corrosion" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Spiderweb</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-spiderweb" imageStyle="spiderweb" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Cross shadow</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-cross-shadow" imageStyle="cross-shadow" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Split</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-split" imageStyle="split" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Split 2</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-split2" imageStyle="split2" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Cut</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-cut" imageStyle="cut" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Darts</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-darts" imageStyle="darts" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Distortion</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-distortion" imageStyle="distortion" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Stitch</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-stitch" imageStyle="stitch" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Striped</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-striped" imageStyle="striped" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Wave</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-wave" imageStyle="wave" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Grid noise</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-grid-noise" imageStyle="grid-noise" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Scribble</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-scribble" imageStyle="scribble" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Pixel</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-pixel" imageStyle="pixel" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Broken lines</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-broken-lines" imageStyle="broken-lines" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Classic</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-classic" imageStyle="classic" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Collision</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-collision" imageStyle="collision" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Snow</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-snow" imageStyle="snow" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Corrosion</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-corrosion" imageStyle="corrosion" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Spiderweb</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-spiderweb" imageStyle="spiderweb" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Cross shadow</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-cross-shadow" imageStyle="cross-shadow" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Split</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-split" imageStyle="split" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Split 2</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-split2" imageStyle="split2" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Cut</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-cut" imageStyle="cut" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Darts</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-darts" imageStyle="darts" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Distortion</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-distortion" imageStyle="distortion" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Stitch</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-stitch" imageStyle="stitch" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Striped</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-striped" imageStyle="striped" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Wave</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-wave" imageStyle="wave" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Grid noise</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-grid-noise" imageStyle="grid-noise" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Scribble</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-scribble" imageStyle="scribble" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Pixel</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-pixel" imageStyle="pixel" disturbance="50" size="compact" showListen="false" /></article>
<article class="rounded-2xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4"><h3 class="mt-0 text-base font-semibold">Broken lines</h3><Captcha endpoint="/api/captcha/challenge" verifyEndpoint="/api/captcha/verify" type="alphanumeric" action="style-broken-lines" imageStyle="broken-lines" disturbance="50" size="compact" showListen="false" /></article>
</div>
</section>
</div>
examples/captcha-showcase/app/styles/global.css
+2 -2
View File
@@ -7,7 +7,7 @@ html {
}
body {
margin: 0;
background: var(--wire-color-bg);
color: var(--wire-color-text);
background: var(--wrn-color-bg);
color: var(--wrn-color-text);
font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}