authica 0.0.0-stage → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sachin Mehta
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM-------------------, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,131 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<div align="center">
+
+# ⚡ 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)
+[![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)
+
+<br />
+
+### npx authica@latest
+
+[✨ Features](https://www.google.com/search?q=%23-features) • [🚀 Quickstart](https://www.google.com/search?q=%23-quickstart) • [🎨 Styles & Layouts](https://www.google.com/search?q=%23-styles--layouts) • [🔌 Auth Providers](https://www.google.com/search?q=%23-auth-providers) • [⚙️ Configuration](https://www.google.com/search?q=%23%25EF%25B8%258F-configuration)
+</div>
+
+## 📸 Preview
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ ⚡ authica v1.2.0                                                             │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│  ? Global CSS path? (src/index.css)                                         │
+│  ✔ Theme read from src/index.css (13 tokens)                               │
+│  ? Layout: split, centered, canvas, modal, or glass? (split)                │
+│  ? Style preset: default, brutalist, or glassmorphism? (default)            │
+│  ? Auth provider: none, supabase, next-auth, or clerk? (supabase)           │
+│  ? Select OAuth providers: Google, GitHub, Apple                            │
+│                                                                             │
+│  ✔ Created src/routes/login.tsx                                             │
+│  ✔ Wired /login into src/main.tsx                                           │
+│                                                                             │
+└─────────────────────────────────────────────────────────────────────────────┘
+``` 
+
+
+
+## ✨ Features
+
+* **🎨 Auto Theme Scanning:** Automatically parses `:root` HSL, RGB, and OKLCH CSS variables from your `globals.css` or `index.css`.
+* **🚀 Zero-Config Route Injection:** Safely creates routes and injects imports into Next.js App/Pages Router or Vite (`react-router-dom`) with automatic `.bak` safety backups.
+* **🛡️ Pluggable Backend Handlers:** Generates pre-typed hooks for **Supabase**, **Clerk**, **Next-Auth**, or **Custom APIs**.
+* **⚡ Zero Tailwind Lock-in:** Includes self-contained CSS fallbacks so animated cards look hyper-polished even without pre-configured Tailwind directives.
+* **🎨 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.
+
+
+
+## 🚀 Quickstart
+
+Run `authica` inside the root directory of any existing React or Next.js project:
+
+ 
+>npx authica
+
+ 
+---
+### Non-Interactive One-Liner
+---
+Skip prompts by passing flags directly:
+
+ 
+>npx authica --layout=split --style=brutalist --auth=supabase --providers=google,github --yes
+
+--- 
+
+
+
+## 🎨 Styles & Layouts
+
+| Layout | Description |
+|---|---|
+| `split` | Modern two-column hero layout with animated side-swapping cards on tab toggle. |
+| `centered` | Clean, floating authentication card focused on high conversion and low cognitive load. |
+| `canvas` | Full-screen interactive gradient canvas background with a centered glass form. |
+| `modal` | Triggerable overlay dialog with `backdrop-filter` background blurring. |
+| `glass` | Standalone translucent frosted card with glowing neon border accents. |
+
+---
+
+| Preset | Visual Vibe |
+|---|---|
+| `default` | Neutral, high-contrast, subtle borders, and soft shadows (Shadcn aesthetic). |
+| `brutalist` | Bold 2px dark borders, hard 4px offset drop-shadows, yellow active accents, and monospaced typography. |
+| `glassmorphism` | Ultra-frosted blur backdrop (`backdrop-blur-xl`) over glowing radial background meshes. |
+
+---
+
+## 🔌 Auth Providers
+
+| Backend | Flag | Features Handled |
+|---|---|---|
+| **None / Custom** | `--auth=none` | Pure unopinionated state & submit payload handlers. |
+| **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. |
+
+
+## ⚙️ Configuration (`.authicarc`)
+
+Teams can enforce brand consistency across repositories by placing an `.authicarc` or `.authicarc.` file in the project root:
+
+```
+{
+  "auth": "supabase",
+  "layout": "split",
+  "style": "default",
+  "providers": ["google", "github"],
+  "css": "src/index.css",
+  "name": true,
+  "confirm": true
+}
+```
+ 
+
+> **Precedence Order:** Command-line flags > `.authicarc` config file > Interactive CLI prompts.
+
+
+
+## 📄 License
+
+Distributed under the MIT License. See [`LICENSE`](https://www.google.com/search?q=./LICENSE) for more information.
+
+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/cli.js

@@ -0,0 +1,434 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import { spawnSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import readline from "node:readline/promises";
+
+const args = process.argv.slice(2);
+const created = [], modified = [], steps = [];
+let themeNote = "", rcNote = "", extraRoutes = [];
+const flag = (n) => args.includes(`--${n}`);
+let rc = {};
+const hasOpt = (n) => args.some((a) => a.startsWith(`--${n}=`)) || rc[n] !== undefined;
+const opt = (n, d) => {
+  const a = args.find((x) => x.startsWith(`--${n}=`));
+  if (a) return a.slice(n.length + 3);
+  const v = rc[n];
+  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]");
+  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));
+
+// ---- team config (.authicarc / .authicarc.json); CLI flags win over it
+const rcFile = [".authicarc", ".authicarc.json"].find(ex);
+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 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 (!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 };
+
+// ---- detect stack
+const isNext = !!deps.next;
+const isVite = !isNext && !!deps.vite && !!(deps["react-router-dom"] || deps["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 (!deps.tailwindcss && !deps["@tailwindcss/vite"] && !deps["@tailwindcss/postcss"])
+  console.warn("⚠ Tailwind CSS not detected; using self-contained CSS fallbacks.");
+
+// ---- interactive onboarding (falls back to defaults when non-interactive or --yes)
+const interactive = process.stdin.isTTY && !flag("yes");
+const rl = interactive ? readline.createInterface({ input: process.stdin, output: process.stdout }) : null;
+const ask = async (q, def) => (rl ? (await rl.question(`${q} ${def !== "" ? `(${def}) ` : ""}`)).trim() || def : def);
+const askBool = async (q, def) => {
+  const a = (await ask(`${q} [y/n]`, def ? "y" : "n")).toLowerCase();
+  return a.startsWith("y");
+};
+
+// ---- image path normalizer
+function processHeroImage(inputPath) {
+  if (!inputPath || inputPath.trim() === "") return "";
+  const cleaned = inputPath.trim().replace(/^["']|["']$/g, ""); // Strip quotes
+
+  // 1. Return web URLs directly
+  if (/^https?:\/\//i.test(cleaned)) return cleaned;
+
+  // 2. Resolve absolute or relative path against project root
+  const absolutePath = path.isAbsolute(cleaned) ? cleaned : p(cleaned);
+  const publicDir = p("public");
+
+  if (!fs.existsSync(publicDir)) {
+    fs.mkdirSync(publicDir, { recursive: true });
+  }
+
+  // 3. If file is already inside public directory, return clean root-relative path (/filename)
+  const relativeToPublic = path.relative(publicDir, absolutePath);
+  if (!relativeToPublic.startsWith("..") && !path.isAbsolute(relativeToPublic)) {
+    return "/" + relativeToPublic.replace(/\\/g, "/");
+  }
+
+  // 4. If file exists outside public, copy it into public/ directory
+  if (fs.existsSync(absolutePath)) {
+    const ext = path.extname(absolutePath) || ".png";
+    const destName = `auth-hero${ext}`;
+    const destPath = path.join(publicDir, destName);
+    fs.copyFileSync(absolutePath, destPath);
+    created.push(`public/${destName}`);
+    return `/${destName}`;
+  }
+
+  // Fallback: assume clean root-relative path
+  const normalized = cleaned.replace(/\\/g, "/");
+  return normalized.startsWith("/") ? normalized : "/" + normalized;
+}
+
+// ---- theme scan
+const cssCandidates = ["app/globals.css", "src/app/globals.css", "styles/globals.css", "src/styles/globals.css", "src/globals.css", "src/index.css", "app/global.css", "src/App.css"];
+let cssFile = opt("css", "") || (await ask("Global CSS path?", cssCandidates.find(ex) || ""));
+if (cssFile && !ex(cssFile)) { console.warn(`⚠ ${cssFile} not found; using fallback colors.`); cssFile = ""; }
+const vars = {};
+if (cssFile) {
+  const css = fs.readFileSync(p(cssFile), "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
+  for (const m of css.matchAll(/--([\w-]+)\s*:\s*([^;}]+);/g)) if (!(m[1] in vars)) vars[m[1]] = m[2].trim();
+  themeNote = `${cssFile} (${Object.keys(vars).length} tokens)`;
+} else console.warn("⚠ No global CSS found; using neutral fallback colors.");
+
+const channels = /^-?[\d.]+(deg)?\s+[\d.]+%\s+[\d.]+%(\s*\/\s*[\d.%]+)?$/;
+function tok(names, fb) {
+  for (const n of names) if (n in vars) return channels.test(vars[n]) ? `hsl(var(--${n}))` : `var(--${n},${fb})`;
+  for (const n of names) if (`color-${n}` in vars) return `var(--color-${n},${fb})`;
+  return fb;
+}
+const map = {
+  BG: tok(["background"], "#ffffff"),
+  FG: tok(["foreground"], "#0a0a0a"),
+  PRIMARY: tok(["primary"], "#4f5bff"),
+  PRIMARYFG: tok(["primary-foreground"], "#ffffff"),
+  MUTED: tok(["muted"], "#f4f4f5"),
+  BORDER: tok(["border"], "#e4e4e7"),
+  DESTRUCTIVE: tok(["destructive"], "#ef4444"),
+};
+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"));
+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"));
+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";
+if (!["password", "otp", "magic"].includes(method)) { console.warn(`⚠ Unknown method "${method}", using password.`); method = "password"; }
+if (method === "magic" && auth === "clerk") fail("--magic-link is not supported with --auth=clerk (use --otp, or --auth=supabase/next-auth).");
+const showName = flag("no-name") ? false : rc.name !== undefined ? !!rc.name : await askBool("Include full-name field?", true);
+const confirmPw = method !== "password" ? false : flag("confirm") ? true : rc.confirm !== undefined ? !!rc.confirm : await askBool("Include confirm-password field?", false);
+const ALL = ["google", "github", "apple", "discord", "facebook"];
+let providers = [];
+if (!flag("no-social") && rc.social !== false) {
+  const raw = hasOpt("providers") ? opt("providers", "") : (await ask(`Social providers, comma-separated (${ALL.join("/")}; blank = none)?`, "google,github"));
+  providers = raw.split(",").map((x) => x.trim().toLowerCase()).filter(Boolean);
+  const bad = providers.filter((x) => !ALL.includes(x));
+  if (bad.length) console.warn(`⚠ Ignoring unknown providers: ${bad.join(", ")}`);
+  providers = [...new Set(providers.filter((x) => ALL.includes(x)))];
+}
+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);
+
+// ---- auth wiring
+const env = (k) => (isNext ? `process.env.NEXT_PUBLIC_${k}` : `import.meta.env.VITE_${k}`);
+const hooks = {
+  none: {
+    imports: "",
+    hook: `function useAuth() {
+  return {
+    submit: async (mode: Mode, d: Data) => { console.log(mode, d); /* TODO: connect your backend */ },
+    social: async (p: Social) => { console.log("social", p); /* TODO */ },
+  };
+}`,
+    pkgs: [],
+  },
+  supabase: {
+    imports: `import { createClient } from "@supabase/supabase-js";\n`,
+    hook: `const supabase = createClient(${env("SUPABASE_URL")} as string, ${env("SUPABASE_ANON_KEY")} as string);
+
+function useAuth() {
+  return {
+    submit: async (mode: Mode, d: Data) => {
+      const r =
+        mode === "login"
+          ? await supabase.auth.signInWithPassword({ email: d.email, password: d.password })
+          : await supabase.auth.signUp({ email: d.email, password: d.password, options: { data: { name: d.name } } });
+      if (r.error) throw r.error;
+      if (!r.data.session) throw new Error("Check your email to confirm your account.");
+      window.location.href = "/";
+    },
+    social: async (p: Social) => {
+      const { error } = await supabase.auth.signInWithOAuth({ provider: p });
+      if (error) throw error;
+    },
+  };
+}`,
+    pkgs: ["@supabase/supabase-js"],
+  },
+  "next-auth": {
+    imports: `import { signIn } from "next-auth/react";\n`,
+    hook: `function useAuth() {
+  return {
+    submit: async (mode: Mode, d: Data) => {
+      if (mode === "signup") {
+        const r = await fetch("/api/register", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(d),
+        });
+        if (!r.ok) throw new Error((await r.text()) || "Sign up failed");
+      }
+      const res = await signIn("credentials", { email: d.email, password: d.password, redirect: false });
+      if (res?.error) throw new Error("Invalid credentials");
+      window.location.href = "/";
+    },
+    social: async (p: Social) => { await signIn(p, { callbackUrl: "/" }); },
+  };
+}`,
+    pkgs: ["next-auth"],
+  },
+  clerk: {
+    imports: `import { useSignIn, useSignUp } from "${isNext ? "@clerk/nextjs" : "@clerk/react"}";\n`,
+    hook: `function useAuth() {
+  const { signIn, setActive: setSignInActive } = useSignIn();
+  const { signUp, setActive: setSignUpActive } = useSignUp();
+  return {
+    submit: async (mode: Mode, d: Data) => {
+      if (mode === "login") {
+        const r = await signIn!.create({ identifier: d.email, password: d.password });
+        if (r.status !== "complete") throw new Error("Additional verification required.");
+        await setSignInActive!({ session: r.createdSessionId });
+      } else {
+        const r = await signUp!.create({ emailAddress: d.email, password: d.password, firstName: d.name });
+        if (r.status !== "complete") throw new Error("Check your email to verify your account.");
+        await setSignUpActive!({ session: r.createdSessionId });
+      }
+      window.location.href = "/";
+    },
+    social: async (p: Social) => {
+      // Requires a /sso-callback route rendering Clerk's AuthenticateWithRedirectCallback.
+      await signIn!.authenticateWithRedirect({
+        strategy: ("oauth_" + p) as "oauth_google",
+        redirectUrl: "/sso-callback",
+        redirectUrlComplete: "/",
+      });
+    },
+  };
+}`,
+    pkgs: [isNext ? "@clerk/nextjs" : "@clerk/react"],
+  },
+}[auth];
+
+const pw = method === "password";
+const stub = `    send: async (_m: Mode, _d: Data) => {},
+    verify: async (_m: Mode, _e: string, _c: string) => {},`;
+const extras = {
+  none: `    send: async (mode: Mode, d: Data) => { console.log("send", mode, d); /* TODO */ },
+    verify: async (mode: Mode, email: string, code: string) => { console.log("verify", mode, email, code); /* TODO */ },`,
+  supabase: `    send: async (mode: Mode, d: Data) => {
+      const { error } = await supabase.auth.signInWithOtp({
+        email: d.email,
+        options: {
+          shouldCreateUser: mode === "signup",
+          data: mode === "signup" ? { name: d.name } : undefined,
+          emailRedirectTo: window.location.origin,
+        },
+      });
+      if (error) throw error;
+    },
+    verify: async (_m: Mode, email: string, code: string) => {
+      const { error } = await supabase.auth.verifyOtp({ email, token: code, type: "email" });
+      if (error) throw error;
+      window.location.href = "/";
+    },`,
+  "next-auth": `    send: async (_m: Mode, d: Data) => {
+      // Needs an Email provider (id "email" in next-auth v4) configured on the server.
+      const res = await signIn("email", { email: d.email, redirect: false, callbackUrl: "/" });
+      if (res?.error) throw new Error("Could not send the email.");
+    },
+    verify: async (_m: Mode, email: string, code: string) => {
+      // Needs a custom generateVerificationToken on the Email provider that returns a 6-digit code.
+      window.location.href = "/api/auth/callback/email?email=" + encodeURIComponent(email) + "&token=" + encodeURIComponent(code) + "&callbackUrl=%2F";
+    },`,
+  clerk: `    send: async (mode: Mode, d: Data) => {
+      if (mode === "login") {
+        const r = await signIn!.create({ identifier: d.email });
+        const f = r.supportedFirstFactors?.find((x) => x.strategy === "email_code") as unknown as { emailAddressId: string } | undefined;
+        if (!f) throw new Error("Email code sign-in is not enabled for this account.");
+        await signIn!.prepareFirstFactor({ strategy: "email_code", emailAddressId: f.emailAddressId });
+      } else {
+        await signUp!.create({ emailAddress: d.email, firstName: d.name });
+        await signUp!.prepareEmailAddressVerification({ strategy: "email_code" });
+      }
+    },
+    verify: async (mode: Mode, _e: string, code: string) => {
+      if (mode === "login") {
+        const r = await signIn!.attemptFirstFactor({ strategy: "email_code", code });
+        if (r.status !== "complete") throw new Error("Additional verification required.");
+        await setSignInActive!({ session: r.createdSessionId });
+      } else {
+        const r = await signUp!.attemptEmailAddressVerification({ code });
+        if (r.status !== "complete") throw new Error("Additional sign-up steps required.");
+        await setSignUpActive!({ session: r.createdSessionId });
+      }
+      window.location.href = "/";
+    },`,
+};
+hooks.hook = hooks.hook.replace(/\n  \};\n\}$/, () => "\n" + (pw ? stub : extras[auth]) + "\n  };\n}");
+if (!hooks.hook.includes("send:")) fail("Internal error: could not attach auth handlers.");
+
+// ---- render template
+const here = path.dirname(fileURLToPath(import.meta.url));
+const rep = (t, k, v) => t.split(`__${k}__`).join(v);
+let src = fs.readFileSync(path.join(here, "..", "templates", "authica.tsx.tpl"), "utf8");
+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 (/__[A-Z]+__/.test(src)) fail("Unresolved template placeholder (internal error).");
+
+// ---- target path
+let target;
+if (isNext) {
+  const base = ["app", "src/app"].find(ex);
+  target = base ? `${base}/(auth)/login/page.tsx` : `${["pages", "src/pages"].find(ex) || fail("No app/ or pages/ directory found.")}/login.tsx`;
+} else target = "src/routes/login.tsx";
+if (ex(target) && !flag("force")) fail(`${target} already exists. Use --force to overwrite.`);
+fs.mkdirSync(path.dirname(p(target)), { recursive: true });
+fs.writeFileSync(p(target), src);
+created.push(target);
+
+// ---- vite route injection
+if (isVite) {
+  const detected = ["src/main.tsx", "src/App.tsx"].find((f) => ex(f) && /<Routes[\s>]|create\w*Router\(\s*\[/.test(fs.readFileSync(p(f), "utf8"))) || "src/App.tsx";
+  const entry = opt("entry", "") || (await ask("File that defines your routes?", detected));
+  const file = ex(entry) && /<Routes[\s>]|create\w*Router\(\s*\[/.test(fs.readFileSync(p(entry), "utf8")) ? entry : null;
+  const manual = () => steps.push(`Add a /login route in your router: import authica from "./routes/login"; { path: "/login", element: <authica /> }`);
+  if (!file) manual();
+  else {
+    let c = fs.readFileSync(p(file), "utf8");
+    if (c.includes("authica")) modified.push(`${file} (already wired)`);
+    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 />} />`);
+      else c = c.replace(/(create\w*Router\(\s*\[)/, `$1\n  { path: "/login", element: <authica /> },`);
+      let end = 0;
+      for (const m of c.matchAll(/^import\s[^;]*?['"][^'"]+['"];?[ \t]*$/gm)) end = Math.max(end, m.index + m[0].length);
+      const imp = `import authica from "${rel}";`;
+      c = end ? c.slice(0, end) + "\n" + imp + c.slice(end) : imp + "\n" + 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)`);
+    }
+  }
+}
+
+// ---- provider notices / Clerk SSO callback route
+if (providers.length) {
+  if (auth === "clerk") {
+    const pkgName = isNext ? "@clerk/nextjs" : "@clerk/react";
+    const cb = `${isNext ? '"use client";\n\n' : ""}import { AuthenticateWithRedirectCallback } from "${pkgName}";\n\nexport default function SSOCallback() {\n  return <AuthenticateWithRedirectCallback />;\n}\n`;
+    let cbTarget;
+    if (isNext) {
+      const appBase = ["app", "src/app"].find(ex);
+      cbTarget = appBase ? `${appBase}/sso-callback/page.tsx` : `${["pages", "src/pages"].find(ex)}/sso-callback.tsx`;
+    } else cbTarget = "src/routes/sso-callback.tsx";
+    if (!ex(cbTarget) || flag("force")) {
+      fs.mkdirSync(path.dirname(p(cbTarget)), { recursive: true });
+      fs.writeFileSync(p(cbTarget), cb);
+      created.push(cbTarget);
+      extraRoutes.push(isVite ? "/sso-callback (route to add)" : "/sso-callback");
+    }
+    steps.push(`Clerk dashboard: enable ${providers.join(", ")} under Social connections.`);
+    if (isVite) steps.push(`Add a /sso-callback route: import SSOCallback from "./routes/sso-callback"; { path: "/sso-callback", element: <SSOCallback /> }`);
+  } else if (auth === "next-auth") {
+    steps.push(`next-auth config: add providers ${providers.join(", ")} (ids must match).`);
+  } else if (auth === "supabase") {
+    steps.push(`Supabase dashboard: enable ${providers.join(", ")} under Authentication → Providers.`);
+  }
+}
+if (method === "otp" && auth === "supabase") steps.push("Supabase email templates: include {{ .Token }} so users receive the 6-digit code.");
+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]);
+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}…`);
+  const r = spawnSync(pm, [pm === "npm" ? "install" : "add", ...need], { cwd, stdio: "inherit", shell: process.platform === "win32" });
+  if (r.status !== 0) steps.unshift(`Install failed — run: ${pm} ${pm === "npm" ? "install" : "add"} ${need.join(" ")}`);
+} else if (need.length) steps.unshift(`Install: npm install ${need.join(" ")}`);
+rl?.close();
+
+// ---- summary box
+const pre = isNext ? "NEXT_PUBLIC_" : "VITE_";
+const envVars = {
+  none: [],
+  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"],
+}[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 (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];
+const rows = [
+  ["Routes", routes.join(", ")],
+  ["Auth", auth === "none" ? "none (UI only; wire your backend)" : auth],
+  ["Providers", providers.length ? providers.join(", ") : "none"],
+  ["Layout", `${layout} · ${style}`],
+  ["Sign-in", { password: "password", otp: "6-digit code (OTP)", magic: "magic link" }[method]],
+  ...(themeNote ? [["Theme", themeNote]] : []),
+  ...(rcNote ? [["Config", rcNote]] : []),
+  ...created.map((x, i) => [i ? "" : "Created", x]),
+  ...modified.map((x, i) => [i ? "" : "Modified", x]),
+];
+const W = Math.max(40, Math.min((process.stdout.columns || 80) - 2, 78)), inner = W - 4;
+const wrap = (prefix, text, ind) => {
+  const out = []; let cur = prefix;
+  for (const w of text.split(" ")) {
+    const sep = cur.trim() === "" || cur === prefix ? "" : " ";
+    if (cur.trim() !== "" && cur.length > ind && (cur + sep + w).length > inner) { out.push(cur); cur = " ".repeat(ind) + w; }
+    else cur += sep + w;
+  }
+  out.push(cur);
+  return out;
+};
+const body = [];
+for (const [k, v] of rows) body.push(...wrap(k.padEnd(11), v, 11));
+body.push("");
+body.push("Next steps");
+next.forEach((x, i) => body.push(...wrap(`${i + 1}. `, x, 3)));
+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/package.json

@@ -1,6 +1,17 @@
 {
   "name": "authica",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.1.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.",
+  "type": "module",
+  "bin": {
+    "authica": "bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "templates"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "license": "MIT"
+}

package/templates/authica.tsx.tpl

@@ -0,0 +1,343 @@
+__DIRECTIVE__import { useEffect, useState, type FormEvent, type InputHTMLAttributes, type ReactNode } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+__AUTH_IMPORTS__
+type Mode = "login" | "signup";
+type Social = "google" | "github" | "apple" | "discord" | "facebook";
+type Method = "password" | "otp" | "magic";
+type Data = { name: string; email: string; password: string };
+
+// ---- Generated options (edit freely) ----
+const LAYOUT = "__LAYOUT__" as "split" | "centered" | "canvas" | "modal" | "glass";
+const STYLE = "__STYLE__" as "default" | "brutalist" | "glassmorphism";
+const METHOD = "__METHOD__" as Method;
+const PASSWORDLESS = METHOD !== "password";
+const RESEND_SECONDS = 30;
+const SHOW_NAME = __SHOW_NAME__ as boolean;
+const CONFIRM_PASSWORD = __CONFIRM__ as boolean;
+const PROVIDERS = __PROVIDERS__ as Social[];
+const HERO_IMAGE = __HERO__ as string;
+
+__AUTH_HOOK__
+
+// Self-contained styles: no Tailwind needed. Colors come from your theme variables, with fallbacks.
+const CSS = `
+.as-root,.as-vars{--as-bg:__BG__;--as-fg:__FG__;--as-card:__CARD__;--as-cardfg:__CARDFG__;--as-primary:__PRIMARY__;--as-primaryfg:__PRIMARYFG__;--as-muted:__MUTED__;--as-border:__BORDER__;--as-danger:__DESTRUCTIVE__;--as-ok:#16a34a}
+.as-root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--as-bg);color:var(--as-fg);box-sizing:border-box}
+.as-root *,.as-vars *{box-sizing:border-box}
+.as-card{position:relative;display:flex;width:100%;max-width:440px;background:var(--as-card);color:var(--as-cardfg);border:1px solid var(--as-border);border-radius:var(--radius,1rem);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.15)}
+.as-split{max-width:980px;min-height:620px}
+.as-canvas,.as-s-glassmorphism,.as-glass{background:radial-gradient(60% 60% at 20% 10%,color-mix(in srgb,var(--as-primary) 55%,transparent),transparent),radial-gradient(50% 50% at 85% 90%,color-mix(in srgb,var(--as-primary) 35%,transparent),transparent),#0b0b12;background-size:cover;background-position:center;color:#fff}
+.as-canvas .as-card,.as-s-glassmorphism .as-card,.as-glass .as-card{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
+.as-canvas .as-tabs,.as-s-glassmorphism .as-tabs,.as-glass .as-tabs{background:rgba(255,255,255,.1)}.as-canvas .as-pill,.as-s-glassmorphism .as-pill,.as-glass .as-pill{background:rgba(255,255,255,.22)}
+.as-canvas .as-field,.as-canvas .as-sbtn,.as-s-glassmorphism .as-field,.as-glass .as-field,.as-s-glassmorphism .as-sbtn,.as-glass .as-sbtn{border-color:rgba(255,255,255,.25)}
+.as-canvas .as-field input::placeholder,.as-s-glassmorphism .as-field input::placeholder,.as-glass .as-field input::placeholder{color:rgba(255,255,255,.55)}
+.as-s-glassmorphism .as-card{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 90px -10px color-mix(in srgb,var(--as-primary) 65%,transparent)}
+.as-s-glassmorphism .as-btn{box-shadow:0 0 24px color-mix(in srgb,var(--as-primary) 70%,transparent)}
+.as-glass{background:radial-gradient(40% 40% at 15% 20%,color-mix(in srgb,var(--as-primary) 60%,transparent),transparent),radial-gradient(35% 35% at 85% 15%,rgba(168,85,247,.45),transparent),radial-gradient(40% 40% at 80% 85%,rgba(6,182,212,.4),transparent),radial-gradient(35% 35% at 10% 90%,rgba(236,72,153,.3),transparent),#07070d}
+.as-glass .as-card{background:rgba(255,255,255,.05);backdrop-filter:blur(32px) saturate(150%);-webkit-backdrop-filter:blur(32px) saturate(150%);border:1px solid color-mix(in srgb,var(--as-primary) 55%,rgba(255,255,255,.2));box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 32px color-mix(in srgb,var(--as-primary) 45%,transparent),0 0 90px -20px color-mix(in srgb,var(--as-primary) 60%,transparent)}
+.as-glass .as-btn{box-shadow:0 0 24px color-mix(in srgb,var(--as-primary) 70%,transparent)}
+.as-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;background:rgba(0,0,0,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
+.as-close{position:absolute;top:10px;right:12px;z-index:2;width:32px;height:32px;border:0;border-radius:999px;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer;opacity:.7}.as-close:hover{opacity:1}
+.as-trigger{width:auto;padding:10px 20px}
+.as-form{flex:1 1 0;min-width:0;padding:40px;display:flex;flex-direction:column;justify-content:center}
+.as-hero{flex:1 1 0;display:none;position:relative;overflow:hidden;background:var(--as-primary);background-size:cover;background-position:center;color:var(--as-primaryfg)}
+.as-hero.as-img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.6))}
+@media(min-width:860px){.as-split .as-hero{display:block}}
+.as-shape{position:absolute;border-radius:32px;background:rgba(255,255,255,.14)}
+.as-hcard{position:absolute;z-index:1;background:var(--as-card);color:var(--as-cardfg);border-radius:14px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:13px}
+.as-htext{position:absolute;z-index:1;left:32px;right:32px;bottom:32px}
+.as-htext h2{margin:0 0 6px;font-size:26px;font-weight:700}.as-htext p{margin:0;opacity:.85;font-size:14px}
+.as-tabs{position:relative;display:flex;background:var(--as-muted);padding:4px;border-radius:10px}
+.as-tab{position:relative;z-index:1;flex:1;padding:8px;font:inherit;font-size:14px;font-weight:500;border:0;background:none;color:inherit;cursor:pointer}
+.as-pill{position:absolute;inset:0;z-index:-1;border-radius:7px;background:var(--as-bg);box-shadow:0 1px 3px rgba(0,0,0,.2)}
+.as-title{font-size:30px;font-weight:700;margin:28px 0 4px}.as-sub{font-size:13px;opacity:.6;margin:0 0 20px}
+.as-field{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--as-border);padding:10px 2px;margin-bottom:14px}
+.as-field:focus-within{border-color:var(--as-primary)}
+.as-field svg{width:18px;height:18px;flex:none;opacity:.5}.as-field svg.as-ok{color:var(--as-ok);opacity:1}
+.as-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:14px}
+.as-rules{list-style:none;margin:-6px 0 14px;padding:0;font-size:12px}
+.as-rules li{opacity:.55}.as-rules li.on{color:var(--as-ok);opacity:1}
+.as-err{color:var(--as-danger);font-size:13px;margin:0 0 10px}
+.as-btn{width:100%;border:0;border-radius:999px;padding:12px;font:inherit;font-size:14px;font-weight:600;background:var(--as-primary);color:var(--as-primaryfg);cursor:pointer}
+.as-btn:disabled{opacity:.6;cursor:default}
+.as-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.as-sbtn svg{width:18px;height:18px;flex:none}
+.as-link{display:block;width:100%;margin-top:10px;padding:6px;border:0;background:none;color:inherit;font:inherit;font-size:13px;opacity:.75;cursor:pointer;text-decoration:underline}.as-link:disabled{opacity:.45;cursor:default;text-decoration:none}
+.as-s-brutalist{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.as-s-brutalist .as-card{background:#fff;color:#000;border:2px solid #000;border-radius:0;box-shadow:4px 4px 0 0 #000;backdrop-filter:none;-webkit-backdrop-filter:none}
+.as-s-brutalist .as-tabs{background:#fff;border:2px solid #000;border-radius:0;padding:0}
+.as-s-brutalist .as-tab{font-weight:700;text-transform:uppercase}
+.as-s-brutalist .as-pill{background:#ffe14d;border-radius:0;box-shadow:none}
+.as-s-brutalist .as-field{background:#fff;border:2px solid #000;border-radius:0;padding:10px}
+.as-s-brutalist .as-field:focus-within{border-color:#000;box-shadow:4px 4px 0 0 #000}
+.as-s-brutalist .as-field input::placeholder{color:rgba(0,0,0,.5)}
+.as-s-brutalist .as-btn,.as-s-brutalist .as-sbtn{border:2px solid #000;border-radius:0;box-shadow:4px 4px 0 0 #000;font-weight:700;text-transform:uppercase}
+.as-s-brutalist .as-sbtn{background:#fff;color:#000}
+.as-s-brutalist .as-btn:active,.as-s-brutalist .as-sbtn:active{transform:translate(4px,4px);box-shadow:none}
+.as-s-brutalist .as-hero{border-left:2px solid #000}
+.as-s-brutalist .as-hcard{border:2px solid #000;border-radius:0;box-shadow:4px 4px 0 0 #000}
+.as-s-brutalist .as-tab,.as-s-brutalist .as-link{color:#000}
+.as-sbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid var(--as-border);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer}
+`;
+
+const ICONS = {
+  user: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
+  mail: "M3 5h18v14H3zM3 7l9 6 9-6",
+  lock: "M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4",
+  check: "M5 13l4 4L19 7",
+};
+const BRANDS: Record<Social, { label: string; svg: ReactNode }> = {
+  google: { label: "Google", svg: (<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285F4" d="M23.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.5a5.6 5.6 0 0 1-2.4 3.6v3h3.9c2.3-2.1 3.5-5.2 3.5-8.8z"/><path fill="#34A853" d="M12 24c3.2 0 6-1.1 7.9-2.9l-3.9-3c-1.1.7-2.5 1.2-4 1.2-3.1 0-5.7-2.1-6.6-4.9H1.4v3.1A12 12 0 0 0 12 24z"/><path fill="#FBBC05" d="M5.4 14.3a7.2 7.2 0 0 1 0-4.6V6.6H1.4a12 12 0 0 0 0 10.8z"/><path fill="#EA4335" d="M12 4.8c1.8 0 3.3.6 4.6 1.8l3.4-3.4A12 12 0 0 0 1.4 6.6l4 3.1C6.3 6.9 8.9 4.8 12 4.8z"/></svg>) },
+  github: { label: "GitHub", svg: (<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5a11.5 11.5 0 0 0-3.6 22.4c.6.1.8-.2.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.2 1.2a11 11 0 0 1 5.8 0c2.2-1.5 3.2-1.2 3.2-1.2.6 1.6.2 2.8.1 3.1.7.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.2c0 .3.2.7.8.6A11.5 11.5 0 0 0 12 .5z"/></svg>) },
+  apple: { label: "Apple", svg: (<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16.4 12.6c0-2.4 2-3.5 2.1-3.6-1.2-1.7-3-1.9-3.6-2-1.5-.2-3 .9-3.8.9s-2-.9-3.2-.8A4.8 4.8 0 0 0 3.8 9.6c-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.5 1.3-.1 1.8-.8 3.3-.8s2 .8 3.3.8c1.4 0 2.3-1.2 3.100-2.5a11 11 0 0 0 1.400-2.900c-.1 0-2.600-1-2.600-4.300zM14 5.200a4.500 4.500 0 0 0 1-3.200 4.600 4.600 0 0 0-3 1.500 4.300 4.300 0 0 0-1.100 3.100A3.800 3.800 0 0 0 14 5.200z"/></svg>) },
+  discord: { label: "Discord", svg: (<svg viewBox="0 0 24 24" fill="#5865F2" aria-hidden="true"><path d="M20.3 4.4A19.800 19.800 0 0 0 15.400 3l-.2.500a18.400 18.400 0 0 0-6.400 0L8.600 3a19.700 19.700 0 0 0-4.900 1.400C.600 9 -.200 13.500.200 18a19.900 19.900 0 0 0 6 3l1.300-2.100c-.7-.3-1.400-.600-2-1l.5-.4a14.200 14.200 0 0 0 12 0l.5.400c-.6.400-1.300.700-2 1l1.300 2.100a19.900 19.900 0 0 0 6-3c.5-5.200-.8-9.700-3.500-13.600zM8.300 15.300c-1.200 0-2.100-1.100-2.100-2.400s.9-2.400 2.100-2.400 2.100 1.100 2.100 2.400-.9 2.400-2.100 2.400zm7.400 0c-1.200 0-2.100-1.100-2.100-2.400s.9-2.400 2.100-2.400 2.100 1.100 2.100 2.400-.9 2.400-2.100 2.400z"/></svg>) },
+  facebook: { label: "Facebook", svg: (<svg viewBox="0 0 24 24" fill="#1877F2" aria-hidden="true"><path d="M24 12a12 12 0 1 0-13.900 11.900v-8.400h-3V12h3V9.400c0-3 1.800-4.700 4.500-4.700 1.300 0 2.700.2 2.700.2v3h-1.500c-1.500 0-2 .9-2 1.900V12h3.400l-.5 3.500h-2.800v8.400A12 12 0 0 0 24 12z"/></svg>) },
+};
+function Icon({ d, ok }: { d: string; ok?: boolean }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={ok ? "as-ok" : undefined} aria-hidden="true">
+      <path d={d} />
+    </svg>
+  );
+}
+function Field({ icon, valid, ...p }: { icon: string; valid: boolean } & InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <label className="as-field">
+      <Icon d={icon} />
+      <input {...p} />
+      {valid && <Icon d={ICONS.check} ok />}
+    </label>
+  );
+}
+
+type ModalProps = { open?: boolean; onClose?: () => void; trigger?: ReactNode };
+
+export default function authica({ open, onClose, trigger }: ModalProps = {}) {
+  const routeMode = open === undefined && trigger === undefined;
+  const [inner, setInner] = useState(routeMode);
+  const isOpen = open ?? inner;
+  const close = () => {
+    setInner(false);
+    if (onClose) onClose();
+    else if (routeMode) { if (window.history.length > 1) window.history.back(); else window.location.href = "/"; }
+  };
+  useEffect(() => {
+    if (LAYOUT !== "modal" || !isOpen) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") close(); };
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", onKey);
+    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+  const [mode, setMode] = useState<Mode>("login");
+  const [v, setV] = useState({ name: "", email: "", password: "", confirm: "" });
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [step, setStep] = useState<"form" | "code">("form");
+  const [code, setCode] = useState("");
+  const [left, setLeft] = useState(0);
+  const { submit, social, send, verify } = useAuth();
+  const isLogin = mode === "login";
+  const split = LAYOUT === "split";
+  const set = (k: keyof typeof v) => (e: { target: { value: string } }) => setV({ ...v, [k]: e.target.value });
+
+  const rules = [
+    ["At least 8 characters", v.password.length >= 8],
+    ["A number or a symbol", /[\d\W_]/.test(v.password)],
+    ["Lowercase and uppercase letters", /[a-z]/.test(v.password) && /[A-Z]/.test(v.password)],
+  ] as const;
+  useEffect(() => {
+    if (left <= 0) return;
+    const t = setTimeout(() => setLeft((n) => n - 1), 1000);
+    return () => clearTimeout(t);
+  }, [left]);
+
+  const emailOk = /^\S+@\S+\.\S+$/.test(v.email);
+
+  async function run(fn: () => Promise<void>) {
+    setError("");
+    setLoading(true);
+    try {
+      await fn();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function resend() {
+    run(async () => {
+      await send(mode, { name: v.name, email: v.email, password: "" });
+      setLeft(RESEND_SECONDS);
+    });
+  }
+
+  function onSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (step === "code") return run(() => verify(mode, v.email, code));
+    if (PASSWORDLESS) {
+      return run(async () => {
+        await send(mode, { name: v.name, email: v.email, password: "" });
+        setStep("code");
+        setLeft(RESEND_SECONDS);
+      });
+    }
+    if (!isLogin) {
+      if (!rules.every((r) => r[1])) return setError("Password does not meet the requirements.");
+      if (CONFIRM_PASSWORD && v.password !== v.confirm) return setError("Passwords do not match.");
+    }
+    run(() => submit(mode, { name: v.name, email: v.email, password: v.password }));
+  }
+
+  const spring = { type: "spring", stiffness: 300, damping: 30 } as const;
+  const formPanel = (
+    <motion.div layout="position" transition={spring} className="as-form" style={{ order: isLogin ? 1 : 2 }}>
+      <div className="as-tabs">
+        {(["login", "signup"] as const).map((m) => (
+          <button key={m} type="button" className="as-tab" onClick={() => { setMode(m); setError(""); setStep("form"); setCode(""); setLeft(0); }}>
+            {mode === m && <motion.span layoutId="as-pill" className="as-pill" transition={spring} />}
+            {m === "login" ? "Sign In" : "Sign Up"}
+          </button>
+        ))}
+      </div>
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.form
+          key={mode + step}
+          onSubmit={onSubmit}
+          initial={{ opacity: 0, x: isLogin ? -20 : 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: isLogin ? 20 : -20 }}
+          transition={{ duration: 0.2 }}
+        >
+          {step === "form" ? (
+            <>
+              <h1 className="as-title">{isLogin ? "Welcome back" : "Sign Up"}</h1>
+                  <p className="as-sub">{isLogin ? "Sign in to continue." : "Create your account in seconds."}</p>
+              {!isLogin && SHOW_NAME && (
+                    <Field icon={ICONS.user} valid={v.name.trim().length > 1} name="name" required placeholder="Full name" autoComplete="name" value={v.name} onChange={set("name")} />
+              )}
+                  <Field icon={ICONS.mail} valid={emailOk} name="email" type="email" required placeholder="Email" autoComplete="email" value={v.email} onChange={set("email")} />
+              {!PASSWORDLESS && (
+                <>
+                  <Field icon={ICONS.lock} valid={!isLogin && rules.every((r) => r[1])} name="password" type="password" required placeholder="Password" autoComplete={isLogin ? "current-password" : "new-password"} value={v.password} onChange={set("password")} />
+                  {!isLogin && (
+                            <ul className="as-rules">
+                      {rules.map(([t, ok]) => <li key={t} className={ok ? "on" : ""}>{ok ? "✓" : "•"} {t}</li>)}
+                            </ul>
+                  )}
+                  {!isLogin && CONFIRM_PASSWORD && (
+                            <Field icon={ICONS.lock} valid={v.confirm.length > 0 && v.confirm === v.password} name="confirm" type="password" required placeholder="Re-type password" autoComplete="new-password" value={v.confirm} onChange={set("confirm")} />
+                  )}
+                </>
+              )}
+          {error && <p role="alert" className="as-err">{error}</p>}
+          <button type="submit" disabled={loading} className="as-btn">
+            {loading ? "Please wait…" : PASSWORDLESS ? (METHOD === "otp" ? "Send code" : "Send magic link") : isLogin ? "Sign In" : "Sign Up"}
+          </button>
+            </>
+          ) : (
+            <>
+              <h1 className="as-title">{METHOD === "otp" ? "Enter your code" : "Check your email"}</h1>
+              <p className="as-sub">We sent {METHOD === "otp" ? "a 6-digit code" : "a magic link"} to {v.email}.</p>
+              {METHOD === "otp" && (
+                <Field icon={ICONS.lock} valid={code.length === 6} name="code" inputMode="numeric" pattern="[0-9]{6}" maxLength={6} required placeholder="123456" autoComplete="one-time-code" value={code} onChange={(e) => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))} />
+              )}
+              {error && <p role="alert" className="as-err">{error}</p>}
+              {METHOD === "otp" && (
+                <button type="submit" disabled={loading || code.length !== 6} className="as-btn">
+                  {loading ? "Please wait…" : "Verify"}
+                </button>
+              )}
+              <button type="button" className="as-link" disabled={left > 0 || loading} onClick={resend}>
+                {left > 0 ? "Resend in " + left + "s" : METHOD === "otp" ? "Resend code" : "Resend link"}
+              </button>
+              <button type="button" className="as-link" onClick={() => { setStep("form"); setCode(""); setError(""); setLeft(0); }}>
+                Use a different email
+              </button>
+            </>
+          )}
+          {step === "form" && PROVIDERS.length > 0 && (
+            <div className="as-social">
+              {PROVIDERS.map((p) => (
+                <button key={p} type="button" className="as-sbtn" disabled={loading} onClick={() => run(() => social(p))}>
+                  {BRANDS[p].svg}
+                  {BRANDS[p].label}
+                </button>
+              ))}
+            </div>
+          )}
+        </motion.form>
+      </AnimatePresence>
+    </motion.div>
+  );
+
+  const heroPanel = (
+    <motion.div
+      layout="position"
+      transition={spring}
+      className={"as-hero" + (HERO_IMAGE ? " as-img" : "")}
+      style={{ order: isLogin ? 2 : 1, backgroundImage: HERO_IMAGE ? `url(${HERO_IMAGE})` : undefined }}
+    >
+      {!HERO_IMAGE && (
+        <>
+          <div className="as-shape" style={{ width: 360, height: 360, top: -120, right: -80, transform: "rotate(18deg)" }} />
+          <div className="as-shape" style={{ width: 420, height: 420, bottom: -180, left: -120, transform: "rotate(-14deg)", background: "rgba(255,255,255,.1)" }} />
+        </>
+      )}
+      <div className="as-hcard" style={{ top: 60, left: 40, width: 190 }}>
+        <div style={{ opacity: 0.6, fontSize: 12 }}>Secure</div>
+        <strong style={{ fontSize: 20 }}>Your data, your rules</strong>
+      </div>
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.div key={mode} className="as-htext" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -12 }} transition={{ duration: 0.2 }}>
+          <h2>{isLogin ? "Good to see you again" : "Join in a few clicks"}</h2>
+          <p>{isLogin ? "Pick up right where you left off." : "One account for everything you need."}</p>
+        </motion.div>
+      </AnimatePresence>
+    </motion.div>
+  );
+
+  const card = (
+    <motion.div layout transition={spring} className={"as-card" + (split ? " as-split" : "")}>
+      {LAYOUT === "modal" && <button type="button" className="as-close" aria-label="Close" onClick={close}>×</button>}
+      {formPanel}
+      {split && heroPanel}
+    </motion.div>
+  );
+
+  if (LAYOUT === "modal") {
+    return (
+      <div className={"as-vars as-s-" + STYLE} style={{ display: "contents" }}>
+        <style>{CSS}</style>
+        {typeof trigger === "string" ? (
+          <button type="button" className="as-btn as-trigger" onClick={() => setInner(true)}>{trigger}</button>
+        ) : trigger !== undefined ? (
+          <span role="presentation" onClick={() => setInner(true)}>{trigger}</span>
+        ) : null}
+        <AnimatePresence>
+          {isOpen && (
+            <motion.div
+              className="as-overlay"
+              role="dialog"
+              aria-modal="true"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onMouseDown={(e) => { if (e.target === e.currentTarget) close(); }}
+            >
+              {card}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    );
+  }
+
+  return (
+    <div className={"as-root as-s-" + STYLE + (LAYOUT === "canvas" ? " as-canvas" : LAYOUT === "glass" ? " as-glass" : "")} style={LAYOUT === "canvas" && HERO_IMAGE ? { backgroundImage: `linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),url(${HERO_IMAGE})` } : undefined}>
+      <style>{CSS}</style>
+      {card}
+    </div>
+  );
+}