@silverassist/recaptcha

Google reCAPTCHA v3 integration for Next.js applications with Server Actions support.


Features

- ✅ Client Component: RecaptchaWrapper for automatic token generation
- ✅ Server Validation: validateRecaptcha function for Server Actions
- ✅ TypeScript Support: Full type definitions included
- ✅ Next.js Optimized: Works with App Router and Server Actions
- ✅ Auto Token Refresh: Tokens refresh automatically before expiration
- ✅ Graceful Degradation: Works in development without credentials
- ✅ Configurable Thresholds: Custom score thresholds per form
- ✅ Lazy Loading: Optional lazy loading for better performance
- ✅ Singleton Script Loading: Prevents duplicate script loads across multiple forms

Installation

``bash
npm install @silverassist/recaptcha


or

yarn add @silverassist/recaptcha

or

pnpm add @silverassist/recaptcha
`

Setup

$3

1. Go to Google reCAPTCHA Admin
2. Create a new site with reCAPTCHA v3
3. Get your Site Key (public) and Secret Key (private)

$3

`bash


.env.local


NEXT_PUBLIC_RECAPTCHA_SITE_KEY=your_site_key_here
RECAPTCHA_SECRET_KEY=your_secret_key_here
`

Usage

$3

Add RecaptchaWrapper inside your form:

`tsx
"use client";

import { RecaptchaWrapper } from "@silverassist/recaptcha";

