reroute-js 0.45.12-beta.1 → 1.0.0-alpha.0

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>

package/_/store/src/client/routes/products/[id].tsx

@@ -4,7 +4,6 @@ import Header from '../../components/Header';
 import ProductCard from '../../components/ProductCard';
 import { getProduct, getProductsByCategory, type Product } from '../../lib/api';
 
-// Enable SSR data fetching for this route
 const ssr = {
 	async data({ params }: { params: { id?: string } }) {
 		try {
@@ -45,7 +44,6 @@ function ProductDetailPage() {
 	const params = useParams<{ id: string }>();
 	const productId = params.id ? Number.parseInt(params.id, 10) : null;
 
-	// Read SSR-seeded or prefetched data for this route
 	const routeData = useData<{
 		product: Product | null;
 		relatedProducts: Product[];
@@ -58,7 +56,6 @@ function ProductDetailPage() {
 	const relatedProducts = data?.relatedProducts ?? [];
 	const error = data?.error ?? (productId ? null : 'Invalid product ID');
 
-	// Fallback on client nav if hover prefetch didn't run
 	useEffect(() => {
 		if (typeof window === 'undefined') return;
 		if (routeData !== undefined) return;
@@ -80,7 +77,6 @@ function ProductDetailPage() {
 
 	const handleAddToCart = () => {
 		setAddingToCart(true);
-		// Simulate adding to cart
 		setTimeout(() => {
 			setAddingToCart(false);
 			alert(`Added ${product?.title} to cart!`);
@@ -95,10 +91,12 @@ function ProductDetailPage() {
 		return (
 			<>
 				<Header />
-				<main className='container-custom py-8'>
-					<h1 className='text-4xl font-bold text-gray-900 mb-8'>Loading...</h1>
-					<div className='text-center py-16 text-gray-600 text-lg'>
-						<div className='animate-pulse'>Loading product details...</div>
+				<main className='page-main'>
+					<h1 className='page-title'>Loading...</h1>
+					<div className='state-loading'>
+						<div className='state-loading-pulse'>
+							Loading product details...
+						</div>
 					</div>
 				</main>
 			</>
@@ -109,11 +107,11 @@ function ProductDetailPage() {
 		return (
 			<>
 				<Header />
-				<main className='container-custom py-8'>
-					<div className='text-center py-16 bg-red-50 text-red-600 text-lg rounded-xl'>
+				<main className='page-main'>
+					<div className='state-error'>
 						{error || 'Product not found'}
-						<div className='mt-4'>
-							<Link to='/products' className='link font-semibold'>
+						<div className='state-error-action'>
+							<Link to='/products' className='link link-semibold'>
 								← Back to Products
 							</Link>
 						</div>
@@ -127,9 +125,8 @@ function ProductDetailPage() {
 		<>
 			<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>
@@ -142,13 +139,11 @@ function ProductDetailPage() {
 						{product.category}
 					</Link>
 					<span>/</span>
-					<span className='text-gray-900'>{product.title}</span>
+					<span className='breadcrumb-current'>{product.title}</span>
 				</nav>
 
-				{/* Product Details */}
-				<div className='grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16'>
-					{/* Product Image */}
-					<div className='card flex items-center justify-center p-8 min-h-[500px]'>
+				<div className='product-detail-grid'>
+					<div className='card product-detail-image'>
 						<Image
 							src={product.image}
 							alt={product.title}
@@ -157,43 +152,36 @@ function ProductDetailPage() {
 							quality={85}
 							sizes='(max-width: 1024px) 90vw, 350px'
 							priority
-							className='max-w-full max-h-[500px] object-contain relative z-10'
+							className='product-detail-image-img'
 							style={{ viewTransitionName: `product-image-${product.id}` }}
 						/>
 					</div>
 
-					{/* Product Info */}
-					<div className='flex flex-col gap-6'>
+					<div className='product-detail-info'>
 						<div className='badge-primary'>{product.category}</div>
 
-						<h1 className='text-4xl font-bold text-gray-900 leading-tight'>
-							{product.title}
-						</h1>
+						<h1 className='product-detail-title'>{product.title}</h1>
 
 						{product.rating && (
-							<div className='flex items-center gap-4'>
-								<div className='flex items-center gap-2 text-base text-gray-600'>
-									<span className='text-2xl'>⭐</span>
-									<span className='font-semibold text-xl'>
-										{product.rating.rate}
-									</span>
-									<span>({product.rating.count} reviews)</span>
-								</div>
+							<div className='product-rating-lg'>
+								<span className='product-rating-star'>⭐</span>
+								<span className='product-rating-value'>
+									{product.rating.rate}
+								</span>
+								<span>({product.rating.count} reviews)</span>
 							</div>
 						)}
 
-						<div className='text-4xl font-bold text-primary-600'>
-							${product.price.toFixed(2)}
-						</div>
+						<div className='price-lg'>${product.price.toFixed(2)}</div>
 
-						<p className='text-lg text-gray-700 leading-relaxed'>
+						<p className='product-detail-description'>
 							{product.description}
 						</p>
 
-						<div className='flex gap-4 mt-4'>
+						<div className='product-actions'>
 							<button
 								type='button'
-								className='btn-primary flex-1 disabled:opacity-50'
+								className='btn-primary btn-grow'
 								onClick={handleAddToCart}
 								disabled={addingToCart}
 							>
@@ -209,24 +197,23 @@ function ProductDetailPage() {
 							</button>
 						</div>
 
-						<div className='p-4 bg-gray-50 rounded-xl text-sm text-gray-600 space-y-2'>
-							<div className='flex items-center gap-2'>
-								<span className='text-green-600 font-bold'>✓</span>
+						<div className='product-perks'>
+							<div className='product-perk'>
+								<span className='product-perk-check'>✓</span>
 								<span>Free shipping on orders over $50</span>
 							</div>
-							<div className='flex items-center gap-2'>
-								<span className='text-green-600 font-bold'>✓</span>
+							<div className='product-perk'>
+								<span className='product-perk-check'>✓</span>
 								<span>30-day return policy</span>
 							</div>
-							<div className='flex items-center gap-2'>
-								<span className='text-green-600 font-bold'>✓</span>
+							<div className='product-perk'>
+								<span className='product-perk-check'>✓</span>
 								<span>Secure checkout</span>
 							</div>
 						</div>
 					</div>
 				</div>
 
-				{/* Related Products */}
 				{relatedProducts.length > 0 && (
 					<section className='animate-in'>
 						<h2 className='section-heading'>Related Products</h2>