@bloomneo/uikit 1.5.0

package/bin/templates/multi/docs/UIKIT_THEME_GUIDE.md

@@ -0,0 +1,359 @@
+# UIKit Theme Guide
+
+**Transform your UIKit applications with beautiful, brand-consistent themes that work seamlessly across all components and layouts.**
+
+## 🎨 Understanding UIKit Theming
+
+UIKit is built on **ShadCN components** and **Tailwind CSS v4**, enhanced with a powerful semantic color system that automatically adapts to your brand. Instead of hardcoded colors like `bg-white` or `text-black`, UIKit uses semantic classes like `bg-background`, `text-foreground`, and `border-border` that intelligently change based on your selected theme.
+
+**How it works:**
+- **Semantic colors** automatically map to your theme's values
+- **29 color variables** control the entire design system (backgrounds, text, borders, charts, sidebar)
+- **Light/dark modes** are handled automatically with proper contrast ratios
+- **All components** inherit your theme without any code changes
+
+**The result:** Change one theme file, transform your entire application instantly.
+
+## 🎯 How Semantic Colors Work
+
+### Primary Color Impact
+When you set `primary: '#3B82F6'` (blue) in your theme, it automatically affects these classes across your entire application:
+
+```jsx
+// Button components
+<Button className="bg-primary text-primary-foreground">  // Blue button with white text
+<Button variant="outline" className="border-primary text-primary">  // Blue outline with blue text
+
+// Form elements
+<Input className="focus:ring-primary" />  // Blue focus ring
+<Checkbox className="data-[state=checked]:bg-primary" />  // Blue when checked
+
+// Links and accents
+<a className="text-primary hover:text-primary/80">Link</a>  // Blue link
+<Badge className="bg-primary text-primary-foreground">New</Badge>  // Blue badge
+
+// Charts and data visualization
+<BarChart colors={['var(--primary)']} />  // Blue charts
+```
+
+### Core Color Relationships
+
+**Background Colors Hierarchy:**
+```jsx
+// Page structure
+<div className="bg-background">           // Main page (white/dark)
+  <Card className="bg-card">              // Elevated content (white/slightly lighter)
+    <div className="bg-muted">            // Subtle sections (light gray/darker)
+      <div className="bg-accent">         // Interactive areas (very light/subtle)
+```
+
+**Text Color Hierarchy:**
+```jsx
+<h1 className="text-foreground">         // Primary headings (dark/light)
+<p className="text-muted-foreground">    // Secondary text (gray)
+<span className="text-primary">          // Brand/link text (your brand color)
+```
+
+**Border System:**
+```jsx
+<div className="border-border">          // Standard borders (light gray)
+<input className="border-input">         // Form borders (same as border)
+<div className="ring-ring">              // Focus rings (usually primary color)
+```
+
+## 🎨 Color Selection Guide
+
+### ✅ **Good Color Choices**
+
+**Primary Color (Your Brand):**
+- Use your actual brand color
+- Ensure good contrast with white text
+- Test in both light and dark modes
+```javascript
+// Good examples
+primary: '#1E40AF',  // Professional blue
+primary: '#059669',  // Trust green
+primary: '#7C3AED',  // Creative purple
+```
+
+**Background Colors:**
+- Light mode: Pure white or very light grays
+- Dark mode: True darks, avoid pure black
+```javascript
+// Light mode
+background: '#FFFFFF',     // Pure white
+card: '#FFFFFF',          // Same as background for clean look
+muted: '#F8FAFC',         // Very light gray for subtle sections
+
+// Dark mode
+background: '#0F172A',     // Dark blue-gray (not pure black)
+card: '#1E293B',          // Slightly lighter than background
+muted: '#334155',         // Lighter gray for contrast
+```
+
+### ❌ **Avoid These Mistakes**
+
+**Don't use low-contrast colors:**
+```javascript
+// ❌ Bad - poor readability
+primary: '#FFEB3B',           // Yellow on white background
+foreground: '#9CA3AF',        // Light gray text on white
+
+// ✅ Good - high contrast
+primary: '#1D4ED8',           // Dark blue
+foreground: '#1F2937',        // Dark gray/black
+```
+
+**Don't ignore dark mode:**
+```javascript
+// ❌ Bad - same colors for both modes
+light: { primary: '#1E40AF' },
+dark: { primary: '#1E40AF' },   // Too dark for dark backgrounds
+
+// ✅ Good - adjusted for dark mode
+light: { primary: '#1E40AF' },
+dark: { primary: '#60A5FA' },   // Lighter version for dark mode
+```
+
+**Don't use pure black/white in dark mode:**
+```javascript
+// ❌ Bad - harsh contrast
+dark: {
+  background: '#000000',      // Pure black is too harsh
+  foreground: '#FFFFFF'       // Pure white is too bright
+}
+
+// ✅ Good - softer contrast
+dark: {
+  background: '#0F172A',      // Dark blue-gray
+  foreground: '#F8FAFC'       // Off-white
+}
+```
+
+## 🚀 Why Custom Themes?
+
+Go beyond UIKit's 5 built-in themes and create professional design systems that:
+
+- **Match your brand identity** - Use your exact brand colors and design tokens
+- **Work everywhere** - Automatic application across all 40+ components and 5 layouts
+- **Support both modes** - One theme definition, light/dark modes handled automatically
+- **Maintain accessibility** - Built-in contrast and readability optimization
+- **Scale seamlessly** - From simple apps to enterprise applications
+
+**Best part?** You can create and deploy a complete custom theme in under 5 minutes.
+
+## 🚀 Quick Start (Recommended)
+
+### Step 1: Generate Your Theme
+```bash
+# Create a new custom theme automatically
+npx uikit generate theme brand
+
+# This automatically:
+# ✅ Creates theme file with all required colors
+# ✅ Updates your main.tsx with the new theme
+# ✅ Adds proper imports and configuration
+# ✅ Works with SPA, Multi, and FBCA projects
+```
+
+### Step 2: Customize Your Colors
+Edit the generated theme file to match your brand:
+
+```javascript
+// src/themes/presets/theme-brand.js (or src/web/themes/presets/ for FBCA)
+const themeBrand = {
+  id: 'brand',
+  name: 'Brand Theme',
+
+  light: {
+    // Main brand color - change this to your brand color
+    primary: '#3B82F6',              // Your brand blue
+    primaryForeground: '#FFFFFF',
+
+    // Backgrounds
+    background: '#FFFFFF',           // Page background
+    card: '#FFFFFF',                 // Card backgrounds
+
+    // Text colors
+    foreground: '#1F2937',           // Main text
+    mutedForeground: '#6B7280',      // Secondary text
+
+    // Other colors (can keep as-is initially)
+    secondary: '#F3F4F6',
+    secondaryForeground: '#374151',
+    accent: '#F3F4F6',
+    accentForeground: '#374151',
+    destructive: '#EF4444',
+    destructiveForeground: '#FFFFFF',
+    border: '#E5E7EB',
+    input: '#E5E7EB',
+    ring: '#3B82F6',
+
+    // ... more colors (see complete reference below)
+  },
+
+  dark: {
+    // Dark mode versions of above colors
+    primary: '#60A5FA',              // Lighter version for dark mode
+    primaryForeground: '#1E293B',
+    background: '#0F172A',
+    foreground: '#F8FAFC',
+    // ... complete dark palette
+  }
+};
+
+export default themeBrand;
+```
+
+### Step 3: Bundle and Use
+```bash
+# Generate CSS from your theme
+npx uikit bundle
+
+# Your theme is now ready to use!
+# It's already configured in your main.tsx
+```
+
+---
+
+## 🔧 Development Workflow
+
+### Watch Mode for Live Updates
+```bash
+# Start theme development with live reload
+npx uikit bundle --watch
+
+# In another terminal, start your app
+npm run dev
+
+# Now edit your theme file and see changes instantly!
+```
+
+### Testing Your Theme
+1. **Switch between light/dark modes** - Ensure both look good
+2. **Test different layouts** - AdminLayout, PageLayout, AuthLayout
+3. **Check form components** - Buttons, inputs, alerts
+4. **Verify accessibility** - Good contrast ratios
+
+---
+
+## 📋 Complete Color Reference
+
+### Core Colors (Required)
+```javascript
+light: {
+  // Backgrounds
+  background: '#FFFFFF',           // Main page background
+  foreground: '#1F2937',           // Primary text
+  card: '#FFFFFF',                 // Card backgrounds
+  cardForeground: '#1F2937',       // Text on cards
+  popover: '#FFFFFF',              // Dropdown backgrounds
+  popoverForeground: '#1F2937',    // Text in dropdowns
+
+  // Brand & Actions
+  primary: '#3B82F6',              // Your brand color
+  primaryForeground: '#FFFFFF',    // Text on brand elements
+  secondary: '#F3F4F6',            // Secondary buttons
+  secondaryForeground: '#374151',  // Text on secondary elements
+  destructive: '#EF4444',          // Error/danger actions
+  destructiveForeground: '#FFFFFF', // Text on error elements
+
+  // Supporting Colors
+  muted: '#F9FAFB',               // Subtle backgrounds
+  mutedForeground: '#6B7280',     // Secondary text
+  accent: '#F3F4F6',              // Accent elements
+  accentForeground: '#374151',    // Text on accents
+
+  // Borders & Focus
+  border: '#E5E7EB',              // Standard borders
+  input: '#E5E7EB',               // Input borders
+  ring: '#3B82F6',                // Focus rings
+
+  // Chart Colors (for data visualization)
+  chart1: '#3B82F6',              // Primary data
+  chart2: '#10B981',              // Secondary data
+  chart3: '#F59E0B',              // Tertiary data
+  chart4: '#EF4444',              // Warning data
+  chart5: '#8B5CF6',              // Additional data
+
+  // Sidebar Colors (for AdminLayout)
+  sidebar: '#F8FAFC',
+  sidebarForeground: '#334155',
+  sidebarPrimary: '#3B82F6',
+  sidebarPrimaryForeground: '#FFFFFF',
+  sidebarAccent: '#F1F5F9',
+  sidebarAccentForeground: '#334155',
+  sidebarBorder: '#E2E8F0',
+  sidebarRing: '#3B82F6',
+}
+```
+
+### Dark Mode Colors
+```javascript
+dark: {
+  // Invert backgrounds, adjust brand colors for dark mode
+  background: '#0F172A',
+  foreground: '#F8FAFC',
+  primary: '#60A5FA',              // Lighter version of brand color
+  // ... all other colors adjusted for dark mode
+}
+```
+
+---
+
+## 💡 Quick Tips
+
+### Color Selection
+- **Start simple**: Focus on primary, background, and foreground colors first
+- **Brand first**: Use your existing brand colors as the foundation
+- **Test contrast**: Ensure text is readable (use tools like [contrast-ratio.com](https://contrast-ratio.com))
+- **Dark mode**: Make colors lighter/softer for dark backgrounds
+
+### Common Patterns
+```javascript
+// Corporate/Professional
+primary: '#1E40AF',    // Professional blue
+secondary: '#F1F5F9',  // Light gray
+
+// Creative/Modern
+primary: '#8B5CF6',    // Purple
+accent: '#F59E0B',     // Orange
+
+// E-commerce
+primary: '#059669',    // Trust green
+destructive: '#DC2626', // Clear red
+```
+
+### Project Structure
+- **SPA/Multi projects**: `src/themes/presets/theme-{name}.js`
+- **FBCA projects**: `src/web/themes/presets/theme-{name}.js`
+- **CSS output**: Auto-generated in `globals.css`
+
+---
+
+## 🛠️ CLI Commands
+
+```bash
+# Theme Management
+npx uikit generate theme <name>    # Create new theme
+npx uikit bundle                   # Generate CSS
+npx uikit bundle --watch           # Development mode
+
+# Example Workflow
+npx uikit generate theme brand     # 1. Generate
+npx uikit bundle --watch          # 2. Start development
+# Edit theme file                 # 3. Customize colors
+# See changes live in browser     # 4. Iterate
+```
+
+---
+
+## 🎯 Next Steps
+
+1. **Generate your theme**: `npx uikit generate theme brand`
+2. **Customize primary color**: Edit the `primary` value to match your brand
+3. **Test in both modes**: Switch between light and dark mode
+4. **Refine gradually**: Adjust other colors as needed
+5. **Share and iterate**: Get feedback and refine your theme
+
+**Happy theming!** ✨

package/bin/templates/multi/index.html.template

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UIKit Multi-Page Template</title>
+    
+    <!-- SEO Optimizations -->
+    <meta name="description" content="Professional React UI components with beautiful themes and OKLCH color science. Built with @bloomneo/uikit.">
+    <meta name="keywords" content="react, ui components, themes, design system, tailwind css, typescript">
+    <meta name="author" content="@bloomneo/uikit">
+    
+    <!-- Open Graph -->
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="UIKit Multi-Page App">
+    <meta property="og:description" content="Professional React UI components with beautiful themes">
+    <meta property="og:site_name" content="@bloomneo/uikit">
+    
+    <!-- Twitter Cards -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="UIKit Multi-Page App">
+    <meta name="twitter:description" content="Professional React UI components with beautiful themes">
+    
+    <!-- Performance -->
+    <meta name="robots" content="index,follow">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
+    
+    <!-- Theme color -->
+    <meta name="theme-color" content="#3B82F6">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    
+    <!-- Structured Data -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebApplication",
+      "name": "UIKit Multi-Page App",
+      "description": "Professional React UI components with beautiful themes",
+      "applicationCategory": "DesignApplication",
+      "operatingSystem": "Web",
+      "offers": {
+        "@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+      },
+      "author": {
+        "@type": "Organization",
+        "name": "@bloomneo/uikit"
+      }
+    }
+    </script>
+  </body>
+</html>

package/bin/templates/multi/package.json.template

@@ -0,0 +1,35 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "bundle": "npx uikit bundle",
+    "serve": "npx uikit serve",
+    "deploy": "npx uikit deploy",
+    "deploy:gh": "npm run build && gh-pages -d dist",
+    "prerender": "npx uikit prerender",
+    "optimize": "npx uikit optimize"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.13",
+    "@bloomneo/uikit": "latest",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.0.0",
+    "lucide-react": "latest"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.8.0",
+    "vite": "^7.0.0",
+    "tailwindcss": "^4.1.8",
+    "gh-pages": "^6.3.0"
+  }
+}

