@techstream/quark-create-app 1.8.0 → 1.10.0

package/templates/base-project/scripts/doctor.js

@@ -0,0 +1,261 @@
+#!/usr/bin/env node
+/**
+ * scripts/doctor.js
+ *
+ * Audits this project for unfinished post-scaffold customisation.
+ * Run it at any time — it is safe, read-only by default.
+ *
+ * Usage:
+ *   pnpm doctor          # Audit only
+ *   pnpm doctor:fix      # Audit + auto-remove Quark aesthetic scaffolding
+ *
+ * Extend the CHECKS array below to add your own project-specific rules.
+ * This script has zero external dependencies.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, "..");
+const FIX = process.argv.includes("--fix");
+
+// ─── ANSI helpers ─────────────────────────────────────────────────────────────
+
+const c = {
+	reset: "\x1b[0m",
+	bold: "\x1b[1m",
+	dim: "\x1b[2m",
+	red: "\x1b[31m",
+	green: "\x1b[32m",
+	yellow: "\x1b[33m",
+	blue: "\x1b[34m",
+};
+
+const fmt = {
+	bold: (s) => `${c.bold}${s}${c.reset}`,
+	dim: (s) => `${c.dim}${s}${c.reset}`,
+	red: (s) => `${c.red}${s}${c.reset}`,
+	green: (s) => `${c.green}${s}${c.reset}`,
+	yellow: (s) => `${c.yellow}${s}${c.reset}`,
+	blue: (s) => `${c.blue}${s}${c.reset}`,
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function exists(rel) {
+	return fs.existsSync(path.join(ROOT, rel));
+}
+
+function read(rel) {
+	const abs = path.join(ROOT, rel);
+	return fs.existsSync(abs) ? fs.readFileSync(abs, "utf-8") : null;
+}
+
+/** Remove a file or directory tree (relative to ROOT). */
+function remove(rel) {
+	const abs = path.join(ROOT, rel);
+	fs.rmSync(abs, { recursive: true, force: true });
+}
+
+// ─── Finding model ────────────────────────────────────────────────────────────
+
+/**
+ * @typedef {{ category: string, status: 'error'|'warn'|'info', key: string,
+ *             message: string, detail: string, fix: string, fixable: boolean }} Finding
+ */
+
+/** @type {Finding[]} */
+const findings = [];
+
+function warn(key, category, message, detail, fix, fixable = false) {
+	findings.push({ category, status: "warn", key, message, detail, fix, fixable });
+}
+
+function error(key, category, message, detail, fix, fixable = false) {
+	findings.push({ category, status: "error", key, message, detail, fix, fixable });
+}
+
+function info(key, category, message, detail, fix) {
+	findings.push({ category, status: "info", key, message, detail, fix, fixable: false });
+}
+
+// ─── Checks ───────────────────────────────────────────────────────────────────
+
+// Read .quark-link.json to understand what packages were included at scaffold time.
+const quarkLink = (() => {
+	try {
+		return JSON.parse(read(".quark-link.json") ?? "{}");
+	} catch {
+		return {};
+	}
+})();
+const hasUI = Array.isArray(quarkLink.packages) && quarkLink.packages.includes("ui");
+
+// ── Check 1: Quark Animation still present ────────────────────────────────────
+if (exists("apps/web/src/app/_components/QuarkAnimation.js")) {
+	warn(
+		"quark-animation",
+		"branding",
+		"QuarkAnimation is still in the project",
+		"apps/web/src/app/_components/QuarkAnimation.js",
+		"Replace or remove the animation and update the home page with your own hero content",
+		true,
+	);
+}
+
+// ── Check 2: Playground page present (only relevant with UI package) ──────────
+if (hasUI && exists("apps/web/src/app/playground")) {
+	warn(
+		"playground",
+		"branding",
+		"Playground page is still present",
+		"apps/web/src/app/playground/",
+		"Consider removing the playground before going to production",
+		true,
+	);
+}
+
+// ── Check 3: APP_NAME / APP_DESCRIPTION still reference "Quark" ───────────────
+const envContent = read(".env");
+if (envContent) {
+	const nameMatch = envContent.match(/^APP_NAME=(.+)$/m);
+	const descMatch = envContent.match(/^APP_DESCRIPTION=(.+)$/m);
+	const nameVal = nameMatch?.[1]?.trim() ?? "";
+	const descVal = descMatch?.[1]?.trim() ?? "";
+
+	if (/\bquark\b/i.test(nameVal) || /\bquark\b/i.test(descVal)) {
+		warn(
+			"app-identity",
+			"metadata",
+			'APP_NAME or APP_DESCRIPTION still references "Quark"',
+			`.env → APP_NAME="${nameVal}", APP_DESCRIPTION="${descVal}"`,
+			"Update APP_NAME and APP_DESCRIPTION in your .env to match your project",
+		);
+	}
+}
+
+// ── Check 4: Placeholder secrets (CHANGE_ME) left in .env ────────────────────
+if (envContent && envContent.includes("CHANGE_ME")) {
+	const lines = envContent
+		.split("\n")
+		.map((l, i) => ({ line: i + 1, text: l }))
+		.filter(({ text }) => text.includes("CHANGE_ME"))
+		.map(({ line, text }) => `  line ${line}: ${text.split("=")[0]}`);
+
+	error(
+		"secrets",
+		"security",
+		"CHANGE_ME placeholders found in .env — rotate these before deploying",
+		lines.join("\n"),
+		"Replace every CHANGE_ME value with a real secret",
+	);
+}
+
+// ── Check 5: .env missing vars that exist in .env.example ────────────────────
+const exampleContent = read(".env.example");
+if (envContent && exampleContent) {
+	const defined = new Set(
+		envContent
+			.split("\n")
+			.filter((l) => l.includes("=") && !l.startsWith("#"))
+			.map((l) => l.split("=")[0].trim()),
+	);
+	const missing = exampleContent
+		.split("\n")
+		.filter((l) => l.includes("=") && !l.startsWith("#"))
+		.map((l) => l.split("=")[0].trim())
+		.filter((k) => k && !defined.has(k));
+
+	if (missing.length > 0) {
+		warn(
+			"env-missing",
+			"configuration",
+			`.env.example defines ${missing.length} key(s) not present in .env`,
+			missing.map((k) => `  ${k}`).join("\n"),
+			"Add the missing keys to your .env (copy from .env.example and fill in values)",
+		);
+	}
+}
+
+// ── Check 6: README still contains Quark template content ────────────────────
+const readmeContent = read("README.md");
+if (readmeContent && /quark/i.test(readmeContent)) {
+	info(
+		"readme",
+		"documentation",
+		"README.md still contains references to Quark",
+		"README.md",
+		"Update the README to describe your own project",
+	);
+}
+
+// ─── --fix: auto-remove fixable items ────────────────────────────────────────
+
+const STATUS_ICON = { error: "✗", warn: "⚠", info: "·" };
+const STATUS_COLOR = { error: fmt.red, warn: fmt.yellow, info: fmt.dim };
+
+// Print the report first so users see what was found before anything is changed.
+console.log(fmt.bold(fmt.blue("\n🩺 Quark Doctor\n")));
+
+if (findings.length === 0) {
+	console.log(fmt.green("  ✓ Nothing to do — project looks clean!\n"));
+	process.exit(0);
+}
+
+// Group by category
+const categories = [...new Set(findings.map((f) => f.category))];
+for (const cat of categories) {
+	console.log(fmt.bold(`  ${cat}`));
+	for (const f of findings.filter((f) => f.category === cat)) {
+		const icon = STATUS_ICON[f.status];
+		const colorFn = STATUS_COLOR[f.status];
+		console.log(`    ${colorFn(`${icon} ${f.message}`)}`);
+		if (f.detail) {
+			for (const line of f.detail.split("\n")) {
+				console.log(fmt.dim(`      ${line}`));
+			}
+		}
+		if (!FIX || !f.fixable) {
+			console.log(fmt.dim(`      → ${f.fix}`));
+		}
+	}
+	console.log();
+}
+
+const errorCount = findings.filter((f) => f.status === "error").length;
+const warnCount = findings.filter((f) => f.status === "warn").length;
+const fixableCount = findings.filter((f) => f.fixable).length;
+
+const parts = [];
+if (errorCount) parts.push(fmt.red(`${errorCount} error${errorCount > 1 ? "s" : ""}`));
+if (warnCount) parts.push(fmt.yellow(`${warnCount} warning${warnCount > 1 ? "s" : ""}`));
+console.log(fmt.bold(`  Summary: ${parts.join(", ")}`));
+
+if (FIX) {
+	const fixable = findings.filter((f) => f.fixable);
+	if (fixable.length === 0) {
+		console.log(fmt.dim("  No auto-fixable items found.\n"));
+	} else {
+		console.log(fmt.bold(fmt.blue("\n🔧 Applying fixes…\n")));
+		for (const f of fixable) {
+			if (f.key === "quark-animation") {
+				remove("apps/web/src/app/_components/QuarkAnimation.js");
+				console.log(fmt.green(`  ✓ Removed QuarkAnimation.js`));
+			} else if (f.key === "playground") {
+				remove("apps/web/src/app/playground");
+				console.log(fmt.green(`  ✓ Removed apps/web/src/app/playground/`));
+			}
+		}
+		console.log();
+	}
+} else if (fixableCount > 0) {
+	console.log(
+		fmt.dim(`  ${fixableCount} item(s) can be auto-removed with: pnpm doctor:fix\n`),
+	);
+} else {
+	console.log();
+}
+
+if (errorCount > 0) process.exit(1);

