@bloomneo/uikit 1.5.0

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

@@ -0,0 +1,233 @@
+import React from 'react';
+import { Button } from '@bloomneo/uikit/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { useTheme } from '@bloomneo/uikit/theme-provider';
+import { asset } from './utils/asset';
+
+const UIKitShowcase: React.FC = () => {
+  const { theme, mode, setTheme, setMode, availableThemes, toggleMode } = useTheme();
+
+  const themeDescriptions = {
+    base: 'Clean default configuration showcasing the base system with Inter typography (default)',
+    elegant: 'Fresh sky blue theme with clean design',
+    metro: 'Dark teal theme with bright yellow accents',
+    studio: 'Sophisticated neutral theme with golden accents',
+    vivid: 'Premium cursive theme with sophisticated typography for luxury brands'
+  };
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      {/* Header */}
+      <header className="border-b border-border p-6">
+        <div className="max-w-6xl mx-auto flex flex-wrap items-center justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 bg-primary rounded flex items-center justify-center text-primary-foreground font-bold text-sm">
+              UI
+            </div>
+            <div>
+              <h3 className="voila-brand-logo text-xl font-bold">@bloomneo/uikit</h3>
+              <p className="text-xs text-muted-foreground">Professional React UI Components</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <select
+              value={theme}
+              onChange={(e) => setTheme(e.target.value as any)}
+              className="bg-background border border-input rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+            >
+              {availableThemes.map(themeId => (
+                <option key={themeId} value={themeId}>
+                  {themeId.charAt(0).toUpperCase() + themeId.slice(1)}
+                </option>
+              ))}
+            </select>
+
+            <Button onClick={toggleMode} variant="outline" size="sm">
+              {mode === 'dark' ? '☀️' : '🌙'}
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-6xl mx-auto p-6 space-y-8">
+
+        {/* Hero */}
+        <section className="text-center py-8">
+          <div className="space-y-6">
+            <div className="mb-6">
+              <img
+                src={asset('/hero.svg')}
+                alt="UIKit Hero Illustration"
+                className="mx-auto max-w-md w-full h-auto"
+              />
+            </div>
+            <h1 className="voila-heading text-gradient-primary mb-3">
+              Beautiful UI Components
+            </h1>
+            <p className="voila-subheading text-accent mb-6">
+              {availableThemes.length} themes • {mode} mode • Professional React components
+            </p>
+            <div className="text-sm text-muted-foreground bg-muted px-4 py-2 rounded inline-block">
+              {themeDescriptions[theme as keyof typeof themeDescriptions]}
+            </div>
+          </div>
+        </section>
+
+        {/* Colors */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="bg-primary text-primary-foreground p-4 rounded-lg text-center">
+            <div className="text-sm font-medium">Primary</div>
+          </div>
+          <div className="bg-secondary text-secondary-foreground p-4 rounded-lg text-center">
+            <div className="text-sm font-medium">Secondary</div>
+          </div>
+          <div className="bg-accent text-accent-foreground p-4 rounded-lg text-center">
+            <div className="text-sm font-medium">Accent</div>
+          </div>
+          <div className="bg-muted text-muted-foreground p-4 rounded-lg text-center">
+            <div className="text-sm font-medium">Muted</div>
+          </div>
+        </div>
+
+        {/* Components */}
+        <div className="space-y-6">
+
+          {/* Buttons */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Buttons</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex flex-wrap gap-3">
+                <Button size="lg">Primary</Button>
+                <Button variant="secondary" size="lg">Secondary</Button>
+                <Button variant="outline" size="lg">Outline</Button>
+                <Button variant="ghost" size="lg">Ghost</Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>Simple Card</CardTitle>
+                <CardDescription>Basic card example</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">Card content goes here.</p>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Action Card</CardTitle>
+                <CardDescription>With actions</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button size="lg" className="w-full">Action</Button>
+              </CardContent>
+            </Card>
+
+            <div className="bg-primary text-primary-foreground p-6 rounded-lg">
+              <h4 className="font-semibold mb-2">Primary Card</h4>
+              <p className="text-sm opacity-90">Custom background</p>
+            </div>
+          </div>
+
+          {/* Form Elements */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Form Elements</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <input
+                  type="text"
+                  placeholder="Text input"
+                  className="p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                />
+                <select className="p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring">
+                  <option>Select option</option>
+                  <option>Option 1</option>
+                  <option>Option 2</option>
+                </select>
+              </div>
+
+              <textarea
+                placeholder="Textarea"
+                rows={3}
+                className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+              />
+            </CardContent>
+          </Card>
+
+          {/* Chart Colors */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Chart Colors</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-5 gap-3">
+                <div className="text-center">
+                  <div className="w-full h-12 rounded mb-2 bg-chart1" />
+                  <div className="text-xs text-muted-foreground">chart1</div>
+                </div>
+                <div className="text-center">
+                  <div className="w-full h-12 rounded mb-2 bg-chart2" />
+                  <div className="text-xs text-muted-foreground">chart2</div>
+                </div>
+                <div className="text-center">
+                  <div className="w-full h-12 rounded mb-2 bg-chart3" />
+                  <div className="text-xs text-muted-foreground">chart3</div>
+                </div>
+                <div className="text-center">
+                  <div className="w-full h-12 rounded mb-2 bg-chart4" />
+                  <div className="text-xs text-muted-foreground">chart4</div>
+                </div>
+                <div className="text-center">
+                  <div className="w-full h-12 rounded mb-2 bg-chart5" />
+                  <div className="text-xs text-muted-foreground">chart5</div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Typography Scale */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Typography</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <h1 className="text-3xl font-bold">Heading 1</h1>
+            <h2 className="text-2xl font-bold">Heading 2</h2>
+            <h3 className="text-xl font-bold">Heading 3</h3>
+            <p className="text-base">Body text - Lorem ipsum dolor sit amet consectetur.</p>
+            <p className="text-sm text-muted-foreground">Small text for captions and metadata.</p>
+            <code className="text-sm bg-muted px-2 py-1 rounded">Code snippet</code>
+          </CardContent>
+        </Card>
+
+      </main>
+
+      {/* Footer */}
+      <footer className="border-t border-border p-6 mt-8">
+        <div className="max-w-6xl mx-auto text-center">
+          <p className="text-sm text-muted-foreground">
+            @bloomneo/uikit • {theme.charAt(0).toUpperCase() + theme.slice(1)} theme • {mode.charAt(0).toUpperCase() + mode.slice(1)} mode
+          </p>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+function App() {
+  return (
+    <UIKitShowcase />
+  );
+}
+
+export default App;

package/bin/templates/single/src/index.css.template

@@ -0,0 +1,7 @@
+/**
+ * Main Styles Entry Point
+ * Tailwind CSS v4+ with UIKit integration
+ */
+
+/* Tailwind CSS v4+ - REQUIRED */
+@import "tailwindcss";

package/bin/templates/single/src/main.tsx.template

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ThemeProvider } from '@bloomneo/uikit/theme-provider';
+import App from './App';
+import './index.css';
+import '@bloomneo/uikit/styles';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ThemeProvider theme="{{THEME}}" mode="light" forceConfig={true}>
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>
+);

package/bin/templates/single/src/styles/fonts.css

@@ -0,0 +1,99 @@
+/* Self-hosted fonts for UIKit */
+/* This approach eliminates the need for @fontsource dependencies */
+
+/* Libre Baskerville - used in Vivid & Metro themes */
+@font-face {
+  font-family: 'Libre Baskerville';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/libre-baskerville-latin-400-normal.woff2') format('woff2'),
+       url('/fonts/libre-baskerville-latin-400-normal.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Libre Baskerville';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/libre-baskerville-latin-700-normal.woff2') format('woff2'),
+       url('/fonts/libre-baskerville-latin-700-normal.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Caveat - used in Vivid theme */
+@font-face {
+  font-family: 'Caveat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/caveat-latin-400-normal.woff2') format('woff2'),
+       url('/fonts/caveat-latin-400-normal.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Caveat';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/caveat-latin-700-normal.woff2') format('woff2'),
+       url('/fonts/caveat-latin-700-normal.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Playfair Display - used in Vivid theme */
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/playfair-display-latin-400-normal.woff2') format('woff2'),
+       url('/fonts/playfair-display-latin-400-normal.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/playfair-display-latin-500-normal.woff2') format('woff2'),
+       url('/fonts/playfair-display-latin-500-normal.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Montserrat - used in Elegant theme */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/montserrat-latin-400-normal.woff2') format('woff2'),
+       url('/fonts/montserrat-latin-400-normal.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/montserrat-latin-500-normal.woff2') format('woff2'),
+       url('/fonts/montserrat-latin-500-normal.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/montserrat-latin-600-normal.woff2') format('woff2'),
+       url('/fonts/montserrat-latin-600-normal.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* All other fonts would continue here... */
+/* For brevity, including just the essential ones for now */

package/bin/templates/single/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/single/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/bin/templates/single/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/bin/templates/single/vite.config.ts.template

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+import tailwindcss from '@tailwindcss/vite'
+import { fileURLToPath } from 'url'
+
+// Get __dirname equivalent in ESM
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  // base: '/', // Uncomment this line to make the default asset loading to '/' rather than relative paths
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    port: 5173,
+    host: true,
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom'],
+          uikit: ['@bloomneo/uikit']
+        }
+      }
+    }
+  }
+})

package/bin/templates/spa/README.md.template

@@ -0,0 +1,105 @@
+# {{PROJECT_NAME}}
+
+**A modern React SPA built with @bloomneo/uikit**
+
+## 🚀 Quick Start
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+## 🎨 UIKit SPA Features
+
+This Single Page Application is built with [@bloomneo/uikit](https://github.com/bloomneo/uikit) featuring:
+
+- **37 UI Components** - Forms, tables, navigation, overlays, and more
+- **5 Professional Themes** - Base, Elegant, Metro, Studio, Vivid
+- **5 Layout Systems** - Admin, Auth, Page, Popup, Blank layouts
+- **ScrollToTop Navigation** - Automatic scroll-to-top on route changes
+- **Theme System** - Light/dark mode with semantic OKLCH colors
+- **TypeScript Support** - Full type safety out of the box
+- **SEO Optimization** - Built-in SEO components and hooks
+
+## 🏗️ Project Structure
+
+```
+{{PROJECT_NAME}}/
+├── src/
+│   ├── App.tsx             # Main SPA component
+│   ├── main.tsx            # Application entry point
+│   ├── index.css           # Tailwind CSS v4+ and UIKit styles
+│   ├── components/         # Reusable components
+│   │   └── SEO.tsx         # SEO component
+│   ├── hooks/              # Custom hooks
+│   │   └── useSEO.ts       # SEO hook
+│   └── utils/
+│       └── asset.ts        # Asset utility for deployment paths
+├── public/                 # Static assets
+├── docs/                   # Documentation guides
+├── package.json            # Dependencies and scripts
+└── README.md              # This file
+```
+
+## 🎯 Development Commands
+
+```bash
+npm run dev         # Start development server (localhost:5173)
+npm run build       # Build for production
+npm run preview     # Preview production build
+npm run deploy:gh   # Deploy to GitHub Pages
+```
+
+## 🎨 Theme Customization
+
+Change your theme by updating the ThemeProvider in `src/main.tsx`:
+
+```jsx
+<ThemeProvider theme="elegant" mode="light">
+  <App />
+</ThemeProvider>
+```
+
+Available themes: `base` | `elegant` | `metro` | `studio` | `vivid`
+Available modes: `light` | `dark`
+
+## 📦 Built With
+
+- **[React 19](https://react.dev)** - UI library
+- **[TypeScript](https://typescriptlang.org)** - Type safety
+- **[Vite](https://vitejs.dev)** - Build tool and dev server
+- **[Tailwind CSS v4+](https://tailwindcss.com)** - Utility-first CSS framework
+- **[@bloomneo/uikit](https://github.com/bloomneo/uikit)** - UI components and layouts
+- **[Lucide React](https://lucide.dev)** - Icon library
+
+## 🌐 Asset Management
+
+Use the included asset utility for deployment-friendly paths:
+
+```jsx
+import { asset } from './utils/asset';
+
+// Works in both development and production deployments
+<img src={asset('/images/hero.jpg')} alt="Hero" />
+<link rel="icon" href={asset('/favicon.ico')} />
+```
+
+## 📚 Resources
+
+- **[UIKit Documentation](https://docs.anthropic.com/en/docs/claude-code/claude_code_docs_map.md)** - Complete component reference
+- **[UIKit LLM Guide](./docs/UIKIT_LLM_GUIDE.md)** - Comprehensive usage guide
+- **[React Documentation](https://react.dev)** - React framework guide
+- **[Vite Documentation](https://vitejs.dev)** - Build tool documentation
+
+---
+
+**Built with ❤️ using [@bloomneo/uikit](https://github.com/bloomneo/uikit)** ✨

package/bin/templates/spa/components/SEO.tsx.template

@@ -0,0 +1,19 @@
+/**
+ * SEO Component
+ * Simple wrapper around useSEO hook for easy page-level SEO management
+ */
+
+import React from 'react';
+import { useSEO } from '../hooks/useSEO';
+
+interface SEOProps {
+  title?: string;
+  description?: string;
+}
+
+export const SEO: React.FC<SEOProps> = (props) => {
+  useSEO(props);
+  return null; // This component doesn't render anything
+};
+
+export default SEO;