package/bin/templates/multi/public/favicon.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="32" height="32" rx="8" fill="url(#bluePurpleGradient)"/>
+  <text x="16" y="20" font-family="Inter, system-ui, sans-serif" font-size="12" font-weight="900" text-anchor="middle" fill="white" letter-spacing="1px">ui</text>
+  <defs>
+    <linearGradient id="bluePurpleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+</svg>

package/bin/templates/multi/public/hero_multi.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800.117" height="533.577" viewBox="0 0 800.117 533.577" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><g transform="translate(-561.1 -255.53)"><path d="M227.085,491.32a20.667,20.667,0,0,1-25.842-6.955c-.56-.819.685-1.728,1.246-.908a19.137,19.137,0,0,0,24.052,6.421c.895-.428,1.434,1.017.544,1.443Z" transform="translate(359.999 46.668)" fill="#fff"/><path d="M213.126,445.381a11.7,11.7,0,0,0,8.27-7.4c.334-.936,1.737-.294,1.4.635a13.109,13.109,0,0,1-9.131,8.212.8.8,0,0,1-.993-.449A.775.775,0,0,1,213.126,445.381Z" transform="translate(359.099 50.233)" fill="#fff"/><path d="M789.88,705.353H429.157A24.746,24.746,0,0,0,404.44,730.07a24.468,24.468,0,0,0,1.783,9.195,24.719,24.719,0,0,0,22.934,15.53H789.88a24.719,24.719,0,0,0,21.332-12.244,23.863,23.863,0,0,0,1.611-3.287,24.468,24.468,0,0,0,1.783-9.195,24.753,24.753,0,0,0-24.725-24.717Z" transform="translate(344.106 29.299)" fill="#ccc"/><rect width="52.545" height="61.763" transform="translate(928.822 509.469)" fill="#ed9da0"/><path d="M421.339,358.755h5.493A10.071,10.071,0,0,1,436.9,368.826H411.268a10.071,10.071,0,0,1,10.071-10.071Z" transform="translate(525.879 110.849)" fill="#ccc"/><circle cx="56.737" cy="56.737" r="56.737" transform="translate(898.509 413.264)" fill="#ed9da0"/><path d="M559.362,356.041c.429-6.516,4.738-13.183,18.427-16.667,0,0,23.494-30.042,55.419-14.288,0,0,15.477-2.663,26.954,13.4,0,0,11.379-6.711,16.179,5.184,0,0,13.345,24.263,8.432,49.012s-7.428,27.837-7.428,27.837,6.262-51.192-29.808-47.642-65.11-9.135-73.279,18.638c-6.783,23.061-5.928,35.038-5.928,35.038s-22.682-23.006-14.97-41.121C557.306,376.162,558.7,366.089,559.362,356.041Z" transform="translate(332.592 59.378)" fill="#090814"/><path d="M461.292,735.055H775.121c-2.1-23.939-3.468-115.447-3.468-121.469,0-26.564-21.736-55.552-21.736-55.552l-7.78-4.3-64.973-20.271L660.349,511.62a18.7,18.7,0,0,0-14.975-7.312l-53.115.4a18.754,18.754,0,0,0-12.6,4.992l-32.891,30.512L498.53,563.247l-.082-.082-.5.375-7.159,5.156-4.6,3.328S474.1,586.518,464.444,629.99C462.991,636.529,461.972,721.17,461.292,735.055Z" transform="translate(339.663 45.013)" fill="#38bdf8"/><path d="M840.492,742.14c-.756.69-1.52,1.372-2.284,2.054q-4.339,3.858-8.8,7.584-6.742,5.62-13.764,10.9H393.169q-12.9-9.688-24.857-20.543Z" transform="translate(346.93 26.424)" fill="#ccc"/><path d="M501.606,687.088H346.3l3.286-15.612h148.73Z" transform="translate(530.957 86.407)" fill="#090814"/><path d="M860.165,674.4H819.753a6.242,6.242,0,0,0-4.791,2.219,9.059,9.059,0,0,0-1.709-.164,9.585,9.585,0,1,0,0,19.17,9.476,9.476,0,0,0,4.173-.969l.675,8.282,2.679,32.737a5.976,5.976,0,0,0,.509,1.175,6.3,6.3,0,0,0,5.53,3.287H853.1a6.323,6.323,0,0,0,5.538-3.287,6.479,6.479,0,0,0,.5-1.175l7.067-53.1a6.319,6.319,0,0,0-6.04-8.176Zm-46.911,18.489a6.849,6.849,0,0,1,0-13.7c.123,0,.238.033.362.041a6.275,6.275,0,0,0,.1,3.344l2.892,9.4a6.737,6.737,0,0,1-3.353.912Z" transform="translate(312.902 31.719)" fill="#090814"/><path d="M743.547,485.931H487.732a8.3,8.3,0,0,0-8.291,8.291V666.846a8.3,8.3,0,0,0,8.291,8.291H743.547a8.3,8.3,0,0,0,8.291-8.291V494.222a8.3,8.3,0,0,0-8.291-8.291Z" transform="translate(338.244 46.449)" fill="#3f3d56"/><path d="M653.095,635.977H593.25a3.193,3.193,0,0,0-3.188,3.2v94.538h66.23V639.173a3.195,3.195,0,0,0-3.2-3.2Zm-29.721,53.715a7.1,7.1,0,0,1-7.067-7.067v-10.9a7.067,7.067,0,0,1,14.133,0v10.9a7.1,7.1,0,0,1-7.067,7.067Z" transform="translate(329.598 34.722)" fill="#090814"/><path d="M589.839,738.717v9.121a1.787,1.787,0,0,0,1.783,1.783H654.7a1.792,1.792,0,0,0,1.783-1.783v-9.121Z" transform="translate(329.615 26.691)" fill="#3f3d56"/><circle cx="4.039" cy="4.039" r="4.039" transform="translate(1072.313 703.414)" fill="#2f2e41"/><path d="M523.347,669.493a1.413,1.413,0,0,0-1.413,1.413v7.272a1.413,1.413,0,1,0,2.827,0v-7.272a1.413,1.413,0,0,0-1.413-1.413Z" transform="translate(334.923 32.102)" fill="#2f2e41"/><path d="M531.672,669.493a1.413,1.413,0,0,0-1.413,1.413v7.272a1.413,1.413,0,1,0,2.827,0v-7.272a1.413,1.413,0,0,0-1.413-1.413Z" transform="translate(334.272 32.102)" fill="#2f2e41"/><path d="M540,669.493a1.413,1.413,0,0,0-1.413,1.413v7.272a1.413,1.413,0,1,0,2.827,0v-7.272A1.413,1.413,0,0,0,540,669.493Z" transform="translate(333.622 32.102)" fill="#2f2e41"/><path d="M548.323,669.493a1.413,1.413,0,0,0-1.413,1.413v7.272a1.413,1.413,0,1,0,2.827,0v-7.272a1.413,1.413,0,0,0-1.413-1.413Z" transform="translate(332.971 32.102)" fill="#2f2e41"/><circle cx="21.364" cy="21.364" r="21.364" transform="translate(866.053 726.657)" fill="#ed9da0"/><circle cx="21.364" cy="21.364" r="21.364" transform="translate(1015.307 730.766)" fill="#ed9da0"/><path d="M951.482,443.834c-2.111-3.492-4.613-7.22-8.531-8.36-4.537-1.32-9.2,1.3-13.151,3.891a383.216,383.216,0,0,0-34.1,25.128l.012.136c8.483-.585,15.524,21.972,24.007,21.387,6.129-.423,13.912-24.045,19.328-26.945,2.055-1.1,4.059-2.57,6.388-2.672,2.894-.127,5.417,1.894,7.4,4.005,11.729,12.49,15.123,31.589,28.281,42.562a417.584,417.584,0,0,0-29.629-59.131Z" transform="translate(367.473 -1.438)" fill="#38bdf8"/><path d="M971.668,473.478q9.281,16.763,19.688,32.86v.008c-.041.378-.1.756-.156,1.134q-1.257-1.923-2.49-3.862-9.343-14.655-17.757-29.869-3.994-7.235-7.79-14.585-2.934-5.694-5.744-11.455c-.534-1.1-1.052-2.2-1.569-3.311-1.216-2.6-2.416-5.21-3.7-7.773-1.463-2.925-3.246-5.982-5.933-7.946A8.094,8.094,0,0,0,942,427.052a11.772,11.772,0,0,0-6.105,1.75,196.482,196.482,0,0,0-38.645,26.648A201.367,201.367,0,0,0,865.865,490.3c-.279.394-.937.016-.657-.386,1.109-1.561,2.227-3.1,3.377-4.626a202.328,202.328,0,0,1,51.645-48.169q5.017-3.254,10.23-6.2c1.75-.994,3.509-1.972,5.3-2.892a12.923,12.923,0,0,1,5.62-1.742c6.82-.107,10.354,7.617,12.778,12.811q1.134,2.453,2.309,4.9,4.425,9.244,9.195,18.341Q968.6,467.936,971.668,473.478Z" transform="translate(369.861 -0.747)" fill="#3f3d56"/><path d="M894.057,452.725c-.4-.442-.79-.883-1.189-1.325-3.144-3.477-6.518-6.914-10.836-8.908a15.72,15.72,0,0,0-6.586-1.527,18.8,18.8,0,0,0-6.839,1.491c-1.03.411-2.036.878-3.028,1.375-1.133.57-2.246,1.178-3.354,1.792q-3.119,1.726-6.157,3.6-6.045,3.736-11.712,8.043-2.937,2.233-5.754,4.613-2.619,2.211-5.133,4.54c-.358.331-.893-.2-.535-.535.442-.411.888-.82,1.335-1.224q1.893-1.711,3.846-3.356,3.562-3.006,7.308-5.779,5.826-4.315,12.052-8.045,3.112-1.862,6.309-3.568c.644-.343,1.295-.679,1.953-1a31.142,31.142,0,0,1,4.643-1.89,16.518,16.518,0,0,1,7.013-.689,18.259,18.259,0,0,1,6.47,2.238c4.24,2.37,7.528,6.034,10.728,9.61C894.915,452.551,894.383,453.089,894.057,452.725Z" transform="translate(372.387 -1.837)" fill="#3f3d56"/><path d="M865.193,469.927a4.882,4.882,0,0,1-3.028-.867c-2.346-1.777-2.285-6.047.188-13.052a14.734,14.734,0,0,1,7.976-8.572,13.653,13.653,0,0,1,11-.065q.455.2.9.424h0a32.385,32.385,0,0,1,5.623,3.989,37.148,37.148,0,0,0,4.683,3.459l.551.323-.522.368C879.245,465.3,870.221,469.927,865.193,469.927Z" transform="translate(370.227 -2.308)" fill="#38bdf8"/><path d="M918.264,410.146a18.9,18.9,0,0,1-18.541-15.236,18.9,18.9,0,1,0,22.292,14.862A18.983,18.983,0,0,1,918.264,410.146Z" transform="translate(368.342 1.705)" fill="#3f3d56"/><circle cx="28.203" cy="28.203" r="28.203" transform="translate(688.196 356.857)" fill="#3f3d56" opacity="0.74"/><circle cx="28.203" cy="28.203" r="28.203" transform="translate(716.399 356.857)" fill="#ff6584" opacity="0.74"/><circle cx="28.203" cy="28.203" r="28.203" transform="translate(702.536 334.379)" fill="#38bdf8" opacity="0.74"/><rect width="75.934" height="1.643" transform="translate(732.045 377.26) rotate(-17.441)" fill="#3f3d56"/><path d="M835.379,229.333h-.468a9.408,9.408,0,0,1,4.2.993h-2.131a8.67,8.67,0,0,0-8.66,8.66v22.943a8.67,8.67,0,0,0,8.66,8.66h1.358a9.418,9.418,0,0,1-3.426.65h.468a9.493,9.493,0,0,0,9.482-9.482V238.815a9.493,9.493,0,0,0-9.482-9.482Z" transform="translate(355.707 47.972)" fill="#ff6584"/><path d="M835.379,229.333h-.468a9.408,9.408,0,0,1,4.2.993h-2.131a8.67,8.67,0,0,0-8.66,8.66v22.943a8.67,8.67,0,0,0,8.66,8.66h1.358a9.418,9.418,0,0,1-3.426.65h.468a9.493,9.493,0,0,0,9.482-9.482V238.815a9.493,9.493,0,0,0-9.482-9.482Z" transform="translate(355.707 47.972)" opacity="0.21"/><path d="M834.887,270.667a8.67,8.67,0,0,1-8.66-8.66V239.064a8.67,8.67,0,0,1,8.66-8.66h2.131a9.409,9.409,0,0,0-4.2-.993H809.877a9.493,9.493,0,0,0-9.482,9.482v22.943a9.493,9.493,0,0,0,9.482,9.482H832.82a9.418,9.418,0,0,0,3.426-.65Z" transform="translate(357.89 47.966)" fill="#38bdf8"/><path d="M834.887,270.667a8.67,8.67,0,0,1-8.66-8.66V239.064a8.67,8.67,0,0,1,8.66-8.66h2.131a9.409,9.409,0,0,0-4.2-.993H809.877a9.493,9.493,0,0,0-9.482,9.482v22.943a9.493,9.493,0,0,0,9.482,9.482H832.82a9.418,9.418,0,0,0,3.426-.65Z" transform="translate(357.89 47.966)" fill="#ff6584"/><circle cx="3.287" cy="3.287" r="3.287" transform="translate(801.662 351.735)" fill="#3f3d56"/><path d="M968.052,541.114c4.815,3.394,9.441,6.853,14.733,9.466-.1.4-.205.813-.3,1.216-.649-.3-1.282-.625-1.915-.953-5.366-2.81-9.984-6.631-15.021-9.951a32.41,32.41,0,0,0-8.1-4.059,26.73,26.73,0,0,0-9.261-1.085c-13.041.641-24.216,8.423-36.336,12.342-5.933,1.923-12.244,2.95-18.431,1.742s-11.685-4.495-17.149-7.469c-5.39-2.942-11.266-5.9-17.56-5.9-5.127.008-10.518,2.062-13.262,6.6a.615.615,0,0,1-1.06-.624,12.93,12.93,0,0,1,2.243-2.8c3.583-3.394,8.85-4.733,13.69-4.339,6.261.509,11.972,3.468,17.387,6.442,5.744,3.155,11.627,6.549,18.267,7.239,6.557.69,13.049-1.027,19.129-3.336,11.775-4.478,23.394-11.939,36.492-11.11C957.772,534.927,963.064,537.605,968.052,541.114Z" transform="translate(371.489 -25.367)" fill="#3f3d56"/><path d="M415.88,283.625v1.668a8.652,8.652,0,0,0-1.676-.164h-8.6v18.456a10.31,10.31,0,0,1-10.3,10.3H382.6v2.843a8.611,8.611,0,0,0,.666,3.32h-1.758a10.121,10.121,0,0,1-.551-3.32v-2.843h-6.985v-1.643h6.985V293.79a10.31,10.31,0,0,1,10.3-10.3h12.7V280.61h1.643v2.876h8.6a10.259,10.259,0,0,1,1.676.14Z" transform="translate(484.274 -14.808)" fill="#38bdf8"/><path d="M394.294,269.467H371.352a10.31,10.31,0,0,0-10.3,10.3v22.942a10.31,10.31,0,0,0,10.3,10.3h22.942a10.31,10.31,0,0,0,10.3-10.3V279.739A10.309,10.309,0,0,0,394.294,269.467Zm8.661,33.246a8.672,8.672,0,0,1-8.661,8.661H371.352a8.672,8.672,0,0,1-8.661-8.661V279.772a8.673,8.673,0,0,1,8.661-8.661h22.942a8.671,8.671,0,0,1,8.661,8.628Z" transform="translate(485.284 -13.938)" fill="#3f3d56"/><path d="M381.55,312.489v1.643h1.643v-1.643Zm0,0v1.643h1.643v-1.643Zm34.923-28.62a10.263,10.263,0,0,0-1.676-.14H391.854a10.31,10.31,0,0,0-10.3,10.3v22.942a10.12,10.12,0,0,0,.551,3.32,10.308,10.308,0,0,0,9.754,6.985H414.8a10.31,10.31,0,0,0,10.3-10.3V294.034A10.3,10.3,0,0,0,416.472,283.869Zm6.985,33.107a8.672,8.672,0,0,1-8.661,8.661H391.854a8.673,8.673,0,0,1-8.661-8.661V294.034a8.672,8.672,0,0,1,8.661-8.661H414.8a8.664,8.664,0,0,1,8.661,8.661Zm-41.907-4.487v1.643h1.643v-1.643Z" transform="translate(483.682 -15.052)" fill="#3f3d56"/><path d="M337.958,547.3h-80.4a2.116,2.116,0,0,0-2.115,2.108v4.766a285.287,285.287,0,0,0,9.619,29.969h72.893a2.106,2.106,0,0,0,2.108-2.108V549.41A2.11,2.11,0,0,0,337.958,547.3Z" transform="translate(350.622 -79.698)" fill="#38bdf8"/><path d="M334.679,609.663H273.737c.725,1.7,1.464,3.389,2.23,5.07h58.711C337.987,614.781,337.953,609.616,334.679,609.663Z" transform="translate(346.241 -94.634)" fill="#e4e4e4"/><path d="M336.344,624.941H280.69q1.22,2.552,2.508,5.071h53.146C339.652,630.059,339.618,624.9,336.344,624.941Z" transform="translate(344.576 -98.294)" fill="#e4e4e4"/><path d="M338.212,640.229H288.489c.908,1.7,1.844,3.389,2.793,5.07h46.93C341.52,645.346,341.486,640.181,338.212,640.229Z" transform="translate(342.708 -101.956)" fill="#e4e4e4"/><path d="M901.341,229.333h-.468a9.409,9.409,0,0,1,4.2.993H902.94a8.67,8.67,0,0,0-8.661,8.66v22.943a8.67,8.67,0,0,0,8.66,8.66H904.3a9.417,9.417,0,0,1-3.426.65h.468a9.493,9.493,0,0,0,9.482-9.482V238.815a9.493,9.493,0,0,0-9.482-9.482Z" transform="translate(228.938 47.972)" fill="#3f3d56"/><path d="M901.341,229.333h-.468a9.409,9.409,0,0,1,4.2.993H902.94a8.67,8.67,0,0,0-8.661,8.66v22.943a8.67,8.67,0,0,0,8.66,8.66H904.3a9.417,9.417,0,0,1-3.426.65h.468a9.493,9.493,0,0,0,9.482-9.482V238.815a9.493,9.493,0,0,0-9.482-9.482Z" transform="translate(228.938 47.972)" opacity="0.21"/><path d="M835.379,229.333h-.468a9.408,9.408,0,0,1,4.2.993h-2.131a8.67,8.67,0,0,0-8.66,8.66v22.943a8.67,8.67,0,0,0,8.66,8.66h1.358a9.418,9.418,0,0,1-3.426.65h.468a9.493,9.493,0,0,0,9.482-9.482V238.815a9.493,9.493,0,0,0-9.482-9.482Z" transform="translate(234.094 47.972)" fill="#38bdf8"/><path d="M835.379,229.333h-.468a9.408,9.408,0,0,1,4.2.993h-2.131a8.67,8.67,0,0,0-8.66,8.66v22.943a8.67,8.67,0,0,0,8.66,8.66h1.358a9.418,9.418,0,0,1-3.426.65h.468a9.493,9.493,0,0,0,9.482-9.482V238.815a9.493,9.493,0,0,0-9.482-9.482Z" transform="translate(234.094 47.972)" opacity="0.21"/><path d="M834.887,270.667a8.67,8.67,0,0,1-8.66-8.66V239.064a8.67,8.67,0,0,1,8.66-8.66h2.131a9.409,9.409,0,0,0-4.2-.993H809.877a9.493,9.493,0,0,0-9.482,9.482v22.943a9.493,9.493,0,0,0,9.482,9.482H832.82a9.418,9.418,0,0,0,3.426-.65Z" transform="translate(236.277 47.966)" fill="#38bdf8"/><path d="M900.849,270.667a8.67,8.67,0,0,1-8.661-8.66V239.064a8.67,8.67,0,0,1,8.661-8.66h2.131a9.408,9.408,0,0,0-4.2-.993H875.839a9.493,9.493,0,0,0-9.482,9.482v22.943a9.493,9.493,0,0,0,9.482,9.482h22.943a9.418,9.418,0,0,0,3.426-.65Z" transform="translate(231.121 47.966)" fill="#3f3d56"/><path d="M899.6,286.038,891.565,274l-5.875-8.8a3.269,3.269,0,0,0-5.842.846L877.374,274l-4.98,15.982a3.275,3.275,0,0,0,4.848,3.755l1.767-1.093a2.453,2.453,0,0,1,3.731,1.865l1.619,17.667a3.28,3.28,0,0,0,3.254,2.975c.1,0,.2-.008.3-.016l2.482-.222a3.268,3.268,0,0,0,2.958-3.558l-1.668-18.242a2.45,2.45,0,0,1,3.468-2.449l.362.164a3.27,3.27,0,0,0,4.084-4.791Z" transform="translate(230.66 45.283)" fill="#ccc"/><path d="M834.887,270.667a8.67,8.67,0,0,1-8.66-8.66V239.064a8.67,8.67,0,0,1,8.66-8.66h2.131a9.409,9.409,0,0,0-4.2-.993H809.877a9.493,9.493,0,0,0-9.482,9.482v22.943a9.493,9.493,0,0,0,9.482,9.482H832.82a9.418,9.418,0,0,0,3.426-.65Z" transform="translate(236.277 47.966)" fill="#38bdf8"/></g></svg>

