@bloomneo/uikit 1.5.0

package/bin/templates/fbca/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/fbca/package.json.template

@@ -0,0 +1,41 @@
+{
+  "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",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "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",
+    "@typescript-eslint/eslint-plugin": "^8.22.0",
+    "@typescript-eslint/parser": "^8.22.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "typescript": "^5.8.0",
+    "vite": "^7.0.0",
+    "tailwindcss": "^4.1.8",
+    "gh-pages": "^6.3.0"
+  }
+}

package/bin/templates/fbca/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/fbca/public/hero_fbca.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="848.28391" height="615.2339" viewBox="0 0 848.28391 615.2339" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><path d="M634.89862,256.95766a554.59164,554.59164,0,0,1-5.22832,71.26187c-.1145.82939-.23926,1.65873-.35424,2.488L406.03976,329.46c-.65557-.82369-1.30082-1.65726-1.926-2.50079-2.08453-2.79166-4.03825-5.66267-5.83174-8.6327-8.62038-14.3084-12.56688-31.06069-8.6121-42.61879l.07082-.1796a20.28147,20.28147,0,0,1,3.95842-6.878c9.01681-10.14979,27.24788-8.45788,43.7922-.26533-14.83916-16.24314-26.655-36.73947-27.55279-55.03482-.88028-17.84516,8.45086-30.59321,18.5716-41.42684.33209-.35814.66412-.70633.99615-1.05445.16116-.1791.332-.34819.4927-.52729,7.89635-8.256,17.10212-16.39469,30.42691-15.41018,14.61381,1.08167,30.81618,13.32235,42.1766,27.58606,11.36047,14.2537,18.90977,30.4461,26.56182,46.24911,7.66188,15.79306,15.9514,31.98965,28.24628,45.48855C540.758,253.19161,527.33168,229.2262,522.372,205.91809s-.5948-45.694,14.24655-56.67128a34.71268,34.71268,0,0,1,15.20493-6.13511c.64025-.10641,1.29065-.1928,1.95124-.26913,13.73893-1.56321,30.14281,3.18849,44.09959,14.54662,15.3703,12.50612,26.02665,31.04593,31.32878,48.64583C634.50473,223.63493,635.06974,240.57835,634.89862,256.95766Z" transform="translate(-175.85805 -142.38305)" fill="#f2f2f2"/><path d="M488.81825,329.92255l-4.26947-.02385q-2.03345-1.27134-4.08612-2.51286c-.84712-.53471-1.70412-1.04952-2.56155-1.57434q-21.24279-12.97391-42.75125-24.88928Q413.661,288.997,391.956,278.17057a1.78937,1.78937,0,0,1-1.02862-2.04581.51534.51534,0,0,1,.07115-.14957c.20183-.37889.65291-.5364,1.31127-.21271,1.77484.88994,3.55993,1.77993,5.33466,2.68988q21.76425,11.01171,43.3417,23.12254,21.56257,12.10564,42.87944,25.27995c.29879.18167.598.37335.89681.555C486.11761,328.24746,487.463,329.085,488.81825,329.92255Z" transform="translate(-175.85805 -142.38305)" fill="#fff"/><path d="M543.86768,330.23014l-2.64009-.01475c-.59545-.8333-1.18065-1.6666-1.7761-2.5q-20.98532-29.42769-41.96185-58.85538-34.35146-48.17766-68.68242-96.35523a1.70041,1.70041,0,0,1-.297-.58168c-.19573-.71113.32663-1.1282.99615-1.05445a2.0056,2.0056,0,0,1,1.395.88781q19.25925,27.018,38.50885,54.016,34.17263,47.9367,68.33556,95.86329c1.44865,2.02815,2.89724,4.06624,4.34589,6.09439C542.687,328.56355,543.28249,329.3969,543.86768,330.23014Z" transform="translate(-175.85805 -142.38305)" fill="#fff"/><path d="M602.68425,314.89856c-.13473,4.44933-.42922,8.82776-.81381,13.16564q-.11169,1.24443-.22387,2.48878l-2.77-.01548c.08471-.82949.16943-1.65905.24389-2.48866.58532-6.26685,1.00062-12.60459,1.057-19.11439a266.65605,266.65605,0,0,0-5.24956-53.75014,334.665,334.665,0,0,0-16.25856-55.84172A383.49231,383.49231,0,0,0,552.068,144.09306a1.47569,1.47569,0,0,1-.24452-.98136c.11428-.78941,1.16541-1.02353,1.95124-.26913a2.29258,2.29258,0,0,1,.3971.50222q1.91668,3.29577,3.76342,6.61116a383.2281,383.2281,0,0,1,25.46063,55.44311,333.08069,333.08069,0,0,1,15.15748,55.9256A263.07433,263.07433,0,0,1,602.68425,314.89856Z" transform="translate(-175.85805 -142.38305)" fill="#fff"/><path d="M791.57777,328.85694h-607a8.72766,8.72766,0,0,0-8.71972,8.72v411.32a8.72766,8.72766,0,0,0,8.71972,8.72h607a8.71242,8.71242,0,0,0,6.63037-3.06,2.04307,2.04307,0,0,0,.18994-.24,8.1662,8.1662,0,0,0,1.25-2.11,8.50708,8.50708,0,0,0,.65967-3.31V337.577A8.72954,8.72954,0,0,0,791.57777,328.85694Zm6.24024,420.04a6.17532,6.17532,0,0,1-1.03028,3.42,6.44578,6.44578,0,0,1-2.35986,2.12,6.1843,6.1843,0,0,1-2.8501.69h-607a6.23757,6.23757,0,0,1-6.23-6.23V337.577a6.23757,6.23757,0,0,1,6.23-6.23h607a6.23945,6.23945,0,0,1,6.24024,6.23Z" transform="translate(-175.85805 -142.38305)" fill="#3f3d56"/><rect x="1.24265" y="221.4231" width="621.95676" height="2.49281" fill="#3f3d56"/><circle cx="22.43155" cy="205.16998" r="7.47844" fill="#3f3d56"/><circle cx="43.93206" cy="205.16998" r="7.47844" fill="#3f3d56"/><circle cx="65.43257" cy="205.16998" r="7.47844" fill="#3f3d56"/><path d="M644.17739,421.50889h-312a13,13,0,0,1,0-26h312a13,13,0,0,1,0,26Zm-312-24a11,11,0,0,0,0,22h312a11,11,0,0,0,0-22Z" transform="translate(-175.85805 -142.38305)" fill="#3f3d56"/><path d="M358.08289,574.12671h-120a17.01917,17.01917,0,0,1-17-17v-56a17.01917,17.01917,0,0,1,17-17h120a17.01917,17.01917,0,0,1,17,17v56A17.01917,17.01917,0,0,1,358.08289,574.12671Z" transform="translate(-175.85805 -142.38305)" fill="#38bdf8"/><path d="M548.083,574.12671h-120a17.01919,17.01919,0,0,1-17.00012-17v-56a17.01919,17.01919,0,0,1,17.00012-17h120a17.01917,17.01917,0,0,1,17,17v56A17.01917,17.01917,0,0,1,548.083,574.12671Z" transform="translate(-175.85805 -142.38305)" fill="#38bdf8"/><path d="M738.083,574.12671h-120a17.01917,17.01917,0,0,1-17-17v-56a17.01917,17.01917,0,0,1,17-17h120a17.01917,17.01917,0,0,1,17,17v56A17.01917,17.01917,0,0,1,738.083,574.12671Z" transform="translate(-175.85805 -142.38305)" fill="#38bdf8"/><path d="M358.08289,692.12671h-120a17.01917,17.01917,0,0,1-17-17v-56a17.01917,17.01917,0,0,1,17-17h120a17.01917,17.01917,0,0,1,17,17v56A17.01917,17.01917,0,0,1,358.08289,692.12671Z" transform="translate(-175.85805 -142.38305)" fill="#38bdf8"/><path d="M548.083,692.12671h-120a17.01919,17.01919,0,0,1-17.00012-17v-56a17.01919,17.01919,0,0,1,17.00012-17h120a17.01917,17.01917,0,0,1,17,17v56A17.01917,17.01917,0,0,1,548.083,692.12671Z" transform="translate(-175.85805 -142.38305)" fill="#38bdf8"/><path d="M738.083,692.12671h-120a17.01917,17.01917,0,0,1-17-17v-56a17.01917,17.01917,0,0,1,17-17h120a17.01917,17.01917,0,0,1,17,17v56A17.01917,17.01917,0,0,1,738.083,692.12671Z" transform="translate(-175.85805 -142.38305)" fill="#38bdf8"/><circle cx="697.11462" cy="248.74366" r="33" fill="#2f2e41"/><path d="M790.30093,562.79573a10.7427,10.7427,0,0,1,6.25283-15.23974l41.81616-88.45906,19.12793,13.413-47.11861,82.73471a10.80091,10.80091,0,0,1-20.07831,7.55105Z" transform="translate(-175.85805 -142.38305)" fill="#ffb8b8"/><path d="M826.13287,470.8413a4.81169,4.81169,0,0,1,.55209-3.97272l13.00137-20.38208a13.37737,13.37737,0,0,1,24.45588,10.8499l-6.54916,23.35317a4.81687,4.81687,0,0,1-6.60409,3.09631L828.78041,473.855A4.81141,4.81141,0,0,1,826.13287,470.8413Z" transform="translate(-175.85805 -142.38305)" fill="#38bdf8"/><path d="M931.348,571.56571a10.74268,10.74268,0,0,1-7.44457-14.69442l-39.60233-89.47208,22.65457-5.706,31.80418,89.74234a10.80091,10.80091,0,0,1-7.41185,20.13012Z" transform="translate(-175.85805 -142.38305)" fill="#ffb8b8"/><polygon points="766.285 591.358 754.765 595.553 733.105 553.115 750.107 546.924 766.285 591.358" fill="#ffb8b8"/><path d="M923.47893,735.69332H947.1228a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H908.59207a0,0,0,0,1,0,0v0A14.88686,14.88686,0,0,1,923.47893,735.69332Z" transform="translate(-374.11248 219.90765) rotate(-20.00652)" fill="#2f2e41"/><path d="M910.69461,706.89767l-43.88711-76.802a4.82207,4.82207,0,0,1,.052-4.86807l19.76235-32.93708a4.81658,4.81658,0,0,1,8.66077.84148l37.36376,103.46818a4.79859,4.79859,0,0,1-2.46853,5.9897l-13.23928,6.27089a4.7736,4.7736,0,0,1-2.04386.4589A4.84031,4.84031,0,0,1,910.69461,706.89767Z" transform="translate(-175.85805 -142.38305)" fill="#2f2e41"/><circle cx="694.11075" cy="260.23901" r="24.56103" fill="#ffb8b8"/><path d="M835.0336,513.87352c-19.34214-42.88856.15732-66.85887,9.43874-75.17337a14.557,14.557,0,0,1,9.73013-3.72135h34.59941a14.576,14.576,0,0,1,13.03753,21.09462l-23.1296,46.25869-43.488,11.95954Z" transform="translate(-175.85805 -142.38305)" fill="#38bdf8"/><path d="M885.65074,483.434a4.8117,4.8117,0,0,1-2.64533-3.01488l-6.92414-23.16293a13.37737,13.37737,0,0,1,24.198-11.41337l13.39047,20.22269a4.81688,4.81688,0,0,1-1.97428,7.02164l-22.03343,10.31357A4.81148,4.81148,0,0,1,885.65074,483.434Z" transform="translate(-175.85805 -142.38305)" fill="#38bdf8"/><polygon points="687.147 602.955 674.887 602.954 669.055 555.666 687.149 555.667 687.147 602.955" fill="#ffb8b8"/><path d="M666.12988,599.45141h23.64387a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H651.243a0,0,0,0,1,0,0v0A14.88686,14.88686,0,0,1,666.12988,599.45141Z" fill="#2f2e41"/><path d="M857.81014,727.28565l-19.62855-2.26417a4.81784,4.81784,0,0,1-4.22285-5.42l17.51831-131.89992a3.75008,3.75008,0,0,0-.07291-1.37669l-17.60768-72.64473a4.761,4.761,0,0,1,.75368-3.92624c2.73038-3.76421,12.08576-12.53656,39.91435-12.70276h.03006a4.83432,4.83432,0,0,1,4.39715,2.82655l3.7122,8.16606a3.76278,3.76278,0,0,0,1.25282,1.51259c5.10954,3.61682,29.862,23.918,15.32784,68.48852-14.28487,43.80741-32.58717,128.8549-36.11121,145.45881a4.79131,4.79131,0,0,1-4.69769,3.81438A4.92486,4.92486,0,0,1,857.81014,727.28565Z" transform="translate(-175.85805 -142.38305)" fill="#2f2e41"/><path d="M895.77671,387.17325A33.40487,33.40487,0,0,1,876.686,393.0731a20.4708,20.4708,0,0,0,8.11361,3.338,67.35862,67.35862,0,0,1-27.514.15459,17.80737,17.80737,0,0,1-5.75977-1.97823,7.2892,7.2892,0,0,1-3.55521-4.75471c-.60365-3.44851,2.08348-6.58157,4.876-8.69307A35.96732,35.96732,0,0,1,883.07116,375.1c3.37627.87272,6.75853,2.34727,8.9515,5.05866s2.84258,6.8915.75322,9.68353Z" transform="translate(-175.85805 -142.38305)" fill="#2f2e41"/><path d="M879.3779,370.08826c-2.8056-.93408-5.69279-1.91393-7.916-3.86357s-3.63443-5.13865-2.63514-7.92169c.96283-2.6815,3.89625-4.24792,6.73756-4.45882s5.63774.66859,8.35114,1.53748c-1.22708-1.85419-2.49474-5.44908-3.60458-9.24084-2.53233-8.65169,8.02021-16.55262,17.01128-15.90053q.39724.02881.76911.08264c9.066,1.32279,13.769,4.78121,20.10086,11.40309,7.92094,8.28379,12.06335,19.46117,14.83741,30.58174s4.403,22.56415,8.3047,33.341S951.817,426.785,961.8803,432.2706a33.98159,33.98159,0,0,0,35.25973-2.173,30.44213,30.44213,0,0,1-34.97174,34.48426c-12.992-2.09839-23.39954-12.56259-28.9584-24.49133s-7.07657-25.28067-8.47144-38.36692-2.80706-26.434-8.18513-38.44535c-2.1766-4.86121-5.38082-9.809-11.10726-10.58456a6.8902,6.8902,0,0,0-7.38673,3.95869c-2.51776,6.09372,6.09628,11.25411,3.88914,17.06135a6.39293,6.39293,0,0,1-5.69215,3.88711c-4.1636.2738-7.58409-2.11256-10.80631-4.41625C878.85854,368.47208,879.3779,370.08826,879.3779,370.08826Z" transform="translate(-175.85805 -142.38305)" fill="#2f2e41"/><path d="M1023.142,757.617h-230a1,1,0,0,1,0-2h230a1,1,0,0,1,0,2Z" transform="translate(-175.85805 -142.38305)" fill="#3f3d56"/></svg>

