nucleus-core-ts 0.8.0

package/public/components/Capabilities.tsx

@@ -0,0 +1,69 @@
+export const CAPABILITIES = [
+	{
+		category: "Database Management",
+		items: [
+			{ name: "Auto Migrations", status: "ready" },
+			{ name: "Schema Push", status: "ready" },
+			{ name: "Seed Data", status: "soon" },
+			{ name: "Backup & Restore", status: "soon" },
+			{ name: "Multi-tenant", status: "soon" },
+		],
+	},
+	{
+		category: "Middleware",
+		items: [
+			{ name: "Request Monitoring", status: "ready" },
+			{ name: "Rate Limiting", status: "ready" },
+			{ name: "Smart Bypass", status: "ready" },
+			{ name: "Token Refresh", status: "ready" },
+			{ name: "Response Caching", status: "soon" },
+		],
+	},
+	{
+		category: "Frontend Package",
+		items: [
+			{ name: "API Proxy", status: "soon" },
+			{ name: "Generic Fetcher", status: "soon" },
+			{ name: "State Management", status: "soon" },
+			{ name: "UI Components", status: "soon" },
+			{ name: "Type Generation", status: "soon" },
+		],
+	},
+];
+
+export function Capabilities() {
+	return (
+		<section className="capabilities" id="capabilities">
+			<div className="container">
+				<div className="section-header">
+					<div className="section-label">Roadmap</div>
+					<h2 className="section-title">Current & Upcoming Capabilities</h2>
+					<p className="section-description">
+						See what's ready today and what's coming soon. We're constantly
+						adding new features based on real-world needs.
+					</p>
+				</div>
+				<div className="capabilities-grid">
+					{CAPABILITIES.map((group) => (
+						<div className="capability-group" key={group.category}>
+							<h3 className="capability-category">{group.category}</h3>
+							<ul className="capability-list">
+								{group.items.map((item) => (
+									<li className="capability-item" key={item.name}>
+										<span className={`capability-status ${item.status}`}>
+											{item.status === "ready" ? "✓" : "○"}
+										</span>
+										<span className="capability-name">{item.name}</span>
+										{item.status === "soon" && (
+											<span className="capability-badge">Soon</span>
+										)}
+									</li>
+								))}
+							</ul>
+						</div>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}

package/public/components/Features.tsx

@@ -0,0 +1,107 @@
+export const FEATURES = [
+	{
+		icon: "🔐",
+		title: "Authentication",
+		description:
+			"Complete auth system with JWT access & refresh tokens, session cookies, device fingerprinting, and proactive token refresh via WebSocket.",
+		tags: ["JWT", "Sessions", "Devices", "WebSocket"],
+		status: "ready",
+	},
+	{
+		icon: "🛡️",
+		title: "Authorization",
+		description:
+			"Automatic claim generation for all tables with granular role-based access control and smart data filtering per user context.",
+		tags: ["RBAC", "Claims", "Data Filtering"],
+		status: "ready",
+	},
+	{
+		icon: "📊",
+		title: "Audit & Monitoring",
+		description:
+			"Smart logger with conditional logging, real-time server monitoring, streaming status updates, and configurable alerting system.",
+		tags: ["Logging", "Metrics", "Alerts", "Streaming"],
+		status: "ready",
+	},
+	{
+		icon: "⚡",
+		title: "Rate Limiting",
+		description:
+			"Protect your APIs with sliding window, fixed window, and token bucket strategies. Smart bypass for trusted clients.",
+		tags: ["Protection", "Throttling", "Smart Bypass"],
+		status: "ready",
+	},
+	{
+		icon: "✅",
+		title: "Verifications",
+		description:
+			"Multi-step approval workflows with React Flow visual builder support, triggers, condition endpoints, and digital signatures.",
+		tags: ["Workflows", "Approvals", "Signatures"],
+		status: "ready",
+	},
+	{
+		icon: "🔔",
+		title: "Notifications",
+		description:
+			"Send notifications via email (Gmail integration) and platform channels with customizable triggers and template support.",
+		tags: ["Email", "Platform", "Templates"],
+		status: "ready",
+	},
+	{
+		icon: "📁",
+		title: "File Management",
+		description:
+			"Built-in file uploads with local CDN, configurable storage, MIME type validation, and range request support.",
+		tags: ["Upload", "CDN", "Storage"],
+		status: "ready",
+	},
+	{
+		icon: "📚",
+		title: "Auto Documentation",
+		description:
+			"Swagger/OpenAPI documentation auto-generated from your schema. Choose between Scalar or Swagger UI providers.",
+		tags: ["Swagger", "OpenAPI", "Scalar"],
+		status: "ready",
+	},
+	{
+		icon: "🔄",
+		title: "Generic CRUD",
+		description:
+			"Full CRUD operations with body validation, bulk ops, relational queries, search, filter, sort, and pagination — all auto-generated.",
+		tags: ["CRUD", "Bulk", "Relations", "Pagination"],
+		status: "ready",
+	},
+];
+
+export function Features() {
+	return (
+		<section className="features" id="features">
+			<div className="container">
+				<div className="section-header">
+					<div className="section-label">Core Features</div>
+					<h2 className="section-title">Everything You Need, Out of the Box</h2>
+					<p className="section-description">
+						Production-ready features that would take months to build from
+						scratch. All type-safe, all configurable, all tested.
+					</p>
+				</div>
+				<div className="features-grid">
+					{FEATURES.map((feature) => (
+						<div className="feature-card" key={feature.title}>
+							<div className="feature-icon">{feature.icon}</div>
+							<h3 className="feature-title">{feature.title}</h3>
+							<p className="feature-description">{feature.description}</p>
+							<div className="feature-tags">
+								{feature.tags.map((tag) => (
+									<span className="feature-tag done" key={tag}>
+										{tag}
+									</span>
+								))}
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}

package/public/components/Footer.tsx

@@ -0,0 +1,60 @@
+export function Footer() {
+	return (
+		<footer className="footer">
+			<div className="container footer-inner">
+				<div className="footer-brand">
+					<span className="footer-logo">
+						<span className="nav-logo-icon">N</span>
+						Nucleus Core
+					</span>
+					<p className="footer-tagline">Enterprise Backend Framework</p>
+				</div>
+				<div className="footer-links-grid">
+					<div className="footer-links-group">
+						<h4 className="footer-links-title">Product</h4>
+						<a href="#features" className="footer-link">
+							Features
+						</a>
+						<a href="#stack" className="footer-link">
+							Stack
+						</a>
+						<a href="#capabilities" className="footer-link">
+							Roadmap
+						</a>
+					</div>
+					<div className="footer-links-group">
+						<h4 className="footer-links-title">Resources</h4>
+						<a href="/docs" className="footer-link">
+							Documentation
+						</a>
+						<a href="/docs" className="footer-link">
+							API Reference
+						</a>
+						<a href="/changelog" className="footer-link">
+							Changelog
+						</a>
+					</div>
+					<div className="footer-links-group">
+						<h4 className="footer-links-title">Community</h4>
+						<a href="https://github.com" className="footer-link">
+							GitHub
+						</a>
+						<a href="https://discord.com" className="footer-link">
+							Discord
+						</a>
+						<a href="https://twitter.com" className="footer-link">
+							Twitter
+						</a>
+					</div>
+				</div>
+			</div>
+			<div className="container">
+				<div className="footer-bottom">
+					<p className="footer-copy">
+						© {new Date().getFullYear()} Nucleus Core. MIT License.
+					</p>
+				</div>
+			</div>
+		</footer>
+	);
+}

package/public/components/Hero.tsx

@@ -0,0 +1,53 @@
+export function Hero() {
+	return (
+		<section className="hero">
+			<div className="hero-bg" />
+			<div className="container">
+				<div className="hero-content">
+					<div className="hero-badge">
+						<span className="hero-badge-dot" />
+						v3.0 — Production Ready
+					</div>
+					<h1 className="hero-title">
+						The Complete Backend
+						<br />
+						<span className="hero-title-gradient">
+							Infrastructure Framework
+						</span>
+					</h1>
+					<p className="hero-description">
+						Build enterprise-grade APIs in minutes, not months. Authentication,
+						authorization, audit logging, rate limiting, file uploads,
+						notifications — everything you need, type-safe and ready to deploy.
+					</p>
+					<div className="hero-actions">
+						<a href="/docs" className="btn btn-primary">
+							Get Started →
+						</a>
+						<a href="#features" className="btn btn-secondary">
+							Explore Features
+						</a>
+					</div>
+					<div className="hero-stats">
+						<div className="hero-stat">
+							<div className="hero-stat-value">50+</div>
+							<div className="hero-stat-label">Built-in Features</div>
+						</div>
+						<div className="hero-stat">
+							<div className="hero-stat-value">100%</div>
+							<div className="hero-stat-label">Type-Safe</div>
+						</div>
+						<div className="hero-stat">
+							<div className="hero-stat-value">0</div>
+							<div className="hero-stat-label">Config Needed</div>
+						</div>
+						<div className="hero-stat">
+							<div className="hero-stat-value">∞</div>
+							<div className="hero-stat-label">Extensibility</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}

package/public/components/Managers.tsx

@@ -0,0 +1,60 @@
+export const MANAGERS = [
+	{
+		icon: "🐘",
+		name: "PostgreSQL",
+		description:
+			"Connection pooling, automatic migrations, schema management with Drizzle ORM",
+	},
+	{
+		icon: "🔴",
+		name: "Redis",
+		description:
+			"Session storage, caching, rate limiting state, pub/sub for real-time features",
+	},
+	{
+		icon: "☁️",
+		name: "Dapr",
+		description:
+			"Service mesh integration for microservices, state management, pub/sub",
+	},
+	{
+		icon: "📧",
+		name: "Gmail",
+		description:
+			"OAuth2 authentication, send emails, notification templates support",
+	},
+	{
+		icon: "📁",
+		name: "File Storage",
+		description:
+			"Local CDN, file uploads, MIME validation, range requests for streaming",
+	},
+];
+
+export function Managers() {
+	return (
+		<section className="managers" id="managers">
+			<div className="container">
+				<div className="section-header">
+					<div className="section-label">Infrastructure</div>
+					<h2 className="section-title">Integrated Service Managers</h2>
+					<p className="section-description">
+						Pre-configured managers for common infrastructure services. Just
+						provide credentials and start using them.
+					</p>
+				</div>
+				<div className="managers-grid">
+					{MANAGERS.map((manager) => (
+						<div className="manager-card" key={manager.name}>
+							<div className="manager-icon">{manager.icon}</div>
+							<div className="manager-content">
+								<h3 className="manager-name">{manager.name}</h3>
+								<p className="manager-description">{manager.description}</p>
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}

package/public/components/Nav.tsx

@@ -0,0 +1,107 @@
+import { useStore } from "../store";
+
+export function Nav() {
+	const store = useStore();
+
+	const handleNavClick = (
+		e: React.MouseEvent<HTMLAnchorElement>,
+		target: string,
+	) => {
+		if (target.startsWith("#")) {
+			if (store.currentPage !== "home") {
+				e.preventDefault();
+				store.navigate("home");
+				setTimeout(() => {
+					const el = document.querySelector(target);
+					el?.scrollIntoView({ behavior: "smooth" });
+				}, 100);
+			}
+		} else if (target === "/docs") {
+			e.preventDefault();
+			store.navigate("docs");
+		} else if (target === "/") {
+			e.preventDefault();
+			store.navigate("home");
+		}
+	};
+
+	return (
+		<nav className="nav">
+			<div className="container nav-inner">
+				<a
+					href="/"
+					className="nav-logo"
+					onClick={(e) => handleNavClick(e, "/")}
+				>
+					<span className="nav-logo-icon">N</span>
+					Nucleus Core
+				</a>
+				<div className="nav-links">
+					<button
+						type="button"
+						className="nav-link"
+						onClick={(e) =>
+							handleNavClick(
+								e as unknown as React.MouseEvent<HTMLAnchorElement>,
+								"#features",
+							)
+						}
+					>
+						Features
+					</button>
+					<button
+						type="button"
+						className="nav-link"
+						onClick={(e) =>
+							handleNavClick(
+								e as unknown as React.MouseEvent<HTMLAnchorElement>,
+								"#stack",
+							)
+						}
+					>
+						Stack
+					</button>
+					<button
+						type="button"
+						className="nav-link"
+						onClick={(e) =>
+							handleNavClick(
+								e as unknown as React.MouseEvent<HTMLAnchorElement>,
+								"#capabilities",
+							)
+						}
+					>
+						Capabilities
+					</button>
+					<a
+						href="/docs"
+						className={`nav-link ${store.currentPage === "docs" ? "active" : ""}`}
+						onClick={(e) => handleNavClick(e, "/docs")}
+					>
+						Docs
+					</a>
+					<a
+						href="/docs"
+						className="nav-link"
+						onClick={(e) => {
+							e.preventDefault();
+							window.open("/docs", "_blank");
+						}}
+					>
+						Swagger
+					</a>
+				</div>
+				<div className="nav-actions">
+					<button
+						type="button"
+						className="theme-toggle"
+						onClick={store.toggleTheme}
+						aria-label="Toggle theme"
+					>
+						{store.theme === "light" ? "🌙" : "☀️"}
+					</button>
+				</div>
+			</div>
+		</nav>
+	);
+}

package/public/components/Stack.tsx

@@ -0,0 +1,36 @@
+export const STACK = [
+	{ icon: "🥟", name: "Bun", description: "Runtime" },
+	{ icon: "🦊", name: "Elysia.js", description: "Framework" },
+	{ icon: "🐘", name: "PostgreSQL", description: "Database" },
+	{ icon: "🔴", name: "Redis", description: "Cache" },
+	{ icon: "💧", name: "Drizzle", description: "ORM" },
+	{ icon: "📝", name: "TypeScript", description: "Language" },
+	{ icon: "☁️", name: "Dapr", description: "Sidecar" },
+	{ icon: "📧", name: "Gmail API", description: "Email" },
+];
+
+export function Stack() {
+	return (
+		<section className="stack" id="stack">
+			<div className="container">
+				<div className="section-header">
+					<div className="section-label">Technology</div>
+					<h2 className="section-title">Modern, Blazing Fast Stack</h2>
+					<p className="section-description">
+						Built on cutting-edge technologies optimized for performance,
+						developer experience, and production reliability.
+					</p>
+				</div>
+				<div className="stack-grid">
+					{STACK.map((tech) => (
+						<div className="stack-item" key={tech.name}>
+							<span className="stack-icon">{tech.icon}</span>
+							<span className="stack-name">{tech.name}</span>
+							<span className="stack-desc">{tech.description}</span>
+						</div>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}

package/public/components/docs/Docs.tsx

@@ -0,0 +1,62 @@
+import { useCallback, useState } from "react";
+import { useStore } from "../../store";
+import { DocsContent } from "./DocsContent";
+import { DocsRightSidebar } from "./DocsRightSidebar";
+import { DocsSidebar } from "./DocsSidebar";
+import { docsData } from "./docsData";
+
+export function Docs() {
+	const store = useStore();
+	const [activeSubItem, setActiveSubItem] = useState<string>("");
+
+	const handleItemClick = useCallback((sectionId: string, itemId: string) => {
+		store.setActiveDoc(sectionId, itemId);
+		setActiveSubItem("");
+	}, []);
+
+	const handleSubItemClick = useCallback((subItemId: string) => {
+		setActiveSubItem(subItemId);
+	}, []);
+
+	const currentSection = docsData.find((s) => s.id === store.activeSection);
+	const currentItem = currentSection?.items.find(
+		(i) => i.id === store.activeItem,
+	);
+	const firstSubItem = currentItem?.subItems[0]?.id || "";
+
+	return (
+		<div className="docs-layout">
+			<button
+				type="button"
+				className="docs-mobile-toggle"
+				onClick={store.toggleDocsSidebar}
+				aria-label="Toggle sidebar"
+			>
+				<span className="docs-mobile-toggle-icon">☰</span>
+				<span className="docs-mobile-toggle-text">Menu</span>
+			</button>
+
+			<DocsSidebar
+				activeSection={store.activeSection}
+				activeItem={store.activeItem}
+				onItemClick={handleItemClick}
+			/>
+
+			<main className="docs-main">
+				<DocsContent
+					activeSection={store.activeSection}
+					activeItem={store.activeItem}
+					activeSubItem={activeSubItem || firstSubItem}
+					onSubItemClick={handleSubItemClick}
+				/>
+			</main>
+
+			<DocsRightSidebar
+				activeSection={store.activeSection}
+				activeItem={store.activeItem}
+				activeSubItem={activeSubItem || firstSubItem}
+				onSubItemClick={handleSubItemClick}
+			/>
+		</div>
+	);
+}