package/bin/templates/multi/src/App.tsx.template

@@ -0,0 +1,92 @@
+import React, { Suspense, useEffect } from 'react';
+import { BrowserRouter as Router, useLocation } from 'react-router-dom';
+import { PageLayout } from '@bloomneo/uikit/page';
+import { Header, Footer } from './components';
+import { AppRouter } from './router';
+
+// Component to handle scroll to top on route change
+const ScrollToTop: React.FC = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
+
+// Loading component
+const LoadingSpinner: React.FC = () => (
+  <div className="flex items-center justify-center min-h-[400px]">
+    <div className="flex items-center gap-3 text-muted-foreground">
+      <div className="w-6 h-6 border-2 border-muted-foreground/30 border-t-muted-foreground rounded-full animate-spin" />
+      <span>Loading page...</span>
+    </div>
+  </div>
+);
+
+// Layout wrapper that chooses layout based on current route
+const LayoutWrapper: React.FC = () => {
+  const location = useLocation();
+
+  if (location.pathname === '/login') {
+    // Login page handles its own AuthLayout
+    return (
+      <>
+        <ScrollToTop />
+        <Suspense fallback={<LoadingSpinner />}>
+          <AppRouter />
+        </Suspense>
+      </>
+    );
+  }
+  
+  
+  if (location.pathname === '/dashboard' || location.pathname.startsWith('/dashboard')) {
+    // Dashboard uses its own AdminLayout from the page component
+    return (
+      <>
+        <ScrollToTop />
+        <Suspense fallback={<LoadingSpinner />}>
+          <AppRouter />
+        </Suspense>
+      </>
+    );
+  }
+
+  if (location.pathname === '/error' || location.pathname.startsWith('/error')) {
+    // ErrorPage uses its own BlankLayout
+    return (
+      <>
+        <ScrollToTop />
+        <Suspense fallback={<LoadingSpinner />}>
+          <AppRouter />
+        </Suspense>
+      </>
+    );
+  }
+
+  // Default: PageLayout for all other pages
+  return (
+    <PageLayout scheme="default" tone="clean" size="xl">
+      <ScrollToTop />
+      <Header />
+      <PageLayout.Content>
+        <Suspense fallback={<LoadingSpinner />}>
+          <AppRouter />
+        </Suspense>
+      </PageLayout.Content>
+      <Footer />
+    </PageLayout>
+  );
+};
+
+function App() {
+  return (
+    <Router basename="/">
+      <LayoutWrapper />
+    </Router>
+  );
+}
+
+export default App;