package/templates/base-project/turbo.json

@@ -18,7 +18,8 @@
 			"outputs": ["node_modules/.prisma/client"]
 		},
 		"db:migrate": {
-			"cache": false
+			"cache": false,
+			"interactive": true
 		},
 		"db:push": {
 			"cache": false

package/templates/config/package.json

@@ -2,6 +2,7 @@
 	"name": "@myquark/config",
 	"version": "1.0.0",
 	"type": "module",
+	"main": "src/index.js",
 	"exports": {
 		".": "./src/index.js",
 		"./app-url": "./src/app-url.js",

package/templates/config/src/index.js

@@ -1,8 +1,6 @@
 export const config = {
 	appName: process.env.APP_NAME || "Quark",
-	appDescription:
-		process.env.APP_DESCRIPTION ||
-		"A modern monorepo with Next.js, React, and Prisma",
+	appDescription: process.env.APP_DESCRIPTION || "A Quark-powered application",
 };
 
 export { getAllowedOrigins, getAppUrl, syncNextAuthUrl } from "./app-url.js";

package/templates/config/src/validate-env.js

@@ -37,10 +37,16 @@ const envSchema = {
 	// Email provider
 	EMAIL_PROVIDER: {
 		required: false,
-		description: 'Email provider — "smtp" (default) or "resend"',
+		description: 'Email provider — "smtp" (default), "resend", or "zeptomail"',
 	},
 	EMAIL_FROM: { required: false, description: "Sender email address" },
 	RESEND_API_KEY: { required: false, description: "Resend API key" },
+	ZEPTOMAIL_TOKEN: { required: false, description: "Zeptomail API token" },
+	ZEPTOMAIL_URL: { required: false, description: "Zeptomail API base URL" },
+	ZEPTOMAIL_BOUNCE_EMAIL: {
+		required: false,
+		description: "Zeptomail bounce email address",
+	},
 
 	// NextAuth
 	NEXTAUTH_SECRET: {
@@ -58,6 +64,11 @@ const envSchema = {
 		required: false,
 		description: "Application name — used in metadata, emails, and page titles",
 	},
+	APP_DESCRIPTION: {
+		required: false,
+		description:
+			"Application description — used for SEO metadata and social previews",
+	},
 	APP_URL: {
 		required: false,
 		description:
@@ -69,6 +80,12 @@ const envSchema = {
 	},
 	PORT: { required: false, description: "Web server port" },
 
+	// Worker
+	WORKER_CONCURRENCY: {
+		required: false,
+		description: "Number of concurrent jobs per queue (default: 5)",
+	},
+
 	// Storage
 	STORAGE_PROVIDER: {
 		required: false,
@@ -80,10 +97,19 @@ const envSchema = {
 	},
 	S3_BUCKET: { required: false, description: "S3 bucket name" },
 	S3_REGION: { required: false, description: "S3 region" },
-	S3_ENDPOINT: { required: false, description: "S3-compatible endpoint URL" },
+	S3_ENDPOINT: {
+		required: false,
+		description:
+			"S3-compatible endpoint URL (required for non-AWS providers: R2, MinIO, etc.)",
+	},
 	S3_ACCESS_KEY_ID: { required: false, description: "S3 access key" },
 	S3_SECRET_ACCESS_KEY: { required: false, description: "S3 secret key" },
 	S3_PUBLIC_URL: { required: false, description: "S3 public URL prefix" },
+	ASSET_CDN_URL: {
+		required: false,
+		description:
+			"Public CDN base URL for asset delivery — provider-agnostic (CloudFront, Cloudflare, Bunny, etc.). Falls back to /api/files when unset.",
+	},
 };
 
 /**
@@ -129,6 +155,25 @@ export function validateEnv(service = "web") {
 
 	// --- Cross-field validation ---
 
+	// Placeholder value security check
+	const placeholderPattern = /^CHANGE_ME_/i;
+	const criticalKeys = [
+		"NEXTAUTH_SECRET",
+		"POSTGRES_PASSWORD",
+		"RESEND_API_KEY",
+		"ZEPTOMAIL_TOKEN",
+		"S3_SECRET_ACCESS_KEY",
+		"SMTP_PASSWORD",
+	];
+	for (const key of criticalKeys) {
+		const value = process.env[key];
+		if (value && placeholderPattern.test(value)) {
+			errors.push(
+				`${key} contains a placeholder value — replace with a real secret (${envSchema[key]?.description || ""})`,
+			);
+		}
+	}
+
 	// Database: either DATABASE_URL or POSTGRES_USER must be set (skip in test)
 	if (!isTest) {
 		const hasDbUrl = !!process.env.DATABASE_URL;
@@ -141,16 +186,33 @@ export function validateEnv(service = "web") {
 	}
 
 	// Redis: warn if not configured (defaults to localhost in dev, will fail in prod)
+	const currentEnv = (process.env.NODE_ENV || "").toLowerCase();
 	if (
 		!process.env.REDIS_URL &&
 		!process.env.REDIS_HOST &&
-		process.env.NODE_ENV === "production"
+		(currentEnv === "production" || currentEnv === "staging")
 	) {
 		warnings.push(
 			"Redis not configured: set REDIS_URL or REDIS_HOST (defaults to localhost)",
 		);
 	}
 
+	// SEO metadata: APP_DESCRIPTION should be explicitly set before production
+	const isProductionLike =
+		currentEnv === "production" || currentEnv === "staging";
+	if (!isTest && isProductionLike) {
+		const appDescription = process.env.APP_DESCRIPTION;
+		if (!appDescription) {
+			warnings.push(
+				"APP_DESCRIPTION not set: metadata description will fall back to a generic value. Set APP_DESCRIPTION before production.",
+			);
+		} else if (/^CHANGE_ME_|^TODO_/i.test(appDescription)) {
+			warnings.push(
+				"APP_DESCRIPTION appears to be a placeholder value. Update it before production.",
+			);
+		}
+	}
+
 	// Conditional: S3 storage requires bucket + credentials
 	if (process.env.STORAGE_PROVIDER === "s3") {
 		for (const key of [
@@ -171,6 +233,20 @@ export function validateEnv(service = "web") {
 		errors.push("Missing RESEND_API_KEY — required when EMAIL_PROVIDER=resend");
 	}
 
+	// Conditional: Zeptomail provider requires token and URL
+	if (process.env.EMAIL_PROVIDER === "zeptomail") {
+		if (!process.env.ZEPTOMAIL_TOKEN) {
+			errors.push(
+				"Missing ZEPTOMAIL_TOKEN — required when EMAIL_PROVIDER=zeptomail",
+			);
+		}
+		if (!process.env.ZEPTOMAIL_URL) {
+			errors.push(
+				"Missing ZEPTOMAIL_URL — required when EMAIL_PROVIDER=zeptomail",
+			);
+		}
+	}
+
 	// Log warnings (non-fatal)
 	for (const warning of warnings) {
 		console.warn(`[env] ⚠️  ${warning}`);

package/templates/jobs/package.json

@@ -2,7 +2,8 @@
 	"name": "@myquark/jobs",
 	"version": "1.0.0",
 	"type": "module",
+	"main": "src/index.js",
 	"dependencies": {
-		"bullmq": "^5.69.3"
+		"bullmq": "^5.70.4"
 	}
 }

package/templates/ui/README.md

@@ -0,0 +1,67 @@
+# @yourscope/ui
+
+Scaffolded UI primitives for your Quark project. These components are **yours** — modify, extend, or replace them freely.
+
+> This package is scaffolded via `quark-create-app`. There is no version sync back to Quark after scaffolding.
+
+## Import
+
+```javascript
+import { Button, Card, Badge } from '@yourscope/ui';
+```
+
+## Components
+
+### Button
+Props: `variant` ('primary' | 'secondary' | 'danger' | 'ghost', default: 'primary'), `size` ('sm' | 'md' | 'lg', default: 'md'), `className`, all native button attributes.
+
+### Input
+Props: `className`, all native input attributes.
+
+### Label
+Props: `className`, all native label attributes.
+
+### Textarea
+Props: `className`, all native textarea attributes.
+
+### Select
+Props: `className`, `children` (option elements), all native select attributes.
+
+### Checkbox
+Props: `id`, `label` (string), `className`, all native checkbox input attributes.
+
+### Badge
+Props: `variant` ('default' | 'success' | 'warning' | 'danger' | 'info', default: 'default'), `className`.
+
+### Card / CardHeader / CardTitle / CardContent / CardFooter
+Composable card container. All parts accept `className`.
+
+### Table / TableHeader / TableBody / TableRow / TableHead / TableCell
+Composable table. `Table` wraps in a scrollable container. All parts accept `className`.
+
+### Skeleton
+Props: `className` (use to set width/height for the placeholder shape).
+
+### Dialog
+`"use client"` — Props: `open` (bool), `onClose` (fn), `title` (string), `children`, `className`.
+
+### Toast / useToast
+`"use client"` — `Toast` props: `message`, `variant` ('default' | 'success' | 'error'), `onClose` (fn), `visible` (bool).  
+`useToast()` returns `{ show(message, variant?), hide, toastProps }`. Spread `toastProps` onto `<Toast />`.
+
+```javascript
+// Example
+const { show, toastProps } = useToast();
+return (
+  <>
+    <Button onClick={() => show('Saved!', 'success')}>Save</Button>
+    <Toast {...toastProps} />
+  </>
+);
+```
+
+## Design notes
+- Tailwind CSS only. No CSS-in-JS, no external dependencies.
+- All components accept `className` for overrides.
+- Server Component compatible except Dialog and Toast (marked `"use client"`).
+- Accessible: ARIA attributes, focus management on interactive elements.

package/templates/ui/package.json

@@ -2,6 +2,7 @@
 	"name": "@myquark/ui",
 	"version": "1.0.0",
 	"type": "module",
+	"main": "src/index.js",
 	"devDependencies": {
 		"@types/react": "^19.2.14",
 		"@types/react-dom": "^19.2.3",

package/templates/ui/src/badge.js

@@ -0,0 +1,32 @@
+import React from "react";
+
+const base =
+	"inline-flex items-center rounded-sm border px-2.5 py-0.5 text-xs font-medium tracking-wide";
+
+const THEMES = {
+	light: {
+		default: "border-gray-200 bg-gray-100 text-gray-800",
+		success: "border-green-200 bg-green-100 text-green-800",
+		warning: "border-yellow-200 bg-yellow-100 text-yellow-800",
+		danger: "border-red-200 bg-red-100 text-red-800",
+		info: "border-blue-200 bg-blue-100 text-blue-800",
+	},
+	dark: {
+		default: "border-[#1e2535] bg-[#1e2535]/50 text-[#6b7a99]",
+		success: "border-emerald-800/50 bg-emerald-900/20 text-emerald-400",
+		warning: "border-yellow-800/50 bg-yellow-900/20 text-yellow-400",
+		danger: "border-[#ff4757]/30 bg-[#ff4757]/10 text-[#ff4757]",
+		info: "border-[#377dff]/30 bg-[#377dff]/10 text-[#377dff]",
+	},
+};
+
+export function Badge({
+	variant = "default",
+	theme = "light",
+	className = "",
+	...props
+}) {
+	const t = THEMES[theme] ?? THEMES.light;
+	const cls = `${base} ${t[variant] ?? t.default} ${className}`.trim();
+	return React.createElement("span", { className: cls, ...props });
+}

package/templates/ui/src/badge.test.js

@@ -0,0 +1,42 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { Badge } from "./badge.js";
+
+test("Badge - exports correctly", () => {
+	assert(typeof Badge === "function");
+});
+
+test("Badge - renders with default props", () => {
+	const result = Badge({});
+	assert.ok(result);
+});
+
+test("Badge - supports default variant", () => {
+	const result = Badge({ variant: "default" });
+	assert.ok(result);
+});
+
+test("Badge - supports success variant", () => {
+	const result = Badge({ variant: "success" });
+	assert.ok(result);
+});
+
+test("Badge - supports warning variant", () => {
+	const result = Badge({ variant: "warning" });
+	assert.ok(result);
+});
+
+test("Badge - supports danger variant", () => {
+	const result = Badge({ variant: "danger" });
+	assert.ok(result);
+});
+
+test("Badge - supports info variant", () => {
+	const result = Badge({ variant: "info" });
+	assert.ok(result);
+});
+
+test("Badge - accepts className override", () => {
+	const result = Badge({ className: "custom" });
+	assert.ok(result);
+});

package/templates/ui/src/button.js

@@ -1,19 +1,68 @@
 import React from "react";
 
-export const Button = ({ variant = "primary", className, ...props }) => {
-	const baseStyles = "px-4 py-2 rounded-md font-medium transition-colors";
-	const variants = {
-		primary: "bg-blue-600 text-white hover:bg-blue-700",
-		secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
-	};
+const base =
+	"inline-flex items-center justify-center rounded-sm font-medium transition-all duration-200 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none active:translate-y-px";
 
-	return React.createElement(
-		"button",
-		{
-			type: "button",
-			className: `${baseStyles} ${variants[variant]} ${className || ""}`,
-			...props,
-		},
-		props.children,
-	);
+const THEMES = {
+	light: {
+		primary:
+			"bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow focus-visible:ring-blue-500",
+		secondary:
+			"border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 hover:border-gray-300 hover:shadow focus-visible:ring-gray-400",
+		danger:
+			"bg-red-600 text-white shadow-sm hover:bg-red-700 hover:shadow focus-visible:ring-red-500",
+		ghost:
+			"bg-transparent text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:ring-gray-400",
+		success:
+			"bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 hover:shadow focus-visible:ring-emerald-500",
+		warning:
+			"bg-amber-500 text-white shadow-sm hover:bg-amber-600 hover:shadow focus-visible:ring-amber-400",
+		info: "bg-cyan-600 text-white shadow-sm hover:bg-cyan-700 hover:shadow focus-visible:ring-cyan-500",
+		outline:
+			"border border-blue-600 text-blue-600 bg-transparent hover:bg-blue-50 focus-visible:ring-blue-500",
+		solid:
+			"bg-blue-700 text-white shadow-sm hover:bg-blue-800 hover:shadow focus-visible:ring-blue-600",
+	},
+	dark: {
+		primary:
+			"bg-[#377dff]/10 border border-[#377dff]/40 text-[#377dff] hover:bg-[#377dff]/20 hover:border-[#377dff]/80 focus-visible:ring-[#377dff]/40 focus-visible:ring-offset-0",
+		secondary:
+			"border border-[#1e2535] text-[#6b7a99] hover:border-[#377dff]/30 hover:text-[#e0e0e0] focus-visible:ring-[#377dff]/30 focus-visible:ring-offset-0",
+		danger:
+			"bg-[#ff4757]/10 border border-[#ff4757]/40 text-[#ff4757] hover:bg-[#ff4757]/20 hover:border-[#ff4757]/80 focus-visible:ring-[#ff4757]/40 focus-visible:ring-offset-0",
+		ghost:
+			"text-[#4a4a6a] hover:bg-[#1e2535] hover:text-[#e0e0e0] focus-visible:ring-[#377dff]/30 focus-visible:ring-offset-0",
+		success:
+			"bg-emerald-500/10 border border-emerald-500/40 text-emerald-400 hover:bg-emerald-500/20 hover:border-emerald-500/80 focus-visible:ring-emerald-400/40 focus-visible:ring-offset-0",
+		warning:
+			"bg-amber-500/10 border border-amber-400/40 text-amber-400 hover:bg-amber-500/20 hover:border-amber-400/80 focus-visible:ring-amber-400/40 focus-visible:ring-offset-0",
+		info: "bg-cyan-500/10 border border-cyan-400/40 text-cyan-400 hover:bg-cyan-500/20 hover:border-cyan-400/80 focus-visible:ring-cyan-400/40 focus-visible:ring-offset-0",
+		outline:
+			"border border-[#377dff]/60 text-[#377dff] bg-transparent hover:bg-[#377dff]/10 focus-visible:ring-[#377dff]/40 focus-visible:ring-offset-0",
+		solid:
+			"bg-[#377dff] text-white hover:bg-[#2563eb] focus-visible:ring-[#377dff]/60 focus-visible:ring-offset-0",
+	},
 };
+
+const sizes = {
+	sm: "h-8 px-3 text-sm",
+	md: "h-10 px-4 text-sm",
+	lg: "h-11 px-6 text-base",
+};
+
+export function Button({
+	variant = "primary",
+	size = "md",
+	theme = "light",
+	className = "",
+	...props
+}) {
+	const t = THEMES[theme] ?? THEMES.light;
+	const cls =
+		`${base} ${t[variant] ?? t.primary} ${sizes[size] ?? sizes.md} ${className}`.trim();
+	return React.createElement("button", {
+		type: "button",
+		className: cls,
+		...props,
+	});
+}