export function ContactForm() {
return (





<br /> <button type="submit">Send</button><br /> </form><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Validate the token in your Server Action:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br />"use server";</p><p class="my-3">import { validateRecaptcha, getRecaptchaToken } from "@silverassist/recaptcha/server";</p><p class="my-3">export async function submitForm(formData: FormData) {<br /> // Get and validate reCAPTCHA token<br /> const token = getRecaptchaToken(formData);<br /> const recaptcha = await validateRecaptcha(token, "contact_form");</p><p class="my-3"> if (!recaptcha.success) {<br /> return { success: false, message: recaptcha.error };<br /> }</p><p class="my-3"> // Process form data...<br /> const email = formData.get("email");<br /> const message = formData.get("message");</p><p class="my-3"> // Your form processing logic here</p><p class="my-3"> return { success: true };<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">⚠️ Important: Custom FormData</h2></p><p class="my-3"></code>RecaptchaWrapper<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> injects a <strong>hidden input field</strong> containing the reCAPTCHA token. If your form handler creates a custom </code>FormData<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> object, you must ensure the hidden token is included.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />"use client";</p><p class="my-3">import { RecaptchaWrapper } from "@silverassist/recaptcha";<br />import { submitForm } from "./actions"; // Your server action</p><p class="my-3">export function ContactForm() {<br /> const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {<br /> e.preventDefault();<br /> <br /> // ❌ Creating empty FormData - hidden reCAPTCHA input is NOT included!<br /> const formData = new FormData();<br /> formData.set("email", "user@example.com");<br /> formData.set("message", "Hello");<br /> <br /> await submitForm(formData);<br /> };</p><p class="my-3"> return (<br /> <form onSubmit={handleSubmit}><br /> <RecaptchaWrapper action="contact_form" /><br /> <input name="email" type="email" required /><br /> <textarea name="message" required /><br /> <button type="submit">Send</button><br /> </form><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />"use client";</p><p class="my-3">import { RecaptchaWrapper } from "@silverassist/recaptcha";<br />import { submitForm } from "./actions"; // Your server action</p><p class="my-3">export function ContactForm() {<br /> const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {<br /> e.preventDefault();<br /> <br /> // ✅ Pass form element - captures ALL inputs including hidden reCAPTCHA token<br /> const formData = new FormData(e.currentTarget);<br /> <br /> await submitForm(formData);<br /> };</p><p class="my-3"> return (<br /> <form onSubmit={handleSubmit}><br /> <RecaptchaWrapper action="contact_form" /><br /> <input name="email" type="email" required /><br /> <textarea name="message" required /><br /> <button type="submit">Send</button><br /> </form><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />"use client";</p><p class="my-3">import { RecaptchaWrapper } from "@silverassist/recaptcha";<br />import { submitForm } from "./actions"; // Your server action</p><p class="my-3">export function ContactForm() {<br /> const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {<br /> e.preventDefault();<br /> <br /> // ✅ Start with form element (includes hidden token)<br /> const formData = new FormData(e.currentTarget);<br /> <br /> // Then add/override specific fields<br /> formData.set("customField", "customValue");<br /> formData.set("timestamp", Date.now().toString());<br /> <br /> await submitForm(formData);<br /> };</p><p class="my-3"> return (<br /> <form onSubmit={handleSubmit}><br /> <RecaptchaWrapper action="contact_form" /><br /> <input name="email" type="email" required /><br /> <textarea name="message" required /><br /> <button type="submit">Send</button><br /> </form><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Performance Optimization: Lazy Loading</h2></p><p class="my-3">The </code>lazy<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop enables lazy loading of the reCAPTCHA script, which defers loading until the form becomes visible in the viewport. This significantly improves initial page load performance.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">> <strong>Note</strong>: These metrics are approximate values measured on production websites using Google reCAPTCHA v3. Actual performance improvements will vary based on network conditions, device capabilities, and page complexity.</p><p class="my-3">| Metric | Without Lazy Loading | With Lazy Loading | Improvement |<br />|--------|---------------------|-------------------|-------------|<br />| <strong>Initial JS</strong> | 320KB+ | 0 KB (until visible) | -320KB |<br />| <strong>TBT (Total Blocking Time)</strong> | ~470ms | ~0ms (deferred) | -470ms |<br />| <strong>TTI (Time to Interactive)</strong> | +2-3s | Minimal impact | -2-3s |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Enable lazy loading by adding the </code>lazy<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />"use client";</p><p class="my-3">import { RecaptchaWrapper } from "@silverassist/recaptcha";</p><p class="my-3">export function ContactForm() {<br /> return (<br /> <form action={submitForm}><br /> {/<em> Script loads only when form is near viewport </em>/}<br /> <RecaptchaWrapper action="contact_form" lazy /><br /> <input name="email" type="email" required /><br /> <textarea name="message" required /><br /> <button type="submit">Send</button><br /> </form><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Control when the script loads with the </code>lazyRootMargin<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop (default: </code>"200px"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">):</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />// Load script earlier (400px before entering viewport)<br /><RecaptchaWrapper action="contact_form" lazy lazyRootMargin="400px" /></p><p class="my-3">// Load script later (load only when fully visible)<br /><RecaptchaWrapper action="contact_form" lazy lazyRootMargin="0px" /></p><p class="my-3">// Load with negative margin (load only after scrolling past)<br /><RecaptchaWrapper action="contact_form" lazy lazyRootMargin="-100px" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### 1. Use lazy loading for below-the-fold forms</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />// Hero form (above the fold) - load immediately<br /><RecaptchaWrapper action="hero_signup" /></p><p class="my-3">// Footer form (below the fold) - lazy load<br /><RecaptchaWrapper action="footer_contact" lazy /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### 2. Multiple forms on the same page</p><p class="my-3">The package automatically uses singleton script loading, so the script is only loaded once even with multiple forms:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />export function MultiFormPage() {<br /> return (<br /> <><br /> {/<em> First form triggers script load </em>/}<br /> <RecaptchaWrapper action="newsletter" lazy /><br /> <br /> {/<em> Second form reuses the same script </em>/}<br /> <RecaptchaWrapper action="contact" lazy /><br /> <br /> {/<em> Third form also reuses the script </em>/}<br /> <RecaptchaWrapper action="feedback" lazy /><br /> </><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### 3. Adjust root margin based on form position</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />// Form near top - smaller margin for faster load<br /><RecaptchaWrapper action="signup" lazy lazyRootMargin="100px" /></p><p class="my-3">// Form far down page - larger margin to load in advance<br /><RecaptchaWrapper action="newsletter" lazy lazyRootMargin="500px" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">API Reference</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Client component that loads reCAPTCHA and generates tokens.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><RecaptchaWrapper<br /> action="contact_form" // Required: action name for analytics<br /> inputName="recaptchaToken" // Optional: hidden input name (default: "recaptchaToken")<br /> inputId="recaptcha-token" // Optional: hidden input id<br /> siteKey="..." // Optional: override env variable<br /> refreshInterval={90000} // Optional: token refresh interval in ms (default: 90000)<br /> onTokenGenerated={(token) => {}} // Optional: callback when token is generated<br /> onError={(error) => {}} // Optional: callback on error<br /> lazy={false} // Optional: enable lazy loading (default: false)<br /> lazyRootMargin="200px" // Optional: IntersectionObserver rootMargin (default: "200px")<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Props</p><p class="my-3">| Prop | Type | Default | Description |<br />|------|------|---------|-------------|<br />| </code>action<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required</strong> | Action name for reCAPTCHA analytics (e.g., "contact_form", "signup") |<br />| </code>inputName<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>"recaptchaToken"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Name attribute for the hidden input field |<br />| </code>inputId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>"recaptcha-token"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ID attribute for the hidden input field |<br />| </code>siteKey<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Override the site key from environment variable |<br />| </code>refreshInterval<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>90000<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Token refresh interval in milliseconds (90 seconds) |<br />| </code>onTokenGenerated<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>(token: string) => void<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Callback invoked when a new token is generated |<br />| </code>onError<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>(error: Error) => void<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Callback invoked when an error occurs |<br />| </code>lazy<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Enable lazy loading to defer script until form is visible |<br />| </code>lazyRootMargin<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>"200px"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | IntersectionObserver rootMargin (used when </code>lazy<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is true) |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Server-side token validation function.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br />const result = await validateRecaptcha(<br /> token, // Token from form<br /> "contact_form", // Expected action (optional)<br /> {<br /> scoreThreshold: 0.5, // Minimum score (default: 0.5)<br /> secretKey: "...", // Override env variable<br /> debug: true, // Enable debug logging<br /> }<br />);</p><p class="my-3">// Result type:<br />// {<br />// success: boolean,<br />// score: number,<br />// error?: string,<br />// skipped?: boolean,<br />// rawResponse?: RecaptchaVerifyResponse<br />// }<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Check if reCAPTCHA is configured.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br />import { isRecaptchaEnabled } from "@silverassist/recaptcha/server";</p><p class="my-3">if (isRecaptchaEnabled()) {<br /> // Validate token<br />} else {<br /> // Skip validation (development)<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Extract token from FormData.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br />import { getRecaptchaToken } from "@silverassist/recaptcha/server";</p><p class="my-3">const token = getRecaptchaToken(formData);<br />const token = getRecaptchaToken(formData, "customFieldName");<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Score Thresholds</h2></p><p class="my-3">reCAPTCHA v3 returns a score from 0.0 to 1.0:</p><p class="my-3">| Score | Meaning |<br />|-------|---------|<br />| 1.0 | Very likely human |<br />| 0.7+ | Likely human |<br />| 0.5 | Default threshold |<br />| 0.3- | Suspicious |<br />| 0.0 | Very likely bot |</p><p class="my-3">Adjust threshold based on form sensitivity:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br />// Standard forms<br />await validateRecaptcha(token, "contact", { scoreThreshold: 0.5 });</p><p class="my-3">// Sensitive forms (payments, account creation)<br />await validateRecaptcha(token, "payment", { scoreThreshold: 0.7 });</p><p class="my-3">// Low-risk forms (newsletter signup)<br />await validateRecaptcha(token, "newsletter", { scoreThreshold: 0.3 });<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Subpath Imports</h2></p><p class="my-3">You can import from specific subpaths for better tree-shaking:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br />// Main exports (client + server + types)<br />import { RecaptchaWrapper, validateRecaptcha } from "@silverassist/recaptcha";</p><p class="my-3">// Client only<br />import { RecaptchaWrapper } from "@silverassist/recaptcha/client";</p><p class="my-3">// Server only<br />import { validateRecaptcha, getRecaptchaToken, isRecaptchaEnabled } from "@silverassist/recaptcha/server";</p><p class="my-3">// Types only<br />import type { RecaptchaValidationResult, RecaptchaWrapperProps } from "@silverassist/recaptcha/types";</p><p class="my-3">// Constants only<br />import { DEFAULT_SCORE_THRESHOLD, RECAPTCHA_CONFIG } from "@silverassist/recaptcha/constants";<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Development</h2></p><p class="my-3">In development, when </code>RECAPTCHA_SECRET_KEY<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is not set, validation is skipped and forms work normally. This allows testing without reCAPTCHA credentials.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br />const result = await validateRecaptcha(token, "test");<br />// Returns: { success: true, score: 1, skipped: true }<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">TypeScript</h2></p><p class="my-3">Full TypeScript support with exported types:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br />import type {<br /> RecaptchaWrapperProps,<br /> RecaptchaValidationResult,<br /> RecaptchaVerifyResponse,<br /> RecaptchaConfig,<br /> RecaptchaValidationOptions,<br />} from "@silverassist/recaptcha";<br /></code>``</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3"><a href="LICENSE" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Polyform Noncommercial License 1.0.0</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Links</h2></p><p class="my-3">- <a href="https://github.com/SilverAssist/recaptcha" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">GitHub Repository</a><br />- <a href="https://www.npmjs.com/package/@silverassist/recaptcha" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">npm Package</a><br />- <a href="https://developers.google.com/recaptcha/docs/v3" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Google reCAPTCHA v3 Documentation</a><br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2c:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2d:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\u003e=18.0.0\"}]\n"])</script><script>self.__next_f.push([1,"2e:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":15}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@silverassist/copilot-prompts-kit\",{\"href\":\"/package/%40silverassist%2Fcopilot-prompts-kit\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@silverassist/copilot-prompts-kit\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.2.0\"}]]}],[\"$\",\"$L5\",\"@testing-library/jest-dom\",{\"href\":\"/package/%40testing-library%2Fjest-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@testing-library/jest-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.9.1\"}]]}],[\"$\",\"$L5\",\"@testing-library/react\",{\"href\":\"/package/%40testing-library%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L30\",\"$undefined\"]}],\"@testing-library/react\"]}],\"$L31\"]}],\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"30:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n31:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.3.2\"}]\n32:[\"$\",\"$L5\",\"@types/jest\",{\"href\":\"/package/%40types%2Fjest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/jest\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^30.0.0\"}]]}]\n33:[\"$\",\"$L5\",\"@types/node\",{\"href\":\"/package/%40types%2Fnode\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/node\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^25.0.10\"}]]}]\n34:[\"$\",\"$L5\",\"@types/react\",{\"href\":\"/package/%40types%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.2.9\"}]]}]\n35:[\"$\",\"$L5\",\"@types/react-dom\",{\"href\":\"/package/%40types%2Freact-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.2.3\"}]]}]\n36:[\"$\",\"$L5\",\"jest\",{\"href\":\"/package/jest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevr"])</script><script>self.__next_f.push([1,"on-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jest\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^30.2.0\"}]]}]\n37:[\"$\",\"$L5\",\"jest-environment-jsdom\",{\"href\":\"/package/jest-environment-jsdom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jest-environment-jsdom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^30.2.0\"}]]}]\n38:[\"$\",\"$L5\",\"next\",{\"href\":\"/package/next\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"next\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.1.5\"}]]}]\n39:[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.2.4\"}]]}]\n3a:[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.2.4\"}]]}]\n3b:[\"$\",\"$L5\",\"ts-jest\",{\"href\":\"/package/ts-jest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWid"])</script><script>self.__next_f.push([1,"th\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"ts-jest\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^29.4.6\"}]]}]\n3c:[\"$\",\"$L5\",\"tsup\",{\"href\":\"/package/tsup\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tsup\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.5.1\"}]]}]\n3d:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.9.3\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>