package/bin/templates/multi/src/components/Footer.tsx.template

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Footer as UIFooter } from '@bloomneo/uikit/footer';
+import type { NavigationItem } from '@bloomneo/uikit';
+
+// Footer navigation
+const footerNavigation: NavigationItem[] = [
+  { key: 'home', label: 'Home', href: '/' },
+  { key: 'about', label: 'About', href: '/about' },
+  { key: 'contact', label: 'Contact', href: '/contact' },
+  { key: 'privacy', label: 'Privacy', href: '/privacy' },
+  { key: 'terms', label: 'Terms', href: '/terms' },
+];
+
+// Configurable Footer Component using UIKit sections
+export const Footer: React.FC = () => {
+  const navigate = useNavigate();
+  
+  const handleNavigation = (href: string) => {
+    navigate(href);
+  };
+
+  return (
+    <UIFooter tone="subtle" size="xl">
+      <div className="flex flex-col space-y-6">
+        {/* Footer Navigation */}
+        <div className="flex flex-wrap justify-center gap-6">
+          {footerNavigation.map((item) => (
+            <button
+              key={item.key}
+              onClick={() => item.href && handleNavigation(item.href)}
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+        
+        {/* Branding Section */}
+        <div className="text-center space-y-4">
+          <div className="flex items-center justify-center gap-3">
+            <div className="w-6 h-6 bg-primary rounded flex items-center justify-center text-primary-foreground font-bold text-xs">
+              UI
+            </div>
+            <span className="font-semibold text-foreground">{{PROJECT_NAME}}</span>
+          </div>
+          
+          {/* Copyright */}
+          <div className="border-t border-border pt-4">
+            <p className="text-sm text-muted-foreground">
+              © {{CURRENT_YEAR}} {{PROJECT_NAME}} Multi-Page Template • Built with React Router & Code Splitting
+            </p>
+          </div>
+        </div>
+      </div>
+    </UIFooter>
+  );
+};