docs: add Next.js documentation and landing page

docs/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

docs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

docs/components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

docs/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

docs/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

docs/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "docs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.34.3",
+    "lucide-react": "^0.562.0",
+    "next": "16.1.6",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "shiki": "^4.0.0",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "postcss": "^8.5.6",
+    "shadcn": "^3.6.3",
+    "tailwindcss": "^4.1.18",
+    "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}

docs/postcss.config.mjs

@@ -0,0 +1,8 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+    "autoprefixer": {},
+  },
+};
+
+export default config;

docs/src/app/docs/how-it-works/page.tsx

@@ -0,0 +1,92 @@
+import { DocsPagination } from "@/components/DocsPagination";
+import { Cpu, Shield, FileCode2 } from "lucide-react";
+import { Card } from "@/components/ui/card";
+
+export default function HowItWorksPage() {
+  return (
+    <div className="prose prose-invert prose-zinc max-w-4xl font-body">
+      <h1 className="font-display tracking-tighter">How It Works</h1>
+      <p className="text-xl text-muted-foreground font-light leading-relaxed">
+        Secure Input changes the paradigm of form handling by ensuring the raw text value never exists in the main thread's React state or the DOM in a way that is easily scannable by external scripts.
+      </p>
+
+      <hr className="border-white/10 my-8" />
+
+      <h2 className="font-display">The Architecture Flow</h2>
+
+      <ol className="mt-8 space-y-6 list-none pl-0">
+        <li className="relative">
+          <div className="absolute left-0 top-0 flex h-6 w-6 items-center justify-center rounded-full bg-white/10 font-display text-xs font-bold">1</div>
+          <div className="ml-10">
+            <strong className="text-white block mb-1">Keystroke Capture</strong>
+            As the user types, each keystroke is intercepted immediately at the input level before typical React or Vanilla JS state updates occur.
+          </div>
+        </li>
+        <li className="relative">
+          <div className="absolute left-0 top-0 flex h-6 w-6 items-center justify-center rounded-full bg-white/10 font-display text-xs font-bold">2</div>
+          <div className="ml-10">
+            <strong className="text-white block mb-1">Worker Isolation</strong>
+            The plain text is sent to an isolated Web Worker. This means the sensitive processing occurs completely off the main thread, making it invisible to extensions inspecting the standard DOM or window object.
+          </div>
+        </li>
+        <li className="relative">
+          <div className="absolute left-0 top-0 flex h-6 w-6 items-center justify-center rounded-full bg-white/10 font-display text-xs font-bold text-accent">3</div>
+          <div className="ml-10">
+            <strong className="text-accent block mb-1">WASM Encryption</strong>
+            Inside the worker, a highly optimized, Rust-compiled WebAssembly module uses ChaCha20Poly1305 to instantly encrypt the payload.
+          </div>
+        </li>
+        <li className="relative">
+          <div className="absolute left-0 top-0 flex h-6 w-6 items-center justify-center rounded-full bg-white/10 font-display text-xs font-bold">4</div>
+          <div className="ml-10">
+            <strong className="text-white block mb-1">Safe Output</strong>
+            The main thread only ever receives and holds the <em>encrypted ciphertext</em>. The plain text never touches the form's `value` attribute or the generic component state.
+          </div>
+        </li>
+      </ol>
+
+      <h2 className="font-display mt-16">The Three Packages</h2>
+      <p>
+        The project is broken down into three modular packages to keep bundle sizes incredibly small:
+      </p>
+
+      <div className="grid md:grid-cols-3 gap-4 not-prose mt-8">
+        <Card className="p-6 rounded-none border-white/10 bg-card hover:border-accent/50 transition-colors tech-border h-full">
+          <FileCode2 className="w-6 h-6 mb-4 text-accent" />
+          <h3 className="font-display font-bold text-lg mb-2">@secure-input/core</h3>
+          <p className="text-muted-foreground text-xs leading-relaxed">
+            The framework-agnostic engine that manages the Web Worker and encryption lifecycle. Use this in Vanilla JS or other frameworks.
+          </p>
+        </Card>
+
+        <Card className="p-6 rounded-none border-white/10 bg-card hover:border-accent/50 transition-colors tech-border h-full">
+          <Cpu className="w-6 h-6 mb-4 text-accent" />
+          <h3 className="font-display font-bold text-lg mb-2">@secure-input/react</h3>
+          <p className="text-muted-foreground text-xs leading-relaxed">
+            Lightweight hooks and components wrapping the core for seamless React and Next.js integration.
+          </p>
+        </Card>
+
+        <Card className="p-6 rounded-none border-white/10 bg-card hover:border-accent/50 transition-colors tech-border h-full">
+          <Shield className="w-6 h-6 mb-4 text-accent" />
+          <h3 className="font-display font-bold text-lg mb-2">@secure-input/wasm</h3>
+          <p className="text-muted-foreground text-xs leading-relaxed">
+            The raw ChaCha20 encryption module. (You typically do not interact with this directly, it's used internally).
+          </p>
+        </Card>
+      </div>
+
+      <div className="my-16 rounded-none border-l-4 border-accent bg-accent/5 p-6 text-sm">
+        <h4 className="mt-0 font-display font-bold text-accent uppercase tracking-widest text-xs mb-2">Security Notice</h4>
+        <p className="mb-0 text-muted-foreground">
+          This library provides <strong>obfuscation</strong>, not absolute security. It raises the bar significantly against automated scrapers and basic extensions, making it annoying enough that standard bots fail. However, determined attackers with reverse-engineering skills, network traffic inspectors, or low-level OS keyloggers can still extract data. <strong>Always implement server-side validation and rate limiting.</strong>
+        </p>
+      </div>
+
+      <DocsPagination 
+        prev={{ href: "/docs", title: "Introduction" }}
+        next={{ href: "/docs/installation", title: "Installation" }}
+      />
+    </div>
+  );
+}

docs/src/app/docs/installation/page.tsx

@@ -0,0 +1,69 @@
+import { CodeBlock } from "@/components/CodeBlock";
+import { PackageManagerCode } from "@/components/PackageManagerCode";
+import { DocsPagination } from "@/components/DocsPagination";
+
+export default function InstallationPage() {
+  return (
+    <div className="prose prose-invert prose-zinc max-w-4xl font-body">
+      <h1 className="font-display tracking-tighter">Installation</h1>
+      <p className="text-xl text-muted-foreground font-light leading-relaxed">
+        Choose the package that fits your technology stack. Secure Input is built to be modular so you only ship what you need.
+      </p>
+
+      <hr className="border-white/10 my-8" />
+
+      <h2 className="font-display">React / Next.js</h2>
+      <p>
+        If you are using React, you should install the <code>@secure-input/react</code> package. This package automatically includes the core logic and provides easy-to-use hooks and drop-in components.
+      </p>
+
+      <PackageManagerCode packageName="@secure-input/react" />
+
+      <h2 className="font-display mt-12">Vanilla JavaScript / Other Frameworks</h2>
+      <p>
+        If you are using Vue, Svelte, Angular, or plain HTML/JS, you should install the framework-agnostic <code>@secure-input/core</code> package.
+      </p>
+
+      <PackageManagerCode packageName="@secure-input/core" />
+
+      <h2 className="font-display mt-12">Bundle Sizes</h2>
+      <p>
+        The library is highly optimized for performance and minimal network impact. WebAssembly and Web Worker files are lazy-loaded dynamically.
+      </p>
+
+      <div className="overflow-x-auto my-8">
+        <table className="w-full text-sm text-left">
+          <thead className="text-xs uppercase bg-[#121212] border border-white/10 font-display">
+            <tr>
+              <th className="px-6 py-4 font-bold border-r border-white/10">Package</th>
+              <th className="px-6 py-4 font-bold border-r border-white/10">Environment</th>
+              <th className="px-6 py-4 font-bold">Gzipped Size</th>
+            </tr>
+          </thead>
+          <tbody className="border border-white/10 bg-black/50">
+            <tr className="border-b border-white/10">
+              <td className="px-6 py-4 border-r border-white/10"><code className="bg-transparent p-0 text-accent">@secure-input/react</code></td>
+              <td className="px-6 py-4 border-r border-white/10 text-muted-foreground">Client (React)</td>
+              <td className="px-6 py-4">~5KB</td>
+            </tr>
+            <tr className="border-b border-white/10">
+              <td className="px-6 py-4 border-r border-white/10"><code className="bg-transparent p-0 text-accent">@secure-input/core</code></td>
+              <td className="px-6 py-4 border-r border-white/10 text-muted-foreground">Client (Vanilla JS)</td>
+              <td className="px-6 py-4">~15KB</td>
+            </tr>
+            <tr>
+              <td className="px-6 py-4 border-r border-white/10"><code className="bg-transparent p-0 text-accent">@secure-input/wasm</code></td>
+              <td className="px-6 py-4 border-r border-white/10 text-muted-foreground">Worker Thread</td>
+              <td className="px-6 py-4">~10KB</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <DocsPagination 
+        prev={{ href: "/docs/how-it-works", title: "How It Works" }}
+        next={{ href: "/docs/react", title: "React Implementation" }}
+      />
+    </div>
+  );
+}