authica 1.2.0 → 2.0.0

package/README.md

@@ -1,11 +1,11 @@
 <div align="center">
 
-# ⚡ authica
+# ⚡authica 🔏
 
 **Zero-config CLI that inspects your design tokens and injects polished, animated authentication routes into React & Next.js apps in seconds.**
 
-[![npm version](https://img.shields.io/npm/v/authica.svg?style=for-the-badge&color=8B5CF6&labelColor=0F172A)](https://www.npmjs.com/package/authica)
-[![npm downloads](https://img.shields.io/npm/dm/authica.svg?style=for-the-badge&color=3B82F6&labelColor=0F172A)](https://www.npmjs.com/package/authica)
+[![npm version](https://img.shields.io/npm/v/authica?style=for-the-badge&color=8B5CF6&labelColor=0F172A)](https://www.npmjs.com/package/authica)
+[![npm total downloads](https://img.shields.io/npm/dt/authica?style=for-the-badge&color=3B82F6&labelColor=0F172A)](https://www.npmjs.com/package/authica)
 [![License: MIT](https://img.shields.io/badge/License-MIT-10B981.svg?style=for-the-badge&labelColor=0F172A)](https://opensource.org/licenses/MIT)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-EC4899.svg?style=for-the-badge&labelColor=0F172A)](http://makeapullrequest.com)
 
@@ -20,7 +20,7 @@
 
 ```
 ┌─────────────────────────────────────────────────────────────────────────────┐
-│ ⚡ authica v1.2.0                                                             │
+│ ⚡ authica v2.0.0                                                             │
 ├─────────────────────────────────────────────────────────────────────────────┤
 │                                                                             │
 │  ? Global CSS path? (src/index.css)                                         │
@@ -47,6 +47,7 @@
 * **🎨 5 Layout Frameworks:** Choose between `split`, `centered`, `canvas`, `modal`, and `glass`.
 * **✨ 3 Aesthetic Presets:** Toggle between `default` (Shadcn-esque), `brutalist` (hard shadows, 2px borders), and `glassmorphism` (frosted blur).
 * **🔑 Pure Inline SVG OAuth:** Built-in crisp vector logos for **Google**, **GitHub**, **Apple**, **Discord**, and **Facebook**—no extra icon packages required.
+* **🧪 Opt-in tooling:** AST route insertion with regex fallback, an advisory token-storage scan, Next.js middleware starters, and an isolated local preview studio.
 
 
 
@@ -98,6 +99,27 @@ Skip prompts by passing flags directly:
 | **Supabase** | `--auth=supabase` | `@supabase/supabase-js` client initialization, `signInWithPassword`, `signUp`, and OAuth redirects. |
 | **Clerk** | `--auth=clerk` | `@clerk/react` or `@clerk/nextjs` hooks, auto-created `/sso-callback` redirect route. |
 | **Next-Auth** | `--auth=next-auth` | `signIn("credentials")` and provider mapping for Auth.js. |
+| **WebAuthn starter** | `--auth=webauthn` | Adds passkey sign-in/registration browser calls; requires your own verified server endpoints and credential storage. |
+
+### Opt-in developer tools
+
+These features do not change the default `npx authica` generation path:
+
+```sh
+npx authica --ast-inject --yes
+npx authica --auth=clerk --middleware --yes
+npx authica --scan-security --yes
+npx authica audit
+npx authica preview
+```
+
+* `--ast-inject` enables Recast/Babel route edits for Vite + React Router. If parsing fails, Authica tries its legacy injector; if it cannot place the route safely, it prints manual steps and leaves the router untouched. Next.js uses file-system routes, so there is no entry file to edit.
+* `--middleware` is Next.js-only and requires `--auth=supabase`, `--auth=clerk`, or `--auth=next-auth`. It protects `/dashboard`; existing middleware is backed up when `--force` is used. Supabase middleware also needs `@supabase/ssr`; NextAuth config should set `pages.signIn` to `/login` too.
+* `--scan-security` and `authica audit` perform a read-only heuristic scan for likely auth-token writes to `localStorage`. Findings are advisory and may be incomplete.
+* `--auth=webauthn` installs `@simplewebauthn/browser` in the target app unless `--no-install` is passed. Implement POST `/api/generate-options` and `/api/verify` on the server, including per-session challenge storage, origin/RP validation, credential persistence, and mode-aware registration/authentication verification. This starter is not a complete authentication backend and does not configure OAuth.
+* `authica preview` serves a local-only visual preview at `http://localhost:4321`; it does not install dependencies or write to the project.
+
+The CLI also accepts the existing `--layout`, `--style`, `--auth`, `--providers`, `--css`, and `--yes` options in non-interactive use. The Web Studio reference is [authica.dev](https://authica.dev).
 
 
 ## ⚙️ Configuration (`.authicarc`)
@@ -128,4 +150,3 @@ Distributed under the MIT License. See [`LICENSE`](https://www.google.com/search
 Made with ❤️ by [Sachin Mehta](https://github.com/AEGON247)
 
 [★ Star on GitHub](https://www.google.com/search?q=https://github.com/AEGON247/authica)
-

package/bin/ast-tools.js

@@ -0,0 +1,193 @@
+import fs from "node:fs";
+import path from "node:path";
+import babelParser from "@babel/parser";
+import recast from "recast";
+import recastBabelTsParser from "recast/parsers/babel-ts.js";
+
+const traverse = (node, visit) => {
+  if (!node || typeof node !== "object") return;
+  if (Array.isArray(node)) {
+    for (const item of node) traverse(item, visit);
+    return;
+  }
+  if (typeof node.type === "string") visit(node);
+  for (const [key, value] of Object.entries(node)) {
+    if (key !== "loc" && key !== "tokens" && key !== "comments" && key !== "extra") traverse(value, visit);
+  }
+};
+
+export function insertViteRoute(source, importPath, routerPackage = "react-router-dom") {
+  const ast = recast.parse(source, { parser: recastBabelTsParser });
+  const lineStarts = [0];
+  for (let i = 0; i < source.length; i++) if (source[i] === "\n") lineStarts.push(i + 1);
+  const offset = (position) => lineStarts[position.line - 1] + position.column;
+  let routeContainer = null;
+  let routeKind = "";
+  let hasLogin = false;
+  let hasRouteImport = false;
+
+  traverse(ast, (node) => {
+    if (node.type === "ImportDeclaration" && node.source.value === routerPackage) {
+      hasRouteImport ||= node.specifiers.some((specifier) =>
+        specifier.type === "ImportSpecifier" &&
+        (specifier.imported.name ?? specifier.imported.value) === "Route" &&
+        specifier.local.name === "Route",
+      );
+    }
+    if (node.type === "JSXElement" && node.openingElement.name.type === "JSXIdentifier") {
+      if (node.openingElement.name.name === "Route") {
+        const pathAttr = node.openingElement.attributes.find((a) => a.type === "JSXAttribute" && a.name.name === "path");
+        if (pathAttr?.value?.value === "/login") hasLogin = true;
+      }
+      if (node.openingElement.name.name === "Routes") {
+        routeContainer = node;
+        routeKind = "jsx";
+      }
+    }
+    if (node.type === "CallExpression" && node.callee.type === "Identifier" && /create(?:Browser|Hash|Memory)Router/.test(node.callee.name)) {
+      if (node.arguments[0]?.type === "ArrayExpression" && !routeContainer) {
+        routeContainer = node.arguments[0];
+        routeKind = "object";
+      }
+    }
+  });
+
+  if (!routeContainer) throw new Error("No supported <Routes> or create*Router([...]) route container found.");
+  if (routeKind === "object") {
+    hasLogin = routeContainer.elements.some((entry) => entry.type === "ObjectExpression" &&
+      entry.properties.some((property) => property.type === "ObjectProperty" &&
+        (property.key.name ?? property.key.value) === "path" &&
+        property.value.type === "StringLiteral" && property.value.value === "/login"));
+  }
+  if (hasLogin) return { code: source, alreadyWired: true };
+
+  const edits = [];
+  let routeSnippet;
+  if (routeKind === "jsx") {
+    routeSnippet = '<Route path="/login" element={<Authica />} />';
+    if (routeContainer.openingElement.selfClosing) {
+      const openingEnd = offset(routeContainer.openingElement.loc.end);
+      edits.push({
+        start: openingEnd - 2,
+        end: openingEnd,
+        text: `>${routeSnippet}</${routeContainer.openingElement.name.name}>`,
+      });
+    } else {
+      const closeStart = offset(routeContainer.closingElement.loc.start);
+      const lineStart = source.lastIndexOf("\n", closeStart) + 1;
+      const closeIndent = source.slice(lineStart, closeStart);
+      if (closeIndent.trim() === "") {
+        edits.push({ start: lineStart, end: lineStart, text: `${closeIndent}  ${routeSnippet}\n` });
+      } else {
+        const openLineStart = source.lastIndexOf("\n", routeContainer.openingElement.start) + 1;
+        const indent = source.slice(openLineStart, routeContainer.openingElement.start).match(/^[\t ]*/)?.[0] ?? "";
+        edits.push({ start: closeStart, end: closeStart, text: `\n${indent}  ${routeSnippet}\n${indent}` });
+      }
+    }
+  } else {
+    routeSnippet = '{ path: "/login", element: <Authica /> }';
+    const close = offset(routeContainer.loc.end) - 1;
+    if (routeContainer.elements.length) {
+      const last = routeContainer.elements.at(-1);
+      const lastStart = offset(last.loc.start);
+      const lastEnd = offset(last.loc.end);
+      const lastLineStart = source.lastIndexOf("\n", lastStart) + 1;
+      const indent = source.slice(lastLineStart, lastStart).match(/^[\t ]*/)?.[0] ?? "  ";
+      const comma = source.indexOf(",", lastEnd);
+      if (comma >= 0 && comma < close) {
+        edits.push({ start: comma + 1, end: comma + 1, text: `\n${indent}${routeSnippet},` });
+      } else {
+        edits.push({ start: lastEnd, end: lastEnd, text: `,\n${indent}${routeSnippet}` });
+      }
+    } else {
+      const open = offset(routeContainer.loc.start);
+      const lineStart = source.lastIndexOf("\n", open) + 1;
+      const baseIndent = source.slice(lineStart, open).match(/^[\t ]*/)?.[0] ?? "";
+      edits.push({ start: open + 1, end: open + 1, text: `\n${baseIndent}  ${routeSnippet}\n${baseIndent}` });
+    }
+  }
+
+  const lastImport = [...ast.program.body].reverse().find((node) => node.type === "ImportDeclaration");
+  const importPos = lastImport ? offset(lastImport.loc.end) : 0;
+  const importText = `${lastImport ? "\n" : ""}import Authica from ${JSON.stringify(importPath)};${routeKind === "jsx" && !hasRouteImport ? `\nimport { Route } from "${routerPackage}";` : ""}\n`;
+  edits.push({ start: importPos, end: importPos, text: importText });
+  let code = source;
+  for (const edit of edits.sort((a, b) => b.start - a.start)) {
+    code = code.slice(0, edit.start) + edit.text + code.slice(edit.end);
+  }
+  return { code, alreadyWired: false };
+}
+
+const sourceExtensions = new Set([".js", ".jsx", ".mjs", ".cjs", ".ts", ".tsx", ".mts", ".cts"]);
+const ignoredDirectories = new Set([
+  "node_modules", ".git", ".next", ".turbo", ".vercel", ".cache", "dist", "build", "out", "coverage",
+  "vendor", "storybook-static", "test-results", "playwright-report",
+]);
+const tokenKey = /(?:token|auth|session|jwt|access|refresh)/i;
+
+function sourceFiles(root) {
+  const found = [];
+  const errors = [];
+  const walk = (dir) => {
+    let entries;
+    try {
+      entries = fs.readdirSync(dir, { withFileTypes: true });
+    } catch (error) {
+      errors.push(`${path.relative(root, dir) || "."}: ${error.message}`);
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.isDirectory()) {
+        if (!ignoredDirectories.has(entry.name)) walk(path.join(dir, entry.name));
+      } else if (sourceExtensions.has(path.extname(entry.name))) {
+        found.push(path.join(dir, entry.name));
+      }
+    }
+  };
+  walk(root);
+  return { files: found, errors };
+}
+
+export function scanLocalStorage(root) {
+  const findings = [];
+  const { files, errors } = sourceFiles(root);
+  for (const file of files) {
+    let ast;
+    try {
+      ast = babelParser.parse(fs.readFileSync(file, "utf8"), {
+        sourceType: "unambiguous",
+        plugins: ["jsx", "typescript", "decorators-legacy", "importAttributes"],
+      });
+    } catch (error) {
+      errors.push(`${path.relative(root, file)}: ${error.message}`);
+      continue;
+    }
+    traverse(ast, (node) => {
+      if (node.type !== "CallExpression" || node.callee.type !== "MemberExpression") return;
+      const { object, property, computed } = node.callee;
+      const member = computed ? node.callee.property.value : property.name;
+      if (object.type !== "Identifier" || object.name !== "localStorage" || member !== "setItem") return;
+      const key = node.arguments[0];
+      if (key && (key.type === "StringLiteral" || key.type === "TemplateLiteral") && tokenKey.test(key.value ?? key.quasis?.[0]?.value?.cooked ?? "")) {
+        findings.push({ file: path.relative(root, file), line: node.loc?.start.line ?? 1, key: key.value ?? key.quasis[0].value.cooked });
+      }
+    });
+  }
+  return { findings, errors };
+}
+
+export function printAudit(root) {
+  const { findings, errors } = scanLocalStorage(root);
+  console.log("\nAuthica advisory security scan (read-only)");
+  if (!findings.length) console.log("No likely auth-token localStorage writes found.");
+  for (const finding of findings) {
+    console.warn(`⚠ ${finding.file}:${finding.line} stores "${finding.key}" in localStorage. Consider a server-managed, httpOnly cookie where appropriate.`);
+  }
+  if (errors.length) {
+    console.warn(`Skipped ${errors.length} file(s) or directories that could not be read or parsed; findings may be incomplete.`);
+    for (const error of errors.slice(0, 10)) console.warn(`  ${error}`);
+    if (errors.length > 10) console.warn(`  ...and ${errors.length - 10} more.`);
+  }
+  console.log("This heuristic scan is advisory and does not prove a vulnerability or guarantee coverage.");
+  return findings.length;
+}

package/bin/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import fs from "node:fs";
 import path from "node:path";
-import { spawnSync } from "node:child_process";
+import { spawn, spawnSync } from "node:child_process";
 import { fileURLToPath } from "node:url";
 import readline from "node:readline/promises";
 
@@ -9,6 +9,14 @@ const args = process.argv.slice(2);
 const created = [], modified = [], steps = [];
 let themeNote = "", rcNote = "", extraRoutes = [];
 const flag = (n) => args.includes(`--${n}`);
+const cliPackage = JSON.parse(fs.readFileSync(new URL("../package.json", import.meta.url), "utf8"));
+const cliVersion = cliPackage.version;
+if (args[0] === "preview") {
+  await import("./preview.js");
+} else if (args[0] === "audit") {
+  const { printAudit } = await import("./ast-tools.js");
+  printAudit(process.cwd());
+} else {
 let rc = {};
 const hasOpt = (n) => args.some((a) => a.startsWith(`--${n}=`)) || rc[n] !== undefined;
 const opt = (n, d) => {
@@ -18,13 +26,49 @@ const opt = (n, d) => {
   return v === undefined ? d : Array.isArray(v) ? v.join(",") : String(v);
 };
 if (flag("help") || flag("h")) {
-  console.log("Usage: npx authica [--auth=none|supabase|next-auth|clerk] [--layout=split|centered|canvas|modal|glass] [--hero=<path|url>] [--providers=google,github,...] [--style=default|brutalist|glassmorphism] [--otp|--magic-link] [--css=<file>] [--entry=<file>] [--no-name] [--confirm] [--no-social] [--yes] [--force] [--no-install]");
+  const c = {
+    reset: "\u001b[0m",
+    violet: "\u001b[38;5;141m",
+    cyan: "\u001b[36m",
+    green: "\u001b[32m",
+    yellow: "\u001b[33m",
+    muted: "\u001b[90m",
+    bold: "\u001b[1m",
+  };
+  const heading = (text) => `${c.violet}${c.bold}${text}${c.reset}`;
+  console.log(`${c.violet}${c.bold}  ⚡ AUTHICA${c.reset} ${c.muted}Authentication UI generator${c.reset}`);
+  console.log(`  ${c.cyan}[ NPM v${cliVersion} ]${c.reset}  ${c.green}[ License: ${cliPackage.license} ]${c.reset}\n`);
+  console.log(`${heading("USAGE")}`);
+  console.log("  npx authica [options]\n");
+  console.log(`${heading("SUBCOMMANDS")}`);
+  console.log(`  ${c.yellow}authica audit${c.reset}       Advisory AppSec scan for likely auth tokens in localStorage`);
+  console.log(`  ${c.yellow}authica preview${c.reset}     Open the local visual studio at http://localhost:4321\n`);
+  console.log(`${heading("GENERATOR FLAGS")}`);
+  console.log("  --layout=<name>       split | centered | canvas | modal | glass");
+  console.log("  --style=<name>        default | brutalist | glassmorphism");
+  console.log("  --auth=<provider>     none | supabase | next-auth | clerk | webauthn");
+  console.log("  --providers=<list>    Comma-separated OAuth providers");
+  console.log("  --css=<file>          Global CSS file used for theme tokens");
+  console.log("  --ast-inject          Opt in to AST route insertion (Vite + React Router)");
+  console.log("  --middleware          Opt in to Next.js provider middleware generation");
+  console.log("  --scan-security       Run the advisory scan before generation");
+  console.log("  --force               Overwrite generated files (keeps backups)");
+  console.log("  --yes --no-install    Skip prompts and dependency installation\n");
+  console.log(`${heading("QUICKSTART EXAMPLES")} ${c.muted}(bash)${c.reset}`);
+  console.log(`  ${c.green}npx authica${c.reset}`);
+  console.log(`  ${c.green}npx authica --layout=glass --style=brutalist --auth=supabase --providers=google,github --yes${c.reset}`);
+  console.log(`  ${c.green}npx authica --auth=clerk --middleware --ast-inject --yes${c.reset}`);
   process.exit(0);
 }
 const fail = (m) => { console.error(`✖ ${m}`); process.exit(1); };
 const cwd = process.cwd();
 const p = (...x) => path.join(cwd, ...x);
 const ex = (f) => fs.existsSync(p(f));
+const enabled = (name) => {
+  const configName = { "ast-inject": "astInject", "scan-security": "scanSecurity" }[name] || name;
+  return flag(name) || rc[configName] === true || opt(name, "false") === "true";
+};
+console.log(`authica v${cliVersion} · Web Studio: https://authica.dev`);
 
 // ---- team config (.authicarc / .authicarc.json); CLI flags win over it
 const rcFile = [".authicarc", ".authicarc.json"].find(ex);
@@ -32,13 +76,13 @@ if (rcFile) {
   try { rc = JSON.parse(fs.readFileSync(p(rcFile), "utf8")); }
   catch (e) { fail(`${rcFile} is not valid JSON: ${e.message}`); }
   if (!rc || typeof rc !== "object" || Array.isArray(rc)) fail(`${rcFile} must contain a JSON object.`);
-  const known = ["auth", "layout", "style", "method", "css", "hero", "entry", "providers", "name", "confirm", "social"];
+  const known = ["auth", "layout", "style", "method", "css", "hero", "entry", "providers", "name", "confirm", "social", "astInject", "middleware", "scanSecurity"];
   const unknown = Object.keys(rc).filter((k) => !known.includes(k));
   if (unknown.length) console.warn(`⚠ ${rcFile}: ignoring unknown keys: ${unknown.join(", ")}`);
   rcNote = rcFile;
 }
 const auth = opt("auth", "none");
-if (!["none", "supabase", "next-auth", "clerk"].includes(auth)) fail(`Unknown auth "${auth}"`);
+if (!["none", "supabase", "next-auth", "clerk", "webauthn"].includes(auth)) fail(`Unknown auth "${auth}"`);
 if (!ex("package.json")) fail("No package.json found. Run this in your project root.");
 const pkg = JSON.parse(fs.readFileSync(p("package.json"), "utf8"));
 const deps = { ...pkg.dependencies, ...pkg.devDependencies };
@@ -46,10 +90,17 @@ const deps = { ...pkg.dependencies, ...pkg.devDependencies };
 // ---- detect stack
 const isNext = !!deps.next;
 const isVite = !isNext && !!deps.vite && !!(deps["react-router-dom"] || deps["react-router"]);
+const routerPackage = deps["react-router-dom"] ? "react-router-dom" : "react-router";
 if (!isNext && !isVite) fail("Unsupported project: need Next.js, or Vite + react-router(-dom).");
 if (!deps.react) fail("React not found in package.json.");
 if (!ex("tsconfig.json")) fail("TypeScript project required (tsconfig.json not found).");
 if (auth === "next-auth" && !isNext) fail("--auth=next-auth requires Next.js.");
+if (enabled("middleware") && !isNext) fail("--middleware requires a Next.js project.");
+if (enabled("middleware") && !["supabase", "clerk", "next-auth"].includes(auth)) fail("--middleware requires --auth=supabase, --auth=clerk, or --auth=next-auth.");
+if (enabled("ast-inject") && isNext) console.log("Next.js App Router uses file-system routes; no route-entry AST edit is needed.");
+if (auth === "webauthn" && (flag("otp") || flag("magic-link") || opt("method", "password") !== "password")) fail("--auth=webauthn cannot be combined with --otp or --magic-link.");
+const middlewareFile = enabled("middleware") ? (ex("src/app") ? "src/middleware.ts" : "middleware.ts") : "";
+if (middlewareFile && ex(middlewareFile) && !flag("force")) fail(`${middlewareFile} already exists. Use --force to overwrite.`);
 
 if (!deps.tailwindcss && !deps["@tailwindcss/vite"] && !deps["@tailwindcss/postcss"])
   console.warn("⚠ Tailwind CSS not detected; using self-contained CSS fallbacks.");
@@ -62,6 +113,33 @@ const askBool = async (q, def) => {
   const a = (await ask(`${q} [y/n]`, def ? "y" : "n")).toLowerCase();
   return a.startsWith("y");
 };
+let studioStarted = false;
+function launchStudio() {
+  if (!studioStarted) {
+    const previewPath = fileURLToPath(new URL("./preview.js", import.meta.url));
+    const child = spawn(process.execPath, [previewPath, "--open"], {
+      detached: true,
+      stdio: "ignore",
+      windowsHide: true,
+    });
+    child.on("error", (error) => console.error(`Could not launch the local visual studio: ${error.message}`));
+    child.unref();
+    studioStarted = true;
+  }
+  console.log("Opening the local visual studio at http://localhost:4321; return here to continue.");
+}
+async function askWithStudio(q, def) {
+  while (true) {
+    const answer = await ask(q, def);
+    if (answer.trim().toLowerCase() !== "more") return answer;
+    launchStudio();
+  }
+}
+
+if (enabled("scan-security")) {
+  const { printAudit } = await import("./ast-tools.js");
+  printAudit(cwd);
+}
 
 // ---- image path normalizer
 function processHeroImage(inputPath) {
@@ -130,9 +208,9 @@ map.CARD = tok(["card", "background"], "#ffffff");
 map.CARDFG = tok(["card-foreground", "foreground"], "#0a0a0a");
 
 // ---- layout / fields / hero choices
-let layout = opt("layout", "") || (await ask("Layout: split, centered, canvas, modal or glass?", "split"));
+let layout = opt("layout", "") || (await askWithStudio("Layout:\n  split       [|====]  Modern 2-column hero layout\n  centered    [ --- ]  Floating conversion card\n  canvas      [.....]  Gradient background canvas\n  modal       [-----]  Backdrop-blur overlay dialog\n  glass       [ ~~~ ]  Translucent frosted card\n  more        [ 🌐 Launch Visual Web Studio ]\nChoose layout:", "split"));
 if (!["split", "centered", "canvas", "modal", "glass"].includes(layout)) { console.warn(`⚠ Unknown layout "${layout}", using split.`); layout = "split"; }
-let style = opt("style", "") || (await ask("Visual style: default, brutalist or glassmorphism?", "default"));
+let style = opt("style", "") || (await askWithStudio("Visual style:\n  default        [neutral]  Shadcn-like\n  brutalist      [bold]     Hard borders and shadows\n  glassmorphism  [frosted]  Blur and glow\n  more           [ 🌐 Launch Visual Web Studio ]\nChoose style:", "default"));
 if (!["default", "brutalist", "glassmorphism"].includes(style)) { console.warn(`⚠ Unknown style "${style}", using default.`); style = "default"; }
 let method = flag("otp") ? "otp" : flag("magic-link") ? "magic" : opt("method", "") || (await ask("Sign-in method: password, otp or magic-link?", "password"));
 if (method === "magic-link") method = "magic";
@@ -149,6 +227,10 @@ if (!flag("no-social") && rc.social !== false) {
   if (bad.length) console.warn(`⚠ Ignoring unknown providers: ${bad.join(", ")}`);
   providers = [...new Set(providers.filter((x) => ALL.includes(x)))];
 }
+if (auth === "webauthn" && providers.length) {
+  steps.push("WebAuthn starter does not configure OAuth providers; OAuth requires a provider-specific backend and route.");
+  providers = [];
+}
 const rawHero = !["split", "canvas"].includes(layout) ? "" : opt("hero", "") || (hasOpt("hero") ? "" : await ask("Hero image path or URL (blank = built-in artwork)?", ""));
 const hero = processHeroImage(rawHero);
 
@@ -240,6 +322,16 @@ function useAuth() {
 }`,
     pkgs: [isNext ? "@clerk/nextjs" : "@clerk/react"],
   },
+  webauthn: {
+    imports: `import { startAuthentication, startRegistration } from "@simplewebauthn/browser";\n`,
+    hook: `function useAuth() {
+  return {
+    submit: async (_mode: Mode, _d: Data) => { throw new Error("Use passkey sign-in."); },
+    social: async (_p: Social) => { throw new Error("Social sign-in is not configured for this WebAuthn starter."); },
+  };
+}`,
+    pkgs: ["@simplewebauthn/browser"],
+  },
 }[auth];
 
 const pw = method === "password";
@@ -308,6 +400,37 @@ src = src.replace("__DIRECTIVE__", () => (isNext ? '"use client";\n\n' : ""))
   .replace("__AUTH_IMPORTS__", () => hooks.imports)
   .replace("__AUTH_HOOK__", () => hooks.hook);
 for (const [k, v] of Object.entries({ ...map, LAYOUT: layout, STYLE: style, METHOD: method, SHOW_NAME: String(showName), CONFIRM: String(confirmPw), PROVIDERS: JSON.stringify(providers), HERO: JSON.stringify(hero) })) src = rep(src, k, v);
+if (auth === "webauthn") {
+  const helper = `\n\nasync function authicaPasskey(email: string, mode: Mode) {
+  const optionsResponse = await fetch("/api/generate-options", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, mode }),
+  });
+  if (!optionsResponse.ok) throw new Error("Could not start passkey sign-in.");
+  const optionsJSON = await optionsResponse.json();
+  const credential = mode === "signup"
+    ? await startRegistration({ optionsJSON })
+    : await startAuthentication({ optionsJSON });
+  const verifyResponse = await fetch("/api/verify", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, mode, credential }),
+  });
+  if (!verifyResponse.ok) throw new Error("Passkey verification failed.");
+  window.location.href = "/";
+}`;
+  src = src.replace(hooks.hook, `${hooks.hook}${helper}`);
+  src = src.replace("const PASSWORDLESS = METHOD !== \"password\";", "const PASSWORDLESS = true;");
+  src = src.replace(
+    '<button type="submit" disabled={loading} className="as-btn">',
+    '<button type="button" disabled={loading || !emailOk} onClick={() => run(() => authicaPasskey(v.email, mode))} className="as-btn">',
+  );
+  src = src.replace(
+    '{loading ? "Please wait…" : PASSWORDLESS ? (METHOD === "otp" ? "Send code" : "Send magic link") : isLogin ? "Sign In" : "Sign Up"}',
+    '{loading ? "Please wait…" : isLogin ? "Sign in with a passkey" : "Create a passkey"}',
+  );
+}
 if (/__[A-Z]+__/.test(src)) fail("Unresolved template placeholder (internal error).");
 
 // ---- target path
@@ -330,8 +453,55 @@ if (isVite) {
   if (!file) manual();
   else {
     let c = fs.readFileSync(p(file), "utf8");
-    if (c.includes("authica")) modified.push(`${file} (already wired)`);
-    else {
+    if (c.includes("authica") || (enabled("ast-inject") && c.includes("Authica"))) modified.push(`${file} (already wired)`);
+    else if (enabled("ast-inject")) {
+      let astResult;
+      try {
+        const { insertViteRoute } = await import("./ast-tools.js");
+        astResult = insertViteRoute(c, (() => {
+          let rel = path.posix.relative(path.posix.dirname(file), "src/routes/login");
+          return rel.startsWith(".") ? rel : `./${rel}`;
+        })(), routerPackage);
+      } catch (error) {
+        console.warn(`⚠ AST route insertion could not safely parse ${file}: ${error.message}`);
+      }
+      if (astResult?.alreadyWired) {
+        modified.push(`${file} (already wired)`);
+      } else {
+        if (astResult) c = astResult.code;
+        else {
+          const before = c;
+          let rel = path.posix.relative(path.posix.dirname(file), "src/routes/login");
+          if (!rel.startsWith(".")) rel = "./" + rel;
+          if (/<Routes[\s>]/.test(c)) c = c.replace(/<Routes(\s[^>]*)?>/, (m) => `${m}\n        <Route path="/login" element={<Authica />} />`);
+          else c = c.replace(/(create\w*Router\(\s*\[)/, `$1\n  { path: "/login", element: <Authica /> },`);
+          if (c === before) {
+            manual();
+            console.log("AST fallback found no supported route position; target router was left unchanged.");
+            c = "";
+          } else {
+            let end = 0;
+            for (const m of c.matchAll(/^import\s[^;]*?['"][^'"]+['"];?[ \t]*$/gm)) end = Math.max(end, m.index + m[0].length);
+            const relImport = path.posix.relative(path.posix.dirname(file), "src/routes/login").replace(/^(?!\.)/, "./");
+            const imp = `import Authica from "${relImport}";`;
+            c = end ? c.slice(0, end) + "\n" + imp + c.slice(end) : imp + "\n" + c;
+            const routeImportPattern = new RegExp(`import\\s*\\{[^}]*\\bRoute\\b[^}]*\\}\\s*from\\s*["']${routerPackage}["']`);
+            if (/<Routes[\s>]/.test(before) && !routeImportPattern.test(c)) {
+              const routeImport = `import { Route } from "${routerPackage}";`;
+              const importEnd = [...c.matchAll(/^import\s[^;]*?['"][^'"]+['"];?[ \t]*$/gm)].reduce((end, match) => Math.max(end, match.index + match[0].length), 0);
+              c = importEnd ? c.slice(0, importEnd) + "\n" + routeImport + c.slice(importEnd) : routeImport + "\n" + c;
+            }
+          }
+        }
+        if (c) {
+          const dirty = spawnSync("git", ["status", "--porcelain", "--", file], { cwd, encoding: "utf8" });
+          if (dirty.status === 0 && dirty.stdout.trim()) console.warn(`⚠ ${file} has uncommitted changes.`);
+          if (!ex(file + ".bak")) fs.copyFileSync(p(file), p(file + ".bak"));
+          fs.writeFileSync(p(file), c);
+          modified.push(`${file} (+/login route, backup ${file}.bak)`);
+        }
+      }
+    } else {
       let rel = path.posix.relative(path.posix.dirname(file), "src/routes/login");
       if (!rel.startsWith(".")) rel = "./" + rel;
       if (/<Routes[\s>]/.test(c)) c = c.replace(/<Routes(\s[^>]*)?>/, (m) => `${m}\n        <Route path="/login" element={<authica />} />`);
@@ -349,6 +519,19 @@ if (isVite) {
   }
 }
 
+if (middlewareFile) {
+  const middleware = auth === "clerk"
+    ? `import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";\nimport { NextResponse } from "next/server";\n\nconst isProtectedRoute = createRouteMatcher(["/dashboard(.*)"]);\n\nexport default clerkMiddleware(async (auth, request) => {\n  if (!isProtectedRoute(request)) return;\n  const { userId } = await auth();\n  if (!userId) return NextResponse.redirect(new URL("/login", request.url));\n});\n\nexport const config = { matcher: ["/dashboard/:path*"] };\n`
+    : auth === "supabase"
+      ? `import { createServerClient } from "@supabase/ssr";\nimport { NextResponse, type NextRequest } from "next/server";\n\nexport async function middleware(request: NextRequest) {\n  let response = NextResponse.next({ request });\n  const supabase = createServerClient(\n    process.env.NEXT_PUBLIC_SUPABASE_URL!,\n    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,\n    { cookies: {\n      getAll: () => request.cookies.getAll(),\n      setAll: (cookies) => {\n        cookies.forEach(({ name, value }) => request.cookies.set(name, value));\n        response = NextResponse.next({ request });\n        cookies.forEach(({ name, value, options }) => response.cookies.set(name, value, options));\n      },\n    } },\n  );\n  const { data: { user } } = await supabase.auth.getUser();\n  if (request.nextUrl.pathname.startsWith("/dashboard") && !user) {\n    const loginUrl = request.nextUrl.clone();\n    loginUrl.pathname = "/login";\n    loginUrl.searchParams.set("next", request.nextUrl.pathname);\n    return NextResponse.redirect(loginUrl);\n  }\n  return response;\n}\n\nexport const config = { matcher: ["/dashboard/:path*"] };\n`
+      : `import { withAuth } from "next-auth/middleware";\n\nexport default withAuth({ pages: { signIn: "/login" } });\n\nexport const config = { matcher: ["/dashboard/:path*"] };\n`;
+  fs.mkdirSync(path.dirname(p(middlewareFile)), { recursive: true });
+  if (ex(middlewareFile) && !ex(middlewareFile + ".bak")) fs.copyFileSync(p(middlewareFile), p(middlewareFile + ".bak"));
+  fs.writeFileSync(p(middlewareFile), middleware);
+  created.push(middlewareFile);
+  if (auth === "supabase") steps.push("Install @supabase/ssr for the generated Supabase middleware.");
+}
+
 // ---- provider notices / Clerk SSO callback route
 if (providers.length) {
   if (auth === "clerk") {
@@ -377,7 +560,7 @@ if (method === "otp" && auth === "supabase") steps.push("Supabase email template
 if (method !== "password" && auth === "next-auth") steps.push('next-auth: add an Email provider (id "email")' + (method === "otp" ? " with generateVerificationToken returning 6 digits." : "."));
 
 // ---- dependencies
-const need = ["framer-motion", ...hooks.pkgs].filter((d) => !deps[d]);
+const need = ["framer-motion", ...hooks.pkgs, ...(middlewareFile && auth === "supabase" ? ["@supabase/ssr"] : [])].filter((d) => !deps[d]);
 if (need.length && !flag("no-install")) {
   const pm = ex("pnpm-lock.yaml") ? "pnpm" : ex("yarn.lock") ? "yarn" : ex("bun.lockb") || ex("bun.lock") ? "bun" : "npm";
   console.log(`Installing ${need.join(", ")} with ${pm}…`);
@@ -393,11 +576,14 @@ const envVars = {
   supabase: [pre + "SUPABASE_URL", pre + "SUPABASE_ANON_KEY"],
   clerk: isNext ? ["NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY", "CLERK_SECRET_KEY"] : ["VITE_CLERK_PUBLISHABLE_KEY"],
   "next-auth": ["NEXTAUTH_URL", "NEXTAUTH_SECRET"],
+  webauthn: [],
 }[auth];
 const next = [...steps];
 if (envVars.length) next.splice(next.findIndex((x) => !x.startsWith("Install")) < 0 ? next.length : next.findIndex((x) => !x.startsWith("Install")), 0, `Add to ${isNext ? ".env.local" : ".env"}: ${envVars.join(", ")}`);
 if (auth === "clerk") next.push(`Wrap your app in <ClerkProvider publishableKey={...}>.`);
 if (auth === "next-auth") next.push("OAuth client ID/secret for each provider go in your NextAuth config.");
+if (middlewareFile && auth === "next-auth") next.push('Set `pages.signIn` to "/login" in your NextAuth config as well.');
+if (auth === "webauthn") next.push("WebAuthn starter requires server POST endpoints /api/generate-options and /api/verify with challenge storage, origin/RP validation, credential persistence, and mode-aware registration/authentication verification.");
 if (layout === "modal") next.push('Modal: use as the /login route, or render <authica trigger="Sign in" /> (props: open, onClose, trigger).');
 next.push("Start your dev server and open /login.");
 const routes = ["/login", ...extraRoutes];
@@ -437,3 +623,4 @@ const title = " authica ✔ ";
 console.log("\n╭" + title + "─".repeat(W - 2 - title.length) + "╮");
 for (const l of body) console.log("│ " + l.padEnd(inner) + " │");
 console.log("╰" + "─".repeat(W - 2) + "╯");
+}

package/bin/preview.js

@@ -0,0 +1,203 @@
+import http from "node:http";
+import { spawn } from "node:child_process";
+
+const port = 4321;
+const page = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="color-scheme" content="dark">
+<title>Authica · Visual Studio</title>
+<style>
+:root{color-scheme:dark;--bg:#0B0B0E;--canvas:#0B0B0E;--panel:#13131A;--border:#22222E;--accent:#8B5CF6;--accent-soft:#8B5CF626;--text:#F4F2FA;--muted:#92909F;--card:#181820;--field:#101016}
+*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--canvas);color:var(--text);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
+button,input{font:inherit}button{color:inherit}.app{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr) 250px}
+.sidebar,.inspector{background:var(--panel);border-color:var(--border);min-height:100vh}.sidebar{border-right:1px solid var(--border);padding:22px 14px;position:sticky;top:0;height:100vh;overflow:auto}.inspector{border-left:1px solid var(--border);padding:22px 16px}
+.brand{display:flex;align-items:center;gap:10px;padding:0 8px 22px;font-weight:700;font-size:15px}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:linear-gradient(145deg,#a78bfa,var(--accent));box-shadow:0 0 24px #8b5cf644}
+.brand small{display:block;color:var(--muted);font-size:11px;font-weight:500}.search{width:100%;height:38px;border:1px solid var(--border);border-radius:11px;background:#0d0d13;color:var(--text);padding:0 11px;outline:none;margin-bottom:24px}.search:focus{border-color:var(--accent)}
+.section{margin:0 0 22px}.section-title,.panel-title{margin:0 8px 9px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
+.nav-list{display:grid;gap:4px}.nav-item{width:100%;border:1px solid transparent;border-radius:999px;background:transparent;padding:8px 11px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;color:#bbb9c7;transition:background .16s,border-color .16s,color .16s}
+.nav-item:hover{background:#ffffff08;color:var(--text)}.nav-item[aria-pressed=true]{color:#e5d9ff;background:var(--accent-soft);border-color:#8b5cf640}.nav-icon{width:19px;text-align:center;color:#a6a2b3}.nav-item[aria-pressed=true] .nav-icon{color:#c4aaff}
+.main{min-width:0;padding:24px clamp(18px,3vw,42px) 36px}.topbar{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:#121219;border-radius:14px;padding:8px 9px 8px 14px;box-shadow:0 8px 32px #0002}
+.command{flex:1;min-width:0;overflow:auto;color:#d5c6ff;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}.prompt{color:#8f8c9a;margin-right:8px}
+.copy{flex:none;border:1px solid #8b5cf64d;border-radius:9px;background:#8b5cf61a;padding:7px 11px;color:#d7c8ff;font-size:12px;cursor:pointer}.copy:hover{background:#8b5cf633}
+.intro{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:30px 0 17px}.eyebrow{color:#b79aff;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.intro h1{margin:5px 0 3px;font-size:25px;letter-spacing:-.04em}.intro p{margin:0;color:var(--muted);font-size:13px}
+.preview-label{color:var(--muted);font-size:11px}.viewport{min-height:520px;position:relative;display:grid;place-items:center;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:radial-gradient(ellipse at 50% 45%,#171521,#0d0d12 70%);box-shadow:0 24px 80px #0004}
+.viewport::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:radial-gradient(#777084 0.6px,transparent 0.6px);background-size:22px 22px}
+.mock{position:relative;z-index:1;width:min(760px,88%);min-height:400px;display:flex;overflow:hidden;border:1px solid #ffffff24;border-radius:20px;background:var(--card);box-shadow:0 24px 80px #0008;transition:all .22s}
+.mock.centered,.mock.canvas,.mock.modal,.mock.glass{width:min(410px,88%);min-height:0}.mock.canvas{background:radial-gradient(ellipse at 80% 0%,#8b5cf644,#17151f 65%)}.mock.modal{border-radius:14px;box-shadow:0 30px 90px #000b,0 0 0 999px #0002}.mock.glass{background:linear-gradient(145deg,#211a35,#111721);box-shadow:0 0 55px #8b5cf622}
+.hero{display:none;position:relative;flex:1;background:linear-gradient(145deg,#5036a0,#241c41 58%,#17171f);padding:26px}.mock.split .hero{display:flex;flex-direction:column;justify-content:space-between}
+.hero-chip{width:max-content;border:1px solid #ffffff30;background:#ffffff12;border-radius:999px;padding:6px 10px;color:#e9ddff;font-size:10px}.hero h2{max-width:230px;margin:0;font-size:27px;line-height:1.15;letter-spacing:-.04em}.hero p{margin:8px 0 0;color:#d4cae8;font-size:12px}
+.form{width:100%;padding:clamp(22px,4vw,36px);display:flex;flex-direction:column;justify-content:center}.mock.split .form{width:50%}.form-brand{color:#c3aaff;font-size:11px;font-weight:700;letter-spacing:.08em}.form h2{margin:12px 0 3px;font-size:23px;letter-spacing:-.04em}.form .hint{margin:0 0 20px;color:#9c99a8;font-size:12px}
+.field-label{font-size:10px;color:#c1becc;margin:10px 0 5px}.field{height:38px;border:1px solid #353441;border-radius:9px;background:var(--field);padding:0 11px;color:#d0ced8;font-size:11px;display:flex;align-items:center}.mock.glass .field{background:#ffffff0b}
+.submit{height:39px;margin-top:16px;border:0;border-radius:999px;background:var(--accent);color:white;font-weight:650;font-size:11px;box-shadow:0 5px 22px #8b5cf644}
+.mock.brutalist{border:3px solid #f4f2fa;border-radius:3px;box-shadow:7px 7px 0 #000}.mock.brutalist .submit{border-radius:4px;background:#facc15;color:#17130a;box-shadow:none}.mock.glassmorphism{background:linear-gradient(145deg,#8b5cf633,#111721dd);border-color:#ffffff30;backdrop-filter:blur(16px)}.mock.glassmorphism .form{background:#ffffff08}
+.divider{display:flex;align-items:center;gap:9px;color:#777482;font-size:9px;margin:17px 0 10px}.divider::before,.divider::after{content:"";height:1px;flex:1;background:#34323f}
+.social{display:flex;gap:8px}.social span{height:34px;flex:1;display:grid;place-items:center;border:1px solid #353441;border-radius:9px;color:#c7c4d0;font-size:10px}
+.inspector-heading{padding:1px 5px 20px}.inspector-heading h2{font-size:14px;margin:0 0 3px}.inspector-heading p{font-size:11px;color:var(--muted);margin:0}
+.panel{border-top:1px solid var(--border);padding:17px 3px}.panel-title{margin:0 0 12px}.swatches{display:grid;gap:9px}.swatch-row{display:flex;align-items:center;justify-content:space-between;color:#c1becc;font-size:11px}.swatch-value{display:flex;align-items:center;gap:7px;color:var(--muted);font:10px ui-monospace,monospace}
+.color-input{appearance:none;width:20px;height:20px;border:1px solid #ffffff30;border-radius:7px;padding:0;background:transparent;overflow:hidden;cursor:pointer}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:0;border-radius:6px}
+.providers{display:grid;gap:7px}.provider{width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:10px;background:#0f0f15;padding:9px 10px;cursor:pointer;color:#c4c1ce;font-size:11px}.provider[aria-pressed=true]{border-color:#8b5cf655;background:#8b5cf610;color:#e2d7ff}
+.switch{width:27px;height:16px;border-radius:999px;background:#34323e;padding:2px;transition:background .15s}.switch::after{content:"";display:block;width:12px;height:12px;border-radius:50%;background:#a09dab;transition:transform .15s}.provider[aria-pressed=true] .switch{background:var(--accent)}.provider[aria-pressed=true] .switch::after{transform:translateX(11px);background:white}
+.empty{display:none;color:var(--muted);padding:8px;font-size:12px}.footer-note{margin-top:20px;color:#777482;font-size:10px;line-height:1.6}
+@media(max-width:1050px){.app{grid-template-columns:220px minmax(0,1fr)}.inspector{grid-column:2;min-height:0;border-left:0;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.inspector-heading{grid-column:1/-1}.panel{align-self:start}}
+@media(max-width:700px){.app{display:block}.sidebar{position:relative;height:auto;min-height:0;border-right:0;border-bottom:1px solid var(--border);padding:14px}.brand{padding-bottom:12px}.search{margin-bottom:13px}.section{margin-bottom:11px}.nav-list{display:flex;flex-wrap:wrap}.nav-item{width:auto;padding:7px 10px;font-size:12px}.main{padding:20px 14px}.intro{align-items:start;flex-direction:column;margin-top:22px}.viewport{min-height:450px}.mock.split{width:94%;min-height:360px}.mock.split .form{width:58%;padding:18px}.mock.split .hero{padding:18px}.hero h2{font-size:22px}.inspector{display:block;padding:18px 16px}.panel{padding:14px 3px}}
+</style>
+</head>
+<body>
+<div class="app">
+  <aside class="sidebar" aria-label="Studio navigation">
+    <div class="brand"><span class="brand-mark">⚡</span><span>authica <small>VISUAL STUDIO</small></span></div>
+    <input id="search" class="search" type="search" placeholder="Search templates…" aria-label="Search templates">
+    <section class="section" data-section="layouts">
+      <h2 class="section-title">Layout Frameworks</h2>
+      <nav class="nav-list" aria-label="Layout Frameworks">
+        <button class="nav-item" data-layout="split" aria-pressed="true"><span class="nav-icon">◫</span>Split</button>
+        <button class="nav-item" data-layout="centered" aria-pressed="false"><span class="nav-icon">▣</span>Centered</button>
+        <button class="nav-item" data-layout="canvas" aria-pressed="false"><span class="nav-icon">▧</span>Canvas</button>
+        <button class="nav-item" data-layout="modal" aria-pressed="false"><span class="nav-icon">▢</span>Modal</button>
+        <button class="nav-item" data-layout="glass" aria-pressed="false"><span class="nav-icon">✧</span>Glass</button>
+      </nav><p class="empty" data-empty="layouts">No layouts match.</p>
+    </section>
+    <section class="section" data-section="styles">
+      <h2 class="section-title">Aesthetic Presets</h2>
+      <nav class="nav-list" aria-label="Aesthetic Presets">
+        <button class="nav-item" data-style="default" aria-pressed="true"><span class="nav-icon">◌</span>Default</button>
+        <button class="nav-item" data-style="brutalist" aria-pressed="false"><span class="nav-icon">▦</span>Brutalist</button>
+        <button class="nav-item" data-style="glassmorphism" aria-pressed="false"><span class="nav-icon">◈</span>Glassmorphism</button>
+      </nav><p class="empty" data-empty="styles">No presets match.</p>
+    </section>
+  </aside>
+  <main class="main">
+    <div class="topbar"><code class="command"><span class="prompt">$</span><span id="command">npx authica --layout=split --style=default</span></code><button class="copy" id="copy" type="button">Copy</button></div>
+    <div class="intro"><div><span class="eyebrow">Design your sign-in flow</span><h1>Authentication, styled.</h1><p>Choose a layout and preset. Your CLI command updates as you explore.</p></div><span class="preview-label">LIVE PREVIEW&nbsp; · &nbsp;LOCAL ONLY</span></div>
+    <section class="viewport" aria-label="Interactive login preview">
+      <div id="mock" class="mock split">
+        <div class="hero"><span class="hero-chip">✦ &nbsp; Secure by design</span><div><h2>Welcome to your next chapter.</h2><p>A sign-in experience that feels like your product.</p></div></div>
+        <div class="form"><span class="form-brand">AUTHICA</span><h2>Welcome back</h2><p class="hint">Sign in to continue to your account.</p><label class="field-label">Email address</label><div class="field">you@example.com</div><label class="field-label">Password</label><div class="field">••••••••••</div><button class="submit" type="button">Sign in</button><div class="divider">OR CONTINUE WITH</div><div class="social" id="mock-social"><span>G &nbsp; Google</span><span>⌘ &nbsp; GitHub</span></div></div>
+      </div>
+    </section>
+  </main>
+  <aside class="inspector" aria-label="Theme and provider settings">
+    <div class="inspector-heading"><h2>Quick customize</h2><p>Adjust preview-only options.</p></div>
+    <section class="panel"><h3 class="panel-title">CSS theme variables</h3><div class="swatches">
+      <label class="swatch-row">Primary accent <span class="swatch-value"><input class="color-input" type="color" data-color="accent" value="#8b5cf6"><code id="accent-value">#8B5CF6</code></span></label>
+      <label class="swatch-row">Card surface <span class="swatch-value"><input class="color-input" type="color" data-color="card" value="#181820"><code id="card-value">#181820</code></span></label>
+      <label class="swatch-row">Field surface <span class="swatch-value"><input class="color-input" type="color" data-color="field" value="#101016"><code id="field-value">#101016</code></span></label>
+      <label class="swatch-row">Canvas <span class="swatch-value"><input class="color-input" type="color" data-color="canvas" value="#0b0b0e"><code id="canvas-value">#0B0B0E</code></span></label>
+    </div></section>
+    <section class="panel"><h3 class="panel-title">OAuth providers</h3><div class="providers">
+      <button class="provider" data-provider="google" aria-pressed="true"><span>Google</span><span class="switch"></span></button>
+      <button class="provider" data-provider="github" aria-pressed="true"><span>GitHub</span><span class="switch"></span></button>
+      <button class="provider" data-provider="apple" aria-pressed="false"><span>Apple</span><span class="switch"></span></button>
+    </div><p class="footer-note">These controls are a visual preview only. Authica does not write project files in Studio.</p></section>
+  </aside>
+</div>
+<script>
+(() => {
+  const layoutButtons = [...document.querySelectorAll("[data-layout]")];
+  const styleButtons = [...document.querySelectorAll("[data-style]")];
+  const search = document.querySelector("#search");
+  const mock = document.querySelector("#mock");
+  const command = document.querySelector("#command");
+  const providers = [...document.querySelectorAll("[data-provider]")];
+  let layout = "split", style = "default";
+  const selectedProviders = new Set(["google", "github"]);
+  const upper = (text) => text.charAt(0).toUpperCase() + text.slice(1);
+  function update() {
+    mock.className = "mock " + layout + (style === "default" ? "" : " " + style);
+    document.querySelector(".intro h1").textContent = upper(layout) + " authentication.";
+    command.textContent = "npx authica --layout=" + layout + " --style=" + style +
+      (selectedProviders.size ? " --providers=" + [...selectedProviders].join(",") : "");
+    layoutButtons.forEach((button) => button.setAttribute("aria-pressed", String(button.dataset.layout === layout)));
+    styleButtons.forEach((button) => button.setAttribute("aria-pressed", String(button.dataset.style === style)));
+    providers.forEach((button) => button.setAttribute("aria-pressed", String(selectedProviders.has(button.dataset.provider))));
+    const social = document.querySelector("#mock-social");
+    const names = [...selectedProviders].map(upper);
+    social.innerHTML = names.length ? names.map((name) => "<span>" + name + "</span>").join("") : "<span>Email sign-in</span>";
+  }
+  layoutButtons.forEach((button) => button.addEventListener("click", () => { layout = button.dataset.layout; update(); }));
+  styleButtons.forEach((button) => button.addEventListener("click", () => { style = button.dataset.style; update(); }));
+  providers.forEach((button) => button.addEventListener("click", () => {
+    const name = button.dataset.provider;
+    if (selectedProviders.has(name)) selectedProviders.delete(name); else selectedProviders.add(name);
+    update();
+  }));
+  search.addEventListener("input", () => {
+    const query = search.value.trim().toLowerCase();
+    for (const section of document.querySelectorAll("[data-section]")) {
+      const buttons = [...section.querySelectorAll(".nav-item")];
+      let visible = 0;
+      buttons.forEach((button) => {
+        const show = button.textContent.toLowerCase().includes(query);
+        button.hidden = !show;
+        if (show) visible++;
+      });
+      section.querySelector(".empty").style.display = visible ? "none" : "block";
+      section.querySelector(".section-title").hidden = !visible;
+    }
+  });
+  document.querySelectorAll("[data-color]").forEach((input) => input.addEventListener("input", () => {
+    const name = input.dataset.color;
+    const value = input.value.toUpperCase();
+    document.documentElement.style.setProperty("--" + name, input.value);
+    document.querySelector("#" + name + "-value").textContent = value;
+  }));
+  document.querySelector("#copy").addEventListener("click", async (event) => {
+    const button = event.currentTarget;
+    try {
+      await navigator.clipboard.writeText(command.textContent);
+      button.textContent = "Copied!";
+      setTimeout(() => { button.textContent = "Copy"; }, 1400);
+    } catch {
+      const range = document.createRange();
+      range.selectNodeContents(command);
+      const selection = window.getSelection();
+      selection.removeAllRanges();
+      selection.addRange(range);
+      button.textContent = "Select & copy";
+      setTimeout(() => { button.textContent = "Copy"; selection.removeAllRanges(); }, 1800);
+    }
+  });
+  update();
+})();
+</script>
+</body></html>`;
+
+function openBrowser() {
+  const url = `http://localhost:${port}`;
+  const platform = process.platform;
+  const command = platform === "win32" ? "cmd.exe" : platform === "darwin" ? "open" : "xdg-open";
+  const args = platform === "win32" ? ["/c", "start", "", url] : [url];
+  const browser = spawn(command, args, { detached: true, stdio: "ignore", windowsHide: true });
+  browser.on("error", (error) => console.error(`Could not open a browser automatically: ${error.message}`));
+  browser.unref();
+}
+
+const server = http.createServer((request, response) => {
+  if (request.method !== "GET" || (request.url !== "/" && request.url !== "/index.html")) {
+    response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8", "X-Content-Type-Options": "nosniff" });
+    response.end("Not found");
+    return;
+  }
+  response.writeHead(200, {
+    "Content-Type": "text/html; charset=utf-8",
+    "Content-Security-Policy": "default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline';",
+    "X-Content-Type-Options": "nosniff",
+    "Cache-Control": "no-store",
+  });
+  response.end(page);
+});
+
+server.on("error", (error) => {
+  console.error(`Could not start Authica preview at http://localhost:${port}: ${error.message}`);
+  process.exitCode = 1;
+});
+server.listen(port, "127.0.0.1", () => {
+  console.log(`Authica preview running at http://localhost:${port} (local-only; Ctrl+C to stop).`);
+  if (process.argv.includes("--open")) openBrowser();
+});
+
+for (const signal of ["SIGINT", "SIGTERM"]) {
+  process.on(signal, () => server.close(() => process.exit(0)));
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "authica",
-  "version": "1.2.0",
-  "description": "Adds a theme-matched, animated sliding sign-in/sign-up page (split, centered or canvas) to Next.js or Vite + React Router projects.",
+  "version": "2.0.0",
+  "description": "Generates theme-matched authentication UI for Next.js and Vite, with opt-in AST safety tools and a local preview studio.",
   "type": "module",
   "bin": {
     "authica": "bin/cli.js"
@@ -13,10 +13,15 @@
   "engines": {
     "node": ">=18"
   },
+  "scripts": {
+    "test": "node --test"
+  },
   "keywords": [
     "authica",
     "auth",
     "authentication",
+    "webauthn",
+    "passkeys",
     "nextjs-auth",
     "supabase-auth",
     "clerk-auth",
@@ -28,8 +33,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/AEGON247/authica.git"
+    "url": "git+https://github.com/AEGON247/authica.git"
   },
   "homepage": "https://github.com/AEGON247/authica#readme",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "@babel/parser": "^7.29.13",
+    "recast": "^0.24.0"
+  }
 }