reroute-js 0.46.0 → 1.0.0-alpha.0

package/README.md

@@ -179,11 +179,9 @@ Reroute is a feature-rich file-based routing framework for building fullstack Re
 - ⚡ **React 19 Streaming** - Native `renderToReadableStream` for optimal performance
 
 ### 🎨 Styling & Theming
-- 🎨 **Tailwind CSS v4 Support** - Automatic detection and compilation with CSS-first configuration
+- 🎨 **Native CSS** - Author styles in `src/client/theme.css` with no CSS framework required
 - ⚡ **Live CSS Reload** - Instant style updates in development mode
-- 🎯 **Modern CSS Features** - `@theme` and `@utility` directives support
-- 🚀 **Oxide Engine** - 5x faster builds with the new Tailwind compiler
-- 🔧 **Zero Config** - Works out of the box when `@tailwindcss/cli` is installed
+- 🔧 **Zero Config** - Theme CSS is synced automatically during `reroute gen`
 
 ### 🎨 Developer Experience
 - 📁 **Project Templates** - Quick start with `basic`, `blog`, or `store` templates

package/_/store/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "{{PROJECT_NAME}}",
 	"version": "0.0.0",
-	"description": "A Reroute store application with Tailwind CSS v4",
+	"description": "A Reroute store application",
 	"private": true,
 	"scripts": {
 		"types": "tsc --noEmit",
@@ -23,8 +23,6 @@
 		"@types/bun": "latest",
 		"@types/react": "^19.2.2",
 		"@types/react-dom": "^19.2.2",
-		"@tailwindcss/cli": "^4.1.16",
-		"tailwindcss": "^4.1.16",
 		"typescript": "^5"
 	}
 }

package/_/store/src/client/components/Header.tsx