package/bin/templates/fbca/src/utils/asset.ts

@@ -0,0 +1,6 @@
+export const asset = (path: string): string => {
+  const base = (import.meta as any).env?.BASE_URL || '/';
+  const cleanPath = path.startsWith('/') ? path.slice(1) : path;
+  if (base === '/') return `/${cleanPath}`;
+  return `${base}${cleanPath}`;
+};

package/bin/templates/fbca/src/web/App.tsx.template

@@ -0,0 +1,20 @@
+/**
+ * Main App Component - FBCA Architecture
+ * Feature-Based Component Architecture with auto-discovery routing
+ */
+
+import { BrowserRouter as Router } from 'react-router-dom';
+import { ThemeProvider } from '@bloomneo/uikit/theme-provider';
+import { PageRouter } from './lib/page-router';
+
+function App() {
+  return (
+    <ThemeProvider theme="{{DEFAULT_THEME}}" mode="{{DEFAULT_MODE}}" forceConfig={true}>
+      <Router basename="/">
+        <PageRouter />
+      </Router>
+    </ThemeProvider>
+  );
+}
+
+export default App;

package/bin/templates/fbca/src/web/features/auth/pages/index.tsx.template

@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import { Button } from '@bloomneo/uikit/button';
+import { AuthLayout } from '@bloomneo/uikit/auth';
+import { Eye, EyeOff, Mail, Lock, ArrowRight } from 'lucide-react';
+import { SEO } from '../../../shared/components';
+
+const LoginPage: React.FC = () => {
+  const [showPassword, setShowPassword] = useState(false);
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    rememberMe: false
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('Login attempt:', formData);
+    // Handle login logic here
+    alert('Login demo - check console for form data');
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value, type, checked } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: type === 'checkbox' ? checked : value
+    }));
+  };
+
+  return (
+    <>
+      <SEO
+        title="Login - Sign In | UIKit FBCA Demo"
+        description="Sign in to your account to access the UIKit FBCA Demo. Experience authentication flow with modern form validation and social login options."
+        keywords="login, sign in, authentication, auth form, react auth, fbca, user authentication"
+        ogTitle="Login - UIKit FBCA Demo"
+        ogDescription="Sign in to access the UIKit Feature-Based Component Architecture demo"
+      />
+      <AuthLayout
+        scheme="hero"
+        tone="clean"
+        size="md"
+        title="Welcome back"
+        subtitle="Sign in to your account to continue"
+        imageUrl="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg"
+        imageAlt="Mountains with clouds and forest fog"
+        imageOverlay="dark"
+      >
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Email Field */}
+          <div className="space-y-2">
+            <label htmlFor="email" className="text-sm font-medium">
+              Email
+            </label>
+            <div className="relative">
+              <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+              <input
+                id="email"
+                name="email"
+                type="email"
+                placeholder="Enter your email"
+                value={formData.email}
+                onChange={handleInputChange}
+                className="w-full pl-10 pr-3 py-2 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                required
+              />
+            </div>
+          </div>
+
+          {/* Password Field */}
+          <div className="space-y-2">
+            <label htmlFor="password" className="text-sm font-medium">
+              Password
+            </label>
+            <div className="relative">
+              <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+              <input
+                id="password"
+                name="password"
+                type={showPassword ? 'text' : 'password'}
+                placeholder="Enter your password"
+                value={formData.password}
+                onChange={handleInputChange}
+                className="w-full pl-10 pr-10 py-2 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                required
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="absolute right-1 top-1 h-8 w-8 p-0"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </Button>
+            </div>
+          </div>
+
+          {/* Remember Me & Forgot Password */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <input
+                id="rememberMe"
+                name="rememberMe"
+                type="checkbox"
+                checked={formData.rememberMe}
+                onChange={handleInputChange}
+                className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
+              />
+              <label htmlFor="rememberMe" className="text-sm">
+                Remember me
+              </label>
+            </div>
+            <Button variant="link" size="sm" className="px-0">
+              Forgot password?
+            </Button>
+          </div>
+
+          {/* Submit Button */}
+          <Button type="submit" className="w-full">
+            Sign in
+            <ArrowRight className="ml-2 h-4 w-4" />
+          </Button>
+        </form>
+
+        {/* Divider */}
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-background px-2 text-muted-foreground">
+              Or continue with
+            </span>
+          </div>
+        </div>
+
+        {/* Social Login */}
+        <Button variant="outline" className="w-full">
+          Continue with GitHub
+        </Button>
+
+        {/* Sign Up Link */}
+        <div className="text-center">
+          <p className="text-sm text-muted-foreground">
+            Don't have an account?{' '}
+            <span className="font-medium text-primary hover:underline cursor-pointer">
+              Sign up (Demo)
+            </span>
+          </p>
+        </div>
+      </AuthLayout>
+    </>
+  );
+};
+
+export default LoginPage;