@@ -2,34 +2,22 @@ import { Link } from 'reroute-js/react';
 
 export default function Header() {
 	return (
-		<header className='sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm'>
+		<header className='site-header'>
 			<div className='container-custom'>
-				<div className='flex items-center justify-between h-16'>
-					<Link
-						to='/'
-						className='flex items-center gap-2 text-2xl font-bold text-primary-600 hover:text-primary-700 transition-colors'
-					>
-						<span className='text-3xl'>🛒</span>
+				<div className='header-inner'>
+					<Link to='/' className='header-logo'>
+						<span className='header-logo-icon'>🛒</span>
 						<span>Reroute Store</span>
 					</Link>
 
-					<nav className='flex items-center gap-8'>
-						<Link
-							to='/'
-							className='link-muted font-medium hover:text-primary-600'
-						>
+					<nav className='header-nav'>
+						<Link to='/' className='nav-link'>
 							Home
 						</Link>
-						<Link
-							to='/products'
-							className='link-muted font-medium hover:text-primary-600'
-						>
+						<Link to='/products' className='nav-link'>
 							Products
 						</Link>
-						<Link
-							to='/categories'
-							className='link-muted font-medium hover:text-primary-600'
-						>
+						<Link to='/categories' className='nav-link'>
 							Categories
 						</Link>
 					</nav>

package/_/store/src/client/components/ProductCard.tsx

@@ -8,12 +8,9 @@ interface ProductCardProps {
 
 export default function ProductCard({ product }: ProductCardProps) {
 	return (
-		<div className='card card-hover group'>
-			<Link
-				to={`/products/${product.id}`}
-				className='block h-full no-underline text-inherit'
-			>
-				<div className='w-full h-60 bg-gray-50 flex items-center justify-center p-4'>
+		<div className='card card-hover product-card'>
+			<Link to={`/products/${product.id}`} className='product-card-link'>
+				<div className='product-card-image-wrap'>
 					<Image
 						src={product.image}
 						alt={product.title}
@@ -21,25 +18,21 @@ export default function ProductCard({ product }: ProductCardProps) {
 						height={180}
 						quality={75}
 						sizes='(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 180px'
-						className='max-w-full max-h-full object-contain relative z-10 bg-white'
+						className='product-card-image'
 						style={{ viewTransitionName: `product-image-${product.id}` }}
 					/>
 				</div>
 
-				<div className='p-4 flex flex-col gap-2 flex-1'>
+				<div className='product-card-body'>
 					<div className='badge-primary'>{product.category}</div>
 
-					<h3 className='text-base font-semibold text-gray-900 leading-normal line-clamp-2 min-h-[3em] group-hover:text-primary-600 transition-colors'>
-						{product.title}
-					</h3>
+					<h3 className='product-card-title'>{product.title}</h3>
 
-					<div className='flex justify-between items-center mt-auto pt-2'>
-						<span className='text-xl font-bold text-primary-600'>
-							${product.price.toFixed(2)}
-						</span>
+					<div className='product-card-footer'>
+						<span className='price'>${product.price.toFixed(2)}</span>
 
 						{product.rating && (
-							<div className='flex items-center gap-1 text-sm text-gray-600'>
+							<div className='product-rating'>
 								<span>⭐</span>
 								<span>
 									{product.rating.rate} ({product.rating.count})

package/_/store/src/client/routes/[404].tsx

@@ -6,20 +6,18 @@ export default function NotFoundPage() {
 		<>
 			<Header />
 
-			<main className='container-custom py-16'>
-				<div className='max-w-2xl mx-auto text-center'>
-					<div className='mb-8 animate-slide-up'>
-						<div className='text-9xl font-bold text-primary-600 mb-4'>404</div>
-						<h1 className='text-4xl font-bold text-gray-900 mb-4'>
-							Page Not Found
-						</h1>
-						<p className='text-xl text-gray-600 mb-8'>
+			<main className='page-main page-main-lg'>
+				<div className='not-found-content'>
+					<div className='animate-slide-up'>
+						<div className='not-found-code'>404</div>
+						<h1 className='not-found-title'>Page Not Found</h1>
+						<p className='not-found-lead'>
 							Oops! The page you're looking for doesn't exist. It might have
 							been moved or deleted.
 						</p>
 					</div>
 
-					<div className='flex flex-col sm:flex-row gap-4 justify-center mb-12 animate-in'>
+					<div className='not-found-actions animate-in'>
 						<Link to='/' className='btn-primary btn-lg'>
 							🏠 Go Home
 						</Link>
@@ -28,32 +26,23 @@ export default function NotFoundPage() {
 						</Link>
 					</div>
 
-					<div className='grid grid-cols-1 md:grid-cols-3 gap-6 mt-16 animate-scale'>
-						<Link
-							to='/categories'
-							className='card card-hover p-6 no-underline text-gray-900'
-						>
-							<div className='text-4xl mb-3'>🏷️</div>
-							<h3 className='font-semibold mb-2'>Categories</h3>
-							<p className='text-sm text-gray-600'>Browse by category</p>
+					<div className='not-found-links animate-scale'>
+						<Link to='/categories' className='card card-hover card-padded'>
+							<div className='not-found-card-icon'>🏷️</div>
+							<h3 className='not-found-card-title'>Categories</h3>
+							<p className='not-found-card-desc'>Browse by category</p>
 						</Link>
 
-						<Link
-							to='/products'
-							className='card card-hover p-6 no-underline text-gray-900'
-						>
-							<div className='text-4xl mb-3'>📦</div>
-							<h3 className='font-semibold mb-2'>All Products</h3>
-							<p className='text-sm text-gray-600'>View our catalog</p>
+						<Link to='/products' className='card card-hover card-padded'>
+							<div className='not-found-card-icon'>📦</div>
+							<h3 className='not-found-card-title'>All Products</h3>
+							<p className='not-found-card-desc'>View our catalog</p>
 						</Link>
 
-						<Link
-							to='/'
-							className='card card-hover p-6 no-underline text-gray-900'
-						>
-							<div className='text-4xl mb-3'>⚡</div>
-							<h3 className='font-semibold mb-2'>Featured</h3>
-							<p className='text-sm text-gray-600'>See what's popular</p>
+						<Link to='/' className='card card-hover card-padded'>
+							<div className='not-found-card-icon'>⚡</div>
+							<h3 className='not-found-card-title'>Featured</h3>
+							<p className='not-found-card-desc'>See what's popular</p>
 						</Link>
 					</div>
 				</div>

package/_/store/src/client/routes/categories/[category].tsx

@@ -57,7 +57,6 @@ function CategoryPage() {
 	const [loading, setLoading] = useState(!routeData);
 	const [error, setError] = useState<string | null>(routeData?.error || null);
 
-	// Load products on mount if not from SSR
 	useEffect(() => {
 		if (products.length > 0) {
 			setLoading(false);
@@ -86,11 +85,9 @@ function CategoryPage() {
 			});
 	}, [category, products.length]);
 
-	// Filter and sort products
 	useEffect(() => {
 		let result = [...products];
 
-		// Apply search filter
 		if (searchQuery.trim()) {
 			const query = searchQuery.toLowerCase();
 			result = result.filter(
@@ -100,7 +97,6 @@ function CategoryPage() {
 			);
 		}
 
-		// Apply sorting
 		switch (sortBy) {
 			case 'price-asc':
 				result.sort((a, b) => a.price - b.price);
@@ -112,7 +108,6 @@ function CategoryPage() {
 				result.sort((a, b) => a.title.localeCompare(b.title));
 				break;
 			default:
-				// Keep default order
 				break;
 		}
 
@@ -126,9 +121,8 @@ function CategoryPage() {
 		<>
 			<Header />
 
-			<main className='container-custom py-8'>
-				{/* Breadcrumbs */}
-				<nav className='flex items-center gap-2 text-sm text-gray-600 mb-8'>
+			<main className='page-main'>
+				<nav className='breadcrumb'>
 					<Link to='/' className='link'>
 						Home
 					</Link>
@@ -137,32 +131,32 @@ function CategoryPage() {
 						Categories
 					</Link>
 					<span>/</span>
-					<span className='text-gray-900'>{categoryLabel}</span>
+					<span className='breadcrumb-current'>{categoryLabel}</span>
 				</nav>
 
-				{/* Header */}
-				<div className='mb-8'>
-					<div className='flex items-center gap-3 mb-2'>
-						<span className='text-5xl'>{icon}</span>
-						<h1 className='section-heading mb-0'>{categoryLabel}</h1>
+				<div className='page-intro'>
+					<div className='category-header'>
+						<span className='category-header-icon'>{icon}</span>
+						<h1 className='section-heading section-heading-flush'>
+							{categoryLabel}
+						</h1>
 					</div>
 					<p className='section-subheading'>
 						{products.length} products in this category
 					</p>
 				</div>
 
-				{/* Controls */}
-				<div className='flex flex-wrap items-center gap-4 mb-8 p-6 bg-white rounded-xl shadow-card'>
+				<div className='filter-bar'>
 					<input
 						type='search'
 						placeholder='Search in this category...'
-						className='input flex-1 min-w-[250px]'
+						className='input input-grow'
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
 					/>
 
 					<select
-						className='select min-w-[200px]'
+						className='select select-min'
 						value={sortBy}
 						onChange={(e) => setSortBy(e.target.value as SortOption)}
 					>
@@ -173,30 +167,31 @@ function CategoryPage() {
 					</select>
 
 					{!loading && (
-						<div className='ml-auto text-sm text-gray-600'>
+						<div className='filter-count'>
 							Showing {filteredProducts.length} of {products.length} products
 						</div>
 					)}
 				</div>
 
-				{/* Products Grid */}
 				{loading ? (
-					<div className='text-center py-16 text-gray-600 text-lg'>
-						<div className='animate-pulse'>Loading products...</div>
+					<div className='state-loading'>
+						<div className='state-loading-pulse'>Loading products...</div>
 					</div>
 				) : error ? (
-					<div className='text-center py-16 bg-red-50 text-red-600 text-lg rounded-xl'>
+					<div className='state-error'>
 						{error}
-						<div className='mt-4'>
-							<Link to='/categories' className='link font-semibold'>
+						<div className='state-error-action'>
+							<Link to='/categories' className='link link-semibold'>
 								← Back to Categories
 							</Link>
 						</div>
 					</div>
 				) : filteredProducts.length === 0 ? (
-					<div className='text-center py-16 text-gray-600 text-lg'>
-						<div className='text-6xl mb-4'>🔍</div>
-						<div className='mb-4'>No products found matching your criteria</div>
+					<div className='state-empty'>
+						<div className='state-empty-icon'>🔍</div>
+						<div className='state-empty-action'>
+							No products found matching your criteria
+						</div>
 						{searchQuery && (
 							<button
 								type='button'

package/_/store/src/client/routes/categories/index.tsx

@@ -79,10 +79,10 @@ function CategoriesIndexPage() {
 		return (
 			<>
 				<Header />
-				<main className='container-custom py-8'>
+				<main className='page-main'>
 					<h1 className='section-heading'>Shop by Category</h1>
-					<div className='text-center py-16 text-gray-600 text-lg'>
-						<div className='animate-pulse'>Loading categories...</div>
+					<div className='state-loading'>
+						<div className='state-loading-pulse'>Loading categories...</div>
 					</div>
 				</main>
 			</>
@@ -93,10 +93,8 @@ function CategoriesIndexPage() {
 		return (
 			<>
 				<Header />
-				<main className='container-custom py-8'>
-					<div className='text-center py-16 bg-red-50 text-red-600 text-lg rounded-xl'>
-						{error}
-					</div>
+				<main className='page-main'>
+					<div className='state-error'>{error}</div>
 				</main>
 			</>
 		);
@@ -106,8 +104,8 @@ function CategoriesIndexPage() {
 		<>
 			<Header />
 
-			<main className='container-custom py-8'>
-				<div className='mb-12'>
+			<main className='page-main'>
+				<div className='page-intro-lg'>
 					<h1 className='section-heading'>Shop by Category</h1>
 					<p className='section-subheading'>
 						Browse curated collections and jump straight into your favorite
@@ -115,7 +113,7 @@ function CategoriesIndexPage() {
 					</p>
 				</div>
 
-				<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12'>
+				<div className='category-grid'>
 					{categories.map((category) => {
 						const label = formatCategoryLabel(category);
 						const description =
@@ -127,14 +125,12 @@ function CategoriesIndexPage() {
 							<Link
 								key={category}
 								to={to}
-								className='card card-hover group p-8 no-underline text-gray-900 block'
+								className='card card-hover category-card'
 							>
-								<div className='text-5xl mb-4'>{icon}</div>
-								<h2 className='text-2xl font-bold mb-2 capitalize group-hover:text-primary-600 transition-colors'>
-									{label}
-								</h2>
-								<p className='text-gray-600 text-sm mb-4'>{description}</p>
-								<span className='inline-flex items-center gap-2 btn-primary btn-sm'>
+								<div className='category-card-icon'>{icon}</div>
+								<h2 className='category-card-title'>{label}</h2>
+								<p className='category-card-desc'>{description}</p>
+								<span className='category-card-cta btn-primary btn-sm'>
 									View Products <span aria-hidden='true'>→</span>
 								</span>
 							</Link>
@@ -142,11 +138,9 @@ function CategoriesIndexPage() {
 					})}
 				</div>
 
-				<div className='mt-16 p-8 bg-gray-50 rounded-xl text-center'>
-					<h3 className='text-2xl font-bold mb-6 text-gray-900'>
-						Why Shop With Us?
-					</h3>
-					<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8'>
+				<div className='why-shop'>
+					<h3 className='why-shop-title'>Why Shop With Us?</h3>
+					<div className='why-shop-grid'>
 						{[
 							{
 								icon: '🚚',
@@ -170,11 +164,9 @@ function CategoriesIndexPage() {
 							},
 						].map((item) => (
 							<div key={item.title}>
-								<div className='text-4xl mb-2'>{item.icon}</div>
-								<div className='font-semibold text-gray-700 mb-1'>
-									{item.title}
-								</div>
-								<div className='text-sm text-gray-600'>{item.desc}</div>
+								<div className='why-shop-item-icon'>{item.icon}</div>
+								<div className='why-shop-item-title'>{item.title}</div>
+								<div className='why-shop-item-desc'>{item.desc}</div>
 							</div>
 						))}
 					</div>

package/_/store/src/client/routes/index.tsx

@@ -30,16 +30,16 @@ function HomePage() {
 		<>
 			<Header />
 
-			<main className='container-custom py-8'>
-				{/* Hero Section */}
-				<section className='text-center py-12 mb-12 animate-slide-up'>
-					<h1 className='text-5xl md:text-6xl font-bold text-gray-900 mb-4 leading-tight'>
+			<main className='page-main'>
+				<section className='hero animate-slide-up'>
+					<h1 className='hero-title'>
 						Welcome to {import.meta.env.REROUTE_SITE_NAME || 'Reroute Store'}
 					</h1>
-					<p className='text-xl text-gray-600 mb-8 max-w-2xl mx-auto'>
-						{import.meta.env.REROUTE_SITE_DESCRIPTION || 'A modern e-commerce demo built with Reroute, showcasing file-based routing, SSR, and seamless API integration with FakeStoreAPI'}
+					<p className='hero-lead'>
+						{import.meta.env.REROUTE_SITE_DESCRIPTION ||
+							'A modern e-commerce demo built with Reroute, showcasing file-based routing, SSR, and seamless API integration with FakeStoreAPI'}
 					</p>
-					<div className='flex gap-4 justify-center flex-wrap'>
+					<div className='hero-actions'>
 						<Link to='/products' className='btn-primary btn-lg'>
 							Shop Now
 						</Link>
@@ -49,19 +49,18 @@ function HomePage() {
 					</div>
 				</section>
 
-				{/* Featured Products */}
-				<section className='mb-16'>
-					<div className='flex justify-between items-center mb-6'>
-						<h2 className='section-heading mb-0'>Featured Products</h2>
-						<Link to='/products' className='link font-semibold text-lg'>
+				<section className='section-block'>
+					<div className='section-header'>
+						<h2 className='section-heading section-heading-flush'>
+							Featured Products
+						</h2>
+						<Link to='/products' className='link link-semibold link-lg'>
 							View All →
 						</Link>
 					</div>
 
 					{error ? (
-						<div className='text-center py-12 bg-red-50 text-red-600 text-lg rounded-xl'>
-							{error}
-						</div>
+						<div className='state-error'>{error}</div>
 					) : (
 						<div className='product-grid'>
 							{featuredProducts.map((product) => (
@@ -71,46 +70,37 @@ function HomePage() {
 					)}
 				</section>
 
-				{/* Features */}
-				<section className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mt-12 pt-8'>
+				<section className='features-grid'>
 					<div className='feature-card'>
-						<div className='text-5xl mb-4'>⚡</div>
-						<h3 className='text-xl font-semibold mb-2 text-gray-900'>
-							Lightning Fast
-						</h3>
-						<p className='text-gray-600 leading-relaxed'>
+						<div className='feature-icon'>⚡</div>
+						<h3 className='feature-title'>Lightning Fast</h3>
+						<p className='feature-text'>
 							Built on Bun for blazing fast performance, server-side rendering
 							and image caching
 						</p>
 					</div>
 
 					<div className='feature-card'>
-						<div className='text-5xl mb-4'>🎯</div>
-						<h3 className='text-xl font-semibold mb-2 text-gray-900'>
-							File-Based Routing
-						</h3>
-						<p className='text-gray-600 leading-relaxed'>
+						<div className='feature-icon'>🎯</div>
+						<h3 className='feature-title'>File-Based Routing</h3>
+						<p className='feature-text'>
 							Automatic route generation from your file structure with zero
 							configuration
 						</p>
 					</div>
 
 					<div className='feature-card'>
-						<div className='text-5xl mb-4'>🔄</div>
-						<h3 className='text-xl font-semibold mb-2 text-gray-900'>
-							SSR Support
-						</h3>
-						<p className='text-gray-600 leading-relaxed'>
+						<div className='feature-icon'>🔄</div>
+						<h3 className='feature-title'>SSR Support</h3>
+						<p className='feature-text'>
 							SEO-friendly with automatic hydration
 						</p>
 					</div>
 
 					<div className='feature-card'>
-						<div className='text-5xl mb-4'>📦</div>
-						<h3 className='text-xl font-semibold mb-2 text-gray-900'>
-							API Integration
-						</h3>
-						<p className='text-gray-600 leading-relaxed'>
+						<div className='feature-icon'>📦</div>
+						<h3 className='feature-title'>API Integration</h3>
+						<p className='feature-text'>
 							Seamless integration with external APIs using serializable
 							responses
 						</p>